@charset "UTF-8";

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


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main:   #d3e4f6;   /* ページ地色（LP の水色） */
    --color-sub1:   #c99cf3;   /* 紫 */
    --color-sub2:   #ff6daf;   /* ピンク */
    --color-sub3:   #3b6ddd;   /* 青（見出し・ボタン文字/アイコンの色） */
    --color-sub4:   #c99cf3;   /* 紫（罫線） */
    --color-sub5:   #c99cf3;
    --color-local:  #ff2b8a;   /* 差し色（濃ピンク） */
    --color-text:   #2d3137;   /* 本文 */
    --color-button: #c99cf3;
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;

}


/* ============================================================
   ICON BUTTON — 背景を画像にする（bg_btn.webp）

   ★ クラス名は .iconButton のまま（テンプレ共通の構造・JS フックを壊さない）。
     変えたのは「地の描き方」と「その上に載る文字・アイコンの色」だけ。

   base.css の既定は
       background: linear-gradient(135deg, var(--color-sub1), var(--color-sub2));
       color: white;
   で、白文字・白アイコン前提。今回の地は白〜淡色の箔テクスチャなので、
   そのままだと文字もアイコンも消える。→ 文字/アイコンを企画色（--color-sub3）に落とす。

   アイコンは共有 /icon/*.svg（stroke/fill が白）ではなく、
   assets/svg/icon/ に複製して企画色に差し替えたものを使う（規約 19_button-icons.md）。
   共有 /icon/ は全企画に波及するので書き換えない。
   ============================================================ */
.iconButton {
    /* 画像が読めない環境でも文字が読めるよう、下地に淡色を敷いておく */
    background: url("../img/bg_btn.webp") center / cover no-repeat, #e8eef9;
    color: var(--color-text);          /* #2d3137 */
    /* 角丸マックス（ピル形）。base.css の 0.18rem を上書き。
       9999px にしておけば高さが変わっても常に完全な半円になる。 */
    border-radius: 9999px;
    /* 外側の枠（ダブルボーダーの外側）。base.css は border:0 なのでここで足す。
       box-sizing:border-box なので高さは変わらない。 */
    border: 0.02rem solid var(--color-text);
    box-shadow: none;
    min-height: 0.85rem;   /* 高さを固定して文字が潰れないようにする。base.css は min-height:0.48rem */
}

/* ダブルボーダーの内側。base.css の ::before（inset 0.04rem の白枠）を黒に。 */
.iconButton::before {
    border-color: var(--color-text);
    border-radius: 9999px;
}

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

/* アイコンも黒。
   ・assets/svg/icon/*.svg … stroke/fill を #2d3137 に差し替え済み（そのまま）
   ・共有の白PNG（/icon/register.png 等）… CSS では色を変えられないので
     brightness(0) で黒に落とす。白 PNG が対象なので結果は #000 相当になる。 */
.iconButton .icon img[src$=".png"],
.iconButton .icon2nd img[src$=".png"] {
    filter: brightness(0);
}

/* ------------------------------------------------------------
   非活性は従来どおり灰グラデ（活性との差を一目で分かるようにする）。
   アイコンは活性と同じファイルを使い、白に反転させる
   （規約: 非活性でも活性と同じアイコンを入れる）。
   ------------------------------------------------------------ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled {
    background: linear-gradient(to right, gray, darkgray);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

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

.iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    /* 黒（#2d3137）の SVG / 白 PNG のどちらも、brightness(0) で真っ黒にしてから
       invert(1) で真っ白にする。活性時の .png 向け filter もこれで上書きされる。 */
    filter: brightness(0) invert(1);
}


/* ============================================================
   CONTENT HOLDER — LP の .cont__block に合わせる
   （border: 1px solid #2d3137 / border-radius 20px / 白地 / 影なし）
   ============================================================ */
.content-holder {
    box-shadow: unset;
    border: 0.01rem solid var(--color-text);
    border-radius: 0.20rem;
    background: #fff;
}


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

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


/* ============================================================
   SECTION DATE — LP の .wrap__date（期間バー ＋ 注記）
   セクションタイトル画像の直下に置く。素材・寸法とも LP 準拠。
   ============================================================ */
.ct-date {
    display: flex;
    flex-direction: column;
    gap: 0.10rem;
    width: 100%;
    max-width: 4.40rem;
    margin: 0.04rem auto 0.14rem;
}

.ct-date__bar {
    display: flex;
    justify-content: center;
    align-items: baseline;
    border-top: 0.01rem solid var(--color-text);
    border-bottom: 0.01rem solid var(--color-text);
    background: url("../img/bg_date.webp") center / contain;
    color: var(--color-text);
    font-size: 0.16rem;
    padding: 0.06rem 0.04rem;
    font-family: "Dela Gothic One", var(--font-family);
    line-height: 1.2;
    font-weight: 700;
}

