@charset "UTF-8";

/* --------------------------------------------
REASON
--------------------------------------------- */
#reason02{
	@media screen and ( width <= 768px ){
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 10 * var( --contentBase ) );
		align-items : center;
		justify-content : center;
		.box01{
			display : contents;
			.texts{
				display : contents;
			}
			p{
				grid-column : 1/-1;
				&:nth-of-type( 1 ){
					grid-row : 1;
					margin-bottom : calc( 11 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					grid-row : 3;
					grid-column : 1/-1;
					margin-top : calc( 11 * var( --remBase ) );
				}
				&:nth-of-type( 3 ){
					grid-row : 4;
					grid-column : 1/-1;
					margin-top : calc( 14 * var( --remBase ) );
				}
			}
			picture{
				grid-row : 2;
				grid-column : 2;
				justify-self : start;
				img{
					height : calc( 59 * var( --remBase ) );
				}
			}
		}
		.box02{
			display : contents;
			picture{
				grid-row : 2;
				grid-column : 1;
				justify-self : end;
				img{
					height : calc( 67 * var( --remBase ) );
				}
			}
			p{
				grid-row : 5;
				grid-column : 1/-1;
			}
		}
		.box03{
			display : grid;
			grid-template-columns : auto calc( 146 * var( --contentBase ) );
			grid-row : 6;
			grid-column : 1/-1;
			column-gap : calc( 10 * var( --contentBase ) );
			align-items : center;
			justify-content : center;
			margin-top : calc( 17 * var( --remBase ) );
			picture{
				grid-row : 1;
				grid-column : 1;
				justify-self : end;
				img{
					height : calc( 83 * var( --remBase ) );
				}
			}
			.texts{
				display : contents;
			}
			p:nth-of-type( 1 ){
				grid-row : 1;
				grid-column : 2;
				justify-self : start;
			}
			p + p{
				grid-column : 1/-1;
			}
			p:nth-of-type( 2 ){
				margin-top : calc( 17 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.box01{
			display : grid;
			grid-template-columns : 1fr auto;
			column-gap : calc( 20 * var( --contentBase ) );
			align-items : center;
			picture{
				grid-row : 1;
				grid-column : 2;
				img{
					height : calc( 192 * var( --remBase ) );
				}
			}
			.texts{
				grid-row : 1;
				grid-column : 1;
			}
			p + p{
				margin-top : 1lh;
			}
		}
		.box02{
			display : grid;
			grid-template-columns : calc( 450 * var( --contentBase ) ) auto;
			align-items : center;
			justify-content : space-between;
			picture{
				grid-row : 1;
				grid-column : 2;
				img{
					height : calc( 239 * var( --remBase ) );
				}
			}
			p{
				grid-row : 1;
				grid-column : 1;
			}
		}
		.box03{
			display : grid;
			grid-template-columns : auto 1fr;
			column-gap : calc( 20 * var( --contentBase ) );
			align-items : end;
			picture{
				grid-row : 1;
				grid-column : 1;
				img{
					height : calc( 229 * var( --remBase ) );
				}
			}
			.texts{
				grid-row : 1;
				grid-column : 2;
			}
			p + p{
				margin-top : 1em;
			}
		}
	}
}
#reason03{
	display : grid;
	align-items : center;
	@media screen and ( width <= 768px ){
		grid-template-columns : 1fr auto;
		img{
			height : calc( 43 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-columns : calc( 604 * var( --contentBase ) ) auto;
		img{
			height : calc( 153 * var( --remBase ) );
		}
	}
}
#reason04{
	display : grid;
	align-items : center;
	@media screen and ( width <= 768px ){
		grid-template-columns : auto 1fr;
		column-gap : calc( 10 * var( --contentBase ) );
		img{
			height : calc( 74 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		grid-template-columns : auto calc( 604 * var( --contentBase ) );
		column-gap : calc( 40 * var( --contentBase ) );
		justify-content : center;
		img{
			height : calc( 248 * var( --remBase ) );
		}
	}
}
#reason05{
	picture{
		&::after{
			display : block;
			width : auto;
			aspect-ratio : 513/131;
			margin-inline : auto;
			content : "";
			background : url( "../images/top/reason/bg05.avif" ) center top / contain no-repeat;
		}
	}
	.texts{
		p + p{
			margin-top : 1lh;
		}
	}
	@media screen and ( width <= 768px ){
		picture{
			text-align : center;
			img{
				height : calc( 40 * var( --remBase ) );
			}
			&::after{
				height : calc( 20 * var( --remBase ) );
				margin-top : calc( -8 * var( --remBase ) );
			}
		}
		.texts{
			padding-inline : calc( 10 * var( --contentBase ) );
			margin-top : calc( 16 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : 1fr auto;
		column-gap : calc( 20 * var( --contentBase ) );
		align-items : center;
		picture{
			grid-row : 1;
			grid-column : 2;
			&::after{
				height : calc( 40 * var( --remBase ) );
				margin-top : calc( -12 * var( --remBase ) );
			}
			img{
				height : calc( 72 * var( --remBase ) );
			}
		}
		.texts{
			grid-row : 1;
			grid-column : 1;
		}
	}
}

/* --------------------------------------------
LINKS01
--------------------------------------------- */
#links01{
	a{
		display : grid;
		grid-template-columns : auto 1fr;
		align-items : center;
		outline-style : solid;
		outline-color : #a0a09f;
		> span{
			font-family : "Noto Serif JP" , serif;
			font-weight : 700;
			color : #282626;
			> span{
				display : block;
			}
		}
	}
	picture{
		overflow : hidden;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 20 * var( --remBase ) );
		li + li{
			margin-top : calc( 20 * var( --remBase ) );
		}
		a{
			column-gap : calc( 10 * 100% / 286 );
			padding-block : calc( 8 * var( --remBase ) );
			padding-inline : calc( 7 * var( --contentBase ) );
			outline-width : calc( 2 * var( --remBase ) );
			outline-offset : calc( -2 * var( --remBase ) );
			> span{
				font-size : calc( 9 * var( --remBase ) );
				line-height : 2;
				> span + span{
					margin-top : 1em;
				}
				> span.is-pc{
					display : none;
				}
			}
			img{
				height : calc( 35 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 70 * var( --remBase ) );
		li + li{
			margin-top : calc( 18 * var( --remBase ) );
		}
		a{
			column-gap : calc( 17 * 100% / 944 );
			padding-block : calc( 24 * var( --remBase ) );
			padding-inline : calc( 17 * var( --contentBase ) );
			outline-width : calc( 4 * var( --remBase ) );
			outline-offset : calc( -4 * var( --remBase ) );
			> span{
				font-size : calc( 23 * var( --remBase ) );
				line-height : calc( 40 / 23 );
				> span + span{
					margin-top : 1em;
				}
			}
			img{
				height : calc( 228 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#links01 a:hover{
		img{
			scale : 1.1;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#links01 img{
		transition : scale var( --transitionBase );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news{
	overflow-x : clip;
	background : url( "../images/top/news/bg.avif" ) center / cover no-repeat;
	h2{
		display : grid;
		grid-auto-flow : column;
		align-content : center;
		align-items : baseline;
		justify-content : center;
		color : white;
		background-color : #003e7f;
	}
	h3{
		font-family : "Noto Serif JP" , serif;
		font-weight : 700;
		color : #081d45;
	}
	a{
		display : block;
	}
	time{
		display : block;
		color : #003e7f;
	}
	h4{
		font-weight : 400;
		text-decoration : underline;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 10 * var( --remBase ) );
		padding-bottom : calc( 10 * var( --remBase ) );
		h2{
			height : calc( 26 * var( --remBase ) );
			font-size : calc( 11 * var( --remBase ) );
			&::before{
				font-size : calc( 12 * var( --remBase ) );
			}
		}
		> ul{
			padding-inline : calc( 4 * var( --contentBase ) );
			padding-top : calc( 13 * var( --remBase ) );
			padding-bottom : calc( 13 * var( --remBase ) );
			background-color : color-mix( in sRGB , white 75% , transparent );
			> li + li{
				margin-top : calc( 16 * var( --remBase ) );
			}
		}
		h3{
			margin-bottom : calc( 6 * var( --remBase ) );
			font-size : calc( 12 * var( --remBase ) );
			line-height : calc( 19 / 12 );
		}
		li li + li{
			margin-top : calc( 10 * var( --remBase ) );
		}
		a{
			padding-inline : calc( 20 * 100% / 292 );
		}
		time{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.4;
		}
		h4{
			margin-top : calc( 6 * var( --remBase ) );
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.4;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 24 * var( --remBase ) );
		padding-bottom : calc( 10 * var( --remBase ) );
		h2{
			position : relative;
			z-index : 0;
			height : calc( 64 * var( --remBase ) );
			font-size : calc( 30 * var( --remBase ) );
			&::before{
				font-size : calc( 40 * var( --remBase ) );
			}
			&::after{
				position : absolute;
				top : 0;
				left : 50%;
				z-index : -1;
				display : block;
				width : calc( 1388 * var( --contentBase ) );
				height : 100%;
				content : "";
				background-color : #003e7f;
				translate : -50% 0;
			}
		}
		> ul{
			position : relative;
			z-index : 0;
			padding-top : calc( 30 * var( --remBase ) );
			padding-bottom : calc( 44 * var( --remBase ) );
			&::after{
				position : absolute;
				top : 0;
				left : 50%;
				z-index : -1;
				display : block;
				width : calc( 1388 * var( --contentBase ) );
				height : 100%;
				content : "";
				background-color : color-mix( in sRGB , white 75% , transparent );
				translate : -50% 0;
			}
			> li + li{
				margin-top : calc( 37 * var( --remBase ) );
			}
		}
		h3{
			margin-bottom : calc( 6 * var( --remBase ) );
			font-size : calc( 40 * var( --remBase ) );
			line-height : 1.6;
		}
		li li + li{
			margin-top : calc( 12 * var( --remBase ) );
		}
		time{
			font-size : calc( 30 * var( --remBase ) );
			line-height : 1.4;
		}
		h4{
			margin-left : 2em;
			font-size : calc( 16 * var( --remBase ) );
			line-height : calc( 23 / 16 );
		}
	}
}

/* --------------------------------------------
YOUTUBE
--------------------------------------------- */
#youtube{
	height : auto;
	aspect-ratio : 560/315;
	margin-inline : auto;
	@media screen and ( width <= 768px ){
		width : calc( 280 * var( --viewportBase ) );
		margin-top : calc( 46 * var( --remBase ) );
		margin-bottom : calc( 20 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		width : calc( 952 * var( --viewportBase ) );
		margin-top : calc( 18 * var( --remBase ) );
		margin-bottom : calc( 26 * var( --remBase ) );
	}
}

/* --------------------------------------------
LINKS02
--------------------------------------------- */
#links02{
	background-color : #f2e9e4;
	ul{
		a{
			display : grid;
			grid-template-columns : auto 1fr;
			align-items : center;
			font-weight : 400;
			color : #242323;
			background-color : white;
			outline : solid 1px #a0a09f;
			outline-offset : -1px;
		}
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 11 * var( --remBase ) );
		padding-bottom : calc( 10 * var( --remBase ) );
		ul{
			> li + li{
				margin-top : calc( 4 * var( --remBase ) );
			}
			a{
				grid-template-columns : 1fr auto;
				column-gap : calc( 10 * 100% / 280 );
				height : calc( 58 * var( --remBase ) );
				padding-inline : calc( 10 * var( --contentBase ) );
			}
			img{
				grid-column : 2;
				height : calc( 49 * var( --remBase ) );
			}
			span{
				grid-row : 1;
				grid-column : 1;
				font-size : calc( 12 * var( --remBase ) );
				text-align : center;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		display : grid;
		grid-template-columns : calc( 480 * var( --contentBase ) ) calc( 465 * var( --contentBase ) );
		align-items : center;
		justify-content : space-between;
		ul{
			li + li{
				margin-top : calc( 2 * var( --remBase ) );
			}
			a{
				height : calc( 110 * var( --remBase ) );
				padding-inline : calc( 15 * 100% / 480 );
				img{
					height : calc( 86 * var( --remBase ) );
				}
			}
			span{
				padding-left : 1em;
				font-size : calc( 25 * var( --remBase ) );
			}
		}
	}
}
@media ( hover : hover ){
	#links02 a:hover{
		background-color : rgb( 133 174 255 / .46 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#links02 a{
		transition : background-color var( --transitionBase );
	}
}

/* --------------------------------------------
PARKING
--------------------------------------------- */
#parking{
	&::before{
		display : block;
		content : "";
		background-color : #6cf;
	}
	h2{
		font-weight : 700;
		color : #324158;
		text-align : center;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 35 * var( --remBase ) );
		&::before{
			height : calc( 3 * var( --remBase ) );
			margin-bottom : calc( 10 * var( --remBase ) );
		}
		h2{
			font-size : calc( 10 * var( --remBase ) );
			line-height : 1.4;
		}
		ul , p{
			font-size : calc( 9 * var( --remBase ) );
			line-height : calc( 14 / 9 );
		}
		ul{
			margin-top : calc( 10 * var( --remBase ) );
		}
		p{
			margin-top : calc( 14 * var( --remBase ) );
		}
		picture{
			margin-top : calc( 20 * var( --remBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 35 * var( --remBase ) );
		&::before{
			height : calc( 4 * var( --remBase ) );
			margin-bottom : calc( 14 * var( --remBase ) );
		}
		h2 , li , p{
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
		ul , p{
			padding-inline : calc( 34 * var( --contentBase ) );
		}
		ul{
			margin-top : calc( 33 * var( --remBase ) );
		}
		p{
			margin-top : calc( 26 * var( --remBase ) );
		}
		picture{
			margin-top : calc( 68 * var( --remBase ) );
			text-align : center;
			img{
				height : calc( 619 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
ADDRESS
--------------------------------------------- */
#address{
	font-style : normal;
	p{
		text-align : right;
	}
	dl{
		display : grid;
		grid-auto-flow : column;
		align-items : center;
		justify-content : start;
		justify-content : end;
		color : #56eb25;
	}
	a{
		color : #56eb25;
		text-decoration : underline;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 10 * var( --remBase ) );
		margin-top : calc( 10 * var( --remBase ) );
		p , dl{
			font-size : calc( 11 * var( --remBase ) );
			line-height : calc( 17 / 11 );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 40 * var( --remBase ) );
		margin-top : calc( 61 * var( --remBase ) );
		p , dl{
			font-size : calc( 15 * var( --remBase ) );
			line-height : calc( 23 / 15 );
		}
	}
}