@charset "UTF-8";

.sec_ttl{
    text-align: center;
    font-size: 3.0rem;
    font-weight: 700;
    margin-bottom: 80px;
}
.sec_ttl .en{
    position: relative;
    font-size: 4.0rem;
}
.sec_ttl .jp{
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700 !important;
    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;
}
.sec_ttl:after{
    display: block;
    content: '';
    margin: 15px auto 0 auto;
    width: 200px;
    height: 5px;
    background: #5d7b80;
}

.lead{
    text-align: center;
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 60px;
}

/*.col01{ color: #c13e12 !important; /* red }*/
.col01{ color: #55a933 !important; /* green */}

@media screen and (max-width: 767px) {
    .sec_ttl{
        font-size: 6.4vw;
        line-height: 1.5;
        margin-bottom: 12%;
    }
    .sec_ttl .en{
        font-size: 7.8vw;
    }
    .sec_ttl .jp{
        top: -6vw;
        font-size: 3.8vw;
    }
    .sec_ttl:after{
        margin: 10px auto 0 auto;
        width: 45vw;
    }

    .lead{
        font-size: 5vw;
        margin-bottom: 8%;
    }
}
/*  sec01 -------------------------------------------*/
.sec01{
    position: relative;
    padding: 0 0 50px 0;
    box-sizing: border-box;
}

.sec01 .main{
    width: 100%;
}
.sec01 .main img{
    display: block;
    width: 100%;
    max-width: inherit;
}
.sec01 .mainBtm{
    position: relative;
    background: #5d7b80;
    box-sizing: border-box;
}
.sec01 .mainBtm .flex{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row-reverse;
    max-width: 1180px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}
.sec01 .mainBtm .flex .img{
    position: relative;
    margin-bottom: -25px;
    width: 43%;
    max-width: 501px;
}
.sec01 .mainBtm .flex .txt{
    width: 57%;
    padding-left: 60px;
    box-sizing: border-box;
}
.sec01 .mainBtm .flex .txt p{
    color: #FFF;
    font-size: 1.4rem;
    line-height: 2.1;
}
.sec01 .mainBtm .flex .txt .subttl{
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 5px;
}
.sec01 .mainBtm .flex .txt h2{
    color: #FFF;
    font-size: 3.0rem;
    font-weight: 700;
    font-feature-settings: "palt";
    margin-bottom: 20px;
    letter-spacing: .5rem;
}
.sec01 .mainBtm .flex .txt h2 .en{ font-size: 4.0rem;}
.sec01 .mainBtm .flex .txt h2 .small{
    font-size: 2.0rem;
}
.sec01 .mainBtm .flex .txt .catch{
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.sec01 .box{
    margin-top: 35px;
    padding-left: 40px;
    box-sizing: border-box;
}
.sec01 .box p{
    font-size: 1.4rem;
    line-height: 2.14;
}

@media screen and (max-width: 1180px) {
    .sec01 .box .tab{ display: block;}
}

@media screen and (max-width: 767px) {
    .sec01{
        padding: 0 0 8% 0;
    }

    .sec01 .mainBtm .flex{
        display: block;
        max-width: inherit;
        padding: 12% 0 8% 0;
    }
    .sec01 .mainBtm .flex.wrap{ width: 86%;}
    .sec01 .mainBtm .flex .img{
        margin: 0 auto 5% auto;
        bottom: 0;
        width: 100%;
        max-width: 501px;
    }
    .sec01 .mainBtm .flex .txt{
        width: 100%;
        padding-left: 0;
        box-sizing: border-box;
    }
    .sec01 .mainBtm .flex .txt p{
        font-size: 3.7vw;
        line-height: 2;
    }
    .sec01 .mainBtm .flex .txt .subttl{
        font-size: 5vw;
        text-align: center;
        margin-bottom: 10vw;
    }
    .sec01 .mainBtm .flex .txt h2{
        position: relative;
        text-align: center;
        font-size: 6vw;
        margin-bottom: 7%;
        letter-spacing: .5rem;
    }
    .sec01 .mainBtm .flex .txt h2 .en{ font-size: 7vw;}
    .sec01 .mainBtm .flex .txt h2 .small{
        position: absolute;
        top: -8vw;
        left: 28vw;
        font-size: 3.8vw;
    }
    .sec01 .mainBtm .flex .txt .catch{
        font-size: 5vw;
        line-height: 1.6;
        margin-bottom: 5%;
        text-align: center;
    }
    .sec01 .box{
        margin-top: 8%;
        padding-left: 0;
    }
    .sec01 .box.wrap{
        width: 86%;
    }
    .sec01 .box p{
        font-size: 3.6vw;
        line-height: 2;
        margin-top: 4%;
    }

}

/*  sec02 -------------------------------------------*/
.sec02{
    position: relative;
    padding:130px 0 70px 0;
    box-sizing: border-box;
}

.sec02 .box_wrap{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.sec02 .box{
    position: relative;
    width: 32%;
    max-width: 371px;
    margin-bottom: 45px;
    margin-right: 2%;
}
.sec02 .box:nth-of-type(3n){ margin-right: 0;}
.sec02 .box .img{
    position: relative;
    margin-bottom: 15px;
    text-align: center;
}

.sec02 .box .txt h3{
    font-size: 3.0rem;
    margin-bottom: 5px;
    text-align: center;
}
.sec02 .box .txt p{
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
}

.sec02 .box a:hover{ text-decoration: none;}


@media screen and (max-width: 767px) {
    .sec02{
        padding:12% 0 12% 0;
    }
    .sec02 .wrap{ width: 86%;}

    .sec02 .box_wrap{
        display: block;
    }
    .sec02 .box{
        position: relative;
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }
    .sec02 .box+.box{ margin-top: 8%;}

    .sec02 .box .txt h3{
        font-size: 6.8vw;
        margin-bottom: 8px;
    }
    .sec02 .box .txt p{
        font-size: 3.6vw;
    }

}


/*  sec03 -------------------------------------------*/
.sec03{
    position: relative;
    padding:0 0 80px 0;
    box-sizing: border-box;
}

.ttl_band{
    background: #5d7b80;
    padding: 75px 0;
    box-sizing: border-box;
}
.ttl_band .sec_ttl{ color: #FFF; margin-bottom: 0;}
.ttl_band .sec_ttl:after{ background: #FFF;}

.bg-color{ background: #dadada;}
.style_box{
    padding: 90px 0;
    box-sizing: border-box;
}
.style_box.bg-color{
    padding: 80px 0;
}

.style_box .boxIn{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.style_box.bg-color .boxIn{ flex-direction: row-reverse;}

.style_box .under_border{
    border-bottom: 1px solid #646464;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.style_box h3{
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
}
.style_box h3 span{
    display: block;
    font-size: 4.5rem;
    margin-bottom: 25px;
}
.style_box h3:after{
    position: absolute;
    left: 0;
    top: -15px;
    display: block;
    font-size: 12.1rem;
    color: rgba(100,100,100,.15);
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
}

#style01.style_box h3:after{ content: 'PLAN.1';}
#style02.style_box h3:after{ content: 'PLAN.2';}
#style03.style_box h3:after{ content: 'PLAN.3';}
#style04.style_box h3:after{ content: 'PLAN.4';}
/* #style05.style_box h3:after{ content: 'PLAN.5';} */
#style06.style_box h3:after{ content: 'PLAN.5';}
#style07.style_box h3:after{ content: 'PLAN.6';}
#style08.style_box h3:after{ content: 'PLAN.7';}


.style_box .catch{
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.7;
}
.style_box .text_price{
    font-size: 1.8rem;
    line-height: 2.2;
    font-weight: 700;
    margin-top: 10px;
    font-feature-settings: "palt";
}
.style_box .text_price .small{ font-size: 1.6rem;}
.style_box .text_price .price{ font-size: 2.5rem;}

.style_box .text{
    margin-top: 30px;
    font-size: 1.4rem;
    line-height: 2.14;
}
.style_box .text+.text{ margin-top: 0;}

.style_box .btn_wrap{ margin-top: 20px;}
.style_box .btn_wrap .btn a{
    background: #FFF;
    max-width: 220px;
    font-weight: 700;
    margin: 0 0 0 auto;
}
.style_box.bg-color .btn_wrap .btn a{
    margin: 0 auto 0 0;
    padding: 20px 0 18px 0;
}

.point_box{
    margin-top: 45px;
    background: #dadada;
    padding: 30px 22px;
    box-sizing: border-box;
}
.bg-color .point_box{ background: #FFF;}
.point_box h4{
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    background:-webkit-linear-gradient(rgba(215,255,255,0) 50%, #FFF 50%);
    background:-o-linear-gradient(rgba(255,255,255,0) 50%, #FFF 50%);
    background:linear-gradient(rgba(255,255,255,0) 50%, #FFF 50%);
}
.bg-color .point_box h4{
    background:-webkit-linear-gradient(rgba(215,255,255,0) 50%, #dadada 50%);
    background:-o-linear-gradient(rgba(255,255,255,0) 50%, #dadada 50%);
    background:linear-gradient(rgba(255,255,255,0) 50%, #dadada 50%);
}

.point_box ol{
    padding: 0 15px;
    box-sizing: border-box;
}
.point_box ol li{
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.5;
}
.point_box ol li+li{ margin-top: 12px;}

.style_box .txt{
    width: 49%;
    padding-top: 50px;
    box-sizing: border-box;
}
.style_box .img{
    width: 48%;
    max-width: 560px;
}

.slider{
    margin-top: 65px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* #style01 */
#style01.style_box .img_list{
    margin-top: 15px;
}
#style01.style_box .img_list ul{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
#style01.style_box .img_list ul li{
    width: 48%;
    max-width: 272px;
    margin: 0 4% 4% 0;
}
#style01.style_box .img_list ul li:nth-of-type(2n){ margin-right: 0;}
#style01.style_box .point_box ol li{
    letter-spacing: -0.08rem;
    font-size: 2.0rem;
}
#style01.style_box .slider.sp{ display: none !important;}

/* #style02 */
#style02.style_box .img img{
    display: block;
}
#style02.style_box .img img+img{ margin-top: 10px;}

/* #style03 */
#style03.style_box .img .img_list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
#style03.style_box .img .img_list li{
    width: 48.3%;
    max-width: 270px;
    margin-bottom: 35px;
}
#style03.style_box .img .img_list li p{
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 15px;
}
#style03.style_box .img .img_list li p span{
    display: block;
    font-size: 2.0rem;
    text-align: center;
}

/* #style05 */
#style05.style_box .img img+img{ margin-top: 20px;}


/* #style06 */
#style06.style_box .catch{ margin-right: -28px;}

/* #style07 */
#style07.style_box .slider{
    background: #FFF;
    padding: 35px 35px 20px 35px;
    box-sizing: border-box;
}

/* #style08 */
#style08.style_box .slider{
    align-items: center;
    background: #FFF;
    padding: 0 0 0 40px;
    box-sizing: border-box;
}
#style08.style_box .slider .slide .name{
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
}
#style08.style_box .slider .slide .name span{
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 7px;
    text-align: center;
}

#style08.style_box .slider .slide .plan{
    position: relative;
    margin-top: 7px;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}
#style08.style_box .slider .slide .plan .small{ font-size: 1.8rem; margin-left: 5px;}

#style08.style_box .slider .slide .plan:after{
    position: relative;
    display: block;
    content: '';
    margin: 0 auto;
    width: 80%;
    height: 1px;
    background: #646464;
}


@media screen and (max-width: 767px) {
    .sec03{
        padding:0;
    }
    .sec03 .sec_ttl:after {
        margin: 15px auto 0 auto;
        width: 38vw;
        height: 4px;
    }

    .ttl_band{
        padding: 12% 0;
    }
    .style_box{
        padding: 13% 0;
    }
    .style_box.bg-color{
        padding: 14% 0;
    }

    .style_box .boxIn.wrap{
        width: 86%;
    }
    .style_box .boxIn{
        flex-direction: column-reverse;
    }
    .style_box.bg-color .boxIn {
        flex-direction: column;
    }
    .style_box .txt .img-sp{
        margin: 0 auto 10px auto;
    }

    .style_box .under_border{
        border: none;
        padding-bottom: 0;
    }
    .style_box .sp-under_border{
        display: inline-block;
        border-bottom: 1px solid #646464;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .style_box h3{
        font-size: 4.4vw;
        line-height: 1.1;
        margin-bottom: 5%;
    }
    .style_box h3 span{
        font-size: 10.5vw;
        margin-bottom: 3%;
    }
    .style_box h3:after{
        left: 7vw;
        top: -12vw;
        font-size: 21vw;
    }
    .style_box .img h3{ margin-bottom: 9%;}

    .style_box .catch{
        font-size: 4.6vw;
        text-align: center;
        line-height: 2.7;
        letter-spacing: -0.05rem;
    }
    .style_box .text_price{
        text-align: center;
        font-size: 4.4vw;
        line-height: 2.2;
        margin-top: 10px;
    }
    .style_box .text_price .small{ font-size: 3.8vw;}
    .style_box .text_price .price{ font-size: 6.4vw;}

    .style_box .text{
        margin-top: 8%;
        font-size: 3.6vw;
        line-height: 2;
    }
    .style_box .text+.text{ margin-top: 6%;}
    .style_box .btn_wrap{ margin-top: 8%;}
    .style_box .btn_wrap .btn a{
        width: 80%;
        max-width: inherit;
        margin: 0 auto;
    }
    .style_box.bg-color .btn_wrap .btn a{
        margin: 0 auto;
        padding: 5% 0;
    }

    .point_box{
        margin-top: 8%;
        padding: 6% 4%;
    }
    .point_box h4{
        text-align: center;
        font-size: 5.4vw;
        margin-bottom: 8%;
        background:-webkit-linear-gradient(rgba(215,255,255,0) 40%, #FFF 40%);
        background:-o-linear-gradient(rgba(255,255,255,0) 40%, #FFF 40%);
        background:linear-gradient(rgba(255,255,255,0) 40%, #FFF 40%);
    }
    .bg-color .point_box h4{
        background:-webkit-linear-gradient(rgba(215,255,255,0) 40%, #dadada 40%);
        background:-o-linear-gradient(rgba(255,255,255,0) 40%, #dadada 40%);
        background:linear-gradient(rgba(255,255,255,0) 40%, #dadada 40%);
    }

    .point_box ol{
        padding: 0;
    }
    .point_box ol li{
        font-size: 4.2vw;
        line-height: 2;
    }
    .point_box ol li+li{ margin-top: 2px;}

    .style_box .txt{
        width: 100%;
        padding-top: 6%;
    }
    .bg-color.style_box .txt{
        padding-top: 10%;
    }

    .style_box .img{
        width: 100%;
        max-width: inherit;
        margin: 10% auto 0 auto;
        text-align: center;
    }

    .slider{
        margin-top: 65px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* #style01 */
    #style01.style_box{ overflow: hidden;}
    #style01.style_box .boxIn{ flex-direction: column;}
    #style01.style_box .point_box ol li{
        letter-spacing: 0;
        font-size: 4.2vw;
    }
    #style01.style_box .slider.sp{ 
        display: block!important;
        margin-top: 6%;
    }

    /* #style02 */
    #style02.bg-color.style_box .txt{ padding-top: 6%;}
    #style02.style_box .sp-under_border{display: block;}
    #style02.style_box .img img.pc{ display: none;}
    #style02.style_box .point_box{ margin-bottom: 6%;}

    /* #style03 */
    #style03.style_box .img .img_list{
        display: block;
    }
    #style03.style_box .img .img_list li{
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
    }
    #style03.style_box .img .img_list li p{
        font-size: 3.8vw;
        margin-top: 3%;
    }
    #style03.style_box .img .img_list li p span{
        font-size: 4.8vw;
    }

    /* #style04 */
    #style04 .slider{
        margin-top: 8%;
        width: 86%;
    }

    /* #style05 */
    #style05.style_box .boxIn{ flex-direction: column;}
    #style05.style_box .sp-under_border {
        display: block;
    }
    #style05 .point_box{ margin-bottom: 5%;}

    /* #style06 */
    #style06.style_box .boxIn{ flex-direction: column;}
    #style06.style_box .catch{ margin-right: auto;}
    #style06.style_box .sp-under_border{display: block;}
    #style06.style_box.bg-color .boxIn{ flex-direction: column;}
    #style06.bg-color.style_box .txt{ padding-top: 6%;}

    #style06 .slider{
        margin-top: 8%;
        width: 86%;
    }

    #style06.style_box .btn_wrap{
        width: 86%;
        margin: 8% auto 0 auto;
    }

    /* #style07 */
    #style07.style_box .boxIn{ flex-direction: column;}
    #style07.style_box .sp-under_border{display: block;}

    #style07 .slider{
        margin-top: 8%;
        width: 86%;
    }

    #style07.style_box .slider{
        padding: 6.4%;
    }

    #style07.style_box .btn_wrap{
        width: 86%;
        margin: 8% auto 0 auto;
    }

    /* #style08 */
    #style08.style_box .boxIn{ flex-direction: column;}
    #style08.style_box .txt{ padding-top: 6%;}
    #style08.style_box .sp-under_border{display: block;}

    #style08.style_box .slider{
        width: 86%;
        margin: 12% auto 8% auto;
        background: none;
        padding:0 8%;
    }
    #style08.style_box .slider .slide{ text-align: center;}
    #style08.style_box .slider .slide .name{
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        margin-bottom: 5%;
    }
    #style08.style_box .slider .slide .name span{
        font-size: 6vw;
    }

    #style08.style_box .slider .slide .plan{
        display: inline-block;
        text-align: center;
        font-size: 6vw;
    }
    #style08.style_box .slider .slide .plan .small{ font-size: 4.2vw;}

    #style08.style_box .slider .slide .plan:after{
        width: 110%;
    }
    #style08 .sp-img{
        width: 86%;
        margin: 17% auto 0 auto;
    }
    #style08 .sp-img img{
        margin: 0 auto;
    }

    #style08.style_box .btn_wrap{
        width: 86%;
        margin: 8% auto 0 auto;
    }

    .slider{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    .slider .slick-slide img{
        width: 100%;
        max-width: inherit;
        margin: 0 auto;
        text-align: center;
    }
    .slider .slick-next {
        right: -4.5vw;
    }
    .slick-prev {
        left: -4.5vw;
        z-index: 5;
    }
    .slider .slick-prev, .slider .slick-next {
        width: 9vw;
        height: 9vw;
        top: 50%;
        margin-top: -4.5vw;
    }
    .slider .slick-next:before ,
    .slider .slick-prev:before {
        content: '';
    }
    .slider .slick-prev:before, .slider .slick-next:before {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        margin: auto;
        margin-left: -2vw;
        opacity: 1;
        color: #646464;
        width: 3vw;
        height: 3vw;

        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 3;
    }
    .slider .slick-prev:before{
        margin-left: -1vw;
        border-bottom: 1px solid #646464;
        border-left: 1px solid #646464;
    }
    .slider .slick-next:before {
        margin-left: -2vw;
        border-top: 1px solid #646464;
        border-right: 1px solid #646464;
    }

    .slider .slick-prev:after, .slider .slick-next:after{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        content: '';
        width: 9vw;
        height: 9vw;
        background: #FFF;
        border: 1px solid #646464;
        border-radius: 100%;
        z-index: 1;
    }
}


.last.btn_wrap{ margin-bottom: 50px;}
.last.btn_wrap .btn a{
    margin: 0 auto;
    background: #646464;
    border: none;
    color: #FFF;
    padding: 25px 0 24px 0;
}

@media screen and (max-width: 767px) {
    .last.btn_wrap{
        margin: 10% auto 10% auto;
    }

    .last.btn_wrap .btn a{
        width: 70%;
        max-width: inherit;
        padding: 5% 0;
    }
    .last.btn_wrap .btn a:after{
        position: absolute;
        right: 5%;
        top: 50%;
        margin-left: 0;
        margin-top: -2vw;
    }

}