@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}
::before , ::after {
	box-sizing: inherit;
}
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #533A1D;
}
img {
	border: 0;
	vertical-align: bottom;
}
a:link, a:visited {
	color:#533A1D;
	border: none;
	text-decoration: none;
}
.clear{ 
		clear:both;
}
#wrap {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
		font-size: 12px;
	line-height: 1.5em;
}
.intro {
	width: 90%;
	height: 100%;
	margin: 0 auto;
	padding: 20px;
	}
.shop {
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 20px;
	text-align: center;
}
.shop img {
	max-width: 250px;
}
.shop p {
	font-size: 120%;
	line-height: 1.5em;
	}
.info {
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 20px;
	border:solid 3px #CDCDCD;
	text-align: center;
	}
.info dl {
	text-align: left;
}
.info dt {
	font-weight: bolder;
	margin-bottom: 5px;
}
.info dd {
	margin-bottom: 5px;
	line-height: 1.5em;
}
.info ul {
	padding: 0 15px;
	text-align: left;
	line-height: 2.5em;
}
.info ul li {
	list-style: disc;
	text-align: left;
}
h5 {
	margin: 0 0 8px 20px;
	padding: 0;
	font-size: 14px;
	text-align: left;
}
.popup_wrap input {
	display: none;
}
.popup_overlay {
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}
.popup_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.popup_content {
	position: relative;
	align-self: center;
	width: 90%;
	max-width: 600px;
	padding: 30px 40px;
	box-sizing: border-box;
	background: #fff;
	line-height: 1.4em;
	transition: 0.5s;
	text-align: justify;
}
.close_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 14px;
	cursor: pointer;
	padding:8px;
	color: #999;
	border-radius:5px;
	font-weight:bold;
}
.popup_wrap input:checked ~ .popup_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
.popup_wrap input:checked ~ .popup_overlay .popup_content{
	transform: translateY(50px);
}
.open_btn {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin:10px auto 20px;
	color: #fff;
	background:#D8AFD1;
	padding: 5px 10px;
	border:none;
	border-radius: 5px;
	cursor: pointer;
	transition: .3s ease;
}
.open_btn:hover{
	background:#f29c9f;
	border:none;
	color:#fff;
	transition: .3s ease;
}
.lesson {
	width: 100%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 10px;
	text-align: center;
	}
.button_l-day {
	width: 100%;
	height: 100%;
	background-color: #F7C5C8;
	padding: 5px 15px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
}
.button_l-season {
	width: 100%;
	height: 100%;
	background-color: #D2E9B5;
	padding: 5px 15px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
}
.button_l-original {
	width: 100%;
	height: 100%;
	background-color: #D1E5E6;
	padding: 5px 15px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
}
.button_l-jca {
	width: 100%;
	height: 100%;
	background-color: #F1DAA8;
	padding: 5px 15px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
}
.button_lesson {
	background-color: #935a34;
	margin: 10px auto;
	padding: 5px 30px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
	border-radius:5px;
	display: block;
	clear: right;
}
.lesson table {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 10px;
	color: #ffffff;
}
.lesson td {
	width: 50%;
	padding: 10px;
	height: 140px;
	color: #ffffff;
	font-size: 110%;
}
.lesson img {
	max-width: 640px;
	margin: 20px auto 0;
}
.lesson p {
	font-size: 110%;
	line-height: 1.5em;
	margin: 10px auto 0;
}
h2 {
	width: 90%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
h2 img {
	width: 33%;
}
h3 {
	width: 90%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
h3 p {
	margin: 0 0 5px;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
h3 img{
	margin: 0 auto 10px;
	padding: 0;
}
p.title {
	margin:0 0 5px;
	padding: 0;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}
hr.solid {
	background-color: #C686BA;
	height: 2px;
	width: 100%;
	margin: 0 auto 15px;
	border: none;
}
#ameblo {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 20px;
	border:solid 5px #CDCDCD;
	border-radius: 10px;
	}
#ameblo p {
	font-size: 120%;
	margin: 10px 0;
}
#blog {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	}
#blog dl {
	text-align: left;
	margin-bottom: 10px;
}
#blog dt {
	font-weight: bolder;
	margin-bottom: 3px;
}
#blog dd {
	margin-bottom: 8px;
	font-size: 120%;
}
.button_blog {
	background-color: #089509;
	margin: 0 10px;
	padding: 3px 10px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
	border-radius:2px;
	font-size: 11px;
}
#youtube {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 20px;
	border:solid 5px #CDCDCD;
	border-radius: 10px;
	}
#youtube p {
	font-size: 120%;
	margin: 10px 0;
}
.responsive_video { 
		position: relative; 
		padding-bottom: 56.25%; 
}
.responsive_video video, 
.responsive_video iframe, 
.responsive_video object, 
.responsive_video embed { 
		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/*#instagram {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 0;
}*/
#instagram {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 20px;
	border:solid 5px #CDCDCD;
	border-radius: 10px;
	}
