@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #F5EEE4;
    /* ベース背景（LP --bg-color） */
    --color-sub1: #ea8bac;
    /* ピンク＝車内アクセント（リボン・ボタン） */
    --color-sub2: #7d9ed2;
    /* ブルー＝周遊アクセント */
    --color-sub3: #ea8bac;
    --color-sub4: #7d9ed2;
    --color-sub5: #ea8bac;
    --color-local: #7d9ed2;
    /* stamprally は青が主役 */
    --color-text: #614C3F;
    /* 本文（LP --text-color こげ茶） */
    --color-button: #ea8bac;
    --font-family: 'Zen Maru Gothic', YakuHanJP, sans-serif;

    /* kisekoi 追加トークン */
    --kisekoi-pink: #ea8bac;
    --kisekoi-blue: #7d9ed2;
    --kisekoi-brown: #988670;
    /* 登録/ログイン/一覧/相互リンクボタン */
    --kisekoi-stampcard: #ccddf9;
    /* スタンプ獲得情報カード背景 */
}


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

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


/* ============================================================
   ★ kisekoi 専用デザイン部品（design/top_shinkansen.jpg / top_stamprally.jpg 準拠）
   REM: 100px = 1rem @ 393px。デザイン px ÷ 100 = rem。
   ============================================================ */

/* LP（.main__wrap）準拠: ページ全体の背景をギンガム(アーガイル)タイルにする。
   bg_body.webp を top center で敷き、下地色は --color-main。
   ★ テンプレは base.css の main::before（position:fixed; inset:0; z-index:-2）が
     全画面を --color-main の単色で塗りつぶす設計。ここを上書きしないと
     body に敷いてもタイルが隠れる。よって main::before にタイルを乗せる。 */
main::before {
    background: var(--color-main) url(../img/bg_body.webp) top center repeat !important;
}

/* --- リボン見出し（両端ノッチのリボン帯） ---
   車内=ピンク / 周遊=青。白文字・太字。 */
.ribbon-heading {
    display: block;
    width: fit-content;
    max-width: 90%;
    margin: 0 auto 0.10rem;
    padding: 0.05rem 0.34rem;
    background: var(--kisekoi-pink);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.16rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-align: center;
    /* 両端を三角ノッチにしたリボン形 */
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.12rem) 50%, 100% 100%, 0 100%, 0.12rem 50%);
}

.ribbon-heading--blue {
    background: var(--kisekoi-blue);
}

/* --- セクションタイトル SVG（見出し画像をそのまま中央配置） --- */
.title-svg {
    display: block;
    margin: 0.06rem auto 0.10rem;
    text-align: center;
}

.title-svg img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 70%;
    height: auto;
}

/* --- 点線区切り（タイトル下） --- */
.dot-sep {
    width: 100%;
    margin: 0.20rem auto;
    border: 0;
    border-top: 0.02rem dashed var(--kisekoi-pink);
}

.dot-sep--blue {
    border-top-color: var(--kisekoi-blue);
}


/* コンテンツは白・ボーダーなし（box01 の白地に馴染ませる。二重枠を出さない） */
.content-holder {
    max-width: 4.30rem;
    background-color: #fff;
    background: #fff;
    border: none;
    border-radius: 0rem;
    box-shadow: none;
    width: 100%;
    padding-left:0.20rem;
    padding-right:0.20rem;
    margin: 0.30rem auto 0.60rem;
}

/* ※ 左右の点線(dots01/02)はデザインに無いため不採用。箱は白＋上下レースのみ。 */
.content-holder::before,
.content-holder::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 0.20rem;
    pointer-events: none;
}

.content-holder::before {
    background: url(../img/sec_line_top.webp) center / 0.71rem 0.20rem repeat-x;
    top: -0.20rem;
}

.content-holder::after {
    background: url(../img/sec_line_bottom.webp) center / 0.71rem 0.20rem repeat-x;
    bottom: -0.20rem;
}


/* --- ギンガム帯（セクション間の区切り。bg_body タイル + 上下レース） --- */
.gingham-band {
    position: relative;
    width: 100%;
    height: 0.70rem;
    background-image: url(../img/bg_body.webp);
    background-repeat: repeat;
    background-size: 0.32rem 0.32rem;
    margin: 0.10rem 0;
}

.gingham-band::before,
.gingham-band::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.14rem;
    background-image: url(../img/sec_line_top.webp);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.gingham-band::before {
    top: 0;
}

.gingham-band::after {
    bottom: 0;
    transform: scaleY(-1);
}

/* --- 茶ボタン: テンプレ(.iconButton / .loginRgisterButton)を茶色にする色モディファイア ---
   デザイン/構造はテンプレのボタンをそのまま使い、背景色だけ茶(--kisekoi-brown)に上書きする。
   （アカウント登録/ログイン/キャンペーンサイト一覧/相互リンク用） */
