@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #CEE8FA;   /* ページ背景色（デザイン地色・水色） */
    --color-sub1:   #f97200;   /* メインオレンジ */
    --color-sub2:   #B2B2B2;   /* 灰（非活性まわり） */
    --color-sub3:   #162c74;   /* 紺 */
    --color-sub4:   #4B81BB;   /* 青（枠線・見出し帯・区切り線） */
    --color-sub5:   #e8f1f8;   /* 薄青背景 */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #000000;   /* テキストカラー */
    --color-button: #f97200;   /* ボタンカラー */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-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);
} */


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


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


/* ============================================================
   DESIGN COMPONENTS — コーダー coding/style.css を rem 化して移植
   （デザインpx ÷ 100 = rem / 100px = 1rem @ 393px viewport）
   ・base.css は変更しない。ここはこの企画専用のデザイン再現ブロック。
   ・機能フックは top.php 側で switchPage / data-url / data-id を付与する。
   ============================================================ */

/* ---- 共通テキスト ---- */
.boldText  { text-align: center; font-weight: bold; line-height: 1.8; }
.smallText { padding: 1% 3%; font-weight: 400; line-height: 1.8; }
.font23{
    font-size: 0.23rem;
}
.font20 { font-size: 0.20rem; }
.font22{
    font-size: 0.22rem;
}
.font18 { font-size: 0.18rem; }
.font15 { font-size: 0.15rem; }
.font12 { font-size: 0.12rem; }

/* ---- 白カード（各セクション共通の見た目） ---- */
.loginSignContainer,
.radioContainer,
.stickerContainer {
    background-color: #fff;
    border-radius: 0.10rem;
    margin: 4% 2%;
    position: relative;
    border: 0.02rem solid #4B81BB;
    overflow: hidden;
}
.loginSignContainer { padding: 2%; }
.radioContainer{ padding: 2% 0 5%; }
.stickerContainer{
    padding: 0 0 5%;
}

/* ---- INTRO（ログイン導線） ---- */
.loginSignButtons { width: 100%; margin: auto; }

/* 黒地グラデ文字のログイン/新規登録ボタン（base.css .loginRgisterButton を上書き） */
.loginSignContainer .loginRgisterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.05rem;
    border-radius: 0.10rem;
    background: linear-gradient(90deg, #41B4D7 0%, #3C6DB9 100%);
    color: #fff;
    cursor: pointer;
    margin: 0.15rem auto;
    width: auto;
    max-width: none;
    max-height: 0.50rem;
    box-shadow: none;
    user-select: none;
    -webkit-user-select: none;
}
.loginSignContainer .loginRgisterButton .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
}
.loginSignContainer .loginRgisterButton .icon img { height: 0.20rem; width: auto; }
.loginSignContainer .loginRgisterButton .iconButtonText {
    flex: 1;
    font-size: 0.20rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-right: 0.10rem;
}
.loginSignContainer .loginRgisterButton:active { transform: scale(0.95); }

/* キャンペーンサイト一覧ボタン（白地・オレンジ枠）。JS は base の .toOshitabiTop を利用 */
.loginSignContainer .toOshitabiTop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.05rem;
    border-radius: 0.10rem;
    background: #fff;
    color: #000;
    border: var(--color-sub4) solid 0.02rem;
    margin: 0.15rem auto;
    min-height: 0;
    font-size: 0.20rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}
.loginSignContainer .toOshitabiTop:active { transform: scale(0.95); }

/* ---- VOICE（新幹線ボイスドラマ） ---- */
.dramaTitle { padding: 4%; }
.voiceDramaSection {
    background-color: var(--color-sub1);
    width: 100%;
    border-radius: 0.10rem;
    padding: 3% 0;
}
/* ★ 枠は border ではなく「地色＋疑似要素」で描く。
   border で描くと内側の角丸 = 外側の角丸 − 枠幅 になり、
   外 0.10rem / 枠 0.10rem では内側が 0（＝角ばる）になってしまう。
   外側の丸み（0.10rem）はデザインのまま保ち、内側だけ 0.06rem で丸める。 */
