@charset "UTF-8";
.l-container{
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 780px) {
    .p-archive-head__ttl {
        font-size: 27px;
    }
}
.p-archive-head__ttl-blue{
    color: #2C419A;
}

.p-archive-head__ttl-s{
    
}
@media screen and (min-width: 781px) {
    .p-archive-head__ttl-s{
        font-size: 30px;
    }
}

@media screen and (max-width: 780px) {
    .p-archive-head__ttl-s{
        font-size: 20px;
    }
    .p-about_why .p-archive-head__ttl-s{
        line-height: 1.35;
        display: inline-block;
        margin-bottom: 25px;
    }
}


@media screen and (min-width: 781px) {
    .p-about_bg-icon--front01{
        top: -296px;
        left: -228px;
    } 
    .p-about_bg-icon--front02{
        bottom: 155px;
        right: -339px;
    } 
    .p-about_bg-icon--front03{
        bottom: -193px;
        left: -157px;
    } 
   .p-about_bg-icon--front04{
        top: -298px;
        right: -307px;
    } 
    .p-about_bg-icon--front05{
        top: 686px;
        left: -277px;
    } 
    .p-about_bg-icon--front06{
        bottom: 273px;
        right: -250px;
    } 
}
@media screen and (max-width: 780px) {
    .c-bg-icon{
        width: 163px;
    }
    .p-about_bg-icon--front01{
        top: -123px;
        left: -97px;
    } 
    .p-about_bg-icon--front02{
        bottom: 303px;
        right: -128px;
    } 
    .p-about_bg-icon--front03{
        bottom: -77px;
        left: -47px;
    } 
   .p-about_bg-icon--front04{
        top: -94px;
        right: -81px;
    } 
    .p-about_bg-icon--front05{
        top: 1367px;
        left: -67px;
    } 
    .p-about_bg-icon--front06{
        bottom: -18px;
        right: -61px;
    } 
}


@media screen and (min-width: 781px) {
    .p-about{
        padding-bottom: 75px;
    }
}
@media screen and (max-width: 780px) {
    .p-about{
        padding-bottom: 60px;
    }
}


.p-about_lead{
    
}
@media screen and (min-width: 781px) {
    .p-about_lead{
        margin-top: 60px;
        font-size: 18px;
        line-height: 1.77;
        text-align: center;
    }
}

@media screen and (max-width: 780px) {
    .p-about_lead{
        margin-top: 40px;
        font-size: 16px;
        line-height: 1.6;
    }
}

.p-about_img_wrapper{
    position: relative;
}
@media screen and (min-width: 781px) {
    .p-about_img_wrapper{
        margin-top: 80px;
    }
}

@media screen and (max-width: 780px) {
    .p-about_img_wrapper{
        margin-top: 40px;
    }
}


@media screen and (min-width: 781px) {
    .p-about_img-sp{
        display: none;
    }
}

@media screen and (max-width: 780px) {
    .p-about_img-sp{
        display: block;
        position: absolute;
        width: 33.71%;
        top: 40.43%;
        right: 10.29%;
    }
}


.p-about_why{
    position: relative;
    overflow: hidden;
    background-color: #E9EFFF;
}

@media screen and (min-width: 781px) {
    .p-about_why,.p-about_howto,.p-about_advantage{
        padding-top: 150px;
        padding-bottom: 150px;
    }
}

