@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    /* LP（recommend.jr-central.co.jp/oshi-tabi/bang-dream-roselia/）の style.css 実測値。
       メイン #8a579a（紫）／アクセント #00b8f5（水色）／ヘッダーグラデ #bf95eb→#85bcf6 */
    --color-main: #000000;
    /* ページ背景色（LP は黒基調。.content-holder は base.css で白カード） */
    --color-sub1: #8a579a;
    /* メインカラー（紫：ボタン・ボーダー・見出し） */
    --color-sub2: #6d4079;
    /* サブカラー（濃紫：グラデーション端） */
    --color-sub3: #00b8f5;
    /* アクセント（水色：LP のリンク・アイコン） */
    --color-sub4: #ac1b37;
    /* アクセント濃（赤：注意・強調） */
    --color-sub5: #f3ecf6;
    /* 薄紫背景 */
    --color-local: #bf95eb;
    /* 差し色（淡紫：LP グラデ上端） */
    --color-text: #111111;
    /* テキストカラー */
    --color-button: #8a579a;
    /* ボタンカラー */
    --font-family: 'Hiragino Sans', 'Noto Sans JP', YakuHanJP, sans-serif;

    /* LP 固有のトンマナ用（このファイル内でのみ使用） */
    --roselia-grad-top: #bf95eb;
    --roselia-grad-bottom: #85bcf6;
    --roselia-serif: Georgia, 'Times New Roman', 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-text {
    color: #fff;
    font-size: 0.24rem;
    font-weight: 900;
    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
   ★ テンプレ既定の「灰グラデ + 白文字」ブロックは削除した。
     Roselia は LP に合わせて白系の disabled を下段で定義しており、
     残すと `.iconButton.disabled.button-bg`(0,3,0) の方が具体的で勝ってしまう。
     定義は下の「非活性（未解放・期間外）」に一本化する。
   ============================================================ */


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


/* ============================================================
   ROSELIA — LP トンマナ追随（LP style.css の実測値に合わせる）

   ★ セレクタに body クラス（.p-roselia）を付けてはいけない。
     付けるとそのクラスを書いたページ（top / omikuji）だけに効き、
     wallpaper / certificate / check などが base.css のままになる。
     custom.css はこの企画のページしか読み込まないので、素のセレクタで
     上書きすればトップに入れたデザインが全ページへ自動で反映される
     （テンプレの custom.css も素のセレクタで書く規約）。
     ・見出し番号: Georgia italic + 下に 80x2px の横線
     ・ボタン    : 3px 枠 + 4px 角丸 + 0 5px 0 のソリッド下影（押し込み型）
     ・帯        : #bf95eb → #85bcf6 の縦グラデ
   base.css は触らず、ここで上書きする。
   ============================================================ */

/* ---- content-holder（LP と同じ薔薇フレーム・角丸なし）----
   frame.webp（1646x701）は上部の左右コーナーに装飾が集中し、中央と下部は透過。
   上に ::before、下に 180° 回転した ::after を置いて「囲み枠」に見せる。
   装飾は飾りなので pointer-events:none（ボタンのタップを妨げない）。
   ★ LP に合わせて border-radius は 0。
   ============================================================ */
.content-holder {
    width: 96%;
    margin: 0.20rem auto 0.20rem;
    background-color: #ffffff;
    border: 0.00rem solid var(--color-sub1);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    padding-top: 0.30rem;
    /* 上飾りの分だけ本文を下げる */
    padding-bottom: 0.20rem;
    /* 下飾りの分 */
}

.content-holder::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    aspect-ratio: 1646 / 701;
    background: url("../img/frame.webp") no-repeat center top / 100% auto;
    pointer-events: none;
    z-index: 0;
}

.content-holder::before {
    top: 0;
}

.content-holder::after {
    bottom: 0;
    transform: rotate(180deg);
}

/* 本文は飾りより前面に置く */
.content-holder>* {
    position: relative;
    z-index: 1;
}

