/* -------------------------------------
Browser：IE11 over
-------------------------------------
01: 共通
02: テンプレ
03: top
04: 中ページ
-------------------------------------*/

/** ================================================================================
		01.共通
================================================================================ **/
a[href^="tel"]{
	margin: 0 8px;
	color: #cc0066;
	color: #6595ff;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.0;
}a[href^="tel"]:before{
	display: inline-block;
	margin: 0 5px 0 0;
	width: 24px;
	height: 24px;
	background: url(../images/ico_tel.svg) no-repeat center center;
	background: url(../images/ico_tel2.svg) no-repeat center center;
	background-size: contain;
	content: "";
	vertical-align: top;
	line-height: 1.0;
}

@media screen and (max-width: 768px) {
	a[href^="tel"]{
	}
	a[href^="tel"]:before{
	}
}

/** -------------------------------------
タイトル
-------------------------------------**/
.titZ{
	margin: 0 0 10px;
	padding: 20px 0;
	border-top: 1px dashed #fff;
	border-bottom: 1px dashed #fff;
	background: rgba(0,93,229,0.6);
	box-shadow: 0 5px 0 rgba(0,93,229,0.6),0 -5px 0 rgba(0,93,229,0.6);
	color: #ffffff;
	text-align: center;
	font-size: 28px;
}
.titZ h2{
	margin: 0 auto;
	width: 980px;
}

.titA{
	margin: 10px auto;
	color: #6595ff;
	text-align: center;
	letter-spacing: -5px;
	font-size: 40px;
	font-family: "kaiso",sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.titA + p{
	margin: 0 0 50px;
	text-align: center;
	font-size: 18px;
}
.titA.pink{
	color: #cc0066;
	text-shadow:
		#fff 5px 0 1px, #fff -5px 0 1px,#fff 10px 0 1px, #fff -10px 0 1px,#fff 8px 0 1px, #fff -8px 0 1px;
}

.titB{
	margin: 10px auto 30px;
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	line-height: 1.8;
}

.titC{
	position: relative;
	padding: 10px 10px 10px 40px;
	min-width: 40%;
	background:#6595ff;
	color: #fff;
	font-size: 24px;
}
.titC:before {
	position: absolute;
	top: 100%;
	left: 0;
	border: none;
	border-right: solid 20px #477adb;
	border-bottom: solid 15px transparent;
	content: '';
}

.titD{
	margin: 0 0 0;
	padding: 0 0 10px;
	background: url(../images/b_dot.svg) repeat-x left bottom;
	color: #6595ff;
	text-align: center;
	font-size: 28px;
}


@media screen and (max-width: 768px) {

	.titZ{
		margin: 15px auto 20px;
		padding: 15px 0;
		font-size: 20px;
	}
	.titZ h2{
		margin: 0 auto;
		width: 95%;
	}

	.titA{
		font-size: 28px;
	}
	.titA + p{
		margin: 0 0 25px;
		font-size: 16px;
	}

	.titB{
		font-size: 18px;
		line-height: 1.5;
	}
	.titC{
		padding: 10px 10px 10px 20px;
		min-width: 90%;
		font-size: 20px;
	}

	.titD{
		font-size: 20px;
	}
}

/* -------------------------------------
ボタン
-------------------------------------*/
.btnA,
.btnD{
	position: relative;
	display: block;
	margin: 30px auto;
	padding: 10px;
	width: 350px;
	border:1px dashed #fff;
	border-radius: 10px;
	background: #6595ff;
	box-shadow: 4px 0 0 #659afd , -4px 0 0 #659afd,4px 4px 0 #659afd,-4px 4px 0 #659afd,0 4px 0 #659afd,0 -4px 0 #659afd,4px -4px 0 #659afd,4px -4px 0 #659afd,-4px -4px 0 #659afd;
	color: #fff;
	text-align: center;
	font-size: 1.0em;
	font-size: 18px;
	cursor: pointer;
}.btnA:hover,
.btnD:hover{
	background: #cc0066;
	box-shadow: 4px 0 0 #cc0066 , -4px 0 0 #cc0066,4px 4px 0 #cc0066,-4px 4px 0 #cc0066,0 4px 0 #cc0066,0 -4px 0 #cc0066,4px -4px 0 #cc0066,4px -4px 0 #cc0066,-4px -4px 0 #cc0066;
}
.btnD{
	width: 100%;
}

.btnB{
	position: relative;
	display: block;
	margin: 30px auto;
	padding: 10px;
	width: 350px;
	border:1px dashed #fff;
	border-radius: 10px;
	background: #cc0066;
	box-shadow: 4px 0 0 #cc0066 , -4px 0 0 #cc0066,4px 4px 0 #cc0066,-4px 4px 0 #cc0066,0 4px 0 #cc0066,0 -4px 0 #cc0066,4px -4px 0 #cc0066,4px -4px 0 #cc0066,-4px -4px 0 #cc0066;
	color: #fff;
	text-align: center;
	font-size: 1.0em;
	font-size: 18px;
	cursor: pointer;
}.btnB:hover{
	background: #659afd;
	box-shadow: 4px 0 0 #659afd , -4px 0 0 #659afd,4px 4px 0 #659afd,-4px 4px 0 #659afd,0 4px 0 #659afd,0 -4px 0 #659afd,4px -4px 0 #659afd,4px -4px 0 #659afd,-4px -4px 0 #659afd;
}

.btnC{
	position: relative;
	display: block;
	margin: 30px auto;
	padding: 10px;
	min-width: 350px;
	border:1px dashed #fff;
	border-radius: 10px;
	background: #565656;
	box-shadow: 4px 0 0 #565656 , -4px 0 0 #565656,4px 4px 0 #565656,-4px 4px 0 #565656,0 4px 0 #565656,0 -4px 0 #565656,4px -4px 0 #565656,4px -4px 0 #565656,-4px -4px 0 #565656;
	color: #fff;
	text-align: center;
	font-size: 1.0em;
	font-size: 18px;
	cursor: pointer;
}.btnC:hover{
	background: #cc0066;
	box-shadow: 4px 0 0 #cc0066 , -4px 0 0 #cc0066,4px 4px 0 #cc0066,-4px 4px 0 #cc0066,0 4px 0 #cc0066,0 -4px 0 #cc0066,4px -4px 0 #cc0066,4px -4px 0 #cc0066,-4px -4px 0 #cc0066;
}

.box2C .btnA,
.box2C .btnB,
.box2C .btnC,
.box2C .btnD,
.box3C .btnA,
.box3C .btnB,
.box3C .btnC,
.box3C .btnD{
	color: #fff;
}

@media screen and (max-width: 768px) {
	.btnA,
	.btnB,
	.btnC{
		min-width: auto;
		width: 90%;
		font-size: 16px;
	}
}


/** -------------------------------------
カテゴリとタグ
-------------------------------------**/
em{
	display: inline-block;
	padding: 3px 5px;
	background: #659afd;
	color: #fff;
	font-size: 12px;
}

em+em{
	margin-left: 5px;
}

time{
	display: inline-block;
	padding: 3px 5px;
	font-size: 12px;
}

/** ================================================================================
		02.テンプレ
================================================================================ **/

header{
	position: relative;
	margin: 0 auto;
	width: 980px;
}
#takatsuki header,
#takatsuki footer nav,
#takatsuki footer nav + ul{
	display: none;
}
#takatsuki .inq-btn .osaka{
	display: none;
}
header h1{
	padding: 20px 0 10px;
	font-size: 12px;
}
@media screen and (max-width: 768px) {
header{
	width: 100%;
}
header h1{
	display: none;
}
	header nav{
		display: none;
		background: url(../images/bg.jpg) repeat left top;
		background: #fff;
	}
}

