body {
	background: #111;
}
.contact {
	position: absolute;
	top: 0;
	width: 100%;
	margin-top: 5px;
	font-family: "M PLUS Rounded 1c";
}
	.contact .canon {
		font-size: 90%;
		color: #fff;
		float: left;
	}
	.contact ul {
		float: right;
	}
	.contact ul li.obi {
		float: left;
		color: #fff;
		font-size: 85%;
	}
	.contact ul li.obi:hover {
		opacity: 0.5;
	}
	.contact ul li.obi:after {
		content:"";
		margin-right: 20px;
		margin-left: 5px;
	}
header {
	background: rgba(0, 0, 0, 0) url(../images/7615062.jpg) no-repeat center center;
    background-size: cover;
	height: 700px;
	margin-top: 30px;
	background-position-y: 0px;
}

	h1 {
		position: absolute;
		top: 50%;
		left: 15%;
	}
	ul.headerMenu {
		position: absolute;
		right: 0;
	}
	ul.headerMenu li {
		padding: 20px 10px 20px 20px;
		text-align: center;
		color: #fff;
		float: left;
	}
	ul.headerMenu li::after {
		content:"▶";
		float: right;
		font-size: 60%;
		margin-left: 10px;
	}
	ul.headerMenu li:hover {
		opacity: 0.5;
	}
		.headerMenu-c {
			background: #00a0e8;
		}
		.headerMenu-a {
			background: #313131;
			font-family: 'Noto Serif JP', serif;
		}
	#contents {
		position: relative;
	}
		.animation {
			position: absolute;
			top: -180px;
			right: 300px;
			z-index: 4;
		}
		.animation-text {
			top: -10px;
			width: 300px;
			height: 244px;
			position: absolute;
			overflow: hidden;   
		}
		.animation-text img {
			-moz-transition: -moz-transform 1s linear;
			-webkit-transition: -webkit-transform1s linear;
			-o-transition: -o-transform 1s linear;
			-ms-transition: -ms-transform 1s linear;
			transition: transform 1s linear;
		}
		.animation-text img:hover  {
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-o-transform: scale(1.2);
			-ms-transform: scale(1.2);
			transform: scale(1.2);
		}
		.animation-circle {
			width: 242px;
			height: 244px;
			opacity: 0.8;
				-webkit-animation: spin 8s linear infinite;
				-moz-animation: spin 8s linear infinite;
				-ms-animation: spin 8s linear infinite;
				-o-animation: spin 8s linear infinite;
				animation: spin 8s linear infinite;
			}
			
			@-webkit-keyframes spin {
				0% {-webkit-transform: rotate(0deg);}
				100% {-webkit-transform: rotate(360deg);}
			}
			@-moz-keyframes spin {
				0% {-moz-transform: rotate(0deg);}
				100% {-moz-transform: rotate(360deg);}
			}
			@-ms-keyframes spin {
				0% {-ms-transform: rotate(0deg);}
				100% {-ms-transform: rotate(360deg);}
			}
			@-o-keyframes spin {
				0% {-o-transform: rotate(0deg);}
				100% {-o-transform: rotate(360deg);}
			}
			@keyframes spin {
				0% {transform: rotate(0deg);}
				100% {transform: rotate(360deg);}
			}
	.news {
		padding: 20px;
		background: #eee;
	}
	.block-news {
		display: table;
		height: 3rem;
		left: 1.4vw;
		bottom: 1.4vw;
		z-index: 3;
		width: 1100px;
		margin: auto;
	}
	.block-news .txt-title {
		display: table-cell;
		height: 100%;
		vertical-align: middle;
		text-align: center;
		border-top-left-radius: 1.5rem;
		border-bottom-left-radius: 1.5rem;
		background-color: #e8652b;
		padding: 0 1.6rem 0 2rem;
		color: #fff;
	}
	.block-news .list-news {
		display: table-cell;
		height: 100%;
		vertical-align: middle;
		border-top-right-radius: 1.5rem;
		border-bottom-right-radius: 1.5rem;
		background-color: rgba(255,255,255,0.95);
	}
	.block-news .list-news > li {
		display: inline-block;
		width: 100%;
		padding: 0 2rem 0 1.6rem;
	}
	.block-news .list-news > li dl,
	.block-news .list-news > li dl > dt,
	.block-news .list-news > li dl > dd {
		display: inline;
		white-space: nowrap;
		color: #e8652b;
	}
	.block-news .list-news > li dl > dd:hover {
		text-decoration: underline;
		cursor: pointer;
	}
	.block-news .list-news > li a:hover {
		cursor: default;
	}
	.block-news .list-news > li dl > dd {
		margin-left: 1rem;
	}
	.block-news .list-news .ico-arrow {
		width: 0.56vw;
		height: 0.42vw;
	}
	.block-news .list-news .ico-arrow {
		width: 0.8rem;
		height: 0.6rem;
		fill: #e8652b;
		margin-left: 1rem;
		vertical-align: middle;
		position: relative;
		top: -0.12rem;
	}
