@charset "UTF-8";
/* =====================================================================
   Sprout ― こども英語教室  |  Design System
   忠実再現ベース: Pikkas International Preschool (構造/モーション)
   翻案: ナチュラル余白エディトリアル（生成り × 新芽グリーン × 墨）
   Type: Shippori Mincho B1（理念の明朝） / Montserrat（英字） / Noto Sans JP（本文）
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Fonts
 * ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho+B1:wght@500;600;700;800&family=Zen+Maru+Gothic:wght@500;700&display=swap');

/* ------------------------------------------------------------------ *
 * 2. Tokens
 * ------------------------------------------------------------------ */
:root{
  /* fluid grid unit (Pikkas DNA) */
  --grid: 2.0833vw;
  --vh: 1vh;

  /* palette : ナチュラル余白 */
  --bg:        #F6F2E9;   /* 生成り base */
  --bg-soft:   #FBF8F1;   /* lighter cream (cards/alt) */
  --white:     #FFFFFF;
  --green:     #6FA05C;   /* 新芽グリーン primary */
  --green-mid: #5C8B4B;   /* hover / mid */
  --green-deep:#2F4A33;   /* 深緑 dark面 */
  --green-soft:#EAF0E2;   /* pale green wash */
  --ink:       #23211D;   /* 墨 text */
  --ink-soft:  #6A6459;   /* muted */
  --tan:       #B89F71;   /* 温かい中間色 line/arrow */
  --sun:       #E4A93F;   /* 陽だまり accent（少量） */
  --line:      #E3DCCB;   /* hairline on cream */
  /* brand (supplied logo) = terracotta ― primary action / accent */
  --brand:     #CE5734;   /* ロゴのテラコッタ */
  --brand-deep:#A8442A;   /* hover / press */
  --brand-soft:#F3E1D8;   /* pale wash */

  --maxw: 1680px;

  /* easing (Pikkas) */
  --e-expo: cubic-bezier(.19,1,.22,1);
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:1681px){ :root{ --grid: 35px; } }
@media (max-width:1023px){ :root{ --grid: 20px; } }
@media (max-width:680px){  :root{ --grid: 16px; } }

/* ------------------------------------------------------------------ *
 * 3. Reset / base
 * ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; line-height:1.15; scroll-behavior:smooth; }
body{
  margin:0; padding:0; position:relative; width:100%; overflow-x:hidden;
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP","Montserrat",sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-break:strict; word-break:normal; overflow-wrap:anywhere;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,li{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
::selection{ background:var(--green-soft); color:var(--green-deep); }

/* ------------------------------------------------------------------ *
 * 4. Type utilities
 * ------------------------------------------------------------------ */
.--en{ font-family:"Montserrat",sans-serif; letter-spacing:.02em; }
.--mincho{ font-family:"Shippori Mincho B1",serif; }
.--round{ font-family:"Zen Maru Gothic",sans-serif; }
.u-upper{ text-transform:uppercase; }
.u-t-center{ text-align:center; }
.-w4{ font-weight:400; } .-w5{ font-weight:500; } .-w6{ font-weight:600; } .-w7{ font-weight:700; }

.fs-xxl{ font-size:clamp(38px, 5.4vw, 74px);  line-height:1.02; letter-spacing:.005em; }
.fs-xl{  font-size:clamp(23px, 3.05vw, 46px); line-height:1.5;  letter-spacing:.02em; }
.fs-l{   font-size:clamp(19px, 2.05vw, 30px); line-height:1.55; letter-spacing:.02em; }
.fs-m{   font-size:clamp(15px, 1.12vw, 18px); line-height:1.95; letter-spacing:.02em; }
.fs-s{   font-size:clamp(13.5px, .92vw, 15px);line-height:1.85; letter-spacing:.02em; }
.fs-xs{  font-size:clamp(11px, .74vw, 12.5px);line-height:1.4;  letter-spacing:.08em; }
.fs-xxs{ font-size:clamp(10px, .62vw, 11px);  line-height:1.4;  letter-spacing:.08em; }

/* ------------------------------------------------------------------ *
 * 5. Layout utilities
 * ------------------------------------------------------------------ */
