/* =====================================================================
   ヤメコヨミ 新LP 共通基盤（Stage 1 / 20）
   ソース根拠: lp_reference/MASTER_SOURCE_LEDGER.md
   - ベース暖白  : SmartHR #f8f7f6
   - CTA         : PROGRIT完全型 橙#f39800・円形無料バッジ・吹き出し労力ラベル・矢印
   - ダーク帯    : RIZAP型 黒×金 #B29540/#9C7B27
   - 見出し      : EN=Oswald + JP=Noto Serif JP（PROGRIT実測: 24→36px）
   - 本文        : Noto Sans JP / palt / letter-spacing .07em / #242424（PROGRIT実測）
   ===================================================================== */

:root {
  /* --- 色（複合パレット：段階ごとに最適を選ぶ） --- */
  --base:        #f8f7f6;   /* 暖白ベース（SmartHR） */
  --white:       #ffffff;
  --ink:         #242424;   /* 本文墨（PROGRIT） */
  --ink-soft:    #5c5a5a;   /* 補足文（Orbis/SmartHR系） */
  --line:        #dedfdf;   /* 罫線（Orbis実測） */
  --orange:      #f39800;   /* 行動色（PROGRIT primary） */
  --orange-deep: #d98800;   /* hover */
  --blue:        #0047ff;   /* 第二ボタン（PROGRIT secondary） */
  --black-band:  #131313;   /* ダーク帯（RIZAP #000〜#1a1a1a帯） */
  --gold:        #B29540;   /* 金・罫線/大数字（RIZAP） */
  --gold-deep:   #9C7B27;   /* 金・見出し文字（RIZAP） */
  --ok:          #2e7d4f;   /* 増える・安心 */
  --alert:       #c73e2e;   /* 減る・警告 */

  /* --- タイポ --- */
  --font-en:    "Oswald", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif;

  /* --- リズム（Orbis: 章間60-100px / max800px級） --- */
  --sect:   clamp(64px, 48px + 4vw, 104px);
  --inner:  1000px;
  --inner-n: 820px;

  --radius: 6px;
  --shadow: 0 0 5px 5px rgba(0,0,0,.05);        /* Orbis拡散影を弱めに */
  --shadow-btn: 0 8px 20px -8px rgba(243,152,0,.55);
  --dur: .3s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-behavior:smooth は一部Chrome環境でアンカー/JSスクロールを丸ごと無効化する
   （hashは変わるのに画面が動かない）ため使用禁止。滑らかさは lp.js の YKScroll(rAF) が担う */
#shindan, #result, #reason, #flow, #faq, #guide { scroll-margin-top: 76px; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "palt";
  letter-spacing: .07em;                         /* PROGRIT実測 */
  color: var(--ink);
  background: var(--base);
  font-size: 16px;
  line-height: 1.75;                             /* PROGRIT実測 */
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.inner   { max-width: var(--inner);   margin-inline: auto; padding-inline: 20px; }
.inner-n { max-width: var(--inner-n); margin-inline: auto; padding-inline: 20px; }

/* =====================================================================
   帯システム（横断DNA⑤: 白基調＋ダーク1＋ブランド強調帯）
   ===================================================================== */
.band       { padding-block: var(--sect); }
.band-white { background: var(--white); }
.band-warm  { background: var(--base); }
.band-black {                                    /* RIZAP黒×金 */
  background: radial-gradient(900px 340px at 82% -10%, #2a2a2a 0%, transparent 60%), var(--black-band);
  color: #f5f2ea;
}
.band-black .gold { color: var(--gold); }
.band-orange {                                   /* 締めCTA帯（PROGRIT行動色ソリッド） */
  background: linear-gradient(135deg, #f5a623 0%, var(--orange) 55%, #e88a00 100%);
  color: #fff;
}

/* =====================================================================
   章見出し（PROGRIT: EN Oswald＋橙丸ドット → JP 明朝 24→36px）
   ===================================================================== */
.stitle { display: grid; gap: 6px; }
.stitle-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(12px, 10px + .5vw, 16px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-left: 16px;
  line-height: 1;
}
.stitle-en::before {                             /* PROGRIT実測: 橙丸 6-8px */
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange); translate: 0 -50%;
}
.stitle-jp {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(24px, 18px + 2vw, 36px);      /* PROGRIT実測 */
  line-height: 1.42;
  letter-spacing: .09em;
}
.stitle--center { text-align: center; }
.stitle--center .stitle-en { padding-left: 0; }
.stitle--center .stitle-en::before { position: static; display: inline-block; translate: 0 -2px; margin-right: 8px; }
.band-black .stitle-en { color: #cfc6ae; }
.band-black .stitle-en::before { background: var(--gold); }

/* =====================================================================
   CTAボタン（PROGRIT完全型）
   構造: [円形 無料バッジ] + [吹き出し労力ラベル + 本文] + [矢印円]
   ===================================================================== */
.cta {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: min(100%, 480px);
  min-height: 64px;
  margin-inline: auto;
  padding: 10px 48px 12px 72px;
  background: var(--orange);
  color: #fff; text-decoration: none;
  border: 0; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform var(--dur), background var(--dur);
}
.cta:hover { transform: translateY(-2px); background: var(--orange-deep); }
.cta:active { transform: translateY(0); }

.cta-free {                                      /* 円形「無料」バッジ（PROGRIT: left 8-12px / w 44-64px） */
  position: absolute; left: 10px; top: 50%; translate: 0 -50%;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--orange);
  display: grid; place-items: center;
  font-weight: 900; font-size: 16px; letter-spacing: .05em;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.cta-group { display: grid; justify-items: center; gap: 2px; }
.cta-appeal {                                    /* 吹き出し労力ラベル（ハの字線 ±30deg = PROGRIT実測） */
  display: flex; align-items: baseline; column-gap: 3px;
  font-size: 12px; line-height: 1; font-weight: 700;
}
.cta-appeal strong { font-size: 19px; font-family: var(--font-en); }
.cta-appeal em     { font-style: normal; font-size: 15px; }
.cta-appeal::before, .cta-appeal::after {
  content: ""; display: inline-block; width: 1px; height: 14px; background: #fff;
}
.cta-appeal::before { margin-right: 6px; rotate: -30deg; }
.cta-appeal::after  { margin-left: 6px;  rotate: 30deg; }
.cta-text { font-size: 17px; line-height: 1.3; }

.cta-arrow {                                     /* 矢印円（PROGRIT: 円+シェブロン, hover +4px） */
  position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  transition: translate .4s;
}
.cta-arrow::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-right: 2px solid var(--orange); border-top: 2px solid var(--orange);
  rotate: 45deg; translate: calc(-50% - 1px) -50%;
}
.cta:hover .cta-arrow { translate: 4px -50%; }

/* 第二ボタン（PROGRIT secondary: 青 #0047ff / 白枠） */
.cta--blue { background: var(--blue); border: 1px solid #fff; box-shadow: 0 8px 20px -8px rgba(0,71,255,.45); }
.cta--blue:hover { background: #0038cc; }
.cta--blue .cta-free { color: var(--blue); }
.cta--blue .cta-arrow::after { border-color: var(--blue); }

/* ゴーストボタン（RIZAP secondary-button: 枠線型） */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 36px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background var(--dur), color var(--dur);
}
.btn-ghost:hover { background: var(--ink); color: #fff; }
.band-black .btn-ghost { color: #f5f2ea; border-color: #f5f2ea99; }
.band-black .btn-ghost:hover { background: #f5f2ea; color: var(--black-band); }

/* CTA直下の不安除去（RIZAP「※無理な勧誘は一切ございません」型） */
.cta-note {
  margin-top: 10px; text-align: center;
  font-size: 12px; color: var(--ink-soft); letter-spacing: .04em;
}
.band-orange .cta-note, .band-black .cta-note { color: #ffffffcc; }

/* =====================================================================
   汎用部品
   ===================================================================== */
/* マーカー強調（SmartHR high-light / Orbisマーカーの橙翻訳） */
.hl { background: linear-gradient(transparent 62%, rgba(243,152,0,.30) 62%); font-weight: 700; }
.band-black .hl { background: linear-gradient(transparent 62%, rgba(178,149,64,.45) 62%); }

/* 大数字（RIZAP黒帯の金数字） */
.num-xl {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(40px, 28px + 4.5vw, 72px); line-height: 1.15;
  letter-spacing: .02em;
}
.num-xl small { font-size: .42em; }
.num-xl .en { font-family: var(--font-en); font-weight: 600; letter-spacing: 0; }

/* ※注（横断DNA②: 数字の直後に必ず※注＋出典） */
.asterisk {
  font-size: 12px; line-height: 1.7; color: var(--ink-soft);
  text-align: left;
}
.asterisk a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.band-black .asterisk { color: #bdb8a8; }

/* ピルバッジ（Orbis incentive radius40 → 橙/金） */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 999px;
  background: var(--orange); color: #fff;
}
.pill--line { background: #fff; color: var(--orange); border: 1px solid var(--orange); }
.pill--gold { background: var(--gold); color: #fff; }

/* カード */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 罫線見出しの金アクセント（RIZAP border-l gold） */
.gold-edge { border-left: 3px solid var(--gold); padding-left: 10px; }

/* 章タイトル下の導入文 */
.lead { color: var(--ink-soft); font-size: 15px; }

/* reveal（scroll出現・reduced-motion対応） */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Stage 2: ヘッダー＋追従CTA
   ソース: PROGRIT l-header/c-gnav/c-floating（常設CTA・右下追従）
           SmartHR skip-link(a11y) ／ ロゴ=朱判子（印鑑の朱肉色）
   ===================================================================== */
:root {
  --hanko:      #d3492a;   /* 朱肉（新パレット調和・退職届プレビューの#c43a26系統） */
  --line-green: #06c755;   /* LINE公式色 */
  --header-h:   64px;
}

.skip-link {                                     /* SmartHR a11y */
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; font-size: 13px;
  padding: 10px 16px; border-radius: 0 0 6px 6px; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

.lp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.lp-header-inner {
  max-width: 1120px; margin-inline: auto;
  height: var(--header-h);
  padding-inline: 16px;
  display: flex; align-items: center; gap: 18px;
}

/* ロゴ＝朱判子＋明朝サイト名 */
.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.lp-logo-hanko {
  width: 44px; height: 44px; flex: none;
  border: 2.5px solid var(--hanko); border-radius: 50%;
  color: var(--hanko);
  font-family: var(--font-serif); font-weight: 700;
  font-size: 12.5px; line-height: 1.15; letter-spacing: .05em;
  display: grid; place-items: center; text-align: center;
  rotate: -6deg;
  user-select: none;
}
.lp-logo-name { font-family: var(--font-serif); font-weight: 700; font-size: 19px; letter-spacing: .14em; line-height: 1.2; }
.lp-logo-tag  { font-size: 10px; color: var(--ink-soft); letter-spacing: .06em; }

/* ナビ（ハイブリッド: アンカー＋収益ページ。PCのみ表示） */
.lp-gnav { display: none; margin-left: auto; }
@media (min-width: 1000px) {
  .lp-gnav { display: flex; align-items: center; gap: 2px; }
}
.lp-gnav a {
  position: relative;
  font-size: 13.5px; font-weight: 500; letter-spacing: .05em;
  color: var(--ink); text-decoration: none;
  padding: 8px 12px;
}
.lp-gnav a::after {                              /* hover: 橙ドット（PROGRIT章ドットの流用） */
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange); translate: -50% 0; scale: 0;
  transition: scale var(--dur);
}
.lp-gnav a:hover::after { scale: 1; }

/* ヘッダー常設CTA（PROGRITのコンパクト版） */
.cta--sm {
  width: auto; min-height: 44px; margin-inline: 0;
  padding: 6px 34px 8px 54px;
  box-shadow: 0 4px 12px -4px rgba(243,152,0,.5);
}
.cta--sm .cta-free { width: 38px; height: 38px; font-size: 12px; left: 8px; }
.cta--sm .cta-appeal { font-size: 10px; }
.cta--sm .cta-appeal strong { font-size: 14px; }
.cta--sm .cta-appeal em { font-size: 11px; }
.cta--sm .cta-text { font-size: 13.5px; }
.cta--sm .cta-arrow { width: 18px; height: 18px; right: 10px; }
.lp-header .cta--sm { margin-left: auto; }
@media (min-width: 1000px) { .lp-header .cta--sm { margin-left: 12px; } }

/* SP圧縮（397px幅で22pxはみ出し→解消。タグ行と吹き出しはSPでは畳む） */
@media (max-width: 759px) {
  .lp-header-inner { gap: 10px; padding-inline: 12px; }
  .lp-logo { gap: 8px; }
  .lp-logo-hanko { width: 40px; height: 40px; font-size: 11.5px; }
  .lp-logo-name { font-size: 16.5px; letter-spacing: .08em; }
  .lp-logo-tag { display: none; }
  .lp-header .cta--sm { padding: 8px 16px 8px 44px; min-height: 40px; }
  .lp-header .cta--sm .cta-free { width: 30px; height: 30px; font-size: 10.5px; left: 7px; }
  .lp-header .cta--sm .cta-appeal { display: none; }
  .lp-header .cta--sm .cta-text { font-size: 12.5px; }
  .lp-header .cta--sm .cta-arrow { display: none; }
}

/* --- 追従CTA（確定: SP下部バー2本＋PC右下1本） --- */
/* 共通: .js-float は lp.js がスクロール480px超で .show を付与 */
.float-hidden { opacity: 0; pointer-events: none; translate: 0 12px; transition: opacity var(--dur), translate var(--dur); }
.float-hidden.show { opacity: 1; pointer-events: auto; translate: 0 0; }

/* PC: 右下1本（PROGRIT c-floating型） */
.lp-float-pc { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: none; }
@media (min-width: 760px) { .lp-float-pc { display: block; } }
.lp-float-pc .cta { width: 340px; box-shadow: 0 14px 34px -10px rgba(0,0,0,.35); }

/* SP: 下部固定バー2本（診断=橙 主 ／ LINE=緑 副） */
.lp-float-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .lp-float-bar { display: none; } }
.fbar-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 54px; border-radius: var(--radius);
  color: #fff; text-decoration: none; text-align: center;
  font-weight: 700; line-height: 1.25;
}
.fbar-btn small { font-size: 10px; font-weight: 700; opacity: .95; }
.fbar-btn span  { font-size: 14.5px; }
.fbar-diag { flex: 1.4; background: var(--orange); box-shadow: 0 6px 16px -6px rgba(243,152,0,.6); }
.fbar-diag:active { background: var(--orange-deep); }
.fbar-line { background: var(--line-green); box-shadow: 0 6px 16px -6px rgba(6,199,85,.5); }
/* バーに隠れないよう本文最下部へ余白（結合時は body に付与） */
.has-fbar { padding-bottom: 84px; }
@media (min-width: 760px) { .has-fbar { padding-bottom: 0; } }

/* =====================================================================
   Stage 3: FV（ファーストビュー）
   ソース: Orbis mainvisual（問いかけ→何がわかる→報酬マーカー→CTA1個）
         × SmartHR FV（肩コピー＋イラスト2カラム）
         × RIZAP FV（断定コピー＋直下※エビデンス注）
   ===================================================================== */
.fv {
  position: relative;
  background:
    radial-gradient(720px 420px at 88% -8%, rgba(243,152,0,.10) 0%, transparent 62%),
    radial-gradient(560px 380px at -6% 110%, rgba(178,149,64,.10) 0%, transparent 58%),
    var(--base);
  padding: clamp(28px, 20px + 3vw, 64px) 0 clamp(28px, 22px + 2vw, 48px);
  border-bottom: 1px solid var(--line);
}
.fv-inner {
  max-width: 1080px; margin-inline: auto; padding-inline: 20px;
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 900px) { .fv-inner { grid-template-columns: 1.06fr .94fr; gap: 36px; } }

/* 問いかけ肩ラベル（オルビス「どれくらい知ってますか？」の型） */
.fv-shoulder {
  font-weight: 700; font-size: clamp(14px, 12px + .6vw, 17px);
  letter-spacing: .06em; margin-bottom: 10px;
}
.fv-shoulder .q { background: linear-gradient(transparent 64%, rgba(243,152,0,.35) 64%); }

/* 断定型メイン見出し */
.fv-title {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(27px, 20px + 3vw, 46px);
  line-height: 1.42; letter-spacing: .03em;
}
.fv-title em { font-style: normal; color: var(--orange-deep); }
.fv-title .u { background: linear-gradient(transparent 66%, rgba(243,152,0,.28) 66%); }

/* 何がわかるか（オルビス3行→チェック式） */
.fv-points { list-style: none; margin-top: 18px; display: grid; gap: 8px; }
.fv-points li {
  position: relative; padding-left: 26px;
  font-size: clamp(13.5px, 12px + .5vw, 15.5px); font-weight: 500;
}
.fv-points li::before {
  content: ""; position: absolute; left: 0; top: .32em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--orange);
}
.fv-points li::after {
  content: ""; position: absolute; left: 4.5px; top: .32em; margin-top: 3.5px;
  width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  rotate: -45deg;
}

/* 報酬行（オルビス body-main マーカー） */
.fv-reward { margin-top: 14px; font-size: clamp(14px, 13px + .4vw, 16.5px); font-weight: 700; }

/* CTAゾーン（診断1本＋LINE副リンク） */
.fv-cta { margin-top: 20px; }
.fv-cta .cta { margin-inline: 0; }
.fv-cta .cta-note { text-align: left; }
.fv-sub { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.fv-sub a { color: var(--line-green); font-weight: 700; text-decoration: none; }
.fv-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* FV直下エビデンス注（RIZAP ※1※2 の型） */
.fv-evidence { max-width: 1080px; margin: 18px auto 0; padding-inline: 20px; }

/* ビジュアル（結果カードSVG＋差額バッジ） */
.fv-visual { position: relative; max-width: 500px; margin-inline: auto; width: 100%; }
.fv-visual svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(36,36,36,.16)); }
.fv-badge {
  position: absolute; top: -10px; left: -6px; z-index: 2;
  background: var(--orange); color: #fff;
  font-family: var(--font-serif); font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 10px; rotate: -4deg;
  box-shadow: 0 10px 22px -6px rgba(243,152,0,.55);
  white-space: nowrap;
}
.fv-badge b { font-size: 19px; font-family: var(--font-en); letter-spacing: .01em; }
.fv-badge small { font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .fv-visual { animation: fvFloat 7s ease-in-out infinite alternate; }
  @keyframes fvFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }
}

/* =====================================================================
   Stage 4: 信頼数字帯（SmartHR top-number-one の翻訳：事実のみ＋※出典リンク）
   ===================================================================== */
.stats { border-bottom: 1px solid var(--line); }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 26px;
}
@media (min-width: 860px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 14px 18px; text-align: center;
  box-shadow: var(--shadow);
}
.stat-num {
  font-family: var(--font-en); font-weight: 600;
  font-size: clamp(34px, 26px + 2.4vw, 52px); line-height: 1;
  color: var(--gold-deep); letter-spacing: .01em;
}
.stat-num small { font-family: var(--font-serif); font-weight: 700; font-size: .38em; margin-left: 2px; }
.stat-label { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.stats-note { margin-top: 16px; }

/* =====================================================================
   Stage 5: 約束バンド（Orbis incentive「3つのお得なサービス」の翻訳・4約束）
   ===================================================================== */
.promise-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 26px;
}
@media (min-width: 860px) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise-item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px; text-align: center;
  box-shadow: var(--shadow);
}
.promise-check {
  width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%;
  background: rgba(243,152,0,.12); position: relative;
}
.promise-check::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 8px;
  border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange);
  translate: -50% -66%; rotate: -45deg;
}
.promise-item b {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: 15.5px; letter-spacing: .04em;
}
.promise-item small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.65; color: var(--ink-soft); }

