@charset "utf-8";
/* app.css : 診断結果＋5日間チャレンジ Phase1プレビュー
 * デザイン方針
 *  - 既存「エルラボ＋」会員アプリ（app/index.html・elabo-plus-lp.html）のダーク×ゴールドを踏襲
 *    背景＝濃紺グラデーション／文字＝オフホワイト／アクセント＝ゴールド
 *    見出し＝Shippori Mincho B1／本文＝Noto Sans JP／数字＝Cormorant Garamond
 *  - キラキラ演出・ゲーム風バッジは使わない。装飾は細い金線と余白で作る
 *  - 選択／最低軸／完了は、色だけでなく記号と文字でも示す
 */

/* hidden属性を必ず効かせる。
 * display を指定したクラス（.lp-gate など）はブラウザ既定の [hidden]{display:none} に
 * 勝ってしまい、隠したはずの要素が出てしまうため、ここで打ち消す。 */
[hidden] { display: none !important; }

:root {
  /* エルラボ＋と同じトークン名・同じ値をそのまま使う */
  --lm-bg: #090c12;
  --lm-bg-2: #0e121a;
  --lm-surface: #121720;
  --lm-surface-2: #171d27;
  --lm-surface-3: #1d2430;
  --gold: #b99455;
  --gold-2: #e3c381;
  --gold-soft: rgba(227, 195, 129, .08);
  --ink: #f7f4ec;
  --ink-2: #c9c5bb;
  --ink-soft: #a8a49b;
  --line: rgba(227, 195, 129, .14);
  --line-2: rgba(227, 195, 129, .28);
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
  --ok: #8fc7ab;
  --warn: #e0a97a;
  --gothic: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mincho: "Shippori Mincho B1", "Yu Mincho", serif;
  --serif-en: "Cormorant Garamond", Georgia, serif;
  --radius: 18px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--lm-bg);
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(185, 148, 85, .10), transparent 62%),
    radial-gradient(760px 520px at -10% 30%, rgba(74, 91, 124, .12), transparent 64%),
    linear-gradient(180deg, var(--lm-bg-2), var(--lm-bg));
  background-attachment: fixed;
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}

button, input { font: inherit; }
::selection { background: rgba(227, 195, 129, .28); color: #fff; }

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 14px 56px;
}

@media (min-width: 720px) {
  .app-shell {
    margin: 28px auto;
    padding: 26px 24px 60px;
    border: 1px solid rgba(238, 214, 163, .18);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(19, 23, 33, .78), rgba(10, 13, 20, .58));
    box-shadow: 0 40px 100px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

/* --- アクセシビリティ共通 ------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--lm-surface-2); color: var(--ink);
  padding: 8px 12px; z-index: 10; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- ヘッダー --------------------------------------------------------- */
.app-header { margin: 4px 0 18px; }

.app-header__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 34px;
}

.app-header__day {
  font-size: 14px; font-weight: 600; letter-spacing: .16em; text-indent: .16em;
  color: var(--gold-2);
  border: 1px solid var(--line-2);
  border-radius: 999px; padding: 2px 14px;
  background: rgba(227, 195, 129, .06);
}

/* 上段：診断名 → 企画名 → 画面見出し（§17-5のヘッダー構成） */
.app-header__eyebrow {
  margin: 12px 0 0; font-size: 14px; color: var(--ink-soft);
  letter-spacing: .14em; text-indent: .14em;
}
.app-header__program {
  margin: 2px 0 0; font-family: var(--mincho); font-size: 15px; font-weight: 700;
  color: var(--gold-2); letter-spacing: .1em; text-indent: .1em;
}

.app-header__title {
  font-family: var(--mincho);
  font-size: 22px; line-height: 1.6; margin: 10px 0 0;
  font-weight: 700; letter-spacing: .06em; color: #fff;
}
.app-header__title:focus { outline: none; }
.app-header__title:focus-visible { outline: 2px solid var(--gold-2); }

/* 見出し下の細い金線（エルラボの装飾ルール） */
.app-header::after {
  content: ""; display: block;
  width: 48px; height: 1px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--gold-2), transparent);
}

