@charset "UTF-8";

/*=============================================================================

共通 - プログラム・料金、下層

=============================================================================*/
/*=======================================================
price
=======================================================*/
#price .ly_cont_inner{
    padding: 50px 0 40px;
}
#price .el_sec_mainTtl::before {
    background-image: url("../images/program/price_ttl_sub.svg");
    width: 86px;
    height: 28px;
}
/*料金詳細*/
.bl_price_info{
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bl_fee{
    height: 53px;
    background: #fff;
    border: 1px solid #445868;
    border-radius: 3px;
    display: flex;
    align-items: center;
}
.bl_fee > dt{
    height: 100%;
    padding-top: 3px;
    background: #445868;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bl_fee > dd{
    padding-top: 3px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 357px;
}
.bl_fee_before {
    margin-right: 69px;
    position: relative;
}
.bl_fee_before::before {
    content: "";
    width: 118px;
    height: 2px;
    background: #e60012;
    position: absolute;
    top: 9px;
    left: -8px;
}
.bl_fee_before::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 15px;
    border-color: transparent transparent transparent #ed6c00;
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
}
.bl_fee_after {
    font-size: 20px;
    display: flex;
    align-items: center;
}
.bl_fee_after > span {
    font-size: 34px;
    font-weight: bold;
    color: #e60012;
}
/*通い放題*/
#price .bl_allYouCanJoin_txt{
    text-align: center;
    line-height: 1.6;
}
/*プログラムテーブル*/
.bl_programTable{
    margin: 25px 0;
    background: #fff;
}
.bl_programTable_head > tr > th{
    height: 52px;
    padding-top: 3px;
    background: #ed6c00;
    color: #fff;
    font-size: 20px;
}
.bl_programTable_head > tr > th + th{
    border-left: 1px solid #fff;
}
.bl_programTable_head .type{
    width: 320px;
}
.bl_programTable_head .fee{
    width: 210px;
}
.bl_programTable_body > tr > *{
    padding: 15px 0 13px;
    border-bottom: 1px solid #707070;
    border-left: 1px solid #707070;
    text-align: left;
    line-height: 1.6;
}
.bl_programTable_body > tr > *:last-child{
    border-right: 1px solid #707070;
}
.bl_programTable_body .type{
    padding-left: 20px;
}
.bl_programTable_body .fee{
    padding-left: 25px;
    font-weight: bold;
}
.bl_programTable_body .fee .el_attention{
    margin-left: 1em;
    font-size: 12px;
    font-weight: normal;
}
.bl_programTable_body .info{
    padding-right: 10px;
    padding-left: 30px;
}
/*注意書き*/
#price .bl_attList{
    color: #242424;
    font-size: 14px;
    line-height: 1.6;
}
@media screen and (max-width : 750px){
    #price .ly_cont_inner{
        padding: 80px 0 90px;
    }
	#price .el_sec_mainTtl{
		margin-bottom: 60px;
	}
	#price .el_sec_mainTtl::before{
		width: 138px;
		height: 44px;
    }
/*料金詳細*/
    .bl_price_info{
        margin-bottom: 45px;
        display: block;
    }
    .bl_fee{
        width: 100%!important;
        height: 70px;
        margin: 0 auto;
        border-width: 2px;
        border-radius: 5px;
    }
    .bl_fee2{
        width: 60% !important;
    }
    .bl_fee > dt{
        width: 198px;
        padding-top: 0;
        font-size: 28px;
		flex-shrink: 0;
    }
    .bl_fee > dd{
        padding: 0!important;
        font-size: 34px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
    }
    .bl_fee_after {
        font-size: 28px;
    }
    .bl_fee_before {
        margin-right: 92px;
    }
    .bl_fee_before::before {
        width: 163px;
        height: 4px;
        top: 12px;
    }
    .bl_fee_before::after {
        border-width: 15px 0 15px 18px;
        right: -63px;
    }
    .bl_fee_after {
        font-size: 34px;
    }
    .bl_fee_after > span {
        font-size: 48px;
    }