/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 185px;
    overflow: hidden;
    position: absolute;
}
 
.loopSlider {
    margin: 0 auto;
    width: 100%;
    height: 185px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.loopSlider ul {
    height: 185px;
    float: left;
    overflow: hidden;
}
 
.loopSlider ul li {
    width: 355px;
    height: 185px;
    float: left;
    display: inline;
	overflow: hidden;
}
.loopSlider ul li:hover {
	opacity: 0.6;
}
/* ------------------------------
   inview
------------------------------ */
.list {
	transition: 1s;
}
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	overflow: hidden;
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
     left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}
/*スライド画像の横幅可変*/
img {
	max-width: 100%;
	height: auto;
}



.contents_block02 {
}
	.contents_block02 {
		padding-top: 200px;
		padding-left: 55vw;
		position: relative;
		padding-bottom: 240px;
		background: url(../images/42866720.jpg) no-repeat;
		background-size: cover;
		z-index: 1;
	}
		.contents_block02_box h2 {
			font-size: 250%;
			text-align: left;
			margin: 0 auto 50px;
			font-family: "M PLUS Rounded 1c";
			line-height: 200%;
			font-weight: bold;
			text-shadow: 3px 3px 3px #fff;
		}
		p.about {
			font-size: 130%;
			font-family: "M PLUS Rounded 1c";
			line-height: 250%;
			/*text-shadow: 0px 0px 1px #fff, 0px 0px 2px #fff, 0px 0px 3px #fff, 0px 0px 4px #fff, 0px 0px 5px #fff, 0px 0px 6px #fff;
			font-weight: bold*/
		}
		.contents_block02_box img {
			width: 873px;
			margin: 50px auto;
			display: block;
			position: absolute;
			top:150px;
			right: 100px;
		}
	.contents_block03 {
		background-color: #fdf8f0;
		font-family: "M PLUS Rounded 1c";
	}
		.contents_block03 h3 {
			font-family: "M PLUS Rounded 1c";
		}
	.contents_block04 {
		font-family: "M PLUS Rounded 1c";
		background: #111;
	}
		.contents_block04 h3 {
			background: #111;
			text-align: center;
			padding: 80px 0 50px;
			color: #fff;
		}
		.contents_block04 h3 span {
			font-size: 430%;
		}
		.contents_block04_box {
			overflow: hidden;
		}
		.contents_block04_box ul.course-img-header {
			position: relative;
		}
		.contents_block04_box h4 {
			position: absolute;
			background-color: rgba(255,255,255,0.7);
			padding: 10px 150px;
			border: 1px solid #eee;
			top: 250px;
			left: 250px;
			font-size: 150%;
		}
		.course-box {
			clear: both;
			padding: 30px 100px;
			min-height: 125px;
		}
		.course-box ul {
			overflow: hidden;
		}
			.course-box li {
				float: left;
				width: 235px;
			}
			.course-box li a {
				color: #fff;
			}
			.course-box li a:hover {
				text-decoration: underline;
			}

		.course_c {
			background: #00a0e8;
		}
		.course_a {
			background: #313131;
		}
			.childBox,
			.adultBox {
				width: 50%;
				float: left;
			}
			li.course-img {
				width: 50%;
				float: left;
				height: 317px;
				overflow: hidden;
			}
			.childBox h4 {
				font-family: 'Kosugi Maru', sans-serif;
				padding-top: 15px;
				padding-bottom: 15px;
			}
			.adultBox h4 {
				font-family: 'Noto Serif JP', serif;
			}
