/* ========================================
   PARK LOUNGE - オレンジ系・ミニマルで丁寧な演出
   ======================================== */

:root {
  /* オレンジ系パレット */
  --color-orange: #c45c2a;
  --color-orange-light: #d97a4a;
  --color-orange-pale: #f5e8e0;
  --color-cream: #faf6f2;
  --color-warm-white: #fefcf9;
  --color-brown: #3d3229;
  --color-brown-soft: #5c4f44;
  --color-text: #3d3229;
  --color-text-light: #6b5d52;
  --color-border: rgba(196, 92, 42, 0.12);
  --color-peach: #edd9cc;
  --color-peach-light: #f8f0eb;
  --font-maru: 'Zen Maru Gothic', 'Hiragino Sans', sans-serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 2px 16px rgba(61, 50, 41, 0.06);
  --shadow-card: 0 4px 24px rgba(61, 50, 41, 0.08);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(254, 252, 249, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.3s var(--ease-out);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 101;
}

.logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-orange);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.25s var(--ease-out);
  flex-shrink: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  color: var(--color-brown-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav a:hover {
  color: var(--color-orange);
}

.btn-support {
  background: var(--color-orange);
  color: var(--color-warm-white) !important;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  transition: background 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}

.btn-support:hover {
  background: var(--color-orange-light);
}

.menu-toggle {
  display: none;
  width: 28px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-brown);
  border-radius: 1px;
  transition: transform 0.3s;
}

.menu-toggle::before {
  top: 4px;
}

.menu-toggle::after {
  bottom: 4px;
}

.menu-toggle .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--color-brown);
  border-radius: 1px;
  transform: translateY(-50%);
}

body.nav-open .menu-toggle::before {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .menu-toggle::after {
  transform: translateY(-7px) rotate(-45deg);
}

body.nav-open .menu-toggle .bar {
  opacity: 0;
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-cream);
    flex-direction: column;
    justify-content: center;
    padding: 5rem 2rem 3rem;
    gap: 0;
    clip-path: circle(0% at 100% 0%);
    transition: clip-path 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    overflow-y: auto;
    z-index: 90;
    visibility: visible;
    pointer-events: none;
  }

  body.nav-open .nav {
    clip-path: circle(160% at 100% 0%);
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav a {
    padding: 1rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--color-peach-light);
  }

  .nav .btn-support {
    display: block;
    text-align: center;
    padding: 1rem 2.5rem;
    margin-top: 0.5rem;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 110;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }

  .menu-toggle .bar {
    display: block;
  }
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}

/* ミニマルヒーロー（オレンジ系・丁寧な演出） */
.hero--minimal {
  background: var(--color-cream);
}

.hero-content--minimal {
  max-width: 480px;
  opacity: 1;
  transform: none;
}

/* ヒーロー表示時のリッチなアニメーション */
.hero-content--minimal .hero-ja {
  animation: hero-minimal-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.hero-content--minimal .hero-title-minimal {
  animation: hero-minimal-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero-content--minimal .hero-icon {
  animation: hero-minimal-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s both;
}

.hero-content--minimal .hero-sub-en {
  animation: hero-minimal-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

.hero-content--minimal .hero-instagram {
  animation: hero-minimal-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.hero-content--minimal .hero-tagline {
  animation: hero-minimal-in 0.7s var(--ease-out) 0.75s both;
}

.hero--minimal .hero-scroll {
  animation: hero-minimal-in 0.5s var(--ease-out) 1.1s both;
}

/* 丁寧な演出：ヒーロー内の静かな区切り */
.hero-content--minimal .hero-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--color-border);
}

@keyframes hero-minimal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero--minimal .hero-ja {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-orange);
  letter-spacing: 0.28em;
  margin: 0 0 0.75rem;
  transition: opacity 0.4s var(--ease-out);
}

.hero-title-minimal {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 11vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-orange);
  margin: 0 0 1.25rem;
}

/* PARK と LOUNGE の間のスペースなし（詰めて表示） */
.hero-title-minimal {
  line-height: 0.88;
}

.hero-title-line {
  display: block;
  margin: 0;
  padding: 0;
}

