@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — イベントカラー変数（企画ごとに書き換え）
   base.css のデフォルト値をここで上書きするだけ。
   base.css 自体は触らない。

   WORKFLOW:
     1. :root の色変数を企画カラーに変更する
     2. 背景やフォントのカスタマイズはコメントアウトを外して追記
     3. 共通コンポーネントの変更は base.css へ
   ============================================================ */


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #515151;
    /* ページ背景色（デザイン地色） */
    --color-sub1: #f97200;
    /* メインオレンジ（ボイス枠など） */
    --color-sub2: #D5D5D5;
    /* 黄（giftボタン） */
    --color-sub3: #162c74;
    /* 紺 */
    --color-sub4: #F7EFC3;
    /* 濃オレンジ（枠線・見出し帯・現地ボタン） */
    --color-sub5: #e8f1f8;
    /* 薄青背景 */
    --color-local: #f1d511;
    /* 差し色（黄色） */
    --color-text: #fff;
    /* テキストカラー */
    --color-button: #f97200;
    /* ボタンカラー */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;

    /* 日付表示用のセリフ体。元の date.webp（高コントラストのセリフ＋
       オールドスタイル数字）に合わせる。Playfair Display が無い環境は
       Georgia → 自己ホストの Noto Serif JP の順に落ちる。 */
    --font-date: 'Playfair Display', Georgia, 'Noto Serif JP', serif;
}


/* ============================================================
   SECTION HEADING — テキストセクションタイトル
   ============================================================ */
.section-heading {
    width: 100%;
    text-align: center;
    padding: 0.22rem 0.20rem 0.18rem;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    position: relative;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.60rem;
    height: 0.05rem;
    background: var(--color-local);
    border-radius: 0.025rem;
}

.section-heading-text {
    color: #fff;
    font-size: 0.22rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    font-family: var(--font-family);
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.2);
}


/* ============================================================
   SHINKANSEN HEADER — 画像ヘッダーが用意できない時の
   「新幹線コンテンツ用」バナーヘッダー（横向き新幹線 /img/shinkansen.png）
   （ultraman60th_s で採用。声グラ /seigura の .charaIcon.shinkansen を踏襲）

   使い方（section-heading の代わりにこれを置く）:
     <div class="lead-heading">
         東海道新幹線車内コンテンツ
         <div class="charaIcon shinkansen"><img src="/img/shinkansen.png" alt="東海道新幹線"></div>
     </div>

   ・帯グラデは sub1→sub2（テーマ非依存で白文字が読める暗さ）。企画色を効かせたい
     場合のみ background を上書きする。
   ・新幹線は実寸(1080px=10.8rem)で帯を突き抜け、overflow:hidden で帯内クリップ
     → 疾走感を出しつつはみ出しは自己完結（content-holder 側の overflow に依存しない）。
   ============================================================ */
.lead-heading {
    position: relative;
    /* 子（新幹線）の基準 + はみ出しの自己完結 */
    overflow: hidden;
    /* 帯からはみ出す新幹線を帯内でクリップ */
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    color: #fff;
    font-weight: 800;
    font-size: 0.22rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    font-family: var(--font-family);
    padding: 0.14rem 0.14rem 0.10rem;
    border-radius: 0;
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.35);
}

.lead-heading .charaIcon.shinkansen {
    text-align: center;
    margin: 0.04rem auto 0;
    /* ずらしたい時のみ position: relative; + top/left。無しでは top/left は無効 */
}

.lead-heading .charaIcon.shinkansen img {
    width: 10.8rem;
    /* = 実寸 1080px。見た目維持しつつ PNG 差し替え時の寸法ズレを防ぐ */
    height: auto;
    filter: drop-shadow(0 0.04rem 0.10rem rgba(11, 20, 60, 0.35));
}


/* ============================================================
   BACKGROUND (任意)
   企画の背景色・パターンが必要な場合にコメントアウトを外す
   ============================================================ */