.voiceButton {
    position: relative;
    display: flex;
    align-items: center;
    width: 93%;
    /* 元の padding(0.15/0.20) + 枠幅(0.1) — box-sizing:border-box なので見た目の余白は同じ */
    padding: 0.25rem 0.30rem;
    border: none;
    margin: 2% auto 1%;
    border-radius: 0.10rem;
    background-color: #F4D47D;   /* 枠の色 */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.voiceButton::before {
    content: '';
    position: absolute;
    top: 0.1rem; right: 0.1rem; bottom: 0.1rem; left: 0.1rem;   /* = 枠幅 */
    border-radius: 0.06rem;      /* 内側の丸み */
    background: #ED6D00;
    z-index: 0;
}
.voiceButton > * { position: relative; z-index: 1; }
.voiceButton:active { transform: scale(0.98); }
/* 非活性: 枠もフチも灰に落とす（活性の橙が残らないように ::before も上書きする） */
.voiceButton[disabled],
.voiceButton.disabled {
    background-color: darkgray !important;
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}
.voiceButton[disabled]::before,
.voiceButton.disabled::before {
    background: linear-gradient(to right, gray, darkgray);
}
.voiceButton__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    flex-shrink: 0;
}
.voiceButton__icon--left  img { width: 0.25rem; height: auto; }
.voiceButton__icon--right img { width: 0.25rem; height: auto; }
.voiceButton__text { flex: 1; text-align: center; font-weight: 600; color: #fff; }

/* ---- CERTIFICATE（SNS風クリアカード + 引換） ---- */
/* 枠の描き方は .voiceButton と同じ（border だと内側が角ばるため疑似要素で描く）。 */
.giftButton {
    position: relative;
    display: flex;
    align-items: center;
    width: 93%;
    /* 元の padding(0.10/0.25) + 枠幅(0.1) */
    padding: 0.20rem 0.35rem;
    border: none;
    margin: 0.30rem auto 0.10rem;
    border-radius: 0.10rem;
    background-color: #F4D47D;   /* 枠の色 */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.giftButton::before {
    content: '';
    position: absolute;
    top: 0.1rem; right: 0.1rem; bottom: 0.1rem; left: 0.1rem;
    border-radius: 0.06rem;
    /* ★ coding では var(--color-sub2)=#B2B2B2（灰）だったが、非活性の灰グラデと
       ほぼ同色で「押せるボタン」に見えなかったため .voiceButton と同じ橙に揃えた。 */
    background: #ED6D00;
    z-index: 0;
}
.giftButton > * { position: relative; z-index: 1; }
.giftButton:active { transform: scale(0.98); }
.giftButton__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    flex-shrink: 0;
}
.giftButton__icon img { width: 0.30rem; height: auto; }
.giftButton__icon--right img { width: 0.25rem; }
.giftButton__text { flex: 1; text-align: center; font-weight: 600; color: #fff; }
.giftButton[disabled],
.giftButton.disabled {
    background: darkgray !important;   /* 枠 */
    color: #fff;
    pointer-events: none;
    cursor: default;
}
.giftButton[disabled]::before,
.giftButton.disabled::before {
    background: linear-gradient(to right, gray, darkgray);
}
.giftButton[disabled] .giftButton__text,
.giftButton.disabled .giftButton__text { color: #fff; }
/* 非活性時はアイコン(SVG)も白に反転（gift / arrow） */
.giftButton[disabled] .giftButton__icon img,
.giftButton.disabled .giftButton__icon img { filter: brightness(0) invert(1); }

/* ---- PROMOTION（現地ボイス・スポット直ボタン） ---- */
.marginbottom { margin-bottom: 8%; }
.grayborderbottom { border-bottom: solid 0.01rem #ededed; line-height: 0.2; }

/* ---- 注意書き ul.caution（テンプレ準拠・※ は li::after のぶら下げ）----
   デザインの白カードは左右 padding が 0 のものがあるため、caution に
   横方向の余白を持たせて smallText 相当の見た目にする。 */
.loginSignContainer ul.caution,
.radioContainer ul.caution,
.stickerContainer ul.caution {
    padding: 0 3%;
    line-height: 1.8;
}
.marginbottom0{
    margin-bottom: 0;
}
.margintop0{
    margin-top: 0;
}
.colorPink{
    color: #ED368B;
}
.specialTitle{
    width: 96%;
    margin: auto;
}
.dateSection{
    width: 88%;
    margin: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.05rem;
    border-radius: 0.50rem;
    background: linear-gradient(90deg, #41B4D7 0%, #3C6DB9 100%);
    color: #fff;
    margin: 0.15rem auto;
}
.blueText{
    width: 94%;
    margin: auto;
    color: #4B81BB;
    border-bottom: #4B81BB dotted 0.02rem ;
    margin-bottom: 5%;
}
.directionLabelDownText{
    margin-top: 5%;
}
.stickerTitle{
    margin-top: 0;
    color: white;
    background-color: #4B81BB;
    padding: 1%;
}
.stickerContainer .dateSection{
    margin: 5% auto;
}
.stickerImg{
    width: 90%;
    margin: 6% auto;
}
.borderDotted{
    border-bottom: #4B81BB dotted 0.02rem ;
}
.borderSolid{
    border-bottom: #000 solid 0.005rem ;

}
.locationSection{
    width: 94%;
    margin: auto;
    background-color: #CEE8FA;
    text-align: center;
    padding-bottom: 3%;
}
.locationTitle{
    background-color: #4B81BB;
    color: white;
}
.HMV{
    width: 94%;
    margin: auto;
    padding: 2% 0;
}
.locationSection .HMV .caution{
    text-align: left;
    color: #FF0004;
    padding-left: 0;
    margin-top: 0;
}
/* ★ 引換ページ(certificate/single.php)では certificate.css が custom.css の【後】に
   読み込まれ、ul.caution の font-size(0.14rem) / margin(0.20rem) / li の padding(0.17rem)
   を上書きしてしまう。さらにトップ側は .stickerContainer ul.caution 経由で左右 3% の
   padding が付くが、引換ページには .stickerContainer が無いので付かない。
   → 読み込み順に依存しないよう、.locationSection 付き（＝特異度が高い）で
     トップと同じ値に固定する。両ページで同じ見た目になる。 */
.locationSection ul.caution {
    margin: 0.12rem 0 0;
    padding: 0 3%;
    font-size: var(--fs-sm);
    line-height: 1.8;
}
.locationSection ul.caution li {
    padding: 0 0 0 1.1em;
}
.textAlignLeft{
    text-align: left;
}

/* ============================================================
   NOVELTY — 引換ページ(certificate/single.php)。
   ノベルティ画像は上部の .charaImage 1枚だけ（他企画の certificate.* と同じ位置）。
   店舗を選ぶと 3枚（全店/東京/大阪）を先読み済みのものから差し替えるのでラグなし。
   ここは「いまどの店舗のぶんを出しているか」を示すキャプション。
   ============================================================ */
.noveltyPreview__caption {
    margin: 0.06rem auto 0.16rem;   /* 直下の「〜でスタッフに見せながら」と詰まらないよう下に余白 */
    padding: 0 0.15rem;
    font-size: 0.13rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-sub4);
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}