@charset "UTF-8";
/* =====================================================================
   Sprout ― sub-page styles (about / feature / teacher / course /
   lesson / voice / faq / trial / access)
   loads after style.css ; shares tokens & utilities
   ===================================================================== */

/* ---------- page shell ---------- */
.l-page{ display:block; }

/* ---------- page hero ---------- */
.page-hero{ position:relative; padding-top:calc(var(--grid)*7); padding-bottom:calc(var(--grid)*3.5);
  background:var(--green-deep); color:var(--bg); overflow:hidden; border-radius:0 0 calc(var(--grid)*2) calc(var(--grid)*2); }
.page-hero__bg{ position:absolute; inset:0; z-index:0; opacity:.5; }
.page-hero__bg .ph::after{ display:none; } /* no dev label over hero */
.page-hero__bg .js-img{ transform:scale(1.05); }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 100% at 80% 10%, rgba(228,169,63,.18), transparent 46%),
    linear-gradient(180deg, rgba(47,74,51,.55), rgba(47,74,51,.86)); }
.page-hero__inner{ position:relative; z-index:2; }
.page-hero .c-title-sub__texts{ color:var(--bg); }
.page-hero .c-leaf{ color:var(--brand); }
.page-hero__title{ font-family:"Shippori Mincho B1",serif; font-weight:700; color:var(--bg);
  font-size:clamp(30px,4.6vw,64px); line-height:1.18; letter-spacing:.02em; }
.page-hero__lead{ max-width:40em; color:color-mix(in srgb,var(--bg) 86%,transparent); }
.breadcrumb{ display:flex; gap:.6em; align-items:center; font-family:"Montserrat",sans-serif; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--bg) 60%,transparent); }
.breadcrumb a:hover{ color:var(--bg); }

/* ---------- generic section head ---------- */
.sec-head{ max-width:52em; }
.sec-head__ttl{ font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--green-deep);
  font-size:clamp(23px,3vw,42px); line-height:1.4; letter-spacing:.02em; }
.prose{ max-width:44em; color:var(--ink-soft); }
.prose p+p{ margin-top:1.2em; }
.prose.-center{ margin-inline:auto; text-align:center; }

/* ---------- pull quote ---------- */
.pull-quote{ text-align:center; max-width:760px; margin-inline:auto; }
.pull-quote__q{ font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--green-deep);
  font-size:clamp(24px,3.4vw,44px); line-height:1.7; }
.section--green .pull-quote__q{ color:var(--bg); }

/* ---------- lead media (image + text) ---------- */
.media-row{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*3); align-items:center; }
.media-row.-rev .media-row__media{ order:2; }
.media-row__img{ aspect-ratio:4/3; border-radius:calc(var(--grid)*1); }
.media-row__img.-tall{ aspect-ratio:4/5; }

/* ---------- numbered significance list (why) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--grid)*1.4); }
.why-item{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*.8);
  padding:calc(var(--grid)*1.6) calc(var(--grid)*1.4); }
.why-item__no{ font-family:"Montserrat",sans-serif; font-weight:600; font-size:13px; letter-spacing:.14em; color:var(--green); }
.why-item__ttl{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep);
  font-size:clamp(17px,1.4vw,21px); margin:.6em 0 .5em; }
.why-item p{ color:var(--ink-soft); }

/* ---------- feature rows (alternating big) ---------- */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*3); align-items:center; }
.feature-row+.feature-row{ margin-top:calc(var(--grid)*4); }
.feature-row.-rev .feature-row__media{ order:2; }
.feature-row__media{ position:relative; }
.feature-row__img{ aspect-ratio:5/4; border-radius:calc(var(--grid)*1); }
.feature-row__no{ position:absolute; top:calc(var(--grid)*-1); left:calc(var(--grid)*-0.5); z-index:3;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:clamp(40px,5vw,84px); color:var(--green);
  -webkit-text-stroke:2px var(--white); text-stroke:2px var(--white); }
.feature-row__ey{ font-family:"Montserrat",sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; color:var(--green); text-transform:uppercase; }
.feature-row__ttl{ font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--green-deep);
  font-size:clamp(21px,2.4vw,34px); line-height:1.5; margin:.5em 0 .7em; }
.feature-row__body{ color:var(--ink-soft); }

