@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 134 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 178 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1270px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1270px ){
	:root{
		font-size : 10px;
	}
}
html{
	/* scroll-padding-top:  var(--headerHeight); */
}
body{
	position : relative;
}
@media screen and ( width < 1270px ){
	body::after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		pointer-events : none;
		content : "";
		border-image-slice : fill 0;
		border-image-outset : 0;
	}
}
@media screen and ( width <= 750px ){
	body{
		font-size : 2.4rem;
	}
	body::after{
		border-image-source : linear-gradient( to right , transparent 0 calc( 40 var( --viewportBase ) - .5px ) , #ccc calc( 40 var( --viewportBase ) - .5px ) calc( 40 var( --viewportBase ) + .5px ) , transparent calc( 40 var( --viewportBase ) + .5px ) calc( 50% - .5px ) , #ccc calc( 50% - .5px ) calc( 50% + .5px ) , transparent calc( 50% + .5px ) calc( 710 var( --viewportBase ) - .5px ) , #ccc calc( 710 var( --viewportBase ) - .5px ) calc( 710 var( --viewportBase ) + .5px ) , transparent calc( 710 var( --viewportBase ) + .5px ) 100% );
	}
}
@media screen and ( 750px < width < 1270px ){
	body::after{
		border-image-source : repeating-linear-gradient( to right , transparent 0 calc( 280 var( --percentBase ) ) , #ccc calc( 280 var( --percentBase ) ) calc( 280 var( --percentBase ) + 1px ) , transparent calc( 280 var( --percentBase ) + 1px ) calc( 310 var( --percentBase ) - 1px ) , #ccc calc( 310 var( --percentBase ) - 1px ) calc( 310 var( --percentBase ) ) );
	}
}
@media print , screen and ( width >= 1270px ){
	body::before , body::after{
		position : absolute;
		top : 0;
		z-index : -1;
		display : block;
		width : 50%;
		height : 100%;
		font-size : 0;
		pointer-events : none;
		content : "";
		border-image-slice : fill 0;
		border-image-outset : 0;
	}
	body::before{
		left : 50%;
		border-image-source : repeating-linear-gradient( to right , transparent 0 14px , #ccc 14px 15px , transparent 15px 295px , #ccc 295px 296px , transparent 296px 310px );
	}
	body::after{
		right : 50%;
		border-image-source : repeating-linear-gradient( to left , transparent 0 14px , #ccc 14px 15px , transparent 15px 295px , #ccc 295px 296px , transparent 296px 310px );
	}
	body::before{
		border-image-source : repeating-linear-gradient( to right , transparent 0 14px , #ccc 14px 15px , transparent 15px 295px , #ccc 295px 296px , transparent 296px 310px );
	}
	body::after{
		border-image-source : repeating-linear-gradient( to left , transparent 0 14px , #ccc 14px 15px , transparent 15px 295px , #ccc 295px 296px , transparent 296px 310px );
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	.container{
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
	}
	.container-sp{
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
		margin-inline : auto;
	}
}
@media print , screen and ( width > 750px ){
	.container-pc{
		margin-inline : auto;
	}
}
@media screen and ( 750px < width < 1270px ){
	.container{
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
	}
	.container-pc{
		width : calc( var( --wrapperSize ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	.container{
		width : calc( ( var( --wrapperSize ) * 1px ) );
	}
	.container-pc{
		width : calc( ( var( --wrapperSize ) * 1px ) );
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( width < 1270px ){
	.wrap{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( width <= 750px ){
	.wrap-sp{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1270px ){
	.wrap-pc{
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	.wrap{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
	.wrap-pc{
		padding-inline : calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width >= 1270px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( width > 750px ){
	.is-sp{
		display : none;
	}
}

/* --------------------------------------------
  COMMON
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-both]::before{
	white-space : pre;
	content : attr( data-both );
}
[data-both]::after{
	white-space : pre;
	content : attr( data-both );
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
}
@media screen and ( width <= 750px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
@media print , screen and ( width > 750px ){
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
@media screen and ( width <= 750px ){
	br.sp-space{
		content : "";
	}
	br.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 750px ){
	br.pc-space{
		content : "";
	}
	br.pc-space::after{
		content : " ";
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 750px ){
	.lh-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 750px ){
	.lh-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HORIZONTAL LINE
--------------------------------------------- */
.hline{
	position : relative;
}
.hline::after{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	pointer-events : none;
	content : "";
	border-image-slice : fill 0;
	border-image-outset : 0 100vw 0 100vw;
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	height : var( --headerHeight );
}
#header .logo{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#header{
		padding-top : calc( 39 var( --remBase ) );
	}
	#header::after{
		border-image-source : linear-gradient( to bottom , transparent 0 calc( 85 var( --remBase ) ) , #ccc calc( 85 var( --remBase ) ) calc( 85 var( --remBase ) + 1px ) , transparent calc( 85 var( --remBase ) + 1px ) calc( 100% + 1px ) );
	}
	#header .logo{
		position : relative;
		z-index : 12;
	}
	#header .logo img{
		height : calc( 47 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		display : grid;
		grid-template-columns : auto auto;
		align-content : start;
		align-items : end;
		justify-content : space-between;
		padding-top : calc( 35 var( --remBase ) );
	}
	#header::after{
		border-image-source : linear-gradient( to bottom , transparent 0 calc( 99 var( --remBase ) ) , #ccc calc( 99 var( --remBase ) ) calc( 99 var( --remBase ) + 1px ) , transparent calc( 99 var( --remBase ) + 1px ) calc( 100% + 1px ) );
	}
	#header .logo img{
		height : calc( 66 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#header:has( #menuBtn[aria-expanded="true"] ) .logo img{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#header .logo img{
			transition : filter .4s ease-in;
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#menuBtn{
		z-index : 12;
	}
	#menuBtn span{
		position : absolute;
		left : 0;
		display : block;
		width : 100%;
		height : 100%;
		transition : all .4s;
	}
	#menuBtn span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn span:nth-of-type( 4 ){
		bottom : 0;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 1 ){
		scale : 0;
		translate : calc( $( top ) var( --remBase ) ) 0;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	#menuBtn[aria-expanded="true"] span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -$( top ) var( --remBase ) ) 0;
	}
	#menuBtn{
		position : fixed;
		top : calc( 51 var( --remBase ) );
		right : calc( var( --gutter ) var( --viewportBase ) );
		width : calc( 60 var( --viewportBase ) );
		height : calc( 33 var( --remBase ) );
	}
	#menuBtn span{
		height : calc( 6 var( --remBase ) );
		background-color : var( --base );
	}
	#menuBtn span:where( :nth-of-type( 2 ) , :nth-of-type( 3 ) ){
		top : calc( 13.5 var( --remBase ) );
	}
	#menuBtn[aria-expanded="true"] span{
		background-color : white;
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( width <= 750px ){
	body:has( #nav[aria-hidden="false"] ){
		overflow : hidden;
	}
	#nav{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 11;
		width : 100%;
		overflow : hidden;
	}
	#nav[aria-hidden="true"]{
		max-height : 0;
	}
	#nav[aria-hidden="false"]{
		max-height : 100dvh;
	}
	#nav > div{
		height : 100dvh;
		overflow-y : auto;
	}
	#nav{
		background-color : rgb( 0 0 0 / .9 );
	}
	#nav > div{
		display : grid;
		grid-template-columns : repeat( 2 , 50% );
		row-gap : calc( 94 var( --remBase ) );
		align-items : start;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( 177 var( --remBase ) );
		margin-top : var( --headerHeight );
	}
	#nav dl{
		display : grid;
		grid-template-columns : auto auto;
		grid-row : 1;
		grid-column : 2;
		align-items : start;
		justify-content : space-between;
	}
	#nav dt a{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 14 var( --remBase ) );
		align-items : baseline;
		justify-content : start;
		font-family : clarendon-text-pro , serif;
		font-size : 2.4rem;
		font-weight : 700;
		color : white;
	}
	#nav dt a::after{
		font-family : futura-pt , sans-serif;
		font-weight : 500;
	}
	#nav dd img{
		height : calc( 39 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#nav{
			transition : max-height .4s ease-in;
		}
	}
}
#globalNav a{
	font-family : futura-pt , sans-serif;
	font-weight : 500;
	letter-spacing : .12em;
}
@media screen and ( width <= 750px ){
	#globalNav{
		grid-row : 1;
		grid-column : 1;
	}
	#globalNav a{
		font-size : 2.4rem;
		color : white;
	}
	#globalNav > li > a{
		font-weight : 500;
		line-height : calc( 42 / 24 );
	}
	#globalNav > li + li{
		margin-top : calc( ( 42 - 18 ) var( --remBase ) );
	}
	#globalNav li li::before{
		font-weight : 300;
		line-height : calc( 52 / 24 );
		color : white;
		letter-spacing : .12em;
		white-space : pre;
		content : "- ";
	}
	#globalNav li li a{
		font-weight : 300;
		line-height : calc( 52 / 24 );
	}
}
@media print , screen and ( width > 750px ){
	#globalNav{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 40 var( --remBase ) );
	}
	#globalNav > li > a{
		display : block;
		font-size : 1.4rem;
		letter-spacing : .12em;
	}
	#globalNav [data-before-pc]::before{
		display : block;
		font-size : 1.4rem;
	}
	#globalNav [data-before-pc]{
		font-size : 0;
	}
}
@media screen and ( width <= 750px ){
	#menuBtnClose{
		display : block;
		grid-row : 2;
		grid-column : 1/3;
		width : fit-content;
		margin-inline : auto;
	}
	#menuBtnClose img{
		height : calc( 47 var( --remBase ) );
	}
}

