/* ============ 個別指導塾 まなびの森 demo ============ */
:root{
  --navy:#16305c; --navy-d:#0f2444; --blue:#2f6bd8; --blue-l:#eaf1fb;
  --orange:#ff7a1a; --orange-d:#f36400; --ink:#20293a; --ink2:#5a6579;
  --bg:#ffffff; --soft:#f4f7fc; --line:#e2e9f3;
  --sans:"Noto Sans JP",system-ui,sans-serif; --eng:"Montserrat",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1140px,90%);margin:0 auto}
.wrap--n{width:min(820px,90%)}
.eyebrow{font-family:var(--eng);font-weight:700;letter-spacing:.16em;color:var(--blue);font-size:.8rem;margin-bottom:12px}
.eyebrow--w{color:#bcd3f5}.eyebrow--o{color:var(--orange)}
.h2{font-size:clamp(1.65rem,4.4vw,2.7rem);font-weight:900;line-height:1.35;letter-spacing:.01em}
.lead{color:var(--ink2);font-size:clamp(.95rem,2vw,1.05rem);margin-top:14px;font-weight:500}
.u-mark{background-image:linear-gradient(90deg,var(--orange),#ffa64d);background-repeat:no-repeat;background-position:0 92%;background-size:100% .2em;padding:0 .05em;color:var(--navy);font-weight:900}
.u-mark--w{color:#fff;background-image:linear-gradient(90deg,#ffc07a,#ff8a3d);background-position:0 92%;background-size:100% .2em}
.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(36px,5vw,58px)}
.sec-head--w{color:#fff}.sec-head--w .lead{color:#cdd9ec}
.progress{position:fixed;top:0;left:0;height:4px;width:var(--sp,0);background:linear-gradient(90deg,var(--blue),var(--orange));z-index:300;transition:width .1s linear}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;padding:15px 30px;border-radius:12px;transition:.3s var(--ease);white-space:nowrap}
.btn i{font-style:normal;transition:.3s var(--ease)}.btn:hover i{transform:translateX(4px)}
.btn--pri{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;box-shadow:0 12px 24px -10px rgba(243,100,0,.6)}
.btn--pri:hover{transform:translateY(-3px);box-shadow:0 18px 30px -10px rgba(243,100,0,.65)}
.btn--sec{background:#fff;color:var(--navy);box-shadow:0 8px 20px -12px rgba(22,48,92,.5)}
.btn--sec:hover{transform:translateY(-3px)}
.btn--line-w{border:2px solid #fff;color:#fff;background:transparent}
.btn--line-w:hover{background:#fff;color:var(--navy)}
.btn--lg{font-size:1.08rem;padding:17px 36px}
.btn--full{width:100%;justify-content:center}

/* ============ HEADER ============ */
.hd{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,40px);transition:.35s var(--ease)}
.hd.shrink{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 6px 24px -14px rgba(22,48,92,.4);padding-top:10px;padding-bottom:10px}
.hd__logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.12rem;color:var(--navy)}
.hd.at-top .hd__logo{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.hd__mk{font-size:1.5rem}
.hd__logo b{display:flex;flex-direction:column;line-height:1.2}
.hd__logo small{font-weight:500;font-size:.66rem;opacity:.85}
.hd__nav{display:flex;align-items:center;gap:22px}
.hd__nav a{font-weight:700;font-size:.9rem;color:var(--navy);transition:.2s}
.hd.at-top .hd__nav a{color:#fff}
.hd__nav a:not(.hd__cta):hover{color:var(--orange)}
.hd.at-top .hd__nav a:not(.hd__cta):hover{color:#ffd9b8}
.hd__cta{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff!important;padding:10px 20px;border-radius:10px;box-shadow:0 8px 18px -8px rgba(243,100,0,.6);text-shadow:none!important}
.hd__cta:hover{transform:translateY(-2px)}
.hd__burger{display:none;flex-direction:column;gap:5px;background:var(--navy);border:0;width:46px;height:46px;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.hd__burger span{width:22px;height:3px;border-radius:3px;background:#fff;transition:.3s}
.hd__burger.on span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd__burger.on span:nth-child(2){opacity:0}
.hd__burger.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__img{position:absolute;inset:0;background-size:cover;background-position:center right}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,36,68,.9) 0%,rgba(15,36,68,.72) 34%,rgba(15,36,68,.15) 62%,transparent 80%)}
.hero__inner{position:relative;z-index:3;color:#fff;width:min(1140px,90%);margin:0 auto;padding-top:80px}
.hero__badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero__badges span{background:rgba(15,36,68,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);padding:9px 17px;border-radius:100px;font-size:.86rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.hero__badges b{color:#ffd76a}
.hero__title{font-size:clamp(2.4rem,7vw,4.4rem);font-weight:900;line-height:1.18;letter-spacing:.01em;text-shadow:0 3px 20px rgba(0,0,0,.25)}
.hero__title .u-mark{color:#fff;background-image:linear-gradient(90deg,#ff9d3d,var(--orange));background-position:0 90%;background-size:100% .18em}
.hero__sub{margin:22px 0 0;font-size:clamp(1rem,2.3vw,1.2rem);font-weight:500;max-width:520px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero__mini{margin-top:18px;font-size:.86rem;font-weight:700;color:#dbe6f7}
/* reveal hero */
.hero__inner>*{opacity:0;transform:translateY(24px);animation:heroUp .9s var(--ease) forwards}
.hero__badges{animation-delay:.1s}.hero__title{animation-delay:.24s}.hero__sub{animation-delay:.4s}.hero__cta{animation-delay:.54s}.hero__mini{animation-delay:.66s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* ============ 悩み ============ */
.pain{background:var(--navy);padding:clamp(40px,6vw,64px) 0}
.pain__in{text-align:center}
.pain__lead{color:#fff;font-size:clamp(1.05rem,2.6vw,1.4rem);font-weight:700;margin-bottom:22px}
.pain__lead b{color:#ffd76a}
.pain__list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pain__list li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;padding:10px 20px;border-radius:100px;font-weight:700;font-size:.92rem;position:relative}
.pain__list li::before{content:"「";opacity:.5}.pain__list li::after{content:"」";opacity:.5}

/* ============ 選ばれる理由 ============ */
.reason{padding:clamp(70px,10vw,120px) 0;background:var(--soft)}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rcard{background:#fff;border-radius:20px;padding:28px 22px;box-shadow:0 18px 40px -30px rgba(22,48,92,.6);transition:.35s var(--ease);border:2px solid transparent}
.rcard:hover{transform:translateY(-7px);border-color:var(--blue-l)}
.rcard__ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#eaf1fb,#d7e6ff);display:grid;place-items:center;margin-bottom:14px;color:var(--blue);box-shadow:0 8px 18px -10px rgba(47,107,216,.5)}
.rcard__ic svg{width:30px;height:30px}
.rcard h3{font-size:1.08rem;font-weight:900;color:var(--navy);margin-bottom:8px;line-height:1.4}
.rcard p{color:var(--ink2);font-size:.9rem;line-height:1.8}

/* ============ コース・料金 ============ */
.course{padding:clamp(70px,10vw,120px) 0}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.ccard{background:#fff;border:2px solid var(--line);border-radius:22px;padding:32px 26px;position:relative;transition:.35s var(--ease)}
.ccard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(22,48,92,.5)}
.ccard--pop{border-color:var(--orange);box-shadow:0 24px 50px -28px rgba(243,100,0,.4)}
.ccard__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-weight:800;font-size:.78rem;padding:6px 18px;border-radius:100px;white-space:nowrap;box-shadow:0 8px 16px -6px rgba(243,100,0,.6)}
.ccard__tag{display:inline-block;background:var(--blue-l);color:var(--blue);font-weight:800;font-size:.8rem;padding:5px 14px;border-radius:8px}
.ccard h3{font-size:1.16rem;font-weight:900;color:var(--navy);margin:12px 0 6px;line-height:1.4}
.ccard__p{font-family:var(--eng);font-weight:800;font-size:2rem;color:var(--orange-d);line-height:1.1;margin-bottom:12px}
.ccard__p span{font-family:var(--sans);font-size:.82rem;color:var(--ink2);font-weight:700}
.ccard ul{list-style:none;border-top:1px dashed var(--line);padding-top:14px}
.ccard li{padding:6px 0 6px 26px;position:relative;font-size:.92rem;font-weight:500}
.ccard li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}
.course__note{text-align:center;margin-top:26px;color:var(--ink2);font-size:.92rem}
.course__note b{color:var(--orange-d);font-weight:800}.course__note s{color:#aab4c4}

/* ============ 合格実績 ============ */
.result{padding:clamp(70px,10vw,120px) 0;background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#fff}
.result__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,60px);align-items:center}
.result__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.rn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px;text-align:center}
.rn b{font-family:var(--eng);font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1;color:#ffd76a;display:block}
.rn small{font-size:.84rem;font-weight:700;opacity:.9;margin-top:8px;display:block}
.result__logos .eyebrow{color:#bcd3f5}
.result__logos ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.result__logos li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:10px;font-weight:700;font-size:.9rem}

/* ============ 講師 ============ */
.teacher{padding:clamp(70px,10vw,120px) 0}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:880px;margin:0 auto}
.tcard{display:flex;gap:20px;background:var(--soft);border-radius:22px;padding:22px;align-items:center;transition:.35s var(--ease)}
.tcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -30px rgba(22,48,92,.5)}
.tcard__ph{width:120px;height:120px;flex:none;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 10px 22px -12px rgba(22,48,92,.5)}
.tcard__ph img{width:100%;height:100%;object-fit:cover}
.tcard__b b{font-size:1.05rem;font-weight:900;color:var(--navy);display:block}
.tcard__b span{color:var(--blue);font-weight:700;font-size:.82rem}
.tcard__b p{color:var(--ink2);font-size:.9rem;margin-top:8px;line-height:1.75}

/* ============ 声 ============ */
.voice{padding:clamp(70px,10vw,120px) 0;background:linear-gradient(135deg,var(--blue),#2456b8);color:#fff}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vcard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:28px 24px;backdrop-filter:blur(4px)}
.vcard p{font-weight:500;line-height:1.9}
.vcard p::before{content:"“";font-family:var(--eng);font-size:2.4rem;color:#ffd76a;line-height:0;vertical-align:-.35em;margin-right:.1em}
.vcard cite{display:block;margin-top:14px;font-style:normal;font-weight:800;font-size:.86rem;color:#ffd9b8}

/* ============ 流れ ============ */
.flow{padding:clamp(70px,10vw,120px) 0;background:var(--soft)}
.flow__steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.flow__steps li{background:#fff;border-radius:18px;padding:28px 22px;position:relative;box-shadow:0 18px 40px -30px rgba(22,48,92,.6)}
.flow__no{font-family:var(--eng);font-weight:800;font-size:2rem;color:var(--blue-l);display:block;line-height:1}
.flow__steps b{display:block;color:var(--navy);font-weight:900;font-size:1.05rem;margin:6px 0 6px}
.flow__steps p{color:var(--ink2);font-size:.88rem;line-height:1.75}
.flow__steps li:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--blue);font-weight:900;font-size:1.2rem;z-index:2}

/* ============ コラム ============ */
.column{padding:clamp(70px,10vw,120px) 0}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col{display:block;background:#fff;border:2px solid var(--line);border-radius:18px;padding:26px 24px;transition:.35s var(--ease)}
.col:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 22px 44px -30px rgba(22,48,92,.5)}
.col__cat{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:.74rem;padding:4px 12px;border-radius:8px;margin-bottom:12px}
.col h3{font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.55}
.col__more{display:inline-block;margin-top:14px;color:var(--orange-d);font-weight:800;font-size:.86rem}

/* ============ 開業者PR ============ */
.biz{padding:clamp(74px,11vw,130px) 0;background:radial-gradient(120% 80% at 100% 0%,rgba(255,122,26,.1),transparent 55%),var(--navy);color:#fff}
.biz__head{max-width:820px;margin-bottom:clamp(34px,5vw,54px)}
.biz__head .lead{color:#cdd9ec}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 22px;transition:.35s var(--ease)}
.bcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(255,193,120,.5)}
.bcard__ic{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,193,120,.4);display:grid;place-items:center;margin-bottom:12px;color:#ffe1c4}
.bcard__ic svg{width:30px;height:30px}
.bcard h3{font-size:1.02rem;font-weight:900;margin-bottom:8px;color:#ffe1c4;line-height:1.45}
.bcard p{color:#c7d3e6;font-size:.88rem;line-height:1.8}
.biz__cta{text-align:center;margin-top:clamp(34px,5vw,52px)}
.biz__note{color:#9fb1cc;font-size:.82rem;margin-top:16px}

/* ============ FAQ ============ */
.faq{padding:clamp(70px,10vw,120px) 0;background:var(--soft)}
.faq__item{background:#fff;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 12px 30px -26px rgba(22,48,92,.6)}
.faq__q{width:100%;text-align:left;background:none;border:0;padding:20px 56px 20px 24px;font-weight:800;font-size:1rem;color:var(--navy);cursor:pointer;position:relative;line-height:1.6;font-family:inherit}
.faq__q i{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:16px;height:16px}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:var(--orange);border-radius:2px;transition:.3s var(--ease)}
.faq__q i::before{top:7px;left:0;width:16px;height:3px}
.faq__q i::after{top:0;left:7px;width:3px;height:16px}
.faq__item.open .faq__q i::after{transform:rotate(90deg);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{padding:0 24px 22px;color:var(--ink2);font-size:.94rem;line-height:1.85}

/* ============ ACCESS ============ */
.access{padding:clamp(70px,10vw,120px) 0}
.access__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,56px);align-items:center}
.info{list-style:none;margin-top:22px}
.info li{display:flex;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line)}
.info li b{min-width:96px;flex:none;font-weight:800;color:var(--blue)}
.info li span{font-weight:500}
.access__ph{border-radius:22px;overflow:hidden;box-shadow:0 26px 50px -34px rgba(22,48,92,.6);aspect-ratio:16/11}
.access__ph img{width:100%;height:100%;object-fit:cover}

/* ============ TRIAL ============ */
.trial{position:relative;padding:clamp(80px,12vw,140px) 0;background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;overflow:hidden}
.trial__succ{position:absolute;right:0;bottom:0;width:min(38%,420px);opacity:.16;mix-blend-mode:luminosity}
.trial__in{position:relative;z-index:2;max-width:620px;text-align:center;margin:0 auto}
.trial__in .eyebrow--o{color:#fff2e2}
.trial__h{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:900;line-height:1.3}
.trial__p{margin:16px 0 30px;font-weight:500;font-size:1.05rem}
.trial__form{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:22px;backdrop-filter:blur(6px)}
.trial__form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.trial__form input,.trial__form select{width:100%;padding:14px 16px;border:0;border-radius:12px;font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
.trial__or{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:#fff}
.trial__or::before,.trial__or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.4)}
.trial__or span{font-weight:700;font-size:.86rem}
.trial__mini{margin-top:22px;font-size:.78rem;color:#fff2e2cc}

/* ============ FOOTER ============ */
.ft{background:var(--navy-d);color:#fff;padding:52px 0 26px}
.ft__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.ft__brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ft__brand b{font-size:1.1rem;font-weight:900}
.ft__brand p{width:100%;color:#ffffffaa;font-size:.84rem;padding-left:34px}
.ft__nav{display:flex;gap:20px;flex-wrap:wrap}
.ft__nav a{color:#ffffffcc;font-weight:700;font-size:.9rem;transition:.2s}
.ft__nav a:hover{color:#ffd76a}
.ft__copy{text-align:center;color:#ffffff66;font-size:.78rem;margin-top:32px}

/* ============ reveal ============ */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-38px)}[data-reveal="right"]{transform:translateX(38px)}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .bgrid{grid-template-columns:repeat(2,1fr)}
  .flow__steps{grid-template-columns:repeat(2,1fr)}
  .flow__steps li:nth-child(2)::after{display:none}
}
@media (max-width:860px){
  .hd__nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;flex-direction:column;justify-content:center;gap:24px;transform:translateX(100%);transition:.4s var(--ease);box-shadow:-20px 0 50px -20px rgba(22,48,92,.4);z-index:150}
  .hd__nav.open{transform:none}
  .hd__nav a,.hd.at-top .hd__nav a{color:var(--navy);font-size:1.1rem}
  .hd__burger{display:flex;z-index:160}
  .ccards{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .result__grid{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .vgrid{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .access__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rgrid{grid-template-columns:1fr 1fr;gap:12px}
  .bgrid{grid-template-columns:1fr}
  .flow__steps{grid-template-columns:1fr}
  .flow__steps li::after{display:none!important}
  .trial__form .row{grid-template-columns:1fr}
  .pain__list li{font-size:.84rem}
  .ft__in{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:opacity .3s ease!important;scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .hero__inner>*{opacity:1;transform:none}
}