@charset "UTF-8";

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

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


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    /* LP（https://recommend.jr-central.co.jp/hamanako-cyc/morningmusume/）の
       assets/css/index.css の :root をそのまま移植した配色。
         --color-main1       #1ea4d9  水色（帯・ボタン・枠）
         --color-main2       #f2921a  オレンジ（見出し・ボタン）
         --color-main-light  #97d0e6  薄い水色（セクション地）
         --color-main-light2 #75c6e6  薄い水色2（ラベル地）
       ページ地は LP の #f8f8f6 ＋ドット柄（assets/img/bg.webp = LP bg_dots）。 */
    --color-main:   #97d0e6;   /* ページ背景色（背景画像の下地） */
    --color-sub1:   #1ea3d9;   /* メインカラー（水色：ボタン・ボーダー・見出し） */
    --color-sub2:   #f2921b;   /* サブカラー（オレンジ） */
    --color-sub3:   #f2921b;   /* アクセント（オレンジ） */
    --color-sub4:   #75c6e6;   /* 薄い水色（ラベル地） */
    --color-sub5:   #edbc7e;   /* ベージュ（LP rentalArea の地） */
    --color-local:  #f1d511;   /* 差し色（黄色） */
    --color-text:   #000000;   /* テキストカラー */
    --color-button: #f2921b;   /* ボタンカラー */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
    /* 見出し用の装飾書体。LP の .section__title / .menu__link と同じ LINE Seed JP */
    --font-family-deco: 'LINE Seed JP', 'Noto Sans JP', YakuHanJP, sans-serif;

    /* LP のボタン内 矢印色（.mapButton__icon::before の border-color） */
    --color-arrow: #f39800;

    /* ------------------------------------------------------------
       レイアウト・トークン（★ 見た目の一貫性はここだけで決める）

       白カード（.content-holder / .period / .spotCard）とボタン
       （.iconButton / .simpleButton / .loginRgisterButton）は
       すべて下の変数から寸法を取る。個別に width / height / radius を
       書き足すと必ずバランスが崩れるので、調整はこの4つだけを触る。
       ------------------------------------------------------------ */
    --card-width:  96%;      /* .page-content(4.30rem) に対するカード幅 */
    --card-radius: 0.20rem;  /* 白カードの角丸 */
    --card-pad-x:  0.18rem;  /* 白カードの左右パディング（caution の ※ 分を含む） */
    --card-pad-y:  0.18rem;  /* 白カードの上下パディング */

    /* ボタンは種類が違っても「同じ幅・同じ高さ・同じ角丸」に揃える。
       カード内（4.30×0.96 − 0.18×2 = 3.77rem）でも素のセクション内でも
       同じ 3.60rem になるようにこの値にしている。 */
    --btn-width:   3.60rem;
    --btn-height:  0.72rem;
}


/* ============================================================
   PAGE GROUND — 背景ドット柄はタイル（cover ではなく repeat）

   base.css の main::before は `var(--image-bg) no-repeat center / cover` で、
   1枚絵の KV 背景を前提にしている。本企画の bg.webp は LP の bg_dots
   （943px 角のシームレスなドット柄）なので cover だと拡大されて柄が崩れる。
   ============================================================ */
main::before {
    background: var(--image-bg) repeat left top / 4.30rem auto;
    background-color: var(--color-main);
}


/* ============================================================
   LP DESIGN SYSTEM — 浜名湖サイクリング LP からの移植
   正本: https://recommend.jr-central.co.jp/hamanako-cyc/morningmusume/
         assets/css/index.css

   LP は html font-size 62.5%（1rem = 10px）だが、こちらは
   base.css の rem システム（100px = 1rem・デザイン px ÷ 100）なので
   LP の px 値を ÷100 して移植している。
   ============================================================ */

