@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : Jost , sans-serif;
	src : url( "../fonts/Jost-VariableFont_wght.ttf" ) format( "ttf" );
}
.jost{
	font-family : Jost , sans-serif;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	html{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1440px ){
	html{
		font-size : 10px;
	}
}
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	:root{
		--headerHeight : calc( 76 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	:root{
		--headerHeight : 76px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	background-color : var( --white );
}
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 30 * 100% / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	.wrap{
		padding-inline : calc( 20 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1440px ){
	.wrap{
		padding-inline : calc( ( 100% - 1400px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-sp{
		padding-inline : calc( 30 * 100% / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	.wrap-pc{
		padding-inline : calc( 20 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1440px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - 1400px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-full{
		padding-inline : calc( 30 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1440px ){
	.wrap-full{
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@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 : 1440px ){
	.is-tb{
		display : none;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.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 ( max-width : 750px ){
	[data-sp-after]::after{
		white-space : pre;
		content : attr( data-sp-after );
	}
}
@media screen and ( max-width : 750px ){
	[data-sp-before]::before{
		white-space : pre;
		content : attr( data-sp-before );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-after]::after{
		white-space : pre;
		content : attr( data-pc-after );
	}
}
@media print , screen and ( min-width : 750.02px ){
	[data-pc-before]::before{
		white-space : pre;
		content : attr( data-pc-before );
	}
}

/* --------------------------------------------
LAYOUT
  HEADER
--------------------------------------------- */
#header .logo{
	display : block;
}
#header .logo img{
	filter : invert( 100% ) sepia( 7% ) saturate( 2% ) hue-rotate( 216deg ) brightness( 106% ) contrast( 100% );
	transition : filter var( --transitionBase );
}
#header.is-passage .logo img{
	filter : none;
}
@media screen and ( max-width : 750px ){
	#header .logo{
		position : absolute;
		top : 0;
		left : 0;
		z-index : 10;
		padding-block : calc( 29 var( --remBase ) );
		padding-inline : calc( 31 var( --viewportBase ) );
	}
	#header .logo img{
		height : calc( 58 var( --remBase ) );
	}
	#header.is-passage .logo{
		background-color : var( --white );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		display : grid;
		align-items : start;
		justify-content : space-between;
		width : 100%;
		height : var( --headerHeight );
		transition : background var( --transitionBase );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header .logo img{
		width : 100%;
		height : auto;
	}
	#header #nav{
		grid-row : 1;
		grid-column : 2;
	}
	#header #globalNav a{
		transition : color var( --transitionBase );
	}
	#header #globalNav ul.is-pc a{
		transition : border var( --transitionBase );
	}
	#header.is-passage{
		background-color : var( --white );
	}
	#header.is-passage #globalNav a{
		color : var( --black );
	}
	#header.is-passage #globalNav ul.is-pc a{
		border-color : #2b2b2b;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#header{
		grid-template-columns : calc( 143 * 100% / 1880 ) auto;
		padding-left : calc( 67 var( --designBaseX ) );
		padding-right : calc( 53 var( --designBaseX ) );
	}
	#header .logo{
		padding-top : calc( 16 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#header{
		grid-template-columns : 143px auto;
		padding-left : 67px;
		padding-right : 53px;
	}
	#header .logo{
		padding-top : 16px;
	}
}

/* --------------------------------------------
LAYOUT
  MENU BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	body.is-open{
		overflow : hidden;
	}
	body.is-open #nav{
		max-height : 100dvh;
	}
	body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 1 ){
		rotate : -45deg;
		top : 50%;
	}
	body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		rotate : 45deg;
		top : 50%;
	}
}
#menuBtn{
	z-index : 11;
}
#menuBtn > span:nth-of-type( 1 ){
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
}
#menuBtn span span{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	transition : all .4s;
}
#menuBtn span span:nth-of-type( 1 ){
	top : 0;
}
#menuBtn span span:nth-of-type( 2 ){
	bottom : 0;
}
#menuBtn{
	position : fixed;
	top : 0;
	right : 6px;
	width : calc( 100 var( --viewportBase ) );
	aspect-ratio : 1;
	padding-block : calc( 37 var( --remBase ) );
	padding-inline : calc( 20 var( --viewportBase ) );
}
#menuBtn > span:nth-of-type( 1 ){
	height : calc( 26 var( --remBase ) );
}
#menuBtn > span:nth-of-type( 1 ) span{
	height : calc( 6 var( --remBase ) );
	background-color : #999;
}

/* --------------------------------------------
LAYOUT
  NAV
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#nav{
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		width : 100%;
		height : 100dvh;
		max-height : 0;
		overflow : hidden;
		overflow-y : auto;
		background-color : var( --black );
		transition : max-height .5s ease-in;
	}
	#nav .scroll{
		padding-inline : calc( 60 var( --viewportBase ) );
		padding-top : calc( 127 var( --remBase ) );
		padding-bottom : calc( 360 var( --remBase ) );
	}
	#nav p{
		font-size : 8rem;
		font-weight : 200;
		color : var( --white );
		letter-spacing : .05em;
	}
	#nav button{
		display : block;
		width : calc( 72 * 100% / 630 );
		margin-inline : auto;
		margin-top : calc( ( 130 - 4 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#nav{
		right : 0;
	}
	#nav .scroll{
		height : 100%;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#nav{
		padding-top : calc( 28 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#nav{
		padding-top : 28px;
	}
}

/* --------------------------------------------
GLOBAL NAV
--------------------------------------------- */
#globalNav a{
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#globalNav{
		margin-top : calc( ( 88 - 4 ) var( --remBase ) );
	}
	#globalNav > li + li{
		margin-top : calc( 60 var( --remBase ) );
	}
	#globalNav a{
		font-size : 4rem;
		font-weight : 500;
		line-height : 1.2;
		color : var( --white );
	}
	#globalNav ul{
		margin-top : calc( 40 var( --remBase ) );
		margin-left : calc( 40 * 100% / 630 );
	}
	#globalNav li li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#globalNav{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
		color : var( --white );
	}
	#globalNav a{
		color : var( --white );
	}
	#globalNav > li:not( .is-sp ){
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : end;
	}
	#globalNav > li + li::before{
		white-space : pre;
		content : "  /  ";
	}
	#globalNav a{
		font-family: 'Jost', sans-serif;
		font-weight : 300;
		letter-spacing : .05em;
	}
	#globalNav ul:not( .is-sp ){
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : end;
	}
	#globalNav li li a{
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
		border-color : var( --white );
		border-style : solid;
		border-width : 1px;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#globalNav > li + li::before{
		font-size : calc( 20 var( --designBaseY ) );
	}
	#globalNav > li > a{
		font-size : calc( 20 var( --designBaseY ) );
	}
	#globalNav ul:not( .is-sp ){
		column-gap : calc( 5 var( --designBaseY ) );
		margin-left : calc( 24 var( --designBaseY ) );
	}
	#globalNav li li a{
		height : calc( 22 var( --designBaseY ) );
		padding-inline : calc( 16 var( --designBaseY ) );
		font-size : calc( 15 var( --designBaseY ) );
	}
	#globalNav .map-link{
		margin-bottom: calc( 5 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#globalNav > li + li::before{
		font-size : 20px;
	}
	#globalNav > li > a{
		font-size : 20px;
	}
	#globalNav ul:not( .is-sp ){
		column-gap : 5px;
		margin-left : 24px;
	}
	#globalNav li li a{
		height : 22px;
		padding-inline : 16px;
		font-size : 15px;
	}
	#globalNav .map-link{
		margin-bottom: 5px;
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
@media print , screen and ( min-width : 750.02px ){
	.firstView-pc{
		position : relative;
		overflow : hidden;
	}
}
#mv video{
	width : 100%;
	height : auto;
}
@media print , screen and ( min-width : 750.02px ){
	#mv{
		width : 100%;
		margin-inline : auto;
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
.home #news{
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
}
.home #news.animation{
	opacity : 0;
}
.home #news.animation.is-animation{
	opacity : 1;
}
@media screen and ( max-width : 750px ){
	.home #news.animation{
		transition : opacity var( --transitionBase );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.home #news.animation{
		transition : opacity .3s ease-in 10s;
	}
}
.home #news h2{
	font-weight : 200;
	letter-spacing : .05em;
}
.home #news a{
	display : block;
}
.home #news :where( time , h3 ){
	letter-spacing : .05em;
		font-family: 'Noto Sans JP', sans-serif;
}
.home #news time{
	display : block;
}
.home #news h3{
	font-weight : 300;
}
@media screen and ( max-width : 750px ){
	.home #news{
		padding-top : calc( 57 var( --remBase ) );
		padding-bottom : calc( ( 81 - 2.6 ) var( --remBase ) );
	}
	.home #news h2{
		font-size : 6rem;
	}
	.home #news ul{
		margin-top : calc( ( 49 - 2.6 ) var( --remBase ) );
	}
	.home #news li + li{
		margin-top : calc( ( 61 - 2.6 - 2.6 ) var( --remBase ) );
	}
	.home #news :where( time , h3 ){
		font-size : 2.6rem;
		line-height : 1.2;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.home #news{
		position : absolute;
		z-index : 2;
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 16 * 100% / 2000 );
		align-items : center;
		justify-content : end;
		width : 100%;
		color : #fff;
	}
	.home #news ul{
		display : grid;
		grid-auto-flow : column;
	}
	.home #news a{
		width : 100%;
		height : 100%;
		padding-inline : calc( 21 * 100% / 300 );
		color : #fff;
		background-color : rgb( 0 0 0 / .4 );
	}
	.home #news :where( time , h3 ){
		line-height : 1.2;
	}
	.home #news h3{
		display : -webkit-box;
		-webkit-line-clamp : 2;
		-webkit-box-orient : vertical;
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	.home #news{
		bottom : calc( 28 var( --designBaseY ) );
		right : calc( 36 var( --designBaseX ) );
	}
	.home #news h2{
		font-size : calc( 40 var( --designBaseY ) );
	}
	.home #news ul{
		grid-auto-rows : calc( 103 var( --designBaseY ) );
		grid-auto-columns : calc( 300 var( --designBaseY ) );
		column-gap : calc( 10 var( --designBaseY ) );
	}
	.home #news a{
		padding-top : calc( ( 17 - 1.8 ) var( --designBaseY ) );
	}
	.home #news :where( time , h3 ){
		font-size : calc( 18 var( --designBaseY ) );
	}
	.home #news h3{
		margin-top : calc( ( 15 - 1.8 - 1.8 ) var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	.home #news{
		bottom : 28px;
		right : 36px;
	}
	.home #news h2{
		font-size : 40px;
	}
	.home #news ul{
		grid-auto-rows : 103px;
		grid-auto-columns : 300px;
		column-gap : 10px;
	}
	.home #news a{
		padding-top : calc( 17px - 1.8px );
	}
	.home #news :where( time , h3 ){
		font-size : 18px;
	}
	.home #news h3{
		margin-top : calc( 15px - 1.8px - 1.8px );
	}
}

