/* SUNRUSH_FILE_VERSION: 20260823q */
/* ==========================================================================
   SUNRUSH — common.css
   全ページ共通スタイル（プロトタイプ）
   外部フォント / 外部CSS / 外部画像は一切読み込まない。
   --------------------------------------------------------------------------
   目次
   01. トークン（CSS変数）
   02. モード別テーマ（START / PRO）
   03. リセット
   04. タイポグラフィ
   05. レイアウト（container / section / grid）
   06. ボタン
   07. カード
   08. 画像プレースホルダー
   09. ロゴ
   10. ヘッダー / ナビ / モードスイッチ / ハンバーガー
   11. モバイルメニュー
   12. フッター
   13. ヒーロー（光線アニメーション）
   14. スクロールリビール / ローディング
   15. ユーティリティ
   16. prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   01. トークン
   ========================================================================== */
:root {
  /* --- ブランドカラー（ここだけ変えれば全体の色が変わる） --- */
  --gold: #F5A623;          /* アクセント基準色 */
  --gold-light: #FFC45A;    /* START 用の明るいゴールド */
  --gold-deep: #C97A0B;     /* PRO 用の濃いゴールド */
  --gold-ink: #0A0A0A;      /* ゴールド地の上に置く文字色 */

  /* --- ベース --- */
  --bg: #0A0A0A;
  --bg-2: #101010;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #F4F4F4;
  --text-mid: #B8B8B8;
  --text-dim: #7C7C7C;

  /* --- 状態色（緑・水色は使用しない。警告/強調はゴールドと赤系のみ） --- */
  --danger: #E5484D;

  /* --- モードで上書きされる変数（既定値 = START） --- */
  --accent: var(--gold);
  --accent-soft: rgba(245, 166, 35, 0.14);
  --accent-line: rgba(245, 166, 35, 0.34);
  --density: 1;              /* 余白の倍率 */
  --panel: var(--surface);

  /* --- タイポ --- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic",
    Meiryo, sans-serif;
  --font-num:
    "Helvetica Neue", "Arial Black", Arial, sans-serif; /* 数値・英字の強調用 */

  /* --- 余白スケール --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- その他 --- */
  --radius: 2px;             /* 硬質なトーンのため角はほぼ立てる */
  --radius-lg: 4px;
  --container: 1200px;
  --header-h: 68px;
  --header-h-compact: 54px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   02. モード別テーマ
   START = 未経験向け / 明るめゴールド・余白広め
   PRO   = 経験者向け / 濃いゴールド・高コントラスト・高密度
   ========================================================================== */
html[data-mode="start"] {
  --accent: var(--gold-light);
  --accent-soft: rgba(255, 196, 90, 0.13);
  --accent-line: rgba(255, 196, 90, 0.32);
  --density: 1.15;
  --panel: #151515;
}

html[data-mode="pro"] {
  --accent: var(--gold-deep);
  --accent-soft: rgba(201, 122, 11, 0.16);
  --accent-line: rgba(201, 122, 11, 0.45);
  --density: 0.82;
  --panel: #101010;
  --line: rgba(255, 255, 255, 0.14);
  --text-mid: #C6C6C6;
}

/* モード限定で出し分けする要素。
   data-mode-only="start elite" のように、空白区切りで複数指定できる。
   一致しないものだけを隠す（display を上書きしないので、ボタンや grid も崩れない） */
html[data-mode="start"] [data-mode-only]:not([data-mode-only~="start"]),
html[data-mode="elite"] [data-mode-only]:not([data-mode-only~="elite"]),
html[data-mode="pro"]   [data-mode-only]:not([data-mode-only~="pro"]) { display: none !important; }

/* ==========================================================================
   03. リセット
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--gold-ink); }

/* スクロールバー（対応ブラウザのみ・任意） */
* { scrollbar-color: #333 var(--bg); }

/* ==========================================================================
   04. タイポグラフィ
   ========================================================================== */
.h-hero {
  font-size: clamp(34px, 10vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.h-1 {
  font-size: clamp(26px, 5.4vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.h-2 {
  font-size: clamp(19px, 3.2vw, 26px);
  line-height: 1.4;
  font-weight: 700;
}

.h-3 {
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.5;
  font-weight: 700;
}

.lead {
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--text-mid);
  line-height: 1.9;
}

.body-s { font-size: 13px; color: var(--text-mid); line-height: 1.8; }
.note   { font-size: 12px; color: var(--text-dim); line-height: 1.7; }

/* セクション上部の小見出しラベル */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-num);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.num {
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.accent { color: var(--accent); }

/* 強調の下線（ゴールドの細線） */
.underline-gold {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 2px;
}

/* ==========================================================================
   05. レイアウト
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section {
  padding-block: calc(var(--sp-8) * var(--density));
  position: relative;
}
.section--tight { padding-block: calc(var(--sp-7) * var(--density)); }
.section--alt { background: var(--bg-2); }
.section + .section { border-top: 1px solid var(--line); }

.section__head { margin-bottom: calc(var(--sp-6) * var(--density)); }
.section__head .h-1 { margin-top: var(--sp-3); }
.section__head .lead { margin-top: var(--sp-4); max-width: 62ch; }

.grid { display: grid; gap: calc(var(--sp-4) * var(--density)); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

.stack > * + * { margin-top: var(--sp-4); }

/* 区切りの細線 */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  body { font-size: 16px; }
  .section { padding-block: calc(var(--sp-9) * var(--density)); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   06. ボタン
   ========================================================================== */
.btn {
  --btn-h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 26px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--gold-ink);
  border: 1px solid var(--accent);
}
.btn--primary:hover { background: #ffffff; border-color: #ffffff; }

.btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }

.btn--ghost {
  background: transparent;
  color: var(--text-mid);
  border: 1px solid transparent;
  padding-inline: 12px;
}
.btn--ghost:hover { color: var(--accent); }

.btn--sm { --btn-h: 40px; padding-inline: 18px; font-size: 12px; }
.btn--lg { --btn-h: 60px; padding-inline: 34px; font-size: 15px; }
.btn--block { width: 100%; }

/* 矢印つきテキストリンク */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.link-arrow::after {
  content: "";
  width: 16px; height: 1px;
  background: currentColor;
  transition: width .25s var(--ease);
}
.link-arrow:hover::after { width: 28px; }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 560px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ==========================================================================
   07. カード
   ========================================================================== */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: calc(var(--sp-5) * var(--density));
  position: relative;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease);
}
.card:hover { border-color: var(--accent-line); }

.card--link:hover { transform: translateY(-3px); }

.card__index {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-3);
}
.card__title { margin-bottom: var(--sp-3); }
.card__body { color: var(--text-mid); font-size: 14px; line-height: 1.85; }

/* 上辺にゴールドの線が入るカード */
.card--edge { border-top: 2px solid var(--accent); }

/* 数値を見せるカード */
.stat {
  border: 1px solid var(--line);
  padding: calc(var(--sp-5) * var(--density));
  background: var(--panel);
}
.stat__label { font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }
.stat__value {
  font-family: var(--font-num);
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent);
  margin-top: var(--sp-2);
}
.stat__unit { font-size: 0.5em; margin-left: 4px; color: var(--text-mid); }

/* タグ */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  color: var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.tag--plain { border-color: var(--line-strong); color: var(--text-mid); background: transparent; }

/* ==========================================================================
   08. 画像プレースホルダー
   写真は外部URLを使わず、ここで代替表示する。
   使い方: <div class="img-ph" data-label="IMAGE / 人物写真" style="--ph-ratio:16/9"></div>
   ========================================================================== */
.img-ph {
  --ph-ratio: 16 / 9;
  position: relative;
  aspect-ratio: var(--ph-ratio);
  width: 100%;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.014) 0 10px,
      transparent 10px 20px
    ),
    #232323;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.img-ph::before {
  /* 四隅の目印 */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(245, 166, 35, 0.22);
  pointer-events: none;
}
.img-ph::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  white-space: pre-line;
}
.img-ph--square { --ph-ratio: 1 / 1; }
.img-ph--portrait { --ph-ratio: 3 / 4; }
.img-ph--wide { --ph-ratio: 21 / 9; }

