@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — イベントカラー変数（企画ごとに書き換え）
   base.css のデフォルト値をここで上書きするだけ。
   base.css 自体は触らない。

   WORKFLOW:
     1. :root の色変数を企画カラーに変更する
     2. 背景やフォントのカスタマイズはコメントアウトを外して追記
     3. 共通コンポーネントの変更は base.css へ
   ============================================================ */


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #8C0000;   /* Maroon Red */
    --color-sub2:   #00C4EB;   /* Light Blue */
    --color-sub3:   #033661;   /* Blue */
    --color-sub4:   #646464;   /* Gradient Grey */
    --color-sub5:   #2D2C2A;   /* Border Grey */
    --color-sub6:   #5D1717;   /* Red 3 */
    --color-sub7:   #253E31;   /* Green 4 */
    --color-text:   #1a1a2e;   /* テキストカラー */
    --color-button: #000000;   /* ボタンカラー */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;   /* coding はテンプレ既定の M PLUS Rounded 1c のままだったが、この企画には不適切なので Noto Sans（2026-10-02 指示） */
    --font-serif:   'Noto Serif JP', Yu Mincho, Hiragino Mincho ProN, serif;
    --font-sans:    'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   FORM ELEMENT FONT RESET — 削除しないこと（恒久対応 2026-09-13）

   ★ <button> / <input> / <select> / <textarea> は **UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない**。
     :root の --font-family や body に企画フォントを入れても
     **ボタンの文字だけ Arial のまま**になる。

   ★ coding（デザイン支給の custom.css）が
       .iconButton .iconButtonText { font-family: ...; }
     を持っていることが多いのは **この対策**。移植時に「body に指定があるから冗長」
     と judging して落とすと必ず再発する（2026-09 precure2026 で発生）。

   ★ **ヘッドレス Chrome では再現しない**（UA スタイルシートが実機と違い button が
     継承してしまう）。ローカル描画の計測だけで「効いている」と判断しないこと。
     実機の DevTools で
       getComputedStyle(document.querySelector('.iconButtonText')).fontFamily
     が **Arial 単体**なら UA スタイルシートが勝っている。

   base.css は共通ファイルなので触らず、ここ（custom.css）で当てる。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: var(--font-serif);
}

/* 念のためボタン文字にも明示（別の UA・将来の base.css 変更でも確実に効かせる） */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.narrowIconButton .narrowIconButtonText,
.rectangleButton .rectangleButtonText,
.toOshitabiTop,
.simpleButton,
.whiteButton,
.oshitabiButton {
    font-family: var(--font-serif);
}

.toOshitabiTop {
    margin: 0.15rem auto;
    min-height: 0.80rem;

    font-size: 0.20rem;
    font-weight: 700;
    line-height: 0.27rem;
    letter-spacing: 0.05em;
}

.loginRgisterButton {
  padding: 0.155rem 0.05rem;
  border-radius: 0;

  .icon img {
    height: 0.18rem;
  }
}




/* ============================================================
   SECTION HEADING — テキストセクションタイトル
   ============================================================ */
.section-heading {
    display: block;
    width: 100%;
    /* text-align: center;
    padding: 0.22rem 0.20rem 0.18rem;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    position: relative; */
}

/* .section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.60rem;
    height: 0.05rem;
    background: var(--color-local);
    border-radius: 0.025rem;
}

.section-heading-text {
    color: #fff;
    font-size: 0.22rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    font-family: var(--font-family);
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.2);
} */


/* ============================================================
   SHINKANSEN HEADER — 画像ヘッダーが用意できない時の
   「新幹線コンテンツ用」バナーヘッダー（横向き新幹線 /img/shinkansen.png）
   （ultraman60th_s で採用。声グラ /seigura の .charaIcon.shinkansen を踏襲）

   使い方（section-heading の代わりにこれを置く）:
     <div class="lead-heading">
         東海道新幹線車内コンテンツ
         <div class="charaIcon shinkansen"><img src="/img/shinkansen.png" alt="東海道新幹線"></div>
     </div>

   ・帯グラデは sub1→sub2（テーマ非依存で白文字が読める暗さ）。企画色を効かせたい
     場合のみ background を上書きする。
   ・新幹線は実寸(1080px=10.8rem)で帯を突き抜け、overflow:hidden で帯内クリップ
     → 疾走感を出しつつはみ出しは自己完結（content-holder 側の overflow に依存しない）。
   ============================================================ */
.lead-heading {
    position: relative;                 /* 子（新幹線）の基準 + はみ出しの自己完結 */
    overflow: hidden;                   /* 帯からはみ出す新幹線を帯内でクリップ */
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.22rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-family: var(--font-family);
    padding: 0.14rem 0.14rem 0.10rem;
    border-radius: 0;
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.35);
}

.lead-heading .charaIcon.shinkansen {
    text-align: center;
    margin: 0.04rem auto 0;
    /* ずらしたい時のみ position: relative; + top/left。無しでは top/left は無効 */
}

.lead-heading .charaIcon.shinkansen img {
    width: 10.8rem;                     /* = 実寸 1080px。見た目維持しつつ PNG 差し替え時の寸法ズレを防ぐ */
    height: auto;
    filter: drop-shadow(0 0.04rem 0.10rem rgba(11, 20, 60, 0.35));
}

.content-holder {
  border-radius: 0;
  background-image: url("../img/bg.webp");
  width: 100%;
  max-width: 4.3rem;
  border: 0.12rem solid var(--color-sub1);
  margin: 0;
  border-top: 0;
  padding: 0.18rem 0.13rem 0.15rem 0.13rem;
}


/* ============================================================
   BACKGROUND (任意)
   企画の背景色・パターンが必要な場合にコメントアウトを外す
   ============================================================ */
/* body { background-color: #f0e8ff; } */


