/* CSS Document */

#tab {
	margin-top: 24px;
}

#detail {
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
	margin-bottom: 64px;
	& > * {
		grid-column: 2;
	}
}

#detail:not(:has(#detailPhoto)) {
	margin-top: 24px;
	@media (min-width: 1200px) {
		margin-top: 40px;
	}
}

#detail #detailSide {
	order: 2;
	margin-top: 64px;
	@media (min-width: 992px) {
		position: sticky;
		top: 0;
		grid-column: 3;
		justify-self: end;
		align-self: start;
		width: 280px;
		margin-top: 92px;
	}
}

#detail:has(#detailSide) {
	margin-bottom: 88px;
	@media (min-width: 1200px) {
		grid-template-columns: 1fr calc(var(--wrap) - 360px) 360px 1fr;
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr calc(var(--wrap) - 320px) 320px 1fr;
		& #detailHeader h2,
		& #detailHeader h2 + div {
			grid-column: 2 / 4;
		}
		& #detailPhoto {
			grid-column: 1 / 5;
		}
		& #detailArticle {
			grid-column: 2;
			& section {
				grid-template-columns: 0 100% 0;
			}
		}
		& .photos {
			width: 100%;
		}
		& .column:has(figure) {
			grid-template-columns: min(34vw, 280px) 1fr;
		}
		& .map {
			grid-template-columns: 1fr;
			grid-template-rows: min(75vw, 560px);
			& .mapText {
				grid-column: 1;
			}
		}
		& .mapBody {
			border-width: 1px 1px 0 1px;
		}
		& .mapList {
			border-width: 0 1px 1px 1px;
			max-height: min(50vw, 240px);
		}
	}
}

@media (min-width: 992px) {
	#detail:has(#detailTable) #detailSide {
		grid-row: 3 / 5;
		margin-top: 72px;
	}
}

#detailHeader {
	display: contents;
	& > * {
		grid-column: 2;
	}
	& h2 {
		font-weight: 700;
		font-size: 24px;
		color: var(--color-theme);
		letter-spacing: 0.05em;
		@media (min-width: 992px) {
			font-size: 32px;
		}
	}
	& h2 + div {
		grid-gap: 1em;
		margin-top: 32px;
		letter-spacing: 0.05em;
		& > time {
			justify-self: end;
			align-self: center;
			font-style: normal;
			font-size: 14px;
			letter-spacing: 0.05em;
			@media (min-width: 576px) {
				justify-self: unset;
			}
			&:before {
				content: "Date : ";
			}
		}
		& > i {
			align-self: center;
			display: grid;
			min-height: 24px;
			padding: 0 16px;
			align-items: center;
			font-size: 12px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			font-style: normal;
			letter-spacing: 0.05em;
			@media (min-width: 576px) {
				justify-self: start;
			}
		}
	}
	& .fr-view {
		width: 100%;
	}
}

#detail:has(#detailPhoto) #detailHeader {
	& h2 {
		grid-row: 2;
		justify-self: flex-start;
		margin-top: -1em;
		padding: 8px 16px;
		font-size: 24px;
		color: #fff;
		background: var(--color-theme);
		z-index: 1;
		@media (min-width: 992px) {
			grid-row: 1;
			align-self: end;
			margin: 1em 0 -1em;
			font-size: 32px;
		}
	}
	& h2 + div {
		margin-top: 48px;
		@media (min-width: 992px) {
			margin-top: 72px;
		}
	}
}