/* =====================================================================
   Stage 6: 悩み共感（王道「こんなお悩みありませんか」＝5セグメント網羅）
   RIZAP FAQ心理（不安の言語化→先回り）×定番チェックリスト型
   ===================================================================== */
.pain-list { list-style: none; max-width: 660px; margin: 26px auto 0; display: grid; gap: 10px; }
.pain-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--base); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px;
}
.pain-box {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  border: 2px solid #c9c5bd; border-radius: 4px; background: #fff;
  position: relative;
}
.pain-box::after {                               /* 悩み＝オレンジのチェックで「あるある」を可視化 */
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  rotate: -45deg;
}
.pain-item b { font-family: var(--font-serif); font-size: 15.5px; letter-spacing: .03em; }
.pain-item span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

/* 転換ゾーン（悩み→解決の折り返し） */
.pain-turn { margin-top: 30px; text-align: center; }
.pain-turn-arrow {
  width: 0; height: 0; margin: 0 auto 14px;
  border-left: 26px solid transparent; border-right: 26px solid transparent;
  border-top: 18px solid var(--orange);
}
.pain-turn-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(19px, 16px + 1.4vw, 26px); line-height: 1.6; letter-spacing: .05em;
}
.pain-turn-sub { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }

/* =====================================================================
   Stage 7: 選ばれる理由（PROGRIT p-about：番号01-03＋em強調タイトル＋図版＋本文＋※注）
   ===================================================================== */
