@charset "UTF-8";
/* ============================================================
   #2460 ログイン前トップ パターンB (ABテストの改修版)
   Traders/LoginB.blade.php 専用。クラスはすべて tb_ で始める。
   パターンA (Traders/Login.blade.php) は従来の CSS のままで、このファイルは読まない。

   方針
   - カルーセルをやめ、1画面目で「何のサービスか / どこから始めるか」を読ませる
   - 色はサイトの既存の値だけを使う
       緑 #61ad35 (アイコン・小見出し) / 濃い緑 #2f7d20 (白文字を載せる面・強調文字)
       新規会員登録のオレンジ #f07c00 (hover #d86e00。ヘッダーと同じ)
       淡い地色 #f7f8f6 / 罫線 #e3e6e0 / 本文 #333 / 補助 #555
   - セクションは画面幅いっぱいに地色を敷き、中身は 1200px の列に置く
   ============================================================ */

.tb{
    --tb-w: 1200px;
    --tb-ink: #1c1c1c;
    --tb-text: #333;
    --tb-sub: #555;
    --tb-line: #e3e6e0;
    --tb-bg: #f7f8f6;
    --tb-green: #61ad35;
    --tb-green-dark: #2f7d20;
    --tb-green-tint: #f1f8ec;
    --tb-orange: #f07c00;
    --tb-orange-hover: #d86e00;
    color: var(--tb-text);
    text-align: left;
}
/* リセットは :where() で詳細度を 0 にする。
   .tb p (詳細度 0,1,1) のように書くと、.tb_cp_lead (0,1,0) などの個別の余白より強くなり、
   見出し・本文の間の余白がすべて消えていた */
:where(.tb) *,
:where(.tb) *::before,
:where(.tb) *::after{
    box-sizing: border-box;
}
:where(.tb) :where(h2, h3, p, ol, ul){
    margin: 0;
    padding: 0;
}
:where(.tb) :where(ol, ul){
    list-style: none;
}
:where(.tb) em{
    font-style: normal;
}
/* 共通のお問い合わせ枠 (レイアウト側) との間を空ける */
.tb{
    padding-bottom: 56px;
}

/* ログイン前は本文コンテナの中に置かれる。1画面目をヘッダーの直下から始める */
body:has(.tb) .head_height.no_login.container{
    padding-top: 0;
}
@media screen and (min-width: 900px){
    body:has(.tb) .head_height.no_login.container{
        margin-top: var(--head-h, 70px);
    }
}
@media screen and (max-width: 899px){
    /* #2460 B は SP でもヘッダーを上に固定する (業務の指定)。
       ログイン前の SP は共通の指定でヘッダーが流れる (position: static) ので、このページだけ戻す。
       本文はヘッダーの高さ (70px) ぶん下げる */
    body:has(.tb) .head_bg.no_login{
        position: fixed;
    }
    body:has(.tb) .head_height.no_login.container{
        margin-top: var(--head-h, 70px);
    }
}

/* 画面幅いっぱいに広げるセクション (フッターと同じ手法。--sbw はスクロールバー幅)。
   地色の無いブロックも、中身の列の左右位置を揃えるために同じ幅の入れ物 (.tb_bleed) で包む */
.tb_hero,
.tb_cp,
.tb_section,
.tb_support,
.tb_bleed{
    width: calc(100vw - var(--sbw, 0px));
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
}
/* 中身の列 */
.tb_inner{
    width: calc(100% - 40px);
    max-width: var(--tb-w);
    margin-left: auto;
    margin-right: auto;
}
.tb_inner-narrow{
    max-width: 880px;
}
@media screen and (min-width: 900px){
    .tb_br_sp{
        display: none;
    }
}