/* ---- セクション見出し（LP の roselia-section を踏襲）----
   ★ 見出しは .content-holder の外＝黒背景の上に載る。
     #8a579a は黒地では沈むので、明るい紫（--color-local）と白を使う。 */
.section-heading {
    background: none;
    padding: 0.00rem 0.20rem 0.10rem;
}

.section-heading .section-heading-text {
    color: var(--color-sub1);
    /* content-holder（白カード）の中に入るので濃い紫 */
    font-weight: 600;
    font-size: 0.24rem;
    line-height: 1.45;
}

/* 番号（01 / 02 …）— LP は Georgia italic 44px */
.roselia-num {
    display: block;
    margin: 0 auto 0.10rem;
    color: var(--color-sub1);
    /* 白カード内なので濃い紫 */
    font-family: var(--roselia-serif);
    font-size: 0.44rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    text-align: center;
}

.roselia-num::after {
    content: "";
    display: block;
    width: 0.80rem;
    height: 0.02rem;
    margin: 0.18rem auto 0;
    background: var(--color-sub1);
}

/* ラベル（小見出し）*/
.roselia-label {
    margin: 0 0 0.12rem;
    color: var(--color-sub1);
    font-size: 0.20rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}


/* ---- ボタン ----
   ★ クラス名はテンプレ標準の .iconButton のまま（共通ページとの統一感を保つ）。
     構成も標準どおり .icon（左） / .iconButtonText / .icon2nd（右）の2アイコン。
     見た目だけを LP に寄せる: 3px 枠 + 角丸なし + 0 5px 0 のソリッド下影（押し込み型）。
   ============================================================ */
.iconButton {
    width: 90%;
    margin: 0.18rem auto;
    padding: 0.16rem 0.12rem;
    background: #ffffff;
    border: 0.03rem solid var(--color-sub1);
    border-radius: 0;
    box-shadow: 0 0.05rem 0 var(--color-sub1);
    transition: box-shadow .2s ease, transform .2s ease;
}

/* button-bg（--color-button 塗り）は LP の白抜きボタンに合わせて打ち消す */
.iconButton.button-bg {
    background: #ffffff;
}

/* white-border（白 1px 枠）も打ち消して LP の紫 3px 枠にする */
.iconButton.white-border {
    border: 0.03rem solid var(--color-sub1);
}

/* base.css の内側 白枠 ::before は LP に無いので消す */
.iconButton::before {
    content: none;
}

/* 文字色: base.css の .white-text を上書きして LP の紫にする */
.iconButton .iconButtonText,
.iconButton .iconButtonText.white-text {
    color: var(--color-sub1);
    font-weight: 900;
    font-size: 0.17rem;
    line-height: 1.35;
    padding: unset;
}

/* 押し込みアニメーション（下影が消えて沈む） */
.iconButton:active {
    transform: translateY(0.05rem);
    box-shadow: 0 0 0 var(--color-sub1);
}

/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: transparent !important;
}

/* 非活性（未解放・期間外） */
.iconButton.disabled,
.iconButton[disabled],
.iconButton:disabled,
.iconButton.disabled.button-bg,
.iconButton[disabled].button-bg,
.iconButton:disabled.button-bg {
    background: #f2f2f2 !important;
    border-color: #bdbdbd;
    box-shadow: 0 0.05rem 0 #bdbdbd;
    pointer-events: none;
}

.iconButton.disabled .iconButtonText,
.iconButton[disabled] .iconButtonText,
.iconButton:disabled .iconButtonText {
    color: #9e9e9e;
}

/* 非活性のアイコンは濃い灰色にする。
   アイコンは <img> の外部 SVG なので fill では効かない。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);
}

/* ---- キャンペーンサイト一覧ボタン ----
   ★ マークアップ・レイアウトはテンプレ標準（base.css の .toOshitabiTop）そのまま。
     base.css は黒枠＋黒文字なので、色だけ LP のメイン紫に差し替える。
   ============================================================ */
.toOshitabiTop {
    border-color: var(--color-sub1);
    color: var(--color-sub1);
    border-radius: 0;
    /* LP 準拠：角丸なし */
}

