/* 湘南ドローンアカデミー 基本デザイン（色・文字・余白・部品） */
/* Webfonts — 和文 Zen Kaku Gothic New / 欧文 Archivo（可変幅） */
:root{
  --f-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; /* @kind font */
  --f-en: "Archivo", "Helvetica Neue", Arial, sans-serif; /* @kind font */
}

/* ---- colors ---- */
/* ============================================================
   Color — 色の定義はここだけ。コンポーネントで個別の数値を書かない。
   ============================================================ */
:root{
  /* ---- Source（起点3色。面・グラデーション専用。文字には使わない） ---- */
  --c-mint:      #7EC8BE;  /* ミント  白地1.9:1 */
  --c-teal:      #36ADB9;  /* ティール 白地2.7:1 */
  --c-azure:     #1DA1D4;  /* アジュール 白地3.0:1 */

  /* ---- Brand（起点3色から導いた実用色） ---- */
  --c-deep:      #063341;  /* ディープ  ヘッダー/フッター面。白文字14.2:1 */
  --c-marine:    #0A6E93;  /* マリン    主色。白文字5.7:1 */
  --c-marine-mid:#0F7C9A;  /* マリン中間 文字が乗る面の明端上限。白文字4.8:1 */
  --c-cyan:      #0B7382;  /* シアン    リンク/操作要素。白地5.5:1 */
  --c-cyan-vivid:#1DA1D4;  /* 罫/図版/アイコン。文字不可 */
  --c-aqua:      #A5DEE4;  /* アクア    ディープ面上の補助文字 9.6:1 */
  --c-foam:      #7EC8BE;  /* フォーム  ディープ面上の罫・装飾 7.4:1 */
  --c-mist:      #E2F2F3;  /* ミスト    淡い面 */
  --c-surface:   #F3FAFA;  /* サーフェス 背景 */
  --c-white:     #FFFFFF;

  /* ---- Accent（CTA専用。文字は必ずディープ） ---- */
  --c-sun:       #F2A93B;
  --c-sun-dark:  #D8912A;
  --c-sun-tint:  #FEF4E4;

  /* ---- Text / Line ---- */
  --c-ink:       #10232A;  /* 本文 */
  --c-ink-sub:   #3D5762;  /* 説明文 */
  --c-ink-mute:  #5E757F;  /* 注記（13px以上のみ） */
  --c-line:      #CFE5E7;
  --c-line-bold: #A9CBD0;

  /* ---- Semantic ---- */
  --c-success:   #0F7A6B;
  --c-caution:   #B26417;
  --c-error:     #B3261E;
  --c-error-tint:#FCEDEC;

  /* ---- Gradient（面と線のみ。文字用は --g-en のみ） ---- */
  --g-deep:   linear-gradient(155deg, #042630 0%, #0A5570 52%, #0F7C9A 100%); /* @kind color */
  --g-marine: linear-gradient(135deg, #05384B 0%, #0A6E93 55%, #0F7C9A 100%); /* @kind color */
  --g-hero:   linear-gradient(100deg, #2C7F76 0%, #137782 45%, #0B7098 100%); /* @kind color */
  --g-brand:  linear-gradient(90deg,  #7EC8BE 0%, #36ADB9 50%, #1DA1D4 100%); /* @kind color */
  --g-vivid:  linear-gradient(135deg, #7EC8BE 0%, #36ADB9 48%, #1DA1D4 100%); /* @kind color */
  --g-mist:   linear-gradient(180deg, #FFFFFF 0%, #DFF1F2 100%); /* @kind color */
  --g-sun:    linear-gradient(135deg, #F8C066 0%, #F2A93B 50%, #DE8A1E 100%); /* @kind color */
  --g-rule:   linear-gradient(90deg, #1DA1D4 0%, #36ADB9 40%, #7EC8BE 75%, rgba(126,200,190,0) 100%); /* @kind color */
  --g-en:     linear-gradient(100deg, #36ADB9 0%, #1DA1D4 100%); /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-body: var(--c-ink);
  --text-sub: var(--c-ink-sub);
  --text-note: var(--c-ink-mute);
  --text-link: var(--c-cyan);
  --text-heading: var(--c-deep);
  --text-ondeep: var(--c-white);
  --text-ondeep-sub: var(--c-aqua);
  --surface-page: var(--c-white);
  --surface-section: var(--c-surface);
  --surface-tint: var(--c-mist);
  --surface-card: var(--c-white);
  --surface-deep: var(--c-deep);
  --border-default: var(--c-line);
  --border-strong: var(--c-line-bold);
  --focus-ring: var(--c-sun); /* @kind color */
}

/* ---- typography ---- */
/* ============================================================
   Typography — 和文は読ませる、欧文は見せる。情報は常に和文が持つ。
   和文にディスプレイサイズ（40px超）は設けない。
   ============================================================ */
:root{
  --fs-h1:      2.25rem;   /* 36px  SP 26px */
  --fs-h2:      1.75rem;   /* 28px  SP 22px */
  --fs-h3:      1.3125rem; /* 21px */
  --fs-lead:    1.1875rem; /* 19px */
  --fs-body:    1.0625rem; /* 17px  最小本文 */
  --fs-small:   0.9375rem; /* 15px */
  --fs-caption: 0.8125rem; /* 13px  下限 */

  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 900; /* @kind other */

  --lh-head: 1.45; /* @kind other */
  --lh-body: 1.9; /* @kind other */
  --ls-body: 0.02em; /* @kind other */
  --ls-head: 0.01em; /* @kind other */

  /* 欧文ディスプレイの可変幅 */
  --wdth-xl: 78; /* @kind other */
  --wdth-lg: 82; /* @kind other */
  --wdth-md: 90; /* @kind other */
  --wdth-sm: 100; /* @kind other */
  --wdth-cond: 75; /* @kind other */

  /* semantic */
  --text-size-body: var(--fs-body);
  --text-size-note: var(--fs-caption);
  --measure-body: 38em; /* @kind other */
}

/* ---- spacing ---- */
/* ============================================================
   Spacing / Radius / Layout — 4pxの倍数のみ
   ============================================================ */
:root{
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10:128px;

  --r-sm: 3px;   /* バッジ */
  --r-md: 6px;   /* ボタン・入力欄・カード。基本はこれ */
  --r-lg: 12px;  /* 大きな帯 */
  --r-full: 999px;

  --container: 1180px; /* @kind spacing */
  --gutter: 20px; /* @kind spacing */
  --tap-min: 44px; /* @kind spacing */
}

/* ---- effects ---- */
/* ============================================================
   Elevation / Motion — 影は2段階のみ。区別は影ではなく1pxの罫線で。
   ============================================================ */
:root{
  --e-1: 0 1px 2px rgba(6,51,65,.08), 0 0 0 1px rgba(6,51,65,.06);
  --e-2: 0 6px 20px rgba(6,51,65,.14);

  --dur-fast: 120ms;  /* @kind other */ /* 色の変化 */
  --dur-base: 200ms;  /* @kind other */ /* 開閉 */
  --ease: cubic-bezier(.2,0,.2,1); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- base ---- */
/* Base / reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-jp);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--c-ink);
  background:var(--c-white);
  font-feature-settings:"palt" 1;
}
img{ max-width:100%; display:block; }
a{ color:var(--c-cyan); text-underline-offset:.2em; }
a:hover{ color:var(--c-marine); }
:focus-visible{ outline:3px solid var(--c-sun); outline-offset:2px; border-radius:2px; }
h1,h2,h3,h4{ line-height:var(--lh-head); letter-spacing:var(--ls-head); margin:0; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; }
code{ font-family:var(--f-en); font-size:.9em; background:var(--c-mist); padding:.1em .4em; border-radius:var(--r-sm); color:var(--c-marine); letter-spacing:0; }

/* ---- utilities ---- */
/* ============================================================
   TYPE : 欧文ディスプレイ（このサイトの signature）
   装飾目的の欧文には aria-hidden="true" を付け、見出しタグにしない。
   ============================================================ */
.en{
  font-family:var(--f-en);
  font-variation-settings:"wdth" 88;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:.92;
  text-transform:uppercase;
  font-feature-settings:normal;
}
.en--xl{ font-size:clamp(3rem,11vw,7.5rem); font-weight:800; font-variation-settings:"wdth" 78; }
.en--lg{ font-size:clamp(2.25rem,7vw,4.5rem); font-variation-settings:"wdth" 82; }
.en--md{ font-size:clamp(1.5rem,4vw,2.25rem); letter-spacing:.01em; font-variation-settings:"wdth" 90; }
.en--sm{ font-size:1rem; letter-spacing:.14em; font-weight:600; font-variation-settings:"wdth" 100; line-height:1.3; }
.en--cond{ font-variation-settings:"wdth" 75; letter-spacing:.005em; }
.en--outline{ color:transparent; -webkit-text-stroke:2px var(--c-foam); paint-order:stroke fill; }
.en--grad{ background:var(--g-en); -webkit-background-clip:text; background-clip:text; color:transparent; }

.u-num{ font-family:var(--f-en); font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; }
.u-h1{ font-size:clamp(1.625rem,4vw,var(--fs-h1)); font-weight:900; color:var(--c-deep); }
.u-h2{ font-size:clamp(1.375rem,3vw,var(--fs-h2)); font-weight:900; color:var(--c-deep); }
.u-h3{ font-size:var(--fs-h3); font-weight:700; color:var(--c-marine); }
.u-lead{ font-size:var(--fs-lead); line-height:1.85; color:var(--c-ink-sub); max-width:34em; }
.u-grad-deep{ background:var(--g-deep); }
.u-grad-marine{ background:var(--g-marine); }
.u-grad-brand{ background:var(--g-brand); }
.u-grad-vivid{ background:var(--g-vivid); }
.u-grad-mist{ background:var(--g-mist); }
.u-rule{ height:3px; border:0; background:var(--g-rule); border-radius:2px; }
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- layout ---- */
/* ============================================================
   Layout — ページ骨格のみ。色は colors.css の変数を参照する。
   ============================================================ */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
@media (min-width:900px){ .container{ padding:0 var(--s-7); } }

.section{ padding:var(--s-8) 0; }
@media (min-width:900px){ .section{ padding:var(--s-9) 0; } }
.section--tint{ background:var(--g-mist); }
.section--deep{ background:var(--c-deep); background-image:var(--g-deep); color:var(--c-white); }

.section__head{ margin-bottom:var(--s-6); }
.section__en{
  display:block; background:var(--g-en);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:var(--s-2);
}
.section__lead{ margin-top:var(--s-4); color:var(--c-ink-sub); max-width:38em; }
.section--deep .section__lead{ color:var(--c-white); }

.rule{ height:3px; border:0; border-radius:2px; background:var(--g-rule); margin:var(--s-5) 0; }

.grid-3{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
.grid-2{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:640px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
}

.stack > * + *{ margin-top:var(--s-4); }
.stack-lg > * + *{ margin-top:var(--s-6); }
.measure{ max-width:38em; }
.center{ text-align:center; }

/* ---- components ---- */
/* ============================================================
   湘南ドローンアカデミー Design System — Components
   tokens.css の変数のみを参照する。新しい色・数値を足さない。
   ============================================================ */

/* ============================================================
   COMPONENTS（実装用。この層をそのまま制作会社へ渡す）
   ============================================================ */

/* ---- Button ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:52px; padding:0 var(--s-6);
  font-family:var(--f-jp); font-size:var(--fs-body); font-weight:700; letter-spacing:.04em;
  border-radius:var(--r-md); border:2px solid transparent; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.btn--primary{ background-color:var(--c-sun); background-image:var(--g-sun); color:var(--c-deep); border-color:var(--c-sun-dark); }
.btn--primary:hover{ background-color:var(--c-sun-dark); background-image:none; border-color:var(--c-sun-dark); color:var(--c-deep); }
.btn--secondary{ background:var(--c-marine); color:var(--c-white); border-color:var(--c-marine); }
.btn--secondary:hover{ background:var(--c-deep); border-color:var(--c-deep); color:var(--c-white); }
.btn--outline{ background:transparent; color:var(--c-marine); border-color:var(--c-line-bold); }
.btn--outline:hover{ background:var(--c-mist); border-color:var(--c-marine); color:var(--c-marine); }
.btn--ondeep{ background:transparent; color:var(--c-white); border-color:rgba(255,255,255,.55); }
.btn--ondeep:hover{ background:rgba(255,255,255,.12); color:var(--c-white); border-color:var(--c-white); }
.btn--sm{ min-height:40px; padding:0 var(--s-4); font-size:var(--fs-small); }
.btn--lg{ min-height:60px; padding:0 var(--s-7); font-size:var(--fs-lead); }
.btn--block{ display:flex; width:100%; }
.btn[aria-disabled="true"],.btn:disabled{ background:var(--c-line); border-color:var(--c-line); color:#8496A0; cursor:not-allowed; }
.btn__sub{ font-size:var(--fs-caption); font-weight:500; opacity:.85; letter-spacing:.02em; }

/* ---- Logo ---- */
.en--cond{ font-variation-settings:"wdth" 75; letter-spacing:.005em; }

.logo-ph{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px dashed var(--c-line-bold); border-radius:var(--r-sm);
  font-family:var(--f-en); font-size:.75rem; font-weight:600; letter-spacing:.16em;
  color:var(--c-ink-mute); background:rgba(255,255,255,.55);
}
.logo-ph--h{ width:210px; height:48px; }
.logo-ph--sq{ width:120px; height:120px; }
.logo-ph--mark{ width:100%; aspect-ratio:1; font-size:.625rem; letter-spacing:.1em; }
.logo-tile{ width:180px; }

.logo{ display:inline-flex; align-items:center; gap:var(--s-3); text-decoration:none; color:var(--c-marine); }
.logo__img{ height:64px; width:auto; flex:none; }
.logo--compact .logo__img{ height:40px; }
.logo__jp{ display:block; font-size:.8125rem; font-weight:700; letter-spacing:.08em; color:var(--c-ink-sub); line-height:1.5; }
.logo--ondeep{ color:var(--c-white); }
.logo--ondeep .logo__jp{ color:var(--c-aqua); }
.logo--ondeep .logo-ph{ border-color:rgba(255,255,255,.45); color:var(--c-aqua); background:rgba(255,255,255,.06); }
.doc-nav .logo-ph{ border-color:rgba(255,255,255,.4); color:var(--c-foam); background:transparent; }

/* ---- Global header ---- */
.gnav{ background:var(--c-white); border-bottom:1px solid var(--c-line); }
.gnav__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--s-5); }
.gnav__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-4) 0; }
.gnav__actions{ display:flex; align-items:center; gap:var(--s-3); }
.gnav__tel{ text-decoration:none; text-align:right; line-height:1.3; }
.gnav__tel b{ display:block; font-family:var(--f-en); font-size:1.375rem; font-weight:600; color:var(--c-deep); letter-spacing:0; }
.gnav__tel span{ font-size:var(--fs-caption); color:var(--c-ink-mute); }
.gnav__menu{ display:flex; list-style:none; margin:0; padding:0; gap:var(--s-2); border-top:1px solid var(--c-line); }
.gnav__menu > li{ position:relative; }
.gnav__link{
  display:flex; align-items:center; gap:6px; padding:var(--s-4);
  font-size:var(--fs-body); font-weight:700; color:var(--c-deep); text-decoration:none;
  border-bottom:3px solid transparent;
}
.gnav__menu > li:hover > .gnav__link,
.gnav__menu > li:focus-within > .gnav__link{ color:var(--c-cyan); border-bottom-color:var(--c-cyan); }
.gnav__link::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.gnav__link--nochild::after{ display:none; }
.gnav__panel{
  position:absolute; top:100%; left:0; min-width:268px; z-index:20;
  background:var(--c-white); border:1px solid var(--c-line); border-top:3px solid var(--c-cyan);
  border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--e-2);
  list-style:none; margin:0; padding:var(--s-2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.gnav__menu > li:hover > .gnav__panel,
.gnav__menu > li:focus-within > .gnav__panel{ opacity:1; visibility:visible; transform:translateY(0); }
.gnav__panel a{ display:block; padding:var(--s-3) var(--s-4); font-size:var(--fs-small); font-weight:500; color:var(--c-ink); text-decoration:none; border-radius:var(--r-sm); }
.gnav__panel a:hover{ background:var(--c-mist); color:var(--c-marine); }
.gnav__panel a b{ display:block; font-weight:700; }
.gnav__panel a em{ display:block; font-style:normal; font-size:var(--fs-caption); color:var(--c-ink-mute); }

.gnav--sticky{ border-bottom:2px solid var(--c-marine); }
.gnav--sticky .gnav__inner{ display:flex; align-items:center; gap:var(--s-5); padding-top:0; padding-bottom:0; }
.gnav--sticky .logo__img{ height:40px; }
.gnav--sticky .logo__jp{ display:none; }
.gnav--sticky .gnav__menu{ border-top:0; flex:1; }
.gnav--sticky .gnav__link{ padding:var(--s-3); font-size:var(--fs-small); }

/* ---- Mobile nav ---- */
.mnav{ width:100%; max-width:360px; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; background:var(--c-white); }
.mnav__bar{ display:flex; align-items:center; justify-content:space-between; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--c-line); }
.mnav__toggle{ width:44px; height:44px; border:1px solid var(--c-line); background:var(--c-white); border-radius:var(--r-sm); display:grid; place-content:center; gap:5px; cursor:pointer; }
.mnav__toggle span{ display:block; width:20px; height:2px; background:var(--c-deep); }
.mnav__body{ padding:var(--s-3); }
.mnav__body[hidden]{ display:none; }
.mnav__list{ list-style:none; margin:0; padding:0; }
.mnav__list > li + li{ border-top:1px solid var(--c-line); }
.mnav__list a{ display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 var(--s-3); font-weight:700; font-size:var(--fs-small); color:var(--c-deep); text-decoration:none; }
.mnav__list a::after{ content:""; width:8px; height:8px; border-top:2px solid var(--c-cyan); border-right:2px solid var(--c-cyan); transform:rotate(45deg); }
.mnav__cta{ display:grid; gap:var(--s-2); padding:var(--s-4) var(--s-3) var(--s-3); border-top:2px solid var(--c-mist); margin-top:var(--s-2); }

/* ---- First View（斜め帯） ---- */
.fv{ position:relative; background:var(--c-white); overflow:hidden; border-radius:var(--r-md); }
.fv__panel{
  position:absolute; inset:0; z-index:0;
  background:var(--g-hero);
  clip-path:polygon(0 0, 100% 0, 22% 100%, 0 100%);
}
.fv--light .fv__panel{ background:var(--g-brand); }
.fv__grid{ position:relative; z-index:1; display:grid; gap:var(--s-6); padding:var(--s-7) var(--s-6) var(--s-8); }
.fv__copy{ color:var(--c-white); }
.fv--light .fv__copy{ color:var(--c-deep); }
.fv__title{ font-family:var(--f-en); font-weight:800; font-variation-settings:"wdth" 78; text-transform:uppercase; font-size:clamp(2.5rem,8.5vw,5rem); line-height:.98; letter-spacing:-.005em; }
.fv__lead{ margin-top:var(--s-6); font-weight:900; font-size:clamp(1rem,2.4vw,1.375rem); line-height:1.75; }
.fv__reasons{ margin-top:var(--s-6); }
.fv__reasons h2{ font-size:var(--fs-caption); font-weight:700; letter-spacing:.14em; margin-bottom:var(--s-3); opacity:.9 }
.fv__reasons ul{ list-style:none; padding:0; display:grid; gap:6px; font-size:var(--fs-small); font-weight:500; line-height:1.6 }
.fv__reasons li{ display:flex; gap:var(--s-2); align-items:flex-start }
.fv__reasons li::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; margin-top:.6em; opacity:.85 }
.fv__photo{ position:relative; z-index:1; min-height:220px; display:grid; place-items:center; }
.fv__photo img{ width:100%; height:auto; filter:drop-shadow(0 18px 32px rgba(6,51,65,.28)) }
.fv__photo--empty{ border:1px dashed var(--c-line-bold); border-radius:var(--r-md); color:var(--c-ink-mute);
  font-family:var(--f-en); font-size:.75rem; letter-spacing:.16em; background:rgba(255,255,255,.6) }
.fv__cta{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-3) }
@media (min-width:900px){
  .fv__grid{ grid-template-columns:1.05fr .95fr; align-items:center; padding:var(--s-9) var(--s-8); }
  .fv__photo{ min-height:340px }
}

/* ---- 目的別3分岐 ---- */
.goals{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
.goal{
  position:relative; display:flex; flex-direction:column; gap:var(--s-3);
  background:var(--c-white); border:1px solid var(--c-line);
  border-radius:var(--r-md); padding:calc(var(--s-5) + 5px) var(--s-5) var(--s-5); text-decoration:none; color:inherit;
  overflow:hidden;
  transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.goal::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--g-vivid); }
.goal:hover{ border-color:var(--c-cyan); box-shadow:var(--e-2); color:inherit; }
.goal--renew::before{ background:var(--g-sun); }
.goal--renew:hover{ border-color:var(--c-sun-dark); }
.goal__en{
  font-family:var(--f-en); font-weight:800; font-variation-settings:"wdth" 90;
  font-size:2rem; line-height:.9; letter-spacing:-.01em; text-transform:uppercase; color:var(--c-cyan);
}
.goal--renew .goal__en{ color:var(--c-sun-dark); }
.goal__title{ font-size:var(--fs-h3); font-weight:900; color:var(--c-deep); line-height:1.4; }
.goal__desc{ font-size:var(--fs-small); color:var(--c-ink-sub); line-height:1.8; flex:1; }
.goal__link{ font-weight:700; font-size:var(--fs-small); color:var(--c-cyan); display:flex; align-items:center; gap:var(--s-2); }
.goal__link::after{ content:""; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); }

/* ---- Course / price ---- */
.course{ border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-white); overflow:hidden; }
.course__head{ background:var(--c-marine); background-image:var(--g-marine); color:var(--c-white); padding:var(--s-4) var(--s-5); }
.course__head b{ display:block; font-size:var(--fs-h3); font-weight:700; }
.course__head span{ font-size:var(--fs-caption); color:var(--c-aqua); }
.course__body{ padding:var(--s-5); display:grid; gap:var(--s-4); }
.price{ display:flex; align-items:baseline; gap:var(--s-2); }
.price__num{ font-family:var(--f-en); font-size:3rem; font-weight:700; font-variation-settings:"wdth" 100; color:var(--c-deep); line-height:1; letter-spacing:-.02em; }
.price__unit{ font-size:var(--fs-small); font-weight:700; color:var(--c-deep); }
.price__note{ font-size:var(--fs-caption); color:var(--c-ink-mute); }
.spec{ list-style:none; padding:0; margin:0; border-top:1px solid var(--c-line); }
.spec li{ display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px solid var(--c-line); font-size:var(--fs-small); }
.spec span:first-child{ color:var(--c-ink-sub); }
.spec b{ font-family:var(--f-en); font-weight:600; color:var(--c-deep); }

/* ---- Stats ---- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:var(--r-md); overflow:hidden; }
.stat{ background:var(--c-white); padding:var(--s-5) var(--s-4); }
.stat b{ display:block; font-family:var(--f-en); font-size:2.75rem; font-weight:700; font-variation-settings:"wdth" 100; color:var(--c-marine); line-height:1; letter-spacing:-.02em; }
.stat b i{ font-style:normal; font-size:1rem; margin-left:3px; letter-spacing:0; }
.stat span{ display:block; margin-top:var(--s-2); font-size:var(--fs-caption); color:var(--c-ink-sub); line-height:1.6; }

/* ---- Breadcrumb ---- */
.crumb{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-2); padding:0; margin:0; font-size:var(--fs-caption); color:var(--c-ink-mute); }
.crumb li{ display:flex; gap:var(--s-2); align-items:center; }
.crumb li+li::before{ content:"/"; color:var(--c-line-bold); }

/* ---- FAQ ---- */
.faq{ border-top:1px solid var(--c-line); }
.faq details{ border-bottom:1px solid var(--c-line); background:var(--c-white); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-4) var(--s-7) var(--s-4) var(--s-4); font-weight:700; color:var(--c-deep); font-size:var(--fs-body);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; font-family:var(--f-en); font-weight:800; color:var(--c-cyan); font-size:1.375rem; line-height:1.25; }
.faq summary::after{
  content:""; position:absolute; right:var(--s-4); top:26px; width:12px; height:12px;
  border-right:2px solid var(--c-cyan); border-bottom:2px solid var(--c-cyan);
  transform:rotate(45deg); transition:transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq__a{ display:flex; gap:var(--s-3); padding:0 var(--s-7) var(--s-5) var(--s-4); font-size:var(--fs-small); color:var(--c-ink-sub); }
.faq__a::before{ content:"A"; font-family:var(--f-en); font-weight:800; color:var(--c-sun-dark); font-size:1.375rem; line-height:1.4; }

/* ---- Form ---- */
.field{ display:block; margin-bottom:var(--s-5); }
.field__label{ display:flex; align-items:center; gap:var(--s-2); font-weight:700; font-size:var(--fs-small); color:var(--c-deep); margin-bottom:var(--s-2); }
.badge-req,.badge-opt{ font-size:var(--fs-caption); font-weight:700; padding:2px 8px; border-radius:var(--r-sm); line-height:1.6; }
.badge-req{ background:var(--c-error); color:var(--c-white); }
.badge-opt{ background:var(--c-mist); color:var(--c-ink-sub); }
.field__help{ display:block; font-size:var(--fs-caption); color:var(--c-ink-mute); margin-bottom:var(--s-2); }
.input,.select,.textarea{
  width:100%; min-height:52px; padding:var(--s-3) var(--s-4);
  font-family:var(--f-jp); font-size:var(--fs-body); color:var(--c-ink);
  background:var(--c-white); border:1px solid var(--c-line-bold); border-radius:var(--r-md);
}
.textarea{ min-height:140px; line-height:1.8; resize:vertical; }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--c-marine-mid); }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--c-cyan); outline:3px solid rgba(11,115,130,.28); outline-offset:0; }
.input[aria-invalid="true"]{ border-color:var(--c-error); background:var(--c-error-tint); }
.field__error{ display:flex; gap:6px; font-size:var(--fs-small); font-weight:700; color:var(--c-error); margin-top:var(--s-2); }