.u-body{ padding-inline:calc(var(--grid)*1.5); max-width:var(--maxw); margin-inline:auto; }
.u-df{ display:flex; }
.u-in{ width:100%; }
.u-br{ border-radius:calc(var(--grid)*.5); overflow:hidden; }
.u-vh{ min-height:calc(var(--vh,1vh)*100); }
.hide-m{ display:revert; } .show-m{ display:none; }

.u-hr{ display:block; height:2px; width:0%; background:var(--line); }
.js-visible[data-shown="1"] .u-hr, .u-hr.is-shown{ width:100%; transition:width 1.4s var(--e-out); }

/* vertical rhythm spacers */
.spr{ display:block; width:100%; }
.spr-g03{ height:calc(var(--grid)*.33); }
.spr-g05{ height:calc(var(--grid)*.5); }
.spr-g{   height:calc(var(--grid)*1); }
.spr-g15{ height:calc(var(--grid)*1.5); }
.spr-g2{  height:calc(var(--grid)*2); }
.spr-g3{  height:calc(var(--grid)*3); }
.spr-g4{  height:calc(var(--grid)*4); }
.spr-g5{  height:calc(var(--grid)*5); }
.spr-g6{  height:calc(var(--grid)*6); }

/* ------------------------------------------------------------------ *
 * 6. Reveal system (line-clip)  — Pikkas DNA
 * ------------------------------------------------------------------ */
.--l{ display:inline-block; position:relative; overflow:hidden; line-height:1.2em; vertical-align:top; }
.--l_t{ display:inline-block; opacity:0; transform:translateY(105%) scale(.98); transition:transform .95s var(--e-expo), opacity .95s var(--e-expo); }
.js-visible[data-shown="1"] .--l_t{ opacity:1; transform:translateY(0) scale(1); }

/* generic fade/rise reveal for blocks & images */
.js-visible__d{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); }
.js-visible[data-shown="1"] .js-visible__d{ opacity:1; transform:translateY(0); }
/* image mask reveal */
.js-img__wrap{ position:relative; overflow:hidden; }
.js-img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.12); transition:transform 1.4s var(--e-out); }
.js-visible[data-shown="1"] .js-img{ transform:scale(1); }
.js-reveal-cover::after{ content:""; position:absolute; inset:0; background:var(--bg-soft); transform-origin:bottom; transition:transform 1.1s var(--e-expo); z-index:2; }
.js-visible[data-shown="1"] .js-reveal-cover::after{ transform:scaleY(0); }

