@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — ≒JOY(ニアジョイ) × JR東海
   base.css の構造は変更せず、ここで色・フォント・企画部品を上書きする。

   REM: 100px = 1rem（デザイン px ÷ 100 = rem）

   デザイン参照: LP https://recommend.jr-central.co.jp/oshi-tabi/nearly-equal-joy/
     ・背景         = クリーム地＋斜め点線のダイヤ格子＋黄色ハート（LP pc_bg より切り出し）
     ・カード       = .section__inner    → 白地 + ゴールド1px枠 + 4px のゴールド影
     ・見出し       = .section__title    → ゴールド・下線・上に小さなリード行
     ・番号バッジ   = .item-number       → 王冠 #1〜#5（カード上端に重ねる）
     ・帯（期間）   = .section--promotion__text → ゴールド地 × 白文字
     ・場所ラベル   = .section__figure__st      → 墨色地 × 白文字
     ・手順ブロック = .section__block    → グレー地 + グレー見出し帯 + ❶❷❸
     ・引換場所     = .section__cafe     → 猫アイコン見出し + 罫線区切りリスト
     ・注意書き     = .section__notice   → 13px / #444242
   構造は not-equal-me（姉妹企画）に寄せ、見出しはカード内に入れる。
   ============================================================ */


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main: #fcec8c;
    /* ベース黄（背景タイルの下地） */
    --color-sub1: #d9a31f;
    /* ゴールド（枠・見出し・ボタン） */
    --color-sub2: #a94c01;
    /* ブラウン（強調・グラデ端） */
    --color-sub3: #d9a31f;
    --color-sub4: #a94c01;
    --color-sub5: #fffef8;
    /* クリーム（パネル地） */
    --color-local: #f1d511;
    --color-text: #a84d01;
    --color-button: #d9a31f;
    --font-family: 'Noto Sans JP', YakuHanJP, sans-serif;

    /* ≒JOY 追加トークン */
    --njoy-gold: #d9a31f;
    --njoy-gold-dark: #b8860b;
    --njoy-heading: #d8a320;
    /* LP h2 / .section__inner の枠色 */
    --njoy-brown: #a84d01;
    --njoy-cream: #fffef8;
    --njoy-ink: #3b3b3b;
    /* LP .section__figure__st */
    --njoy-gray: #f0efef;
    /* LP .section__block */
    --njoy-gray-band: #818181;
    --njoy-note: #444242;
    --font-title: 'Barlow Condensed', 'Noto Sans JP', sans-serif;
    --font-heading: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    /* LP .section__title と同じ丸ゴシック */
}


/* ============================================================
   BACKGROUND — LP のタイル柄を全画面に敷く
   ★ base.css の main::before（position:fixed / inset:0 / z-index:-2）が
     全画面を塗る設計。ここを上書きしないと body に敷いても隠れる。
     タイルは 425px = LP の 1セル 142px × 3。SP 幅での見え方を LP に
     合わせて 0.84rem（=84px / 1セル 28px）で敷く。
   ============================================================ */
main::before {
    background: var(--color-main) url(../img/bg_body.webp) top center repeat !important;
    background-size: 0.84rem 0.84rem !important;
}


