@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
   --color-main: #ffffff;
   /* ページ背景色 */
   --color-sub1: #753488;
   /* メインカラー（紫：ボタン・ボーダー・見出し） */
   --color-sub2: #564eb4;
   /* サブカラー（青紫） */
   --color-sub3: #c832de;
   /* アクセント（ピンク紫） */
   --color-sub4: #a80055;
   /* アクセント濃（ピンク濃） */
   --color-sub5: #263464;
   /* 濃紺（ダーク背景） */
   --color-local: #caa744;
   /* 差し色（ゴールド） */
   --color-text: #333333;
   /* テキストカラー */
   --color-button: #753488;
   /* ボタンカラー */
   --font-family: 'Noto Serif 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);
}


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


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
.content-holder {
   border: 0px solid var(--color-sub1);
   border-radius: 0px;
   background: rgba(255, 255, 255, 0.6);
   box-shadow: 0 0.05rem 0.15rem rgba(117, 52, 136, 0.3);
}


/* ============================================================
   BUTTONS — iconButton / phase-nav-btn のみ
   角丸ゼロ + 135° グラデーション背景 (sub1 → sub2)
   ============================================================ */
.iconButton,
.iconButton::before,
.iconButton .icon,
.iconButton .icon2nd,
.phase-nav-btn,
.phase-nav-btn::before {
    border-radius: 0 !important;
}

.iconButton,
.iconButton.button-bg,
.phase-nav-btn {
    background: linear-gradient(135deg, var(--color-sub1) 0%, var(--color-sub2) 100%) !important;
}
/* phase-nav 右側だけは逆向きグラデで対比 */
.phase-nav-row .phase-nav-btn:nth-child(2) {
    background: linear-gradient(135deg, var(--color-sub2) 0%, var(--color-sub1) 100%) !important;
    border-color: var(--color-sub2);
}

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


/* ============================================================
   TITLE IMAGE — セクションタイトルの画像は親幅いっぱい
   base.css の .title-img-container { width:80% } を打ち消すため
   コンテナ自体を 100% にする
   ============================================================ */
.title-img-container {
    width: 100%;
}
.title-img-container img {
    width: 100%;
    display: block;
}


/* ============================================================
   CAUTION — 「※画像はイメージです」など 1 行注意書きを中央寄せ
   ============================================================ */
.caution.caution-center {
    text-align: center;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.15rem;
}
.caution.caution-center li {
    list-style: none;
    padding: 0;           /* base.css の padding-left:1.1em を打ち消す */
    text-align: center;
}
/* base.css の absolute ※ を無効化 */
.caution.caution-center li::after {
    content: none;
}
/* ※ をインラインで挿入し、テキストごと中央寄せ */
.caution.caution-center li::before {
    content: "※";
}


/* ============================================================
   PHASE NAV ROW — 2 ボタン横並び（INTRO 末尾の現地企画ナビ）
   アイコンなし・コンパクト・content-holder 内に収まる
   ============================================================ */
.phase-nav-row {
    display: flex;
    gap: 0.10rem;
    margin: 0.16rem auto 0.10rem;
    width: 96%;
    max-width: 4.00rem;
}

.phase-nav-btn {
    position: relative;            /* iconButton と同じく ::before の基準 */
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.10rem 0.06rem;
    min-height: 0.60rem;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.10rem;
    background: var(--color-button);
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
}
/* 内側の白枠 (iconButton と同じ仕様) */
.phase-nav-btn::before {
    content: '';
    position: absolute;
    inset: 0.04rem;
    border: 0.02rem solid rgba(255, 255, 255, 0.9);
    border-radius: 0.06rem;
    pointer-events: none;
}
/* 2 つ目のボタン（右側）はサブカラー */
.phase-nav-row .phase-nav-btn:nth-child(2) {
    background: var(--color-sub2);
    border-color: var(--color-sub2);
}
.phase-nav-btn:hover  { opacity: 0.9; }
.phase-nav-btn:active { transform: scale(0.98); }


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