@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — わく鉄スタンプラリー 第7弾
   base.css のデフォルトを上書き＋企画固有スタイルを追記する。
   base.css 本体は触らない。rem 換算: デザイン px ÷ 100 = rem（393px 基準）。
   ============================================================ */


/* ============================================================
   BRAND COLORS（仕様書指定）
   ============================================================ */
:root {
    --color-main: #d3f1ff;
    /* ページ背景（淡い水色） */
    --color-sub1: #1d6add;
    /* メイン（青） */
    --color-sub2: #21adde;
    /* サブ（水色） */
    --color-sub3: #f0b622;
    /* アクセント（黄／ゴールド） */
    --color-sub4: #cf201e;
    /* アクセント濃（赤） */
    --color-sub5: #dae9ff;
    /* 薄青背景 */
    --color-local: #f1d511;
    /* 差し色（黄） */
    --color-text: #1a1a2e;
    /* テキスト（濃紺） */
    --color-button: #cf201e;
    /* ボタン（赤） */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;

    /* 見出し・数字に使うピクセルフォント（DotGothic16・Google Fonts）。
       PixelMplus10 は Google Fonts に無いため、日本語ピクセル風の DotGothic16 を採用。
       本文は可読性のため Noto Sans JP のまま。 */
    --font-pixel: 'DotGothic16', 'Noto Sans JP', sans-serif;
}


/* ============================================================
   PIXEL FONT — 見出し・アクセント・数字に適用
   ============================================================ */
.font-pixel,
.wk-section-title,
.wk-point-num,
.wk-event-num,
.wk-prize__tag {
    font-family: var(--font-pixel) !important;
    letter-spacing: 0.02em;
}


/* ============================================================
   BUTTONS — 8-bit / ピクセル風（DotGothic16 + 角カット + 硬い影）
     ・border-radius:0 ＋ clip-path で四隅を少し削いだ“ピクセル角”に
     ・ブラー無しのドロップシャドウ（clip 形状に追従）で立体感
     ・文字はピクセルフォント、:active で押し込み
   ============================================================ */
.iconButton,
.simpleButton,
.loginRgisterButton {
    border-radius: 0.10rem !important;
    filter: drop-shadow(0.04rem 0.04rem 0 rgba(26, 26, 46, 0.45));
}

/* 内側の白い線（base.css の ::before）はピクセルでは不要なので消す */
.iconButton::before {
    display: none !important;
}

/* ボタン文字をピクセルフォントに */
.iconButton .iconButtonText,
.simpleButton,
.loginRgisterButton .iconButtonText {
    font-family: var(--font-pixel) !important;
    letter-spacing: 0.04em;
}

/* 押し込み（8-bit 風） */
.iconButton:active,
.simpleButton:active,
.loginRgisterButton:active {
    transform: translate(0.02rem, 0.02rem);
    filter: drop-shadow(0.02rem 0.02rem 0 rgba(26, 26, 46, 0.45));
}

/* disabled（押せないことを明示） */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
    filter: none;
}


/* ============================================================
   CONTENT-HOLDER — wk-event-banner と同じ枠（白ボーダー・角丸・硬い影）
   背景だけは白のまま。
   ============================================================ */
.content-holder {
    background: #fff;
    border: 0.03rem solid var(--color-sub2);
    border-radius: 0.16rem;
    box-shadow: 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.18);
}


/* ============================================================
   SECTION TITLE — ピクセル見出し（濃い背景に白文字）
   ============================================================ */
.wk-section-title {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0.14rem 0.16rem;
    color: #fff;
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
}

.wk-section-title small {
    display: block;
    font-size: 0.15rem;
}


/* ============================================================
   開催期間バナー — 数字大きく・漢字小さく（可愛い）
   content-holder の外に出してよい。
   ============================================================ */
.wk-event-banner {
    width: 96%;
    max-width: 4.10rem;
    box-sizing: border-box;
    margin: 0.14rem auto;
    padding: 0.12rem 0.10rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--color-sub4) 0%, var(--color-sub3) 100%);
    border: 0.03rem solid #fff;
    border-radius: 0.16rem;
    box-shadow: 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.18);
}

