/* =========================================================
   そだちびより — ブランドサイト（静的版）
   tokens: docs/site-design-tokens.md / site.css 準拠
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap");

:root{
  --bg:#fbf1e3;
  --bg-soft:#fef7ee;
  --card:#fffdf8;
  --ink:#3a2817;
  --ink-soft:#74583c;
  --ink-mute:#a98b69;
  --leaf:#3a7a45;
  --leaf-soft:#7cb079;
  --sun:#f2a83a;
  --sun-soft:#fbe0a0;
  --wood:#c0884f;
  --wood-deep:#9a6633;
  --coral:#e0825a;
  --coral-soft:#f7d6c1;
  --coral-deep:#c5663d;
  --border:#ecdac2;
  --border-soft:#f6ebd8;
  --font-sans:"Zen Kaku Gothic Antique","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --font-serif:"Zen Kaku Gothic New","Zen Kaku Gothic Antique","Hiragino Sans",sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--bg);
  line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"palt";text-spacing-trim:trim-start;hanging-punctuation:allow-end;
  background-image:radial-gradient(rgba(139,104,57,.04) 1px,transparent 1px),radial-gradient(rgba(139,104,57,.03) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;background-position:0 0,1px 2px;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--sun-soft);color:var(--ink);}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;}
.section{padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(72px,10vw,140px);}
.bg-soft{background:var(--bg-soft);}

/* ---------- 共通タイポ ---------- */
.display-jp{font-family:var(--font-serif);letter-spacing:.035em;line-height:1.4;font-feature-settings:"palt";text-wrap:balance;}
.serif{font-family:var(--font-serif);letter-spacing:.02em;}
.eyebrow{font-size:.69rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--leaf);margin:0;}
.lead{max-width:33em;font-size:clamp(.95rem,1.2vw,1.06rem);line-height:2.0;color:var(--ink-soft);
  word-break:auto-phrase;line-break:strict;text-wrap:pretty;}
.center .lead{max-width:30em;}
.mark{position:relative;white-space:nowrap;}
.mark::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.06em;height:.34em;background:var(--sun-soft);z-index:-1;border-radius:4px;}
.mark.leaf::after{background:rgba(108,168,118,.45);}
.heading-rule::after{content:"";display:block;width:56px;height:3px;margin-top:1.3rem;background:linear-gradient(to right,var(--leaf),var(--sun) 70%,transparent);border-radius:999px;}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}
.h-sec{font-weight:600;color:var(--ink);}

/* 日本語本文の文節折り返し（語の途中で切らない） */
.concept-card p,.feature-item p,.aud-card p,.flow-card p,.safety-list li,
.cta-inner .lead,.footer-brand p,.footer-note,.stat-card .lab{
  word-break:auto-phrase;line-break:strict;text-wrap:pretty;
}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:999px;
  padding:.95rem 2rem;font-weight:700;font-size:.98rem;transition:.28s;cursor:pointer;border:1.5px solid transparent;}
.btn .ic{width:17px;height:17px;}
.btn-leaf{background:var(--leaf);color:#fff;box-shadow:0 14px 30px -14px rgba(46,107,62,.6);}
.btn-leaf:hover{background:var(--wood-deep);transform:translateY(-2px);}
.btn-sun{background:var(--sun);color:var(--ink);box-shadow:0 14px 30px -14px rgba(244,194,74,.7);}
.btn-sun:hover{background:#eab63a;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
.btn-ghost:hover{background:#fff;border-color:var(--wood);transform:translateY(-2px);}
.textlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;color:var(--leaf);transition:gap .25s;}
.textlink .ic{width:16px;height:16px;}

/* ---------- 効果 ---------- */
.paper-shadow{box-shadow:0 1px 0 rgba(47,36,24,.04),0 30px 60px -45px rgba(47,36,24,.45),0 60px 120px -60px rgba(47,36,24,.25);}
.frame-photo{position:relative;border-radius:2rem;overflow:hidden;border:1px solid var(--border);background:var(--card);}
.photo-warm img{filter:saturate(.92) sepia(.06) brightness(1.02) contrast(1.02);}
.vignette::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 100%,rgba(47,36,24,.5) 0%,rgba(47,36,24,.12) 38%,transparent 70%);}
.pill-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .95rem;border-radius:999px;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;background:var(--sun-soft);color:var(--wood-deep);}
.pill-tag .ic{width:14px;height:14px;}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{position:fixed;left:0;right:0;top:0;z-index:60;transition:.3s;}
.site-header.scrolled{background:rgba(248,244,234,.92);backdrop-filter:blur(10px);box-shadow:0 8px 30px -20px rgba(47,36,24,.35);}
.header-row{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-chip{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--border);}
.brand-chip img{width:32px;height:32px;object-fit:contain;}
.brand-name{display:flex;flex-direction:column;line-height:1.15;}
.brand-jp{font-family:var(--font-serif);font-weight:600;font-size:1.22rem;letter-spacing:.04em;}
.brand-en{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--leaf);}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:color .2s;}
.nav a:hover,.nav a.active{color:var(--leaf);}
.header-cta{display:inline-flex;}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--border);
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink);}
.menu-btn svg{width:20px;height:20px;}
.menu-btn .x{display:none;}
body.menu-open .menu-btn .x{display:block;}
body.menu-open .menu-btn .bars{display:none;}