/* ---- .section__title — オレンジの LINE Seed JP 見出し -------------
   LP: color:var(--color-main2) / LINE Seed JP 900 / min(6.5vw,6rem)
       letter-spacing:.15em / line-height:1.25
   `--small` は 0.75em の副題（例「東海道新幹線」＋「車内限定ボイス」）。 */
.section__title {
    margin: 0.24rem auto 0;
    color: var(--color-sub2);
    font-family: var(--font-family-deco);
    font-weight: 800;
    font-size: 0.30rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-align: center;
}

.section__title--small {
    display: block;
    font-size: 0.75em;
}

/* ---- .sectionEmblem — セクション見出しの上に置く丸ロゴ ------------
   支給素材の円形ロゴ（浜名湖サイクリング）を LP のロゴマークと同じ扱いで置く。 */
.sectionEmblem {
    width: 1.00rem;
    margin: 0.10rem auto 0;
}

.sectionEmblem img {
    width: 100%;
    display: block;
}

/* ---- .leadDate — 開催期間の帯（LP .leadArea__date の移植）-----------
   LP: MV の直下に「水色の帯 ＋ 中に白い丸ピル」を敷き、ピルの中に
       小さい見出し（キャンペーン期間）と大きい日付（--color-main1）を置く。
       SP は縦積み・ピルは幅いっぱい。
   ★ 文言は文字データ準拠で「開催期間」＋和暦表記のまま。LP から持ってくるのは
     見た目（帯・白ピル・日付の大きさ・曜日を一段小さく）だけ。 */
.leadDate {
    display: flex;
    justify-content: center;
    padding: 0.16rem;
    background-color: var(--color-sub1);
}

.leadDate__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.06rem;
    width: 100%;
    padding: 0.16rem 0.10rem;
    border-radius: 100vmax;
    background-color: var(--color-white);
}

.leadDate__title {
    margin: 0;
    color: var(--color-text);
    font-size: 0.14rem;
    font-weight: 400;
    line-height: 1.4;
}

.leadDate__day {
    margin: 0;
    color: var(--color-sub1);
    font-size: 0.20rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* 曜日は一段小さく（LP は英語曜日を 0.76em ＋下線で落としている） */
.leadDate__day .dow {
    font-size: 0.76em;
    font-weight: 600;
}


/* ---- .section__catch — 見出し直下のリード文 ---------------------- */
.section__catch {
    width: var(--card-width);
    margin: 0.14rem auto 0;
    padding: 0;
    color: var(--color-text);
    font-size: 0.15rem;
    font-weight: 500;
    line-height: 1.87;
    text-align: center;
}

/* ---- .heading — 画像地の見出し（LP title_bg01/02/03.webp）--------
   LP: width 525px / aspect-ratio 525:258 の画像を背景に、
       __small（黒・600）＋ __main（オレンジ・800）を縦に重ねる。 */
.heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 白カードと同じ幅に揃える（LP も SP では section__inner いっぱい） */
    width: var(--card-width);
    margin: 0.20rem auto 0;
    aspect-ratio: 525 / 258;
    line-height: 1.7;
    text-align: center;
}

.heading--01 {
    background: url("../img/title_bg01.webp") no-repeat center center / cover;
}

.heading--02 {
    background: url("../img/title_bg02.webp") no-repeat center center / cover;
}

.heading__small {
    padding: 0 0.20rem;
    color: var(--color-text);
    font-size: 0.14rem;
    font-weight: 600;
}

.heading__main {
    padding: 0 0.16rem;
    color: var(--color-sub2);
    font-size: 0.19rem;
    font-weight: 800;
}

.heading__main .small {
    color: var(--color-text);
    font-size: 0.83em;
}

/* ---- .waveSection — 波型の区切りで囲む薄水色セクション --------------
   LP: .specialArea（車内限定ボイス）が上下に bg_wave2.svg を敷き、
       セクション地を --color-main-light(#97d0e6) にしている。
   波の SVG は fill:#97d0e6 の「下側が塗り」の形なので、
   上端は ::before をそのまま／下端は ::after を 180度回して使う。 */
