@charset "UTF-8";
/* ==========================================================================
   トラックバリュー LP  ファーストビュー（Figma: Desktop-1 / iPhone 17-1 準拠）

   ■読み込み順
     common.css → add-test.css → smart.css → fv.css（最後）

   ■既存CSSとの関係
     - common.css  #mainvisual { min-height:400px; background-image:mv_bg_n2.jpg; text-align:center }
     - add.css     .new #mainvisual { background-image: mv_back.png }
     - smart.css   #mainvisual, .sec, .cv { background: none !important }
     上記を安全に無効化するため、
       (1) 打ち消しは .new #mainvisual.fvNew（詳細度 1-2-0）で行う
       (2) 背景は #mainvisual ではなく内側の .fvNew__stage に持たせる
     という2段構えにしています。!important は使っていません。

   ■サイズ設計
     カード内部はすべて em で記述し、.fvNew__card の font-size だけを
     ブレークポイントごとに切り替えます。Figma の PC 版と SP 版は
     ちょうど 0.6434 倍の相似形だったため、この1変数で両方を再現できます。
   ========================================================================== */

/* --------------------------------------------------------------------------
   既存指定の打ち消し
   -------------------------------------------------------------------------- */
.new #mainvisual.fvNew,
#mainvisual.fvNew {
    min-height: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    text-align: left;
    overflow: hidden;
}

.fvNew {
    /* common.css の body と同じフォントスタック */
    font-family: 'Noto Sans JP', '游ゴシック体', Yu Gothic, '游ゴシック', 'YuGothic',
        'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    --fv-red: #ef0201;
    --fv-red-dark: #da1717;
    --fv-red-text: #f64748;
    --fv-gray: #b1b1b1;
    --fv-ink: #1a1a1a;
    --fv-line: #cacacb;
    --fv-card: #fdfdfd;
}

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

/* --------------------------------------------------------------------------
   背景ステージ（smart.css の background:none !important を回避するための層）
   -------------------------------------------------------------------------- */
