@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	.box{
		position : relative;
		overflow : clip;
	}
	h1{
		position : relative;
		z-index : 2;
		> span{
			&:nth-of-type( 1 ){
				font-weight : 800;
				background-color : #ffe;
				border-radius : calc( 11 * var( --remBase ) );
				outline : solid var( --green ) calc( 2 * var( --remBase ) );
				outline-offset : calc( -2 * var( --green ) ) ;
				> span{
					&:nth-of-type( 1 ){
						display : grid;
						grid-auto-flow : column;
						align-items : baseline;
						justify-content : start;
						span{
							color : var( --green );
						}
					}
				}
			}
			&:nth-of-type( 2 ){
				display : grid;
				grid-auto-flow : column;
				align-items : baseline;
				justify-content : center;
				font-weight : 800;
				> span{
					&:nth-of-type( 1 ){
						color : var( --green );
						letter-spacing : -.12em;
					}
					&:nth-of-type( 2 ){
						display : grid;
						grid-auto-flow : column;
						align-items : baseline;
						justify-content : center;
					}
				}
			}
			&:nth-of-type( 3 ){
				display : block;
				font-weight : 800;
				color : var( --yellow );
				text-align : center;
			}
		}
	}
	.box{
		p{
			position : absolute;
			z-index : 0;
		}
	}
	ol{
		display : grid;
		li{
			position : relative;
			z-index : 0;
			align-content : center;
			overflow : hidden;
			font-weight : 700;
			text-align : center;
			&::before , &::after{
				position : absolute;
				inset : 0;
				display : block;
				margin : auto;
				pointer-events : none;
				content : "";
			}
			&::before{
				z-index : -2;
				background : linear-gradient( 90deg , #bea56c , #c9b475 );
			}
			&::after{
				z-index : -1;
				background-color : white;
			}
		}
	}
	> p{
		background-color : var( --green );
		> span:nth-of-type( -n+2 ){
			font-weight : 800;
			color : var( --yellow );
		}
		> span:nth-of-type( 3 ){
			font-weight : 700;
			color : white;
		}
	}
	.results{
		display : grid;
		background-color : #ffffec;
		li{
			position : relative;
			display : block;
			align-content : center;
			font-weight : 800;
			color : #3e3e3e;
			background-color : white;
			outline : solid calc( 3 * var( --remBase ) ) var( --green );
			outline-offset : calc( -3 * var( --remBase ) );
			&::before{
				position : absolute;
				display : block;
				width : auto;
				aspect-ratio : 48/38;
				font-size : 0;
				content : "";
				background : url( "../images/ihinseiri/prefecture/mv/check.webp" ) left top / contain no-repeat;
			}
			em{
				color : var( --red );
			}
		}
	}
	@media screen and ( width <= 768px ){
		.box{
			height : calc( 401 * var( --remBase ) );
			padding-top : calc( 36 * var( --remBase ) );
			background : url( "../images/ihinseiri/prefecture/mv/bg_sp.webp" ) center top / 100% auto no-repeat;
		}
		h1{
			> span{
				&:nth-of-type( 1 ){
					display : block;
					width : calc( 322 * var( --contentBase ) );
					height : calc( 50 * var( --remBase ) );
					padding-top : calc( 5.5 * var( --remBase ) );
					margin-inline : auto;
					> span{
						&:nth-of-type( 1 ){
							justify-content : center;
							font-size : calc( 16 * var( --remBase ) );
							span{
								font-size : calc( 19 * var( --remBase ) );
							}
						}
						&:nth-of-type( 2 ){
							display : block;
							margin-top : calc( 4 * var( --remBase ) );
							font-size : calc( 16 * var( --remBase ) );
							text-align : center;
						}
					}
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 25.5 * var( --remBase ) );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 27 * var( --remBase ) );
							&::before{
								-webkit-text-stroke : calc( 2 * var( --remBase ) ) white;
							}
						}
						&:nth-of-type( 2 ){
							font-size : calc( 24 * var( --remBase ) );
							span{
								font-size : calc( 20 * var( --remBase ) );
							}
						}
					}
				}
				&:nth-of-type( 3 ){
					margin-top : calc( 13.41 * var( --remBase ) );
					font-size : calc( 83 * var( --remBase ) );
					&::before{
						-webkit-text-stroke : calc( 8 * var( --remBase ) ) var( --green );
					}
				}
			}
		}
		.box{
			> p{
				bottom : 0;
				right : 0;
				img{
					height : calc( 181 * var( --remBase ) );
				}
			}
		}
		ol{
			grid-template-columns : repeat( 2 , calc( 90 * 100% / 185 ) );
			grid-auto-rows : calc( 37 * var( --remBase ) );
			row-gap : calc( 4 * var( --remBase ) );
			justify-content : space-between;
			width : calc( 185 * var( --contentBase ) );
			margin-top : calc( 37 * var( --remBase ) );
			margin-left : calc( 1.5 * var( --contentBase ) );
			li{
				border-radius : calc( 12 * var( --remBase ) );
				&::before , &::after{
					border-radius : calc( 12 * var( --remBase ) );
				}
				&::after{
					width : calc( 100% - 4 * 100% / 188 );
					height : calc( 100% - 4 * var( --remBase ) );
				}
			}
			li:not( :nth-child( 2 ) ){
				font-size : calc( 20 * var( --remBase ) );
			}
			li:nth-child( 2 ){
				grid-row : 2;
				grid-column : 2;
				font-size : calc( 14 * var( --remBase ) );
				text-indent : .05em;
				letter-spacing : -.05em;
			}
			li:nth-child( 3 ){
				grid-row : 2;
				grid-column : 1;
			}
			li:nth-child( 4 ){
				grid-row : 3;
				grid-column : 2;
			}
			li:nth-child( 5 ){
				grid-row : 3;
				grid-column : 1;
			}
		}
		> p{
			align-content : center;
			height : calc( 60 * var( --remBase ) );
			padding-left : calc( 28 * var( --viewportBase ) );
			> span{
				&:nth-of-type( -n+2 ){
					font-size : calc( 19 * var( --remBase ) );
					line-height : calc( 19 / 16 );
				}
				&:nth-of-type( 3 ){
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 24 / 16 );
					span{
						font-size : calc( 14 * var( --remBase ) );
						line-height : calc( 21 / 14 );
					}
				}
			}
		}
		.results{
			grid-template-columns : repeat( 2 , calc( 172 * var( --contentBase ) ) );
			row-gap : calc( 8 * var( --remBase ) );
			column-gap : calc( 10 * var( --contentBase ) );
			padding-top : calc( 8 * var( --remBase ) );
			padding-bottom : calc( 8 * var( --remBase ) );
			ul{
				display : contents;
			}
			p{
				display : grid;
				place-items : center;
				img{
					height : calc( 66 * var( --remBase ) );
				}
			}
			li{
				height : calc( 70 * var( --remBase ) );
				padding-left : calc( 34 * 100% / 172 );
				border-radius : calc( 13 * var( --remBase ) );
				&::before{
					top : calc( 6 * var( --remBase ) );
					left : calc( 2 * 100% / 172 );
					height : calc( 19 * var( --remBase ) );
				}
				&:nth-child( 1 ){
					>em{
						font-size : calc( 24 * var( --remBase ) );
						line-height : calc( 24 / 24 );
					}
					>span{
						&:nth-of-type( 1 ){
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 24 / 18 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 24 / 18 );
						}
					}
				}
				&:nth-child( 2 ){
					grid-row : 2;
					grid-column : 2;
					>em{
						font-size : calc( 24 * var( --remBase ) );
						line-height : calc( 24 / 24 );
						span{
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 24 / 18 );
						}
					}
					> span{
						font-size : calc( 18 * var( --remBase ) );
						line-height : calc( 24 / 18 );
					}
				}
				&:nth-child( 3 ){
					grid-row : 2;
					grid-column : 1;
					em{
						font-size : calc( 24 * var( --remBase ) );
						line-height : calc( 24 / 24 );
					}
					span{
						font-size : calc( 18 * var( --remBase ) );
						line-height : calc( 24 / 18 );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.box{
			height : calc( 555 * var( --remBase ) );
			padding-top : calc( 26 * var( --remBase ) );
			background : url( "../images/ihinseiri/prefecture/mv/bg01_pc.webp" ) center calc( 49 * var( --remBase ) ) / auto calc( 601 * var( --remBase ) ) no-repeat , url( "../images/ihinseiri/prefecture/mv/bg_pc.webp" ) center / 100% 100% no-repeat;
		}
		h1{
			> span{
				&:nth-of-type( 1 ){
					display : grid;
					grid-auto-flow : column;
					column-gap : calc( 20 * var( --remBase ) );
					align-content : center;
					align-items : baseline;
					justify-content : start;
					width : calc( 961 * var( --contentBase ) );
					height : calc( 81 * var( --remBase ) );
					padding-inline : calc( 64 * var( --contentBase ) );
					margin-inline : auto;
					color : #3e3e3e;
					> span{
						&:nth-of-type( 1 ){
							column-gap : calc( 10 * var( --remBase ) );
							font-size : calc( 28 * var( --remBase ) );
							span{
								font-size : calc( 40 * var( --remBase ) );
							}
						}
						&:nth-of-type( 2 ){
							font-size : calc( 30 * var( --remBase ) );
						}
					}
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 40 * var( --remBase ) );
					color : #3e3e3e;
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 70 * var( --remBase ) );
							&::before{
								-webkit-text-stroke : calc( 4 * var( --remBase ) ) white;
							}
						}
						&:nth-of-type( 2 ){
							font-size : calc( 45 * var( --remBase ) );
							span{
								font-size : calc( 35 * var( --remBase ) );
							}
						}
					}
				}
				&:nth-of-type( 3 ){
					margin-top : calc( 13.41 * var( --remBase ) );
					font-size : calc( 178 * var( --remBase ) );
					&::before{
						-webkit-text-stroke : calc( 14 * var( --remBase ) ) var( --green );
					}
				}
			}
		}
		.box{
			> p{
				bottom : calc( -15 * var( --remBase ) );
				left : calc( 50% - 603 * var( --viewportBase ) );
				img{
					height : calc( 388 * var( --remBase ) );
				}
			}
		}
		ol{
			grid-template-rows : calc( 74 * var( --remBase ) );
			grid-template-columns : repeat( 5 , calc( 188 * var( --contentBase ) ) );
			column-gap : calc( 11 * var( --contentBase ) );
			justify-content : center;
			margin-top : calc( 36 * var( --remBase ) );
			li{
				color : #3e3e3e;
				border-radius : 100vmax;
				&::before , &::after{
					border-radius : 100vmax;
				}
				&::after{
					width : calc( 100% - 4 * 100% / 188 );
					height : calc( 100% - 4 * var( --remBase ) );
				}
			}
			li:not( :nth-child( 2 ) ){
				font-size : calc( 44 * var( --remBase ) );
			}
			li:nth-child( 2 ){
				font-size : calc( 28 * var( --remBase ) );
				line-height : calc( 30 / 28 );
			}
		}
		> p{
			display : grid;
			grid-auto-flow : column;
			align-content : center;
			align-items : baseline;
			justify-content : center;
			height : calc( 53 * var( --remBase ) );
			> span{
				&:nth-of-type( -n+2 ){
					font-size : calc( 24 * var( --remBase ) );
				}
				&:nth-of-type( 3 ){
					font-size : calc( 22 * var( --remBase ) );
					span{
						font-size : calc( 18 * var( --remBase ) );
					}
				}
			}
		}
		.results{
			grid-template-columns : calc( 17 * var( --contentBase ) ) auto calc( 26 * var( --contentBase ) ) auto 1fr;
			align-items : center;
			justify-content : start;
			padding-top : calc( 28 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			p{
				grid-row : 1;
				grid-column : 2;
				img{
					height : calc( 119 * var( --remBase ) );
				}
			}
			ul{
				display : grid;
				grid-template-rows : calc( 132 * var( --remBase ) );
				grid-template-columns : repeat( 3 , calc( 228 * var( --remBase ) ) );
				grid-row : 1;
				grid-column : 4;
				column-gap : calc( 12 * var( --remBase ) );
				align-items : center;
				justify-content : start;
			}
			li{
				height : 100%;
				padding-left : calc( 38 * 100% / 228 );
				border-radius : calc( 20 * var( --remBase ) );
				&::before{
					top : calc( 9 * var( --remBase ) );
					left : 0;
					height : calc( 30 * var( --remBase ) );
				}
				&:nth-child( 1 ){
					>em{
						font-size : calc( 30 * var( --remBase ) );
						line-height : calc( 36 / 30 );
					}
					>span{
						&:nth-of-type( 1 ){
							font-size : calc( 22 * var( --remBase ) );
							line-height : calc( 36 / 22 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 26 * var( --remBase ) );
							line-height : calc( 36 / 26 );
						}
					}
				}
				&:nth-child( 2 ){
					>em{
						font-size : calc( 34 * var( --remBase ) );
						line-height : calc( 36 / 34 );
						span{
							font-size : calc( 22 * var( --remBase ) );
							line-height : calc( 36 / 22 );
						}
					}
					> span{
						font-size : calc( 30 * var( --remBase ) );
						line-height : calc( 36 / 30 );
					}
				}
				&:nth-child( 3 ){
					em{
						font-size : calc( 30 * var( --remBase ) );
						line-height : calc( 36 / 30 );
					}
					span{
						font-size : calc( 26 * var( --remBase ) );
						line-height : calc( 36 / 26 );
					}
				}
			}
		}
	}
}

