@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #dfe3b9;
    /* ページ背景色（伊勢・和風の淡い若草） */
    --color-sub1: #b03941;
    /* メインカラー（朱赤：ボタン・見出し） */
    --color-sub2: #5076a2;
    /* サブカラー（藍） */
    --color-sub3: #dd8328;
    /* アクセント（橙） */
    --color-sub4: #b03941;
    /* アクセント濃（朱赤） */
    --color-sub5: #faf5e9;
    /* 生成りの薄背景（カード） */
    --color-local: #f1d511;
    /* 差し色（黄） */
    --color-text: #8b3f56;
    /* テキスト（梅紫） */
    --color-button: #7d9a76;
    /* ボタン（苔緑） */
    --font-family: 'Noto Serif JP', YakuHanJP, 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: 0rem solid var(--color-sub1);
    border-radius: 0.10rem;
    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;
}


/* ============================================================
   OINAISAISE5TH — 伊勢 / 和風 ライトテーマ 追加スタイル
   ============================================================ */
/* 背景: bg.webp（淡いパターン）を敷く */
body {
    background-color: var(--color-main);
}

/* セクションタイトル SVG（ttl_*.svg） */
.oi-ttl {
    display: block;
    width: 92%;
    max-width: 3.60rem;
    margin: 0.05rem auto 0.20rem;
}

.oi-ttl--inside {
    width: 100%;
    max-width: 3.00rem;
}

/* セクションタイトルを直下 content-holder の「上辺ライン」に重ねる配置 */
.oi-ttl--overlap {
    position: relative;
    z-index: 2;
    margin-bottom: -0.30rem;
    /* タイトル下半分をカード上辺に被せる */
}

.oi-ttl--overlap+.content-holder {
    padding-top: 0.34rem;
    /* 重なる分だけ中身を下げて衝突を防ぐ */
}

/* 装飾区切り線（line_btm.svg・和風飾り罫） */
.oi-line {
    display: block;
    width: 100%;
    max-width: 3.20rem;
    margin: 0.22rem auto;
}

/* ============================================================
   開催期間（content-holder の外・1行・和風おしゃれ）
   ・「開催期間」ラベルを左右の飾り線つきで上に（和の品）
   ・日付は1行（数字小さめ・年月日もっと小さく）でスッと収める
   ・〜 はラベル色（朱赤）のアクセント
   ============================================================ */
.oi-date {
    text-align: center;
    color: var(--color-text);
    margin: 0.05rem auto 0.15rem;
    padding: 0 0.12rem;
}

/* ── ラベル「開催期間」＋左右飾り線 ── */
.oi-date-label {
    display: inline-flex;
    align-items: center;
    gap: 0.10rem;
    font-size: 0.125rem;
    font-weight: 700;
    letter-spacing: 0.30em;
    text-indent: 0.30em;
    /* letter-spacing で右に寄る分の補正 */
    color: var(--color-sub1);
    margin-bottom: 0.08rem;
}

.oi-date-label::before,
.oi-date-label::after {
    content: "";
    width: 0.34rem;
    height: 0.012rem;
    background: var(--color-sub1);
    opacity: 0.5;
}

/* ── 日付（1行・折返さない） ── */
.oi-date-line {
    display: block;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.1;
}

.oi-date .n {
    /* 数字：小さめ（が漢字より大きい） */
    font-size: 0.24rem;
    letter-spacing: 0.01em;
}

.oi-date .k {
    /* 年月日・曜日：さらに小さく */
    font-size: 0.135rem;
    margin: 0 0.008rem;
}

.oi-date .wave {
    /* 〜：朱赤アクセント */
    font-size: 0.17rem;
    margin: 0 0.05rem;
    color: var(--color-sub1);
}

/* ============================================================
   期間表記（【期間】）— #N チップ＋日付の見やすい和風リスト
   ・ラベル「期間」を左右飾り線つきで中央に
   ・各期は #N チップ（朱赤）＋日付（Noto Sans）を1行に
   ・生成り背景＋破線仕切りで区切る
   ============================================================ */
.oi-period {
    text-align: center;
    color: var(--color-text);
    max-width: 3.50rem;
    margin: 0.10rem auto 0.18rem;
}

.oi-period__label {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.12rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    /* letter-spacing の右寄り補正 */
    color: var(--color-sub1);
    margin-bottom: 0.07rem;
}

.oi-period__label::before,
.oi-period__label::after {
    content: "";
    width: 0.24rem;
    height: 0.012rem;
    background: var(--color-sub1);
    opacity: 0.45;
}

.oi-period__list {
    display: block;
    /* ラベルの「下」に置く（inline だとラベル横に並んで崩れる） */
    width: fit-content;
    /* 内容幅に収める */
    max-width: 100%;
    margin: 0.02rem auto 0;
    /* 中央寄せ */
    text-align: left;
    background: var(--color-sub5);
    border-radius: 0.10rem;
    padding: 0.02rem 0.14rem;
}

.oi-period__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 行内は左揃え → #N チップが縦に揃う（行ごと中央寄せのズレを解消） */
    gap: 0.10rem;
    padding: 0.075rem 0;
    line-height: 1.25;
}

.oi-period__row+.oi-period__row {
    border-top: 0.01rem dashed rgba(139, 63, 86, 0.18);
    /* color-text 18% */
}

