@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — ラジオ大阪×推し旅 with京まふ (kyomaf2026)
   base.css のデフォルト値をここで上書きするだけ。base.css 自体は触らない。

   ・単位は全て rem。デザイン px ÷ 100 = rem（--design-width-sp: 430）。
   ・末尾「DESIGN COMPONENTS」はコーダー支給 coding/custom.css の移植。
   ============================================================ */


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main: #faf1d3;
    /* ページ地色（クリーム） */
    --color-sub1: #44b460;
    /* 緑 — ラジオ大阪 */
    --color-sub2: #ed6c01;
    /* オレンジ — 推し旅（枠線・ボタンの基調） */
    --color-sub3: #a65493;
    /* 紫 — with */
    --color-sub4: #c6990f;
    /* 金 — 京まふ */
    --color-sub5: #fffaeb;
    /* 白に近いクリーム */
    --color-local: #ec6c01;
    --color-text: #000000;
    --color-button: #ea6b01;
    --font-family: 'Zen Maru Gothic', YakuHanJP, sans-serif;

    /* 白カード・区切り線の枠色。デザイン上はオレンジで統一されている
       （.line / .toOshitabiTop も同じ #ED6C01）。 */
    --color-card-border: var(--color-sub2);
    /* プリント方法ボックス・2本目のボイスボタンの金茶 */
    --color-gold: #aa8020;
}


/* ============================================================
   BACKGROUND — 40x40 の市松タイルを敷き詰める
   base.css の main::before は `cover` なので 1 枚に引き伸ばされてしまう。
   ここで repeat ＋ タイル実寸に上書きする。
   ★ inset ショートハンドは古い iOS Safari で効かないので 4 辺を個別指定する
     （base.css 側は inset: 0。効かない端末では背景が消えるため必ず上書きする）。
   ============================================================ */
main::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--image-bg) repeat 0 0 / 0.40rem 0.40rem;
    background-color: var(--color-main);
}

/* <main> を持たないページは各ページ側で背景を出す（このファイルには置かない）:
     check/index.php … body::before で同じタイルを敷く
     voice/*.php     … player.css の灰グラデを潰すため body に直接敷く
                       （DB の item.detail.background / bodyColor があれば後勝ちで上書き） */


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の統一
   base.css 末尾で .fontNotoSans が var(--font-family) に上書きされており
   Noto Sans JP に切り替わらない。custom.css は base.css の後に読まれるので
   ここで実フォント名を強制する。注記は本文（Zen Maru Gothic）と視覚的に
   分けるため常に 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;
}

.zenMaruGothic {
    font-family: 'Zen Maru Gothic', YakuHanJP, sans-serif;
}


/* ============================================================
   NUMERALS — 数字だけ 1 段太いウェイトを使う
   Zen Maru Gothic は半角数字が仮名漢字より細く描かれており、ウェイトを
   上げるほど差が開く（font-size 200px で水平ストローク幅の中央値を実測）:
       500 … 「8」19px / 「月」21px  (-10%)
       700 … 「8」24px / 「月」28px  (-14%)  ← 太い見出し・ボタンで目立つ
       900 … 「8」26px / 「月」38px  (-32%)
   つまり **数字だけ 900（26px）にすると仮名漢字の 700（28px）と揃う**。
   数字だけを unicode-range で Black に差し替えるので、マークアップに
   <span> を足す必要がない（「8月20日公開」のような混在文字列でも自動）。

   ・font-weight: 100 900 と広く宣言し、要素側のウェイト指定に関係なく
     この1本（Black）を使わせる。だから **本文（500）には当てない**
     （500 の数字を 900 にすると逆に太くなる。下の適用セレクタは 700 のみ）。
   ・フォントは企画配下に self-host（Zen Maru Gothic は SIL OFL 1.1 で
     再配布可。Google の gstatic URL はバージョンハッシュ付きで将来 404 に
     なるため直リンクしない）。latin サブセットのみ 11KB。
   ・万一読めなくても次の 'Zen Maru Gothic' にフォールバックするだけなので
     見た目が現状に戻るだけで壊れない。
   ============================================================ */
