@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 逃げ上手の若君 × JR東海
   base.css は触らない。上書きはすべてこのファイルで行う。
   移植元: _admin-voistock/docs/project/assets/nigewaka/coding/custom.css
   ============================================================ */


/* ============================================================
   BRAND COLORS / TYPOGRAPHY
   値はコーディング支給 custom.css の :root が正本。
   ★ --fs-base / --fs-xl はコーダーが本デザイン用に上げているので
     base.css の既定（0.14 / 0.21）をここで戻す。
   ============================================================ */
:root {
    --color-main:    #faf9f5;   /* 和紙背景に合わせた地色（背景画像のフォールバック） */
    --color-sub1:    #af944a;   /* 金：枠線・見出し・区切り線 */
    --color-sub2:    #d65841;   /* 朱：ボタン地 */
    --color-sub3:    #af944a;   /* 金：ダブルボーダー */
    --color-sub4:    #da6954;   /* 朱（明） */
    --color-sub5:    #e8f1f8;
    --color-local:   #f1d511;
    --color-text:    #af944a;   /* .color-text ＝ 金の見出し文字 */
    --color-button:  #af944a;   /* 引換スライダー等の企画色 */
    --color-button1: #fbd513;   /* 現地ボイスボタンの黄 */

    --font-family:      'Noto Serif JP', YakuHanJP, serif;      /* 見出し・本文（.fontEvent） */
    --font-family-deco: 'Noto Sans JP', YakuHanJP, sans-serif;  /* 説明文・注記（.fontNotoSans） */

    --fs-base: 0.15rem;
    --fs-xl:   0.23rem;
}


/* ============================================================
   BACKGROUND — 和紙テクスチャをタイルで敷く
   base.css の main::before は cover 指定なので repeat / auto に戻す。
   画像そのものは info.inc.php の $background（親=bg.webp / 現地=bgYellow.webp）
   から --image-bg 経由で入る。
   ============================================================ */
main::before {
    background: var(--image-bg) repeat top left;
    background-size: auto;
    background-color: var(--color-main);
}


/* ============================================================
   LAYOUT
   ============================================================ */

/* ★ 最後の content-holder とフッターの間の余白。
   base.css は padding-bottom:0 なので入れないとフッターに貼り付く。
   （coding では背景指定と同じ .page-content ブロックに入っていた） */
.page-content {
    padding-bottom: 3%;
}

.p-intro {
    margin: auto;
}

.content-holder {
    margin: auto;
    margin-top: 5%;
    border-radius: 0.10rem;
    padding: 3%;
    padding-top: 1.5%;
    border: 0.03rem solid var(--color-sub1);
}

.p-shinkansen .content-holder {
    margin-top: 2.5%;
    padding-top: 0;
}

.p-external .content-holder {
    margin-top: 2.5%;
    padding-top: 5%;
}

/* セクション見出し画像（東海道新幹線車内コンテンツ 等） */
.titleImg {
    width: 90%;
    margin: 7% auto 0;
}

.p-intro .message-container {
    background-image: none;
}

/* 開催期間などの上下ダブルボーダー */
.borderTopBottom {
    border-top: solid 0.03rem var(--color-sub3);
    border-bottom: solid 0.03rem var(--color-sub3);
    padding: 3.5%;
}

.letterSpace {
    letter-spacing: 0.01rem;
}

.lineHeight {
    line-height: 1.8;
}

.textCenter {
    text-align: center;
}

.font20 {
    font-size: 0.20rem;
}

.marginbottom,
ul.marginbottom {
    margin-bottom: 8%;
}

.topCenter {
    margin-top: -7%;
}


/* ============================================================
   CAUTION（※注記）
   ============================================================ */
ul.caution {
    line-height: 1.8;
}

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


/* ============================================================
   TITLE BANNER — 「オリジナルボイスストーリー」等の帯見出し
   ============================================================ */
.title-banner {
    background-color: #fdfaed;
    border-top: 0.03rem solid var(--color-sub3);
    border-bottom: 0.03rem solid var(--color-sub3);
    padding: 2% 4%;
    position: relative;
    text-align: center;
}

.title-banner::before,
.title-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-sub3);
}

.title-banner::before {
    top: 0.03rem;
}

