@charset "utf-8";
.step-fv{
    padding:96px 8.5% 32px;
}

.step-fv__title{
    writing-mode: vertical-rl;
    margin-top: 24px;
}

.step-fv__image{
    margin-left:8.5%;
    max-width:214px;
}

.step-fv__lead{
    margin-top:32px;
}

.step-container{
    background-color:#D7E5DB;
    padding:64px 0;
}

.step-item{
    margin:40px auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.step-item--detail{
    flex-direction: column-reverse;
}

.step-item__image{
    max-width:327px;
    margin:0 auto;
    display: block;
}


.step-point{
    padding:40px var(--contentsPadding-sp);
    text-align: center;
}

.step-point h2{
    max-width:348px;
    margin:0 auto;
}

.step-point p{
    text-align: center;
    margin-top:16px;
}

.step-point span{
    color:var(--primary-navy);
    font-weight: bold;
    font-size:1.7rem;
}

.haniwa--step{
    width:144px;
    margin-top:40px;
}

.btn-viewmore--works{
    width:241px;
    margin:24px auto 0;
}


@media screen and (min-width:768px) {
    .step-fv{
        padding:125px 5% 88px 7.2%;
        max-width: 1440px;
        margin:0 auto;
    }

    .step-fv__title{
        writing-mode:initial;
        margin-top:-40px;
    }

  
    .step-fv__image{
        width:41.9%;
        max-width:604px;
        margin-left:0;
    }
    .step-fv__flex{
        justify-content: center;
        align-items: center;
        max-width:1440px;
        margin:0 auto;
        gap:8.5%;
    }
    .step-fv__lead{
        font-size:1.8rem;
        margin-top:-100px;
        margin-left:100px;


    }

    .step-list{
        max-width:794px;
        margin:0 auto;
    }

    .step-item{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        flex-direction: row;
    }

    .step-item__image{
        margin:0;
    }

    .step-item--indent{
        margin-top:170px;
    }

    .step-item__image--kote{
        margin-top:86px;
    }

    .step-item__image--namesi{
        margin-top:180px;
    }

    .step-item__image--finish{
        /* width:38%; */
        max-width:547px;
       display: block;
       margin: auto;
    }

    .step-point p{
        max-width:628px;
        margin:24px auto;
        text-align: center;
    }

    
    
}