/* ==========================================================================
   09. ロゴ
   ========================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.logo__mark { width: 26px; height: 26px; flex: none; overflow: visible; }
.logo__mark .ray { fill: var(--accent); }
.logo__mark .ray-dim { fill: var(--accent); opacity: 0.45; }
.logo__type {
  font-family: var(--font-num);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
}
.logo--lg .logo__mark { width: 46px; height: 46px; }
.logo--lg .logo__type { font-size: 28px; letter-spacing: 0.2em; }

/* ==========================================================================
   10. ヘッダー
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: height .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled {
  height: var(--header-h-compact);
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.site-header__brand { margin-right: auto; }

/* ページ本体をヘッダー分下げる */
.site-main { padding-top: var(--header-h); }

/* PC ナビ */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-mid);
  position: relative;
  padding-block: 6px;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .28s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-current { color: var(--accent); }
.nav__link.is-current::after { width: 100%; }

.header__cta { display: none; }

@media (min-width: 768px) {
  .header__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .site-header__inner { padding-inline: 32px; }
  .nav { display: block; }
}

/* --- モードスイッチ（物理スイッチ風） --- */
.mode-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #050505;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
  user-select: none;
  flex: none;
}
.mode-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--opts, 3));
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(245, 166, 35, 0.35);
  transition: transform .38s cubic-bezier(0.34, 1.4, 0.5, 1),
              background-color .3s var(--ease);
  will-change: transform;
}
html[data-mode="elite"] .mode-switch__knob { transform: translateX(100%); }
html[data-mode="pro"]   .mode-switch__knob { transform: translateX(200%); }

.mode-switch__opt {
  position: relative;
  z-index: 1;
  min-width: 62px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border-radius: 999px;
  transition: color .28s var(--ease);
}
.mode-switch__opt:hover { color: var(--text-mid); }
html[data-mode="start"] .mode-switch__opt[data-mode-value="start"],
html[data-mode="elite"] .mode-switch__opt[data-mode-value="elite"],
html[data-mode="pro"]   .mode-switch__opt[data-mode-value="pro"] {
  color: var(--gold-ink);
}
.mode-switch--lg .mode-switch__opt { min-width: 108px; height: 44px; font-size: 13px; }

/* ヒーロー用の大きいスイッチ */
.mode-switch--xl { padding: 5px; border-width: 2px; }
.mode-switch--xl .mode-switch__knob {
  top: 5px; left: 5px;
  width: calc((100% - 10px) / var(--opts, 3));
  height: calc(100% - 10px);
}
.mode-switch--xl .mode-switch__opt {
  min-width: clamp(92px, 27vw, 168px);
  height: 60px;
  font-size: clamp(13px, 3.4vw, 18px);
  letter-spacing: 0.14em;
}

/* --- ハンバーガー（× にモーフ） --- */
.burger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
}
.burger__bar {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .34s var(--ease), opacity .2s var(--ease),
              width .34s var(--ease);
}
.burger__bar:nth-child(1) { transform: translateY(-6px); }
.burger__bar:nth-child(2) { transform: translateY(0); }
.burger__bar:nth-child(3) { transform: translateY(6px); width: 13px; }

.burger.is-open .burger__bar:nth-child(1) { transform: rotate(45deg); background: var(--accent); }
.burger.is-open .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger.is-open .burger__bar:nth-child(3) { transform: rotate(-45deg); width: 20px; background: var(--accent); }

@media (min-width: 1024px) { .burger { display: none; } }

/* スイッチが唯一のモード切替手段のため、
   ハンバーガーが出る幅（〜1023px）ではタップ領域を高さ44px以上にする */
@media (max-width: 1023px) {
  :root {
    --header-h: 74px;
    --header-h-compact: 62px;
  }
  .mode-switch__opt { min-height: 44px; height: 44px; min-width: 52px; }
  .mode-switch--lg .mode-switch__opt { min-height: 48px; height: 48px; }
  .burger { width: 44px; height: 44px; }
  .btn--sm { --btn-h: 44px; }
  .link-arrow, .footer-col__link, .crumb a { min-height: 44px; }
}

/* 375px 幅でヘッダーが収まるように詰める */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .site-header__inner { gap: 10px; padding-inline: 16px; }
  .logo__mark { width: 22px; height: 22px; }
  .logo__type { font-size: 15px; letter-spacing: 0.12em; }
  .mode-switch__opt { min-width: 46px; font-size: 9px; letter-spacing: 0.06em; }
  .mode-switch--lg .mode-switch__opt { min-width: 88px; font-size: 12px; }
  .mode-switch--xl .mode-switch__opt { min-width: 98px; height: 56px; font-size: 13px; }
  .burger { width: 44px; height: 44px; }
  .mobile-menu { padding-inline: 16px; }
}

/* ==========================================================================
   11. モバイルメニュー
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: calc(var(--header-h) + 24px) 20px 40px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .42s var(--ease), visibility .42s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }

.mobile-menu__list { border-top: 1px solid var(--line); }
.mobile-menu__item { border-bottom: 1px solid var(--line); }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mobile-menu__link .idx {
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.mobile-menu__foot { margin-top: auto; padding-top: 32px; }
.mobile-menu__mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 16px 0 24px;
}
.mobile-menu__mode-label { font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); }

/* メニュー項目のずれ込み表示 */
.mobile-menu .mobile-menu__item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-menu.is-open .mobile-menu__item { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__item:nth-child(1) { transition-delay: .10s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(2) { transition-delay: .15s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(3) { transition-delay: .20s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(4) { transition-delay: .25s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(5) { transition-delay: .30s; }
.mobile-menu.is-open .mobile-menu__item:nth-child(6) { transition-delay: .35s; }

body.is-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   12. フッター
   ========================================================================== */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-8) var(--sp-5);
}
.site-footer__top {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
.site-footer__tag { margin-top: var(--sp-4); max-width: 34ch; }
.footer-col__title {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.footer-col__list > li + li { margin-top: 10px; }
.footer-col__link {
  font-size: 13px;
  color: var(--text-mid);
  transition: color .25s var(--ease);
}
.footer-col__link:hover { color: var(--accent); }

/* 外部リンクの印 */
.ext {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  position: relative;
  vertical-align: 0;
}
.ext::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.site-footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* プロトタイプ注記（全ページ常時表示） */
.proto-note {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.proto-note__badge {
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  border: 1px solid currentColor;
  padding: 1px 6px;
  flex: none;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   13. ヒーロー（ゴールドの光線）
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--line);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

/* 背景：下から扇状に伸びる光線がゆっくり回る */
.hero__rays {
  position: absolute;
  inset: -20% -30% -40%;
  z-index: 0;
  pointer-events: none;
}
.hero__rays::before,
.hero__rays::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 100%,
    rgba(245, 166, 35, 0.16) 0deg 1.2deg,
    transparent 1.2deg 9deg
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 85% at 50% 100%, #000 0%, transparent 72%);
  animation: ray-sweep 46s linear infinite;
  transform-origin: 50% 100%;
}
.hero__rays::after {
  background: repeating-conic-gradient(
    from 0deg at 50% 100%,
    rgba(245, 166, 35, 0.09) 0deg 0.5deg,
    transparent 0.5deg 5deg
  );
  animation-duration: 78s;
  animation-direction: reverse;
}

/* 地平線側のにじみ */
.hero__glow {
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: 130%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(245, 166, 35, 0.26) 0%,
    rgba(245, 166, 35, 0.08) 34%,
    transparent 68%
  );
  z-index: 1;
  pointer-events: none;
  animation: glow-breathe 9s ease-in-out infinite;
}

/* 上部の暗いかぶせ（文字の可読性確保） */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.45) 46%, rgba(10,10,10,0.75) 100%);
  pointer-events: none;
}

@keyframes ray-sweep {
  from { transform: rotate(-8deg); }
  50%  { transform: rotate(8deg); }
  to   { transform: rotate(-8deg); }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.hero__copy { max-width: 20ch; }
.hero__sub { margin-top: var(--sp-5); max-width: 40ch; }
.hero__actions { margin-top: var(--sp-6); }
.hero__scroll {
  margin-top: var(--sp-7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-dim);
}
.hero__scroll::after {
  content: "";
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  animation: scroll-hint 2.6s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: translateX(0); opacity: .4; }
  50%      { transform: translateX(8px); opacity: 1; }
}

/* ==========================================================================
   14. スクロールリビール / ローディング
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 子要素を順に出す */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .09s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .18s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .27s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .45s; }

