@charset "UTF-8";

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	position : relative;
	overflow : clip;
}
#about h2 > span{
	display : block;
	width : fit-content;
	margin-inline : auto;
	line-height : 1;
}
#about h2 > span:nth-of-type( 1 ){
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#about h2 > span:nth-of-type( 1 ) span{
	font-weight : 700;
	color : black;
}
#about h2 > span:nth-of-type( 2 ) , #about h2 > span:nth-of-type( 3 ){
	font-weight : 700;
	color : var( --blue );
	text-align : center;
	background-color : white;
}
#about .service{
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : -.02em;
	letter-spacing : -.02em;
}
#about .service em{
	color : #ffec42;
}
#about .merit{
	display : grid;
	align-items : start;
	justify-content : start;
}
#about .merit img{
	z-index : 1;
	grid-row : 1/4;
	grid-column : 1/3;
}
#about .merit > span:nth-of-type( 1 ){
	grid-row : 2;
	grid-column : 2/-1;
	background-color : #d7eff5;
}
#about .merit > span:nth-of-type( 1 ) > span{
	display : block;
	text-align : center;
}
#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 1 ){
	font-weight : 500;
	color : #3b3b3b;
	text-align : center;
	text-indent : -.06em;
	letter-spacing : -.06em;
}
#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 2 ){
	font-weight : 700;
	color : #1e90a9;
}
#about .merit > span:nth-of-type( 2 ){
	grid-row : 3;
	grid-column : 3;
	justify-self : end;
	color : white;
}
@media screen and ( width <= 750px ){
	#about{
		padding-bottom : calc( 318 * var( --remBase ) );
	}
	#about::before{
		position : absolute;
		bottom : calc( -108 * var( --remBase ) );
		left : 0;
		display : block;
		width : 100%;
		height : calc( 493 * var( --remBase ) );
		font-size : 0;
		content : "";
		background : image-set( url( "../images/top/about/bg_sp.avif" ) type( "image/avif" ) , url( "../images/top/about/bg_sp.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
	}
	#about h2 > span:nth-of-type( 1 ){
		column-gap : calc( 4 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 1 ) img{
		height : calc( 76 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 1 ) span{
		font-size : calc( 49.35 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 2 ) , #about h2 > span:nth-of-type( 3 ){
		padding-block : calc( 10 * var( --remBase ) );
		padding-inline : calc( 9 * var( --remBase ) );
		margin-top : calc( 13 * var( --remBase ) );
		font-size : calc( 59.09 * var( --remBase ) );
	}
	#about .ig{
		margin-top : calc( 62 * var( --remBase ) );
		text-align : center;
	}
	#about .ig img{
		height : calc( 498 * var( --remBase ) );
	}
	#about .service{
		margin-top : calc( ( 47 - ( ( 54.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 37.5 * var( --remBase ) );
		line-height : calc( 54.17 / 37.5 );
		text-align : center;
	}
	#about .merit{
		grid-template-rows : calc( 24 * var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 132 * var( --percentBase ) ) calc( 41.05 * var( --percentBase ) ) 1fr;
		width : 100%;
		height : calc( 173.04 * var( --remBase ) );
		margin-top : calc( ( 47 - ( ( 54.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
	}
	#about .merit img{
		height : 100%;
	}
	#about .merit > span:nth-of-type( 1 ){
		padding-top : calc( ( 20 - ( ( 54.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( ( 17 - ( ( 54.17 - 48.83 ) / 2 ) ) * var( --remBase ) );
		padding-left : calc( 25 * 100% / ( 695 - 173.04 ) );
	}
	#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 1 ){
		font-size : calc( 33.33 * var( --remBase ) );
		line-height : calc( 54.17 / 33.33 );
	}
	#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 2 ){
		font-size : calc( 48.83 * var( --remBase ) );
		line-height : calc( 54.17 / 48.83 );
	}
	#about .merit > span:nth-of-type( 2 ){
		padding-top : calc( 5 * var( --remBase ) );
		font-size : calc( 17.92 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#about{
		display : grid;
		grid-template-columns : 40% 60%;
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 400 * var( --remBase ) );
	}
	#about::before , #about::after{
		position : absolute;
		display : block;
		content : "";
	}
	#about::before{
		bottom : 0;
		left : 50%;
		z-index : -1;
		width : auto;
		height : calc( 361 * var( --remBase ) );
		aspect-ratio : 1276/361;
		background : image-set( url( "../images/top/about/bg02_pc.avif" ) type( "image/avif" ) , url( "../images/top/about/bg02_pc.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
		translate : -50% 0;
	}
	#about::after{
		bottom : calc( -200 * var( --remBase ) );
		left : 0;
		z-index : -2;
		width : 100%;
		height : calc( 536 * var( --remBase ) );
		background : url( "../images/top/about/bg01_pc.svg" ) center bottom / auto 100% repeat-x;
	}
	#about h2{
		grid-row : 1;
		grid-column : 1;
		align-self : end;
	}
	#about h2 > span:nth-of-type( 1 ){
		column-gap : calc( 4 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 1 ) img{
		height : calc( 48 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 1 ) span{
		font-size : calc( 32 * var( --remBase ) );
	}
	#about h2 > span:nth-of-type( 2 ) , #about h2 > span:nth-of-type( 3 ){
		padding-block : calc( 8 * var( --remBase ) );
		padding-inline : calc( 12 * var( --remBase ) );
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 32 * var( --remBase ) );
	}
	#about .ig{
		grid-row : 1/3;
		grid-column : 2;
	}
	#about .ig img{
		width : 100%;
		height : auto;
	}
	#about .service{
		grid-row : 2;
		grid-column : 1;
		align-self : start;
		margin-top : calc( 28 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.5;
	}
	#about .merit{
		grid-template-rows : calc( 24 * var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 132 * 100% / 720 ) calc( 42 * 100% / 720 ) 1fr;
		grid-row : 4;
		grid-column : 1/-1;
		width : calc( 720 * var( --percentBase ) );
		height : calc( 172 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 32 * var( --remBase ) );
	}
	#about .merit img{
		height : 100%;
	}
	#about .merit > span:nth-of-type( 1 ){
		padding-top : calc( 12 * var( --remBase ) );
		padding-bottom : calc( ( 17 - ( ( 54.17 - 48.83 ) / 2 ) ) * var( --remBase ) );
		padding-left : calc( 25 * 100% / ( 695 - 173.04 ) );
	}
	#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 1 ){
		font-size : calc( 33.33 * var( --remBase ) );
		line-height : calc( 54.17 / 33.33 );
	}
	#about .merit > span:nth-of-type( 1 ) > span:nth-of-type( 2 ){
		font-size : calc( 48.83 * var( --remBase ) );
		line-height : calc( 54.17 / 48.83 );
	}
	#about .merit > span:nth-of-type( 2 ){
		padding-top : calc( 5 * var( --remBase ) );
		font-size : calc( 17.92 * var( --remBase ) );
	}
}