.reasons-list { margin-top: 34px; display: grid; gap: clamp(36px, 28px + 2vw, 56px); }
.reason-item { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) {
  .reason-item { grid-template-columns: 360px 1fr; gap: 36px; }
  .reason-item:nth-child(even) { grid-template-columns: 1fr 360px; }
  .reason-item:nth-child(even) .reason-fig { order: 2; }
}
.reason-fig {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid; place-items: center; padding: 26px;
}
.reason-fig svg { width: min(200px, 56vw); height: auto; }
.reason-num {
  font-family: var(--font-en); font-weight: 600; font-size: 15px; letter-spacing: .18em;
  color: var(--orange);
  display: flex; align-items: center; gap: 10px;
}
.reason-num::after { content: ""; height: 1px; width: 56px; background: var(--gold); }
.reason-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(20px, 17px + 1.4vw, 27px); line-height: 1.5; letter-spacing: .04em;
  margin-top: 6px;
}
.reason-title em { font-style: normal; color: var(--orange-deep); }
.reason-text { margin-top: 12px; font-size: 15px; line-height: 1.95; }
.reason-text em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(transparent 66%, rgba(243,152,0,.22) 66%);
}
.reason-text + .asterisk { margin-top: 8px; }

/* =====================================================================
   Stage 8: 診断の流れ 3STEP（Orbis skincheck「流れ」：図版＋STEP.N＋一言）
   ＋下向きスクロールキュー（直下のウィザードへ接続）
   ===================================================================== */
.flow3-lead { text-align: center; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.flow3-grid { margin-top: 30px; display: grid; gap: 34px; }
@media (min-width: 860px) { .flow3-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.fstep { position: relative; text-align: center; }
.fstep-fig {
  width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--base); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.fstep-fig svg { width: 64px; height: 64px; }
.fstep-no { font-family: var(--font-en); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--orange); }
.fstep-title { font-family: var(--font-serif); font-weight: 700; font-size: 17.5px; letter-spacing: .04em; margin-top: 4px; line-height: 1.55; }
.fstep-text { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); text-align: left; }
/* コネクタ矢印：PC=右向き／SP=下向き（Orbisのステップ間接続の翻訳） */
.fstep:not(:last-child)::after {
  content: ""; position: absolute;
  left: 50%; bottom: -24px; translate: -50% 0;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  rotate: 45deg;
}
@media (min-width: 860px) {
  .fstep:not(:last-child)::after {
    left: auto; right: -16px; top: 52px; bottom: auto; translate: 0 0;
    rotate: -45deg;
  }
}

/* 下向きスクロールキュー（流れ→ウィザードの橋渡し） */
.flow3-cue { margin-top: 40px; text-align: center; }
.flow3-cue p { font-size: 14.5px; font-weight: 700; letter-spacing: .05em; }
.flow3-cue p b { color: var(--orange-deep); }
.cue-arrow {
  width: 16px; height: 16px; margin: 12px auto 0;
  border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange);
  rotate: -45deg;
}
@media (prefers-reduced-motion: no-preference) {
  .cue-arrow { animation: cueBounce 1.6s ease-in-out infinite; }
  @keyframes cueBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
}

/* =====================================================================
   Stage 9: 診断ウィザード（Orbis skincheck.js の一問一答を新デザインで移植）
   器＝白カード＋朱タブ「退職診断票」／進捗＝橙バー＋Oswald Q.n/N
   ===================================================================== */
.wz {
  position: relative;
  max-width: 760px; margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 34px -18px rgba(36,36,36,.22);
  padding: clamp(22px, 16px + 2.5vw, 40px);
}
.wz::before {                                    /* 朱タブ（事務書類×判子の継承） */
  content: "退 職 診 断 票";
  position: absolute; top: -13px; left: 22px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 12.5px; letter-spacing: .18em;
  background: var(--hanko); color: #fff;
  padding: 4px 14px; border-radius: 3px;
}

/* ヘッダー行：戻る／進捗／全部まとめて入力 */
.wz-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
.wz-back {
  flex: none;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 5px 14px; cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.wz-back:hover { border-color: var(--orange); color: var(--orange-deep); }
.wz-progress { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 10px; }
.wz-bar { flex: 1; height: 6px; border-radius: 999px; background: #eceae6; overflow: hidden; }
.wz-bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5a623, var(--orange));
  transition: width .4s ease;
}
.wz-count { flex: none; font-family: var(--font-en); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--ink); }
.wz-count small { font-size: 11px; color: var(--ink-soft); }
.wz-skip {
  flex: none;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.wz-skip:hover { color: var(--orange-deep); }

/* 数字チラ見せ（確定仕様：公表例ベース） */
.wz-hint {
  margin: 0 0 16px; padding: 10px 14px;
  background: rgba(243,152,0,.08);
  border-left: 3px solid var(--orange); border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.7;
}

/* 質問 */
.wz-kicker { text-align: center; font-size: 12px; letter-spacing: .22em; color: var(--ink-soft); font-family: var(--font-serif); }
.wz-q {
  text-align: center;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(19px, 16px + 1.4vw, 25px); line-height: 1.6; letter-spacing: .04em;
  margin: 6px 0 18px;
}
.wz-q em { font-style: normal; color: var(--orange-deep); }

/* 選択肢（タップカード） */
.wz-opts { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wz-opts.cols2 { grid-template-columns: 1fr 1fr; } }
.wz-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--base); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.wz-opt:hover { border-color: var(--orange); background: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(243,152,0,.5); }
.wz-opt.on { border-color: var(--orange); background: rgba(243,152,0,.08); box-shadow: inset 0 0 0 1px var(--orange); }
.wz-opt-ico { flex: none; width: 40px; height: 40px; }
.wz-opt-ico svg { width: 100%; height: 100%; display: block; }
.wz-opt b { display: block; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.45; letter-spacing: .02em; }
.wz-opt small { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; }

/* 数値ステップ（実入力は Stage 10 が接続） */
.wz-numbox {
  border: 1.5px dashed var(--line); border-radius: 10px;
  padding: 26px 18px; text-align: center; color: var(--ink-soft); font-size: 13.5px;
  background: var(--base);
}

/* 全部まとめて入力モード（確定仕様の逃げ道） */
.wz--all .wz-progress, .wz--all .wz-back { display: none; }
.wz--all .wz-step { border-top: 1px dashed var(--line); padding-top: 18px; margin-top: 18px; }
.wz--all .wz-step:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.wz--all .wz-q, .wz--all .wz-kicker { text-align: left; }
.wz--all .wz-q { font-size: 17px; margin-bottom: 12px; }

