@charset "UTF-8";

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

@media screen and (max-width: 750px){
	html{
		font-size : calc( 10 * 100vw / 750 );
	}
}

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

@media screen and (max-width: 750px){
	body{
		font-size : 2.4rem;
	}
}

@media print,screen and (min-width: 751px){
	body{
		font-size : 1.6rem;
		min-width : 1200px;
	}
}

/*--------------------------------------------
--WRAPPER
---------------------------------------------*/

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

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

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

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

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

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

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

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

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

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

[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: 750px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

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

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

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

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

#header{
	height : 155px;
}

#header .logos{
	display : grid;
	justify-content : start;
}

@media screen and (max-width: 750px){
	#header{
		height : calc( 100 * 100vw / 750 );
	}
	#header .logos{
		padding-top : calc( 16 * 100vw / 750 );
		align-items : end;
		grid-template-columns : calc( 498 * 100% / 750 ) auto;
		column-gap : calc( 14 * 100% / 750 );
	}
	#header .logos a , #header .logos h1{
		padding-left : calc( 10 * 100% / 498 );
	}
	#header .logos span{
		font-size : 1.6rem;
		line-height : 1.12;
	}
	#header .logos span{
		text-align : center;
	}
}

@media print,screen and (min-width: 751px){
	#header{
		padding-left : calc( ( 100% - 1200px ) / 2 );
		padding-right : calc( ( 100% - 1200px ) / 2 );
	}
	#header .logos{
		padding-top : 20px;
		padding-left : 2px;
		align-items : start;
		grid-template-columns : 402px auto;
		column-gap : 392px;
	}
	#header .logos span{
		padding-top : 3px;
		font-size : 1.6rem;
		color : #4c4b4b;
        padding-right: 1em;
	}
}

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

@media screen and (max-width: 750px){
	#menuBtn{
		z-index : 11;
		top : 0;
		right : 0;
		width : calc( 100 * 100% / 750 );
		height : calc( 100 * 100vw / 750 );
		padding-left : calc( 18 * 100% / 750 );
		padding-right : calc( 18 * 100% / 750 );
		padding-top : calc( 38 * 100vw / 750 );
		padding-bottom : calc( 38 * 100vw / 750 );
		position : fixed;
		background-color : #fff;
	}
	#menuBtn > span:nth-of-type(1){
		width : 100%;
		height : 100%;
		position : relative;
		display : block;
		font-size : 0;
	}
	#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(2){
		bottom : 0;
	}
	#menuBtn span span{
		background-color : var(--primary);
		height : calc( 4 * 100vw / 750 );
	}
}

body.is-open{
	overflow : hidden;
}

body.is-open #nav{
	max-height : 100vh;
	max-height : 100svh;
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
	transform : rotate(-45deg);
	top : 50%;
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
	transform : rotate(45deg);
	top : 50%;
}

@media screen and (max-width: 750px){
	body.is-open #menuBtn{
		background-color : transparent;
	}
	body.is-open #menuBtn span span{
		background-color : #fff;
	}
}

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

@media screen and (max-width: 750px){
	#nav{
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		height : 100vh;
		height : 100svh;
		top : 0;
		background-color : var(--primary);
	}
	#nav .scroll{
		padding-top : calc(124 * 100vw / 750 );
		padding-bottom : calc( 124 * 100vw / 750 );
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 30 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#nav{
		margin-top : 15px;
	}
}

#navGlobalSp li + li{
	border-top : calc( 2 * 100vw / 750 ) solid #fff;
}

#navGlobalSp a{
	color : #fff;
	display : grid;
	place-items : center left;
	grid-template-rows : calc( 100 * 100vw / 750 );
	font-size : 3rem;
	position : relative;
	padding-left : calc( 90 * 100% / 690 );
}

#navGlobalSp a:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-size : contain;
	background-position : 0 0;
	position : absolute;
	top : 50%;
	transform : translateY(-50%);
}

#navGlobalSp li:nth-child(1) a:before{
	width : calc( 37 * 100% / 690 );
	left : calc( 11 * 100% / 690 );
	background-image : url("../images/ui/icon/home.svg");
	height : calc( 41 * 100vw / 750 );
}

#navGlobalSp li:nth-child(2) a:before{
	width : calc( 41 * 100% / 690 );
	left : calc( 14 * 100% / 690 );
	background-image : url("../images/ui/icon/search.svg");
	height : calc( 41 * 100vw / 750 );
}

#navGlobalSp li:nth-child(3) a:before{
	width : calc( 34 * 100% / 690 );
	left : calc( 18 * 100% / 690 );
	background-image : url("../images/ui/icon/flag.svg");
	height : calc( 39 * 100vw / 750 );
}

#navGlobalSp li:nth-child(4) a:before{
	width : calc( 49 * 100% / 690 );
	left : calc( 10 * 100% / 690 );
	background-image : url("../images/ui/icon/book.svg");
	height : calc( 37 * 100vw / 750 );
}

