@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root{
  /* Color -------------------------------------------------------------- */
  --navy-900:#0F1C33;
  --navy-800:#16294A;
  --navy-700:#1B2F52;
  --navy-600:#28406F;
  --gold-500:#B08D57;
  --gold-400:#C6A876;
  --gold-100:#F1E7D5;
  --stamp-red:#A83A2E;
  --paper-50:#F7F5F0;
  --paper-100:#F1EEE6;
  --paper-white:#FFFFFF;
  --ink-900:#20242B;
  --ink-600:#565C66;
  --ink-400:#8A8F98;
  --line-300:#DAD5C8;
  --line-200:#E8E4DA;

  /* Type ----------------------------------------------------------------*/
  --font-display:'Shippori Mincho', serif;
  --font-body:'Noto Sans JP', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* Layout ----------------------------------------------------------------*/
  --max-w:1160px;
  --gutter:32px;
  --radius-sm:2px;
  --radius-md:3px;

  /* Motion ----------------------------------------------------------------*/
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-s:.25s;
  --dur-m:.55s;
  --dur-l:.9s;
}

@media (max-width:640px){
  :root{ --gutter:20px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-50);
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; color:var(--navy-900); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Eyebrow / Chapter label ( 第一章 のような "書類の章立て" モチーフ )
   ========================================================================== */
.chapter{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:18px;
}
.chapter__num{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--gold-500);
  border:1px solid var(--gold-400);
  padding:3px 9px;
}
.chapter__label{
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.32em;
  color:var(--navy-700);
}
.section-title{
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.55;
  margin-top:10px;
}
.section-lead{
  margin-top:16px;
  color:var(--ink-600);
  max-width:640px;
  font-size:15px;
}
.section-head{ margin-bottom:52px; }
.section-head.center{ text-align:center; }
.section-head.center .chapter{ justify-content:center; }
.section-head.center .section-lead{ margin-left:auto; margin-right:auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14.5px;
  letter-spacing:.06em;
  padding:16px 34px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--gold-500);
  color:var(--navy-900);
}
.btn-primary:hover{ background:var(--gold-400); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-navy{
  background:var(--navy-800);
  color:#fff;
}
.btn-navy:hover{ background:var(--navy-700); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  border-color:var(--navy-700);
  color:var(--navy-800);
}
.btn-ghost:hover{ background:var(--navy-800); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 22px; font-size:13px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-300);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:40px; height:40px;
  border:2px solid var(--navy-900);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px;
  color:var(--navy-900);
  position:relative;
}
.brand__mark::after{
  content:"";
  position:absolute; inset:4px;
  border:1px solid var(--gold-500);
}
.brand__text{ display:flex; flex-direction:column; line-height:1.25; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:.06em; color:var(--navy-900); }
.brand__sub{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-600); }

.nav{ display:flex; align-items:center; gap:34px; }
.nav__list{ display:flex; gap:30px; }
.nav__list a{
  position:relative;
  font-size:14px; font-weight:600; color:var(--navy-800);
  padding:6px 0;
}
.nav__list a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--gold-500);
  transition:right var(--dur-s) var(--ease);
}
.nav__list a:hover::after, .nav__list a.is-active::after{ right:0; }
.nav__list a.is-active{ color:var(--navy-900); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.header-tel{ display:flex; flex-direction:column; text-align:right; font-size:11px; color:var(--ink-600); }
.header-tel strong{ font-family:var(--font-mono); font-size:16px; color:var(--navy-900); letter-spacing:.02em; }

.nav-toggle{
  display:none;
  width:34px;height:34px;
  border:1px solid var(--navy-800);
  background:transparent;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:2px; background:var(--navy-900); position:relative;
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }

@media (max-width:900px){
  .header-tel{ display:none; }
  .nav{ position:fixed; inset:78px 0 0 0; background:var(--paper-50); flex-direction:column; align-items:flex-start; padding:30px var(--gutter); transform:translateX(100%); transition:transform var(--dur-m) var(--ease); overflow-y:auto; }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; gap:0; width:100%; }
  .nav__list a{ display:block; padding:16px 0; border-bottom:1px solid var(--line-300); width:100%; }
  .header-cta{ margin-top:24px; width:100%; }
  .header-cta .btn{ width:100%; }
  .nav-toggle{ display:flex; }
}