.waveSection {
    --wave-height: 0.34rem;
    --wave-overlap: 1px;
    position: relative;
    margin-block: var(--wave-height);
    padding-block: 0.10rem 0.24rem;
    background-color: #97d0e6;
}

.waveSection::before,
.waveSection::after {
    content: "";
    position: absolute;
    left: 0;
    z-index: 0;
    width: 100%;
    height: var(--wave-height);
    pointer-events: none;
}

.waveSection::before {
    bottom: calc(100% - var(--wave-overlap));
    background: url("../img/bg_wave2.svg") repeat-x center bottom / auto 100%,
                url("../img/bg_wave2_back.webp") no-repeat 40% bottom / 150% 100%;
}

.waveSection::after {
    top: calc(100% - var(--wave-overlap));
    transform: scale(-1, -1);
    background: url("../img/bg_wave2.svg") repeat-x center bottom / auto 100%;
}

/* 波の帯に隠れないよう中身を前面に置く */
.waveSection > * {
    position: relative;
    z-index: 1;
}

/* ---- .dotSection — 右上にドット装飾を敷くセクション -----------------
   LP: .stampArea が stamp_bg_top.webp を right top に置いている。 */
.dotSection {
    position: relative;
    padding-top: 0.18rem;
    background: url("../img/stamp_bg_top.webp") no-repeat right top / 2.60rem auto;
}

/* ---- .period — 車内限定ボイスの「期間：#1〜#3」ボックス -------------
   LP: 白 border-radius 25px の中に、左に期間リスト・右に写真。
   （LP の「期間：」見出しは出さない — 開催中の1弾しか載せないため不要）
   ★ 独自の白カードを作らず .content-holder に相乗りする（HTML 側で
     class="content-holder period"）。角丸・枠・幅・余白がトップの
     他のカードと自動的に揃う。写真だけカードの端まで伸ばす。 */
.period__list {
    width: fit-content;
    margin: 0.14rem auto 0.14rem;
    padding: 0;
    list-style: none;
}

.period__list li {
    position: relative;
    margin-left: 0.25rem;
    color: var(--color-sub1);
    font-size: 0.17rem;
    font-weight: 700;
    line-height: 2;
}

/* 「#1」の後ろに敷く薄オレンジの丸（LP .period__list li::after） */
.period__list li::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1.5em;
    width: 2.25em;
    aspect-ratio: 1 / 1;
    border-radius: 100vmax;
    background-color: #ffcc8d;
}

.period__list li .num {
    position: relative;
    z-index: 1;
    display: block;
}


/* 写真はカードの左右・下端まで伸ばす（LP の 2 カラムを SP 用に縦積み） */
.period__img {
    margin-inline: calc(var(--card-pad-x) * -1);
    margin-bottom: calc(var(--card-pad-y) * -1);
}

.period__img img {
    width: 100%;
    display: block;
}


/* ---- スポットカード（LP .spotList を1カラムに読み替え）--------------
   ★ こちらも .content-holder に相乗りする（class="content-holder spotCard"）。
     枠線・角丸・余白は共通トークン任せで、固有の指定は文字組みだけ。 */