#detailTable {
	justify-self: center;
	width: min(100%, 720px);
	margin-top: 40px;
	background: rgba(var(--color-theme-rgb), 0.1);
	border-radius: 8px;
	color: var(--color-theme);
	overflow: hidden;
	@media (min-width: 992px) {
		margin-top: 72px;
	}
	& h3 {
		display: grid;
		align-items: center;
		margin-top: 16px;
		padding-bottom: 16px;
		font-weight: 700;
		font-size: 20px;
		letter-spacing: 0.2em;
		text-align: center;
		border-bottom: 1px solid rgba(var(--color-theme-rgb), 0.5);
		@media (min-width: 992px) {
			margin-top: 24px;
			padding-bottom: 16px;
		}
		& + div {
			padding: 16px 24px;
			font-size: 14px;
			@media (min-width: 992px) {
				padding: 24px 40px;
			}
		}
	}
	& ul {
		display: grid;
		grid-gap: 8px;
		& span {
			display: inherit;
			grid-gap: inherit;
		}
	}
	& a {
		display: grid;
		grid-template-columns: 16px 1fr;
		grid-gap: 8px;
		color: inherit;
		letter-spacing: 0.05em;
		text-decoration: none;
		&:before {
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14,9H2c-.55,0-1-.45-1-1s.45-1,1-1h12c.55,0,1,.45,1,1s-.45,1-1,1Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transform: translateY(0.35em);
		}
	}
	& menu {
		all: unset;
		display: grid;
		grid-template-columns: auto 14px;
		justify-content: center;
		align-items: center;
		grid-gap: 8px;
		min-height: 40px;
		font-size: 14px;
		cursor: pointer;
		&:after {
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M.17,1.45c0-.25.09-.5.28-.7.38-.4,1.02-.41,1.41-.02l4.95,4.79L12.14.37c.4-.38,1.03-.37,1.41.02.38.4.37,1.03-.02,1.41l-6.02,5.83c-.39.38-1,.38-1.39,0L.47,2.17c-.2-.2-.3-.46-.3-.72Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transform: translateY(0.35em);
		}
		&.open:after {
			transform: rotateX(180deg);
		}
	}
}

#detailPhoto {
	grid-column: 1 / 4;
	grid-row: 1;
	& img {
		height: min(66.67vw, 600px);
		object-fit: cover;
	}
}

#detailArticle {
	grid-column: 1 / 4;
	& section {
		display: grid;
		grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
		margin-top: 64px;
		scroll-margin-top: 24px;
		@media (min-width: 992px) {
			margin-top: 72px;
		}
		& > *:not(.photos) {
			grid-column: 2;
		}
		&:not(:has(.title)) {
			margin-top: 0;
		}
	}
}

