@charset "UTF-8";

/* ============================================================
   custom.css — JR東海×ドズル社『東海道新幹線でドズル社からの学力テストに挑戦』

   支給コーディング（docs/project/assets/dozle/coding/）をそのまま移植したもの。
   ★ base.css は編集しない。上書きは全てこのファイルで行う。
   ★ 単位は rem（デザイン px ÷ 100）。
   ★ コーダーが base.css の --fs-* を直接書き換えていたため、
     ここで同じ値を再定義して base.css を無改変に戻している（下記 TYPO SCALE）。
   ============================================================ */


/* ============================================================
   BRAND COLORS
     sub1 / sub2 / text / button / main … coding の custom.css の値
     sub3 / sub4 / sub5 / local        … 仕様書の指定値
       sub4 #733C93 … 引換場所ボックス 第1弾（紫）
       sub5 #FCC700 … 引換場所ボックス 第2弾（黄）
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #D20001;   /* メインカラー（赤：枠・見出し） */
    --color-sub2:   #730000;   /* サブカラー（濃赤：ボタン枠） */
    --color-sub3:   #1D1D1D;   /* アクセント（黒） */
    --color-sub4:   #733C93;   /* 引換場所ボックス（紫） */
    --color-sub5:   #FCC700;   /* 引換場所ボックス（黄） */
    --color-local:  #C80000;   /* 差し色 */
    --color-text:   #960000;   /* テキストカラー */
    --color-button: #C80000;   /* ボタンカラー */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   TYPO SCALE — coding の base.css で書き換えられていた値をここで再現
   （base.css 本体は最新テンプレのまま無改変にするため）
   ============================================================ */
:root {
    --fs-sm:   0.12rem;
    --fs-base: 0.15rem;
    --fs-md:   0.17rem;
    --fs-lg:   0.20rem;
    --fs-xl:   0.23rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.27rem;
}


/* ============================================================
   FONT — 本文既定は Noto Sans JP（base.css の既定は M PLUS Rounded 1c）
   ============================================================ */
body,
main,
.fontEvent,
.fontEvent *,
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   PAGE — 背景（トップ・クイズ・動画・引換で共通のトンマナ）
   ============================================================ */
