@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 声たび volume02
   base.css のデフォルトをここで上書きするだけ。base.css は触らない。

   REM: デザイン px ÷ 100 = rem（100px = 1rem）。通常の rem 換算と混同しない。
   ★ volume01 は css/style.css + buttons.css + color.css の独自 3 枚構成で、
     文字サイズが clamp() ベースだった。volume02 はテンプレの base.css に載せ、
     ここには「声たび固有のパーツ」と「配色」だけを置く。
   ============================================================ */


/* ============================================================
   BRAND COLORS — volume01 の css/color.css と同じ値
   ============================================================ */
:root {
    --color-main:   #8e8e8e;   /* ページ背景色（背景画像の下地） */
    --color-text:   #000000;
    --color-black:  #000000;
    --color-white:  #ffffff;

    --color-sub1:   #14659E;   /* 声たびブルー（見出し・ボーダー・主ボタン） */
    --color-sub2:   #D52C83;   /* 声たびピンク */
    --color-sub3:   #F3D822;   /* イエロー */
    --color-sub4:   #000000;   /* ブラック */
    --color-sub5:   #FF0000;   /* 注意喚起の赤 */

    --color-tokai:  #ED6D00;   /* JR東海オレンジ */
    --color-local:  #ED6D00;

    --color-button: var(--color-sub1);
    --font-family:  YakuHanJP, 'Noto Sans JP', sans-serif;
}


/* ============================================================
   NO-WRAP — 人名・固有名詞・リンク・ボタン名を行末で割らない
   ============================================================ */
.nw {
    white-space: nowrap;
}


/* ============================================================
   FORM ELEMENT FONT RESET — 削除しないこと

   ★ <button> / <input> / <select> / <textarea> は UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない。
     :root の --font-family や body に指定しても**ボタンの文字だけ Arial** になる。
   ★ ヘッドレス Chrome では再現しないので、ローカル描画だけで判断しないこと。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.simpleButton,
.toOshitabiTop,
.va-btn,
.how-to-access-btn,
.copyButton {
    font-family: var(--font-family);
}

/* 車内イントロのボタンだけ明朝（volume01 の fontNotoSerif 指定を踏襲） */
.fontNotoSerif {
    font-family: 'Noto Serif JP', serif;
}


/* ============================================================
   CONTENT HOLDER — 角丸の白カード（volume01 の見た目）

   ★ 共有の /css/style_v2.css が全ページで
       .content-holder { box-shadow: 0 0 0.03rem #ccc; }
     を当てている。base.css にも custom.css にも書いていないため grep で
     見つからず、セクション上辺に薄いグレー線が出る。ここで消す。
   ============================================================ */
.content-holder {
    box-shadow: none;
    border: none;
    border-radius: 0.20rem;
    background-color: var(--color-white);
    /* ★ 中央寄せを明示する。base.css の .content-holder は margin-top しか
       持たず、左右の auto は共有 /css/style_v2.css 側に頼っている。
       読み込み順や将来の変更で崩れると「カードが右に寄る」ので固定する。
       見出し帯（.section-heading）と幅を一致させないと段差が出る。 */
    width: 96%;
    max-width: 4.20rem;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   VOICE ACTOR CARDS — 声優プロフィール
   ============================================================ */
.voice-actor-grid {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    margin: 0.20rem 0;
}

.voice-actor-card {
    background: var(--color-white);
    border-radius: 0.14rem;
    overflow: hidden;
    box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.12rem;
    gap: 0.14rem;
    box-sizing: border-box;
}

.voice-actor-card img {
    width: 1.00rem;
    height: auto;
    flex-shrink: 0;
    border-radius: 0.08rem;
    display: block;
}

.voice-actor-card .va-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.10rem;
}

.voice-actor-card .va-name {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--color-text);
    line-height: 1.4;
    text-align: center;
}

.voice-actor-card .va-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.44rem;
    border-radius: 0.08rem;
    border: 0.02rem solid var(--color-black);
    background: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-black);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}


