@charset "utf-8";
/* ============================================================
   #2484 侍ジャパン 出品・成約キャンペーン 詳細ページ

   共通ヘッダ・フッタ・パンくずは Layout/default.blade.php に乗せ、
   本文だけこのファイルで組む。default.css に引きずられないよう
   セレクタは全て .cp_ 接頭辞で閉じている。

   色・角丸・余白は default.css の :root で定義済みのデザイン
   トークン (--c-green 等) を使う。生の値はキャンペーン固有の
   色 (MVの紺・第2弾の金) だけに留める。
   ============================================================ */

.cp{
    /* MV と最終CTA は本文より外に張り出させるため、左右の余白は各要素で持つ */
    padding: 0 0 40px;
    color: var(--c-text);
    /* 支給デザインは全体に文字が大きく、密度の高いチラシ的な組み方 */
    font-size: 16px;
    line-height: 1.6;
}

/* -- キャンペーン固有の色 -- */
.cp{
    /* 見出し・小見出しの濃紺。支給デザインの実測が #000057〜#000068 で、
       そのままだと青みが強く本文(#333)と喧嘩するため僅かに寄せた */
    --cp-ink:        #10205e;
    --cp-navy:       #0b2f6b;
    --cp-navy-light: #1553b0;
    --cp-blue:       #1f63c4;  /* 第1弾・既存枠 */
    --cp-blue-tint:  #eef4fd;
    --cp-gold:       #b3873a;  /* 第2弾 */
    --cp-gold-tint:  #fdf8ee;
    --cp-red:        #d10000;  /* 数字の強調 */
}

/* ============================================================
   アイコン (支給デザインから切り出した PNG)
   高さは Blade 側の style="height" で指定し、幅は縦横比で決める
   ============================================================ */