/* --------------------------------------------
MAIN HEADER
--------------------------------------------- */
:root{
	--bgMainHeaderSp : url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABNJREFUCB1jZGBg+A/EDEwgAgQADigBA//q6GsAAAAASUVORK5CYII%3D" );
	--bgMainHeaderPc : url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABNJREFUCB1jZGBg+A/EDEwgAgQADigBA//q6GsAAAAASUVORK5CYII%3D" );
}
#mainHeader{
	color : #fff;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#mainHeader a{
	color : #fff;
}
#mainHeader hgroup :where( h1 , p ){
	letter-spacing : .05em;
}
#mainHeader hgroup p:first-child{
	font-weight : 200;
	line-height : 1.2;
}
#mainHeader hgroup h1:first-child{
	font-weight : 200;
	line-height : 1.2;
}
#mainHeader hgroup p + h1 , #mainHeader hgroup h1 + p{
	font-weight : 200;
}
#mainHeader hgroup p + h1::before , #mainHeader hgroup p + h1::after{
	white-space : pre;
	content : "-";
}
@media screen and ( max-width : 750px ){
	#mainHeader{
		display : grid;
		grid-template-rows : 1fr auto 1fr;
		grid-auto-flow : row;
		height : calc( 600 var( --remBase ) );
		background-image : var( --bgMainHeaderSp );
	}
	#mainHeader hgroup{
		grid-row : 2;
		grid-column : 1;
	}
	#mainHeader hgroup :where( p , h1 ){
		text-align : center;
		text-indent : .05em;
	}
	#mainHeader hgroup p:first-child , #mainHeader hgroup h1:first-child{
		font-size : 7rem;
	}
	#mainHeader hgroup p + h1 , #mainHeader hgroup h1 + p{
		font-size : calc( 40 var( --remBase ) );
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#mainHeader{
		display : flex;
		align-items : end;
		justify-content : space-between;
		background-image : var( --bgMainHeaderPc );
	}
	#mainHeader hgroup{
		display : grid;
		grid-auto-flow : column;
		align-items : baseline;
		justify-content : start;
	}
	#mainHeader hgroup p + h1 , #mainHeader hgroup h1 + p{
		line-height : 1.2;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#mainHeader{
		height : calc( 600 var( --designBaseY ) );
		padding-bottom : calc( ( 61 - 5 ) var( --designBaseY ) );
		padding-left : calc( 73 var( --designBaseX ) );
		padding-right : calc( 18 var( --designBaseX ) );
	}
	#mainHeader hgroup{
		column-gap : calc( 25 var( --designBaseY ) );
	}
	#mainHeader hgroup p:first-child , #mainHeader hgroup h1:first-child{
		font-size : calc( 80 var( --designBaseY ) );
	}
	#mainHeader hgroup p + h1{
		font-size : calc( 50 var( --designBaseY ) );
	}
	#mainHeader hgroup h1 + p{
		font-size : calc( 24 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#mainHeader{
		height : 600px;
		padding-bottom : calc( 61px - 5px );
		padding-left : 73px;
		padding-right : 18px;
	}
	#mainHeader hgroup{
		column-gap : 25px;
	}
	#mainHeader hgroup p:first-child , #mainHeader hgroup h1:first-child{
		font-size : 80px;
	}
	#mainHeader hgroup p + h1{
		font-size : 50px;
	}
	#mainHeader hgroup h1 + p{
		font-size : 24px;
	}
}

/* --------------------------------------------
BREAD CRUMBS
--------------------------------------------- */
#breadcrumbs{
	display : flex;
	flex-wrap : wrap;
	font-weight : 200;
}
#breadcrumbs li{
	line-height : 1.2;
	letter-spacing : .05em;
}
#breadcrumbs li + li::before{
	white-space : pre;
	content : " 　/　";
}
#breadcrumbs a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
@media screen and ( max-width : 750px ){
	#breadcrumbs{
		grid-row : 3;
		grid-column : 1;
		align-items : end;
		justify-content : end;
		padding-bottom : calc( ( 31 - 2.4 ) var( --remBase ) );
	}
	#breadcrumbs li{
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 750.02px ) and ( max-width : 1999.98px ){
	#breadcrumbs li{
		font-size : calc( 16 var( --designBaseY ) );
	}
}
@media print , screen and ( min-width : 2000px ){
	#breadcrumbs li{
		font-size : 16px;
	}
}