/* =====================================================================
   Stage 10: 数値ステップ（大きめ入力欄＋橙フォーカスリング）＋計算実行
   ===================================================================== */
.wz-numsub { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: -8px 0 18px; }
.wz-fields { display: grid; gap: 14px 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .wz-fields { grid-template-columns: 1fr 1fr; } }
.wz-field { display: block; }
.wz-field > b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; letter-spacing: .03em; }
.wz-field .hint { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.6; }
.wz-field input[type="date"],
.wz-field input[type="number"],
.wz-field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 12px 14px; min-height: 48px;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.wz-field input:focus-visible, .wz-field select:focus-visible {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,152,0,.22);
}
.wz-bonus { margin-top: 14px; }
.wz-adv { margin: 16px 0 4px; }
.wz-adv summary {
  cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--orange-deep);
}
.wz-adv summary::-webkit-details-marker { display: none; }
.wz-adv[open] summary { margin-bottom: 10px; }
.wz-check { display: grid; gap: 9px; }
.wz-check label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink); cursor: pointer; line-height: 1.6; }
.wz-check input { margin-top: 3px; accent-color: var(--orange); }
.wz-check .hint { display: block; font-size: 11px; color: var(--ink-soft); }

/* エラー表示（ui.js と同じ検証メッセージを表示） */
.wz-errors {
  margin: 14px 0 0; padding: 12px 16px;
  background: rgba(199,62,46,.08);
  border-left: 3px solid var(--alert); border-radius: 0 6px 6px 0;
  font-size: 13px; color: var(--alert); line-height: 1.7;
}

/* 実行ボタン（.cta 流用のフル幅版）＋デモ */
.wz-run { width: 100%; margin-top: 18px; }
.wz-demo {
  display: block; margin: 12px auto 0;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.wz-demo:hover { color: var(--orange-deep); }

/* 接続確認ボックス（開発用・Stage11-13で本結果画面に置換） */
.proof-box {
  max-width: 760px; margin: 26px auto 0;
  border: 1.5px dashed var(--gold); border-radius: 10px;
  background: #fffdf6; padding: 18px 20px;
  font-size: 13.5px; line-height: 1.9;
}
.proof-box .pb-label { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--gold-deep); }
.proof-box b { font-family: var(--font-serif); font-size: 16px; }
.proof-box .pb-money { color: var(--gold-deep); font-size: 18px; }

/* =====================================================================
   Stage 11: 結果ヒーロー（RIZAP大数字型：金深の総額＋損失二段＋緊急性）
   ===================================================================== */
.res-hero { text-align: center; padding-top: 8px; }
.res-kicker { font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .3em; color: var(--gold-deep); }
.res-date {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(26px, 20px + 2.6vw, 42px); line-height: 1.4; letter-spacing: .04em;
  margin-top: 6px;
}
.res-total-label { margin-top: 10px; font-size: 12px; letter-spacing: .18em; color: var(--ink-soft); }
.res-total {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(46px, 32px + 6vw, 84px); line-height: 1.15; letter-spacing: .01em;
  color: var(--gold-deep);
}
.res-loss { margin-top: 4px; font-size: 14px; color: var(--alert); }
.res-loss b { font-family: var(--font-serif); font-size: 17px; }
.res-meta { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }

/* 候補トグル（セグメントタブ：90日以内 ⇄ 12ヶ月最大） */
.cands2 {
  display: flex; gap: 4px; max-width: 620px; margin: 22px auto 0;
  background: var(--base); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.cands2 .cand-btn {
  flex: 1; border: none; background: none; cursor: pointer; font: inherit;
  padding: 9px 8px; border-radius: 999px; color: var(--ink-soft);
  transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.cands2 .cand-btn .cl { display: block; font-size: 10.5px; letter-spacing: .04em; }
.cands2 .cand-btn .cs { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 12.5px; margin-top: 1px; }
.cands2 .cand-btn.on {
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--orange), 0 2px 10px rgba(0,0,0,.07);
}
.cands2 .cand-btn.on .cl { color: var(--orange-deep); }

/* 直近の壁までの締切（本物のデータ緊急性） */
.wall-urgent2 {
  display: flex; align-items: center; gap: 12px;
  max-width: 660px; margin: 20px auto 0; padding: 12px 16px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.7; text-align: left;
}
.wall-urgent2.up   { background: rgba(46,125,79,.08);  border: 1px solid rgba(46,125,79,.35); }
.wall-urgent2.down { background: rgba(199,62,46,.07);  border: 1px solid rgba(199,62,46,.35); }
.wall-urgent2 .wu-count {
  flex: none; font-family: var(--font-serif); font-weight: 700; font-size: 15px;
  padding: 6px 12px; border-radius: 8px; color: #fff; white-space: nowrap;
}
.wall-urgent2.up .wu-count   { background: var(--ok); }
.wall-urgent2.down .wu-count { background: var(--alert); }
.wall-urgent2 .wu-amt { font-family: var(--font-serif); font-weight: 700; }
.wall-urgent2.up .wu-amt   { color: var(--ok); }
.wall-urgent2.down .wu-amt { color: var(--alert); }

/* =====================================================================
   Stage 12: あなたへの最重要提案（出し分けCV＝白カード＋朱タブ＋橙枠）
   ===================================================================== */
.pcv {
  position: relative; max-width: 760px; margin: 36px auto 0;
  background: #fff; border: 2px solid var(--orange); border-radius: 12px;
  padding: 30px 22px 22px;
  box-shadow: 0 16px 38px -20px rgba(243,152,0,.45);
}
.pcv::before {
  content: "あなたへの最重要提案";
  position: absolute; top: -13px; left: 18px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 12.5px; letter-spacing: .12em;
  background: var(--hanko); color: #fff;
  padding: 4px 14px; border-radius: 3px;
}
.pcv-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(18px, 16px + 1vw, 23px); line-height: 1.55; letter-spacing: .03em; }
.pcv-lead { margin-top: 10px; font-size: 14px; line-height: 1.85; }
.pcv-amt { font-family: var(--font-serif); font-weight: 700; color: var(--gold-deep); font-size: 17px; }
.pcv .cta { width: 100%; margin-top: 14px; }
.pcv-reassure {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin-top: 10px; font-size: 11.5px; color: var(--ink-soft);
}
.pcv-reassure span::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.pcv-urgent { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.pcv-urgent strong { color: var(--orange-deep); }

/* 申込3ステップ（pcv内・「LINEに行った後に何をするか」の摩擦除去） */
.pcv-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 2px; font-size: 12px; }
.pcv-steps .ps {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--base); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-weight: 700;
}
.pcv-steps .ps b {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); color: #fff; font-size: 11px; font-family: var(--font-en); font-weight: 600;
}
.pcv-steps .ps-arr { color: var(--gold-deep); font-weight: 700; }
.pcv-copynote { margin-top: 8px; font-size: 12px; color: var(--ok); font-weight: 700; text-align: center; }

