@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — JR東海✕CUTIE STREET 第2弾（cutiestreet2nd）
   base.css のデフォルト値をここで上書きするだけ。base.css 自体は触らない。

   デザインは LP（https://recommend.jr-central.co.jp/oshi-tabi/cutiestreet2nd/）準拠。
   支給素材は「セクション見出し画像3枚 / KV / 背景色地 / 20px グリッドタイル /
   ボタンのデザイン見本」だけなので、それ以外（弾バッジ・壁紙の未取得枠）は
   LP のトンマナに合わせて CSS で組む。
   ※ LP にあるセクション期間バーは出さない（会期は KV に入っている）。
   ============================================================ */


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main:   #978a84;   /* ページ地色（LP のウォームグレー） */
    --color-sub1:   #d68eae;   /* ピンク（ボタン・枠） */
    --color-sub2:   #e4afc8;   /* 淡ピンク（グラデ端） */
    --color-sub3:   #978a84;   /* ウォームグレー */
    --color-sub4:   #bc0000;   /* 赤（強調・注記） */
    --color-sub5:   #978a84;
    --color-local:  #f1d511;   /* 差し色（黄） */
    --color-text:   #302d1b;   /* 本文 */
    --color-button: #d68eae;
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;

    /* LP の変数（style.css :root より）。使う分だけ持つ */
    --cs-border:    #e0dcda;   /* --border-color  区切り線・枠 */
    --cs-white:     #fffdf7;   /* --white-color   バッジの数字 */
    --cs-font-bagel: "Bagel Fat One", var(--font-family);
}


/* ============================================================
   BACKGROUND GRID — LP の bg_grid1.png（20px ピッチの白 22% グリッド）

   ★ 背景色地（bg.jpg）は info.inc.php の $backgroundCss 経由で
     base.css の main::before（z-index:-2）に載る。グリッドはその上に
     重ねたいので body::after（z-index:-1）で全ページ共通に敷く。
     こうすると <main> を持たない check/index.php にも同じ格子が乗る。
   ★ 画像は 20x20 の透過タイル。rem 換算（デザイン px ÷ 100）で 0.20rem。
   ============================================================ */
body::after {
    content: "";
    position: fixed;
    /* inset ショートハンドは古い iOS Safari で効かないので4辺を個別指定する */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../img/bg_grid.png") repeat 0 0;
    background-size: 0.20rem 0.20rem;
    pointer-events: none;
    z-index: -1;
}


/* ============================================================
   ICON BUTTON — LP のボタン（assets/docs 支給の button_design_reference.png）
     ピンク地 ＋ 同じグリッドテクスチャ ＋ 内側に白リング ＋ ピル形。
     文字・アイコンは白なので共有の /icon/*.svg（stroke/fill が白）がそのまま使える。

   ★ クラス名は .iconButton のまま（テンプレ共通の構造・JS フックを壊さない）。
     変えたのは「地の描き方」と角丸だけ。
   ============================================================ */
.iconButton {
    background: url("../img/bg_grid.png") repeat 0 0 / 0.20rem 0.20rem,
                linear-gradient(180deg, var(--color-sub2) 0%, var(--color-sub1) 100%);
    color: #fff;
    /* 角丸マックス（ピル形）。base.css の 0.18rem を上書き。
       9999px にしておけば高さが変わっても常に完全な半円になる。 */
    border-radius: 9999px;
    box-shadow: 0 0.03rem 0.06rem rgba(48, 45, 27, 0.18);
    min-height: 0.85rem;   /* 2行の文字が潰れない高さ。base.css は height:0.70rem */
    height: auto;
}

/* ダブルボーダーの内側リング。base.css の ::before（inset 0.04rem の白枠）を
   ピル形に合わせるだけ（色は白のまま）。 */
.iconButton::before {
    border-radius: 9999px;
    border-color: #fff;
}

.iconButton .iconButtonText {
    color: inherit;          /* = .iconButton の色。マークアップ側で .white-text を使わない */
    font-weight: 700;
}


/* ------------------------------------------------------------
   非活性はテンプレ既定の灰グラデのまま（活性との差が一目で分かる）。
   ★ 形は活性とまったく同じにする（角丸・高さ・内側リングを維持し、
     opacity は落とさない）。アイコンも活性と同じものを白のまま使う。
   ------------------------------------------------------------ */
.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: 1;
    box-shadow: 0 0.03rem 0.06rem rgba(48, 45, 27, 0.18);
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.85) !important;
}


/* ============================================================
   CONTENT HOLDER — LP の白ブロック（角丸・枠なし・やわらかい影）
   ============================================================ */
.content-holder {
    border: 0;
    border-radius: 0.24rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.10rem rgba(48, 45, 27, 0.12);
    padding-bottom: 0.20rem;
}

/* 区切り線は LP のトンマナに合わせて淡ピンクの細線にする */
.sub1-border {
    border: 0;
    border-top: 0.01rem solid var(--color-sub2);
}


/* ============================================================
   SECTION TITLE — 支給の見出し画像（見出しが画像に入っている）
   ★ 画像に入っている見出しを HTML で重ねない（規約）。
   ============================================================ */
.ct-title {
    width: 100%;
    max-width: 4.30rem;
    margin: 0.16rem auto 0.04rem;
}

