@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #ab723e;   /* メインカラー（茶：ボタン・ボーダー・見出し） */
    --color-sub2:   #dba576;   /* サブカラー（淡い茶：グラデーション端） */
    --color-sub3:   #9a693d;   /* アクセント（濃い茶） */
    --color-sub4:   #e4598a;   /* アクセント（ピンク） */
    --color-sub5:   #fc6ca4;   /* アクセント濃（ピンク濃） */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #4e2e12;   /* テキストカラー */
    --color-button: #f14b8c;   /* ボタンカラー */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
    /* 見出し・本文の明朝（LP の .fontNotoSerifJP に相当）。
       リーダーの本文は小説組みなのでこちらを使う。 */
    --font-family-serif: 'Noto Serif JP', YuMincho, 'Yu Mincho', 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);
} */


/* ============================================================
   BUTTON — アイコン無しの細長ボタン（.loginRgisterButton.noIcon）
   クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／
   結果画面に戻る）など、「報酬の受け取り」以外のボタンに使う。

   ★ アイコンを付けないときは左右とも省略する（19_button-icons.md）。
     .iconButton のまま中身を文字だけにすると、アイコン用の flex 領域
     （.icon flex:2 / .icon2nd flex:1.5）が残って文字が中央からずれる。
   ★ 地色は .button-bg（var(--color-button)）。企画で別の地色にする場合は
     この下で .loginRgisterButton を上書きする。
   ============================================================ */
button.loginRgisterButton {
    border: 0;
    font-family: inherit;
    font-size: inherit;
    /* ★ color は指定しない（.white-text より詳細度が高く、白文字を打ち消してしまう） */
}

.loginRgisterButton.noIcon {
    padding: 0.15rem 0.05rem;   /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}

.loginRgisterButton.noIcon .iconButtonText {
    margin-left: 0;
    margin-right: 0;            /* アイコン分の右マージンを消して中央に置く */
}


/* ============================================================
   BUTTON BACKGROUND — 支給のアーガイル柄
   .iconButton のみ。地色（var(--color-button)）の代わりに柄を敷く。
   （アカウント新規登録・ログインの .loginRgisterButton は従来どおり地色）
   ★ 非活性は下の DISABLED ブロックが !important の灰グラデで上書きするので、
     柄が乗るのは活性ボタンだけ。
   ★ 画像が読めなかったときに文字が読めなくならないよう、
     background-color に従来の地色を残す（画像はその上に重なる）。
   ============================================================ */
.iconButton.button-bg {
    background-color: var(--color-button);
    background-image: url("../img/button_bg.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/* ============================================================
   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;
}

/* ------------------------------------------------------------
   非活性アイコンを濃い灰色にする（任意 — 白系ボタンの企画のみ）

   上のデフォルトは「暗い灰グラデの地 ＋ 白のアイコン/文字」なので、
   アイコンは白のままでよい。
   LP トンマナに合わせて disabled の地を白〜薄灰に上書きした企画では、
   白アイコンが地に溶けて消えるため、下のブロックのコメントを外す。

   アイコンは <img> の外部 SVG なので fill / color では色を変えられない。
   grayscale(1) を掛けると、企画のメインカラーが輝度どおりの灰色に落ちる
   （例: #8a579a → #676767）ので、これで「濃い灰色」を作る。
   ------------------------------------------------------------ */
/* .iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    filter: grayscale(1);
} */


/* ============================================================
   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;
}


/* ============================================================
   LP 準拠のコンテンツ意匠
   https://recommend.jr-central.co.jp/oshi-tabi/oregairu15th/ の
   .contents__wrap / .story__wrap / .note__list を移植。
   クラス名は LP のまま。数値は LP の px ÷ 100 = rem（デザイン幅 430 基準）。
   ★ base.css は触らず、ここで上書きする。
   ============================================================ */

/* ---- 白カード（LP .contents__wrap）------------------------
   テンプレ既定の .content-holder（角丸なし＋1本線）を LP の
   角丸＋淡い影＋上下の飾り枠に置き換える。 */
.content-holder {
    position: relative;
    border: none;
    border-radius: 0.20rem;
    box-shadow: 0 0 0.10rem 0 rgba(229, 211, 192, 1);
    /* ★ 下だけ少し広く取る（飾り枠 ::after と本文が重なるのを避ける）。
       上（::before）の下には中央寄せのリード文が来るので 0.40rem で干渉しない。 */
    padding: 0.40rem 0.15rem 0.40rem;
    /* overflow:hidden は付けない（.iconButton の影が切れる）。
       飾り枠は幅 94% で内側に収まるのではみ出さない。 */
}

/* 上下の飾り枠（LP は ::before/::after で deco01 を敷いている） */
.content-holder::before,
.content-holder::after {
    content: "";
    position: absolute;
    left: 3%;
    width: 94%;
    aspect-ratio: 325 / 47;
    background: url("../img/deco_frame.webp") no-repeat center center / 100% 100%;
    pointer-events: none;
}

.content-holder::before {
    top: 0.10rem;
}

.content-holder::after {
    bottom: 0.10rem;
    transform: scale(1, -1);
}

/* ---- リード文（LP .sec__lead）---------------------------- */
.sec__lead {
    text-align: center;
    font-size: 0.15rem;
    color: var(--color-text);
    font-weight: 700;
    line-height: 160%;
    margin: 0.10rem 0 0;
}

.sec__lead span {
    display: block;
    margin-top: 0.10rem;
    font-size: 0.11rem;
    font-weight: 400;
}


/* ---- 配信スケジュール（LP .story__wrap）------------------- */
.story__wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.20rem;
    padding-block: 0.34rem;
    margin-top: 0.16rem;
}