.siteinfo{
	display: flex;
	margin: 0 auto;
	width: 980px;

	justify-content: space-between;
	align-items: center;
}
.siteinfo .logo{
}
.logo .btn{
	display: inline-block;
	background: #659afd;
	color: #fff;
	padding: 3px 10px;
	border-radius: 5px;
	font-size: 14px;
	margin: 10px 0 0 10px;
	border: 2px solid #659afd;
}.logo .btn:before{
	content: "\e5df";
	font-size: 13px;
	font-family: 'Material Icons';
	display: inline-block;
	background: #fff;
	color: #659afd;
	border-radius: 50px;
	width: 14px;
	height: 14px;
	text-align: center;
	line-height: 14px;
	vertical-align: middle;
	margin: 0 5px;
}.logo .btn:hover{
	background: #fff;
	color: #659afd;
}.logo .btn:hover:before{
	background: #659afd;
	color: #fff;
}

.siteinfo .deco{
	width: 70px;
}.siteinfo .deco img{
	width: 100%;
}
.siteinfo .info{
}
.info dl{
	display: flex;

	justify-content: flex-start;
	align-items: center;
}
.info dl dt{
	margin: 0 5px 0 0;
	font-weight: bold;
	font-size: 14px;
}
.info dl dd{
	display: flex;
	padding: 3px;
	width: 400px;
	border: 1px dotted #636363;
	border-radius: 8px;
	vertical-align: middle;

	justify-content: space-between;
	align-items: center;
}
.info a[href^="tel"]{
	color: #cc0066;
}.info a[href^="tel"]:before{
	background: url(../images/ico_tel.svg) no-repeat center center;
}
.info p{
	margin: 5px 0 3px;
	text-align: right;
	font-size: 14px;
}
.info a[href*="contact"]{
	display: inline-block;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid #636363;
	border-radius: 8px;
	background: #636363;
	color: #fff;
	font-size: 14px;
}.info a[href*="contact"]:hover{
	border-color: #cc0066;
	background: #cc0066;
}
.info .sub{
	text-align: right;
	font-size: 14px;
}
.info .sub a:before{
	display: inline-block;
	margin: 0 5px 0 15px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #659afd;
	color: #fff;
	content: "\e5df";
	text-align: center;
	font-size: 13px;
	font-family: 'Material Icons';
	line-height: 15px;
}.info .sub a:hover{
	color: #659afd;
}
.info .abs{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	display: block;
	padding: 8px 8px 5px;
	width: 9.5em;
	border: 1px dashed #fff;
	border-top:none;
	border-radius: 0 0 5px 5px;
	background:  #659afd;
	box-shadow: 3px 0 0 #659afd , -3px 0 0 #659afd,3px 3px 0 #659afd,-3px 3px 0 #659afd,0 3px 0 #659afd;
	color: #ffe300;
	text-align: center;
	font-size: 15px;
}.info .abs:hover{
	background: #cc0066;
	box-shadow: 3px 0 0 #cc0066 , -3px 0 0 #cc0066,3px 3px 0 #cc0066,-3px 3px 0 #cc0066,0 3px 0 #cc0066;
}