/* モバイルメニュー */
.mobile-menu{display:none;margin:0 16px 14px;border-radius:24px;border:1px solid var(--border);background:#fff;
  box-shadow:0 24px 50px -28px rgba(47,36,24,.5);padding:10px 22px 22px;}
body.menu-open .mobile-menu{display:block;animation:mm .3s ease;}
@keyframes mm{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.mobile-menu a{display:block;padding:14px 2px;font-size:1rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--border-soft);}
.mobile-menu .btn{display:flex;margin-top:18px;}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero-mesh{
  background:
    radial-gradient(58% 50% at 88% 12%,rgba(242,168,58,.34),transparent 60%),
    radial-gradient(50% 44% at 6% 84%,rgba(224,130,90,.26),transparent 62%),
    radial-gradient(44% 38% at 32% 16%,rgba(251,224,160,.5),transparent 66%),
    radial-gradient(40% 40% at 70% 88%,rgba(124,176,121,.22),transparent 64%),
    var(--bg);
}
.hero{position:relative;overflow:hidden;padding-top:clamp(118px,16vw,180px);}
.hero-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px clamp(56px,8vw,96px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,64px);align-items:end;}
.hero h1{margin:1.6rem 0 0;font-size:clamp(2.4rem,5vw,3.7rem);font-weight:600;line-height:1.26;color:var(--ink);}
.hero h1 .l{display:block;white-space:nowrap;}
.hero .lead{margin-top:1.8rem;}
.hero-btns{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.8rem;}
.scroll-row{margin-top:3.2rem;display:flex;align-items:center;gap:1rem;color:var(--ink-mute);}
.scroll-row .scroll-line{position:relative;width:1.6px;height:46px;border-radius:2px;
  background:linear-gradient(var(--wood),rgba(192,136,79,0));overflow:hidden;}
.scroll-row .scroll-line i{position:absolute;left:0;top:-45%;width:100%;height:45%;border-radius:2px;
  background:var(--wood);animation:scrollDown 1.9s cubic-bezier(.7,0,.3,1) infinite;}
@keyframes scrollDown{0%{top:-45%;opacity:0;}25%{opacity:1;}65%{opacity:1;}100%{top:100%;opacity:0;}}
.scroll-row span{font-size:.7rem;letter-spacing:.3em;}
@media (prefers-reduced-motion: reduce){.scroll-row .scroll-line i{animation:none;top:0;height:100%;}}

/* photo cluster */
.hero-photo{position:relative;}
.hero-main{position:relative;}
.hero-main .frame-photo{aspect-ratio:4/5;}
.hero-main img{width:100%;height:100%;object-fit:cover;}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 28px;color:#fff;}
.hero-cap p{margin:0;font-family:var(--font-serif);font-size:1.35rem;font-weight:600;line-height:1.45;}
.hero-cap small{display:block;margin-top:.5rem;font-size:.6rem;letter-spacing:.3em;color:rgba(255,255,255,.72);}
.noti-card{position:absolute;right:-18px;top:24px;z-index:6;background:#fff;border:1px solid var(--border);
  border-radius:20px;padding:14px 18px;display:flex;align-items:center;gap:12px;animation:notiBob 4s ease-in-out infinite;}
@keyframes notiBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(-1.5deg);}}
@media (prefers-reduced-motion: reduce){.noti-card{animation:none;}}
.noti-ic{width:42px;height:42px;border-radius:50%;background:var(--sun-soft);color:var(--wood-deep);display:grid;place-items:center;flex:none;}
.noti-ic svg{width:22px;height:22px;}
.noti-card .lab{font-size:.58rem;letter-spacing:.2em;color:var(--ink-mute);}
.noti-card .ttl{font-size:.9rem;font-weight:700;color:var(--ink);}
.hero-stack{position:absolute;right:-22px;top:-30px;z-index:2;width:120px;height:150px;transform:rotate(6deg);
  border-radius:18px;overflow:hidden;border:4px solid #fff;}
.hero-stack img{width:100%;height:100%;object-fit:cover;}
.vertical-en{writing-mode:vertical-rl;position:absolute;right:-24px;bottom:40px;font-size:.66rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--leaf);font-weight:600;}

