@charset "UTF-8";

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service > :where( h2 , p ){
	font-weight : 700;
	line-height : 1.5;
	color : var( --navy );
	text-align : center;
}
#service ul{
	display : grid;
}
#service li{
	position : relative;
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 2;
	counter-increment : no;
	background-color : white;
	background-repeat : no-repeat;
	background-position-x : center;
	box-shadow : 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) calc( -4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 40% , transparent );
}
#service li::before , #service li::after{
	position : absolute;
	top : 0;
	display : grid;
	place-items : center;
}
#service li::before{
	left : 0;
	color : var( --base );
	content : "PACKAGE";
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#service li::after{
	color : white;
	content : counter( no , decimal-leading-zero );
	background-color : var( --base );
}
#service li:nth-child( 1 ){
	background-image : url( "../images/home/service/icon01.svg" );
}
#service li:nth-child( 2 ){
	background-image : url( "../images/home/service/icon02.svg" );
}
#service li:nth-child( 3 ){
	background-image : url( "../images/home/service/icon03.svg" );
}
#service li:nth-child( 4 ){
	background-image : url( "../images/home/service/icon04.svg" );
}
#service li:nth-child( 5 ){
	background-image : url( "../images/home/service/icon05.svg" );
}
#service li:nth-child( 6 ){
	background-image : url( "../images/home/service/icon06.svg" );
}
#service li:nth-child( 7 ){
	background-image : url( "../images/home/service/icon07.svg" );
}
#service li:nth-child( 8 ){
	background-image : url( "../images/home/service/icon08.svg" );
}
#service h3{
	align-self : center;
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
#service li p{
	line-height : 1.5;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#service{
		padding-top : calc( 29 var( --remBase ) );
		padding-bottom : calc( 72 var( --remBase ) );
	}
	#service h2{
		font-size : clamp( var( --min ) , 2.8rem , var( --max ) );
	}
	#service > p{
		margin-top : calc( 13 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
		text-align : center;
		text-indent : -.1em;
		letter-spacing : -.1em;
	}
	#service ul{
		grid-template-columns : repeat( 2 , calc( 160 var( --percentBase ) ) );
		row-gap : calc( 15 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 42 var( --remBase ) );
	}
	#service li{
		row-gap : calc( 8 var( --remBase ) );
		padding-top : calc( 116 var( --remBase ) );
		padding-bottom : calc( 18 var( --remBase ) );
		background-position-y : calc( 26 var( --remBase ) );
		background-size : auto calc( 80 var( --remBase ) );
	}
	#service li::before , #service li::after{
		height : calc( 14 var( --remBase ) );
		font-size : 1rem;
	}
	#service li::before{
		left : calc( -3 * 100% / 160 );
		width : calc( 66 * 100% / 160 );
	}
	#service li::after{
		left : calc( ( -3 + 66 ) * 100% / 160 );
		width : calc( 14 * 100% / 160 );
	}
	#service h3{
		padding-inline : calc( 10 * 100% / 160 );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#service li p{
		padding-inline : calc( 8 * 100% / 160 );
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#service{
		position : relative;
		z-index : 2;
		padding-top : calc( 94 var( --remBase ) );
		padding-bottom : calc( 124 var( --remBase ) );
		overflow-x : clip;
	}
	#service::before{
		position : absolute;
		top : calc( 100% - calc( 230 var( --remBase ) ) );
		left : min( calc( 1211 var( --viewportBase ) ) , calc( 50% + 499px ) );
		z-index : 1;
		display : block;
		width : auto;
		height : calc( 1031.84 var( --remBase ) );
		aspect-ratio : 213.53/1031.84;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-image : url( "../images/ui/label/ozawa.svg" );
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	#service h2{
		font-size : clamp( var( --min ) , 3.8rem , var( --max ) );
	}
	#service > p{
		margin-top : calc( 4 var( --remBase ) );
		font-size : clamp( var( --min ) , 2.3rem , var( --max ) );
	}
	#service ul{
		position : relative;
		z-index : 1;
		grid-template-columns : repeat( 4 , calc( 290 var( --percentBase ) ) );
		row-gap : calc( 25 var( --remBase ) );
		column-gap : calc( 27 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 60 var( --remBase ) );
	}
	#service li{
		row-gap : calc( 15 var( --remBase ) );
		padding-top : calc( 180 var( --remBase ) );
		padding-bottom : calc( 29 var( --remBase ) );
		background-position-y : calc( 45 var( --remBase ) );
		background-size : auto calc( 120 var( --remBase ) );
	}
	#service li::before , #service li::after{
		height : calc( 17 var( --remBase ) );
		font-size : 1.1rem;
	}
	#service li::before{
		left : calc( -3 * 100% / 290 );
		width : calc( 60 * 100% / 290 );
	}
	#service li::after{
		left : calc( ( -3 + 60 ) * 100% / 290 );
		width : calc( 17 * 100% / 290 );
	}
	#service h3{
		padding-inline : calc( 28 * 100% / 290 );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#service li p{
		padding-inline : calc( 33 * 100% / 290 );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works .splide__arrows button{
	position : absolute;
	z-index : 1;
	display : grid;
	place-items : center;
	background-color : var( --base );
}
#works .splide__arrows button img{
	filter : var( --filterWhite );
}
#works .splide__slide{
	position : relative;
	color : var( --base );
	filter : drop-shadow( 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) color-mix( in srgb , #0c0c0d 10% , transparent ) );
}
#works .splide__slide::before , #works .splide__slide::after{
	position : absolute;
	top : 0;
	display : grid;
	place-items : center;
}
#works .splide__slide::before{
	color : var( --base );
	content : "WORKS";
	background-color : white;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#works .splide__slide::after{
	color : white;
	content : attr( data-no );
	background-color : var( --base );
}
#works .pics{
	display : grid;
}
#works .pics li{
	position : relative;
	z-index : 0;
	width : 100%;
	height : 100%;
	overflow : hidden;
}
#works .pics li::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	border : solid 1px #808080;
}
#works .pics li:nth-child( 1 ){
	order : 3;
}
#works .pics li:nth-child( 2 ){
	order : 2;
}
#works .pics li:nth-child( 3 ){
	order : 1;
}
#works .pics img{
	position : absolute;
	left : 0;
	width : 100%;
	height : auto;
}
#works .splide__slide > picture img{
	width : 100%;
	height : auto;
}
#works hgroup p span{
	display : block;
	font-weight : 700;
	line-height : 1.5;
}
#works hgroup p picture img{
	height : calc( var( --height ) var( --remBase ) );
}
#works hgroup h3{
	font-weight : 700;
	line-height : 1.5;
}
#works .box::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
	background : white;
}
#works .box :where( h4 , p , li , h5 ){
	line-height : 1.8;
}
#works .box h4{
	font-weight : 700;
}
#works .box h5{
	font-weight : 400;
}
#works .splide__pagination button{
	aspect-ratio : 1;
	border-radius : 50%;
}
#works .splide__pagination button:not( .is-active ){
	background-color : white;
}
#works .splide__pagination button.is-active{
	background-color : #808080;
}
@media screen and ( width <= 750px ){
	#works{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 72 var( --remBase ) );
	}
	#works .splide__track{
		margin-top : calc( 40 var( --remBase ) );
	}
	#works .splide__slide{
		padding-inline : calc( 17.5 var( --percentBase ) );
		padding-top : calc( 44 var( --remBase ) );
		padding-bottom : calc( 48 var( --remBase ) );
		border-left : solid calc( 20 var( --remBase ) ) transparent;
		border-right : solid calc( 20 var( --remBase ) ) transparent;
	}
	#works .splide__slide::before , #works .splide__slide::after{
		height : calc( 14 var( --remBase ) );
		font-size : 1rem;
	}
	#works .splide__slide::before{
		left : calc( -3 var( --percentBase ) );
		width : calc( 52 var( --percentBase ) );
	}
	#works .splide__slide::after{
		left : calc( ( -3 + 52 ) var( --percentBase ) );
		width : calc( 14 var( --percentBase ) );
	}
	#works .splide__slide > :where( .pics , picture ){
		width : calc( 220 * 100% / 300 );
		margin-inline : auto;
	}
	#works .pics{
		grid-template-rows : calc( 30 var( --remBase ) ) calc( 45 var( --remBase ) ) calc( 125 var( --remBase ) ) calc( 31 var( --remBase ) ) calc( 45 var( --remBase ) );
		grid-template-columns : calc( 68 * 100% / 220 ) calc( 27 * 100% / 220 ) calc( 30 * 100% / 220 ) calc( 38 * 100% / 220 ) 1fr;
	}
	#works .pics li:nth-child( 1 ){
		grid-row : 1/4;
		grid-column : 1/3;
	}
	#works .pics li:nth-child( 2 ){
		grid-row : 3/-1;
		grid-column : 2/5;
	}
	#works .pics li:nth-child( 3 ){
		grid-row : 2/5;
		grid-column : 4/-1;
	}
	#works .pics li img{
		top : calc( -1 * var( --top ) var( --remBase ) * ( 95 / 154 ) );
	}
	#works .splide__slide > picture img{
		width : 100%;
		height : auto;
	}
	#works .box{
		margin-top : calc( 30 var( --remBase ) );
	}
	#works hgroup{
		margin-bottom : calc( 18 var( --remBase ) );
	}
	#works hgroup p > span{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#works hgroup p > picture{
		margin-top : calc( 17 var( --remBase ) );
	}
	#works hgroup p img{
		max-width : 100%;
	}
	#works hgroup h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#works .box :where( h4 , p , li , h5 ){
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#works .box > :where( p , ul ) + h4{
		margin-top : 1em;
	}
	#works .splide__pagination{
		column-gap : calc( 12 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#works .splide__pagination button{
		height : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#works{
		position : relative;
		padding-inline : max( calc( 80 var( --viewportBase ) ) , calc( ( 100% - 1280px ) / 2 ) );
		padding-top : calc( 88 var( --remBase ) );
		padding-bottom : calc( 120 var( --remBase ) );
		overflow-x : clip;
	}
	#works::after{
		position : absolute;
		top : calc( 100% - 280 var( --remBase ) );
		left : max( calc( 31 var( --viewportBase ) ) , calc( 50% - 689px ) );
		display : block;
		width : auto;
		height : calc( 977.7 var( --remBase ) );
		aspect-ratio : 194.81/977.7;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-image : url( "../images/ui/label/design.svg" );
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	#works .splide__arrows button{
		top : calc( 238 var( --remBase ) );
		width : calc( 36 var( --viewportBase ) );
		height : calc( 76 var( --remBase ) );
	}
	#works .splide__arrows button img{
		height : calc( 20 var( --remBase ) );
	}
	#works .splide__arrow--prev{
		left : calc( 2 var( --viewportBase ) );
	}
	#works .splide__arrow--next{
		right : calc( 2 var( --viewportBase ) );
	}
	#works .splide__track{
		z-index : 2;
		margin-top : calc( 60 var( --remBase ) );
	}
	#works .splide__slide{
		display : grid;
		grid-template-columns : calc( 357 * 100% / 1084 ) 1fr;
		column-gap : calc( 39 * 100% / 1084 );
		padding-top : calc( 46 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
		padding-left : calc( 85 var( --percentBase ) );
		padding-right : calc( 71 var( --percentBase ) );
		border-left : solid calc( 20 var( --remBase ) ) transparent;
		border-right : solid calc( 20 var( --remBase ) ) transparent;
	}
	#works .splide__slide::before , #works .splide__slide::after{
		height : calc( 17 var( --remBase ) );
		font-size : 1.1rem;
	}
	#works .splide__slide::before{
		left : calc( -3 var( --percentBase ) );
		width : calc( 60 var( --percentBase ) );
	}
	#works .splide__slide::after{
		left : calc( ( -3 + 60 ) var( --percentBase ) );
		width : calc( 17 var( --percentBase ) );
	}
	#works .splide__slide > :where( .pics , picture ){
		grid-row : 1;
		grid-column : 1;
	}
	#works .pics{
		grid-template-rows : calc( 48 var( --remBase ) ) calc( 73 var( --remBase ) ) calc( 203 var( --remBase ) ) calc( 49 var( --remBase ) ) calc( 73 var( --remBase ) );
		grid-template-columns : calc( 111 * 100% / 357 ) calc( 43 * 100% / 357 ) calc( 49 * 100% / 357 ) calc( 62 * 100% / 357 ) 1fr;
	}
	#works .pics li:nth-child( 1 ){
		grid-row : 1/4;
		grid-column : 1/3;
	}
	#works .pics li:nth-child( 2 ){
		grid-row : 3/-1;
		grid-column : 2/5;
	}
	#works .pics li:nth-child( 3 ){
		grid-row : 2/5;
		grid-column : 4/-1;
	}
	#works .pics li img{
		top : calc( -1 * var( --top ) var( --remBase ) );
	}
	#works .box{
		grid-row : 1;
		grid-column : 2;
	}
	#works hgroup{
		margin-bottom : calc( 21 var( --remBase ) );
	}
	#works hgroup p > span{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#works hgroup p > picture{
		margin-top : calc( 22 var( --remBase ) );
	}
	#works hgroup h3{
		margin-top : calc( 10 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#works .box :where( h4 , p , li , h5 ){
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#works .box > :where( p , ul ) + h4{
		margin-top : 1em;
	}
	#works .splide__pagination{
		column-gap : calc( 16 var( --viewportBase ) );
		margin-top : calc( 61.5 var( --remBase ) );
	}
	#works .splide__pagination button{
		height : calc( 11 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#works .splide__pagination button:hover{
		background-color : #808080;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#works .splide__pagination button{
		transition : background-color var( --transitionBase );
	}
}

