@charset "UTF-8";

/* ============================================================================
   ⚠ 統合にあたっての要判断コンフリクト（style.css 1-1859 由来のグローバル指定）
   これらは main.min.css の後に読まれ、テンプレ全体へ影響します。後ほど判断:
     1) body{ overflow:hidden }        → 縦スクロール不可の原因になり得る（最重要）
     2) html{ overflow-x:hidden }      → 同上／横方向クリップ
     3) html{ font-size:62.5% }        → 1rem=10px。テンプレのrem寸法が62.5%に縮む
     4) body/ * のリセット, .container(max-width:980/BP768) 等はLPの950/740と流儀差
   ※本ファイルではルールは残置（無効化していません）。採否は別途決定してください。
   ============================================================================ */
/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    layout
===================================================================*/
/*  container
---------------------------------------------*/
.container {
    width: 100%;
    max-width: 980px;
    padding-right: var(--spa);
    padding-left: var(--spa);
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 740px) {
    .container {
        max-width: auto;
    }
}

.container.-large {
    max-width: 1230px;
}

@media screen and (max-width: 740px) {
    .container.-large {
        max-width: auto;
    }
}

@media screen and (min-width: 1501px) {
    .container.-large {
        max-width: 1430px;
    }
}

.container.-small {
    max-width: 860px;
}

@media screen and (max-width: 740px) {
    .container.-small {
        max-width: auto;
    }
}

.container.-min {
    max-width: 690px;
}

@media screen and (max-width: 740px) {
    .container.-min {
        max-width: auto;
    }
}

