.steps {
    display: flex;
    gap: 2em;
    position: relative;
    padding: 2.5em 3em;
    margin: 2vmin 0;
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-behavior: smooth;
    width: 100%;
    height: 500px;
    box-shadow: inset 1px 1px 5px rgba(46, 46, 46, 0.45);
    /*white-space: nowrap; 折り返し防止
    scrollbar-width: none;
    Firefoxのスクロールバー非表示
    -ms-overflow-style: none;
    IEでスクロールバー非表示
    touch-action: pan-y;
     縦スクロールのみ許可 */
}

.steps::after {
    content: "横にスクロールできます ⇀";
    position: absolute;
    bottom: 1%;
    left: 1%;
    pointer-events: none;
 }
 
.steps h3 {
    font-size: clamp(1.8rem, 0.542rem + 1.55vw, 2.4rem);
    width: 100%;
    margin-top: 0;
}

.steps::-webkit-scrollbar {
    height: 2px;
}


.step {
    position: relative;
    min-width: 300px;
    height: 90%;
    padding: 2.5em 2em;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 0 2px 6px 0 rgba(46, 46, 46, 0.53);
}

.card--bg {
    background: url("../img/bg-img.webp") center;
    background-size: cover;
    background-size: 800%;
}

.step img {
    width: 25%;
    right: 3%;
    bottom: 2%;
}

.step:last-child img {
    width: 45%;
    bottom: -3%;
}

.step p {
    font-size: clamp(1.6rem, 1.181rem + 0.52vw, 1.8rem);
    font-family: system-ui;
    font-weight: 600;
    width: 100%;
    margin: 10% auto 0;
    letter-spacing: 0.15rem;
    line-height: 1.6;
}


@media screen and (min-width: 601px) and (max-width: 1299px) {
    .steps {
        padding: 3em 2em 0;
    }
    .steps h3 {
        font-size: clamp(2rem, 1.656rem + 0.92vw, 2.4rem);
    }
    .step {
        min-width: 300px;
        height: 82%;
    }
    
    .step:last-child img {
        bottom: -2%;
    }
}

@media screen and (max-width: 600px) {
    .steps {
        gap: 1.5em;
        padding: 2em;
        min-height: 420px;
        height: 60svh;
    }
    
.steps h3 {
    font-size: clamp(1.8rem, 1.343rem + 2.29vw, 2.2rem);
}
    .steps::after {
        left: 1em;
     }

    .step {
        min-width: 280px;
        min-height: 350px;
        height: 80%;
    }

    .step .tab {
        height: 66px;
    }

    .step .content-wrapper {
        border-radius: 10px;
        top: -40px;
        width: 90%;
        height: 38pt;
        margin: 0 auto;
        padding: 0 1.5rem;
        max-height: 100%;
    }

    .step.active .content-wrapper {
        padding-top: 3.2em;
    }

    .step img {
        width: 24%;
        right: 1%;
        bottom: 1%;
    }

    .step p {
        letter-spacing: 0.03rem;
    }

}

@media screen and (max-width: 400px) {
    .steps {
        height: 420px;
    }
    .step {
        padding: 2em;
        min-width: 260px;
        height: 350px;
    }
}