@charset "utf-8";

/* COURSE
---------------------------------------- */
.flow {margin-top: 35px;}
.flow dl {width: 255px; height: 70px; background: #fff3c3; border: #fcc800 2px solid; border-right: none; padding: 8px 0 8px 5px; margin-right: 20px; position: relative; float: left;}
.flow dl:before ,.flow dl:after {content: ""; position: absolute; top: -2px; right: -15px; width: 0; height: 0; border-top: transparent 35px solid; border-bottom: transparent 35px solid; border-left: #fcc800 15px solid;}
.flow dl:after {right: -13px; border-left: #fff3c3 15px solid;}
/*
.flow dl dt{float: left; margin-right: 10px;}
.flow dl dd{float: left; font-size: 85%; width:180px; padding-top: 5px;}
*/
.flow dl dt{float: left; margin-right: 4px;}
.flow dl dd{float: left; font-size: 85%; width:194px; padding-top: 5px;}
.flow ul {float: left;}
.flow ul li a {color: #f08630; text-align: center; display: block; padding: 10px; border: #f3a26c 3px solid; background: url(../../common/img/bgi_lattice.png) repeat 0 0;}
.flow ul li a:hover {text-decoration: none; opacity: .7;}
	@media screen and (max-width: 768px) {
		.flow {text-align: center;}
		.flow dl {display: inline-block; float: none;}
		.flow dl dd {text-align: left;}
		.flow ul {display: inline-block; float: none; margin-right: 20px; vertical-align: top; width: 255px;}
		.flow ul li a {height: 70px; padding-top: 20px;}
	}
	@media screen and (max-width: 480px) {
		.flow dl {border-right: #fcc800 2px solid; height: auto; margin: 0 0 10px 0; padding: 10px 20px; width: 100%;}
		.flow dl:before {display: none;}
		.flow dl:after {border-left: transparent 20px solid; border-right: transparent 20px solid; border-top: #fcc800 10px solid; border-bottom: 0; top: auto; bottom: -10px; right: auto; left: 50%; margin-left: -20px;}
		.flow ul {margin-right: 0; width: 100%;}
	}


.curriculum {width: 700px; margin: 0 auto 0;}
.curriculum dl {width: 100%; border: #fcc800 2px solid; padding: 15px 30px; position: relative;}
/*
.curriculum dl:before ,.curriculum dl:after {content: ""; position: absolute; left: 0px; bottom: -45px; width: 0; height: 0; border-top: #fcc800 45px solid; border-right: transparent 300px solid; border-left: transparent 300px solid;}
.curriculum dl:after {bottom: -43px; border-top: transparent 45px solid;}
*/
.curriculum .stepDown { background:url(../img/img_step_down.gif) no-repeat center bottom; height:30px; margin-bottom: 10px; }
.curriculum dt {color: #f08630; font-size: 128%; font-weight: bold; margin-bottom: 10px;}
.curriculum dt,
.curriculum dd { float:left; width:360px; }
.curriculum .cu_photo { float:right; }
.curriculum dl.day1 {background: #fff9e5;}
.curriculum dl.day2 {background: #feeeb2;}
.curriculum dl.day3 {background: #fde37f;}
.curriculum ul li:before {content: "・";}
/*
.curriculum dl.day1:after {border-top: #fff9e5 45px solid;}
.curriculum dl.day2:after {border-top: #feeeb2 45px solid;}
.curriculum dl.day3:after {border-top: #fde37f 45px solid;}
*/
	@media screen and (max-width: 480px) {
		.curriculum {width: 100%;}
.curriculum dt,
.curriculum dd { float:none; width:auto; }
.curriculum .cu_photo { float:none; width:100%; margin-top:20px; clear:both; }
/*
		.curriculum dl:before {display: none;}
		.curriculum dl.day1:after,
		.curriculum dl.day2:after,
		.curriculum dl.day3:after {border-left: transparent 40px solid; border-right: transparent 40px solid; border-top: #fcc800 20px solid; border-bottom: 0; top: auto; bottom: -20px; right: auto; left: 50%; margin-left: -40px;}
*/
	}
.pc_br {display: block;}
	@media screen and (max-width: 480px) {
	.pc_br {display: none;}
	}