/* 比較表（自分でやる vs プロに任せる＝楽楽の自前比較表×RIZAP Before/After） */
.cmp { width: 100%; border-collapse: collapse; margin: 14px 0 2px; font-size: 13px; background: #fff; }
.cmp th, .cmp td { border: 1px solid var(--line); padding: 9px 10px; text-align: center; }
.cmp thead th { background: var(--ink); color: #fff; font-weight: 500; font-size: 12px; letter-spacing: .06em; }
.cmp tbody th { background: var(--base); font-weight: 700; width: 4.5em; }
.cmp .cmp-good { color: var(--orange-deep); font-weight: 700; background: rgba(243,152,0,.08); }

/* =====================================================================
   Stage 13: 証拠ゾーン（内訳・壁・チャート＋※出典リンク＝SmartHR型）
   ===================================================================== */
.res-h {
  font-family: var(--font-serif); font-weight: 700; font-size: 18px; letter-spacing: .06em;
  margin: 48px 0 14px; padding-left: 12px;
  border-left: 4px solid var(--gold);
}
.res-h small { font-family: var(--font-sans); font-weight: 400; font-size: 11.5px; color: var(--ink-soft); margin-left: 8px; letter-spacing: .03em; }

.breakdown2 { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 13.5px; }
.breakdown2 th, .breakdown2 td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.breakdown2 td { text-align: right; font-family: var(--font-serif); font-weight: 700; white-space: nowrap; }
.breakdown2 tr.sum th, .breakdown2 tr.sum td { background: rgba(178,149,64,.10); font-size: 15px; }
.breakdown2 tr.sum td { color: var(--gold-deep); }
.breakdown2 tr.alt th, .breakdown2 tr.alt td { background: rgba(243,152,0,.06); border-top: 1px dashed var(--gold); }
.breakdown2 tr.alt td { color: var(--orange-deep); }
.breakdown2 .note { font-size: 11.5px; color: var(--ink-soft); font-weight: 400; line-height: 1.75; font-family: var(--font-sans); text-align: left; }
.qlink {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 400; letter-spacing: .06em;
  color: var(--orange-deep); border: 1px solid var(--orange-deep); border-radius: 999px;
  padding: 1px 9px; text-decoration: none;
}
.qlink:hover { background: var(--orange-deep); color: #fff; }
.cell-sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-soft); font-family: var(--font-sans); }

.walls2 { list-style: none; }
.walls2 li {
  display: grid; grid-template-columns: auto auto 1fr; gap: 4px 14px; align-items: baseline;
  padding: 12px 4px; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.walls2 li.none { grid-template-columns: 1fr; color: var(--ink-soft); }
.walls2 .wdate  { font-family: var(--font-serif); font-weight: 700; white-space: nowrap; }
.walls2 .wdelta { font-family: var(--font-serif); font-weight: 700; white-space: nowrap; }
.walls2 li.up .wdelta   { color: var(--ok); }
.walls2 li.down .wdelta { color: var(--alert); }
.walls2 .wreason { color: var(--ink-soft); font-size: 12px; grid-column: 1 / -1; }
@media (min-width: 640px) { .walls2 .wreason { grid-column: auto; } }

/* チャート（FV結果カードと同一言語：墨線・金ドット・緑/赤壁線） */
#chart svg { width: 100%; height: auto; display: block; }
.c-line { fill: none; stroke: #242424; stroke-width: 2.2; }
.c-grid { stroke: #e5e0d5; stroke-width: 1; }
.c-tick { font: 11px var(--font-sans); fill: #767676; text-anchor: middle; }
.c-wall-up   { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 3 3; }
.c-wall-down { stroke: var(--alert); stroke-width: 2; stroke-dasharray: 3 3; }
.c-dot { fill: var(--gold); stroke: #ffffff; stroke-width: 2.5; }
.chart-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.src-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.75; }
.src-note a { color: var(--orange-deep); }

/* 傷病手当金ルート比較（通常=白／傷病=金） */
.sick-cmp { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .sick-cmp { grid-template-columns: 1fr 1fr; } }
.route2 { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: #fff; }
.route2 h4 { font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); font-weight: 500; }
.route2 .big { font-family: var(--font-serif); font-weight: 700; font-size: 24px; margin: 4px 0 2px; }
.route2.alt { border-color: var(--gold); background: #fffdf6; }
.route2.alt .big { color: var(--gold-deep); }
.route2 p:last-child { font-size: 11.5px; color: var(--ink-soft); }
.sick-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.75; }

/* =====================================================================
   Stage 14: 実行プラン・次の一歩・PR枠・LINE帯（黒金）・保存共有
   ===================================================================== */
/* 実行プラン（縦タイムライン・plan.js接続） */
.plan2 { list-style: none; position: relative; padding-left: 18px; }
.plan2::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.plan2 .cat {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .12em;
  font-size: 13px; color: var(--orange-deep);
  margin: 20px 0 4px; position: relative;
}
.plan2 .cat::before {
  content: ""; position: absolute; left: -18px; top: 8px;
  width: 7px; height: 7px; background: var(--orange); border-radius: 50%;
}
.plan2 .task { padding: 9px 0; display: grid; gap: 2px; border-bottom: 1px dashed var(--line); }
.plan2 .tdate { font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; }
.plan2 .ttitle { font-weight: 700; font-size: 14px; }
.plan2 .tdesc { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }

/* 次の一歩（属性別3枚） */
.nx-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 4px; }
@media (min-width: 720px) { .nx-grid { grid-template-columns: repeat(3, 1fr); } }
.nx-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 18px;
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.nx-card:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(243,152,0,.5); }
.nx-kicker { font-family: var(--font-serif); font-size: 11px; letter-spacing: .16em; color: var(--orange-deep); }
.nx-card h4 { font-family: var(--font-serif); font-size: 15px; margin: 5px 0 6px; line-height: 1.55; }
.nx-card p { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }

/* PR枠（アフィ・金点線＝正直なPR明示） */
.aff2 {
  position: relative; margin-top: 14px;
  border: 1.5px dashed var(--gold); border-radius: 10px;
  background: #fffdf6; padding: 18px 20px;
}
.aff2-label {
  position: absolute; top: -9px; left: 14px;
  font-size: 10px; letter-spacing: .18em; font-weight: 700;
  background: var(--gold); color: #fff; padding: 1px 10px; border-radius: 2px;
}
.aff2 h4 { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; }
.aff2 p { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.75; }
.aff2-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-weight: 700; font-size: 13.5px; color: var(--orange-deep);
  text-decoration: none; border-bottom: 1.5px solid var(--orange-deep); padding-bottom: 1px;
}
.aff2-cta:hover { opacity: .75; }
.aff2-reassure { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--ink-soft); }
.aff2-reassure span::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* LINE帯（黒金プレミアム＝RIZAP reservation帯の型・緑ボタンが最大に映える） */
.line-band {
  position: relative; overflow: hidden;
  margin-top: 44px; padding: 30px 22px;
  border-radius: 14px;
  background: radial-gradient(640px 300px at 84% -12%, #2a2a2a 0%, transparent 62%), var(--black-band);
  color: #f5f2ea;
}
.line-band::after {
  content: "暦"; position: absolute; right: -18px; bottom: -44px;
  font-family: var(--font-serif); font-size: 150px; color: rgba(255,255,255,.045);
  pointer-events: none;
}
.lb-kicker { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--gold); }
.lb-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(19px, 17px + 1vw, 24px); line-height: 1.6; margin-top: 6px; }
.lb-lead { margin-top: 10px; font-size: 13px; color: #d8d3c3; line-height: 1.85; max-width: 40em; }
.lb-list { list-style: none; margin: 14px 0 4px; display: grid; gap: 6px; font-size: 12.5px; color: #d8d3c3; }
.lb-list li::before { content: "✓ "; color: #9fe8bb; font-weight: 700; }
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; padding: 14px 32px;
  background: var(--line-green); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(6,199,85,.55);
  transition: transform var(--dur);
}
.lb-btn:hover { transform: translateY(-2px); }
.lb-note { margin-top: 10px; font-size: 11px; color: #bdb8a8; }

/* 保存・共有（控えめトーン・最後） */
.save-h {
  font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: .06em;
  margin: 46px 0 10px; padding-left: 12px; border-left: 3px solid var(--line);
}
.save-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .save-grid { grid-template-columns: repeat(4, 1fr); } }
.save-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 10px; cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.save-btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.save-note { font-size: 11px; color: var(--ink-soft); margin-top: 8px; line-height: 1.75; }

/* =====================================================================
   Stage 15: 「1日の壁」黒金インパクト帯（RIZAPダーク帯の完成形）
   ===================================================================== */
.wband-lead { text-align: center; margin-top: 10px; font-size: 14px; color: #d8d3c3; }
.wband-grid {
  display: grid; gap: 26px; grid-template-columns: 1fr;
  max-width: 920px; margin: 32px auto 0;
}
@media (min-width: 760px) { .wband-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.wbi { text-align: center; padding: 12px 8px; border-top: 1px solid rgba(255,255,255,.14); }
@media (min-width: 760px) {
  .wbi { border-top: none; border-left: 1px solid rgba(255,255,255,.14); }
  .wbi:first-child { border-left: none; }
}
.wbi-num {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(34px, 26px + 3vw, 52px); line-height: 1.2; white-space: nowrap;
}
.wbi-num .en { font-family: var(--font-en); font-weight: 600; letter-spacing: .01em; }
.wbi-num small { font-size: .42em; margin-left: 2px; }
.wbi-num.up   { color: #d9bc6a; }   /* 金（明・黒地用） */
.wbi-num.down { color: #ff9d8a; }   /* 赤（明・黒地用） */
.wbi-cap { font-size: 11.5px; color: #bdb8a8; margin-top: 8px; line-height: 1.75; }
.wband-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
.wband-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--orange-deep); font-weight: 700; font-size: 15.5px;
  padding: 15px 34px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.6);
  transition: transform var(--dur);
}
.wband-cta:hover { transform: translateY(-2px); }
.wband-note { text-align: center; margin-top: 16px; }

/* =====================================================================
   Stage 16: ユースケース（モデルケース＝“例”明示・PROGRIT声カード型の法令セーフ翻訳）
   ===================================================================== */
.uc-lead { text-align: center; margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.uc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 860px) { .uc-grid { grid-template-columns: repeat(3, 1fr); } }
.uc-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; box-shadow: var(--shadow);
}
.uc-head { display: flex; align-items: center; gap: 12px; }
.uc-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 2.5px solid; display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 15px;
  rotate: -6deg; user-select: none;
}
.uc-avatar.a1 { border-color: var(--hanko); color: var(--hanko); }       /* 朱 */
.uc-avatar.a2 { border-color: var(--gold-deep); color: var(--gold-deep); } /* 金 */
.uc-avatar.a3 { border-color: var(--ink); color: var(--ink); }           /* 墨 */
.uc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: var(--base);
}
.uc-quote {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 15.5px; line-height: 1.65; letter-spacing: .02em;
  margin-top: 14px;
}
.uc-body { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.8; }
.uc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 12px; font-size: 11px; }
.uc-path span { background: var(--base); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.uc-path .arr { border: none; background: none; padding: 0; color: var(--gold-deep); font-weight: 700; }
.uc-note { text-align: center; margin-top: 20px; }

/* =====================================================================
   Stage 17: 回遊（Orbis contents/skinTrouble型）＝収益4大カード＋ツール4小チップ
   ===================================================================== */
.nav-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 720px) { .nav-grid { grid-template-columns: 1fr 1fr; } }
.nav-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 20px 52px 20px 22px;
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.nav-card:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(243,152,0,.5); }
.nav-card::after {
  content: ""; position: absolute; right: 16px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange);
  transition: translate .4s;
}
.nav-card:hover::after { translate: 4px -50%; }
.nav-card .nc-arrow {
  position: absolute; right: 22.5px; top: 50%;
  width: 6px; height: 6px; z-index: 1;
  border-right: 2px solid #fff; border-top: 2px solid #fff;
  rotate: 45deg; translate: 0 -50%;
  pointer-events: none;
}
.nc-kicker { font-family: var(--font-serif); font-size: 11px; letter-spacing: .16em; color: var(--orange-deep); }
.nav-card h4 { font-family: var(--font-serif); font-size: 16px; margin: 5px 0 6px; line-height: 1.55; }
.nav-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; }
.nav-card--line { border-color: rgba(6,199,85,.5); }
.nav-card--line .nc-kicker { color: var(--line-green); }
.nav-card--line:hover { border-color: var(--line-green); box-shadow: 0 14px 30px -18px rgba(6,199,85,.5); }
.nav-card--line::after { background: var(--line-green); }

