@charset "UTF-8";
/* =====================================================================
   Sprout ― home (TOP) section styles
   ===================================================================== */

/* ---------- Hero ---------- */
.home-fv{ position:relative; min-height:calc(var(--vh,1vh)*100); display:flex; align-items:flex-end;
  padding-bottom:calc(var(--grid)*3); overflow:hidden; }
.home-fv__bg{ position:absolute; inset:0; z-index:0; background:var(--green-deep); }
.home-fv__bg .js-img{ transform:scale(1.06); }
/* richer placeholder so hero reads well before the real photo */
.home-fv__bg .js-img.ph{ background:
    radial-gradient(120% 90% at 78% 15%, rgba(228,169,63,.28) 0%, rgba(228,169,63,0) 45%),
    linear-gradient(160deg, #486B4A 0%, #395A3C 42%, #2F4A33 100%); }
.home-fv__bg .js-img.ph::after{ color:color-mix(in srgb, #fff 45%, transparent); }
.home-fv__bg .ph::after{ display:none; } /* no dev label over hero */
/* PC 16:9 default / phone 9:16 swap (SP = no parallax) */
.home-fv__img--sp{ display:none; }
@media (max-width:680px){
  .home-fv__img--pc{ display:none; }
  .home-fv__img--sp{ display:block; }
}
.home-fv__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(35,33,29,.20) 0%, rgba(35,33,29,0) 32%, rgba(35,33,29,.10) 62%, rgba(47,74,51,.62) 100%); }
.home-fv__inner{ position:relative; z-index:2; width:100%; padding-top:calc(var(--grid)*6); color:var(--white); }
.home-fv .c-title-sub__texts{ color:var(--white); }
.home-fv .c-leaf{ color:var(--brand); }
.home-fv__lead{ color:var(--white); text-shadow:0 4px 40px rgba(35,33,29,.35); }
.home-fv__note{ color:color-mix(in srgb,var(--white) 92%,transparent); text-shadow:0 2px 20px rgba(35,33,29,.4); max-width:32em; }

/* hero kinetic word row */
.home-fv__kinetic{ display:flex; align-items:center; gap:.5em; flex-wrap:wrap; }
.home-fv__word{ font-family:"Montserrat",sans-serif; font-weight:600; letter-spacing:.06em;
  font-size:clamp(20px,2.6vw,40px); color:var(--white); line-height:1; }
.home-fv__tile{ position:relative; width:clamp(56px,7vw,104px); height:clamp(40px,5vw,70px);
  border-radius:calc(var(--grid)*.4); overflow:hidden; background:var(--green-soft); box-shadow:0 10px 30px -14px rgba(35,33,29,.5); }
.home-fv__tile .ph::after{ display:none; } /* tiles too small for dev labels */
.home-fv__tile .js-change__item{ position:absolute; inset:0; background-size:cover; background-position:center;
  transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.home-fv__tile .--01{ opacity:1; transform:scale(1); }
.home-fv__tile .--02{ opacity:0; transform:scale(1.06); }
.js-change[data-mode="1"] .home-fv__tile .--01{ opacity:0; transform:scale(1.06); }
.js-change[data-mode="1"] .home-fv__tile .--02{ opacity:1; transform:scale(1); }
.home-fv__swap{ width:30px; height:30px; border:1px dashed color-mix(in srgb,var(--white) 70%,transparent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--white); transition:transform .6s var(--e-expo), opacity .3s; }
.home-fv__swap svg{ width:15px; height:15px; }
@media (hover:hover){ .home-fv__swap:hover{ transform:rotate(90deg); opacity:.8; } }
.home-fv__cta{ display:flex; gap:calc(var(--grid)*.6); flex-wrap:wrap; }
/* hero ghost button = light on dark bg */
.home-fv__cta .c-btn--ghost{ --btn-fg:var(--white); border-color:color-mix(in srgb,var(--white) 55%,transparent); }
.home-fv__cta .c-btn--ghost .c-btn__arrow{ background:color-mix(in srgb,var(--white) 20%,transparent); }
.home-fv__cta .c-btn--ghost .c-btn__arrow svg{ fill:var(--white); }
.home-fv__cta .c-btn--ghost .c-btn__bg{ background:var(--green); }

/* ---------- About ---------- */
.home-about__grid{ display:grid; grid-template-columns:1fr 0.92fr; gap:calc(var(--grid)*3); align-items:center; }
.home-about__media{ position:relative; }
.home-about__img{ aspect-ratio:4/5; border-radius:calc(var(--grid)*1.1); }
.home-about__leaf{ position:absolute; right:-2%; top:-6%; width:clamp(48px,6vw,92px); color:var(--green); opacity:.9;
  transform:rotate(8deg); }
.home-about__leaf svg{ width:100%; height:auto; fill:currentColor; }

/* ---------- Why ---------- */
.home-why__inner{ max-width:60em; margin-inline:auto; }
.home-why__quote{ color:var(--green-deep); }
.home-why__text{ color:var(--ink-soft); }

/* ---------- Feature ---------- */
.home-feature__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--grid)*1); }
.feat-card{ background:var(--white); border-radius:calc(var(--grid)*.8); padding:calc(var(--grid)*1.6) calc(var(--grid)*1.4);
  border:1px solid var(--line); transition:transform .5s var(--e-out), box-shadow .5s var(--e-out); }