/* ==========================================================================
   Stamp / Seal — signature motif
   ========================================================================== */
.stamp{
  width:112px; height:112px;
  border:3px solid var(--stamp-red);
  color:var(--stamp-red);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-9deg);
  position:relative;
  font-family:var(--font-display);
  text-align:center;
  mix-blend-mode:multiply;
  opacity:.92;
}
.stamp::before{
  content:"";
  position:absolute; inset:8px;
  border:1px solid var(--stamp-red);
}
.stamp__text{ font-size:13px; font-weight:800; letter-spacing:.14em; line-height:1.5; }
.stamp--anim{
  animation: stampDown .7s var(--ease) .5s both;
}
@keyframes stampDown{
  0%{ opacity:0; transform:rotate(-9deg) scale(2.4); }
  55%{ opacity:1; }
  100%{ opacity:.92; transform:rotate(-9deg) scale(1); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:var(--navy-900);
  color:#fff;
  overflow:hidden;
}
.hero__ledger{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 64px);
  pointer-events:none;
}
.hero__wrap{
  position:relative;
  max-width:var(--max-w);
  margin:0 auto;
  padding:76px var(--gutter) 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:end;
}
.hero__copy{ padding-bottom:70px; }
.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.22em;
  color:var(--gold-400);
  display:flex; align-items:center; gap:12px;
  margin-bottom:26px;
}
.hero__eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold-400); }
.hero__title{
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.5;
  color:#fff;
  font-weight:800;
}
.hero__title em{
  font-style:normal;
  color:var(--gold-400);
  position:relative;
}
.hero__desc{
  margin-top:26px;
  max-width:460px;
  color:rgba(255,255,255,.78);
  font-size:15px;
}
.hero__actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.hero__stamp-slot{ position:absolute; top:64px; right:var(--gutter); }
.hero__figure{
  position:relative;
  align-self:end;
}
.hero__figure img{ width:100%; height:auto; }
.hero__figure-frame{
  position:relative;
  border:1px solid rgba(255,255,255,.25);
  padding:10px;
}
.hero__badge{
  position:absolute;
  left:-24px; bottom:32px;
  background:var(--paper-white);
  color:var(--navy-900);
  padding:16px 20px;
  border:1px solid var(--line-300);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  min-width:190px;
}
.hero__badge b{ display:block; font-family:var(--font-mono); font-size:24px; color:var(--stamp-red); }
.hero__badge span{ font-size:11.5px; color:var(--ink-600); letter-spacing:.02em; }

.hero-reveal > *{ opacity:0; transform:translateY(22px); animation:heroUp var(--dur-l) var(--ease) forwards; }
.hero-reveal > *:nth-child(1){ animation-delay:.05s; }
.hero-reveal > *:nth-child(2){ animation-delay:.18s; }
.hero-reveal > *:nth-child(3){ animation-delay:.3s; }
.hero-reveal > *:nth-child(4){ animation-delay:.42s; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

@media (max-width:900px){
  .hero__wrap{ grid-template-columns:1fr; padding-top:52px; }
  .hero__figure{ order:-1; }
  .hero__copy{ padding-bottom:40px; }
  .hero__stamp-slot{ display:none; }
  .hero__badge{ left:16px; }
}

/* Stat strip under hero */
.stat-strip{ background:var(--navy-800); border-top:1px solid rgba(255,255,255,.08); }
.stat-strip__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:var(--max-w);
  margin:0 auto;
}
.stat-strip__item{
  padding:26px var(--gutter);
  border-left:1px solid rgba(255,255,255,.1);
  text-align:left;
}
.stat-strip__item:first-child{ border-left:none; }
.stat-strip__num{ font-family:var(--font-mono); font-size:26px; color:var(--gold-400); }
.stat-strip__label{ font-size:11.5px; color:rgba(255,255,255,.65); letter-spacing:.03em; margin-top:6px; }
@media (max-width:760px){
  .stat-strip__grid{ grid-template-columns:repeat(2,1fr); }
  .stat-strip__item{ border-left:1px solid rgba(255,255,255,.1); }
  .stat-strip__item:nth-child(odd){ border-left:none; }
}