.ct-title img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   SECTION CAUTION — 見出し画像の直下に置く注記
     LP の `<p class="txt-caution mgtM">` をそのまま移植（クラス名も LP のまま）。
     LP 実測値: border 1px solid #bc0000 / background #fff / padding 4px 10px /
     color #bc0000 / font-size 12px / weight 500 / line-height 1.4 /
     width fit-content / margin 0 auto、.mgtM = margin-top 16px。
     rem 換算は 1px = 0.01rem（base.css の --fs-base 0.14rem = LP の body 14px と一致）。
   ★ LP にある期間バー（.sec__date）は出さない（会期は KV に入っているため）。
   ============================================================ */
.txt-caution {
    border: 0.01rem solid var(--color-sub4);   /* #bc0000 */
    background: #fff;
    padding: 0.04rem 0.10rem;
    color: var(--color-sub4);
    text-align: center;
    font-size: 0.12rem;
    font-weight: 500;
    line-height: 1.4;
    width: fit-content;
    margin: 0 auto;
}

.mgtM {
    margin-top: 0.16rem;
}

/* LP は注記の下の白ブロックにも .mgtM（16px）が付いている。
   こちらの .content-holder は margin-top 0.08rem なので、この並びのときだけ揃える。 */
.txt-caution + .content-holder {
    margin-top: 0.16rem;
}


/* ============================================================
   TALK SCHEDULE — 配信中の弾（LP の .schedule__list をベースに1件だけ出す）
     LP は「枠付きカードに全4弾を並べる」一覧。トップは**現在配信中の1件だけ**を
     出すので、枠（border / padding / border-radius）は外し、番号バッジと日付だけを
     LP より大きくして中央に置く。クラス名は LP のまま（移植元をたどれるように）。

     サイズはカード内の文字階層に合わせる（CTA より目立たせない）:
       説明文 0.16rem（--fs-md） < 弾の日付 0.18rem ＝ ボタン文字（--fs-lg）
       バッジは LP と同じ「日付の約1.8倍」の箱（LP 24px : 14px → 0.32rem : 0.18rem）。
     LP 実測値: バッジ 24px 角（icon_num.svg・Bagel Fat One・#fffdf7）／
                日付 #978a84・weight 700・line-height 1.5。
   ============================================================ */
.schedule__list {
    list-style: none;
    border: 0;
    padding: 0;
    width: fit-content;
    /* 上下の間隔は隣の .message-container（0.15rem）に合わせる */
    margin: 0.15rem auto;
}

.schedule__list--item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.09rem;
}

/* 2件目以降が来ても崩れないように（通常は1件のみ） */
.schedule__list--item + .schedule__list--item {
    margin-top: 0.08rem;
}

.schedule__no {
    flex: none;
    width: 0.32rem;
    height: 0.32rem;
    font-family: var(--cs-font-bagel);
    background: url("../svg/icon_num.svg") center / contain no-repeat;
    color: var(--cs-white);
    text-align: center;
    font-size: 0.18rem;
    line-height: 0.32rem;
}

.schedule__txt {
    color: var(--color-sub3);   /* #978a84 */
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 1.4;
    /* 狭い端末で日付が折り返しても中央に揃える */
    text-align: center;
}


/* ============================================================
   WALLPAPER THUMBS — トップ／選択画面の一覧
     メンバーデザイン8種は4列 × 2行、コンプ特典を取ると9枠目が増える。
     端数の行も中央に寄せたいので grid ではなく flex + wrap にする。
   ============================================================ */
.ct-wp-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.08rem;
    width: 92%;
    max-width: 4.20rem;
    margin: 0.12rem auto;
}

.ct-wp-cell {
    width: calc((100% - 0.24rem) / 4);   /* gap 0.08rem × 3 = 0.24rem */
}

.ct-wp-cell img,
.ct-wp-cell .ct-wp-ph {
    display: block;
    width: 100%;
    /* ★ スマホ壁紙の比率は 9:19.5（実体 1290×2796 / サムネ 200×433）。
       9/16 にすると object-fit:cover が縦を約18%切り落とす。 */
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    border-radius: 0.06rem;
    border: 0.01rem solid var(--color-sub2);
    background: #fff;
    box-sizing: border-box;
}

/* 未取得枠。プレースホルダー画像の支給が無いので CSS で「？」を描く。 */
.ct-wp-cell .ct-wp-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(-45deg,
            #f2eeea 0 0.06rem, #e8e2dc 0.06rem 0.12rem);
    color: #b3a9a1;
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 1;
}

.ct-wp-name {
    margin-top: 0.03rem;
    font-size: 0.11rem;
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
    line-height: 1.3;
}

.ct-wp-cell.is-locked .ct-wp-name {
    color: #9d938c;
}

/* コンプリート特典（9枠目）は1枚だけ強調 */
.ct-wp-cell.is-complete img {
    border-color: var(--color-sub4);
    border-width: 0.02rem;
}

.ct-wp-count {
    text-align: center;
    font-size: 0.14rem;
    font-weight: 700;
    color: var(--color-sub1);
    margin: 0.04rem auto 0.10rem;
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾で .fontNotoSans が
   var(--font-family) に上書きされているのを実フォント名で固定する。
   caution 系は class 指定の有無に関わらず常に Noto Sans JP。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   CODE — 当選者ID / 識別ID
   識別ID（XXXX-XXXX-XXXX-XXXX の19文字）は base.css の .code-text
   （0.28rem）のままだと折り返して2行になる。小さくして1行に収める。
   ============================================================ */
.code-text--id {
    font-size: 0.20rem;
    letter-spacing: 0;
    white-space: nowrap;     /* base.css の word-break:break-all を打ち消す */
    word-break: normal;
}