.spotCard__heading {
    color: var(--color-text);
    font-size: 0.17rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.spotCard__text {
    margin-top: 0.08rem;
    color: var(--color-text);
    font-size: 0.14rem;
    line-height: 1.87;
    text-align: left;
}


/* ---- 壁紙サムネのスポット名（?サムネの下に出すラベル）--------------- */
/* 4列グリッドのセル幅が狭いので、改行位置は HTML 側の nameHtml（<br>）で決める。
   ★ word-break: break-all は使わない（「弁天島サイク／ルゲート」のように
     語中で切れる。雛形既定の指定を外してある）。 */
.wp-thumb-name {
    padding: 0.05rem 0.02rem 0;
    color: var(--color-text);
    font-size: 0.12rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}


/* ============================================================
   CARD — 白カードは1種類だけ（.content-holder）

   トップ・チェックイン・壁紙・マップの全ページで同じ見た目にする。
   .period / .spotCard も HTML 側で .content-holder を併記して相乗りさせ、
   固有クラスでは寸法（幅・角丸・余白・枠）を一切上書きしない。

   ★ base.css の .content-holder は左右パディングを持たないため、
     ul.caution（li の ※ が left:0 のぶら下げ）がカードの縁に張り付く。
     ここで左右パディングを与えて全ページまとめて解決する。
   ============================================================ */
.content-holder {
    width: var(--card-width);
    margin: 0.16rem auto 0;
    padding: var(--card-pad-y) var(--card-pad-x);
    border: 0.02rem solid var(--color-sub1);
    border-radius: var(--card-radius);
    overflow: hidden;
}

/* カードの左右パディングを打ち消して端まで伸ばす部品用 */
.card-bleed {
    margin-inline: calc(var(--card-pad-x) * -1);
}

/* サムネイルグリッドはカードのパディングと二重になるので自前の padding を消す
   （二重インデントで左右が詰まって見えるのを防ぐ） */
.content-holder .thumbnails-container {
    padding-inline: 0;
}

/* カード内の区切り線はパディングの内側で引く（base.css の hr は width:100%） */
.content-holder hr {
    width: 100%;
}

/* カード先頭・末尾の要素の外マージンを消して、上下の余白を --card-pad-y に揃える。
   これが無いと .message-container の 0.15rem がパディングに足され、
   カードごとに上下の余白が変わって見える（ページ間で不揃いになる原因）。 */
.content-holder > *:first-child {
    margin-top: 0;
}

/* カード末尾の要素の下マージンを消して、上下の余白を --card-pad-y に揃える。
   ボタンやリストは自前の margin-bottom を持つため、これが無いとカードの
   下だけ余白が二重になって「下が間延びしたカード」になる。
   ★ .period__img は端まで伸ばすための負マージンを持つので除外する。 */
.content-holder > *:last-child:not(.period__img) {
    margin-bottom: 0;
}

/* セクション直下に置く図版・注意書きもカードと同じ幅に揃える
   （インラインで width を書かないための共通指定） */
.sectionFigure {
    width: var(--card-width);
    margin: 0.14rem auto 0;
}

.sectionFigure img {
    width: 100%;
    display: block;
    border-radius: var(--card-radius);
}

section > ul.caution {
    width: var(--card-width);
    margin-inline: auto;
}

/* 壁紙の表示サイズ（チェックインページと壁紙ページで共通）。
   スマホ壁紙は 9:19.5 の縦長なので、幅を絞らないとカード内で極端に縦長になる。
   ★ ページごとに違う % を書くと同じ絵が別サイズで出るので必ずこのクラスを使う。 */
.wallpaperView {
    width: 52%;
    margin: 0.12rem auto;
    display: block;
}


/* ============================================================
   BUTTONS — 種類が違っても「同じ幅・同じ高さ・同じ角丸」に揃える

   LP の .mapButton（水色のピル＋右に白丸オレンジ矢印）を基準にする。
   ★ アイコン付きボタンは独自クラスを作らず .iconButton で組む規約
     （assets/docs/19_button-icons.md）。
   ★ 右アイコンは白丸地になるため、共有の /icon/right.svg（白ストローク）
     では見えない。企画配下 assets/svg/icon/right.svg に矢印だけの
     オレンジ版を置いて参照する（共有 /icon/ は書き換えない）。

   役割の使い分け:
     .iconButton              … 主導線（ボイス再生・壁紙GET・動画視聴）水色のピル
     .iconButton.accent-bg    … 特別な主導線（コンプ特典）オレンジのピル
     .loginRgisterButton      … 登録 / ログイン（オレンジのピル）
     .simpleButton            … 副導線（地図で確認・戻る）白地＋水色枠のピル
   ============================================================ */
.iconButton,
.simpleButton,
.loginRgisterButton {
    width: 100%;
    max-width: var(--btn-width);
    height: auto;
    min-height: var(--btn-height);
    /* base.css の .loginRgisterButton には max-height:0.55rem があり、
       これを解除しないと2行のボタンだけ潰れて他と高さが揃わない */
    max-height: none;
    margin: 0.14rem auto;
    border-radius: 100vmax;
    box-shadow: none;
}

/* ---- 主導線: 水色のピル（LP .mapButton）------------------------- */
.iconButton,
.iconButton.button-bg {
    padding: 0.10rem 0.06rem;
    background: var(--color-sub1);
}

/* LP のピルには内側の白枠が無い */
.iconButton::before {
    content: none;
}

.iconButton .iconButtonText {
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

/* 右アイコン = 白丸 + オレンジ矢印（LP .mapButton__icon） */
.iconButton .icon2nd {
    flex: 0 0 0.34rem;
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.04rem;
    border-radius: 50%;
    background-color: #fff;
}

.iconButton .icon2nd img {
    width: 0.14rem;
    height: 0.14rem;
}

/* ---- 特別な主導線: オレンジのピル（コンプ特典）------------------ */
.iconButton.accent-bg,
.iconButton.accent-bg.button-bg {
    background: var(--color-sub2);
}

/* ---- 登録 / ログイン: オレンジのピル ---------------------------- */
.loginRgisterButton {
    padding: 0.10rem 0.06rem;
}

.loginRgisterButton .iconButtonText {
    font-size: 0.16rem;
    font-weight: 700;
}

/* ---- 副導線: 白地 + 水色枠のピル -------------------------------- */
.simpleButton {
    padding: 0.10rem 0.14rem;
    border: 0.02rem solid var(--color-sub1);
    color: var(--color-sub1);
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--color-white);
}


/* ============================================================
   BUTTON — アイコン無しの細長ボタン（.loginRgisterButton.noIcon）
   クイズ結果画面のサブ導線（間違えた問題を確認する／もう一度挑戦する／
   結果画面に戻る）など、「報酬の受け取り」以外のボタンに使う。

   ★ アイコンを付けないときは左右とも省略する（19_button-icons.md）。
     .iconButton のまま中身を文字だけにすると、アイコン用の flex 領域
     （.icon flex:2 / .icon2nd flex:1.5）が残って文字が中央からずれる。
   ★ 地色は .button-bg（var(--color-button)）。企画で別の地色にする場合は
     この下で .loginRgisterButton を上書きする。
   ============================================================ */
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 — 形は活性とまったく同じにして色だけグレーにする
   LP の .mapButton.disabled が #6f6f6f 単色なのでそれに合わせる。
   角丸・幅・高さ・アイコン配置は活性と共通（opacity は落とさない）。
   ★ 非活性でも活性と同じアイコンを入れる（何のボタンが閉じているか
     分からなくなるのを防ぐ。assets/docs/19_button-icons.md）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg,
.iconButton[disabled].accent-bg,
.iconButton.disabled.accent-bg,
.loginRgisterButton[disabled],
.loginRgisterButton.disabled {
    background: #6f6f6f !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* 右の白丸は残す（何のボタンが閉じているか分かるようにする）。
   矢印だけ灰色に落とす。 */
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon2nd img {
    filter: grayscale(1) brightness(0.6);
}

.simpleButton[disabled],
.simpleButton.disabled {
    border-color: #6f6f6f;
    color: #6f6f6f;
    background: var(--color-white);
    pointer-events: none;
}


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


/* ============================================================
   FONT UTILITY — 装飾書体（LINE Seed JP）
   見出し・数字組みなど「LP でロゴ書体になっている箇所」に付ける。
   本文は既定の Noto Sans JP（--font-family）のまま。
   ============================================================ */
.fontDeco,
.fontDeco * {
    font-family: var(--font-family-deco) !important;
    font-style: normal;
}