/* body { background-color: #f0e8ff; } */


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
/* .content-holder {
    border: 3px solid var(--color-sub1);
    box-shadow: 0.04rem 0.04rem 0 var(--color-sub1);
} */


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   企画ごとの button-bg / グラデを上書きするため !important で最優先化。
   base.css の .iconButton[disabled] と同じ gray グラデを採用。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
}

/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* ============================================================
   STAMP / AR GRID (任意)
   ARフレーム数が異なる場合に列数を変更する
   ============================================================ */
/* .icon-grid-4 { grid-template-columns: repeat(3, 1fr); } */


/* ============================================================
   FONT OVERRIDE (任意)
   企画カスタムフォントが必要な場合 — info.inc.php の Google Font
   リンクと合わせて設定する
   ============================================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); */
/* main { font-family: "Noto Serif JP", sans-serif; } */
/* .fontEvent { font-family: "Noto Serif JP", sans-serif !important; } */


/* ============================================================
   SECTION HEAD OVERLAP (任意)
   セクションタイトルを content-holder に被せるレイアウト
   ============================================================ */
/* .section-head-overlap {
    position: relative;
    z-index: 1;
    margin-bottom: -0.40rem;
}
.section-head-overlap + .content-holder {
    padding-top: 0.30rem;
} */


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   base.css 末尾 (line 1106) で .fontNotoSans が var(--font-family) で
   上書きされており、Noto Sans JP に切り替わらない。custom.css は base.css
   の後で読み込まれるためここで実フォント名を強制する。
   caution 系は class 指定有無に関わらず常に Noto Sans JP で固定する
   (本文の event フォントと視覚的に分離するため)。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   DESIGN COMPONENTS — コーダー coding/style.css を rem 化して移植
   （デザインpx ÷ 100 = rem / 100px = 1rem @ 393px viewport）
   ・base.css は変更しない。ここはこの企画専用のデザイン再現ブロック。
   ・機能フックは top.php 側で switchPage / data-url / data-id を付与する。
   ============================================================ */

/* ---- 共通テキスト ---- */
.boldText {
    text-align: center;
    font-weight: 600;
    line-height: 1.8;
}

.smallText {
    padding: 1% 3%;
    font-weight: 400;
    line-height: 1.8;
}

.font20 {
    font-size: 0.20rem;
}

.font18 {
    font-size: 0.18rem;
}

.font15 {
    font-size: 0.15rem;
}

.font12 {
    font-size: 0.12rem;
}

.font13 {
    font-size: 0.13rem;
}

.font32 {
    font-size: 0.32rem;
}

.font25 {
    font-size: 0.25rem;
}

/* ---- INTRO（ログイン導線）だけ内側の余白を詰める ---- */
.content-holder--intro {
    padding: 2%;
}


/* ---- INTRO（ログイン導線） ---- */
/* .description { border-bottom: var(--color-sub4) solid 0.02rem; } */
.loginSignButtons {
    width: 100%;
    margin: auto;
}

/* 黒地グラデ文字のログイン/新規登録ボタン（base.css .loginRgisterButton を上書き） */
.loginRgisterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.05rem;
    border-radius: 0.10rem;
    background: linear-gradient(135deg, #F7EFC3 0%, #FFEE90 100%);
    color: #fff;
    cursor: pointer;
    margin: 0.15rem auto;
    width: auto;
    max-width: none;
    max-height: 0.50rem;
    box-shadow: none;
    user-select: none;
    -webkit-user-select: none;
}

.loginRgisterButton .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
}

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

.loginRgisterButton .iconButtonText {
    flex: 1;
    font-size: 0.20rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-right: 0.10rem;
    background-color: #000;
    /* background: linear-gradient(90deg, #ED6F02 0%, #FCB434 100%); */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.loginRgisterButton:active {
    transform: scale(0.95);
}

/* キャンペーンサイト一覧ボタン（白地・オレンジ枠）。JS は base の .toOshitabiTop を利用 */
.toOshitabiTop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.05rem;
    border-radius: 0.10rem;
    background: #000;
    color: #F7EFC3;
    border: var(--color-sub4) solid 0.02rem;
    margin: 0.15rem auto;
    min-height: 0;
    font-size: 0.20rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}

