@charset "UTF-8";

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason{
	position : relative;
	overflow-x : clip;
	background-color : #fff;
	background-color : #dcf8ff;
	> header{
		position : relative;
		hgroup{
			font-weight : 700;
			p{
				>span{
					&:nth-of-type( 1 ){
						display : block;
						color : #6dbfe3;
						text-align : center;
					}
					&:nth-of-type( 2 ){
						position : relative;
						display : block;
						align-content : center;
						margin-inline : auto;
						color : white;
						text-align : center;
						background-color : #6dbfe3;
						border-radius : 100vmax;
						&::before , &::after{
							position : absolute;
							display : block;
							width : auto;
							font-size : 0;
							content : "";
						}
						&::before{
							top : calc( 100% - 1px );
							left : 50%;
							aspect-ratio : 1;
							clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
							background-color : #6dbfe3;
							translate : -50% 0;
						}
						&::after{
							top : 50%;
							aspect-ratio : 292/312;
							background : url( "../images/ui/parts/char02.webp" ) left top / contain no-repeat;
							translate : 0 -50%;
						}
						span{
							text-decoration : underline;
							text-decoration-color : #ffea80;
							text-underline-offset : .2em;
						}
					}
				}
			}
			h2{
				display : grid;
				grid-auto-flow : column;
				align-items : baseline;
				align-items : center;
				justify-content : center;
				font-weight : 700;
				color : var( --blue03 );
				span{
					font-family : Jost , sans-serif;
				}
			}
		}
	}
	.links{
		display : flex;
		flex-wrap : wrap;
		justify-content : center;
		li{
			counter-increment : no;
		}
		a{
			position : relative;
			display : block;
			align-content : center;
			width : auto;
			aspect-ratio : 272/270;
			font-weight : 700;
			color : var( --blue03 );
			text-align : center;
			background : image-set( url( "../images/ui/parts/emblem.avif" ) type( "image/avif" ) , url( "../images/ui/parts/emblem.webp" ) type( "image/webp" ) ) center / contain no-repeat;
			background-color : white;
			border-radius : 50%;
			&::before{
				position : absolute;
				left : 50%;
				z-index : 2;
				font-family : Jost , sans-serif;
				line-height : 1;
				content : counter( no , decimal-leading-zero );
				translate : -50% 0;
			}
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 90 * var( --remBase ) );
		> header{
			p{
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 27 * var( --remBase ) );
						line-height : calc( 40 / 27 );
					}
					&:nth-of-type( 2 ){
						width : calc( 402 * var( --contentBase ) );
						padding-top : calc( 14 * var( --remBase ) );
						padding-bottom : calc( 14 * var( --remBase ) );
						margin-top : calc( 12 * var( --remBase ) );
						font-size : calc( 27 * var( --remBase ) );
						line-height : calc( 40 / 27 );
						&::before{
							height : calc( 16 * var( --remBase ) );
							aspect-ratio : 20/16;
						}
						&::after{
							right : calc( -36 * var( --remBase ) );
							height : calc( 94.5 * var( --remBase ) );
						}
						span{
							text-decoration-thickness : calc( 5 * var( --remBase ) );
						}
					}
				}
			}
			h2{
				margin-top : calc( 52 * var( --remBase ) );
				font-size : calc( 30 * var( --remBase ) );
				line-height : calc( 46 / 30 );
				span{
					font-size : calc( 46 * var( --remBase ) );
				}
			}
		}
		.links{
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 12 * var( --contentBase ) );
			margin-top : calc( 52 * var( --remBase ) );
			a{
				height : calc( 132 * var( --remBase ) );
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 24 / 15 );
				&::before{
					top : calc( -38 * .8 * var( --remBase ) );
					font-size : calc( 38 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 146 * var( --remBase ) );
		> header{
			p{
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 38 * var( --remBase ) );
						line-height : calc( 57 / 38 );
					}
					&:nth-of-type( 2 ){
						width : calc( 682 * var( --contentBase ) );
						padding-block : calc( 20 * var( --remBase ) );
						margin-top : calc( 16 * var( --remBase ) );
						font-size : calc( 38 * var( --remBase ) );
						line-height : calc( 57 / 38 );
						&::before{
							height : calc( 23 * var( --remBase ) );
							aspect-ratio : 28/23;
						}
						&::after{
							right : calc( -75 * var( --remBase ) );
							height : calc( 156 * var( --remBase ) );
						}
						span{
							text-decoration-thickness : calc( 5 * var( --remBase ) );
						}
					}
				}
			}
			h2{
				margin-top : calc( 72 * var( --remBase ) );
				font-size : calc( 39 * var( --remBase ) );
				line-height : calc( 58.5 / 39 );
				span{
					font-size : calc( 59 * var( --remBase ) );
				}
			}
		}
		.links{
			row-gap : calc( 12 * var( --remBase ) );
			column-gap : calc( 44 * var( --contentBase ) );
			width : calc( 1080 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 80 * var( --remBase ) );
			a{
				height : calc( 270 * var( --remBase ) );
				font-size : calc( 23 * var( --remBase ) );
				line-height : calc( 34 / 23 );
				&::before{
					top : calc( -57 * .8 * var( --remBase ) );
					font-size : calc( 57 * var( --remBase ) );
				}
			}
		}
	}
}
:where( #reason01 , #reason02 , #reason03 , #reason04 , #reason05 ){
	hgroup{
		color : var( --blue03 );
		p{
			text-align : center;
			> span{
				&:nth-of-type( 1 ){
					position : relative;
					display : block;
					font-weight : 500;
					&::before , &::after{
						position : absolute;
						top : 50%;
						z-index : 1;
						display : block;
						height : 1px;
						line-height : 1;
						content : "";
						background : var( --blue03 );
					}
					&::before{
						left : -1.5em;
						transform : translate( 0 , -50% ) rotate( 60deg );
					}
					&::after{
						right : -1.5em;
						transform : translate( 0 , -50% ) rotate( 300deg );
					}
				}
				&:nth-of-type( 2 ){
					font-family : Jost , sans-serif;
					font-weight : 700;
				}
			}
		}
		h3{
			font-weight : 700;
		}
	}
	.box{
		background-color : white;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 60 * var( --remBase ) );
		> hgroup{
			p{
				text-align : center;
				span{
					&:nth-of-type( 1 ){
						width : fit-content;
						margin-inline : auto;
						font-size : calc( 16.2 * var( --remBase ) );
						line-height : calc( 24 / 16 );
						&::before , &::after{
							width : calc( 24 * var( --remBase ) );
						}
					}
					&:nth-of-type( 2 ){
						display : block;
						font-size : calc( 56 * var( --remBase ) );
						text-align : center;
					}
				}
			}
			h3{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 29 * var( --remBase ) );
				line-height : calc( 44 / 29 );
				text-align : center;
			}
		}
		.box{
			padding-block : calc( 44 * var( --remBase ) );
			padding-inline : calc( 14 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 18 * var( --remBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 100 * var( --remBase ) );
		> hgroup{
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 40 * var( --contentBase ) );
			align-items : end;
			justify-content : start;
			width : calc( 1080 * var( --contentBase ) );
			padding-left : calc( 40 * var( --contentBase ) );
			margin-inline : auto;
			p{
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 17 * var( --remBase ) );
						line-height : calc( 25.5 / 17 );
						&::before , &::after{
							width : calc( 25 * var( --remBase ) );
						}
					}
					&:nth-of-type( 2 ){
						font-size : calc( 100 * var( --remBase ) );
					}
				}
			}
			h3{
				padding-bottom : calc( 8 * var( --remBase ) );
				font-size : calc( 41 * var( --remBase ) );
				line-height : calc( 62 / 41 );
			}
		}
		.box{
			width : calc( 1080 * var( --contentBase ) );
			padding-block : calc( 60 * var( --remBase ) );
			padding-inline : calc( 38 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( -32 * var( --remBase ) );
			border-radius : calc( 30 * var( --remBase ) );
		}
	}
}
#reason01 .box{
	p{
		font-weight : 500;
	}
	picture{
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	ol{
		display : grid;
		justify-content : space-between;
		overflow : hidden;
		li{
			position : relative;
			&::before , &::after{
				position : absolute;
				top : 0;
				left : 0;
				align-content : center;
				font-family : Roboto , sans-serif;
				font-weight : 500;
				color : white;
				text-align : center;
				border-radius : 0 100vmax 100vmax 0;
			}
			&:nth-child( 1 ){
				&::before{
					content : "Before";
					background-color : #31b193;
				}
			}
			&:nth-child( 2 ){
				&::before{
					content : "After";
					background-color : var( --blue );
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		p{
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 38 / 22 );
		}
		ul{
			margin-top : calc( 28 * var( --remBase ) );
			> li + li{
				margin-top : calc( 28 * var( --remBase ) );
			}
		}
		ol{
			grid-template-rows : calc( 252 * var( --remBase ) );
			grid-template-columns : repeat( 2 , calc( 210 * 100% / 428 ) );
			border-radius : 0 calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) );
			li{
				&::before{
					width : calc( 112 * 100% / 210 );
					height : calc( 42 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		p{
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 34 / 20 );
		}
		ul{
			display : grid;
			grid-template-rows : calc( 280 * var( --remBase ) );
			grid-template-columns : repeat( 2 , calc( 470 * 100% / 1004 ) );
			justify-content : space-between;
			margin-top : calc( 24 * var( --remBase ) );
		}
		ol{
			grid-template-columns : repeat( 2 , calc( 232 * 100% / 470 ) );
			border-radius : 0 calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
			li{
				&::before{
					width : calc( 100 * 100% / 232 );
					height : calc( 38 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
				}
			}
		}
	}
}
#reason02 .box{
	> ul{
		&::before{
			display : block;
			height : auto;
			aspect-ratio : 412/476;
			font-size : 0;
			content : "";
			background : url( "../images/top/reason/reason02/bg01.webp" ) left top / contain no-repeat;
		}
		li{
			font-weight : 500;
			color : white;
			background-color : var( --blue03 );
			border-radius : 100vmax;
		}
	}
	> p{
		&:nth-of-type( 1 ){
			font-weight : 500;
			text-align : center;
			em{
				font-weight : 700;
				&:nth-of-type( 1 ){
					color : var( --blue );
				}
				&:nth-of-type( 2 ){
					color : var( --orange );
				}
			}
		}
		&:nth-of-type( 2 ){
			font-weight : 500;
			color : var( --blue03 );
		}
	}
	@media screen and ( width <= 768px ){
		> ul{
			&::before{
				width : calc( 206 * 100% / 428 );
				margin-inline : auto;
				margin-bottom : calc( 28 * var( --remBase ) );
			}
			li{
				padding-block : calc( 12 * var( --remBase ) );
				padding-inline : calc( 24 * 100% / 428 );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				+ li{
					margin-top : calc( 12 * var( --remBase ) );
				}
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 52 * var( --remBase ) );
				font-size : calc( 27 * var( --remBase ) );
				line-height : calc( 40 / 27 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 32 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 38 / 22 );
			}
		}
		.link01{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> ul{
			display : grid;
			grid-template-rows : 1fr auto auto auto 1fr;
			grid-template-columns : calc( 206 * 100% / 1004 ) auto;
			row-gap : calc( 10 * var( --remBase ) );
			column-gap : calc( 48 * 100% / 1004 );
			align-content : center;
			align-items : center;
			justify-content : center;
			&::before{
				grid-row : 1/-1;
				grid-column : 1;
			}
			li{
				display : inline-block;
				grid-column : 2;
				width : fit-content;
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 22 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				&:nth-child( 1 ){
					grid-row : 2;
				}
				&:nth-child( 2 ){
					grid-row : 3;
				}
				&:nth-child( 3 ){
					grid-row : 4;
				}
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 64 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 60 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 34 / 20 );
				text-align : center;
			}
		}
		.link01{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}
#reason0201{
	overflow : hidden;
	h4{
		font-weight : 500;
		color : white;
	}
	li{
		align-content : center;
		font-weight : 700;
		color : #31b193;
		text-align : center;
		background-color : white;
		span{
			display : block;
			text-align : center;
			+ span{
				font-weight : 500;
			}
		}
	}
	&::after{
		display : block;
		height : auto;
		aspect-ratio : 558/484;
		font-size : 0;
		content : "";
		background : url( "../images/top/reason/reason02/bg02.webp" ) left top / contain no-repeat;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 72 * var( --remBase ) );
		border-radius : calc( 24 * var( --remBase ) );
		:where(  h4 , ul ){
			padding-inline : calc( 27 * 100% / 428 );
			background-color : #31b193;
		}
		h4{
			padding-top : calc( 28 * var( --remBase ) );
			padding-bottom : calc( 24 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 34 / 22 );
		}
		ul{
			padding-bottom : calc( 28 * var( --remBase ) );
		}
		li{
			height : calc( 110 * var( --remBase ) );
			font-size : calc( 27 * var( --remBase ) );
			line-height : calc( 40 / 27 );
			border-radius : calc( 12 * var( --remBase ) );
			+ li{
				margin-top : calc( 16 * var( --remBase ) );
			}
			span + span{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 26 / 16 );
			}
		}
		&::after{
			width : 100%;
			background-position-y : bottom;
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : 1fr auto calc( 98 * var( --remBase ) ) 1fr;
		grid-template-columns : calc( 38 * 100% / 838 ) 1fr calc( 38 * 100% / 838 ) calc( 279 * 100% / 838 );
		row-gap : calc( 22 * var( --remBase ) );
		width : calc( 838 * 100% / 1004 );
		height : calc( 242 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 64 * var( --remBase ) );
		background-color : #31b193;
		border-radius : calc( 20 * var( --remBase ) );
		h4{
			grid-row : 2;
			grid-column : 2;
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , 1fr );
			grid-row : 3;
			grid-column : 2;
			column-gap : calc( 16 * 100% / 483 );
		}
		li{
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 36 / 24 );
			border-radius : calc( 10 * var( --remBase ) );
			span + span{
				font-size : calc( 15 * var( --remBase ) );
				line-height : calc( 22 / 15 );
			}
		}
		&::after{
			grid-row : 1/-1;
			grid-column : 4;
		}
	}
}
#reason0202{
	>ul{
		> li{
			overflow : hidden;
			border-radius : calc( 12 * var( --remBase ) );
			outline : solid;
			outline-width : calc( 3 * var( --remBase ) );
			outline-color : #31b193;
			outline-offset : calc( -3 * var( --remBase ) );
		}
	}
	h4{
		font-weight : 700;
		color : white;
		background-color : #31b193;
	}
	> ul{
		> li{
			&:nth-child( 1 ){
				li{
					display : grid;
					grid-auto-flow : column;
					align-items : center;
					justify-content : start;
					font-weight : 500;
					&::before{
						display : block;
						width : auto;
						aspect-ratio : 36.062/30.333;
						font-size : 0;
						content : "";
						background : url( "../images/ui/icon/check01.svg" ) left top / contain no-repeat;
					}
					em{
						font-weight : 700;
						color : var( --blue );
					}
				}
			}
			&:nth-child( 2 ){
				p{
					text-align : center;
					&:nth-of-type( 1 ){
						font-weight : 500;
						em{
							font-weight : 700;
							color : var( --blue );
						}
					}
					&:nth-of-type( 2 ){
						font-weight : 500;
					}
					&:nth-of-type( 4 ){
						font-weight : 500;
					}
				}
			}
		}
	}
	> p{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 90 * var( --remBase ) );
		> ul{
			> li{
				+ li{
					margin-top : calc( 24 * var( --remBase ) );
				}
			}
		}
		h4{
			padding-block : calc( 18 * var( --remBase ) );
			padding-inline : calc( 26 * 100% / 428 );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 37 / 24 );
		}
		> ul{
			> li{
				&:nth-child( 1 ){
					ul{
						padding-block : calc( 38 * var( --remBase ) );
						padding-inline : calc( 26 * 100% / 428 );
					}
					li{
						column-gap : calc( 12 * var( --remBase ) );
						font-size : calc( 22 * var( --remBase ) );
						line-height : calc( 32 / 22 );
						&::before{
							height : calc( 30 * var( --remBase ) );
						}
						+ li{
							margin-top : calc( 28 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 2 ){
					padding-bottom : calc( 38 * var( --remBase ) );
					> p{
						padding-inline : calc( 26 * 100% / 428 );
						&:nth-of-type( 1 ){
							margin-top : calc( 38 * var( --remBase ) );
							font-size : calc( 24 * var( --remBase ) );
							line-height : calc( 38 / 24 );
						}
						&:nth-of-type( 2 ){
							margin-top : calc( 10 * var( --remBase ) );
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 27 / 18 );
						}
						&:nth-of-type( 3 ){
							margin-top : calc( 20 * var( --remBase ) );
						}
						&:nth-of-type( 4 ){
							margin-top : calc( 20 * var( --remBase ) );
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 27 / 18 );
						}
					}
				}
			}
		}
		> p{
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 80 * var( --remBase ) );
		> ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 492 * 100% / 1004 ) );
			justify-content : space-between;
		}
		h4{
			padding-block : calc( 16 * var( --remBase ) );
			padding-inline : calc( 24 * 100% / 492 );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 33 / 22 );
		}
		> ul{
			> li{
				&:nth-child( 1 ){
					ul{
						padding-block : calc( 34 * var( --remBase ) );
						padding-inline : calc( 24 * 100% / 492 );
					}
					li{
						column-gap : calc( 8 * var( --remBase ) );
						font-size : calc( 19 * var( --remBase ) );
						line-height : calc( 28.5 / 19 );
						&::before{
							height : calc( 28 * var( --remBase ) );
						}
						+ li{
							margin-top : calc( 24 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 2 ){
					padding-bottom : calc( 34 * var( --remBase ) );
					> p{
						padding-inline : calc( 24 * 100% / 492 );
						&:nth-of-type( 1 ){
							margin-top : calc( 34 * var( --remBase ) );
							font-size : calc( 20 * var( --remBase ) );
							line-height : calc( 34 / 20 );
						}
						&:nth-of-type( 2 ){
							margin-top : calc( 10 * var( --remBase ) );
							font-size : calc( 16 * var( --remBase ) );
							line-height : calc( 24 / 16 );
						}
						&:nth-of-type( 3 ){
							margin-top : calc( 20 * var( --remBase ) );
						}
						&:nth-of-type( 4 ){
							margin-top : calc( 20 * var( --remBase ) );
							font-size : calc( 16 * var( --remBase ) );
							line-height : calc( 24 / 16 );
						}
					}
				}
			}
		}
		> p{
			justify-content : end;
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
	}
}
#reason03 .box{
	> p{
		&:nth-of-type( 1 ){
			font-weight : 500;
			> span{
				display : block;
			}
			strong{
				font-weight : 700;
				color : white;
				background-color : var( --blue03 );
			}
		}
	}
	.tableWrapper{
		outline-style : solid;
		outline-color : var( --blue03 );
	}
	table{
		th , td{
			text-align : center;
			border : 1px solid var( --blue03 );
		}
		th{
			font-weight : 700;
			color : var( --blue03 );
			background-color : #e2fcff;
		}
		td{
			font-weight : 500;
		}
		thead{
			th{
				border-top-color : transparent;
				&:first-of-type{
					border-left-color : transparent;
				}
				&:last-of-type{
					border-right-color : transparent;
				}
			}
		}
		tbody{
			th{
				border-left-color : transparent;
			}
			td:last-of-type{
				border-right-color : transparent;
			}
			tr:last-of-type{
				th , td{
					border-bottom-color : transparent;
				}
			}
		}
	}
	p[data-before]{
		font-weight : 500;
	}
	h4{
		align-content : center;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : var( --blue03 );
		border-radius : 100vmax;
	}
	ul{
		display : grid;
		justify-content : space-between;
	}
	li{
		font-weight : 500;
		text-align : center;
	}
	li::before{
		display : block;
		width : auto;
		aspect-ratio : 1;
		margin-inline : auto;
		overflow : hidden;
		font-size : 0;
		content : "";
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
		border-radius : 50%;
	}
	li:nth-child( 1 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon01.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon01.webp" ) type( "image/webp" ) );
		}
	}
	li:nth-child( 2 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon02.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon02.webp" ) type( "image/webp" ) );
		}
	}
	li:nth-child( 3 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon03.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon03.webp" ) type( "image/webp" ) );
		}
	}
	li:nth-child( 4 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon04.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon04.webp" ) type( "image/webp" ) );
		}
	}
	li:nth-child( 5 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon05.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon05.webp" ) type( "image/webp" ) );
		}
	}
	li:nth-child( 6 ){
		&::before{
			background-image : image-set( url( "../images/top/reason/reason03/icon06.avif" ) type( "image/avif" ) , url( "../images/top/reason/reason03/icon06.webp" ) type( "image/webp" ) );
		}
	}
	@media screen and ( width <= 768px ){
		> p{
			&:nth-of-type( 1 ){
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 38 / 22 );
				> span + span{
					margin-top : calc( 24 * var( --remBase ) );
				}
				strong{
					padding-block : calc( 7 * var( --remBase ) );
					padding-inline : calc( 12 * var( --remBase ) );
					margin-left : calc( 7 * var( --remBase ) );
					border-radius : calc( 7 * var( --remBase ) );
				}
				> span:nth-of-type( 2 ){
					strong{
						margin-left : 0;
					}
				}
			}
		}
		.tableWrapper{
			width : 100%;
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 12 * 100% / 428 );
			margin-top : calc( 48 * var( --remBase ) );
			overflow-x : auto;
			border-radius : calc( 12 * var( --remBase ) );
			outline-width : calc( 2 * var( --remBase ) );
			outline-offset : calc( -2 * var( --remBase ) );
		}
		table{
			width : 100%;
			table-layout : fixed;
			border-collapse : collapse;
			th , td{
				width : calc( 160 * var( --remBase ) );
				padding-block : calc( 18 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
		> p.is-sp{
			display : grid;
			grid-auto-flow : column;
			column-gap : 1em;
			align-items : baseline;
			justify-content : center;
			margin-top : calc( 24 * var( --remBase ) );
			margin-bottom : calc( 6 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
			text-align : center;
		}
		p[data-before]{
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 27 / 18 );
		}
		section{
			margin-top : calc( 32 * var( --remBase ) );
		}
		h4{
			padding-block : calc( 12 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 33 / 22 );
		}
		ul{
			grid-template-columns : repeat( 2 , calc( 182 * 100% / 374 ) );
			padding-inline : calc( 22 * 100% / 428 );
			margin-top : calc( 20 * var( --remBase ) );
		}
		li::before{
			height : calc( 134 * var( --remBase ) );
			margin-bottom : calc( 24 * var( --remBase ) );
		}
		li{
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 38 / 24 );
		}
		.link01{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			&:nth-of-type( 1 ){
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 34 / 20 );
				> span + span{
					margin-top : calc( 20 * var( --remBase ) );
				}
				strong{
					padding-block : calc( 6 * var( --remBase ) );
					padding-inline : calc( 12 * var( --remBase ) );
					margin-left : calc( 6 * var( --remBase ) );
					border-radius : calc( 6 * var( --remBase ) );
				}
			}
		}
		.tableWrapper{
			width : calc( 772 * 100% / 1004 );
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 12 * 100% / 1004 );
			margin-inline : auto;
			margin-top : calc( 40 * var( --remBase ) );
			margin-bottom : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
			outline-width : calc( 2 * var( --remBase ) );
			outline-offset : calc( -2 * var( --remBase ) );
		}
		table{
			width : 100%;
			table-layout : fixed;
			border-collapse : collapse;
			th , td{
				padding-block : calc( 20 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
		}
		p[data-before]{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
		section{
			margin-top : calc( 60 * var( --remBase ) );
		}
		h4{
			padding-block : calc( 10 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
		}
		ul{
			grid-template-columns : repeat( 6 , calc( 152 * 100% / 1004 ) );
			margin-top : calc( 20 * var( --remBase ) );
		}
		li::before{
			height : calc( 120 * var( --remBase ) );
			margin-bottom : calc( 20 * var( --remBase ) );
		}
		li{
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 33 / 22 );
		}
		.link01{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}
#reason03 + .contentContacts{
	@media screen and ( width <= 768px ){
		margin-top : calc( 32 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 60 * var( --remBase ) );
	}
}
#reason05 .box{
	> p{
		font-weight : 500;
		text-align : center;
	}
	.listStaff{
		display : grid;
		justify-content : space-between;
		li{
			display : subgrid;
			grid-row : span 2;
		}
		picture{
			overflow : hidden;
		}
		.name{
			font-weight : 500;
			text-align : center;
		}
	}
	@media screen and ( width <= 768px ){
		> p{
			margin-top : calc( 44 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 34 / 22 );
		}
		.listStaff{
			grid-template-columns : repeat( 2 , calc( 204 * 100% / 428 ) );
			row-gap : calc( 18 * var( --remBase ) );
			margin-top : calc( 44 * var( --remBase ) );
			picture{
				border-radius : calc( 12 * var( --remBase ) );
			}
			.name{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
		.link01{
			width : 100%;
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			margin-top : calc( 40 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
		}
		.listStaff{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 302 * 100% / 1004 ) );
			row-gap : calc( 42 * var( --remBase ) );
			margin-top : calc( 42 * var( --remBase ) );
			picture{
				height : calc( 230 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
			}
			.name{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
			}
		}
		.link01{
			width : calc( 318 * 100% / 1004 );
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
COMPARISON
--------------------------------------------- */
#comparison{
	h2{
		&::after{
			background : url( "../images/ui/parts/char05.webp" ) left top / contain no-repeat;
		}
	}
	> p{
		font-weight : 500;
	}
	table{
		display : block;
		thead , tbody{
			display : contents;
		}
		tr{
			position : relative;
			display : grid;
			grid-template-columns : repeat( 4 , 25% );
		}
		th , td{
			position : relative;
			display : block;
			align-content : center;
			font-weight : 700;
			text-align : center;
		}
	}
	thead{
		th:not( :nth-of-type( 2 ) ){
			color : #0184ce;
			background-color : #fff;
			background-color : #dcf8ff;
		}
		th:nth-of-type( 2 ){
			color : white;
			background-color : #e52f2f;
			&::before{
				position : absolute;
				bottom : 100%;
				left : 0;
				display : block;
				width : 100%;
				font-size : 0;
				content : "";
				background-color : #e52f2f;
			}
		}
		th:nth-of-type( 4 ){
			&::before{
				position : absolute;
				top : 0;
				left : .5px;
				display : block;
				width : 1px;
				height : 100%;
				font-size : 0;
				content : "";
				background-color : #0184ce;
			}
		}
	}
	tbody{
		tr + tr{
			position : relative;
			&::before{
				position : absolute;
				top : -.5px;
				left : 0;
				display : block;
				width : 100%;
				height : 1px;
				content : "";
				background-image : linear-gradient( to right , white 25% , #0f97de 25% , #0f97de 100% );
			}
		}
		tr:nth-of-type( even ){
			background-color : #f9f9f9;
		}
		th{
			color : white;
			background-color : #0f97de;
		}
		td:nth-of-type( 1 ){
			color : #e52f2f;
			&::before{
				position : absolute;
				inset : 0;
				z-index : 1;
				display : block;
				font-size : 0;
				pointer-events : none;
				content : "";
			}
		}
		td:nth-of-type( 3 ){
			&::after{
				position : absolute;
				top : 0;
				left : .5px;
				display : block;
				width : 1px;
				height : 100%;
				font-size : 0;
				content : "";
				background-color : #0184ce;
			}
		}
		tr:last-of-type{
			td:nth-of-type( 1 ){
				&::after{
					position : absolute;
					top : 100%;
					left : 0;
					display : block;
					width : 100%;
					font-size : 0;
					content : "";
					background-color : #e52f2f;
				}
			}
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 100 * var( --remBase ) );
		padding-bottom : calc( 88 * var( --remBase ) );
		.title01{
			width : calc( 402 * var( --contentBase ) );
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 52 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 38 / 22 );
			}
		}
		.tableWrapper{
			padding-block : calc( 8 * var( --remBase ) );
			margin-top : calc( 48 * var( --remBase ) );
			overflow-x : auto;
		}
		table{
			width : calc( 720 * var( --contentBase ) );
		}
		thead{
			th{
				height : calc( 104 * var( --remBase ) );
			}
			th:not( :nth-of-type( 2 ) ){
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
			th:nth-of-type( 2 ){
				padding-bottom : calc( 8 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 32 / 22 );
				&::before{
					height : calc( 8 * var( --remBase ) );
				}
			}
		}
		tbody{
			th , td{
				padding-block : calc( 18 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
			td:nth-of-type( 1 ){
				&::before{
					background-image : linear-gradient( to right , #e52f2f calc( 8 * var( --remBase ) ) , transparent calc( 8 * var( --remBase ) ) , transparent calc( 100% - 8 * var( --remBase ) ) , #e52f2f calc( 100% - 8 * var( --remBase ) ) , #e52f2f 100% );
				}
			}
			tr:last-of-type{
				td:nth-of-type( 1 ){
					&::after{
						height : calc( 8 * var( --remBase ) );
					}
				}
			}
		}
		> p{
			&:nth-of-type( 2 ){
				display : grid;
				grid-auto-flow : column;
				column-gap : 1em;
				justify-content : center;
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 140 * var( --remBase ) );
		> p{
			margin-top : calc( 72 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 34 / 20 );
			text-align : center;
		}
		table{
			width : 100%;
			margin-top : calc( 52 * var( --remBase ) );
		}
		thead{
			th{
				height : calc( 80 * var( --remBase ) );
			}
			th:not( :nth-of-type( 2 ) ){
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
			th:nth-of-type( 2 ){
				padding-bottom : calc( 10 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
				&::before{
					height : calc( 10 * var( --remBase ) );
				}
			}
		}
		tbody{
			th , td{
				padding-block : calc( 20 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
			td:nth-of-type( 1 ){
				&::before{
					background-image : linear-gradient( to right , #e52f2f calc( 10 * var( --remBase ) ) , transparent calc( 10 * var( --remBase ) ) , transparent calc( 100% - 10 * var( --remBase ) ) , #e52f2f calc( 100% - 10 * var( --remBase ) ) , #e52f2f 100% );
				}
			}
			tr:last-of-type{
				td:nth-of-type( 1 ){
					&::after{
						height : calc( 10 * var( --remBase ) );
					}
				}
			}
		}
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works{
	background-color : #ffea80;
	background-image : repeating-linear-gradient( 135deg , color-mix( in sRGB , white 11% , transparent ) , color-mix( in sRGB , white 11% , transparent ) calc( 10 * var( --remBase ) ) , transparent calc( 10 * var( --remBase ) ) , transparent calc( 20 * var( --remBase ) ) );
	@media screen and ( width <= 768px ){
		padding-block : calc( 88 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 140 * var( --remBase ) );
	}
}
#voices{
	> p{
		font-weight : 500;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		> p{
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 36 / 20 );
		}
		.link01{
			margin-top : calc( 22 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			font-size : calc( 28 * var( --remBase ) );
			line-height : calc( 48 / 28 );
		}
		.link01{
			margin-top : calc( 64 * var( --remBase ) );
		}
	}
}
#voicePickups{
	>li{
		background-color : white;
	}
	hgroup{
		p{
			position : relative;
			z-index : 0;
			display : grid;
			grid-auto-flow : column;
			align-items : baseline;
			justify-content : space-between;
			background-color : var( --blue04 );
			&::before{
				position : absolute;
				left : 0;
				z-index : -1;
				display : block;
				width : 100%;
				font-size : 0;
				content : "";
			}
			&::before{
				background-color : white;
			}
			> span{
				&:nth-of-type( 1 ){
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : start;
					font-weight : 600;
					color : #ffe97a;
					> span{
						&:nth-of-type( 2 ){
							position : absolute;
							z-index : 0;
							&::before{
								paint-order : stroke;
								position : absolute;
								inset : 0;
								z-index : -1;
							}
						}
					}
				}
				&:nth-of-type( 2 ){
					font-weight : 600;
					color : white;
				}
			}
		}
		h3{
			font-weight : 800;
			color : var( --blue04 );
			text-align : center;
			background-color : white;
		}
	}
	.datum{
		background-color : white;
	}
	.payments{
		font-weight : 800;
		> div{
			&:nth-of-type( 1 ){
				--variantColor : #2eab88;
			}
			&:nth-of-type( 2 ){
				--variantColor : #f48629;
			}
		}
		> div{
			outline-style : solid;
			outline-color : var( --variantColor );
		}
		dt , dd{
			text-align : center;
		}
		dt{
			color : white;
			background-color : var( --variantColor );
		}
		dd{
			display : block;
			align-content : center;
			color : var( --variantColor );
		}
	}
	ol{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : space-between;
		picture{
			width : 100%;
			height : 100%;
			overflow : hidden;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
			}
		}
		li{
			position : relative;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				display : block;
				align-content : center;
				font-weight : 600;
				color : white;
				text-align : center;
				border-radius : 0 100vmax 100vmax 0;
			}
			&:nth-child( 1 ){
				&::before{
					content : "Before";
					background-color : #d9d9d9;
				}
			}
			&:nth-child( 2 ){
				outline-style : solid;
				outline-color : var( --blue04 );
				&::before{
					content : "After";
					background-color : var( --blue04 );
				}
				&::after{
					position : absolute;
					display : block;
					width : auto;
					aspect-ratio : 184/175;
					font-size : 0;
					content : "";
					background : url( "../images/localized/works/next.svg" ) left top / contain no-repeat;
				}
			}
		}
	}
	.data{
		display : grid;
		justify-content : space-between;
		> div{
			display : grid;
			height : 100%;
			outline-style : solid;
			outline-color : #d9d9d9;
		}
		dt , dd{
			display : block;
			align-content : center;
			font-weight : 600;
			color : black;
			text-align : center;
		}
		dt{
			background-color : #ffe97a;
		}
		abbr{
			text-decoration : none;
		}
		abbr[title]::after{
			display : block;
			text-align : center;
			content : "（"attr( title ) "）";
		}
	}
	.users{
		display : grid;
		align-items : start;
	}
	figure{
		img{
			width : 100%;
			height : auto;
		}
		figcaption{
			display : flex;
			flex-wrap : wrap;
			column-gap : 1em;
			align-items : start;
			justify-content : center;
			font-weight : 600;
			color : #6c6c6c;
			span:nth-of-type( 3 ){
				width : 100%;
				text-align : center;
			}
		}
	}
	h4{
		font-size : 0;
		font-weight : 700;
		color : var( --blue04 );
		span{
			display : inline;
			&:not( :last-of-type ){
				padding-right : 1em;
			}
		}
	}
	.comment{
		font-weight : 600;
		color : black;
		border-top-color : var( --blue04 );
		border-top-style : solid;
	}
	@media screen and ( width <= 768px ){
		width : calc( 456 * var( --viewportBase ) );
		margin-inline : auto;
		margin-top : calc( 48 * var( --remBase ) );
		> li{
			padding-bottom : calc( 38 * var( --remBase ) );
			filter : drop-shadow( 0 calc( 6 * var( --remBase ) ) calc( 6 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent ) );
			border-radius : 0 0  calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
		}
		> li + li{
			margin-top : calc( 64 * var( --remBase ) );
		}
		hgroup{
			filter : drop-shadow( 0 calc( 6 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent ) );
			p{
				height : calc( 64 * var( --remBase ) );
				padding-inline : calc( 18 * var( --contentBase ) );
				padding-top : calc( 2 * var( --remBase ) );
				padding-bottom : calc( 16 * var( --remBase ) );
				&::before{
					bottom : calc( 14 * var( --remBase ) );
					height : calc( 3 * var( --remBase ) );
				}
				> span{
					&:nth-of-type( 1 ){
						> span{
							&:nth-of-type( 1 ){
								font-size : calc( 30 * var( --remBase ) );
							}
							&:nth-of-type( 2 ){
								top : calc( ( -20 + 2 ) * var( --remBase ) );
								left : calc( 98 * var( --contentBase ) );
								font-size : calc( 54 * var( --remBase ) );
								&::before{
									-webkit-text-stroke : calc( 8 * var( --remBase ) ) var( --blue04 );
								}
							}
						}
					}
					&:nth-of-type( 2 ){
						font-size : calc( 26 * var( --remBase ) );
						line-height : calc( 37 / 26 );
					}
				}
			}
			h3{
				padding-block : calc( 34 * var( --remBase ) );
				padding-inline : 1em;
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 37 / 26 );
				color : #3a7e9d;
				border-radius : 0 0  calc( 14 * var( --remBase ) ) calc( 14 * var( --remBase ) );
			}
		}
		.datum{
			margin-top : calc( 30 * var( --remBase ) );
		}
		.payments{
			width : calc( 416 * 100% / 456 );
			margin-inline : auto;
			> div{
				padding-block : calc( 4 * var( --remBase ) );
				outline-width : calc( 4 * var( --remBase ) );
				outline-offset : calc( -4 * var( --remBase ) );
				+ div{
					margin-top : calc( 14 * var( --remBase ) );
				}
			}
			dt{
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 36 / 26 );
			}
			dd{
				font-size : calc( 34 * var( --remBase ) );
				line-height : calc( 42 / 34 );
			}
		}
		ol{
			grid-template-columns : calc( 180 * 100% / 428 ) calc( 230 * 100% / 428 );
			padding-inline : calc( 14 * var( --contentBase ) );
			margin-top : calc( 34 * var( --remBase ) );
			li{
				border-radius : 0 calc( 12 * var( --remBase ) ) 0 calc( 12 * var( --remBase ) );
				&::before{
					height : calc( 30 * var( --remBase ) );
					font-size : calc( 17 * var( --remBase ) );
				}
				&:nth-of-type( 1 ){
					height : calc( 232 * var( --remBase ) );
					&::before{
						width : calc( 104 * 100% / 180 );
					}
				}
				&:nth-of-type( 2 ){
					height : calc( 256 * var( --remBase ) );
					outline-width : calc( 6 * var( --remBase ) );
					&::before{
						width : calc( 104 * 100% / 230 );
					}
					&::after{
						bottom : calc( -8 * var( --remBase ) );
						left : calc( -98 * 100% / 230 );
						height : calc( 133.206 * var( --remBase ) );
					}
				}
			}
			picture{
				border-radius : 0 calc( 12 * var( --remBase ) ) 0 calc( 12 * var( --remBase ) );
			}
		}
		.data{
			grid-template-columns : repeat( 2 , calc( 206 * 100% / 424 ) );
			height : calc( 60 * var( --remBase ) );
			padding-inline : calc( 16 * var( --contentBase ) );
			margin-top : calc( 36 * var( --remBase ) );
			> div{
				grid-template-columns : calc( 106 * 100% / 206 ) 1fr;
				border-radius : calc( 4 * var( --remBase ) );
				outline-width : calc( 3 * var( --remBase ) );
				outline-offset : calc( -3 * var( --remBase ) );
			}
			dt{
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 34 / 30 );
			}
			dd:not( :has( abbr ) ){
				font-size : calc( 22 * var( --remBase ) );
			}
			abbr{
				font-size : calc( 20 * var( --remBase ) );
				&::after{
					margin-top : calc( 2 * var( --remBase ) );
					font-size : calc( 15 * var( --remBase ) );
				}
			}
		}
		.users{
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 128 * 100% / 416 ) 1fr;
			row-gap : calc( 16 * var( --remBase ) );
			column-gap : calc( 22 * 100% / 416 );
			align-items : center;
			padding-inline : calc( 20 * var( --contentBase ) );
			margin-top : calc( 28 * var( --remBase ) );
		}
		figure{
			grid-row : 1;
			grid-column : 1;
		}
		figcaption{
			margin-top : calc( 8 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 22 / 20 );
		}
		h4{
			grid-row : 1;
			grid-column : 2;
			span{
				font-size : calc( 25 * var( --remBase ) );
				line-height : calc( 35 / 25 );
				&:nth-of-type( 1 ){
					display : inline-block;
					width : 100%;
					padding-right : 0;
				}
			}
		}
		.comment{
			grid-row : 2;
			grid-column : 1/-1;
			padding-top : calc( 14 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 36 / 20 );
			border-top-width : calc( 4 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		width : calc( 1098 * var( --viewportBase ) );
		margin-inline : auto;
		margin-top : calc( 40 * var( --remBase ) );
		> li{
			padding-bottom : calc( 28 * var( --remBase ) );
			filter : drop-shadow( 0 calc( 4 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent ) );
			border-radius : 0 0  calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
		}
		> li + li{
			margin-top : calc( 64 * var( --remBase ) );
		}
		hgroup{
			filter : drop-shadow( 0 calc( 4 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent ) );
			p{
				height : calc( 61 * var( --remBase ) );
				padding-inline : calc( 20 * 100% / 1098 );
				padding-bottom : calc( 22 * var( --remBase ) );
				&::before{
					bottom : calc( 10 * var( --remBase ) );
					height : calc( 3 * var( --remBase ) );
				}
				> span{
					&:nth-of-type( 1 ){
						column-gap : calc( 12 * var( --remBase ) );
						> span{
							&:nth-of-type( 1 ){
								font-size : calc( 39 * var( --remBase ) );
							}
							&:nth-of-type( 2 ){
								top : calc( -21 * var( --remBase ) );
								left : calc( 128 * 100% / 1098 );
								font-size : calc( 60 * var( --remBase ) );
								&::before{
									-webkit-text-stroke : calc( 6 * var( --remBase ) ) var( --blue04 );
								}
							}
						}
					}
					&:nth-of-type( 2 ){
						font-size : calc( 28 * var( --remBase ) );
					}
				}
			}
			h3{
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 20 * 100% / 1098 );
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 52 / 26 );
				border-radius : 0 0  calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
			}
		}
		.datum{
			display : grid;
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 454 * 100% / 1058 ) 1fr;
			row-gap : calc( 36 * var( --remBase ) );
			column-gap : calc( 22 * 100% / 1058 );
			align-items : start;
			padding-inline : calc( 20 * 100% / 1098 );
			padding-top : calc( 50 * var( --remBase ) );
		}
		.payments{
			grid-row : 1;
			grid-column : 1;
			> div{
				outline-width : calc( 4 * var( --remBase ) );
				outline-offset : calc( -4 * var( --remBase ) );
				+ div{
					padding-block : calc( 4 * var( --remBase ) );
					margin-top : calc( 14 * var( --remBase ) );
				}
			}
			dt{
				font-size : calc( 30 * var( --remBase ) );
				line-height : calc( 42 / 30 );
			}
			dd{
				font-size : calc( 40 * var( --remBase ) );
				line-height : calc( 54 / 40 );
			}
		}
		ol{
			grid-template-columns : calc( 244 * 100% / 582 ) calc( 312 * 100% / 582 );
			grid-row : 1/-1;
			grid-column : 2;
			li{
				border-radius : 0 calc( 12 * var( --remBase ) ) 0 calc( 12 * var( --remBase ) );
				&::before{
					height : calc( 38 * var( --remBase ) );
					font-size : calc( 26 * var( --remBase ) );
				}
				&:nth-of-type( 1 ){
					height : calc( 292 * var( --remBase ) );
					&::before{
						width : calc( 142 * 100% / 244 );
					}
				}
				&:nth-of-type( 2 ){
					height : calc( 324 * var( --remBase ) );
					outline-width : calc( 4 * var( --remBase ) );
					&::before{
						width : calc( 142 * 100% / 312 );
					}
					&::after{
						bottom : calc( -11 * var( --remBase ) );
						left : calc( -130 * 100% / 312 );
						height : calc( 174.28 * var( --remBase ) );
					}
				}
			}
			picture{
				border-radius : 0 calc( 12 * var( --remBase ) ) 0 calc( 12 * var( --remBase ) );
			}
		}
		.data{
			grid-template-columns : repeat( 2 , calc( 218 * 100% / 454 ) );
			grid-row : 2;
			grid-column : 1;
			height : calc( 86 * var( --remBase ) );
			> div{
				grid-template-columns : calc( 116 * 100% / 218 ) 1fr;
				border-radius : calc( 4 * var( --remBase ) );
				outline-width : calc( 2 * var( --remBase ) );
				outline-offset : calc( -2 * var( --remBase ) );
			}
			dt{
				font-size : calc( 30 * var( --remBase ) );
				line-height : calc( 34 / 30 );
			}
			dd:not( :has( abbr ) ){
				font-size : calc( 20 * var( --remBase ) );
			}
			abbr{
				font-size : calc( 20 * var( --remBase ) );
				&::after{
					margin-top : calc( 2 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
				}
			}
		}
		.users{
			grid-template-rows : auto 1fr;
			grid-template-columns : calc( 168 * 100% / 1058 ) 1fr;
			row-gap : calc( 27 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 1098 );
			margin-top : calc( 27 * var( --remBase ) );
		}
		figure{
			grid-row : 1/-1;
			grid-column : 1;
		}
		figcaption{
			margin-top : calc( 14 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 30 / 20 );
		}
		h4{
			grid-row : 1;
			grid-column : 2;
			padding-inline : calc( 18 * 100% / 890 );
			padding-top : calc( 22 * var( --remBase ) );
			span{
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 30 / 24 );
			}
		}
		.comment{
			grid-row : 2;
			grid-column : 2;
			padding-inline : calc( 20 * 100% / 890 );
			padding-top : calc( 19 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 36 / 22 );
			border-top-width : calc( 3 * var( --remBase ) );
		}
	}
}
#voiceLatest{
	.splide{
		font-size : 0;
	}
	.splide__arrow{
		position : absolute;
		top : 50%;
		z-index : 1;
		width : auto;
		aspect-ratio : 1;
		translate : 0 -50%;
		&::before{
			position : absolute;
			top : 50%;
			left : 50%;
			display : block;
			height : 90%;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-color : white;
			border-radius : 50%;
			translate : -50% -50%;
		}
		img{
			filter : var( --filterGreen );
		}
	}
	.splide__slide{
		a{
			height : 100%;
			background-color : white;
		}
		ol{
			display : grid;
			justify-content : space-between;
			> li{
				position : relative;
				&::before{
					position : absolute;
					top : 0;
					left : 0;
					align-content : center;
					font-family : Roboto , sans-serif;
					font-weight : 500;
					color : white;
					text-align : center;
					border-radius : 0 100vmax 100vmax 0;
				}
				&:nth-child( 1 ){
					&::before{
						content : "Before";
						background-color : #31b193;
					}
				}
				&:nth-child( 2 ){
					&::before{
						content : "After";
						background-color : var( --blue );
					}
				}
			}
		}
		picture{
			width : 100%;
			height : 100%;
			overflow : hidden;
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
			}
		}
		time{
			align-content : center;
			width : fit-content;
			font-weight : 600;
			text-align : center;
			background-color : #ffea80;
		}
		hgroup{
			h3{
				display : -webkit-box;
				overflow : hidden;
				font-weight : 700;
				text-overflow : ellipsis;
				-webkit-box-orient : vertical;
				-webkit-line-clamp : 1;
			}
			p{
				font-weight : 700;
				color : var( --blue03 );
			}
		}
		dl{
			display : grid;
		}
		dt{
			align-content : center;
			font-weight : 500;
			color : white;
			text-align : center;
			background-color : var( --blue03 );
		}
		dd{
			font-weight : 500;
		}
		p{
			font-weight : 500;
		}
	}
	.splide__pagination{
		button{
			width : auto;
			aspect-ratio : 1;
			border-radius : 50%;
			&.is-active{
				background-color : black;
			}
			&:not( .is-active ){
				background-color : color-mix( in sRGB , black 25% , transparent );
			}
		}
	}
	@media screen and ( width <= 768px ){
		.splide__arrow{
			img{
				height : calc( 50 * var( --remBase ) );
			}
		}
		.splide__arrow--prev{
			left : calc( 12 * var( --viewportBase ) );
		}
		.splide__arrow--next{
			right : calc( 12 * var( --viewportBase ) );
		}
		.splide__track{
			margin-top : calc( 56 * var( --remBase ) );
		}
		.splide__slide{
			a{
				display : block;
				padding-block : calc( 28 * var( --remBase ) );
				padding-inline : calc( 28 * 100% / 410 );
				border-radius : calc( 12 * var( --remBase ) );
			}
			ol{
				grid-template-rows : calc( 198 * var( --remBase ) );
				grid-template-columns : repeat( 2 , calc( 172 * 100% / 354 ) );
				li::before{
					width : calc( 112 * 100% / 172 );
					height : calc( 42 * var( --remBase ) );
					font-size : calc( 24.75 * var( --remBase ) );
				}
			}
			picture{
				border-radius : 0 calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) );
			}
			time{
				display : block;
				height : calc( 32 * var( --remBase ) );
				padding-inline : calc( 8 * var( --remBase ) );
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
			hgroup{
				margin-top : calc( 4 * var( --remBase ) );
				h3{
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 27 / 18 );
				}
				p{
					margin-top : calc( 4 * var( --remBase ) );
					font-size : calc( 20 * var( --remBase ) );
					line-height : calc( 30 / 20 );
				}
			}
			dl{
				grid-template-columns : calc( 136 * 100% / 354 ) 1fr;
				row-gap : calc( 10 * var( --remBase ) );
				column-gap : calc( 20 * 100% / 354 );
				margin-top : calc( 10 * var( --remBase ) );
			}
			dt{
				height : calc( 34 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				border-radius : calc( 6 * var( --remBase ) );
			}
			dd{
				margin-top : calc( 3.5 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
			p{
				display : -webkit-box;
				margin-top : calc( 24 * var( --remBase ) );
				overflow : hidden;
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				text-overflow : ellipsis;
				-webkit-box-orient : vertical;
				-webkit-line-clamp : 4;
			}
		}
		.splide__pagination{
			column-gap : calc( 16 * var( --viewportBase ) );
			margin-top : calc( 16 * var( --remBase ) );
			button{
				height : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.splide__arrow{
			img{
				height : calc( 60 * var( --remBase ) );
			}
		}
		.splide__arrow--prev{
			left : calc( 50% - ( 570 * var( --viewportBase ) ) );
		}
		.splide__arrow--next{
			right : calc( 50% - ( 570 * var( --viewportBase ) ) );
		}
		.splide__track{
			margin-top : calc( 52 * var( --remBase ) );
		}
		.splide__slide{
			a{
				display : grid;
				grid-template-rows : calc( 30 * var( --remBase ) ) calc( 4 * var( --remBase ) ) auto calc( 12 * var( --remBase ) ) auto calc( 24 * var( --remBase ) ) auto;
				grid-template-columns : calc( 515 * 100% / 1020 ) calc( 485 * 100% / 1020 );
				justify-content : space-between;
				padding-block : calc( 30 * var( --remBase ) );
				padding-inline : calc( 30 * 100% / 1080 );
				border-radius : calc( 10 * var( --remBase ) );
			}
			ol{
				grid-template-rows : calc( 286 * var( --remBase ) );
				grid-template-columns : repeat( 2 , calc( 250 * 100% / 515 ) );
				grid-row : 1/6;
				grid-column : 1;
				li::before{
					width : calc( 100 * 100% / 250 );
					height : calc( 38 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
				}
			}
			picture{
				border-radius : 0 calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
			}
			time{
				grid-row : 1;
				grid-column : 2;
				padding-inline : calc( 4 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
			hgroup{
				grid-row : 3;
				grid-column : 2;
				h3{
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 24 / 16 );
				}
				p{
					margin-top : calc( 4 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
					line-height : calc( 36 / 24 );
				}
			}
			dl{
				grid-template-columns : calc( 130 * 100% / 485 ) 1fr;
				grid-row : 5;
				grid-column : 2;
				row-gap : calc( 10 * var( --remBase ) );
				column-gap : calc( 20 * 100% / 485 );
			}
			dt{
				height : calc( 32 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				border-radius : calc( 4 * var( --remBase ) );
			}
			dd{
				margin-top : calc( -2 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
			p{
				grid-row : 7;
				grid-column : 1/-1;
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
			}
		}
		.splide__pagination{
			column-gap : calc( 16 * var( --viewportBase ) );
			margin-top : calc( 16 * var( --remBase ) );
			button{
				height : calc( 10 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#voiceLatest .splide__pagination button:hover{
		background-color : black;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#voiceLatest .splide__pagination button{
		transition : background-color .3s linear;
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow{
	h2{
		&::after{
			background : url( "../images/ui/parts/char03.webp" ) left top / contain no-repeat;
		}
	}
	ol{
		> li{
			outline-style : solid;
			outline-color : #31b193;
			+ li{
				position : relative;
				&::before{
					position : absolute;
					left : 50%;
					display : block;
					width : auto;
					aspect-ratio : 1;
					font-size : 0;
					content : "";
					background : url( "../images/ui/arrow/down01.svg" ) center / contain no-repeat;
					filter : invert( 60% ) sepia( 72% ) saturate( 395% ) hue-rotate( 116deg ) brightness( 85% ) contrast( 86% );
					translate : -50% 0;
				}
			}
		}
	}
	hgroup{
		display : grid;
		grid-auto-flow : column;
		align-content : center;
		align-items : center;
		color : white;
		background-color : #31b193;
		p{
			grid-row : 1;
			grid-column : 1;
			> span{
				&:nth-of-type( 1 ){
					font-family : Roboto , sans-serif;
					font-weight : 500;
				}
				&:nth-of-type( 2 ){
					font-family : Jost , sans-serif;
					font-weight : 700;
				}
			}
		}
		h3{
			grid-row : 1;
			font-weight : 700;
		}
	}
	.box{
		> picture{
			overflow : hidden;
		}
		> p{
			font-weight : 500;
		}
	}
	.tel{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : center;
		&::before{
			display : block;
			grid-row : 2;
			grid-column : 1;
			width : auto;
			aspect-ratio : 24/32;
			font-size : 0;
			content : "";
			background : url( "../images/ui/icon/tel.svg" ) left top / contain no-repeat;
		}
		> span{
			&:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 2;
				font-weight : 600;
				text-align : center;
				border-bottom : solid 1px currentColor;
			}
			&:nth-of-type( 2 ){
				grid-row : 2;
				grid-column : 2;
				font-family : Roboto , sans-serif;
				font-weight : 700;
				line-height : 1;
			}
		}
	}
	.line{
		--color : #5ec45e;
		box-shadow : 0 calc( 6 * var( --remBase ) ) 0 #3a8b3a;
	}
	.web{
		--color : #f55a5a;
		box-shadow : 0 calc( 6 * var( --remBase ) ) 0 #a24040;
	}
	:where( .line , .web ){
		display : grid;
		align-content : center;
		justify-content : space-between;
		background-color : var( --color );
		img{
			grid-row : 2/5;
			grid-column : 1;
			align-self : center;
		}
		span{
			font-weight : 700;
		}
		span:nth-of-type( 1 ){
			grid-row : 2;
			grid-column : 2;
			align-content : center;
			color : var( --color );
			text-align : center;
			background-color : white;
			border-radius : 100vmax;
		}
		span:nth-of-type( 2 ){
			grid-row : 4;
			grid-column : 2;
			color : white;
			text-align : center;
		}
	}
	.line{
		span:nth-of-type( 1 ){
			color : #3a8b3a;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 100 * var( --remBase ) );
		padding-bottom : calc( 64 * var( --remBase ) );
		h2{
			width : calc( 400 * var( --contentBase ) );
		}
		ol{
			margin-top : calc( 52 * var( --remBase ) );
			> li{
				border-radius : calc( 24 * var( --remBase ) );
				outline-width : calc( 3 * var( --remBase ) );
				outline-offset : calc( -3 * var( --remBase ) );
				+ li{
					margin-top : calc( 106 * var( --remBase ) );
					&::before{
						top : calc( -83 * var( --remBase ) );
						height : calc( 60 * var( --remBase ) );
					}
				}
			}
		}
		hgroup{
			grid-template-columns : auto 1fr;
			column-gap : calc( 20 * 100% / 414 );
			justify-content : start;
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			border-radius : calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) ) 0 0;
			p{
				span{
					display : block;
					text-align : center;
					&:nth-of-type( 1 ){
						font-size : calc( 16 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 28 * var( --remBase ) );
					}
				}
			}
			h3{
				grid-column : 2;
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 33 / 22 );
			}
		}
		.box{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 20 * var( --contentBase ) );
			> picture{
				width : calc( 200 * 100% / 416 );
				margin-inline : auto;
			}
			> p , > ul{
				margin-top : calc( 42 * var( --remBase ) );
			}
			> p{
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 38 / 22 );
			}
		}
		.tel{
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 8 * var( --remBase ) );
			&::before{
				grid-row : 1/3;
				align-self : center;
				height : calc( 56 * var( --remBase ) );
			}
			> span{
				&:nth-of-type( 1 ){
					padding-bottom : calc( 4 * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 27 / 18 );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 45 * var( --remBase ) );
				}
			}
		}
		ul{
			> li{
				+ li{
					width : calc( 346 * 100% / 416 );
					margin-inline : auto;
				}
				&:nth-child( 2 ){
					margin-top : calc( 22 * var( --remBase ) );
				}
				&:nth-child( 3 ){
					margin-top : calc( 18 * var( --remBase ) );
				}
			}
		}
		:where( .line , .web ){
			grid-template-rows : 1fr calc( 25 * var( --remBase ) ) calc( 10 * var( --remBase ) ) auto 1fr;
			grid-template-columns : auto 1fr;
			column-gap : calc( 8 * 100% / 308 );
			height : calc( 92 * var( --remBase ) );
			padding-inline : calc( 18 * 100% / 346 );
			background-color : var( --color );
			border-radius : calc( 12 * var( --remBase ) );
			img{
				grid-row : 2/5;
				grid-column : 1;
				align-self : center;
				height : calc( 50 * var( --remBase ) );
			}
			span:nth-of-type( 1 ){
				font-size : calc( 15 * var( --remBase ) );
				color : var( --color );
			}
			span:nth-of-type( 2 ){
				font-size : calc( 21 * var( --remBase ) );
				line-height : calc( 32 / 21 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 140 * var( --remBase ) );
		padding-bottom : calc( 56 * var( --remBase ) );
		ol{
			margin-top : calc( 72 * var( --remBase ) );
			> li{
				border-radius : calc( 20 * var( --remBase ) );
				outline-width : calc( 3 * var( --remBase ) );
				outline-offset : calc( -3 * var( --remBase ) );
				+ li{
					margin-top : calc( 94 * var( --remBase ) );
					&::before{
						top : calc( -74 * var( --remBase ) );
						height : calc( 54 * var( --remBase ) );
					}
				}
			}
		}
		hgroup{
			grid-template-columns : auto 1fr auto;
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 30 * 100% / 1080 );
			border-radius : calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) ) 0 0;
			p{
				display : grid;
				grid-column : 1;
				grid-auto-flow : column;
				column-gap : calc( 8 * var( --remBase ) );
				align-items : baseline;
				justify-content : start;
				> span{
					&:nth-of-type( 1 ){
						font-size : calc( 28 * var( --remBase ) );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 50 * var( --remBase ) );
					}
				}
			}
			h3{
				grid-column : 1/-1;
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 39 / 26 );
				text-align : center;
			}
		}
		.box{
			display : grid;
			grid-template-columns : calc( 200 * 100% / 1000 ) 1fr;
			column-gap : calc( 38 * 100% / 1000 );
			align-items : center;
			padding-block : calc( 30 * var( --remBase ) );
			padding-inline : calc( 40 * 100% / 1080 );
			> picture{
				grid-column : 1;
				border-radius : calc( 5 * var( --remBase ) );
			}
			> ul , > p{
				grid-column : 2;
			}
			> p{
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 34 / 20 );
			}
		}
		ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 364 * 100% / 762 ) );
			row-gap : calc( 20 * var( --remBase ) );
			justify-content : space-between;
			> li:nth-child( 1 ){
				grid-row : 1;
				grid-column : 1/-1;
			}
			> li:nth-child( 2 ) , > li:nth-child( 3 ){
				grid-row : 2;
			}
			li:nth-child( 2 ){
				grid-column : 1;
			}
			li:nth-child( 3 ){
				grid-column : 2;
			}
		}
		.tel{
			row-gap : calc( 4 * var( --remBase ) );
			column-gap : calc( 8 * var( --remBase ) );
			&::before{
				height : calc( 50 * var( --remBase ) );
			}
			> span{
				&:nth-of-type( 1 ){
					padding-bottom : calc( 4 * var( --remBase ) );
					font-size : calc( 19 * var( --remBase ) );
					line-height : calc( 28.5 / 19 );
				}
				&:nth-of-type( 2 ){
					font-size : calc( 68 * var( --remBase ) );
				}
			}
		}
		:where( .line , .web ){
			grid-template-rows : 1fr calc( 24 * var( --remBase ) ) calc( 10 * var( --remBase ) ) auto 1fr;
			grid-template-columns : auto 1fr;
			column-gap : calc( 8 * 100% / 328 );
			height : calc( 88 * var( --remBase ) );
			padding-inline : calc( 18 * 100% / 364 );
			background-color : var( --color );
			border-radius : calc( 12 * var( --remBase ) );
			img{
				grid-row : 2/5;
				grid-column : 1;
				align-self : center;
				height : calc( 45 * var( --remBase ) );
			}
			span:nth-of-type( 1 ){
				font-size : calc( 15 * var( --remBase ) );
				color : var( --color );
			}
			span:nth-of-type( 2 ){
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 32 / 20 );
			}
		}
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact{
	background-color : #fef8e8;
	.title01{
		&::after{
			background : url( "../images/ui/parts/char01.svg" ) 0 0 / contain no-repeat;
		}
	}
	.box{
		background-color : white;
	}
	#contactConfirm{
		display : none;
	}
	dt{
		label{
			font-weight : 700;
		}
		label.required{
			display : grid;
			grid-template-columns : auto auto;
			align-items : center;
			justify-content : start;
			&::before{
				display : block;
				align-content : center;
				color : white;
				text-align : center;
				content : "必須";
				background-color : #f33c14;
			}
		}
	}
	:where( input[type="text"] , input[type="email"] , input[type="number"] , textarea ){
		background-color : #e6e6e6;
	}
	.privacies{
		p{
			font-weight : 500;
		}
		label{
			display : block;
			align-content : center;
			width : fit-content;
			margin-inline : auto;
		}
	}
	.buttons{
		input{
			display : block;
			align-content : center;
			margin-inline : auto;
			color : white;
			text-align : center;
			cursor : pointer;
		}
		input:not( [name="submitBack"] ){
			font-weight : 700;
			background-color : #2c9e87;
		}
	}
	.mw_wp_form .error{
		color : #b70000;
	}
	.privacies .error{
		text-align : center;
	}
	.mw_wp_form_confirm{
		#contactConfirm{
			display : block;
			p{
				text-align : center;
				&:nth-of-type( 1 ){
					font-weight : 700;
				}
				&:nth-of-type( 2 ){
					font-weight : 500;
				}
			}
		}
		dd{
			p{
				opacity : .5;
			}
		}
		.privacies{
			font-weight : 500;
			text-align : center;
		}
		input[name="submitBack"]{
			font-weight : 500;
			background-color : #777;
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 88 * var( --remBase ) );
		.title01{
			width : calc( 402 * var( --contentBase ) );
		}
		.box{
			padding-inline : calc( 14 * var( --contentBase ) );
			padding-top : calc( 48 * var( --remBase ) );
			padding-bottom : calc( 90 * var( --remBase ) );
			margin-top : calc( 72 * var( --remBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
		dl{
			> div + div{
				margin-top : calc( 40 * var( --remBase ) );
			}
		}
		dt{
			label{
				column-gap : calc( 8 * 100% / 428 );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				&.required::before{
					padding-block : calc( 4 * var( --remBase ) );
					padding-inline : calc( 6 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
					line-height : calc( 20 / 14 );
				}
			}
		}
		dd{
			margin-top : calc( 40 * var( --remBase ) );
		}
		:where( input[type="text"] , input[type="email"] , input[type="number"] , textarea ){
			width : 100%;
			padding-inline : calc( 8 * 100% / 428 );
			font-size : calc( 18 * var( --remBase ) );
			border-radius : calc( 2 * var( --remBase ) );
		}
		:where( input[type="text"] , input[type="email"] , input[type="number"] ){
			height : calc( 38 * var( --remBase ) );
		}
		dd p{
			margin-top : calc( 6 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
		.contacts{
			textarea{
				width : 100%;
				height : calc( 216 * var( --remBase ) );
				padding-block : calc( 6 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
		.privacies{
			margin-top : calc( 68 * var( --remBase ) );
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
			label{
				margin-top : calc( 18 * var( --remBase ) );
				span{
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 27 / 18 );
				}
			}
		}
		.buttons{
			margin-top : calc( 64 * var( --remBase ) );
			input[type="submit"]{
				width : 100%;
				height : calc( 80 * var( --remBase ) );
				font-size : calc( 27 * var( --remBase ) );
				border-radius : calc( 4 * var( --remBase ) );
			}
		}
		.mw_wp_form .error{
			padding-top : calc( 6 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 26 / 16 );
		}
		.mw_wp_form_confirm{
			#contactConfirm{
				padding-top : calc( 56 * var( --remBase ) );
				padding-bottom : calc( 32 * var( --remBase ) );
				p{
					&:nth-of-type( 1 ){
						font-size : calc( 22 * var( --remBase ) );
						line-height : calc( 32 / 22 );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 18 * var( --remBase ) );
						line-height : calc( 27 / 18 );
					}
				}
			}
			dd{
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
			.privacies{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				p{
					margin-bottom : calc( 18 * var( --remBase ) );
					text-align : left;
				}
			}
			input[name="submitBack"]{
				width : calc( 144 * 100% / 428 );
				height : calc( 44 * var( --remBase ) );
				margin-bottom : calc( 16 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-block : calc( 140 * var( --remBase ) );
		.box{
			width : calc( 1080 * var( --contentBase ) );
			padding-inline : calc( 165 * var( --contentBase ) );
			padding-top : calc( 60 * var( --remBase ) );
			padding-bottom : calc( 76 * var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 72 * var( --remBase ) );
			border-radius : calc( 30 * var( --remBase ) );
		}
		dl{
			> div:not( .contacts ){
				display : grid;
				grid-template-columns : calc( 200 * 100% / 750 ) 1fr;
				column-gap : calc( 16 * 100% / 750 );
				align-items : start;
			}
			> div + div{
				margin-top : calc( 36 * var( --remBase ) );
			}
		}
		dt{
			label{
				column-gap : calc( 8 * 100% / 200 );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
				&.required::before{
					padding-block : calc( 6 * var( --remBase ) );
					padding-inline : calc( 6 * var( --remBase ) );
					font-size : calc( 12 * var( --remBase ) );
					line-height : calc( 18 / 12 );
				}
			}
		}
		:where( input[type="text"] , input[type="email"] , input[type="number"] , textarea ){
			width : 100%;
			padding-inline : calc( 8 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			border-radius : calc( 2 * var( --remBase ) );
		}
		:where( input[type="text"] , input[type="email"] , input[type="number"] ){
			height : calc( 36 * var( --remBase ) );
		}
		input[type="number"]{
			width : calc( 256 * 100% / 534 );
		}
		dd p{
			margin-top : calc( 6 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
		.contacts{
			dt{
				width : calc( 200 * 100% / 750 );
			}
			dd{
				padding-left : calc( 44 * 100% / 750 );
				margin-top : calc( 12 * var( --remBase ) );
			}
			textarea{
				width : 100%;
				height : calc( 192 * var( --remBase ) );
				padding-block : calc( 4 * var( --remBase ) );
				line-height : calc( 24 / 16 );
			}
		}
		.privacies{
			margin-top : calc( 60 * var( --remBase ) );
			p{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
				text-align : center;
			}
			label{
				margin-top : calc( 16 * var( --remBase ) );
				span{
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 24 / 16 );
				}
			}
		}
		.buttons{
			margin-top : calc( 56 * var( --remBase ) );
			input[type="submit"]{
				width : calc( 360 * 100% / 750 );
				height : calc( 72 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				border-radius : calc( 4 * var( --remBase ) );
			}
		}
		.mw_wp_form .error{
			padding-top : calc( 6 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
		}
		.mw_wp_form_confirm{
			#contactConfirm{
				padding-top : calc( 48 * var( --remBase ) );
				padding-bottom : calc( 32 * var( --remBase ) );
				p{
					&:nth-of-type( 1 ){
						font-size : calc( 19 * var( --remBase ) );
						line-height : calc( 28 / 19 );
					}
					&:nth-of-type( 2 ){
						font-size : calc( 16 * var( --remBase ) );
						line-height : calc( 24 / 16 );
					}
				}
			}
			dd{
				padding-top : calc( 3 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
			}
			.privacies{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 24 / 16 );
				p{
					margin-bottom : calc( 16 * var( --remBase ) );
				}
			}
			input[name="submitBack"]{
				width : calc( 128 * 100% / 750 );
				height : calc( 40 * var( --remBase ) );
				margin-bottom : calc( 16 * var( --remBase ) );
				font-size : calc( 16 * var( --remBase ) );
			}
		}
	}
}