#instagram p {
	font-size: 120%;
	margin: 10px 0;
}
.button_insta {
	background-color: #a535b5;
	margin: 0 10px;
	padding: 5px 10px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
	border-radius:3px;
	font-size: 12px;
}
.button_1f {
	background-color: #000000;
	margin: 0 10px;
	padding: 5px 10px;
	color: #FFFFFF;
	text-align: center;
	outline: none;
	border-radius:3px;
	font-size: 12px;
}
#access {
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 0;
	}
.google_map {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 10px;
	height: 0;
	overflow: hidden;
	margin:0 auto 30px;
}
	#google_map iframe,
	#google_map object,
	#google_map embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.googleform-wrapper {
	position: relative;
	width: 100%;
	height: 800px;
	overflow-y: hidden;
	margin: 0 0 30px;
}
.googleform-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.urakata-wrapper {
	position: relative;
	width: 100%;
	height: 550px;
	overflow-y: hidden;
	margin: 0 0 30px;
}
.urakata-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.address {
	text-align: center;
	line-height: 1.5em;
	margin: 15px 0;
	font-size: 90%;
}
.address_page {
	line-height: 1.5em;
	margin: 15px 0;
	font-size: 110%;
}
#payment {
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 0;
	text-align: center;
	}
#payment img {
	max-width: 280px;
}
#payment p {
	text-align: left;
}
#contact {
	width: 90%;
	height: 100%;
	margin: 0 auto 30px;
	padding: 0;
	}
.copyright {
	font-size: 10px;
	margin: 5px;
	padding: 0;
	text-align: center;
}
hr.dot {
	border: 1px dotted #444444;
	width: 100%;
	margin: 0 auto 5px;
}
#logo {
	max-width:70%;
	margin:0 auto 10px;
	display: flex;
	align-items: center;
	position: relative;
	max-height: 80px;
}
@media screen and (min-width: 640px) {

#logo {
	max-width:60%;
	margin:0 auto 10px;
	display: flex;
	align-items: center;
	position: relative;
	max-height: 80px;
}
}

nav{
	position: relative;
	background: #fff;
}
#about {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 20px;
	border:solid 5px #FFB9AD;
}
.about_h {
	background-color: #BCE3C9;
	width: 100%;
	margin: 0 0 20px;
	padding: 15px 20px;
	font-size: 150%;
	font-weight: bold;
}
.contents {
	background-color: #FEEEDF;
	width: 90%;
	height: 100%;
	margin: 10px auto 20px;
	padding: 20px;
	border-radius: 8px;
}
.teachers {
	width: 90%;
	height: 100%;
	margin: 0 auto 25px;
	padding: 10px;
}
.teachers img {
	width: 100%;
	height: 100%;
	margin: 10px auto;
	padding: 0;
}
h4 {
	margin-bottom: 5px;
	padding: 0;
	font-size: 120%;
	font-weight: bolder;
	text-align: left;
}
h6 {
	margin: 0;
	padding: 0 10px;
	font-size: 90%;
	font-weight: bolder;
	text-align: left;
}
hr.name {
	background-color: #C686BA;
	height: 2px;
	width: 100%;
	margin: 0 auto 5px;
	border: none;
}
#courses {
	width: 100%;
	height: 100%;
	margin: 10px auto 20px;
	padding: 20px;
	text-align: center;
}
#courses h5 {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 14px;
	font-weight: bolder;
	text-align: left;
}
#courses p {
	text-align: left;
	margin-bottom: 5px;
}
#question {
	width: 90%;
	height: 100%;
	margin: 10px auto 30px;
	padding: 20px;
	border:solid 5px #BCE3C9;
}
#question dl {
	text-align: left;
}
#question dt {
	font-weight: bolder;
	margin-bottom: 5px;
}
#question dd {
	margin-bottom: 15px;
	line-height: 1.5em;
}
button {
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
	border: 0;
	background: transparent;
	outline: 0;
	border-radius: 0;
	text-align: inherit;
}
button:hover {
	cursor: pointer;
}
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	background: #CDCDCD;
	opacity: 0.6;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/* 以下、ハンバーガーボタンのスタイリング */
.btn {
	/* ボタンの配置位置	*/
	position: fixed;
	top: 36px;
	left: 12px;
	/* ボタンの大きさ	*/
	width: 24px;
	height: 24px;
	/* バーガーの線をボタン範囲の中心に配置 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 最前面に */
	z-index: 10;
}
/* 真ん中のバーガー線 */
.btn-line {
	/* 線の長さと高さ */
	width: 100%;
	height: 1px;
	/* バーガー線の色 */
	background-color: #999;
	/* バーガー線の位置基準として設定 */
	position: relative;
	transition: .2s;
}
/* 上下のバーガー線 */
.btn-line::before,
.btn-line::after {
	content: "";
	/* 基準線と同じ大きさと色 */
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #999;
	transition: .2s;
}
.btn-line::before {
	/* 上の線の位置 */
	transform: translateY(-8px);
}
.btn-line::after {
	/* 下の線の位置 */
	transform: translateY(8px);
}

