@charset "UTF-8";

/* @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'); */

body {
	background: #fff;
	line-height: 1.8;
	letter-spacing: .02em;
	font-size: 1.4rem;
	font-family: YakuHanJP,'游ゴシック体',YuGothic,'游ゴシック','Yu Gothic','ヒラギノ角ゴ ProN','Hiragino kaku Gothic ProN','メイリオ',Meiryo,sans-serif;
	color: #333;
}
.en {
	letter-spacing: .06em;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}
header, .inner {
	width: 90vw;
	margin: 0 auto;
}
.inner {
	max-width: 1200px;
}
.telLink a, .telLink a:hover {
	text-decoration: none!important;
	color: #333;
}
.newline {
	display: inline-block;
}
.reservList, .reservList li, .mail a, .social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.reservList li, .mail a, .social {
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.reservList li, .mail a, .social {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.reservList {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

/*-------------------------------------------------
 * loader
-------------------------------------------------*/
html, body {
	width: 100%;
	height: 100%;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	text-align: center;
	z-index: 99999;
}
.double-bounce1, .double-bounce2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #60cdbb;
	opacity: .5;
	-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
	animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
	0%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}
#fade {
	position: fixed;
	padding: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 10000; 
}

/* =====================================================================
 * header/footer
 * =================================================================== */
#headerInner {
	padding: 60px 0 55px;
	width: 100%;
}
h1 {
	text-align: center;
}
.leadTxt {
	margin-top: 50px;
	text-align: center;
	line-height: 2.2;
	font-size: 1.7rem;
}
.leadTxt p + p {
	margin-top: 20px;
}
.social {
	margin-top: 40px;
}
.social li {
	margin: 0 1em;
}
footer {
	background: #efefef;
}
#footerInner {
	padding: 40px 0;
	width: 100%;
}
.copyright {
	clear: both;
	line-height: 1.6;
	letter-spacing: .08em;
	text-align: center;
	font-size: 1.1rem;
}

/* =====================================================================
 * contents
 * =================================================================== */
main {
	display: block;
	overflow: hidden;
}
section {
	padding: 80px 0 90px;
}
#schedule {
	background: #d5f2ed;
}
#contact {
	background: #e7e4f3;
}
h2 {
	overflow: hidden;
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 2.8rem;
	text-align: center;
}
.lessonTxt p, #schedule > div > p {
	text-align: center;
}
.lessonTxt p {
	padding: 0 12%;
	font-size: 1.5rem;
	line-height: 2;
}
.lessonTxt p + p {
	margin-top: 20px;
}
.linkBtn a, .mail a {
	padding: 1.7em 1em;
	width: 100%;
	height: 100%;
	border: solid 1px #666;
	background: #fff;
	line-height: 1.3;
	text-align: center;
	font-weight: bold;
	font-size: 1.9rem;
}
.linkBtn a {
	display: block;
	margin: 40px auto 0;
	max-width: 49%;
}
.linkBtn .en {
	font-weight: 500;
}
.reservation {
	margin-top: 45px;
	letter-spacing: .08em;
}
.reserTxt {
	text-align: center;
}
.reserTxt p + p {
	margin-top: 10px;
}
.reservTtl {
	line-height: 1.5;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
}
.reservTtl span, .mail span {
	display: inline-block;
}
.reservList {
	margin-top: 25px;
}
.reservList li {
	width: 49%;
	border: solid 1px #666;
	background: #fff;
	text-align: center;
	line-height: 1.3;
	font-size: 1.7rem;
}
.reservList li.mail {
	border: none;
}
.phone, .mail a {
	padding: 1em;
}
.phone .tel, .bytxt {
	margin: 0 .4em;
}
.phone .tel {
	display: inline-block;
	font-size: 2.1rem;
}
.phone .telLink {
	font-size: 2.4rem;
}
.reception {
	display: inline-block;
	letter-spacing: .05em;
	font-weight: normal;
	font-size: 1.3rem;
}
.reception + .reception {
	margin-top: .6em;
}
.reservList li .reception {
	width: 100%;
}
.notMail {
	margin-top: 30px;
	text-align: center;
}
.notMail span.en {
	display: block;
	margin-top: .3em;
	text-align: center;
	font-size: 1.5rem;
}
.notMail span {
	display: inline-block;
}
.coubic a {
	margin: 0 auto;
	max-width: 700px;
}
.mapBox {
	position: relative;
	overflow: hidden;
	padding-bottom: 420px;
	width: 100%;
	height: 0;
}
.map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.addressTxt {
	margin-top: 2em;
	text-align: center;
}
#access .linkBtn a {
	margin: 20px auto 0;
	padding: 1em;
	max-width: 300px;
	font-size: 1.4rem;
}