/* 上下の区切り飾り（LP は deco02） */
.story__wrap::before,
.story__wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 78%;          /* .deco-line と同じ幅に揃える */
    aspect-ratio: 600 / 28;
    background: url("../img/deco_divider.webp") no-repeat center center / 100% 100%;
    pointer-events: none;
}

.story__wrap::before {
    top: 0;
}

.story__wrap::after {
    bottom: 0;
    transform: translateX(-50%) scale(1, -1);
}

.story__list {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.story__list dl {
    display: flex;
    flex-direction: column;
    gap: 0.10rem;
    margin: 0;
}

/* 「1本目」の六角タグ。SVG の上に文字を重ねる（LP と同じ作り） */
/* 「N本目」のリボンタグ。中身は .tagLabel（clip-path のシェイプ）。 */
.story__list dt {
    display: flex;
    justify-content: center;
}

/* 日付（明朝・茶色）。曜日だけ小さく */
.story__list dd {
    margin: 0;
    color: var(--color-sub3);
    text-align: center;
    font-family: var(--font-family-serif);
    font-size: 0.15rem;
    font-weight: 800;
    line-height: 140%;
    letter-spacing: 0.03rem;
}



/* 期間外の話はトーンを落とす（COMING SOON / 終了） */
.story__list li.is-closed dd,
.story__list li.is-before dd {
    opacity: 0.55;
}

.story__list .storyButton {
    margin-top: 0.04rem;
}


/* ---- 注記（LP .note__list）--------------------------------
   マークアップはテンプレの ul.caution のまま（※ は li::after が出す）。
   見た目だけ LP に合わせる。 */
ul.caution {
    display: flex;
    flex-direction: column;
    gap: 0.03rem;
}

ul.caution li {
    font-size: 0.11rem;
    line-height: 150%;
    color: #85786c;
}

/* ★ 引換場所ボックス（.novelty-location）の中の注記は黒のまま。
   上の色指定は li に直接当たるので、除外しないとボックス内まで灰色になる。 */
ul.caution.novelty-caution li,
.novelty-location ul.caution li {
    color: inherit;
}

/* 白カードの外に置く注記は中央寄せの LP に合わせない（読みやすさ優先で左寄せのまま） */


/* ---- セクション見出し画像（LP の <h2>。白カードの外に置く）---- */
.sec-title {
    width: 96%;          /* .content-holder と同じ幅にして左右を揃える */
    margin: 0 auto 0rem;
    line-height: 0;
}

.sec-title img {
    width: 100%;
    height: auto;
}


/* ---- 飾り罫（deco02）。テンプレの <hr class="sub1-border"> の置き換え ----
   セクション内の区切りをすべてこれに統一してトンマナを合わせる。 */
.deco-line {
    width: 78%;
    aspect-ratio: 600 / 28;
    background: url("../img/deco_divider.webp") no-repeat center center / 100% 100%;
    margin: 0.18rem auto;
}

/* ブロック下側の飾り罫は上下反転させる（LP の ::after と同じ） */
.deco-line--flip {
    transform: scale(1, -1);
}


/* ---- リボンタグ（LP の「1本目」「参加方法」と同じ形）------------
   LP は固定幅の SVG に文字を重ねているが、それだと文字数が増えたときに
   左右の余白が無くなる（「オリジナルカード」で発生）。
   同じ形を clip-path で作り、padding を持たせて文字量に追従させる。
   ノッチの深さは LP の SVG と同じ約 5px 固定（幅で伸縮させない）。 */
.tagLabel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.06rem 0.26rem;
    background: var(--color-sub3);
    color: #fff;
    text-align: center;
    font-size: 0.13rem;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.026rem;
    clip-path: polygon(0 0,
            100% 0,
            calc(100% - 0.055rem) 50%,
            100% 100%,
            0 100%,
            0.055rem 50%);
}