.fvNew__stage {
    position: relative;
    /* 画像未設置でも成立するようCSSの放射背景をフォールバックに敷いています */
    background-color: #c50000;
    background-image: url("/assets/img/fv/fv_bg.jpg"),
        repeating-conic-gradient(from 0deg at 50% 34%, #d40806 0deg 3deg, #b70402 3deg 6deg);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: cover, cover;
}

/* ==========================================================================
   PC（768px〜）
   Figma Desktop-1 は 1920px 幅・コンテンツ幅 1308px。
   1308px を上限に、それ未満の幅では比率を保ったまま縮小します。
   ========================================================================== */
@media screen and (min-width: 768px) {

    .fvNew__inner {
        width: min(1308px, 96vw);
        margin: 0 auto;
        /* 上端 49px / 下端 62px（コンテンツ幅 1308px 基準）。
           padding の % は親（.fvNew__stage＝全幅）基準になってしまうため vw で指定。
           96vw = 1308px のとき 1vw = 13.625px。
           固定ヘッダー分の余白は common.js の fixedContent() が body に付与するので、
           ここで足すと二重になる。足さないこと。 */
        padding: min(49px, 3.6vw) 0 min(62px, 4.55vw);
    }

    .fvNew__main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .fvNew__catch {
        width: 57.3%;
        margin: 1.99% 0 0 -1.15%;
        flex: none;
    }

    .fvNew__card {
        width: 43.7%;
        flex: none;
        /* カード幅 572px のとき 16px。狭い幅では比率を保って縮小 */
        font-size: min(16px, 1.174vw);
    }
}

/* 768〜1150px 帯：そのままの比率だとカードが窮屈になるので取り分を少し増やす
   （ヘッダーが flex-wrap して高くなる分は common.js が body 側で吸収する） */
@media screen and (min-width: 768px) and (max-width: 1150px) {
    .fvNew__catch {
        width: 52%;
    }

    .fvNew__card {
        width: 47%;
        font-size: min(16px, 1.262vw);
    }
}

/* ==========================================================================
   SP（〜767px）
   Figma iPhone 17-1 は 402px 幅。1px = 100/402 vw で可変。
   SP のヘッダーは smart.css で position:relative（通常フロー）なのでオフセット不要。
   ========================================================================== */
@media screen and (max-width: 767px) {

    .fvNew__stage {
        background-size: 197vw auto, cover;
        background-position: center top, center top;
    }

    .fvNew__inner {
        width: 100%;
        padding: 8.21vw 0 5.22vw;
    }

    .fvNew__catch {
        width: 96.27vw;
        margin: 0 auto;
    }

    .fvNew__card {
        width: 91.6vw;
        margin: 3.23vw auto 0;
        /* PC 16px の 0.6434 倍 = 10.29px（402px 幅時） */
        font-size: 2.56vw;
    }

    .fvNew br.sp {
        display: inline;
    }
}

/* ==========================================================================
   査定カード内部（PC / SP 共通。すべて em ＝ .fvNew__card の font-size 基準）
   ========================================================================== */
.fvNew__card {
    padding: 1.75em 1.625em 1.5em;
    background: var(--fv-card);
    border-radius: 1.125em;
    box-shadow: 0 .5em .25em rgba(0, 0, 0, .35);
    line-height: 1.5;
    color: #333;
}

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

/* ---- 見出し ---- */
.fvNew__heading {
    margin: 0;
    font-size: 2.625em;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    color: var(--fv-ink);
}

.fvNew__heading em {
    font-style: normal;
    margin-left: .45em;
    font-size: .952em;
    color: #ee1719;
    letter-spacing: .12em;
}

/* ---- ＼ 無料査定をはじめる ／ ---- */
.fvNew__lead {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .85em;
    margin: 1.25em 0 0;
    font-size: 1.625em;
    font-weight: 500;
    line-height: 1.28;
    color: #323232;
}

.fvNew__lead::before,
.fvNew__lead::after {
    content: "";
    width: .12em;
    height: 1.1em;
    background: #323232;
    flex: none;
}

.fvNew__lead::before {
    transform: rotate(-24deg);
}

.fvNew__lead::after {
    transform: rotate(24deg);
}

/* ---- ステップインジケーター ---- */
.fvNew__steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8em;
    margin: 1.625em 0 0;
    padding: 0;
    font-size: 1.25em;
    list-style: none;
}

.fvNew__step {
    display: flex;
    align-items: center;
    gap: .45em;
}

.fvNew__stepNum {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: var(--fv-gray);
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.fvNew__stepLabel {
    font-weight: 400;
    color: var(--fv-gray);
    white-space: nowrap;
}

.fvNew__step.is-current .fvNew__stepNum {
    background: var(--fv-red);
}

.fvNew__step.is-current .fvNew__stepLabel {
    font-size: .9em;
    font-weight: 500;
    color: var(--fv-red-text);
}

/* ---- 入力欄 ---- */
.fvNew__field {
    margin-top: 2em;
}

.fvNew__field:first-of-type {
    margin-top: 2.125em;
}

.fvNew__labelRow {
    display: flex;
    align-items: center;
    gap: .75em;
    height: 1.9375em;
}

.fvNew__label {
    font-size: 1.25em;
    font-weight: 400;
    color: #3d3d3e;
}

.fvNew__req {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.94em;
    height: 1.67em;
    border: 1px solid var(--fv-red-dark);
    border-radius: .11em;
    background: var(--fv-red);
    color: #fff;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1;
    flex: none;
}
.fvNew__req.n {
  background: #999;
		 border: 1px solid #999;
}

.fvNew__selectWrap,
.fvNew__inputWrap {
    position: relative;
    margin-top: .75em;
}

.fvNew__selectWrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.125em;
    width: .875em;
    height: .875em;
    margin-top: -.56em;
    border-right: .125em solid #6e6e6e;
    border-bottom: .125em solid #6e6e6e;
    transform: rotate(45deg);
    pointer-events: none;
}

.fvNew select,
.fvNew input[type="text"],
.fvNew input[type="tel"] {
    width: 100%;
    height: 2.8em;
    padding: 0 1.3em;
    border: 1px solid var(--fv-line);
    border-radius: .2em;
    background: var(--fv-card);
    color: #575757;
    font-family: inherit;
    font-size: 1.25em;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
}

