/* =========================================================
   向学ゼミナール — 学習塾・スクール 制作サンプル
   明るく信頼感・活気 / 白 × 信頼の青 × 温かいオレンジ
   Font: Zen Kaku Gothic New
   ========================================================= */

:root{
  --blue:#1f5fa8;
  --blue-deep:#16487f;
  --blue-soft:#E8F0FA;
  --blue-soft2:#D6E5F5;
  --orange:#f08a24;
  --orange-deep:#d6730f;
  --orange-soft:#FDEEDB;
  --ink:#2a2a2a;
  --muted:#6f7782;
  --paper:#ffffff;
  --bg:#F6F9FD;
  --line:#E2E8F0;
  --shadow:0 22px 50px -22px rgba(31,95,168,.38);
  --shadow-sm:0 10px 26px -14px rgba(42,42,42,.28);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-weight:900;line-height:1.36;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,92vw);margin-inline:auto}
.eyebrow{font-size:.78rem;letter-spacing:.2em;color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:.55em}
.eyebrow::before{content:"";width:24px;height:3px;background:var(--orange);border-radius:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:1rem;
  padding:.92em 1.7em;border-radius:999px;transition:.22s;cursor:pointer;border:none;line-height:1.2}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 22px -10px rgba(240,138,36,.6)}