/* ==========================================================================
   Ticker / campaign strip
   ========================================================================== */
.ticker{
  background:var(--gold-100);
  border-bottom:1px solid var(--line-300);
  overflow:hidden;
}
.ticker__wrap{
  display:flex; align-items:center; gap:22px;
  padding:11px var(--gutter);
  max-width:var(--max-w); margin:0 auto;
  font-size:13px; color:var(--navy-800); font-weight:600;
}
.ticker__tag{
  background:var(--stamp-red); color:#fff; font-size:11px; letter-spacing:.06em;
  padding:4px 10px; flex:none;
}

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding:112px 0; }
.section--tight{ padding:88px 0; }
.section--paper{ background:var(--paper-50); }
.section--white{ background:var(--paper-white); border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200); }
.section--navy{ background:var(--navy-900); color:#fff; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ==========================================================================
   Concept / two-col
   ========================================================================== */
.concept{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; }
.concept--equal{ grid-template-columns:1fr 1fr; }
.concept__figure{ position:relative; }
.concept__figure img{ width:100%; border:1px solid var(--line-300); }
.concept__figure-tag{
  position:absolute; bottom:-18px; left:-18px;
  background:var(--navy-900); color:#fff;
  padding:14px 18px; font-size:12px; letter-spacing:.08em;
  border:1px solid var(--gold-500);
}
.concept__points{ margin-top:32px; display:flex; flex-direction:column; gap:22px; }
.concept__point{ display:flex; gap:18px; padding-top:22px; border-top:1px solid var(--line-300); }
.concept__point:first-child{ border-top:none; padding-top:0; }
.concept__point-num{ font-family:var(--font-mono); font-size:13px; color:var(--gold-500); flex:none; padding-top:3px; }
.concept__point h4{ font-size:16.5px; margin-bottom:6px; }
.concept__point p{ font-size:14px; color:var(--ink-600); }
@media (max-width:900px){
  .concept, .concept--equal{ grid-template-columns:1fr; gap:40px; }
}

/* ==========================================================================
   Cards — courses
   ========================================================================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.course-card{
  background:var(--paper-white);
  border:1px solid var(--line-300);
  display:flex; flex-direction:column;
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.course-card:hover{ transform:translateY(-6px); box-shadow:0 26px 46px rgba(15,28,51,.1); border-color:var(--gold-500); }
.course-card__figure{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.course-card__figure img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.course-card:hover .course-card__figure img{ transform:scale(1.06); }
.course-card__tag{
  position:absolute; top:14px; left:14px;
  background:var(--navy-900); color:var(--gold-400);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  padding:5px 10px;
}
.course-card__body{ padding:26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.course-card__title{ font-size:19px; }
.course-card__desc{ font-size:13.6px; color:var(--ink-600); flex:1; }
.course-card__meta{ display:flex; gap:14px; font-size:11.5px; color:var(--ink-400); font-family:var(--font-mono); border-top:1px solid var(--line-200); padding-top:14px; }
.course-card__link{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--navy-800); }
.course-card__link::after{ content:"→"; transition:transform var(--dur-s) var(--ease); }
.course-card:hover .course-card__link::after{ transform:translateX(5px); }

/* ==========================================================================
   Feature — alternating rows ( 左右交互レイアウト )
   ========================================================================== */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:64px 0; border-top:1px solid var(--line-300);
}
.feature-row:first-of-type{ border-top:none; padding-top:0; }
.feature-row:nth-of-type(even) .feature-row__figure{ order:2; }
.feature-row__figure img{ border:1px solid var(--line-300); width:100%; }
.feature-row__index{ font-family:var(--font-mono); font-size:44px; color:var(--gold-500); line-height:1; }
.feature-row__title{ font-size:22px; margin-top:14px; }
.feature-row__desc{ margin-top:16px; color:var(--ink-600); font-size:14.5px; max-width:440px; }
@media (max-width:900px){
  .feature-row{ grid-template-columns:1fr; gap:26px; padding:44px 0; }
  .feature-row:nth-of-type(even) .feature-row__figure{ order:0; }
}