.toOshitabiTop:active {
    transform: scale(0.95);
}

/* ---- VOICE（新幹線ボイスドラマ） ---- */
.specialMovieTitle {
    padding: 4%;
}







/* ---- CERTIFICATE（SNS風クリアカード + 引換） ---- */








/* 非活性時はアイコン(SVG)も白に反転（gift / arrow） */

.idButton {
    padding: 0.25rem;
}

/* ---- PROMOTION（現地ボイス・スポット直ボタン） ---- */
.marginbottom {
    margin-bottom: 8%;
}

.grayborderbottom {
    border-bottom: solid 0.01rem #ededed;
    line-height: 0.2;
}

/* ---- 注意書き ul.caution（テンプレ準拠・※ は li::after のぶら下げ）----
   デザインの白カードは左右 padding が 0 のものがあるため、caution に
   横方向の余白を持たせて smallText 相当の見た目にする。 */
.content-holder ul.caution {
    padding: 0 3% 5%;
    line-height: 1.8;
}




.dateText p {
    /* ★ 元の date.webp はセリフ体＋オールドスタイル数字（0/2 が低く 6/8 が高い）。
       Georgia が同じオールドスタイル数字を持つので第一候補にする。
       Georgia の無い環境（Android 等）は自己ホストの Noto Serif JP に落ちる。 */
    font-family: var(--font-date);
    font-variant-numeric: oldstyle-nums;
    /* 元画像と同じ 0/2 が低く 6/8 が高い数字 */
    /* 元画像どおり1行に収める。
       ★ base.css の rem はビューポート連動（SP は font-size: 100vw/4.3）なので、
         デザイン幅 430px で収まれば全端末で等比に収まる。
         430px で最長パターン「#1  2026.08.07 FRI. - 2026.09.03 THU.」が
         収まる上限は 0.22rem（白線幅 94% 時）。 */
    font-size: 0.22rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
    color: var(--color-text);
    font-weight: 800;
    border-top: 0.001rem solid #fff;
    border-bottom: 0.001rem solid #fff;
    padding: 1% 0;
    width: 94%;
    margin: auto;
    margin-top: 5%;
    line-height: 2.3;
}

.specialMovies {
    width: 96%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.08rem;
    margin: 5% auto;
}

/* 各枠はテンプレ標準の .thumbnail（取得済みは switchPage wallpaperExist）でラップする。
   base.css の .thumbnail は height:auto なので、grid のセル高いっぱいに広げて
   中の img の height:100% / object-fit:cover が今までどおり効くようにする。 */
.specialMovies .thumbnail {
    height: 100%;
}

.specialMovies img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ApplicationPeriod {
    text-align: center;
}

.ApplicationPeriodTitle {
    background-color: #F3ECC0;
    text-align: center;
    width: 90%;
    margin: auto;
    color: #000;
    line-height: 2;
    font-weight: bold;
}

.campaignOverviewTitle {
    display: inline-block;
    color: #F3ECC0;
    text-align: center;
    border-bottom: solid 1px #F3ECC0;
    line-height: 1.2;

}






.marginTop0 {
    margin-top: 0;
}

.dateLineWhite {
    border-top: 0.001rem solid #FFFFFF;
    border-bottom: 0.001rem solid #FFFFFF;
    width: 85%;
    margin: auto;
}

.textAlignCenter {
    text-align: center;
}

.strayTitle {
    width: 97%;
    margin: 3% auto;
}

.lineHeightSmall {
    line-height: 1.3;
}

.padding2rem {
    padding: 0.25rem;
}

.voiceTitle p {
    font-weight: 900;
    margin: 3% auto 1%;
    color: #F3ECC0;
}

.stampSection {
    width: 94%;
    margin: 3% auto 5%;
    background-color: #ECECEC;
    color: #000;
    padding: 2%;
}

.stamps {
    width: 100%;
    /* 4列なので枠いっぱいまで使って1マスの横幅を稼ぐ */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 0.06rem;
}

.stampTitle p {
    margin: 1% auto 5%;
}