/* スマホ実機モック（ヒーロー） */
.phone-mock{position:absolute;left:-34px;bottom:-30px;z-index:5;width:166px;
  background:#1f1810;border-radius:28px;padding:7px;transform:rotate(-6deg);
  border:1px solid rgba(0,0,0,.2);box-shadow:0 36px 60px -30px rgba(58,40,23,.6);}
.phone-mock.floaty{animation:phoneFloat 6s ease-in-out infinite;}
@keyframes phoneFloat{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(-5deg) translateY(-12px);}}
.phone-mock::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:38px;height:5px;border-radius:5px;background:rgba(255,255,255,.35);z-index:3;}
.phone-screen{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:#000;}
.phone-screen>img{width:100%;height:100%;object-fit:cover;}
.phone-screen.app-real{aspect-ratio:520/1131;}
.phone-screen.app-real>img{object-fit:cover;object-position:top center;}
.phone-screen.photo-warm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 64%,rgba(0,0,0,.5));}
/* タップで弾けるハート */
.tap-heart{position:absolute;right:16px;top:30%;z-index:4;color:#ff6b5e;font-size:20px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:tapHeart 3.6s ease-in-out infinite;}
@keyframes tapHeart{0%,72%{opacity:0;transform:scale(.4);}78%{opacity:1;transform:scale(1.25);}86%{transform:scale(1);}100%{opacity:0;transform:scale(1) translateY(-14px);}}
.phone-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);}
.phone-play::after{content:"";margin-left:3px;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--leaf);}
.phone-mock .ring{position:absolute;top:50%;left:50%;width:42px;height:42px;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid rgba(255,255,255,.85);z-index:1;animation:phoneRing 2.4s ease-out infinite;}
@keyframes phoneRing{0%{opacity:.7;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1);}}
.phone-meta{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:6px;
  color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.phone-meta .dot{width:6px;height:6px;border-radius:50%;background:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.3);}
.phone-bar{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden;}
.phone-bar i{position:absolute;left:0;top:0;height:100%;width:42%;border-radius:3px;background:#fff;}
@media (prefers-reduced-motion: reduce){.phone-mock.floaty{animation:none;}.tap-heart{display:none;}}
@media (max-width:560px){.phone-mock{width:118px;left:-14px;}}

/* marquee */
.marquee{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:var(--card);
  padding:16px 0;overflow:hidden;position:relative;}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marq 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-pill{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1.25rem;border-radius:999px;
  border:1px solid var(--border);background:var(--card);font-size:.82rem;letter-spacing:.06em;color:var(--ink);white-space:nowrap;}
.ticker-pill .ic{width:13px;height:13px;color:var(--leaf);}

/* =========================================================
   コンセプト
   ========================================================= */
.concept-cards{max-width:var(--maxw);margin:clamp(52px,7vw,88px) auto 0;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);}
.concept-card{position:relative;overflow:hidden;border-radius:1.75rem;border:1px solid var(--border);background:var(--card);padding:34px 32px;
  transition:transform .4s cubic-bezier(.34,1.3,.6,1),box-shadow .4s,border-color .4s;}
.concept-card:hover{transform:translateY(-7px);box-shadow:0 30px 56px -32px rgba(58,40,23,.42);border-color:var(--leaf-soft);}
.concept-card .leaf-deco{position:absolute;right:-14px;bottom:-14px;width:78px;height:78px;opacity:.35;color:var(--leaf-soft);transition:transform .5s cubic-bezier(.34,1.5,.6,1),opacity .4s;}
.concept-card:hover .leaf-deco{transform:rotate(-12deg) scale(1.15);opacity:.6;}
.concept-num{font-family:var(--font-serif);font-size:2.5rem;font-weight:600;color:rgba(181,138,86,.85);line-height:1;}
.concept-card h3{font-family:var(--font-serif);font-size:1.28rem;font-weight:600;line-height:1.5;margin:1rem 0 .9rem;color:var(--ink);}
.concept-card p{font-size:.9rem;line-height:1.85;color:var(--ink-soft);margin:0;}

/* =========================================================
   What we do
   ========================================================= */
.split{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,72px);align-items:center;}
.split.rev{grid-template-columns:1.1fr 1fr;}
.collage{position:relative;}
.collage .frame-photo{aspect-ratio:5/6;}
.collage .frame-photo img{width:100%;height:100%;object-fit:cover;}
.collage-stack{position:absolute;right:-26px;top:22px;width:150px;height:188px;transform:rotate(-6deg);
  border-radius:22px;overflow:hidden;border:4px solid #fff;}
.collage-stack img{width:100%;height:100%;object-fit:cover;}
/* アプリ実機を重ねるバリエーション */
.collage-stack.phone-stack{width:150px;height:auto;aspect-ratio:520/1131;background:#1f1810;border:none;
  border-radius:24px;padding:6px;box-shadow:0 32px 56px -28px rgba(58,40,23,.6);transform:rotate(-6deg);
  animation:phoneFloat 6.5s ease-in-out infinite;}
.collage-stack.phone-stack::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.35);z-index:2;}
.collage-stack.phone-stack img{border-radius:19px;object-position:top center;}
@media (prefers-reduced-motion: reduce){.collage-stack.phone-stack{animation:none;}}
.collage-badge{position:absolute;left:-16px;bottom:-20px;background:var(--sun);border-radius:18px;padding:12px 20px;
  font-family:var(--font-serif);font-weight:600;font-size:.92rem;color:var(--ink);transform:rotate(-3deg);}