@font-face {
    font-family: 'ZenMaruGothicNum';
    /* ★ CSS ファイルからの相対パス。/view/event/<slug>/ の絶対パスを書くと
       雛形を別スラッグにコピーしたとき参照が前の企画に残る（頻出事故）。 */
    src: url('../font/ZenMaruGothic-Black-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039;  /* 半角数字のみ */
}


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   pre-open（8/17〜8/19）と会期外で使う。アイコン付きは .iconButton、
   アイコン無しは .codeListButton / .blackButton。どちらも同じ見た目にする。
   ★ base.css の .iconButton[disabled] と同じグレーだが、企画側の
     background-color modifier に勝つ必要があるので !important を付ける。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.codeListButton[disabled],
.blackButton[disabled] {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
}

.iconButton[disabled]:active,
.iconButton.disabled:active,
.codeListButton[disabled]:active {
    transform: none;
}


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

   ★ font-weight は支給値より細くしている（支給がほぼ全て 700〜900 で太すぎた）。
     ── 絶対に守ること ──────────────────────────────
     Zen Maru Gothic の実装ウェイトは **300/400/500/700/900 の5段だけ**で
     600・800 は存在しない（Google Fonts API が
     `wght@600;800` / `wght@300..900` を 400 Font family not found で返す
     ＝ 可変フォントでもない）。CSS のウェイト解決は「500 超の指定は
     まず重い側の最近傍を探す」ので、存在しない値は **上に丸められる**:
         600 と書くと 700 で描画 ／ 800 と書くと 900 で描画
     つまり 700→600 や 900→800 の「-100」は見た目が変わらないどころか
     逆効果になる。必ず実在する段（300/400/500/700/900）で指定する。

     中間段（600）が無いため、-1段だけだと 700→500 で飛びすぎる。
     そこで用途で分けている:
       本文・説明文（長い文章）        … 500  ← ここが「太い」の主因
       見出し・ボタン文字（短く大きい）… 700  ← 白抜き文字は 500 だと弱い
       .stepTitle だけ 600（markup が fontNotoSans ＝ Noto Sans JP は
       可変フォントなので 600 が実在し、正確に効く）
   ============================================================ */

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

.font12 { font-size: 0.12rem; }
.font14 { font-size: 0.14rem; }
.font15 { font-size: 0.15rem; }
.font16 { font-size: 0.16rem; }
.font18 { font-size: 0.18rem; }
.font20 { font-size: 0.20rem; }
.font21 { font-size: 0.21rem; }
.font24 { font-size: 0.24rem; }

/* ---- 白カード（企画内 全ページ共通の見た目） ----
   トップは支給コーディング由来のクラス名（.stickerCampaignSection 等）、
   サブページ（print/code・print/history など）はテンプレ共通の .content-holder を
   使っている。**同じ見た目に揃えるため両方をここでまとめて定義する。**
   ★ .content-holder は base.css に width:96% / border 0.02rem sub1 /
     margin-top / padding-bottom の既定がある。custom.css は後に読まれるので
     ここで指定したプロパティだけが勝つ。width は base の 96% ＋ 左右 margin 2%
     で合計 100% になり、トップのカード（margin 2% で実効 96%）と横幅が一致する。 */
.loginSignContainer,
.voiceContainer,
.stickerCampaignSection,
.programInfoSection,
.content-holder {
    background-color: #fff;
    border-radius: 0.10rem;
    margin: 4% 2%;
    position: relative;
    border: solid 0.03rem var(--color-card-border);
}

.loginSignContainer {
    padding: 2% 3%;
}

.voiceContainer,
.stickerCampaignSection {
    padding: 2% 0;
}

.programInfoSection {
    padding: 3%;
}

/* ---- INTRO（ログイン導線） ---- */
.loginSignButtons {
    width: 100%;
    margin: auto;
}

/* 見た目は coding のまま（オレンジ地・白文字）。
   機能フックのクラス registerButton / loginButton は base.css の JS が拾う。 */
.loginSignContainer .loginRgisterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.30rem 0.05rem;
    border-radius: 0.10rem;
    background-color: var(--color-sub2);
    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;
}

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

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

