@charset "UTF-8";

/* LP (lp_coding) の見出しフォント — .contents__title 用 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Zen+Old+Mincho&display=swap');

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #c9a063;   /* ページ背景色（BG.jpg フォールバック） */
    --color-sub1:   #40220f;   /* メインカラー（濃茶：ボタン・ボーダー・見出し） */
    --color-sub2:   #e1ccad;   /* サブカラー（ベージュ） */
    --color-sub3:   #ed6c00;   /* アクセント（オレンジ） */
    --color-sub4:   #40220f;   /* アクセント濃（濃茶） */
    --color-sub5:   #ffffff;   /* 白背景 */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #40220f;   /* テキストカラー（濃茶） */
    --color-button: #ed6c00;   /* ボタンカラー（オレンジ） */
    --font-family:  'Noto Serif JP', YakuHanJP, sans-serif;
}


/* ============================================================
   CONTENTS TITLE — LP (lp_coding) の見出しを移植（画像見出しの置き換え）
   px は本企画の rem スケール（100px = 1rem）に換算。
   ============================================================ */
.contents__title {
    margin: 0;
}

.contents__title_jp {
    color: #40220F;
    text-align: center;
    font-family: "Zen Old Mincho", serif;
    font-size: 0.20rem;
    font-weight: 600;
    line-height: 0.28rem;
    letter-spacing: -0.006rem;
    padding: 0.10rem 0 0.10rem;
    width: 90%;
    margin: 0 auto;
}

.contents__title_en {
    color: #C9A063;
    text-align: center;
    font-family: "Cinzel Decorative", serif;
    font-size: 0.28rem;
    font-weight: 400;
    line-height: 0.28rem;
    letter-spacing: 0;
    -webkit-text-stroke: 0.01rem #6b4a22;
    border-top: 0.01rem solid #333;
    border-bottom: 0.01rem solid #333;
    padding: 0.10rem 0;
    width: 90%;
    margin: 0 auto 0.20rem;
}


/* ============================================================
   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: 3px solid var(--color-sub1);
    box-shadow: 0.04rem 0.04rem 0 var(--color-sub1);
} */


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


/* ============================================================
   BACKGROUND — BG.jpg をタイル表示（cover だと拡大しすぎるため）
   base.css の main::before（cover）を custom.css 側で上書きする。
   ============================================================ */
main::before {
    background-repeat: repeat;
    background-size: 3rem auto;
    background-position: top left;
}


/* ============================================================
   BUTTON — 角丸を少し角ばらせ、内側の線を点線にする
   base.css の .iconButton（角丸0.18rem）と ::before（実線白枠）を上書き。
   ============================================================ */
.iconButton {
    border-radius: 0.06rem;
}
.iconButton::before {
    border-style: dotted;
    border-radius: 0.04rem;
}


/* ============================================================
   CONTENT HEADER IMAGE — 各セクション content-holder 最上部の見出し画像
   section-heading（テキスト帯）の直下、content-holder の中に置く。
   ============================================================ */
.content-header-img {
    width: 100%;
    margin: 0 0 0.10rem;
}
.content-header-img img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   DATE BANNER — 日付の案内を「2026.7.31 FRI. - 8.21 FRI.」で統一
   シンプル・背景なし・Noto Serif JP。
   PHP ヘルパー stylishDateRange() が range 部分の HTML を出力する。
   ============================================================ */
.date-banner {
    display: block;
    margin: 0.12rem auto;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.date-banner__label {
    display: inline-block;
    font-size: 0.13rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--color-text);
    margin-bottom: 0.02rem;
    font-family: var(--font-family);
}
.date-banner__range {
    display: block;
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.22rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-family: var(--font-family);
    white-space: nowrap;
}
.date-banner__dow {
    font-size: 0.13rem;
    font-weight: 700;
    margin-left: 0.02rem;
    color: var(--color-sub3);
}
.date-banner__sep {
    margin: 0 0.06rem;
    color: var(--color-sub3);
    font-weight: 700;
}


/* ============================================================
   PRIZE LIST — 賞品（A賞/B賞）。囲いなし・賞ランクは sub1 背景。
   ============================================================ */
.prize-list {
    max-width: 4.6rem;
    margin: 0.14rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.10rem;
}
.prize-row {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.prize-rank {
    flex: 0 0 auto;
    min-width: 0.56rem;
    text-align: center;
    background: var(--color-sub1);
    color: #fff;
    font-weight: 800;
    font-size: 0.17rem;
    padding: 0.08rem 0.06rem;
    border-radius: 0.04rem;
    letter-spacing: 0.02em;
}
.prize-body {
    flex: 1 1 auto;
    text-align: left;
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.15rem;
    line-height: 1.25;
}
.prize-body small {
    display: block;
    font-size: 0.11rem;
    font-weight: 600;
    opacity: 0.85;
}
.prize-count {
    flex: 0 0 auto;
    color: var(--color-sub3);
    font-weight: 800;
    font-size: 0.24rem;
    line-height: 1;
    white-space: nowrap;
}
.prize-count small {
    font-size: 0.11rem;
    font-weight: 700;
    color: var(--color-text);
    margin-left: 0.01rem;
}


/* ============================================================
   EXCHANGE BOX — 特典引換場所（トップ / 引換画面 共通）
   SEKAI NO OWARI の世界観（濃茶×ベージュ×黄アクセント・Noto Serif JP）に
   合わせつつ、店舗名と受付時間が一目でわかる構成。
   ============================================================ */
.exchange-box {
    max-width: 4.8rem;
    margin: 0.16rem auto;
    background: var(--color-sub5);
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.10rem;
    overflow: hidden;
    box-shadow: 0 0.02rem 0.06rem rgba(64, 34, 15, 0.12);
}
.exchange-box__head {
    background: var(--color-sub1);
    color: #fff;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.17rem;
    letter-spacing: 0.12em;
    padding: 0.10rem;
    border-bottom: 0.03rem solid var(--color-local);
}
.exchange-box__body {
    padding: 0.06rem 0.16rem 0.10rem;
}
.exchange-shop {
    text-align: center;
    padding: 0.10rem 0;
}
.exchange-shop + .exchange-shop {
    border-top: 0.01rem dashed rgba(64, 34, 15, 0.25);
}
.exchange-shop__name {
    color: var(--color-sub1);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.17rem;
    line-height: 1.35;
}
.exchange-shop__hours {
    color: var(--color-text);
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.13rem;
    font-weight: 600;
    margin-top: 0.03rem;
    letter-spacing: 0.02em;
}
.exchange-box__note {
    padding: 0 0.16rem 0.12rem !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;
}


/* ============================================================
   WALLPAPER — 壁紙1枚のときはセンタリング
   base.css に .cols-1 が無く既定 --cols:3（左寄せ1/3幅）になるため上書き。
   ============================================================ */
.thumbnails-container.cols-1 {
    display: flex;
    justify-content: center;
}
.thumbnails-container.cols-1 .thumbnail {
    width: 45%;
    max-width: 2.2rem;
}