.feature-list{margin-top:2.4rem;display:grid;gap:14px;list-style:none;padding:0;}
.feature-item{display:flex;gap:16px;border:1px solid var(--border);background:var(--card);border-radius:1.5rem;padding:22px 24px;
  transition:transform .3s,box-shadow .3s;}
.feature-item:hover{transform:translateY(-3px);box-shadow:0 24px 40px -28px rgba(47,36,24,.4);}
.feature-ic{margin-top:3px;width:42px;height:42px;flex:none;border-radius:50%;background:var(--sun-soft);color:var(--wood-deep);display:grid;place-items:center;}
.feature-ic svg{width:19px;height:19px;}
.feature-item h4{font-family:var(--font-serif);font-size:1.08rem;font-weight:600;margin:0;color:var(--ink);}
.feature-item p{margin:.5rem 0 0;font-size:.86rem;line-height:1.75;color:var(--ink-soft);}

/* =========================================================
   対象別カード
   ========================================================= */
.aud-grid{max-width:var(--maxw);margin:clamp(48px,6vw,72px) auto 0;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);}
.aud-card{position:relative;overflow:hidden;border-radius:1.75rem;border:1px solid var(--border);background:var(--card);
  padding:34px 32px 30px;transition:transform .45s;display:block;}
.aud-card:hover{transform:translateY(-5px);}
.aud-card .topbar{position:absolute;left:0;top:0;height:5px;width:100%;}
.aud-card .tag{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;margin:0 0 1rem;}
.aud-card h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;line-height:1.45;margin:0;color:var(--ink);}
.aud-card p{font-size:.88rem;line-height:1.8;color:var(--ink-soft);margin:1rem 0 1.6rem;}
.aud-card .textlink{transition:gap .25s;}
.aud-card:hover .textlink{gap:.8rem;}

/* 対象別カードの写真 */
.aud-photo{position:relative;margin:-34px -32px 24px;height:190px;overflow:hidden;}
.aud-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.aud-card:hover .aud-photo img{transform:scale(1.05);}
.aud-photo .topbar{position:absolute;left:0;top:0;height:5px;width:100%;z-index:2;}

/* =========================================================
   Gallery（園のいちにち）
   ========================================================= */
.gallery-band{padding-bottom:clamp(72px,10vw,140px);}
.gallery-grid{max-width:var(--maxw);margin:clamp(44px,6vw,72px) auto 0;display:grid;gap:16px;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:128px;}
.gallery-grid .gphoto{position:relative;overflow:hidden;border-radius:1.5rem;border:1px solid var(--border);background:var(--card);}
.gallery-grid .gphoto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.gallery-grid .gphoto:hover img{transform:scale(1.06);}
.gallery-grid .gphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(47,36,24,.22));opacity:0;transition:opacity .4s;}
.gallery-grid .gphoto:hover::after{opacity:1;}
.g-a{grid-column:span 3;grid-row:span 2;}
.g-b{grid-column:span 3;grid-row:span 2;}
.g-c{grid-column:span 2;grid-row:span 2;}
.g-d{grid-column:span 2;grid-row:span 2;}
.g-e{grid-column:span 2;grid-row:span 2;}
/* 7枚モザイク（トップ強化版） */
.gallery-grid.big{grid-auto-rows:clamp(120px,15vw,168px);}
.gallery-grid.big .g-a,.gallery-grid.big .g-b{grid-column:span 3;grid-row:span 2;}
.gallery-grid.big .g-c,.gallery-grid.big .g-d,.gallery-grid.big .g-e{grid-column:span 2;grid-row:span 2;}
.gallery-grid.big .g-f,.gallery-grid.big .g-g{grid-column:span 3;grid-row:span 2;}
.gallery-cap{max-width:var(--maxw);margin:24px auto 0;text-align:right;font-size:.78rem;letter-spacing:.12em;color:var(--ink-mute);}

/* =========================================================
   Growth（成長のポイント：昨日→今日→明日）
   ========================================================= */
.growth-grid{max-width:var(--maxw);margin:clamp(48px,6vw,76px) auto 0;display:grid;gap:24px;grid-template-columns:repeat(3,1fr);}
.growth-card{position:relative;overflow:hidden;border-radius:1.75rem;border:1px solid var(--border);background:var(--card);
  display:flex;flex-direction:column;transition:transform .4s;}