.tool-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 860px) { .tool-chips { grid-template-columns: repeat(4, 1fr); } }
.tool-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--base); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: inherit;
  transition: border-color var(--dur), transform var(--dur), background var(--dur);
}
.tool-chip:hover { border-color: var(--orange); background: #fff; transform: translateY(-2px); }
.tool-chip .tc-k {
  flex: none; width: 30px; height: 30px; border-radius: 6px;
  border: 1.5px solid var(--gold-deep); color: var(--gold-deep);
  font-family: var(--font-serif); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.tool-chip b { display: block; font-size: 12.5px; line-height: 1.4; }
.tool-chip small { display: block; font-size: 10.5px; color: var(--ink-soft); font-weight: 400; margin-top: 1px; }

/* =====================================================================
   Stage 18: FAQ（RIZAP list-faq アコーディオンの details/summary 翻訳・全問閉初期）
   ===================================================================== */
.faq2 { display: grid; gap: 10px; max-width: 780px; margin: 26px auto 0; }
.faq2 details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 18px; }
.faq2 summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 700; font-size: 14.5px; line-height: 1.65;
  padding: 16px 34px 16px 0; position: relative;
}
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::before {
  content: "Q."; flex: none;
  font-family: var(--font-en); font-weight: 600; font-size: 14px;
  color: var(--orange);
}
.faq2 summary::after {                            /* ＋ → ×（RIZAP icon_plus の回転） */
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 14px; height: 14px; translate: 0 -50%;
  background:
    linear-gradient(var(--orange), var(--orange)) center / 14px 2px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center / 2px 14px no-repeat;
  transition: rotate var(--dur);
}
.faq2 details[open] summary::after { rotate: 45deg; }
.faq2 details p { font-size: 13px; color: var(--ink-soft); line-height: 1.85; padding: 0 0 16px 27px; }
.faq-cue { text-align: center; margin-top: 20px; font-size: 13px; color: var(--ink-soft); }
.faq-cue a { color: var(--line-green); font-weight: 700; text-decoration: none; }
.faq-cue a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Stage 19: 締めCTA帯（橙ソリッド＝PROGRIT/RIZAP締め基調・白反転CTA＋LINE副）
   ===================================================================== */
.close-inner { text-align: center; max-width: 720px; margin-inline: auto; padding-inline: 20px; }
.close-kicker { font-family: var(--font-serif); font-size: 12px; letter-spacing: .3em; color: rgba(255,255,255,.85); }
.close-title {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: clamp(22px, 18px + 2vw, 34px); line-height: 1.6; letter-spacing: .04em;
  margin: 10px 0 24px;
}
.cta--invert { background: #fff; color: var(--orange-deep); box-shadow: 0 14px 32px -14px rgba(0,0,0,.4); }
.cta--invert:hover { background: #fff; transform: translateY(-2px); }
.cta--invert .cta-free { background: var(--orange); color: #fff; }
.cta--invert .cta-arrow { background: var(--orange); }
.cta--invert .cta-arrow::after { border-color: #fff; }
.close-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 12px 28px;
  background: var(--line-green); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 13.5px; border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.3);
  transition: transform var(--dur);
}
.close-line:hover { transform: translateY(-2px); }
.close-reassure {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  margin-top: 16px; font-size: 11.5px; color: rgba(255,255,255,.92);
}
.close-reassure span::before { content: "✓ "; font-weight: 700; }
.close-note { margin-top: 14px; font-size: 10.5px; color: rgba(255,255,255,.8); line-height: 1.75; }

/* =====================================================================
   Stage 20: フッター（法務・アフィ開示・回遊）＝結合ページ専用
   ===================================================================== */
.lp-footer {
  background: var(--base);
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  font-size: 12px; color: var(--ink-soft); line-height: 1.9;
}
.lp-footer h5 { font-family: var(--font-serif); font-size: 13px; color: var(--ink); letter-spacing: .06em; margin-bottom: 6px; }
.lp-footer p { margin-bottom: 10px; }
.lp-footer strong { color: var(--ink); }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 6px; }
.lp-footer-nav a { color: var(--ink-soft); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px; }
.lp-footer-nav a:hover { color: var(--orange-deep); }
.lp-footer-copy { margin-top: 12px; font-size: 11px; }

/* ================================================================
   DX層 — Claude Design仕上げ書き出しの移植（2026-07-07）
   出典: lp_build/dx/（dx-common.css + dx-lp / dx-lp-2 / dx-result-spoke）
   既存クラスへの上書き強化＋新規 .dx- 装飾のみ。文言・JS配線は不変。
   ================================================================ */
:root{
  --gold-bright:#d9bc6a; --gold-dark:#8a7330;
  --orange-press:#c47b00; --alert-bright:#ff9d8a;
}

/* ---- 黒金キーライン（ページ最上部） ---- */
.dx-keyline{height:9px;background:var(--black-band)}
.dx-keyline::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-bright) 35%,var(--gold) 70%,var(--gold-dark))}