/* --------------------------------------------
WORRY
--------------------------------------------- */
#worry{
	position : relative;
	overflow-x : clip;
}
#worry::before{
	position : absolute;
	left : 50%;
	display : block;
	width : auto;
	aspect-ratio : 202/154;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/top/worry/icon.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
	translate : -50% 0;
}
#worry::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 709/266;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/ui/parts/bg01.avif" ) type( "image/avif" ) , url( "../images/ui/parts/bg01.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
}
#worry h2 > span{
	display : block;
	text-align : center;
}
#worry h2 > span:nth-of-type( 1 ){
	font-weight : 500;
	color : #3f3f3f;
}
#worry h2 > span:nth-of-type( 2 ){
	font-weight : 700;
	color : #1b90aa;
}
#worry .worries > li{
	position : relative;
	display : grid;
	align-items : center;
	justify-content : center;
	font-weight : 500;
	text-align : center;
}
#worry .worries > li::before{
	position : absolute;
	z-index : 1;
	display : block;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#worry .worries > li:nth-of-type( odd ){
	background-color : #99d4e0;
}
#worry .worries > li:nth-of-type( even ){
	background-color : #d7eff5;
}
#worry .worries > li:nth-of-type( 1 )::before{
	aspect-ratio : 172/161;
	background-image : image-set( url( "../images/top/worry/icon0101.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0101.webp" ) type( "image/webp" ) );
}
#worry .worries > li:nth-of-type( 2 )::before{
	aspect-ratio : 1;
	background-image : image-set( url( "../images/top/worry/icon0102.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0102.webp" ) type( "image/webp" ) );
}
#worry .worries > li:nth-of-type( 3 )::before{
	aspect-ratio : 169/161;
	background-image : image-set( url( "../images/top/worry/icon0103.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0103.webp" ) type( "image/webp" ) );
}
#worry > p{
	text-align : center;
}
#worry > p > span , #worry > p strong{
	display : block;
	text-align : center;
}
#worry > p > span:nth-of-type( 1 ){
	display : inline-block;
	margin-inline : auto;
	font-weight : 700;
	color : #414141;
}
#worry > p > span:nth-of-type( 2 ){
	font-weight : 500;
	color : #3f3f3f;
}
#worry > p strong{
	font-weight : 700;
	color : #1b90aa;
}
#worry h3{
	text-align : center;
}
#worry .results{
	position : relative;
}
#worry .results::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : rgb( 63 63 63 );
}
#worry .results > li{
	position : relative;
}
#worry .results > li::before{
	position : absolute;
	z-index : 1;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#worry .results > li:nth-of-type( 1 )::before{
	aspect-ratio : 158 / 170;
	background-image : image-set( url( "../images/top/worry/icon0201.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0201.webp" ) type( "image/webp" ) );
}
#worry .results > li:nth-of-type( 2 )::before{
	aspect-ratio : 288 / 186;
	background-image : image-set( url( "../images/top/worry/icon0202.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0202.webp" ) type( "image/webp" ) );
}
#worry .results > li:nth-of-type( 3 )::before{
	aspect-ratio : 183 / 187;
	background-image : image-set( url( "../images/top/worry/icon0203.avif" ) type( "image/avif" ) , url( "../images/top/worry/icon0203.webp" ) type( "image/webp" ) );
}
#worry .results > li > div{
	overflow : hidden;
	outline-style : solid;
	outline-color : #c4e6ed;
}
#worry .results > li h4{
	font-weight : 500;
	color : #1a1a1a;
	text-align : center;
}
#worry .results > li h4 span{
	color : var( --blue02 );
}
#worry .results > li p{
	font-weight : 500;
	color : #1a1a1a;
	letter-spacing : -.04em;
	background-color : #c4e6ed;
}
#worry .results > li p em{
	font-weight : 700;
	color : #1b798d;
}
@media screen and ( width <= 750px ){
	#worry{
		padding-top : calc( 130 * var( --remBase ) );
		padding-bottom : calc( 323 * var( --remBase ) );
	}
	#worry::before{
		top : calc( -117 * var( --remBase ) );
		height : calc( 154 * var( --remBase ) );
	}
	#worry::after{
		bottom : calc( -41 * var( --remBase ) );
		left : calc( 20 * var( --viewportBase ) );
		height : calc( 266 * var( --remBase ) );
	}
	#worry h2 > span:nth-of-type( 1 ){
		font-size : calc( 54.33 * var( --remBase ) );
	}
	#worry h2 > span:nth-of-type( 2 ){
		margin-top : calc( ( 157 - ( 54.33 + 83.5 ) ) * var( --remBase ) );
		font-size : calc( 83.5 * var( --remBase ) );
	}
	#worry h2 > span:nth-of-type( 2 ) span{
		font-size : calc( 71 * var( --remBase ) );
	}
	#worry .worries{
		margin-top : calc( 89 * var( --remBase ) );
	}
	#worry .worries > li{
		width : calc( 516 * var( --percentBase ) );
		min-height : calc( 203 * var( --remBase ) );
		padding-block : calc( ( 37 - ( ( 48.9 - 34.43 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 34.43 * var( --remBase ) );
		line-height : calc( 48.9 / 34.43 );
		border-radius : calc( 22 * var( --remBase ) );
	}
	#worry .worries > li::before{
		top : calc( 22 * var( --remBase ) );
		height : calc( 161 * var( --remBase ) );
	}
	#worry .worries > li + li{
		margin-top : calc( 41 * var( --remBase ) );
	}
	#worry .worries > li:nth-of-type( odd ){
		margin-left : calc( 142.5 * var( --percentBase ) );
	}
	#worry .worries > li:nth-of-type( odd )::before{
		left : calc( -109 * 100% / 516 );
	}
	#worry .worries > li:nth-of-type( even ){
		margin-left : calc( 38.5 * var( --percentBase ) );
	}
	#worry .worries > li:nth-of-type( even )::before{
		left : calc( 467 * 100% / 516 );
	}
	#worry > p{
		margin-top : calc( 68 * var( --remBase ) );
	}
	#worry > p > span:nth-of-type( 1 ){
		font-size : calc( 43.47 * var( --remBase ) );
		background : linear-gradient( to bottom , transparent calc( 30 * var( --remBase ) ) , #fde72f calc( 30 * var( --remBase ) ) , #fde72f calc( 49 * var( --remBase ) ) , transparent calc( 49 * var( --remBase ) ) , transparent 100% );
	}
	#worry > p > span:nth-of-type( 2 ){
		margin-top : calc( 44 * var( --remBase ) );
		font-size : calc( 49.46 * var( --remBase ) );
	}
	#worry > p strong{
		margin-top : calc( ( 41 - ( ( 82.05 - 64.07 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 64.7 * var( --remBase ) );
		line-height : calc( 82.05 / 64.7 );
	}
	#worry h3{
		margin-top : calc( ( 42 - ( ( 82.05 - 64.07 ) / 2 ) ) * var( --remBase ) );
	}
	#worry h3 img{
		height : calc( 78 * var( --remBase ) );
	}
	#worry .results{
		margin-top : calc( 36 * var( --remBase ) );
	}
	#worry .results::before{
		width : calc( 4 * var( --percentBase ) );
		height : calc( 105 * var( --remBase ) );
		margin-inline : auto;
		margin-bottom : calc( 130 * var( --remBase ) );
	}
	#worry .results > li + li{
		margin-top : calc( 135 * var( --remBase ) );
	}
	#worry .results > li > div{
		border-radius : calc( 7 * var( --remBase ) );
		outline-width : calc( 5 * var( --remBase ) );
		outline-offset : calc( -5 * var( --remBase ) );
	}
	#worry .results > li p{
		padding-inline : calc( 30 * var( --percentBase ) );
		font-size : calc( 29.17 * var( --remBase ) );
		line-height : calc( 41.67 / 29.17 );
	}
	#worry .results > li:nth-of-type( 1 )::before{
		top : calc( -96 * var( --remBase ) );
		left : calc( 274 * var( --percentBase ) );
		height : calc( 170 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 1 ) > div{
		padding-top : calc( ( 97 - ( ( 55.21 - 41.87 ) / 2 ) ) * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 1 ) h4{
		font-size : calc( 41.87 * var( --remBase ) );
		line-height : calc( 55.21 / 41.87 );
		text-align : center;
		text-indent : -.02em;
		letter-spacing : -.02em;
	}
	#worry .results > li:nth-of-type( 1 ) p{
		padding-block : calc( ( 38 - ( ( 41.67 - 29.17 ) / 2 ) ) * var( --remBase ) );
		margin-top : calc( ( 30 - ( ( 55.21 - 41.87 ) / 2 ) ) * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 2 )::before{
		top : calc( -112 * var( --remBase ) );
		left : calc( 188 * var( --percentBase ) );
		height : calc( 186 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 2 ) > div{
		padding-top : calc( ( 97 - ( ( 55.21 - 41.87 ) / 2 ) ) * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 2 ) h4{
		font-size : calc( 41.87 * var( --remBase ) );
		line-height : calc( 55.21 / 41.87 );
		text-align : center;
		text-indent : -.02em;
		letter-spacing : -.02em;
	}
	#worry .results > li:nth-of-type( 2 ) p{
		padding-block : calc( ( 37 - ( ( 41.67 - 29.17 ) / 2 ) ) * var( --remBase ) );
		margin-top : calc( ( 41 - ( ( 55.21 - 41.87 ) / 2 ) ) * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 3 )::before{
		top : calc( -94 * var( --remBase ) );
		left : calc( 232 * var( --percentBase ) );
		height : calc( 187 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 3 ) > div{
		padding-top : calc( 98 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 3 ) h4 img{
		height : calc( 154 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 3 ) p{
		padding-block : calc( ( 34 - ( ( 41.67 - 29.17 ) / 2 ) ) * var( --remBase ) );
		margin-top : calc( 26 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#worry{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 320 * var( --remBase ) );
		background-color : white;
	}
	#worry::before{
		top : calc( -117 * var( --remBase ) );
		height : calc( 154 * var( --remBase ) );
	}
	#worry::after{
		bottom : calc( -27 * var( --remBase ) );
		left : 50%;
		height : calc( 266 * var( --remBase ) );
		translate : -50% 0;
	}
	#worry h2 > span:nth-of-type( 1 ){
		font-size : calc( 24 * var( --remBase ) );
	}
	#worry h2 > span:nth-of-type( 2 ){
		margin-top : calc( 8 * var( --remBase ) );
		font-size : calc( 48 * var( --remBase ) );
	}
	#worry h2 > span:nth-of-type( 2 ) span{
		font-size : calc( 28 * var( --remBase ) );
	}
	#worry .worries{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 240 * var( --percentBase ) ) );
		column-gap : calc( 72 * var( --percentBase ) );
		align-items : start;
		justify-content : center;
		margin-top : calc( 64 * var( --remBase ) );
	}
	#worry .worries > li{
		min-height : calc( 203 * var( --remBase ) );
		padding-block : calc( 28 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.7;
		border-radius : calc( 20 * var( --remBase ) );
	}
	#worry .worries > li::before{
		left : 0;
		height : calc( 100 * var( --remBase ) );
	}
	#worry .worries > li:nth-child( 1 )::before{
		top : 0;
		translate : -50% -50%;
	}
	#worry .worries > li:nth-child( 2 )::before{
		bottom : 0;
		translate : -50% 50%;
	}
	#worry .worries > li:nth-child( 3 )::before{
		top : 0;
		translate : -50% -50%;
	}
	#worry > p{
		margin-top : calc( 100 * var( --remBase ) );
	}
	#worry > p > span:nth-of-type( 1 ){
		font-size : calc( 24 * var( --remBase ) );
		background : linear-gradient( to bottom , transparent calc( 30 * var( --remBase ) ) , #fde72f calc( 30 * var( --remBase ) ) , #fde72f calc( 49 * var( --remBase ) ) , transparent calc( 49 * var( --remBase ) ) , transparent 100% );
	}
	#worry > p > span:nth-of-type( 2 ){
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
	}
	#worry > p strong{
		margin-top : calc( 24 * var( --remBase ) );
		font-size : calc( 32 * var( --remBase ) );
	}
	#worry h3{
		margin-top : calc( 64 * var( --remBase ) );
	}
	#worry h3 img{
		height : calc( 80 * var( --remBase ) );
	}
	#worry .results{
		position : relative;
		display : grid;
		grid-template-columns : repeat( 3 , calc( 320 * var( --percentBase ) ) );
		justify-content : space-between;
		padding-top : calc( 105 * var( --remBase ) );
	}
	#worry .results::before{
		position : absolute;
		left : 50%;
		translate : -50% 0;
		width : calc( 2 * var( --percentBase ) );
		height : calc( 105 * var( --remBase ) );
		margin-inline : auto;
	}
	#worry .results > li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
	}
	#worry .results > li > div{
		display : inherit;
		grid-template-rows : inherit;
		grid-row : inherit;
		row-gap : calc( 12 * var( --remBase ) );
		padding-top : calc( 72 * var( --remBase ) );
		border-radius : calc( 8 * var( --remBase ) );
		outline-width : calc( 2 * var( --remBase ) );
		outline-offset : calc( -2 * var( --remBase ) );
	}
	#worry .results > li h4{
		align-content : center;
		padding-inline : calc( 16 * 100% / 320 );
	}
	#worry .results > li p{
		align-content : center;
		padding-block : calc( 16 * var( --remBase ) );
		padding-inline : calc( 16 * 100% / 320 );
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
	}
	#worry .results > li:nth-of-type( 1 )::before{
		top : calc( -72 * var( --remBase ) );
		left : 50%;
		height : calc( 120 * var( --remBase ) );
		translate : -50% 0;
	}
	#worry .results > li:nth-of-type( 1 ) h4{
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.4;
	}
	#worry .results > li:nth-of-type( 2 )::before{
		top : calc( -72 * var( --remBase ) );
		left : calc( 50 * 100% / 320 );
		height : calc( 132 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 2 ) h4{
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.4;
		letter-spacing : -.05em;
	}
	#worry .results > li:nth-of-type( 3 )::before{
		top : calc( -72 * var( --remBase ) );
		left : calc( 88 * 100% / 320 );
		height : calc( 132 * var( --remBase ) );
	}
	#worry .results > li:nth-of-type( 3 ) h4 img{
		height : calc( 64 * var( --remBase ) );
	}
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
#service{
	background-color : #d1ebef;
}
#service hgroup{
	text-align : center;
}
#service hgroup p{
	position : relative;
	display : grid;
	place-items : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 500;
	color : var( --blue02 );
	background-color : white;
}
#service hgroup p::before , #service hgroup p::after{
	position : absolute;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
}
#service hgroup p::before{
	aspect-ratio : 34/36;
	background : url( "../images/top/service/parts.svg" ) left top / contain no-repeat;
}
#service hgroup p::after{
	left : 50%;
	aspect-ratio : 30.25 / 26.72;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	background-color : white;
	translate : -50% 0;
}
#service hgroup h2{
	text-align : center;
}
#service > p{
	font-weight : 500;
	color : #4a4a4a;
	text-align : center;
}
#service table{
	table-layout : fixed;
	border-collapse : separate;
}
#service thead th > div{
	display : block;
	align-content : center;
	text-align : center;
}
#service thead th:nth-of-type( 1 ) > div{
	background-color : var( --blue );
}
#service thead th:nth-of-type( 2 ) > div{
	background-color : #9f9f9f;
}
#service tbody th , #service tbody td{
	text-align : center;
}
#service tbody th , #service tbody td:nth-of-type( 2 ){
	background-color : #f2f2f2;
}
#service tbody td:nth-of-type( 1 ){
	background-color : white;
}
#service tbody .vTop{
	vertical-align : top;
}
@media screen and ( width <= 750px ){
	#service{
		padding-top : calc( 86 * var( --remBase ) );
		padding-bottom : calc( 72 * var( --remBase ) );
	}
	#service hgroup p{
		height : calc( 66.68 * var( --remBase ) );
		padding-inline : calc( 28 * var( --remBase ) );
		font-size : calc( 43.17 * var( --remBase ) );
		border-radius : calc( 13 * var( --remBase ) );
	}
	#service hgroup p::before{
		top : calc( -31 * var( --remBase ) );
		left : calc( -31 * var( --remBase ) );
		height : calc( 36 * var( --remBase ) );
	}
	#service hgroup p::after{
		bottom : calc( -20 * var( --remBase ) );
		height : calc( 26.72 * var( --remBase ) );
	}
	#service hgroup h2{
		margin-top : calc( 40 * var( --remBase ) );
	}
	#service hgroup h2 img{
		height : calc( 171 * var( --remBase ) );
	}
	#service > p{
		margin-top : calc( ( 59 - ( ( 58.33 - 41.67 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 41.67 * var( --remBase ) );
		line-height : calc( 58.33 / 41.67 );
	}
	#service > p + p{
		margin-top : calc( ( 58.33 - 41.67 ) * var( --remBase ) );
	}
	#service table{
		width : 100%;
		margin-top : calc( ( 62 - ( ( 58.33 - 41.67 ) / 2 ) ) * var( --remBase ) );
		border-spacing : calc( 11 * var( --remBase ) );
	}
	#service thead td{
		width : calc( 195 * var( --percentBase ) );
	}
	#service thead th:first-of-type{
		width : calc( 245 * var( --percentBase ) );
	}
	#service thead th:first-of-type img{
		height : calc( 37 * var( --remBase ) );
	}
	#service thead th:nth-of-type( 2 ) img{
		height : calc( 32 * var( --remBase ) );
	}
	#service thead th > div{
		height : calc( 141 * var( --remBase ) );
		border-radius : calc( 30 * var( --remBase ) ) calc( 30 * var( --remBase ) ) 0 0;
	}
	#service tbody th , #service tbody td{
		height : calc( 155 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) th img{
		height : calc( 31 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 1 ){
		padding-top : calc( 43 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 1 ) img{
		height : calc( 57 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 2 ) img{
		height : calc( 32 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) th img{
		height : calc( 32 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) td:nth-of-type( 1 ) img{
		height : calc( 37 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) td:nth-of-type( 2 ) img{
		height : calc( 31 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) th img{
		height : calc( 31 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 1 ){
		padding-top : calc( 19 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 1 ) img{
		height : calc( 119 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 2 ){
		padding-top : calc( 30 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 2 ) img{
		height : calc( 104 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#service{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
	}
	#service hgroup p{
		height : calc( 52 * var( --remBase ) );
		padding-inline : calc( 24 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
		border-radius : calc( 12 * var( --remBase ) );
	}
	#service hgroup p::before{
		top : calc( -20 * var( --remBase ) );
		left : calc( -20 * var( --remBase ) );
		height : calc( 28 * var( --remBase ) );
	}
	#service hgroup p::after{
		bottom : calc( -16 * var( --remBase ) );
		height : calc( 24 * var( --remBase ) );
	}
	#service hgroup h2{
		margin-top : calc( 28 * var( --remBase ) );
	}
	#service hgroup h2 img{
		height : calc( 120 * var( --remBase ) );
	}
	#service > p{
		margin-top : calc( 36 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.4;
	}
	#service > p + p{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#service table{
		width : calc( 780 * var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 * var( --remBase ) );
		border-spacing : calc( 8 * var( --remBase ) );
	}
	#service thead td{
		width : calc( 100% / 3 );
	}
	#service thead th:first-of-type{
		width : calc( 100% / 3 );
	}
	#service thead th:first-of-type img{
		height : calc( 24 * var( --remBase ) );
	}
	#service thead th:nth-of-type( 2 ) img{
		height : calc( 20 * var( --remBase ) );
	}
	#service thead th > div{
		height : calc( 80 * var( --remBase ) );
		border-radius : calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) ) 0 0;
	}
	#service tbody th , #service tbody td{
		height : calc( 120 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) th img{
		height : calc( 24 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 1 ){
		padding-top : calc( 38 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 1 ) img{
		height : calc( 36 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 1 ) td:nth-of-type( 2 ) img{
		height : calc( 24 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) th img{
		height : calc( 24 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) td:nth-of-type( 1 ) img{
		height : calc( 28 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 2 ) td:nth-of-type( 2 ) img{
		height : calc( 24 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) th img{
		height : calc( 24 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 1 ){
		vertical-align : middle;
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 1 ) img{
		height : calc( 80 * var( --remBase ) );
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 2 ){
		vertical-align : middle;
	}
	#service tbody tr:nth-of-type( 3 ) td:nth-of-type( 2 ) img{
		height : calc( 76 * var( --remBase ) );
	}
}

/* --------------------------------------------
SUPPORT
--------------------------------------------- */
#support{
	position : relative;
	overflow-x : clip;
}
#support::before{
	position : absolute;
	left : 50%;
	display : block;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	font-size : 0;
	content : "";
	background-color : #d1ebef;
	translate : -50% 0;
}
#support hgroup{
	text-align : center;
}
#support hgroup p{
	font-weight : 500;
	color : #4a4a4a;
}
#support hgroup h2{
	width : fit-content;
	margin-inline : auto;
	font-weight : 500;
	color : white;
	background-image : linear-gradient( 90deg , rgb( 26 183 223 ) 0% , rgb( 54 136 211 ) 48% , rgb( 110 50 174 ) 100% );
}
#support hgroup h2 > span{
	font-weight : 700;
}
#support hgroup h2 > span span{
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	#support{
		padding-top : calc( ( 106 - ( ( 83.33 - 54.17 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( 76 * var( --remBase ) );
	}
	#support::before{
		top : calc( -8 * var( --remBase ) );
		width : calc( 98 * var( --viewportBase ) );
		height : calc( 50 * var( --remBase ) );
	}
	#support hgroup p{
		font-size : calc( 54.17 * var( --remBase ) );
		line-height : calc( 83.33 / 54.17 );
	}
	#support hgroup h2{
		padding-inline : calc( 23 * var( --remBase ) );
		padding-top : calc( 18 * var( --remBase ) );
		padding-bottom : calc( 16 * var( --remBase ) );
		margin-top : calc( ( 23 - ( ( 83.33 - 54.17 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 67.29 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#support{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
	}
	#support::before{
		top : calc( -1 * var( --remBase ) );
		width : calc( 52 * var( --viewportBase ) );
		height : calc( 36 * var( --remBase ) );
	}
	#support hgroup p{
		font-size : calc( 36 * var( --remBase ) );
		line-height : 1.4;
	}
	#support hgroup h2{
		padding-block : calc( 20 * var( --remBase ) );
		padding-inline : calc( 24 * var( --remBase ) );
		margin-top : calc( 16 * var( --remBase ) );
		font-size : calc( 48 * var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#supportReason{
		margin-top : calc( 83 * var( --remBase ) );
	}
	#supportReason > li + li{
		margin-top : calc( 81 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#supportReason{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 500 * var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 48 * var( --remBase ) );
	}
	#supportReason > li > article{
		display : flex;
		flex-direction : column;
		height : 100%;
	}
	#supportReason > li > article > div{
		display : flex;
		flex-direction : column;
		flex-grow : 1;
	}
	#supportReason > li > article footer{
		margin-top : auto;
	}
}
:where( #supportReason01 , #supportReason02 ) > p{
	position : relative;
	display : grid;
	grid-auto-flow : column;
	align-content : start;
	align-items : center;
	justify-content : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 500;
	color : white;
	color : #6a6a6a;
	background-color : #c2e4ea;
}
:where( #supportReason01 , #supportReason02 ) > p::after{
	position : absolute;
	left : 50%;
	display : block;
	font-size : 0;
	content : "";
	background-color : white;
	translate : -50% 0;
}
:where( #supportReason01 , #supportReason02 ) > p span{
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-weight : 700;
	color : #6a6a6a;
	background-color : white;
	border-radius : 50%;
}
:where( #supportReason01 , #supportReason02 ) > div{
	background-color : #c2e4ea;
}
:where( #supportReason01 , #supportReason02 ) footer{
	position : relative;
	background-color : white;
}
:where( #supportReason01 , #supportReason02 ) footer::before{
	position : absolute;
	left : 50%;
	display : block;
	width : auto;
	aspect-ratio : 102/35;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	font-size : 0;
	content : "";
	background-color : #c2e4ea;
	translate : -50% 0;
}
:where( #supportReason01 , #supportReason02 ) footer::after{
	position : absolute;
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
:where( #supportReason01 , #supportReason02 ) footer p{
	width : fit-content;
	margin-left : auto;
	font-weight : 500;
	color : #555;
	text-align : center;
}
:where( #supportReason01 , #supportReason02 ) footer p strong{
	font-weight : 500;
}
:where( #supportReason01 , #supportReason02 ) footer p span{
	display : inline;
}
@media screen and ( width <= 750px ){
	:where( #supportReason01 , #supportReason02 ) > p{
		column-gap : calc( 6 * var( --remBase ) );
		height : calc( 81 * var( --remBase ) );
		padding-inline : calc( 28 * var( --remBase ) );
		padding-top : calc( 12 * var( --remBase ) );
		font-size : calc( 37.98 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > p::after{
		bottom : calc( 8 * var( --remBase ) );
		width : calc( 100% - ( 56 * var( --remBase ) ) );
		height : calc( 4 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > p span{
		height : calc( 51.06 * var( --remBase ) );
		font-size : calc( 37.98 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > div{
		padding-inline : calc( 30 * var( --percentBase ) );
		margin-top : calc( -12 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer{
		margin-top : calc( 30 * var( --remBase ) );
		border-radius : calc( 28 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer::before{
		top : calc( -8 * var( --remBase ) );
		height : calc( 35 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer p{
		font-size : calc( 37.5 * var( --remBase ) );
		line-height : calc( 51.17 / 37.5 );
	}
	:where( #supportReason01 , #supportReason02 ) footer p span{
		background : linear-gradient( to bottom , transparent calc( 24 * var( --remBase ) ) , #ffea00 calc( 24 * var( --remBase ) ) , #ffea00 calc( 34 * var( --remBase ) ) , transparent calc( 34 * var( --remBase ) ) , transparent 100% );
	}
}
@media print , screen and ( width > 750px ){
	:where( #supportReason01 , #supportReason02 ) > p{
		column-gap : calc( 4 * var( --remBase ) );
		height : calc( 52 * var( --remBase ) );
		padding-inline : calc( 20 * var( --remBase ) );
		padding-top : calc( 8 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
		border-radius : calc( 12 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > p::after{
		bottom : calc( -4 * var( --remBase ) );
		width : calc( 100% - ( 56 * var( --remBase ) ) );
		height : calc( 2 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > p span{
		height : calc( 40 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) > div{
		padding-inline : calc( 20 * 100% / 500 );
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		margin-top : calc( -8 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer{
		margin-top : calc( 20 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer::before{
		top : calc( -8 * var( --remBase ) );
		height : calc( 20 * var( --remBase ) );
	}
	:where( #supportReason01 , #supportReason02 ) footer p{
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.5;
	}
	:where( #supportReason01 , #supportReason02 ) footer p span{
		background : linear-gradient( to bottom , transparent calc( 24 * var( --remBase ) ) , #ffea00 calc( 24 * var( --remBase ) ) , #ffea00 calc( 34 * var( --remBase ) ) , transparent calc( 34 * var( --remBase ) ) , transparent 100% );
	}
}
#supportReason01 > div > div{
	background-color : #d7eff5;
}
#supportReason01 h3{
	width : fit-content;
	margin-inline : auto;
	font-weight : 700;
	color : var( --blue );
	text-align : center;
}
#supportReason01 li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	width : fit-content;
	font-weight : 700;
	color : #484848;
	background-color : #ffec42;
}
#supportReason01 li::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/parts/check01.svg" ) left top / contain no-repeat;
}
#supportReason01 .text{
	color : #555;
	text-align : center;
}
#supportReason01 footer::after{
	aspect-ratio : 236/178;
	background-image : image-set( url( "../images/top/supports/reason/icon01.avif" ) type( "image/avif" ) , url( "../images/top/supports/reason/icon01.webp" ) type( "image/webp" ) );
}
@media screen and ( width <= 750px ){
	#supportReason01 > div{
		padding-top : calc( 33 * var( --remBase ) );
		padding-bottom : calc( 40 * var( --remBase ) );
	}
	#supportReason01 > div > div{
		padding-inline : calc( 30 * 100% / 635 );
		padding-top : calc( 34 * var( --remBase ) );
		padding-bottom : calc( ( 35 - ( ( 37.5 - 25 ) / 2 ) ) * var( --remBase ) );
		border-radius : calc( 28 * var( --remBase ) );
	}
	#supportReason01 h3{
		font-size : calc( 53.69 * var( --remBase ) );
		background : linear-gradient( to bottom , transparent calc( 39 * var( --remBase ) ) , white calc( 39 * var( --remBase ) ) , white calc( 57 * var( --remBase ) ) , transparent calc( 57 * var( --remBase ) ) , transparent 100% );
	}
	#supportReason01 h3 span{
		font-size : calc( 59.63 * var( --remBase ) );
	}
	#supportReason01 ul{
		margin-top : calc( 36 * var( --remBase ) );
	}
	#supportReason01 li{
		column-gap : calc( 23 * var( --remBase ) );
		padding-block : calc( 5 * var( --remBase ) );
		padding-left : calc( 7 * var( --remBase ) );
		padding-right : calc( 10 * var( --remBase ) );
		font-size : calc( 32.29 * var( --remBase ) );
	}
	#supportReason01 li::before{
		height : calc( 32.47 * var( --remBase ) );
	}
	#supportReason01 li + li{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#supportReason01 ul + p{
		margin-top : calc( ( 34 - ( ( 37.5 - 25 ) / 2 ) ) * var( --remBase ) );
	}
	#supportReason01 .text + .text{
		margin-top : calc( ( 37.5 - 25 ) * var( --remBase ) );
	}
	#supportReason01 .text{
		font-size : calc( 25 * var( --remBase ) );
		line-height : calc( 37.5 / 25 );
	}
	#supportReason01 footer{
		padding-top : calc( ( 65 - ( ( 51.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( ( 39 - ( ( 51.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
	}
	#supportReason01 footer p{
		margin-right : calc( 45 * 100% / 635 );
	}
	#supportReason01 footer::after{
		top : calc( 25 * var( --remBase ) );
		left : calc( 34 * 100% / 635 );
		height : calc( 178 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#supportReason01 > div > div{
		padding-block : calc( 32 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 460 );
		border-radius : calc( 16 * var( --remBase ) );
	}
	#supportReason01 h3{
		font-size : calc( 36 * var( --remBase ) );
		background : linear-gradient( to bottom , transparent calc( 39 * var( --remBase ) ) , white calc( 39 * var( --remBase ) ) , white calc( 57 * var( --remBase ) ) , transparent calc( 57 * var( --remBase ) ) , transparent 100% );
	}
	#supportReason01 h3 span{
		font-size : calc( 44 * var( --remBase ) );
	}
	#supportReason01 ul{
		margin-top : calc( 28 * var( --remBase ) );
	}
	#supportReason01 li{
		column-gap : calc( 16 * var( --remBase ) );
		padding-block : calc( 8 * var( --remBase ) );
		padding-left : calc( 8 * var( --remBase ) );
		padding-right : calc( 12 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
	}
	#supportReason01 li::before{
		height : calc( 32.47 * var( --remBase ) );
	}
	#supportReason01 li + li{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#supportReason01 ul + p{
		margin-top : calc( 20 * var( --remBase ) );
	}
	#supportReason01 .text + .text{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#supportReason01 .text{
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.6;
		text-align : left;
	}
	#supportReason01 footer{
		padding-block : calc( 24 * var( --remBase ) );
	}
	#supportReason01 footer p{
		margin-right : calc( 45 * 100% / 460 );
	}
	#supportReason01 footer::after{
		top : calc( 16 * var( --remBase ) );
		left : calc( 52 * 100% / 460 );
		height : calc( 100 * var( --remBase ) );
	}
}
#supportReason02 h3{
	text-align : center;
}
#supportReason02 .text{
	font-weight : 700;
	color : #484848;
	text-align : center;
}
#supportReason02 .box{
	background-color : white;
}
#supportReason02 h4{
	display : grid;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	font-weight : 700;
	color : white;
	background-color : var( --blue );
}
#supportReason02 .list > li{
	position : relative;
	background-color : #f4f4f4;
}
#supportReason02 h5{
	font-weight : 700;
	color : #3f3f3f;
	text-align : center;
	background-size : solid;
	border-bottom-color : rgb( 74 180 203 );
	border-bottom-style : solid;
}
#supportReason02 .list ul{
	display : flex;
	flex-wrap : wrap;
}
#supportReason02 .list li li{
	display : grid;
	grid-auto-flow : column;
	align-items : start;
	justify-content : start;
	font-weight : 500;
	color : #3f3f3f;
}
#supportReason02 .list li li::before{
	color : var( --blue02 );
	content : "・";
}
#supportReason02 footer::after{
	aspect-ratio : 188/184;
	background-image : image-set( url( "../images/top/supports/reason/icon02.avif" ) type( "image/avif" ) , url( "../images/top/supports/reason/icon02.webp" ) type( "image/webp" ) );
}
@media screen and ( width <= 750px ){
	#supportReason02 > div{
		padding-top : calc( 49 * var( --remBase ) );
		padding-bottom : calc( 38 * var( --remBase ) );
	}
	#supportReason02 h3 img{
		height : calc( 130 * var( --remBase ) );
	}
	#supportReason02 .text{
		margin-top : calc( ( 45 - ( ( 45.83 - 30.01 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 30.01 * var( --remBase ) );
		line-height : calc( 45.83 / 30.01 );
	}
	#supportReason02 .box{
		padding-inline : calc( 27 * 100% / 635 );
		padding-bottom : calc( 48 * var( --remBase ) );
		margin-top : calc( ( 43 - ( ( 45.83 - 30.01 ) / 2 ) ) * var( --remBase ) );
		border-radius : calc( 28 * var( --remBase ) );
	}
	#supportReason02 h4{
		width : calc( 410 * 100% / 581 );
		height : calc( 82 * var( --remBase ) );
		font-size : calc( 41.28 * var( --remBase ) );
		border-radius : 0 0 calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) );
	}
	#supportReason02 .list{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 283 * 100% / 581 ) );
		row-gap : calc( 42 * var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 35 * var( --remBase ) );
	}
	#supportReason02 .list > li{
		height : calc( 226.75 * var( --remBase ) );
		padding-inline : calc( 16 * 100% / 283 );
		padding-top : calc( 38 * var( --remBase ) );
		border-radius : calc( 17 * var( --remBase ) );
	}
	#supportReason02 .list h5{
		padding-bottom : calc( 19 * var( --remBase ) );
		font-size : calc( 27.52 * var( --remBase ) );
		border-bottom-width : calc( 3 * var( --remBase ) );
	}
	#supportReason02 .list ul{
		row-gap : calc( ( 50.45 - 22.52 ) * var( --remBase ) );
		padding-inline : calc( 19 * 100% / 251 );
		margin-top : calc( ( 27 - ( ( 27.52 - 22.52 ) / 2 ) ) * var( --remBase ) );
	}
	#supportReason02 .list ul > li{
		min-width : 50%;
		font-size : calc( 22.52 * var( --remBase ) );
		line-height : calc( 27.52 / 22.52 );
	}
	#supportReason02 .list > li:nth-child( 3 ) ul{
		row-gap : calc( ( 99 - ( 27.52 * 3 ) ) * var( --remBase ) );
		margin-top : calc( ( 23 - ( ( 27.52 - 22.52 ) / 2 ) ) * var( --remBase ) );
	}
	#supportReason02 footer{
		padding-top : calc( ( 65 - ( ( 51.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( ( 53 - ( ( 51.17 - 37.5 ) / 2 ) ) * var( --remBase ) );
	}
	#supportReason02 footer p{
		margin-right : calc( 60 * 100% / 635 );
	}
	#supportReason02 footer::after{
		top : calc( 36 * var( --remBase ) );
		left : calc( 77 * 100% / 635 );
		height : calc( 184 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#supportReason02 h3{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#supportReason02 h3 img{
		height : calc( 84 * var( --remBase ) );
	}
	#supportReason02 .text{
		margin-top : calc( 16 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.5;
	}
	#supportReason02 .box{
		padding-inline : calc( 20 * 100% / 460 );
		padding-bottom : calc( 32 * var( --remBase ) );
		margin-top : calc( 20 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
	}
	#supportReason02 h4{
		width : calc( 360 * 100% / 420 );
		height : calc( 40 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		border-radius : 0 0 calc( 16 * var( --remBase ) ) calc( 16 * var( --remBase ) );
	}
	#supportReason02 .list{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 200 * 100% / 420 ) );
		row-gap : calc( 20 * var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 28 * var( --remBase ) );
	}
	#supportReason02 .list > li{
		height : calc( 160 * var( --remBase ) );
		padding-inline : calc( 20 * 100% / 200 );
		padding-top : calc( 20 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
	}
	#supportReason02 .list h5{
		padding-bottom : calc( 12 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		border-bottom-width : calc( 2 * var( --remBase ) );
	}
	#supportReason02 .list ul{
		row-gap : calc( 12 * var( --remBase ) );
		padding-inline : calc( 12 * 100% / 160 );
		margin-top : calc( 12 * var( --remBase ) );
	}
	#supportReason02 .list ul > li{
		min-width : 50%;
		font-size : calc( 14 * var( --remBase ) );
		line-height : 1.4;
	}
	#supportReason02 footer{
		padding-block : calc( 24 * var( --remBase ) );
	}
	#supportReason02 footer p{
		margin-right : calc( 60 * 100% / 460 );
	}
	#supportReason02 footer::after{
		top : calc( 16 * var( --remBase ) );
		left : calc( 52 * 100% / 460 );
		height : calc( 100 * var( --remBase ) );
	}
}
#supportFooter{
	position : relative;
	overflow-x : clip;
	background-color : var( --blue02 );
}
#supportFooter::before{
	position : absolute;
	left : 50%;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	font-size : 0;
	content : "";
	background-color : var( --blue02 );
	translate : -50% 0;
}
#supportFooter h3{
	display : grid;
	grid-auto-flow : column;
	align-content : center;
	align-items : baseline;
	justify-content : center;
	margin-inline : auto;
	font-weight : 700;
	color : #606060;
	background-color : #ffec42;
}
#supportFooter > p:nth-of-type( 1 ){
	position : relative;
	text-align : center;
}
#supportFooter > p:nth-of-type( 1 )::before{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 122/ 133;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/top/supports/icon01.avif" ) type( "image/avif" ) , url( "../images/top/supports/icon01.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
}
#supportFooter h4{
	font-weight : 500;
	color : white;
	text-align : center;
}
#supportFooter ul{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
	justify-content : center;
	background-color : white;
}
#supportFooter ul li:nth-child( 1 ) , #supportFooter ul li:nth-child( 2 ) , #supportFooter ul li:nth-child( 5 ){
	width : 100%;
	text-align : center;
}
#supportFooter > p:nth-of-type( 2 ){
	position : relative;
	background-color : #ffec42;
}
#supportFooter > p:nth-of-type( 2 )::before{
	position : absolute;
	left : 50%;
	display : block;
	clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
	font-size : 0;
	content : "";
	background-color : var( --blue02 );
	translate : -50% 0;
}
#supportFooter > p:nth-of-type( 2 )::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 203/221;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/top/supports/icon02.avif" ) type( "image/avif" ) , url( "../images/top/supports/icon02.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
}
#supportFooter > p:nth-of-type( 2 ) strong{
	display : block;
	width : fit-content;
	margin-left : auto;
	font-weight : 500;
	color : #555;
	text-align : center;
}
#supportFooter > p:nth-of-type( 2 ) strong span{
	display : inline;
}
@media screen and ( width <= 750px ){
	#supportFooter{
		padding-top : calc( 4 * var( --remBase ) );
		margin-top : calc( 120 * var( --remBase ) );
		border-radius : calc( 24 * var( --remBase ) ) calc( 24 * var( --remBase ) ) 0 0;
	}
	#supportFooter::before{
		top : calc( -78 * var( --remBase ) );
		width : calc( 79 * var( --percentBase ) );
		height : calc( 47 * var( --remBase ) );
	}
	#supportFooter h3{
		width : calc( 418 * var( --percentBase ) );
		height : calc( 84 * var( --remBase ) );
		font-size : calc( 43.44 * var( --remBase ) );
		border-radius : 0 0 calc( 24 * var( --remBase ) ) calc( 24 * var( --remBase ) );
	}
	#supportFooter h3 span{
		font-size : calc( 37.5 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 ){
		margin-top : calc( 42 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 )::before{
		top : calc( 71 * var( --remBase ) );
		right : calc( 32 * var( --percentBase ) );
		height : calc( 133 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 ) img{
		height : calc( 206 * var( --remBase ) );
	}
	#supportFooter h4{
		margin-top : calc( 21 * var( --remBase ) );
		font-size : calc( 19.56 * var( --remBase ) );
	}
	#supportFooter ul{
		row-gap : calc( 26 * var( --remBase ) );
		column-gap : calc( 49 * 100% / 639 );
		width : calc( 639 * var( --percentBase ) );
		padding-top : calc( 28 * var( --remBase ) );
		padding-bottom : calc( 30 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 12 * var( --remBase ) );
		border-radius : calc( 35 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 1 ) img{
		height : calc( 55 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 2 ) img{
		height : calc( 58 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 3 ) img{
		height : calc( 62 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 4 ) img{
		height : calc( 54 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 5 ) img{
		height : calc( 51 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 ){
		padding-top : calc( ( 40 - ( ( 55.04 - 41.28 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( ( 43 - ( ( 55.04 - 41.28 ) / 2 ) ) * var( --remBase ) );
		margin-top : calc( 40 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 )::before{
		top : calc( -15 * var( --remBase ) );
		width : calc( 69 * var( --percentBase ) );
		height : calc( 30 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 )::after{
		top : calc( 31 * var( --remBase ) );
		left : calc( 87 * var( --percentBase ) );
		height : calc( 221 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 ) strong{
		margin-right : calc( 29 * var( --percentBase ) );
		font-size : calc( 41.28 * var( --remBase ) );
		line-height : calc( 55.04 / 41.28 );
	}
	#supportFooter > p:nth-of-type( 2 ) strong span{
		background : linear-gradient( to bottom , transparent calc( 30 * var( --remBase ) ) , white calc( 30 * var( --remBase ) ) , white calc( 42 * var( --remBase ) ) , transparent calc( 42 * var( --remBase ) ) , transparent 100% );
	}
}
@media print , screen and ( width > 750px ){
	#supportFooter{
		padding-top : calc( 4 * var( --remBase ) );
		margin-top : calc( 160 * var( --remBase ) );
		border-radius : calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) ) 0 0;
	}
	#supportFooter::before{
		top : calc( -72 * var( --remBase ) );
		width : calc( 64 * var( --percentBase ) );
		height : calc( 36 * var( --remBase ) );
	}
	#supportFooter h3{
		width : calc( 400 * var( --percentBase ) );
		height : calc( 64 * var( --remBase ) );
		font-size : calc( 36 * var( --remBase ) );
		border-radius : 0 0 calc( 20 * var( --remBase ) ) calc( 20 * var( --remBase ) );
	}
	#supportFooter h3 span{
		font-size : calc( 28 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 ){
		margin-top : calc( 36 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 )::before{
		top : calc( -4 * var( --remBase ) );
		right : calc( 160 * var( --percentBase ) );
		height : calc( 100 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 1 ) img{
		height : calc( 160 * var( --remBase ) );
	}
	#supportFooter h4{
		margin-top : calc( 20 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
	}
	#supportFooter ul{
		row-gap : calc( 32 * var( --remBase ) );
		column-gap : calc( 32 * 100% / 920 );
		width : calc( 920 * var( --percentBase ) );
		padding-block : calc( 48 * var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 28 * var( --remBase ) );
		border-radius : calc( 20 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 1 ) img{
		height : calc( 55 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 2 ) img{
		height : calc( 58 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 3 ) img{
		height : calc( 62 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 4 ) img{
		height : calc( 54 * var( --remBase ) );
	}
	#supportFooter li:nth-child( 5 ){
		width : fit-content ! important;
	}
	#supportFooter li:nth-child( 5 ) img{
		height : calc( 51 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 ){
		padding-block : calc( 64 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 )::before{
		top : calc( -8 * var( --remBase ) );
		width : calc( 80 * var( --percentBase ) );
		height : calc( 36 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 )::after{
		top : calc( 32 * var( --remBase ) );
		left : calc( 84 * var( --percentBase ) );
		height : calc( 120 * var( --remBase ) );
	}
	#supportFooter > p:nth-of-type( 2 ) strong{
		margin-right : calc( 132 * var( --percentBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : 2;
	}
	#supportFooter > p:nth-of-type( 2 ) strong span{
		background : linear-gradient( to bottom , transparent calc( 30 * var( --remBase ) ) , white calc( 30 * var( --remBase ) ) , white calc( 42 * var( --remBase ) ) , transparent calc( 42 * var( --remBase ) ) , transparent 100% );
	}
}

/* --------------------------------------------
STEP
--------------------------------------------- */
#step{
	position : relative;
	overflow-x : clip;
}
#step::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 709/266;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/ui/parts/bg01.avif" ) type( "image/avif" ) , url( "../images/ui/parts/bg01.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
}
#step h2 > span{
	display : block;
	font-weight : 700;
	color : #0d3249;
	text-align : center;
}
#step h2 > span:nth-of-type( 2 ) > span{
	color : #1b90aa;
}
#step h2::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : rgb( 17 48 66 );
}
#step hgroup{
	position : relative;
}
#step hgroup p{
	position : absolute;
	top : 50%;
	width : fit-content;
	color : color-mix( in srgb , #c2e4ea 47% , transparent );
	text-align : center;
	translate : 0 -50%;
	text-box : trim-both cap alphabetic;
}
#step hgroup p span{
	display : block;
	font-family : DIN , sans-serif;
	text-box : trim-both cap alphabetic;
}
#step hgroup h3{
	font-weight : 700;
	color : #0d3249;
	text-align : center;
}
#step .pics{
	position : relative;
	z-index : 1;
}
#step .pics::before{
	position : absolute;
	top : 0;
	display : block;
	height : 100%;
	font-size : 0;
	content : "";
	background-color : #c2e4ea;
}
#step .pics::after{
	position : absolute;
	z-index : 1;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#step .pics picture{
	position : relative;
	z-index : 1;
}
#step li:nth-child( 1 ) .pics::after{
	aspect-ratio : 175/185;
	background-image : image-set( url( "../images/top/step/icon01.avif" ) type( "image/avif" ) , url( "../images/top/step/icon01.webp" ) type( "image/webp" ) );
}
#step li:nth-child( 2 ) .pics::after{
	aspect-ratio : 1;
	background-image : image-set( url( "../images/top/step/icon02.avif" ) type( "image/avif" ) , url( "../images/top/step/icon02.webp" ) type( "image/webp" ) );
}
#step li:nth-child( 3 ) .pics::after{
	aspect-ratio : 180/191;
	background-image : image-set( url( "../images/top/step/icon03.avif" ) type( "image/avif" ) , url( "../images/top/step/icon03.webp" ) type( "image/webp" ) );
}
#step li > p{
	font-weight : 500;
	color : #404040;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#step{
		padding-top : calc( 83 * var( --remBase ) );
		padding-bottom : calc( ( 292 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step h2 > span{
		font-size : calc( 58.82 * var( --remBase ) );
	}
	#step h2 span span span{
		font-size : calc( 92.44 * var( --remBase ) );
	}
	#step h2::after{
		width : calc( 242 * var( --viewportBase ) );
		height : calc( 2 * var( --remBase ) );
		margin-top : calc( 55 * var( --remBase ) );
	}
	#step ol{
		margin-top : calc( 115 * var( --remBase ) );
	}
	#step hgroup p{
		font-size : calc( 38.62 * var( --remBase ) );
	}
	#step hgroup p span{
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 125.53 * var( --remBase ) );
	}
	#step hgroup h3{
		font-size : calc( 59.73 * var( --remBase ) );
	}
	#step li > p{
		font-size : calc( 29.78 * var( --remBase ) );
		line-height : calc( 39.34 / 29.78 );
	}
	#step li:nth-child( odd ) hgroup p{
		left : calc( 56 * var( --viewportBase ) );
	}
	#step li:nth-child( odd ) .pics::before{
		left : 0;
		width : calc( 720 * var( --viewportBase ) );
		border-radius : 0 calc( 100 * var( --remBase ) ) 0 0;
	}
	#step li:nth-child( even ) hgroup p{
		right : calc( 51 * var( --viewportBase ) );
	}
	#step li:nth-child( even ) .pics::before{
		right : 0;
		width : calc( 720 * var( --viewportBase ) );
		border-radius : calc( 100 * var( --remBase ) ) 0 0 0;
	}
	#step li:nth-child( 1 ) > p{
		margin-top : calc( ( 36 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step li:nth-child( 2 ){
		margin-top : calc( ( 56 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step li:nth-child( 2 ) > p{
		margin-top : calc( ( 41 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step li:nth-child( 3 ){
		margin-top : calc( ( 90 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step li:nth-child( 3 ) > p{
		margin-top : calc( ( 47 - ( ( 39.34 - 29.78 ) / 2 ) ) * var( --remBase ) );
	}
	#step::after{
		bottom : calc( -41 * var( --remBase ) );
		left : calc( 20 * var( --viewportBase ) );
		height : calc( 266 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#step{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 320 * var( --remBase ) );
	}
	#step h2 > span{
		font-size : calc( 40 * var( --remBase ) );
	}
	#step h2 span span span{
		font-size : calc( 72 * var( --remBase ) );
	}
	#step h2::after{
		width : calc( 160 * var( --viewportBase ) );
		height : calc( 2 * var( --remBase ) );
		margin-top : calc( 28 * var( --remBase ) );
	}
	#step ol{
		margin-top : calc( 115 * var( --remBase ) );
	}
	#step hgroup{
		margin-inline : auto;
	}
	#step hgroup p{
		font-size : calc( 28 * var( --remBase ) );
	}
	#step hgroup p span{
		margin-top : calc( 8 * var( --remBase ) );
		font-size : calc( 100 * var( --remBase ) );
	}
	#step hgroup h3{
		font-size : calc( 48 * var( --remBase ) );
	}
	#step li > p{
		margin-top : calc( 28 * var( --remBase ) );
		font-size : calc( 28 * var( --remBase ) );
		line-height : 1.5;
	}
	#step li:nth-child( odd ) hgroup p{
		left : calc( 48 * var( --percentBase ) );
	}
	#step li:nth-child( odd ) .pics::before{
		left : 0;
		width : calc( 50% + ( var( --wrapperSize ) / 2 * var( --viewportBase ) ) );
		border-radius : 0 calc( 100 * var( --remBase ) ) 0 0;
	}
	#step li:nth-child( even ) hgroup p{
		right : calc( 48 * var( --percentBase ) );
	}
	#step li:nth-child( even ) .pics::before{
		right : 0;
		width : calc( 50% + ( var( --wrapperSize ) / 2 * var( --viewportBase ) ) );
		border-radius : calc( 100 * var( --remBase ) ) 0 0 0;
	}
	#step li:nth-child( 2 ){
		margin-top : calc( 64 * var( --remBase ) );
	}
	#step li:nth-child( 3 ){
		margin-top : calc( 64 * var( --remBase ) );
	}
	#step::after{
		bottom : calc( -41 * var( --remBase ) );
		left : 50%;
		height : calc( 266 * var( --remBase ) );
		translate : -50% 0;
	}
}
#stepPics01 picture{
	text-align : center;
}
@media screen and ( width <= 750px ){
	#stepPics01{
		padding-bottom : calc( 19 * var( --remBase ) );
		margin-top : calc( 24 * var( --remBase ) );
	}
	#stepPics01::after{
		bottom : calc( -22 * var( --remBase ) );
		right : calc( 7 * var( --viewportBase ) );
		height : calc( 185 * var( --remBase ) );
	}
	#stepPics01 img{
		height : calc( 347 * var( --remBase ) );
		margin-top : calc( -7 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#stepPics01{
		padding-block : calc( 48 * var( --remBase ) );
		margin-top : calc( 20 * var( --remBase ) );
	}
	#stepPics01::after{
		bottom : calc( -16 * var( --remBase ) );
		right : calc( 50% - var( --wrapperSize ) / 2 * var( --viewportBase ) - 16 * var( --viewportBase ) );
		height : calc( 120 * var( --remBase ) );
	}
	#stepPics01 img{
		height : calc( 400 * var( --remBase ) );
	}
}
#stepPics02{
	display : grid;
	grid-auto-flow : column;
	align-content : start;
	align-items : center;
}
@media screen and ( width <= 750px ){
	#stepPics02{
		column-gap : calc( 17 * 100% / 499 );
		justify-content : start;
		padding-top : calc( 42 * var( --remBase ) );
		padding-bottom : calc( 56 * var( --remBase ) );
		padding-left : calc( 196 * var( --percentBase ) );
		margin-top : calc( 18 * var( --remBase ) );
	}
	#stepPics02::after{
		bottom : calc( -23 * var( --remBase ) );
		left : calc( 6 * var( --viewportBase ) );
		height : calc( 197 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 1 ) img{
		height : calc( 135 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 2 ) img{
		height : calc( 54 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 3 ) img{
		height : calc( 246 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#stepPics02{
		column-gap : calc( 40 * var( --percentBase ) );
		justify-content : center;
		padding-block : calc( 48 * var( --remBase ) );
		margin-top : calc( 24 * var( --remBase ) );
	}
	#stepPics02::after{
		bottom : calc( -16 * var( --remBase ) );
		left : calc( 50% - var( --wrapperSize ) / 2 * var( --viewportBase ) - 16 * var( --viewportBase ) );
		height : calc( 120 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 1 ) img{
		height : calc( 160 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 2 ) img{
		height : calc( 64 * var( --remBase ) );
	}
	#stepPics02 picture:nth-of-type( 3 ) img{
		height : calc( 280 * var( --remBase ) );
	}
}
#stepPics03{
	display : grid;
	grid-auto-flow : column;
	align-content : start;
	align-items : center;
}
#stepPics03 picture:nth-of-type( 2 ){
	position : absolute;
}
@media screen and ( width <= 750px ){
	#stepPics03{
		grid-template-columns : auto calc( 1 * var( --percentBase ) ) auto calc( 17 * var( --percentBase ) ) auto;
		justify-content : start;
		padding-block : calc( 93 * var( --remBase ) );
		margin-top : calc( 19 * var( --remBase ) );
	}
	#stepPics03::after{
		bottom : calc( -35 * var( --remBase ) );
		right : calc( 4 * var( --viewportBase ) );
		height : calc( 191 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 1 ){
		grid-column : 1;
	}
	#stepPics03 picture:nth-of-type( 1 ) img{
		height : calc( 173 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 2 ){
		top : calc( 72 * var( --remBase ) );
		left : calc( 315.5 * var( --percentBase ) );
	}
	#stepPics03 picture:nth-of-type( 2 ) img{
		height : calc( 80 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 3 ){
		grid-column : 3;
	}
	#stepPics03 picture:nth-of-type( 3 ) img{
		height : calc( 25 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 4 ){
		grid-column : 5;
	}
	#stepPics03 picture:nth-of-type( 4 ) img{
		height : calc( 91 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#stepPics03{
		grid-template-columns : auto calc( 1 * var( --percentBase ) ) auto calc( 17 * var( --percentBase ) ) auto;
		justify-content : center;
		padding-block : calc( 93 * var( --remBase ) );
		margin-top : calc( 19 * var( --remBase ) );
	}
	#stepPics03::after{
		bottom : calc( -16 * var( --remBase ) );
		right : calc( 50% - var( --wrapperSize ) / 2 * var( --viewportBase ) - 16 * var( --viewportBase ) );
		height : calc( 120 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 1 ){
		grid-column : 1;
	}
	#stepPics03 picture:nth-of-type( 1 ) img{
		height : calc( 200 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 2 ){
		top : calc( 64 * var( --remBase ) );
		left : calc( 50% - ( 50 * var( --viewportBase ) ) );
	}
	#stepPics03 picture:nth-of-type( 2 ) img{
		height : calc( 100 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 3 ){
		grid-column : 3;
	}
	#stepPics03 picture:nth-of-type( 3 ) img{
		height : calc( 48 * var( --remBase ) );
	}
	#stepPics03 picture:nth-of-type( 4 ){
		grid-column : 5;
	}
	#stepPics03 picture:nth-of-type( 4 ) img{
		height : calc( 120 * var( --remBase ) );
	}
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voice{
	position : relative;
	overflow-x : clip;
}
#voice::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/top/voice/bg.avif" ) type( "image/avif" ) , url( "../images/top/voice/bg.webp" ) type( "image/webp" ) ) 0 0 / 100% auto no-repeat;
}
#voice::after{
	position : absolute;
	aspect-ratio : 686/258;
	font-size : 0;
	content : "";
	background : image-set( url( "../images/ui/parts/bg01.avif" ) type( "image/avif" ) , url( "../images/ui/parts/bg01.webp" ) type( "image/webp" ) ) left top / contain no-repeat;
}
#voice h2 > span{
	display : block;
	font-weight : 700;
	text-align : center;
}
#voice h2 > span:nth-of-type( 1 ){
	color : #2b2b2b;
}
#voice h2 > span:nth-of-type( 2 ) span{
	display : block;
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	padding-inline : .5em;
	margin-inline : auto;
	color : var( --blue02 );
	background-color : white;
}
#voice h2 > span:nth-of-type( 3 ){
	color : #2b2b2b;
}
#voice li{
	position : relative;
}
#voice li::before , #voice li::after{
	position : absolute;
	display : block;
	width : auto;
	font-size : 0;
	content : "";
}
#voice li::before{
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#voice li::after{
	left : 50%;
	aspect-ratio : 75.25/47.66;
	clip-path : polygon( 50% 0 , 100% 100% , 0 100% );
	background-color : var( --blue02 );
	translate : -50% 0;
}
#voice li > div{
	background-color : var( --blue02 );
}
#voice li:nth-of-type( 1 )::before{
	aspect-ratio : 1;
	background-image : image-set( url( "../images/top/voice/icon01.avif" ) type( "image/avif" ) , url( "../images/top/voice/icon01.webp" ) type( "image/webp" ) );
}
#voice li:nth-of-type( 2 )::before{
	aspect-ratio : 256/232;
	background-image : image-set( url( "../images/top/voice/icon02.avif" ) type( "image/avif" ) , url( "../images/top/voice/icon02.webp" ) type( "image/webp" ) );
}
#voice li:nth-of-type( 3 )::before{
	aspect-ratio : 259/225;
	background-image : image-set( url( "../images/top/voice/icon03.avif" ) type( "image/avif" ) , url( "../images/top/voice/icon03.webp" ) type( "image/webp" ) );
}
#voice h3{
	font-weight : 700;
	color : #2d2d2d;
}
#voice h3 span{
	display : inline;
}
#voice ul::after{
	display : block;
	width : auto;
	aspect-ratio : 8/106;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background : url( "../images/top/voice/parts.svg" ) left top / contain no-repeat;
}
#voice li p{
	font-weight : 700;
	color : white;
	border-top-color : currentColor;
	border-top-style : solid;
}
#voice li footer{
	font-weight : 500;
	color : white;
}
#voice > footer p:first-of-type{
	display : grid;
	align-items : center;
	justify-content : center;
	background-color : white;
}
#voice > footer p:first-of-type > span{
	font-weight : 700;
	background : linear-gradient( to right , #1ab7df , #3688d3 48% , #6e32ae 100% );
	-webkit-background-clip : text;
	background-clip : text;
	-webkit-text-fill-color : transparent;
}
#voice > footer p:nth-of-type( 2 ){
	font-weight : 700;
	color : #2b2b2b;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#voice{
		padding-top : calc( 107 * var( --remBase ) );
		padding-bottom : calc( ( 238 - ( ( 48.86 - 29.17 ) / 2 ) ) * var( --remBase ) );
	}
	#voice::after{
		position : absolute;
		bottom : calc( -93 * var( --remBase ) );
		left : calc( 32 * var( --viewportBase ) );
		z-index : 1;
		height : calc( 258 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 1 ){
		font-size : calc( 37.8 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ){
		margin-top : calc( 12 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ) > span{
		height : calc( 70 * var( --remBase ) );
		font-size : calc( 58.1 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ) > span + span{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 3 ){
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 37.8 * var( --remBase ) );
	}
	#voice ul{
		margin-top : calc( 366 * var( --remBase ) );
	}
	#voice ul::after{
		height : calc( 106 * var( --remBase ) );
		margin-top : calc( 41 * var( --remBase ) );
	}
	#voice li + li{
		margin-top : calc( 365 * var( --remBase ) );
	}
	#voice li::after{
		top : calc( -35 * var( --remBase ) );
		height : calc( 47.66 * var( --remBase ) );
	}
	#voice li > div{
		padding-inline : calc( 26 * var( --percentBase ) );
		padding-top : calc( ( 42 - ( ( 54.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		padding-bottom : calc( ( 29 - ( ( 54.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		border-radius : calc( 29 * var( --remBase ) );
	}
	#voice li:nth-of-type( 1 )::before{
		top : calc( -299 * var( --remBase ) );
		left : calc( 220.5 * var( --percentBase ) );
		height : calc( 233 * var( --remBase ) );
	}
	#voice li:nth-of-type( 2 )::before{
		top : calc( -295 * var( --remBase ) );
		left : calc( 225.5 * var( --percentBase ) );
		height : calc( 232 * var( --remBase ) );
	}
	#voice li:nth-of-type( 3 )::before{
		top : calc( -292 * var( --remBase ) );
		left : calc( 225.5 * var( --percentBase ) );
		height : calc( 225 * var( --remBase ) );
	}
	#voice h3{
		padding-inline : calc( 9 * 100% / 643 );
		font-size : calc( 33.33 * var( --remBase ) );
		line-height : calc( 54.17 / 33.33 );
	}
	#voice h3 span{
		padding-inline : calc( 9 * var( --remBase ) );
		background-image : linear-gradient( to bottom , transparent calc( 50% - ( 20 * var( --remBase ) ) ) , #fff000 calc( 50% - ( 20 * var( --remBase ) ) ) , #fff000 calc( 50% + ( 20 * var( --remBase ) ) ) , transparent calc( 50% + ( 20 * var( --remBase ) ) ) );
	}
	#voice li p{
		padding-top : calc( ( 34 - ( ( 51.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		margin-top : calc( ( 13 - ( ( 51.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 33.33 * var( --remBase ) );
		line-height : calc( 54.17 / 33.33 );
		border-top-width : calc( 2 * var( --remBase ) );
	}
	#voice li footer{
		margin-top : calc( ( 25 - ( ( 51.17 - 33.33 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 33.33 * var( --remBase ) );
		line-height : calc( 54.17 / 33.33 );
	}
	#voice > footer{
		margin-top : calc( 53 * var( --remBase ) );
	}
	#voice > footer p:nth-of-type( 1 ){
		height : calc( 80 * var( --remBase ) );
		font-size : calc( 62.97 * var( --remBase ) );
	}
	#voice > footer p:nth-of-type( 2 ){
		margin-top : calc( ( 29 - ( ( 48.86 - 29.17 ) / 2 ) ) * var( --remBase ) );
		font-size : calc( 29.17 * var( --remBase ) );
		line-height : calc( 48.86 / 29.17 );
	}
}
@media print , screen and ( width > 750px ){
	#voice{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 200 * var( --remBase ) );
	}
	#voice::before{
		background-position : center bottom;
	}
	#voice::after{
		position : absolute;
		bottom : calc( -93 * var( --remBase ) );
		left : 50%;
		z-index : 1;
		height : calc( 258 * var( --remBase ) );
		translate : -50% 0;
	}
	#voice h2 > span:nth-of-type( 1 ){
		font-size : calc( 32 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ){
		margin-top : calc( 8 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ) > span{
		height : calc( 70 * var( --remBase ) );
		font-size : calc( 40 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 2 ) > span + span{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#voice h2 > span:nth-of-type( 3 ){
		margin-top : calc( 8 * var( --remBase ) );
		font-size : calc( 32 * var( --remBase ) );
	}
	#voice ul{
		position : relative;
		display : grid;
		grid-template-columns : repeat( 3 , calc( 320 * var( --percentBase ) ) );
		align-items : stretch;
		justify-content : space-between;
		padding-block : calc( 160 * var( --remBase ) );
		margin-top : calc( 92 * var( --remBase ) );
	}
	#voice ul::after{
		position : absolute;
		bottom : 0;
		left : 50%;
		height : calc( 80 * var( --remBase ) );
		translate : -50% 0;
	}
	#voice li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
	}
	#voice li::after{
		top : calc( -20 * var( --remBase ) );
		height : calc( 28 * var( --remBase ) );
	}
	#voice li > div{
		display : inherit;
		grid-template-rows : inherit;
		grid-row : inherit;
		row-gap : calc( 8 * var( --remBase ) );
		height : 100%;
		padding-inline : calc( 12 * 100% / 320 );
		padding-top : calc( 32 * var( --remBase ) );
		padding-bottom : calc( 12 * var( --remBase ) );
		border-radius : calc( 16 * var( --remBase ) );
	}
	#voice li:nth-of-type( 1 )::before{
		top : calc( -200 * var( --remBase ) );
		left : calc( 72 * 100% / 320 );
		height : calc( 160 * var( --remBase ) );
	}
	#voice li:nth-of-type( 2 )::before{
		top : calc( -200 * var( --remBase ) );
		left : calc( 76 * 100% / 320 );
		height : calc( 160 * var( --remBase ) );
	}
	#voice li:nth-of-type( 3 )::before{
		top : calc( -200 * var( --remBase ) );
		left : calc( 72 * 100% / 320 );
		height : calc( 160 * var( --remBase ) );
	}
	#voice h3{
		align-self : center;
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.5;
	}
	#voice h3 span{
		background-image : linear-gradient( to bottom , transparent calc( 50% - ( 30 * var( --remBase ) ) ) , #fff000 calc( 50% - ( 30 * var( --remBase ) ) ) , #fff000 calc( 50% + ( 30 * var( --remBase ) ) ) , transparent calc( 50% + ( 30 * var( --remBase ) ) ) );
	}
	#voice li p{
		padding-top : calc( 8 * var( --remBase ) );
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
		border-top-width : calc( 2 * var( --remBase ) );
	}
	#voice li footer{
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
		text-align : right;
	}
	#voice > footer{
		margin-top : calc( 48 * var( --remBase ) );
	}
	#voice > footer p:nth-of-type( 1 ){
		height : calc( 64 * var( --remBase ) );
		font-size : calc( 48 * var( --remBase ) );
	}
	#voice > footer p:nth-of-type( 2 ){
		margin-top : calc( 12 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		line-height : 1.5;
	}
}