/* ============================================================
   HOW-TO — 乗車コード利用方法のアコーディオン
   ============================================================ */
.how-to-toggle {
    padding: 0 !important;
}

.how-to-toggle {
    width: 92%;
    margin: 0.16rem auto 0.10rem;
}

/* タップできると分かるバー（薄い地色 + 角丸 + 右端にシェブロン） */
.how-to-toggle-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.10rem;
    position: relative;
    padding: 0.14rem 0.18rem 0.14rem 0.20rem;
    border-radius: 0.12rem;
    background: rgba(20, 101, 158, 0.08);
    border: 0.01rem solid rgba(20, 101, 158, 0.25);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--color-sub1);
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.how-to-toggle-summary:active {
    background: rgba(20, 101, 158, 0.14);
}

.how-to-toggle-label {
    flex: 1;
    text-align: left;
}

/* 既定のマーカーを全ブラウザで隠す */
.how-to-toggle-summary::-webkit-details-marker {
    display: none;
}

.how-to-toggle-summary::marker {
    display: none;
}

/* シェブロン（文字の ▼ ではなく線で描く） */
.how-to-toggle-icon {
    flex: 0 0 auto;
    width: 0.12rem;
    height: 0.12rem;
    border-right: 0.025rem solid var(--color-sub1);
    border-bottom: 0.025rem solid var(--color-sub1);
    transform: rotate(45deg) translateY(-0.02rem);
    transition: transform 0.25s ease;
}

details[open] .how-to-toggle-icon {
    transform: rotate(-135deg) translateY(-0.02rem);
}

.how-to-content {
    overflow: hidden;
    display: none;
    padding: 0.06rem 0.04rem 0;
}

.how-to-header {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0.10rem auto 0.04rem;
    padding: 0.07rem 0.24rem;
    border-radius: 0.30rem;
    color: var(--color-white);
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
}

.how-to-header--tokai { background: var(--color-tokai); }
.how-to-header--sub1  { background: var(--color-sub1); }

.how-to-green-text {
    color: var(--color-sub1) !important;
}

.how-to-steps {
    display: flex;
    flex-direction: column;
    padding: 0.16rem 0 0.08rem;
    gap: 0;
}

.how-to-step {
    display: flex;
    gap: 0.12rem;
    padding-bottom: 0.20rem;
    position: relative;
}

/* ステップ間の縦の連結線 */
.how-to-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.20rem;
    top: 0.42rem;
    bottom: 0;
    width: 0.02rem;
    background: #e0e0e0;
}

.step-label {
    font-weight: 800;
    font-size: 0.11rem;
    letter-spacing: 0.02em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 0.42rem;
    flex-shrink: 0;
    padding-top: 0.02rem;
}

.step-num {
    font-size: 0.26rem;
    font-weight: 800;
    line-height: 1;
    display: block;
}

.step-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.step-desc {
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;   /* URL が長くても枠を突き抜けない */
}

.how-to-access-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    height: 0.56rem;
    margin: 0.10rem auto;
    border-radius: 0.10rem;
    border: none;
    background: var(--color-sub1);
    color: var(--color-white);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0.03rem 0.08rem rgba(20, 101, 158, 0.35);
    -webkit-user-select: none;
    user-select: none;
}

.how-to-access-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0.01rem 0.04rem rgba(20, 101, 158, 0.30);
}


/* ============================================================
   GOLD BORDER — トップの区切り装飾（volume01 踏襲）
   ============================================================ */
.goldborder {
    border-width: 0.02rem;
    border-style: solid;
    border-image-source: linear-gradient(135deg, var(--color-sub2), #fff, var(--color-sub1), var(--color-sub2));
    border-image-slice: 1;
    width: 35%;
    margin: auto;
    border-radius: 0.40rem;
}


/* ============================================================
   SERIAL CODE — 乗車コードの選択グリッド（serialcode/choose.php）
   ★ 6 種を 2 列で並べる。volume01 は 4 種だったので 2 行、volume02 は 3 行。
   ============================================================ */
.print-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.05rem;
    margin: 0.10rem 0;
}