/* ---- CTA 熱量強化（押し込み影・白発光ロール・矢印スライド） ---- */
.cta{box-shadow:0 5px 0 var(--orange-press),0 18px 38px -8px rgba(243,152,0,.55);transition:background .2s,transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(3px);background:var(--orange-deep);box-shadow:0 2px 0 #b06e00,0 10px 22px -8px rgba(243,152,0,.5)}
.cta:active{transform:translateY(5px);box-shadow:0 0 0 #b06e00,0 6px 14px -8px rgba(243,152,0,.5)}
.cta .cta-text{text-shadow:0 1px 0 rgba(0,0,0,.1);transition:text-shadow .2s}
.cta:hover .cta-text{text-shadow:0 1px 0 rgba(0,0,0,.1),0 0 14px rgba(255,255,255,.45)}
.cta .cta-arrow{transition:transform .22s ease}
.cta:hover .cta-arrow{transform:translate(4px,-50%)}

/* ---- 紙もの共通（診断票カード） ---- */
.dx-paper{position:relative;background:#fff;border-radius:4px;
  background-image:repeating-linear-gradient(0deg,rgba(36,36,36,.013) 0 1px,transparent 1px 3px);
  box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.3)}
.dx-paper::before{content:"";position:absolute;inset:10px -7px -12px 9px;z-index:-1;background:#fff;border:1px solid var(--line);border-radius:4px;transform:rotate(-1.1deg);box-shadow:0 20px 44px -20px rgba(19,19,19,.26)}
.dx-tab{position:absolute;top:-15px;left:18px;background:var(--hanko);color:#fff;font-size:clamp(12px,1.4vw,13.5px);font-weight:700;letter-spacing:.22em;padding:7px 16px 7px 18px;border-radius:4px;box-shadow:0 4px 10px rgba(211,73,42,.38)}
.dx-hanko{display:flex;align-items:center;justify-content:center;border:2.5px solid rgba(211,73,42,.9);border-radius:50%;color:var(--hanko);font-family:var(--font-serif);font-weight:900;mix-blend-mode:multiply;transform:rotate(-6deg);box-shadow:inset 0 0 0 1px rgba(211,73,42,.25)}
.dx-goldrule{border:0;height:0;border-top:3px solid var(--gold);position:relative;margin:0 0 4px}
.dx-goldrule::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--gold);opacity:.55}
.dx-nw{white-space:nowrap}

/* ---- FV: 紙罫ドリフト＋周辺減光＋実HTML診断票カード ---- */
.fv{position:relative;overflow:hidden}
.fv::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(36,36,36,.05) 0 1px,transparent 1px 108px);mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%)}
.fv::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(140% 90% at 50% -10%,transparent 55%,rgba(36,36,36,.05) 100%)}
.fv .fv-inner,.fv .fv-evidence{position:relative;z-index:1}
.fv-visual{padding:26px 6px 20px}
.fv-badge{position:absolute;top:10px;left:-4px;z-index:2;background:var(--orange);color:#fff;padding:9px 18px 10px;border-radius:999px;transform:rotate(-4deg);animation:dx-float 3.4s ease-in-out infinite;box-shadow:0 10px 24px -6px rgba(243,152,0,.55);font-weight:900;letter-spacing:.05em;white-space:nowrap;font-size:12.5px}
.fv-badge b{font-size:19px;font-feature-settings:'tnum'} .fv-badge small{font-size:12.5px}
.dx-fv-card{width:100%;max-width:428px;margin-inline:auto;border:2px solid var(--ink);transform:rotate(-2deg);padding:36px 26px 28px}
.dx-fv-tab{top:-13px;letter-spacing:.3em;padding:5px 13px 5px 16px}
.dx-fv-kicker{margin:0 0 10px;text-align:center;font-family:var(--font-serif);font-weight:700;font-size:13.5px;letter-spacing:.18em;color:var(--gold-deep)}
.dx-fv-date{margin:0 0 18px;text-align:center;font-family:var(--font-serif);font-weight:900;font-size:clamp(27px,3vw,36px);letter-spacing:.02em;line-height:1.35}
.dx-fv-date em{font-style:normal;color:var(--gold-deep)} .dx-fv-date small{font-size:.5em;color:var(--ink-soft);font-weight:700}
.dx-fv-totalrow{display:flex;align-items:center;gap:10px;margin-top:18px}
.dx-fv-lbl{margin:0 0 2px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft)}
.dx-fv-total{margin:0 0 4px;font-family:var(--font-serif);font-weight:900;color:var(--gold-deep);line-height:1.15;font-size:clamp(38px,11vw,48px);letter-spacing:.01em;font-feature-settings:'palt' 1,'tnum' 1}
.dx-fv-total small{font-size:.46em;margin-left:2px}
.dx-fv-hanko{flex:none;width:74px;height:74px;font-size:20px;letter-spacing:.08em;writing-mode:vertical-rl;animation:dx-stamp .6s .9s cubic-bezier(.2,1.4,.4,1) both}
.dx-fv-note{margin:0 0 16px;font-size:10.5px;color:var(--ink-soft);letter-spacing:.05em}
.dx-fv-chart{border:1px solid var(--line);border-radius:4px;background:#fff;padding:10px 10px 6px}
.dx-fv-chart svg{width:100%;height:auto;font-family:var(--font-sans);filter:none}
.dx-fv-cap{margin:10px 2px 0;font-size:10px;line-height:1.7;color:var(--ink-soft);letter-spacing:.04em}

/* ---- FACTS: 銘板（二重枠＋エンボス＋金短線） ---- */
.stat{background:linear-gradient(180deg,#fff,#fafaf9);border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(36,36,36,.05),0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.26);padding:8px}
.dx-plate{border:1px solid rgba(178,149,64,.5);border-radius:6px;padding:clamp(18px,2.4vw,26px) 10px clamp(14px,2vw,20px);text-align:center}
.dx-plate::before{content:"";display:block;width:26px;height:2px;margin:0 auto 12px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ---- PROMISE / WORRIES: カード浮遊＋タップ朱✓ ---- */
.promise-item{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.26);transition:transform .25s,box-shadow .25s}
.promise-item:hover{transform:translateY(-4px)}
.promise-check{box-shadow:0 6px 14px -6px rgba(243,152,0,.6)}
.pain-item{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.26);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.pain-item:hover{transform:translateY(-2px);border-color:#c9c5bd}
.pain-item:active{transform:scale(.995)}
.pain-box{box-shadow:inset 0 1px 2px rgba(36,36,36,.06);position:relative}
.pain-item.on .pain-box::after{content:"";position:absolute;left:4px;top:5px;width:13px;height:7px;border-left:2.6px solid var(--hanko);border-bottom:2.6px solid var(--hanko);transform:rotate(-45deg);animation:dx-stamp .3s ease-out both}

/* ---- FLOW: 円形図版の金内輪＋金コネクタ＋丸ボタンcue ---- */
.fstep-fig{position:relative}
.fstep-fig::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(178,149,64,.55);pointer-events:none}
.dx-conn{flex:none;align-self:flex-start;margin-top:clamp(52px,6.5vw,64px);width:34px;height:14px;position:relative;list-style:none}
.dx-conn::before{content:"";position:absolute;left:0;top:6px;width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))}
.dx-conn::after{content:"";position:absolute;right:2px;top:3px;width:8px;height:8px;border-top:2.2px solid var(--gold);border-right:2.2px solid var(--gold);transform:rotate(45deg)}
.dx-cue-btn{display:inline-flex;width:46px;height:46px;border-radius:50%;background:var(--orange);box-shadow:0 10px 24px -8px rgba(243,152,0,.6);animation:dx-bounce 2s ease-in-out infinite;position:relative;transition:background .2s}
.dx-cue-btn:hover{background:var(--orange-deep)}
.dx-cue-btn::before{content:"";position:absolute;left:50%;top:14px;width:14px;height:14px;border-right:4px solid #fff;border-bottom:4px solid #fff;border-radius:1px;transform:translateX(-50%) rotate(45deg)}
@media(max-width:799px){.dx-conn{margin:2px 0 6px;transform:rotate(90deg)}}

/* ---- ウィザード: 金分割プログレス＋選択の朱「選」判子＋下線記入欄 ---- */
.wz-bar-fill{background:linear-gradient(90deg,var(--orange),#ffb547)}
.wz-bar-fill::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;transform:translateY(-50%);border-radius:50%;background:#f4d98c;box-shadow:0 0 10px 2px rgba(243,152,0,.6),inset 0 0 0 2px rgba(255,255,255,.7)}
.wz-bar{position:relative}
.wz-bar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(178,149,64,.4) calc(16.666% - 1px) 16.666%)}
.wz-opt{transition:border-color .2s,transform .2s,box-shadow .2s,background .2s}
.wz-opt:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(243,152,0,.5)}
.wz-opt.on{position:relative;background:rgba(243,152,0,.07)}
.wz-opt.on::after{content:"選";position:absolute;right:9px;top:50%;margin-top:-17px;width:34px;height:34px;border:2px solid rgba(211,73,42,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--hanko);font-family:var(--font-serif);font-weight:900;font-size:15px;mix-blend-mode:multiply;animation:dx-stamp .5s cubic-bezier(.2,1.4,.4,1) both}
.wz-numgrid input{background:rgba(246,246,245,.7);border:none;border-bottom:2px solid var(--ink);border-radius:4px 4px 0 0;transition:border-color .2s,box-shadow .2s,background .2s}
.wz-numgrid input:focus{border-bottom-color:var(--orange);background:#fff;box-shadow:0 12px 20px -14px rgba(243,152,0,.55)}

/* ---- モデルケース: 判子アバター＋カード ---- */
.uc-card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.26)}
.uc-avatar{display:flex;align-items:center;justify-content:center;border:2.5px solid rgba(211,73,42,.9);border-radius:50%;color:var(--hanko);font-family:var(--font-serif);font-weight:900;mix-blend-mode:multiply;transform:rotate(-6deg);box-shadow:inset 0 0 0 1px rgba(211,73,42,.25);background:radial-gradient(circle at 62% 34%,rgba(211,73,42,.12),rgba(211,73,42,.03))}
.uc-avatar.a2{border-color:rgba(156,123,39,.9);color:var(--gold-deep);transform:rotate(-4deg);background:radial-gradient(circle at 62% 34%,rgba(178,149,64,.14),rgba(178,149,64,.03));box-shadow:inset 0 0 0 1px rgba(156,123,39,.28)}
.uc-avatar.a3{border-color:rgba(36,36,36,.85);color:var(--ink);border-radius:6px;font-size:16px;transform:rotate(-7deg);background:radial-gradient(circle at 62% 34%,rgba(36,36,36,.08),rgba(36,36,36,.02));box-shadow:inset 0 0 0 1px rgba(36,36,36,.25)}

/* ---- 回遊: 橙hover＋矢印スライド＋金チップ ---- */
.nav-card{transition:transform .22s,box-shadow .22s,border-color .22s}
.nav-card:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 2px 3px rgba(19,19,19,.03),0 22px 44px -20px rgba(243,152,0,.35)}
.nav-card:hover .nc-arrow{transform:translateX(4px)}
.nc-arrow{transition:transform .22s ease;box-shadow:0 6px 14px -6px rgba(243,152,0,.6)}
.nav-card--line:hover{border-color:var(--line-green,#06c755);box-shadow:0 2px 3px rgba(19,19,19,.03),0 22px 44px -20px rgba(6,199,85,.4)}
.tool-chip{transition:border-color .2s,transform .2s,box-shadow .2s}
.tool-chip:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(156,123,39,.5)}

/* ---- FAQ: Q.前置＋十字回転＋カード化 ---- */
.faq2 details{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.26);overflow:hidden}
.faq2 summary{display:flex;align-items:center;gap:12px;transition:background .2s}
.faq2 summary:hover{background:rgba(243,152,0,.04)}
.faq2 summary::before{content:"Q.";flex:none;font-family:var(--font-en);font-weight:600;font-size:15px;color:var(--orange);letter-spacing:.04em}
.faq2 summary::after{content:"";flex:none;margin-left:auto;width:18px;height:18px;background:
  linear-gradient(var(--orange),var(--orange)) center/100% 2px no-repeat,
  linear-gradient(var(--orange),var(--orange)) center/2px 100% no-repeat;transition:transform .3s ease}
.faq2 details[open] summary::after{transform:rotate(45deg)}
.faq2 details p{animation:dx-fadeup .35s ease both}

