@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    /* coding（codings/custom.css）の値。デザイン支給が正本 */
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #2D4061;   /* 紺（page-content 地・content-holder 破線） */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;

    /* ★ 文字サイズの段は coding 側の base.css の値に揃える（base.css は触らず custom.css で上書き）。
         テンプレ base.css（r42384）は md 0.16 / lg 0.18 だが、デザインは md 0.18 / lg 0.20 で組まれている。 */
    --fs-base: 0.15rem;
    --fs-md:   0.18rem;
    --fs-lg:   0.20rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.27rem;
}


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


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


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

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


/* ============================================================
   ▼ ここから企画デザイン（codings/custom.css を移植。値は coding のまま）
   ============================================================ */

/* ------------------------------------------------------------
   DISABLED — 非活性は「形は活性とまったく同じ・色だけグレー」
   ★ coding は border:none / box-shadow:none にしていたが、規約（形を変えない・
     影を消さない・opacity を落とさない）に合わせて枠色だけ灰に落とす。
   ★ 非活性の指定はこの1ブロックに集約（二重定義にしない）。
   ------------------------------------------------------------ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(180deg, #A6A6A6, #6F6F6F) !important;
    color: #fff !important;
    border-color: #8C8C8C;
    pointer-events: none !important;
    cursor: default !important;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: white !important;
}

.p-shinkansen .iconButton[disabled] .icon img {
    width: 0.20rem;
}

.page-content {
    background: #2D4061;
    padding-bottom: 3%;
}

.page-content img {
    margin: auto;
}

.content-holder {
    position: relative;
    margin: 5% auto;
    padding: 3% 3% 5%;
    border-radius: 0;
    border-top: #2D4061 0.02rem dashed;
    border-bottom: #2D4061 0.02rem dashed;
    border-left: none;
    border-right: none;
    background: #FBF8F0;
}

.p-intro .content-holder {
    padding-top: 0;
    margin-bottom: 0;
}

.p-shinkansen .content-holder {
    margin-bottom: 0;
}

.p-shinkansen .content-holder,
.p-external .content-holder {
    margin-top: 0;
}

.p-external .content-holder {
    padding-top: 0;
}

.p-external .titleImgBg {
    padding-bottom: 0;
}

.loginRgisterButton {
    padding: 0.3rem 0.05rem;
}

.loginRgisterButton.button-bg {
    position: relative;
    border: solid #E9BC13 0.01rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #BF2000, #7A0100);
}

/* ★ inset ショートハンドは古い iOS Safari で効かないので top/right/bottom/left で書く */
.loginRgisterButton.button-bg::before {
    content: '';
    position: absolute;
    top: 0.02rem;
    right: 0.02rem;
    bottom: 0.02rem;
    left: 0.02rem;
    border: 0.01rem solid #E9BC13;
    border-radius: 0.5rem;
    pointer-events: none;
}

ul.caution {
    line-height: 1.8;
}

ul.paddingLeft {
    padding-left: 2%;
}

.marginbottom {
    margin-bottom: 5%;
}

.iconButton {
    height: 0.80rem;
    border-radius: 0.50rem;
    border: solid #E9BC13 0.01rem;
}

.iconButton.button-bg {
    background: linear-gradient(180deg, #BF2000, #7A0100);
}

.iconButton::before {
    top: 0.02rem;
    right: 0.02rem;
    bottom: 0.02rem;
    left: 0.02rem;
    border: 0.01rem solid #E9BC13;
    border-radius: 0.5rem;
}

.noIconBg {
    height: 0.5rem;
    border: none;
}

.noIconBg.button-bg {
    background: linear-gradient(180deg, #E1B657, #AD8325);
}

.noIconBg::before {
    top: 0.03rem;
    right: 0.03rem;
    bottom: 0.03rem;
    left: 0.03rem;
    border: 0.01rem solid white;
}

.noIconBg .iconButtonText {
    font-size: 0.18rem;
}

.message-container {
    line-height: 1.8;
    background: linear-gradient(180deg, #76401D, #3B2415);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.loginRgisterButton .icon img {
    height: 0.20rem;
}

.iconButton .icon img {
    width: 0.20rem;
    height: 0.20rem;
}

.iconButton .icon {
    flex: 1.5;
}

.page-content .iconButton .icon img.trainIcon {
    width: 0.30rem;
    height: auto;
}

.page-content .iconButton .icon img.qrIcon {
    width: 0.22rem;
    height: auto;
}

.iconButton .icon2nd img {
    height: 0.26rem;
    width: auto;
}

/* ★ coding の url(./img/…) は custom.css からの相対なので assets/img を指すよう ../img に直す */
.titleImgBg {
    background-image: url(../img/brush_stroke_navy.webp);
    background-size: 134% 150%;
    background-position: center;
    padding: 5% 0;
}

.region-card {
    display: flex;
    gap: 0.1rem;
    padding: 7% 0;
    align-items: stretch;
}

.region-thumb {
    flex: 0.8;
    width: 0.9rem;
    height: auto;
}

.region-thumb img {
    width: 0.9rem;
}

.region-info {
    flex: 2.5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 2%;
}

.region-info .message-container {
    text-align: left;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 4%;
}

.region-card .iconButton {
    height: 0.74rem;
    margin-bottom: 0;
}

.region-card .iconButton .iconButtonText {
    text-align: end;
    margin-right: 10%;
}

.p-external .message-container {
    font-size: 0.17rem;
}

.yellowButton {
    border: none;
}

.yellowButton.button-bg {
    background: linear-gradient(180deg, #E1B657, #AD8325);
}

.yellowButton::before {
    top: 0.04rem;
    right: 0.04rem;
    bottom: 0.04rem;
    left: 0.04rem;
    border: 0.01rem solid white;
}

/* 「キャンペーンサイト一覧はこちら！」= coding の .yellowButton に JS フック .toOshitabiTop を付けたもの。
   base.css の .toOshitabiTop（白地・黒枠・黒文字）が後勝ちで混ざるので、iconButton 側の値に戻す */
.iconButton.yellowButton.toOshitabiTop {
    padding: 0.05rem;
    margin: 0.16rem auto 0.12rem;
    min-height: 0;
    color: #fff;
}

@media (max-width: 460px) {
    .p-external .message-container {
        font-size: 0.16rem;
    }

    .text-base {
        font-size: 0.14rem;
    }
}


/* ============================================================
   ▼ 下層ページ（coding 支給なし → トップのトンマナを展開）
     serialcode/index.php（プロモーションコード）・wallpaper/checkin.php（現地壁紙）
     参考: assets/jrc-mhn2026/コード取得画面.jpg / reference_design.jpg
   ============================================================ */

/* 下層の白ブロックは上端から（トップの帯画像が無いので上マージンを詰めない） */
.p-sub .content-holder {
    margin-top: 0.12rem;
    margin-bottom: 0;
}

.p-sub .sub-title {
    margin: 0.10rem auto 0.08rem;
    line-height: 1.5;
}

.p-sub .sub-title-line {
    display: block;
    width: 100%;
    height: 0.02rem;
    margin: 0.06rem auto 0.12rem;
    background: linear-gradient(90deg, #E1B657, #AD8325);
}

.p-sub .sub-expire {
    margin: 0 auto 0.08rem;
    font-size: var(--fs-base);
}

/* プレゼント画像（コード取得画面） */
.p-sub .promo-visual {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 0.14rem;
}

/* コード表示枠（赤枠・白地・右に赤い「コピー」） */
.p-sub .promo-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.08rem;
    width: 100%;
    max-width: 3.60rem;
    margin: 0.10rem auto 0.12rem;
    padding: 0.10rem 0.12rem 0.10rem 0.16rem;
    box-sizing: border-box;
    background: #fff;
    border: 0.01rem solid #9B1A0B;
    border-radius: 0.06rem;
}

.p-sub .promo-code__text {
    flex: 1;
    min-width: 0;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.24rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    text-align: center;
    word-break: break-all;
}

.p-sub .promo-code__copy {
    display: flex;
    align-items: center;
    gap: 0.03rem;
    flex-shrink: 0;
    padding: 0.05rem 0.10rem;
    border: 0;
    border-radius: 0.06rem;
    background: linear-gradient(180deg, #BF2000, #7A0100);
    color: #fff;
    font-size: 0.13rem;
    font-weight: 700;
    cursor: pointer;
}

.p-sub .promo-code__copy img {
    display: block;
    width: 0.13rem;
    height: auto;
    margin: 0;
    filter: brightness(0) invert(1);
}

.p-sub .promo-soldout {
    margin: 0.20rem auto;
}

/* 注意書き（本文色・左寄せ） */
.p-sub ul.caution {
    margin: 0.06rem auto 0.12rem;
    color: #1a1a1a;
}

.p-sub ul.caution a {
    color: #1D6FD1;
    text-decoration: underline;
}

/* 現地壁紙：画像（未取得は ? プレースホルダ・9:19.5） */
.p-sub .wallpaper-view {
    display: block;
    width: 64%;
    height: auto;
    margin: 0.10rem auto 0.12rem;
    border: 0.01rem solid #E1B657;
}

/* 「※画像を長押しで保存できます。」は1行なのでブロックごと中央に置く（※のぶら下げは維持） */
.p-sub ul.caution.wallpaper-note {
    display: table;
    margin: 0 auto 0.06rem;
}

/* 下層の「トップページに戻る」（トップの .yellowButton と同じ金ボタン） */
.p-sub .backButton {
    margin: 0.20rem auto 0.10rem;
    height: 0.56rem;
}

.p-sub .backButton .iconButtonText {
    font-size: 0.18rem;
}