@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap');

html{
	scroll-behavior: smooth;
}
body{
	overflow-x: hidden;
}
main {
	background: url(../images/bg.png);
	background-color: #f5e9d7;
}

body main p,
body main th,
body main td,
body main li,
body main dt,
body main dd{
	font-family: 'Rockwell','Noto Sans JP','メイリオ','Meiryo',sans-serif;
	font-size: 14px;
	line-height:1.8em;
	font-feature-settings : "palt";
	letter-spacing:0.05em;
	color: #44221c;
}
main h1,
main h2,
main h3,
main h4,
main h5{
	font-family: 'Rockwell','Zen Kaku Gothic New','Noto Sans JP','メイリオ','Meiryo',sans-serif;
	line-height:1.4em;
	font-weight: bold;
	font-feature-settings : "palt";
	color: #44221c;
}
body main a{
	color: #3bb0bb;
	text-decoration: none;
	transition: 0.3s;
}
body main a:hover{
	color: #3bb0bb;
	background-color: #b5ebe6;
	transition: 0.3s;
}

/*----------------------*/
/*         menu         */
/*----------------------*/

header .menu{
	position:fixed;
	height: 20px;
	right: 20px;
	top: 20px;
	width: 33px;
	z-index: 99;
	cursor: pointer;
}
header .menu__line{
	background: #fd836f;
	display: block;
	height: 2px;
	border-radius: 1px;
	position: absolute;
	transition:transform .3s;
	width: 100%;
}
header .menu__line--center{ top: 9px;}
header .menu__line--bottom{ bottom: 0;}
header .menu__line--bottom p{
	color: #fd836f;
	font-size: 0.7em;
	font-family: 'Rockwell';
	margin-top: 5px;
	text-align: center;
}
header .menu__line--top.active{ top: 8px; transform: rotate(45deg);}
header .menu__line--center.active{ bottom: 9px; transform: rotate(135deg);}
header .menu__line--bottom.active{ transform:scaleX(0);}

header .gnav{
	background: rgba(117,88,55,0.85);
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 98;
}
header .gnav__wrap{
	align-items:center;
	display: flex;
	height: 100%;
	justify-content: center;
	position: absolute;
	width: 100%;
}
header .gnav__wrap li{
	list-style: none;
}
header .gnav__menu__item{
	margin: 40px 0;
}
header .gnav__menu__item a{
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	padding: 40px;
	text-decoration: none;
	transition: .4s;
	font-family: 'Zen Kaku Gothic New';
}
header .gnav__menu__item a:hover{
	color: #666;
}


/*----------------------*/
/*         title        */
/*----------------------*/

h1{
	position:fixed;
	left: 10px;
	top: 15px;
	width: 35%;
	max-width: 260px;
	z-index: 97;
	cursor: pointer;
}
h1 img{
	width: 100%;
}
main h2{
	background: url(../images/nyoro.png) no-repeat 50% 0;
	background-size: 38px 7px;
	padding-top: 50px;
	color:#fd836f;
	text-align: center;
	font-weight: normal;
	line-height: 1.7em;
	font-size: 1.05em;
}
@media screen and (max-width: 768px) { /* sp */
	main h2 span{
		font-size: 2em;
		letter-spacing: 0.075em;
	}
}
@media print, screen and (min-width: 769px) { /* pc */
	main h2 span{
		font-size: 2.6em;
		letter-spacing: 0.075em;
	}
}

/*----------------------*/
/*          top         */
/*----------------------*/

