@charset "UTF-8";

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	p{
		strong{
			font-weight : 700;
			span:nth-of-type( 2 ){
				color : var( --orange );
			}
		}
		> span{
			font-weight : 500;
		}
	}
	li{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
		font-weight : 700;
		background-color : white;
		box-shadow : 0 calc( 1 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 color-mix( in sRGB , black 16% , transparent );
		&::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{
			color : var( --green );
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 72 * var( --remBase ) );
		p{
			font-size : calc( 21 * var( --remBase ) );
			line-height : calc( 36 / 21 );
			text-align : center;
			> strong{
				> span{
					&:nth-of-type( 1 ){
						display : block;
					}
				}
			}
		}
		ul{
			width : calc( 398 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 20 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 18 * var( --remBase ) );
		}
		li{
			padding-block : calc( 12 * var( --remBase ) );
			padding-inline : calc( 20 * 100% / 398 );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 34 / 22 );
			&::before{
				height : calc( 24 * var( --remBase ) );
				margin-top : calc( 4 * var( --remBase ) );
				margin-right : calc( 4 * var( --remBase ) );
			}
		}
		&::after{
			display : block;
			width : calc( 360 * var( --contentBase ) );
			height : auto;
			aspect-ratio : 1766/1380;
			margin-top : calc( 24 * var( --remBase ) );
			margin-left : auto;
			font-size : 0;
			content : "";
			background : url( "../images/top/about/bg.webp" ) left bottom / contain no-repeat;
		}
	}
	@media print , screen and ( width > 768px ){
		position : relative;
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 184 * var( --remBase ) );
		margin-top : calc( 48 * var( --remBase ) );
		overflow-x : clip;
		&::before{
			position : absolute;
			top : 0;
			left : calc( 50% + 80 * var( --viewportBase ) );
			display : block;
			width : auto;
			height : 100%;
			aspect-ratio : 1766/1380;
			font-size : 0;
			content : "";
			background : url( "../images/top/about/bg.webp" ) left bottom / contain no-repeat;
		}
		p{
			font-size : calc( 32 * var( --remBase ) );
			line-height : calc( 70 / 32 );
		}
		ul{
			width : calc( 620 * var( --contentBase ) );
			margin-top : calc( 72 * var( --remBase ) );
		}
		li{
			padding-block : calc( 20 * var( --remBase ) );
			padding-inline : calc( 30 * 100% / 620 );
			font-size : calc( 35 * var( --remBase ) );
			line-height : calc( 52 / 35 );
			border-radius : calc( 4 * var( --remBase ) );
			&::before{
				height : calc( 40 * var( --remBase ) );
				margin-top : calc( 4 * var( --remBase ) );
				margin-right : calc( 4 * var( --remBase ) );
			}
			+ li{
				margin-top : calc( 28 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
WORRY
--------------------------------------------- */
#worry{
	@media screen and ( width <= 768px ){
		padding-top : calc( 100 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 140 * var( --remBase ) );
	}
}
#worryBody{
	.title01{
		&::after{
			background : url( "../images/ui/parts/char06.webp" ) 0 0 / contain no-repeat;
		}
	}
	> ul{
		> li{
			&::before{
				display : block;
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : center;
				background-size : contain;
			}
			&:nth-child( 1 ){
				&::before{
					background-image : url( "../images/ui/icon/face01.webp" );
				}
			}
			&:nth-child( 2 ){
				&::before{
					background-image : url( "../images/ui/icon/face02.webp" );
				}
			}
			&:nth-child( 3 ){
				&::before{
					background-image : url( "../images/ui/icon/face03.webp" );
				}
			}
			&:nth-child( 4 ){
				&::before{
					background-image : url( "../images/ui/icon/face04.webp" );
				}
			}
			&:nth-child( 5 ){
				&::before{
					background-image : url( "../images/ui/icon/face05.webp" );
				}
			}
			&:nth-child( 6 ){
				&::before{
					background-image : url( "../images/ui/icon/face06.webp" );
				}
			}
		}
	}
	> ul{
		h3{
			font-weight : 700;
			color : #31b193;
		}
		p{
			font-weight : 500;
			background-color : #fff7e2;
		}
	}
	@media screen and ( width <= 768px ){
		.title01{
			width : calc( 402 * var( --contentBase ) );
		}
		> ul{
			margin-top : calc( 52 * var( --remBase ) );
			> li + li{
				margin-top : calc( 36 * var( --remBase ) );
			}
			li{
				&::before{
					height : calc( 45 * var( --remBase ) );
					margin-inline : auto;
				}
			}
			h3{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				text-align : center;
			}
			p{
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 18 * var( --contentBase ) );
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				border-radius : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		> ul{
			width : calc( 1040 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 72 * var( --remBase ) );
			> li + li{
				margin-top : calc( 78 * var( --remBase ) );
			}
			> li{
				display : grid;
				grid-template-rows : auto 1fr;
				row-gap : calc( 10 * var( --remBase ) );
				column-gap : calc( 30 * 100% / 1040 );
				align-items : start;
				&:nth-child( odd ){
					grid-template-columns : auto 1fr;
					&::before{
						grid-column : 1;
					}
					:where( h3 , p ){
						grid-column : 2;
					}
				}
				&:nth-child( even ){
					grid-template-columns : 1fr auto;
					:where( h3 , p ){
						grid-column : 1;
					}
					&::before{
						grid-column : 2;
					}
					h3{
						justify-self : end;
					}
				}
				&::before{
					grid-row : 1/-1;
					height : calc( 160 * var( --remBase ) );
				}
			}
			h3{
				grid-row : 1;
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
			}
			p{
				grid-row : 2;
				padding-block : calc( 10 * var( --remBase ) );
				padding-inline : calc( 20 * 100% / 850 );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 30 / 20 );
				border-radius : calc( 10 * var( --remBase ) );
			}
		}
	}
}
#worryFooter{
	position : relative;
	background-image : url( "../images/top/worry/bg.webp" );
	background-repeat : no-repeat;
	background-position : center top;
	background-size : cover;
	&::before{
		position : absolute;
		top : 0;
		left : 50%;
		z-index : 1;
		display : block;
		width : auto;
		clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
		font-size : 0;
		content : "";
		background-color : white;
		translate : -50% 0;
	}
	p{
		text-align : center;
	}
	ul{
		display : grid;
		justify-content : center;
	}
	li{
		display : block;
		align-content : center;
		font-weight : 500;
		color : white;
		text-align : center;
		background-color : var( --orange );
	}
	p{
		&:nth-of-type( 2 ){
			font-weight : 700;
			color : var( --orange );
			text-align : center;
			background-color : #fff;
			border-radius : 100vmax;
		}
	}
	@media screen and ( width <= 768px ){
		min-height : calc( 540 * var( --remBase ) );
		padding-top : calc( 108 * var( --remBase ) );
		margin-top : calc( 88 * var( --remBase ) );
		&::before{
			top : -1px;
			height : calc( 43 * var( --remBase ) );
			aspect-ratio : 205/43;
		}
		> p{
			&:nth-of-type( 1 ){
				img{
					height : calc( 160 * var( --remBase ) );
				}
			}
		}
		ul{
			grid-template-columns : repeat( 2 , calc( 140 * var( --contentBase ) ) );
			column-gap : calc( 24 * var( --contentBase ) );
			margin-top : calc( 18 * var( --remBase ) );
		}
		li{
			height : calc( 44 * var( --remBase ) );
			font-size : calc( 27 * var( --remBase ) );
			border-radius : calc( 8 * var( --remBase ) );
		}
		p{
			&:nth-of-type( 2 ){
				width : 100%;
				padding-block : calc( 16 * var( --remBase ) );
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		min-height : calc( 720 * var( --remBase ) );
		padding-top : calc( 160 * var( --remBase ) );
		margin-top : calc( 140 * var( --remBase ) );
		&::before{
			height : calc( 76 * var( --remBase ) );
			aspect-ratio : 346/76;
		}
		> p{
			&:nth-of-type( 1 ){
				img{
					height : calc( 190 * var( --remBase ) );
				}
			}
		}
		ul{
			grid-template-columns : repeat( 2 , calc( 208 * var( --contentBase ) ) );
			column-gap : calc( 20 * var( --contentBase ) );
		}
		li{
			height : calc( 64 * var( --remBase ) );
			font-size : calc( 40 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
		}
		p{
			&:nth-of-type( 2 ){
				width : calc( 1080 * var( --contentBase ) );
				padding-block : calc( 20 * var( --remBase ) );
				margin-inline : auto;
				margin-top : calc( 30 * var( --remBase ) );
				font-size : calc( 29 * var( --remBase ) );
				line-height : calc( 44 / 29 );
			}
		}
	}
}

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason04 .box{
	> p{
		font-weight : 500;
	}
	@media screen and ( width <= 768px ){
		> p{
			&:nth-of-type( 1 ){
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 34 / 22 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 42 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
		#linkArea{
			margin-top : calc( 68 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			text-align : center;
			&:nth-of-type( 1 ){
				font-size : calc( 26 * var( --remBase ) );
				line-height : calc( 39 / 26 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 42 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
		#linkArea{
			margin-top : calc( 60 * var( --remBase ) );
		}
	}
}
#linkArea{
	> ul{
		> li{
			background-color : var( --blue03 );
			> span{
				display : block;
				color : white;
				text-align : center;
			}
		}
		li li{
			a{
				display : block;
				align-content : center;
				width : 100%;
				font-weight : 500;
				color : #555;
				text-align : center;
				background-color : white;
			}
		}
	}
	@media screen and ( width <= 768px ){
		picture{
			margin-top : calc( 68 * var( --remBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
		> ul{
			margin-top : calc( 36 * var( --remBase ) );
			> li + li{
				margin-top : calc( 12 * var( --remBase ) );
			}
			> li{
				padding-block : calc( 6 * var( --remBase ) );
				padding-inline : calc( 6 * var( --contentBase ) );
				border-radius : calc( 6 * var( --remBase ) );
				> span{
					font-size : calc( 20 * var( --remBase ) );
					line-height : calc( 32 / 20 );
				}
			}
			ul{
				display : grid;
				grid-template-columns : repeat( 2 , calc( 207 * 100% / 416 ) );
				row-gap : calc( 2 * var( --remBase ) );
				justify-content : space-between;
				margin-top : calc( 6 * var( --remBase ) );
				li:last-child:nth-child( odd ){
					grid-column : 1 / -1;
				}
			}
			a{
				padding-block : calc( 4 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : calc( 32 / 20 );
				border-radius : calc( 4 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		position : relative;
		z-index : 0;
		display : grid;
		grid-template-rows : auto 1fr auto calc( 10 * var( --remBase ) ) auto calc( 10 * var( --remBase ) ) auto calc( 40 * var( --remBase ) );
		grid-template-columns : calc( 80 * 100% / 1004 ) calc( 10 * 100% / 1004 ) calc( 62 * 100% / 1004 ) calc( 10 * 100% / 1004 ) calc( 80 * 100% / 1004 ) calc( 10 * 100% / 1004 ) calc( 62 * 100% / 1004 ) calc( 10 * 100% / 1004 ) calc( 8 * 100% / 1004 ) calc( 144 * 100% / 1004 ) 1fr calc( 80 * 100% / 1004 ) calc( 10 * 100% / 1004 ) calc( 144 * 100% / 1004 ) calc( 80 * 100% / 1004 );
		height : calc( 770 * var( --remBase ) );
		padding-top : calc( 60 * var( --remBase ) );
		picture{
			position : absolute;
			top : 0;
			left : calc( 156 * 100% / 1004 );
			z-index : -1;
			img{
				height : calc( 550 * var( --remBase ) );
			}
		}
		> ul{
			display : contents;
			> li{
				padding-block : calc( 5 * var( --remBase ) );
				border-radius : calc( 5 * var( --remBase ) );
				> span{
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 27 / 18 );
				}
			}
			ul{
				margin-top : calc( 5 * var( --remBase ) );
			}
			a{
				padding-block : calc( 4 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				border-radius : calc( 5 * var( --remBase ) );
			}
		}
		> ul{
			> li{
				align-self : start;
				&:nth-child( 1 ){
					grid-row : 3;
					grid-column : 15;
					padding-inline : calc( 5 * 100% / 80 );
				}
				&:nth-child( 2 ){
					grid-row : 5;
					grid-column : 14/16;
					padding-inline : calc( 5 * 100% / 224 );
				}
				&:nth-child( 3 ){
					grid-row : 7;
					grid-column : 14/16;
					padding-inline : calc( 5 * 100% / 224 );
				}
				&:nth-child( 4 ){
					grid-row : 7/9;
					grid-column : 12;
					padding-inline : calc( 5 * 100% / 80 );
				}
				&:nth-child( 5 ){
					grid-row : 1;
					grid-column : 9/11;
					padding-inline : calc( 5 * 100% / 152 );
				}
				&:nth-child( 6 ){
					grid-row : 1;
					grid-column : 5/8;
					padding-inline : calc( 5 * 100% / 152 );
				}
				&:nth-child( 7 ){
					grid-row : 1;
					grid-column : 1/4;
					padding-inline : calc( 5 * 100% / 152 );
				}
				&:nth-child( 8 ){
					grid-row : 7/-1;
					grid-column : 7/10;
					padding-inline : calc( 5 * 100% / 80 );
				}
				&:nth-child( 9 ){
					grid-row : 7/-1;
					grid-column : 3/6;
					padding-inline : calc( 5 * 100% / 152 );
				}
				&:nth-child( 10 ){
					grid-row : 7;
					grid-column : 1;
					padding-inline : calc( 5 * 100% / 80 );
				}
				&:nth-child( 4 ) , &:nth-child( 8 ){
					li + li{
						margin-top : calc( 2 * var( --remBase ) );
					}
				}
				&:nth-child( 2 ) , &:nth-child( 3 ){
					ul{
						display : grid;
						grid-template-columns : repeat( 3 , calc( 70 * 100% / 214 ) );
						row-gap : calc( 2 * var( --remBase ) );
						column-gap : calc( 2 * 100% / 214 );
						li:last-child:nth-child( odd ){
							grid-column : 1 / -1;
						}
					}
				}
				&:nth-child( 5 ) , &:nth-child( 6 ) , &:nth-child( 7 ) , &:nth-child( 9 ){
					ul{
						display : grid;
						grid-template-columns : repeat( 2 , calc( 70 * 100% / 142 ) );
						row-gap : calc( 2 * var( --remBase ) );
						column-gap : calc( 2 * 100% / 142 );
						li:last-child:nth-child( odd ){
							grid-column : 1 / -1;
						}
					}
				}
			}
		}
	}
}
#reason{
	position : relative;
	&::after{
		position : absolute;
		top : 100%;
		display : block;
		width : 100%;
		margin-top : -1px;
		clip-path : ellipse( 75% 100% at 50% 0% );
		content : "";
		background : url( "../images/top/reason/bg.svg" ) center top / cover no-repeat;
		background-color : #dcf8ff;
	}
	@media screen and ( width <= 768px ){
		margin-bottom : calc( 100 * var( --remBase ) );
		&::after{
			height : calc( 38 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-bottom : calc( 140 * var( --remBase ) );
		&::after{
			height : calc( 146 * var( --remBase ) );
		}
		>header{
			&::before , &::after{
				position : absolute;
				display : block;
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : center;
				background-size : contain;
				border-radius : 50%;
			}
			&::before{
				top : calc( 316 * var( --remBase ) );
				left : calc( 50% + 662 * var( --viewportBase ) );
				height : calc( 117 * var( --remBase ) );
				background-image : url( "../images/ui/parts/circle_yellow.svg" );
			}
			&::after{
				top : calc( 496 * var( --remBase ) );
				left : calc( 50% - 820 * var( --viewportBase ) );
				height : calc( 190 * var( --remBase ) );
				background-image : url( "../images/ui/parts/circle_cyan.svg" );
			}
			> hgroup{
				&::before{
					position : absolute;
					top : calc( 789 * var( --remBase ) );
					left : calc( 50% + 616 * var( --viewportBase ) );
					display : block;
					width : auto;
					height : calc( 220 * var( --remBase ) );
					aspect-ratio : 560/444;
					font-size : 0;
					content : "";
					background : url( "../images/ui/parts/cleaner.webp" ) left top / contain no-repeat;
				}
			}
		}
		#reason01{
			position : relative;
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				font-size : 0;
				content : "";
			}
			&::before{
				top : 0;
				top : calc( 160 * var( --remBase ) );
				right : 0;
				height : calc( 480 * var( --remBase ) );
				aspect-ratio : 496/968;
				background : url( "../images/ui/parts/circle01.svg" ) right center / contain no-repeat;
				rotate : -180deg;
			}
			&::after{
				bottom : calc( -135 * var( --remBase ) );
				left : calc( 50% - 886 * var( --viewportBase ) );
				height : calc( 270 * var( --remBase ) );
				aspect-ratio : 486/546;
				background : url( "../images/ui/parts/mop.webp" ) left top / contain no-repeat;
			}
		}
		#reason02{
			position : relative;
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				font-size : 0;
				content : "";
			}
			&::before{
				top : calc( 540 * var( --remBase ) );
				left : calc( 50% + 724 * var( --viewportBase ) );
				height : calc( 184 * var( --remBase ) );
				aspect-ratio : 486/546;
				background : url( "../images/ui/parts/spray.webp" ) left top / contain no-repeat;
			}
			&::after{
				top : calc( 700 * var( --remBase ) );
				left : 0;
				height : calc( 344 * var( --remBase ) );
				aspect-ratio : 354/694;
				background : url( "../images/ui/parts/circle02.svg" ) left top / contain no-repeat;
			}
			> hgroup{
				&::before , &::after{
					position : absolute;
					display : block;
					width : auto;
					font-size : 0;
					content : "";
				}
				&::before{
					top : calc( 1300 * var( --remBase ) );
					left : calc( 50% - 867 * var( --viewportBase ) );
					height : calc( 133 * var( --remBase ) );
					aspect-ratio : 366/268;
					background : url( "../images/ui/parts/roller.webp" ) left top / contain no-repeat;
				}
				&::after{
					bottom : calc( -60 * var( --remBase ) );
					left : calc( 50% + 646 * var( --viewportBase ) );
					height : calc( 250 * var( --remBase ) );
					aspect-ratio : 1;
					background : url( "../images/ui/parts/circle_cyan.svg" ) left top / contain no-repeat;
				}
			}
		}
		#reason03{
			position : relative;
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				aspect-ratio : 1;
				font-size : 0;
				content : "";
				background : url( "../images/ui/parts/circle_yellow.svg" ) left top / contain no-repeat;
			}
			&::before{
				top : calc( 300 * var( --remBase ) );
				left : calc( 50% + 662 * var( --viewportBase ) );
				height : calc( 117 * var( --remBase ) );
			}
			&::after{
				top : calc( 600 * var( --remBase ) );
				top : calc( 700 * var( --remBase ) );
				left : calc( 50% - 800 * var( --viewportBase ) );
				height : calc( 174 * var( --remBase ) );
			}
			> hgroup{
				&::before{
					position : absolute;
					bottom : calc( 80 * var( --remBase ) );
					left : calc( 50% + 638 * var( --viewportBase ) );
					display : block;
					width : auto;
					height : calc( 220 * var( --remBase ) );
					aspect-ratio : 316/444;
					font-size : 0;
					content : "";
					background : url( "../images/ui/parts/broom.webp" ) left top / contain no-repeat;
				}
			}
		}
		#reason04{
			position : relative;
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				font-size : 0;
				content : "";
			}
			&::before{
				left : calc( 50% + 625 * var( --viewportBase ) );
				height : calc( 220 * var( --remBase ) );
				aspect-ratio : 560/444;
				background : url( "../images/ui/parts/cleaner.webp" ) left top / contain no-repeat;
			}
			&::after{
				top : calc( 380 * var( --remBase ) );
				left : calc( 50% - 1021 * var( --viewportBase ) );
				height : calc( 262 * var( --remBase ) );
				aspect-ratio : 1;
				background : url( "../images/ui/parts/circle_cyan.svg" ) left top / contain no-repeat;
			}
			> hgroup{
				&::before{
					position : absolute;
					bottom : calc( -400 * var( --remBase ) );
					right : 0;
					display : block;
					width : auto;
					height : calc( 478 * var( --remBase ) );
					aspect-ratio : 496/968;
					font-size : 0;
					content : "";
					background : url( "../images/ui/parts/circle01.svg" ) right center / contain no-repeat;
					rotate : -180deg;
				}
			}
		}
		#reason05{
			position : relative;
			&::before , &::after{
				position : absolute;
				display : block;
				width : auto;
				font-size : 0;
				content : "";
			}
			&::before{
				top : calc( 340 * var( --remBase ) );
				left : calc( 50% - 876 * var( --viewportBase ) );
				height : calc( 270 * var( --remBase ) );
				aspect-ratio : 486/546;
				background : url( "../images/ui/parts/mop.webp" ) left top / contain no-repeat;
			}
			&::after{
				top : calc( 680 * var( --remBase ) );
				left : calc( 50% + 706 * var( --viewportBase ) );
				height : calc( 184 * var( --remBase ) );
				aspect-ratio : 486/546;
				background : url( "../images/ui/parts/spray.webp" ) left top / contain no-repeat;
			}
			> hgroup , .box{
				&::before , &::after{
					position : absolute;
					display : block;
					width : auto;
					font-size : 0;
					content : "";
				}
			}
			> hgroup{
				&::before{
					top : calc( 740 * var( --remBase ) );
					left : 0;
					height : calc( 343 * var( --remBase ) );
					aspect-ratio : 354/694;
					background : url( "../images/ui/parts/circle02.svg" ) left top / contain no-repeat;
				}
				&::after{
					top : calc( 1240 * var( --remBase ) );
					left : calc( 50% - 857 * var( --viewportBase ) );
					height : calc( 133 * var( --remBase ) );
					aspect-ratio : 366/268;
					background : url( "../images/ui/parts/roller.webp" ) left top / contain no-repeat;
				}
			}
			.box{
				&::before , &::after{
					aspect-ratio : 1;
				}
				&::before{
					bottom : calc( 160 * var( --remBase ) );
					left : calc( 50% + 754 * var( --viewportBase ) );
					height : calc( 249 * var( --remBase ) );
					background : url( "../images/ui/parts/circle_cyan.svg" ) left top / contain no-repeat;
				}
				&::after{
					bottom : calc( 40 * var( --remBase ) );
					left : calc( 50% - 854 * var( --viewportBase ) );
					height : calc( 174 * var( --remBase ) );
					background : url( "../images/ui/parts/circle_yellow.svg" ) left top / contain no-repeat;
				}
			}
		}
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#voices{
	.title01{
		&::after{
			background : url( "../images/ui/parts/char04.webp" ) left top / contain no-repeat;
		}
	}
	@media screen and ( width <= 768px ){
		.title01{
			width : calc( 400 * var( --viewportBase ) );
		}
		> p{
			margin-top : calc( 52 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		> p{
			margin-top : calc( 72 * var( --remBase ) );
		}
	}
}
#contact + .contentContacts{
	@media screen and ( width <= 768px ){
		margin-top : calc( 32 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 60 * var( --remBase ) );
	}
}