/*
 * YURAI LP ／ セクション別レイアウト
 * 構成は docs/IMPLEMENTATION_PLAN.md §4、コピーの出典は docs/COPY.md。
 */

/* ═══════════ Section 01 HERO ═══════════ */

.yu-hero { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 92px); }

.yu-hero-in {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(400px, 1.12fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.yu-hero h1 { margin-bottom: 20px; }
.yu-hero-sub { font-size: clamp(15px, 1.7vw, 18px); color: var(--yu-ink2); font-weight: 500; }

.yu-hero-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--yu-pill);
  background: #e9eef7;
  color: var(--yu-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 20px;
}

.yu-hero-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--yu-line-s);
}
.yu-hero-mark .yu-logo { font-size: 24px; }
.yu-hero-mark .en {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--yu-mut);
}

/* ═══════════ アニメーション共通 ═══════════
   強調は「加算」だけで行う。減光やopacity:0で始めない。
   どの時点で止まっても、どの段階でも、全文が読める状態を保つ。
   ─────────────────────────────────────────── */

.yu-anim-bar { display: flex; justify-content: flex-end; margin-top: 10px; }

.yu-anim-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--yu-ink3);
  background: var(--yu-white);
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-pill);
  padding: 7px 15px;
  cursor: pointer;
  /* 押せるものは指1本で確実に押せる大きさにする。**画面幅で変えない。**
     ここを狭い画面だけ 44px にしていたので、Desktop で 32px のままだった。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.yu-anim-btn:hover { border-color: var(--yu-red); color: var(--yu-red); }
.yu-anim-btn[disabled] { opacity: .5; cursor: default; }
.yu-anim-btn[aria-pressed="true"] { background: var(--yu-s1); }

.yu-sample {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--yu-mut);
}

/* ═══════════ Section 01 HERO のフロー ═══════════ */

.yu-flow {
  background: var(--yu-white);
  border: 1px solid var(--yu-line-s);
  border-radius: var(--yu-r-l);
  box-shadow: var(--yu-shadow);
  overflow: hidden;
}
.yu-flow__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--yu-s1);
  border-bottom: 1px solid var(--yu-line-s);
}
.yu-flow__chrome .d { width: 8px; height: 8px; border-radius: 50%; background: #d9dee7; }
.yu-flow__chrome .u {
  margin-left: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--yu-mut);
}

.yu-flow__body { padding: 20px; display: grid; gap: 12px; }

.yu-flow__band {
  border: 1px solid var(--yu-line-s);
  border-left: 3px solid var(--yu-line);
  border-radius: var(--yu-r);
  padding: 14px 16px;
  background: var(--yu-s3);
  transition: border-color .35s var(--yu-ease), background .35s var(--yu-ease);
}
.yu-flow__band.is-on { border-left-color: var(--yu-red); background: var(--yu-white); }
.yu-flow__band--yurai { background: var(--yu-navy-d); border-color: transparent; }
.yu-flow__band--yurai.is-on { background: var(--yu-navy-d); border-left-color: var(--yu-red-l); }

.yu-flow__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--yu-mut); }
.yu-flow__band--yurai .yu-flow__k { color: #fff; }
.yu-flow__band--yurai .yu-logo { font-size: 17px; color: #fff; }
.yu-flow__band--yurai .yu-logo i { color: var(--yu-red-l); }

.yu-flow__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.yu-flow__chips li {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: var(--yu-pill);
  background: var(--yu-s1);
  color: var(--yu-ink3);
}

.yu-flow__steps { margin-top: 10px; display: grid; gap: 6px; }
.yu-flow__steps li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px;
  color: var(--yu-on-navy);
  transition: color .3s var(--yu-ease);
}
.yu-flow__steps li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yu-on-navy-mut);
  transition: background .3s var(--yu-ease), box-shadow .3s var(--yu-ease);
}
.yu-flow__steps li.is-on { color: #fff; font-weight: 700; }
.yu-flow__steps li.is-on::before { background: var(--yu-red-l); box-shadow: 0 0 0 4px rgba(255,90,112,.2); }
.yu-flow__steps li.is-done::before { background: var(--yu-red-l); }

.yu-flow__out { margin-top: 8px; font-size: 14px; color: var(--yu-ink2); }
.yu-flow__out b { color: var(--yu-red); }

/* ═══════════ Section 02 仕事のワンシーン ═══════════
   1シーン＝1行。横に3枚並べない。
   ステージが主役。外の文章は「ラベル＋見出し＋1〜2文＋3項目＋締め」だけ。
   工程の詳細はステージの中で順番に見せる（常時列挙しない）。
   ─────────────────────────────────────────── */

.yu-story {
  display: grid;
  grid-template-columns: 1.85fr 1fr;   /* ステージ約65% / 文章約35% */
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 80px);
}
/* 左右を入れ替えてリズムを作る（DOM順は変えない＝読み上げ順が崩れない） */
.yu-story--flip .yu-story__stage { order: 2; }
.yu-story--flip .yu-story__text  { order: 1; }