.print-items-grid .ImgText {
    padding: 0;
    text-align: center;
    cursor: pointer;
}

.print-items-grid .ImgText .cardName {
    font-weight: 600;
    font-size: var(--fs-sm);
    margin: 0.10rem auto;
}

.print-items-grid .ImgText img {
    width: 90%;
}


/* ============================================================
   CHOICE MODAL — 「〜を選択しますか？」（choose.php の #askPrompt）

   本体のデザインは base.css の .askPromptModal（テンプレ最新の確認モーダル）。
   ここは声たび固有の差分だけを足す。

   ★★ `.modal` / `.modal-content` を使わない理由:
     共通ヘッダー（headNavi.inc.php）の #alertModal が同じクラスを使っており、
     position/transform を当てるとコピー完了アラートが
     「左下に出てから中央へ動く」挙動になる（2026-09-18 に実際に発生）。
     さらに共有 /css/style_v2.css の `.modal` は
       display: none; … display: flex;
     を同一ルール内で二重指定していて flex が後勝ちし、常時表示になる。
     askPromptModal はこの2つを avoid するための命名。**戻さないこと。**
   ============================================================ */

/* 確認文は 1 行の短文なので中央寄せ（base.css の既定は左寄せ）。 */
#askPrompt .askPromptModal__body {
    text-align: center;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

/* 選んだ「お寺 × 声優」。行を分けて主役にする。 */
#askPrompt .choiceName {
    display: block;
    margin-bottom: 0.06rem;
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1.45;
}

/* 声優の性別で色を変える（トップのカード・ボタンと同じ規則）。
   男性 = sub1(#14659E) / 女性 = sub2(#D52C83)。JS が is-sub1 / is-sub2 を付ける。 */
#askPrompt .choiceName.is-sub1 { color: var(--color-sub1); }
#askPrompt .choiceName.is-sub2 { color: var(--color-sub2); }


/* ============================================================
   JR東海 共通フッター下ブロック（tsumashio2026 / kyomaf2026 準拠）

   ★ .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 0;
    box-sizing: border-box;
}

.footer-content__button .footer-backButton {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 注意事項（白帯は全幅・中の文字は本文と同じカラム幅に収める） */
.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);
}

.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東海ロゴ + コピーライト */
.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);
}

/* ============================================================
   SECTION HEADING — セクション見出しの帯（テンプレ custom.css 準拠）
   content-holder の外に置き、カードの上に重ねる。
   ============================================================ */
.section-heading {
    width: 96%;
    max-width: 4.20rem;
    margin: 0.24rem auto 0;
    text-align: center;
    padding: 0.16rem 0.16rem 0.14rem;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    border-radius: 0.20rem 0.20rem 0 0;
    position: relative;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: 0.06rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.48rem;
    height: 0.04rem;
    background: var(--color-sub3);
    border-radius: 0.02rem;
}

.section-heading-text {
    display: block;
    color: var(--color-white);
    font-size: 0.20rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.35;
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.20);
}

/* 導入行は小さなタグにして、主見出しとの階層を明確にする */
.section-heading-text .sub {
    display: block;              /* ★ 独立行。inline-block だと主見出しと同じ行に並ぶ */
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.12rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 0.05rem 0.12rem;
    margin-bottom: 0.08rem;
    border-radius: 0.20rem;
    background: rgba(255, 255, 255, 0.22);
    border: 0.01rem solid rgba(255, 255, 255, 0.55);
    text-shadow: none;
}

/* 3 行になる見出し（乗車コード）は行間を少し詰める */
.section-heading-text {
    line-height: 1.3;
}

/* 帯の直下に来るカードは上の角丸を消して continuous に見せる */
.section-heading + .content-holder {
    border-radius: 0 0 0.20rem 0.20rem;
    margin-top: 0;
    padding-top: 0.16rem;
}


/* ============================================================
   LEAD BADGE — 「推し旅コラボ実施中！」のピル
   ============================================================ */
