/* CSS Document */

#pagePath{
	display: none;
}

#header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.2s ease-out;
	.scrollTop &{
		transform: translateY(-100%);
	}
}

#topNav{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 115;
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		@media (max-width: 991.98px) {
			display: grid;
			align-content: center;
			justify-items: center;
			aspect-ratio: 1;
			width: clamp(56px, calc(64 / 768 * 100dvw), 64px);
			color: #fff;
			font-weight: 700;
			font-size: 12px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			overflow: hidden;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 10px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" style="fill: none; stroke: black;"><polyline points="9 3 5 7 1 3"/></svg>') no-repeat center / contain;
			}
			.nav &:after{
				transform: scale(1, -1);
			}
		}
		@media (min-width: 992px) {
			display: grid;
			align-content: center;
			justify-items: center;
			aspect-ratio: 1;
			width: 56px;
			color: inherit;
			font-weight: 700;
			font-size: 10px;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			overflow: hidden;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 28px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><line x1="1" y1="6" x2="27" y2="6"/><line x1="1" y1="14" x2="27" y2="14"/><line x1="1" y1="22" x2="27" y2="22"/></svg>') no-repeat center / contain;
			}
			.nav &:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><line x1="4.81" y1="23.19" x2="23.19" y2="4.81"/><line x1="23.19" y1="23.19" x2="4.81" y2="4.81"/></svg>');
			}
		}
	}
	#topNavGlobal{
		& ul{
			display: flex;
			column-gap: 24px;
		}
		& a{
			display: block;
			color: inherit;
			font-weight: 500;
			font-size: 15px;
			letter-spacing: 0.045em;
			text-decoration: none;
		}
	}
	#topNavBusiness,
	#topNavTourism{
		& a{
			display: block;
			color: inherit;
			font-weight: 500;
			font-size: 15px;
			letter-spacing: 0.045em;
			text-decoration: none;
		}
	}
	#topNavLanguage{
		position: relative;
		& summary{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			font-weight: 500;
			font-size: 15px;
			text-align: center;
			letter-spacing: 0.045em;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 8px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 7"><polygon points="4 7 0 0 8 0 4 7"/></svg>') no-repeat center / contain;
			}
			[open] &:after{
				transform: scale(1, -1);
			}
		}
		& summary+div{
			position: absolute;
			top: calc(100% + 8px);
			left: 50%;
			width: 6em;
			background: #fff;
			border-radius: 4px;
			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
			transform: translateX(-50%);
		}
		& ul{
			display: grid;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 4px 16px;
			color: var(--color);
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-decoration: none;
		}
	}
	#topNavFavorite{
		& a{
			display: grid;
			justify-items: center;
			color: inherit;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: 0.045em;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 28px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M14.93,1.85l2.72,8.37h8.81c.94,0,1.34,1.21.57,1.76l-7.12,5.18,2.72,8.37c.29.9-.74,1.65-1.5,1.09l-7.12-5.18-7.12,5.18c-.76.56-1.79-.19-1.5-1.09l2.72-8.37L.97,11.99c-.76-.56-.37-1.76.57-1.76h8.81S13.07,1.85,13.07,1.85c.29-.9,1.56-.9,1.86,0Z"/></svg>') no-repeat center / contain;
			}
		}
	}
	@media (max-width: 991.98px) {
		& [id^="topNav"]{
			display: none;
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: 1fr auto auto auto;
		grid-gap: 8px 16px;
		min-height: 56px;
		padding: 16px 32px 16px 40px;
		background: rgba(var(--color-theme-rgb), 0.85);
		border-radius: 28px 0 0 28px;
		color: #fff;
		#topNavGlobal{
			grid-column: 1 / 3;
			grid-row: 2;
		}
		#topNavBusiness,
		#topNavTourism{
			grid-column: 1;
			justify-self: end;
		}
		#topNavLanguage{
			grid-column: 2;
		}
		#topNavFavorite{
			grid-column: 3;
			grid-row: 1 / 3;
			margin-left: 8px;
			align-self: center;
		}
		& menu{
			grid-column: 4;
			grid-row: 1 / 3;
		}
	}
}

#main{
	margin-bottom: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	overflow: hidden;
}

#hero{
	position: relative;
	display: grid;
	background: #fff;
	&:before,
	&:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		aspect-ratio: 1;
		/*width: clamp(96px, calc(225 / 1200 * 100dvw), 225px);*/
		width: clamp(96px, calc(112 / 1200 * 100dvw), 112px);
	}
	&:before{
		background: 
			url('/common/images/logoIcon.svg') no-repeat center 30% / 75% auto,
			url('/common/images/ml.logoType.svg') no-repeat center 90% / 80% auto;
		z-index: 2;
	}
	&:after{
		background: rgba(255,255,255,0.75);
		filter: blur(8px);
		z-index: 1;
	}
}

