@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #fbfaf0;   /* ページ背景色（背景画像の下地） */
    --color-sub1:   #d59766;   /* 枠線（content-holder） */
    --color-sub2:   #8e413b;   /* メインカラー（えんじ：見出し・強調・ボタン） */
    --color-sub3:   #94bd6c;   /* 緑（見出し飾り） */
    --color-sub4:   #fdd55e;   /* 黄 */
    --color-sub5:   #e8f1f8;   /* 薄青 */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #484231;   /* テキストカラー */
    --color-button: #8e413b;   /* ボタンカラー */
    --color-disabled: #b3b3b3; /* 非活性ボタンの地（デザインの灰） */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
    --font-family-deco: 'Noto Sans JP', 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: inherit;
}

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


/* ============================================================
   SECTION HEADING — テキストセクションタイトル
   ============================================================ */
.section-heading {
    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));
}


/* ============================================================
   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);
}


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


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

   ★ アイコンを付けないときは左右とも省略する。
     .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.noIcon {
    padding: 0.15rem 0.05rem;   /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}

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


/* ============================================================
   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: var(--color-disabled) !important;
    border-color: var(--color-disabled) !important;   /* 活性時のえんじ枠を残さない */
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
}
/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: #ffffff !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; } */


/* ============================================================
   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 フォントと視覚的に分離するため)。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}

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

   ★ 色（枠のグラデ・文字色）は企画のデザインに合わせて上書きすること。
     ここに入っているのは 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;
}


/* ============================================================
   ヘタミュ AUTUMN EDITION — デザイン（design.jpg / LP のトンマナ）
   ★ rem はデザイン px ÷ 100（100px = 1rem）
   ★ 素材は LP の img を webp 化したもの（assets/img/）
   ============================================================ */
.p-hero .bannerImg img {
    width: 100%;
}

/* 白地・薄茶の枠・角丸のカード */
.content-holder {
    width: 94%;
    margin: 0.14rem auto 0;
    padding: 0.16rem 0.14rem 0.14rem;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.10rem;
}

.content-holder .title-img-container {
    margin: -0.04rem auto 0;
}

/* 見出し下の飾り罫（LP の deco_date_t.svg） */
.decoOrnament {
    height: 0.14rem;
    margin: 0.06rem auto 0.10rem;
    background: url(../img/deco_ornament.svg) center / 2.60rem auto no-repeat;
}

/* 開催期間・プリント期間（上に飾り罫・下にレンズ罫。LP の .cont__date と同じ組み） */
.periodBlock {
    color: var(--color-sub2);
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.6;
    text-align: center;
    padding: 0.20rem 0 0.10rem;
    margin: 0.06rem auto 0.12rem;
    background: url(../img/deco_ornament.svg) center top / 2.60rem auto no-repeat,
        url(../img/deco_line.svg) center bottom / 2.60rem auto no-repeat;
}

.periodBlock--noTop {
    padding-top: 0;
    background: url(../img/deco_line.svg) center bottom / 2.60rem auto no-repeat;
}

/* 下層ページの文字見出し（「デザインを選んでください」等） */
.pageTitle {
    color: var(--color-sub2);
    font-weight: 700;
    font-size: var(--fs-xl);
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0.06rem auto 0;
}

/* 説明文（太字・中央） */
.leadText {
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--fs-base);
    line-height: 1.75;
    margin: 0.10rem auto 0.14rem;
}

.leadText.sub2-text {
    color: var(--color-sub2);
}

.leadText__sub {
    font-weight: 500;
}

/* 発行期間・プリント期間 */
.termText {
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--fs-base);
    line-height: 1.75;
    margin: 0 auto 0.14rem;
}

.termText .sub2-text {
    font-size: var(--fs-md);
}

/* ---- ボタン：えんじ地にダマスク柄・白の内枠（デザイン） ---- */
.iconButton,
.iconButton.button-bg,
.loginRgisterButton.button-bg {
    background: url(../img/pattern_damask.png) center top / 0.57rem repeat var(--color-button);
    border-radius: 0.08rem;
    box-shadow: none;
}

.iconButton {
    height: 0.66rem;
    border: 0.02rem solid var(--color-button);
}

.iconButton::before {
    inset: 0.02rem;
    border: 0.01rem solid #ffffff;
    border-radius: 0.05rem;
}

.iconButton .iconButtonText {
    font-weight: 700;
    font-size: var(--fs-md);
    line-height: 1.3;
}

.loginRgisterButton.button-bg {
    position: relative;
    border: 0.02rem solid var(--color-button);
}

.loginRgisterButton.button-bg::before {
    content: '';
    position: absolute;
    top: 0.02rem;
    right: 0.02rem;
    bottom: 0.02rem;
    left: 0.02rem;
    border: 0.01rem solid #ffffff;
    border-radius: 0.05rem;
    pointer-events: none;
}

.loginRgisterButton .iconButtonText {
    font-weight: 700;
}

/* 白地・えんじ枠（キャンペーンサイト一覧・トップページに戻る） */
.toOshitabiTop,
.simpleButton {
    border: 0.02rem solid var(--color-sub2);
    border-radius: 0.08rem;
    color: #000000;
    font-weight: 700;
    background: #ffffff;
}

