@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
}
.wrap{
	max-width : 1400px;
	margin-left : auto;
	margin-right : auto;
}
@media(max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/
body.is-open{
	overflow : hidden;
}
@media(max-width: 768px){
	body.is-open #header nav{
		max-height : 100vh;
	}
}
body.is-open #header #menuBtn span:nth-of-type(1){
	-webkit-transform : translateY( calc( 20 * 100vw / 768 ) ) scale(0);
	        transform : translateY( calc( 20 * 100vw / 768 ) ) scale(0);
}
body.is-open #header #menuBtn span:nth-of-type(2){
	-webkit-transform : rotate(-45deg);
	        transform : rotate(-45deg);
}
body.is-open #header #menuBtn span:nth-of-type(3){
	-webkit-transform : rotate(45deg);
	        transform : rotate(45deg);
}
body.is-open #header #menuBtn span:nth-of-type(4){
	-webkit-transform : translateY( calc( -20 * 100vw / 768 ) ) scale(0);
	        transform : translateY( calc( -20 * 100vw / 768 ) ) scale(0);
}
#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
}
#header h1 a{
	display : block;
}
#header nav li:nth-child( -n + 3 ) a{
	font-family : Meiryo , "メイリオ" , "Noto Sans JP", sans-serif;;
}
@media(max-width: 768px){
	#header{
		background-color : #fff;
	}
	#header .wrap{
		height : calc( 120 * 100vw / 768 );
		position : relative;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#header h1{
		width : calc( 250 * 100% / 720 );
	}
	#header #menuBtn{
		position : absolute;
		top : 50%;
		-webkit-transform : translateY( -50% );
		        transform : translateY( -50% );
		right : calc( 24 * 100% / 768 );
		width : calc( 80 * 100% / 768 );
		height : calc( 48 * 100vw / 768 );
	}
	#header #menuBtn > div{
		width : 100%;
		height : 100%;
		position : relative;
	}
	#header #menuBtn span{
		width : 100%;
		height : calc( 8 * 100vw / 768 );
		background-color : #666;
		display : block;
		position : absolute;
		left : 0;
		-webkit-transition : all .4s;
		        transition : all .4s;
	}
	#header #menuBtn span:nth-of-type(1){
		top : 0;
	}
	#header #menuBtn span:nth-of-type(2){
		top : calc( 20 * 100vw / 768 );
	}
	#header #menuBtn span:nth-of-type(3){
		top : calc( 20 * 100vw / 768 );
	}
	#header #menuBtn span:nth-of-type(4){
		bottom : 0;
	}
	#header nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		-webkit-transition : max-height .5s ease-in;
		        transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 120 * 100vw / 768 );
		background-color : rgba( 204 , 204 , 204 , .95 );
		height : calc( 100% - calc( 120 * 100vw / 768 ) );
	}
	#header .scroll{
		padding : calc( 40 * 100vw / 768 ) calc( 64 * 100% / 768 ) calc( 89 * 100vw / 768 );
	}
	#header li:nth-child( -n + 3 ) a{
		padding-top : calc( 50 * 100vw / 768 );
		padding-bottom : calc( 42 * 100vw / 768 );
		display : block;
		text-align : center;
	}
	#header li:nth-child( -n + 3 ):not(:first-child){
		border-top : calc( 2 * 100vw / 768 ) solid #666;
	}
	#header a{
		font-size : calc( 30 * 100vw / 768 );
		padding-top : calc( 32 * 100vw / 768 );
		padding-bottom : calc( 32 * 100vw / 768 );
	}
	#header li:nth-child( n + 4){
		margin-top : calc( 14 * 100vw / 768 );
		width : 100%;
		height : calc( 100 * 100vw / 768 );
	}
	#header li:nth-child( n + 4 ) a{
		border-radius : calc( 50 * 100vw / 768 );
		width : 100%;
		height : 100%;
	}
	#header #closeBtn{
		display : block;
		width : calc( 66 * 100% / 640 );
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 58 * 100vw / 768 );
	}
}
@media(min-width: 769px) and (max-width:1399px){
	#header{
		background-color : rgba( 255,255,255,.9 );
		-webkit-box-shadow : 0 calc( 3 * 100vw / 1400 ) calc( 3 * 100vw / 1400 ) rgba(51,51,51,.5);
		        box-shadow : 0 calc( 3 * 100vw / 1400 ) calc( 3 * 100vw / 1400 ) rgba(51,51,51,.5);
	}
	#header .wrap{
		height : calc( 119 * 100vw / 1400 );
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
		padding-left : calc( 51 * 100% / 1400 );
		padding-right : calc( 17 * 100% / 1400 );
	}
	#header h1{
		width : calc( 183 * 100% / 1332 );
	}
	#header nav ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	#header nav 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;
		padding-left : calc( 36 * 100vw / 1400 );
		padding-right : calc( 36 * 100vw / 1400 );
		height : calc( 48 * 100vw / 1400 );
		border-radius : calc( 25 * 100vw / 1400 );
		font-size : calc( 16 * 100vw / 1400 );
	}
	#header nav li{
		margin-left : calc( 4 * 100vw / 1400 );
		margin-right : calc( 4 * 100vw / 1400 );
	}
	#header nav li:nth-child( -n + 3 ) a{
		letter-spacing : .04em;
	}
}
@media(min-width: 1400px){
	#header{
		background-color : rgba( 255,255,255,.9 );
		-webkit-box-shadow : 0 3px 3px rgba(51,51,51,.5);
		        box-shadow : 0 3px 3px rgba(51,51,51,.5);
	}
	#header .wrap{
		height : 119px;
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
		padding-left : 51px;
		padding-right : 17px;
	}
	#header h1{
		width : 183px;
	}
	#header nav ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : justify;
		-ms-flex-pack : justify;
		justify-content : space-between;
	}
	#header nav 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;
		padding-left : 36px;
		padding-right : 36px;
		height : 48px;
		border-radius : 25px;
		font-size : 16px;
	}
	#header nav li{
		margin-left : 4px;
		margin-right : 4px;
	}
	#header nav li:nth-child( -n + 3 ) a{
		letter-spacing : .04em;
	}
}
@media(min-width: 1400px){
	.pc #header .tapHover:hover ul{
		max-height : 109px;
	}
}
/*--------------------------------------------
FOOTER
---------------------------------------------*/
#toTop{
	position : fixed;
}
#toTop.is-absolute{
	position : absolute;
}
@media(max-width: 768px){
	#toTop.is-absolute{
		margin-bottom : calc( 5 * 100vw / 768 );
	}
}
@media(min-width: 769px) and (max-width:1399px){
	#toTop.is-absolute{
		margin-bottom : calc( 15 * 100vw / 768 );
	}
}
@media(min-width: 1400px){
	#toTop.is-absolute{
		margin-bottom : 15px;
	}
}
@media(max-width: 768px){
	#toTop{
		width : calc( 60 * 100% / 768 );
		height : calc( 60 * 100vw / 768 );
		bottom : 0;
		right : calc( 5 * 100% / 768 );
	}
}
@media(min-width: 769px) and (max-width:1399px){
	#toTop{
		width : calc( 60 * 100% / 1400 );
		height : calc( 60 * 100vw / 1400 );
		position : fixed;
		bottom : calc( 15 * 100vw / 1400 );
		right : calc( 17 * 100% / 1400 );
	}
}
@media(min-width: 1400px){
	#toTop{
		width : 60px;
		height : 60px;
		position : fixed;
		bottom : 15px;
		right : 17px;
	}
}
#footer{
	background-color : #626262;
	color : #fff;
	position : relative;
}
#footer a{
	color : #fff;
}
#footer p{
	text-align : center;
	line-height : 1.2;
	height : 1em;
}
@media(max-width: 768px){
	#footer .wrap{
		padding-top : calc( ( 46 - 4.4 ) * 100vw / 768 );
		padding-bottom : calc( ( 75 - 4.4 ) * 100vw / 768 );
	}
	#footer ul li{
		text-align : center;
		padding: 15px;
		line-height : 1.5;
		font-size : calc( 24 * 100vw / 768 );
	}
	#footer p{
		font-size : calc( 24 * 100vw / 768 );
		margin-top : calc( 32.8 * 100vw / 768 );
	}
}
@media(min-width: 769px) and (max-width:1399px){
	#footer .wrap{
		padding-top : calc( 58 * 100vw / 1400 );
		padding-bottom : calc( 28 * 100vw / 1400 );
	}
	#footer ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#footer li + li:before{
		content : "｜";
	}
	#footer .wrap a{
		font-size : calc( 14 * 100vw / 1400 );
		padding-left : 2em;
		padding-right : 2em;
	}
	#footer p{
		font-size : calc( 10 * 100vw / 1400 );
		margin-top : calc( 37 * 100vw / 1400 );
	}
}
@media(min-width: 1400px){
	#footer .wrap{
		padding-top : 58px;
		padding-bottom : 28px;
	}
	#footer ul{
		display : -webkit-box;
		display : -ms-flexbox;
		display : flex;
		-webkit-box-pack : center;
		-ms-flex-pack : center;
		justify-content : center;
		-webkit-box-align : center;
		-ms-flex-align : center;
		align-items : center;
	}
	#footer li + li:before{
		content : "｜";
	}
	#footer .wrap a{
		font-size : 14px;
		padding-left : 2em;
		padding-right : 2em;
	}
	#footer p{
		font-size : 10px;
		margin-top : 37px;
	}
}