.fvNew__selectWrap select {
    padding-right: 2.2em;
}

.fvNew input::placeholder {
    color: #9a9a9a;
}

/* ---- CTA ---- */
.fvNew__submit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2.5625em;
    margin: .8125em 0 0;
    padding: 0 1.25em;
    border: 0;
    border-bottom: .125em solid #c07d05;
    border-radius: .25em;
    background: linear-gradient(180deg, #f8d264 0%, #efb232 48%, #e09a19 100%);
    box-shadow: 0 .09em .19em rgba(0, 0, 0, .2);
    color: #272001;
    font-family: inherit;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.fvNew__submit::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.06em;
    width: .406em;
    height: .406em;
    margin-top: -.25em;
    border-right: .09em solid #272001;
    border-bottom: .09em solid #272001;
    transform: rotate(-45deg);
}

.fvNew__note {
    margin: .875em 0 0;
    font-size: 1.25em;
    color: #595859;
    text-align: center;
}

.fvNew__nosales {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6em;
    height: 2.2em;
    margin: .8em 0 0;
    border: 1px solid #cfd0d0;
    border-radius: .35em;
    background: #fcfdfd;
    color: #484848;
    font-size: 1.25em;
    font-weight: 500;
}

.fvNew__nosales svg {
    width: 1.25em;
    height: 1.3em;
    fill: var(--fv-red);
    flex: none;
}

/* ---- ステップ切り替え ---- */
.fvNew__stepPanel {
    display: none;
}

.fvNew__stepPanel.is-active {
    display: block;
}

.fvNew__back {
    display: block;
    margin: .875em auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: #7a7a7a;
    font-family: inherit;
    font-size: 1em;
    text-decoration: underline;
    cursor: pointer;
}

.fvNew__error {
    display: none;
    margin: .75em 0 0;
    color: #e00;
    font-size: 1em;
    text-align: center;
}

.fvNew__error.is-shown {
    display: block;
}

/* サーバー側バリデーションのエラー表示欄（common.js が .error-{name} に書き込む） */
.fvNew .validation-error {
    margin: .3em 0 0;
    color: #e00;
    font-size: .9em;
    line-height: 1.4;
}

.fvNew .validation-error:empty {
    display: none;
}

/* 送信中のローディング */
.fvNew .loading,
.fvNew .thanks {
    display: none;
}

.fvNew .loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    border-radius: 1.125em;
    background: rgba(253, 253, 253, .8);
}

.fvNew .loading.is-shown {
    display: flex;
}

.fvNew .loading svg {
    width: 2.5em;
    height: 2.5em;
}

.fvNew__card {
    position: relative;
}

/* ==========================================================================
   下部 3訴求バー
   ========================================================================== */
.fvNew__merit {
    display: flex;
    border: 2px solid #fff;
    border-radius: .44em;
    background: rgba(150, 0, 0, .30);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}

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

@media screen and (min-width: 768px) {

    .fvNew__merit {
        justify-content: center;
        align-items: center;
        height: 3.78em;
        margin: 5.28% 0 0;
        /* コンテンツ幅 1308px のとき 32px */
        font-size: clamp(16px, 2.35vw, 32px);
    }

    .fvNew__meritItem {
        gap: .625em;
        padding: 0 1.125em;
        white-space: nowrap;
    }

    .fvNew__meritItem img {
        width: 2.75em;
        flex: none;
    }

    .fvNew__meritItem + .fvNew__meritItem {
        border-left: 3px solid rgba(255, 255, 255, .9);
    }
}

@media screen and (max-width: 767px) {

    .fvNew__merit {
        align-items: stretch;
        width: 93.78vw;
        height: 30.1vw;
        margin: 4.08vw auto 0;
        border-width: 1.5px;
        border-radius: 2.5vw;
        font-size: 4vw;
    }

    .fvNew__meritItem {
        flex-direction: column;
        gap: .3em;
        flex: 1;
        padding: 0 .25em;
        text-align: center;
    }

    .fvNew__meritItem img {
        width: 4.07em;
        flex: none;
    }

    .fvNew__meritItem + .fvNew__meritItem {
        border-left: 1.5px solid rgba(255, 255, 255, .9);
    }
}