.hero-title-line:first-child {
  margin-bottom: -0.08em;
}

.hero-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  color: var(--color-brown);
}

.hero-icon svg {
  width: 100%;
  height: 100%;
}

.hero-sub-en {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--color-brown);
  margin: 0 0 0.6rem;
}

.hero-instagram {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  margin: 0 0 1.75rem;
}

.hero-instagram a {
  color: var(--color-brown);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s var(--ease-out);
}

.hero-instagram a:hover {
  color: var(--color-orange);
}

.hero-tagline {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-brown-soft);
  line-height: 1.8;
  margin: 0;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.02em;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--color-orange-pale) 0%, var(--color-peach-light) 40%, var(--color-cream) 100%);
  z-index: 0;
  animation: hero-bg-shift 18s ease-in-out infinite;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--color-cream), transparent);
  pointer-events: none;
}

@keyframes hero-bg-shift {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.99; }
}

/* 丸い流体シェイプ（輪郭がわかるように） */
.hero-blobs {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  will-change: transform, border-radius;
  /* ブラーを弱めて形がはっきり見えるように */
  filter: blur(0);
}

/* メインの大形シェイプ（はっきりした流体） */
.hero-blob-1 {
  width: 70vw;
  height: 70vw;
  max-width: 480px;
  max-height: 480px;
  top: -25%;
  right: -20%;
  background: rgba(232, 239, 229, 0.85);
  border: 1px solid rgba(139, 159, 130, 0.2);
  animation: blob-float-1 14s ease-in-out infinite;
}

.hero-blob-2 {
  width: 55vw;
  height: 55vw;
  max-width: 380px;
  max-height: 380px;
  bottom: -15%;
  left: -20%;
  background: rgba(245, 235, 227, 0.9);
  border: 1px solid rgba(139, 159, 130, 0.15);
  animation: blob-float-2 16s ease-in-out infinite 1s;
}

/* 中サイズ・ややはっきり */
.hero-blob-3 {
  width: 42vw;
  height: 42vw;
  max-width: 280px;
  max-height: 280px;
  top: 25%;
  left: 0;
  background: rgba(139, 159, 130, 0.35);
  border: 1px solid rgba(139, 159, 130, 0.25);
  animation: blob-float-3 12s ease-in-out infinite 0.5s;
}

.hero-blob-4 {
  width: 45vw;
  height: 45vw;
  max-width: 300px;
  max-height: 300px;
  bottom: 20%;
  right: -5%;
  background: rgba(232, 213, 196, 0.7);
  border: 1px solid rgba(139, 159, 130, 0.18);
  animation: blob-float-4 15s ease-in-out infinite 2s;
}

/* 中央の大きな流体シェイプ（画面全体が入るサイズ・縮小時も文字がはみ出さない） */
.hero-blob-5 {
  width: 150vmax;
  height: 150vmax;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(232, 239, 229, 0.75);
  border: 1px solid rgba(139, 159, 130, 0.2);
  animation: blob-float-5 11s ease-in-out infinite 0.3s;
}

.hero-blob-6 {
  width: 58vw;
  height: 58vw;
  max-width: 400px;
  max-height: 400px;
  top: 55%;
  right: -25%;
  background: rgba(255, 254, 251, 0.75);
  border: 1px solid rgba(139, 159, 130, 0.22);
  animation: blob-float-6 17s ease-in-out infinite 2.5s;
}

@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 55% 45% / 65% 35% 65% 35%; }
  25% { transform: translate(-10%, -20%) scale(1.12); border-radius: 45% 55% 40% 60% / 50% 60% 40% 50%; }
  50% { transform: translate(12%, 10%) scale(0.92); border-radius: 55% 45% 60% 40% / 40% 50% 60% 50%; }
  75% { transform: translate(-6%, 14%) scale(1.06); border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%; }
}

@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%; }
  33% { transform: translate(14%, -12%) scale(1.15); border-radius: 60% 40% 50% 50% / 45% 55% 45% 55%; }
  66% { transform: translate(-10%, 16%) scale(0.88); border-radius: 45% 55% 60% 40% / 50% 50% 55% 45%; }
}