/*通い放題*/
    #price .bl_allYouCanJoin_txt{
        margin-bottom: 60px;
    }
/*プログラムテーブル*/
    .bl_programTable{
        width: 1390px;
        margin: 0;
    }
    .bl_programTable_head > tr > th{
        height: 70px;
        padding-top: 0;
        font-size: 28px;
    }
    .bl_programTable_head .type{
        width: 470px;
    }
    .bl_programTable_head .fee{
        width: 320px;
    }
    .bl_programTable_head .info{
        width: 600px;
    }
    .bl_programTable_body > tr > *{
        padding: 20px 0;
		font-size: 24px;
    }
    .bl_programTable_body .type{
        padding-left: 30px;
    }
    .bl_programTable_body .fee{
        padding-left: 35px;
    }
    .bl_programTable_body .fee .el_attention{
        font-size: 22px;
    }
    .bl_programTable_body .info{
        padding-right: 20px;
    }
/*注意書き*/
    #price .bl_attList{
        font-size: 22px;
    }
}

/*=======================================================
attention
=======================================================*/
#attention{
    padding: 20px 0;
}
#attention > li{
    padding-left: 2.25em;
    color: #242424;
    font-size: 12px;
    line-height: 1.7;
    position: relative;
}
#attention > li + li{
    margin-top: 1em;
}
#attention li::before{
    position: absolute;
    top: 0;
    left: 0;
}
#attention li:first-of-type::before{
    content: "※1";
}
#attention li:nth-of-type(2)::before{
    content: "※2";
}
#attention li:nth-of-type(3)::before{
    content: "※3";
}
@media screen and (max-width : 750px){
    #attention{
        padding: 40px 0;
    }
    #attention > li{
        font-size: 22px;
    }
}

/**Mac,iPad Safari**/
@media only screen and (min-device-width:768px){
    _::-webkit-full-page-media, _:future, :root .bl_fee > dt,
    _::-webkit-full-page-media, _:future, :root .bl_fee > dd,
    _::-webkit-full-page-media, _:future, :root .bl_programTable_head > tr > th{
        padding-top: 0;
    }
}


/*=============================================================================

プログラム・料金

=============================================================================*/
/*=======================================================
MV
=======================================================*/
#program .bl_lower_mv{
	background-image: url("../images/program/mv_bg.jpg");
}
#program .bl_lower_mv_ttl::after{
	width: 100px;
	height: 35px;
	background: url("../images/program/mv_ttl__en.svg") center / 85px 20px no-repeat;
}
@media screen and (max-width : 750px){
	#program .bl_lower_mv{
		background-image: url("../images/program/mv_bg_sp.jpg");
	}
	#program .bl_lower_mv_ttl::after{
		width: 138px;
		height: 44px;
		background-size: 123px 29px;
	}
}

/*=======================================================
course
=======================================================*/
#program #course .ly_cont_inner{
    padding: 35px 0 40px;
}
/*各プログラムページへのリンクボタン*/
.bl_courseBtnList{
    margin-bottom: 35px;
}
.bl_courseBtn{
    width: 328px;
    height: 166px;
    border: 2px solid #e60012;
}
.bl_courseBtn > a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.bl_courseBtn > a::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 14px 14px;
    border-color: transparent transparent #e60012 transparent;
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 10;
}
.bl_courseBtn .bl_card_ttl{
    width: 100%;
    height: 40px;
    background: rgba(255,255,255,0.9);
    padding-top: 3px;
    color: #e60012;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
}
/*説明文*/
#program #course .bl_info_txt{
    text-align: center;
    line-height: 1.5;
}
@media screen and (max-width : 750px){
    #program #course .ly_cont_inner{
        padding: 60px 0 80px;
    }
