@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--headerHeight : calc( 50 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 70 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	@media screen and ( width <= 768px ){
		font-size : calc( 16 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		padding-top : var( --headerHeight );
		font-size : calc( 16 * var( --remBase ) );
	}
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--containerWidth : 100%;
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--containerWidth : calc( var( --contentWidth ) * var( --viewportBase ) );
		--wrapPaddingInline : max( calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
	}
}
:root{
	--containerWidth : 100%;
	--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
	--gridContainerGridTemplateColumns : var( --gridContainerGutter ) var( --containerWidth ) var( --gridContainerGutter );
	--gridContainerColumnCenter : 2;
	--gridContainerLeftStartEnd : 3;
	--gridContainerRightEndStart : 2;
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.container{
	width : var( --containerWidth );
	@media print , screen and ( width > 768px ){
		.container{
			margin-inline : auto;
		}
	}
}
.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 / 3;
	}
	.right-end{
		grid-column : 2 / 4;
	}
}

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

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

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 768px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 768px ){
		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 <= 768px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 768px ){
	[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 > 768px ){
	[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 );
		}
	}
}
[data-outline]{
	position : relative;
	z-index : 0;
	display : inline-block;
	&::before{
		position : absolute;
		inset : 0;
		z-index : -1;
		white-space : pre;
		content : attr( data-outline );
	}
}

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

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	height : var( --headerHeight );
	.logo{
		display : block;
		width : fit-content;
	}
	@media screen and ( width <= 768px ){
		align-content : center;
		padding-left : calc( 13 * var( --viewportBase ) );
		.logo.is-pc{
			display : none;
		}
		.logo{
			img{
				height : calc( 28 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		display : grid;
		align-items : center;
		justify-content : space-between;
		width : 100%;
		padding-inline : max( calc( ( 100% - 1380px ) / 2 ) , calc( 30 * 100% / 1440 ) );
		.logo{
			grid-column : 1;
			img{
				height : calc( 32 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 768px ){
		position : fixed;
		top : calc( 20 * var( --remBase ) );
		right : calc( 12.5 * var( --viewportBase ) );
		z-index : 12;
		height : calc( 17.5 * var( --remBase ) );
		aspect-ratio : 28.419 / 17.5;
		background-repeat : no-repeat;
		background-position : center;
		&[aria-expanded="false"]{
			background-image : url( "../images/parts/menuBtn/open.svg" );
			background-size : auto 100%;
		}
		&[aria-expanded="true"]{
			background-image : url( "../images/parts/menuBtn/close.svg" );
			background-size : auto calc( 17.27 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#menuBtn{
		@media screen and ( width <= 768px ){
			transition : background var( --transitionBase );
		}
	}
}

/* --------------------------------------------
NAVIGATION
--------------------------------------------- */
#nav{
	@media screen and ( width <= 768px ){
		position : fixed;
		top : 0;
		z-index : 11;
		width : 100%;
		height : 100dvh;
		background-color : white;
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&:not( [inert] ){
			pointer-events : auto;
			visibility : visible;
			opacity : 1;
		}
		&[inert]{
			pointer-events : none;
			visibility : hidden;
			opacity : 0;
		}
		.scroll{
			height : 100%;
			overflow-y : auto;
		}
		.scroll{
			padding-top : calc( 70 * var( --remBase ) );
			padding-bottom : calc( 22 * var( --remBase ) );
			&::after{
				display : block;
				width : auto;
				height : calc( 112 * var( --remBase ) );
				aspect-ratio : 300/112;
				margin-inline : auto;
				margin-top : calc( 130 * var( --remBase ) );
				content : "";
				background : url( "../images/circle.svg" ) center / contain no-repeat;
			}
		}
		&[inert]{
			#navGlobal{
				translate : 0 50%;
				opacity : .1;
			}
		}
		&:not( [inert] ){
			#navGlobal{
				translate : 0 0;
				opacity : 1;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		grid-column : 2;
		.scroll{
			display : block;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		@media screen and ( width <= 768px ){
			&:not( [inert] ){
				transition : opacity .4s linear , visibility 0s;
			}
			&[inert]{
				transition : opacity .4s linear , visibility 0s linear .4s;
			}
		}
	}
}
#navGlobal{
	a{
		font-family : Barlow , sans-serif;
	}
	@media screen and ( width <= 768px ){
		padding-inline : calc( 51 * var( --viewportBase ) );
		li + li{
			margin-top : calc( 15 * var( --remBase ) );
		}
		a{
			display : block;
			padding-block : calc( 8.5 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 48 * var( --remBase ) );
		a{
			min-width : calc( 80 * var( --remBase ) );
			padding-block : calc( 1.5 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			letter-spacing : .1em;
		}
	}
}
@media ( hover : hover ){
	#navGlobal{
		> li > a , > li > div > a{
			&:hover{
				color : #999;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal{
		> li > a , > li > div > a{
			transition : color var( --transitionBase );
		}
	}
	@media screen and ( width <= 768px ){
		#navGlobal{
			transition : translate .4s ease-out , opacity .4s ease-out;
			button img{
				transition : rotate var( --transitionBase );
			}
			.subMenu{
				transition : grid-template-rows var( --transitionBase );
				> div{
					transition : padding var( --transitionBase );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		#navGlobal{
			.subMenu:not( .is-sp ){
				transition : grid-template-rows var( --transitionBase );
				> div{
					transition : padding var( --transitionBase );
				}
			}
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	padding-block : calc( 10 * var( --remBase ) );
	font-weight : 500;
	letter-spacing : .1em;
	@media screen and ( width <= 768px ){
		font-size : calc( 24 * var( --remBase ) );
		line-height : calc( 29 / 24 );
	}
	@media print , screen and ( width > 768px ){
		font-size : calc( 36 * var( --remBase ) );
		line-height : calc( 43 / 36 );
	}
}