#heroSlide{
	display: grid;
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		overflow: hidden;
	}
	& dt{
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: end;
		position: relative;
		margin: clamp(64px, calc(120 / 1200 * 100dvw), 120px) 0;
		padding: 0.25em 0.5em 0.25em 0;
		color: #fff;
		font-weight: 900;
		font-size: clamp(24px, calc(34 / 768 * 100dvw), 34px);
		letter-spacing: 0.045em;
		text-align: center;
		pointer-events: none;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 100vw;
			height: 100%;
			background: rgba(26, 26, 26, 0.8);
			z-index: -1;
		}
	}
	& dd{
		grid-column: 1 / 4;
		grid-row: 1;
		&:has(a){
			display: contents;
		}
		& img{
			width: 100%;
			height: clamp(540px, 63.3dvw, 80dvh);
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	&:not(.slick-slider){
		& dl{
			grid-column: 1;
			grid-row: 1;
			&:nth-child(n+2){
				visibility: hidden;
			}
		}
	}
	&.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1;
		}
		.slick-arrow{
			grid-row: 1;
			margin: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
			z-index: 1;
		}
		.slick-prev{
			grid-column: 1;
		}
		.slick-next{
			grid-column: 3;
		}
		.slick-dots{
			grid-column: 1 / 4;
			grid-row: 1;
			align-self: end;
			height: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
			z-index: 1;
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: 48px;
		background: rgba(var(--color-theme-rgb), 0.85);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		&: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 48 48"><polyline points="19.5 33 28.5 23.88 19.62 15" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 1.86px;"/></svg>') no-repeat center / contain;
		}
		&.slick-prev:before{
			transform: scale(-1, 1);
		}
	}
	.slick-dots{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		grid-gap: 16px;
		& li{
			aspect-ratio: 1;
			width: 16px;
			border: 2px solid #fff;
			border-radius: 100%;
			overflow: hidden;
			&.slick-active{
				background: #fff;
			}
		}
		& button{
			visibility: hidden;
		}
	}
}

#alert{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	& ul{
		display: grid;
		justify-content: center;
		grid-row-gap: 8px;
	}
	& li{
		&:not(:has(a)),
		& a{
			display: block;
			padding: 0.25em 1.5em;
			border: 1px solid currentColor;
			border-radius: 4px;
			color: #d02864;
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.08em;
			text-align: center;
			@media (max-width: 575.98px) {
				text-decoration: none;
			}
		}
		&:has(a){
			display: contents;
		}
	}
}

#access{
	display: grid;
	margin: clamp(40px, calc(72 / 1200 * 100dvw), 72px) 0;
	& h2{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 1200px);
		justify-content: center;
		color: var(--color-theme);
		font-weight: 900;
		font-size: clamp(32px, calc(70 / 1200 * 100dvw), 70px);
		letter-spacing: 0.045em;
	}
	& h2+div{
		grid-column: 1;
		grid-row: 3;
		justify-self: center;
		width: min(var(--wrap-fit), 1200px);
		padding: clamp(16px, calc(24 / 1200 * 100dvw), 24px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		background: rgba(var(--color-theme-rgb), 0.8);
		border-radius: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(21 / 1200 * 100dvw), 21px);
	}
	& figure{
		grid-column: 1;
		grid-row: 2;
		position: relative;
		aspect-ratio: 1.65 / 1;
		justify-self: center;
		width: min(var(--wrap-fit), 1200px);
		z-index: -1;
		& img{
			position: absolute;
			top: 50%;
			left: 50%;
			width: min(115dvw, 1500px);
			height: auto;
			transform: translate(-50%, -60%);
		}
	}
}

#ranking{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	padding: clamp(32px, calc(56 / 1200 * 100dvw), 56px) 0;
	background: #e5f7ff;
	border-radius: clamp(32px, calc(60 / 1200 * 100dvw), 60px);
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(50 / 1200 * 100dvw), 50px);
		letter-spacing: 0.06em;
		text-align: center;
	}
	#rankingTab{
		justify-self: center;
		width: min(100%, 800px);
		margin-top: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	}
	#rankingList{
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	}
}