/* _________________________________________ セクション共通 */
.tb_section{
    padding: 88px 0;
    background: #fff;
}
.tb_section-gray{
    background: var(--tb-bg);
}
.tb_head{
    margin-bottom: 40px;
    text-align: center;
}
.tb_eyebrow{
    margin-bottom: 8px;
    color: var(--tb-green);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: .2em;
}
.tb_ttl{
    color: var(--tb-ink);
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .02em;
}
.tb_lead{
    margin-top: 14px;
    color: var(--tb-sub);
    font-size: 16px;
    line-height: 1.8;
}
/* 見出しの右にボタンを置く行 */
.tb_head-row{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

/* _________________________________________ ボタン */
.tb_btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 32px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tb_btn:hover,
.tb_btn:focus-visible{
    text-decoration: none;
}
/* 右端の矢印。hover で少し右へ動く */
.tb_btn::after{
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.tb_btn:hover::after,
.tb_btn:focus-visible::after{
    transform: translateX(3px) rotate(45deg);
}
/* 新規会員登録 = 主要導線。サイト内どこでも同じオレンジ */
.tb_btn-signup{
    background: var(--tb-orange);
    border-color: var(--tb-orange);
    color: #fff;
}
.tb_btn-signup:hover,
.tb_btn-signup:focus-visible{
    background: var(--tb-orange-hover);
    border-color: var(--tb-orange-hover);
    color: #fff;
}
/* ログイン = 既存会員向け。白地に緑の枠、hover で緑に塗る */
.tb_btn-login{
    background: #fff;
    border-color: var(--tb-green-dark);
    color: var(--tb-green-dark);
}
.tb_btn-login:hover,
.tb_btn-login:focus-visible{
    background: var(--tb-green-dark);
    color: #fff;
}
.tb_btn-lg{
    min-height: 68px;
    padding: 0 56px;
    font-size: 20px;
}
@media (prefers-reduced-motion: reduce){
    .tb_btn,
    .tb_btn::after{
        transition: none;
    }
}

/* _________________________________________ 1画面目
   写真を画面の高さいっぱいに敷き、左側を暗くぼかして白い見出しを載せる。
   写真は上下に 10% ずつ余分に大きく置き、スクロールで文字より遅く動かす (JS)。
   下端は 3つの訴求カードが 72px 重なるので、そのぶん空けておく */
.tb_hero{
    position: relative;
    display: flex;
    align-items: center;
    height: calc(100vh - var(--head-h, 70px));
    height: calc(100svh - var(--head-h, 70px));
    min-height: 600px;
    max-height: 880px;
    overflow: hidden;
    background: #0e1a12;
    color: #fff;
}
.tb_hero_media{
    position: absolute;
    top: -10%;
    right: 0;
    bottom: -10%;
    left: 0;
    will-change: transform;
}
.tb_hero_photo,
.tb_hero_photo img{
    display: block;
    width: 100%;
    height: 100%;
}
.tb_hero_photo img{
    object-fit: cover;
    object-position: center 55%;
}
/* 文字の側 (左) を暗く落とし、下端も少し締める */
.tb_hero_media::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 20, 12, .8) 0%, rgba(8, 20, 12, .58) 36%, rgba(8, 20, 12, .08) 68%),
        linear-gradient(0deg, rgba(8, 20, 12, .4) 0%, rgba(8, 20, 12, 0) 40%);
}
.tb_hero_inner{
    position: relative;
    z-index: 1;
    padding: 0 0 72px;
}
.tb_hero_body{
    max-width: 720px;
    will-change: transform, opacity;
}
.tb_hero_ttl{
    color: #fff;
    font-size: clamp(40px, 4.6vw, 70px);
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: .02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
}
.tb_hero_ttl em{
    color: var(--tb-green);
}
.tb_hero_lead{
    margin: 28px 0 40px;
    color: rgba(255, 255, 255, .92);
    font-size: 20px;
    line-height: 1.8;
}
.tb_hero_cta{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.tb_hero_cta .tb_btn{
    min-width: 240px;
}
/* 写真の上ではログインは白抜きにする */
.tb_hero .tb_btn-login{
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.tb_hero .tb_btn-login:hover,
.tb_hero .tb_btn-login:focus-visible{
    background: #fff;
    border-color: #fff;
    color: var(--tb-green-dark);
}
/* 下へ続くことを示す線 (飾り) */
.tb_hero_scroll{
    position: absolute;
    z-index: 1;
    bottom: 100px;
    left: 50%;
    width: 1px;
    height: 56px;
    overflow: hidden;
    background: rgba(255, 255, 255, .3);
    transform: translateX(-50%);
}
.tb_hero_scroll span{
    display: block;
    width: 100%;
    height: 50%;
    background: #fff;
    animation: tb-scroll 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
}
/* SP の「下へスクロール」の案内: 見出しのすぐ上の右端に、縦書きの SCROLL と流れる線 */
.tb_hero_scroll_sp{
    display: none;
}
@media screen and (max-width: 899px){
    .tb_hero_scroll_sp{
        position: absolute;
        right: 0;
        /* .tb_hero_inner の上端 = 見出しの上端。その 20px 上に置く */
        bottom: calc(100% + 20px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: #fff;
        transition: opacity .2s linear;
    }
    .tb_hero_scroll_sp_text{
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: .25em;
        writing-mode: vertical-rl;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    }
    .tb_hero_scroll_sp_line{
        position: relative;
        width: 1px;
        height: 56px;
        overflow: hidden;
        background: rgba(255, 255, 255, .35);
    }
    .tb_hero_scroll_sp_line span{
        display: block;
        width: 100%;
        height: 50%;
        background: #fff;
        animation: tb-scroll 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
    }
}
@keyframes tb-scroll{
    0%{ transform: translateY(-100%); }
    100%{ transform: translateY(200%); }
}

/* 3つの訴求: 1画面目の下端に重ねるカード */
.tb_stats{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: -72px;
}
.tb_stat{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(20, 28, 16, .10);
}
.tb_stat_icon{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tb-green-tint);
}
.tb_stat_text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--tb-sub);
    font-size: 14px;
    line-height: 1.5;
}
.tb_stat_text strong{
    color: var(--tb-green-dark);
    font-size: 24px;
    line-height: 1.3;
}

/* 管理画面のバナー枠 */
.tb_bnr{
    margin-top: 48px;
    text-align: center;
}
.tb_bnr img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* _________________________________________ 写真の帯 (パララックス)
   写真は上下に 18% ずつ余分に大きく置き、スクロールで帯より遅く動かす (JS) */
