@charset "utf-8";
/* CSS Document */


/* common
   ================================================================== */
.lp_page .contents_wrap{
    z-index: auto;
}


/* lp_header
   ================================================================== */
.lp_header{
    background: #005AAB;
}

.lp_header .inner{
    height: 12vw;
    display: flex;
    align-items: center;
}

.lp_header .site_logo{
    padding: 0;
    width: 24vw;
    top: -.6vw;
    position: relative;
}


/* lp_footer
   ================================================================== */
.lp_footer{
    margin: 20vw 0 0;
}

/* lp_cv_block */
.lp_cv_block{
	padding: 10vw 0;
    background: #005AAB;
}

.lp_cv_block .cv_banner{
	margin: 0;
}

.lp_cv_block .character_title_block{
	padding: 0 0 0;
}

.lp_cv_block .cv_banner_ttl{
    margin: 0 0 3vw;
    font-size: 6vw;
    font-weight: 900;
    color: #fff;
	width: 100%;
}

.lp_cv_block .svg_icon_btn{
    margin: 5vw 0 0;
}

.lp_cv_block .buttons_list{
    margin: 8vw auto 0;
}

.lp_cv_block .buttons_list > li + li{
    margin: 3vw 0 0;
}

/* bottom_box */
.lp_footer .lp_footer_bottom{
	padding: 5vw 0;
}


/* lp_kv
   ================================================================== */
.lp_kv{
    line-height: 0;
    display: flex;
    justify-content: center;
    background: #EEF4F6;
    border-bottom: 5px solid #F5EA2A;
}

.lp_kv .photo{
    margin: 0 auto;
}

.lp_kv .photo img{
    width: 100%;
}


/* lp_youtube
   ================================================================== */
.lp_youtube{
    padding: 5vw 0 0;
}

.lp_youtube .center_box{
    margin: 0 auto;
    position: relative;
}

.lp_youtube .frame{
    padding: 5vw 0;
    line-height: 0;
    position: relative;
}

.lp_youtube .frame:before{
	content: "";
	background: #005AAB;
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
	right: 95%;
}

.lp_youtube .frame{
	line-height: 0;
}

.lp_youtube .frame iframe{
	width: 100%;
    height: 53vw;
    position: relative;
    z-index: 1;
}

.lp_youtube .character{
	margin: -4vw 0 0 auto;
    width: 20vw;
    line-height: 0;
}


/* index_shops
   ================================================================== */
.lp_page .index_shops{
    margin: 15vw 0 0;
    padding: 0;
}


/* lp_detail
   ================================================================== */
.lp_detail{
    padding: 2vw 0 0;
}

.lp_detail .title{
    font-size: 7vw;
    font-weight: 900;
    color: #005AAB;
    letter-spacing: 0.05em;
    text-align: center;
}

/* choice */
.lp_detail .choice{
    margin: 10vw 0 0;
}

.lp_detail .choice .ttl{
    text-align: center;
}

.lp_detail .choice .ttl > span{
    width: 50vw;
    height: 10vw;
    font-size: 3.5vw;
    font-weight: 700;
    color: #fff;
    border-radius: 100px;
    background: #1A64AE;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.lp_detail .choice .check_list{
    margin: -5vw auto 0;
    padding: 8vw 3vw 10vw;
    width: 100%;
    box-sizing: border-box;
    background: #F8F8FB;
    border-radius: 15px;
}

.lp_detail .check_list > li{
    padding: 3vw 0 2vw 7vw;
    font-size: 4.5vw;
    font-weight: 800;
    color: #DE2426;
    background-image: url("../images/common/icon_list_check.svg");
	background-repeat: no-repeat;
	background-position: 1vw 5.3vw;
	background-size: 4vw;
    border-bottom: 1px dashed #B3B3BE;
}

/* period */
.lp_detail .period{
    margin: 10vw 0 0;
}

.lp_detail .period .ttl{
    text-align: center;
}