/* --------------------------------------------
LEAVE IT TO ME
--------------------------------------------- */
#leave{
	h2{
		> span{
			&:nth-of-type( 1 ){
				display : block;
				align-content : center;
				font-weight : 700;
				color : white;
				text-align : center;
				background-color : var( --green );
				border-radius : 100vmax;
			}
			&:nth-of-type( 2 ){
				display : block;
				font-weight : 700;
				color : var( --green );
				span:last-of-type{
					text-decoration : underline solid  var( --yellow );
				}
			}
		}
	}
	.lede{
		font-weight : 700;
	}
	h3{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
		font-weight : 700;
		color : var( --green );
		&::before{
			display : block;
			width : auto;
			clip-path : polygon( 0 0 , 100% 50% , 0 100% );
			font-size : 0;
			content : "";
			background-color : currentColor;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 37 * var( --remBase ) );
		h2{
			> span{
				&:nth-of-type( 1 ){
					width : calc( 108 * var( --viewportBase ) );
					height : calc( 30 * var( --remBase ) );
					margin-left : calc( 11 * var( --viewportBase ) );
					font-size : calc( 16 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 6 * var( --remBase ) );
					margin-left : calc( 11 * var( --viewportBase ) );
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 27 / 18 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 18 * var( --remBase ) );
							line-height : calc( 27 / 18 );
						}
						&:nth-of-type( 3 ){
							font-size : calc( 20 * var( --remBase ) );
							line-height : calc( 30 / 20 );
							text-decoration-thickness : calc( 4 * var( --remBase ) );
							text-underline-offset : calc( -2 * var( --remBase ) );
						}
					}
				}
			}
		}
		.lede{
			position : relative;
			padding-left : calc( 11 * var( --viewportBase ) );
			margin-top : calc( 33 * var( --remBase ) );
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
			&::before{
				position : absolute;
				bottom : 0;
				right : 0;
				display : block;
				width : auto;
				height : calc( 155 * var( --remBase ) );
				aspect-ratio : 275/310;
				font-size : 0;
				content : "";
				background : url( "../images/ihinseiri/prefecture/leave/bg_sp.webp" ) left top / contain no-repeat;
			}
		}
		.box{
			margin-top : calc( 39 * var( --remBase ) );
		}
		h3{
			column-gap : calc( 8 * 100% / 371 );
			margin-left : calc( 4 * var( --viewportBase ) );
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 24 / 16 );
			&::before{
				height : calc( 19.05 * var( --remBase ) );
				aspect-ratio : 8.25/19.05;
				margin-top : calc( ( ( 24 - 19.05 ) / 2 ) * var( --remBase ) );
			}
		}
		.box{
			p{
				padding-inline : calc( 26 * var( --viewportBase ) );
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 21 / 14 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 76 * var( --remBase ) );
		h2{
			> span{
				&:nth-of-type( 1 ){
					width : calc( 248 * var( --contentBase ) );
					height : calc( 54 * var( --remBase ) );
					margin-inline : auto;
					font-size : calc( 30 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 12 * var( --remBase ) );
					text-align : center;
					> span{
						&:nth-of-type( 1 ){
							font-size : calc( 36 * var( --remBase ) );
							line-height : calc( 54 / 36 );
						}
						&:nth-of-type( 2 ){
							font-size : calc( 30 * var( --remBase ) );
							line-height : calc( 45 / 30 );
						}
						&:nth-of-type( 3 ){
							font-size : calc( 36 * var( --remBase ) );
							line-height : calc( 54 / 36 );
							text-decoration-thickness : calc( 12 * var( --remBase ) );
							text-underline-offset : calc( -4 * var( --remBase ) );
						}
					}
				}
			}
		}
		.lede{
			font-size : calc( 24 * var( --remBase ) );
			line-height : calc( 36 / 24 );
			text-align : center;
		}
		.box{
			position : relative;
			width : calc( 1020 * var( --contentBase ) );
			padding-top : calc( 50 * var( --remBase ) );
			padding-bottom : calc( 24 * var( --remBase ) );
			padding-left : calc( 25 * var( --contentBase ) );
			padding-right : calc( 305 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 26 * var( --remBase ) );
			background-color : #fffffb;
			border-radius : calc( 20 * var( --remBase ) );
			outline : solid calc( 4 * var( --remBase ) ) #e8e8e8;
			outline-offset : calc( -4 * var( --remBase ) );
			&::before{
				position : absolute;
				bottom : 0;
				right : 0;
				height : calc( 256 * var( --remBase ) );
				aspect-ratio : 286/256;
				font-size : 0;
				content : "";
				background : url( "../images/ihinseiri/prefecture/leave/bg_pc.webp" ) left top / contain no-repeat;
			}
			h3{
				column-gap : calc( 10 * 100% / 690 );
				font-size : calc( 24 * var( --remBase ) );
				line-height : calc( 36 / 24 );
				&::before{
					height : calc( 16.62 * var( --remBase ) );
					aspect-ratio : 10.41 / 16.62;
					margin-top : calc( ( ( 36 - 16.62 ) / 2 ) * var( --remBase ) );
				}
			}
			p{
				margin-top : calc( 12 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : calc( 27 / 18 );
			}
		}
	}
}