/* ============================================================
   FONT UTILITY
   base.css 末尾で .fontNotoSans が var(--font-family) に上書きされる不具合を修正。
   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;
}

/* タイトル・日付の英数字（Barlow Condensed） */
.fontTitle,
.date-band__num {
    font-family: var(--font-title) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ボタン文字はイベントフォントで統一（base.css は font-family 未指定） */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.simpleButton {
    font-family: var(--font-family) !important;
}


/* ============================================================
   CARD — LP .section__inner
     白地 + ゴールド1px枠 + 4px のゴールド影。角丸なし。
     見出し（.section-heading）と本文をこの中に入れる（not-equal-me 構造）。
   ============================================================ */
.content-holder {
    position: relative;
    width: 96%;
    max-width: 4.10rem;
    margin: 0.20rem auto 0.40rem;
    padding: 0.06rem 0.18rem 0.26rem;
    background: #fff;
    background-color: #fff;
    border: 0.01rem solid var(--njoy-heading);
    border-radius: 0;
    box-shadow: 0.04rem 0.04rem 0 0 var(--njoy-heading);
}

/* 王冠バッジ（.item-number）が上端に重なるカードだけ、その分の余白を足す。
   INTRO などバッジの無いカードは上余白を詰める。 */
.p-video .content-holder,
.p-wallpaper .content-holder,
.p-certificate .content-holder,
.p-prize .content-holder,
.p-promotion .content-holder,
.p-video-list .content-holder,
.p-wallpaper-choose .content-holder {
    margin-top: 0.52rem;
}

/* 番号バッジ（王冠 #1〜#5）— カード上端に重ねる（LP .item-number） */
.item-number {
    position: absolute;
    top: -0.30rem;
    left: 0;
    right: 0;
    width: 0.64rem;
    margin: 0 auto;
    z-index: 2;
}

.item-number img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   SECTION HEADING — LP .section__title（カード内・下線付き）
   ============================================================ */
.section-heading {
    width: 100%;
    margin: 0.14rem auto 0.20rem;
    padding: 0.14rem 0 0.18rem;
    background: none;
    border-bottom: 0.01rem solid var(--njoy-heading);
    text-align: center;
    position: relative;
}

.section-heading::after {
    content: none;
}

/* リード行（例: 東海道新幹線車内限定 / 東海道新幹線の駅に掲出） */
.section-heading-lead {
    display: block;
    color: var(--njoy-heading);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 0.02rem;
    text-shadow: none;
}

/* 大見出し（スマホ壁紙 / ポストカード など） */
.section-heading-text {
    display: block;
    color: var(--njoy-heading);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.28rem;
    line-height: 1.2;
    letter-spacing: 0.024rem;
    text-shadow: none;
}

/* 英語見出し（Special Contents / Special Promotion）は Barlow Condensed */
.section-heading-text.en {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 0.42rem;
    letter-spacing: 0.02em;
}

/* 見出しの小注記（全12種 など） */
.section-heading-sub {
    display: block;
    color: var(--njoy-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.16rem;
    margin-top: 0.02rem;
}

/* 見出し脇のキラキラ */
.section-heading .kirakira {
    position: absolute;
    width: 0.20rem;
    height: auto;
    top: 0.20rem;
    opacity: 0.95;
    pointer-events: none;
}

.section-heading .kirakira.left {
    left: 0.06rem;
    transform: scaleX(-1);
}

.section-heading .kirakira.right {
    right: 0.06rem;
}


/* ============================================================
   注意書き — LP .section__notice（13px / #444242）
   ============================================================ */
.content-holder ul.caution li {
    font-size: 0.13rem;
    line-height: 1.7;
    color: var(--njoy-note);
}


/* ============================================================
   開催期間バンド（Barlow Condensed の日付表記）
   ============================================================ */
.date-band {
    text-align: center;
    color: var(--njoy-brown);
    margin: 0.10rem auto 0.16rem;
    line-height: 1.2;
}

.date-band__label {
    display: block;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.14rem;
    margin-bottom: 0.02rem;
}

.date-band__num {
    display: block;
    font-size: 0.30rem;
    color: var(--njoy-gold-dark);
}


/* ============================================================
   期間ラベル — LP の section__schedule 画像をテキストで再現
     金地のタグ（第1弾 / 掲出期間 など）＋ その下に日付。
     数字 = Barlow Condensed / 年月日・曜日 = Noto Sans JP を一段小さく。
   ============================================================ */
.phase-label {
    text-align: center;
    margin: 0.18rem auto 0.20rem;
}

.phase-label__tag {
    display: inline-block;
    background: var(--njoy-heading);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    padding: 0.03rem 0.34rem;
}

.phase-label__date {
    display: block;
    margin-top: 0.12rem;
    color: #3b3b3b;
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 0.24rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* 年月日・曜日は一段小さく（画像の組み方に合わせる） */
.phase-label__date i {
    font-style: normal;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 0.16rem;
}

/* 「2026年」は全体を小さめに */
.phase-label__y {
    font-size: 0.18rem;
    margin-right: 0.06rem;
}


/* 期間見出し画像（テキスト再現に切替済み。画像を使う場合のフォールバック） */
.phase-date {
    display: block;
    width: 100%;
    max-width: 3.60rem;
    height: auto;
    margin: 0.10rem auto 0.16rem;
}


/* ============================================================
   帯 — LP .section--promotion__text（掲出期間などのゴールド帯）
   ============================================================ */
.gold-band {
    width: 100%;
    margin: 0.10rem auto;
    padding: 0.05rem 0.06rem;
    background: var(--njoy-heading);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 1.4;
    letter-spacing: 0.016rem;
    text-align: center;
}

.gold-band span {
    display: block;
    font-size: 0.13rem;
    font-weight: 600;
}

/* 場所ラベル — LP .section__figure__st（墨色帯） */
.figure-label {
    width: 100%;
    background: var(--njoy-ink);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.14rem;
    line-height: 1.6;
    text-align: center;
    padding: 0.03rem 0.04rem;
}

/* 図版（写真）— LP .section__figure */
.sec-figure {
    width: 100%;
    margin: 0.20rem auto;
}

.sec-figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.10rem auto 0;
}


/* ============================================================
   手順ブロック — LP .section__block（グレー地 + 帯見出し + ❶❷❸）
   ============================================================ */
.step-block {
    width: 100%;
    margin: 0.22rem auto 0.24rem;
    padding-bottom: 0.16rem;
    background: var(--njoy-gray);
}

.step-block__head {
    background: var(--njoy-gray-band);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.16rem;
    text-align: center;
    padding: 0.05rem;
    margin-bottom: 0.14rem;
}

.step-block__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.08rem;
    width: 92%;
    margin: 0 auto;
}

.step-list {
    width: 68%;
    text-align: left;
    padding: 0;
    margin: 0;
}

.step-list li {
    list-style: none;
    margin-bottom: 0.10rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.13rem;
    line-height: 1.75;
    letter-spacing: 0.013rem;
    color: #3b3b3b;
}

.step-list li strong {
    color: var(--njoy-brown);
    font-size: 0.16rem;
    margin-right: 0.02rem;
}

.step-block__img {
    width: 28%;
}

.step-block__img img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   PROMOTION 見出し — LP .section--promotion__heading（ピンアイコン付き）
   ============================================================ */
.promo-heading {
    position: relative;
    color: var(--njoy-heading);
    font-family: var(--font-family);
    /* LP .section--promotion__heading と同じ Noto Sans JP */
    font-weight: 700;
    font-size: 0.20rem;
    line-height: 1.4;
    letter-spacing: 0.02rem;
    /* 文字は左寄せのまま、ブロック自体を中央に置く
       （width:fit-content + margin:auto。iOS Safari 用に -webkit- も併記） */
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    text-align: left;
    padding-left: 0.40rem;
    margin: 0.16rem auto 0.14rem;
}

.promo-heading span {
    display: block;
    font-size: 0.15rem;
    font-weight: 600;
    line-height: 1.5;
}

.promo-heading::before {
    content: "";
    position: absolute;
    left: 0.02rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.30rem;
    height: 0.30rem;
    background: url(../img/adress.webp) center / contain no-repeat;
}


/* ============================================================
   動画（Special Contents / video-list）
   ============================================================ */
.video-item {
    margin: 0.18rem 0 0.24rem;
}

.video-item__thumb {
    width: 100%;
    height: auto;
    display: block;
    border: 0.01rem solid var(--njoy-gold);
}

.video-item__title {
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.15rem;
    line-height: 1.4;
    text-align: center;
    margin: 0.08rem 0;
}


/* ============================================================
   壁紙グリッド（全12種・横4列）
   ============================================================ */
.wp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.10rem;
    margin: 0.16rem 0 0.12rem;
}