/* ---------- teacher cards ---------- */
.teacher-list{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*2); }
.teacher-full{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*1.1); overflow:hidden; display:flex; flex-direction:column; }
.teacher-full__img{ aspect-ratio:4/3; }
.teacher-full__body{ padding:calc(var(--grid)*1.8) calc(var(--grid)*1.6); }
.teacher-full__role{ display:inline-block; font-family:"Montserrat",sans-serif; 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; }
.teacher-full__name{ font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--green-deep); font-size:clamp(20px,1.8vw,26px); margin:.7em 0 .5em; }
.teacher-full__body p{ color:var(--ink-soft); }

/* ---------- course detail + price ---------- */
.course-detail{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(var(--grid)*1.2); }
.course-full{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*.9); overflow:hidden; display:flex; flex-direction:column; }
.course-full__img{ aspect-ratio:16/10; }
.course-full__body{ padding:calc(var(--grid)*1.5); display:flex; flex-direction:column; gap:.6em; flex:1; }
.course-full__age{ align-self:flex-start; font-family:"Montserrat",sans-serif; 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-full__ttl{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep); font-size:clamp(19px,1.6vw,24px); }
.course-full p{ color:var(--ink-soft); flex:1; }
.course-full__price{ padding-top:.8em; border-top:1px dashed var(--line); font-family:"Montserrat",sans-serif; display:flex; align-items:baseline; gap:.3em; }
.course-full__price b{ font-size:clamp(24px,2.2vw,32px); font-weight:600; color:var(--green-deep); }
.course-full__price span{ font-size:12.5px; color:var(--ink-soft); font-family:"Noto Sans JP",sans-serif; }

.price-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:calc(var(--grid)*.8); overflow:hidden; border:1px solid var(--line); }
.price-table th,.price-table td{ padding:calc(var(--grid)*.9) calc(var(--grid)*1.2); text-align:left; border-bottom:1px solid var(--line); font-size:clamp(13.5px,.95vw,15px); }
.price-table th{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep); background:var(--bg-soft); width:42%; }
.price-table td{ color:var(--ink); font-family:"Montserrat","Noto Sans JP",sans-serif; }
.price-table tr:last-child th,.price-table tr:last-child td{ border-bottom:none; }
.price-note{ color:var(--ink-soft); }

/* ---------- lesson timeline ---------- */
.timeline{ max-width:44em; margin-inline:auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:22px; top:10px; bottom:10px; width:2px; background:var(--line); }
.tl-step{ position:relative; padding-left:calc(var(--grid)*3.2); padding-bottom:calc(var(--grid)*2); }
.tl-step:last-child{ padding-bottom:0; }
.tl-step__no{ position:absolute; left:0; top:0; width:46px; height:46px; border-radius:50%; background:var(--green); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:"Montserrat",sans-serif; font-weight:600; font-size:15px; z-index:2; }
.tl-step__ttl{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep); font-size:clamp(17px,1.5vw,22px); margin-bottom:.4em; }
.tl-step p{ color:var(--ink-soft); }

.chips{ display:flex; flex-wrap:wrap; gap:.7em; }
.chip{ display:inline-flex; align-items:center; gap:.5em; background:var(--white); border:1px solid var(--line);
  border-radius:100vw; padding:.7em 1.2em; color:var(--green-deep); font-size:clamp(13px,.95vw,15px); }
.chip .c-leaf{ width:13px; height:15px; color:var(--green); }

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--grid)*.7); }
.gallery__item{ aspect-ratio:1; border-radius:calc(var(--grid)*.6); }
.gallery__item:nth-child(1){ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }

/* ---------- voice ---------- */
.voice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--grid)*1.4); }
.v-card{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*.9);
  padding:calc(var(--grid)*1.8) calc(var(--grid)*1.6); display:flex; flex-direction:column; gap:1.1em; }
.v-card__stars{ display:flex; gap:3px; color:var(--sun); }
.v-card__stars svg{ width:15px; height:15px; fill:currentColor; }
.v-card__q{ font-family:"Shippori Mincho B1",serif; color:var(--ink); line-height:1.95; }
.v-card__who{ margin-top:auto; color:var(--green); font-size:12.5px; letter-spacing:.04em; }