#rankingTab{
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 16px;
	}
	& li{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		min-height: 2em;
		padding: 0.25em 1em;
		background: #fff;
		border-color: currentColor;
		border-radius: 1em;
		font-weight: 500;
		font-size: clamp(12px, calc(24 / 1200 * 100dvw), 24px);
		letter-spacing: 0.05em;
		text-align: center;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			background: currentColor;
			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 12 12"><polyline points="11 3.5 6 8.5 1 3.5" style="fill: none; stroke: black;"/></svg>') no-repeat center / contain;
		}
		&.select{
			background: var(--color-theme);
			border: 1px solid transparent;
			color: #fff;
			pointer-events: none;
		}
	}
}

#rankingList{
	& summary{
		display: none;
	}
	& summary+div{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		grid-gap: clamp(24px, calc(40 / 1200 * 100dvw), 40px) clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		& section:nth-child(1){
			grid-column: 1 / 3;
		}
	}
	& section{
		counter-increment: count;
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.75;
			background: var(--dummy);
			border-radius: 0 clamp(20px, calc(40 / 1200 * 100dvw), 40px) clamp(20px, calc(40 / 1200 * 100dvw), 40px) 0;
		}
		&:after{
			content: counter(count);
			position: absolute;
			top: 8px;
			left: 8px;
			display: grid;
			place-content: center;
			aspect-ratio: 1;
			width: 1.5em;
			padding-bottom: 0.15em;
			background: #fff;
			border-radius: 100%;
			color: var(--color-theme);
			font-weight: 700;
			font-size: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
			line-height: 1;
			pointer-events: none;
			z-index: 1;
		}
	}
	& h3{
		order: 1;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		font-weight: 900;
		font-size: clamp(16px, calc(30 / 1200 * 100dvw), 30px);
		letter-spacing: 0.04em;
		&:before{
			content: "";
			aspect-ratio: 10 / 15;
			width: clamp(6px, calc(10 / 1200 * 100dvw), 10px);
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 15"><path d="M0,0l10,7.48L0,15V0Z"/></svg>') no-repeat center / contain;
		}
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			border-radius: 0 clamp(20px, calc(40 / 1200 * 100dvw), 40px) clamp(20px, calc(40 / 1200 * 100dvw), 40px) 0;
		}
	}
	@media (min-width: 768px) {
		& summary+div{
			grid-template-columns: repeat(3, 1fr);
			& section:nth-child(1),
			& section:nth-child(2){
				grid-column: 1 / 4;
				grid-row: 1;
				width: calc((100% - clamp(16px, calc(24 / 1200 * 100dvw), 24px)) / 2);
				&:after{
					width: 2em;
				}
			}
			& section:nth-child(2){
				justify-self: end;
			}
		}
	}
}

#reviews{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: clamp(360px, calc(720 / 1200 * 100dvw), 720px);
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2318.8 715.41" fill="%23f2f2f2"><path d="M1212.74,289.73c91.18,22.53,396.73,116.28,573.63,88.28s270.81-136.06,241.63-248.03S1811.96-2.37,1738.18.21c-73.78,2.58-181.56,33.61-298.76,100.82-117.2,67.21-229.67,103.09-337.94,120.11-108.27,17.03-227.3,4.04-281.34-12.77-54.05-16.81-166.71-60.67-220.25-91.01,0,0-56.5-34.8-126.12-41.25-165.5-15.35-220.48,99.07-170.38,169.79,50.1,70.72,172.76,131.89,320.68,81.53,147.92-50.36,180.01-77.97,293.62-81.16,113.61-3.19,203.87,20.93,295.05,43.46ZM2137.03,389.51c-67.07,7.46-120.51,38.3-120.51,38.3-50.73,27.02-158.15,67.11-209.82,82.8-51.67,15.69-119.25,37.63-224.47,26.52-105.22-11.11-212.39-28.08-327.95-81.03-115.56-52.95-251.79-70.09-323.19-70.09s-189.16,8.94-214.14,104.05c-28.41,108.16,183.14,204.72,355.07,223.02,171.93,18.3,327.45-76.65,412.75-103.31,90.52-28.3,140.79-42.81,252.35-47.73,74.7-3.3,101.44-8.47,258.43,24.8,146.32,31.02,261.18-17,307.22-77.79,46.04-60.79-6.27-137.27-165.72-119.55Z"/></svg>') no-repeat center / auto 100%;
		z-index: -1;
	}
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(50 / 1200 * 100dvw), 50px);
		letter-spacing: 0.06em;
		text-align: center;
	}
	& h2+div{
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 32px);
		font-weight: 500;
		font-size: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		text-align: center;
	}
	#reviewsList{
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
	#reviewsLink{
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
}