.loginSignContainer .loginRgisterButton .iconButtonText {
    flex: 1;
    font-size: 0.20rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-right: 0.10rem;
}

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

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

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

.bigTitle {
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    margin: 3% auto 4%;
}

.dateText {
    text-align: center;
    border-top: var(--color-card-border) solid 0.02rem;
    border-bottom: var(--color-card-border) solid 0.02rem;
    padding: 2%;
    margin: 0 3%;
}

/* ---- VOICE（車内限定ラジオ） ---- */
.voiceTitle {
    padding: 4%;
}

/* ★ タイトル画像はデザイン実寸（rem）で置き、max-width で端末幅に収める。
   支給コーディングは <img> に width 指定が無く intrinsic 幅で inline 表示され、
   狭い端末ではみ出す／margin:auto が効かず左寄せになっていた（display:block が必要）。
   帯の大きさは意味を持つ（車内ラジオ・シールは 368px の大帯／番組情報は 172px の小ラベル）
   ので 100% で一律に伸ばさない。 */
.voiceTitle img,
.stickerCampaignSectionTitle img {
    display: block;
    width: 3.68rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.programInfoSectionTitle img {
    display: block;
    width: 1.72rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.dateImg {
    display: block;
    margin: 4% auto;
    width: 94%;
    height: auto;
}

.stickerCampaignSectionTitle {
    padding: 3% 0;
    width: 100%;
    margin: 0 auto 2%;
}

.stickerCampaignSection img {
    margin: auto;
}

/* シール画像（未確定のため comming soon プレート）。
   デザインのアートボードは 258x190。支給 SVG は柄パターンの倍率がずれていて
   プレートが 86% しか埋まっていなかった（残りに別企画の画像が透けていた）ため、
   プレート部分だけを切り出した webp を実寸 258px で置いている。 */
.stickerCampaignSection .comingImg {
    display: block;
    width: 2.58rem;
    max-width: 100%;
    height: auto;
    margin: 4% auto;
}

.programInfoSectionTitle {
    padding: 3% 0 0;
    width: 100%;
    margin: 0 auto;
}

.programInfoSection img {
    margin: auto;
}

/* ============================================================
   iconButton — アイコン付きボタンの共通コンポーネント
   ★ 他企画へ持ち出す前提の汎用パーツ。アイコンを持つボタンは全て
     このクラスで組む（ボイス／乗車特典コード／QR表示／位置情報取得）。
   ★ base.css にも同名の .iconButton（グラデ CTA・角丸 0.18rem・白内枠）が
     あるので、ここで打ち消してから本デザインを当てている。custom.css は
     base.css の後に読まれるので上書きが効く。
   ★ 色は modifier で付ける:
       .voiceButton(青) / .backgroundColor1(金茶) / .checkButton(サブ2)
       base.css の .button-bg / .sub1-bg もそのまま使える（print/ 配下が使用）。

   構成:
     <button class="iconButton voiceButton">
       <span class="iconButton__icon">   ← 左アイコン
       <span class="iconButton__text">   ← 中央テキスト（flex:1 で伸びる）
       <span class="iconButton__icon">   ← 右アイコン（›）
     </button>
   旧クラス名（.voiceButton__icon / .voiceButton__text）と base.css 系の
   子要素名（.icon / .iconButtonText / .icon2nd）も同じ見た目になるよう
   エイリアスしてある。
   ============================================================ */
.iconButton {
    /* --- base.css の CTA 装飾を打ち消す --- */
    position: static;
    box-shadow: none;
    height: auto;
    max-width: none;
    background-image: none;
    /* --- 本デザイン --- */
    display: flex;
    align-items: center;
    width: 93%;
    padding: 0.25rem 0.20rem;
    border: none;
    margin: 1% auto 3%;
    border-radius: 0.10rem;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* base.css の白い内枠（.iconButton::before）を消す */
.iconButton::before {
    content: none;
}

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

/* 左右アイコン。旧 .voiceButton__icon と base の .icon / .icon2nd を揃える */
.iconButton__icon,
.iconButton .icon,
.iconButton .icon2nd,
.voiceButton__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.iconButton__icon img,
.iconButton .icon img,
.iconButton .icon2nd img,
.voiceButton__icon--left img,
.voiceButton__icon--right img {
    width: 0.25rem;
    height: auto;
    object-fit: contain;
}

/* 中央テキスト。旧 .voiceButton__text と base の .iconButtonText を揃える */
.iconButton__text,
.iconButton .iconButtonText,
.voiceButton__text {
    flex: 1;
    text-align: center;
    font-weight: 700;
    color: #fff;
    padding-right: 0;
    line-height: 1.4;
}

/* --- 色 modifier --- */
.voiceButton {
    background-color: #2c8aac;
}

.checkButton {
    background-color: var(--color-sub2);
}

.codeListButton {
    display: flex;
    align-items: center;
    width: 93%;
    padding: 0.15rem 0.20rem;
    border: none;
    margin: 1% auto 3%;
    border-radius: 0.10rem;
    background-color: var(--color-sub2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* アイコン無しボタン。アイコン付きは .iconButton:active が担当する */
.codeListButton:active {
    transform: scale(0.98);
}

/* 2本目のラジオ（京まふラジオ）のボタン色 */
.backgroundColor1 {
    background-color: var(--color-gold);
}

.line {
    width: 93%;
    margin: 1% auto 3%;
    border-bottom: var(--color-sub2) solid 0.02rem;
}

/* ---- 印刷方法ボックス ---- */
.printingMethod {
    width: 92%;
    margin: 6% auto;
    border: var(--color-gold) solid 0.01rem;
    border-bottom-left-radius: 0.10rem;
    border-bottom-right-radius: 0.10rem;
}

.printingMethodTitle {
    color: var(--color-gold);
    border-bottom: var(--color-gold) solid 0.01rem;
    padding: 1.5%;
    margin-bottom: 2%;
    font-weight: 700;
    text-align: center;
}

.linkTextBlack {
    display: block;
    text-align: center;
    width: 100%;
    margin: auto;
    justify-content: center;
}

.linkTextBlack a {
    color: var(--color-text);
    text-align: center;
    width: 100%;
    margin: auto;
    justify-content: center;
    /* style_v2.css の a{text-decoration:none} を打ち消す（上の注記参照） */
    text-decoration: underline;
    text-decoration-thickness: 0.01rem;
    text-underline-offset: 0.02rem;
}


/* ============================================================
   ACCORDION — ご注意事項 / オリジナルデザインシール取得方法
   ★ 支給コーディングは開いたままだったので、既定を「閉」にして
     ヘッダーのタップで開閉する。アイコンは支給の ＋ / − を差し替える
     （.js-acc-icon の src を JS が入れ替える）。
   ============================================================ */
.ImportantNotes {
    width: 100%;
    margin: auto auto 2%;
    background-color: #fff;
    color: var(--color-text);
    border-radius: 0.10rem;
    border: solid 0.02rem var(--color-text);
    /* padding-bottom: 3%; */
}

.ImportantNoteTitle {
    text-align: center;
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 0.10rem;
    padding: 0.10rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.ImportantNoteTitle p {
    margin: 0;
    font-weight: 700;
    font-size: 0.16rem;
}

.ImportantNoteTitle img {
    width: 0.24rem;
    height: auto;
    flex-shrink: 0;
}

/* 既定は閉。JS が slideToggle で開く（display は JS が管理する） */
.ImportantNotesList {
    display: none;
}

.stickerAcquisitionGuideModal {
    justify-content: center;
    width: 96%;
    margin: auto;
    border-radius: 0.10rem;
    border: solid var(--color-text) 0.02rem;
    padding: 4% 2%;
}

.stickerAcquisitionGuideModalHeader {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: var(--color-text);
    color: #fff;
    border-radius: 0.50rem;
    gap: 0.10rem;
    width: 90%;
    margin: 0 auto 0%;
    padding: 0 5%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.stickerAcquisitionGuideModalHeader p {
    margin: 0;
    line-height: 2.3;
    font-weight: 700;
    font-size: 0.16rem;
}

.stickerAcquisitionGuideModalHeader img {
    width: 0.18rem;
    height: auto;
    flex-shrink: 0;
}

/* 既定は閉。2 つの body をまとめて包む */
.stickerAcquisitionGuideModalContent {
    display: none;
}

.stickerAcquisitionGuideModalBody {
    margin-top: 3%;
    background-color: rgba(237, 109, 0, 0.13);
    /* border: solid var(--color-text) 0.02rem; */
}

.stickerAcquisitionGuideModalPhaseTitle {
    text-align: center;
    background-color: var(--color-tokai);
    color: #fff;
    line-height: 2;
}

.stickerAcquisitionGuideModalBody p {
    margin-top: 0;
}

.greenBackground {
    background-color: rgba(0, 160, 64, 0.13);
}

.greenBackgroundDark {
    background-color: #00a040;
}

.greenColor {
    color: #00a040;
}

.stepTitle {
    color: var(--color-tokai);
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    margin: 7% auto 3%;
}

.stepImg {
    display: block;
    width: 80%;
    height: auto;
    margin: 2% auto;
}

.blackButton {
    display: flex;
    align-items: center;
    width: 70%;
    padding: 0.15rem 0.20rem;
    border: none;
    margin: 2% auto 5%;
    background-color: var(--color-text);
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
}

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

.blackButton span {
    flex: 1;
    text-align: center;
    font-weight: 700;
    color: #fff;
}

.borderTopNone { border-top: none; }
.borderBottomNone { border-bottom: none; }


/* ============================================================
   注記（ul.caution）— セクションごとの余白
   ※ は base.css の ul.caution li::after が付ける。本文に ※ を書かない。
   ============================================================ */
ul.caution {
    margin: 0.12rem 0;
}

.loginSignContainer ul.caution,
.stickerCampaignSection ul.caution,
.programInfoSection ul.caution {
    padding: 0;
    line-height: 1.8;
}

.voiceContainer ul.caution,
.stickerCampaignSection ul.caution,
.ImportantNotesList ul.caution {
    padding: 0 2%;
}

.printingMethod ul.caution {
    margin: 3%;
    text-align: left;
    line-height: 1.8;
}

.stickerAcquisitionGuideModalBody ul.caution {
    padding: 0 8% 7% 10%;
    margin: 7% auto 0;
    color: #ff0000;
    font-size: 0.14rem;
}

.greenBackground ul.caution {
    padding: 0 0 0 6%;
    margin: 0 auto 3%;
}

.blackUl ul.caution {
    color: var(--color-text);
    padding: 0 2%;
    margin: 7% auto 3%;
}


/* ============================================================
   番組情報
   ============================================================ */
.programInfoSection .codeListButton {
    width: 100%;
    text-decoration: none;
}

/* ★ 下線は必ず明示する。
   共通の /css/style_v2.css が `a { text-decoration: none }` を当てているため、
   text-decoration-thickness / underline-offset だけ書いても下線は出ない
   （支給コーディングは style_v2.css を読んでいないのでブラウザ既定の下線が
     付いて見えていた＝実装すると下線が消える差分になる）。 */
.programInfoSection .codeListButton .linkUnderline {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 0.01rem;
    text-underline-offset: 0.02rem;
}

.linkBlack {
    margin: 0;
}

.linkBlack a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 0.01rem;
    text-underline-offset: 0.02rem;
}

/* 中央寄せの 1 行キャプション（ul.caution を使わない例外。top.php のコメント参照） */
.centerNote {
    text-align: center;
    line-height: 1.8;
}


/* ---- 余白ユーティリティ（coding 由来） ---- */
.marginbottom { margin-bottom: 8%; }
.margin5 { margin: 5% auto; }
.marginLeft { margin: 3% 5%; }


/* ============================================================
   JR東海 共通フッター下ブロック（tsumashio2026 準拠）
   ★ .footer-content は VoiStock 共通フッター（<footer> の中）でも
     使われている。body 直下のこのブロックだけを狙うため
     `body > .footer-content` で分離する（同名クラス衝突）。
   ============================================================ */
body > .footer-content {
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

.footer-content__button {
    max-width: 4.30rem;
    margin: 0 auto;
    padding: 0.15rem 0.16rem;
    box-sizing: border-box;
}

/* 「その他の推し旅プランを見る」— トップの .toOshitabiTop と同じ見た目に揃える */
.footer-content__button .footer-backButton {
    width: 100%;
    max-width: 4.00rem;
    min-height: 0.60rem;
    padding: 0.10rem 0.16rem;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.02rem solid var(--color-sub2);
    border-radius: 0.10rem;
    background: #ffffff;
    color: var(--color-sub2);
    text-decoration: none;
}

.footer-content__button .backButton__inner {
    font-weight: 700;
    font-size: 0.18rem;
    letter-spacing: 0.03em;
    text-align: center;
    line-height: 1.3;
}

/* 注意事項（白帯は全幅・中の文字は本文と同じカラム幅に収める） */
.footer-content__notice {
    width: calc(100% - 0.18rem);
    max-width: 4.30rem;
    margin: 0 auto;
    font-size: 0.12rem;
    line-height: 2.0;
    font-weight: 400;
    letter-spacing: 0.05em;
    padding-bottom: 0.20rem;
    color: var(--color-text);
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}

.footer-content__notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-content__notice-item {
    position: relative;
    padding-left: 1.2em;
}

.footer-content__notice-item::before {
    content: "※";
    display: block;
    position: absolute;
    left: 0;
}

.footer-content__notice-item a,
.footer-content__notice-item .tokai-text {
    color: var(--color-tokai);
    text-decoration: underline;
}

/* ページトップ（25px の上矢印） */
.footer-content__pagetop {
    padding-bottom: 0.13rem;
    text-align: center;
}

.pageTopButton {
    width: 0.25rem;
    display: block;
    margin: 0 auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.pageTopButton-figure {
    margin: 0;
}

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

/* JR東海ロゴ + コピーライト（地 #D9D9D9・ロゴ49px幅） */
.footer-content__jr {
    background: #D9D9D9;
    padding-top: 0.04rem;
    padding-bottom: 0.06rem;
}

.footer-content__jr-figure {
    width: 0.49rem;
    margin: 0 auto;
}

.footer-content__jr-img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-content__jr-copyright {
    font-size: 0.09rem;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--color-text);
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   NUMERALS 適用先 — 実描画が 700 になるテキスト
   （上の @font-face のコメント参照。ファイル末尾に置いて .zenMaruGothic
     より後勝ちさせている。同じ詳細度なので順序が効く）
   ★ .boldText は宣言 600 だが Zen Maru Gothic に 600 が無いため
     **700 で描画される**ので対象に含める（開催期間・各期間表記・
     「毎週土曜 22:00〜23:00」など数字が一番多いのはここ）。
   ★ 宣言を 500 に戻した場合はこのリストから .boldText を外すこと。
     500 の数字を 900 にすると仮名漢字より逆に太くなる。
   ★ ul.caution / .fontNotoSans は !important で Noto Sans JP 固定。
     Noto Sans JP は可変フォントで数字が細る問題が無いので対象外。
   ============================================================ */
.boldText,
.bigTitle,
.voiceButton__text,
.printingMethodTitle,
.blackButton span,
.ImportantNoteTitle p,
.stickerAcquisitionGuideModalHeader p,
.loginSignContainer .loginRgisterButton .iconButtonText,
.loginSignContainer .toOshitabiTop,
.footer-content__button .backButton__inner {
    font-family: 'ZenMaruGothicNum', 'Zen Maru Gothic', YakuHanJP, sans-serif;
}