.stampImgText {
    display: block;
}

.stampImgText p {
    line-height: 1.3;
}

/* スポット名は必ず2行に収める。
   ★ デザイン幅 430px 時の1マスは約 0.85rem。font13(0.13rem) だと
     最長行「ディスプレイ横」(7文字 = 0.91rem) が入りきらず3行になる。
     0.115rem まで落として 0.80rem に収める（4スポット共通・.font13 より優先）。
   min-height は 2行分。1行のスポットと高さを揃えて行がガタつかないようにする。 */
.stampImgText .stampText {
    font-size: 0.115rem;
    letter-spacing: -0.01em;
    min-height: 2.6em;
    /* = line-height 1.3 × 2行 */
}

.floormap {
    width: 98%;
    margin: auto;
}

/* ============================================================
   IMAGE ZOOM — 画像の全画面拡大表示
   .zoomTrigger をタップ → #floormapZoom（.imgZoomModal）を開く。
   ボイスラリーマップ（1600×748 の横長）がスマホ幅だと読めないため。
   ・画像タップで 等倍 ⇄ 拡大（260%）をトグル
   ・拡大時のはみ出し分は __scroll のスクロールで移動
   ・viewport に user-scalable=no は付いていないので端末のピンチも併用可
   ============================================================ */
.floormap.zoomTrigger {
    cursor: zoom-in;
}

.imgZoomModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
}

.imgZoomModal.is-open {
    display: block;
}

/* flex で中央寄せするとはみ出し側がスクロールできなくなるので、
   inline-block + vertical-align:middle の方式で中央寄せする。 */
.imgZoomModal__scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    white-space: nowrap;
}

.imgZoomModal__scroll::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.imgZoomModal__scroll img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: none;
    height: auto;
    cursor: zoom-in;
    transition: width 0.2s ease;
}

.imgZoomModal.is-zoomed .imgZoomModal__scroll img {
    width: 260%;
    cursor: zoom-out;
}

.imgZoomModal__close {
    position: absolute;
    top: 0.12rem;
    right: 0.12rem;
    z-index: 2;
    width: 0.40rem;
    height: 0.40rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #020202;
    font-size: 0.24rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
}

.imgZoomModal__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.14rem;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 0.12rem;
    text-align: center;
    text-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* 拡大表示中は背面ページをスクロールさせない */
body.noScroll {
    overflow: hidden;
}

.qrSection {
    width: 94%;
    margin: auto;
    border-bottom: 0.001rem solid white;
    margin-top: 4%;
}

.qrTitle {
    text-align: center;
}

.smallText p {
    margin: 0.3%;
    line-height: 2;
}

.qrButton {
    margin-top: 2%;
    padding: 0.13rem 0.25rem;
}

.voiceTitle .colorWhite {
    color: white;
}

.margin1 {
    margin: 1.8% auto;
}

.colorY {
    color: #F3ECC0;
}

.marginbottom0 {
    margin-bottom: 0;
}

.frameImg {
    width: 25%;
    margin: auto;
}

/* 取得すると Frame2.webp（?のカード 270×585）が実際の壁紙サムネイルに
   差し替わる。サムネは正方形なので、枠の比率を固定して切り抜き表示にし、
   取得前後でレイアウトが動かないようにする。 */
.frameImg img {
    display: block;
    width: 100%;
    aspect-ratio: 270 / 585;
    object-fit: cover;
}

.margin3 {
    margin: 3.5% auto;
}

.textBig {
    margin-left: 2%;
    text-align: left;

}

.listDisc {
    list-style-type: disc;
    padding: 1% 5% 5%;
}

.checkSection {
    width: 80%;
    margin: auto;
    display: block;
}

.checkText {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    user-select: none;
}

.checkText p {
    flex: 1;
    /* 達成状況（東海道新幹線乗車 / スタンプラリーコンプリート）は左寄せ。
       チェックボックス画像の右に文字が揃うようにする。flex:1 は維持するので
       行の幅・レイアウトは変わらない。 */
    text-align: left;
}

