@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #ffdcdd;
    /* ページ背景色（淡いピンク） */
    --color-sub1: #fff0f0;
    /* メインカラー */
    --color-sub2: #abd9f1;
    /* サブカラー（水色） */
    --color-sub3: #756659;
    /* アクセント（ブラウン） */
    --color-sub4: #a80055;
    /* アクセント濃 */
    --color-sub5: #fff0f0;
    /* 薄背景 */
    --color-local: #ffc14e;
    /* 差し色（黄） */
    --color-text: #524d4c;
    /* テキストカラー */
    --color-button: #ffc14e;
    /* ボタンカラー（黄） */
    --font-family: 'Zen Maru Gothic', YakuHanJP, sans-serif;
}


/* ============================================================
   SECTION HEADING — ちいかわ風の可愛い丸みカプセル見出し
   白い角半円カプセル + ピンクの枠線/文字 + 両脇の丸ぽち
   ============================================================ */
.section-heading {
    width: 100%;
    text-align: center;
    padding: 0.10rem 0.16rem 0.10rem;
    background: none;
    position: relative;
}

/* 旧・下線アクセントは廃止（カプセル見出しに変更したため） */
.section-heading::after {
    display: none;
}

.section-heading-text {
    position: relative;
    display: inline-block;
    text-align: center;
    color: var(--color-sub4);
    background: #fff;
    border: 0.03rem solid var(--color-sub4);
    border-radius: 0.40rem;
    padding: 0.10rem 0.42rem;
    font-size: 0.20rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
    font-family: var(--font-family);
    box-shadow: 0 0.04rem 0 rgba(168, 0, 85, 0.18);
    text-shadow: none;
}

/* 見出し両脇の丸ぽち（ちいかわ風のゆるかわ装飾）。
   絶対配置で上下中央に固定するため、見出しが2行になっても形が崩れない。 */
.section-heading-text::before,
.section-heading-text::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.09rem;
    height: 0.09rem;
    border-radius: 50%;
    background: var(--color-button);
}

.section-heading-text::before {
    left: 0.18rem;
}

.section-heading-text::after {
    right: 0.18rem;
}


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


/* ============================================================
   CONTENT-HOLDER BORDER VARIANTS (任意)
   イベントカラーの枠 + 影をつける場合
   ============================================================ */
.content-holder {
    width: 96%;
    background-color: var(--color-white);
    border: 0rem solid var(--color-sub1);
    margin-top: 0.08rem;
    padding-bottom: 0.12rem;
    position: relative;
    box-shadow: unset;
    margin-bottom: 0.10rem;
}


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


/* ============================================================
   CONTENT-HOLDER 背景 — color-sub1（淡いピンク）
   ============================================================ */
.content-holder {
    background-color: var(--color-sub1);
}

/* content-holder を sub1 にすると同色の hr.sub1-border が見えなくなるため、
   区切り線はちいかわ風の点線（薄い水色）に置き換える */
.content-holder hr.sub1-border {
    border: 0;
    border-top: 0.02rem dashed var(--color-sub2);
    margin: 0.10rem auto;
    width: 92%;
}


/* ============================================================
   BUTTON — シンプルな角半円（ピル形）。白ボーダー、内側の線は削除。
   文字色は color-text（無効時のみ白で可読性確保）。フォントは Zen Maru Gothic。
   （button 要素は body の font-family を継承しないため明示指定する）
   ============================================================ */
.iconButton {
    border-radius: 0.35rem;
    /* 角半円（高さ0.70rem の半分） */
    border: 0.03rem solid #fff;
    /* 白ボーダー */
    font-family: var(--font-family);
    /* Zen Maru Gothic */
}

/* 内側の二重線（::before）は削除 */
.iconButton::before {
    display: none;
}

/* ボタン文字色 = color-text */
.iconButton .iconButtonText {
    color: var(--color-text);
    font-size: var(--fs-lg);
}

/* 無効ボタンは白文字のまま（グレー背景での可読性確保） */
.iconButton[disabled] .iconButtonText,
.iconButton.disabled .iconButtonText,
.iconButton:disabled .iconButtonText {
    color: #fff;
}

