@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #1c66a2;   /* メインカラー（青：ボタン・ボーダー・見出し） */
    --color-sub2:   #0f4a7a;   /* サブカラー（濃い青：グラデーション端） */
    --color-sub3:   #d90d71;   /* アクセント（ピンク） */
    --color-sub4:   #a80055;   /* アクセント濃（ピンク濃） */
    --color-sub5:   #e8f1f8;   /* 薄青背景 */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #1a1a2e;   /* テキストカラー */
    --color-button: #1c66a2;   /* ボタンカラー */
    --font-family:  'M PLUS Rounded 1c', 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: 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;
}


/* ============================================================
   QUIZ — 「確定して次へ」の未選択状態（デザイン: 選択前はグレー）
   コーダーの event.css に disabled 指定が無いので custom.css で補う。
   :disabled で特異度を上げているので event.css より先に読まれても効く。
   ============================================================ */
.c-card--quiz__next:disabled {
    background-color: var(--event-color-disabled);
    color: var(--event-color-disabled-text);
}

/* ============================================================
   LOTTERY — 本日参加済みボタンの2行目（テンプレ custom.css と同じ）
   ★ コーダーの .c-btn は display:flex（横並び）なので、テキストと
     .lotteryDone__sub が横に並んで1行に潰れる。このボタンだけ縦積みにする。
   ============================================================ */
.c-btn.lotteryDone {
    flex-direction: column;
}

.lotteryDone__sub {
    display: block;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0.02rem;
}

/* ============================================================
   WALLMAKER — 作成した壁紙が無いときの文言（wallmaker/list.php）
   デザインの「今日は既に壁紙を作成済みです。」と同じ見た目
   （黄色地に焦茶の太字・中央。見出し .p-event-wallmaker__editor-title と同系）
   ============================================================ */
.p-wallmaker__empty {
    font-family: var(--font-zenmaru);
    font-weight: var(--font-weight-bold);
    font-size: 0.2rem;
    line-height: 0.33rem;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--event-color-gray);
    padding-bottom: 0.3rem;
}

/* ============================================================
   CERTIFICATE — 特典引換場所ボックスの左右余白（certificate/single.php のみ）
   本企画の certificate.css の .completedSlider は左右 padding を持たない旧コピーなので、
   c-info-box（width:100%）が端に貼り付く。上の注意書き ul.caution（padding 0.20rem）と
   端を揃えるため、ボックスを包む section にだけ同じ余白を入れる。
   ★ .completedSlider 自体に padding を足すと ul.caution が二重インデントになるので触らない。
   ============================================================ */
.completedSlider .event-content--certificate {
    box-sizing: border-box;
    padding: 0 0.20rem;
}

/* ============================================================
   EXCHANGE MODAL — 引換確認モーダルをスライダー色（ぴよりんオレンジ）に揃える
   テンプレ _template_master/assets/css/custom.css の恒久対応と同じブロック。
   base.css は枠・タイトル帯・はい・いいえを --color-button（青 #1c66a2）で塗り、
   certificate.css は #yesBtn だけ --cert-btn1（certificate/single.php の $buttonColor1 =
   --event-color-orange）で塗るため、色が混ざっていた。
   ★ base.css / certificate.css は共有ファイルなので触らない。ここで上書きする。
   ============================================================ */
.exchangePage .askPromptModal__content {
    border-color: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__title {
    background: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__yes {
    background: var(--cert-btn1, var(--color-button));
    border-color: var(--cert-btn1, var(--color-button));
}

.exchangePage .askPromptModal__no {
    color: var(--cert-btn1, var(--color-button));
    border-color: var(--cert-btn1, var(--color-button));
}

.exchangePage #yesBtn {
    background-color: var(--cert-btn1, var(--color-button)) !important;
}

/* ============================================================
   ALERT MODAL — コピー完了などの通知（showAlert / closeAlert）
   ★ 本企画の base.css はテンプレより古く、このブロックが無いため
     _template_master/assets/css/base.css から写した（base.css は編集しない規約）。
     これが無いと、下の「タイトル帯の角」だけが効いてモーダルが崩れる。

   HTML は共有ヘッダー（module/components_v2.0/header/headNavi.inc.php）が
   出しているのでマークアップは触れない。素の見た目は共有 css/style_v2.css の
   #alertModal / .modal-content / .close-button で、角丸が浅く askPromptModal と
   意匠が揃わない。ここで見た目だけ揃える（共有 CSS は全企画に波及するので触らない）。

   色は東海オレンジ（--color-tokai = #ED6D00）。企画色に寄せたい場合は
   custom.css で #alertModal 配下の background / border-color を上書きする。

   ★ アニメーションに askPromptScaleIn を流用しないこと。
     あちらは .askPromptModal__content が position:fixed + top/left 50% で
     中央寄せされている前提で translate(-50%, -50%) を含む。
     #alertModal は共有 CSS が **flex で中央寄せ** しているので、translate 付きの
     キーフレームを当てると開いた瞬間に左上へずれ、終了時に元位置へ飛ぶ。
     そのため translate を含まない専用キーフレームを使う。
   ============================================================ */
#alertModal {
    background-color: rgba(0, 0, 0, 0.45);
    animation: alertModalFadeIn 0.18s ease-out;
}