.app-header__subtitle { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

.btn-back {
  appearance: none; background: none; border: 0;
  color: var(--ink-soft); font-size: 14px;
  padding: 6px 8px 6px 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; min-height: 34px;
  transition: color .18s ease;
}
.btn-back:hover { color: var(--gold-2); }
.btn-back--placeholder { visibility: hidden; }
.btn-back__arrow { font-size: 15px; }

/* --- カード ----------------------------------------------------------- */
.card {
  background: linear-gradient(145deg, rgba(29, 36, 48, .94), rgba(16, 20, 28, .94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 0 0 12px;
  /* エルラボ＋の .entry-inner と同じ「上端の細いハイライト＋深い影」 */
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.card__title {
  font-family: var(--mincho);
  font-size: 17px; font-weight: 700; margin: 0 0 10px;
  line-height: 1.65; letter-spacing: .04em; color: var(--ink);
}

.card__body { margin: 0; font-size: 15px; color: var(--ink-2); }
.card__note { margin: 0 0 10px; font-size: 0.875rem; color: var(--ink-soft); }
.card--lead .lead-line { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.card--lead .lead-line:last-child { margin-bottom: 0; }

/* --- スコア ------------------------------------------------------------ */
.score-summary { text-align: center; padding-top: 22px; }
.score-summary__caption {
  margin: 0; font-size: 14px; color: var(--gold-2);
  letter-spacing: .18em; text-indent: .18em;
}
.score-summary__value { margin: 6px 0 8px; font-family: var(--serif-en); }
.score-summary__num {
  font-size: 58px; font-weight: 600; line-height: 1; color: #fff;
  text-shadow: 0 0 28px rgba(227, 195, 129, .22);
}
.score-summary__max { font-size: 18px; color: var(--ink-soft); }
.score-summary__band { margin: 0; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.score-summary__range { font-size: 14px; color: var(--ink-soft); font-family: var(--serif-en); }
.score-summary__meaning { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); text-align: left; }

.meter { margin-top: 18px; padding: 18px 0 2px; border-top: 1px solid var(--line); }
.meter__track {
  position: relative;
  height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  margin-bottom: 28px;
}
.meter__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform-origin: left center;
}
/* 改善後の目安（点線の右端で到達点を示す） */
.meter__target {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 999px;
  background: rgba(227, 195, 129, .18);
  border-right: 2px dashed var(--gold-2);
}
.meter__mark { position: absolute; top: -5px; transform: translateX(-50%); }
.meter__mark-line { display: block; width: 1px; height: 20px; background: var(--ink-soft); margin: 0 auto; }
.meter__mark-label {
  display: block; margin-top: 3px; font-size: 14px; color: var(--ink-soft); white-space: nowrap;
}
.meter__note { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* --- 5軸 -------------------------------------------------------------- */
.axis-list { list-style: none; margin: 0; padding: 0; }
.axis { padding: 12px 0; border-top: 1px solid var(--line); }
.axis:first-child { border-top: 0; padding-top: 2px; }

.axis__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.axis__label { font-family: var(--mincho); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.axis__formal { font-family: var(--gothic); font-size: 14px; font-weight: 400; color: var(--ink-soft); }
.axis__score {
  font-family: var(--serif-en); font-size: 15px; color: var(--gold-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.axis__bar {
  display: block; height: 6px; margin: 8px 0 6px;
  background: rgba(255, 255, 255, .06); border-radius: 999px; overflow: hidden;
}
.axis__bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.axis__hint { display: block; font-size: 14px; color: var(--ink-soft); }
.axis__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.axis__badges:empty { margin-top: 0; }
.axis__reason { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.axis--lowest { position: relative; padding-left: 14px; }
.axis--lowest::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-2), rgba(227, 195, 129, .15));
}
.axis:first-child.axis--lowest::before { top: 4px; }
.axis--lowest .axis__label { color: var(--gold-2); }
.axis--lowest .axis__bar-fill { box-shadow: 0 0 12px rgba(227, 195, 129, .55); }

/* --- タグ ------------------------------------------------------------- */
.tag {
  display: inline-block; font-size: 14px; font-weight: 500; line-height: 1.7;
  padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--gold-2);
  background: rgba(227, 195, 129, .07); white-space: nowrap;
}
.tag--focus { border-color: var(--gold-2); background: rgba(227, 195, 129, .14); }
.tag--selected {
  color: var(--ok); border-color: rgba(143, 199, 171, .45); background: rgba(143, 199, 171, .10);
}

/* --- 選択肢 ------------------------------------------------------------ */
.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
/* 見出しはカードのタイトルや画面見出しが担うため、legend は読み上げ用にだけ残す
   （画面に出すと同じ文言が二重に見える） */
.choice-group__legend {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.choice-list--inline { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

.axis-list--select { display: grid; gap: 8px; }
.axis-list--select .axis { border-top: 0; padding: 0; }

.choice__label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .025); cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.choice__label:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .045); }

.choice__check {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 2px;
  border: 1px solid var(--line-2); border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 14px; line-height: 1; color: transparent;
  transition: background .18s ease, border-color .18s ease;
}

/* 2026-09-12：DAY2〜DAY5の選択肢・注記・操作ボタンの文字サイズを相対単位にした。
 * 画面の文字を大きくする設定に追従させるため（Codex承認・最小修正）。
 * ルートに font-size の指定は無いので、16px基準で見た目は変わらない。
 * ★rem にしただけで、すべての端末のOS文字設定に追従すると保証するものではない。 */
.choice__body { flex: 1 1 auto; min-width: 0; display: block; }
.choice__title { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.choice__sub { display: block; font-size: 0.875rem; color: var(--ink-soft); font-family: var(--serif-en); }

.is-selected > .choice__label {
  border-color: var(--gold-2);
  background: rgba(227, 195, 129, .09);
  box-shadow: inset 0 0 0 1px rgba(227, 195, 129, .18);
}
.is-selected .choice__check { border-color: var(--gold-2); background: var(--gold-2); color: #16110a; }
.is-selected .choice__check::after { content: "✓"; }

.choice__input:focus-visible + .choice__label {
  outline: 2px solid var(--gold-2); outline-offset: 3px;
}

/* --- 一本線シート ------------------------------------------------------ */
.blueprint__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.blueprint__count {
  font-family: var(--serif-en); font-size: 18px; color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}
.blueprint__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.blueprint__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border: 1px dashed var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.blueprint__item.is-done {
  border-style: solid; border-color: var(--line-2);
  background: rgba(227, 195, 129, .07);
}
.blueprint__mark {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--line); display: inline-grid; place-items: center;
  font-size: 14px; line-height: 1; color: transparent; margin-top: 2px;
}
.blueprint__item.is-done .blueprint__mark { border-color: var(--gold-2); background: var(--gold-2); color: #16110a; }
.blueprint__body { display: block; min-width: 0; }
.blueprint__day { font-family: var(--serif-en); font-size: 14px; color: var(--ink-soft); margin-right: 8px; letter-spacing: .06em; }
.blueprint__label { font-family: var(--mincho); font-size: 15px; font-weight: 700; color: var(--ink); }
.blueprint__status { display: inline-block; margin-left: 8px; font-size: 14px; color: var(--ink-soft); }
.blueprint__item.is-done .blueprint__status { color: var(--gold-2); }
.blueprint__summary { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* --- 完了画面 ---------------------------------------------------------- */
.kv-list { margin: 0; }
.kv { padding: 12px 0; border-top: 1px solid var(--line); }
.kv:first-child { border-top: 0; padding-top: 0; }
.kv__key { margin: 0; font-size: 14px; color: var(--gold-2); letter-spacing: .08em; }
.kv__value { margin: 4px 0 0; font-size: 15px; color: var(--ink); }

.before-after__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.before-after__item { border-top: 1px solid var(--line); padding-top: 14px; }
.before-after__item:first-child { border-top: 0; padding-top: 0; }
.before-after__row { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.before-after__tag {
  flex: 0 0 auto; font-size: 14px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 10px;
}
.before-after__row--after .before-after__tag { color: var(--gold-2); border-color: var(--line-2); }
.before-after__text { font-size: 15px; color: var(--ink-2); }
.before-after__row--after .before-after__text { color: var(--ink); font-weight: 700; }
.before-after__arrow { margin: 4px 0; color: var(--gold); font-size: 14px; }

.score-keep { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.score-keep__label { font-size: 14px; color: var(--ink-soft); letter-spacing: .1em; }
.score-keep__value { font-family: var(--serif-en); font-size: 26px; color: var(--gold-2); }
.score-keep__band { font-size: 14px; color: var(--ink-2); }
.card--score-keep .card__note { margin: 8px 0 0; }

.card--recap .recap { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.recap__label { font-size: 14px; color: var(--ink-soft); letter-spacing: .08em; }
.recap__value { font-family: var(--mincho); font-size: 16px; font-weight: 700; color: var(--gold-2); }

.done-badge { margin: 0; display: flex; align-items: center; gap: 10px; }
.done-badge__mark {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-2); color: #16110a;
  display: inline-grid; place-items: center; font-size: 14px; line-height: 1;
}
.done-badge__text { font-family: var(--mincho); font-size: 16px; font-weight: 700; color: var(--ink); }

.teaser { padding: 0; }
.teaser__summary {
  cursor: pointer; padding: 16px; font-size: 15px; font-weight: 700;
  list-style: none; display: flex; align-items: center; gap: 10px;
  font-family: var(--mincho); color: var(--ink); letter-spacing: .04em;
}
.teaser__summary::-webkit-details-marker { display: none; }
.teaser__summary::before {
  content: "＋"; color: var(--gold-2); font-family: var(--gothic); font-weight: 400;
}
.teaser[open] .teaser__summary::before { content: "－"; }
.teaser__summary:hover { color: var(--gold-2); }
.teaser__body { margin: 0; padding: 0 16px 16px; font-size: 15px; color: var(--ink-2); }

/* --- ルール一覧（Screen B） --------------------------------------------- */
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rule { display: flex; gap: 12px; align-items: flex-start; }
.rule__mark {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%;
  background: var(--gold-2);
}
.rule__body { display: block; min-width: 0; }
.rule__title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.rule__text { display: block; font-size: 14px; color: var(--ink-2); }

/* --- 動画枠（第2段階で差し替え） ---------------------------------------- */
.video-slot {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px; border: 1px dashed var(--line-2); border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}
.video-slot__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--gold-2);
  display: inline-grid; place-items: center; font-size: 15px;
}
.video-slot__text { display: block; min-width: 0; }
.video-slot__title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.video-slot__tag { margin-top: 4px; }

/* --- 前回までの振り返り -------------------------------------------------- */
.recap-list { margin: 0; display: grid; gap: 10px; }
.recap { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 0; }

/* --- 短い自由入力 -------------------------------------------------------- */
.text-input { margin: 12px 0 0; }
.text-input__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.text-input__meta { display: inline-flex; gap: 10px; align-items: baseline; font-weight: 400; }
.text-input__count { font-family: var(--serif-en); font-size: 14px; color: var(--ink-soft); }
.text-input__status { font-size: 14px; color: var(--ok); }
.text-input__field {
  display: block; width: 100%; padding: 12px;
  background: rgba(0, 0, 0, .25); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 10px;
  font-family: var(--gothic); font-size: 16px; line-height: 1.7; resize: vertical;
}
.text-input__field::placeholder { color: var(--ink-soft); opacity: .8; }
.text-input__field:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* --- ひとりのお客様カード（DAY2成果物） ---------------------------------- */
.persona-card {
  margin: 0; padding: 16px 14px; border-left: 2px solid var(--gold-2);
  background: rgba(227, 195, 129, .07); border-radius: 0 12px 12px 0;
}
.persona-card__line { margin: 0; font-size: 16px; line-height: 1.9; color: var(--ink); }
.persona-card__line + .persona-card__line { margin-top: 2px; }

/* --- この人を、ここへ連れていく（DAY3の接続表示） ------------------------ */
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.journey__step {
  position: relative; padding: 14px 0 14px 24px; border-left: 1px solid var(--line);
  display: block;
}
.journey__step::before {
  content: ""; position: absolute; left: -4px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2);
}
.journey__step:last-child { border-left-color: transparent; }
.journey__label { display: block; font-size: 14px; color: var(--gold-2); letter-spacing: .08em; }
.journey__value { display: block; margin-top: 4px; font-size: 15px; color: var(--ink); }

/* --- 中間地点の成長（DAY3完了） ----------------------------------------- */
.growth-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.growth-list__item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.growth-list__mark {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--gold-2); color: #16110a;
  display: inline-grid; place-items: center; font-size: 14px; line-height: 1;
}

/* --- 前回までの再掲（DAY3導入） ----------------------------------------- */
.recap__caption { margin: 14px 0 6px; }
.persona-card--recap { background: rgba(255, 255, 255, .03); border-left-color: var(--line-2); }
.persona-card--recap .persona-card__line { font-size: 15px; color: var(--ink-2); }

/* --- 顧客導線図（DAY4）--------------------------------------------------- */
.jmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: jmap; }
.jmap__step {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0 16px 4px;
}
.jmap__step::after {
  content: ""; position: absolute; left: 17px; top: 44px; bottom: -8px;
  width: 1px; background: var(--line-2);
}
.jmap__step:last-child::after { display: none; }
.jmap__num {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--lm-surface);
  color: var(--gold-2); font-family: var(--serif-en); font-size: 15px;
  display: inline-grid; place-items: center;
}
.jmap__body { display: block; min-width: 0; }
.jmap__label { display: block; font-size: 14px; color: var(--gold-2); letter-spacing: .06em; }
.jmap__value {
  display: block; margin-top: 2px; font-family: var(--mincho);
  font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--ink);
}
.jmap__emotion { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-2); }

.journey-card { margin-top: 18px; }

/* --- 今は使わない候補（DAY4）-------------------------------------------- */
.unused { padding: 0; }
.unused__summary {
  cursor: pointer; list-style: none; padding: 16px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.unused__summary::-webkit-details-marker { display: none; }
.unused__summary::before { content: "＋"; color: var(--gold-2); font-weight: 400; }
.unused[open] .unused__summary::before { content: "－"; }
.unused .card__note { padding: 0 16px; }
.unused__groups { padding: 0 16px 16px; display: grid; gap: 16px; }
.unused__label { margin: 0 0 6px; font-size: 14px; color: var(--gold-2); }
.unused__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.unused__item {
  position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-soft);
}
.unused__item::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 10px; height: 1px; background: var(--ink-soft);
}