.wp-grid .wp-cell {
    text-align: center;
}

.wp-grid .wp-cell img {
    width: 100%;
    height: auto;
    display: block;
    border: 0.01rem solid rgba(216, 163, 32, 0.55);
}

.wp-grid .wp-cell .wp-name {
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.10rem;
    line-height: 1.3;
    margin-top: 0.03rem;
}


/* ============================================================
   ノベルティ画像（ポストカード / 賞品）
   ============================================================ */
.novelty-image {
    width: 100%;
    margin: 0.10rem 0 0.04rem;
}

.novelty-image img {
    width: 100%;
    height: auto;
    display: block;
}

.image-note {
    text-align: center;
    color: var(--njoy-note);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.12rem;
    margin: 0.04rem 0 0.14rem;
}


/* ============================================================
   乗車証明スロット（type_b・最大3枚）
   ============================================================ */
.cert-lead {
    text-align: center;
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.15rem;
    line-height: 1.6;
    margin: 0.16rem 0 0.10rem;
}

.cert-slots {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    margin: 0.10rem 0 0.16rem;
}

.cert-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0.46rem;
    padding: 0.08rem 0.10rem;
    border: 0.02rem dashed rgba(216, 163, 32, 0.8);
    background: #fffdf5;
    color: #9a9a9a;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.14rem;
    text-align: center;
}