.campaignOverviewTitleWhite {
    display: inline-block;
    color: white;
    text-align: center;
    border-bottom: solid 1px white;
    line-height: 1.2;
    flex: 1;
    text-align: center;
    font-weight: bold;

}


/* ============================================================
   CONTENT-HOLDER — テンプレ標準のカードを企画色に改造する
   ★ 企画固有のコンテナクラス（specialMovieContainer / voiceContainer 等）は作らない。
     共通ページ（wallpaper/download・entry・video-list など）は .content-holder で
     書かれているので、ここを改造すれば全ページが同じ見た目になる。
     coding の .voiceContainer（黒地＋クリーム枠）をそのまま移植したもの。
   ============================================================ */
.content-holder {
    box-sizing: border-box;
    width: 96%;
    margin: 4% auto;
    padding: 3% 2% 4%;
    background-color: #1B1B1B;
    border: 0.02rem solid #F7EFC3;
    border-radius: 0.10rem;
    color: #fff;
    position: relative;
    box-shadow: unset;
}

/* INTRO（ログイン導線）は枠の中の余白だけ調整 */


/* ============================================================
   BUTTONS — テンプレ標準 .iconButton のまま coding のデザインを再現する
   ★ 独自クラス（movieButton / giftButton / idCheckButton）は作らない。
     共通ページ（wallpaper/download・entry・video など）は .iconButton で
     書かれているので、そこにも同じデザインが自動で効くようにする。

     .iconButton.button-bg … 主要導線（黄 #F0CD69）
     .iconButton           … 副次（グレー #D5D5D5）
     いずれも赤の下影 + 角丸 0.5rem。1行でも2行でも高さは同じ。
   ============================================================ */
