@charset "UTF-8";

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	h2{
		font-weight : 700;
		color : var( --blue02 );
		text-align : center;
		&::after{
			display : block;
			height : 0;
			margin-inline : auto;
			content : "";
			border-bottom-color : currentColor;
			border-bottom-style : dotted;
		}
	}
	.bg{
		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 ) ) );
	}
	.box{
		margin-inline : auto;
		background-color : white;
	}
	h3{
		> span{
			&:nth-of-type( 1 ){
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				justify-content : center;
				font-weight : 700;
				color : #31b193;
				text-align : center;
				&::before , &::after{
					font-weight : 100;
					line-height : 1;
				}
				&::before{
					content : "\\";
				}
				&::after{
					content : "/";
				}
			}
			&:nth-of-type( 2 ){
				display : block;
				align-content : center;
				width : fit-content;
				margin-inline : auto;
				color : var( --blue03 );
				text-align : center;
				background-color : #ffea80;
				border-radius : 100vmax;
			}
		}
	}
	.box{
		> p{
			&:nth-of-type( 1 ){
				display : grid;
				align-items : center;
				justify-content : center;
				font-weight : 700;
				strong{
					display : grid;
					grid-auto-flow : column;
					align-items : baseline;
					justify-content : start;
					font-weight : 700;
					text-decoration-line : underline;
					text-decoration-color : #f7ff20;
					text-decoration-skip-ink : none;
					span{
						color : #e52f2f;
					}
				}
				em{
					display : block;
					align-content : center;
					color : white;
					text-align : center;
					background-color : var( --blue03 );
				}
				> span{
					&:nth-of-type( 2 ){
						display : grid;
						grid-auto-flow : column;
						align-items : center;
						justify-content : center;
					}
				}
			}
		}
	}
	ol{
		display : grid;
		grid-auto-flow : column;
		justify-content : space-between;
		li{
			position : relative;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				z-index : 1;
				display : block;
				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{
		overflow : hidden;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
		}
	}
	.box{
		> p{
			&:nth-of-type( 2 ){
				position : relative;
				display : block;
				align-content : center;
				margin-inline : auto;
				font-weight : 500;
				color : white;
				text-align : center;
				background-color : #6dbfe3;
			}
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 92 * var( --remBase ) );
		h2{
			font-size : calc( 32 * var( --remBase ) );
			line-height : calc( 48 / 32 );
			&::after{
				width : calc( 72 * var( --viewportBase ) );
				margin-top : calc( 20 * var( --remBase ) );
				border-bottom-width : calc( 3 * var( --remBase ) );
			}
		}
		.bg{
			padding-block : calc( 88 * var( --remBase ) );
			margin-top : calc( 28 * var( --remBase ) );
		}
		.box{
			padding-block : calc( 44 * var( --remBase ) );
			padding-inline : calc( 12 * var( --contentBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
		h3{
			> span{
				&:nth-of-type( 1 ){
					column-gap : calc( 16 * 100% / 432 );
					font-size : calc( 26 * var( --remBase ) );
					line-height : calc( 38 / 26 );
					&::before , &::after{
						font-size : calc( 38 * var( --remBase ) );
					}
				}
				&:nth-of-type( 2 ){
					height : calc( 48 * var( --remBase ) );
					padding-inline : calc( 24 * var( --remBase ) );
					margin-top : calc( 16 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
				}
			}
		}
		.box{
			> p{
				&:nth-of-type( 1 ){
					margin-top : calc( 16 * var( --remBase ) );
					> span{
						&:nth-of-type( 1 ){
							display : block;
							grid-row : 1;
							grid-column : 1;
							font-size : calc( 24 * var( --remBase ) );
							text-align : center;
						}
					}
					strong{
						margin-top : calc( 24 * var( --remBase ) );
						font-size : calc( 45 * var( --remBase ) );
						text-decoration-thickness : calc( 12 * var( --remBase ) );
						text-underline-offset : calc( -2 * var( --remBase ) );
						span{
							font-size : calc( 112 * var( --remBase ) );
						}
					}
					> span{
						&:nth-of-type( 2 ){
							column-gap : calc( 4 * var( --remBase ) );
							margin-top : calc( 20 * var( --remBase ) );
							font-size : calc( 22 * var( --remBase ) );
							em{
								padding-block : calc( 1 * var( --remBase ) );
								padding-inline : calc( 12 * var( --remBase ) );
								line-height : calc( 38  / 22 );
								border-radius : calc( 8 * var( --remBase ) );
							}
						}
					}
				}
			}
		}
		ol{
			grid-template-columns : repeat( 2 , calc( 208 * 100% / 432 ) );
			margin-inline : auto;
			margin-top : calc( 72 * var( --remBase ) );
			li{
				&::before{
					width : calc( 112 * 100% / 208 );
					height : calc( 44 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 252 * var( --remBase ) );
				border-radius : 0 calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) ) calc( 12 * var( --remBase ) );
			}
		}
		.box > p{
			&:nth-of-type( 2 ){
				width : fit-content;
				padding-block : calc( 16 * var( --remBase ) );
				padding-inline : calc( 20 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( -20 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				border-radius : 0 calc( 32 * var( --remBase ) ) calc( 32 * var( --remBase ) ) calc( 32 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 100 * var( --remBase ) );
		h2{
			font-size : calc( 35 * var( --remBase ) );
			line-height : calc( 52 / 35 );
			&::after{
				width : calc( 78 * var( --viewportBase ) );
				margin-top : calc( 24 * var( --remBase ) );
				border-bottom-width : calc( 3 * var( --remBase ) );
			}
		}
		.bg{
			padding-block : calc( 140 * var( --remBase ) );
			margin-top : calc( 32 * var( --remBase ) );
		}
		.box{
			width : calc( 1004 * var( --contentBase ) );
			padding-block : calc( 60 * var( --remBase ) );
			padding-inline : calc( 38 * var( --contentBase ) );
			border-radius : calc( 32 * var( --remBase ) );
		}
		h3{
			> span{
				&:nth-of-type( 1 ){
					column-gap : calc( 24 * 100% / 928 );
					font-size : calc( 48 * var( --remBase ) );
					line-height : calc( 72 / 48 );
					&::before , &::after{
						font-size : calc( 72 * var( --remBase ) );
					}
				}
				&:nth-of-type( 2 ){
					height : calc( 56 * var( --remBase ) );
					padding-inline : calc( 28 * var( --remBase ) );
					margin-top : calc( 32 * var( --remBase ) );
					font-size : calc( 26 * var( --remBase ) );
				}
			}
		}
		.box{
			> p{
				&:nth-of-type( 1 ){
					display : grid;
					grid-template-columns : auto auto;
					row-gap : calc( 20 * var( --remBase ) );
					column-gap : calc( 8 * 100% / 928 );
					align-items : baseline;
					justify-content : center;
					margin-top : calc( 32 * var( --remBase ) );
					> span{
						&:nth-of-type( 1 ){
							grid-row : 1;
							grid-column : 1;
							font-size : calc( 22 * var( --remBase ) );
						}
					}
					strong{
						grid-row : 1;
						grid-column : 2;
						font-size : calc( 40 * var( --remBase ) );
						text-decoration-thickness : calc( 12 * var( --remBase ) );
						text-underline-offset : calc( -2 * var( --remBase ) );
						span{
							font-size : calc( 100 * var( --remBase ) );
						}
					}
					> span{
						&:nth-of-type( 2 ){
							grid-row : 2;
							grid-column : 1/-1;
							column-gap : calc( 4 * var( --remBase ) );
							font-size : calc( 20 * var( --remBase ) );
							em{
								padding-block : calc( 1 * var( --remBase ) );
								padding-inline : calc( 8 * var( --remBase ) );
								line-height : calc( 34  / 20 );
								border-radius : calc( 8 * var( --remBase ) );
							}
						}
					}
				}
			}
		}
		ol{
			grid-template-columns : repeat( 2 , calc( 392 * 100% / 800 ) );
			width : calc( 800 * 100% / 928 );
			margin-inline : auto;
			margin-top : calc( 64 * var( --remBase ) );
			li{
				&::before{
					width : calc( 100 * 100% / 392 );
					height : calc( 38 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
				}
			}
			picture{
				height : calc( 472 * var( --remBase ) );
				border-radius : 0 calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) );
			}
		}
		.box > p{
			&:nth-of-type( 2 ){
				width : calc( 694 * 100% / 928 );
				height : calc( 72 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( -20 * var( --remBase ) );
				font-size : calc( 21 * var( --remBase ) );
				border-radius : 0 calc( 32 * var( --remBase ) ) calc( 32 * var( --remBase ) ) calc( 32 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
SOLUTION
--------------------------------------------- */
#solution{
	h2{
		font-weight : 700;
		color : var( --blue02 );
		text-align : center;
	}
	> p{
		&:nth-of-type( 1 ){
			width : fit-content;
			margin-inline : auto;
			font-weight : 700;
			color : white;
			background-color : var( --blue02 );
			border-radius : 100vmax;
		}
	}
	ul{
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 686.885/648.775;
			font-size : 0;
			content : "";
			background : url( "../images/localized/solution/bg.svg" ) center top / contain no-repeat;
		}
	}
	li{
		position : relative;
		font-weight : 700;
		text-align : center;
		background-color : #eee;
	}
	> p{
		&:nth-of-type( 2 ){
			font-weight : 700;
			text-align : center;
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 112 * var( --remBase ) );
		padding-top : calc( 88 * var( --remBase ) );
		h2{
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 46 / 30 );
		}
		> p{
			&:nth-of-type( 1 ){
				padding-block : calc( 8 * var( --remBase ) );
				padding-inline : calc( 24 * var( --remBase ) );
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 32 / 22 );
			}
		}
		ul{
			margin-top : calc( 32 * var( --remBase ) );
			&::after{
				height : calc( 222 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( 28 * var( --remBase ) );
			}
		}
		li{
			width : calc( 364 * var( --contentBase ) );
			padding-block : calc( 22 * var( --remBase ) );
			padding-inline : calc( 26 * var( --contentBase ) );
			margin-inline : auto;
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 32 / 22 );
			border-radius : calc( 8 * var( --remBase ) );
			+ li{
				margin-top : calc( 12 * var( --remBase ) );
			}
			&:last-child{
				&::before , &::after{
					position : absolute;
					width : auto;
					aspect-ratio : 1;
					content : "";
					background-color : #eee;
					border-radius : 50%;
				}
				&::before{
					bottom : calc( -28 * var( --remBase ) );
					left : calc( 50 * 100% / 364 );
					height : calc( 24 * var( --remBase ) );
				}
				&::after{
					bottom : calc( -38 * var( --remBase ) );
					left : calc( 70 * 100% / 364 );
					height : calc( 12 * var( --remBase ) );
				}
			}
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 40 / 24 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 112 * var( --remBase ) );
		padding-bottom : calc( 100 * var( --remBase ) );
		h2{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 60 / 40 );
		}
		> p{
			&:nth-of-type( 1 ){
				padding-block : calc( 6 * var( --remBase ) );
				padding-inline : calc( 20 * var( --remBase ) );
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 28 / 20 );
			}
		}
		ul{
			position : relative;
			z-index : 0;
			display : grid;
			grid-template-columns : auto auto;
			column-gap : calc( 220 * var( --contentBase ) );
			justify-content : center;
			margin-top : calc( 60 * var( --remBase ) );
			&::after{
				position : absolute;
				top : calc( 8 * var( --remBase ) );
				left : 50%;
				z-index : -1;
				width : auto;
				height : calc( 264 * var( --remBase ) );
				margin-left : calc( -8 * var( --remBase ) );
				translate : -50% 0;
			}
		}
		li{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 24 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 32 / 20 );
			border-radius : calc( 8 * var( --remBase ) );
			&::before , &::after{
				position : absolute;
				bottom : calc( -29 * var( --remBase ) );
				width : auto;
				height : calc( 24 * var( --remBase ) );
				aspect-ratio : 1;
				content : "";
				background-color : #eee;
				border-radius : 50%;
			}
			&::after{
				bottom : calc( -32 * var( --remBase ) );
				height : calc( 12 * var( --remBase ) );
			}
			&:nth-child( 1 ){
				&::before{
					right : calc( 240 * var( --contentBase ) );
				}
				&::after{
					right : calc( 160 * var( --contentBase ) );
				}
			}
			&:nth-child( 2 ){
				&::before{
					left : calc( 240 * var( --contentBase ) );
				}
				&::after{
					left : calc( 160 * var( --contentBase ) );
				}
			}
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 200 * var( --remBase ) );
				font-size : calc( 28 * var( --remBase ) );
				line-height : calc( 48 / 28 );
			}
		}
	}
}

/* --------------------------------------------
ABOUT02
--------------------------------------------- */
#about02{
	background-color : #dcf8ff;
	h2{
		> span{
			&:nth-of-type( 1 ){
				display : block;
				font-weight : 700;
				color : #6dbfe3;
				text-align : center;
			}
			&:nth-of-type( 2 ){
				span{
					text-decoration-line : underline;
					text-decoration-color : #ffea80;
					text-underline-offset : calc( ( 1lh - 1em ) / 2 );
					text-decoration-skip-ink : none;
				}
				&::after{
					background : url( "../images/ui/parts/char01.svg" ) left top / contain no-repeat;
				}
			}
		}
	}
	p{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		font-weight : 700;
		color : #31b193;
		text-align : center;
		&::before , &::after{
			font-weight : 100;
			line-height : 1;
		}
		&::before{
			content : "\\";
		}
		&::after{
			content : "/";
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 136 * var( --remBase ) );
		h2{
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 24 * var( --remBase ) );
					line-height : calc( 36 / 24 );
				}
				&:nth-of-type( 2 ){
					display : block;
					width : 100%;
					padding-inline : calc( 40 * var( --contentBase ) );
					margin-top : calc( 16 * var( --remBase ) );
					span{
						font-size : calc( 24 * var( --remBase ) );
						line-height : calc( 36 / 24 );
						text-decoration-thickness : calc( 4 * var( --remBase ) );
					}
					&::after{
						top : calc( -52 * var( --remBase ) );
						right : 0;
					}
				}
			}
		}
		p{
			column-gap : calc( 16 * var( --contentBase ) );
			margin-top : calc( 92 * var( --remBase ) );
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 36 / 24 );
			&::before , &::after{
				font-size : calc( 36 * var( --remBase ) );
			}
		}
		picture{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 140 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
		h2{
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 36 * var( --remBase ) );
					line-height : calc( 54 / 36 );
				}
				&:nth-of-type( 2 ){
					display : grid;
					grid-auto-flow : column;
					margin-top : calc( 16 * var( --remBase ) );
					span{
						text-decoration-thickness : calc( 4 * var( --remBase ) );
					}
				}
			}
		}
		p{
			column-gap : calc( 24 * 100% / 1008 );
			margin-top : calc( 140 * var( --remBase ) );
			font-size : calc( 36 * var( --remBase ) );
			line-height : calc( 54 / 36 );
			&::before , &::after{
				font-size : calc( 54 * var( --remBase ) );
			}
		}
		picture{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
CONTACTS 01
--------------------------------------------- */
#contacts01{
	h2{
		font-weight : 700;
		color : var( --blue02 );
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 88 * var( --remBase ) );
		padding-bottom : calc( 112 * var( --remBase ) );
		h2{
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 46 / 30 );
		}
		.contentContacts{
			margin-top : calc( 32 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 112 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
		h2{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 60 / 40 );
		}
		.contentContacts{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason{
	header{
		> p{
			display : grid;
			grid-auto-flow : column;
			align-items : center;
			justify-content : center;
			font-weight : 700;
			color : #31b193;
			text-align : center;
			&::before , &::after{
				font-weight : 100;
				line-height : 1;
			}
			&::before{
				content : "\\";
			}
			&::after{
				content : "/";
			}
		}
	}
	@media screen and ( width <= 768px ){
		header{
			> p{
				column-gap : calc( 16 * var( --contentBase ) );
				margin-bottom : calc( 48 * var( --remBase ) );
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 34 / 22 );
				&::before , &::after{
					font-size : calc( 34 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			> p{
				column-gap : calc( 24 * var( --contentBase ) );
				margin-bottom : calc( 64 * var( --remBase ) );
				font-size : calc( 32 * var( --remBase ) );
				line-height : calc( 48 / 32 );
				&::before , &::after{
					font-size : calc( 48 * var( --remBase ) );
				}
			}
		}
	}
}
#reason04 .box{
	> p{
		&:nth-of-type( 1 ){
			font-weight : 500;
		}
	}
	> ul{
		&:nth-of-type( 1 ){
			li{
				position : relative;
				z-index : 0;
				display : block;
				align-content : center;
				font-weight : 700;
				color : white;
				text-align : center;
				border-radius : 50%;
				&::before{
					position : absolute;
					top : 0;
					left : 0;
					z-index : -1;
					display : block;
					width : 100%;
					height : 100%;
					content : "";
					background-color : var( --orange );
					filter : blur( calc( 2 * var( --remBase ) ) );
				}
			}
		}
		&:nth-of-type( 2 ){
			display : grid;
			background-color : #eee;
			li{
				display : grid;
				grid-auto-flow : column;
				align-items : center;
				justify-content : start;
				font-weight : 700;
				&::before{
					width : auto;
					aspect-ratio : 1;
					content : "";
					background-color : #4289a8;
					border-radius : 50%;
				}
			}
		}
	}
	> p{
		&:nth-of-type( 2 ){
			font-weight : 700;
			color : var( --blue03 );
			text-align : center;
			em{
				text-decoration-line : underline;
				text-decoration-color : #f7ff20;
				text-decoration-skip-ink : none;
			}
		}
	}
	@media screen and ( width <= 768px ){
		>p{
			&:nth-of-type( 1 ){
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 34 / 22 );
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				margin-top : calc( 32 * var( --remBase ) );
				li{
					padding-block : calc( 16 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
					line-height : calc( 36 / 24 );
					+ li{
						margin-top : calc( 16 * var( --remBase ) );
					}
					&::before{
						border-radius : 100vmax;
					}
				}
			}
			&:nth-of-type( 2 ){
				grid-template-columns : repeat( 2 , 1fr );
				row-gap : calc( 6 * var( --remBase ) );
				padding-block : calc( 36 * var( --remBase ) );
				padding-inline : calc( 18 * 100% / 428 );
				margin-top : calc( 32 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
				li{
					column-gap : calc( 6 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
					line-height : calc( 32 / 22 );
					&::before{
						height : calc( 18 * var( --remBase ) );
					}
				}
			}
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				em{
					font-size : calc( 30 * var( --remBase ) );
					text-decoration-thickness : calc( 8 * var( --remBase ) );
					text-underline-offset : 0;
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			&:nth-of-type( 1 ){
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 39 / 26 );
				text-align : center;
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 30 * 100% / 1004 );
				align-items : center;
				justify-content : center;
				margin-top : calc( 60 * var( --remBase ) );
				li{
					width : auto;
					height : calc( 260 * var( --remBase ) );
					aspect-ratio : 1;
					font-size : calc( 28 * var( --remBase ) );
					line-height : calc( 42 / 28 );
					&::before{
						border-radius : 50%;
					}
				}
			}
			&:nth-of-type( 2 ){
				grid-template-columns : repeat( 4 , 1fr );
				row-gap : calc( 6 * var( --remBase ) );
				column-gap : calc( 24 * 100% / 772 );
				padding-block : calc( 32 * var( --remBase ) );
				padding-inline : calc( 116 * 100% / 1004 );
				margin-top : calc( 60 * var( --remBase ) );
				border-radius : calc( 8 * var( --remBase ) );
				li{
					column-gap : calc( 6 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
					line-height : calc( 36 / 24 );
					&::before{
						height : calc( 20 * var( --remBase ) );
					}
				}
			}
		}
		> p{
			&:nth-of-type( 2 ){
				margin-top : calc( 30 * var( --remBase ) );
				font-size : calc( 28 * var( --remBase ) );
				line-height : calc( 44 / 28 );
				em{
					font-size : calc( 42 * var( --remBase ) );
					text-decoration-thickness : calc( 12 * var( --remBase ) );
					text-underline-offset : 0;
				}
			}
		}
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#voices{
	h2{
		font-weight : 700;
		color : var( --blue02 );
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		h2{
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 46 / 30 );
		}
		> p{
			margin-top : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		h2{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 60 / 40 );
		}
		> p{
			margin-top : calc( 28 * var( --remBase ) );
		}
	}
}
#area{
	h3{
		font-weight : 700;
		color : var( --blue02 );
		text-align : center;
	}
	.box{
		background-color : white;
	}
	h4{
		border-bottom : solid 1px var( --base );
		a{
			width : fit-content;
		}
	}
	h5{
		font-weight : 0;
	}
	ul{
		display : flex;
		flex-wrap : wrap;
	}
	a{
		display : block;
		align-content : center;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : var( --blue03 );
		outline : solid 1px var( --blue03 );
		outline-offset : -1px;
	}
	ul a[aria-current="page"]{
		color : var( --blue03 );
		background-color : white;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 88 * var( --remBase ) );
		h3{
			font-size : calc( 30 * var( --remBase ) );
			line-height : calc( 46 / 30 );
		}
		.box{
			width : calc( 432 * var( --contentBase ) );
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 24 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h4{
			padding-top : calc( 12 * var( --remBase ) );
			padding-bottom : calc( 16 * var( --remBase ) );
		}
		h5{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : calc( 28 / 20 );
		}
		ul{
			row-gap : calc( 6 * var( --remBase ) );
			column-gap : calc( 6 * 100% / 384 );
			height : calc( 330 * var( --remBase ) );
			margin-top : calc( 12 * var( --remBase ) );
			overflow-y : auto;
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 28 / 18 );
			border-radius : calc( 6 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 114 * var( --remBase ) );
		h3{
			font-size : calc( 40 * var( --remBase ) );
			line-height : calc( 60 / 40 );
		}
		.box{
			width : calc( 730 * var( --contentBase ) );
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 24 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
			border-radius : calc( 12 * var( --remBase ) );
		}
		h4{
			padding-block : calc( 8 * var( --remBase ) );
		}
		h5{
			margin-top : calc( 16 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
		}
		ul{
			row-gap : calc( 6 * var( --remBase ) );
			column-gap : calc( 6 * 100% / 682 );
			margin-top : calc( 12 * var( --remBase ) );
		}
		a{
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 16 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			border-radius : calc( 6 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#area a:hover{
		color : var( --blue03 );
		background-color : #fff;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#area a{
		transition : background .3s linear , color .3s linear;
	}
}