/* JS が無い / 未初期化のときに中身が消えないための保険 */
html.no-js .reveal,
html.no-js .reveal-stagger > * { opacity: 1; transform: none; }

/* --- ローディング演出 --- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .55s var(--ease), visibility .55s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__logo {
  animation: loader-in 1s var(--ease) both;
}
.loader__bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  animation: loader-bar 1.1s var(--ease) both;
}
@keyframes loader-in {
  0%   { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes loader-bar {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ==========================================================================
   15. ユーティリティ
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
/* 768px 以上でのみ効かせる改行 */
.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: inline; } }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mw-60 { max-width: 60ch; }

/* ==========================================================================
   16. 下層ページ用パーツ
   16-1. ページヒーロー（トップ以外の見出し）
   16-2. ステップ（応募 → 面談 → 研修 → 同行 → 独り立ち）
   16-3. アコーディオン
   16-4. 適性診断
   16-5. 注意書きパネル
   ========================================================================== */

/* --- 16-1. ページヒーロー --- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--sp-8) * var(--density)) calc(var(--sp-7) * var(--density));
  border-bottom: 1px solid var(--line);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__glow {
  position: absolute;
  left: 50%;
  top: -60%;
  width: 120%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(245, 166, 35, 0.20) 0%,
    rgba(245, 166, 35, 0.05) 40%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}
.page-hero__title { margin-top: var(--sp-4); }
.page-hero__lead { margin-top: var(--sp-5); max-width: 52ch; }

/* パンくず */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--text-dim); }
.crumb li::after { content: "／"; margin-left: 8px; color: var(--line-strong); }
.crumb li:last-child::after { content: none; }
.crumb a:hover { color: var(--accent); }

/* --- 16-2. ステップ --- */
.steps {
  position: relative;
  display: grid;
  gap: calc(var(--sp-5) * var(--density));
}
/* 縦の軸線（モバイル） */
.steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--sp-4);
  align-items: start;
  /* 1つずつ順に現れる */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.step.is-visible { opacity: 1; transform: none; }

.step__badge {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-line);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 50%;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.step.is-visible .step__badge { background: var(--accent); color: var(--gold-ink); border-color: var(--accent); }

.step__body {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--panel);
}
.step__label {
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  display: block;
  margin-bottom: 4px;
}
.step__title { margin-bottom: var(--sp-2); }
.step__text { font-size: 14px; color: var(--text-mid); line-height: 1.85; }
.step__meta {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 1024px) {
  /* 横並びにする。列数はステップの数にそのまま合わせるので、
     4つでも5つでも右側に余白が残らない。 */
  .steps {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
    gap: var(--sp-4);
    align-items: stretch;
  }
  /* 横線は「最初の丸の中心」から「最後の丸の中心」までに収める。
     --steps（ステップの数）は common.js が入れている。 */
  .steps::before {
    left: 18px;
    right: calc((100% - (var(--steps, 5) - 1) * var(--sp-4)) / var(--steps, 5) - 18px);
    top: 17px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sp-4); align-items: stretch; }
  .step__badge { justify-self: start; }
}

/* --- 16-3. アコーディオン --- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: 20px 0;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  transition: color .25s var(--ease);
}
.acc__btn:hover { color: var(--accent); }
.acc__q {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent);
  flex: none;
  padding-top: 4px;
}
.acc__label { flex: 1; }

/* ＋ が × に変わる */
.acc__icon { position: relative; width: 16px; height: 16px; flex: none; margin-top: 6px; }
.acc__icon::before,
.acc__icon::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 1.5px;
  background: var(--accent);
  transition: transform .34s var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::before { transform: rotate(135deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(45deg); }

/* 高さをなめらかに変える（JS が height を px で制御） */
.acc__panel {
  height: 0;
  overflow: hidden;
  transition: height .38s var(--ease);
}
.acc__inner {
  padding: 0 0 24px 0;
  color: var(--text-mid);
  font-size: 14px;
  line-height: 1.9;
}
@media (min-width: 768px) {
  .acc__inner { padding-left: calc(11px + var(--sp-4) + 18px); max-width: 76ch; }
  .acc__btn { font-size: 16px; }
}

/* --- 16-4. 適性診断 --- */
.quiz {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.quiz__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.quiz__count { font-family: var(--font-num); font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim); }
.quiz__count b { color: var(--accent); font-size: 15px; }

.quiz__bar { height: 2px; background: rgba(255, 255, 255, 0.08); }
.quiz__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .4s var(--ease);
}

.quiz__viewport { overflow: hidden; }
.quiz__track {
  display: flex;
  align-items: flex-start;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.quiz__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: calc(var(--sp-6) * var(--density)) 20px calc(var(--sp-6) * var(--density));
}
.quiz__q { margin-bottom: var(--sp-5); }

.quiz__opts { display: grid; gap: 10px; }
.quiz__opt {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.quiz__opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.quiz__opt.is-picked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.quiz__key {
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  width: 24px; height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  color: var(--accent);
  border-radius: 50%;
}

.quiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* 結果 */
.quiz__result { padding: calc(var(--sp-6) * var(--density)) 20px; }
.quiz__type {
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--accent);
  margin: var(--sp-3) 0 var(--sp-4);
}
.quiz__checklist { display: grid; gap: 10px; margin-top: var(--sp-5); }
.quiz__checklist li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--text-mid);
}
.quiz__checklist li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 9px;
  background: var(--accent);
}

@media (min-width: 768px) {
  .quiz__slide, .quiz__result { padding-inline: 32px; }
  .quiz__head, .quiz__foot { padding-inline: 32px; }
  .quiz__opts { grid-template-columns: repeat(2, 1fr); }
}

/* --- 16-5-2. 少し目立つ説明パネル（注釈より強く、見出しより弱い） --- */
.callout {
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  max-width: 62ch;
}
.callout__lead {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.callout__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-mid);
}
.callout__text b { color: var(--text); font-weight: 700; }

/* --- 16-5. 注意書きパネル --- */
.notice {
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.02);
  padding: 18px 20px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-mid);
}
.notice strong { color: var(--text); }

/* 定義リスト（開示項目の表） */
.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec__key {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
}
.spec__val { font-size: 14px; color: var(--text-mid); line-height: 1.8; }
@media (min-width: 768px) {
  .spec__row { grid-template-columns: 240px 1fr; gap: var(--sp-5); align-items: baseline; }
}

/* --- 16-6. 機能プレースホルダー枠（後で実装する領域） --- */
.slot {
  position: relative;
  border: 1px dashed var(--accent-line);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(245, 166, 35, 0.03) 0 12px,
      transparent 12px 24px
    ),
    #131313;
  border-radius: var(--radius-lg);
  padding: calc(var(--sp-6) * var(--density)) 20px;
  text-align: center;
}
.slot__badge {
  display: inline-block;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
  background: var(--accent);
  padding: 4px 10px;
}
.slot__title { margin-top: var(--sp-4); }
.slot__text { margin-top: var(--sp-3); color: var(--text-mid); font-size: 14px; }
.slot__spec {
  margin: var(--sp-5) auto 0;
  max-width: 720px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.slot__spec li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}
