/* CSS Document */

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	margin-bottom: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	&>*{
		grid-column: 2;
	}
	#detailHeader{
		grid-column: 1 / 4;
	}
	&.off{
		#sidebar{
			display: none;
		}
	}
	&:not(.off){
		@media (min-width: 992px) {
			&:has(#detailTable){
				#contents,
				#sidebar{
					grid-row: 3;
				}
			}
			#contents,
			#sidebar{
				grid-row: 2;
			}
			#contents{
				margin-right: clamp(352px, calc(384 / 1200 * 100vw), 384px);
			}
			#sidebar{
				align-self: start;
				position: sticky;
				top: 0;
				width: clamp(296px, calc(320 / 1200 * 100vw), 320px);
				margin-left: auto;
			}
		}
	}
}

#detailHeader{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:not(:has(figure)){
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		& h2{
			padding-bottom: 8px;
			border-bottom: 4px dotted currentColor;
		}
	}
	&:has(figure){
		grid-row-gap: clamp(32px, calc(64 / 1200 * 100vw), 64px);
		& h2{
			grid-row: 1;
			justify-self: start;
			align-self: end;
			display: grid;
			align-items: center;
			min-height: 2.5em;
			padding: 0.25em 0.75em;
			margin-bottom: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			background: rgba(0,0,0,0.7);
			color: #fff;
			z-index: 1;
		}
	}
	& h2{
		font-weight: 700;
		font-size: clamp(20px, calc(28 / 1200 * 100vw), 28px);
		letter-spacing: 0.05em;
	}
	& figure{
		grid-column: 1 / 4;
		grid-row: 1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			@media (min-width: 576px) {
				aspect-ratio: 2 / 1;
			}
			@media (min-width: 992px) {
				aspect-ratio: 3 / 1;
			}
		}
	}
}

#detailTable{
	border: 1px solid currentColor;
	& h3{
		margin: 0;
		padding: 0.5em;
		background: var(--color-theme);
		color: #fff;
		font-size: clamp(18px, calc(24 / 1200 * 100vw), 24px);
		text-align: center;
	}
	& h3+div{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& ul{
		display: grid;
		grid-row-gap: 0.5em;
		list-style: none;
		&>li:nth-child(n+6){
			display: none;
		}
	}
	& span{
		display: grid;
		grid-row-gap: inherit;
	}
	& a{
		display: grid;
		grid-template-columns: 1em 1fr;
		column-gap: 0.5em;
		color: inherit;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			transform: translateY(0.325em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polyline points="4 0 15 8 4 16"/></svg>') no-repeat center / 50%;
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: auto 1em;
		justify-content: center;
		align-items: center;
		grid-gap: 0.5em;
		padding: 0.5em;
		background: #e8f2eb;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><polyline points="2 5 8 11 14 5"/></svg>') no-repeat center / contain;
		}
		&.open:after{
			transform: scale(1, -1);
		}
	}
}

#contents{
	display: grid;
	grid-row-gap: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}

#ranking{
	padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	border: 2px solid var(--color-theme);
	counter-reset: count;
	& h4{
		font-weight: bold;
		font-size: 18px;
		letter-spacing: 0.05em;
	}
	h4+div{
		display: grid;
		grid-gap: 16px clamp(24px, calc(32 / 768 * 100vw), 32px);
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		@media (min-width: 576px) and (max-width: 991.98px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		&:before{
			counter-increment: count;
			content: counter(count);
			grid-column: 1;
			grid-row: 1;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 1.5em;
			background: var(--color-theme);
			color: #fff;
			font-family: din-condensed, sans-serif;
			text-align: center;
			pointer-events: none;
			z-index: 1;
		}
		&:nth-child(1):before{
			background: #DAB74F;
		}
		&:nth-child(2):before{
			background: #B9C3C9;
		}
		&:nth-child(3):before{
			background: #B3754E;
		}
	}
	& dt{
		align-self: center;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		height: calc(1.65em * 3);
		font-size: 14px;
		overflow: hidden;
		@media (min-width: 992px) {
			font-size: 12px;
		}
	}
	& dd{
		&:has(img){
			grid-column: 1;
			grid-row: 1;
			width: 120px;
			@media (min-width: 992px) {
				width: 96px;
			}
		}
		&:has(a){
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}







#pageTab{
	margin-bottom: 2em;
	}
	#pageTab ul{
		position: relative;
		z-index: 1;
		}
	#pageTab:before{
		content: none;
		}
	#pageTab a{
		position: relative;
		justify-content: center;
		color: inherit;
		text-align: center;
		}
		#pageTab a:before{
			content: none;
			}
		#pageTab a i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0.5em;
			}