/* ==========================================================================
   Steps ( 実際に順序のあるプロセス — ご入会までの流れ / 体験の流れ )
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.steps--three{ grid-template-columns:repeat(3,1fr); }
.step{ position:relative; padding:0 24px 0 0; border-right:1px solid var(--line-300); }
.step:last-child{ border-right:none; padding-right:0; }
.step__num{ font-family:var(--font-mono); font-size:34px; color:var(--navy-900); }
.step__num span{ color:var(--gold-500); }
.step__title{ font-size:16px; margin-top:14px; }
.step__desc{ margin-top:10px; font-size:13.4px; color:var(--ink-600); }
@media (max-width:900px){
  .steps, .steps--three{ grid-template-columns:1fr; gap:30px; }
  .step{ border-right:none; border-left:2px solid var(--gold-400); padding:0 0 0 22px; }
}

/* ==========================================================================
   Voice / testimonial
   ========================================================================== */
.voice-card{ background:var(--paper-white); border:1px solid var(--line-300); padding:28px; display:flex; gap:20px; }
.voice-card__avatar{ width:76px; height:76px; flex:none; overflow:hidden; border:1px solid var(--line-300); }
.voice-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.voice-card__name{ font-size:14.5px; font-weight:700; }
.voice-card__role{ font-size:11.5px; color:var(--ink-400); margin-top:2px; font-family:var(--font-mono); }
.voice-card__text{ margin-top:12px; font-size:13.6px; color:var(--ink-600); }