@media (hover:hover){ .feat-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -34px rgba(47,74,51,.45); } }
.feat-card__no{ display:inline-block; font-weight:600; font-size:13px; letter-spacing:.1em; color:var(--green);
  padding-bottom:.5em; border-bottom:2px solid var(--green-soft); }
.feat-card__ttl{ margin:.9em 0 .6em; font-weight:700; font-size:clamp(16px,1.25vw,19px); color:var(--green-deep); line-height:1.5; }
.feat-card p{ color:var(--ink-soft); }

/* ---------- Teacher ---------- */
.home-teacher__grid{ display:grid; grid-template-columns:0.92fr 1fr; gap:calc(var(--grid)*3); align-items:center; }
.teacher-duo{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*.8); }
.teacher-duo__card{ position:relative; aspect-ratio:3/4; border-radius:calc(var(--grid)*.9); }
.teacher-duo__card:nth-child(2){ margin-top:calc(var(--grid)*1.8); }
.teacher-duo__cap{ position:absolute; left:calc(var(--grid)*.6); bottom:calc(var(--grid)*.55); z-index:2;
  color:var(--white); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  background:color-mix(in srgb,var(--green-deep) 65%,transparent); padding:.35em .8em; border-radius:100vw; backdrop-filter:blur(4px); }

/* ---------- Course ---------- */
.home-course__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--grid)*1); }
.course-card{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*.9);
  padding:calc(var(--grid)*1.7) calc(var(--grid)*1.4); display:flex; flex-direction:column; gap:.5em;
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out); }
@media (hover:hover){ .course-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -34px rgba(47,74,51,.45); } }
.course-card__age{ align-self:flex-start; font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); background:var(--green-soft); padding:.4em .9em; border-radius:100vw; }
.course-card__ttl{ margin-top:.4em; font-weight:700; font-size:clamp(18px,1.5vw,23px); color:var(--green-deep); }
.course-card p.fs-s{ color:var(--ink-soft); flex:1; }
.course-card__price{ margin-top:.6em; padding-top:.9em; border-top:1px dashed var(--line);
  font-family:"Montserrat",sans-serif; color:var(--ink); display:flex; align-items:baseline; gap:.3em; }
.course-card__price b{ font-size:clamp(26px,2.4vw,36px); font-weight:600; color:var(--green-deep); letter-spacing:0; }
.course-card__price span{ font-size:12.5px; color:var(--ink-soft); font-family:"Noto Sans JP",sans-serif; }
.home-course__note{ text-align:center; color:var(--ink-soft); letter-spacing:.04em; }