.title{
	display: grid;
	grid-template-columns: 1.75em auto;
	column-gap: 1.5em;
	align-items: center;
	padding-bottom: 8px;
	border-bottom: 4px dotted currentColor;
	font-weight: 700;
	font-size: clamp(20px, calc(28 / 1200 * 100vw), 28px);
	font-family: fot-tsukuardgothic-std, var(--font);
	letter-spacing: 0.1em;
	&:before,
	&:after{
		content: "";
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 1;
		background: currentColor;
	}
	&:before{
		transform: translateX(50%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M4.59,12.08V13.3a12.84,12.84,0,0,1,5-.94,12.58,12.58,0,0,1,5.21,1V12.16a14.27,14.27,0,0,0-5.21-.92A14.52,14.52,0,0,0,4.59,12.08Zm0,4.18v1.21a12.89,12.89,0,0,1,5-.95,12.77,12.77,0,0,1,5.21,1V16.33a14.3,14.3,0,0,0-5.21-.93A14.3,14.3,0,0,0,4.58,16.26Zm0,4.17v1.22a12.55,12.55,0,0,1,5-1,12.61,12.61,0,0,1,5.21,1V20.49a14.52,14.52,0,0,0-5.21-.92A14.36,14.36,0,0,0,4.57,20.43Zm16.61.07v1.22a12.79,12.79,0,0,1,5.22-1,12.82,12.82,0,0,1,5,.94V20.42a14.42,14.42,0,0,0-5-.85A14.3,14.3,0,0,0,21.18,20.5Zm0-8.34v1.22a12.58,12.58,0,0,1,5.21-1,12.89,12.89,0,0,1,5,.94V12.09a14.36,14.36,0,0,0-5-.85A14.31,14.31,0,0,0,21.18,12.16Zm11.65-5A14.29,14.29,0,0,0,26.39,5.7a15,15,0,0,0-5.48,1l-.07,0c-.31.12-.6.26-.88.4a7.09,7.09,0,0,0-2,1.45,7.09,7.09,0,0,0-2-1.45,9.14,9.14,0,0,0-1-.44l-.08,0A15.12,15.12,0,0,0,9.61,5.7,14.29,14.29,0,0,0,3.17,7.11c-2,1-3.09,2.51-3.09,4.15V26.89a1.29,1.29,0,0,0,1.28,1.29H4.31a1.26,1.26,0,0,0,.51-.11,12.4,12.4,0,0,1,4.79-.89c3.3,0,5.93,1.1,6.78,2.3l.07.09a2,2,0,0,0,3.08,0l.07-.09c.85-1.2,3.48-2.3,6.78-2.3a12.42,12.42,0,0,1,4.8.89,1.26,1.26,0,0,0,.51.11h2.94a1.28,1.28,0,0,0,1.28-1.29V11.26C35.92,9.62,34.82,8.15,32.83,7.11ZM16.69,25.36c-.2-.13-.42-.25-.65-.37a12.87,12.87,0,0,0-3.82-1.21,17.14,17.14,0,0,0-2.61-.2,16.91,16.91,0,0,0-2.5.18A12.74,12.74,0,0,0,3.17,25c-.23.12-.45.24-.65.37V11.26c0-.75.78-1.54,2.08-2.14a12.25,12.25,0,0,1,5-1,12,12,0,0,1,5.21,1.08c1.18.59,1.87,1.34,1.87,2Zm16.79,0c-.2-.13-.42-.25-.65-.37a12.17,12.17,0,0,0-3.51-1.15,16.38,16.38,0,0,0-2.93-.26,16.14,16.14,0,0,0-2.81.24A12.41,12.41,0,0,0,20,25c-.23.12-.45.24-.65.37V11.26c0-.71.69-1.45,1.87-2a12,12,0,0,1,5.21-1.08,12.2,12.2,0,0,1,5.05,1c1.28.59,2,1.38,2,2.12Zm-12.3-9v1.22a12.74,12.74,0,0,1,5.21-1,12.84,12.84,0,0,1,5,.94V16.25a14.48,14.48,0,0,0-5-.85A14.3,14.3,0,0,0,21.18,16.33Z"/></svg>') no-repeat center / contain;
	}
	&:after{
		transform: translateY(-20%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M9.51,20,1.25,16.58a.91.91,0,0,0-.7,1.67l8.27,3.44a1.09,1.09,0,0,0,.35.07A.9.9,0,0,0,10,21.2.91.91,0,0,0,9.51,20ZM8.12,23.89,1.4,22.39A.9.9,0,0,0,1,24.15l6.72,1.5.2,0a.9.9,0,0,0,.19-1.78Zm3.44-7.43L5.75,12.75a.9.9,0,1,0-1,1.51L10.59,18a1,1,0,0,0,.48.14.9.9,0,0,0,.49-1.66ZM13.14,5.17a.9.9,0,1,0-1.43,1.1l4.18,5.47a.91.91,0,0,0,.72.35.9.9,0,0,0,.71-1.45Zm-5.64,2A.9.9,0,1,0,6.28,8.53l6.6,6.07a.93.93,0,0,0,.61.23.91.91,0,0,0,.66-.29.9.9,0,0,0-.05-1.27Zm17.31,0L22.74.63A.9.9,0,0,0,21,1.17l2.07,6.57a.89.89,0,0,0,.86.63.84.84,0,0,0,.27,0A.91.91,0,0,0,24.81,7.2ZM16.75.62A.89.89,0,0,0,15.54.23a.9.9,0,0,0-.39,1.22l4.13,8a.89.89,0,0,0,.8.48.86.86,0,0,0,.41-.1.91.91,0,0,0,.39-1.21Z"/></svg>') no-repeat center / contain;
	}
}

.photos{
	display: grid;
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	&>*{
		grid-column: 1;
		grid-row: 1;
	}
	& dl{
		display: grid;
		&:nth-child(n+2){
			display: none;
		}
		&>*{
			grid-column: 1;
			grid-row: 1;
		}
	}
	& dt{
		align-self: end;
		width: 100%;
		padding: 0.75em 1.5em;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		font-size: clamp(12px, calc(14 / 992 * 100vw), 14px);
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
	&.slick-slider{
		position: relative;
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		aspect-ratio: 1;
		width: clamp(32px, calc(40 / 992 * 100vw), 40px);
		background: var(--color);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="6 2 12 8 6 14"/></svg>') no-repeat center / contain;
		}
	}
	.slick-prev{
		left: 0;
		transform: translate(-50%, -50%);
		&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		right: 0;
		transform: translate(50%, -50%);
	}
}

.text{
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}

.movie{
	display: grid;
	grid-row-gap: 16px;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& iframe{
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.link{
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& a{
		display: grid;
		align-items: center;
		min-width: min(80%, 320px);
		min-height: 3em;
		padding: 0.5em 1.5em;
		background: var(--color-theme);
		border-radius: 1.5em;
		color: #fff;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: #e50012;
		}
	}
}

.links{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	grid-gap: 16px;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	@media (min-width: 768px) {
	}
	& a{
		display: grid;
		align-items: center;
		min-width: min(80%, 320px);
		min-height: 3em;
		padding: 0.5em 1.5em;
		background: var(--color-theme);
		border-radius: 1.5em;
		color: #fff;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: #e50012;
		}
	}
}

.documents{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& h4{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 1em;
		align-items: center;
		&:before,
		&:after{
			content: "";
			border-top: 1px solid currentColor;
		}
	}
	& h4+div{
		margin-top: 16px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		grid-gap: 16px;
	}
	& ul{
		display: contents;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1em 1fr;
		align-items: center;
		min-width: min(80%, 320px);
		min-height: 3em;
		padding: 0.5em 1.5em;
		background: #fff;
		border: 1px solid var(--color-theme);
		border-radius: 1.5em;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			transform: translateX(-0.5em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="8 1 8 10"/><polyline points="4 6 8 10 12 6"/><polyline points="1 10 1 15 15 15 15 10"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: #F7FCEB;
			color: inherit;
		}
	}
}

.articles{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 32px clamp(24px, calc(32 / 768 * 100vw), 32px);
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	@media (min-width: 576px) {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		&:has(img){
			grid-template-rows: auto auto 1fr;
		}
	}
	& dt{
		margin-top: 0.5em;
		font-weight: 700;
	}
	& dd{
		&:not(:has(img)){
			margin-top: 0.5em;
			font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
		}
		&:has(img){
			order: -1;
		}
		&:has(a){
			margin-top: 1em;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
		& a{
			display: grid;
			align-items: center;
			min-width: min(80%, 320px);
			min-height: 3em;
			padding: 0.5em 1.5em;
			background: var(--color-theme);
			border-radius: 1.5em;
			color: #fff;
			font-weight: 700;
			text-align: center;
			text-decoration: none;
			&:hover{
				background: #e50012;
			}
		}
	}
}

.map{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}

.mapBody{
	display: grid;
	margin-bottom: 16px;
	border: 2px solid var(--color-theme);
	@media (min-width: 992px) {
		.off &{
			position: relative;
			grid-template-columns: 1fr clamp(296px, calc(320 / 1200 * 100vw), 320px);
			[id^="gMapList"]{
				& ul{
					position: absolute;
					top: 0;
					right: 0;
					width: clamp(296px, calc(320 / 1200 * 100vw), 320px);
					height: 100%;
					max-height: unset;
					overflow-y: auto;
				}
			}
		}
	}
	[id^="gMap"]{
		&:not([id^="gMapList"]){
			aspect-ratio: 2 / 3;
			background: #f2f2f2;
			@media (min-width: 576px) {
				aspect-ratio: 1;
			}
			@media (min-width: 768px) {
				aspect-ratio: 3 / 2;
			}
		}
		& button{
			all: unset;
		}
	}
	[id^="gMapList"]{
		& ul{
			counter-reset: count;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
			align-items: start;
			grid-gap: 16px 24px;
			max-height: clamp(160px, calc(240 / 1200 * 100vw), 240px);
			padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			overflow-y: auto;
		}
		& li{
			display: grid;
			grid-template-columns: 2em 1fr;
			align-items: center;
			column-gap: 0.5em;
			cursor: pointer;
			&:before{
				counter-increment: count;
				content: counter(count);
				align-self: start;
				display: grid;
				align-items: center;
				aspect-ratio: 1;
				background: var(--color-theme);
				border-radius: 100%;
				color: #fff;
				text-align: center;
			}
			& a{
				color: inherit;
				text-decoration: none;
			}
		}
	}
}

.mapToggle{
	all: unset;
	box-sizing: border-box;
	justify-self: center;
	display: grid;
	grid-template-columns: 1fr 1em;
	align-items: center;
	column-gap: 0.5em;
	min-width: min(100%, 480px);
	min-height: 3em;
	padding: 0.5em 1.5em;
	background: var(--color-theme);
	border-radius: 1.5em;
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	&:after{
		content: "";
		aspect-ratio: 1;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="1 8 15 8"/><polyline points="8 1 8 15"/></svg>') no-repeat center / contain;
	}
	&:hover{
		background: #e50012;
		&:after{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="1 8 15 8"/></svg>');
		}
	}
}

.column{
	display: grid;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& h4{
		justify-self: start;
		display: grid;
		grid-template-columns: 1.5em 1fr;
		align-items: center;
		column-gap: 0.5em;
		padding: 0.5em 1em;
		background: var(--color-theme);
		border-radius: 4px 4px 0 0;
		color: #fff;
		font-weight: 700;
		font-family: fot-tsukuardgothic-std, var(--font);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path d="M5.55,11.32a1.13,1.13,0,0,1-.75-1.05,1.2,1.2,0,0,1,2.4,0,1.13,1.13,0,0,1-.75,1.05V20C7.83,18.32,12,12.93,12,9.13A5.7,5.7,0,0,0,8.4,3.9V0H3.6V3.9A5.7,5.7,0,0,0,0,9.13C0,12.93,4.17,18.32,5.55,20Z"/></svg>') no-repeat center / contain;

		}
	}
	& h4+div{
		display: grid;
		grid-gap: 16px 24px;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		border: 2px solid var(--color-theme);
		@media (min-width: 576px) {
			grid-template-rows: auto 1fr;
			&:has(h5+div+div){
				& figure{
					grid-row: 1 / 4;
				}
			}
			&:has(figure){
				grid-template-columns: auto 1fr;
				& figure{
					grid-column: 1;
					grid-row: 1 / 3;
					width: 320px;
				}
			}
		}
	}
	& h5{
		font-weight: bold;
		&:empty{
			display: none;
		}
	}
	& h5+div+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			align-items: center;
			min-width: min(80%, 320px);
			min-height: 3em;
			padding: 0.5em 1.5em;
			background: var(--color-theme);
			border-radius: 1.5em;
			color: #fff;
			font-weight: 700;
			text-align: center;
			text-decoration: none;
			&:hover{
				background: #e50012;
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}
	}
}