/* 一覧・履歴ボタン（アイコン無し・えんじ柄）。
   ★ .simpleButton のままにして会期終了後の非活性 CSS（.iconButton 対象）から外す
     ＝プリント期間（〜12/16）中はコード一覧を開ける */
.simpleButton.subButton {
    width: 100%;
    height: 0.56rem;
    margin: 0.06rem auto 0.10rem;
    color: #ffffff;
    border: 0.02rem solid var(--color-button);
    background: url(../img/pattern_damask.png) center top / 0.57rem repeat var(--color-button);
    box-shadow: inset 0 0 0 0.01rem var(--color-button), inset 0 0 0 0.02rem #ffffff;
}

.simpleButton.subButton.disabled,
.simpleButton.subButton[disabled] {
    background: var(--color-disabled);
    border-color: var(--color-disabled);
    box-shadow: inset 0 0 0 0.01rem var(--color-disabled), inset 0 0 0 0.02rem #ffffff;
    pointer-events: none;
    cursor: default;
}

/* 「キャンペーン概要および応募要項」テキストリンク */
.tacLink {
    margin: 0.10rem auto 0.06rem;
    font-weight: 700;
    font-size: var(--fs-md);
}

.tacLink a {
    color: #1a3fc4;
    text-decoration: underline;
}

.content-holder ul.caution {
    color: var(--color-text);
    line-height: 1.6;
}

/* ---- print/choose: 3列グリッド（最終行は中央寄せ） ---- */
.printGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.10rem 0.06rem;
    margin: 0.10rem auto 0.14rem;
}

.printGrid__item {
    width: calc((100% - 0.12rem) / 3);
    text-align: center;
    cursor: pointer;
}

.printGrid__item img {
    width: 100%;
}

.printGrid__name {
    color: #000000;
    font-weight: 700;
    font-size: var(--fs-lg);
    margin-top: 0.04rem;
}

/* ---- print/code・print/history: カード画像＋名前 ---- */
.printCard {
    text-align: center;
    margin: 0.10rem auto;
}

.printCard img {
    width: 100%;
    margin: 0 auto;
}

/* 取得したコード一覧（print/history）はカード画像を小さめに（2026-10-02 ユーザー指定） */
.printCard--small img {
    width: 80%;
}

.printCard__name {
    color: #000000;
    font-weight: 700;
    font-size: var(--fs-lg);
    margin: 0.08rem auto;
}

hr.itemDivider {
    border: 0;
    border-top: 0.01rem solid #484231;
    width: 90%;
    margin: 0.14rem auto;
}

/* ---- entry: 応募ID・識別ID ---- */
.codeLabel {
    color: #000000;
    font-weight: 700;
    font-size: var(--fs-lg);
    text-align: center;
    margin: 0.10rem auto 0.08rem;
}

.content-holder .code-container {
    border: 0.01rem solid var(--color-sub2);
    border-radius: 0.04rem;
    background: #ffffff;
}

.content-holder .code-text {
    color: var(--color-sub2);
    font-weight: 700;
    background: transparent;
}

.content-holder .copyButton {
    background: var(--color-sub2);
    color: #ffffff;
}


/* ============================================================
   乗車確認（check/）・動画プレーヤー（video/）— デザインに合わせる
   ・ページの背景は **DB が正本**（item の bodyColor / video は detail.bodyImage・check は detail.background）。
     ここでは上書きしない（2026-10-02 ユーザー指示）。
   ・カード（測定開始／測定中／プレーヤー）も上書きしない（共有 player.css のまま・2026-10-02 ユーザー指示）
   ============================================================ */
/* ヘッダーはデザインどおり生成り（共有 player.css の半透明グレーをやめる） */
html body.playerBg #mainHeader {
    background-color: var(--color-main) !important;
}


/* ============================================================
   モーダル・アラートの色をトンマナ（えんじ）に揃える（2026-10-02）
   ★ 共有 CSS（base.css / navi_v2.css / player.css / 共通コンポーネントの inline style）は触らず、
     ここで上書きする。player.css・コンポーネントの <style> は custom.css より後に出るページがあるので
     id を前置して特異度を上げ、inline style に勝つ必要があるものだけ !important。
   ★ 確認モーダル（.askPromptModal）は base.css が var(--color-button) で塗るので追加の指定は不要。
   ============================================================ */
/* 確認アラート（ID コピー完了など）。base.css の #alertModal 系は var(--color-tokai) 参照 */
#alertModal {
    --color-tokai: var(--color-sub2);
}

/* 乗車アンケートの送信ボタン（navi_v2.css は東海オレンジのグラデ）。非活性の灰はそのまま */
#surveyModal #survey-submit:not(:disabled) {
    background: var(--color-button);
}

/* プッシュ通知の案内（headNavi の inline style） */
#pushPopupModal a[href*="push-notification"] {
    background: var(--color-button) !important;
}

/* 開始前のパスワードゲート（eventOutOfPeriod の「推し旅へ戻る」「送信」） */
#eventOutOfPeriodOverlay .eventOutOfPeriodOverlay-overlayButton {
    background: var(--color-button);
}

/* 速度測定・プレーヤーのアラート「閉じる」と戻る確認（player.css は #ff7e5f） */
html body #alert-close,
html body #back-close {
    background-color: var(--color-button);
}

/* 動画ページの未ログイン時の「ログイン」誘導（player.css は東海オレンジのグラデ） */
html body #loginLoaderButton {
    background: var(--color-button);
}