@charset "UTF-8";

:root{
	--body : #323232;
	--link : #323232;
	--primary : #c80023;
}

/*--------------------------------------------
HTML
---------------------------------------------*/

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

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

/*--------------------------------------------
BODY
---------------------------------------------*/

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

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

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

.wrap{
	margin-left : auto;
	margin-right : auto;
}

.wrap.fluid{
	padding-left : 0;
	padding-right : 0;
}

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

@media print,screen and (min-width: 769px){
	.wrap{
		min-width : 1040px;
	}
}

@media screen and (min-width: 769px) and (max-width: 1479.98px){
	.wrap{
		padding-left : calc( 20 * 100% / 1480 );
		padding-right : calc( 20 * 100% / 1480 );
	}
	.wrap.fluid{
		padding-left : 0;
		padding-right : 0;
	}
}

@media screen and (min-width: 1480px){
	.wrap{
		padding-left : calc( ( 100% - 1440px ) / 2 );
		padding-right : calc( ( 100% - 1440px ) / 2 );
	}
	.wrap.fluid{
		padding-left : calc( ( 100% - 1480px ) / 2 );
		padding-right : calc( ( 100% - 1480px ) / 2 );
	}
}

@media print,screen and (min-width: 1480px) and (-ms-high-contrast:none){
	.wrap{
		padding-left : calc( ( 100% - 1440.01px ) / 2 );
		padding-right : calc( ( 100% - 1440.01px ) / 2 );
	}
}

/*--------------------------------------------
ROW
---------------------------------------------*/

@media print,screen and (min-width: 769px){
	.row{
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		flex-wrap : wrap;
	}
	.row.align-center{
		align-items : center;
	}
}

@media screen and (min-width: 769px) and (max-width: 1079.98px){
	.row.col6-6 > *{
		width : 100%;
	}
	.row.col6-6 > * + *{
		margin-top : 36px;
	}
	.row.col9-3 > *:first-child{
		width : 100%;
	}
	.row.col9-3 > *:last-child{
		width : 360px;
	}
}

@media screen and (min-width: 1080px){
	.row.col6-6 > *{
		width : calc( 50% - 30px );
	}
	.row.col9-3 > *:first-child{
		width : calc( 100% * 9 / 12 );
		padding-right : 60px;
	}
	.row.col9-3 > *:last-child{
		width : calc( 100% * 3 / 12 );
	}
}

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

#header{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	z-index : 10;
}

@media screen and (max-width: 768px){
	#header{
        background: #000;
		height : calc( 190 * 100vw / 768 );
		padding-left : calc( 18 * 100% / 768 );
		padding-right : 0;
	}
	#header .logo{
		margin-top : calc( 12 * 100vw / 768 );
		display : block;
		position : relative;
		z-index : 11;
	}
	#header .logo img{
		height : calc( 165 * 100vw / 768 );
	}
	#header #btnClose{
		display : table;
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 233 * 100vw / 768 );
	}
	#header #btnClose img{
		height : calc( 85 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#header{
		display : -ms-grid;
		display :     grid;
		-ms-grid-columns : auto 1fr auto;
		grid-template-columns : auto 1fr auto;
		grid-temaplate-rows : auto;
		min-width : 1080px;
		-ms-grid-columns : auto 1fr auto;
		grid-template-columns : auto 1fr auto;
	}
	#header .logo{
		-ms-grid-row : 1;
		-ms-grid-row-span : 1;
		    grid-row : 1/2;
		-ms-grid-column : 1;
		-ms-grid-column-span : 1;
		    grid-column : 1/2;
	}
	#header #nav{
		-ms-grid-row : 1;
		-ms-grid-row-span : 1;
		    grid-row : 1/2;
		-ms-grid-column : 3;
		-ms-grid-column-span : 1;
		    grid-column : 3/4;
	}
}