/*各プログラムページへのリンクボタン*/
    .bl_courseBtnList{
        margin-bottom: 35px;
    }
    .bl_courseBtn{
        height: 235px;
        border-width: 4px;
        overflow: hidden;
    }
    .bl_courseBtn + .bl_courseBtn{
        margin-top: 15px;
    }
    .bl_courseBtn > a::before{
        border-width: 0 0 28px 28px;
        right: 12px;
        bottom: 12px;
    }
    .bl_courseBtn .bl_card_imgWrapper{
        height: 100%;
    }
    .bl_courseBtn .bl_card_ttl{
        height: 64px;
        padding-top: 0;
        font-size: 30px;
    }
    .bl_courseBtn.vocal .bl_card_imgWrapper{
        position: absolute;
        top: -60px;
    }
/*説明文*/
    #program #course .bl_info_txt{
        text-align: left;
    }
}

/*=======================================================
price
=======================================================*/
#program #price{
    background: #fffde9;
}
/*料金詳細*/
#program .bl_fee{
    width: 310px;
}
#program .bl_fee > dt{
    width: 150px;
}
#program .bl_course {
    display: flex;
    align-items: center;
    font-size: 20px;
}
#program .bl_course .el_plus{
    margin: 0 25px 0 35px;
    color: #e60012;
    font-size: 40px;
    font-weight: bold;
}
@media screen and (max-width : 750px){
/*料金詳細*/
    #program .bl_fee {
        flex-direction: column;
        height: auto;
    }
    #program .bl_fee > dt {
        width: 100%;
        height: 68px;
        font-size: 34px;
    }
	#program .bl_fee > dd{
        height: 88px;
        width: 100%;
	}
    #program .bl_course{
		font-size: 30px;
		font-weight: bold;
        text-align: center;
        flex-direction: column;
    }
    #program .bl_course .el_plus{
        display: block;
        margin: 20px 0;
        font-size: 58px;
    }
    #program .bl_course {
        font-size: 34px;
    }
}


/*=============================================================================

共通 - 下層

=============================================================================*/
/*=======================================================
intro
=======================================================*/
.lower #intro{
    height: 404px;
	margin-top: -31px;
    background: url("../images/program/lower_intro_bg.png")  top center / 2000px 404px no-repeat;
}
.lower #intro .ly_cont_inner{
    padding-top: 70px;
}
/*コース概要*/
.bl_programInfo .bl_media_imgWrapper{
    width: 462px;
    height: 286px;
}
.bl_programInfo .bl_media_body{
	width: 500px;
    line-height: 1.6;
}
.bl_programInfo .bl_media_body .el_att{
    font-size: 14px;
}
@media screen and (max-width : 750px){
    .lower #intro{
        height: auto;
		margin-top: -40px;
        background-image: url("../images/program/lower_intro_bg_sp.png");
        background-size: 750px 569px;
        background-color: #fffce6;
    }
    .lower #intro .ly_cont_inner{
        padding: 85px 0 90px;
    }
/*コース概要*/
    .bl_programInfo .bl_media_imgWrapper{
        height: 415px;
        margin-bottom: 120px;
    }
    .bl_programInfo .bl_media_body .el_att{
        font-size: 22px;
    }
}

/*=======================================================
info
=======================================================*/
.lower #info .ly_cont_inner{
    padding: 50px 0 60px;
}
/*学べるジャンル、スキル*/
.bl_learning{
    display: flex;
    flex-wrap: wrap;
}
.bl_learning_item{
    width: 470px;
}
.bl_learning_item + .bl_learning_item{
    margin-left: 80px;
}
.bl_learning_item > dt{
    height: 45px;
    margin-bottom: 15px;
    padding-top: 3px;
    background: #475763;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bl_learning_item > dd{
    line-height: 1.6;
}
.bl_learning_item > dd > * + *{
    margin-top: 5px;
}
.bl_learning_item .bl_bulletList.square > li{
    padding-left: 1.5em;
}
.bl_learning_item .bl_bulletList.square > li::before{
    color: #ed6c00;
}
.bl_learning_item .bl_bulletList.square > li + li{
    margin-top: 4px;
}
/*レッスン内容の1例*/
.bl_lessonSample{
    margin-top: 40px;
    padding: 25px 25px 0;
    border: 1px solid #e60012;
}
.bl_lessonSample .bl_media_imgWrapper{
    width: 438px;
    height: 271px;
}
.bl_lessonSample .bl_media_body{
    width: 476px;
}
.bl_lessonSample .bl_media_ttl{
    height: 47px;
    margin-bottom: 25px;
    padding-top: 3px;
    background: #ffede5;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bl_lessonSample .bl_sample > dt{
    margin-bottom: 10px;
    color: #e60012;
    font-size: 18px;
    font-weight: bold;
}
.bl_lessonSample .bl_sample_txt{
    line-height: 1.6;
}
@media screen and (max-width : 750px){
    .lower #info .ly_cont_inner{
        padding: 70px 0 95px;
    }