.cp_icon{
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* ============================================================
   共通ボタン
   ============================================================ */
.cp_btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 44px 8px 20px;
    position: relative;
    border-radius: var(--r-sm);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--sh-1);
    transition: background-color .15s, color .15s, border-color .15s;
}
.cp_btn__sub{
    font-size: 14px;
    font-weight: 700;
}
/* 右端の「＞」。文字量に関わらず同じ位置に置く */
.cp_btn::after{
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    top: 50%;
    right: 20px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
}
.cp_btn--primary{
    background: var(--c-green-dark);
    color: #fff;
}
.cp_btn--primary:hover{
    background: var(--c-green-hover);
    color: #fff;
}
.cp_btn--ghost{
    background: #fff;
    color: var(--c-green-dark);
    border: 2px solid var(--c-green-dark);
}
.cp_btn--ghost:hover{
    background: var(--c-green-tint);
    color: var(--c-green-dark);
}
.cp_btn--wide{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* ============================================================
   ① ファーストビュー
   ============================================================ */
/* 支給の背景素材 (左が白、右へ向かって青) を敷く。
   文字は白い左半分に置くので、白抜きではなく濃紺で組む */
.cp_mv{
    position: relative;
    margin-bottom: 10px;
    padding: 22px 28px 24px;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #f4f8ff;
    color: var(--cp-ink);
}
.cp_mv__bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.cp_mv__bg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: right center;
       object-position: right center;
}
.cp_mv__body{
    position: relative;
    z-index: 2;
    /* 見出し「期間限定 出品・成約キャンペーン」が折り返すと
       MV が無駄に高くなるので、1行で収まる幅を確保する */
    max-width: 700px;
}
.cp_mv__brand{
    margin: 0 0 10px;
}
/* 白地に置くので支給ロゴをそのまま使う */
.cp_mv__brand img{
    height: 26px;
    width: auto;
}
.cp_mv__ttl{
    margin: 0 0 12px;
    padding-bottom: 12px;
    position: relative;
    white-space: nowrap;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
}
/* 見出し下の短い緑線 (支給デザイン) */
.cp_mv__ttl::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68px;
    height: 3px;
    background: var(--c-green-dark);
}
.cp_mv__lead{
    margin: 0 0 14px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
}
/* 賞品名は緑で起こす (支給デザインに合わせる) */
.cp_mv__lead em{
    display: block;
    margin-top: 2px;
    color: var(--c-green-dark);
    font-size: 34px;
    font-style: normal;
    line-height: 1.34;
}
.cp_mv__term{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 4px;
}
.cp_mv__term-label{
    font-size: 16px;
    font-weight: 700;
}
.cp_mv__term-date{
    font-size: 29px;
    font-weight: 700;
    letter-spacing: .02em;
}
.cp_mv__term-date small{
    font-size: 15px;
}
.cp_mv__note{
    margin: 0 0 20px;
    color: var(--c-text-sub);
    font-size: 12px;
}
.cp_mv__cta{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_mv__cta > li{
    -webkit-box-flex: 0;
        -ms-flex: 0 1 260px;
            flex: 0 1 260px;
}
.cp_mv__cta .cp_btn{
    width: 100%;
}
/* 選手ビジュアル。テキストに重ならないよう右半分に置く */
.cp_mv__visual{
    position: absolute;
    right: -2%;
    bottom: 0;
    z-index: 1;
    width: 64%;
    max-width: 900px;
    pointer-events: none;
}
.cp_mv__players{
    display: block;
    width: 100%;
    height: auto;
}
/* 権利表記は背景の青い側に載るので白のまま。影で可読性を確保する */
.cp_mv__copy{
    position: absolute;
    right: 12px;
    bottom: 8px;
    z-index: 3;
    margin: 0;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* -- ログイン前トップのヒーロースライドとして使うとき --
   .cp を通さないので色変数をここでも持たせる。高さは隣のスライド
   (.top_hero) と揃え、slick の adaptiveHeight で跳ねないようにする */
.cp_mv--slide{
    --cp-ink:        #0b1338;
    --cp-navy:       #0b2f6b;
    --cp-navy-light: #1553b0;
    --c-green-dark:  #2f7d20;
    --c-green-hover: #4f9429;
    --c-green-tint:  #f1f8ec;
    --r-sm:          4px;
    --r-md:          6px;
    --sh-1:          0 1px 2px rgba(20, 28, 16, .06);
    min-height: 431px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 0;
    /* slick は初期化時にスライドの幅を測ってインラインで書き込む。
       ここで左右 padding を持つと、その分だけ太った幅 (1440+144=1584px)
       が書き込まれ、スライドが左にはみ出して文字が矢印の下に潜る。
       左右の逃げは内側 (.cp_mv__body) に持たせ、ここは上下だけにする */
    padding: 28px 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/* 左右は slick の矢印 (left:16px + 40px = 56px) の内側に収める */
/* #2484 矢印は前後のスライドを覗かせた部分 (SP はスライドの下の行) に出るようになり、
   文字とは重ならない。業務の指定で左の余白はスライド幅の 3% にする */
.cp_mv--slide .cp_mv__body{
    margin-left: 3%;
    margin-right: 3%;
}
/* SP は PC レイアウトのまま縮小して見せる (.hero_slider--scaled) ので、上下左右の余白も PC と同じにする。
   キャンペーンページ用の SP の余白 (.cp_mv の padding: 20px 16px) が効くと、左が 3% + 16px になっていた */
@media screen and (max-width: 899px){
    .hero_slider--scaled .cp_mv--slide{
        padding: 28px 0;
    }
}
/* #2484 centerMode でスライドの幅が狭くなると、背景を右寄せで敷いたときに
   青い側だけが残り、濃紺の文字が埋もれて読めなくなる。
   スライドでは白い左側が必ず入るよう左寄せにする */
.cp_mv--slide .cp_mv__bg img{
    -o-object-position: left center;
       object-position: left center;
}
/* 幅が狭いぶん選手が文字側へ寄ってきて、日付と CTA に重なる (実測)。
   スライドでは選手を小さく・右端に寄せて、文字の領域を空ける */
/* 選手は大きく見せたいが、大きくすると日付の「（火）」に重なる (実測32px)。
   右下へ寄せて、文字の領域を空けたまま大きくする */
.cp_mv--slide .cp_mv__visual{
    right: 2%;
    width: 66%;
    max-width: 840px;
}

/* 文字は選手の手前に置く。選手を大きくすると日付や賞品名に重なるが、
   キャンペーン期間は読めないと困るので、白い下地を敷いて前面に出す */
.cp_mv--slide .cp_mv__body{
    position: relative;
    z-index: 2;
}
/* 期間の行は選手の上に載るため、背景を敷いて必ず読めるようにする */
.cp_mv--slide .cp_mv__term,
.cp_mv--slide .cp_mv__note{
    position: relative;
    z-index: 3;
}
.cp_mv--slide .cp_mv__term{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 2px 12px 2px 0;
    border-radius: var(--r-sm);
    /* 右へ向かって消える白。文字の後ろだけ白く、絵とはなじませる */
    background: -webkit-linear-gradient(left, rgba(255,255,255,.92) 0%, rgba(255,255,255,.92) 82%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,.92) 0%, rgba(255,255,255,.92) 82%, rgba(255,255,255,0) 100%);
}
/* 1行だと日付の「（火）」が左端の選手の顔に重なる (実測: 文字の右端 562px / 顔の左端 495px)。
   顔の上には文字を置かないので、ラベルを上の段にして日付を左端から始める。
   幅が縮んだぶん後ろの注記 (inline-block) が横に回り込むので、ブロックにして行を分ける */
.cp_mv--slide .cp_mv__term{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 0;
    padding-top: 4px;
    line-height: 1.25;
}
.cp_mv--slide .cp_mv__note{
    margin-bottom: 14px;
}
.cp_mv--slide .cp_mv__note{
    display: inline-block;
    padding: 1px 14px 1px 0;
    background: -webkit-linear-gradient(left, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 78%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.9) 78%, rgba(255,255,255,0) 100%);
}
.cp_mv--slide .cp_mv__ttl{
    font-size: 36px;
}
@media screen and (max-width: 1200px){
    /* スライドは左右に矢印の逃げがあるぶん狭い。溢れるより折り返す */
    .cp_mv--slide .cp_mv__ttl:not(.hero_slider--scaled *){ white-space: normal; }
}
/* 権利表記は必ず出す。右端で切れないよう矢印の内側に置く */
.cp_mv--slide .cp_mv__copy{
    right: 56px;
    bottom: 10px;
}
.cp_mv__slide-cta{
    margin: 4px 0 0;
}
/* #2484 ログイン後のスライドは CTA が2つ (出品 / 詳細)。
   業務の指定でボタンを大きくし (約 1.5 倍)、スライドの一番下に横並びで置く
   (配置はスライド全体の組み (.cp_mv--member) 側で決める)。
   ボタン内の「＞」は slick の矢印と同じ位置に来て隠れるので出さない */
.cp_mv__cta--slide{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 16px;
}
.cp_mv__cta--slide > li{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 360px;
            flex: 0 0 360px;
}
.cp_mv__cta--slide .cp_btn{
    /* SP だけ .cp_btn が border-box になり大きさがずれていたので、どの幅でも border-box で持つ */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* #2484 業務の指定で文字を大きくする (25px → 32px)。
       右の列の最小幅 (421px) に「キャンペーン詳細を見る」(約 352px + 余白 48px) が収まる大きさ */
    min-height: 76px;
    padding: 12px 24px;
    font-size: 32px;
}
.cp_mv__cta--slide .cp_btn::after{
    content: none;
}
.cp_mv__slide-cta .cp_btn{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: 300px;
}
@media screen and (max-width: 899px){
    .cp_mv--slide:not(.hero_slider--scaled *){
        min-height: 0;
        /* 左右 padding を持たせると slick が太った幅を書き込むため、ここは上下だけ。
           .cp_mv の SP 指定 (padding: 20px 16px 22px) を打ち消す必要がある。
           打ち消さないと slick が 312+16*2=344px を書き込み、
           幅の違うスライドが混ざって後続が 32px ずれる (実測)。
           選手は文字の下に流し込むので、下の余白は要らない */
        padding: 20px 0 0 !important;
    }
    /* SP の逃げ。矢印は左6px + 幅32px = 38px まで入ってくるので、
       本文はその外側に置く。22px まで詰めたら日付と注記が矢印に
       重なった (実測 390px/360px とも) */
    .cp_mv--slide .cp_mv__body:not(.hero_slider--scaled *){
        margin-left: 42px;
        margin-right: 42px;
    }
    .cp_mv--slide .cp_mv__ttl:not(.hero_slider--scaled *){
        font-size: 23px;
    }
    .cp_mv__slide-cta:not(.hero_slider--scaled *){
        /* slick の矢印 (6px + 32px) の内側に収める */
        padding: 0 8px;
    }
    .cp_mv__slide-cta .cp_btn:not(.hero_slider--scaled *){
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        min-width: 0;
        /* ボタン内の「＞」は slick の next 矢印と同じ位置に来て隠れるため、
           スライド上では出さずラベルを中央に置く */
        padding: 10px 18px;
    }
    .cp_mv__slide-cta .cp_btn:not(.hero_slider--scaled *)::after{
        content: none;
    }
    /* スライドは高さが決まっているので、選手は下端に絶対配置のまま出す */
    /* SP は幅が狭く、選手を下端に絶対配置すると CTA に重なる (実測)。
       文字の下に流し込んで、重ならないようにする */
    .cp_mv--slide .cp_mv__visual:not(.hero_slider--scaled *){
        position: relative;
        right: auto;
        bottom: auto;
        width: calc(100% + 84px);
        max-width: none;
        margin: 8px -42px -20px;
        opacity: 1;
    }
    /* 権利表記は左下へ。右下だと slick の next 矢印に重なって切れる。
       選手写真 (青い側) の上に載るので白のまま */
    .cp_mv--slide .cp_mv__copy:not(.hero_slider--scaled *){
        right: auto;
        left: 10px;
        bottom: 6px;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
}

/* ============================================================
   ② 4つの要点
   ============================================================ */
.cp_merit{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
        grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.cp_merit__item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 12px;
    padding: 10px 10px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-1);
}
.cp_merit__icon{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    line-height: 1;
}
/* 支給デザインはアイコン・文字とも大きく、要点として目立たせている */
.cp_merit__text{
    color: var(--cp-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}
.cp_merit__text strong{
    font-size: 21px;
}
/* 「0円」は要点の主役なので一段大きい。
   .cp_merit__text strong と同詳細度で後勝ちしていたため強めに指定する */
.cp_merit__text .cp_merit__strong{
    display: block;
    font-size: 40px;
    line-height: 1.05;
}
.cp_merit__text .cp_merit__strong small{
    font-size: 21px;
}

/* ============================================================
   カードの並び (2カラム)
   ============================================================ */
.cp_grid{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 16px 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    margin-bottom: 12px;
}
.cp_card{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-1);
}
.cp_card__body{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 12px 14px 14px;
}
.cp_card__lead{
    margin: 0 0 10px;
    font-size: 16px;
}
.cp_card__cta{
    margin: 12px 0 0;
    text-align: center;
}

/* -- カード見出し -- */
.cp_card__head{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}
.cp_card__head--stage1{
    background: -webkit-linear-gradient(left, #123f8e 0%, var(--cp-blue) 100%);
    background: linear-gradient(90deg, #123f8e 0%, var(--cp-blue) 100%);
    color: #fff;
}
.cp_card__head--stage2{
    background: -webkit-linear-gradient(left, #8d6524 0%, #d8b271 100%);
    background: linear-gradient(90deg, #8d6524 0%, #d8b271 100%);
    color: #fff;
}
/* 「第1弾」「第2弾」の札。右に細い区切り線を引く */
.cp_card__badge{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, .55);
    font-size: 17px;
    white-space: nowrap;
}
.cp_card__badge em{
    font-size: 24px;
    font-style: normal;
}
.cp_card__head-ttl{
    font-size: 21px;
}
/* 見出しは濃紺。緑はアイコンと強調語だけに使う (支給デザインの実測色 #000057) */
.cp_card__head--plain{
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 10px 14px 0;
    color: var(--cp-ink);
    font-size: 20px;
}
.cp_card__head--plain em{
    font-style: normal;
}
.cp_card__head-sub{
    display: inline-block;
    font-size: 17px;
}
.cp_card__icon{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    margin-top: 1px;
    line-height: 1;
}

/* ============================================================
   ③ 第1弾
   ============================================================ */
.cp_stage__event{
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
}
.cp_stage__term{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cp-blue);
}
.cp_card--stage2 .cp_stage__term{
    color: var(--cp-gold);
}
/* 「｜期間：」の縦棒 */
/* 「｜期間：」は折り返さない。SP で「期/間：」と2行に割れていた */
.cp_stage__term-label{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    white-space: nowrap;
}
.cp_stage__term-label::before{
    content: "";
    display: inline-block;
    width: 2px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    background: currentColor;
}
.cp_stage__term-label::after{
    content: "：";
}

/* #2484 支給デザインに合わせる。
   写真はカードの左端・下端まで敷き (本文の padding を負のマージンで打ち消す)、
   右側を白へぼかして文字側と繋げる。文字側は右に寄せて写真に重ねない */
.cp_stage1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 12px;
    margin: 0 0 -14px -14px;
}
.cp_stage1__photo{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 36%;
            flex: 0 0 36%;
    min-height: 210px;
    margin: 0;
}
.cp_stage1__photo picture{
    display: block;
    height: 100%;
}
/* ドームは左側を見せる (支給デザインもドームの左 2/3 を切り出している) */
.cp_stage1__photo img{
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: left center;
       object-position: left center;
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
.cp_stage1__detail{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    min-width: 0;
    padding: 4px 0 14px;
}
.cp_stage1__num{
    margin: 0;
    color: var(--cp-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.cp_stage1__num strong{
    color: var(--cp-red);
    font-size: 46px;
}
.cp_stage1__sub{
    margin: 2px 0 10px;
    color: var(--cp-ink);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.cp_stage1__sub strong{
    margin: 0 2px;
    color: var(--cp-ink);
    font-size: 24px;
}
.cp_stage1__catch{
    margin: 10px 0 0;
    color: var(--cp-blue);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

/* -- 口数 (1台=1口 …) --
   白いマスに、左に車・右に「○台成約 / ○口」を置く */
.cp_lot{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_lot__item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 2px 8px;
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid #dde3ec;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: var(--sh-1);
}
.cp_lot__text{
    text-align: center;
}
.cp_lot__label{
    display: block;
    color: var(--cp-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.cp_lot__count{
    display: block;
    color: var(--cp-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}
.cp_lot__count strong{
    font-size: 32px;
}
.cp_lot__cars{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}
.cp_lot__cars img{
    display: block;
}
/* 2台: 後ろの車を右上にずらして前後に重ねる */
.cp_lot__cars--2 img:first-child{
    position: relative;
    top: -8px;
}
.cp_lot__cars--2 img + img{
    margin-left: -14px;
}
/* 3台: 上に1台、下に2台の三角に積む */
.cp_lot__cars--3{
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0 2px;
}
.cp_lot__cars--3 img:first-child{
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: -3px;
}

/* ============================================================
   ③ 第2弾
   ============================================================ */
.cp_stage2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 14px;
}
/* #2484 文字は約1.25倍にし、左に余白を取って少し右へ寄せる */
.cp_stage2__detail{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 220px;
            flex: 1 1 220px;
    min-width: 0;
    padding-left: 24px;
    box-sizing: border-box;
}
.cp_stage2__num{
    margin: 0 0 6px;
    color: var(--cp-ink);
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
}
.cp_stage2__num strong{
    color: var(--cp-red);
    font-size: 68px;
}
.cp_stage2__cond{
    margin: 0;
    color: var(--cp-ink);
    font-size: 21px;
    font-weight: 700;
}
.cp_stage2__target{
    margin: 0 0 8px;
    color: var(--cp-red);
    font-size: 43px;
    font-weight: 700;
    line-height: 1.2;
}
.cp_stage2__lot{
    margin: 0;
    color: var(--cp-ink);
    font-size: 21px;
    font-weight: 700;
}
.cp_stage2__lot strong{
    font-size: 28px;
}
/* 第1弾の注記 (観戦日・費用負担) も第2弾と同じ体裁にする */
.cp_stage1__note,
.cp_stage2__note{
    margin: 12px 0 0;
    font-size: 11px;
    color: var(--c-text-weak);
    line-height: 1.6;
}
/* グッズ画像は大きく見せる (支給イメージ: 右半分をグッズが占める)。
   文字側と同じ比率で伸ばし、上限を決めておく */
.cp_stage2__goods{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 340px;
            flex: 1 1 340px;
    max-width: 440px;
    margin: 0 auto;
}
/* 支給のグッズ素材。タオル(横長)を少し左に傾けて奥に置き、
   クリアファイル(縦長)を右に傾けて右下手前に重ねる。
   タオルは上の帯に「RAXUS | JAPAN」のロゴが入っているので、
   クリアファイルの上端はタオルの高さの約4割より下に置き、ロゴを隠さない。

   枠の幅に合わせて拡縮させるため、寸法はすべて枠に対する % で持つ。
   枠の高さは aspect-ratio で決める (幅 : 高さ = 100 : 75)。
   傾けたぶん角が外へ出るので、左右と下に少し逃げを取っている。
   - タオル  : 幅 76% → 高さは枠幅の 40.4% (420x223)
   - ファイル: 幅 36% → 高さは枠幅の 49.8% (260x360)
   - ファイル上端 30% ≒ タオル上端 + タオル高さの 40% */
.cp_goods{
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 75;
}
.cp_goods__towel,
.cp_goods__folder{
    position: absolute;
    display: block;
    box-shadow: var(--sh-2);
}
.cp_goods__towel img,
.cp_goods__folder img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.cp_goods__towel{
    left: 2%;
    top: 8%;
    width: 76%;
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
}
.cp_goods__folder{
    right: 2.5%;
    top: 30%;
    z-index: 2;
    width: 36%;
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
}

/* ============================================================
   ④ 3STEP
   ============================================================ */
.cp_step{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* #2484 支給デザインに合わせ、各ステップは中央揃え */
.cp_step__item{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    position: relative;
    min-width: 0;
    text-align: center;
}
/* ステップ間の「＞」。支給デザインでは太く大きい。
   矢印のぶん左に余白を空けないと STEP 番号の丸に食い込む */
.cp_step__item + .cp_step__item{
    padding-left: 30px;
}
/* 矢印は大きめにして、ステップの縦中央 (見出しの高さ) に置く */
.cp_step__item + .cp_step__item::before{
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 42%;
    left: 0;
    border-top: 5px solid #b9bfd4;
    border-right: 5px solid #b9bfd4;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
}
.cp_step__head{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 12px;
    margin: 0 0 8px;
}
.cp_step__no{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--c-green-dark);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}
.cp_step__no small{
    /* 9px では SP で読めない。54px の丸に収まる範囲で 10px にする */
    font-size: 10px;
    letter-spacing: .06em;
}
/* 支給デザインのアイコンは STEP 番号の丸と同じくらい大きい */
.cp_step__icon{
    line-height: 1;
}
.cp_step__ttl{
    margin: 0 0 6px;
    color: var(--cp-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
.cp_step__text{
    margin: 0;
    color: var(--c-text-sub);
    font-size: 14px;
    line-height: 1.6;
}
/* 3ステップ全体の結論 (成約でキャンペーン対象) */
.cp_step__foot{
    margin: 10px 0 0;
    color: var(--c-text-sub);
    font-size: 14px;
    text-align: center;
}
/* ボタンは支給デザインどおり横長に */
.cp_step__foot + .cp_card__cta .cp_btn--wide{
    max-width: 360px;
}

/* ============================================================
   ⑤ 当選チャンス
   ============================================================ */
.cp_chance{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_chance__item{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    position: relative;
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: var(--c-green-tint);
    text-align: center;
}
/* マス間の「▶」 */
.cp_chance__item + .cp_chance__item::before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: -17px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--c-green);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.cp_chance__label{
    margin: 0 0 6px;
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.cp_chance__cars{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 3px;
    margin: 0 0 4px;
}
.cp_chance__count{
    margin: 0;
    color: var(--cp-ink);
    font-size: 18px;
    font-weight: 700;
}
.cp_chance__count strong{
    font-size: 36px;
}

/* ============================================================
   ⑥ Smartオークションとは
   ============================================================ */
.cp_about{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_about__item{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: var(--c-bg-subtle);
}
.cp_about__ttl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--cp-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.cp_about__icon{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    line-height: 1;
}
.cp_about__text{
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
/* 注記は中央 (支給デザイン)。右寄せにしていた */
.cp_about__note{
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--c-text-sub);
    text-align: center;
}

/* ============================================================
   ⑦ キャンペーン対象者
   ============================================================ */
.cp_target{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_target__item{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    min-width: 0;
    padding: 12px;
    border-radius: var(--r-md);
}
.cp_target__item--new{
    border: 1px solid var(--c-info-line);
    background: var(--c-green-tint);
}
.cp_target__item--exist{
    border: 1px solid #c5d9f5;
    background: var(--cp-blue-tint);
}
/* 支給デザインは見出し・当選枠とも中央揃え */
.cp_target__ttl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}
.cp_target__item--new .cp_target__ttl{
    color: var(--c-green-dark);
}
.cp_target__item--exist .cp_target__ttl{
    color: var(--cp-blue);
}
.cp_target__icon{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    line-height: 1;
}
.cp_target__num{
    margin: 0 0 6px;
    color: var(--cp-red);
    font-size: 23px;
    font-weight: 700;
    text-align: center;
}
.cp_target__num strong{
    font-size: 42px;
}
.cp_target__text{
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}
/* 注記は中央 (支給デザイン)。右寄せにしていた */
.cp_target__note{
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--c-text-sub);
    text-align: center;
}

/* ============================================================
   ⑧ 対象判定
   ============================================================ */
.cp_judge__lead{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.55;
}
.cp_judge__lead-icon{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    line-height: 1;
}
/* 「入札締切日 ▶ 落札 ▶ ○対象」と「売買解除 ▶ ✕対象外」を2段に分ける。
   以前は2つを1行に続けて並べていたが、対象と対象外の区別が付きにくかった。
   列は [条件 | 矢印 | 結果] の3つ。行 (.cp_judge__row) は display:contents で
   このグリッドに参加させ、結果の列を上下で揃える */
.cp_judge{
    display: -ms-grid;
    display: grid;
    grid-template-columns: max-content auto minmax(120px, max-content);
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px 12px;
}
.cp_judge__row{
    display: contents;
}
.cp_judge__cond{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
}
.cp_judge__item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 6px 14px;
    border: 1px solid var(--c-info-line);
    border-radius: var(--r-sm);
    background: var(--c-green-tint);
    color: var(--cp-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
}
/* 結果 (○対象 / ✕対象外) は大きく、上下で同じ幅にそろえる */
.cp_judge__item--result{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    font-size: 20px;
}
.cp_judge__item--ok{
    border: 2px solid var(--cp-red);
    background: #fff;
    color: var(--cp-red);
}
.cp_judge__item--gray{
    border-color: var(--c-border-light);
    background: var(--c-bg-gray);
    color: var(--c-text-sub);
    font-weight: 400;
}
.cp_judge__item--ng{
    border: 2px solid #b9bcb6;
    background: #e9eae7;
    color: #444;
}
.cp_judge__icon{
    line-height: 1;
}
/* ○ / ✕ の印 */
.cp_judge__mark--ok{
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--cp-red);
    border-radius: 50%;
    box-sizing: border-box;
}
.cp_judge__mark--ng{
    font-size: 22px;
    line-height: 1;
}
/* 三角の矢印 (▶) */
.cp_judge__arrow{
    display: block;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 12px solid #a9ada6;
}

/* ============================================================
   ⑨ 抽選～当選の流れ
   ============================================================ */
.cp_flow{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
/* 支給デザインは青みの淡い地に青枠 */
.cp_flow__item{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4px;
    position: relative;
    min-width: 0;
    padding: 10px 4px;
    border: 1px solid #cfdcf3;
    border-radius: var(--r-md);
    background: #f4f8fe;
}
.cp_flow__item + .cp_flow__item::before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: -11px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--c-border);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.cp_flow__icon{
    line-height: 1;
}
.cp_flow__label{
    color: var(--cp-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
/* 支給デザインは行頭に「●」が付く。list-style を消していた */
.cp_flow__notes{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.6;
}
.cp_flow__notes li::marker{
    color: var(--cp-blue);
}

/* ============================================================
   ⑩ よくある質問 (一覧)
   ============================================================ */
.cp_faq{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px 1fr;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp_faq__btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 8px;
    height: 100%;
    padding: 9px 12px;
    border: 1px solid #d5e2f5;
    border-radius: var(--r-sm);
    background: #f5f9ff;
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.cp_faq__btn:hover{
    border-color: var(--c-hover-border);
    background: var(--c-hover-bg);
    color: var(--c-hover-text);
}
.cp_faq__q{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    min-width: 0;
}
.cp_faq__q .cp_icon--search{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}
.cp_faq__plus{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    font-size: 15px;
    font-weight: 700;
}

/* ============================================================
   ⑪ 対象外・注意事項
   ============================================================ */
.cp_caution{
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.75;
}
.cp_caution li::marker{
    color: var(--c-green);
}

/* 対象判定 / 対象外・注意事項は、見出し以外をカードの中央に置く。
   カードは隣と高さが揃って下に空きが出るため、上下も中央に寄せる。
   箇条書きは行頭を揃えたいので、文字は左揃えのままブロックごと中央に置く */
.cp_card--center .cp_card__body{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.cp_card--center .cp_judge,
.cp_card--center .cp_caution{
    max-width: 100%;
}
/* 中央に寄せると余白が増えるぶん、文字を一段大きくする (14px -> 16px) */
.cp_card--center .cp_judge__lead{
    font-size: 16px;
}
.cp_card--center .cp_caution{
    padding-left: 0;
    font-size: 16px;
    line-height: 1.85;
}
/* 各項目の頭に「●」。リセットで list-style が消えているため疑似要素で出す。
   2行に折れたときも本文の頭が揃うよう、● は左の余白にぶら下げる */
.cp_caution{
    list-style: none;
}
.cp_caution li{
    position: relative;
    padding-left: 1.2em;
}
.cp_caution li::before{
    content: "●";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-green);
    font-size: .8em;
    line-height: calc(1.85em / .8); /* 本文の1行目と縦位置を揃える */
}

/* ============================================================
   ⑫ 最終CTA
   ============================================================ */
.cp_last{
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
}
.cp_last__bg{
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cp_last__bg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.cp_last__body{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 18px;
    position: relative;
    z-index: 2;
    padding: 26px 28px;
    /* 写真の上に白文字を置くので、暗い膜を一枚かける */
    background: rgba(12, 32, 8, .42);
}
.cp_last__text{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 380px;
            flex: 1 1 380px;
    min-width: 0;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.cp_last__ttl{
    margin: 0 0 4px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
}
.cp_last__lead{
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}
.cp_last__cta{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* #2484 ボタンは 250px 固定だと「会員の方 今すぐ出品する」(約263px) が収まらず、
   文字が右へはみ出して「＞」と重なり、右端が切れて見えていた。
   幅は中身に合わせて広げ (下限 250px)、枠の右端からも離して置く */
.cp_last__cta{
    margin-right: 40px;
}
.cp_last__cta > li{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 250px;
}
.cp_last__cta .cp_btn{
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ============================================================
   FAQ モーダル
   (枠と開閉は default.css / Layout の #modal02 を使う)
   ============================================================ */
.cp_modal__content{
    max-height: 90vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
}
.cp_modal__head{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--c-border-light);
}
.cp_modal__ttl{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--c-green-dark);
    font-size: 22px;
    font-weight: 700;
}
.cp_modal__close{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: var(--r-sm);
    color: var(--c-text-sub);
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}
.cp_modal__close:hover{
    background: var(--c-bg-gray);
    color: var(--c-text);
}
.cp_modal__body{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 22px 22px;
}
.cp_qa{
    padding: 14px 16px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: #fbfcfa;
}
.cp_qa + .cp_qa{
    margin-top: 10px;
}
.cp_qa__q{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}
.cp_qa__mark{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 50%;
    background: var(--c-green);
    color: #fff;
    font-size: 16px;
}
.cp_qa__a{
    margin: 0;
    padding-left: 38px;
    font-size: 14px;
    line-height: 1.75;
}

/* ============================================================
   タブレット (2カラムを保てなくなる手前)
   ============================================================ */
@media screen and (max-width: 1100px){
    .cp_mv__ttl:not(.hero_slider--scaled *){ font-size: 32px; }
    .cp_mv__lead:not(.hero_slider--scaled *){ font-size: 19px; }
    .cp_mv__lead em:not(.hero_slider--scaled *){ font-size: 25px; }
    .cp_mv__visual:not(.hero_slider--scaled *){ width: 50%; opacity: .9; }
    .cp_merit{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp_grid{ grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SP
   ============================================================ */
@media screen and (max-width: 899px){
    .cp{
        padding-bottom: 32px;
        font-size: 14px;
    }

    /* -- MV: 選手を背面に回し、文字は必ず上に置く -- */
    .cp_mv{
        padding: 20px 16px 22px;
    }
    /* SP は幅が狭く、右寄せのままだと青い部分が文字の下に来て
       濃紺の見出しが読めなくなる。白い左側を使う */
    .cp_mv__bg img:not(.hero_slider--scaled *){
        -o-object-position: left center;
           object-position: left center;
    }
    .cp_mv__body:not(.hero_slider--scaled *){
        max-width: none;
    }
    .cp_mv__ttl:not(.hero_slider--scaled *){
        /* SP は横幅が足りないので折り返しを許す */
        white-space: normal;
        font-size: 24px;
    }
    .cp_mv__lead:not(.hero_slider--scaled *){
        font-size: 16px;
    }
    .cp_mv__lead em:not(.hero_slider--scaled *){
        font-size: 20px;
    }
    .cp_mv__term:not(.hero_slider--scaled *){
        gap: 2px 10px;
    }
    .cp_mv__term-date:not(.hero_slider--scaled *){
        font-size: 20px;
    }
    .cp_mv__term-date small:not(.hero_slider--scaled *){
        font-size: 13px;
    }
    /* SP は文字の下に選手を置く。背景が白いため薄くすると霞むので実寸で見せる */
    .cp_mv__visual:not(.hero_slider--scaled *){
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        margin: 10px -16px -22px;
        width: calc(100% + 32px);
    }
    /* SP は背景の白い側を使うので、権利表記は白だと読めない */
    .cp_mv__copy:not(.hero_slider--scaled *){
        right: 10px;
        bottom: 4px;
        color: var(--c-text-sub);
        text-shadow: none;
    }
    .cp_mv__cta:not(.hero_slider--scaled *){
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .cp_mv__cta > li:not(.hero_slider--scaled *){
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }

    .cp_btn{
        min-height: 52px;
        font-size: 17px;
    }

    /* -- 要点は2列のまま。1列にすると縦に伸びすぎる -- */
    .cp_merit__item{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 4px;
        padding: 10px 6px;
        text-align: center;
    }
    .cp_merit__text{
        font-size: 12px;
    }
    .cp_merit__strong{
        font-size: 24px;
    }

    .cp_card__head{
        padding: 10px 14px;
        font-size: 16px;
    }
    .cp_card__head-ttl{
        font-size: 16px;
    }
    .cp_card__head--plain{
        padding: 12px 14px 0;
        font-size: 17px;
    }
    .cp_card__body{
        padding: 14px 14px 18px;
    }

    /* -- 第1弾: 写真を上に、内容を下に。
          縦積みでは左端・下端へ敷かず、ぼかしもやめて普通の写真として置く -- */
    .cp_stage1{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 10px;
        margin: 0;
    }
    .cp_stage1__photo{
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        min-height: 0;
    }
    .cp_stage1__photo img{
        height: 150px;
        -o-object-position: center;
           object-position: center;
        border-radius: var(--r-sm);
        -webkit-mask-image: none;
                mask-image: none;
    }
    .cp_stage1__detail{
        padding: 0;
    }
    .cp_stage1__catch{
        font-size: 18px;
    }
    .cp_lot{
        gap: 6px;
    }
    .cp_lot__count strong{
        font-size: 26px;
    }
    .cp_stage1__num{
        font-size: 18px;
    }
    .cp_stage1__num strong{
        font-size: 28px;
    }
    .cp_lot__label{
        font-size: 11px;
    }

    .cp_stage2{
        gap: 10px;
    }
    /* PC と同じく約1.25倍。SP は幅が狭いので右寄せの余白は小さくする */
    .cp_stage2__detail{
        padding-left: 8px;
    }
    .cp_stage2__num strong{
        font-size: 45px;
    }
    .cp_stage2__target{
        font-size: 31px;
    }
    /* グッズは PC と同じ % 指定のまま、カード幅いっぱいに拡縮させる */

    /* -- 3STEP は縦積み。横3列だと文字が潰れる -- */
    .cp_step{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 18px;
    }
    /* 縦積みでは矢印を上に置くので、左ではなく上に逃げを取る */
    .cp_step__item + .cp_step__item{
        padding-left: 0;
        padding-top: 12px;
    }
    /* 縦積みでは矢印を下向きにして、ステップ間の中央に置く */
    .cp_step__item + .cp_step__item{
        padding-top: 22px;
    }
    .cp_step__item + .cp_step__item::before{
        top: -6px;
        left: 50%;
        width: 14px;
        height: 14px;
        border-width: 4px;
        -webkit-transform: translateX(-50%) rotate(135deg);
                transform: translateX(-50%) rotate(135deg);
    }

    .cp_chance{
        gap: 16px;
    }
    .cp_chance__label{
        font-size: 12px;
    }
    .cp_chance__count strong{
        font-size: 22px;
    }
    .cp_chance__item + .cp_chance__item::before{
        left: -13px;
    }

    /* -- 3つの特長は縦積み -- */
    .cp_about{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .cp_about__note{
        text-align: left;
    }

    .cp_target{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .cp_target__note{
        text-align: left;
    }

    /* -- 判定の流れ: 条件の列は幅に合わせて折り返す -- */
    .cp_judge{
        grid-template-columns: minmax(0, 1fr) auto minmax(88px, max-content);
        gap: 10px 8px;
    }
    .cp_judge__cond{
        gap: 6px;
    }
    .cp_judge__item{
        min-height: 40px;
        padding: 6px 10px;
        font-size: 13px;
    }
    .cp_judge__item--gray{
        white-space: normal;
    }
    .cp_judge__item--result{
        font-size: 16px;
    }

    /* -- 抽選の流れは2段に折り返す (5つ横並びは狭い) -- */
    .cp_flow{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 8px;
    }
    .cp_flow__item{
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(33.333% - 6px);
                flex: 0 0 calc(33.333% - 6px);
    }
    /* 折り返すと矢印の位置が合わなくなるので消す */
    .cp_flow__item + .cp_flow__item::before{
        content: none;
    }
    .cp_flow__notes{
        grid-template-columns: minmax(0, 1fr);
    }

    .cp_faq{
        grid-template-columns: minmax(0, 1fr);
    }

    /* -- 最終CTA -- */
    .cp_last__body{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        padding: 20px 16px;
    }
    .cp_last__ttl{
        font-size: 24px;
    }
    .cp_last__lead{
        font-size: 13px;
    }
    .cp_last__cta{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-right: 0;
    }
    .cp_last__cta > li{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }

    /* -- モーダル -- */
    .cp_modal__head{
        padding: 14px 16px 10px;
    }
    .cp_modal__ttl{
        font-size: 18px;
    }
    .cp_modal__body{
        padding: 12px 16px 18px;
    }
    .cp_qa{
        padding: 12px;
    }
    .cp_qa__q{
        font-size: 15px;
    }
    .cp_qa__a{
        padding-left: 0;
        font-size: 13px;
    }
}

/* ============================================================
   #2484 侍ジャパン応援スライド (MV)
   スポンサーである旨は書かず、支給素材の「応援しています」だけを出す。
   筆の背景に選手を重ね、文言は支給画像をそのまま使う
   (テキスト + ロゴが1枚になっている)
   ============================================================ */
/* #2484 slick-track も flex なので、スライド自身を flex にすると
   並びの計算が狂って左に 32px ずれた (他のスライドは -41px、
   応援だけ -73px)。block のまま中身を縦に積む */
/* 中身(選手とバナー)は縦中央に置く。スライドの高さは一番高い隣に
   揃うため、上詰めだと下に大きな空きが出る */
.cp_support{
    position: relative;
    display: block;
    min-height: 431px;
    overflow: hidden;
    border-radius: var(--r-md, 6px);
    background: #0b1f52;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/* 筆の背景。素材の左端がアルファで抜けているので地色を敷いた上に置く */
.cp_support__bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.cp_support__bg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
/* 選手とバナーをひとまとめにして縦中央に置く */
/* #2484 選手はスライドいっぱいに使い、バナーはその上に重ねる。
   縦に積むとスライドの高さ(隣に揃う)をバナーと分け合うことになり、
   選手を大きくできなかった */
.cp_support__inner{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}
/* バナーは下端に置く。大きさは変えない */
.cp_support__body{
    position: absolute;
    left: 0;
    bottom: 8px;
    z-index: 2;
    width: 100%;
    padding: 0 72px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
}
/* 支給の応援文言 (テキスト+ロゴが1枚の画像) */
.cp_support__note{
    margin: 0 auto;
    max-width: 760px;
}
.cp_support__note img{
    display: block;
    width: 100%;
    height: auto;
}
/* スライド全体を応援ページへのリンクにしている。
   中身は section 基準の absolute で重ねているので、a 自体は位置を持たせない
   (position を付けると配置の基準が変わってしまう)。
   権利表記の文字がリンク色・下線にならないよう打ち消す */
.cp_support__link,
.cp_support__link:hover{
    display: block;
    color: inherit;
    text-decoration: none;
}
/* 選手。文言の下に敷く */
/* 選手はスライドの高さいっぱいまで使う。
   バナーが顔にかかるので、バナーの高さぶん上へ逃がしている */
.cp_support__visual{
    position: absolute;
    left: 50%;
    bottom: 96px;
    z-index: 1;
    width: 96%;
    max-width: 1180px;
    height: calc(100% - 104px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    pointer-events: none;
}
.cp_support__visual img{
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center bottom;
       object-position: center bottom;
}
.cp_support__visual img{
    display: block;
    width: 100%;
    height: auto;
}
.cp_support__copy{
    position: absolute;
    right: 16px;
    bottom: 8px;
    z-index: 3;
    margin: 0;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

@media screen and (max-width: 899px){
    .cp_support:not(.hero_slider--scaled *){
        min-height: 0;
        /* 選手を下に敷くので、地色は下側を濃くしておく */
        background: #0b1f52;
    }
    /* 支給の文言画像は横長で、SP 幅に収めると字が潰れる。
       スライドいっぱいに使い、左右の逃げは最小にする
       (矢印は上下中央なので、上部のこの帯とは重ならない) */
    .cp_support__body:not(.hero_slider--scaled *){
        padding: 0 10px 12px;
    }
    .cp_support__note:not(.hero_slider--scaled *){
        max-width: none;
    }
    /* スライドの高さは一番高い隣 (キャンペーン) に揃うため下に空きが出るが、
       選手を引き伸ばすと絵が破綻する。実寸のまま置き、
       余った高さは筆の背景で埋める */
    /* SP はスライドが縦長。PC のように重ねると選手が上下どちらかに
       寄ってバナーが見切れるため、縦に積んで中央に置く */
    .cp_support__inner:not(.hero_slider--scaled *){
        position: absolute;
        top: 50%;
        height: auto;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .cp_support__visual:not(.hero_slider--scaled *){
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% + 24px);
        max-width: none;
        height: auto;
        margin: 0 -12px 6px;
        -webkit-transform: none;
                transform: none;
    }
    .cp_support__visual img:not(.hero_slider--scaled *){
        width: 100%;
        height: auto;
        max-height: none;
    }
    .cp_support__body:not(.hero_slider--scaled *){
        position: relative;
        bottom: auto;
        padding: 0 10px;
    }
    .cp_support__copy:not(.hero_slider--scaled *){
        right: auto;
        left: 10px;
        bottom: 6px;
    }
}

/* ============================================================
   #2484 ログイン前 MV の出品訴求スライド
   支給デザインの構成: 見出し + リード + ボタン2つ + 説明ボックス。
   右下に緑の斜め面を敷き、その上にスローガンを白抜きで置く
   ============================================================ */
.intro_hero{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 431px;
    overflow: hidden;
    border-radius: var(--r-md, 6px);
    background: #eef3f7;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.intro_hero__bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.intro_hero__bg img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 72% center;
       object-position: 72% center;
    /* #2484 車列を右側に寄せ、左のテキスト領域を空ける */
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
}
/* 左半分に文字を置くので、左だけ白く起こして読めるようにする */
.intro_hero__bg::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 58%);
    background: linear-gradient(to right, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 58%);
}
.intro_hero__body{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    /* 左は slick の矢印 (16px + 40px) の内側に置く */
    margin-left: 72px;
    /* 上はログイン前の固定ヘッダ(70px)に見出しが潜るぶんを逃がす */
    padding: 86px 0 28px;
}
.intro_hero__ttl{
    margin: 0 0 12px;
    color: #1a1a1a;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.intro_hero__lead{
    margin: 0 0 20px;
    color: #333;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
}
.intro_hero__cta{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.intro_hero__cta > li{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    min-width: 0;
}
.intro_hero__btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 56px;
    padding: 10px 18px;
    border-radius: var(--r-sm, 4px);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    transition: background-color .15s, box-shadow .15s;
}
/* 支給デザインどおり、ログイン=赤 / 新規会員登録=オレンジ */
.intro_hero__btn-login{
    background: #e5201b;
}
.intro_hero__btn-login:hover{
    background: #c51a16;
    color: #fff;
}
.intro_hero__btn-signup{
    background: #f07c00;
}
.intro_hero__btn-signup:hover{
    background: #d86e00;
    color: #fff;
}
/* 「Smartオークションとは？」の白いボックス */
.intro_hero__about{
    padding: 12px 18px 14px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--r-sm, 4px);
    background: rgba(255, 255, 255, .92);
    text-align: center;
}
.intro_hero__about-ttl{
    margin: 0 0 8px;
    padding-bottom: 8px;
    position: relative;
    color: #1a1a1a;
    font-size: 19px;
    font-weight: 800;
}
/* 見出しの下に短い緑線。他セクションと同じ作法 */
.intro_hero__about-ttl::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: #7ac70c;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
.intro_hero__about-text{
    margin: 0;
    color: #444;
    font-size: 13px;
    line-height: 1.7;
}
/* 右下の緑の斜め面 + スローガン */
.intro_hero__slogan{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 30px 28px 18px 78px;
    /* 左上を斜めに切って面を作る */
    -webkit-clip-path: polygon(38px 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(38px 0, 100% 0, 100% 100%, 0 100%);
    background: #7ac70c;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .02em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

@media screen and (max-width: 899px){
    /* SP はスライドの高さが隣に揃うため、中身を上詰めにすると
       下に大きな空きが出る。縦中央に置いて散らばりを無くす */
    .intro_hero:not(.hero_slider--scaled *){
        min-height: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    /* SP は写真の上に重ねると読めないので、白を強くかける */
    .intro_hero__bg:not(.hero_slider--scaled *)::after{
        background: rgba(255, 255, 255, .9);
    }
    .intro_hero__body:not(.hero_slider--scaled *){
        max-width: none;
        margin: 0;
        /* SP のヘッダも固定。見出しが潜らないよう上を空ける */
        padding: 76px 16px 20px;
    }
    .intro_hero__ttl:not(.hero_slider--scaled *){
        font-size: 26px;
    }
    .intro_hero__lead:not(.hero_slider--scaled *){
        font-size: 15px;
    }
    .intro_hero__cta:not(.hero_slider--scaled *){
        gap: 10px;
    }
    .intro_hero__btn:not(.hero_slider--scaled *){
        min-height: 46px;
        font-size: 17px;
    }
    .intro_hero__about-ttl:not(.hero_slider--scaled *){
        font-size: 16px;
    }
    .intro_hero__about-text:not(.hero_slider--scaled *){
        font-size: 12px;
    }
    /* SP は斜め面を出すと窮屈なので、下端の帯にする */
    .intro_hero__slogan:not(.hero_slider--scaled *){
        position: static;
        padding: 8px 16px;
        -webkit-clip-path: none;
                clip-path: none;
        font-size: 14px;
    }
}

/* ============================================================
   #2484 MV: 侍ジャパン関連スライドの右下の「応援バナー + 権利表記」
   キャンペーン告知 (.cp_mv--slide) と侍ジャパン応援 (.cp_support) で
   同じ位置・大きさに揃える (x-index.samurai-credit)。
   以前は応援スライドだけ、中央下に大きな帯として置いていた。
   ============================================================ */
.samurai_credit{
    position: absolute;
    right: 16px;
    bottom: 10px;
    z-index: 3;
    width: 300px;
    max-width: 60%;
    text-align: right;
    pointer-events: none; /* 応援スライドはスライド全体がリンク。クリックは下のリンクへ通す */
}
.samurai_credit__note{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.samurai_credit__copy{
    margin: 4px 0 0;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* キャンペーン告知スライド: 選手を小さくして右へ寄せる (66% → 56%、右の余白をなくす) */
.cp_mv--slide .cp_mv__visual{
    right: -1%;
    width: 56%;
    max-width: 720px;
}

/* 侍ジャパン応援スライド: 中央下のバナーが無くなったので、選手は小さくして上寄せにする。
   スライドの高さはログイン前後で違うため、上端からの割合で置く。
   画像の下端は透明に抜けているので、途中で終わっても切れ目は目立たない */
.cp_support__visual{
    top: 6%;
    bottom: auto;
    width: 68%;
    height: auto;
}

@media screen and (max-width: 899px){
    .samurai_credit:not(.hero_slider--scaled *){
        right: 10px;
        bottom: 8px;
        width: 72%;
        max-width: none;
    }
    /* SP は選手を文字の流れに置いているので (上の SP 指定)、位置は変えず大きさだけ抑える */
    .cp_support__visual:not(.hero_slider--scaled *){
        top: auto;
        width: 86%;
        margin: 0 auto 6px;
    }
}

/* #2484 キャンペーン告知スライド: 選手を少し上げる (下端から 24px)。
   画像の下端は透明に抜けているので、下に地が見えても切れ目は出ない */
.cp_mv--slide .cp_mv__visual{
    bottom: 24px;
}
/* #2484 侍ジャパン応援スライド: 応援バナーと権利表記は左右中央に置く
   (キャンペーン告知スライドは右下のまま) */
.cp_support .samurai_credit{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
}
/* #2484 侍ジャパン応援スライド: 応援バナーを大きくする (300px → スライド幅の 60%)。
   選手の下が空いているので、その帯に収める */
.cp_support .samurai_credit{
    width: 60%;
    max-width: none;
}
/* 画面が狭いときはスライドを PC レイアウトのまま縮めて見せる (.hero_slider--scaled)。
   権利表記は縮小後に 4〜9px になっていたので、縮小率で割り戻して実寸 10px で出す */
.hero_slider--scaled .cp_support .samurai_credit__copy{
    font-size: calc(10px / var(--hero-scale, 1));
}
/* SP は約 1/3 に縮むため、60% でも実寸 200px ほどでロゴが判別できない。ほぼ全幅まで広げる */
@media screen and (max-width: 899px){
    .hero_slider--scaled .cp_support .samurai_credit{
        width: 94%;
    }
}

/* ============================================================
   #2484 MV: ログイン後のキャンペーン告知スライド (.cp_mv--member)
   業務の指定で組み替えた。
     左の列 (上から下まで): 文字 (ラベル / 見出し / 賞品 / 期間) を大きく
     右の列 上: 選手 + 応援バナー + 権利表記 のセット
     右の列 下: 「今すぐ出品する」「キャンペーン詳細を見る」
   左右の余白はスライド幅の 3% (両端の列)。slick が幅を測るのでスライド自身には
   左右 padding を持たせない (上の .cp_mv--slide の注記)。
   文字を大きくするため左の列を広く取る (左 11 : 右 9)。
   ログイン前の同じスライドは従来の組みのまま。
   ============================================================ */
/* slick の .slick-initialized .slick-slide { display: block } (クラス2つ) に負けないよう
   クラス3つで指定する */
.hero_slider .cp_mv.cp_mv--member{
    display: -ms-grid;
    display: grid;
    grid-template-columns: 3% minmax(0, 11fr) 28px minmax(0, 9fr) 3%;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        ". body . side ."
        ". body . cta  .";
    row-gap: 20px;
}
/* 左の列は上下いっぱいに使い、段の間を均等に空ける */
.cp_mv--member .cp_mv__body{
    grid-area: body;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    max-width: none;
    margin: 0;
}
.cp_mv--member .cp_mv__side{
    grid-area: side;
    -ms-flex-item-align: center;
        align-self: center;
    z-index: 1;
}
/* 画面が広い (1920px) と右の列が 637px まで広がり、選手とボタンの高さで
   スライドが 588px → 623px に伸びた。右の列の中身は 520px までにして右に寄せる */
.cp_mv--member .cp_mv__side,
.cp_mv--member .cp_mv__cta--slide{
    justify-self: end;
    width: 100%;
    max-width: 520px;
}
/* ボタンは右の列の下端に置く。列の幅 (最小 約420px) では
   「キャンペーン詳細を見る」を 25px のまま2つ横に並べられないため縦に積む */
.cp_mv--member .cp_mv__cta--slide{
    grid-area: cta;
    z-index: 3;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
    margin: 0;
}
.cp_mv--member .cp_mv__cta--slide > li{
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
}

/* 見出し: 「期間限定」は緑のラベルにして上の段へ。本体は1行で左の列 (最小 約515px) に収まる大きさ */
.cp_mv--member .cp_mv__ttl{
    margin: 0;
    padding-bottom: 16px;
    font-size: 44px;
    line-height: 1.2;
}
.cp_mv__ttl-tag{
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 12px;
    padding: 4px 16px;
    border-radius: var(--r-sm);
    background: var(--c-green-dark);
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: .08em;
}
/* 賞品: 「東京ドーム観戦チケット＆」が1行で入る大きさ */
.cp_mv--member .cp_mv__lead{
    margin: 0;
    font-size: 26px;
    line-height: 1.45;
}
.cp_mv--member .cp_mv__lead em{
    margin: 4px 0;
    font-size: 38px;
    line-height: 1.28;
}
/* 期間: キャンペーンの告知なので、業務の指定で目立たせる。
   見出しと同じ濃紺の地に白抜きで置き (緑の賞品名とも、背景の白〜青とも分かれる)、
   日付は太く・文字間を詰めて数字をまとまりで読ませる */
.cp_mv--member .cp_mv__term{
    /* 左の列 (縦の flex) いっぱいに伸びないよう、日付の幅で止める */
    -ms-flex-item-align: start;
        align-self: flex-start;
    gap: 4px;
    margin: 0;
    padding: 12px 20px 14px;
    border-radius: var(--r-sm);
    background: var(--cp-ink);
    color: #fff;
}
.cp_mv--member .cp_mv__term-label{
    font-size: 18px;
    letter-spacing: .08em;
    opacity: .85;
}
.cp_mv--member .cp_mv__term-date{
    /* 38px だと幅の広い書体 (メイリオ / ヒラギノなど) で左の列 (最小 514px) に収まらず、
       最後の「（火）」が改行されていた。36px + 折り返し禁止にする
       (幅の広い書体で実測 456px + 余白 40px = 496px) */
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    /* メイリオには bold より太いウェイトが無いので、縁取りで一段太く見せる */
    -webkit-text-stroke: .6px currentColor;
}
.cp_mv--member .cp_mv__term-date small{
    font-size: 18px;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
}
.cp_mv--member .cp_mv__note{
    margin: 0;
    padding: 0;
    background: none;
    /* 業務の指定で読める大きさにする (14px → 20px。SP では縮小後に 5px ほどしかなかった) */
    color: var(--c-text, #333);
    font-size: 20px;
    line-height: 1.4;
}

/* 右の列: 選手の下に応援バナーを同じ幅で置き、権利表記を右下に添える */
.cp_mv--member .cp_mv__visual{
    position: static;
    width: 100%;
    max-width: none;
    -webkit-transform: none;
            transform: none;
}
.cp_mv--member .samurai_credit{
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 10px;
    -webkit-transform: none;
            transform: none;
}

/* #2460 390px では 1マスの中身が 88px ほどしかなく、34px の車 3台 (108px) が
   マスの外へはみ出して「▶」に重なっていた。狭い画面では車を 26px にする */
@media screen and (max-width: 480px){
    /* アイコンは <img style="height:34px"> なので !important で上書きする */
    .cp_chance__cars .cp_icon{
        height: 24px !important;
        width: auto;
    }
}
/* #2460 最終CTA: SP で縦積みにすると PC 用の flex: 1 1 380px が高さに効き、
   文字とボタンの間に 300px ほどの空きができていた */
@media screen and (max-width: 899px){
    .cp_last__text{
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }
}

/* #2460 対象判定の図: 狭い画面では条件の列が折り返し、「入札締切日 ▶」の矢印が
   何もない所を指していた。条件は縦に並べ、間の矢印を下向きにして
   「入札締切日 ↓ 落札 ▶ 対象」と読めるようにする */
@media screen and (max-width: 480px){
    .cp_judge__cond{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }
    .cp_judge__cond > .cp_judge__arrow{
        -ms-flex-item-align: center;
            align-self: center;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
}

/* #2460 SP ではボタンを幅 100% で置くため、padding ぶん (64px) 枠からはみ出していた
   (実測 390px で 402px / 枠 338px)。PC は幅 260px + padding の見た目で組んであるので SP だけにする */
@media screen and (max-width: 899px){
    .cp_btn{
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
}
/* #2460 MV の2つのボタンは li(260px) に content-box の幅 100% + padding 64px で置かれ、
   324px に広がって隣のボタンの下に 52px 潜っていた (1024 / 1280px とも)。
   見た目の幅 (324px) はそのままに、li を 324px にしてボタンを枠内に収める。
   トップの MV スライドはボタンが縦並び (flex-direction: column) で、basis が高さとして
   効いてスライドが縦に伸びるため、キャンペーンページの MV だけにする */
@media screen and (min-width: 900px){
    /* SP はボタンが縦並びで、basis が高さとして効くので PC だけ */
    .cp_mv:not(.cp_mv--slide) .cp_mv__cta > li{
        -ms-flex: 0 1 324px;
            flex: 0 1 324px;
        min-width: 0;
    }
}
.cp_mv:not(.cp_mv--slide) .cp_mv__cta .cp_btn{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* #2460 キャンペーンページの MV (769〜1100px)。
   選手 (幅 50%) が文字の側に寄り、日付「– 11.10（火）」やボタン「無料会員登録」が
   選手の顔に重なっていた (実測 769 / 900px)。769px では背景の青い側が文字の下に来て、
   濃紺の見出しも読みにくかった。
   - 背景は白い左側を使う
   - ボタンは縦に積んで文字の列を左に寄せ、選手は右下に置く
   トップの MV スライド (.cp_mv--slide) は PC のまま縮小しているので対象外 */
@media screen and (min-width: 900px) and (max-width: 1100px){
    .cp_mv:not(.cp_mv--slide) .cp_mv__bg img{
        -o-object-position: left center;
           object-position: left center;
    }
    .cp_mv:not(.cp_mv--slide) .cp_mv__cta{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .cp_mv:not(.cp_mv--slide) .cp_mv__cta > li{
        -ms-flex: none;
            flex: none;
        width: 324px;
    }
    .cp_mv:not(.cp_mv--slide) .cp_mv__visual{
        width: 52%;
        opacity: 1;
    }
}
/* 同じく 1279px 以下では、日付の行 (ラベル + 日付で 490px) が選手の顔まで届く
   (ログイン後は「無料会員登録」が無いぶん MV が低く、選手が上に来るため 1101px でも重なる)。
   トップの MV スライドと同じく、ラベルを上の段にして日付の行を短くする */
@media screen and (min-width: 900px) and (max-width: 1279px){
    .cp_mv:not(.cp_mv--slide) .cp_mv__term{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 0;
    }
}
/* #2460 見出しは文節単位で折るため、「東京ドーム観戦ご招待キャンペーン」が1つの文節として
   最小幅 255px になり、320px ではカードの外へはみ出していた。縮められるようにする */
.cp_card__head-ttl{
    min-width: 0;
}
/* #2460 よくある質問: ボタンが height:100% の content-box で、padding と枠線の 20px ぶん
   項目からはみ出していた。最後の項目はカードの overflow:hidden で下の枠線が切れていた */
.cp_faq__btn{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

/* #2460 第1弾の口数のマス: 以前は「左に車・右に文字」を flex-wrap で折り返しており、
   1台のマスだけ横並び・2台 / 3台は車が上、と配置がマスごとに違っていた。
   下の「成約台数が増えるほど」の図 (.cp_chance) と同じく「○台成約 → 車 → ○口」の縦積みで、
   車はどのマスも同じ大きさで横に並べる (台数の差だけが見えるようにする) */
.cp_lot__item{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 6px;
    padding: 10px 6px 8px;
}
.cp_lot__label{
    font-size: 13px;
}
.cp_lot__cars{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3px;
    height: 30px;
}
.cp_lot__count{
    line-height: 1;
}
@media screen and (max-width: 899px){
    .cp_lot__label{
        font-size: 12px;
    }
}
/* 狭い画面では車 3台 (26px x3) がマスの幅いっぱいになるので一回り小さくする */
@media screen and (max-width: 480px){
    .cp_lot__cars .cp_icon{
        height: 21px !important;
        width: auto;
    }
    .cp_lot__cars{
        gap: 2px;
        height: 24px;
    }
}
/* 日付・期間は途中で折らない */
.cp_nowrap{
    white-space: nowrap;
}
/* 第1弾の写真 (481〜768px): 高さ 150px で横に広いと、切り抜きが窓だけになり
   「TOKYO DOME」の看板が写らなかった。高さを取り、看板の位置 (上寄り) を中心に切り抜く */
@media screen and (min-width: 481px) and (max-width: 899px){
    .cp_stage1__photo img{
        height: 220px;
        -o-object-position: center 30%;
           object-position: center 30%;
    }
}
/* 期間の行は flex だと日付の塊ごとに並び、折り返せずに 360px で右へはみ出した。
   通常の行にして、日付の区切り (〜) で折り返す */
.cp_stage__term{
    display: block;
}
.cp_stage__term-label{
    display: inline-block;
    margin-right: 8px;
}

/* #2460 第1弾 / 第2弾が横に並ぶ 1101〜1440px では第1弾の文字の列が狭く、
   「抽選で合計 / 12社・24名様に」と割れていた。この幅では数字と見出しを一回り小さくする */
@media screen and (min-width: 1280px) and (max-width: 1440px){
    .cp_stage1__num{
        font-size: 19px;
    }
    .cp_stage1__num strong{
        font-size: 34px;
    }
    .cp_stage1__catch{
        font-size: 18px;
    }
}
/* 第1弾と第2弾の見出し帯の高さを揃える (片方だけ2行になる幅がある) */
@media screen and (min-width: 1280px){
    .cp_card--stage1 .cp_card__head,
    .cp_card--stage2 .cp_card__head{
        min-height: 64px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
}
/* 下の「成約台数が増えるほど」の図: 360px では車3台がマスの幅いっぱいで枠と「▶」に接していた */
@media screen and (max-width: 400px){
    .cp_chance__cars .cp_icon{
        height: 20px !important;
    }
    .cp_chance__cars{
        gap: 2px;
    }
}
/* 3STEP: STEP01 だけ見出しが2行で、説明の開始位置が 02 / 03 とずれていた。見出しを2行ぶんの高さに揃える */
@media screen and (min-width: 900px){
    .cp_step__ttl{
        min-height: 2.8em;
    }
}
/* 横に並ぶ 1101〜1440px では1ステップが 150px ほどしかなく、
   「プロ出品コーナーへ」(1つの語) が入らずに列からはみ出していた */
@media screen and (min-width: 1280px) and (max-width: 1440px){
    .cp_step__ttl{
        font-size: 15px;
    }
}
/* 第1弾のカードは第2弾より中身が短く、並ぶと下が 200px ほど空いていた。
   ドームの写真をカードの下端まで伸ばして埋める */
@media screen and (min-width: 1280px){
    .cp_card--stage1 .cp_card__body{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .cp_card--stage1 .cp_stage1{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }
}
/* 写真を縦に伸ばすと横が切られ、「TOKYO DOME」の看板が「TO」まで欠けていた。看板が入る位置で切り抜く */
@media screen and (min-width: 1280px){
    .cp_card--stage1 .cp_stage1__photo img{
        -o-object-position: 42% center;
           object-position: 42% center;
    }
}

/* #2460 2枚並べるカード (第1弾 / 第2弾 など) は 1101〜1279px では1枚の幅が 560px ほどで、
   第1弾の写真の列が細く看板が写らない・文字が割れるなど窮屈だった。1024px と同じく1列にする */
@media screen and (min-width: 1101px) and (max-width: 1279px){
    .cp_grid{
        grid-template-columns: minmax(0, 1fr);
    }
}

/* #2460 抽選方法・当選までの流れ (SP): 3 + 2 に折り返すと右下が空き、矢印も消えて
   順番が読み取れなかった。5つを1行に並べ、アイコンと文字を小さくして矢印を残す */
@media screen and (max-width: 899px){
    .cp_flow{
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        gap: 10px;
    }
    .cp_flow__item{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
        padding: 8px 2px;
    }
    .cp_flow__item + .cp_flow__item::before{
        content: "";
        left: -8px;
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 5px;
    }
}
@media screen and (max-width: 480px){
    .cp_flow{
        gap: 8px;
    }
    .cp_flow__icon .cp_icon{
        height: 28px !important;
        width: auto;
    }
    .cp_flow__label{
        font-size: 10.5px;
        letter-spacing: -.02em;
    }
    .cp_flow__item + .cp_flow__item::before{
        left: -7px;
    }
}
/* アイコンの高さが違うため「当選連絡」だけラベルが上にずれていた。アイコンの段を同じ高さにする */
.cp_flow__item{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
.cp_flow__icon{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 46px;
}
@media screen and (max-width: 480px){
    .cp_flow__icon{
        height: 30px;
    }
}
/* 1101〜1440px も同じく、背景を右寄せにすると濃い青が見出しの下に来て
   「成約キャンペーン」「チケット＆」が読みにくかった。白い左側を文字の下に置く */
@media screen and (min-width: 1101px) and (max-width: 1440px){
    .cp_mv:not(.cp_mv--slide) .cp_mv__bg img{
        -o-object-position: left center;
           object-position: left center;
    }
}

/* #2460 FAQ モーダルがヘッダー (z-index:200) の下に描かれ、上端がヘッダーに潜っていた。
   ヘッダー部分を押しても背景クリック扱いにならず閉じられなかったため、ヘッダーより手前に出す */
.modal.cp_modal{
    z-index: 1000;
}

/* _________________________________________ キャンペーンページの MV: 選手の下に 応援バナー + 権利表記 (#2460)
   部品 (x-index.samurai-credit) はトップの MV と同じ置き方にする。
   PC: MV の右下 (選手の足元) に重ねる。選手を上げると期間の行に重なるため、選手の位置は変えない。
   SP: 選手を文字の下 (白い地) に置いているので、そのすぐ下に並べ、権利表記は濃い色にする。
   このページの MV (.cp の直下) だけに効かせ、トップの MV スライドには効かせない */
.cp > .cp_mv:not(.cp_mv--slide) > .samurai_credit{
    right: 16px;
    bottom: 10px;
    width: 320px;
    max-width: 40%;
}
@media screen and (max-width: 899px){
    .cp > .cp_mv:not(.cp_mv--slide) > .samurai_credit{
        position: relative;
        right: auto;
        bottom: auto;
        width: 80%;
        max-width: 360px;
        margin: 8px auto 0;
        text-align: center;
    }
    .cp > .cp_mv:not(.cp_mv--slide) > .samurai_credit .samurai_credit__copy{
        color: var(--cp-ink, #1d2b4f);
        text-shadow: none;
    }
}
/* PC: 選手を少し上げ (下端から 24px。トップの MV のキャンペーン告知スライドと同じ)、少し小さくする
   (1280px 以上 64% → 56%、900〜1279px 52% → 46%)。上げたぶん期間の「（火）」に近づくため、
   小さくして文字から離す。画像の下端は透明に抜けているので、下に地が見えても切れ目は出ない */
@media screen and (min-width: 900px){
    .cp > .cp_mv:not(.cp_mv--slide) > .cp_mv__visual{
        /* 業務の指定で上げる (24px → 48px → 100px)。応援バナーを 2 倍にしたので、
           選手の足元がバナー (高さ約 96px) のすぐ上に来るようにする */
        bottom: 100px;
        /* 右へ 2% はみ出す既存の指定で、右端の選手が MV の枠で切れていた。枠の内側に収める */
        right: 12px;
        /* 業務の指定で 5% 小さくする (56% → 53.2%、上限 820px → 779px) */
        width: 53.2%;
        max-width: 779px;
    }
}
/* 900〜1279px は選手が小さく、右下の応援バナーが胸のあたりまで覆っていた。
   選手の左に文字が無い幅なので、もう少し上げてバナーを選手の下に来させる */
@media screen and (min-width: 900px) and (max-width: 1279px){
    .cp > .cp_mv:not(.cp_mv--slide) > .cp_mv__visual{
        bottom: 110px;
        width: 43.7%; /* 46% の 5% 減 */
    }
}
/* PC: 応援バナーを約 2 倍にする (業務の指定。320px → 最大 640px)。
   左の CTA に重ならないよう、ボタンの右に空いている幅で頭打ちにし、画面が狭いほど小さくする。
   CTA の並びは幅とログインの有無で変わる (右端の位置):
     ログイン後 (「今すぐ出品する」1つ) / ログイン前 900〜1100px (2つを縦に) … 右端 約 350px
     ログイン前 1101px 以上 (2つを横に) … 右端 約 700px (以前は 1279px まで縦並びと見ていて、1101〜1279px で重なっていた) */
@media screen and (min-width: 900px){
    .cp > .cp_mv:not(.cp_mv--slide) > .samurai_credit{
        width: min(640px, calc(100% - 400px));
        max-width: none;
    }
}
@media screen and (min-width: 1101px){
    .cp > .cp_mv:not(.cp_mv--slide):has(.cp_btn--ghost) > .samurai_credit{
        width: min(640px, calc(100% - 720px));
    }
}