/* --- ボタン ------------------------------------------------------------ */
.cta-area { display: grid; gap: 10px; margin-top: 22px; }

.btn {
  appearance: none; font-weight: 700; font-size: 1rem;
  width: 100%; min-height: 54px; padding: 13px 18px;
  border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  letter-spacing: .06em;
  transition: filter .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
/* リンクをボタンとして置くときの共通指定（2026-09-06 §58）。
 * a要素は既定が inline なので、幅と高さの指定が効かない。
 * タップ目標を確保するため、ここでブロックにそろえる。 */
.screen__cta-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; text-decoration: none; text-align: center;
}
.screen__cta { margin: 18px 0 0; }

/* エルラボ＋の主ボタンと同じゴールド */
.btn--primary {
  color: #16110a;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 14px 34px -16px rgba(227, 195, 129, .6);
}
.btn--primary:hover { filter: brightness(1.06); }
.btn--secondary {
  background: transparent; color: var(--ink-soft); border-color: var(--line);
  min-height: 48px; font-size: 0.9375rem; font-weight: 400;
}
.btn--secondary:hover { color: var(--gold-2); border-color: var(--gold-2); }
.btn--ghost {
  background: transparent; color: var(--ink-soft); border-color: var(--line);
  min-height: 40px; font-size: 0.875rem; width: auto; padding: 7px 16px; border-radius: 999px;
  font-weight: 400;
}
.btn--ghost:hover { color: var(--gold-2); border-color: var(--line-2); }

/* --- 状態表示 ----------------------------------------------------------- */
.save-status {
  margin: 10px 0 0; font-size: 14px; color: var(--ok);
  display: flex; align-items: center; gap: 8px;
}
.save-status--info { color: var(--ink-soft); }
.save-status--warn { color: var(--warn); }
.save-status__mark {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  display: inline-grid; place-items: center;
  font-size: 14px; line-height: 1; color: #16110a; background: var(--ok);
}
.save-status--info .save-status__mark { background: var(--ink-soft); }
.save-status--warn .save-status__mark { background: var(--warn); }

.notice {
  margin: 10px 0 0; font-size: 14px; color: var(--ink-2);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}

/* --- プレビュー用メニュー ----------------------------------------------- */
.app-footer { margin-top: 32px; }
.app-footer__note { font-size: 14px; color: var(--ink-soft); text-align: center; margin: 14px 0 0; opacity: .75; }

.preview {
  border: 1px dashed var(--line); border-radius: 10px; background: transparent;
  padding: 10px 14px; font-size: 14px; color: var(--ink-soft);
}
.preview__summary { cursor: pointer; font-size: 14px; }
.preview__note, .preview__meta { margin: 8px 0 0; font-size: 14px; }
.preview__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.preview__log {
  max-height: 220px; overflow: auto;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; color: var(--ink-2);
}

/* --- レーダーチャート --------------------------------------------------- */
.radar { padding: 26px 40px 30px; }
.radar__plot { position: relative; width: 100%; max-width: 240px; margin: 0 auto; }
.radar__svg { display: block; width: 100%; height: auto; overflow: visible; }

.radar__ring, .radar__spoke { fill: none; stroke: var(--line); stroke-width: 1; }
.radar__ring:last-of-type { stroke: var(--line-2); }