/* メニューオープン時 */
.btn.open {
	transform: rotate(180deg);
}
.btn-line.open {
	/* 真ん中の線を透明に */
	background-color: transparent;
}
.btn-line.open::before,
.btn-line.open::after {
	content: "";
	/* 上下の線の色を変える */
	background-color: #999;
	transition: .2s;
}
.btn-line.open::before {
	/* 上の線を傾ける */
	transform: rotate(135deg);
}
.btn-line.open::after {
	/* 上の線を傾ける */
	transform: rotate(-135deg);
}
/* ここまでボタンアニメーション */
/* ここまで、ハンバーガーボタンのスタイリング */

/* 以下、メニューのスタイリング **/
.menu {
	position: fixed;
	/* メニューの位置マイナス指定で画面外に */
	left: -100%;
	width: 40%;
	height: 40vh;
	/* メニューを縦に */
	display: flex;
	flex-direction: column;
	color: #fff;
	background-color: rgba(255, 145, 0, 0.9);
	transition: .3s;
	z-index: 10;
}
.menu-list {
	width: 100%;
	height: 100%;
	/* メニューテキスト位置をリスト内中心に */
	display: flex;
	justify-content: center;
	align-items: center;
}
.menu-list a {
	color: #fff;
}
.menu-list:hover {
	color: #333;
	background-color: rgba(255, 255, 255, 0.5);
	transition: .3s;
	cursor: pointer;
}
/* メニューオープン時位置0にして画面内に */
.menu.open {
	position: fixed;
	left: 0;
}
/* 600px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 600px) {
.btn {
		display: none;
	}

.menu {
		/* メニューを横に */
	display: flex;
	flex-direction: row;
	position: relative;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: rgba(255, 255, 255, 1.0);
	transition: .3s;
	color: #533A1D;
	font-size: 80%;
	}
.menu-list a {
	color: #533A1D;
}
.menu-list a:hover {
	color: #fff;
}
.menu-list:hover {
	background-color: rgba(255, 145, 0, 0.5);
	height: 40px;
	border-radius: 20px;
	transition: .3s;
	cursor: pointer;
}
}
/* ここまで、メニューのスタイリング */

/* Slder */
.slider{
	position:relative;
	/* 表示するスライダーの高さを設定 */
	max-width: 800px;
	height: 550px;
	margin:0 auto;
	padding:0 auto;
	text-align: center;
}
.slider ul{
	margin:0;
	padding:0;
	list-style:none;
}
.slider ul img{
	/* スライドさせる画像の幅を設定 */
	width:100%;
	margin:0 auto;
	padding:0 auto;
}
.slider ul li{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	animation-iteration-count:infinite;
	/* アニメーションの周期は35秒 */
	animation-duration:35s;
}

/* アニメーション開始時間の設定 */

.slider ul li:nth-child(1){
	animation-name:slider;
	/* 1秒前からスタート */
	animation-delay:-1s;
}
.slider ul li:nth-child(2){
	animation-name:slider;
	/* 6秒後（7秒-1秒）からスタート */
	animation-delay:6s;
	opacity:0;
}
.slider ul li:nth-child(3){
	animation-name:slider;
	/* 13秒後（14秒-1秒）からスタート */
	animation-delay:13s;
	opacity:0;
}
.slider ul li:nth-child(4){
	animation-name:slider;
	/* 20秒後（21秒-1秒）からスタート */
	animation-delay:20s;
	opacity:0;
}
.slider ul li:nth-child(5){
	animation-name:slider;
	/* 27秒後（28秒-1秒）からスタート */
	animation-delay:27s;
	opacity:0;
}

/* フェードイン・フェードアウトの設定 */

@keyframes slider{
　/* 非表示（不透明度0%）状態からフェードインを始める	*/
	0%{
		opacity:0;
	}
	/* ここまでにフェードインを完了し、完全表示（不透明度100%）にする */
	4.76%{
		opacity:1;
	}
	/* ここまで完全表示（不透明度100%）の状態を維持したらフェードアウトを始める */
	33.33%{
		opacity:1;
	}
	/* ここまでにフェードアウトを完了し、非表示（不透明度0%）にする */
	42.85%{
		opacity:0;
	}
	/* 非表示（不透明度0%）状態を維持したまま終わる */
	100%{
		opacity:0;
	} 
}

/*　端末に合わせてスライダーの高さを調整する */
/*===============================================
画面の横幅が640pxまで
===============================================*/
@media screen and (max-width: 640px) {

.slider{
	width:100%;
	height: 450px;
}
}

/*===============================================
画面の横幅が414pxまで（iPhone/Pixel）
===============================================*/

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

.slider{
	width:100%;
	height: 280px;
}
}

/*===============================================
画面の横幅が360pxまで（Galaxy）
===============================================*/

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

.slider{
	width:100%;
	height: 250px;
}
}

/*===============================================
画面の横幅が320pxまで（iPhone5/SE）
===============================================*/

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

.slider{
	width:100%;
	height: 225px;
}
}

@media screen and (min-width:980px){
	/*画面幅が980px以上の時*/
#wrap {
	max-width:800px;
	width: 100%;
	height:100%;
	margin:0 auto;
	padding:0;
 	overflow: hidden;
	font-size: 14px;
	}
}