.growth-card:hover{transform:translateY(-5px);}
.growth-photo{position:relative;height:200px;overflow:hidden;}
.growth-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.growth-card:hover .growth-photo img{transform:scale(1.05);}
.growth-when{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);border-radius:999px;padding:.34rem .85rem;font-size:.74rem;font-weight:700;color:var(--ink);}
.growth-when b{color:var(--leaf);}
.growth-when .ar{width:14px;height:14px;color:var(--wood);}
.growth-body{padding:24px 26px 28px;}
.growth-body h3{font-family:var(--font-serif);font-size:1.28rem;font-weight:700;line-height:1.5;margin:0;color:var(--ink);}
.growth-body p{margin:.7rem 0 0;font-size:.88rem;line-height:1.85;color:var(--ink-soft);}
.growth-line{max-width:var(--maxw);margin:clamp(34px,5vw,52px) auto 0;text-align:center;}
.growth-line p{font-family:var(--font-serif);font-weight:700;color:var(--leaf);
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.7;margin:0;}
@media (max-width:1000px){.growth-grid{grid-template-columns:1fr;max-width:480px;}}

/* =========================================================
   サブページ共通（園 / 保護者 / スポンサー）
   ========================================================= */
.page-hero{position:relative;overflow:hidden;padding:clamp(124px,16vw,176px) 0 clamp(44px,6vw,80px);}
.page-hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,60px);align-items:center;}
.breadcrumb{font-size:.76rem;letter-spacing:.08em;color:var(--ink-mute);margin:0 0 1.1rem;}
.breadcrumb a{color:var(--ink-mute);}
.breadcrumb a:hover{color:var(--leaf);}
.breadcrumb .sep{margin:0 .5em;opacity:.6;}
.page-hero h1{font-family:var(--font-serif);font-weight:900;letter-spacing:.03em;text-wrap:balance;
  font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.32;color:var(--ink);margin:.4rem 0 0;}
.page-hero .lead{margin-top:1.6rem;}
.page-hero .pill-tag{margin-bottom:.4rem;}
.page-hero-photo{position:relative;}
.page-hero-photo .frame-photo{aspect-ratio:5/4;}
.page-hero-photo img{width:100%;height:100%;object-fit:cover;}
.page-hero-photo .badge{position:absolute;left:-16px;bottom:-18px;background:var(--sun);border-radius:16px;
  padding:11px 18px;font-family:var(--font-serif);font-weight:700;font-size:.9rem;color:var(--ink);transform:rotate(-3deg);}

/* セクション見出し（左寄せ・サブページ用） */
.lead-block{max-width:var(--maxw);margin:0 auto;}
.lead-block .eyebrow{margin-bottom:.6rem;}
.sec-title{font-family:var(--font-serif);font-weight:700;letter-spacing:.02em;color:var(--ink);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.4;margin:0;text-wrap:balance;}

/* 番号付きベネフィットリスト */
.benefit-grid{max-width:var(--maxw);margin:clamp(40px,5vw,64px) auto 0;display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.benefit-card{border:1px solid var(--border);background:var(--card);border-radius:1.6rem;padding:32px 30px;}
.benefit-card .ic{width:48px;height:48px;border-radius:14px;background:var(--sun-soft);color:var(--wood-deep);display:grid;place-items:center;margin-bottom:18px;}
.benefit-card .ic svg{width:23px;height:23px;}
.benefit-card h3{font-family:var(--font-serif);font-weight:700;font-size:1.22rem;line-height:1.5;margin:0 0 .7rem;color:var(--ink);}
.benefit-card p{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-soft);}

/* 横並び・写真＋テキスト（サブページ） */
.media-row{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center;}
.media-row.rev .media-txt{order:2;}
.media-photo .frame-photo{aspect-ratio:4/3;}
.media-photo img{width:100%;height:100%;object-fit:cover;}

/* 料金・プラン風カード */
.plan-grid{max-width:var(--maxw);margin:clamp(40px,5vw,60px) auto 0;display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.plan-card{border:1px solid var(--border);background:var(--card);border-radius:1.6rem;padding:30px 28px;text-align:center;}
.plan-card.feat{border-color:var(--leaf);box-shadow:0 26px 50px -30px rgba(46,107,62,.45);}
.plan-card .pn{font-weight:700;color:var(--leaf);font-size:1.05rem;margin:0 0 .5rem;}
.plan-card .pp{font-family:var(--font-serif);font-weight:700;color:var(--ink);margin:0;display:flex;align-items:baseline;justify-content:center;gap:.3rem;}
.plan-card .pp b{font-size:2.2rem;line-height:1;}
.plan-card .pp span{font-size:.84rem;color:var(--ink-soft);}
.plan-card ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:10px;text-align:left;}
.plan-card li{display:flex;gap:10px;font-size:.88rem;color:var(--ink);line-height:1.6;}
.plan-card li svg{flex:none;width:18px;height:18px;color:var(--leaf);margin-top:3px;}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px;}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:1.25rem;padding:2px 26px;transition:border-color .2s;}
.faq details[open]{border-color:var(--leaf-soft);}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:700;font-size:1.02rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:18px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .q{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun-soft);color:var(--wood-deep);
  display:grid;place-items:center;font-family:var(--font-serif);font-weight:700;font-size:.85rem;margin-right:2px;}