#detailShare {
	order: 1;
	margin-top: 56px;
	@media (min-width: 992px) {
		margin-top: 72px;
	}
	& h3 {
		text-align: center;
		color: var(--color-theme);
		font-size: 20px;
		letter-spacing: 0.2em;
		& + div {
			margin-top: 24px;
		}
	}
	& ul {
		display: flex;
		grid-gap: 24px;
		justify-content: center;
		}
	& a {
		display: grid;
		aspect-ratio: 1;
		width: 48px;
		font-size: 0;
		border-radius: 100px;
		&[href*="instagram.com"] {
			background: #333333 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: %23ffffff;"><path d="M30.2,38.4h-12.41c-4.52,0-8.2-3.68-8.2-8.2v-12.41c0-4.52,3.68-8.2,8.2-8.2h12.41c4.52,0,8.2,3.68,8.2,8.2v12.41c0,4.52-3.68,8.2-8.2,8.2ZM17.8,12.07c-3.16,0-5.73,2.57-5.73,5.73v12.41c0,3.16,2.57,5.73,5.73,5.73h12.41c3.16,0,5.73-2.57,5.73-5.73v-12.41c0-3.16-2.57-5.73-5.73-5.73h-12.41ZM24,31.37c-4.07,0-7.37-3.31-7.37-7.37s3.31-7.37,7.37-7.37,7.37,3.31,7.37,7.37-3.31,7.37-7.37,7.37ZM24,19.09c-2.7,0-4.91,2.2-4.91,4.91s2.2,4.91,4.91,4.91,4.91-2.2,4.91-4.91-2.2-4.91-4.91-4.91ZM33.46,16.2c0,.98-.79,1.77-1.77,1.77s-1.77-.79-1.77-1.77.79-1.77,1.77-1.77,1.77.79,1.77,1.77Z"/></svg>') center center no-repeat;
			background-size: contain;
			}
		&[href*="facebook.com"] {
			background: #333333 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: %23ffffff;"><path d="M33.34,30.94l1.06-6.94h-6.66v-4.5c0-1.9.93-3.75,3.91-3.75h3.03v-5.91s-2.75-.47-5.37-.47c-5.48,0-9.07,3.32-9.07,9.34v5.29h-6.09v6.94h6.09v16.77c1.22.19,2.47.29,3.75.29s2.53-.1,3.75-.29v-16.77h5.59Z"/></svg>') center no-repeat;
			background-size: contain;
			}
		&[href*="youtube.com"] {
			background: #333333 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: %23ffffff;"><path d="M38.37,16.73c-.35-1.3-1.36-2.32-2.65-2.67-2.34-.63-11.72-.63-11.72-.63,0,0-9.38,0-11.72.63-1.29.35-2.31,1.37-2.65,2.67-.63,2.35-.63,7.27-.63,7.27,0,0,0,4.91.63,7.27.35,1.3,1.36,2.32,2.65,2.67,2.34.63,11.72.63,11.72.63,0,0,9.38,0,11.72-.63,1.29-.35,2.31-1.37,2.65-2.67.63-2.35.63-7.27.63-7.27,0,0,0-4.91-.63-7.27ZM20.93,28.46v-8.92l7.84,4.46-7.84,4.46Z"/></svg>') center no-repeat;
			background-size: contain;
			}
		&[href*="line.me"] {
			background: #333333 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: %23ffffff;"><path d="M39.04,22.88c0-6.73-6.75-12.2-15.04-12.2s-15.04,5.47-15.04,12.2c0,6.03,5.35,11.09,12.58,12.04.49.11,1.16.32,1.32.74.15.38.1.98.05,1.36,0,0-.18,1.06-.21,1.29-.07.38-.3,1.49,1.3.81,1.61-.68,8.66-5.1,11.82-8.73h0c2.18-2.39,3.22-4.82,3.22-7.51ZM18.69,26.47c0,.16-.13.29-.29.29h-4.23c-.16,0-.29-.13-.29-.29v-6.56c0-.16.13-.29.29-.29h1.07c.16,0,.29.13.29.29v5.21h2.87c.16,0,.29.13.29.29v1.07ZM21.24,26.47c0,.16-.13.29-.29.29h-1.07c-.16,0-.29-.13-.29-.29v-6.56c0-.16.13-.29.29-.29h1.07c.16,0,.29.13.29.29v6.56ZM28.5,26.47c0,.16-.13.29-.29.29h-1.06s-.05,0-.08-.01c0,0,0,0,0,0,0,0-.01,0-.02,0,0,0,0,0,0,0,0,0,0,0-.01,0s0,0-.01,0c0,0,0,0,0,0,0,0-.01,0-.02-.01,0,0,0,0,0,0-.03-.02-.05-.04-.07-.07l-3.01-4.06v3.9c0,.16-.13.29-.29.29h-1.07c-.16,0-.29-.13-.29-.29v-6.56c0-.16.13-.29.29-.29h1.06s0,0,0,0c0,0,.01,0,.02,0,0,0,.01,0,.02,0,0,0,0,0,.01,0,0,0,.01,0,.02,0,0,0,0,0,.01,0,0,0,.01,0,.02,0,0,0,0,0,0,0,0,0,.01,0,.02,0,0,0,0,0,0,0,0,0,.01,0,.02,0,0,0,0,0,0,0,0,0,.01,0,.02.01,0,0,0,0,0,0,0,0,.01,0,.02.01,0,0,0,0,0,0,0,0,.01.01.02.02,0,0,0,0,0,0,0,0,.02.02.02.03l3,4.06v-3.9c0-.16.13-.29.29-.29h1.07c.16,0,.29.13.29.29v6.56ZM34.32,20.98c0,.16-.13.29-.29.29h-2.87v1.11h2.87c.16,0,.29.13.29.29v1.07c0,.16-.13.29-.29.29h-2.87v1.11h2.87c.16,0,.29.13.29.29v1.07c0,.16-.13.29-.29.29h-4.22c-.16,0-.29-.13-.29-.29v-6.56c0-.16.13-.29.29-.29h4.22c.16,0,.29.13.29.29v1.07Z"/></svg>') center no-repeat;
			background-size: contain;
			}
		&[href*="x.com"] {
			background: #333333 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: %23ffffff;"><path d="M26.61,21.86l10.2-11.86h-2.42l-8.86,10.29-7.07-10.29h-8.16l10.7,15.57-10.7,12.43h2.42l9.35-10.87,7.47,10.87h8.16l-11.09-16.14s0,0,0,0ZM23.3,25.7l-1.08-1.55-8.62-12.33h3.71l6.96,9.95,1.08,1.55,9.05,12.94h-3.71l-7.38-10.56s0,0,0,0Z"/></svg>') center no-repeat;
			background-size: contain;
		}
	}
}

