/* =============================================================
 * 買い取りの流れ
 * ========================================================== */
.scrap-flow {
    padding-block: clamp(80px, 6.25vw, 120px);
    color: var(--c-white);
    background: var(--c-ink);

    .scrap-flow__list {
        max-width: 947px;
        margin: 53px auto 0;
    }

    .scrap-flow__item {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        padding: 54px 9px;
        border-block-start: 1px solid rgb(255 255 255 / 14%);
    }

    .scrap-flow__title {
        font-size: clamp(20px, 1.2vw, 23px);
        font-weight: var(--fw-medium);
        line-height: 1.2;
        letter-spacing: 0.05em;
        color: var(--c-blue);
    }

    .scrap-flow__text {
        font-size: clamp(16px, 0.94vw, 18px);
        line-height: 28px;
        letter-spacing: 0.071em;
    }

    .scrap-flow__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* =============================================================
 * 主要買取品目 / 保有車両 共通
 * ========================================================== */
.scrap-section {
    padding-block: clamp(80px, 6.15vw, 118px);
    border-block-start: 1px solid rgb(31 41 61 / 8%);

    .center-head {
        max-width: none;
        padding-block-end: 46px;
    }

    &.scrap-items {
        .scrap-items__list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 40px clamp(24px, 3.07vw, 59px);
            margin-block-start: 68px;
        }

        .scrap-items__item {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .scrap-items__title {
            font-size: clamp(18px, 1.15vw, 22px);
            font-weight: var(--fw-medium);
            line-height: 1.65;
            letter-spacing: 0.03em;
            color: var(--c-ink);
        }

        .scrap-items__media {
            margin: 0;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #e4e8ef;
            border-radius: var(--radius);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    &.scrap-fleet {
        .scrap-fleet__list {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0 38px;
            margin-block-start: 68px;
        }

        .scrap-fleet__item {
            display: flex;
            flex-direction: column;
            gap: 18px;
            align-items: flex-start;
            padding-block: 20px;
        }

        .scrap-fleet__title {
            padding: 8px 25px;
            font-size: clamp(18px, 1.15vw, 22px);
            font-weight: var(--fw-medium);
            line-height: 1.65;
            letter-spacing: 0.03em;
            color: var(--c-ink);
            background: #eaf1ff;
            border-radius: 6px;
        }

        .scrap-fleet__media {
            width: 100%;
            margin: 0;
            aspect-ratio: 455 / 338;
            overflow: hidden;
            background: #e4e8ef;
            border-radius: 16px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

/* =============================================================
 * ブレイクポイント（1280px / 959px / 600px）
 * ========================================================== */
@media (width <=959px) {
    .scrap-section {

        &.scrap-items .scrap-items__list,
        &.scrap-fleet .scrap-fleet__list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (width <=600px) {
    .scrap-flow {
        .scrap-flow__item {
            padding-block: 40px;
        }
    }

    .scrap-section {
        .center-head {
            padding-block-end: 32px;
        }

        &.scrap-items .scrap-items__list,
        &.scrap-fleet .scrap-fleet__list {
            grid-template-columns: minmax(0, 1fr);
            margin-block-start: 40px;
        }
    }
}