/* --------------------------------------------
PRICE
--------------------------------------------- */
#price .box{
	position : relative;
	background-color : white;
	outline : solid 1px var( --base );
	outline-offset : calc( -8 var( --remBase ) );
	box-shadow : 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) calc( -4 var( --remBase ) ) color-mix( in srgb , #0c0c0d 10% , transparent );
}
#price hgroup p{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	justify-content : start;
}
#price hgroup p span{
	display : grid;
	place-items : center;
	height : 100%;
}
#price hgroup p span:nth-of-type( 1 ){
	color : var( --base );
	background-color : white;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#price hgroup p span:nth-of-type( 2 ){
	color : white;
	background-color : var( --base );
}
#price hgroup h3 > span{
	display : block;
	font-weight : 700;
	line-height : 1.5;
	color : var( --navy );
	text-align : center;
}
#price hgroup h3 > span span{
	line-height : 1.5;
}
#price .box > p{
	line-height : 1.5;
	text-align : center;
}
#price h4{
	font-weight : 700;
	text-align : center;
}
#price details{
	background-color : white;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#price summary{
	position : relative;
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
#price summary::before , #price summary::after{
	position : absolute;
	top : 50%;
	display : block;
	height : 1px;
	font-size : 0;
	content : "";
	background-color : var( --base );
	translate : 0 -50%;
}
#price summary::after{
	rotate : -90deg;
}
#price .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
#price .detailsContent > div{
	overflow : hidden;
}
#price .detailsContent :where( h5 , p ){
	line-height : 1.5;
}
#price .detailsContent h5{
	font-weight : 400;
}
#price details.is-open summary::after{
	rotate : 0deg;
}
#price details.is-open .detailsContent{
	grid-template-rows : 1fr;
	border-top : solid 1px var( --base );
}
#price .contacts > p{
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#price{
		padding-top : calc( 52 var( --remBase ) );
		padding-bottom : calc( 84 var( --remBase ) );
	}
	#price .box{
		padding-top : calc( 55 var( --remBase ) );
		padding-bottom : calc( 38 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#price hgroup p{
		width : calc( 80 var( --percentBase ) );
		height : calc( 14 var( --remBase ) );
	}
	#price hgroup p span{
		font-size : 1rem;
	}
	#price hgroup h3 > span:nth-of-type( 1 ){
		font-size : clamp( var( --min ) , 4.8rem , var( --max ) );
	}
	#price hgroup h3 > span:nth-of-type( 1 ) span{
		font-size : clamp( var( --min ) , 2.8rem , var( --max ) );
	}
	#price hgroup h3 > span:nth-of-type( 2 ){
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#price .box > p{
		margin-top : calc( 23 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#price .details{
		margin-top : calc( 40 var( --remBase ) );
	}
	#price h4{
		margin-bottom : calc( 20 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#price details + details{
		margin-top : calc( 20 var( --remBase ) );
	}
	#price summary{
		padding-inline : calc( 56 var( --percentBase ) );
		padding-top : calc( 9 var( --remBase ) );
		padding-bottom : calc( 10 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#price summary::before , #price summary::after{
		right : calc( 12 var( --percentBase ) );
		width : calc( 20 var( --percentBase ) );
	}
	#price .detailsContent{
		padding-inline : calc( 18 var( --percentBase ) );
	}
	#price .detailsContent li + li{
		margin-top : calc( 12 var( --remBase ) );
	}
	#price .detailsContent :where( h5 , p ){
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#price details.is-open .detailsContent > div{
		padding-top : calc( 18 var( --remBase ) );
		padding-bottom : calc( 25 var( --remBase ) );
	}
	#price .contacts{
		margin-top : calc( 40 var( --remBase ) );
	}
	#price .contacts > p{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#price .contacts ul{
		margin-top : calc( 28 var( --remBase ) );
	}
	#price .contacts li{
		height : calc( 60 var( --remBase ) );
	}
	#price .contacts li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#price .contacts a{
		--down : calc( 4 var( --remBase ) );
	}
	#price .contacts a span{
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#price .contacts a::after{
		right : calc( 7 var( --percentBase ) );
	}
	#price .contacts .link-contact span{
		column-gap : calc( 8 * 100% / 281 );
		padding-left : calc( 54 var( --percentBase ) );
	}
	#price .contacts .link-apply span{
		column-gap : calc( 10 * 100% / 255 );
		padding-left : calc( 80 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#price{
		padding-top : calc( 85 var( --remBase ) );
		padding-bottom : calc( 126 var( --remBase ) );
	}
	#price .box{
		width : calc( 890 var( --percentBase ) );
		padding-block : calc( 48 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 64 var( --remBase ) );
	}
	#price hgroup p{
		grid-template-columns : calc( 44 * 100% / 89 ) calc( 45 * 100% / 89 );
		width : calc( 89 * 100% / 890 );
		height : calc( 17 var( --remBase ) );
	}
	#price hgroup p span{
		font-size : 1.1rem;
	}
	#price hgroup h3 > span:nth-of-type( 1 ){
		font-size : clamp( var( --min ) , 6.8rem , var( --max ) );
	}
	#price hgroup h3 > span:nth-of-type( 1 ) span{
		font-size : clamp( var( --min ) , 4.2rem , var( --max ) );
	}
	#price hgroup h3 > span:nth-of-type( 2 ){
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	}
	#price .box > p{
		margin-top : calc( 21 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
	#price .details{
		margin-top : calc( 80 var( --remBase ) );
	}
	#price h4{
		margin-bottom : calc( 30 var( --remBase ) );
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	}
	#price details{
		width : calc( 890 var( --percentBase ) );
		margin-inline : auto;
	}
	#price details + details{
		margin-top : calc( 30 var( --remBase ) );
	}
	#price summary{
		padding-inline : calc( 62 * 100% / 890 );
		padding-top : calc( 12 var( --remBase ) );
		padding-bottom : calc( 16.5 var( --remBase ) );
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#price summary::before , #price summary::after{
		right : calc( 18 * 100% / 890 );
		width : calc( 26 * 100% / 890 );
	}
	#price .detailsContent{
		padding-inline : calc( 25 * 100% / 890 );
	}
	#price .detailsContent li + li{
		margin-top : calc( 14 var( --remBase ) );
	}
	#price .detailsContent :where( h5 , p ){
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#price details.is-open .detailsContent > div{
		padding-block : calc( 30 var( --remBase ) );
	}
	#price .contacts{
		margin-top : calc( 80 var( --remBase ) );
	}
	#price .contacts > p{
		font-size : clamp( var( --min ) , 2.4rem , var( --max ) );
	}
	#price .contacts ul{
		display : grid;
		grid-template-rows : calc( 80 var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 302 var( --percentBase ) ) );
		column-gap : calc( 45 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 31 var( --remBase ) );
	}
	#price .contacts a{
		--down : calc( 5 var( --remBase ) );
	}
	#price .contacts a span{
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#price .contacts a::after{
		right : calc( 7* 100% / 302 );
	}
	#price .contacts .link-contact span{
		column-gap : calc( 8* 100% / 265 );
		padding-left : calc( 37* 100% / 302 );
	}
	#price .contacts .link-apply span{
		column-gap : calc( 10* 100% / 239 );
		padding-left : calc( 63* 100% / 302 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#price summary::after{
		transition : rotate var( --transitionBase );
	}
	#price .detailsContent{
		transition : grid-template-rows var( --transitionBase ) .1s;
	}
	#price .detailsContent > div{
		transition : padding var( --transitionBase );
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow ol{
	color : var( --base );
	background-color : white;
}
#flow li{
	position : relative;
	counter-increment : no;
	background-repeat : no-repeat;
}
#flow li:nth-child( 1 ){
	background-image : url( "../images/home/flow/icon01.svg" );
}
#flow li:nth-child( 2 ){
	background-image : url( "../images/home/flow/icon02.svg" );
}
#flow li:nth-child( 3 ){
	background-image : url( "../images/home/flow/icon03.svg" );
}
#flow li:nth-child( 4 ){
	background-image : url( "../images/home/flow/icon04.svg" );
}
#flow li:nth-child( 5 ){
	background-image : url( "../images/home/flow/icon05.svg" );
}
#flow li:nth-child( 6 ){
	background-image : url( "../images/home/flow/icon06.svg" );
}
#flow h3{
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
#flow h3::before , #flow h3::after{
	position : absolute;
	top : 0;
	display : grid;
	place-items : center;
	font-weight : 400;
	line-height : 1;
}
#flow h3::before{
	content : "STEP";
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#flow h3::after{
	color : white;
	content : counter( no , decimal-leading-zero );
	background-color : var( --base );
}
#flow p{
	line-height : 1.5;
}
#flow p:not( [data-before] ) + p{
	margin-top : calc( 8 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#flow{
		padding-top : calc( 42 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#flow ol{
		padding-inline : calc( 17 var( --percentBase ) );
		padding-top : calc( 20 var( --remBase ) );
		padding-bottom : calc( 18 var( --remBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#flow li{
		padding-top : calc( 179 var( --remBase ) );
		background-position : 50% calc( 14 var( --remBase ) );
		background-size : auto calc( 140 var( --remBase ) );
	}
	#flow li + li{
		margin-top : calc( 51 var( --remBase ) );
	}
	#flow li + li::before{
		position : absolute;
		top : calc( -20 var( --remBase ) - 1px );
		left : 0;
		display : block;
		width : 100%;
		height : 1px;
		font-size : 0;
		content : "";
		background-color : #dcdcdc;
	}
	#flow h3{
		margin-bottom : calc( 10 var( --remBase ) );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#flow h3::before , #flow h3::after{
		height : calc( 14 var( --remBase ) );
		font-size : 1rem;
	}
	#flow h3::before{
		left : 0;
		width : calc( 39 * 100% / 301 );
	}
	#flow h3::after{
		left : calc( 39 * 100% / 301 );
		width : calc( 14 * 100% / 301 );
	}
	#flow p{
		font-size : clamp( var( --min ) , 1.2rem , var( --max ) );
	}
}
@media print , screen and ( width > 750px ){
	#flow{
		padding-top : calc( 86 var( --remBase ) );
		padding-bottom : calc( 130 var( --remBase ) );
	}
	#flow ol{
		display : grid;
		grid-template-columns : calc( ( 327 + 38.5 ) * 100% / 1135 ) calc( ( 38.5 + 327 + 38.5 ) * 100% / 1135 ) calc( ( 38.5 + 327  ) * 100% / 1135 );
		row-gap : calc( 77 var( --remBase ) );
		justify-content : space-between;
		padding-top : calc( 51 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
		padding-left : calc( 53 var( --percentBase ) );
		padding-right : calc( 52 var( --percentBase ) );
		margin-top : calc( 60 var( --remBase ) );
	}
	#flow li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
		row-gap : calc( 15 var( --remBase ) );
		align-items : start;
		padding-top : calc( 235 var( --remBase ) );
		background-position : 50% calc( 22 var( --remBase ) );
		background-size : auto calc( 180 var( --remBase ) );
	}
	#flow li:nth-child( 3n+1 ){
		padding-right : calc( 38 * 100% / 365.5 );
	}
	#flow li:nth-child( 3n+2 ){
		padding-inline : calc( 38 * 100% / 404 );
	}
	#flow li:nth-child( 3n+3 ){
		padding-left : calc( 38 * 100% / 365.5 );
	}
	#flow li:not( :nth-child( 3n+1 ) )::before{
		position : absolute;
		top : 0;
		left : -.5px;
		display : block;
		width : 1px;
		height : 100%;
		font-size : 0;
		content : "";
		background-color : #dcdcdc;
	}
	#flow li:nth-child( n+4 )::after{
		position : absolute;
		top : calc( -38 var( --remBase ) - .5px );
		left : 0;
		display : block;
		width : 100%;
		height : 1px;
		font-size : 0;
		content : "";
		background-color : #dcdcdc;
	}
	#flow h3{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#flow h3::before , #flow h3::after{
		height : calc( 17 var( --remBase ) );
		font-size : 1.1rem;
	}
	#flow li:nth-child( 3n+1 ) h3::before{
		left : 0;
		width : calc( 45 * 100% / 365.5 );
	}
	#flow li:nth-child( 3n+1 ) h3::after{
		left : calc( 45 * 100% / 365.5 );
		width : calc( 17 * 100% / 365.5 );
	}
	#flow li:nth-child( 3n+2 ) h3::before{
		left : calc( 38 * 100% / 404 );
		width : calc( 45 * 100% / 404 );
	}
	#flow li:nth-child( 3n+2 ) h3::after{
		left : calc( ( 45 + 38 ) * 100% / 404 );
		width : calc( 17 * 100% / 404 );
	}
	#flow li:nth-child( 3n+3 ) h3::before{
		left : calc( 38 * 100% / 365.5 );
		width : calc( 45 * 100% / 365.5 );
	}
	#flow li:nth-child( 3n+3 ) h3::after{
		left : calc( ( 45 + 38 ) * 100% / 365.5 );
		width : calc( 17 * 100% / 365.5 );
	}
	#flow p{
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#flow li:nth-child( 6 ) h3{
		text-align : center;
		text-indent : -.04em;
		letter-spacing : -.04em;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq details{
	background-color : white;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
#faq details + details{
	margin-top : 1px;
}
#faq summary{
	display : grid;
	font-weight : 700;
}
#faq summary::before{
	display : grid;
	place-items : center;
	line-height : 1.5;
	content : "Q";
	background-color : white;
}
#faq summary span{
	display : grid;
	align-content : center;
	line-height : 1.5;
	color : white;
	background-color : var( --base );
}
#faq summary span::before , #faq summary span::after{
	display : block;
	grid-row : 1;
	grid-column : 2;
	align-self : center;
	width : 100%;
	height : 1px;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-color : white;
}
#faq summary span::after{
	rotate : -90deg;
}
#faq .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
	border-top : solid 1px var( --base );
}
#faq .detailsContent > div{
	display : grid;
	align-items : start;
	overflow : hidden;
	color : var( --navy );
}
#faq .detailsContent > div::before{
	display : grid;
	place-items : center;
	font-weight : 700;
	line-height : 1.5;
	content : "A";
}
#faq .detailsContent > div > *{
	line-height : 1.5;
}
#faq details:not( .is-open ) .detailsContent > div{
	padding-bottom : 0;
}
#faq details.is-open summary span::after{
	rotate : 0deg;
}
#faq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
@media screen and ( width <= 750px ){
	#faq{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 70 var( --remBase ) );
	}
	#faq .title01{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#faq summary{
		grid-template-columns : calc( 40 var( --percentBase ) ) 1fr ;
	}
	#faq summary::before{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#faq summary span{
		grid-template-columns : 1fr calc( 20 * 100% / 277 );
		column-gap : calc( 9 * 100% / 277 );
		padding-top : calc( 5 var( --remBase ) );
		padding-bottom : calc( 7 var( --remBase ) );
		padding-left : calc( 9 * 100% / 295 );
		padding-right : calc( 9 * 100% / 295 );
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#faq .detailsContent > div{
		grid-template-columns : calc( 40 var( --percentBase ) ) 1fr ;
	}
	#faq .detailsContent > div::before{
		font-size : clamp( var( --min ) , 1.6rem , var( --max ) );
	}
	#faq .detailsContent > div > *{
		padding-left : calc( 8 * 100% / 295 );
		padding-right : calc( 10 * 100% / 295 );
		font-size : clamp( var( --min ) , 1.4rem , var( --max ) );
	}
	#faq details.is-open .detailsContent > div{
		padding-top : calc( 13 var( --remBase ) );
		padding-bottom : calc( 14 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		position : relative;
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 126 var( --remBase ) );
		overflow-x : clip;
	}
	#faq::before{
		position : absolute;
		top : calc( -176 var( --remBase ) );
		display : block;
		width : auto;
		height : calc( 1564.67 var( --remBase ) );
		aspect-ratio : 194.81/1564.67;
		font-size : 0;
		content : "";
		background-image : url( "../images/ui/label/marketing.svg" );
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : contain;
	}
	#faq .title01{
		margin-bottom : calc( 60 var( --remBase ) );
	}
	#faq details{
		width : calc( 890 var( --percentBase ) );
		margin-inline : auto;
	}
	#faq summary{
		grid-template-columns : calc( 60 * 100% / 890 ) 1fr ;
	}
	#faq summary::before{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#faq summary span{
		grid-template-columns : 1fr calc( 26 * 100% / 801 );
		padding-top : calc( 14 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
		padding-left : calc( 12 * 100% / 830 );
		padding-right : calc( 17 * 100% / 830 );
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#faq .detailsContent > div{
		grid-template-columns : calc( 60 * 100% / 890 ) 1fr ;
	}
	#faq .detailsContent > div::before{
		font-size : clamp( var( --min ) , 2rem , var( --max ) );
	}
	#faq .detailsContent > div > *{
		padding-left : calc( 22 * 100% / 830 );
		padding-right : calc( 70 * 100% / 830 );
		font-size : clamp( var( --min ) , 1.8rem , var( --max ) );
	}
	#faq details.is-open .detailsContent > div{
		padding-top : calc( 21 var( --remBase ) );
		padding-bottom : calc( 28 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#faq::before{
		left : calc( 1232 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#faq::before{
		left : calc( 50% + 512px );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#faq summary span::after{
		transition : rotate var( --transitionBase );
	}
	#faq .detailsContent{
		transition : grid-template-rows var( --transitionBase ) .1s;
	}
	#faq .detailsContent > div{
		transition : padding var( --transitionBase );
	}
}