@charset "UTF-8";

/* --------------------------------------------
BODY
--------------------------------------------- */
body{
	@media print , screen and ( width > 768px ){
		padding-top : 0;
	}
}
#header{
	@media print , screen and ( width > 768px ){
		#navGlobal{
			display : none;
		}
	}
}
#navGlobal{
	@media print , screen and ( width > 768px ){
		.order01{
			display : none;
		}
		.order02{
			&::before{
				content : none ! important;
			}
		}
	}
}

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	width : 100%;
	height : auto;
	background-repeat : no-repeat;
	background-position : center top;
	background-size : contain;
	hgroup{
		p{
			font-weight : 700;
		}
		h1{
			span{
				display : block;
				align-content : center;
				color : white;
				text-align : center;
				background-color : var( --blue );
				border-radius : 100vmax;
			}
		}
	}
	ul{
		li{
			align-content : center;
			font-weight : 700;
			color : white;
			text-align : center;
			background-color : var( --orange );
			&:nth-child( 3 ){
				> span{
					&:nth-of-type( 1 ){
						display : block;
						align-content : center;
						margin-inline : auto;
						color : var( --orange );
						text-align : center;
						background-color : white;
						border-radius : 100vmax;
					}
				}
			}
		}
	}
	ol{
		position : relative;
		display : grid;
		&::before{
			position : absolute;
			display : block;
			width : auto;
			aspect-ratio : 292/310;
			font-size : 0;
			content : "";
			background : url( "../images/ui/parts/char01.svg" ) left top / contain no-repeat;
		}
		li{
			position : relative;
			&::before{
				position : absolute;
				z-index : 1;
				align-content : center;
				font-family : Roboto , sans-serif;
				font-weight : 500;
				color : white;
				text-align : center;
			}
			&:nth-child( 1 ){
				grid-row : 2/-1;
				grid-column : 1/3;
				&::before{
					content : "Before";
					background-color : #31b193;
					border-radius : 0 100vmax 100vmax 0;
				}
			}
			&:nth-child( 2 ){
				z-index : 1;
				grid-row : 1/3;
				grid-column : 2/-1;
				&::before{
					content : "After";
					background-color : var( --blue );
					border-radius : 100vmax 0 0 100vmax;
				}
			}
		}
		picture{
			overflow : hidden;
			border : solid calc( 5 * var( --remBase ) ) white;
		}
	}
	@media screen and ( width <= 768px ){
		align-content : center;
		aspect-ratio : 960/1430;
		background-image : url( "../images/top/mv/bg_sp.webp" );
		hgroup{
			p{
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
				text-align : center;
			}
			h1{
				display : block;
				width : fit-content;
				margin-inline : auto;
				margin-top : calc( 18 * var( --remBase ) );
				span{
					height : calc( 26 * var( --remBase ) );
					font-size : calc( 14 * var( --remBase ) );
				}
				margin-top : calc( 8 * var( --remBase ) );
				img{
					height : calc( 62 * var( --remBase ) );
				}
			}
		}
		ul{
			padding-inline : calc( 41 * var( --viewportBase ) );
			margin-top : calc( 22 * var( --remBase ) );
			li{
				height : calc( 54 * var( --remBase ) );
				border-radius : calc( 22 * var( --remBase ) );
				+ li{
					margin-top : calc( 10 * var( --remBase ) );
				}
				&:nth-child( 1 ) , &:nth-child( 2 ){
					font-size : calc( 22 * var( --remBase ) );
				}
				&:nth-child( 3 ){
					display : grid;
					grid-auto-flow : column;
					column-gap : calc( 12 * 100% / 398 );
					align-items : center;
					justify-content : center;
					> span{
						&:nth-of-type( 1 ){
							height : calc( 24 * var( --remBase ) );
							padding-inline : calc( 10 * var( --remBase ) );
							font-size : calc( 14 * var( --remBase ) );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 22 * var( --remBase ) );
						}
					}
				}
			}
		}
		ol{
			grid-template-rows : 1fr auto calc( 16 * var( --remBase ) );
			grid-template-columns : auto calc( 16 * 100% / 398 ) auto;
			width : calc( 398 * var( --viewportBase ) );
			padding-bottom : calc( 8 * var( --remBase ) );
			margin-inline : auto;
			margin-top : calc( 18 * var( --remBase ) );
			&::before{
				bottom : 0;
				right : calc( 16 * var( --remBase ) );
				z-index : 2;
				height : calc( 126 * var( --remBase ) );
			}
			li{
				&::before{
					height : calc( 40 * var( --remBase ) );
					font-size : calc( 24 * var( --remBase ) );
				}
				picture{
					border-radius : calc( 32 * var( --remBase ) );
				}
				&:nth-child( 1 ){
					&::before{
						bottom : calc( 24 * var( --remBase ) );
						left : calc( -16 * 100% / 170 );
						width : calc( 100 * 100% / 170 );
					}
					img{
						height : calc( 170 * var( --remBase ) );
					}
				}
				&:nth-child( 2 ){
					&::before{
						top : calc( 24 * var( --remBase ) );
						right : calc( -16 * 100% / 224 );
						width : calc( 100 * 100% / 224 );
					}
					img{
						height : calc( 224 * var( --remBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : auto auto;
		row-gap : calc( 28 * min( 1px , 100vw / 1882 ) );
		column-gap : calc( 40 * var( --viewportBase ) );
		align-content : center;
		justify-content : center;
		aspect-ratio : 3840/1882;
		margin-bottom : calc( 64 * min( 1px , 100vw / 1882 ) );
		background-image : url( "../images/top/mv/bg_pc.webp" );
		hgroup{
			grid-row : 1;
			grid-column : 1;
			p{
				font-size : calc( 38 * min( 1px , 100vw / 1882 ) );
				line-height : calc( 56 / 38 );
			}
			h1{
				margin-top : calc( 48 * min( 1px , 100vw / 1882 ) );
				span{
					height : calc( 50 * min( 1px , 100vw / 1882 ) );
					font-size : calc( 28 * min( 1px , 100vw / 1882 ) );
				}
				img{
					height : calc( 148 * min( 1px , 100vw / 1882 ) );
					margin-top : calc( 8 * min( 1px , 100vw / 1882 ) );
				}
			}
		}
		ul{
			display : grid;
			grid-row : 2;
			grid-column : 1;
			grid-auto-flow : column;
			column-gap : calc( 30 * min( 1px , 100vw / 1882 ) );
			align-items : start;
			justify-content : start;
			li{
				height : calc( 204 * min( 1px , 100vw / 1882 ) );
				aspect-ratio : 1;
				border-radius : 50%;
				&:nth-child( 1 ) , &:nth-child( 2 ){
					font-size : calc( 21 * min( 1px , 100vw / 1882 ) );
					line-height : calc( 27 / 21 );
					em{
						font-size : calc( 28 * min( 1px , 100vw / 1882 ) );
						line-height : calc( 36 / 28 );
					}
				}
				&:nth-child( 3 ){
					> span{
						&:nth-of-type( 1 ){
							width : fit-content;
							height : calc( 32 * min( 1px , 100vw / 1882 ) );
							padding-inline : calc( 12 * min( 1px , 100vw / 1882 ) );
							font-size : calc( 18 * min( 1px , 100vw / 1882 ) );
						}
						&:nth-of-type( 2 ){
							margin-top : calc( 8 * min( 1px , 100vw / 1882 ) );
							font-size : calc( 28 * min( 1px , 100vw / 1882 ) );
							line-height : calc( 36 / 28 );
						}
					}
				}
			}
		}
		ol{
			grid-template-rows : 1fr auto calc( 82 * var( --remBase ) );
			grid-template-columns : auto calc( 82 * var( --remBase ) ) auto;
			grid-row : 1/-1;
			grid-column : 2;
			padding-bottom : calc( 38 * min( 1px , 100vw / 1882 ) );
			&::before{
				bottom : 0;
				right : calc( 60 * min( 1px , 100vw / 1882 ) );
				z-index : 2;
				height : calc( 298 * min( 1px , 100vw / 1882 ) );
			}
			li{
				&::before{
					height : calc( 50 * min( 1px , 100vw / 1882 ) );
					font-size : calc( 32 * min( 1px , 100vw / 1882 ) );
				}
				picture{
					border-radius : calc( 28 * min( 1px , 100vw / 1882 ) );
				}
				&:nth-child( 1 ){
					&::before{
						bottom : calc( 22 * min( 1px , 100vw / 1882 ) );
						left : calc( -14 * 100% / 320 );
						width : calc( 134 * 100% / 320 );
					}
					img{
						height : calc( 320 * min( 1px , 100vw / 1882 ) );
					}
				}
				&:nth-child( 2 ){
					&::before{
						top : calc( 22 * min( 1px , 100vw / 1882 ) );
						right : calc( -14 * 100% / 462 );
						width : calc( 134 * 100% / 462 );
					}
					img{
						height : calc( 462 * min( 1px , 100vw / 1882 ) );
					}
				}
			}
		}
	}
}