@keyframes alertModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* flex 中央寄せなので translate を入れない（scale だけ） */
@keyframes alertModalPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

#alertModal .modal-content {
    padding: 0.28rem 0.22rem 0.22rem;
    width: 88%;
    max-width: 3.40rem;
    border-radius: 0.12rem;
    border: 0.01rem solid var(--color-tokai);
    box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.2);
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    animation: alertModalPopIn 0.20s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    overflow: hidden;   /* タイトル帯の角を content の角丸で切る */
}

/* タイトル帯。コピーした ID が入るので折り返さず1行に収める */
#alertModal #alertTitle {
    display: block;
    margin: -0.28rem -0.22rem 0.16rem;
    padding: 0.10rem 0.14rem;
    background: var(--color-tokai);
    color: #ffffff;
    font-size: 0.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 0.12rem 0.12rem 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#alertModal #alertMessage {
    font-size: 0.15rem;
    line-height: 1.6;
    margin: 0 0 0.06rem;
    color: var(--color-text);
    text-align: center;
}

#alertModal .close-button {
    min-width: 1.30rem;
    margin-top: 0.12rem;
    padding: 0.10rem 0.14rem;
    background: var(--color-tokai);
    color: #ffffff;
    border: 0.01rem solid var(--color-tokai);
    border-radius: 0.08rem;
    font-size: 0.16rem;
    font-weight: 800;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    transition: transform 0.08s, opacity 0.15s;
}

#alertModal .close-button:hover  { background: var(--color-tokai); opacity: 0.9; }
#alertModal .close-button:active { transform: scale(0.97); }

/* 企画色（ぴよりんオレンジ）に寄せる。テンプレ推奨の --color-tokai 差し替え */
#alertModal {
    --color-tokai: var(--event-color-orange, #F38D1F);
}


/* ============================================================
   ALERT MODAL タイトル帯の角 — 削除しないこと（恒久対応 2026-09-25）

   ★ base.css の #alertModal .modal-content は「角丸 0.12rem ＋ 枠線 0.01rem」、
     タイトル帯 #alertTitle は border-radius: 0.12rem 0.12rem 0 0。
     この組み合わせだと **左上・右上の角に白い細い線（隙間）** が出る
     （2026-09 overthesun-obatabi02 で指摘）。
       1) 枠線の内側の角丸は 0.12 − 0.01 = 0.11rem なのに帯は 0.12rem で丸まる
       2) 背景の白が枠線の下まで塗られ、角のアンチエイリアスで白がにじむ
     タイトル帯の角丸を 0 にするだけでは 2) が残る（実測で確認）。
   ★ 対策（3点セット・どれか欠けると線が残る）:
       a) 枠線をやめて box-shadow の外周1本で同じ枠を描く（内側に継ぎ目ができない）
       b) タイトル帯は角丸なし＝外枠の overflow: hidden で角を切る
       c) 外枠の背景の「上端 0.30rem だけ」を帯と同じ色にする。角のアンチエイリアスは
          下地の白と帯の色が混ざって白っぽい線になるので、角の下地を帯色にしておく
          （0.30rem は帯の高さ（約0.42rem）より低いので、帯の下に白が見えることはない）
   ★ 色は var(--color-tokai)。企画色にする場合は #alertModal で --color-tokai を差し替える
     （base.css / 共有 style_v2.css は触らない）。
   ============================================================ */
#alertModal .modal-content {
    border: 0;
    box-shadow: 0 0 0 0.01rem var(--color-tokai), 0 0.08rem 0.24rem rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, var(--color-tokai) 0, var(--color-tokai) 0.30rem, #ffffff 0.30rem);
}
#alertModal #alertTitle {
    border-radius: 0;
}


/* ============================================================
   ASK PROMPT MODAL タイトル帯の角 — 削除しないこと（2026-09-26）
   ★ base.css は外枠 .askPromptModal__content が「角丸 0.12rem ＋ 枠 0.01rem」、
     タイトル帯 .askPromptModal__title が「0.12rem 0.12rem 0 0」。
     枠線の内側の角丸は 0.12 − 0.01 ≒ 0.11rem なので、帯を 0.12rem で丸めると
     左上・右上に隙間（白い欠け）が出る。帯の角丸を内側に合わせて小さくする。
   ★ base.css は共有なので触らず、ここ（custom.css）で上書きする。
   ============================================================ */
.askPromptModal__title {
    border-radius: 0.10rem 0.10rem 0 0;
}

/* ============================================================
   QUIZ — 問題文の左右余白
   event.css の .c-card--quiz__text は width: calc(100% + 0.5rem) / margin-left: -0.25rem で
   カードより左右 0.25rem ずつはみ出しており、長い問題文が端まで詰まって読みにくい。
   はみ出し分と同じ 0.25rem の padding を入れて、選択肢ボタンと左右の端を揃える。
   （event.css はコーダー支給なので触らず custom.css で上書きする。padding-bottom は event.css のまま）
   ============================================================ */
.c-card--quiz .c-card--quiz__text {
    box-sizing: border-box;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}