/* ノベルティ名・配布場所などの見出し用（LP の 110×28 相当） */
.tagLabel--pink {
    background: var(--color-sub4);
    padding: 0.07rem 0.30rem;
    font-family: var(--font-family-serif);
    font-size: 0.15rem;
    font-weight: 800;
    letter-spacing: 0.03rem;
}


/* ---- 開催期間（イントロ）--------------------------------- */
.event-period {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    margin: 0.14rem 0 0.04rem;
}

.event-period__date {
    margin: 0;
    color: var(--color-sub3);
    text-align: center;
    font-size: 0.16rem;
    font-weight: 800;
    line-height: 140%;
    letter-spacing: 0.03rem;
}

/* 日付の共通組版は .pd / .dow（下の「日付の組版」を参照） */


/* ---- ノベルティ見出し＋期間（乗車特典）-------------------- */
.novelty-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.14rem;
}

.novelty-head__date {
    margin: 0;
    color: var(--color-sub3);
    text-align: center;
    font-size: 0.15rem;
    font-weight: 800;
    line-height: 140%;
    letter-spacing: 0.03rem;
}




/* ---- 発行期間 / プリント期間 -------------------------------
   ラベルはピル（LP の STEP と同じ形）、日付は明朝。 */
/* ---- 発行期間 / プリント期間 -------------------------------
   LP の .step__wrap（クリーム地の囲み＋角のリボン飾り）と同じ見た目。
   見出しは .tagLabel--pink、日付は明朝。 */
.period-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    width: 100%;
    margin-top: 0.20rem;
    padding: 0.20rem 0.16rem 0.24rem;
    border-radius: 0.10rem;
    border: 0.01rem solid #e5d9be;
    background: #fff8e8;
    overflow: hidden;
}

/* 角のリボン飾り（LP の deco03） */
.period-list::before,
.period-list::after {
    content: "";
    position: absolute;
    width: 18.8%;
    aspect-ratio: 116 / 110;
    background: url("../img/deco_corner.webp") no-repeat center center / 100% 100%;
    pointer-events: none;
}

.period-list::before {
    top: 0;
    left: 0;
}

.period-list::after {
    bottom: 0;
    right: 0;
    transform: scale(-1, -1);
}

.period-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
}

.period-row + .period-row {
    padding-top: 0.14rem;
    border-top: 0.01rem solid #e5d9be;
}

.period-list dt {
    display: flex;
    justify-content: center;
}

.period-list dd {
    margin: 0;
    color: var(--color-sub3);
    text-align: center;
    font-size: 0.15rem;
    font-weight: 800;
    line-height: 140%;
    letter-spacing: 0.03rem;
}

/* 日付ではなく説明文を入れる行（例: 配布場所）。太い日付組みだと重いので本文寄りにする */
.period-list dd.fontNotoSans {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.13rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.02rem;
}


/* ---- 日付の組版 -------------------------------------------
   periodHtml()（info.inc.php）が出力する形:
     <span class="pd">2026年9月18日<i class="dow">(金)</i></span>～<span class="pd">…</span>
   .pd で「YYYY年M月D日(曜)」を1かたまりにして、途中で折り返させない。
   改行できるのは「～」の位置だけになる。 */
.pd {
    white-space: nowrap;
}

.dow {
    font-style: normal;
    font-size: 0.11rem;
    letter-spacing: 0.022rem;
}


/* ---- COMING SOON（導線がまだ無いものはボタンにしない）--------
   LP の .cs と同じ扱い（注記色・太字・中央）。 */
.comingSoon {
    margin: 0.14rem 0 0;
    color: #85786c;
    text-align: center;
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0.02rem;
}


/* ---- 白カードの外に置くページ操作ボタン（トップへ戻る）------ */
.pageBackButton {
    display: block;
    width: 96%;
    margin: 0.16rem auto 0;
}