.lead-badge {
    display: inline-block;
    margin: 0.04rem auto 0.16rem;
    padding: 0.07rem 0.22rem;
    border-radius: 0.30rem;
    background: linear-gradient(135deg, var(--color-sub2) 0%, var(--color-tokai) 100%);
    color: var(--color-white);
    font-size: 0.16rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 0.03rem 0.08rem rgba(213, 44, 131, 0.28);
}


/* ============================================================
   COPY BLOCK — 監修文言の本文（行間と余白を本文用に整える）
   ============================================================ */
/* ★ 本文は 500。見出し(700〜800)・強調(.em)との強弱を作る。
   600 のままだと全部が太く見え、どこが重要か分からなくなる。 */
.copy-block {
    width: 92%;
    margin: 0 auto 0.18rem;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.85;
    color: var(--color-text);
    text-align: left;
}

.copy-block + .copy-block {
    margin-top: -0.04rem;
}

/* 本文中で押さえたい条件だけ太く（文言は足さずマークアップのみ） */
.copy-block .em {
    font-weight: 800;
}

/* 見出し直下に置く短い説明（中央寄せ） */
.copy-block--center {
    text-align: center;
    margin-top: 0.14rem;
    margin-bottom: 0.14rem;
}


/* ============================================================
   SUB HEADING — カード内の小見出し（左に色バー）
   ============================================================ */
.sub-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    width: 92%;
    margin: 0.06rem auto 0.14rem;
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
}

.sub-heading::before,
.sub-heading::after {
    content: '';
    flex: 1;
    height: 0.02rem;
    background: linear-gradient(90deg, transparent, var(--color-sub1));
}

.sub-heading::after {
    background: linear-gradient(90deg, var(--color-sub1), transparent);
}


/* ============================================================
   VOICE ACTOR CARDS — 声優プロフィール
   配色は性別で決まる（男性 sub1 / 女性 sub2）。
   ============================================================ */
/* ★ 4人を縦積みにすると画面が長くなりすぎるので 2×2 のグリッドにする。 */
.voice-actor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.12rem;
    width: 94%;
    margin: 0.16rem auto 0.18rem;
}

.voice-actor-card {
    position: relative;
    background: var(--color-white);
    border-radius: 0.14rem;
    overflow: hidden;
    box-shadow: 0 0.02rem 0.10rem rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.13rem 0.08rem 0.10rem;
    gap: 0.07rem;
    box-sizing: border-box;
}

/* 上端の性別カラーバー（縦型なので左バーから上バーに変更） */
.voice-actor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.05rem;
}

.voice-actor-card.va-sub1::before { background: var(--color-sub1); }
.voice-actor-card.va-sub2::before { background: var(--color-sub2); }

/* ★ 支給写真の比率が 1 点だけ違う（神谷浩史 1080×1530 = 1:1.417／
   他の 3 点は 1:1.5）ため、height:auto のままだとカードの高さが揃わない。
   羊宮妃那（500×750）の 1:1.5 に固定し、object-fit:cover で吸収する。
   ・比率が同じ 3 点はトリミングが発生しない
   ・神谷浩史だけ左右が計 5px ほど詰まる（顔は中央なので切れない）
   ★ 正方形にすると顔が切れるので縦長は維持する。 */
.voice-actor-card img {
    width: 0.92rem;
    height: 1.38rem;          /* = 0.92rem × 1.5 */
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border-radius: 0.10rem;
    display: block;
}

.voice-actor-card .va-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.voice-actor-card .va-name {
    font-weight: 800;
    font-size: var(--fs-base);
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.02em;
}

.voice-actor-card.va-sub1 .va-name { color: var(--color-sub1); }
.voice-actor-card.va-sub2 .va-name { color: var(--color-sub2); }

/* ★ 主 CTA（車内イントロ）との優先順位を付けるため枠線型。
   性別カラーは枠と文字で保つ。 */
.voice-actor-card .va-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.36rem;
    border-radius: 0.18rem;
    border: 0.015rem solid var(--color-sub1);
    background: var(--color-white);
    font-size: 0.12rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-sub1);
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.voice-actor-card.va-sub2 .va-btn { border-color: var(--color-sub2); color: var(--color-sub2); }