/* --------------------------------------------
HOME - MAIN VISIUAL
--------------------------------------------- */
#mv video{
	width : 100%;
	height : auto;
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#breadcrumbs{
		border-top : solid 1px #ccc;
	}
	#breadcrumbs ol{
		display : flex;
		flex-wrap : wrap;
		margin-top : calc( -5.25 var( --remBase ) );
	}
	#breadcrumbs li{
		font-size : 1.4rem;
		font-weight : 500;
		line-height : 1.75;
	}
	#breadcrumbs li + li::before{
		white-space : pre;
		content : "    >    ";
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title{
	position : relative;
	display : grid;
	place-items : center;
	font-family : futura-pt-bold , sans-serif;
	font-weight : 700;
}
#title::before , #title::after{
	position : absolute;
	font-size : 0;
	content : "";
}
#title::before{
	top : 50%;
	left : 0;
	z-index : -1;
	width : 100%;
	height : 1px;
	margin-top : -.5px;
}
#title::after{
	inset : 0;
	display : block;
	margin : auto;
	content : "";
	border-radius : 50%;
}
@media screen and ( width <= 750px ){
	#title{
		height : calc( 88 var( --remBase ) );
		margin-top : calc( -10 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 1.4rem;
	}
	#title::before{
		background : linear-gradient( to right , #666 0% calc( 274 var( --percentBase ) ) , transparent calc( 274 var( --percentBase ) ) calc( 396 var( --percentBase ) ) , #666 calc( 396 var( --percentBase ) ) calc( 670 var( --percentBase ) ) );
	}
	#title::after{
		width : calc( 88 var( --percentBase ) );
		height : calc( 88 var( --remBase ) );
		background : conic-gradient( #666 0% , #666 35% , transparent 35% , transparent 50% , #666 50% , #666 85% , transparent 85% , transparent 100% );
		mask : radial-gradient( circle at center , transparent calc( 44 var( --remBase ) - 1px ) , #666 calc( 44 var( --remBase ) - 1px ) , black );
		rotate : -64deg;
	}
}
@media print , screen and ( width > 750px ){
	#title{
		height : calc( 160 var( --remBase ) );
		margin-top : calc( ( 28 - 5.25 ) var( --remBase ) );
		margin-bottom : calc( 34 var( --remBase ) );
		font-size : 2.545rem;
	}
	#title::before{
		background : linear-gradient( to right , #666 0% calc( 495 var( --percentBase ) ) , transparent calc( 495 var( --percentBase ) ) calc( 715 var( --percentBase ) ) , #666 calc( 715 var( --percentBase ) ) calc( 1210 var( --percentBase ) ) );
	}
	#title::after{
		width : calc( 160 var( --percentBase ) );
		height : calc( 160 var( --remBase ) );
		background : conic-gradient( #666 0% , #666 35% , transparent 35% , transparent 50% , #666 50% , #666 85% , transparent 85% , transparent 100% );
		mask : radial-gradient( circle at center , transparent calc( 80 var( --remBase ) - 1px ) , #666 calc( 80 var( --remBase ) - 1px ) , black );
		rotate : -64deg;
	}
}