@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #f1555a;   /* LP secondary（赤） */
    --color-sub2:   #2cbfb8;   /* LP primary 系（ティール） */
    --color-sub3:   #fbcaca;
    --color-sub4:   #97eae3;
    --color-sub5:   #ffc5ac;   /* LP step の STEP ラベル */
    --color-local:  #e9fccc;
    --color-text:   #444444;
    --color-button: #0daea8;
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   FORM ELEMENT FONT RESET — 削除しないこと（恒久対応 2026-09-13）

   ★ <button> / <input> / <select> / <textarea> は **UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない**。
     :root の --font-family や body に企画フォントを入れても
     **ボタンの文字だけ Arial のまま**になる。

   ★ coding（デザイン支給の custom.css）が
       .iconButton .iconButtonText { font-family: ...; }
     を持っていることが多いのは **この対策**。移植時に「body に指定があるから冗長」
     と judging して落とすと必ず再発する（2026-09 precure2026 で発生）。

   ★ **ヘッドレス Chrome では再現しない**（UA スタイルシートが実機と違い button が
     継承してしまう）。ローカル描画の計測だけで「効いている」と判断しないこと。
     実機の DevTools で
       getComputedStyle(document.querySelector('.iconButtonText')).fontFamily
     が **Arial 単体**なら UA スタイルシートが勝っている。

   base.css は共通ファイルなので触らず、ここ（custom.css）で当てる。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* 念のためボタン文字にも明示（別の UA・将来の base.css 変更でも確実に効かせる） */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.narrowIconButton .narrowIconButtonText,
.rectangleButton .rectangleButtonText,
.toOshitabiTop,
.simpleButton,
.whiteButton,
.oshitabiButton {
    font-family: var(--font-family);
}


/* ============================================================
   CONFIRM MODAL on EXCHANGE PAGES — 削除しないこと（恒久対応 2026-09-24）

   引換ページ（certificate/single.php・stamprally/exchange/completed.php）の
   確認モーダル（askPromptModal）を、**そのページのスライダー色**に揃える。

   ★ なぜ要るか
     base.css は モーダルの枠・タイトル帯・「はい」「いいえ」を
     すべて var(--color-button) 固定で塗る。一方 certificate.css は
       #yesBtn { background-color: var(--cert-btn1) !important; }
     で **「はい」の地色だけ** を上書きしている。
     そのため、引換スライダーの色（--cert-btn1）を --color-button 以外にした企画では
     「はい」だけスライダー色・枠とタイトル帯と「いいえ」はボタン色、という
     ちぐはぐな見た目になる（2026-09 yurucamp2026 で発生）。

   ★ 色をベタ書きしないこと
     --cert-btn1 は各引換ページの inline <style> が設定する値。変数で受けておけば
     「車内=オレンジ / 現地=ティール」のように**ページごとに違う配色**でも自動で揃う。
     ベタ書きすると必ずどちらか一方がズレる。

   ★ .exchangePage（body クラス）で囲っているので、
     stamprally/top.php のリセット確認モーダル等、--cert-* を持たないページには効かない
     （そちらは従来どおり --color-button）。
   ★ base.css / certificate.css は共有ファイルなので触らない。ここで上書きする。
   ★ var(--cert-btn1, var(--color-button)) とフォールバックを付けている。
     .exchangePage を名乗りながら --cert-* を出さないページを作っても、
     枠・タイトル帯が消えず従来どおりのボタン色に落ちる。
   ============================================================ */
.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));
}

/* 「はい」の地色は certificate.css が
     #yesBtn { background-color: var(--cert-btn1) !important; }
   で握っている。--cert-btn1 が未定義のページだとこの宣言が
   「計算値の時点で無効」になり、!important のまま transparent に落ちて
   **ボタンが真っ白で消える**。共有ファイルは直せないので、
   ID + クラスで特異度を上げて同じフォールバック付きの値で確定させる。 */
.exchangePage #yesBtn {
    background-color: var(--cert-btn1, var(--color-button)) !important;
}


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