.wk-event-banner__label {
    font-size: 0.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.wk-event-num {
    font-size: 0.30rem;
    font-weight: 700;
    line-height: 1.2;
}

.wk-event-num .k {
    /* 漢字（年・月・日・曜）を小さく */
    font-size: 0.16rem;
}


/* ============================================================
   開催日（ドクターイエロー乗車イベント・強調ブロック）
   ============================================================ */
.wk-eventdate {
    width: 96%;
    max-width: 3.80rem;
    box-sizing: border-box;
    margin: 0.14rem auto;
    padding: 0.10rem 0.12rem 0.12rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub4) 100%);
    border: 0.03rem solid #fff;
    border-radius: 0.12rem;
    box-shadow: 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.18);
}

.wk-eventdate__label {
    display: inline-block;
    margin-bottom: 0.05rem;
    padding: 0.01rem 0.16rem;
    background: #fff;
    color: var(--color-sub4);
    font-family: var(--font-pixel);
    font-size: 0.14rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    border-radius: 0.03rem;
}

.wk-eventdate__route {
    font-size: 0.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wk-eventdate__date {
    font-size: 0.28rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.02rem;
}

.wk-eventdate__date .k {
    font-size: 0.15rem;
}


/* ============================================================
   ポイント残高カード（所持 / 累計 / 乗車回数）
   ============================================================ */
.wk-point-cards {
    display: flex;
    gap: 0.10rem;
    justify-content: center;
    align-items: stretch;
    margin: 0.12rem 0;
}

.wk-point-card {
    flex: 1;
    box-sizing: border-box;
    padding: 0.12rem 0.06rem;
    text-align: center;
    background: #fff;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.10rem;
}

.wk-point-card__label {
    font-size: 0.13rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.wk-point-num {
    font-size: 0.34rem;
    font-weight: 700;
    color: var(--color-sub1);
    margin-top: 0.04rem;
}

.wk-point-num .u {
    font-size: 0.14rem;
    font-weight: 600;
}

/* 大きな所持ポイント（単独表示） */
.wk-point-hero {
    text-align: center;
    margin: 0.10rem 0;
}

.wk-point-hero .wk-point-num {
    font-size: 0.52rem;
}


/* ============================================================
   スタンプ獲得グリッド（6スポット）＋ 未取得「?」プレースホルダ
   ============================================================ */
.wk-stamp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.10rem;
    margin: 0.12rem auto;
}

.wk-stamp-cell {
    flex: 0 0 28%;
    max-width: 28%;
    text-align: center;
}

.wk-stamp-cell img,
.wk-stamp-locked {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    display: block;
}

/* 未取得スタンプ = 「?」の丸プレースホルダ（locked 画像が無いため CSS で表現） */
.wk-stamp-locked {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-sub5);
    border: 0.02rem dashed var(--color-sub1);
    color: var(--color-sub1);
    font-family: var(--font-pixel);
    font-size: 0.34rem;
    font-weight: 700;
    box-sizing: border-box;
}


/* ============================================================
   スポット一覧（ミッション行）
   ============================================================ */
.wk-spot {
    width: 96%;
    box-sizing: border-box;
    margin: 0.12rem auto 0;
    padding: 0.12rem;
    background: #fff;
    border: 0.02rem solid var(--color-sub2);
    border-radius: 0.10rem;
    text-align: center;
}

.wk-spot__no {
    display: inline-block;
    padding: 0.02rem 0.10rem;
    margin-bottom: 0.05rem;
    background: var(--color-sub4);
    color: #fff;
    font-family: var(--font-pixel);
    font-size: 0.14rem;
    border-radius: 0.04rem;
}

.wk-spot__theme {
    font-weight: 800;
    font-size: 0.17rem;
    color: var(--color-text);
    line-height: 1.35;
}

.wk-spot__place {
    font-weight: 600;
    font-size: 0.15rem;
    color: var(--color-sub1);
    margin: 0.04rem 0 0.08rem;
}


/* ============================================================
   壁紙プレビュー（トップ。獲得前=unknown.webp / 獲得後=実サムネ）
   ============================================================ */
.wk-wallpaper-preview {
    display: block;
    width: 30%;
    max-width: 2.40rem;
    height: auto;
    margin: 0.14rem auto;
    border-radius: 0.10rem;
    border: 0.02rem solid var(--color-sub2);
    cursor: pointer;
}


/* ============================================================
   賞品カード（A/B/C賞）＋ リボンタグ
   ============================================================ */
.wk-prize {
    width: 96%;
    box-sizing: border-box;
    margin: 0.14rem auto;
    padding: 0.12rem;
    background: #fff;
    border: 0.02rem solid var(--color-sub3);
    border-radius: 0.12rem;
    text-align: center;
}