.contents_block05 {
	background: #fff;
	padding: 150px 12vw 100px;
	overflow: hidden;
}
.contents_block05 h3 {
	text-align: center;
	font-size: 300%;
	margin-bottom: 50px;
}
.card {
    position: relative;
	width: 400px;
	float: left;
	margin-right: 120px;
}
.voice2 {
	margin-top: 80px;
}
.card:last-child {
	content: "";
	margin-right: 0;
}
.card a {
	display: block;
	color: #111;
}
.card_reverse {
    position: absolute;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.card_surface {
    transform: rotateY(0deg);
	transition: transform 300ms 150ms;
}
.card_reverse {
    transform: rotateY(90deg);
	transition: transform 300ms;
	border: 1px solid #eee;
	padding: 50px 20px;
	line-height: 180%;
	font-size: 110%;
}
 
/* 裏面の表示 */
a:hover .card_surface {
    transform:rotateY(90deg);
    transition: transform 300ms;
}
a:hover .card_reverse {
    transform:rotateY(0deg);
    transition: transform 300ms 150ms;
}
.contents_block06 {
	background: #fad8e0;
}
.rss-list-box {
	overflow: hidden;
	padding: 50px 5vw 150px;
}
.rss-list {
	width: 18%;
    float: left;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #eee;
	padding: 10px;
	position: relative;
	min-height: 460px;
    max-height: 460px;
	height: 460px;
	margin-bottom: 20px;
}
.rss-list-box li:first-child:after {
	content: "NEW";
    position: absolute;
    border: 1px solid red;
    padding: 0px 5px;
    background: red;
	color: #fff;
	top: 0px;
    right: 0;
}
p.rss-image img {
    max-width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 200px;
    height: 200px;
    display: block;
    margin: auto;
}
.rss-title {
    margin: 15px 0;
	font-weight: bold;
	text-align: center;
}
.rss-time {
	background: #111;
    height: 80px;
    width: 100px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #fff;
    padding-top: 20px;
	text-align: center;
	position: absolute;
    top: -10px;
    left: 0;
}
span.rss-time-day {
	font-size: 150%;
}
p.rss-description {
	font-size: 90%;
    font-weight: normal;
    line-height: 180%;
    color: #777777;
}

@media screen and (min-width:480px) {
	#nav-drawer {
		display:none;
	}
	}
	@media screen and (max-width: 479px) { /*ウィンドウ幅が0～479pxの場合にcssを適用*/
		header {
			height: 350px;
		}
		h1 {
			top: 20%;
			left: 15%;
		}
		ul.headerMenu,
		.contact ul {
			display:none;
		}
		#nav-drawer {
			position: relative;
		  }
		#nav-content li {
			padding: 10px;
			border-bottom: 1px solid #eee;
		}
		#nav-content li::after {
			content: "▶";
			float: right
		}
		
		  /*チェックボックス等は非表示に*/
		  .nav-unshown {
			display:none;
		  }
		  
		  /*アイコンのスペース*/
		  #nav-open {
			display: inline-block;
			width: 30px;
			height: 22px;
			vertical-align: middle;
			right: 0;
			position: absolute;
			top: -23px;
		  }
		  
		  /*ハンバーガーアイコンをCSSだけで表現*/
		  #nav-open span, #nav-open span:before, #nav-open span:after {
			position: absolute;
			height: 3px;/*線の太さ*/
			width: 25px;/*長さ*/
			border-radius: 3px;
			background: #fff;
			display: block;
			content: '';
			cursor: pointer;
		  }
		  #nav-open span:before {
			bottom: -8px;
		  }
		  #nav-open span:after {
			bottom: -16px;
		  }
		  
		  /*閉じる用の薄黒カバー*/
		  #nav-close {
			display: none;/*はじめは隠しておく*/
			position: fixed;
			z-index: 99;
			top: 0;/*全体に広がるように*/
			left: 0;
			width: 100%;
			height: 100%;
			background: black;
			opacity: 0;
			transition: .3s ease-in-out;
		  }
		  
		  /*中身*/
		  #nav-content {
			overflow: auto;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;/*最前面に*/
			width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
			max-width: 330px;/*最大幅（調整してください）*/
			height: 100%;
			background: #fff;/*背景色*/
			transition: .3s ease-in-out;/*滑らかに表示*/
			-webkit-transform: translateX(-105%);
			transform: translateX(-105%);/*左に隠しておく*/
		  }
		  
		  /*チェックが入ったらもろもろ表示*/
		  #nav-input:checked ~ #nav-close {
			display: block;/*カバーを表示*/
			opacity: .5;
		  }
		  
		  #nav-input:checked ~ #nav-content {
			-webkit-transform: translateX(0%);
			transform: translateX(0%);/*中身を表示（右へスライド）*/
			box-shadow: 6px 0 25px rgba(0,0,0,.15);
		  }
		.animation {
			display: none;
		}
		.news {
			padding: 10px 0;
		}
		.block-news {
			width: 100%;
		}
		.block-news .list-news > li dl, .block-news .list-news > li dl > dt, .block-news .list-news > li dl > dd {
			display: block;
		}
		.block-news .list-news > li {
			padding: 0;
		}
		.block-news .list-news > li dl > dt {
			margin-left: 1rem;
		}
		.contents_block02 {
			background: #eee;
			padding-top: 100px;
			padding-left: 0;
			padding-bottom: 100px;
		}
		.contents_block02_box h2 {
			font-size: 125%;
			text-shadow: 1px 2px 1px #fff;
			margin: 0;
			text-align: center;
		}
		p.about {
			font-size: 100%;
			padding: 10px 5vw 10px 5vw;
		}
		.childBox, .adultBox {
			width: 100%;
			float: none;
		}
		li.course-img {
			height: 100%;
		}
		.contents_block04_box h4 {
			width: 100%;
			top: 0;
			left: 0px;
			
			padding: 50px 0 50px;
			text-align: center;
		}
		.course-box {
			padding: 30px 50px;
		}
		.contents_block05 {
			padding: 50px 0 50px;
		}
		.contents_block05 h3 {
			font-size: 170%;
			margin-top: 20px;
		}
		.card {
			width: 100%;
			margin-right: 0;
		}
		.card_surface img {
			width: 100%;
			margin: auto;
		}
		.rss-list {
			width: auto;
			float: none;
			margin-right: 0px;
			min-height: auto;
			max-height: auto;
			height: auto;
		}
		.rss-description {
			display: none;
		}
		.rss-list-box {
			padding: 50px 5vw 50px;
		}

		a:click .card_surface {
			transform:rotateY(90deg);
			transition: transform 300ms;
		}
		a:hover .card_reverse {
			transform:rotateY(0deg);
			transition: transform 300ms 150ms;
		}
		.voice2 {
			margin-top: 0;
		}
		.card {
			margin-top: 50px;
		}
		.card_reverse {
			font-size: 90%;
		}
		.contents_block05 {
			overflow: 
		}
		.contents_block06 h3 img {
			max-width: 200%;
			position: relative;
			right: 300px;
			display: block;
		}
		.contents_block06 h3 {
			overflow: hidden;
		}
	}