@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); border-radius: 65% 35% 50% 50% / 60% 40% 60% 40%; }
  50% { transform: translate(-18%, -10%) rotate(15deg); border-radius: 35% 65% 55% 45% / 40% 60% 40% 60%; }
}

@keyframes blob-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%; }
  25% { transform: translate(10%, 12%) scale(1.12); border-radius: 55% 45% 45% 55% / 45% 55% 55% 45%; }
  50% { transform: translate(-14%, -8%) scale(0.9); border-radius: 50% 50% 55% 45% / 50% 50% 50% 50%; }
  75% { transform: translate(6%, -14%) scale(1.08); border-radius: 60% 40% 40% 60% / 55% 45% 60% 40%; }
}

/* 中央シェイプ：縮小しても文字がはみ出さないよう scale の下限を 0.92 に */
@keyframes blob-float-5 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  33% { transform: translate(-50%, -50%) translate(-2%, 2%) scale(1.05); border-radius: 55% 45% 55% 45% / 45% 55% 45% 55%; }
  66% { transform: translate(-50%, -50%) translate(2%, -2%) scale(0.92); border-radius: 45% 55% 45% 55% / 55% 45% 55% 45%; }
}

@keyframes blob-float-6 {
  0%, 100% { transform: translate(0, 0); border-radius: 55% 45% 60% 40% / 50% 50% 45% 55%; }
  25% { transform: translate(-10%, -14%); border-radius: 45% 55% 45% 55% / 60% 40% 55% 45%; }
  50% { transform: translate(14%, 8%); border-radius: 60% 40% 55% 45% / 45% 55% 50% 50%; }
  75% { transform: translate(-6%, 12%); border-radius: 50% 50% 60% 40% / 55% 45% 45% 55%; }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-content.hero-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ミニマルヒーローは常に表示（.hero-content の opacity:0 を上書き） */
.hero--minimal .hero-content,
.hero-content.hero-content--minimal {
  opacity: 1 !important;
  transform: none !important;
}

.hero-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

.hero-content.hero-visible .hero-line {
  animation: hero-line-in 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes hero-line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-catch {
  font-family: var(--font-maru);
  font-size: 0.95rem;
  color: var(--color-orange);
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.hero-title {
  font-family: var(--font-maru);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-brown);
  margin: 0 0 1.25rem;
}

.hero-desc {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 0 0 2rem;
  line-height: 1.9;
}

.cta {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-warm-white);
  padding: 1rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-soft);
}

.cta:hover {
  background: var(--color-orange-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(196, 92, 42, 0.25);
}

.cta-large {
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--color-brown-soft);
  letter-spacing: 0.12em;
  opacity: 0.75;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.hero-scroll-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-orange);
  opacity: 0.7;
  animation: bounce 1.8s var(--ease-out) infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* スクロールでふわっと表示・方向別 */
.animate-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-section[data-animate="up"].is-visible { transform: translateY(0); }
.animate-section[data-animate="scale"] { transform: translateY(30px) scale(0.98); }
.animate-section[data-animate="scale"].is-visible { transform: translateY(0) scale(1); }

.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* 方向別の初期状態 */
.animate-in[data-animate="left"] { transform: translateX(-36px); }
.animate-in[data-animate="left"].is-visible { transform: translateX(0); }

.animate-in[data-animate="right"] { transform: translateX(36px); }
.animate-in[data-animate="right"].is-visible { transform: translateX(0); }

.animate-in[data-animate="up"] { transform: translateY(32px); }
.animate-in[data-animate="up"].is-visible { transform: translateY(0); }

.animate-in[data-animate="scale"] { transform: translateY(20px) scale(0.96); transition-duration: 0.6s; }
.animate-in[data-animate="scale"].is-visible { transform: translateY(0) scale(1); }