.btn-orange:hover{background:var(--orange-deep);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--blue);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);transform:translateY(-2px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.55em;font-weight:900;font-size:1.2rem;color:var(--blue-deep)}
.brand .mark{width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.15rem;font-weight:900;box-shadow:0 6px 14px -6px rgba(31,95,168,.6)}
.nav-links{display:flex;align-items:center;gap:1.5em}
.nav-links a{font-weight:500;font-size:.95rem;color:var(--ink);transition:.2s}
.nav-links a:hover{color:var(--blue)}
.nav-cta{margin-left:.3em;color:#fff}
.burger{display:none;background:none;border:none;font-size:1.6rem;color:var(--blue-deep);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,72vh,640px);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(22,72,127,.92) 0%,rgba(31,95,168,.78) 42%,rgba(31,95,168,.22) 78%,rgba(31,95,168,.05) 100%)}
.hero .wrap{position:relative;z-index:2;padding:64px 0}
.hero-copy{max-width:38rem;color:#fff}
.hero .eyebrow{color:#FFD9B0}
.hero .eyebrow::before{background:var(--orange)}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);margin:.45em 0 .5em;text-shadow:0 4px 24px rgba(16,42,72,.45)}
.hero h1 .hl{color:#fff;position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.28em;background:var(--orange);z-index:-1;border-radius:6px;opacity:.95}
.hero p.lead{font-size:1.08rem;color:#EAF1FA;max-width:32em;margin-bottom:1.9em}
.hero-cta{display:flex;gap:.9em;flex-wrap:wrap}
.hero-note{margin-top:1.4em;font-size:.85rem;color:#CFE0F2}

/* ---------- target chips ---------- */
.targets{background:var(--paper);border-bottom:1px solid var(--line);padding:24px 0}
.targets .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.targets .lbl{font-weight:900;color:var(--blue-deep);margin-right:.3em}
.chip{display:inline-flex;align-items:center;background:var(--blue-soft);color:var(--blue-deep);
  font-weight:700;font-size:.92rem;padding:.45em 1.1em;border-radius:999px}

/* ---------- section base ---------- */
section.block{padding:84px 0}
.sec-head{text-align:center;margin-bottom:48px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:.32em 0}
.sec-head p{color:var(--muted)}

/* ---------- reasons ---------- */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.reason-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 28px 32px;transition:.25s;overflow:hidden}
.reason-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--blue)}
.reason-card:nth-child(2)::before{background:var(--orange)}
.reason-card:nth-child(3)::before{background:var(--blue)}
.reason-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.reason-card .num{position:absolute;top:18px;right:24px;font-size:2.4rem;font-weight:900;color:var(--blue-soft2);line-height:1}
.reason-card:nth-child(2) .num{color:var(--orange-soft)}
.reason-card .ic{width:58px;height:58px;border-radius:16px;background:var(--blue-soft);color:var(--blue-deep);display:grid;place-items:center;font-size:1.6rem;margin-bottom:18px}
.reason-card:nth-child(2) .ic{background:var(--orange-soft);color:var(--orange-deep)}
.reason-card h3{font-size:1.22rem;margin-bottom:.5em;color:var(--blue-deep)}
.reason-card:nth-child(2) h3{color:var(--orange-deep)}
.reason-card p{font-size:.94rem;color:#56606c}

/* ---------- environment gallery ---------- */
.envir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.envir-grid figure{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.envir-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:.4s}
.envir-grid figure:hover img{transform:scale(1.05)}
.envir-grid figcaption{position:absolute;left:14px;bottom:14px;background:rgba(22,72,127,.88);color:#fff;
  font-weight:700;font-size:.85rem;padding:.4em 1em;border-radius:999px}

/* ---------- courses ---------- */
.course{background:var(--blue-soft)}
.course-table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);background:var(--paper)}
.course-table{width:100%;border-collapse:collapse;min-width:620px}
.course-table thead th{background:var(--blue);color:#fff;font-weight:700;padding:16px 18px;text-align:left;font-size:.95rem}
.course-table thead th:last-child{text-align:right}
.course-table tbody td{padding:18px;border-bottom:1px solid var(--line);font-size:.93rem;color:#4a535e;vertical-align:top}
.course-table tbody tr:last-child td{border-bottom:none}
.course-table tbody tr:nth-child(even){background:#FAFCFE}
.course-table .cn{font-weight:900;color:var(--blue-deep);white-space:nowrap}
.course-table .amt{font-weight:900;color:var(--orange-deep);text-align:right;white-space:nowrap;font-size:1.05rem}
.course-note{text-align:center;color:var(--muted);font-size:.84rem;margin-top:18px}

/* ---------- teacher ---------- */
.teacher .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}
.teacher h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:.32em 0 .6em;color:var(--blue-deep)}
.teacher p{color:#4a535e}
.teacher .quote{font-size:1.06rem;color:var(--blue-deep);border-left:5px solid var(--orange);padding-left:18px;margin:1.3em 0;font-weight:700;line-height:1.7}
.teacher .sign{font-weight:900;color:var(--blue-deep);margin-top:1em}
.teacher .sign small{display:block;font-weight:400;color:var(--muted);font-size:.84rem}
.teacher-img{position:relative}
.teacher-img img{border-radius:24px 24px 60px 24px;box-shadow:var(--shadow);aspect-ratio:1/1;object-fit:cover;width:100%}
.teacher-badge{position:absolute;bottom:-20px;left:-18px;background:#fff;border-radius:18px;padding:14px 20px;box-shadow:var(--shadow-sm);font-weight:700;color:var(--blue-deep);font-size:.9rem;line-height:1.5}
.teacher-badge b{color:var(--orange-deep);font-size:1.5rem;display:block}

/* ---------- voices ---------- */
.voice{background:var(--paper)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.voice-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;position:relative}
.voice-card::before{content:"\201C";position:absolute;top:6px;left:20px;font-size:3.6rem;color:var(--blue-soft2);font-family:Georgia,serif;line-height:1}
.voice-card p{position:relative;font-size:.93rem;color:#454e59;margin-bottom:1.2em}
.voice-card footer{border-top:1px solid var(--line);padding-top:14px}
.voice-card .who{display:block;font-weight:900;color:var(--blue-deep)}
.voice-card .result{display:inline-block;margin-top:.4em;background:var(--orange-soft);color:var(--orange-deep);font-weight:700;font-size:.8rem;padding:.3em .9em;border-radius:999px}

/* ---------- final CTA ---------- */
.final-section{padding:84px 0}
.final{background:linear-gradient(120deg,var(--blue-deep),var(--blue));color:#fff;text-align:center;border-radius:var(--r-lg);padding:62px 30px;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;background:radial-gradient(circle,rgba(240,138,36,.55),transparent 65%);border-radius:50%}
.final::after{content:"";position:absolute;width:320px;height:320px;left:-120px;bottom:-160px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);border-radius:50%}
.final-inner{position:relative;z-index:1}
.final h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.3em 0 .4em}
.final p{color:#DCE8F5;margin-bottom:1.7em}
.final .hero-cta{justify-content:center}
.final-tel{margin-top:1.5em;font-weight:700;color:#fff;font-size:1.05rem}

/* ---------- access ---------- */
.access .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.access-img img{border-radius:var(--r-lg);box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.access h2{font-size:clamp(1.5rem,3vw,2rem);margin:.3em 0 .4em;color:var(--blue-deep)}
.access dl{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;margin-top:1.3em}
.access dt{font-weight:900;color:var(--blue-deep)}
.access dd{color:#4a535e}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#c6ccd4;padding:46px 0 30px;font-size:.88rem}
.foot .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .brand-f{color:#fff;font-weight:900;font-size:1.1rem;margin-bottom:.4em}
.foot a{color:#c6ccd4}.foot a:hover{color:#fff}
.foot-nav{padding-top:.2em}
.foot .disc{margin-top:24px;padding-top:18px;border-top:1px solid #41464d;font-size:.78rem;color:#8b919a;line-height:1.7}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .nav-links{position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;gap:0;
    padding:8px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);display:none}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:.8em 7vw}
  .nav-cta{margin:.6em 7vw;width:auto}
  .burger{display:block}
  .teacher .wrap,.access .wrap{grid-template-columns:1fr;gap:40px}
  .reason-grid,.voice-grid{grid-template-columns:1fr}
  .envir-grid{grid-template-columns:1fr 1fr}
  .teacher-img{order:-1}
}
@media(max-width:520px){
  section.block{padding:62px 0}
  .envir-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
  .foot .wrap{flex-direction:column}
}