#reviewsList{
	display: grid;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 24px;
		padding: 24px 16px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 20px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			background: var(--dummy);
		}
	}
	& h3{
		order: 1;
		margin-inline: 1em;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 1;
			object-fit: cover;
		}
	}
	&:not(.slick-slider){
		grid-template-columns: min(80dvw, 296px);
		justify-content: center;
		& section{
			grid-column: 1;
			grid-row: 1;
			&:nth-child(n+2){
				visibility: hidden;
			}
		}
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		align-items: center;
		.slick-list{
			grid-column: 2;
			overflow: visible;
		}
		.slick-slide{
			width: min(80dvw, 296px);
			margin-inline: clamp(8px, calc(12 / 1200 * 100dvw), 12px);
		}
		.slick-next{
			justify-self: end;
		}
	}
}

#reviewsLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, 600px);
		min-height: 2.5em;
		padding: 0.25em 1em;
		border: 1px solid currentColor;
		border-radius: 0.8em;
		color: inherit;
		font-weight: 500;
		font-size: clamp(16px, calc(25 / 1200 * 100dvw), 25px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
	}
}

#pickup{
	position: relative;
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(48px, calc(96 / 1200 * 100dvw), 96px);
	&:before{
		content: "";
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		height: clamp(312px, calc(624 / 1200 * 100dvw), 624px);
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 849.1 623.42"><path fill="%23efefef" d="M21.27,319.62c18.27,19.16,63.88,33,121.91,24.52,56.78-8.31,62.64-9.59,102.55-7.82,44.24,1.96,64.21,6.13,100.13,15.04,33.85,8.4,95.56,38.33,163.78,32.56,68.22-5.77,149.9-32.22,140.89-70.29-7.33-30.96-56.64-32.79-84.97-32.79s-82.39,5.4-128.24,22.09c-45.85,16.69-88.38,22.04-130.13,25.54-41.75,3.5-68.57-3.41-89.07-8.36s-58.01-17.52-83.26-26.1c0,0-28.12-9.61-47.82-12.07-63.03-7.89-84.03,18.52-65.76,37.68ZM139.88,135.3c61.13-20.81,74.38-32.22,121.33-33.54s84.24,8.65,121.92,17.96,163.94,48.05,237.04,36.48,111.9-56.22,99.85-102.49C707.96,7.44,630.75-.98,600.26.09c-30.49,1.06-75.02,13.89-123.45,41.66-48.43,27.77-94.91,42.6-139.64,49.63-44.74,7.04-93.93,1.67-116.26-5.28s-68.89-25.07-91.01-37.61c0,0-23.35-14.38-52.11-17.05C9.39,25.11-13.33,72.39,7.37,101.61c20.7,29.22,71.39,54.5,132.51,33.69ZM773.99,145.25c-27.72,3.08-49.8,15.83-49.8,15.83-20.96,11.17-65.35,27.73-86.7,34.22s-49.28,15.55-92.76,10.96c-43.48-4.59-87.77-11.6-135.52-33.48s-104.04-28.96-133.55-28.96-78.16,3.69-88.49,43c-11.74,44.7,75.68,84.6,146.72,92.16,71.04,7.56,135.31-31.67,170.56-42.69,37.41-11.69,58.18-17.69,104.28-19.72,30.87-1.36,41.92-3.5,106.79,10.25,60.46,12.82,107.93-7.02,126.95-32.14,19.02-25.12-2.59-56.72-68.48-49.4ZM517.27,520.36c-26.48,0-77,5.36-119.86,21.91-42.86,16.55-82.6,21.86-121.63,25.33-39.02,3.47-64.16-3.11-83.25-8.29-19.56-5.31-57.9-18.72-78.37-26.72,0,0-19.27-8.81-44.14-11.14-59.13-5.54-78.53,18.37-61.46,37.37s59.65,32.85,113.94,24.32c53.84-8.47,58.54-9.51,95.84-7.75,41.35,1.95,59.55,9.6,93.13,18.45,31.64,8.34,89.78,34.49,153.54,28.77s144.37-36.02,131.68-69.72c-11.03-29.3-52.94-32.53-79.42-32.53ZM722.4,392.63c-28.66,2.53-59.37,12.93-59.37,12.93-21.68,9.17-59.68,22.84-81.76,28.16-22.08,5.32-50.95,12.77-95.91,9-44.96-3.77-88.14-12.18-140.11-27.5-50.4-14.86-106.33-25.64-136.84-25.64s-86.48,3.49-92.73,37.16c-6.78,36.52,70.53,70.22,151.7,75.68,73.55,4.95,139.9-26.01,176.35-35.06,38.68-9.6,60.18-14.08,107.81-16.2,42.97-1.91,48.6-4.45,110.41,8.42,61.81,12.87,111.59-5.77,131.26-26.4s-2.68-46.58-70.8-40.57Z"/></svg>') no-repeat calc(50dvw + clamp(88px, calc(240 / 1200 * 100dvw), 240px)) top / auto 100%;
		z-index: -1;
	}
	& h2{
		display: grid;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(26 / 1200 * 100dvw), 26px);
		letter-spacing: 0.1em;
		text-align: center;
		&:after{
			content: attr(data-ruby);
			font-weight: 700;
			font-size: clamp(24px, calc(50 / 1200 * 100dvw), 50px);
			letter-spacing: 0.06em;
			line-height: 1;
		}
	}
	#pickupList{
		margin-top: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	}
}

