@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #01a6ea;
    /* ページ背景（ウルトラマン・ブルー） */
    --color-sub1: #25308f;
    /* 濃紺（見出し・ボーダー・強調） */
    --color-sub2: #baeaff;
    /* 淡いスカイ（グラデ端・薄背景） */
    --color-sub3: #25308f;
    /* アクセント（濃紺） */
    --color-sub4: #00a7ea;
    /* アクセント淡 */
    --color-sub5: #b2cae4;
    /* 薄青背景（ボックス） */
    --color-local: #fac575;
    /* 差し色（ゴールド/オレンジ） */
    --color-text: #1a1a2e;
    /* テキストカラー */
    --color-button: #25308f;
    /* ボタンカラー */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   ULTRAMAN — 宇宙背景 + 角ばったカード + 上部くっつきヘッダー画像
   （デザイン: 仕様書指示「content-holder 角ばった / header-img 上部くっつけ」）
   base.css の構造は変えず、見た目のみ custom で上書き。
   ============================================================ */

/* 宇宙感のあるディープブルー・グラデーション背景（background_image=false のため
   main::before は --color-main 単色になる。ここでグラデに差し替えてカッコよく） */
main::before {
    background-image: linear-gradient(180deg, #25308f 0%, #0b4ea6 45%, #01a6ea 100%) !important;
    background-color: #01a6ea !important;
}

/* 角ばったカード（radius 0）+ ウルトラマン・ブルーの縁とグロー */
.content-holder {
    padding: 0rem 0rem 0.16rem 0rem;
    border-radius: 0 !important;
    border: 0.02rem solid var(--color-sub1);
    box-shadow: 0 0.04rem 0.14rem rgba(11, 20, 60, 0.35);
    overflow: hidden;
    /* header-img を角にぴったり収める */
}

/* セクションのヘッダー画像を content-holder の最上部にくっつける（余白ゼロ・縁に被せる） */
.section-header-img {
    display: block;
    width: 100%;
}

/* ヘッダー画像を持つ content-holder は本文だけ内側パディング */
.content-holder .ch-body {
    padding: 0 0.16rem;
}

/* 乗車確認リード見出し（画像ヘッダーが無いセクション用の角ばったバー） */
.lead-heading {
    position: relative;
    /* 子（新幹線）の基準 + はみ出しの自己完結 */
    overflow: hidden;
    /* 帯からはみ出す新幹線を帯内でクリップ */
    background: linear-gradient(180deg, var(--color-main) 0%, var(--color-sub1) 100%);
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 0.22rem;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.14rem;
    border-radius: 0;
    text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.35);
    /* 明るい青地でも白文字が沈む */
}

/* 横向き新幹線（/img/shinkansen.png）— 声グラ /seigura の .shinkansen を踏襲。
   リード見出し帯の中を疾走させる。帯からはみ出した分は overflow:hidden でクリップ。
   （top/left は position が無いと無効なので置かない。ずらしたい時のみ relative + 座標で） */
.p-check .charaIcon.shinkansen {
    text-align: center;
    margin: 0rem auto 0rem;
}

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

/* HERO バナーは角ばり・下に少し余白 */
.p-hero .bannerImg img {
    display: block;
    width: 100%;
}

/* ゲーム/店舗などの角ばった画像枠 */
.squared-img {
    display: block;
    width: 80%;
    border-radius: 0;
    margin: auto;
}


/* ============================================================
   ICONBUTTON — カクカク（radius 0）+ 上下ボーダー sub1 / 地色 sub4
   base.css は radius 0.18rem・地色 button・::before の白内枠。ここで上書き。
   ============================================================ */
.iconButton,
.iconButton.button-bg,
.iconButton.white-border {
    border-radius: 0 !important;
    /* カクカク */
    background: var(--color-sub4);
    /* 真ん中 */
    border-top: 0.05rem solid var(--color-sub1);
    /* 上ボーダー */
    border-bottom: 0.05rem solid var(--color-sub1);
    /* 下ボーダー */
    border-left: 0;
    border-right: 0;
}

/* 内側の白い枠（::before）は上下ボーダーと競合するので消す */
.iconButton::before {
    display: none !important;
}


/* ============================================================
   特典引換場所ボックス（店名＋店舗画像＋受付時間）— 角ばったデザイン
   ============================================================ */
.exchange-box {
    max-width: 4.6rem;
    margin: 0.16rem auto 0.10rem;
    background: var(--color-sub5);
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0;
    overflow: hidden;
}

.exchange-box__head {
    background: var(--color-sub1);
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 0.17rem;
    letter-spacing: 0.06em;
    padding: 0.10rem;
}

.exchange-box__body {
    padding: 0.10rem 0.12rem 0.06rem;
}

.exchange-shop {
    text-align: center;
    padding: 0.10rem 0;
}

.exchange-shop+.exchange-shop {
    border-top: 0.01rem dashed rgba(37, 48, 143, 0.35);
}

.exchange-shop__img {
    max-width: 3.4rem;
    margin: 0 auto 0.08rem;
    border: 0.02rem solid var(--color-sub1);
}

.exchange-shop__name {
    color: var(--color-text);
    font-weight: 800;
    font-size: 0.16rem;
    line-height: 1.35;
}

.exchange-shop__hours {
    color: var(--color-text);
    font-size: 0.13rem;
    font-weight: 600;
    margin-top: 0.03rem;
}

.exchange-box__note {
    padding: 0 0.12rem 0.10rem !important;
    margin: 0 !important;
    text-align: left;
}

.exchange-box__note li {
    font-size: 0.11rem;
    color: var(--color-text);
    opacity: 0.85;
    line-height: 1.4;
}

/* certificate ページ（.exchangePage / 白全幅）では引換場所ボックスを内側に収める */
.exchangePage .exchange-box {
    width: 90%;
    max-width: 4.0rem;
}


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


/* ============================================================
   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 はグレーに揃える */
    border-top-color: #6b6b6b !important;
    border-bottom-color: #6b6b6b !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;
}