@charset "UTF-8";

/* --------------------------------------------
FEATURES
--------------------------------------------- */
#features{
	li{
		position : relative;
		font-weight : 700;
		counter-increment : no;
		background-color : var( --pink02 );
		background-repeat : no-repeat;
		&::before{
			position : absolute;
			top : 0;
			left : 50%;
			font-family : var( --fontFamilyEn );
			font-weight : 400;
			line-height : 1;
			content : counter( no , decimal-leading-zero );
			translate : -50% -50%;
		}
		&:nth-child( 1 ){
			background-image : url( "../images/ui/icon/pc.svg" );
		}
		&:nth-child( 2 ){
			background-image : url( "../images/ui/icon/music.svg" );
		}
		&:nth-child( 3 ){
			background-image : url( "../images/ui/icon/mobile.svg" );
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		ul{
			margin-top : calc( 40 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 30 * var( --remBase ) );
		}
		li{
			align-content : center;
			min-height : calc( 126 * var( --remBase ) );
			padding-left : calc( 25 * var( --contentBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
			letter-spacing : .05em;
			border-radius : calc( 20 * var( --remBase ) );
			&::before{
				font-size : calc( 40 * var( --remBase ) );
			}
			&:nth-child( 1 ){
				background-position : left calc( ( 220 + 45 ) * 100% / 310 ) top 50% ;
				background-size : auto calc( 63.53 * var( --remBase ) );
			}
			&:nth-child( 2 ){
				background-position : left calc( ( 230 + 35 ) * 100% / 310 ) top 50% ;
				background-size : auto calc( 66.6 * var( --remBase ) );
			}
			&:nth-child( 3 ){
				background-position : left calc( ( 239.92 + 28.39 ) * 100% / 310 ) top 50% ;
				background-size : auto calc( 85.71 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		ul{
			display : grid;
			grid-template-rows : calc( 286 * var( --remBase ) );
			grid-template-columns : repeat( 3 , calc( 346 * var( --contentBase ) ) );
			justify-content : space-between;
			margin-top : calc( 60 * var( --remBase ) );
		}
		li{
			padding-top : calc( 50 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.5;
			text-align : center;
			text-indent : .05em;
			letter-spacing : .05em;
			border-radius : calc( 20 * var( --remBase ) );
			&::before{
				font-size : calc( 60 * var( --remBase ) );
			}
			&:nth-child( 1 ){
				background-position : left 50% bottom calc( 50 * var( --remBase ) );
				background-size : auto calc( 105.88 * var( --remBase ) );
			}
			&:nth-child( 2 ){
				background-position : left 50% bottom calc( 48.1 * var( --remBase ) );
				background-size : auto calc( 94.71 * var( --remBase ) );
			}
			&:nth-child( 3 ){
				background-position : left 50% bottom calc( 34.22 * var( --remBase ) );
				background-size : auto calc( 121.71 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
FLOW
--------------------------------------------- */
#flow{
	background-image : linear-gradient( to bottom , #fff5f4 , #ffe5e3 );
	ol{
		position : relative;
		&::before{
			position : absolute;
			top : 0;
			display : block;
			height : 100%;
			font-size : 0;
			content : "";
			background-color : var( --pink03 );
		}
	}
	li{
		position : relative;
		z-index : 1;
		background-color : white;
		background-repeat : no-repeat;
		&:nth-child( 1 ){
			background-image : url( "../images/ui/icon/calendar.svg" );
		}
		&:nth-child( 2 ){
			background-image : url( "../images/ui/icon/consultation.svg" );
		}
		&:nth-child( 3 ){
			background-image : url( "../images/ui/icon/person.svg" );
		}
		&:nth-child( 4 ){
			background-image : url( "../images/ui/icon/notes.svg" );
		}
		&:nth-child( 5 ){
			background-image : url( "../images/ui/icon/people.svg" );
		}
	}
	p{
		font-weight : 700;
		letter-spacing : .05em;
		> span{
			&:first-of-type{
				font-family : var( --fontFamilyEn );
				font-weight : 600;
			}
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		ol{
			margin-top : calc( 20 * var( --remBase ) );
			&::before{
				left : calc( 40 * var( --contentBase ) );
				width : calc( 2 * var( --contentBase ) );
			}
		}
		li + li{
			margin-top : calc( 10 * var( --remBase ) );
		}
		li{
			padding-left : calc( 80 * var( --contentBase ) );
			border-radius : calc( 20 * var( --remBase ) );
			&:nth-child( 1 ){
				background-position : left calc( 20 * var( --contentBase ) ) top 50%;
				background-size : auto calc( 42.96 * var( --remBase ) );
			}
			&:nth-child( 2 ){
				background-position : left calc( 20 * var( --contentBase ) ) top 50%;
				background-size : auto calc( 42.96 * var( --remBase ) );
			}
			&:nth-child( 3 ){
				background-position : left calc( 23.7 * var( --contentBase ) ) top 50%;
				background-size : auto calc( 40 * var( --remBase ) );
			}
			&:nth-child( 4 ){
				background-position : left calc( 22.96 * var( --contentBase ) ) top 50%;
				background-size : auto calc( 40 * var( --remBase ) );
			}
			&:nth-child( 5 ){
				background-position : left calc( 20 * var( --contentBase ) ) top 50%;
				background-size : auto calc( 42.96 * var( --remBase ) );
			}
		}
		p{
			align-content : center;
			height : calc( 90 * var( --remBase ) );
			span{
				display : block;
				&:nth-of-type( 1 ){
					font-size : calc( 14 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 5 * var( --remBase ) );
					font-size : calc( 16 * var( --remBase ) );
					line-height : 1.5;
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-block : calc( 80 * var( --remBase ) );
		ol{
			padding-inline : calc( 150 * var( --contentBase ) );
			margin-top : calc( 40 * var( --remBase ) );
			&::before{
				left : calc( 230 * var( --contentBase ) );
				width : calc( 2 * var( --contentBase ) );
			}
		}
		li + li{
			margin-top : calc( 30 * var( --remBase ) );
		}
		li{
			padding-left : calc( 124 * 100% / 800 );
			border-radius : calc( 20 * var( --remBase ) );
			&:nth-child( 1 ){
				background-position : left calc( 52 * 100% / 800 ) top 50%;
				background-size : auto calc( 54 * var( --remBase ) );
			}
			&:nth-child( 2 ){
				background-position : left calc( 50 * 100% / 800 ) top 50%;
				background-size : auto calc( 58 * var( --remBase ) );
			}
			&:nth-child( 3 ){
				background-position : left calc( 55 * 100% / 800 ) top 50%;
				background-size : auto calc( 54 * var( --remBase ) );
			}
			&:nth-child( 4 ){
				background-position : left calc( 54 * 100% / 800 ) top 50%;
				background-size : auto calc( 54 * var( --remBase ) );
			}
			&:nth-child( 5 ){
				background-position : left calc( 52 * 100% / 800 ) top 50%;
				background-size : auto calc( 58 * var( --remBase ) );
			}
		}
		p{
			display : grid;
			grid-template-columns : calc( 86 * 100% / 676 ) auto;
			align-items : center;
			justify-content : start;
			height : calc( 90 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq{
	dl{
		> div{
			background-color : var( --pink02 );
		}
	}
	dt , dd{
		display : grid;
		grid-template-columns : auto 1fr;
		align-items : center;
		justify-content : start;
		line-height : 1.6;
		&::before{
			font-family : var( --fontFamilyEn );
			font-weight : 700;
		}
	}
	dt{
		font-weight : 700;
		color : var( --pink03 );
		border-bottom : solid 1px currentColor;
		&::before{
			content : "Q.";
		}
	}
	dd{
		font-weight : 500;
		&::before{
			content : "A.";
		}
	}
	@media screen and ( width <= 750px ){
		padding-block : calc( 40 * var( --remBase ) );
		dl{
			margin-top : calc( 40 * var( --remBase ) );
			> div + div{
				margin-top : calc( 30 * var( --remBase ) );
			}
			> div{
				padding-block : calc( 20 * var( --remBase ) );
				padding-inline : calc( 30 * var( --contentBase ) );
				border-radius : calc( 20 * var( --remBase ) );
			}
		}
		dt , dd{
			column-gap : calc( 10 * 100% / 275 );
		}
		dt{
			padding-bottom : calc( 10 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		dd{
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			&::before{
				font-size : calc( 20 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 120 * var( --remBase ) );
		dl{
			padding-inline : calc( 180 * var( --contentBase ) );
			margin-top : calc( 40 * var( --remBase ) );
			> div + div{
				margin-top : calc( 30 * var( --remBase ) );
			}
			> div{
				padding-block : calc( 20 * var( --remBase ) );
				padding-inline : calc( 30 * 100% / 740 );
				border-radius : calc( 20 * var( --remBase ) );
			}
		}
		dt , dd{
			column-gap : calc( 10 * 100% / 680 );
		}
		dt{
			padding-bottom : calc( 10 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		dd{
			margin-top : calc( 20 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
			&::before{
				font-size : calc( 20 * var( --remBase ) );
			}
		}
	}
}