/* 取得済みスロット（押せる） */
.cert-slot.has-cert {
    border-style: solid;
    border-color: var(--njoy-gold);
    background: linear-gradient(180deg, #fffdf2 0%, #fdf3cd 100%);
    color: var(--njoy-brown);
    cursor: pointer;
}

.cert-slot__date {
    display: block;
    font-size: 0.11rem;
    font-weight: 500;
    margin-top: 0.02rem;
}

/* 使用済みスロット */
.cert-slot.used {
    border-style: solid;
    border-color: #cfcfcf;
    background: #f4f4f4;
    color: #9a9a9a;
}


/* ============================================================
   特典引換場所 — LP .section__cafe（猫アイコン見出し＋罫線リスト）
   ============================================================ */
/* 引換ページ（certificate/single.php）に置く場合の外枠。
   トップの .content-holder と同じ幅・左右余白に揃える（端から端 防止）。 */
.cert-exchange {
    width: 92%;
    max-width: 4.10rem;
    margin: 0.24rem auto 0.10rem;
    box-sizing: border-box;
    /* トップの .content-holder と同じ枠（白地＋ゴールド1px＋4pxのゴールド影） */
    padding: 0.06rem 0.18rem 0.22rem;
    background: #fff;
    border: 0.01rem solid var(--njoy-heading);
    box-shadow: 0.04rem 0.04rem 0 0 var(--njoy-heading);
}

.cafe-heading {
    position: relative;
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 1.5;
    text-align: center;
    margin: 0.10rem auto 0.18rem;
}

.cafe-heading::before,
.cafe-heading::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.30rem;
    height: 0.30rem;
    background: url(../img/cat.webp) center / contain no-repeat;
}

.cafe-heading::before {
    left: 0.12rem;
}

.cafe-heading::after {
    right: 0.12rem;
}

.cafe-area {
    display: inline-block;
    background: var(--njoy-gold);
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.12rem;
    padding: 0.02rem 0.16rem;
    border-radius: 0.10rem;
    margin: 0.12rem 0 0.02rem;
}

.cafe-item {
    padding: 0.10rem 0.04rem;
    border-top: 0.01rem solid var(--njoy-brown);
    text-align: center;
}

.cafe-item:last-of-type {
    border-bottom: 0.01rem solid var(--njoy-brown);
}

.cafe-item__name {
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 1.5;
}

.cafe-item__hours {
    color: #3b3b3b;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.13rem;
    line-height: 1.6;
}


/* ============================================================
   抽選賞品カード（A賞 / B賞）
   ============================================================ */
.prize-total {
    text-align: center;
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 800;
    font-size: 0.17rem;
    line-height: 1.5;
    margin: 0.12rem 0 0.10rem;
}

.prize-card {
    margin: 0.18rem 0;
    text-align: center;
}

.prize-card__rank {
    display: block;
    width: 100%;
    background: var(--njoy-heading);
    color: #fff;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.24rem;
    letter-spacing: 0.04em;
    padding: 0.02rem 0;
    margin-bottom: 0.08rem;
}

.prize-card__name {
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.15rem;
    line-height: 1.5;
    margin-bottom: 0.04rem;
}

/* 当選人数バッジ — 両端に半円ノッチを入れたチケット風の装飾 */
.prize-card__count {
    display: inline-block;
    position: relative;
    margin: 0.10rem auto 0.04rem;
    padding: 0.06rem 0.32rem;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.20rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #e9ba45 0%, var(--njoy-gold) 55%, #c08c18 100%);
    border-radius: 0.05rem;
    box-shadow: 0 0.02rem 0.05rem rgba(168, 77, 1, 0.20);
    text-shadow: 0 0.01rem 0 rgba(140, 96, 8, 0.35);
}

/* 両端の半円ノッチ（カード地＝白と同色でくり抜いて見せる） */
.prize-card__count::before,
.prize-card__count::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.15rem;
    height: 0.15rem;
    background: #fff;
    border-radius: 50%;
}

.prize-card__count::before {
    left: -0.075rem;
}

.prize-card__count::after {
    right: -0.075rem;
}

/* 人数の数字だけ Barlow Condensed で大きく */
.prize-card__num {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.34rem;
    line-height: 1;
    margin-right: 0.02rem;
    vertical-align: -0.01rem;
}

.prize-card img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0.08rem 0 0.06rem;
}

/* プレーンなテキストリンク（ボタンにしない・not-equal-me の showExchange 相当） */
.text-link {
    display: block;
    text-align: center;
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-size: 0.16rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    margin: 0.14rem 0 0.10rem;
}

/* --- 当選後ブロック（当選者ID / 識別ID / 送付先住所登録） --- */
.prize-win {
    margin: 0.16rem 0 0.10rem;
    text-align: center;
}

.prize-win__lead {
    color: var(--njoy-heading);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.22rem;
    line-height: 1.4;
    margin-bottom: 0.14rem;
}

.prize-win__label {
    color: var(--njoy-brown);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 1.4;
    margin: 0.14rem 0 0.06rem;
}

/* 応募要項 PDF テキストリンク（ボタンにしない） */
.tac-link {
    display: block;
    text-align: center;
    color: var(--njoy-brown);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.14rem;
    font-weight: 600;
    text-decoration: underline;
    margin: 0.16rem 0 0.10rem;
}


/* ============================================================
   DISABLED — 押せないことを視覚的に明確にする
   ============================================================ */
.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;
}

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