@media print , screen and (min-width: 769px) and (max-width: 1479.98px){
	#header{
		height : calc( 168 * 100vw / 1480 );
        background-color: #000;
	}
	#header .logo{
		padding-top : calc( 32 * 100vw / 1480 );
	}
	#header .logo img{
		height : calc( 104 * 100vw / 1480 );
	}
}

@media screen and (min-width: 1480px){
	#header{
		height : 168px;
        background: #000;
	}
	#header .logo{
		padding-top : 32px;
	}
	#header .logo img{
		height : 104px;
	}
}

#header.is-scroll{
	background-color : #000;
	transition : background-color .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : background-color;
}

@media screen and (max-width: 768px){
	body.is-open #header{
		transition : background-color .1s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : background-color;
		border-bottom : 1px solid #fff;
		background-color : rgba(0,0,0,.9);
	}
}

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

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

@media screen and (max-width: 768px) and (-ms-high-contrast:none){
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
		transform : translateY( 10px ) scale(0);
		opacity : 0;
	}
	body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
		transform : translateY( -10px ) scale(0);
		opacity : 0;
	}
}

@media screen and (max-width: 768px){
	#menuBtn{
		width : calc( 76 * 100% / 768 );
		height : calc( 78 * 100vw / 768 );
		left : calc( 665 * 100% / 768 );
		top : calc( 56 * 100vw / 768 );
		padding-bottom : calc( 40 * 100vw / 768 );
		z-index : 11;
		position : absolute;
	}
	#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;
	}
	#menuBtn span span{
		background-color : #fff;
		height : calc( 2 * 100vw / 768 );
	}
	#menuBtn span span:nth-of-type(2) , #menuBtn span span:nth-of-type(3){
		top : calc( 18 * 100vw / 768 );
	}
	#menuBtn .montserrat{
		text-align : center;
		color : #fff;
		position : absolute;
		bottom : 0;
		left : 0;
		width : 100%;
		font-weight : 600;
		font-size : 2.4rem;
		transition : font-size .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : font-size;
	}
	#menuBtn .montserrat:after{
		content : "CLOSE";
		position : absolute;
		bottom : 0;
		left : 50%;
		transform : translateX(-50%);
		font-size : 0;
		transition : font-size .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : font-size;
	}
}

body.is-open #menuBtn .montserrat{
	font-size : 0;
}

body.is-open #menuBtn .montserrat:after{
	font-size : 2.5rem;
}

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

@media screen and (max-width: 768px){
	#nav{
		background-color : rgba(0,0,0,.9);
		top : calc( 190 * 100vw / 768 );
		height : calc( 100vh - ( 190 * 100vw / 768 ) );
		position : fixed;
		left : 0;
		width : 100%;
		z-index : 10;
		transition : max-height .5s ease-in;
		max-height : 0;
		overflow : hidden;
		overflow-y : scroll;
		transition : max-height .4s ease-in .01s;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : max-height;
	}
	#nav .scroll{
		padding-bottom : calc( 288 * 100vw / 768 );
	}
	body.is-open #nav{
		transition : max-height .4s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : max-height;
	}
}

@media print,screen and (min-width: 769px){
	#nav .scroll{
		height : 100%;
	}
}

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

#navGlobal li:not(:last-child) a{
	font-family : "Cormorant Garamond", serif;
	font-weight : 600;
}

#navGlobal a{
	color : #fff;
}

@media screen and (max-width: 768px){
	#navGlobal{
		border-bottom : 1px solid #fff;
	}
	#navGlobal li:not(.search) + li{
		border-top : 1px solid #fff;
	}
	#navGlobal li:not(.search) a{
		font-weight : 600;
		text-align : center;
		letter-spacing : .4em;
		text-indent : .4em;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		font-size : 4.4rem;
		height : calc( 105 * 100vw / 768 );
	}
	#navGlobal .search{
		display : none;
	}
}

