@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #1f1f1f;
    /* ページ背景色（ダーク） */
    --color-sub1: #030303;
    /* メインカラー（黒） */
    --color-sub2: #47657a;
    /* サブカラー（くすんだ青） */
    --color-sub3: #47657a;
    /* アクセント */
    --color-sub4: #47657a;
    /* アクセント濃 */
    --color-sub5: #444444;
    /* 薄背景（ダークグレー） */
    --color-local: #f1d511;
    /* 差し色（黄色） */
    --color-text: #fff;
    /* テキストカラー（白） */
    --color-button: #d41c00;
    /* ボタンカラー（赤） */
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
}

/* ============================================================
   MAIN BACKGROUND IMAGE — 企画ごとに変更する
   ============================================================ */

main::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--image-bg) repeat center center / 200px auto;
    background-color: var(--color-main);
    z-index: -2;
}

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


/* ============================================================
   BACKGROUND (任意)
   企画の背景色・パターンが必要な場合にコメントアウトを外す
   ============================================================ */
/* body { background-color: #f0e8ff; } */


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
.content-holder {
    border-radius: 0rem;
    border: 0.01rem solid var(--color-black);
    background: var(--image-bg) repeat center center / 200px auto;
    background-color: var(--color-sub1);
    box-shadow: unset;
}


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

/* ============================================================
   坂本龍一KAGAMI＋ 固有
   ============================================================ */
/* セクション見出し画像（sec-head01/02.png）— テキスト見出しの代わり */
.section-heading .sec-head-img {
    display: block;
    max-width: 90%;
    height: auto;
    margin: 0.15rem auto 0;
}

/* 赤いオブジェ装飾（obj_red.png） */
.kagami-deco {
    display: block;
    width: 0.7rem;
    height: auto;
    margin: 0.14rem auto;
}

ul.caution li a {
    text-decoration: underline;
    color: var(--color-button);
}

/* ============================================================
   VOICE TITLE — カクカク上品な2段タイトル（方向ラベル＋曲名）
   赤リボン(.titleBorder)を廃し、隅マーカー(コーナーブラケット)で
   角ばった上品な枠を表現する。背景は敷かず軽やかに見せる。
   ============================================================ */
.voice-title {
    position: relative;
    max-width: 100%;
    margin: 0.06rem auto 0.12rem;
    padding: 0.12rem 0.14rem;
    text-align: center;
}

/* 隅マーカー 4箇所（.voice-title と .voice-title-inner の擬似要素を流用）。
   .voice-title-inner は position 指定なし＝擬似要素は .voice-title 基準で配置される。 */
.voice-title::before,
.voice-title::after,
.voice-title .voice-title-inner::before,
.voice-title .voice-title-inner::after {
    content: "";
    position: absolute;
    width: 0.17rem;
    height: 0.17rem;
    border: 0 solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    pointer-events: none;
}

.voice-title::before {
    top: 0;
    left: 0;
    border-top-width: 0.015rem;
    border-left-width: 0.015rem;
}

.voice-title::after {
    right: 0;
    bottom: 0;
    border-right-width: 0.015rem;
    border-bottom-width: 0.015rem;
}

.voice-title .voice-title-inner::before {
    top: 0;
    right: 0;
    border-top-width: 0.015rem;
    border-right-width: 0.015rem;
}

.voice-title .voice-title-inner::after {
    left: 0;
    bottom: 0;
    border-left-width: 0.015rem;
    border-bottom-width: 0.015rem;
}

/* 上段：方向ラベル（下り（大阪へ向かう）等）— 小さめ・字間広め・やや控えめの白 */
.voice-title .vt-dir {
    display: block;
    font-size: 0.14rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}

/* 下段：曲名（英字）— 大きく太く真っ白に */
.voice-title .vt-song {
    display: block;
    margin-top: 0.09rem;
    font-size: 0.18rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.3;
}

/* ============================================================
   特典引換場所 — カクカク（シャープ）ダークボックス
   ============================================================ */
.kagami-exchange {
    width: 96%;
    margin: 0.22rem auto 0.1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 0.02rem solid var(--color-sub2);
    border-radius: 0;
    /* カクカク: 四隅は直角 */
}

.kagami-exchange-head {
    background: var(--color-sub2);
    color: #fff;
    font-weight: 800;
    font-size: 0.18rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.1rem;
    border-left: 0.07rem solid var(--color-local);
}

.kagami-exchange-body {
    padding: 0.16rem 0.16rem 0.18rem;
    color: var(--color-text);
    text-align: center;
}

.kagami-exchange .kx-shop {
    font-weight: 800;
    font-size: 0.16rem;
    line-height: 1.45;
}

.kagami-exchange .kx-sub {
    font-size: 0.13rem;
    margin-top: 0.05rem;
    color: #d8d8d8;
}

.kagami-exchange .kx-addr {
    display: inline-block;
    text-align: left;
    font-size: 0.135rem;
    line-height: 1.65;
    margin: 0.14rem auto 0;
    padding: 0.1rem 0.12rem;
    border-left: 0.04rem solid var(--color-local);
    background: rgba(255, 255, 255, 0.04);
}

.kagami-exchange .kx-note {
    text-align: left;
    font-size: 0.12rem;
    line-height: 1.55;
    margin-top: 0.1rem;
    color: #b9b9b9;
}

.kagami-exchange .kx-hours {
    font-size: 0.15rem;
    font-weight: 700;
    margin-top: 0.14rem;
}

.kagami-exchange .kx-hours-label {
    display: inline-block;
    background: var(--color-local);
    color: #1f1f1f;
    font-weight: 800;
    padding: 0.01rem 0.07rem;
    margin-right: 0.07rem;
}

/* ============================================================
   カクカク統一 — 角丸を全廃してシャープな印象に
   ============================================================ */
.iconButton,
.iconButton::before,
.loginRgisterButton,
.toOshitabiTop,
.simpleButton,
.titleBorder,
.title-img-container img,
.sec-head-img,
.bannerImg img,
.content-holder {
    border-radius: 0 !important;
}