#top{
	max-width: 960px;
	margin: 0 auto;
}
#top #topimg{
	max-width: 800px;
	margin: 0 auto 5%;
	position: relative;
}
#top #topimg img#mainimg{
	border-radius: 40%;
	width: 100%;
}
#top #topimg p{
	font-family: 'Zen Kaku Gothic New';
	color: #fd836f;
	position: absolute;
}
#top #topimg p span{
	background-color: #fff;
	padding: 0 5px 2px;
}
@media screen and (max-width: 768px) { /* sp */
	#top #topimg{
		padding: 15% 5vw 0;
	}
	#top #topimg p{
		top: 50%;
		left: 3%;
		font-size: 1.1em;
		line-height: 1.8em;
	}
	#top #check{
		width: 32vw;
		position: absolute;
		right: 5px;
		bottom: -40px;
	}
}
@media print, screen and (min-width: 769px) { /* pc */
	#top #topimg{
		padding: 5% 5vw 0;
	}
	#top #topimg p{
		top: 53%;
		left: 1%;
		font-size: 1.6em;
		line-height: 1.8em;
	}
	#top #check{
		width: 220px;
		position: absolute;
		right: 10px;
		bottom: -30px;
	}
}
#top #check img{
	width: 100%;
}
#top #info{
	max-width: 680px;
	width: 92%;
	margin: 40px auto;
	border-radius: 1.7em;
	background-color: #fff;
	padding: 5px 10px;
}
#top #info p{
	font-size: 0.9em;
}
#top #info dl{
	display: flex;
	gap: 10px;
	margin: 10px;
}


/*----------------------*/
/*         about        */
/*----------------------*/
#about{
	width: 100%;
	background-color:#f5e9d7;
	padding: 100px 0 10px;
}
#about h3{
	margin-bottom: 1em;
}
#about div.outer_box .txt_box p{
	text-align: left;
}
#about div.outer_box .txt_box p + p{
	margin-top: 15px;
}
#about div.outer_box .img_box img{
	width: 100%;
	border-radius: 60px;
}
@media screen and (max-width: 768px) { /* sp */
	#about div.outer_box{
		margin: 80px 5vw;
	}
	#about div.outer_box .img_box img{
		margin-bottom: 30px;
	}
}
@media print, screen and (min-width: 769px) { /* pc */
	#about div.outer_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 80px auto;
		max-width: 800px;
		gap: 40px;
	}
	#about div.outer_box:nth-child(odd) { flex-direction: row;}
	#about div.outer_box:nth-child(even) { flex-direction: row-reverse;}
	#about div.outer_box .txt_box{ flex: 1 1 46%;}
	#about div.outer_box .img_box{ flex: 1 1 38%;}
}

#supervision{
	width: 100%;
	background-color:#faf4ea;
	padding: 100px 0 10px;
}
#supervision div.outer_box .txt_box p{
	text-align: left;
}
#supervision div.outer_box .txt_box p + p{
	margin-top: 15px;
}
#supervision div.outer_box .img_box img{
	width: 100%;
	border-radius: 60px;
}
@media screen and (max-width: 768px) { /* sp */
	#supervision div.outer_box{
		margin: 80px 5vw ;
	}
	#supervision div.outer_box .img_box img{
		margin-bottom: 30px;
	}
}
@media print, screen and (min-width: 769px) { /* pc */
	#supervision div.outer_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 80px auto ;
		max-width: 800px;
		gap: 40px;
	}
	#supervision div.outer_box:nth-child(even) { flex-direction: row-reverse;}
	#supervision div.outer_box .txt_box{ flex: 1 1 46%;}
	#supervision div.outer_box .img_box{ flex: 1 1 38%;}
}


/*----------------------*/
/*        lesson        */
/*----------------------*/
#lesson{
	width: 100%;
	background-color:#f5e9d7;
	padding: 100px 0;
	text-align: center;
}
#lesson .outer{
	margin: 0 5vw;
}
#lesson img{
	width: 100%;
}
#lesson h2{
	margin-bottom: 40px;
}
#lesson p{
	display: inline-block;
	text-align: left;
	max-width: 750px;
}
#lesson .course_img{
	margin: 40px auto 100px;
	max-width: 580px;
}

