@charset "UTF-8";

/* --------------------------------------------
MAIN
--------------------------------------------- */
#main{
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 80 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 80 * var( --remBase ) );
		overflow-x : clip;
	}
}

/* --------------------------------------------
FEATURES
--------------------------------------------- */
#main:has( #features ){
	padding-bottom : 0;
}
#features{
	.box{
		display : grid;
		align-content : end;
		justify-content : start;
		background : url( "../images/features/bg.avif" ) right top / contain no-repeat;
	}
	a{
		display : grid;
		align-items : center;
		justify-content : start;
		font-weight : 700;
		background-color : #1b2884;
	}
	@media screen and ( width <= 768px ){
		.box{
			height : calc( 140 * var( --remBase ) );
			ul{
				clip-path : polygon( 0 0 , 70% 0% , 100% 100% , 0 100% );
			}
			li + li{
				margin-top : calc( 6 * var( --remBase ) );
			}
			a{
				height : calc( 40 * var( --remBase ) );
				padding-left : calc( 8 * var( --remBase ) );
				padding-right : calc( 20 * var( --remBase ) );
				font-size : calc( 15 * var( --remBase ) );
				color : white;
			}
		}
		.contentAuthor{
			padding-bottom : calc( 4 * var( --remBase ) );
			margin-top : calc( 20 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		.box{
			height : calc( 496 * var( --remBase ) );
			padding-bottom : calc( 36 * var( --remBase ) );
			ul{
				clip-path : polygon( 0 0 , 80% 0% , 100% 100% , 0 100% );
			}
			li + li{
				margin-top : calc( 20 * var( --remBase ) );
			}
			a{
				height : calc( 100 * var( --remBase ) );
				padding-left : calc( 17 * var( --remBase ) );
				padding-right : calc( 64 * var( --remBase ) );
				font-size : calc( 40 * var( --remBase ) );
				color : white;
			}
		}
		.contentAuthor{
			padding-block : calc( 4 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
FEATURE TEACHINGS
--------------------------------------------- */
#featureTeachings{
	overflow-x : clip;
	h2{
		font-weight : 700;
		color : #324158;
	}
	p + p{
		margin-top : 1lh;
	}
	@media screen and ( width <= 768px ){
		h2{
			font-size : calc( 14 * var( --remBase ) );
			line-height : calc( 20 / 14 );
		}
		p{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.8;
		}
	}
	@media print , screen and ( width > 768px ){
		--breakPoint : 1590;
		--contentWidth : 1550;
		--gutter : 20;
		--remBase : min( 1px , 100vw / var( --breakPoint ) );
		--viewportBase : min( 1px , 100% / var( --breakPoint ) );
		--contentBase : 100% / var( --contentWidth );
		&.wrap{
			padding-inline : max( calc( ( 100% - 1550px ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
		}
		h2{
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.52;
			span{
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 28 / 22 );
			}
		}
		p{
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
	}
}
#featureTeaching01{
	@media screen and ( width <= 768px ){
		picture{
			margin-block : calc( 12 * var( --remBase ) );
			margin-left : calc( -10 * var( --contentBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 662 * var( --contentBase ) ) auto;
		row-gap : calc( 20 * var( --remBase ) );
		column-gap : calc( 72 * var( --contentBase ) );
		justify-content : center;
		picture{
			grid-row : 1/-1;
			grid-column : 2;
			align-self : center;
		}
		img{
			height : calc( 211 * var( --remBase ) );
		}
		h2{
			grid-row : 1;
			grid-column : 1;
			text-align : center;
		}
	}
}
#featureTeachingLinks{
	display : grid;
	justify-content : center;
	li , a{
		width : 100%;
		height : 100%;
	}
	a{
		position : relative;
		display : grid;
		grid-auto-flow : column;
		place-items : center;
		justify-content : center;
		font-family : "Noto Serif JP" , serif;
		color : white;
		background-color : #0b2f5b;
		outline-width : calc( 1 * var( --remBase ) );
		outline-style : solid;
		outline-color : #0b2f5b;
		outline-offset : calc( -1 * var( --remBase ) );
		&::after{
			font-weight : 700;
			white-space : pre;
			content : " >";
		}
		&::before{
			position : absolute;
			top : 50%;
			left : 50%;
			display : block;
			pointer-events : none;
			content : "";
			outline-width : calc( 1 * var( --remBase ) );
			outline-style : solid;
			outline-color : white;
			outline-offset : calc( -1 * var( --remBase ) );
			translate : -50% -50%;
		}
	}
	@media screen and ( width <= 768px ){
		grid-template-rows : calc( 28 * var( --remBase ) );
		grid-template-columns : repeat( 3 , calc( 280 / 3 * var( --contentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 40 * var( --remBase ) );
		a{
			font-size : calc( 10 * var( --remBase ) );
			&::before{
				width : calc( 100% - 4 * var( --remBase ) );
				height : calc( 100% - 4 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-rows : calc( 45 * var( --remBase ) );
		grid-template-columns : repeat( 3 , calc( 208 * var( --contentBase ) ) );
		column-gap : calc( 64 * var( --contentBase ) );
		margin-top : calc( 50 * var( --remBase ) );
		a{
			font-size : calc( 17 * var( --remBase ) );
			&::before{
				width : calc( 100% - 4 * var( --remBase ) );
				height : calc( 100% - 4 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#featureTeachingLinks a:hover{
		color : #0b2f5b;
		background-color : white;
		&::before{
			outline-color : #0b2f5b;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#featureTeachingLinks a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
		&::before{
			transition : outline-color var( --transitionBase );
		}
	}
}

/* --------------------------------------------
FEATURES FACILITY
--------------------------------------------- */
#featurefacilities{
	h1{
		text-align : center;
	}
	h2{
		width : fit-content;
		font-family : "Noto Serif JP" , serif;
		font-weight : 400;
		text-decoration-line : underline;
		text-decoration-color : color-mix( in sRGB , white 90% , transparent );
		text-underline-offset : -1em;
		text-decoration-skip-ink : none;
	}
	ul p{
		width : fit-content;
		font-weight : 700;
		color : #003e7f;
		text-decoration-line : underline;
		text-decoration-color : color-mix( in sRGB , white 90% , transparent );
		text-underline-offset : -1em;
		text-decoration-skip-ink : none;
	}
	picture{
		overflow : hidden;
		filter : drop-shadow( 0 calc( 1 * var( --remBase ) ) calc( 3 * var( --remBase ) ) rgb( 0 0 0 / .5 ) );
		img{
			border-radius : calc( 5 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( -39 * var( --remBase ) );
		.box{
			padding-top : calc( 21 * var( --remBase ) );
			padding-bottom : calc( 10 * var( --remBase ) );
			background : url( "../images/features/facility/bg_sp.avif" ) center top / 100% 100% no-repeat;
		}
		h1{
			font-size : calc( 18 * var( --remBase ) );
			line-height : 2;
		}
		h2{
			padding-inline : calc( 12 * var( --remBase ) );
			font-size : calc( 11 * var( --remBase ) );
			line-height : 2;
			text-decoration-thickness : calc( 16 * var( --remBase ) );
		}
		ul p{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 2;
			text-decoration-thickness : calc( 14 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( -37 * var( --remBase ) );
		.box{
			padding-top : calc( 59 * var( --remBase ) );
			padding-bottom : calc( 28 * var( --remBase ) );
			background : url( "../images/features/facility/bg_pc.avif" ) center top / 100% 100% no-repeat;
		}
		h1{
			font-size : calc( 28 * var( --remBase ) );
			line-height : 2;
		}
		h2{
			font-size : calc( 25 * var( --remBase ) );
			line-height : 2;
			text-decoration-thickness : calc( 36 * var( --remBase ) );
		}
		ul p{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 2;
			text-decoration-thickness : calc( 28 * var( --remBase ) );
		}
		> ul{
			position : relative;
			margin-top : calc( 29 * var( --remBase ) );
		}
	}
}
#featurefacility01{
	> ul{
		> li:nth-child( 2 ){
			picture{
				border : solid calc( 2 * var( --remBase ) ) white;
				border-radius : 50%;
			}
		}
	}
	@media screen and ( width <= 768px ){
		> ul{
			margin-top : calc( 22 * var( --remBase ) );
			> li:nth-child( 1 ){
				position : relative;
				padding-top : calc( 7 * var( --remBase ) );
				picture{
					position : absolute;
					top : 0;
					left : 0;
					img{
						height : calc( 103 * var( --remBase ) );
					}
				}
				p{
					position : relative;
					margin-left : 2em;
				}
			}
			> li:nth-child( 2 ){
				position : relative;
				margin-top : calc( 60 * var( --remBase ) );
				picture{
					position : absolute;
					bottom : 100%;
					right : 0;
					img{
						height : calc( 67 * var( --remBase ) );
					}
				}
				p{
					position : relative;
					margin-left : auto;
					text-align : right;
				}
			}
			> li:nth-child( 3 ){
				position : relative;
				padding-top : calc( 97 * var( --remBase ) );
				margin-top : calc( -16 * var( --remBase ) );
				picture{
					&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
						position : absolute;
						img{
							height : calc( 97 * var( --remBase ) );
						}
					}
					&:nth-of-type( 1 ){
						top : 0;
						left : 0;
					}
					&:nth-of-type( 2 ){
						top : calc( 20 * var( --remBase ) );
						right : 0;
					}
				}
				p{
					position : relative;
					margin-left : auto;
					text-align : right;
				}
				picture:nth-of-type( 3 ){
					margin-top : calc( 10 * var( --remBase ) );
					img{
						width : 100%;
						height : auto;
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		grid-row : 1;
		grid-column : 1/-1;
		>ul{
			display : grid;
			grid-template-rows : calc( 360 * var( --remBase ) ) auto;
			grid-template-columns : 1fr auto calc( 334 * var( --contentBase ) );
			row-gap : calc( 40 * var( --remBase ) );
			column-gap : calc( 10 * var( --contentBase ) );
			margin-top : calc( 15 * var( --remBase ) );
			> li:nth-child( 1 ){
				display : grid;
				grid-template-rows : calc( 360 * var( --remBase ) );
				grid-template-columns : 100%;
				grid-row : 1;
				grid-column : 1/3;
				picture , p{
					grid-row : 1;
					grid-column : 1;
				}
				picture{
					justify-self : start;
				}
				img{
					height : calc( 360 * var( --remBase ) );
				}
				p{
					align-self : start;
					justify-self : start;
					margin-top : calc( 73 * var( --remBase ) );
					margin-left : calc( 23 * var( --remBase ) );
				}
			}
			> li:nth-child( 2 ){
				display : grid;
				grid-row : 1;
				grid-column : 2/4;
				grid-auto-flow : row;
				row-gap : calc( 2 * var( --remBase ) );
				align-self : end;
				justify-content : end;
				picture{
					margin-left : auto;
				}
				img{
					height : calc( 214 * var( --remBase ) );
				}
			}
			> li:nth-child( 3 ){
				position : relative;
				grid-row : 2;
				grid-column : 1/-1;
				height : calc( 854 * var( --remBase ) );
				picture{
					position : absolute;
					&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
						top : 0;
						left : 50%;
						img{
							height : calc( 360 * var( --remBase ) );
						}
					}
					&:nth-of-type( 1 ){
						translate : -100% 0;
					}
					&:nth-of-type( 3 ){
						bottom : 0;
						left : 50%;
						translate : -50% 0;
						img{
							height : calc( 474 * var( --remBase ) );
						}
					}
				}
				p{
					position : relative;
					z-index : 1;
					margin-inline : auto;
					margin-top : calc( 280 * var( --remBase ) );
					text-align : center;
				}
			}
		}
	}
}

/* --------------------------------------------
FEATURES MESSAGE
--------------------------------------------- */
#main:has( #featureMeesages ){
	padding-bottom : 0;
}
#featureMeesages{
	picture{
		overflow : hidden;
		filter : drop-shadow( 0 calc( 1 * var( --remBase ) ) calc( 3 * var( --remBase ) ) rgb( 0 0 0 / .5 ) );
		border : solid calc( 2 * var( --remBase ) ) white;
		border-radius : 50%;
	}
	p + p{
		margin-top : 1lh;
	}
	h2{
		font-weight : 400;
	}
	@media screen and ( width <= 768px ){
		display : grid;
		grid-template-columns : 1fr auto;
		column-gap : calc( 10 * var( --contentBase ) );
		align-items : start;
		.box , h2 , footer{
			grid-column : 1/-1;
		}
		p , h2 , li{
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.5;
		}
		.box{
			grid-row : 1;
		}
		h2{
			grid-row : 2;
		}
		picture{
			grid-row : 3;
			grid-column : 2;
			img{
				height : calc( 164 * var( --remBase ) );
			}
		}
		ul{
			grid-row : 3;
			grid-column : 1;
		}
		footer{
			padding-block : calc( 4 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		picture{
			float : right;
			margin-bottom : calc( 20 * var( --remBase ) );
			margin-left : calc( 20 * var( --remBase ) );
			img{
				height : calc( 253 * var( --remBase ) );
			}
		}
		.box{
			display : contents;
		}
		p , h2 , li{
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
		footer{
			padding-block : calc( 20 * var( --remBase ) );
		}
	}
}
#featureMeesageTeachers{
	@media screen and ( width <= 768px ){
		display : contents;
		h2{
			margin-top : calc( 7 * var( --remBase ) );
			margin-bottom : calc( 18 * var( --remBase ) );
		}
		p{
			margin-top : calc( 18 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 40 * var( --remBase ) );
		margin-top : calc( 19 * var( --remBase ) );
		ul , p{
			margin-top : calc( 26 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
MONEY
--------------------------------------------- */
#main:has( #monies ){
	padding-bottom : 0;
}
#monies{
	position : relative;
	&::after{
		position : absolute;
		bottom : 0;
		left : 0;
		display : block;
		width : 100%;
		content : "";
		background : url( "../images/money/bg.avif" ) center / cover no-repeat;
	}
	h1{
		text-align : center;
	}
	p{
		em{
			background-image : linear-gradient( transparent 40% , #f3f70791 80% );
		}
	}
	p + p{
		margin-top : 1lh;
	}
	dd{
		span{
			font-weight : 700;
		}
	}
	a{
		box-sizing : 0 calc( 3 * var( --remBase ) ) 0 0 rgb( 86 111 184 / .6 );
		display : grid;
		place-items : center;
		margin-inline : auto;
		font-weight : 700;
		color : white;
		background-color : #2b7c74;
		outline : solid calc( 2 * var( --remBase ) ) #3e569e;
		outline-offset : calc( -2 * var( --remBase ) );
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 51 * var( --remBase ) );
		&::after{
			height : calc( 39 * var( --remBase ) );
		}
		h1{
			img{
				width : 100%;
				height : auto;
			}
		}
		.box{
			padding-inline : calc( 10 * var( --viewportBase ) );
			margin-top : calc( 35 * var( --remBase ) );
		}
		p{
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 18 / 11 );
		}
		dl{
			margin-top : calc( 14 * var( --remBase ) );
			margin-bottom : calc( 10 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.5;
			> div{
				display : grid;
				grid-template-columns : auto auto;
				column-gap : 1em;
				align-items : start;
				justify-content : start;
				+ div{
					margin-top : calc( 7 * var( --remBase ) );
				}
			}
		}
		a{
			width : calc( 234 * var( --viewportBase ) );
			height : calc( 26 * var( --remBase ) );
			margin-top : calc( 12 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 238 * var( --remBase ) );
		&::after{
			height : calc( 171 * var( --remBase ) );
		}
		h1{
			img{
				height : calc( 319 * var( --remBase ) );
			}
		}
		.box{
			width : calc( 904 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 75 * var( --remBase ) );
		}
		p{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.4;
		}
		dl{
			width : fit-content;
			margin-inline : auto;
			margin-top : calc( 64 * var( --remBase ) );
			margin-bottom : calc( 32 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 34 / 22 );
			> div{
				+ div{
					margin-top : calc( 15 * var( --remBase ) );
				}
				display : grid;
				grid-template-columns : 4em 1fr;
				align-items : start;
			}
		}
		a{
			width : calc( 246 * var( --contentBase ) );
			height : calc( 41 * var( --remBase ) );
			margin-top : calc( 70 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#monies a:hover{
		background-color : #3e569e;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#monies a{
		transition : background-color var( --transitionBase );
	}
}

/* --------------------------------------------
SUMMER
--------------------------------------------- */
#summers{
	@media screen and ( width <= 768px ){
		margin-top : calc( -39 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( -37 * var( --remBase ) );
	}
}
.links-summer{
	a{
		display : grid;
		place-items : center;
		color : white;
	}
	li:nth-child( 1 ) a{
		background-image : linear-gradient( to bottom , color-mix( in srgb , #2cb614 50% , white ) , #2cb614 50% , color-mix( in srgb , #2cb614 90% , black ) 50% , color-mix( in srgb , #2cb614 90% , black ) );
	}
	li:nth-child( 2 ) a{
		background-image : linear-gradient( to bottom , color-mix( in srgb , #ff6161 50% , white ) , #ff6161 50% , color-mix( in srgb , #ff6161 90% , black ) 50% , color-mix( in srgb , #ff6161 90% , black ) );
	}
	@media screen and ( width <= 768px ){
		padding-inline : calc( 60 * var( --contentBase ) );
		li + li{
			margin-top : calc( 10 * var( --remBase ) );
		}
		a{
			height : calc( 34 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-rows : calc( 72 * var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 388 * var( --contentBase ) ) );
		column-gap : calc( 140 * var( --contentBase ) );
		justify-content : center;
		li , a{
			width : 100%;
			height : 100%;
		}
		a{
			font-size : calc( 32 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.links-summer a:hover{
		color : black;
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.links-summer a{
		transition : opacity var( --transitionBase ) , color var( --transitionBase );
	}
}
#summer01{
	background-image : url( "../images/summer/bg01.avif" );
	background-repeat : no-repeat;
	background-position : center;
	p{
		+ p{
			margin-top : 1lh;
		}
		color : var( --blue02 );
		text-align : center;
		em{
			font-weight : 400;
			background-image : linear-gradient( transparent 40% , #f3f707b3 80% );
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 31 * var( --remBase ) );
		padding-bottom : calc( 19 * var( --remBase ) );
		background-size : auto calc( 194 * var( --remBase ) );
		p{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.4;
		}
		.links-summer{
			margin-top : calc( 23 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 72 * var( --remBase ) );
		padding-bottom : calc( 34 * var( --remBase ) );
		background-size : auto calc( 694 * var( --remBase ) );
		p{
			font-size : calc( 30 * var( --remBase ) );
			line-height : 1.4;
		}
		.links-summer{
			margin-top : calc( 59 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PREPARATORY
--------------------------------------------- */
#preparatories{
	h1{
		overflow-x : clip;
		span{
			position : relative;
			z-index : 1;
			display : grid;
			align-items : center;
			justify-content : center;
			font-weight : 700;
			color : white;
			background-color : color-mix( in srgb , #ff8585 74% , transparent );
		}
	}
	@media screen and ( width <= 768px ){
		h1{
			height : calc( 134 * var( --remBase ) );
			padding-top : calc( 26 * var( --remBase ) );
			background-image : url( "../images/preparatory/bg_title_sp.avif" );
			background-repeat : no-repeat;
			background-position : center;
			background-size : cover;
			span{
				width : calc( 280 * var( --viewportBase ) );
				height : calc( 54 * var( --remBase ) );
				margin-inline : auto;
				font-size : calc( 17 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		--breakPoint : 1424;
		--contentWidth : 1384;
		--gutter : 20;
		--remBase : min( 1px , 100vw / var( --breakPoint ) );
		--viewportBase : min( 1px , 100% / var( --breakPoint ) );
		--contentBase : 100% / var( --contentWidth );
		.wrap{
			padding-inline : max( calc( ( 100% - 1384px ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
		}
		h1{
			display : grid;
			grid-column : 1fr;
			align-content : end;
			height : calc( 274 * var( --remBase ) );
			padding-inline : calc( ( 100% - 2000px ) / 2 );
			background-size : cover;
			&::before{
				position : absolute;
				left : 0;
				display : block;
				width : 100%;
				height : calc( 274 * var( --remBase ) );
				content : "";
				background-image : url( "../images/preparatory/bg_title_pc.avif" );
				background-repeat : no-repeat;
				background-position : center;
				background-size : cover;
			}
			span{
				height : calc( 100 * var( --remBase ) );
				font-size : calc( 50 * var( --remBase ) );
			}
		}
	}
}
#preparatoryLinks{
	display : grid;
	align-items : center;
	justify-content : center;
	li , a{
		width : 100%;
		height : 100%;
	}
	a{
		display : grid;
		place-items : center;
		color : white;
		background-color : #cec5b1;
	}
	@media screen and ( width <= 768px ){
		grid-template-rows : calc( 30 * var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 146 * var( --contentBase ) ) );
		justify-content : space-between;
		padding-bottom : calc( 25 * var( --remBase ) );
		margin-top : calc( 17 * var( --remBase ) );
		a{
			font-size : calc( 10 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-rows : calc( 40 * var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 370 * var( --contentBase ) ) );
		column-gap : calc( 10 * var( --contentBase ) );
		padding-bottom : calc( 69 * var( --remBase ) );
		margin-top : calc( 22 * var( --remBase ) );
		a{
			font-size : calc( 15 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#preparatoryLinks a:hover{
		color : var( --base );
		background-color : #ccc;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#preparatoryLinks a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}
#preparatory01{
	background-color : #dcf3f0;
	h2{
		display : grid;
		place-items : center;
		font-weight : 400;
		color : white;
		background-color : #85cbbf;
	}
	h3{
		font-weight : 700;
		color : #024d28;
		text-align : center;
	}
	p + p{
		margin-top : 1lh;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 9 * var( --remBase ) );
		h2{
			height : calc( 38 * var( --remBase ) );
			margin-bottom : calc( 5 * var( --remBase ) );
			font-size : calc( 13 * var( --remBase ) );
		}
		h3{
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 17 / 12 );
		}
		p{
			padding-inline : calc( 10 * var( --contentBase ) );
			font-size : calc( 9 * var( --remBase ) );
			line-height : calc( 15 / 9 );
		}
		h3 + p{
			margin-top : calc( 5 * var( --remBase ) );
		}
		p + h3{
			margin-top : calc( 21 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		position : relative;
		max-width : 2000px;
		padding-bottom : calc( 48 * var( --remBase ) );
		margin-inline : auto;
		h2{
			position : relative;
			height : calc( 100 * var( --remBase ) );
			margin-bottom : calc( 24 * var( --remBase ) );
			font-size : calc( 40 * var( --remBase ) );
		}
		h3{
			font-size : calc( 31 * var( --remBase ) );
			line-height : calc( 44 / 31 );
		}
		p{
			padding-inline : max( calc( ( 100% - 1384px ) / 2 ) , calc( var( --gutter ) * var( --viewportBase ) ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 25 / 18 );
		}
		h3 + p{
			margin-top : calc( 29 * var( --remBase ) );
		}
		p + h3{
			margin-top : calc( 61 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
PREPARATORY SCHEDULE
--------------------------------------------- */
#preparatorySchedules{
	overflow-x : clip;
	h1{
		font-weight : 700;
		color : #1c2984;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 14 * var( --remBase ) );
		h1{
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.55;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		h1{
			font-size : calc( 60 * var( --remBase ) );
			line-height : calc( 91 / 60 );
		}
	}
}
#preparatoryScheduleLinks{
	display : grid;
	li , a{
		width : 100%;
		height : 100%;
	}
	a{
		display : grid;
		place-items : center;
		color : white;
		background-color : #cec5b1;
	}
	@media screen and ( width <= 768px ){
		grid-template-rows : calc( 29 * var( --remBase ) );
		grid-template-columns : calc( 123 * var( --contentBase ) ) calc( 171 * var( --contentBase ) );
		justify-content : space-between;
		margin-top : calc( 14 * var( --remBase ) );
		a{
			font-size : calc( 10 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-rows : calc( 40 * var( --remBase ) );
		grid-template-columns : repeat( 2 , calc( 370 * var( --contentBase ) ) );
		column-gap : calc( 80 * var( --contentBase ) );
		justify-content : center;
		margin-top : calc( 45 * var( --remBase ) );
		a{
			font-size : calc( 15 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#preparatoryScheduleLinks a:hover{
		color : var( --base );
		background-color : #ccc;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#preparatoryScheduleLinks a{
		transition : color var( --transitionBase ) , background-color var( --transitionBase );
	}
}
:where( #preparatorySchedule01, #preparatorySchedule02 , #preparatorySchedule03 ){
	position : relative;
	&::before{
		position : absolute;
		top : 0;
		left : 50%;
		display : block;
		content : "";
		translate : -50% 0;
	}
	h2{
		font-weight : 700;
		color : #003e7f;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		&::before{
			width : calc( 320 * var( --contentBase ) );
			height : calc( 29 * var( --remBase ) );
			content : "";
			background : url( "../images/ui/separator/border01.webp" ) left top / 100% 100% no-repeat;
		}
		h2{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
		}
	}
	@media print , screen and ( width > 768px ){
		&::before{
			width : 100vw;
			height : calc( 8 * var( --remBase ) );
			box-shadow : 0 calc( -8 * var( --remBase ) ) calc( 8 * var( --remBase ) ) calc( -8 * var( --remBase ) ) color-mix( in sRGB , black 70% , transparent ) inset;
		}
		h2{
			font-size : calc( 33 * var( --remBase ) );
			line-height : calc( 50 / 33 );
		}
	}
}
#preparatorySchedule01{
	.box{
		p:nth-of-type( 2 ){
			color : #de5021;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 29 * var( --remBase ) );
		padding-bottom : calc( 28 * var( --remBase ) );
		.box{
			width : calc( 280 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 11 * var( --remBase ) );
			p{
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.5;
				text-align : center;
			}
			ol{
				margin-top : calc( 9 * var( --remBase ) );
			}
			li + li{
				margin-top : calc( 10 * var( --remBase ) );
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 11 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 40 * var( --remBase ) );
		padding-bottom : calc( 100 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
		.box{
			width : calc( 850 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 5 * var( --remBase ) );
			p{
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
			p:nth-of-type( 1 ){
				padding-left : 2em;
			}
			ol{
				margin-top : calc( 20 * var( --remBase ) );
			}
			li + li{
				margin-top : calc( 24 * var( --remBase ) );
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 20 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
PREPARATORY FORM
--------------------------------------------- */
#preparatoryForms{
	overflow-x : clip;
	header{
		position : relative;
		p{
			color : #003e7f;
			text-align : center;
		}
		h1{
			display : grid;
			grid-template-columns : auto auto;
			justify-content : center;
			> span{
				font-weight : 700;
				&:nth-of-type( 1 ){
					grid-row : 1;
					grid-column : 1;
					color : black;
				}
				&:nth-of-type( 2 ){
					grid-row : 1;
					grid-column : 2;
					color : black;
				}
				&:nth-of-type( 3 ){
					grid-row : 2;
					grid-column : 1/-1;
					color : #1c2984;
					text-align : center;
				}
			}
			&::before , &::after{
				position : absolute;
				top : 0;
				display : block;
				width : auto;
				height : 100%;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : 0 0;
				background-size : contain;
			}
			&::before{
				aspect-ratio : 1274/960;
				background-image : url( "../images/preparatory/form/bg_title01.avif" );
			}
			&::after{
				aspect-ratio : 1280/957;
				background-image : url( "../images/preparatory/form/bg_title02.avif" );
			}
		}
	}
	@media screen and ( width <= 768px ){
		header{
			height : calc( 76 * var( --remBase ) );
			padding-top : calc( 5 * var( --remBase ) );
			background : url( "../images/preparatory/form/bg_title.avif" ) center / cover no-repeat;
			p{
				font-size : calc( 8 * var( --remBase ) );
				line-height : 1.5;
			}
			h1{
				row-gap : calc( 1 * var( --remBase ) );
				column-gap : calc( 9 * var( --viewportBase ) );
				> span{
					&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
						font-size : calc( 9 * var( --remBase ) );
						line-height : calc( 14 / 9 );
					}
					&:nth-of-type( 3 ){
						font-size : calc( 11 * var( --remBase ) );
						line-height : calc( 15.5 / 11 );
					}
				}
				&::before , &::after{
					top : calc( 5 * var( --remBase ) );
					height : calc( 57 * var( --remBase ) );
				}
				&::before{
					left : calc( 5 * var( --viewportBase ) );
				}
				&::after{
					right : calc( 5 * var( --viewportBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			width : calc( 980 * var( --viewportBase ) );
			height : calc( 507 * var( --remBase ) );
			padding-top : calc( 47 * var( --remBase ) );
			margin-inline : auto;
			&::before{
				position : absolute;
				top : 0;
				left : 50%;
				z-index : -1;
				display : block;
				width : calc( 2461 * var( --contentBase ) );
				height : 100%;
				font-size : 0;
				content : "";
				background : url( "../images/preparatory/form/bg_title.avif" ) center / auto 100% no-repeat;
				translate : -50% 0;
			}
			p{
				font-size : calc( 35 * var( --remBase ) );
				line-height : calc( 51 / 35 );
			}
			h1{
				row-gap : calc( 23 * var( --remBase ) );
				column-gap : calc( 50 * var( --viewportBase ) );
				margin-top : calc( 36 * var( --remBase ) );
				> span{
					&:nth-of-type( 1 ) , &:nth-of-type( 2 ){
						font-size : calc( 50 * var( --remBase ) );
						line-height : 1.56;
					}
					&:nth-of-type( 3 ){
						font-size : calc( 78 * var( --remBase ) );
						line-height : calc( 101 / 78 );
					}
				}
				&::before{
					right : 100%;
				}
				&::after{
					left : 100%;
				}
			}
		}
	}
}
#preparatoryFormLeads{
	p{
		+ p{
			margin-top : 1lh;
		}
		font-family : "Noto Serif JP" , serif;
		font-weight : 700;
		color : black;
		text-align : center;
		em{
			color : #1d2cf3;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 25 * var( --remBase ) );
		padding-bottom : calc( 18 * var( --remBase ) );
		p{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.6;
		}
		.links-preparatoryForm{
			margin-top : calc( 27 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 135 * var( --remBase ) );
		padding-bottom : calc( 37 * var( --remBase ) );
		p{
			font-size : calc( 26 * var( --remBase ) );
			line-height : calc( 41 / 26 );
		}
		.links-preparatoryForm{
			margin-top : calc( 50 * var( --remBase ) );
		}
	}
}
.links-preparatoryForm{
	display : grid;
	grid-template-columns : repeat( 2 , 50% );
	> li , a{
		width : 100%;
		height : 100%;
	}
	a{
		display : grid;
		place-items : center;
		color : black;
	}
	li:nth-child( 1 ) a{
		background-image : linear-gradient( to bottom , color-mix( in srgb , #edd23b 70% , transparent ) , color-mix( in srgb , #edd23b 70% , transparent ) 50% , color-mix( in srgb , #edd23b 90% , white ) 50% , color-mix( in srgb , #edd23b 90% , white ) );
	}
	li:nth-child( 2 ) a{
		background-image : linear-gradient( to bottom , color-mix( in srgb , #41baae 70% , transparent ) , color-mix( in srgb , #41baae 70% , transparent ) 50% , color-mix( in srgb , #41baae 90% , white ) 50% , color-mix( in srgb , #41baae 90% , white ) );
	}
	@media screen and ( width <= 768px ){
		grid-template-rows : calc( 35 * var( --remBase ) );
		margin-inline : calc( -10 * var( --contentBase ) );
		a{
			font-size : calc( 15 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-rows : calc( 71 * var( --remBase ) );
		a{
			font-size : calc( 32 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.links-preparatoryForm{
		a:hover{
			color : white;
		}
		li:nth-child( 1 ) a:hover{
			background-image : linear-gradient( to bottom , color-mix( in srgb , #0c9 70% , transparent ) , color-mix( in srgb , #0c9 70% , transparent ) 50% , color-mix( in srgb , #0c9 90% , white ) 50% , color-mix( in srgb , #0c9 90% , white ) );
		}
		li:nth-child( 2 ) a:hover{
			background-image : linear-gradient( to bottom , color-mix( in srgb , #f6ae54 70% , transparent ) , color-mix( in srgb , #f6ae54 70% , transparent ) 50% , color-mix( in srgb , #f6ae54 90% , white ) 50% , color-mix( in srgb , #f6ae54 90% , white ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.links-preparatoryForm{
		a{
			transition : color var( --transitionBase ) , background var( --transitionBase );
		}
	}
}

/* --------------------------------------------
HIGH SCHOOL
--------------------------------------------- */
#highSchools{
	> hgroup{
		display : grid;
		grid-auto-flow : row;
		align-content : start;
		justify-content : center;
		color : #1c2984;
		text-align : center;
		background : url( "../images/high-school/bg_title.avif" ) center / cover no-repeat;
		h1{
			font-weight : 700;
			background-color : color-mix( in sRGB , white 90% , transparent );
		}
		p{
			background-color : color-mix( in sRGB , white 90% , transparent );
		}
	}
	>p{
		text-align : center;
		strong{
			font-weight : 700;
			color : #e83131;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( -39 * var( --remBase ) );
		> hgroup{
			height : calc( 102 * var( --remBase ) );
			padding-top : calc( 45 * var( --remBase ) );
			h1{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.55;
			}
			p{
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> p{
			margin-top : calc( 9 * var( --remBase ) );
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 17 / 11 );
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( -37 * var( --remBase ) );
		> hgroup{
			height : calc( 402 * var( --remBase ) );
			padding-top : calc( 74 * var( --remBase ) );
			h1{
				font-size : calc( 50 * var( --remBase ) );
				line-height : 1.52;
			}
			p{
				font-size : calc( 30 * var( --remBase ) );
				line-height : calc( 46 / 30 );
			}
		}
		> p{
			margin-top : calc( 17 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.55;
		}
	}
}
#highschool01{
	iframe{
		width : 100%;
		height : auto;
		aspect-ratio : 560/315;
	}
	h2{
		font-weight : 700;
		color : var( --blue02 );
	}
	> p{
		+ p{
			margin-top : 1lh;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 7 * var( --remBase ) );
		h2{
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.5;
			+ p{
				margin-top : calc( 6 * var( --remBase ) );
			}
		}
		>p{
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 17 / 11 );
		}
		>ul{
			padding-inline : calc( 10 * var( --contentBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			> li + li{
				margin-top : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 26 * var( --remBase ) );
		h2{
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.52;
		}
		>p{
			padding-left : calc( 25 * var( --contentBase ) );
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
		>ul{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 320 * var( --contentBase ) ) );
			justify-content : center;
			justify-content : space-between;
			margin-top : calc( 38 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
HIGH SCHOOL WINTER
--------------------------------------------- */
#highSchoolWinter01{
	p{
		color : var( --blue02 );
		text-align : center;
		+ p{
			margin-top : 1lh;
		}
		em{
			background-image : linear-gradient( transparent 40% , #f3f707b3 80% );
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 28 * var( --remBase ) );
		padding-bottom : calc( 30 * var( --remBase ) );
		p{
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 22 / 12 );
		}
		.link-highSchoolWinter{
			margin-top : calc( 48 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 33 * var( --remBase ) );
		padding-bottom : calc( 38 * var( --remBase ) );
		p{
			font-size : calc( 40 * var( --remBase ) );
			line-height : 1.8;
		}
		.link-highSchoolWinter{
			margin-top : calc( 84 * var( --remBase ) );
		}
	}
}
.link-highSchoolWinter{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 700;
	color : #2f2e2e;
	background-image : linear-gradient( to bottom , color-mix( in srgb , #ff7e57 70% , transparent ) , color-mix( in srgb , #ff7e57 70% , transparent ) 50% , color-mix( in srgb , #ff7e57 90% , white ) 50% , color-mix( in srgb , #ff7e57 90% , white ) );
	@media screen and ( width <= 768px ){
		width : calc( 180 * var( --contentBase ) );
		height : calc( 30 * var( --remBase ) );
		font-size : calc( 14 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		width : calc( 550 * var( --contentBase ) );
		height : calc( 72 * var( --remBase ) );
		font-size : calc( 32 * var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link-highSchoolWinter:hover{
		color : white;
		background-image : linear-gradient( to bottom , color-mix( in srgb , #20ce88 70% , transparent ) , color-mix( in srgb , #20ce88 70% , transparent ) 50% , color-mix( in srgb , #20ce88 90% , white ) 50% , color-mix( in srgb , #20ce88 90% , white ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link-highSchoolWinter{
		transition : color var( --transitionBase ) , background-image var( --transitionBase );
	}
}

/* --------------------------------------------
JUNIOR HIGHSCHOOL
--------------------------------------------- */
#junior01{
	hgroup{
		color : #009df0;
		text-align : center;
		h1{
			font-weight : 700;
		}
	}
	strong{
		font-weight : 700;
		color : #e83131;
	}
	> p{
		&:nth-of-type( 1 ){
			text-align : center;
		}
	}
	dl{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : start;
	}
	@media screen and ( width <= 768px ){
		hgroup{
			h1{
				font-size : calc( 19 * var( --remBase ) );
				line-height : calc( 23 / 19 );
			}
			p{
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 29 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
				span{
					display : block;
					margin-top : 3lh;
				}
			}
		}
		dl{
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 17 / 11 );
		}
		dd{
			li:nth-child( 2 ){
				margin-top : calc( 5 * var( --remBase ) );
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		hgroup{
			h1{
				font-size : calc( 60 * var( --remBase ) );
				line-height : calc( 91 / 60 );
			}
			p{
				font-size : calc( 30 * var( --remBase ) );
				line-height : calc( 46 / 30 );
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 13 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.55;
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 29 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		dl{
			padding-left : 2em;
			padding-right : 6em;
			margin-top : calc( 14 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
	}
}

/* --------------------------------------------
JUNIOR J3TRAINING
--------------------------------------------- */
#j3trainings{
	overflow-x : clip;
}
#j3training01{
	.box01{
		position : relative;
		p{
			position : absolute;
			right : 0;
		}
		> dl{
			color : #242323;
			> div{
				display : grid;
				grid-auto-flow : column;
				align-items : start;
				justify-content : start;
				> dt{
					display : grid;
					grid-auto-flow : column;
					align-items : start;
					justify-content : start;
					font-weight : 400;
					&::before{
						display : block;
						width : auto;
						aspect-ratio : 1;
						font-size : 0;
						content : "";
						background-color : #c00000;
						border-radius : 50%;
					}
				}
				> dd{
					font-weight : 700;
					> dl{
						display : grid;
						grid-auto-flow : column;
						align-items : start;
						justify-content : start;
						> dt{
							padding-right : .5em;
						}
					}
				}
			}
		}
		dl dl dl div{
			display : grid;
			grid-auto-flow : column;
			align-items : start;
			justify-content : start;
		}
	}
	.box02{
		display : block;
		width : fit-content;
		margin-inline : auto;
		p{
			font-weight : 700;
			color : #ff4040;
		}
	}
	.box03{
		> div{
			position : relative;
			background-color : #f7ebd5;
			filter : drop-shadow( calc( 1 * var( --remBase ) ) calc( 4 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 60% , transparent ) );
			outline : solid calc( 6 * var( --remBase ) ) #ff6161;
			outline-offset : calc( -6 * var( --remBase ) );
			&::before{
				position : absolute;
				top : 50%;
				right : calc( 100% - 1px );
				display : block;
				width : auto;
				aspect-ratio : 10/20;
				clip-path : polygon( 0 50% , 100% 0 , 100% 100% );
				content : "";
				background-color : #ff6161;
				translate : 0 -50%;
			}
		}
		p{
			+ p{
				margin-top : 1lh;
			}
			font-weight : 700;
			color : var( --blue02 );
			em{
				background : linear-gradient( transparent 40% , #f3f707 80% );
			}
		}
	}
	@media screen and ( width <= 768px ){
		h1{
			margin-inline : calc( 50% - 50vw );
		}
		.box01{
			margin-top : calc( 28 * var( --remBase ) );
			p{
				top : calc( 95 * var( --remBase ) );
			}
			img{
				height : calc( 36 * var( --remBase ) );
			}
			> dl{
				> div{
					> dt{
						font-size : calc( 13 * var( --remBase ) );
						line-height : calc( 19 / 13 );
						&::before{
							height : calc( 7 * var( --remBase ) );
							margin-top : calc( 6 * var( --remBase ) );
							margin-right : calc( 6.5 * var( --remBase ) );
						}
					}
					> dd{
						font-size : calc( 13 * var( --remBase ) );
						line-height : calc( 19 / 13 );
					}
					&:last-of-type{
						display : block;
						> dd{
							padding-left : 1em;
						}
					}
				}
			}
		}
		.box02{
			margin-top : calc( 30 * var( --remBase ) );
			img{
				height : calc( 97 * var( --remBase ) );
			}
			p{
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 16 / 11 );
			}
		}
		.box03{
			position : relative;
			margin-top : calc( 20 * var( --remBase ) );
			picture{
				position : absolute;
				top : 50%;
				translate : 0 -50%;
				left : calc( -5 * var( --contentBase ) );
			}
			img{
				height : calc( 55 * var( --remBase ) );
			}
			> div{
				width : calc( 270 * var( --contentBase ) );
				padding-inline : calc( 12 * var( --contentBase ) );
				padding-top : calc( 8 * var( --remBase ) );
				padding-bottom : calc( 12 * var( --remBase ) );
				margin-left : auto;
				&::before{
					height : calc( 20 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.3;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.box01{
			margin-top : calc( 31 * var( --remBase ) );
			p{
				top : 0;
				img{
					height : calc( 125 * var( --remBase ) );
				}
			}
			> dl{
				> div{
					+ div{
						margin-top : calc( 1 * var( --remBase ) );
					}
					> dt{
						padding-top : calc( 3.5 * var( --remBase ) );
						font-size : calc( 20 * var( --remBase ) );
						line-height : 1.4;
						&::before{
							height : calc( 10 * var( --remBase ) );
							margin-top : calc( 9 * var( --remBase ) );
							margin-right : calc( 20 * var( --remBase ) );
						}
					}
					> dd{
						font-size : calc( 25 * var( --remBase ) );
						line-height : 1.4;
					}
				}
			}
		}
		.box02{
			margin-top : calc( 33 * var( --remBase ) );
			img{
				height : calc( 268 * var( --remBase ) );
			}
			p{
				margin-top : calc( 16 * var( --remBase ) );
				font-size : calc( 23 * var( --remBase ) );
				line-height : calc( 33 / 23 );
				text-align : right;
			}
		}
		.box03{
			display : grid;
			grid-template-columns : auto calc( 776 * var( --contentBase ) );
			column-gap : calc( 10 * var( --contentBase ) );
			align-items : center;
			justify-content : space-between;
			justify-content : end;
			margin-top : calc( 53 * var( --remBase ) );
			img{
				height : calc( 198 * var( --remBase ) );
			}
			div{
				padding-inline : calc( 12 * 100% / 776 );
				padding-top : calc( 17 * var( --remBase ) );
				padding-bottom : calc( 13 * var( --remBase ) );
				&::before{
					height : calc( 20 * var( --remBase ) );
				}
			}
			p{
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 29 / 22 );
			}
		}
	}
}

/* --------------------------------------------
ELEMENTARY
--------------------------------------------- */
#elementary01{
	header{
		display : grid;
		h1{
			grid-column : 1;
			justify-self : center;
			font-weight : 700;
			color : #009df0;
		}
		picture{
			grid-row : 1/-1;
			grid-column : 2;
		}
		ul{
			grid-column : 1;
		}
		li{
			color : #009df0;
			&:not( :last-child )::after{
				content : "／";
			}
		}
	}
	> p{
		strong{
			font-weight : 700;
			color : #e83131;
		}
	}
	caption{
		text-align : left;
	}
	th{
		font-weight : 400;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( -29 * var( --remBase ) );
		header{
			grid-template-rows : 1fr auto auto 1fr;
			grid-template-columns : auto calc( 130 * var( --contentBase ) );
			justify-content : space-between;
			h1{
				grid-row : 2;
				font-size : calc( 19 * var( --remBase ) );
				line-height : calc( 29 / 19 );
			}
			picture{
				width : 100%;
				height : calc( 98 * var( --remBase ) );
			}
			img{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
			ul{
				grid-row : 3;
			}
			li{
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 6 * var( --remBase ) );
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.5;
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
			&:nth-of-type( 3 ){
				margin-top : calc( 11 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
		}
		table{
			margin-left : calc( 6 * var( --contentBase ) );
		}
		caption , th , td{
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 17 / 11 );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 19 * var( --remBase ) );
		header{
			grid-template-rows : auto 1fr;
			grid-template-columns : auto auto;
			column-gap : calc( 80 * var( --contentBase ) );
			justify-content : center;
			h1{
				grid-row : 1;
				font-size : calc( 60 * var( --remBase ) );
				line-height : calc( 91 / 60 );
			}
			img{
				height : calc( 170 * var( --remBase ) );
			}
			ul{
				grid-row : 2;
			}
			li{
				font-size : calc( 30 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> p{
			&:nth-of-type( 1 ){
				padding-left : 2em;
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 21 * var( --remBase ) );
				line-height : calc( 32 / 21 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 35 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
			&:nth-of-type( 3 ){
				padding-left : 1em;
				margin-top : calc( 14 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		table{
			margin-top : calc( 10 * var( --remBase ) );
			margin-left : calc( 14 * var( --contentBase ) );
		}
		caption , th , td{
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.5;
		}
	}
}

/* --------------------------------------------
SPECIAL COURSE LP
--------------------------------------------- */
#specialCourses{
	@media screen and ( width <= 768px ){
		padding-top : calc( 20 * var( --remBase ) );
		.title{
			display : block;
			height : calc( 29 * var( --remBase ) );
			margin-inline : auto;
			text-align : center;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 37 * var( --remBase ) );
		.title{
			width : 100%;
			height : auto;
		}
	}
}
#specialCourse01{
	.box{
		display : grid;
		align-items : start;
		background-image : url( "../images/lp/special-course/arrow.avif" );
		background-repeat : no-repeat;
		p:nth-of-type( 1 ){
			font-weight : 700;
			color : var( --blue02 );
			text-align : center;
			em{
				background : linear-gradient( transparent 40% , #f3f707 80% );
			}
		}
		p:nth-of-type( 2 ){
			img{
				background : linear-gradient( transparent 40% , #f3f707 80% );
			}
		}
	}
	@media screen and ( width <= 768px ){
		.box{
			grid-template-rows : calc( 23 * var( --remBase ) ) auto calc( 60 * var( --remBase ) ) auto 1fr;
			grid-template-columns : 1fr auto;
			margin-top : calc( 8 * var( --remBase ) );
			background-position : calc( 48 * var( --remBase ) ) calc( 5 * var( --remBase ) );
			background-size : auto calc( 105 * var( --remBase ) );
			p:nth-of-type( 1 ){
				z-index : 1;
				grid-row : 1/3;
				grid-column : 1/-1;
				justify-self : start;
				padding-left : calc( 20 * var( --contentBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
			picture{
				grid-row : 2/5;
				grid-column : 2;
				img{
					height : calc( 88 * var( --remBase ) );
				}
			}
			p:nth-of-type( 2 ){
				grid-row : 4/6;
				grid-column : 1/-1;
				text-align : center;
				img{
					height : calc( 32 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 39 * var( --remBase ) );
		.box{
			grid-template-rows : auto calc( 120 * var( --remBase ) ) auto auto;
			grid-template-columns : 1fr auto;
			padding-inline : calc( 40 * var( --contentBase ) );
			margin-top : calc( 27 * var( --remBase ) );
			background-position : calc( 170 * var( --remBase ) ) calc( 35 * var( --remBase ) );
			background-size : auto calc( 225 * var( --remBase ) );
			p:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 1;
				font-size : calc( 25 * var( --remBase ) );
				line-height : 1.52;
			}
			picture{
				grid-row : 1/4;
				grid-column : 2;
				img{
					height : calc( 260 * var( --remBase ) );
				}
			}
			p:nth-of-type( 2 ){
				grid-row : 3/5;
				grid-column : 1/-1;
				img{
					height : calc( 68 * var( --remBase ) );
				}
			}
		}
	}
}

/* --------------------------------------------
KAWAI ONEF OR SCHOOL
--------------------------------------------- */
#kawaioneforschools{
	dl{
		font-weight : 700;
	}
	dt{
		text-align : center;
	}
	dd{
		em{
			background : linear-gradient( transparent 40% , #f3f7077a 80% );
		}
	}
	@media screen and ( width <= 768px ){
		dl{
			margin-top : calc( 12 * var( --remBase ) );
		}
		dt{
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.4;
		}
		dd{
			padding-inline : 1em;
			margin-top : calc( 21 * var( --remBase ) );
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.4;
		}
	}
	@media print , screen and ( width > 768px ){
		dl{
			width : calc( 874 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 22 * var( --remBase ) );
		}
		dt{
			font-size : calc( 30 * var( --remBase ) );
			line-height : 1.4;
		}
		dd{
			margin-top : calc( 10 * var( --remBase ) );
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.4;
		}
	}
}

/* --------------------------------------------
STUDY ABROAD
--------------------------------------------- */
#studyabroads{
	overflow-x : clip;
	h1{
		position : relative;
		z-index : 1;
		&::before{
			position : absolute;
			inset : 0 calc( 50% - 50vw );
			z-index : -1;
			height : 100%;
			content : "";
			background : url( "../images/studyabroad/bg.avif" ) center / cover no-repeat;
		}
	}
	.ledes{
		p + p{
			margin-top : 1lh;
		}
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( -39 * var( --remBase ) );
		h1{
			padding-inline : calc( 10 * var( --contentBase ) );
		}
		.ledes{
			padding-inline : calc( 10 * var( --contentBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			p{
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.4;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( -37 * var( --remBase ) );
		.ledes{
			width : calc( 788 * var( --contentBase ) );
			margin-inline : auto;
			margin-top : calc( 16 * var( --remBase ) );
			p{
				font-size : calc( 17 * var( --remBase ) );
				line-height : 1.4;
			}
		}
	}
}

/* --------------------------------------------
EIKEN
--------------------------------------------- */
#eikens{
	h1{
		display : grid;
		grid-template-columns : auto 1fr;
		align-content : center;
		background : url( "../images/eiken/bg.avif" ) left top / cover no-repeat;
		img{
			&:nth-of-type( 1 ){
				grid-row : 1/-1;
				grid-column : 1;
				align-self : center;
			}
			&:nth-of-type( 2 ){
				grid-row : 1;
				grid-column : 2;
				justify-self : center;
				height : 100%;
			}
		}
		> span{
			display : block;
			grid-row : 2;
			grid-column : 2;
			> span{
				display : block;
				font-weight : 700;
				color : #2f2e2e;
				text-align : center;
			}
		}
	}
	.notes01{
		p{
			position : relative;
			padding-left : 1em;
			em{
				background-image : linear-gradient( to bottom , transparent , transparent calc( ( 1lh - 1em ) / 2 ) , #69fa99 calc( ( 1lh - 1em ) / 2 ) , #69fa99 calc( ( 1lh - 1em ) / 2 + 1em ) , transparent calc( ( 1lh - 1em ) / 2 + 1em ) , transparent );
			}
			&::before{
				position : absolute;
				top : 0;
				left : 0;
			}
		}
	}
	.caution{
		font-weight : 400;
		color : #ff4040;
		strong{
			font-weight : 700;
		}
	}
	.info{
		color : #2f2e2e;
		> div{
			display : grid;
			grid-template-columns : auto 1fr;
			align-items : start;
			justify-content : start;
		}
		dt{
			grid-row : 1;
			grid-column : 1;
			font-weight : 700;
		}
		dd:nth-of-type( 1 ){
			grid-row : 1;
			grid-column : 2;
			justify-self : start;
			font-weight : 700;
		}
		dd:not( :first-of-type ){
			grid-column : 1/-1;
		}
	}
	@media screen and ( width <= 768px ){
		h1{
			grid-template-rows : calc( 40 * var( --remBase ) ) auto;
			height : calc( 128 * var( --remBase ) );
			padding-left : calc( 12 * var( --contentBase ) );
			img{
				&:nth-of-type( 1 ){
					height : calc( 100 * var( --remBase ) );
				}
			}
			> span{
				margin-top : calc( 7 * var( --remBase ) );
				span{
					font-size : calc( 15 * var( --remBase ) );
					line-height : 1.4;
				}
			}
		}
		.notes01{
			margin-top : calc( 7 * var( --remBase ) );
			p{
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
				+ p{
					margin-top : 1em;
				}
			}
		}
		.caution{
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 23 / 16 );
		}
		.notes01 + .caution{
			margin-top : calc( 10 * var( --remBase ) );
		}
		.info{
			margin-top : calc( 16 * var( --remBase ) );
			> div{
				+ div{
					margin-top : calc( 14 * var( --remBase ) );
				}
			}
			dt , dd:nth-of-type( 1 ){
				font-size : calc( 14 * var( --remBase ) );
				line-height : calc( 20 / 14 );
			}
			dd:not( :nth-of-type( 1 ) ){
				padding-left : .5em;
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		h1{
			grid-template-rows : calc( 118 * var( --remBase ) ) auto;
			height : calc( 260 * var( --remBase ) );
			padding-left : calc( 52 * var( --contentBase ) );
			img{
				&:nth-of-type( 1 ){
					height : calc( 227 * var( --remBase ) );
				}
			}
			> span{
				span{
					font-size : calc( 43 * var( --remBase ) );
					line-height : calc( 60 / 43 );
				}
			}
		}
		.notes01{
			margin-top : calc( 36 * var( --remBase ) );
			p{
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 34 / 22 );
			}
		}
		.caution{
			font-size : calc( 25 * var( --remBase ) );
			line-height : 1.4;
		}
		.notes01 + .caution{
			margin-top : calc( 17 * var( --remBase ) );
			margin-left : 1em;
		}
		.info{
			padding-left : calc( 103 * var( --contentBase ) );
			margin-top : calc( 67 * var( --remBase ) );
			> div{
				row-gap : calc( 12 * var( --remBase ) );
				+ div{
					margin-top : calc( 17 * var( --remBase ) );
				}
			}
			dt , dd:nth-of-type( 1 ){
				font-size : calc( 25 * var( --remBase ) );
				line-height : 1.4;
			}
			dd:not( :nth-of-type( 1 ) ){
				padding-left : 2em;
				font-size : calc( 22 * var( --remBase ) );
				line-height : calc( 36 / 22 );
			}
		}
	}
}

/* --------------------------------------------
EIKEN INFO
--------------------------------------------- */
#eikenInfo{
	h1{
		font-weight : 700;
		text-align : center;
		background : linear-gradient( 90deg , #41baae , #b6e8e3 );
		-webkit-background-clip : text;
		-webkit-text-fill-color : transparent;
	}
	h2{
		display : grid;
		align-content : center;
		align-items : center;
		justify-content : center;
		font-weight : 400;
		color : white;
		text-align : center;
	}
	li{
		&:nth-child( 1 ){
			h2{
				background-color : #1a2df3;
			}
		}
		&:nth-child( 2 ){
			h2{
				background-color : #1582c8;
			}
		}
		&:nth-child( 3 ){
			h2{
				background-color : #20ce88;
			}
		}
		&:nth-child( 4 ){
			h2{
				background-color : #39e21b;
			}
		}
	}
	em , strong{
		font-weight : 400;
		color : #e83131;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 20 * var( --remBase ) );
		h1{
			font-size : calc( 22 * var( --remBase ) );
			line-height : calc( 30 / 22 );
		}
		> ol{
			margin-top : calc( 13 * var( --remBase ) );
			> li{
				+ li{
					margin-top : calc( 36 * var( --remBase ) );
				}
			}
		}
		h2{
			width : calc( 144 * var( --contentBase ) );
			padding-top : calc( 24 * var( --remBase ) );
			padding-bottom : calc( 48 * var( --remBase ) );
			margin-inline : auto;
			clip-path : polygon( 0 0 , 100% 0 , 100% calc( 100% - 24 * var( --remBase ) ) , 50% 100% , 0 calc( 100% - 24 * var( --remBase ) ) );
			font-size : calc( 14 * var( --remBase ) );
			span{
				margin-top : calc( 15 * var( --remBase ) );
				font-size : calc( 10 * var( --remBase ) );
			}
		}
		dl{
			padding-inline : calc( 20 * var( --contentBase ) );
			padding-top : calc( 5 * var( --remBase ) );
		}
		dt , dd{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.4;
		}
		picture{
			margin-block : calc( 14 * var( --remBase ) );
			text-align : center;
		}
		img{
			height : calc( 100 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		h1{
			font-size : calc( 72 * var( --remBase ) );
			line-height : calc( 95 / 72 );
		}
		> ol{
			margin-top : calc( 14 * var( --remBase ) );
			> li + li{
				margin-top : calc( 52 * var( --remBase ) );
			}
			> li{
				display : grid;
				grid-template-columns : calc( 244 * var( --contentBase ) ) 1fr;
				column-gap : calc( 60 * var( --contentBase ) );
			}
		}
		h2{
			padding-bottom : calc( 30 * var( --remBase ) );
			clip-path : polygon( 0 0 , 100% 0 , 100% calc( 100% - 50 * var( --remBase ) ) , 50% 100% , 0 calc( 100% - 50 * var( --remBase ) ) );
			font-size : calc( 27 * var( --remBase ) );
			span{
				margin-top : calc( 33 * var( --remBase ) );
				font-size : calc( 19 * var( --remBase ) );
			}
		}
		dl{
			padding-block : calc( 25 * var( --remBase ) );
		}
		dt , dd{
			font-size : calc( 15 * var( --remBase ) );
			line-height : 1.4;
		}
		picture{
			margin-block : calc( 21 * var( --remBase ) );
		}
		img{
			height : calc( 180 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#eikenInfo h1{
		opacity : 0;
		translate : 0 100%;
		animation : titleIn .3s linear 1s forwards;
	}
}
@keyframes titleIn{
	to{
		opacity : 1;
		translate : 0 0;
	}
}

/* --------------------------------------------
TUTORS
--------------------------------------------- */
#tutors{
	header{
		display : grid;
		grid-template-columns : 1fr auto;
		h1{
			align-self : center;
			font-weight : 700;
			color : #009df0;
			text-align : center;
		}
	}
	> ul{
		&:nth-of-type( 1 ){
			font-weight : 700;
		}
	}
	p{
		strong{
			color : #8b0000;
		}
	}
	h2{
		font-weight : 700;
	}
	@media screen and ( width <= 768px ){
		header{
			img{
				height : calc( 87 * var( --remBase ) );
			}
			h1{
				font-size : calc( 27 * var( --remBase ) );
			}
		}
		> p{
			&:nth-of-type( 1 ){
				margin-top : calc( 10 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
			&:nth-of-type( 3 ){
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 17 / 11 );
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				padding-left : 1em;
				margin-top : calc( 27 * var( --remBase ) );
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.5;
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		header{
			img{
				height : calc( 190 * var( --remBase ) );
			}
			h1{
				font-size : calc( 60 * var( --remBase ) );
			}
		}
		> p{
			&:nth-of-type( 1 ){
				padding-left : 1em;
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 24 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
			&:nth-of-type( 3 ){
				margin-top : calc( 62 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
				text-align : center;
			}
		}
		> ul{
			&:nth-of-type( 1 ){
				padding-left : 1em;
				margin-top : calc( 35 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( 26 * var( --remBase ) );
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
		}
	}
}

/* --------------------------------------------
TEST
--------------------------------------------- */
#test01{
	p{
		&:nth-of-type( 1 ){
			em{
				background-color : #f3e598;
			}
		}
		&:nth-of-type( 3 ){
			display : grid;
			grid-auto-flow : column;
			span{
				color : #e83131;
			}
		}
		&:nth-of-type( 4 ){
			text-align : center;
		}
		&:nth-of-type( 5 ) , &:nth-of-type( 6 ) , &:nth-of-type( 7 ){
			em{
				background : linear-gradient( transparent 50% , color-mix( in srgb , #f3f707 48% , transparent ) 50% );
			}
		}
	}
	> ul{
		display : flex;
		flex-wrap : wrap;
		align-items : center;
		justify-content : center;
		a{
			display : block;
		}
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 20 * var( --remBase ) );
		p{
			&:nth-of-type( 1 ){
				font-size : calc( 10 * var( --remBase ) );
				line-height : 1.8;
				em:nth-of-type( 1 ){
					font-size : calc( 12 * var( --remBase ) );
					line-height : calc( 18 / 12 );
				}
			}
			&:nth-of-type( 2 ){
				padding-inline : calc( 10 * var( --contentBase ) );
				font-size : calc( 10 * var( --remBase ) );
				line-height : 2.1;
			}
			&:nth-of-type( 3 ){
				align-items : start;
				justify-content : space-between;
				padding-inline : calc( 10 * var( --contentBase ) );
				margin-top : calc( 13 * var( --remBase ) );
				span{
					font-size : calc( 12 * var( --remBase ) );
					line-height : 1.5;
				}
				img{
					height : calc( 30 * var( --remBase ) );
				}
			}
			&:nth-of-type( 4 ){
				margin-top : calc( 8 * var( --remBase ) );
				img{
					height : calc( 23 * var( --remBase ) );
				}
			}
			&:nth-of-type( 5 ){
				padding-inline : calc( 10 * var( --contentBase ) );
				margin-top : calc( 25 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 14 / 11 );
			}
			&:nth-of-type( 6 ){
				padding-inline : calc( 10 * var( --contentBase ) );
				margin-top : calc( 11 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 14 / 11 );
			}
			&:nth-of-type( 7 ){
				padding-inline : calc( 10 * var( --contentBase ) );
				margin-top : calc( 11 * var( --remBase ) );
				font-size : calc( 11 * var( --remBase ) );
				line-height : calc( 14 / 11 );
			}
		}
		> ul{
			row-gap : calc( 7 * var( --remBase ) );
			margin-inline : calc( -5 * var( --contentBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			li{
				&:nth-child( 1 ){
					img{
						height : calc( 36 * var( --remBase ) );
					}
				}
				&:nth-child( 2 ){
					img{
						height : calc( 55 * var( --remBase ) );
					}
				}
				&:nth-child( 3 ){
					img{
						height : calc( 33 * var( --remBase ) );
					}
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 48 * var( --remBase ) );
		p{
			&:nth-of-type( 1 ){
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 31 / 17 );
				em:nth-of-type( 1 ){
					font-size : calc( 20 * var( --remBase ) );
					line-height : calc( 31 / 17 );
				}
			}
			&:nth-of-type( 2 ){
				font-size : calc( 13 * var( --remBase ) );
				line-height : calc( 30 / 13 );
			}
			&:nth-of-type( 3 ){
				column-gap : calc( 13 * 100% / 932 );
				align-items : center;
				justify-content : center;
				margin-top : calc( 22 * var( --remBase ) );
				span{
					font-size : calc( 30 * var( --remBase ) );
					line-height : calc( 46 / 30 );
				}
				img{
					height : calc( 50 * var( --remBase ) );
				}
			}
			&:nth-of-type( 4 ){
				margin-top : calc( 47 * var( --remBase ) );
				img{
					height : calc( 49 * var( --remBase ) );
				}
			}
			&:nth-of-type( 5 ){
				margin-top : calc( 22 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.4;
			}
			&:nth-of-type( 6 ){
				margin-top : calc( 17 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.4;
			}
			&:nth-of-type( 7 ){
				margin-top : calc( 17 * var( --remBase ) );
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.4;
			}
		}
		> ul{
			row-gap : calc( 28 * var( --remBase ) );
			column-gap : calc( 80 * 100% / 932 );
			margin-top : calc( 13 * var( --remBase ) );
			li{
				&:nth-child( 1 ){
					img{
						height : calc( 72 * var( --remBase ) );
					}
				}
				&:nth-child( 2 ){
					img{
						height : calc( 110 * var( --remBase ) );
					}
				}
				&:nth-child( 3 ){
					img{
						height : calc( 71 * var( --remBase ) );
					}
				}
			}
		}
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact01{
	iframe{
		width : auto;
		aspect-ratio : 560/315;
	}
	@media screen and ( width <= 768px ){
		.box{
			column-gap : calc( 10 * var( --contentBase ) );
			column-gap : calc( 20 * 100% / 932 );
			picture{
				float : left;
				margin-right : calc( 10 * var( --remBase ) );
			}
			img{
				height : calc( 91 * var( --remBase ) );
			}
			p{
				font-size : calc( 9 * var( --remBase ) );
				line-height : calc( 15 / 9 );
				+ p{
					margin-top : calc( 10 * var( --remBase ) );
				}
			}
		}
		> ul{
			margin-top : calc( 9 * var( --remBase ) );
			iframe{
				height : calc( 157 * var( --remBase ) );
				margin-inline : auto;
			}
		}
		.contentParking{
			margin-top : calc( 10 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		.box{
			display : grid;
			grid-template-columns : auto 1fr;
			column-gap : calc( 20 * 100% / 932 );
			align-items : start;
			img{
				height : calc( 151 * var( --remBase ) );
			}
			p{
				font-size : calc( 16 * var( --remBase ) );
				line-height : calc( 26 / 16 );
				+ p{
					margin-top : calc( 8 * var( --remBase ) );
				}
			}
		}
		> ul{
			display : grid;
			grid-auto-flow : column;
			column-gap : calc( 24 * 100% / 932 );
			justify-content : center;
			margin-top : calc( 32 * var( --remBase ) );
			iframe{
				height : calc( 270 * var( --remBase ) );
			}
			img{
				height : calc( 270 * var( --remBase ) );
			}
		}
		.contentParking{
			margin-top : calc( 56 * var( --remBase ) );
		}
	}
}