@charset "UTF-8";


	@media all and (max-width: 1024px) {
		.main_contents_box{width:95% !important;height:auto;margin:0px auto;padding:0px 0px;}
	}

/*======*/
div.system{max-width:1200px;width:100%;height:auto;margin:0px auto;padding-top:20px;}
div.cource{max-width:1200px;width:100%;height:auto;margin-bottom:20px;padding:15px 0px;background:rgb(255,255,255,0.05);position:relative;}
div.cource_in{width: calc(100% - 30px);height:auto;margin:0px auto;padding:20px 0px 0px 0px;}
div.cource p{width: calc(100% - 20px);height:auto;margin:0px auto;padding:0px 0px 10px 0px;}
ul.cource{width:100%;height:auto;margin:0px auto;padding:3px 0px 0px 0px;display: -ms-flexbox;display: flex;-ms-flex-pack: center;justify-content:center;-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
ul.cource li{width:29%;height:auto;margin:9px 2%;padding-bottom:3px;font-size:20px;border-bottom:1px solid #293b42;
display: -ms-flexbox;display: flex;-ms-flex-pack: center;justify-content:center;-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;align-items: flex-start;align-content: flex-start;}
ul.cource li .l{display:inline-block;width:42.5%;height:auto;margin:0px auto;padding:2px 0px 0px 5.5%;text-align:left;color:#efefef;background: url(../img/footer/ya.png) no-repeat;background-size:11px 9px;background-position:0% 9px;}
ul.cource li .r{display:inline-block;width:51%;height:auto;margin:0px auto;padding:2px 1% 0px 0px;text-align:right;letter-spacing:1px;color:#caa359;}
ul.cource li .c{display:inline-block;width:100%;height:auto;margin:0px auto;padding-top:3px;color:#231803;border-top:1px solid #460002;color:#caa359;font-size:12px;}
ul.cource li .l .ja_c{font-size:12px;vertical-align:0px;}
ul.cource li .r .ja_c{font-size:12px;vertical-align:0px;}
ul.cource li small{font-size:13px;}
div.system ul.cource:nth-of-type(1) , div.system ul.cource:nth-of-type(2){padding-bottom:20px;}
.recom{animation:BLINK 0.8s ease-in-out infinite alternate;display:inline-block;padding-right:1px;}
@keyframes BLINK {0%{opacity:1.0;}100% {opacity:0;}}
	@media all and (min-width: 1025px) {
		ul.cource.c li{width:33%;}
	}
	@media all and (max-width: 1024px) {
		div.system{width:95%;}
		ul.cource li{width:91%;font-size:18px;margin:6px 2%;}
		ul.cource li .l .ja_c{font-size:11px;}
		ul.cource li .r .ja_c{font-size:11px;}
		ul.cource li .l{width:39.5%;}
		ul.cource li .r{width:54%;}
		ul.cource.c li .l{width:52.5%;}
		ul.cource.c li .r{width:40%;}
	}

/*======*/
ul.play{width:100%;height:auto;margin:0px auto;padding:3px 0px 0px 0px;display: -ms-flexbox;display: flex;-ms-flex-pack: center;justify-content:center;-webkit-flex-wrap: wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
ul.play li{width:29%;height:auto;margin:0px 2%;padding-bottom:5px;font-size:14px;color:#ffffff;}
ul.play span{display:inline-block;width:auto;height:auto;margin:0px auto;padding:0px 16px 0px 16px;
background:url(../img/icon/heart_yellow.png),url(../img/icon/heart_yellow.png);background-repeat:no-repeat,no-repeat;background-size:11px 9px,11px 9px;background-position:0% 50%,100% 50%;}
	@media all and (max-width: 1024px) {
		ul.play li{width:100%;margin:0px auto;font-size:13px;padding:0px;}
	}

/*======*/
div.etc_charge{max-width:1200px;width:100%;height:auto;margin-bottom:20px;padding:15px 0px;background:rgb(255,255,255,0.05);position:relative;}
div.etc_charge_in{width: calc(100% - 30px);height:auto;margin:0px auto;padding:20px 0px;}
div.etc_charge dl{width:98%;height:auto;margin:0px auto;padding:10px 0px 5px 0px;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;}
div.etc_charge dl:nth-of-type(1),div.etc_charge dl:nth-of-type(2),div.etc_charge dl:nth-of-type(3){padding:10px 0px 10px 0px;}
div.etc_charge dl div{width:33%;height:auto;margin:0px auto;padding:5px 0px;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;}
div.etc_charge dl div dt{width:60%;height:auto;margin:0px 0% 0px 0px;padding:8px 0px;line-height:100%;background: #caa359;color:#efefef;position:relative;}
div.etc_charge dl div dd{width:33%;height:auto;margin:0px 0% 0px 0px;padding:8px 0px;line-height:100%;background:#ffffff;color:#222222;border-bottom: 1px solid #ffffff;border-top: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
div.etc_charge p{width:90%;margin:0px auto;padding:10px 0px 0px 0px;}
	@media all and (min-width: 1025px) {
		div.etc_charge dl div dt:after{content:" ";display:inline-block;position:absolute;top:calc(50% - 5.5px);right:-4px;width: 0;height: 0;border-style: solid;border-width: 5.5px 0 5.5px 5px;border-color: transparent transparent transparent #caa359;}
		div.etc_charge dl div dt{border-bottom: 1px solid #caa359;border-top: 1px solid #caa359;}
	}
	@media all and (max-width: 1024px) {
		div.etc_charge dl div{width:91%;}
		div.etc_charge dl div dt{width:100%;}
		div.etc_charge dl div dd{width:100%;border-top:0px;border-bottom: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
		div.etc_charge dl div dt:after{content:"";display:inline-block;position:absolute;bottom:-4px;left:calc(50% - 8px);width: 0;height: 0;border-style: solid;border-width: 5px 7px 0 7px;border-color: #caa359 transparent transparent transparent;}
	}


/*======*/
div.system h2.en{width:100%;height:auto;margin:0px auto;padding:0px 0px 10px 0px;font-size:21px;letter-spacing:0.5px;line-height:100%;color:#4e2509;}
div.system h2.en span{display:inline-block;width:auto;height:auto;margin:0px auto;padding:0px 16px 0px 16px;
background:url(../img/icon/heart_yellow.png),url(../img/icon/heart_yellow.png);background-repeat:no-repeat,no-repeat;background-size:11px 9px,11px 9px;background-position:0% 50%,100% 50%;}
div.cource h3, div.etc_charge h3{font-weight:normal;width:100%;height:auto;margin:0px auto;padding-bottom:10px;}
div.cource h3 span , div.etc_charge h3 span{display:inline-block;width:auto;height:auto;margin:0px auto;padding:3px 40px 3px 40px;clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);background:#caa359;font-size:13px;line-height:150%;}
	@media all and (max-width: 1024px) {
		div.cource h3 span , div.etc_charge h3 span{font-size:12px;}
	}

/*======*/
.rule_box{width:100%;height:auto;margin:0px auto;padding-top:25px;}
div.rule {width:100%;height:auto;margin:0px auto;padding-top:10px;}
div.rule ul{width:100%;height:auto;margin:10px auto;padding:0px;text-align:left;}
div.rule ul li{width:49%;height:auto;margin:5px auto;padding:0px;display:inline-block;text-align:left;}
div.rule h4{font-weight:normal;width:100%;height:auto;margin:0px auto;padding-bottom:0px;}
div.rule h4 span{display:inline-block;width:auto;height:auto;margin:0px auto;padding:3px 40px 3px 40px;clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);background:#caa359;color:#ffffff;font-size:13px;}
div.rule p{font-weight:normal;width:100%;height:auto;margin:0px auto;text-align:left;}
div.rule p:nth-of-type(1){padding-bottom:15px;text-align:center;}
div.rule p:nth-of-type(2){padding-top:15px;}
div.rule p:nth-of-type(3){padding-top:15px;}
div.rule p:nth-of-type(4){padding-top:15px;}
	@media all and (max-width: 1024px) {
		div.rule ul li{width:100%;}
		div.rule ul li{margin:2px auto;}
	}