@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — "推したい夢"(オシタイム) 超ときめき♡宣伝部のめっちゃわかりみ～!!【第4弾】
   base.css のデフォルト値をここで上書きするだけ。base.css 自体は触らない。

   デザインの正本は LP:
     https://recommend.jr-central.co.jp/oshi-tabi/tokisen-4th/
   ボタンの見た目は支給の button_reference.png（黄色地・ピンク文字・ピンク破線枠）。

   ★ 数値は「デザインpx ÷ 100 = rem」（base.css の --design-width-sp: 430）。
     通常の rem と混同しないこと。
   ============================================================ */


/* ============================================================
   BRAND COLORS
   LP の :root と対応:
     --primary-color #EF658A / --main-color #FC8BA9 / --sub-color #67C9F2
     --yellow-color #F8ED60 / --purple-color #BE7DF9
   ============================================================ */
:root {
    --color-main:   #ffdde6;   /* ページ背景色（薄ピンク） */
    --color-sub1:   #ef658a;   /* メインカラー（ピンク：文字・枠・見出し） */
    --color-sub2:   #54c5ed;   /* サブカラー（水色：リンク・装飾） */
    --color-sub3:   #f8ed60;   /* アクセント（黄色） */
    --color-sub4:   #be7df9;   /* アクセント（紫） */
    --color-sub5:   #fc8ba9;   /* 薄ピンク（帯・背景） */
    --color-local:  #f1d511;   /* 差し色 */
    --color-text:   #1a1a2e;   /* テキストカラー */
    --color-button: #f8ed60;   /* ボタンカラー（黄色） */
    --font-family:  'M PLUS Rounded 1c', YakuHanJP, sans-serif;
}


/* ============================================================
   BUTTONS — 黄色地 × ピンク文字 × ピンク破線枠（button_reference.png 再現）

   ★ base.css の .iconButton は「濃い地 ＋ 白文字/白アイコン」前提なので、
     文字色・内側枠の色をここで反転させる。アイコンは着色できない外部 SVG
     なので、共有 /icon/*.svg をピンクに差し替えたものを
     assets/svg/icon/ に置いて参照する（ボタンアイコン規約）。
     例外: /icon/N700S.png は元から紺＋黄の着色済みイラストなので黄色地でも読める。
   ============================================================ */
.iconButton,
.iconButton.button-bg {
    background: var(--color-button);
    color: var(--color-sub1);
    border-radius: 0.14rem;
}

/* 内側の枠は LP のボタンと同じピンクの破線 */
.iconButton::before {
    inset: 0.05rem;
    border: 0.02rem dashed var(--color-sub1);
    border-radius: 0.10rem;
}

/* .white-text を付けたままの箇所でもピンクで読めるようにする
   （テンプレ由来のマークアップを壊さないための保険） */
.iconButton .iconButtonText,
.iconButton .iconButtonText.white-text {
    color: var(--color-sub1);
    font-weight: 800;
}

/* 登録 / ログインボタンも同じトンマナに揃える */
.loginRgisterButton,
.loginRgisterButton.button-bg {
    background: var(--color-button);
    color: var(--color-sub1);
    border: 0.02rem dashed var(--color-sub1);
}

.loginRgisterButton .iconButtonText,
.loginRgisterButton.white-text,
.loginRgisterButton .iconButtonText.white-text {
    color: var(--color-sub1);
    font-weight: 800;
}

/* キャンペーンサイト一覧ボタンはピンク地＋白文字（黄色ボタンとの区別） */
.toOshitabiTop {
    background: var(--color-sub1);
    color: #fff;
    border: 0;
}

/* 「トップページに戻る」等のシンプルボタン */
.simpleButton {
    background: var(--color-sub1);
    color: #fff;
}


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   ★ この企画のボタンは黄色地なので、非活性は「薄灰の地」にする。
     地が明るいと白アイコンは溶けるが、ここで使うアイコンはピンクなので
     grayscale(1) を掛けて濃い灰色に落とす（下のブロック）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #e3e3e6 !important;
    color: #808089 !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1;
}

.iconButton[disabled] .iconButtonText,
.iconButton.disabled .iconButtonText,
.iconButton:disabled .iconButtonText,
.iconButton[disabled] .iconButtonText.white-text,
.iconButton.disabled .iconButtonText.white-text,
.iconButton:disabled .iconButtonText.white-text {
    color: #808089 !important;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: #c9c9cf !important;
}

/* 非活性アイコンを濃い灰色に。<img> の外部 SVG は fill / color では色が変わらないため
   grayscale(1) で輝度どおりの灰色に落とす（ピンク #ef658a → 中間の灰）。 */
.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) brightness(0.75);
}


/* ============================================================
   CONTENT HOLDER / 帯
   ============================================================ */
.content-holder {
    border: 0.03rem solid var(--color-sub1);
    border-radius: 0.16rem;
    box-shadow: 0 0.03rem 0 rgba(239, 101, 138, 0.25);
}

.sub1-border {
    border: 0;
    border-top: 0.02rem dashed var(--color-sub1);
    margin: 0.12rem 0.14rem;
}

/* 【No.1】等の弾リボン。base.css は --color-button（黄色）地＋白文字で
   読めなくなるため、ピンク地＋白文字に反転する。 */
.contents-title .titleBorder {
    background-color: var(--color-sub1);
    color: #fff;
    border-radius: 0.20rem;
    font-weight: 800;
}


/* ============================================================
   LINK — LP の .txt-link（水色＋下線）
   ============================================================ */
.pdfLink,
.linkText {
    color: var(--color-sub2);
    text-decoration: underline;
    text-underline-offset: 0.02rem;
    font-weight: 700;
}


