@charset "UTF-8";

/* --------------------------------------------
CTA01
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#cta01{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#cta01{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
}

/* --------------------------------------------
CTA
--------------------------------------------- */
.cta{
	margin-inline : auto;
	border-radius : calc( 8 var( --remBase ) );
}
.cta p > span:nth-of-type( 1 ){
	font-weight : 700;
}
.cta p > span:nth-of-type( 1 ) > span{
	display : block;
	letter-spacing : .05em;
}
.cta p > span:nth-of-type( 1 ) > span:nth-of-type( 1 ){
	font-size : 2.4rem;
	line-height : 1.2;
}
.cta p > span:nth-of-type( 1 ) > span:nth-of-type( 2 ){
	font-size : 1.6rem;
	line-height : 1.2;
}
.cta p > span:nth-of-type( 1 ) span span{
	color : var( --yellow );
}
.cta p > span:nth-of-type( 2 ){
	display : grid;
	grid-template-rows : calc( 26.89 var( --remBase ) ) auto 1fr;
	grid-template-columns : auto auto;
}
.cta p > span:nth-of-type( 2 ) span:nth-of-type( 1 ){
	grid-row : 2;
	grid-column : 2;
	justify-self : center;
	font-size : 1.2rem;
	font-weight : 500;
	line-height : 1.09;
	color : var( --yellow );
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
.cta p > span:nth-of-type( 2 ) img{
	grid-row : 1/-1;
	grid-column : 1;
	height : calc( 92.25 var( --remBase ) );
}
.cta p > span:nth-of-type( 2 ) span:nth-of-type( 2 ){
	grid-row : 3;
	grid-column : 2;
	justify-self : center;
	font-size : 3.5340000000000003rem;
	font-weight : 700;
	line-height : calc( 38.87 / 35.34 );
	color : var( --yellow );
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
}
.cta p > span:nth-of-type( 3 ){
	font-size : 1.2rem;
	font-weight : 500;
	line-height : 1.09;
	letter-spacing : .01em;
}
.cta a{
	display : grid;
	place-items : center;
	width : 100%;
	height : calc( 64 var( --remBase ) );
	margin-top : calc( 12 var( --remBase ) );
	overflow : hidden;
	font-size : 2.2rem;
	font-weight : 700;
	border-radius : 100vmax;
}
@media screen and ( width <= 750px ){
	.cta{
		width : 100%;
		padding-inline : calc( 20 var( --percentBase ) );
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	.cta p > span:nth-of-type( 1 ) > span:nth-of-type( 1 ){
		text-align : center;
		text-indent : .05em;
	}
	.cta p > span:nth-of-type( 1 ) > span:nth-of-type( 2 ){
		margin-top : calc( 5 var( --remBase ) );
		text-align : center;
		text-indent : .05em;
	}
	.cta p > span:nth-of-type( 2 ){
		column-gap : calc( 1.6 * 100% / 287 );
		justify-content : center;
		margin-top : calc( 18 var( --remBase ) );
	}
	.cta p > span:nth-of-type( 3 ){
		display : block;
		padding-right : calc( 17.4 * 100% / 287 );
		margin-top : calc( ( ( 84.89 - 92.25 ) ) var( --remBase ) );
		text-align : right;
	}
	.cta a{
		background-color : var( --red );
	}
}
@media print , screen and ( width > 750px ){
	.cta{
		width : calc( 620 var( --percentBase ) );
		padding-inline : calc( 80 var( --percentBase ) );
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	.cta p{
		display : grid;
		grid-template-rows : calc( 86 var( --remBase ) ) auto;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
		padding-inline : calc( 24 * 100% / 460 );
	}
	.cta p > span:nth-of-type( 1 ){
		grid-row : 1/-1;
		grid-column : 1;
	}
	.cta p > span:nth-of-type( 2 ){
		grid-row : 1/-1;
		grid-column : 2;
	}
	.cta p > span:nth-of-type( 3 ){
		grid-row : 2;
		grid-column : 2;
		justify-self : end;
	}
	.cta a{
		background-image : linear-gradient( 180deg , var( --red ) 0% , var( --red ) 50% , #cf261c 50% , #cf261c 100% );
	}
}
.cta01{
	background-color : var( --blue );
	box-shadow : 0 calc( 4 var( --remBase ) ) 0 color-mix( in sRGB , black 25% , transparent );
}
.cta02{
	background-color : var( --blue02 );
	box-shadow : 0 calc( 4 var( --remBase ) ) 0 black;
}

/* --------------------------------------------
WORRY
--------------------------------------------- */
#worry{
	position : relative;
	overflow-x : clip;
	overflow-y : hidden;
	background-color : #cfcfcf;
}
#worry::after{
	position : absolute;
	display : block;
	width : auto;
	aspect-ratio : 192.61/181;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/worry/char.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#worry h2 > span{
	font-weight : 700;
	color : var( --blue );
	text-align : center;
	text-indent : .16em;
	letter-spacing : .16em;
}
#worry h2 span span{
	text-align : center;
	text-indent : .16em;
	letter-spacing : .16em;
}
#worry li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
	font-weight : 700;
	color : var( --blue );
	background-color : var( --base );
}
#worry li::before{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/worry/check.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#worry li + li{
	margin-top : calc( 8 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#worry{
		padding-block : calc( ( 40 - 3 ) var( --remBase ) );
	}
	#worry::after{
		top : calc( 139 var( --remBase ) );
		left : 50%;
		height : calc( 151.58 var( --remBase ) );
		translate : -50% 0;
	}
	#worry h2{
		text-align : center;
	}
	#worry h2 span{
		font-size : 2.4rem;
		white-space : nowrap;
	}
	#worry h2 span span{
		display : inline-block;
		margin-top : calc( ( 20 - 3 - 5.5 ) var( --remBase ) );
		font-size : 4rem;
	}
	#worry ul{
		position : relative;
		z-index : 1;
		margin-top : calc( ( 175.58 - 5.5 ) var( --remBase ) );
	}
	#worry li{
		column-gap : calc( 10 * 100% / 279 );
		align-items : center;
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		font-size : 1.8rem;
		line-height : 1.29;
	}
	#worry li::before{
		height : calc( 20 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#worry{
		padding-block : calc( 64 var( --remBase ) );
	}
	#worry::after{
		bottom : calc( -9 var( --remBase ) );
		height : calc( 181 var( --remBase ) );
	}
	#worry h2{
		display : grid;
		grid-template-columns : 1fr auto 1fr;
		align-items : center;
		margin-left : calc( 50% - 50vw );
		margin-right : calc( 50% - 50vw );
	}
	#worry h2 > span{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		font-size : 2.4rem;
		line-height : 1.6;
	}
	#worry h2 span span{
		font-size : 4rem;
		line-height : 1.6;
	}
	#worry h2::before , #worry h2::after{
		display : block;
		height : calc( 2 var( --remBase ) );
		content : "";
		background-color : var( --blue );
	}
	#worry ul{
		width : calc( 460 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
	}
	#worry ul::before{
		position : absolute;
		bottom : calc( -61 var( --remBase ) );
		display : block;
		width : auto;
		height : calc( 204 var( --remBase ) );
		aspect-ratio : 160/204;
		font-size : 0;
		content : "";
		background-image : image-set( url( "../images/home/worry/duck.avif" ) type( "image/avif" ) , url( "../images/home/worry/duck.webp" ) type( "image/webp" ) );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	#worry li{
		display : grid;
		column-gap : calc( 10 * 100% / 396 );
		padding-block : calc( 17 var( --remBase ) );
		padding-inline : calc( 32 * 100% / 460 );
		font-size : 1.8rem;
	}
	#worry li::before{
		height : calc( 20 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	#worry::after{
		left : calc( 782 var( --viewportBase ) );
	}
	#worry h2{
		column-gap : calc( 23.5 var( --viewportBase ) );
	}
	#worry ul::before{
		left : calc( 161 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	#worry::after{
		left : calc( 50% + 212px );
	}
	#worry h2{
		column-gap : 23.5px;
	}
	#worry ul::before{
		left : calc( 50% - 409px );
	}
}