@media print,screen and (min-width: 769px){
	#navGlobal{
		display : flex;
		align-items : flex-start;
	}
	#navGlobal a{
		display : block;
	}
	#navGlobal li:not(.search) a{
		font-weight : 700;
		text-shadow : 2px 2px 2px #000;
		font-size : 1.75rem;
		letter-spacing : .1em;
		position : relative;
	}
	#navGlobal li:not(.search) a:after{
		content : "";
		display : block;
		width : 100%;
		height : 1px;
		position : absolute;
		left : 0;
		bottom : 0;
		pointer-events : none;
		transition : background-color .3s ease-in;
		-webkit-backface-visibility : hidden;
		        backface-visibility : hidden;
		will-change : background-color;
	}
	#navGlobal li:not(.search) a.is-current:after , #navGlobal li:not(.search) a:hover:after{
		background-color : #fff;
	}
	#navGlobal li.search{
		text-indent : -100vw;
		font-size : 0;
	}
	#navGlobal li.search a{
		background : url("../images/ui/icon/search.png") 0 top / contain no-repeat;
	}
}

@media screen and (min-width: 769px) and (max-width: 1479.98px){
	#navGlobal{
		margin-top : calc( 64 * 100vw / 1480 );
	}
	#navGlobal li:not(.search) + li{
		margin-left : calc( 6 * 100vw / 1480 );
	}
	#navGlobal li:not(.search) a{
		padding-top : calc( 12 * 100vw / 1480 );
		padding-bottom : calc( 12 * 100vw / 1480 );
		padding-left : calc( 12 * 100vw / 1480 );
		padding-right : calc( 12 * 100vw / 1480 );
	}
	#navGlobal li.search{
		margin-top : calc( 8 * 100vw / 1480 );
	}

	#navGlobal li.search a{
		width : calc( 34 * 100vw / 1480 );
		height : calc( 35 * 100vw / 1480 );
	}
}

@media screen and (min-width: 1480px){
	#navGlobal{
		margin-top : 64px;
	}
	#navGlobal li:not(.search) + li{
		margin-left : 6px;
	}
	#navGlobal li:not(.search) a{
		padding-top : 12px;
		padding-bottom : 12px;
		padding-left : 12px;
		padding-right : 12px;
	}
	#navGlobal li.search{
		margin-top : 8px;
	}
	#navGlobal li.search a{
		width : 34px;
		height : 35px;
	}
}

/*--------------------------------------------
MAIN
---------------------------------------------*/

#main{
	position : relative;
	overflow : hidden;
}
@media screen and (min-width: 1480px){
    #main{
        padding-top: 160px;
    }
}

/*--------------------------------------------
PICTURE
---------------------------------------------*/

#picture{
	overflow : hidden;
}

#picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#picture{
	width : 100%;
	height : 100%;
}

@media screen and (max-width: 768px){
	#picture{
		height : calc( 741 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#picture{
		height : 545px;
	}
}

/*--------------------------------------------
TAG
---------------------------------------------*/

#tag{
	position : absolute;
	color : #e8e8e8;
	letter-spacing : -.01em;
	-ms-writing-mode : tb-rl;
	    writing-mode : vertical-rl;
	font-family : "Oswald", sans-serif;
	transform : rotate(-180deg);
	font-size : 24.6rem;
	z-index : -1;
}

@media screen and (max-width: 768px){
	#tag{
		top : calc( 741 * 100vw / 768 );
		right : calc( -8 * 100% / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#tag{
		top : 545px;
		right : -12px;
	}
}

/*--------------------------------------------
BREADCRUMBS
---------------------------------------------*/

#breadcrumbs li , #breadcrumbs a{
	display : inline;
}

#breadcrumbs li:not(:last-child):after{
	content : "";
	display : inline-block;
	background : url("../images/ui/parts/arrow02.svg") 0 0 / contain no-repeat;
}

#breadcrumbs li{
	color : #a6a6a6;
}

#breadcrumbs li a{
	color : #383838;
}