/* 子要素のスタッガー遅延 */
.animate-section.is-visible .animate-in:nth-child(1) { transition-delay: 0.05s; }
.animate-section.is-visible .animate-in:nth-child(2) { transition-delay: 0.12s; }
.animate-section.is-visible .animate-in:nth-child(3) { transition-delay: 0.19s; }
.animate-section.is-visible .animate-in:nth-child(4) { transition-delay: 0.26s; }
.animate-section.is-visible .animate-in:nth-child(5) { transition-delay: 0.33s; }
.animate-section.is-visible .animate-in:nth-child(6) { transition-delay: 0.4s; }
.animate-section.is-visible .animate-in:nth-child(7) { transition-delay: 0.47s; }
.animate-section.is-visible .animate-in:nth-child(8) { transition-delay: 0.54s; }
.animate-section.is-visible .animate-in:nth-child(9) { transition-delay: 0.61s; }
.animate-section.is-visible .container .animate-in { transition-delay: 0.08s; }
.animate-section.is-visible .container .animate-in:nth-child(2) { transition-delay: 0.16s; }
.animate-section.is-visible .container .animate-in:nth-child(3) { transition-delay: 0.24s; }
.animate-section.is-visible .container .animate-in:nth-child(4) { transition-delay: 0.32s; }
.animate-section.is-visible .container .animate-in:nth-child(5) { transition-delay: 0.4s; }
.animate-section.is-visible .container .animate-in:nth-child(6) { transition-delay: 0.48s; }
.animate-section.is-visible .container .animate-in:nth-child(7) { transition-delay: 0.56s; }
.animate-section.is-visible .container .animate-in:nth-child(8) { transition-delay: 0.64s; }
.animate-section.is-visible .container .animate-in:nth-child(9) { transition-delay: 0.72s; }

/* セクション内の流体シェイプ（形がわかるように） */
.section-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.section-blob {
  position: absolute;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  filter: blur(0);
  will-change: transform, border-radius;
}

/* テキストと重ならないよう右端・左端に寄せ、不透明度を抑える */
.section-blobs--concept .section-blob--1 {
  width: 200px;
  height: 200px;
  top: -5%;
  right: -22%;
  background: rgba(232, 239, 229, 0.4);
  border: 1px solid rgba(139, 159, 130, 0.1);
  animation: section-blob-float 20s ease-in-out infinite;
}

.section-blobs--concept .section-blob--2 {
  width: 160px;
  height: 160px;
  bottom: 15%;
  left: -12%;
  background: rgba(245, 235, 227, 0.5);
  border: 1px solid rgba(139, 159, 130, 0.1);
  animation: section-blob-float 18s ease-in-out infinite 2s;
}

.section-blobs--reason .section-blob--3 {
  width: 260px;
  height: 260px;
  top: 50%;
  margin-top: -130px;
  left: -8%;
  background: rgba(245, 232, 224, 0.6);
  border: 1px solid rgba(196, 92, 42, 0.12);
  animation: section-blob-float 22s ease-in-out infinite 1s;
}

.section-blobs--reason .section-blob--4 {
  width: 200px;
  height: 200px;
  bottom: -5%;
  right: 5%;
  background: rgba(237, 217, 204, 0.5);
  border: 1px solid rgba(196, 92, 42, 0.15);
  animation: section-blob-float 19s ease-in-out infinite 3s;
}

/* 最後にセクションはテキストの可読性のため流体シェイプなし */

@keyframes section-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33% { transform: translate(4%, -3%) scale(1.03); border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
  66% { transform: translate(-3%, 4%) scale(0.98); border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; }
}