/*学べるジャンル、スキル*/
    .bl_learning{
        display: block;
    }
    .bl_learning_item{
        width: 670px;
    }
    .bl_learning_item + .bl_learning_item{
        margin: 50px 0 0;
    }
    .bl_learning_item > dt{
        height: 75px;
        margin-bottom: 30px;
        padding-top: 0;
        font-size: 34px;
    }
/*レッスン内容の1例*/
    .bl_lessonSample{
        margin-top: 50px;
        padding: 140px 40px 15px;
    }
    .bl_lessonSample .bl_media_imgWrapper{
        width: 588px;
        height: 364px;
		margin-bottom: 30px;
    }
    .bl_lessonSample .bl_media_body{
        width: 100%;
    }
    .bl_lessonSample .bl_media_ttl{
        width: 588px;
        height: 70px;
        margin-bottom: 0;
        padding-top: 0;
        font-size: 34px;
        position: absolute;
        top: 45px;
        left: 40px;
    }
    .bl_lessonSample .bl_sample > dt{
        margin-bottom: 15px;
        font-size: 32px;
    }
}

/*=======================================================
price
=======================================================*/
.lower #price{
	background: #fff7f1;
}
.lower .bl_fee{
    width: 512px;
}
.lower .bl_fee2{
    width: 310px;
}
.lower .bl_fee > dt{
    width: 155px;
}
/* .lower .bl_fee > dd{
    padding-left: 60px;
} */
@media screen and (max-width : 750px){
    .lower .bl_fee{
        width: 100%;
        margin-bottom: 30px;
        flex-direction: column;
        height: auto;
    }
    .lower .bl_fee > dt {
        width: 100%;
        height: 68px;
        font-size: 34px;
    }
    .lower .bl_fee > dd {
        height: 88px;
    }
}

/*=======================================================
recommend
=======================================================*/
.lower #recommend .ly_cont_inner{
    padding: 55px 0 60px;
}
.lower #recommend .el_mainTtl{
    width: 242px;
    height: 25px;
    margin: 0 auto 30px;
}
/*おすすめリスト*/
.bl_cardUnit_recommend{
    margin-bottom: 45px;
}
.bl_card_recommend{
    width: 240px;
}
.bl_card_recommend .bl_card_imgWrapper{
	height: 148px;
    margin-bottom: 15px;
}
.bl_card_recommend .bl_card_ttl{
    width: 100%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    position: absolute;
    top: 125px;
    left: 0;
}
.bl_card_recommend .bl_card_txt{
    font-size: 16px;
    line-height: 1.65;
}
/*ボタンリスト*/
.bl_relatedLink_list{
    display: flex;
    justify-content: space-between;
}
.bl_relatedLink_list .el_btn{
    width: 320px;
    height: 52px;
    padding-right: 0;
    font-size: 20px;
}
.bl_relatedLink_list .el_whiteBlueBtn {
	border-color: #475763;
	color: #475763;
	background: url(../images/common/blueBtn_icon_arrow.svg) center right 13px / 38px 6px no-repeat,#fff;
}
.bl_relatedLink_list .el_whiteBlueBtn.vocal {
	padding-right: 20px;
}
@media screen and (max-width : 750px){
    .lower #recommend .ly_cont_inner{
        padding: 85px 0 100px;
    }
    .lower #recommend .el_mainTtl{
        width: 391px;
        height: 40px;
        margin-bottom: 45px;
    }
