/* CSS Document */

#detail{}

#detailHeader{
	display: grid;
	width: min(var(--wrap-fit), 1000px);
	margin-inline: auto;
	& h2{
		margin-top: clamp(16px, calc(72 / 1200 * 100vw), 72px);
		color: var(--color-theme);
		font: 700 clamp(40px, calc(44 / 768 * 100vw), 44px) 'eb-garamond', var(--font-min);
		&:empty{
			display: none;
		}
	}
	#detailText{
		order: 1;
		margin-top: clamp(56px, calc(72 / 1200 * 100vw), 72px);
	}
	#detailLink{
		order: 1;
		margin-top: clamp(56px, calc(72 / 1200 * 100vw), 72px);
	}
	#detailTag{
		order: 2;
		margin-top: clamp(56px, calc(72 / 1200 * 100vw), 72px);
		padding-top: clamp(56px, calc(72 / 1200 * 100vw), 72px);
	}
	#detailPhoto{
		margin-top: 16px;
	}
	@media (min-width: 992px) {
		grid-template-columns: 1fr auto;
		& h2,
		#detailLead,
		#detailTag,
		#detailPhoto{
			grid-column: 1 / 3;
		}
		#detailLink{
			justify-self: end;
		}
	}
}

#detailLead{
	color: #8D968D;
	font-weight: 600;
	font-size: clamp(24px, calc(26 / 768 * 100vw), 26px);
	font-style: italic;
}

#detailText{
	font-weight: 300;
	font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	letter-spacing: 0.06em;
}

#detailLink{
	min-width: 210px;
	& ul{
		@media (max-width: 991.98px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 24px;
		}
		@media (min-width: 992px) {
			display: grid;
			grid-row-gap: 16px;
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, 210px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 4px 24px;
		background: #292929;
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #fff;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.04em;
		text-align: center;
		text-decoration: none;
		&[data-fav-id]{
			grid-template-columns: auto 1fr;
			background: transparent;
			border: 1px solid currentColor;
			color: #CF4A07;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				transform: translateX(-8px);
				-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;"><path d="M1.79,8.66C.21,7.07.06,4.56,1.45,2.8c.84-1.06,2.1-1.68,3.46-1.68,1,0,1.95.33,2.73.95l.35.28.35-.28c.79-.62,1.74-.95,2.74-.95,1.18,0,2.29.46,3.12,1.29,1.71,1.72,1.71,4.52,0,6.24l-6.21,6.22L1.79,8.66Z"/></svg>') no-repeat center / contain;
			}
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		width: min(100%, 210px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 4px 24px;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100vw), 32px);
		color: #CF4A07;
		font-weight: 600;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.04em;
		text-align: center;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateX(-8px);
			-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;"><path d="M1.79,8.66C.21,7.07.06,4.56,1.45,2.8c.84-1.06,2.1-1.68,3.46-1.68,1,0,1.95.33,2.73.95l.35.28.35-.28c.79-.62,1.74-.95,2.74-.95,1.18,0,2.29.46,3.12,1.29,1.71,1.72,1.71,4.52,0,6.24l-6.21,6.22L1.79,8.66Z"/></svg>') no-repeat center / contain;
		}
		&[data-jc-action="favorite-spot#delete"]{
			background: #d3d3d3;
			border-color: transparent;
			color: inherit;
		}
		&.hidden{
			display: none;
		}
	}
}

#detailTag{
	display: grid;
	grid-gap: 40px;
	border-top: 1px solid #b3b3b3;
	@media (min-width: 992px) {
		grid-gap: 32px;
	}
 	& dl{
		display: grid;
		grid-gap: 8px 24px;
		@media (min-width: 576px) {
			grid-template-columns: min(100%, 260px) 1fr;
		}
	}
	& dt{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		font-size: clamp(21px, calc(30 / 768 * 100vw), 30px);
		&:before{
			content: "";
			aspect-ratio: 1;
			height: 32px;
			background: #646464;
			transform: translateY(calc(0.825em - 50%));
			-webkit-mask: var(--logoMark) no-repeat center / contain;
		}
	}
	& dd{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 4px 24px;
		border: 1px solid #8D968D;
		border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
		color: inherit;
		font-size: clamp(14px, calc(17 / 768 * 100vw), 17px);
		text-decoration: none;
		&.fukui{
			background: var(--color-fukui);
			border: none;
		}
		&.okuetu{
			background: var(--color-okuetu);
			border: none;
		}
		&.tannan{
			background: var(--color-tannan);
			border: none;
		}
		&.wakasa{
			background: var(--color-wakasa);
			border: none;
		}
	}
}

#detailPhoto{
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		cursor: pointer;
		&:not(:only-child){
			@media (min-width: 576px) {
				width: calc(50% - 4px);
			}
		}
		&:nth-of-type(n+5){
			width: calc(50% - 4px);
			@media (min-width: 576px) {
				width: calc(33.33% - 5.334px);
			}
		}
	}
	& img{
		aspect-ratio: 1 / 0.667;
		object-fit: cover;
	}
}

