@charset "UTF-8";

/*--------------------------------------------
ROOT
---------------------------------------------*/

@media screen and (max-width: 768px){
	html , html.fz-m{
		font-size : calc( 10 * 100vw / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	html , html.fz-m{
		font-size : calc( 10 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	html , html.fz-m{
		font-size : 10px;
	}
}

@media screen and (max-width: 768px){
	html.fz-s{
		font-size : calc( 8 * 100vw / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	html.fz-s{
		font-size : calc( 8 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	html.fz-s{
		font-size : 8px;
	}
}

@media screen and (max-width: 768px){
	html.fz-l{
		font-size : calc( 12 * 100vw / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	html.fz-l{
		font-size : calc( 12 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	html.fz-l{
		font-size : 12px;
	}
}

body{
	background-color : var(--bg01);
}

@media screen and (max-width: 768px){
	body{
		padding-top : calc( 100 * 100vw / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	body.is-fixed{
		padding-top : calc( 64 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	body.is-fixed{
		padding-top : 64px;
	}
}

/*--------------------------------------------
WRAP
---------------------------------------------*/

@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	.wrap{
		padding-left : calc( 20 * 100% / 1280 );
		padding-left : calc( 20 * 100% / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	.wrap{
		padding-left : calc( ( 100% - 1240px ) / 2 );
		padding-right : calc( ( 100% - 1240px ) / 2 );
	}
}

@media screen and (max-width: 768px){
	.wrap-sp{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	.wrap-pc{
		padding-left : calc( 20 * 100% / 1280 );
		padding-left : calc( 20 * 100% / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	.wrap-pc{
		padding-left : calc( ( 100% - 1260px ) / 2 );
		padding-right : calc( ( 100% - 1260px ) / 2 );
	}
}

/*--------------------------------------------
--STATE
---------------------------------------------*/

@media screen and (max-width: 768px){
	.is-pc{
		display : none;
	}
}

@media print,screen and (min-width: 769px){
	.is-sp{
		display : none;
	}
}

/*--------------------------------------------
COMMON
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}

[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}

[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}

[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}

@media screen and (max-width: 768px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
	[data-sp-before]:before{
		content : attr( data-sp-before );
		white-space : pre;
	}
}

@media print,screen and (min-width: 769px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
	[data-pc-before]:before{
		content : attr( data-pc-before );
		white-space : pre;
	}
}

/*--------------------------------------------
FULL IMAGE
---------------------------------------------*/

.full{
	width : 100%;
	height : auto;
}

.full img{
	width : 100%;
	height : auto;
}

/*--------------------------------------------
HEADER AUTH
---------------------------------------------*/

#headerAuth ul{
	display : grid;
	justify-content : end;
	align-items : center;
	grid-template-columns : repeat( 2 , auto );
}

#headerAuth a{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	text-align : center;
}

#headerAuth span{
	font-weight : 500;
}

@media screen and (max-width: 768px){
	#headerAuth ul{
		position : fixed;
		top : 0;
		right : calc( 100 * 100% / 768 );
		z-index : 11;
		height : calc( 100 * 100vw / 768 );
		column-gap : calc( 20 * 100vw / 768 );
	}
	#headerAuth img{
		height : calc( 28 * 100vw / 768 );
	}
	#headerAuth span{
		margin-top : calc( 2 * 100vw / 768 );
		font-size : 2rem;
	}
}

@media print,screen and (min-width: 769px){
	#headerAuth{
		background-color : var(--bg02);
	}
	#headerAuth span{
		font-size : 1.6rem;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#headerAuth ul{
		height : calc( 56 * 100vw / 1280 );
		column-gap : calc( 20 * 100% / 1240 );
	}
	#headerAuth img{
		height : calc( 20 * 100vw / 1280 );
	}
	#headerAuth span{
		margin-top : calc( 2 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#headerAuth{
		padding-left : 20px;
		padding-right : 20px;
	}
	#headerAuth ul{
		height : 56px;
		column-gap : 20px;
	}
	#headerAuth img{
		height : 20px;
	}
	#headerAuth span{
		margin-top : 2px;
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

#header{
	background-color : var(--bg01);
	will-change : box-shadow;
	transition : box-shadow .3s ease-in;
}

#header h1 a{
	display : block;
}

@media screen and (max-width: 768px){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
		height : calc( 100 * 100vw / 768 );
	}
	#header h1 , #header h1 a{
		height : 100%;
	}
	#header h1 a{
		display : inline-flex;
		align-items : center;
	}
	#header h1 img{
		height : calc( 40 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#header{
		display : grid;
		align-items : center;
		justify-content : space-between;
		grid-auto-flow : column;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#header{
		padding-top : calc( 12 * 100vw / 1280 );
		padding-bottom : calc( 12 * 100vw / 1280 );
		grid-template-columns : auto 1fr;
		column-gap : calc( 16 * 100% / 1240 );
	}
	#header h1 img{
		height : calc( 28 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#header{
		grid-template-columns : repeat(2,auto);
		padding-left : 20px;
		padding-right : 20px;
		padding-top : 12px;
		padding-bottom : 12px;
	}
	#header h1 img{
		height : 28px;
	}
}

@media print,screen and (min-width: 769px){
	body.is-fixed #header{
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		z-index : 10;
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 768px){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #nav{
		max-height : 100vh;
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
		transform : rotate(-45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		transform : rotate(45deg);
	}
	body.is-open #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
	}
}

#menuBtn{
	z-index : 12;
	overflow : hidden;
}

#menuBtn span{
	font-size : 0;
}

#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}

#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}

#menuBtn span span:nth-of-type(1){
	top : 0;
}