/* ============================================================
   CONFIRM MODAL on EXCHANGE PAGES — 削除しないこと（恒久対応 2026-09-24）

   引換ページ（certificate/single.php・stamprally/exchange/completed.php）の
   確認モーダル（askPromptModal）を、**そのページのスライダー色**に揃える。

   ★ なぜ要るか
     base.css は モーダルの枠・タイトル帯・「はい」「いいえ」を
     すべて var(--color-button) 固定で塗る。一方 certificate.css は
       #yesBtn { background-color: var(--cert-btn1) !important; }
     で **「はい」の地色だけ** を上書きしている。
     そのため、引換スライダーの色（--cert-btn1）を --color-button 以外にした企画では
     「はい」だけスライダー色・枠とタイトル帯と「いいえ」はボタン色、という
     ちぐはぐな見た目になる（2026-09 yurucamp2026 で発生）。

   ★ 色をベタ書きしないこと
     --cert-btn1 は各引換ページの inline <style> が設定する値。変数で受けておけば
     「車内=オレンジ / 現地=ティール」のように**ページごとに違う配色**でも自動で揃う。
     ベタ書きすると必ずどちらか一方がズレる。

   ★ .exchangePage（body クラス）で囲っているので、
     stamprally/top.php のリセット確認モーダル等、--cert-* を持たないページには効かない
     （そちらは従来どおり --color-button）。
   ★ base.css / certificate.css は共有ファイルなので触らない。ここで上書きする。
   ★ var(--cert-btn1, var(--color-button)) とフォールバックを付けている。
     .exchangePage を名乗りながら --cert-* を出さないページを作っても、
     枠・タイトル帯が消えず従来どおりのボタン色に落ちる。
   ============================================================ */
.exchangePage .askPromptModal__content {
    border-color: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__title {
    background: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__yes {
    background: var(--cert-btn1, var(--color-button));
    border-color: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__no {
    color: var(--cert-btn1, var(--color-button));
    border-color: var(--cert-btn1, var(--color-button));
}

/* 「はい」の地色は certificate.css が
     #yesBtn { background-color: var(--cert-btn1) !important; }
   で握っている。--cert-btn1 が未定義のページだとこの宣言が
   「計算値の時点で無効」になり、!important のまま transparent に落ちて
   **ボタンが真っ白で消える**。共有ファイルは直せないので、
   ID + クラスで特異度を上げて同じフォールバック付きの値で確定させる。 */
.exchangePage #yesBtn {
    background-color: var(--cert-btn1, var(--color-button)) !important;
}


/* ============================================================
   ALERT MODAL タイトル帯の角 — 削除しないこと（恒久対応 2026-09-25）

   ★ base.css の #alertModal .modal-content は「角丸 0.12rem ＋ 枠線 0.01rem」、
     タイトル帯 #alertTitle は border-radius: 0.12rem 0.12rem 0 0。
     この組み合わせだと **左上・右上の角に白い細い線（隙間）** が出る
     （2026-09 overthesun-obatabi02 で指摘）。
       1) 枠線の内側の角丸は 0.12 − 0.01 = 0.11rem なのに帯は 0.12rem で丸まる
       2) 背景の白が枠線の下まで塗られ、角のアンチエイリアスで白がにじむ
     タイトル帯の角丸を 0 にするだけでは 2) が残る（実測で確認）。
   ★ 対策（3点セット・どれか欠けると線が残る）:
       a) 枠線をやめて box-shadow の外周1本で同じ枠を描く（内側に継ぎ目ができない）
       b) タイトル帯は角丸なし＝外枠の overflow: hidden で角を切る
       c) 外枠の背景の「上端 0.30rem だけ」を帯と同じ色にする。角のアンチエイリアスは
          下地の白と帯の色が混ざって白っぽい線になるので、角の下地を帯色にしておく
          （0.30rem は帯の高さ（約0.42rem）より低いので、帯の下に白が見えることはない）
   ★ 色は var(--color-tokai)。企画色にする場合は #alertModal で --color-tokai を差し替える
     （base.css / 共有 style_v2.css は触らない）。
   ============================================================ */
#alertModal .modal-content {
    border: 0;
    box-shadow: 0 0 0 0.01rem var(--color-tokai), 0 0.08rem 0.24rem rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, var(--color-tokai) 0, var(--color-tokai) 0.30rem, #ffffff 0.30rem);
}
#alertModal #alertTitle {
    border-radius: 0;
}


/* ============================================================
   CONTENT-HOLDER — 共通 CSS の影を消す（削除しないこと）

   ★ グローバルの /css/style_v2.css（module/components_v2.0/header/
     htmlHeader.inc.php が全ページで読み込む）が
       .content-holder { box-shadow: 0 0 0.03rem #ccc; }
     を当てている。白カード前提の古い指定で、暗色・画像背景のデザインでは
     **各セクションの一番上に薄いグレーの線が浮いて見える**。
   ★ base.css にも企画の custom.css にも書いていないため grep で見つからず、
     原因特定に時間がかかる（計算済みスタイルを見ないと分からない）。
     2026-09 toukenranbu-kanei2026 で実際に踏んだのでテンプレ既定で消す。
   ★ 影が欲しい企画は、下の VARIANTS のように box-shadow を上書きする。
     /css/style_v2.css と base.css は共有ファイルなので絶対に編集しない。
   ============================================================ */
.content-holder {
    box-shadow: none;
}


/* ============================================================
   PAGE-CONTENT — メインの左右に影を付ける（2026-09-28 追加・piyorin2nd と同じ値）
   ★ 本文の幅は .page-content の max-width: 4.30rem で頭打ちになる。PC・タブレットなど
     それより広い画面では、左右の余白と本文の境目が見えず、背景に溶けて平板に見える。
     外周に薄い影を付けて本文の面を浮かせる（piyorin2nd の .event-content--top と同じ指定）。
   ★ スマホ幅（本文が画面いっぱい）では影は画面外に出るので見た目は変わらない。
   ★ 影が要らない企画・別の影にしたい企画は、この値を企画の custom.css で上書きする
     （none にするか値を差し替える）。base.css は共有なので触らない。
   ============================================================ */
.page-content {
    box-shadow: 0 0 0.12rem rgba(0, 0, 0, 0.25);
}

.page-content--no-shadow {
    box-shadow: none;
}


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
/* .content-holder {
    border: 3px solid var(--color-sub1);
    box-shadow: 0.04rem 0.04rem 0 var(--color-sub1);
} */