/* Scene C は見出しを上、ステージをほぼ全幅にする（3案を横に並べるため） */
.yu-story--wide { grid-template-columns: 1fr; align-items: stretch; }
.yu-story--wide .yu-story__text { max-width: 62em; }

.yu-story__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--yu-mut);
  margin-bottom: 10px;
}
.yu-story__label[data-tier="premium"] { color: var(--yu-red); }

.yu-story__h { font-size: clamp(22px, 2.9vw, 32px); line-height: 1.45; }
.yu-story__p { margin-top: 14px; font-size: 15px; line-height: 1.95; color: var(--yu-ink3); }

.yu-story__points { margin-top: 16px; display: grid; gap: 6px; }
.yu-story__points li {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13.5px; color: var(--yu-ink2);
}
.yu-story__points li::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--yu-red); transform: translateY(-2px);
}
.yu-story__points--row { grid-auto-flow: column; grid-auto-columns: max-content; gap: 20px; }

.yu-story__close {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--yu-line-s);
  font-size: 14px; font-weight: 700; color: var(--yu-navy);
}
.yu-story__close--wide { margin-top: 22px; border-top: 0; padding-top: 0; text-align: center; font-size: 16px; }

/* ── ステージ ── */

.yu-stage {
  position: relative;
  min-height: 420px;
  aspect-ratio: 16 / 9;
  background: var(--yu-s2);
  border: 1px solid var(--yu-line-s);
  border-radius: var(--yu-r-l);
  overflow: hidden;
}
.yu-stage__svg { position: absolute; inset: 0; }
.yu-stage__svg svg { display: block; width: 100%; height: 100%; }
.yu-stage__hud { position: absolute; inset: 0; padding: 18px 20px; pointer-events: none; }

.yu-stage__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 10px; flex-wrap: wrap;
}
.yu-stage__bar .yu-sample { margin-top: 0; }

/* 旧描画器（player-standard.js）の書類チップ・「？」・案内窓は削除した。
   いまは Animation Lab の絵をそのまま使う（css/lab-stage.css の `.yl-*`）。
   同じ役目のクラスを2組み残すと、どちらが効いているのか分からなくなる。 */

/* ── Scene C ／ 案A・案B・案C ── */

.yu-stage--plans { aspect-ratio: auto; min-height: 480px; }
.yu-stage--plans .yu-stage__hud {
  position: static; padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; gap: 10px; min-height: 480px;
}

.yu-plans__lead { font-size: 13px; color: var(--yu-mut); transition: color .35s var(--yu-ease); }
.yu-plans__lead.is-on { color: var(--yu-navy); font-weight: 700; }

.yu-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.yu-plan {
  background: var(--yu-white);
  border: 1px solid var(--yu-line-s);
  border-top: 3px solid var(--yu-line);
  border-radius: var(--yu-r);
  padding: 14px 16px 16px;
  transition: border-top-color .4s var(--yu-ease), box-shadow .4s var(--yu-ease), transform .4s var(--yu-ease);
}
.yu-plan.is-on { border-top-color: var(--yu-red); box-shadow: var(--yu-shadow-s); transform: translateY(-3px); }
.yu-plan__n { font-size: 14.5px; font-weight: 700; color: var(--yu-navy-d); }
.yu-plan__b {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: var(--yu-pill);
  font-size: 12px; font-weight: 700;
}
/* 色だけで状態を示さない。文字ラベルを必ず併記する */
.yu-plan__b[data-badge="ok"]   { background: #dde7f6; color: var(--yu-navy); }
.yu-plan__b[data-badge="cond"] { background: #fdf0d8; color: var(--yu-warn-d); }

.yu-plan__rows { margin-top: 10px; display: grid; gap: 5px; }
.yu-plan__rows div { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; }
.yu-plan__rows dt { flex: 0 0 3.6em; color: var(--yu-mut); }
.yu-plan__rows dd { margin: 0; color: var(--yu-ink2); font-weight: 500; }

.yu-plans__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.yu-plans__note { font-size: 13px; line-height: 1.75; color: var(--yu-ink3); flex: 1 1 20em; }
.yu-plans__pick {
  font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: var(--yu-r-s);
  border: 1px solid var(--yu-line); background: var(--yu-white); color: var(--yu-navy);
  transition: background .35s var(--yu-ease), color .35s var(--yu-ease), border-color .35s var(--yu-ease);
}
.yu-stage--plans[data-step="5"] .yu-plans__pick { background: var(--yu-navy); color: #fff; border-color: var(--yu-navy); }

/* ═══════════ Section 03 Standard / Premium ═══════════ */

.yu-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.yu-tier {
  position: relative;
  background: var(--yu-white);
  border: 1px solid var(--yu-line-s);
  border-radius: var(--yu-r-l);
  padding: 30px 26px;
  overflow: hidden;
}
.yu-tier::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--yu-mut2);
}
.yu-tier[data-tier="premium"]::before { background: var(--yu-red); }

.yu-tier__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--yu-mut);
  margin-bottom: 12px;
}
.yu-tier[data-tier="premium"] .yu-tier__label { color: var(--yu-red); }