@media screen and (max-width: 768px) {
	header .siteinfo{
		display: block;
		margin: 0 auto;
		width: 98%;
	}
	header .siteinfo .logo{
		margin: 0 auto;
		padding: 55px 0 0;
		width: 100%;
		text-align: center;
	}
	header .siteinfo .logo img{
		width: 60%;
	}
	header .logo .t_R{
		text-align: center;
	}
	header .siteinfo .deco{
		display: none;
	}
	header .siteinfo .info{
		width: 40%;
	}
	header .info dl{
		display: block;

		justify-content: flex-start;
		align-items: center;
	}
	header .info dl dt{
		display: none;
	}
	header .info dl dd{
		display: block;
		width: 100%;
		border: none;
	}
	header .info a[href^="tel"]{
		position: absolute;
		top: 0;
		left: 5px;
		display: block;
		overflow: hidden;
		width: 50px;
		height: 40px;
		border: 1px dashed #fff;
		border-top: none;
		border-radius: 0 0 5px 5px;
		background: #cc0066;
		box-shadow: 3px 0 0 #cc0066 , -3px 0 0 #cc0066,3px 3px 0 #cc0066,-3px 3px 0 #cc0066,0 3px 0 #cc0066;
	}header .info a[href^="tel"]:before{
		width: 50px;
		height: 40px;
		background: url(../images/ico_tel3.svg) no-repeat center center;
		background-size: 24px auto;
	}
	header .info p{
		display: none;
	}
	header .info a[href*="contact"]{
		display: none;
	}
	header .info .sub{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 150;
		width: 100%;
	}header .info .sub a{
		display: block;
		padding: 15px;
		width: 100%;
		border-bottom: 1px dashed #636363;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
	}header .info .sub a:before{
		display: none;
	}
	header .info .abs{
		left: 75px;
		padding: 0;
		width: 100px;
		height: 40px;
		font-size: 13px;
		line-height: 40px;
	}

}


.main ul{
	display: flex;
	margin: 10px 0;
	background: url(../images/g_dot.svg) repeat-y right top;

	justify-content: center;
}
.main ul li{
	background: url(../images/g_dot.svg) repeat-y left top;

	flex: 1;
}
.main ul li a{
	display: block;
	padding: 10px 0;
	width: 100%;
	background: none;
	background-position: center bottom 3px;
	text-align: center;
	text-shadow: 1px 1px 0 #fff;
	font-weight: bold;
}
.main ul li a:hover{
	background: url(../images/menu_bg.png) no-repeat center bottom 3px;
}


@media screen and (max-width: 768px) {
	 #menu{
		 position: absolute;
		 top: -14px;
		right: 0;
		 z-index: 200;
		margin: 13px 5px;
		padding: 0;
		 width: 80px;
		 height: 40px;
		border: 1px dashed #fff;
		border-radius: 5px;
		background: #636363;
		box-shadow: 3px 0 0 #636363 , -3px 0 0 #636363,3px 3px 0 #636363,-3px 3px 0 #636363,0 3px 0 #636363,0 -3px 0 #636363,3px -3px 0 #636363,3px -3px 0 #636363,-3px -3px 0 #636363;
		text-align: center;
		 line-height: 40px;
		 cursor: pointer;
	}#menu:before{
		color: #fff;
		content: "▼ MENU";
		font-size: 12px;
	}
	.on #menu:before{
		content: "X CLOSE";
	}
	.main{
		position: absolute;
		top: 100px;
		left: 0;
		z-index: 150;
		width: 100%;
	}
	.main ul{
		display: block;
		margin: 10px 0 0;
		border-top: 1px dashed #636363;
		background: none;
	}
	.main ul li{
		border-bottom: 1px dashed #636363;
		background: none;

		flex: 1;
	}
	.main ul li a{
		padding: 15px 0;
	}.main ul li a:hover{
		background: none;
		color: #659afd;
	}
}