/* --------------------------------------------
SOLVE
--------------------------------------------- */
#solve{
	position : relative;
	overflow-x : clip;
	background-color : var( --blue );
}
#solve > p{
	display : grid;
}
#solve > p span{
	display : grid;
	place-items : center;
	aspect-ratio : 85.59/76;
	font-weight : 900;
	color : var( --blue );
	background : url( "../images/home/solve/bg_comment.svg" ) center / contain no-repeat;
}
#solve > p strong{
	font-weight : 700;
	line-height : 1.5;
	letter-spacing : .15em;
}
#solve > p::after{
	display : block;
	width : auto;
	aspect-ratio : 375.42/273;
	font-size : 0;
	content : "";
	background-image : url( "../images/home/solve/char.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#solve .box{
	position : relative;
	z-index : 1;
	background-color : var( --blue03 );
	box-shadow : 0 calc( 4 var( --remBase ) ) var( --blue02 );
}
#solve hgroup p{
	font-size : 2rem;
	line-height : 1.6;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#solve hgroup h2{
	margin-top : calc( 25 var( --remBase ) );
}
#solve hgroup picture{
	text-align : center;
}
#solve ul{
	margin-top : calc( 40 var( --remBase ) );
}
#solve li span{
	font-size : 1.8rem;
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
#solve li::before{
	display : block;
	width : auto;
	height : calc( 180 var( --remBase ) );
	aspect-ratio : 182/180;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#solve li:nth-child( 1 )::before{
	background-image : url( "../images/home/solve/icon01.svg" );
}
#solve li:nth-child( 2 )::before{
	background-image : url( "../images/home/solve/icon02.svg" );
}
#solve li:nth-child( 3 )::before{
	background-image : url( "../images/home/solve/icon03.svg" );
}
@media screen and ( width <= 750px ){
	#solve{
		padding-top : calc( 40 var( --remBase ) );
	}
	#solve > p{
		grid-template-rows : auto calc( 210.04 var( --remBase ) );
		grid-template-columns : calc( 9.7 var( --percentBase ) ) auto calc( 8 var( --percentBase ) ) 1fr;
		row-gap : calc( 32 var( --remBase ) );
	}
	#solve > p span{
		grid-row : 1;
		grid-column : 2;
		align-self : center;
		height : calc( 76 var( --remBase ) );
		font-size : 1.28rem;
	}
	#solve > p strong{
		grid-column : 4;
		align-self : center;
		justify-self : start;
		font-size : 3.6rem;
	}
	#solve > p::after{
		grid-row : 2;
		grid-column : 1/-1;
		justify-self : center;
	}
	#solve .box{
		padding-block : calc( 40 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
	}
	#solve hgroup img{
		height : calc( 91.37 var( --remBase ) );
	}
	#solve li{
		text-align : center;
	}
	#solve li + li{
		margin-top : calc( 32 var( --remBase ) );
	}
	#solve li::before{
		margin-inline : auto;
	}
	#solve li span{
		display : block;
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#solve{
		padding-top : calc( 80 var( --remBase ) );
	}
	#solve::after{
		position : absolute;
		top : 0;
		left : 50%;
		display : block;
		height : calc( 35 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
		content : "";
		background-color : #cfcfcf;
		translate : -50% 0;
	}
	#solve > p{
		position : relative;
		align-items : center;
		width : calc( 776 var( --percentBase ) );
		height : calc( 263 var( --remBase ) );
		padding-left : calc( 26 var( --percentBase ) );
		margin-inline : auto;
	}
	#solve > p span{
		position : absolute;
		top : calc( -32 var( --remBase ) );
		left : calc( -59 * 100% / 776 );
		height : calc( 99.58 var( --remBase ) );
		aspect-ratio : 95/99.58;
		font-size : 1.6rem;
	}
	#solve > p strong{
		font-size : 5.6rem;
	}
	#solve > p::after{
		position : absolute;
		bottom : calc( -10 var( --remBase ) );
		left : calc( 374 * 100% / 776 );
		height : calc( 273 var( --remBase ) );
	}
	#solve .box{
		position : relative;
		width : calc( 776 var( --percentBase ) );
		padding-block : calc( 48 var( --remBase ) );
		margin-inline : auto;
		overflow : hidden;
		border-radius : calc( 16 var( --remBase ) );
	}
	#solve .box::after{
		position : absolute;
		bottom : calc( -87.14 var( --remBase ) );
		left : calc( 662 * 100% / 776 );
		display : block;
		width : auto;
		height : calc( 258 var( --remBase ) );
		aspect-ratio : 250/258;
		font-size : 0;
		content : "";
		background-image : image-set( url( "../images/home/solve/duck.avif" ) type( "image/avif" ) , url( "../images/home/solve/duck.webp" ) type( "image/webp" ) );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	#solve hgroup img{
		height : calc( 39.86 var( --remBase ) );
	}
	#solve ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 182 * 100% / 776 ) );
		column-gap : calc( 32 * 100% / 776 );
		justify-content : center;
	}
	#solve li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
		row-gap : calc( 16 var( --remBase ) );
	}
	#solve li span{
		align-self : center;
		width : fit-content;
		margin-inline : auto;
		white-space : nowrap;
	}
	#solve li::before{
		grid-column : 1;
	}
}
@media screen and ( 750px < width < 1140px ){
	#solve::after{
		width : calc( 45.89 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	#solve::after{
		width : 45.89px;
	}
}