.voice-actor-card .va-btn:active { transform: scale(0.98); }

/* ★ 0.09rem は 375px 端末で 7.8px になり読めない。11px を下限にする。 */
.voice-actor-card .va-note {
    font-size: 0.11rem;
    font-weight: 500;
    color: #888;
    text-align: center;
    line-height: 1.3;
}


/* ============================================================
   TEMPLE BLOCK — お寺ごとのブロック（写真 + 名前 + ボタン）
   ★ 白カードの中にもう一枚白カードを入れると、ボタンの幅が一段狭くなる。
     入れ子はやめて、写真だけを角丸で見せ、ボタンは他セクションと同じ幅にする。
   ★ お寺名は写真の下辺に暗いグラデーションを敷いて大きく載せる。
   ============================================================ */
.temple-card {
    width: 100%;
    margin: 0.08rem 0 0.04rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.temple-card__figure {
    position: relative;
    width: 96%;
    margin: 0 auto;
    line-height: 0;
    border-radius: 0.14rem;
    overflow: hidden;
    box-shadow: 0 0.02rem 0.10rem rgba(0, 0, 0, 0.12);
}

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

/* 名前は写真の下辺いっぱいのグラデーション帯に */
.temple-card__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.40rem 0.18rem 0.12rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 55%, rgba(0, 0, 0, 0) 100%);
    color: var(--color-white);
    font-size: 0.28rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-align: left;
    text-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.55);
}

.temple-card__body {
    padding: 0.12rem 0 0.02rem;
}

/* ボタンは乗車コードセクションと同じ幅（96%）・同じ高さ。
   文字はデフォルトの配分だと「ガイドのイントロを聴く」が折れるので、
   幅を文字側に寄せ、声優名を主役にする。 */
.temple-card__body .iconButton {
    width: 96%;
    max-width: 4.00rem;
    height: 0.70rem;
    margin: 0 auto 0.10rem;
}

.temple-card__body .iconButton .icon    { flex: 1.4; }
.temple-card__body .iconButton .icon2nd { flex: 1.1; }

.temple-card__body .iconButton .icon img    { width: 0.34rem; height: 0.34rem; }
.temple-card__body .iconButton .icon2nd img { height: 0.28rem; }

.temple-card__body .iconButton .iconButtonText {
    flex: 6;
    font-size: 0.14rem;
    font-weight: 600;
    line-height: 1.25;
    padding-right: 0;
    letter-spacing: 0.01em;
}

.temple-card__body .iconButton .btn-va {
    display: block;
    margin-top: 0.02rem;
    font-size: 0.21rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}


/* ============================================================
   CAUTION — 白カードの中の ※注記
   ★ .content-holder は横 padding を持たないので、caution がカードの
     端から端まで貼り付いて読みにくくなる。ここで横余白を補う。
     （子要素に calc() で個別パッチを当てるのは禁止・共通でここに当てる）
   ============================================================ */
.content-holder > ul.caution,
.content-holder ul.caution {
    width: 92%;
    margin: 0.12rem auto 0.14rem;
    line-height: 1.9;
}

/* 利用方法アコーディオンの中は既に padding があるので詰めない */
.how-to-content ul.caution {
    width: 100%;
    margin: 0.08rem 0 0;
}


/* ============================================================
   SECONDARY BUTTON — 白地・枠線の第二ボタン
   主ボタン（塗り）と並べたとき、どちらを押すべきかが一目で分かるようにする。
   ============================================================ */
.iconButton.iconButton--outline {
    background: var(--color-white);
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.08);
}

.iconButton.iconButton--outline::before {
    border: 0.02rem solid var(--color-sub1);
}

.iconButton.iconButton--outline .iconButtonText {
    color: var(--color-sub1);
}


/* ============================================================
   EXTERNAL NOTE — 「(外部サイトへ遷移します)」の小さな注記
   ============================================================ */