.yu-tier__key {
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--yu-navy-d);
  margin-bottom: 14px;
}
.yu-tier__desc { font-size: 14px; line-height: 1.9; color: var(--yu-ink3); margin-bottom: 20px; }
.yu-tier .yu-pills { margin-top: 4px; }

.yu-tier-note {
  margin-top: 26px;
  padding: 16px 20px;
  background: var(--yu-s1);
  border-radius: var(--yu-r);
  font-size: 14px;
  font-weight: 700;
  color: var(--yu-navy);
  text-align: center;
}

/* ═══════════ Section 04 利用シーン ═══════════ */

.yu-uses { margin-top: 36px; display: grid; gap: 32px; }
.yu-use-group__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--yu-line-s);
}
.yu-use-group__name { font-size: 15px; font-weight: 700; color: var(--yu-navy-d); }
.yu-use-group__hint { font-size: 12.5px; color: var(--yu-mut); }

.yu-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

.yu-tile { margin: 0; }
.yu-tile > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--yu-r);
  background: var(--yu-white);
  border: 1px solid var(--yu-line-s);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--yu-navy-d);
  transition: border-color .2s ease, background .2s ease;
}
.yu-tile > summary::-webkit-details-marker { display: none; }
.yu-tile > summary:hover { border-color: var(--yu-red); }
.yu-tile[open] > summary { background: var(--yu-tint); border-color: var(--yu-navy); }

.yu-tile__body {
  padding: 12px 16px 4px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--yu-ink3);
}
.yu-tile__row { display: flex; gap: 8px; }
.yu-tile__k { flex: 0 0 5.5em; color: var(--yu-mut); }

/* ═══════════ Section 05 原則 ═══════════ */

.yu-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.yu-step {
  padding: 22px 20px;
  border-radius: var(--yu-r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--yu-line-on-navy);
}
.yu-step__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--yu-on-navy-mut);
  margin-bottom: 10px;
}
.yu-step__t { font-size: 17px; font-weight: 700; color: #fff; }
.yu-step[data-human="true"] { background: rgba(255, 90, 112, .12); border-color: rgba(255, 90, 112, .34); }
.yu-step[data-human="true"] .yu-step__t { color: var(--yu-red-l); }

.yu-principle {
  margin-top: 40px;
  text-align: center;
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
}

/* ═══════════ Section 06 YURAI Start ═══════════ */

.yu-start {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  margin-top: 36px;
}

.yu-price-card {
  background: var(--yu-navy-d);
  color: var(--yu-on-navy);
  border-radius: var(--yu-r-l);
  padding: 34px 30px;
}
.yu-price-card__lead { font-size: 14px; color: var(--yu-on-navy-mut); }
.yu-price-card__name { font-size: 26px; font-weight: 900; color: #fff; margin: 8px 0 4px; letter-spacing: .02em; }
.yu-price-card__fig {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
}
.yu-price-card__tax { font-size: 13px; color: var(--yu-on-navy-mut); }
.yu-price-card__note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--yu-line-on-navy);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--yu-on-navy);
}

.yu-price-rows { display: grid; gap: 10px; }
.yu-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--yu-white);
  border: 1px solid var(--yu-line-s);
  border-radius: var(--yu-r);
}
.yu-price-row__k { font-size: 14px; font-weight: 700; color: var(--yu-navy-d); flex: 0 0 7.5em; }
.yu-price-row__v { font-size: 14px; color: var(--yu-ink3); }

/* ═══════════ Section 07 ガイドDL ═══════════ */

.yu-guide {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  margin-top: 36px;
}

.yu-guide__toc { display: grid; gap: 8px; margin-top: 22px; }
.yu-guide__toc li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  color: var(--yu-ink2);
}
.yu-guide__toc li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yu-red);
}

.yu-form-card {
  background: var(--yu-white);
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r-l);
  padding: 28px 26px;
  box-shadow: var(--yu-shadow-s);
}
.yu-form-card__h { font-size: 16px; font-weight: 700; color: var(--yu-navy-d); margin-bottom: 6px; }

.yu-form { display: grid; gap: 16px; margin-top: 18px; }
.yu-field { display: grid; gap: 6px; }
.yu-field label { font-size: 13px; font-weight: 700; color: var(--yu-ink2); }
.yu-req { color: var(--yu-red); font-size: 12px; margin-left: 6px; }

