/*==================================================
 Usage
==================================================*/

.usage{
    padding:120px 0;
    background:#F8FBFF;
}

.usage-step{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    position:relative;
    padding:80px 0;
    border-bottom:1px solid #E5E7EB;
}

.usage-step:last-child{
    border-bottom:none;
}

.usage-step--reverse{
    flex-direction:row-reverse;
}

/*------------------------------------
  Image
------------------------------------*/

.usage-step__image{
    flex:0 0 300px;
    max-width:300px;
}

.usage-step__image img{
    display:block;
    width:100%;
    border-radius:24px;
    box-shadow:
        0 20px 60px rgba(0,0,0,.15);
}

/*------------------------------------
  Card
------------------------------------*/

.usage-card{
    position:relative;
    width:360px;
    z-index:20;
    animation:float 5s ease-in-out infinite;
}

/* STEP1・3 */

.usage-step:not(.usage-step--reverse) .usage-card{
    margin-left:-20px;
}

/* STEP2 */

.usage-step--reverse .usage-card{
    margin-right:-20px;
}

/*------------------------------------
  Responsive
------------------------------------*/

@media(max-width:992px){

    .usage-step,
    .usage-step--reverse{
        flex-direction:column;
        gap:32px;
        padding:60px 0;
    }

    .usage-step__image{
        flex:none;
        max-width:300px;
    }

    .usage-step .usage-card,
    .usage-step--reverse .usage-card{
        margin:0;
        width:100%;
        max-width:420px;
    }

}

@media(max-width:768px){

    .usage{
        padding:80px 0;
    }

    .usage-step{
        gap:24px;
        padding:48px 0;
    }

    .usage-card{
        max-width:100%;
    }

    .usage-step__image img{
        border-radius:18px;
    }

}


/* ==========================================
   Usage - スマホ・タブレット縦レイアウト
========================================== */

@media (max-width: 768px) {

    /* すべてのSTEPを縦並びに */
    .usage .usage-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* 説明カード（STEP1） */
    .usage .usage-step > .usage-card {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    /* 説明カード＋補足説明の親要素（STEP2〜4） */
    .usage .usage-step > div:has(> .usage-card) {
        order: 1;
        width: 100%;
    }

    /* 画像は必ず最後 */
    .usage .usage-step > .usage-step__image {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* 画像のサイズ調整 */
    .usage .usage-step__image img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}