/* Staff */
.staff-card{ text-align:left; }
.staff-card__figure{ aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line-300); }
.staff-card__figure img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); }
.staff-card__name{ margin-top:16px; font-size:16px; }
.staff-card__role{ font-size:11.5px; color:var(--gold-500); font-family:var(--font-mono); letter-spacing:.04em; margin-top:4px; }
.staff-card__text{ font-size:13.2px; color:var(--ink-600); margin-top:10px; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.accordion{ border-top:1px solid var(--line-300); }
.accordion__item{ border-bottom:1px solid var(--line-300); }
.accordion__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:transparent; border:none; text-align:left;
  padding:24px 4px; font-size:15px; font-weight:600; color:var(--navy-900);
}
.accordion__q-mark{ font-family:var(--font-mono); color:var(--stamp-red); flex:none; }
.accordion__icon{ flex:none; width:20px; height:20px; position:relative; }
.accordion__icon::before,.accordion__icon::after{ content:""; position:absolute; background:var(--navy-800); transition:transform var(--dur-s) var(--ease); }
.accordion__icon::before{ width:100%; height:2px; top:9px; left:0; }
.accordion__icon::after{ width:2px; height:100%; top:0; left:9px; }
.accordion__item.is-open .accordion__icon::after{ transform:scaleY(0); }
.accordion__a{
  max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease);
}
.accordion__a-inner{ padding:0 4px 26px; font-size:13.8px; color:var(--ink-600); max-width:760px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--navy-900); color:#fff; position:relative; overflow:hidden;
}
.cta-band__wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; padding:64px 0; }
.cta-band__title{ color:#fff; font-size:clamp(22px,3vw,30px); }
.cta-band__desc{ color:rgba(255,255,255,.7); margin-top:10px; font-size:14px; }
.cta-band__actions{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:640px){
  .cta-band__wrap{ padding:52px 28px 56px; gap:30px; }
  .cta-band__copy{ width:100%; }
  .cta-band__actions{ width:100%; flex-direction:column; align-items:flex-start; gap:12px; }
  .cta-band__actions .btn{ width:min(100%,320px); padding:14px 20px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.75); }
.footer-top{ padding:76px 0 56px; display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr 1fr; gap:32px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand .brand__name{ color:#fff; }
.footer-brand .brand__sub{ color:rgba(255,255,255,.55); }
.footer-brand p{ margin-top:18px; font-size:12.8px; color:rgba(255,255,255,.55); max-width:230px; }
.footer-col h5{ font-family:var(--font-body); font-size:12.5px; letter-spacing:.1em; color:var(--gold-400); margin-bottom:18px; }
.footer-col li{ margin-bottom:11px; font-size:13px; }
.footer-col a:hover{ color:#fff; }
.footer-contact address{ font-style:normal; font-size:13px; line-height:1.9; }
.footer-contact .tel{ font-family:var(--font-mono); font-size:20px; color:#fff; margin-top:12px; display:block; }
.footer-bottom{ padding:24px 0; display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px; }
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; padding:56px 28px 44px; gap:44px; }
}

/* ==========================================================================
   Breadcrumb / page header (sub pages)
   ========================================================================== */
.page-header{
  position:relative;
  background:var(--navy-900);
  color:#fff;
  padding:64px 0 56px;
  overflow:hidden;
}
.page-header__wrap{ position:relative; }
.breadcrumb{ display:flex; gap:8px; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:20px; font-family:var(--font-mono); }
.breadcrumb a:hover{ color:#fff; }
.page-header__title{ color:#fff; font-size:clamp(28px,4vw,40px); }
.page-header__lead{ margin-top:14px; color:rgba(255,255,255,.7); max-width:520px; font-size:14.5px; }
.page-header__figure{
  position:absolute; right:0; top:0; bottom:0; width:38%;
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);
  opacity:.5;
}
.page-header__figure img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .page-header__figure{ display:none; } }

/* ==========================================================================
   Table (pricing)
   ========================================================================== */
.price-table{ width:100%; border-collapse:collapse; background:var(--paper-white); }
.price-table th,.price-table td{ border:1px solid var(--line-300); padding:18px 20px; text-align:left; font-size:13.6px; }
.price-table thead th{ background:var(--navy-900); color:#fff; font-family:var(--font-body); font-weight:600; letter-spacing:.03em; }
.price-table tbody tr:nth-child(odd){ background:var(--paper-50); }
.price-table td.num{ font-family:var(--font-mono); color:var(--navy-900); }
.table-scroll{ overflow-x:auto; }
@media (max-width:640px){
  .table-scroll{ overflow-x:visible; }
  .price-table{ min-width:0; table-layout:fixed; }
  .price-table th,.price-table td{ padding:9px 5px; font-size:10.5px; line-height:1.55; overflow-wrap:normal; }
  .price-table th:first-child{ width:34%; }
  .price-table td.num{ white-space:nowrap; font-size:10px; letter-spacing:-.02em; }
}

/* ==========================================================================
   Course detail cards (course.html)
   ========================================================================== */
.course-detail{
  display:grid; grid-template-columns:.86fr 1.14fr; gap:0;
  border:1px solid var(--line-300); background:var(--paper-white);
}
.course-detail__figure{ position:relative; overflow:hidden; }
.course-detail__figure img{ width:100%; height:100%; object-fit:cover; }
.course-detail__body{ padding:40px; }
.course-detail__label{ font-family:var(--font-mono); font-size:12px; color:var(--gold-500); letter-spacing:.1em; }
.course-detail__title{ font-size:24px; margin-top:10px; }
.course-detail__desc{ margin-top:14px; color:var(--ink-600); font-size:14.2px; }
.course-detail__list{ margin-top:22px; display:grid; gap:10px; }
.course-detail__list li{ font-size:13.6px; padding-left:20px; position:relative; color:var(--ink-900); }
.course-detail__list li::before{ content:"｜"; position:absolute; left:0; color:var(--gold-500); }
.course-detail__meta{ display:flex; gap:28px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-200); flex-wrap:wrap; }
.course-detail__meta div span{ display:block; font-size:11px; color:var(--ink-400); }
.course-detail__meta div b{ font-family:var(--font-mono); font-size:15px; color:var(--navy-900); font-weight:600; }
.course-detail__actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:820px){
  .course-detail{ grid-template-columns:1fr; }
  .course-detail__figure{ aspect-ratio:16/9; }
}

@media (max-width:640px){
  .section{ padding:64px 0; }
  .section--tight{ padding:52px 0; }
  .section-head{ margin-bottom:32px; }
  .course-detail__figure{ aspect-ratio:auto; }
  .course-detail__figure img{ height:auto; object-fit:contain; }
  .course-detail__body{ padding:24px 20px; }
}

/* Level diagnostic bar */
.level-bar{ display:flex; border:1px solid var(--line-300); }
.level-bar__item{ flex:1; padding:20px 18px; text-align:center; border-right:1px solid var(--line-300); background:var(--paper-white); }
.level-bar__item:last-child{ border-right:none; }
.level-bar__item.is-current{ background:var(--navy-900); color:#fff; }
.level-bar__num{ font-family:var(--font-mono); font-size:12px; color:var(--gold-500); }
.level-bar__item.is-current .level-bar__num{ color:var(--gold-400); }
.level-bar__label{ margin-top:6px; font-size:13px; font-weight:700; }
@media (max-width:760px){ .level-bar{ flex-direction:column; } .level-bar__item{ border-right:none; border-bottom:1px solid var(--line-300); } .level-bar__item:last-child{ border-bottom:none; } }

/* ==========================================================================
   Form (experience.html)
   ========================================================================== */
.form-panel{ background:var(--paper-white); border:1px solid var(--line-300); padding:48px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:22px; }
.form-row.full{ grid-template-columns:1fr; }
.field label{ display:flex; gap:8px; align-items:center; font-size:13.4px; font-weight:700; margin-bottom:9px; }
.field .req{ font-size:10.5px; background:var(--stamp-red); color:#fff; padding:2px 6px; letter-spacing:.04em; }
.field .opt{ font-size:10.5px; background:var(--line-200); color:var(--ink-600); padding:2px 6px; letter-spacing:.04em; }
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line-300);
  background:var(--paper-50);
  padding:13px 14px;
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-900);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-500); background:#fff; outline:none; }
.field textarea{ resize:vertical; min-height:110px; }
.radio-group{ display:flex; gap:14px; flex-wrap:wrap; }
.radio-group label{ display:flex; align-items:center; gap:8px; font-weight:400; font-size:13.6px; border:1px solid var(--line-300); padding:10px 16px; cursor:pointer; transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease); }
.radio-group input{ width:auto; accent-color:var(--gold-500); }
.radio-group label:has(input:checked){ border-color:var(--gold-500); background:var(--gold-100); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.6px; color:var(--ink-600); margin:26px 0; }
.consent input{ margin-top:3px; accent-color:var(--gold-500); }
.form-note{ font-size:11.8px; color:var(--ink-400); margin-top:14px; }
.form-success{
  display:none; text-align:center; padding:60px 20px; border:1px solid var(--line-300); background:var(--paper-white);
}
.form-success.is-visible{ display:block; }
.form-success__mark{ margin:0 auto 22px; }

@media (max-width:640px){
  .form-panel{ padding:28px 20px; }
  .form-row{ grid-template-columns:1fr; gap:18px; }
}

/* Benefit tiles */
.benefit{ background:var(--paper-white); border:1px solid var(--line-300); padding:30px; }
.benefit__num{ font-family:var(--font-mono); color:var(--gold-500); font-size:13px; }
.benefit__title{ font-size:16.5px; margin-top:12px; }
.benefit__desc{ font-size:13.4px; color:var(--ink-600); margin-top:10px; }

/* Utility */
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }