@charset "UTF-8";



/* ============================================================
   BRAND COLORS — コーディング支給 custom.css の :root をそのまま採用
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景（実際の地は .page-content の #F0ECE5） */
    --color-sub1:   #5A3F28;   /* ブラウン：ログイン/新規登録ボタン・枠線 */
    --color-sub2:   #EF7301;   /* オレンジ：主要ボタン地 */
    --color-sub3:   #5BADBC;   /* ティール：現地セクション・現地ボタン地 */
    --color-sub4:   #EE9034;   /* オレンジ（薄）：セクション地 */
    --color-sub5:   #80CCDA;   /* ライトブルー：セクション地 */
    --color-local:  #FFB963;   /* 差し色（イントロ地） */
    --color-text:   #5A3F28;   /* テキストカラー */
    --color-button: #EF7301;   /* ボタンカラー */
    --font-family:  'Zen Maru Gothic', YakuHanJP, sans-serif;
}


/* ============================================================
   TYPOGRAPHY SCALE — コーディングが base.css の :root を書き換えていたぶん
   ★ base.css は共有ファイルなので触らず、差分だけここへ移設する
     （2026-09 toukenranbu-kanei2026 と同じ対応）。
   ============================================================ */
:root {
    --fs-base: 0.15rem;
    --fs-md:   0.18rem;
    --fs-lg:   0.20rem;
    --fs-xl:   0.22rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.35rem;
}


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

   ★ <button> / <input> / <select> / <textarea> は **UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない**。
     :root の --font-family や body に企画フォントを入れても
     **ボタンの文字だけ Arial のまま**になる。
   ★ **ヘッドレス Chrome では再現しない**ので、ローカル描画だけで
     「効いている」と判断しないこと。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.narrowIconButton .narrowIconButtonText,
.rectangleButton .rectangleButtonText,
.toOshitabiTop,
.simpleButton,
.whiteButton,
.oshitabiButton {
    font-family: var(--font-family);
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾で .fontNotoSans が
   var(--font-family) に上書きされているので実フォント名を強制する。
   注意書き（ul.caution）は常に Noto Sans JP で固定。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   CONTENT-HOLDER — 共通 CSS の影を消す（削除しないこと）
   グローバルの /css/style_v2.css が .content-holder に
   box-shadow: 0 0 0.03rem #ccc を当てている。base.css にも custom.css にも
   書いていないので grep では見つからない。
   ============================================================ */
.content-holder {
    box-shadow: none;
}


/* ============================================================
   PAGE BASE — 地色・画像の既定
   ============================================================ */
.page-content {
    background: #F0ECE5;
}

.page-content img {
    margin: auto;
}

.page-content img.mountainGraphic {
    margin-top: 5%;
}

.content-holder {
    background: none;
    margin: 5% auto;
    padding: 3%;
    padding-top: 1%;
    border: none;
    border-radius: 0.1rem;
}


/* ============================================================
   SECTIONS — 山グラフィックで区切る帯
     p-intro           オレンジ（車内トップ）
     p-intro.lightblue ライトブルー（現地トップ）
     p-shinkansen      オレンジ（現地トップ）
     p-shinkansen.teal ティール（車内トップ）
     p-external        特典引換ブロック
   ============================================================ */
.p-intro {
    background: #FFB963;
}

.p-intro.lightblue,
.p-external.lightblue {
    background: #80CCDA;
    margin-top: -0.01rem;
}

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

.p-shinkansen {
    background: #EE9034;
}

.p-shinkansen.teal {
    background: #5BADBC;
}

.p-external {
    padding-bottom: 5%;
}

.paddingB {
    padding-bottom: 5%;
}

.marginB {
    margin-bottom: 10%;
}


/* ============================================================
   TEXT
   ============================================================ */
.p-intro .message-container {
    line-height: 0.32rem;
    letter-spacing: 0;
    font-size: 0.17rem;
}

.message-container {
    line-height: 0.25rem;
    letter-spacing: 5%;
}

ul.caution {
    line-height: 1.8;
}

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


/* ============================================================
   IMAGES
   ============================================================ */
.page-content img.title-image {
    width: 90%;
    margin: auto;
}

img.charmImg {
    margin: 5% auto;
}

.titleImg {
    width: 90%;
    margin: auto;
}


/* ============================================================
   BUTTONS
     .iconButton          … 主要ボタン（オレンジ地・点線の内枠）
     .iconButton.blueBg   … 現地の位置情報ボタン（ティール地）
     .loginRgisterButton  … ログイン / 新規登録（ブラウン地）
     .toOshitabiTop       … 白地の枠ボタン（キャンペーンサイト一覧 / 別フェーズへの遷移）
     .restButton          … ボイスラリーのリセット（角丸小・枠なし）
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.5rem;
    box-shadow: none;
    background: var(--color-sub2);
}

.page-content .iconButton.blueBg {
    background: var(--color-sub3);
}

.iconButton.button-bg {
    background: var(--color-sub2);
}

.iconButton .iconButtonText {
    font-weight: 700;
    font-family: var(--font-family);
}

.iconButton::before {
    border-radius: 0.5rem;
    inset: 0.04rem;
    border-image-source: url('../img/dotted.svg');
    border-image-slice: 36 fill;
    border-image-width: 0.36rem;
}

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

.iconButton .icon {
    flex: 1.5;
}

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

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

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

.page-content .iconButton .icon img.cameraIcon {
    width: 0.28rem;
    height: auto;
}

.p-shinkansen .iconButton {
    margin: 4% auto 1%;
}

.p-external .giftButton .iconButtonText {
    font-size: 0.17rem;
}

.loginRgisterButton.button-bg {
    position: relative;
    border-radius: 0.1rem;
    padding: 0.3rem 0.05rem;
    box-shadow: none;
    color: #fff;
    background: var(--color-sub1);
}

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

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

/* コーディング支給どおり。白地の枠ボタンは「キャンペーンサイト一覧」も
   「別フェーズへの遷移」も **同じ .toOshitabiTop**（寸法は base.css が持つ）。
   ★ 見た目が同じ別クラスを自作しない。base.css の値を手写しすると必ずズレる
     （text-lg 0.20rem を --fs-md 0.18rem で写して実際にズレた）。
     遷移先の出し分けは .switchPage / .toParentPhase を足して JS 側で除外する。 */
.toOshitabiTop {
    border-color: var(--color-sub1);
    margin-top: 5%;
}

.restButton {
    height: 0.55rem;
    width: 90%;
}

.iconButton.restButton::before {
    border-image: none;
    border: none;
}

.restButton .icon {
    flex: 1;
}

.page-content .restButton .icon img {
    width: 0.22rem;
    height: auto;
    margin-right: -15%;
}


/* ============================================================
   DISABLED — 形は活性時のまま、色だけグレー
   （opacity は落とさない・box-shadow:none にしない）
   コーディング支給の指定をそのまま採用。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #b2b2b2 !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    border-radius: 0.5rem;
    opacity: 1;
}

.restButton[disabled].button-bg,
.restButton:disabled.button-bg,
.restButton.disabled.button-bg {
    border-radius: 0.1rem;
}

/* disabled の点線内枠も灰に落とす（枠だけ活性色で残らないように） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    filter: grayscale(1) brightness(1.6);
}


/* ============================================================
   EXCHANGE PAGE — 引換ページ（certificate/single.php・
   stamprally/exchange/completed.php）だけの打ち消し

   ★ certificate/css/certificate.css は共通ファイルなので書き換えない。
     base.css / custom.css の**後**に読まれるので、ここで親クラスを前置して
     特異度を上げて固定する。
   ============================================================ */

/* 確認モーダル（askPromptModal）の色を **そのページのスライダー色** に揃える。

   base.css は枠・タイトル帯・「はい」「いいえ」を全部 var(--color-button)（#EF7301）
   固定で塗る一方、certificate.css は `#yesBtn { background: var(--cert-btn1) !important }`
   だけを上書きしている。結果、スライダーをティールにした現地の引換ページでは
   「はい」だけティール・枠とタイトル帯はオレンジ、という不一致になる。

   ★ --cert-btn1 は各引換ページの inline <style> で設定される値なので、
     この1ブロックで「車内=オレンジ / 現地=ティール」が自動的に揃う。
     色をベタ書きすると、どちらか一方が必ずズレる。
   ★ .exchangePage（body クラス）で囲っているので、
     stamprally/top.php のリセット確認モーダルには影響しない。
   ★ base.css / certificate.css は共有ファイルなので触らない。 */
.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;
}

/* 注意書きが太字になる問題。
   certificate.css の `.completedSlider { font-weight: 700 }` を ul.caution が
   継承してしまい、同じ部品なのにトップ（.content-holder 配下＝400）と
   引換ページで太さが変わる。certificate.css の ul.caution は font-weight を
   持たないので、ここで明示して揃える。 */
.completedSlider ul.caution,
.completedSlider ul.caution li,
.completedSlider ul.caution li a {
    font-weight: 400;
}

/* ============================================================
   REDEEM LOCATION BOX — 「特典引換期間・場所」の白枠
   車内トップ / 現地トップ / 引換ページ（certificate・exchange）で共用する。
   ★ 引換ページに持ち込むとき、この部品に自前の width / margin を付けない
     （.completedSlider が左右 0.20rem の padding を持つので二重インデントになる）。
   ============================================================ */
.LocationRedeemRewards {
    background-color: #fff;
    border: solid 0.01rem var(--color-sub2);
    margin: 2% 2% 5%;
}

.LocationRedeemRewardsTitle {
    padding: 2%;
    border-bottom: solid 0.01rem var(--color-sub2);
}

.LocationRedeemRewardsBody {
    border-bottom: solid 0.01rem var(--color-sub2);
    padding: 2% 0;
    line-height: 0.27rem;
    margin: 0 2%;
}

.LocationRedeemRewardsBody:last-child {
    border-bottom: none;
}

.LocationRedeemRewardsBody ul.caution {
    text-align: left;
    margin-top: 0;
    color: #000;
}

.LocationRedeemRewardsShop {
    font-size: var(--fs-lg);
    line-height: 0.4rem;
}

.LocationRedeemRewardsNote {
    font-size: 0.14rem;
    line-height: normal;
}


/* ============================================================
   STAMP CARD ROW — 「ボイス獲得情報」（現地トップ）
   4駅ぶんのスタンプを 4 列で並べる。
   ============================================================ */
.rowImgs {
    width: 100%;
    margin: 0 auto 10%;
    border-radius: 0.2rem;
    background-image: url(../img/triangle_pattern_yellow_background.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4% 7%;
}

img.rowsTitleImg {
    margin-bottom: 3%;
}

.rowImg.fourRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.1rem;
    padding: 3% 0;
}

.frameItem {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.frame img {
    width: 0.64rem;
    height: auto;
}

.frameItem .name {
    font-size: 0.14rem;
    line-height: 0.18rem;
    margin-top: 7%;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    box-sizing: border-box;
    text-wrap: balance;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 440px) {
    .text-lg {
        font-size: 0.19rem;
    }

    .p-intro .message-container {
        font-size: 0.16rem;
    }
}