.lp_detail .period .ttl > span{
    width: 18vw;
    height: 8vw;
    font-size: 3.7vw;
    letter-spacing: 0.2em;
    font-weight: 800;
    color: #005AAB;
    border: 2px solid #005AAB;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.lp_detail .period .year{
    margin: 5vw 0 0;
    font-size: 5.2vw;
    letter-spacing: 0.05em;
    font-weight: 800;
    line-height: 1;
    color: #005AAB;
    text-align: center;
}

.lp_detail .period .year .siz_s{
    font-size: .8em;
    font-weight: inherit;
    color: inherit;
}

.lp_detail .period .date{
    margin: 3vw -3vw 0;
    font-size: 8vw;
    letter-spacing: 0.05em;
    font-weight: 900;
    line-height: 1;
    color: #005AAB;
    text-align: center;
}

.lp_detail .period .date .siz_s{
    font-size: .6em;
    font-weight: inherit;
    color: inherit;
}

.lp_detail .period .date .siz_m{
    font-size: .7em;
    font-weight: inherit;
    color: inherit;
}

.lp_detail .period .date .ma_side_minus{
    margin: 0 -1.5vw;
}

.lp_detail .period .date .mar_minus{
    margin-right: -1.5vw;
}

/* benefits */
.lp_detail .benefits{
    margin: 12vw 0 0;
}

.lp_detail .benefits .list{
    margin: 0 auto;
}

.lp_detail .benefits .list > li{
    margin: 0;
    text-align: center;
}

.lp_detail .benefits .list .benefits_box{
    padding: 8vw 2vw 5vw;
    background: #F5EA2A;
    border: 5px solid #DE2426;
    border-radius: 15px;
    position: relative;
}

.lp_detail .benefits .list .benefits_box .ttl{
    margin: auto;
    position: absolute;
    top: -5vw;
    left: 0;
    right: 0;
    text-align: center;
}

.lp_detail .benefits .list .benefits_box .ttl > span{
    width: 50vw;
    height: 10vw;
    font-size: 4vw;
    font-weight: 700;
    color: #fff;
    border-radius: 100px;
    background: #149F4E;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.lp_detail .benefits .list .benefits_box p{
    font-size: 6vw;
    font-weight: 900;
    color: #DE2426;
}

.lp_detail .benefits .list .either{
    padding: 8vw 0 12vw;
    text-align: center;
    position: relative;
}

.lp_detail .benefits .list .either:before{
	content: "";
    margin: auto;
	background: #DE2426;
	width: 5px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    right: 0;
}

.lp_detail .benefits .list .either_ttl{
    display: inline-flex;
    position: relative;
    z-index: 1;
}

.lp_detail .benefits .list .either_ttl .txt{
    padding: 0 0 0 3vw;
    width: 40vw;
    height: 10vw;
    font-size: 4vw;
    color: #fff;
    background: #DE2426;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.lp_detail .benefits .list .either_ttl .character{
    width: 15vw;
    line-height: 0;
    position: absolute;
    top: -4vw;
    left: -9vw;
}