/* ============================================================
   CONTENT-HOLDER — 共通 CSS の影を消す（削除しないこと）

   ★ グローバルの /css/style_v2.css（module/components_v2.0/header/
     htmlHeader.inc.php が全ページで読み込む）が
       .content-holder { box-shadow: 0 0 0.03rem #ccc; }
     を当てている。白カード前提の古い指定で、暗色・画像背景のデザインでは
     **各セクションの一番上に薄いグレーの線が浮いて見える**。
   ★ base.css にも企画の custom.css にも書いていないため grep で見つからず、
     原因特定に時間がかかる（計算済みスタイルを見ないと分からない）。
     2026-09 toukenranbu-kanei2026 で実際に踏んだのでテンプレ既定で消す。
   ★ 影が欲しい企画は、下の VARIANTS のように box-shadow を上書きする。
     /css/style_v2.css と base.css は共有ファイルなので絶対に編集しない。
   ============================================================ */
.content-holder {
    box-shadow: none;
}


button.loginRgisterButton {
    border: 0;
    font-family: inherit;
    font-size: inherit;
    /* ★ color は指定しない（.white-text より詳細度が高く、白文字を打ち消してしまう） */
}

.loginRgisterButton.noIcon {
    padding: 0.15rem 0.05rem;   /* アイコン無しなので上下は控えめに（max-height 0.55rem で頭打ち） */
}

.loginRgisterButton.noIcon .iconButtonText {
    margin-left: 0;
    margin-right: 0;            /* アイコン分の右マージンを消して中央に置く */
}


/* ============================================================
   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 は落とさない（非活性は形そのまま・色だけグレー＝規約） */
}
/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ------------------------------------------------------------
   非活性アイコンを濃い灰色にする（任意 — 白系ボタンの企画のみ）

   上のデフォルトは「暗い灰グラデの地 ＋ 白のアイコン/文字」なので、
   アイコンは白のままでよい。
   LP トンマナに合わせて disabled の地を白〜薄灰に上書きした企画では、
   白アイコンが地に溶けて消えるため、下のブロックのコメントを外す。

   アイコンは <img> の外部 SVG なので fill / color では色を変えられない。
   grayscale(1) を掛けると、企画のメインカラーが輝度どおりの灰色に落ちる
   （例: #8a579a → #676767）ので、これで「濃い灰色」を作る。
   ------------------------------------------------------------ */
/* .iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    filter: grayscale(1);
} */


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



/* ============================================================
   LP 移植 — lycoris-recoil_2nd（LP css/style.css の SP 値を ÷100 で rem 化）
   正本: https://jr-central.pnq-production.com/oshi-tabi/lycoris-recoil_2nd/phase1/
   クラス名は LP のまま。画像は assets/img（LP の img/ から取り込み）。
   ★ 背景・画像の URL は top.php の :root で変数化（--lyco-*）して渡す
     （custom.css からの相対パスはフェーズを複製すると壊れやすいため）。
   ============================================================ */
.lyco {
    --lyco-text: #444444;
    --lyco-link: #3584ec;
    --lyco-primary: #22cdc3;
    --lyco-primary02: #10d7c6;
    --lyco-secondary: #f0555a;
    --lyco-secondary02: #ff655a;
    --lyco-bg: #fafafa;
    color: var(--lyco-text);
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif;
    font-size: 0.14rem;
    overflow-x: clip;
}

.lyco * {
    box-sizing: border-box;
}

.lyco img {
    display: block;
    width: 100%;
    height: auto;
}

/* 背景（LP body::before の柄を右上へ流す） */
main.lyco::before {
    background: var(--lyco-bg-img) 0 0 / 3.75rem 3.76rem repeat;
    background-color: #ffffff;
    animation: lycoBgMove 10s linear infinite;
}

@keyframes lycoBgMove {
    0% { background-position: 0 0; }
    100% { background-position: -3.75rem -3.76rem; }
}

.lyco .container {
    width: 92%;
    margin: 0 auto;
}

.lyco .ft-openSans_C {
    font-family: "Open Sans", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "wdth" 75;
}

.lyco .ft-openSans_C span {
    font-size: 1.6em;
    line-height: 1;
}

.lyco .fc-accent { color: var(--lyco-secondary); }
.lyco .fc-primary { color: var(--lyco-primary); }
.lyco .bold { font-weight: 700; }
.lyco .center { text-align: center; }
.lyco .txt-note { font-size: 0.12rem; }