@media (prefers-reduced-motion:reduce){
  .--l_t,.js-visible__d,.js-img{ transition:none !important; opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* stagger delays */
[data-delay="0.1"]{ transition-delay:.1s; } [data-delay="0.2"]{ transition-delay:.2s; }
[data-delay="0.3"]{ transition-delay:.3s; } [data-delay="0.4"]{ transition-delay:.4s; }
[data-delay="0.5"]{ transition-delay:.5s; } [data-delay="0.6"]{ transition-delay:.6s; }

/* ------------------------------------------------------------------ *
 * 7. Sprout leaf motif (eyebrow marker)
 * ------------------------------------------------------------------ */
.c-leaf{ display:inline-block; width:16px; height:18px; color:var(--green); flex:0 0 auto; }
.c-leaf svg{ width:100%; height:100%; fill:currentColor; }

/* ------------------------------------------------------------------ *
 * 8. Section eyebrow  (c-title-sub)
 * ------------------------------------------------------------------ */
.c-title-sub{ }
.c-title-sub__texts{ display:flex; align-items:center; gap:calc(var(--grid)*.5); color:var(--green-deep); }
.c-title-sub__texts.is-center{ justify-content:center; }
.c-title-sub__en{ letter-spacing:.16em; }

/* ------------------------------------------------------------------ *
 * 9. Buttons
 * ------------------------------------------------------------------ */
.c-btn{
  --btn-bg:var(--green); --btn-fg:var(--white);
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding:calc(var(--grid)*.62) calc(var(--grid)*1.15) calc(var(--grid)*.62) calc(var(--grid)*1.35);
  background:var(--btn-bg); color:var(--btn-fg);
  border-radius:100vw; overflow:hidden; cursor:pointer;
  font-family:"Montserrat",sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:clamp(12px,.86vw,14px); line-height:1;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
  box-shadow:0 8px 22px -12px color-mix(in srgb, var(--green-deep) 60%, transparent);
}
.c-btn__label{ position:relative; z-index:2; white-space:nowrap; }
.c-btn__arrow{ position:relative; z-index:2; width:1.5em; height:1.5em; border-radius:50%;
  background:color-mix(in srgb, var(--white) 22%, transparent);
  display:flex; align-items:center; justify-content:center; transition:transform .5s var(--e-expo); }
.c-btn__arrow svg{ width:.62em; height:.62em; fill:var(--btn-fg); }
.c-btn__bg{ position:absolute; inset:0; z-index:1; background:var(--green-deep);
  transform:translateX(-101%); transition:transform .6s var(--e-expo); }
@media (hover:hover){
  .c-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px color-mix(in srgb, var(--green-deep) 70%, transparent); }
  .c-btn:hover .c-btn__bg{ transform:translateX(0); }
  .c-btn:hover .c-btn__arrow{ transform:translateX(3px); }
}
/* variants */
.c-btn--sun{ --btn-bg:var(--brand); --btn-fg:#fff; box-shadow:0 10px 24px -12px color-mix(in srgb,var(--brand) 70%,transparent); }
.c-btn--sun .c-btn__bg{ background:var(--brand-deep); }
.c-btn--sun .c-btn__arrow{ background:color-mix(in srgb,#fff 24%,transparent); }
.c-btn--sun .c-btn__arrow svg{ fill:#fff; }
.c-btn--ghost{ --btn-bg:transparent; --btn-fg:var(--green-deep); border:1.5px solid var(--green); }
.c-btn--ghost .c-btn__arrow{ background:var(--green-soft); }
.c-btn--ghost .c-btn__arrow svg{ fill:var(--green-deep); }
.c-btn--ghost .c-btn__bg{ background:var(--green); }
@media (hover:hover){ .c-btn--ghost:hover{ --btn-fg:var(--white); } .c-btn--ghost:hover .c-btn__arrow svg{ fill:var(--white); } }
.c-btn--lg{ padding:calc(var(--grid)*.8) calc(var(--grid)*1.4) calc(var(--grid)*.8) calc(var(--grid)*1.6); font-size:clamp(13px,.95vw,15px); }
.c-btn--center{ display:flex; justify-content:center; }

/* small round scroll button */
.c-btn--scroll{ width:52px; height:26px; border-radius:100vw; background:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -10px rgba(47,74,51,.5); }
.c-btn--scroll svg{ width:9px; height:8px; fill:var(--tan); transform:rotate(90deg); animation:scrollNudge 1.8s var(--e-out) infinite; }
@keyframes scrollNudge{ 0%,100%{ transform:rotate(90deg) translateX(0);} 50%{ transform:rotate(90deg) translateX(3px);} }

/* ------------------------------------------------------------------ *
 * 10. Header
 * ------------------------------------------------------------------ */
.l-header{ position:fixed; top:0; left:0; z-index:500; width:100%;
  padding:calc(var(--grid)*.55); transition:transform .5s var(--e-out); }
.l-header__inner{ position:relative; max-width:var(--maxw); margin-inline:auto;
  height:60px; padding:0 calc(var(--grid)*.9); display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--white) 82%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb, var(--green-deep) 8%, transparent);
  border-radius:100vw; box-shadow:0 10px 30px -20px rgba(47,74,51,.4); }
.l-header__logo{ display:flex; align-items:center; gap:.5em; z-index:10; }
.l-header__logo-img{ height:26px; width:auto; max-width:none; display:block; }
.l-header__logo .c-wordmark{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--green-deep); }
.l-header__logo .c-leaf{ width:15px; height:17px; }
.l-header__nav{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; }
.l-header__nav-ul{ display:flex; align-items:center; gap:calc(var(--grid)*1); }
.l-header__nav-ul a{ position:relative; padding:6px 2px; font-family:"Montserrat",sans-serif; font-weight:500; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); transition:color .3s; }
.l-header__nav-ul a::after{ content:""; position:absolute; left:50%; bottom:-2px; width:5px; height:5px; border-radius:50%; background:var(--green); opacity:0; transform:translate(-50%,4px); transition:all .4s var(--e-out); }
@media (hover:hover){ .l-header__nav-ul a:hover{ color:var(--green-deep); } .l-header__nav-ul a:hover::after{ opacity:1; transform:translate(-50%,0); } }
.l-header__nav-ul a.is-current{ color:var(--green-deep); }
.l-header__nav-ul a.is-current::after{ opacity:1; transform:translate(-50%,0); }
.l-header__cta{ z-index:10; }
.l-header__cta .c-btn{ padding:calc(var(--grid)*.5) calc(var(--grid)*.95) calc(var(--grid)*.5) calc(var(--grid)*1.1); }
.l-header__burger{ display:none; }

/* hide on scroll down */
html[data-dir="down"] .l-header{ transform:translateY(-130%); }

/* ------------------------------------------------------------------ *
 * 11. Mobile menu (fullscreen)
 * ------------------------------------------------------------------ */
.l-menu{ position:fixed; inset:0; z-index:600; visibility:hidden; pointer-events:none; }
.l-menu__panel{ position:absolute; inset:0; background:var(--green-deep); clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .8s var(--e-expo); }
.l-menu.is-open{ visibility:visible; pointer-events:auto; }
.l-menu.is-open .l-menu__panel{ clip-path:circle(150% at calc(100% - 46px) 46px); }
.l-menu__inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:12vh 8vw; opacity:0; transform:translateY(20px); transition:all .5s var(--e-out) .15s; }
.l-menu.is-open .l-menu__inner{ opacity:1; transform:translateY(0); }
.l-menu__link{ display:block; color:var(--bg); font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:clamp(28px,7vw,52px); line-height:1.5; letter-spacing:.02em; }
.l-menu__link small{ display:inline-block; margin-left:1em; font-family:"Montserrat",sans-serif; font-weight:500; font-size:.28em; letter-spacing:.2em; text-transform:uppercase; color:var(--green); vertical-align:middle; }
.l-menu__sub{ margin-top:8vh; display:flex; flex-wrap:wrap; gap:1.4em; }
.l-menu__sub a{ color:color-mix(in srgb,var(--bg) 75%,transparent); font-family:"Montserrat",sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.l-menu__close{ position:absolute; z-index:5; top:20px; right:18px; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--bg);
  border:1px solid color-mix(in srgb,var(--bg) 40%,transparent);
  opacity:0; transform:scale(.75) rotate(-30deg); transition:opacity .4s var(--e-out) .18s, transform .5s var(--e-expo) .18s, background .3s; }