/* --------------------------------------------
CTA02
--------------------------------------------- */
#cta02{
	background-color : var( --blue );
}
@media screen and ( width <= 750px ){
	#cta02{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#cta02{
		padding-top : calc( 56 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
	}
}

/* --------------------------------------------
STEP
--------------------------------------------- */
#step{
	position : relative;
	overflow-x : clip;
	overflow-y : hidden;
	background-color : var( --blue02 );
}
#step::after{
	display : block;
	width : auto;
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-image : image-set( url( "../images/home/step/duck.avif" ) type( "image/avif" ) , url( "../images/home/step/duck.webp" ) type( "image/webp" ) );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#step ol{
	position : relative;
	z-index : 0;
}
#step ol::before{
	position : absolute;
	top : 50%;
	z-index : -1;
	display : block;
	width : 1px;
	height : calc( 100% - 2px );
	content : "";
	background-color : var( --yellow );
	translate : 0 -50%;
}
#step li{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 700;
}
#step li + li{
	margin-top : calc( 62 var( --remBase ) );
}
#step li::before{
	display : block;
	width : auto;
	height : calc( 62 var( --remBase ) );
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#step li:nth-child( 1 )::before{
	background-image : url( "../images/home/step/icon01.svg" );
}
#step li:nth-child( 2 )::before{
	background-image : url( "../images/home/step/icon02.svg" );
}
@media screen and ( width <= 750px ){
	#step{
		padding-block : calc( 40 var( --remBase ) );
	}
	#step ol{
		padding-left : calc( 24.38 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#step ol::before{
		left : calc( 55.38 var( --percentBase ) );
	}
	#step li{
		column-gap : calc( 24.25 * 100% / ( 327 - 24.38 ) );
		font-size : 2.4rem;
		line-height : calc( 29 / 24 );
	}
	#step li::before{
		height : calc( 62 var( --remBase ) );
	}
	#step::after{
		height : calc( 206 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#step{
		padding-block : calc( 64 var( --remBase ) );
	}
	#step::after{
		position : absolute;
		bottom : calc( -100 var( --remBase ) );
		height : calc( 294 var( --remBase ) );
	}
	#step ol{
		padding-left : calc( 338.88 var( --percentBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#step ol::before{
		left : calc( 369.88 var( --percentBase ) );
	}
	#step li{
		column-gap : calc( 24.25 * 100% / ( 1100 - 338.88 ) );
		font-size : 2.4rem;
	}
}
@media screen and ( 750px < width < 1140px ){
	#step::after{
		left : calc( 40 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	#step::after{
		left : calc( 50% - 530px );
	}
}