/*おすすめリスト*/
    .bl_cardUnit_recommend{
        margin-bottom: 75px;
    }
    .bl_card_recommend .bl_card_imgWrapper{
		height: 414px;
        margin-bottom: 30px;
    }
    .bl_card_recommend .bl_card_ttl{
        font-size: 38px;
        top: 360px;
    }
    .bl_card_recommend .bl_card_txt{
        font-size: 28px;
        line-height: 1.6;
    }
/*ボタンリスト*/
    .bl_relatedLink_list{
        display: block;
    }
    .bl_relatedLink_list > * + *{
        margin: 35px 0 0;
    }
    .bl_relatedLink_list .el_btn{
        width: 670px!important;
        height: 100px;
        font-size: 36px;
    }
	.bl_relatedLink_list .el_whiteBlueBtn {
		background: url(../images/common/blueBtn_icon_arrow_sp.svg) center right 20px / 50px 12px no-repeat,#fff;
	}
	.bl_relatedLink_list .el_whiteBlueBtn.vocal {
		padding-right: 0;
	}
}

/**Mac,iPad Safari**/
@media only screen and (min-device-width:768px){
    _::-webkit-full-page-media, _:future, :root #info .bl_learning_item > dt,
    _::-webkit-full-page-media, _:future, :root .bl_lessonSample .bl_media_ttl,
    _::-webkit-full-page-media, _:future, :root .bl_card_recommend .bl_card_ttl{
        padding-top: 0;
    }
    _::-webkit-full-page-media, _:future, :root .bl_card_recommend .bl_card_ttl{
        top: 122px;
    }
}


/*=============================================================================

ヴォーカル

=============================================================================*/
/*MV*/
#vocal .bl_lower_mv{
	background-image: url("../images/program/vocal_mv_bg.jpg");
}
#vocal .bl_lower_mv_ttl::after{
	width: 74px;
	height: 31px;
	background: url("../images/program/vocal_mv_ttl__en.svg") center / 60px 16px no-repeat;
}
/*intro*/
#vocal .bl_programInfo .bl_media_txt{
	margin-bottom: 15px;
}
@media screen and (max-width : 750px){
	#vocal .bl_lower_mv{
		background-image: url("../images/program/vocal_mv_bg_sp.jpg");
	}
	#vocal .bl_lower_mv_ttl::after{
		width: 78px;
		height: 36px;
		background-size: 78px 21px;
	}
}


/*=============================================================================

ダンス

=============================================================================*/
/*MV*/
#dance .bl_lower_mv{
	background-image: url("../images/program/dance_mv_bg.jpg");
}
#dance .bl_lower_mv_ttl::after{
	width: 73px;
	height: 31px;
	background: url("../images/program/dance_mv_ttl__en.svg") center / 66px 16px no-repeat;
}
@media screen and (max-width : 750px){
	#dance .bl_lower_mv{
		background-image: url("../images/program/dance_mv_bg_sp.jpg");
	}
	#dance .bl_lower_mv_ttl::after{
		width: 88px;
		height: 35px;
		background-size: 86px 20px;
	}
}


/*=============================================================================

芸能

=============================================================================*/
/*MV*/
#talent .bl_lower_mv{
	background-image: url("../images/program/talent_mv_bg.jpg");
}
#talent .bl_lower_mv_ttl::after{
	width: 73px;
	height: 31px;
	background: url("../images/program/talent_mv_ttl__en.svg") center / 62px 16px no-repeat;
}
/*レッスン内容の1例*/
#talent .bl_lessonSample .bl_media_imgWrapper{
	height: 299px;
}
@media screen and (max-width : 750px){
	#talent .bl_lower_mv{
		background-image: url("../images/program/talent_mv_bg_sp.jpg");
	}
	#talent .bl_lower_mv_ttl::after{
		width: 88px;
		height: 36px;
		background-size: 80px 21px;
	}
/*レッスン内容の1例*/
	#talent .bl_lessonSample .bl_media_imgWrapper{
		height: 401px;
	}
}