.tb_band{
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100vw - var(--sbw, 0px));
    min-height: 560px;
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    overflow: hidden;
    background: #10205e;
    color: #fff;
}
.tb_band_media{
    position: absolute;
    top: -18%;
    right: 0;
    bottom: -18%;
    left: 0;
    will-change: transform;
}
.tb_band_media picture,
.tb_band_media img{
    display: block;
    width: 100%;
    height: 100%;
}
.tb_band_media img{
    object-fit: cover;
}
.tb_band_media::after{
    content: "";
    position: absolute;
    inset: 0;
}
.tb_band_inner{
    position: relative;
    z-index: 1;
    padding: 96px 0;
}
/* 帯の中を「舞台」と「窓」に分けた形 (仕入れのチャンスの帯)。動きなしでは帯いっぱいの写真のまま */
.tb_band_stage{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: inherit;
}
.tb_band_window{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.tb_band_line{
    display: block;
}
/* 仕入れのチャンス: 検索画面のイラストを右に見せ、左の文字側を紺で落とす
   (紺は A の同じスライドの文字色 #10205e) */
.tb_band-stock .tb_band_media img{
    object-position: right center;
}
.tb_band-stock .tb_band_media::after{
    background: linear-gradient(90deg, rgba(16, 32, 94, .92) 0%, rgba(16, 32, 94, .78) 34%, rgba(16, 32, 94, .1) 70%);
}
.tb_band_body{
    max-width: 620px;
}
.tb_band_lead{
    position: relative;
    padding-bottom: 14px;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    font-weight: bold;
}
.tb_band_lead::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 3px;
    background: var(--tb-green);
}
.tb_band_ttl{
    margin-top: 24px;
    color: #fff;
    font-size: clamp(32px, 3.4vw, 50px);
    font-weight: bold;
    line-height: 1.35;
    letter-spacing: .02em;
}
.tb_band_ttl em{
    color: var(--tb-green);
}
.tb_band_text{
    margin-top: 22px;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.9;
}
/* スローガン: 写真全体を少し落として、大きな一文を中央に置く */
.tb_band-slogan{
    min-height: 480px;
    background: #0e1a12;
}
.tb_band-slogan .tb_band_media img{
    /* 写真の主役 (車) は左の中ほどにあるので、左側を基準に切り抜く */
    object-position: left 55%;
}
.tb_band-slogan .tb_band_media::after{
    background: rgba(8, 20, 12, .5);
}
.tb_slogan_body{
    text-align: center;
}
/* 写真の上に置く白い枠のボタン。hover で白く塗る */
.tb_btn-ghost{
    margin-top: 36px;
    background: rgba(255, 255, 255, .06);
    border-color: #fff;
    color: #fff;
}
.tb_btn-ghost:hover,
.tb_btn-ghost:focus-visible{
    background: #fff;
    border-color: #fff;
    color: var(--tb-green-dark);
}
/* 読み上げ用 (画面には出さない) */
.tb_sr{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.tb_slogan{
    color: #fff;
    font-size: clamp(34px, 4.2vw, 64px);
    font-weight: bold;
    line-height: 1.45;
    letter-spacing: .08em;
    text-align: center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

/* _________________________________________ 動き (JS が .tb-motion を付けたときだけ)
   「視差効果を減らす」設定の人には .tb-motion を付けないので、すべて最初から表示される */
/* 1画面目: 読み込み時に写真がゆっくり寄り、文字が順に上がってくる */
.tb-motion .tb_hero_photo img{
    animation: tb-hero-zoom 2.4s cubic-bezier(.2, .8, .2, 1) both;
}
.tb-motion .tb_hero_ttl,
.tb-motion .tb_hero_lead,
.tb-motion .tb_hero_cta{
    animation: tb-rise 1s cubic-bezier(.2, .8, .2, 1) both;
}
.tb-motion .tb_hero_lead{ animation-delay: .15s; }
.tb-motion .tb_hero_cta{ animation-delay: .3s; }
@keyframes tb-hero-zoom{
    from{ transform: scale(1.08); }
    to{ transform: scale(1); }
}
@keyframes tb-rise{
    from{ opacity: 0; transform: translateY(24px); }
    to{ opacity: 1; transform: none; }
}
/* 画面に入ったら下からふわっと現れる */
.tb-motion [data-tb-reveal]{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.tb-motion [data-tb-reveal].is-in{
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce){
    .tb_hero_scroll span,
    .tb_hero_scroll_sp_line span{
        animation: none;
    }
}

/* _________________________________________ キャンペーン (TriOrb 風の場面)
   紺の地に青い光がにじむ暗い場面。文言は中央寄りの列、選手と応援バナーは右に浮かぶカード。
   色はキャンペーンの紺 (#0b1338)・青 (#1553b0)・緑 (タグ) の既存の値だけを使う。
   ここは「動きなし」の基本の見た目。動きは下の .tb-scene-motion / .is-scene で足す */
.tb_cp{
    position: relative;
    margin-top: 72px;
    background: #050b24;
    color: #fff;
    /* 中の要素を画面に留める (sticky) ため、hidden ではなく clip ではみ出しを切る */
    overflow: clip;
}
.tb_cp_stage{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 88px 0;
    overflow: hidden;
}
/* 青い光。場面の進み具合 (--p) で少し動き、明るくなる */
.tb_cp_glow{
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(40% 45% at calc(70% - var(--p, .5) * 20%) calc(60% - var(--p, .5) * 20%), rgba(21, 83, 176, .75) 0%, rgba(21, 83, 176, 0) 70%),
        radial-gradient(30% 35% at 20% 80%, rgba(21, 83, 176, .35) 0%, rgba(21, 83, 176, 0) 70%),
        linear-gradient(180deg, #050b24 0%, #0b1338 100%);
    opacity: calc(.7 + var(--p, .5) * .3);
    pointer-events: none;
}
.tb_cp_inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    align-items: center;
    gap: 48px;
}
.tb_cp_ttl{
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.25;
    letter-spacing: .02em;
}
.tb_cp_tag{
    display: block;
    width: fit-content;
    margin-bottom: 14px;
    padding: 4px 16px;
    border-radius: 4px;
    background: var(--tb-green-dark);
    color: #fff;
    font-size: 20px;
    letter-spacing: .08em;
}
.tb_cp_lines{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 28px 0 32px;
}
.tb_cp_line{
    display: block;
    color: rgba(255, 255, 255, .88);
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5;
}
/* 賞品名: 大きく、白 → 淡い青へのにじみで光らせる */
.tb_cp_line-em{
    color: #fff;
    font-size: 36px;
    line-height: 1.3;
    text-shadow: 0 0 24px rgba(21, 83, 176, .9), 0 0 2px rgba(255, 255, 255, .4);
}
/* 期間: 濃紺の地に白抜き。日付は太く・字間を詰め、青く光らせる */
.tb_cp_term{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: fit-content;
    padding: 14px 22px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    background: rgba(11, 19, 56, .75);
    color: #fff;
}
.tb_cp_term_label{
    font-size: 16px;
    font-weight: bold;
    letter-spacing: .08em;
    opacity: .85;
}
.tb_cp_term_date{
    font-size: 36px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    -webkit-text-stroke: .6px currentColor;
    text-shadow: 0 0 18px rgba(21, 83, 176, .95);
}
.tb_cp_term_date small{
    font-size: 18px;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
}
.tb_cp_note{
    margin-top: 10px;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
}
.tb_cp_cta{
    margin-top: 32px;
}
/* 「キャンペーン詳細を見る」: 暗い場面の主役のボタン。
   緑の塗り (期間限定のラベルと同じ #2f7d20) に緑の光をにじませ、数秒おきに光の筋を横切らせる。
   hover で少し浮き、光が強まり、右端の白い丸の矢印が右へ動く */
.tb_cp_btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
    padding: 0 12px 0 36px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--tb-green-dark);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(47, 125, 32, .45), inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-color .25s ease;
}
.tb_cp_btn:hover,
.tb_cp_btn:focus-visible{
    background: var(--c-green-hover, #4f9429);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(97, 173, 53, .6), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.tb_cp_btn:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* 光の筋 */
.tb_cp_btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: tb-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tb-shine{
    0%, 62%{ left: -60%; }
    100%{ left: 130%; }
}
/* 右端の白い丸の矢印 */
.tb_cp_btn::after{
    content: "";
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d20' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tb_cp_btn:hover::after,
.tb_cp_btn:focus-visible::after{
    transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce){
    .tb_cp_btn,
    .tb_cp_btn::after{
        transition: none;
    }
    .tb_cp_btn::before{
        animation: none;
        display: none;
    }
    .tb_cp_btn:hover,
    .tb_cp_btn:focus-visible,
    .tb_cp_btn:hover::after,
    .tb_cp_btn:focus-visible::after{
        transform: none;
    }
}
/* 背景の大きな英字 (飾り)。線だけの文字で薄く置き、進み具合で左へ流す。
   選手画像 (透過 PNG) の後ろに来ると透けて重なって見えるため、場面の下端に置く */
.tb_cp_bgtext{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    margin: 0;
    color: transparent;
    font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(100px, 12vw, 200px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
    transform: translate3d(calc(8% - var(--p, .3) * 30%), 18%, 0);
    pointer-events: none;
    user-select: none;
}
/* 769〜1100px は文字の列が 421px しかなく、見出しが「出品・／成約キャンペーン」、
   賞品名が「東京ドーム観戦チケット／＆」と言葉の途中で折れていた (1024px で実測)。
   この幅では文字の列を広く取る (6:4)。選手画像は少し小さくなる */
@media screen and (min-width: 900px) and (max-width: 1100px){
    .tb_cp_inner{
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 32px;
    }
}
/* さらに狭い 769〜900px では、見出しを少し小さくして1行に収める */
@media screen and (min-width: 900px) and (max-width: 900px){
    .tb_cp_ttl{
        font-size: 34px;
    }
}
/* 選手画像と応援バナー。
   どちらも支給素材なので、加工して見せない (業務の指定: 許諾の条件)。
   板・枠・影・ぼかし・傾き・スクロールに合わせた変形は付けず、平らなまま置く */
.tb_cp_cards{
    position: relative;
}
.tb_cp_card{
    margin: 0;
}
.tb_cp_card img{
    display: block;
    width: 100%;
    height: auto;
}
.tb_cp_card-players figcaption{
    margin-top: 6px;
    color: rgba(255, 255, 255, .85);
    font-size: 11px;
    line-height: 1.2;
    text-align: right;
}
.tb_cp_card-note{
    width: 78%;
    /* 選手画像と重ならないよう、下に 44px 離して置く */
    margin: 44px 0 0 auto;
}
.tb_cp_card-note img{
    border-radius: 3px;
}

/* ---- 動き: 文言は ぼかし → くっきり で1行ずつ現れる (PC は進み具合、SP は画面に入った順) ----
   位置は transform ではなく独立した translate で動かす。カードは transform で傾けているので、
   transform を使うと傾きを打ち消してしまう */
.tb-scene-motion [data-tb-step]{
    opacity: 0;
    filter: blur(10px);
    translate: 0 28px;
    transition: opacity .7s ease, filter .7s ease, translate .9s cubic-bezier(.2, .8, .2, 1);
}
.tb-scene-motion [data-tb-step].is-on{
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
}
.tb-scene-motion .tb_cp_card[data-tb-step],
.tb-scene-motion .tb_cp_card[data-tb-step].is-on{
    filter: none;
}
.tb-scene-motion .tb_cp_card[data-tb-step]{
    translate: 0 48px;
    transition: opacity .9s ease, translate 1.2s cubic-bezier(.2, .8, .2, 1);
}
.tb-scene-motion .tb_cp_card[data-tb-step].is-on{
    translate: 0 0;
}

/* ---- 仕入れのチャンスの帯: 大きな見出しが1文字ずつ満ちる場面 (PC・SP とも) ----
   帯を画面の約1.7倍の長さにして舞台を留める (余計なスクロールは画面の約0.7倍ぶん)。
   見出しは進み具合 8%〜72% の間に先頭から1文字ずつ 薄い → 白 に満ちる (--tp: 0→1)。
   74% を過ぎると「仕入れのチャンス」に下線が引かれ、80% で説明文が出る (data-tb-at)。
   写真は進み具合に合わせてゆっくり引きながら横に少し流れる。
   sticky を効かせるため、帯のはみ出しは hidden ではなく clip で切る */
.tb_band-stock .tb_band_ttl em{
    padding-bottom: 2px;
    background: linear-gradient(var(--tb-green), var(--tb-green)) left bottom / 100% 4px no-repeat;
}
.tb_band-stock.is-scene{
    display: block;
    height: 190vh;
    min-height: 0;
    overflow: clip;
}
.tb_band-stock.is-scene .tb_band_stage{
    position: sticky;
    top: var(--head-h, 70px);
    height: calc(100vh - var(--head-h, 70px));
    min-height: 0;
    overflow: hidden;
}
.tb_band-stock.is-scene .tb_band_media{
    top: 0;
    bottom: 0;
    /* 右端 (検索窓のイラスト) を切らないよう、右端を基準に引いていく。横へはずらさない */
    transform: scale(calc(1.12 - var(--p, 0) * .12));
    transform-origin: right center;
    will-change: transform;
}
.tb_band-stock.is-scene .tb_band_body{
    max-width: none;
}
/* 満たす進み具合: 各要素の --from 〜 --to の間で --tp が 0→1 になる。
   小見出し 2〜16% → 見出し 14〜60% → 説明文 60〜90% の順に1文字ずつ満たす (PC・SP とも) */
.tb_band-stock.is-scene [data-tb-fill]{
    --tp: clamp(0, calc((var(--p, 0) - var(--from, .14)) / (var(--to, .6) - var(--from, .14))), 1);
}
.tb_band-stock.is-scene [data-tb-fill].is-split .tb_ch{
    opacity: clamp(.18, calc(var(--tp) * (var(--n) + 3) - var(--i)), 1);
    transition: opacity .12s linear;
}
.tb_band-stock.is-scene .tb_band_lead{
    --from: .02;
    --to: .16;
    padding-bottom: 18px;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.4;
}
.tb_band-stock.is-scene .tb_band_ttl{
    --from: .14;
    --to: .6;
    margin-top: 26px;
    font-size: clamp(40px, 5vw, 76px);
    line-height: 1.3;
}
.tb_band-stock.is-scene .tb_band_text{
    --from: .6;
    --to: .9;
    margin-top: 26px;
    color: #fff;
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: bold;
    line-height: 1.7;
}
.tb_band-stock.is-scene .tb_band_ttl em{
    background-size: calc(clamp(0, calc((var(--p, 0) - .56) / .08), 1) * 100%) 4px;
}
/* SP: 文字サイズは幅と高さの両方で上限を持たせる (320×568 など背の低い画面でも舞台に収める) */
@media screen and (max-width: 899px){
    .tb_band-stock.is-scene{
        height: 200vh;
    }
    .tb_band-stock.is-scene .tb_band_inner{
        padding: 32px 0;
    }
    .tb_band-stock.is-scene .tb_band_lead{
        padding-bottom: 16px;
        font-size: min(26px, 7.2vw, 4vh);
    }
    .tb_band-stock.is-scene .tb_band_ttl{
        margin-top: 22px;
        font-size: min(38px, 10.6vw, 5.4vh);
    }
    .tb_band-stock.is-scene .tb_band_text{
        margin-top: 22px;
        font-size: min(24px, 6.4vw, 3.6vh);
        line-height: 1.6;
    }
}

/* PC のキャンペーンは画面に留めず、入ったら自動で最後まで再生する (data-tb-autoplay の JS)。
   以前は画面の2倍の長さに留めてスクロール量で進めていたが、途中で止まると何のことか分からないため */
@media (prefers-reduced-motion: reduce){
    .tb-scene-motion [data-tb-step]{
        opacity: 1;
        filter: none;
        translate: none;
        transition: none;
    }
}
/* 応援バナー + 権利表記 */
.tb_credit{
    display: block;
    margin-top: 12px;
}
.tb_credit img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.tb_credit p,
.tb_credit_copy{
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* _________________________________________ ピックアップ */
/* カードの列は画面幅いっぱいに流し、左端は中身の列 (1200px) に揃える */
.tb_pickup_track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 4px max(20px, calc((100% - var(--tb-w)) / 2)) 16px;
    scrollbar-width: none;
}
.tb_pickup_track::-webkit-scrollbar{
    display: none;
}
.tb_car{
    flex: 0 0 240px;
}
.tb_car_link{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    color: var(--tb-text);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.tb_car_link:hover,
.tb_car_link:focus-visible{
    color: var(--tb-text);
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(20, 28, 16, .10);
}
.tb_car_photo{
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #eee;
}
.tb_car_photo img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tb_car_tags{
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
}
.tb_car_tag{
    padding: 3px 8px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.3;
}
.tb_car_tag-deadline{ background: #d10000; }
.tb_car_tag-new{ background: var(--tb-green-dark); }
.tb_car_tag-hot{ background: var(--tb-orange); }
.tb_car_body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}
.tb_car_name{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.9em;
    margin-bottom: 8px;
    color: var(--tb-ink);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.45;
}
.tb_car_spec{
    color: var(--tb-sub);
    font-size: 13px;
    line-height: 1.6;
}
.tb_car_sep{
    margin: 0 4px;
    color: #bbb;
}
.tb_car_price{
    margin-top: auto;
    padding-top: 10px;
    color: #666;
    font-size: 12px;
}
.tb_car_price strong{
    margin: 0 2px;
    color: #d10000;
    font-size: 22px;
}
.tb_car_deadline{
    margin-top: 2px;
    color: #757575;
    font-size: 12px;
}
@media (prefers-reduced-motion: reduce){
    .tb_faq_item,
    .tb_faq_item summary::after{
        transition: none;
    }
    .tb_faq_item.is-opening p{
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce){
    .tb_car_link{
        transition: none;
    }
    .tb_car_link:hover{
        transform: none;
    }
}

/* _________________________________________ Smartオークションとは / 選ばれる理由 */
.tb_about{
    max-width: 860px;
    margin: 0 auto 80px;
    text-align: center;
}
.tb_about_text{
    margin-top: 20px;
    font-size: 17px;
    line-height: 2;
}
.tb_reasons{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.tb_reason{
    position: relative;
    padding: 32px 32px 30px 108px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
}
.tb_reason_num{
    position: absolute;
    top: 26px;
    left: 32px;
    color: var(--tb-green);
    font-size: 44px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .02em;
}
.tb_reason_ttl{
    color: var(--tb-ink);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}
.tb_reason_ttl em{
    color: var(--tb-green-dark);
}
.tb_reason p{
    margin-top: 12px;
    color: var(--tb-sub);
    font-size: 14px;
    line-height: 1.8;
}

/* _________________________________________ 主な機能 */
.tb_features{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.tb_feature{
    padding: 32px 24px 28px;
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
    text-align: center;
}
.tb_feature_icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--tb-green-tint);
    color: var(--tb-green-dark);
}
.tb_feature_icon svg{
    width: 30px;
    height: 30px;
}
.tb_feature h3{
    margin: 18px 0 10px;
    color: var(--tb-ink);
    font-size: 18px;
    font-weight: bold;
}
.tb_feature p{
    color: var(--tb-sub);
    font-size: 14px;
    line-height: 1.8;
}

/* _________________________________________ 入会までの流れ */
.tb_flow{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    counter-reset: none;
}
.tb_flow li{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 12px 24px;
    background: var(--tb-bg);
    border-radius: 6px;
    text-align: center;
}
/* 段の間の矢印 */
.tb_flow li:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--tb-green);
    border-right: 2px solid var(--tb-green);
    transform: rotate(45deg);
}
.tb_flow_num{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tb-green-dark);
    color: #fff;
    font-size: 17px;
    font-weight: bold;
}
.tb_flow_text{
    /* SP の横並び (番号 + 文字) で縮めるように。縮まないと長い手順が枠から 8px はみ出していた */
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--tb-ink);
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
}
.tb_flow_text small{
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 12px;
    font-weight: normal;
}
.tb_flow_cta{
    margin-top: 48px;
    text-align: center;
}

/* _________________________________________ よくある質問 */
.tb_faq{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tb_faq_item{
    background: #fff;
    border: 1px solid var(--tb-line);
    border-radius: 6px;
}
.tb_faq_item summary{
    position: relative;
    padding: 20px 56px 20px 64px;
    color: var(--tb-ink);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
    transition: color .2s ease;
}
.tb_faq_item summary::-webkit-details-marker{
    display: none;
}
.tb_faq_item summary:hover,
.tb_faq_item summary:focus-visible{
    color: #d97d00;
}
/* Q / A の丸 */
.tb_faq_item summary::before,
.tb_faq_item p::before{
    position: absolute;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}
.tb_faq_item summary::before{
    content: "Q";
    top: 18px;
    background: var(--tb-green-dark);
}
/* 開閉の印 (＋ / −) */
.tb_faq_item summary::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background:
        linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
    color: var(--tb-green-dark);
    transition: transform .25s ease;
}
.tb_faq_item[open] summary::after{
    background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
    transform: rotate(180deg);
}
/* 閉じている途中は ＋ に戻しておく */
.tb_faq_item.is-closing summary::after{
    background:
        linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
    transform: rotate(0deg);
}
/* 開くときは回答が下からふわっと現れ、閉じるときは薄くなって消える */
.tb_faq_item.is-opening p{
    animation: tb-faq-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.tb_faq_item.is-closing p{
    opacity: 0;
    transition: opacity .2s ease;
}
@keyframes tb-faq-in{
    from{ opacity: 0; transform: translateY(-6px); }
    to{ opacity: 1; transform: none; }
}
/* 開いている項目は枠を緑にして、どれを開いたか分かるようにする */
.tb_faq_item{
    transition: border-color .25s ease, box-shadow .25s ease;
}
.tb_faq_item[open]:not(.is-closing){
    border-color: rgba(47, 125, 32, .35);
    box-shadow: 0 6px 18px rgba(20, 28, 16, .06);
}
.tb_faq_item p{
    position: relative;
    padding: 0 24px 22px 64px;
    color: var(--tb-text);
    font-size: 15px;
    line-height: 1.9;
}
.tb_faq_item p::before{
    content: "A";
    top: 0;
    background: var(--tb-orange);
}
.tb_faq_item p em{
    color: var(--tb-green-dark);
    font-weight: bold;
}

/* _________________________________________ 侍ジャパン応援 */
.tb_support{
    position: relative;
    overflow: hidden;
    background: #0b1f52;
}
.tb_support_link,
.tb_support_link:hover{
    display: block;
    color: inherit;
    text-decoration: none;
}
.tb_support_bg{
    position: absolute;
    inset: 0;
}
.tb_support_bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tb_support_inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 0;
}
.tb_support_credit{
    flex: 0 1 520px;
    margin-top: 0;
}
.tb_support_players{
    flex: 0 1 560px;
    min-width: 0;
    width: 100%;
    height: auto;
}

/* ============================================================
   SP (768px 以下)
   ============================================================ */
@media screen and (max-width: 899px){
    .tb_inner{
        width: calc(100% - 32px);
    }
    .tb_section{
        padding: 56px 0;
    }
    .tb_head{
        margin-bottom: 28px;
    }
    .tb_ttl{
        font-size: 22px;
    }
    .tb_lead{
        font-size: 14px;
    }
    .tb_lead br{
        display: none;
    }
    .tb_head-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .tb_btn{
        min-height: 52px;
        padding: 0 20px;
        font-size: 16px;
    }
    .tb_btn-lg{
        width: 100%;
        min-height: 60px;
        font-size: 18px;
    }

    /* 1画面目: 写真を全面に敷き、文字は下寄せ。下から暗く落とす */
    .tb_hero{
        align-items: flex-end;
        min-height: 560px;
        max-height: 760px;
    }
    .tb_hero_photo img{
        object-position: center;
    }
    .tb_hero_media::after{
        background: linear-gradient(0deg, rgba(8, 20, 12, .88) 0%, rgba(8, 20, 12, .55) 48%, rgba(8, 20, 12, .12) 80%);
    }
    .tb_hero_inner{
        padding: 0 0 100px;
    }
    .tb_hero_ttl{
        font-size: 32px;
    }
    .tb_hero_lead{
        margin: 16px 0 24px;
        font-size: 15px;
    }
    .tb_hero_cta{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .tb_hero_cta .tb_btn{
        width: 100%;
        min-width: 0;
    }
    .tb_hero_scroll{
        display: none;
    }
    /* 写真の帯 */
    .tb_band{
        min-height: 440px;
    }
    .tb_band_inner{
        padding: 64px 0;
    }
    .tb_band-stock .tb_band_media::after{
        background: linear-gradient(90deg, rgba(16, 32, 94, .9) 0%, rgba(16, 32, 94, .72) 100%);
    }
    .tb_band_lead{
        font-size: 15px;
    }
    .tb_band_ttl{
        font-size: 28px;
    }
    .tb_band_text{
        font-size: 14px;
    }
    .tb_band_text br{
        display: none;
    }
    .tb_band-slogan{
        min-height: 360px;
    }
    .tb_slogan{
        font-size: 28px;
    }
    .tb_btn-ghost{
        margin-top: 24px;
    }
    .tb_stats{
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: -72px;
    }
    .tb_stat{
        padding: 14px 16px;
        gap: 14px;
    }
    .tb_stat_icon{
        width: 48px;
        height: 48px;
    }
    .tb_stat_icon svg{
        width: 30px;
        height: 30px;
    }
    .tb_stat_text{
        font-size: 13px;
    }
    .tb_stat_text strong{
        font-size: 19px;
    }
    .tb_bnr{
        margin-top: 32px;
    }

    /* キャンペーン: 1列。カードは文言の下に置き、傾きは控えめにする */
    .tb_cp{
        margin-top: 48px;
    }
    .tb_cp_stage{
        min-height: 0;
        padding: 56px 0;
    }
    .tb_cp_inner{
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .tb_cp_ttl{
        font-size: 26px;
    }
    .tb_cp_tag{
        font-size: 15px;
    }
    .tb_cp_lines{
        margin: 20px 0 22px;
    }
    .tb_cp_line{
        font-size: 17px;
    }
    .tb_cp_line-em{
        font-size: 25px;
    }
    .tb_cp_term_label{
        font-size: 13px;
    }
    .tb_cp_term_date{
        font-size: 26px;
    }
    .tb_cp_term_date small{
        font-size: 14px;
    }
    .tb_cp_note{
        font-size: 14px;
    }
    .tb_cp_btn{
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-height: 60px;
        padding: 0 10px 0 24px;
        font-size: 18px;
    }
    .tb_cp_btn::after{
        width: 40px;
        height: 40px;
    }
    .tb_cp_bgtext{
        font-size: 80px;
    }
    /* SP は左右中央に置く (業務の指定) */
    .tb_cp_card-note{
        width: 88%;
        margin: 28px auto 0;
    }

    /* ピックアップ */
    .tb_pickup_track{
        gap: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .tb_car{
        flex-basis: 210px;
    }

    /* とは / 理由 */
    .tb_about{
        margin-bottom: 48px;
    }
    .tb_about_text{
        font-size: 15px;
        text-align: left;
    }
    .tb_about_text br,
    .tb_reason p br{
        display: none;
    }
    .tb_reasons{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .tb_reason{
        padding: 22px 18px 20px 72px;
    }
    .tb_reason_num{
        top: 20px;
        left: 18px;
        font-size: 32px;
    }
    .tb_reason_ttl{
        font-size: 17px;
    }

    /* 主な機能: アイコンを左に置いた横長のカード */
    .tb_features{
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .tb_feature{
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 18px;
        text-align: left;
    }
    .tb_feature_icon{
        grid-row: 1 / span 2;
        width: 52px;
        height: 52px;
        margin: 0;
    }
    .tb_feature_icon svg{
        width: 26px;
        height: 26px;
    }
    .tb_feature h3{
        margin: 2px 0 6px;
        font-size: 16px;
    }
    .tb_feature p br{
        display: none;
    }

    /* 入会までの流れ: 縦に積む */
    .tb_flow{
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .tb_flow li{
        flex-direction: row;
        gap: 14px;
        padding: 16px 18px;
        text-align: left;
    }
    .tb_flow li:not(:last-child)::after{
        top: auto;
        right: auto;
        bottom: -12px;
        left: 36px;
        margin-top: 0;
        transform: rotate(135deg);
    }
    .tb_flow_num{
        flex: none;
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
    .tb_flow_text{
        font-size: 15px;
    }
    .tb_flow_cta{
        margin-top: 32px;
    }

    /* よくある質問 */
    .tb_faq_item summary{
        padding: 16px 44px 16px 54px;
        font-size: 15px;
    }
    .tb_faq_item summary::before,
    .tb_faq_item p::before{
        left: 14px;
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .tb_faq_item summary::before{
        top: 15px;
    }
    .tb_faq_item summary::after{
        right: 16px;
    }
    .tb_faq_item p{
        padding: 0 18px 18px 54px;
        font-size: 14px;
    }

    /* 侍ジャパン応援: 選手を上、バナーを下 */
    .tb_support_inner{
        flex-direction: column-reverse;
        gap: 12px;
        padding: 24px 0;
    }
    .tb_support_credit,
    .tb_support_players{
        flex: none;
        width: 100%;
    }
}

/* _________________________________________ キャンペーン (SP の並び)
   業務の指定で SP は 選手画像とバナー → 流れる CAMPAIGN の文字 → テキスト・ボタン の順にする。
   流れる文字の帯 (.tb_cp_marquee) は SP だけ出し、背景の英字 (.tb_cp_bgtext) は SP では出さない */
.tb_cp_marquee{
    display: none;
}
@media screen and (max-width: 899px){
    .tb_cp_bgtext{
        display: none;
    }
    .tb_cp_inner{
        row-gap: 0;
    }
    .tb_cp_cards{
        order: 1;
    }
    .tb_cp_marquee{
        order: 2;
        display: block;
        /* 左右の余白 (16px) の外まで広げて画面幅いっぱいに流す */
        width: calc(100% + 32px);
        margin: 32px -16px 28px;
        overflow: hidden;
    }
    .tb_cp_copy{
        order: 3;
    }
    .tb_cp_marquee_track{
        display: flex;
        width: max-content;
        animation: tb-marquee 18s linear infinite;
    }
    .tb_cp_marquee_set{
        display: flex;
        flex: none;
    }
    .tb_cp_marquee_set span{
        padding-right: .5em;
        color: transparent;
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: 64px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: .02em;
        white-space: nowrap;
        -webkit-text-stroke: 1px rgba(255, 255, 255, .28);
    }
    /* 2つ目ごとに白で塗って、流れにリズムを付ける */
    .tb_cp_marquee_set span:nth-child(2){
        color: rgba(255, 255, 255, .9);
        -webkit-text-stroke: 0;
    }
}
@keyframes tb-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .tb_cp_marquee_track{
        animation: none;
    }
}

/* 320px ではキャンペーンのボタンの幅が 288px になり、文字が2行に折れていた。
   (SP 用のまとまりの途中に差し込むと、後ろの SP 用の指定がすべて 360px 以下でしか効かなくなるので、
    必ずまとまりの外に置く) */
@media screen and (max-width: 360px){
    .tb_cp_btn{
        gap: 12px;
        padding-left: 18px;
        font-size: 16px;
        letter-spacing: 0;
    }
}