.yu-field input[type="text"],
.yu-field input[type="email"],
.yu-field select,
.yu-field textarea {
  font-family: inherit;
  font-size: 15px;              /* 16px 未満だと iOS が拡大するが、
                                   15px は許容範囲。読みやすさとのバランス */
  line-height: 1.6;
  padding: 12px 13px;           /* 高さ 44px 以上を確保する */
  min-height: 46px;
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r-s);
  background: var(--yu-s3);
  color: var(--yu-ink);
  width: 100%;
}
.yu-field textarea { min-height: 108px; resize: vertical; }
.yu-field input:focus, .yu-field select:focus, .yu-field textarea:focus { background: #fff; }

/* エラーは赤一色にしない。記号＋文章で示す。 */
.yu-field input[aria-invalid="true"],
.yu-field select[aria-invalid="true"],
.yu-field textarea[aria-invalid="true"] {
  border-color: var(--yu-red);
  background: var(--yu-tint-red);
}
.yu-field-err {
  font-size: 12.5px; line-height: 1.6; color: var(--yu-red);
  min-height: 0;                /* 空のときは高さを持たない */
}
.yu-field-err:not(:empty) { min-height: 1.6em; }   /* 出たときも大きく跳ねない */
.yu-field-err:not(:empty)::before { content: "⚠ "; }

.yu-form-err {
  padding: 12px 14px;
  border-radius: var(--yu-r-s);
  background: var(--yu-tint-red);
  border: 1px solid rgba(200, 16, 46, .3);
  font-size: 13px; line-height: 1.7; color: var(--yu-red);
}
.yu-form-err::before { content: "⚠ "; }

.yu-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--yu-ink3); font-weight: 400; }
.yu-consent input {
  margin-top: 3px; flex: 0 0 auto;
  width: 20px; height: 20px; accent-color: var(--yu-red);
}

/* ハニーポット。画面外へ置く。display:none や type=hidden は使わない
   （素朴なBotほど type=hidden を避けるため）。 */
.yu-hp {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.yu-form [data-submit] { width: 100%; min-height: 50px; margin-top: 2px; }
.yu-form [data-submit][disabled] { opacity: .65; cursor: default; }

/* 送信後の成功パネル */
.yu-form-done { margin-top: 18px; display: grid; gap: 10px; }
.yu-form-done__h { font-size: 18px; font-weight: 700; color: var(--yu-navy-d); }
.yu-form-done__h:focus-visible { outline: 3px solid var(--yu-red); outline-offset: 4px; }
.yu-form-done__b { font-size: 14px; line-height: 1.9; color: var(--yu-ink3); }
.yu-form-done [data-download] { justify-self: start; }

/* 相談フォーム（最終CTAの中で開く。モーダルにしない） */
.yu-consult {
  max-width: 620px;
  margin: 26px auto 0;
  text-align: left;
  background: var(--yu-white);
  border-radius: var(--yu-r-l);
  padding: 26px 24px;
}
.yu-consult__h { font-size: 17px; font-weight: 700; color: var(--yu-navy-d); }
.yu-consult__lead { font-size: 13px; line-height: 1.8; color: var(--yu-ink3); margin-top: 6px; }

/* ═══════════ Section 08 最終CTA + 診断 ═══════════ */

.yu-final { text-align: center; }
.yu-final h2 { font-size: clamp(26px, 4vw, 44px); }
.yu-final .yu-btns { justify-content: center; }

.yu-diag {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--yu-line-on-navy);
  border-radius: var(--yu-r-l);
  padding: 26px 24px;
}
.yu-diag__h { font-size: 16px; font-weight: 700; color: #fff; }
.yu-diag__lead { font-size: 13px; color: var(--yu-on-navy-mut); margin-top: 4px; }

.yu-diag__set { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.yu-diag__legend {
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--yu-red-l);
}

.yu-diag__list { display: grid; gap: 8px; margin: 14px 0 10px; }
.yu-diag__item { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--yu-on-navy); cursor: pointer; }
.yu-diag__item input { margin-top: 5px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--yu-red-l); }
.yu-diag__count { font-size: 13px; color: var(--yu-on-navy-mut); }

/* B: Standard / Premium 判定の3問 */
.yu-q { margin-top: 14px; }
.yu-q__t { font-size: 14px; line-height: 1.7; color: var(--yu-on-navy); }
.yu-q__opts { display: flex; gap: 10px; margin-top: 8px; }
.yu-q__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--yu-pill);
  border: 1px solid var(--yu-line-on-navy);
  font-size: 13.5px;
  color: var(--yu-on-navy);
  cursor: pointer;
}
.yu-q__opt input { width: 15px; height: 15px; accent-color: var(--yu-red-l); }
.yu-q__opt:hover { border-color: var(--yu-red-l); }
.yu-q__opt:has(input:checked) { background: rgba(255, 90, 112, .14); border-color: var(--yu-red-l); }

.yu-diag__result {
  margin-top: 22px;
  padding: 4px 20px 18px;
  border-radius: var(--yu-r);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--yu-line-on-navy);
}
.yu-diag__block { padding-top: 16px; }
.yu-diag__block + .yu-diag__block { margin-top: 14px; border-top: 1px solid var(--yu-line-on-navy); }
.yu-diag__block-k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--yu-on-navy-mut);
  margin-bottom: 6px;
}
.yu-diag__result-t { font-size: 17px; font-weight: 700; color: #fff; }
.yu-diag__result-b { font-size: 13px; line-height: 1.85; color: var(--yu-on-navy); margin-top: 6px; }
.yu-diag__next { display: grid; gap: 5px; margin-top: 4px; }
.yu-diag__next li { display: flex; gap: 9px; font-size: 13px; line-height: 1.8; color: var(--yu-on-navy); }
.yu-diag__next li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--yu-red-l); }

/* ═══════════ #demo 予約アンカー ═══════════ */

/* いまは中身を持たない。将来ここに section を差し込む（LPを作り直さないため） */
#demo { scroll-margin-top: 72px; }

