@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{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 768px <= width < 1040px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1040px ){
	:root{
		font-size : 10px;
	}
}
@media screen and ( width < 768px ){
	:root{
		--headerHeight : calc( 80 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:root{
		--headerHeight : calc( 60 * var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	padding-top : var( --headerHeight );
}
@media screen and ( width < 768px ){
	body{
		font-size : calc( 20 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	body{
		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 ) );
	}
}
@media print , screen and ( width > 768px ){
	:where( .container , .container-pc , .containerBox , .containerBox-pc ){
		margin-inline : auto;
	}
}
:where( .container , .containerPadding ){
	width : var( --containerWidth );
}
@media screen and ( width < 768px ){
	:where( .container-sp , .containerPadding-sp ){
		width : var( --containerWidth );
	}
}
@media print , screen and ( width > 768px ){
	:where( .container-pc , .containerPadding-pc ){
		width : var( --containerWidth );
	}
}
.containerPadding{
	padding-inline : var( --containerPaddingInline );
}
@media screen and ( width < 768px ){
	.containerPadding-sp{
		padding-inline : var( --containerPaddingInline );
	}
}
@media print , screen and ( width > 768px ){
	.containerPadding-pc{
		padding-inline : var( --containerPaddingInline );
	}
}
.containerBox{
	width : var( --containerBoxWidth );
}
@media screen and ( width < 768px ){
	.containerBox{
		margin-inline : auto;
	}
}
@media screen and ( width < 768px ){
	.containerBox-sp{
		width : var( --containerBoxWidth );
	}
}
@media print , screen and ( width > 768px ){
	.containerBox-pc{
		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;
}
.gridContainer > *:not( .fluid , .left-start , .right-end ){
	grid-column : var( --gridContainerColumnCenter );
}
.gridContainer .fluid{
	grid-column : 1/-1;
}
.gridContainer .left-start{
	grid-column : 1 / var( --gridContainerLeftStartEnd );
}
.gridContainer .right-end{
	grid-column : var( --gridContainerRightEndStart ) / -1;
}
@media screen and ( width < 768px ){
	.gridContainer-sp{
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
	}
	.gridContainer-sp > *:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.gridContainer-sp .fluid{
		grid-column : 1/-1;
	}
	.gridContainer-sp .left-start{
		grid-column : 1 / var( --gridContainerLeftStartEnd );
	}
	.gridContainer-sp .right-end{
		grid-column : var( --gridContainerRightEndStart ) / -1;
	}
}
@media print , screen and ( width >= 1040px ){
	.gridContainer-pc{
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
	}
	.gridContainer-pc > *:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.gridContainer-pc .fluid{
		grid-column : 1/-1;
	}
	.gridContainer-pc .left-start{
		grid-column : 1 / var( --gridContainerLeftStartEnd );
	}
	.gridContainer-pc .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 );
}
@media screen and ( width < 768px ){
	.wrap-sp{
		padding-inline : var( --wrapPaddingInline );
	}
}
@media print , screen and ( width > 768px ){
	.wrap-pc{
		padding-inline : var( --wrapPaddingInline );
	}
}
@media screen and ( width < 768px ){
	.wrap02-sp{
		padding-inline : calc( 45 * var( --oldViewportBase ) );
	}
}

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

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

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width < 768px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 768px ){
	.lh-up-pc{
		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 ){
	#header{
		justify-content : start;
		padding-inline : calc( 33 * var( --viewportBase ) );
	}
	#header .logo {
		padding-top : calc( 2 * var( --remBase ) );
	}
	#header .logo img{
		height : calc( 37 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#header{
		grid-template-columns : auto auto;
		column-gap : min( 20px , calc( 20 * var( --percentBase ) ) );
		justify-content : end;
		background-color : black;
		transition : background-color .3s ease;
	}
	#header.is-scrolled , #header.has-scroll-anim.is-inview.is-scrolled{
		background-color : color-mix( in sRGB , black 70% , transparent );
	}
	#header .logo img{
		height : calc( 32 * var( --remBase ) );
		filter : var( --filterWhite );
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
@media screen and ( width < 768px ){
	#menuBtn{
		--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;
	}
	#menuBtn > span{
		position : relative;
		display : block;
		height : 100%;
	}
	#menuBtn > span > span{
		position : absolute;
		left : 50%;
		display : block;
		width : calc( 3 * 100% / 21 );
		height : calc( 3 * var( --remBase ) );
		background-color : var( --barColor );
		translate : -50% 0;
	}
	#menuBtn > span > span:nth-of-type( 1 ){
		top : 0;
	}
	#menuBtn > span > span:nth-of-type( 2 ){
		top : calc( 9 * var( --remBase ) );
	}
	#menuBtn > span > span:nth-of-type( 3 ){
		top : calc( 18 * var( --remBase ) );
	}
	#menuBtn[aria-expanded="false"] > span > span::before , #menuBtn[aria-expanded="false"] > span > span::after{
		position : absolute;
		display : block;
		width : auto;
		height : calc( 3 * var( --remBase ) );
		aspect-ratio : 1;
		content : "";
		background-color : var( --barColor );
	}
	#menuBtn[aria-expanded="false"] > span > span::before{
		left : calc( -9 * var( --remBase ) );
	}
	#menuBtn[aria-expanded="false"] > span > span::after{
		right : calc( -9 * var( --remBase ) );
	}
	#menuBtn[aria-expanded="true"] > span > span{
		top : calc( 9 * var( --remBase ) );
		height : calc( 2 * var( --remBase ) );
	}
	#menuBtn[aria-expanded="true"] > span > span: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