#menuBtn span span:nth-of-type(4){
	bottom : 0;
}

@media screen and (max-width: 768px){
	#menuBtn{
		position : absolute;
		right : calc( 24 * 100% / 768 );
		top : 50%;
		transform : translateY(-50%);
		width : calc( 60 * 100% / 768 );
		height : calc( 56 * 100vw / 768 );
		z-index : 10;
	}
	#menuBtn > span:nth-of-type(1){
		height : calc( 36 * 100vw / 768 );
	}
	#menuBtn span span{
		background-color : var(--bg03);
		height : calc( 6 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 15 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(2){
		font-size : calc( 20 * 100vw / 768 );
		white-space : nowrap;
		letter-spacing : -.1em;
		height : calc( 20 * 100vw / 768 );
		font-weight : 500;
		color : var(--body);
	}
}

/*--------------------------------------------
NAV
---------------------------------------------*/

@media screen and (max-width: 768px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		top : calc( 100 * 100vw / 768 );
		background-color : rgba(239, 235, 227,.9);
		height : calc( 100vh - ( 100 * 100vw / 768 ) );
	}
	#nav .scroll{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		padding-top : calc( 32 * 100vw / 768 );
		padding-bottom : calc( 32 * 100vw / 768 );
	}
}

/*--------------------------------------------
GROBAL NAV
---------------------------------------------*/

#grobalNav a{
	font-weight : 500;
}

@media screen and (max-width: 768px){
	#grobalNav{
		padding-top : calc( 48 * 100vw / 768 );
	}
	#grobalNav li:not(:last-child){
		border-bottom : 1px solid #fff;
	}
	#grobalNav a{
		font-size : 3.6rem;
		padding-top : calc( 48 * 100vw / 768 );
		padding-bottom : calc( 48 * 100vw / 768 );
		width : 100%;
		text-align : center;
		display : block;
	}
}

@media print,screen and (min-width: 769px){
	#grobalNav{
		display : grid;
		align-items : center;
		grid-auto-flow : column;
	}
	#grobalNav a{
		font-size : 2rem;
		padding-top : .375em;
		padding-bottom : .375em;
		display : block;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#grobalNav{
		grid-template-columns : repeat( auto-fit , 1fr );
	}
}

@media print,screen and (min-width: 1280px){
	#grobalNav a{
		padding-left : 1em;
		padding-right : 1em;
	}
}

/*--------------------------------------------
FONTSIZE CONTROLLER
---------------------------------------------*/

#fzController{
	display : grid;
	grid-auto-flow : column;
}

#fzController p{
	font-weight : 500;
}

#fzController ul{
	display : grid;
	align-items : end;
	grid-auto-flow : column;
}

#fzController button{
	border-radius : 50%;
	background-color : var(--bg03);
	will-change : background-color;
	transition : background-color .3s ease-in;
	color : #fff;
}

#fzController button.is-select , #fzController button:hover{
	background-color : #d6562f;
}

@media screen and (max-width: 768px){
	#fzController{
		align-items : center;
		justify-content : center;
		margin-top : calc( 24 * 100vw / 768 );
		column-gap : calc( 24 * 100% / 720 );
	}
	#fzController p{
		font-size : 2.8rem;
	}
	#fzController ul{
		column-gap : calc( 12 * 100vw / 768 );
	}
	#fzController button{
		width : calc( 64 * 100vw / 768 );
		height : calc( 64 * 100vw / 768 );
		font-size : 3.2rem;
	}
}

@media print,screen and (min-width: 769px){
	#fzController{
		align-items : end;
		position : absolute;
	}
	#fzController p{
		font-size : 1.6rem;
	}
	#fzController button{
		font-size : 1.6rem;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#fzController{
		height : calc( 56 * 100vw / 1280 );
		padding-bottom : calc( 8 * 100vw / 1280 );
		top : 0;
		right : calc( 236 * 100% / 1280 );
		column-gap : calc( 12 * 100vw / 1280 );
	}
	#fzController ul{
		column-gap : calc( 8 * 100vw / 1280 );
	}
	#fzController button{
		width : calc( 32 * 100vw / 1280 );
		height : calc( 32 * 100vw / 1280 );
	}
}

@media print,screen and (min-width: 1280px){
	#fzController{
		height : 56px;
		padding-bottom : 8px;
		top : 0;
		right : 236px;
		column-gap : 12px;
	}
	#fzController ul{
		column-gap : 8px;
	}
	#fzController button{
		width : 32px;
		height : 32px;
	}
}

@media print,screen and (min-width: 769px){
	body.is-fixed #fzController{
		display : none;
	}
}