/* ログアウト時の「アカウント新規登録／ログイン」ボタンも
   iconButton と同じ角半円・白ボーダー・color-text 文字に揃える */
.loginRgisterButton {
    border-radius: 0.30rem;
    border: 0.03rem solid #fff;
    font-family: var(--font-family);
}

.loginRgisterButton .iconButtonText {
    color: var(--color-text);
    font-family: var(--font-family);
}


/* ============================================================
   乗車証明ノベルティ画像 — トップでは少し小さめに表示
   ============================================================ */
.cert-novelty-img {
    display: block;
    width: 64%;
    max-width: 2.40rem;
    height: auto;
    margin: 0.06rem auto 0.04rem;
}


/* ============================================================
   特典引換場所 — ちいかわ風の可愛い引換ボックス
   タイトル: color-sub3 背景 + 白文字
   各場所:   白背景 + color-text 文字、hr（点線）で区切り
   ============================================================ */
.exchange-box {
    width: 100%;
    margin: 0.16rem auto 0.15rem;
    background: #fff;
    border: 0.03rem solid var(--color-sub3);
    border-radius: 0.20rem;
    overflow: hidden;
    box-shadow: 0 0.03rem 0.10rem rgba(117, 102, 89, 0.15);
}

.exchange-box__title {
    background: var(--color-sub3);
    color: #fff;
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: center;
    padding: 0.11rem 0.10rem;
    letter-spacing: 0.06em;
}

.exchange-box__body {
    background: #fff;
    padding: 0.04rem 0.16rem;
}

.exchange-box__shop {
    padding: 0.12rem 0 0.11rem;
}

/* 地名（【東京】など）— アクセント色・小さめ */
.exchange-box__area {
    color: var(--color-sub4);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

/* 店舗名 — 一番目立たせる */
.exchange-box__place {
    color: var(--color-text);
    font-size: var(--fs-md);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.01rem;
}

/* 引換可能時間 */
.exchange-box__hours {
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    margin-top: 0.05rem;
}

/* 注釈 — 左寄せ・上記より小さめ・※付き */
.exchange-box__notes {
    margin: 0.06rem 0 0;
    padding: 0;
    text-align: left;
}

.exchange-box__notes li {
    position: relative;
    list-style: none;
    color: var(--color-text);
    font-size: 0.11rem;
    line-height: 1.45;
    padding-left: 0.95em;
    margin-top: 0.02rem;
    opacity: 0.85;
}

.exchange-box__notes li::before {
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}

.exchange-box__divider {
    border: 0;
    border-top: 0.015rem dashed var(--color-sub3);
    margin: 0;
    opacity: 0.55;
}

.exchange-box .novelty-caution,
.exchange-box .caution {
    color: var(--color-text);
    padding: 0.04rem 0.16rem 0.14rem !important;
    margin: 0;
}



/* ============================================================
   EVENT PERIOD — 開催期間バナー（content-holder の外・ちいかわ風）
   白カード+水色点線、ピンクの「開催期間」ラベル、日付は太字中央
   ============================================================ */
.event-period {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.07rem;
    width: 96%;
    max-width: 4.40rem;
    margin: 0.10rem auto 0.10rem;
    padding: 0.10rem 0.18rem 0.15rem;
    background: #fff;
    border: 0.03rem dashed var(--color-sub2);
    border-radius: 0.24rem;
}

.event-period__label {
    display: inline-block;
    background: var(--color-tokai);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 0.10em;
    padding: 0.04rem 0.24rem;
    border-radius: 0.30rem;
    box-shadow: 0 0.02rem 0 rgba(168, 109, 0, 0.25);
}

.event-period__date {
    color: var(--color-text);
    font-size: 0.125rem;   /* 年月日・(曜)・〜 など漢字記号は小さめ */
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

/* 数字は大きく */
.event-period__date .num {
    font-size: 0.22rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin: 0 0.015rem;
    vertical-align: -0.005rem;
}