/* 賞ランクのリボン画像（ピクセルアート・タイトル上）。にじませず拡大する */
.wk-prize__ribbon {
    display: block;
    width: 92%;
    max-width: 3.40rem;
    height: auto;
    margin: 0 auto 0.04rem;
    image-rendering: pixelated;
}

.wk-prize__img {
    width: 80%;
    max-width: 2.80rem;
    height: auto;
    display: block;
    margin: 0.10rem auto;
}

.wk-prize__name {
    font-weight: 700;
    font-size: 0.17rem;
    color: var(--color-text);
    margin-top: 0.02rem;
}

.wk-prize__winners {
    font-weight: 600;
    font-size: 0.14rem;
    color: var(--color-sub4);
    margin-top: 0.03rem;
}

.wk-prize__cost {
    font-size: 0.14rem;
    color: var(--color-text);
    margin: 0.06rem 0;
}


/* ============================================================
   コードカード（応募ID / 当選者ID 表示）
   ============================================================ */
.wk-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.10rem;
    margin: 0.10rem auto;
    flex-wrap: wrap;
}

.wk-code__text {
    font-family: var(--font-pixel);
    font-size: 0.26rem;
    font-weight: 700;
    color: var(--color-sub4);
    letter-spacing: 0.06em;
}

.wk-code__copy {
    padding: 0.06rem 0.14rem;
    font-size: 0.13rem;
    color: #fff;
    background: var(--color-sub1);
    border: 0;
    border-radius: 0.06rem;
    cursor: pointer;
}


/* ============================================================
   アコーディオン（参加方法 / 個人情報の取り扱い）— volley と同方式
   ※ anchor.css の .open__icon と衝突するため .accordion__icon を使う
   ============================================================ */
.accordion {
    width: 96%;
    margin: 0.12rem auto;
    border: 0.02rem solid var(--color-text);
    background: #fff;
    box-sizing: border-box;
}

.accordion__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.10rem;
    padding: 0.13rem 0.16rem;
    background: var(--color-sub5);
    border: 0;
    cursor: pointer;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    box-sizing: border-box;
}

.accordion__title {
    font-family: var(--font-family);
    font-weight: 800;
    font-size: 0.17rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.accordion__icon {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 0.30rem;
    height: 0.30rem;
    border-radius: 50%;
    background: var(--color-sub1);
}

.accordion__icon::before,
.accordion__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}

.accordion__icon::before {
    width: 0.14rem;
    height: 0.03rem;
}

.accordion__icon::after {
    width: 0.03rem;
    height: 0.14rem;
}

.accordion__icon.open::after {
    display: none;
}

/* ＋ → － */
.accordion__body {
    display: none;
    padding: 0.16rem;
    border-top: 0.02rem solid var(--color-text);
    text-align: left;
}


/* ============================================================
   確認モーダル（抽選=lotteryPopup / 応募=drApplyPopup）
   消費前の「はい/いいえ」確認。中央オーバーレイ＋白カード。
   ============================================================ */
.lotteryPopup,
.drApplyPopup {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.lotteryPopup .popup-overlay,
.drApplyPopup .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.20rem;
    box-sizing: border-box;
}

.lotteryPopup .popup-content,
.drApplyPopup .popup-content {
    width: 100%;
    max-width: 3.10rem;
    box-sizing: border-box;
    background: #fff;
    border: 0.03rem solid var(--color-sub2);
    border-radius: 0.16rem;
    box-shadow: 0.04rem 0.04rem 0 rgba(0, 0, 0, 0.20);
    padding: 0.22rem 0.18rem;
    text-align: center;
}

/* 抽選対象の賞名（モーダル上部） */
.popup-prize-name {
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 1.4;
    color: var(--color-sub4);
    margin-bottom: 0.08rem;
}

.popup-title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 0.14rem;
}

/* 消費ポイント数を強調 */
.popup-title strong {
    font-family: var(--font-pixel);
    font-size: 0.26rem;
    color: var(--color-sub4);
}

.popup-buttons {
    display: flex;
    margin-top: 0.10rem;
}

.popup-buttons .oshitabiButton {
    width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   FONT UTILITY OVERRIDE — caution / fontNotoSans を Noto に固定
   （base.css 末尾で var(--font-family) に上書きされるバグの修正）
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}