.page-content {
    background-image: var(--image-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 3%;
}

.page-content img {
    margin: auto;
}


/* ============================================================
   CONTENT HOLDER — 赤の細枠・角丸なし（デザイン再現）
   下層ページ（quiz / video / certificate）にも同じ枠が乗る。
   ============================================================ */
.content-holder {
    position: relative;
    margin: auto;
    margin-top: 0.10rem;
    padding: 3% 3% 5%;
    padding-top: 4.5%;
    z-index: 1;
    overflow: hidden;
    border-radius: 0;
    border: 0.01rem solid var(--color-sub1);
}

/* content-holder を中央に置くだけの透明ラッパー（quiz / certificate が使用）
   ★ position:relative は corner-tag（absolute）の基準。トップの各セクション
     （.p-intro 等）と同じ関係にしておく。 */
.content-holder-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* トップの各セクションは corner-tag の基準にするため relative */
.p-intro,
.p-shinkansen,
.p-quiz,
.p-external,
.p-certificate {
    position: relative;
    margin: auto;
}

/* KV 左上の飾り（bgKvLeft）。セクション左上に重ねる */
.corner-tag {
    position: absolute;
    top: 0;
    left: 2%;
    width: 1.16rem;
    height: 0.78rem;
    background-image: url(../img/bgKvLeft.webp);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    pointer-events: none;
    z-index: 2;
}

/* 区切り線 */
.line {
    border-bottom: solid var(--color-sub1) 0.02rem;
    margin: 5% 1%;
}

.p-shinkansen .line,
.p-quiz .line {
    margin: 2.5% 1% 5%;
}

.p-external .line,
.p-certificate .line {
    margin: 4% 8%;
}


/* ============================================================
   TITLE / CHARACTER IMAGES
   ============================================================ */
.titleImg {
    width: 92%;
}

.page-content .CharaImg {
    margin: 5% auto 0;
    width: 94%;
}

.page-content .p-external .CharaImg,
.page-content .p-certificate .CharaImg {
    width: 110%;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.10rem;
    border: solid 0.03rem var(--color-sub2);
}

/* デザインに内側の白枠は無いので ::before を消す */
.iconButton::before {
    display: none;
}

.iconButton .icon {
    flex: 1.5;
}

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

.p-shinkansen .iconButton .icon img,
.p-quiz .iconButton .icon img {
    width: 0.28rem;
    height: auto;
}

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

.loginRgisterButton {
    border: solid var(--color-sub2) 0.03rem;
    padding: 0.27rem 0.05rem;
}

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

/* <button> で使うときのブラウザ既定リセット（トップは <div>、クイズは <button>）。
   ★ color は指定しない（.white-text より詳細度が高く、白文字を打ち消してしまう）。 */
button.loginRgisterButton {
    font-family: inherit;
    font-size: inherit;
}

/* アイコン無しの細長ボタン（ouran/quiz 準拠）。
   クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／結果画面に戻る）に使う。
   ★ 左アイコンを省くときは右の right.svg も省く（片側だけ省略は禁止・19_button-icons.md）。 */
.loginRgisterButton.noIcon {
    padding: 0.15rem 0.05rem;   /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}

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

.toOshitabiTop {
    border: solid 0.02rem var(--color-sub2);
    color: var(--color-sub2);
}


/* ============================================================
   DISABLED — 形は活性とまったく同じで色だけグレー
   （opacity を落とさない・box-shadow を消さない。指定は 1 ブロックに集約）
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #A1A1A1 !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    border: #838383 solid 0.03rem;
    border-radius: 0.10rem;
    opacity: 1;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    display: none;
}

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


/* ============================================================
   CAUTION（注意書き）
   ============================================================ */
ul.caution {
    line-height: 1.8;
}

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

.marginbottom {
    margin-bottom: 5%;
}


/* ============================================================
   乗車特典（ノベルティ）— 赤いカード
   ============================================================ */
.redContentHolder {
    background-color: var(--color-sub1);
    border-radius: 0.10rem;
    margin: 0 1%;
    padding: 2%;
    margin-bottom: 7%;
}

.redContentHolder .text-base {
    font-size: 0.13rem;
}

.noveltyImgText {
    width: 94%;
    margin: auto;
    margin-bottom: 2%;
    line-height: 2;
}


/* ============================================================
   特典引換期間・場所
   ============================================================ */
.p-external .content-holder,
.p-shinkansen .content-holder,
.p-quiz .content-holder,
.p-certificate .content-holder {
    padding-top: 4.5%;
}

.p-external .content-holder,
.p-certificate .content-holder {
    padding-bottom: 0;
}

.LocationRedeemRewards {
    width: 100%;
    margin: 5% auto;
    margin-top: 0;
}

.LocationRedeemRewardsTitle {
    text-align: center;
    background-color: var(--color-sub1);
    color: white;
    padding: 2%;
}

.p-external .LocationRedeemRewardsHolder,
.p-certificate .LocationRedeemRewardsHolder {
    margin-top: 0;
    padding: 0;
}

.LocationRedeemRewardsInfo {
    margin: 3% 4%;
    border-radius: 0.10rem;
    border: solid 0.04rem var(--color-sub4);
}

.LocationRedeemRewardsDate {
    background-color: var(--color-sub4);
    padding: 1%;
}

.LocationRedeemReward {
    padding: 2% 5%;
}

.LocationRedeemRewardCity {
    line-height: 2;
    border-bottom: solid #000 0.01rem;
    margin-bottom: 7%;
}

.city {
    font-size: 0.16rem;
    border: solid #000 0.01rem;
    width: 20%;
    margin: auto;
    line-height: 1.7;
}

/* 第2弾（黄色） */
.yellowLocation {
    border-color: var(--color-sub5);
}

.yellowLocation .LocationRedeemRewardsDate {
    background-color: var(--color-sub5);
}

.LocationRedeemRewardsHolder .giftButton {
    margin: 1% 4%;
    width: 92%;
}

.LocationRedeemRewardsHolder ul.caution {
    margin: 5% 4%;
}


/* ============================================================
   下層ページ（quiz / video / certificate）へのトンマナ展開
   ★ クイズ固有の見た目（設問・選択肢・結果）は quiz/css/quiz.css に書く。
     読み込み順が base.css → custom.css → quiz.css なので、ここに書いても
     quiz.css に同じセレクタがあると効かない（効かない上書きを残さない）。
   ============================================================ */

/* 結果画面の注記は本文と同じ Noto Sans JP・左寄せぶら下げ */
.resultScreen ul.caution,
.answerScreen ul.caution {
    width: 92%;
    margin: 0.10rem auto 0.16rem;
    text-align: left;
}

/* ★ certificate/css/certificate.css は base.css / custom.css の後に読まれ
     ul.caution の font-size・margin を上書きする。親クラスを前置して特異度を
     上げ、トップと同じ見え方に固定する（certificate.css 自体は書き換えない）。 */
.locationSection ul.caution,
.completedSlider ul.caution {
    font-size: var(--fs-sm);
    line-height: 1.8;
    margin: 0.12rem 0 0;
}