@media screen and (max-width: 780px) {
    .p-about_why,.p-about_howto,.p-about_advantage{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


.p-about_why_wrap{
    background-color: #fff;
}
@media screen and (min-width: 781px) {
    .p-about_why_wrap{
        margin-top: 80px;
        padding: 100px 60px;
        border-radius: 30px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_wrap{
        margin-top: 40px;
        padding: 40px 40px 10px;
        border-radius: 10px;
    }   
}

.p-about_why_content{
    display: grid;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}
@media screen and (min-width: 781px) {
    .p-about_why_content{
        grid-template-columns: 1fr 27px 1fr;
        gap: 40px;
        max-width: 820px;   
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_content{
        gap: 30px;
    }  
}

.p-about_why_list{

}

.p-about_why_list_item{
    background-color: #009CA4;
    color: #fff;
    text-align: center;
}
@media screen and (min-width: 781px) {
    .p-about_why_list_item{
        padding: 40px;
        border-radius: 20px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_list_item{
        padding: 30px 20px;
        border-radius: 15px;
    } 
}

.p-about_why_list_title{
    font-weight: 800;
}
@media screen and (min-width: 781px) {
    .p-about_why_list_title{
        font-size: 29px;
    }   
}
@media screen and (max-width: 780px) {
    .p-about_why_list_title{
        font-size: 20px;
    }     
}

.p-about_why_list_text{
    border-top: 1px dotted;
    font-weight: 700;
}
@media screen and (min-width: 781px) {
    .p-about_why_list_text{
        margin-top: 20px;
        padding-top: 20px;
        font-size: 18px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_list_text{
        margin-top: 15px;
        padding-top: 15px;
        font-size: 17px;
    }    
}

.p-about_why_cross{
    display: block;
    margin-inline: auto;
}
@media screen and (min-width: 781px) {
    .p-about_why_cross{
        width: 40px;
        margin-top: 25px;
        margin-bottom: 25px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_cross{
        width: 33px;
        margin-top: 15px;
        margin-bottom: 15px;
    }   
}

.p-about_why_triangle{
    background-color: #FFDC64;
}
@media screen and (min-width: 781px) {
    .p-about_why_triangle{
        width: 27px;
        height: 60px;
        clip-path: polygon(100% 50%, 0 0, 0 100%);
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_triangle{
        display: block;
        margin-inline: auto;
        width: 39px;
        height: 18px;
        clip-path: polygon(100% 0, 0 0, 46% 100%);
    }   
}

.p-about_why_body{

}

.p-about_why_title{
    text-align: center;
    font-weight: 800;
    line-height: 1.4;
}
@media screen and (min-width: 781px) {
    .p-about_why_title{
        font-size: 30px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_title{
        font-size: 20px;
    }   
}

.p-about_why_img{
    display: block;
}
@media screen and (min-width: 781px) {
    .p-about_why_img{
        margin-top: 30px;
        margin-left: 30px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_why_img{
        margin-top: 20px;
        margin-left: 25px;
    }   
}

.p-about_howto_list{
    display: grid;
    gap: 62px;
}
@media screen and (min-width: 781px) {
    .p-about_howto_list{
        grid-template-columns: repeat(3,1fr);
        margin-top: 60px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_howto_list{
        margin-top: 40px;
        padding-inline: 12.8vw;
    }
}

.p-about_howto_list_item{
    position: relative;
}
@media screen and (min-width: 781px) {
    
}
@media screen and (max-width: 780px) {
    
}


.p-about_howto_list_img{
    position: relative;
}

.p-about_howto_list_item + .p-about_howto_list_item .p-about_howto_list_img::before{
    position: absolute;
    background-color: #F4B000;
    content: "";
}
@media screen and (min-width: 781px) {
    .p-about_howto_list_item + .p-about_howto_list_item .p-about_howto_list_img::before{
        top: 50%;
        left: -42px;
        transform: translateY(-50%);
        width: 22px;
        height: 25px;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);

    }
}
@media screen and (max-width: 780px) {
    .p-about_howto_list_item + .p-about_howto_list_item::before{
        position: absolute;
        background-color: #F4B000;
        content: "";
        top: -42px;
        left: 50%;
        transform: translateX(-50%);
        width: 25px;
        height: 22px;
        clip-path: polygon(100% 1%, 0 0, 45% 100%);
    }
}

.p-about_howto_list_ttl{
    font-weight: bold;
    text-align: center;
}
@media screen and (min-width: 781px) {
    .p-about_howto_list_ttl{
        margin-top: 40px;
        font-size: 28px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_howto_list_ttl{
        margin-top: 30px;
        font-size: 24px;
    }
}

.p-about_howto_list_text{
    font-size: 16px;
}
@media screen and (min-width: 781px) {
    .p-about_howto_list_text{
        margin-top: 30px;
        padding-inline: 20px;
        line-height: 1.75;
    }  
}
@media screen and (max-width: 780px) {
    .p-about_howto_list_text{
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.6;
    }
}

.p-about_howto_link{
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 781px) {
    .p-about_howto_link{
        gap: 10px;
        margin-top: 60px;
    } 
}
@media screen and (max-width: 780px) {
    .p-about_howto_link{
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }
}

.p-about_howto_link_button{
    background-color: #4F6ADC;
    color: #fff;
    border-radius: 100px;
    font-weight: bold;
    text-align: center;
}
.p-about_howto_link_button:hover{
    opacity: 0.8;
}
@media screen and (min-width: 781px) {
    .p-about_howto_link_button{
        padding: 12px 30px;
        font-size: 20px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_howto_link_button{
        padding: 10px 30px;
        min-width: 210px;
        font-size: 18px;
    }
}

.p-about_howto_link_button img{
    margin-left: 15px;
}
@media screen and (min-width: 781px) {
    .p-about_howto_link_button img{
        
    }
}
@media screen and (max-width: 780px) {
    .p-about_howto_link_button img{

    }
}

.p-about_advantage{
    position: relative;
    overflow: hidden;
    background-color: #F2F3F5;
}

.p-about_advantage_list{
    display: grid;
    gap: 20px;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_list{
        grid-template-columns: repeat(3,1fr);
        margin-top: 80px;
        max-width: 850px;
        margin-inline: auto;
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_list{
        margin-top: 40px;
    }
}

.p-about_advantage_list_item{
    background-color: #fff;
    text-align: center;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_list_item{
        padding: 50px 20px;
        border-radius: 40px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_list_item{
        display: grid;
        grid-template-columns: 65px auto;
        align-items: center;
        gap: 35px;
        padding: 22px 40px;
        border-radius: 20px;
        min-height: 108px;
    }   
    .p-about_advantage_list_item:last-child img{
        width: 60px;
        margin-inline: auto;
    }
}

.p-about_advantage_list_icon{

}
@media screen and (min-width: 781px) {
    .p-about_advantage_list_icon{
        width: auto;
        height: 100px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_list_icon{
    }
}

.p-about_advantage_list_text{
    font-size: 20px;
    line-height: 1.6;
    font-weight: bold;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_list_text{
        margin-top: 40px;
        
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_list_text{
        font-size: 18px;
        text-align: left;
    }
}

.p-about_advantage_list_text-blue{
    color: #2C419A;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_list_text-blue{
        
    }
}
@media screen and (max-width: 780px) {
    
}

.p-about_advantage_media{
    position: relative;
    z-index: 1;
    margin-inline: auto;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_media{
        padding-left: 5.12vw;
        padding-right: 5.12vw;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(1140px + 10.24vw);
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media{
        max-width: calc(390px + 10.24vw);
        padding-left: 5.12vw;
        padding-right: 5.12vw;
    }
}

.p-about_advantage_media_item{
    background-color: #fff;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_media_item{
        display: grid;
        grid-template-columns: auto 38.77%;
        gap: 60px;
        margin-top: 80px;
        padding: 70px 80px;
        border-radius: 40px;
    }
    .p-about_advantage_media_item + .p-about_advantage_media_item{
        margin-top: 30px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_item{
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        margin-top: 40px;
        padding: 30px 30px 40px;
        border-radius: 30px;
    }
    .p-about_advantage_media_item + .p-about_advantage_media_item{
        margin-top: 20px;
    }
}

.p-about_advantage_media_body{

}
@media screen and (min-width: 781px) {
    
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_body{
        text-align: center;
    }
}

.p-about_advantage_media_category{
    display: inline-block;
    background-color: #293E8F;
    color: #fff;
    font-weight: bold;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_media_category{
        padding: 15px 20px;
        border-radius: 10px;
        font-size: 24px;
        line-height: 1.4;
    }
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_category{
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 16px;
    }  
}

.p-about_advantage_media_ttl{
    font-weight: bold;
    line-height: 1.4;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_media_ttl{
        margin-top: 40px;
        font-size: 36px;
    }   
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_ttl{
        margin-top: 30px;
        font-size: 23px;
    }
}
.p-about_advantage_media_ttl-accent{
    color: #F4B102;
}

.p-about_advantage_media_text{
    font-weight: 500;
}
@media screen and (min-width: 781px) {
   .p-about_advantage_media_text{
        margin-top: 40px;
        font-size: 18px;
        line-height: 1.77;
    } 
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_text{
        margin-top: 30px;
        font-size: 16px;
        line-height: 1.6;
        text-align: left;
    }
}

.p-about_advantage_media_link{
    display: flex;
    gap: 15px;
    align-items: center;
    font-weight: 500;
}
.p-about_advantage_media_link:hover{
    opacity: 0.8;
}
@media screen and (min-width: 781px) {
    .p-about_advantage_media_link{
        margin-top: 40px;
        font-size: 20px;
    }
    
}
@media screen and (max-width: 780px) {
    .p-about_advantage_media_link{
        margin-top: 30px;
        font-size: 16px;
    }
}

.p-about_advantage_media_link img{
        width: 8px;

}
@media screen and (min-width: 781px) {
    .p-about_advantage_media_link img{
    }
}
@media screen and (max-width: 780px) {
    
}

.p-about_lets{

}
@media screen and (min-width: 781px) {
    .p-about_lets{
        padding-top: 70px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_lets{
        padding-top: 60px;
    }
}

.p-about_lets_wrap{
    display: grid;
}
@media screen and (min-width: 781px) {
    .p-about_lets_wrap{
        gap: 30px;
        grid-template-columns: auto 467px auto;
        margin-top: 60px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_lets_wrap{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "item2 item2"
        "item1 item3";
        gap: 40px 0;
        margin-top: 40px;
    }
}


@media screen and (min-width: 781px) {
    
}
@media screen and (max-width: 780px) {
   .p-about_lets_leftImg{
        grid-area: item1;
    } 
}

.p-about_lets_content{
    text-align: center;
}
@media screen and (min-width: 781px) {
    
}
@media screen and (max-width: 780px) {
    .p-about_lets_content{
        grid-area: item2;
        width: 80%;
        margin-inline: auto;
    }
        
}
.p-about_lets_title{
    display: grid;
    color: #293E8F;
    text-align: center;
    font-weight: bold;
}
@media screen and (min-width: 781px) {
    .p-about_lets_title{
        gap: 20px;
        grid-template-columns: 25px auto 25px;
        font-size: 23px;
        line-height: 1.6;
    }
}
@media screen and (max-width: 780px) {
    .p-about_lets_title{
        gap: 20px;
        grid-template-columns: 27px auto 27px;
        font-size: 18px;
        line-height: 1.4;
    }
}

.p-about_lets_title_img{

}

.p-about_lets_button{
    display: inline-block;
    border-radius: 100px;
    background-color: #4F6ADC;
    color: #fff;
    font-weight: bold;
}
.p-about_lets_button:hover{
    opacity: 0.8;
}
@media screen and (min-width: 781px) {
    .p-about_lets_button{
        width: 100%;
        margin-top: 35px;
        padding: 18px;
        font-size: 28px;
    }
    .p-about_lets_button img{
        width: 11px;
        margin-left: 15px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_lets_button{
        width: 100%;
        margin-top: 30px;
        padding: 18px;
        font-size: 22px;
    }
    .p-about_lets_button img{
        width: 9px;
        margin-left: 15px;
    }  
}

.p-about_lets_link{
    display: inline-block;
    font-weight: 500;
}
.p-about_lets_link:hover{
    opacity: 0.8;
}
@media screen and (min-width: 781px) {
    .p-about_lets_link{
        margin-top: 35px;
        font-size: 18px;
    }
    .p-about_lets_link img{
        width: 8px;
        margin-left: 15px;
    }
}
@media screen and (max-width: 780px) {
    .p-about_lets_link{
        margin-top: 20px;
        font-size: 16px;
    }
    .p-about_lets_link img{
        width: 8px;
        margin-left: 15px;
    }
}


@media screen and (min-width: 781px) {
    
}
@media screen and (max-width: 780px) {
    .p-about_lets_rightImg{
        grid-area: item3;
    }
}