#pickupList{
	display: grid;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			border-radius: 0 14px 14px 14px;
			background: var(--dummy);
		}
	}
	& h3{
		order: 1;
		margin-inline: 1.5em;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 0 14px 14px 14px;
		}
	}
	&:not(.slick-slider){
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
		grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-gap: 32px clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1;
			margin-inline: calc(0px - clamp(8px, calc(12 / 1200 * 100dvw), 12px));
			overflow: visible;
		}
		.slick-slide{
			margin-inline: clamp(8px, calc(12 / 1200 * 100dvw), 12px);
		}
		.slick-prev{
			justify-self: end;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 2;
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: 24px;
		border: 1px solid currentColor;
		border-radius: 100%;
		font-size: 0;
		&: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;"><polyline points="6 3 11 8 6 13"/></svg>') no-repeat center / 16px;
		}
		&.slick-prev:before{
			transform: scale(-1, 1);
		}
	}
	.slick-dots{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		grid-gap: 8px clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		& li{
			aspect-ratio: 1;
			width: 10px;
			background: #bdbdbd;
			border-radius: 100%;
			overflow: hidden;
			&.slick-active{
				background: var(--color-theme);
			}
		}
		& button{
			visibility: hidden;
		}
	}
}

#useful{
	display: grid;
	grid-row-gap: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	margin-top: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 2;
		background: #dddddd;
		z-index: -1;
	}
	& h2{
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 1200px);
		justify-content: center;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(50 / 1200 * 100dvw), 50px);
		letter-spacing: 0.06em;
		text-align: center;
	}
	#usefulList{
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		width: min(var(--wrap-fit), 1200px);
		padding: clamp(24px, calc(40 / 1200 * 100dvw), 40px) 0;
	}
}

#usefulList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 224px), 1fr));
	grid-gap: clamp(24px, calc(64 / 1200 * 100dvw), 64px);
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			background: var(--dummy);
			border-radius: 100%;
		}
	}
	& h3{
		order: 1;
		justify-self: center;
		margin-inline: 1em;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
		}
	}
}

#instagram{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(50 / 1200 * 100dvw), 50px);
		letter-spacing: 0.06em;
		text-align: center;
	}
	#instagramList{
		margin-top: clamp(16px, calc(40 / 1200 * 100dvw), 40px);
	}
	#instagramLink{
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
}

#instagramList{
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		@media (max-width: 767.98px) {
			& li:nth-child(n+7){
				display: none;
			}
		}
		@media (min-width: 576px) and (max-width: 767.98px) {
			grid-template-columns: repeat(3, 1fr);
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
	}
	& img{
		aspect-ratio: 1;
		object-fit: cover;
	}
}

#instagramLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, 600px);
		min-height: 2.5em;
		padding: 0.25em 1em;
		border: 1px solid currentColor;
		border-radius: 0.8em;
		color: inherit;
		font-weight: 500;
		font-size: clamp(16px, calc(25 / 1200 * 100dvw), 25px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
	}
}

#pr{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1200px);
	justify-content: center;
	margin-top: clamp(40px, calc(80 / 1200 * 100dvw), 80px);
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(35 / 1200 * 100dvw), 35px);
		text-align: center;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		margin-top: 16px;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
		border: solid currentColor;
		border-width: 1px 0;
		@media (max-width: 575.98px) {
			& li:nth-child(n+9){
				display: none;
			}
		}
		@media (min-width: 576px) {
			grid-template-columns: repeat(3, 1fr);
		}
		@media (min-width: 576px) and (max-width: 767.98px) {
			& li:nth-child(n+10){
				display: none;
			}
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
		}
		@media (min-width: 768px) and (max-width: 991.98px) {
			& li:nth-child(n+9){
				display: none;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(5, 1fr);
		}
	}
	& li{
		display: contents;
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 220 / 64;
			object-fit: contain;
		}
	}
}