/* ---------- FAQ accordion ---------- */
.faq-list{ max-width:52em; margin-inline:auto; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:calc(var(--grid)*.6); margin-bottom:calc(var(--grid)*.7); overflow:hidden; }
.faq-q{ display:flex; align-items:center; gap:1em; width:100%; text-align:left; padding:calc(var(--grid)*1.2) calc(var(--grid)*1.4);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep); font-size:clamp(15px,1.15vw,18px); }
.faq-q__mark{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--green-soft); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; margin-left:auto; transition:transform .4s var(--e-expo), background .3s; }
.faq-q__mark svg{ width:12px; height:8px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .4s var(--e-expo); }
.faq-item.is-open .faq-q__mark{ background:var(--green); color:var(--white); }
.faq-item.is-open .faq-q__mark svg{ transform:rotate(180deg); }
.faq-a{ height:0; overflow:hidden; transition:height .4s var(--e-out); }
.faq-a__inner{ padding:0 calc(var(--grid)*1.4) calc(var(--grid)*1.3); color:var(--ink-soft); line-height:1.9; }
.faq-q__lbl{ display:inline-flex; align-items:baseline; gap:.7em; }
.faq-q__lbl::before{ content:"Q"; font-family:"Montserrat",serif; font-weight:700; color:var(--green); font-size:1.1em; }

/* ---------- trial form ---------- */
.form-wrap{ max-width:44em; margin-inline:auto; background:var(--white); border:1px solid var(--line);
  border-radius:calc(var(--grid)*1.1); padding:calc(var(--grid)*2.2) calc(var(--grid)*2); }
.form-row{ margin-bottom:calc(var(--grid)*1.4); }
.form-row label{ display:block; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; color:var(--green-deep);
  font-size:14px; margin-bottom:.6em; }
.form-row label .req{ color:var(--sun); font-size:11px; margin-left:.5em; font-family:"Montserrat",sans-serif; letter-spacing:.1em; }
.form-row input,.form-row select,.form-row textarea{ width:100%; font:inherit; color:var(--ink);
  background:var(--bg-soft); border:1.5px solid var(--line); border-radius:calc(var(--grid)*.4);
  padding:calc(var(--grid)*.75) calc(var(--grid)*.9); transition:border-color .3s, background .3s; }
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{ outline:none; border-color:var(--green); background:var(--white); }
.form-row textarea{ min-height:110px; resize:vertical; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*1.2); }
.form-submit{ text-align:center; margin-top:calc(var(--grid)*1); }
.form-note{ text-align:center; color:var(--ink-soft); margin-top:calc(var(--grid)*1.2); }

/* ---------- access ---------- */
.info-table{ width:100%; border-collapse:collapse; }
.info-table th,.info-table td{ text-align:left; padding:calc(var(--grid)*.9) 0; border-bottom:1px solid var(--line); font-size:clamp(13.5px,.95vw,15px); vertical-align:top; }
.info-table th{ width:9em; color:var(--green); font-weight:500; letter-spacing:.04em; white-space:nowrap; }
.info-table td{ color:var(--ink); }
.map-box{ aspect-ratio:16/9; border-radius:calc(var(--grid)*1); }
.access-cols{ display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--grid)*3); align-items:start; }

/* ---------- reusable CTA band (bottom of sub-pages) ---------- */
.cta-band{ position:relative; background:var(--green-deep); color:var(--bg); border-radius:calc(var(--grid)*2);
  margin:calc(var(--grid)*2) calc(var(--grid)*.8) 0; overflow:hidden; }
.cta-band__inner{ position:relative; z-index:2; max-width:52em; margin-inline:auto; text-align:center;
  padding-block:calc(var(--grid)*4); }
.cta-band__ttl{ font-family:"Shippori Mincho B1",serif; font-weight:700; color:var(--bg); font-size:clamp(24px,3.4vw,44px); line-height:1.5; }
.cta-band__cta{ display:flex; gap:calc(var(--grid)*.6); justify-content:center; flex-wrap:wrap; }
.cta-band .c-btn--ghost{ --btn-fg:var(--bg); border-color:color-mix(in srgb,var(--bg) 45%,transparent); }
.cta-band .c-btn--ghost .c-btn__arrow{ background:color-mix(in srgb,var(--bg) 16%,transparent); }
.cta-band .c-btn--ghost .c-btn__arrow svg{ fill:var(--bg); }
.cta-band__note{ color:color-mix(in srgb,var(--bg) 62%,transparent); letter-spacing:.04em; }

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .media-row,.feature-row,.teacher-list,.access-cols{ grid-template-columns:1fr; gap:calc(var(--grid)*2); }
  .media-row.-rev .media-row__media,.feature-row.-rev .feature-row__media{ order:0; }
  .why-grid,.course-detail{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .page-hero{ padding-top:calc(var(--grid)*6); }
}
@media (max-width:680px){
  .why-grid,.course-detail,.voice-grid,.form-2{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gallery__item:nth-child(1){ grid-column:span 2; }
  .cta-band__cta .c-btn{ width:100%; justify-content:space-between; }
  .info-table th{ width:7em; }
}