aside{
	padding: 20px 0;
	background: #fff;
}
aside .siteinfo .deco{
	width: 130px;
}
aside .info dl{
	display: block;
}
aside .info dl dd{
	margin: 10px 0;
}
aside .info p{
	text-align: left;
}

footer{
	padding: 30px 0 1px;
	background: #659afd;
	color: #fff;
}
footer nav{
	display: flex;
	margin: 0 auto;
	width: 980px;

	justify-content: space-between;
}
footer nav .fb{
	margin: 0 15px 0 0;
	width: 315px;
	background: #fff;
}
footer nav .inst{
	margin: 0 15px 0 0;
	width: 315px;
}
footer nav + ul{
    width:980px;
	margin:30px auto;
	text-align:center;
}
footer nav + ul li{
    display:inline-block;
	font-size: 14px;
	border-right:1px solid #fff;
	padding-right:10px;
}
.copyright{
	margin: 30px 0;
	text-align: center;
	font-size: 12px;
}

@media screen and (max-width: 768px) {
	aside{
	padding: 20px 5%;
	background: #fff;
	}
	aside .siteinfo{
		display: block;
		width: 100%;
	}
	aside .siteinfo .logo{
		margin: 0 auto 15px;
		width: 60%;
	}
	aside .siteinfo .deco{
		display: none;
	}
	aside .info dt{
		text-align: center;
	}
	aside .info dd{
		display: block;
		padding: 10px;
		width: 100%;
		text-align: center;
	}
	aside .info a[href^="tel"]{
		display: block;
		margin:  0 auto 10px;
	}
	footer nav{
		display: block;
		width: 100%;
	}
	footer nav .fb{
		margin: 0 auto 15px;
		width: 90%;
	}
	footer nav .inst{
		margin: 0 auto;
		width: 90%;
	}
	footer nav + ul{
		display: block;
		margin: 15px auto;
		width: 90%;
	}
	footer nav + ul li{
		margin: 0 0 5px 10px;
	}
}

main{
	display: block;
	margin: 0 auto 50px;
	padding: 1px 0;
	width: 980px;
}

@media screen and (max-width: 768px) {
	main{
		margin: 0 auto 30px;
		width: 90%;
	}
}

/** ================================================================================
		03.top & 中ページ
================================================================================ **/

/* -------------------------------------
HERO
-------------------------------------*/
#hero{
	position: relative;
	margin: 30px auto;
	max-width: 700px;
}
#hero .swiper-container {
	z-index: 1;
	overflow: visible;
	padding: 0 0 50px;
	width: 100%;
	height: 100%;
}
.swiper-ar-next,
.swiper-ar-prev{
	cursor: pointer;
}
.swiper-ar-next:before,
.swiper-ar-prev:before{
	z-index: 100;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #6595ff;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-family: 'Material Icons';
	line-height: 30px;
}
.swiper-ar-next:before{
	position: absolute;
	top: 40%;
	right:0px;
	content: "\e5cc";
}.swiper-ar-prev:before{
	position: absolute;
	top: 40%;
	left:0px;
	content: "\e5cb";
}
#hero .swiper-slide{
	position: relative;
	border-radius: 20px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

@media screen and (max-width: 768px) {
	#hero{
		margin: 15px auto;
		max-width: 95%;
	}
	#hero .swiper-container {
		padding: 0 0 40px;
	}
}

/* -------------------------------------
5つの特徴
-------------------------------------*/
.feature{
	margin:  50px auto 80px;
	padding: 30px 80px;
	border: 5px solid  #6595ff;
	border-radius: 15px;
	background: #ffffde url(../images/speccy3.png) no-repeat left 15px bottom 15px;
	background-size: 200px auto;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}
.feature h3{
	margin: 0 0 15px;
	padding: 0 0 10px;
	background: url(../images/b_dot.svg) repeat-x left bottom;
}
.feature h3 span{
	color: #cc0066;
}
.feature h3 span img{
	margin: 0 0 0 5px;
	vertical-align: bottom;
}

.feature ol{
	padding: 0 30px;
}
.feature ol li{
	position: relative;
	overflow: hidden;
	margin: 0 0 30px;
	padding: 0 0 0 80px;
	min-height: 80px;
}