.faq summary .tx{flex:1;}
.faq summary .chev{flex:none;width:18px;height:18px;color:var(--ink-mute);transition:transform .3s;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq .ans{margin:0 0 22px 44px;font-size:.92rem;line-height:1.95;color:var(--ink-soft);word-break:auto-phrase;line-break:strict;}

@media (max-width:1000px){
  .page-hero .wrap{grid-template-columns:1fr;}
  .page-hero-photo{max-width:460px;}
  .benefit-grid,.plan-grid{grid-template-columns:1fr;max-width:480px;}
  .media-row,.media-row.rev{grid-template-columns:1fr;}
  .media-row.rev .media-txt{order:0;}
  .media-photo{max-width:460px;margin:0 auto;}
}



/* =========================================================
   Value / 数字
   ========================================================= */
.value-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,64px);align-items:end;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.stat-card{border:1px solid var(--border);background:var(--card);border-radius:1.5rem;padding:26px 28px;}
.stat-card .lab{font-size:.66rem;font-weight:700;letter-spacing:.26em;color:var(--ink-mute);margin:0;}
.stat-card .val{font-family:var(--font-serif);display:flex;align-items:baseline;gap:.5rem;margin:1rem 0 0;color:var(--ink);}
.stat-card .val b{font-size:clamp(2.2rem,3vw,2.9rem);font-weight:600;line-height:1;}
.stat-card .val span{font-size:.86rem;font-weight:500;color:var(--ink-soft);}

/* =========================================================
   Flow
   ========================================================= */
.flow-grid{max-width:var(--maxw);margin:clamp(48px,6vw,72px) auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.flow-card{position:relative;border:1px solid var(--border);background:var(--card);border-radius:1.75rem;padding:30px 26px;}
.flow-step{font-family:var(--font-serif);font-size:2.4rem;font-weight:600;color:rgba(181,138,86,.9);line-height:1;}
.flow-card h4{font-family:var(--font-serif);font-size:1.12rem;font-weight:600;margin:.8rem 0 .6rem;color:var(--ink);}
.flow-card p{font-size:.82rem;line-height:1.8;color:var(--ink-soft);margin:0;}
.flow-card::after{content:"";position:absolute;top:46px;right:-12px;width:18px;height:18px;border-top:2px solid var(--wood);
  border-right:2px solid var(--wood);transform:rotate(45deg);opacity:.5;}
.flow-card:last-child::after{display:none;}

/* =========================================================
   Safety
   ========================================================= */
.safety-panel{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,56px);
  border:1px solid var(--border);background:var(--card);border-radius:2.25rem;padding:clamp(32px,5vw,60px);}
.safety-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-self:start;}
.safety-list li{display:flex;align-items:flex-start;gap:12px;background:var(--bg-soft);border-radius:18px;padding:16px 20px;font-size:.9rem;line-height:1.7;color:var(--ink);}
.safety-ic{margin-top:2px;width:24px;height:24px;flex:none;border-radius:50%;background:rgba(46,107,62,.13);color:var(--leaf);display:grid;place-items:center;}
.safety-ic svg{width:14px;height:14px;}

/* =========================================================
   CTA
   ========================================================= */
.cta-panel{max-width:980px;margin:0 auto;overflow:hidden;border-radius:2.25rem;border:1px solid var(--border);background:var(--card);}
.cta-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:clamp(40px,5vw,72px);}
.cta-inner h2{font-family:var(--font-serif);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;line-height:1.34;margin:1.2rem 0 0;color:var(--ink);}
.cta-btns{display:flex;flex-direction:column;gap:12px;align-items:stretch;}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{position:relative;margin-top:clamp(60px,8vw,110px);background:var(--ink);color:var(--bg-soft);overflow:hidden;}
.footer-wave{display:block;width:100%;height:clamp(48px,6vw,80px);color:var(--bg);}
.footer-main{max-width:var(--maxw);margin:0 auto;padding:14px 24px 56px;display:grid;grid-template-columns:5fr 7fr;gap:48px;}
.footer-brand .row{display:flex;align-items:center;gap:12px;}
.footer-brand .chip{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;}
.footer-brand .chip img{width:32px;height:32px;object-fit:contain;}
.footer-brand .jp{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;letter-spacing:.04em;}
.footer-brand .en{font-size:.6rem;letter-spacing:.3em;color:rgba(255,255,255,.6);}
.footer-brand p{margin:1.5rem 0 0;font-size:.86rem;line-height:1.85;color:rgba(255,255,255,.72);}
.footer-brand .addr{margin-top:1.6rem;font-size:.74rem;line-height:1.7;color:rgba(255,255,255,.5);}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.footer-cols h5{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 1.1rem;font-weight:600;}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.footer-cols a{font-size:.88rem;color:rgba(255,255,255,.85);transition:color .2s;}
.footer-cols a:hover{color:var(--sun);}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:22px 24px 40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;color:rgba(255,255,255,.45);}
.footer-bottom .spaced{letter-spacing:.2em;}

