@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 730px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 730px < width < 980px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 980px ){
	:root{
		font-size : 10px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	@media screen and ( width <= 730px ){
		font-size : calc( 20 * var( --remBase ) );
	}
	@media print , screen and ( width > 730px ){
		font-size : calc( 16 * var( --remBase ) );
	}
}

/* --------------------------------------------
FRAMES
--------------------------------------------- */
@media screen and ( width <= 730px ){
	:root{
		--containerWidth : 100%;
		--containerBoxWidth : calc( var( --wrapperSize ) * var( --viewportBase ) );
		--containerPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 730px ){
	:root{
		--containerWidth : min( 100% , calc( var( --breakPoint ) * 1px ) );
		--containerBoxWidth : min( calc( var( --wrapperSize ) * var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) );
		--containerPaddingInline : max( calc( var( --gutter ) * var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
:where( .container , .container-pc , .containerBox , .containerBox-pc ){
	@media print , screen and ( width > 730px ){
		margin-inline : auto;
	}
}
:where( .container , .containerPadding ){
	width : var( --containerWidth );
}
:where( .container-sp , .containerPadding-sp ){
	@media screen and ( width <= 730px ){
		width : var( --containerWidth );
	}
}
:where( .container-pc , .containerPadding-pc ){
	@media print , screen and ( width > 730px ){
		width : var( --containerWidth );
	}
}
.containerPadding{
	padding-inline : var( --containerPaddingInline );
}
.containerPadding-sp{
	@media screen and ( width <= 730px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerPadding-pc{
	@media print , screen and ( width > 730px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerBox{
	width : var( --containerBoxWidth );
	@media screen and ( width <= 730px ){
		margin-inline : auto;
	}
}
.containerBox-sp{
	@media screen and ( width <= 730px ){
		width : var( --containerBoxWidth );
	}
}
.containerBox-pc{
	@media print , screen and ( width > 730px ){
		width : var( --containerBoxWidth );
	}
}
@media screen and ( width <= 730px ){
	:root{
		--gridColumnGutter : calc( var( --gutter ) * var( --viewportBase ) );
		--gridColumnContent : calc( var( --wrapperSize ) * var( --viewportBase ) );
		--gridContainerGridTemplateColumns : var( --gridColumnGutter ) var( --gridColumnContent ) var( --gridColumnGutter );
		--gridContainerColumnCenter : 2;
		--gridContainerLeftStartEnd : 3;
		--gridContainerRightEndStart : 2;
	}
}
@media print , screen and ( width > 730px ){
	:root{
		--gridColumnGutterOutside : 1fr;
		--gridColumnGutterInside : min( calc( var( --gutter ) * var( --viewportBase ) ) , calc( var( --gutter ) * 1px ) );
		--gridColumnContent : min( calc( var( --wrapperSize ) * var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) );
		--gridContainerGridTemplateColumns : var( --gridColumnGutterOutside ) var( --gridColumnGutterInside ) var( --gridColumnContent ) var( --gridColumnGutterInside ) var( --gridColumnGutterOutside );
		--gridContainerColumnCenter : 3;
		--gridContainerLeftStartEnd : 4;
		--gridContainerRightEndStart : 3;
	}
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / var( --gridContainerLeftStartEnd );
	}
	.right-end{
		grid-column : var( --gridContainerRightEndStart ) / -1;
	}
}
.gridContainer-sp{
	@media screen and ( width <= 730px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 980px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}

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

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

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
[hidden]{
	display : none;
}

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

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
.sp-space{
	@media screen and ( width <= 730px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 730px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 730px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 730px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 730px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 730px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 730px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 730px ){
		&::after{
			content : "　";
		}
	}
}

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
:root{
	--headerHeight : calc( 41 * var( --remBase ) );
}
#header{
	position : relative;
	z-index : 10;
	height : var( --headerHeight );
	padding-block : calc( 3 * var( --remBase ) );
	background-color : white;
	box-shadow : 0 calc( 5 * var( --remBase ) ) calc( 5 * var( --remBase ) ) color-mix( in sRGB , black 19% , transparent );
	ul{
		display : flex;
		justify-content : center;
		height : 100%;
	}
	li{
		height : 100%;
		+ li{
			position : relative;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				display : block;
				width : 1px;
				height : 100%;
				content : "";
				background-color : black;
			}
		}
	}
	a{
		display : block;
		align-content : center;
		height : 100%;
		font-weight : 500;
		text-align : center;
	}
	@media screen and ( width <= 730px ){
		li:not( :nth-child( 2 ) ){
			flex-grow : 1;
		}
		li:nth-child( 2 ){
			flex-shrink : 0;
			width : calc( 136 * var( --viewportBase ) );
		}
		a{
			font-size : 1.3rem;
			line-height : calc( 16 / 13 );
		}
	}
	@media print , screen and ( width > 730px ){
		li{
			width : calc( 160 * var( --percentBase ) );
		}
		a{
			font-size : 1.4rem;
			line-height : calc( 17 / 14 );
		}
	}
}
@media ( hover : hover ){
	#header{
		a:hover{
			opacity : .75;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		a{
			transition : opacity .3s ease-in;
		}
	}
}