@charset "utf-8";
body{background: #F2EEE7;}

/*---------------------#fv-----------------------*/
#fv{background: url(../images/course/fv.jpg?v=1) no-repeat center center; background-size: cover; padding: 236px 0 167px; position: relative;}
#fv img.logo{position: absolute; bottom: 0px;font-family: 'Montserrat-Medium';}
#fv h2{color: #fff;text-align: center; font-size: 16px;line-height: 170%; font-family: 'Noto-Sans-JP-Regular';}
#fv h2 span{font-family: 'Noto-Sans-JP-Medium';}
#fv h2 span.title{font-size: 24px;font-family: 'Montserrat-Medium';}
#fv h2 span.big{font-size: 36px; letter-spacing: 0.1em;line-height: 174%;}

/*---------------------#menu-----------------------*/
#menu{padding: 110px 0 0;}
#menu .title_box{text-align: center; padding: 0 0 46px;}
#menu .title_box p{line-height: 175%; font-family: 'Noto-Sans-JP-Regular'; padding: 16px 0 0;}
#menu .flex_box{position: relative;width: 100%}
#menu .flex{display:flex; padding: 0 0 40px;}
#menu .flex .box{margin: 0 15px; width: 380px; height: auto; opacity: 0.5; transition: all 1s ease;}
#menu .flex .box.slick-active{opacity: 1;}
#menu .flex .box img{width: 100%; height:auto;}
#menu .flex .box h4{font-size: 20px; padding: 17px 0 0;}
#menu .flex .box p{line-height: 175%; padding: 11px 0 0;font-family: 'Noto-Sans-JP-Regular';}

#menu .flex_box button.slide-arrow{border-radius: 100px; width: 60px; height: 60px; background: #FF7800; display: block; position: absolute; top: 25%; z-index: 1;}
#menu .flex_box button.slide-arrow:before{border-left:2px solid #fff; border-top:2px solid #fff; width: 15px; height: 15px; content: ""; display: block; -webkit-transform: translate(-50%) rotateZ(-45deg);transform: translate(-50%) rotateZ(-45deg); top: 39%;position: absolute;}
#menu .flex_box button.slide-arrow:after{border:1px solid #fff; width: 15px; height: 1px; content: ""; display: block; position: absolute; -webkit-transform: translate(-50%) ;transform: translate(-50%); left: 50%; top: 50%;}
#menu .flex_box button.slide-arrow.prev-arrow:before{left: 51%;}
#menu .flex_box button.slide-arrow.next-arrow:before{right: 25%;-webkit-transform: translate(-50%) rotateZ(135deg);transform: translate(-50%) rotateZ(135deg); }

#menu .flex_box button.slide-arrow.prev-arrow{left: calc(50% - 630px);}
#menu .flex_box button.slide-arrow.next-arrow{right: calc(50% - 630px);}
#menu .flex_box ul.slick-dots{bottom: 0px;}
#menu .flex_box ul.slick-dots li{width: 8px; height: auto;}
#menu .flex_box ul.slick-dots li button{background: #fff; width: 8px; height: auto; border-radius: 100%;}
#menu .flex_box ul.slick-dots li.slick-active button{background: #FF7800;}
#menu .flex_box .slick-dots li button:before{display: none;}
/*---------------------#course-----------------------*/
#course{padding: 108px 0 94px;}
#course .title_box{text-align: left;}
#course .title_box .h3_center{text-align: left;}
#course .title_box .h3_center:before {left: 0%;}
#course .title_box .h3_center .en {margin: 0 auto 28px;}
#course .title_box p{padding: 20px 0 0; line-height: 175%; width: 574px;font-family: 'Noto-Sans-JP-Regular';}
#course .list{background: #fff; border-radius: 15px; padding: 80px 84px 76px; margin: 43px 0 0;}
#course .list .list_box:not(:last-child){padding: 0 0 60px;}
#course .list .list_box h4{background: #FF7800; border-radius: 10px; color: #fff; padding: 5px 27px; font-size: 28px; line-height: 180%; display: flex; align-items: center;}
#course .list .list_box h4 span.bg_white{background: #fff; border-radius: 100px; font-size: 18px; display: inline-block; line-height: 145%; padding: 0 16px; margin: 0 0 0 20px;}
#course .list .list_box p.text{line-height: 175%; padding: 21px 0 0;font-family: 'Noto-Sans-JP-Regular';}
#course .list .list_box ul{padding: 31px 0 0;}
#course .list .list_box ul li{display: flex; align-items: center; justify-content: space-between;}
#course .list .list_box ul li:not(:last-child){padding: 0 0 25px;}
#course .list .list_box ul li h5{font-size: 20px; position: relative;display: flex; align-items: center; padding-right: 20px; justify-content: space-between;}
#course .list .list_box ul li h5:before{content: ""; width: 8px; height: 8px; display: block; border-radius: 100%; background:#FF7800; margin-right: 11px;}
#course .list .list_box ul li span.icn{display: block; height: 3px; background: url(../images/course/icn_1.png) repeat-x center center; background-size: 8px;}
#course .list .list_box ul li p{font-size: 24px; display: flex; align-items: flex-end; margin: 0 0 0 15px;;}
#course .list .list_box ul li p span.mini{font-size: 14px; display: inline-block;font-family: 'Noto-Sans-JP-Regular';}
#course .list .list_box ul li p span.tax{padding: 0 0 5px 8px;}
#course .list .list_box ul li p span.din{font-size: 38px;padding: 0 2px 0 9px;}
#course .list .list_box ul li p span.mini.ball{border: 1px solid #000; border-radius: 100px; display: inline-block; padding: 2px 13px; margin: 0px 0 9px;}

#course .list #beginner ul li span.icn{width: 50.5%;}
#course .list #beginner ul li.long span.icn{width: 48.5%;}

#course .list #regular ul li span.icn{width: 48.5%;}

#course .list #expert ul li span.icn{width: 46.5%;}
#course .list #expert ul li.long span.icn{width: 44.5%;}

#course .list #pair ul li span.icn,
#course .list #twice ul li span.icn{width: 50.5%;}

#course .list #coupon ul li span.icn{width: 46.5%;}

#course .list #visitor ul li span.icn{width: 50.5%;}
#course .list #visitor ul li.long span.icn{width: 48.5%;}


#course .btn_orange{width: 228px; height: auto; margin: 60px auto 0; color: #fff; position: relative; text-align: center; font-size: 14px; letter-spacing: 0.07em; display: block; background:#FF7800; padding: 19px 0; border-radius: 100px;}
#course .btn_orange:after{content: ""; display: block; border-bottom: 2px solid #fff; border-right: 2px solid #fff; width: 8px; height: 8px; transform: translateY(-50%) rotate(-45deg); position: absolute; right: 20px; top: 50%;　-webkit-transform:　translateY(-50%) rotate(-45deg);}



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	h3.h3_center{font-size: 26px;}
	.h3_center .en {font-size: 14px; margin: 0 auto 6px;}
	.title_box p{padding: 16px 0 0; font-size: 14px; width: 90%; margin: 0 auto;}
	/*---------------------#fv-----------------------*/
	#fv{background: url(../images/course/fv.jpg) no-repeat center center; background-size: cover; padding: 150px 0 92px; }
	#fv img.logo{width: 80%;height: auto;}
	#fv h2{ font-size: 14px;}
	#fv h2 span.title{font-size: 18px;}
	#fv h2 span.big{font-size: 32px;}
	
	/*---------------------#menu-----------------------*/
	#menu{padding:50px 0 0;}
	#menu .title_box{padding: 0 0 30px;}
	#menu .flex{display:flex; padding: 0 0 30px;}
	#menu .flex .box{margin: 0 15px; width: 280px; }
	#menu .flex .box h4{font-size: 18px; padding: 12px 0 0;}
	#menu .flex .box p{padding: 10px 0 0; font-size: 14px}
	
	#menu .flex_box button.slide-arrow{width: 40px; height: 40px;top: 20%s;}
	#menu .flex_box button.slide-arrow:before{width: 10px; height: 10px;top: 39%;}
	#menu .flex_box button.slide-arrow:after{width: 10px; height: 1px; top: 49%;}
	#menu .flex_box button.slide-arrow.prev-arrow:after{left: 54%;} 
	#menu .flex_box button.slide-arrow.next-arrow:after{left: 48%;}
	
	#menu .flex_box button.slide-arrow.prev-arrow{left: calc(50% - 170px);}
	#menu .flex_box button.slide-arrow.next-arrow{right: calc(50% - 170px);}
	#menu .flex_box ul.slick-dots li{width: 4px; height: auto;margin: 0 7px;}
	#menu .flex_box ul.slick-dots li button{width: 4px;}
	
	/*---------------------#course-----------------------*/
	#course{padding: 60px 0 47px;}
	#course .title_box .h3_center .en {margin: 0 auto 18px;}
	#course .title_box p{padding: 14px 0 0; width: auto;}
	#course .list{padding: 40px 20px 38px; margin: 21px 0 0;}
	#course .list .list_box:not(:last-child){padding: 0 0 30px;}
	#course .list .list_box h4{padding: 5px 13px; font-size: 20px; }
	#course .list .list_box h4 span.bg_white{font-size: 14px; padding: 0 8px; margin: 1px 0 0px 10px;}
	#course .list .list_box p.text{ padding: 16px 0 0; font-size: 14px;}
	#course .list .list_box ul{padding: 25px 0 0;}
	#course .list .list_box ul li {display: flex; align-items: flex-start; border-bottom: 1px solid #F2EDE4;padding: 0 0 12px; flex-direction: column; flex-wrap: wrap;}
	#course .list .list_box ul li:not(:last-child){margin: 0 0 30px;padding: 0 0 15px;}
	#course .list .list_box ul li h5{font-size: 18px; padding-right: 10px; }
	#course .list .list_box ul li h5:before{width: 8px; height: 8px; margin-right: 5px;}
	#course .list .list_box ul li span.icn{height: 3px; background-size: 4px; margin: 8px 0 5px; display: none;}
	#course .list .list_box ul li p{font-size: 20px; margin: 15px 0 0 auto;}
	#course .list .list_box ul li p span.mini{font-size: 11px; }
	#course .list .list_box ul li p span.tax{padding:0 0 4px 5px;}
	#course .list .list_box ul li p span.din{font-size: 32px;padding: 0 2px 0 6px;}
	#course .list .list_box ul li p span.mini.ball{ padding: 2px 10px; margin: 0px 0 6px;}
	
	#course .list #beginner ul li span.icn{width: calc(100% - 221px);}
	#course .list #beginner ul li.long span.icn{width: calc(100% - 239px);}	
	#course .list #regular ul li span.icn{width: calc(100% - 239px);}	
	#course .list #expert ul li span.icn{width: calc(100% - 256px);}
	#course .list #expert ul li.long span.icn{width: calc(100% - 274px);}	
	#course .list #pair ul li span.icn{width: calc(100% - 185px);}
	#course .list #visitor ul li span.icn{width: calc(100% - 237px);}
	#course .list #visitor ul li.long span.icn{width: calc(100% - 237px);}
	
	
	#course .btn_orange{width: 228px; margin: 60px auto 0; font-size: 14px; padding: 19px 0;}
	#course .btn_orange:after{width: 8px; height: 8px; right: 20px; top: 50%;}

}