@charset "UTF-8";

/* --------------------------------------------
STRENGTHS
--------------------------------------------- */
#strengths{
	.title01{
		&::before{
			text-align : center;
			text-indent : .05em;
			letter-spacing : .05em;
			opacity : .65;
		}
	}
	picture{
		overflow : hidden;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	h3{
		span{
			display : block;
			align-content : center;
			width : fit-content;
			font-weight : 900;
			color : white;
			text-align : center;
			background-color : var( --primary );
		}
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		overflow-x : clip;
		background : image-set( url( "../images/top/strengths/bg_pc.avif" ) type( "image/avif" ) , url( "../images/top/strengths/bg_pc.webp" ) type( "image/webp" ) ) center repeat;
		> ul{
			margin-top : calc( 40 * var( --remBase ) );
			> li + li{
				margin-top : calc( 32 * var( --remBase ) );
			}
		}
		li:nth-child( odd ){
			picture{
				margin-left : calc( -1 * var( --gutter ) * var( --percentBase ) );
				border-radius : 0  calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0;
			}
			h3{
				margin-left : calc( -12 * var( --remBase ) );
			}
		}
		li:nth-child( even ){
			picture{
				margin-right : calc( -1 * var( --gutter ) * var( --percentBase ) );
				border-radius : calc( 10 * var( --remBase ) ) 0  0 calc( 10 * var( --remBase ) );
			}
			h3{
				span{
					margin-left : auto;
					margin-right : calc( -12 * var( --remBase ) );
				}
			}
		}
		h3{
			position : relative;
			margin-top : calc( ( -52 - 8 - 26 ) * var( --remBase ) );
			span{
				padding-block : calc( 12 * var( --remBase ) );
				padding-inline : calc( 12 * var( --remBase ) );
				font-size : 2.8rem;
				+ span{
					margin-top : calc( 8 * var( --remBase ) );
				}
			}
		}
		p{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.5;
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 115 * var( --remBase ) );
		padding-bottom : calc( 86 * var( --remBase ) );
		background : image-set( url( "../images/top/strengths/bg_pc.avif" ) type( "image/avif" ) , url( "../images/top/strengths/bg_pc.webp" ) type( "image/webp" ) ) center repeat;
		.title01{
			font-size : 3.9rem;
			line-height : calc( 47 / 39 );
			&::before{
				top : calc( -29 * var( --remBase ) );
			}
			strong{
				font-size : 6rem;
				line-height : 1.2;
				span{
					font-size : 4.5rem;
					line-height : 1.2;
				}
			}
		}
		ul{
			margin-top : calc( 56 * var( --remBase ) );
			li + li{
				margin-top : calc( 60 * var( --remBase ) );
			}
		}
		li{
			display : grid;
			grid-template-rows : calc( 26 * var( --remBase ) ) auto calc( 10 * var( --remBase ) ) 1fr;
			grid-template-columns : repeat( 2 , calc( 270 * var( --percentBase ) ) );
			column-gap : calc( 18 * var( --percentBase ) );
			align-items : start;
			justify-content : center;
			&:nth-child( odd ){
				:where( h3 , p ){
					grid-column : 1;
				}
				picture{
					grid-column : 2;
				}
			}
			&:nth-child( even ){
				picture{
					grid-column : 1;
				}
				:where( h3 , p ){
					grid-column : 2;
				}
			}
		}
		picture{
			grid-row : 1/-1;
			height : calc( 270 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
		}
		h3{
			grid-row : 2;
			span{
				padding-inline : calc( 10 * var( --remBase ) );
				padding-top : calc( 9 * var( --remBase ) );
				padding-bottom : calc( 8 * var( --remBase ) );
				font-size : 3rem;
				line-height : 1.2;
				+ span{
					margin-top : calc( 7 * var( --remBase ) );
				}
			}
		}
		p{
			grid-row : 4;
			font-size : 1.3rem;
			line-height : calc( 22 / 13 );
		}
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
#about{
	h2{
		position : relative;
		z-index : 1;
		font-weight : 900;
		text-align : center;
		strong{
			color : var( --primary );
		}
	}
	ul{
		position : relative;
		&::after{
			position : absolute;
			display : block;
			width : auto;
			aspect-ratio : 69.18/55.42;
			font-size : 0;
			content : "";
			background-image : url( "../images/top/about/parts.svg" );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	li{
		position : relative;
		background-color : white;
		&::before{
			position : absolute;
			aspect-ratio : 1;
			font-size : 0;
			content : "";
			background-color : var( --primaryLight );
			border-radius : 50%;
		}
		p{
			font-weight : 900;
			em{
				color : var( --primary );
			}
		}
	}
	> picture{
		position : relative;
		z-index : 1;
	}
	.link02{
		text-align : center;
		text-indent : .16em;
		letter-spacing : .16em;
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		h2{
			font-size : 2.2rem;
			line-height : 1.2;
			span , strong{
				font-size : 3.6rem;
			}
		}
		ul{
			margin-top : calc( 32 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 40 * var( --remBase ) );
		}
		li{
			&::before{
				top : 0;
				height : calc( 120 * var( --remBase ) );
			}
		}
		li{
			picture{
				position : relative;
				width : calc( 120 * var( --percentBase ) );
				margin-bottom : calc( 4 * var( --remBase ) );
				text-align : center;
				shape-outside : circle( 50% );
			}
		}
		li:nth-child( 1 ){
			&::before{
				left : 0;
			}
			picture{
				float : left;
				margin-top : calc( 12 * var( --remBase ) );
				margin-right : calc( 24 * var( --percentBase ) );
				img{
					height : calc( 120 * var( --remBase ) );
				}
			}
		}
		li:nth-child( 2 ){
			&::before{
				right : 0;
			}
			picture{
				float : right;
				margin-top : calc( 24 * var( --remBase ) );
				margin-left : calc( 24 * var( --percentBase ) );
				img{
					height : calc( 80 * var( --remBase ) );
				}
			}
		}
		p{
			font-size : 2rem;
			line-height : 1.5;
		}
		> picture{
			margin-top : calc( 40 * var( --remBase ) );
			margin-left : calc( -12 * var( --percentBase ) );
			img{
				height : calc( 101 * var( --remBase ) );
			}
		}
		.link02{
			height : calc( 64 * var( --remBase ) );
			padding-right : calc( 40 * var( --percentBase ) );
			margin-top : calc( -64 * var( --remBase ) );
			font-size : 1.8rem;
			text-align : right;
			border-radius : calc( 8 * var( --remBase ) );
			&::after{
				right : calc( 12 * var( --percentBase ) );
				height : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 53 * var( --remBase ) );
		padding-bottom : calc( ( 121 - 53 ) * var( --remBase ) );
		h2{
			font-size : 3rem;
			line-height : 1.2;
			span , strong{
				font-size : 4rem;
				line-height : 1.2;
			}
		}
		ul{
			width : calc( 834 * var( --percentBase ) );
			padding-block : calc( 43 * var( --remBase ) );
			padding-inline : calc( 50 * var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( -18 * var( --remBase ) );
			background-color : var( --primaryLight );
			border-radius : calc( 10 * var( --remBase ) );
			&::after{
				bottom : calc( -44 * var( --remBase ) );
				left : calc( 394 * 100% / 834 );
				height : calc( 55.42 * var( --remBase ) );
			}
		}
		li{
			min-height : calc( 149 * var( --remBase ) );
			padding-block : calc( 34 * var( --remBase ) );
			padding-left : calc( 151 * 100% / 734 );
			border-radius : calc( 10 * var( --remBase ) );
			box-shadow : calc( 3 * var( --remBase ) ) calc( 3 * var( --remBase ) ) 0 color-mix( in sRGB , black 15% , transparent );
			&::before{
				left : calc( 23 * 100% / 734 );
				height : calc( 110 * var( --remBase ) );
			}
			+ li{
				margin-top : calc( 17 * var( --remBase ) );
			}
			picture{
				position : absolute;
			}
			&:nth-child( 1 ){
				padding-right : calc( 19 * 100% / 734 );
				&::before{
					top : calc( 24 * var( --remBase ) );
				}
				picture{
					top : calc( 31 * var( --remBase ) );
					left : calc( 37 * 100% / 734 );
					img{
						height : calc( 111 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 2 ){
				padding-right : calc( 50 * 100% / 734 );
				&::before{
					top : calc( 20 * var( --remBase ) );
				}
				picture{
					top : calc( 42 * var( --remBase ) );
					left : calc( 19 * 100% / 734 );
					img{
						height : calc( 78 * var( --remBase ) );
					}
				}
			}
			p{
				font-size : 1.6rem;
				line-height : calc( 27 / 16 );
			}
		}
		> picture{
			margin-top : calc( -43 * var( --remBase ) );
			margin-left : calc( 475 * var( --percentBase ) );
			img{
				height : calc( 202 * var( --remBase ) );
			}
		}
		.link02{
			width : calc( 686 * var( --percentBase ) );
			height : calc( 87 * var( --remBase ) );
			margin-top : calc( 40 * var( --remBase ) );
			font-size : 3.5rem;
			border-radius : calc( 15 * var( --remBase ) );
			&::after{
				right : calc( 44.17 * 100% / 686 );
				height : calc( 34.83 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
PERFORMANCE
--------------------------------------------- */
#performance{
	position : relative;
	z-index : 1;
	.title01{
		text-align : center;
		text-indent : .03em;
		letter-spacing : .03em;
		&::before{
			text-align : center;
			text-indent : -.02em;
			letter-spacing : -.02em;
			opacity : .4;
		}
	}
	li{
		overflow : hidden;
		background-repeat : no-repeat;
		background-position : 0 0;
		background-size : 100% auto;
		div{
			overflow : hidden;
			background-color : white;
		}
	}
	h3{
		> span{
			display : block;
			color : white;
			text-align : center;
			text-indent : .11em;
			letter-spacing : .11em;
			&:nth-of-type( 1 ){
				font-weight : 700;
			}
			&:nth-of-type( 2 ){
				font-weight : 900;
				text-shadow : 0 0 calc( 5 * var( --remBase ) ) #83dbd4;
			}
		}
	}
	picture{
		width : 100%;
		overflow : hidden;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	p{
		font-weight : 500;
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		ul{
			margin-top : calc( 40 * var( --remBase ) );
		}
		h3{
			> span{
				&:nth-of-type( 1 ){
					width : auto;
					height : calc( 174 * var( --remBase ) );
					aspect-ratio : 1;
					padding-top : calc( 18 * var( --remBase ) );
					margin-inline : auto;
					clip-path : polygon( 0 0 , 100% 0 , 100% 50% , 0 50% );
					font-size : 2rem;
					background-image : linear-gradient( 150deg , #c2eeeb 0% , #87ded2 23% , #80d9d5 56% );
					background-position : center top;
					background-size : calc( 790 * var( --percentBase ) ) calc( 523 * var( --remBase ) );
					border-radius : 50%;
				}
				&:nth-of-type( 2 ){
					position : relative;
					align-content : center;
					padding-block : calc( 16 * var( --remBase ) );
					margin-top : calc( ( -174 + 51 ) * var( --remBase ) );
					font-size : 2.6rem;
					background-image : linear-gradient( 150deg , #c2eeeb 0% , #87ded2 23% , #80d9d5 56% );
					background-position : center calc( -123 * var( --remBase ) );
					background-size : calc( 790 * var( --percentBase ) ) calc( 523 * var( --remBase ) );
					border-radius : calc( 8 * var( --remBase ) ) calc( 8 * var( --remBase ) ) 0 0;
					span{
						font-size : 2rem;
					}
				}
			}
		}
		p{
			margin-top : calc( 12 * var( --remBase ) );
			font-size : 1.6rem;
			line-height : 1.6;
			em{
				text-decoration : underline var( --primaryLight ) solid .5em;
				text-underline-offset : calc( -.5em + .25em );
				text-decoration-skip-ink : none;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 53 * var( --remBase ) );
		.title01{
			padding-bottom : calc( 3.5 * var( --remBase ) );
			font-size : 5.8rem;
			line-height : calc( 70 / 58 );
			&::before{
				top : calc( -37 * var( --remBase ) );
			}
			span{
				font-size : 3.9rem;
				line-height : calc( 47 / 39 );
			}
		}
		ul{
			margin-top : calc( 89.5 * var( --remBase ) );
		}
		li{
			width : calc( 790 * var( --percentBase ) );
			padding-block : calc( 5 * var( --remBase ) );
			padding-inline : calc( 5 * var( --percentBase ) );
			padding-top : calc( 18 * var( --remBase ) );
			margin-inline : auto;
			background-image : url( "../images/top/performance/mask_pc.svg" ) , linear-gradient( 150deg , #c2eeeb 0% , #87ded2 23% , #80d9d5 56% );
			border-radius : 0 0 calc( 15 * var( --remBase ) ) calc( 15 * var( --remBase ) );
			+ li{
				margin-top : calc( 42 * var( --remBase ) );
			}
			> div{
				display : grid;
				align-items : center;
				justify-content : center;
				padding-block : calc( 30 * var( --remBase ) );
				margin-top : calc( 16 * var( --remBase ) );
				border-radius : calc( 15 * var( --remBase ) );
				border-radius : 0 0 calc( ( 15 - 5 ) * var( --remBase ) ) calc( ( 15 - 5 ) * var( --remBase ) );
			}
			&:nth-child( odd ){
				> div{
					grid-template-columns : calc( 334 * 100% / 780 ) calc( 345 * 100% / 780 );
					column-gap : calc( 21 * 100% / 780 );
				}
				p{
					grid-column : 1;
				}
				picture{
					grid-column : 2;
				}
			}
			&:nth-child( even ){
				> div{
					grid-template-columns : calc( 345 * 100% / 780 ) calc( 334 * 100% / 780 );
					column-gap : calc( 31 * 100% / 780 );
				}
				picture{
					grid-column : 1;
				}
				p{
					grid-column : 2;
				}
			}
		}
		h3{
			> span{
				&:nth-of-type( 1 ){
					font-size : 2.7rem;
					line-height : calc( 32 / 27 );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 18 * var( --remBase ) );
					font-size : 4.1rem;
					line-height : calc( 49 / 41 );
					span{
						font-size : 3.2rem;
						line-height : calc( 38 / 32 );
					}
				}
			}
		}
		picture{
			grid-row : 1;
			height : calc( 311 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
		}
		p{
			grid-row : 1;
			font-size : 1.6rem;
			line-height : calc( 25 / 16 );
			em{
				background-image : linear-gradient( to bottom , transparent calc( 100% - 11 * var( --remBase ) ) , var( --primaryLight ) calc( 100% - 11 * var( --remBase ) ) );
			}
		}
	}
}

/* --------------------------------------------
CONSULTING
--------------------------------------------- */
#consulting{
	position : relative;
	overflow-x : clip;
	&::before{
		position : absolute;
		top : 0;
		z-index : -1;
		display : block;
		height : 100%;
		font-size : 0;
		content : "";
		background-image : linear-gradient( to bottom , #beebe9 0% , #fcfefe 100% );
	}
	.title01{
		&::before{
			opacity : .55;
		}
	}
	h3{
		align-content : center;
		font-weight : 900;
		color : white;
		text-align : center;
		text-indent : .05em;
		letter-spacing : .05em;
		background-color : var( --primary );
	}
	li > div{
		position : relative;
		background-color : var( --primaryLight );
	}
	li li , p{
		font-weight : 500;
	}
	li li{
		display : flex;
		align-items : start;
		&::before{
			flex-shrink : 0;
		}
	}
	p{
		text-align : right;
	}
	picture{
		position : absolute;
	}
	@media screen and ( width <= 730px ){
		z-index : 0;
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		&::before{
			left : 0;
			width : 200%;
			height : auto;
			aspect-ratio : 1200/798;
			border-radius : calc( 150 * var( --remBase ) ) 0 0 0;
		}
		> ul{
			margin-top : calc( 64 * var( --remBase ) );
		}
		> ul > li + li{
			margin-top : calc( 32 * var( --remBase ) );
		}
		h3{
			width : calc( 240 * var( --percentBase ) );
			padding-block : calc( 9 * var( --remBase ) );
			font-size : 2.5rem;
			line-height : 1.2;
			border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 0;
		}
		li > div{
			padding-inline : calc( 20 * var( --percentBase ) );
			padding-top : calc( 28 * var( --remBase ) );
			padding-bottom : calc( 100 * var( --remBase ) );
			border-radius : 0 calc( 10 * var( --remBase ) ) 0 calc( 10 * var( --remBase ) );
		}
		li li , p{
			font-size : 2rem;
			line-height : 1.6;
		}
		picture{
			bottom : calc( -2 * var( --remBase ) );
			left : 50%;
			translate : -50% 0;
		}
		> ul{
			> li{
				&:nth-child( 1 ){
					picture{
						img{
							height : calc( 171 * .75 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 2 ){
					picture{
						img{
							height : calc( 169 * .75 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 3 ){
					picture{
						img{
							height : calc( 201 * .6 * var( --remBase ) );
						}
					}
				}
			}
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 286 * var( --remBase ) );
		padding-bottom : calc( 85 * var( --remBase ) );
		margin-top : calc( -150 * var( --remBase ) );
		&::before{
			left : calc( 50% - min( 600px , 600 * var( --viewportBase ) ) );
			width : calc( 50% + min( 600px , 600 * var( --viewportBase ) ) );
			height : calc( 798 * var( --remBase ) );
			border-radius : calc( 300 * var( --remBase ) ) 0 0 0;
		}
		.title01{
			padding-bottom : calc( 5.5 * var( --remBase ) );
			&::before{
				top : calc( -41 * var( --remBase ) );
			}
		}
		> ul{
			display : flex;
			column-gap : calc( 28 * var( --percentBase ) );
			justify-content : center;
			margin-top : calc( 120 * var( --remBase ) );
			> li{
				width : calc( 280 * var( --percentBase ) );
			}
		}
		h3{
			width : calc( 195 * 100% / 280 );
			padding-block : calc( 9 * var( --remBase ) );
			font-size : 2.5rem;
			line-height : 1.2;
			border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0 0;
		}
		li > div{
			height : calc( 416 * var( --remBase ) );
			padding-top : calc( 31 * var( --remBase ) );
			border-radius : 0 calc( 10 * var( --remBase ) )  0 calc( 10 * var( --remBase ) ) ;
			> div{
				display : block;
				width : fit-content;
				margin-inline : auto;
			}
		}
		> ul{
			> li{
				&:not( :nth-child( 2 ) ){
					li{
						font-size : 1.8rem;
						line-height : 2;
					}
				}
				&:nth-child( 2 ){
					li{
						font-size : 1.8rem;
						line-height : calc( 28 / 18 );
					}
				}
				&:nth-child( 1 ){
					picture{
						bottom : calc( -13 * var( --remBase ) );
						left : calc( 9 * 100% / 280 );
						img{
							height : calc( 171 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 2 ){
					picture{
						bottom : calc( -1 * var( --remBase ) );
						left : calc( 21 * 100% / 280 );
						img{
							height : calc( 169 * var( --remBase ) );
						}
					}
				}
				&:nth-child( 3 ){
					picture{
						bottom : 0;
						left : calc( 14 * 100% / 280 );
						img{
							height : calc( 201 * var( --remBase ) );
						}
					}
				}
			}
		}
		p{
			font-size : 1.8rem;
			line-height : calc( 33 / 18 );
		}
	}
}

/* --------------------------------------------
COUNSELOR
--------------------------------------------- */
#counselor{
	.title01{
		position : relative;
		&::before{
			text-align : center;
			text-indent : .06em;
			letter-spacing : .06em;
		}
		&::after{
			position : absolute;
			top : 100%;
			left : 50%;
			width : auto;
			aspect-ratio : 38 / 5;
			font-size : 0;
			content : "";
			background-color : black;
			transform-origin : 0 center;
			rotate : 45deg;
			translate : -50% 0;
		}
	}
	h3{
		font-weight : 900;
		color : white;
		text-align : center;
		text-indent : .07em;
		letter-spacing : .07em;
		background-color : var( --primary );
	}
	p{
		font-weight : 500;
		color : #070707;
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		overflow-x : clip;
		.box{
			position : relative;
			margin-top : calc( 28 * var( --remBase ) );
		}
		picture{
			position : absolute;
			bottom : 0;
			right : calc( -80 * var( --percentBase ) );
			opacity : .175;
			img{
				height : calc( 200 * var( --remBase ) );
			}
		}
		h3{
			width : fit-content;
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 12 * var( --remBase ) );
			margin-inline : auto;
			font-size : 2.4rem;
			line-height : 1.2;
			border-radius : calc( 4 * var( --remBase ) );
			span{
				font-size : 1.6rem;
				line-height : 1.2;
			}
		}
		p{
			padding-right : calc( 8 * var( --percentBase ) );
			margin-top : calc( 24 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.5;
			text-shadow : calc( 2 * var( --remBase ) ) 0 0 white , calc( -1 * 2 * var( --remBase ) ) 0 0 white , 0 calc( 2 * var( --remBase ) ) 0 white , 0 calc( -1 * 2 * var( --remBase ) ) 0 white , calc( sqrt( 2 ) * var( --remBase ) ) calc( sqrt( 2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 2 ) * var( --remBase ) ) calc( sqrt( 2 ) * var( --remBase ) ) 0 white , calc( sqrt( 2 ) * var( --remBase ) ) calc( -1 * sqrt( 2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 2 ) * var( --remBase ) ) calc( -1 * sqrt( 2 ) * var( --remBase ) ) 0 white;
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 119 * var( --remBase ) );
		padding-bottom : calc( 132 * var( --remBase ) );
		.title01{
			font-size : 4rem;
			line-height : 1.2;
			&::before{
				top : calc( -46 * var( --remBase ) );
			}
			&::after{
				height : calc( 5 * var( --remBase ) );
			}
		}
		.box{
			display : grid;
			grid-template-rows : calc( 10 * var( --remBase ) ) auto calc( 15 * var( --remBase ) ) 1fr;
			grid-template-columns : calc( 323 * var( --percentBase ) ) calc( 281 * var( --percentBase ) );
			column-gap : calc( 30 * var( --percentBase ) );
			align-items : start;
			justify-content : center;
			margin-top : calc( 34 * var( --remBase ) );
		}
		h3{
			grid-row : 2;
			grid-column : 1;
			padding-block : calc( 8 * var( --remBase ) );
			font-size : 2.6rem;
			line-height : calc( 31 / 26 );
			border-radius : calc( 5 * var( --remBase ) );
			span{
				font-size : 2rem;
				line-height : 1.55;
			}
		}
		p{
			grid-row : 4;
			grid-column : 1;
			font-size : 2.1rem;
			line-height : calc( 33 / 21 );
			em{
				background-image : linear-gradient( to bottom , transparent calc( 100% - 11 * var( --remBase ) ) , var( --primaryLight ) calc( 100% - 11 * var( --remBase ) ) );
			}
		}
		picture{
			grid-row : 1/-1;
			grid-column : 2;
			img{
				width : 100%;
				height : auto;
			}
		}
	}
}

/* --------------------------------------------
PLAN
--------------------------------------------- */
#plan{
	position : relative;
	overflow : clip;
	&::before{
		position : absolute;
		top : 0;
		left : 50%;
		z-index : -1;
		display : block;
		aspect-ratio : 1;
		font-size : 0;
		content : "";
		background-color : color-mix( in sRGB , var( --primaryLight ) 25% , transparent );
		border-radius : 50%;
		translate : -50% 0;
	}
	.title01{
		&::before{
			text-align : center;
			text-indent : .03em;
			letter-spacing : .03em;
		}
	}
	> ul{
		> li{
			display : flex;
			flex-direction : column;
			overflow : hidden;
			h3{
				flex-shrink : 0;
			}
			ul{
				flex-grow : 1;
			}
		}
	}
	hgroup{
		color : white;
		text-align : center;
		h3{
			font-weight : 900;
		}
		p{
			font-weight : 700;
			text-align : center;
			text-indent : .1em;
			letter-spacing : .1em;
		}
	}
	ul ul{
		background-color : white;
	}
	li li{
		font-weight : 700;
		color : #292929;
		text-align : center;
		+ li{
			border-top-color : black;
			border-top-style : dashed;
		}
	}
	.simple{
		background-color : #48e7b2;
		hgroup{
			h3{
				text-shadow : 0 0 calc( 4 * var( --remBase ) ) #82e1c1;
			}
			p{
				text-shadow : 0 0 calc( 4 * var( --remBase ) ) #82e1c1;
			}
		}
	}
	.basic{
		background-color : #01d5c0;
		hgroup{
			h3{
				text-shadow : 0 0 calc( 5 * var( --remBase ) ) #01d5c0;
			}
			p{
				text-shadow : 0 0 calc( 5 * var( --remBase ) ) #01d5c0;
			}
		}
		ul{
			margin-inline : auto;
		}
	}
	.advance{
		background-color : #00b2aa;
	}
	> p{
		font-family : Roboto;
		font-weight : 300;
		color : black;
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 64 * var( --remBase ) );
		&::before{
			height : 200%;
		}
		> ul{
			margin-top : calc( 40 * var( --remBase ) );
			> li{
				border-radius : calc( 16 * var( --remBase ) );
				+ li{
					margin-top : calc( 48 * var( --remBase ) );
				}
			}
		}
		ul ul{
			padding-top : calc( 8 * var( --remBase ) );
			padding-bottom : calc( 20 * var( --remBase ) );
		}
		hgroup{
			padding-top : calc( 12 * var( --remBase ) );
			padding-bottom : calc( 16 * var( --remBase ) );
			h3{
				font-size : 3rem;
			}
			p{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : 1.6rem;
			}
		}
		li li{
			padding-block : calc( 12 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.4;
			+ li{
				border-top-width : calc( 2 * var( --remBase ) );
			}
		}
		:where( .simple , .advance ){
			ul{
				padding-inline : calc( 20 * var( --percentBase ) );
			}
		}
		.basic{
			ul{
				width : calc( 290 * var( --percentBase ) );
				padding-inline : calc( 12 * var( --percentBase ) );
				margin-bottom : calc( 8 * var( --remBase ) );
				border-radius : 0 0 calc( 8 * var( --remBase ) ) calc( 8 * var( --remBase ) );
			}
		}
		> p{
			display : flex;
			align-items : start;
			margin-top : calc( 16 * var( --remBase ) );
			font-size : 1.6rem;
			line-height : 1.5;
			&::before{
				flex-shrink : 0;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 91 * var( --remBase ) );
		padding-bottom : calc( 73 * var( --remBase ) );
		&::before{
			height : calc( 3652 * var( --remBase ) );
		}
		.title01{
			padding-bottom : calc( 6.5 * var( --remBase ) );
			font-size : 4rem;
			line-height : 1.2;
			&::before{
				top : calc( -49 * var( --remBase ) );
			}
		}
		> ul{
			display : flex;
			column-gap : calc( 23 * var( --percentBase ) );
			justify-content : center;
			margin-top : calc( 36.5 * var( --remBase ) );
			> li{
				width : calc( 252 * var( --percentBase ) );
				height : calc( 551 * var( --remBase ) );
				padding-top : calc( 10 * var( --remBase ) );
				border-radius : calc( 18 * var( --remBase ) );
				&:not( :nth-child( 2 ) ){
					box-shadow : 0 0 calc( 15 * var( --remBase ) ) var( --primaryLight );
				}
			}
		}
		hgroup{
			h3{
				font-size : 2.8rem;
				line-height : calc( 34 / 28 );
			}
			p{
				margin-top : calc( 1 * var( --remBase ) );
				font-size : 1.8rem;
				line-height : calc( 24 / 18 );
			}
		}
		ul ul{
			margin-top : calc( 11 * var( --remBase ) );
		}
		li li{
			font-size : 2.6rem;
			line-height : calc( 31 / 26 );
			&:first-child{
				padding-top : calc( 25 * var( --remBase ) );
				padding-bottom : calc( 31 * var( --remBase ) );
			}
			+ li{
				border-top-width : calc( 2 * var( --remBase ) );
			}
		}
		:where( .simple , .advance ){
			ul{
				padding-inline : calc( 17 * 100% / 252 );
			}
		}
		.simple{
			li:nth-child( 2 ){
				padding-top : calc( 28 * var( --remBase ) );
				padding-bottom : calc( 36 * var( --remBase ) );
			}
			li:nth-child( 3 ){
				padding-top : calc( 34 * var( --remBase ) );
				padding-bottom : calc( 37 * var( --remBase ) );
			}
			li:nth-child( 4 ){
				padding-top : calc( 33 * var( --remBase ) );
			}
		}
		.basic{
			ul{
				width : calc( 238 * 100% / 252 );
				padding-inline : calc( 10 * 100% / 252 );
				margin-bottom : calc( 7 * var( --remBase ) );
				border-radius : 0  0 calc( 11 * var( --remBase ) ) calc( 11 * var( --remBase ) );
			}
			li + li{
				padding-block : calc( 24 * var( --remBase ) );
			}
		}
		.advance{
			li + li{
				padding-block : calc( 11 * var( --remBase ) );
			}
		}
		> p{
			margin-top : calc( 9 * var( --remBase ) );
			margin-left : calc( 69 * var( --percentBase ) );
			font-size : 1.3rem;
			line-height : calc( 25 / 13 );
		}
	}
}

/* --------------------------------------------
#FLOW
--------------------------------------------- */
#flow{
	.title01{
		&::before{
			text-align : center;
			text-indent : -.02em;
			letter-spacing : -.02em;
			opacity : .4;
		}
	}
	li{
		position : relative;
		display : block;
		color : white;
		text-align : center;
		counter-increment : no;
		border-radius : 100vmax;
		&::before{
			position : absolute;
			top : 50%;
			left : 0;
			display : block;
			align-content : center;
			font-family : Roboto;
			font-weight : 900;
			line-height : 1;
			color : white;
			text-align : left;
			content : counter( no , decimal-leading-zero );
			border-right-color : currentColor;
			border-right-style : solid;
			translate : 0 -50%;
		}
		&:not( :last-child )::after{
			position : absolute;
			left : 50%;
			z-index : -1;
			display : block;
			width : auto;
			clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
			translate : -50% 0;
		}
		p{
			align-content : center;
			height : 100%;
			font-weight : 700;
		}
	}
	picture{
		position : absolute;
		z-index : 1;
	}
	li:nth-child( 2 ) , li:nth-child( 4 ){
		picture{
			top : 50%;
			translate : 0 -50%;
		}
	}
	li{
		background : linear-gradient( to bottom , #88dfd2 0% , #00b2aa 100% );
		&::after{
			background : linear-gradient( to bottom , #88dfd2 0% , #00b2aa 100% );
		}
	}
	> p{
		letter-spacing : .04em;
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 64 * var( --remBase ) );
		padding-bottom : calc( 80 * var( --remBase ) );
		ol{
			margin-top : calc( 36 * var( --remBase ) );
		}
		li{
			height : calc( 48 * var( --remBase ) );
			font-size : 2.2rem;
			background-size : auto calc( 480 * var( --remBase ) );
			&::before{
				width : calc( 64 * var( --percentBase ) );
				height : calc( 32 * var( --remBase ) );
				padding-left : calc( 16 * var( --percentBase ) );
				font-size : 2.8rem;
				border-right-width : calc( 3 * var( --remBase ) );
			}
			&:not( :last-child )::after{
				bottom : calc( -13 * var( --remBase ) );
				width : auto;
				height : calc( 27 * var( --remBase ) );
				aspect-ratio : 42/27;
				background-size : auto calc( 480 * var( --remBase ) );
			}
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li{
			picture{
				top : 50%;
				translate : 0 -50%;
			}
			&:nth-child( 1 ){
				picture{
					right : 0;
					img{
						height : calc( 104 * .75 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 2 ){
				picture{
					right : calc( 8 * var( --percentBase ) );
					img{
						height : calc( 59 * .5 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 3 ) , &:nth-child( 5 ){
				picture{
					right : calc( -24 * var( --percentBase ) );
					img{
						height : calc( 104 * .65 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 4 ){
				picture{
					right : calc( 8 * var( --percentBase ) );
					img{
						height : calc( 70 * .5 * var( --remBase ) );
					}
				}
			}
		}
		li:nth-child( 1 ){
			&::after{
				background-position : 0 calc( -21 * var( --remBase ) );
			}
		}
		li:nth-child( 2 ){
			background-position : 0 calc( -68 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -89 * var( --remBase ) );
			}
		}
		li:nth-child( 3 ){
			background-position : 0 calc( -136 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -157 * var( --remBase ) );
			}
		}
		li:nth-child( 4 ){
			background-position : 0 calc( -204 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -225 * var( --remBase ) );
			}
		}
		li:nth-child( 5 ){
			background-position : 0 calc( -272 * var( --remBase ) );
		}
		> p{
			display : flex;
			align-items : start;
			margin-top : calc( 16 * var( --remBase ) );
			font-size : 1.6rem;
			line-height : 1.5;
			&::before{
				flex-shrink : 0;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		padding-top : calc( 115 * var( --remBase ) );
		padding-bottom : calc( 72 * var( --remBase ) );
		.title01{
			padding-bottom : calc( 7.5 * var( --remBase ) );
			font-size : 4rem;
			line-height : 1.2;
			&::before{
				top : calc( -48 * var( --remBase ) );
			}
		}
		ol{
			width : calc( 800 * var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( 49.5 * var( --remBase ) );
		}
		li{
			height : calc( 80 * var( --remBase ) );
			font-size : 3.8rem;
			line-height : calc( 46 / 38 );
			background-size : auto calc( 480 * var( --remBase ) );
			&::before{
				width : calc( 93.5 * 100% / 800 );
				height : calc( 50 * var( --remBase ) );
				padding-left : calc( 30 * 100% / 800 );
				font-size : 4rem;
				border-right-width : calc( 3 * var( --remBase ) );
			}
			&:not( :last-child )::after{
				bottom : calc( -13 * var( --remBase ) );
				width : auto;
				height : calc( 27 * var( --remBase ) );
				aspect-ratio : 42/27;
				background-size : auto calc( 480 * var( --remBase ) );
			}
		}
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		li{
			&:nth-child( 1 ){
				picture{
					bottom : calc( -1 * var( --remBase ) );
					left : calc( 685 * 100% / 800 );
					img{
						height : calc( 104 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 2 ){
				picture{
					left : calc( 709 * 100% / 800 );
					img{
						height : calc( 59 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 3 ) , &:nth-child( 5 ){
				picture{
					bottom : calc( -7 * var( --remBase ) );
					left : calc( 673 * 100% / 800 );
					img{
						height : calc( 104 * var( --remBase ) );
					}
				}
			}
			&:nth-child( 4 ){
				picture{
					left : calc( 721 * 100% / 800 );
					img{
						height : calc( 70 * var( --remBase ) );
					}
				}
			}
		}
		li:nth-child( 1 ){
			&::after{
				background-position : 0 calc( -65 * var( --remBase ) );
			}
		}
		li:nth-child( 2 ){
			background-position : 0 calc( -100 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -165 * var( --remBase ) );
			}
		}
		li:nth-child( 3 ){
			background-position : 0 calc( -200 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -265 * var( --remBase ) );
			}
		}
		li:nth-child( 4 ){
			background-position : 0 calc( -300 * var( --remBase ) );
			&::after{
				background-position : 0 calc( -365 * var( --remBase ) );
			}
		}
		li:nth-child( 5 ){
			background-position : 0 calc( -400 * var( --remBase ) );
		}
		> p{
			margin-top : calc( 7 * var( --remBase ) );
			margin-left : calc( 84 * var( --percentBase ) );
			font-size : 1.4rem;
			line-height : calc( 17 / 14 );
		}
	}
}