/* ★ 下限は 0.11rem（375px で 9.6px）。これ以下にしない。 */
.ext-note {
    margin: 0.04rem auto 0.10rem;
    font-size: 0.11rem;
    font-weight: 500;
    color: #888;
    text-align: center;
    line-height: 1.4;
}


/* ============================================================
   CODE GROUP — 乗車コードの表示単位（履歴 / 発行結果）
   お寺×声優ごとに「カード画像 + 名前 + コード + 使用期間」を1ブロックで見せる。
   ============================================================ */
.code-group {
    width: 92%;
    margin: 0.12rem auto 0.16rem;
    padding: 0.14rem 0.12rem 0.10rem;
    border-radius: 0.14rem;
    background: var(--color-white);
    box-shadow: 0 0.02rem 0.10rem rgba(0, 0, 0, 0.10);
    border-top: 0.05rem solid var(--color-sub1);
    box-sizing: border-box;
}

.code-group--sub2 { border-top-color: var(--color-sub2); }

.code-group__head {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    margin-bottom: 0.10rem;
}

.code-group__thumb {
    width: 1.20rem;
    height: auto;
    flex-shrink: 0;
    border-radius: 0.08rem;
    display: block;
}

.code-group__name {
    flex: 1;
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-align: left;
    color: var(--color-text);
}

/* 発行結果ページ: カードを大きく・中央に */
.code-group--single {
    text-align: center;
    padding-top: 0.16rem;
}

.code-group__card {
    width: 70%;
    max-width: 2.60rem;
    height: auto;
    display: block;
    margin: 0 auto 0.10rem;
    border-radius: 0.10rem;
}

.code-group--single .code-group__name {
    text-align: center;
    font-size: var(--fs-lg);
    margin-bottom: 0.08rem;
}

.code-group .code-container {
    margin: 0.06rem auto 0.04rem;
    max-width: 100%;
}

.code-group__expire {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #555;
    text-align: center;
    margin: 0.02rem 0 0.08rem;
}

.code-group__expire--strong {
    font-size: var(--fs-base);
    font-weight: 800;
    color: var(--color-sub1);
}

.code-group--sub2 .code-group__expire--strong { color: var(--color-sub2); }


/* ============================================================
   EMPTY STATE — 取得済みコードが 1 枚も無いとき
   ============================================================ */
.empty-state {
    width: 92%;
    margin: 0.16rem auto 0.20rem;
    padding: 0.22rem 0.12rem;
    border-radius: 0.14rem;
    background: rgba(20, 101, 158, 0.06);
    color: #555;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}


/* ============================================================
   CHOOSE GRID — 選択肢カードをタップできる見た目に
   ============================================================ */
.print-items-grid {
    width: 92%;
    margin: 0.10rem auto 0.08rem;
    gap: 0.10rem;
}

.print-items-grid .ImgText {
    padding: 0.08rem 0.06rem 0.10rem;
    border-radius: 0.12rem;
    background: var(--color-white);
    box-shadow: 0 0.02rem 0.10rem rgba(0, 0, 0, 0.10);
    border: 0.01rem solid rgba(20, 101, 158, 0.18);
}

.print-items-grid .ImgText:active {
    transform: scale(0.98);
}

.print-items-grid .ImgText .cardName {
    font-weight: 800;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    margin: 0 auto 0.06rem;
    color: var(--color-text);
}

.print-items-grid .ImgText img {
    width: 100%;
    border-radius: 0.08rem;
}


/* ============================================================
   CHOOSE — お寺ごとの区切り見出し
   ★ 6 種を 2 列で流すと 2 行目に興福寺と薬師寺が混在して、
     どこまでが同じお寺か分からなくなる。お寺名で区切る。
   ============================================================ */
.choose-temple + .choose-temple {
    margin-top: 0.06rem;
}

.choose-temple__name {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    width: 92%;
    margin: 0.14rem auto 0.02rem;
    font-size: var(--fs-md);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-sub1);
}

.choose-temple__name::after {
    content: '';
    flex: 1;
    height: 0.015rem;
    background: rgba(20, 101, 158, 0.30);
}