.ct-date__bar span {
    font-size: 0.22rem;
    margin: 0 0.02rem;
}

.ct-date__note {
    font-size: 0.11rem;
    color: var(--color-local);   /* LP の --accent-color #ff2b8b */
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}


/* ============================================================
   TALK BADGE — 配信中の回（LP の .schedule__list の意匠を1件ぶんだけ使う）
   バッジ画像は LP の bg_special0N.png。
   ============================================================ */
.ct-talk-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    margin: 0.14rem auto 0.06rem;
}

.ct-talk-now__badge {
    flex: none;
    width: 0.36rem;
    height: 0.36rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    /* LP のバッジ画像（bg_special0N.png）は淡い水色のバブルで数字が焼かれていない。
       LP 側も dt に色指定が無く本文色を継承しているので、白ではなく本文色にする。 */
    color: var(--color-text);
    font-size: 0.17rem;
    font-weight: 700;
    font-family: "Dela Gothic One", var(--font-family);
    line-height: 1;
}

.ct-talk-now__date {
    font-size: 0.13rem;
    font-weight: 700;
    color: var(--color-text);
    font-family: "Dela Gothic One", var(--font-family);
    line-height: 1.3;
}

.ct-talk-now__date span {
    font-size: 0.20rem;
    margin: 0 0.02rem;
}


/* ============================================================
   TALK SCHEDULE — LP の .schedule__list 相当（弾の一覧）
   番号バッジ ＋ 期間。現在配信中の弾を強調する。
   ============================================================ */
.ct-schedule {
    list-style: none;
    margin: 0.10rem auto 0.16rem;
    padding: 0;
    width: 92%;
    max-width: 4.20rem;
}

.ct-schedule li {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.09rem 0.10rem;
    border-bottom: 0.01rem dotted var(--color-sub4);
}

.ct-schedule li:last-child {
    border-bottom: 0;
}

.ct-schedule__no {
    flex: none;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: var(--color-sub3);
    color: #fff;
    font-size: 0.17rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-schedule__date {
    font-size: 0.15rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
}

/* 配信中の弾 */
.ct-schedule li.is-now .ct-schedule__no {
    background: var(--color-local);
}

.ct-schedule li.is-now .ct-schedule__date {
    color: var(--color-local);
}

.ct-schedule__now {
    display: inline-block;
    margin-left: 0.06rem;
    padding: 0.01rem 0.07rem;
    border-radius: 0.08rem;
    background: var(--color-local);
    color: #fff;
    font-size: 0.11rem;
    font-weight: 700;
    vertical-align: 0.02rem;
}


/* ============================================================
   WALLPAPER THUMBS — トップの取得状況一覧
   ★ 7種のあいだは 4+3、コンプリート特典を取ると 8種で 4+4 になる。
     grid-template-columns を4列固定にして、7枚のときは自然に 4+3 で折り返す。
   ============================================================ */
/* ★ 4枚 + 3枚（コンプ後は 4+4）。端数の行も中央に寄せたいので
   grid ではなく flex + wrap にする（grid だと 3枚の行が左寄せになる）。
   1セルの幅は「4列ぶんの gap を引いて4等分」で固定する。 */
.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 {
    display: block;
    width: 100%;
    /* ★ スマホ壁紙の比率は 9:19.5（実体 1290×2796 / サムネ 200×433）。
       9/16 にすると object-fit:cover が縦を約18%切り落とす。
       画像側の比率と一致させること（テンプレ既定の .thumbnail img は
       height:auto で比率に追従するので、そもそも指定しないのも可）。 */
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    border-radius: 0.06rem;
    border: 0.01rem solid var(--color-sub4);
    background: #fff;
}

/* 未取得は専用プレースホルダー（assets/img/wallpaper_locked.webp）を出すので
   フィルターはかけない（かけると「？」まで薄くなって読めない）。 */

.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;
    word-break: break-all;
}

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

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

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


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


/* ============================================================
   注記色 — LP の --accent-color（#ff2b8b）
   「参加方法や注意事項を必ずご確認のうえご参加ください。」等。
   ============================================================ */
.ct-note-accent {
    color: var(--color-local);
}


/* ============================================================
   PDF LINK — 「キャンペーン概要および応募要項」等
   base.css / anchor.css に .pdfLink の定義が無く、素の <a> のまま
   出ていたので、LP のリンク色（--text-link #2689fd）＋下線で明示する。
   ============================================================ */
.pdfLink {
    color: #2689fd;
    text-decoration: underline;
    text-underline-offset: 0.03rem;
    font-weight: 700;
}

.pdfLink:visited {
    color: #2689fd;
}


/* ============================================================
   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;
}
/* ※ 既定の padding のままでも 19文字が1行に収まることを実測で確認済み。
     :has() 等の新しめのセレクタには依存させない（古い iOS Safari 対策）。 */