/* CSS Document */

#main{
	display: grid;
	align-content: start;
	margin-bottom: 80px;
	@media (min-width: 992px){
		margin-bottom: 120px;
	}
}

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
}

#detailHeader{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:not(:has(#detailPhoto)){
		margin-top: 24px;
	}
	& h2{
		grid-row: 2 / 4;
		align-self: end;
		padding: 16px 24px;
		background: #fff;
		border-radius: 4px;
		font-weight: 700;
		font-size: 24px;
		font-family: var(--font-min);
		filter: drop-shadow(4px 4px 0 var(--color-theme));
		z-index: 1;
		@media (min-width: 992px){
			padding: 32px 56px;
			font-size: 32px;
		}
	}
	#detailPhoto{
		grid-row: 1 / 3;
	}
}

#detailPhoto{
	grid-column: 1 / 4;
	& img{
		display: block;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		@media (min-width: 1200px) {
			aspect-ratio: 1400 / 500;
		}
	}
}

#detailBody{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 40px;
	color: #4d4d4d;
}

#detailIndex{
	justify-self: center;
	position: relative;
	width: min(100%, 940px);
	margin-top: 40px;
	padding: 24px;
	background: #fff;
	border: 2px solid var(--color-theme);
	border-radius: 4px;
	color: #4d4d4d;
	overflow: hidden;
	@media (min-width: 992px){
		padding: 40px;
	}
	& h3{
		display: grid;
		grid-template-columns: 16px auto;
		align-items: center;
		justify-content: start;
		grid-gap: 8px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		&: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 16 16"><path d="m13,15h3v-3h-3v3Zm1-2h1v1h-1v-1Zm-1-2h3v-3h-3v3Zm1-2h1v1h-1v-1ZM15,0H1C.45,0,0,.45,0,1v14c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V3h3c.55,0,1-.45,1-1v-1c0-.55-.45-1-1-1Zm0,2h-4v13H1V1h14v1Zm-2,5h3v-3h-3v3Zm1-2h1v1h-1v-1Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& h3+div{
		margin-top: 24px;
		&:has(span){
			margin-bottom: 40px;
		}
	}
	& ul{
		display: grid;
		grid-gap: 8px;
	}
	& a{
		display: grid;
		grid-template-columns: 8px auto;
		grid-gap: 8px;
		color: inherit;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme);
			transform: translateY(10px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8"><polygon points="4 4 0 8 0 0 4 4"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& span{
		display: grid;
		grid-gap: 8px;
	}
	& menu{
		all: unset;
		position: absolute;
		left: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: auto 12px;
		align-items: center;
		justify-content: center;
		grid-gap: 16px;
		width: 100%;
		min-height: 40px;
		margin: 0;
		background: #f2f2f2;
		font-size: 16px;
		text-align: center;
		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 10.71 6.06"><polygon points="10 0 5.35 4.65 .71 0 0 .71 5.35 6.06 10.71 .71 10 0"/></svg>') center no-repeat;
			-webkit-mask-size: 100%;
		}
		&.open{
			&:after{
				transform: rotate(180deg);
			}
		}
	}
}

