@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — VIVANT × JR東海
   coding/custom.css（トップのデザイン再現）を rem のまま移植し、
   テンプレ共通ブロック（noIcon ボタン / disabled / Noto Sans 強制）を足したもの。
   base.css は触らない。
   REM: デザイン px ÷ 100 = rem
   ============================================================ */


/* ============================================================
   BRAND COLORS — coding の値（トップの見た目が前提）
   ・見出しは赤（.color-text）、本文は content-holder 側の white。
   ・下層ページ（quiz / wallpaper / certificate）は body.subPage で
     仕様書の表の値（地=#0c0c0c・文字=#fff）に切り替える（下の SUB PAGE 節）。
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色（トップは bg.webp が乗る） */
    --color-sub1:   #D71A18;   /* メインカラー（赤：ボタン・ボーダー・見出し） */
    --color-sub2:   #860100;   /* サブカラー（濃赤：グラデーション端） */
    --color-sub3:   #870201;   /* アクセント濃 */
    --color-sub4:   #d61a18;   /* アクセント */
    --color-sub5:   #e8f1f8;   /* 薄背景（未使用） */
    --color-local:  #D71A18;   /* 差し色 */
    --color-text:   #D71A18;   /* 見出しカラー（coding: color-text = 赤） */
    --color-button: #D71A18;   /* ボタンカラー */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   PAGE BACKGROUND / CONTENT HOLDER（coding）
   ============================================================ */
.page-content {
    background-image: var(--image-bg);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat-y;
    padding-bottom: 3%;
}

.page-content img {
    margin: auto;
}

.p-intro,
.p-shinkansen,
.p-external {
    position: relative;
    margin: auto;
}

.content-holder {
    position: relative;
    width: 95%;
    margin: 5% auto;
    padding: 5% 3%;
    border-radius: 0;
    border: 0.01rem solid var(--color-sub1);
    background: #0C0C0C;
    color: white;
    box-shadow: unset;
}

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

.line {
    border-bottom: solid white 0.02rem;
    margin: 5% 1%;
}

/* 開催期間（文字データ「開催期間 2026年9月16日(水)〜11月27日(金)」）— coding の .dateText */
.dateText {
    margin: 3% auto;
    padding: 3% 0;
    border-bottom: solid white 0.02rem;
    border-top: solid white 0.02rem;
}

.page-content img.marginTopImg {
    margin-top: 3%;
}

/* 壁紙の枡。獲得後はタップで壁紙ページへ飛ぶので、押せることが分かるようにする */
.page-content img.switchPage {
    cursor: pointer;
}

.message-container {
    line-height: 1.8;
}

.marginbottom {
    margin-bottom: 5%;
}

ul.caution {
    line-height: 1.8;
}

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

ul.caution li a {
    color: #00DAFF;
}


/* ============================================================
   BUTTONS（coding: 角丸なし・濃赤→赤の横グラデ・内側白枠なし）
   ============================================================ */
.loginRgisterButton {
    padding: 0.3rem 0.05rem;
    border-radius: 0;
}

.loginRgisterButton.button-bg {
    background: linear-gradient(90deg, var(--color-sub2) 0%, var(--color-sub1) 100%);
}

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

.toOshitabiTop {
    border: solid 0.02rem var(--color-sub1);
    color: black;
    border-radius: 0;
}

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

.iconButton.button-bg {
    background: linear-gradient(90deg, var(--color-sub2) 0%, var(--color-sub1) 100%);
}

.iconButton::before {
    display: none;
}

.iconButton .icon {
    flex: 1.5;
}

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

/* 車内コンテンツのボタンはアイコンを大きめに（coding） */
.p-shinkansen .iconButton .icon img {
    width: 0.28rem;
    height: auto;
}

.p-shinkansen .iconButton .icon .shinkansenIcon {
    width: 0.42rem;
    height: auto;
}

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

.iconButton .text-md {
    font-size: 0.18rem;
}


/* ============================================================
   BUTTON — アイコン無しの細長ボタン（.loginRgisterButton.noIcon）
   クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／結果画面に戻る）。
   ★ アイコンを付けないときは左右とも省略する（19_button-icons.md）。
   ============================================================ */
button.loginRgisterButton {
    border: 0;
    font-family: inherit;
    font-size: inherit;
}

.loginRgisterButton.noIcon {
    padding: 0.15rem 0.05rem;
}

.loginRgisterButton.noIcon .iconButtonText {
    margin-left: 0;
    margin-right: 0;
}


