@charset "UTF-8";
/* LP のボタン/見出し用英字フォント（LP: --ff-en） */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #ff5cae;
    /* ページ背景色 */
    --color-sub1: #ff5cae;
    /* メインカラー（ピンク：ボタン・見出し） */
    --color-sub2: #e4f8f3;
    /* サブカラー（薄ミント） */
    --color-sub3: #66ead9;
    /* アクセント（ミント） */
    --color-sub4: #ff5cae;
    /* アクセント（ピンク） */
    --color-sub5: #e4f8f3;
    /* 薄ミント背景 */
    --color-local: #f1d511;
    /* 差し色（黄色） */
    --color-text: #000000;
    /* テキストカラー */
    --color-button: #ff5cae;
    /* ボタンカラー（ピンク：ボタン・見出し） */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}

/* ============================================================
   斉木楠雄 — LP 準拠のカスタム（content-holder 方眼背景 / ボーダー無し / バッジ）
   ============================================================ */

/* テキストのアンチエイリアス（仕様書 備考） */
body,
.fontEvent,
.fontNotoSans {
    -webkit-font-smoothing: antialiased;
}

/* content-holder: LP の方眼（1px グリッド）背景・ボーダー無し */
.content-holder {
    border: none;
    background-color: var(--color-white);
    background-image:
        linear-gradient(0deg, #0000 calc(100% - 1px), #d9d9d9 calc(100% - 1px)),
        linear-gradient(90deg, #0000 calc(100% - 1px), #d9d9d9 calc(100% - 1px));
    background-size: 0.30rem 0.30rem;
    background-position: 50%;
    box-shadow: unset;
}

/* LP の「東海道新幹線車内限定」/「Ψ高の思い出を残そう！」等のバッジ（LP 準拠）
   ・p-voice__badge / p-photoFrame__badge は LP で同一スタイル。
   ・LP の u-riseUp は .is-anime を付与する JS 前提だが本アプリには無いため、
     読み込み時に自動再生する keyframe 版にする（せり上がりの見た目は同じ）。 */
.u-mask {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0.10rem auto;
    padding: 0 0.12rem 0.12rem;
    /* 影とせり上がりのためのマスク余白 */
    overflow: clip;
}

.u-mask>span {
    display: inline-block;
}

.p-voice__badge,
.p-photoFrame__badge {
    display: inline-block;
    border: 0.01rem solid var(--color-black);
    background: var(--color-sub1);
    box-shadow: 0.04rem 0.04rem 0 0 var(--color-black);
    color: #fff;
    letter-spacing: 0.23em;
    border-radius: 100vmax;
    padding: 0.04rem 0.24rem;
    font-size: clamp(0.14rem, 3.64vw, 0.20rem);
    font-weight: 900;
    line-height: 1.4;
}

@keyframes riseUp {
    from {
        transform: translateY(150%);
    }

    to {
        transform: translateY(0);
    }
}


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


/* ============================================================
   LP 準拠ボタン（.c-join__btn を iconButton に移植・rem）
   白5px枠＋黒2px外郭＋黒6px下影の「シール/エンボス」型。フォントは Dela Gothic One。
   ============================================================ */
.iconButton {
    background: var(--color-button);
    border: 0.05rem solid var(--color-white);
    border-radius: 0.15rem;
    box-shadow: 0 0 0 0.02rem var(--color-black), 0 0.06rem 0 0 var(--color-black);
    color: var(--color-white);
    width: min(4.00rem, 96%);
    max-width: none;
    height: auto;
    min-height: 0.84rem;
    padding: 0.12rem 0.10rem;
    letter-spacing: 0.1em;
    font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.20rem;
}

.iconButton::before {
    display: none;
}

/* LP に内側二重枠は無い */
.iconButton .iconButtonText {
    font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: clamp(0.18rem, 4vw, 0.22rem);
    line-height: 1.2;
}

.iconButton:active {
    transform: translateY(0.06rem);
    box-shadow: 0 0 0 0.02rem var(--color-black), 0 0 0 0 var(--color-black);
}


/* ============================================================
   特典引換場所カード（LP .c-join / .c-join__title 準拠・rem）
   参加方法(STEP)は使わない。白カード＋ピンク見出し帯＋店舗リスト。
   ============================================================ */
.c-join {
    background: var(--color-white);
    border: 0.03rem solid var(--color-sub1);
    border-radius: 0.20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
    padding-bottom: 0.35rem;
    overflow: hidden;
    margin: 0.16rem auto;
}

.c-join__title {
    background: var(--color-sub1);
    width: 100%;
    color: var(--color-white);
    font-family: 'Dela Gothic One', 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0;
    padding: 0.17rem 0;
    font-size: clamp(0.26rem, 5.45vw, 0.30rem);
    font-weight: 400;
    line-height: 1;
}

/* 店舗リスト（各店舗を区切り線で整理・店舗名＋「営業時間」ミントチップ＋時間） */
.cert-stores {
    width: min(3.60rem, 90%);
    text-align: center;
}

.cert-store {
    padding: 0.16rem 0;
    border-bottom: 0.01rem dashed #d9d9d9;
}
.cert-store:last-of-type {
    border-bottom: none;
    padding-bottom: 0.04rem;
}

.cert-store__name {
    font-weight: 700;
    font-size: 0.17rem;
    line-height: 1.4;
    margin: 0 0 0.09rem;
}

/* 営業時間の行: 「営業時間」チップ + 時間 を中央に横並び */
.cert-store__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    margin: 0;
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.4;
}
.cert-store__hoursLabel {
    flex-shrink: 0;
    background: var(--color-sub3);   /* ミント */
    color: var(--color-text);        /* ミントは淡いので濃色文字でコントラスト確保 */
    font-size: 0.11rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.03rem 0.12rem;
    border-radius: 100vmax;
}
.cert-store__hoursVal { color: var(--color-text); }

/* ノベルティタイトル画像（LP 準拠で横幅を絞る） */
.p-certificate .title-img-container {
    width: 58%;
    margin: 0 auto;
}

/* 注意書き（LP .c-join__notes・※ ぶら下げ・Noto Sans JP） */
.c-join__notes {
    list-style: none;
    margin: 0.10rem auto 0;
    padding: 0;
    width: min(3.80rem, 92.5%);
    font-size: 0.12rem;
    line-height: 1.4;
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}

.c-join__notes li {
    position: relative;
    padding-left: 1.1em;
}

.c-join__notes li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
}