.slot__spec b { color: var(--accent); font-weight: 700; flex: none; min-width: 92px; }
@media (min-width: 768px) {
  .slot { padding: calc(var(--sp-7) * var(--density)) 32px; }
}

/* --- 16-7. ランクバッジ --- */
.rank-row {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rank {
  flex: 0 0 132px;
  scroll-snap-align: start;
  text-align: center;
  padding: var(--sp-4) 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
}
.rank--current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }

.rank__shield {
  position: relative;
  width: 62px;
  aspect-ratio: 1 / 1.16;
  margin: 0 auto;
  background: var(--rank-col, var(--accent));
  clip-path: polygon(50% 0%, 100% 24%, 100% 74%, 50% 100%, 0% 74%, 0% 24%);
  display: grid;
  place-items: center;
}
.rank__shield::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0C0C0C;
  clip-path: polygon(50% 0%, 100% 24%, 100% 74%, 50% 100%, 0% 74%, 0% 24%);
}
.rank__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 800;
  color: var(--rank-col, var(--accent));
  letter-spacing: 0;
}
.rank__name {
  margin-top: var(--sp-3);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--rank-col, var(--accent));
}
.rank__score { margin-top: 4px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rank__note { margin-top: 8px; font-size: 11px; color: var(--text-mid); line-height: 1.6; }

/* ランクごとの色（ゴールドの濃度で段階を表現） */
.rank--1 { --rank-col: #6E5522; }
.rank--2 { --rank-col: #9A6C11; }
.rank--3 { --rank-col: #C97A0B; }
.rank--4 { --rank-col: #F5A623; }
.rank--5 { --rank-col: #FFC45A; }
.rank--5 .rank__shield { box-shadow: 0 0 24px rgba(255, 196, 90, 0.28); }

@media (min-width: 768px) {
  .rank-row { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .rank { flex: initial; }
  .rank__shield { width: 72px; }
}

/* --- 16-8. スカウトの流れ（図解） --- */
.scout {
  display: grid;
  gap: var(--sp-4);
  counter-reset: scout;
}
.scout__node {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
}
.scout__node::before {
  counter-increment: scout;
  content: counter(scout, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
}
/* つなぎの矢印（縦） */
.scout__node:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-4) * -1);
  width: 1px;
  height: var(--sp-4);
  background: var(--accent-line);
}
.scout__title { margin: var(--sp-2) 0 var(--sp-2); }
.scout__text { font-size: 13px; color: var(--text-mid); line-height: 1.8; }
.scout__who {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  padding: 2px 8px;
}

@media (min-width: 900px) {
  .scout { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  .scout__node:not(:last-child)::after {
    left: auto;
    right: calc(var(--sp-5) * -1);
    bottom: auto;
    top: 50%;
    width: var(--sp-5);
    height: 1px;
  }
}

/* 指標の重み表示 */
.weight { display: grid; gap: var(--sp-4); }
.weight__item { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.weight__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.weight__name { font-size: 14px; font-weight: 700; }
.weight__pct { font-family: var(--font-num); font-size: 20px; font-weight: 800; color: var(--accent); }
.weight__bar { height: 3px; background: rgba(255, 255, 255, 0.08); margin-top: 10px; }
.weight__bar span { display: block; height: 100%; background: var(--accent); }
.weight__text { margin-top: 10px; font-size: 13px; color: var(--text-mid); }
@media (min-width: 768px) { .weight { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

/* ==========================================================================
   16-9. 報酬シミュレーター
   ========================================================================== */
.sim {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- 入力 --- */
.sim__controls {
  display: grid;
  gap: var(--sp-5);
  padding: calc(var(--sp-5) * var(--density)) 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}

.ctrl__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 10px;
}
.ctrl__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.ctrl__value {
  font-family: var(--font-num);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ctrl__value small { font-size: 12px; color: var(--text-mid); margin-left: 3px; }

.ctrl__row { display: flex; align-items: center; gap: 10px; }

/* ± ボタン（タップ領域 44px） */
.ctrl__step {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.ctrl__step:hover { border-color: var(--accent); color: var(--accent); }
.ctrl__step:disabled { opacity: .3; cursor: not-allowed; }

/* スライダー本体：高さ44pxを確保して指で掴みやすくする */
.ctrl__range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 44px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ctrl__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--fill, 30%),
    rgba(255, 255, 255, 0.12) var(--fill, 30%),
    rgba(255, 255, 255, 0.12) 100%
  );
}
.ctrl__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #0B0B0B;
  box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: transform .18s var(--ease);
}
.ctrl__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ctrl__range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.ctrl__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.ctrl__range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #0B0B0B;
  box-shadow: 0 0 0 1px var(--accent);
}
.ctrl__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-num);
  letter-spacing: 0.1em;
}

/* --- 出力 --- */
.sim__out { display: grid; }
.sim__main { padding: calc(var(--sp-6) * var(--density)) 20px; }

.sim__amount-label { font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); }
.sim__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-3);
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.sim__amount .yen { font-size: clamp(16px, 3.6vw, 22px); color: var(--text-mid); }
.sim__amount .val { font-size: clamp(30px, 8.6vw, 54px); color: var(--accent); }
.sim__amount .sep { font-size: clamp(18px, 4vw, 26px); color: var(--text-dim); }
.sim__amount .unit { font-size: clamp(13px, 2.6vw, 16px); color: var(--text-mid); }

.sim__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--sp-5);
  background: var(--line);
  border: 1px solid var(--line);
}
.sim__metric { background: var(--panel); padding: 14px 12px; }
.sim__metric dt { font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); }
.sim__metric dd {
  margin: 6px 0 0;
  font-family: var(--font-num);
  font-size: clamp(17px, 4.4vw, 22px);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim__metric dd small { font-size: 11px; color: var(--text-mid); margin-left: 2px; font-weight: 400; }

/* --- 棒グラフ --- */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  margin-top: var(--sp-4);
}
.bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.bar__fill {
  height: 2%;
  background: rgba(245, 166, 35, 0.22);
  border-top: 1px solid var(--accent-line);
  transition: height .5s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.bar.is-current .bar__fill {
  background: var(--accent);
  border-top-color: var(--accent);
  box-shadow: 0 0 18px rgba(245, 166, 35, 0.35);
}
.bar__label {
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 9px;
  color: var(--text-dim);
}
.bar.is-current .bar__label { color: var(--accent); font-weight: 800; }
.bars-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* --- ランク表示 --- */
.rank-panel {
  border-top: 1px solid var(--line);
  padding: calc(var(--sp-6) * var(--density)) 20px;
  display: grid;
  gap: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.rank-big { display: flex; align-items: center; gap: var(--sp-4); position: relative; }

.rank-big__shield {
  position: relative;
  width: 84px;
  aspect-ratio: 1 / 1.16;
  flex: none;
  background: var(--rank-col, var(--accent));
  clip-path: polygon(50% 0%, 100% 24%, 100% 74%, 50% 100%, 0% 74%, 0% 24%);
  display: grid;
  place-items: center;
  transition: background-color .4s var(--ease), filter .4s var(--ease);
}
.rank-big__shield::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0C0C0C;
  clip-path: polygon(50% 0%, 100% 24%, 100% 74%, 50% 100%, 0% 74%, 0% 24%);
}
.rank-big__numeral {
  position: relative;
  z-index: 1;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 800;
  color: var(--rank-col, var(--accent));
}
.rank-big__name {
  font-family: var(--font-num);
  font-size: clamp(22px, 6vw, 34px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--rank-col, var(--accent));
  line-height: 1.1;
  transition: color .4s var(--ease);
}
.rank-big__score { font-size: 12px; color: var(--text-dim); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ランクアップの演出 */
.rank-big.is-rankup .rank-big__shield {
  animation: rank-pop .72s var(--ease);
  filter: drop-shadow(0 0 22px rgba(245, 166, 35, 0.75));
}
.rank-big.is-rankup .rank-big__name { animation: rank-flash .72s var(--ease); }
.rank-big.is-rankdown .rank-big__shield { animation: rank-drop .5s var(--ease); }

@keyframes rank-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.28) rotate(-3deg); }
  55%  { transform: scale(0.96) rotate(1deg); }
  100% { transform: scale(1); }
}
@keyframes rank-flash {
  0%   { text-shadow: none; }
  30%  { text-shadow: 0 0 26px currentColor; }
  100% { text-shadow: none; }
}
@keyframes rank-drop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(6px) scale(0.94); }
  100% { transform: translateY(0); }
}