/* ---- 新規登録 / ログイン ----
   テンプレ標準（.loginRgisterButton + .button-bg）。--color-button が
   #8a579a なので塗りは自動で LP 色になる。角丸だけ LP に合わせる。 */
.loginRgisterButton {
    border-radius: 0;
}

/* ---- 開催期間（シンプルに中央寄せ）---- */
/* content-holder の上飾り（薔薇フレーム）に重なって読みにくくなるので、
   白地＋紫ボーダーの箱にして自前で地を確保する。角丸は LP に合わせて 0。 */
.roselia-period {
    width: 92%;
    margin: 0.06rem auto 0.18rem;
    padding: 0.10rem 0.12rem;
    background-color: #ffffff;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0;
    text-align: center;
    line-height: 1.5;
}

.roselia-period__label {
    display: block;
    color: var(--color-sub1);
    font-size: 0.13rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.roselia-period__value {
    display: block;
    margin-top: 0.04rem;
    color: var(--color-text);
    font-size: 0.17rem;
    font-weight: 700;
}

/* ---- テキストリンク（応募要項など。ボタンにしない導線）----
   白カード上に置くので LP のメイン紫＋下線。befirst2nd と同じ見せ方。 */
.roselia-textlink {
    margin: 0.14rem auto 0.06rem;
    text-align: center;
}

.roselia-textlink a {
    color: var(--color-sub1);
    text-decoration: underline;
    text-underline-offset: 0.02rem;
}

/* ---- 担当メンバー（丸アイコン一覧）---- */
.roselia-members {
    margin: 0.10rem auto 0.16rem;
}

.roselia-members__title {
    color: var(--color-sub1);
    font-weight: 800;
    text-align: center;
    font-size: 0.16rem;
}

.roselia-members__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.08rem;
    margin: 0.10rem auto 0;
    padding: 0;
    list-style: none;
    width: 92%;
}

.roselia-members__list li {
    width: 0.72rem;
}

/* ★ 4人以上（現地ボイスの5人）は「3 / 2」の2段にする。PHP 側で is-3up を付与。 */
.roselia-members__list.is-3up li {
    width: auto;
    flex: 0 0 calc((100% - 0.16rem) / 3);
    max-width: calc((100% - 0.16rem) / 3);
}

.roselia-members__list img {
    width: 100%;
    height: auto;
    display: block;
}

.roselia-members__name {
    margin-top: 0.02rem;
    font-size: 0.11rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

/* ---- 壁紙 / AR のサムネイル（未獲得は南京錠 SVG）----
   ★ 5個並べるときは「3 / 2」の2段にする（1行3個 → 残り2個を中央寄せ）。
     flex-basis を 1/3 に固定することで、件数が5でも自動で 3+2 に折り返す。 */
.roselia-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.10rem;
    width: 92%;
    margin: 0.14rem auto;
}

.roselia-thumb-grid>* {
    flex: 0 0 calc((100% - 0.20rem) / 3);
    /* gap 0.10rem × 2 を差し引いて 1 行 3 個 */
    max-width: calc((100% - 0.20rem) / 3);
}

/* 壁紙は iPhone 比率 19.5:9 を固定（獲得済み・未獲得でサイズを揃える） */
.roselia-thumb--wallpaper {
    aspect-ratio: 234 / 507;
}

.roselia-thumb--wallpaper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* AR は正円 */
.roselia-thumb--ar {
    aspect-ratio: 1 / 1;
}

