@charset "UTF-8";

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

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

/* --------------------------------------------
  STATE
  --------------------------------------------- */
@media print , screen and ( width > 750px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.is-pc{
		display : none;
	}
}
@media screen and ( width <= 750px ){
	.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 <= 750px ){
	.full-sp{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	.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 <= 750px ){
	[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 <= 750px ){
	[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 > 750px ){
	[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 <= 750px ){
	.sp-space::after{
		content : " ";
	}
}
@media print , screen and ( width > 750px ){
	.sp-space::after{
		white-space : pre;
		content : "\A";
	}
}
@media screen and ( width <= 750px ){
	.pc-space::after{
		white-space : pre;
		content : "\A";
	}
}
@media print , screen and ( width > 750px ){
	.pc-space::after{
		content : " ";
	}
}
@media screen and ( width <= 750px ){
	.sp-spaceEm::after{
		content : "　";
	}
}
@media print , screen and ( width > 750px ){
	.sp-spaceEm::after{
		white-space : pre;
		content : "\A";
	}
}
@media screen and ( width <= 750px ){
	.pc-spaceEm::after{
		white-space : pre;
		content : "\A";
	}
}
@media print , screen and ( width > 750px ){
	.pc-spaceEm::after{
		content : "　";
	}
}

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

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header .logo{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	#header{
		padding-top : calc( 88 * var( --remBase ) );
		padding-bottom : calc( 15 * var( --remBase ) );
	}
	#header .logo{
		margin-inline : auto;
	}
	#header .logo img{
		height : calc( 104 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#header{
		padding-block : calc( 16 * var( --remBase ) );
	}
	#header .logo img{
		height : calc( 64 * var( --remBase ) );
	}
}

/* --------------------------------------------
animation
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){
	.observe{
		--default-duration : .75s;
	}
	.observe.clip-fade-right{
		clip-path : polygon( 0 0 , 0 0 , 0 100% , 0 100% );
		opacity : 0;
		transition : clip-path var( --default-duration ) linear , opacity var( --default-duration ) linear;
	}
	.observe.clip-fade-right.is-intersecting{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
		opacity : 1;
	}
	.observe.clip-fade-left{
		clip-path : polygon( 100% 0 , 100% 0 , 100% 100% , 100% 100% );
		opacity : 0;
		transition : clip-path var( --default-duration ) linear , opacity var( --default-duration ) linear;
	}
	.observe.clip-fade-left.is-intersecting{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
		opacity : 1;
	}
	.observe.clip-fade-center{
		clip-path : polygon( 50% 0 , 50% 0 , 50% 100% , 50% 100% );
		opacity : 0;
		transition : clip-path var( --default-duration ) linear , opacity var( --default-duration ) linear;
	}
	.observe.clip-fade-center.is-intersecting{
		clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
		opacity : 1;
	}
	.observe.slide-fade-up{
		opacity : 0;
		transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
		translate : 0 25%;
	}
	.observe.slide-fade-up.is-intersecting{
		translate : 0 0;
		opacity : 1;
	}
	.observe.slide-fade-left{
		opacity : 0;
		transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
		translate : 25% 0;
	}
	.observe.slide-fade-left.is-intersecting{
		translate : 0 0;
		opacity : 1;
	}
	.observe.slide-fade-right{
		opacity : 0;
		transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
		translate : -25% 0;
	}
	.observe.slide-fade-right.is-intersecting{
		translate : 0 0;
		opacity : 1;
	}
	@media screen and ( width <= 750px ){
		.observe.slide-fade-up-sp{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : 0 25%;
		}
		.observe.slide-fade-up-sp.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
		.observe.slide-fade-left-sp{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : 25% 0;
		}
		.observe.slide-fade-left-sp.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
		.observe.slide-fade-right-sp{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : -25% 0;
		}
		.observe.slide-fade-right-sp.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
	}
	@media print , screen and ( width > 750px ){
		.observe.slide-fade-up-pc{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : 0 25%;
		}
		.observe.slide-fade-up-pc.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
		.observe.slide-fade-left-pc{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : 25% 0;
		}
		.observe.slide-fade-left-pc.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
		.observe.slide-fade-right-pc{
			opacity : 0;
			transition : translate var( --default-duration ) linear , opacity var( --default-duration ) linear;
			translate : -25% 0;
		}
		.observe.slide-fade-right-pc.is-intersecting{
			translate : 0 0;
			opacity : 1;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.observe.delay-01{
		transition-delay : calc( var( --default-duration ) * 1 );
	}
	.observe.delay-02{
		transition-delay : calc( var( --default-duration ) * 2 );
	}
	.observe.delay-03{
		transition-delay : calc( var( --default-duration ) * 3 );
	}
	.observe.delay-03{
		transition-delay : calc( var( --default-duration ) * 4 );
	}
	@media screen and ( width <= 750px ){
		.observe.delay-01-sp{
			transition-delay : calc( var( --default-duration ) * 1 );
		}
		.observe.delay-02-sp{
			transition-delay : calc( var( --default-duration ) * 2 );
		}
		.observe.delay-03-sp{
			transition-delay : calc( var( --default-duration ) * 3 );
		}
		.observe.delay-04-sp{
			transition-delay : calc( var( --default-duration ) * 4 );
		}
	}
	@media print , screen and ( width > 750px ){
		.observe.delay-01-pc{
			transition-delay : calc( var( --default-duration ) * 1 );
		}
		.observe.delay-02-pc{
			transition-delay : calc( var( --default-duration ) * 2 );
		}
		.observe.delay-03-pc{
			transition-delay : calc( var( --default-duration ) * 3 );
		}
		.observe.delay-04-pc{
			transition-delay : calc( var( --default-duration ) * 4 );
		}
	}
}