@charset "UTF-8";

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 1440px ){
	:root{
		font-size : 10px;
	}
}
:root{
	@media screen and ( width <= 750px ){
		--headerHeight : calc( 60 var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		--headerHeight : calc( 100 var( --remBase ) );
	}
}
html{
	scroll-padding-top : var( --headerHeight );
}
body{
	position : relative;
	@media screen and ( width <= 750px ){
		padding-top : var( --headerHeight );
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	@media print , screen and ( width > 750px ){
		padding-top : var( --headerHeight );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
}

/* --------------------------------------------
CONTAINER
--------------------------------------------- */
.container{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		width : min( 100% , calc( var( --breakPoint ) * 1px ) );
		padding-inline : min( calc( var( --gutter ) * 1px ) , calc( var( --gutter ) var( --viewportBase ) ) );
		margin-inline : auto;
	}
}
.gridContainer{
	display : grid;
	grid-auto-flow : column;
	row-gap : 0;
	> *{
		grid-column : 2;
	}
	@media screen and ( width <= 750px ){
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.gridContainer-sp{
	@media screen and ( width <= 750px ){
		display : grid;
		grid-template-columns : calc( var( --gutter ) var( --viewportBase ) ) calc( var( --wrapperSize ) var( --viewportBase ) ) calc( var( --gutter ) var( --viewportBase ) );
		grid-auto-flow : column;
		row-gap : 0;
		> *:not( .fluid-sp , .right-end-sp ){
			grid-column : 2;
		}
		.fluid-sp{
			grid-column : 1/-1;
		}
		.right-end-sp{
			grid-column : 2/-1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 1440px ){
		display : grid;
		grid-template-columns : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) ) min( calc( var( --wrapperSize ) var( --viewportBase ) ) , calc( var( --wrapperSize ) * 1px ) ) max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		grid-auto-flow : column;
		row-gap : 0;
		> *:not( .fluid-pc , .right-end-pc ){
			grid-column : 2;
		}
		.fluid-pc{
			grid-column : 1/-1;
		}
		.right-end-pc{
			grid-column : 2/-1;
		}
	}
}

/* --------------------------------------------
WRAPPER
--------------------------------------------- */
.wrap{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
	}
}
.wrap-left{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
		.wrap-right , .wrap-right-sp{
			padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		&.wrap-right-pc{
			padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		}
		.wrap-right , .wrap-right-pc{
			padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
		}
	}
}
.wrap-left-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-left : calc( var( --gutter ) var( --viewportBase ) );
		.wrap-right , .wrap-right-sp{
			padding-right : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
		}
	}
}
.wrap-right{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
		.wrap-left , .wrap-left-sp{
			padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-right : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		&.wrap-left-pc{
			padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( ( 100% - ( var( --wrapperSize ) * 1px ) ) / 2 ) );
		}
		.wrap-left , .wrap-left-pc{
			padding-left : max( calc( var( --gutter ) var( --viewportBase ) ) , calc( 100% - ( var( --wrapperSize ) * 1px ) ) );
		}
	}
}
.wrap-right-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-right : calc( var( --gutter ) var( --viewportBase ) );
		.wrap-left , .wrap-left-sp{
			padding-left : calc( var( --gutter ) * 100% / ( var( --breakPoint ) - var( --gutter ) ) );
		}
	}
}
.wrap02{
	@media screen and ( width <= 750px ){
		width : 100%;
		padding-inline : calc( var( --gutter ) var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		padding-inline : max( calc( 140 var( --viewportBase ) ) , calc( ( 100% - 1160px ) / 2 ) );
	}
}

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

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

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

/* --------------------------------------------
MAIN
--------------------------------------------- */
body:not( :has( #nav[inert] ) ){
	@media screen and ( width <= 750px ){
		&::before{
			position : absolute;
			inset : 0;
			z-index : 9;
			content : "";
			background-color : color-mix( in sRGB , black 30% , transparent );
		}
		#main{
			&::before{
				opacity : 0;
			}
		}
		#header{
			background-color : white;
		}
	}
}
#main{
	&::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : auto;
		aspect-ratio : 475.457/466;
		font-size : 0;
		content : "";
		background-image : url( "../../images/lp/header/bg.svg" );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	@media screen and ( width <= 750px ){
		&::before{
			height : calc( 268.377 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		&::before{
			height : calc( 466 var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	@media screen and ( width <= 750px ){
		#main::before{
			transition : opacity var( --transitionBase );
		}
		#header{
			transition : background-color var( --transitionBase );
		}
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 10;
	display : grid;
	align-items : center;
	width : 100%;
	height : var( --headerHeight );
	background-color : white;
	&.is-top{
		background-color : transparent;
	}
	&:not( .is-top ){
		background-color : white;
	}
	.logo{
		grid-row : 1;
	}
	@media screen and ( width <= 750px ){
		grid-template-columns : auto 1fr auto;
		padding-left : calc( 10 var( --viewportBase ) );
		padding-right : calc( 70 var( --viewportBase ) );
		.logo{
			grid-column : 1;
			img{
				height : calc( 39.9286 var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 10;
		grid-template-columns : auto auto auto;
		grid-template-columns : calc( 28 var( --viewportBase ) ) auto 1fr auto auto calc( 42 var( --viewportBase ) );
		width : 100%;
		.logo{
			grid-column : 2;
			img{
				height : calc( 61.3916 var( --remBase ) );
			}
		}
	}
}
#header.io{
	&.is-top{
		position : absolute;
		translate : 0 0;
	}
	&:not( .is-top ){
		position : fixed;
	}
	&:not(.is-top, .is-fixed){
		translate : 0 -100%;
	}
	&.is-down:not(.is-top, .is-fixed){
		position : absolute;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header.io:not( .is-top ){
		transition : translate var( --transitionBase ) , background-color var( --transitionBase );
	}
}
#nav{
	@media screen and ( width <= 750px ){
		position : fixed;
		top : var( --headerHeight );
		left : 0;
		z-index : 11;
		display : grid;
		grid-template-columns : 1fr;
		width : 100%;
		overflow : hidden;
		background-color : white;
		body:has( &:not( [inert] ) ){
			overflow : hidden;
		}
		&[inert]{
			grid-template-rows : 0fr;
		}
		&:not( [inert] ){
			grid-template-rows : 1fr;
		}
		> div{
			overflow : hidden;
		}
		.scroll{
			padding-inline : calc( 40 var( --viewportBase ) );
		}
		&:not( [inert] ){
			.scroll{
				padding-top : calc( 20 var( --remBase ) );
				padding-bottom : var( --headerHeight );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		grid-row : 1;
		grid-column : 4;
	}
}
#nav{
	@media screen and ( width <= 750px ){
		@media ( prefers-reduced-motion : no-preference ){
			transition : grid-template-rows var( --transitionBase );
			> div{
				transition : padding var( --transitionBase );
			}
		}
	}
}
#navGlobal{
	a{
		font-size : 1.6rem;
		line-height : 1.75;
	}
	@media screen and ( width <= 750px ){
		li{
			border-bottom : solid 1px #949494;
			&:first-child{
				border-top : solid 1px #949494;
			}
		}
		a{
			display : grid;
			align-items : center;
			height : calc( 54 var( --remBase ) );
			padding-inline : calc( 8 * 100% / 295 );
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		a{
			padding-inline : 1em;
		}
	}
}
@media ( hover : hover ){
	#navGlobal a:hover{
		color : var( --accent );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#navGlobal a{
		transition : color var( --transitionBase );
	}
}
#navLang{
	grid-row : 1;
	> button{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		&::before{
			display : block;
			width : auto;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-image : url( "../../images/lp/ui/icon/globa.svg" );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	@media screen and ( width <= 750px ){
		grid-column : 3;
		> button{
			column-gap : calc( 8 var( --remBase ) );
			font-size : 1.2rem;
			line-height : calc( 26.5 / 12 );
			&::before{
				height : calc( 14 var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-column : 5;
		align-items : center;
		justify-content : start;
		height : calc( 40 var( --remBase ) );
		padding-left : calc( 20 var( --remBase ) );
		margin-left : calc( 4 var( --remBase ) );
		border-left : solid 1px var( --base );
		> button{
			column-gap : calc( 8 var( --remBase ) );
			font-size : 1.6rem;
			line-height : calc( 26.5 / 16 );
			&::before{
				height : calc( 16.6124 var( --remBase ) );
			}
		}
	}
}
#menuBtn{
	@media screen and ( width <= 750px ){
		position : fixed;
		top : calc( 21 var( --remBase ) );
		right : calc( 20 var( --viewportBase ) );
		z-index : 12;
		width : calc( 30 var( --viewportBase ) );
		height : calc( 18 var( --remBase ) );
		border-color : transparent;
		border-style : solid;
		span{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			height : 100%;
			transition : all .4s;
			&:nth-of-type( 1 ){
				top : 0;
			}
			&:nth-of-type( 4 ){
				bottom : 0;
			}
		}
		&[aria-expanded="true"]{
			span:nth-of-type( 1 ){
				scale : 0;
				translate : calc( $( top ) var( --remBase ) ) 0;
			}
			span:nth-of-type( 2 ){
				rotate : -45deg;
			}
			span:nth-of-type( 3 ){
				rotate : 45deg;
			}
			span:nth-of-type( 4 ){
				scale : 0;
				translate : calc( -$( top ) var( --remBase ) ) 0;
			}
		}
		span{
			height : calc( 1 var( --remBase ) );
			background-color : var( --base );
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 8.5 var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
:where( #mvPc , #mvSp ){
	font-size : 0;
	.splide__arrow{
		position : absolute;
		z-index : 1;
		display : grid;
		align-items : center;
		justify-content : center;
		width : auto;
		aspect-ratio : 1;
		border-radius : 50%;
		outline-width : 1px;
		outline-style : solid;
		outline-offset : -1px;
		img{
			filter : var( --filterWhite );
		}
	}
	.splide__slide{
		picture{
			overflow : hidden;
		}
		picture img{
			width : 100%;
			height : auto;
		}
	}
	.splide__pagination{
		position : absolute;
		left : 0;
		display : flex;
		flex-wrap : wrap;
		width : 100%;
		button{
			width : auto;
			aspect-ratio : 1;
			border-radius : 50%;
			outline-width : 1px;
			outline-style : solid;
			outline-offset : -1px;
			&:not( .is-active ){
				background-color : white;
			}
		}
	}
}
#mvSp{
	@media screen and ( width <= 750px ){
		.splide__arrow{
			top : calc( 90 var( --remBase ) );
			height : calc( 30 var( --remBase ) );
			background-color : var( --brown01 );
			outline-color : var( --brown01 );
			img{
				height : calc( 19 var( --remBase ) );
			}
		}
		.splide__arrow--prev{
			left : calc( 10 var( --viewportBase ) );
			img{
				margin-right : calc( 2.5 var( --remBase ) );
			}
		}
		.splide__arrow--next{
			right : calc( 10 var( --viewportBase ) );
			img{
				margin-left : calc( 2.5 var( --remBase ) );
			}
		}
		.splide__pagination{
			bottom : calc( 16 var( --remBase ) );
			column-gap : calc( 12 var( --viewportBase ) );
			button{
				height : calc( 13 var( --remBase ) );
				outline-color : var( --brown03 );
				&.is-active{
					background-color : var( --brown03 );
				}
			}
		}
	}
}
#mvPc{
	@media print , screen and ( width > 750px ){
		.splide__arrow{
			background-color : var( --brown02 );
			outline-color : var( --brown02 );
		}
		.splide__arrow--prev{
			img{
				margin-right : calc( 2.5 var( --remBase ) );
			}
		}
		.splide__arrow--next{
			img{
				margin-left : calc( 2.5 var( --remBase ) );
			}
		}
		.splide__pagination{
			button{
				outline-color : var( --brown02 );
				&.is-active{
					background-color : var( --brown02 );
				}
			}
		}
	}
	@media screen and ( 750px < width < 1366px ){
		.splide__arrow{
			top : calc( 220 var( --remBase ) );
			height : calc( 60 var( --remBase ) );
			img{
				height : calc( 36 var( --remBase ) );
			}
		}
		.splide__arrow--prev{
			left : calc( 34 var( --viewportBase ) );
		}
		.splide__arrow--next{
			right : calc( 34 var( --viewportBase ) );
		}
		.splide__pagination{
			bottom : calc( 23 var( --remBase ) );
			column-gap : calc( 40 var( --viewportBase ) );
			button{
				height : calc( 20.5 var( --remBase ) );
			}
		}
	}
	@media screen and ( width >= 1366px ){
		.splide__arrow{
			top : calc( 220 * 100vw / 1366 );
			height : calc( 60 * 100vw / 1366 );
			img{
				height : calc( 36 * 100vw / 1366 );
			}
		}
		.splide__arrow--prev{
			left : calc( 34 * 100vw / 1366 );
		}
		.splide__arrow--next{
			right : calc( 34 * 100vw / 1366 );
		}
		.splide__pagination{
			bottom : calc( 23 * 100vw / 1366 );
			column-gap : calc( 40 * 100vw / 1366 );
			button{
				height : calc( 20.5 * 100vw / 1366 );
			}
		}
	}
}
@media ( hover : hover ){
	:is( #mvPc , #mvSp ){
		.splide__arrow:hover{
			background-color : white;
		}
		@media screen and ( width <= 750px ){
			.splide__arrow:hover{
				img{
					filter : var( --filterBrown01 );
				}
			}
			.splide__pagination button:hover{
				background-color : var( --brown01 );
			}
		}
		@media print , screen and ( width > 750px ){
			.splide__arrow:hover{
				img{
					filter : var( --filterBrown02 );
				}
			}
			.splide__pagination button:hover{
				background-color : var( --brown02 );
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	:is( #mvPc , #mvSp ){
		.splide__arrow{
			transition : background-color var( --transitionBase );
			img{
				transition : filter var( --transitionBase );
			}
		}
		.splide__pagination button{
			transition : background-color var( --transitionBase );
		}
	}
}

/* --------------------------------------------
LINK CONTACT
--------------------------------------------- */
#linkContact{
	position : fixed;
	bottom : 5%;
	right : 0;
	z-index : 5;
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	color : white;
	border-top-left-radius : 100vmax;
	border-bottom-left-radius : 100vmax;
	outline : solid 1px transparent;
	outline-offset : -1px;
	translate : 0 -50%;
	&::before{
		display : block;
		width : auto;
		aspect-ratio : 19.5/14.875;
		font-size : 0;
		content : "";
		background-image : url( "../../images/lp/ui/icon/email01.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	&::after{
		position : absolute;
		inset : 0;
		z-index : -1;
		display : block;
		font-size : 0;
		content : "";
		border-top-left-radius : 100vmax;
		border-bottom-left-radius : 100vmax;
		opacity : 1;
	}
	&.is-visible{
		translate : 0 0;
	}
	&:not( .is-visible ){
		translate : 100% 0;
	}
	@media screen and ( width <= 750px ){
		column-gap : calc( 6 * 100% / 98 );
		width : calc( 114 var( --viewportBase ) );
		height : calc( 44 var( --remBase ) );
		padding-left : calc( 16 var( --viewportBase ) );
		font-size : 1.2rem;
		line-height : 1.75;
		box-shadow : 0 calc( 6 var( --remBase ) ) 0 #b4ebd6;
		&::before{
			height : calc( 11 var( --remBase ) );
		}
		&::after{
			background-image : linear-gradient( to right , #63aeaa , #99d069 );
		}
	}
	@media print , screen and ( width > 750px ){
		column-gap : calc( 9 * 100% / 151 );
		width : min( calc( 180 var( --viewportBase ) ) , 180px );
		height : calc( 60 var( --remBase ) );
		padding-left : min( calc( 29 var( --viewportBase ) ) , 29px );
		font-size : 1.6rem;
		line-height : 1.75;
		box-shadow : 0 calc( 8 var( --remBase ) ) 0 #b4ebd6;
		&::before{
			height : calc( 14.875 var( --remBase ) );
		}
		&::after{
			background-image : linear-gradient( to right , #00b1ac , #7dd261 );
		}
	}
}
@media ( hover : hover ){
	#linkContact:hover{
		color : #64aeaa;
		outline-color : #64aeaa;
		&::before{
			filter : var( --filterLightGreen );
		}
		&::after{
			opacity : 0;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#linkContact{
		transition : outline-color var( --transitionBase ) , color var( --transitionBase ) , translate var( --transitionBase );
		&::before{
			transition : filter var( --transitionBase );
		}
		&::after{
			transition : opacity var( --transitionBase );
		}
	}
}

/* --------------------------------------------
OPEN
-------------------------------------------- */
#open{
	h1{
		display : grid;
		place-items : center;
		color : white;
		text-align : center;
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	p{
		display : grid;
		grid-template-columns : 1fr auto auto 1fr;
		align-items : center;
		justify-content : center;
		> span{
			&:nth-child( 1 ){
				grid-row : 1;
				grid-column : 2;
				width : auto;
				aspect-ratio : 1;
				color : white;
				text-align : center;
				background : url( "../../images/lp/open/bg.svg" ) 0 0 / contain no-repeat;
			}
			&:nth-of-type( 2 ){
				grid-row : 1;
				grid-column : 3;
				font-weight : 500;
			}
		}
		strong{
			grid-row : 2;
			grid-column : 1/-1;
			font-weight : 700;
			color : var( --brown );
			text-align : center;
		}
	}
	h2{
		font-weight : 700;
		text-align : center;
		border-bottom-color : currentColor;
		border-bottom-style : solid;
	}
	ul ul{
		font-size : 0;
		text-align : center;
		li{
			display : inline;
		}
	}
	> ul{
		> li:nth-child( 1 ){
			li + li::before{
				content : "・";
			}
		}
		> li:nth-child( 2 ){
			li + li::before{
				content : "、";
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-bottom : calc( ( 110 - 6 - 12 ) var( --remBase ) );
		h1{
			height : calc( 80 var( --remBase ) );
			border-image-source : linear-gradient( var( --brown03 ) , var( --brown03 ) );
			img{
				height : calc( 59 var( --remBase ) );
			}
		}
		p{
			row-gap : calc( ( 20 - 4 ) var( --remBase ) );
			column-gap : calc( 15 var( --percentBase ) );
			margin-top : calc( 20 var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					height : calc( 71 var( --remBase ) );
					padding-top : calc( ( 21 - 4 ) var( --remBase ) );
					font-size : 1.4rem;
					line-height : calc( 18 / 14 );
				}
				&:nth-of-type( 2 ){
					font-size : 1.6rem;
					line-height : 1.25;
					color : var( --brown05 );
				}
			}
			strong{
				font-size : 1.6rem;
				line-height : 1.5;
				color : var( --brown05 );
			}
		}
		> ul{
			width : calc( 296 var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( ( 25 - 4 - 4 ) var( --remBase ) );
			> li + li{
				margin-top : calc( (  22 - 4 - 6 ) var( --remBase ) );
			}
		}
		h2{
			padding-bottom : calc( ( 8 - 4 ) var( --remBase ) );
			font-size : 1.6rem;
			line-height : 1.5;
			color : var( --brown05 );
			border-bottom-width : 1px;
		}
		ul ul{
			margin-top : calc( ( 10 - 6 ) var( --remBase ) );
		}
		li li{
			font-size : 1.2rem;
			line-height : 2;
		}
	}
	@media print , screen and ( width > 750px ){
		padding-bottom : calc( ( 190 - 2 - 19.5 ) var( --remBase ) );
		h1{
			height : calc( 96 var( --remBase ) );
			border-image-source : linear-gradient( var( --brown02 ) , var( --brown02 ) );
			img{
				height : calc( 43 var( --remBase ) );
			}
		}
		p{
			row-gap : calc( ( 30 - 10 ) var( --remBase ) );
			column-gap : calc( 26 var( --percentBase ) );
			margin-top : calc( 30 var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					height : calc( 155 var( --remBase ) );
					padding-top : calc( ( 46 - 7.5 ) var( --remBase ) );
					font-size : 2.7rem;
					line-height : calc( 42 / 27 );
				}
				&:nth-of-type( 2 ){
					font-size : 3.6rem;
					line-height : calc( 48 / 36 );
					color : var( --brown04 );
				}
			}
			strong{
				font-size : 4.1rem;
				line-height : calc( 61 / 41 );
				color : var( --brown04 );
			}
		}
		> ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 538 var( --percentBase ) ) );
			justify-content : space-between;
			margin-top : calc( ( 100 - 10 - 10 ) var( --remBase ) );
		}
		h2{
			padding-bottom : calc( ( 16 - 10 ) var( --remBase ) );
			font-size : 4.1rem;
			line-height : calc( 61 / 41 );
			color : var( --brown04 );
			border-bottom-width : calc( 2 var( --remBase ) );
		}
		ul ul{
			margin-top : calc( ( 12 - 2 ) var( --remBase ) );
		}
		li li{
			font-size : 2rem;
			line-height : 1.2;
		}
	}
}