/* --------------------------------------------
STRENGTH
--------------------------------------------- */
#strength{
	background-color : var( --blue );
}
#strength ul{
	margin-top : calc( 40 var( --remBase ) );
}
#strength li:not( :last-child ){
	background-color : var( --blue03 );
	background-repeat : no-repeat;
	border-radius : calc( 16 var( --remBase ) );
	box-shadow : 0 calc( 4 var( --remBase ) ) 0 var( --blue02 );
}
#strength li:not( :last-child )::before{
	display : block;
	content : "";
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}
#strength li:not( :last-child ) h3{
	display : grid;
	grid-auto-flow : row;
	row-gap : calc( ( 8 - 5 ) var( --remBase ) );
	align-items : start;
	font-size : 2rem;
	font-weight : 700;
	line-height : 1.5;
}
#strength li:not( :last-child ) h3 span{
	display : grid;
	place-items : center;
	width : fit-content;
	height : calc( 39 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 3.2rem;
	line-height : 1;
	color : var( --blue );
	background-color : var( --base );
}
#strength li:not( :last-child ) p{
	font-size : 1.6rem;
	line-height : 1.5;
}
#strength li:nth-child( 1 )::before{
	background-image : url( "../images/home/strength/char01.svg" );
}
#strength li:nth-child( 2 )::before{
	background-image : url( "../images/home/strength/char02.svg" );
}
#strength li:nth-child( 3 )::before{
	background-image : url( "../images/home/strength/char03.svg" );
}
#strength li:last-child{
	position : relative;
	margin-top : calc( 72 var( --remBase ) );
	background-color : var( --base );
	border-radius : calc( 16 var( --remBase ) );
}
#strength li:last-child h3{
	display : grid;
	place-items : center;
}
#strength li:last-child h3 span:nth-of-type( 1 ){
	position : absolute;
	display : grid;
	place-items : center;
	height : calc( 99.58 var( --remBase ) );
	aspect-ratio : 95/99.58;
	font-size : 2rem;
	font-weight : 900;
	color : var( --blue );
	background : url( "../images/home/strength/bg_comment.svg" ) 0 0 / contain no-repeat;
}
#strength li:last-child h3 span:nth-of-type( 2 ){
	font-size : 2.8rem;
	font-weight : 700;
	color : var( --blue );
}
@media screen and ( width <= 750px ){
	#strength{
		padding-top : calc( 40 var( --remBase ) );
	}
	#strength li:not( :last-child ){
		padding-inline : calc( 24 var( --percentBase ) );
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#strength li:not( :last-child )::before{
		width : 100%;
		background-size : auto 100%;
	}
	#strength li:not( :last-child ) + li:not( :last-child ){
		margin-top : calc( 16 var( --remBase ) );
	}
	#strength li:not( :last-child ) h3{
		justify-content : center;
		margin-top : calc( ( 40 - 5 ) var( --remBase ) );
		text-align : center;
	}
	#strength li:not( :last-child ) h3 span{
		margin-inline : auto;
	}
	#strength li:nth-child( 1 )::before{
		height : calc( 152.92 var( --remBase ) );
	}
	#strength li:nth-child( 2 )::before{
		height : calc( 143.96 var( --remBase ) );
	}
	#strength li:nth-child( 3 )::before{
		height : calc( 180.78 var( --remBase ) );
	}
	#strength p{
		margin-top : calc( 16 var( --remBase ) );
	}
	#strength li:last-child h3{
		height : calc( 110 var( --remBase ) );
	}
	#strength li:last-child h3 span:nth-of-type( 1 ){
		top : calc( -55.66 var( --remBase ) );
		left : calc( 28 var( --percentBase ) );
	}
	#strength li:last-child h3 span:nth-of-type( 2 ){
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	#strength{
		padding-top : calc( 64 var( --remBase ) );
	}
	#strength ul{
		width : calc( 620 var( --percentBase ) );
		margin-inline : auto;
	}
	#strength li:not( :last-child ){
		display : grid;
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 300 * 100% / 620 ) calc( 24 * 100% / 620 ) 1fr calc( 56 * 100% / 620 );
	}
	#strength li:not( :last-child ) + li:not( :last-child ){
		margin-top : calc( 24 var( --remBase ) );
	}
	#strength li:not( :last-child )::before{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 300 var( --remBase ) );
	}
	#strength li:not( :last-child ) h3{
		grid-row : 2;
		grid-column : 3;
		justify-content : start;
	}
	#strength li:not( :last-child ) p{
		grid-row : 4;
		grid-column : 3;
	}
	#strength li:nth-child( 1 )::before{
		background-size : auto calc( 152.92 var( --remBase ) );
	}
	#strength li:nth-child( 2 )::before{
		background-size : auto calc( 143.96 var( --remBase ) );
	}
	#strength li:nth-child( 3 )::before{
		background-size : auto calc( 180.78 var( --remBase ) );
	}
	#strength li:last-child{
		width : calc( 460 * 100% / 620 );
		margin-inline : auto;
	}
	#strength li:last-child h3{
		height : calc( 102 var( --remBase ) );
	}
	#strength li:last-child h3 span:nth-of-type( 1 ){
		top : calc( -32 var( --remBase ) );
		left : calc( -60 * 100% / 620 );
	}
}