@media screen and (min-width : 500px){


    /* lp_header
       ================================================================== */
    .lp_header .inner{
        height: 6.0vw;
    }

    .lp_header .site_logo{
        margin: 0 0 0 2.0vw;
        width: 12.5vw;
        top: -.2vw;
    }


    /* lp_footer
       ================================================================== */
    .lp_footer{
        margin: 15.0vw 0 0;
    }

    /* lp_cv_block */
    .lp_cv_block{
        padding: 5.7vw 0 7.0vw;
    }

    .lp_cv_block .cv_banner .character_title_block{
        align-items: flex-start;
    }

    .lp_cv_block .cv_banner .character_title_pc_left{
        width: 50.0vw;
    }

    .lp_cv_block .cv_banner_ttl{
        margin: 0 0 .8vw;
        font-size: 3.0vw;
    }

    .lp_cv_block .svg_icon_btn{
        margin: 1.7vw 0 0;
    }

    .lp_cv_block .buttons_list{
        margin: 0 0 0;
        text-align: left;
    }

    .lp_cv_block .buttons_list > li + li{
        margin: 1.5vw 0 0;
    }

    /* bottom_box */
    .lp_footer .lp_footer_bottom{
        padding: 2.5vw 0;
    }


    /* lp_kv
       ================================================================== */
    .lp_kv .photo{
        margin: -6.0vw auto 0;
        width: 50.0vw;
        position: relative;
        z-index: 10;
    }
    

    /* lp_youtube
       ================================================================== */
    .lp_youtube{
        padding: 4.5vw 0 0;
    }

    .lp_youtube .center_box{
        width: 70.0vw;
    }

    .lp_youtube .frame{
        padding: 0;
    }

    .lp_youtube .frame:before{
        right: calc(100% + 2.3vw);
    }

    .lp_youtube .frame iframe{
        height: 39.2vw;
    }

    .lp_youtube .character{
        margin: 0;
        width: 10.0vw;
        position: absolute;
        bottom: 0;
        left: calc(100% + 3.0vw);
    }


    /* index_shops
       ================================================================== */
    .lp_page .index_shops{
        margin: 8.0vw 0 0;
    }


    /* lp_detail
       ================================================================== */
    .lp_detail{
        padding: 5.0vw 0 0;
    }

    .lp_detail .title{
        font-size: 5.0vw;
    }

    /* choice */
    .lp_detail .choice{
        margin: 4.5vw 0 0;
    }

    .lp_detail .choice .ttl{
        text-align: center;
    }

    .lp_detail .choice .ttl > span{
        width: 22.0vw;
        height: 4.5vw;
        font-size: 1.6vw;
    }

    .lp_detail .choice .check_list{
        margin: -2.3vw auto 0;
        padding: 2.5vw 5.0vw 4.0vw;
        width: 70.0vw;
    }

    .lp_detail .check_list > li{
        padding: 2.1vw 0 1.6vw 5.0vw;
        font-size: 2.7vw;
        background-position: 1.3vw 2.7vw;
        background-size: 2.0vw;
    }

    /* period */
    .lp_detail .period{
        margin: 4.5vw 0 0;
    }

    .lp_detail .period .ttl > span{
        width: 8.0vw;
        height: 4.0vw;
        font-size: 1.7vw;
    }

    .lp_detail .period .year{
        margin: 1.6vw 0 0;
        font-size: 2.5vw;
    }

    .lp_detail .period .date{
        margin: 1.0vw 0 0;
        font-size: 5.0vw;
    }

    .lp_detail .period .date .ma_side_minus{
        margin: 0 -1.0vw;
    }

    .lp_detail .period .date .mar_minus{
        margin-right: -1.0vw;
    }

    /* benefits */
    .lp_detail .benefits{
        margin: 7.0vw 0 0;
    }

    .lp_detail .benefits .list{
        margin: 0 auto;
        width: 70.0vw;
    }

    .lp_detail .benefits .list .benefits_box{
        padding: 3.6vw 2.0vw 3.0vw;
    }

    .lp_detail .benefits .list .benefits_box .ttl{
        top: -2.2vw;
    }

    .lp_detail .benefits .list .benefits_box .ttl > span{
        width: 22.0vw;
        height: 4.5vw;
        font-size: 2.0vw;
    }

    .lp_detail .benefits .list .benefits_box p{
        font-size: 3.0vw;
        line-height: 4.2vw;
    }

    .lp_detail .benefits .list .either{
        padding: 3.5vw 0 5.7vw;
    }

    .lp_detail .benefits .list .either_ttl .txt{
        padding: 0 0 0 1.5vw;
        width: 17.2vw;
        height: 4.0vw;
        font-size: 1.6vw;
    }

    .lp_detail .benefits .list .either_ttl .character{
        width: 7.4vw;
        top: -2.5vw;
        left: -4.2vw;
    }

    
}
@media screen and (min-width : 1040px){    


    /* lp_header
       ================================================================== */
    .lp_header .inner{
        height: 60px;
        display: flex;
        align-items: center;
    }

    .lp_header .site_logo{
        margin: 0 0 0 50px;
        width: 125px;
        top: -2px;
    }


    /* lp_footer
       ================================================================== */
    .lp_footer{
        margin: 150px 0 0;
    }

    /* lp_cv_block */
    .lp_cv_block{
        padding: 57px 0 70px;
    }

    .lp_cv_block .cv_banner .character_title_block{
        align-items: flex-start;
    }

    .lp_cv_block .cv_banner .character_title_pc_left{
        width: 500px;
    }

    .lp_cv_block .cv_banner_ttl{
        margin: 0 0 8px;
        font-size: 30px;
    }

    .lp_cv_block .svg_icon_btn{
        margin: 17px 0 0;
    }

    .lp_cv_block .buttons_list{
        margin: 0 0 0;
        text-align: left;
    }

    .lp_cv_block .buttons_list > li + li{
        margin: 15px 0 0;
    }

    /* bottom_box */
    .lp_footer .lp_footer_bottom{
        padding: 25px 0;
    }


    /* lp_kv
       ================================================================== */
    .lp_kv .photo{
        margin: -60px auto 0;
        width: 500px;
    }
    

    /* lp_youtube
       ================================================================== */
    .lp_youtube{
        padding: 45px 0 0;
    }

    .lp_youtube .center_box{
        width: 700px;
    }

    .lp_youtube .frame{
        padding: 0;
    }

    .lp_youtube .frame:before{
        right: calc(100% + 23px);
    }

    .lp_youtube .frame iframe{
        height: 392px;
    }

    .lp_youtube .character{
        margin: 0;
        width: 100px;
        position: absolute;
        bottom: 0;
        left: calc(100% + 30px);
    }


    /* index_shops
       ================================================================== */
    .lp_page .index_shops{
        margin: 80px 0 0;
    }


    /* lp_detail
       ================================================================== */
    .lp_detail{
        padding: 50px 0 0;
    }

    .lp_detail .title{
        font-size: 50px;
    }

    /* choice */
    .lp_detail .choice{
        margin: 45px 0 0;
    }

    .lp_detail .choice .ttl{
        text-align: center;
    }

    .lp_detail .choice .ttl > span{
        width: 220px;
        height: 45px;
        font-size: 16px;
    }

    .lp_detail .choice .check_list{
        margin: -23px auto 0;
        padding: 25px 50px 40px;
        width: 700px;
    }

    .lp_detail .check_list > li{
        padding: 21px 0 16px 50px;
        font-size: 27px;
        background-position: 13px 27px;
        background-size: 20px;
    }

    /* period */
    .lp_detail .period{
        margin: 45px 0 0;
    }

    .lp_detail .period .ttl > span{
        width: 80px;
        height: 40px;
        font-size: 17px;
    }

    .lp_detail .period .year{
        margin: 16px 0 0;
        font-size: 25px;
    }

    .lp_detail .period .date{
        margin: 10px 0 0;
        font-size: 50px;
    }

    .lp_detail .period .date .ma_side_minus{
        margin: 0 -10px;
    }

    .lp_detail .period .date .mar_minus{
        margin-right: -10px
    }

    /* benefits */
    .lp_detail .benefits{
        margin: 70px 0 0;
    }

    .lp_detail .benefits .list{
        margin: 0 auto;
        width: 700px;
    }

    .lp_detail .benefits .list .benefits_box{
        padding: 36px 20px 30px;
    }

    .lp_detail .benefits .list .benefits_box .ttl{
        top: -22px;
    }

    .lp_detail .benefits .list .benefits_box .ttl > span{
        width: 220px;
        height: 45px;
        font-size: 20px;
    }

    .lp_detail .benefits .list .benefits_box p{
        font-size: 30px;
        line-height: 42px;
    }

    .lp_detail .benefits .list .either{
        padding: 35px 0 57px;
    }

    .lp_detail .benefits .list .either_ttl .txt{
        padding: 0 0 0 15px;
        width: 172px;
        height: 40px;
        font-size: 16px;
    }

    .lp_detail .benefits .list .either_ttl .character{
        width: 74px;
        top: -25px;
        left: -42px;
    }


}