/* ═══════════ レスポンシブ ═══════════ */

@media (max-width: 900px) {
  .yu-hero-in { grid-template-columns: 1fr; }
  .yu-start { grid-template-columns: 1fr; }
  .yu-guide { grid-template-columns: 1fr; }

  /* Tablet：1カラム。アニメーションを先、説明を後 */
  .yu-story { grid-template-columns: 1fr; gap: 22px; }
  .yu-story__stage, .yu-story--flip .yu-story__stage { order: 1; }
  .yu-story__text,  .yu-story--flip .yu-story__text  { order: 2; }
  .yu-stage { min-height: 380px; }
  .yu-stage--plans { min-height: 520px; }
  .yu-stage--plans .yu-stage__hud { min-height: 520px; }
  .yu-plans { grid-template-columns: repeat(3, 1fr); }
}

/* 767px 以下は操作バーの**見えるラベルだけ**短くする（engine.js）。
   場面名も視覚的に隠す。読み上げには残る（aria-label と .yu-player__scene）。 */
@media (max-width: 767px) {
  .yu-player__scene {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .yu-player__bar { flex-wrap: nowrap; gap: 6px; padding: 5px 10px; }
  .yu-player__meter { width: 64px; }
  .yu-player__bar .yu-anim-btn { white-space: nowrap; padding-inline: 14px; }
}

@media (max-width: 768px) {
  .yu-tiles { grid-template-columns: 1fr 1fr; }
  .yu-price-row__k { flex-basis: 100%; }
  .yu-hero-mark { flex-wrap: wrap; gap: 8px 14px; }
  .yu-tier { padding: 24px 20px; }
  .yu-price-card { padding: 26px 22px; }
  .yu-form-card { padding: 22px 18px; }
  .yu-diag { padding: 20px 18px; }

  /* Mobile：案カードは縦。案内窓は下へ積む */
  /* aspect-ratio は **付けない**。min-height と併記すると、幅が
     min-height × 比 で決まってしまい（380 × 4/3 = 507px）、
     画面が狭いほど食み出す＝ページ全体が横スクロールする。
     実測：375px幅でステージ480px・scrollWidth 500px。
     高さは min-height だけで決め、幅はコンテナに従わせる。 */
  .yu-stage { min-height: 380px; aspect-ratio: auto; }
  .yu-stage__hud { padding: 14px; }
  /* 案内窓は下へ積む。人物は上半分に置くので、高さは 46% までにする
     （大きくすると人物が窓の裏に隠れる。実測で 58%→46%→42% と詰めた） */
  .yu-stage--plans { min-height: auto; aspect-ratio: auto; }
  .yu-stage--plans .yu-stage__hud { min-height: auto; }
  .yu-plans { grid-template-columns: 1fr; }
  .yu-plans__foot { flex-direction: column; align-items: stretch; }
  .yu-plans__pick { text-align: center; }
}

@media (max-width: 420px) {
  .yu-tiles { grid-template-columns: 1fr; }
  .yu-stage { min-height: 360px; }
}

/* ═══════════ 台詞の吹き出し ═══════════
   Animation Lab の台詞を逐語で使う（docs/COPY.md の出典どおり）。

   ステージ全体が aria-hidden なので、吹き出しは装飾。
   意味はステージ外の静的な文章が持つ。だから**同時に1つだけ**出す
   （全部並べると会話として読めなくなる。ここは「加算のみ」の例外）。
   最終状態では最後の台詞が残るので、止まっていても不自然にならない。

   Lab では位置が % ・文字が 18px 固定でモバイルで破綻していた。
   ここでは文字を clamp() にし、幅も相対で持つ。
   ─────────────────────────────────────────── */

.yu-bubble {
  display: none;
  position: absolute;
  max-width: min(30ch, 42%);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--yu-white);
  border: 2px solid #22303f;
  box-shadow: 4px 5px 0 rgba(34, 48, 63, .14);
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.65;
  color: var(--yu-ink);
}
/* 表示は **ステージの data-step と一致したものだけ**。
   .is-on（JSが付けるクラス）に依存させない。依存させると
   JavaScript 無効時に初期HTMLの data-step="5" があっても1つも出ない。
   実際にその状態を作ってしまい、静的HTMLを検査して気付いた。 */
.yu-stage[data-step="1"] .yu-bubble[data-s="1"],
.yu-stage[data-step="2"] .yu-bubble[data-s="2"],
.yu-stage[data-step="3"] .yu-bubble[data-s="3"],
.yu-stage[data-step="4"] .yu-bubble[data-s="4"],
.yu-stage[data-step="5"] .yu-bubble[data-s="5"] { display: block; }

/* しっぽ：回転させた四角の2辺だけを見せる */
.yu-bubble::after {
  content: "";
  position: absolute;
  left: 26px; bottom: -9px;
  width: 14px; height: 14px;
  background: var(--yu-white);
  border-right: 2px solid #22303f;
  border-bottom: 2px solid #22303f;
  transform: rotate(45deg);
}