/* パーティクル */
.burst {
  position: absolute;
  left: 42px;
  top: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.burst i {
  position: absolute;
  left: 0; top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
  opacity: 0;
  border-radius: 1px;
}
.burst.is-on i { animation: burst-fly .72s var(--ease) forwards; }
@keyframes burst-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.3) rotate(180deg); }
}

/* 次のランクまで */
.rank-next { }
.rank-next__head { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 12px; color: var(--text-mid); }
.rank-next__bar { height: 4px; background: rgba(255, 255, 255, 0.08); margin-top: 8px; }
.rank-next__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s var(--ease); }

/* ランク一覧の現在位置（既存 .rank-row と連動） */
.rank.is-active { border-color: var(--accent); background: var(--accent-soft); }

/* --- 分岐マトリクス --- */
.mx-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx { border-collapse: separate; border-spacing: 3px; min-width: 460px; }
.mx caption { caption-side: top; text-align: left; font-size: 11px; letter-spacing: .14em; color: var(--text-dim); padding-bottom: 10px; }
.mx th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 6px 4px;
  white-space: nowrap;
}
.mx th[scope="row"] { text-align: right; padding-right: 10px; }
.mx__cell {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 8px;
  text-align: center;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.mx__rank {
  display: block;
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--rank-col, var(--text-mid));
}
.mx__net { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mx__cell.is-here {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent), 0 0 22px rgba(245, 166, 35, 0.22);
  transform: scale(1.04);
}
.mx__cell.is-here .mx__net { color: var(--accent); }
.mx__cell.is-here::after {
  content: "現在地";
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* --- 注記（常時表示） --- */
.sim__disclaimer {
  border-top: 1px solid var(--line);
  background: rgba(245, 166, 35, 0.05);
  padding: 14px 20px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-mid);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sim__disclaimer::before {
  content: "!";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .sim__controls { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); padding-inline: 32px; }
  .sim__main, .rank-panel, .sim__disclaimer { padding-inline: 32px; }
  .rank-panel { grid-template-columns: 1fr 1fr; align-items: center; }
  .bars { height: 190px; }
  .bar__label { font-size: 10px; }
}

/* ==========================================================================
   16-10. 求人一覧 / 求人詳細
   ========================================================================== */

/* --- フィルタ --- */
.filters {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.filters__grid { display: grid; gap: var(--sp-3); }
.field__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.select {
  position: relative;
  display: block;
}
.select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 0 38px 0 14px;
  background: #0C0C0C;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.select select:hover { border-color: var(--accent); }
.select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  pointer-events: none;
}
.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
}
.filters__count { font-size: 13px; color: var(--text-mid); }
.filters__count b {
  font-family: var(--font-num);
  font-size: 20px;
  color: var(--accent);
  margin: 0 3px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .filters { padding: var(--sp-5); }
  .filters__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}

/* --- 求人カード --- */
.jobs {
  display: grid;
  gap: var(--sp-4);
  transition: opacity .22s var(--ease);
}
.jobs.is-swapping { opacity: 0; }
@media (min-width: 900px) { .jobs { grid-template-columns: repeat(2, 1fr); } }

.job {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  opacity: 0;
  transform: translateY(14px);
  animation: job-in .42s var(--ease) forwards;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.job:hover { border-color: var(--accent-line); transform: translateY(-2px); }
@keyframes job-in {
  to { opacity: 1; transform: none; }
}

.job__head { display: flex; align-items: flex-start; gap: var(--sp-3); justify-content: space-between; }
.job__company { font-size: 12px; color: var(--text-mid); letter-spacing: 0.04em; }
.job__title {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.job__meta { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; }

/* 開示済みバッジ（ここが一番目立つべき要素） */
.badge-open {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--gold-ink);
  border-radius: var(--radius);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(245, 166, 35, 0.28);
}
.badge-open::before {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* 開示3項目 */
.disclose {
  margin-top: var(--sp-4);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
}
.disclose__cell {
  padding: 12px 10px;
  background: rgba(10, 10, 10, 0.55);
  min-width: 0;
}
.disclose__key {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.disclose__val {
  margin-top: 6px;
  font-family: var(--font-num);
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.disclose__val small { font-size: 10px; color: var(--text-mid); margin-left: 2px; font-weight: 400; }
.disclose__sub { margin-top: 4px; font-size: 10px; color: var(--text-dim); line-height: 1.4; }

.job__facts { margin-top: var(--sp-4); display: grid; gap: 6px; }
.job__fact { display: flex; gap: 10px; font-size: 12px; color: var(--text-mid); }
.job__fact b { flex: none; min-width: 84px; color: var(--text-dim); font-weight: 400; }
.job__foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.job__verified { font-size: 10px; color: var(--text-dim); }

/* 結果なし */
.jobs-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--text-mid);
}

/* --- 求人詳細 --- */
.detail-head { display: grid; gap: var(--sp-4); }
.detail-title { line-height: 1.35; }

.audit {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
}
.audit__head { display: flex; align-items: center; gap: var(--sp-3); }
.audit__seal {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.2;
}
.audit__title { font-size: 15px; font-weight: 800; color: var(--accent); }
.audit__list { margin-top: var(--sp-4); display: grid; gap: 8px; }
.audit__list li { display: flex; gap: 10px; font-size: 13px; color: var(--text-mid); }
.audit__list li::before {
  content: "";
  flex: none;
  width: 10px; height: 6px;
  margin-top: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* 報酬条件テーブル */
.terms { width: 100%; border: 1px solid var(--line-strong); }
.terms caption {
  caption-side: top;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding: 0 0 10px;
}
.terms th, .terms td {
  border-bottom: 1px solid var(--line);
  padding: 14px 14px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.terms tr:last-child th, .terms tr:last-child td { border-bottom: 0; }
.terms th {
  width: 38%;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-mid);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.terms td { color: var(--text); }
.terms td .num { color: var(--accent); font-size: 17px; }
.terms td small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 560px) {
  .terms th { width: 42%; padding-inline: 10px; font-size: 11px; }
  .terms td { padding-inline: 10px; font-size: 13px; }
}

/* 支給実績の3点 */
.records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.records__cell { background: var(--panel); padding: 14px 10px; text-align: center; }
.records__key { font-size: 10px; letter-spacing: 0.14em; color: var(--text-dim); }
.records__val {
  margin-top: 6px;
  font-family: var(--font-num);
  font-size: clamp(16px, 4.4vw, 22px);
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.records__val small { font-size: 11px; color: var(--text-mid); margin-left: 2px; font-weight: 400; }

/* 応募バー（詳細ページ下部固定） */
.apply-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--accent-line);
  padding: 12px 0;
}
.apply-bar__inner { display: flex; align-items: center; gap: var(--sp-4); }
.apply-bar__text { flex: 1; min-width: 0; }
.apply-bar__text p { font-size: 11px; color: var(--text-dim); }
.apply-bar__text strong { display: block; font-size: 14px; color: var(--text); }
.apply-bar .btn { flex: none; }
@media (max-width: 560px) {
  .apply-bar__text { display: none; }
  .apply-bar .btn { flex: 1; }
}

/* ==========================================================================
   16-11. タブ
   ========================================================================== */
.tabs__list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.tab {
  position: relative;
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent); }
.tab.is-active::after { transform: scaleX(1); }

.tabpanel { display: none; padding-top: var(--sp-5); }
.tabpanel.is-active { display: block; animation: tab-in .35s var(--ease); }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   16-12. フォーム
   ========================================================================== */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 768px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field__req {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  background: var(--accent);
  padding: 1px 5px;
  vertical-align: 2px;
}
.field__opt {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  padding: 1px 5px;
  vertical-align: 2px;
}

.input, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: #0C0C0C;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 15px;              /* 16px未満だと iOS で拡大するため注意 */
  font-family: inherit;
  line-height: 1.6;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.textarea { min-height: 130px; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); background: #101010; }
.input::placeholder, .textarea::placeholder { color: #5A5A5A; }
.input.is-error, .textarea.is-error { border-color: var(--danger); }

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
}
.field.is-error .field__error { display: block; }

.field__help { margin-top: 6px; font-size: 11px; color: var(--text-dim); line-height: 1.6; }

/* 選択カード（ラジオ / チェック） */
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices--2 { grid-template-columns: repeat(2, 1fr); } }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.choice:hover { border-color: var(--accent-line); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__mark {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  position: relative;
  transition: border-color .2s var(--ease);
}
.choice--check .choice__mark { border-radius: 2px; }
.choice__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--accent);
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.choice input:checked ~ .choice__mark { border-color: var(--accent); }
.choice input:checked ~ .choice__mark::after { transform: scale(1); }
.choice input:focus-visible ~ .choice__mark { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice__body { min-width: 0; }
.choice__title { font-size: 14px; font-weight: 700; }
.choice__text { margin-top: 4px; font-size: 12px; color: var(--text-mid); line-height: 1.6; }

/* ==========================================================================
   16-13. 複数ステップフォーム
   ========================================================================== */
.entry {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.entry__head { padding: var(--sp-5) 20px var(--sp-4); border-bottom: 1px solid var(--line); }
.stepper { display: flex; gap: 6px; }
.stepper__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
  transition: color .3s var(--ease);
}
.stepper__num {
  flex: none;
  width: 24px; height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.stepper__item.is-current { color: var(--accent); }
.stepper__item.is-current .stepper__num,
.stepper__item.is-done .stepper__num {
  background: var(--accent);
  color: var(--gold-ink);
  border-color: var(--accent);
}
.stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .stepper__label { display: none; } .stepper__item { flex: none; } }

.entry__bar { height: 3px; background: rgba(255, 255, 255, 0.08); margin-top: var(--sp-4); }
.entry__bar span { display: block; height: 100%; width: 33%; background: var(--accent); transition: width .45s var(--ease); }

.entry__viewport { overflow: hidden; }
.entry__track { display: flex; align-items: flex-start; transition: transform .45s var(--ease); }
.entry__step { flex: 0 0 100%; min-width: 100%; padding: calc(var(--sp-6) * var(--density)) 20px; }
.entry__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* 確認画面の一覧 */
.confirm { border-top: 1px solid var(--line); }
.confirm__row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.confirm__key { font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); }
.confirm__val { font-size: 14px; color: var(--text); word-break: break-all; }
@media (min-width: 768px) {
  .confirm__row { grid-template-columns: 200px 1fr; gap: var(--sp-4); align-items: baseline; }
}