.lyco .mgtS { margin-top: 0.08rem; }
.lyco .mgtM { margin-top: 0.16rem; }
.lyco .mgtL { margin-top: 0.24rem; }

/* ---- #mv ---- */
.lyco .mv__block {
    background: var(--lyco-mv-bg) center bottom / 1.65rem 0.60rem repeat-x,
        linear-gradient(148deg, #ddfffa 45%, #ffffe1 95%);
    padding: 0 0 0.32rem;
    overflow-x: clip;
}

.lyco .mv__inner {
    width: 98%;
    margin: 0 auto;
    padding-top: 0.08rem;
}

.lyco .mv__pic {
    background-color: #fff;
    padding: 1%;
    box-shadow: 0 0.04rem 0.10rem rgba(0, 0, 0, 0.15);
    transform: rotate(1deg);
}

.lyco .mv__title {
    position: relative;
    z-index: 5;
    max-width: 4.60rem;
    margin: 0.16rem auto 0;
}

.lyco .mv__date {
    padding: 0.04rem 0;
    border-top: 0.01rem solid var(--lyco-primary02);
    border-bottom: 0.01rem solid var(--lyco-primary02);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 90%, rgba(255, 255, 255, 0) 100%);
    margin: 0.12rem auto 0;
    width: 92%;
}

.lyco .mv__date p.ft-openSans_C {
    color: var(--lyco-primary);
    text-align: center;
    font-size: 0.15rem;
    line-height: 1;
    letter-spacing: 0.03em;
}

/* ---- #menu ---- */
.lyco .menu__wrap {
    padding: 0.24rem 0 0.08rem;
}

.lyco .menu__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.10rem;
    justify-content: center;
    width: 92%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.lyco .menu__list li {
    width: calc((100% - 0.10rem) / 2);
}

.lyco .menu__list a {
    display: block;
    filter: drop-shadow(0 0.04rem 0.06rem rgba(99, 205, 240, 0.15));
}

/* アンカー着地時に固定ヘッダー（0.66rem）に隠れないように */
.lyco section[id] {
    scroll-margin-top: 0.70rem;
}

/* ---- INTRO（ログイン導線）---- */
.lyco .p-intro {
    padding-top: 0.16rem;
}

/* ---- 区切り（足あと）---- */
.lyco .border {
    padding: 0.20rem 0;
    overflow-x: clip;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lyco .border img {
    min-width: 7.50rem;
    max-height: 0.68rem;
    object-fit: contain;
}

/* ---- section 共通 ---- */
.lyco .sec__wrap {
    overflow-x: clip;
    padding-bottom: 0.32rem;
}

.lyco .sec__top {
    position: relative;
    padding-top: 0.32rem;
    padding-bottom: 0.40rem;
    margin: 0 auto;
    max-width: 4.60rem;
}

.lyco .sec__top h2 {
    position: relative;
    z-index: 3;
    margin: 0;
}

.lyco .sec__circle {
    position: absolute;
    width: 43.48%;
    top: 0;
    left: -27%;
    z-index: 0;
}

.lyco #present .sec__circle {
    left: auto;
    right: -8%;
}

.lyco #goods .sec__circle {
    left: auto;
    right: -27%;
}

.lyco .sec__circle img {
    animation: lycoCircleRole 18s linear infinite;
}

@keyframes lycoCircleRole {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.lyco .sec__lead {
    text-align: center;
    line-height: 1.5;
    font-size: 0.16rem;
    letter-spacing: 0.05em;
}

.lyco .date__wrap {
    border: solid var(--lyco-primary02);
    border-width: 0.01rem 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 10%, #fff 90%, rgba(255, 255, 255, 0) 100%);
    padding: 0.04rem 0;
    max-width: 4.00rem;
    margin-left: auto;
    margin-right: auto;
}

.lyco .date__wrap p.ft-openSans_C {
    text-align: center;
    font-size: 0.15rem;
    line-height: 1;
    letter-spacing: 0.03em;
}

.lyco .date__list {
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: flex-start;
    gap: 0.06rem;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.lyco .date__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
}

.lyco .date__num {
    color: var(--lyco-primary);
    text-align: center;
    font-size: 0.10rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
    border-radius: 1.00rem;
    border: 0.01rem solid var(--lyco-primary02);
    padding: 0.01rem 0.08rem;
    margin: 0;
}

.lyco .note__box {
    padding: 0.16rem 0.10rem;
    border-radius: 0.08rem;
    background: var(--lyco-bg);
}

.lyco .note__box ul.caution {
    margin-top: 0;
}

/* ul.caution を LP の note__list と同じ詰め方に（※ は base.css の li::after） */
.lyco ul.caution {
    display: flex;
    flex-direction: column;
    gap: 0.03rem;
    font-size: 0.12rem;
    line-height: 1.4;
}

.lyco ul.caution li a {
    color: var(--lyco-link);
    font-weight: 700;
}

/* ---- ボタン置き場 ---- */
.lyco .btn__block .iconButton {
    margin: 0.08rem auto;
}

/* ---- #voice ---- */
.lyco .cast__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
}

