@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #f2a7c8;   /* ページ/セクション背景（ピンク） */
    --color-sub1:   #e669a0;   /* メインカラー（濃ピンク：ボーダー/見出し縁） */
    --color-sub2:   #fdff8b;   /* サブ（イエロー：ボタン） */
    --color-sub3:   #d90d71;   /* アクセント（濃マゼンタ） */
    --color-sub4:   #e669a0;   /* アクセント（ピンク） */
    --color-sub5:   #fdff8b;   /* 薄イエロー背景 */
    --color-local:  #d90d71;   /* 差し色（濃マゼンタ） */
    --color-text:   #434343;   /* テキスト */
    --color-button: #fdff8b;   /* ボタン（イエロー） */
    --font-family:  'Zen Maru Gothic', 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 (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */



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


/* ============================================================
   DOREMI 固有 — トップデザイン完全再現（content-holder型）
   セクション背景=ピンク(--color-main) / 見出し=支給画像 / 中身=白カード
   ============================================================ */

/* KV / 期間バー（支給デザインの切り出し画像） */
.doremi-kv,
.doremi-period {
    display: block;
    width: 100%;
    height: auto;
}

/* 各機能セクション（ピンク地） */
.p-doremi {
    background: var(--color-main);
    padding: 0.18rem 0 0.28rem;
}

/* セクション見出し画像（東海道新幹線車内限定♪ + タイトル 等） */
.doremi-head {
    display: block;
    width: 100%;
    max-width: 4.3rem;
    height: auto;
    margin: 0.06rem auto 0.14rem;
}

/* 白カード（content-holder） */
.doremi-card {
    width: 96%;
    max-width: 4.2rem;
    margin: 0 auto;
    background: #fff;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.15rem;
    padding: 0.22rem 0.18rem;
    box-sizing: border-box;
}

/* カード内リード文 */
.doremi-lead {
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-text);
    text-align: center;
    margin: 0.06rem 0 0.16rem;
}
.doremi-lead.accent { color: var(--color-local); }