/* 完了画面 */
.done { padding: calc(var(--sp-8) * var(--density)) 20px; text-align: center; }
.done__mark {
  width: 76px; height: 76px;
  margin: 0 auto var(--sp-5);
  border: 2px solid var(--accent);
  border-radius: 50%;
  position: relative;
  animation: done-in .5s var(--ease) both;
}
.done__mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 14px;
  margin: -12px 0 0 -13px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
}
@keyframes done-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@media (min-width: 768px) {
  .entry__head, .entry__step, .entry__foot, .done { padding-inline: 32px; }
}

/* ==========================================================================
   16-14. 読み物ページ（about / company）
   ========================================================================== */
.prose { max-width: 72ch; }
.prose p { margin-top: var(--sp-4); color: var(--text-mid); font-size: 15px; line-height: 2; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 700; }
.prose h3 { margin-top: var(--sp-6); }

.pull {
  border-left: 2px solid var(--accent);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0;
  font-size: clamp(17px, 3.4vw, 22px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
}

.criteria { counter-reset: crit; display: grid; gap: var(--sp-3); }
.criteria__item {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.criteria__item::before {
  counter-increment: crit;
  content: counter(crit, decimal-leading-zero);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  padding-top: 2px;
}
.criteria__title { font-size: 15px; font-weight: 700; }
.criteria__text { margin-top: 6px; font-size: 13px; color: var(--text-mid); line-height: 1.8; }
.criteria__ng { margin-top: 8px; font-size: 12px; color: var(--danger); }

/* ==========================================================================
   16-15. 全体のアニメーション
   16-15-1. ページ遷移（フェードイン / フェードアウト）
   16-15-2. ボタンの光沢
   16-15-3. カードの縁走り
   16-15-4. モード切替のワイプ
   ========================================================================== */

/* --- ページ遷移 --- */
body { animation: page-in .5s var(--ease) both; }
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 内部リンクを踏んだとき、遷移前に軽く落とす */
html.is-leaving body { opacity: 0; transition: opacity .24s var(--ease); }

/* --- ボタン：ゴールドの光が走る＋わずかに浮く --- */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 32%,
    rgba(255, 255, 255, 0.30) 48%,
    rgba(245, 166, 35, 0.55) 52%,
    transparent 68%
  );
  transform: translateX(-130%);
  transition: transform .62s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn--primary::after {
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn--outline:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }

/* --- カード：ゴールドの縁が上下に走る＋浮き上がる --- */
.card::before,
.card::after,
.job::before,
.job::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background: var(--accent);
  pointer-events: none;
  transition: width .5s var(--ease);
  z-index: 1;
}
.card::before, .job::before { left: -1px; top: -1px; }
.card::after,  .job::after  { right: -1px; bottom: -1px; }
.card:hover::before, .card:hover::after,
.job:hover::before,  .job:hover::after { width: calc(100% + 2px); }
.card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.job:hover  { transform: translateY(-3px); }

/* --- モード切替のワイプ --- */
.mode-wipe {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.mode-wipe.is-on { visibility: visible; }
.mode-wipe span {
  position: absolute;
  top: 0; bottom: 0;
  left: -46vw;
  width: 42vw;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 166, 35, 0.06) 38%,
    var(--accent) 50%,
    rgba(245, 166, 35, 0.06) 62%,
    transparent 100%
  );
  box-shadow: 0 0 90px rgba(245, 166, 35, 0.45);
}
.mode-wipe.is-on span { animation: mode-wipe .72s var(--ease) forwards; }
@keyframes mode-wipe {
  from { left: -46vw; }
  to   { left: 100vw; }
}

/* --- ピックアップ求人（トップページ） --- */
.picks { overflow: hidden; transition: opacity .22s var(--ease); }
.picks.is-swapping { opacity: 0; }
.picks__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  animation: picks-flow 34s linear infinite;
}
.picks__track > .job {
  width: 78vw;
  max-width: 330px;
  flex: none;
  animation: none;        /* 流れる側でアニメーションするので個別演出は止める */
  opacity: 1;
  transform: none;
}
.picks:hover .picks__track,
.picks:focus-within .picks__track { animation-play-state: paused; }