/* 置き場所。案内窓（右44%）へ被らないよう左側に収める */
/* Desktop の空きは 書類チップ(y19..54) と 人物の頭(y144〜) のあいだの帯だけ。
   上へ寄せすぎるとチップに、下げすぎると頭に被る。実測して 16% に置いた。 */
.yu-bubble--a1 { left: 4%;  top: 16%; }
.yu-bubble--a2 { left: 10%; top: 16%; }
.yu-bubble--b1 { left: 3%;  top: 12%; }
.yu-bubble--b2 { left: 14%; top: 10%; }
.yu-bubble--b3 { left: 8%;  top: 14%; }

/* 767px 以下は操作バーの**見えるラベルだけ**短くする（engine.js）。
   場面名も視覚的に隠す。読み上げには残る（aria-label と .yu-player__scene）。 */
@media (max-width: 767px) {
  .yu-player__scene {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .yu-player__bar { flex-wrap: nowrap; gap: 6px; padding: 5px 10px; }
  .yu-player__meter { width: 64px; }
  .yu-player__bar .yu-anim-btn { white-space: nowrap; padding-inline: 14px; }
}

@media (max-width: 768px) {
  /* Mobile の縦の並びは 書類チップ(y15..50) → 人物(y92..196) → 案内窓(54%〜)。
     空いているのは**チップと人物のあいだの40px前後の帯**しかない。
     余白を詰めて1行の高さを36pxに抑え、その帯へ置く。
     下側（人物と案内窓のあいだ）は10pxしか無く入らない。実測で決めた値。 */
  .yu-bubble { max-width: 78%; padding: 6px 12px; }
  .yu-bubble--a1, .yu-bubble--a2,
  .yu-bubble--b1, .yu-bubble--b2, .yu-bubble--b3 { left: 14px; top: 14%; }
}

/* ═══════════ 法務ページ ═══════════ */

.yu-legal { max-width: 760px; }
.yu-legal h1 { margin-bottom: 22px; }
.yu-legal h2 { font-size: clamp(17px, 2.1vw, 21px); margin-top: 34px; }
.yu-legal p { margin-top: 12px; font-size: 14.5px; line-height: 2; color: var(--yu-ink3); }
.yu-legal__lead { margin-top: 18px; }
.yu-legal__list { margin-top: 12px; display: grid; gap: 6px; }
.yu-legal__list li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14.5px; line-height: 1.9; color: var(--yu-ink3);
}
.yu-legal__list li::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--yu-red); transform: translateY(-3px);
}
/* 未確定であることを、色だけでなく文章でも示す（公開版では使っていない） */
.yu-legal__pending {
  border-bottom: 1px dashed var(--yu-warn);
  color: var(--yu-warn-d);
}
/* いつの版かを、本文より先に示す */
.yu-legal__meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--yu-ink3);
  border-left: 3px solid var(--yu-line);
  padding-left: 12px;
}
.yu-legal__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.yu-legal__sign { margin-top: 40px; font-weight: 700; color: var(--yu-navy-d); line-height: 2; }

/* ═══════════ Section 02 シナリオギャラリー ═══════════
   **アニメーションが主役。**

   Desktop / ノートPC（1100px 以上）は **左に縦タブ・右に大きなプレイヤー**。
   「業務を選ぶ」と「その場面が動く」が横に並び、視線が上下に切れない。
   上に横並びだと、タブと見出しで縦を食い、絵が「カードの中の小さな図」に
   見えてしまう（Phase 5C.2 で実際にそうなった）。

   Tablet / Mobile（1099px 以下）は横に並べる幅が無いので、上タブの
   横スクロールへ戻す。**内容は変えず、置き方だけを切り替える。**
   ─────────────────────────────────────────── */

.yu-sec--gal {
  padding-top: clamp(18px, 2vw, 30px);
  /* 次の Phase で Premium の導線を1ブロック差し込めるだけの余白を下に残す */
  padding-bottom: clamp(30px, 3.6vw, 56px);
}
/* この節だけ少し広く取る。プレイヤーの横幅がそのまま絵の大きさになる。 */
/* **この幅は Desktop（>=1100px）だけ。** Mobile へ当てると
   `100vw - 40px` と `.yu-wrap` の左右余白が二重に効いて絵が縮む（実測で踏んだ）。 */
.yu-sec--gal .yu-wrap { max-width: var(--yu-wrap); }

.yu-gal__h2 { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.3; }
.yu-gal__note { margin-top: 5px; font-size: 13px; color: var(--yu-ink3); }

.yu-gal { margin-top: 14px; }

/* ── タブ ──
   既定は**横並び**（Tablet / Mobile）。1100px 以上で縦積みへ切り替える。
   出すのは category と title の2つだけ。**summary はタブに入れない**
   （プレイヤー側にある。同じ文が2か所にあると、どちらを読むか迷う）。 */

.yu-gal__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}

.yu-gal__tab {
  position: relative;
  min-height: 84px;
  text-align: left;
  font-family: inherit;
  padding: 14px 16px;
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r);
  background: var(--yu-white);
  color: var(--yu-ink);
  cursor: pointer;
  transition: border-color .18s var(--yu-ease), background .18s var(--yu-ease),
              box-shadow .18s var(--yu-ease);
}
.yu-gal__tab:hover { border-color: var(--yu-navy); box-shadow: 0 2px 10px -6px rgba(18, 32, 58, .5); }
.yu-gal__tab[aria-selected="true"] {
  background: var(--yu-navy); border-color: var(--yu-navy); color: #fff;
}