/* --------------------------------------------
CTA03
--------------------------------------------- */
#cta03{
	background-color : var( --blue );
}
@media screen and ( width <= 750px ){
	#cta03{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#cta03{
		padding-block : calc( 64 var( --remBase ) );
	}
}

/* --------------------------------------------
RESULTS
--------------------------------------------- */
#results{
	background-color : var( --blue02 );
}
#results li{
	position : relative;
}
#results li::before{
	position : absolute;
	left : 0;
	display : block;
	width : 100%;
	height : calc( 100 var( --remBase ) );
	content : "";
	background-repeat : no-repeat;
	background-position : center top;
	background-size : auto 100%;
}
#results h3 span:nth-of-type( 1 ){
	display : grid;
	place-items : center;
	height : calc( 43 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	background-color : var( --blue03 );
	border-radius : calc( 8 var( --remBase ) ) calc( 8 var( --remBase ) ) 0 0;
}
#results h3 span:nth-of-type( 2 ){
	display : grid;
	place-items : center;
	padding-top : calc( 26 var( --remBase ) );
	padding-bottom : calc( 20 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	background-color : var( --blue );
}
#results p{
	padding-bottom : calc( 24 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.6;
	background-color : var( --blue );
	border-radius : 0 0 calc( 8 var( --remBase ) ) calc( 8 var( --remBase ) );
}
#results li:nth-child( 1 )::before{
	background-image : url( "../images/home/results/icon01.svg" );
}
#results li:nth-child( 2 )::before{
	background-image : url( "../images/home/results/icon02.svg" );
}
@media screen and ( width <= 750px ){
	#results{
		padding-block : calc( 40 var( --remBase ) );
	}
	#results ul{
		margin-top : calc( 156 var( --remBase ) );
	}
	#results li::before{
		top : calc( -116 var( --remBase ) );
	}
	#results li + li{
		margin-top : calc( 140 var( --remBase ) );
	}
	#results p{
		padding-inline : calc( 16 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#results{
		padding-block : calc( 64 var( --remBase ) );
	}
	#results ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 300 var( --percentBase ) ) );
		column-gap : calc( 20 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 164 var( --remBase ) );
	}
	#results li{
		padding-bottom : calc( 24 var( --remBase ) );
	}
	#results li::before{
		top : calc( -124 var( --remBase ) );
	}
	#results p{
		padding-inline : calc( 16 * 100% / 300 );
	}
	#results li:nth-child( 1 ) p{
		letter-spacing : -.02em;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	background-color : var( --blue );
}
#faq dl{
	margin-top : calc( 40 var( --remBase ) );
}
#faq dt{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 700;
}
#faq dt::before{
	display : block;
	height : calc( 48 var( --remBase ) );
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../images/home/faq/q.svg" ) center / auto calc( 20.34 var( --remBase ) ) no-repeat;
	background-color : var( --base );
	border-radius : 50%;
}
#faq dd{
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	#faq{
		padding-block : calc( 40 var( --remBase ) );
	}
	#faq dt{
		column-gap : calc( 16 var( --percentBase ) );
		font-size : 2rem;
		line-height : 1.2;
	}
	#faq dd{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#faq dd + dt{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		padding-block : calc( 64 var( --remBase ) );
	}
	#faq dl{
		width : calc( 780 var( --percentBase ) );
		margin-inline : auto;
	}
	#faq dt{
		column-gap : calc( 30 * 100% / 780 );
		font-size : 2.4rem;
		line-height : calc( 29 / 24 );
	}
	#faq dd{
		padding-left : calc( 78 * 100% / 780 );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 19 / 16 );
	}
	#faq dd + dt{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
