@charset "UTF-8";
:root{
	--body : black;
	--link : black;
	--title : black;
	--main : #f6e8f5;
	--base : #eee;
	--mainBold : #dcabda;
	--sub : #999;
	--white : #fff;
}
.wrap{
	max-width : 1000px;
	margin-left : auto;
	margin-right : auto;
}
@media(max-width: 999px){
	body{
	}
	main{
		padding-top : calc( 130 * 100vw / 750 );
		position : static;
	}
	main:not(.is-menuOpen){
	}
	main.is-menuOpen{
		width : 100%;
		position : fixed;
		left : 0;
	}
}
@media(min-width: 1000px){
	main{
		padding-top : 80px;
	}
}
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	background-color : white;
	position : fixed;
	z-index : 10;
	top : 0;
	left : 0;
	width : 100%;
	-webkit-transition : top .5s ease;
	        transition : top .5s ease;
}
#header .wrap{
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : start;
	-ms-flex-align : start;
	align-items : flex-start;
}
#header .lesson{
	background-color : #f29700;
}
#header .lesson a{
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	text-align : center;
	color : white;
	width : 100%;
	height : 100%;
}
@media(max-width: 999px){
	#header{
		border-top : solid calc( 4 * 100vw / 750 ) #0075c0;
	}
	#header .wrap{
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
		padding-top : calc( 22 * 100vw / 750 );
		padding-left : calc( 6 * 100% / 750 );
		padding-right : calc( 14 * 100% / 750 );
		height : calc( 126 * 100vw / 750 );
		overflow : hidden;
	}
	#header h1{
		width : calc( 288 * 100% / 730 );
	}
	#header .lesson{
		border-radius : calc( 5 * 100vw / 750 );
		width : calc( 320 * 100% / 730 );
		height : calc( 80 * 100vw / 750 );
		margin-left : calc( 30 * 100% / 730 );
	}
	#header .lesson a img{
		width : auto;
		height : calc( 29.734 * 100vw / 750 );
	}
	#header button{
		width : calc( 80 * 100% / 730 );
		height : calc( 80 * 100vw / 750 );
	}
	#header .scroll{
		overflow : scroll;
		height : calc( 100vh - calc( 130 * 100vw / 750 ) );
	}
	#header nav{
		overflow : hidden;
		max-height : 0;
		position : fixed;
		top : calc( 130 * 100vw / 750 );
		width : 100%;
		left : 0;
		z-index : 10;
		background-color : rgba( 0 , 0 , 0 , .85 );
		-webkit-transition : max-height .7s ease-in;
		        transition : max-height .7s ease-in;
	}
	#header nav ul{
		padding-top : calc( 36 * 100vw / 750 );
	}
	#header nav li a{
		padding-top : calc( 20 * 100vw / 750 );
		padding-bottom : calc( 20 * 100vw / 750 );
		padding-left : calc( 40 * 100% / 750 );
		padding-right : calc( 40 * 100% / 750 );
		color : white;
		border-bottom : solid 1px white;
		display : block;
		width : 100%;
		font-size : calc( 40 * 100vw / 750 );
		font-weight : 400;
	}
	#header .gift{
		text-align : center;
		padding-top : calc( 32 * 100vw / 750 );
	}
	#header .gift p{
		font-size : calc( 36 * 100vw / 750 );
		line-height : 1.2;
		color : #f29700;
	}
	#header .gift p:first-line{
		color : white;
	}
	#header .gift a{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
		background-color : #f29700;
		color : white;
		width : calc( 690 * 100% / 750 );
		height : calc( 100 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
		font-size : calc( 44 * 100vw / 750 );
		margin-top : calc( 20 * 100vw / 750 );
	}
	#header .gift a:after{
		content : "";
		display : block;
		background : url("../images/ui/icon/arrow01.svg") center center / contain no-repeat;
		width : .5em;
		height : .5em;
		margin-left : calc( 16 * 100% / 690 );
	}
	#header .contact{
		border : solid 1px #fff;
		width : calc( 690 * 100% / 750 );
		margin-top : calc( 40 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
		text-align : center;
		margin-bottom : calc( 100 * 100vw / 750 );
	}
	#header .contact a{
		display : block;
		padding-top : calc( 24 * 100vw / 750 );
		padding-bottom : calc( 24 * 100vw / 750 );
	}
	#header .contact span{
		display : block;
		color : white;
	}
	#header .contact span:nth-of-type(1){
		font-size : calc( 36 * 100vw / 750 );
	}
	#header .contact span:nth-of-type(2){
		font-size : calc( 56 * 100vw / 750 );
		margin-top : calc( 12 * 100vw / 750 );
	}
	#header .contact span:nth-of-type(3){
		font-size : calc( 28 * 100vw / 750 );
		margin-top : calc( 8 * 100vw / 750 );
	}
	#header .contact span:nth-of-type(3):before{
		content : "( ";
	}
	#header .contact span:nth-of-type(3):after{
		content : " )";
	}
	#header.is-open nav{
		max-height : 100vh;
	}
}
@media(min-width: 1000px){
	#header{
		-webkit-box-shadow : 1px 0 5px rgba( 0 , 0 , 0 , .61 );
		        box-shadow : 1px 0 5px rgba( 0 , 0 , 0 , .61 );
	}
	#header .wrap{
		height : 80px;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	#header h1{
		width : 190px;
		border-top : solid 4px #0075c0;
	}
	#header h1 a{
		display : block;
		padding-top : 5px;
	}
	#header nav ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		height : 50px;
		margin-top : 11px;
		width : 624px;
	}
	#header nav ul li{
		height : 100%;
	}
	#header nav ul a{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		text-align : center;
		font-size : 16px;
		width : 100%;
		height : 100%;
		padding-left : .5em;
		padding-right : .5em;
	}
	#header .lesson{
		width : 140px;
		height : 50px;
		margin-top : 11px;
	}
	#header .lesson a{
		font-size : 15px;
		font-weight : 600;
	}
}
/*--------------------------------------------
Section GIFT
---------------------------------------------*/
.section-gift{
	background-color : #c1eeff;
	height : 310px;
	width : 100%;
}
.section-gift .wrap{
	position : relative;
	z-index : 1;
	padding-top : 80px;
}
.section-gift .wrap > a{
	display : block;
	color : transparent;
	width : 492px;
	height : 180px;
	margin-left : 232px;
	position : relative;
	overflow : visible;
	background : url("../images/lesson/button_off.svg") left bottom no-repeat;
}
.section-gift .wrap > a:before{
	content : "";
	display : block;
	width : 349px;
	height : 88px;
	/* background : url("../images/lesson/text.svg") right top no-repeat; */
	margin-left : 90px;
	z-index : -1;
}
.section-gift .wrap > a:after{
	content : "";
	display : block;
	position : absolute;
	top : -22px;
	left : -60px;
	width : 157px;
	height : 201px;
	background : url("../images/lesson/char_off.svg") right top / contain no-repeat;
	z-index : -2;
}
.section-gift .wrap > a:hover{
	background-image : url("../images/lesson/button_on.svg");
}
.section-gift .wrap > a:hover:after{
	top : -132px;
	left : -150px;
	width : 247px;
	height : 311px;
	background : url("../images/lesson/char_on.svg") right top / contain no-repeat;
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	background-color : #00a1e9;
}
#footer ul{
	display : -webkit-box;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	-webkit-box-pack : center;
	-ms-flex-pack : center;
	justify-content : center;
	width : 100%;
}
#footer li:not(:first-child):before{
	content : "｜";
	color : white;
}
#footer a{
	color : white;
	font-weight : 600;
}
@media(max-width: 999px){
	#footer .wrap{
		height : calc( 100 * 100vw / 750 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#footer li:before{
		padding-right : 1.5em;
		padding-left : 1.5em;
	}
	#footer a{
		font-size : calc( 18 * 100vw / 750 );
		line-height : calc( 34 * 100vw / 750 );
	}
}
@media(min-width: 1000px){
	#footer .wrap{
		height : 100px;
		padding-top : 40px;
	}
	#footer li:before{
		padding-right : 1.5em;
		padding-left : 1.5em;
	}
	#footer a{
		font-size : 18px;
		line-height : 34px;
	}
}