.yu-gal__cat { display: block; font-size: 12px; font-weight: 700; color: var(--yu-mut); }
.yu-gal__tab[aria-selected="true"] .yu-gal__cat { color: var(--yu-on-navy-mut); }
.yu-gal__name { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.45; }

/* ── プレイヤー ── */

.yu-gal__panel:focus-visible { outline: 2px solid var(--yu-navy); outline-offset: 4px; }
.yu-gal__panels { margin-top: 12px; }

.yu-player {
  width: 100%;
  border: 1px solid var(--yu-line-s);
  border-radius: var(--yu-r-l);
  background: var(--yu-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* **操作バー。説明エリアではない。**
   どの業務かは左のタブカードが示す。意味はアニメーション本体と締めコピーが持つ。
   ここに category / title / summary を戻すと、そのぶん絵が小さくなる。 */
.yu-player__bar {
  flex: 0 0 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 上下の余白は控えめに。**バーの高さは 44〜56px に収める**
     （ボタンが 44px なので、余白 5px x2 + 枠 1px = 55px）。 */
  padding: 5px 12px;
  border-bottom: 1px solid var(--yu-line-s);
  background: var(--yu-s2);
}
.yu-player__prog {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--yu-ink3);
  margin-right: auto;
}
.yu-player__scene { margin-left: 8px; }
.yu-player__meter {
  display: block; width: 96px; height: 4px; border-radius: 99px;
  background: var(--yu-line);
  background-image: linear-gradient(var(--yu-red), var(--yu-red));
  background-repeat: no-repeat;
  background-size: calc(var(--p, 0) * 100%) 100%;
}

/* ステージは残りの高さを全部使う。中の `.yl-frame` が原本の比率を保つ。 */
.yu-player .yu-stage {
  flex: 1 1 auto; min-height: 0; height: auto;
  aspect-ratio: auto; border: 0; border-radius: 0; overflow: hidden;
}

/* 締めは Animation Lab と同じく濃紺の帯 */
.yu-player__foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--yu-navy-d);
}
.yu-player__close { font-size: clamp(14px, 1.4vw, 18px); font-weight: 700; color: #fff; }
.yu-player__foot .yu-logo { font-size: 17px; color: #fff; }
.yu-player__foot .yu-logo i { color: var(--yu-red-l); }
.yu-player__foot .yu-sample { margin-top: 0; color: var(--yu-on-navy-mut); }

/* オチの台詞は**吹き出しで見えている**。同じ文を下にもう一度出さない。
   読み上げのためだけに残す（パネルに名前が付き、絵が読めない人にも通じる）。 */
.yu-gal__static {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Desktop / ノートPC：左に縦タブ、右にプレイヤー ──
   1100px 未満は横に並べる幅が無いので、上タブへ戻す（下の @media）。 */

@media (min-width: 1100px) {
  /* 大画面ではコンテンツ幅を広げる。左右の余白も絵の幅になるので詰める。 */
  .yu-sec--gal .yu-wrap {
    max-width: min(calc(100vw - 24px), 1560px);
    padding-left: 12px;
    padding-right: 12px;
  }

  .yu-gal {
    display: grid;
    /* 左は仕様の下限寄り（240〜260px）。**削った幅はそのまま絵の幅になる。** */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 16px;
  }
  .yu-gal__tabs {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 12px;
    overflow: visible;
  }
  /* 「押せる業務カード」に見える大きさにする。小さなメニュー行にしない。 */
  .yu-gal__tab { min-height: 88px; padding: 18px; }
  .yu-gal__panels { margin-top: 0; }

  /* **絵を主役にする。** 高さがそのまま絵の大きさになる。 */
  /* **高さを固定しない。** アートボードの拡大縮小後の高さがそのまま
     ステージの高さになる（player-lab.js）。ここで min-height や
     固定 height を持たせると、絵の上に空白が残る（実際に残っていた）。 */
  .yu-player { height: auto; }
  .yu-player__bar { padding: 5px 14px; }
}

/* ── Premium プレイヤーの画面 ── */

.yu-prem__intro { position: absolute; inset: 0; padding: 5% 7%; display: grid; align-content: center; }
.yu-prem__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--yu-red); }
.yu-prem__title { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.4; margin-top: 8px; }
.yu-prem__lead { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--yu-navy); }
.yu-prem__body { margin-top: 10px; font-size: 13px; line-height: 1.9; color: var(--yu-ink3); max-width: 46em; }
.yu-prem__cap {
  position: absolute; left: 4%; right: 4%; top: 4%;
  font-size: clamp(13px, 1.3vw, 17px); font-weight: 700; line-height: 1.6; color: var(--yu-navy);
}

