@charset "utf-8";



#guide section:not(:last-of-type){

    margin-bottom:8.5rem;

}



@media screen and (max-width: 767px) {

    #guide section:not(:last-of-type){

        margin-bottom:6.875rem;

    }

}



/** section1 *****************************************/

#guide .section1{

    text-align: center;

}

#guide .section1 .img-box{

    height:34rem;

    border-radius: 1.5rem;

    background:url("../../../img/sub/guide/guide-section1-img.png") no-repeat center / cover;

    margin-bottom:10rem;

}

#guide .section1 .sub-title{

    display: block;

    font-size:2rem;

    color:var(--color-primary);

    margin-bottom:2.5rem;

    font-weight: 700;

}

#guide .section1 .title{

    font-size:4rem;

    font-weight: 700;

    margin-bottom:1.5rem;

}

#guide .section1 .desc{

    font-size:2rem;

    line-height:1.8;

}

#guide .section1 ol{

    display:grid;

    grid-template-columns: repeat(4, 1fr);

    gap:2rem;

    margin-top:6rem;

    text-align: left;

}

#guide .section1 ol li{

    border:1px solid #ddd;

    border-radius: 1.5rem;

    padding:3rem;

}

#guide .section1 ol li img{

    display: block;

    margin-left:auto;

    margin-bottom:1.5rem;

    max-height: 111px;

    height:8vw;

}

#guide .section1 ol li span{

    display: block;

    font-weight: 600;

    color:var(--color-primary);

    line-height: 1;

    margin-bottom:1.5rem;

}

#guide .section1 ol li strong{

    display: block;

    font-size: 2.2rem;

    font-weight: 600;

    line-height:1.4;

    margin-bottom:1.5rem;

}



@media screen and (max-width: 1023px) {

    #guide .section1 ol{

        grid-template-columns: repeat(2, 1fr);

        gap:1.5rem;

    }

}

@media screen and (max-width: 767px) {

    #guide .section1 .img-box{

        height:31.25rem;

        margin-bottom:7.5rem;

    }

    #guide .section1 .sub-title{

        font-size:2.25rem;

    }

    #guide .section1 .title{

        margin-bottom:2.5rem;

    }

    #guide .section1 .desc{

        font-size:2.25rem;

    }

    #guide .section1 ol{

        grid-template-columns: 1fr;

        gap:1.875rem;

        margin-top:6.875rem;

    }

    #guide .section1 ol li{

        padding:3.125rem;

    }

    #guide .section1 ol li img{

        margin-bottom:1.875rem;

        min-height:60px;

    }

    #guide .section1 ol li span{

        font-size:2rem;

        margin-bottom:1.875rem;

    }

    #guide .section1 ol li strong{

        font-size: 2.75rem;

        margin-bottom:1.875rem;

    }

    #guide .section1 ol li p{

        font-size:2rem;

    }

}

/** section2 *****************************************/

#guide .section2 .title{

    font-size:3.2rem;

    font-weight: 700;

    margin-bottom:2.5rem;

}

#guide .section2 ul{

    padding:3rem;

    background:#f6f6f6;

    border-radius: 1rem;

}

@media screen and (max-width: 767px) {

    #guide .section2 .title{

        font-size:3.5rem;

    }

    #guide .section2 ul{

        padding:2.5rem;

    }

}