/* ==========================================================================
   最下部の実績帯
   PC : 既存 /assets/img/mv_bg_bottom.jpg（1920x132）を流用
   SP : /assets/img/sp/fv_bottom.jpg（780x193 相当 / 実ファイルは@2x 1560x386）
   ========================================================================== */
.fvNew__bottom {
    line-height: 0;
}

.fvNew__bottom picture {
    display: block;
}

.fvNew__bottom img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================================================================
   #case 買取実績 カード部分のみ差し替え
   ・見出し（case_title.png）と背景（case_bg-t/b.jpg）は既存のまま。
     #case 本体には一切上書きしません。
   ・PC（1151px〜）: 5列 × 2段のグリッド
   ・〜1150px      : 横スクロールカルーセル（scroll-snap）
   ========================================================================== */

.caseNew {
    width: min(1308px, 96vw);
    margin: 0 auto;
    padding-bottom: 100px;
    text-align: left;
}

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

/* ---- カード ---- */
.caseNew__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.caseNew__card {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* 比率は枠（.caseNew__pic）側に持たせる。
   img 自身に aspect-ratio を掛けると、画像が読み込めなかったときに
   alt 文字の高さで箱が決まってしまい、カードごとに高さがズレるため。 */
.caseNew__pic {
    position: relative;
    aspect-ratio: 4 / 3;
    margin: 0 0 12px;
    border-radius: 3px;
    overflow: hidden;
    background: #eee;
}

.caseNew__pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caseNew__type {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

.caseNew__maker {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #444;
}

.caseNew__spec {
    margin: 4px 0 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #777;
}

/* ---- 価格バー ---- */
.caseNew__price {
    display: flex;
    align-items: stretch;
    margin-top: auto;
    overflow: hidden;
    background: #262626;
}

.caseNew__priceOther,
.caseNew__priceOurs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 3px;
    min-width: 0;
    white-space: nowrap;
}

.caseNew__priceOther {
    width: 53%;
    flex: none;
}

/* flex:1 で残り幅をすべて取り、赤が必ず右端まで届くようにする */
.caseNew__priceOurs {
    flex: 1;
    margin-left: -13px;
    padding-left: 15px;
    background: #e60012;
    clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%);
}

.caseNew__priceLabel {
    font-size: 9px;
    line-height: 1.2;
    color: #fff;
    opacity: .95;
    flex: none;
}

.caseNew__priceVal {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
}

.caseNew__priceOurs .caseNew__priceVal {
    color: #ffd900;
}

.caseNew__priceVal small {
    font-size: 9px;
    font-weight: 700;
    margin-left: 1px;
}

.caseNew__scroller {
    overflow: visible;
}

.caseNew__dots {
    display: none;
}

/* ==========================================================================
   〜1150px：横スクロールカルーセル
   ========================================================================== */
@media screen and (max-width: 1150px) {

    .caseNew {
        width: 100%;
        padding-bottom: 15vw;
    }

    .caseNew__scroller {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .caseNew__scroller::-webkit-scrollbar {
        display: none;
    }

    .caseNew__list {
        display: flex;
        gap: 14px;
        padding: 4px 6% 4px 4%;
        width: max-content;
    }

    .caseNew__card {
        width: 66vw;
        max-width: 300px;
        flex: none;
        scroll-snap-align: center;
    }

    .caseNew__type {
        font-size: 20px;
    }

    .caseNew__maker {
        font-size: 14px;
    }

    .caseNew__spec {
        font-size: 12.5px;
    }

    .caseNew__priceLabel {
        font-size: 10px;
    }

    .caseNew__priceVal {
        font-size: 23px;
    }

    .caseNew__priceVal small {
        font-size: 10px;
    }

    /* ---- ドットインジケーター ---- */
    .caseNew__dots {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin: 16px auto 0;
    }

    .caseNew__dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #d3d3d3;
        transition: background .2s, transform .2s;
    }

    .caseNew__dot.is-current {
        background: #e60012;
        transform: scale(1.25);
    }
}