.yu-pnl {
  position: absolute; right: 3%; top: 15%; width: 50%; max-height: 80%;
  padding: 13px 15px; overflow: hidden;
  background: var(--yu-navy-d); color: var(--yu-on-navy);
  border-radius: var(--yu-r); box-shadow: var(--yu-shadow);
}
.yu-pnl__t { font-size: 13.5px; font-weight: 700; color: #fff; }
.yu-pnl__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 9px; }
.yu-pnl__h { font-size: 12px; font-weight: 700; color: #fff; }
.yu-pnl__lines { margin-top: 4px; display: grid; gap: 3px; }
.yu-pnl__lines li { font-size: 12px; line-height: 1.6; }
.yu-pnl__fx { margin-top: 9px; display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; }
.yu-pnl__fx dt { font-size: 12px; color: var(--yu-on-navy-mut); }
.yu-pnl__fx dd { font-size: 12.5px; }
.yu-pnl__fx dd[data-mark="true"] { color: var(--yu-red-l); font-weight: 700; }
.yu-pnl__f { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--yu-on-navy-mut); }

/* ── Tablet（768〜1099px）：上タブの横スクロール ──
   縦に並べる横幅が無い。**次のタブを少し見せて**横へ続くことを示す。
   スクロールバーは常時見せない（`scrollbar-width: none`）。
   選んだタブは gallery.js が中央へ寄せる。 */

@media (max-width: 1099px) {
  .yu-gal__tabs {
    grid-auto-columns: min(230px, 62vw);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .yu-gal__tabs::-webkit-scrollbar { height: 0; width: 0; }
  .yu-gal__tab { scroll-snap-align: center; }

  /* 上下に分かれるぶん、絵に使える高さは減る。内部スクロールは作らない。 */
  .yu-player { height: clamp(360px, calc(100svh - 300px), 620px); }
}

@media (max-width: 900px) {
  .yu-pnl { position: static; width: auto; max-height: none; margin: 42% 4% 0; }
}

/* 767px 以下は操作バーの**見えるラベルだけ**短くする（engine.js）。
   場面名も視覚的に隠す。読み上げには残る（aria-label と .yu-player__scene）。 */
@media (max-width: 767px) {
  .yu-player__scene {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .yu-player__bar { flex-wrap: nowrap; gap: 6px; padding: 5px 10px; }
  .yu-player__meter { width: 64px; }
  .yu-player__bar .yu-anim-btn { white-space: nowrap; padding-inline: 14px; }
}

@media (max-width: 768px) {
  /* Mobile は絵の箱が縦に伸びる（lab-stage.css）。プレイヤーの高さは
     内容に任せて、内部スクロールを作らない。 */
  .yu-player { height: auto; }
  .yu-gal__tab { min-height: 84px; }
    .yu-pnl__cols { grid-template-columns: 1fr; }
}

/* ═══════════ Section 02b YURAI Premium への導線 ═══════════
   Standard の5話の直後。**売り込みではなく説明**にする。
   「Standard の次に Premium がある」と自然に分かればよい。
   Premium 専用ページはまだ無いので、行き先は相談導線と公式ガイドだけ。
   ═══════════════════════════════════════════════════ */

.yu-prem-lead { padding-top: clamp(26px, 3vw, 44px); padding-bottom: clamp(26px, 3vw, 44px); }

.yu-prem-lead__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-r-l);
  background: var(--yu-white);
}

.yu-prem-lead__k {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--yu-red);
}
.yu-prem-lead__h {
  margin-top: 8px;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.4; font-weight: 800;
}
.yu-prem-lead__lead {
  margin-top: 10px; font-size: 14px; line-height: 1.9; color: var(--yu-ink3);
}

.yu-prem-lead__points {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.yu-prem-lead__points li {
  list-style: none;
  font-size: 13px; font-weight: 700; color: var(--yu-navy);
  padding: 7px 13px;
  border: 1px solid var(--yu-line);
  border-radius: var(--yu-pill);
  background: var(--yu-s2);
}

.yu-prem-lead__box .yu-btns { margin-top: 18px; }
/* 主要な導線なので、どの幅でも指で押せる大きさにする（44px 以上）。 */
.yu-prem-lead__box .yu-btn { min-height: 44px; display: inline-flex; align-items: center; }

.yu-prem-lead__fig { margin: 0; }
.yu-prem-lead__fig img {
  display: block; width: 100%; height: auto;
  border-radius: var(--yu-r);
  background: var(--yu-navy-d);
}
.yu-prem-lead__fig figcaption {
  margin-top: 8px; font-size: 12px; color: var(--yu-mut);
}

@media (min-width: 900px) {
  .yu-prem-lead__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3vw, 44px);
  }
}

/* Premium 専用ページへの3導線（Phase 5D.1）。
   **Header には足さない。** 商品を見比べている文脈でだけ出す。 */
.yu-prem-lead__more { margin-top: 12px; font-size: 13px; }
.yu-prem-lead__more a { text-decoration: underline; color: var(--yu-navy); }
.yu-tier__more { margin-top: 12px; font-size: 13px; }
.yu-tier__more a { text-decoration: underline; }
.yu-diag__more { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.yu-diag__more a { text-decoration: underline; color: var(--yu-red-l); }