/* 左から右へ流す（後半は複製なので、途切れずに繋がる） */
@keyframes picks-flow {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (min-width: 900px) {
  .picks { overflow: visible; }
  .picks__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    animation: none;
  }
  .picks__track > .job { width: auto; max-width: none; }
  .picks__track > .job:nth-child(n+4) { display: none; }  /* 複製分は隠す */
}

/* --- 375px 以下での詰め（はみ出し防止） --- */
@media (max-width: 400px) {
  .job { padding-inline: 14px; }
  .job__title { overflow-wrap: anywhere; }
  .badge-open { font-size: 9px; padding: 5px 8px; letter-spacing: 0.06em; }
  .disclose__cell { padding: 10px 7px; }
  .disclose__key { font-size: 8.5px; letter-spacing: 0.08em; }
  .disclose__sub { font-size: 9px; }
  .sim__metric { padding: 12px 8px; }
  .sim__metric dt { font-size: 9px; letter-spacing: 0.08em; }
  .job__fact b { min-width: 72px; }
  .confirm__val { overflow-wrap: anywhere; }
  .audit__seal { width: 46px; height: 46px; font-size: 8px; }
  .stepper__num { width: 28px; height: 28px; }
}

/* --- ページトップへ戻るボタン（全ページ共通・スクロールで出現） --- */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s, background-color .25s var(--ease), color .25s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--gold-ink); }
.to-top__arrow {
  width: 10px; height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
.to-top__label {
  font-family: var(--font-num);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
/* 下部に固定バーがあるページでは、その上に置く */
body:has(.apply-bar) .to-top { bottom: 84px; }

/* --- フローティングCTA（求人一覧など、本文にCTAがないページ用） --- */
.fab-cta {
  position: fixed;
  left: 16px;
  right: 84px;
  bottom: 16px;
  z-index: 44;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--gold-ink);
  border: 1px solid var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 26px rgba(245, 166, 35, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s, background-color .25s var(--ease);
}
.fab-cta.is-shown { opacity: 1; visibility: visible; transform: none; }
.fab-cta:hover { background: #ffffff; border-color: #ffffff; }
.fab-cta__sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: .72;
}
@media (min-width: 768px) {
  .fab-cta {
    left: auto;
    right: 96px;
    bottom: 24px;
    min-height: 58px;
    padding: 0 28px;
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  .to-top { right: 24px; bottom: 24px; width: 58px; height: 58px; }
}

/* --- モバイルのタップ領域（〜1023px） --- */
@media (max-width: 1023px) {
  .footer-col__link,
  .crumb a,
  .link-arrow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col__list > li + li { margin-top: 2px; }
  .site-footer__bottom .note { min-height: 32px; display: flex; align-items: center; }
}

/* ==========================================================================
   17. prefers-reduced-motion — すべてのアニメーションを無効化
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-stagger > *,
  .mobile-menu .mobile-menu__item,
  .step {
    opacity: 1 !important;
    transform: none !important;
  }

  .step__badge {
    background: var(--accent) !important;
    color: var(--gold-ink) !important;
    border-color: var(--accent) !important;
  }

  .loader { display: none !important; }

  .job { opacity: 1 !important; transform: none !important; animation: none !important; }
  .jobs.is-swapping { opacity: 1 !important; }

  /* ページ遷移・光沢・縁走り・ワイプもすべて止める */
  body { animation: none !important; opacity: 1 !important; }
  html.is-leaving body { opacity: 1 !important; }
  .btn::after { display: none !important; }
  .btn:hover, .btn:active, .card:hover, .job:hover { transform: none !important; }
  .card::before, .card::after, .job::before, .job::after { display: none !important; }
  .mode-wipe { display: none !important; }

  /* 流れるピックアップは止めて、横スクロールで見せる */
  .picks { overflow-x: auto !important; }
  .picks__track { animation: none !important; transform: none !important; }
  .picks__track > .job:nth-child(n+4) { display: none !important; }
  .tabpanel.is-active { animation: none !important; }
  .done__mark { animation: none !important; }

  .hero__rays::before,
  .hero__rays::after,
  .hero__glow,
  .hero__scroll::after { animation: none !important; }
}

/* ==========================================================================
   18. 大幅改定分（1ページ構成 / 代理店募集）
   ========================================================================== */

/* 少しだけ小さいヒーロー見出し（PRO の長いコピー用） */
.h-hero-sm {
  font-size: clamp(27px, 7.2vw, 62px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 800;
}

/* 声（VOICE）のカード */
.quote {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text);
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.voice__meta { display: flex; flex-wrap: wrap; gap: 6px; }



/* ==========================================================================
   19. 報酬シミュレーター（役割 × 本数版）
   ========================================================================== */

/* 「報酬例です」の強い注記 */
.sim__caution {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-mid);
}
.sim__caution b { color: var(--text); }
.sim__caution-badge {
  flex: none;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  background: var(--accent);
  color: var(--gold-ink);
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.ctrl__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* 内訳 */
.sim__breakdown {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.sim__brow {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-mid);
}
.sim__brow span:last-child {
  font-family: var(--font-num);
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sim__brow .minus { color: var(--text-dim); }

/* 次の段階まで */
.sim__next {
  margin-top: var(--sp-4);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* 歩合率の段階 */
.sim__tiers-wrap {
  border-top: 1px solid var(--line);
  padding: calc(var(--sp-5) * var(--density)) 20px;
}
.sim__tiers {
  display: grid;
  gap: 6px;
  margin-top: var(--sp-3);
}
.tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.tier__range { font-size: 12px; color: var(--text-mid); }
.tier__rate {
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}
.tier__rate small { font-size: 10px; margin-left: 1px; }
.tier.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tier.is-on .tier__range { color: var(--text); }
.tier.is-on .tier__rate { color: var(--accent); }

@media (min-width: 640px) {
  .sim__tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .sim__tiers-wrap { padding-inline: 32px; }
  .sim__tiers { grid-template-columns: repeat(3, 1fr); }
}

/* 参考値であることを示す小さなタグ */
.sim__ref {
  display: inline-block;
  margin-left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px solid var(--line-strong);
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: 1px;
}

/* 応募条件などを目立たせる小さな帯 */
.req-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.req-badge__label {
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  background: var(--accent);
  color: var(--gold-ink);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.req-badge b { color: var(--accent); font-weight: 800; }
@media (max-width: 420px) {
  .req-badge { font-size: 12px; padding-right: 14px; gap: 9px; }
}

/* ------------------------------------------------------------------
   ELITE — 経験者からよく聞く声（.pains）
   ------------------------------------------------------------------ */
.pains {
  margin-top: calc(var(--sp-7) * var(--density));
  border-top: 1px solid var(--line);
}
.pains__item {
  position: relative;
  padding: calc(var(--sp-7) * var(--density)) 0 calc(var(--sp-6) * var(--density));
  border-bottom: 1px solid var(--line);
}
.pains__num {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}
.pains__voice {
  margin: 0;
  font-weight: 800;
  font-size: clamp(20px, 5vw, 34px);
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--text);
  text-indent: -0.32em;
  padding-left: 0.32em;
}
.pains__mark {
  color: var(--accent);
  font-family: var(--font-num);
  font-size: 1.15em;
  line-height: 0;
  margin-right: .04em;
}
.pains__ans {
  margin-top: calc(var(--sp-5) * var(--density));
  padding: var(--sp-5);
  background: var(--panel);
  border-left: 2px solid var(--accent);
}
.pains__ans-label {
  margin: 0 0 var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--accent);
}
.pains__ans-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-mid);
}

@media (min-width: 768px) {
  .pains__item { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
  .pains__num { grid-column: 1 / -1; }
  .pains__ans { margin-top: 6px; }
}

/* ------------------------------------------------------------------
   アイコン
   ------------------------------------------------------------------ */
.ic { display: block; width: 26px; height: 26px; color: var(--accent); }
.ic-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
}
.ic-box--sm { width: 40px; height: 40px; }
.ic-box--sm .ic { width: 20px; height: 20px; }
.card .ic-box { margin-bottom: var(--sp-4); }

/* ------------------------------------------------------------------
   図：取り分の内訳（.split）
   ------------------------------------------------------------------ */
.fig {
  margin-top: calc(var(--sp-5) * var(--density));
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.fig__cap {
  margin: 0 0 var(--sp-4);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--text-dim);
}
.split__row + .split__row { margin-top: var(--sp-5); }
.split__label {
  margin: 0 0 var(--sp-2);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-mid);
}
.split__bar { display: flex; height: 46px; border: 1px solid var(--line); }
.split__seg {
  flex: 0 0 var(--w);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  overflow: hidden; white-space: nowrap;
  border-right: 1px solid rgba(0,0,0,.45);
}
.split__seg:last-child { border-right: 0; }
.split__seg--mid {
  color: var(--text-dim);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px),
    var(--surface-2);
}
.split__seg--you { color: var(--gold-ink); background: var(--accent); }
.split__seg--add {
  color: rgba(255, 255, 255, .88);
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.18) 0 5px, transparent 5px 10px),
    var(--gold-deep);
}
.split__seg--you b { font-weight: 800; }