@media screen and (max-width: 768px){
	#breadcrumbs{
		padding-top : calc( ( 21 - 6 ) * 100vw / 768 );
		padding-bottom : calc( ( 62 - 6 ) * 100vw / 768 );
	}
	#breadcrumbs li{
		font-size : 2.4rem;
		line-height : 1.5;
	}
	#breadcrumbs li:not(:last-child):after{
		width : calc( 6 * 100vw / 768 );
		height : calc( 12 * 100vw / 768 );
		margin-left : calc( 24 * 100vw / 768 );
		margin-right : calc( 24 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#breadcrumbs{
		padding-top : calc( 15px - 4px );
		padding-bottom : calc( 72px - 4px );
	}
	#breadcrumbs li{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#breadcrumbs li:not(:last-child):after{
		width : 4px;
		height : 8px;
		margin-left : 16px;
		margin-right : 16px;
	}
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

#title{
	display : flex;
	align-items : center;
	color : #000;
	font-weight : 500;
}

#title[data-en]:before{
	content : attr(data-en);
	font-family : "Oswald", sans-serif;
	letter-spacing : .01em;
	background : url("../images/ui/parts/slush.svg") right center no-repeat;
	flex-shrink : 0;
	font-weight : 400;
}

@media screen and (max-width: 768px){
	#title{
		font-size : 3.6rem;
	}
	#title[data-en]:before{
		font-size : 6.2rem;
		background-size : auto calc( 60 * 100vw / 768 );
		padding-right : calc( 61 * 100% / 680 );
		margin-right : calc( 2 * 100% / 680 );
	}
}

@media print,screen and (min-width: 769px){
	#title{
		font-size : 3rem;
	}
	#title[data-en]:before{
		font-size : 5.2rem;
		background-size : auto 50px;
		padding-right : 53px;
		margin-right : 8px;
	}
}

/*--------------------------------------------
SIDEBAR
---------------------------------------------*/

#sidebar h4{
	background-color : #242425;
	color : #fff;
	letter-spacing : -.01em;
}

#sidebar h4[data-before]{
	display : flex;
	align-items : center;
}

#sidebar h4[data-before]:before{
	flex-shrink : 0;
	font-weight : 300;
	font-family : "Oswald", sans-serif;
}

#sidebar .lists01 a{
	letter-spacing : -.01em;
}

#sidebar .lists02 a{
	display : flex;
	align-items : center;
}

#sidebar .lists02 span:first-of-type{
	flex-shrink : 0;
	font-weight : 300;
	font-family : "Oswald", sans-serif;
	color : #000;
	letter-spacing : .01em;
}

#sidebar .lists02 span:last-of-type{
	flex-grow : 1;
	letter-spacing : -.01em;
}

#sidebar .lists02 span:last-of-type[data-after]:after{
	display : block;
	white-space : normal;
}

@media screen and (max-width: 768px){
	#sidebar{
		margin-top : calc( 112 * 100vw / 768 );
	}
	#sidebar h4{
		font-size : 3.2rem;
	}
	#sidebar h4[data-after]:after{
		padding-top : calc( 30 * 100vw / 768 );
		height : calc( 128 * 100vw / 768 );
		padding-left : calc( 32 * 100% / 768 );
		padding-right : calc( 32 * 100% / 768 );
		display : block;
		margin-top : calc( 8 * 100vw / 768 );
		letter-spacing : .01em;
	}
	#sidebar h4[data-before]{
		height : calc( 126 * 100vw / 768 );
		padding-left : calc( 18 * 100% / 768 );
		padding-right : calc( 18 * 100% / 768 );
	}
	#sidebar h4[data-before]:before{
		font-size : 7.4rem;
		margin-right : calc( 56 * 100% / 732 );
	}
	#sidebar ul{
		margin-top : calc( 6 * 100vw / 768 );
	}
	#sidebar li + li{
		border-top : 1px solid #242425;
	}
	#sidebar .lists01 a{
		padding-top : calc( 30 * 100vw / 768 );
		padding-bottom : calc( 30 * 100vw / 768 );
		font-size : 3.2rem;
		padding-left : calc( 32 * 100% / 768 );
		padding-right : calc( 32 * 100% / 768 );
		display : block;
	}
	#sidebar .lists01 a[data-after]:after{
		display : block;
		margin-top : calc( 8 * 100vw / 768 );
	}
	#sidebar .lists02 a{
		padding-left : calc( 18 * 100% / 768 );
		padding-right : calc( 18 * 100% / 768 );
		padding-top : calc( 24 * 100vw / 768 );
		padding-bottom : calc( 24 * 100vw / 768 );
	}
	#sidebar .lists02 span:first-of-type{
		font-size : 7.4rem;
		margin-right : calc( 52 * 100% / 732 );
	}
	#sidebar .lists02 span:last-of-type{
		font-size : 3.2rem;
		line-height : 1.25;
	}
}

