@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

body {
  font-family: "Zen Maru Gothic", sans-serif !important;
  /* Zen Maru Gothic を追加して丸みを出す */
  background-color: #fefefe;
  /* ベースカラー: オフホワイト */
  color: #333032;
  /* テキストカラー: 少し柔らかいダークグレー */
}

html {
  font-family: "Zen Maru Gothic", sans-serif !important;
}

.font-zen-maru {
  font-family: "Zen Maru Gothic", sans-serif;
}

/* カスタムカラー */
.bg-main-pink {
  background-color: #ffbdc7;
}

.text-main-pink {
  color: #ffbdc7;
}

.border-main-pink {
  border-color: #ffbdc7;
}

.bg-sub-purple {
  background-color: #d9c6e2;
}

.text-sub-purple {
  color: #d9c6e2;
}

.bg-accent-coral {
  background-color: #ff7a8a;
}

.text-accent-coral {
  color: #ff7a8a;
}

.hover-bg-accent-coral-dark:hover {
  background-color: #e56d7a;
}

/* ボタンホバー */

.text-link-purple {
  color: #9966cc;
}

.hover-text-link-purple-dark:hover {
  color: #7a52a3;
}

/* ソフトなテキストグロー（ロゴの雰囲気を優しく反映） */
.text-gentle-glow-pink {
  text-shadow: 0 0 10px rgba(255, 189, 199, 0.6),
    /* #FFBDC7 */ 0 0 15px rgba(255, 189, 199, 0.4);
}

.text-gentle-glow-coral {
  text-shadow: 0 0 12px rgba(255, 122, 138, 0.7),
    /* #FF7A8A */ 0 0 18px rgba(255, 122, 138, 0.5);
}

.hero-min-height {
  min-height: calc(100vh - 88px);
  /* ヘッダー高さを考慮 (仮に88px) */
  padding-top: 2rem;
  /* モバイルでのヘッダーとの被りを避ける */
  padding-bottom: 4rem;
  /* モバイルでのコンテンツ下部余白 */
}

@media (min-width: 768px) {
  /* md breakpoint */
  .hero-min-height {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* 手書き風の円の背景 */
.hand-drawn-circle {
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M236.296 184.216C254.937 143.94 228.863 97.1534 183.092 83.211C137.32 69.2686 86.2299 88.9381 67.5893 129.214C48.9487 169.49 75.0222 216.277 120.794 230.219C166.565 244.161 217.656 224.492 236.296 184.216Z' fill='%23FFBDC7' fill-opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  /* もしくは cover, auto など調整 */
  background-position: center;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.icon-gradient {
  background: linear-gradient(135deg, #ff6b9d, #ff8cc8);
}

.icon-gradient-2 {
  background: linear-gradient(135deg, #a8e6cf, #7fcdcd);
}

.icon-gradient-3 {
  background: linear-gradient(135deg, #ffd93d, #ff9a56);
}

.kawaii-shadow {
  box-shadow: 0 8px 32px rgba(255, 192, 203, 0.3),
    0 4px 16px rgba(147, 112, 219, 0.2);
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

.floating-delay {
  animation: floating 3s ease-in-out infinite;
  animation-delay: 1s;
}

.floating-delay-2 {
  animation: floating 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.sparkle {
  animation: sparkle 2s linear infinite;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.kawaii-gradient {
  background: linear-gradient(
    135deg,
    #ffeef8 0%,
    #ffe5f1 25%,
    #ffd6ea 50%,
    #ffb3d9 75%,
    #ff9fcd 100%
  );
}

.decoration-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9fcd, #ffb3d9);
  opacity: 0.2;
}

.decoration-shape {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #d4a5ff, #e5b3ff);
  border-radius: 0 100% 0 100%;
  opacity: 0.25;
}

.decoration-star2 {
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, #ffd700, #ffeb3b);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  opacity: 0.3;
}

/* 吹き出しスタイル */
.speech-bubble {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fef7ff 100%);
  border-radius: 20px;
  padding: 24px;
  margin-top: 20px;
  border: 3px solid #f8d7da;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-bottom: 15px solid #f8d7da;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 33px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom: 12px solid #ffffff;
}

.speech-bubble-purple {
  border-color: #e8d5ff;
}

.speech-bubble-purple::before {
  border-bottom-color: #e8d5ff;
}

.speech-bubble-blue {
  border-color: #cce5ff;
}

.speech-bubble-blue::before {
  border-bottom-color: #cce5ff;
}

.speech-bubble-green {
  border-color: #d4f4dd;
}

.speech-bubble-green::before {
  border-bottom-color: #d4f4dd;
}

/* プロフィール画像スタイル */
.profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.coral-gradient {
  background: linear-gradient(
    135deg,
    #ff7a7a 0%,
    #ff9999 25%,
    #ffb3b3 50%,
    #ff8a95 75%,
    #ff6b8a 100%
  );
}
.kawaii-shadow {
  box-shadow: 0 12px 40px rgba(255, 107, 138, 0.4),
    0 6px 20px rgba(255, 154, 153, 0.3);
}
.button-shadow {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(255, 255, 255, 0.2) inset;
}
.floating {
  animation: floating 3s ease-in-out infinite;
}
.floating-delay {
  animation: floating 3s ease-in-out infinite;
  animation-delay: 1s;
}
.floating-delay-2 {
  animation: floating 3s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
      0 0 40px rgba(255, 179, 179, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8),
      0 0 60px rgba(255, 179, 179, 0.5);
  }
}
.bounce-in {
  animation: bounceIn 1s ease-out;
}
@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.decoration-cloud {
  width: 80px;
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  position: relative;
}
.decoration-cloud::before,
.decoration-cloud::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.decoration-cloud::before {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 10px;
}
.decoration-cloud::after {
  width: 60px;
  height: 40px;
  top: -15px;
  right: 10px;
}
.decoration-star {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.6);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}
.decoration-heart {
  width: 40px;
  height: 36px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  transform: rotate(-45deg);
}
.decoration-heart:before,
.decoration-heart:after {
  content: "";
  width: 26px;
  height: 40px;
  position: absolute;
  left: 20px;
  top: 0;
  background: inherit;
  border-radius: 20px 20px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.decoration-heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
.line-button {
  background: linear-gradient(45deg, #00b900, #00c300);
  transition: all 0.3s ease;
}
.line-button:hover {
  background: linear-gradient(45deg, #00a000, #00b200);
  transform: translateY(-2px) scale(1.05);
}
.contact-button {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transition: all 0.3s ease;
}
.contact-button:hover {
  background: linear-gradient(45deg, #5856eb, #7c3aed);
  transform: translateY(-2px) scale(1.05);
}