/* ============================================================
   MV DATE — KV 直下の開催期間ロゴ（LP の mv-date.png）
   KV のピンクから続くように、帯はベタ塗り #ef658a。
   ロゴ自体が濃いピンク＋白フチなので、地はメインピンクで置く。
   ============================================================ */
.mvDateBand {
    width: 100%;
    background: var(--color-sub1);
    padding: 0.10rem 0.14rem 0.14rem;
    box-sizing: border-box;
}

.mvDateBand .mvDate {
    width: 100%;
    margin: 0 auto;
}


/* ============================================================
   SECTION HEAD — 画像見出し（heading_talk.webp / ttl_hoso.webp）
   画像に文字が入っているので HTML 側でテキストを重ねない。
   ============================================================ */
.imageHeading {
    width: 100%;
    padding: 0.06rem 0 0.02rem;
    text-align: center;
}

.imageHeading img {
    margin: 0 auto;
}

.imageHeading .headingMain {
    width: 76%;
}

.imageHeading .headingSub {
    width: 66%;
    margin-top: 0.06rem;
}


/* ============================================================
   PRESENT HEAD — 「さらに」「さらにさらに」の吹き出し＋見出し
   （LP .present__head。wp-more01 / wp-more02）
   ============================================================ */
/* 吹き出し画像＋見出しを横並びにする。
   見出しは LP の SP 表示と同じく短い4行に割っている（top.php の <br>）。
   最長行「オリジナルスマホ壁紙を」= 11文字 × 0.17rem ≒ 1.87rem で、
   使える横幅（4.30 - 画像0.72 - gap0.10 - 左右padding0.28 ≒ 3.20rem）に余裕がある。
   1行を長くすると端末幅・フォント読込の差で1行目だけ折り返して崩れるので、
   長い1行にはしない。 */
.presentHead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.10rem;
    padding: 0.16rem 0.14rem 0.06rem;
}

.presentHead .presentHead__img {
    width: 0.72rem;
    flex: 0 0 auto;
}

.presentHead .presentHead__text {
    font-family: var(--font-family);
    color: var(--color-sub1);
    font-weight: 800;
    font-size: 0.17rem;
    line-height: 1.45;
    text-align: left;
    flex: 0 1 auto;
    min-width: 0;
}


/* ============================================================
   WALLPAPER GRID — No.1〜No.13（5列 = 5 / 5 / 3）
   未獲得は wp_locked.webp（「?」）。獲得済みだけタップで DL ページへ。
   ============================================================ */
.wpGrid {
    padding: 0.10rem 0.12rem 0.04rem;
    gap: 0.06rem;
}

.wpGrid .thumbnail img {
    border-radius: 0.05rem;
    border: 0.01rem solid var(--color-sub1);
    background: #fff;
}

/* 獲得済みは押せることを分かるように少し浮かせる */
.wpGrid .thumbnail.wallpaperExist img {
    box-shadow: 0 0.02rem 0.04rem rgba(239, 101, 138, 0.35);
}

.wpGrid .thumbnail.locked img {
    opacity: 0.85;
}

.wpGrid .wpNo {
    font-family: var(--font-family);
    font-size: 0.11rem;
    font-weight: 800;
    color: var(--color-sub1);
    text-align: center;
    margin-top: 0.03rem;
    line-height: 1.2;
}


/* ============================================================
   PRIZE — A賞 / B賞のカード（LP .present__list）
   ============================================================ */
.prizeCard {
    width: 94%;
    margin: 0.12rem auto;
    padding: 0.12rem 0.10rem;
    border: 0.02rem solid var(--color-sub1);
    border-radius: 0.12rem;
    background: #ffedf5;
}

.prizeCard__award {
    font-family: var(--font-family);
    font-size: 0.20rem;
    font-weight: 800;
    color: #fff;
    background: var(--color-sub1);
    border-radius: 0.20rem;
    padding: 0.04rem 0.12rem;
    display: inline-block;
    margin-bottom: 0.06rem;
}

.prizeCard__name {
    font-family: var(--font-family);
    font-size: 0.15rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    text-align: center;
}

/* A賞は「チェキ ＋ キーホルダー」の2点並び。
   チェキ 294x336（縦長）／キーホルダー 634x510（横長）でアスペクトが違うため、
   等分にすると高さが揃わずキーホルダーだけ小さく見える。
   幅をアスペクト比に合わせて配分して、見た目の高さを揃える:
     40% x (336/294) ≒ 45.7%   /   56% x (510/634) ≒ 45.1% */
.prizeCard__images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    margin: 0.08rem auto 0;
}

.prizeCard__images .prizeCard__img {
    min-width: 0;
}

.prizeCard__images .prizeCard__img:nth-child(1) {
    flex: 0 0 40%;
}

.prizeCard__images .prizeCard__img:nth-child(2) {
    flex: 0 0 56%;
}

.prizeCard__single {
    width: 88%;
    margin: 0.08rem auto 0;
}

.prizeCard__period {
    font-family: var(--font-family);
    font-size: 0.16rem;
    font-weight: 800;
    color: var(--color-sub1);
    text-align: center;
    margin: 0.10rem auto 0.02rem;
}


/* ============================================================
   識別ID は桁が多いので小さくする（.code-text の既定 0.28rem では溢れる）
   ============================================================ */
.code-text.code-text--id {
    font-size: 0.20rem;
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   base.css 末尾で .fontNotoSans が var(--font-family) に上書きされており
   Noto Sans JP に切り替わらない。custom.css は base.css の後に読まれるので
   ここで実フォント名を強制する。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}

/* 注記内リンクも LP と同じ水色にする（base.css は青固定） */
ul.caution li a {
    color: var(--color-sub2);
}