@media screen and (max-width: 767px) {
    .caseNew__card {
        width: 78vw;
    }
}


/* ==========================================================================
   #case 「もっと見る」→ 事例一覧表（タブ切替アコーディオン）
   ========================================================================== */
.caseTbl {
    margin-top: 34px;
}

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

/* ---- タブ ---- */
.caseTbl__tabs {
    display: flex;
    gap: 6px;
    margin: 30px 0 0;
}

.caseTbl__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1;
    padding: 13px 8px;
    border: 1px solid #d5d5d5;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: #f4f4f4;
    color: #666;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.caseTbl__tab svg {
    width: 30px;
    height: 19px;
    fill: currentColor;
    flex: none;
}

.caseTbl__tab:hover {
    background: #ebebeb;
}

.caseTbl__tab.is-active {
    border-color: #c8000a;
    background: #d6000c;
    color: #fff;
}

/* ---- 表 ---- */
.caseTbl__panel[hidden] {
    display: none;
}

.caseTbl__scroll {
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    background: #fff;
}

.caseTbl__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.4;
}

.caseTbl__table th,
.caseTbl__table td {
    padding: 11px 10px;
    text-align: left;
    vertical-align: middle;
}

.caseTbl__table thead th {
    border-bottom: 2px solid #262626;
    color: #333;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.caseTbl__table thead th.caseTbl__ours {
    background: #d6000c;
    color: #fff;
    text-align: center;
    border-radius: 4px 4px 0 0;
}

.caseTbl__table tbody tr + tr td {
    border-top: 1px solid #ececec;
}

.caseTbl__table tbody tr:nth-child(even) td {
    background: #fafafa;
}

.caseTbl__no {
    width: 46px;
    color: #999;
    font-size: 12px;
    text-align: center !important;
}

.caseTbl__car {
    font-weight: 700;
    color: #222;
}

.caseTbl__year,
.caseTbl__dist,
.caseTbl__cond {
    color: #555;
    white-space: nowrap;
}

.caseTbl__dist {
    text-align: right !important;
}

/* ---- 価格セル（他社 → 弊社） ---- */
/* th / td とも通常のテーブルセルのまま扱う。
   display:flex にすると行の高さから外れて、見出しの下線が他の列とズレるため。 */
.caseTbl__price {
    width: 292px;
    padding-right: 0 !important;
    text-align: right !important;
    vertical-align: middle;
    white-space: nowrap;
}

.caseTbl__thOther,
.caseTbl__thOurs {
    white-space: nowrap;
}

.caseTbl__other,
.caseTbl__ours {
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: #fff;
}

.caseTbl__other {
    background: #6b6b6b;
}

.caseTbl__ours {
    background: #d6000c;
}

.caseTbl__arrow,
.caseTbl__thArrow {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    margin: 0 8px;
}

.caseTbl__arrow::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #bbb;
    border-bottom: 2px solid #bbb;
    transform: rotate(-45deg);
}

.caseTbl__thOther,
.caseTbl__thOurs {
    display: inline-block;
    vertical-align: middle;
    min-width: 100px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.caseTbl__thOther {
    color: #333;
}

.caseTbl__thOurs {
    color: #d6000c;
}

.caseTbl__table small {
    font-size: 11px;
    font-weight: 700;
    margin-left: 1px;
}

.caseTbl__note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
    text-align: left;
}

/* ==========================================================================
   〜767px：表を1件1ブロックに組み替える
   ========================================================================== */