#detailContents{
	& section{
		display: grid;
		scroll-margin-top: 24px;
		&:has(h3){
			margin-top: 72px;
			@media (min-width: 992px){
				margin-top: 120px;
			}
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: 24px;
	margin-top: 96px;
	overflow: hidden;
	@media (min-width: 992px){
		grid-row-gap: 32px;
		margin-top: 152px;
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-template-columns: 4px auto;
		grid-gap: 12px;
		font-size: 20px;
		font-weight: 700;
		word-break: keep-all;
		@media (min-width: 992px){
			font-size: 24px;
		}
		&:before{
			content: "";
			margin: 0.3em 0 0.25em 0;
			background: var(--color-theme);
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-gap: 8px;
		&:not(:has(img)){
			&:before{
				content: "";
				order: -1;
				background: var(--dummy);
				background-size: contain;
				aspect-ratio: 1 / 0.667;
				border-radius: 4px;
			}
		}
	}
	& dt{
		font-weight: 700;
		font-size: 18px;
		@media (min-width: 992px){
			font-size: 20px;
		}
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			grid-area: photo;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			border-radius: 4px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 minmax(0, 1fr) 0;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
		}
		@media (min-width: 576px) {
			&:before{
				width: min(50% - 8px);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc((100% - 80px) / 3);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin: 0 -8px;
		overflow: visible;
		&:only-child{
			.slick-track{
				margin: 0;
				transform: none !important;
			}
		}
		@media (min-width: 992px) {
			margin: 0 -20px;
		}
		@media (min-width: 1200px) {
			overflow: hidden;
		}
	}
	.slick-slide{
		margin: 0 8px;
		@media (min-width: 992px){
			margin: 0 20px;
		}
	}
	.slick-arrow{
		grid-row: 1;
		align-self: center;
		width: 32px;
		background: #fff;
		border-color: var(--color-border);
		@media (min-width: 992px) {
			width: 48px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-50%);
	}
	.slick-next{
		grid-column: 3;
		justify-self: end;
		transform: translateX(50%);
	}
}

.title{
	position: relative;
	justify-self: center;
	width: min(100%, 940px);
	margin-bottom: 5px;
	padding: 16px 24px;
	background: #fff;
	border-radius: 4px 4px 0 0;
	font-weight: 700;
	font-family: var(--font-min);
	font-size: 18px;
	@media (min-width: 992px) {
		padding: 24px 32px;
		font-size: 24px;
	}
	&:before{
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		border-bottom: 4px solid var(--color-theme);
		transform: translateY(1px);
	}
}

.photos{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 24px;
	@media (min-width: 992px){
		margin-top: 32px;
	}
	& li{
		position: relative;
		display: grid;
		border-radius: 4px;
		overflow: hidden;
		&:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 96px;
			background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
		}
		&[data-caption]{
			&:after{
				content: attr(data-caption);
				position: absolute;
				left: 0;
				bottom: 32px;
				width: 100%;
				padding: 16px;
				color: #fff;
				text-align: center;
				pointer-events: none;
				z-index: 1;
			}
		}
	}
	& img{
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 minmax(0, 1fr) 0;
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1;
	}
	.slick-arrow{
		grid-row: 1;
		align-self: center;
		width: 32px;
		background: #fff;
		border-color: var(--color-border);
		color: var(--color-border);
		@media (min-width: 992px) {
			width: 48px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-50%);
	}
	.slick-next{
		grid-column: 3;
		justify-self: end;
		transform: translateX(50%);
	}
	.slick-dots{
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		justify-self: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		grid-gap: 16px;
		padding: clamp(16px, 3.6vw, 24px);
		z-index: 1;
		& li{
			width: 8px;
			aspect-ratio: 1;
			border: 1px solid #fff;
			border-radius: 100%;
			transform-origin: center center;
			opacity: 0.4;
			overflow: hidden;
			&:only-child{
				display: none;
			}
			&.slick-active{
				background: #fff;
				opacity: 1;
			}
		}
		& button{
			opacity: 0;
		}
	}
}

.text{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 32px;
	color: #4d4d4d;
	@media (min-width: 992px){
		margin-top: 40px;
	}
}

.movie{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 32px;
	@media (min-width: 992px){
		margin-top: 40px;
	}
	& iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		}
	}

.links{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 24px;
	@media (min-width: 992px){
		margin-top: 32px;
	}
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		@media (min-width: 992px){
			&:has(li:only-child){
				& a{
					justify-self: center;
				}
			}
			&:has(li:nth-child(2):last-child){
				grid-template-columns: repeat(2, 1fr);
				justify-content: center;
				& li:nth-child(1) a{
					justify-self: end;
				}
			}
			&:has(li:nth-child(3):last-child){
				grid-template-columns: repeat(3, 1fr);
			}
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 12px;
		align-items: center;
		width: min(100%, 320px);
		min-height: 48px;
		padding: 8px 16px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: var(--color-theme);
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		letter-spacing: 0.025em;
		&:hover{
			&:after{
				transform: translateX(4px);
			}
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			transition: transform 0.2s ease-out;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

.documents{
	justify-self: center;
	width: min(100%, 940px);
	margin-top: 56px;
	@media (min-width: 992px){
		margin-top: 72px;
	}
	& h4{
		display: grid;
		grid-template-columns: 4px auto;
		grid-gap: 10px;
		font-size: 20px;
		font-weight: 700;
		@media (min-width: 992px) {
			font-size: 24px;
		}
		&:before{
			content: "";
			background: var(--color-theme);
			margin: 0.35em 0 0.25em 0;
			}
		}
	& h4+div{
		margin-top: 24px;
		}
	& ul{
		display: grid;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		justify-self: start;
		display: grid;
		grid-template-columns: 16px 1fr;
		align-items: center;
		grid-gap: 16px;
		min-height: 48px;
		padding: 8px 24px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: var(--color-theme);
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
		letter-spacing: 0.025em;
		&:hover{
			&:before{
				transform: translateY(-2px);
			}
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			margin-top: 0.2em;
			transition: transform 0.2s ease-out;
			-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="M1,5H0v11h11v-1H1V5ZM4,0v12h12V0H4ZM15,11H5V1h10v10Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

.column{
	display: grid;
	grid-gap: 16px 24px;
	margin-top: 56px;
	padding: 24px;
	background: #fff;
	border: 3px solid var(--color-theme);
	border-radius: 3px;
	overflow: hidden;
	@media (min-width: 576px) {
		border-width: 4px;
		border-radius: 4px;
		&:has(figure){
			grid-template-columns: min(40vw, 416px) auto;
			grid-template-rows: auto auto 1fr;
			align-items: start;
			& h4{
				grid-column: 1 / 3;
			}
		}
	}
	@media (min-width: 992px) {
		column-gap: 40px;
		margin-top: 80px;
		padding: 24px 48px 48px 48px;
	}
	& h4{
		font-size: 24px;
		@media (min-width: 992px) {
			font-size: 32px;
		}
	}
	& h4+div{
		display: grid;
		grid-gap: 16px;
	}
	& h5{
		color: var(--color-theme);
		font-weight: 700;
		font-size: 20px;
		@media (min-width: 992px) {
			font-size: 24px;
		}
	}
	& h5+div+div{
		display: contents;
		& a{
			justify-self: center;
			display: grid;
			grid-template-columns: 1fr 12px;
			align-items: center;
			width: min(100%, 320px);
			min-height: 48px;
			margin-top: 16px;
			padding: 8px 16px;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 24px;
			color: var(--color-theme);
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			text-decoration: none;
			letter-spacing: 0.025em;
			&:hover{
				&:after{
					transform: translateX(4px);
				}
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				transition: transform 0.2s ease-out;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
	}
	& figure{
		grid-row: 2;
		@media (min-width: 576px) {
			grid-column: 1;
		}
		& img{
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
		}
	}
}

.comment{
	justify-self: center;
	display: grid;
	grid-gap: 24px;
	width: min(100%, 940px);
	margin-top: 24px;
	@media (min-width: 992px){
		grid-gap: 40px;
		margin-top: 32px;
	}
	& dl{
		display: grid;
		grid-row-gap: 8px;
		grid-template-rows: auto 1fr;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			align-self: center;
			width: 80%;
			aspect-ratio: 1;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="24 24 0 11.2 24 0 24 24"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			}
		&:not(:has(img)):after{
			content: "";
			justify-self: center;
			width: min(100%, 80px);
			aspect-ratio: 1;
			background: var(--dummy) center no-repeat;
			background-size: cover;
			border-radius: 100%;
		}
	}
	& dt{
		justify-self: center;
		font-size: 14px;
		text-align: center;
		@media (min-width: 992px){
			font-size: 16px;
		}
	}
	& dt+dd{
		grid-row: 1 / 3;
		padding: 16px 24px;
		background: #fff;
		border-radius: 8px;
		@media (min-width: 992px){
			padding: 24px 32px;
		}
	}
	& dd{
		&:has(img){
			grid-row: 1;
		}
		& img{
			display: block;
			justify-self: center;
			width: min(100%, 80px);
			aspect-ratio: 1;
			border-radius: 100%;
			object-fit: cover;
		}
	}
	.commentLeft{
		grid-template-columns: min(20vw, 100px) 24px 1fr;
		&:before{
			justify-self: end;
		}
		& dt+dd{
			grid-column: 3;
		}
	}
	.commentRight{
		grid-template-columns: 1fr 24px min(20vw, 100px);
		&:before{
			transform: scale(-1, 1);
		}
		& dt{
			grid-column: 3;
		}
		& dd{
			&:has(img){
				grid-column: 3;
			}
		}
	}
}

.spot{
	justify-self: center;
	display: grid;
	grid-gap: 40px 24px;
	width: min(100%, 940px);
	margin-top: 32px;
	@media (min-width: 576px) {
		grid-template-columns: repeat(2, 1fr);
		}
	@media (min-width: 992px){
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 48px 40px;
		margin-top: 48px;
	}
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		grid-gap: 16px;
		&:has(img){
			grid-template-rows: auto auto 1fr;
		}
	}
	& dt{
		font-weight: 700;
		@media (min-width: 992px){
			font-size: 20px;
		}
	}
	& dd+dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 1 / 0.667;
			border-radius: 4px;
			object-fit: cover;
		}
		& a{
			justify-self: center;
			display: grid;
			grid-template-columns: 1fr 12px;
			align-items: center;
			width: min(100%, 320px);
			min-height: 48px;
			margin-top: 16px;
			padding: 8px 16px;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 24px;
			color: var(--color-theme);
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			text-decoration: none;
			letter-spacing: 0.025em;
			&:hover{
				&:after{
					transform: translateX(4px);
				}
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				transition: transform 0.2s ease-out;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
	}
}

.map{
	display: grid;
	grid-gap: 8px;
	transform-origin: center top;
	& p{
		color: #4d4d4d;
		font-size: 15px;
	}
	& menu{
		justify-self: center;
		display: grid;
		grid-template-columns: 20px 1fr 12px;
		align-items: center;
		width: min(100%, 320px);
		min-height: 48px;
		margin: 32px 0 24px 0;
		padding: 8px 16px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: var(--color-theme);
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		letter-spacing: 0.025em;
		cursor: pointer;
		margin-top: 32px;
		@media (min-width: 992px){
			margin-top: 48px;
		}
		&: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 16 21.33"><path d="m8,0C3.58,0,0,3.58,0,8s8,13.33,8,13.33c0,0,8-8.92,8-13.33S12.42,0,8,0Zm0,10.67c-1.47,0-2.67-1.19-2.67-2.67s1.19-2.67,2.67-2.67,2.67,1.19,2.67,2.67-1.19,2.67-2.67,2.67Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
		&: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 12 12"><polygon points="7 5 7 0 5 0 5 5 0 5 0 7 5 7 5 12 7 12 7 7 12 7 12 5 7 5" /></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
		&.open{
			&:after{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><rect y="5" width="12" height="2" /></svg>') center no-repeat;
			}
		}
	}
}

.mapBody{
	background: #fff;
	border: 1px solid var(--color-theme);
	border-radius: 8px;
	overflow: hidden;
	@media (min-width: 992px) {
		display: grid;
		position: relative;
		grid-template-columns: 1fr 370px;
	}
	[id*="gMap"]{
		margin: 8px;
		height: min(75vh, 500px);
		background: #ccc;
	}
}

.mapList{
	padding: 16px 24px;
	overflow-y: auto;
	@media (max-width: 991.98px) {
		height: min(50vw, 200px);
	}
	@media (min-width: 992px) {
		position: absolute;
		right: 0;
		top: 0;
		width: 370px;
		height: 100%;
		padding: 24px 32px;
	}
	& ul{
		display: grid;
		grid-gap: clamp(14px, 2.4vw, 16px) clamp(16px, 3.6vw, 24px);
		counter-reset: count;
		}
	& li{
		display: grid;
		grid-template-columns: 32px auto;
		justify-content: start;
		grid-gap: 16px;
		color: inherit;
		font-weight: 700;
		cursor: pointer;
		text-decoration: none;
		&:before{
			counter-increment: count;
			content: counter(count);
			display: grid;
			align-items: center;
			width: 100%;
			aspect-ratio: 1;
			padding-bottom: 0.1em;
			background: var(--color-theme);
			border-radius: 100%;
			color: #fff;
			text-align: center;
		}
	}
}