/* ボタン（ピル型・アクティブ=イエロー / ロック=グレー） */
.doremi-btn {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    width: 100%;
    margin: 0.06rem auto 0.02rem;
    padding: 0.14rem 0.16rem;
    border-radius: 999px;
    border: 0.03rem solid var(--color-sub1);
    background: var(--color-button);
    box-shadow: 0 0.04rem 0 rgba(230,105,160,0.25);
    cursor: pointer;
    box-sizing: border-box;
}
.doremi-btn .bi {
    flex: 0 0 auto;
    width: 0.34rem;
    height: 0.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doremi-btn .bi img { width: 100%; height: 100%; object-fit: contain; }
.doremi-btn .bt {
    flex: 1;
    text-align: center;
    font-weight: 800;
    font-size: 0.185rem;
    line-height: 1.25;
    color: var(--color-sub1);
    letter-spacing: 0.02em;
}
.doremi-btn .ba {
    flex: 0 0 auto;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    border: 0.02rem solid var(--color-sub1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.doremi-btn .ba svg { width: 0.14rem; height: 0.14rem; }
/* ロック（グレー・非活性） */
.doremi-btn.locked {
    background: linear-gradient(180deg, #c7c7c7, #a6a6a6);
    border-color: #a0a0a0;
    box-shadow: 0 0.04rem 0 rgba(0,0,0,0.12);
    cursor: default;
    pointer-events: none;
}
.doremi-btn.locked .bt { color: #fff; }
.doremi-btn.locked .ba { border-color: #fff; }
.doremi-btn.locked .bi img { filter: brightness(0) invert(1); }

/* カード内 注意書き */
.doremi-note {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
    list-style: none;
    padding: 0;
    margin: 0.14rem 0 0;
    font-size: 0.115rem;
    line-height: 1.55;
    color: var(--color-text);
}
.doremi-note li { padding-left: 1em; text-indent: -1em; margin-bottom: 0.03rem; }
.doremi-note li::before { content: "※"; }
.doremi-note li.accent { color: var(--color-local); }

/* クイズ 6枠グリッド（2×3） */
.doremi-quiz-grid {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.26rem 0.22rem;
    margin: 0.18rem auto 0.24rem;
    padding: 0 0.06rem;
}
.doremi-quiz-grid img { width: 100%; height: auto; display: block; }

/* AR キャラ 6アイコングリッド（2×3・名前は画像内） */
.doremi-ar-grid {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.34rem 0.30rem;
    margin: 0.22rem auto 0.24rem;
    justify-items: center;
}
.doremi-ar-grid img { width: 100%; max-width: 0.94rem; height: auto; display: block; }

/* ノベルティ 商品画像 */
.doremi-novelty-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.12rem;
    margin: 0.06rem auto 0.16rem;
}

/* ノベルティ引換場所・時間ボックス（黒枠白地・エリア見出し付き） */
.doremi-exchange {
    border: 0.02rem solid var(--color-text);
    border-radius: 0.06rem;
    padding: 0;
    margin: 0.02rem auto 0.16rem;
    overflow: hidden;
}
/* 引換画面(certificate)で単独配置される場合の幅制限（トップはカード内なので影響なし） */
.exchangePage .doremi-exchange {
    width: 92%;
    max-width: 3.9rem;
    box-sizing: border-box;
}
.doremi-exchange__head {
    text-align: center;
    font-weight: 800;
    font-size: 0.16rem;
    color: var(--color-text);
    padding: 0.1rem 0;
    border-bottom: 0.02rem solid var(--color-text);
}
.doremi-exchange__item { padding: 0.14rem 0.12rem; text-align: center; }
.doremi-exchange__item + .doremi-exchange__item { border-top: 0.01rem solid #ccc; }
.doremi-exchange__area {
    display: inline-block;
    border: 0.015rem solid var(--color-text);
    border-radius: 0.03rem;
    font-size: 0.13rem;
    font-weight: 700;
    padding: 0.03rem 0.14rem;
    margin-bottom: 0.08rem;
}
.doremi-exchange__shop { font-size: 0.17rem; font-weight: 800; color: var(--color-text); line-height: 1.5; }
.doremi-exchange__hours { font-size: 0.15rem; font-weight: 700; color: var(--color-text); }

.toOshitabiTop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 4.00rem;
    border-radius: 0.10rem;
    border: 0.02rem solid var(--color-sub1);
    padding: 0.08rem 0.05rem;
    box-sizing: border-box;
    margin: 0.06rem auto 0.12rem;
    color: var(--color-sub1);
    font-size: var(--fs-md);
    font-family: var(--font-family);
    font-weight: 600;
    background: var(--color-white);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    min-height: 0.6rem;
}

.toOshitabiTop:active {
    transform: scale(0.96);
}

/* ============================================================
   doremi: 全ページ共通 — base.css の .iconButton を doremi ピル調に上書き
   （トップの .doremi-btn とトンマナを揃える。quiz/wallpaper/certificate 等の
   .iconButton すべてに適用される）
   ============================================================ */
.iconButton {
    border-radius: 999px;
    border: 0.03rem solid var(--color-sub1);
    box-shadow: 0 0.04rem 0 rgba(230, 105, 160, 0.25);
    background: var(--color-button);
}

.iconButton::before {
    display: none;
}

/* プライマリ=イエロー */
.iconButton.button-bg {
    background: var(--color-button);
}

/* white-border 併用時も背景はイエローのまま（意図的に白地にしない） */
.iconButton.white-border.button-bg {
    /* background: #fff; */
}

.iconButton .iconButtonText,
.iconButton .white-text {
    color: var(--color-sub1);
    font-weight: 800;
}

/* ロック/無効=グレー（トップの locked と同系） */
.iconButton.disabled,
.iconButton[disabled],
.iconButton:disabled {
    background: linear-gradient(180deg, #c7c7c7, #a6a6a6);
    border-color: #a0a0a0;
}

.iconButton.disabled .iconButtonText,
.iconButton.disabled .white-text,
.iconButton[disabled] .iconButtonText {
    color: #fff;
}

.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img {
    filter: brightness(0) invert(1);
}