@media print,screen and (min-width: 769px){
	#sidebar h4{
		font-size : 1.6rem;
		display : flex;
		align-items : center;
		height : 70px;
		padding-left : 14px;
		padding-right : 14px;
	}
	#sidebar h4[data-after]:after{
		padding-left : .5em;
	}
	#sidebar h4[data-before]:before{
		font-size : 4.3rem;
		margin-right : 30px;
	}
	#sidebar li{
		border-bottom : 1px solid #242425;
	}
	#sidebar .lists01 a{
		display : flex;
		align-items : center;
		height : 56px;
		font-size : 1.6rem;
		padding-left : 14px;
		padding-right : 14px;
	}
	#sidebar .lists01 a[data-after]:after{
		padding-left : .5em;
	}
	#sidebar .lists02 a{
		padding-top : 14.5px;
		padding-bottom : 14.5px;
	}
	#sidebar .lists02 span:first-of-type{
		font-size : 4.3rem;
		margin-right : 10px;
	}
	#sidebar .lists02 span:last-of-type{
		font-size : 1.6rem;
		line-height : 1.25;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer{
	background-color : #000;
	color : #fff;
}

#footer a{
	color : #fff;
	letter-spacing : .04em;
	display : block;
	font-weight : 600;
}

#footer h5{
	text-align : center;
}

#footer p{
	text-align : center;
	letter-spacing : .05em;
	text-indent : .05em;
}

#footer p:not(.copyright){
	color : #f2f2f2;
}

@media screen and (max-width: 768px){
	#footer{
		padding-left : 0;
		padding-right : 0;
		padding-bottom : calc( ( 32 - 5 ) * 100vw / 768 );
	}
	#footer li{
		border-bottom : 1px solid #fff;
	}
	#footer a{
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
		height : calc( 106 * 100vw / 768 );
		font-size : 4.4rem;
	}
	#footer h5{
		margin-top : calc( 88 * 100vw / 768 );
	}
	#footer h5 img{
		height : calc( 175 * 100vw / 768 );
	}
	#footer p{
		font-size : 2.8rem;
		line-height : 1.3571;
		font-weight : 600;
	}
	#footer p:not(.copyright){
		line-height : 1.3571;
		margin-top : calc( ( 32 - 5 ) * 100vw / 768 );
	}
	#footer .copyright{
		margin-top : calc( ( 117 - 5 - 5 ) * 100vw / 768 );
		color : #f2f2f2;
	}
}

@media print,screen and (min-width: 769px){
	#footer{
		padding-top : 96px;
		padding-bottom : calc( 180px - 1.4px );
	}
	#footer ul{
		display : flex;
		justify-content : center;
	}
	#footer a{
		font-size : 1.6rem;
		padding-left : 24px;
		padding-right : 24px;
	}
	#footer h5{
		margin-top : 66px;
	}
	#footer h5 img{
		height : 85px;
	}
	#footer p{
		font-size : 1.4rem;
		font-weight : 500;
	}
	#footer p:not(.copyright){
		line-height : 1.3571;
		margin-top : calc( 23px - 2.5px );
	}
	#footer .copyright{
		margin-top : calc( 76px - 2.5px - 1.4px );
		line-height : 1.2;
	}
}