.iconButton {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 93%;
    /* base.css は height:0.70rem 固定。auto にしないと2行が溢れる */
    height: auto;
    min-height: 0.82rem;
    /* 文字0.20rem×行間1.3×2行 + 上下padding0.15rem×2 */
    padding: 0.15rem 0.25rem;
    margin: 4% auto;
    border: none;
    border-radius: 0.5rem;
    /* 活性状態は #F0CD69（黄）。全ボタン共通。
       ★ background-color ではなく background。base.css が
       background: linear-gradient(...) を敷いているので、
       color だけ上書きしても gradient が上に残ってしまう。 */
    background: #F0CD69;
    box-shadow: 0 0.02rem 0 0 #DE0921;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

/* base.css の .iconButton.button-bg = var(--color-button) を打ち消して、
   button-bg の有無にかかわらず活性は同じ黄色にする。 */
.iconButton.button-bg {
    background: #F0CD69;
}

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

/* base.css は .icon{flex:2} / .icon2nd{flex:1.5} で幅を食う。
   coding は「アイコンは実寸・文字が伸びる」なので固定幅にする。 */
.iconButton .icon,
.iconButton .icon2nd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.iconButton .icon img {
    width: 0.30rem;
    height: auto;
    object-fit: contain;
}

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

.iconButton .iconButtonText,
.iconButton .iconButtonText.white-text {
    flex: 1;
    text-align: center;
    font-size: 0.20rem;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
    padding: unset;
}

.iconButton:active {
    transform: scale(0.98);
}

/* 非活性 */
.iconButton[disabled],
.iconButton.disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg {
    background: linear-gradient(to right, gray, darkgray) !important;
    pointer-events: none;
    cursor: default;
}

.iconButton[disabled] .iconButtonText,
.iconButton.disabled .iconButtonText {
    color: #fff;
}

/* 非活性のアイコンは白に反転（暗い灰グラデ地で読めるように） */
.iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img {
    filter: brightness(0) invert(1);
}

/* ============================================================
   SIMPLE BUTTON — アイコン無しの副次ボタン（テンプレ標準 .simpleButton）
   「過去に発行した応募IDを確認する」「トップページに戻る」など。
   .iconButton より細く・装飾も控えめにして主導線と差をつける。
   角丸とフォントだけトンマナに寄せ、赤の下影は付けない。
   ※ 共通ページ（wallpaper/download・entry など）の戻るボタンにも効く。
   ============================================================ */
.simpleButton {
    box-sizing: border-box;
    width: 93%;
    height: auto;
    min-height: 0.56rem;
    /* .iconButton の 0.82rem より細い */
    padding: 0.10rem 0.20rem;
    margin: 3% auto;
    border: 0.02rem solid #333;
    border-radius: 0.5rem;
    /* .iconButton と同じ角丸でトンマナを合わせる */
    background: #fff;
    box-shadow: none;
    /* 赤の下影は主導線だけに使う */
    color: #333;
    font-size: 0.16rem;
    /* .iconButton の 0.20rem より小さい */
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.simpleButton:active {
    transform: scale(0.98);
}

.simpleButton[disabled],
.simpleButton.disabled {
    background: #eee;
    border-color: #bbb;
    color: #333;
    pointer-events: none;
    cursor: default;
}

/* ============================================================
   COPY BUTTON — 応募ID / 識別IDの「コピー」（テンプレ標準 .copyButton）
   base.css は var(--color-tokai)、ページ側は .sub1-bg（オレンジ）を重ねる。
   どちらもテンプレ既定色なので、本企画の活性色（黄 #F0CD69 ＋黒文字）に揃える。
   アイコンも白の /icon/copy.png では黄地で見えないため
   assets/svg/icon/copy.svg（#020202）に差し替え済み。
   ============================================================ */
.copyButton,
.copyButton.sub1-bg {
    background: #F0CD69;
    background-color: #F0CD69;
    color: #020202;
    box-shadow: 0 0.02rem 0 0 #DE0921;
    border-radius: 0.5rem;
    padding: 0.08rem 0.16rem;
}

.copyButton:active {
    transform: scale(0.98);
}


/* ============================================================
   フッター — 本企画はコピーライト表記なし
   footer.inc.php は <p class="copyrightText"> を常に出力するので、
   中身が空のときだけ非表示にして余白が空かないようにする。
   ============================================================ */
.copyrightText:empty {
    display: none;
}

/* ============================================================
   日付・セリフ体ユーティリティ
   ============================================================ */
.dateSerif {
    font-family: var(--font-date);
    font-variant-numeric: oldstyle-nums;
}

/* 現地トップの開催期間。字面・サイズを車内トップの .dateText p と揃える。
   上下の罫線は greenLine.svg があるので border は付けない。 */
.periodLabel {
    margin-bottom: 0;
}

.periodValue {
    font-size: 0.22rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
    margin-top: 0;
}

/* 期間表記のうち、西暦と曜日は月日より一段小さい（元画像の見せ方）。 */
.dateText .yr,
.dateText .dow,
.dateSerif .yr,
.dateSerif .dow {
    font-size: 0.72em;
}

.dateText .dow,
.dateSerif .dow {
    letter-spacing: 0.02em;
}

/* ============================================================
   応募要項リンクの色
   .campaignOverviewTitle 自体は #F3ECC0 だが、中の <a> が base.css の
   リンク色（青）で上書きされてしまうのでアンカー側にも指定する。
   下線は親の border-bottom があるので text-decoration は消す（二重線防止）。
   ============================================================ */
.campaignOverviewTitle a {
    color: #F3ECC0;
    text-decoration: none;
}

.campaignOverviewTitleWhite a {
    color: #ffffff;
    text-decoration: none;
}

/* ============================================================
   BASE.CSS OVERRIDES — coding が base.css を直接書き換えていた3点を
   custom.css 側の上書きに移したもの（base.css は触らない規約）。
   ============================================================ */

/* 1) caution 内リンクの色（coding: blue → #00E1FF） */
ul.caution li a,
.caution a {
    color: #00E1FF;
}

/* 2) iconButton の文字サイズ（coding: --fs-lg → --fs-md） */
.iconButton .iconButtonText {
    font-size: var(--fs-md);
}

/* 3) 375px 以下では更に1段小さく（coding が base.css に追記していたメディアクエリ） */
@media only screen and (max-width: 375px) {
    .iconButton .iconButtonText {
        font-size: var(--fs-sm);
    }
}