#detailPhotoShow{
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	align-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 1);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: opacity 0.2s ease-out;
	z-index: 1000;
	&.open{
		opacity: 1;
		visibility: visible;
		}
	img{
		width: min(100%, 1280px);
		height: 100vh;
		margin: auto;
		object-fit: contain;
		transform: scale(0);
		transition: transform 0.2s ease-out;
		animation-duration: 1s;
		.slick-initialized &{
			transform: scale(1);
			}
		}
	.slick-slider{
		display: grid;
		opacity: 1 !important;
		}
	.slick-list{
		grid-row: 1;
		grid-column: 1;
		}
	.slick-arrow{
		position: relative;
		grid-row: 1;
		grid-column: 1;
		align-self: center;
		aspect-ratio: 1;
		width: 48px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0;
		z-index: 1;
		&:before{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><polyline points="1 12 23 12" /><polyline points="14 3 23 12 14 20" /></svg>') center no-repeat;
			-webkit-mask-size: 24px;
			}
		}
	.slick-next{
		justify-self: end;
		}
	}

#detailPhotoShowClose{
	all: initial;
	position: absolute;
	top: 0;
	right: 0;
	aspect-ratio: 1;
	width: 48px;
	background: rgba(0, 0, 0, 0.5);
	font-size: 0;
	cursor: pointer;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><polyline points="1 1 23 23" /><polyline points="23 1 1 23" /></svg>') center no-repeat;
		background-size: 24px;
		white-space: nowrap;
		text-indent: 4em;
		overflow: hidden;
		cursor: pointer;
		}
	}

#detailMovie{
	width: min(var(--wrap-fit), 1000px);
	margin: clamp(64px, calc(88 / 1200 * 100vw), 88px) auto 0 auto;
	& h3{
		display: none;
	}
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		&.short{
			aspect-ratio: 9 / 16;
		}
	}
}

#detailBasic{
	justify-self: center;
	width: min(100%, 960px);
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	& h3{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 8px;
		color: var(--color-theme);
		font: 500 50px 'eb-garamond', var(--font-min);
		&:before{
			content: "i";
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 40px;
			border: 1px solid currentColor;
			border-radius: 100%;
			color: #243124;
			font-size: 35px;
			text-align: center;
			line-height: 1;
			transform: translateY(calc(0.5em - 50%));
		}
	}
	& h3+div{
		margin-top: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	}
	& dl{
		display: grid;
		border: 1px solid #707070;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			border-left-width: 0;
			& dt,
			& dd{
				&:nth-of-type(n+2){
					border-top: 1px solid #707070;
				}
			}
		}
	}
	& dt{
		display: grid;
		align-items: center;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
		background: #8D968D;
		color: #243124;
		font: 700 clamp(22px, calc(25 / 768 * 100vw), 25px) 'eb-garamond', var(--font-min);
		@media (min-width: 576px) {
			width: clamp(200px, calc(280 / 768 * 100vw), 280px);
		}
	}
	& dd{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.06em;
	}
}

#detailMap{
	margin-top: clamp(80px, calc(120 / 1200 * 100vw), 120px);
	& iframe{
		width: 100%;
		height: clamp(375px, calc(754 / 1200 * 100vw), 754px);
		background: #ccc;
		}
	}

#recommend{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1000px);
	justify-content: center;
	grid-row-gap: clamp(40px, calc(72 / 1200 * 100vw), 72px);
	padding: clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
	background: #8D968D;
	overflow: hidden;
	& h2{
		display: none;
	}
	& section{
		display: grid;
		grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		font-weight: 700;
		font-size: clamp(20px, calc(26 / 768 * 100vw), 26px);
		&:before{
			content: "";
			aspect-ratio: 1;
			height: clamp(28px, calc(36 / 768 * 100vw), 36px);
			background: #646464;
			transform: translateY(calc(0.825em - 50%));
			-webkit-mask: var(--logoMark) no-repeat center / contain;
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:has(img[src="/common/lsc/images/noImg.png"]):before,
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		& img{
			aspect-ratio: 3 / 2;
		}
	}
	& dt{
		font-size: 14px;
		letter-spacing: 0.06em;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(img[src="/common/lsc/images/noImg.png"]){
			display: none;
		}
		&:has(a){
			display: contents;
		}
		& img{
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slide{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			margin: 0 8px;
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
			margin: 0 -8px;
		}
		.slick-slide{
			margin: 0 8px;
		}
		.slick-arrow{
			align-self: center;
			justify-self: center;
			grid-row: 1;
		}
		.slick-prev{
			grid-column: 1;
		}
		.slick-next{
			grid-column: 3;
		}
		@media (max-width: 575.98px) {
			.slick-list{
				overflow: visible;
			}
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - 16px);
			}
		}
		@media (min-width: 768px) {
			&:before{
				width: calc(33.3% - 16px);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(25% - 16px);
			}
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: 48px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		overflow: hidden;
		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 20 20" style="fill: none; stroke: black;"><polyline points="5 1 14 10 5 19"/></svg>') no-repeat center / 20px;
		}
		.slick-prev&:before{
			transform: scale(-1, 1);
		}
	}
}