--------------------------------------------- */
@media screen and ( width < 768px ){
	body:has( #nav:not( [inert] ) ){
		overflow : hidden;
	}
	#nav:not( [inert] ){
		pointer-events : auto;
		visibility : visible;
		opacity : 1;
	}
	#nav[inert]{
		pointer-events : none;
		visibility : hidden;
		opacity : 0;
	}
	#nav{
		position : fixed;
		z-index : 11;
	}
	#nav .scroll{
		height : 100%;
		overflow-y : auto;
	}
	#nav{
		top : 0;
		left : 0;
		width : 100%;
		height : 100dvh;
		background-color : white;
	}
	#nav .scroll{
		padding-block : calc( 26 * var( --remBase ) );
		position: relative;
	}
	#nav .navLogo{
		display : block;
		width : fit-content;
		margin-top: calc( -3 * var( --remBase ) );
		padding-left: calc( 1 * var( --remBase ) );
	}
	#nav .navLogo img{
		height : calc( 37 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#nav{
		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 ){
	#navGlobal{
		margin-top : calc( 90 * var( --remBase ) );
	}
	#navGlobal 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 ){
	#navGlobal{
		display : flex;
		align-items : center;
		justify-content : end;
		padding-right : calc( 40 * var( --remBase ) );
	}
	#navGlobal .box + .box{
		margin-left : -1px;
	}
	#navGlobal a{
		padding-inline : calc( 8 * var( --remBase ) );
		font-size : calc( 11 * var( --remBase ) );
		color : white;
	}
	#navGlobal .box a{
		font-size : calc( 12 * var( --remBase ) );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	align-content : center;
	width : fit-content;
	margin-inline : auto;
}
.title01 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 ){
	.title01{
		height : calc( 205 * var( --remBase ) );
	}
	.title01 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 ){
	.title01{
		height : calc( 200 * var( --remBase ) );
	}
	.title01 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;
	}
	.has-scroll-anim.scroll-fade-in.is-inview{
		opacity : 1;
	}
	.has-scroll-anim.scroll-fade-up{
		opacity : 0;
		transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
		transition-duration : 1.25s;
		transition-property : opacity , translate;
	}
	.has-scroll-anim.scroll-fade-up.is-inview{
		translate : 0 0;
		opacity : 1;
	}
	.has-scroll-anim.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;
	}
	.has-scroll-anim.scroll-slide-left.is-inview{
		translate : 0 0;
		opacity : 1;
	}
	.has-scroll-anim.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;
	}
	.has-scroll-anim.scroll-slide-right.is-inview{
		translate : 0 0;
		opacity : 1;
	}
	.has-scroll-anim.scroll-zoom{
		transition-timing-function : cubic-bezier( .645 , .045 , .355 , 1 );
		transition-duration : .6s;
		transition-property : scale;
	}
	.has-scroll-anim.scroll-zoom.is-inview{
		scale : 1;
	}
	.has-scroll-anim: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;
	}
	.has-scroll-anim:is( .scroll-clip-top , .scroll-clip-bottom , .scroll-clip-left , .scroll-clip-right ).is-inview{
		clip-path : inset( 0 0 0 0 );
	}
	.has-scroll-anim.scroll-clip-top{
		clip-path : inset( 100% 0 0 0 );
	}
	.has-scroll-anim.scroll-clip-bottom{
		clip-path : inset( 0 0 100% 0 );
	}
	.has-scroll-anim.scroll-clip-left{
		clip-path : inset( 0 0 0 100% );
	}
	.has-scroll-anim.scroll-clip-right{
		clip-path : inset( 0 100% 0 0 );
	}
	@media screen and ( width < 768px ){
		.has-scroll-anim.scroll-fade-up{
			translate : 0 calc( 40 * var( --remBase ) );
		}
		.has-scroll-anim.scroll-slide-left{
			translate : calc( 120 * var( --remBase ) ) 0;
		}
		.has-scroll-anim.scroll-slide-right{
			translate : calc( -120 * var( --remBase ) ) 0;
		}
		.has-scroll-anim.scroll-zoom{
			scale : .95;
		}
	}
	@media print , screen and ( width > 768px ){
		.has-scroll-anim.scroll-fade-up{
			translate : 0 calc( 80 * var( --remBase ) );
		}
		.has-scroll-anim.scroll-slide-left{
			translate : calc( 120 * var( --remBase ) ) 0;
		}
		.has-scroll-anim.scroll-slide-right{
			translate : calc( -120 * var( --remBase ) ) 0;
		}
		.has-scroll-anim.scroll-zoom{
			scale : .95;
		}
	}
}
.splide{
	position : relative;
	overflow : hidden;
}
.splide > .splide__track{
	display : flex;
}
.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;
}