/* ============================================================
   DISABLED — 形は活性と同じ・色だけグレー（1ブロックに集約）
   coding の gray グラデ（#909090→#B2B2B2）を採用。opacity は落とさない。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(90deg, #909090 0%, #B2B2B2 100%) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
}


/* ============================================================
   特典引換カード（coding: tk-*）— トップと引換ページで同じマークアップを使う
   ============================================================ */
/* ★ トップ（.content-holder = 黒地・白文字）と引換ページ（.completedSlider = 白地・黒文字）の
     両方で **同じ見た目**にするため、カード自身に地色と文字色を持たせる。
     持たせないと引換ページだけ白地・黒文字になり「ページ間で別物」になる。 */
.tk-card {
    border: solid 0.01rem var(--color-sub1);
    margin: 5% auto;
    background: #0C0C0C;
    color: #fff;
}

/* 引換ページの .completedSlider は color:#030303 を持つので、カード内の文字はすべて白に戻す */
.tk-card,
.tk-card .tk-content-block,
.tk-card .tk-label,
.tk-card ul.caution,
.tk-card ul.caution li {
    color: #fff;
}

.tk-header {
    background-color: var(--color-sub1);
    padding: 2% 0;
}

.tk-body-pad {
    padding: 5%;
    padding-bottom: 0;
}

.tk-labelBg {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: 'a';
}

.tk-label {
    grid-area: a;
    padding: 1% 0;
}

.tk-labelImg {
    grid-area: a;
    /* ★ 引換ページ（certificate/single.php）の main は .page-content ではなく
         .completedContainer なので、custom.css の `.page-content img { margin:auto }` が効かない。
         そのため帯だけ左寄せになり、中央寄せの文字と中心がズレていた（約14px）。
         グリッドアイテムとして自分で中央に置き、どのページでも同じ位置にする。 */
    justify-self: center;
    max-width: 100%;
}

.tk-content-block {
    padding: 5% 0;
}

/* 引換期間は1行に収める（coding のインライン指定をクラス化） */
.tk-period {
    white-space: nowrap;
    font-size: 0.17rem;
}


/* ============================================================
   SUB PAGE — 下層ページ（quiz / wallpaper / certificate）
   仕様書の表の値（--color-main #0c0c0c / --color-text #fff）に切り替える。
   ・body に class="subPage" を付ける。
   ・content-holder はトップと同じ黒地＋赤枠。文字は白。
   ============================================================ */
body.subPage {
    --color-main: #0c0c0c;
    --color-text: #ffffff;
}

/* 下層の見出し（赤）— color-text が白に変わるので見出しには専用クラス */
.subPage .headline-red,
.headline-red {
    color: var(--color-sub1);
}

/* クイズ結果の点数（base は sub2=濃赤で黒地に沈むので赤に） */
.subPage .score__number {
    color: var(--color-sub1);
}

.subPage .result__text {
    color: var(--color-sub1);
}

/* クイズ開始画面のコース名（文字データ「ドラムコース」）。
   ★ 難易度（★☆☆）は文字データに無いので出さない＝トップの difficulty_level_*.webp は
     ここでは使わず、コース名だけをテキストで出す。トップの帯（両サイドの赤線）に合わせる。 */
.courseLabel {
    display: flex;
    align-items: center;
    gap: 0.10rem;
    width: 92%;
    margin: 0.14rem auto 0.10rem;
    font-weight: 800;
    font-size: 0.22rem;
    line-height: 1.4;
    color: var(--color-white);
    white-space: nowrap;
}

.courseLabel::before,
.courseLabel::after {
    content: '';
    flex: 1;
    height: 0.01rem;
    background-color: var(--color-sub1);
}

/* クイズ結果画面：100点・2回目以降の状態テキスト（文字データ「本日分獲得済み」） */
.wallpaperGotNote {
    text-align: center;
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 1.6;
    color: var(--color-sub1);
    margin: 0.10rem auto 0.02rem;
}

/* 壁紙 DL ページの画像は 9:19.5 のまま幅を決める */
.subPage #imageToSave,
.subPage .wallpaperLocked {
    width: 70%;
    margin: 0.15rem auto;
    display: block;
}

/* 壁紙画像直下の中央キャプション（「※画像を長押ししてダウンロード」）。
   ※込みの1行なので ul.caution ではなく中央キャプションとして扱う。 */
.wallpaper-caption {
    text-align: center;
    font-weight: 500;
    line-height: 1.6;
    margin: 0.06rem auto 0.12rem;
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css の .fontNotoSans 上書きバグ回避
   caution 系は class 指定有無に関わらず常に 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;
}