/* ---------- Lesson flow ---------- */
.lesson-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--grid)*1); counter-reset:step; position:relative; }
.lesson-flow__step{ position:relative; padding:calc(var(--grid)*1.4) calc(var(--grid)*1.1); background:var(--white);
  border-radius:calc(var(--grid)*.7); border:1px solid var(--line); }
.lesson-flow__no{ font-weight:600; font-size:clamp(24px,2vw,32px); color:var(--green-soft);
  -webkit-text-stroke:1px var(--green); }
.lesson-flow__step h3{ margin:.5em 0 .4em; font-weight:700; font-size:clamp(15px,1.15vw,18px); color:var(--green-deep); }
.lesson-flow__step p{ color:var(--ink-soft); }

/* ---------- Voice ---------- */
.home-voice__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--grid)*1); }
.voice-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:calc(var(--grid)*.9);
  padding:calc(var(--grid)*1.7) calc(var(--grid)*1.5); display:flex; flex-direction:column; gap:1.2em; position:relative; }
.voice-card::before{ content:"“"; position:absolute; top:.1em; left:.35em; font-family:"Shippori Mincho B1",serif;
  font-size:64px; line-height:1; color:var(--green-soft); }
.voice-card blockquote{ position:relative; color:var(--ink); line-height:1.95; margin:0; }
.voice-card figcaption{ color:var(--green); letter-spacing:.06em; margin-top:auto; }

/* ---------- Trial band ---------- */
.home-trial{ margin-inline:calc(var(--grid)*.8); }
.home-trial__inner{ max-width:56em; margin-inline:auto; }
.home-trial__ttl{ color:var(--bg); }
.home-trial__text{ color:color-mix(in srgb,var(--bg) 86%,transparent); }
.home-trial__cta{ display:flex; gap:calc(var(--grid)*.6); justify-content:center; flex-wrap:wrap; }
.home-trial .c-btn--ghost{ --btn-fg:var(--bg); border-color:color-mix(in srgb,var(--bg) 45%,transparent); }
.home-trial .c-btn--ghost .c-btn__arrow{ background:color-mix(in srgb,var(--bg) 16%,transparent); }
.home-trial .c-btn--ghost .c-btn__arrow svg{ fill:var(--bg); }
.home-trial__hours{ color:color-mix(in srgb,var(--bg) 62%,transparent); letter-spacing:.04em; }

/* ---------- Access ---------- */
.home-access__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:calc(var(--grid)*3); align-items:center; }
.access-list div{ display:flex; gap:1em; padding:.8em 0; border-bottom:1px solid var(--line); }
.access-list dt{ flex:0 0 5.5em; color:var(--green); font-weight:500; letter-spacing:.04em; }
.access-list dd{ margin:0; color:var(--ink); }
.home-access__map{ aspect-ratio:4/3; border-radius:calc(var(--grid)*1); }

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .home-about__grid,.home-teacher__grid,.home-access__grid{ grid-template-columns:1fr; gap:calc(var(--grid)*2); }
  .home-teacher__media{ order:2; }
  .home-feature__grid,.home-course__grid,.home-voice__grid{ grid-template-columns:1fr 1fr; }
  .lesson-flow{ grid-template-columns:1fr 1fr; }
  .home-about__img{ aspect-ratio:16/11; }
}
@media (max-width:680px){
  .home-fv{ padding-bottom:calc(var(--grid)*2.5); }
  .home-fv__kinetic{ gap:.34em; row-gap:.5em; max-width:100%; }
  .home-fv__word{ font-size:clamp(16px,4.6vw,22px); }
  .home-fv__tile{ width:clamp(44px,12vw,64px); height:clamp(32px,8.5vw,46px); }
  .home-fv__swap{ width:26px; height:26px; }
  .home-fv__cta{ flex-direction:column; align-items:stretch; width:100%; }
  .home-fv__cta .c-btn{ width:100%; justify-content:space-between; }
  .home-feature__grid,.home-course__grid,.home-voice__grid,.lesson-flow{ grid-template-columns:1fr; }
  .home-trial__cta .c-btn{ width:100%; justify-content:space-between; }
}