.l-menu.is-open .l-menu__close{ opacity:1; transform:scale(1) rotate(0); }
.l-menu__close svg{ width:20px; height:20px; stroke:currentColor; }
@media (hover:hover){ .l-menu__close:hover{ background:color-mix(in srgb,var(--bg) 14%,transparent); } }

/* ------------------------------------------------------------------ *
 * 12. Message component (intro block)
 * ------------------------------------------------------------------ */
.c-message__lead{ font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--ink); }
.c-message__texts{ color:var(--ink-soft); max-width:46em; }
.c-message__info{ display:flex; align-items:flex-end; gap:calc(var(--grid)*1.5); flex-wrap:wrap; }

/* ------------------------------------------------------------------ *
 * 13. Parallax wrap
 * ------------------------------------------------------------------ */
.js-p__wrap{ position:relative; overflow:hidden; }
.js-p__item{ position:absolute; inset:-6% 0; will-change:transform; }

/* ------------------------------------------------------------------ *
 * 14. Placeholder image treatment (before real photos)
 * ------------------------------------------------------------------ */
.ph{ position:relative; background:
    repeating-linear-gradient(135deg, rgba(47,74,51,.05) 0 2px, transparent 2px 20px),
    linear-gradient(135deg, #C2D6A8 0%, #D8CBA0 100%); }
.ph::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(47,74,51,.12); pointer-events:none; }
.ph::after{ content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1em;
  font-family:"Montserrat",sans-serif; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,var(--green-deep) 62%,transparent); }
/* keep placeholder image layers filling their (absolute) js-img box */
.js-img.ph{ position:absolute; inset:0; }

