/*==================================================
 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;
    }

}