@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');

.serif{
	font-family: 'Noto Serif JP', serif;

}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	:root{
		--headerHeight : calc( 120 var( --remBase ) );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	:root{
		--headerHeight : calc( 108 * 100vw / 1100 );
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 1440px ){
	:root{
		--headerHeight : 108px;
		font-size : 10px;
	}
}
@media screen and ( max-width : 750px ){
	body{
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	body{
		font-size : 1.6rem;
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.wrap{
		padding-inline : calc( 40 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.wrap{
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
}
@media screen and ( max-width : 750px ){
	.wrap-sp{
		padding-inline : calc( 40 * 100% / var( --breakPoint ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.wrap-pc{
		padding-inline : calc( ( 100% - 1440px ) / 2 );
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@layer 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 : 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 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	display : grid;
	align-items : start;
	height : var( --headerHeight );
	background-color : black;
}
#header .logo{
	display : block;
	width : fit-content;
}
#header .logo img{
	transition : transform var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	#header{
		grid-template-columns : auto 1fr calc( 168 * 100% / 730 ) calc( 40 * 100% / 730 ) calc( 60 * 100% / 730 ) calc( 40 * 100% / 730 );
		padding-top : calc( 20 var( --remBase ) );
		padding-left : calc( 20 var( --viewportBase ) );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
	}
	#header .logo img{
		height : calc( 70 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#header{
		grid-template-columns : auto calc( 30 * 100% / 1050 ) 1fr calc( 27 * 100% / 1050 ) calc( 84 * 100% / 1050 );
	}
	#header .logo{
		grid-row : 1;
		grid-column : 1;
		align-self : start;
	}
}
@media ( min-width : 750.02px ) and ( max-width : 1099.98px ){
	#header{
		padding-inline : calc( 25 * 100% / 1100 );
		padding-top : calc( 15 * 100vw / 1100 );
	}
	#header .logo{
		padding-top : calc( 10 * 100vw / 1100 );
	}
	#header .logo img{
		height : calc( 54 * 100vw / 1100 );
	}
}
@media ( min-width : 1100px ){
	#header{
		padding-inline : calc( ( 100% - 1050px ) / 2 );
		padding-top : 15px;
	}
	#header .logo{
		padding-top : 10px;
	}
	#header .logo img{
		height : 54px;
	}
}
@media ( hover : hover ){
	#header .logo:hover img{
		transform : scale( 1.18 );
	}
}

/* --------------------------------------------
LANGUAGES
--------------------------------------------- */
#langNav_head{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	border-radius : 100vmax;
	outline : 1px solid #e5e5e5;
	outline-offset : -1px;
}
#langNav_head li{
	height : 100%;
}
#langNav_head a{
	display : flex;
	align-items : center;
	justify-content : center;
	width : 100%;
	height : 100%;
	margin : -1px 0;
	font-weight : 700;
	color : #000;
	text-align : center;
	background-color : transparent;
	border : 1px solid transparent;
	border-radius : 100vmax;
	transition : all var( --transitionBase );
	backface-visibility : hidden;
}
#langNav_head a.is-current ,
#langNav_head a:hover{
	color : #000;
	background-color : #e5e5e5;
}
@media screen and ( max-width : 750px ){
	#langNav_head{
		grid-row : 1;
		grid-column : 3;
		height : calc( 54 var( --remBase ) );
		margin-top : calc( 15 var( --remBase ) );
	}
	#langNav_head a{
		font-size : 3rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#langNav_head{
		grid-row : 1;
		grid-column : 5;
	}
}
#langNav_head li a{
	color : #e5e5e5;
}
@media ( min-width : 750.02px ) and ( max-width : 1099.98px ){
	#langNav_head{
		height : calc( 27 * 100vw / 1100 );
	}
	#langNav_head a{
		font-size : calc( 15 * 100vw / 1100 );
	}
}
@media ( min-width : 1100px ){
	#langNav_head{
		height : 27px;
	}
	#langNav_head a{
		font-size : 15px;
	}
}