.iconButton.btn-brown,
.iconButton.btn-brown.button-bg,
.loginRgisterButton.btn-brown,
.loginRgisterButton.btn-brown.button-bg {
    background: var(--kisekoi-brown) !important;
}

/* テンプレ .simpleButton（白地・枠線）の文字色とボーダー色だけ茶に。
   キャンペーンサイト一覧 / 名古屋周遊・新幹線コンテンツ用（アウトライン茶）。 */
.simpleButton.sb-brown {
    color: var(--kisekoi-brown);
    border-color: var(--kisekoi-brown);
}

/* --- ボタン文字をイベントフォント(Zen Maru Gothic)に明示指定 ---
   base.css の .iconButtonText は font-family 未指定で、環境により body 継承が
   効かず別フォントで出るため、ここで明示する。iconButton / login・register /
   simpleButton をまとめて統一。 */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.simpleButton {
    font-family: var(--font-family) !important;
}

/* --- スタンプ獲得情報カード（周遊トップ） --- */
.stamp-info-card {
    position: relative;
    background: var(--kisekoi-stampcard);
    padding: 0.30rem 0.05rem 0.34rem;
    margin: 0.16rem 0;
}

.stamp-info-card::before,
.stamp-info-card::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.14rem;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* content-holder と同じ向き（上=top / 下=bottom 画像）。scaleY 反転は使わない。 */
.stamp-info-card::before {
    top: 0;
    background-image: url(../img/sec_line_bottom.webp);
}

.stamp-info-card::after {
    bottom: 0;
    background-image: url(../img/sec_line_top.webp);
}

.stamp-info-card .stamp-info-title {
    text-align: center;
    color: #5281CB;
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 0.22rem;
    margin-bottom: 0.18rem;
}

/* 上3・下2 の固定レイアウト（デザイン準拠）。6列グリッドに各セル span2 で
   1段目=3枚(1-2/3-4/5-6)、2段目=2枚を中央(2-3/4-5)に寄せる。 */
.stamp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.10rem 0.01rem;
    align-items: start;
}

.stamp-grid .stamp-cell {
    grid-column: span 2;
    width: 100%;
    max-width: 1.60rem;
    justify-self: center;
    text-align: center;
}

.stamp-grid .stamp-cell:nth-child(4) {
    grid-column: 2 / span 2;
}

.stamp-grid .stamp-cell:nth-child(5) {
    grid-column: 4 / span 2;
}

.stamp-grid .stamp-cell img {
    width: 0.80rem;
    height: 0.80rem;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.04rem;
}

.stamp-grid .stamp-cell .stamp-label {
    color: var(--color-black);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.11rem;
    line-height: 1.25;
    /* 2行分の高さを確保して 1行/2行スポットが混在しても円の縦位置が揃うようにする */
    min-height: 0.34rem;
}

/* --- スポット名（周遊のスポット別ブロック見出し） --- */
.spot-name {
    text-align: center;
    color: var(--color-black);
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 0.22rem;
    margin: 0.24rem 0 0.10rem;
}

.spot-caption {
    text-align: center;
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 0.14rem;
    margin: 0.06rem 0 0.10rem;
}

/* --- ノベルティ画像（乗車特典クリアファイル・コンプ特典ポストカード） --- */
.novelty-image {
    width: 100%;
    margin: 0.10rem 0;
}

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

/* --- 特典引換場所カード --- */
.exchange-place-card {
    border: 0.02rem solid var(--kisekoi-pink);
    border-radius: 0.06rem;
    padding: 0.16rem;
    margin: 0.14rem 0;
    text-align: center;
}

.exchange-place-card--blue {
    border-color: var(--kisekoi-blue);
}

.exchange-place-card .ep-head {
    color: var(--kisekoi-pink);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.17rem;
    border-bottom: 0.01rem solid var(--kisekoi-pink);
    padding-bottom: 0.16rem;
    margin-bottom: 0.10rem;
}

.exchange-place-card--blue .ep-head {
    color: var(--kisekoi-blue);
    border-bottom-color: var(--kisekoi-blue);
}

.exchange-place-card .ep-name {
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.22rem;
}

.exchange-place-card .ep-hours {
    color: var(--color-text);
    font-size: 0.20rem;
    margin-top: 0.04rem;
}

/* --- コンプ特典見出し（SVG 未支給のため CSS 見出しで暫定・支給時に .title-svg へ差替） --- */
.complete-heading {
    text-align: center;
    color: var(--kisekoi-blue);
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 0.34rem;
    line-height: 1.2;
    margin: 0.08rem auto 0.10rem;
    -webkit-text-stroke: 0.04rem #fff;
    paint-order: stroke fill;
    text-shadow: 0 0.02rem 0 rgba(125, 158, 210, 0.35);
}