.oi-period__no {
    flex-shrink: 0;
    font-size: 0.115rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-sub1);
    border-radius: 1rem;
    padding: 0.015rem 0.105rem;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.oi-period__date {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.14rem;
    font-weight: 600;
}

/* 商品/パネル画像 */
.oi-img {
    display: block;
    width: 92%;
    max-width: 3.40rem;
    margin: 0.12rem auto;
    border-radius: 0.08rem;
}

/* 特典引換場所（テンプレ準拠・ボーダー囲みボックス） */
.oi-exchange {
    width: 96%;
    color: var(--color-text);
    background: var(--color-sub5);
    /* 生成りの薄背景 */
    border: 0.02rem solid var(--color-sub1);
    /* 朱赤の枠 */
    border-radius: 0.10rem;
    padding: 0.16rem 0.16rem 0.10rem;
    margin: 0.16rem auto 0.12rem;
}

.oi-exchange__title {
    text-align: center;
    font-size: 0.19rem;
    font-weight: 700;
    color: var(--color-sub1);
    letter-spacing: 0.08em;
    padding-bottom: 0.08rem;
    margin-bottom: 0.12rem;
    border-bottom: 0.01rem dashed var(--color-sub1);
    /* タイトル下の仕切り */
}

/* 営業時間（時間を大きく目立たせる） */
.oi-hours {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.10rem;
    margin-top: 0.06rem;
}

.oi-hours__label {
    flex-shrink: 0;
    font-size: 0.13rem;
    font-weight: 700;
    color: var(--color-text);
}

.oi-hours__time {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.24rem;
    /* 時間を大きく */
    font-weight: 800;
    color: var(--color-sub1);
    /* 朱赤で強調 */
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* 壁紙 3グリッド */
.oi-wp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.10rem;
    margin: 0.14rem auto;
}

.oi-wp-cell {
    text-align: center;
}
/* 取得済みカードのみタップ可（指カーソル）。未取得は押せない見た目に。 */
.oi-wp-cell.wallpaperTap {
    cursor: pointer;
}
.oi-wp-cell--locked {
    cursor: default;
}

.oi-wp-cell img {
    width: 100%;
    border-radius: 0.06rem;
    border: 0.015rem solid var(--color-sub5);
    background: #fff;
    object-fit: cover;
}

.oi-wp-cell .oi-wp-q {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 0.06rem;
    border: 0.015rem dashed var(--color-button);
    background: var(--color-sub5);
    color: var(--color-button);
    font-size: 0.40rem;
    font-weight: 800;
}

.oi-wp-cell .oi-wp-label {
    margin-top: 0.06rem;
    font-size: 0.115rem;
    font-weight: 700;
    color: var(--color-text);
}

/* 現地ウェルカムボイス スポットカード */
.oi-spot {
    text-align: center;
    margin: 0.16rem auto;
}

.oi-spot .oi-spot-name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.17rem;
    margin-bottom: 0.08rem;
}


/* ============================================================
   iconButton — 和風おしゃれアレンジ（base.css は触らず custom で上書き）
   ・苔緑(button)のやわらかな縦グラデ＋生成りの二重枠（額装）
   ・梅紫の柔らかい影、明朝(Noto Serif)・字間広めでしっとり
   ・押下で軽く沈む。disabled は既存のグレー指定を優先（下で維持）
   ============================================================ */
.iconButton,
.iconButton.button-bg {
    background: linear-gradient(180deg, #8aa683 0%, var(--color-button) 60%, #71906b 100%) !important;
    border: 0.012rem solid rgba(255, 255, 255, 0.55) !important;
    /* 外周の細い白枠 */
    border-radius: 0.12rem;
    box-shadow: 0 0.035rem 0.10rem rgba(139, 63, 86, 0.22);
    /* 梅紫の柔らかい影 */
}

/* 内側の白枠（額装・1本目） */
.iconButton::before {
    inset: 0.055rem;
    border: 0.012rem solid rgba(255, 255, 255, 0.9);
    border-radius: 0.075rem;
}

/* もう1本うっすら外側に重ねて「二重罫」の和風額装に */
.iconButton::after {
    content: "";
    position: absolute;
    inset: 0.025rem;
    border: 0.01rem solid rgba(255, 255, 255, 0.30);
    border-radius: 0.095rem;
    pointer-events: none;
}

/* ラベルは明朝・字間広めで上品に */
.iconButton .iconButtonText {
    font-family: var(--font-family);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0.008rem 0.02rem rgba(80, 40, 55, 0.25);
}

.iconButton:active {
    transform: scale(0.97);
    box-shadow: 0 0.015rem 0.05rem rgba(139, 63, 86, 0.22);
}

/* disabled は既存のグレー指定（上部 .iconButton.disabled 等 !important）を維持。
   念のため枠も無効感のあるグレーに揃える。 */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
}

.iconButton[disabled]::after,
.iconButton.disabled::after,
.iconButton:disabled::after {
    border-color: rgba(255, 255, 255, 0.25);
}

/* 現地ウェルカムボイス（二次元コード読込 / ボイスを聴く）ボタンだけ橙(sub3)背景にする */
.iconButton.loadQR,
.iconButton.loadQR.button-bg,
.iconButton.localVoicePlay {
    background: linear-gradient(180deg, #e89a48 0%, var(--color-sub3) 60%, #c87420 100%) !important;
}