/* Google Map embed */
.map-embed{ position:relative; overflow:hidden; background:var(--green-soft); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ------------------------------------------------------------------ *
 * 15. Rounded card stack
 * ------------------------------------------------------------------ */
.c-card{ position:relative; }
.c-card__inner{ position:relative; z-index:2; }
.c-card__content{ background:var(--white); border-radius:calc(var(--grid)*1.2); padding:calc(var(--grid)*2.2) calc(var(--grid)*2);
  box-shadow:0 40px 80px -50px rgba(47,74,51,.5); }
.c-card__image{ aspect-ratio:16/10; border-radius:calc(var(--grid)*.7); }

/* ------------------------------------------------------------------ *
 * 16. Footer
 * ------------------------------------------------------------------ */
.l-footer{ position:relative; background:var(--green-deep); color:var(--bg); border-radius:calc(var(--grid)*2) calc(var(--grid)*2) 0 0; margin-top:calc(var(--grid)*2); }
.l-footer a{ transition:color .3s; }
@media (hover:hover){ .l-footer a:hover{ color:var(--green); } }
.l-footer__inner{ padding:calc(var(--grid)*3) 0 calc(var(--grid)*1.5); }
.l-footer__grid{ display:flex; flex-wrap:wrap; gap:calc(var(--grid)*2.5); justify-content:space-between; }
.l-footer__brand .c-wordmark{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:30px; color:var(--bg); letter-spacing:.03em; }
.l-footer__logo-img{ height:38px; width:auto; max-width:none; display:block; }
.l-footer__col h4{ font-family:"Montserrat",sans-serif; font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:1.2em; }
.l-footer__col li{ margin-bottom:.7em; }
.l-footer__foot{ border-top:1px solid color-mix(in srgb,var(--bg) 16%,transparent); margin-top:calc(var(--grid)*2.5);
  padding:calc(var(--grid)*1) 0; display:flex; justify-content:space-between; align-items:center; gap:1em; flex-wrap:wrap; }
.l-footer__foot small{ font-size:11px; letter-spacing:.06em; color:color-mix(in srgb,var(--bg) 65%,transparent); }

/* ------------------------------------------------------------------ *
 * 17. Mobile fixed CTA bar (三段目)
 * ------------------------------------------------------------------ */
.m-cta{ display:none; }

/* ------------------------------------------------------------------ *
 * 18. Section shell
 * ------------------------------------------------------------------ */
.section{ position:relative; }
.section--cream{ background:var(--bg); }
.section--soft{ background:var(--bg-soft); }
.section--green{ background:var(--green-deep); color:var(--bg); border-radius:calc(var(--grid)*2); }
.section--green .c-title-sub__texts{ color:var(--green); }
.section--green .c-message__lead{ color:var(--bg); }
.section--green .c-message__texts{ color:color-mix(in srgb,var(--bg) 80%,transparent); }
.wave-top{ display:block; width:100%; height:calc(var(--grid)*2.2); fill:var(--bg); }

/* ------------------------------------------------------------------ *
 * 19. Responsive
 * ------------------------------------------------------------------ */
@media (max-width:1023px){
  .hide-m{ display:none !important; } .show-m{ display:revert; }
  .l-header__nav{ display:none; }
  .l-header__cta{ display:none; }
  .l-header__burger{ display:flex; flex-direction:column; gap:5px; width:46px; height:46px; align-items:center; justify-content:center;
    background:var(--green-deep); border-radius:50%; z-index:620; position:relative; }
  .l-header__burger span{ width:20px; height:2px; background:var(--bg); border-radius:2px; transition:all .4s var(--e-expo); }
  .l-header.is-menu .l-header__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .l-header.is-menu .l-header__burger span:nth-child(2){ opacity:0; }
  .l-header.is-menu .l-header__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .c-message__info{ gap:calc(var(--grid)*1); }
  .m-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:400; gap:1px; background:var(--line);
    box-shadow:0 -10px 30px -20px rgba(47,74,51,.6); }
  .m-cta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:.5em; padding:14px 8px;
    font-weight:700; font-size:13px; letter-spacing:.04em; }
  .m-cta__tel{ background:var(--white); color:var(--green-deep); }
  .m-cta__trial{ background:var(--brand); color:var(--white); }
  .m-cta svg{ width:16px; height:16px; }
  body{ padding-bottom:52px; }
}
@media (max-width:680px){
  .u-body{ padding-inline:calc(var(--grid)*1.25); }
  .c-card__content{ padding:calc(var(--grid)*1.6) calc(var(--grid)*1.2); }
  .c-message__info{ flex-direction:column; align-items:stretch; }
}