.feature ol li:nth-child(1):before{
	background:url(../images/t1.png)no-repeat left top / contain;
}.feature ol li:nth-child(2):before{
	background:url(../images/t2.png)no-repeat left top / contain;
}.feature ol li:nth-child(3):before{
	background:url(../images/t3.png)no-repeat left top / contain;
}.feature ol li:nth-child(4):before{
	background:url(../images/t4.png)no-repeat left top / contain;
}.feature ol li:nth-child(5):before{
	background:url(../images/t5.png)no-repeat left top / contain;
}
.feature ol li:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 63px;
	height: 67px;
	background-size: contain;
	content: "";
}
.feature ol li h4{
	padding: 10px 0;
	width: 500px;
	color: #6595ff;
	font-weight: bold;
	font-size: 24px;
}
.feature ol li p{
	width: 500px;
}
.feature ol li figure{
	float: right;
	overflow: hidden;
	width: 156px;
	height: 156px;
	border-radius: 50%;
}

@media screen and (max-width: 768px) {
	.feature{
		margin:  30px auto 50px;
		padding: 15px 15px 130px;
		border: 3px solid  #6595ff;
		background: #ffffde url(../images/speccy3.png) no-repeat left 5px bottom 5px;
		background-size: 200px auto;
	}
	.feature h3 span img{
		margin: 0 0 0 5px;
		width: 13%;
		vertical-align: bottom;
	}
	.feature ol{
		padding: 0;
	}
	.feature ol li{
		padding: 0 0 0 50px;
	}
	.feature ol li:before{
		width: 40px;
		height: 50px;
	}
	.feature ol li h4{
		padding: 10px 0;
		width: auto;
		font-size: 18px;
	}
	.feature ol li p{
		width: auto;
	}
	.feature ol li figure{
		margin: 0 0 5px 10px;
		width: 100px;
		height: 100px;
	}
}

/* -------------------------------------
コース紹介一覧
-------------------------------------*/
.top-course-list{
}
.top-course-list li{
	margin: 0 0 40px;
}
.top-course-list figure{
	margin: 0 0 10px;
}
.top-course-list li a{
	position: relative;
}
.top-course-list li a figure{
	position: relative;
	overflow: hidden;
}
.top-course-list li a figure:before{
	position: absolute;
	top: 130px;
	left: 0;
	z-index: 10;
	display: block;
	padding: 15px 0;
	width: 100%;
	color: #fff;
	content:attr(data-name)"";
	text-align: center;
	font-weight: bold;
	font-size: 22px;
}