.lyco .cast__list li {
    flex: 1;
}

.lyco .cast__text01 {
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0.04rem 0 0;
}

.lyco .cast__text02 {
    text-align: center;
    font-size: 0.11rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ---- #present ---- */
.lyco .img__present,
.lyco .goods__wrap {
    max-width: 5.00rem;
    margin-left: auto;
    margin-right: auto;
}

/* 見出し「特典引換場所」（文字データの見出し。LP #event .event__head と同じ帯） */
.lyco .place__title,
.lyco .event__head,
.completedSlider .place__title {
    background: linear-gradient(90deg, transparent 0%, #22cdc3 10%, #22cdc3 90%, transparent 100%);
    color: #fff;
    text-align: center;
    padding: 0.04rem 0;
    font-weight: 700;
    max-width: 4.00rem;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.1em;
}

/* ---- place（引換場所・イベント概要）---- */
.lyco .place__wrap,
.completedSlider .place__wrap {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    padding: 0.16rem;
    border-radius: 0.08rem;
    border: 0.01rem solid #10d7c6;
    background: #fff;
    width: 100%;
    color: #444444;
    text-align: left;
}

.lyco .place__wrap dl,
.completedSlider .place__wrap dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    flex-direction: column;
    padding: 0 0.16rem;
    margin: 0.08rem 0 0;
}

.lyco .place__wrap dl.mgt0,
.completedSlider .place__wrap dl.mgt0 {
    margin-top: 0;
}

.lyco .place__wrap--event dl,
.completedSlider .place__wrap--event dl {
    padding: 0;
}

.lyco .place__wrap dl > div,
.completedSlider .place__wrap dl > div {
    align-self: stretch;
}

.lyco .place__wrap dt,
.completedSlider .place__wrap dt {
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.06rem;
    font-size: 0.14rem;
}

.lyco .place__wrap dt::before,
.completedSlider .place__wrap dt::before {
    content: "";
    background-color: #10d7c6;
    width: 0.06rem;
    height: 0.06rem;
    transform: rotate(45deg);
}

.lyco .place__wrap dd,
.completedSlider .place__wrap dd {
    margin: 0.04rem 0 0;
    padding-left: 0.04rem;
}

.lyco .place__text01,
.completedSlider .place__text01 {
    font-weight: 500;
    letter-spacing: 0.05em;
    font-size: 0.14rem;
    line-height: 1.4;
    margin: 0;
}

.lyco .place__wrap ul.caution,
.completedSlider .place__wrap ul.caution {
    margin: 0.04rem 0 0;
    padding: 0;
    font-size: 0.12rem;
    font-weight: 400;
    line-height: 1.4;
}

.lyco .place__head,
.completedSlider .place__head {
    background: linear-gradient(90deg, transparent 0%, #22cdc3 10%, #22cdc3 90%, transparent 100%);
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.04rem 0;
}

.lyco .place__head p,
.completedSlider .place__head p {
    margin: 0;
}

.lyco .place__head__num,
.completedSlider .place__head__num {
    font-weight: 700;
    border-right: 0.01rem solid #fff;
    padding-right: 0.08rem;
}

.lyco .place__head .ft-openSans_C,
.completedSlider .place__head .ft-openSans_C {
    font-family: "Open Sans", sans-serif;
    font-style: italic;
    font-weight: 700;
    font-variation-settings: "wdth" 75;
    font-size: 0.12rem;
}

.completedSlider .place__head .ft-openSans_C span {
    font-size: 1.6em;
    line-height: 1;
}

.completedSlider .place__title {
    font-size: 0.14rem;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}

.completedSlider .place__wrap {
    margin-top: 0.24rem;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}

/* ---- 応募要項ボタン（LP .overview__btn）---- */
.lyco .overview__btn {
    display: flex;
    flex-direction: row;
    gap: 0.08rem;
    justify-content: center;
    align-items: center;
    border: 0.01rem solid var(--lyco-primary);
    border-radius: 0.40rem;
    padding: 0.08rem 0.16rem;
    width: fit-content;
    margin: 0 auto;
    color: var(--lyco-primary);
    text-align: center;
    font-weight: 700;
    background-color: #fff;
    box-shadow: 0 0.02rem 0 var(--lyco-primary);
    text-decoration: none;
}

.lyco .overview__btn p {
    margin: 0;
}

.lyco .overview__icon {
    width: 0.13rem;
    height: 0.16rem;
    -webkit-mask: var(--lyco-pdf-icon) no-repeat center / contain;
    mask: var(--lyco-pdf-icon) no-repeat center / contain;
    background-color: var(--lyco-primary);
}

/* 意思確認の期限（抽選 pending） */
.lyco .lotteryDeadline {
    color: #c30d23;
    font-weight: 700;
    text-align: center;
    font-size: 0.14rem;
    margin-bottom: 0.04rem;
}

/* 当選者ID・識別ID（抽選 参加確定） */
.lyco .lotteryIds {
    margin-bottom: 0.12rem;
}

.lyco .lotteryIds__label {
    text-align: center;
    font-weight: 700;
    font-size: 0.16rem;
    margin: 0.08rem 0 0.04rem;
}

/* 登録期限後の文字リンク（tetsuoshi-lamplight と同じ） */
.pdfLink.disabled {
    color: #8f8f8f;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

/* 抽選 当選時の見出し（概要の下・ボタンの上） */
.lyco .lotteryWon {
    font-weight: 700;
    margin-bottom: 0.08rem;
}


/* ============================================================
   ICON BUTTON — LP「アカウント事前登録はこちら」ボタン（btn_vt01）に寄せる
   ・高さは base.css の .iconButton（0.70rem）のまま
   ・地: 水色→黄緑のグラデ＋うっすら斜めの光の筋 / 縁: 濃い青緑＋内側に白の細線
   ・文字: 青緑＋白フチ（text-shadow 8方向。-webkit-text-stroke は線が内側に食い込み
     細い字が潰れるので使わない）
   ・アイコンは淡色地なので assets/svg/icon/（/icon/*.svg を青緑に差し替えたコピー）を使う。
     共有 /icon/ は書き換えない。N700S.png は白地＋紺の全色アイコンなのでそのまま。
   ★ 形は活性・非活性で共通。非活性は色だけ灰に落とす（opacity は下げない＝規約）。
   ★ `inset` ショートハンドは古い iOS Safari で効かないので top/right/bottom/left で書く。
   ============================================================ */
.lyco .iconButton,
.lyco .iconButton.button-bg {
    border-radius: 0.40rem;
    border: 0.02rem solid #0a9e98;
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 0.14rem, rgba(255, 255, 255, 0.35) 0.14rem, rgba(255, 255, 255, 0.35) 0.15rem),
        linear-gradient(100deg, #a6faef 0%, #ccfbdb 50%, #f1fcc8 100%);
    box-shadow: 0.02rem 0.03rem 0.06rem rgba(0, 0, 0, 0.10);
    color: #0daea8;
}

.lyco .iconButton::before {
    top: 0.03rem;
    right: 0.03rem;
    bottom: 0.03rem;
    left: 0.03rem;
    border: 0.015rem solid rgba(13, 174, 168, 0.55);
    border-radius: 0.36rem;
    box-shadow: inset 0 0 0 0.01rem rgba(255, 255, 255, 0.9);
}

.lyco .iconButton .iconButtonText,
.lyco .iconButton .iconButtonText.white-text {
    color: #0daea8;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow:
        0.02rem 0 0 #fff, -0.02rem 0 0 #fff, 0 0.02rem 0 #fff, 0 -0.02rem 0 #fff,
        0.015rem 0.015rem 0 #fff, -0.015rem 0.015rem 0 #fff, 0.015rem -0.015rem 0 #fff, -0.015rem -0.015rem 0 #fff;
}

/* 非活性: 形は同じ・地は薄灰グラデ・縁と文字は灰・アイコンは grayscale で濃い灰（custom.css 規約） */
.lyco .iconButton[disabled],
.lyco .iconButton.disabled,
.lyco .iconButton:disabled,
.lyco .iconButton[disabled].button-bg,
.lyco .iconButton.disabled.button-bg,
.lyco .iconButton:disabled.button-bg {
    background: linear-gradient(100deg, #e4e4e4 0%, #f0f0f0 50%, #f7f7f7 100%) !important;
    border-color: #9a9a9a;
    color: #888 !important;
}

.lyco .iconButton[disabled]::before,
.lyco .iconButton.disabled::before,
.lyco .iconButton:disabled::before {
    border-color: rgba(154, 154, 154, 0.55) !important;
}

.lyco .iconButton[disabled] .iconButtonText,
.lyco .iconButton.disabled .iconButtonText,
.lyco .iconButton:disabled .iconButtonText {
    color: #8a8a8a !important;
}

.lyco .iconButton[disabled] .icon img,
.lyco .iconButton[disabled] .icon2nd img,
.lyco .iconButton.disabled .icon img,
.lyco .iconButton.disabled .icon2nd img,
.lyco .iconButton:disabled .icon img,
.lyco .iconButton:disabled .icon2nd img {
    filter: grayscale(1);
}

/* 「特典引換場所」の帯は .place__wrap（白枠）の中の先頭に置く。枠の幅いっぱいに広げる */
.lyco .place__wrap .place__title,
.completedSlider .place__wrap .place__title {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* グッズ販売ボタン上の注記2行（赤・やや太字・中央寄せ）。
   ※ は base.css の li::after（absolute・left:0）なので、ul を内容幅にして
   ブロックごと中央に置く（text-align:center にすると ※ だけ左端に取り残される） */
.lyco ul.caution.caution--alert {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.04rem;
    color: #e60012;
    font-weight: 700;
    font-size: 0.13rem;
}

/* 白地の枠ボタン（「トップページに戻る」.simpleButton ／「キャンペーンサイト一覧はこちら！」.toOshitabiTop）
   文字色・枠線を企画の赤（--color-sub1 #f1555a）にする。base.css は黒（--color-black）。
   ★ 引換・抽選結果・引換券ページは main が .lyco ではないので、ここは .lyco を前置しない。 */
.simpleButton,
.toOshitabiTop {
    color: var(--color-sub1);
    border-color: var(--color-sub1);
}

/* 抽選: 本日参加済み（lost）の活性ボタンの2行目（overthesun-obatabi02 と同じ） */
.lotteryDone__sub {
    display: block;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0.02rem;
}


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

/* 抽選結果ページ（lottery/result.php・body.lotteryResultPage）の確認モーダル
   （参加確認・辞退確認）を企画の赤（--color-sub1 #f1555a）にする。
   base.css は --color-button（青緑）固定。引換ページ（.exchangePage）は --cert-btn1 経由で同じ赤。 */
.lotteryResultPage .askPromptModal__content {
    border-color: var(--color-sub1);
}

.lotteryResultPage .askPromptModal__title {
    background: var(--color-sub1);
}

.lotteryResultPage .askPromptModal__yes {
    background: var(--color-sub1);
    border-color: var(--color-sub1);
}

.lotteryResultPage .askPromptModal__no {
    color: var(--color-sub1);
    border-color: var(--color-sub1);
}

/* 当選者ID・識別ID（.code-container / .copyButton）
   ★ .lyco img { width:100% }（LP 移植）がコピーボタンのアイコンにも効いて巨大化するので寸法を戻す
     （.copy-icon 単独だと .lyco img より詳細度が低い）。
   ★ 色は base.css の JR東海オレンジ（--color-tokai）ではなく企画の赤（--color-sub1 #f1555a）。
     引換券ページ（main が .lyco でない）にも効くよう .lyco を前置しない。 */
.lyco .copy-icon,
.copy-icon {
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block;
}

.code-container {
    border-color: var(--color-sub1);
}

.code-text {
    color: var(--color-sub1);
}

.copyButton {
    background: var(--color-sub1);
}