.container.-fluid {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.container--fluid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    headline
===================================================================*/
/*==================================================================
    .h01
===================================================================*/
.h01 {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.75em 0;
    font-size: 1.5rem;
    line-height: 1.8;
    font-weight: 500;
    color: #767676;
}

@media screen and (max-width: 740px) {
    .h01 {
        align-items: center;
        gap: 0.4em 0;
        font-size: 1.2rem;
    }
}

.h01.-voice,
.h01.-howto,
.h01.-campaign {
    align-items: center;
    color: var(--w);
}

.h01.-where {
    align-items: center;
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    btn
===================================================================*/
/*==================================================================
    .btn01
===================================================================*/
/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    table
===================================================================*/
/*==================================================================
    .tbl01
===================================================================*/
/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    list
===================================================================*/
/*==================================================================
    .li01
===================================================================*/
/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    header
===================================================================*/
/*==================================================================
    .header
===================================================================*/
.header {
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.header .header_inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .header_inner img {
    display: block;
    width: auto;
    height: 34px;
}

@media screen and (max-width: 740px) {
    .header .header_inner img {
        height: 6.4vw;
    }
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    hamburger menu
===================================================================*/
/*==================================================================
    .hamburger
===================================================================*/
.hamburger {
    width: 60px;
    height: 60px;
    padding-top: 18px;
    background-color: #ccc;
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 9999;
    display: block;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    font: inherit;
    color: inherit;
    margin: 0;
    overflow: visible;
    border-radius: 8px;
}

@media screen and (max-width: 740px) {
    .hamburger {
        width: 60px;
        height: 60px;
        padding-top: 18px;
        margin: 0;
    }
}

.hamburger_inner {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger_box {
    display: inline-block;
    top: 50%;
    left: 0;
    margin-top: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--k);
    border-radius: 0px;
    position: absolute;
    transition: var(--transition);
}

.hamburger_box::before,
.hamburger_box::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: var(--k);
    border-radius: 0px;
    position: absolute;
    left: 0;
    transition: var(--transition);
}

.hamburger_box::before {
    top: -7px;
}

.hamburger_box::after {
    bottom: -7px;
}

/*  spin
---------------------------------------------*/
.hamburger--spin_box {
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin_box::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.hamburger--spin_box::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* ======= active ======= */
.hamburger.-active {
    mix-blend-mode: normal;
}

.hamburger.-active .hamburger_box {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    background-color: #fff !important;
}

.hamburger.-active .hamburger_box::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
    background-color: #fff !important;
}

.hamburger.-active .hamburger_box::after {
    background-color: #fff !important;
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    global nav
===================================================================*/
/*==================================================================
    .nav-open
===================================================================*/
.nav-open01 {
    visibility: hidden;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    transition: var(--transition);
    overflow-y: scroll;
}

.nav-open01__inner {
    padding: 80px 30px;
}

.nav-open01__inner__logo {
    margin-bottom: 30px;
}

.nav-open01__inner__list {
    text-align: center;
    margin-bottom: 30px;
}

.nav-open01__inner__list li {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-open01__inner__list li a {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--w);
    display: inline-block;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav-open01.-active {
    visibility: visible;
    opacity: 1;
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    footer
===================================================================*/
/*==================================================================
    .footer
===================================================================*/
.footer {
    padding: 30px 0;
    background-color: #000;
}

.footer small {
    display: block;
    font-size: 1rem;
    color: var(--w);
    text-align: right;
}

/*==================================================================
    style.css
===================================================================*/
/*==================================================================
    mainView
===================================================================*/
/*==================================================================
    .screen
===================================================================*/


/* ============================================================================
   ↑ ここまで style.css 1-1859行（土台：reset / :root変数 / .container / .header 等）
   ↓ ここから JMB Summer Campaign LP（.jmb-lp スコープ）
   ※競合は後ほど判断（要注意: html{font-size:62.5%}・body/*リセット・.container[980/BP768]）
   ============================================================================ */
/* =========================================================
   JMB Summer Campaign LP
   - すべて .jmb-lp 配下にスコープ（既存の共通CSSと衝突回避）
   - サイズ指定は文字崩れ防止のため fluid 方式:
       calc( SP基準px / 750 * 100vw )
       ※SPデザインは 750px 幅を基準に採寸した値を分子に置く
       ※viewport が広がると PC固定px で頭打ち（＝崩れない）
   - Base = SP / PC化 = 768px以上 / 景品カルーセル解除 = 850px以上
   - FV = 常に画面幅いっぱい(100%) / FV以外 = 最大950px（背景色ごと中央寄せ）
   ========================================================= */

/* テンプレ上書き：main.min.css の @media(min-width:740px){#wrapper{min-width:950px}} を無効化。
   min-width:950px が画面幅より広い時に #wrapper が950pxのまま margin:auto 中央寄せになり、
   中身が画面中心ではなく950pxの中心に寄る（＝右寄り）ため、min-width:auto に戻す。
   ※ main.min.css は共通CSSで編集不可のため、後読みの本CSSで上書きする。 */
@media all and (min-width: 740px) {
    #wrapper {
        min-width: auto;
    }
}

.jmb-lp {
    /* 版数マーカー。診断スクリプトがこの値を表示するので、
       実機で「新しいCSSが配信されているか（キャッシュでないか）」を
       スクショ1枚で判別できる。CSSを更新したらここも更新する。
       ※描画に影響しないカスタムプロパティ。納品時は診断スクリプトと一緒に削除可。 */
    --css-ver: "260828-1";
    /* elastic-out イージング。※2026-08-03 現在は未使用（ease-out に変更したため）。
       elastic版に戻す場合はこれを使うが、linear() は Chrome113+ / Safari17.2+ /
       Firefox112+ のため、**必ず @supports ガードを併用すること**（下のコメント参照）。 */
    --ease-elastic-out: linear(0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1);
    /* カラー ------------------------------------------------- */
    /* NO.16 コントラスト比対応（PSD 260730）。旧 #E4323F（白地 4.35:1／AA未達）
       → #CC0000（白地 5.89:1）。新PSDでは文字・背景・枠すべてこの色に置換済み。 */
    --red: #CC0000;
    /* 未使用（旧赤の濃色版。旧 --red からの派生値なので参照しないこと） */
    --red-deep: #D5262F;
    --pink: #FCE2E3;
    --sky: #87D3F5;
    --sky-pale: #e2f4fc;
    /* 未使用（PSD実測は #765810。--prize / --gold-pr に統合した） */
    --gold: #C9A22B;
    /* NO.16 コントラスト比対応（PSD 260730）。旧 #D6A008（白地 2.36:1／AA未達）
       → #765810（白地 6.62:1）。プレミアム抽選の文字・帯・枠すべて。
       ※PSDでは装飾の▼3つのみ #D6A008 のまま（LPでは未実装のため影響なし） */
    --gold-pr: #765810;
    /* PSD 260730: プレミアム抽選の色 */
    --prize: #765810;
    /* PSD: 景品テキスト */
    --gbox: #F3F2F6;
    /* PSD: グレーの角丸ボックス */
    --gline: #AFAFAF;
    /* PSD: 罫線グレー */
    --gtext: #565656;
    /* PSD: 更新日テキスト */
    --marker: #FFF07A;
    --ink: #1a1a1a;
    --ink-soft: #444;
    --line: #e7c9cb;
    --turquoise: #81dcf0;
    --label-pink: #fde2e3;
    --fv: #e2f4fc;
    /* ラベル背景色 */
    /* 幅の基準 ---------------------------------------------- */
    --content: 1100px;
    /* .jmb-inner（＝帯 .jmb-bar と同幅）の最大幅 */
    --body: 950px;
    /* inner内のコンテンツ（帯以外）の最大幅 */
    max-width: 100%;
    margin: 0 auto;
    /* 横スクロール防止ガード：100vw(スクロールバー幅を含む)やリサイズ時の一時的な
       はみ出し、zoom端数などが画面全体の横スクロールを生むのを根元でクリップ。
       縦スクロール／景品カルーセルの内部スクロールには影響しない。 */
    overflow-x: clip;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    /* 本文エリア(.contentsInr)を全幅化しているため、FV/セクションは width:100% だけで
     画面幅いっぱいになる（100vwブレイクアウトは使わない）。 */
    -webkit-font-feature-settings: "palt" on;
    -webkit-font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "palt" on;
}

@media screen and (min-width: 1441px) {
    .jmb-lp {
        width: 1440px;
        margin: 0;
        /* zoomは左上原点。左寄せ固定で左から充填 */
    }
}

.jmb-lp *,
.jmb-lp *::before,
.jmb-lp *::after {
    box-sizing: border-box;
}

.jmb-lp img {
    max-width: 100%;
    height: auto;
    display: block;
}

.jmb-lp p {
    margin: 0;
}

.jmb-lp ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jmb-lp .jmb-red {
    color: var(--red);
}

.jmb-lp .jmb-marker {
    background: linear-gradient(transparent 55%, var(--marker) 55%);
}

/* ---- FV・全セクション共通：全幅の背景帯 ------------------- */
/* .contentsInr を全幅化しているので width:100% で画面幅いっぱいになる（FV・セクション共通） */
.jmb-lp .jmb-fv,
.jmb-lp .jmb-sec {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ---- セクション共通（背景色を持つ帯） --------------------- */
.jmb-lp .jmb-sec {
    position: relative;
    padding: min(72px, calc(96 / 750 * 100vw)) 0;
}

.jmb-lp .jmb-sec--pink {
    background: var(--pink);
}

.jmb-lp .jmb-sec--sky {
    background: var(--sky-pale);
}

.jmb-lp .jmb-sec--red {
    background: var(--red);
    color: #fff;
}

.jmb-lp .jmb-sec--white {
    background: #fff;
}

.jmb-lp .jmb-sec--turquoise {
    background: var(--turquoise);
}

/* 内側コンテンツラッパー（帯 .jmb-bar はここ幅いっぱい＝1100px） */
.jmb-lp .jmb-inner {
    width: 100%;
    max-width: var(--content);
    margin: min(15px, calc((15 / 750) * 100vw)) auto 0;
    padding: 0 min(24px, calc((40 / 750) * 100vw)) min(25px, calc((25 / 750) * 100vw));
    /* padding: 0; */
}

/* inner直下のコンテンツは最大950pxに収めて中央寄せ（帯 .jmb-bar だけ1100px）。
   要素固有のより小さいmax-widthは尊重（このルールは早い位置＝低優先で上限のみ担う）。 */
/* inner直下の非バー要素は .container 方式（style.css 1372-1426参照）に準拠：
   width:100% + max-width で親(.jmb-inner)を超えず、740-950px域の横スクロールを防ぐ。
   左右余白は親 .jmb-inner の padding が .container の var(--spa) 相当を担当。
   帯 .jmb-bar は例外（1100px幅を維持）。SP(<=740)は max-width 解除で全幅fluid。 */
.jmb-lp .jmb-inner>* {
    max-width: var(--body);
}

/* = 950px 上限 */
.jmb-lp .jmb-inner>*:not(.jmb-bar) {
    width: 100%;
    max-width: var(--body);
    /* 950px */
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 740px) {
    .jmb-lp .jmb-inner>*:not(.jmb-bar) {
        max-width: none;
    }
}

/* ---- 見出し類 -------------------------------------------- */
.jmb-lp .jmb-head {
    text-align: center;
    /* font-size: min(22px, calc(36 / 750 * 100vw)); */
    font-size: min(36px, calc((36 / 750) * 100vw));
    /* Figma: 景品一覧=36px/黒 */
    font-weight: 700;
    margin: 0 auto min(24px, calc(40 / 750 * 100vw));
}

/* 黒帯見出し */
.jmb-lp .jmb-bar {
    background: #111;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: min(17px, calc(28 / 750 * 100vw));
    padding: min(12px, calc(20 / 750 * 100vw)) 16px;
    letter-spacing: .05em;
    margin: 0 auto min(32px, calc(48 / 750 * 100vw));
    width: 100%;
    max-width: 1100px;
    /* 帯だけ inner 幅(1100px)いっぱい */
}

/* 罫線見出し */
.jmb-lp .jmb-rule {
    display: flex;
    align-items: center;
    gap: min(16px, calc(24 / 750 * 100vw));
    font-size: min(18px, calc(30 / 750 * 100vw));
    font-weight: 700;
    text-align: center;
    margin: 8px 0 min(24px, calc(40 / 750 * 100vw));
}

.jmb-lp .jmb-rule::before,
.jmb-lp .jmb-rule::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--red);
}

.jmb-lp .jmb-br-pc {
    display: block;
}

@media (max-width: 741px) {
    .jmb-lp .jmb-br-pc {
        display: none;
    }
}

.jmb-lp .jmb-br-sp {
    display: none;
}

@media (max-width: 741px) {
    .jmb-lp .jmb-br-sp {
        display: block;
    }
}

/* =========================================================
   1+2+3 統合ブロック：FV / キャンペーン概要 / 景品一覧
   ---------------------------------------------------------
   背景 FV_*_bg.png（空→空港→床）を1枚 top/100% auto で敷き、床色 #81dcf0 を
   画像の下へ継ぎ目なく延長。上段(hero＋概要)は幅比例で背景の空〜家族に整列、
   下段(景品)は床の上に配置（景品自体は現行踏襲＝SPカルーセル/960で5枚固定）。
   スケール：SP(≤740)=750基準fluid / PC(741〜1440)=1440基準fluid（≥1441は既存zoom）
   ========================================================= */
.jmb-lp .jmb-fv {
    position: relative;
    overflow-x: clip;
    /* ヤシのはみ出しは横だけクリップ。入れ子(景品)の横スクロールは阻害しない */
    /* 背景を bottom 固定：セクションが高くなった分だけ背景(家族・床)も下へずれ、
     カード高さに関わらず家族が常にカード下に来る（フォント差に強い自己補正）。
     上に余る帯はフラット空色(#e2f4fc＝画像最上部と同色)で継ぎ目なし。 */
    background-color: var(--fv);
}

/* hero（キャッチコピー画像＝h1） */
.jmb-lp .jmb-fv__copy {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: 0;
    /* h1既定サイズの無効化（中身はimgのみ） */
    line-height: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__copy {
        display: block;
        position: static;
        min-height: 360px;
    }
}

.jmb-lp .jmb-fv__copy img {
    margin: 0 auto;
    /* hero を WebP 化した際に width/height 属性を付与している（2026-08-06）。
       height:auto を置かないと属性の高さがそのまま使われて縦に伸びる。
       auto にしておくと属性から aspect-ratio が導かれ、
       読み込み前から高さが確保されてレイアウトシフト（CLS）が起きない。 */
    height: auto;
}

.jmb-lp .jmb-fv__copy .spView {
    width: 100%;
}

.jmb-lp .jmb-fv__copy .copy_txt {
    font-size: min(32px, calc(32 / 750) * 100vw);
    font-weight: 700;
    line-height: 1.5;
    margin: 0 auto min(40px, calc(60 / 750) * 100vw);
    text-shadow: 0px 0px 15px rgba(226, 244, 252, 1);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__copy .copy_txt {
        font-size: 18px;
    }
}
.jmb-lp .jmb-fv__copy .copy_txt .lg {
    font-size: min(38px, calc(38 / 750) * 100vw);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__copy .copy_txt .lg {
        font-size: 24px;
    }
}
/* --- FV hero の読み込み時アニメーション（リロードごとに1回） ------------
   2026-08-03 変更：elastic のバウンスをやめ、ease-out でゆっくり拡大する形に。

   ★ opacity: 0 を単独で置いていないのが要点。
     fill-mode を both にすると 0% のキーフレーム（opacity:0）が
     開始前にも適用されるため、別途 opacity:0 を書く必要がない。
     こうしておくと、万一アニメーションが動かない環境でも
     hero は既定値（opacity:1）で普通に表示され、
     「hero が永久に消える」事故が原理的に起きない。

   ★ イージングを linear() 系（--ease-elastic-out）に戻す場合は、
     @supports (animation-timing-function: linear(0, 1)) のガードを
     必ず復活させること。linear() 非対応ブラウザ（iOS16以前のSafari等）で
     animation 宣言ごと無効になるため。
     ease-out は全ブラウザ対応なので、現状はガード不要。

   ※ prefers-reduced-motion は明示的に除外している。
     共通の抑制ルール（.jmb-lp * の animation-duration: 0.01ms !important）でも
     実害は出ないが、意図を明示するために残している。 */
@media (prefers-reduced-motion: no-preference) {
    .jmb-lp .jmb-fv__copy {
        animation: jmb-hero-in 0.5s ease-out both;
    }
}

@keyframes jmb-hero-in {
    0% {
        opacity: 0;
        transform: translate(0px, 0px) scale(0.95) rotate(0deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* SP: hero全幅（750基準ネイティブ） */
/* 上段ステージ：床手前まで高さを確保し、背景の家族イラストを見せる */
.jmb-lp .jmb-fv__stage {
    position: relative;
    z-index: 0;
    /* SP: 床開始(≈2385/2756)まで。景品はこの下＝床の上に流れる */
    background: url(../img_sites/FV_bg_SP.png), url(../img_sites/overview_SP.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;
    background-size: 100% auto, 100% auto;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__stage {
        background: url(../img_sites/FV_bg_PC.png), url(../img_sites/overview_PC.png);
        background-repeat: no-repeat, no-repeat;
        background-position: top center, bottom center;
        background-size: 1440px auto, 1440px auto;
    }
}

/* 概要カードの絶対配置基準（tag/lay の top/left/right 基準を旧sectionから引き継ぐ） */
.jmb-lp .jmb-fv__stage .jmb-overview {
    position: relative;
    padding-bottom: min(350px, calc((350 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__stage .jmb-overview {
        margin-top: min(14px, calc((14 / 1440) * 100vw));
        padding-bottom: min(230px, calc((350 / 1440) * 100vw));
    }
}

/* 装飾：ヤシの葉（PCのみ・下のPC分岐で表示） */
.jmb-lp .jmb-fv__palm {
    display: none;
    position: absolute;
    z-index: -1;
    /* .jmb-fv__stage(z-index:0のSC)の子として配置し z-index:-1。
       PCでは hero(.jmb-fv__copy)が position:static（z-index無効）なので、
       palm を hero の下に入れるには負のz-indexが必要。
       負のz-index(step2)は stageの background(step1)より上、
       hero(static=step3)・overview(step6)より下＝背景とコンテンツの間に入る。 */
    pointer-events: none;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__palm {
        display: block;
    }
}

.jmb-lp .jmb-fv__ribbon {
    display: inline-block;
    background: var(--red);
    color: #fff;
    font-size: min(13px, calc(24 / 750 * 100vw));
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.jmb-lp .jmb-fv__title {
    font-size: min(64px, calc(88 / 750 * 100vw));
    font-weight: 800;
    color: var(--red);
    line-height: 1.2;
    margin: 0 0 12px;
    text-shadow: 0 2px 0 #fff;
}

.jmb-lp .jmb-fv__lead {
    font-size: min(15px, calc(26 / 750 * 100vw));
    color: var(--ink);
    font-weight: 700;
}

/* =========================================================
   2. キャンペーン概要（今なら カード）
   ========================================================= */
.jmb-lp .jmb-overview .jmb-inner .jmb-tag {
    display: block;
    position: absolute;
    top: -3%;
    left: 0%;
    z-index: 2;
    width: min(213px, calc((213 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview .jmb-inner .jmb-tag {
        /* right: max(291px, calc(62% - 300px)); */
        left: max(50px, calc(47% - 300px));
        top: clamp(-3%, 1vw + 5em, -5%);
        /* width: min(108px, calc((108 / 750) * 100vw)); */
        width: 108px;
    }
}

.jmb-lp .jmb-overview .jmb-inner .jmb-lay {
    display: block;
    position: absolute;
    top: -3%;
    right: 0%;
    z-index: 2;
    width: min(231px, calc((231 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview .jmb-inner .jmb-lay {
        /* left: max(240px, calc(57% - 300px)); */
        right: max(49px, calc(47% - 300px));
        top: clamp(-3%, 1vw + 5em, -5%);
        /* width: min(138px, calc((138 / 750) * 100vw)); */
        width: 138px;
    }
}

/* -------- 概要カード（Figma実寸: 750px基準 / Noto Sans JP Bold） -------- */
.jmb-lp .jmb-overview .jmb-inner .jmb-overview__card {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: min(61px, calc((61 / 750) * 100vw)) min(30px, calc((30 / 750) * 100vw)) 0;
    background: var(--w);
    border-radius: min(28px, calc((28 / 750) * 100vw));
    text-align: center;
    overflow: hidden;
    box-shadow: 0 min(6px, calc((6 / 750) * 100vw)) min(20px, calc((20 / 750) * 100vw)) rgba(0, 0, 0, .06);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview .jmb-inner .jmb-overview__card {
        /* max-width: min(600px, calc((600 / 1440) * 100vw)); */
        width: 600px;
        padding: 36px 40px 0;
        border-radius: 28px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    }
}

/* ハワイ往復ペア相当マイルが（38px / 黒） */
.jmb-lp .jmb-overview__lead {
    font-size: min(38px, calc((38 / 750) * 100vw));
    font-weight: 700;
    color: var(--k);
    line-height: 1.4;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__lead {
        grid-area: 1 / 1 / 2 / 2;
        /* font-size: min(19px, calc((19 / 1440) * 100vw)); */
        font-size: 19px;
    }
}

/* (80,000マイル)（32px / 黒） */
.jmb-lp .jmb-overview__note {
    margin-top: min(3px, calc((3 / 750) * 100vw));
    font-size: min(32px, calc((32 / 750) * 100vw));
    font-weight: 700;
    color: var(--k);
    line-height: 1.4;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__note {
        grid-area: 2 / 1 / 3 / 2;
        /* font-size: min(16px, calc((16 / 1440) * 100vw)); */
        /* margin-top: min(2px, calc((2 / 1440) * 100vw)); */
        font-size: 16px;
        margin-top: 2px;
    }
}

/* 最大20名様（44px / 赤） */
.jmb-lp .jmb-overview__prize {
    margin-top: min(16px, calc((16 / 750) * 100vw));
    font-size: min(44px, calc((44 / 750) * 100vw));
    font-weight: 700;
    color: var(--red);
    line-height: 1.2;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__prize {
        grid-area: 1 / 2 / 2 / 3;
        align-self: end;
        /* font-size: min(22px, calc((22 / 1440) * 100vw)); */
        font-size: 22px;
        margin-top: 0;
    }
}

/* 「が」＝lead内で小さめ（SP 32px相当） */
.jmb-lp .jmb-overview__lead .sm {
    font-size: min(32px, calc((32 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__lead .sm {
        /* font-size: min(16px, calc(16 / 1440 * 100vw)); */
        font-size: 16px;
        /* 「が」PC16px */
    }
}

/* 「20」＝prize内で大きめ（SP 64px相当） */
.jmb-lp .jmb-overview__prize .lg {
    font-size: min(64px, calc((64 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__prize .lg {
        /* font-size: min(32px, calc((32 / 1440) * 100vw)); */
        font-size: 32px;
        /* 「20」PC32px */
    }
}

/* ワイキキ写真 */
.jmb-lp .jmb-overview__photo {
    width: 100%;
    max-width: 350px;
    margin: min(25px, calc((25 / 750) * 100vw)) auto 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__photo {
        /* max-width: min(350px, calc(350 / 1440 * 100vw)); */
        max-width: 350px;
        /* margin-top: min(16px, calc(16 / 1440 * 100vw)); */
        margin-top: 16px;
    }
}

.jmb-lp .jmb-overview__photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* 他にもマイルやJAL Payポイントなどが（32px / 黒） */
.jmb-lp .jmb-overview__total-lead {
    margin-top: min(50px, calc((50 / 750) * 100vw));
    font-size: min(32px, calc((32 / 750) * 100vw));
    font-weight: 700;
    color: var(--k);
    line-height: 1.4;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__total-lead {
        /* font-size: min(16px, calc((16 / 1440) * 100vw)); */
        /* margin-top: min(24px, calc((24 / 1440) * 100vw)); */
        font-size: 16px;
        margin-top: 24px;
    }
}

/* 最大66,000名様にあたる！（44px / 赤+黒） */
.jmb-lp .jmb-overview__total {
    margin-top: min(8px, calc((8 / 750) * 100vw));
    font-size: min(44px, calc((44 / 750) * 100vw));
    font-weight: 700;
    color: var(--k);
    line-height: 1.3;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__total {
        /* font-size: min(22px, calc((22 / 1440) * 100vw)); */
        /* margin-top: min(4px, calc((4 / 1440) * 100vw)); */
        font-size: 22px;
        margin-top: 4px;
    }
}

.jmb-lp .jmb-overview__total .big {
    color: var(--red);
}

/* さらに… JAL PLAZA スポットチェックイン（32px / 黒, 強調赤） */
.jmb-lp .jmb-overview__more {
    margin-top: min(59px, calc((59 / 750) * 100vw));
    font-size: min(32px, calc((32 / 750) * 100vw));
    font-weight: 700;
    color: var(--k);
    line-height: 1.5;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__more {
        /* font-size: min(16px, calc((16 / 1440) * 100vw)); */
        /* margin-top: min(20px, calc((20 / 1440) * 100vw)); */
        font-size: 16px;
        margin-top: 20px;
    }
}

.jmb-lp .jmb-overview__more .num {
    color: var(--red);
    font-size: min(44px, calc((44 / 750) * 100vw));
    /* 100 JAL Payポイント SP44 */
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__more .num {
        /* font-size: min(22px, calc((22 / 1440) * 100vw)); */
        font-size: 22px;
        /* 100 JAL Payポイント PC22 */
    }
}

/* 概要 総取り部の部分サイズ（SP可変） */
.jmb-lp .jmb-overview__total-lead .md {
    font-size: min(38px, calc((38 / 750) * 100vw));
    /* マイル/JAL Payポイント SP38 */
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__total-lead .md {
        /* font-size: min(19px, calc((19 / 1440) * 100vw)); */
        font-size: 19px;
        /* マイル/JAL Payポイント PC19 */
    }
}

.jmb-lp .jmb-overview__total .xl {
    font-size: min(64px, calc((64 / 750) * 100vw));
    /* 66,000 SP64 */
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__total .xl {
        /* font-size: min(32px, calc((32 / 1440) * 100vw)); */
        font-size: 32px;
        /* 66,000 PC32 */
    }
}

/* キャンペーン期間バンド（赤地・白文字 / カード全幅ブリード） */
.jmb-lp .jmb-overview__period {
    position: relative;
    margin: min(60px, calc((102 / 750) * 100vw)) calc(-1 * min(40px, calc((40 / 750) * 100vw))) 0;
    padding: min(66px, calc((66 / 750) * 100vw)) min(24px, calc((24 / 750) * 100vw)) min(44px, calc((44 / 750) * 100vw));
    background: var(--red);
    color: var(--w);
    border-radius: 50% 50% 0 0 / min(40px, calc((40 / 750) * 100vw)) min(40px, calc((40 / 750) * 100vw)) 0 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__period {
        /* margin: min(40px, calc((40 / 1440) * 100vw)) calc(-1 * min(40px, calc((40 / 1440) * 100vw))) 0; */
        /* padding: min(34px, calc((34 / 1440) * 100vw)) min(24px, calc((24 / 1440) * 100vw)) min(24px, calc((24 / 1440) * 100vw)); */
        margin: 40px calc(-1 * 40px) 0;
        padding: 34px 24px 24px;
        border-radius: 50% 50% 0 0 / 40px 40px 0 0;
    }
}

.jmb-lp .jmb-overview__period .label {
    position: absolute;
    top: -12.5%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    margin-bottom: min(10px, calc((10 / 750) * 100vw));
    padding: min(4px, calc((4 / 750) * 100vw)) min(20px, calc((20 / 750) * 100vw));
    background: var(--label-pink);
    /* NO.16: 旧 #e50000 直書き → 新PSDで #CC0000 に統合されたため変数参照に変更 */
    color: var(--red);
    font-size: min(32px, calc((32 / 750) * 100vw));
    font-weight: 700;
    line-height: 1.4;
    border-radius: none;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__period .label {
        /* margin-bottom: min(10px, calc((10 / 750) * 100vw)); */
        /* padding: min(4px, calc((4 / 750) * 100vw)) min(20px, calc((20 / 750) * 100vw)); */
        /* font-size: min(16px, calc((16 / 1440) * 100vw)); */
        margin-bottom: 10px;
        padding: 4px 20px;
        font-size: 16px;
    }
}

.jmb-lp .jmb-overview__period .date {
    font-size: min(36px, calc((36 / 750) * 100vw));
    font-weight: 700;
    color: var(--w);
    line-height: 1.3;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__period .date {
        /* font-size: min(23px, calc((23 / 1440) * 100vw)); */
        font-size: 23px;
        white-space: nowrap;
    }
}

.jmb-lp .jmb-overview__period .date .dow {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    background: var(--w);
    color: var(--red);
    font-size: min(30px, calc((30 / 750) * 100vw));
    width: min(38px, calc((38 / 750) * 100vw));
    height: min(38px, calc((38 / 750) * 100vw));
    border-radius: 50%;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__period .date .dow {
        /* font-size: min(19px, calc((19 / 1440) * 100vw)); */
        font-size: 19px;
        width: 26px;
        height: 26px;
        margin: 0 auto;
        padding: 0;
    }
}

.jmb-lp .jmb-overview__period .date .until {
    font-size: min(30px, calc((30 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__period .date .until {
        /* font-size: min(19px, calc((19 / 1440) * 100vw)); */
        font-size: 19px;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__copy .pcView {
        width: 740px;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__palm--l {
        /* top: min(210px, calc((210 / 1440) * 100vw)); */
        top: 210px;
        left: 0;
        /* width: min(222px, calc((222 / 1440) * 100vw)); */
        width: 222px;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-fv__palm--r {
        /* top: min(690px, calc((690 / 1440) * 100vw)); */
        top: 690px;
        right: 0;
        /* width: min(237px, calc((237 / 1440) * 100vw)); */
        width: 237px;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__headrow {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        /* column-gap: min(10px, calc((10 / 1440) * 100vw)); */
        column-gap: 10px;
        row-gap: 0;
        align-items: end;
        /* 行1(lead・prize)を下端揃い */
        justify-items: center;
        width: fit-content;
        margin: 0 auto;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-overview__headtext {
        display: contents;
    }
}

/* =========================================================
   3. 景品一覧（SP=カルーセル / 850px以上=固定表示）
   ========================================================= */
.jmb-lp .jmb-prizes {
    background-color: var(--turquoise);
    padding-top: min(8px, calc((16 / 750) * 100vw));
    padding-bottom: min(30px, calc((90 / 750) * 100vw));
    /* 床の余白（画像下端まで） */
    margin-top: -1px;
}

/* ---- カルーセル本体：≤959 = 常時ループ(CSSマーキー) / ≥960 = 5枚横並び固定 ---- */
/* カード幅・間隔は変数にまとめる。トラックの左右paddingでも使うため（指摘NO.3） */
.jmb-lp .jmb-prizes {
    --card-w: min(170px, calc((300 / 750) * 100vw));
}

/* 前後ボタンを重ねるための位置基準 */
.jmb-lp .jmb-prize-viewport {
    position: relative;
}

.jmb-lp .jmb-prize-carousel {
    /* 2026-08-05（指摘NO.3）自動送り（マーキー）を廃止し、1枚ずつの手動送りに変更。
       ・横スクロール＋スクロールスナップで「1枚ずつ中央に止まる」動きにする
       ・タッチのスワイプ／トラックパッドの横スクロールがそのまま使える
         （＝「ドラッグしてスライド」も可能になった）
       ・前後ボタン（.jmb-prize-nav）と左右キーからも操作できる
       ・自動で動かないので WCAG 2.2.2 の一時停止手段は不要になり、停止ボタンは廃止した */
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* スクロールバーは隠す（位置はドットで示す） */
    scrollbar-width: none;
    /* 中央のカードを1.15倍に拡大する（.jmb-prize.is-center）ぶんの逃げ場。
       overflow が hidden なので padding が無いと上下が切れる。
       同量の負マージンで打ち消しているため、レイアウトは1pxも動かない。 */
    padding-top: 28px;
    padding-bottom: 28px;
    margin-top: -28px;
    margin-bottom: -28px;
}

/* キーボードで操作できるようフォーカスリングを出す */
.jmb-lp .jmb-prize-list:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}

.jmb-lp .jmb-prize-carousel::-webkit-scrollbar {
    display: none;
    /* WebKit/Blink: スクロールバー非表示 */
}

/* ≤959（マーキー時）は .jmb-inner の左右padding を打ち消して画面幅いっぱいに見せる。
   ・width:100% のままでは横にずれるだけなので width:auto にして負マージンで広げる
   ・トラックは overflow:hidden で内包されるためページの横スクロールは発生しない
   ・詳細度は .jmb-lp .jmb-inner>*:not(.jmb-bar) と同じ(0,3,0)で、こちらが後方＝後勝ち */
@media screen and (max-width: 959px) {
    .jmb-lp .jmb-inner>.jmb-prize-viewport {
        width: auto;
        max-width: none;
        margin-left: calc(-1 * min(24px, calc((40 / 750) * 100vw)));
        margin-right: calc(-1 * min(24px, calc((40 / 750) * 100vw)));
    }
}

.jmb-lp .jmb-prize-list {
    display: flex;
    width: max-content;
    /* 前後に複製セットがあるため通常は端に到達しないが、
       JSが無効な環境でも1枚目・5枚目を中央に止められるように余白を残しておく */
    padding-inline: calc(50% - var(--card-w) / 2);
}

/* ---- 1枚ずつ送る前後ボタン（指摘NO.3） ------------------------------------
   自動送りを廃止した代わりに、利用者が自分のペースで景品を確認できるようにする。
   ・カルーセルの左右に重ねて配置（.jmb-prize-viewport が位置基準）
   ・<button> なので Tab → Enter/Space で操作できる（キーボード対応）
   ・端に到達したら disabled にして「これ以上進めない」ことを伝える
   ・≥960 は5枚すべて見えているので非表示

   ★ 2026-08-06：矢印を「＜」「＞」の文字から CSS 描画に変更した。
     装飾目的で記号を使わない（アクセシビリティ指摘NO.18と同趣旨）ため。
     ボタン自体は当たり判定＋位置決めの箱にして、見た目は疑似要素2つで作る。
       ::before … 丸（background-color: var(--red)）
       ::after  … 三角（ボーダー三角形／白）
     メモの再発防止策3のとおり、1つの箱で背景を差し替えず2箱に分けている
     （1箱だと Safari で崩れることがある）。
     読み上げ名は button の aria-label が持っているので、
     文字が無くなっても支援技術からの見え方は変わらない。 */
.jmb-lp .jmb-prize-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: block;
    /* タップ領域を確保。
       min() だけだと 320px 幅で 23.9px になり 24px をわずかに割っていたため、
       clamp() で 24px を下限にした（下限に当たるのは 322px 未満のときだけで、
       見た目の差は 0.1px 未満）。 */
    width: clamp(24px, calc((56 / 750) * 100vw), 40px);
    height: clamp(24px, calc((56 / 750) * 100vw), 40px);
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: opacity .2s ease;
}

/* 丸（旧：ボタン自身の background-color / border で描いていた） */
.jmb-lp .jmb-prize-nav::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background-color: var(--red);
    border: 1px solid var(--w);
    box-sizing: border-box;
}

/* 三角（ボーダー三角形）。上下のボーダーを透明にして高さを作り、
   左右どちらかのボーダーだけ白にすると、その向きの三角になる。 */
.jmb-lp .jmb-prize-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: min(6px, calc((8 / 750) * 100vw)) solid transparent;
    border-bottom: min(6px, calc((8 / 750) * 100vw)) solid transparent;
    box-sizing: border-box;
}

/* 三角は重心が底辺側に寄るため、幾何中心のままだと片寄って見える。
   旧「＜」「＞」に付けていた text-indent と同じ意図で 1px ぶん視覚中央へ寄せる。 */
.jmb-lp .jmb-prize-nav--prev::after {
    border-right: min(9px, calc((12 / 750) * 100vw)) solid var(--w);
    border-left: 0 solid transparent;
    transform: translateX(max(-1px, calc((-1.5 / 750) * 100vw)));
}

.jmb-lp .jmb-prize-nav--next::after {
    border-left: min(9px, calc((12 / 750) * 100vw)) solid var(--w);
    border-right: 0 solid transparent;
    transform: translateX(min(1px, calc((1.5 / 750) * 100vw)));
}

.jmb-lp .jmb-prize-nav--prev {
    left: min(8px, calc((12 / 750) * 100vw));
}

.jmb-lp .jmb-prize-nav--next {
    right: min(8px, calc((12 / 750) * 100vw));
}

/* 端に到達したとき */
.jmb-lp .jmb-prize-nav:disabled {
    opacity: .3;
    cursor: default;
}

@media (hover: hover) {
    .jmb-lp .jmb-prize-nav:hover:not(:disabled) {
        opacity: .8;
    }
}

.jmb-lp .jmb-prize-nav:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

.jmb-lp .jmb-prize-nav:active:not(:disabled) {
    opacity: .65;
}

@media (min-width: 960px) {
    .jmb-lp .jmb-prize-nav {
        display: none;
    }
}

/* モーション低減設定：スクロールのスムーズ移動を切る（瞬間移動にする） */
@media (prefers-reduced-motion: reduce) {
    .jmb-lp .jmb-prize-carousel {
        scroll-behavior: auto;
    }
}

@media (min-width: 960px) {

    /* ≥960：5枚すべてが同時に収まるのでスクロール不要。前後ボタンも隠す（下部で指定） */
    .jmb-lp .jmb-prize-carousel {
        overflow: visible;
        scroll-snap-type: none;
    }

    .jmb-lp .jmb-prize-list {
        width: auto;
        justify-content: center;
        gap: 16px;
        padding-inline: 0;
    }
}

/* 中央通過時に1.25倍へ拡大する（base.js が .is-center を付け外しする）。
   ★ width ではなく transform: scale() で拡大している。
     実際の width を変えるとトラック全体の幅が変わり、
     マーキーの -50% 送りの基準がずれて継ぎ目が破綻するため。
     transform はレイアウトに影響しないのでループは無傷。
   ★ 拡大中は z-index で隣のカードより前面に出す（flexアイテムなのでpositionは不要）。 */
.jmb-lp .jmb-prize {
    transition: transform 80ms ease-out;
    flex: 0 0 auto;
    /* 固定幅（伸縮させない）。トラックの左右padding計算にも使うので変数から取る */
    width: var(--card-w);
    /* 1枚ずつ中央に止める */
    scroll-snap-align: center;
    margin-right: min(14px, calc(20 / 750 * 100vw));
    background: #fff;
    border: 3px solid var(--red);
    border-radius: 12px;
    padding: min(15px, calc((19 / 750) * 100vw)) 10px;
    text-align: center;
}

/* 最後のカードの右マージンは打ち消す（スクロール最大値をカード中心に合わせるため） */
.jmb-lp .jmb-prize:last-child {
    margin-right: 0;
}

/* 前後に置いた複製カード（指摘NO.3 / 2026-08-05）
   カルーセル表示（<960px）のときだけ表示し、両端でも隣のカードが見えるようにする。
   base.js が「中央セットの外に出たら1セット分ずらす」処理を行うため、
   利用者からは前後がつながって見える。
   装飾なので aria-hidden="true"（読み上げは実データ5枚のみ）。 */
@media (min-width: 960px) {
    .jmb-lp .jmb-prize--clone {
        display: none;
    }
}

.jmb-lp .jmb-prize.is-center {
    transform: scale(1.15);
    z-index: 1;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-prizes {
        --card-w: 160px;
    }

    .jmb-lp .jmb-prize {
        margin-right: 16px;
        padding: 15px 10px 10px;
        border-width: 2px;
        border-radius: 12px;
    }
}

@media (min-width: 960px) {

    /* ≥960：間隔は list 側の gap に委ねる */
    .jmb-lp .jmb-prize {
        margin-right: 0;
        scroll-snap-align: none;
    }
}

.jmb-lp .jmb-prize__icon {
    /* 画像: 各賞品アイコン */
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.jmb-lp .jmb-prize__icon.icon_01 {
    width: min(56px, calc((101 / 750) * 100vw));
    height: min(65px, calc((120 / 750) * 100vw));
    margin-bottom: min(25px, calc((25 / 750) * 100vw));
}

.jmb-lp .jmb-prize__icon.icon_02 {
    width: min(47px, calc((89 / 750) * 100vw));
    height: min(55px, calc((101 / 750) * 100vw));
    margin-bottom: min(30px, calc((30 / 750) * 100vw));
}

.jmb-lp .jmb-prize__icon.icon_03 {
    width: min(60px, calc((111 / 750) * 100vw));
    height: min(60px, calc((111 / 750) * 100vw));
    margin-bottom: min(25px, calc((25 / 750) * 100vw));
}

.jmb-lp .jmb-prize__icon.icon_04 {
    width: min(107px, calc((198 / 750) * 100vw));
    height: min(51px, calc((95 / 750) * 100vw));
    margin-bottom: min(15px, calc((15 / 750) * 100vw));
}

.jmb-lp .jmb-prize__icon.icon_05 {
    width: min(85px, calc((157 / 750) * 100vw));
    height: min(87px, calc((161 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-prize__icon {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
    }
}

.jmb-lp .jmb-prize__name {
    /* 値は同じ（#765810）。直書きをやめて変数参照に統一 */
    color: var(--prize);
    font-weight: 700;
    font-size: min(18px, calc((32 / 750) * 100vw));
    line-height: 1.4;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-prize__name {
        font-size: 16px;
    }
}

/* SP用ページャドット（装飾） */
.jmb-lp .jmb-dots {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 40px;
}

@media (min-width: 960px) {
    .jmb-lp .jmb-dots {
        display: none;
    }
}

.jmb-lp .jmb-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--w);
    /* 2026-08-05（指摘NO.3）自動送りを廃止したため、ドットのアニメーションも廃止。
       現在位置は base.js が .is-active を付け替えて示す。 */
    transition: background-color .2s ease, transform .2s ease;
}

/* 現在表示中のカードを示す（base.js が付け替える） */
.jmb-lp .jmb-dots span.is-active {
    background: var(--red);
    transform: scale(1.25);
}

/* =========================================================
   4. 悩み導入（水色）
   ========================================================= */
.jmb-lp .jmb-intro {
    background: url(../img_sites/cloud_bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1440px auto;
}

.jmb-lp .jmb-intro .jmb-inner {
    padding: 0 0 min(25px, calc((25 / 750) * 100vw));
}

.jmb-lp .jmb-intro__q {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-bottom: min(32px, calc((44 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__q {
        justify-content: center;
    }
}

.jmb-lp .jmb-intro-wrap {
    display: flex;
    flex-direction: column;
    gap: min(20px, calc((28 / 750) * 100vw));
    padding-left: min(20px, calc((15 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro-wrap {
        padding-left: 20px;
        gap: 28px;
    }
}

.jmb-lp .jmb-intro__q .text {
    font-size: min(38px, calc((38 / 750) * 100vw));
    /* PSD SP: 38px / bold / lh1.579 / 黒 */
    font-weight: 700;
    color: var(--k);
    line-height: 1.579;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__q .text {
        /* PSD PC: 20px / bold / lh1.6 */
        /* font-size: min(20px, calc((20 / 750) * 100vw)); */
        font-size: 20px;
        line-height: 1.6;
    }
}

.jmb-lp .jmb-intro__q .sub {
    font-size: min(32px, calc((32 / 750) * 100vw));
    /* PSD SP: 32px / regular / lh1.5 / 黒 */
    font-weight: 400;
    color: var(--k);
    line-height: 1.5;
    margin-top: min(30px, calc((50 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__q .sub {
        /* PSD PC: 16px / lh3 */
        font-size: 16px;
        margin-top: 0;
    }
}

.jmb-lp .jmb-intro__illust {
    /* 画像: 女性が座っているイラスト */
    /* min-height: min(160px, calc(220 / 750 * 100vw)); */
    width: min(320px, calc((320 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__illust {
        flex: 0 0 25%;
        width: 320px;
    }
}

/* アイコン＋2つの文章を「2列2行」のグリッドで組む（指摘NO.12）
     ┌──────┬──────────────┐
     │      │ .txt         │  1行目
     │ icon ├──────────────┤
     │      │ .jmb-intro__cta │  2行目
     └──────┴──────────────┘
   ・アイコンは左列で2行ぶんをまたぐ（grid-area: 1 / 1 / 3 / 2）
   ・2つの文章を同じ右列に置き、左揃えで統一する（＝中央と左寄せの混在を解消）
   ※ 列は `1fr 1fr` ではなく `auto 1fr` にしている。
     `1fr 1fr` だとアイコン列が親の半分（PCで約475px）を占めてしまい、
     アイコン（PC 100px）の右に余白が大きく空き、文章側が窮屈になるため。
     `auto` はアイコンの実寸で決まるので、PSDの見た目に近い。 */
.jmb-lp .jmb-intro__app {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: min(16px, calc((24 / 750) * 100vw));
    row-gap: min(50px, calc((50 / 750) * 100vw));
    /* グリッド全体を中央に置く（列幅は内容ぶんだけ確保する） */
    justify-content: center;
    align-items: center;
    margin: min(24px, calc((32 / 750) * 100vw)) 0;
    padding: 0 min(20px, calc((20 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__app {
        column-gap: 24px;
        row-gap: 20px;
        margin: 32px 0;
        padding: 0;
    }
}

/* アイコン：左列・2行ぶんをまたぐ */
.jmb-lp .jmb-intro__app .icon {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
}

/* 上の文章：右列の1行目 */
.jmb-lp .jmb-intro__app .txt {
    grid-area: 1 / 2 / 2 / 3;
}

/* 下の文章：右列の2行目 */
.jmb-lp .jmb-intro__app .jmb-intro__cta {
    grid-area: 2 / 2 / 3 / 3;
}

.jmb-lp .jmb-intro__app .icon {
    /* 画像: JMBアプリアイコン */
    width: min(188px, calc(188 / 750 * 100vw));
    height: min(188px, calc((188 / 750) * 100vw));
    flex: 0 0 auto;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__app .icon {
        /* width: min(100px, calc((100 / 750) * 100vw)); */
        /* height: min(100px, calc((100 / 750) * 100vw)); */
        width: 100px;
        height: 100px;

    }
}

.jmb-lp .jmb-intro__app .txt {
    font-size: min(32px, calc((32 / 750) * 100vw));
    /* PSD SP: 32px / regular / lh1.563 / 左寄せ */
    font-weight: 400;
    line-height: 1.563;
    max-width: 420px;
    text-align: left;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__app .txt {
        /* PSD PC: 16px / lh1.75 / 左寄せ */
        /* font-size: min(16px, calc((16 / 750) * 100vw)); */
        font-size: 16px;
        line-height: 1.75;
    }
}

.jmb-lp .jmb-intro__cta {
    /* NO.12: 上の .txt と同じ左揃えに統一（旧 center）。
       中央揃えに戻す場合はここを center にする。 */
    text-align: left;
    font-size: min(32px, calc((32 / 750) * 100vw));
    line-height: 1.875;
    /* 縦の間隔はグリッドの row-gap で取るため margin-top は持たせない
       （旧 margin-top: min(65px, ...) は row-gap に移した） */
    margin-top: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-intro__cta {
        /* PSD PC: 16px / lh1.75 */
        font-size: 16px;
        line-height: 1.75;
        margin-top: 0;
    }
}

/* =========================================================
   5. 記事連動クイズ（赤）
   ========================================================= */
.jmb-lp .jmb-sec.jmb-sec--red.jmb-quiz {
    padding-top: 0;
    padding-bottom: 0;
}

/* 下辺の赤い下向き三角（PSD: 全幅 x 71px）
   ※ z-index:1 で次セクション（後ろのDOM＝上に描画される）より前面に出す */
.jmb-lp .jmb-quiz::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1;
    width: 100%;
    /* サブピクセル丸め対策：本体の下端と1px重ねる（top:100%のまま接するだけだと
       本体の背景と三角の上辺が同じ小数座標で別々に丸められ、白が透ける1pxの筋が出る）。
       重ねた分は height に +1px して見た目の三角の大きさを保つ。 */
    margin-top: -1px;
    height: calc(min(71px, calc((71 / 750) * 100vw)) + 1px);
    background: var(--red);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz::after {
        /* 1px重ねる分を加算 */
        height: 72px;
    }
}

.jmb-lp .jmb-quiz-top {
    display: block;
    position: relative;
    background: url(../img_sites/quiz_top_SP.png), var(--w);
    background-repeat: no-repeat, no-repeat;
    /* サブピクセル丸め対策：アーチ画像を1pxだけ下へずらし、
       拡大縮小で生じる最下行のアンチエイリアス（白の透け）を枠外に追い出す。 */
    background-position: center calc(100% + 1px), bottom center;
    background-size: 100% auto, 100% auto;
    height: max(134px, calc((320 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz-top {
        background: url(../img_sites/quiz_top_PC.png), var(--w);
        background-repeat: no-repeat, no-repeat;
        /* サブピクセル丸め対策（SPと同様に画像を1px下げる） */
        background-position: center calc(100% + 1px), bottom center;
        background-size: 1440px auto, 100% auto;
        height: 220px;
    }
}

.jmb-lp .jmb-quiz__title {
    text-align: center;
    margin-bottom: min(20px, calc((28 / 750) * 100vw));
}

.jmb-lp .jmb-quiz__title .eyebrow {
    /* PSD SP: 32px / bold / lh1.2 / 白 */
    font-size: min(32px, calc((32 / 750) * 100vw));
    font-weight: 700;
    line-height: 1.2;
    /* 装飾記号「＼ ／」はテキストに含めずCSSで描画（アクセシビリティ/SEO）。
       モック実測 SP: 24x39px・線幅3px / PC: 8x14px・線幅1.5px */
    --slash-w: min(3px, calc((3 / 750) * 100vw));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: min(20px, calc((20 / 750) * 100vw));
}

.jmb-lp .jmb-quiz__title .eyebrow::before,
.jmb-lp .jmb-quiz__title .eyebrow::after {
    content: "";
    flex: 0 0 auto;
    width: min(24px, calc((24 / 750) * 100vw));
    height: min(39px, calc((39 / 750) * 100vw));
    background-repeat: no-repeat;
}

/* ＼（左） */
.jmb-lp .jmb-quiz__title .eyebrow::before {
    background-image: linear-gradient(to top right,
            transparent calc(50% - var(--slash-w) / 2),
            currentColor calc(50% - var(--slash-w) / 2),
            currentColor calc(50% + var(--slash-w) / 2),
            transparent calc(50% + var(--slash-w) / 2));
}

/* ／（右） */
.jmb-lp .jmb-quiz__title .eyebrow::after {
    background-image: linear-gradient(to bottom right,
            transparent calc(50% - var(--slash-w) / 2),
            currentColor calc(50% - var(--slash-w) / 2),
            currentColor calc(50% + var(--slash-w) / 2),
            transparent calc(50% + var(--slash-w) / 2));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz__title .eyebrow {
        --slash-w: 1.5px;
        gap: 15px;
    }

    .jmb-lp .jmb-quiz__title .eyebrow::before,
    .jmb-lp .jmb-quiz__title .eyebrow::after {
        width: 8px;
        height: 14px;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz__title .eyebrow {
        /* PSD PC: 16px */
        font-size: 16px;
    }
}

.jmb-lp .jmb-quiz__title .main {
    /* PSD SP: 55.6px / bold / lh1.2 / 白 */
    font-size: min(52px, calc((52 / 750) * 100vw));
    font-weight: 700;
    line-height: 1.2;
    display: block;
    margin-top: 4px;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz__title .main {
        /* PSD PC: 30px */
        font-size: 28px;
    }
}

.jmb-lp .jmb-quiz__desc {
    text-align: center;
    /* PSD SP: 30px / lh1.733 / 白 / 中央 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    margin-bottom: min(28px, calc((40 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz__desc {
        /* PSD PC: 15px / lh1.733 */
        font-size: 15px;
    }
}

.jmb-quiz .jmb-bar {
    margin-bottom: min(100px, calc((100 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-quiz .jmb-bar {
        margin-bottom: 60px;
    }
}

/* ---- ステップ枠：赤箱・白枠・上部中央にアイコン画像 ---- */
.jmb-lp .jmb-step {
    position: relative;
    border: 2px solid #fff;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: min(44px, calc((60 / 750) * 100vw)) 0 min(28px, calc((40 / 750) * 100vw));
}

.jmb-lp .jmb-step--1,
.jmb-lp .jmb-step--2 {
    margin-bottom: min(120px, calc((168 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step {
        max-width: 700px;
        margin-top: 50px;
        padding: 40px 32px 32px;
    }

    .jmb-lp .jmb-step--1,
    .jmb-lp .jmb-step--2 {
        margin-bottom: 60px;
    }
}

.jmb-lp .jmb-step--2,
.jmb-lp .jmb-step--3 {
    padding-bottom: 0;
}


/* 上部中央アイコン（白線アイコンを枠の上に重ねる。背景の赤で枠線を隠す）
   ※ 画像ごとに縦横比・サイズが異なるため、共通指定は position/背景のみ。
      幅・マスク幅・上方向オフセットは STEP ごとに指定する（下記 --1 / --2 / --3）。 */
.jmb-lp .jmb-step__icon {
    position: absolute;
    top: 0;
    left: 50%;
    line-height: 0;
    background-color: var(--red)
}

.jmb-lp .jmb-step__icon img {
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- STEP1「1. 学ぶ」: learn_icon.png（原寸 120×80 / 比1.50） --- */
.jmb-lp .jmb-step--1 .jmb-step__icon {
    /* PSD: 枠線の切れ目 SP180px / アイコンは枠線に対し約52%が上に出る */
    transform: translate(-50%, -52%);
    width: min(180px, calc((180 / 750) * 100vw));
}

.jmb-lp .jmb-step--1 .jmb-step__icon img {
    width: min(120px, calc((120 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step--1 .jmb-step__icon {
        /* PSD PC: 切れ目111px / アイコン 72×48 */
        width: 111px;
    }

    .jmb-lp .jmb-step--1 .jmb-step__icon img {
        width: 72px;
    }
}

/* --- STEP2「2. 解く」: answer_icon.png（原寸 202×100 / 比2.02） --- */
.jmb-lp .jmb-step--2 .jmb-step__icon {
    /* PSD: 枠線の切れ目 SP280px / アイコンは約59%が上に出る */
    transform: translate(-50%, -59%);
    width: min(280px, calc((280 / 750) * 100vw));
}

.jmb-lp .jmb-step--2 .jmb-step__icon img {
    width: min(202px, calc((202 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step--2 .jmb-step__icon {
        /* PSD PC: 切れ目151px / アイコン 120×59 */
        width: 151px;
    }

    .jmb-lp .jmb-step--2 .jmb-step__icon img {
        width: 120px;
    }
}

/* --- STEP3「3. 挑戦する」: img_ticket_black.png（原寸 212×124 / 比1.71） --- */
.jmb-lp .jmb-step--3 .jmb-step__icon {
    /* PSD: 枠線の切れ目 SP280px / アイコンは約52%が上に出る */
    transform: translate(-50%, -52%);
    width: min(280px, calc((280 / 750) * 100vw));
}

.jmb-lp .jmb-step--3 .jmb-step__icon img {
    width: min(212px, calc((212 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step--3 .jmb-step__icon {
        /* PSD PC: 切れ目156px / アイコン 124×73 */
        width: 156px;
    }

    .jmb-lp .jmb-step--3 .jmb-step__icon img {
        width: 124px;
    }
}

/* 「N. 学ぶ」＋説明 の見出し行 */
.jmb-lp .jmb-step__head {
    /* h3化しても見た目を変えないため、従来（reset.css の p{line-height:var(--lh)}）と
       同じ行間に固定する。※h1-h6 の既定は 1.7 で p は 1.8 のため差が出る。 */
    line-height: var(--lh);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: min(16px, calc((24 / 750) * 100vw));
    text-align: center;
}

.jmb-lp .jmb-step__label {
    color: #fff;
    font-weight: 700;
    /* PSD SP: 44px / bold / lh1.682 / 白 */
    font-size: min(44px, calc((44 / 750) * 100vw));
    line-height: 1.682;
    white-space: nowrap;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step__label {
        /* PSD PC: 実効約24px */
        font-size: 24px;
    }
}

.jmb-lp .jmb-step__text {
    color: #fff;
    font-weight: 700;
    text-align: left;
    /* PSD SP: 32px / bold / lh1.563 / 白 */
    font-size: min(32px, calc((32 / 750) * 100vw));
    line-height: 1.563;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step__text {
        /* PSD PC: 実効約18px */
        font-size: 18px;
    }
}

/* STEP2/3：テキスト＋メイン画像（PC=2カラム / SP=縦積み） */
.jmb-lp .jmb-step__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(20px, calc((28 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-step__row {
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }

    .jmb-lp .jmb-step__row .jmb-step__head {
        flex: 1;
    }

    .jmb-lp .jmb-step__row .jmb-step__shot {
        flex: 1;
    }
}

.jmb-lp .jmb-step__shot {
    background: #fff;
    /* border-radius: 10px; */
    overflow: hidden;
    width: 100%;
    line-height: 0;
}

.jmb-lp .jmb-step__shot img {
    width: 100%;
    height: auto;
    display: block;
}

/* STEP2/3 PC：PSD準拠で画像を「枠の右半分・上下右が枠線と面一」に置く。
   枠側の内側余白を 0 にし（余白が残ると画像が枠線に接せない）、
   余白はテキスト側（.jmb-step__head）だけに持たせる。SP表示は従来のまま。 */
@media screen and (min-width: 741px) {

    .jmb-lp .jmb-step--2,
    .jmb-lp .jmb-step--3 {
        padding: 0;
    }

    .jmb-lp .jmb-step--2 .jmb-step__row,
    .jmb-lp .jmb-step--3 .jmb-step__row {
        /* 画像とテキストを隙間なく半分ずつ／画像は枠の高さいっぱいに伸ばす */
        gap: 0;
        align-items: stretch;
    }

    /* アイコン＋テキストのグループ＝PCでは左半分。
       position:relative を与えることで .jmb-step__icon の基準がこのグループになり、
       アイコンが「枠全体の中央」ではなく「テキスト側（左半分）の中央」に来る（PSD準拠）。
       SPでは position を付けない＝アイコンの基準は従来どおり .jmb-step（枠全体の中央）。 */
    .jmb-lp .jmb-step--2 .jmb-step__group,
    .jmb-lp .jmb-step--3 .jmb-step__group {
        position: relative;
        flex: 1 1 50%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jmb-lp .jmb-step--2 .jmb-step__head,
    .jmb-lp .jmb-step--3 .jmb-step__head {
        /* PSD PC：ラベルと説明は縦積み・左半分の中央に配置 */
        flex: 1 1 auto;
        flex-direction: column;
        gap: 12px;
        padding: 40px 20px;
    }

    .jmb-lp .jmb-step--2 .jmb-step__shot,
    .jmb-lp .jmb-step--3 .jmb-step__shot {
        /* PSD PC: 画像 351px / 枠内幅698px ≒ 50% */
        flex: 0 0 50%;
        width: 50%;
    }

    .jmb-lp .jmb-step--2 .jmb-step__shot img,
    .jmb-lp .jmb-step--3 .jmb-step__shot img {
        /* 枠の高さいっぱいに合わせる（縦横比はcoverで保持） */
        height: 100%;
        object-fit: cover;
    }
}


/* .jmb-inner>* の max-width:950 に勝たせてSTEP枠を700pxに（PSD準拠） */
@media screen and (min-width: 741px) {
    .jmb-lp .jmb-inner>.jmb-step {
        max-width: 700px;
    }
}

/* テストの対象記事はこちら！（白ピル＋下向き三角） */
.jmb-lp .jmb-quiz__pick {
    position: relative;
    background: #fff;
    color: var(--red);
    text-align: center;
    font-weight: 700;
    /* border-radius: 6px; */
    /* width: fit-content; */
    margin: min(28px, calc((40 / 750) * 100vw)) auto min(24px, calc((36 / 750) * 100vw));
    padding: min(10px, calc((14 / 750) * 100vw)) min(24px, calc((32 / 750) * 100vw));
    /* PSD SP: 32px / red / bold */
    font-size: min(32px, calc((32 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-quiz__pick {
        /* PSD PC: 実効約16px */
        width: 350px;
        font-size: 16px;
    }
}

.jmb-lp .jmb-quiz__pick::after {
    content: "";
    position: absolute;
    left: 50%;
    /* top:100% ＝ pill の下端。三角の上辺が常に下端に密着するため、
       三角の高さ（border-width）が可変でも隙間が生じない。
       ※ bottom に負値の min() を使うと、負数では「より小さい＝より負」が選ばれ、
         三角の高さと位置がズレて隙間の原因になる。 */
    top: 100%;
    bottom: auto;
    transform: translateX(-50%);
    border-style: solid;
    border-width: min(14px, calc((14 / 750) * 100vw)) min(9px, calc((12 / 750) * 100vw)) 0;
    border-color: #fff transparent transparent;
}

/* 対象記事カード */
.jmb-lp .jmb-articles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(16px, calc((24 / 750) * 100vw));
    width: 100%;
    margin: 0 auto;
}

.jmb-lp .jmb-article {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    color: var(--ink);
    width: min(600px, calc((600 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article {
        width: 600px;
    }
}

.jmb-lp .jmb-article__cat {
    background: var(--pink);
    color: var(--red);
    font-weight: 700;
    text-align: center;
    /* PSD SP: 28px / red / bold */
    font-size: min(28px, calc((28 / 750) * 100vw));
    padding: min(8px, calc((12 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__cat {
        /* PSD PC: 実効約14px */
        font-size: 14px;
    }
}

.jmb-lp .jmb-article__body {
    /* grid：SPは img / main / link の縦3段、PCは画像を左に置き右側で main と link を上下に配置。
       grid の既定 justify-items:stretch により main が段の幅いっぱいに広がるため、
       link を justify-self:end でカード内側の右端まで寄せられる（flex+align-items:center では
       main が内容幅に縮み、右端まで届かなかった）。 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "img"
        "main"
        "link";
    gap: min(10px, calc((14 / 750) * 100vw));
    padding: min(18px, calc((26 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__body {
        grid-template-columns: 250px 1fr;
        grid-template-areas:
            "img main"
            "img link";
        align-items: center;
        column-gap: 14px;
    }
}

.jmb-lp .jmb-article__img {
    grid-area: img;
    justify-self: center;
    width: min(300px, calc((400 / 750) * 100vw));
    line-height: 0;
}

.jmb-lp .jmb-article__img img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__img {
        width: 200px;
        align-self: center;
    }
}

.jmb-lp .jmb-article__main {
    grid-area: main;
    text-align: center;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__main {
        text-align: center;
    }
}

.jmb-lp .jmb-article__ttl {
    font-weight: 800;
    color: #000;
    /* PSD SP: 44px / black / bold / lh1.625 */
    font-size: min(44px, calc((44 / 750) * 100vw));
    line-height: 1.625;
    margin-bottom: min(8px, calc((12 / 750) * 100vw));
}

.jmb-lp .jmb-article__ttl .sm {
    font-size: min(36px, calc((36 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__ttl {
        /* PSD PC: 実効約22px */
        font-size: 22px;
    }

    .jmb-lp .jmb-article__ttl .sm {
        font-size: 18px;
    }
}

.jmb-lp .jmb-article__link {
    /* body の grid の独立アイテム。SP/PCとも justify-self:end でカード内側の右端に寄せる。 */
    grid-area: link;
    justify-self: end;
    color: var(--red);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    /* PSD SP: 28px / red / bold */
    font-size: min(28px, calc((28 / 750) * 100vw));
}

.jmb-lp .jmb-article__link .arrow_red {
    width: min(40px, calc((40 / 750) * 100vw));
    line-height: 0;
}

.jmb-lp .jmb-article__link .arrow_red img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__link {
        /* PSD PC: 実効約15px */
        font-size: 15px;
    }

    .jmb-lp .jmb-article__link .arrow_red {
        width: 20px;
    }
}

/* coming soon カード */
.jmb-lp .jmb-article--soon {
    text-align: center;
}

.jmb-lp .jmb-article__soon {
    color: var(--red);
    font-weight: 700;
    /* PSD SP: 36px / red / bold / lh1.5 */
    font-size: min(36px, calc((36 / 750) * 100vw));
    line-height: 1.5;
    padding: min(22px, calc((30 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-article__soon {
        /* PSD PC: 実効約20px */
        font-size: 20px;
        padding: 18px;
    }
}

/* =========================================================
   6. 抽選について（白）
   ========================================================= */
.jmb-lp .jmb-sec.jmb-sec--white.jmb-lottery {
    padding-bottom: min(35px, calc((35 / 750) * 100vw));
}


.jmb-lp .jmb-lottery__wrapp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(24px, calc((32 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lottery__wrapp {
        flex-direction: row;
        justify-content: center;
    }
}

.jmb-lp .jmb-lottery__gacha {
    /* 画像: 抽選チケットイラスト */
    width: min(240px, calc((330 / 750) * 100vw));
    /* margin: 0 auto 8px; */
    margin: 0 0 8px;
}

.jmb-lp .jmb-lottery__note {
    text-align: center;
    /* PSD SP: 30px / lh1.733 / 黒 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    margin-bottom: min(28px, calc((40 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lottery__note {
        /* PSD PC: 15px / lh1.733 */
        font-size: 15px;
    }
}

/* PSDでは強調なしの均一サイズ（旧: goldで拡大していた） */
.jmb-lp .jmb-lottery__note .lg {
    font-size: min(36px, calc((36 / 750) * 100vw));
    font-weight: 700;
    /* NO.16: PSD実測は #765810。旧 var(--gold)=#C9A22B は白地 2.92:1 でAA未達だった。
       抽選（プレミアム）文脈の色なので --gold-pr で指定する */
    color: var(--gold-pr);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lottery__note .lg {
        font-size: 18px;
    }
}

/* ---- スケジュール見出し（短いグレー罫線つき） ---- */
.jmb-lp .jmb-lottery .jmb-rule {
    justify-content: center;
    /* PSD SP: 36px / bold / lh1.2 / 黒 */
    font-size: min(36px, calc((36 / 750) * 100vw));
    line-height: 1.2;
    color: var(--ink);
    gap: min(20px, calc((28 / 750) * 100vw));
}

.jmb-lp .jmb-lottery .jmb-rule::before,
.jmb-lp .jmb-lottery .jmb-rule::after {
    /* PSD SP: 40x2px / #afafaf（全幅ではなく見出し脇の短い線） */
    flex: 0 0 auto;
    width: min(40px, calc((40 / 750) * 100vw));
    height: 2px;
    background: var(--gline);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lottery .jmb-rule {
        /* PSD PC: 実効約18px */
        font-size: 18px;
    }

    .jmb-lp .jmb-lottery .jmb-rule::before,
    .jmb-lp .jmb-lottery .jmb-rule::after {
        /* PSD PC: 21x2px */
        width: 21px;
    }
}

/* ---- スケジュール（SP=縦積み / PC=2カラム） ---- */
.jmb-lp .jmb-schedule {
    display: grid;
    grid-template-columns: 1fr;
    gap: min(30px, calc((40 / 750) * 100vw));
    width: 100%;
    margin: 0 auto min(70px, calc((70 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-inner>.jmb-schedule {
        /* PSD PC: 8月/9月ブロック 338px + gap40 = 716px */
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        max-width: 720px;
    }
}

.jmb-lp .jmb-month {
    text-align: center;
}

.jmb-lp .jmb-month__body {
    display: flex;
    align-items: stretch;
    gap: min(10px, calc((10 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__body {
        gap: 7px;
    }
}

/* 「8月」/「9月」＝左のグレーボックス */
.jmb-lp .jmb-month__ttl {
    flex: 0 0 min(120px, calc((120 / 750) * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gbox);
    border-radius: min(20px, calc((20 / 750) * 100vw));
    font-weight: 700;
    /* PSD SP: 32px / bold / lh1.313 */
    font-size: min(32px, calc((32 / 750) * 100vw));
    line-height: 1.313;
    margin: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__ttl {
        /* PSD PC: 60x116px / radius10 / 実効約16px */
        flex-basis: 60px;
        border-radius: 10px;
        font-size: 16px;
        line-height: 1.293;
    }
}

.jmb-lp .jmb-month__rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: min(10px, calc((10 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__rows {
        gap: 7px;
    }
}

/* 「テスト①｜更新：8月3日（月）」の行 */
.jmb-lp .jmb-month__row {
    display: flex;
    align-items: center;
    background: var(--gbox);
    border-radius: min(20px, calc((20 / 750) * 100vw));
    /* PSD SP: 550x110px */
    height: min(110px, calc((110 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__row {
        /* PSD PC: 271x55px / radius10 */
        border-radius: 10px;
        height: 55px;
    }
}

.jmb-lp .jmb-month__row .test {
    position: relative;
    /* PSD: 縦罫線が行幅の約38%の位置 */
    flex: 0 0 38%;
    font-weight: 700;
    /* PSD SP: 30px / bold / lh1.4 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.4;
}

/* 「テスト①」の丸囲み数字をCSSで描く（指摘NO.22）
   ① 〜 ④（U+2460〜2463）は JIS X 0208 に含まれず、Shift_JIS では
   ベンダー拡張領域（NEC特殊文字／NEC選定IBM拡張文字）にしかない＝いわゆる機種依存文字。
   UTF-8の現代環境では表示できるが、表記規則上は使用不可。
   さらにスクリーンリーダーの読み方が環境依存で
   「まるいち」/「いち」/読み飛ばし などにばらつく。
   → 数字は素のテキスト（1〜4）で置き、丸だけCSSで描画する。
     読み上げは「テスト いち」と自然になり、見た目は丸囲み数字を再現できる。 */
.jmb-lp .jmb-month__row .test .num {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    /* 数字は親の .7em、丸はその1.26倍 ＝ 親に対して直径0.88em。
       フォントの①の丸（インク部分）とほぼ同径になる値を実測で合わせた。 */
    font-size: .7em;
    width: 1.26em;
    height: 1.26em;
    /* 左右0.08em ＝ ①の字送り（1em）とほぼ同じ幅になる */
    margin: 0 .08em;
    border: .1em solid currentColor;
    border-radius: 50%;
    line-height: 1;
    /* 丸の中心を「テスト」の中心に合わせる（実測でズレ0.1px以内） */
    vertical-align: .18em;
}

.jmb-lp .jmb-month__row .test::after {
    /* PSD SP: 2x80px の縦罫線（行高より短い） */
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: min(80px, calc((80 / 750) * 100vw));
    background: var(--gline);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__row .test {
        /* PSD PC: 実効約15px / lh1.379 */
        font-size: 15px;
        line-height: 1.379;
    }

    .jmb-lp .jmb-month__row .test::after {
        /* PSD PC: 2x41px */
        height: 41px;
    }
}

.jmb-lp .jmb-month__row .date {
    flex: 1;
    /* PSD SP: 30px / #565656 / lh1.4 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.4;
    color: var(--gtext);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__row .date {
        font-size: 15px;
        line-height: 1.379;
    }
}

.jmb-lp .jmb-month__note {
    /* PSD SP: 24px / lh1.5 / 黒 / 中央 */
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    margin-top: min(16px, calc((22 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-month__note {
        /* PSD PC: 実効約12px / lh1.477 */
        font-size: 12px;
        line-height: 1.477;
    }
}

/* ---- 抽選カード（SP=縦積み / PC=2カラム） ---- */
.jmb-lp .jmb-lots {
    display: grid;
    grid-template-columns: 1fr;
    gap: min(60px, calc((80 / 750) * 100vw));
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-inner>.jmb-lots {
        /* PSD PC: カード350px × 2 + gap40 = 740px
           ※ minmax(0, 1fr) にすること。
             1fr は minmax(auto, 1fr) と同義で、最小値が「中身の最小幅」になる。
             そのため中身に幅の広い要素が1つあるだけで、その列が広がり
             もう一方が狭くなる（実際に 330px / 370px に崩れていた）。
             minmax(0, 1fr) は最小値を0にするので、必ず等幅（350px）になる。 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
        max-width: 740px;
        /* 参加賞の位置を揃えるため2枚を等高にする（指摘NO.11） */
        align-items: stretch;
    }
}

.jmb-lp .jmb-lot {
    position: relative;
    background: #fff;
    /* PSD SP: radius20 / 赤枠3px */
    border: 3px solid var(--red);
    border-radius: min(20px, calc((20 / 750) * 100vw));
    box-shadow: none;
    overflow: visible;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot {
        /* PSD PC: 赤枠1px / radius20 */
        border-width: 1px;
        border-radius: 20px;
    }
}

.jmb-lp .jmb-lot--premium {
    border-color: var(--gold-pr);
}

/* カード見出し＝白タブが枠線の上に重なる */
.jmb-lp .jmb-lot__head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: var(--red);
    font-weight: 700;
    /* PSD SP: 36px / bold / lh1.2 */
    font-size: min(36px, calc((36 / 750) * 100vw));
    line-height: 1.2;
    white-space: nowrap;
    padding: 0 min(24px, calc((32 / 750) * 100vw));
    margin: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__head {
        /* PSD PC: 実効約18px */
        font-size: 18px;
        padding: 0 16px;
    }
}

.jmb-lp .jmb-lot--premium .jmb-lot__head {
    color: var(--gold-pr);
}

.jmb-lp .jmb-lot__body {
    /* PSD SP: 内側左右余白 約36px（景品バー598px / カード内幅671px） */
    padding: min(70px, calc((90 / 750) * 100vw)) min(36px, calc((36 / 750) * 100vw)) min(40px, calc((56 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__body {
        /* PSD PC: 景品バー309px / カード内幅348px → 左右19px */
        padding: 50px 19px 28px;
    }
}

.jmb-lp .jmb-lot__ticket {
    /* 画像: 抽選チケット（PSD原寸 高さ150px） */
    line-height: 0;
    text-align: center;
    margin: 0 auto min(30px, calc((30 / 750) * 100vw));
}

.jmb-lp .jmb-lot__ticket.ticket_red {
    width: min(230px, calc((230 / 750) * 100vw));
}

.jmb-lp .jmb-lot__ticket.ticket_gold {
    width: min(330px, calc((330 / 750) * 100vw));
}

.jmb-lp .jmb-lot__ticket img {
    width: auto;
    margin: 0 auto;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__ticket {
        margin-bottom: 33px;
    }

    /* SP用の固定幅（赤230px / 金330px）を解除する。
       PCでは下の img の height:75px で幅が決まるため、ラッパーの幅指定は不要。
       残しておくと金の330pxがカードの最小幅（330+左右余白19×2+枠1×2=370px）になり、
       グリッドの均等割りを壊して通常抽選側が40px狭くなる。 */
    .jmb-lp .jmb-lot__ticket.ticket_red,
    .jmb-lp .jmb-lot__ticket.ticket_gold {
        width: auto;
    }

    .jmb-lp .jmb-lot__ticket img {
        height: 75px;
    }
}

/* 「テスト参加回数1回または3回で獲得」 */
.jmb-lp .jmb-lot__cond {
    text-align: center;
    /* PSD SP: 24px / lh1.5 / 黒 */
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    margin-bottom: min(6px, calc((8 / 750) * 100vw));
}

.jmb-lp .jmb-lot__cond span.cond_lg__red {
    color: var(--red);
    font-size: min(30px, calc((30 / 750) * 100vw));
    font-weight: 700;
}

.jmb-lp .jmb-lot__cond span.cond_lg__gold {
    /* NO.16: PSD実測は #765810（プレミアム色）。旧 var(--gold)=#C9A22B から変更 */
    color: var(--gold-pr);
    font-size: min(30px, calc((30 / 750) * 100vw));
    font-weight: 700;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__cond {
        /* PSD PC: 実効約12px / lh1.536 */
        font-size: 12px;
        line-height: 1.536;
        margin-bottom: 6px;
    }

    .jmb-lp .jmb-lot__cond span.cond_lg__red {
        font-size: 16px;
    }

    .jmb-lp .jmb-lot__cond span.cond_lg__gold {
        font-size: 16px;
    }
}

/* 「景品」「参加賞」の帯 */
.jmb-lp .jmb-lot__sub {
    text-align: center;
    font-weight: 700;
    /* PSD SP: 598x58px / 枠2px / 32px */
    border: 2px solid var(--red);
    background: var(--red);
    color: #fff;
    font-size: min(32px, calc((32 / 750) * 100vw));
    line-height: 1.2;
    padding: min(11px, calc((13 / 750) * 100vw)) 0;
    margin-bottom: min(24px, calc((33 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__sub {
        /* PSD PC: 309x30px / 枠1px / 実効約16px */
        border-width: 1px;
        font-size: 16px;
        padding: 5px 0;
        margin-bottom: 16px;
    }
}

.jmb-lp .jmb-lot--premium .jmb-lot__sub {
    border-color: var(--gold-pr);
    background: var(--gold-pr);
}

/* 「参加賞」＝白地・文字は枠色 */
.jmb-lp .jmb-lot__sub--award {
    background: #fff;
    color: var(--red);
    margin-top: min(36px, calc((50 / 750) * 100vw));
}

/* PCでは2枚のカードの「参加賞」の位置を揃える（指摘NO.11）。
   カードを等高にし、参加賞ブロックを margin-top:auto で下端に寄せる。
   最低の余白は .jmb-lot__award の padding-top で確保する。 */
@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot {
        display: flex;
        flex-direction: column;
    }

    .jmb-lp .jmb-lot__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .jmb-lp .jmb-lot__award {
        margin-top: auto;
    }

    .jmb-lp .jmb-lot__sub--award {
        margin-top: 0;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__sub--award {
        margin-top: 29px;
    }
}

.jmb-lp .jmb-lot--premium .jmb-lot__sub--award {
    background: #fff;
    color: var(--gold-pr);
}

/* 景品の行（グレーの角丸ボックス＋テキスト） */
.jmb-lp .jmb-lot__prize {
    display: flex;
    align-items: center;
    gap: min(20px, calc((27 / 750) * 100vw));
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: min(22px, calc((29 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__prize {
        gap: 14px;
        margin-bottom: 9px;
    }
}

.jmb-lp .jmb-lot__prize .pic {
    /* PSD SP: 181x180px / radius20 / #f3f2f6 */
    flex: 0 0 auto;
    width: min(181px, calc((181 / 750) * 100vw));
    height: min(180px, calc((180 / 750) * 100vw));
    border-radius: min(20px, calc((20 / 750) * 100vw));
    background: var(--gbox);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jmb-lp .jmb-lot__prize .pic img {
    width: 60%;
    height: auto;
    display: block;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__prize .pic {
        /* PSD PC: 91x91px */
        width: 91px;
        height: 91px;
    }
}

.jmb-lp .jmb-lot__prize .name {
    /* PSD SP: 36px / bold / lh1.389 / #765810 / 左寄せ */
    font-weight: 700;
    font-size: min(36px, calc((36 / 750) * 100vw));
    line-height: 1.389;
    color: var(--prize);
    text-align: left;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__prize .name {
        /* PSD PC: 実効約18px / lh1.333 */
        font-size: 18px;
        line-height: 1.333;
    }
}

/* 「3個」＝ラベルより大きい数量表記 */
.jmb-lp .jmb-lot__prize .num {
    font-weight: 700;
    /* PSD SP: 約46px / lh1.043 / #765810 */
    font-size: min(46px, calc((46 / 750) * 100vw));
    line-height: 1.043;
    color: var(--prize);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__prize .num {
        /* PSD PC: 実効約24px / lh1.025 */
        font-size: 24px;
        line-height: 1.025;
    }
}

/* プレミアム：特典航空券の注記と写真 */
.jmb-lp .jmb-lot__caption {
    /* PSD SP: 24px / lh1.5 / 黒 */
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
    margin-bottom: min(12px, calc((16 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-lot__caption {
        /* PSD PC: 実効約12px / lh1.5 */
        font-size: 12px;
        margin-bottom: 10px;
    }
}

.jmb-lp .jmb-lot__photo {
    /* PSD SP: 600x350px（カード内幅いっぱい） */
    aspect-ratio: auto;
    background: none;
    border-radius: 0;
    margin: 0;
    line-height: 0;
}

.jmb-lp .jmb-lot__photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   7. JAL PLAZA チェックイン（赤・上に丸いノッチ）
   ========================================================= */
.jmb-lp .jmb-plaza {
    /* PSD SP: 見出しはセクション上端から52px下 */
    padding-top: 0;
    padding-bottom: min(60px, calc((80 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza {
        padding-bottom: 40px;
    }
}

.jmb-lp .jmb-plaza-top {
    display: block;
    position: relative;
    background: url(../img_sites/plaza_top_SP.png), var(--w);
    background-repeat: no-repeat, no-repeat;
    /* サブピクセル丸め対策：アーチ画像を1pxだけ下へずらし、
       拡大縮小で生じる最下行のアンチエイリアス（白の透け）を枠外に追い出す。 */
    background-position: center calc(100% + 1px), bottom center;
    background-size: 100% auto, 100% auto;
    height: max(82px, calc((82 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza-top {
        background: url(../img_sites/plaza_top_PC.png), var(--w);
        background-repeat: no-repeat, no-repeat;
        /* サブピクセル丸め対策（SPと同様に画像を1px下げる） */
        background-position: center calc(100% + 1px), bottom center;
        background-size: 1440px auto, 100% auto;
        height: 66px;
    }
}

/* 下辺の赤い下向き三角（PSD: 全幅 x 71px）
   ※ z-index:1 で次セクション（後ろのDOM＝上に描画される）より前面に出す */
.jmb-lp .jmb-plaza::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1;
    width: 100%;
    /* サブピクセル丸め対策：本体の下端と1px重ねる（top:100%のまま接するだけだと
       本体の背景と三角の上辺が同じ小数座標で別々に丸められ、白が透ける1pxの筋が出る）。
       重ねた分は height に +1px して見た目の三角の大きさを保つ。 */
    margin-top: -1px;
    height: calc(min(71px, calc((71 / 750) * 100vw)) + 1px);
    background: var(--red);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza::after {
        /* 1px重ねる分を加算 */
        height: 72px;
    }
}

/* 内容カラム（PSD SP: 680px / PC: 500px） */
.jmb-lp .jmb-inner>.jmb-plaza__body {
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-inner>.jmb-plaza__body {
        max-width: 500px;
    }
}

.jmb-lp .jmb-plaza__title {
    text-align: center;
    /* PSD SP: 52px / bold / lh1.269 / 白 */
    font-size: min(52px, calc((52 / 750) * 100vw));
    font-weight: 700;
    line-height: 1.269;
    margin-bottom: min(8px, calc((9 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__title {
        /* PSD PC: 28px / lh1.286 */
        font-size: 28px;
        line-height: 1.286;
        margin-bottom: 0;
    }
}

/* JAL PLAZA イメージ（PSD: グレー角丸ボックス 680x420 radius20 / PC 500x309） */
.jmb-lp .jmb-plaza__visual {
    background: #EFEFEF;
    border-radius: min(20px, calc((20 / 750) * 100vw));
    overflow: hidden;
    line-height: 0;
    margin-top: min(40px, calc((40 / 750) * 100vw));
}

.jmb-lp .jmb-plaza__visual img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__visual {
        border-radius: 20px;
        margin-top: 40px;
    }
}

.jmb-lp .jmb-plaza__desc {
    text-align: center;
    /* PSD SP: 30px / lh1.733 / 白 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    margin-top: min(40px, calc((64 / 750) * 100vw));
    margin-bottom: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__desc {
        /* PSD PC: 15px / lh1.733 */
        font-size: 15px;
        margin-top: 34px;
    }
}

/* 黒帯（PSD SP: 680x60px / PC: 500x40px） */
.jmb-lp .jmb-plaza__bar {
    background: #000;
    color: #fff;
    text-align: center;
    /* PSD SP: 32px / lh1.2 / 白 */
    font-size: min(32px, calc((32 / 750) * 100vw));
    line-height: 1.2;
    padding: min(11px, calc((11 / 750) * 100vw)) 0;
    margin-top: min(40px, calc((51 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__bar {
        /* PSD PC: 実効16px / 高さ40px */
        font-size: 16px;
        padding: 10px 0;
        margin-top: 20px;
    }
}

/* 「特典内容」帯は直下の白ボックスと隙間なし（PSD） */
.jmb-lp .jmb-plaza__bar--attached {
    margin-top: min(15px, calc((15 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__bar--attached {
        margin-top: 18px;
    }
}

.jmb-lp .jmb-plaza__shops {
    text-align: center;
    /* PSD SP: 30px / lh1.733 / 白 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    margin-top: min(30px, calc((29 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__shops {
        /* PSD PC: 15px */
        font-size: 15px;
        margin-top: 30px;
    }
}

/* 注記（PSD: ※のぶら下げインデント -25px） */
.jmb-lp .jmb-plaza__note {
    text-align: left;
    /* PSD SP: 24px / lh1.5 / 白 */
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    padding-left: min(25px, calc((25 / 750) * 100vw));
    text-indent: calc(-1 * min(25px, calc((25 / 750) * 100vw)));
    margin-top: min(4px, calc((4 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__note {
        /* PSD PC: 実効12px / lh1.5 */
        font-size: 12px;
        margin-top: 20px;
    }
}

/* 対象店舗の注記は PC で中央寄せ（PSD PC: text-align center / lh1.667） */
.jmb-lp .jmb-plaza__note--center {
    margin-top: min(4px, calc((4 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__note--center {
        text-align: center;
        line-height: 1.667;
        padding-left: 0;
        text-indent: 0;
        margin-top: 14px;
    }
}

/* 特典内容の白ボックス（PSD SP: 680x130px / PC: 501x81px） */
.jmb-lp .jmb-plaza__point {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: min(20px, calc((28 / 750) * 100vw));
    height: min(130px, calc((130 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__point {
        height: 81px;
        gap: 14px;
    }
}

.jmb-lp .jmb-plaza__point .num {
    /* PSD SP: 実効約51px / #c80019 / 斜体（matrixの傾き） */
    color: #C80019;
    font-size: min(51px, calc((51 / 750) * 100vw));
    line-height: 0.64;
    display: inline-block;
    transform: skewX(-8deg);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__point .num {
        /* PSD PC: 実効約31px */
        font-size: 31px;
    }
}

.jmb-lp .jmb-plaza__point .logo {
    /* 画像: JAL Pay ロゴ */
    width: min(315px, calc((315 / 750) * 100vw));
    height: auto;
    display: block;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__point .logo {
        width: 200px;
    }
}

.jmb-lp .jmb-plaza__point .unit {
    /* PSD SP: 実効約40px / bold / 黒 / lh1.582 */
    color: #000;
    font-weight: 700;
    font-size: min(40px, calc((40 / 750) * 100vw));
    line-height: 1.582;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__point .unit {
        /* PSD PC: 実効約24px / lh1.626 */
        font-size: 24px;
        line-height: 1.626;
    }
}

/* 白い下向き三角 ×3（PSD SP: 26x20px / PC: 14x11px） */
.jmb-lp .jmb-plaza__arrows {
    display: flex;
    justify-content: center;
    gap: min(10px, calc((10 / 750) * 100vw));
    margin-top: min(50px, calc((63 / 750) * 100vw));
}

.jmb-lp .jmb-plaza__arrows span {
    width: min(26px, calc((26 / 750) * 100vw));
    height: min(20px, calc((20 / 750) * 100vw));
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__arrows {
        gap: 4px;
        margin-top: 34px;
    }

    .jmb-lp .jmb-plaza__arrows span {
        width: 14px;
        height: 11px;
    }
}

/* 特典イメージの白ボックス（PSD SP: 680x554px radius30 / PC: 501x251px） */
.jmb-lp .jmb-plaza__benefit {
    position: relative;
    height: min(554px, calc((554 / 750) * 100vw));
    margin-top: min(32px, calc((40 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__benefit {
        border-radius: 30px;
        height: 251px;
        margin-top: 28px;
    }
}

.jmb-lp .jmb-plaza__cta {
    position: absolute;
    z-index: 1;
    /* PSD SP: ボックス左から60px / 上から96px */
    left: min(60px, calc((60 / 750) * 100vw));
    top: min(96px, calc((96 / 750) * 100vw));
    text-align: left;
    color: var(--red);
    font-weight: 700;
    /* PSD SP: 30px / bold / lh1.733 / 赤 */
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    margin: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__cta {
        /* PSD PC: 実効15px / lh1.6 */
        left: 30px;
        top: 46px;
        font-size: 15px;
        line-height: 1.6;
    }
}

/* お水／お菓子のグレー円（PSD: #f3f2f6） */
.jmb-lp .jmb-plaza__circle {
    position: absolute;
    border-radius: 50%;
    background: var(--gbox);
}

.jmb-lp .jmb-plaza__circle--water {
    /* PSD SP: 269x269 / ボックス左から394px / 上へ10px出る */
    width: min(269px, calc((269 / 750) * 100vw));
    height: min(269px, calc((269 / 750) * 100vw));
    left: min(394px, calc((394 / 750) * 100vw));
    top: calc(-1 * min(10px, calc((10 / 750) * 100vw)));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__circle--water {
        /* PSD PC: 137x138 / 左331px / 上へ5px */
        width: 137px;
        height: 138px;
        left: 331px;
        top: -5px;
    }
}

.jmb-lp .jmb-plaza__circle--sweets {
    /* PSD SP: 247x247 / ボックス左から306px / 上から269px */
    width: min(247px, calc((247 / 750) * 100vw));
    height: min(247px, calc((247 / 750) * 100vw));
    left: min(306px, calc((306 / 750) * 100vw));
    top: min(269px, calc((269 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-plaza__circle--sweets {
        /* PSD PC: 126x126 / 左216px / 上98px */
        width: 126px;
        height: 126px;
        left: 216px;
        top: 98px;
    }
}

/* =========================================================
   7-2. 参加方法（手順・グレー背景）
   ※ PSD: 5F 手順 / SP 750x2229・PC 1440x647 のモック実測に準拠
   ========================================================= */
.jmb-lp .jmb-howto {
    background: var(--gbox);
    /* PSD SP: 黒帯の上端まで139px（上のセクションの赤い三角71pxを避ける） */
    padding: min(139px, calc((139 / 750) * 100vw)) 0 min(101px, calc((101 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto {
        /* PSD PC: 上140px / 下101px */
        padding: 140px 0 101px;
    }
}

/* 手順カード（SP=縦3枚 / PC=横3枚） */
.jmb-lp .jmb-inner>.jmb-howto__list {
    display: grid;
    grid-template-columns: 1fr;
    /* PSD SP: カード間60px（間に▼が入る） */
    gap: min(60px, calc((60 / 750) * 100vw));
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-inner>.jmb-howto__list {
        /* PSD PC: 340px x3 + gap39（＝1098px）だが、
           .jmb-inner の左右paddingを越えないよう max-width の上限としてのみ扱い、
           実幅は inner の内側（100%）に収める。 */
        grid-template-columns: repeat(3, 1fr);
        gap: 39px;
        width: 100%;
        max-width: 1098px;
        margin-inline: auto;
        align-items: stretch;
    }
}

.jmb-lp .jmb-howto__item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* カード間の赤い三角（SP=下向き / PC=右向き） */
.jmb-lp .jmb-howto__item:not(:last-child)::after {
    content: "";
    position: absolute;
    background: var(--red);
    /* PSD SP: 26x20px・カード間60pxの中央 */
    width: min(26px, calc((26 / 750) * 100vw));
    height: min(20px, calc((20 / 750) * 100vw));
    left: 50%;
    top: calc(100% + min(20px, calc((20 / 750) * 100vw)));
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__item:not(:last-child)::after {
        /* PSD PC: 11x14px・カード間39pxの中央・右向き */
        width: 11px;
        height: 14px;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}

/* 番号＋説明の見出し部 */
.jmb-lp .jmb-howto__head {
    display: flex;
    align-items: flex-start;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__head {
        /* PSD PC: 見出し部の高さ98px（3枚の画像枠の上端を揃える） */
        min-height: 78px;
    }
}

/* 赤い番号バッジ（PSD SP: 90x90 / PC: 45x45・カード左上に密着） */
.jmb-lp .jmb-howto__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    width: min(90px, calc((90 / 750) * 100vw));
    height: min(90px, calc((90 / 750) * 100vw));
    /* PSD SP: 48px / lh1.542 / 白 */
    font-size: min(48px, calc((48 / 750) * 100vw));
    line-height: 1.542;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__num {
        /* PSD PC: 45x45 / 実効24px */
        width: 45px;
        height: 45px;
        font-size: 24px;
    }
}

.jmb-lp .jmb-howto__text {
    /* PSD SP: 30px / lh1.733 / 黒(rgb(0,0,0)) / 左寄せ。バッジ右に30px空け、上26px下43px */
    color: #000;
    text-align: left;
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
    padding: min(26px, calc((26 / 750) * 100vw)) min(25px, calc((25 / 750) * 100vw)) min(43px, calc((43 / 750) * 100vw)) min(30px, calc((30 / 750) * 100vw));
    margin: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__text {
        /* PSD PC: 実効15px(741～1250pxでは文字縮小させる) / 上13px / 左17px（バッジ45+17=62px） */
        font-size: min(15px, calc((9 / 750) * 100vw));
        padding: 13px 10px 0 17px;
    }
}

/* 画像エリア（白地の内側にグレーのプレースホルダー） */
.jmb-lp .jmb-howto__shot {
    flex: 1 1 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    /* PSD SP: 左右25px */
    padding: 0 min(25px, calc((25 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__shot {
        /* PSD PC: 左右10px */
        padding: 0 10px;
    }

    .jmb-lp .jmb-howto__item.howto_03 .jmb-howto__shot {
        width: 82%;
        margin: 0 auto;
    }
}

/* グレーのプレースホルダー（PSD: 黒20%＝#ccc / SP 630x363 / PC 320x185） */
.jmb-lp .jmb-howto__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 630 / 363;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-weight: 700;
    text-align: center;
    /* PSD SP: 48px / bold / 白 / lh1.542 */
    font-size: min(48px, calc((48 / 750) * 100vw));
    line-height: 1.542;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-howto__ph {
        /* PSD PC: 320x185 / 実効22px / lh1.713 */
        aspect-ratio: 320 / 185;
        font-size: 22px;
        line-height: 1.713;
    }
}

/* =========================================================
   支援技術にだけ伝えるテキスト（2026-08-06）
   ※ 目には見えないがスクリーンリーダーは読み上げる。
     display:none / visibility:hidden にすると読み上げからも消えるため、
     1px に縮めて切り抜く従来からの手法を使う。
     カルーセルの操作説明と現在位置の通知に使用している。

   ★ クラス名を2回重ねているのは特異度を上げるため。
     .jmb-inner の直下に置くと
     `.jmb-lp .jmb-inner>*:not(.jmb-bar) { width: 100% }`（クラス3つ）に
     負けて width が 100% になってしまう。
     !important を使わずに勝たせる書き方として重ね掛けにしている。
   ========================================================= */
.jmb-lp .jmb-sr-only.jmb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   装飾記号「※」（指摘NO.18）
   ※ 図形では表現できない字形のため content で描画し、
     HTMLのテキストからは除外している（テキスト情報に記号を含めない）。
   ========================================================= */
.jmb-lp .jmb-month__note::before,
.jmb-lp .jmb-plaza__note::before,
.jmb-lp .jmb-notes__sub::before,
.jmb-lp .jmb-howto__ph::before {
    content: "※";
}

/* =========================================================
   リンク・ボタンのホバー／フォーカス（指摘NO.1）
   ※「クリッカブルであること」を色の変化・下線で示し、
     キーボード操作時は :focus-visible で輪郭を出す。
   ========================================================= */
.jmb-lp a,
.jmb-lp button {
    transition: opacity .2s ease, color .2s ease, background-color .2s ease;
}

/* キーボードフォーカス時の見え方（全環境で有効にする）
   ※ :focus-visible はタッチ端末で外付けキーボードを使う場合にも必要なので
     @media (hover: hover) の外に置く。 */
.jmb-lp .jmb-install:focus-visible {
    opacity: .8;
}

.jmb-lp .jmb-article__link:focus-visible {
    opacity: .8;
    text-decoration: underline;
}

.jmb-lp .jmb-notes__link:focus-visible {
    opacity: .7;
}

/* ホバー時の見え方（2026-08-06：hover可能なデバイス限定に変更）
   ※ タッチ端末ではタップ後に :hover が居座り、
     「色が薄いまま／下線が出たまま」になって
     押しても何も変わっていないように見えてしまうため。
     .jmb-prize-nav と同じ扱いに揃えた。 */
@media (hover: hover) {
    /* CVボタン（画像ボタン）：ホバーで色を薄く */
    .jmb-lp .jmb-install:hover {
        opacity: .8;
    }

    /* テキストリンク：ホバーで下線＋色を薄く */
    .jmb-lp .jmb-article__link:hover {
        opacity: .8;
        text-decoration: underline;
    }

    /* 既に下線があるリンクは色を薄くして変化を示す */
    .jmb-lp .jmb-notes__link:hover {
        opacity: .7;
    }
}

/* キーボードフォーカスの可視化（マウス操作時は出さない） */
.jmb-lp a:focus-visible,
.jmb-lp button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================
   8. ご注意事項 + インストールCTA
   ========================================================= */
/* PSD: セクション上端から黒帯まで80px（SP/PC共通） */
.jmb-lp .jmb-notes {
    padding-top: min(80px, calc((80 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes {
        padding-top: 80px;
    }
}

/* 賞品積算時期のブロック（PSD SP: 本文の下に96px / PC: 64px） */
.jmb-lp .jmb-notes__block {
    margin: 0 auto min(72px, calc((96 / 750) * 100vw));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__block {
        margin-bottom: 64px;
    }
}

/* 「＜〜＞」の小見出し行（2026-08-06 テキスト修正で追加）
   ※ 見出し要素（h3/h4）にはしない。JALご支給の「見出し構造」シートでは
     ここは [H2] 賞品積算時期 の下に見出しを持たない構成のため、
     見出しレベルを増やすと承認済みの構造から外れてしまう。
   ※「＜」「＞」は装飾目的の記号なのでHTMLのテキストには入れず、
     「※」「■」と同じ扱いで CSS の content で描画する。 */
.jmb-lp .jmb-notes__group {
    color: #000;
    text-align: left;
    font-weight: 700;
    font-size: min(30px, calc((30 / 750) * 100vw));
    line-height: 1.733;
}

.jmb-lp .jmb-notes__group::before {
    content: "＜";
}

.jmb-lp .jmb-notes__group::after {
    content: "＞";
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__group {
        font-size: 15px;
        line-height: 1.867;
    }
}

/* 賞品積算時期の箇条書き。
   「・」で疑似的に並べるのではなく ul/li でマークアップし、
   記号自体は CSS で描く（ご注意事項の箇条書きと同じ方針）。 */
.jmb-lp .jmb-notes__terms {
    margin-bottom: min(32px, calc((44 / 750) * 100vw));
}

.jmb-lp .jmb-notes__terms:last-child {
    margin-bottom: 0;
}

/* 入れ子（8月当選分／9月当選分）は親の「・」ぶん1段下げる */
.jmb-lp .jmb-notes__terms--nest {
    padding-left: 1em;
    margin-bottom: 0;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__terms {
        margin-bottom: 22px;
    }
}

/* 行頭の記号（PSD SP: 30px / lh1.733・PC: 15px / lh1.867） */
/* 2026-08-06：テキスト修正にともない「■」から「・」に変更。
   装飾記号はテキストに含めずCSSで描画する方針は据え置き。
   円＋左右余白の合計を1em（＝「・」の字幅）にして、
   折り返した2行目以降と文字の開始位置がそろうようにしている。 */
.jmb-lp .jmb-notes__item::before {
    content: "";
    display: inline-block;
    width: .26em;
    height: .26em;
    margin: 0 .37em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: .28em;
}

.jmb-lp .jmb-notes__item {
    color: #000;
    text-align: left;
    font-size: min(30px, calc((30 / 750) * 100vw));
    /* reset.css の li{line-height:1} を打ち消す値でもある */
    line-height: 1.733;
    /* 「・」のぶら下げインデント */
    padding-left: 1em;
    text-indent: -1em;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__item {
        font-size: 15px;
        line-height: 1.867;
    }
}

/* 「※」始まりの注記（PSD SP: 24px / lh1.5・PC: 12px / lh1.667） */
.jmb-lp .jmb-notes__sub {
    color: #000;
    text-align: left;
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    padding-left: min(24px, calc((24 / 750) * 100vw));
    text-indent: calc(-1 * min(24px, calc((24 / 750) * 100vw)));
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__sub {
        font-size: 12px;
        line-height: 1.667;
        padding-left: 12px;
        text-indent: -12px;
    }
}

/* 「こちら」＝リンク（PSD: 下線あり／文字色 rgb(76,85,155)） */
.jmb-lp .jmb-notes__link {
    color: #4C559B;
    text-decoration: underline;
}

/* ご注意事項の箇条書き（PSD SP: 24px / lh1.5・PC: 12px / lh1.667・黒） */
.jmb-lp .jmb-notes__list {
    width: 100%;
    margin: 0 auto min(32px, calc((44 / 750) * 100vw));
    font-size: min(24px, calc((24 / 750) * 100vw));
    line-height: 1.5;
    color: #000;
    text-align: left;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__list {
        font-size: 12px;
        line-height: 1.667;
    }
}

/* 装飾記号「・」はテキストに含めずCSSで描画（アクセシビリティ/SEO）。
   円＋左右余白の合計を1em（＝旧「・」の字幅）にする。 */
.jmb-lp .jmb-notes__list li::before {
    content: "";
    display: inline-block;
    width: .26em;
    height: .26em;
    margin: 0 .37em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: .28em;
}

.jmb-lp .jmb-notes__list li {
    /* PSD: 「・」のぶら下げインデント（PC -15px相当） */
    padding-left: min(24px, calc((24 / 750) * 100vw));
    text-indent: calc(-1 * min(12px, calc((12 / 750) * 100vw)));
    /* reset.css の li{line-height:1} を打ち消し、ul の行間（PSD値）を継承させる */
    line-height: inherit;
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-notes__list li {
        padding-left: 12px;
        text-indent: -6px;
    }
}

/* 「●」を出さない項目（指摘NO.20）
   前の項目からの続きの文（「なお、〜」）なので記号を付けない。
   ★ ::before ごと消さずに visibility: hidden で「見えなくする」だけにしている。
     display: none や content 削除では ::before のボックス（幅1em）が無くなり、
     行頭の位置が他の項目とズレてしまうため。
     これなら記号ぶんのスペースが残り、文字の開始位置が他の項目と完全に一致する。 */
.jmb-lp .jmb-notes__list li.no-mark::before {
    visibility: hidden;
}

.jmb-lp .jmb-install {
    /* 追従ボタン：ページ表示時から常時表示（指摘NO.25／2026-08-04）

       2026-08-11 デザイン・動作変更
       ・切替は **1240px**（`.pcView`/`.spView` は 740/741px 切替なので使えず、
         `.jmb-install__pc` / `.jmb-install__sp` を新設した）
       ・≤1240px … 横長バーを **画面幅いっぱい・ブラウザ最下部**に敷く
       ・≥1241px … 円形バッジを右下に浮かせる

       縦位置（指摘NO.24／2026-08-04）
       ・通常 … ブラウザ最下部（bottom: 0）。
       ・同意バナー表示中 … base.js が --cta-bottom を上書きしてバナーの真上へ持ち上げる。
         バナーの高さは画面幅で変わるため固定値ではなく毎回実測した値を入れている。

       ★ セーフエリアの余白は入れないこと（2026-08-28）
         以前は padding-bottom: env(safe-area-inset-bottom) を入れていたが、
         iOS Safari は「下部ツールバーが出ている間は 0 / スクロールで畳まれると 34px」と
         env() の値そのものが変動するため、**スクロールしただけでバーの高さが
         43px→77px（1.8倍）に伸びる**不具合になっていた。
         参考にしたJALウォーターの .floatingcvBtn もセーフエリアの指定は持っていない。
         バー自体が下端まで届く黒帯なので、ホームバーは黒の上に重なるだけで問題ない。 */
    position: fixed;
    z-index: 100;
    --cta-gap: min(80px, calc((160 / 750) * 100vw));
    left: 0;
    right: 0;
    bottom: var(--cta-bottom, 0px);
    width: 100%;
    line-height: 0;
    /* バー画像は不透明な黒（実測 rgb(0,0,0)）。下端まで黒で埋める */
    background-color: #000;
    /* 光の帯をバーの内側だけに見せる */
    overflow: hidden;
}

/* 画像の出し分け（切替は960px）
   ※ 後続の `.jmb-lp .jmb-install img { display: block }` に負けないよう、
     img を含めて特異度を上げている。 */
.jmb-lp .jmb-install img.jmb-install__pc {
    display: none;
}

/* ≤1240px のバー（2026-08-11：PNG1枚からCSS組みに変更）
   JALウォーターの .floatingcvBtn / .btn と同じ作りに合わせている。
   背景色は #c00 ではなく **#000** の指定。
   文字を実テキストにしたことで、
   ・画面幅が広くてもぼやけない（画像の解像度に縛られない）
   ・バーの高さが中身で決まるので、全幅に引き伸ばして分厚くならない
   ・読み上げ名が実テキストになる（アイコン・矢印は装飾なので alt="") */
.jmb-lp .jmb-install__sp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    /* PSD SP(750px基準): 上下20px / 左右35px */
    padding: min(20px, calc((20 / 750) * 100vw)) min(35px, calc((35 / 750) * 100vw));
    /* アイコンと文字の間隔（PSD: 30px） */
    gap: min(30px, calc((30 / 750) * 100vw));
    color: var(--w);
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
}

/* アプリアイコン（PSD: 60×60px） */
.jmb-lp .jmb-install .jmb-install__icon {
    flex: none;
    width: min(60px, calc((60 / 750) * 100vw));
    height: auto;
}

/* 文字（PSD: 34px相当） */
.jmb-lp .jmb-install__txt {
    font-size: min(34px, calc((34 / 750) * 100vw));
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* 矢印（PSD: 46×46px・右端から35px）
   文字を中央に置いたまま右端に固定したいので絶対配置にする。 */
.jmb-lp .jmb-install .jmb-install__arrow {
    position: absolute;
    top: 50%;
    right: min(35px, calc((35 / 750) * 100vw));
    transform: translateY(-50%);
    width: min(46px, calc((46 / 750) * 100vw));
    height: auto;
}

.jmb-lp .jmb-install img {
    width: 100%;
    height: auto;
    display: block;
}

/* ※旧 .is-visible（FV通過で表示）は廃止。常時表示のため不要になった（指摘NO.25） */

/* --- CTAの「キラキラ」：斜めの光を走らせる -----------------------------------
   ★ WCAG 2.2.2 / JALアクセシビリティチェック
     「コンテンツの動き、点滅、スクロールが自動的に開始して5秒よりも長く続く場合、
       必要に応じてユーザーが停止、一時停止または非表示できる」
     への対応として、**合計4.4秒（2.2s × 2回）で必ず止まる**設計にしている。
     5秒を超えないため停止UIを追加せずに要件を満たせる。
     ボタンはFV通過で表示され、スクロールで再表示されるたびに光り直すので
     「時々光る」印象は保てる。
   ★ 常時ループさせたい場合は停止ボタンの追加が必要（下のコメント参照）。
   ★ ホバーではなく自動再生。pointer-events: none でリンクのタップを妨げない。
--------------------------------------------------------------------------- */
.jmb-lp .jmb-install::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 光の帯の幅（ボタン幅に対する比） */
    width: 40%;
    pointer-events: none;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .55) 50%,
            rgba(255, 255, 255, 0) 100%);
    /* 待機位置＝ボタンの左外側 */
    transform: translateX(-150%);
}

@media (prefers-reduced-motion: no-preference) {
    .jmb-lp .jmb-install::after {
        /* 2.2s × 2回 ＝ 4.4秒で終了（5秒未満）
           ※常時ループにする場合は infinite にし、停止ボタンを別途用意すること */
        animation: jmb-cta-shine 2.2s ease-in-out 2;
    }
}

@keyframes jmb-cta-shine {

    /* 左外 → 右外へ走らせる。
       前半（0〜45%＝720ms）で通過し、後半は待機して間隔を空ける。
       transform なのでレイアウトも走らず、合成レイヤで完結する。 */
    0% {
        transform: translateX(-150%);
    }

    45%,
    100% {
        transform: translateX(350%);
    }
}

@media screen and (min-width: 1241px) {
    .jmb-lp .jmb-install {
        /* 円形バッジを右下に浮かせる（2026-08-11）
           バー用に敷いていた全幅・黒背景・下端張り付きを解除する。 */
        left: auto;
        right: 80px;
        /* セーフエリアは足さない（→ 上の .jmb-install のコメント参照）。
           env() は iPadOS でも下部ツールバーの開閉で値が変わり、
           スクロールのたびにバッジが上下してしまう。
           バッジは下端から80px浮いているのでホームバーとは元々干渉しない。 */
        bottom: var(--cta-bottom, var(--cta-gap));
        /* 画像の原寸（101×122px） */
        width: 101px;
        background-color: transparent;
        /* バッジは「黒い円＋上に飛び出したアプリアイコン」の不定形。
           矩形や角丸でクリップすると角が欠けるため、クリップしない。 */
        overflow: visible;
        /* 1441px以上で .jmb-lp にかかる zoom を打ち消し、
           画面幅に関わらず 101px のまま表示する（指摘NO.31）。
           base.js が --jmb-unzoom（= 1 / zoom）を設定する。
           1440px以下では変数が無いので 1（＝等倍）になる。 */
        zoom: var(--jmb-unzoom, 1);
    }

    .jmb-lp .jmb-install img.jmb-install__pc {
        display: block;
    }

    .jmb-lp .jmb-install__sp {
        display: none;
    }

    /* 光の帯はクリップできない形状のため、バッジでは出さない */
    .jmb-lp .jmb-install::after {
        display: none;
    }
}

@media screen and (min-width: 741px) {
    .jmb-lp .jmb-prizes .jmb-head {
        font-size: 18px;
    }
}

html body #wrapper .contents .contentsInr.aem-Grid.aem-Grid--12 {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   アクセシビリティ共通
   1) フォーカス可視化（:focus-visible）
   2) prefers-reduced-motion（アニメ・トランジション抑制）
   ========================================================= */
/* 1) キーボードフォーカスの可視化（マウス時は出さない）
   outlineはoverflow:hiddenでもクリップされないため採用。
   明るい背景での視認性を確保（濃い青 #005fcc は白地で約5:1）。 */
.jmb-lp a:focus-visible,
.jmb-lp button:focus-visible,
.jmb-lp [tabindex]:focus-visible,
.jmb-lp input:focus-visible,
.jmb-lp select:focus-visible,
.jmb-lp textarea:focus-visible,
.jmb-lp summary:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 旧ブラウザ/フォールバック（:focus-visible非対応時も最低限出す） */
.jmb-lp a:focus,
.jmb-lp button:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* :focus-visible対応ブラウザではマウスフォーカスのoutlineを消す */
.jmb-lp a:focus:not(:focus-visible),
.jmb-lp button:focus:not(:focus-visible) {
    outline: none;
}

/* モーション低減時は中央拡大もしない（base.js側でも発火を止めている） */
@media (prefers-reduced-motion: reduce) {
    .jmb-lp .jmb-prize.is-center {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jmb-lp * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jmb-lp *::before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jmb-lp *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}