.content-holder--grey-top {
    border: 0.12rem solid var(--color-sub5);
    padding: 0.18rem 0.13rem 0.03rem 0.13rem;
    background-image: url("../img/bg.webp");
}

.content-holder--grey-stamprally {
    border: 0.12rem solid var(--color-sub5);
    padding: 0.18rem 0.13rem 0.03rem 0.13rem;
    background-image: url("../img/bg-blue.webp");
}

.content-holder--red {
    border: 0.12rem solid var(--color-sub1);
    padding: 0.18rem 0.13rem 0.03rem 0.13rem;
    background-image: url("../img/bg.webp");
}

.content-holder--blue {
    border: 0.12rem solid var(--color-sub3);
    padding: 0.20rem 0.13rem 0.08rem 0.13rem;
    background-image: url("../img/bg-blue.webp");
}

.no-top-border {
    border-top: none;
}

/* ============================================================
   BUTTON — アイコン無しの細長ボタン（.loginRgisterButton.noIcon）
   クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／
   結果画面に戻る）など、「報酬の受け取り」以外のボタンに使う。

   ★ アイコンを付けないときは左右とも省略する（19_button-icons.md）。
     .iconButton のまま中身を文字だけにすると、アイコン用の flex 領域
     （.icon flex:2 / .icon2nd flex:1.5）が残って文字が中央からずれる。
   ★ 地色は .button-bg（var(--color-button)）。企画で別の地色にする場合は
     この下で .loginRgisterButton を上書きする。
   ============================================================ */
button.loginRgisterButton {
    border: 0;
    font-family: inherit;
    font-size: inherit;
    /* ★ color は指定しない（.white-text より詳細度が高く、白文字を打ち消してしまう） */
}

.loginRgisterButton .iconButtonText{
    font-size: 0.20rem;         /*loginRgisterButtonのフォントサイズを変更する */
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
}

.loginRgisterButton.noIcon {
    padding: 0.15rem 0.05rem;   /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}

.loginRgisterButton.noIcon .iconButtonText {
    margin-left: 0;
    margin-right: 0;            /* アイコン分の右マージンを消して中央に置く */
}

.black-gradient {
    background: linear-gradient(180deg, var(--color-sub4), var(--color-button));
}

.red-gradient {
    background: linear-gradient(180deg, #C15050, var(--color-sub6));
}

.green-gradient {
    background: linear-gradient(180deg, #1C7547, var(--color-sub7));
}

.iconButton.mainButton {
    border-radius: 0;
    min-height: 0.8rem;
    margin: 0;
}

.iconButton.mainButton::before {
    content: none;
}

.mainButtonText {
    font-family: var(--font-serif);
    font-size: 0.20rem;
    font-weight: 900;
    line-height: 0.26rem;
    letter-spacing: 0;
    padding-right: 0.1rem;
    text-align: center;
    flex: 4.5;
}

.iconButton.switchPage {
    max-width: 3.80rem;
    height: 0.80rem;
    border-radius: 0;
    margin: 0 auto 0.10rem;
}

.iconButton.switchPage::before {
    content: none;
}

/* ============================================================
   Icon Size
   ============================================================ */
.icon.volume-icon img {
    width: 0.3rem;
    height: auto;
}

.icon.quiz-icon img {
    width: 0.28rem;
    height: auto;
}

.icon.download-icon img {
    width: 0.18rem;
    height: auto;
}

.icon.voice-icon img {
    width: 0.19rem;
    height: auto;
}

.icon.play-icon img {
    width: 0.42rem;   /* coding 0.51rem → 少し小さく（2026-10-02 指示） */
    height: auto;
}

.icon.gps-icon img {
    width: 0.22rem;
    height: auto;
}

.icon.shop-icon img {
    width: 0.2rem;
    height: auto;
}

.icon.reset-icon img {
    width: 0.22rem;
    height: auto;
}

.icon.map-icon img {
    width: 0.22rem;
    height: auto;
}

.icon2nd.right-icon img {
    width: 0.26rem;
    height: auto;
}

/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   企画ごとの button-bg / グラデを上書きするため !important で最優先化。
   base.css の .iconButton[disabled] と同じ gray グラデを採用。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
}
/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ------------------------------------------------------------
   非活性アイコンを濃い灰色にする（任意 — 白系ボタンの企画のみ）

   上のデフォルトは「暗い灰グラデの地 ＋ 白のアイコン/文字」なので、
   アイコンは白のままでよい。
   LP トンマナに合わせて disabled の地を白〜薄灰に上書きした企画では、
   白アイコンが地に溶けて消えるため、下のブロックのコメントを外す。

   アイコンは <img> の外部 SVG なので fill / color では色を変えられない。
   grayscale(1) を掛けると、企画のメインカラーが輝度どおりの灰色に落ちる
   （例: #8a579a → #676767）ので、これで「濃い灰色」を作る。
   ------------------------------------------------------------ */
/* .iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    filter: grayscale(1);
} */


/* ============================================================
   STAMP / AR GRID (任意)
   ARフレーム数が異なる場合に列数を変更する
   ============================================================ */
/* .icon-grid-4 { grid-template-columns: repeat(3, 1fr); } */


/* ============================================================
   FONT OVERRIDE (任意)
   企画カスタムフォントが必要な場合 — info.inc.php の Google Font
   リンクと合わせて設定する
   ============================================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); */
/* main { font-family: "Noto Serif JP", sans-serif; } */
/* .fontEvent { font-family: "Noto Serif JP", sans-serif !important; } */

.message-container {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 0.27rem;
    letter-spacing: 0.05em;

    margin-top: 0.02rem;
    margin-bottom: 0.20rem;
    text-align: center;
}

.message-container--small-text {
    font-size: 0.15rem;
    margin-top: 0.10rem;
}


/* ============================================================
   SECTION HEAD OVERLAP (任意)
   セクションタイトルを content-holder に被せるレイアウト
   ============================================================ */
/* .section-head-overlap {
    position: relative;
    z-index: 1;
    margin-bottom: -0.40rem;
}
.section-head-overlap + .content-holder {
    padding-top: 0.30rem;
} */


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   base.css 末尾 (line 1106) で .fontNotoSans が var(--font-family) で
   上書きされており、Noto Sans JP に切り替わらない。custom.css は base.css
   の後で読み込まれるためここで実フォント名を強制する。
   caution 系は class 指定有無に関わらず常に Noto Sans JP で固定する
   (本文の event フォントと視覚的に分離するため)。
   ============================================================ */
.caution-wrapper {
    margin: 0 0.1rem;
}

.caution-wrapper--lead {
    margin: 0 0.1rem;
    padding-bottom: 0.05rem;
}

.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
    font-weight: 400;
    line-height: 0.20rem;
    letter-spacing: 0.08em;
}

