/* fv */
.fv{
    background: url(../img/step3/bg_fv.png) #FFF no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 1.5% 0 10%;
}

.fv .txt_fv{
    width: 76vw;
    margin: 35% auto 0;
    font-size: 1.9vw;
    text-align: center;
    line-height: 1.8;
}

@media screen and (max-width: 768px){
    .fv{
        background: url(../img/step3/bg_fv_sp.png) #FFF no-repeat;
        background-size: cover;
        background-position: center top;
        padding: 5% 0 55.5%;
    }
    .fv .txt_fv{
        width: 86vw;
        margin: 88% auto 0;
        font-size: 4.4vw;
        line-height: 1.7;
    }
}

/* menu */
.menu{
    background: url(../img/step3/bg_menu.png) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    margin: -2% 0 0;
    padding: 0 0 18%;
}

.menu_list{
    background: #FFF3A6;
    margin: 0 auto 6%;
    padding: 4% 3% 4%;
}

.menu_list ul li.first::before{
    position: absolute;
    top:5%;
    left:0.8%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step3/icon_menu_01.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.menu_list ul li.second::before{
    position: absolute;
    top:5%;
    left:38.5%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step3/icon_menu_02.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.menu_list ul li.third::before{
    position: absolute;
    top:5%;
    left:76%;
    display: block;
    content: "";
    width: 3vw;
    height:3vw;
    background: url(../img/step3/icon_menu_03.svg) no-repeat;
    background-size: 100% auto;
    background-position: left center;
}
.menu .ttl_task{
    width: 28vw;
    margin: 0 auto 2%;
}

.menu .img_task_01{
    width: 20vw;
    margin: 0 auto 2%;
}

.menu .img_task_02{
    width: 60vw;
    margin: 0 auto 2%;
}

@media screen and (max-width: 768px){
    .menu{
        background: url(../img/step3/bg_menu_sp.png) no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 0 0 22%;
        margin: -40% 0 0;
    }
    .menu_list ul li.first::before{
        position: absolute;
        top: 5%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step3/icon_menu_01.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
    .menu_list ul li.second::before{
        position: absolute;
        top: 38%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step3/icon_menu_02.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
    .menu_list ul li.third::before{
        position: absolute;
        top: 71%;
        left: 12%;
        display: block;
        content: "";
        width: 9vw;
        height: 9vw;
        background: url(../img/step3/icon_menu_03.svg) no-repeat;
        background-size: 100% auto;
        background-position: left center;
    }
    .menu .ttl_task {
        width: 76vw;
        margin: 0 auto 4%;
    }
    .menu .img_task_01 {
        width: 44vw;
        margin: 0 auto 4%;
    }
    .menu .img_task_02 {
        width: 70vw;
        margin: 0 auto 4%;
    }
}

/* government */
.government{
    background: #FCCDCA;
    background: url(../img/step3/bg_government.png) #FFF3A6 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 4% 0 16%;
    margin: -0.3% 0 0;
}

.government h2{
    width: 44vw;
    margin: 0 auto 2%;
}

.government .txt_government{
    width: 60vw;
    margin: 0 auto 4%;
    font-size:1.6vw;
    line-height: 1.5;
    text-align: center;
}
.government .government_list{
    width: 80vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2%;
}
.government .government_list li{
    width: 18%;
    line-height: 1.5;
    margin: 0 0 2%;
}
.government .government_list li a{
    display: block;
}

@media screen and (max-width: 768px){
    .government{
        background: url(../img/step3/bg_government_sp.png) #FFF3A6 no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 10% 0 28%;
        margin: -0.5% auto 0;
    }
    .government h2{
        width: 90vw;
        margin: 0 auto 4%;
    }
    .government .txt_government{
        width: 70vw;
        margin: 0 auto 4%;
        font-size:4vw;
        line-height: 1.7;
        text-align: left;
    }
    .government .government_list{
        width: 78vw;
    }
    .government .government_list li{
        width: 47%;
        line-height: 1.5;
        margin: 0 0 4%;
    }
}

/* change */
.change{
    background: #FCCDCA;
    background: url(../img/step3/bg_color.png) repeat-y;
    background-size: 100% auto;
    background-position: center top;
    padding: 10% 0 18%;
    margin: -0.3% 0 0;
}

.change h2{
    width: 40vw;
    margin: 0 auto 2%;
}
.change .txt_change{
    width: 60vw;
    margin: 0 auto 4%;
    font-size:1.6vw;
    line-height: 1.5;
    text-align: center;
}
.change .change_list{
    width: 64vw;
    margin: 0 auto 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:2%;
}
.change .change_list li{
    width: 22.5%;
    line-height: 1.5;
    margin: 0 0 2%;
}
.change .change_list li:nth-child(3){
    width: 32%;
}
.change .change_list li a{
    display: block;
}
.change .img_change{
    width: 50vw;
    margin: 0 auto;
}

.bg_procedure{
    margin: -11% 0 0;
}

@media screen and (max-width: 768px){
    .change{
        background: url(../img/step3/bg_color_sp.png) repeat-y;
        background-size: 100% auto;
        background-position: center top;
        padding: 10% 0 28%;
        margin: -0.5% auto 0;
    }
    .change h2{
        width: 92vw;
        margin: 0 auto 2%;
    }
    .change .txt_change{
        width: 78vw;
        margin: 0 auto 4%;
        font-size:4vw;
        line-height: 1.7;
        text-align: left;
    }
    .change .change_list{
        width: 80vw;
        margin: 0 auto 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:2%;
    }
    .change .change_list li{
        width: 47%;
        line-height: 1.5;
        margin: 0 0 6%;
    }
    .change .change_list li:nth-child(3){
        width: 96%;
    }
    .change .img_change{
        width: 74vw;
        margin: 0 auto;
    }
    .bg_procedure {
        margin: -28% 0 0;
    }
}

/* procedure */
.procedure{
    background: #FCCDCA;
    background: url(../img/step3/bg_link.png) #FFF3A6 no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 10% 0 18%;
    margin: -0.3% 0 0;
}

.procedure h2{
    width: 30vw;
    margin: 0 auto 4%;
}

.procedure .txt_procedure{
    width: 60vw;
    margin: 0 auto 4%;
    font-size:1.6vw;
    line-height: 1.5;
    text-align: center;
}

.procedure .procedure_list{
    width: 64vw;
    margin: 0 auto 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:2%;
}

.procedure .procedure_list li{
    width: 22.5%;
    line-height: 1.5;
    margin: 0 0 2%;
}
.procedure .procedure_list li:nth-child(3){
    width: 29%;
}
.procedure .procedure_list li a{
    display: block;
}
.procedure .img_procedure{
    width: 54vw;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .procedure{
        background: url(../img/step3/bg_link_sp.png) #FFF3A6 no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 10% 0 26%;
        margin: -0.3% 0 0;
    }
    .procedure h2{
        width: 74vw;
        margin: 0 auto 6%;
    }
    
    .procedure .txt_procedure{
        width: 78vw;
        margin: 0 auto 4%;
        font-size:4vw;
        line-height: 1.7;
        text-align: left;
    }
    .procedure .procedure_list{
        width: 80vw;
        margin: 0 auto;
    }
    
    .procedure .procedure_list li{
        width: 47%;
        line-height: 1.5;
        margin: 0 0 6%;
    }
    .procedure .procedure_list li:nth-child(3){
        width: 96%;
    }
    .procedure .img_procedure{
        width: 74vw;
        margin: 0 auto;
    }
}

/* modal */
.modal-content h4::after {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 2;
    content: '';
    width: 2.6%;
    height: 60%;
    background-color: #FFF3A6;
}

.modal-content .sub_ttl_modal{
    background: #FFF3A6;
    text-align: center;
    padding: 1% 0;
    margin: 0 38% 2% 0;
}

@media screen and (max-width: 768px){
    .modal-content h4::after {
        width: 5%;
        height: 66%;
    }
}