#recommend {
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
	grid-row-gap: 24px;
	margin: 64px 0 72px 0;
	overflow: hidden;
	@media (min-width: 992px) {
		grid-row-gap: 32px;
		margin: 72px 0 88px 0;
	}
	& > * {
		grid-column: 2;
	}
	& h2 {
		display: grid;
		grid-template-columns: 32px auto;
		justify-self: center;
		align-items: center;
		grid-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 24px;
		letter-spacing: 0.08em;
		@media (min-width: 1200px) {
			margin-left: 0;
		}
		&:before {
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M.78,6.92c5.89-.8,10.85-.66,15.88,1.49.81.34,1.34,1.13,1.34,2.01v22.82c0,.37-.38.6-.71.45-5.17-2.38-10.24-2.6-16.26-1.8C.48,31.96,0,31.55,0,31V7.82c0-.45.34-.84.78-.9Z"/><path d="M39.22,6.92c-5.89-.8-10.85-.66-15.88,1.49-.81.34-1.34,1.13-1.34,2.01v22.82c0,.37.38.6.71.45,5.17-2.38,10.24-2.6,16.26-1.8.54.07,1.03-.34,1.03-.89V7.82c0-.45-.34-.84-.78-.9Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& h2 + div {
		display: grid;
		grid-gap: 16px 24px;
		@media (min-width: 576px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: 992px) {
			grid-gap: 20px 40px;
		}
	}
	& dl {
		position: relative;
		display: grid;
		grid-gap: 8px;
		&:nth-child(n+2) {
			display: none;
		}
		&:not(:has(img)):before {
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			background: var(--dummy);
			background-size: 70% auto;
			border-radius: 8px;
			transition: opacity 0.2s ease-out;
		}
		&:has(a):hover:before,
		&:has(a):hover img {
			opacity: 0.8;
		}
	}
	& dt {
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.05em;
	}
	& dd {
		letter-spacing: 0.05em;
		&:has(img) {
			order: -1;
		}
		&:has(a) {
			display: contents;
		}
		& img {
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			border-radius: 4px;
			transition: opacity 0.2s ease-out;
		}
		& a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& .slide {
		grid-column: 1 / 4;
		justify-self: center;
		width: min(var(--wrap-fit), 1080px);
	}
	& .slick-slider {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 24px;
	}
	& .slick-slider:before {
		content: "";
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: 1 / 0.667;
/*		
		@media (min-width: 576px) {
			width: calc(50% - 16px);
		}
		@media (min-width: 768px) {
			width: calc(33.33% - 16px);
		}
		@media (min-width: 1200px) {
			width: calc(25% - 16px);
		}
*/
	}
		@media (min-width: 576px) {
			& .slick-slider:before {
				width: calc(50% - 16px);
			}
		}
		@media (min-width: 768px) {
			& .slick-slider:before {
				width: calc(33.33% - 16px);
			}
		}
		@media (min-width: 1200px) {
			& .slick-slider:before {
				width: calc(25% - 16px);
			}
		}
	
	& .slick-list {
		grid-column: 2;
		grid-row: 1 / 3;
		margin: 0 -12px;
		overflow: visible;
		@media (min-width: 1200px) {
			overflow: hidden;
		}
		&:only-child .slick-track {
			margin: 0;
		}
	}
	& .slick-slide {
		margin: 0 12px;
	}
	& .slick-arrow {
		all: unset;
		position: relative;
		align-self: center;
		aspect-ratio: 1;
		width: 40px;
		background: #fff;
		border: 2px solid currentColor;
		border-radius: 100%;
		color: var(--color-theme);
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M1.45,13.83c-.25,0-.5-.09-.7-.28-.4-.38-.41-1.02-.02-1.41l4.79-4.95L.37,1.86C-.02,1.47,0,.83.39.45c.4-.38,1.03-.37,1.41.02l5.83,6.02c.38.39.38,1,0,1.39l-5.47,5.65c-.2.2-.46.3-.72.3Z"/></svg>') center no-repeat;
			-webkit-mask-size: 8px;
		}
	}
	& .slick-prev:before {
		transform: scale(-1, 1);
	}
}


.title {
	justify-self: flex-start;
	position: relative;
	padding-bottom: 8px;
	color: var(--color-theme);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.08em;
	@media (min-width: 992px) {
		font-size: 32px;
		margin-left: 24px;
		padding-bottom: 16px;
	}
	@media (min-width: 1200px) {
		margin-left: 0;
	}
	&:before {
		content: "";
		position: absolute;
		right: 100%;
		bottom: 0;
		width: 100vw;
		height: 2px;
		background: currentColor;
	}
	&:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
	}
}