/* --------------------------------------------
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 ){
		scale : 0;
		translate : calc( 10 var( --remBase ) ) 0;
	}
	body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 2 ){
		rotate : -45deg;
	}
	body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 3 ){
		rotate : 45deg;
	}
	body.is-open #menuBtn > span:nth-of-type( 1 ) span:nth-of-type( 4 ){
		scale : 0;
		translate : calc( -10 var( --remBase ) ) 0;
	}
}
@media screen and ( max-width : 750px ){
	#menuBtn{
		z-index : 12;
		grid-row : 1;
		grid-column : 5;
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		overflow : hidden;
	}
	#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( 4 ){
		bottom : 0;
	}
	#menuBtn span span{
		height : calc( 4 var( --remBase ) );
		background-color : white;
	}
	#menuBtn span span:nth-of-type( 2 ) , #menuBtn span span:nth-of-type( 3 ){
		top : calc( 18 var( --remBase ) );
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#nav{
		position : fixed;
		top : 0;
		left : 100%;
		z-index : 11;
		max-height : 100vh;
		overflow-y : auto;
		transition : translate .5s ease-in;
		translate : 0 0;
	}
	#nav .scroll{
		overflow-y : auto;
	}
	body.is-open #nav{
		translate : -100% 0;
	}
}
@media screen and ( max-width : 750px ){
	#nav{
		width : 100%;
		overflow-x : clip;
		color : #fff;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#nav{
		grid-row : 1;
		grid-column : 3;
	}
	#nav .scroll{
		display : grid;
		grid-template-columns : 1fr auto;
	}
}
@media ( min-width : 750.02px ) and ( max-width : 1099.98px ){
	#nav .scroll{
		column-gap : calc( 40 * 100vw / 1100 );
	}
}
@media ( min-width : 1100px ){
	#nav .scroll{
		column-gap : 40px;
	}
}

/* --------------------------------------------
GROBAL NAV
--------------------------------------------- */
#globalNav > li > a , #globalNav button{
	display : block;
	font-weight : 700;
	color : #e5e5e5;
	letter-spacing : .1em;
}
#globalNav ul a{
	display : block;
	width : 100%;
	height : 100%;
	padding-inline : calc( 20 * 100% / 472 );
	font-family : "Noto Serif Japanese" , serif;
	font-weight : 700;
	line-height : normal;
	color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#globalNav ul a span{
	display : block;
	font-family : "Noto Sans JP" , serif;
	line-height : normal;
}
#globalNav ul li:nth-child( 1 ) a{
	background-image : url( "../images/header/img01.webp" );
}
#globalNav ul li:nth-child( 2 ) a{
	background-image : url( "../images/header/img02.webp" );
}
@media screen and ( max-width : 750px ){
	#globalNav{
		z-index : 2;
		width : calc( 270 var( --viewportBase ) );
		padding-top : calc( 40 var( --remBase ) );
		padding-left : calc( 30 var( --viewportBase ) );
		padding-right : calc( 10 var( --viewportBase ) );
		margin-left : auto;
		background-color : black;
	}
	#globalNav > li > a , #globalNav button{
		padding-top : calc( 23 var( --remBase ) );
		padding-bottom : calc( 23 var( --remBase ) );
		font-size : 2.8rem;
		white-space : nowrap;
	}
	#globalNav > li > div{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		width : calc( 480 var( --viewportBase ) );
		height : 100%;
		pointer-events : none;
		border-bottom : solid calc( 4 var( --remBase ) ) white;
		border-left : solid calc( 4 var( --remBase ) ) white;
		border-right : solid calc( 4 var( --remBase ) ) white;
		transition : translate var( --transitionBase );
		translate : 100% 0;
	}
	#globalNav button.is-selected + div{
		z-index : 0;
		pointer-events : auto;
		transition : translate var( --transitionBase ) , z-index 0s ease .3s;
		translate : 0 0;
	}
	#globalNav ul{
		width : 100%;
		height : 100%;
	}
	#globalNav ul li{
		height : 50%;
		border-top : solid calc( 4 var( --remBase ) ) white;
	}
	#globalNav ul a{
		display : grid;
		grid-auto-flow : row;
		align-content : end;
		justify-content : start;
		padding-bottom : calc( ( 29 ) var( --remBase ) );
		font-size : 3.2rem;
	}
	#globalNav ul a span{
		font-size : 2.2rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#globalNav{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		border-bottom : 1px solid #e5e5e5;
	}
	#globalNav > li > a , #globalNav button{
		position : relative;
	}
	#globalNav > li > a::after , #globalNav button::after{
		position : absolute;
		top : 100%;
		left : 0;
		display : block;
		width : 100%;
		content : "";
		transition : background .3s ease-in;
	}
	#globalNav > li > a:hover::after , #globalNav button:hover::after{
		background : #e5e5e5;
	}
	#globalNav > li > div{
		position : absolute;
		left : 0;
		left : 50%;
		z-index : 1;
		display : grid;
		grid-template-rows : 0fr;
		transition : grid-template-rows var( --transitionBase );
		translate : -50% 0;
	}
	#globalNav button.is-selected + div{
		grid-template-rows : 1fr;
	}
	#globalNav ul{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 10 * 100% / 1050 );
		justify-content : space-between;
		width : 100%;
		overflow : hidden;
	}
	#globalNav ul li{
		border-color : white;
		border-style : solid;
	}
	#globalNav ul a{
		padding-inline : calc( 21 * 100% / 514 );
	}
}
@media ( min-width : 750.02px ) and ( max-width : 1099.98px ){
	#globalNav{
		column-gap : calc( 10 * 100vw / 1100 );
		padding-bottom : calc( 3 * 100vw / 1100 );
		margin-top : calc( 4 * 100vw / 1100 );
	}
	#globalNav > li > a , #globalNav button{
		padding-block : calc( 6 * 100vw / 1100 );
		padding-inline : calc( 5 * 100vw / 1100 );
		font-size : calc( 14 * 100vw / 1100 );
	}
	#globalNav > li > a::after , #globalNav button::after{
		height : calc( 3 * 100vw / 1100 );
	}
	#globalNav > li > div{
		top : calc( 94 * 100vw / 1100 );
		width : calc( 1050 * 100% / 1100 );
	}
	#globalNav ul li{
		height : calc( 352 * 100vw / 1100 );
		border-width : calc( 3 * 100vw / 1100 );
	}
	#globalNav ul a{
		padding-top : calc( 13 * 100vw / 1100 );
		font-size : calc( 24 * 100vw / 1100 );
	}
	#globalNav ul a span{
		font-size : calc( 16 * 100vw / 1100 );
	}
}
@media ( min-width : 1100px ){
	#globalNav{
		column-gap : 10px;
		padding-bottom : 3px;
		margin-top : 4px;
	}
	#globalNav > li > a , #globalNav button{
		padding-block : 6px;
		padding-inline : 5px;
		font-size : 14px;
	}
	#globalNav > li > a::after , #globalNav button::after{
		height : 3px;
	}
	#globalNav > li > div{
		top : calc( 94 var( --remBase ) );
		width : 1050px;
	}
	#globalNav ul li{
		height : 352px;
		border-width : 3px;
	}
	#globalNav ul a{
		padding-top : 13px;
		font-size : 24px;
	}
	#globalNav ul a span{
		font-size : 16px;
	}
}
#snsNav{
	display : grid;
	justify-content : space-between;
}
#snsNav img{
	width : 100%;
	height : auto;
	transition : scale var( --transitionBase );
}
#snsNav a:hover img{
	scale : 1.07;
}
@media screen and ( max-width : 750px ){
	#snsNav{
		grid-template-columns : calc( 56 * 100% / 210 ) calc( 50 * 100% / 210 ) calc( 54 * 100% / 210 );
		justify-content : space-between;
		width : calc( 270 var( --viewportBase ) );
		padding-top : calc( 25 var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
		padding-left : calc( 30 var( --viewportBase ) );
		padding-right : calc( 10 var( --viewportBase ) );
		margin-left : auto;
		background-color : black;
	}
}
@media ( min-width : 750.02px ) and ( max-width : 1099.98px ){
	#snsNav{
		grid-template-columns : calc( 32 * 100vw / 1100 ) calc( 27 * 100vw / 1100 ) calc( 29 * 100vw / 1100 );
		column-gap : calc( 15 * 100vw / 1100 );
	}
}
@media ( min-width : 1100px ){
	#snsNav{
		grid-template-columns : 32px  27px  29px;
		column-gap : 15px;
	}
}

/* --------------------------------------------
MAIN
--------------------------------------------- */
@media print , screen and ( min-width : 750.02px ){
	body{
		display : grid;
		grid-template-rows : auto auto auto 1fr;
		align-items : stretch;
	}
	body #header{
		grid-row : 1;
		grid-column : 1 / 5;
	}
	body #main{
		display : contents;
	}
	body .main{
		grid-row : 2/5;
		grid-column : 2;
		padding-left : calc( 195 * 100% / 1132 - ( 1 var( --remBase ) ) );
		padding-right : calc( 37 * 100% / 1132 - ( 1 var( --remBase ) ) );
		border-right : calc( 2 var( --remBase ) ) solid black;
	}
	body #search{
		grid-row : 2;
		grid-column : 3;
	}
	body #sidebarNews{
		grid-row : 3;
		grid-column : 3;
	}
	body #footer{
		grid-row : 4;
		grid-column : 3;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	body{
		grid-template-columns : 1fr calc( 1132 * 100% / 1440 ) calc( 308 * 100% / 1440 ) 1fr;
	}
}
@media print , screen and ( min-width : 1440px ){
	body{
		grid-template-columns : 1fr 1132px 308px 1fr;
	}
}