@media screen and (max-width: 767px) {

    .caseTbl {
        width: 92%;
        margin: 8vw auto 0;
    }

    .caseTbl__toggle {
        width: 100%;
        font-size: 15px;
    }

    .caseTbl__tabs {
        gap: 4px;
        margin-top: 6vw;
    }

    .caseTbl__tab {
        flex-direction: column;
        gap: 4px;
        padding: 9px 3px;
        font-size: 11px;
        line-height: 1.25;
        text-align: center;
    }

    .caseTbl__tab svg {
        width: 26px;
        height: 16px;
    }

    .caseTbl__scroll {
        border-radius: 0 0 6px 6px;
    }

    .caseTbl__table,
    .caseTbl__table tbody,
    .caseTbl__table tr,
    .caseTbl__table td {
        display: block;
        width: auto;
    }

    .caseTbl__table thead {
        display: none;
    }

    .caseTbl__table tbody tr {
        position: relative;
        padding: 12px 12px 12px 46px;
    }

    .caseTbl__table tbody tr + tr {
        border-top: 1px solid #ececec;
    }

    .caseTbl__table tbody tr:nth-child(even) {
        background: #fafafa;
    }

    .caseTbl__table tbody tr:nth-child(even) td {
        background: none;
    }

    .caseTbl__table tbody tr + tr td {
        border-top: 0;
    }

    .caseTbl__table td {
        padding: 0;
    }

    .caseTbl__no {
        position: absolute;
        top: 12px;
        left: 10px;
        width: 30px;
        padding: 2px 0 !important;
        border-radius: 3px;
        background: #efefef;
        color: #888;
        font-size: 11px;
    }

    .caseTbl__car {
        font-size: 14.5px;
        line-height: 1.35;
    }

    .caseTbl__year,
    .caseTbl__dist,
    .caseTbl__cond {
        display: inline !important;
        font-size: 12px;
        color: #777;
        text-align: left !important;
    }

    .caseTbl__year::after,
    .caseTbl__dist::after {
        content: " / ";
        color: #ccc;
    }

    .caseTbl__table td.caseTbl__price {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        width: 100%;
        margin-top: 8px;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .caseTbl__arrow {
        margin: 0;
    }

    .caseTbl__other,
    .caseTbl__ours {
        min-width: 0;
        flex: 1;
        max-width: 130px;
        padding: 5px 6px;
        font-size: 14px;
    }

    .caseTbl__note {
        font-size: 11px;
    }
}

/* 768〜1150px：表は横スクロールで逃がす */
@media screen and (min-width: 768px) and (max-width: 1150px) {

    .caseTbl {
        width: 92%;
        margin: 34px auto 0;
    }

    .caseTbl__scroll {
        overflow-x: auto;
    }

    .caseTbl__table {
        min-width: 720px;
    }
}


/* ==========================================================================
   事例一覧表：5行だけ見せてフェード → もっと見るで全件
   ========================================================================== */
.caseTbl__clip {
    position: relative;
    /* 高さは JS が5行目の位置を実測して --clipH に入れる。
       JSが動かない場合のフォールバックとして 305px を持たせている。 */
    max-height: var(--clipH, 305px);
    overflow: hidden;
    transition: max-height .45s ease;
}

.caseTbl__clip.is-open {
    max-height: 4000px;
}

.caseTbl__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 78%);
    pointer-events: none;
    transition: opacity .3s;
}

.caseTbl__clip.is-open .caseTbl__fade {
    opacity: 0;
}

.caseTbl__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(360px, 88%);
    margin: 18px auto 0;
    padding: 13px 20px;
    border: 2px solid #262626;
    border-radius: 999px;
    background: #fff;
    color: #262626;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.caseTbl__more:hover {
    background: #262626;
    color: #fff;
}

.caseTbl__moreIcon {
    position: relative;
    width: 13px;
    height: 13px;
    flex: none;
}

.caseTbl__moreIcon::before,
.caseTbl__moreIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2.5px;
    margin-top: -1.25px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s;
}

.caseTbl__moreIcon::after {
    transform: rotate(90deg);
}

.caseTbl__more[aria-expanded="true"] .caseTbl__moreIcon::after {
    transform: rotate(0deg);
}

@media screen and (max-width: 767px) {
    .caseTbl__more {
        width: 100%;
        font-size: 15px;
    }
}

/* ==========================================================================
   FAQ 内の「買取事例を見る」リンク
   ========================================================================== */