/* ------------------------------------------------------------------
   図：組織の中と、ひとりで動く形（.orgfig）
   ------------------------------------------------------------------ */
.orgfig { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .orgfig { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.orgfig__title {
  margin: 0 0 var(--sp-3);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--text-mid);
}
.orgfig__stack { display: grid; gap: 18px; position: relative; }
.orgfig__node {
  display: block; padding: 10px 12px; text-align: center;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-mid);
  position: relative;
}
.orgfig__node + .orgfig__node::before {
  content: ''; position: absolute; left: 50%; top: -18px;
  width: 1px; height: 18px; background: var(--line-strong);
}
.orgfig__node--you {
  border-color: var(--accent); color: var(--gold-ink); background: var(--accent);
}
.orgfig__stack--flat { align-content: start; }
.orgfig__note { margin: var(--sp-3) 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.8; }

/* ------------------------------------------------------------------
   図：固定給と歩合の組み方（.mix）
   ------------------------------------------------------------------ */
.mix__row + .mix__row { margin-top: var(--sp-4); }
.mix__label { margin: 0 0 var(--sp-2); font-size: 12px; font-weight: 700; color: var(--text-mid); }
.mix__bar { display: flex; height: 38px; border: 1px solid var(--line); }
.mix__fix, .mix__var {
  flex: 0 0 var(--w);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  overflow: hidden; white-space: nowrap;
}
.mix__fix { background: var(--accent); color: var(--gold-ink); }
.mix__var {
  color: var(--text-mid);
  background: repeating-linear-gradient(135deg, rgba(245,166,35,.18) 0 6px, transparent 6px 12px), var(--surface-2);
  border-left: 1px solid var(--line);
}

/* ------------------------------------------------------------------
   数値バンド（.figures）
   ------------------------------------------------------------------ */
.figures {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: calc(var(--sp-6) * var(--density));
}
.figures__item { background: var(--bg); padding: var(--sp-5) var(--sp-4); text-align: center; }
.figures__num {
  margin: 0; font-family: var(--font-num); font-weight: 800; color: var(--accent);
  font-size: clamp(28px, 7vw, 40px); line-height: 1.1; letter-spacing: .01em;
}
.figures__num small { font-size: .45em; margin-left: 2px; letter-spacing: .06em; }
.figures__label { margin: var(--sp-3) 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.7; }

/* ------------------------------------------------------------------
   声カードの人物プレースホルダー
   ------------------------------------------------------------------ */
.voice__id { display: flex; align-items: center; gap: var(--sp-4); }
.voice__face {
  flex: 0 0 auto; width: 52px; height: 52px;
  border: 1px solid var(--accent-line); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.voice__face .ic { width: 24px; height: 24px; }

/* ステップにアイコンを添える */
.step__ic { display: inline-flex; margin-bottom: var(--sp-3); color: var(--accent); }

/* フローの左右の余白をそろえる（本文が右側だけ空いて見えないようにする）。
   見出しも同じ幅にそろえるので、セクション全体が中央に収まる。 */
.steps,
#flow .section__head,
#flow-elite .section__head,
#flow-pro .section__head,
#flow .figures,
#flow-elite .figures,
#flow-pro .figures { max-width: 900px; margin-inline: auto; }
#flow .figures,
#flow-elite .figures,
#flow-pro .figures { margin-top: calc(var(--sp-7) * var(--density)); }

/* ------------------------------------------------------------------
   送信完了ページ（thanks）
   ------------------------------------------------------------------ */
.thanks { padding-block: calc(var(--sp-9) * var(--density)) calc(var(--sp-8) * var(--density)); }
.thanks__inner {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
.thanks__inner .done__mark { margin-bottom: var(--sp-6); }
.thanks__title { margin-top: var(--sp-3); }
.thanks__lead {
  margin-top: var(--sp-5);
  margin-inline: auto;
  max-width: 62ch;
}
.thanks__next {
  margin-top: calc(var(--sp-8) * var(--density));
  padding-top: calc(var(--sp-6) * var(--density));
  border-top: 1px solid var(--line);
}
.thanks__next-label {
  margin: 0 0 var(--sp-5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--text-dim);
}
.thanks__next .card { text-align: left; }
.thanks__next .card__title { margin-top: var(--sp-3); }
.thanks__actions {
  margin-top: calc(var(--sp-7) * var(--density));
  justify-content: center;
}

/* 取り分グラフの凡例 */
.split__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
}
.split__legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}
.split__key { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--line-strong); }
.split__key--mid { background: var(--surface-2); }
.split__key--add { background: var(--gold-deep); border-color: var(--gold-deep); }
.split__key--you { background: var(--accent); border-color: var(--accent); }

/* ヒーロー見出しの前フリ（本題より一段小さく置く） */
.hero__pre {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: clamp(14px, 3.6vw, 22px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--text-mid);
}

/* ------------------------------------------------------------------
   図版・イラスト（.illus）
   ------------------------------------------------------------------ */
.illus {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background:
    radial-gradient(ellipse at 50% 110%, rgba(245,166,35,.10) 0%, transparent 62%),
    var(--bg-2);
  border: 1px solid var(--line);
}
.illus::after {
  /* 上辺だけゴールドの細線を入れて、他のカードと質感をそろえる */
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
}
.illus__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------
   SNS リンク（フッター）
   ------------------------------------------------------------------ */
.social { margin-top: calc(var(--sp-6) * var(--density)); }
.social__label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--text-dim);
}
.social__row { display: flex; gap: var(--sp-3); }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-mid);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.social__link:hover,
.social__link:focus-visible {
  color: var(--gold-ink);
  background: var(--accent);
  border-color: var(--accent);
}
.social__link .ic { width: 22px; height: 22px; color: currentColor; }

/* フッター内の小さなボタン（Cookie設定） */
.footer-mini {
  margin-left: var(--sp-4);
  padding: 6px 10px;
  min-height: 32px;
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}
.footer-mini:hover,
.footer-mini:focus-visible { color: var(--accent); border-color: var(--accent-line); }

/* ------------------------------------------------------------------
   Cookie 同意バナー
   ------------------------------------------------------------------ */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--bg-2);
  border-top: 1px solid var(--accent-line);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
  transform: translateY(110%);
  transition: transform .42s var(--ease);
}
.consent.is-shown { transform: translateY(0); }
.consent__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-5) 20px calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--sp-4);
}
.consent__title {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text);
}
.consent__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-mid);
}
.consent__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 auto; min-height: 44px; }

@media (min-width: 768px) {
  .consent__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-inline: 32px;
    gap: var(--sp-6);
  }
  .consent__actions { flex-wrap: nowrap; }
  .consent__actions .btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}