@charset "UTF-8";

@media screen and (min-width:768px) {
section.feature {
	width: 942px!important;
	display: flex;
	background: #ffa90d;
	border-radius: 20px;
	margin: 30px 0 60px;
}
section.feature h1 {
	color: #333333;
	border: none;
	text-align: left;
	line-height: 1.8;
}
span {
	font-size: 16px;
	color: #FFFFFF;
}
.feature__title {
	font-size: 30px;
	text-align: left;
	width: 40%;
	padding: 30px 10px 30px 70px;
}
.feature__text {
	font-size: 14px;
	width: 60%;
	padding: 80px 0px 40px 10px;
}
.box_yoko {
	border: #666 solid 1px;
	height: 230px;
	width: 100%;
	border-radius: 20px;
	margin: 20px 0;
	padding: 20px 0;
	display: flex;
	line-height: 1.4em;
}
.box_yoko_title {
	position: relative;
	width: 33%;
	height: 100%;
	border-right: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_yoko h2 {
	position: absolute;
	left: 150px;
	top: 35px;
	color: #333333;
	border: none;
	font-size: 20px;
	line-height: 1.4em;
}
.box_yoko_title img {
	position: absolute;
	left: 50px;
	top: 40px;
	height: 90px;
}
.box_yoko_text {
	padding: 25px 0px 25px 40px;
}
.box_yoko_text p {
	line-height: 1.8em;
}
.box_yoko>.image {
	text-align: center;
	padding: 30px 0;
	width: 180px;
}
.box_yoko>.image img {
	width: 70%;
}
.wrapbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box_tate {
	border: #666 solid 1px;
	height: 680px;
	width: 48%;
	border-radius: 20px;
	margin: 20px 0;
	padding: 0px 30px;
	line-height: 1.4em;
}
.box_tate_title {
	position: relative;
	width: 100%;
	height: 23%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_tate h2 {
	position: absolute;
	left: 120px;
	top: 35px;
	color: #333333;
	border: none;
	font-size: 20px;
	line-height: 1.4em;
}
.box_tate_title img {
	position: absolute;
	left: 20px;
	top: 30px;
	height: 90px;
}
.box_tate_text {
	padding: 30px 25px 10px;
}
.box_tate_text p {
	line-height: 1.8em;
}
.box_tate>.image {
	text-align: center;
	width: 70%;
	margin: 0 auto;
}
.box_tate>.image img {
	width: 100%;
}
	.box_2 .image>img {
	text-align: center;
	width: 250px;
}
	
.box_3 .image>img {
	text-align: center;
	width: 180px;
}
.box_4 {
	height: 320px;
}
.box_4.box_yoko h2 {
	position: absolute;
	left: 150px;
	top: 80px;
}
.box_4>.box_yoko_title>img {
	position: absolute;
	left: 50px;
	top: 90px;
	height: 90px;
}
.box_4 .image>img {
	text-align: center;
	padding: 50px 0;
	width: 150px;
}
.box_5 .image>img {
	text-align: center;
	padding: 50px 0;
	width: 150px;
}
.box_6 .image>img {
	text-align: center;
	padding-top: 10px;
	width: 85%;
}
.box_7 .image>img {
	text-align: center;
	padding: 20px 50px;
	width: 250px;
}
.box_8 {
	height: 550px;
}
.box_8>.box_tate_title {
	position: relative;
	width: 100%;
	height: 28%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_8 .image>img {
	text-align: center;
	padding: 20px 0 0;
	width: 200px;
}
.box_9 {
	height: 550px;
}
.box_9>.box_tate_title {
	position: relative;
	width: 100%;
	height: 28%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_9 .image>img {
	text-align: center;
	padding: 20px 0 0;
	width: 250px;
}
.box_10 {
	height: 330px;
}
.box_10.box_yoko h2 {
	position: absolute;
	left: 135px;
	top: 80px;
}
.box_10>.box_yoko_title>img {
	position: absolute;
	left: 35px;
	top: 90px;
	height: 90px;
}
.box_10 .image>img {
	text-align: center;
	padding: 50px 0 0;
	width: 150px;
}
.box_11 {
	height: 330px;
}
.box_11.box_yoko h2 {
	position: absolute;
	left: 135px;
	top: 100px;
}
.box_11>.box_yoko_title>img {
	position: absolute;
	left: 50px;
	top: 90px;
	height: 90px;
}
.box_11 .image>img {
	text-align: center;
	width: 150px;
}
.box_12 {
	height: 560px;
}
.box_12>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
		.box_12.box_tate h2 {
	position: absolute;
	left: 150px;
	top: 35px;
}
.box_12 .image>img {
	text-align: center;
	padding: 50px 0 0;
	width: 200px;
}
.box_13 {
	height: 560px;
}
.box_13>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
	.box_13.box_tate h2 {
	position: absolute;
	left: 150px;
	top: 35px;
}
.box_13 .image>img {
	text-align: center;
	padding: 0;
	width: 160px;
}
.box_14 {
	height: 310px;
}
.box_14.box_yoko h2 {
	position: absolute;
	left: 140px;
	top: 50px;
}
.box_14>.box_yoko_title>img {
	position: absolute;
	left: 35px;
	top: 75px;
	height: 90px;
}
.box_14 .image>img {
	text-align: center;
	padding: 30px 0;
	width: 140px;
}
	.box_15 {
	height: 590px;
}
.box_15>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
	.box_15 .box_tate_title>img{
			position: absolute;
	left: 15px;
	top: 30px;
	}
	
		.box_15 .kutu>img{
			position: absolute;
	left: 280px;
	top: 40px;
	}

	.box_15 .image>img {
	text-align: center;
	padding: 0;
	width: 260px;

}
		.box_16 {
	height: 590px;
}
.box_16>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
		.box_16 .box_tate_title>img{
			position: absolute;
	left: 15px;
	top: 30px;
	}
	
.box_16 .image>img {
	text-align: center;
	padding: 30px 0;
	width: 100px;
}
.box_17 {
	height: 310px;
}
.box_17.box_yoko h2 {
	position: absolute;
	left: 140px;
	top: 70px;
}
.box_17>.box_yoko_title>img {
	position: absolute;
	left: 35px;
	top: 75px;
	height: 90px;
}
.box_17 .image>img {
	text-align: center;
	padding: 35px 10px 50px;
	width: 190px;
	margin-left: 20px;
}
.box_18 {
	height: 560px;
}
.box_18>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_18 .image>img {
	text-align: center;
	padding: 30px 0 0;
	width: 170px;
}
.box_19 {
	height: 560px;
}
.box_19>.box_tate_title {
	position: relative;
	width: 100%;
	height: 27%;
	border-bottom: #999 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}
.box_19 .image>img {
	text-align: center;
	padding: 0;
	width: 180px;
}
.box_20 {
	height: 200px;
}
.box_20.box_yoko h2 {
	position: absolute;
	left: 165px;
	top: 10px;
}
.box_20>.box_yoko_title>img {
	position: absolute;
	left: 45px;
	top: 20px;
	height: 90px;
}
.feature-footer {
    margin-top: 100px;
}
}

@media screen and (max-width:767px) {
.br-sp {
	display: none;
}
section.feature {
	display: block;
	background: #ffa90d;
	border-radius: 20px;
	margin: 20px 0 60px;
	padding: 20px;
}
section.feature h1 {
	color: #333333;
	border: none;
	text-align: center;
	line-height: 1.8;
	font-size: 20px;
	padding: 20px 0;
}
span {
	font-size: 16px;
	color: #FFFFFF;
}
.feature__title {
	font-size: 30px;
}
.feature__text {
	font-size: 14px;
}
.box_yoko {
	border: #333333 solid 1px;
	width: 100%;
	border-radius: 20px;
	margin: 20px 0;
	padding: 0 10px;
	display: block;
	line-height: 1.4em;
}
.box_yoko_title {
	position: relative;
	width: 100%;
	border-bottom: #000000 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 70px 0;
}
.box_yoko h2 {
	position: absolute;
	left: 120px;
	top: 35px;
	color: #333333;
	border: none;
	font-size: 1em;
	line-height: 1.4em;
}
.box_yoko_title img {
	position: absolute;
	left: 20px;
	top: 30px;
	height: 60%;
}
.box_yoko_text {
	padding: 30px 15px 10px;
}
.box_yoko_text p {
	line-height: 1.8em;
}
.box_yoko>.image {
	text-align: center;
	margin: 0 auto;
	width: 50%;
}
.box_yoko>.image img {
	width: 100%;
}
.wrapbox {
	display: block;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box_tate {
	border: #333333 solid 1px;
	width: 100%;
	border-radius: 20px;
	margin: 20px 0;
	padding: 0 10px;
	line-height: 1.4em;
}
.box_tate_title {
	position: relative;
	width: 100%;
	border-bottom: #000000 dotted 2px;
	display: flex;
	justify-content: space-around;
	padding: 70px 0;
}
.box_tate h2 {
	position: absolute;
	left: 100px;
	top: 35px;
	color: #333333;
	border: none;
	font-size: 1em;
	line-height: 1.4em;
}
.box_tate_title img {
	position: absolute;
	left: 20px;
	top: 30px;
	height: 60%;
}
.box_tate_text {
	padding: 30px 15px 10px;
}
.box_tate_text p {
	line-height: 1.8em;
}
.box_tate>.image {
	text-align: center;
	width: 50%;
	margin: 0 auto;
}
.box_tate>.image img {
	width: 100%;
}
	
	
	.box_14.box_yoko h2 {
	position: absolute;
	left: 120px;
	top: 10px;
}
	
	
	.box_15 .box_tate_title>img{
			position: absolute;
	left: 15px;
	top: 30px;
	}

	
		.box_15 .kutu>img{
			position: absolute;
	left: 210px;
	top: 80px;
			width: 60px;
			height: 60px;
	}
	
		.box_3.box_tate h2 {
	position: absolute;
	left: 110px;
	top: 25px;
}
			.box_7.box_yoko h2 {
	position: absolute;
	left: 120px;
	top: 25px;
}
		.box_12.box_tate h2 {
	position: absolute;
	left: 120px;
	top: 35px;
}
	.box_13.box_tate h2 {
	position: absolute;
	left: 120px;
	top: 35px;
}
	.box_14.box_yoko h2 {
	position: absolute;
	left: 130px;
	top: 10px;
}
	
	
	.box_15 .image{
		width: 230px;
	}
		.box_15 .image>img {
	text-align: center;
	padding: 0;
	width: 400px;

}
	.box_16 .image>img {
	text-align: center;
	padding: 10px 0;
	width: 80px;
}
	.box_16.box_tate h2 {
	position: absolute;
	left: 110px;
	top: 35px;
}
	.box_20.box_yoko h2 {
	position: absolute;
	left: 140px;
	top: 10px;
}
	
}

/*	ーーーーーーーーーーコースーーーーーーーーーー*/

@media screen and (min-width:768px) {
.course {
	display: block;
	margin: 0 auto;
	box-sizing: border-box;
}
.course_title {
	border-top: solid 1px;
	border-bottom: solid 1px;
	width: 70%;
	margin: 150px auto 40px;
	padding: 20px 0;
	text-align: center;
}
.course_title h1 {
	color: #ffa90d;
	border: none;
	font-size: 30px;
}
.course_content {
	background: #ffa90d;
	border-radius: 20px;
	width: 70%;
	margin: 0 auto;
	padding: 5px 20px;
}
.course_content h2 {
	border: none;
	color: #333;
	text-align: center;
}
.arrow {
	text-align: center;
	margin: 0 auto;
}
.arrow img {
	width: 55px;
}
.course_lesson {
	width: 100%;
	margin: 50px auto;
	text-align: center;
}
.course_lesson>p {
	color: #ffa90d;
	font-size: 18px;
}
.course_lesson img {
	width: 40%;
}
.course1_2, .course3_4_5 {
	width: 100%;
	margin: 10px auto;
	text-align: center;
}
.course1_2 img, .course3_4_5 img {
	width: 32%;
	padding: 0 10px;
}
.option {
	text-align: center;
	padding: 20px 0 0;
}
.option>.orenge {
	color: #ffa90d;
}
}

@media screen and (max-width:767px) {
.course {
	display: block;
	margin: 0 auto;
	box-sizing: border-box;
}
.course_title {
	border-top: solid 1px;
	border-bottom: solid 1px;
	margin: 100px auto 20px;
	padding: 10px 0;
	text-align: center;
}
.course_title h1 {
	color: #ffa90d;
	border: none;
	font-size: 20px;
}
.course_content {
	background: #ffa90d;
	border-radius: 20px;
	margin: 0 auto;
	padding: 5px 20px;
}
.course_content h2 {
	border: none;
	color: #333;
	text-align: center;
	font-size: 20px;
}
.arrow {
	text-align: center;
	margin: 0 auto;
}
.arrow img {
	width: 55px;
}
.course_lesson {
	width: 100%;
	margin: 50px auto;
	text-align: center;
}
.course_lesson>p {
	color: #ffa90d;
	font-size: 18px;
}
.option {
	text-align: center;
	padding: 20px 0 20px;
}
.option>.orenge {
	color: #ffa90d;
}
.option p {
	font-size: 14px;
	text-align: left;
}
}