/* ---- CTA band ---- */
.cta-band{ background:var(--c-marine); background-image:var(--g-marine); color:var(--c-white); border-radius:var(--r-lg); padding:var(--s-6); }
.cta-band .en{ color:var(--c-aqua); margin-bottom:var(--s-3); }
.cta-band h3{ font-size:var(--fs-h3); font-weight:900; color:var(--c-white); margin-bottom:var(--s-3); }
.cta-band p{ color:#FFFFFF; font-size:var(--fs-small); margin-bottom:var(--s-5); }
.cta-band__row{ display:grid; gap:var(--s-3); }

/* ---- Footer ---- */
.foot{ background:var(--c-deep); color:#AFD4DA; padding:var(--s-7) var(--s-5) var(--s-5); border-radius:var(--r-lg); }
.foot__grid{ display:grid; gap:var(--s-6); }
.foot h4{ color:var(--c-white); font-size:var(--fs-small); font-weight:700; margin-bottom:var(--s-3); }
.foot ul{ list-style:none; padding:0; font-size:var(--fs-small); line-height:2.1; }
.foot a{ color:#AFD4DA; text-decoration:none; }
.foot a:hover{ color:var(--c-white); text-decoration:underline; }
.foot__meta{ margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid rgba(126,200,190,.32); font-size:var(--fs-caption); }

@media (min-width:640px){
  .goals{ grid-template-columns:repeat(3,1fr); }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .cta-band__row{ grid-template-columns:1fr 1fr; }
  .foot__grid{ grid-template-columns:1.4fr 1fr 1fr; }
}


@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}