@media print,screen and (min-width: 751px){
	#navGlobalPc{
		position : relative;
		height : 60px;
		border-image-source : linear-gradient(#084671,#084671);
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
		padding-top : 6px;
		padding-bottom : 8px;
		display : grid;
		grid-template-columns : repeat(4, auto) 180px 10px;
	}
	#navGlobalPc a{
		width : 100%;
		font-size : 1.8rem;
		display : grid;
	}
	#navGlobalPc li:not(:last-child) a{
		color : #fff;
		height : 100%;
		justify-content : center;
		align-items : center;
		grid-auto-flow : column;
		grid-template-columns : auto auto;
	}
	#navGlobalPc li:not(:last-child) a:before{
		content : "";
		display : block;
		background-repeat : no-repeat;
		background-size : contain;
		background-position : 0 0;
		font-size : 0;
	}
	#navGlobalPc li + li:not(:last-child){
		border-left : 1px solid #fff;
	}
	#navGlobalPc li:nth-child(1) a{
		column-gap : 10px;
	}
	#navGlobalPc li:nth-child(1) a:before{
		background-image : url("../images/ui/icon/home.svg");
		width : 26px;
		height : 30px;
	}
	#navGlobalPc li:nth-child(2) a{
		column-gap : 6px;
	}
	#navGlobalPc li:nth-child(2) a:before{
		background-image : url("../images/ui/icon/search.svg");
		width : 30px;
		height : 30px;
	}
	#navGlobalPc li:nth-child(3) a{
		column-gap : 7px;
	}
	#navGlobalPc li:nth-child(3) a:before{
		background-image : url("../images/ui/icon/flag.svg");
		width : 25px;
		height : 28px;
	}
	#navGlobalPc li:nth-child(4) a{
		column-gap : 7px;
	}
	#navGlobalPc li:nth-child(4) a:before{
		background-image : url("../images/ui/icon/book.svg");
		width : 36px;
		height : 26px;
	}
	#navGlobalPc li:last-child{
		padding-top : 3px;
	}
	#navGlobalPc li:last-child a{
		background-color : #fff;
		height : 40px;
		color : #084671;
		font-weight : 700;
		position : relative;
		overflow : hidden;
		padding-left : 51px;
		place-items : center start;
	}
	#navGlobalPc li:last-child a:before{
		content : "";
		display : block;
		position : absolute;
		background : url("../images/ui/icon/person.svg") 0 0 / contain no-repeat;
		width : 50px;
		height : 50px;
		top : -6px;
		left : -9px;
	}
}

@media screen and (max-width: 750px){
	#navSigns{
		margin-top : calc( 20 * 100vw / 750 );
		display : grid;
		grid-template-columns : repeat(2,50%);
		grid-template-rows : calc( 80 * 100vw / 750 );
	}
	#navSigns a{
		position : relative;
		overflow : hidden;
		font-size : 3rem;
		display : grid;
		place-items : center;
		font-weight : 700;
		height : 100%;
		width : 100%;
	}
	#navSigns li:nth-child(1) a{
		background-color : #fff;
		color : var(--primary);
	}
	#navSigns li:nth-child(1) a:before{
		content : "";
		display : block;
		position : absolute;
		background : url("../images/ui/icon/person.svg") 0 0 / contain no-repeat;
		width : calc( 86 * 100% / 345 );
		height : calc( 86 * 100vw / 750 );
		top : calc( -3 * 100vw / 750 );
		left : calc( -13 * 100% / 345 );
	}
	#navSigns li:nth-child(2) a{
		background-color : #daac0a;
		color : #fff;
	}
}

@media print,screen and (min-width: 751px){
	#nav .signup{
		display : grid;
		place-items : center;
		width : 180px;
		height : 60px;
		background-color : #daac0a;
		color : #fff;
		font-weight : 700;
		font-size : 1.8rem;
		position : absolute;
		top : 15px;
		left : calc( 50% + 410px );
	}
}

#navSubSp{
	margin-top : calc( 68 * 100vw / 750 );
}

#navSubSp li + li{
	margin-top : calc( 52 * 100vw / 750 );
}

#navSubSp a{
	display : block;
	color : #fff;
	font-size : 3rem;
}

@media print,screen and (min-width: 751px){
	#navSubPc{
		display : grid;
		grid-auto-flow : column;
		position : absolute;
		left : calc( 50% - 180px );
		justify-content : flex-end;
		top : 53px;
		width : 572px;
	}
	#navSubPc li + li:before{
		content : " ｜ ";
		white-space : pre;
	}
	#navSubPc li{
		font-size : 1.6rem;
	}
	#navSubPc li , #navSubPc a{
		color : #4c4b4b;
	}
}

@media screen and (max-width: 750px){
	#btnClose{
		margin-top : calc( 84 * 100vw / 750 );
		margin-top : calc( 52 * 100vw / 750 );
		width : -moz-fit-content;
		width :      fit-content;
		margin-left : auto;
		margin-right : auto;
		display : block;
	}
	#btnClose img{
		height : calc( 49 * 100vw / 750 );
	}
}

/*--------------------------------------------
COLUMNS
---------------------------------------------*/

@media print,screen and (min-width: 751px){
	#columns{
		display : grid;
		justify-content : space-between;
		grid-template-columns : 880px 280px;
	}
}