.title-banner::after {
    bottom: 0.03rem;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.loginRgisterButton {
    padding: 0.30rem 0.05rem;
}

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

.iconButton {
    height: 0.80rem;
    border-radius: 0.10rem;
}

/* デザイン上、内側の白枠は使わない */
.iconButton::before {
    display: none;
}

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

.iconButton .icon {
    flex: 1.5;
}

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

.p-shinkansen .iconButton .icon img {
    width: 0.30rem;
    height: auto;
}

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

.giftButton {
    border-radius: 0.10rem;
}

.p-external .iconButton::before {
    border: none;
}

/* 外枠だけの導線ボタン（キャンペーンサイト一覧 / 他フェーズへの遷移 / 地図） */
.toOshitabiTop,
.phase-nav-btn,
.p-shinkansen .simpleButton {
    border: solid 0.02rem var(--color-sub1);
    color: var(--color-sub1);
}

/* ★ 高さを親トップの2行ボタン（キャンペーンサイト一覧はこちら！）に合わせる。
   現地の「新幹線車内コンテンツはこちら」は1行なので、min-height が無いと
   ページ間でボタンの高さが変わって見える。
   0.20rem × 1.4行送り × 2行 ＋ 上下 padding 0.08rem×2 = 0.72rem */
.toOshitabiTop,
.phase-nav-btn {
    line-height: 1.4;
    min-height: 0.72rem;
}

/* .phase-nav-btn は base.css に定義が無いので .toOshitabiTop と同形にする */
.phase-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 4.00rem;
    border-radius: 0.10rem;
    padding: 0.08rem 0.05rem;
    box-sizing: border-box;
    margin: 0.06rem auto 0.12rem;
    font-size: 0.20rem;
    font-family: var(--font-family);
    font-weight: 800;
    background: var(--color-white);
    user-select: none;
    -webkit-user-select: none;
}

.phase-nav-btn:active {
    transform: scale(0.96);
}

/* 「スタンプスポットを地図で確認」 */
.p-shinkansen .simpleButton {
    color: var(--color-text);
    gap: 0.10rem;
    margin: 4% auto 10%;
    min-height: 0.50rem;
    font-weight: 800;
    background: var(--color-white);
}

.p-shinkansen .simpleButton img {
    width: 0.22rem;
    height: auto;
    display: block;
}


/* ============================================================
   DISABLED — 活性とまったく同じ形で色だけグレーにする
   （角丸・高さ・::before の扱いは活性と共通。opacity は落とさない）
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg,
.locationVoiceSection .iconButton[disabled],
.locationVoiceSection .iconButton.disabled {
    background: #b2b2b2 !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1;
}

/* 黄色ボタン（現地ボイス）の非活性は黒アイコン・黒文字のままだと
   グレー地で沈むので、他の非活性と同じ白文字に揃える */
.locationVoiceSection .iconButton[disabled] .iconButtonText,
.locationVoiceSection .iconButton.disabled .iconButtonText {
    color: #fff;
}

.locationVoiceSection .iconButton[disabled] .icon img,
.locationVoiceSection .iconButton[disabled] .icon2nd img,
.locationVoiceSection .iconButton.disabled .icon img,
.locationVoiceSection .iconButton.disabled .icon2nd img {
    filter: brightness(0) invert(1);   /* 黒アイコン → 白アイコン */
}


/* ============================================================
   特典引換場所ボックス（トップ・引換ページ共通）
   ============================================================ */
.LocationRedeemRewards {
    border: var(--color-sub1) solid 0.01rem;
    margin: 5% auto;
    background: var(--color-white);
}

.LocationRedeemRewardsTitle {
    text-align: center;
    border-bottom: var(--color-sub1) solid 0.01rem;
    padding: 2%;
}

.LocationRedeemRewardsSub {
    padding: 3%;
    padding-top: 0;
}

.LocationRedeemRewardsSub p {
    margin: 3%;
}


/* ============================================================
   スタンプラリー（現地 /stamprally/）
   ============================================================ */
.stampsImgTitle {
    padding: 3.5% 2% 7%;
}

.marginP {
    margin: 1.5% auto 3%;
}

.stampsTitle {
    display: flex;
}