ul.caution {
    margin: 0;
}

/* ★ 注釈はテンプレと同じぶら下げ（※ は base.css の li::after で左余白に置き、
     折り返した行は ※ の真下ではなく本文の頭に揃える）。
     coding は li::before で ※ をインラインに出していたが、それだと2行目が ※ の下に来る。 */
ul.caution li {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: none;
}

/* ============================================================
   NOVELTY RANDOM — ノベルティ「被りなしランダム」の獲得情報カード（任意機能）
   top.php の $noveltyBadges ブロック用。使わない企画では出力自体が無いので
   このブロックを消す必要はない。仕様は assets/docs/21_novelty-random.md。

   ★ 色（枠のグラデ・文字色）は企画のデザインに合わせて上書きすること。
     ここに入っているのは precure2026 の値で、雛形としての置き場所に過ぎない。
   ★ 獲得済み画像とロック画像は **透明余白込みの見た目の大きさを揃える**。
     素材の余白が違うと、獲得したものだけ小さく見える（precure2026 で発生）。
   ============================================================ */
.badge-card {
    position: relative;
    border-radius: 0.2rem;
    padding: 0.15rem;
    background: #ffffff;
    border: 0.03rem solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(180deg, #C8A7EB 0%, #6BD6EA 100%);
}

.badge-title {
    font-family: var(--font-family);
    font-size: 0.25rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 0 0.15rem;
    color: var(--color-text);
}

.badge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.12rem;
    margin: 7% auto 1%;
}

/* 1行4個。種類数が 5 / 6 の企画は width を calc(33.333% - …) などに変える */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06rem;
    width: calc(25% - 0.09rem);
    box-sizing: border-box;
}