/* ---- 結果ヒーロー: 表彰状（金罫×2で総額を挟む・朱下線日付） ---- */
.res-kicker{font-family:var(--font-serif);font-weight:700;letter-spacing:.2em;color:var(--gold-deep)}
.res-date em{font-style:normal;border-bottom:3px solid var(--hanko);padding-bottom:2px}
.dx-award{max-width:620px;margin:0 auto 18px}
.dx-goldrule--btm{margin:12px 0 0}
.res-total{font-family:var(--font-serif);font-weight:900;color:var(--gold-deep);line-height:1.1;font-size:clamp(56px,15vw,84px);letter-spacing:0;font-feature-settings:'palt' 1,'tnum' 1;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.res-total small{font-size:.42em;margin-left:4px}
.wall-urgent2 .wu-count{animation:dx-linepulse 2.6s ease-in-out infinite}

/* ---- 処方箋pcv: 橙枠＋紙質感＋二重ズレ紙 ---- */
.pcv{position:relative;border:2px solid var(--orange);border-radius:4px;background-color:#fff;background-image:repeating-linear-gradient(0deg,rgba(36,36,36,.013) 0 1px,transparent 1px 3px);box-shadow:0 2px 3px rgba(19,19,19,.04),0 20px 44px -20px rgba(19,19,19,.3)}
.pcv::before{content:"";position:absolute;inset:10px -7px -12px 9px;z-index:-1;background:#fff;border:1px solid var(--line);border-radius:4px;transform:rotate(-1.1deg);box-shadow:0 20px 44px -20px rgba(19,19,19,.26)}
.ps--goal{border:2px solid var(--gold);background:linear-gradient(180deg,rgba(178,149,64,.08),rgba(178,149,64,.03))}
.pcv-urgent{background:rgba(36,36,36,.035);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center}

/* ---- 比較表 cmp（黒ヘッダ＋◎ハイライト） ---- */
.cmp{width:100%;border-collapse:collapse;font-size:clamp(12.5px,1.4vw,14px)}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 12px;line-height:1.6;text-align:left}
.cmp thead th{background:var(--ink);color:#fff;font-weight:500;font-size:12px;letter-spacing:.06em;border-color:#3a3a3a}
.cmp thead th:last-child{font-weight:700}
.cmp tbody th{background:#f5f5f4;font-size:12px;letter-spacing:.1em;color:var(--ink-soft);width:4.5em}
.cmp td{color:var(--ink-soft)}
.cmp .cmp-good{background:rgba(243,152,0,.07);font-weight:700;color:var(--ink)}
.cmp .cmp-good::before{content:"◎ ";color:var(--ok);font-weight:900}

/* ---- LINE帯: 黒金カード（金枠・透かし暦・発光ボタン） ---- */
.line-band{position:relative;overflow:hidden;background:linear-gradient(155deg,#1c1a14 0%,#131313 42%,#17130c 100%);border:1px solid rgba(178,149,64,.55);border-radius:14px;box-shadow:0 2px 4px rgba(19,19,19,.14),0 28px 64px -22px rgba(19,19,19,.5),inset 0 1px 0 rgba(217,188,106,.28);color:#fff}
.line-band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,188,106,.75) 28%,rgba(217,188,106,.75) 72%,transparent)}
.line-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(460px 320px at 10% -4%,rgba(217,188,106,.12),transparent 62%),radial-gradient(120% 100% at 50% 100%,transparent 55%,rgba(0,0,0,.4) 100%)}
.line-band>*{position:relative;z-index:1}
.dx-koyomi{position:absolute;right:-24px;bottom:-70px;z-index:0;font-family:var(--font-serif);font-weight:900;font-size:clamp(210px,30vw,320px);line-height:1;color:rgba(217,188,106,.045);-webkit-text-stroke:1px rgba(217,188,106,.16);transform:rotate(-6deg);pointer-events:none;user-select:none}
.lb-kicker{color:var(--gold-bright)}
.lb-title{color:#fff}
.lb-lead{color:#d8d3c3}
.lb-list{color:#d8d3c3}
.lb-list li::before{color:#9fe8bb}
.lb-list strong{color:#fff;font-weight:900}
.lb-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;max-width:440px;background:linear-gradient(180deg,#0ad35f,#06c755 55%,#05b34c);border-radius:6px;padding:14px 16px;color:#fff;font-size:clamp(15px,1.8vw,18px);font-weight:900;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 0 0 1px rgba(6,199,85,.55),0 14px 40px -8px rgba(6,199,85,.5),0 3px 0 #04913f,inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s,box-shadow .2s}
.lb-btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 0 0 1px rgba(6,199,85,.5),0 8px 26px -8px rgba(6,199,85,.5),0 1px 0 #04913f}
.lb-btn::before{content:"LINE";flex:none;width:34px;height:34px;border-radius:6px;background:#fff;color:#06c755;display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:600;font-size:10px}
.lb-btn::after{content:"";position:absolute;inset:-4px;border-radius:10px;box-shadow:0 0 42px 8px rgba(6,199,85,.35);opacity:.55;animation:dx-linepulse 3.2s ease-in-out infinite;pointer-events:none}
.lb-note{color:#bdb8a8}

/* ---- 壁帯wband: 金ボーダー＋縦罫＋ビネット＋金グラデ数字スキュー ---- */
.wband{position:relative;overflow:hidden;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--gold-dark),var(--gold-bright) 35%,var(--gold) 70%,var(--gold-dark)) 1}
.wband::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(217,188,106,.05) 0 1px,transparent 1px 108px);mask-image:linear-gradient(180deg,#000,transparent 90%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 90%)}
.wband::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(720px 420px at 50% 0%,rgba(217,188,106,.1),transparent 65%),radial-gradient(140% 100% at 50% 100%,transparent 45%,rgba(0,0,0,.55) 100%)}
.wband>.inner{position:relative;z-index:1}
.wbi{position:relative;padding-top:26px}
.wbi::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.wbi-num{transform:skewX(-6deg);white-space:nowrap}
.wbi-num.up .en{background:linear-gradient(180deg,#f2dfa0 0%,var(--gold-bright) 52%,#a8853a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px rgba(217,188,106,.3))}
.wbi-num.down .en{background:linear-gradient(180deg,#ffc4b6 0%,var(--alert-bright) 55%,#d96a55 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 22px rgba(255,157,138,.28))}
.wband-cta{background:linear-gradient(180deg,#fff,#f6f3ec);box-shadow:0 0 0 1px rgba(217,188,106,.55),0 18px 44px -14px rgba(0,0,0,.7),inset 0 -2px 0 rgba(178,149,64,.3);transition:transform .18s,box-shadow .2s}
.wband-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(217,188,106,.8),0 24px 52px -14px rgba(0,0,0,.75),inset 0 -2px 0 rgba(178,149,64,.3)}

/* ---- 締め帯close: 橙3段グラデ＋ノイズ＋ビネット ---- */
.close{position:relative;overflow:hidden;background:linear-gradient(168deg,#f8a50f 0%,#f39800 42%,#e68e00 100%)}
.close::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.close::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 18% -10%,rgba(255,255,255,.16),transparent 58%),radial-gradient(130% 100% at 50% 100%,transparent 46%,rgba(150,85,0,.28) 100%)}
.close>.close-inner{position:relative;z-index:1}
.close-title{text-shadow:0 1px 3px rgba(140,80,0,.3)}

/* ---- P6.5 CVR施策（案1・2・3・5・8） ---- */
/* 案5: 結果最上部の事実帯（煽り色は使わない） */
.res-preband{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin:0 auto clamp(22px,3vw,30px);max-width:620px;background:rgba(36,36,36,.04);border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:clamp(11.5px,1.4vw,13px);line-height:1.7;letter-spacing:.05em;text-align:center;color:var(--ink)}
.res-preband strong{color:var(--hanko)}
.res-preband span{color:var(--ink-soft);font-weight:700}
/* 案2: 2タップチップ＋所要時間＋誠実注記 */
.pcv-steps--two{max-width:520px;margin-inline:auto}
.ps small{display:block;font-size:10px;font-weight:700;color:var(--ok);letter-spacing:.08em;margin-top:2px}
.ps-after{margin:8px auto 22px;max-width:520px;text-align:center}
/* 案3: FVの静かな体調分岐＋ウィザード体調カードの金枠バッジ */
.fv-sick-link{margin:-8px 0 22px;font-size:clamp(12px,1.4vw,13px);line-height:1.8}
.fv-sick-link a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(178,149,64,.6)}
.fv-sick-link a:hover{color:var(--gold-deep)}
.wz-opt[data-val="sick"]{border-color:rgba(178,149,64,.65);position:relative}
.wz-opt[data-val="sick"]::before{content:"最短ルートあり";position:absolute;right:10px;top:-9px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:2px 10px;box-shadow:0 3px 8px -2px rgba(156,123,39,.5)}
.wz-opt[data-val="sick"].on::before{display:none}

/* ---- keyframes ---- */
@keyframes dx-fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dx-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(-3.2deg)}}
@keyframes dx-stamp{0%{opacity:0;transform:rotate(-14deg) scale(1.9)}55%{opacity:1;transform:rotate(-6deg) scale(.94)}75%{transform:rotate(-6deg) scale(1.04)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
@keyframes dx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes dx-linepulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .fv-badge,.dx-fv-hanko,.wz-opt.on::after,.pain-item.on .pain-box::after,.dx-cue-btn,.lb-btn::after,.wall-urgent2 .wu-count{animation:none}
}