.radar__area {
  fill: rgba(227, 195, 129, .16);
  stroke: var(--gold-2); stroke-width: 2; stroke-linejoin: round;
}
.radar__dot { fill: var(--gold-2); }
.radar__dot--lowest { fill: #16110a; stroke: var(--gold-2); stroke-width: 2.5; }

/* 改善後のかたちは「線種」で区別する（色だけに頼らない） */
.radar__improved {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-dasharray: 5 4; stroke-linejoin: round;
}
.radar__target { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 3 3; }
.radar__pulse { fill: none; stroke: var(--gold-2); stroke-width: 2; opacity: 0; }

.radar__label {
  position: absolute; font-size: 14px; line-height: 1.3;
  color: var(--ink-soft); white-space: nowrap;
}
.radar__label.is-lowest { color: var(--gold-2); font-weight: 700; }
.radar__label--0 { transform: translate(-50%, -145%); }
.radar__label--1 { transform: translate(-38%, -145%); }
.radar__label--2 { transform: translate(-50%, 35%); }
.radar__label--3 { transform: translate(-50%, 35%); }
.radar__label--4 { transform: translate(-62%, -145%); }

.card__subtitle {
  font-family: var(--mincho); font-size: 15px; font-weight: 700;
  margin: 18px 0 0; letter-spacing: .06em; color: var(--ink);
}
.card__note--center { text-align: center; }

.target-line {
  margin: 12px 0 0; padding: 12px 14px; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(227, 195, 129, .07);
}
.card--score-keep .target-line, .score-summary .target-line { text-align: left; }

/* --- 導入アニメーション（短く1回だけ・スクロール連動はしない） ----------- */
@keyframes sc-radar-grow {
  from { transform: scale(.12); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes sc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-pulse {
  from { opacity: .85; transform: scale(1); }
  to   { opacity: 0; transform: scale(2.8); }
}
/* 増えた部分・注目してほしい部分を、1回だけ軽く点滅させる */
@keyframes sc-blink {
  0%, 100% { opacity: 1; }
  35%      { opacity: .35; }
  70%      { opacity: 1; }
}
@keyframes sc-screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.radar.is-intro .radar__shape {
  transform-box: view-box; transform-origin: 100px 100px;
  animation: sc-radar-grow .7s cubic-bezier(.2, .8, .2, 1) both;
}
.radar.is-intro .radar__improved,
.radar.is-intro .radar__target { animation: sc-fade-in .5s ease-out .85s both; }
.radar.is-intro .radar__pulse {
  transform-box: view-box;
  animation: sc-pulse 1.2s ease-out .85s 1 both;
}

.meter.is-intro .meter__fill { animation: sc-grow-x .9s cubic-bezier(.2, .8, .2, 1) both; }
/* 改善後の目安：現れたあとに一度だけ点滅させて、増える部分だと分かるようにする */
.meter.is-intro .meter__target {
  animation: sc-fade-in .5s ease-out 1s both, sc-blink 1.1s ease-in-out 1.5s 1 both;
}
/* 最低軸の「まずここ」も一度だけ点滅させる */
.screen--result.is-intro .axis--lowest .tag--focus {
  animation: sc-blink 1.2s ease-in-out 1.3s 1 both;
}
/* 数字は等幅で送り、増えているあいだ幅が揺れないようにする */
.score-summary__num, .axis__score { font-variant-numeric: tabular-nums; }

.axis-list.is-intro .axis__bar-fill {
  transform-origin: left center;
  animation: sc-grow-x .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.1s + var(--i, 0) * .07s);
}

.screen.is-entering { animation: sc-screen-in .2s ease-out both; }

/* --- 完了演出（1回だけ・動きが苦手な設定では停止） ---------------------- */
@keyframes sc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.is-celebrating .card--project { animation: sc-rise .45s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .is-celebrating .card--project { animation: none; }
  /* 最終状態だけを表示する（both 指定のため、瞬時に終端へ進む） */
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- 狭幅（320px）対応 --------------------------------------------------- */
@media (max-width: 359px) {
  .app-shell { padding: 12px 12px 48px; }
  .app-header__title { font-size: 20px; }
  .score-summary__num { font-size: 48px; }
  .choice-list--inline { grid-template-columns: 1fr; }
  .card { padding: 16px 14px; }
  .radar { padding: 26px 34px 30px; }
  .btn { font-size: 0.9375rem; letter-spacing: .04em; }
}


/* --- スクロールで現れる（2026-08-21 とーる指示・正本§9の見直し対象）---------
 * .sc-reveal はJSからしか付かない。JSが動かない環境では最初から見えている。 */
.sc-reveal { opacity: 0; }
.sc-reveal.is-shown {
  animation: sc-reveal-in .72s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--rd, 0ms);
}
@keyframes sc-reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-reveal { opacity: 1; }
  .sc-reveal.is-shown { animation: none; }
}


/* --- DAY5（§29-D）------------------------------------------------------- */
.card__note--after { margin: 14px 0 0; }
.jmap-wrap { margin: 14px 0 0; }

.schedule__label {
  margin: 22px 0 10px; font-family: var(--mincho); font-size: 15px; font-weight: 700; color: var(--ink);
}
.schedule__summary {
  margin: 20px 0 0; padding: 14px 16px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(227, 195, 129, .07);
  font-family: var(--mincho); font-size: 16px; font-weight: 700; line-height: 1.8; color: var(--ink);
}

/* 完成した一本線シート（Screen AI） */
.final-sheet { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.final-sheet__item {
  display: grid; gap: 4px;
  padding: 16px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.final-sheet__day {
  font-family: var(--serif-en); font-size: 15px; color: var(--gold-2); letter-spacing: .1em;
}
.final-sheet__label {
  font-family: var(--mincho); font-size: 15px; font-weight: 700; color: var(--ink);
}
.final-sheet__value { font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.card--project:focus { outline: none; }
.card--project:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }


/* --- 長い本文の読ませ方（2026-08-21 とーる指示）---------------------------
 * 句点ごとに段落へ分け、行間と段落間を広く取る。文章そのものは変えていない。 */
.prose { margin: 0; }
.prose__line {
  margin: 0 0 30px; font-size: 16px; line-height: 2.3;
  color: var(--ink-2); letter-spacing: .03em;
}
.prose__line:last-child { margin-bottom: 0; }
.prose + .prose { margin-top: 40px; }

/* 段落が続くカードは、内側の余白も広く取る */
.card--reading { padding: 34px 22px; margin-bottom: 26px; }
@media (min-width: 720px) { .card--reading { padding: 42px 32px; } }
.card--reading .card__title { margin-bottom: 30px; line-height: 1.8; }
.card--reading .target-line { margin: 40px 0 0; }
.card--reading .prose + .target-line { margin-top: 40px; }
.card--reading .target-line + .prose { margin-top: 36px; }

/* 密着していた本文どうしに間隔を入れる（全画面共通の底上げ） */
.card__body + .card__body { margin-top: 18px; }
.card__body + .card__note { margin-top: 18px; }

/* 結果画面は、カードどうしの間隔も広めに取ってスクロールで読ませる */
.screen--result .card { margin-bottom: 26px; }
.screen--result .card--reading + .card { margin-top: 4px; }

/* 注記の段落は、本文より一段落ち着いたトーンにする */
.prose--note .prose__line { font-size: 14px; line-height: 2.15; color: var(--ink-soft); margin-bottom: 22px; }

/* 導入文（3行）も、結果画面では行間・行あきを広く取る */
.screen--result .card--lead .lead-line { margin: 0 0 28px; font-size: 16px; line-height: 2.3; }
.screen--result .card--lead .lead-line:last-child { margin-bottom: 0; }


/* --- 1軸だけのメーター（いま → 目標）------------------------------------ */
.axis-meter { margin: 26px 0 0; }
.axis-meter__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
}
.axis-meter__label { font-family: var(--mincho); font-size: 15px; font-weight: 700; color: var(--ink); }
.axis-meter__value {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--serif-en); font-size: 17px;
}
.axis-meter__now { color: var(--ink-2); }
.axis-meter__arrow { color: var(--ink-soft); font-size: 15px; }
.axis-meter__goal { color: var(--gold-2); font-weight: 600; }
.axis-meter__track {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.axis-meter__target {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 999px; background: rgba(227, 195, 129, .18);
  border-right: 2px dashed var(--gold-2);
}
.axis-meter__fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform-origin: left center;
}
.axis-meter.is-intro .axis-meter__fill { animation: sc-grow-x .9s cubic-bezier(.2, .8, .2, 1) both; }
.axis-meter.is-intro .axis-meter__target {
  animation: sc-fade-in .5s ease-out 1s both, sc-blink 1.1s ease-in-out 1.5s 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .axis-meter.is-intro .axis-meter__fill,
  .axis-meter.is-intro .axis-meter__target { animation: none; }
}


/* --- 30日後の再診断と、希望者向けサポート（§36-4／§36-5）------------------ */
.reassess__due {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 0; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(227, 195, 129, .07);
}
.reassess__due-label { font-size: 14px; color: var(--gold-2); letter-spacing: .1em; }
.reassess__due-date {
  font-family: var(--serif-en); font-size: 20px; color: #fff;
}
.support__title {
  margin: 0 0 20px; font-family: var(--mincho); font-size: 16px; font-weight: 700;
  line-height: 1.9; color: var(--ink);
}
/* サポート案内は、完了体験より目立たせない（§36-4 絶対条件） */
.card--support { border-color: var(--line); background: rgba(255, 255, 255, .02); }
.card--support .cta-area { margin-top: 24px; }


/* --- フッターの規約リンクと運営者表示（公開版）--------------------------- */
/* 2026-09-10 とーる指示：押させたいものではないので、目立たせない。
   下線と金色をやめ、小さく・暗くして、置いてあるだけの見え方にする。 */
.app-footer__legal, .lp-footer__legal {
  margin: 14px 0 0; font-size: 12px; line-height: 1.9;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px;
  opacity: .72;
}
.app-footer__legal a, .lp-footer__legal a {
  color: var(--ink-soft); text-decoration: none;
}
.app-footer__legal a:hover, .lp-footer__legal a:hover {
  color: var(--ink); text-decoration: underline;
}
.app-footer__legal span, .lp-footer__legal span { color: var(--line-2); }
.app-footer__owner, .lp-footer__owner {
  margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center;
}


/* --- 各DAYの共通動画（§41-C／依頼15）--------------------------------
 * 素材が未登録のあいだは、そもそもこの要素自体が作られない。
 * 動画を見なくてもワークへ進めるので、CTAより控えめな見た目にする。 */
.btn--small { padding: 10px 16px; font-size: 14px; }

.dvid { padding: 20px 16px; }
.dvid__head { margin: 0 0 14px; }
.dvid__eyebrow { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.dvid__title {
  margin: 0; font-family: var(--mincho);
  font-size: 17px; line-height: 1.7; color: var(--ink);
}
.dvid__duration { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }

.dvid__player {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 12px; background: #000;
}
.dvid__player:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.dvid__transcript { margin: 14px 0 0; }
.dvid__transcript-summary {
  cursor: pointer; font-size: 14px; color: var(--gold-2);
  padding: 8px 0; list-style: none;
}
.dvid__transcript-summary::-webkit-details-marker { display: none; }
.dvid__transcript-summary::before { content: "＋ "; }
.dvid__transcript[open] .dvid__transcript-summary::before { content: "− "; }
.dvid__transcript-summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.dvid__script { margin: 10px 0 0; }
.dvid__seg { margin: 0 0 16px; }
.dvid__seg:last-child { margin-bottom: 0; }
.dvid__seg-label { margin: 0 0 6px; font-size: 14px; color: var(--gold-2); }
.dvid__seg-line { margin: 0 0 8px; font-size: 15px; line-height: 1.95; color: var(--ink-2); }
.dvid__seg-line:last-child { margin-bottom: 0; }

.dvid__actions { margin: 16px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.dvid__actions .btn { flex: 1 1 auto; }
.dvid__note { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }

.dvid--script .dvid__summary {
  cursor: pointer; font-size: 14px; color: var(--ink-soft);
  list-style: none; padding: 4px 0;
}
.dvid--script .dvid__summary::-webkit-details-marker { display: none; }

@media (max-width: 359px) {
  .dvid__actions { flex-direction: column; }
}


/* --- 最低軸のイメージイラスト（2026-08-24 Codex・あかり確定）------------
 * 「いま最初に整える場所」を表す絵。性格タイプではない。
 * 並びは 一言 → 補助文 → イラスト。軸名は焼き込まず文字で重ねる。
 * レーダーチャートとCTAより強くならないよう、幅を抑えて中央に置く。
 * 画像は3:2。枠も3:2なので切り取りは起きない（object-fitは使わない）。 */
.rti {
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rti__head { margin: 0 0 14px; text-align: center; }

.rti__caption {
  margin: 0;
  font-family: var(--mincho);
  font-size: 17px;
  line-height: 1.7;
  color: var(--gold-2);
}

.rti__note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.rti__frame {
  position: relative;
  width: 100%;
  /* レーダーチャート（描画部240px）より目立たせない。
   * 大きくしすぎると、結果の主役が絵になってしまう。 */
  max-width: 300px;
  /* 読み込み前でも高さが決まるので、あとから下の文章が押し下げられない */
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lm-surface-2);
}

.rti__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 軸名。画像の左上には余白があるので、そこへ重ねる。
 * 絵柄が明るくても読めるよう、下に薄い影を敷く。 */
.rti__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(9, 12, 18, .62);
  border: 1px solid rgba(227, 195, 129, .34);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(2px);
}

/* 詳細結果は情報が多いので、少し控えめにする */
.rti--compact .rti__frame { max-width: 260px; }
.rti--compact .rti__caption { font-size: 16px; }

/* aspect-ratio が使えない環境では、width/height属性の比率がそのまま効く */
@supports not (aspect-ratio: 3 / 2) {
  .rti__frame { height: auto; }
}

@media (max-width: 359px) {
  .rti__frame { max-width: 100%; }
  .rti__badge { font-size: 14px; top: 6px; left: 6px; }
}


/* --- ほかの講座も見る（2026-09-09 §66-5）---------------------------------
 * 推薦ではなく、通常価格の選択肢。開くまで場所を取らない。
 * おすすめのCTAより弱く見せる（同じ強さで並べない）。 */
.course-list { margin: 26px 0 0; border-top: 1px solid var(--line); padding-top: 18px; }
.course-list__summary {
  cursor: pointer; list-style: none;
  font-size: 14px; color: var(--ink-soft); letter-spacing: .02em;
}
.course-list__summary::-webkit-details-marker { display: none; }
.course-list__summary::before { content: "＋ "; color: var(--gold-2); }
.course-list[open] .course-list__summary::before { content: "− "; }
.course-list__summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.course-list__note { margin: 12px 0 0; }
.course-list__items { margin: 14px 0 0; padding: 0; list-style: none; }
.course-list__item {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line);
}
.course-list__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.course-list__link { font-size: 15px; color: var(--gold-2); }
.course-list__summary-text { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.course-list__price { font-size: 14px; color: var(--ink-soft); }

/* --- 強みと5軸のつながり（2026-09-10）---------------------------------
 * 例 → 転換 → 本文 → 結論。全部を同じ大きさで並べない。
 * 色だけに頼らず、太さと大きさでも段をつける。 */
.strength__examples { margin: 0 0 18px; }
.strength__example {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
}
.strength__example:last-child { margin-bottom: 0; }
/* 例の中で拾ってほしいところ。文の途中でも1つづきに読める */
.strength__em { color: var(--ink); font-weight: 700; }

.strength__turn {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--ink);
}

.strength__body { margin: 0 0 18px; }
.strength__line {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
}
.strength__line:last-child { margin-bottom: 0; }

.strength__close {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--gold-2, #e3c381);
}

@media (max-width: 359px) {
  .strength__turn { font-size: 16px; }
  .strength__close { font-size: 18px; }
}

/* 規約類（特商法など）は、企画内の最後のオファー画面だけに出す（2026-09-10 とーる指示）。
   最初の診断案内は shindan-lp.html 側のフッターが担当する。 */
.app-footer__legalbox { display: none; }
body[data-screen="day5_done"] .app-footer__legalbox { display: block; }

/* 次のDAYがまだ開いていないとき（2026-09-11 とーる判断・1日1DAY）。
   「止められた」ではなく「今日のぶんは終わった」に見えるように、
   警告色は使わず、完了カードと同じ落ち着いた面にする。 */
.card--locked {
  border-style: dashed;
  background: transparent;
}
.locked__title { margin-bottom: 10px; }
.locked__body { color: var(--ink-2); }

/* 診断 → 企画 の切り替わりを見せる一枚（2026-09-11 とーる判断C）。
   ここは説明の場ではないので、余白を多く取って、読むものを少なくする。
   スクロールさせないこと。1画面で終わらせる。 */
/* 画面いっぱいに置くが、下のフッターぶんは空けておく。
   ここを 100vh にすると、フッターのぶんだけページがはみ出す（§68｜5）。 */
.screen--handover {
  position: relative;
  min-height: calc(100vh - 190px);
  display: grid;
  /* 上に写真だけの余白を作るため、真ん中ではなく少し下へ寄せる。
     safe を付けておくと、はみ出したときに上が隠れない（狭い画面・文字拡大） */
  align-content: safe center;
  justify-items: center;
  padding-top: 62px;
}

/* 上部の背景写真（2026-09-11 §68）。
   ★独立した画像ブロックにしない。置くと画面が縦に伸びて、収まらなくなる。
   ★::before で描くので、読み上げにもタブ移動にも出てこない（装飾扱い）。
   ★読み込めなくても、元の暗い背景が残るだけ。文字とボタンはそのまま使える。 */
.screen--handover::before {
  content: '';
  position: absolute;
  /* カードの内側いっぱいまで広げる。値は .app-shell の padding と同じ。
     上も伸ばさないと、カードの中に四角が浮いて見える */
  top: -14px;
  left: -14px; right: -14px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  /* かぶせの層を先に書く。あとの層（写真）より上に乗る。
     下へ向かうほど濃くして、そのまま元の背景色へ溶かす */
  background-image:
    linear-gradient(180deg,
      rgba(9, 12, 18, .26) 0%,
      rgba(9, 12, 18, .40) 24%,
      rgba(9, 12, 18, .60) 46%,
      rgba(9, 12, 18, .82) 72%,
      rgba(9, 12, 18, .92) 100%),
    url('../images/handover-business-woman-v1.webp');
  background-size: cover, auto 122%;
  /* 顔とスマホが上のほうに来るように寄せる。
     文字（見出し）はこの下から始まるので、顔に重ならない */
  background-position: center, 50% 4%;
  background-repeat: no-repeat, no-repeat;
  /* 下へ向かって帯ごと消す。背景色で塗ると、カードの地とわずかに違って
     横一本の線に見えるため（2026-09-11 PC表示で確認）。 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0) 100%);
}

/* 文字は写真より前に置く */
.handover { position: relative; z-index: 1; }
.handover {
  width: min(100%, 460px); text-align: center; padding: 18px 4px;
}
/* 写真の上に乗るので、字を明るくして、うしろに濃い影を敷く。
   写真そのものを暗くせずに読めるようにするため（2026-09-11 実測 2.65:1 → 改善）。 */
.handover__done {
  margin: 0; font-size: 13px; letter-spacing: .14em; text-indent: .14em;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(9, 12, 18, .92), 0 0 3px rgba(9, 12, 18, .85);
}
/* 区切りの線。ここで場面が変わる、という合図 */
.handover__rule {
  width: 44px; height: 1px; margin: 20px auto;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.handover__title {
  margin: 0; font-family: var(--mincho); font-weight: 700; color: #fff;
  font-size: clamp(24px, 7vw, 30px); line-height: 1.75;
}
.handover__title-line { margin: 0; }
.handover__body { margin: 20px 0 4px; color: var(--ink-2); font-size: 15px; }
/* 確定本文の1行（22字）を390px幅で折り返さないため、本文と同じ15pxにそろえる。
   16pxのままだと「た。」だけが次の行に落ちる（§68｜5 の確認で判明）。 */
.handover__body .prose__line { margin: 0 0 6px; font-size: 15px; }
.handover__note { margin: 14px 0 0; font-size: 12px; color: var(--ink-3, var(--ink-2)); opacity: .8; }

/* どう進むのか（2026-09-11 とーる指示）。
   本文より一段小さく、囲って「事務的な説明」だと分かる見た目にする。 */
.handover__flow {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid rgba(238, 214, 163, .18); border-radius: 12px;
  background: rgba(238, 214, 163, .04);
}
.handover__flow-line { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-2); }

/* 画面が広いとき（.app-shell の padding が 24px になる）に合わせる。
   カードの角も丸いので、写真の上端をそこへそろえる */
@media (min-width: 560px) {
  .screen--handover::before {
    /* 枠の1pxぶんまで含めて、カードの角の丸みにそろえる */
    top: -27px;
    left: -25px; right: -25px;
    border-radius: 30px 30px 0 0;
  }
}

/* 外部保存のお知らせ（2026-09-15）。
   画面の操作は妨げない。下に1枚だけ出す */
.savebar {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #3a3a3a);
  border-radius: 12px;
  background: rgba(201, 164, 76, 0.08);
}
.savebar__title { margin: 0; font-size: 0.875rem; font-weight: 700; }
.savebar__note { margin: 6px 0 0; font-size: 0.875rem; }
/* 確定本文の改行を、そのまま1行ずつ出す（2026-09-19） */
.savebar__line { margin: 0; font-size: 0.875rem; }
.savebar__line + .savebar__line { margin-top: 2px; }
.savebar__btn { margin-top: 10px; display: block; width: 100%; box-sizing: border-box; }
a.savebar__btn { text-align: center; text-decoration: none; }

/* === Codex scan-first preview / 2026-09-16 ===
 * 導入・結果・参加案内だけ。設問、DAYの作業画面、保存UIには波及させない。
 * 強調は金色の結論、通常文は白、補足は明るい灰色。固定高は使わない。 */
.scan-mode, .scan-lp, .scan-intro, .scan-result { --scan-muted: #c0c6d0; }
.scan-title { font-family: var(--mincho); font-size: clamp(1.45rem, 4.8vw, 2rem); line-height: 1.65; white-space: pre-line; margin: 0 0 1.25rem; color: var(--ink); overflow-wrap: anywhere; }
.scan-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--gold-2); margin: 0 0 .8rem; }
.scan-note { font-size: .875rem; line-height: 1.9; color: var(--scan-muted, #c0c6d0); margin: .9rem 0; overflow-wrap: anywhere; }
.scan-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1rem 0; color: var(--ink); }
.scan-details + .scan-details { border-top: 0; }
.scan-details > summary { cursor: pointer; padding: 1.15rem .25rem; font-size: 1rem; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.scan-details > summary::marker { color: var(--gold-2); }
.scan-details > summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.scan-details[open] > summary { color: var(--gold-2); }
.scan-details__body { padding: .5rem .5rem 1.2rem; }
.scan-details__body p { line-height: 1.95; }
.scan-rules { list-style: none; padding: 0; margin: 1.5rem 0; }
.scan-rules li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.scan-rules strong { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
.scan-rules p { font-size: .9375rem; line-height: 1.85; color: var(--scan-muted); margin: .35rem 0 0; }
.scan-number { color: var(--gold-2); font-family: Georgia, serif; font-size: 1.5rem; line-height: 1.4; }
.scan-facts { padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; }
.scan-facts li { border: 1px solid var(--line); border-radius: 999px; color: var(--gold-2); padding: .45rem .85rem; font-size: .875rem; }
.scan-intro { padding: 2rem .4rem; max-width: 34rem; margin: 0 auto; }
.scan-intro > .btn { width: 100%; margin-top: 1rem; }
.scan-intro > .scan-note { text-align: center; }
.scan-focus { background: linear-gradient(145deg, #202734, #121924); border: 1px solid rgba(227,195,129,.28); border-radius: 1.25rem; padding: 1.6rem 1.2rem; margin-bottom: 1.25rem; }
.scan-focus__title { font-size: 1.125rem; font-weight: 500; line-height: 1.8; margin: 0 0 1rem; }
.scan-focus__title strong { display: block; color: var(--gold-2); font-family: var(--mincho); font-size: 1.8rem; margin-top: .3rem; }
.scan-subhead { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--gold-2); }
.scan-reason { font-size: 1rem; line-height: 1.95; margin: 0; }
.scan-next { padding: 2rem 0 1rem; margin-top: 1.25rem; }
.scan-next > p { font-size: 1rem; line-height: 1.9; }
.scan-result .card { margin-bottom: 1.25rem; }
.scan-result .result-type { margin: 1rem 0; }
.scan-result .strength__example { font-size: 1rem; }
.scan-result .cta-area { margin-top: 1.5rem; }
/* 5DAY：今日の一つと成果物に視線を集める。選択・保存の仕様は変えない。 */
.challenge-view { --cv-note: #c5cad3; }
.offer-view { margin-top: 2rem; padding: clamp(1.2rem,4vw,2rem); border: 1px solid #ad925b99; background: linear-gradient(150deg,#262b33,#141c28); scroll-margin-top: 1rem; }
.offer-view__eyebrow { color: #ebcd94; font-size: .8rem; letter-spacing: .12em; margin: 0 0 .8rem; }
.offer-view__title { font-size: clamp(1.4rem,5.4vw,2rem); line-height: 1.65; color: #fff4dd; white-space: pre-line; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.offer-view__reason, .offer-view__next { color: #cbd3df; font-size: .9375rem; line-height: 1.9; }
.offer-view__product { background: #f0e8d8; color: #282b32; border-radius: .8rem; overflow: hidden; margin: 1.5rem 0; }
.offer-view__photo { display:block; width:100%; height:10rem; object-fit:cover; object-position:center; }
.offer-view__name { padding: 1rem 1.2rem .3rem; margin: 0; font-size: 1.1rem; line-height: 1.8; font-weight:700; white-space:pre-line; }
.offer-view .prose__line { font-size:.9375rem; line-height:1.9; margin:.5rem 0; }
.offer-view__facts { padding: .5rem 1.2rem 1.2rem 2.3rem; margin:0; font-size:.9375rem; line-height:1.9; }
.offer-view__detail-heading { font-size:1rem; margin-top:1.3rem; color:#edce96; }
.offer-view__steps { padding:0; list-style:none; counter-reset:nextstep; margin:1.5rem 0; }
.offer-view__steps li { counter-increment:nextstep; border-bottom:1px solid #8b96a444; padding:1rem 0; line-height:1.8; }
.offer-view__steps li::before { content:'0' counter(nextstep) ' '; color:#edce96; font-weight:700; margin-right:.6rem; }
.offer-view .course-list { margin-top:1.5rem; }
.offer-view .course-list__item { padding:1rem 0; line-height:1.8; }
.offer-view--self { border-color:#627b78; }
.next-step-shell { max-width:48rem; }
.next-step-header { margin:1.5rem 0 2rem; }
.next-step-shell .offer-view { margin-top:1rem; }
.next-step-shell .btn { white-space:normal; height:auto; min-height:3.4rem; line-height:1.8; }
.next-step-shell .app-footer { font-size:.8rem; line-height:2; }
.next-step-shell .app-footer a { color:#c2b493; text-underline-offset:.2em; }
.next-step-entry { background:linear-gradient(135deg,#2d3035,#182331); border-color:#b69b6555; }
.next-step-entry .btn { margin-top:1rem; }
.next-step-back { color:#e5c994; display:inline-block; padding:.75rem 0; }
.challenge-view .app-header { margin-bottom: 1.6rem; }
.challenge-view .app-header__eyebrow, .challenge-view .app-header__program { display: none; }
.challenge-view .app-header__title { font-size: clamp(1.45rem, 5.7vw, 2.1rem); line-height: 1.65; margin: 1rem 0 1.3rem; overflow-wrap: anywhere; }
.challenge-view--intro .app-header__title { white-space: pre-line; }
.challenge-trail { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; margin: 1rem 0; padding: 0; list-style: none; }
.challenge-trail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #aab3c0; text-align: center; font-size: .75rem; line-height: 1.65; overflow-wrap: anywhere; }
.challenge-trail li::before { content: ''; position: absolute; height: 1px; background: #59606a; left: -50%; width: 100%; top: .9rem; }
.challenge-trail li:first-child::before { display: none; }
.challenge-trail__dot { position: relative; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid #737d8c; background: #172130; font-size: .85rem; }
.challenge-trail .is-current { color: #f5d99d; font-weight: 700; }
.challenge-trail .is-current .challenge-trail__dot { border: 2px solid #ebcc90; box-shadow: 0 0 0 3px #ebcc901c; }
.challenge-trail .is-done .challenge-trail__dot { color: #18202b; background: #e7ca90; border-color: #e7ca90; }
.challenge-goal { padding: 1.5rem; border: 1px solid #9b835355; border-radius: 1rem; background: linear-gradient(145deg,#2b2c2e,#192535); margin: 1.2rem 0; }
.challenge-kicker { color: #e7ca90; font-size: .8rem; letter-spacing: .1em; margin: 0 0 .8rem; }
.challenge-goal__main { font-size: 1.25rem; font-weight: 700; line-height: 1.85; margin: 0; color: #fff5df; }
.challenge-note { font-size: .9375rem; line-height: 1.85; color: var(--cv-note); }
.challenge-output { border-top: 1px solid #b8a27644; padding-top: .9rem; margin: 1rem 0 0; color: #e7ca90; font-size: .9375rem; line-height: 1.8; }
.challenge-details { border-top: 1px solid #52607070; margin: 1rem 0; }
.challenge-details > summary { padding: 1rem .3rem; cursor: pointer; color: #cbd4df; font-size: .9375rem; line-height: 1.8; }
.challenge-details > summary:focus-visible { outline: 2px solid #edcc8c; outline-offset: 4px; }
.challenge-details > .card { margin-top: .3rem; }
.challenge-view .card__note { color: var(--cv-note); line-height: 1.9; }
.challenge-view .choice { border-radius: .8rem; margin-bottom: .7rem; }
.challenge-view .choice__title { font-size: 1.0625rem; line-height: 1.85; }
.challenge-view .choice__sub { font-size: .9375rem; line-height: 1.85; }
.challenge-view .btn { font-size: 1rem; white-space: normal; height: auto; min-height: 3.4rem; line-height: 1.7; overflow-wrap: anywhere; }
.challenge-view .cta-area { margin: 1.3rem 0 1.8rem; }
.challenge-view textarea { font-size: 1rem; line-height: 1.9; }
.challenge-view--done .card--project { background: #f0e8d8; color: #252a30; border-color: #d5bf90; }
.challenge-view--done .card--project .card__title, .challenge-view--done .card--project .kv__value,
.challenge-view--done .card--project .final-sheet__value { color: #252a30; }
.challenge-view--done .card--project .kv__key, .challenge-view--done .card--project .final-sheet__label,
.challenge-view--done .card--project .final-sheet__day { color: #6a5024; }
.challenge-view--done .card--score-keep { background: transparent; border-color: #536172; }
@media (prefers-reduced-motion: no-preference) {
  .challenge-view.is-entering .challenge-goal { animation: sc-screen-in .45s ease-out both; }
}
/* とーる選定：詳細結果は改良版＋短い導入演出。本文・CTAを待たせない。 */
@media (prefers-reduced-motion: no-preference) {
  .scan-result--intro .scan-focus__title { animation: sc-screen-in .6s ease-out both; }
  .scan-result--intro .scan-focus .result-type { animation: sc-screen-in .65s ease-out .1s both; }
}

/* 診断前：写真で区切り、見出しと結論だけでも話を追える。 */
.dlp.scan-mode { max-width: 48rem; padding: 1.5rem 1.25rem 3rem; }
.scan-mode .dlp-hero { margin-bottom: 3.5rem; }
.scan-mode .dlp-hero__title { font-size: clamp(1.65rem, 5.5vw, 2.65rem); line-height: 1.65; }
.scan-mode .dlp-hero__title-line:last-child { color: var(--gold-2); }
.scan-mode .dlp-hero__copy { max-width: 39rem; margin-inline: auto; }
.scan-mode .dlp-section { margin-bottom: 3.5rem; }
.scan-mode .dlp-heading { font-size: clamp(1.35rem, 4.8vw, 1.9rem); line-height: 1.65; }
.scan-mode .dlp-body__line, .scan-mode .dlp-lead { font-size: 1rem; line-height: 1.95; margin-bottom: 1rem; }
.scan-mode .dlp-cta__note, .scan-mode .dlp-note, .scan-mode .dlp-note__line { font-size: .875rem; line-height: 1.8; }
.scan-mode .dlp-open { padding: 0; }
.scan-mode .dlp-open__line { font-size: 1rem; margin: 1.7rem 0; line-height: 1.9; }
.scan-mode .dlp-open__em { display: block; font-size: clamp(1.2rem, 4.5vw, 1.5rem); color: var(--ink); font-weight: 700; margin-top: .35rem; }
.scan-mode .dlp-open__close { font-size: .9375rem; line-height: 1.9; color: var(--scan-muted); }
.scan-mode .dlp-pairs { margin: 1.5rem 0; }
.scan-mode .dlp-pair__lead { font-size: .9375rem; line-height: 1.9; }
.scan-mode .dlp-pair__point { font-size: 1.25rem; line-height: 1.75; margin-top: .6rem; }
.scan-mode .dlp-close { font-size: 1.25rem; line-height: 1.8; color: var(--gold-2); margin-top: 1.5rem; }
.scan-mode .dlp-photo { max-width: 100%; margin: 1.75rem auto; }
.scan-mode .dlp-photo__img { max-height: 18rem; object-fit: cover; object-position: center 42%; border-radius: 1rem; }
.scan-mode .dlp-photo--small { max-width: 23rem; }
.scan-mode .dlp-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; counter-reset: scan-result; }
.scan-mode .dlp-list__item { border: 1px solid var(--line); border-radius: .8rem; background: #1a222e; padding: 1rem .7rem; margin: 0; font-size: .9375rem; line-height: 1.7; }
.scan-mode .dlp-list__item::before { counter-increment: scan-result; content: '0' counter(scan-result); position: static; display: block; color: var(--gold-2); font-size: 1.25rem; margin-bottom: .5rem; }
.scan-mode .dlp-sample { max-width: 25rem; margin: 1.5rem auto; }
.scan-mode .dlp-fold { margin-bottom: .75rem; }
.scan-mode .dlp-fold__summary { min-height: 3rem; }
.scan-mode .dlp-fold__title { font-size: 1rem; line-height: 1.7; }
.scan-mode .dlp-fold__more { font-size: .8125rem; }
.scan-mode .dlp-map__note-line { font-size: 1rem; line-height: 1.95; }
.scan-mode .dlp-section--author { margin-top: 2.5rem; }
.scan-mode .dlp-variety { margin: 1.25rem 0; }
.scan-mode .dlp-variety__heading { font-size: 1.125rem; }

/* 参加案内：成果物の構成見本を先に。任意説明は後ろへ。 */
.lp.scan-lp { max-width: 48rem; padding-inline: 1.25rem; }
.scan-lp .lp-hero { margin-bottom: 2.5rem; padding-top: 2rem; padding-bottom: 1.5rem; }
.scan-lp .lp-hero__title { font-size: clamp(1.7rem, 5.5vw, 2.6rem); line-height: 1.65; white-space: pre-line; }
.scan-lp .lp-hero__body { font-size: 1rem; line-height: 1.95; white-space: pre-line; }
.scan-lp .lp-hero__score { margin: 1rem 0; }
.scan-lp .lp-score__value { font-size: 1rem; }
.scan-lp .lp-hero__micro { font-size: .875rem; }
.scan-overview { scroll-margin-top: 1.5rem; }
.scan-outcome-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.scan-outcome-grid .lp-photo { width: 100%; max-width: none; margin: 0; }
.scan-outcome-grid .lp-photo__img { width: 100%; max-height: 17rem; object-fit: cover; border-radius: 1rem; }
.scan-sheet { padding: 1.25rem; border-radius: .9rem; border: 1px solid #d6c6a4; background: #efe9de; color: #272b30; box-shadow: 0 .5rem 2rem rgba(0,0,0,.12); }
.scan-sheet__caption { margin: 0 0 .9rem; font-size: .8125rem; letter-spacing: .04em; color: #605744; }
.scan-sheet ol { list-style: none; padding: 0; margin: 0; }
.scan-sheet li { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: .75rem; padding: .85rem 0; border-bottom: 1px solid #cfc6b6; font-size: .9375rem; line-height: 1.7; }
.scan-sheet__day { color: #766140; font-size: .8125rem; }
.scan-sheet .scan-note { color: #5b554d; font-size: .875rem; }
.scan-how-title { margin-top: 2.5rem; }
.scan-lp .lp-join { margin: 2.5rem 0; padding: 1.5rem 1.1rem; border: 1px solid rgba(227,195,129,.35); border-radius: 1.1rem; background: #1c2632; }
.scan-lp .lp-join__title { font-size: 1.65rem; color: var(--gold-2); }
.scan-lp .lp-join__body { font-size: 1rem; line-height: 1.9; }
.scan-lp .lp-declare { margin-top: 1.5rem; }
.scan-lp .lp-declare__text { font-size: 1rem; }
.scan-lp .lp-join__cta { margin-top: 1.5rem; }
.scan-lp .lp-section { margin: 0; padding: 1.25rem .5rem; }
.scan-lp .lp-section__title { font-size: 1.25rem; }
.scan-lp .lp-prose__line { font-size: 1rem; line-height: 1.95; margin-bottom: 1rem; }
.scan-lp .sc-reveal, .scan-lp .sc-reveal.is-shown { opacity: 1; animation: none; transform: none; }
.scan-lp-fold { margin: 0; }
.scan-lp #lp-after { margin-bottom: 2rem; }
.scan-lp .lp-program { flex-wrap: wrap; }
.scan-lp .lp-program__name { white-space: normal; }
.scan-mode .btn, .scan-lp .btn, .scan-intro .btn, .scan-result .btn { white-space: normal; height: auto; min-height: 3rem; line-height: 1.65; padding: .9rem 1rem; overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .scan-outcome-grid { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
  .scan-outcome-grid .lp-photo__img { height: 100%; max-height: none; }
}
@media (max-width: 370px) {
  .scan-mode .dlp-list { grid-template-columns: 1fr; }
  .scan-mode .dlp-list__item { display: flex; align-items: center; gap: 1rem; padding: .8rem; }
  .scan-mode .dlp-list__item::before { margin: 0; }
}

/* 診断ファネルの動画（②結果・③企画案内）2026-10-10 */
.fvid { margin: 16px auto 4px; max-width: 640px; text-align: center; }
.fvid__player { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #090c12;
  border: 1px solid var(--line, rgba(227, 195, 129, .14)); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.fvid__caption { margin-top: 8px; font-size: .8rem; line-height: 1.7; opacity: .9; }
.fvid__note { display: block; font-size: .68rem; opacity: .7; }