@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — nikke2nd（NIKKE in 京都 with 推し旅 第2弾）
   LP: https://recommend.jr-central.co.jp/oshi-tabi/nikke2nd/
   base.css は触らない。上書きはすべてここで行う。
   rem は「デザイン px ÷ 100」（100px = 1rem）。
   ============================================================ */


/* ============================================================
   BRAND COLORS / FONT
   LP :root より
     --primary-color   #BA3B80  → --color-sub1
     --secondary-color #F0B951  → --color-local（金の枠・見出しバッジ）
     --grad-color01    #B43483 → #F15B92
     --text-color      #292422
   ============================================================ */
:root {
    --color-main:   #f0e0f4;   /* 市松背景のベース色（LP .bg_main） */
    --color-sub1:   #ba3b80;   /* 主色（見出し・罫線） */
    --color-sub2:   #fa7a5b;   /* 副色（グラデーション端） */
    --color-sub3:   #d90d71;   /* アクセント */
    --color-sub4:   #d3ddf9;   /* アクセント（淡青） */
    --color-sub5:   #f5e9f8;   /* 淡ピンク背景 */
    --color-local:  #f0b950;   /* 金（枠・バッジ） */
    --color-text:   #292422;
    --color-button: #d45271;
    --font-family:  'Noto Serif JP', 游明朝, 'Yu Mincho', YuMincho, serif;

    /* LP のピンクグラデーション（見出しピル・バッジで使う） */
    --grad-pink: linear-gradient(90deg, #b43483 0%, #f15b92 100%);
}


/* ============================================================
   BACKGROUND — 市松模様のタイル
   base.css の main::before は「cover / no-repeat」なので、
   longhand で repeat + タイルサイズ（LP と同じ 64px = 0.64rem）に上書きする。
   （--image-bg 自体は top.php のインライン style が入れる）
   ============================================================ */
main::before {
    background-repeat: repeat;
    background-position: center top;
    background-size: 0.64rem 0.64rem;
}


/* ============================================================
   HERO — LP #mv の再現
   KV（4:3）の下端にタイトルロゴを重ね、下 26% を市松背景に抜く。
   ============================================================ */
.p-hero {
    position: relative;
    padding-bottom: 26%;
}

.p-hero .heroKv {
    width: 100%;
    display: block;
}

.p-hero .heroTitle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-hero .heroTitle img {
    width: 100%;
    display: block;
}


/* ============================================================
   SECTION HEAD — 支給の見出し画像（cont_head01〜03）＋ 期間バッジ
   ★ 画像に見出し文字が入っているので、HTML でテキスト見出しを重ねない。
   ============================================================ */
.sec-top {
    padding: 0.24rem 0 0.20rem;
}

.sec-head {
    width: 100%;
    max-width: 4.30rem;
    margin: 0 auto;
    display: block;
}

.sec-date {
    width: 66.1%;
    margin: 0.04rem auto 0;
    display: block;
}


/* ============================================================
   CONTENT-HOLDER — LP .box01 の意匠
     外周   : bg-frame（和柄グラデーション）
     内側   : 8px インセットの金枠 + 白地
   ★ 枠は border ではなく ::before（地色＋インセット）で描く。
     border だと内側の角丸／地色との取り合いが崩れる。

   ★ 共有 CSS（/css/style_v2.css）が .content-holder に
       border-radius: 0.15rem / box-shadow: 0 0 0.03rem #ccc / margin-bottom: 0.25rem
     を当てている。base.css はこれをリセットしないので、
       ・角丸と薄いグレー影は明示的に打ち消す（この企画は角ばった意匠）
       ・margin-bottom は残す（消すと最後のセクションがフッターに密着する）
     margin を 0 auto と書くと共有 CSS の margin-bottom まで消えるので、
     必ず下マージンを明示すること。
   ============================================================ */
.content-holder {
    width: 94%;
    margin: 0 auto 0.15rem;
    background: url("../img/frame.webp") center center / cover no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.20rem;
    position: relative;
    z-index: 1;
}

.content-holder::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* inset ショートハンドは古い iOS Safari で効かないので4辺を個別指定 */
    top: 0.08rem;
    right: 0.08rem;
    bottom: 0.08rem;
    left: 0.08rem;
    border: 0.02rem solid var(--color-local);
    border-radius: 0;
    background: #fff;
}

/* LP .sec__lead — セクションのリード文 */
.sec-lead {
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.7;
    margin: 0 auto 0.16rem;
}


/* ============================================================
   INTRO — LP #intro
     text01 … グラデーション文字
     text02 … 明朝・行間広め
   ============================================================ */
.intro-lead {
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.20rem;
    font-weight: 800;
    line-height: 1.6;
    background: var(--grad-pink);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    margin: 0 auto;
}

.intro-text {
    margin: 0.16rem auto 0;
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.15rem;
    font-weight: 700;
    line-height: 2;
    color: var(--color-text);
}


/* ============================================================
   PILL HEAD — LP .item__head（ピンクのピル見出し）
   ============================================================ */
.pill-head {
    border-radius: 0.32rem;
    background: var(--grad-pink);
    padding: 0.02rem 0.24rem 0.04rem;
    color: #fff;
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.16rem;
    font-weight: 700;
    line-height: 1.5;
    width: fit-content;
    margin: 0 auto 0.10rem;
}


/* ============================================================
   PROMOTION HEAD — LP .cont__head__sub_title / .cont__head__title
   ============================================================ */
.badge-gold {
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.13rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 0.02rem;
    background: var(--color-local);
    padding: 0 0.04rem 0.02rem;
    width: fit-content;
    margin: 0 auto;
}

.promo-title {
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family);
    font-size: 0.20rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0.02rem auto 0.12rem;
}


/* ============================================================
   INFO BOX — LP .box04 の完全移植（掲出期間 / 掲出場所）
     .box04            background #FDF4F8 / padding 14px / flex column / gap 10px
     .box04__dl dt     background primary(#BA3B80) / #fff / 12px / 700 / lh 1.75
     .box04__dd .mgtSS margin-top 4px / font-weight 500 / center
   ★ フォントは LP の body 準拠で Noto Sans JP（ゴシック）。
     この企画の --font-family は Noto Serif JP なので、
     指定しないと明朝を継承してしまう。
   ============================================================ */
.info-box {
    background: #fdf4f8;
    padding: 0.14rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.10rem;
    margin: 0.16rem 0;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
}

.info-box dl {
    width: 100%;
    margin: 0;
}

.info-box dt {
    background: var(--color-sub1);
    color: #fff;
    text-align: center;
    font-size: 0.12rem;
    font-weight: 700;
    line-height: 1.75;
}

.info-box dd {
    margin: 0.04rem 0 0;
    font-size: 0.14rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-text);
}


/* ============================================================
   ROW OF THUMBNAILS — ブロマイド一覧（LP .cast__list 相当・4列）
   ============================================================ */
.bromide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.08rem 0.05rem;
    margin: 0.10rem 0 0;
}

/* ★ メインビジュアル（bromide_09）だけ横長で縦が短い。
   cell を flex 縦組みにして画像へ上下 auto マージンを与えると、
   余った高さを上下で均等に吸うので
     ・画像 … セル内で縦センタリング
     ・名前 … 行の下端に揃う（他セルの名前と同じ高さ）
   になる。マークアップは全セル共通のまま（choose.php の選択グリッドにも効く）。 */
.bromide-grid .cell {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.bromide-grid .cell img {
    width: 100%;
    display: block;
    border: 0.01rem solid #e6dfe8;
    margin-top: auto;
    margin-bottom: auto;
}

.bromide-grid .cell .name {
    font-family: var(--font-family);
    font-size: 0.11rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.03rem 0 0;
    margin-top: 0;          /* 画像側の auto マージンだけで下端に寄せる */
    color: var(--color-text);
    word-break: break-all;
}


/* ============================================================
   BUTTONS — .iconButton の地は支給の和柄（button_bg）
   ★ 非活性は下の DISABLED ブロックが !important で上書きする。
   ============================================================ */
.iconButton,
.iconButton.button-bg {
    background: url("../img/button_bg.webp") center center / cover no-repeat;
}

.iconButton .iconButtonText {
    font-family: var(--font-family);
    font-weight: 700;
    text-shadow: 0 0.01rem 0.02rem rgba(90, 20, 55, 0.35);
}

/* 内側の白枠を LP のボタン意匠（金の細枠）に寄せる */
.iconButton::before {
    border-color: rgba(255, 240, 200, 0.85);
}

.simpleButton,
.toOshitabiTop {
    font-family: var(--font-family);
}


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   形（角丸・高さ・影・::before）は活性とまったく同じで、色だけグレー。
   ============================================================ */
.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: 0.7;
}

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


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾の .fontNotoSans が
   var(--font-family) で上書きされているためここで実フォントを強制する。
   注意書き（ul.caution）は常に 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;
}