#lesson figure{
	margin: 40px auto 30px;
	max-width: 653px;
}
#lesson h3{
	color: #fd836f;
	margin: 70px 0 20px;
}
#lesson h4{
	color: #fd836f;
	margin: 40px auto 20px;
	border-radius: 1.5em;
	border: 1px dashed #fd836f;
	max-width: 400px;
	line-height: 2em;
}
#lesson .works_wrap{
	display: flex;
	margin: 0 auto;
	max-width: 720px;
	line-height: 1em;
	overflow-x:scroll;
	padding-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	gap: 10px;
}
#lesson .works_single{
	flex: 0 0 200px;
}
#lesson .works_single img{
	display: block;
	padding: 0;
}
#lesson .works_single p{
	width: 100%;
	color: #fff;
	background-color: #fd836f;
	margin: 0;
	text-align: center;
	font-size: 0.8em;
	line-height: 2em;
}

/*----------------------*/
/*      price trial     */
/*----------------------*/
#price{
	width: 100%;
	background-color:#faf4ea;
	padding: 100px 0 ;
	text-align: center;
}
#price .outer{
	margin: 0 5vw;
}
#price h3{
	color: #fd836f;
	margin: 70px 0 20px;
}

#price p{
	display: inline-block;
	margin-top: 30px;
	text-align: left;
}
#price table,
#trial table{
	min-width: 60%;
	margin:50px auto 0;
	border-spacing: 0 1em;
	text-align: center;
}
#price table th,
#trial table th{
	background-color: #fd836f;
	color: #fff;
	border-bottom: solid 2px #fd836f;
	padding: 5px 5px;
	line-height: 1.1em;
	font-weight: normal;
	width: 40%;
}
#price table td,
#trial table td{
	padding: 12px 20px;
	border-bottom: solid 2px #fd836f;
	padding: 10px 10px;
	font-size: 1em;
}
#price td span,
#trial td span{
	font-size: 1.4em;
}
#price figure{
	margin: 50px 0 0;
}
#trial{
	width: 100%;
	background-color:#f5e9d7;
	padding: 100px 0 ;
	text-align: center;
}
#trial .outer{
	margin: 0 5vw;
}
#trial h2 + p{
	display: inline-block;
	margin-top: 30px;
	text-align: left;
}
#trial #trial_wrap{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin: 50px 0;
}
#trial .trial_single{
	width: 300px;
}
#trial .trial_single img{
	width: 100%;
}
#trial .trial_single p{
	color: #fd836f;
	font-weight: bold;
	text-align: center;
}
#trial p{
	display: inline-block;
	text-align: left;
}
#trial p.attention{
	font-weight: bold;
	margin: 25px 0;
	text-align: center;
}

/*----------------------*/
/*         shop         */
/*----------------------*/
#shop{
	width: 100%;
	padding: 100px 0 ;
	text-align: center;
}
#shop .outer{
	margin: 0 5vw;
}
#shop h2 + p{
	display: inline-block;
	margin-top: 30px;
	text-align: left;
}
#shop h3{
	color: #fd836f;
	margin: 70px 0 20px;
}
#shop table{
		max-width: 720px;
		border-spacing: 5px;
		text-align: left;
		margin: 40px auto;
	}
#shop table th{
		background-color: #fff;
		width: 90px;
		padding: 10px 15px;
		font-weight: normal;
	}
#shop table td {
		padding: 10px 20px 10px 15px;
		background-color: #fff;
	}
#shop table td span.new{
		font-family: 'Zen Maru Gothic',sans-serif;
		background-color: #ec6d83;
		display: inline-block;
		border-radius: 3px;
		font-size: 0.8em;
		color: #fff;
		line-height: 1.4em;
		padding: 0 3px;
	}
#shop table td span.oshirase{
		font-size: 0.85em;
		color: #6f5c53;
	}

/*----------------------*/
/*        footer        */
/*----------------------*/

footer{
	background-color:#fbc5a1;
	text-align: center;
	padding: 20px 0;
}
footer img{
	width: 100px;
}
footer p{
	color: #fff;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	font-family: 'Zen Maru Gothic',sans-serif;
	margin-top: 5px;
}

@media screen and (max-width: 768px) {
	main .pc { display: none !important; }
	main .sp { display: block !important; }
}
@media print, screen and (min-width: 769px) {
	main .pc {}
	main .sp { display: none !important; }
}