.photos {
	grid-column: 1 / 4;
	margin: 40px 0 0 0;
	overflow: hidden;
	& img {
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
		border-radius: 8px;
	}
}

.photoSlide {
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
	grid-gap: 16px 0;
	&:not(.slick-initialized){
		display: grid;
	}
	&:not(.slick-initialized) li{
		grid-column: 1;
		grid-row: 1;
	}
	& li {
		position: relative;
		&:after {
			content: attr(data-caption);
			display: block;
			margin-top: 8px;
			text-align: center;
			@media (min-width: 992px) {
				margin: 24px 0 16px;
			}
		}
	}
	& .slick-list {
		grid-column: 1 / 4;
		grid-row: 1;
		justify-self: center;
		width: min(100%, 960px);
		overflow: visible;
	}
	& .slick-slide {
		margin: 0 18px;
		@media (min-width: 576px) {
			margin: 0 24px;
		}
		@media (min-width: 992px) {
			margin: 0 32px;
		}
	}
	& .slick-arrow {
		all: unset;
		position: relative;
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: 1;
		align-self: center;
		width: 40px;
		background: #fff;
		border: 2px solid currentColor;
		border-radius: 100%;
		box-sizing: border-box;
		color: var(--color-theme);
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M1.45,13.83c-.25,0-.5-.09-.7-.28-.4-.38-.41-1.02-.02-1.41l4.79-4.95L.37,1.86C-.02,1.47,0,.83.39.45c.4-.38,1.03-.37,1.41.02l5.83,6.02c.38.39.38,1,0,1.39l-5.47,5.65c-.2.2-.46.3-.72.3Z"/></svg>') center no-repeat;
			-webkit-mask-size: 8px;
		}
	}
	& .slick-prev {
		transform: translateX(-12px) scale(-1, 1);
		@media (min-width: 922px) {
			transform: translateX(-50%) scale(-1, 1);
		}
	}
	& .slick-next {
		transform: translateX(12px);
		justify-self: end;
		@media (min-width: 922px) {
			transform: translateX(50%);
		}
	}
	& .slick-dots {
		grid-column: 2;
		grid-row: 2;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 16px 24px;
		z-index: 1;
		&:has(li:only-child) {
			visibility: hidden;
		}
		& li {
			aspect-ratio: 1;
			width: 8px;
			background: #fff;
			border: 1px solid var(--color-theme);
			border-radius: 100%;
			overflow: hidden;
		}
		& li.slick-active {
			background: var(--color-theme);
		}
		& button {
			all: unset;
			opacity: 0;
		}
	}
}

.text {
	margin-top: 24px;
	letter-spacing: 0.05em;
}