@keyframes section-blob-float-center {
  0%, 100% { transform: translate(-50%, -50%) scale(1); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
  33% { transform: translate(-50%, -50%) translate(3%, -2%) scale(1.04); border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
  66% { transform: translate(-50%, -50%) translate(-2%, 3%) scale(0.97); border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; }
}

/* セクション横のイラスト */
.section-illus {
  position: absolute;
  width: 120px;
  height: 120px;
  color: var(--color-orange);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.section-illus svg {
  width: 100%;
  height: 100%;
}

.section-illus-left { left: 0; top: 50%; transform: translateY(-50%); transition: transform 0.6s ease-out, opacity 0.6s ease-out; }
.section-illus-right { right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.6s ease-out, opacity 0.6s ease-out; }

.animate-section.is-visible .section-illus-left { animation: section-illus-float 8s ease-in-out infinite; }
.animate-section.is-visible .section-illus-right { animation: section-illus-float 8s ease-in-out infinite 1s; }

@keyframes section-illus-float {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(6px); }
}

@media (max-width: 900px) {
  .section-illus { width: 80px; height: 80px; opacity: 0.35; }
}

@media (max-width: 600px) {
  .section-illus { display: none; }
}

.section-concept,
.section-reason,
.section-usage,
.section-baby,
.section-work,
.section-features,
.section-schedule,
.section-message,
.section-support {
  position: relative;
}

/* 最後に：テキストが常に読みやすいようコンテナに背景 */
.section-message .container {
  background: var(--color-warm-white);
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(92, 74, 61, 0.06);
}

/* Sections common */
.section {
  padding: 4.5rem 1.5rem;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.container--wide { max-width: 900px; }
.container--narrow { max-width: 640px; }

.container--rhythm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-title--right {
  text-align: right;
  margin-left: auto;
  max-width: 100%;
}

.section-title--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-title--offset {
  margin-left: 0;
  max-width: 85%;
}

.section-lead--center {
  text-align: center;
}

.section--alt .container--rhythm {
  align-items: flex-end;
}

.section--alt .section-title--right {
  margin-left: 0;
  margin-right: 0;
}

.section--alt .reason-text,
.section--alt .concept-text {
  text-align: right;
  max-width: 100%;
}

.section--alt .reason-text p,
.section--alt .concept-text p {
  margin-left: auto;
}

.section--alt .reason-text,
.section--alt .concept-text {
  max-width: 520px;
}

.keyphrase {
  display: inline-block;
  font-weight: 500;
  color: var(--color-brown);
}

.keyphrase-block {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-brown);
  padding: 0.5rem 0;
}

.keyphrase-block--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
}

.message-text--rhythm p {
  margin-bottom: 1.5rem;
}

.message-text--rhythm .keyphrase-block {
  margin: 1.5rem auto;
}

@media (max-width: 768px) {
  .section-title--offset { max-width: 100%; }
  .section--alt .reason-text,
  .section--alt .concept-text { text-align: left; }
  .section--alt .container--rhythm { align-items: stretch; }
  .section-title--right { text-align: left; margin-left: 0; }
}

.section-label {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-orange);
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.section-title {
  font-family: var(--font-maru);
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 700;
  color: var(--color-brown);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.section-lead {
  color: var(--color-text-light);
  margin: 0 0 2rem;
  font-size: 0.95rem;
}

.section-note {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin: 2rem 0 0;
  text-align: center;
}

/* Concept */
.section-concept {
  background: var(--color-warm-white);
}

/* 流体シェイプと重なっても文字が読めるようテキストエリアに不透明な背景 */
.section-concept .container {
  background: var(--color-warm-white);
  padding: 0 0.25rem;
  border-radius: var(--radius);
}

.concept-text p {
  margin: 0 0 1.25rem;
}

.concept-text .highlight {
  background: var(--color-orange-pale);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--color-orange);
  margin: 1.5rem 0;
}

.concept-text strong {
  color: var(--color-orange);
}

/* Reason */
.section-reason {
  background: var(--color-peach-light);
}

.reason-text p {
  margin: 0 0 1.25rem;
}

/* Usage - time cards */
.section-usage {
  background: var(--color-warm-white);
}

.time-cards {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.time-card {
  background: var(--color-cream);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--color-peach-light);
  transition: box-shadow 0.2s;
}

.time-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.time-card {
  transition: box-shadow 0.2s, transform 0.2s, opacity 0.5s ease-out;
}

.time-cards .time-card.animate-in:nth-child(1) { transition-delay: 0.05s; }
.time-cards .time-card.animate-in:nth-child(2) { transition-delay: 0.15s; }
.time-cards .time-card.animate-in:nth-child(3) { transition-delay: 0.25s; }
.time-cards .time-card.animate-in:nth-child(4) { transition-delay: 0.35s; }

.time-range {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-orange);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.time-card h3 {
  font-family: var(--font-maru);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-brown);
  margin: 0 0 0.75rem;
}