/* =========================================================
   スクロール出現
   ========================================================= */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
html.js-reveal .reveal{opacity:0;transform:translateY(30px);}
html.js-reveal .reveal.in{opacity:1;transform:none;}
.stagger > *{transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
html.js-reveal .stagger > *{opacity:0;transform:translateY(26px);}
html.js-reveal .stagger.in > *{opacity:1;transform:none;}
html.js-reveal .stagger.in > *:nth-child(2){transition-delay:.1s;}
html.js-reveal .stagger.in > *:nth-child(3){transition-delay:.2s;}
html.js-reveal .stagger.in > *:nth-child(4){transition-delay:.3s;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .nav,.header-cta{display:none;}
  .menu-btn{display:flex;}
  .split,.split.rev,.value-grid,.safety-panel,.cta-inner{grid-template-columns:1fr;}
  .hero-grid{display:flex;flex-direction:column;gap:8px;}
  .hero-grid > div:first-child{order:2;}
  .hero-photo{order:1;max-width:540px;width:100%;margin:0 auto;}
  .hero h1{margin-top:1.1rem;}
  .concept-cards,.aud-grid{grid-template-columns:1fr;max-width:480px;}
  .flow-grid{grid-template-columns:1fr 1fr;}
  .flow-card::after{display:none;}
  .footer-main{grid-template-columns:1fr;gap:36px;}
  .collage{max-width:420px;margin:0 auto;}
  .cta-btns{align-items:stretch;}
}
@media (max-width:560px){
  .wrap{padding-left:18px;padding-right:18px;}
  .hero-grid{padding-left:18px;padding-right:18px;}
  .stat-grid{grid-template-columns:1fr;}
  .flow-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .hero-stack{display:none;}
  .collage-stack{width:110px;height:138px;right:-10px;}
  .collage-stack.phone-stack{width:96px;height:auto;}
}

@media (max-width:1000px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:110px;}
  .g-a,.g-b{grid-column:span 2;}
  .g-c,.g-d,.g-e{grid-column:span 2;grid-row:span 2;}
  /* .bigは6列モザイク（2-3-2）を維持 */
  .gallery-grid.big{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(108px,15vw,150px);}
}
/* スマホ：横スクロールカルーセル（奇数でも余らない） */
/* スマホ：円弧カルーセル（自動で流れる・絶対配置でなめらか） */
@media (max-width:700px){
  .gallery-grid.big{display:block;position:relative;height:clamp(320px,94vw,410px);
    overflow:hidden;grid-template-columns:none;grid-auto-rows:auto;gap:0;
    margin-left:calc(-1 * 24px);margin-right:calc(-1 * 24px);padding:0;
    touch-action:pan-y;scrollbar-width:none;}
  .gallery-grid.big::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(58% 46% at 50% 44%, rgba(242,168,58,.20), rgba(242,168,58,0) 70%);}
  .gallery-grid.big::-webkit-scrollbar{display:none;}
  .gallery-grid.big .gphoto{position:absolute;top:50%;left:50%;width:min(62%,288px);aspect-ratio:4/5;
    margin:0;grid-column:auto;grid-row:auto;transform-origin:center center;
    will-change:transform,opacity;backface-visibility:hidden;
    box-shadow:0 28px 50px -20px rgba(58,40,23,.55);}
  .gallery-grid.big .gphoto img{transition:none;}
  .gallery-grid.big .gphoto:hover img{transform:none;}
  .gallery-cap{text-align:center;}
  .gallery-cap::before{content:"← ドラッグでもっと見る →";display:block;color:var(--ink-mute);
    font-size:.78rem;letter-spacing:.08em;margin-bottom:.6rem;}
}
@media (max-width:560px){
  .gallery-grid:not(.big){grid-template-columns:1fr 1fr;grid-auto-rows:88px;}
  .g-a,.g-b,.g-c,.g-d,.g-e{grid-column:span 1;grid-row:span 2;}
  .aud-photo{height:160px;}
}

/* =========================================================
   イントロ演出（初回ロード）
   ─ 「今日の一瞬が、動画になって、手のひらに届く」
   ========================================================= */
html.intro-lock,html.intro-lock body{overflow:hidden;height:100%;}

.intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(60% 50% at 82% 16%,rgba(242,168,58,.38),transparent 60%),
    radial-gradient(48% 42% at 12% 86%,rgba(224,130,90,.3),transparent 62%),
    radial-gradient(40% 38% at 50% 50%,rgba(251,224,160,.46),transparent 70%),
    var(--bg);
  clip-path:circle(150% at 50% 46%);
  will-change:clip-path;
}
.intro.closing{clip-path:circle(0% at 50% 46%);transition:clip-path 1.05s cubic-bezier(.85,0,.25,1);}
.intro.gone{display:none;}

/* 流れるフィルムストリップ（背景） */
.intro-strip{position:absolute;top:50%;left:0;display:flex;gap:18px;padding:0 6vw;
  transform:translate(0,-50%);opacity:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);}
.intro.playing .intro-strip{animation:stripIn .7s ease .25s forwards, stripMove 7.5s linear .25s;}
.intro-strip span{flex:none;width:208px;height:138px;border-radius:18px;overflow:hidden;
  border:4px solid #fff;box-shadow:0 24px 50px -28px rgba(47,36,24,.6);transform:translateY(8px);}
.intro-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) sepia(.05) brightness(1.02);}
@keyframes stripIn{to{opacity:.5;}}
@keyframes stripMove{from{transform:translate(0,-50%);}to{transform:translate(-1180px,-50%);}}

/* 中央：ロゴ＋通知パルス */
.intro-center{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2;}
.intro-rings{position:absolute;top:-6px;left:50%;width:108px;height:108px;transform:translateX(-50%);pointer-events:none;}
.intro-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--leaf);opacity:0;}
.intro.playing .intro-rings i{animation:ring 2.1s cubic-bezier(.2,.7,.3,1) infinite;}
.intro.playing .intro-rings i:nth-child(2){animation-delay:.7s;}
.intro.playing .intro-rings i:nth-child(3){animation-delay:1.4s;}
@keyframes ring{0%{transform:scale(.55);opacity:.55;}80%{opacity:0;}100%{transform:scale(1.9);opacity:0;}}

.intro-chip{width:108px;height:108px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 24px 60px -26px rgba(47,36,24,.5);transform:scale(.4);opacity:0;}
.intro-chip img{width:78px;height:78px;object-fit:contain;}
.intro.playing .intro-chip{animation:chipPop .9s cubic-bezier(.34,1.56,.64,1) .1s forwards;}
@keyframes chipPop{0%{transform:scale(.4);opacity:0;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}

.intro-word{margin-top:26px;font-family:var(--font-serif);font-weight:600;letter-spacing:.34em;
  font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--ink);display:flex;}
.intro-word span{display:inline-block;opacity:0;transform:translateY(14px);}
.intro.playing .intro-word span{animation:wordUp .6s cubic-bezier(.2,.7,.3,1) forwards;}
.intro.playing .intro-word span:nth-child(1){animation-delay:.55s;}
.intro.playing .intro-word span:nth-child(2){animation-delay:.64s;}
.intro.playing .intro-word span:nth-child(3){animation-delay:.73s;}
.intro.playing .intro-word span:nth-child(4){animation-delay:.82s;}
.intro.playing .intro-word span:nth-child(5){animation-delay:.91s;}
.intro.playing .intro-word span:nth-child(6){animation-delay:1.0s;}
@keyframes wordUp{to{opacity:1;transform:none;}}

.intro-sub{margin-top:14px;font-size:.92rem;letter-spacing:.16em;color:var(--ink-soft);opacity:0;
  position:relative;padding-top:18px;}
.intro-sub::before{content:"";position:absolute;top:0;left:50%;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--leaf),var(--sun));transform:translateX(-50%);}
.intro.playing .intro-sub{animation:subIn .7s ease 1.25s forwards;}
.intro.playing .intro-sub::before{animation:lineDraw .7s cubic-bezier(.2,.7,.3,1) 1.15s forwards;}
@keyframes subIn{to{opacity:1;}}
@keyframes lineDraw{to{width:54px;}}

.intro-skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.22em;color:var(--ink-mute);background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;opacity:0;}
.intro.playing .intro-skip{animation:subIn .6s ease 1.8s forwards;}
.intro-skip:hover{color:var(--ink);}

@media (max-width:560px){
  .intro-strip span{width:140px;height:94px;}
  @keyframes stripMove{from{transform:translate(0,-50%);}to{transform:translate(-240px,-50%);}}
}

/* ヒーロー登場（イントロ後にトリガー） */
.hero h1.reveal{transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}

@media (prefers-reduced-motion: reduce){
  .intro{display:none;}
  html.intro-lock,html.intro-lock body{overflow:auto;height:auto;}
  .intro.playing .intro-strip,.intro.playing .intro-chip,.intro.playing .intro-word span,
  .intro.playing .intro-rings i,.intro.playing .intro-sub{animation:none;}
}