SUPPORT
--------------------------------------------- */
#support{
	background-color : var( --blue02 );
}
#support h2 span{
	font-weight : 700;
}
#support h2 span:nth-of-type( 1 ){
	display : block;
	line-height : 1.6;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#support h2 span:nth-of-type( 2 ){
	display : grid;
	place-items : center;
	margin-inline : auto;
	line-height : 1.6;
	color : var( --blue );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --yellow );
	border-radius : calc( 3.6 var( --remBase ) );
}
#support h2 span:nth-of-type( 3 ){
	display : block;
	line-height : 1.6;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#support p{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.6;
	color : var( --blue );
	text-align : center;
	text-indent : .16em;
	letter-spacing : .16em;
	background-color : var( --base );
	border-radius : 100vmax;
}
@media screen and ( width <= 750px ){
	#support{
		padding-top : calc( ( 40 - 4.8 ) var( --remBase ) );
		padding-bottom : calc( 40 var( --remBase ) );
	}
	#support h2 span:nth-of-type( 1 ){
		font-size : 1.6rem;
	}
	#support h2 span:nth-of-type( 2 ){
		width : 100%;
		margin-top : calc( ( 16 - 4.8 ) var( --remBase ) );
		margin-bottom : calc( ( 16 - 7.2 ) var( --remBase ) );
		font-size : 3.6rem;
	}
	#support h2 span:nth-of-type( 1 ){
		font-size : 2.8rem;
	}
	#support p{
		width : 100%;
		height : calc( 70 var( --remBase ) );
		margin-top : calc( ( 32 - 7.2 ) var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#support{
		position : relative;
		padding-block : calc( ( 64 - 7.2 ) var( --remBase ) );
		overflow-y : hidden;
	}
	#support::after{
		position : absolute;
		bottom : calc( -88.2 var( --remBase ) );
		display : block;
		width : auto;
		height : calc( 260 var( --remBase ) );
		aspect-ratio : 251/260;
		font-size : 0;
		content : "";
		background-image : image-set( url( "../images/home/support/duck.avif" ) type( "image/avif" ) , url( "../images/home/support/duck.webp" ) type( "image/webp" ) );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
	#support h2 span:nth-of-type( 1 ){
		font-size : 2.4rem;
	}
	#support h2 span:nth-of-type( 2 ){
		width : calc( 446.8 var( --percentBase ) );
		margin-top : calc( ( 16 - 7.2 ) var( --remBase ) );
		margin-bottom : calc( ( 16 - 9.4 ) var( --remBase ) );
		font-size : 5.04rem;
	}
	#support h2 span:nth-of-type( 3 ){
		font-size : 3.2rem;
	}
	#support p{
		width : calc( 484 var( --percentBase ) );
		height : calc( 44 var( --remBase ) );
		margin-top : calc( ( 32 - 9.4 ) var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1140px ){
	#support::after{
		left : calc( 827 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1140px ){
	#support::after{
		left : calc( 50% + 257px );
	}
}

/* --------------------------------------------
CTA04
--------------------------------------------- */
#cta04{
	background-color : var( --blue );
}
@media screen and ( width <= 750px ){
	#cta04{
		padding-block : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#cta04{
		padding-top : calc( 56 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
	}
}