/* =====================================================================
 * hover
 * =================================================================== */
@media screen and (min-width: 1280px) {
	.linkBtn a, .mail a {
		transition: color .5s ease, background .5s ease;
		-webkit-transition: color .5s ease, background .5s ease;
		-moz-transition: color .5s ease, background .5s ease;
	}
	.linkBtn a:hover, .mail a:hover, .linkBtn.coubic a:hover {
		background: #60cdbb;
		border: solid 1px #60cdbb;
		color: #fff;
	}
	#contact .mail a:hover {
		background: #968ac6;
		border: solid 1px #968ac6;
	}
	.linkBtn a:hover {
		background: #f99cd3;
		border: solid 1px #f99cd3;
	}
}

/* =====================================================================
 * mediaqueries
 * =================================================================== */
@media screen and (max-width: 1279px) {
	a img:hover {
		opacity: 1;
	}
}
@media screen and (max-width: 959px) {
	h1 img {
		width: 200px;
		height: auto;
	}
	.leadTxt {
		margin-top: 5.8%;
	}
	.social {
		margin-top: 4.8%;
	}
	section {
		padding: 8.5% 0 9.5%;
	}
	h2 {
		margin-bottom: 3.3%;
	}
	.lessonTxt p {
		padding: 0;
	}
	.reservList li {
		margin: 0 auto;
		max-width: 700px;
		width: 100%;
		height: auto;
		font-size: 1.6rem;
	}
	.reservList li + li {
		margin-top: 10px;
	}
	.linkBtn a {
		margin-top: 4.8%;	
		padding: 20px;
		font-size: 1.8rem;
	}
	.reservation {
		margin-top: 5.3%;
	}
	.reservList, .reservList li, .mail a {
		display: block;
	}
	.reservTtl {
		font-size: 1.5rem;
	}
	.reservList {
		margin-top: 3%;
	}
	.phone, .mail a {
		padding: 20px;
    }
	.phone .telLink {
		font-size: 2.2rem;
	}
	.mail a {
		font-size: 1.8rem;
	}
	.notMail {
		margin-top: 3.5%;
	}
	.addressTxt {
		margin-top: 3.3%;
    }
    #access .linkBtn a {
    	margin-top: 2.5%;
    }
}
@media screen and (max-width: 599px) {
	#loader {
		width: 40px;
		height: 40px;
		margin-top: -20px;
		margin-left: -20px;
	}
	#headerInner {
		padding: 45px 0;
	}
	#footerInner {
		padding: 30px 0;
	}
	h1 img {
		width: 170px;
	}
	.newline {
		display: inline;		
	}
	.leadTxt .newline {
		display: inline-block;		
	}
	.leadTxt {
		margin-top: 7%;
		line-height: 1.8;
		font-size: 1.5rem;
	}
	.leadTxt p + p {
		margin-top: 5%;
	}
	.social {
		margin-top: 6%;
	}
	.social img {
		width: 36px;
		height: auto;
	}
	section {
		padding: 9% 0 10%;
	}
	h2 {
		margin-bottom: 4%;
		font-size: 2.4rem;
	}
	.lessonTxt p {
		text-align: justify;	
		line-height: 1.8;
		font-size: 1.4rem;
	}
	.lessonTxt p + p {
		margin-top: 5%;
	}
	.linkBtn a {
		margin-top: 6%;	
		line-height: 1.45;
		font-size: 1.7rem;
	}
	.reservation {
		margin-top: 7%;
	}
	.reservList li {
		line-height: 1.45;
	}
	.notes {
		text-align: justify;
	}
	.mail a {
		font-size: 1.7rem;
	}
	.notMail {
		text-align: left;
	}
	.addressTxt {
		margin-top: 15px;
	}
	#access .linkBtn a {
		margin-top: 15px;
	}
}
@media screen and (max-width: 479px) {
	#headerInner {
		padding: 10% 0;
	}
	h1 img {
		width: 146px;
	}
	h2 {
		font-size: 2.1rem;
	}
	.linkBtn a, .mail a {
		padding: 15px;
		font-size: 1.6rem;
	}
	.reservList li {
		font-size: 1.5rem;
	}
	.reservList .tel {
		font-size: 1.8rem;
	}
	.reservList .telLink {
		font-size: 2.0rem;
	}
	.phone {
		padding: 16px 15px 14px;
	}
}