.faqCaseLink {
    display: inline-block;
    margin-top: 10px;
    padding-right: 16px;
    position: relative;
    color: #d6000c;
    font-weight: 700;
    text-decoration: underline;
}

.faqCaseLink::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 2px solid #d6000c;
    border-bottom: 2px solid #d6000c;
    transform: rotate(-45deg);
}

/* ==========================================================================
   PC追従フォーム（買取の流れ以降）
   既存 .topFormArea.pc（幅320px / right:40px / top:100px）に合わせています
   ========================================================================== */
.sideForm {
    position: fixed;
    top: 100px;
    right: 24px;
    z-index: 900;
    /* 幅は JS が本文右のスペースを実測して 260〜320px の範囲で設定する */
    width: var(--sideW, 320px);
    padding: 16px 14px 14px;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .35);
    font-family: 'Noto Sans JP', '游ゴシック体', Yu Gothic, '游ゴシック', 'YuGothic',
        'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', 'メイリオ', Meiryo, sans-serif;
    color: #333;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, visibility .3s;
}

.sideForm.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 1150px以下ではコンテンツに被るので出さない */
@media screen and (max-width: 1150px) {
    .sideForm {
        display: none !important;
    }
}

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

.sideForm__heading {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    color: #1a1a1a;
}

.sideForm__heading em {
    font-style: normal;
    margin-left: 5px;
    font-size: 18px;
    color: #ee1719;
    letter-spacing: .08em;
}

.sideForm__steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.sideForm__step {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sideForm__stepNum {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #b1b1b1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

.sideForm__stepLabel {
    font-size: 10.5px;
    color: #b1b1b1;
    white-space: nowrap;
}

.sideForm__step.is-current .sideForm__stepNum {
    background: #ef0201;
}

.sideForm__step.is-current .sideForm__stepLabel {
    color: #f64748;
    font-weight: 500;
}

.sideForm__field {
    margin-top: 11px;
}

.sideForm__labelRow {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 20px;
}

.sideForm__label {
    font-size: 13px;
    color: #3d3d3e;
}

.sideForm__req {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 18px;
    border: 1px solid #da1717;
    border-radius: 2px;
    background: #ef0201;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    flex: none;
}

.sideForm__selectWrap,
.sideForm__inputWrap {
    position: relative;
    margin-top: 5px;
}

.sideForm__selectWrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #6e6e6e;
    border-bottom: 2px solid #6e6e6e;
    transform: rotate(45deg);
    pointer-events: none;
}

.sideForm select,
.sideForm input[type="text"],
.sideForm input[type="tel"] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #cacacb;
    border-radius: 3px;
    background: #fff;
    color: #575757;
    font-family: inherit;
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
}

.sideForm__selectWrap select {
    padding-right: 28px;
}

.sideForm__submit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 46px;
    margin: 13px 0 0;
    padding: 0 22px;
    border: 0;
    border-bottom: 3px solid #c07d05;
    border-radius: 5px;
    background: linear-gradient(180deg, #f8d264 0%, #efb232 48%, #e09a19 100%);
    color: #272001;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.sideForm__submit::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid #272001;
    border-bottom: 2px solid #272001;
    transform: rotate(-45deg);
}

.sideForm__back {
    display: block;
    margin: 8px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: #7a7a7a;
    font-family: inherit;
    font-size: 11.5px;
    text-decoration: underline;
    cursor: pointer;
}

.sideForm__note {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: #595859;
    text-align: center;
}

.sideForm__stepPanel {
    display: none;
}

.sideForm__stepPanel.is-active {
    display: block;
}

.sideForm__error {
    display: none;
    margin: 8px 0 0;
    color: #e00;
    font-size: 11.5px;
    text-align: center;
}

.sideForm__error.is-shown {
    display: block;
}

.sideForm .validation-error {
    margin: 3px 0 0;
    color: #e00;
    font-size: 11px;
    line-height: 1.4;
}

.sideForm .validation-error:empty {
    display: none;
}

.sideForm .loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
}

.sideForm .loading.is-shown {
    display: flex;
}

.sideForm .loading svg {
    width: 32px;
    height: 32px;
}