@charset "UTF-8";
/* ============================================================
CUSTOM.CSS — イベントカラー変数（企画ごとに書き換え）
base.css のデフォルト値をここで上書きするだけ。
base.css 自体は触らない。
WORKFLOW:
1. :root の色変数を企画カラーに変更する
2. 背景やフォントのカスタマイズはコメントアウトを外して追記
3. 共通コンポーネントの変更は base.css へ
============================================================ */
/* ============================================================
BRAND COLORS — 企画ごとに変更する
============================================================ */
:root {
--color-main: #d3a4e8; /* ページ背景色（パステル紫・KV と同じ地色） */
--color-sub1: #a2ddfa; /* メインカラー（パステル水色） */
--color-sub2: #f7c18e; /* サブカラー（オレンジ） */
--color-sub3: #fcf9ac; /* アクセント（パステル黄） */
--color-sub4: #83ccc9; /* アクセント（ミント） */
--color-sub5: #eaf8ff; /* 薄背景（水色） */
--color-local: #79a1df; /* 差し色（青） */
--color-text: #1a1a2e; /* テキストカラー */
--color-button: #83ccc9; /* ボタンカラー（ミント） */
--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 の代わりにこれを置く）:
・帯グラデは 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);
} */
/* ============================================================
BUTTON — アイコン無しの細長ボタン（.loginRgisterButton.noIcon）
クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／
結果画面に戻る）など、「報酬の受け取り」以外のボタンに使う。
★ アイコンを付けないときは左右とも省略する（19_button-icons.md）。
.iconButton のまま中身を文字だけにすると、アイコン用の flex 領域
（.icon flex:2 / .icon2nd flex:1.5）が残って文字が中央からずれる。
★ 地色は .button-bg（var(--color-button)）。企画で別の地色にする場合は
この下で .loginRgisterButton を上書きする。
============================================================ */
button.loginRgisterButton {
border: 0;
font-family: inherit;
font-size: inherit;
/* ★ color は指定しない（.white-text より詳細度が高く、白文字を打ち消してしまう） */
}
.loginRgisterButton.noIcon {
padding: 0.15rem 0.05rem; /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}
.loginRgisterButton.noIcon .iconButtonText {
margin-left: 0;
margin-right: 0; /* アイコン分の右マージンを消して中央に置く */
}
/* ============================================================
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;
}
/* ------------------------------------------------------------
非活性アイコンを濃い灰色にする（任意 — 白系ボタンの企画のみ）
上のデフォルトは「暗い灰グラデの地 ＋ 白のアイコン/文字」なので、
アイコンは白のままでよい。
LP トンマナに合わせて disabled の地を白〜薄灰に上書きした企画では、
白アイコンが地に溶けて消えるため、下のブロックのコメントを外す。
アイコンは ![]()
の外部 SVG なので fill / color では色を変えられない。
grayscale(1) を掛けると、企画のメインカラーが輝度どおりの灰色に落ちる
（例: #8a579a → #676767）ので、これで「濃い灰色」を作る。
------------------------------------------------------------ */
/* .iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
filter: grayscale(1);
} */
/* ============================================================
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;
}
/* ============================================================
idolpark_03_imadoki — ちゃやまちアイドルパーク×JR東海 Part3
『イマドキッ＃ちゃいぱRADIO編』
構成・見た目は第2弾（idolpark_02_yarudo）と同じ。配色のみ第3弾のもの。
============================================================ */
/* --- セクション見出し画像（cont01/02/03_tit01.png：タイトル＋日付入り）--- */
.section-ribbon {
display: block;
width: 94%;
max-width: 4.6rem;
margin: 0.22rem auto 0.06rem;
}
.section-ribbon img { display: block; width: 100%; height: auto; }
/* --- content-holder：角丸・枠なし・軽い影（パステルに馴染む白カード）--- */
.content-holder {
border: none;
border-radius: 0.14rem;
box-shadow: 0 0.03rem 0.10rem rgba(0, 0, 0, 0.10);
padding-bottom: 0.16rem;
}
main.page-content > section { margin-bottom: 0.24rem; }
/* --- 商品画像（学生証風ステッカー 全3種）中央1点 --- */
.goods-single { text-align: center; margin: 0.12rem auto 0.06rem; }
.goods-single img { display: block; width: 3.2rem; max-width: 92%; height: auto; margin: 0 auto; }
/* --- 電子引換券 3スロット（type_b）---
スロットの中身は通常の .iconButton なので、ここは縦並びのラッパだけ。
（テンプレの base.css にも同名の定義が入ったが、この企画の base.css は
それより前のコピーなので custom.css 側で定義しておく） */
.ticket-slots {
display: flex;
flex-direction: column;
width: 100%;
max-width: 4.4rem;
margin: 0.04rem auto 0.06rem;
}
/* --- 電子引換券ボックス（引換場所：店名＋住所＋受付時間）--- */
.exchange-box {
max-width: 4.6rem;
margin: 0.16rem auto 0.10rem;
background: var(--color-sub5);
border: 0.02rem solid var(--color-sub4);
border-radius: 0.10rem;
overflow: hidden;
}
.exchange-box__head {
background: var(--color-sub4);
color: #fff;
text-align: center;
font-weight: 800;
font-size: 0.17rem;
letter-spacing: 0.06em;
padding: 0.10rem;
}
.exchange-box__body { padding: 0.06rem 0.14rem 0.12rem; }
.exchange-shop { text-align: center; padding: 0.10rem 0; }
.exchange-shop + .exchange-shop { border-top: 0.01rem dashed rgba(0, 0, 0, 0.15); }
.exchange-shop__name { color: var(--color-text); font-weight: 800; font-size: 0.17rem; line-height: 1.35; }
.exchange-shop__addr { color: var(--color-text); font-size: 0.12rem; margin-top: 0.03rem; line-height: 1.4; }
.exchange-shop__hours { color: var(--color-text); font-size: 0.13rem; font-weight: 600; margin-top: 0.03rem; }
.exchange-shop__closed { color: #d0021b; font-size: 0.12rem; font-weight: 700; margin-top: 0.03rem; }
.exchange-box__note { padding: 0 0.14rem 0.10rem !important; margin: 0 !important; text-align: left; }
.exchange-box__note li { font-size: 0.11rem; color: var(--color-text); opacity: 0.8; line-height: 1.4; }
/* 引換ページ（.exchangePage / .completedSlider は白の全幅ボックス）では引換場所
ボックスが端から端まで広がるので内側に収める。トップは content-holder 内なので影響なし。
★ .completedSlider は左右 0.20rem の padding を持つので、その中に置く部品には
自前の width を付けない（二重インデントになる）。ここは .exchangePage 直下用。 */
.exchangePage .exchange-box { width: 90%; max-width: 4.0rem; }
/* 引換ページの ul.caution は certificate.css が base/custom より後に読まれて
上書きするので、親クラスを前置して特異度を上げて固定する（certificate.css は触らない）。 */
.completedSlider ul.caution,
.exchangePage ul.caution {
font-family: "Noto Sans JP", YakuHanJP, sans-serif;
text-align: left;
}
/* ============================================================
PRIZE CARD — 抽選の賞品（A賞 / B賞）
バッジ（支給素材 icn_present_a/b.webp）＋当選人数＋賞品名＋注記の1枚カード。
トップと lottery/result.php で共有（prizeinfo.inc.php）。
============================================================ */
.prizeList {
width: 94%;
max-width: 4.20rem;
margin: 0.14rem auto 0.06rem;
}
/* 地色は LP の薄紫 #f9eeff。白の content-holder の上に白カードを置くと
境界が出ないので、ページの紫と同系のごく薄い地で分離する。 */
.prizeCard {
background: #f9eeff;
border: 0.015rem solid rgba(202, 43, 172, 0.16);
border-radius: 0.14rem;
padding: 0.14rem 0.14rem 0.12rem;
}
.prizeCard + .prizeCard { margin-top: 0.12rem; }
/* --- 上段: バッジ＋当選人数 --- */
.prizeCard__head {
display: flex;
align-items: center;
justify-content: center;
gap: 0.10rem;
padding-bottom: 0.10rem;
border-bottom: 0.015rem dashed rgba(202, 43, 172, 0.28);
}
.prizeCard__badge {
width: 0.58rem;
height: auto;
flex: 0 0 auto;
display: block;
}
/* 「15」＋「名様」。数字と単位のベースラインを揃えるため flex + baseline にする
（span を素で並べると font-size 差でベースラインがずれて単位だけ下がって見える）。 */
.prizeCard__count {
display: flex;
align-items: baseline;
gap: 0.02rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.17rem;
line-height: 1;
letter-spacing: 0.02em;
}
/* 人数の数字だけ大きく（em はイタリックを解除して数字として見せる） */
.prizeCard__count em {
font-style: normal;
font-size: 0.32rem;
font-weight: 800;
line-height: 1;
color: #ca2bac; /* 第3弾 LP の強調色（.colPink02） */
}
/* --- 賞品名 --- */
.prizeCard__name {
margin-top: 0.10rem;
text-align: center;
color: var(--color-text);
font-weight: 700;
font-size: 0.15rem;
line-height: 1.6;
}
/* --- 注記（賞ごとに直下へ出す）--- */
.prizeCard__note {
margin: 0.08rem 0 0 !important;
padding: 0 !important;
text-align: left;
}
.prizeCard__note li {
font-size: 0.11rem;
line-height: 1.5;
color: var(--color-text);
opacity: 0.7;
}
/* ============================================================
BUTTON SHAPE — .iconButton だけ角丸ではなく半円（pill）
base.css は触らずここで上書きする。
★ 対象は .iconButton のみ。.loginRgisterButton / .toOshitabiTop /
.simpleButton は base.css の角丸（0.10rem）のままにする。
★ 半径は要素サイズを超えると自動でクランプされるので、高さ÷2 の固定値ではなく
9999px を入れて高さが変わっても必ず半円になるようにしている。
★ ::before（内側の白枠）も同時に丸める。ここを合わせないと
枠だけ角丸で残り、二重の輪郭に見える。
============================================================ */
.iconButton,
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled {
border-radius: 9999px;
}
.iconButton::before,
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
border-radius: 9999px;
}