.top-course-list li a:hover figure:after{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 310px;
	content: "";
	opacity: 0.8;
}
.top-course-list li a figure[data-cl="黄緑"]:before,
.top-course-list li a:hover figure[data-cl="黄緑"]:after{
	background: rgba(150,191,0,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="ピンク"]:before,
.top-course-list li a:hover figure[data-cl="ピンク"]:after{
	background: rgba(229,92,190,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="オレンジ"]:before,
.top-course-list li a:hover figure[data-cl="オレンジ"]:after{
	background: rgba(229,92,0,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="青"]:before,
.top-course-list li a:hover figure[data-cl="青"]:after{
	background: rgba(0,93,229,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="紫"]:before,
.top-course-list li a:hover figure[data-cl="紫"]:after{
	background: rgba(135,0,191,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="水色"]:before,
.top-course-list li a:hover figure[data-cl="水色"]:after{
	background: rgba(46,190,229,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="緑"]:before,
.top-course-list li a:hover figure[data-cl="緑"]:after{
	background: rgba(0,159,58,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a figure[data-cl="黄色"]:before,
.top-course-list li a:hover figure[data-cl="黄色"]:after{
	background: rgba(239,178,41,0.7);
	-webkit-transition: .5s;
	transition: .5s;
}
.top-course-list li a:hover figure:before{
	background: none;
}
@media screen and (max-width: 768px) {
	.top-course-list li a figure{
		margin: 0 auto 10px;
		text-align: center;
	}
	.top-course-list li a figure:before{
		top: 20vw;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 470px;
		font-size: 20px;
	}
	.top-course-list li a:hover figure:after{
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 470px;
		max-height: 313px;
		width: 100%;
		height: 58vw;
	}
}

/* -------------------------------------
コース紹介一覧　教室
-------------------------------------*/
.course-list{
}
.course-list li{
	margin: 0 0 40px;
}
.course-list figure{
	position: relative;
	margin: 0 auto 10px;
	height: 310px;
}
.course-list li figure img{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
.course-list li figure img + img{
	z-index: 1;
}
.course-list li figure:hover img+img{
	z-index: 5;
}


@media screen and (max-width: 768px) {
	.course-list figure{
		height: 55vw;
		max-height: 310px;
	}
}

/* -------------------------------------
時間割
-------------------------------------*/
.timetable{
	position: relative;
	padding:  80px 30px 30px;
	border: 5px solid #6595ff;
	background: #fff;
}
.timetable .titC{
	position: absolute;
	top: 10px;
	left: -20px;
}

.timetable table{
	margin: 0 0 15px;
	width: 100%;
	border: 2px solid #565656;
	font-size: 12px;
}
.timetable table td,
.timetable table th{
	padding: 8px 3px;
	border: 1px dotted #565656;
	vertical-align: middle;
	text-align: center;
}.timetable table td{
	padding: 0;
	font-size: 14px;
}
.timetable table .line th,
.timetable table .line td{
	border-bottom: 2px solid #565656;
}

.timetable .color{
	display: none;
}
.timetable .color div{
	padding: 5px;
	font-size: 14px;
}

.timetable .green{
	background: rgba(150,191,0,1.0);
	color: #fff;
}
.timetable .dgreen{
	background: #009f3a;
	color: #fff;
}
.timetable .pink{
	background: rgba(229,92,190,1.0);
	color: #fff;
}
.timetable .orange{
	background: rgba(229,92,0,1.0);
	color: #fff;
}
.timetable .blue{
	background: rgba(0,93,229,1.0);
	color: #fff;
}
.timetable .purple{
	background: rgba(135,0,191,1.0);
	color: #fff;
}
.timetable .cyaan{
	background: rgba(46,190,229,1.0);
	color: #fff;
}
.timetable .yellow{
	background: #efb229;
	color: #fff;
}

@media screen and (max-width: 768px) {
	.timetable{
			padding: 80px 15px 15px;
	}
	.timetable table td{
		text-indent: -9999px;
	}
	.timetable table tr th:last-child{
		display: none;
	}
	.timetable .color{
		display: block;
	}

}

/* -------------------------------------
生徒・保護者の声
-------------------------------------*/
.voice-wrap{
	margin: 50px auto;
	padding: 34px 0;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.5);
	background-image: url(../images/dot_top.svg),url(../images/dot_bottom.svg);
	background-position: left top,left bottom;
	background-repeat: no-repeat,no-repeat;
}
.top-voice-list{
	padding: 1px 20px;
	background-image: url(../images/dot_middle.svg);
	background-position: left top;
	background-repeat: repeat-y;
}
.swiper-container.voice-list{
	padding: 0 20px 30px;
}
.voice-list li{
	background: #fffedc;
}
.voice-list i{
	display: block;
	padding: 5px;
	background: #464646;
	color: #fff;
	font-size: 14px;
}
.voice-list img{
	width: 100%;
}
.voice-list h4{
	margin: 15px;
	color: #6595ff;
	font-weight: bold;
	font-size: 18px;
}
.voice-list p{
	margin: 15px;
}
.voice-list time{
	display: block;
	padding: 5px;
	text-align: right;
	font-size: 10px;
}
.voice-list .category{
	margin: 0;
}

@media screen and (max-width: 768px) {
	.voice-wrap{
		border: 1px dashed #6595ff;
		background-image: none;
	}
	.top-voice-list{
		margin: 0 auto;
		padding: 1px 10px;
		max-width: 470px;
		background-image: none;
	}
}

/* -------------------------------------
生徒・保護者の声　詳細
-------------------------------------*/
.voice-detail li{
	display: flex;
	margin: 30px auto;
	background: #fff;
}
.voice-detail li .left{
	width: 310px;
}.voice-detail li .right{
	flex: 1;
}

.voice-detail i{
	display: block;
	padding: 5px;
	background: #464646;
	color: #fff;
	font-size: 14px;
}
.voice-detail img{
	width: 100%;
}
.voice-detail h4{
	margin: 15px;
	color: #6595ff;
	font-weight: bold;
	font-size: 18px;
}
.voice-detail p{
	margin: 15px;
}
.voice-detail time{
	display: block;
	padding: 5px;
	text-align: right;
}
.voice-detail em{
	padding: 5px;
	font-size: 14px;
}
.voice-detail .category{
	margin: 0;
}

@media screen and (max-width: 768px) {
	.voice-detail li{
		display: block;
		padding: 0 0 1px;
		max-width: 470px;
		width: 100%;
	}
	.voice-detail li .left{
		width: 100%;
	}.voice-detail li .right{
		width: 100%;
	}
	.voice-detail time{
		font-size: 12px;
	}
	.voice-detail h4{
		font-size: 16px;
	}
}

/* -------------------------------------
新着・ブログ　一覧
-------------------------------------*/
.news-list .titA,
.news-list strong{
	color:  #6595ff;
}
.news-list em{
	background: #6595ff;
}

.blog-list .titA,
.blog-list strong{
	color:  #cc0066;
}
.blog-list em{
	background: #cc0066;
}
.blog-list li hr{
	background: url(../images/p_dot.svg) repeat-x left top;
}

.blog-list li,
.news-list li{
	width: 470px;
}


@media screen and (max-width: 768px) {
	.blog-list li,
	.news-list li{
		width:100%;
	}
}


/* -------------------------------------
新着・ブログ　詳細
-------------------------------------*/

.blog-detail{
}

.blog-detail .titD{
	background: url(../images/p_dot.svg) repeat-x left bottom;
	color:  #cc0066;
}
.blog-detail em{
	background: #cc0066;
}


/* -------------------------------------
教室紹介
-------------------------------------*/
.school{
	position: relative;
	margin: 0 0 50px;
	padding: 80px 30px 30px;
	border: 5px solid #6595ff;
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
}
.school .titC{
	position: absolute;
	top: 20px;
	left: -20px;
}
.school .titC a{
	display: inline-block;
	margin: 0 20px;
	border-top: 1px dotted #fff;
	border-bottom: 1px dotted #fff;
	vertical-align: middle;
	font-size: 14px;
}.school .titC a:before{
	content: "\e5df";
	font-family: 'Material Icons';
}.school .titC a:hover{
	border-color: #ffe300;
	color: #ffe300;
}
.school .box2C,
.school .box2C > *{
	margin: 0;
}
.school .box2C > *,
.school .box2C:after{
	width: 48%;
}
.school .address p{
	margin: 10px 0;
}
.school .address figure{
	float: right;
	margin: 0 0 15px;
}
.school .address hr{
	clear: both;
}
.school .coment{
	overflow: hidden;
}
.school .coment figure{
	float: left;
	margin: 0 15px 5px 0;
}
.school .coment figure,
.school .coment figure img{
	overflow: hidden;
	width: 130px;
	height: 130px;
	border-radius: 50%;
}
.school .coment h4{
	margin: 10px 0;
	color: #6595ff;
	font-weight: bold;
	font-size: 16px;
}
.school .coment p{
	line-height: 1.5;
}

@media screen and (max-width: 768px) {
	.school{
		padding: 80px 15px 15px;
		border: 3px solid #6595ff;
	}
	.school .box2C > *,
	.school .box2C:after{
		width: 100%;
	}
	.school .address{
		text-align: center;
	}
	.school .address figure{
		float: none;
		max-width: 470px;
		width: 100%;
	}
	.school dt{
		padding: 0 0 20px;
	}
}


/** ================================================================================
		04.中ページ
================================================================================ **/

/* -------------------------------------
お問い合わせ
-------------------------------------*/
.inq-btn{
	display: flex;
	margin: 15px auto 30px;
	padding: 0;
	border: 5px solid #6595ff;
	border-radius: 15px;
	background: #fff;

	justify-content: center;
	align-items: center;
}
.inq-btn dt{
	text-align: center;
	font-size: 13px;
}.inq-btn dd{
	margin: 0 0 0 50px;
}
.inq-btn a[href^="tel"]{
	display: inline-block;
	margin: 10px 0 5px;
	color: #cc0066;
	font-size: 28px;
}.inq-btn a[href^="tel"]:before{
	width: 28px;
	height: 28px;
	background: url(../images/ico_tel.svg) no-repeat center center / contain;
}
.inq-btn dt small{
	display: inline-block;
	margin: 10px 10px 5px;
	padding: 8px 5px;
	border: 1px solid #cc0066;
	color: #cc0066;
	vertical-align: bottom;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.0;
}
.inq-btn .blue small{
	border-color: #3379fc;
	color: #3379fc;
}
.inq-btn .blue a[href^="tel"]{
	color: #3379fc;
}.inq-btn .blue a[href^="tel"]:before{
	background: url(../images/ico_tel2.svg) no-repeat center center / contain;
}


@media screen and (max-width: 768px) {
	.inq-btn{
		display: block;
		padding: 30px 0 0;
	}
	.inq-btn dt{
		padding: 0 10px;
	}
	.inq-btn dd{
		margin: 0;
	}
	.inq-btn a[href^="tel"]{
		font-size: 25px;
	}.inq-btn a[href^="tel"]:before{
		width: 25px;
		height: 25px;
	}
}


/* -------------------------------------
よくある質問
-------------------------------------*/
.faq{
	margin: 50px auto;
	width: 980px;
}
.faq dt{
	display: flex;
	margin: 40px auto 0;
	padding: 0 15px 0 80px;
	min-height: 62px;
	background: url(../images/ico_q.svg) no-repeat left center;
	color: #6595f6;
	font-size: 24px;

	align-items: center;
}
.faq dd{
	padding: 20px 15px 30px 80px;
	background: url(../images/b_dot.svg) repeat-x left bottom;
}

@media screen and (max-width: 768px) {
	.faq{
		margin: 20px auto;
		width: 100%;
	}
.faq dt{
	margin: 20px auto 0;
	padding: 0 0 0 45px;
	min-height: 40px;
	background-size: 40px auto;
	font-size: 18px;
}
.faq dd{
	padding: 20px 15px ;
	background: url(../images/b_dot.svg) repeat-x left bottom;
}
}


/* -------------------------------------
行事
-------------------------------------*/
.event a{
	text-decoration: underline;
}.event a:hover{
	text-decoration: none;
}

/* -------------------------------------
スタッフ
-------------------------------------*/
.staff-list{
	text-align: center;
}
.staff-list figure{
	margin: 0 0 5px;
}
.staff-list h4{
	padding: 5px;
	border-top:1px dotted #565656;
	border-bottom:1px dotted #565656;
}
.staff-list table{
	margin: 0;
	width: 100%;
	font-size: 14px;
}
.staff-list table td,
.staff-list table th{
	padding: 3px;
	border: 1px dotted #565656;
	border-top: none;
	vertical-align: middle;
}
.staff-list table th{
	width: 5em;
}


/** -------------------------------------
教室ページ
-------------------------------------**/
.page-hero{
	position: relative;
	padding: 1px 0;
	width: 100%;
	height: 40vw;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.page-hero:before{
	position: absolute;
	top: 0;
	left: 0;
	display:block;
	width: 100%;
	height: 40vw;
	background:rgba(0,93,229,0.3);
	content: "";
}
.page-hero h2{
	position: relative;
	z-index: 100;
	margin: 15vw 0 10px;
	padding: 20px 0;
	background: rgba(0,93,229,0.8);
	color: #ffffff;
	text-align: center;
	font-size: 40px;
}

@media screen and (max-width: 768px) {
	.page-hero,
	.page-hero:before{
		height: 50vw;
	}
	.page-hero h2{
		margin: 18vw 0 0;
		padding: 15px 0;
		font-size: 22px;
	}
}

/** -------------------------------------
枠
-------------------------------------**/
.frame{
	position: relative;
	margin: 30px auto;
	padding:  80px 30px 15px;
	border: 5px solid #cc0066;
	background: #fff;
}
.frame .titC{
	position: absolute;
	top: 10px;
	left: -20px;
	background: #cc0066;
}
.frame  .titC:before {
	border-right: solid 20px #b30059;
}
.frame .titB{
	color: #cc0066;
}

.frame3{
	position: relative;
	margin: 30px auto;
	padding:  80px 30px 15px;
	border: 5px solid #6595ff;
	background: #fff;
}
.frame3 .titC{
	position: absolute;
	top: 10px;
	left: -20px;
}


.frame2{
	position: relative;
	margin: 50px auto;
	padding: 30px 50px;
	border: 5px solid #6595ff;
	border-radius: 15px;
	background: #fff url(../images/speccy.png) no-repeat right 50px bottom 30px;
}

@media screen and (max-width: 768px) {
	.frame2{
		margin: 25px auto;
		padding: 15px 15px 50px;
		border: 3px solid #6595ff;
		background: #fff url(../images/speccy.png) no-repeat right 10px bottom 5px/auto 70px;
	}
}

/** -------------------------------------
コンセプト詳細
-------------------------------------**/
.concept-datail .feature .btnA{
	display: none;
}



/** -------------------------------------
コンセプト詳細
-------------------------------------**/
.info-list{
	background: #fff;
	padding: 30px 50px;
	margin: -35px auto 50px;
	border-radius: 15px;
	border: 2px dashed #cc0066;
}
.info-list li{
	margin: 10px 0;
}
.info-list time{
	font-size: 16px;
	margin: 0 20px 0 0;
}
.info-list em{
	background: #cc0066;
	min-width: 8em;
	text-align: center;
}
.info-list a.link{
	display: inline-block;
	margin: 0 0 0 20px;
	color: #cc0066;
	text-decoration: underline;
}
.info-list a.link:hover{
	text-decoration: none;
}
.info-list a.btnB{
	margin: 50px auto 0;
}

@media screen and (max-width: 768px) {
.info-list{
	background: #fff;
	padding: 15px;
	margin: -30px auto 30px;
	border-radius: 15px;
}
.info-list li{
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px dotted #aaa;
}
.info-list time{
	font-size: 14px;
	margin: 0;
	padding: 0 5px 0 0;
	display: inline-block;
}
	.info-list em{
		font-size: 11px;
		min-width: 6em;
}
.info-list a{
	display: block;
	margin: 5px 0 0;
	font-size: 14px;
}
}


/** -------------------------------------
イレギュラー処理
-------------------------------------**/
@media screen and (max-width: 768px) {
    .irregular tr:first-child{
        display:none;
    }
}