.badge-circle {
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.badge-name {
    color: var(--color-text1);
    font-size: 0.14rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* 今回の引換券で当たった1種（引換前に何が当たるか分かるようにする） */
.badge-hit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.10rem;
    margin: 5% auto 3%;
}

.badge-hit .badge-circle {
    width: 0.90rem;
    height: 0.90rem;
}

.badge-hit__text {
    text-align: left;
}

.badge-hit__label {
    color: var(--color-text1);
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.6;
}

.badge-hit__name {
    color: var(--color-text);
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 1.4;
}


/* ============================================================
   抽選 v2: 本日参加済み（lost）の活性ボタンの2行目（「抽選結果を見る」）
   top.php の .lotteryDone。overthesun-obatabi02 と同じ見た目。
   ============================================================ */
.lotteryDone__sub {
    display: block;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0.02rem;
}


/* ============================================================
   ASK PROMPT MODAL タイトル帯の角 — 削除しないこと（2026-09-26）
   ★ base.css は外枠 .askPromptModal__content が「角丸 0.12rem ＋ 枠 0.01rem」、
     タイトル帯 .askPromptModal__title が「0.12rem 0.12rem 0 0」。
     枠線の内側の角丸は 0.12 − 0.01 ≒ 0.11rem なので、帯を 0.12rem で丸めると
     左上・右上に隙間（白い欠け）が出る。帯の角丸を内側に合わせて小さくする。
   ★ base.css は共有なので触らず、ここ（custom.css）で上書きする。
   ============================================================ */
.askPromptModal__title {
    border-radius: 0.10rem 0.10rem 0 0;
}


/* ============================================================
   1. p-hero
   ============================================================ */
.bannerImg {
    margin-bottom: 0.20rem;
}

/* ============================================================
   2. p-intro
   ============================================================ */
.p-intro {
    margin-bottom: 0.20rem;
}

.p-intro .content-holder {
    border: 0.12rem solid var(--color-sub5);
    padding: 0.18rem 0.13rem 0.03rem 0.13rem;
}

.toStamprally {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 4.00rem;
    border-radius: 0.10rem;
    border: 0.02rem solid var(--color-black);
    padding: 0.08rem 0.05rem;
    margin: 0.15rem auto;

    color: var(--color-black);
    font-size: 0.20rem;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 0.27rem;
    letter-spacing: 0.05em;

    background: var(--color-white);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    min-height: 0.80rem;
}

.toStamprally:active {
    transform: scale(0.96);
}

/* ============================================================
   3. Shinkansen In-car Voice
   ============================================================ */
.p-shinkansen {
    margin-bottom: 0.20rem;
}

/* ============================================================
   4. Wallpaper
   ============================================================ */
.p-wallpaper {
    margin-bottom: 0.20rem;
}

.award-label {
    display: block;
    width: 1.04rem;
    height: 0.30rem;
    text-align: center;
    margin-inline: auto;

    background-color: var(--color-sub1);
    color: var(--color-main);

    font-family: var(--font-serif);
    font-size: 0.20rem;
    font-weight: 900;
    line-height: 0.27rem;
    letter-spacing: 0.06em;
}

.img-holder {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.20rem;
}

.img-holder img {
    display: block;
    width: 1.25rem;
    height: auto;
}

.message-container--quiz-top {
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 0.27rem;
    letter-spacing: 0.05em;

    /* margin-top: 0.02rem; */
    margin-bottom: 0.20rem;
    text-align: center;
}

.toTopPage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 3.80rem;
    min-height: 0.55rem;
    border-radius: 0.10rem;
    border: 0.02rem solid var(--color-black);
    box-sizing: border-box;
    margin: 0.20rem auto;
    color: var(--color-black);
    font-size: 0.20rem;
    font-family: var(--font-sans);
    font-weight: 700;
    background: var(--color-white);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.toTopPage:active {
    transform: scale(0.96);
}

/* ============================================================
   5. Exchange
   ============================================================ */
.message-container--small-spacing {
    letter-spacing: 0.02em;
}

.description-first {
    display: block;
    width: calc(100% + 0.4rem);
    margin-left: -0.2rem;
}

.img-holder-bonus img {
    display: block;
    width: 3.80rem;
    height: auto;
    margin: 0 auto;
    margin-bottom: 0.05rem;
}

.caution.img-holder-bonus {
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 0.20rem;
}

.caution.img-holder-bonus li {
    padding: 0;
}

/* 画像下の中央寄せ注記だけは ※ をインラインで出す（ぶら下げにすると中央からずれる） */
.caution.img-holder-bonus li::before {
    content: "※";
}

.caution.img-holder-bonus li::after  {
    content: none;
}

.validity-note {
    margin: 0.1rem auto;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 0.20rem;
    letter-spacing: 0.05em;
    text-align: center;
}

/* ============================================================
   5a. Exchange box
   ============================================================ */
.exchange-info {
  border: 0.01rem solid var(--color-button);
  background: var(--color-main);
  font-family: var(--font-serif);
  margin-bottom: 0.20rem;
}

.exchange-title {
  padding: 0.20rem 0.30rem;
  border-bottom: 0.01rem solid var(--color-button);

  font-size: 0.23rem;
  font-weight: 900;
  line-height: 0.25rem;
  letter-spacing: 0.05em;
  text-align: center;
}

.exchange-content {
  padding: 0 0.14rem;
}

.exchange-section {
  padding: 0.20rem 0;
  text-align: center;
}

.exchange-section + .exchange-section {
  border-top: 0.01rem solid var(--color-button);
}

.exchange-label {
    display: inline-block;
    margin-bottom: 0.10rem;
    width: 0.87rem;
    height: 0.30rem;
    border: 0.01rem solid var(--color-button);

    font-size: 0.16rem;
    font-weight: 700;
    line-height: 0.27rem;
    letter-spacing: 0.06em;
    text-align: center;
}

.exchange-section p {
    margin: 0 0 0.2rem;

    font-size: 0.18rem;
    font-weight: 700;
    line-height: 0.25rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.exchange-section p:last-child {
  margin-bottom: 0;
}

.exchange-notes {
  padding: 0.2rem 0;
  border-top: 0.01rem solid var(--color-button);
}

/* ============================================================
   6. START SPEED MEASUREMENT
   ============================================================ */
.speed-panel {
    position: relative;
    width: 3.70rem;
    height: 5.76rem;
    margin: 0 auto;
    padding: 0.1045rem 0.0943rem;

    background: rgba(255, 255, 255, 0.245);
    border-radius: 0.15rem;
}

.speed-panel::before {
    content: "";
    position: absolute;
    inset: 0.1rem;

    border: 0.0209rem solid var(--color-main);
    border-radius: 0.15rem;

    pointer-events: none;
}

/* TRAIN */
.speed-panel__train {
    position: absolute;

    width: 2.3437rem;
    height: auto;

    top: 0.9513rem;
    left: 50%;
    transform: translateX(-50%);
}


/* BUTTON */
.speed-panel__button {
    position: absolute;

    width: 2.9348rem;
    height: 0.8418rem;

    top: 3.1361rem;
    left: 50%;
    transform: translateX(-50%);

    background: var(--color-button);
    border: 0.01rem solid var(--color-main);
    border-radius: 0.1045rem;

    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.24rem;
    font-weight: 700;
    line-height: 0.31rem;
    letter-spacing: 0;
    text-align: center;
}

.speed-panel__button-sub {
    font-size: 0.1982rem;
    line-height: 0.26rem;
}


/* LOGO */
.speed-panel__logo {
    position: absolute;

    width: 0.8487rem;
    height: auto;

    right: 0.2244rem;
    bottom: 0.2718rem;
}

/* ============================================================
    7. SPEED MEASUREMENT
   ============================================================ */
/* METER */
.speed-panel__meter {
    position: absolute;

    width: 3.2598rem;
    height: auto;

    top: -0.1rem;
    left: 50%;
    transform: translateX(-50%);
}

.speed-panel__content {
    position: absolute;
    top: 2.1417rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.speed-panel__title {
    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.25rem;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
}

.speed-panel__description {
    width: 2.94rem;
    margin-left: 0.05rem;
    margin-bottom: 0.12rem;

    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

.speed-panel__location-link {
    color: var(--color-sub2);
    font-family: var(--font-sans);
    font-size: 0.13rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

.speed-panel__loading-icon {
    width: 0.53rem;
    height: auto;
    margin-top: 0.3031rem;
    margin-inline: auto;
}

.speed-panel__status {
    margin: 0;
    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.12rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

/* ============================================================
    9. Quiz Question
   ============================================================ */
.p-quiz-question .content-holder {
    border: 0.12rem solid var(--color-sub1);
}

.quiz-title {
    color: var(--color-sub1);
    font-family: var(--font-serif);
    font-size: 0.36rem;
    font-weight: 900;
    line-height: 0.45rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.quiz {
    width: 100%;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Answer */

.quiz-option {
    display: block;
    cursor: pointer;
}

.quiz-option input {
    display: none;
}

.quiz-option__content {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 0.5rem;

    background: var(--color-main);
    border: 0.02rem solid var(--color-button);
    padding: 0.1rem 0;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.2rem;
    font-weight: 700;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: center;
}

/* Selected answer */

.quiz-option input:checked + .quiz-option__content {
    background: var(--color-sub1);
    border-color: var(--color-sub1);
    color: var(--color-main);
}

/* Submit button */

.quiz-submit {
    display: block;

    width: 2.77rem;
    height: 0.39rem;
    margin: 0.20rem auto 0;
    padding: 0.045rem 0;

    border: 0;
    background: var(--color-sub1);

    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: 0.2rem;
    font-weight: 700;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: center;

    cursor: pointer;
}

/* Disabled state */

.quiz-submit:disabled {
    background: #B2B2B2;
    cursor: default;
}

/* Question counter */

.quiz-progress {
    margin: 0.20rem -0.06rem 0;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 500;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: right;
}

/* ============================================================
    10. Quiz below 100
   ============================================================ */
.p-quiz-below-100 .content-holder {
    border: 0.12rem solid var(--color-sub1);
    text-align: center;
}

.quiz-score {
    margin-top: 0.44rem;
    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 0.50rem;
    letter-spacing: 0.05em;
}

.quiz-score span {
    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.57rem;
    font-weight: 900;
    line-height: 0.50rem;
    letter-spacing: 0.05em;
}

.quiz-result {
    margin-top: 0.25rem;
    margin-bottom: 0.20rem;
    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.24rem;
    font-weight: 900;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
}

.message-container--quiz-score {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 0.25rem;
    letter-spacing: 0.05em;

    margin-bottom: 0.20rem;
    text-align: center;
}

.quiz-retry {
    display: block;

    width: 2.77rem;
    margin: 0 auto;
    padding: 0.125rem 0.55rem;

    border: none;
    background: var(--color-button);

    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: 0.20rem;
    font-weight: 900;
    line-height: 0.30rem;
    text-align: center;

    cursor: pointer;
}

/* ============================================================
    11. Quiz score 100
   ============================================================ */
.p-quiz-score-100 .content-holder {
    border: 0.12rem solid var(--color-sub1);
    text-align: center;
}

.quiz-score--full {
    color: var(--color-sub1);
}

.quiz-score--full span {
    color: var(--color-sub1);
}

.quiz-result--full {
    color: var(--color-sub1);
}

/* ============================================================
    12. Get Certificate
   ============================================================ */
.p-get-certificate .content-holder {
    border: 0.12rem solid var(--color-sub1);
    text-align: center;
}

.certificate-image img {
    display: block;
    width: 2.60rem;
    margin: 0 auto;
    margin-top: 0.10rem;
}

.certificate-instruction {
    margin: 0.20rem 0;
    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.voice-list {
    border-top: 0.01rem solid var(--color-button);
    margin-top: 0.2rem;
}

.voice-period {
    display: flex;
    align-items: center;
    gap: 0.2rem;

    margin: 0.20rem 0;
    font-family: var(--font-serif);
    font-size: 0.22rem;
    font-weight: 900;
    line-height: 0.25rem;
    letter-spacing: 0.05em;
}

.voice-period__label {
    color: var(--color-sub1);
}

.voice-period__date {
    color: var(--color-button);
}

.voice-item + .voice-item {
    margin-top: 0.2rem;
}

.disabled--voice {
    max-width: 3.80rem;
    height: 0.80rem;
    border-radius: 0.10rem;
    background: #B2B2B2;
    margin: 0 auto 0.10rem;
}

.disabled--voice::before {
    content: '';
    position: absolute;
    inset: 0.01rem;
    border-radius: 0.10rem;
    pointer-events: none;
}

/* ============================================================
    13. Get Exchange
   ============================================================ */
.p-exchange {
    margin-bottom: 0.28rem;
}

.certificate-badge {
    display: flex;
    align-items: center;
    gap: 0.196rem;

    padding: 0.23rem 0.19rem 0.23rem 0.16rem;

    background: var(--color-sub1);
}

.certificate-badge__icon {
    width: 0.744rem;
    height: auto;
}

.certificate-badge__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
}

.certificate-badge__label {
    padding: 0 0.20rem;

    background: var(--color-main);
    border-radius: 1rem;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
}

.certificate-badge__title {
    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.27rem;
    font-weight: 700;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
}

.content-holder--exchange {
    background-image: url("../img/brick.webp");
    background-size: 4.3rem;
    background-repeat: repeat;
    background-color: #BFBFBF;
    width: 100%;
    max-width: 4.3rem;
    border: 0;
    margin: 0;
    border-top: 0;
    padding: 0.47rem 0.13rem 0.48rem 0.13rem;
}

.exchange-duration {
    display: block;
    text-align: center;

    padding: 0.20rem 0;

    background: var(--color-sub1);

    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.25rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

.exchange-slider {
    text-align: center;
    margin:0.24rem 0.15rem;
}

.exchange-slider__shop {
    margin: 0 0.15rem;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.24rem;
    font-weight: 700;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

.exchange-slider__instruction {
    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 500;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

/* Slider track */
.exchange-slider__track {
    position: relative;

    width: 4.0rem;
    height: 0.58rem;

    margin: 0.13rem auto;

    background: #C6C6C6;
    border-radius: 1rem;

    overflow: hidden;
}

/* Draggable black part */
.exchange-slider__handle {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.27rem;
    height: 0.58rem;

    background: var(--color-button);
    border-radius: 1rem;

    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;

    cursor: grab;

    user-select: none;
    touch-action: none;
}

.exchange-slider__handle:active {
    cursor: grabbing;
}

/* Bottom text */
.exchange-slider__text {
    margin-bottom: 0.13rem;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 400;
    line-height: 0.30rem;
    letter-spacing: 0.06em;
}

.exchange-info-wrapper {
    display: auto;
    width: 3.80rem;
    height: 4.95rem;
    margin: 0 auto;
}

/* ============================================================
    14. Stamp Rally
   ============================================================ */

/* stamp info */
.stamp-info {
    /* position: relative;
    width: 3.80rem;
    padding: 0.13rem 0.17rem 0.30rem 0.20rem;
    border: 0.01rem solid var(--color-button);
    background: var(--color-main); */
    position: relative;
    width: 3.80rem;

    padding: 0.01rem;

    background: var(--color-button);
}

.stamp-info__inner {
    padding: 0.13rem 0.17rem 0.30rem 0.20rem;

    background: var(--color-main);

    clip-path: polygon(
        0.38rem 0,
        calc(100% - 0.38rem) 0,

        100% 0.38rem,
        100% calc(100% - 0.38rem),

        calc(100% - 0.38rem) 100%,
        0.38rem 100%,

        0 calc(100% - 0.38rem),
        0 0.38rem
    );
}

/* TITLE */
.stamp-info__title img {
    display: block;
    width: 1.97rem; 
    max-width: 100%;
    height: auto;
    margin: 0 auto 0.12rem;
}

/* NOTICE */
.stamp-info__notice {
    margin-bottom: 0.14rem;
    padding: 0.165rem 0;

    background: #E5EBF5;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.12rem;
    font-weight: 700;
    line-height: 0.1216rem;
    letter-spacing: 0.05em;
    text-align: center;
}

/* TWO COLUMNS */
.stamp-courses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem;
}

/* COURSE TITLE */
.course-title-img {
    display: block;
    width: 1.64rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Course colours */
.stamp-course--red {
    color: var(--color-sub6);
}

.stamp-course--green {
    color: var(--color-sub7);
}

/* LIST */
.stamp-list {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;

    margin-top: 0.06rem;
}

/* LOCATION */
.stamp-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 0.35rem;
    padding-left: 0.10rem;

    border-radius: 0.05rem;

    font-family: var(--font-serif);
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 0.1861rem;
    letter-spacing: 0.05em;
}

/* Different column backgrounds */
.stamp-course--red .stamp-item {
    background: #E9E0E0;
}

.stamp-course--green .stamp-item {
    background: #DAE1DB;
}

/* COMMON SPOT */
.stamp-common {
    position: absolute;
    right: 0.07rem;
    top: 50%;

    transform: translateY(-50%);

    width: 0.30rem;
    height: 0.28rem;
    padding: 0.02rem 0.015rem;

    border-radius: 0.05rem;

    color: var(--color-main);
    font-family: var(--font-sans);
    font-size: 0.10rem;
    font-weight: 400;
    line-height: 0.1161rem;
    letter-spacing: 0.05em;
    text-align: center;
}

/* SPOT COLORS */
.stamp-common--red {
    background: #DC4C4C;
}

.stamp-common--blue {
    background: #0360B6;
}

.stamp-common--yellow {
    background: #B5AB20;
}

.stamp-common--purple {
    background: #852BAC;
}

/* stamp-location-map */
.simpleButton--stamp-location-map {
    width: 3.80rem;
    height: 0.50rem;
}

.simpleButton--stamp-location-map span{
    width: 2.34rem;
    margin-left: 0.10rem;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.16rem;
    font-weight: 900;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap
}

.stamp-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 0.35rem;
    padding-left: 0.10rem;
    /* 2行のスポット名（大阪府立／中之島図書館 等）が上下の枠に付くので少し空ける（2026-10-02 指示） */
    padding-top: 0.01rem;
    padding-bottom: 0.01rem;
    border-radius: 0.05rem;

    overflow: hidden;

    font-family: var(--font-serif);
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 0.1861rem;
    letter-spacing: 0.05em;
}

/* RED course acquired */
.stamp-course--red .stamp-item.is-acquired {
    background: var(--color-sub6);
}

/* GREEN course acquired */
.stamp-course--green .stamp-item.is-acquired {
    background: var(--color-sub7);
}

/* Dim location name */
.stamp-item.is-acquired > span:first-child {
    opacity: 0.2;
    color: var(--color-main);
}

/* Dim common spot */
.stamp-item.is-acquired .stamp-common {
    opacity: 0.2;
}

/* 取得済 image */
.stamp-acquired {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 75%;

    width: 0.64rem;
    height: auto;

    transform: translate(-50%, -50%)
}

/* Voice Area */
.voice-area-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.voice-area--common {
    --voice-color: #033662;
    --voice-gradient-top: #555;
    --voice-gradient-bottom: #000;
}

.voice-area--red {
    --voice-color: var(--color-sub6);
    --voice-gradient-top: #c94b4b;
    --voice-gradient-bottom: #651616;
}

.voice-area--green {
    --voice-color: var(--color-sub7);
    --voice-gradient-top: #18804b;
    --voice-gradient-bottom: #173f30;
}

.voice-area {
    width: 3.8rem;
    margin: 0 auto;
    border: 0.01rem solid var(--voice-color);
    background: var(--color-main);
}

.voice-area__title {
    padding: 0.05rem;

    border-bottom: 0.01rem solid var(--voice-color);

    color: var(--voice-color);
    font-family: var(--font-serif);
    font-size: 0.18rem;
    font-weight: 900;
    line-height: 0.20rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.voice-spot-wrapper {
    margin: 0.07rem 0 0.2rem 0;
}

.voice-spot {
    padding: 0.1rem 0.1rem 0.03rem 0.1rem;
    border-bottom: 0.01rem solid #9F9F9F;
}

.voice-spot:last-child {
    border-bottom: 0;
}

.voice-spot__name {
    margin-bottom: 0.05rem;

    color: var(--voice-color);
    font-family: var(--font-serif);
    font-size: 0.22rem;
    font-weight: 900;
    line-height: 0.3rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.voice-spot__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 0.78rem;
    padding: 0 0.23rem;

    border: 0;
    background: linear-gradient(
        180deg,
        var(--voice-gradient-top),
        var(--voice-gradient-bottom)
    );

    color: #fff;
    font-family: var(--font-serif);
    font-size: 0.2rem;
    font-weight: 700;
}

.voice-spot__button img {
    display: block;
    width: 0.25rem; 
    max-width: 100%;
    height: auto;
    margin: 0 auto 0.12rem;
}

.voice-spot__note {
    margin: 0;
    padding-top: 0.03rem;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.15rem;
    font-weight: 400;
    line-height: 0.3rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.caution-wrapper--voice-area {
    margin: 0.20rem 0 0 0;
}

/* Course Reward */

.course-reward {
    padding-top: 0.2rem;
}

/* TITLE */
.course-reward__title {
    border-bottom: 0.02rem solid var(--color-sub3);
}

.course-reward__title img {
    display: block;
    width: 2.84rem;
    max-width: 100%;
    height: auto;
    margin: 0.3rem auto 0.19rem;
}

.course-reward__description {
    margin: 0.19rem auto 0.30rem;
}

/* Reward image */
.course-reward__visual {
    display: block;
    width: 3.8rem; 
    max-width: 100%;
    height: 2.53rem;
    margin: 0 auto;
    position: relative;

    background-image: url("../img/brick.webp");
    background-size:contain;
    background-position: center;
    background-color: #F0F6FF;
}

.course-reward__image {
    display: block;
    width: 3.4rem; 
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 0.21rem;
}

.course-reward__captions {
    position: relative;
    height: 0.5rem;
}

.course-reward__caption {
    position: absolute;
    margin: 0;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.0965rem;
    font-weight: 900;
    line-height: 0.1361rem;
    letter-spacing: 0.02em;
    text-align: center;
}

.course-reward__caption--eren {
    left: 0.3rem;
    width: 1.55rem;
}

.course-reward__caption--levi {
    right: 0.13rem;
    width: 1.7rem;
}

.course-reward__note {
    text-align: center;
    margin: 0.05rem auto 0.2rem;

    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.12rem;
    font-weight: 400;
    line-height: 0.20rem;
    letter-spacing: 0;
    text-align: center;
}

/* Exchange Location */
.reward-exchange__location {
    border: 0.01rem solid var(--color-button);
    background: var(--color-main);
    margin-bottom: 0.3rem;
}

.reward-exchange__location-title {
    padding: 0.2rem 0;
    border-bottom: 0.01rem solid #000;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.23rem;
    font-weight: 900;
    line-height: 0.25rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.reward-exchange__location-content {
    padding: 0.2rem 0;
    text-align: center;
}

.reward-exchange__shop {
    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.23rem;
    font-weight: 700;
    line-height: 0.25rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.reward-exchange__hours {
    margin-top: 0.05rem;

    color: var(--color-button);
    font-family: var(--font-serif);
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 0.25rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.reward-exchange__notes {
    margin: 0.2rem 0 0 0.07rem;
}

.reward-exchange__course-title {
    padding: 0.07rem;
    margin-bottom: 0.17rem;

    border: 0.01rem solid currentColor;
    background: var(--color-main);

    font-family: var(--font-serif);
    font-size: 0.18rem;
    font-weight: 900;
    line-height: 0.20rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.reward-exchange__course + .reward-exchange__course {
    margin-top: 0.3rem;
}

.reward-exchange__course--red {
    color: var(--color-sub6);
}

.reward-exchange__course--green {
    color: var(--color-sub7);
}

/* stamp rally reset */
.simpleButton--stamprally-reset {
    width: 3.31rem;
    height: 0.55rem;
    background-color: var(--color-button);
    margin: 0.20rem auto;
}

.simpleButton--stamprally-reset span{
    width: 2.51rem;
    margin-left: 0.10rem;

    color: var(--color-main);
    font-family: var(--font-serif);
    font-size: 0.20rem;
    font-weight: 700;
    line-height: 0.30rem;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap
}

.reset-condition {
    color: var(--color-button);
    font-family: var(--font-sans);
    font-size: 0.12rem;
    font-weight: 700;
    line-height: 0.20rem;
    letter-spacing: 0.05em;
}

.reset-condition p {
    margin: 0;
}

.reset-condition__list {
    padding-left: 0.12rem;
}

/* ============================================================
   coding 由来の追加（実装時に移植）
   ・.icon-map … coding の base.css に追記されていたもの。base.css は編集しないのでこちらへ
   ・.iconButton の左右アイコン枠 … coding の各 HTML の <head> にあった指定（文字をボタン中央に揃える）
   ============================================================ */
.icon-map {
  width: 0.22rem;
  height: auto;
}

.iconButton .icon,
.iconButton .icon2nd {
    flex: 1.5;
}

/* スタンプラリーのリセット（条件未達で disabled）。デザインの非活性＝グレー地。
   形は活性時と同じで色だけ .iconButton[disabled] と同じグレーにする */
.simpleButton--stamprally-reset:disabled,
.simpleButton--stamprally-reset[disabled] {
    background: linear-gradient(to right, gray, darkgray);
    /* base.css の黒い枠 0.02rem がグレー地だと太く見えるので透明に（幅は残して形を変えない） */
    border-color: transparent;
    cursor: default;
}


/* コース踏破特典ページのリセット条件（.completedSlider の文字サイズを継承しないよう固定） */
.exchangePage .reset-condition {
    margin: 0.10rem 0 0.06rem;
}

.exchangePage .reset-condition p {
    margin: 0;
    font-size: 0.12rem;
    line-height: 0.20rem;
}

/* 乗車証明ボタンの直後に注釈が来るとき（有効期限の行が無い＝未取得・引換済み）の余白。
   有効期限の行（.validity-note）がある場合と同じ 0.10rem 空ける */
.p-exchange .iconButton.mainButton + ul.caution {
    margin-top: 0.10rem;
}

/* ログイン後の INTRO（新規登録・ログインの塊が無く「キャンペーンサイト一覧」ボタンが先頭）
   ボタンの上 margin 0.15 が枠の padding 0.18 に足されて上だけ空きすぎるので 0 にし、
   下（最後のボタンの margin＋枠の padding）と揃える。車内・現地トップ共通。
   未ログイン時は先頭が注意書き（.caution-wrapper--lead）なので効かない。 */
.p-intro .content-holder > .toOshitabiTop:first-child {
    margin-top: 0;
}

/* 引換ページ（certificate/single.php・stamprally/exchange/completed.php）の「トップページに戻る」
   .simpleButton は coding で Noto Serif（var(--font-serif)）。このページだけ周りの Sans と揃える（2026-10-02 指示） */
.exchangePage .simpleButton.backButton {
    font-family: var(--font-sans);
}

/* 引換ページでは引換場所の箱が注意書きの直後に来て詰まるので上を空ける
   （トップでは画像下の注記の margin-bottom 0.20rem で空いているのと同じ幅） */
.exchangePage .exchange-info,
.exchangePage .reward-exchange {
    margin-top: 0.20rem;
}

/* 語のまとまりを崩さずに折り返すための部品（狭い画面ではこの単位で改行される）。クイズの説明文で使用 */
.text-chunk {
    display: inline-block;
}