:root {
  --bg: #0a0c18;
  --bg-glow-1: rgba(124, 92, 180, 0.22);
  --bg-glow-2: rgba(201, 164, 92, 0.10);
  --panel: #161a2e;
  --panel-elevated: #1c2038;
  --accent: #7c69ad;
  --accent-light: #b3a2e0;
  --gold: #cda45a;
  --gold-strong: #e3c07a;
  --text: #f2eee6;
  --text-muted: #9891b5;
  --card-back-1: #1c1738;
  --card-back-2: #241c47;
  --card-back-3: #150f2c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, var(--bg-glow-1), transparent 42%),
    radial-gradient(circle at 82% 0%, var(--bg-glow-2), transparent 38%),
    linear-gradient(180deg, #0a0c18 0%, #100d20 55%, #0a0c18 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Hiragino Mincho ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  line-height: 1.75;
}

/* ---------- 開発者向け表示（商品UIからは目立たない場所へ） ---------- */
.dev-badge {
  position: fixed;
  top: 6px;
  right: 8px;
  z-index: 100;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: rgba(242, 238, 230, 0.35);
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  pointer-events: none;
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 16px 60px;
}

.app-header {
  text-align: center;
  margin-bottom: 32px;
}

.brand-mark {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: var(--gold);
  text-indent: 0.5em; /* 右端の余白と視覚的に揃える */
}

.app-header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* スマホ昼版・利用規約／プライバシーポリシー／FAQ／特商法限定。
   共通ヘッダー（.app-header、TOP等の多くの画面で共有）のPC専用の
   非表示ルール（8156行目等、min-width:601px側）はこの4画面では
   スマホ幅に対して未対応のため、スマホでは共通ヘッダーの
   「TAROT」「タロット占い」が見えたままだった。HTML・JSは変更せず、
   font-size:0で元の文字を見た目上ゼロ幅にし、::afterで文字だけを
   差し替える。フォントサイズ・letter-spacing・text-indent・位置・
   margin/paddingは元の値のまま変更していない。カード開示・鑑定結果
   画面もこの共通ヘッダーを使うが、:has()でこの4画面のときだけに
   限定しているため無関係。 */
@media (max-width: 600px) {
  body:not(.is-terms-night):has(#screen-terms.active) .app-header .brand-mark,
  body:not(.is-privacy-night):has(#screen-privacy.active) .app-header .brand-mark,
  body:not(.is-faq-night):has(#screen-faq.active) .app-header .brand-mark,
  body:not(.is-tokushoho-night):has(#screen-tokushoho.active) .app-header .brand-mark {
    font-size: 0;
  }

  body:not(.is-terms-night):has(#screen-terms.active) .app-header .brand-mark::after,
  body:not(.is-privacy-night):has(#screen-privacy.active) .app-header .brand-mark::after,
  body:not(.is-faq-night):has(#screen-faq.active) .app-header .brand-mark::after,
  body:not(.is-tokushoho-night):has(#screen-tokushoho.active) .app-header .brand-mark::after {
    content: 'TAROLUNE';
    font-size: 0.72rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: #B8863F;
  }

  body:not(.is-terms-night):has(#screen-terms.active) .app-header h1,
  body:not(.is-privacy-night):has(#screen-privacy.active) .app-header h1,
  body:not(.is-faq-night):has(#screen-faq.active) .app-header h1,
  body:not(.is-tokushoho-night):has(#screen-tokushoho.active) .app-header h1 {
    font-size: 0;
  }

  body:not(.is-terms-night):has(#screen-terms.active) .app-header h1::after,
  body:not(.is-privacy-night):has(#screen-privacy.active) .app-header h1::after,
  body:not(.is-faq-night):has(#screen-faq.active) .app-header h1::after,
  body:not(.is-tokushoho-night):has(#screen-tokushoho.active) .app-header h1::after {
    content: 'CHOOSE YOUR CARD';
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #514563;
  }

  /* FAQ限定（2026-09-15追加）：上のfont-size:0+::after置換パッチにより、
     共通ヘッダー(.app-header)がスマホ昼版FAQで「TAROLUNE」
     「CHOOSE YOUR CARD」を表示し続けていた。今回FAQ画面自体に専用の
     ブランドヘッダー（.faq-logo/.faq-logo-sub、9992行目付近の
     @media(max-width:600px)ブロック）を新設したため、この共通ヘッダーは
     不要な2つ目の表示（二重表示）になっていた。
     PC版で既に採用済みの
     body:has(#screen-faq.active) .app-header { display:none; }
     （9066行目付近、@media min-width:601px側）と全く同じ考え方・
     全く同じHOW IT WORKS画面のスマホ側実装（body:has(#screen-how-it-works
     .active) .app-header{display:none}）を踏襲し、共通ヘッダー自体を
     非表示にする（上のfont-size:0/::after置換より詳細度・記述順とも
     優先されるdisplay:noneのため、置換後の文字も含めて完全に消える）。
     利用規約・プライバシーポリシー・特定商取引法はまだ専用のスマホ
     ブランドヘッダーを持たないため、上の共通ヘッダー文字置換パッチに
     引き続き依存させる必要があり、対象を:has(#screen-faq.active)だけに
     限定してこの3画面には一切影響しないようにしている。
     :not(.is-faq-night)によりスマホ夜版FAQも対象外（夜版は今回未着手の
     まま変更していない）。 */
  body:not(.is-faq-night):has(#screen-faq.active) .app-header {
    display: none;
  }

  /* FAQ・スマホ夜版限定（2026-09-16追加）。上のスマホ昼版FAQと全く同じ
     「共通ヘッダー（.app-header、TAROT文字＝.brand-mark／タロット占い
     文字＝h1）を丸ごとdisplay:noneで非表示にする」考え方を、
     is-faq-night側にも適用する。スマホ夜版FAQは既に専用のブランド
     ヘッダー（.faq-logo/.faq-logo-sub、TAROLUNE/CHOOSE YOUR CARD、
     直後の「スマホ夜版FAQ・上部ブランド表記」ブロックで実装済み）を
     持っているため、共通ヘッダーの「TAROT」「タロット占い」（夜版は
     上の font-size:0+::after 置換パッチの対象外のため、置換されない
     生のテキストのまま表示されていた）が不要な残存表示になっていた。
     display:noneのため.app-header自身のmargin-bottom:32pxも含めて
     レイアウト上の余白ごと消え、TAROLUNE＋CHOOSE YOUR CARD側の
     サイズ・間隔には一切影響しない。対象は@media(max-width:600px)＋
     body.is-faq-night＋#screen-faq.activeの組み合わせのみで、PC版・
     スマホ昼版・HOW IT WORKS・TOP・他画面には影響しない。 */
  body.is-faq-night:has(#screen-faq.active) .app-header {
    display: none;
  }

  /* 利用規約・プライバシーポリシー・特定商取引法 限定（2026-09-15追加）。
     上でFAQに採用した「共通ヘッダーを丸ごとdisplay:noneにする」ロジックを
     そのまま踏襲し、この3画面にも同じ考え方を適用する（この3画面も今回、
     下の「スマホ昼版・利用規約／プライバシーポリシー／特定商取引法・
     上部ブランドヘッダー」ブロックでFAQと同じ専用ブランドヘッダーを
     新設したため、共通ヘッダーのTAROLUNE/CHOOSE YOUR CARD置換表示が
     不要な二重表示になる）。:not(.is-X-night)で各画面の夜版は対象外、
     @media(max-width:600px)でPC版は対象外。FAQ・HOW IT WORKS・TOP等の
     他画面には:has()で無関係。 */
  body:not(.is-terms-night):has(#screen-terms.active) .app-header {
    display: none;
  }

  /* 利用規約・スマホ夜版限定（2026-09-16追加）。上のFAQ夜版
     （body.is-faq-night:has(#screen-faq.active) .app-header）と全く同じ
     考え方で、is-terms-night側にも適用する。スマホ夜版利用規約は
     既に専用のブランドヘッダー（.terms-logo/.terms-logo-sub、この直後の
     「スマホ夜版・利用規約 上部ブランド表示」ブロックで実装）を
     持っているため、共通ヘッダーの「TAROT」「タロット占い」（夜版は
     上のfont-size:0+::after置換パッチの対象外のため生テキストのまま
     表示されていた）が不要な残存表示になっていた。display:noneのため
     .app-header自身のmargin-bottom:32pxも含めてレイアウト上の余白ごと
     消え、TAROLUNE＋CHOOSE YOUR CARD側のサイズ・間隔には一切影響しない。
     対象は@media(max-width:600px)＋body.is-terms-night＋
     #screen-terms.activeの組み合わせのみで、PC版・スマホ昼版・
     プライバシーポリシー・特定商取引法・FAQ・HOW IT WORKS・TOP・
     他画面には影響しない。 */
  body.is-terms-night:has(#screen-terms.active) .app-header {
    display: none;
  }

  body:not(.is-privacy-night):has(#screen-privacy.active) .app-header {
    display: none;
  }

  /* プライバシーポリシー・スマホ夜版限定（2026-09-16追加）。上の利用規約
     夜版（body.is-terms-night:has(#screen-terms.active) .app-header）と
     全く同じ考え方で、is-privacy-night側にも適用する。スマホ夜版
     プライバシーポリシーは既に専用のブランドヘッダー（.privacy-logo/
     .privacy-logo-sub、この直後の「プライバシーポリシー・スマホ夜版」
     ブロックで実装）を持っているため、共通ヘッダーの「TAROT」
     「タロット占い」が不要な残存表示になっていた。display:noneのため
     .app-header自身のmargin-bottom:32pxも含めて余白ごと消え、
     TAROLUNE＋CHOOSE YOUR CARD側のサイズ・間隔には一切影響しない。
     対象は@media(max-width:600px)＋body.is-privacy-night＋
     #screen-privacy.activeの組み合わせのみで、PC版・スマホ昼版・
     利用規約・特定商取引法・FAQ・HOW IT WORKS・TOP・他画面には
     影響しない。 */
  body.is-privacy-night:has(#screen-privacy.active) .app-header {
    display: none;
  }

  body:not(.is-tokushoho-night):has(#screen-tokushoho.active) .app-header {
    display: none;
  }

  /* 特定商取引法・スマホ夜版限定（2026-09-16追加）。上の利用規約／
     プライバシーポリシー夜版と全く同じ考え方で、is-tokushoho-night側にも
     適用する。スマホ夜版特定商取引法は既に専用のブランドヘッダー
     （.tokushoho-logo/.tokushoho-logo-sub、この直後の「特定商取引法・
     スマホ夜版」ブロックで実装）を持っているため、共通ヘッダーの
     「TAROT」「タロット占い」が不要な残存表示になっていた。
     display:noneのため.app-header自身のmargin-bottom:32pxも含めて
     余白ごと消え、TAROLUNE＋CHOOSE YOUR CARD側のサイズ・間隔には
     一切影響しない。対象は@media(max-width:600px)＋
     body.is-tokushoho-night＋#screen-tokushoho.activeの組み合わせのみで、
     PC版・スマホ昼版・利用規約・プライバシーポリシー・FAQ・
     HOW IT WORKS・TOP・他画面には影響しない。 */
  body.is-tokushoho-night:has(#screen-tokushoho.active) .app-header {
    display: none;
  }
}

.screen {
  display: none;
}

.screen.active {
  display: block;
  animation: fade-in 0.4s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

h2 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 10px;
  text-align: center;
}

.screen-tagline {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.9;
  text-align: center;
  color: var(--text);
  margin: 12px 0 28px;
}

.guide-text {
  color: var(--text-muted);
  margin-top: 0;
  text-align: center;
}

/* カード選択画面PC昼版・3枚コース限定の中央オーバーレイ（現状/核心/導き）。
   既定では非表示にし、body.is-select-day.is-select-three
   （@media min-width:601px側）でのみ表示する。夜版・スマホ版・5枚/7枚
   コースには一切影響しない。position:fixedのためドキュメントフローに
   一切参加せず、.card-table・.card-grid・カードサイズ/gap/列数行数・
   #select-fortune-buttonの位置には触れない。 */
.spread-overlay {
  display: none;
}

/* 5枚コース専用オーバーレイの既定値。上の.spread-overlay（3枚）と
   同じ考え方で、無条件のベースルールとしてdisplay:noneにする。これが
   無いと、body.is-select-day.is-select-fiveが付いていない状態（3枚・
   7枚コース）でこの要素にCSSが一切当たらず、ブラウザ既定の
   display:block・opacity:1で通常のドキュメントフロー上に表示され、
   スクロール時に画面下部へ見えてしまう不具合の原因になっていた
   （2026-09-11調査・修正）。body.is-select-day.is-select-five
   .spread-overlay-five{display:flex; position:fixed; ...}（対象コース
   選択時に表示させる既存ルール）はこのベースルールより詳細度が高いため、
   対象コース選択時はそのまま上書きされて正常に表示される。 */
.spread-overlay-five {
  display: none;
}

/* 7枚コース専用オーバーレイの既定値。上の.spread-overlay-fiveと全く
   同じ理由・同じ考え方で追加する（display:noneのベースルールが無いと
   同じ不具合が7枚オーバーレイ側にも発生する）。
   body.is-select-day.is-select-seven .spread-overlay-seven
   {display:flex; ...}（対象コース選択時の既存ルール）はこのベースルール
   より詳細度が高いため、対象コース選択時はそのまま上書きされて正常に
   表示される。 */
.spread-overlay-seven {
  display: none;
}

/* 13枚コース専用オーバーレイの既定値。上の.spread-overlay-five/
   .spread-overlay-sevenと全く同じ理由・同じ考え方で追加する
   （display:noneのベースルールが無いと同じ不具合が13枚オーバーレイ
   側にも発生する）。body.is-select-day.is-select-thirteen
   .spread-overlay-thirteen{display:flex; ...}（対象コース選択時の
   既存ルール、スマホ昼版限定で下記に追加）はこのベースルールより
   詳細度が高いため、対象コース選択時はそのまま上書きされて正常に
   表示される。 */
.spread-overlay-thirteen {
  display: none;
}

/* スプレッド設計図（スマホ昼版・カード開示画面限定、2026-09-15追加。
   当初5枚コース限定、同日中に7枚コース(HORSESHOE_7/RELATIONSHIP_7)へ
   拡張）の既定値。上の.spread-overlay等と同じ理由で、無条件の
   display:noneベースルールを用意する。これが無いと、対象外の画面
   （3枚コース・PC版・夜版）でこの要素にCSSが一切当たらず、js/main.js
   側で中身が空のままでもブラウザ既定のdisplay:blockで見えてしまう
   恐れがある。下のbody.is-open-day.layout-relationship-5/.layout-general-5/
   .layout-decision-5/.layout-horseshoe-7/.layout-relationship-7
   .spread-diagram{display:block; ...}（@media max-width:600px限定）は
   このベースルールより詳細度が高いため、対象スプレッド・対象画面の
   ときだけ正常に表示される。 */
.spread-diagram {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

textarea {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(124, 105, 173, 0.6);
  background: var(--panel);
  color: var(--text);
  font-size: 1rem;
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(205, 164, 90, 0.15);
}

.error-text {
  color: #e08a8a;
  font-size: 0.9rem;
  text-align: center;
}

.hidden {
  display: none !important;
}

/* 相談内容の文字数カウンター（「0 / 1000」）の既定値。PC版・スマホ夜版の
   配置には一切変更を加えない方針のため、ここでは常にdisplay:noneとし、
   スマホ昼版側（body.is-input-day、@media max-width:600px内）だけで
   display:blockへ上書きして表示する。 */
.input-char-count {
  display: none;
  margin: 0;
}

.primary-button,
.secondary-button {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 20px auto 0;
  padding: 14px 28px;
  font-size: 1rem;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}

.primary-button {
  background: linear-gradient(135deg, var(--gold), var(--gold-strong));
  color: #241a06;
  font-weight: bold;
  box-shadow: 0 6px 18px rgba(205, 164, 90, 0.25);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.primary-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.secondary-button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(154, 145, 181, 0.5);
}

.secondary-button:hover {
  color: var(--text);
  border-color: var(--accent-light);
}

/* Googleログイン／登録ボタン（#login-google-button/#register-google-button、
   2026-09-20）専用のレイアウト用クラス。google.accounts.id.renderButton()
   がこの中へGoogle公式の本物のボタンを描画するため、.secondary-button
   が持つ見た目（background/color/border）は意図的に持たせず、周囲の
   ボタン（.secondary-button系）と横幅・余白だけを揃えるための
   display/width/max-width/marginのみを.secondary-buttonと同じ値で定義する。
   .secondary-button自体は他のボタン（電話番号ログイン等）で引き続き
   使うため変更していない。 */
.google-signin-slot {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 20px auto 0;
}

/* ---------- 選択数の表示 ---------- */
.selection-count {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.selection-count #selected-count {
  display: inline-block;
  min-width: 1.6em;
  color: var(--gold-strong);
  font-weight: bold;
  font-size: 1.15rem;
}

.selection-count-max {
  color: var(--text-muted);
}

/* 相談入力画面へ戻るボタン（#back-to-input-button、.select-back-button）は
   既定で非表示。スマホ昼版（body.is-select-day、@media max-width:600px側）
   でのみ表示する。PC版・夜版の見た目には一切影響しない。 */
.select-back-button {
  display: none;
}

/* ---------- 78枚のカードスプレッド（テーブル） ---------- */
.card-table {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(124, 92, 180, 0.12), transparent 65%),
    var(--panel);
  border: 1px solid rgba(124, 105, 173, 0.35);
  border-radius: 16px;
  padding: 18px 12px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0;
  max-height: 54vh;
  overflow-y: auto;
  padding: 10px 14px;
}

.card {
  position: relative;
  width: 50px;
  aspect-ratio: 2 / 3.2;
  margin: 6px 0 6px -16px;
  border-radius: 6px;
  border: 1px solid rgba(227, 192, 122, 0.5);
  background:
    radial-gradient(circle at 50% 45%, rgba(227, 192, 122, 0.16), transparent 60%),
    linear-gradient(150deg, var(--card-back-2) 0%, var(--card-back-1) 55%, var(--card-back-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(8, 6, 16, 0.4);
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease, z-index 0s;
}

.card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(227, 192, 122, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 1px rgba(227, 192, 122, 0.35);
}

.card:nth-child(odd) {
  margin-top: 2px;
}

.card:nth-child(even) {
  margin-top: 10px;
}

.card:hover:not(.selected):not(.is-locked),
.card:focus-visible:not(.selected):not(.is-locked) {
  transform: translateY(-8px);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.card.selected {
  outline: 2px solid var(--gold-strong);
  outline-offset: 1px;
  cursor: default;
  z-index: 6;
  animation: select-flash 0.4s ease;
}

@keyframes select-flash {
  0% { box-shadow: 0 0 0 0 rgba(227, 192, 122, 0.7); }
  100% { box-shadow: 0 0 14px 4px rgba(227, 192, 122, 0); }
}

.card.is-locked {
  opacity: 0.28;
  cursor: default;
}

.card .badge {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--gold-strong);
  color: #241a06;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 0 2px rgba(10, 8, 20, 0.6);
}

/* ---------- 3枚を開く画面 ---------- */
/* #show-result-buttonをposition:absoluteで配置するための基準。
   position:relative自体は見た目・レイアウトに影響しない（絶対配置の
   基準を作るためだけの指定）。 */
#screen-open {
  position: relative;
}

/* 共通の.screen.active{animation:fade-in}（keyframeのfromがtransform:
   translateY(6px)）が原因で、遷移直後の0.4秒間だけ#screen-openが
   transformを持つ状態になり、その間だけ#screen-open::before
   （position:fixed; inset:0の背景レイヤー）の基準（containing block）が
   ビューポートから#screen-open自身の箱にすり替わっていた。この結果、
   背景がビューポートより小さい#screen-open自身の箱に収まって描画され
   （「中央に小さく表示」）、0.4秒後にアニメーションが終わりtransformが
   none に戻った瞬間、基準がビューポートへ戻って背景が一気に全面表示に
   スナップする（「全面に広がる」）という見え方になっていた。
   既に#screen-input・#screen-select（PC昼夜とも）・.screen-topで
   同じfade-inのtransform競合に対しanimation:noneで対策済みのため、
   同じパターンを#screen-openにも適用する。カード配置・背景画像・
   昼夜切替・3/5/7枚ロジックには一切触れない。唯一の変更点は、
   #screen-open表示時のフェードイン演出（0.4秒のopacity/translateY）が
   無くなることのみ。 */
#screen-open.active {
  animation: none;
}

/* カードを開く画面の背景（PC限定）。#appのmax-width:720pxの内側だけに
   背景を敷くと画面の左右に隙間が残るため、#screen-open自体への直接
   background指定はやめ、#screen-open::before（position:fixed）で
   #appの幅制限とは独立してビューポート全面を覆う。width:100vwは
   使わない（#screen-input/#screen-selectで発生した、スクロールバー幅と
   の競合による横スクロール再発を避けるため）。z-index:-1により
   既存のカード・文字（#screen-openの通常の子要素、z-index指定なし＝
   auto）より必ず背面に描画される。pointer-events:noneでクリック操作
   （カードのめくり操作等）を一切妨げない。#screen-openが
   .screen{display:none}で非表示の間は::before自体も描画されないため、
   他画面に漏れ出す心配はない。
   #screen-openには現在is-input-day/is-select-dayのような昼夜・PC/
   スマホ区別classが存在しないため、新しいclassやJS判定ロジックは
   追加せず、@media(min-width:601px)だけでPCに限定する。7枚カードの
   配置・サイズ・文字・めくるロジック・スクロール対策CSS
   （#screen-openのposition:relative・#show-result-buttonのabsolute
   配置）・スマホ版・夜版の見た目には一切触れない。 */
@media (min-width: 601px) {
  #screen-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/open-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* PC昼版カード開示画面限定の背景差し替え。is-open-dayが付かない
     （夜版・準備中）場合は上のopen-background.pngのまま変更されない。
     background-size/position/repeat/z-index等は上の共通ルールから
     そのまま継承し、background-imageだけを上書きする。filter:blur()は
     追加しない（画像自体に既にぼかしが入っており、表向きのカードは
     z-index:-1の背面レイヤーのため影響を受けない）。 */
  body.is-open-day #screen-open::before {
    background-image: url("../assets/input/day-open-background.png");
  }

  /* 鑑定結果画面PC昼版限定の背景。#screen-resultには元々背景CSSが
     一切無く、bodyの既定の濃紺グラデーションがそのまま見えていた。
     カード開示画面PC昼版（上の#screen-open::beforeと全く同じ技術・
     同じ画像）をそのまま踏襲し、開示画面からの視覚的な連続性を持たせる。
     新規画像は追加しない。body.is-result-day限定のため、夜版
     （このルール自体が存在しない状態のまま）には一切影響しない。
     TAROTロゴ・カード・本文・見出し・ボタン・レイアウトのCSS/HTMLには
     触れていない。 */
  body.is-result-day #screen-result::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-open-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（keyframeのfromがtransform:
     translateY(6px)）が、上の#screen-result::before（position:fixed;
     inset:0の背景疑似要素）の基準（containing block）を、遷移直後の
     0.4秒間だけビューポートから#screen-result自身の箱にすり替えて
     しまい、「中央に小さく表示→パッと全面に広がる」現象を起こしていた。
     #screen-open等で既に採用済みの対策（animation:none）と同じ手法を、
     PC昼版限定でスコープして適用する。背景画像・カード・本文パネル・
     文字・サイズ・位置・余白には一切触れない。夜版・スマホ版・他画面の
     既存のanimation:noneルールにも触れない。 */
  body.is-result-day #screen-result.active {
    animation: none;
  }

  /* 鑑定結果画面PC夜版限定の背景（2026-09-12追加）。PC夜版カード開示
     画面で現在正式採用中の背景（#screen-open::before、上の共通PCルール、
     open-background.png）を、開示画面からの視覚的な連続性を持たせる
     ためそのまま踏襲する。新規画像は追加していない。
     #screen-result自身は本文が長く縦スクロールするが、この背景は
     #screen-result::before側にposition:fixed; inset:0;を指定して
     ビューポート基準で固定表示するため（#screen-open::before・上の
     body.is-result-day #screen-result::beforeと全く同じ技術）、
     スクロールしても背景が途切れる・無地になる・繰り返される・縦に
     引き伸ばされることはない（background-size:coverのため常に画面を
     隙間なく覆う）。
     body:not(.is-result-day)によりPC夜版限定。#screen-result以外の
     要素・PC昼版（body.is-result-day側の上のルールは無変更）・
     スマホ昼版・スマホ夜版（このメディアクエリ自体の対象外）・
     カード開示画面自体（#screen-open::beforeは無変更）には一切
     影響しない。3枚のカード・カード名・正逆位置表示・「鑑定結果」
     見出し・「あなたが選んだ3枚」・鑑定本文・各パネル・文字サイズ・
     文字色・余白・「もう一度占う」ボタン・スクロール機能には一切
     触れていない。 */
  body:not(.is-result-day) #screen-result::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/open-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 上のPC夜版背景（position:fixedの::before）と、共通の
     .screen.active{animation:fade-in}（keyframeのfromがtransform:
     translateY(6px)）との相性対策。上のbody.is-result-day
     #screen-result.active（PC昼版側）と全く同じ考え方で、PC夜版限定で
     スコープする。背景画像・カード・本文パネル・文字・サイズ・位置・
     余白には一切触れない。 */
  body:not(.is-result-day) #screen-result.active {
    animation: none;
  }

  /* PC昼版カード開示画面限定の視認性調整。①「TAROT」（.app-header
     .brand-mark、全画面共通要素）は正式ロゴ画像（透過PNG、
     assets/input/day-open-tarot-logo.png）へ画像置換する。HTML構造・
     テキスト内容（「TAROT」）自体は変更せず、text-indent:-9999px＋
     overflow:hiddenで文字だけを見えない位置へ追い出し、背後に
     background-imageでロゴを表示する（フォント変更ではないため、
     以前使用していたCinzel/Google Fontsはこの画面でも不要になった。
     index.html側の<link>3行、font-family指定は削除済み）。
     heightは現在のテキスト表示に近いサイズの暫定値で、実機確認後に
     調整予定。widthは指定せず.app-header内の既存の横幅・中央寄せに
     まかせ、background-size:containで縦横比を保ったまま自動的に
     中央表示する。②案内文（#screen-open .guide-text）は白寄りの
     明るい色へ変更する。margin/位置/padding・背景・カード・
     「参加型タロット占い」・見出し「あなたが選んだ○枚です。」には
     触れない。body.is-open-dayはPC/スマホ共通の既存クラスのため
     @media(min-width:601px)でPC限定にし、夜版・スマホ昼夜版には
     影響しない。3/5/7枚コース共通の要素のため、いずれのコースでも
     同じく適用される。 */
  body.is-open-day .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* カード開示画面PC夜版限定のTAROT表示（2026-09-12追加）。上の
     PC昼版ブロックと全く同じ値・全く同じ画像（新規画像は生成して
     いない）で、文字間を空けた「T A R O T」表示（.brand-mark、
     base rule）を正式ゴールドロゴへ差し替える。HTML（「TAROT」の
     テキスト自体）は変更せず、text-indent:-9999px＋overflow:hiddenで
     文字を見えない位置へ追い出し、背後にbackground-imageでロゴを
     表示する既存の画像置換方式をそのまま踏襲する。
     .app-headerは#screen-openと#screen-resultの間で共有されている
     要素のため、単純にbody:not(.is-open-day)だけで判定すると
     PC夜版鑑定結果画面（#screen-result表示中）の.brand-markにも
     誤って適用されてしまう。それを避けるため、:has(#screen-open
     .active)で「カード開示画面が実際に表示中であること」も同時に
     要求する（下のPC夜版鑑定結果画面向けの
     body:not(.is-result-day):has(#screen-result.active) .app-header
     と同じ考え方）。これにより対象はPC夜版のカード開示画面だけに
     厳密に限定される。背景・カード配置・カードサイズ・RWS画像
     サイズ・カード名・正逆位置・役割名・説明文・「鑑定結果を見る」
     ボタン・PC昼版・PC夜版鑑定結果画面・スマホ版には一切触れない。 */
  body:not(.is-open-day):has(#screen-open.active) .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 鑑定結果画面PC昼版限定のTAROT表示。カード開示画面PC昼版
     （上のbody.is-open-day .app-header .brand-mark）と全く同じ値で、
     同じロゴ・同じサイズにする。.brand-mark自体は開示/結果画面で
     共有されているが、is-open-dayは開示画面表示中だけ付与される
     クラスのため、結果画面（is-result-day）には別途このルールが必要。
     開示画面用の上のルールは変更していない。背景・「タロット占い」・
     「鑑定結果」・カード・本文パネル・その他のレイアウトには触れない。
     夜版・スマホ版にはis-result-dayが付与されないため影響しない。 */
  body.is-result-day .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 鑑定結果画面PC夜版限定のTAROT表示（2026-09-12追加）。上の
     PC昼版ブロックと全く同じ値・全く同じ画像（新規画像は生成して
     いない）で、文字間を空けた「T A R O T」表示（.brand-mark、
     base rule）を正式ゴールドロゴへ差し替える。HTML（「TAROT」の
     テキスト自体）は変更せず、text-indent:-9999px＋overflow:hiddenで
     文字を見えない位置へ追い出し、背後にbackground-imageでロゴを
     表示する既存の画像置換方式をそのまま踏襲する。
     .app-headerは#screen-openと#screen-resultの間で共有されている
     要素のため、単純にbody:not(.is-result-day)だけで判定すると
     PC夜版カード開示画面（#screen-open表示中）の.brand-markにも
     誤って適用されてしまう。それを避けるため、:has(#screen-result
     .active)で「結果画面が実際に表示中であること」も同時に要求する
     （#screen-select/#screen-terms等、他画面向けの既存の
     body:not(.is-select-day):has(#screen-select.active) .app-header
     と同じ考え方）。これにより対象はPC夜版の鑑定結果画面だけに
     厳密に限定される。背景（#screen-result::before）・3枚カード・
     画像サイズ・gap・カード名・正逆位置・役割名非表示仕様・見出し・
     本文パネル・注意書き・「もう一度占う」ボタン・PC昼版・
     カード開示画面自体・スマホ版には一切触れない。 */
  body:not(.is-result-day):has(#screen-result.active) .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 鑑定結果画面PC昼版限定の配色。カード開示画面PC昼版の.flip-card-front
     （アイボリー背景・ゴールド枠・濃い紫のカード名・ブロンズ系の
     正位置/逆位置）と同じ既存値を、.mini-card側にも適用する。
     background/border-color/colorのみの上書きで、width・padding・
     border-radius・font-size・margin・画像サイズ・gap・本文パネル・
     背景（#screen-result::before）・TAROTロゴには触れない。夜版・
     スマホ版にはis-result-dayが付与されないため影響しない。 */
  body.is-result-day .mini-card {
    background: linear-gradient(160deg, #fbf7ec 0%, #f4ecd8 100%);
    border-color: var(--gold-strong);
  }

  body.is-result-day .mini-card-position {
    color: #5c4a33;
  }

  body.is-result-day .mini-card-name {
    color: #241a3b;
  }

  body.is-result-day .mini-card-orientation {
    color: #6a4a1f;
  }

  /* 鑑定結果画面PC昼版限定のカード拡大。画像スロット・gapも合わせて
     大きくする。padding・配色・font-size・カード名・本文パネル・背景・
     TAROTロゴ・その他の位置には触れない。夜版・スマホ版には
     is-result-dayが付与されないため影響しない。 */
  body.is-result-day .mini-card {
    width: 150px;
  }

  body.is-result-day .card-image-slot-mini {
    width: 100px;
    height: 124px;
  }

  body.is-result-day .drawn-summary {
    gap: 18px;
  }

  /* 鑑定結果画面PC昼版限定で、.mini-card内の役割名（.mini-card-position、
     「現在の状況」等）を非表示にする。カード画像・カード名・正位置/
     逆位置・カードサイズ・画像サイズ・gap・配色・背景・本文パネル・
     TAROTロゴには触れない。夜版・スマホ版にはis-result-dayが
     付与されないため影響しない。 */
  body.is-result-day .mini-card-position {
    display: none;
  }

  /* 鑑定結果画面PC夜版限定のカード寸法統一（2026-09-12追加）。
     PC昼版の実測値（.mini-card width:150px／.card-image-slot-mini
     100×124px／.drawn-summary gap:18px／.mini-card-position
     display:none、いずれも上記の各ブロックと1文字も違わない値）を、
     配色（background/border-color/文字色）には一切触れずサイズ・
     寸法だけそのまま適用する。.mini-card-name/.mini-card-orientationの
     font-size・line-height・margin（0.72rem/0.68rem・font-weight・
     margin-bottom:2px）はbase rule（無条件・day/night共通）のまま
     昼版と既に同じ値のため変更していない。.card-image-slot img{
     object-fit:cover}も同じくbase ruleで昼夜共通のため無変更。
     #screen-result::beforeの背景・position:fixed仕様・鑑定本文・
     各見出し・注意書き・「もう一度占う」ボタン・HTML・JS・PC昼版の
     既存CSS・スマホ版・カード開示画面には一切触れない。 */
  body:not(.is-result-day) .mini-card {
    width: 150px;
  }

  body:not(.is-result-day) .card-image-slot-mini {
    width: 100px;
    height: 124px;
  }

  body:not(.is-result-day) .drawn-summary {
    gap: 18px;
  }

  body:not(.is-result-day) .mini-card-position {
    display: none;
  }

  /* 鑑定結果画面PC昼版限定で、外側の大きな鑑定本文パネル（.reading-text）
     の配色だけを、上部のアイボリー系カードデザインと自然につながる
     ように変更する。.flip-card-front（アイボリーのカード表面、確定済み）
     と同じ色（#fbf7ec/#f4ecd8）・var(--gold)をrgba化し、半透明にする
     ことで背景（day-open-background.png、紫×ゴールドの天体盤）が
     うっすら透けるようにする。backdrop-filterは使わない。
     本文文字色・見出し色・.reading-answer（内側の答えボックス）・
     border-radius・padding・margin・位置・カード・背景画像・TAROTロゴ
     には触れない。夜版・スマホ版にはis-result-dayが付与されないため
     影響しない。 */
  body.is-result-day .reading-text {
    background: linear-gradient(160deg, rgba(251, 247, 236, 0.88) 0%, rgba(244, 236, 216, 0.82) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
    color: #171126;
    font-weight: 500;
  }

  body.is-result-day .reading-heading {
    color: #9a6818;
    font-weight: 600;
  }

  /* TAROLUNE Premium誘導パネルのPC昼版限定配色（2026-09-12追加）。
     上のbody.is-result-day .reading-text/.reading-headingと全く同じ
     アイボリー×ゴールドの配色（#fbf7ec/#f4ecd8系・#9a6818）を流用し、
     結果画面全体の世界観に馴染ませる。padding/margin/border-radius・
     ボタンの見た目・パネルの位置・HTML構造には触れない。夜版・
     スマホ版にはis-result-dayが付与されないため影響しない
     （既存の.reading-text/.reading-heading昼版上書きと同じスコープ
     設計）。 */
  body.is-result-day .premium-promo-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 236, 216, 0.85) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
  }

  body.is-result-day .premium-promo-heading {
    color: #7a7190;
  }

  body.is-result-day .premium-promo-brand,
  body.is-result-day .premium-promo-price {
    color: #9a6818;
  }

  body.is-result-day .premium-promo-desc {
    color: #171126;
  }

  /* PC昼版・鑑定結果画面「もう一度占う」ボタンの視認性改善
     （2026-09-13追加）。#restart-buttonは共通の.secondary-button
     （background:transparent; color:var(--text-muted); border:1px
     solid rgba(154,145,181,0.5);）をそのまま使っており、夜背景向けの
     薄い配色がPC昼版の明るい背景に対してほぼ溶け込んで見えなくなって
     いたための対策。上の「TAROLUNE Premiumを見る」（ゴールド基調の
     メインCTA）とは役割を分け、こちらはくすみ紫〜ラベンダー系の
     半透明背景＋ゴールドの文字・枠線・控えめなグローのセカンダリCTAに
     する。位置・幅・高さ・padding・border-radius・font-size・文言・
     クリック処理・遷移先（.secondary-button共通ルール側の値）には
     一切触れていない。 */
  body.is-result-day #screen-result #restart-button {
    color: #f0d28a;
    background: rgba(105, 78, 145, 0.72);
    border: 1px solid rgba(205, 164, 90, 0.85);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.12),
      0 3px 10px rgba(40, 20, 65, 0.20),
      0 0 12px rgba(227, 192, 122, 0.16);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  body.is-result-day #screen-result #restart-button:hover {
    color: #f0d28a;
    background: rgba(118, 88, 158, 0.78);
    border-color: rgba(227, 192, 122, 0.9);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.16),
      0 4px 12px rgba(40, 20, 65, 0.24),
      0 0 18px rgba(227, 192, 122, 0.3);
  }

  /* 鑑定結果画面PC夜版限定の視認性改善（2026-09-12追加）。注意書き
     （.disclaimer）と「もう一度占う」ボタン（#restart-button）が
     背景の魔法陣（open-background.png）に対して暗く読みにくかった
     ため、文字色・枠線色だけを明るいアイボリー系へ調整する。
     Premium誘導パネル（.premium-promo-panel、ゴールド基調）より
     目立たせないよう、ゴールドではなく通常の読みやすい明色
     （var(--text)相当の値）にとどめる。border-colorのみを上書きし
     border-width/styleには触れないため、枠線の太さ・種類は変わらない。
     文字サイズ・位置・margin・line-height・ボタンのサイズ／位置／
     幅／高さ／padding／border-radius・Premium誘導パネル・鑑定本文・
     カード・TAROTロゴ・スクロール仕様・背景画像・背景の明暗には
     一切触れていない。PC昼版（body.is-result-day側は無変更）・
     スマホ昼版・スマホ夜版（このメディアクエリ自体の対象外）には
     影響しない。 */
  body:not(.is-result-day) #screen-result .disclaimer {
    color: #e8e1f1;
  }

  /* PC夜版・鑑定結果画面「もう一度占う」C案「クリスタルガラス」
     正式採用（2026-09-12）。詳細はCLAUDE.md「PC夜版・鑑定結果画面
     『もう一度占う』ボタン C案クリスタルガラス正式採用」を参照。
     暗紫〜濃紺の半透明ガラス本体（左上が明るく右下が暗い斜め
     グラデーション）、::beforeで左上に白〜淡金の楕円ハイライト、
     ::afterで右下に薄紫〜金の回り込み光、box-shadowは外側発光を
     最小限にしinset側（白の縁取り→薄紫の内側光→暗い核）を主体に
     多層エッジを表現。overflow:hiddenはこれらのハイライトをピル
     形状に正しく切り抜くための指定で、position:relative同様に
     表示位置・サイズには影響しない。検討済みのA案「光のオーラ」は
     不採用。 */
  body:not(.is-result-day) #screen-result #restart-button {
    position: relative;
    overflow: hidden;
    color: var(--gold-strong);
    border-color: rgba(227, 192, 122, 0.62);
    background: linear-gradient(135deg, rgba(64, 44, 100, 0.52) 0%, rgba(30, 20, 56, 0.72) 55%, rgba(14, 10, 28, 0.85) 100%);
    backdrop-filter: blur(4px) saturate(120%);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.32),
      inset 0 -1px 2px rgba(10, 6, 24, 0.45),
      inset 0 0 16px rgba(180, 150, 220, 0.18),
      inset 0 0 30px rgba(24, 18, 55, 0.35),
      0 3px 10px rgba(5, 2, 18, 0.35),
      0 0 8px rgba(227, 192, 122, 0.16);
    text-shadow:
      0 1px 1px rgba(255, 255, 255, 0.25),
      0 0 6px rgba(227, 192, 122, 0.35);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  body:not(.is-result-day) #screen-result #restart-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 60% 45% at 26% 20%, rgba(255, 255, 255, 0.40), rgba(227, 192, 122, 0.14) 42%, transparent 70%);
    pointer-events: none;
  }

  body:not(.is-result-day) #screen-result #restart-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(ellipse 70% 55% at 80% 88%, rgba(168, 132, 210, 0.18), transparent 65%),
      linear-gradient(0deg, rgba(227, 192, 122, 0.10), transparent 35%);
    pointer-events: none;
  }

  body:not(.is-result-day) #screen-result #restart-button:hover {
    border-color: rgba(227, 192, 122, 0.80);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.42),
      inset 0 -1px 2px rgba(10, 6, 24, 0.50),
      inset 0 0 18px rgba(180, 150, 220, 0.24),
      inset 0 0 34px rgba(24, 18, 55, 0.40),
      0 3px 12px rgba(5, 2, 18, 0.40),
      0 0 12px rgba(227, 192, 122, 0.24);
  }

  body:not(.is-result-day) #screen-result #restart-button:hover::before {
    background: radial-gradient(ellipse 60% 45% at 26% 20%, rgba(255, 255, 255, 0.52), rgba(227, 192, 122, 0.20) 42%, transparent 70%);
  }

  body.is-open-day #screen-open .guide-text {
    color: #fdfaf3;
    text-shadow: 0 1px 4px rgba(40, 24, 8, 0.45), 0 0 8px rgba(40, 24, 8, 0.25);
  }

  /* PC昼版カード開示画面限定の視認性調整。各カード下の役割名
     （.position-caption、「1枚目：現在の状況」等）はベースルール
     （color:var(--text-muted)）のまま明るい背景に埋もれていたため、
     .guide-textと同じ配色（白寄りの明るい色＋暗色系text-shadow）に
     揃える。font-size/margin/min-height/text-align/order・カード位置・
     カードサイズには触れない。PC夜版（別セレクタ、#c7bfd8＋既存の
     text-shadow）・スマホ昼夜版には影響しない。 */
  body.is-open-day #screen-open .position-caption {
    color: #fdfaf3;
    text-shadow: 0 1px 4px rgba(40, 24, 8, 0.45), 0 0 8px rgba(40, 24, 8, 0.25);
  }
}

/* スマホ昼版カード開示画面限定の背景。PC版（@media min-width:601px側の
   #screen-open::before）とは別ファイル・別メディアクエリのため、
   PC昼版・4種類のカード選択画面には一切影響しない。position:fixedの
   疑似要素はビューポートと同じサイズで常に固定表示されるため、
   3枚/5枚/7枚でページの縦の長さが変わっても背景自体は同じ見え方の
   ままスクロールしない。filter:blur()は追加しない（画像自体に既に
   ぼかしが入っている）。 */
@media (max-width: 600px) {
  body.is-open-day #screen-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/mobile/day-open-background-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* スマホ昼版カード開示画面限定のカード裏面画像。PC版
     （#screen-open .flip-card-back、min-width:601px側）・上の背景固定
     （#screen-open::before）とは別セレクタ・別ファイルのため、双方とも
     一切変更しない。装飾用::before/::afterはPC版と同じ理由で
     display:noneにする。カードサイズ118×180px・gap・フリップ処理・
     正逆位置・選択順・表向きカード側には触れない。 */
  body.is-open-day #screen-open .flip-card-back {
    background-image: url("../assets/cards/mobile/day-card-back-open.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  body.is-open-day #screen-open .flip-card-back::before,
  body.is-open-day #screen-open .flip-card-back::after {
    display: none;
  }

  /* スマホ昼版カード開示画面限定のTAROTロゴ画像化（2026-09-15）。
     PC昼版・PC夜版の#screen-open（body.is-open-day .app-header
     .brand-mark、609〜618行目／body:not(.is-open-day):has(#screen-open
     .active) .app-header .brand-mark、638〜647行目）で正式採用済みの
     「text-indent:-9999px+overflow:hiddenで元のテキストを見た目上隠し、
     background-imageで正式ロゴを表示する」技術をそのまま踏襲する。
     HTML側のテキスト「TAROT」自体は変更しない。
     画像は新規生成せず、スマホ昼版TOP（.top-hero-mark）・スマホ昼版
     相談入力画面（.input-tarot-mark）で既に正式採用済みの軽量版
     assets/input/day-open-tarot-logo-mobile.png（312×104px・約21.8KB、
     元画像day-open-tarot-logo.png=2172×724px・約694.5KBの2倍解像度版）
     を再利用する。height:30pxは、PC版の同じ.brand-mark画像置換
     （609/638行目）で既に採用済みの値をそのまま流用（widthは指定せず
     .app-headerの中央寄せに任せ、background-size:containで縦横比を
     保つ）。従来あったcolor:#B8863Fの上書きは、テキストが見た目上
     隠れるため不要になり削除した（PC版の画像置換ルールにも色指定は
     ない）。位置・「タロット占い」・見出し・案内文・カード・背景・
     PC版・スマホ夜版には一切触れていない。 */
  body.is-open-day .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* TAROTロゴ画像化（2026-09-18、スマホ夜版カード開示画面限定）。
     直前に正式採用したスマホ夜版カード選択画面（body:not(.is-select-
     day):has(#screen-select.active) .app-header .brand-mark）と全く
     同じ手法（text-indent:-9999px+overflow:hidden+background-image+
     background-size:contain）・全く同じ画像・全く同じheight:30pxを
     そのまま流用する。height:30pxは、このカード開示画面自体の
     スマホ昼版（すぐ上のbody.is-open-day .app-header .brand-mark）
     およびPC昼夜版（609/638行目）で既に採用済みの値と同一のため、
     新しいサイズは作っていない。
     :has(#screen-open.active)で「今まさにカード開示画面がアクティブ」
     な場合に限定し、body:not(.is-open-day)（＝現在open画面＋昼版で
     ない状態）とAND条件にすることで、カード開示画面以外
     （is-open-dayがfalseになる他のすべての画面）や、PC夜版
     （@media min-width:601px側の既存ルール、734行目）には一切
     影響しない。背景・「タロット占い」・見出し・案内文・13枚の役割
     ラベル・カードサイズ/画像/裏面/表面/間隔/配置/開閉処理・
     スクロール・「鑑定結果を見る」ボタンには一切触れていない。 */
  body:not(.is-open-day):has(#screen-open.active) .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* スプレッド設計図（スマホ昼版・カード開示画面・5枚コース限定、
     2026-09-15追加）。.guide-textと#open-areaの間の専用コンテナ
     （#spread-diagram、index.html）を、GENERAL_5/RELATIONSHIP_5/
     DECISION_5選択時だけ表示する。3枚/7枚コースではjs/main.js側で
     中身が空になるうえ、body.is-open-day.layout-*クラスも付かないため
     display:noneのまま（上の無条件ベースルール、.spread-diagram参照）。

     パネル配色は新しい色を作らず、サイト内で「半透明の濃紺〜濃紫パネル
     ＋ゴールド細枠」として繰り返し使われている既存の値
     （background:rgba(24,18,55,0.72)、border-color:rgba(217,173,85,0.62)、
     例: .terms-panel夜版・.auth-panel等）をそのまま流用する。背景の
     カード開示画面（写真・カード群）は完全には隠さず、半透明を通して
     存在感を残す。既存5枚カード（#open-area以下）・「あなたが選んだ
     5枚です。」・案内文・TAROTロゴ・背景画像には一切触れていない。 */
  body.is-open-day.layout-relationship-5 .spread-diagram,
  body.is-open-day.layout-general-5 .spread-diagram,
  body.is-open-day.layout-decision-5 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  /* スプレッド名（例:「二者関係型（5枚）」）。ゴールド系文字、
     spreadRegistry.js側のnameをそのまま表示するだけで固定文言は
     持たない（js/main.js renderSpreadDiagram()参照）。 */
  body.is-open-day.layout-relationship-5 .spread-diagram-name,
  body.is-open-day.layout-general-5 .spread-diagram-name,
  body.is-open-day.layout-decision-5 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-strong);
    text-align: center;
  }

  /* 左：①〜⑤の縮小配置図／右：①〜⑤の役割名一覧、を横並びにする。 */
  body.is-open-day.layout-relationship-5 .spread-diagram-body,
  body.is-open-day.layout-general-5 .spread-diagram-body,
  body.is-open-day.layout-decision-5 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 縮小配置図の外枠。3列グリッドとし、各layoutIdごとにnth-childで
     grid-column/grid-rowを指定する（下の個別ルール参照）。列数・
     セルサイズ・gapは、この設計図専用の値として新たに定めた
     コンパクトなサイズで、既存PC実物カードのグリッド（150px列）とは
     独立している。実物のタロットカード画像は使わず、番号だけの
     単純な四角形（.spread-diagram-box）で表現する。 */
  body.is-open-day.layout-relationship-5 .spread-diagram-grid,
  body.is-open-day.layout-general-5 .spread-diagram-grid,
  body.is-open-day.layout-decision-5 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 26px);
    grid-auto-rows: 26px;
    gap: 6px;
  }

  body.is-open-day.layout-relationship-5 .spread-diagram-box,
  body.is-open-day.layout-general-5 .spread-diagram-box,
  body.is-open-day.layout-decision-5 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--gold-strong);
    border-radius: 5px;
    color: var(--gold-strong);
    font-size: 0.7rem;
    font-weight: 700;
  }

  /* RELATIONSHIP_5の縮小配置図。PC版の実物カード配置
     （body.is-open-day.layout-relationship-5 #screen-open
     .flip-card-wrapper:nth-child(N)、@media min-width:601px側、
     1629〜1732行目付近）と全く同じ相対配置（grid-column/grid-row）を、
     このコンパクトな3列グリッドへそのまま縮小移植したもの。PC版の
     実物カードCSSは変更していない。
     ①(you)                ②(partner)
          ③(your-future) ⑤(potential) ④(their-future) */
  body.is-open-day.layout-relationship-5 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.is-open-day.layout-relationship-5 .spread-diagram-box:nth-child(2) { grid-column: 3; grid-row: 1; }
  body.is-open-day.layout-relationship-5 .spread-diagram-box:nth-child(3) { grid-column: 1; grid-row: 2; }
  body.is-open-day.layout-relationship-5 .spread-diagram-box:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.is-open-day.layout-relationship-5 .spread-diagram-box:nth-child(5) { grid-column: 2; grid-row: 2; }

  /* GENERAL_5の縮小配置図。PC版の実物カード配置（1734〜1869行目付近）
     と全く同じ十字型の相対配置をそのまま縮小移植。
             ②(past)
     ④(challenge) ①(heart) ⑤(key-card)
             ③(future) */
  body.is-open-day.layout-general-5 .spread-diagram-box:nth-child(1) { grid-column: 2; grid-row: 2; }
  body.is-open-day.layout-general-5 .spread-diagram-box:nth-child(2) { grid-column: 2; grid-row: 1; }
  body.is-open-day.layout-general-5 .spread-diagram-box:nth-child(3) { grid-column: 2; grid-row: 3; }
  body.is-open-day.layout-general-5 .spread-diagram-box:nth-child(4) { grid-column: 1; grid-row: 2; }
  body.is-open-day.layout-general-5 .spread-diagram-box:nth-child(5) { grid-column: 3; grid-row: 2; }

  /* DECISION_5の縮小配置図。PC版の実物カード配置（1871〜2012行目付近）
     と全く同じ分岐・収束型の相対配置をそのまま縮小移植。
             ①(current-situation)
     ②(option-a)    ③(option-b)
             ④(hidden-factor)
             ⑤(guidance) */
  body.is-open-day.layout-decision-5 .spread-diagram-box:nth-child(1) { grid-column: 2; grid-row: 1; }
  body.is-open-day.layout-decision-5 .spread-diagram-box:nth-child(2) { grid-column: 1; grid-row: 2; }
  body.is-open-day.layout-decision-5 .spread-diagram-box:nth-child(3) { grid-column: 3; grid-row: 2; }
  body.is-open-day.layout-decision-5 .spread-diagram-box:nth-child(4) { grid-column: 2; grid-row: 3; }
  body.is-open-day.layout-decision-5 .spread-diagram-box:nth-child(5) { grid-column: 2; grid-row: 4; }

  /* ①〜⑤の役割名一覧（state.generatedPositions[i].labelをそのまま
     表示、実物カード上部の「1枚目：○○」等と同じデータ源）。明るい
     文字色（既存の夜系パネルで使われている#eee8f5）で、暗いパネル
     背景の上でも読みやすくする。 */
  body.is-open-day.layout-relationship-5 .spread-diagram-list,
  body.is-open-day.layout-general-5 .spread-diagram-list,
  body.is-open-day.layout-decision-5 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.is-open-day.layout-relationship-5 .spread-diagram-list-item,
  body.is-open-day.layout-general-5 .spread-diagram-list-item,
  body.is-open-day.layout-decision-5 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #eee8f5;
  }
  /* ===== 5枚コース・スプレッド設計図（GENERAL_5/RELATIONSHIP_5/
     DECISION_5、スマホ昼版） ここまで ===== */

  /* ===== 5枚コース・スプレッド設計図（GENERAL_5/RELATIONSHIP_5/
     DECISION_5、スマホ夜版、2026-09-18追加） =====
     スマホ昼版（body.is-open-day.layout-relationship-5/.layout-general-5/
     .layout-decision-5、上のブロック）で完成済みの.spread-diagramを
     正として、レイアウト値（display/margin/width/max-width/padding/
     border-radius/box-shadow/gap/grid-template-columns/grid-auto-rows/
     各nth-childのgrid-column・grid-row/font-size/font-weight/
     letter-spacing/line-height/text-align等）は1つも変更せず、セレクタの
     昼夜条件だけを入れ替えてそのまま複製する。GENERAL_5の十字型・
     RELATIONSHIP_5の左右対称+下段中央・DECISION_5の分岐収束型、いずれも
     ①〜⑤の配置原理は完全に同一。HTML（#spread-diagram、index.html）・
     JS（js/main.jsのrenderSpreadDiagram()/renderSpreadDiagramContent()、
     SPREAD_DIAGRAM_LAYOUT_IDS）はPC/スマホ・昼夜共通で既に動作している
     ため、今回変更していない。

     配色のみ、スマホ夜版で正式採用済みの13枚説明パネル
     （body:not(.is-open-day).layout-horoscope-13 .spread-diagram-*、
     上のブロック）と同じ既存パレットへ差し替える（新しい色は作らない）。
     - パネル背景/枠: rgba(24, 18, 55, 0.72) / rgba(217, 173, 85, 0.62)
       （box-shadowは元々ダークトーンの中立値のため変更不要）
     - スプレッド名（.spread-diagram-name）: #e3b85c（昼版の
       var(--gold-strong)から変更）
     - ミニ配置図の枠・番号（.spread-diagram-box）: 背景はrgba(255,
       255,255,0.08)のまま維持（中立な白半透明のため夜背景でも違和感
       なし）、枠色・文字色だけ#e3b85cへ
     - 役割一覧（.spread-diagram-list-item）: #d6cee4（昼版の#eee8f5
       から変更）

     実カード（.open-area/.flip-card-wrapper/.flip-card）・「鑑定結果を
     見る」ボタン・position-caption・背景画像・TAROTロゴ・「タロット
     占い」・「あなたが選んだ5枚です。」・「心を落ち着けて、1枚ずつ
     カードを開いてください。」には一切触れていない。3枚/7枚/13枚の
     スマホ昼夜版spread-diagram・PC版・スマホ昼版には一切影響しない。 */
  body:not(.is-open-day).layout-relationship-5 .spread-diagram,
  body:not(.is-open-day).layout-general-5 .spread-diagram,
  body:not(.is-open-day).layout-decision-5 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-name,
  body:not(.is-open-day).layout-general-5 .spread-diagram-name,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e3b85c;
    text-align: center;
  }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-body,
  body:not(.is-open-day).layout-general-5 .spread-diagram-body,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-grid,
  body:not(.is-open-day).layout-general-5 .spread-diagram-grid,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 26px);
    grid-auto-rows: 26px;
    gap: 6px;
  }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box,
  body:not(.is-open-day).layout-general-5 .spread-diagram-box,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #e3b85c;
    border-radius: 5px;
    color: #e3b85c;
    font-size: 0.7rem;
    font-weight: 700;
  }

  /* RELATIONSHIP_5の縮小配置図（スマホ昼版と完全に同じ相対配置）。
     ①(you)                ②(partner)
          ③(your-future) ⑤(potential) ④(their-future) */
  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 1; }
  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box:nth-child(2) { grid-column: 3; grid-row: 1; }
  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box:nth-child(3) { grid-column: 1; grid-row: 2; }
  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box:nth-child(4) { grid-column: 3; grid-row: 2; }
  body:not(.is-open-day).layout-relationship-5 .spread-diagram-box:nth-child(5) { grid-column: 2; grid-row: 2; }

  /* GENERAL_5の縮小配置図（スマホ昼版と完全に同じ十字型の相対配置）。
          ②(past)
  ④(challenge) ①(heart) ⑤(key-card)
          ③(future) */
  body:not(.is-open-day).layout-general-5 .spread-diagram-box:nth-child(1) { grid-column: 2; grid-row: 2; }
  body:not(.is-open-day).layout-general-5 .spread-diagram-box:nth-child(2) { grid-column: 2; grid-row: 1; }
  body:not(.is-open-day).layout-general-5 .spread-diagram-box:nth-child(3) { grid-column: 2; grid-row: 3; }
  body:not(.is-open-day).layout-general-5 .spread-diagram-box:nth-child(4) { grid-column: 1; grid-row: 2; }
  body:not(.is-open-day).layout-general-5 .spread-diagram-box:nth-child(5) { grid-column: 3; grid-row: 2; }

  /* DECISION_5の縮小配置図（スマホ昼版と完全に同じ分岐・収束型の相対
     配置）。
          ①(current-situation)
  ②(option-a)    ③(option-b)
          ④(hidden-factor)
          ⑤(guidance) */
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box:nth-child(1) { grid-column: 2; grid-row: 1; }
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box:nth-child(2) { grid-column: 1; grid-row: 2; }
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box:nth-child(3) { grid-column: 3; grid-row: 2; }
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box:nth-child(4) { grid-column: 2; grid-row: 3; }
  body:not(.is-open-day).layout-decision-5 .spread-diagram-box:nth-child(5) { grid-column: 2; grid-row: 4; }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-list,
  body:not(.is-open-day).layout-general-5 .spread-diagram-list,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body:not(.is-open-day).layout-relationship-5 .spread-diagram-list-item,
  body:not(.is-open-day).layout-general-5 .spread-diagram-list-item,
  body:not(.is-open-day).layout-decision-5 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #d6cee4;
  }
  /* ===== 5枚コース・スプレッド設計図（GENERAL_5/RELATIONSHIP_5/
     DECISION_5、スマホ夜版） ここまで ===== */

  /* スプレッド設計図・7枚コース拡張（スマホ昼版・カード開示画面限定、
     2026-09-15追加）。HORSESHOE_7専用のブロック。上のRELATIONSHIP_5/
     GENERAL_5/DECISION_5（5枚コース）のセレクタ・値は一切変更せず、
     完全に独立した新規ルールとして追加する（body.is-open-day.
     layout-horseshoe-7という専用クラスの組み合わせでのみ有効）。
     パネルの背景色rgba(24,18,55,0.72)・透け感・ゴールド枠
     rgba(217,173,85,0.62)・角丸・box-shadow・幅（calc(100% - 32px)、
     max-width:360px）・パディングは、5枚版と全く同じ値をそのまま
     踏襲する（新しい色・サイズを作らない）。 */
  body.is-open-day.layout-horseshoe-7 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body.is-open-day.layout-horseshoe-7 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-strong);
    text-align: center;
  }

  body.is-open-day.layout-horseshoe-7 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* HORSESHOE_7は実カードが7列×3行（css/style.css 2215〜2261行目
     付近、@media min-width:601px側）のため、5枚版と同じ26px角のまま
     7列並べるとパネル内側の幅（約328px）の大半を占め、右側の役割
     一覧が窮屈になる。ミニ配置図だけを18px角・gap4pxへ縮小し、
     パネル自体の外寸（width/max-width/padding）は変更しない。 */
  body.is-open-day.layout-horseshoe-7 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 18px);
    grid-auto-rows: 18px;
    gap: 4px;
  }

  body.is-open-day.layout-horseshoe-7 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--gold-strong);
    border-radius: 4px;
    color: var(--gold-strong);
    font-size: 0.56rem;
    font-weight: 700;
  }

  /* HORSESHOE_7の縮小配置図。PC版の実物カード配置
     （body.is-open-day.layout-horseshoe-7 #screen-open
     .flip-card-wrapper:nth-child(N)、@media min-width:601px側、
     2228〜2261行目）と全く同じ相対配置（grid-column/grid-row）を、
     18px角のコンパクトなグリッドへそのまま縮小移植したもの。PC版の
     実物カードCSSは変更していない。
           ③(hidden)  ④(obstacles)  ⑤(external)
        ②(present)                        ⑥(action)
     ①(recent-past)                              ⑦(outcome) */
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 3; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(2) { grid-column: 2; grid-row: 2; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(3) { grid-column: 3; grid-row: 1; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(4) { grid-column: 4; grid-row: 1; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(5) { grid-column: 5; grid-row: 1; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(6) { grid-column: 6; grid-row: 2; }
  body.is-open-day.layout-horseshoe-7 .spread-diagram-box:nth-child(7) { grid-column: 7; grid-row: 3; }

  body.is-open-day.layout-horseshoe-7 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.is-open-day.layout-horseshoe-7 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #eee8f5;
  }

  /* スプレッド設計図・7枚コース拡張（スマホ昼版・カード開示画面限定、
     2026-09-15追加）。RELATIONSHIP_7専用のブロック。実カードが3列×3行
     （css/style.css 2386〜2432行目付近、@media min-width:601px側）の
     ため、5枚版（GENERAL_5等）と全く同じ26px角・gap6pxの3列グリッドを
     そのまま流用できる（サイズ変更不要）。パネルの背景色・透け感・
     ゴールド枠・幅・パディングも5枚版と全く同じ値を踏襲する。 */
  body.is-open-day.layout-relationship-7 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body.is-open-day.layout-relationship-7 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-strong);
    text-align: center;
  }

  body.is-open-day.layout-relationship-7 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body.is-open-day.layout-relationship-7 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 26px);
    grid-auto-rows: 26px;
    gap: 6px;
  }

  body.is-open-day.layout-relationship-7 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--gold-strong);
    border-radius: 5px;
    color: var(--gold-strong);
    font-size: 0.7rem;
    font-weight: 700;
  }

  /* RELATIONSHIP_7の縮小配置図。PC版の実物カード配置
     （body.is-open-day.layout-relationship-7 #screen-open
     .flip-card-wrapper:nth-child(N)、@media min-width:601px側、
     2399〜2432行目）と全く同じ相対配置（grid-column/grid-row）を、
     26px角のグリッドへそのまま縮小移植したもの（サイズは5枚版と同一）。
     PC版の実物カードCSSは変更していない。
     ①(you)              ②(them)
     ③(your-feelings)    ④(their-feelings)
     ⑤(past)  ⑥(present)  ⑦(future) */
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(2) { grid-column: 3; grid-row: 1; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(3) { grid-column: 1; grid-row: 2; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(4) { grid-column: 3; grid-row: 2; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(5) { grid-column: 1; grid-row: 3; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(6) { grid-column: 2; grid-row: 3; }
  body.is-open-day.layout-relationship-7 .spread-diagram-box:nth-child(7) { grid-column: 3; grid-row: 3; }

  body.is-open-day.layout-relationship-7 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.is-open-day.layout-relationship-7 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #eee8f5;
  }
  /* ===== 7枚コース・スプレッド設計図（HORSESHOE_7/RELATIONSHIP_7、
     スマホ昼版） ここまで ===== */

  /* ===== 7枚コース・スプレッド設計図（HORSESHOE_7/RELATIONSHIP_7、
     スマホ夜版、2026-09-18追加） =====
     スマホ昼版（body.is-open-day.layout-horseshoe-7/
     .layout-relationship-7、上のブロック）で完成済みの.spread-diagramを
     正として、レイアウト値（display/margin/width/max-width/padding/
     border-radius/box-shadow/gap/grid-template-columns/grid-auto-rows/
     各nth-childのgrid-column・grid-row/font-size/font-weight/
     letter-spacing/line-height/text-align等）は1つも変更せず、セレクタの
     昼夜条件だけを入れ替えてそのまま複製する。HORSESHOE_7は実カードが
     7列×3行のため配置図も18px角・7列グリッド、RELATIONSHIP_7は3列×3行の
     ため5枚版と同じ26px角・3列グリッド——という昼版の使い分けも
     そのまま踏襲する。HTML（#spread-diagram、index.html）・JS
     （js/main.jsのrenderSpreadDiagram()/renderSpreadDiagramContent()、
     SPREAD_DIAGRAM_LAYOUT_IDS）はPC/スマホ・昼夜共通で既に動作している
     ため、今回変更していない。

     配色のみ、直前に実装済みのスマホ夜版5枚スプレッド図
     （body:not(.is-open-day).layout-relationship-5/.layout-general-5/
     .layout-decision-5 .spread-diagram-*、上のブロック）と同じ既存
     パレットへ差し替える（新しい色は作らない）。
     - パネル背景/枠: rgba(24, 18, 55, 0.72) / rgba(217, 173, 85, 0.62)
       （box-shadowは元々ダークトーンの中立値のため変更不要）
     - スプレッド名（.spread-diagram-name）: #e3b85c（昼版の
       var(--gold-strong)から変更）
     - ミニ配置図の枠・番号（.spread-diagram-box）: 背景はrgba(255,
       255,255,0.08)のまま維持（中立な白半透明のため夜背景でも違和感
       なし）、枠色・文字色だけ#e3b85cへ
     - 役割一覧（.spread-diagram-list-item）: #d6cee4（昼版の#eee8f5
       から変更）

     実カード（.open-area/.flip-card-wrapper/.flip-card）・「鑑定結果を
     見る」ボタン・position-caption・背景画像・TAROTロゴ・「タロット
     占い」・「あなたが選んだ7枚です。」・「心を落ち着けて、1枚ずつ
     カードを開いてください。」には一切触れていない。3枚/5枚/13枚の
     スマホ昼夜版spread-diagram・PC版・スマホ昼版には一切影響しない。 */
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e3b85c;
    text-align: center;
  }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 18px);
    grid-auto-rows: 18px;
    gap: 4px;
  }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #e3b85c;
    border-radius: 4px;
    color: #e3b85c;
    font-size: 0.56rem;
    font-weight: 700;
  }

  /* HORSESHOE_7の縮小配置図（スマホ昼版と完全に同じ相対配置）。
        ③(hidden)  ④(obstacles)  ⑤(external)
     ②(present)                        ⑥(action)
  ①(recent-past)                              ⑦(outcome) */
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 3; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(2) { grid-column: 2; grid-row: 2; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(3) { grid-column: 3; grid-row: 1; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(4) { grid-column: 4; grid-row: 1; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(5) { grid-column: 5; grid-row: 1; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(6) { grid-column: 6; grid-row: 2; }
  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-box:nth-child(7) { grid-column: 7; grid-row: 3; }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body:not(.is-open-day).layout-horseshoe-7 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #d6cee4;
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e3b85c;
    text-align: center;
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 26px);
    grid-auto-rows: 26px;
    gap: 6px;
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #e3b85c;
    border-radius: 5px;
    color: #e3b85c;
    font-size: 0.7rem;
    font-weight: 700;
  }

  /* RELATIONSHIP_7の縮小配置図（スマホ昼版と完全に同じ相対配置）。
     ①(you)              ②(them)
     ③(your-feelings)    ④(their-feelings)
     ⑤(past)  ⑥(present)  ⑦(future) */
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(1) { grid-column: 1; grid-row: 1; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(2) { grid-column: 3; grid-row: 1; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(3) { grid-column: 1; grid-row: 2; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(4) { grid-column: 3; grid-row: 2; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(5) { grid-column: 1; grid-row: 3; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(6) { grid-column: 2; grid-row: 3; }
  body:not(.is-open-day).layout-relationship-7 .spread-diagram-box:nth-child(7) { grid-column: 3; grid-row: 3; }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body:not(.is-open-day).layout-relationship-7 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #d6cee4;
  }
  /* ===== 7枚コース・スプレッド設計図（HORSESHOE_7/RELATIONSHIP_7、
     スマホ夜版） ここまで ===== */

  /* ===== 13枚Premium・ホロスコープスプレッド説明パネル（2026-09-17追加） =====
     上のRELATIONSHIP_5/GENERAL_5/DECISION_5/HORSESHOE_7/RELATIONSHIP_7
     （5枚・7枚コース）のセレクタ・値は一切変更せず、完全に独立した
     新規ルールとして追加する（body.is-open-day.layout-horoscope-13
     という専用クラスの組み合わせでのみ有効。付与条件はjs/main.js
     showScreen()参照）。
     パネルの背景色rgba(24,18,55,0.72)・透け感・ゴールド枠
     rgba(217,173,85,0.62)・角丸・box-shadow・幅（calc(100% - 32px)、
     max-width:360px）・パディング・スプレッド名の文字サイズ/色・
     左右2カラム構成（配置図/役割一覧）・役割一覧の文字サイズ/色は、
     5/7枚版と全く同じ値をそのまま踏襲する（新しい色・サイズを作らない）。
     13ポジション分の役割一覧は5/7枚より縦に長くなるため、height指定は
     せず（=もともと無指定）自然に縦へ伸びるままにしている。パネル自体の
     幅・横方向のはみ出し対策（calc(100% - 32px)キャップ）は5/7枚と同じ
     ため、画面幅からはみ出すことはない。 */
  body.is-open-day.layout-horoscope-13 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body.is-open-day.layout-horoscope-13 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-strong);
    text-align: center;
  }

  body.is-open-day.layout-horoscope-13 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 13ハウス分の縮小配置図。①〜⑫が円を描き、⑬だけ中央に配置される
     ことが視覚的に分かるよう、HORSESHOE_7と同じ7列グリッド・同じ
     セルサイズ(18px角・gap4px)を6行ぶん使って円形に近い配置にする
     （新しいセルサイズは作らず、既存の7列コンパクトグリッドを
     縦に拡張しただけ）。パネル自体の幅・paddingは変更していないため、
     7列×18px+gap4pxの合計幅（約150px）は5/7枚版と同じで、画面幅からは
     み出さない。 */
  body.is-open-day.layout-horoscope-13 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 18px);
    grid-auto-rows: 18px;
    gap: 4px;
  }

  body.is-open-day.layout-horoscope-13 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--gold-strong);
    border-radius: 4px;
    color: var(--gold-strong);
    font-size: 0.56rem;
    font-weight: 700;
  }

  /* ホロスコープ・スプレッドの縮小配置図。ユーザー指定の概念図
     （①〜⑫が円を構成し、⑬だけ中央）を7列×6行のグリッドへ配置した
     もの。①→②→...→⑫の順で時計回りに円を一周し、⑬（総合テーマ）を
     グリッドの中心（列4・行4）に置く。カード開示画面の物理カード配置
     （#screen-open .flip-card-wrapper等）とは無関係の、番号だけの
     簡易図であり、実カードの並び順・座標には一切影響しない。
                    ⑩
              ⑪          ⑨
         ⑫                    ⑧
     ①             ⑬             ⑦
         ②                    ⑥
              ③    ④    ⑤ */
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(1)  { grid-column: 1; grid-row: 4; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(2)  { grid-column: 2; grid-row: 5; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(3)  { grid-column: 3; grid-row: 6; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(4)  { grid-column: 4; grid-row: 6; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(5)  { grid-column: 5; grid-row: 6; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(6)  { grid-column: 6; grid-row: 5; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(7)  { grid-column: 7; grid-row: 4; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(8)  { grid-column: 6; grid-row: 3; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(9)  { grid-column: 5; grid-row: 2; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(10) { grid-column: 4; grid-row: 1; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(11) { grid-column: 3; grid-row: 2; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(12) { grid-column: 2; grid-row: 3; }
  body.is-open-day.layout-horoscope-13 .spread-diagram-box:nth-child(13) { grid-column: 4; grid-row: 4; }

  body.is-open-day.layout-horoscope-13 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body.is-open-day.layout-horoscope-13 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #eee8f5;
  }
  /* ===== 13枚Premium・ホロスコープスプレッド説明パネル ここまで ===== */

  /* ===== 13枚Premium・ホロスコープスプレッド説明パネル（スマホ夜版、
     2026-09-18追加） =====
     スマホ昼版（body.is-open-day.layout-horoscope-13、上のブロック）で
     完成済みの.spread-diagramを正として、レイアウト値（display/margin/
     width/max-width/padding/border-radius/box-shadow/gap/
     grid-template-columns/grid-auto-rows/各nth-childのgrid-column・
     grid-row/font-size/font-weight/letter-spacing/line-height/
     text-align等）は1つも変更せず、セレクタの昼夜条件だけを
     入れ替えてそのまま複製する。①〜⑫の円形配置・⑬「総合テーマ」を
     中心に置く配置原理も完全に同一。HTML（#spread-diagram、
     index.html）・JS（js/main.jsのrenderSpreadDiagram()/
     renderSpreadDiagramContent()、SPREAD_DIAGRAM_LAYOUT_IDS）は
     PC/スマホ・昼夜共通で既に動作しているため、今回変更していない。

     配色のみ、スマホ夜版で正式採用済みの13枚説明オーバーレイ
     （body:not(.is-select-day).is-select-thirteen
     .spread-overlay-thirteen-*）と同じ既存パレットへ差し替える
     （新しい色は作らない）。
     - パネル背景/枠: rgba(24, 18, 55, 0.72) / rgba(217, 173, 85, 0.62)
       （box-shadowは元々ダークトーンの中立値のため変更不要）
     - スプレッド名（.spread-diagram-name）: #e3b85c（同オーバーレイの
       ローマ数字と同じ夜版ゴールド。昼版のvar(--gold-strong)から変更）
     - ミニ配置図の枠・番号（.spread-diagram-box）: 背景はrgba(255,
       255,255,0.08)のまま維持（中立な白半透明のため夜背景でも違和感
       なし）、枠色・文字色だけ#e3b85cへ
     - 役割一覧（.spread-diagram-list-item）: #d6cee4（同オーバーレイの
       一覧行と同じ色。昼版の#eee8f5から変更）

     実カード（.open-area/.flip-card-wrapper/.flip-card、カードサイズ
     118×180px、①〜⑬の実配置）・「鑑定結果を見る」ボタン・
     position-caption・背景画像・TAROTロゴ・「タロット占い」・
     「あなたが選んだ13枚です。」・「心を落ち着けて、1枚ずつカードを
     開いてください。」には一切触れていない。3枚/5枚/7枚のスマホ昼夜版
     spread-diagram・PC版・スマホ昼版には一切影響しない。 */
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram {
    display: block;
    margin: 0 auto 16px;
    width: calc(100% - 32px);
    max-width: 360px;
    padding: 14px 16px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(5, 2, 18, 0.3);
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-name {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #e3b85c;
    text-align: center;
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-body {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(7, 18px);
    grid-auto-rows: 18px;
    gap: 4px;
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #e3b85c;
    border-radius: 4px;
    color: #e3b85c;
    font-size: 0.56rem;
    font-weight: 700;
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(1)  { grid-column: 1; grid-row: 4; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(2)  { grid-column: 2; grid-row: 5; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(3)  { grid-column: 3; grid-row: 6; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(4)  { grid-column: 4; grid-row: 6; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(5)  { grid-column: 5; grid-row: 6; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(6)  { grid-column: 6; grid-row: 5; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(7)  { grid-column: 7; grid-row: 4; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(8)  { grid-column: 6; grid-row: 3; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(9)  { grid-column: 5; grid-row: 2; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(10) { grid-column: 4; grid-row: 1; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(11) { grid-column: 3; grid-row: 2; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(12) { grid-column: 2; grid-row: 3; }
  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-box:nth-child(13) { grid-column: 4; grid-row: 4; }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-list {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  body:not(.is-open-day).layout-horoscope-13 .spread-diagram-list-item {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
    color: #d6cee4;
  }
  /* ===== 13枚Premium・ホロスコープスプレッド説明パネル（スマホ夜版） ここまで ===== */

  /* スマホ夜版カード開示画面限定の背景。上のスマホ昼版と全く同じ仕組み
     （position:fixedで背景画像だけをビューポートに固定し、見出し・
     案内文・カード群は通常のページスクロールのまま）をbody:not(
     .is-open-day)で夜版だけに適用する。新しい独立スクロール構造は
     作らない。PC版（別@media）・スマホ昼版（body.is-open-day側、
     上のルール）・カードサイズ118×180px・タロット絵80×93px・2列配置・
     3/5/7枚ロジック・ネイビー×ゴールドの表面デザイン・裏面画像・
     position-caption・フリップ処理・発光演出・ボタン位置には一切
     触れない。 */
  body:not(.is-open-day) #screen-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/mobile/night-open-background-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* スマホ昼版・鑑定結果画面 正式デザイン移植（2026-09-15）。PC昼版で
   正式採用済みの配色（css/style.css 509〜973行目の
   @media(min-width:601px)ブロック内）を、新しい配色を一切作らずそのまま
   スマホへ移植する。PC昼版側のルールは1文字も変更せず、
   body.is-result-day＋@media(max-width:600px)専用の新規ルールとして
   追加する。renderDrawnSummary()・renderReading()・鑑定文生成ロジック・
   カード生成ロジックには一切触れていない（CSSのみ）。PC夜版・
   スマホ夜版・スマホ昼版カード選択/カード開示画面・5枚/7枚スプレッド
   説明パネルには影響しない。 */
@media (max-width: 600px) {
  /* 背景。スマホ昼版カード開示画面（body.is-open-day #screen-open::before、
     982〜993行目）と全く同じ手法・全く同じ画像
     （assets/input/mobile/day-open-background-mobile.png、加工なし）を
     採用し、開示画面→結果画面の視覚的な連続性を持たせる。 */
  body.is-result-day #screen-result::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/mobile/day-open-background-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 上のposition:fixed背景と、共通の.screen.active{animation:fade-in}
     （transform:translateY(6px)基準が遷移直後の0.4秒だけ#screen-result
     自身の箱にすり替わる現象）との相性対策。PC昼版側の同じ対策
     （body.is-result-day #screen-result.active、561行目）と全く同じ
     考え方をスマホにも適用する。背景画像・カード・本文パネル・文字・
     サイズ・位置・余白には触れない。 */
  body.is-result-day #screen-result.active {
    animation: none;
  }

  /* 背景（スマホ夜版、2026-09-18追加）。正式採用済みのスマホ夜版
     カード開示画面（body:not(.is-open-day) #screen-open::before、
     上のブロック）と全く同じ手法・全く同じ既存の軽量版画像
     （assets/input/mobile/night-open-background-mobile.png、852×1846px・
     約1.78MB、新規生成・加工なし）を採用し、開示画面→結果画面の
     視覚的な連続性を持たせる。position:fixed+inset:0のため、鑑定結果
     画面がどれだけ縦に長くなっても、背景はビューポート基準で固定表示
     され続け、background-size:coverにより常に画面全体を隙間なく覆う
     （途切れる・無地になる・繰り返される・縦に引き伸ばされることは
     ない。PC夜版鑑定結果画面で既に採用済みの同じ設計、665行目付近）。
     カード配置・カードサイズ・カード画像・カード名・正位置逆位置表示・
     役割名・鑑定本文・本文パネル・文字サイズ・文字色・文字間隔・
     カード間gap・TAROTロゴ・見出し文言・スクロール・スマホ昼版
     （body.is-result-day側、上のルール）・PC版には一切触れていない。 */
  body:not(.is-result-day) #screen-result::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/mobile/night-open-background-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 上のposition:fixed背景と、共通の.screen.active{animation:fade-in}
     との相性対策（スマホ夜版）。スマホ昼版側の同じ対策
     （body.is-result-day #screen-result.active、直上）・スマホ夜版
     カード開示画面側の同じ対策と全く同じ考え方。背景画像・カード・
     本文パネル・文字・サイズ・位置・余白には触れない。 */
  body:not(.is-result-day) #screen-result.active {
    animation: none;
  }

  /* TAROTロゴ画像化。スマホ昼版カード開示画面（body.is-open-day
     .app-header .brand-mark、1031〜1039行目）と全く同じ手法・
     全く同じ画像（assets/input/day-open-tarot-logo-mobile.png、
     新規生成なし）を採用する。従来のcolor:#B8863F上書きは、テキストが
     見た目上隠れるため不要になり削除した（カード開示画面側の同じ
     置換時と同じ扱い）。 */
  body.is-result-day .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* TAROTロゴ画像化（スマホ夜版、2026-09-18追加）。直前に正式採用した
     スマホ夜版カード選択画面（body:not(.is-select-day):has(#screen-
     select.active) .app-header .brand-mark）・スマホ夜版カード開示画面
     （body:not(.is-open-day):has(#screen-open.active) .app-header
     .brand-mark）と全く同じ手法・全く同じ画像
     （assets/input/day-open-tarot-logo-mobile.png、312×104px・約21.8KB、
     新規生成なし）・全く同じheight:30pxを採用する。この画面のスマホ
     昼版（直上のbody.is-result-day .app-header .brand-mark）で既に
     採用済みのheight:30pxとも同一の値のため、新しいサイズは作って
     いない。
     :has(#screen-result.active)で「今まさに鑑定結果画面がアクティブ」
     な場合に限定し、body:not(.is-result-day)（＝現在result画面＋昼版
     でない状態）とAND条件にすることで、鑑定結果画面以外
     （is-result-dayがfalseになる他のすべての画面）や、PC夜版
     （@media min-width:601px側の既存ルール、783行目）には一切影響
     しない。背景・「タロット占い」・「鑑定結果」・「あなたが選んだ
     13枚」・カード配置/サイズ/画像/名前/役割名/正逆位置/gap・鑑定
     本文・本文パネル・文字サイズ/色・画面全体の余白・スクロール処理・
     スマホ昼版には一切触れていない。 */
  body:not(.is-result-day):has(#screen-result.active) .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 結果カードの配色。PC昼版（720〜735行目）と全く同じ値をそのまま
     移植する。カードサイズ・画像サイズ・gap（現在のスマホ用base値：
     .mini-card width:88px／.card-image-slot-mini 44×58px／
     .drawn-summary gap:10px、1574〜1605行目）は変更しない。 */
  body.is-result-day .mini-card {
    background: linear-gradient(160deg, #fbf7ec 0%, #f4ecd8 100%);
    border-color: var(--gold-strong);
  }

  body.is-result-day .mini-card-name {
    color: #241a3b;
  }

  body.is-result-day .mini-card-orientation {
    color: #6a4a1f;
  }

  body.is-result-day .mini-card-position {
    display: none;
  }

  /* 鑑定本文パネルの配色。PC昼版（803〜813行目）と全く同じ値。
     font-size/line-height/padding/margin/max-widthは全画面共通base
     （1641〜1678行目）のまま変更しない。 */
  body.is-result-day .reading-text {
    background: linear-gradient(160deg, rgba(251, 247, 236, 0.88) 0%, rgba(244, 236, 216, 0.82) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
    color: #171126;
    font-weight: 500;
  }

  body.is-result-day .reading-heading {
    color: #9a6818;
    font-weight: 600;
  }

  /* TAROLUNE Premium誘導パネルの配色。PC昼版（823〜839行目）と
     全く同じ値。サイズ・paddingは全画面共通base（1717〜1752行目）の
     まま変更しない。 */
  body.is-result-day .premium-promo-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 236, 216, 0.85) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
  }

  body.is-result-day .premium-promo-heading {
    color: #7a7190;
  }

  body.is-result-day .premium-promo-brand,
  body.is-result-day .premium-promo-price {
    color: #9a6818;
  }

  body.is-result-day .premium-promo-desc {
    color: #171126;
  }

  /* 「もう一度占う」ボタンの配色。PC昼版（852〜861行目）と全く同じ値。
     位置・幅・padding等は.secondary-button共通base（299〜310行目、
     325〜329行目）のまま変更しない。 */
  body.is-result-day #screen-result #restart-button {
    color: #f0d28a;
    background: rgba(105, 78, 145, 0.72);
    border: 1px solid rgba(205, 164, 90, 0.85);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.12),
      0 3px 10px rgba(40, 20, 65, 0.20),
      0 0 12px rgba(227, 192, 122, 0.16);
  }

  /* 「もう一度占う」ボタンの配色（スマホ夜版、A案「ブルーラベンダー」、
     2026-09-18追加）。位置・幅・padding・border-radius・font-size・
     letter-spacing等は.secondary-button共通base（上の.primary-button,
     .secondary-buttonブロック）のまま変更しない。border-width
     （1px）・border-style（solid）も共通base由来のまま変更せず、
     border-colorだけを指定色へ差し替える（border-shorthandを使うと
     width/styleごと上書きしてしまうため、あえてborder-colorのみを
     指定する）。新しい装飾（box-shadow・グラデーション等）は追加
     しない。鑑定本文・Premium案内エリア・「TAROLUNE Premiumを見る」
     ボタン・背景画像には一切触れていない。 */
  body:not(.is-result-day) #screen-result #restart-button {
    color: #f4f0fa;
    background: rgba(91, 82, 135, 0.82);
    border-color: rgba(190, 181, 225, 0.85);
  }

  /* 注意書き（.disclaimer）の文字色のみ調整（2026-09-15）。背景画像
     （day-open-background-mobile.png）のゴールドの光・模様に文字が
     負けて読みにくかったため、白ラベンダー系の明るい色へ変更する。
     枠・背景・半透明パネル・box-shadow・text-shadowは追加せず、
     padding/margin/font-size/font-weight/line-height/width/位置には
     一切触れない（.disclaimer base、1783〜1788行目のcolor以外は
     そのまま継承）。 */
  body.is-result-day #screen-result .disclaimer {
    color: #eee8f6;
  }
}

.open-area {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0;
}

/* 「鑑定結果を見る」ボタン。以前は専用CSSが無く、.hidden解除時に
   .primary-button共通ルール（display:block/width:100%/max-width:320px/
   margin:20px auto 0/padding:14px 28px）のまま通常document flowへ
   割り込み、.open-areaの後に約70〜80pxの高さを追加していた（これが
   全カード開示後の縦スクロール発生の原因）。position:absoluteにして
   #screen-open基準に固定することで、.open-area・7枚カードの位置を
   一切押し下げなくする。
   topの676pxは、h2・.guide-text・.open-area（見出し～カード2段分、
   このファイルの既存値とmarginの相殺を踏まえて算出）の合計高さの
   概算値。実機のフォント描画により多少の誤差はあり得るため、確認後の
   微調整を想定した初期値。width/max-width/padding等の見た目
   （.primary-button共通ルール）は変更しない。marginのみ、centering
   方式をmargin:autoからleft:50%+transform（#select-fortune-button等、
   他の絶対配置ボタンと同じ手法）へ揃えるため0にする。 */
#show-result-button {
  position: absolute;
  top: 676px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.flip-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.position-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 10px;
  min-height: 2.4em;
}

.flip-card {
  width: 150px;
  height: 226px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 1000px;
}

.flip-card:disabled {
  cursor: not-allowed;
}

.flip-card.is-next {
  animation: pulse-glow 1.8s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--gold-strong)); }
  50% { filter: drop-shadow(0 0 12px var(--gold-strong)); }
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

.flip-card-back {
  background:
    radial-gradient(circle at 50% 42%, rgba(227, 192, 122, 0.14), transparent 55%),
    linear-gradient(150deg, var(--card-back-2) 0%, var(--card-back-1) 55%, var(--card-back-3) 100%);
  border: 1px solid rgba(227, 192, 122, 0.55);
  box-shadow: inset 0 0 0 1px rgba(227, 192, 122, 0.12), inset 0 0 16px rgba(0, 0, 0, 0.4);
}

.flip-card-back::before {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(227, 192, 122, 0.45);
  border-radius: 4px;
}

.flip-card-back::after {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(227, 192, 122, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -22px 0 -2px rgba(227, 192, 122, 0.5),
    0 22px 0 -2px rgba(227, 192, 122, 0.5),
    -22px 0 0 -2px rgba(227, 192, 122, 0.5),
    22px 0 0 -2px rgba(227, 192, 122, 0.5),
    0 0 8px 1px rgba(227, 192, 122, 0.5);
}

.flip-card-front {
  background: linear-gradient(160deg, #fbf7ec 0%, #f4ecd8 100%);
  color: #241a3b;
  border: 1px solid var(--gold-strong);
  transform: rotateY(180deg);
}

/* ---------- カード画像用の領域（v0.35時点では枠のみ。将来 card.image を追加すると表示される） ---------- */
.card-image-slot {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.card-image-slot.is-placeholder {
  background: rgba(205, 164, 90, 0.08);
  border: 1px dashed rgba(205, 164, 90, 0.4);
}

.card-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-image-slot.is-reversed img {
  transform: rotate(180deg);
}

.card-image-slot-large {
  width: 100px;
  height: 124px;
}

.card-image-slot-mini {
  width: 44px;
  height: 58px;
  margin-bottom: 4px;
}

.card-name {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.card-orientation {
  font-size: 0.85rem;
  color: #6a4a1f;
}

/* ---------- 鑑定結果画面 ---------- */
.result-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 10px;
}

.drawn-summary {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.mini-card {
  width: 88px;
  background: var(--panel);
  border: 1px solid rgba(227, 192, 122, 0.3);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mini-card-position {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.mini-card-name {
  font-size: 0.72rem;
  font-weight: bold;
  margin-bottom: 2px;
}

.mini-card-orientation {
  font-size: 0.68rem;
  color: var(--gold);
}

.loading-text {
  color: var(--text-muted);
  text-align: center;
}

.reading-text {
  background: var(--panel);
  border: 1px solid rgba(124, 105, 173, 0.35);
  border-radius: 14px;
  padding: 20px 18px;
  margin: 12px 0;
}

.reading-heading {
  margin: 24px 0 8px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold-strong);
}

.reading-heading:first-child {
  margin-top: 0;
}

.reading-paragraph {
  margin: 0 0 8px;
  white-space: pre-wrap;
}

.reading-answer {
  background: linear-gradient(160deg, rgba(227, 192, 122, 0.14), rgba(124, 92, 180, 0.1));
  border: 1px solid rgba(227, 192, 122, 0.5);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1.02rem;
}

.reading-synthesis {
  background: rgba(124, 92, 180, 0.1);
  border-left: 3px solid var(--gold-strong);
  border-radius: 4px;
  padding: 10px 14px;
}

.reading-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
}

.reading-list li {
  margin-bottom: 6px;
}

.reading-closing {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-style: italic;
  color: var(--accent-light);
  text-align: center;
}

/* 鑑定結果画面: TAROLUNE Premium誘導パネル（2026-09-12追加）。
   「あなたへのアドバイス」（.reading-text内、鑑定本文の一部）と
   既存の注意書き（.disclaimer）の間に独立して配置する案内パネル。
   鑑定本文構造（cardReadings/synthesis/advice、js/fortune.js・
   js/main.jsのrenderReading()）・#reading-text自体・注意書き・
   「もう一度占う」ボタンには一切触れていない。
   配色は既存のCSS変数（--panel/--gold/--gold-strong/--text/
   --text-muted）をそのまま流用し、.reading-answer（advice用の
   ゴールド×紫の強調ボックス、既存）と同じグラデーション配合を
   踏襲することで、新しい世界観を作らずに「鑑定本文とは別の特別な
   案内」という程度の差をつけている。基本スタイルは全幅・全画面共通
   （PC夜版・スマホ昼夜版はこの値のまま。PC昼版だけ下記の
   @media(min-width:601px)側でアイボリー系に上書きする。これは
   既存の.reading-text/.reading-heading昼版上書きと全く同じ
   スコープ設計）。将来の会員判定でパネル全体を非表示にする場合は、
   #premium-promo-panelに.hiddenクラスを付けるだけでよい
   （PAY.JP・Firebase・ログイン・会員判定は今回実装していない）。
   幅は親要素（#screen-result、max-width:720px前提の既存レイアウト）
   に自然に追従するため、スマホ幅でも横方向にはみ出さない。 */
.premium-promo-panel {
  margin: 16px 0;
  padding: 18px 16px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(160deg, rgba(227, 192, 122, 0.14), rgba(124, 92, 180, 0.1));
  border: 1px solid rgba(227, 192, 122, 0.5);
}

.premium-promo-heading {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.premium-promo-brand {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-strong);
}

.premium-promo-desc {
  margin: 0 0 4px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
}

.premium-promo-price {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-strong);
}

/* ボタンは.primary-button（占う/占いを始める等、メイン導線用）とは
   意図的に別クラスにする（Premiumはまだ仮導線のため、メイン導線と
   混同しないよう区別する）。見た目のゴールドグラデーションは既存の
   var(--gold)/var(--gold-strong)をそのまま使用。2026-09-12追記:
   クリックするとPremium詳細画面（#screen-premium）へ遷移する
   （js/main.jsのonShowPremiumDetail()）。PAY.JP決済・Premium申込
   処理へは直接進ませておらず、詳細画面側の申込みボタンも同様に
   まだ仮ボタンのまま。 */
.premium-promo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #241a06;
  background: linear-gradient(135deg, var(--gold), var(--gold-strong));
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(205, 164, 90, 0.25);
  cursor: pointer;
}

.premium-promo-button:hover,
.premium-promo-button:focus-visible {
  filter: brightness(1.05);
}

.disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

/* ---------- カードを開く画面（PC限定）: 7枚を横一列に ----------
   スマホ版（下のmax-width:600pxブロック、.flip-card/.flip-card-wrapper
   width:118px等）は一切変更しない。#screen-openを限定セレクタにして
   スコープする。
   #appのmax-width:720px自体は変更せず、.open-areaだけを
   position:relative + left:50% + transform:translateX(-50%)で
   #appの外側（ビューポート中央）へ視覚的にはみ出させる。width:100vwは
   使わない（幅はwidth:max-contentで7枚+gap分の実寸に自動追従させる
   ため、スクロールバー幅との競合が原理的に発生しない）。
   ただし、この方法は#appの720px制限を超えて画面幅いっぱいに
   広がる仕組みではなく、7枚+gapぶんの実寸（本設定ではおよそ950px）を
   ビューポート中央に配置するだけのため、ブラウザ幅が950px前後より
   狭い場合は画面端に近づく／わずかに収まりきらない可能性がある
   （一般的なPC幅であれば問題なく収まる）。 */
@media (min-width: 601px) {
  #screen-open .open-area {
    position: relative;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    flex-wrap: nowrap;
    gap: 20px;
  }

  /* カードを大きく・整然と見せるためのサイズ（実機確認後の調整）。
     縦横比（226/150=1.5067）はほぼ維持（211/140=1.5071）。 */
  #screen-open .flip-card-wrapper {
    width: 150px;
  }

  #screen-open .flip-card {
    width: 150px;
    height: 226px;
  }

  /* 役割名（.position-caption）をカードの上から下へ移動する。
     HTML側の生成順序（caption→flip-cardの順でwrapperへappend、
     js/main.jsは変更しない）はそのままに、flexboxのorderだけで
     見た目の順序を入れ替える。 */
  #screen-open .flip-card {
    order: 1;
  }

  #screen-open .position-caption {
    order: 2;
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* カード裏面（PC限定）: 従来のCSSグラデーションを実画像へ差し替える。
     border/box-shadow（既存の金色枠・内側の影）はそのまま維持する
     （画像の見た目だけの差し替え）。background-imageのみ上書きする
     ため、グラデーション由来のbackground-position/size/repeatの
     初期値もこのルールで明示し直し、実画像の見た目が意図通り
     （cover・中央・繰り返しなし）になるようにする。
     ::before/::afterは旧グラデーション背景の上に重ねていたCSS描画の
     ひし形・中心点の装飾で、実画像（それ自体に星・装飾が描かれている）
     と重複して不自然になるため非表示にする（PC限定、スマホ版の
     グラデーション意匠は変更しない）。 */
  #screen-open .flip-card-back {
    background-image: url("../assets/cards/card-back-open-night.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #screen-open .flip-card-back::before,
  #screen-open .flip-card-back::after {
    display: none;
  }

  /* PC昼版カード開示画面限定のカード裏面差し替え。上のPC共通ルールを
     新しいネイビー×アンティークゴールドの裏面画像（PC夜版向け）に
     差し替えたことに伴い、PC昼版だけは従来の紫×ゴールドの裏面画像
     （assets/cards/card-back-open.png、変更・上書きしていない既存
     ファイル）を明示的に指定し直す。background-size/position/repeatは
     PC共通ルールからそのまま継承されるため再指定しない。js/main.js側の
     is-open-day判定ロジック・スマホ版の裏面ルール（別セレクタ・別
     @media）には一切触れない。 */
  body.is-open-day #screen-open .flip-card-back {
    background-image: url("../assets/cards/card-back-open.png");
  }

  /* PC夜版カード開示画面限定: .position-caption（役割名ラベル）の
     視認性補強。共通ルールのcolor:var(--text-muted)（#9891b5）は暗い
     背景の大部分には十分なコントラストがあるが、open-background.png
     （正式採用済み、変更しない）には中央の魔法陣・光の筋など局所的に
     明るい部分があり、その位置に重なったカードのラベルだけ読みにくく
     なりうる。text-shadowに加え、colorも従来よりわずかに明るい
     #c7bfd8へ調整して視認性をさらに補強する。font-size・font-weight・
     line-height・カードサイズ・配置・裏面画像は変更しない。
     body:not(.is-open-day)によりPC夜版だけに限定し、PC昼版・
     スマホ昼版・スマホ夜版（別@media）には一切影響しない。 */
  body:not(.is-open-day) #screen-open .position-caption {
    color: #c7bfd8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  /* PC夜版カード開示画面限定: 表向きカード（.flip-card-front）の試作
     デザイン。正式採用済みのカード裏面（card-back-open-night.png）と
     同じデッキに見えるよう、背景を従来のアイボリーから、既存の
     --card-back-1〜3（.flip-card-backのグラデーションと同じ変数）を
     使ったネイビー〜紫系グラデーションへ変更する。外周は既存の
     var(--gold-strong)より落ち着いたvar(--gold)（アンティークゴールド）
     を使い、暗い背景でも視認できるよう2pxへ太くする。width/height/
     padding/margin/object-fit/RWS画像/3・5・7枚配置/フリップ処理/
     発光演出/position-caption/ボタン/背景画像/裏面画像/PC昼版の
     アイボリー表面/スマホ版には一切触れない。上部の星の装飾帯は試作
     したが元に戻したため、現状は円形紋章・星の装飾のいずれも含めない
     （四隅の唐草装飾は次のステップ）。
     body:not(.is-open-day)によりPC夜版だけに限定する。 */
  body:not(.is-open-day) #screen-open .flip-card-front {
    background: linear-gradient(160deg, var(--card-back-2) 0%, var(--card-back-1) 55%, var(--card-back-3) 100%);
    border: 2px solid var(--gold);
  }

  /* PC夜版限定: タロット絵まわりに細いゴールド枠を追加する。
     border-box（グローバル共通設定）のため、.card-image-slot-large
     で指定済みの100×124pxという外形サイズ自体は変わらない。 */
  body:not(.is-open-day) #screen-open .card-image-slot {
    border: 1px solid var(--gold);
  }

  /* PC夜版限定: カード名・正逆位置をゴールド系の文字色へ変更する。
     font-size/font-weight/margin等は変更しない。 */
  body:not(.is-open-day) #screen-open .card-name {
    color: var(--gold-strong);
  }

  body:not(.is-open-day) #screen-open .card-orientation {
    color: var(--gold);
  }

  /* 「鑑定結果を見る」ボタン（PC限定のtop上書き）。以前は7枚が2段
     配置だった頃の高さを前提にtop:676px（共通ルール、上部で定義）が
     設定されていたが、7枚横一列化・カード縮小により実際のカード群は
     はるかに上（画面中央付近）で終わるようになったため、ボタンだけが
     画面下部に取り残され、ページ高さが伸びて縦スクロールの原因に
     なっていた。
     #screen-openは既にposition:relativeのため、position:absoluteの
     ボタン自体はそのまま維持し、topの値だけをこのPC限定ブロックで
     上書きする（position/left/transform/marginは共通ルールを流用）。
     445pxは、見出し・案内文・.open-area（position:relative;top:35px
     による見た目のズレ分も含む）・カード（226px）・役割名（最大2行を
     見込んだ概算）の合計に、役割名の下からおよそ35〜45px程度の余白を
     足した概算値。実機のフォント描画により多少の誤差はあり得るため、
     確認後の微調整を想定した初期値。
     この上書きは@media(min-width:601px)内・IDセレクタ2つ
     （#screen-open #show-result-button）で共通ルールより詳細度が高い
     ため、スマホ版は引き続き共通ルールのtop:676pxのまま一切変化しない。 */
  #screen-open #show-result-button {
    top: 445px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: RELATIONSHIP_5専用の物理スプレッド
   配置（layoutId: 'relationship-5'）。
   上のPC共通ブロック（#screen-open .open-area、position:relative+
   left:50%+transform:translateX(-50%)+width:max-contentによる横一列
   の中央寄せ、および#screen-open #show-result-button{top:445px}）は
   1文字も変更していない。body.is-open-day.layout-relationship-5
   （js/main.jsのshowScreen()がstate.selectedLayoutId==='relationship-5'
   かつname==='open'のときだけbodyへtoggleする新規クラス）が付いている
   場合だけ、詳細度の高いこのセレクタで上書きする。3枚コース・
   GENERAL_5/DECISION_5/HORSESHOE_7/RELATIONSHIP_7（まだ専用layoutId
   クラスが付かない＝今回は現状の横一列のまま）・PC夜版
   （body.is-open-dayが付かない）・スマホ版（@media max-width:600px側
   の既存ルール）には一切影響しない。

   配置は、js/spreadRegistry.js側RELATIONSHIP_5の①〜⑤の順序どおり
   （2026-09-11報告のとおり: ①you/あなた ②partner/相手
   ③your-emotional-future/あなた側の今後
   ④their-emotional-future/相手側に現れる今後
   ⑤potential/二人の関係の可能性）。
   DOM生成順序＝position順序はjs/main.jsのgoToOpenScreen()のまま一切
   変更していない（state.selectedOrder→state.selectedSpread.positions[i]
   の対応関係は無変更）ため、常に1〜5枚目の順でappendされる
   .flip-card-wrapperをnth-childで安全に対応付けられる。

   配置図:
     ①(you)                    ②(partner)
          ③(your-future)  ⑤(potential)  ④(their-future)
   あなた側（①③）と相手側（②④）を左右対称の列に配置し、単独項目の
   ⑤「二人の関係の可能性」だけを下段中央に置く。カードサイズ
   （150×226px、上のPC共通#screen-open .flip-card-wrapper/.flip-card
   ルール）はここでは一切変更しない。 */
@media (min-width: 601px) {
  body.is-open-day.layout-relationship-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body.is-open-day.layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.is-open-day.layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  body.is-open-day.layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  body.is-open-day.layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  body.is-open-day.layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  /* 「鑑定結果を見る」ボタン。PC共通の#screen-open #show-result-button
     {top:445px}（1段レイアウト前提の値、上のブロック内・無変更）に、
     RELATIONSHIP_5の2段目ぶん（カード226px＋キャプション余白約41px＋
     行間gap24px＝約291px）を加算した約736pxを初期値とする（実機の
     フォント描画により誤差はあり得るため、確認後の微調整を想定した
     初期値。既存の445px/676pxの各コメントと同じ考え方）。3枚・他の
     4layoutId・PC夜版・スマホ版のボタン位置には一切影響しない
     （body.is-open-day.layout-relationship-5という専用クラスの組み
     合わせでのみ有効な、詳細度の高い上書きのため）。 */
  body.is-open-day.layout-relationship-5 #screen-open #show-result-button {
    top: 736px;
  }

  /* カード開示画面PC夜版限定（2026-09-12追加）: RELATIONSHIP_5専用の
     物理スプレッド配置。上のPC昼版ブロックと全く同じ配置図・全く同じ
     grid-column/grid-row/gap/カードサイズ（150×226pxは上のPC共通
     #screen-open .flip-card-wrapper/.flip-cardルールをそのまま流用、
     ここでは変更しない）・全く同じ結果ボタンtop値をそのまま適用する。
     新しいレイアウトは作らず、layout-relationship-5クラス自体は
     js/main.jsのshowScreen()が昼夜を問わずname==='open'かつ
     selectedLayoutId==='relationship-5'のときだけ付与する既存の仕組みを
     そのまま利用する（JS変更なし）。夜版条件はbody:not(.is-open-day)。
     PC昼版ブロック・3枚コース・他の4layoutId・スマホ版には一切影響
     しない。配色・背景（open-background.png）・TAROTロゴ・カード裏面・
     カード表面配色は変更していない。 */
  body:not(.is-open-day).layout-relationship-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-relationship-5 #screen-open #show-result-button {
    top: 736px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: GENERAL_5専用の物理スプレッド配置
   （layoutId: 'general-5'）。
   上のPC共通ブロック（#screen-open .open-area、
   #screen-open #show-result-button{top:445px}）・RELATIONSHIP_5専用
   ブロック（body.is-open-day.layout-relationship-5 ...）は1文字も
   変更していない。body.is-open-day.layout-general-5
   （js/main.jsのshowScreen()がstate.selectedLayoutId==='general-5'
   かつname==='open'のときだけbodyへtoggleする新規クラス）が付いて
   いる場合だけ、詳細度の高いこのセレクタで上書きする。3枚コース・
   RELATIONSHIP_5・DECISION_5/HORSESHOE_7/RELATIONSHIP_7（まだ専用
   layoutIdクラスが付かない＝現状の横一列のまま）・PC夜版
   （body.is-open-dayが付かない）・スマホ版（@media max-width:600px側
   の既存ルール）には一切影響しない。

   配置は、js/spreadRegistry.js側GENERAL_5の①〜⑤の順序どおり
   （2026-09-12確認: ①heart/現在の中心テーマ ②past/過去からの影響
   ③future/これからの流れ ④challenge/課題 ⑤key-card/鍵・突破口）。
   DOM生成順序＝position順序はjs/main.jsのgoToOpenScreen()のまま一切
   変更していない（state.selectedOrder→state.selectedSpread.positions[i]
   の対応関係は無変更）ため、常に1〜5枚目の順でappendされる
   .flip-card-wrapperをnth-childで安全に対応付けられる。

   配置図（十字型・ミニクロス）:
             ②(past)
     ④(challenge)  ①(heart)  ⑤(key-card)
             ③(future)
   ①を中央、②を上、③を下、④を左、⑤を右に配置する。カードサイズ
   （150×226px、上のPC共通#screen-open .flip-card-wrapper/.flip-card
   ルール）はここでは一切変更しない。TAROLUNEの方針として「一覧性より
   カードの迫力・スプレッド体験を優先する」ため、3段構成による縦
   スクロールの発生を前提とし、カード縮小・gap圧縮による一画面収納は
   行わない。 */
@media (min-width: 601px) {
  body.is-open-day.layout-general-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body.is-open-day.layout-general-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
  }

  body.is-open-day.layout-general-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  body.is-open-day.layout-general-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }

  body.is-open-day.layout-general-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }

  body.is-open-day.layout-general-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }

  /* 「鑑定結果を見る」ボタン。PC共通の#screen-open #show-result-button
     {top:445px}（1段レイアウト前提の値、上のブロック内・無変更）に、
     GENERAL_5の3段構成のうち追加で必要な2段ぶん（1段あたりカード226px
     ＋キャプション余白約41px＋行間gap24px＝約291px、これを2段ぶん＝
     約582px）を加算した約1027pxを、切りのよい1030pxとして初期値に
     する（実機のフォント描画により誤差はあり得るため、確認後の微調整
     を想定した初期値。既存の445px/676px/736pxの各コメントと同じ
     考え方）。3枚・RELATIONSHIP_5・他の3layoutId・PC夜版・スマホ版の
     ボタン位置には一切影響しない（body.is-open-day.layout-general-5
     という専用クラスの組み合わせでのみ有効な、詳細度の高い上書きの
     ため）。 */
  body.is-open-day.layout-general-5 #screen-open #show-result-button {
    top: 1030px;
  }

  /* カード開示画面PC夜版限定（2026-09-12追加）: GENERAL_5専用の物理
     スプレッド配置。上のPC昼版ブロックと全く同じ十字型配置・全く同じ
     grid-column/grid-row/gap/カードサイズ（150×226pxは上のPC共通
     ルールをそのまま流用）・全く同じ結果ボタンtop値をそのまま適用
     する。layout-general-5クラス自体はjs/main.jsの既存の仕組みを
     そのまま利用する（JS変更なし）。夜版条件はbody:not(.is-open-day)。
     PC昼版ブロック・3枚コース・他の4layoutId・スマホ版には一切影響
     しない。配色・背景・TAROTロゴ・カード裏面・カード表面配色は
     変更していない。 */
  body:not(.is-open-day).layout-general-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body:not(.is-open-day).layout-general-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-general-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-general-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-general-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-general-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-general-5 #screen-open #show-result-button {
    top: 1030px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: DECISION_5専用の物理スプレッド配置
   （layoutId: 'decision-5'）。
   上のPC共通ブロック（#screen-open .open-area、
   #screen-open #show-result-button{top:445px}）・RELATIONSHIP_5専用
   ブロック（body.is-open-day.layout-relationship-5 ...）・GENERAL_5
   専用ブロック（body.is-open-day.layout-general-5 ...）は1文字も
   変更していない。body.is-open-day.layout-decision-5
   （js/main.jsのshowScreen()がstate.selectedLayoutId==='decision-5'
   かつname==='open'のときだけbodyへtoggleする新規クラス）が付いて
   いる場合だけ、詳細度の高いこのセレクタで上書きする。3枚コース・
   GENERAL_5・RELATIONSHIP_5・HORSESHOE_7/RELATIONSHIP_7（まだ専用
   layoutIdクラスが付かない＝現状の横一列のまま）・PC夜版
   （body.is-open-dayが付かない）・スマホ版（@media max-width:600px側
   の既存ルール）には一切影響しない。

   配置は、js/spreadRegistry.js側DECISION_5の①〜⑤の順序どおり
   （2026-09-12確認: ①current-situation/現在地
   ②option-a/選択肢A ③option-b/選択肢B
   ④hidden-factor/まだ見えていないこと ⑤guidance/判断への指針）。
   DOM生成順序＝position順序はjs/main.jsのgoToOpenScreen()のまま一切
   変更していない（state.selectedOrder→state.selectedSpread.positions[i]
   の対応関係は無変更）ため、常に1〜5枚目の順でappendされる
   .flip-card-wrapperをnth-childで安全に対応付けられる。

   配置図（分岐と収束）:
                ①(current-situation)
        ②(option-a)     ③(option-b)
                ④(hidden-factor)
                ⑤(guidance)
   ①現在地から②選択肢A／③選択肢Bへ分岐し、④まだ見えていないことで
   両方に関わる見落とし要因を確認し、⑤判断への指針へ至る流れ。
   カードサイズ（150×226px、上のPC共通#screen-open
   .flip-card-wrapper/.flip-cardルール）はここでは一切変更しない。
   4段構成のため縦方向に長くなるが、TAROLUNE共通方針（一覧性より
   カードの迫力・スプレッド体験を優先、CLAUDE.md記載）により、
   カード縮小・gap圧縮による一画面収納は行わず、縦スクロールを許容
   する。横gap20px・縦gap24pxはGENERAL_5/RELATIONSHIP_5と同じ値を
   使い、世界観を統一している。 */
@media (min-width: 601px) {
  body.is-open-day.layout-decision-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body.is-open-day.layout-decision-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }

  body.is-open-day.layout-decision-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  body.is-open-day.layout-decision-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
  }

  body.is-open-day.layout-decision-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

  body.is-open-day.layout-decision-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 2;
    grid-row: 4;
  }

  /* 「鑑定結果を見る」ボタン。PC共通の#screen-open #show-result-button
     {top:445px}（1段レイアウト前提の値、上のブロック内・無変更）に、
     DECISION_5の4段構成のうち追加で必要な3段ぶん（1段あたりカード
     226px＋キャプション余白約41px＋行間gap24px＝約291px、これを3段
     ぶん＝約873px）を加算した約1318pxを、切りのよい1320pxとして
     初期値にする（実機のフォント描画により誤差はあり得るため、確認後
     の微調整を想定した初期値。既存の445px/676px/736px/1030pxの各
     コメントと同じ考え方）。3枚・GENERAL_5・RELATIONSHIP_5・他の
     2layoutId・PC夜版・スマホ版のボタン位置には一切影響しない
     （body.is-open-day.layout-decision-5という専用クラスの組み合わせ
     でのみ有効な、詳細度の高い上書きのため）。 */
  body.is-open-day.layout-decision-5 #screen-open #show-result-button {
    top: 1320px;
  }

  /* カード開示画面PC夜版限定（2026-09-12追加）: DECISION_5専用の物理
     スプレッド配置。上のPC昼版ブロックと全く同じ分岐・収束配置・
     全く同じgrid-column/grid-row/gap/カードサイズ（150×226pxは上の
     PC共通ルールをそのまま流用）・全く同じ結果ボタンtop値をそのまま
     適用する。layout-decision-5クラス自体はjs/main.jsの既存の仕組みを
     そのまま利用する（JS変更なし）。夜版条件はbody:not(.is-open-day)。
     PC昼版ブロック・3枚コース・他の4layoutId・スマホ版には一切影響
     しない。配色・背景・TAROTロゴ・カード裏面・カード表面配色は
     変更していない。 */
  body:not(.is-open-day).layout-decision-5 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 2;
    grid-row: 4;
  }

  body:not(.is-open-day).layout-decision-5 #screen-open #show-result-button {
    top: 1320px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: HORSESHOE_7専用の物理スプレッド配置
   （layoutId: 'horseshoe-7'）。
   上のPC共通ブロック（#screen-open .open-area、
   #screen-open #show-result-button{top:445px}）・RELATIONSHIP_5/
   GENERAL_5/DECISION_5の各専用ブロックは1文字も変更していない。
   body.is-open-day.layout-horseshoe-7（js/main.jsのshowScreen()が
   state.selectedLayoutId==='horseshoe-7'かつname==='open'のときだけ
   bodyへtoggleする新規クラス）が付いている場合だけ、詳細度の高い
   このセレクタで上書きする。3枚コース・GENERAL_5・RELATIONSHIP_5・
   DECISION_5・RELATIONSHIP_7（まだ専用layoutIdクラスが付かない＝
   現状の横一列のまま）・PC夜版（body.is-open-dayが付かない）・
   スマホ版（@media max-width:600px側の既存ルール）には一切影響
   しない。

   配置は、js/spreadRegistry.js側HORSESHOE_7の①〜⑦の順序どおり
   （2026-09-12確認: ①recent-past/直近の過去 ②present/現在
   ③hidden-influences/隠れた影響 ④obstacles/障害
   ⑤external-influences/外部からの影響
   ⑥recommended-action/推奨される行動
   ⑦likely-outcome/今の流れで起こりうる結果）。
   DOM生成順序＝position順序はjs/main.jsのgoToOpenScreen()のまま一切
   変更していない（state.selectedOrder→state.selectedSpread.positions[i]
   の対応関係は無変更）ため、常に1〜7枚目の順でappendされる
   .flip-card-wrapperをnth-childで安全に対応付けられる。

   配置図（2026-09-12調整: 4段→3段。左下から浅い弧を描いて右下へ
   降りる馬蹄形。4段だと縦に長すぎて全体形状を一度に把握しづらかった
   ため、①⑦を最下段・②⑥を中段・③④⑤を最上段の3段にまとめた）:
        ③(hidden)   ④(obstacles)   ⑤(external)
    ②(present)                       ⑥(action)
①(recent-past)                             ⑦(outcome)
   7列グリッド（列1〜7、各150px）を維持し、①を列1・行3（最下段）、
   ②を列2・行2（中段）、③を列3・行1（最上段）、④を列4・行1（最上段・
   中央）、⑤を列5・行1（最上段）、⑥を列6・行2（中段）、⑦を列7・行3
   （最下段）に配置する。カードサイズ（150×226px、上のPC共通
   #screen-open .flip-card-wrapper/.flip-cardルール）はここでは一切
   変更しない。3段構成のため依然として縦スクロールが発生しうるが、
   TAROLUNE共通方針（一覧性よりカードの迫力・スプレッド体験を優先、
   CLAUDE.md記載）により、カード縮小・gap圧縮・横一列への変形は行わ
   ない。横gap20px・縦gap24pxは他のlayoutIdと同じ値を使い、世界観を
   統一している。 */
@media (min-width: 601px) {
  body.is-open-day.layout-horseshoe-7 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(7, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 3;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 5;
    grid-row: 1;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(6) {
    grid-column: 6;
    grid-row: 2;
  }

  body.is-open-day.layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(7) {
    grid-column: 7;
    grid-row: 3;
  }

  /* 「鑑定結果を見る」ボタン（2026-09-12調整: 4段→3段化に伴い再計算）。
     PC共通の#screen-open #show-result-button{top:445px}（1段レイアウト
     前提の値、上のブロック内・無変更）に、HORSESHOE_7の3段構成
     （③④⑤行／②⑥行／①⑦行）のうち追加で必要な2段ぶん（1段あたり
     カード226px＋キャプション余白約41px＋行間gap24px＝約291px、これを
     2段ぶん＝約582px）を加算した約1027pxを、切りのよい1030pxとして
     初期値にする（GENERAL_5も同じく3段構成のため、同じ計算根拠で
     top:1030pxとしている。実機のフォント描画により誤差はあり得るため、
     確認後の微調整を想定した初期値）。3枚・GENERAL_5・RELATIONSHIP_5・
     DECISION_5・RELATIONSHIP_7・PC夜版・スマホ版のボタン位置には一切
     影響しない（body.is-open-day.layout-horseshoe-7という専用クラスの
     組み合わせでのみ有効な、詳細度の高い上書きのため）。 */
  body.is-open-day.layout-horseshoe-7 #screen-open #show-result-button {
    top: 980px;
  }

  /* カード開示画面PC夜版限定（2026-09-12追加）: HORSESHOE_7専用の
     物理スプレッド配置。上のPC昼版ブロックと全く同じ3段馬蹄形配置・
     全く同じgrid-column/grid-row/gap/カードサイズ（150×226pxは上の
     PC共通ルールをそのまま流用）・全く同じ結果ボタンtop値をそのまま
     適用する。layout-horseshoe-7クラス自体はjs/main.jsの既存の仕組み
     をそのまま利用する（JS変更なし）。夜版条件はbody:not(.is-open-day)。
     自動追従スクロール（scrollNextSpreadCardIntoView()/
     scrollResultButtonIntoView()、js/main.js）は、この配置とは別に
     日夜判定ガードを外すことでPC夜版にも適用済み（下記JS変更箇所を
     参照）。PC昼版ブロック・3枚コース・他の4layoutId・スマホ版には
     一切影響しない。配色・背景・TAROTロゴ・カード裏面・カード表面
     配色は変更していない。 */
  body:not(.is-open-day).layout-horseshoe-7 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(7, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 5;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(6) {
    grid-column: 6;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open .flip-card-wrapper:nth-child(7) {
    grid-column: 7;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-horseshoe-7 #screen-open #show-result-button {
    top: 980px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: RELATIONSHIP_7専用の物理スプレッド
   配置（layoutId: 'relationship-7'）。
   上のPC共通ブロック（#screen-open .open-area、
   #screen-open #show-result-button{top:445px}）・RELATIONSHIP_5/
   GENERAL_5/DECISION_5/HORSESHOE_7の各専用ブロック（HORSESHOE_7の
   自動追従スクロールを含む）は1文字も変更していない。
   body.is-open-day.layout-relationship-7（js/main.jsのshowScreen()が
   state.selectedLayoutId==='relationship-7'かつname==='open'のときだけ
   bodyへtoggleする新規クラス）が付いている場合だけ、詳細度の高い
   このセレクタで上書きする。3枚コース・GENERAL_5・RELATIONSHIP_5・
   DECISION_5・HORSESHOE_7・PC夜版（body.is-open-dayが付かない）・
   スマホ版（@media max-width:600px側の既存ルール）には一切影響
   しない。

   配置は、js/spreadRegistry.js側RELATIONSHIP_7の①〜⑦の順序どおり
   （2026-09-12確認: ①you/あなた ②them/相手
   ③your-feelings/あなた側に現れている感情
   ④their-feelings/相手側に現れている感情
   ⑤relationship-past/関係のこれまで
   ⑥relationship-present/関係の現在
   ⑦relationship-future/関係のこれから）。
   DOM生成順序＝position順序はjs/main.jsのgoToOpenScreen()のまま一切
   変更していない（state.selectedOrder→state.selectedSpread.positions[i]
   の対応関係は無変更）ため、常に1〜7枚目の順でappendされる
   .flip-card-wrapperをnth-childで安全に対応付けられる。

   配置図（左右対称の自分/相手ペア×2段＋関係の時系列を1行に並べた
   3段構成。ユーザー確認済みの代替案: ⑤⑥⑦「関係のこれまで/今/これから」
   は一連の時系列のため、1行にまとめて左から右へ読める構成にした）:
   ①(you)                                  ②(them)
        ③(your-feelings)     ④(their-feelings)
   ⑤(relationship-past)  ⑥(relationship-present)  ⑦(relationship-future)
   3列グリッド（列1〜3、各150px、RELATIONSHIP_5/GENERAL_5/DECISION_5と
   同じ列幅・gap）を使い、1・2段目は列1・列3（列2は空）、3段目は
   列1〜3すべてを使う。カードサイズ（150×226px、上のPC共通
   #screen-open .flip-card-wrapper/.flip-cardルール）はここでは一切
   変更しない。3段構成のため縦スクロールが発生しうるが、TAROLUNE
   共通方針（一覧性よりカードの迫力・スプレッド体験を優先、CLAUDE.md
   記載）により、カード縮小・gap圧縮による一画面収納は行わない。
   横gap20px・縦gap24pxは他のlayoutIdと同じ値を使い、世界観を統一
   している。今回はRELATIONSHIP_7への自動スクロール処理は追加せず、
   HORSESHOE_7専用のscrollHorseshoeCardIntoView()にも一切触れていない。 */
@media (min-width: 601px) {
  body.is-open-day.layout-relationship-7 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
  }

  body.is-open-day.layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
  }

  /* 「鑑定結果を見る」ボタン。PC共通の#screen-open #show-result-button
     {top:445px}（1段レイアウト前提の値、上のブロック内・無変更）に、
     RELATIONSHIP_7の3段構成のうち追加で必要な2段ぶん（1段あたり
     カード226px＋キャプション余白約41px＋行間gap24px＝約291px、これを
     2段ぶん＝約582px）を加算した約1027pxを、切りのよい1030pxとして
     初期値にする（GENERAL_5/HORSESHOE_7も同じく3段構成のため、同じ
     計算根拠でtop:1030pxとしている。実機のフォント描画により誤差は
     あり得るため、確認後の微調整を想定した初期値）。3枚・GENERAL_5・
     RELATIONSHIP_5・DECISION_5・HORSESHOE_7・PC夜版・スマホ版の
     ボタン位置には一切影響しない（body.is-open-day.layout-relationship-7
     という専用クラスの組み合わせでのみ有効な、詳細度の高い上書きの
     ため）。 */
  body.is-open-day.layout-relationship-7 #screen-open #show-result-button {
    top: 1030px;
  }

  /* カード開示画面PC夜版限定（2026-09-12追加）: RELATIONSHIP_7専用の
     物理スプレッド配置。上のPC昼版ブロックと全く同じ左右対称・3段
     配置・全く同じgrid-column/grid-row/gap/カードサイズ（150×226pxは
     上のPC共通ルールをそのまま流用）・全く同じ結果ボタンtop値を
     そのまま適用する。layout-relationship-7クラス自体はjs/main.jsの
     既存の仕組みをそのまま利用する（JS変更なし）。夜版条件は
     body:not(.is-open-day)。PC昼版ブロック・3枚コース・他の4layoutId・
     スマホ版には一切影響しない。配色・背景・TAROTロゴ・カード裏面・
     カード表面配色は変更していない。 */
  body:not(.is-open-day).layout-relationship-7 #screen-open .open-area {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 24px 20px;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open .flip-card-wrapper:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
  }

  body:not(.is-open-day).layout-relationship-7 #screen-open #show-result-button {
    top: 1030px;
  }
}

/* =========================================================
   カード開示画面（PC昼版限定）: HOROSCOPE_13専用の円環スプレッド配置
   （layoutId: 'horoscope-13'、2026-09-18新規）。

   上のPC共通ブロック（#screen-open .open-area、position:relative+
   top:35px+left:50%+transform:translateX(-50%)+width:max-content+
   flex-wrap:nowrap+gap:20px、および#screen-open #show-result-button
   {top:445px}）は1文字も変更していない。body.is-open-day.
   layout-horoscope-13（js/main.jsのshowScreen()がstate.
   selectedLayoutId==='horoscope-13'かつname==='open'のときだけbodyへ
   toggleする既存クラス、442行目。今回JSは変更していない）が付いている
   場合だけ、詳細度の高いこのセレクタで上書きする。3枚コース・
   RELATIONSHIP_5/GENERAL_5/DECISION_5/HORSESHOE_7/RELATIONSHIP_7・
   PC夜版（body.is-open-dayが付かない）・スマホ版（@media
   max-width:600px側の既存ルール）には一切影響しない。

   配置は、js/spreadRegistry.js側HOROSCOPE_13の①〜⑬の順序どおり
   （①現在の状況〜⑫あなたへのアドバイス＋⑬総合テーマ、
   displayLabelは変更していない）。DOM生成順序＝position順序は
   goToOpenScreen()のまま一切変更していないため、常に1〜13枚目の順で
   appendされる.flip-card-wrapperをnth-childで安全に対応付けられる。

   円環座標（2026-09-18再修正）: 当初120×181pxへカードを縮小して1画面
   完結を狙ったが、表向きカード内部（画像・カード名・正逆位置表示）は
   150×226px前提でレイアウトされているため、外側の.flip-card-wrapper/
   .flip-cardだけを縮小すると内部表示が崩れることが実機で確認された。
   このため縮小方針を撤回し、カードサイズは①〜⑬すべて既存の正式サイズ
   150×226px（PC共通の#screen-open .flip-card-wrapper/.flip-cardの
   値をそのまま使用、このレイアウト専用の上書きは行わない）に戻した。
   「13枚を1画面に収める」という条件も撤回し、縦スクロールを許容する
   （横スクロールは発生させない）方針に変更した。

   ①〜⑫は、楕円（横半径485px・縦半径550px、150×226pxのカードで隣接
   カード同士が重ならないよう、単純な30°等分角度ではなく弧長基準で
   12等分した座標）の円周上に配置し、⑬「総合テーマ」を楕円の中心に
   配置する。横半径を485pxに抑えつつ縦半径を550pxまで伸ばすことで、
   .open-areaの横幅を1140px（1440px画面に対し左右各150pxの余白）に
   収め、横スクロールを発生させない設計にした。縦方向は.open-areaの
   高さ1390pxをそのまま確保し、ページの自然な縦スクロールで全体を
   確認できるようにしている（#screen-openや他画面へoverflow:hidden等を
   追加してスクロールを隠すような手段は使っていない）。
   中央⑬のサイズ拡大・追加のゴールド装飾は今回も行っていない（ユーザー
   指示により保留、実機確認後に判断）。表向きカード内部CSS
   （.flip-card-face/.flip-card-inner等）・役割ラベル（.position-caption）
   のfont-size等は一切変更していない。 */
@media (min-width: 601px) {
  body.is-open-day.layout-horoscope-13 #screen-open .open-area {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1140px;
    height: 1390px;
    display: block;
    flex-wrap: wrap;
  }

  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper {
    position: absolute;
    margin: 0;
  }

  /* ①現在の状況 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(1) {
    left: 495px;
    top: 10px;
  }

  /* ②あなたの本心 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(2) {
    left: 749px;
    top: 92px;
  }

  /* ③背景にあるもの */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(3) {
    left: 921px;
    top: 298px;
  }

  /* ④見えている課題 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(4) {
    left: 980px;
    top: 560px;
  }

  /* ⑤見えていない課題 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(5) {
    left: 921px;
    top: 822px;
  }

  /* ⑥あなたの強み */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(6) {
    left: 749px;
    top: 1028px;
  }

  /* ⑦周囲からの影響 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(7) {
    left: 495px;
    top: 1110px;
  }

  /* ⑧今必要なこと */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(8) {
    left: 241px;
    top: 1028px;
  }

  /* ⑨手放した方がよいもの */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(9) {
    left: 69px;
    top: 822px;
  }

  /* ⑩これからの変化 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(10) {
    left: 10px;
    top: 560px;
  }

  /* ⑪可能性 */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(11) {
    left: 69px;
    top: 298px;
  }

  /* ⑫あなたへのアドバイス */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(12) {
    left: 241px;
    top: 92px;
  }

  /* ⑬総合テーマ（楕円の中心） */
  body.is-open-day.layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(13) {
    left: 495px;
    top: 560px;
  }

  /* 「鑑定結果を見る」ボタン。PC共通の#screen-open #show-result-button
     {top:445px}（1段レイアウト前提の値、上のブロック内・無変更）に、
     このレイアウト特有の縦構成（ヘッダー〜.open-area(高さ1390px)〜
     ボタンの合計、実機のフォント描画により誤差はあり得るため確認後の
     微調整を想定した初期値、既存の445px/736px等の各コメントと同じ
     考え方）を踏まえた約1598pxを初期値とする。円環の最下端（⑦、
     カード下端+役割ラベル分）より十分下になるよう余裕を持たせた。
     3枚・他の5layoutId・PC夜版・スマホ版のボタン位置には一切影響
     しない。 */
  body.is-open-day.layout-horoscope-13 #screen-open #show-result-button {
    top: 1598px;
  }
}

/* =========================================================
   カード開示画面（PC夜版）: HOROSCOPE_13専用の円環スプレッド配置
   （layoutId: 'horoscope-13'、2026-09-18新規）。

   PC昼版（body.is-open-day.layout-horoscope-13、上のブロック）で
   正式採用済みの「配置原理」（position/top/left/transform/width/
   height/display/flex-wrap/margin、①〜⑬各nth-childのleft/top座標）を
   セレクタのis-open-day有無だけを入れ替えて、1px単位まで完全に同じ
   値でそのまま複製する。値を計算し直したり、夜版専用の新しい座標を
   作ったりはしていない。
   上のPC昼版ブロックの#screen-open .open-area/.flip-card-wrapper/
   #show-result-buttonの各値、PC共通ブロック（#screen-open .open-area、
   position:relative+top:35px+left:50%+transform:translateX(-50%)+
   width:max-content+flex-wrap:nowrap+gap:20px、および#screen-open
   #show-result-button{top:445px}）は1文字も変更していない。

   このPC昼版ブロックはそもそも色・背景・border・box-shadow・filter等の
   装飾プロパティを一切含んでいない（position/top/left/transform/
   width/height/display/flex-wrap/marginのみの純粋な配置指定）ため、
   夜版へそのまま複製しても昼版固有の配色・装飾が紛れ込む心配はない。
   カード本体（.flip-card-wrapper/.flip-card）のwidth/heightは
   このレイアウト専用の上書きを持たず（PC共通の150×226pxをそのまま
   使用）、カードサイズ・カード画像・カード裏面・カード表面・開閉
   アニメーション・クリック処理には一切触れていない。
   背景画像・TAROTロゴ・「タロット占い」・見出し文言・カード配色・
   カード装飾・夜版のbox-shadow/border/filterには一切触れていない
   （このブロックにそもそもそれらのプロパティが存在しないため）。

   body.is-open-day.layout-horoscope-13（PC昼版）・3枚コース・
   RELATIONSHIP_5/GENERAL_5/DECISION_5/HORSESHOE_7/RELATIONSHIP_7・
   スマホ版（@media max-width:600px側の既存ルール）には一切影響
   しない。 */
@media (min-width: 601px) {
  body:not(.is-open-day).layout-horoscope-13 #screen-open .open-area {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1140px;
    height: 1390px;
    display: block;
    flex-wrap: wrap;
  }

  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper {
    position: absolute;
    margin: 0;
  }

  /* ①現在の状況 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(1) {
    left: 495px;
    top: 10px;
  }

  /* ②あなたの本心 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(2) {
    left: 749px;
    top: 92px;
  }

  /* ③背景にあるもの */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(3) {
    left: 921px;
    top: 298px;
  }

  /* ④見えている課題 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(4) {
    left: 980px;
    top: 560px;
  }

  /* ⑤見えていない課題 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(5) {
    left: 921px;
    top: 822px;
  }

  /* ⑥あなたの強み */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(6) {
    left: 749px;
    top: 1028px;
  }

  /* ⑦周囲からの影響 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(7) {
    left: 495px;
    top: 1110px;
  }

  /* ⑧今必要なこと */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(8) {
    left: 241px;
    top: 1028px;
  }

  /* ⑨手放した方がよいもの */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(9) {
    left: 69px;
    top: 822px;
  }

  /* ⑩これからの変化 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(10) {
    left: 10px;
    top: 560px;
  }

  /* ⑪可能性 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(11) {
    left: 69px;
    top: 298px;
  }

  /* ⑫あなたへのアドバイス */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(12) {
    left: 241px;
    top: 92px;
  }

  /* ⑬総合テーマ（楕円の中心） */
  body:not(.is-open-day).layout-horoscope-13 #screen-open .flip-card-wrapper:nth-child(13) {
    left: 495px;
    top: 560px;
  }

  /* 「鑑定結果を見る」ボタン。PC昼版と同じ考え方・同じ値。 */
  body:not(.is-open-day).layout-horoscope-13 #screen-open #show-result-button {
    top: 1598px;
  }
}

/* ---------- レスポンシブ（スマートフォン幅） ---------- */
@media (max-width: 600px) {
  #app {
    padding: 28px 10px 48px;
  }

  .screen-tagline {
    font-size: 1.1rem;
  }

  .card {
    width: 40px;
    margin-left: -8px;
  }

  .card:nth-child(odd) {
    margin-top: 1px;
  }

  .card:nth-child(even) {
    margin-top: 5px;
  }

  .card-grid {
    padding: 8px;
    gap: 0;
  }

  .flip-card,
  .flip-card-wrapper {
    width: 118px;
  }

  .flip-card {
    height: 180px;
  }

  .card-image-slot-large {
    width: 80px;
    height: 93px;
  }

  .open-area {
    gap: 14px;
  }

  .primary-button,
  .secondary-button {
    max-width: none;
  }

  /* スマホ版カード開示画面: ラベル（.position-caption）の折り返し行数が
     2行/3行でカードごとに異なり、min-height:2.4em（最低保証のみで上限
     なし）のままだと後続のflip-cardの開始位置がカードごとにずれ、
     同じ行の左右カード上端が揃わなかった対策。heightに変えて3行分の
     固定枠にすることで、ラベルの行数差に関わらずカード本体の開始位置を
     揃える。共通の.position-caption（min-height:2.4em）・PC版
     （orderでラベルが下に来るため元々この問題が起きない）・カード並び
     （2列表示）・カードサイズ・ラベル文言には一切触れない。 */
  .position-caption {
    height: 3.6em;
  }

  /* スマホ版カード開示画面: 「次にめくるカード」を示すpulse-glow
     （filter:drop-shadowアニメーション、共通ルール）が、3Dフリップ構造
     （perspective→transform-style:preserve-3d→backface-visibility:hidden）
     との組み合わせでiOS Safari上では薄く描画され、PC版ほど光って見えない
     問題への補強。box-shadowは3D変形の影響を受けにくいため、既存の
     pulse-glow/filterアニメーションはそのまま維持しつつ補助的に追加する。
     PC版のpulse-glow・カード裏面画像・カードサイズ・並び・背景・
     フリップ処理には一切触れない。控えめな値から開始。 */
  #screen-open .flip-card.is-next {
    box-shadow:
      0 0 10px rgba(255, 220, 150, 0.75),
      0 0 18px rgba(255, 190, 90, 0.45);
  }

  /* スマホ版カード開示画面: object-fit:coverによる上下クロップの基準点を
     試験的に中央（既定値）から上寄りへ変更する。画像枠80×93px・
     object-fit:cover自体・PC版・カード全体118×180px・カード名・
     正逆位置・カード配置・発光演出・裏面画像・背景・3/5/7枚ロジックには
     一切触れない。 */
  .card-image-slot img {
    object-position: center 20%;
  }

  /* スマホ版カード開示画面: 「鑑定結果を見る」ボタンが共通ルール
     （position:absolute; top:676px、「カード2段ぶん」を前提に算出された
     固定値）のままだと、スマホの2列配置で3/5/7枚により段数が変わっても
     追従できず、7枚時にカード途中（5・6枚目と7枚目の間）へ割り込んで
     見えていた。スマホ限定でabsolute配置を解除し、通常のドキュメント
     フローに戻すことで、.open-areaの実際の高さ（段数）に関わらず、
     常にその直後へ自動的に配置されるようにする。PC版のtop:445px・
     カードサイズ・表面画像80×93px・object-position・2列配置・
     position-caption・発光演出・裏面画像・背景・3/5/7枚ロジックには
     一切触れない。 */
  #show-result-button {
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  /* スマホ昼版カード開示画面: .position-caption の文字色が共通ルールの
     var(--text-muted)（夜版の暗い背景を前提とした薄い青紫グレー）の
     ままだと、紫〜すみれ色の昼版背景画像（day-open-background-mobile.png）
     と色相・明るさが近く同化して見えづらいため、背景の金色装飾と同系統の
     var(--gold-strong)へ変更し、font-weightも太くして視認性を補強する。
     height:3.6em・font-size・line-height・text-shadowは変更しない。
     PC版・スマホ夜版（body.is-open-dayが付かない場合）には一切影響
     しない。 */
  body.is-open-day .position-caption {
    color: var(--gold-strong);
    font-weight: 600;
  }

  /* スマホ夜版カード開示画面限定: PC夜版で正式採用済みの表向きカード
     デザイン（ネイビー〜紫のグラデーション＋アンティークゴールド枠＋
     ゴールド文字）を移植する。PC夜版と同じCSS変数（--card-back-1〜3・
     --gold・--gold-strong）を使い、値もPC夜版と同じ考え方だが、外周枠
     の太さだけはカードが118×180pxと小さいためPCの2pxではなく1pxにする
     （太さのみの調整、色・グラデーションの内容自体はPC夜版と同一）。
     width/height/padding/object-position/2列配置/3・5・7枚ロジック/
     position-caption/背景画像/裏面画像/フリップ処理/発光演出/ボタン/
     PC夜版/PC昼版/スマホ昼版には一切触れない。
     body:not(.is-open-day)によりスマホ夜版だけに限定する。 */
  body:not(.is-open-day) #screen-open .flip-card-front {
    background: linear-gradient(160deg, var(--card-back-2) 0%, var(--card-back-1) 55%, var(--card-back-3) 100%);
    border: 1px solid var(--gold);
  }

  body:not(.is-open-day) #screen-open .card-image-slot {
    border: 1px solid var(--gold);
  }

  body:not(.is-open-day) #screen-open .card-name {
    color: var(--gold-strong);
  }

  body:not(.is-open-day) #screen-open .card-orientation {
    color: var(--gold);
  }

  /* スマホ夜版カード開示画面限定のカード裏面画像。PC夜版の
     card-back-open-night.png（1024×1536、約2.70MB）をそのままスマホで
     使うと、以前スマホ昼版で発生した「過大なビットマップが3D構造
     （backface-visibility:hidden）の中でiOSのGPUメモリを圧迫し、
     カード裏面が表示直後に消える」不具合の再発リスクがあるため、
     絵柄・色味・構図を一切変更せず360×540px・JPEG品質85まで軽量化した
     専用ファイル（約64.5KB）を使う。スマホ昼版のCSSパターン
     （body.is-open-day側、上のルール）と全く同じ考え方。PC夜版の
     card-back-open-night.png・そのCSS・スマホ昼版のday-card-back-
     open.jpg・カードサイズ118×180px・2列配置・フリップ処理・発光演出・
     3/5/7枚ロジックには一切触れない。 */
  body:not(.is-open-day) #screen-open .flip-card-back {
    background-image: url("../assets/cards/mobile/night-card-back-open.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media (max-width: 360px) {
  .card {
    width: 34px;
    margin-left: -6px;
  }
}

/* =========================================================
   夜版相談入力画面 背景表示テスト（PC限定・#screen-inputのみ）
   正式採用画像 night-consultation-bg.png（1682x935）を表示するだけの
   工程。UI要素の配置調整・昼夜自動切替・day-consultation.pngの使用・
   HTML/JS変更はまだ行わない。他セクションから独立させているので、
   このブロックごと削除・調整すれば元に戻せる。

   #screen-inputは#appのmax-width:720px（コンテンツ幅約688px）に収まる
   形で表示されるため、そのままだと画像も688px幅相当まで縮小されてしまう。
   #app自体は変更せず、#screen-inputだけをwidth+position:relative+left:50%+
   transform:translateX(-50%)で#appの外側まで広げ（既存の夜版テーマカード
   拡幅と同じ手法）、画面の大部分を使って表示する。
   widthは「画像の実寸(1682px)」「画面幅の94%」「画面高さの94%から逆算した
   幅」の最小値とし、aspect-ratioで高さを追従させることで、縦横比を保った
   まま画面内にできるだけ大きく収める。 */
@media (min-width: 601px) {
  /* ▼▼▼ 比較テスト中（正式版ではない）：元の値は下にコメントで保持。
     「元に戻して」と言われたら、この#screen-inputブロックを
     コメントアウトされた値にそのまま戻すこと。
  元の値:
  #screen-input {
    width: min(100vw, calc(100vh * 1.79893));
    aspect-ratio: 1682 / 935;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/input/night-consultation-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  */
  #screen-input {
    width: 100vw;
    height: 100vh;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/input/night-consultation-bg.png");
    background-repeat: no-repeat;
    background-position: center 44%;
    background-size: cover;
  }
  /* ▲▲▲ 比較テストここまで */

  /* STEP1: #appの共通padding(40px 16px 60px)の上下ぶんが、#screen-inputの
     高さに上乗せされて縦スクロールの原因になっていたため、
     相談入力画面表示中（PC限定）だけ上下左右paddingを0にする。共通#app
     ルール自体は変更しない。#screen-inputの高さは常に100vh以下になる計算
     のため、上下0にすればページ全体がちょうど100vh以内に収まる
     （box-sizing:border-boxのため、paddingが0であればこの計算に誤差は
     生じない）。左右0は横方向の余白を減らすための調整。

     左右の余白について：画像比率(1682/935=1.79893)は横長だが、一般的な
     ブラウザの実効表示領域（アドレスバー等で高さが削られる分、比率は
     2:1〜2.2:1程度になることが多い）はさらに横長になりやすい。そのため
     width:min(100vw, 100vh*1.79893)は高さ側の項が先に上限に達するのが
     通常で、その場合は横幅が100vwに届かず左右に余白が残る。これは
     「縦スクロールなし」かつ「画像を切り取らない(cover不使用)」を両立
     させる限り、幾何学的に避けられない（ユーザー確認済み・受容済み）。
     100%まで引き上げることで、この制約下での余白を数学的に最小化した。 */
  body.is-input-active #app {
    padding: 0;
  }

  /* 共通の.screen.active { animation: fade-in ... }のkeyframeがtransform:
     translateY(...)を使っており、#screen-input自身のtransform:
     translateX(-50%)（中央寄せ用）と競合していた。アニメーション中は
     transformがkeyframe側の値に一時的に置き換わり、中央寄せが外れて
     右側にずれた位置で描画され、アニメーション終了時に中央へスナップする
     ことで「右から中央へ流れる」ように見えていた。.screen-top.active
     { animation: none; }と同じ対処法で、PC版の#screen-inputだけ
     アニメーションを無効化し、最初から最終位置（中央寄せ済み）で
     表示されるようにする。新しいtransition/animationは追加していない。 */
  #screen-input.active {
    animation: none;
  }
}

/* =========================================================
   レスポンシブ分岐 STEP1: ウルトラワイドPC（比率2:1以上）だけ、
   全画面cover方式から比較テスト前のcontain方式へフォールバックする。
   16:9系（通常のPC画面比率）の全画面cover表示（width:100vw;
   height:100vh; background-size:cover; background-position:center 44%;）
   は変更しない。このmedia queryは比率2:1以上の場合にだけ一致し、
   上記の#screen-inputルールより後に書かれているため、一致時は
   width/height/background-size/background-positionがここで上書きされる。
   height:auto を明示することで、base側のheight:100vhが残って
   aspect-ratioと競合しないようにしている（100vhとaspect-ratioが
   両方指定されると、高さが100vhに固定されaspect-ratioが効かなくなる
   ため、必ずheight:autoで打ち消す必要がある）。
   16:10補正・5:4対応・textarea/buttonのwidth変更は次のSTEPで行う。 */
@media (min-width: 601px) and (min-aspect-ratio: 2/1) {
  #screen-input {
    width: min(100vw, calc(100vh * 1.79893));
    height: auto;
    aspect-ratio: 1682 / 935;
    background-size: contain;
    background-position: center;
  }

  /* PC昼版限定: 上のルールによる幅縮小（100vw未満）を打ち消し、左右に
     bodyの濃紺背景が帯として露出するのを防ぐ。昼版背景（cover指定、
     別ルール）に合わせて全幅・全高に戻すだけで、background-image/
     background-size/background-positionはここでは変更しない。夜版用の
     上のルールは変更しない。 */
  body.is-input-day #screen-input {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
  }

  /* PC夜版限定（2026-09-12追加）: 上の#screen-inputベースルール
     （STEP1、width:min(100vw, 100vh*1.79893)・background-size:contain）
     がウルトラワイド画面（比率2:1以上）で幅を100vw未満に縮小してしまい、
     bodyの濃紺背景が左右に帯として露出していた不具合の修正。
     day版の直上ルールと全く同じ考え方で、夜版だけ幅・高さ・
     aspect-ratioを通常時（1798〜1800行目付近の夜版ベース背景ルール、
     min-aspect-ratio条件の対象外にある通常のPC表示）と同じ
     width:100vw/height:100vh/background-size:cover/
     background-position:center 44%へ戻す。night-consultation-bg.png
     自体・入力欄・ボタン等の中央コンテンツの配置には一切触れていない
     （#screen-input本体の外枠サイズをビューポート全面に戻すのみ）。 */
  body.is-input-active:not(.is-input-day) #screen-input {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background-size: cover;
    background-position: center 44%;
  }
}

/* =========================================================
   相談入力画面（PC限定）左右余白の視覚的な馴染ませ。
   #screen-input本体（width/aspect-ratio/left/transform/background-*）は
   1pxも変更しない。左右に残る余白（#screen-inputの外側）だけを、
   同じnight-consultation-bg.pngをぼかし・減光した別レイヤーとして
   body.is-input-active::beforeに敷き、環境光の延長のように見せる。
   position:fixed + z-index:-1で#screen-input本体より必ず背面に描画され、
   pointer-events:noneでクリック等の操作にも一切影響しない。 */
@media (min-width: 601px) {
  /* ▼ 比較テスト中につき一時無効化（削除ではない）。「元に戻して」と
     言われたらこのコメントを外して再度有効化すること。
  body.is-input-active::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/night-consultation-bg.png");
    background-size: cover;
    background-position: center 44%;
    background-repeat: no-repeat;
    filter: blur(40px) brightness(0.6);
    transform: scale(1.1);
  }
  */
}

/* =========================================================
   STEP2: 相談入力欄（#consultation-input）の配置・見た目（PC限定）。
   #screen-inputを基準にabsolute配置し、完成イメージの入力欄サイズ感へ
   縮小する。共通のtextareaルール（padding/color/font-size等）は変更せず、
   #screen-input #consultation-inputというID二重指定でこのインスタンス
   だけ上書きする。入力機能・maxlength=300は一切変更しない。
   textarea以外（screen-tagline/start-button/input-error等）には
   触れない。 */
@media (min-width: 601px) {
  #screen-input #consultation-input {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 17%;
    background: rgba(20, 14, 40, 0.5);
    border: 1px solid rgba(227, 192, 122, 0.55);
    border-radius: 12px;
    resize: none;
  }

  /* placeholderの文字色だけ控えめに（白〜淡いアイボリーの低opacity）。
     #consultation-inputの位置/幅/高さ/背景/枠には触れない。 */
  #screen-input #consultation-input::placeholder {
    color: rgba(242, 238, 230, 0.5);
    opacity: 1;
  }
}

/* =========================================================
   STEP3: 「占いを始める」ボタン（#start-button）の配置（PC限定）。
   #screen-inputを基準にabsolute配置し、相談入力欄のすぐ下・中央の
   黄金の光より少し上へ移動する。共通の.primary-buttonルール（背景の
   金色グラデーション・文字色・box-shadow・border-radius:999px等）は
   変更せず、#screen-input #start-buttonというID二重指定でレイアウト
   （position/width/margin）だけを上書きする。クリック処理・見た目の
   基本デザインは変更しない。#consultation-input等には触れない。 */
@media (min-width: 601px) {
  #screen-input #start-button {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translateX(-50%);
    width: 24%;
    height: auto;
    margin: 0;
  }
}

/* =========================================================
   レスポンシブ分岐 STEP2: 16:10系（比率7/5〜17/10、例：1440×900,
   1920×1200）だけ、textarea/start-buttonのwidthを軽微に補正する。
   背景（cover方式・background-position含む）、top/left/height/
   transform、その他のUIは一切変更しない。
   上記の基本ルール（width:42%/24%）より後に書かれており、この比率
   範囲内でだけ一致するため、範囲内でのみwidthが上書きされる。
   範囲は17/10(=1.7)までのため、STEP1の2:1以上（ウルトラワイド）
   フォールバックとは重ならない。16:9系（1.7超〜2.0未満）はどちらの
   条件にも一致しないため、従来通り42%/24%のまま。 */
@media (min-width: 601px) and (min-aspect-ratio: 7/5) and (max-aspect-ratio: 17/10) {
  #screen-input #consultation-input {
    width: 47%;
  }

  #screen-input #start-button {
    width: 27%;
  }
}

/* =========================================================
   レスポンシブ分岐 STEP3: 縦長寄りPC（比率7/5未満、例：1280×1024=5:4）
   だけ、全画面cover方式から比較テスト前のcontain方式へフォールバック
   する。coverのままだと左右のクロップが大きくなり、右側装飾や7枚
   カードが欠ける恐れがあるため、この比率帯だけ画像全体を切らない
   containへ切り替える。STEP1（2:1以上）と同じ値・同じ考え方。
   height:100vh（base）が残るとaspect-ratioと競合するため、STEP1同様
   height:autoを明示して打ち消す。
   境界はmax-aspect-ratio:7/5（=1.4）で、STEP2のmin-aspect-ratio:7/5と
   ちょうど1.4の1点だけ範囲が接する。#screen-input本体を上書きするのは
   このSTEP3ルールのみ（STEP2はtextarea/start-buttonのwidthしか
   触れないため）で、STEP2側の効果とは競合しない。
   STEP1（min-aspect-ratio:2/1）とは範囲が重ならない（1.4以下 vs 2.0以上）。 */
@media (min-width: 601px) and (max-aspect-ratio: 7/5) {
  #screen-input {
    width: min(100vw, calc(100vh * 1.79893));
    height: auto;
    aspect-ratio: 1682 / 935;
    background-size: contain;
    background-position: center;
  }

  /* PC昼版限定: 上のルールによる幅縮小（100vw未満）を打ち消し、左右に
     bodyの濃紺背景が帯として露出するのを防ぐ。昼版背景（cover指定、
     別ルール）に合わせて全幅・全高に戻すだけで、background-image/
     background-size/background-positionはここでは変更しない。夜版用の
     上のルールは変更しない。 */
  body.is-input-day #screen-input {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
  }

  /* PC夜版限定（2026-09-12追加）: STEP1（min-aspect-ratio:2/1）と全く
     同じ理由・全く同じ修正。縦長寄りPC（比率7/5未満）で夜版だけ幅が
     100vw未満に縮小し、左右に帯が出ていたのを、通常時と同じ
     width:100vw/height:100vh/background-size:cover/
     background-position:center 44%へ戻して防ぐ。night-consultation-
     bg.png自体・入力欄・ボタン等の中央コンテンツの配置には触れていない。 */
  body.is-input-active:not(.is-input-day) #screen-input {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    background-size: cover;
    background-position: center 44%;
  }
}

/* =========================================================
   相談入力画面（PC限定）表示中は、共通ヘッダー（.app-header＝「TAROT」
   「参加型タロット占い」）を隠し、night-consultation-bg.png（および
   将来のday版背景）を画面上端付近から表示できるようにする。
   .app-headerは他画面（select/open/result）でも共有される要素のため、
   常時display:noneにはせず、body.is-input-active（#screen-input表示中
   だけJS側で付与、main.jsのshowScreen参照）に限定して非表示にする。
   トップ画面のis-top-active/is-top-nightとは別物で、スマホ版には
   このメディアクエリ自体が適用されないため影響しない。 */
@media (min-width: 601px) {
  body.is-input-active .app-header {
    display: none;
  }
}

/* =========================================================
   相談入力画面（PC限定）テーマ別案内文（.screen-tagline）の位置調整。
   #screen-inputはposition:relativeのため、これを基準にabsolute配置し、
   背景画像（night-consultation-bg.png）の横方向中央・上端から約20%の
   位置（月・中央の黄金光より上、textareaを後から置ける余白を残す範囲）
   へ配置する。位置（top/left）は変更しない。文字色・2行構成（<br>）・
   THEME_MESSAGESの構成は変更せず、背景パネルやbackdrop-filterも付けない。
   textarea/start-button/input-errorには触れない。 */
@media (min-width: 601px) {
  #screen-input .screen-tagline {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    line-height: 1.6;
  }

  /* THEME_MESSAGES側で1行目・2行目をspanで分離し、2行目（主役の一文）を
     1行目より大きくする。5テーマとも同じspan構造。 */
  #screen-input .input-theme-line1 {
    font-size: 1.45rem;
  }

  #screen-input .input-theme-line2 {
    font-size: 1.8rem;
  }
}

/* =========================================================
   STEP4: 中央上部の文字エリア（PC限定）。
   .input-tarot-mark（小さな中央見出し）と.input-guidance（補助文）は
   相談入力画面専用の新規クラス。.screen-taglineの上下に、TAROT見出し→
   テーマ別案内文（既存）→補助文→textarea(top:43%)の順で並ぶよう配置する。
   THEME_MESSAGES・#consultation-input・#start-buttonには触れない。 */
@media (min-width: 601px) {
  #screen-input .input-tarot-mark {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    white-space: nowrap;
    color: var(--gold-strong);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  /* 相談入力画面PC夜版限定のTAROT表示（2026-09-12追加）。中央の
     「✦ TAROT ✦」（.input-tarot-mark、上のPC共通base rule）は
     ✦・TAROTとも同じ1つのテキストノードのため、疑似要素の個別非表示は
     不要で、この1つのルールだけで✦記号ごと画面外へ追い出せる。
     PC夜版カード開示画面／PC夜版鑑定結果画面の.brand-markで正式採用
     済みの画像置換方式（height:30px・background-size:contain・
     background-position:center・background-repeat:no-repeat・
     assets/input/day-open-tarot-logo.png、新規画像は生成していない）を
     踏襲する。widthはbase ruleのmax-contentのままだとtext-indent:
     -9999pxとの組み合わせで箱の実寸が意図せず巨大化する恐れがあるため、
     ロゴの縦横比（約3:1）に合わせた固定幅90pxに変更する。
     position/top/left/transform（中央寄せ）はbase ruleのまま変更しない
     ため、幅が変わっても中央位置はずれない。背景・「恋愛について、」・
     「あなたの運勢を占います」・3/5/7枚コース表示・価格表示・入力欄・
     「占いを始める」ボタン・TAROLUNEヘッダー・「トップへ戻る」・
     LOGIN・カード配置・PC昼版・スマホ版には一切触れない。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-tarot-mark {
    width: 90px;
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #screen-input .input-guidance {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    white-space: nowrap;
    color: var(--text);
    opacity: 0.85;
    font-size: 0.8rem;
    text-align: center;
  }
}

/* =========================================================
   STEP5: 最下部の注意書き（.input-card-note、PC限定）。
   7枚のカード（実測でy=832〜878付近まで、1682x935中）のさらに下、
   画像下端付近の暗い余白（table/ビネット部分、y=890以降）に配置する。
   相談入力画面専用の新規クラス。中央上部の3要素・textarea・
   start-button・#screen-inputのサイズ位置には一切触れない。 */
@media (min-width: 601px) {
  #screen-input .input-card-note {
    position: absolute;
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    white-space: nowrap;
    color: var(--text);
    opacity: 0.7;
    font-size: 0.68rem;
    text-align: center;
  }
}

/* =========================================================
   STEP6: 上部ヘッダー／ナビゲーション（.input-header、PC限定）。
   相談入力画面専用の新規クラス（.top-headerは再利用・変更しない）。
   #screen-inputを基準にabsolute配置し、画像上端付近に横一列で配置する。
   ナビ・LOGINは見た目のみでクリック処理は追加しない。
   中央上部の3要素・textarea・start-button・注意書き・#screen-inputの
   サイズ位置には一切触れない。 */
@media (min-width: 601px) {
  #screen-input .input-header {
    position: absolute;
    top: 2.5%;
    left: 10%;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(227, 192, 122, 0.35);
  }

  #screen-input .input-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #screen-input .input-header-moon {
    color: var(--gold-strong);
    font-size: 1rem;
  }

  #screen-input .input-header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  #screen-input .input-header-brand-main {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    color: var(--gold-strong);
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }

  #screen-input .input-header-brand-sub {
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    color: var(--text);
    opacity: 0.8;
  }

  #screen-input .input-header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  #screen-input .input-nav-link {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--text);
    opacity: 0.9;
  }

  #screen-input .input-login-badge {
    padding: 5px 14px;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--gold-strong);
    border: 1px solid rgba(227, 192, 122, 0.6);
    border-radius: 999px;
    /* クリック可能であることを常時示す（2026-09-13追加）。:hover限定の
       指定（PC夜版専用ルール側）が実機で反映されなかったため、この
       PC共通ルール（is-input-day/is-input-nightどちらにも属さず両方で
       共有される）へ直接指定する。padding/font-size/letter-spacing/
       color/border/border-radius等の見た目には一切触れていない。 */
    cursor: pointer;
  }
}

/* =========================================================
   相談入力画面PC夜版限定（2026-09-12追加）: 左上ブランド表記の
   「TAROT」を「TAROLUNE」へ変更する。PC夜版HOW IT WORKS/FAQ/
   利用規約/プライバシーポリシー/特定商取引法で採用済みの
   TAROLUNE表示方式（font-size:0で元のテキストを見た目上ゼロ幅にし、
   ::afterで文字を表示する。.theme-card-other .theme-card-jaの
   「その他」表示置換とも同じ考え方）を踏襲する。ロゴ画像は使わず、
   ::afterのcontentに直接大文字で"TAROLUNE"と指定する。
   font-family・font-size(0.95rem)・letter-spacing(0.25em)・
   text-indent(0.25em)・color(var(--gold-strong))は、上記の
   #screen-input .input-header-brand-main（PC共通ベースルール）と
   全く同じ値をそのまま踏襲し、表示位置・見た目を変更しない。
   HTML側のテキスト「TAROT」自体は変更しない（PC昼版では引き続き
   そのままの文字で表示されるため）。.input-header-brand-sub
   （CHOOSE YOUR CARD）・.input-header・.input-back-button・
   .input-login-badge・中央上部の「✦ TAROT ✦」（.input-tarot-mark、
   別要素）には一切触れない。PC昼版・スマホ昼版・スマホ夜版・
   他画面には一切影響しない。 */
@media (min-width: 601px) {
  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-main {
    font-size: 0;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-main::after {
    content: 'TAROLUNE';
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    color: var(--gold-strong);
  }
}

/* =========================================================
   相談入力画面PC夜版限定（2026-09-12追加）: 右上ナビゲーション
   （.input-header-nav内の.input-nav-link 4項目＝「今日の運勢」
   「タロット占いとは」「使い方」「私たちについて」）を非表示にする。
   PC昼版は既に.input-header-nav自体をdisplay:noneにしてLOGINごと
   隠しているが（上記、body.is-input-day #screen-input .input-header-nav）、
   夜版ではLOGIN（.input-login-badge）は残す方針のため、.input-nav-link
   （4項目）だけを個別に非表示にする。既存DOM（.input-header-nav以下）は
   削除せず、CSSでの非表示に限定する。.input-header自体のborder-bottom・
   高さ・position、.input-header-brand（TAROT/CHOOSE YOUR CARD）・
   .input-back-button（← トップへ戻る）・.input-login-badge（LOGIN）の
   位置・サイズには一切触れない。PC昼版・スマホ昼版・スマホ夜版・
   他画面（TOP・カード選択・カード開示・結果・HOW IT WORKS・利用規約・
   プライバシーポリシー・FAQ・特定商取引法）には一切影響しない。 */
@media (min-width: 601px) {
  body.is-input-active:not(.is-input-day) #screen-input .input-nav-link {
    display: none;
  }
}

/* =========================================================
   STEP2残り: 相談入力画面 → トップ画面（テーマ選択）への戻り導線
   （.input-back-button、PC限定）。
   既存の.input-header（brand/nav、position:absolute; top:2.5%; left:10%;
   width:80%）とは別の独立要素とし、その左側の余白（0%〜10%）に配置する
   ことで、.input-headerの内部レイアウト（flex space-between）には
   一切触れない。見た目は既存の.input-login-badge（ピル型・ゴールド枠）
   と揃えたデザイン流用のみで、新しい配色は追加しない。 */
@media (min-width: 601px) {
  #screen-input .input-back-button {
    position: absolute;
    top: 2.5%;
    left: 2%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--gold-strong);
    background: transparent;
    border: 1px solid rgba(227, 192, 122, 0.6);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  #screen-input .input-back-button:hover,
  #screen-input .input-back-button:focus-visible {
    background: rgba(227, 192, 122, 0.12);
  }
}

/* =========================================================
   相談入力画面（PC限定）昼版背景の自動切替（body.is-input-day）。
   夜版（#screen-input本体・上記の各ルール）は1行も変更しない。
   body.is-input-dayはmain.jsのshowScreen()がAppClock.getDisplayInfo()の
   判定結果に応じて#screen-input表示のたびに付け外しする（トップ画面の
   is-top-active/is-top-nightとは独立）。

   day-consultation-bg.png（1448×1086、比率約4:3）は夜版night-
   consultation-bg.png（1682×935、比率約1.8:1）と縦横比が異なるため、
   background-size/positionは夜版の値をそのまま使わず、まずは
   background-size:coverの最小構成のみとする。ウルトラワイド／縦長寄り
   PC向けの夜版専用分岐（min-aspect-ratio:2/1、max-aspect-ratio:7/5）は
   夜版のまま維持し、昼版には今回追随させない（必要になれば別途調整）。
   #screen-input本体のwidth/height/position等（レイアウトの骨格）は
   夜版と共有し、変更しない。

   背景がnight-consultation-bg.png（暗い夜景）からday-consultation-
   bg.png（明るい昼景）に変わることで、地の画像に直接乗る文字
   （.screen-tagline/.input-guidance/.input-card-note/.input-tarot-mark/
   header内の文字・戻るボタン）がvar(--text)・var(--gold-strong)
   （白〜アイボリー・明るめゴールド、夜背景向け）のままだと読みにくく
   なるため、これらの要素だけ昼版クラス配下で文字色を上書きする。
   色は新規に作らず、既に日中トップ画面で使われ視認性確認済みの
   配色（--top-text:#322a45、--top-gold:#b8863f）と同じ値を流用する。
   #start-button（金色グラデーションボタン）は独自の配色を持ち、昼背景
   でも視認性に問題がないため、今回も変更しない。
   #consultation-input（相談入力欄）だけは、夜版由来の濃い黒紫パネル
   （rgba(20,14,40,0.5)）のままだと昼のラベンダー世界観から浮くため、
   昼版クラス配下でパネル色・文字色・プレースホルダー色のみ追加調整する
   （position/width/height/border/border-radius等の配置・枠は夜版と共通
   のまま変更しない）。 */
@media (min-width: 601px) {
  /* 背景表示方法の修正: 正式背景（1811×868px、横縦比 約2.09:1）は、
     一般的なPCブラウザの表示領域（横縦比 約1.5〜1.8:1、image比より
     縦長）より横長のため、background-size:coverだと必ず高さ基準で
     拡大され、左右が大きくトリミングされていた（実測：1920×1080相当で
     約15%、1200×800相当では約28%が横方向で失われる計算）。特に
     center 44%（横方向center）では、本棚側・右端カーテン側がほぼ
     均等に削られ、右端のカーテンがほとんど見えなくなる、本棚側が
     不自然に拡大して見える、という報告と一致する。
     対策としてbackground-size:containに変更した。画像は一切
     加工・トリミングせず、常に画像全体（左の本棚→中央の紫カーテン→
     窓とお城→右端の紫カーテン）が欠けずに収まる。containは画像の
     縦横比を保ったまま「はみ出さない最大サイズ」に自動調整するため、
     一般的なPC表示領域（画像より縦長）では上下にわずかな余白が生じるが、
     左右が切れることは無くなる。
     追加修正1: この余白を埋めるbackground-colorに、既存の昼版TOPテーマ
     --top-bg-2（#f7ecf9）を流用していたが、実機で「白い帯」に見える
     という指摘があった。原因を確認したところ、この帯は親要素・body・
     .screen共通の背景ではなく、#screen-input自身のbackground-color
     （このルールが優先して適用されている）がそのまま表示されていた
     ものだった。#f7ecf9はRGB(247,236,249)と非常に白に近い薄い色で、
     背景画像の実際の縁（実測：上端付近は概ねRGB(200〜250,150〜200,
     130〜200)程度のピンク、下端付近は概ねRGB(120〜220,80〜185,
     110〜200)程度のモーブ〜ピンク）と比べて彩度が低すぎたため、
     境目が「白帯」として目立っていた。対策として、背景画像の上下端を
     実際にサンプリングした色の平均値に近い#c59ba7（淡いローズ〜
     ラベンダー系、画像そのものより加工・トリミングは一切していない）に
     変更した（このbackground-colorの値は今回も変更しない。background-
     size:coverでは通常この色は表示されないが、#screen-select側で
     min-height超過時のフォールバックとして機能するため残す）。

     追加修正2: 「containだと上下に帯が出る」という指摘を受け、
     background-size:contain（→常に帯ゼロだが左右クロップもゼロ）から
     background-size:cover（→常に帯ゼロだが左右は必ずクロップされる）へ
     戻した。containとcoverはどちらも「画像の縦横比を保ったまま自動で
     拡大縮小する」動的な指定のため、実際の表示領域の縦横比が変わっても
     常に正しく動作する（手計算した固定の中間値backgroundsize等は、
     基準にした画面サイズ以外では逆に帯とクロップの両方が中途半端に
     残ってしまうため採用しなかった）。
     「上下の帯を完全にゼロにする」ことと「左右を一切クロップしない」
     ことは、画像（横縦比2.09:1）が一般的なPC表示領域（横縦比1.5〜1.8:1、
     画像よりも縦長）より横長である以上、数学的に両立しない
     （どちらか一方を選ぶ必要がある）。今回のご指示は「上下の単色帯を
     出さない」ことを明示的に最優先とされたため、coverを採用した。
     実測では、1920×1080相当で左右合計約14.8%（左右各7.4%）、
     1366×768相当で約14.8%、1440×900相当で約23.3%、1200×800相当
     （比較的縦長寄りのウィンドウ）で約28.1%が横方向でトリミングされる
     計算になる。以前の指摘（本棚拡大・右端カーテンほぼ見えず）は、
     このクロップ自体に加えてbackground-position:center 44%（縦位置が
     中央からずれていた）と、#f7ecf9の白帯問題が重なっていたことが
     大きい。今回はbackground-position:center center（左右・上下とも
     完全に中央）を維持しているため、以前より対称でバランスの取れた
     見え方になる想定だが、横幅方向の縮小自体は完全には避けられない。
     background-position:center centerは変更しない。 */
  body.is-input-day #screen-input {
    background-image: url("../assets/input/day-consultation-bg.png");
    background-size: cover;
    background-position: center center;
    background-color: #c59ba7;
  }

  /* 視認性調整: 明るい部分（窓際・書棚付近）に乗る文字が薄く見えたため、
     #322a45よりもう一段濃い紫（#241c38）に変更。黒にはしない。
     大見出し（.screen-tagline内のspan）は今回変更対象外。
     縦位置調整（2026-09-18）: 4列化した.course-preview-row（下記）が
     相談入力欄（top:43%、PC共通・変更していない）に近づいたため、
     「TAROT→恋愛について/あなたの運勢を占います→4コース」の上側UI群
     だけをまとめて20px上へ移動する。PC共通base rule（top:20%、上の
     @media min-width:601pxブロック）はそのまま残し、PC昼版だけこの
     ルールでtopを追加指定して上書きする（PC夜版のtop:20%は無変更）。
     left/transform/文字色/2行構成/THEME_MESSAGESは変更していない。 */
  body.is-input-day #screen-input .screen-tagline {
    top: calc(20% - 20px);
    color: #241c38;
  }

  /* 視認性調整: 見出し1行目・2行目（.input-theme-line1/2）は現在
     font-weight:400（.screen-tagline共通スタイル）のため、1段階だけ
     太くして少し見やすくする（400→500）。ゴシックのような重い印象に
     ならない範囲に留め、文字サイズ・位置・行間・色は変更しない。
     PC昼版（body.is-input-day、min-width:601px）限定。夜版・スマホ版・
     他画面には影響しない。 */
  body.is-input-day #screen-input .input-theme-line1,
  body.is-input-day #screen-input .input-theme-line2 {
    font-weight: 500;
  }

  /* 視認性調整（背景帯なし版）: ヘッダーの背景パネルを撤去したため、
     ナビ4項目（今日の運勢/タロット占いとは/使い方/私たちについて）と
     ブランドサブテキストは写真に直接乗る。上記グループよりさらに濃い
     「深い紫／プラム系」にしてコントラストだけで視認性を確保する
     （黒にはしない）。文字の太さも少しだけ上げて可読性を補強する
     （色・配置・サイズは変更しない）。 */
  body.is-input-day #screen-input .input-header-brand-sub,
  body.is-input-day #screen-input .input-nav-link {
    color: #180f2b;
    font-weight: 600;
  }

  /* 視認性調整: 中央の小さい案内文（「心の中にある問いを、ひとつだけ
     聞かせてください。」）は背景パネルを持たず地の写真に直接乗るため、
     上記グループよりさらに一段濃い紫にする（黒にはしない）。文字の太さも
     少しだけ上げる（配置・サイズは変更しない）。 */
  body.is-input-day #screen-input .input-guidance {
    color: #1b1430;
    font-weight: 500;
  }

  /* 視認性調整: 画面最下部の注意書き（「※カードはあなた自身が選びます。
     AIが選んだカードではありません。」）はカード画像の上に乗るため、
     昼版の世界観に合う濃い紫系にしつつ文字の太さを上げて視認性を確保
     する（配置・サイズは変更しない）。 */
  body.is-input-day #screen-input .input-card-note {
    color: #1b1430;
    font-weight: 600;
  }

  body.is-input-day #screen-input .input-tarot-mark,
  body.is-input-day #screen-input .input-header-moon,
  body.is-input-day #screen-input .input-header-brand-main,
  body.is-input-day #screen-input .input-login-badge {
    color: #b8863f;
  }

  /* 相談入力画面PC昼版限定（2026-09-12追加）: 中央上部の「✦ TAROT ✦」
     （.input-tarot-mark）を、細いプレーン文字から既存の正式ゴールド
     TAROTロゴ画像へ変更する。ブランド名TAROLUNEへの変更ではなく、
     PC夜版（上のbody.is-input-active:not(.is-input-day) #screen-input
     .input-tarot-mark、2718行目付近）で既に正式採用済みの画像置換
     方式・同じロゴファイル（assets/input/day-open-tarot-logo.png、
     PC昼版カード開示画面の.app-header .brand-mark等でも使われている
     正式ロゴ）をそのまま再利用し、新規画像は生成していない。
     width:90px/height:30pxもPC夜版と全く同じ値（ロゴの縦横比
     約3:1に合わせた固定幅）で、text-indent:-9999px+overflow:hiddenで
     元の文字を見た目上隠す。position/top/left/transform（中央寄せ）は
     PC共通base rule（2688行目付近）のまま変更していない。直上の
     color:#b8863f指定は、text-indentで文字が隠れるため実質無効になる
     が、既存宣言はそのまま残す。左上の「TAROLUNE / CHOOSE YOUR CARD」
     （.input-header-brand-main等）・背景・トップへ戻るボタン・
     テーマ名／相談文・3枚/5枚/7枚コース・相談入力欄・「占いを始める」
     ボタン・カード・PC夜版・スマホ昼版・スマホ夜版・他画面には
     一切触れていない。 */
  body.is-input-day #screen-input .input-tarot-mark {
    /* 縦位置調整（2026-09-18）: .screen-tagline（上）・.course-preview-row
       （下記）と同じ20px分、まとめて上へ移動する。PC共通base rule
       （top:14%、2718行目付近）はそのまま残し、PC昼版だけこのルールで
       topを追加指定して上書きする（PC夜版のtop:14%は無変更）。
       left/transform（中央寄せ）・幅・画像は変更していない。 */
    top: calc(14% - 20px);
    width: 90px;
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 相談入力画面PC昼版限定（2026-09-12追加）: 左上ブランド表記の
     「TAROT」を「TAROLUNE」へ変更する。PC夜版（上のbody.is-input-
     active:not(.is-input-day) #screen-input .input-header-brand-main、
     2843行目付近）で既に採用済みのTAROLUNE表示方式（font-size:0で
     元のテキストを見た目上ゼロ幅にし、::afterで文字を表示する）を
     踏襲する。HTML側の文字列自体（「TAROT」）を直接書き換える案も
     検討したが、この.input-header-brand-mainはPC/スマホ・昼夜版で
     共有される単一のHTML要素であり、スマホ版（昼夜とも）は現時点で
     ::after方式を採用しておらずHTML側のテキストをそのまま表示する
     実装のため、HTML側の文字列を変更するとスマホ昼版・スマホ夜版の
     表示にも意図せず影響してしまう。そのため、PC夜版と同じ「見た目は
     ::afterで表示し、HTML側の文字は変更しない」方式を採用し、
     body.is-input-dayという専用クラス＋@media(min-width:601px)の
     組み合わせでPC昼版だけに限定した。font-size(0.95rem)・
     letter-spacing(0.25em)・text-indent(0.25em)・font-familyは、
     PC共通ベースルール（2805行目付近）と全く同じ値をそのまま踏襲し、
     colorはこのブロック直上のPC昼版限定色（#b8863f）と同じ値を使う
     ことで、表示位置・サイズ・色を一切変更していない。中央上部の
     「✦ TAROT ✦」（.input-tarot-mark、別要素）・.input-header-
     brand-sub（CHOOSE YOUR CARD）・背景画像・トップへ戻るボタン・
     ヘッダーの高さや位置には一切触れていない。 */
  body.is-input-day #screen-input .input-header-brand-main {
    font-size: 0;
  }

  body.is-input-day #screen-input .input-header-brand-main::after {
    content: 'TAROLUNE';
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    font-size: 0.95rem;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    color: #b8863f;
  }

  /* 相談入力画面PC昼版限定: 右上ナビゲーション（.input-header-nav＝
     「今日の運勢」「タロット占いとは」「使い方」「私たちについて」の
     .input-nav-link 4項目、および.input-login-badge「LOGIN」）は、
     いずれも見た目のみでクリック処理を持たない未実装の項目のため、
     完成イメージに合わせてPC昼版でのみ非表示にする。既存DOM
     （.input-header-nav以下）は削除せず、CSSでの非表示に限定する。
     .input-header自体はjustify-content:space-betweenのままのため、
     兄弟要素の.input-header-brand（左上ロゴ・トップへ戻るボタンとは
     別要素）の位置・中央コンテンツの配置は変更されない。PC夜版
     （body.is-input-active:not(.is-input-day)）・スマホ昼版・スマホ夜版・
     他画面（TOP・カード選択・カード開示・結果・HOW IT WORKS・利用規約・
     プライバシーポリシー・FAQ・特定商取引法）には一切影響しない。 */
  body.is-input-day #screen-input .input-header-nav {
    display: none;
  }

  /* 昼版相談入力欄：淡いラベンダー系の半透明パネルへ（背景が適度に透ける
     上品な質感）。文字色は昼背景向けの濃色に切り替え、可読性を確保する。
     パネル自体の背景は変更しない（維持指示）。枠線のみ、既存の金色を
     もう少しはっきり見えるよう濃さ・不透明度を上げる（色相は変えない）。 */
  body.is-input-day #screen-input #consultation-input {
    background: rgba(233, 220, 245, 0.6);
    color: #241c38;
    border-color: rgba(184, 134, 63, 0.75);
  }

  /* プレースホルダーは濃い黒ではなく、落ち着いた紫〜グレー紫系に
     （視認性調整前よりもう少し濃く）。 */
  body.is-input-day #screen-input #consultation-input::placeholder {
    color: rgba(94, 79, 122, 0.85);
  }

  /* 視認性調整: 「トップへ戻る」ボタンは小さなピル型背景（前回追加分）を
     維持しつつ、文字色を上記ナビと同じ深い紫／プラム系にして
     はっきり読めるようにする。既存のゴールド枠（border）は変更せず
     活かす。 */
  body.is-input-day #screen-input .input-back-button {
    color: #180f2b;
    font-weight: 600;
    background: rgba(250, 246, 255, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  body.is-input-day #screen-input .input-back-button:hover,
  body.is-input-day #screen-input .input-back-button:focus-visible {
    background: rgba(250, 246, 255, 0.92);
  }
}

/* =========================================================
   カード選択画面（PC限定・body.is-select-day限定）背景のみ。
   今回はカード配置・カード枚数・カードUIには一切触れず、
   相談入力画面PC昼版（body.is-input-day #screen-input、上のブロック）
   と全く同じ画像・全く同じsize/position（day-consultation-bg.png、
   background-position:center center、background-size:cover、
   background-color:#c59ba7）を再利用し、「相談入力画面と完全に同じ
   部屋・同じ世界」に見えるようにする。background-size:coverを採用した
   経緯・理由（containだと上下に帯が出るため、動的に画像全体を
   常に隙間なく埋められるcoverへ戻した。左右のクロップは画像と表示
   領域の縦横比の違いにより数学的に避けられない）は上の
   body.is-input-day #screen-inputのコメントを参照
   （画像は一切加工しないため、窓・城・本棚・花・水晶・キャンドル・
   テーブル等の配置・色味は元画像のまま変わらない）。
   min-height:100vh（height:100vhではない）にしている理由も従来と同じ
   （#card-grid・78枚の配置は今回まだ調整しないため、コンテンツが
   100vhを超える可能性がある）。background-colorはcover使用時は通常
   表示されないが、コンテンツが100vhを超えた領域のフォールバックとして
   残す。
   夜版・スマホ版・相談入力画面自体・TOP画面には一切影響しない
   （body.is-select-day起点のセレクタのみのため）。

   追加修正（1画面化・背景ズレ対策）: 実機確認の結果、縦スクロールが
   発生し、背景も上下にずれて見えるという指摘があった。原因を調査した
   ところ、#screen-select自体の position/width/transform/height指定は
   相談入力画面（body.is-input-day #screen-input）と同じ考え方で正しく
   機能していたが、相談入力画面側で既に行っていた次の2つの対策が
   カード選択画面側には移植されていなかったことが判明した。
     1) 共通の#app（max-width:720px内の全画面共通コンテナ）には基本
        ルールでpadding:40px 16px 60pxが常時かかっており、これが
        #screen-select（100vw・min-height:100vh）の外側に上下ぶんの
        余白として残ったままだった。これにより実際のページ全体の高さが
        100vhを超え、縦スクロールが発生していた。
     2) 共通の.app-header（「TAROT」「参加型タロット占い」の見出し）を
        隠す処理がPC限定でinput画面にしか適用されておらず、
        カード選択画面表示中は.app-headerがそのまま#screen-selectの
        上に表示され続けていた。この結果、#screen-select自体の箱
        （＝背景画像の描画基準）がビューポート最上端から
        .app-headerの高さぶんだけ下にずれた位置から始まっており、
        「背景が上下にずれて見える」原因になっていた
        （background-size:cover自体・background-position:center
        center・画像ファイルは正しいまま、#screen-selectという箱自体の
        開始位置がビューポート上端とずれていたことが本質的な原因）。
     対策として、相談入力画面（body.is-input-active #app /
     body.is-input-active .app-header、上方に既存）と全く同じ考え方で、
     body.is-select-day限定の#appパディング解除・.app-header非表示を
     追加した。#screen-select自体のposition/width/transform/
     background-image/background-size/background-position/画像ファイルは
     一切変更していない。 */
@media (min-width: 601px) {
  body.is-select-day #app {
    padding: 0;
  }

  body.is-select-day .app-header {
    display: none;
  }

  body.is-select-day #screen-select {
    position: relative;
    left: 50%;
    width: 100vw;
    min-height: 100vh;
    transform: translateX(-50%);
    /* カード選択画面PC昼版専用の背景画像。相談入力画面PC昼版
       （body.is-input-day #screen-input、day-consultation-bg.png）とは
       別ファイル（day-card-selection-bg.png）に差し替えた。表示方式
       （no-repeat/center center/cover）は相談入力画面と同じ考え方を
       踏襲し、変更していない。 */
    background-image: url("../assets/input/day-card-selection-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #c59ba7;
    /* 正式TAROTロゴ追加のための上部余白確保（2026-09-12追加）。PC夜版
       （body:not(.is-select-day) #screen-select、下部の別ブロック）で
       既に採用済みの「#screen-selectにpadding-topを追加し、その内側に
       ::beforeでロゴを絶対配置する」手法を踏襲する。h2自身への
       margin-top追加は、#screen-selectがh2の直前に padding/border を
       持たないため margin相殺（collapsing）で#screen-select自体の
       min-height:100vhの外側へ突き抜け、夜版で過去に発生したのと同じ
       スクロール不具合を再発させる恐れがあるため使わない。padding-top
       は相殺されないため安全。この38pxぶんh2以下（.guide-text/
       .selection-count）は下へ移動するが、.card-table側で同量を
       margin-topのマイナス調整により相殺し、カード群のY座標
       （.card-table・#card-grid・78枚のカード・gap・サイズ）は
       1pxも変えない（下のbody.is-select-day .card-table参照）。
       #select-fortune-button（position:absolute、top:64px）・
       .select-back-button（position:absolute、top:18px）は、
       絶対配置のtopが#screen-selectのpadding-boxの外縁（border直後、
       padding量に依存しない位置）を基準とするため、この変更による
       座標のズレは発生しない。 */
    padding-top: 38px;
  }

  /* カード選択画面PC昼版限定の正式TAROTロゴ（2026-09-12追加）。
     新しい画像は生成せず、既存の正式ロゴ画像
     assets/input/day-open-tarot-logo.pngをそのまま使用する（PC夜版・
     相談入力画面の.input-tarot-mark等と共通のファイル）。実寸2172×724px
     （縦横比3:1）のため、width:90pxに対しheight:30pxが正しい比率。
     #screen-select::before（現在未使用の疑似要素）にposition:absoluteで
     配置し、通常のdocument flowには一切参加させない。これにより、
     h2「直感で3枚選んでください」・.guide-text・.selection-count・
     .card-table・.card-grid・78枚のカード・#select-fortune-button・
     .select-back-button・3/5/7枚の説明オーバーレイ・背景画像には
     一切影響しない。配置は、直上のブロックで確保した
     #screen-select { padding-top:38px }の内側（top:4px〜34px、
     h2開始位置まで残り4pxの余白）にぴったり収める。
     PC夜版（body:not(.is-select-day)により対象外）・スマホ昼版・
     スマホ夜版（@media(min-width:601px)外）・相談入力・カード開示・
     鑑定結果・TOP・その他の画面には一切影響しない。 */
  body.is-select-day #screen-select::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 30px;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
  }

  /* 「← 相談内容を変更」ボタン（#back-to-input-button、.select-back-button）
     のPC昼版限定表示。既存のスマホ昼版ルール（別の@media max-width:600px
     ブロック、通常フロー内でmargin:0 0 10px）は変更しない。#screen-select
     は直上のルードで既にposition:relative済みのため、それを基準に
     position:absoluteで画面左上へ配置する。通常フローに参加させない
     ため、h2・案内文・選択済み表示・78枚のカード群・中央オーバーレイ・
     占うボタン・背景の位置には一切影響しない。クリック処理（既存の
     onBackToInput()→showScreen('input')、resetStateなし）もHTML/JSとも
     変更していない。 */
  body.is-select-day .select-back-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 18px;
    left: 24px;
    margin: 0;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #241c38;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(184, 134, 63, 0.85);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(60, 35, 80, 0.15);
    cursor: pointer;
  }

  /* 「← 戻る」ボタン（#back-to-input-button、.select-back-button）の
     PC夜版限定表示（2026-09-12追加）。上のPC昼版ルールと全く同じ構造・
     位置・サイズ（display:inline-flex/position:absolute/top:18px/
     left:24px/padding/font-size/font-weight/letter-spacing/
     border-radius/cursor）をそのまま流用し、配色だけをPC夜版の
     説明オーバーレイ（3枚/5枚/7枚コース、closeボタン等）と同じ
     半透明の濃紺〜濃紫＋ゴールド罫線＋ゴールド文字へ調整する。
     HTML・クリック処理（既存のonBackToInput()→showScreen('input')、
     resetStateなし。相談内容・選択コースはそのまま保持）は一切
     変更していない。夜版条件はbody:not(.is-select-day)（下の
     body:not(.is-select-day) #screen-select背景ルールと同じ考え方）。
     78枚のカード配置・サイズ・gap・選択演出・選択済みカウンター・
     3/5/7枚の説明オーバーレイ・背景画像・PC昼版・スマホ昼夜版には
     一切影響しない。 */
  body:not(.is-select-day) .select-back-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    top: 18px;
    left: 24px;
    margin: 0;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(5, 3, 18, 0.35);
    cursor: pointer;
  }

  /* カード選択画面PC夜版専用の背景画像。昼版（body.is-select-day、
     上のブロック）と全く同じ考え方（position:relative/left:50%/
     width:100vw/min-height:100vh/transform:translateX(-50%)による
     #appの720px制限からのフルブリード表示、no-repeat/center center/
     cover）をそのまま踏襲し、画像ファイルと背景色フォールバックだけを
     夜版用に差し替える。従来は#screen-select（夜版）にこの種の指定が
     一切無く、#screen-select自体の背景は#app/bodyの既定の暗い
     グラデーション任せだった。78枚のカード配置・サイズ・gap・裏面
     デザイン・選択ロジック（js/main.js）・PC昼版・スマホ昼夜版には
     一切触れない。 */
  body:not(.is-select-day) #screen-select {
    position: relative;
    left: 50%;
    width: 100vw;
    min-height: 100vh;
    transform: translateX(-50%);
    background-image: url("../assets/input/night-card-selection-bg.png");
    background-repeat: no-repeat;
    background-position: 52% center;
    background-size: cover;
    background-color: #241a45;
    /* 上部余白調整（PC夜版・カード選択画面限定）。以前はh2にmargin-top:32px
       を指定していたが、#screen-select自身にoverflow等の相殺防止指定が
       無いため、そのmarginがmin-height:100vhの外側へ突き抜け、縦・横
       スクロールバーが再発した（margin collapsing through parent）。
       paddingは相殺されず、border-box（全要素共通）によりmin-height:100vh
       の内側に吸収されるため、ここでpadding-topへ置き換える。
       #select-fortune-button（position:absolute）はpaddingの影響を
       受けないため見た目は変わらない。カード配置・78枚・占うボタン・
       背景・#app・.app-headerには触れない。 */
    padding-top: 32px;
  }

  /* カード選択画面PC夜版限定の正式TAROTロゴ（2026-09-12追加）。
     新しい画像は生成せず、既存の正式ロゴ画像
     assets/input/day-open-tarot-logo.pngをそのまま使用する。
     #screen-select::before（現在未使用の疑似要素）にposition:absoluteで
     配置し、通常のdocument flowには一切参加させない。これにより、
     h2「直感で3枚選んでください」・.guide-text・.selection-count・
     .card-table・.card-grid・78枚のカード・#select-fortune-button・
     .select-back-button・3/5/7枚の説明オーバーレイ・背景画像には
     一切影響しない（margin/padding/開始位置を一切変更していないため）。
     配置は、直上のブロックで確定済みの#screen-select { padding-top:32px }
     （margin相殺対策として既に確保されている、h2開始前の余白）の内側
     ぴったりに収める。ロゴの高さを24px・上端4pxに抑えることで、h2の
     開始位置（padding-top:32pxの終端）より確実に手前で収まり、
     どの要素とも重ならない。横幅70pxは、指定基準（90×30px、約3:1）と
     同じ縦横比を保ちつつ、24px高に合わせて縮小した値（実機で画面幅・
     既存要素との干渉が無いことを確認する前提の初期値）。
     PC昼版（body.is-select-dayにより対象外）・スマホ昼版・スマホ夜版
     （@media(min-width:601px)外）・相談入力・カード開示・鑑定結果・
     TOP・その他の画面には一切影響しない。 */
  body:not(.is-select-day):has(#screen-select.active) #screen-select::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 24px;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
  }

  /* 縦スクロール修正（PC夜版限定）。実測の結果、#screen-select自体は
     height:732px（min-height:100vh由来）でinnerHeightと完全に一致して
     おり、#screen-select単体は1画面に収まっていた。原因は#screen-select
     の手前にある.app-header（「TAROT／参加型タロット占い」、通常の
     document flow・PC夜版のカード選択画面だけ非表示ルールが無く常時
     表示だった）と、#appの共通padding(40px+60px)が#screen-select
     より上に積み上がり、#screen-selectのtopを143.4pxまで押し下げて
     いたこと。PC昼版（body.is-select-day、上のブロック）が既に同じ
     理由で.app-header非表示＋#app padding:0を行っているのと全く同じ
     対策を、夜版にも適用する。
     body.is-select-dayは「選択画面がアクティブ かつ 昼」を1つの
     classだけで表せるが、夜版にはそれに相当する単一classが無いため、
     :has(#screen-select.active)で「今まさに選択画面がアクティブ」を
     判定し、他画面（カード開示画面等、.app-headerを表示したままにする
     設計の画面）には一切影響しないよう限定する。
     .card-grid（max-height含む）・78枚のカード枚数・サイズ・gap・
     配置・選択ロジック・背景画像/位置/サイズには一切触れていない。 */
  body:not(.is-select-day):has(#screen-select.active) .app-header {
    display: none;
  }

  body:not(.is-select-day):has(#screen-select.active) #app {
    padding: 0;
  }

  /* 横スクロール対策（PC夜版・カード選択画面アクティブ時限定）。
     #screen-selectのwidth:100vwは、縦スクロールバーの幅を考慮せずに
     計算されるため、縦スクロールバーが出現すると実際の表示幅より
     数px広くなり、left:50%+translateX(-50%)の中央寄せが左右にあふれて
     横スクロールバーが発生する。#appではなくbodyにoverflow-x:hiddenを
     付けるのは、#appはmax-width:720pxで幅が制限されており、そこに
     付けると#screen-selectの意図通りの全幅フルブリード表示自体が
     720px幅でクリップされてしまうため。bodyに付ければ、あふれた
     わずかな分だけを切り落としつつ、全幅表示はそのまま維持できる。
     :has(#screen-select.active)により、PC夜版でカード選択画面が
     アクティブな時だけに限定し、他画面・PC昼版・スマホ両版には
     一切影響しない。縦スクロールは許可のまま、78枚配置・カードサイズ・
     カード間隔・占うボタン・width:100vwには触れていない。 */
  body:not(.is-select-day):has(#screen-select.active) {
    overflow-x: hidden;
  }

  /* 遷移直後の一瞬の横ズレ対策（PC夜版限定）。共通の.screen.active
     {animation:fade-in}のkeyframe（fromがtransform:translateY(6px)）が、
     このブロック上部で指定しているtransform:translateX(-50%)（中央寄せ）
     と競合し、アニメーション中だけtranslateX(-50%)が退避して右にずれ、
     0.4s後のアニメーション終了と同時に中央へスナップして見えていた
     （PC昼版で既に判明・対策済みの問題と全く同じ現象）。
     PC昼版の対策（body.is-select-day #screen-select.active{animation:
     none}、上部の該当行）と同じ考え方で、表示直後から最終位置
     （中央寄せ済み）にする。高さ・padding・カード・背景には触れない。 */
  body:not(.is-select-day) #screen-select.active {
    animation: none;
  }

  /* 相談入力画面PC版で判明済みの問題（共通の.screen.active{animation:
     fade-in; transform:translateY(...)}が、上のtransform:
     translateX(-50%)による中央寄せと競合し、一瞬右にずれてから中央へ
     スナップして見える）と同じ対策。表示直後から最終位置（中央寄せ済み）
     にする。 */
  body.is-select-day #screen-select.active {
    animation: none;
  }

  /* カード選択画面PC昼版: 78枚を「13列×6行、重なりなし」で敷き詰める
     （body.is-select-day限定）。行ごとにカード幅だけを段階的に変え、
     重なりを作らずに「奥は小さく・手前は大きい」緩やかな奥行き感を
     出す（詳細は下の.card-row-1〜6側のコメント参照）。
     js/main.jsのrenderCardGrid()（78個のbuttonを.card-row-1〜6へ
     13枚ずつ振り分ける処理）・HTML・AppCards.TAROT_DECK・
     secureShuffle・state.slots・selectedOrder・dataset.index・
     onSelectSlot()・クリックイベント・正逆位置ロジックは一切変更して
     いない（見た目の定義のみ）。 */
  body.is-select-day .card-table {
    background: none;
    border: none;
    box-shadow: none;
    /* 上部テキスト（見出し/案内文/選択済み表示）とカード群の間に、
       参考画像同様の明確な余白を作る。実機確認の結果、初期値48pxでは
       縦スクロールが発生したため24pxへ縮小し、さらにカード群全体を
       約15px上方向へ寄せるため9pxへ調整した。
       2026-09-12追記（正式TAROTロゴ追加に伴う相殺調整）: 上の
       body.is-select-day #screen-selectへpadding-top:38pxを追加した
       ぶん、通常document flow上のh2以下すべて（.guide-text/
       .selection-count/.card-table）は本来38px下へ押し下げられる。
       .card-table自身のmargin-topを9pxから9-38=-29pxへ変更すること
       で、押し下げ分をちょうど打ち消し、.card-table（延いては
       #card-grid・78枚のカード・カード間gap・カードサイズ）の画面上の
       最終的なY座標を1pxも変えていない（h2・.selection-countだけが
       ロゴぶん下へ移動し、そこから.card-tableまでの見た目の間隔が
       広がる形になる）。このルール自体（margin-topの値）以外は
       一切変更していない。 */
    margin-top: -29px;
  }

  body.is-select-day .card-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* 6行の縦方向の間隔。実機確認の結果、初期値6pxでは縦スクロールが
       発生したため4pxへ縮小した。重なりを作っていた負のmargin-topは
       引き続き使用しない。 */
    gap: 4px;
    max-height: none;
    overflow-y: visible;
  }

  body.is-select-day .card-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 横方向の間隔（gap、全行共通）。行ごとの個別gap（4/6/8/10/13/16px）
       を試したが、全段を完全に等間隔にする方針へ変更したため、
       共通14pxへ戻した。 */
    gap: 14px;
  }

  /* 78枚すべて共通: 正式カード裏面画像（2026-09-04、紫地・金の細枠・
     四隅に金の三日月・散りばめた星のデザインへ更新。旧画像は
     assets/cards/card-back-backup-2026-09-04.pngとして保持）に合わせ、
     縦横比も新画像の実寸（1024×1536px＝2:3）に合わせる。四隅の三日月・
     金の装飾枠ができるだけ切れないよう、background-size:coverのまま
     aspect-ratioだけを画像実寸と一致させ、歪み・トリミングが最小限に
     なるようにしている。既存のCSS描画グラデーション（裏面の光る点装飾
     .card::after含む）は画像の上では不要なため非表示にする。枠線・
     角丸・box-shadow（既存の.card共通ルール）はそのまま活かす。
     既存の.card共通ルールにはmargin:6px 0 6px -16px（旧・フラット
     扇形配置用の負のmargin）が指定されているため、4辺すべてを
     margin:0でリセットする。widthはここでは指定せず、下の
     .card-row-1〜6側で行ごとに個別指定する（奥行き表現のため）。
     高さはaspect-ratioにより自動追従する。 */
  body.is-select-day .card-grid .card {
    aspect-ratio: 1024 / 1536;
    margin: 0;
    background-image: url("../assets/cards/card-back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  body.is-select-day .card-grid .card::after {
    display: none;
  }

  /* 参考画像（2026-09-04、13列×6行グリッドのモックアップ）に近づける
     ための「安全重視案」: 全78枚一律58pxの均等グリッドから、行ごとに
     カード幅だけを52px→62px（+2px刻み）へ段階的に変える。
     縦gap（.card-grid、4px）・.card-table の margin-top（9px）は
     いずれも変更せず、重なりを作る負のmargin-topも使用しない。
     .card-row側のjustify-content:centerにより、幅が変わっても各行は
     中央揃えのまま自動的に横幅が広がる。列数・行数（13列×6行＝78枚）・
     renderCardGrid()の振り分け処理は変更していない。 */
  body.is-select-day .card-row-1 .card { width: 52px; }
  body.is-select-day .card-row-2 .card { width: 54px; }
  body.is-select-day .card-row-3 .card { width: 56px; }
  body.is-select-day .card-row-4 .card { width: 58px; }
  body.is-select-day .card-row-5 .card { width: 60px; }
  body.is-select-day .card-row-6 .card { width: 62px; }

  /* ①選択済みカードを暗くする。当初はスマホ昼版と同じ
     filter:brightness(0.6)を採用していたが、filterは親要素（.card）に
     適用すると子要素（.badge、①②③の番号バッジ）の描画にも及んでしまい、
     明るいゴールドのバッジまで暗くなる不具合が判明した。スマホ昼版で
     正式採用した.card.selected::beforeの半透明黒オーバーレイ方式に
     統一する。::beforeは.badge（span、実DOM子要素）より先に描画される
     ため、バッジは常にオーバーレイの上に重なって見え、PCの既存の
     バッジのサイズ・位置・色（.card .badge、19px/-7px/var(--gold-strong)/
     #241a06）はそのまま明るく維持される。
     onSelectSlot()・selectedOrder・badge生成・is-locked・78枚の
     生成処理・カードサイズ・配置・選択済みの金枠(outline)には
     一切触れない。 */
  body.is-select-day .card-grid .card.selected::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: inherit;
    pointer-events: none;
  }

  /* ②「占う」ボタン（#select-fortune-button）を通常document flowから
     外す。PC専用の位置指定がこれまで無かったため、.hidden解除時に
     .primary-button共通ルール（display:block/width:100%/max-width:320px/
     margin:20px auto 0/padding:14px 28px）のまま.selection-countと
     .card-tableの間に割り込み、約70〜80pxの高さを追加していた
     （これが縦スクロール発生の原因）。position:absoluteにして
     #screen-select（既にposition:relative）基準に固定することで、
     .card-tableの位置を一切押し下げなくする。
     topの64pxは、現状のh2/.guide-text/.selection-count（margin込み、
     いずれもこのファイルの既存値から算出）の合計高さ（約126px）から
     ボタン自身の高さぶんを差し引いた概算値。実機のフォントレンダリング
     により多少の誤差はあり得るため、確認後の微調整を想定した初期値。
     width/max-width/padding/背景色等の見た目（.primary-button共通
     ルール）は変更しない。marginのみ、centering方式をmargin:autoから
     left:50%+transform（このファイルの他の絶対配置要素と同じ手法）へ
     揃えるため0にする。 */
  body.is-select-day #select-fortune-button {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* 「選択済み 0 / 3」の視認性改善（PC昼版、3/5/7枚コース共通）。ベース
     ルール（.selection-count { color: var(--text-muted) }）の薄い紫グレーが
     PC昼版の明るい背景に埋もれて読みにくいため、「選択済み」「/ 3」だけを
     濃い紫へ上書きする。既にPC/スマホ昼版の文字色として使用済みの値
     （#241c38）を再利用。「0」（#selected-count、既存でゴールド）・
     font-size/font-weight/line-height/margin/padding/位置は変更しない。 */
  body.is-select-day .selection-count,
  body.is-select-day .selection-count-max {
    color: #1b1430;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
  }

  /* display:noneは.guide-textのボックス自体（＝占有高さ）を消してしまい、
     3枚コースの.card-table以降が7枚/5枚コースより上にズレる原因になって
     いた。visibility:hiddenでテキストの見た目だけを消し、占有高さは
     そのまま残すことで、.selection-count・.card-table（延いてはカード
     群1段目のY座標）を7枚コースと完全に一致させる。
     【重要】このルールは削除・変更禁止。カード群のY座標を維持している
     唯一の根拠のため、以降の説明UI改修（中央オーバーレイ化）でも
     一切手を加えない。 */
  body.is-select-day.is-select-three .guide-text {
    visibility: hidden;
  }

  /* 5枚コース版（動的5視点・動作確認用の土台）。上のis-select-three専用
     ルールとは独立した別セレクタとして追加するだけで、3枚側のルール・
     コメント・挙動には一切触れていない。同じ理由（.card-table以降の
     Y座標を5枚・3枚・7枚で揃える）でdisplay:noneではなく
     visibility:hiddenを使う。 */
  body.is-select-day.is-select-five .guide-text {
    visibility: hidden;
  }

  /* 7枚コース版（動的7視点・動作確認用の土台）。上のis-select-three/
     is-select-five専用ルールとは独立した別セレクタとして追加するだけで、
     3枚・5枚側のルール・コメント・挙動には一切触れていない。同じ理由
     （.card-table以降のY座標を3枚・5枚・7枚で揃える）でdisplay:noneでは
     なくvisibility:hiddenを使う。 */
  body.is-select-day.is-select-seven .guide-text {
    visibility: hidden;
  }

  /* カード選択画面PC昼版・3枚コース限定の中央オーバーレイ（現状/核心/導き）。
     body.is-select-day.is-select-three（js/main.jsのshowScreen()が
     spread種別に応じてtoggle）の時だけ表示する。5枚・7枚コース、夜版
     （body:not(.is-select-day)）、スマホ版（@media max-width:600px）は
     このクラス・セレクタを一切参照しないため現状のまま。

     表示方法: position:fixed（ビューポート基準、ドキュメントフロー外）
     のため、高さがどれだけあってもフローに一切影響しない。.card-table・
     .card-grid・カードサイズ/gap/列数行数・#select-fortune-buttonの
     top:64px・背景画像には一切触れていない。
     開閉はopacity/pointer-eventsで行い、display:noneでのトグルは
     使わない（js/main.jsが.is-openクラスを付け外しするだけで、
     フェードイン/アウトできるようにするため）。 */
  body.is-select-day.is-select-three .spread-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-three .spread-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* 遮蔽レイヤー。画面全体を覆うが、白飛び・暗転させすぎないごく薄い
     半透明のみとし、blurは使わない（78枚のカードと背景がパネルの
     背後にはっきり見える状態を保つ）。pointer-events:autoにより、
     このレイヤーがクリックを受け止め、下の78枚のカードボタンまで
     イベントが届かなくなる（カード自体のHTML/CSS/クリックロジックは
     一切変更していない）。 */
  body.is-select-day.is-select-three .spread-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  /* 中央ガラス風パネル（B案）。横幅560px前後、半透明の白〜ピンク、
     背景（78枚のカード・テーブル背景）が透けて見えるガラス質感、
     細いゴールド枠、控えめな金の装飾。backdrop-filterは使わず、
     背景色の半透明度だけで「透けて見える」質感を出す。 */
  body.is-select-day.is-select-three .spread-overlay-panel {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(255, 250, 246, 0.62);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-three .spread-overlay-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #4a2f12;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-three .spread-overlay-close:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  body.is-select-day.is-select-three .spread-overlay-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-boxes {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 18px;
  }

  body.is-select-day.is-select-three .spread-overlay-box {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 12px;
  }

  body.is-select-day.is-select-three .spread-overlay-box-title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-num {
    margin-right: 4px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-three .spread-overlay-box-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }

  /* カード選択画面PC夜版・3枚コース限定の中央オーバーレイ（2026-09-12
     追加）。上のPC昼版ブロック（body.is-select-day.is-select-three）と
     全く同じ構造・位置・サイズ・開閉ロジック（display/position/inset/
     z-index/opacity/pointer-events/transition、panelのwidth/max-width/
     padding/border-radius、各boxの配置、closeボタンの位置・サイズ、
     lead/noteの位置、Ⅰ/Ⅱ/Ⅲの横並び）をそのまま流用し、配色だけを
     PC夜版HOW IT WORKS/FAQ/利用規約/プライバシーポリシー等と同じ
     半透明の濃紺〜濃紫＋ゴールド罫線＋明るいラベンダー系文字へ調整する。
     HTML・JS（is-select-three/.is-openのトグル、×ボタンの開閉ロジック、
     spreadOverlayClosed）は一切変更していない。夜版条件は
     body:not(.is-select-day).is-select-three（PC昼版ブロックは1文字も
     書き換えていない）。5枚・7枚コース（別クラス）、スマホ版
     （@media max-width:600px）、78枚のカード配置・カードサイズ・gap・
     選択演出・選択済みカウンター・「占う」ボタン・背景画像・他画面には
     一切影響しない。 */
  body:not(.is-select-day).is-select-three .spread-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-three .spread-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* 遮蔽レイヤー。昼版の白〜ピンク系ではなく、夜背景を少し暗く見せる
     程度の半透明濃紺にする。78枚のカードがうっすら透けて見える程度に
     留め、blurは使わない（昼版と同じ考え方）。 */
  body:not(.is-select-day).is-select-three .spread-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  /* 中央パネル。昼版の白〜ピンクのガラス質感から、PC夜版各画面と同じ
     半透明の濃紺〜濃紫パネル＋ゴールド罫線へ。width/max-width/padding/
     border-radiusは昼版と完全に同じ値のまま。backdrop-filterは他の
     PC夜版パネル（FAQ/利用規約等）と同程度のblur(6px)を追加する。 */
  body:not(.is-select-day).is-select-three .spread-overlay-panel {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
    backdrop-filter: blur(6px);
  }

  body:not(.is-select-day).is-select-three .spread-overlay-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-close:hover {
    background: rgba(24, 18, 55, 0.95);
  }

  body:not(.is-select-day).is-select-three .spread-overlay-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-boxes {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 18px;
  }

  /* 各box: 白・アイボリー・ピンク系にはせず、透明〜ごく薄い濃紫＋
     薄いゴールド枠にする。 */
  body:not(.is-select-day).is-select-three .spread-overlay-box {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 10px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 12px;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-box-title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-num {
    margin-right: 4px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-box-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }

  /* 5枚コース専用の中央オーバーレイ（動的5視点・動作確認用の土台）。
     上のbody.is-select-day.is-select-three関連ルール（3枚専用）は
     1文字も変更していない。body.is-select-day.is-select-five（新規
     クラス、js/main.jsのshowScreen()がstate.selectedSpread.id===
     'five-card'のときだけtoggle）の時だけ表示する、完全に別の
     セレクタ・別のクラス（.spread-overlay-five-*）として実装する。
     3枚専用の.spread-overlay/.spread-overlay-box等は一切参照しない。
     表示方法（position:fixed、opacity/pointer-eventsでの開閉）は
     3枚側と同じ考え方を踏襲しているが、CSSの値自体は独立している。
     .card-table・.card-grid・カードサイズ/gap・
     #select-fortune-buttonには一切触れていない。 */
  body.is-select-day.is-select-five .spread-overlay-five {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-five .spread-overlay-five.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-five .spread-overlay-five-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  /* 5項目を横並び→折り返しで収めるため、3枚専用パネル（560px）より
     広めの幅にする。3行×2＋2の折り返しはCSSのflex-wrapのみで行い、
     JS側は個数を意識しない（state.generatedPositions.lengthが将来
     増減しても、このCSSだけで自然に折り返す）。 */
  body.is-select-day.is-select-five .spread-overlay-five-panel {
    position: relative;
    width: 720px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(255, 250, 246, 0.62);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-five .spread-overlay-five-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #4a2f12;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-five .spread-overlay-five-close:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  body.is-select-day.is-select-five .spread-overlay-five-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 18px;
  }

  /* flex-basis 200pxにより720px幅のパネル内では3個/行→2個で折り返す
     （5個なら3+2）。JS側（renderFiveCardOverlayBoxes()）は個数に
     応じたレイアウト計算を一切行わない。 */
  body.is-select-day.is-select-five .spread-overlay-five-box {
    flex: 1 1 200px;
    max-width: 220px;
    min-width: 0;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 12px;
  }

  body.is-select-day.is-select-five .spread-overlay-five-box-title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-num {
    margin-right: 4px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-five .spread-overlay-five-box-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }

  /* カード選択画面PC夜版・5枚コース限定の中央オーバーレイ（2026-09-12
     追加）。上のPC昼版ブロック（body.is-select-day.is-select-five）と
     全く同じ構造・位置・サイズ・開閉ロジック（display/position/inset/
     z-index/opacity/pointer-events/transition、panelのwidth:720px/
     max-width/padding/border-radius、closeボタンの位置・サイズ、
     lead/noteの位置、boxesのflex-wrapによる折り返し、各boxの配置・
     padding・font-size・line-height・margin・text-align）をそのまま
     流用し、配色だけをPC夜版3枚コース（body:not(.is-select-day).
     is-select-three）と同じ配色へ調整する。
     Ⅰ〜Ⅴの中身（renderFiveCardOverlayBoxes()がstate.generated
     Positionsをループして#spread-overlay-five-boxesへ動的生成する
     仕組み、GENERAL_5/RELATIONSHIP_5/DECISION_5のどれが選ばれても
     同じロジックで表示される）には一切触れていない（JS変更なし）。
     HTML・spreadRegistry.js・dynamicPositions.jsも無変更。
     夜版条件はbody:not(.is-select-day).is-select-five（PC昼版ブロック・
     3枚コース夜版・7枚コースは1文字も書き換えていない）。スマホ版
     （@media max-width:600px）、78枚のカード配置・カードサイズ・gap・
     選択演出・選択済みカウンター・「占う」ボタン・背景画像・他画面には
     一切影響しない。 */
  body:not(.is-select-day).is-select-five .spread-overlay-five {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-panel {
    position: relative;
    width: 720px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
    backdrop-filter: blur(6px);
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-close:hover {
    background: rgba(24, 18, 55, 0.95);
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 18px;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box {
    flex: 1 1 200px;
    max-width: 220px;
    min-width: 0;
    padding: 12px 10px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 12px;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box-title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-num {
    margin-right: 4px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }

  /* 7枚コース専用の中央オーバーレイ（動的7視点・動作確認用の土台）。
     上のbody.is-select-day.is-select-three/is-select-five関連ルール
     （3枚・5枚専用）は1文字も変更していない。body.is-select-day.
     is-select-seven（新規クラス、js/main.jsのshowScreen()が
     state.selectedSpread.id==='seven-card'のときだけtoggle）の時だけ
     表示する、完全に別のセレクタ・別のクラス（.spread-overlay-seven-*）
     として実装する。3枚専用の.spread-overlay/.spread-overlay-box等、
     5枚専用の.spread-overlay-five/.spread-overlay-five-box等は
     一切参照しない。表示方法（position:fixed、opacity/pointer-events
     での開閉）は3枚・5枚側と同じ考え方を踏襲しているが、CSSの値自体は
     独立している。.card-table・.card-grid・カードサイズ/gap・
     #select-fortune-buttonには一切触れていない。 */
  body.is-select-day.is-select-seven .spread-overlay-seven {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  /* 7項目（上段4・下段3）を窮屈にならずに収めるため、5枚専用パネル
     （720px）と同じ幅にする（3枚より広いが、必要以上に巨大にはしない）。
     パネル内側の実質幅は720-30*2(左右padding)=660pxで、下のボックス
     幅156px×4＋gap12px×3＝660pxにぴったり収まるよう設計している。 */
  body.is-select-day.is-select-seven .spread-overlay-seven-panel {
    position: relative;
    width: 720px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(255, 250, 246, 0.62);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #4a2f12;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-close:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  /* 上段4・下段3の2段構成。js/main.jsのrenderSevenCardOverlayBoxes()が
     行ごとに.spread-overlay-seven-row（4項目・3項目）を分けて生成し、
     このコンテナはその2行を縦に積むだけ。align-items（既定値stretch）
     により両方の行がこの幅（=パネル内側の660px）まで広がるため、
     下段.spread-overlay-seven-row内のjustify-content:centerが、
     上段4項目に対して自動的に中央揃えになる。 */
  body.is-select-day.is-select-seven .spread-overlay-seven-boxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
  }

  /* 固定幅（flex-grow:0）にすることで、上段4項目・下段3項目とも
     同じボックスサイズになる（下段だけ幅が広がって不揃いになる事態を
     避ける）。156px×4＋gap12px×3＝660pxで、パネル内側の幅と一致。 */
  body.is-select-day.is-select-seven .spread-overlay-seven-box {
    flex: 0 0 156px;
    width: 156px;
    min-width: 0;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 12px;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-box-title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-num {
    margin-right: 3px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }

  /* カード選択画面PC夜版・7枚コース限定の中央オーバーレイ（2026-09-12
     追加）。上のPC昼版ブロック（body.is-select-day.is-select-seven）と
     全く同じ構造・位置・サイズ・開閉ロジック（display/position/inset/
     z-index/opacity/pointer-events/transition、panelのwidth:720px/
     max-width/padding/border-radius、closeボタンの位置・サイズ、
     lead/noteの位置、boxesの2段構成＋rowごとのflex配置、各box固定幅
     156px・padding・font-size・line-height・margin・text-align）を
     そのまま流用し、配色だけをPC夜版3枚・5枚コース（body:not(.is-
     select-day).is-select-three/five）と同じ配色へ調整する。
     Ⅰ〜Ⅶの中身（renderSevenCardOverlayBoxes()がstate.generated
     Positionsをループして.spread-overlay-seven-row（上段4・下段3）を
     生成する仕組み、HORSESHOE_7/RELATIONSHIP_7のどちらが選ばれても
     同じロジックで表示される）には一切触れていない（JS変更なし）。
     HTML・spreadRegistry.js・dynamicPositions.jsも無変更。
     夜版条件はbody:not(.is-select-day).is-select-seven（PC昼版ブロック・
     3枚/5枚コース夜版は1文字も書き換えていない）。スマホ版
     （@media max-width:600px）、78枚のカード配置・カードサイズ・gap・
     選択演出・選択済みカウンター・「占う」ボタン・背景画像・他画面には
     一切影響しない。 */
  body:not(.is-select-day).is-select-seven .spread-overlay-seven {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-panel {
    position: relative;
    width: 720px;
    max-width: calc(100vw - 48px);
    padding: 32px 30px 26px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
    backdrop-filter: blur(6px);
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-close:hover {
    background: rgba(24, 18, 55, 0.95);
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-boxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box {
    flex: 0 0 156px;
    width: 156px;
    min-width: 0;
    padding: 10px 8px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 12px;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box-title {
    margin: 0 0 4px;
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-num {
    margin-right: 3px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }

  /* PC夜版: .card-table のパネル装飾（濃紺のbackground・border・
     box-shadow）を無効化し、正式背景画像（night-card-selection-bg.png、
     紫のテーブル・中央の金色天体盤）がカード78枚の後ろまでそのまま
     見えるようにする。padding・カード配置は変更しない。
     margin-top:35pxは、占うボタン（top:145px・高さ48px）の直下へ
     card-tableを最小限だけ下げ、.selection-countと重ならないようにする
     ための追加。 */
  body:not(.is-select-day) .card-table {
    background: none;
    border: none;
    box-shadow: none;
    margin-top: 35px;
  }

  /* カード選択画面PC夜版: 78枚を昼版と同じ「13列×6行、重なりなし」の
     配置仕様（列数・行数・行別カード幅・横gap・縦gap・中央揃え）へ移植
     する。夜版のカード裏デザイン（背景グラデーション・border・
     box-shadow・::afterの光る点装飾）・selected時のoutline+flash演出・
     #screen-selectの背景画像/色は一切変更しない（aspect-ratio・
     background・border・box-shadow・::after・.selectedへは触れず、
     margin/幅/gap/displayのみ上書きする）。 */
  body:not(.is-select-day) .card-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    max-height: none;
    overflow-y: visible;
  }

  body:not(.is-select-day) .card-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }

  /* 重なり配置用の負のmargin（基本ルールの margin:6px 0 6px -16px、
     および:nth-child(odd)/(even)のmargin-top）だけを解除する。 */
  body:not(.is-select-day) .card-grid .card {
    margin: 0;
    aspect-ratio: 1024 / 1536;
    background-image: url("../assets/cards/night-card-back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  body:not(.is-select-day) .card-grid .card::after {
    display: none;
  }

  body:not(.is-select-day) .card-row-1 .card { width: 49px; }
  body:not(.is-select-day) .card-row-2 .card { width: 51px; }
  body:not(.is-select-day) .card-row-3 .card { width: 52px; }
  body:not(.is-select-day) .card-row-4 .card { width: 54px; }
  body:not(.is-select-day) .card-row-5 .card { width: 56px; }
  body:not(.is-select-day) .card-row-6 .card { width: 58px; }

  /* 縦スクロール対策: 占うボタンをposition:absoluteで通常flowから外す。
     色・フォント等の見た目（共通.primary-buttonルール）は変更しない。
     top:145pxは.selection-countの可視テキスト直下、paddingは高さを
     約56px→48pxへ縮小するための調整（幅は変更しない）。 */
  body:not(.is-select-day) #select-fortune-button {
    position: absolute;
    top: 145px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 28px;
  }
}

/* =========================================================
   カード選択画面 PC昼版・13枚Premium専用オーバーレイ（2026-09-18新規）。
   スマホ昼版で正式採用済みの#select-spread-overlay-thirteen（index.html、
   .spread-overlay-thirteen-*、上のスマホ専用@media max-width:600px
   ブロック、6217行目以降）と全く同じHTML・同じ文言・同じJS
   （js/main.jsのrenderThirteenCardOverlayList()、既にPC/スマホ共通で
   実行される既存処理）を利用する。今回追加したのはCSSのみで、HTML・JSは
   一切変更していない。

   .spread-overlay-thirteenは全体のデフォルト（メディアクエリ外、316行目
   付近）でdisplay:noneのため、PC昼版ではこれまで一切表示されていなかった
   （スマホ昼版側のdisplay:flex上書きが@media max-width:600px内に限定
   されており、PC向けの対応する上書きが存在しなかったことが原因）。

   ここでは、PC昼版の3枚/5枚/7枚専用オーバーレイ（body.is-select-day.
   is-select-three/five/seven、上のブロック、4093〜5427行目）と全く同じ
   外枠（position:fixed+inset:0+z-index:200+opacity/pointer-events
   フェード）・backdrop色（rgba(255,247,241,0.18)）・パネル背景色
   （rgba(255,250,246,0.62)）・枠線色（rgba(205,164,90,0.65)）・
   box-shadow・×ボタンの外形/色・lead/desc/noteの文字色（#3a2a10/
   #5c4a33）・見出しfont-size（1.125rem）・本文font-size（1rem）を
   そのまま流用する（新しい色・新しい数値は作っていない）。3枚/5枚/7枚
   側のセレクタ・ルールは1文字も変更していない。

   13項目はスマホ版と同じ「罫線区切りのコンパクトな一覧」
   （.spread-overlay-thirteen-list、ローマ数字＋役割名の1行形式）を
   維持し、5枚/7枚のようなBOXグリッドへは変更しない（13行をBOX化すると
   PCでも縦に長くなりすぎるため）。パネル幅は3枚専用パネルと同じ560px
   （3枚同様、box型ではなくシンプルな内容のため）。13行分の高さに
   対応するため、スマホ版と同じ考え方でmax-height+overflow-yの安全策を
   PC版にも設けている。

   78枚のカード配置・カードサイズ・gap・カード選択ロジック・13枚選択
   ロジック・「選択済み 0 / 13」・戻るボタン・#select-fortune-button・
   背景画像には一切触れていない。PC夜版（body:not(.is-select-day)側）・
   スマホ昼版・スマホ夜版・他画面にも影響しない
   （body.is-select-day.is-select-thirteenという専用クラスの組み合わせ
   でのみ有効）。 */
@media (min-width: 601px) {
  body.is-select-day.is-select-thirteen .spread-overlay-thirteen {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-panel {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 32px 30px 26px;
    background: rgba(255, 250, 246, 0.62);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #4a2f12;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-close:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(205, 164, 90, 0.22);
    font-size: 0.95rem;
    line-height: 1.4;
    color: #4a2f12;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list-item--synthesis {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(205, 164, 90, 0.45);
    border-bottom: none;
    font-weight: 600;
    color: #3a2a10;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-num {
    flex: 0 0 auto;
    min-width: 2.4em;
    font-weight: 700;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-label {
    flex: 1 1 auto;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-desc {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 PC夜版・13枚Premium専用オーバーレイ（2026-09-18新規）。
   PC昼版（body.is-select-day.is-select-thirteen、上のブロック）に
   正式採用済みの文言・構造・並び順・position/width/max-width/
   max-height/overflow-y/padding/border-radius/font-size/line-height/
   gap等のレイアウト値は一切変更せず、そのまま複製する。HTML
   （#select-spread-overlay-thirteen、index.html）・JS
   （js/main.jsのrenderThirteenCardOverlayList()、is-select-thirteen/
   .is-open切替ロジック）はPC/スマホ・昼夜共通で既に動作しているため、
   今回変更していない。

   配色だけを、PC夜版3枚コース専用オーバーレイ（body:not(.is-select-
   day).is-select-three、4852〜4969行目）で正式採用済みの夜版パレットに
   合わせる（新しい色は作らず、既存の値をそのまま転用）。
   - backdrop: rgba(8, 6, 24, 0.32)
   - パネル: background rgba(24, 18, 55, 0.72) / border rgba(217, 173,
     85, 0.62) / box-shadow・backdrop-filter:blur(6px)
   - ×ボタン: color #e3b85c / background rgba(24, 18, 55, 0.85) /
     border rgba(217, 173, 85, 0.65)
   - 見出し（lead）: #eee8f5
   - 補足文（desc）: #d6cee4
   - 注記（note）: #e8e1f1
   - 一覧の各行（list-item）: #d6cee4、区切り線 rgba(217, 173, 85,
     0.28)（既存の夜版区切り線と同じ値、FAQ夜版等で使用中）
   - ⅩⅢ「総合テーマ」の行（list-item--synthesis）: #eee8f5、上側の
     区切り線 rgba(217, 173, 85, 0.45)
   - ローマ数字（num）: #e3b85c

   3枚/5枚/7枚のPC夜版オーバーレイ・PC昼版13枚オーバーレイ・スマホ版
   （@media max-width:600px側の既存ブロック）・78枚のカード配置/
   サイズ/gap/選択番号バッジ/選択済みカウンター/カード選択処理/
   13枚選択ロジック/horoscope-13/スクロール/背景画像/TAROTロゴ/
   「← 戻る」には一切触れていない。 */
@media (min-width: 601px) {
  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-panel {
    position: relative;
    width: 560px;
    max-width: calc(100vw - 48px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 32px 30px 26px;
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
    backdrop-filter: blur(6px);
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-close:hover {
    background: rgba(24, 18, 55, 0.95);
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-lead {
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(217, 173, 85, 0.28);
    font-size: 0.95rem;
    line-height: 1.4;
    color: #d6cee4;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list-item--synthesis {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(217, 173, 85, 0.45);
    border-bottom: none;
    font-weight: 600;
    color: #eee8f5;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-num {
    flex: 0 0 auto;
    min-width: 2.4em;
    font-weight: 700;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-label {
    flex: 1 1 auto;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-desc {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 昼版スマホ対応（背景＋カード領域、max-width:600px、
   body.is-select-day限定）。上記PC版（@media min-width:601px）の各
   ルールは1行も変更しない。夜版（is-select-dayが付かない場合）にも
   一切影響しない（すべてのセレクタがbody.is-select-dayを起点に
   しているため）。

   見出し/案内文/選択済み表示（h2/.guide-text/.selection-count）の
   CSSはここでは一切変更しない。

   背景方針: background-attachment:fixedは使わず、長大な1枚画像で
   ページ全体を覆う方式も採らない。#screen-select（78枚ぶんのコンテンツ
   により高さが自動で伸びる、高さ固定なし＝自然な縦スクロール前提）に
   対し、background-imageへ「上部専用の背景画像」と「下へ自然に続く
   グラデーション」の2レイヤーを重ねる。1枚目（写真、assets/input/
   mobile/day-card-selection-bg.png、1536×1024px）はbackground-size:
   100% autoで横幅いっぱい・高さは画像の縦横比のまま自動追従させ
   （coverによる大胆なトリミングを避ける）、2枚目（linear-gradient）は
   要素の高さ全体（100% 100%、#screen-selectがどれだけ長くなっても
   追従する）を覆う形で写真の背後に敷く。写真が届く範囲は写真が手前に
   見え、写真より下（カード群が続くあたり以降）はグラデーションが
   自然に見える、という仕組みで継ぎ目を作る。
   グラデーションの開始色（#cf93c2）は、新背景画像の下端付近（テーブル
   面、装飾物のないシンプルな淡いピンク〜ラベンダー）を目視でサンプリング
   した近似値。終点（#c17fb3）はそこからわずかに深みを加えた同系色。

   #appの既定padding（28px 10px 48px、常時適用）と.app-header
   （「TAROT」共通見出し）は、相談入力画面スマホ昼版
   （body.is-input-day、上のブロック）と同じ理由・同じ手法で、
   body.is-select-day限定・スマホ限定で解除/非表示にする（背景画像を
   画面幅いっぱい・最上部から自然に表示するための前提条件で、これが
   無いと背景が#app内側の余白の中に収まってしまい、意図した「上部が
   写真で始まる」見え方にならないため）。それ以外の要素（h2・
   .guide-text・.selection-count・.card-table・#card-grid）の位置・
   サイズ・余白は一切変更していない。 */
@media (max-width: 600px) {
  body.is-select-day #app {
    padding: 0;
  }

  body.is-select-day .app-header {
    display: none;
  }

  /* 背景3層構成（写真・縦タイル・グラデーション）。常駐背景レイヤー方式
     （JSでposition:fixedの別要素を生成し、opacityで表示切替する案）を
     実験したが不採用とし、#screen-select本体への通常のCSS背景指定へ
     戻した。1枚目・2枚目はJPEG軽量版（day-card-selection-bg.jpg /
     day-card-selection-table-tile.jpg）。元PNG（同名の.png）は
     assets/input/mobile/にそのまま残しており、問題があればURLを.pngへ
     戻すだけで復元できる。background-repeat/position/size/
     linear-gradientは変更していない。 */
  body.is-select-day #screen-select {
    background-image:
      url("../assets/input/mobile/day-card-selection-bg.jpg"),
      url("../assets/input/mobile/day-card-selection-table-tile.jpg"),
      linear-gradient(180deg, #cf93c2 0%, #c17fb3 100%);
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-position: top center, top center, top center;
    background-size: 100% auto, 100% auto, 100% 100%;
  }

  /* 共通の.screen.active{animation:fade-in}（opacity/transformアニメ
     ーション）が、display:contentsで再構成した6列グリッドのカード
     背景（card-back.png）を、アニメーション終了直後の再描画時に消して
     しまう不具合の対策。PC版（body.is-select-day #screen-select.active、
     @media min-width:601px側）で既に採用済みの対策と同じもの。 */
  body.is-select-day #screen-select.active {
    animation: none;
  }

  /* カード領域: 78枚を「6列×13段」で表示する。renderCardGrid()が
     生成するDOM構造（#card-grid > .card-row.card-row-1〜6 > .card×13、
     計78個）はPC版と完全に共有しており、HTML/JavaScriptは一切変更
     していない。ここではCSSだけで見た目を6列グリッドへ再構成する。
     .card-row（本来は「13枚の行」を表すラッパー）をdisplay:contentsで
     レイアウトツリーから除外し、78個の.cardボタンをすべて#card-gridの
     直接の子として扱わせたうえで、#card-gridをdisplay:gridの
     repeat(6, ...)にすることで、DOM順序（state.slotsの並び順＝
     シャッフル結果そのまま）で自動的に6列×13段へ折り返される
     （78÷6=13で割り切れるため、最終行が半端にならない）。
     PC版（@media min-width:601px側）の.card-row/.card-row-1〜6の
     width/gap指定は別メディアクエリのため一切変更していない。 */
  body.is-select-day .card-table {
    background: none;
    border: none;
    box-shadow: none;
  }

  body.is-select-day .card-grid {
    display: grid;
    grid-template-columns: repeat(6, 46px);
    justify-content: center;
    column-gap: 6px;
    row-gap: 6px;
    /* カード群だけの内部スクロールを廃止し、#screen-select・ページ
       全体の自然な縦スクロールに任せる（旧: max-height:54vh;
       overflow-y:auto;）。 */
    max-height: none;
    overflow-y: visible;
  }

  body.is-select-day .card-row {
    display: contents;
  }

  /* 78枚すべて共通: スマホ昼版専用の軽量カード裏面画像
     （card-back-mobile.png、256×384px）へ差し替え、縦横比も実画像に
     合わせる。PC昼版の高解像度版（card-back.png、1024×1536px）は
     ここでは使わない（78枚同時描画時に画像が表示されない実機不具合が
     あり、軽量版に切り替えることで解消したため）。
     旧・CSS描画のグラデーション裏面と光る点装飾(::after)は無効化する。
     幅は78枚共通46px（初期値）。既存の.card共通ルール・スマホ共通の
     @media(max-width:600px)ブロック（594行目付近）が持つ負のmargin
     （margin-left:-8px等）は、4辺すべてをmargin:0でリセットして
     打ち消す（カード同士を重ねないため）。 */
  body.is-select-day .card-grid .card {
    width: 46px;
    aspect-ratio: 1024 / 1536;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/assets/cards/card-back-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  body.is-select-day .card-grid .card::after {
    display: none;
  }

  /* 選択したカードの見せ方: スマホ昼版もPC昼版と同様、数字バッジ
     （①②③）を表示し、あわせてカード自体を少し暗くして「選択済み」で
     あることを示す。バッジ生成処理（js/main.jsのonSelectSlot()）自体は
     変更しない（DOM構造はPC・スマホ・夜版とも共通）。
     既存のoutline（金枠）・select-flashアニメーションはそのまま活かす。
     実機確認の結果、filter:brightness()は.card（親要素）に適用すると
     子要素である.badgeの描画にも及び、明るいゴールドのバッジまで
     暗くなってしまう不具合が判明したため、filter方式は廃止した。
     代わりに.card.selected::before（新規の半透明黒オーバーレイ）で
     カードの背景だけを暗くする。::beforeは.badge（実際のDOM子要素、
     生成順が後）より先に描画されるため、バッジは常にオーバーレイの
     上に重なって見え、明るいまま維持される。
     バッジのサイズだけスマホ用に縮小する: PC版の.card .badge
     （width/height:19px、top/right:-7px）をこのカード幅46px・
     column-gap/row-gap:6pxのグリッドにそのまま使うと、-7pxのはみ出しが
     6pxの隙間を1pxだけ超えて隣のカードにわずかに重なる恐れがあるため、
     はみ出し量が隙間(6px)に収まるよう、width/height:14px・
     top/right:-5px・font-size:9pxへ縮小する（色・形・生成ロジックは
     変更しない、サイズのみの上書き）。 */
  body.is-select-day .card .badge {
    width: 14px;
    height: 14px;
    top: -5px;
    right: -5px;
    font-size: 9px;
    /* 色調整: 基本ルール（.card .badge、background:var(--gold-strong)/
       color:#241a06）のままだと、背景の明るいゴールドに対して数字が
       濃い茶色に見え、昼版の世界観から浮いて見えていた。背景は
       プロジェクト内で最も明るいゴールドである既存のvar(--gold-strong)
       をそのまま踏襲し（新しい色は増やさない）、数字だけを昼版で
       既に使用している濃い紫黒#180f2b（.course-preview-item等と同じ値）
       に変更する。円形・サイズ・位置・box-shadowは変更しない。 */
    background: var(--gold-strong);
    color: #180f2b;
  }

  /* カード本体だけを暗くするオーバーレイ。.badge（span、実DOM子要素）
     より先に描画されるため、バッジの上には重ならず、バッジは
     var(--gold-strong)のまま明るく表示され続ける。pointer-events:none
     でクリック判定（onSelectSlot等）にも影響しない。 */
  body.is-select-day .card-grid .card.selected::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: inherit;
    pointer-events: none;
  }

  /* 文字の視認性改善: 明るいスマホ昼版背景に対して、共通のh2/.guide-text/
     .selection-count（var(--text)/var(--text-muted)、暗い背景前提の配色）
     のままだとコントラストが不足するため、スマホ昼版限定で文字色を
     PC昼版と同系統の濃い紫へ上書きする。あわせて、案内文・選択済み表示・
     戻るボタン（.select-back-button、下の別ブロック）はfont-weight:600
     （セミボールド相当）へ引き上げ、実機での読みやすさを補強する
     （既存の.input-card-note等、PC昼版で採用済みの手法と同じ考え方）。
     #selected-count（金色の数字部分、既存でbold）は対象外のためそのまま。
     サイズ・位置・text-shadowは変更しない。 */
  body.is-select-day h2 {
    color: #241c38;
    /* スマホ昼版だけ、見出し「直感で3枚選んでください」を非表示にし、
       案内文（.guide-text）1文だけを表示する。HTML自体は変更しない
       （PC版・夜版ではh2を従来どおり表示する）。 */
    display: none;
  }

  body.is-select-day .guide-text {
    color: #1b1430;
    font-weight: 600;
  }

  body.is-select-day .selection-count,
  body.is-select-day .selection-count-max {
    color: #1b1430;
    font-weight: 600;
  }

  /* 「選択済み 0 / 3」の数字部分（#selected-count）だけは、ベースルール
     （.selection-count #selected-count）でvar(--gold-strong)・boldが
     指定されている。スマホ昼版限定で色だけを同系の濃紫へ上書きする。
     font-weight:bold・font-size:1.15rem・min-widthは変更しない。 */
  body.is-select-day #selected-count {
    color: #1b1430;
  }

  /* 相談入力画面へ戻るボタン（#back-to-input-button、.select-back-button）。
     相談入力画面の.input-back-button（#screen-input専用）とは独立した
     新規クラスとし、そちらの見た目には一切影響しない。小さめ・ピル型・
     細い金枠・透明に近い背景・濃い紫の文字色（上記h2等と同系統）という、
     既存の「トップへ戻る」ボタンに近い、目立ちすぎないデザインにする。
     横幅いっぱいにはせず、h2の直前に自然に収まるサイズに留める。 */
  body.is-select-day .select-back-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 10px;
    padding: 5px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #241c38;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(184, 134, 63, 0.6);
    border-radius: 999px;
    cursor: pointer;
  }

  /* 「占う」ボタン（#select-fortune-button）。.primary-button共通ルール
     （width:100%; max-width:320px;）自体は変更せず、かつ汎用スマホ
     メディアクエリ側の.primary-button,.secondary-button{max-width:none;}
     （594行目付近、全画面共通）を、ID指定の高い詳細度で上書きして
     幅だけを再定義する。楕円形・金色グラデーション・文字色・
     font-weight:bold・paddingは.primary-buttonからそのまま継承させ、
     margin:20px auto 0（既存）により中央配置も自動的に維持される。 */
  body.is-select-day #select-fortune-button {
    width: 250px;
    max-width: 250px;
  }
}

/* =========================================================
   カード選択画面 スマホ昼版・3枚コース専用オーバーレイ（2026-09-15追加）。
   PC昼版（body.is-select-day.is-select-three .spread-overlay、
   @media min-width:601px側、3853〜3970行目付近）と全く同じHTML・JS・
   文言（「あなたの相談を、3つの視点から読み解きます」／Ⅰ現状「この
   悩みを取り巻く今」／Ⅱ核心「カードが示す、今知るべきこと」／Ⅲ導き
   「これからのあなたへのメッセージ」／「この3つを心に浮かべながら、
   直感で3枚のカードを選んでください。」）をそのまま使用し、レイアウト
   だけをスマホ幅向けに調整する。新しい文言は作っていない。
   JS（js/main.jsの`is-select-three`/`.is-open`トグル、272〜279行目・
   1438〜1440行目）・HTML（index.html 548〜576行目）は一切変更して
   いない。PC版のCSS（上記3853〜3970行目）も1文字も変更していない。

   このブロックはbody.is-select-day.is-select-three＋
   @media(max-width:600px)という専用スコープでのみ有効なため、
   PC版・PC夜版・スマホ夜版・5枚コース（.spread-overlay-five）・
   7枚コース（.spread-overlay-seven）・78枚のカード配置（6列×13段・
   カード幅46px・gap 6px）・カード裏面画像・カード選択挙動・選択演出・
   見出し（h2）・.guide-text・.selection-count・戻るボタン・
   背景・スクロール構造・選択後の処理には一切影響しない。

   スマホ向けの調整内容:
   - 外枠（.spread-overlay）はPC版と同じposition:fixed+inset:0+
     align-items:center/justify-content:centerの全画面オーバーレイ、
     .is-openでのopacity/pointer-eventsフェードもPC版と同じ値。
   - 背景（.spread-overlay-backdrop）はPC版と全く同じ
     rgba(255,247,241,0.18)を使用（色は変更しない、指示どおり既存の
     backdropをそのまま使用）。
   - パネル（.spread-overlay-panel）は横幅をcalc(100vw - 40px)・
     max-width:400pxとし、iPhone SE等の幅375pxの端末でも左右
     20pxずつの余白を確保する。縦方向はmax-height:88vh+
     overflow-y:autoとし、内容が収まりきらない極端に低い画面高でも
     パネル内部だけがスクロール可能になり、×ボタン・内容が画面外へ
     完全に切れて操作不能になることを防ぐ（78枚のカード画面・
     ページ全体のスクロール構造には影響しない、パネル単体の
     overflow-y:autoのみ）。
   - 3つのBOX（.spread-overlay-boxes）は、PC版の横並び（display:flex、
     gapのみで3列）をflex-direction:columnへ変更し、縦1列に積む方法で
     実現する。各BOXの`flex:1 1 0`（PC版で横並び時に幅を均等割りする
     ための指定）は縦積みでは不要なため指定しない（各BOXの高さは
     内容量に応じた自然なautoになる）。
   - 背景色・枠線・box-shadow・ゴールドの装飾色（.spread-overlay-num
     のvar(--gold-strong)、.spread-overlay-panel/.spread-overlay-box
     の背景・枠線色等）はPC版と同じ値をそのまま流用し、新しい色は
     作っていない。
   - font-size・padding・gap・marginのみ、iPhoneの狭い画面でも収まる
     よう、PC版より小さい値へ調整している（下記の各ルール参照）。 */
@media (max-width: 600px) {
  body.is-select-day.is-select-three .spread-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-three .spread-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-three .spread-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  body.is-select-day.is-select-three .spread-overlay-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(255, 250, 246, 0.62);
    /* 5枚版・7枚版（.spread-overlay-five-panel/.spread-overlay-seven-panel）
       で正式採用済みのbackdrop-filter:blur(6px)を横展開（2026-09-15）。
       3枚版はこのblur採用前に実装されたため未適用のままだった。
       背景の78枚カードが透けすぎて説明文の可読性が下がっていた実機
       確認結果を受けての対応。background自体のopacityは変更しない。 */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  /* ×の視認性調整（2026-09-15）。スマホ昼版5枚コース
     （body.is-select-day.is-select-five .spread-overlay-five-close）で
     正式採用済みの調整をそのまま横展開する。ボタンの外形
     （width/height/top/right/border-radius/background/border）は
     変更せず、中央の「×」文字だけをfont-weight:700・color:var(--bg)
     （#0a0c18、サイト共通の濃紺）にする。font-sizeは変更しない。
     text-shadowは追加しない。 */
  body.is-select-day.is-select-three .spread-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-three .spread-overlay-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  body.is-select-day.is-select-three .spread-overlay-box {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 10px;
  }

  body.is-select-day.is-select-three .spread-overlay-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-num {
    margin-right: 4px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-three .spread-overlay-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-three .spread-overlay-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ昼版・5枚コース専用オーバーレイ（2026-09-15追加、
   「見た目の器」のみ。文言・API①接続は今回対象外）。

   既存HTML（index.html 584〜599行目、#select-spread-overlay-five）・
   既存JS（js/main.js renderFiveCardOverlayBoxes()、1192〜1215行目。
   state.generatedPositionsをループし、.spread-overlay-five-box内に
   .spread-overlay-five-box-title（.spread-overlay-five-num＋label）と
   .spread-overlay-five-box-descを動的生成する）は一切変更していない。
   API①のレスポンス仕様・JSロジック・プロンプトにも触れていない。
   showScreen()内のis-select-five/.is-open切替（272〜294行目付近）も
   ビューポート幅を判定しない既存ロジックのままで、この画面を開けば
   スマホでもPCと同じくfiveCardSpreadOverlay.classList.toggle('is-open',
   ...)が実行される。今回追加したのはCSSのみ。

   デザイン・サイズ感・配色・透明感は、直上の
   「カード選択画面 スマホ昼版・3枚コース専用オーバーレイ」ブロックと
   統一するため、外枠（position:fixed+inset:0+z-index:200+
   align-items:center/justify-content:center+opacity/pointer-events
   フェード）・backdrop色（rgba(255,247,241,0.18)）・パネル背景色
   （rgba(255,250,246,0.62)）・枠線色（rgba(205,164,90,0.65)/
   rgba(205,164,90,0.5)）・box-shadow・文字色（#4a2f12/#3a2a10/
   #5c4a33）・Ⅰ〜Ⅴのゴールド色（var(--gold-strong)）・font-size/
   padding/gap/marginの各値を、3枚版スマホ昼版ブロックからそのまま
   複製している（新しい色・新しい数値は作っていない）。3枚版側の
   セレクタ・ルールは1文字も変更していない（.is-select-threeと
   .is-select-fiveは別クラスのため、このブロックの追加が3枚版に
   影響することもない）。

   3枚版との違いは、5BOX分の縦の長さに対応するための高さ対策のみ：
   - パネル（.spread-overlay-five-panel）に3枚版と同じ
     max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
     を設定。5BOX＋リード文＋注意書きが画面高に収まらない場合だけ
     パネル内部が縦スクロールし、×ボタン（.spread-overlay-five-close）
     を含むパネル全体が操作可能な範囲に留まる。ページ本体・78枚の
     カード配置・カード選択のスクロール構造には一切触れていない。
   - 各BOX（.spread-overlay-five-box）にはheight/max-heightを一切
     指定せず、padding分を除いた残りはすべて内容量に応じたauto。
     役割名・説明文の文字数が将来API①接続時に変動しても、BOXが
     自然に伸びるだけで文字が切れる・BOX同士が重なることはない。
   - PC版（720px固定幅・flex-wrapでの横並び折り返し）とは異なり、
     スマホでは.spread-overlay-five-boxesをflex-direction:columnに
     変更してⅠ〜Ⅴを縦1列に積む。PC版のflex:1 1 200px/max-width:220px
     （横並び折り返し用）は縦積みでは不要なため指定していない。 */
@media (max-width: 600px) {
  body.is-select-day.is-select-five .spread-overlay-five {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-five .spread-overlay-five.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-five .spread-overlay-five-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  body.is-select-day.is-select-five .spread-overlay-five-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(255, 250, 246, 0.62);
    /* 背景の78枚カードの模様・枠線がパネル本文に透けて読みづらかった
       ための実機テスト（2026-09-15）。background自体のopacityは変更
       せず、backdrop-filterで背後だけをぼかす。半透明感・78枚カードの
       存在感は維持しつつ、細かい模様・枠線だけを弱める。5BOXの
       background・文字色・文字サイズ・padding・gap・パネルサイズ・
       max-height・スクロール・×ボタン・3枚版/7枚版/PC版/スマホ夜版
       には一切触れていない。 */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  /* ×の視認性調整（2026-09-15）。ボタンの外形（width/height/top/right/
     border-radius）は変更せず、中央の「×」文字だけを濃紺・太字にする。
     濃紺はこの画面専用の新しい色を作らず、サイト全体の濃紺bodyの背景
     色として既に使われている:root { --bg: #0a0c18 }（1〜16行目付近、
     コード内コメントでも「濃紺」と明記されている値）をそのまま流用する。
     太さはfont-weight:700のみで確保し、font-sizeは変更していない。
     派手な発光を避けるため、text-shadow等は追加していない。 */
  body.is-select-day.is-select-five .spread-overlay-five-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-five .spread-overlay-five-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  body.is-select-day.is-select-five .spread-overlay-five-box {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 10px;
  }

  body.is-select-day.is-select-five .spread-overlay-five-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-num {
    margin-right: 4px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-five .spread-overlay-five-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-five .spread-overlay-five-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ昼版・7枚コース専用オーバーレイ（2026-09-15追加、
   「見た目の器」のみ。文言・API①接続は今回対象外）。

   既存HTML（index.html 608〜623行目、#select-spread-overlay-seven）・
   既存JS（js/main.js renderSevenCardOverlayBoxes()、1231〜1268行目。
   state.generatedPositionsをループし、SEVEN_CARD_OVERLAY_ROW_SIZES
   （[4,3]）に従って#spread-overlay-seven-boxes内へ
   .spread-overlay-seven-row（行ラッパー）×2を生成し、その中に
   .spread-overlay-seven-box（.spread-overlay-seven-box-title＝
   .spread-overlay-seven-num＋label、.spread-overlay-seven-box-desc）を
   格納する構造。PC版は上4・下3の2段組みを再現するため.rowでグルーピング
   している）は一切変更していない。API①のレスポンス仕様・JSロジック・
   プロンプトにも触れていない。showScreen()内のis-select-seven/.is-open
   切替（js/main.js 296〜309行目付近）もビューポート幅を判定しない
   既存ロジックのままで、この画面を開けばスマホでもPCと同じく
   sevenCardSpreadOverlay.classList.toggle('is-open', ...)が実行される。
   今回追加したのはCSSのみ。

   デザイン・サイズ感・配色・透明感・backdrop-filter:blur(6px)は、
   実機確認済みのスマホ昼版5枚コース専用オーバーレイ（直上の
   「カード選択画面 スマホ昼版・5枚コース専用オーバーレイ」ブロック）を
   基準にそのまま複製している（新しい色・新しい数値は作っていない）。
   3枚版・5枚版側のセレクタ・ルールは1文字も変更していない
   （.is-select-three/.is-select-five/.is-select-sevenは別クラスのため、
   このブロックの追加が3枚版・5枚版に影響することもない）。

   Ⅰ〜Ⅶを縦1列にする方法: .spread-overlay-seven-boxesを5枚版と同じ
   display:flex; flex-direction:column; gap:8px;にするだけでは、
   JSが生成する中間の.spread-overlay-seven-row（4個入り・3個入りの
   行ラッパー）2つがそれぞれ独立したflexアイテムとして並んでしまい、
   「上段4個・下段3個」という2グループの見た目になってしまう
   （HTML/JSは変更禁止のためrow自体は残る）。そこで
   .spread-overlay-seven-rowに`display:contents;`を指定し、rowの
   ボックス自体をレンダリングツリーから消して中身のBOX（4個・3個）を
   親（.spread-overlay-seven-boxes）へ直接連結させる。これにより
   .spread-overlay-seven-boxesのgap:8pxが7個のBOX全体に均等にかかり、
   行の境目のない自然な縦1列（Ⅰ〜Ⅶ）になる。display:contentsは
   モダンなモバイルブラウザ（iOS Safari含む）で広くサポートされており、
   新しいHTML要素の追加は行っていない。

   高さ対策: パネル（.spread-overlay-seven-panel）に5枚版と同じ
   max-height:88vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
   を設定。7BOX＋リード文＋注意書きは5枚版よりさらに縦に長くなるが、
   画面高に収まらない場合はパネル内部だけが縦スクロールし、×ボタン
   （.spread-overlay-seven-close）を含むパネル全体が操作可能な範囲に
   留まる。ページ本体・78枚のカード配置・カード選択のスクロール構造には
   一切触れていない。各BOX（.spread-overlay-seven-box）にはheight/
   max-heightを一切指定せず、padding分を除いた残りはすべて内容量に
   応じたauto（7BOXを無理に1画面へ押し込むための縮小・2列配置・
   固定heightによる文章の省略は行っていない。font-sizeも5枚版と同じ
   値のまま縮小していない）。 */
@media (max-width: 600px) {
  body.is-select-day.is-select-seven .spread-overlay-seven {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(255, 250, 246, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  /* JSが生成する行ラッパー（上4・下3）をレンダリングツリーから除去し、
     中身のBOXを親のflex列へ直接連結させる（詳細は上のブロック
     コメント参照）。 */
  body.is-select-day.is-select-seven .spread-overlay-seven-row {
    display: contents;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-box {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(205, 164, 90, 0.5);
    border-radius: 10px;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #4a2f12;
    text-align: center;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-num {
    margin-right: 4px;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-seven .spread-overlay-seven-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ昼版・13枚Premium専用オーバーレイ（2026-09-17
   新規、2026-09-18にstate.generatedPositions連動へ変更）。既存HTML
   （index.html、#select-spread-overlay-thirteen内の
   #spread-overlay-thirteen-list）は、js/main.jsのrenderThirteenCard
   OverlayList()がstate.generatedPositionsをループしてⅠ〜Ⅻを動的生成し、
   ⅩⅢ「総合テーマ」だけは固定文字列として同関数内で生成する（5枚・7枚の
   renderFiveCardOverlayBoxes()/renderSevenCardOverlayBoxes()と同じ
   考え方）。ここより下のCSS（DOM構造・クラス名・見た目）は今回の変更で
   一切触れていない。JS側もshowScreen()内でis-select-thirteen/.is-openを
   切替するだけの、5枚・7枚と全く同じ考え方の分岐で、既存の
   is-select-three/five/seven・spreadOverlay/fiveCardSpreadOverlay/
   sevenCardSpreadOverlayには一切触れていない。

   外枠（position:fixed+inset:0+z-index:200+align-items/justify-content
   center+opacity/pointer-eventsフェード）・backdrop色・パネル背景色
   （rgba(255,250,246,0.62)）・backdrop-filter:blur(6px)・枠線色
   （rgba(205,164,90,0.65)）・box-shadow・×ボタンの外形/色・
   max-height:88vh+overflow-y:auto（内部スクロールの安全策）は、
   3枚/5枚/7枚版スマホ昼版ブロックと同じ値をそのまま複製している
   （新しい色・新しい数値は作っていない）。3枚/5枚/7枚版側のセレクタ・
   ルールは1文字も変更していない。

   13項目を5枚/7枚のような「大きなBOX×13個」にすると画面が非常に
   長くなるため、ここでは薄い罫線で区切っただけのコンパクトな一覧
   （.spread-overlay-thirteen-list、ローマ数字＋役割名の1行形式）に
   している。各行に背景色・パネル的な装飾は付けず、罫線のみで区切る
   ことで「Premiumらしく上品」かつ最小限の高さに収める。ローマ数字
   （.spread-overlay-thirteen-num）は他コースの.spread-overlay-*-numと
   同じvar(--gold-strong)。 */
@media (max-width: 600px) {
  body.is-select-day.is-select-thirteen .spread-overlay-thirteen {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 247, 241, 0.18);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(255, 250, 246, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(74, 47, 18, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(205, 164, 90, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-lead {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #3a2a10;
    text-align: center;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 4px;
    border-bottom: 1px solid rgba(205, 164, 90, 0.22);
    font-size: 0.82rem;
    line-height: 1.4;
    color: #4a2f12;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-list-item--synthesis {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(205, 164, 90, 0.45);
    border-bottom: none;
    font-weight: 600;
    color: #3a2a10;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-num {
    flex: 0 0 auto;
    min-width: 2em;
    font-weight: 700;
    color: var(--gold-strong);
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-label {
    flex: 1 1 auto;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-desc {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #5c4a33;
    text-align: center;
  }

  body.is-select-day.is-select-thirteen .spread-overlay-thirteen-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #3a2a10;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ夜版・13枚Premium専用オーバーレイ（2026-09-18
   新規）。スマホ昼版（body.is-select-day.is-select-thirteen、上の
   ブロック）に正式採用済みの構造・文言・並び順・レイアウト値
   （position/width/max-width/max-height/overflow-y/-webkit-overflow-
   scrolling/padding/border-radius/font-size/line-height/gap等）は
   一切変更せず、そのまま複製する。HTML（#select-spread-overlay-
   thirteen、index.html）・JS（js/main.jsのrenderThirteenCardOverlay
   List()、is-select-thirteen/.is-open切替ロジック）はPC/スマホ・
   昼夜共通で既に動作しているため、今回変更していない。

   配色について：調査の結果、3枚/5枚/7枚コースの説明オーバーレイも
   含め、スマホ夜版専用の色分けは現時点でこのプロジェクトに存在
   しなかった（PC夜版側にのみ、body:not(.is-select-day).is-select-
   three等の夜版パレットが存在する）。そのため、新しい色を作らず、
   このプロジェクト全体で「夜版オーバーレイ」として繰り返し使われて
   いる既存パレット（PC夜版の3枚/5枚/7枚/13枚コース説明オーバーレイ、
   FAQ夜版・利用規約夜版等の各パネルと共通の値）をそのまま転用する。
   - backdrop: rgba(8, 6, 24, 0.32)
   - パネル: background rgba(24, 18, 55, 0.72) / border rgba(217, 173,
     85, 0.62)
   - ×ボタン: color #e3b85c / background rgba(24, 18, 55, 0.85) /
     border rgba(217, 173, 85, 0.65)
   - 見出し（lead）: #eee8f5
   - 一覧の各行（list-item）: #d6cee4、区切り線 rgba(217, 173, 85,
     0.28)
   - ⅩⅢ「総合テーマ」の行（list-item--synthesis）: #eee8f5、上側の
     区切り線 rgba(217, 173, 85, 0.45)
   - ローマ数字（num）: #e3b85c
   - 補足文（desc）: #d6cee4
   - 注記（note）: #e8e1f1

   3枚/5枚/7枚のスマホ昼夜オーバーレイ・PC昼夜13枚オーバーレイ・
   スマホ夜版背景・正式TAROTロゴ・「タロット占い」・「直感で13枚
   選んでください」・その下の説明文・「選択済み 0 / 13」・78枚の
   カード配置/サイズ/gap/card-table位置/カード裏面画像/選択番号
   表示/13枚選択ロジック/占うボタン/スクロールには一切触れていない。 */
@media (max-width: 600px) {
  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(24, 18, 55, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-lead {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 4px;
    border-bottom: 1px solid rgba(217, 173, 85, 0.28);
    font-size: 0.82rem;
    line-height: 1.4;
    color: #d6cee4;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-list-item--synthesis {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(217, 173, 85, 0.45);
    border-bottom: none;
    font-weight: 600;
    color: #eee8f5;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-num {
    flex: 0 0 auto;
    min-width: 2em;
    font-weight: 700;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-label {
    flex: 1 1 auto;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-desc {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-thirteen .spread-overlay-thirteen-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ夜版・3枚コース専用オーバーレイ（2026-09-18
   新規）。スマホ昼版（body.is-select-day.is-select-three、正式採用
   済み）に正式採用済みの構造・文言・並び順・レイアウト値
   （position/width/max-width/max-height/overflow-y/-webkit-overflow-
   scrolling/padding/border-radius/font-size/line-height/gap/縦積み
   のboxes等）は一切変更せず、そのまま複製する。HTML
   （#select-spread-overlay、index.html）・JS（is-select-three/
   .is-open切替ロジック）はPC/スマホ・昼夜共通で既に動作しているため、
   今回変更していない。

   配色について：新しい色は作らず、このプロジェクトに既に存在する
   夜版オーバーレイの正式パレットをそのまま転用する。具体的には
   PC夜版の3枚コース説明オーバーレイ（body:not(.is-select-day)
   .is-select-three .spread-overlay-*）で使われている値と、直前に
   追加したスマホ夜版13枚オーバーレイ（上のブロック）で使われている
   値が完全に一致していることを確認したうえで、その値を採用した。
   - backdrop: rgba(8, 6, 24, 0.32)
   - パネル: background rgba(24, 18, 55, 0.72) / border rgba(217, 173,
     85, 0.62)
   - ×ボタン: color #e3b85c / background rgba(24, 18, 55, 0.85) /
     border rgba(217, 173, 85, 0.65)
   - 見出し（lead）: #eee8f5
   - 各box: background rgba(40, 30, 75, 0.35) / border rgba(217, 173,
     85, 0.35)
   - box見出し（box-title）: #eee8f5
   - ローマ数字（num）: #e3b85c
   - box説明文（box-desc）: #d6cee4
   - 注記（note）: #e8e1f1

   5枚/7枚/13枚のスマホ昼夜オーバーレイ・PC昼夜3枚オーバーレイ・
   スマホ夜版背景・正式TAROTロゴ・「タロット占い」・「直感で3枚
   選んでください」・その下の説明文・「選択済み 0 / 3」・78枚の
   カード配置/サイズ/gap/card-table位置/カード裏面画像/選択番号
   表示/3枚選択ロジック/占うボタン/スクロールには一切触れていない。 */
@media (max-width: 600px) {
  body:not(.is-select-day).is-select-three .spread-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-three .spread-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-three .spread-overlay-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(24, 18, 55, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
  }

  body:not(.is-select-day).is-select-three .spread-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-box {
    padding: 10px 12px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 10px;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-num {
    margin-right: 4px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-three .spread-overlay-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ夜版・5枚コース専用オーバーレイ（2026-09-18
   新規）。スマホ昼版（body.is-select-day.is-select-five、正式採用
   済み）に正式採用済みの構造・表示タイミング・レイアウト値
   （position/width/max-width/max-height/overflow-y/-webkit-overflow-
   scrolling/padding/border-radius/font-size/line-height/gap/縦積み
   のboxes等）は一切変更せず、そのまま複製する。

   中身（Ⅰ〜Ⅴの見出し・説明文）はHTML固定文言ではなく、js/main.jsの
   renderFiveCardOverlayBoxes()がstate.generatedPositions（spreadId
   により GENERAL_5/RELATIONSHIP_5/DECISION_5 のいずれかを動的選択、
   js/dynamicPositions.js）をループして#spread-overlay-five-boxesへ
   DOM生成する仕組みで、PC/スマホ・昼夜共通で既に動作している。この
   関数・#select-spread-overlay-five（index.html）・is-select-five/
   .is-open切替ロジックは今回変更していない。

   配色について：新しい色は作らず、既存の夜版オーバーレイの正式
   パレットをそのまま転用する。PC夜版5枚コースオーバーレイ
   （body:not(.is-select-day).is-select-five .spread-overlay-five-*、
   5461〜5571行目）と、直前に追加したスマホ夜版3枚/13枚オーバーレイの
   値が完全に一致していることを確認したうえで採用した。
   - backdrop: rgba(8, 6, 24, 0.32)
   - パネル: background rgba(24, 18, 55, 0.72) / border rgba(217, 173,
     85, 0.62)
   - ×ボタン: color #e3b85c / background rgba(24, 18, 55, 0.85) /
     border rgba(217, 173, 85, 0.65)
   - 見出し（lead）: #eee8f5
   - 各box: background rgba(40, 30, 75, 0.35) / border rgba(217, 173,
     85, 0.35)
   - box見出し（box-title）: #eee8f5
   - ローマ数字（num）: #e3b85c
   - box説明文（box-desc）: #d6cee4
   - 注記（note）: #e8e1f1

   3枚/7枚/13枚のスマホ昼夜オーバーレイ・PC昼夜5枚オーバーレイ・
   スマホ夜版背景・正式TAROTロゴ・「タロット占い」・「直感で5枚
   選んでください」・その下の説明文・「選択済み 0 / 5」・78枚の
   カード配置/サイズ/gap/card-table位置/カード裏面画像/選択番号
   表示/5枚選択ロジック/占うボタン/スクロールには一切触れていない。 */
@media (max-width: 600px) {
  body:not(.is-select-day).is-select-five .spread-overlay-five {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(24, 18, 55, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box {
    padding: 10px 12px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 10px;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-num {
    margin-right: 4px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-five .spread-overlay-five-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 スマホ夜版・7枚コース専用オーバーレイ（2026-09-18
   新規）。スマホ昼版（body.is-select-day.is-select-seven、正式採用
   済み）に正式採用済みの構造・表示タイミング・レイアウト値
   （position/width/max-width/max-height/overflow-y/-webkit-overflow-
   scrolling/padding/border-radius/font-size/line-height/gap/縦積み
   のboxes等）は一切変更せず、そのまま複製する。

   中身（Ⅰ〜Ⅶの見出し・説明文）はHTML固定文言ではなく、js/main.jsの
   renderSevenCardOverlayBoxes()がstate.generatedPositions（spreadId
   により HORSESHOE_7/RELATIONSHIP_7 のいずれかを動的選択、
   js/dynamicPositions.js）をループして#spread-overlay-seven-boxesへ
   DOM生成する仕組みで、PC/スマホ・昼夜共通で既に動作している。JSは
   PC向けの「上段4・下段3」用に.spread-overlay-seven-row（行ラッパー）
   を生成するが、スマホ昼版はこのrowを`display:contents;`で
   レンダリングツリーから消し、中身のBOXを.spread-overlay-seven-boxesの
   flex列へ直接連結させることでⅠ〜Ⅶの縦1列を実現している（詳細は
   上のスマホ昼版ブロックのコメント参照）。この考え方を夜版でも
   そのまま踏襲する。renderSevenCardOverlayBoxes()・
   #select-spread-overlay-seven（index.html）・is-select-seven/
   .is-open切替ロジックは今回変更していない。

   配色について：新しい色は作らず、既存の夜版オーバーレイの正式
   パレットをそのまま転用する。PC夜版7枚コースオーバーレイ
   （body:not(.is-select-day).is-select-seven .spread-overlay-seven-*、
   5733〜5847行目）と、既に実装済みのスマホ夜版3枚/5枚/13枚オーバーレイの
   値が完全に一致していることを確認したうえで採用した。
   - backdrop: rgba(8, 6, 24, 0.32)
   - パネル: background rgba(24, 18, 55, 0.72) / border rgba(217, 173,
     85, 0.62)
   - ×ボタン: color #e3b85c / background rgba(24, 18, 55, 0.85) /
     border rgba(217, 173, 85, 0.65)
   - 見出し（lead）: #eee8f5
   - 各box: background rgba(40, 30, 75, 0.35) / border rgba(217, 173,
     85, 0.35)
   - box見出し（box-title）: #eee8f5
   - ローマ数字（num）: #e3b85c
   - box説明文（box-desc）: #d6cee4
   - 注記（note）: #e8e1f1

   3枚/5枚/13枚のスマホ昼夜オーバーレイ・PC昼夜7枚オーバーレイ・
   スマホ夜版背景・正式TAROTロゴ・「タロット占い」・「直感で7枚
   選んでください」・その下の説明文・「選択済み 0 / 7」・78枚の
   カード配置/サイズ/gap/card-table位置/カード裏面画像/選択番号
   表示/7枚選択ロジック/占うボタン/スクロールには一切触れていない。 */
@media (max-width: 600px) {
  body:not(.is-select-day).is-select-seven .spread-overlay-seven {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 24, 0.32);
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-panel {
    position: relative;
    width: calc(100vw - 40px);
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 16px;
    background: rgba(24, 18, 55, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(217, 173, 85, 0.62);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(5, 3, 18, 0.4), inset 0 0 0 1px rgba(227, 192, 122, 0.12);
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #e3b85c;
    background: rgba(24, 18, 55, 0.85);
    border: 1px solid rgba(217, 173, 85, 0.65);
    border-radius: 50%;
    cursor: pointer;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-lead {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-boxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
  }

  /* JSが生成する行ラッパー（上4・下3）をレンダリングツリーから除去し、
     中身のBOXを親のflex列へ直接連結させる（スマホ昼版ブロックと同じ
     考え方）。 */
  body:not(.is-select-day).is-select-seven .spread-overlay-seven-row {
    display: contents;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box {
    padding: 10px 12px;
    background: rgba(40, 30, 75, 0.35);
    border: 1px solid rgba(217, 173, 85, 0.35);
    border-radius: 10px;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box-title {
    margin: 0 0 3px;
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 600;
    color: #eee8f5;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-num {
    margin-right: 4px;
    color: #e3b85c;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-box-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #d6cee4;
    text-align: center;
  }

  body:not(.is-select-day).is-select-seven .spread-overlay-seven-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #e8e1f1;
    text-align: center;
  }
}

/* =========================================================
   カード選択画面 夜版スマホ対応（レイアウト骨格のみ、max-width:600px、
   body:not(.is-select-day)限定）。昼版（上記body.is-select-dayブロック）
   の.card-row/.card-grid/.card-table構造をそのまま移植し、78枚を
   「6列×13段」へ整列させ、.card-tableの濃紺パネルを無効化する。
   カード裏画像・aspect-ratio・背景画像・#app/.app-header周りは今回
   変更しない（レイアウト骨格のみの対応）。PC版（@media min-width:601px）・
   スマホ昼版（body.is-select-day）には一切影響しない。 */
@media (max-width: 600px) {
  /* 背景（縦長1枚版・#app側へ移動）: .app-header（DEV表示・TAROT・
     参加型タロット占い）は#screen-selectの外側の兄弟要素のため、
     #screen-select自身に背景を置いても.app-headerの背後には届かない。
     選択画面がアクティブな時だけ#app側（padding部分も含めて描画される
     ため、.app-headerの背後にも届く）へ背景を移し、#screen-select自身の
     背景はnoneにして二重に乗らないようにする。
     :has(#screen-select.active)で「今まさに選択画面がアクティブ」を
     限定し、他画面（入力・カード開示等）には一切影響しない（PC夜版で
     採用済みの:has()パターンと同じ考え方）。
     背景の高さは、#screen-select基準で下端まで届いていた値（auto
     1600px）に、#appのpadding-top(28px)+.app-header(約97px)ぶんの
     125pxを積み増し、auto 1750pxにしている。
     repeat-yは使わず、night-card-selection-bg-tall.pngの1枚のみ。
     画像そのものへの加工は行っていない。 */
  body:not(.is-select-day):has(#screen-select.active) #app {
    background-image:
      url("../assets/input/mobile/night-card-selection-bg-tall.png"),
      linear-gradient(180deg, #230e19 0%, #241a45 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, top center;
    background-size: auto 1750px, 100% 100%;
  }

  body:not(.is-select-day) #screen-select {
    background-image: none;
  }

  /* TAROTロゴ画像化（2026-09-18、スマホ夜版カード選択画面限定）。
     文字「TAROT」はCSSで描画されていた（.brand-mark、60〜66行目、
     letter-spacing:0.5emで文字間を広げているだけの通常テキスト）。
     スマホ昼版カード開示/結果画面（body.is-open-day/is-result-day
     .app-header .brand-mark、1112/1637行目付近）・PC各画面で正式
     採用済みの画像置換と全く同じ手法・全く同じスマホ向け軽量素材
     （assets/input/day-open-tarot-logo-mobile.png、312×104px・
     約21.8KB、新規生成なし）を使用する。height:30pxもこれらの
     既存実装と同じ値のまま（現在のテキスト表示と概ね同等の視覚
     サイズを維持する、新しいサイズは作らない）。
     :has(#screen-select.active)で「今まさにカード選択画面が
     アクティブ」な場合に限定し、.app-headerを共有する他画面
     （カード開示・鑑定結果等）には一切影響しない（4606行目付近の
     PC夜版.app-header非表示ルールと同じ考え方のスコープ設計）。
     「タロット占い」（.app-header h1）・78枚のカード配置/サイズ/gap/
     背景画像/位置/選択ロジックには一切触れていない。 */
  body:not(.is-select-day):has(#screen-select.active) .app-header .brand-mark {
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 「占う」ボタンを通常フローから外し、選択済み表示とcard-table
     （margin-top:115px）の間に既に存在する空白（約115px幅）の中へ
     絶対配置する。position:relativeは基準点を作るだけで見た目には
     影響しない。card-tableのmargin-top・カード群の位置は変更しない。 */
  body:not(.is-select-day) #screen-select {
    position: relative;
  }

  body:not(.is-select-day) #select-fortune-button {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    /* 小型化: .primary-button共通のwidth:100%/max-width:320px/padding:14px 28px
       （高さ約56px）だと大きすぎるため、幅・paddingだけ縮小する。
       背景グラデーション・文字色・角丸・box-shadow等の見た目は
       .primary-button共通ルールをそのまま継承する（上書きしない）。 */
    width: 230px;
    max-width: 230px;
    padding: 10px 28px;
  }

  body:not(.is-select-day) .card-row {
    display: contents;
  }

  body:not(.is-select-day) .card-grid {
    display: grid;
    grid-template-columns: repeat(6, 46px);
    justify-content: center;
    column-gap: 6px;
    row-gap: 6px;
    max-height: none;
    overflow-y: visible;
  }

  body:not(.is-select-day) .card-grid .card {
    width: 46px;
    margin: 0;
    background-image: url("../assets/cards/night-card-back-mobile.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 新画像の中央エンブレムと、既存CSS描画の光る点(::after)が重なって
     見えるため、スマホ夜版だけ::afterを非表示にする（PC夜版で採用済みの
     対策と同じ考え方）。 */
  body:not(.is-select-day) .card-grid .card::after {
    display: none;
  }

  body:not(.is-select-day) .card-table {
    background: none;
    border: none;
    box-shadow: none;
    margin-top: 58px;
  }
}

/* =========================================================
   相談入力画面 昼版スマホ対応（max-width:600px、body.is-input-day限定）。
   上記PC版（@media min-width:601px）の各ルールは1行も変更しない。
   夜版（is-input-dayが付かない場合）にも一切影響しない
   （すべてのセレクタがbody.is-input-dayを起点にしているため）。

   方針転換（旧: ヒーロー100vh＋その下に縦積みflowで意図的に縦スクロール
   させる2段構成 → 新: 完成済みスマホ夜版と同じ「1画面完結」構成）。
   実機確認の結果、旧構成はページ全体が100vhを超えて常に縦スクロールが
   発生しており、夜版（下のブロック、body.is-input-active:not(.is-input-day)）
   側で既に採用済みの「height:100dvh + overflow-y:hidden + 入力欄以降も
   すべてposition:absoluteで画面内に収める」という構造をそのまま昼版にも
   適用する。夜版の位置の数値（top/bottom）は単純コピーせず、
   day-consultation-bg.png固有の構図（上部に窓と本棚、中央に丸テーブル、
   下部に紫色の裏向きカード7枚）に合わせて個別に調整している。 */
@media (max-width: 600px) {
  /* 1画面完結化: 夜版（body.is-input-active:not(.is-input-day)、下の
     ブロック）と同じ考え方で、height:100dvh（Safari上下UI追従。
     100dvh非対応環境向けに100vhを先に指定するフォールバック順は維持）＋
     overflow-y:hiddenにし、縦スクロールを物理的に発生させない。
     背景画像はスマホ専用の軽量版（assets/input/mobile/
     day-consultation-bg.png、900×556・約1.39MB。元のday-consultation-
     bg.png(1595×986・約2.74MB)を単純リサイズしたのみで、世界観・色・
     構図の変更や新規生成は行っていない）に差し替える。PC版
     （@media min-width:601pxの各ルール）は元画像のまま変更しない。
     background-position（横58%・縦50%）は、コンテナが縦長のため
     background-size:coverではほぼ高さいっぱいに画像が伸び、横方向だけが
     大きくクロップされる（実機での見え方は端末により多少異なる）。
     横58%は、実測した画像内の構図（窓は右寄り約55〜100%幅、丸テーブル・
     カード列は中央付近約25〜75%幅）を踏まえ、右側の窓の一部と、中央〜
     やや右寄りのカード列の大部分が同時に収まるよう選んだ値。縦は
     coverによる縦方向の余剰がほぼ無いため50%のままでも実質全域
     （窓→テーブル→カード）が上から順に表示される。 */
  body.is-input-day #screen-input {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: url("../assets/input/mobile/day-consultation-bg.png");
    background-size: cover;
    background-position: 58% 50%;
    background-repeat: no-repeat;
    padding: 18px 16px 0;
  }

  /* #appの共通スマホpadding（28px 10px 48px、常時適用）が#screen-input
     （100dvh固定）の外側に上下ぶんの余白を残し、それだけでページ全体が
     100dvhを超えて縦スクロールが発生してしまうため、夜版・PC版が
     既に行っているのと同じ考え方でpaddingを0にする。 */
  body.is-input-day #app {
    padding: 0;
  }

  /* #screen-inputが常に画面全体を覆うため、実際にはほぼ表示されない
     想定の保険用フォールバック（万一の1px単位の丸め誤差対策。夜版の
     同種フォールバックと同じ考え方）。昼版の世界観に合わせた淡い
     ラベンダー系のまま維持。 */
  body.is-input-day {
    background: linear-gradient(180deg, #f4edfb 0%, #ede1f6 100%);
  }

  /* 共通ヘッダー（「TAROT」「参加型タロット占い」）を隠す処理は、
     これまでPC限定（min-width:601px）でしか行われておらず、スマホでは
     常に表示されたままだった。今回スマホ昼版に専用ヘッダー（戻る/
     TAROTブランド/LOGIN）を実装したため、隠さないとTAROTブランドが
     二重表示され、ヒーロー高さの計算もずれる。is-input-day・スマホ
     限定でのみ隠す（PC版の既存挙動・夜版・トップ画面には影響しない）。 */
  body.is-input-day .app-header {
    display: none;
  }

  /* 「トップへ戻る」：PC版の絶対配置ではなく、画面最上部の独立した行として
     表示する。見た目（ピル型・ゴールド枠・昼版の配色）はPC版を踏襲。 */
  body.is-input-day #screen-input .input-back-button {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 14px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #180f2b;
    background: rgba(250, 246, 255, 0.85);
    border: 1px solid rgba(227, 192, 122, 0.6);
    border-radius: 999px;
  }

  /* 「← トップへ戻る」非表示（2026-09-15）。スマホ昼版限定で
     display:noneにする。HTML（#back-to-top-button）は削除しない
     （PC昼版・PC夜版では引き続き表示するため）。上のブロック
     （position:static、margin:0 0 14px）は値ごと残したまま、後続の
     このルールだけがcascadeで上書きしてdisplay:noneにする。この
     ボタンはposition:staticで通常のdocumentフローに乗るが、
     TAROLUNE/LOGIN/中央TAROTロゴ/中央見出し/コースUI/相談入力欄/
     占いを始めるボタン/エラーメッセージ/下部カード/注意書きは全て
     position:absoluteで個別のtop/bottom値により独立配置されている
     （2026-09-15付CLAUDE.md「スマホ昼版・相談入力画面 正式採用・固定」
     参照）ため、このボタンを消してもそれらのフロー上の詰め・再配置は
     発生しない。 */
  body.is-input-day #screen-input .input-back-button {
    display: none;
  }

  /* ヘッダー：PC版の横長ナビ（4項目）は400px幅に収まらないため非表示にし、
     TAROTブランドとLOGINだけを1行に収める。 */
  body.is-input-day #screen-input .input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 134, 63, 0.35);
  }

  body.is-input-day #screen-input .input-header-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  body.is-input-day #screen-input .input-header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  body.is-input-day #screen-input .input-header-moon,
  body.is-input-day #screen-input .input-header-brand-main {
    color: #b8863f;
  }

  /* スマホ昼版相談入力画面限定（2026-09-15追加）: 左上ブランド表記の
     「TAROT」を「TAROLUNE」へ変更する。PC昼版（body.is-input-day
     #screen-input .input-header-brand-main、3270〜3281行目付近）・
     PC夜版（body.is-input-active:not(.is-input-day) #screen-input
     .input-header-brand-main、3005〜3016行目付近）で既に採用済みの
     TAROLUNE表示方式（font-size:0で元のテキストを見た目上ゼロ幅にし、
     ::afterで文字を表示する）をそのまま踏襲する。HTML側のテキスト
     「TAROT」自体は変更しない（PC版は引き続きこの文字を使って
     TAROLUNE表示しているため。スマホ夜版も現時点ではこの文字を
     そのまま表示する実装のまま変更しない）。
     font-size(0.85rem)・letter-spacing(0.2em)は、変更前このブロックが
     .input-header-brand-mainへ直接指定していた値をそのまま::afterへ
     移し、表示サイズ・字間を変更していない。colorも直上の
     #b8863f指定を::afterでも明示的に同じ値で指定し（値は変更なし）、
     位置・左の三日月装飾（.input-header-moon）・CHOOSE YOUR CARD
     （.input-header-brand-sub）・余白・背景・PC版・スマホ夜版・
     他画面には一切触れていない。 */
  body.is-input-day #screen-input .input-header-brand-main {
    font-size: 0;
  }

  body.is-input-day #screen-input .input-header-brand-main::after {
    content: 'TAROLUNE';
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: #b8863f;
  }

  body.is-input-day #screen-input .input-header-brand-sub {
    color: #180f2b;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  /* ナビ4項目（今日の運勢/タロット占いとは/使い方/私たちについて）は
     幅に収まらないため非表示。LOGINだけ.input-header-nav内に残す。 */
  body.is-input-day #screen-input .input-nav-link {
    display: none;
  }

  /* LOGINボタンの位置調整（2026-09-15）。従来はheader行
     （.input-header、justify-content:space-between）内の.input-header-nav
     の一部としてフロー配置され、「← トップへ戻る」の行（.input-back-button、
     position:static、#screen-inputのpadding-top:18px基準）より1段下の
     header行に収まっていたため、画面右端から見て少し内側・下側に見えて
     いた。#screen-input（position:relative、上記）を基準にposition:
     absoluteへ変更し、「← トップへ戻る」と同じ上部エリア内・画面右上へ
     移動する。
     right:16pxは#screen-inputのpadding-left/right（16px、上記STEP0）と
     同じ値を使い、左の「← トップへ戻る」の左インセットと左右対称になる
     よう揃えている（新しい余白値は作っていない）。
     top:30pxは、開発者バッジ（.dev-badge、position:fixed、top:6px/
     right:8px、このLOGINボタンと同じ画面右側）の実際の高さ（padding
     3px×2+font-size:0.62remの行の高さ ≒ 18px、bottom付近は約6+18=24px）
     に、視認しやすい余白を足して算出した値で、「← トップへ戻る」の
     行の高さ（#screen-inputのpadding-top:18px〜おおよそ45px）の範囲内に
     収まる。DEV表示と重ならず、かつ「← トップへ戻る」と同じ上部の帯の
     中に収まる位置として設定した。
     display/padding/font-size/border-radius/white-spaceは変更しない。
     colorとborderは、この直後の配色統一（2026-09-15追加）で変更して
     いる。.input-header・.input-header-nav・.input-header-brand・
     .input-nav-link・#input-back-button・PC版・スマホ夜版には
     一切触れていない。

     配色統一（2026-09-15追加）: 背景がほぼ透明＋細いゴールド枠のため
     背景画像に溶けて見えづらかったのを、スマホ昼版TOPページで正式
     採用済みのLOGINボタン配色（body.is-top-active:not(.is-top-night)
     .top-login-button-mobile、下記のTOP画面用@media(max-width:600px)
     ブロック内）とそのまま同じ値に揃える。TOP側の実際の配色値：color:#211b46、
     background:rgba(255, 252, 245, 0.55)、border-colorのみ
     var(--top-gold-strong)への上書き（border自体の幅・スタイルは
     共通ルールの1px solidのまま）。この画面でも同じ値をそのまま使用し、
     新しい色は作っていない。position/top/right・display/padding/
     font-size/border-radius/white-spaceは変更していない。 */
  body.is-input-day #screen-input .input-login-badge {
    position: absolute;
    top: 30px;
    right: 16px;
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.6rem;
    color: #211b46;
    background: rgba(255, 252, 245, 0.55);
    border: 1px solid var(--top-gold-strong);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* 「✦TAROT✦」とタグライン（恋愛について／あなたの運勢を占います）は、
     引き続き背景画像のカード列の上に重なるよう位置(top)は据え置きに
     近い値を維持しつつ、下の入力欄・ボタン・注意書きを1画面内へ収める
     余白を確保するため、旧76%/82%よりやや上（カード列の始まり付近）に
     詰めている。
     中央「TAROT」ロゴ画像化（2026-09-15）: 従来の文字装飾（プレーン
     セリフ体・色#b8863f・text-shadow等）を、スマホ昼版TOPページの中央
     ロゴ（body.is-top-active:not(.is-top-night) .top-hero-mark、
     下記のTOP画面用@media(max-width:600px)ブロック内）で正式採用済みの
     画像置換方式へ統一する。TOP側が使っている軽量版素材
     assets/input/day-open-tarot-logo-mobile.png（TOP用に156×52px表示
     向けに書き出し済みの312×104px・約21.8KB、元画像day-open-tarot-
     logo.png=2172×724px・約694.5KBの2倍解像度版）をそのまま再利用し、
     新しい画像は作っていない。
     表示サイズは、TOP側の156×52pxではなく、PC版の.input-tarot-mark
     （body.is-input-day #screen-input .input-tarot-mark、@media
     min-width:601px側、2718行目付近）で既に採用済みのwidth:90px・
     height:30px（ロゴの縦横比3:1を維持）をそのまま流用し、現在この
     見出しが占めていた領域に近いサイズに収める。新しい寸法は作って
     いない。
     text-indent:-9999px+overflow:hiddenで元のテキスト「✦ TAROT ✦」
     （✦記号ごと同じテキストノード）を画面外へ隠す方式も、PC版
     .input-tarot-markと全く同じ技術を踏襲する（TOP画面正式ロゴ自体には
     ✦装飾は含まれておらず、TOP画面側でも左右の✦は別要素
     .top-hero-sparkle-left/rightとして重ねているのみのため、画像に
     ✦を焼き込む処理は行わない。✦記号自体が文字ごと画面外へ隠れるため、
     独自CSSの✦との重複は発生しない）。
     position/top/left/transform/marginはPC版・変更前と同じ値のまま
     維持しており、見出し以下（.screen-tagline以降）の縦位置には一切
     影響しない。

     縦位置調整（2026-09-15）: ロゴ画像化後、実機で下の.screen-tagline
     （直後のブロック、top:16.5%・line-height:1.4・font-size:1.1rem＝
     スマホ共通2333行目付近）の1行目と重なっていたため、top値だけを
     14%→11%へ引き上げる。ロゴの高さは固定30px（%指定ではない）のため、
     ビューポート高さ(H)ごとに実際の重なり量が変わる。代表的なスマホの
     表示高さH=800pxで計算すると、.screen-taglineの上端は16.5%×800=
     132px。ロゴ上端top:14%は14%×800=112px、下端は112+30=142pxとなり、
     タグライン上端132pxを10px超えて重なっていた（H=700pxでは
     ロゴ下端98+30=128px、タグライン上端115.5pxで12.5px重なる、
     というように高さが低い機種ほど重なりが大きくなる）。
     top:11%に変更すると、H=800pxでロゴ上端88px・下端118px、タグライン
     上端132pxとの間隔14.5px。H=700pxでもロゴ上端77px・下端107px、
     タグライン上端115.5pxとの間隔8.5px。H=650pxでもロゴ下端101.5px、
     タグライン上端107.25pxとの間隔5.75pxを確保でき、一般的なスマホの
     表示高さの範囲で重なりを解消しつつ、離れすぎない間隔になる。
     width:90px/height:30px・left:50%/transform:translateX(-50%)・
     画像素材・.screen-taglineの位置は変更していない。 */
  /* 実機確認後の微調整（2026-09-17）。TAROT見出し〜13枚Premiumボタン
     までの一団を、相対関係・間隔を維持したままH=800想定で約10px
     まとめて上へ移動する（第3段階）。top:8.5%→7.25%。ロゴと直下の
     .screen-taglineとの間隔（従来の差分5.5%）はそのまま維持している
     （7.25%→12.75%）。サイズ・画像・色は変更していない。 */
  body.is-input-day #screen-input .input-tarot-mark {
    position: absolute;
    top: 7.25%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 90px;
    height: 30px;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 実機確認後の微調整（2026-09-17）。TAROT見出し〜13枚Premiumボタン
     までの一団を、相対関係・間隔を維持したままH=800想定で約10px
     まとめて上へ移動する（第3段階）。top:14%→12.75%。ロゴとの間隔
     5.5%は維持。文字色・フォント・line-height・幅は変更していない。 */
  body.is-input-day #screen-input .screen-tagline {
    position: absolute;
    top: 12.75%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 88%;
    color: #180f2b;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
  }

  /* 正式デザイン確定分: 案内文「心の中にある問いを、ひとつだけ聞かせて
     ください。」はスマホ昼版だけ非表示にする。PC版・夜版のCSSには
     一切触れていないため、両方とも現状のまま表示される。 */
  body.is-input-day #screen-input .input-guidance {
    display: none;
  }

  /* 1画面完結化: 相談入力欄・ボタン・注意書きを、夜版と同じ考え方で
     #screen-input（100dvh固定）の内側にposition:absoluteで収める。
     top/bottomの両方を指定してその間を自動計算の高さにする方式
     （固定pxの高さにすると端末差でずれる、という夜版で判明済みの問題を
     同様に回避するため）。day-consultation-bg.pngは下部（カード列より
     下）に余白の少ない構図のため、夜版ほど広い間隔は取れず、値は夜版の
     ものを流用せず個別に詰めている。配色（淡いラベンダー半透明パネル・
     濃い紫の文字）はPC昼版・旧スマホ昼版と同じものを維持する。 */
  /* 将来の13枚コース追加に向けた縦スペース再配分・第2段階
     （2026-09-17）。第1段階のtop:43.25%・bottom:+237pxから、それぞれ
     H=800想定でさらに約10pxぶん下へ平行移動させている（top:43.25%→
     44.5%・bottom:+237px→+227px）。top/bottom差分から決まる高さは
     変えていない（H=800で従来217px→新217px、計算上ほぼ同一）。
     padding・背景・枠線・角丸・幅は変更していない。第2段階のため今後
     さらに調整する可能性がある。 */
  body.is-input-day #screen-input #consultation-input {
    position: absolute;
    left: 50%;
    top: 44.5%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 227px);
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
    resize: none;
    /* 右下に重ねる文字数カウンター（.input-char-count）と入力文字が
       重ならないよう、下側だけpaddingを広げる（横・上は既存のまま）。 */
    padding: 14px 14px 24px;
    background: rgba(233, 220, 245, 0.72);
    color: #241c38;
    border: 1px solid rgba(184, 134, 63, 0.75);
    border-radius: 12px;
  }

  body.is-input-day #screen-input #consultation-input::placeholder {
    color: rgba(94, 79, 122, 0.85);
  }

  /* 文字数カウンター（「0 / 1000」）。新しい縦方向のスペースは使わず、
     textarea自体（top:49%〜bottom:280px+safe、width:84%・中央寄せ）の
     右下隅に重ねて表示する。textarea側のright端はleft:50%+width:84%を
     transform:translateX(-50%)で中央寄せしているため、画面右端から8%の
     位置に一致する。そこから内側へ少し余白を取った位置に配置する。
     input要素ではなくp要素（aria-hidden、視覚的な補助表示のみ。文字数
     上限自体はtextareaのmaxlength属性がネイティブに強制する）。 */
  /* 将来の13枚コース追加に向けた縦スペース再配分・第2段階
     （2026-09-17）。#consultation-inputのbottomを237px→227pxへさらに
     10px動かしたのに合わせて、textarea右下隅に重ねる文字数カウンターも
     同じ10px分（253px→243px）追従させ、textareaとの相対位置
     （bottom+16px相当）を維持している（文字サイズ・色は変更なし）。 */
  body.is-input-day #screen-input #consultation-char-count {
    display: block;
    position: absolute;
    right: calc(8% + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 243px);
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: rgba(36, 28, 56, 0.55);
    pointer-events: none;
  }

  /* 「占いを始める」ボタン：既存の.primary-button（ゴールド系グラデー
     ション）はそのまま使い、画面下端からのbottom基準で固定する
     （夜版と同じ考え方）。配色は追加しない。 */
  /* 将来の13枚コース追加に向けた縦スペース再配分・第2段階
     （2026-09-17）。第1段階のbottom:+163pxから、H=800想定でさらに
     約10px下へ（+163px→+153px）。#input-error/#course-preview-error
     （bottom+128px、変更なし）・.input-card-note（bottom+54px、
     変更なし）との間隔は、それぞれさらに縮まるが重ならないことを
     計算で確認済み（作業報告を参照）。ボタン自体のサイズ・色・幅は
     変更していない。第2段階のため今後さらに調整する可能性がある。 */
  body.is-input-day #screen-input #start-button {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 153px);
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
  }

  /* 「相談内容を入力してください。」エラー（#input-error）。共通スタイル
     （.error-text、position指定なし＝通常のdocumentフロー）のままだと、
     #screen-input（STEP0でheight:100dvh + overflow-y:hiddenに固定済み）
     内で.input-header直後の通常フロー位置に押し出され、実機では見えない
     状態になっていた（PC版で以前修正したのと同じ種類の不具合。PC版は
     #screen-input #input-error、@media min-width:601px側でposition:
     absolute化して解決済み）。同じ考え方でposition:absoluteにしてフロー
     から外し、#start-button（bottom:calc(safe+173px)）と
     .input-card-note（bottom:calc(safe+54px)）の間の余白に配置する。
     color:#8f304f・font-weight:600は、PC昼版の#input-error
     （body.is-input-day #screen-input #input-error、@media
     min-width:601px側）で既に採用済みの値をそのまま使用し、新しい色は
     作らない。font-size・text-alignは.error-text（共通スタイル）の値の
     まま変更しない。#consultation-input・#start-button・
     .input-card-note・背景画像・3枚/5枚/7枚コースUIの位置サイズには
     一切触れない。エラー判定ロジック（js/main.js onStart()）・文言も
     変更しない。 */
  body.is-input-day #screen-input #input-error {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    color: #8f304f;
    font-weight: 600;
  }

  /* 最下部の注意書き：画面下端からのbottom基準で固定し、1画面内に常に
     収める。iPhoneのホームインジケーター等と重ならないよう
     env(safe-area-inset-bottom)を足す（夜版と同じ考え方）。 */
  body.is-input-day #screen-input .input-card-note {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
    transform: translateX(-50%);
    margin: 0;
    width: 92%;
    color: #1b1430;
    font-weight: 600;
    font-size: 0.68rem;
    text-align: center;
    /* 視認性の見直し: 1画面完結化以降、注意書きも写真の上に直接重なる
       ようになったため、テーマ文言と同じ考え方の控えめな白系影を追加した
       （色・太さ・位置は変更しない）。 */
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
  }
}

/* =========================================================
   相談入力画面 夜版スマホ対応（max-width:600px、body.is-input-active
   かつ body.is-input-day が付いていない＝夜版のときだけ限定）。
   上記スマホ昼版ブロック（body.is-input-day）は1行も変更しない。
   PC版（@media min-width:601px）にも一切影響しない。

   レイアウトの型は、完成済みスマホ昼版と同じ「ヒーロー100vh固定＋
   その下に縦積みflow」を踏襲する。背景画像だけnight-consultation-bg.png
   （水晶玉の光＋7枚のタロットカード＋奥に月、というPC夜版と同じ構図）に
   差し替え、文字は写真上部の書棚アーチ側（中央の強い光を避けた、暗めで
   読みやすい帯）に重ねて配置する。

   昼版と異なり、案内文（.input-guidance）は今回の要件でスマホ夜版だけ
   表示対象のため、ここでは非表示にしない（昼版側のdisplay:noneはそのまま）。 */
@media (max-width: 600px) {
  /* 方針転換: スクロールなしの1画面完結にするため、高さを動的
     ビューポート単位（100dvh、Safariの上下UI表示状態に追従）にし、
     overflow-yをhiddenにして縦スクロールが物理的に発生しないようにする。
     100vhは100dvh非対応環境向けのフォールバックとして残す。 */
  body.is-input-active:not(.is-input-day) #screen-input {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-image: url("../assets/input/night-consultation-bg.png");
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    padding: 18px 16px 0;
  }

  /* #appの共通スマホpadding（28px 10px 48px、常時適用）が#screen-input
     （100dvh固定）の外側に上下ぶんの余白を残し、それだけでページ全体が
     100dvhを超えて縦スクロールが発生してしまうため、PC版が既に行っている
     のと同じ考え方（body.is-input-active #app { padding:0 }、PC限定）を
     夜版スマホにも適用し、上下left/rightのpaddingを0にする。 */
  body.is-input-active:not(.is-input-day) #app {
    padding: 0;
  }

  /* ヒーロー（100vh）からはみ出す入力欄以降のコンテンツの下地。
     写真の続きではなく、夜版の世界観に合わせた濃い紫紺のグラデーション
     （既存の夜トップ・スプラッシュと同系色）にする。 */
  body.is-input-active:not(.is-input-day) {
    background: linear-gradient(180deg, #150f2c 0%, #1c1240 100%);
  }

  /* 共通ヘッダー（「TAROT」「参加型タロット占い」）は、スマホ夜版専用
     ヘッダー（戻る/TAROTブランド/LOGIN）と二重表示になるため隠す。 */
  body.is-input-active:not(.is-input-day) .app-header {
    display: none;
  }

  /* 「トップへ戻る」：画面最上部の独立した行として表示する。
     見た目（ピル型・ゴールド枠）は昼版を踏襲し、配色だけ夜版トーンにする。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-back-button {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 14px;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold-strong);
    background: rgba(20, 14, 40, 0.55);
    border: 1px solid rgba(227, 192, 122, 0.55);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* 「← トップへ戻る」非表示（2026-09-15）。スマホ夜版限定で
     display:noneにする。HTML（#back-to-top-button）は削除しない
     （PC昼版・PC夜版では引き続き表示するため）。今回は非表示化のみで、
     昼版に合わせたその他のレイアウト調整は行わない。上のブロック
     （position:static、margin:0 0 14px、夜版配色）は値ごと残したまま、
     後続のこのルールだけがcascadeで上書きしてdisplay:noneにする。
     TAROLUNE/LOGIN/中央TAROT/中央見出し/コースUI/相談入力欄/
     占いを始めるボタン/エラーメッセージ/下部カード/注意書きは全て
     position:absoluteで個別のtop/bottom値により独立配置されているため、
     このボタンを消してもそれらのフロー上の詰め・再配置は発生しない。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-back-button {
    display: none;
  }

  /* ヘッダー：PC版の横長ナビ（4項目）は幅に収まらず折り返して崩れるため
     非表示にし、TAROTブランドとLOGINだけを1行に収める（昼版と同じ方針）。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(227, 192, 122, 0.35);
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-moon,
  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-main {
    color: var(--gold-strong);
  }

  /* スマホ夜版相談入力画面限定（2026-09-17追加）: 左上ブランド表記の
     「TAROT」を「TAROLUNE」へ変更する。スマホ昼版（body.is-input-day
     #screen-input .input-header-brand-main、6293/6297行目）で既に
     採用済みのTAROLUNE表示方式（font-size:0で元のテキストを見た目上
     ゼロ幅にし、::afterで文字を表示する）をそのまま踏襲する。HTML側の
     テキスト「TAROT」自体は変更しない。font-size(0.85rem)・
     letter-spacing(0.2em)・white-space(nowrap)は、変更前このブロックが
     .input-header-brand-mainへ直接指定していた値をそのまま::afterへ
     移し、表示サイズ・字間を変更していない。colorも直前の
     var(--gold-strong)指定（6669-6671行目）を::afterでも明示的に
     同じ値で指定し（値は変更なし）、位置・三日月装飾
     （.input-header-moon）・CHOOSE YOUR CARD（.input-header-brand-sub）・
     余白・背景・PC版・スマホ昼版・他画面には一切触れていない。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-main {
    font-size: 0;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-main::after {
    content: 'TAROLUNE';
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    white-space: nowrap;
    color: var(--gold-strong);
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-header-brand-sub {
    color: var(--text-muted);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  /* ナビ4項目は幅に収まらないため非表示。LOGINだけ残す（昼版と同じ方針）。
     これがSTEP時点で崩れていた「上部ナビの折り返し」の対策そのもの。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-nav-link {
    display: none;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-login-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.6rem;
    color: var(--gold-strong);
    border: 1px solid rgba(227, 192, 122, 0.6);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* PC夜版・相談入力画面のLOGINバッジhover時cursor:pointer化
     （2026-09-13追加）。.input-login-badgeは<span>要素のためデフォルトでは
     クリック可能に見えるカーソルにならない。見た目（padding・font-size・
     color・border・border-radius・white-space）は現行の正式デザインから
     一切変更せず、カーソル形状だけをhover時に上書きする。PC昼版側
     （body.is-input-day側）・PC夜版TOP・LOGIN/REGISTER画面・スマホ版・
     他画面には一切影響しない。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-login-badge:hover {
    cursor: pointer;
  }

  /* 「✦TAROT✦」見出しとテーマ別メッセージは、背景写真上部の書棚アーチ側
     （中央の強い光・カード帯より上の、暗めで読みやすい帯）に重ねて配置する。
     busyな写真の上でも読めるよう、文字色は変えずに濃い影（text-shadow）を
     添える（昼版が淡い光彩を添えたのと同じ考え方の夜版版）。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-tarot-mark {
    display: none;
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    color: var(--gold-strong);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
  }

  /* 縦位置調整（2026-09-17）: スマホ夜版「恋愛について」〜「占いを
     始める」の縦位置を、スマホ昼版（body.is-input-day側、6428/9374/
     6456/6500行目）と完全に同じ値へ揃えた（top:21%→16.5%）。
     .course-preview（top:33%→25%）・#consultation-input
     （top:54%→42%、bottom:+185px→+247px）・#start-button
     （bottom:+125px→+173px）も同様に昼版の値へ揃えている。昼版側の
     CSS・PC版・.course-previewのwidth（68%のまま）・背景画像・
     TAROTロゴ・注意書き・下部カード・遷移ロジックには一切触れていない。 */
  /* 追記（2026-09-17）: 見出し2行（「恋愛について、」「あなたの運勢を
     占います」）と直下の3枚コース選択（.course-preview、top:25%、
     位置は今回変更しない）の間隔が詰まっていたため、見出し2行だけを
     約20px上へ移動する。topの%値（画面高さ比）を変更すると端末の
     実高さによって移動量が変わってしまうため、translateYで固定pxを
     指定し、どの端末でも正確に20px移動するようにした。
     .course-preview/#consultation-input/#start-button/背景画像/
     TAROTロゴ/LOGIN/ヘッダー/注意書き/PC版/スマホ昼版には
     一切触れていない。 */
  body.is-input-active:not(.is-input-day) #screen-input .screen-tagline {
    position: absolute;
    top: 16.5%;
    left: 50%;
    transform: translate(-50%, -20px);
    margin: 0;
    width: 88%;
    /* 視認性の見直し: 白〜アイボリーをvar(--text)（#f2eee6）よりわずかに
       明るいベタ色に変更し、text-shadowは必要最小限（ぼかし・不透明度と
       も控えめ）に抑えた。世界観を崩すほどの太字・強い白・強い影には
       していない。 */
    color: #fdfbf6;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.45);
  }

  /* テーマメッセージ1行目・2行目とも、1〜2文字だけ次行へ落ちないよう
     1行内に収める（THEME_MESSAGES側の文字数であれば88%幅に収まる）。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-theme-line1,
  body.is-input-active:not(.is-input-day) #screen-input .input-theme-line2 {
    white-space: nowrap;
  }

  /* 案内文：実機確認の結果、不要と判断されたためスマホ夜版でも非表示にする
     （昼版のdisplay:noneと同じ扱いに変更）。位置等の他プロパティは
     display:noneにより見た目へは影響しないが、そのまま残す。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-guidance {
    display: none;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
    color: var(--text);
    opacity: 0.9;
    font-size: 0.8rem;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
    text-wrap: pretty;
  }

  /* 方針転換: 1画面完結にするため、相談入力欄も背景画像の上に重ねる
     絶対配置に変更する（中央の光に多少重なっても問題ない、との指示による）。
     top(案内文のすぐ下)とbottom(ボタンの少し上)の両方を指定し、
     高さは固定値を使わずその間を自動で埋める形にする。これにより、
     デバイスの高さやフォント描画の差によって固定pxがズレて背景の
     重要ビジュアルに食い込む、という前回までの問題を構造的に避ける。
     resize:noneは、手動リサイズでこの自動計算の高さを崩さないための
     ガード。配色（濃い紫紺パネル＋ゴールド枠）は変更しない。
     最終微調整: 実機で縦に大きすぎたため、topは変えずbottomだけ+44px
     引き上げて高さを約15〜20%縮小した（ボタン・注意書きも同じ+44pxで
     追従させ、間隔の見た目は維持している）。
     2026-09-18: 13枚Premiumコース追加でコース群を上へ移動した結果、
     入力欄より下（入力欄・カウンター・ボタン・エラー文言）が相対的に
     上寄りに見えるようになったため、この一群だけを高さを変えずに
     20px下へ移動（top:42%→calc(42%+20px)、bottom:+247px→+227px）した後、
     実機確認を経てさらに10px追加（合計30px）した（top:calc(42%+30px)、
     bottom:+217px）。3/5/7/13枚コース・タイトル文言・背景・下部注意書きは
     一切動かしていない。 */
  body.is-input-active:not(.is-input-day) #screen-input #consultation-input {
    position: absolute;
    left: 50%;
    top: calc(42% + 30px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 217px);
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
    resize: none;
    /* 右下に重ねる文字数カウンター（#consultation-char-count）と入力
       文字が重ならないよう、下側だけpaddingを広げる（横・上は既存の
       ままの14px、昼版と同じ考え方）。 */
    padding: 14px 14px 24px;
    background: rgba(20, 14, 40, 0.6);
    color: var(--text);
    border: 1px solid rgba(227, 192, 122, 0.55);
    border-radius: 12px;
  }

  /* 視認性の見直し: 不透明度を0.5→0.62に上げ、暗いパネル上でも
     プレースホルダー文言が読み取りやすいようにした（色相・太さは
     変更しない）。 */
  body.is-input-active:not(.is-input-day) #screen-input #consultation-input::placeholder {
    color: rgba(242, 238, 230, 0.62);
  }

  /* 文字数カウンター（「0 / 1000」）。昼版と同じ既存要素・既存JS
     （#consultation-char-count、js/main.jsのupdateCharCount）をそのまま
     利用し、夜版側でも表示・位置指定だけを追加する（新しい要素は作らない）。
     textarea右下隅（right: 8%+12px、bottom: textareaのbottom(316px)+8px）
     に重ねる、昼版と全く同じ配置ロジック。色だけ夜版の暗い背景に合わせ、
     淡いアイボリー系＋ごく控えめなtext-shadowにする。 */
  body.is-input-active:not(.is-input-day) #screen-input #consultation-char-count {
    display: block;
    position: absolute;
    right: calc(8% + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 163px);
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: rgba(242, 238, 230, 0.6);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
  }

  /* 「占いを始める」ボタン：画面下端からのbottom基準で固定し、
     注意書き（さらに下）との間隔を確保する。既存の.primary-buttonの
     配色はそのまま使い、位置・幅だけ上書きする。
     最終微調整: 入力欄を縮めた分（+44px）だけ一緒に引き上げ、入力欄との
     間隔を変えないようにした。ボタン自体のサイズ・色・幅は変更しない。 */
  body.is-input-active:not(.is-input-day) #screen-input #start-button {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 143px);
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
  }

  /* 「相談内容を入力してください。」エラー（#input-error）位置修正
     （2026-09-17追加）。夜版にはこれまで位置指定が一切なく、共通の
     .error-text（position指定なし＝通常のdocumentフロー）のまま
     だったため、#screen-input内で.input-headerの直後（＝見出し
     「恋愛について、あなたの運勢を占います」付近）に押し出されて
     重なって見えていた。スマホ昼版の#input-error（6526-6536行目）が
     既に採用している位置指定（position/left/bottom/transform/margin/
     width/max-width）だけをそのまま複製する。色（color:#8f304f）・
     font-weight（600）は昼版専用の配色のため複製せず、夜版は従来通り
     共通.error-textの色（#e08a8a）・太さのまま変更しない。
     #start-button/.input-card-note/背景/TAROLUNE/CHOOSE YOUR CARD/
     LOGIN/見出し2行/3枚5枚7枚コース/相談入力欄/PC版/スマホ昼版には
     一切触れていない。 */
  body.is-input-active:not(.is-input-day) #screen-input #input-error {
    position: absolute;
    left: 50%;
    /* 2026-09-18: 相談入力欄・カウンター・ボタンを20px下へ移動した際、
       ボタンとの相対間隔（元は約19.8px）を維持するため同じ20px分
       追従させ（128px→108px）、実機確認を経てさらに10px追従させた
       （108px→98px、合計30px）。文言・文字色・他の値は変更していない。 */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 98px);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    /* 文字色調整（2026-09-17追加）。位置は変更せず、共通.error-textの
       color:#e08a8aから#ff8f9cへ変更するだけ。font-size/font-weight/
       font-family/line-heightは.error-textのまま変更していない。 */
    color: #ff8f9c;
  }

  /* 最下部の注意書き：画面下端からのbottom基準で固定する（1画面内に
     常に収まる）。iPhoneのホームインジケーター等と重ならないよう
     env(safe-area-inset-bottom)を足す（未対応環境はフォールバックの
     0pxが使われるだけ）。長めの一文なので1〜2文字だけ次行へ落ちにくい
     ようtext-wrap:prettyを添える（対応ブラウザのみ有効）。
     最終微調整: 実機でSafari下部UIに近すぎたため、+44px引き上げて
     安全余白を追加確保した（ボタン・入力欄と同じ+44pxで揃えている）。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-card-note {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
    transform: translateX(-50%);
    margin: 0;
    width: 88%;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.68rem;
    text-align: center;
    text-wrap: pretty;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

/* =========================================================
   新トップ画面（screen-top）専用スタイル
   既存画面（input/select/open/result）のCSSには一切手を加えず、
   すべて新規クラス名（top-*, horoscope-*, theme-card-*, is-top-*）で完結させる。
   ========================================================= */

/* screen-top表示中は開発者バッジを隠す */
body.is-top-active .dev-badge {
  display: none;
}

/* ---- 昼テーマ（デフォルト・0:00-19:59 JST） ---- */
body.is-top-active {
  --top-bg-1: #fffdfb;
  --top-bg-2: #f7ecf9;
  --top-bg-3: #fbe8ef;
  --top-bg-4: #efe6fb;
  --top-card-bg: linear-gradient(160deg, #ffffff 0%, #f5eefb 100%);
  --top-gold: #b8863f;
  --top-gold-strong: #cda45a;
  --top-text: #322a45;
  --top-text-muted: #7a7190;
  --top-panel: rgba(255, 255, 255, 0.72);
  --top-border: rgba(184, 134, 63, 0.35);
  --top-pink-strong: #e7a9b6;
  --top-star-color: #cda45a;
  --top-moon-color: rgba(184, 134, 63, 0.85);
  --top-moon-shade: #8a6428;
  --top-cloud-color: rgba(219, 197, 240, 0.5);
  --top-nav-text: #574f6d;
  --top-header-bg: rgba(255, 255, 255, 0.82);
  --top-band-bg: rgba(251, 232, 239, 0.78);
  /* PC昼版TOP専用背景（2026-09-10更新）。reference/day-top-background.png
     （利用規約画面で採用したassets/input/day-terms-background.pngの
     複製、満月1つのみで三日月を含まない）に差し替え。旧
     reference/day-background.png用の特殊クロップ（X:-230pxオフセット・
     1900px固定幅・Y:130px）は新画像には不要なため、background-size:cover
     ＋background-position:top centerのシンプルな指定に変更。
     グラデーション4層・background-attachment:fixedは維持。
     reference/day-background.png自体・夜版（body.is-top-active.is-top-night、
     詳細度が高くこのルールでは上書きされない）・スマホ版
     （@media max-width:600px側のmobile/day-background.png）は無変更。 */
  background:
    url("../reference/day-top-background.png") top center / cover no-repeat,
    radial-gradient(circle at 20% 8%, var(--top-bg-2), transparent 55%),
    radial-gradient(circle at 85% 0%, var(--top-bg-3), transparent 45%),
    radial-gradient(circle at 50% 100%, var(--top-bg-4), transparent 60%),
    linear-gradient(180deg, var(--top-bg-1) 0%, var(--top-bg-2) 100%);
  background-attachment: fixed;
}

/* 既存の.app-header（「TAROT」「参加型タロット占い」）はscreen-top専用の
   .top-headerと二重表示になり、上部に大きな空白を作るためscreen-top表示中は隠す */
body.is-top-active .app-header {
  display: none;
}

/* #appのpadding-top:40px（全画面共通・screen-input以降のため変更不可）が
   .app-header非表示後もtop-headerを押し下げていたため、screen-top表示中だけ上書きする */
body.is-top-active #app {
  padding-top: 0;
}

/* ---- 夜テーマ（20:00-23:59 JST、自動切替） ---- */
body.is-top-active.is-top-night {
  --top-bg-1: #0d0820;
  --top-bg-2: #1c1240;
  --top-bg-3: #241830;
  --top-bg-4: #150f2c;
  --top-card-bg: linear-gradient(160deg, rgba(42, 29, 74, 0.92) 0%, rgba(20, 13, 42, 0.96) 100%);
  --top-gold: #cda45a;
  --top-gold-strong: #e3c07a;
  --top-text: #f2eee6;
  --top-text-muted: #a79bc4;
  --top-panel: rgba(28, 18, 64, 0.55);
  --top-border: rgba(227, 192, 122, 0.4);
  --top-pink-strong: #a877a0;
  --top-star-color: #e3c07a;
  --top-moon-color: rgba(227, 192, 122, 0.95);
  --top-moon-shade: #a9821f;
  --top-cloud-color: rgba(90, 60, 120, 0.4);
  --top-nav-text: #cfc4e8;
  --top-header-bg: transparent;
  --top-band-bg: rgba(36, 24, 56, 0.55);
  background:
    url("../reference/night-background.png") -260px 0px / 1900px auto no-repeat,
    radial-gradient(circle at 20% 0%, rgba(124, 92, 180, 0.35), transparent 55%),
    linear-gradient(180deg, var(--top-bg-1) 0%, var(--top-bg-3) 100%);
  background-attachment: fixed;
}

.screen-top {
  position: relative;
  overflow: hidden;
  color: var(--top-text);
  padding-bottom: 16px;
}

/* 共通の.screen.active { animation: fade-in ... }（keyframeのfromがtranslateY(6px)）が
   初期表示時に.top-headerを一時的に押し下げていたため、screen-topのみアニメーションを無効化する。
   screen-input以降のフェードイン演出はそのまま維持する。 */
.screen-top.active {
  animation: none;
}

/* ---- TAROT見出し〜注意書きのラッパー。
   背景美術（day-background.png）は body.is-top-active 側でビューポート全体に
   適用しているため、このラッパー自体は背景を持たない（透明な構造用div）。 ---- */
.top-scene {
  position: relative;
}

/* ---- ヘッダー ---- */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px 18px;
  padding: 14px 16px;
  background: var(--top-header-bg);
  border-bottom: 1px solid var(--top-border);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.top-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.top-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--top-text);
  border-radius: 2px;
}

.top-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-header-moon-icon {
  font-size: 1.1rem;
  color: var(--top-gold);
}

.top-header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.top-header-brand-main {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  color: var(--top-text);
}

.top-header-brand-sub {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--top-text-muted);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-nav-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--top-nav-text);
  cursor: default;
}

.top-header-user-icon {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--top-gold);
  flex-shrink: 0;
}

.top-login-button {
  margin-left: 4px;
  padding: 6px 16px;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--top-gold);
  background: transparent;
  border: 1px solid var(--top-gold);
  border-radius: 999px;
  cursor: default;
}

/* スマホ版TOPヘッダー右上に常時表示するLOGINボタン（2026-09-14新設）。
   ハンバーガーメニューを開かなくてもLOGINへ進めるようにするための専用
   要素で、PC版の.top-login-button（.top-nav内、既存のまま無変更）とは
   別のDOM要素・別クラスにすることで、PC側のレイアウト・CSSには一切
   触れずに済ませている。既定（PC含む）ではdisplay:noneにし、
   @media(max-width:600px)側でだけ表示する。 */
.top-login-button-mobile {
  display: none;
}

/* ---- 12星座占い ---- */
.horoscope-band {
  position: relative;
  z-index: 1;
  margin: 0 4px 18px;
  padding: 10px 18px 8px;
  background: var(--top-band-bg);
  border: 1px solid var(--top-border);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(60, 30, 80, 0.1);
  backdrop-filter: blur(8px);
}

.horoscope-band-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.7rem;
}

.horoscope-mode-label {
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--top-gold);
}

.horoscope-mode-label-ja {
  color: var(--top-text-muted);
}

.horoscope-date {
  color: var(--top-text-muted);
}

.horoscope-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.horoscope-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--top-border);
  background: var(--top-panel);
  color: var(--top-gold);
  font-size: 1.1rem;
  cursor: pointer;
}

.horoscope-carousel {
  flex: 1;
  overflow: hidden;
  padding: 4px 0;
}

.horoscope-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.horoscope-card {
  flex-shrink: 0;
  height: 128px;
  overflow: hidden;
  line-height: 1.35;
  background: var(--top-panel);
  border: 1px solid var(--top-border);
  border-radius: 14px;
  padding: 10px 16px;
  transition: opacity 0.4s ease, transform 0.4s ease, width 0.4s ease;
  backdrop-filter: blur(6px);
}

.horoscope-card.is-current {
  width: min(320px, 74vw);
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--top-pink-strong);
}

.horoscope-card.is-prev,
.horoscope-card.is-next {
  width: 56px;
  opacity: 0.4;
  transform: scale(0.9);
  overflow: hidden;
}

.horoscope-card.is-prev *,
.horoscope-card.is-next * {
  opacity: 0;
}

.horoscope-card-name {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  color: var(--top-text);
  letter-spacing: 0.04em;
}

.horoscope-card-symbol {
  margin-right: 4px;
  color: var(--top-gold);
}

.horoscope-card-name-ja {
  font-weight: 500;
  color: var(--top-text-muted);
}

.horoscope-card-stats {
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px 16px;
  font-size: 0.74rem;
}

.horoscope-card-stats div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.horoscope-card-stats dt {
  flex-shrink: 0;
  width: 3.4em;
  color: var(--top-pink-strong);
  font-weight: bold;
}

.horoscope-card-stats dd {
  margin: 0;
}

.horoscope-stars {
  letter-spacing: 0.1em;
  color: var(--top-star-color);
}

.horoscope-card-message {
  margin: 4px 0 0;
  font-size: 0.74rem;
  text-align: center;
  color: var(--top-text);
}

.horoscope-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.horoscope-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--top-border);
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.horoscope-dot.is-active {
  background: var(--top-gold);
  opacity: 1;
  transform: scale(1.3);
}

/* 星座カルーセル調整STEP4（PC昼版限定・改善案A＋左右クリック対応）:
   .horoscope-card.is-prev/.is-next（3676行目付近のbase rule）は、
   cardMarkup()（horoscopeCarousel.js）が中央カードと全く同じ
   シンボル・英語名・日本語名・4項目運勢・メッセージを既に生成して
   いるにもかかわらず、子要素すべてをopacity:0にして見た目だけ空白の
   縦長パネルにしている。このPC限定ブロックだけを追加し、シンボル・
   英語名・日本語名だけ控えめ（opacity:0.6程度）に見えるようにし、
   4項目の運勢評価とひと言メッセージは引き続き非表示のままにする。
   base rule自体・render()/cardMarkup()/advance()本体・
   .horoscope-band外枠・.horoscope-card.is-currentの内容とサイズ・
   queue/dots・スマホ向け@media(max-width:600px)側の上書き
   （幅16px等）には一切触れていない。 */
@media (min-width: 601px) {
  .horoscope-card.is-prev,
  .horoscope-card.is-next {
    width: 90px;
    opacity: 1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .horoscope-card.is-prev .horoscope-card-stats,
  .horoscope-card.is-next .horoscope-card-stats,
  .horoscope-card.is-prev .horoscope-card-message,
  .horoscope-card.is-next .horoscope-card-message {
    display: none;
  }

  .horoscope-card.is-prev .horoscope-card-name,
  .horoscope-card.is-next .horoscope-card-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.6;
    white-space: normal;
  }

  .horoscope-card.is-prev .horoscope-card-symbol,
  .horoscope-card.is-next .horoscope-card-symbol {
    margin-right: 0;
    font-size: 1.05rem;
  }
}

/* ---- メインビジュアル／TAROTタイトル ---- */
.top-hero {
  position: relative;
  text-align: center;
  margin: 8px 0 26px;
}

.top-hero-sparkle {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 4px;
  opacity: 0.85;
}

.top-hero-sparkle-left {
  left: calc(50% - 110px);
}

.top-hero-sparkle-right {
  right: calc(50% - 110px);
}

.top-hero-mark {
  margin: 0;
  font-size: 2.4rem;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-weight: 500;
  background: linear-gradient(135deg, var(--top-gold), var(--top-gold-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top-hero-sub {
  margin: 4px 0 22px;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--top-text-muted);
}

.top-hero-question {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: var(--top-text);
}

.top-hero-guide {
  margin: 0;
  font-size: 0.85rem;
  color: var(--top-text-muted);
}

/* ---- 5つの占いテーマカード ---- */
.theme-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px auto 30px;
  padding: 0 2px;
  position: relative;
  z-index: 1;
}

.theme-card {
  flex: 1 1 0;
  min-width: 90px;
  max-width: 148px;
  aspect-ratio: 2 / 3.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  background: var(--top-card-bg);
  border: 1px solid var(--top-border);
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(50, 30, 70, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover,
.theme-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(50, 30, 70, 0.14);
  outline: none;
}

.theme-card-icon {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-card-icon svg {
  width: 54px;
  height: 54px;
}

.theme-card-en {
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--top-gold);
  text-align: center;
}

.theme-card-ja {
  font-size: 0.78rem;
  color: var(--top-text);
  text-align: center;
}

/* ---- 下部説明パネル・注意書き ---- */
.top-info-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: var(--top-panel);
  border: 1px solid var(--top-border);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 1;
}

.top-info-icon {
  width: 22px;
  height: 30px;
  flex-shrink: 0;
  border: 1.5px solid var(--top-gold);
  border-radius: 4px;
}

.top-info-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--top-text);
}

.top-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin: 0 auto;
  font-size: 0.75rem;
  text-align: center;
  color: var(--top-text-muted);
  position: relative;
  z-index: 1;
}

.top-disclaimer-line {
  margin: 0;
}

.top-disclaimer-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.top-disclaimer-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--top-text-muted);
}

/* ---- レスポンシブ（スマートフォン幅・screen-top用） ---- */
@media (max-width: 600px) {
  .top-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    margin: 0 -10px 18px;
    padding: 12px 10px;
  }

  .top-nav-toggle {
    display: flex;
  }

  .top-header-brand {
    justify-content: center;
  }

  .top-nav {
    display: none;
    position: absolute;
    top: 46px;
    right: 16px;
    z-index: 5;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 16px;
    background: var(--top-panel);
    border: 1px solid var(--top-border);
    border-radius: 12px;
    backdrop-filter: blur(6px);
  }

  .top-nav.is-open {
    display: flex;
  }

  /* LOGIN常時表示化（2026-09-14）に伴い、ハンバーガーメニュー内に
     あった元のLOGINボタン（.top-nav内、PC版は無変更のまま残置）は
     スマホ幅でのみ非表示にする。下の.top-login-button-mobileが
     その代わりにヘッダー右上へ常時表示される。 */
  .top-nav .top-login-button {
    display: none;
  }

  /* 未使用の装飾アイコン（クリック不可・アバター等の機能なし）は、
     同じ右上スロットにLOGINボタンを常時表示するため非表示にする。
     grid-template-columnsの3列目（32px）自体は維持されるため、
     三本線（1列目）・中央ブランド（2列目）の位置は変わらない。 */
  .top-header-user-icon {
    display: none;
  }

  /* スマホ版TOPヘッダー右上の常時表示LOGINボタン。ハンバーガーメニューの
     開閉状態に関わらず常に表示され、タップで既存のgoToLogin()へそのまま
     遷移する（遷移処理自体は変更していない）。3列目（32px）へ明示的に
     配置しつつ、右端に寄せる（justify-self:end）ことで三本線・中央
     ブランドの位置（1列目・2列目）には一切影響しない。 */
  .top-login-button-mobile {
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    grid-column: 3;
    justify-self: end;
    padding: 5px 12px;
    font-size: 0.58rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: var(--top-gold);
    background: transparent;
    border: 1px solid var(--top-gold);
    border-radius: 999px;
    cursor: pointer;
  }

  /* 星座カルーセル調整STEP3: スマホ版だけ左右矢印を非表示にする。
     base rule（1657行目付近）が既にdisplay:noneのため、STEP1で追加した
     このmax-width:600px用のdisplay:flex上書きを削除するだけで、
     スマホ側はbase ruleのdisplay:noneへ戻る（＝非表示になる）。
     PC側は元々このmax-width:600pxブロックの影響を受けておらず
     display:noneのままのため、PC版の見た目は変化しない。
     DOM要素（#horoscope-prev/#horoscope-next）自体は削除していない。 */

  /* 星座カルーセル調整STEP3: 中央カードの横幅再配分（矢印削除ぶんの
     反映）。矢印が display:none になったことで、.horoscope-carousel-wrap
     （flexコンテナ）内の実質的な子要素が.horoscope-carousel1つだけに
     なり（display:noneの要素はflexレイアウトに一切参加しないため、
     矢印の幅・矢印⇔カルーセル間のgapともに消費されなくなる）、
     .horoscope-carouselが帯の内側幅をそのまま丸ごと使えるようになる。
     前後カードのピーク幅(16px)・track内gap(6px)はSTEP1のまま維持。
     新しい固定分の内訳（#appの左右padding20px＋帯の左右margin8px＋
     帯の左右padding28px＋前後カードのピーク32px＋track内gap12px＝
     合計100px）をビューポート幅から差し引いた値にする。
     400px幅では 400-100=300px になる計算。 */
  .horoscope-card.is-current {
    width: calc(100vw - 100px);
  }

  .horoscope-card.is-prev,
  .horoscope-card.is-next {
    width: 16px;
  }

  .horoscope-carousel-wrap {
    gap: 6px;
  }

  .horoscope-track {
    gap: 6px;
  }

  .horoscope-band {
    padding: 10px 14px 8px;
  }

  .top-hero-mark {
    font-size: 1.8rem;
  }

  .top-hero-question {
    font-size: 1.25rem;
  }

  .theme-card {
    flex: 0 1 calc(33.333% - 8px);
    max-width: none;
    min-width: 0;
  }

  /* 5テーマカード画像が1枚ずつ「ぱ、ぱ、ぱ」と表示される現象の対策。
     .theme-cards（5枚をまとめて内包する親要素）を既定でopacity:0にし、
     topScreen.jsが5枚全ての画像読み込み完了（成功/失敗いずれでも）を
     検知した時点で.theme-cards-readyクラスを付与、短いfade-inで一括
     表示する。PC版（min-width:601px）にはこのopacity:0指定自体が
     存在しないため影響しない。カードのサイズ・配置・デザインは
     変更していない。 */
  .theme-cards {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .theme-cards.theme-cards-ready {
    opacity: 1;
  }

  /* 5テーマカード スマホ版 正式デザイン（昼版・夜版とも、PC版で確定済みの
     手法をそのまま流用）。PC専用のmin-width/max-width(144px等)は流用せず、
     上記の3+2グリッド指定(flex:0 1 calc(33.333% - 8px))はそのまま活かす。
     画像ファイル・background-sizeの数値（各画像の金枠位置に合わせてPC版で
     実測済みの値）はPC版と同一のものを再利用し、新たな数値は作らない。
     button自体の構造・クリック領域・data-category・イベントには一切触れて
     いないため、テーマ遷移機能（onThemeCardClick）に影響しない。 */

  /* ---- 昼版: 5枚とも画像内に日本語文字を含むため、icon/en/jaを全て
     非表示にする（PC版の昼版と同じ考え方）。 ---- */
  body.is-top-active:not(.is-top-night) .theme-card-love,
  body.is-top-active:not(.is-top-night) .theme-card-work,
  body.is-top-active:not(.is-top-night) .theme-card-relationships,
  body.is-top-active:not(.is-top-night) .theme-card-money,
  body.is-top-active:not(.is-top-night) .theme-card-other {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-ja,
  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-ja,
  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-ja,
  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-ja,
  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-love::before,
  body.is-top-active:not(.is-top-night) .theme-card-work::before,
  body.is-top-active:not(.is-top-night) .theme-card-relationships::before,
  body.is-top-active:not(.is-top-night) .theme-card-money::before,
  body.is-top-active:not(.is-top-night) .theme-card-other::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 軽量化: スマホ表示幅（約117px）に対して元画像（1000px超・2MB超）は
     オーバースペックで初回表示が重かったため、スマホ版だけ
     assets/cards/premium/mobile/ 配下の軽量版（横360px・容量約8割減）を
     参照する。PC版（@media min-width:601px側の同名セレクタ）は元画像の
     ままのため、ここではURLだけを差し替える（デザイン・比率は不変）。 */
  body.is-top-active:not(.is-top-night) .theme-card-love::before {
    background-image: url("../assets/cards/premium/mobile/day-love.png");
    background-size: 97.9% 98%;
  }

  body.is-top-active:not(.is-top-night) .theme-card-work::before {
    background-image: url("../assets/cards/premium/mobile/day-work.png");
    background-size: 97.4% 99%;
  }

  body.is-top-active:not(.is-top-night) .theme-card-relationships::before {
    background-image: url("../assets/cards/premium/mobile/day-relationships.png");
    background-size: 99% 98.2%;
  }

  body.is-top-active:not(.is-top-night) .theme-card-money::before {
    background-image: url("../assets/cards/premium/mobile/day-money.png");
    background-size: 99% 98.1%;
  }

  body.is-top-active:not(.is-top-night) .theme-card-other::before {
    background-image: url("../assets/cards/premium/mobile/day-other.png");
    background-size: 99% 95.4%;
  }

  /* ---- 夜版: 画像内は中央イラスト＋英字のみのため、icon/enだけ非表示に
     し、日本語ラベル(.theme-card-ja)はカード下の独立キャプションとして
     再利用する（PC版の夜版と同じ考え方）。 ---- */
  body.is-top-active.is-top-night .theme-card-icon,
  body.is-top-active.is-top-night .theme-card-en {
    display: none;
  }

  body.is-top-active.is-top-night .theme-card {
    aspect-ratio: 2 / 3.3;
    padding: 0;
    gap: 6px;
    justify-content: flex-start;
    background: none;
    border: none;
    box-shadow: none;
  }

  body.is-top-active.is-top-night .theme-card::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 14px;
    border: 1px solid rgba(227, 192, 122, 0.55);
    box-shadow:
      0 0 0 1px rgba(227, 192, 122, 0.12),
      0 8px 18px rgba(8, 5, 20, 0.32);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 高速化STEP7: 夜版スマホだけassets/cards/premium/mobile-300/配下の
     300px版へ切り替える（30%のさらなる軽量化）。360px版
     （assets/cards/premium/mobile/）は削除・変更せず残したまま。
     昼版は今回対象外のためmobile/（360px版）を継続使用。PC版
     （min-width:601px側）は元画像のまま。js/topScreen.jsの
     preload/new Image()もこの300px版と同じパスに揃えている。 */
  body.is-top-active.is-top-night .theme-card-love::before {
    background-image: url("../assets/cards/premium/mobile-300/love-card.png");
  }

  body.is-top-active.is-top-night .theme-card-work::before {
    background-image: url("../assets/cards/premium/mobile-300/work-card.png");
  }

  body.is-top-active.is-top-night .theme-card-relationships::before {
    background-image: url("../assets/cards/premium/mobile-300/relationships-card.png");
  }

  body.is-top-active.is-top-night .theme-card-money::before {
    background-image: url("../assets/cards/premium/mobile-300/money-card.png");
  }

  body.is-top-active.is-top-night .theme-card-other::before {
    background-image: url("../assets/cards/premium/mobile-300/other-card.png");
  }

  body.is-top-active.is-top-night .theme-card-ja {
    display: block;
    border: none;
    box-shadow: none;
    background: none;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f6ecd8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  body.is-top-active.is-top-night .theme-card-other .theme-card-ja {
    font-size: 0;
  }

  body.is-top-active.is-top-night .theme-card-other .theme-card-ja::after {
    content: 'その他';
    font-size: 1.05rem;
    font-weight: 600;
    color: #f6ecd8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .top-hero-sparkle-left {
    left: calc(50% - 78px);
  }

  .top-hero-sparkle-right {
    right: calc(50% - 78px);
  }

  /* 修正4（専用背景画像の導入）: 昼版トップ背景のスマホ対応
     （夜版・PC版は対象外）。これまでの修正1〜3は、PC版と同じ
     reference/day-background.png（1536×1024の横長写真）をCSSの
     size/position/attachmentだけで無理にスマホへ流用しようとした
     ものだったが、実機確認の結果、テーマカード帯の背後が白飛びし
     やすく、PC昼版の世界観を十分に引き継げなかった。
     そのため、夜版（reference/mobile/night-background.png）と同じ
     考え方で、スマホ昼版専用に書き下ろされた縦長構図の背景画像
     （reference/mobile/day-background.png、500×1081、約940KB。
     元のChatGPT生成画像853×1844・約1.7MBをWeb表示用に縮小したもの）
     を新たに使用する。PC版のbody.is-top-active（このセレクタの外、
     基本ルール）が参照するreference/day-background.pngは変更しない
     （このメディアクエリ内のみの上書きのため無関係）。
     background-imageを1〜5枚目まるごと上書きし、1枚目だけ新しい
     専用画像に差し替える。2〜5枚目（グラデーション）はPC版と同じ
     --top-bg-2/3/4を使った定義のまま維持する（画像が万一読み込めない
     場合の色味フォールバックとしても機能する）。
     background-attachment: scrollは維持する（fixedがモバイル
     ブラウザで正しく再計算・再描画されない既知の不具合を避けるため。
     夜版で採用済みの対策と同じ）。
     background-position（1枚目のみ）は80% 0%とした。0%は画像上端
     （淡い星空・右上の満月）をコンテナ上端に合わせる指定で、これに
     より下にスクロールしても画像の構図が上から順に自然につながって
     見える。横位置80%は、画像内で実測した満月の中心位置（左から
     約87%、上から約14%）が、スマホ幅で発生する横方向のクロップ範囲内
     でも欠けずに収まるよう選んだ値（画像左上から伸びる天の川状の
     光の帯は一部クロップされる可能性がある）。background-size:cover
     のため、ページの高さが変わっても白い余白は発生しない。 */
  body.is-top-active:not(.is-top-night) {
    background-image:
      url("../reference/mobile/day-background.png"),
      radial-gradient(circle at 20% 8%, var(--top-bg-2), transparent 55%),
      radial-gradient(circle at 85% 0%, var(--top-bg-3), transparent 45%),
      radial-gradient(circle at 50% 100%, var(--top-bg-4), transparent 60%),
      linear-gradient(180deg, var(--top-bg-1) 0%, var(--top-bg-2) 100%);
    background-attachment: scroll;
    background-size: cover, auto, auto, auto, auto;
    background-position: 80% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }

  /* 修正2（背景分断対策・やり直し）: 前回の「写真は100vhまでで打ち切り、
     それより下はグラデーションで継続」という設計は要件と異なっていた
     ため撤回する。今回は「night-background.png 1枚を、コンテンツ量で
     伸びるページ全体に対して途切れず・歪ませず・境界線を作らずに
     覆う」方式に変更する。昼版・PC版は対象外（このセレクタのみ上書き）。

     根本原因の再判断: background-size:cover自体は、対象の要素が
     どんな高さであっても数学的に必ず全面を覆う（隙間を作らない）
     指定のため、本来はfixedのままでも隙間は生まれないはずだった。
     隙間が出ていた実際の原因は、background-attachment:fixedが
     モバイルブラウザで正しく再計算・再描画されないこと（特に、
     カード画像の読み込み完了でページの高さが後から伸びた際、fixed
     背景のサイズ計算が古いまま更新されない）という、fixedのモバイル
     特有の既知の不具合だったと判断する。

     対策: background-attachmentをscroll（既定の付着方式。特殊な
     合成レイヤーを使わない、通常のレイアウト・再描画の仕組みに乗る
     ため、コンテンツ量に応じてページが伸びてもcoverが正しく
     再計算される）に変更するだけで、background-sizeはcoverのまま
     （縦横比を保ったまま全面を覆うため、縦方向への引き伸ばし＝歪みは
     発生しない）に戻す。cover自体の性質上、ページがどれだけ長くても
     写真の0%〜100%（星空〜下部の紫の雲・暖色の光）全体が途切れず
     引き伸ばされて画面全体を覆うため、単色のベタ塗り領域や不自然な
     境界線は生じない。背景画像ファイル・グラデーション定義は
     変更しない。横位置90%（満月を欠けずに見せる）は前回同様維持。 */
  /* 高速化STEP2: 画像URLだけをスマホ専用軽量版（600×400、約506KB）に
     差し替える。background-position/size/attachment、グラデーション
     定義（2〜3枚目）は上記のまま一切変更しない。PC版は基本ルール
     （このメディアクエリの外）の元画像night-background.pngを
     引き続き参照する（このセレクタはmax-width:600px内のみ）。 */
  body.is-top-active.is-top-night {
    background-image:
      url("../reference/mobile/night-background.png"),
      radial-gradient(circle at 20% 0%, rgba(124, 92, 180, 0.35), transparent 55%),
      linear-gradient(180deg, var(--top-bg-1) 0%, var(--top-bg-3) 100%);
    background-attachment: scroll;
    background-size: cover, auto, auto;
    background-position: 90% 15%, 0% 0%, 0% 0%;
  }

  /* 案A: スマホ夜版TOP初期描画専用の早期背景ルール。<html>に
     is-top-night-earlyが付いている間だけ、bodyの背景を上記の正式な
     夜版スマホ背景と完全に同じ値で先に適用し、最初のpaintから夜背景を
     出す。topScreen.jsのapplyTheme()が正式なis-top-active/is-top-night
     を設定すると、詳細度（クラス2つ）がこちらより高いためそちらへ
     自然に切り替わる。--top-bg-1/--top-bg-3は上のbody.is-top-active.
     is-top-night自身の中で定義されるCSS変数のため、bodyにそのクラスが
     まだ付いていないこの早期状態では未定義になる。そのため、変数では
     なく同じ値（#0d0820 / #241830）を直接指定する。画像・グラデーション・
     position/size/attachmentは上記の正式ルールと1文字も違わない値。 */
  html.is-top-night-early body {
    background-image:
      url("../reference/mobile/night-background.png"),
      radial-gradient(circle at 20% 0%, rgba(124, 92, 180, 0.35), transparent 55%),
      linear-gradient(180deg, #0d0820 0%, #241830 100%);
    background-attachment: scroll;
    background-size: cover, auto, auto;
    background-position: 90% 15%, 0% 0%, 0% 0%;
  }
}

@media (max-width: 360px) {
  .theme-card-en {
    font-size: 0.62rem;
  }

  .theme-card-ja {
    font-size: 0.68rem;
  }

  .horoscope-card.is-current {
    width: 82vw;
  }
}

/* =========================================================
   スマホ昼版TOPヘッダー調整（2026-09-14）
   対象：body.is-top-active:not(.is-top-night) の .top-header
   （ハンバーガーメニュー・中央TAROLUNE/CHOOSE YOUR CARD・LOGIN）。
   既存の.top-header共通ルール（5645行目付近、--top-header-bgの
   白背景rgba(255,255,255,0.82)・border-bottom・backdrop-filter:blur(6px)）
   は変更せず、PC昼版で既に正式採用済みの上書き（body.is-top-active:
   not(.is-top-night) .top-header、@media(min-width:601px)側、
   7102行目付近、background:transparent + backdrop-filter:none）と
   全く同じ考え方を、スマホ幅（@media max-width:600px）限定で追加する。
   is-top-nightが付く夜版はこのセレクタの対象外（夜版は元々
   --top-header-bg:transparentのため白帯の問題自体がない）。
   PC昼版・PC夜版・相談入力/カード選択/カード開示/鑑定結果等の他画面には
   一切影響しない。
   なお border-bottom（ゴールドの細い区切り線）はPC昼版では残したままだが、
   スマホ幅では背景透明化後もヘッダー下端に細い線として視認されたため、
   スマホ昼版限定でこれも none にして完全に透明化する。 */
@media (max-width: 600px) {
  body.is-top-active:not(.is-top-night) .top-header {
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 中央「TAROLUNE」を一回り大きく。letter-spacing/text-indentは
     em指定のためfont-sizeに連動して自動調整される。中央配置
     （.top-header-brandのjustify-content:center、上の既存ブロック内）・
     「CHOOSE YOUR CARD」（.top-header-brand-sub）・LOGINボタン
     （.top-login-button-mobile）・ハンバーガーメニュー
     （.top-nav-toggle）の位置・サイズ・ヘッダーの高さ（padding）は
     変更していない。 */
  body.is-top-active:not(.is-top-night) .top-header-brand-main {
    font-size: 1.08rem;
  }

  /* LOGINボタン視認性改善（2026-09-14）。ヘッダー透明化により、
     共通ルール（.top-login-button-mobile、6238行目付近、
     background:transparent + border:1px solid var(--top-gold)）の
     ゴールド枠・文字が背景に溶けて見えづらくなったための調整。
     位置・サイズ・形状（padding/font-size/letter-spacing/grid-column/
     justify-self/border-radius）・LOGIN文字色（var(--top-gold)）は
     共通ルールのまま変更していない。ここでは内部にごくうっすらとした
     半透明アイボリー背景を入れ、枠線だけ一段濃いvar(--top-gold-strong)
     にして視認性を上げる。完全な白ベタにはせず、背景がわずかに
     透ける程度のrgba(255,252,245,0.55)にとどめる。夜版
     （body.is-top-active.is-top-night）はこのセレクタの対象外の
     ため、既存の透明背景のまま変化しない。
     文字色のみ2026-09-14追記：#9a6818に変更（背景/枠/blur/位置/
     サイズ/font-weight/padding/border-radiusは無変更）。 */
  body.is-top-active:not(.is-top-night) .top-login-button-mobile {
    color: #211b46;
    background: rgba(255, 252, 245, 0.55);
    border-color: var(--top-gold-strong);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* 「CHOOSE YOUR CARD」視認性改善（2026-09-14）。ヘッダー透明化により
     背景の紫色に文字が溶けて見えづらくなったための調整。文字色のみの
     変更で、font-size/font-weight/letter-spacing/位置/上下間隔は
     共通ルール（.top-header-brand-sub、5705行目付近）のまま無変更。 */
  body.is-top-active:not(.is-top-night) .top-header-brand-sub {
    color: #665779;
  }
}

/* =========================================================
   スマホ昼版TOP・中央「TAROT」の正式ロゴ画像化（2026-09-14）
   PC昼版（body.is-top-active:not(.is-top-night) .top-hero-mark、
   @media(min-width:601px)側、6839行目付近）で正式採用済みの
   assets/input/day-open-tarot-logo.pngへの画像置換を、同じ考え方・
   同じ画像でスマホ昼版限定にも適用する。新規画像の生成・加工は
   行っていない。HTML（<p class="top-hero-mark">TAROT</p>）は無変更。
   text-indentで文字を画面外へ追い出し、background-imageでロゴを
   表示する。ベースルール（.top-hero-mark、6019行目付近）の
   background-clip:text／-webkit-background-clip:textは文字の形にしか
   背景を切り抜かないため、画面外に追い出した文字の形にクリップされて
   見えなくなる。border-boxへ明示的に戻し、通常の矩形画像として
   表示されるようにする（PC昼版・PC夜版と同じ対策）。
   サイズはスマホ共通の左右✦装飾（.top-hero-sparkle-left/right、
   6493/6497行目付近、calc(50% - 78px)で固定・変更禁止）の内側の
   間隔（156px）に収まるよう、width:156pxを上限に、画像の縦横比
   （2172×724px、約3:1）を保ったheight:52pxで表示する。
   .top-hero-sub（「CHOOSE YOUR CARD」）・.top-hero-question・
   星座占いパネル・5枚のテーマカード・背景・ヘッダー・LOGINには
   一切触れない。
   body.is-top-active:not(.is-top-night)＋@media(max-width:600px)に
   より、スマホ昼版TOP限定。PC昼版・PC夜版・スマホ夜版・他画面には
   一切影響しない。 */
@media (max-width: 600px) {
  /* 表示遅延・転送量対策（2026-09-14追記）：156×52px表示に対して元画像
     （2172×724px・約694.5KB）は過剰な解像度だったため、見た目（ゴールドの
     立体感・グラデーション・輪郭・装飾）を維持したまま2倍解像度の
     312×104px・約21.8KBへ縮小した専用軽量版
     assets/input/day-open-tarot-logo-mobile.pngへ参照を切り替えた
     （透明部分は保持。単純リサイズのみで加工なし）。元画像
     assets/input/day-open-tarot-logo.png自体は変更していない
     （PC昼版・PC夜版の.top-hero-markは引き続き元画像を参照）。
     width/height/margin/text-indent/overflow/background-size/
     background-position/background-repeatは変更していない。 */
  body.is-top-active:not(.is-top-night) .top-hero-mark {
    width: 156px;
    height: 52px;
    margin: 0 auto;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }

  /* スマホ夜版TOP・中央「TAROT」の正式ロゴ画像化（2026-09-16）。
     上のスマホ昼版ブロックと全く同じ実装・全く同じ画像
     （assets/input/day-open-tarot-logo-mobile.png、新規生成・加工なし）を
     body.is-top-active.is-top-nightへそのまま流用する。width/height/
     margin/text-indent/overflow/background-size/background-position/
     background-repeatは昼版と同一の値（現在の夜版中央ロゴの占有領域を
     維持）。.top-hero-sub・.top-hero-question・星座占いパネル・
     5枚のテーマカード・背景・ヘッダー・LOGIN・ハンバーガーメニューには
     一切触れない。PC昼版・PC夜版・スマホ昼版・他画面には影響しない。 */
  body.is-top-active.is-top-night .top-hero-mark {
    width: 156px;
    height: 52px;
    margin: 0 auto;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo-mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }
}

/* =========================================================
   PC表示（min-width:601px）専用: screen-topを1画面(100vh)に収め、
   縦スクロールを禁止する。スマホ版（max-width:600pxの既存メディアクエリ）
   には一切影響しない。
   ========================================================= */
@media (min-width: 601px) {
  body.is-top-active {
    overflow: hidden;
    height: 100vh;
  }

  body.is-top-active #app {
    padding-bottom: 0;
  }

  .screen-top {
    height: 100vh;
    padding-bottom: 6px;
  }

  .top-header {
    margin: 0 -16px 8px;
    padding: 8px 16px;
  }

  .horoscope-band {
    margin: 0 4px 8px;
    padding: 4px 18px;
  }

  .horoscope-band-head {
    margin-bottom: 2px;
    font-size: 0.66rem;
  }

  .horoscope-card {
    height: 84px;
    line-height: 1.25;
    padding: 6px 16px;
  }

  .horoscope-card-name {
    margin: 0 0 2px;
  }

  .horoscope-card-stats {
    margin: 0 0 2px;
    gap: 2px 14px;
  }

  .horoscope-card-message {
    margin: 1px 0 0;
  }

  .horoscope-dots {
    margin-top: 2px;
  }

  /* 星座カルーセル調整STEP5（PC昼版限定・中央カード拡大）:
     #horoscope-queue（VIRGO/LIBRA/SCORPIO等の予告表示）を削除した
     ことで空いた縦スペースを、中央の選択中星座カードの拡大に充てる。
     このブロック自体（.horoscope-card、100vh収まり調整）が
     screen-topを1画面に収めるためのPC専用ブロックのため、
     .horoscope-card.is-current側の上書きもここに置き、height増加分
     （84px→108px、+24px）がqueue削除で空いた分（margin-top 2px＋
     行約21px、合計約23px）とほぼ相殺されるようにしている。
     .horoscope-band自体のmargin/padding（上のこのブロック内の
     既存宣言）・.screen-topのheight:100vh・他のPC調整には触れて
     いない。夜版（body.is-top-active.is-top-night）はこのセレクタの
     対象外のため、現在の84pxのまま変化しない。 */
  body.is-top-active:not(.is-top-night) .horoscope-card.is-current {
    width: min(380px, 54vw);
    height: 108px;
    padding: 10px 20px;
  }

  body.is-top-active:not(.is-top-night) .horoscope-card.is-current .horoscope-card-name {
    margin: 0 0 4px;
    font-size: 1.05rem;
  }

  body.is-top-active:not(.is-top-night) .horoscope-card.is-current .horoscope-card-stats {
    margin: 0 0 4px;
    gap: 3px 18px;
    font-size: 0.88rem;
  }

  body.is-top-active:not(.is-top-night) .horoscope-card.is-current .horoscope-card-message {
    margin: 2px 0 0;
    font-size: 0.88rem;
  }

  /* 星座カルーセル調整STEP5・PC夜版対応（2026-09-12追加）: 上の
     PC昼版限定ブロック（body.is-top-active:not(.is-top-night)）と
     全く同じ数値を、中央の選択中星座カードとその内部文字（星座名/
     4項目運勢/ひとことメッセージ）だけに適用する。.horoscope-band
     外枠のmargin/padding/border/border-radius/background/box-shadow/
     backdrop-filter、夜版のmargin-bottom:12px（上のPC夜版専用ルール）、
     左右の前後星座カードのサイズ・クリック動作、12個ドット、自動送り・
     carousel.prev()/next()（js/horoscopeCarousel.js/js/topScreen.js）、
     HTMLには一切触れていない。中央カードの高さ増加（84px→108px）に
     伴いTAROTロゴ・5枚テーマカード・説明パネルが押し出される可能性が
     あるが、今回はそれらの調整は行わず、内部サイズの適用のみ行う。 */
  body.is-top-active.is-top-night .horoscope-card.is-current {
    width: min(380px, 54vw);
    height: 108px;
    padding: 10px 20px;
  }

  body.is-top-active.is-top-night .horoscope-card.is-current .horoscope-card-name {
    margin: 0 0 4px;
    font-size: 1.05rem;
  }

  body.is-top-active.is-top-night .horoscope-card.is-current .horoscope-card-stats {
    margin: 0 0 4px;
    gap: 3px 18px;
    font-size: 0.88rem;
  }

  body.is-top-active.is-top-night .horoscope-card.is-current .horoscope-card-message {
    margin: 2px 0 0;
    font-size: 0.88rem;
  }

  .top-hero {
    margin: 4px 0 3px;
  }

  /* 昼版PC専用: TODAY'S HOROSCOPEとTAROT見出しブロックの間隔が
     マージン相殺により詰まって見えていたため、paddingで確実に間隔を追加する
     （paddingはマージン相殺の対象外のため、指定分だけ確実に広がる）。
     夜版はセレクタで除外し影響しない。 */
  body.is-top-active:not(.is-top-night) .top-scene {
    padding-top: 16px;
  }

  .top-hero-mark {
    font-size: 2.1rem;
    line-height: 1.15;
  }

  /* PC昼版トップ画面限定: 中央の「TAROT」を正式ブランドロゴ
     （assets/input/day-open-tarot-logo.png）へ画像置換する。text-indentで
     文字を画面外へ追い出し、代わりにbackground-imageでロゴを表示する
     （HTML自体は変更しない）。ベースルール（.top-hero-mark、上記）の
     background-clip:text／-webkit-background-clip:textは、文字の形だけに
     背景を切り抜く指定のため、そのままだと画面外に追い出した文字の形に
     ロゴ画像がクリップされてしまい見えなくなる。border-boxへ明示的に
     戻し、通常の矩形画像として表示されるようにする。width/heightは
     左右の✦（.top-hero-sparkle-left/right、calc(50% - 110px)で固定、
     変更禁止）の内側の間隔（約188px）に収まる155×40pxの初期値。
     .top-hero-sub・.top-hero-question・5枚のテーマカード・背景・
     ヘッダー・星座占いには一切触れない。
     body.is-top-active:not(.is-top-night)によりPC昼版限定で、PC夜版・
     スマホ昼夜版には影響しない。 */
  body.is-top-active:not(.is-top-night) .top-hero-mark {
    width: 155px;
    height: 40px;
    margin: 0 auto;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }

  .top-hero-sub {
    margin: 2px 0 6px;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .top-hero-question {
    margin: 0 0 4px;
    font-size: 1.2rem;
    line-height: 1.2;
  }

  .top-hero-guide {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .theme-cards {
    gap: 11px;
    margin: 2px auto 6px;
  }

  /* 昼版PC専用: 説明文(.top-hero-guide)とテーマカード上端の間隔が
     マージン相殺で詰まって見えていたため、paddingで確実に間隔を追加する
     （.theme-cardsのサイズ・横位置・カード間隔・.top-heroには影響しない）。
     夜版はセレクタで除外し影響しない。 */
  body.is-top-active:not(.is-top-night) .theme-cards {
    padding-top: 10px;
  }

  /* 昼版PC専用: 5枚のテーマカードの外形サイズ・横並び幅を、夜版の金枠画像部分
     （約144.4×209.4px）に近づける。margin-top(2px)/margin-bottom(6px)と
     padding-top(10px、上記ルール)は変更せず、左右のみ0にして
     position+left+transformで中央配置する（夜版と同じ手法。#appのコンテンツ幅
     688pxより広い752pxを中央揃えするため、margin:autoでは負のauto値が0扱いに
     なり中央がずれる。詳細は夜版.theme-cardsのコメントを参照）。
     カード内部のアイコン/英字/日本語のサイズ、色・角丸・枠線・背景（.theme-card
     共通ルール）は変更しない。夜版はセレクタで除外し1pxも変更しない。 */
  body.is-top-active:not(.is-top-night) .theme-cards {
    flex-wrap: nowrap;
    gap: 8px;
    width: min(752px, calc(100vw - 32px));
    margin: 2px 0 6px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  body.is-top-active:not(.is-top-night) .theme-card {
    min-width: 144px;
    max-width: 144px;
  }

  /* 昼版PC専用: 上記で拡幅した.theme-cardsが#screen-topのoverflow:hidden(724行目)で
     クリップされないようにする。ページ全体のスクロール禁止はbody.is-top-active
     のoverflow:hidden/height:100vh（本メディアクエリ冒頭）で別途担保されているため
     影響しない（夜版のscreen-top上書きと同じ考え方）。夜版はセレクタで除外。 */
  body.is-top-active:not(.is-top-night) .screen-top {
    overflow: visible;
  }

  /* 昼版PC限定・表示テスト: LOVEカード1枚だけを新画像(day-love.png)へ差し替える。
     画像内にLOVE/恋愛の文字を含むため、既存SVGアイコン・英字・日本語ラベルは
     このカードだけ非表示にする。.theme-card自体の白背景・金枠・box-shadow・
     paddingは画像の外側に二重表示されるため、LOVEカードだけ透明な入れ物にし、
     枠・背景・影は::before（画像側）だけに持たせる（夜版と同じ考え方）。
     button自体の構造・クリック領域・data-category・イベントは変更しないため
     クリック機能に影響しない。WORK/RELATIONSHIPS/MONEY/OTHER・夜版・
     スマホ版のCSSには一切触れない。 */
  body.is-top-active:not(.is-top-night) .theme-card-love {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-love .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-love::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-image: url("../assets/cards/premium/day/day-love.png");
    background-size: 97.9% 98%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 昼版PC限定: WORKカードをday-work.pngへ差し替える（LOVEと同じ方式）。
     縮小率はLOVEの97.9%/98%を流用せず、day-work.png自体の金枠位置を実測して
     算出した値（99%）を使用。border-radius:16px適用時に四隅とも金枠が
     クリップ境界から約3px以上離れることを確認済み。
     夜版・スマホ版・他カード・data-category・クリック処理には影響しない。 */
  body.is-top-active:not(.is-top-night) .theme-card-work {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-work .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-work::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-image: url("../assets/cards/premium/day/day-work.png");
    background-size: 97.4% 99%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 昼版PC限定: RELATIONSHIPSカードをday-relationships.pngへ差し替える
     （LOVE/WORKと同じ方式）。縮小率はLOVE/WORKの数値を流用せず、
     day-relationships.png自体の金枠位置を実測して算出した値（99%）を使用。
     border-radius:16px適用時に四隅とも金枠がクリップ境界から約2.4px以上
     離れることを確認済み。夜版・スマホ版・他カード・data-category・
     クリック処理には影響しない。 */
  body.is-top-active:not(.is-top-night) .theme-card-relationships {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-relationships .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-relationships::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-image: url("../assets/cards/premium/day/day-relationships.png");
    background-size: 99% 98.2%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 昼版PC限定: MONEYカードをday-money.pngへ差し替える
     （LOVE/WORK/RELATIONSHIPSと同じ方式）。縮小率は他カードの数値を流用せず、
     day-money.png自体の金枠位置を実測して算出した値（99%）を使用。
     border-radius:16px適用時に四隅とも金枠がクリップ境界から約2.2px以上
     離れることを確認済み。夜版・スマホ版・他カード・data-category・
     クリック処理には影響しない。 */
  body.is-top-active:not(.is-top-night) .theme-card-money {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-money .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-money::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-image: url("../assets/cards/premium/day/day-money.png");
    background-size: 99% 98.1%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 昼版PC限定: OTHERカードをday-other.pngへ差し替える
     （LOVE/WORK/RELATIONSHIPS/MONEYと同じ方式）。縮小率は他4枚の数値を
     流用せず、day-other.png自体の金枠位置を実測して算出した値（99%）を使用。
     border-radius:16px適用時に四隅とも金枠がクリップ境界から約2.3px以上
     離れることを確認済み。夜版・スマホ版・他カード・data-category・
     クリック処理には影響しない。 */
  body.is-top-active:not(.is-top-night) .theme-card-other {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
  }

  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-icon,
  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-en,
  body.is-top-active:not(.is-top-night) .theme-card-other .theme-card-ja {
    display: none;
  }

  body.is-top-active:not(.is-top-night) .theme-card-other::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 16px;
    background-color: rgb(254, 253, 251);
    background-image: url("../assets/cards/premium/day/day-other.png");
    background-size: 99% 95.4%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .theme-card {
    min-width: 92px;
    max-width: 132px;
    aspect-ratio: 2 / 2.9;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 16px;
  }

  .theme-card-icon {
    height: 40px;
  }

  .theme-card-icon svg {
    width: 40px;
    height: 40px;
  }

  .theme-card-en {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .theme-card-ja {
    font-size: 0.74rem;
    line-height: 1.2;
  }

  .top-info-panel {
    margin: 0 auto 10px;
    padding: 5px 16px;
  }

  .top-info-text {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .top-disclaimer {
    gap: 2px;
    font-size: 0.62rem;
  }

  /* ---- 夜版PC専用: 5枚テーマカードを確定済みPNG画像へ差し替え。
     body.is-top-active.is-top-night かつ min-width:601px のときだけ適用。
     index.html・JS・クリック処理・data-category・昼版・スマホ版には一切影響しない。
     PNG内に中央イラスト・英字が含まれるため、.theme-card-icon/.theme-card-enは
     この条件下でのみ非表示。.theme-card-jaはカード下のラベルとして再利用し、
     新しい重複要素は作らない（DOM自体・button構造は削除しない）。 ---- */
  body.is-top-active.is-top-night .theme-card-icon,
  body.is-top-active.is-top-night .theme-card-en {
    display: none;
  }

  /* PC夜版トップ画面限定: 中央の「TAROT」を、PC昼版
     （body.is-top-active:not(.is-top-night) .top-hero-mark、上記）と
     全く同じ正式ブランドロゴ画像（assets/input/day-open-tarot-logo.png、
     新規生成・加工なし）へ画像置換する。日中版と全く同じ考え方
     （text-indentで文字を画面外へ追い出し、background-imageでロゴを
     表示。background-clip:textのままだと画面外へ追い出した文字の形に
     クリップされ見えなくなるためborder-boxへ明示的に戻す）・全く同じ
     width/height（155×40px、日中版と同じ表示サイズを基準）で実装する。
     .top-hero-sub（「CHOOSE YOUR CARD」、既存の別要素）・
     .top-hero-question・星座占いパネル・5枚のテーマカード・背景・
     ヘッダー・説明パネルには一切触れない。
     body.is-top-active.is-top-nightによりPC夜版限定で、PC昼版・
     スマホ昼夜版には影響しない。 */
  body.is-top-active.is-top-night .top-hero-mark {
    width: 155px;
    height: 40px;
    margin: 0 auto;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url("../assets/input/day-open-tarot-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }

  body.is-top-active.is-top-night .top-header {
    margin-bottom: 14px;
  }

  /* 昼版PC専用: ヘッダー背景を白系の不透明からラベンダー/ピンク/ゴールドの
     半透明ガラス調に変更し、星空背景が透けるようにする。夜版・スマホ版は対象外。 */
  body.is-top-active:not(.is-top-night) .top-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 昼版PC専用: 三日月を線・輪郭タイプから塗りつぶしのゴールド三日月へ変更 */
  body.is-top-active:not(.is-top-night) .top-header-moon-icon {
    position: relative;
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0;
    vertical-align: middle;
  }

  body.is-top-active:not(.is-top-night) .top-header-moon-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8863f' d='M12 3a9 9 0 1 0 9 9 7 7 0 1 1-9-9z'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  /* 昼版PC専用: 透明ヘッダー上でも視認できるよう文字色・太さを調整 */
  body.is-top-active:not(.is-top-night) .top-header-brand-main {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65), 0 0 1px rgba(255, 255, 255, 0.4);
  }

  body.is-top-active:not(.is-top-night) .top-header-brand-sub {
    color: #eee8f5;
  }

  body.is-top-active:not(.is-top-night) .top-nav-link {
    color: #eee8f5;
    font-size: 0.72rem;
    font-weight: 600;
  }

  body.is-top-active:not(.is-top-night) .top-nav-link + .top-nav-link {
    position: relative;
  }

  body.is-top-active:not(.is-top-night) .top-nav-link + .top-nav-link::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 0.9em;
    background: rgba(184, 134, 63, 0.45);
    transform: translateY(-50%);
  }

  body.is-top-active:not(.is-top-night) .top-login-button {
    color: #F4E6A6;
    background: rgba(65, 48, 95, 0.28);
    border-color: var(--top-gold-strong);
    box-shadow: 0 1px 4px rgba(45, 32, 70, 0.18);
    transition: background 0.2s ease;
  }

  body.is-top-active:not(.is-top-night) .top-login-button:hover {
    background: rgba(75, 56, 108, 0.38);
    cursor: pointer;
  }

  /* PC夜版TOP・LOGINボタンのhover時cursor:pointer化（2026-09-13追加）。
     見た目（背景・文字色・枠線・box-shadow・サイズ）は現行の正式デザイン
     から一切変更せず、カーソル形状だけをPC昼版の:hoverルールと同じ
     考え方でpointerにする。ベースの.top-login-button{cursor:default}
     （共通ルール、5720行目付近）はそのまま維持し、hover時だけこの
     ルールで上書きする。PC昼版側（body.is-top-active:not(.is-top-night)
     の:hover）・スマホ版・他画面には一切影響しない。 */
  body.is-top-active.is-top-night .top-login-button:hover {
    cursor: pointer;
  }

  body.is-top-active.is-top-night .horoscope-band {
    margin-bottom: 12px;
  }

  body.is-top-active.is-top-night .top-hero {
    margin-bottom: 6px;
  }

  body.is-top-active.is-top-night .top-info-panel {
    margin-bottom: 12px;
  }

  /* カード列だけを#app(720px)の制約より広げ、現在比約10%拡大する。
     #screen-topのoverflow:hiddenがこの拡張分をクリップしてしまうため、
     夜版PC限定でoverflow:visibleに変更する（ページ全体のスクロール禁止は
     bodyのoverflow:hidden/height:100vhで別途担保されており、影響しない）。
     ヘッダー・星座帯・TAROT・説明パネル等、他要素の幅・余白は変更しない。
     既存の.theme-cards/.theme-card（昼夜共通PC値）はここでは変更せず、
     夜版限定でサイズ・余白のみ上書きする（このセレクタへの上書きはこの1箇所のみ）。 */
  body.is-top-active.is-top-night .screen-top {
    overflow: visible;
  }

  body.is-top-active.is-top-night .theme-cards {
    flex-wrap: nowrap;
    gap: 8px;
    width: min(754px, calc(100vw - 32px));
    max-width: none;
    margin: 4px 0 12px;
    padding: 0;
    /* .theme-cardsの幅(754px)が親要素(#appのコンテンツ幅=688px)より大きいため、
       margin:autoでは負のauto値が0として扱われ左右均等にならなかった（右に66px
       はみ出し、中心が+33pxずれる原因）。親要素自体はviewport中央に正しく
       配置されているため、position:relative + left:50% + transform:translateX(-50%)
       で親基準の中央配置に切り替え、要素幅に関わらず正しく中央になるようにする。 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  /* button自体（.theme-card）は透明な"入れ物"にし、枠・影・背景を一切持たせない。
     PNG画像＋金枠＋影は::before疑似要素だけに適用し、日本語ラベル(.theme-card-ja)は
     その外側（枠の外）に独立して表示する。既存button構造・クリック領域・
     data-categoryはそのまま維持し、HTML/JSは変更しない。 */
  body.is-top-active.is-top-night .theme-card {
    min-width: 100px;
    max-width: 156px;
    aspect-ratio: 2 / 3.3;
    padding: 0;
    gap: 6px;
    justify-content: flex-start;
    background: none;
    border: none;
    box-shadow: none;
  }

  body.is-top-active.is-top-night .theme-card:hover,
  body.is-top-active.is-top-night .theme-card:focus-visible {
    transform: none;
    box-shadow: none;
  }

  /* PNG画像部分（::before）: 金枠・影はここだけに適用する */
  body.is-top-active.is-top-night .theme-card::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 2 / 2.9;
    border-radius: 14px;
    border: 1px solid rgba(227, 192, 122, 0.55);
    box-shadow:
      0 0 0 1px rgba(227, 192, 122, 0.12),
      0 8px 18px rgba(8, 5, 20, 0.32);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  body.is-top-active.is-top-night .theme-card:hover::before,
  body.is-top-active.is-top-night .theme-card:focus-visible::before {
    transform: translateY(-4px);
    border-color: rgba(227, 192, 122, 0.75);
    box-shadow:
      0 0 0 1px rgba(227, 192, 122, 0.2),
      0 10px 22px rgba(8, 5, 20, 0.38);
  }

  body.is-top-active.is-top-night .theme-card-love::before {
    background-image: url("../assets/cards/premium/love-card.png");
  }

  body.is-top-active.is-top-night .theme-card-work::before {
    background-image: url("../assets/cards/premium/work-card.png");
  }

  body.is-top-active.is-top-night .theme-card-relationships::before {
    background-image: url("../assets/cards/premium/relationships-card.png");
  }

  body.is-top-active.is-top-night .theme-card-money::before {
    background-image: url("../assets/cards/premium/money-card.png");
  }

  body.is-top-active.is-top-night .theme-card-other::before {
    background-image: url("../assets/cards/premium/other-card.png");
  }

  /* カード下の日本語ラベル。枠・背景を持たず、画像の外側に独立して表示する。 */
  body.is-top-active.is-top-night .theme-card-ja {
    display: block;
    border: none;
    box-shadow: none;
    background: none;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f6ecd8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  /* 「その他・自由相談」はUIラベルとしては「その他」だけを表示する。
     画像内の文字やdata-category/HTML本文は変更しない、CSSのみでの表示置換。 */
  body.is-top-active.is-top-night .theme-card-other .theme-card-ja {
    font-size: 0;
  }

  body.is-top-active.is-top-night .theme-card-other .theme-card-ja::after {
    content: 'その他';
    font-size: 1.05rem;
    font-weight: 600;
    color: #f6ecd8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

/* =========================================================
   スプラッシュ画面（STEP4: 正式デザイン、スマホ幅の昼版/夜版共通／
   STEP6: 昼版は画像を使わない超軽量CSS版に方針変更）

   ここに置くのは見た目の作り込み（配置・満月・キラキラ・タイトル文字・
   下部の花＆キャンドル＆タロットカードのテーブル・Loading表示）のみ。
   表示/非表示の付け外し・html.app-splash-visible / html.app-splash-night
   の付与条件・終了タイミング（最低300ms表示 かつ TopAssetsReady
   ready）はindex.html<head>のJST判定スクリプトとjs/topScreen.js側で
   完結しており、ここでは一切変更しない。TOP画面本体
   （body.is-top-active系の背景・カード配置・星座占い・ヘッダー等）にも
   一切触れていない。

   昼版（STEP6で方針変更）: 表示時間が非常に短いため、正式画像
   （assets/splash/splash-day.png。STEP5で一度使用したが今回不使用に
   戻した。ファイル自体はプロジェクト内に残置のみで、ここからは一切
   参照しない）は使わず、「TOP画面の重要画像読み込み中に白画面を見せ
   ない」という目的だけを満たす超軽量なCSSのみの構成にする。
     - 背景: index.html<head>のCritical CSSで既に定義済みの
       淡いラベンダー〜ピンクのグラデーション（#app-splash側）を
       そのまま使う（ここで新たな背景画像・グラデーションは追加しない）
     - 中央に大きく金色の「TAROT」（#app-splash-mark、既存のまま）
     - その下に小さく「あなたの未来を照らす」1行のみ
       （.app-splash-tagline、2行目「タロット占い」は昼版だけ非表示）
     - 最下部付近に小さく「Loading...」（.app-splash-loading、既存のまま）
     - 満月（.app-splash-moon）・キラキラ（.app-splash-sparkle）・
       下部シーン（.app-splash-scene）は昼版では非表示にし、
       画像/重い装飾を一切読み込まない・描画しない構成にしている
   夜版はこのSTEP6で一切変更していない（STEP4のまま）。 */
@media (max-width: 600px) {
  .app-splash-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
  }

  html.app-splash-night .app-splash-sky {
    background-image: url("../assets/splash/splash-sky-night.webp");
  }

  /* 昼版: 超軽量CSS版のため、満月・キラキラ・下部シーン（画像想定）は
     非表示にする。TAROT文字・タグライン1行目・Loadingは表示する
     （下のcontent/tagline/loading各ルールで通常表示のまま）。
     夜版（html.app-splash-night）はこの対象外＝STEP4のまま表示される。 */
  html:not(.app-splash-night) .app-splash-moon,
  html:not(.app-splash-night) .app-splash-sparkle,
  html:not(.app-splash-night) .app-splash-scene {
    display: none;
  }

  /* 昼版だけ、タグラインは1行目「あなたの未来を照らす」のみ表示し、
     2行目「タロット占い」は表示しない。夜版は2行とも表示のまま
     （このセレクタの対象外）。 */
  html:not(.app-splash-night) .app-splash-tagline span:nth-child(2) {
    display: none;
  }

  /* 満月。画像アセットではなく、既存TOP画面の月アイコン配色
     （--top-gold-strong等の実値）に近いradial-gradientで表現する。
     昼夜で同じ形・同じ質感のまま使う（色味だけ背景に合わせて微調整）。 */
  .app-splash-moon {
    position: absolute;
    z-index: 0;
    top: 13%;
    right: 15%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fffef8 0%, #fbe9c2 40%, #cda45a 78%, rgba(205, 164, 90, 0) 100%);
    box-shadow: 0 0 40px 12px rgba(205, 164, 90, 0.35);
  }

  html.app-splash-night .app-splash-moon {
    background: radial-gradient(circle at 35% 32%, #fffef8 0%, #fbe9c2 38%, #e3c07a 76%, rgba(227, 192, 122, 0) 100%);
    box-shadow: 0 0 46px 14px rgba(227, 192, 122, 0.45);
  }

  /* ゴールドの天体装飾。既存.top-hero-sparkleと同じキラキラ形状
     （四方に伸びる星形パス）を、色違いで複数散らして表現する。 */
  .app-splash-sparkle {
    position: absolute;
    z-index: 0;
    width: 18px;
    height: 18px;
    color: #cda45a;
    opacity: 0.85;
  }

  html.app-splash-night .app-splash-sparkle {
    color: #e3c07a;
  }

  .app-splash-sparkle-a {
    top: 20%;
    left: 14%;
  }

  .app-splash-sparkle-b {
    top: 32%;
    right: 22%;
    width: 12px;
    height: 12px;
  }

  .app-splash-sparkle-c {
    top: 50%;
    left: 22%;
    width: 10px;
    height: 10px;
  }

  .app-splash-content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: -8vh;
    padding: 0 24px;
  }

  #app-splash-mark {
    margin: 0;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    background: linear-gradient(135deg, #b8863f, #cda45a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  html.app-splash-night #app-splash-mark {
    background: linear-gradient(135deg, #cda45a, #e3c07a);
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* 昼版限定：スプラッシュ中央表示を「TAROT」→「TAROLUNE」へ変更
     （2026-09-14 正式採用）。夜版（html.app-splash-night）はこの対象外で、
     上のTAROT表示（font-size:2.2rem等）のまま変更しない。HTML側の
     テキスト「TAROT」自体は変更せず、既存の.faq-logo等と同じ
     font-size:0 + ::after方式で、見た目上だけ「TAROLUNE」へ差し替える。
     TAROTより文字数が多いため、font-size/letter-spacingを画面内に
     自然に収まる値へ調整しつつ、同じ書体・同じゴールドグラデーションを
     維持する。 */
  html:not(.app-splash-night) #app-splash-mark {
    font-size: 0;
  }

  html:not(.app-splash-night) #app-splash-mark::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    background: linear-gradient(135deg, #b8863f, #cda45a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 夜版限定：スプラッシュ中央表示を「TAROT」→「TAROLUNE」へ変更
     （2026-09-16 正式採用）。昼版（html:not(.app-splash-night)）は
     上のTAROLUNE表示のまま変更しない。HTML側のテキスト「TAROT」自体は
     変更せず、昼版と全く同じfont-size:0 + ::after方式で、見た目上だけ
     「TAROLUNE」へ差し替える。書体・letter-spacing・文字サイズは昼版の
     TAROLUNE表示と同じ値を使い、色（グラデーション）だけは既存の
     夜版ゴールド（#cda45a, #e3c07a、上のhtml.app-splash-night
     #app-splash-markで使用中の値）を維持する。 */
  html.app-splash-night #app-splash-mark {
    font-size: 0;
  }

  html.app-splash-night #app-splash-mark::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Georgia", serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    background: linear-gradient(135deg, #cda45a, #e3c07a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .app-splash-tagline {
    margin: 16px 0 0;
    font-size: 0.85rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    color: #7a7190;
  }

  html.app-splash-night .app-splash-tagline {
    color: #a79bc4;
  }

  .app-splash-tagline span {
    display: block;
  }

  /* 昼版限定：サブコピー1行目「あなたの未来を照らす」→
     「CHOOSE YOUR CARD」へ変更（2026-09-14 正式採用）。夜版
     （html.app-splash-night）はこの対象外で、元の日本語
     （あなたの未来を照らす／タロット占い）のまま変更しない。HTML側の
     テキスト自体は変更せず、#app-splash-mark（TAROLUNE）と同じ
     font-size:0 + ::after方式で見た目上だけ差し替える。TAROLUNE
     （font-size:1.7rem）より明確に小さいサイズ・上品なletter-spacingの
     英字大文字にし、色は現在のタグライン色（#7a7190）をそのまま使う。 */
  html:not(.app-splash-night) .app-splash-tagline span:nth-child(1) {
    font-size: 0;
  }

  html:not(.app-splash-night) .app-splash-tagline span:nth-child(1)::after {
    content: 'CHOOSE YOUR CARD';
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: #7a7190;
  }

  /* 下部の花＆キャンドル＆タロットカードのテーブル。画像未配置の間は
     透明のまま（空欄でも崩れない）。 */
  .app-splash-scene {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32vh;
    max-height: 240px;
    background-image: url("../assets/splash/splash-scene-day.webp");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  html.app-splash-night .app-splash-scene {
    background-image: url("../assets/splash/splash-scene-night.webp");
  }

  .app-splash-loading {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 6%;
    margin: 0;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: #7a7190;
  }

  html.app-splash-night .app-splash-loading {
    color: #a79bc4;
  }

  .app-splash-loading-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .app-splash-loading-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    animation: app-splash-dot-blink 1.2s infinite ease-in-out;
  }

  .app-splash-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .app-splash-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes app-splash-dot-blink {
    0%, 80%, 100% {
      opacity: 0.25;
    }
    40% {
      opacity: 1;
    }
  }
}

/* コース選択画面（3/5/7枚）専用スタイル。既存の.primary-button・.card・
   .card-grid・.screen等の共通クラス定義は一切変更せず、すべて
   #screen-course配下にスコープする（他の正式採用済み画面への影響を防ぐ）。
   戻るボタンは既存の.select-back-button、見出し・案内文は既存の
   h2・.guide-textをそのまま流用し、ここでは新規追加分のみ定義する。 */
#screen-course .course-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 24px auto 0;
}

#screen-course .course-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(227, 192, 122, 0.4);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

#screen-course .course-option:hover {
  border-color: var(--gold);
}

#screen-course .course-option-name {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--gold);
}

#screen-course .course-option-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* 将来の料金表示用の空領域。今回は文字を入れないため、空の間は
   高さ0のまま表示に影響しない。 */
#screen-course .course-option-price {
  font-size: 0.85rem;
  color: var(--gold);
}

#screen-course .course-option-price:empty {
  display: none;
}

/* =========================================================
   相談入力画面（PC限定）バグ修正: #input-errorだけdocumentフローに
   残っていたため、非表示解除時に#screen-input（height:100vh固定・
   overflow指定なし）の実高さを押し上げ、縦スクロールバーが出現→
   #screen-input本体のwidth:100vwがスクロールバー分を考慮しないため、
   画面全体が左右にズレて見える不具合があった。
   他の重ね配置要素（.screen-tagline/.input-card-note等）と同じく
   position:absoluteにしてフローから外すことで解消する。
   位置は、textarea（top:43%+height:17%=下端60%）と#start-button
   （top:63%）の間の余白に置き、他要素の位置・サイズには一切触れない。
   .error-textの色・文字サイズ・text-align（共通スタイル）は変更しない。 */
@media (min-width: 601px) {
  #screen-input #input-error {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    margin: 0;
  }
}

/* =========================================================
   相談入力画面（PC限定）: 3/5/7枚コースのインライン選択UI（初期値）。
   背景パネル・白箱・カード画像は使わず、文字だけを3列横並びで配置する。
   #screen-input本体・見出し・textarea・#start-button・背景・ヘッダー・
   下部カード列の位置サイズには一切触れない。
   width/max-width/top/文字サイズは初期値で、実機確認後に微調整予定。
   スマホ版は下のmax-width:600pxブロックで非表示にし、既存の
   screen-course（コース選択画面）を引き続き使用する。 */
@media (min-width: 601px) {
  #screen-input .course-preview {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 48px;
    width: 80%;
    max-width: 860px;
  }

  #screen-input .course-preview-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
  }

  #screen-input .course-preview-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
  }

  #screen-input .course-preview-desc {
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.85;
  }

  /* 選択状態: 背景・発光は使わず、細いゴールド下線＋font-weightの
     小さな変化だけで表現する（塗り・パネルは追加しない）。 */
  #screen-input .course-preview-item.is-selected .course-preview-name {
    font-weight: 700;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
  }

  /* 「コースを選択してください」エラー。#input-errorで発生した
     documentフロー起因のスクロールバー/画面ズレ（上のブロック参照）を
     再発させないよう、最初からposition:absoluteでフローから外す。 */
  #screen-input #course-preview-error {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90%;
    margin: 0;
  }
}

/* PC昼版: 文字だけのデザインを維持したまま可読性のみ改善する
   （塗り背景・帯は追加しない）。top/width/max-width/gap/3列の中心位置は
   変更しない。box-sizing:border-box（グローバル設定）のため、
   border/paddingを追加してもflex:1で決まる各列の外枠幅・位置は
   変わらない。font-size/font-weight/枠線は昼版だけの上書きとし、夜版の
   .course-preview-name/.course-preview-desc（上のブロック、0.85rem/600・
   0.72rem）・枠なしの見た目には触れない。
   色は.input-nav-link等で既に使っている濃い紫黒（#180f2b）を流用し、
   text-shadowはスマホ昼版.screen-taglineで実証済みの
   ごく弱い白系（rgba(255,255,255,0.5)）をそのまま使う。 */
@media (min-width: 601px) {
  body.is-input-day #screen-input .course-preview-item {
    color: #180f2b;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 12px 24px;
  }

  body.is-input-day #screen-input .course-preview-name {
    font-size: 0.95rem;
    font-weight: 700;
  }

  body.is-input-day #screen-input .course-preview-desc {
    font-size: 0.85rem;
    font-weight: 600;
  }

  /* 選択状態: 楕円の金枠の色をわずかに強調し、背景も未選択時の白系
     半透明（rgba(255,255,255,0.4)）から、既存のvar(--gold)（#cda45a）を
     ベースにした薄いゴールド系半透明へ変える。黒での暗転ではなく
     色味を暖色寄りに変えるだけなので、ピンク/ラベンダー/ゴールドの
     世界観を保ったまま「少し暗く・選択中と分かる」見た目にする
     （新しい色を増やさず、既存var(--gold)の値をrgba化しただけ）。
     名前行の下線（.is-selected .course-preview-name、上のブロック）は
     楕円枠と重複するため、昼版だけ無効化する（夜版は従来どおり維持）。 */
  body.is-input-day #screen-input .course-preview-item.is-selected {
    border-color: var(--gold-strong);
    background: rgba(205, 164, 90, 0.45);
  }

  body.is-input-day #screen-input .course-preview-item.is-selected .course-preview-name {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* 「コースを選択してください」エラー（#course-preview-error）の位置調整。
     昼版限定の.course-preview-item（padding:12px 24px＋border付き楕円、
     拡大フォント）により項目の縦の高さが夜版より高くなっているため、
     共通ルール（top:39%、上のブロック）のままだと5枚コースの説明文と
     重なる。「占いを始める」ボタン（top:63%、高さ約56px）の下、十分な
     余白を空けたtop:72%で正式採用。位置は今後変更しない。
     .course-preview・カード位置・背景・入力欄・#start-buttonには
     一切触れない。夜版は共通ルールのtop:39%のまま変更しない。 */
  body.is-input-day #screen-input #course-preview-error {
    top: 72%;
    color: #8f304f;
    font-weight: 600;
  }

  /* 「相談内容を入力してください。」エラー（#input-error）。共通ルール
     （top:61%、textarea下端60%と#start-button（top:63%）の間の狭い
     隙間を狙った値）のままだと、テキストの高さ分だけボタンの後ろ付近に
     重なる。#course-preview-errorと同様、#start-buttonの下に十分な
     余白を空けたtop:72%・同じ配色に統一する。#input-errorと
     #course-preview-errorはonStart()の分岐上、同時表示されないため
     衝突しない。.course-preview・入力欄・#start-button・背景・カード
     画像には一切触れない。夜版は共通ルールのtop:61%のまま変更しない。 */
  body.is-input-day #screen-input #input-error {
    top: 72%;
    color: #8f304f;
    font-weight: 600;
  }

  /* PC夜版限定（2026-09-12追加）: 上の日版と同じ理由・同じtop値で
     #input-errorをボタンの下へ移動する。共通ルール（top:61%、上記）は
     textarea下端(60%)と#start-button(63%)の間の狭い隙間にあり、
     ボタンに重なって見えていた。top:72%は実機確認済みで正式な位置の
     ため変更しない。
     文字色（2026-09-12追記、実機確認後に再調整）: 既存の.error-text色
     #e08a8aは背景中央の金色〜オレンジの発光部分と重なると視認性が
     低かったため、#ff9fbdへ変更したが、実機確認の結果さらに
     #f4eef8（PC夜版で使用している白〜淡いラベンダー系）へ調整した
     （日版の色#8f304fには触れない）。
     #consultation-input・#start-buttonの位置/サイズ、背景画像・
     background-size・background-position・左右帯修正には一切触れない。 */
  body.is-input-active:not(.is-input-day) #screen-input #input-error {
    top: 72%;
    color: #f4eef8;
    font-weight: 600;
  }

  /* PC夜版限定（2026-09-12追加）: 「占うカードの枚数を選んでください。」
     エラー（#course-preview-error）を、正式採用済みの#input-error
     （上記）と完全に同じ位置・文字色・太さへ揃える。共通ルール
     （top:39%、上のブロック）のままだと5枚コースの説明文と重なる
     ため、#input-errorと同じtop:72%・同じcolor:#f4eef8・同じ
     font-weight:600を適用する。#input-error自体・#consultation-input・
     #start-buttonの位置/サイズ、3枚/5枚/7枚の表示位置/サイズ、
     背景画像・background-size・background-position・左右帯修正には
     一切触れない。エラー表示ロジック・文言も変更しない。 */
  body.is-input-active:not(.is-input-day) #screen-input #course-preview-error {
    top: 72%;
    color: #f4eef8;
    font-weight: 600;
  }
}

/* =========================================================
   PC昼版・相談入力画面: 3枚/5枚/7枚/13枚Premiumを「同一フレックス
   コンテナの4兄弟」として4列表示する（2026-09-18、前回のposition:
   absolute個別配置方式を撤去した上での再実装）。

   HTML側（index.html）に.course-preview-row（新規、見た目・
   position指定を一切持たないプレーンな<div>）を追加し、.course-preview
   （3枚/5枚/7枚の入れ物）と.input-thirteen-card-promo（13枚Premium）を
   その中にまとめた。PC昼版だけ.course-previewにdisplay:contentsを
   与えて箱を消し、中の3つの.course-preview-itemを.course-preview-row
   の直接のflex子要素として扱えるようにする（display:contentsを与えた
   要素は自身のposition/width/background等のボックス関連プロパティが
   一切効かなくなるため、.course-previewが元々持つposition:absolute/
   top:34%/left:50%/transform/display:flex/gap:48px/width:80%/
   max-width:860px（9558〜9568行目、無条件のベースルール）は、この
   PC昼版スコープでは実質無効化される。それらの値自体は削除・変更して
   いない＝PC夜版ではdisplay:contentsを与えないため、.course-preview
   自身が従来どおりposition:absoluteの箱として機能し続け、3列表示は
   一切変化しない）。
   .input-thirteen-card-promoもこのブロックで初めてdisplay:noneを
   解除し、flex:1で.course-preview-item（3/5/7枚、無条件flex:1の
   ベースルール、9571行目）と同じ幅配分を受け取る、真の4列目として
   並ぶ。

   縦位置（top:34%）は、.course-previewが元々持っていたPC共通のtop値を
   そのまま.course-preview-rowへ移しただけで、変更していない。
   #consultation-input・#start-button・下部カード・背景は今回一切
   触れていない（.course-preview-rowはabsolute配置のため、内容の高さが
   変化しても後続要素を押し下げない）。

   3枚/5枚/7枚の文言・料金・説明・クリック処理・既存の配色
   （.course-preview-item、9570〜9584/9631〜9666行目の各ルール）は
   1文字も変更していない。13枚Premium側は、ここで初めてPC昼版向けに
   スタイルを与えるが、値は既存の.course-preview-item（日版）と
   完全に同じ配色（アイボリー半透明背景rgba(255,255,255,0.4)・
   ゴールド枠var(--gold)・border-radius:999px・padding:12px 24px・
   文字色#180f2b）を流用しており、新しい色・アイコン・画像・装飾は
   追加していない。「♛ Premium限定」の文字だけvar(--gold-strong)
   （既存の強調ゴールド変数）を使い、Premium限定であることを控えめに
   示す。選択中の見た目（.is-selected）も、.course-preview-item（日版）
   の既存値（border-color:var(--gold-strong); background:
   rgba(205,164,90,0.45);）をそのまま流用しており、13枚だけ別の
   派手な演出は追加していない。

   幅：3列時代のwidth:80%/max-width:860pxから、4列を既存フォント
   サイズ・既存padding（12px 24px、変更なし）のまま自然に収めるため、
   width:88%/max-width:1260pxへ拡大した。画面端まで広げず、gapは
   48px→20pxへ縮小している。

   PC夜版（body.is-input-active:not(.is-input-day)側の無条件.course-
   preview・.course-preview-item、.input-thirteen-card-promoの
   display:none既定値）、スマホ昼版・スマホ夜版（@media max-width:600px
   側の既存ブロック）には一切触れていない。.course-preview-row自体には
   PC昼版以外でCSSを一切適用していないため（position指定なし＝
   デフォルトstatic）、.course-preview／.input-thirteen-card-promoの
   position:absoluteの基準（#screen-input、position:relative）は
   変わらず、スマホ側の座標計算（top: calc(21% + 111.34px)等）は
   一切影響を受けない。 */
@media (min-width: 601px) {
  body.is-input-day #screen-input .course-preview-row {
    position: absolute;
    /* 縦位置調整（2026-09-18）: .input-tarot-mark・.screen-taglineと
       同じ20px分、まとめて上へ移動する（相談入力欄top:43%との間隔を
       広げるため）。元の基準top:34%は残し、20pxだけ差し引く。
       left/transform/display/gap/width/max-widthは変更していない。 */
    top: calc(34% - 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 88%;
    max-width: 1260px;
  }

  /* .course-preview自身の箱を消し、中の3つの.course-preview-itemを
     .course-preview-rowの直接のflex子要素にする。 */
  body.is-input-day #screen-input .course-preview-row .course-preview {
    display: contents;
  }

  /* 13枚Premium（4列目）。.course-preview-item（日版）と同じ配色・
     形状を流用し、3/5/7枚と統一されたコース選択ボタンとして見せる。 */
  body.is-input-day #screen-input .course-preview-row .input-thirteen-card-promo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: #180f2b;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 12px 24px;
    text-align: center;
    white-space: normal;
    cursor: pointer;
  }

  body.is-input-day #screen-input .course-preview-row .input-thirteen-card-promo-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
  }

  body.is-input-day #screen-input .course-preview-row .input-thirteen-card-promo-badge {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gold-strong);
  }

  body.is-input-day #screen-input .course-preview-row .input-thirteen-card-promo-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0.85;
  }

  /* コース説明文（3/5/7枚・13枚とも）: 4列化で幅が変わっても、列に
     収まらない場合だけ自然に折り返せるようnowrapを解除する（文字
     サイズは変更しない）。コース名（.course-preview-name）は
     .course-preview-item由来のnowrapを維持し、引き続き1行で表示する。 */
  body.is-input-day #screen-input .course-preview-desc {
    white-space: normal;
  }

  /* 選択中の見た目は、.course-preview-item.is-selected（日版、9658〜
     9661行目）と完全に同じ値を流用する。派手な新規演出は追加して
     いない。 */
  body.is-input-day #screen-input .course-preview-row .input-thirteen-card-promo.is-selected {
    border-color: var(--gold-strong);
    background: rgba(205, 164, 90, 0.45);
  }
}

/* =========================================================
   PC夜版・相談入力画面: 3/5/7/13枚を同一フレックスコンテナで4列化
   （2026-09-18新規）。上のPC昼版ブロック（body.is-input-day
   #screen-input .course-preview-row ...）と全く同じ構造上の仕組み
   （.course-preview-row＋.course-previewへのdisplay:contents）を
   そのまま流用し、値もPC昼版と同じ幅・gap・配置ロジック
   （width:88%/max-width:1260px/gap:20px、.course-previewを
   display:contentsで消して中の3ボタンを直接のflex子要素にする）を
   使う。「必要なレイアウト調整」はPC昼版と共通のため新しい値を
   作っていない。

   ただし色・形状はPC昼版の「アイボリー半透明の丸ボタン（ゴールド枠・
   背景あり）」をコピーしていない。PC夜版の3/5/7枚
   （#screen-input .course-preview-item、PC共通の無条件ベースルール、
   9570〜9600行目付近。PC夜版はこのベースルールをそのまま使っており、
   PC昼版のような専用の配色上書きを持たない）は、背景・枠なしの
   プレーンな文字表示＋選択中は名前だけ下線＋太字という既存デザインの
   ため、13枚Premium（.input-thirteen-card-promo）も同じプレーンな
   文字表示に合わせる。文字色はPC夜版の.course-preview-itemが使っている
   既存のvar(--text)をそのまま使用し、新しい色は作っていない。
   「♛ Premium限定」バッジだけ、PC昼版と同じ考え方でvar(--gold-strong)
   （既存の強調ゴールド変数）を使う。

   縦位置（top:34%）は、PC夜版の.course-previewが元々持っていたPC共通の
   top値をそのまま使用し、変更していない（PC昼版で行った20px上への
   移動は、パディング付きの丸ボタン化で縦の高さが増えたことへの対応
   だったため、パディングを持たないPC夜版のプレーン表示には適用して
   いない）。#consultation-input・#start-button・下部カード・背景・
   TAROTロゴ・案内文言には一切触れていない。

   選択中の見た目（.is-selected）は、PC夜版3/5/7枚の既存の選択表現
   （.course-preview-item.is-selected .course-preview-name{font-weight:
   700; border-bottom:2px solid var(--gold); padding-bottom:2px;}、
   PC共通の無条件ベースルール、9599〜9604行目付近）と同じ値を
   .input-thirteen-card-promo-nameにも適用しており、13枚だけ別の
   派手な演出（PC昼版のゴールド背景パネル等）は追加していない。

   PC昼版・スマホ昼版・スマホ夜版・他画面には一切触れていない。 */
@media (min-width: 601px) {
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 88%;
    max-width: 1260px;
  }

  /* .course-preview自身の箱を消し、中の3つの.course-preview-itemを
     .course-preview-rowの直接のflex子要素にする（PC昼版と同じ仕組み）。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .course-preview {
    display: contents;
  }

  /* 13枚Premium（4列目）。PC夜版3/5/7枚と同じプレーンな文字表示
     （背景・枠なし）に合わせ、色はPC夜版の既存文字色var(--text)を
     そのまま使う。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: var(--text);
    text-align: center;
    white-space: normal;
    cursor: pointer;
  }

  /* 縦位置修正（2026-09-18）。原因調査の結果、.input-thirteen-card-
     promo-row1（.input-thirteen-card-promo-name/-badgeをまとめる
     <span>ラッパー）だけがline-heightを明示指定していなかった
     （-name/-badge/-descはいずれもline-height:1.4を持つ）ため、
     bodyのline-height:1.75（22行目付近）がそのまま継承され、
     -row1自身のストラット（行内書式コンテキストで最低限確保される
     見えない行高さ）が実際の文字（line-height:1.4）より高くなり、
     その差分（約半分の行送り）が文字の上側に余分な空間として
     入り込み、タイトル文字とborder-bottomが3/5/7枚より下にずれて
     見えていた。3/5/7枚の.course-preview-item配下には
     このような中間ラッパーが存在せず（.course-preview-nameが
     直接の子で、自身のline-height:1.4がそのまま効く）、この問題が
     発生しない。
     修正は、-row1にも兄弟要素と同じline-height:1.4を明示指定する
     だけ（transform/top等による強制移動は使用していない）。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo-row1 {
    line-height: 1.4;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo-badge {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gold-strong);
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.4;
    opacity: 0.85;
  }

  /* コース説明文（3/5/7枚・13枚とも）: 4列化で幅が変わっても、列に
     収まらない場合だけ自然に折り返せるようnowrapを解除する（文字
     サイズは変更しない、PC昼版と同じ考え方）。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-desc {
    white-space: normal;
  }

  /* 選択中の見た目（2026-09-18、描画方式をborder-bottomへ変更）。
     .input-thirteen-card-promo-row1は.input-thirteen-card-promo
     （display:flex;flex-direction:column;、align-items未指定＝初期値
     stretch）の直接の子であり、幅・align-self等の上書きを一切持たない
     ため、常に親の全幅までstretchされる（コード上で確認済み。以前の
     ::after{width:100%}もこの-row1のstretch済み幅を基準にしていたため、
     border-bottomに置き換えても線の長さ・横位置は変わらない）。
     ::after＋transform:translateX(-50%)による中央寄せ描画は、border-
     bottom（通常のボックス境界線としてピクセルスナップされやすい）より
     太く/ぼやけて見えることが実機で確認されたため、::afterは廃止し、
     5枚選択時（.course-preview-item.is-selected .course-preview-name、
     border-bottom:2px solid var(--gold); padding-bottom:2px;、
     9928〜9931行目、PC共通の無条件ベースルール）と全く同じ描画方式・
     全く同じ値をこの-row1へ直接適用する。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo.is-selected .input-thirteen-card-promo-name {
    font-weight: 700;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-row .input-thirteen-card-promo.is-selected .input-thirteen-card-promo-row1 {
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
  }
}

/* スマホ版: 上のルールでは昼夜とも一律display:noneにしているが、
   スマホ昼版・スマホ夜版それぞれ、下の2つのブロックがより詳細度の
   高いセレクタ（body.is-input-day / body.is-input-active:not(.is-input-day)）
   で個別に再表示する。 */
@media (max-width: 600px) {
  #screen-input .course-preview,
  #screen-input #course-preview-error {
    display: none;
  }
}

/* =========================================================
   スマホ昼版: 見出し（.screen-tagline/.input-tarot-mark、上の
   ブロックでtopを引き上げ済み）の下に3コースを縦3段で追加する
   （実装トライアル・実機確認待ち）。
   #consultation-input（top:41%/bottom:calc(safe-area+255px)/width:84%/
   padding等）・#start-button・背景画像・background-size/position・
   下部7枚カード（背景に焼き込み済み）は一切変更していない。
   PC昼版（@media min-width:601px側の.course-preview関連）・
   スマホ夜版（body.is-input-dayが付かない場合は上のブロックの
   display:noneのまま）・他画面には一切触れない。
   PC昼版と同じ世界観（細い金枠・薄い白系半透明・強いぼかしなし）を
   踏襲しつつ、縦スペース制約のため文字サイズ・paddingをより
   コンパクトにしている。 */

/* 13枚Premium鑑定：レイアウト確認用の表示のみ（2026-09-17追加）。
   スマホ昼版限定で表示するため、まずメディアクエリの外（＝PC/スマホ・
   昼夜すべて）でdisplay:noneをデフォルトにする。スマホ昼版側の
   body.is-input-day #screen-input .input-thirteen-card-promo（下記）
   だけが、より詳細度の高いセレクタでこれを上書きしてdisplayを
   戻す。既存の.course-preview-item（3/5/7枚）とは完全に別クラスの
   ため、幅・高さ・文字サイズ・padding・border・border-radius・gap・
   選択表示には一切影響しない。 */
.input-thirteen-card-promo {
  display: none;
}

@media (max-width: 600px) {
  /* 実機確認後の微調整（2026-09-17）。TAROT見出し〜13枚Premiumボタン
     までの一団を、相対関係・間隔を維持したままH=800想定で約10px
     まとめて上へ移動する（第3段階）。top:22.25%→21%。
     .course-preview-item（幅・高さ・文字サイズ・padding・border・
     border-radius・gap・選択表示）は一切変更していない。直下の
     .input-thirteen-card-promo（top: calc(21% + 111.34px)、下記）も
     同じ21%を基準にしているため、.course-previewとの相対間隔（3px）は
     変更されない。#consultation-inputは変更していない。 */
  body.is-input-day #screen-input .course-preview {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 21%;
    left: 50%;
    transform: translateX(-50%);
    gap: 3px;
    width: 84%;
  }

  /* 13枚Premium鑑定：レイアウト確認用の表示のみ（第6版、2026-09-17、
     画像方式からHTML+CSS方式へ変更）。「豪華な別バナー」ではなく
     「3/5/7枚と同じUIファミリーで、配色だけがPremium」という方針に
     基づき、.course-preview-item（3/5/7枚）と全く同じ外寸・box構造
     （display:flex;flex-direction:column;gap:2px;border:1px solid;
     border-radius:999px;padding:2px 12px;2行構成）を、別クラス
     （.input-thirteen-card-promo系）で複製し、背景色・枠色・文字色
     だけを紫×ゴールドに変えている。.course-preview・
     .course-preview-item（3/5/7枚）・#consultation-inputの値は
     どれも一切変更していない。
     width:84%・height:34.112pxは前バージョン（画像方式）から変更して
     いない（7枚ボタンの実測boxとの一致のため）。topの基準%は後述の
     実機確認後の微調整で更新しているが、+111.34px分（7枚→13枚のgap
     約3px）自体は変更していない。border-radius:999pxも
     .course-preview-itemの宣言値と同じ。
     background-image／background-size／background-position／
     overflow:hidden（画像クロップ目的）は今回すべて廃止し、単色の
     background-colorへ置き換えた。画像ファイル自体
     （day-course-13-premium-button-v3.png・-v3-mobile.webp・旧v1/v2系
     一式）は削除しておらず、単にCSSから参照しなくなっただけで、
     元に戻す場合はbackground-image指定を復元するだけでよい状態を
     維持している。
     背景色#3b1257は、ユーザー指定の候補（#35104f/#3b1257/#40145e）の
     中間値を採用した（3案とも大きな差はないため、TAROLUNE昼版の
     淡い紫〜ラベンダー系の世界観に対して最も自然に馴染むと判断した
     中間の濃さを選んだ）。
     1行目は「13枚｜プレミアム鑑定」（.input-thirteen-card-promo-name、
     .course-preview-nameと同じ0.72rem/700/line-height1.2）と、
     右側の小さな「♛ Premium限定」バッジ（.input-thirteen-card-promo-
     badge、0.56rem/600、背景色なし・王冠1つのみのテキストバッジ）を
     flex行（.input-thirteen-card-promo-row1、gap:6px、
     align-items:baseline）で横並びにしている。2行目
     （.input-thirteen-card-promo-desc）は.course-preview-descと同じ
     0.64rem/600/line-height1.2。文字色はメインがvar(--gold)
     （#cda45a）、Premium限定バッジのみvar(--gold-strong)
     （#e3c07a、指示により少し明るいゴールドを許容）。
     背景の半透明化（2026-09-17追記）：ベタ塗り#3b1257（rgba換算
     59,18,87,1）から、同じ色のアルファだけを0.62へ下げたrgba
     (59, 18, 87, 0.62)へ変更した。色そのもの（RGB値）は変えていない
     ため、紫の色味・Premiumとしての差別化は維持しつつ、背後の
     スマホ昼版背景画像（day-consultation-bg.png）がうっすら透けて
     見えるようにしている。

     実機確認後の微調整（2026-09-17）：TAROT見出し〜13枚Premium
     ボタンまでの一団をまとめて上へ移動する第3段階に合わせ、
     top: calc(22.25% + 111.34px) → calc(21% + 111.34px)。
     .course-preview（top:21%、上記）と同じ基準値へ揃えているだけで、
     +111.34px（3項目分の高さ＋7枚→13枚のgap3px）は変更していないため、
     .course-previewとの相対間隔（3px）はそのまま維持される。

     選択可能化（2026-09-17、表示専用→選択可能への変更）：
     data-spread-id="thirteen-card"（index.html側）を追加し、
     js/main.jsのcoursePreviewButtonsのquerySelectorAllへ
     .input-thirteen-card-promoを加えただけで、既存の3/5/7枚と
     全く同じクリックリスナー・排他選択（is-selected付け外し）・
     リセット処理をそのまま共有している（この要素専用の新しい
     JS関数は書いていない）。cursor:pointerに変更し、3/5/7枚と
     同じ「押せる」見た目にした。選択中の見た目は下記
     .is-selectedルールのみで表現し、width/height/background/
     border-radius/文字/文言/2行構成は変更していない。 */
  body.is-input-day #screen-input .input-thirteen-card-promo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(21% + 111.34px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 84%;
    height: 34.112px;
    background: rgba(59, 18, 87, 0.62);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 12px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* タップ時の押し込み感（2026-09-17追加）。この要素は中央寄せに
     translateX(-50%)を使っているため、単純なscale上書きは横位置が
     ズレる。必ずtranslateX(-50%)と合成すること。 */
  body.is-input-day #screen-input .input-thirteen-card-promo:active {
    transform: translateX(-50%) scale(0.98);
  }

  /* 13枚Premium選択中の見た目（2026-09-17新規、同日「✓ 選択中」
     チップは実機確認の結果UIパーツ感が強く安っぽく見えるため不採用・
     削除済み）。3/5/7枚の.is-selected（border-color:var(--gold-strong)＋
     背景をゴールド系に変える方式）とは違い、13枚Premiumは「深い紫＋
     上品なゴールドの余韻」というPremium専用の特別感を保つため、文字・
     ラベル類は一切追加せず、紫背景の濃さ・枠のゴールド・ごく控えめな
     外周の光の3点だけで選択中を表現する。派手なネオン発光・黄色い
     ベタ塗りにはしない。background/width/height/border-radius/文字/
     文言は一切変更していない。 */
  body.is-input-day #screen-input .input-thirteen-card-promo.is-selected {
    background: rgba(59, 18, 87, 0.8);
    border-color: #f0d28a;
    box-shadow: 0 0 10px rgba(227, 192, 122, 0.4);
  }

  /* 13枚Premiumタップ時の一度きりのゴールド発光演出（2026-09-17新規、
     同日「ボタン面そのものが一瞬明るく発光する」よう強化）。
     本体のbox-shadow（.is-selectedの控えめな余光、上記）とは別レイヤーの
     ::before疑似要素にだけアニメーションさせることで、「選択後ずっと光る
     余光」と「タップ瞬間だけ広がる強い光」を独立させ、互いに干渉しない
     ようにしている。position:absolute/inset:0/pointer-events:noneのため
     レイアウト・クリック領域・文字位置には一切影響しない。
     ::beforeは疑似要素として.input-thirteen-card-promoの背景の上・
     実テキスト（実DOM子要素）の下に描画されるため、中央〜全面へ広がる
     radial-gradient（シャンパンゴールド→透明）を持たせることで、
     紫のボタン面そのものに一瞬だけ光が乗ったように見せつつ、下地の
     深い紫・文字は隠さない（黄色ベタ塗り・白飛びにしないため、
     中心でもrgba(255,240,200,0.38)止まりの半透明に留める）。
     is-premium-flashingはjs/main.js側でクリックのたびに一時的に
     付け外しするクラスで、既に.is-selected中の13枚を再度タップしても
     （classList.remove→reflow→addで）毎回アニメーションが再生される。
     animationendでjs側がこのクラスを外すため、常時発光にはならない。 */
  body.is-input-day #screen-input .input-thirteen-card-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 240, 200, 0.38) 0%,
      rgba(227, 192, 122, 0.22) 45%,
      rgba(227, 192, 122, 0) 78%
    );
    box-shadow: 0 0 0 rgba(227, 192, 122, 0);
  }

  body.is-input-day #screen-input .input-thirteen-card-promo.is-premium-flashing::before {
    animation: input-thirteen-premium-flash 0.6s ease-out;
  }

  @keyframes input-thirteen-premium-flash {
    0% {
      opacity: 0.85;
      box-shadow: 0 0 10px 1px rgba(227, 192, 122, 0.6);
    }
    28% {
      opacity: 1;
      box-shadow: 0 0 34px 8px rgba(227, 192, 122, 0.7);
    }
    65% {
      opacity: 0.5;
      box-shadow: 0 0 20px 4px rgba(227, 192, 122, 0.4);
    }
    100% {
      opacity: 0;
      box-shadow: 0 0 8px 0 rgba(227, 192, 122, 0);
    }
  }

  body.is-input-day #screen-input .input-thirteen-card-promo-row1 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }

  body.is-input-day #screen-input .input-thirteen-card-promo-name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gold);
  }

  body.is-input-day #screen-input .input-thirteen-card-promo-badge {
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gold-strong);
    letter-spacing: 0.02em;
  }

  body.is-input-day #screen-input .input-thirteen-card-promo-desc {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gold);
  }

  body.is-input-day #screen-input .course-preview-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 12px;
    color: #180f2b;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
  }

  body.is-input-day #screen-input .course-preview-name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
  }

  body.is-input-day #screen-input .course-preview-desc {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* 選択状態: 楕円の金枠の色をわずかに強調するだけ（PC昼版と同じ考え方）。 */
  body.is-input-day #screen-input .course-preview-item.is-selected {
    border-color: var(--gold-strong);
    background: rgba(205, 164, 90, 0.45);
  }

  /* タップ時の押し込み感（2026-09-17追加）。レイアウトに影響しない
     transform:scaleのみで、色・サイズ・位置は変更しない。 */
  body.is-input-day #screen-input .course-preview-item:active {
    transform: scale(0.98);
  }

  /* 「占うカードの枚数を選んでください。」エラー（#course-preview-error、
     2026-09-15調整）。documentフローに残さないよう最初からposition:
     absoluteにする点は維持しつつ（PC版で修正した不具合と同じ問題を
     再発させないため）、位置はtop:calc(26%+3px)（.course-preview直下、
     3枚コースのボタン付近に重なっていた）から、直前に正式採用した
     #input-error（「相談内容を入力してください。」、上記の
     body.is-input-day #screen-input #input-errorブロック）と全く同じ
     表示領域へ変更する。position/left/bottom/transform/margin/width/
     max-width/color/font-weightはすべて#input-errorの値をそのまま
     流用し、新しい位置・色は作っていない。#input-errorと
     #course-preview-errorはonStart()の分岐上、同時表示されないため
     同じ位置を共有しても衝突しない。.course-preview・
     #consultation-input・#start-button・.input-card-note・背景画像・
     3枚/5枚/7枚コースUIの位置サイズには一切触れない。 */
  body.is-input-day #screen-input #course-preview-error {
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    color: #8f304f;
    font-weight: 600;
  }
}

/* =========================================================
   スマホ夜版: スマホ昼版（上のブロック）と同じ構造・サイズ・間隔
   （position/top:25%/gap:3px/width:84%、.course-preview-itemの
   display/flex-direction/gap/border-radius/padding/text-align/
   cursor/white-space、文字サイズ・太さ）をそのまま流用し、色だけを
   夜版の既存デザインに合わせる。スマホ昼版側の値（body.is-input-day
   スコープ）は1つも変更していない（参照・数値の転記のみ）。
   背景色rgba(20,14,40,0.5)はPC夜版の#consultation-inputで既に
   使われている値と同じ（新しい色を増やさない）。文字色var(--text)・
   枠var(--gold)も夜版で既に使われている値をそのまま使う。
   #consultation-input/#start-button/背景画像/TAROTロゴ/テーマ見出し/
   下部カード背景/選択ロジック（js/main.js）には一切触れていない。 */
@media (max-width: 600px) {
  /* 3/5/7/13枚コース群の縦位置（2026-09-18調整）。13枚Premium追加に伴い、
     390×844実測で13枚と#consultation-input（top:354.47px）の間が
     実質0.5px程度しかなく、実機で重なって見える不具合があったための
     修正。#consultation-input・#start-button・「恋愛について、」等の
     タイトル文言（.screen-tagline）は一切動かさず、コース群全体
     （このブロック＋直後の.input-thirteen-card-promo）だけを
     実測ベースで約14px上へ移動する（top:25%→calc(25%-14px)）。
     3/5/7枚自体のサイズ・配色・gap:3pxは変更していない。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(25% - 14px);
    left: 50%;
    transform: translateX(-50%);
    gap: 3px;
    width: 68%;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(20, 14, 40, 0.5);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 12px;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
  }

  body.is-input-active:not(.is-input-day) #screen-input .course-preview-desc {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
  }

  /* 選択状態: PC夜版の既存.is-selected表現（金色の強調）と同じ考え方で、
     枠色をvar(--gold-strong)にし、暗い背景に馴染む程度の淡いゴールドの
     背景を重ねる（明るい白背景にはしない）。 */
  body.is-input-active:not(.is-input-day) #screen-input .course-preview-item.is-selected {
    border-color: var(--gold-strong);
    background: rgba(205, 164, 90, 0.25);
  }

  /* 13枚Premium鑑定：スマホ夜版での表示（2026-09-18新規、同日中に
     縦位置を再調整。タップ発光演出・説明モーダルの夜版対応は次工程で
     別途行う）。
     HTML（index.html、.input-thirteen-card-promo）は昼夜共通の単一要素
     のため、文言（「13枚｜プレミアム鑑定」「♛ Premium限定」「13の視点
     から、より深く丁寧に読み解く」）は表示するだけで昼版と完全に一致
     する（テキストの複製・変更はしていない）。
     位置調整の経緯：初回実装では7枚コース直下・#consultation-input
     直前の余白がいずれも1px未満となり、実機で重なって見える不具合が
     あった。390×844実測の結果、コース群全体（.course-preview＋この
     13枚promo）を約14px上へ移動すれば、#consultation-input・
     #start-button・タイトル文言（.screen-tagline）を一切動かさずに、
     3→5→7と同じ3pxのgapを7→13にも揃えたうえで、13枚と入力欄の間に
     約12pxの余白を確保できることを確認した。これを受けて
     .course-previewのtopをcalc(25% - 14px)へ変更（上記ブロック）した
     ため、13枚側のtopオフセットも合わせて算出し直している
     （新しい3枚目下端からgap3pxで13枚topを求めた結果、25%起点からの
     加算値は97.28px）。3/5/7枚・13枚自体のサイズ（width:68%/
     height:34.109375px）・padding・border-radius・white-space・
     配色は一切変更していない。
     配色は昼版の紫背景・ゴールドの光彩を一切コピーせず、夜版の3/5/7枚
     コースが既に使っている値（背景rgba(20,14,40,0.5)・枠var(--gold)・
     選択時border-color:var(--gold-strong)+background:rgba(205,164,90,
     0.25)）をそのまま流用する。「Premiumらしい最低限の特別感」として、
     通常時の背景だけを同じ色相のまま少し濃く（0.5→0.7）し、3/5/7枚との
     差を出す（新しい色相・新しい色は追加していない）。文字色
     var(--gold)/var(--gold-strong)は、サイト全体で共通のゴールド変数
     （夜版の3/5/7枚の枠・選択色にも既に使われている）をそのまま使う。
     タップ時の発光演出（is-premium-flashing）・:active時のscale等は
     今回追加しない（夜版の3/5/7枚にもこの種の演出は無いため、まずは
     見た目確認を優先する）。 */
  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(25% + 97.28px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 68%;
    height: 34.112px;
    background: rgba(20, 14, 40, 0.7);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 2px 12px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo.is-selected {
    border-color: var(--gold-strong);
    background: rgba(205, 164, 90, 0.25);
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo-row1 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo-name {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gold);
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo-badge {
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gold-strong);
    letter-spacing: 0.02em;
  }

  body.is-input-active:not(.is-input-day) #screen-input .input-thirteen-card-promo-desc {
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gold);
  }

  /* 位置修正（2026-09-17）。従来のtop:calc(26%+3px)は.course-preview
     （top:25%）の直下・3枚コースのボタン付近に重なっていたため、
     直前に正式採用・実機確認済みのスマホ夜版#input-error
     （「相談内容を入力してください。」、body.is-input-active:not
     (.is-input-day) #screen-input #input-error）と全く同じ表示領域・
     文字色へ変更する。position/left/bottom/transform/margin/width/
     max-width/colorはすべて#input-errorの値をそのまま流用し、新しい
     位置・色は作っていない。#input-errorと#course-preview-errorは
     onStart()の分岐上、同時表示されないため同じ位置を共有しても
     衝突しない。.course-preview・#consultation-input/#start-button/
     背景画像/TAROLUNE/CHOOSE YOUR CARD/LOGIN/3枚5枚7枚コースUIの
     位置サイズには一切触れない。 */
  body.is-input-active:not(.is-input-day) #screen-input #course-preview-error {
    display: block;
    position: absolute;
    left: 50%;
    /* 2026-09-18: #input-errorと同じ理由・同じ量だけ追従させる
       （128px→108px、実機確認を経て108px→98px、合計30px）。
       #input-errorとは同時表示されないため衝突しない。 */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 98px);
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: 90%;
    color: #ff8f9c;
  }
}

/* =====================================================================
   利用規約画面（#screen-terms）PC昼版限定。
   既存の.screen/.screen.active（基本の表示切替）以外の既存セレクタ・
   :root・.top-nav-link等の共通ルールには一切触れず、新規クラス
   （.terms-*）とID（#screen-terms、#top-nav-terms-link、
   #terms-back-to-top-button）だけで完結させる。TOP・相談入力・
   コース選択・カード選択・カード開示・結果画面のCSS/HTMLは無変更。
   完成見本画像はデザイン・配置・配色の参考のみに使用し、本文は
   ユーザーから受領した正式テキストをそのまま掲載している。
   ===================================================================== */

/* ナビの「利用規約」ボタンだけを有効化する。共通の.top-nav-link
   （cursor:defaultのまま）は変更せず、IDセレクタで上書きするのみ。
   HOW IT WORKS/FAQ/プライバシー/LOGINには一切影響しない。 */
#top-nav-terms-link {
  cursor: pointer;
}

/* スマホ幅では今回「利用規約」ボタンを非表示にする（PC昼版のみ対応の
   ため）。既存のスマホ向け@media(max-width:600px)ブロックは編集せず、
   このID専用の新規ブロックとして独立させる。 */
@media (max-width: 600px) {
  #top-nav-terms-link {
    display: none;
  }
}

@media (min-width: 601px) {
  /* 背景（PC限定）。#screen-open::before/#screen-result::beforeと同じ
     手法：#screen-terms::beforeをposition:fixedにして#appの
     max-width制限とは独立にビューポート全面を覆う。z-index:-1で
     本文より必ず背面、pointer-events:noneでクリックを一切妨げない。
     #screen-terms非表示中（.screen{display:none}）は::before自体も
     描画されないため他画面に漏れない。ページが長くなっても背景は
     固定表示のまま（position:fixedのため）で、本文だけが縦スクロール
     する。TOP画面のbody.is-top-active（overflow:hidden;height:100vh）
     とは異なる作りのため、利用規約全文（第1条〜第14条）を通常の
     ページスクロールで読める。 */
  /* 利用規約画面専用の背景画像（assets/input/day-terms-background.png、
     1672×941、右上に満月1つのみで三日月を含まない）。TOP画面用の
     reference/day-background.png（三日月を画面外へクロップするための
     X:-230pxオフセット・1900px固定幅・隙間埋め用グラデーション4層）は
     この新画像には不要なため使用しない。background-size:coverで
     ビューポート全体を隙間なく覆い、background-position:top centerで
     画像上部（満月がある範囲）を優先して見切れを防ぐ。TOP画面本体
     （body.is-top-active、reference/day-background.png）の宣言・
     画像ファイル自体は変更していない。 */
  #screen-terms::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-terms-background.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-open/#screen-result既存の
     animation:noneと同じ考え方。 */
  #screen-terms.active {
    animation: none;
  }

  /* パネル幅確保のため、この画面表示中だけ#appのmax-width:720pxを
     広げる。#screen-select向けのbody:has(#screen-select.active) #app
     と同じ:has()手法を踏襲し、is-terms-active等の新規bodyクラス・
     JS変更を追加せずに済ませる。#app共通ルール自体（49行目付近）は
     変更しない。 */
  body:has(#screen-terms.active) #app {
    max-width: 960px;
  }

  /* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
     利用規約画面がアクティブな間だけ非表示にする。#screen-select向けの
     body:not(.is-select-day):has(#screen-select.active) .app-header
     と全く同じ:has()手法。is-terms-active等の新規bodyクラスは追加せず、
     #screen-terms.activeの有無だけで判定するため、TOP・相談入力・
     コース選択・カード選択・カード開示・結果画面が表示されている間は
     このセレクタ自体が成立せず、.app-headerの表示に一切影響しない。
     .app-header共通ルール（55行目付近）・他画面の.app-header非表示
     ルールは変更していない。 */
  body:has(#screen-terms.active) .app-header {
    display: none;
  }

  .terms-panel {
    position: relative;
    margin: 12px auto 0;
    padding: 48px 60px 56px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 20px 60px rgba(40, 20, 60, 0.25);
    backdrop-filter: blur(6px);
  }

  .terms-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .terms-sparkle {
    color: var(--gold-strong);
    font-size: 0.9rem;
  }

  /* 正式TAROTブランドロゴ（assets/input/day-open-tarot-logo.png）を
     利用規約パネル内に表示する。既存のbody.is-open-day .app-header
     .brand-mark等と同じ「text-indentで文字を追い出し、
     background-imageでロゴを表示する」技術を踏襲。HTML側のテキスト
     「TAROT」自体は変更しない。既存の.brand-mark/.top-hero-markの
     ルールには触れず、このパネル専用の新規クラスとして独立させる。 */
  .terms-logo {
    display: block;
    font-size: 0;
  }

  .terms-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--gold-strong);
  }

  .terms-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-align: center;
    color: #7a7190;
  }

  .terms-title {
    margin: 14px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #322a45;
  }

  .terms-title-sub {
    margin: 3px 0 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-align: center;
    color: #9891b5;
  }

  .terms-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 14px 0 18px;
  }

  .terms-divider {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-strong), transparent);
  }

  .terms-divider::after {
    content: '\25C6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: var(--gold-strong);
  }

  .terms-date {
    flex: 0 0 auto;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    color: #7a7190;
    white-space: nowrap;
  }

  .terms-intro {
    margin: 0 0 6px;
    font-size: 0.8rem;
    line-height: 1.7;
    text-align: center;
    color: #574f6d;
  }

  .terms-articles {
    margin-top: 20px;
  }

  .terms-article {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(184, 134, 63, 0.18);
  }

  .terms-articles > .terms-article:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .terms-article-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
  }

  .terms-article-badge {
    flex: 0 0 auto;
    padding: 5px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(160deg, var(--gold-strong), var(--gold));
    border-radius: 999px;
    white-space: nowrap;
  }

  .terms-article-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #2c2440;
  }

  .terms-article-body {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .terms-article-list {
    margin: 4px 0 0;
    padding-left: 1.5em;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .terms-article-list li {
    margin: 1px 0;
  }

  .terms-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 36px auto 0;
    padding: 10px 30px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    cursor: pointer;
  }

  .terms-back-button:hover,
  .terms-back-button:focus-visible {
    background: rgba(205, 164, 90, 0.12);
  }

  .terms-back-arrow {
    font-size: 0.85rem;
  }

  /* =====================================================================
     PC夜版・利用規約 正式夜版デザイン（2026-09-12）。
     PC夜版FAQ（body.is-faq-night #screen-faq）と全く同じ設計思想で
     実装する。新規画像は生成せず、PC夜版HOW IT WORKS/FAQで正式採用済み
     のassets/input/night-how-it-works-background.pngをそのまま共用する。
     is-terms-nightは、js/topScreen.jsのgoToTerms()内でのみ付け外しされる
     この画面専用の新規クラスで、is-faq-night/is-hiw-night/is-top-night
     とは別物。対象はすべてbody.is-terms-night #screen-terms配下のみで、
     上記のPC昼版利用規約ルール（.terms-*、無条件のベース宣言）は1文字も
     変更していない。利用規約の文章・第1条〜第14条の本文・HTML構造・
     各要素のposition/width/height/margin/padding/gap・パネルの位置/
     横幅/縦方向の構成/角丸・スクロール仕様・既存の画面遷移も無変更
     （colorと背景画像・パネルのbackground/borderのみを上書き）。 */

  /* 背景。#screen-terms::beforeのposition:fixed/background-size:cover/
     background-position:top center/background-repeat:no-repeatは
     昼版のまま流用し、background-imageだけを夜版画像に差し替える。 */
  body.is-terms-night #screen-terms::before {
    background-image: url("../assets/input/night-how-it-works-background.png");
  }

  /* 上部ブランド表示。PC夜版FAQ（.faq-logo/.faq-logo-sub）と全く同じ
     考え方・同じ値で「TAROLUNE」「CHOOSE YOUR CARD」へ統一する。
     新しいロゴ画像は作らず、HTML側のテキスト「TAROT」は変更しない
     （PC昼版では引き続き正式ロゴ画像に使用するため）。font-size:0で
     元のテキストを見た目上ゼロ幅にし、::afterでTAROLUNEを表示する。 */
  body.is-terms-night #screen-terms .terms-logo {
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    font-size: 0;
    background-image: none;
  }

  body.is-terms-night #screen-terms .terms-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: #e3b85c;
  }

  body.is-terms-night #screen-terms .terms-logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: #c8bfd8;
  }

  /* 利用規約全体パネル。白〜アイボリーから、PC夜版FAQと同じ半透明の
     濃紺〜濃紫へ。既存のbackdrop-filter:blur(6px)は変更していない
     （星空がほんのり透ける程度で足りるため）。位置・横幅・縦方向の
     構成・padding/margin/角丸は変更しない。 */
  body.is-terms-night #screen-terms .terms-panel {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
  }

  /* メイン見出し「利用規約」・「TERMS OF SERVICE」・制定日 */
  body.is-terms-night #screen-terms .terms-title {
    color: #eee8f5;
  }

  body.is-terms-night #screen-terms .terms-title-sub {
    color: #c8bfd8;
  }

  body.is-terms-night #screen-terms .terms-date {
    color: #c8bfd8;
  }

  /* 上部のダイヤ＋横線（PC夜版FAQと同じゴールド系） */
  body.is-terms-night #screen-terms .terms-divider {
    background: linear-gradient(90deg, transparent, #e3b85c, transparent);
  }

  body.is-terms-night #screen-terms .terms-divider::after {
    color: #e3b85c;
  }

  /* 導入文・各条の本文（第1条〜第14条の文章内容自体は変更しない） */
  body.is-terms-night #screen-terms .terms-intro {
    color: #e8e1f1;
  }

  body.is-terms-night #screen-terms .terms-article-body,
  body.is-terms-night #screen-terms .terms-article-list {
    color: #e8e1f1;
  }

  /* 各条の見出し */
  body.is-terms-night #screen-terms .terms-article-heading {
    color: #eee8f5;
  }

  /* 条と条の間の区切り線 */
  body.is-terms-night #screen-terms .terms-article {
    border-top-color: rgba(217, 173, 85, 0.28);
  }

  /* 第1条・第2条…の番号バッジ（.terms-article-badge）は、金グラデー
     ション背景＋白文字の自己完結したデザインのため、夜背景上でも
     そのまま明確に視認できる。ここに白文字のまま金色を重ねると
     視認性が悪化する（ゴールドonゴールドで読めなくなる）ため、
     PC夜版HOW IT WORKSの強調バッジ（.hiw-step-highlight-text）と
     同じ判断で、今回は意図的に上書きしていない。 */

  /* 「トップページに戻る」ボタン（.terms-back-button）は、PC夜版FAQ・
     HOW IT WORKS夜版と同じ考え方でブランドゴールド（var(--gold)）の
     まま維持するため、意図的に上書きしていない。サイズ・位置も無変更。 */
}

/* =====================================================================
   プライバシーポリシー画面（#screen-privacy）PC昼版限定。
   正式採用済みの#screen-terms/.terms-*（上のブロック）は1文字も
   変更せず、デザインが同じ見た目になるよう値だけをそのままコピーした
   .privacy-*クラス・ID（#screen-privacy、#top-nav-privacy-link、
   #privacy-back-to-top-button）で完全に独立して構成する。既存の
   .screen/.screen.active（基本の表示切替）以外の既存セレクタ・:root・
   .top-nav-link等の共通ルールには一切触れない。TOP・相談入力・
   コース選択・カード選択・カード開示・結果画面・利用規約画面のCSS/HTML
   は無変更。本文は完成見本画像や利用規約画面の文字起こしではなく、
   ユーザーから受領した正式テキストをそのまま掲載している。
   ===================================================================== */

/* ナビの「プライバシー」ボタンだけを有効化する。共通の.top-nav-link
   （cursor:defaultのまま）は変更せず、IDセレクタで上書きするのみ。
   HOW IT WORKS/FAQ/利用規約/LOGINには一切影響しない。 */
#top-nav-privacy-link {
  cursor: pointer;
}

/* スマホ幅では今回「プライバシー」ボタンを非表示にする（利用規約画面と
   同じ考え方で、PC昼版のみ対応のため）。既存のスマホ向け
   @media(max-width:600px)ブロックは編集せず、このID専用の新規ブロック
   として独立させる。 */
@media (max-width: 600px) {
  #top-nav-privacy-link {
    display: none;
  }
}

@media (min-width: 601px) {
  /* 背景（PC限定）。#screen-terms::beforeと全く同じ手法：
     #screen-privacy::beforeをposition:fixedにして#appのmax-width制限
     とは独立にビューポート全面を覆う。z-index:-1で本文より必ず背面、
     pointer-events:noneでクリックを一切妨げない。#screen-privacy非表示中
     （.screen{display:none}）は::before自体も描画されないため他画面に
     漏れない。ページが長くなっても背景は固定表示のまま
     （position:fixedのため）で、本文だけが縦スクロールする。 */
  /* プライバシーポリシー画面専用の背景画像
     （assets/input/day-privacy-background.png。利用規約画面専用の
     assets/input/day-terms-background.pngとは別ファイルとして複製した
     もので、中身は同じ「満月1つのみ」の画像だが、どちらか一方を
     将来差し替えても他方に影響しない）。background-size:coverで
     ビューポート全体を隙間なく覆い、background-position:top centerで
     画像上部（満月がある範囲）を優先して見切れを防ぐ。 */
  #screen-privacy::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-privacy-background.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-terms等既存のanimation:none
     と同じ考え方。 */
  #screen-privacy.active {
    animation: none;
  }

  /* パネル幅確保のため、この画面表示中だけ#appのmax-width:720pxを
     広げる。#screen-terms向けのbody:has(#screen-terms.active) #appと
     同じ:has()手法を踏襲し、新規bodyクラス・JS変更を追加せずに済ませる。
     #app共通ルール自体（49行目付近）は変更しない。 */
  body:has(#screen-privacy.active) #app {
    max-width: 960px;
  }

  /* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
     プライバシーポリシー画面がアクティブな間だけ非表示にする。
     #screen-terms向けのbody:has(#screen-terms.active) .app-headerと
     全く同じ:has()手法。#screen-privacy.activeの有無だけで判定するため、
     TOP・相談入力・コース選択・カード選択・カード開示・結果画面・
     利用規約画面が表示されている間はこのセレクタ自体が成立せず、
     .app-headerの表示に一切影響しない。 */
  body:has(#screen-privacy.active) .app-header {
    display: none;
  }

  .privacy-panel {
    position: relative;
    margin: 12px auto 0;
    padding: 48px 60px 56px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 20px 60px rgba(40, 20, 60, 0.25);
    backdrop-filter: blur(6px);
  }

  .privacy-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .privacy-sparkle {
    color: var(--gold-strong);
    font-size: 0.9rem;
  }

  /* 正式TAROTブランドロゴ（assets/input/day-open-tarot-logo.png）を
     プライバシーポリシーパネル内に表示する。#screen-terms .terms-logoと
     全く同じ「text-indentで文字を追い出し、background-imageでロゴを
     表示する」技術を踏襲。HTML側のテキスト「TAROT」自体は変更しない。
     既存の.brand-mark/.top-hero-mark/.terms-logoのルールには触れず、
     このパネル専用の新規クラスとして独立させる。 */
  .privacy-logo {
    display: block;
    font-size: 0;
  }

  .privacy-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--gold-strong);
  }

  .privacy-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-align: center;
    color: #7a7190;
  }

  .privacy-title {
    margin: 14px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #322a45;
  }

  .privacy-title-sub {
    margin: 3px 0 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-align: center;
    color: #9891b5;
  }

  .privacy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 14px 0 18px;
  }

  .privacy-divider {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-strong), transparent);
  }

  .privacy-divider::after {
    content: '\25C6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: var(--gold-strong);
  }

  .privacy-date {
    flex: 0 0 auto;
    font-size: 0.66rem;
    letter-spacing: 0.03em;
    color: #7a7190;
    white-space: nowrap;
  }

  .privacy-intro {
    margin: 0 0 6px;
    font-size: 0.8rem;
    line-height: 1.7;
    text-align: center;
    color: #574f6d;
  }

  .privacy-articles {
    margin-top: 20px;
  }

  .privacy-article {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(184, 134, 63, 0.18);
  }

  .privacy-articles > .privacy-article:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .privacy-article-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
  }

  .privacy-article-badge {
    flex: 0 0 auto;
    padding: 5px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(160deg, var(--gold-strong), var(--gold));
    border-radius: 999px;
    white-space: nowrap;
  }

  .privacy-article-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #2c2440;
  }

  .privacy-article-body {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .privacy-article-list {
    margin: 4px 0 0;
    padding-left: 1.5em;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .privacy-article-list li {
    margin: 1px 0;
  }

  .privacy-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 36px auto 0;
    padding: 10px 30px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    cursor: pointer;
  }

  .privacy-back-button:hover,
  .privacy-back-button:focus-visible {
    background: rgba(205, 164, 90, 0.12);
  }

  .privacy-back-arrow {
    font-size: 0.85rem;
  }

  /* =====================================================================
     PC夜版・プライバシーポリシー 正式夜版デザイン（2026-09-12）。
     PC夜版・利用規約（body.is-terms-night #screen-terms）を基準に、
     全く同じ設計思想・全く同じCSS値をプライバシーポリシー専用に移植
     する（新しい配色・値は考えていない）。新規画像は生成せず、
     PC夜版HOW IT WORKS/FAQ/利用規約で正式採用済みのassets/input/
     night-how-it-works-background.pngをそのまま共用する。
     is-privacy-nightは、js/topScreen.jsのgoToPrivacy()内でのみ
     付け外しされるこの画面専用の新規クラスで、is-terms-night/
     is-faq-night/is-hiw-night/is-top-nightとは別物。対象はすべて
     body.is-privacy-night #screen-privacy配下のみで、上記のPC昼版
     プライバシーポリシールール（.privacy-*、無条件のベース宣言）は
     1文字も変更していない。プライバシーポリシーの文章・条文数・
     HTML構造・各要素のposition/width/height/margin/padding/gap・
     パネルのwidth/max-width/位置/margin/padding/角丸/高さの決まり方・
     スクロール仕様・既存の画面遷移も無変更（colorと背景画像・パネルの
     background/borderのみを上書き）。 */

  /* 背景。#screen-privacy::beforeのposition:fixed/background-size:cover/
     background-position:top center/background-repeat:no-repeatは
     昼版のまま流用し、background-imageだけを夜版画像に差し替える
     （.terms-night ::beforeの上書きと全く同じ考え方）。 */
  body.is-privacy-night #screen-privacy::before {
    background-image: url("../assets/input/night-how-it-works-background.png");
  }

  /* 上部ブランド表示。PC夜版利用規約（.terms-logo/.terms-logo-sub）と
     全く同じ値で「TAROLUNE」「CHOOSE YOUR CARD」へ統一する。新しい
     ロゴ画像は作らず、HTML側のテキスト「TAROT」は変更しない（PC昼版
     では引き続き正式ロゴ画像に使用するため）。font-size:0で元の
     テキストを見た目上ゼロ幅にし、::afterでTAROLUNEを表示する。 */
  body.is-privacy-night #screen-privacy .privacy-logo {
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    font-size: 0;
    background-image: none;
  }

  body.is-privacy-night #screen-privacy .privacy-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: #e3b85c;
  }

  body.is-privacy-night #screen-privacy .privacy-logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: #c8bfd8;
  }

  /* プライバシーポリシー全体パネル。白〜アイボリーから、PC夜版利用規約
     と全く同じ半透明の濃紺〜濃紫へ。既存のbackdrop-filter:blur(6px)は
     変更していない。width/max-width/位置/margin/padding/角丸/高さの
     決まり方/スクロール仕様は変更しない。 */
  body.is-privacy-night #screen-privacy .privacy-panel {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
  }

  /* メイン見出し「プライバシーポリシー」・「PRIVACY POLICY」・制定日
     （PC夜版利用規約の.terms-title/.terms-title-sub/.terms-dateと
     全く同じ値）。位置・font-size・marginは変更しない。 */
  body.is-privacy-night #screen-privacy .privacy-title {
    color: #eee8f5;
  }

  body.is-privacy-night #screen-privacy .privacy-title-sub {
    color: #c8bfd8;
  }

  body.is-privacy-night #screen-privacy .privacy-date {
    color: #c8bfd8;
  }

  /* 上部のダイヤ＋横線（PC夜版利用規約と同じゴールド系） */
  body.is-privacy-night #screen-privacy .privacy-divider {
    background: linear-gradient(90deg, transparent, #e3b85c, transparent);
  }

  body.is-privacy-night #screen-privacy .privacy-divider::after {
    color: #e3b85c;
  }

  /* 導入文・各条の本文（条文内容自体は変更しない） */
  body.is-privacy-night #screen-privacy .privacy-intro {
    color: #e8e1f1;
  }

  body.is-privacy-night #screen-privacy .privacy-article-body,
  body.is-privacy-night #screen-privacy .privacy-article-list {
    color: #e8e1f1;
  }

  /* 各条の見出し */
  body.is-privacy-night #screen-privacy .privacy-article-heading {
    color: #eee8f5;
  }

  /* 条と条の間の区切り線 */
  body.is-privacy-night #screen-privacy .privacy-article {
    border-top-color: rgba(217, 173, 85, 0.28);
  }

  /* 第1条・第2条…の番号バッジ（.privacy-article-badge）は、PC夜版
     利用規約の.terms-article-badgeと同じ判断で、金グラデーション
     背景＋白文字の自己完結したデザインのまま意図的に上書きしていない
     （白文字に金色を重ねると「ゴールドonゴールド」で読めなくなるため）。 */

  /* 「トップページに戻る」ボタン（.privacy-back-button）は、PC夜版
     利用規約・FAQ・HOW IT WORKS夜版と同じ考え方でブランドゴールド
     （var(--gold)）のまま維持するため、意図的に上書きしていない。
     サイズ・位置も無変更。 */
}

/* =====================================================================
   FAQ画面（#screen-faq）PC昼版限定。
   正式採用済みの#screen-terms/.terms-*・#screen-privacy/.privacy-*
   （上の2ブロック）は1文字も変更せず、デザインが同じ見た目になるよう
   値だけをそのままコピーした.faq-*クラス・ID（#screen-faq、
   #top-nav-faq-link、#faq-back-to-top-button）で完全に独立して構成する。
   既存の.screen/.screen.active（基本の表示切替）以外の既存セレクタ・
   :root・.top-nav-link等の共通ルールには一切触れない。TOP・相談入力・
   コース選択・カード選択・カード開示・結果画面・利用規約・
   プライバシーポリシー画面のCSS/HTMLは無変更。
   Q&Aの開閉はHTML標準の<details>/<summary>のみで実現し、開閉用の
   独自JavaScriptは追加しない。本文はユーザーから受領した正式原稿を
   そのまま掲載している（「AI」という語を使わないブランド方針の文面）。
   ===================================================================== */

/* ナビの「FAQ」ボタンだけを有効化する。共通の.top-nav-link
   （cursor:defaultのまま）は変更せず、IDセレクタで上書きするのみ。
   HOW IT WORKS/利用規約/プライバシー/LOGINには一切影響しない。 */
#top-nav-faq-link {
  cursor: pointer;
}

/* スマホ幅では今回「FAQ」ボタンを非表示にする（利用規約・プライバシー
   ポリシーと同じ考え方で、PC昼版のみ対応のため）。既存のスマホ向け
   @media(max-width:600px)ブロックは編集せず、このID専用の新規ブロック
   として独立させる。 */
@media (max-width: 600px) {
  #top-nav-faq-link {
    display: none;
  }
}

@media (min-width: 601px) {
  /* 背景（PC限定）。#screen-terms::before/#screen-privacy::beforeと
     全く同じ手法：#screen-faq::beforeをposition:fixedにして#appの
     max-width制限とは独立にビューポート全面を覆う。z-index:-1で
     本文より必ず背面、pointer-events:noneでクリックを一切妨げない
     （<details>/<summary>のクリック操作も妨げない）。#screen-faq
     非表示中（.screen{display:none}）は::before自体も描画されないため
     他画面に漏れない。 */
  /* FAQ画面専用の背景画像（assets/input/day-faq-background.png。
     利用規約・プライバシーポリシー画面専用の各背景ファイルの複製で、
     内容は同じ「満月1つのみ」の画像だが別ファイル。どれか1つを将来
     差し替えても他に影響しない）。background-size:coverでビューポート
     全体を隙間なく覆い、background-position:top centerで画像上部
     （満月がある範囲）を優先して見切れを防ぐ。 */
  #screen-faq::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-faq-background.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-terms/#screen-privacy等
     既存のanimation:noneと同じ考え方。 */
  #screen-faq.active {
    animation: none;
  }

  /* パネル幅確保のため、この画面表示中だけ#appのmax-width:720pxを
     広げる。#screen-terms/#screen-privacy向けの
     body:has(#screen-terms.active) #app等と同じ:has()手法を踏襲し、
     新規bodyクラス・JS変更を追加せずに済ませる。#app共通ルール自体
     （49行目付近）は変更しない。 */
  body:has(#screen-faq.active) #app {
    max-width: 960px;
  }

  /* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
     FAQ画面がアクティブな間だけ非表示にする。#screen-terms/
     #screen-privacy向けの同じ:has()手法。#screen-faq.activeの有無だけで
     判定するため、TOP・相談入力・コース選択・カード選択・カード開示・
     結果画面・利用規約・プライバシーポリシー画面が表示されている間は
     このセレクタ自体が成立せず、.app-headerの表示に一切影響しない。 */
  body:has(#screen-faq.active) .app-header {
    display: none;
  }

  .faq-panel {
    position: relative;
    margin: 12px auto 0;
    padding: 48px 60px 56px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 20px 60px rgba(40, 20, 60, 0.25);
    backdrop-filter: blur(6px);
  }

  .faq-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .faq-sparkle {
    color: var(--gold-strong);
    font-size: 0.9rem;
  }

  /* 正式TAROTブランドロゴ（assets/input/day-open-tarot-logo.png）を
     FAQパネル内に表示する。#screen-terms .terms-logo/#screen-privacy
     .privacy-logoと全く同じ「text-indentで文字を追い出し、
     background-imageでロゴを表示する」技術を踏襲。HTML側のテキスト
     「TAROT」自体は変更しない（正式サービス名TAROLUNEとは別物として
     維持する、CLAUDE.md記載のブランド方針どおり）。既存の.brand-mark/
     .top-hero-mark/.terms-logo/.privacy-logoのルールには触れず、この
     パネル専用の新規クラスとして独立させる。 */
  .faq-logo {
    display: block;
    font-size: 0;
  }

  .faq-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--gold-strong);
  }

  .faq-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-align: center;
    color: #7a7190;
  }

  .faq-title {
    margin: 14px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #322a45;
  }

  .faq-title-sub {
    margin: 3px 0 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-align: center;
    color: #9891b5;
  }

  /* 利用規約・プライバシーポリシーの.terms-meta/.privacy-metaは
     「区切り線＋制定日」の横並びだが、FAQには制定日に相当する項目が
     ないため、区切り線単体を中央配置する。ゴールドのグラデーション＋
     中央の◆装飾は.terms-divider/.privacy-dividerと同じ値を使用し、
     世界観は統一する。 */
  .faq-divider {
    display: block;
    position: relative;
    width: 220px;
    height: 1px;
    margin: 18px auto 24px;
    background: linear-gradient(90deg, transparent, var(--gold-strong), transparent);
  }

  .faq-divider::after {
    content: '\25C6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: var(--gold-strong);
  }

  .faq-groups {
    margin-top: 4px;
  }

  .faq-group-title {
    margin: 26px 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold);
  }

  .faq-groups > .faq-group:first-child .faq-group-title {
    margin-top: 0;
  }

  .faq-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(184, 134, 63, 0.18);
  }

  .faq-group > .faq-item:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* <summary>の既定の三角マーカーを消し、ゴールドの+/-に差し替える。
     list-style:noneとMarker非表示の両方を指定し、主要ブラウザ間の
     表示差を吸収する。 */
  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2c2440;
    cursor: pointer;
    list-style: none;
  }

  .faq-question::-webkit-details-marker {
    display: none;
  }

  .faq-question::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-strong);
  }

  .faq-item[open] .faq-question::after {
    content: '\2212';
  }

  .faq-answer {
    margin-top: 6px;
  }

  .faq-answer-line {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .faq-answer-line:first-child {
    margin-top: 0;
  }

  .faq-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 36px auto 0;
    padding: 10px 30px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    cursor: pointer;
  }

  .faq-back-button:hover,
  .faq-back-button:focus-visible {
    background: rgba(205, 164, 90, 0.12);
  }

  .faq-back-arrow {
    font-size: 0.85rem;
  }

  /* =====================================================================
     PC夜版FAQ 正式夜版デザイン（2026-09-12）。
     PC夜版HOW IT WORKS（body.is-hiw-night #screen-how-it-works）と全く
     同じ設計思想で実装する。新規画像は生成せず、HOW IT WORKS夜版で
     正式採用済みのassets/input/night-how-it-works-background.pngを
     そのまま共用する。position:fixed・background-size:cover・
     background-position:top center・no-repeatもHOW IT WORKS夜版と同じ
     （画像への加工・オーバーレイは追加していない）。
     is-faq-nightは、js/topScreen.jsのgoToFaq()内でのみ付け外しされる
     この画面専用の新規クラスで、is-hiw-night/is-top-nightとは別物。
     対象はすべてbody.is-faq-night #screen-faq配下のみで、上記の
     PC昼版FAQルール（.faq-*、無条件のベース宣言）は1文字も変更して
     いない。HTML構造・質問文/回答文・アコーディオンの開閉ロジック・
     FAQ項目数・各要素のposition/width/height/margin/padding/gap・
     パネルの角丸/現在のサイズ・位置・余白・スクロール仕様も無変更
     （colorと背景画像・パネルのbackground/borderのみを上書き）。 */

  /* 背景。#screen-faq::beforeのposition:fixed/background-size:cover/
     background-position:top center/background-repeat:no-repeatは
     昼版のまま流用し、background-imageだけを夜版画像に差し替える。 */
  body.is-faq-night #screen-faq::before {
    background-image: url("../assets/input/night-how-it-works-background.png");
  }

  /* 上部ブランド表示（2026-09-12追加）。PC夜版HOW IT WORKS
     （body.is-hiw-night #screen-how-it-works .hiw-brand-main/
     .hiw-brand-sub）と同じ「TAROLUNE」「CHOOSE YOUR CARD」表示へ統一
     する。新しい画像は生成せず、正式TAROTロゴ画像
     （assets/input/day-open-tarot-logo.png）自体はPC夜版FAQでは使用
     しない。HTML側のテキスト「TAROT」は変更せず（#faq-logoは他画面と
     共有しているIDではないが、昼版で引き続き画像置換に使うため
     そのまま維持）、.theme-card-other .theme-card-jaの「その他」表示
     置換と同じ考え方で、font-size:0でTAROT文字を見た目上ゼロ幅にし、
     ::afterでHOW IT WORKSの.hiw-brand-mainと同じfont-size(2.4rem)・
     font-weight(700)・letter-spacing(0.28em)・text-indent(0.28em)・
     color(#e3b85c)のTAROLUNEを表示する。 */
  body.is-faq-night #screen-faq .faq-logo {
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    font-size: 0;
    background-image: none;
  }

  body.is-faq-night #screen-faq .faq-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: #e3b85c;
  }

  /* 「CHOOSE YOUR CARD」。HOW IT WORKSの.hiw-brand-subと同じ
     font-size(0.6rem)・letter-spacing(0.24em)・text-indent(0.24em)・
     color(#c8bfd8)へ揃える。margin/text-align等の配置は変更しない。 */
  body.is-faq-night #screen-faq .faq-logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: #c8bfd8;
  }

  /* FAQ全体パネル。白〜アイボリーから、HOW IT WORKS夜版のSTEP03/
     Premiumパネルと同じ半透明の濃紺〜濃紫へ。backdrop-filter:blur(6px)は
     昼版から変更していない（星空がほんのり透ける程度で足りるため）。
     角丸・padding・margin・box-shadowは変更しない。 */
  body.is-faq-night #screen-faq .faq-panel {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
  }

  /* 「よくあるご質問」「FAQ」見出し */
  body.is-faq-night #screen-faq .faq-title {
    color: #eee8f5;
  }

  body.is-faq-night #screen-faq .faq-title-sub {
    color: #c8bfd8;
  }

  /* 見出し下の装飾線・中央ダイヤ */
  body.is-faq-night #screen-faq .faq-divider {
    background: linear-gradient(90deg, transparent, #e3b85c, transparent);
  }

  body.is-faq-night #screen-faq .faq-divider::after {
    color: #e3b85c;
  }

  /* カテゴリ見出し（■ TAROLUNEについて 等）。■自体もテキストの一部の
     ため、この1行の色指定だけで見出し文字・■装飾の両方がゴールドになる。 */
  body.is-faq-night #screen-faq .faq-group-title {
    color: #e3b85c;
  }

  /* FAQ項目間の区切り線 */
  body.is-faq-night #screen-faq .faq-item {
    border-top-color: rgba(217, 173, 85, 0.28);
  }

  /* 質問文。夜背景・濃紫パネル上で明確に読める明るいラベンダー
     〜アイボリー。文字サイズ・太さ・行間・位置・開閉挙動は変更しない。 */
  body.is-faq-night #screen-faq .faq-question {
    color: #eee8f5;
  }

  /* ＋/−アイコン。開閉によるcontent切り替え（'+' / '−'）自体は
     .faq-question::after / .faq-item[open] .faq-question::afterの
     既存ルールのまま変更せず、色だけをこの1行で両状態に適用する。 */
  body.is-faq-night #screen-faq .faq-question::after {
    color: #e3b85c;
  }

  /* 回答文。質問文（#eee8f5）より少し弱い明度にして、質問と回答の
     階層が分かるようにする。 */
  body.is-faq-night #screen-faq .faq-answer-line {
    color: #d6cee4;
  }

  /* 回答文中にリンクがある場合の色（現時点のFAQ本文にリンクは
     含まれていないが、将来追加された場合に備えて指定しておく）。 */
  body.is-faq-night #screen-faq .faq-answer-line a {
    color: #c8bfd8;
  }

  body.is-faq-night #screen-faq .faq-answer-line a:hover,
  body.is-faq-night #screen-faq .faq-answer-line a:focus-visible {
    color: #e3b85c;
  }

  /* 「トップページに戻る」ボタン（.faq-back-button）は、HOW IT WORKS
     夜版と同じ考え方でブランドゴールド（var(--gold)）のまま維持する
     ため、意図的に上書きしていない。サイズ・位置も無変更。 */
}

/* =====================================================================
   特定商取引法に基づく表記画面（#screen-tokushoho）PC昼版限定。
   正式採用済みの#screen-terms/.terms-*・#screen-privacy/.privacy-*・
   #screen-faq/.faq-*（上の3ブロック）は1文字も変更せず、デザインが
   同じ見た目になるよう値だけをそのままコピーした.tokushoho-*クラス・
   ID（#screen-tokushoho、#top-nav-tokushoho-link、
   #tokushoho-back-to-top-button）で完全に独立して構成する。既存の
   .screen/.screen.active（基本の表示切替）以外の既存セレクタ・:root・
   .top-nav-link等の共通ルールには一切触れない。TOP・相談入力・
   コース選択・カード選択・カード開示・結果画面・利用規約・
   プライバシーポリシー・FAQ画面のCSS/HTMLは無変更。
   販売事業者名・運営責任者名・所在地・問い合わせ先は公開前の
   プレースホルダーのまま（ユーザー指示により推測入力しない）。
   ===================================================================== */

/* ナビの「特定商取引法」ボタンだけを有効化する。共通の.top-nav-link
   （cursor:defaultのまま）は変更せず、IDセレクタで上書きするのみ。
   HOW IT WORKS/FAQ/利用規約/プライバシー/LOGINには一切影響しない。 */
#top-nav-tokushoho-link {
  cursor: pointer;
}

/* スマホ幅では今回「特定商取引法」ボタンを非表示にする（利用規約・
   プライバシー・FAQと同じ考え方で、PC昼版のみ対応のため）。既存の
   スマホ向け@media(max-width:600px)ブロックは編集せず、このID専用の
   新規ブロックとして独立させる。 */
@media (max-width: 600px) {
  #top-nav-tokushoho-link {
    display: none;
  }
}

@media (min-width: 601px) {
  /* 背景（PC限定）。#screen-terms::before等と全く同じ手法：
     #screen-tokushoho::beforeをposition:fixedにして#appのmax-width
     制限とは独立にビューポート全面を覆う。z-index:-1で本文より必ず
     背面、pointer-events:noneでクリックを一切妨げない。#screen-tokushoho
     非表示中（.screen{display:none}）は::before自体も描画されないため
     他画面に漏れない。 */
  /* 特定商取引法画面専用の背景画像（assets/input/day-tokushoho-background.png。
     利用規約・プライバシーポリシー・FAQ画面専用の各背景ファイルの複製で、
     内容は同じ「満月1つのみ」の画像だが別ファイル。どれか1つを将来
     差し替えても他に影響しない）。background-size:coverでビューポート
     全体を隙間なく覆い、background-position:top centerで画像上部
     （満月がある範囲）を優先して見切れを防ぐ。 */
  #screen-tokushoho::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-tokushoho-background.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-terms/#screen-privacy/
     #screen-faq等既存のanimation:noneと同じ考え方。 */
  #screen-tokushoho.active {
    animation: none;
  }

  /* パネル幅確保のため、この画面表示中だけ#appのmax-width:720pxを
     広げる。#screen-terms等向けのbody:has(#screen-terms.active) #app
     と同じ:has()手法を踏襲し、新規bodyクラス・JS変更を追加せずに
     済ませる。#app共通ルール自体（49行目付近）は変更しない。 */
  body:has(#screen-tokushoho.active) #app {
    max-width: 960px;
  }

  /* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
     特定商取引法画面がアクティブな間だけ非表示にする。#screen-terms/
     #screen-privacy/#screen-faq向けの同じ:has()手法。
     #screen-tokushoho.activeの有無だけで判定するため、TOP・相談入力・
     コース選択・カード選択・カード開示・結果画面・利用規約・
     プライバシーポリシー・FAQ画面が表示されている間はこのセレクタ
     自体が成立せず、.app-headerの表示に一切影響しない。 */
  body:has(#screen-tokushoho.active) .app-header {
    display: none;
  }

  .tokushoho-panel {
    position: relative;
    margin: 12px auto 0;
    padding: 48px 60px 56px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 20px 60px rgba(40, 20, 60, 0.25);
    backdrop-filter: blur(6px);
  }

  .tokushoho-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .tokushoho-sparkle {
    color: var(--gold-strong);
    font-size: 0.9rem;
  }

  /* 正式TAROTブランドロゴ（assets/input/day-open-tarot-logo.png）を
     特定商取引法画面パネル内に表示する。#screen-terms .terms-logo等と
     全く同じ「text-indentで文字を追い出し、background-imageでロゴを
     表示する」技術を踏襲。HTML側のテキスト「TAROT」自体は変更しない。
     既存の.brand-mark/.top-hero-mark/.terms-logo/.privacy-logo/
     .faq-logoのルールには触れず、このパネル専用の新規クラスとして
     独立させる。 */
  .tokushoho-logo {
    display: block;
    font-size: 0;
  }

  .tokushoho-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--gold-strong);
  }

  .tokushoho-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-align: center;
    color: #7a7190;
  }

  .tokushoho-title {
    margin: 14px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #322a45;
  }

  .tokushoho-title-sub {
    margin: 3px 0 0;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-align: center;
    color: #9891b5;
  }

  /* 利用規約・プライバシーポリシーの.terms-meta/.privacy-metaは
     「区切り線＋制定日」の横並びだが、特定商取引法画面には制定日に
     相当する項目がないため、.faq-dividerと同じく区切り線単体を
     中央配置する。ゴールドのグラデーション＋中央の◆装飾は
     .terms-divider/.privacy-divider/.faq-dividerと同じ値を使用し、
     世界観は統一する。 */
  .tokushoho-divider {
    display: block;
    position: relative;
    width: 220px;
    height: 1px;
    margin: 18px auto 24px;
    background: linear-gradient(90deg, transparent, var(--gold-strong), transparent);
  }

  .tokushoho-divider::after {
    content: '\25C6';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    color: var(--gold-strong);
  }

  .tokushoho-items {
    margin-top: 4px;
  }

  .tokushoho-item {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(184, 134, 63, 0.18);
  }

  .tokushoho-items > .tokushoho-item:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .tokushoho-item-heading {
    margin: 0 0 6px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-strong);
  }

  .tokushoho-item-body {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .tokushoho-item-body:first-of-type {
    margin-top: 0;
  }

  .tokushoho-item-list {
    margin: 4px 0 0;
    padding-left: 1.5em;
    font-size: 0.8rem;
    line-height: 1.7;
    color: #55506b;
  }

  .tokushoho-item-list li {
    margin: 1px 0;
  }

  .tokushoho-back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 36px auto 0;
    padding: 10px 30px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 999px;
    cursor: pointer;
  }

  .tokushoho-back-button:hover,
  .tokushoho-back-button:focus-visible {
    background: rgba(205, 164, 90, 0.12);
  }

  .tokushoho-back-arrow {
    font-size: 0.85rem;
  }

  /* =====================================================================
     PC夜版・特定商取引法に基づく表記 正式夜版デザイン（2026-09-12）。
     PC夜版・利用規約／プライバシーポリシー（body.is-terms-night
     #screen-terms／body.is-privacy-night #screen-privacy）を基準に、
     全く同じ設計思想・全く同じCSS値を特定商取引法専用に移植する
     （新しい配色・値は考えていない）。新規画像は生成せず、PC夜版
     HOW IT WORKS/FAQ/利用規約/プライバシーポリシーで正式採用済みの
     assets/input/night-how-it-works-background.pngをそのまま共用する。
     is-tokushoho-nightは、js/topScreen.jsのgoToTokushoho()内でのみ
     付け外しされるこの画面専用の新規クラスで、is-privacy-night/
     is-terms-night/is-faq-night/is-hiw-night/is-top-nightとは別物。
     対象はすべてbody.is-tokushoho-night #screen-tokushoho配下のみで、
     上記のPC昼版特定商取引法ルール（.tokushoho-*、無条件のベース宣言）
     は1文字も変更していない。特定商取引法の文章・項目数・HTML構造・
     各要素のposition/width/height/margin/padding/gap・パネルの
     width/max-width/位置/margin/padding/角丸/高さの決まり方/
     スクロール仕様・既存の画面遷移も無変更（colorと背景画像・パネルの
     background/borderのみを上書き）。 */

  /* 背景。#screen-tokushoho::beforeのposition:fixed/
     background-size:cover/background-position:top center/
     background-repeat:no-repeatは昼版のまま流用し、background-image
     だけを夜版画像に差し替える（terms/privacyの夜版::before上書きと
     全く同じ考え方）。 */
  body.is-tokushoho-night #screen-tokushoho::before {
    background-image: url("../assets/input/night-how-it-works-background.png");
  }

  /* 上部ブランド表示。PC夜版利用規約／プライバシーポリシー
     （.terms-logo/.privacy-logo等）と全く同じ値で「TAROLUNE」
     「CHOOSE YOUR CARD」へ統一する。新しいロゴ画像は作らず、HTML側の
     テキスト「TAROT」は変更しない（PC昼版では引き続き正式ロゴ画像に
     使用するため）。font-size:0で元のテキストを見た目上ゼロ幅にし、
     ::afterでTAROLUNEを表示する。 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo {
    width: auto;
    height: auto;
    text-indent: 0;
    overflow: visible;
    font-size: 0;
    background-image: none;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: #e3b85c;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: #c8bfd8;
  }

  /* メインパネル。白〜アイボリーから、PC夜版利用規約／プライバシー
     ポリシーと全く同じ半透明の濃紺〜濃紫へ。既存のbackdrop-filter:
     blur(6px)は変更していない。width/max-width/位置/margin/padding/
     角丸/高さの決まり方/スクロール仕様は変更しない。 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-panel {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.62);
  }

  /* メイン見出し「特定商取引法に基づく表記」・
     「SPECIFIED COMMERCIAL TRANSACTIONS ACT」。位置・サイズ・margin・
     letter-spacingは昼版のレイアウトのまま変更しない。 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-title {
    color: #eee8f5;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-title-sub {
    color: #c8bfd8;
  }

  /* 上部の装飾線・中央ダイヤ（PC夜版利用規約／プライバシーポリシーと
     同じゴールド系） */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-divider {
    background: linear-gradient(90deg, transparent, #e3b85c, transparent);
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-divider::after {
    color: #e3b85c;
  }

  /* 各項目の見出し（販売事業者／運営責任者／所在地／お問い合わせ等）。
     .tokushoho-item-headingはterms/privacyの金バッジと異なり、元々
     プレーンテキストにvar(--gold-strong)を直接適用する構造（FAQの
     .faq-group-titleと同じ考え方）のため、ゴールドonゴールドの懸念なく
     そのままブランドゴールドへ上書きできる。 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-item-heading {
    color: #e3b85c;
  }

  /* 各項目の本文・料金一覧（文章内容自体は変更しない） */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-item-body,
  body.is-tokushoho-night #screen-tokushoho .tokushoho-item-list {
    color: #e8e1f1;
  }

  /* 項目間の区切り線 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-item {
    border-top-color: rgba(217, 173, 85, 0.28);
  }

  /* 「トップページに戻る」ボタン（.tokushoho-back-button）は、PC夜版
     利用規約・プライバシーポリシー・FAQ・HOW IT WORKS夜版と同じ考え方
     でブランドゴールド（var(--gold)）のまま維持するため、意図的に
     上書きしていない。サイズ・位置・文言も無変更。 */
}

/* =====================================================================
   スマホ昼版・静的情報4画面（FAQ／利用規約／プライバシーポリシー／
   特定商取引法）の背景統一（2026-09-14新規）。

   現状、#screen-terms/#screen-privacy/#screen-faq/#screen-tokushoho
   関連のCSS（.terms-系、.privacy-系、.faq-系、.tokushoho-系の昼版ベース宣言・
   夜版上書き・::before背景・.activeのanimation:none等）はすべて
   @media(min-width:601px)内にのみ存在し、スマホ幅では一切適用されて
   いなかった（PC限定のまま、スマホ版は本文レイアウト・背景ともに
   未着手だった）。

   今回はスマホ昼版HOW IT WORKSで正式採用済みの背景
   （assets/input/mobile/day-how-it-works-background-mobile.jpg＋
   アイボリーの薄いグラデーション、#screen-how-it-works::before、
   @media max-width:600px内）と全く同じ方式・全く同じ画像・全く同じ
   グラデーションを、この4画面にも「背景だけ」共通で移植する。新しい
   画像は生成せず、既存のday-how-it-works-background-mobile.jpgを
   4画面すべてで再利用する（4画面×別々の画像を作らない）。

   本文レイアウト（パネル・見出し・本文・カード等のサイズ／余白／
   文字色）は今回一切追加・変更しない（背景統一だけが目的のため）。
   既存の昼夜判定クラス（is-terms-night/is-privacy-night/is-faq-night/
   is-tokushoho-night、いずれもjs/topScreen.js側で既に付け外し済み）を
   そのまま利用し、新しい昼夜判定ロジックは作らない。
   body:not(.is-X-night)により、各画面の夜版はこのブロックの対象外
   （夜版は現状どおり背景未実装のまま、他要素にも一切影響しない）。
   PC昼版・PC夜版の@media(min-width:601px)側の既存ルールは
   1文字も変更していない。

   背景画像のnew Image()+decode()先読みは、既存の
   decodeMobileDayHiwBackground()（js/main.js、TOP画面表示時に実行済み）
   が同じURLを既に先読み・ブラウザキャッシュ済みのため、この4画面用に
   新しいdecode関数は追加しない（二重先読みを避ける）。 */
@media (max-width: 600px) {
  /* HOW IT WORKS（#screen-how-it-works、.daily-tarot-screen等）と同じ
     「screen本体は要素自身のbackgroundを透明化し、::beforeだけが背景を
     描画する」構造に明示的に揃える（2026-09-14追記）。#screen-terms等は
     元々unconditionalなbackground宣言を持たないため通常は不要だが、
     念のため他のCSSから継承・上書きされる余地を断つための防御的指定。
     position:fixed/z-index:-1はHOW IT WORKSと完全に同一の値。 */
  body:not(.is-terms-night) #screen-terms::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/mobile/day-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body:not(.is-terms-night) #screen-terms {
    background: transparent;
  }

  /* スマホ夜版利用規約背景（2026-09-16追加）。正式採用済みのスマホ夜版
     HOW IT WORKS背景（body.is-hiw-night #screen-how-it-works::before）・
     スマホ夜版FAQ背景（body.is-faq-night #screen-faq::before）と全く同じ
     表示思想（position:fixed／inset:0／background-size:cover／
     background-position:top center／background-repeat:no-repeat、
     オーバーレイ・追加グラデーションなし）を、同じ画像URL
     （assets/input/mobile/night-how-it-works-background-mobile.jpg）で
     そのまま共用する。新しい画像は作らず、利用規約専用のコピーも
     作らない。この画像はTOP画面表示時点でdecodeMobileNightHiwBackground()
     （js/main.js）により既にnew Image()+decode()済みのため、利用規約用の
     先読み関数は追加しない（同一URLのためブラウザキャッシュがそのまま
     効く）。is-terms-nightは、js/topScreen.jsのgoToTerms()内で既に
     付け外しされているこの画面専用の既存クラス（is-hiw-night/
     is-faq-night/is-privacy-night/is-tokushoho-nightとは別物）で、
     新しい昼夜判定は作っていない。利用規約の本文（見出し／制定日／
     第1条以降の文章・文字色・文字サイズ・余白）・上部ブランド表示・
     FAQ・HOW IT WORKS・スマホ昼版利用規約・PC版利用規約には
     一切触れていない。 */
  body.is-terms-night #screen-terms::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/input/mobile/night-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body.is-terms-night #screen-terms {
    background: transparent;
  }

  #screen-terms.active {
    animation: none;
  }

  body:not(.is-privacy-night) #screen-privacy::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/mobile/day-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body:not(.is-privacy-night) #screen-privacy {
    background: transparent;
  }

  /* スマホ夜版プライバシーポリシー背景（2026-09-16追加）。正式採用済みの
     スマホ夜版HOW IT WORKS／FAQ／利用規約背景と全く同じ表示思想
     （position:fixed／inset:0／background-size:cover／
     background-position:top center／background-repeat:no-repeat、
     オーバーレイ・追加グラデーションなし）を、同じ画像URL
     （assets/input/mobile/night-how-it-works-background-mobile.jpg）で
     そのまま共用する。新しい画像は作らず、プライバシーポリシー専用の
     コピーも作らない。この画像はTOP画面表示時点で
     decodeMobileNightHiwBackground()（js/main.js）により既にnew
     Image()+decode()済みのため、プライバシーポリシー用の先読み関数は
     追加しない。is-privacy-nightは、js/topScreen.jsのgoToPrivacy()内で
     既に付け外しされているこの画面専用の既存クラス。プライバシー
     ポリシーの本文（見出し／制定日／第1条以降の文章・文字色・
     文字サイズ・余白）・上部ブランド表示・FAQ・HOW IT WORKS・
     利用規約・スマホ昼版・PC版には一切触れていない。 */
  body.is-privacy-night #screen-privacy::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/input/mobile/night-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body.is-privacy-night #screen-privacy {
    background: transparent;
  }

  #screen-privacy.active {
    animation: none;
  }

  body:not(.is-faq-night) #screen-faq::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/mobile/day-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body:not(.is-faq-night) #screen-faq {
    background: transparent;
  }

  /* スマホ夜版FAQ背景（2026-09-16追加）。正式採用済みのスマホ夜版
     HOW IT WORKS背景（body.is-hiw-night #screen-how-it-works::before、
     このファイル内の別ブロック）と全く同じ表示思想（position:fixed／
     inset:0／background-size:cover／background-position:top center／
     background-repeat:no-repeat、オーバーレイ・追加グラデーションなし）を、
     同じ画像URL（assets/input/mobile/night-how-it-works-background-mobile.jpg）
     でそのまま共用する。新しい画像は作らず、FAQ専用のコピーも作らない。
     この画像はTOP画面表示時点でdecodeMobileNightHiwBackground()
     （js/main.js）により既にnew Image()+decode()済みのため、FAQ用の
     先読み関数は追加しない（同一URLのためブラウザキャッシュがそのまま
     効く）。is-faq-nightは、js/topScreen.jsのgoToFaq()内で既に
     付け外しされているこの画面専用の既存クラス（is-hiw-night/
     is-terms-night/is-privacy-night/is-tokushoho-nightとは別物）で、
     新しい昼夜判定は作っていない。FAQの本文（質問／回答・文字サイズ／
     文字色・余白・開閉挙動・ボタン・フッター・ヘッダー）・HOW IT WORKS
     画面本体・スマホ昼版FAQ・PC版FAQには一切触れていない。 */
  body.is-faq-night #screen-faq::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/input/mobile/night-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body.is-faq-night #screen-faq {
    background: transparent;
  }

  /* スマホ夜版FAQ・Answer本文の文字色（2026-09-16追加、同日ゴールドへ
     再調整）。TAROLUNEで既存使用しているゴールド（#cda45a、:root側
     --goldと同値）を使用し、Question（.faq-question、明るいアイボリー
     系のまま）とAnswerの階層をさらに明確にする。Question（.faq-answer-
     line以外の全要素）・文字サイズ・font-weight・line-height・余白・
     開閉挙動・背景には一切触れない。PC夜版FAQ・PC昼版FAQ・
     スマホ昼版FAQ・HOW IT WORKS・他画面には影響しない。 */
  body.is-faq-night #screen-faq .faq-answer-line {
    color: #cda45a;
  }

  #screen-faq.active {
    animation: none;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/mobile/day-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho {
    background: transparent;
  }

  /* スマホ夜版特定商取引法背景（2026-09-16追加）。正式採用済みの
     スマホ夜版HOW IT WORKS／FAQ／利用規約／プライバシーポリシー背景と
     全く同じ表示思想（position:fixed／inset:0／background-size:cover／
     background-position:top center／background-repeat:no-repeat、
     オーバーレイ・追加グラデーションなし）を、同じ画像URL
     （assets/input/mobile/night-how-it-works-background-mobile.jpg）で
     そのまま共用する。新しい画像は作らず、特定商取引法専用のコピーも
     作らない。この画像はTOP画面表示時点でdecodeMobileNightHiwBackground()
     （js/main.js）により既にnew Image()+decode()済みのため、特定商取引法
     用の先読み関数は追加しない。is-tokushoho-nightは、
     js/topScreen.jsのgoToTokushoho()内で既に付け外しされているこの
     画面専用の既存クラス。特定商取引法の本文（見出し／事業者名／
     所在地／料金等の各項目・文字色・文字サイズ・余白）・上部ブランド
     表示・FAQ・HOW IT WORKS・利用規約・プライバシーポリシー・
     スマホ昼版・PC版には一切触れていない。 */
  body.is-tokushoho-night #screen-tokushoho::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/input/mobile/night-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  body.is-tokushoho-night #screen-tokushoho {
    background: transparent;
  }

  #screen-tokushoho.active {
    animation: none;
  }

  /* 文字色。HOW IT WORKS スマホ昼版で採用済みの色をそのまま流用する。
     見出し #1B132C、本文 #241A38、弱め #514563。新しい色は作らない。 */
  body:not(.is-terms-night) #screen-terms .terms-title,
  body:not(.is-terms-night) #screen-terms .terms-article-heading {
    color: #1B132C;
  }

  body:not(.is-terms-night) #screen-terms .terms-title-sub,
  body:not(.is-terms-night) #screen-terms .terms-logo-sub,
  body:not(.is-terms-night) #screen-terms .terms-date {
    color: #514563;
  }

  body:not(.is-terms-night) #screen-terms .terms-logo {
    color: #B8863F;
  }

  body:not(.is-terms-night) #screen-terms .terms-intro,
  body:not(.is-terms-night) #screen-terms .terms-article-body,
  body:not(.is-terms-night) #screen-terms .terms-article-list {
    color: #241A38;
  }

  body:not(.is-terms-night) #screen-terms .terms-article-badge {
    color: #B8863F;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-title,
  body:not(.is-privacy-night) #screen-privacy .privacy-article-heading {
    color: #1B132C;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-title-sub,
  body:not(.is-privacy-night) #screen-privacy .privacy-logo-sub,
  body:not(.is-privacy-night) #screen-privacy .privacy-date {
    color: #514563;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-logo {
    color: #B8863F;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-intro,
  body:not(.is-privacy-night) #screen-privacy .privacy-article-body,
  body:not(.is-privacy-night) #screen-privacy .privacy-article-list {
    color: #241A38;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-article-badge {
    color: #B8863F;
  }

  body:not(.is-faq-night) #screen-faq .faq-title,
  body:not(.is-faq-night) #screen-faq .faq-question {
    color: #1B132C;
  }

  body:not(.is-faq-night) #screen-faq .faq-title-sub,
  body:not(.is-faq-night) #screen-faq .faq-logo-sub {
    color: #514563;
  }

  body:not(.is-faq-night) #screen-faq .faq-logo {
    color: #B8863F;
  }

  body:not(.is-faq-night) #screen-faq .faq-answer-line {
    color: #241A38;
  }

  body:not(.is-faq-night) #screen-faq .faq-group-title {
    color: #B8863F;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-title {
    color: #1B132C;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-title-sub,
  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo-sub {
    color: #514563;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo {
    color: #B8863F;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-item-body,
  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-item-list {
    color: #241A38;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-item-heading {
    color: #B8863F;
  }
}

/* =====================================================================
   スマホ昼版FAQ・上部ブランドヘッダー（「TAROLUNE」「CHOOSE YOUR CARD」）
   2026-09-15追加。

   スマホ昼版HOW IT WORKS（.hiw-brand-main/.hiw-brand-sub、
   @media(max-width:600px)内の.hiw-brand-main/.hiw-brand-sub定義）で
   実際に使われているfont-size/font-weight/letter-spacing/text-indentの
   値をそのまま複製し、
   FAQ画面の同じ2要素の見た目を完全に揃える。新しい数値は作っていない。
   HOW IT WORKS側の.hiw-*は1文字も変更していない。

   「TAROLUNE」の表示方法は、PC夜版FAQ（body.is-faq-night #screen-faq
   .faq-logo、9306〜9323行目）と全く同じ「font-size:0で元のTAROT文字を
   ゼロ幅にし、::afterでTAROLUNEを表示する」技術を踏襲。HTML側のテキスト
   「TAROT」自体は変更しない（PC昼版では引き続きこの文字を使って
   TAROLUNE表示しているため）。

   文字色はこのブロックでは指定していない。既存のスマホ昼版4画面共通
   ブロック（上のbody:not(.is-faq-night) #screen-faq .faq-logo{color:
   #B8863F}・.faq-logo-sub{color:#514563}、9953〜9959行目）がそのまま
   ::after／要素に継承され、現在の配色を変更しない。

   対象はbody:not(.is-faq-night)（スマホ昼版のみ）。PC版（@media
   min-width:601px側の既存.faq-logo等）・夜版（body.is-faq-night、
   スマホでは元々このブロックの対象外）・HOW IT WORKS自身には一切
   影響しない。FAQ本文（Q&A・カテゴリ見出し・余白・背景）も変更していない。 */
@media (max-width: 600px) {
  body:not(.is-faq-night) #screen-faq .faq-logo-wrap {
    text-align: center;
  }

  body:not(.is-faq-night) #screen-faq .faq-logo {
    font-size: 0;
  }

  body:not(.is-faq-night) #screen-faq .faq-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  body:not(.is-faq-night) #screen-faq .faq-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
  }

  /* FAQタイトル（「よくあるご質問」/「FAQ」）を、ブランド表示の直下で
     中央配置する。文字サイズ・余白は変更していない。 */
  body:not(.is-faq-night) #screen-faq .faq-title,
  body:not(.is-faq-night) #screen-faq .faq-title-sub {
    text-align: center;
  }
}

/* =====================================================================
   スマホ夜版FAQ・上部ブランド表記（「TAROT」→「TAROLUNE」）2026-09-16追加。

   スマホ夜版HOW IT WORKS（.hiw-brand-main、@media(max-width:600px)内、
   12456行目付近）で実際に使われているfont-size(1.5rem)/font-weight(700)/
   letter-spacing(0.2em)/text-indent(0.2em)、および夜版の文字色
   （body.is-hiw-night #screen-how-it-works .hiw-brand-main、
   12464行目、#e3b85c）をそのまま複製し、FAQ画面の「TAROT」表示を
   「TAROLUNE」へ見た目ごと統一する。HOW IT WORKS側の.hiw-*・
   スマホ昼版FAQ（直上のbody:not(.is-faq-night)ブロック）・PC版FAQの
   実装は1文字も変更していない。

   実装方式は、直上のスマホ昼版FAQブロックと同じ「HTML側のテキスト
   『TAROT』はそのまま維持し、font-size:0でゼロ幅にしたうえで
   ::afterで『TAROLUNE』を表示する」技術。text-align:centerも
   同ブロックと同じ考え方で追加し、HOW IT WORKS（.hiw-brand、
   display:flex+align-items:center）と同じ中央配置の見た目に揃える
   （画面上部というブランド表示位置自体は変更していない）。

   「よくあるご質問」「FAQ」・Question・Answer・カテゴリ見出し・背景・
   FAQ Answerのゴールド（#cda45a）にも触れていない。対象は
   body.is-faq-night（スマホ夜版のみ）。PC版（@media min-width:601px側の
   既存.faq-logo等）・スマホ昼版・HOW IT WORKS自身には一切影響しない。

   追記（2026-09-16・その1）：実機確認の結果、「CHOOSE YOUR CARD」
   （.faq-logo-sub）だけが左寄せのままだった不具合を修正。原因は、
   .faq-logo-sub（<p class="faq-logo-sub">）が.faq-logo-wrap
   （<div>、TAROLUNE本体を包む要素）の外側にある兄弟要素のため、
   上のbody.is-faq-night #screen-faq .faq-logo-wrap{text-align:center}
   が及ばなかったこと。.faq-logo-sub自身にtext-align:centerを追加した。

   追記（2026-09-16・その2）：実機比較の結果、「CHOOSE YOUR CARD」の
   文字サイズ・letter-spacing・TAROLUNEとの縦間隔が、スマホ夜版
   HOW IT WORKS（.hiw-brand-sub、@media max-width:600px内、12526行目
   付近：font-size 0.6rem/font-weight 600/letter-spacing 0.2em/
   text-indent 0.2em、夜版色body.is-hiw-night #screen-how-it-works
   .hiw-brand-sub、12534行目：#c8bfd8）と一致していなかったため、
   これらの値をそのまま複製した。縦間隔は、HOW IT WORKS側の
   .hiw-brand{gap:4px}（TAROLUNEとCHOOSE YOUR CARDをflexで1セット
   管理）と同じ間隔になるよう、スマホ昼版FAQで既に採用済みの手法
   （HTML構造がdiv+p の兄弟要素のため、flexのgapの代わりに
   .faq-logo-subへmargin:4px 0 0を指定して同じ見た目の間隔を再現する、
   直上のbody:not(.is-faq-night)ブロックと同じ考え方）をそのまま流用し、
   .faq-logo-subにmargin:4px 0 0を追加した。 */
@media (max-width: 600px) {
  body.is-faq-night #screen-faq .faq-logo-wrap {
    text-align: center;
  }

  body.is-faq-night #screen-faq .faq-logo {
    font-size: 0;
  }

  body.is-faq-night #screen-faq .faq-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #e3b85c;
  }

  body.is-faq-night #screen-faq .faq-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    color: #c8bfd8;
  }
}

/* =====================================================================
   スマホ昼版・利用規約／プライバシーポリシー／特定商取引法・
   上部ブランドヘッダー（「TAROLUNE」「CHOOSE YOUR CARD」）2026-09-15追加。

   実機確認・正式採用済みのスマホ昼版FAQ（直上の
   「スマホ昼版FAQ・上部ブランドヘッダー」ブロック）と全く同じロジック・
   全く同じ数値をそのまま複製する。新しい数値は作っていない。FAQ側の
   実装は1文字も変更していない。

   利用規約（.terms-logo/.terms-logo-sub/.terms-title/.terms-title-sub）・
   プライバシーポリシー（.privacy-*）・特定商取引法（.tokushoho-*）は、
   PC版のHTML/CSS構造がFAQ（.faq-*）と完全に同一（同じクラス命名規則・
   同じ.X-logo-wrap→.X-sparkle+.X-logo+.X-sparkle→.X-logo-sub→
   .X-title→.X-title-subの並び）であるため、クラス名だけを置き換えて
   同じ手法を適用している。

   「TAROLUNE」の表示方法は、FAQ・PC夜版利用規約/プライバシー/特定商取引法
   と全く同じ「font-size:0で元のTAROT文字をゼロ幅にし、::afterで
   TAROLUNEを表示する」技術を踏襲。HTML側のテキスト「TAROT」自体は
   変更しない（PC昼版では引き続きこの文字を使ってTAROLUNE表示している
   ため）。

   文字色はこのブロックでは指定していない。既存のスマホ昼版4画面共通
   ブロック（上のbody:not(.is-X-night) #screen-X .X-logo{color:#B8863F}・
   .X-logo-sub{color:#514563}）がそのまま::after／要素に継承され、
   現在の配色を変更しない。

   対象は各画面のbody:not(.is-X-night)（スマホ昼版のみ）。PC版（@media
   min-width:601px側の既存.terms-logo等）・各夜版（body.is-X-night、
   スマホでは元々このブロックの対象外）・FAQ・HOW IT WORKS自身には
   一切影響しない。各画面の本文（条文・項目・見出し・余白・背景）も
   変更していない。 */
@media (max-width: 600px) {
  /* ---- 利用規約 ---- */
  body:not(.is-terms-night) #screen-terms .terms-logo-wrap {
    text-align: center;
  }

  body:not(.is-terms-night) #screen-terms .terms-logo {
    font-size: 0;
  }

  body:not(.is-terms-night) #screen-terms .terms-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  body:not(.is-terms-night) #screen-terms .terms-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
  }

  body:not(.is-terms-night) #screen-terms .terms-title,
  body:not(.is-terms-night) #screen-terms .terms-title-sub {
    text-align: center;
  }

  /* ---- 利用規約・スマホ夜版（2026-09-16追加） ----
     スマホ夜版FAQで実機確認済みの.faq-logo/.faq-logo::after/
     .faq-logo-subの実効値（body.is-faq-night #screen-faq ...、上の
     「スマホ夜版FAQ・上部ブランド表記」ブロック）を、クラス名だけ
     .terms-*へ置き換えてそのまま複製する。新しい数値は作っていない。
     TAROLUNE（.terms-logo::after）：font-size 1.5rem/font-weight 700/
     letter-spacing 0.2em/text-indent 0.2em/color #e3b85c。
     CHOOSE YOUR CARD（.terms-logo-sub）：margin 4px 0 0/font-size
     0.6rem/font-weight 600/letter-spacing 0.2em/text-indent 0.2em/
     color #c8bfd8。margin:4px 0 0は、FAQ側でHOW IT WORKSの
     .hiw-brand{gap:4px}相当の縦間隔を再現するために採用した既存手法を
     そのまま踏襲したもの。中央配置は.terms-logo-wrap/.terms-logo-sub
     双方へのtext-align:centerで統一する。「利用規約」「TERMS OF
     SERVICE」・制定日・第1条以降の本文・背景・スマホ昼版・PC版・
     プライバシーポリシー・特定商取引法・FAQ・HOW IT WORKSには
     一切触れていない。 */
  body.is-terms-night #screen-terms .terms-logo-wrap {
    text-align: center;
  }

  body.is-terms-night #screen-terms .terms-logo {
    font-size: 0;
  }

  body.is-terms-night #screen-terms .terms-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #e3b85c;
  }

  body.is-terms-night #screen-terms .terms-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    color: #c8bfd8;
  }

  /* ---- プライバシーポリシー ---- */
  body:not(.is-privacy-night) #screen-privacy .privacy-logo-wrap {
    text-align: center;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-logo {
    font-size: 0;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
  }

  body:not(.is-privacy-night) #screen-privacy .privacy-title,
  body:not(.is-privacy-night) #screen-privacy .privacy-title-sub {
    text-align: center;
  }

  /* ---- プライバシーポリシー・スマホ夜版（2026-09-16追加） ----
     スマホ夜版利用規約で実機確認済みの.terms-logo/.terms-logo::after/
     .terms-logo-subの実効値（body.is-terms-night #screen-terms ...）を、
     クラス名だけ.privacy-*へ置き換えてそのまま複製する。新しい数値は
     作っていない。TAROLUNE（.privacy-logo::after）：font-size 1.5rem/
     font-weight 700/letter-spacing 0.2em/text-indent 0.2em/
     color #e3b85c。CHOOSE YOUR CARD（.privacy-logo-sub）：margin
     4px 0 0/font-size 0.6rem/font-weight 600/letter-spacing 0.2em/
     text-indent 0.2em/color #c8bfd8。中央配置は.privacy-logo-wrap/
     .privacy-logo-sub双方へのtext-align:centerで統一する。
     「プライバシーポリシー」「PRIVACY POLICY」・制定日・第1条以降の
     本文・背景・スマホ昼版・PC版・利用規約・特定商取引法・FAQ・
     HOW IT WORKSには一切触れていない。 */
  body.is-privacy-night #screen-privacy .privacy-logo-wrap {
    text-align: center;
  }

  body.is-privacy-night #screen-privacy .privacy-logo {
    font-size: 0;
  }

  body.is-privacy-night #screen-privacy .privacy-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #e3b85c;
  }

  body.is-privacy-night #screen-privacy .privacy-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    color: #c8bfd8;
  }

  /* ---- 特定商取引法に基づく表記 ---- */
  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo-wrap {
    text-align: center;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo {
    font-size: 0;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
  }

  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-title,
  body:not(.is-tokushoho-night) #screen-tokushoho .tokushoho-title-sub {
    text-align: center;
  }

  /* ---- 特定商取引法に基づく表記・スマホ夜版（2026-09-16追加） ----
     スマホ夜版利用規約／プライバシーポリシーで実機確認済みの
     .terms-logo/.privacy-logo等の実効値を、クラス名だけ
     .tokushoho-*へ置き換えてそのまま複製する。新しい数値は作って
     いない。TAROLUNE（.tokushoho-logo::after）：font-size 1.5rem/
     font-weight 700/letter-spacing 0.2em/text-indent 0.2em/
     color #e3b85c。CHOOSE YOUR CARD（.tokushoho-logo-sub）：margin
     4px 0 0/font-size 0.6rem/font-weight 600/letter-spacing 0.2em/
     text-indent 0.2em/color #c8bfd8。中央配置は.tokushoho-logo-wrap/
     .tokushoho-logo-sub双方へのtext-align:centerで統一する。
     「特定商取引法に基づく表記」・英語サブタイトル・事業者名・
     所在地・料金等の本文・背景・スマホ昼版・PC版・利用規約・
     プライバシーポリシー・FAQ・HOW IT WORKSには一切触れていない。 */
  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo-wrap {
    text-align: center;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo {
    font-size: 0;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo::after {
    content: 'TAROLUNE';
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #e3b85c;
  }

  body.is-tokushoho-night #screen-tokushoho .tokushoho-logo-sub {
    margin: 4px 0 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    color: #c8bfd8;
  }
}

/* =====================================================================
   HOW IT WORKS画面（#screen-how-it-works）PC昼版限定・新規追加。
   正式採用済みの#screen-terms/.terms-*・#screen-privacy/.privacy-*・
   #screen-faq/.faq-*・#screen-tokushoho/.tokushoho-*（上の4ブロック）は
   1文字も変更せず、この画面専用の.hiw-*クラス・ID
   （#screen-how-it-works、#top-nav-how-it-works-link、
   #hiw-start-button、#hiw-terms-link、#hiw-privacy-link、
   #hiw-tokushoho-link）で完全に独立して構成する。既存の
   .screen/.screen.active（基本の表示切替）以外の既存セレクタ・:root・
   .top-nav-link等の共通ルールには一切触れない。TOP・相談入力・
   コース選択・カード選択・カード開示・結果画面・利用規約・
   プライバシーポリシー・FAQ・特定商取引法画面のCSS/HTMLは無変更。
   上記4画面が「文章中心の法務ページ」であるのに対し、この画面は
   TAROLUNEの体験を理解してもらうための紹介ページのため、白ベースの
   単一パネルではなく、STEP導線・カード型パネル・横長Premiumパネルを
   持つ構成にしている。背景は既存画像（day-*-background.png等）を
   加工・流用せず、body.is-top-active（TOP画面）の昼テーマと同じ
   配色値（アイボリー・ラベンダー・ピンク）をこの画面専用のCSS変数
   （--hiw-*）として複製し、CSSグラデーションのみで表現している
   （画像ファイルは追加していない）。ゴールドの配色は既存の
   :root { --gold, --gold-strong }（利用規約等の法務4画面と同じ変数）を
   そのまま再利用している。
   ===================================================================== */

/* ナビの「HOW IT WORKS」ボタンだけを有効化する。共通の.top-nav-link
   （cursor:defaultのまま）は変更せず、IDセレクタで上書きするのみ。
   FAQ/利用規約/プライバシー/特定商取引法/LOGINには一切影響しない。 */
#top-nav-how-it-works-link {
  cursor: pointer;
}

/* スマホ幅では「HOW IT WORKS」ボタンを非表示にする（FAQ/利用規約/
   プライバシー/特定商取引法と同じ考え方）。実機確認用に一時的に解除
   していたが、スマホ版TOPの三本線が新設のMENU画面（#screen-menu）へ
   遷移する方式になり、この#top-nav自体をスマホで開かなくなったため、
   元の非表示状態へ戻す（2026-09-14）。PC版はこのブロックの対象外
   （@media(max-width:600px)限定）のため無影響。 */
@media (max-width: 600px) {
  #top-nav-how-it-works-link {
    display: none;
  }
}

@media (min-width: 601px) {
  /* この画面専用のローカル配色変数。body.is-top-active（TOP画面の
     昼テーマ）が使う--top-bg-1〜4等はbody.is-top-active自身に
     スコープされており、この画面（is-top-active/is-top-nightを
     外した状態で表示する）では参照できないため、同じ配色の値だけを
     この画面専用の変数として複製する。他画面のbody.is-top-active
     側の変数定義自体には触れていない。 */
  #screen-how-it-works {
    --hiw-ivory: #fffdfb;
    --hiw-lavender: #f7ecf9;
    --hiw-pink: #fbe8ef;
    --hiw-lavender-2: #efe6fb;
    --hiw-text: #322a45;
    --hiw-text-muted: #7a7190;
    --hiw-body: #55506b;
  }

  /* 背景（PC限定）。#screen-terms::before/#screen-privacy::before/
     #screen-faq::before/#screen-tokushoho::beforeと全く同じ
     「position:fixedでビューポート全面を覆う」手法・同じ
     background-size:cover＋background-position:top centerの指定方法を
     採用し、既存PC昼版法務系4画面と統一感のある「幻想的な空・柔らかな
     雲・満月」の世界観に変更（実機確認の結果、淡いグラデーションのみの
     背景では単色系に見えるとのフィードバックを受けての調整）。
     z-index:-1で本文より必ず背面、pointer-events:noneでクリックを
     一切妨げない。#screen-how-it-works非表示中（.screen{display:none}）
     は::before自体も描画されないため他画面に漏れない。 */
  /* HOW IT WORKS画面専用の背景画像（assets/input/day-how-it-works-background.png。
     利用規約・プライバシーポリシー・FAQ・特定商取引法画面専用の各背景
     ファイル（いずれもassets/input/day-terms-background.pngの複製、
     満月1つのみ）と全く同じ内容の複製で、別ファイル。既存4ファイルの
     いずれも上書き・加工していない。どれか1つを将来差し替えても他に
     影響しない）。
     本文（STEP・料金カード・Premiumパネル等）側には新しいパネルを
     追加していないため、可読性確保のための淡いアイボリーの
     グラデーションを、写真の手前に重ねるレイヤーとしてここに追加
     している（背景プロパティ内の1レイヤーのみ。HTML側に新規要素は
     追加していない）。上端・下端をやや明るく、中央をやや薄くすることで、
     ヒーロー見出しや本文テキストと背景の月・雲が強く干渉しないように
     している。 */
  #screen-how-it-works::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/day-how-it-works-background.png") top center / cover no-repeat;
  }

  /* PC夜版HOW IT WORKS背景（2026-09-12追加）。ユーザー提供の新規画像
     assets/input/night-how-it-works-background.png（1808×870、月・星空・
     紫の雲・右上のゴールド装飾を含む、加工なしの元画像）に完全差し替え。
     昼版と同じ「position:fixedでビューポート全面を覆う」::before・
     background-size:cover＋background-position:top centerの手法をそのまま
     踏襲し、画像の縦横比は保持したまま画面幅いっぱいを自然に覆い、
     position:fixedのため縦スクロールしても背景が途切れない。
     昼版のような読みやすさ用の淡いアイボリーの重ねグラデーションは、
     月・星空・紫の雲・ゴールド装飾を「そのまま」見せる今回の指示に
     合わせて追加していない（画像1枚のみ）。
     本文の文字色・パネル色は、この後の「PC夜版HOW IT WORKS 配色調整
     （2026-09-12）」ブロック（このメディアクエリの末尾）で別途調整
     している。配置・余白・HTML構造はそちらでも変更していない。
     body.is-hiw-nightは、js/topScreen.jsのgoToHowItWorks()内でのみ
     付け外しされる、この画面専用の新規クラス（TOP画面のis-top-night
     とは別物）。@media(min-width:601px)内かつ#screen-how-it-works
     配下に限定しているため、PC昼版・スマホ昼版・スマホ夜版・
     TOP・他画面には一切影響しない。 */
  body.is-hiw-night #screen-how-it-works::before {
    background: url("../assets/input/night-how-it-works-background.png") top center / cover no-repeat;
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-terms/#screen-privacy/
     #screen-faq/#screen-tokushoho等既存のanimation:noneと同じ考え方。 */
  #screen-how-it-works.active {
    animation: none;
  }

  /* パネル幅確保のため、この画面表示中だけ#appのmax-width:720pxを
     広げる。#screen-terms等向けのbody:has(#screen-terms.active) #app
     と同じ:has()手法を踏襲し、新規bodyクラス・JS変更を追加せずに
     済ませる。#app共通ルール自体（49行目付近）は変更しない。 */
  body:has(#screen-how-it-works.active) #app {
    max-width: 960px;
  }

  /* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
     HOW IT WORKS画面がアクティブな間だけ非表示にする（この画面自体の
     .hiw-brandで「TAROLUNE」ブランド表示を独自に持つため）。
     #screen-terms/#screen-privacy/#screen-faq/#screen-tokushoho向けの
     同じ:has()手法。#screen-how-it-works.activeの有無だけで判定する
     ため、TOP・相談入力・コース選択・カード選択・カード開示・結果
     画面・利用規約・プライバシーポリシー・FAQ・特定商取引法画面が
     表示されている間はこのセレクタ自体が成立せず、.app-headerの表示
     に一切影響しない。 */
  body:has(#screen-how-it-works.active) .app-header {
    display: none;
  }

  .hiw-page {
    position: relative;
    padding: 8px 0 0;
  }

  /* ---- 上部ヒーロー（ブランド表示・タイトル・導入文） ---- */

  .hiw-hero {
    padding: 32px 40px 26px;
    text-align: center;
  }

  /* 「TAROT」ロゴ画像ではなく、正式サービス名「TAROLUNE」をテキストで
     表示する（ユーザー指示どおり）。TOP画面ヘッダーの
     .top-header-brand-main/.top-header-brand-subと同じ考え方の
     テキスト表示だが、この画面専用のクラスとして独立させており、
     TOP画面側のクラス・ルールには一切触れていない。 */
  .hiw-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 20px;
  }

  .hiw-brand-main {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--gold-strong);
  }

  .hiw-brand-sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: var(--hiw-text-muted);
  }

  .hiw-hero-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--hiw-text);
  }

  .hiw-hero-subtitle {
    margin: 10px 0 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold);
  }

  .hiw-hero-intro {
    max-width: 560px;
    margin: 24px auto 0;
  }

  .hiw-hero-intro-line {
    margin: 6px 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--hiw-text);
  }

  .hiw-hero-intro-line:first-child {
    margin-top: 0;
  }

  /* ---- STEP 1〜5（縦の流れでつながるタイムライン構成） ---- */

  .hiw-steps {
    position: relative;
    max-width: 640px;
    margin: 4px auto 0;
    padding: 20px 24px 4px;
  }

  .hiw-step {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 22px 0;
  }

  .hiw-step + .hiw-step {
    border-top: 1px dashed rgba(184, 134, 63, 0.25);
  }

  .hiw-step-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #ffffff, var(--hiw-lavender));
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 6px 16px rgba(154, 118, 200, 0.18);
  }

  .hiw-step-number {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-strong);
  }

  .hiw-step-content {
    flex: 1 1 auto;
    padding-top: 2px;
  }

  .hiw-step-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hiw-text);
  }

  .hiw-step-text {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.75;
    color: var(--hiw-text);
  }

  .hiw-step-highlight-text {
    display: inline-block;
    margin: 12px 0 0;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    border-radius: 999px;
  }

  /* STEP 3「78枚から、あなた自身でカードを選ぶ」だけを、このページ内で
     最も印象的に見せるための強調バリエーション。マーカー列の位置は
     他のSTEPと揃えたまま、コンテンツ側だけ余白を広げてカード状に
     浮き上がらせる。 */
  .hiw-step--highlight {
    margin: 6px -20px;
    padding: 26px 20px;
    border-top: none;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), var(--hiw-pink));
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 16px 32px rgba(154, 118, 200, 0.22);
  }

  .hiw-step--highlight + .hiw-step {
    border-top: none;
  }

  .hiw-step--highlight .hiw-step-marker {
    width: 60px;
    height: 60px;
    background: linear-gradient(160deg, var(--gold-strong), var(--gold));
    border-color: var(--gold-strong);
  }

  .hiw-step--highlight .hiw-step-number {
    font-size: 1.05rem;
    color: #ffffff;
  }

  .hiw-step--highlight .hiw-step-title {
    font-size: 1.15rem;
  }

  /* ---- 鑑定コース（3枚・5枚・7枚を横並びの同一デザインで表示。
     優劣ではなく用途の違いとして見せるため、3枚共通のクラスのみを
     使い、5枚/7枚だけを大きくする等の差は付けない） ---- */

  .hiw-courses-section {
    max-width: 900px;
    margin: 10px auto 0;
    padding: 34px 24px 8px;
    text-align: center;
  }

  .hiw-section-title {
    margin: 0 0 22px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--hiw-text);
  }

  .hiw-courses {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }

  .hiw-course-card {
    flex: 1 1 220px;
    max-width: 260px;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(184, 134, 63, 0.3);
    box-shadow: 0 10px 24px rgba(154, 118, 200, 0.14);
    text-align: center;
  }

  .hiw-course-label {
    margin: 0 0 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: var(--gold);
  }

  .hiw-course-name {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hiw-text);
  }

  .hiw-course-price {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold-strong);
  }

  .hiw-course-desc {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--hiw-text);
  }

  .hiw-course-note {
    margin: 10px 0 0;
    font-size: 0.7rem;
    color: var(--hiw-text-muted);
  }

  /* 13枚Premium「ホロスコープ・スプレッド」紹介カード（PC昼版限定、
     2026-09-18追加、同日「横長の特別カード」へ修正）。スマホ昼版で
     正式採用済みの.hiw-course-card--thirteen（index.html、3/5/7枚の
     .hiw-course-cardとマークアップ・文言を共有する<article>）をPC昼版
     にも表示する。HTML・文言（ラベル／コース名／説明／「Premium限定」
     注記）は一切変更しない。この要素は全体のデフォルト（メディア
     クエリ外、13294行目付近）でdisplay:noneのため、PC昼版スコープで
     だけdisplay:blockへ戻す（スマホ版の実装と同じ考え方）。3/5/7枚の
     .hiw-course-card（上記の無条件ベースルール）・TAROLUNE Premium
     パネル本体（直下の.hiw-premium）には一切触れていない。

     実機確認の結果、通常カードと同じmax-width:260pxでは
     「13枚 ホロスコープ・スプレッド」が2行に折り返されてしまうため、
     このカードだけmax-widthを拡大し、Premium限定の「横長の特別カード」
     として表示する。flex-grow/flex-shrink/flex-basis（.hiw-course-card
     の無条件ベースルール由来のflex:1 1 220px）はそのまま維持しており、
     .hiw-coursesのflex-wrapによってこのカードが単独で2段目へ折り返
     される挙動（前回実装時から変更なし。折り返し判定はflex-basis:220px
     を基準に行われるため、max-width拡大の影響を受けない）を利用して、
     max-widthの拡大分だけ横に広がるようにしている。横幅640pxは、この
     ページ内で「全幅（900px）ほどではないが3/5/7枚カードよりは明確に
     広い」既存の中間サイズとして使われている.hiw-payment-sectionの
     max-width（13050行目）と同じ値をそのまま流用した（新しい数値を
     作らず、既存の値を転用）。padding拡大（横のみ）はカードの横幅に
     合わせた比率調整で、文字サイズ・行間・文言は変更していない。
     margin-topは上段3カードとの間に「別要素として認識できる」余白を
     追加するためのもので、.hiw-coursesのgap:18pxに上乗せする形。
     配色（background/border/box-shadow）は新規に作らず、直下の
     .hiw-premiumパネルと全く同じ値をそのまま流用する（前回実装から
     変更なし）。PC夜版（body.is-hiw-night）はこのルールの対象外の
     ため、display:noneのまま非表示を維持する。 */
  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-card--thirteen {
    display: block;
    max-width: 640px;
    margin-top: 14px;
    padding: 26px 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), var(--hiw-lavender-2));
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 12px 24px rgba(154, 118, 200, 0.16);
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-note--premium {
    color: #B8863F;
    font-weight: 700;
  }

  /* ---- TAROLUNE Premium（横長の特別感のあるパネル。契約条件は
     読める文字サイズ＝他の本文と同じ0.8rem台のまま、小さな注釈には
     しない） ---- */

  .hiw-premium {
    max-width: 900px;
    margin: 30px auto 0;
    padding: 32px 40px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), var(--hiw-lavender-2));
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 18px 36px rgba(154, 118, 200, 0.2);
  }

  .hiw-premium-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
  }

  .hiw-premium-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hiw-text);
  }

  .hiw-premium-catch {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-strong);
  }

  .hiw-premium-price {
    margin: 6px 0 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-strong);
  }

  .hiw-premium-desc {
    margin: 4px 0 20px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--hiw-text);
  }

  .hiw-premium-terms {
    margin: 0;
    padding-left: 1.3em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 28px;
  }

  .hiw-premium-terms li {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--hiw-text);
  }

  /* ---- お支払いについて（説明文のみ。入力欄・決済ボタン・API接続は
     一切追加しない） ---- */

  .hiw-payment-section {
    max-width: 640px;
    margin: 34px auto 0;
    padding: 0 24px;
    text-align: center;
  }

  .hiw-payment {
    margin-top: 4px;
  }

  .hiw-payment-text {
    margin: 10px 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--hiw-text);
    text-align: left;
  }

  .hiw-payment-text:first-child {
    margin-top: 0;
  }

  /* ---- 最後のCTA（押すと既存goToTop()でTOPへ戻るのみ。新しい占い
     開始ロジックは追加していない） ---- */

  .hiw-final-cta {
    max-width: 560px;
    margin: 46px auto 0;
    padding: 40px 24px 10px;
    text-align: center;
  }

  .hiw-final-cta-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hiw-text);
  }

  .hiw-final-cta-text {
    margin: 0 0 26px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.75;
    color: var(--hiw-text);
  }

  .hiw-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 48px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    border: none;
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(184, 134, 63, 0.3);
    cursor: pointer;
  }

  .hiw-cta-button:hover,
  .hiw-cta-button:focus-visible {
    filter: brightness(1.05);
  }

  /* ---- 法務ページへの導線（利用規約/プライバシーポリシー/特定商
     取引法に基づく表記。いずれも既存のgoToTerms()/goToPrivacy()/
     goToTokushoho()をそのまま再利用し、新しい遷移処理は追加しない） ---- */

  .hiw-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 30px auto 0;
    padding: 20px 24px 44px;
  }

  .hiw-legal-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--hiw-text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(184, 134, 63, 0.4);
  }

  .hiw-legal-link:hover,
  .hiw-legal-link:focus-visible {
    color: var(--gold-strong);
  }

  /* =====================================================================
     PC夜版HOW IT WORKS 配色調整（2026-09-12）。
     night-how-it-works-background.png（背景画像・位置・background-size・
     スクロール仕様は前回実装のまま完全固定、今回一切変更していない）の
     上に、PC夜版TOPと統一感のある配色（明るいラベンダー〜アイボリーの
     文字・落ち着いたゴールド・半透明の濃紺〜濃紫パネル・細いゴールド
     罫線）を重ねる。対象はすべてbody.is-hiw-night #screen-how-it-works
     配下のみで、上記の昼版ルール（.hiw-*、無条件のベース宣言）は
     1文字も変更していない。HTML構造・各要素のwidth/height/margin/
     padding/gap・画面全体の縦方向レイアウトも無変更（colorと一部要素の
     background/border/box-shadow/backdrop-filterのみを上書き）。
     body.is-hiw-nightはgoToHowItWorks()内でのみ付け外しされるこの画面
     専用クラスのため、PC昼版HOW IT WORKS・スマホ昼版・スマホ夜版・
     TOP・他画面には一切影響しない。 ===================================== */

  /* ブランド表示・ヒーロー見出し */
  body.is-hiw-night #screen-how-it-works .hiw-brand-main {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-brand-sub {
    color: #c8bfd8;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-title {
    color: #ddd5ee;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-subtitle {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-intro-line {
    color: #e8e1f1;
  }

  /* STEP 1〜5: 見出し・説明文・区切り線 */
  body.is-hiw-night #screen-how-it-works .hiw-step-title {
    color: #eee8f5;
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-text {
    color: #d6cee4;
  }

  body.is-hiw-night #screen-how-it-works .hiw-step + .hiw-step {
    border-top: 1px dashed rgba(217, 173, 85, 0.30);
  }

  /* STEP 01/02/04/05の丸、およびSTEP03（.hiw-step--highlight）の丸も
     同じ夜版仕様の半透明の濃紺〜濃紫の円に統一する。非常に弱いゴールドの
     外側グローのみ付与し、派手には光らせない。 */
  body.is-hiw-night #screen-how-it-works .hiw-step-marker,
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight .hiw-step-marker {
    background: rgba(20, 15, 48, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.75);
    box-shadow: 0 0 10px rgba(217, 173, 85, 0.2);
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-number,
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight .hiw-step-number {
    color: #e3b85c;
  }

  /* STEP03強調パネル: 白パネルから夜版専用の半透明の濃紺〜濃紫パネルへ。
     backdrop-filterは弱めにし、背景の星空がわずかに透ける程度に留める。 */
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.65);
    box-shadow: 0 16px 32px rgba(5, 3, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* 鑑定コース（3枚・5枚・7枚）。情報量が多いため可読性を最優先し、
     STEP03パネルと同じ配色系統で統一感を持たせつつ、フチの濃さを
     STEP03よりわずかに弱くして主従関係を保つ。 */
  body.is-hiw-night #screen-how-it-works .hiw-course-card {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.55);
    box-shadow: 0 10px 24px rgba(5, 3, 18, 0.35);
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-label {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-name {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-price {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-desc {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-note {
    color: #c8bfd8;
  }

  /* 13枚Premium「ホロスコープ・スプレッド」紹介カード（PC夜版、
     2026-09-18追加、同日サイズ・配置を修正）。PC昼版
     （body:not(.is-hiw-night)側、上のブロック）で正式採用済みの
     「横長カード」と、サイズ・配置に関するレイアウト値
     （display/max-width/margin-top/padding）だけをそのまま流用する。
     色・背景・border・box-shadowはPC昼版から一切コピーしていない
     （PC夜版の配色は変更しない指示のため）。
     このカードはHTML側でhiw-course-cardクラスも併せ持つため
     （<article class="hiw-course-card hiw-course-card--thirteen">）、
     background/border/box-shadow/文字色は、すぐ上で定義済みのPC夜版
     共通の鑑定コース配色（.hiw-course-card/.hiw-course-label/
     .hiw-course-name/.hiw-course-desc/.hiw-course-note、いずれも
     このブロック内・無変更）が3/5/7枚と全く同じ詳細度でそのまま
     適用され続ける。
     中央配置は新しいCSSを追加していない。.hiw-courses（display:flex;
     flex-wrap:wrap; justify-content:center; gap:18px;、昼夜共通の
     無条件ベースルール）が、max-width:640pxに拡大されたこのカードを
     単独で2段目へ折り返し、justify-content:centerで自動的に中央寄せ
     する仕組みをそのまま利用しているため（PC昼版と全く同じ仕組み）。
     3/5/7枚のサイズ・配置（.hiw-course-cardの無条件ベースルール、
     flex:1 1 220px/max-width:260px）・Premiumパネル・他セクションには
     一切触れていない。 */
  body.is-hiw-night #screen-how-it-works .hiw-course-card--thirteen {
    display: block;
    max-width: 640px;
    margin-top: 14px;
    padding: 26px 40px;
  }

  /* TAROLUNE Premiumパネル。情報量が多い契約条件も可読性優先で
     明るいラベンダー系のまま統一する。 */
  body.is-hiw-night #screen-how-it-works .hiw-premium {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.55);
    box-shadow: 0 18px 36px rgba(5, 3, 18, 0.4);
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-title {
    color: #eee8f5;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-catch {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-price {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-desc {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-terms li {
    color: #e8e1f1;
  }

  /* セクション見出し（「鑑定コース」「お支払いについて」）・お支払い
     説明文・最後のCTA見出し／本文 */
  body.is-hiw-night #screen-how-it-works .hiw-section-title {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-payment-text {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-final-cta-title {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-final-cta-text {
    color: #e8e1f1;
  }

  /* 最下部リンク（利用規約・プライバシーポリシー・特定商取引法）。
     「トップページに戻る」ボタン（.hiw-cta-button）は既存のブランド
     ゴールド配色・サイズ・位置のまま変更していない。 */
  body.is-hiw-night #screen-how-it-works .hiw-legal-link {
    color: #c8bfd8;
  }

  body.is-hiw-night #screen-how-it-works .hiw-legal-link:hover,
  body.is-hiw-night #screen-how-it-works .hiw-legal-link:focus-visible {
    color: #e3b85c;
  }
}

/* 13枚Premium「ホロスコープ・スプレッド」紹介カード（2026-09-17追加）。
   スマホ昼版HOW IT WORKS限定で表示するため、まずメディアクエリの外
   （＝PC/スマホ・昼夜すべて）でdisplay:noneをデフォルトにする。
   下記の@media(max-width:600px)内、body:not(.is-hiw-night)スコープの
   ルールだけがこれを上書きしてdisplay:flexへ戻す。既存の
   .hiw-course-card（3/5/7枚が共有する無条件ベースルール、PC・
   スマホ昼夜共通）はこのモディファイアクラスの追加だけでは一切
   影響を受けない。 */
.hiw-course-card--thirteen {
  display: none;
}

/* =========================================================
   スマホ版HOW IT WORKS・鑑定コースカード（.hiw-courses周辺のみ、
   2026-09-14新規追加）。

   対象は.hiw-courses/.hiw-course-card/カード内5要素（ラベル・
   コース名・説明・価格・注記）と、.hiw-courses-section周辺の必要
   最小限の余白のみ。背景・ヒーロー・5 STEP・Premium案内・お支払い
   説明・最終CTA・法務リンク・共通ヘッダー非表示処理・ハンバーガー
   メニューのdisplay:noneには一切触れていない。HOW IT WORKSの
   HTML構造・JSは無変更。

   既存PC版ブロック（上の@media(min-width:601px)、9643〜10330行目）は
   1文字も変更せず、このスマホ専用@media(max-width:600px)ブロックは
   完全に独立させている。PC版の.hiw-courses-section/.hiw-course-card
   等（background/border-radius/box-shadow等を含む）はPC専用メディア
   クエリ内でのみ定義されており、スマホ幅ではそもそも一切適用されない
   ため、スマホでも同じ質感（半透明アイボリー×ゴールド×淡い紫の影）で
   表示できるよう、PC版と同じ値を使って必要なプロパティ一式をこの
   ブロック内で改めて指定している（新しい色は作らない）。

   表示順（ラベル→コース名→説明→価格→注記）は、HTMLの並び順
   （ラベル→コース名→価格→説明→注記）を変更せず、.hiw-course-cardを
   flexコンテナ化したうえでorderプロパティのみで実現している。 */
@media (max-width: 600px) {
  .hiw-courses-section {
    padding: 28px 20px 4px;
  }

  .hiw-courses {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hiw-course-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 22px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(184, 134, 63, 0.3);
    box-shadow: 0 10px 24px rgba(154, 118, 200, 0.14);
    text-align: center;
  }

  .hiw-course-label {
    order: 1;
    margin: 0 0 8px;
    font-size: 0.66rem;
    color: #cda45a;
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-label {
    color: #B8863F;
  }

  .hiw-course-name {
    order: 2;
    margin: 0 0 10px;
    font-size: 1.08rem;
    color: #322a45;
  }

  .hiw-course-desc {
    order: 3;
    margin: 0 0 12px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #322a45;
  }

  .hiw-course-price {
    order: 4;
    margin: 0 0 4px;
    font-size: 1.15rem;
    color: #e3c07a;
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-price {
    color: #B8863F;
  }

  .hiw-course-note {
    order: 5;
    margin: 8px 0 0;
    font-size: 0.74rem;
    color: #514563;
  }

  /* 13枚Premium「ホロスコープ・スプレッド」紹介カード（2026-09-17追加、
     スマホ昼版限定）。3/5/7枚と共有する.hiw-course-cardの構造
     （padding/border-radius/flex-direction:column/text-align/各要素の
     order・margin・font-size）はそのまま流用し、背景・枠色・
     「Premium限定」注記の色だけをPremium調に変える。新しい色は作らず、
     既存のTAROLUNE Premium表現（.hiw-premium・.hiw-premium-catchが
     スマホ昼版で使っている背景グラデーション
     linear-gradient(135deg, rgba(255,255,255,0.88), #efe6fb)・枠色
     rgba(184,134,63,0.4)・文字色#B8863F、13046〜13425行目付近）を
     そのまま転用している。3/5/7枚（.hiw-course-cardの無条件ベース
     ルール）・PC版・スマホ夜版には一切影響しない。 */
  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-card--thirteen {
    display: flex;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), #efe6fb);
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 12px 24px rgba(154, 118, 200, 0.16);
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-course-note--premium {
    color: #B8863F;
    font-weight: 700;
  }

  /* 13枚Premiumカードのスマホ夜版での表示（2026-09-18、非表示から表示へ
     変更）。スマホ昼版で正式採用済みの13枚Premium紹介カードの文言・
     情報・表示順（ラベル→コース名→説明→「Premium限定」注記）を、
     夜版にも完全に同一のまま反映する。HTML（index.html）は昼夜で
     共有する単一の<article class="hiw-course-card hiw-course-card--
     thirteen">要素のため、文言そのものは元々1箇所にしか存在せず、
     display:flexにするだけで昼版と一字一句同じ内容がそのまま表示される
     （テキストの複製・書き換えは行っていない）。
     配色は新しく作らず、直後の夜版共通ルール（body.is-hiw-night
     #screen-how-it-works .hiw-course-card等、13318〜13342行目）が
     3/5/7枚と全く同じ詳細度でこの13枚カードにもそのまま適用される
     （.hiw-course-card--thirteenは.hiw-course-cardクラスも併せ持つため）。
     昼版限定の「Premium調」装飾（linear-gradient背景・
     .hiw-course-note--premiumの太字ゴールド系文字色、上記
     body:not(.is-hiw-night)ブロック）は夜版には適用されず、3/5/7枚と
     同じ夜版の既存配色（背景rgba(24,18,55,0.72)・枠rgba(217,173,85,
     0.55)・ラベル#e3b85c・コース名/説明#e8e1f1・注記#c8bfd8）で
     表示される。これにより「夜版の既存文字色・ゴールド色・背景色・
     枠色を一切変更しない」という方針を保ったまま、内容だけを昼版と
     完全一致させている。 */
  body.is-hiw-night #screen-how-it-works .hiw-course-card--thirteen {
    display: flex;
  }

  /* 夜版（body.is-hiw-night）。PC夜版の鑑定コース配色
     （10247〜10271行目）をそのまま踏襲し、新しい色は作らない。 */
  body.is-hiw-night #screen-how-it-works .hiw-course-card {
    background: rgba(24, 18, 55, 0.72);
    border-color: rgba(217, 173, 85, 0.55);
    box-shadow: 0 10px 24px rgba(5, 3, 18, 0.35);
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-label {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-name {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-desc {
    color: #e8e1f1;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-price {
    color: #e3b85c;
  }

  body.is-hiw-night #screen-how-it-works .hiw-course-note {
    color: #c8bfd8;
  }
}

/* =========================================================
   スマホ版HOW IT WORKS・共通ヘッダー非表示／ブランド表示／ヒーロー／
   STEP1〜5／Premium案内／お支払い説明／最終CTA／法務リンク
   （.hiw-courses周辺を除く、2026-09-14新規追加）。

   対象はスマホ幅（@media max-width:600px）の#screen-how-it-worksの
   うち、直前の「スマホ版HOW IT WORKS・鑑定コースカード」ブロックが
   まだ対応していなかった残り全セクション。既存の鑑定コースカード
   ブロック（.hiw-courses/.hiw-course-card等）には一切触れていない。

   PC版ブロック（上の@media min-width:601px、9645〜10332行目）は
   1文字も変更していない、完全に独立したスマホ専用ブロック。PC版の
   .hiw-*は元々このPC専用メディアクエリ内でのみ定義されており
   スマホ幅では一切適用されないため、同じ質感で表示できるよう必要な
   プロパティ一式（display/background/border/border-radius/
   box-shadow等を含む）をこのブロック内で改めて指定している
   （新しい色は作らず、PC版と同じ値・同じ配色設計をそのまま踏襲）。

   背景画像（#screen-how-it-works::before）・HTML構造・JSは今回
   変更しない（2026-09-14追記：この直後の「0. 背景」で、暗い共通body
   背景の上に暗い文字色が乗って読めなくなっていた不具合を修正するため、
   PC昼版と全く同じ背景をスマホ昼版限定で追加した。上記で移植済みの
   文字色・STEP丸数字・区切り線・料金カード・Premium・支払い説明・
   CTA・フッターリンクの色は一切変更していない）。 */
@media (max-width: 600px) {
  /* ---- 0. 背景（2026-09-14追記）----
     PC昼版で正式採用済みの#screen-how-it-works::before（9801行目付近、
     @media min-width:601px内）と全く同じ背景（アイボリーの薄い
     グラデーション＋day-how-it-works-background.png）を、スマホ昼版
     だけに移植する。新しい色は作らず、既存グラデーションをそのまま
     再利用する。body:not(.is-hiw-night)により、is-hiw-nightが
     付くスマホ夜版はこのルールの対象外（スマホ夜版の背景は、この直後の
     「スマホ夜版背景（2026-09-16追加）」ブロックが別途body.is-hiw-night
     側で担当する。このブロック内の他要素には一切影響しない）。
     PC昼版・PC夜版の@media(min-width:601px)側の既存ルールは
     1文字も変更していない。
     表示速度対策（2026-09-14追記）：PC用元画像
     assets/input/day-how-it-works-background.png（1672×941px・約2.0MB）
     をスマホから直接読み込ませず、スマホ昼版専用の軽量版
     assets/input/mobile/day-how-it-works-background-mobile.jpg
     （元画像の高さ941pxはそのまま維持し、background-position:top center
     ＋background-size:coverの計算上、@media max-width:600pxの範囲で
     絶対に見えない左右の外側だけを安全マージン込みで切り出した
     中央1050px幅・JPEG品質82・約134.8KB）へ参照を切り替えた。
     background-position/background-size/background-repeat/
     グラデーション/position:fixed/inset/z-indexは変更していない。
     元画像自体は加工・上書きしていない（PC昼版・PC夜版は引き続き
     元画像を参照）。 */
  body:not(.is-hiw-night) #screen-how-it-works::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 253, 251, 0.58) 0%, rgba(255, 253, 251, 0.22) 32%, rgba(255, 253, 251, 0.62) 100%),
      url("../assets/input/mobile/day-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  /* スマホ夜版背景（2026-09-16追加）。PC夜版で正式採用済みの
     #screen-how-it-works::before（body.is-hiw-night、@media
     min-width:601px内）と全く同じ表示思想（position:fixed＋inset:0＋
     background-size:cover＋background-position:top center＋
     background-repeat:no-repeat、オーバーレイ・追加グラデーションなし、
     月・星空・紫の雲・ゴールド装飾を画像そのまま表示）を、スマホ夜版
     だけに移植する。PC用元画像assets/input/night-how-it-works-background.png
     （1808×870px・約2.09MB、加工・上書きなしで維持）をスマホから
     直接読み込ませず、スマホ夜版専用の軽量版
     assets/input/mobile/night-how-it-works-background-mobile.jpg
     （トリミング・構図変更なし、解像度は元画像と同じ1808×870pxのまま、
     PNG→JPEG品質82へのフォーマット変換のみ・約141.3KB）を参照する。
     body.is-hiw-nightにより、このブロック内・PC昼版・PC夜版・
     スマホ昼版には一切影響しない。 */
  body.is-hiw-night #screen-how-it-works::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/input/mobile/night-how-it-works-background-mobile.jpg") top center / cover no-repeat;
  }

  /* 共通の.screen.active { animation: fade-in ... }（keyframeのfromが
     translateY(6px)）と、上のposition:fixed背景の相性対策。PC昼版側の
     既存対策（#screen-how-it-works.active { animation: none; }、
     @media min-width:601px内）と同じ考え方をスマホ幅にも追加する
     （is-hiw-nightの有無を問わず、この画面がアクティブな間は常に
     無効化。夜版はそもそも背景が未実装のままだが、アニメーション
     無効化自体は害がないため他画面同様の対策として適用する）。 */
  #screen-how-it-works.active {
    animation: none;
  }

  /* ---- 1. 共通ヘッダー非表示 ---- */
  body:has(#screen-how-it-works.active) .app-header {
    display: none;
  }

  /* ---- 2. ブランド表示（TAROLUNE / CHOOSE YOUR CARDの2段表示） ---- */
  .hiw-hero {
    padding: 24px 20px 24px;
    text-align: center;
  }

  .hiw-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
  }

  .hiw-brand-main {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #B8863F;
  }

  body.is-hiw-night #screen-how-it-works .hiw-brand-main {
    color: #e3b85c;
  }

  .hiw-brand-sub {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #514563;
  }

  body.is-hiw-night #screen-how-it-works .hiw-brand-sub {
    color: #c8bfd8;
  }

  /* ---- 3. HOW IT WORKS見出し・導入文 ---- */
  .hiw-hero-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #1B132C;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-title {
    color: #ddd5ee;
  }

  .hiw-hero-subtitle {
    margin: 8px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-hero-subtitle {
    color: #B8863F;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-subtitle {
    color: #e3b85c;
  }

  .hiw-hero-intro {
    margin: 18px 0 0;
  }

  .hiw-hero-intro-line {
    margin: 8px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.7;
    color: #241A38;
  }

  .hiw-hero-intro-line:first-child {
    margin-top: 0;
  }

  body.is-hiw-night #screen-how-it-works .hiw-hero-intro-line {
    color: #e8e1f1;
  }

  /* ---- 4. STEP 01〜05 ---- */
  .hiw-steps {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 8px 20px 4px;
  }

  .hiw-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 18px 0;
  }

  .hiw-step + .hiw-step {
    border-top: 1px dashed rgba(184, 134, 63, 0.25);
  }

  body.is-hiw-night #screen-how-it-works .hiw-step + .hiw-step {
    border-top: 1px dashed rgba(217, 173, 85, 0.30);
  }

  .hiw-step-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #ffffff, #f7ecf9);
    border: 1px solid rgba(184, 134, 63, 0.35);
    box-shadow: 0 6px 14px rgba(154, 118, 200, 0.18);
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-marker,
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight .hiw-step-marker {
    background: rgba(20, 15, 48, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.75);
    box-shadow: 0 0 10px rgba(217, 173, 85, 0.2);
  }

  .hiw-step-number {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gold-strong);
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-number,
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight .hiw-step-number {
    color: #e3b85c;
  }

  .hiw-step-content {
    flex: 1 1 auto;
    padding-top: 2px;
    min-width: 0;
  }

  .hiw-step-title {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1B132C;
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-title {
    color: #eee8f5;
  }

  .hiw-step-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.7;
    color: #241A38;
  }

  body.is-hiw-night #screen-how-it-works .hiw-step-text {
    color: #d6cee4;
  }

  .hiw-step-highlight-text {
    display: inline-block;
    margin: 10px 0 0;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    border-radius: 999px;
  }

  /* スマホ夜版限定（2026-09-16追加）：STEP03「カードを選ぶのは、
     あなた自身です。」・STEP05「同じカードでも、相談が違えば鑑定も
     変わります。」（いずれも.hiw-step-highlight-textを共用）のゴールド
     カプセル背景を解除し、押せそうなボタンに見えないようにする。
     文字色はこのファイル内で既に使われている夜版ゴールド（#e3b85c、
     .hiw-step-number等と同じ値）を採用し、地の文と同じ「強調された
     説明文」に見せる。margin・font-size・font-weight・display（内容量に
     応じて幅が縮む挙動）は変更していない。PC版・スマホ昼版は
     無条件ベースルールのまま無変更。 */
  body.is-hiw-night #screen-how-it-works .hiw-step-highlight-text {
    padding: 0;
    color: #e3b85c;
    background: transparent;
    border-radius: 0;
  }

  /* STEP03「78枚から、あなた自身でカードを選ぶ」の強調パネル。
     .hiw-stepsの左右padding(20px)ぶんだけ左右へ張り出させ、内側の
     paddingで文字位置を他のSTEPと揃えるPC版と同じ考え方。 */
  .hiw-step--highlight {
    margin: 6px -20px;
    padding: 20px 20px;
    border-top: none;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), #fbe8ef);
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 12px 24px rgba(154, 118, 200, 0.18);
  }

  /* スマホ夜版限定（2026-09-16追加）：STEP03の強調パネルが「ボタンの
     ような四角い箱」に見えていたため、背景・枠線・角丸・影・ぼかしを
     解除し、STEP01/02/04と同じ背景透過の通常レイアウトへ揃える。
     margin/padding/border-top（点線区切りの制御含む）・STEP番号の丸・
     タイトル・本文の色は、この直前のルール（12922-12967行目）・上の
     無条件ベースルール（12984-12992行目）のまま一切変更していない
     （このルールのbackground/border/box-shadow/backdrop-filterだけを
     上書きする）。PC版・スマホ昼版は無条件ベースルールのまま無変更。 */
  body.is-hiw-night #screen-how-it-works .hiw-step--highlight {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hiw-step--highlight + .hiw-step {
    border-top: none;
  }

  /* ---- セクション見出し（「鑑定コース」「お支払いについて」共通） ---- */
  .hiw-section-title {
    margin: 0 0 18px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1B132C;
  }

  body.is-hiw-night #screen-how-it-works .hiw-section-title {
    color: #e3b85c;
  }

  /* ---- 6. TAROLUNE Premium案内 ---- */
  .hiw-premium {
    max-width: none;
    margin: 32px 20px 0;
    padding: 22px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), #efe6fb);
    border: 1px solid rgba(184, 134, 63, 0.4);
    box-shadow: 0 12px 24px rgba(154, 118, 200, 0.16);
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium {
    background: rgba(24, 18, 55, 0.72);
    border: 1px solid rgba(217, 173, 85, 0.55);
    box-shadow: 0 14px 28px rgba(5, 3, 18, 0.35);
  }

  .hiw-premium-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 8px;
  }

  .hiw-premium-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #322a45;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-title {
    color: #eee8f5;
  }

  .hiw-premium-catch {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold-strong);
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-premium-catch {
    color: #B8863F;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-catch {
    color: #e3b85c;
  }

  .hiw-premium-price {
    margin: 6px 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gold-strong);
  }

  body:not(.is-hiw-night) #screen-how-it-works .hiw-premium-price {
    color: #B8863F;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-price {
    color: #e3b85c;
  }

  .hiw-premium-desc {
    margin: 4px 0 16px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
    color: #241A38;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-desc {
    color: #e8e1f1;
  }

  /* 契約条件リスト。PC版は2カラムグリッドだが、スマホ幅では横はみ出し・
     文字詰まりを避けるため1カラムへ変更する。 */
  .hiw-premium-terms {
    margin: 0;
    padding-left: 1.2em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hiw-premium-terms li {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.7;
    color: #241A38;
  }

  body.is-hiw-night #screen-how-it-works .hiw-premium-terms li {
    color: #e8e1f1;
  }

  /* ---- 6. お支払いについて ---- */
  .hiw-payment-section {
    max-width: none;
    margin: 32px 0 0;
    padding: 0 20px;
    text-align: left;
  }

  .hiw-payment {
    margin-top: 0;
  }

  .hiw-payment-text {
    margin: 10px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.7;
    color: #241A38;
    text-align: left;
  }

  .hiw-payment-text:first-child {
    margin-top: 0;
  }

  body.is-hiw-night #screen-how-it-works .hiw-payment-text {
    color: #e8e1f1;
  }

  /* ---- 6. 最終CTA ---- */
  .hiw-final-cta {
    max-width: none;
    margin: 32px 0 0;
    padding: 28px 20px 4px;
    text-align: center;
  }

  .hiw-final-cta-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1B132C;
  }

  body.is-hiw-night #screen-how-it-works .hiw-final-cta-title {
    color: #e3b85c;
  }

  .hiw-final-cta-text {
    margin: 0 0 20px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.7;
    color: #241A38;
  }

  body.is-hiw-night #screen-how-it-works .hiw-final-cta-text {
    color: #e8e1f1;
  }

  .hiw-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: linear-gradient(135deg, var(--gold-strong), var(--gold));
    border: none;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(184, 134, 63, 0.28);
    cursor: pointer;
  }

  /* スマホ夜版HOW IT WORKS限定（2026-09-16追加）。FAQ/利用規約/
     プライバシーポリシー/特定商取引法の「←トップページに戻る」
     （.faq-back-button等）はスマホ幅向けの独自CSSを一切持たず、
     ブラウザ既定のボタン表示（小さい・左寄せ）のまま使われている
     ことを調査で確認した。そのため「既存の小さいボタンの実効CSS値」を
     コピーする先が実質存在せず、HOW IT WORKS側の見た目を他画面と
     完全に一致させるには、上の.hiw-cta-button（padding/font-size/
     font-weight/letter-spacing/color/background/border/
     border-radius/box-shadow等）による独自装飾を丸ごと解除して
     ブラウザ既定へ戻すのが唯一の忠実な方法となる。all:revertで
     display含む全プロパティをUA既定値へ戻したうえで、親
     .hiw-final-cta（text-align:centerのまま・無変更）による中央寄せの
     影響だけを受けないよう、display:tableのみ明示指定する
     （table表示はblockレベルのため親のtext-align:centerの対象外になり、
     かつ内容量に応じて幅が縮む＝他画面の既定ボタンと同じ「小さく・
     左寄せ」の見え方になる）。.hiw-final-cta-title/.hiw-final-cta-text・
     HOW IT WORKS本文・背景・TAROLUNE/CHOOSE YOUR CARD・PC版・
     スマホ昼版・FAQ/利用規約/プライバシー/特定商取引法・TOP・
     JavaScriptの遷移処理には一切触れていない。 */
  body.is-hiw-night #screen-how-it-works .hiw-cta-button {
    all: revert;
    display: table;
  }

  /* ---- 6. 法務リンク（利用規約／プライバシーポリシー／特定商取引法） ---- */
  .hiw-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    flex-wrap: wrap;
    margin: 28px 0 0;
    padding: 16px 20px 36px;
  }

  .hiw-legal-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: #514563;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(184, 134, 63, 0.4);
  }

  body.is-hiw-night #screen-how-it-works .hiw-legal-link {
    color: #c8bfd8;
  }
}

/* =========================================================
   TAROLUNE Premium詳細画面（#screen-premium、2026-09-12新規追加）
   鑑定結果画面の「TAROLUNE Premiumを見る」ボタン（.premium-promo-
   button）からの遷移先。PAY.JP本接続・クレジットカード登録・定期課金・
   Firebase・ログイン処理・Premium会員判定・実決済・API①・API②は
   まだ実装しない（UIと導線の土台のみ）。
   このブロック（メディアクエリの外）はPC/スマホ共通のmobile-safeな
   構造・タイポグラフィ・既定配色（:rootの夜寄り既定値をそのまま使用）
   を担う。結果画面のPremium誘導パネルはスマホでも表示されるため、
   この詳細画面もスマホから到達できる必要があり、他の法務系画面
   （利用規約・プライバシー・FAQ・特定商取引法・HOW IT WORKS）とは
   異なりPC限定にしていない。PC限定の背景画像・複数カラムレイアウト・
   PC昼版配色は下の@media(min-width:601px)ブロックでのみ追加する。
   既存画面（TOP/相談入力/コース選択/カード選択/カード開示/鑑定結果
   本文・Premium誘導パネル・「もう一度占う」ボタン/利用規約/
   プライバシー/FAQ/特定商取引法/HOW IT WORKS）のCSS/HTML/JSには
   一切触れていない。
   ========================================================= */

/* 共通ヘッダー（.app-header）は、この画面自体が独自のブランド表示
   （.premium-detail-brand）を持つため、#screen-terms等と同じ:has()
   手法で非表示にする。他の法務系画面のこの種のルールはPC限定
   （@media内）だが、この画面はスマホからも到達するため、あえて
   メディアクエリの外（PC/スマホ共通）に置く。#screen-premium.active
   の有無だけで判定するため、他画面が表示されている間はこのセレクタ
   自体が成立せず、.app-headerの表示に一切影響しない。 */
body:has(#screen-premium.active) .app-header {
  display: none;
}

.premium-detail-page {
  position: relative;
  padding: 4px 0 24px;
}

.premium-detail-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 6px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-strong);
  background: rgba(20, 14, 40, 0.55);
  border: 1px solid rgba(227, 192, 122, 0.55);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.premium-detail-back-button:hover,
.premium-detail-back-button:focus-visible {
  filter: brightness(1.1);
}

.premium-detail-back-arrow {
  font-size: 0.85em;
}

.premium-detail-brand {
  text-align: center;
  margin: 0 0 6px;
}

.premium-detail-brand-main {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-strong);
}

.premium-detail-brand-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.premium-detail-lead {
  margin: 0 0 20px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
}

.premium-detail-panel {
  margin: 0 0 22px;
  padding: 22px 20px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(160deg, rgba(227, 192, 122, 0.14), rgba(124, 92, 180, 0.1));
  border: 1px solid rgba(227, 192, 122, 0.5);
}

.premium-detail-price {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-strong);
}

.premium-detail-price-note {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.premium-detail-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}

.premium-detail-benefit {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(24, 18, 55, 0.72);
  border: 1px solid rgba(217, 173, 85, 0.55);
}

.premium-detail-benefit-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #eee8f5;
}

.premium-detail-benefit-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #e8e1f1;
}

/* 将来Premium会員判定を実装した際、この#premium-cta-areaの中身を
   「申込みボタン」から「Premium利用中」等の表示へ丸ごと差し替える
   想定のコンテナ。現時点ではclassをtoggleする実装はまだ追加しない。 */
.premium-detail-cta-area {
  text-align: center;
  margin: 0 0 26px;
}

/* 現時点ではクリック処理（JS）を一切追加していないため、押しても
   何も起こらない（将来: ログイン確認→登録カード確認→PAY.JP定期課金
   の順で接続する想定の仮ボタン）。 */
.premium-detail-signup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #241a06;
  background: linear-gradient(135deg, var(--gold), var(--gold-strong));
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(205, 164, 90, 0.28);
  cursor: pointer;
}

.premium-detail-signup-button:hover,
.premium-detail-signup-button:focus-visible {
  filter: brightness(1.05);
}

.premium-detail-terms {
  margin: 0 0 20px;
  padding: 18px 18px;
  border-radius: 14px;
  background: rgba(24, 18, 55, 0.45);
  border: 1px solid rgba(217, 173, 85, 0.35);
}

.premium-detail-terms-heading {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-strong);
}

.premium-detail-terms-list {
  margin: 0;
  padding-left: 1.2em;
}

.premium-detail-terms-list li {
  margin: 0 0 6px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 法務導線（利用規約/プライバシーポリシー/特定商取引法）。遷移先の
   #screen-terms/#screen-privacy/#screen-tokushohoは現状PC限定実装
   （スマホ幅では未対応・#top-nav-*-linkもスマホでは非表示）のため、
   スマホからここを押して未整備なスマホ表示へ迷い込ませないよう、
   この導線自体はスマホでは非表示にし、PC限定でのみ表示する
   （下の@media内でdisplay:flexへ上書き）。 */
.premium-detail-legal-links {
  display: none;
}

@media (min-width: 601px) {
  /* 背景（PC限定）。#screen-open::before/#screen-result::beforeと
     同じ技術（position:fixed; inset:0）で、鑑定結果画面から自然に
     つながる世界観にするため、正式採用済みのopen-background.pngを
     そのまま再利用する（新規画像は追加しない）。 */
  #screen-premium::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/open-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* PC夜版Premium詳細画面限定の正式背景（2026-09-12追記）。ユーザー
     提供の巨大な青い満月・星空・左右の柱とクリスタル・湖・床の
     幻想的な夜景画像（UI要素の焼き込みなし、1584×993）を
     night-premium-background.pngとして保存し、上の共通ベース値
     （open-background.png、鑑定結果/カード開示画面と共有）を
     body:not(.is-premium-day) #screen-premiumの組み合わせでだけ
     上書きする。background-size:cover/background-position:center/
     background-repeat:no-repeat・position:fixedによる固定表示方式は
     ベースのまま変更していない（画像だけの差し替え）。PC昼版
     （下のbody.is-premium-day側）・スマホ昼夜版・鑑定結果画面・
     カード開示画面・他画面には一切影響しない。 */
  body:not(.is-premium-day) #screen-premium::before {
    background-image: url("../assets/input/night-premium-background.png");
  }

  /* 共通の.screen.active{animation:fade-in}（fromがtranslateY(6px)）と
     上のposition:fixed背景の相性対策。#screen-result/#screen-open等
     既存のanimation:noneと同じ考え方。 */
  #screen-premium.active {
    animation: none;
  }

  /* PC昼版Premium詳細画面限定の正式背景（2026-09-13追記）。ユーザー
     提供の淡い紫〜ラベンダー系の夕景・湖・柱廊・クリスタル・魔法陣を
     含む幻想的な画像（UI要素の焼き込みなし、1808×870）を
     day-premium-background.pngとして保存し、それまで暫定的に流用して
     いたday-open-background.png（#screen-result/#screen-open PC昼版と
     共有）から差し替える。上の共通ベース値（open-background.png）を
     body.is-premium-day #screen-premiumの組み合わせでだけ上書きする
     構造は変更していない。background-size:cover/background-
     position:center/background-repeat:no-repeat・position:fixedに
     よる固定表示方式（#appのmax-width制約から独立し左右に帯が出ない
     既存の仕組み）はベースのまま変更していない（画像だけの差し替え）。
     PC夜版（上のbody:not(.is-premium-day)側）・スマホ昼夜版・
     鑑定結果画面・カード開示画面・他画面には一切影響しない。 */
  body.is-premium-day #screen-premium::before {
    background-image: url("../assets/input/day-premium-background.png");
  }

  .premium-detail-page {
    max-width: 640px;
    margin: 0 auto;
    padding-top: 12px;
  }

  .premium-detail-brand-main {
    font-size: 1.7rem;
  }

  .premium-detail-benefits {
    flex-direction: row;
  }

  .premium-detail-benefit {
    flex: 1 1 0;
  }

  /* PC夜版限定（2026-09-12追記）: 3枚コース見出し「3枚・5枚・7枚の
     対象鑑定」が、3列横並びのカード幅（.premium-detail-benefit:
     flex:1 1 0）に対してbase値font-size:0.92remでは1行に収まらず
     「鑑／定」のように途中で改行されてしまっていた。見出しの
     font-sizeだけを弱めに縮小し、white-space:nowrapで折り返し自体を
     禁止することで1行表示を保証する。カードのpadding/border-radius/
     背景/高さ・カード3枚のレイアウト（flex-direction:row/gap/flex:
     1 1 0）・本文（.premium-detail-benefit-desc）・料金パネル・
     申込みボタン・料金一覧・法務リンク・画面全体の幅や位置には
     一切触れていない。 */
  body:not(.is-premium-day) #screen-premium .premium-detail-benefit-title {
    font-size: 0.82rem;
    white-space: nowrap;
    margin-bottom: 4px;
  }

  /* PC夜版限定・1440×900「1画面完結」対応（2026-09-12追記）。横幅・
     背景画像・配色・世界観・文言・3枚カードの横並び・CTAの横幅と
     主役感は維持し、padding/margin/gap/line-heightだけを控えめに
     圧縮して縦方向の合計高さを縮めている。PC昼版（body.is-premium-day
     側は無変更）・スマホ昼版・夜版には一切影響しない
     （body:not(.is-premium-day) #screen-premiumという組み合わせ＋
     @media(min-width:601px)の内側でのみ有効）。 */

  /* #appのpadding: 40px 16px 60px;は全画面共通のためこの値自体は
     変更せず、HOW IT WORKS画面のbody:has(#screen-how-it-works.active)
     #appと同じ:has()手法で、この画面表示中だけ上下のみを狭める
     （左右16pxは維持し、画面の最大横幅には触れない）。 */
  body:not(.is-premium-day):has(#screen-premium.active) #app {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-page {
    padding-top: 0;
    padding-bottom: 12px;
  }

  /* PC夜版限定・「← 鑑定結果へ戻る」を画面左上へ移動（2026-09-12
     追記）。従来は.premium-detail-page（position:relative、640px幅で
     画面中央に配置される中央コンテンツ）の内側に通常のドキュメント
     フロー上で配置されていたため、ボタンが画面左上ではなく「中央
     コンテンツの左上」に見えていた。#screen-premium::beforeの背景と
     同じposition:fixed（ビューポート基準）へ変更し、中央コンテンツの
     幅・位置に依存せず常に画面の実際の左上（top:20px/left:28px）に
     固定する。幅・高さ・padding・border・border-radius・font-size・
     font-weight・文字色・背景色・hover等の見た目・文言・クリック
     処理は一切変更していない。position:fixedでドキュメントフローから
     外れるため、元々あったmargin-bottomはもう後続要素の間隔に影響
     しなくなる（0へ整理）。これにより後続の「TAROLUNE Premium」
     見出し以下が数十px分繰り上がるが、1440×900の1画面完結レイアウト
     はより余裕を持って収まる方向の変化であり、崩れは生じない。 */
  body:not(.is-premium-day) #screen-premium .premium-detail-back-button {
    position: fixed;
    top: 20px;
    left: 28px;
    z-index: 5;
    margin: 0;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-brand {
    margin-bottom: 4px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-brand-sub {
    margin-top: 2px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-lead {
    margin-bottom: 12px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-panel {
    padding: 16px 20px;
    margin-bottom: 14px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-benefits {
    margin-bottom: 16px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-benefit {
    padding: 12px 18px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-benefit-desc {
    line-height: 1.5;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-cta-area {
    margin-bottom: 16px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-signup-button {
    padding: 12px 40px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-terms {
    padding: 14px 18px;
    margin-bottom: 12px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-terms-heading {
    margin-bottom: 6px;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-terms-list li {
    margin-bottom: 4px;
    line-height: 1.5;
    color: #e8e1f1;
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-legal-links {
    padding-top: 0;
  }

  /* PC夜版限定・新背景（night-premium-background.png）採用後の可読性
     改善（2026-09-12追記）。料金パネル内の補助文（毎月1日自動更新等）・
     「料金・更新について」パネルの本文（上のterms-list li）・法務
     リンクが、base値var(--text-muted)（#9891b5）のままでは新しい
     明るい紫〜ラベンダー系の月背景に対して沈んで見づらかったため、
     文字色だけを明るいラベンダー系へ調整する。ゴールド見出し
     （var(--gold-strong)、料金/TAROLUNE Premium/料金・更新について
     等）より明度・彩度を抑えた色にとどめ、見出しより目立たせない。
     背景画像・パネルのbackground/opacity・padding/margin/gap/
     line-height・レイアウト・1440×900収納には一切触れていない。 */
  body:not(.is-premium-day) #screen-premium .premium-detail-price-note {
    color: rgba(232, 225, 241, 0.8);
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-legal-link {
    color: rgba(232, 225, 241, 0.85);
  }

  .premium-detail-terms-list {
    columns: 2;
    column-gap: 24px;
  }

  .premium-detail-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
    padding: 4px 0 0;
  }

  .premium-detail-legal-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(154, 145, 181, 0.4);
  }

  .premium-detail-legal-link:hover,
  .premium-detail-legal-link:focus-visible {
    color: var(--gold-strong);
  }

  /* PC昼版配色（body.is-premium-day）。既存の鑑定結果画面Premium
     誘導パネル（body.is-result-day .premium-promo-panel等）・
     HOW IT WORKSの.hiw-course-card日版と同じアイボリー×ゴールドの
     値をそのまま流用する。新しい配色は考えていない。 */
  body.is-premium-day .premium-detail-brand-main {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-brand-sub,
  body.is-premium-day .premium-detail-price-note {
    color: #7a7190;
  }

  body.is-premium-day .premium-detail-lead {
    color: #171126;
  }

  body.is-premium-day .premium-detail-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 236, 216, 0.85) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
  }

  body.is-premium-day .premium-detail-price {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-benefit {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(184, 134, 63, 0.3);
  }

  body.is-premium-day .premium-detail-benefit-title {
    color: #322a45;
  }

  body.is-premium-day .premium-detail-benefit-desc {
    color: #171126;
  }

  body.is-premium-day .premium-detail-terms {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(184, 134, 63, 0.25);
  }

  body.is-premium-day .premium-detail-terms-heading {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-terms-list li {
    color: #4a4358;
  }

  /* PC昼版限定・1440×900「1画面完結」対応（2026-09-13追加）。PC夜版
     （body:not(.is-premium-day)側）で既に実機確認・正式採用済みの
     余白圧縮値を、ページ骨格が完全に同一の昼版側にもそのまま適用する
     （新しい数値は考案せず、検証済みの値を転用）。横幅・背景画像・
     配色・文言・3枚カードの横並び・CTAの横幅と主役感は維持し、
     padding/margin/gap/line-heightだけを控えめに圧縮して縦方向の
     合計高さを縮めている。PC夜版・スマホ昼版・夜版には一切影響しない
     （body.is-premium-day＋@media(min-width:601px)の内側でのみ有効）。 */
  body.is-premium-day:has(#screen-premium.active) #app {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  body.is-premium-day .premium-detail-page {
    padding-top: 0;
    padding-bottom: 12px;
  }

  body.is-premium-day .premium-detail-brand {
    margin-bottom: 4px;
  }

  body.is-premium-day .premium-detail-brand-sub {
    margin-top: 2px;
  }

  body.is-premium-day .premium-detail-lead {
    margin-bottom: 12px;
  }

  body.is-premium-day .premium-detail-panel {
    padding: 16px 20px;
    margin-bottom: 14px;
  }

  body.is-premium-day .premium-detail-benefits {
    margin-bottom: 16px;
  }

  body.is-premium-day .premium-detail-benefit {
    padding: 12px 18px;
  }

  body.is-premium-day .premium-detail-benefit-desc {
    line-height: 1.5;
  }

  body.is-premium-day .premium-detail-cta-area {
    margin-bottom: 16px;
  }

  body.is-premium-day .premium-detail-signup-button {
    padding: 12px 40px;
  }

  body.is-premium-day .premium-detail-terms {
    padding: 14px 18px;
    margin-bottom: 12px;
  }

  body.is-premium-day .premium-detail-terms-heading {
    margin-bottom: 6px;
  }

  body.is-premium-day .premium-detail-terms-list li {
    margin-bottom: 4px;
    line-height: 1.5;
  }

  body.is-premium-day .premium-detail-legal-links {
    padding-top: 0;
  }

  /* PC昼版・TAROLUNE Premium詳細画面「← 鑑定結果へ戻る」ボタンの
     左上固定表示（2026-09-13追加）。PC夜版で正式採用済みの
     body:not(.is-premium-day) #screen-premium .premium-detail-back-button
     （position:fixed; top:20px; left:28px; z-index:5; margin:0;）と
     全く同じ値を流用する（昼夜でページ骨格・.premium-detail-pageの
     構成が同一のため、夜版で実機確認済みの値をそのまま踏襲）。文字色・
     背景色・border-colorは既存のまま変更していない。position:fixedで
     ドキュメントフローから外れるため、元々あったmargin-bottom:18px分
     「TAROLUNE Premium」見出し以下がわずかに繰り上がるが、これは夜版と
     同じ想定内の変化で、他要素のmargin/padding自体は変更していない。
     開発者バッジ（.dev-badge、top:6px/right:8px）とは左右反対側のため
     重ならない。 */
  body.is-premium-day .premium-detail-back-button {
    position: fixed;
    top: 20px;
    left: 28px;
    z-index: 5;
    margin: 0;
    color: #180f2b;
    background: rgba(250, 246, 255, 0.85);
    border-color: rgba(227, 192, 122, 0.6);
  }

  body.is-premium-day .premium-detail-legal-link {
    color: #7a7190;
  }

  body.is-premium-day .premium-detail-legal-link:hover,
  body.is-premium-day .premium-detail-legal-link:focus-visible {
    color: #9a6818;
  }
}

/* =========================================================
   スマホ昼版・TAROLUNE Premium詳細画面 正式デザイン移植（2026-09-15）。
   PC昼版（上の@media(min-width:601px)ブロック内、body.is-premium-day側、
   12961〜13357行目）で正式採用済みの配色を、新しい配色を一切作らず
   そのまま移植する。
   「← 鑑定結果へ戻る」ボタンはPC昼版のposition:fixed配置を移植せず、
   現状どおり通常のドキュメントフロー内（.premium-detail-back-button
   base、12788〜12803行目）に置いたまま、色だけをPC昼版と同じ値へ
   変更する。
   .premium-detail-page（max-width:640px等）・.premium-detail-benefits
   のflex-direction:row化・1440×900向けの余白圧縮値など、PC専用の
   サイズ・レイアウト数値は移植しない（現状のスマホ用の構造・余白の
   まま）。.premium-detail-legal-links（利用規約/プライバシー/特定商
   取引法への導線）はbase側で元々display:noneのため今回も非表示のまま
   変更しない。
   HTML・JS（onShowPremiumDetail()/onBackFromPremiumDetail()/
   is-premium-dayトグル）・PC昼版・PC夜版・スマホ夜版・鑑定結果画面・
   カード選択画面・カード開示画面・API/Firebase/PAY.JP/ログイン関連には
   一切触れていない。

   【背景の実装方式について、2026-09-15に変更】
   当初はPC昼版と同じday-premium-background.png（1808×870、PC横長画像）を
   #screen-premium::before（position:fixed; inset:0;）でそのまま流用して
   いたが、実機（iOS Safari）でページ下部（「料金・更新について」付近）に
   水平の継ぎ目が発生することが判明した。opacity:0.99・
   -webkit-transform/transform:translateZ(0)・height:100dvhの3つを
   個別に試したがいずれも解消せず、いずれも不採用として削除済み
   （現在のコードにこれらのプロパティは存在しない）。
   最終的に、position:fixedの疑似要素方式そのものを廃止し、スマホ専用に
   新規作成した縦長画像assets/input/mobile/day-premium-background-mobile.png
   （941×1672、day-open-background-mobile.pngと同じ寸法規格）を、
   body.is-premium-day:has(#screen-premium.active) #appへ通常の
   background-imageとして直接描画する方式に変更した。#appは
   position:fixedを使わない通常のブロック要素で、その高さはPremium画面の
   コンテンツ全高に自然に追従するため、iOS Safariのfixed要素の
   ビューポート追従処理に一切依存せず、今回の継ぎ目問題を構造的に
   回避できる。#screen-premium単体ではなく#appを対象にしているのは、
   #app自身が持つpadding:40px 16px 60pxの領域まで背景で覆うため
   （#screen-premiumだけだと#appのpadding部分にbodyの濃紺背景が
   縁取りとして露出してしまう）。
   ========================================================= */
@media (max-width: 600px) {
  /* 背景。スマホ専用の縦長画像（941×1672）を#appへ直接描画する。
     background-size:coverで#appの実際の高さ（Premium画面のコンテンツ
     全高、実測でおおよそ1400〜2000px程度）に対して計算すると、画像の
     縦方向はほぼ等倍（約0.84〜1.08倍）でほぼそのまま収まり、横方向のみ
     中央部分を残してクロップされる。画像の縦の構図（空→山→湖→床の
     魔法陣）はそのまま維持され、PC横長画像のときのような極端な
     横方向クロップは発生しない。background-position:top centerで
     画像上端（空）をページ上端に揃え、pageの高さが画像の想定より
     短い場合でも下端（床）側から自然に収まるようにする。
     background-repeat:no-repeatのため、画像が途中で繰り返されることは
     ない（#appは1つの背景画像を1回だけ描画する通常の要素であり、
     positon:fixedのように別レイヤーが重なる仕組みでもない）。
     2026-09-15追記：表示速度改善のため、参照ファイルをPNG（2090KB）
     からWebP版day-premium-background-mobile.webp（246KB、quality:90、
     構図・トリミング・縦横比・色味・明るさは無加工でPNGと同一）へ
     差し替えた。元のPNGファイルは削除せず、同じフォルダにそのまま
     残している。background-size/position/repeatの値・#appへ直接
     描画する方式自体は変更していない。iOS Safariは14以降WebPに標準
     対応済みのため表示互換の懸念はない。 */
  body.is-premium-day:has(#screen-premium.active) #app {
    background-image: url("../assets/input/mobile/day-premium-background-mobile.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* スマホ夜版Premium詳細画面限定の背景（2026-09-19追記、同日軽量化）。
     PC夜版Premium詳細画面で正式採用済みのnight-premium-background.png
     （1585×992）と構図・アスペクト比を完全に維持したまま、リサイズ・
     トリミング・色調変更を一切行わずWebP quality:90へ変換した軽量版
     night-premium-background-mobile.webp（同じ1585×992、約287KB）に
     差し替えて表示速度を改善した。元のPNG自体は変更・削除していない
     （PC夜版はそちらを引き続き使用）。スマホ昼版と同じ理由
     （position:fixed疑似要素はiOS Safariで継ぎ目が出るため不採用）
     から、同じ#appへの直接background-image方式を踏襲している。
     background-size:cover/background-position:top center/
     background-repeat:no-repeatはスマホ昼版の値をそのまま流用し、
     独自の微調整は行っていない。 */
  body:not(.is-premium-day):has(#screen-premium.active) #app {
    background-image: url("../assets/input/mobile/night-premium-background-mobile.webp");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  /* スマホ夜版Premium詳細画面限定の文字色改善（2026-09-19追記）。
     PC夜版#screen-premiumで実機確認済みのcolor値（16571/16633/16641行目
     付近）をそのまま流用する。colorのみの変更で、背景・パネルの
     background/opacity/border/shadow・レイアウト・位置・サイズ・
     余白・font-size/font-family/font-weight・ゴールド文字には
     一切触れていない。 */
  body:not(.is-premium-day) #screen-premium .premium-detail-brand-sub {
    color: rgba(232, 225, 241, 0.8);
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-price-note {
    color: rgba(232, 225, 241, 0.8);
  }

  body:not(.is-premium-day) #screen-premium .premium-detail-terms-list li {
    color: #e8e1f1;
  }

  body.is-premium-day .premium-detail-brand-main {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-brand-sub,
  body.is-premium-day .premium-detail-price-note {
    color: #7a7190;
  }

  body.is-premium-day .premium-detail-lead {
    color: #171126;
  }

  body.is-premium-day .premium-detail-panel {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(244, 236, 216, 0.85) 100%);
    border: 1px solid rgba(205, 164, 90, 0.7);
  }

  body.is-premium-day .premium-detail-price {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-benefit {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(184, 134, 63, 0.3);
  }

  body.is-premium-day .premium-detail-benefit-title {
    color: #322a45;
  }

  body.is-premium-day .premium-detail-benefit-desc {
    color: #171126;
  }

  body.is-premium-day .premium-detail-terms {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(184, 134, 63, 0.25);
  }

  body.is-premium-day .premium-detail-terms-heading {
    color: #9a6818;
  }

  body.is-premium-day .premium-detail-terms-list li {
    color: #4a4358;
  }

  /* 「← 鑑定結果へ戻る」。PC昼版のposition:fixed配置（13338〜13343行目）
     は移植せず、現状どおり通常のドキュメントフロー内に置いたまま、
     色だけをPC昼版（13344〜13346行目）と同じ値にする。 */
  body.is-premium-day .premium-detail-back-button {
    color: #180f2b;
    background: rgba(250, 246, 255, 0.85);
    border-color: rgba(227, 192, 122, 0.6);
  }
}

/* =========================================================
   PC昼版TOP限定・TODAY'S HOROSCOPE 2カラム化＋「今日の1枚タロット」追加
   （2026-09-13、実機確認前・試験実装。CLAUDE.mdへはまだ正式採用として
   記録しない）。
   参考画像（左：星座占いを左寄せ、右：今日の1枚タロット）のレイアウト・
   配色・バランスを基準に、既存の.horoscope-band内の要素
   （.horoscope-band-head/.horoscope-carousel-wrap/#horoscope-dots）と
   新規追加の.horoscope-daily-tarot（index.html側で
   .horoscope-carousel-wrapの直後・#horoscope-dotsの直前に追加済み）
   だけで2カラムを構成する。
   .horoscope-band自体のmargin/padding/border/border-radius/
   box-shadow/backdrop-filter（外寸・高さ・縦位置・下の要素との距離を
   決めている既存の共通ルール／PC専用ルール）には一切触れない。
   horoscopeCarousel.js／topScreen.js／horoscopeData.jsのロジック
   （render()/advance()/12星座データ/4.5秒自動送りタイマー/ドット生成）
   にも一切触れていない。is-prev/is-nextはCSSでdisplay:noneにする
   だけで、cardMarkup()によるDOM生成自体は変わらず毎回3枚とも作られる
   ため、自動送り・ドットの同期は無傷のまま動作し続ける（PC限定の
   initHoroscopeCardClick()が拾っていた「左右カードクリックでの手動
   送り」の入口だけが結果的に使えなくなるが、これは表示上の帰結であり
   JS自体は変更していない）。
   すべてbody.is-top-active:not(.is-top-night)＋
   @media(min-width:601px)の組み合わせに閉じているため、PC夜版・
   スマホ昼版・スマホ夜版には一切影響しない。 ========================================================= */

/* 新規要素のbase rule（メディアクエリの外）。PC昼版側の下の
   @media(min-width:601px)ブロックでのみdisplay:flexへ上書きされる。
   これが無いとdivのデフォルトdisplay:blockのまま夜版・スマホ版にも
   スタイルなしで表示されてしまうため、必ず先に非表示にしておく
   （.spread-overlay-five等、既存の同種パターンと同じ考え方）。 */
.horoscope-daily-tarot {
  display: none;
}

@media (min-width: 601px) {
  /* .horoscope-bandをflexコンテナ化し、band-head・#horoscope-dotsを
     全幅の行、.horoscope-carousel-wrapと.horoscope-daily-tarotを
     同じ行の左右2カラムにする。row-gapは追加せずcolumn-gapのみ
     指定することで、折り返した行同士の縦間隔（band-head側の既存
     margin-bottom:2px・#horoscope-dots側の既存margin-top:2pxで
     維持済み）を変えずに、2カラム間の横方向の余白だけを作る。 */
  body.is-top-active:not(.is-top-night) .horoscope-band {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
  }

  body.is-top-active:not(.is-top-night) .horoscope-band-head {
    flex: 0 0 100%;
    justify-content: flex-start;
  }

  /* 修正1（2026-09-13）：12個のドットを.horoscope-band全体の中央では
     なく、左カラム（.horoscope-carousel-wrap、flex:0 0 62%）の真下
     中央に配置する。#horoscope-dots自体をflex:0 0 62%にすることで、
     3行目（band-head/carousel-wrap+daily-tarot/dotsの3行構成）の
     単独アイテムとして左カラムと同じ62%幅の行になり、その内側で
     既存のjustify-content:center（base rule）がそのまま効いて
     62%幅の中で中央寄せされる。ドット自体のサイズ・gap・active表示・
     自動切替ロジック（horoscopeCarousel.js）には一切触れていない。 */
  body.is-top-active:not(.is-top-night) .horoscope-dots {
    flex: 0 0 62%;
  }

  /* 左カラム：星座占い（左寄せ・前後カードなし）。
     .horoscope-carousel-wrap自体には新しい背景・paddingは追加せず、
     既存の.horoscope-card.is-currentが持つ白系パネル（var(--top-panel)・
     var(--top-border)・box-shadow）をそのまま左カラムの見た目として
     使う。 */
  body.is-top-active:not(.is-top-night) .horoscope-carousel-wrap {
    flex: 0 0 62%;
    min-width: 0;
    justify-content: flex-start;
  }

  body.is-top-active:not(.is-top-night) .horoscope-track {
    justify-content: flex-start;
  }

  body.is-top-active:not(.is-top-night) .horoscope-card.is-prev,
  body.is-top-active:not(.is-top-night) .horoscope-card.is-next {
    display: none;
  }

  /* is-currentの width:min(380px,54vw)（既存のPC昼版限定ルール、
     height:108px/paddingは無変更）を左カラム幅いっぱいに広げる。
     height・padding・文字サイズ・4項目運勢の2列×2行構成・
     アイコン/英語名/日本語名/一言メッセージは一切変更していない。 */
  body.is-top-active:not(.is-top-night) .horoscope-card.is-current {
    width: 100%;
  }

  /* 参考画像忠実再現・固定ミニキャンバス方式（2026-09-13）：
     .horoscope-daily-tarot自体はflex:1 1 auto（.horoscope-bandの
     行の中で左カラムと高さが揃う既存の仕組み）のまま、position:relative
     の「枠」としてのみ機能させる。display:flex/align-items/
     justify-content/paddingはすべて削除し、内部の見出し・説明文・
     ボタン・カード・カード束・星飾りはすべて下のルールで
     position:absoluteに統一する。これにより内部要素がどれだけ
     増えても.horoscope-daily-tarotの内容量に基づくサイズ計算が
     一切発生せず（絶対配置要素は通常のflow/交差軸サイズ計算に
     参加しない）、.horoscope-band全体の高さ・左カラムの位置・
     12個のドット・下のTAROTロゴ以下には影響しない。
     背景・枠線・box-shadow・backdrop-filter・border-radiusは
     前回までと同じ値のまま変更していない。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 116px;
    position: relative;
    overflow: visible;
    background: var(--top-panel);
    border: 1px solid var(--top-border);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(60, 30, 80, 0.08);
    backdrop-filter: blur(6px);
  }

  /* 中央の縦区切り線。実測（基準画像1789×879、UI領域1714×630）で
     x:3.6% y:5.1% height:90.5%。既存のcolumn-gap内グラデーション線を
     その比率に合わせて微調整。var(--top-border)/var(--top-pink-strong)
     は既存のまま流用。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot::before {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: -8px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--top-border) 25%, var(--top-pink-strong) 50%, var(--top-border) 75%, transparent);
  }

  /* 基準画像（ChatGPT Image 2026-09-13 13_21_19.png、実寸1789×879）の
     右側「今日の1枚タロット」UI単体を正式基準として実測。白パネル本体
     を(38,128)-(1752,758)=幅1714×高さ630として、各要素の位置・サイズを
     ここから算出した百分率でそのまま.horoscope-daily-tarot
     （現在の右カラム実寸）へ適用する。基準画像の縦横比(約2.72:1)と
     現在の右カラムの縦横比(約2:1〜1.5:1)は異なるため、HOROSCOPE外枠・
     左カラムを変更しない制約の下、縦横それぞれ独立した％で
     再マッピングしている（要素どうしの相対位置・相対サイズの比率は
     各軸で正確に維持）。.horoscope-daily-tarot-infoは絶対配置の
     パススルー（inset:0）。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-info {
    position: absolute;
    inset: 0;
  }

  /* 見出しピル（実測：x10.9% y4.3% width47.3% height23.0%） */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-badge-row {
    position: absolute;
    left: 10.9%;
    top: 4.3%;
    width: 47.3%;
    height: 23%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    color: var(--top-text);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--top-gold);
    border-radius: 999px;
    white-space: nowrap;
  }

  /* 星の装飾（.horoscope-daily-tarot-spark）共通スタイル。位置・
     サイズは基準画像の実測座標に基づく（バッジ左小星x6.5%/y16.2%、
     バッジ右大星x60.5%/y17.0%、カード上大星x94.6%/y19.4%、
     カード下小星x94.1%/y68.6%）。星自体のサイズも基準画像内の実測
     直径（50px/55px/110px/50px、基準幅1714pxに対する比率）を
     現在のボックス幅に換算した値。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-spark {
    position: absolute;
    flex-shrink: 0;
    z-index: 3;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-spark-badge-a {
    left: 6.5%;
    top: 16.2%;
    width: 7px;
    height: 7px;
    opacity: 0.75;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-spark-badge-b {
    left: 60.5%;
    top: 17%;
    width: 8px;
    height: 8px;
    opacity: 0.85;
  }

  /* カード画像差し替え（2026-09-13、daily-tarot-card-day.png）により、
     カード周囲のゴールドの星は新画像そのものに焼き込まれているため、
     このCSS側の星装飾は二重表示防止のためdisplay:noneにする。
     要素自体（HTML）は削除していない。バッジ周りの星
     （-spark-badge-a/b）は新画像と無関係のため無変更。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-spark-card-a,
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-spark-card-b {
    display: none;
  }

  /* 説明文の行（実測：x10.9% y34.4% width47.6% height18.3%）。左右に
     ひし形＋線の細いゴールド装飾（.horoscope-daily-tarot-deco）を
     添える。説明文自体の文言・改行は変更していない。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-desc-row {
    position: absolute;
    left: 10.9%;
    top: 34.4%;
    width: 47.6%;
    height: 18.3%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-deco {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 11px;
    height: 1px;
    background: var(--top-border);
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-deco::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--top-gold);
    transform: translateY(-50%) rotate(45deg);
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-deco-l::before {
    left: -3px;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-deco-r::before {
    right: -3px;
  }

  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-desc {
    margin: 0;
    font-size: 0.54rem;
    line-height: 1.25;
    color: var(--top-text);
  }

  /* 横長紫ボタン＋ゴールド枠＋明るいゴールド文字（実測：x10.7% y58.3%
     width47.7% height31.0%。基準画像ではパネル全体の約3割を占める
     堂々としたサイズ）。文言・位置・幅・高さ・フォントサイズ・紫背景・
     ゴールド枠・角丸は変更していない。cursor:defaultはボタンが表示
     専用だった名残りのため、クリック機能実装済みの現状に合わせ
     cursor:pointerへ変更し、hover/active用のtransitionを追加した
     （2026-09-13）。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-button {
    position: absolute;
    left: 10.7%;
    top: 58.3%;
    width: 47.7%;
    height: 31%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    color: #f0d28a;
    background: rgba(105, 78, 145, 0.72);
    border: 1px solid rgba(205, 164, 90, 0.85);
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.18),
      0 3px 10px rgba(70, 45, 105, 0.18),
      0 0 10px rgba(227, 192, 122, 0.12);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  }

  /* 押下フィードバック。PC（マウスクリック）・スマホ（タップ）どちらでも
     :activeは発火するため、hover前提にしていない。位置・サイズ・
     配色（紫背景・ゴールド枠）自体は変更せず、transform/box-shadowの
     一時的な変化だけで「押し込んだ」感触を出す。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow:
      inset 0 1px 3px rgba(255, 255, 255, 0.4),
      0 1px 4px rgba(60, 30, 80, 0.25);
  }

  /* カード＋カードの束（実測：x63.7% y-5.2% width34.4% height110.3%。
     基準画像ではカードがパネルの上下端から少しはみ出す構図のため、
     top/heightをそのまま反映し.horoscope-daily-tarot自体の
     overflow:visibleではみ出しを許容する）。
     ユーザー承認済みのassets/cards/card-back-open-backup-2026-09-05.png
     （淡いラベンダー×ゴールドのコンパススター意匠、過去のバックアップ
     画像でこの右カラム専用に採用・他画面では未使用）を使用する。
     既存のPC昼版カード開示画面が使うcard-back-open.pngには
     一切触れていない（別セレクタ・別画面）。
     内部はDOM順で「後ろの2枚（-card-page-a/b、単色のグラデーションで
     束を簡易表現）→手前の本物のカード画像（.horoscope-daily-tarot-card）」
     の順に重ね、z-indexを使わずDOM順序だけで前後関係を成立させる。 */
  /* カード表示サイズ約1.5倍（2026-09-13）：widthのみ34.4%→51.6%
     （×1.5）へ拡大。heightは元のまま110.3%で、拡大後の正方形画像
     （background-size:contain、widthが制約軸）が引き続き収まる
     ため変更不要。実機確認の結果、left:60%では右側へはみ出しが
     出ていたため、width/height/top/画像は変更せずleftのみ
     60%→56%へ再調整し、右カラム内に自然に収まる位置にした。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-card-stack {
    position: absolute;
    left: 56%;
    top: -5.2%;
    width: 51.6%;
    height: 110.3%;
  }

  /* カード画像差し替え（2026-09-13、daily-tarot-card-day.png）により、
     カードの束（重なったページ）は新画像そのものに焼き込まれている
     ため、二重表示防止のためこのCSS側の束レイヤーはdisplay:noneに
     する。要素自体（HTML）は削除していない。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-card-page {
    display: none;
  }

  /* PC昼版TOP「今日の1枚タロット」専用カード画像
     （assets/cards/daily-tarot-card-day.png）。ユーザー提供の新画像に
     カードの傾き・カード束・周囲のゴールドの星・光がすべて焼き込み
     済みのため、CSS側の回転（transform:rotate）・box-shadowの発光は
     二重表現を避けるため削除した。background-size:containで元画像
     （1254×1254、正方形・不透明白背景）の縦横比を維持したまま表示する
     （伸縮・トリミングなし）。他画面で使用中のcard-back-open.png・
     card-back-open-backup-2026-09-05.pngは変更していない。 */
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-card {
    position: absolute;
    inset: 0;
    background-image: url("../assets/cards/daily-tarot-card-day.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* =========================================================
   今日の1枚タロット・スマホ昼版限定の入口ボタン（STEP3で新設）
   （#daily-tarot-mobile-trigger）。STEP4で専用画面
   （#screen-daily-tarot、下のブロック）への入口として役割変更した
   だけで、ボタン自体の見た目・配置は変更していない。
   TOP内オーバーレイ方式（STEP3、position:fixedで被せる方式）は
   STEP4で廃止し、該当CSS（.daily-tarot-overlay/.daily-tarot-panel/
   .daily-tarot-close等）は削除した。PC昼版TOP正式採用済みの
   .horoscope-daily-tarot-*（横並び入口UI）には一切触れていない。 ========================================================= */

/* base rule（メディアクエリの外）。スマホ昼版側の@media(max-width:600px)
   ブロックでのみ表示へ上書きされる。これが無いとPC/夜版でも
   デフォルトのdisplay:block/inline等で見えてしまうため、必ず先に
   非表示にしておく（.horoscope-daily-tarot等、既存の同種パターンと
   同じ考え方）。 */
.daily-tarot-mobile-trigger {
  display: none;
}

@media (max-width: 600px) {
  /* 入口ボタン。.horoscope-bandのすぐ下、通常のdocument flow内に
     配置する通常のブロック要素（既存の.horoscope-band・星座占い・
     ドットのレイアウトには一切触れていない）。 */
  body.is-top-active:not(.is-top-night) .daily-tarot-mobile-trigger {
    display: block;
    position: relative;
    width: 92%;
    margin: 10px auto 0;
    padding: 12px 56px 12px 16px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    color: var(--top-text);
    background: var(--top-panel);
    border: 1px solid var(--top-gold);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(60, 30, 80, 0.1);
    cursor: pointer;
  }

  /* スマホ昼版TOP限定・「今日の1枚タロットを引く」ボタン右側の
     カード装飾（2026-09-14）。新しい画像は生成・加工・複製せず、
     PC昼版TOPの「今日の1枚タロット」右カラム（.horoscope-daily-tarot-card、
     11947行目付近）で正式採用済みの既存画像
     assets/cards/daily-tarot-card-day.pngをそのまま参照する。
     ::afterでボタン内右側へ絶対配置し、background-size:containで
     画像全体（カード＋星＋光）をトリミングせずに表示する。ボタン全体の
     背景にはせず、右端付近の装飾のみ。文字はpadding-right:56pxで右側に
     空間を確保しているため画像と重ならない（2026-09-14追記：文字が
     左に寄りすぎて見えたため、text-align:leftからcenterへ変更。
     padding-right:56pxの安全域内でのcenter寄せのため、画像との重なりは
     発生しない）。既存のゴールド枠・ピル型・背景色・高さ（paddingの
     上下値）は変更していない。カード画像自体のwidth/height/right/top/
     transformは2026-09-14に正式採用済みで変更禁止。
     表示遅延対策（2026-09-14追記）：48px表示に対して元画像
     （1254×1254px・約2.2MB）は過剰な解像度だったため、見た目を維持した
     まま96×96px・約19.8KBへ縮小した専用軽量版
     assets/cards/daily-tarot-card-day-mobile.pngへ参照を切り替えた
     （透明部分・星・光・ゴールド線は保持。単純リサイズのみで加工なし）。
     元画像assets/cards/daily-tarot-card-day.png自体は変更していない
     （PC昼版TOPの.horoscope-daily-tarot-card、11947行目付近は引き続き
     元画像を参照）。width/height/right/top/transform/background-size/
     background-position/background-repeatは変更していない。 */
  body.is-top-active:not(.is-top-night) .daily-tarot-mobile-trigger::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-image: url("../assets/cards/daily-tarot-card-day-mobile.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

/* =========================================================
   「今日の1枚タロット」専用画面 #screen-daily-tarot（STEP4、
   2026-09-13新規、骨格実装）。
   PC/スマホ共通DOM・共通CSSで構成し、見た目の違いは下の
   @media(min-width:601px)ブロックだけで出し分ける（このプロジェクトの
   利用規約/FAQ/HOW IT WORKS等と同じ「独立screen」設計方針）。
   まだ束→扇→選出→ゴールド発光→3Dフリップ→結果フェードインの演出は
   実装していない（静的表示のみ）。.daily-tarot-stage（カード演出
   エリア）と.daily-tarot-result（結果文章エリア）を分離してあり、
   将来.daily-tarot-stageの中身だけを演出用マークアップに置き換え
   られる。.daily-tarot-mainの前後（HTML側にコメントで明示済み）には、
   将来/daily-tarot/専用URL展開時の固定SEO説明文を追加できる余地を
   残しており、ランダム結果（.daily-tarot-result）だけがページ本文に
   なる構造にはしていない。
   goToDailyTarot()（js/topScreen.js）がbody.is-top-active/
   is-top-nightを外すため、このブロックはbody.is-top-active等の
   TOP専用クラスには依存せず、#screen-daily-tarot自身のCSSだけで
   完結させている（TOPの配色トークンvar(--top-*)は使わず、見た目が
   近い実値を直接指定した）。 ========================================================= */
.daily-tarot-screen {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 32px 20px 40px;
  text-align: center;
  color: #322a45;
  background: linear-gradient(180deg, #fffdfb 0%, #fbe8ef 55%, #efe6fb 100%);
}

.daily-tarot-header {
  margin: 0 0 20px;
  /* 扇状に展開する演出用カード（.dt-deck-card、position:absolute＋
     z-index 0〜23）が、fanYの上方向transform（最大約-37px）により
     ステージ枠を超えて見出し領域まで視覚的にはみ出し、position:static
     のままだった見出しの上に描画されてしまっていた対策（2026-09-13）。
     見出しブロックごと明示的な重なりの層に乗せ、カード側の個々の
     z-index・fanX/fanY/fanRotate・カードサイズ・24枚の配置・
     アニメーションタイムラインには一切触れていない。 */
  position: relative;
  z-index: 40;
}

.daily-tarot-header-brand {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #b8863f;
}

.daily-tarot-title {
  margin: 6px 0 0;
  font-size: 1.25rem;
  font-weight: bold;
  color: #322a45;
}

.daily-tarot-main {
  max-width: 420px;
  margin: 0 auto;
}

/* =========================================================
   カード抽選演出（STEP5、2026-09-13新規）。
   束（#dt-deck、演出用24枚）→扇状に展開→選出→3Dフリップ→結果表示。
   3/5/7枚タロットの.flip-card系とは無関係の独立クラス（dt-*）のみ
   使用する。すべてtransform/opacity/filterだけでアニメーションし、
   width/height/top/left/margin/paddingはアニメーションさせない
   （layout thrashing回避、GPU合成中心）。
   タイムライン制御はjs/dailyTarotStage.js側（setTimeoutで各クラスを
   付け外すだけ）。 ========================================================= */
.daily-tarot-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  margin-bottom: 20px;
}

/* 演出全体の基準となる1枚ぶんのサイズ。#dt-deckの各カード・
   #dt-flip-cardはすべてこのサイズ（inset:0）を継承する。 */
.dt-stage-inner {
  position: relative;
  width: 120px;
  height: 210px;
}

.dt-deck {
  position: absolute;
  inset: 0;
}

.dt-deck.is-deck-hidden {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* 演出用カード（見た目上のダミー、実際の抽選結果には無関係）。
   背景画像は既存の軽量素材（day-card-back-open.jpg、361×540px・
   約57KB）をJS側でbackgroundImageに設定する。位置・回転はすべて
   CSSカスタムプロパティ（--fan-x/--fan-y/--fan-rotate等、
   js/dailyTarotStage.js側でカードごとに算出）を介したtransformのみで
   制御する。 */
.dt-deck-card {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(60, 30, 80, 0.28);
  opacity: 0;
  transform: translate(var(--stack-x, 0), var(--stack-y, 0)) rotate(var(--stack-rotate, 0deg));
  transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.22, 0.98, 0.35, 1), filter 0.6s ease;
}

.dt-deck.is-appearing .dt-deck-card {
  opacity: 1;
}

.dt-deck.is-fanned .dt-deck-card {
  transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-rotate));
}

.dt-deck.is-settled .dt-deck-card:not(.is-glow-strong):not(.is-lifting):not(.is-approaching):not(.is-picked) {
  animation: dt-float 1.6s ease-in-out infinite;
}

@keyframes dt-float {
  0%, 100% { transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-rotate)); }
  50% { transform: translate(calc(var(--fan-x) + 2px), calc(var(--fan-y) - 4px)) rotate(calc(var(--fan-rotate) + 1deg)); }
}

.dt-deck-card.is-glow-building {
  filter: drop-shadow(0 0 10px rgba(227, 192, 122, 0.85));
}

/* 「ピカッ」：is-liftingの0.13秒前に当選カードだけまとう強い光
   （2026-09-13追加）。抑えめの初期値から開始。以降のis-lifting/
   is-approaching/is-pickedはfilterを指定していないため、ここで
   まとった光がis-picked到達までそのまま維持される。 */
.dt-deck-card.is-glow-strong {
  /* 扇を構成する24枚は個別にinline z-index(0〜23)を持つため、選出
     カードはこの時点でinlineを解除した上で、ここから扇全体より
     確実に前面へ出す（他23枚の最大値23より大きい24に設定、
     2026-09-13追加）。 */
  z-index: 24;
  filter:
    drop-shadow(0 0 18px rgba(227, 192, 122, 1))
    drop-shadow(0 0 32px rgba(227, 192, 122, 0.55));
}

/* 「浮く」：扇の位置（--fan-x/--fan-y/--fan-rotate）をほぼ維持した
   まま、当選カードだけわずかに上・手前へ浮かせる（2026-09-13追加）。
   fanX/fanY/fanRotateの値自体は変更せず、calc()で上乗せするだけ。
   animation:noneでis-settledの浮遊アニメーションを止め、
   このtransitionが効くようにする。 */
#dt-deck .dt-deck-card.is-lifting {
  animation: none;
  transform: translate(var(--fan-x), calc(var(--fan-y) - 16px)) rotate(var(--fan-rotate)) scale(1.12);
  z-index: 25;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 「スッと近づく」：中央方向へ約35%寄りながらさらに拡大する
   中間段階（2026-09-13追加）。--fan-x/--fan-y/--fan-rotateを基準に
   比率で近づけるだけで、扇の元の位置・角度定義は変更しない。 */
#dt-deck .dt-deck-card.is-approaching {
  animation: none;
  transform: translate(calc(var(--fan-x) * 0.35), calc(var(--fan-y) * 0.35 - 6px)) rotate(calc(var(--fan-rotate) * 0.3)) scale(1.3);
  z-index: 28;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 「ドンッ」：中央へ集約しつつscaleを強めて手前へ迫り出す。
   transitionをこのクラス専用に高速化（base .dt-deck-cardの
   0.9s cubic-bezierより優先される）ことで、勢いよく前へ出て
   止まる感触にする（2026-09-13強化）。 */
#dt-deck .dt-deck-card.is-picked {
  animation: none;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1.4);
  filter:
    drop-shadow(0 0 22px rgba(227, 192, 122, 1))
    drop-shadow(0 0 36px rgba(227, 192, 122, 0.6));
  box-shadow: 0 10px 26px rgba(60, 30, 80, 0.35);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.25s ease,
    opacity 0.3s ease;
  z-index: 30;
}

/* 非選出カード：現行より少し速く暗く/薄く退場させ、選出カードの
   「ドンッ」に主役を譲る（2026-09-13強化、0.4s/0.9s→0.3s/0.5s）。 */
.dt-deck-card.is-dismissed {
  animation: none;
  opacity: 0;
  transform: translate(var(--exit-x), var(--exit-y)) rotate(calc(var(--fan-rotate) * 1.4));
  transition: opacity 0.3s ease, transform 0.5s ease;
}

/* 当選カードの3Dフリップ本体。#dt-deckの当選カードが中央へ収まった
   タイミングで、同じ位置・同じサイズにcrossfadeで切り替える
   （裏面画像も同じ軽量素材のため見た目上の継ぎ目がほぼ出ない）。 */
.dt-flip-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  perspective: 1000px;
  transition: opacity 0.15s ease;
}

.dt-flip-card.is-visible {
  opacity: 1;
}

.dt-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.35, 1);
}

.dt-flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.dt-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
}

.dt-flip-back {
  background-image: url("../assets/cards/mobile/day-card-back-open.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 16px rgba(60, 30, 80, 0.3);
}

.dt-flip-front {
  transform: rotateY(180deg);
  box-shadow: 0 10px 24px rgba(60, 30, 80, 0.25);
}

.dt-flip-card.is-glowing .dt-flip-front {
  animation: dt-glow-pulse 0.8s ease;
}

@keyframes dt-glow-pulse {
  0% { filter: drop-shadow(0 0 0 rgba(227, 192, 122, 0)); }
  40% { filter: drop-shadow(0 0 18px rgba(227, 192, 122, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(227, 192, 122, 0)); }
}

/* prefers-reduced-motion: reduce用。JS側（playReduced()）でも
   is-flipped等を最初から即時付与するが、CSS側でも念のため
   transition/animationそのものを無効化し、二重の安全策とする。 */
.dt-flip-card.is-reduced,
.dt-flip-card.is-reduced .dt-flip-inner {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .dt-deck-card,
  .dt-flip-inner,
  .dt-flip-card,
  .dt-deck {
    transition: none !important;
    animation: none !important;
  }
}

/* カード表面画像。assets/cards/rws/*.jpg（実寸300×527、約0.57:1）に
   近い.dt-stage-innerのサイズにcoverで収め、引き伸ばしはしない。
   逆位置はJS側で.is-reversedクラスを付与し、画像自体は加工せず
   transform: rotate(180deg)で表示する（既存の逆位置表示と同じ考え方）。 */
.daily-tarot-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.daily-tarot-card-image.is-reversed {
  transform: rotate(180deg);
}

/* 結果文章エリア。STEP3のオーバーレイで使っていたのと同じクラス名を
   そのまま再利用している（renderDailyTarotResult()も同じ関数を
   流用、参照先の要素が変わっただけ）。
   2026-09-13追記：PC昼版を演出開始から結果表示完了まで縦スクロール
   なしで収めるため、display:noneを追加した。opacity:0だけでは
   非表示中もレイアウト領域（約220px）を占有し続けてしまい、これが
   演出中（扇の展開中）から縦スクロールが発生する主因だったため。
   .is-visible-shell（display:blockにするだけ）→（1〜2フレーム後）
   .is-result-visible（opacity/transformのフェードイン）の2段階で
   表示することで、display:none→blockの切り替え直後でも
   transitionが正しく効くようにしている
   （js/dailyTarotStage.js側のdouble requestAnimationFrameと対応）。 */
.daily-tarot-result {
  display: none;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(184, 134, 63, 0.35);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(60, 30, 80, 0.1);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.daily-tarot-result.is-visible-shell {
  display: block;
}

.daily-tarot-result.is-result-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .daily-tarot-result {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

.daily-tarot-card-name {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #322a45;
}

.daily-tarot-orientation {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #b8863f;
}

.daily-tarot-message {
  margin: 0 0 18px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #3a3048;
}

.daily-tarot-oneliner {
  padding-top: 14px;
  border-top: 1px solid rgba(184, 134, 63, 0.3);
}

.daily-tarot-oneliner-label {
  display: block;
  margin: 0 0 4px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: #7a7190;
}

.daily-tarot-oneliner-text {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  color: #322a45;
}

.daily-tarot-back-button {
  display: block;
  margin: 28px auto 0;
  padding: 10px 26px;
  font-size: 0.85rem;
  font-weight: bold;
  color: #322a45;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(184, 134, 63, 0.4);
  border-radius: 999px;
  cursor: pointer;
}

/* 共通ヘッダー（#app > .app-header、「TAROT」「タロット占い」）を、
   今日の1枚タロット専用画面がアクティブな間だけ非表示にする。
   #screen-terms等向けのbody:has(#screen-terms.active) .app-headerと
   全く同じ:has()手法（他画面には一切影響しない）。 */
body:has(#screen-daily-tarot.active) .app-header {
  display: none;
}

/* #app自体が持つpadding:40px 16px 60px（合計100px）が、TOP画面専用の
   相殺ルール（body.is-top-active #app{padding-top:0}）の対象外となる
   ため、今日の1枚タロット画面（goToDailyTarot()がis-top-activeを
   外す）ではフルに復活し、.daily-tarot-screenのmin-height:100vhに
   そのまま上乗せされて、コンテンツ量に関わらず常時100px超過して
   縦スクロールが発生していた（2026-09-13）。#screen-terms等と同じ
   body:has(#screen-X.active) #app{...}の既存パターンを踏襲し、この
   画面がアクティブな時だけ#appのpaddingを0にする。.daily-tarot-screen
   自体のpadding:48px 24px 56px（PC）はそのまま維持されるため、
   見た目の余白は保たれる。他画面（#appのpaddingを参照する既存の
   すべてのbody:has(#screen-X.active) #appルールを含む）には
   #screen-daily-tarotがアクティブでない限りこのセレクタ自体が
   成立しないため、一切影響しない。 */
body:has(#screen-daily-tarot.active) #app {
  padding: 0;
}

@media (min-width: 601px) {
  /* 背景候補の実機確認用（2026-09-13）。ユーザー提供の背景専用画像を
     #screen-daily-tarotの背景として導入する。.daily-tarot-screenの
     base背景（グラデーション、スマホ/PC共通）は書き換えていない。
     #screen-daily-tarot自体は#app（max-width:720px; margin:0 auto;）の
     内側に収まる要素のため、背景を要素へ直接指定すると720px幅に
     クリップされ、画面幅がそれより広い実機では左右にbodyの濃紺背景が
     帯として露出していた（2026-09-13、実機確認で判明）。#screen-terms
     等の既存画面と同じ「::before + position:fixed; inset:0;」パターンで
     #appの幅制約から独立させ、ビューポート全幅まで背景を広げる
     （中央のコンテンツ自体は#appのmax-width:720pxの内側のまま、幅・
     位置とも無変更）。 */
  body:not(.is-daily-tarot-night) #screen-daily-tarot::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/day-daily-tarot-background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /* .daily-tarot-screen自身が持つ無条件ベースの白〜薄ピンクグラデーション
     背景（PC/スマホ・昼夜共通、#appのmax-width:720px幅の縦長ボックスに
     自前で敷かれている）が、要素自身の背景として常に子孫（上記::before）
     より手前に描画されるため、::beforeの全画面背景があってもこの720px
     幅の白〜薄ピンクだけが中央に残って見えていた（2026-09-13、実機確認で
     判明）。PC昼版だけ、この要素自身の背景を透明化し、::beforeの全画面
     背景がそのまま見えるようにする。.daily-tarot-screenのbase背景
     （linear-gradient、スマホ/PC夜版向けの共通定義）自体は書き換えず、
     ID込みセレクタで上書きするだけに留める。 */
  body:not(.is-daily-tarot-night) #screen-daily-tarot {
    background: transparent;
  }

  .daily-tarot-screen {
    padding: 48px 24px 56px;
  }

  .daily-tarot-title {
    font-size: 1.5rem;
  }

  .daily-tarot-main {
    max-width: 460px;
  }

  .daily-tarot-stage {
    min-height: 320px;
    /* 扇状カードのfanY上方向transform（最大約-37px）が「今日の1枚
       タロット」見出しに近づきすぎていた対策（2026-09-13）。実機の
       実測に基づき42px→72pxへ再調整。演出エリア全体（このflex
       コンテナ）を平行移動するだけで、.dt-stage-inner・
       fanX/fanY/fanRotate・24枚の配置・カードサイズ・アニメーション
       タイムラインには一切触れていない。副作用として
       .daily-tarot-result・戻るボタンも72px下がるが、これは別途調整。 */
    margin-top: 72px;
  }

  /* PC昼版は横幅を活かして演出用カード束・フリップカードを
     大きめに表示する（横幅190×高さ333px、比率は約0.57のまま維持）。 */
  .dt-stage-inner {
    width: 190px;
    height: 333px;
  }
}

/* 「今日の1枚タロット」PC昼版・結果確定後のレイアウト圧縮
   （2026-09-13）。#screen-daily-tarotに.is-daily-tarot-completeが
   付いた状態（js/dailyTarotStage.js側でT_RESULTと同時に付与）だけに
   適用する。演出中（束→扇→選出→フリップ）の.daily-tarot-stageの
   margin-top:72px・.dt-stage-innerの190×333px・扇の形・
   fanX/fanY/fanRotate・24枚の配置・アニメーションタイムラインには
   一切触れていない（このブロックはis-daily-tarot-complete付与後
   にのみ効くため、演出中は無関係）。結果文章の内容・font-sizeも
   変更せず、padding/marginの圧縮のみで縦方向の占有量を減らす。 */
@media (min-width: 601px) {
  /* 「トップページに戻る」ボタン：演出中（束→扇→選出→フリップ）は
     レイアウト上も含めて非表示にし、結果確定（is-daily-tarot-complete
     付与）後だけ表示する（2026-09-13）。ボタン自体のデザイン・
     サイズ・文言・base rule（display:block、スマホ版はこちらのまま
     常時表示）には一切触れていない。このPC専用オーバーライドが
     display:noneにし、結果確定後だけdisplay:blockへ戻すだけ。 */
  .daily-tarot-back-button {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-back-button {
    display: block;
    opacity: 1;
  }

  #screen-daily-tarot.is-daily-tarot-complete .dt-stage-inner {
    width: 140px;
    height: 245px;
    transition: width 0.3s ease, height 0.3s ease;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-stage {
    /* .daily-tarot-stageの演出中の無条件min-height:320px（PC共通
       ルール、下の別ブロックで無変更のまま維持）が、.dt-stage-innerを
       245pxへ圧縮してもフロアとして残り続け、圧縮を無効化していた
       ため（2026-09-13）。is-daily-tarot-complete状態だけmin-heightを
       圧縮後の.dt-stage-innerの高さ（245px）に合わせて下げる。
       margin-top:72px（演出中と共通、変更禁止）はこのルールでは
       指定していないため無変更のまま。 */
    min-height: 245px;
    margin-bottom: 8px;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-result {
    padding: 14px 18px;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-orientation {
    margin-bottom: 8px;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-message {
    margin-bottom: 10px;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-oneliner {
    padding-top: 8px;
  }

  #screen-daily-tarot.is-daily-tarot-complete .daily-tarot-back-button {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-daily-tarot.is-daily-tarot-complete .dt-stage-inner {
    transition: none;
  }
}

/* 「今日の1枚タロット」専用画面（#screen-daily-tarot）・スマホ昼版限定の
   調整（2026-09-14）。この画面は現状PC昼版限定で実機確認済みのレイアウト
   （上のbody:not(.is-daily-tarot-night)＋@media(min-width:601px)ブロック）
   のみが確定しており、スマホ版・夜版はまだ未確定（CLAUDE.md参照）。今回は
   スマホ昼版だけを対象に、既存のPC専用ブロックには一切触れずに以下2点を
   追加する。is-daily-tarot-nightはjs/topScreen.jsのgoToDailyTarot()が
   PC/スマホを問わず昼夜で付け外す既存クラスをそのまま利用し、新しい
   昼夜判定ロジックは作らない。
   1) 見出し（.daily-tarot-header）と扇状カード演出エリア
      （.daily-tarot-stage）の間の余白。PC版で扇の上方向transform
      （最大約-37px）が見出しに近づきすぎた際に採った対策
      （.daily-tarot-stageにmargin-topを追加し、フレックスコンテナ全体を
      下げるだけでdt-stage-inner・fanX/fanY/fanRotate・カードサイズ・
      アニメーションタイムラインには触れない）と全く同じ考え方を、
      スマホ昼版にも適用する。見出しの文字サイズ・色・位置、カード画像の
      サイズ・横位置・画像自体は変更していない。
   2) 「← トップページに戻る」ボタン（.daily-tarot-back-button、PC/
      スマホ・昼夜共通のHTML要素）をスマホ昼版のこの画面だけ非表示にする。
      HTML要素自体は削除せず、CSSのみで対象を限定する。PC（PC専用ブロック
      内の演出中/結果確定後のdisplay制御は無変更）・スマホ夜版
      （is-daily-tarot-nightが付く場合はこのセレクタの対象外）には
      一切影響しない。
   3) 背景（2026-09-14追記、B案＝月優先）。PC昼版が使う
      assets/input/day-daily-tarot-background.png（1800×874px・約1.85MB）を
      スマホから直接読み込ませず、スマホ昼版専用の軽量版
      assets/input/mobile/day-daily-tarot-background-mobile.jpg
      （元画像から右上の満月を含む縦長領域のみを切り出し・縮小・JPEG化した
      もの。490×874px・約59.5KB）を新規作成して参照する。元画像自体は
      加工・上書きしていない（切り出し・縮小のみ、新規生成なし）。
      PC専用ブロック（body:not(.is-daily-tarot-night) #screen-daily-tarot
      ::before、@media(min-width:601px)側）とは完全に別のセレクタ・
      別画像で、PC側は1文字も変更していない。 */
@media (max-width: 600px) {
  body:not(.is-daily-tarot-night) #screen-daily-tarot .daily-tarot-stage {
    margin-top: 70px;
  }

  body:not(.is-daily-tarot-night) #screen-daily-tarot .daily-tarot-back-button {
    display: none;
  }

  body:not(.is-daily-tarot-night) #screen-daily-tarot::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../assets/input/mobile/day-daily-tarot-background-mobile.jpg");
    background-size: cover;
    background-position: 78% center;
    background-repeat: no-repeat;
  }

  body:not(.is-daily-tarot-night) #screen-daily-tarot {
    background: transparent;
  }
}

/* 「今日の1枚タロット」PC昼版入口ボタンのhoverフィードバック
   （2026-09-13）。実際にマウスでhoverできる環境（hover:hover・
   pointer:fine、＝タッチ操作ではない）だけに限定することで、
   スマホでタップ後にhover状態が張り付く現象を避ける
   （:activeは既存ブロック内でhover非依存のまま実装済み）。
   位置・サイズ・紫背景・ゴールド枠・角丸は変更せず、transformの
   わずかな浮き上がりとゴールド系box-shadowの強調だけを加える。 */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  body.is-top-active:not(.is-top-night) .horoscope-daily-tarot-button:hover {
    transform: translateY(-1px);
    background: rgba(118, 88, 158, 0.78);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.22),
      0 4px 12px rgba(70, 45, 105, 0.22),
      0 0 18px rgba(227, 192, 122, 0.42);
  }
}

/* =========================================================
   LOGIN / 新規登録画面（#screen-login・#screen-register、
   2026-09-13新規、PC昼版UIのみ・実機確認前の試験実装）。
   利用規約・FAQ・「今日の1枚タロット」等と同じ「独立したscreen」方式。
   認証API（register/login/logout/me）・DB・Cookie・Prismaにはまだ
   一切接続していない。送信系ボタンはすべてPremium申込ボタンと同じ
   「押しても何も起こらない仮ボタン」（type="button"、<form>なし、
   クリック処理未追加）で、誤って未実装APIへリクエストが送られることを
   防いでいる。#screen-login・#screen-registerで完全に同一の
   auth-*クラスを共有する（terms/privacy等のような内容が将来大きく
   分岐する法務文書とは異なり、両画面は構造がほぼ同一のため、今回は
   あえて独立クラスに複製せず共通化している）。
   ========================================================= */
body:has(#screen-login.active) .app-header,
body:has(#screen-register.active) .app-header {
  display: none;
}

/* 【重要・不具合修正2026-09-13】共通の.screen{display:none}／
   .screen.active{display:block}（76/80行目付近）は、いずれもクラス1〜2個
   のセレクタ（詳細度0,1,0／0,2,0）。この.auth-screenも当初displayを
   含めて指定しており、.screen{display:none}と同じ詳細度0,1,0の
   プロパティ競合がCSSの定義順（このファイルの後方にあるこちらが勝つ）
   で発生し、#screen-login/#screen-registerに.activeが付いていない
   状態でも常時display:flexで表示され続け、position:fixedの
   .auth-screen::before（下記）がTOP画面を含む全画面の背景として
   漏れ出す不具合が生じていた。そのため、displayの指定はここでは行わず
   （.screen/.screen.activeによるdisplay:none/blockの制御をそのまま
   活かす）、flex中央寄せは.active時だけ有効な下記の
   #screen-login.active, #screen-register.active { display: flex; ... }
   （IDを含み.screen.activeより確実に優先される）側だけで行う。 */
.auth-screen {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 32px 20px 40px;
}

#screen-login.active,
#screen-register.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 共通の.screen.active { animation: fade-in ... }（keyframeがtransform:
   translateY(6px→0)を使用）が、#screen-login自身をfixed子孫
   （#screen-login.active::before）の一時的な包含ブロックにしてしまい、
   アニメーション中（0.4秒間）だけ背景が#screen-login自身の小さな
   ボックス（#appのmax-width:720px内）を基準に描画され、終了と同時に
   本来のビューポート基準へ切り替わって「中央→全画面へ広がる」ように
   見えていた（2026-09-13、実機確認で判明）。#screen-top.active／
   #screen-input.active等の既存パターンと全く同じ対処法で、
   #screen-loginだけアニメーションを無効化し、最初のフレームから
   最終位置（＝ビューポート全体を基準にした背景）で描画されるようにする。
   .screen.active共通ルール・@keyframes fade-in自体、および
   #screen-register（同じ問題を抱えている可能性があるが今回は対象外）
   は変更していない。 */
#screen-login.active {
  animation: none;
}

/* #appのmax-width:720px制約から独立させ、ビューポート全体を覆う
   背景レイヤー。#screen-daily-tarot::before・#screen-premium::before
   と全く同じposition:fixed手法。現時点では画像を用意していないため
   CSSグラデーション（.daily-tarot-screenの配色と同じ、淡いアイボリー
   →ピンク→ラベンダー）で仮組みする。将来ここへbackground-imageを
   1行追加するだけで、専用の背景画像に差し替えられる設計。 */
.auth-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #fffdfb 0%, #fbe8ef 55%, #efe6fb 100%);
}

.auth-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-panel {
  width: 100%;
  max-width: 360px;
  padding: 32px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(184, 134, 63, 0.35);
  box-shadow: 0 20px 44px rgba(60, 30, 80, 0.15);
  text-align: center;
}

.auth-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth-sparkle {
  color: var(--gold-strong);
  font-size: 0.8rem;
}

/* 正式ブランド表示。既存のterms-logo等と同じ技術（HTML側テキスト
   「TAROT」はfont-size:0で見た目上ゼロ幅にし、::afterで「TAROLUNE」を
   表示する）を踏襲。ロゴ画像ファイル自体の生成・加工は行っていない。 */
.auth-logo {
  display: block;
  font-size: 0;
}

.auth-logo::after {
  content: 'TAROLUNE';
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--gold-strong);
}

.auth-logo-sub {
  margin: 4px 0 0;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #7a7190;
}

.auth-title {
  margin: 16px 0 20px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #322a45;
  text-align: center;
}

.auth-field {
  text-align: left;
  margin: 0 0 14px;
}

.auth-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: #7a7190;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(124, 105, 173, 0.35);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  color: #322a45;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(205, 164, 90, 0.15);
}

/* パスワード表示/非表示トグル（2026-09-13追加、LOGIN/REGISTER共通）。
   .auth-password-fieldはposition:relativeのラッパーのみで、それ自身は
   marginもpaddingも持たないため、.auth-inputの高さ・.auth-fieldの
   レイアウトには一切影響しない。ボタンはinput内側へposition:absolute
   で重ねるだけで、入力欄自体の幅・高さは変えない。右paddingだけを
   .auth-input--password（パスワード欄専用の追加クラス、.auth-input
   本体は無変更）で必要最小限確保し、アイコンと入力文字が重ならない
   ようにする。 */
.auth-password-field {
  position: relative;
}

.auth-input--password {
  padding-right: 40px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: #9891b5;
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: var(--gold);
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-radius: 6px;
  color: var(--gold);
}

.auth-eye-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.auth-eye-icon-hide {
  display: none;
}

.auth-password-toggle.is-password-visible .auth-eye-icon-show {
  display: none;
}

.auth-password-toggle.is-password-visible .auth-eye-icon-hide {
  display: block;
}

/* 新規登録画面のパスワード欄補足（正式仕様の文字数・使用可能文字を
   ごく小さく表示）。LOGIN側には表示していない（HTML側で追加していない
   ため）。 */
.auth-field-hint {
  margin: 4px 0 0;
  font-size: 0.68rem;
  color: #9891b5;
  text-align: left;
}

.auth-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #574f6d;
  cursor: pointer;
}

.auth-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
}

.auth-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  color: #7a7190;
  text-decoration: underline;
  text-decoration-color: rgba(154, 145, 181, 0.4);
  cursor: pointer;
}

.auth-link:hover {
  color: var(--gold);
}

.auth-error {
  margin: 0 0 14px;
}

.auth-divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

.auth-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(184, 134, 63, 0.3);
}

.auth-divider-text {
  font-size: 0.7rem;
  color: #9891b5;
}

.auth-switch {
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: #574f6d;
}

.auth-switch-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

.auth-switch-link:hover {
  color: var(--gold-strong);
}

.auth-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px auto 0;
  padding: 9px 26px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
}

.auth-back-button:hover {
  background: rgba(205, 164, 90, 0.12);
}

@media (min-width: 601px) {
  .auth-panel {
    max-width: 400px;
    padding: 44px 40px;
  }

  .auth-logo::after {
    font-size: 1.8rem;
  }

  .auth-title {
    font-size: 1.5rem;
  }
}

/* =========================================================
   PC昼版LOGIN画面 専用の1画面完結・世界観調整（2026-09-13）。
   上の.auth-*共通ルール（#screen-registerと共有）は一切変更せず、
   #screen-login配下だけに効く上書きとしてすべて追加する。文字サイズ
   （font-size）は変更していない。#screen-register・PC夜版LOGIN・
   スマホLOGIN・PC昼版TOPには一切影響しない。 ========================================================= */

/* #appの共通padding(40px 16px 60px)が#screen-daily-tarot/#screen-premium
   と同様この画面にも乗っていたため、既存のbody:has(#screen-X.active)
   #appパターンを踏襲してLOGIN表示中だけ0にする（#screen-registerは
   対象外のまま）。 */
body:has(#screen-login.active) #app {
  padding: 0;
}

#screen-login .auth-screen {
  padding: 24px 20px 28px;
}

/* 完全な白から、半透明アイボリー+ごく薄いラベンダーへ。 */
#screen-login .auth-panel {
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.90), rgba(250, 245, 255, 0.86));
}

#screen-login .auth-title {
  margin: 12px 0 16px;
}

#screen-login .auth-field {
  margin-bottom: 10px;
}

#screen-login .auth-remember-row {
  margin: 4px 0 14px;
}

#screen-login .auth-divider-row {
  margin: 14px 0;
}

#screen-login .auth-switch {
  margin-top: 14px;
}

#screen-login .auth-back-button {
  margin-top: 18px;
}

/* body{line-height:1.75}の継承をタイトなUI向けの値へ調整（font-sizeは
   無変更）。ログイン/Googleボタンのpadding自体は変更していないため、
   高さは大きく縮まない（line-height分だけ、7px程度の穏やかな圧縮）。 */
#screen-login .auth-logo::after {
  line-height: 1.2;
}

#screen-login .auth-logo-sub,
#screen-login .auth-title,
#screen-login .auth-field label,
#screen-login .auth-input,
#screen-login .auth-checkbox-label,
#screen-login .auth-link,
#screen-login .auth-switch,
#screen-login .primary-button,
#screen-login .secondary-button {
  line-height: 1.3;
}

#screen-login .auth-divider-text {
  line-height: 1.2;
}

#screen-login .auth-back-button {
  line-height: 1;
}

@media (min-width: 601px) {
  #screen-login .auth-panel {
    padding: 32px 36px;
  }

  /* 背景の世界観をごく控えめに補強。.auth-screen::before（共通、
     #screen-registerと共有）自体は変更せず、#screen-login.active::before
     だけをこの新しい多層background一式で上書きする（最後のlinear-
     gradientは元の値のまま維持し、フォーム中央の可読性を優先しつつ
     周辺だけラベンダー/ゴールドを薄く感じさせる）。is-login-nightが
     付いている場合はこの上書きを適用しない（夜版デザインは今回未着手）。 */
  body:not(.is-login-night) #screen-login.active::before {
    background:
      radial-gradient(circle at 15% 8%, rgba(159, 140, 199, 0.16), transparent 55%),
      radial-gradient(circle at 88% 12%, rgba(227, 192, 122, 0.12), transparent 50%),
      radial-gradient(circle at 50% 105%, rgba(159, 140, 199, 0.15), transparent 60%),
      linear-gradient(180deg, #fffdfb 0%, #fbe8ef 55%, #efe6fb 100%);
  }

  /* hover時の文字色修正（2026-09-18）。共通ルール.secondary-button:hover
     （406〜415行目付近）はcolor:var(--text)（#f2eee6、アプリ既定の
     濃紺背景向けのアイボリー系文字色）を指定しており、PC夜版ログイン
     （明るい背景）ではvar(--text)がそのまま可読だが、PC昼版ログイン
     （白〜アイボリー系の明るい背景）では白に近い文字が背景と同化し、
     「Googleでログイン」「電話番号でログイン」の文字が読みにくく
     なっていた。ボタンの通常時の文字色（var(--text-muted)）・背景・
     border・border-radius・幅・高さ・margin等は変更せず、hover時の
     color宣言だけをこのスコープで上書きする。新しい色は作らず、
     この画面の見出し（.auth-title）・入力欄文字（.auth-input）に
     既に使われている#322a45（落ち着いた濃い紫）を流用する。
     .secondary-buttonはGoogleログインボタン（#login-google-button）・
     電話番号でログインボタン（#login-phone-button）の両方が共有する
     クラスのため、この1ルールで両方に適用される。
     body.is-login-night側の既存hoverルール（#f2eee6、16908行目付近）は
     このセレクタより詳細度が高いため上書きされず、PC夜版の見た目は
     一切変化しない。@media(min-width:601px)内のためスマホ昼版・
     スマホ夜版にも影響しない。HTML・JSは変更していない。 */
  body:not(.is-login-night) #screen-login .secondary-button:hover {
    color: #322a45;
  }
}

/* =========================================================
   PC夜版LOGIN画面 専用の配色・背景（2026-09-13新規）。
   PC昼版LOGIN（body:not(.is-login-night)側、正式採用済み）の
   background/.auth-panel/.auth-input等の共通.auth-*ルールは一切
   変更せず、body.is-login-night #screen-login ...という組み合わせの
   専用上書きだけで夜版配色を実現する。HTML構造・サイズ・margin/
   padding/line-height・1画面完結レイアウト・目のアイコン機能・
   画面遷移JSにはここでは一切触れない（色関連プロパティのみ上書き）。
   配色は既存のPremium/FAQ/Terms等のPC夜版パネル（rgba(24,18,55,0.72)・
   border rgba(227,192,122,0.62)）と同じ、このプロジェクトで実機
   確認済みの値をそのまま踏襲する。#screen-register・PC昼版TOP・
   PC夜版TOP・スマホ版には一切影響しない。
   ========================================================= */
@media (min-width: 601px) {
  /* 背景：深いネイビー〜紫、中央やや明るめ・周辺暗め、控えめな
     ラベンダー光とごく薄いゴールド光。画像は使用せずradial/linear-
     gradientのみ。#screen-login.active { animation: none; }
     （既存・変更なし）と組み合わせることで、position:fixedの背景が
     「中央→全画面」に広がる不具合を再発させない。 */
  body.is-login-night #screen-login.active::before {
    background:
      radial-gradient(circle at 50% 32%, rgba(124, 105, 173, 0.30), transparent 60%),
      radial-gradient(circle at 12% 85%, rgba(159, 140, 199, 0.14), transparent 55%),
      radial-gradient(circle at 88% 8%, rgba(227, 192, 122, 0.10), transparent 50%),
      linear-gradient(180deg, #120e28 0%, #1c1440 45%, #0c0918 100%);
  }

  /* パネル：半透明の濃紺〜濃紫（完全な黒にしない）、ゴールド細枠。 */
  body.is-login-night #screen-login .auth-panel {
    background: rgba(24, 18, 55, 0.72);
    border-color: rgba(227, 192, 122, 0.62);
    box-shadow: 0 20px 44px rgba(5, 2, 18, 0.35);
  }

  body.is-login-night #screen-login .auth-logo::after {
    color: var(--gold-strong);
  }

  body.is-login-night #screen-login .auth-logo-sub {
    color: #c8bfd8;
  }

  body.is-login-night #screen-login .auth-title {
    color: #eee8f5;
  }

  body.is-login-night #screen-login .auth-field label {
    color: #c8bfd8;
  }

  /* 入力欄：半透明の濃紺〜紫、枠線はラベンダー寄り、文字はアイボリー、
     placeholderは薄いラベンダー、focus時はゴールド系の控えめな枠/グロー。 */
  body.is-login-night #screen-login .auth-input {
    background: rgba(20, 15, 45, 0.55);
    border-color: rgba(159, 140, 199, 0.45);
    color: #f2eee6;
  }

  body.is-login-night #screen-login .auth-input::placeholder {
    color: rgba(200, 191, 216, 0.55);
  }

  body.is-login-night #screen-login .auth-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(227, 192, 122, 0.18);
  }

  body.is-login-night #screen-login .auth-checkbox-label {
    color: #e8e1f1;
  }

  body.is-login-night #screen-login .auth-link {
    color: #c8bfd8;
    text-decoration-color: rgba(200, 191, 216, 0.4);
  }

  body.is-login-night #screen-login .auth-link:hover {
    color: var(--gold-strong);
  }

  body.is-login-night #screen-login .auth-divider-line {
    background: rgba(227, 192, 122, 0.28);
  }

  body.is-login-night #screen-login .auth-divider-text {
    color: #9891b5;
  }

  /* ログインボタン（.primary-button）は「現在のゴールド基調を維持」の
     指示のため、意図的に上書きしていない（Premium申込ボタン等、他の
     ゴールドCTAも昼夜で配色を変えていない既存方針と同じ）。 */

  /* Googleでログイン：濃紺〜紫の半透明背景、ラベンダー寄りの細枠、
     文字はアイボリー〜ラベンダー。派手な発光は追加しない。 */
  body.is-login-night #screen-login .secondary-button {
    color: #e8e1f1;
    background: rgba(24, 18, 55, 0.55);
    border-color: rgba(159, 140, 199, 0.5);
  }

  body.is-login-night #screen-login .secondary-button:hover {
    color: #f2eee6;
    border-color: rgba(227, 192, 122, 0.6);
  }

  body.is-login-night #screen-login .auth-switch {
    color: #e8e1f1;
  }

  body.is-login-night #screen-login .auth-switch-link {
    color: var(--gold);
  }

  body.is-login-night #screen-login .auth-switch-link:hover {
    color: var(--gold-strong);
  }

  /* トップページに戻る：ゴールド細枠・ゴールド文字、背景は透明のまま。 */
  body.is-login-night #screen-login .auth-back-button {
    color: var(--gold);
    border-color: var(--gold);
    background: transparent;
  }

  body.is-login-night #screen-login .auth-back-button:hover {
    background: rgba(227, 192, 122, 0.12);
  }

  /* 目のアイコン：通常時はラベンダー、hover/focus時はゴールド。 */
  body.is-login-night #screen-login .auth-password-toggle {
    color: #c8bfd8;
  }

  body.is-login-night #screen-login .auth-password-toggle:hover,
  body.is-login-night #screen-login .auth-password-toggle:focus-visible {
    color: var(--gold);
  }
}

/* =========================================================
   REGISTER画面 1画面完結・不具合予防・配色（2026-09-13新規）。
   LOGINで確立済みの手法（#appの二重padding解消・auth-screen/auth-panel
   の余白圧縮・line-height調整・fade-inアニメーション無効化・
   PC限定の背景/パネル世界観の上書き）を、共通.auth-*ルールには一切
   触れずに#screen-register専用セレクタだけで踏襲する。PC昼版LOGIN・
   PC夜版LOGIN・TOP・他画面・スマホ版には一切影響しない。
   ========================================================= */

/* 共通の.screen.active{animation:fade-in}（keyframeのtransform:
   translateY）が#screen-register自身をposition:fixed子孫
   （#screen-register.active::before）の一時的な包含ブロックにしてしまい、
   LOGINと全く同じ「中央→全画面」不具合を起こす条件が揃っていたため、
   #screen-login.active { animation: none; }と同じ対処法をREGISTERにも
   適用する。.screen.active共通ルール・@keyframes fade-in自体は
   変更していない。 */
#screen-register.active {
  animation: none;
}

/* #appの共通padding(40px 16px 60px)がLOGINと同様この画面にも乗って
   いたため、既存パターンを踏襲してREGISTER表示中だけ0にする
   （#screen-loginは対象外のまま）。 */
body:has(#screen-register.active) #app {
  padding: 0;
}

#screen-register .auth-screen {
  padding: 24px 20px 28px;
}

#screen-register .auth-panel {
  padding: 24px 20px;
}

#screen-register .auth-title {
  margin: 12px 0 16px;
}

#screen-register .auth-field {
  margin-bottom: 10px;
}

#screen-register .auth-field-hint {
  margin: 4px 0 0;
}

#screen-register .auth-divider-row {
  margin: 14px 0;
}

#screen-register .auth-switch {
  margin-top: 14px;
}

#screen-register .auth-back-button {
  margin-top: 18px;
}

/* body{line-height:1.75}の継承をLOGINと同じ値へ調整（font-sizeは
   無変更）。 */
#screen-register .auth-logo::after {
  line-height: 1.2;
}

#screen-register .auth-logo-sub,
#screen-register .auth-title,
#screen-register .auth-field label,
#screen-register .auth-input,
#screen-register .auth-field-hint,
#screen-register .auth-link,
#screen-register .auth-switch,
#screen-register .primary-button,
#screen-register .secondary-button {
  line-height: 1.3;
}

#screen-register .auth-divider-text {
  line-height: 1.2;
}

#screen-register .auth-back-button {
  line-height: 1;
}

@media (min-width: 601px) {
  #screen-register .auth-panel {
    padding: 32px 36px;
  }

  /* PC昼版REGISTER：LOGINの正式採用済み世界観（パネル配色・背景の
     ごく控えめな装飾）と全く同じ値をそのまま流用する（新しい配色は
     作らない）。 */
  #screen-register .auth-panel {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.90), rgba(250, 245, 255, 0.86));
  }

  body:not(.is-register-night) #screen-register.active::before {
    background:
      radial-gradient(circle at 15% 8%, rgba(159, 140, 199, 0.16), transparent 55%),
      radial-gradient(circle at 88% 12%, rgba(227, 192, 122, 0.12), transparent 50%),
      radial-gradient(circle at 50% 105%, rgba(159, 140, 199, 0.15), transparent 60%),
      linear-gradient(180deg, #fffdfb 0%, #fbe8ef 55%, #efe6fb 100%);
  }

  /* hover時の文字色修正（2026-09-18）。PC昼版LOGIN（#screen-login）で
     正式採用済みの対処と全く同じ理由・全く同じ色。共通ルール
     .secondary-button:hoverはcolor:var(--text)（#f2eee6、濃紺背景向けの
     アイボリー系文字色）を指定しており、PC昼版REGISTER（明るい背景）
     ではこの色が背景と同化して読みにくくなる。ボタンの通常時の文字色・
     背景・border・border-radius・幅・高さ・margin等は変更せず、hover時の
     color宣言だけをこのスコープで上書きする。新しい色は作らず、PC昼版
     LOGINで採用した#322a45（この画面の.auth-title/.auth-inputに既に
     使われている色と同じ値）をそのまま流用する。
     .secondary-buttonはGoogleで登録（#register-google-button）・
     電話番号で登録（#register-phone-button）の両方が共有するクラスの
     ため、この1ルールで両方に適用される。body.is-register-night側の
     既存hoverルール（#f2eee6）はこのセレクタより詳細度が高いため
     上書きされず、PC夜版の見た目は一切変化しない。
     @media(min-width:601px)内のためスマホ昼版・スマホ夜版にも影響
     しない。HTML・JSは変更していない。 */
  body:not(.is-register-night) #screen-register .secondary-button:hover {
    color: #322a45;
  }

  /* PC夜版REGISTER：PC夜版LOGINで正式採用済みの値をそのまま流用する
     （新しい配色は作らない）。REGISTERにしかない要素
     （.auth-field-hint、パスワード確認欄）にも同じトーンを適用する。 */
  body.is-register-night #screen-register.active::before {
    background:
      radial-gradient(circle at 50% 32%, rgba(124, 105, 173, 0.30), transparent 60%),
      radial-gradient(circle at 12% 85%, rgba(159, 140, 199, 0.14), transparent 55%),
      radial-gradient(circle at 88% 8%, rgba(227, 192, 122, 0.10), transparent 50%),
      linear-gradient(180deg, #120e28 0%, #1c1440 45%, #0c0918 100%);
  }

  body.is-register-night #screen-register .auth-panel {
    background: rgba(24, 18, 55, 0.72);
    border-color: rgba(227, 192, 122, 0.62);
    box-shadow: 0 20px 44px rgba(5, 2, 18, 0.35);
  }

  body.is-register-night #screen-register .auth-logo::after {
    color: var(--gold-strong);
  }

  body.is-register-night #screen-register .auth-logo-sub {
    color: #c8bfd8;
  }

  body.is-register-night #screen-register .auth-title {
    color: #eee8f5;
  }

  body.is-register-night #screen-register .auth-field label {
    color: #c8bfd8;
  }

  body.is-register-night #screen-register .auth-field-hint {
    color: #c8bfd8;
  }

  body.is-register-night #screen-register .auth-input {
    background: rgba(20, 15, 45, 0.55);
    border-color: rgba(159, 140, 199, 0.45);
    color: #f2eee6;
  }

  body.is-register-night #screen-register .auth-input::placeholder {
    color: rgba(200, 191, 216, 0.55);
  }

  body.is-register-night #screen-register .auth-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(227, 192, 122, 0.18);
  }

  body.is-register-night #screen-register .auth-divider-line {
    background: rgba(227, 192, 122, 0.28);
  }

  body.is-register-night #screen-register .auth-divider-text {
    color: #9891b5;
  }

  /* 新規登録ボタン（.primary-button）はLOGINと同じ理由で意図的に
     上書きしていない（現在のゴールド基調を維持）。 */

  body.is-register-night #screen-register .secondary-button {
    color: #e8e1f1;
    background: rgba(24, 18, 55, 0.55);
    border-color: rgba(159, 140, 199, 0.5);
  }

  body.is-register-night #screen-register .secondary-button:hover {
    color: #f2eee6;
    border-color: rgba(227, 192, 122, 0.6);
  }

  body.is-register-night #screen-register .auth-switch {
    color: #e8e1f1;
  }

  body.is-register-night #screen-register .auth-switch-link {
    color: var(--gold);
  }

  body.is-register-night #screen-register .auth-switch-link:hover {
    color: var(--gold-strong);
  }

  body.is-register-night #screen-register .auth-back-button {
    color: var(--gold);
    border-color: var(--gold);
    background: transparent;
  }

  body.is-register-night #screen-register .auth-back-button:hover {
    background: rgba(227, 192, 122, 0.12);
  }

  body.is-register-night #screen-register .auth-password-toggle {
    color: #c8bfd8;
  }

  body.is-register-night #screen-register .auth-password-toggle:hover,
  body.is-register-night #screen-register .auth-password-toggle:focus-visible {
    color: var(--gold);
  }
}

/* =========================================================
   MY PAGE画面（#screen-mypage、STEP4-1新規、2026-09-19）
   ログイン済みユーザー専用画面。表示前に必ずGET /auth/meで認証確認を
   行う（js/topScreen.jsのgoToMyPage()、js/main.jsのpopstateハンドラ）。
   既存の.auth-*（ログイン/新規登録の正式採用済みデザイン）は一切
   変更せず、値だけを参考にした独立クラス.mypage-*として複製実装して
   いる（terms→privacy→faq→tokushohoと同じ、既存クラスを共有しない
   設計方針を踏襲）。
   今回はPC/スマホ共通の1カラムレイアウト・昼版のみ実装する。
   is-mypage-nightクラス自体はgoToMyPage()で今のうちに付け外しして
   おくが（.auth-*が当初たどったのと同じ考え方）、対応する夜版CSSは
   今回追加していない（将来の別STEPで追加する）。
   TOP・相談入力・カード選択・カード開示・鑑定結果・Premium・LOGIN・
   REGISTERの正式採用済みCSSには一切触れていない。 ========================================================= */
body:has(#screen-mypage.active) .app-header {
  display: none;
}

body:has(#screen-mypage.active) #app {
  padding: 0;
}

.mypage-screen {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 32px 20px 40px;
}

#screen-mypage.active {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 共通の.screen.active{animation:fade-in}（transform:translateY使用）と
     position:fixedの.mypage-screen::before背景の相性対策。
     #screen-login.active等の既存パターンと同じ考え方。 */
  animation: none;
}

.mypage-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #fffdfb 0%, #fbe8ef 55%, #efe6fb 100%);
}

.mypage-page {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mypage-panel {
  width: 100%;
  max-width: 420px;
  padding: 32px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(184, 134, 63, 0.35);
  box-shadow: 0 20px 44px rgba(60, 30, 80, 0.15);
  text-align: center;
}

.mypage-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 6px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-strong);
  background: rgba(20, 14, 40, 0.06);
  border: 1px solid rgba(184, 134, 63, 0.4);
  border-radius: 999px;
  cursor: pointer;
}

.mypage-back-button:hover {
  filter: brightness(1.05);
}

.mypage-title {
  margin: 4px 0 20px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #241a3b;
}

.mypage-section {
  margin: 0 0 24px;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(250, 245, 255, 0.6);
  border: 1px solid rgba(184, 134, 63, 0.22);
  text-align: left;
}

.mypage-section-heading {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-strong);
}

.mypage-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.88rem;
}

.mypage-field-row:last-of-type {
  margin-bottom: 0;
}

.mypage-field-label {
  color: #7a7190;
}

.mypage-field-value {
  color: #241a3b;
  font-weight: 600;
  word-break: break-all;
  text-align: right;
}

.mypage-membership-status {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #241a3b;
}

.mypage-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-strong);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(184, 134, 63, 0.4);
  border-radius: 999px;
  cursor: pointer;
}

.mypage-secondary-button:hover {
  filter: brightness(1.03);
}

.mypage-section-logout {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}

.mypage-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #241a06;
  background: linear-gradient(135deg, var(--gold), var(--gold-strong));
  border: none;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(205, 164, 90, 0.28);
  cursor: pointer;
}

.mypage-primary-button:hover {
  filter: brightness(1.05);
}

.mypage-error {
  margin-top: 16px;
}

.mypage-delete-link {
  display: block;
  margin: 20px auto 0;
  padding: 0;
  font-size: 0.75rem;
  color: #9a91a8;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.mypage-delete-link:hover {
  color: #7a7190;
}

/* =========================================================
   MY PAGEパスワード変更フォーム（STEP4-5新規、2026-09-19）。
   既存の.auth-*（ログイン/新規登録の正式採用済みデザイン）は一切
   変更せず、値だけを参考にした独立クラス.mypage-*として複製実装して
   いる（.mypage-panel等の既存STEP4-1クラスと同じ設計方針）。
   フォームは#mypage-change-password-buttonのクリックで.hiddenを
   toggleするだけの単純な開閉（アカウント情報カード内で縦方向にだけ
   拡張する）。目のアイコン切替は既存js/topScreen.jsの
   initPasswordToggle()をそのまま再利用しており、専用のCSSは
   ボタン・アイコンの見た目だけで新しい表示切替ロジックは持たない。
   MY PAGE全体がまだ昼版のみのため（is-mypage-nightに対応する夜版CSSは
   STEP4-1時点で未実装）、このフォームも昼版のみとし、夜版CSSは今回
   追加しない。 ========================================================= */
.mypage-password-form {
  margin-top: 14px;
  text-align: left;
}

.mypage-field {
  margin: 0 0 14px;
}

.mypage-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.75rem;
  color: #7a7190;
}

.mypage-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(124, 105, 173, 0.35);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  color: #322a45;
  box-sizing: border-box;
}

.mypage-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(205, 164, 90, 0.15);
}

.mypage-password-field {
  position: relative;
}

.mypage-input--password {
  padding-right: 40px;
}

.mypage-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  color: #9891b5;
  cursor: pointer;
}

.mypage-password-toggle:hover {
  color: var(--gold);
}

.mypage-password-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-radius: 6px;
  color: var(--gold);
}

.mypage-eye-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.mypage-eye-icon-hide {
  display: none;
}

.mypage-password-toggle.is-password-visible .mypage-eye-icon-show {
  display: none;
}

.mypage-password-toggle.is-password-visible .mypage-eye-icon-hide {
  display: block;
}

.mypage-field-hint {
  margin: 4px 0 0;
  font-size: 0.68rem;
  color: #9891b5;
  text-align: left;
}

.mypage-password-message {
  margin-top: 12px;
  text-align: left;
}

/* 成功メッセージ（「パスワードを変更しました」）用の色違い。
   .error-text本体（赤系、共通ユーティリティ）は変更せず、この
   .is-success修飾だけで上書きする。 */
.mypage-password-message.is-success {
  color: var(--gold-strong);
}

/* パスワード変更成功メッセージ（STEP4-7新規、2026-09-19）。フォームを
   閉じた通常の「アカウント情報」セクション表示の中で見える、控えめな
   ゴールド系の1行。既存の.mypage-section/.mypage-panel等のサイズ・
   位置・レイアウトには一切触れず、この段落の余白だけを追加する。 */
.mypage-account-message {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--gold-strong);
  text-align: left;
}

/* =========================================================
   スマホ専用MENU画面（#screen-menu、2026-09-14新規追加）

   スマホ版TOP左上の三本線（#top-nav-toggle）をタップした際、従来の
   PC専用ドロップダウン（#top-nav）は開かず、この独立画面へ遷移する
   （js/topScreen.jsのgoToMenu()、initNavToggle()側で分岐）。
   HOW IT WORKS/FAQ/利用規約/プライバシーポリシー/特定商取引法の
   5項目のみを縦1列で表示し、LOGINは含めない（LOGINはTOP右上の
   常時表示ボタンが正式導線のため）。

   HTML構造は独立screen方式（#screen-menu、showScreen()の
   screensオブジェクトに1キー追加するだけ）。各項目のクリックは
   既存のgoToHowItWorks()/goToFaq()/goToTerms()/goToPrivacy()/
   goToTokushoho()をそのまま再利用し、閉じるボタンは既存のgoToTop()を
   再利用する（いずれも1文字も変更していない）。

   昼夜判定は他の独立screen（利用規約・FAQ等）と全く同じ考え方で、
   この画面専用の新規クラスis-menu-nightをgoToMenu()内で付け外しする。
   配色は新しい色を作らず、TOP/スプラッシュの背景グラデーション・
   HOW IT WORKS夜版の文字色パレットをそのまま流用している。

   このブロックはスマホ専用@media(max-width:600px)として完全に独立
   させており、PC版の#top-nav・.top-nav-link・.top-login-button・
   TOPヘッダー・中央TAROTロゴ・星座占い・テーマカード・各法務画面
   本体・HOW IT WORKS画面本体には一切触れていない。 */
body:has(#screen-menu.active) .app-header {
  display: none;
}

@media (min-width: 601px) {
  /* PC幅ではそもそも#top-nav-toggleが常にdisplay:noneのため
     goToMenu()が呼ばれることはないが、念のためこの画面自体も
     PC幅では表示しない（防御的な安全策）。 */
  #screen-menu {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #screen-menu {
    min-height: 100vh;
    padding: 0 0 40px;
    background: linear-gradient(160deg, #fffdfb 0%, #f7ecf9 50%, #efe6fb 100%);
  }

  body.is-menu-night #screen-menu {
    background: linear-gradient(160deg, #0d0820 0%, #1c1240 55%, #241830 100%);
  }

  .menu-header {
    position: relative;
    padding: 28px 24px 18px;
    text-align: center;
  }

  .menu-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .menu-brand-main {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: #b8863f;
  }

  body.is-menu-night .menu-brand-main {
    color: #e3c07a;
  }

  .menu-brand-sub {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: #7a7190;
  }

  body.is-menu-night .menu-brand-sub {
    color: #c8bfd8;
  }

  .menu-close-button {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 34px;
    height: 34px;
    line-height: 32px;
    padding: 0;
    font-size: 1.3rem;
    color: #b8863f;
    background: transparent;
    border: 1px solid rgba(184, 134, 63, 0.4);
    border-radius: 50%;
    cursor: pointer;
  }

  body.is-menu-night .menu-close-button {
    color: #e3c07a;
    border-color: rgba(227, 192, 122, 0.45);
  }

  .menu-title {
    margin: 8px 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-align: center;
    color: #b8863f;
  }

  body.is-menu-night .menu-title {
    color: #e3c07a;
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 4px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    color: #322a45;
    background: none;
    border: none;
    border-top: 1px solid rgba(184, 134, 63, 0.25);
    cursor: pointer;
  }

  .menu-link:last-child {
    border-bottom: 1px solid rgba(184, 134, 63, 0.25);
  }

  .menu-link::after {
    content: '\203A';
    font-size: 1.1rem;
    color: #b8863f;
  }

  .menu-link:active {
    background: rgba(184, 134, 63, 0.08);
  }

  body.is-menu-night .menu-link {
    color: #e8e1f1;
    border-top-color: rgba(217, 173, 85, 0.28);
  }

  body.is-menu-night .menu-link:last-child {
    border-bottom-color: rgba(217, 173, 85, 0.28);
  }

  body.is-menu-night .menu-link::after {
    color: #e3c07a;
  }

  body.is-menu-night .menu-link:active {
    background: rgba(227, 192, 122, 0.1);
  }
}