.stampsTitle > div {
    flex: 1 1 0;
    min-width: 0;
}

.stampsTitle img {
    display: block;
    width: 100%;
    height: auto;
}

/* ★ 素材の余白が状態で違う。未取得 249x224（円は 223px＝左右13pxが透明余白）／
   取得済み 200x200（円が全面）。同じ width:100% にすると取得した瞬間に
   スタンプだけ約11%大きくなるので、取得済みだけ余白ぶん（223/249≒89.6%）
   縮めて円の大きさを揃える。枠のサイズと行の高さは coding のまま。 */
.stampsTitle .isUnlocked img {
    width: 89.6%;
    margin: 0 auto;
}

.locationVoiceSection {
    margin: 7% auto 8%;
}

.locationVoice {
    border-bottom: solid #9f9f9f 0.01rem;
    padding-bottom: 0.03rem;
    margin-bottom: 5%;
}

.locationVoiceSection .iconButton {
    background: var(--color-button1);
    color: black;
    box-shadow: none;
}

.locationVoiceSection .iconButton .icon img {
    width: 0.22rem;
    height: auto;
}

/* スタンプラリーをリセット
   ★ 活性は他の遷移ボタン（.iconButton.button-bg）と同じ朱、非活性は他の非活性
     ボタンと同じ #b2b2b2。クラス名は coding 由来のまま（対応が追えるように）。
   （coding は活性状態しか無かったが、活性と非活性が同じグレーだと
     「押せる／押せない」が見分けられないため色を分ける） */
.grayButton {
    width: 85%;
    margin: auto;
    background: var(--color-sub2);
    color: white;
    border: none;
    min-height: 0.55rem;
    gap: 0.10rem;
    font-weight: 800;
    font-size: 0.20rem;
    border-radius: 0.10rem;
}

.grayButton img {
    width: 0.22rem;
    height: auto;
    display: block;
}

.grayButton[disabled],
.grayButton.disabled {
    background: #b2b2b2;
    color: #fff;
    pointer-events: none;
    cursor: default;
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾で .fontNotoSans が
   var(--font-family) に上書きされるため、ここで実フォント名を強制する。
   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;
}

.fontEvent {
    font-family: 'Noto Serif JP', YakuHanJP, serif !important;
}


/* ============================================================
   MAP モーダル（/stamprally/map/）— 現地トップと見た目を揃える
     ・ボイスボタンの地色は黄 (--color-button1)・文字とアイコンは黒
     ・スポット名／注記は黒（トップのスポット名と同じ）
   ============================================================ */
#location-detail-voice.iconButton,
#location-detail-button.iconButton {
    background: var(--color-button1);
    box-shadow: none;
}

#location-detail-voice .iconButtonText,
#location-detail-voice .iconButtonText.white-text,
#location-detail-button .iconButtonText,
#location-detail-button .iconButtonText.white-text {
    color: #000;
}

#location-detail-voice .icon img,
#location-detail-button .icon img {
    width: 0.22rem;
    height: auto;
}

#location-detail-title,
#location-detail-voice-note {
    color: #000;
}

/* 前提スポット未達（④京都駅）の非活性。トップの黄色ボタン非活性と同じ見た目に揃える */
#location-detail-voice.iconButton.disabled .iconButtonText {
    color: #fff;
}

#location-detail-voice.iconButton.disabled .icon img,
#location-detail-voice.iconButton.disabled .icon2nd img {
    filter: brightness(0) invert(1);
}


/* ============================================================
   引換ページ（certificate/single.php・stamprally/exchange/completed.php）
   ★ .obiLight … 帯（--cert-obi）を明るい色にしたページ用。
     certificate.css は帯の上を白文字前提（.completedHeader .completed / .time が
     color:#fff）なので、黄色帯だと文字が読めない。黒に落とす。
   ★ custom.css は certificate.css より先に読まれるので、body のクラスを
     前置して特異度で勝たせる（certificate.css は書き換えない）。
   ============================================================ */
.obiLight .completedHeader .completed,
.obiLight .time,
.obiLight .time .playedDate,
.obiLight .time .tillDate {
    color: #000;
}

.obiLight .completedHeader .courseName {
    color: #000;
}