.time-card ul {
  margin: 0;
  padding: 0 0 0 1.25rem;
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.time-card li {
  margin-bottom: 0.35rem;
}

/* Baby */
.section-baby {
  background: linear-gradient(180deg, var(--color-orange-pale) 0%, var(--color-cream) 100%);
}

.baby-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.baby-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--color-warm-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.baby-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}

.baby-icon-svg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  font-size: 0;
  background: var(--color-orange-pale);
  border-radius: 50%;
  color: var(--color-orange);
}

.baby-icon-svg svg {
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease;
}

.baby-item:hover .baby-icon-svg svg {
  transform: scale(1.08);
}

.baby-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-brown-soft);
  font-weight: 500;
}

/* Work */
.section-work {
  background: var(--color-warm-white);
}

.work-list {
  margin: 1.5rem 0;
  padding: 0 0 0 1.5rem;
  color: var(--color-text);
}

.work-list li {
  margin-bottom: 0.75rem;
}

.work-message {
  background: var(--color-peach-light);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  margin: 2rem 0 0;
  font-weight: 500;
  color: var(--color-brown);
}

/* Features */
.section-features {
  background: var(--color-cream);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.feature-card {
  background: var(--color-warm-white);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-peach-light);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s, transform 0.25s;
}

.feature-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.feature-grid .feature-card.animate-in:nth-child(1) { transition-delay: 0.05s; }
.feature-grid .feature-card.animate-in:nth-child(2) { transition-delay: 0.12s; }
.feature-grid .feature-card.animate-in:nth-child(3) { transition-delay: 0.19s; }
.feature-grid .feature-card.animate-in:nth-child(4) { transition-delay: 0.26s; }

.feature-card h3 {
  font-family: var(--font-maru);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-orange);
  margin: 0 0 0.5rem;
}

.feature-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Schedule */
.section-schedule {
  background: var(--color-peach-light);
}

.schedule-list {
  margin-top: 2rem;
}

.schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(92, 74, 61, 0.15);
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-date {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-orange);
  font-size: 1rem;
  min-width: 140px;
}

.schedule-item p {
  margin: 0;
  color: var(--color-text);
}

.schedule-list .schedule-item.animate-in:nth-child(1) { transition-delay: 0.05s; }
.schedule-list .schedule-item.animate-in:nth-child(2) { transition-delay: 0.15s; }
.schedule-list .schedule-item.animate-in:nth-child(3) { transition-delay: 0.25s; }

/* Message */
.section-message {
  background: var(--color-warm-white);
}

.message-text p {
  margin: 0 0 1.25rem;
}

/* Support CTA */
.section-support {
  background: linear-gradient(165deg, var(--color-orange-pale) 0%, var(--color-peach-light) 100%);
  text-align: center;
  padding: 5rem 1.5rem;
}

.section-support .section-title {
  margin-bottom: 1rem;
}

.support-lead {
  color: var(--color-text-light);
  margin: 0 0 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.support-note {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-brown-soft);
}

.section-support { position: relative; }

.support-deco {
  position: absolute;
  width: 100px;
  height: 100px;
  color: var(--color-orange);
  opacity: 0.5;
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
}

.support-deco svg { width: 100%; height: 100%; }
.support-deco-left { left: 5%; top: 30%; animation-delay: 0s; }
.support-deco-right { right: 5%; top: 40%; animation-delay: -3s; }

@media (max-width: 600px) {
  .support-deco { width: 60px; height: 60px; opacity: 0.3; }
}

.cta-pulse {
  animation: cta-pulse 2.5s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: 0 4px 24px rgba(196, 92, 42, 0.3); }
}

/* Footer */
.footer {
  background: var(--color-brown);
  color: var(--color-peach-light);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.05em;
}

.footer-place {
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
  opacity: 0.9;
}

.footer-credit {
  font-size: 0.8rem;
  margin: 0;
  opacity: 0.75;
}

.footer-instagram {
  font-size: 0.8rem;
  margin: 0.75rem 0 0;
  opacity: 0.9;
}

.footer a {
  color: var(--color-peach-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.footer a:hover {
  opacity: 0.85;
}

/* Fix CTA color */
.cta {
  color: var(--color-warm-white) !important;
}