.roselia-thumb--ar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.roselia-thumb--ar.switchPage {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.roselia-thumb--ar.switchPage:active {
    transform: scale(0.96);
}

.roselia-thumb--ar.is-locked {
    opacity: 0.85;
}

/* ---- 引換場所ボックス ---- */
.roselia-info-box {
    margin: 0.14rem auto;
    padding: 0.16rem 0.14rem;
    background: var(--color-sub5);
    border: 0.01rem solid var(--color-sub1);
    border-radius: 0;
}

.roselia-info-box__title {
    color: var(--color-sub1);
    font-weight: 800;
    font-size: 0.17rem;
    text-align: center;
    margin-bottom: 0.10rem;
}

.roselia-info-box__dt {
    color: var(--color-sub1);
    font-weight: 700;
    font-size: 0.13rem;
    margin-top: 0.08rem;
}

.roselia-info-box__dd {
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ---- ライブ情報（04 ライブ会場限定ボイス）----
   見出し語を足さずに「日程」と「公演名」を読み分けられるよう、
   日程は紫帯、公演名は白地カードにして段組みで分ける。
   padding は帯を箱の端まで伸ばすため box 側で 0 にして各要素で持つ。 */
/* ---- 帯付きボックス（--band）----
   ライブ情報（04）と応募方法（03）で共有する。最上段を紫帯にして
   「見出し / 本文」を色で分ける。帯を箱の端まで伸ばすため box 側の
   padding は 0 にして、本文は __body が持つ。 */
.roselia-info-box--band {
    padding: 0;
    overflow: hidden;
}

.roselia-info-box__band {
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%);
    color: #fff;
    font-size: 0.17rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-align: center;
    padding: 0.10rem 0.10rem;
}

.roselia-info-box__body {
    padding: 0.12rem 0.14rem 0.14rem;
}

/* ---- ライブ情報の本文（04）---- */
.roselia-live__title {
    color: var(--color-text);
    font-size: 0.17rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.roselia-live__sub {
    margin-top: 0.04rem;
    color: var(--color-sub1);
    font-size: 0.13rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

/* ---- 乗車証明（certificate）画像の斜め縞フレーム ----
   画像を一段小さくし、外側に残った余白へ紫 × 白の 45° 斜め縞を敷く。 */
.certStripeFrame {
    width: 100%;
    margin: 0.10rem auto 0;
    padding: 0.09rem;
    background: repeating-linear-gradient(45deg,
            var(--color-sub1) 0 0.07rem,
            #ffffff 0.07rem 0.14rem);
    border: 0.02rem solid var(--color-sub2);
    border-radius: 0;
    box-sizing: border-box;
}

.certStripeFrame .charaImage {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
}

/* ---- fraud=true のときのログインID表示（スタッフ照合用）---- */
.certFraudId {
    margin: 0 auto 0.12rem;
    color: var(--color-text);
    font-size: 0.16rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.certFraudId__value {
    display: inline-block;
    margin-top: 0.02rem;
    color: var(--color-sub4);
    font-size: 0.22rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* ---- 応募方法の STEP（03）----
   番号を紫チップにして本文とぶら下げで対応させる。STEP 間は薄紫の細線で区切る。 */
.roselia-step {
    display: flex;
    align-items: flex-start;
    gap: 0.10rem;
    padding: 0.09rem 0;
}

.roselia-step + .roselia-step {
    border-top: 0.01rem solid var(--color-local);
}

.roselia-step:first-child {
    padding-top: 0;
}

.roselia-step:last-child {
    padding-bottom: 0;
}

.roselia-step__num {
    flex: 0 0 auto;
    min-width: 0.62rem;
    background: var(--color-sub1);
    color: #fff;
    font-size: 0.12rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    padding: 0.05rem 0.05rem;
    border-radius: 0;
}

.roselia-step__text {
    flex: 1 1 auto;
    color: var(--color-text);
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.55;
    text-align: left;
}

/* ---- キャンペーン期間（03・ボックス無しの中央寄せ）---- */
.roselia-inline-period {
    margin: 0.16rem auto 0.14rem;
    text-align: center;
    line-height: 1.5;
}

.roselia-inline-period__label {
    color: var(--color-sub1);
    font-size: 0.13rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.roselia-inline-period__value {
    margin-top: 0.02rem;
    color: var(--color-text);
    font-size: 0.17rem;
    font-weight: 700;
}

/* ---- 獲得済み壁紙サムネはタップで download ページへ ---- */
.roselia-thumb--wallpaper.is-gotten {
    cursor: pointer;
}

.roselia-thumb--wallpaper.is-gotten:active {
    transform: scale(0.96);
    transition: transform .15s ease;
}