@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@font-face{
	font-family : "Noto Sans JP";
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2" ) format( "woff2" );
}
:root{
	--fontFamily : "Noto Sans JP" , sans-serif;
}
@font-face{
	font-family : Roboto;
	font-variation-settings : "wdth" 100;
	font-style : normal;
	font-weight : 100 900;
	font-optical-sizing : auto;
	src : url( "../fonts/Roboto/Roboto-VariableFont_wdth,wght.woff2" ) format( "woff2" );
}
.roboto{
	font-family : Roboto , sans-serif;
}
@font-face{
	font-family : Lato;
	font-style : normal;
	font-weight : 400;
	src : url( "../fonts/Lato/Lato-Regular.woff2" ) format( "woff2" );
}
.lato{
	font-family : Lato , sans-serif;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--headerHeight : calc( 80 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 60 * var( --remBase ) );
	}
}
body{
	@media screen and ( width <= 768px ){
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
	@media screen and ( 768px < width < 1040px ){
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
	@media print , screen and ( width >= 1040px ){
		font-size : 10px;
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
	@media screen and ( width <= 768px ){
		font-size : calc( 20 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		font-size : var( --font-honmon );
	}
}

/* --------------------------------------------
FRAMES
--------------------------------------------- */
@media screen and ( width <= 768px ){
	:root{
		--containerWidth : 100%;
		--containerBoxWidth : calc( var( --wrapperSize ) * var( --viewportBase ) );
		--containerPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	: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 > 768px ){
		margin-inline : auto;
	}
}
:where( .container , .containerPadding ){
	width : var( --containerWidth );
}
:where( .container-sp , .containerPadding-sp ){
	@media screen and ( width <= 768px ){
		width : var( --containerWidth );
	}
}
:where( .container-pc , .containerPadding-pc ){
	@media print , screen and ( width > 768px ){
		width : var( --containerWidth );
	}
}
.containerPadding{
	padding-inline : var( --containerPaddingInline );
}
.containerPadding-sp{
	@media screen and ( width <= 768px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerPadding-pc{
	@media print , screen and ( width > 768px ){
		padding-inline : var( --containerPaddingInline );
	}
}
.containerBox{
	width : var( --containerBoxWidth );
	@media screen and ( width <= 768px ){
		margin-inline : auto;
	}
}
.containerBox-sp{
	@media screen and ( width <= 768px ){
		width : var( --containerBoxWidth );
	}
}
.containerBox-pc{
	@media print , screen and ( width > 768px ){
		width : var( --containerBoxWidth );
	}
}
@media screen and ( width <= 768px ){
	: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 > 768px ){
	: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 <= 768px ){
		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 >= 1040px ){
		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 <= 768px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	: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 <= 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 768px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap02-sp{
	@media screen and ( width <= 768px ){
		padding-inline : calc( 45 * var( --oldViewportBase ) );
	}
}

/* --------------------------------------------
  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 >= 1040px ){
		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 <= 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 );
		}
	}
}

/* --------------------------------------------
  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{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 1;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : var( --headerHeight );
	@media screen and ( width <= 768px ){
		justify-content : start;
		padding-inline : calc( 33 * var( --viewportBase ) );
		.logo{
			padding-top : calc( 2 * var( --remBase ) );
			img{
				height : calc( 37 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-columns : auto auto;
		column-gap : min( 20px , calc( 20 * var( --percentBase ) ) );
		justify-content : end;
		background-color : black;
		transition : background-color .3s ease;
		&.is-scrolled , &.has-scroll-anim.is-inview.is-scrolled{
			background-color : color-mix( in sRGB , black 100% , transparent );
			/*---background-color : color-mix( in sRGB , black 70% , transparent );---*/
		}
		.logo{
			img{
				height : calc( 32 * var( --remBase ) );
				filter : var( --filterWhite );
			}
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	@media screen and ( width <= 768px ){
		--barColor : black;
		position : fixed;
		top : calc( 15 * var( --remBase ) );
		right : calc( 16 * var( --viewportBase ) );
		z-index : 12;
		width : calc( 50 * var( --viewportBase ) );
		height : calc( 50 * var( --remBase ) );
		padding-block : calc( 14.5 * var( --remBase ) );
		padding-inline : calc( 14.5 * var( --remBase ) );
		overflow : hidden;
		font-size : 0;
		> span{
			position : relative;
			display : block;
			height : 100%;
			> span{
				position : absolute;
				left : 50%;
				display : block;
				width : calc( 3 * 100% / 21 );
				height : calc( 3 * var( --remBase ) );
				background-color : var( --barColor );
				translate : -50% 0;
				&:nth-of-type( 1 ){
					top : 0;
				}
				&:nth-of-type( 2 ){
					top : calc( 9 * var( --remBase ) );
				}
				&:nth-of-type( 3 ){
					top : calc( 18 * var( --remBase ) );
				}
			}
		}
		&[aria-expanded="false"]{
			> span{
				> span{
					&::before , &::after{
						position : absolute;
						display : block;
						width : auto;
						height : calc( 3 * var( --remBase ) );
						aspect-ratio : 1;
						content : "";
						background-color : var( --barColor );
					}
					&::before{
						left : calc( -9 * var( --remBase ) );
					}
					&::after{
						right : calc( -9 * var( --remBase ) );
					}
				}
			}
		}
		&[aria-expanded="true"]{
			> span{
				> span{
					top : calc( 9 * var( --remBase ) );
					height : calc( 2 * var( --remBase ) );
					&:nth-of-type( 2 ){
						width : 100%;
					}
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 768px ){
		#menuBtn{
			> span{
				> span{
					transition : all .4s ease;
				}
			}
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
#nav{
	@media screen and ( width <= 768px ){
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&:not( [inert] ){
			pointer-events : auto;
			visibility : visible;
			opacity : 1;
		}
		&[inert]{
			pointer-events : none;
			visibility : hidden;
			opacity : 0;
		}
		position : fixed;
		top : 0;
		left : 0;
		z-index : 11;
		width : 100%;
		height : 100dvh;
		background-color : white;
		.scroll{
			height : 100%;
			overflow-y : auto;
		}
		.scroll{
			padding-block : calc( 26 * var( --remBase ) );
		}
		.navLogo{
			display : block;
			width : fit-content;
			padding-left : calc( 1 * var( --remBase ) );
			margin-top : calc( -3 * var( --remBase ) );
			img{
				height : calc( 37 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		justify-self : end;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 768px ){
		#nav{
			transition : opacity .4s var( --ease-accordion );
		}
	}
}
#navGlobal{
	a{
		display : block;
		font-weight : 500;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 90 * var( --remBase ) );
		a{
			padding-block : calc( 20 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			color : var( --base );
			text-align : center;
		}
	}
	@media print , screen and ( width > 768px ){
		display : flex;
		align-items : center;
		justify-content : end;
		padding-right : calc( 40 * var( --remBase ) );
		.box{
			+ .box{
				margin-left : -1px;
			}
		}
		a{
			padding-inline : calc( 8 * var( --remBase ) );
			font-size : calc( 11 * var( --remBase ) );
			color : white;
		}
		.box a{
			font-size : calc( 12 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	align-content : center;
	width : fit-content;
	margin-inline : auto;
	span{
		display : block;
		width : fit-content;
		padding-block : calc( 8 * var( --remBase ) );
		margin-inline : auto;
		font-family : Roboto , sans-serif;
		font-weight : 800;
		line-height : 1.2;
		color : white;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
		background-color : black;
	}
	@media screen and ( width <= 768px ){
		height : calc( 205 * var( --remBase ) );
		span{
			min-width : calc( 280 * var( --viewportBase ) );
			padding-inline : calc( 40 * var( --remBase ) );
			font-size : calc( 29 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		height : calc( 200 * var( --remBase ) );
		span{
			min-width : min( 330px , calc( 330 * var( --viewportBase ) ) );
			padding-inline : calc( 40 * var( --remBase ) );
			font-size : calc( 28 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
SCROLL ANIMATIONS
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){
	.has-scroll-anim{
		&.scroll-fade-in{
			opacity : 0;
			transition-timing-function : ease-in-out;
			transition-duration : 2s;
			transition-property : opacity;
			&.is-inview{
				opacity : 1;
			}
		}
		&.scroll-fade-up{
			opacity : 0;
			transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
			transition-duration : 1.25s;
			transition-property : opacity , translate;
			&.is-inview{
				translate : 0 0;
				opacity : 1;
			}
		}
		&.scroll-slide-left{
			opacity : 0;
			transition-delay : .5s;
			transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
			transition-duration : 1.25s;
			transition-property : opacity , translate;
			&.is-inview{
				translate : 0 0;
				opacity : 1;
			}
		}
		&.scroll-slide-right{
			opacity : 0;
			transition-delay : .5s;
			transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
			transition-duration : 1.25s;
			transition-property : opacity , translate;
			&.is-inview{
				translate : 0 0;
				opacity : 1;
			}
		}
		&.scroll-zoom{
			transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
			transition-duration : .6s;
			transition-property : scale;
			&.is-inview{
				scale : 1;
			}
		}
		&:is( .scroll-clip-top , .scroll-clip-bottom , .scroll-clip-left , .scroll-clip-right ){
			transition-delay : .5s;
			transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
			transition-duration : 1.2s;
			transition-property : clip-path;
			&.is-inview{
				clip-path : inset( 0 0 0 0 );
			}
		}
		&.scroll-clip-top{
			clip-path : inset( 100% 0 0 0 );
		}
		&.scroll-clip-bottom{
			clip-path : inset( 0 0 100% 0 );
		}
		&.scroll-clip-left{
			clip-path : inset( 0 0 0 100% );
		}
		&.scroll-clip-right{
			clip-path : inset( 0 100% 0 0 );
		}
		@media screen and ( width <= 768px ){
			&.scroll-fade-up{
				translate : 0 calc( 40 * var( --remBase ) );
			}
			&.scroll-slide-left{
				translate : calc( 120 * var( --remBase ) ) 0;
			}
			&.scroll-slide-right{
				translate : calc( -120 * var( --remBase ) ) 0;
			}
			&.scroll-zoom{
				scale : .95;
			}
		}
		@media print , screen and ( width > 768px ){
			&.scroll-fade-up{
				translate : 0 calc( 80 * var( --remBase ) );
			}
			&.scroll-slide-left{
				translate : calc( 120 * var( --remBase ) ) 0;
			}
			&.scroll-slide-right{
				translate : calc( -120 * var( --remBase ) ) 0;
			}
			&.scroll-zoom{
				scale : .95;
			}
		}
	}
}
.splide{
	position : relative;
	overflow : hidden;
}
.splide > .splide__track{
	display : block;
}
.splide__slide{
	flex-shrink : 0;
	width : 100%;
	transition : opacity .6s ease;
}
.splide__slide.is-active{
	z-index : 2;
	opacity : 1;
}
.splide__slide:not( .is-active ){
	z-index : 1;
	opacity : 0;
}
.splide__arrow ,
.splide__pagination{
	display : none;
}