.links {
	margin-top: 64px;
	@media (min-width: 922px) {
		margin-top: 72px;
	}
	& ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px 24px;
		@media (min-width: 922px) {
			gap: 56px;
		}
	}
	& li {
		display: contents;
	}
	& a {
		display: grid;
		grid-template-columns: 1fr 14px;
		gap: 8px;
		align-items: center;
		width: min(100%, 280px);
		min-height: 48px;
		padding: 4px 16px 4px 24px;
		border-radius: 32px;
		border: 2px solid var(--color-theme);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:after {
			grid-column: 2;
			grid-row: 1;
			content: "";
			aspect-ratio: 1;
		}
		&:after {
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M1.45,13.83c-.25,0-.5-.09-.7-.28-.4-.38-.41-1.02-.02-1.41l4.79-4.95L.37,1.86C-.02,1.47,0,.83.39.45c.4-.38,1.03-.37,1.41.02l5.83,6.02c.38.39.38,1,0,1.39l-5.47,5.65c-.2.2-.46.3-.72.3Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

.documents {
	justify-self: start;
	margin-top: 64px;
	@media (min-width: 922px) {
		margin-top: 72px;
	}
	& h4 {
		position: relative;
		padding-left: 1em;
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.08em;
		color: var(--color-theme);
		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 1em;
			background: var(--color-theme);
		}
		& + div {
			margin-top: 8px;
		}
	}
	& ul {
		display: grid;
		grid-gap: 8px;
	}
	& li {
		display: contents;
	}
	& a {
		display: grid;
		grid-template-columns: auto 20px;
		justify-content: flex-start;
		align-items: center;
		grid-gap: 16px;
		min-height: 32px;
		padding: 4px 16px;
		color: inherit;
		letter-spacing: 0.05em;
		text-decoration: none;
		&:after {
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18,19H2c-.55,0-1-.45-1-1v-5c0-.55.45-1,1-1s1,.45,1,1v4h14v-4c0-.55.45-1,1-1s1,.45,1,1v5c0,.55-.45,1-1,1ZM14.69,7.27c-.4-.38-1.04-.36-1.41.04l-2.27,2.41V3c0-.55-.45-1-1-1s-1,.45-1,1v6.72l-2.27-2.41c-.38-.4-1.01-.42-1.41-.04s-.42,1.01-.04,1.41l4,4.24c.19.2.45.31.73.31s.54-.11.73-.31l4-4.24c.38-.4.36-1.03-.04-1.41Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

.movie {
	justify-self: center;
	width: min(100%, 720px);
	margin-top: 32px;
	& iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
	& .fr-view {
		margin-top: 16px;
		letter-spacing: 0.05em;
	}
}

.articles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 40px 24px;
	margin-top: 24px;
	@media (min-width: 992px) {
		grid-gap: 40px 32px;
	}
}

.articles:has(dl:nth-child(n+3)) {
	@media (min-width: 992px) {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 64px;
	}
}

.articles dl {
	position: relative;
	display: grid;
	grid-gap: 8px;
	grid-template-rows: auto auto 1fr;
}

.articles dl:not(:has(img)) {
	grid-template-rows: auto 1fr;
}

.articles dt {
	font-weight: 700;
	font-size: min(3.5vw, 18px);
	letter-spacing: 0.05em;
}

.articles dd {
	font-size: min(3vw, 16px);
	letter-spacing: 0.05em;
}

.articles dd:has(img) {
	order: -1;
}

.articles dd:has(a) {
	display: flex;
	justify-self: center;
	margin-top: 8px;
}

.articles img {
	aspect-ratio: 1 / 0.667;
	object-fit: cover;
	border-radius: 4px;
	transition: opacity 0.2s ease-out;
}

.articles a {
	display: grid;
	grid-template-columns: 1fr 14px;
	align-items: center;
	min-width: min(100%, 200px);
	min-height: 40px;
	padding: 4px 16px;
	border-radius: 20px;
	border: 2px solid var(--color-theme);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
}

.articles a:after {
	content: "";
	aspect-ratio: 1;
	background: var(--color-theme);
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M1.45,13.83c-.25,0-.5-.09-.7-.28-.4-.38-.41-1.02-.02-1.41l4.79-4.95L.37,1.86C-.02,1.47,0,.83.39.45c.4-.38,1.03-.37,1.41.02l5.83,6.02c.38.39.38,1,0,1.39l-5.47,5.65c-.2.2-.46.3-.72.3Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
	transform: translateX(8px);
}

.column {
	position: relative;
	display: grid;
	grid-template-rows: 48px auto;
	margin-top: 72px;
	border-radius: 4px;
	@media (min-width: 576px) {
		grid-template-rows: 48px auto 1fr;
	}
	&:has(figure) {
		@media (min-width: 576px) {
			grid-template-columns: 1fr 1.15fr;
			& > * {
				grid-column: 2;
			}
			&:before{
				grid-column: 1 / 3;
			}
			&:after{
				grid-column: 1 / 3;
				grid-row: 2 / 5;
			}
			& h4 {
				grid-row: 2;
			}
			& h4 + div {
				grid-row: 3;
			}
			& h4 + div + div {
				grid-row: 4;
				justify-content: start;
			}
			& figure {
				grid-column: 1;
				grid-row: 2 / 5;
			}
		}
	}
	& > * {
		grid-column: 1;
		padding: 16px 16px 0;
		@media (min-width: 576px) {
			padding: 32px 32px 0;
		}
	}
	&:before {
		content: "Column";
		justify-self: center;
		padding: 10px 24px 0 24px;
		width: 200px;
		font-size: 24px;
		font-weight: 700;
		color: var(--color-theme);
		letter-spacing: 0.18em;
		text-align: center;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background: rgba(var(--color-theme-rgb), 0.1);
		@media (min-width: 992px) {
			font-size: 32px;
		}
	}
	&:after {
		content: "";
		grid-column: 1;
		grid-row: 2 / 6;
		border-radius: 8px;
		background: rgba(var(--color-theme-rgb), 0.1);
		z-index: -1;
	}
	& h4 {
		grid-row: 3;
		display: grid;
		grid-gap: 8px 24px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		letter-spacing: 0.08em;
	}
	& h4 + div{
		grid-row: 4;
	}
	& h4 + div + div {
		grid-row: 5;
		display: flex;
		justify-content: center;
		margin-top: 16px;
		& a {
			display: grid;
			grid-template-columns: 1fr 14px;
			grid-gap: 8px;
			align-items: center;
			width: min(100%, 280px);
			min-height: 48px;
			margin-bottom: 16px;
			padding: 4px 16px 4px 24px;
			border-radius: 32px;
			border: 2px solid var(--color-theme);
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			@media (min-width: 576px) {
				margin-bottom: 32px;
			}
			&:after {
				grid-column: 2;
				grid-row: 1;
				content: "";
				aspect-ratio: 1;
			}
			&:after {
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><path d="M1.45,13.83c-.25,0-.5-.09-.7-.28-.4-.38-.41-1.02-.02-1.41l4.79-4.95L.37,1.86C-.02,1.47,0,.83.39.45c.4-.38,1.03-.37,1.41.02l5.83,6.02c.38.39.38,1,0,1.39l-5.47,5.65c-.2.2-.46.3-.72.3Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
	}
	& figure {
		grid-row: 2;
		@media (min-width: 576px) {
			margin-bottom: 32px;
			padding-right: 0;
		}
		& img {
			aspect-ratio: 1 / 0.667;
			border-radius: 4px;
			object-fit: cover;
		}
	}
}

.fr-view {
	letter-spacing: 0.05em;
}

.comment {
	display: grid;
	grid-gap: 40px;
	margin-top: 40px;
	@media (min-width: 992px) {
		grid-gap: 64px;
		margin-top: 56px;
	}
	& dl {
		display: grid;
		grid-template-columns: 72px 1fr;
		grid-gap: 8px 40px;
		@media (min-width: 992px) {
			grid-template-columns: 120px 1fr;
			column-gap: 64px;
		}
		&:not(:has(img)):before {
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			aspect-ratio: 1;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style="fill: %23ffffff;"><path d="M40.64,36.73c6,0,10.88-4.86,10.88-10.86,0-6-4.86-10.88-10.86-10.88-6,0-10.88,4.86-10.88,10.86,0,6,4.86,10.88,10.86,10.88Z"/><path d="M40.66,43.99c-10.11,0-18.31,8.18-18.31,18.29v13.62c5.33,2.63,11.32,4.11,17.66,4.11,6.85,0,13.31-1.73,18.95-4.77v-12.93c0-10.11-8.18-18.31-18.29-18.31Z"/></svg>') center bottom no-repeat;
			border-radius: 100%;
		}
	}
	& dt {
		grid-row: 2;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& dd {
		&:has(img) {
			display: contents;
		}
		&:nth-of-type(1) {
			grid-row: 1 / 3;
			align-self: center;
			position: relative;
			padding: 16px;
			background: rgba(var(--color-theme-rgb), 0.1);
			border-radius: 8px;
			letter-spacing: 0.05em;
			@media (max-width: 575.98px) {
				font-size: 14px;
			}
			@media (min-width: 576px) {
				padding: 24px;
			}
			&:before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				aspect-ratio: 24 / 20;
				width: 24px;
				background: rgba(var(--color-theme-rgb), 0.1);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20"><polygon points="0 10 24 20 24 0 0 10"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transform: translate(-100%, -50%);
			}
		}
	}
	& img {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		aspect-ratio: 1;
		border-radius: 100%;
		object-fit: cover;
	}
	& .commentRight {
		grid-template-columns: 1fr 72px;
		@media (min-width: 576px) {
			grid-template-columns: 1fr 120px;
		}
		&:not(:has(img)):before {
			background: #cfcf82 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style="fill: %23ffffff;"><path d="M40.64,36.73c6,0,10.88-4.86,10.88-10.86,0-6-4.86-10.88-10.86-10.88-6,0-10.88,4.86-10.88,10.86,0,6,4.86,10.88,10.86,10.88Z"/><path d="M40.66,43.99c-10.11,0-18.31,8.18-18.31,18.29v13.62c5.33,2.63,11.32,4.11,17.66,4.11,6.85,0,13.31-1.73,18.95-4.77v-12.93c0-10.11-8.18-18.31-18.29-18.31Z"/></svg>') center bottom no-repeat;
		}
		&:before {
			grid-column: 2;
		}
		& dt {
			grid-column: 2;
		}
		& dd {
			grid-column: 1;
			&:nth-of-type(1) {
				background: #f1f2d8;
				&:before {
					left: 100%;
					background: #f1f2d8;
					transform: translate(0, -50%) scale(-1, 1);
				}
			}
		}
		& img {
			grid-column: 2;
		}
	}
}

.map {
	display: grid;
	grid-template-rows: min(75vh, 440px);
	padding-top: 16px;
	@media (min-width: 576px) {
		grid-template-rows: min(75vw, 640px);
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr min(30vw, 320px);
	}
}

.mapText {
	margin-top: 16px;
	@media (min-width: 992px) {
		grid-column: 1 / 3;
	}
}

.mapBody {
	position: relative;
	border: 0 solid #ccc;
	border-width: 1px 1px 0 1px;
	overflow: hidden;
	@media (min-width: 992px) {
		border-width: 1px 0 1px 1px;
	}
	& iframe,
	& [id^="gMap"] {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	& > img {
		position: absolute;
		width: 32px;
		left: 50%;
		bottom: 16px;
		transform: translate(-50%, 0);
		z-index: 1;
	}
}

.mapList {
	position: relative;
	max-height: min(50vw, 240px);
	overflow: hidden;
	border: 0 solid #ccc;
	border-width: 0 1px 1px 1px;
	@media (min-width: 992px) {
		border-width: 1px 1px 1px 0;
		max-height: 100%;
	}
	&:has(menu) {
		display: grid;
		grid-template-rows: auto 1fr auto;
	}
	& ul {
		counter-reset: count;
		padding: 0 16px;
	}

	&:has(menu) ul {
		background: #fff;
		overflow-y: auto;
	}

	& li {
		display: grid;
		grid-template-columns: 32px auto;
		align-content: center;
		grid-gap: 16px;
		padding: 16px 0;
		font-weight: 500;
		letter-spacing: 0.05em;
		cursor: pointer;
		&:nth-child(n+2) {
			border-top: 1px solid var(--color-border);
		}
		&:before {
			counter-increment: count;
			content: counter(count);
			display: grid;
			align-content: center;
			aspect-ratio: 1;
			padding-bottom: 2px;
			background: var(--color-theme);
			border-radius: 100%;
			color: #fff;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0;
			line-height: 1;
		}
	}

	& menu {
		all: unset;
		position: relative;
		height: 32px;
		margin: 0;
		padding: 0;
		background: var(--color-theme);
		color: #fff;
		font-size: 0;
		cursor: pointer;
		z-index: 1;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			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-miterlimit: 10; stroke-width: 2px;"><polyline points="2 11 8 5 14 11"/></svg>') center no-repeat;
			-webkit-mask-size: 16px;
		}
		&.mapListDown {
			transform: scale(1, -1);
		}
	}
}

.mapToggle {
	display: grid;
	grid-template-columns: 1fr 16px;
	justify-self: center;
	align-items: center;
	grid-gap: 8px;
	width: min(100%, 280px);
	min-height: 48px;
	margin-top: 64px;
	margin-bottom: 0;
	padding: 4px 16px 4px 24px;
	border-radius: 32px;
	background: var(--color-theme);
	border: 1px solid var(--color-theme);
	letter-spacing: 0.05em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	@media (min-width: 922px) {
		margin-top: 72px;
	}
	&:after {
		content: "+";
		font-size: 20px;
		line-height: 1;
	}
	&.open:after {
		content: "\30FC";
		font-size: 16px;
		transform: translateX(1px);
	}
}