/* CSS Document */

#detail{
	margin-bottom: clamp(64px, 14.4vw, 96px);
	}

#detailHeader{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	}
	#detailHeader > *{
		grid-column: 2;
		}
	#detailHeader figure{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		z-index: -1;
		}
		#detailHeader figure img{
			display: block;
			width: 100%;
			height: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
			}
	#detailHeader #detailTitle{}
		#detailHeader #detailTitle:nth-last-child(2){
			margin-top: clamp(40px, 7.2vw, 48px);
			}
		#detailHeader #detailTitle:nth-last-child(3){
			grid-row: 2 / 4;
			align-self: end;
			}
	@media (min-width: 1200px) {
		#detailHeader figure img{
			aspect-ratio: 1400 / 500;
			}
		}

#detailTitle{
	display: grid;
	grid-gap: 8px;
	padding: clamp(16px, 3.6vw, 24px);
	background: var(--color-point);
	color: #fff;
	}
	#detailTitle h2{
		font-family: var(--font-min);
		font-size: clamp(24px, 4.8vw, 32px);
		line-height: 1.65;
		margin-top: -0.35em;
		}
	#detailHeader h2+div{
		display: flex;
		justify-content: start;
		font-size: 14px;
		}
	#detailHeader time{
		display: grid;
		place-items: center;
		height: 27px;
		border: 1px solid rgba(255, 255, 255, 0.4);
		padding: 4px 24px;
		}
	#detailHeader time+div{
		display: grid;
		place-items: center;
		height: 27px;
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-left: none;
		padding: 4px 24px;
		}
	@media (min-width: 1200px) {
		#detailTitle{
			padding: 32px 60px;
			}
		}

#detailBody{
	justify-self: center;
	width: min(var(--wrap-fit), 940px);
	margin-top: clamp(32px, 8.4vw, 56px);
	}

#detailIndex{
	width: min(var(--wrap-fit), 940px);
	margin: clamp(32px, 7.2vw, 48px) auto 0 auto;
	background: #fff;
	border: 2px solid var(--color-point);
	color: var(--color);
	overflow: hidden;
	}
	#detailIndex h3{
		display: grid;
		grid-template-columns: 16px auto;
		align-items: center;
		justify-content: start;
		grid-gap: 8px;
		margin: clamp(16px, 3.6vw, 24px);
		font-size: clamp(16px, 3vw, 20px);
		font-weight: 500;
		}
		#detailIndex h3:before{
			content: "";
			width: 100%;
			aspect-ratio: 1;
			-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: 100%;
			background: var(--color-point);
			}
	#detailIndex h3+div{
		margin: clamp(16px, 3.6vw, 24px);
		}
	#detailIndex li{
		margin-top: clamp(4px, 1.2vw, 8px);
		}
		#detailIndex li a{
			display: inline-grid;
			grid-template-columns: 4px auto;
			grid-gap: 8px;
			color: inherit;
			font-weight: 500;
			line-height: 1.65;
			}
			#detailIndex li a:hover{
				color: var(--theme-color);
				}
			#detailIndex li a:before{
				content: "";
				width: 100%;
				height: 1em;
				-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: 100%;
				background: var(--color-point);
				transform: translateY(40%);
				}
	#detailIndex span{
		display: block;
		}
	#detailIndex menu{
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		justify-content: center;
		grid-gap: 16px;
		margin: 0;
		padding: clamp(4px, 1.2vw, 8px);
		background: #ebeef1;
		font-size: clamp(10px, 2.1vw, 14px);
		text-align: center;
		cursor: pointer;
		}
		#detailIndex menu:after{
			content: "";
			width: 10.71px;
			height: 6.06px;
			-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%;
			background: currentColor;
			}
		#detailIndex menu.open{}
			#detailIndex menu.open:after{
				transform: rotate(180deg);
				}
	@media (min-width: 1200px) {
		#detailIndex h3{
			margin: 32px 32px 24px 32px;
			}
		#detailIndex h3+div{
			margin: 24px 32px 32px 32px;
			}
		}

#detailContents{
	width: var(--wrap);
	margin: auto;
	}
	#detailContents section{
		display: grid;
		grid-template-columns: 1fr min(100%, 940px) 1fr;
		margin-top: clamp(48px, 12vw, 80px);
		scroll-margin-top: 16px;
		}
	#detailContents section > *{
		grid-column: 2;
		}
	#detailContents section .column{
		grid-column: 1 / 4;
		}

#detailTag{
	display: grid;
	grid-gap: 16px 24px;
	width: var(--wrap);
	max-width: 940px;
	margin: clamp(64px, 14.4vw, 96px) auto;
	}
	#detailTag h3{
		display: grid;
		grid-template-columns: 3px auto;
		grid-gap: 10px;
		font-weight: 500;
		}
		#detailTag h3:before{
			content: "";
			background: var(--color-point);
			transform: translateY(0.05em);
			}
	#detailTag ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 4px;
		}
	#detailTag li{
		display: contents;
		}
	#detailTag a{
		display: grid;
		place-items: center;
		min-height: 24px;
		padding: 0 8px;
		background: #fff;
		border: 1px solid var(--color-border);
		color: inherit;
		font-size: clamp(10px, 1.8vw, 12px);
		text-decoration: none;
		}
		#detailTag a[data-area]{
			grid-template-columns: 6px auto;
			grid-gap: 8px;
			}
		#detailTag a[data-area]:before{
			content: "";
			width: 100%;
			background: var(--color-theme);
			border-radius: 100%;
			aspect-ratio: 1;
			}
		#detailTag a[data-area="1"]:before{
			background: var(--color-area1);
			}
		#detailTag a[data-area="2"]:before{
			background: var(--color-area2);
			}
		#detailTag a[data-area="3"]:before{
			background: var(--color-area3);
			}
		#detailTag a[data-area="4"]:before{
			background: var(--color-area4);
			}
	@media (min-width: 576px) {
		#detailTag h3{
			display: grid;
			grid-template-columns: 4px auto;
			grid-gap: 10px;
			font-weight: 500;
			}
		}
	@media (min-width: 992px) {
		#detailTag{
			grid-template-columns: auto auto;
			justify-content: start;
			}
		#detailTag h3{
			align-self: start;
			margin-top: 2px;
			white-space: nowrap;
			}
		}


/*#detailShare{
	display: flex;
	justify-content: center;
	margin-top: clamp(48px, 9.6vw, 64px);
	}
	#detailShare dl{
		position: relative;
		display: grid;
		grid-gap: 16px 32px;
		margin: clamp(10px, 2.1vw, 14px) 0 0 0;
		padding: 32px;
		border: 1px solid currentColor;
		border-radius: 4px;
		}
	#detailShare dt{
		position: absolute;
		top: 0;
		left: 50%;
		padding: 0 0.6em;
		background: #fff;
		font-size: clamp(20px, 4.2vw, 28px);
		font-weight: 700;
		text-align: center;
		white-space: nowrap;
		transform: translate(-50%, -50%);
		z-index: 1;
		}
	#detailShare dd{
		grid-row: 2;
		}
	#detailShare a{
		grid-row: 1;
		display: block;
		width: 48px;
		height: 48px;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 75% 75%;
		background: currentColor;
		color: inherit;
		overflow: hidden;
		}
		#detailShare a[href*="facebook.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>');
			}
		#detailShare a[href*="twitter.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>');
			}
		#detailShare a[href*="line.me"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,12C28,5.76,21.72.66,14,.66S0,5.76,0,12c0,5.62,5,10.32,11.71,11.21.45.1,1.07.3,1.23.69A3,3,0,0,1,13,25.19s-.17,1-.2,1.2-.28,1.38,1.21.75S22.06,22.39,25,19h0A10.09,10.09,0,0,0,28,12ZM9.06,15.37a.27.27,0,0,1-.27.27H4.86a.27.27,0,0,1-.27-.27h0V9.26A.27.27,0,0,1,4.86,9h1a.27.27,0,0,1,.27.27v4.85H8.79a.27.27,0,0,1,.27.27Zm2.37,0a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,10.17,9h1a.27.27,0,0,1,.27.27Zm6.76,0a.27.27,0,0,1-.27.27H16.78a.23.23,0,0,1-.07-.07l-2.8-3.78v3.63a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,12.65,9h1.18v0h0l0,0,2.8,3.77V9.26A.27.27,0,0,1,16.93,9h1a.27.27,0,0,1,.27.27Zm5.42-5.12a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H19.41a.27.27,0,0,1-.27-.27h0V9.27h0A.27.27,0,0,1,19.41,9h3.93a.27.27,0,0,1,.27.27Z"/></svg>');
			}
*/
#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(16px, 3.6vw, 24px) 0;
	margin: clamp(64px, 14.4vw, 96px) 0;
	}
	#recommend > *{
		grid-column: 2;
		}
	#recommend h2{
		display: grid;
		grid-template-columns: 3px auto;
		grid-gap: 10px;
		font-size: clamp(18px, 3.6vw, 24px);
		font-weight: 700;
		line-height: 1.65;
		word-break: keep-all;
		}
		#recommend h2:before{
			content: "";
			margin: 0.3em 0;
			background: var(--color-point);
			transform: translateY(0.1em);
			}
	#recommend dl{
		position: relative;
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 8px;
		}
		#recommend dl:before{
			content: "";
			grid-area: photo;
			background: var(--dummy);
			background-size: contain;
			aspect-ratio: 2 / 1;
			}
	#recommend dt{
		font-weight: 500;
		line-height: 1.65;
		}
	#recommend dd{
		display: contents;
		}
		#recommend dd img{
			grid-area: photo;
			width: 100%;
			height: 100%;
			aspect-ratio: 2 / 1;
			object-fit: cover;
			}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#recommend .slick-slider{
		display: grid;
		grid-template-columns: clamp(20px, 3.6vw, 24px) minmax(0, 1fr) clamp(20px, 3.6vw, 24px);
		}
		#recommend .slick-slider:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 2 / 1;
			margin: 0 4px;
			}
	#recommend .slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		}
	#recommend .slick-list:only-child{}
		#recommend .slick-list:only-child .slick-track{
			margin: 0;
			transform: none !important;
			}
	#recommend .slick-slide{
		margin: 0 4px;
		}
	#recommend .slick-arrow{
		grid-row: 1;
		align-self: center;
		}
	#recommend .slick-prev{
		grid-column: 1;
		}
	#recommend .slick-next{
		grid-column: 3;
		justify-self: end;
		}
	@media (max-width: 991.98px) {
		#recommend .slick-list{
			overflow: visible;
			}
		}
	@media (min-width: 576px) {
		#recommend h2{
			grid-template-columns: 4px auto;
			grid-gap: 0 16px;
			}
		}
	@media (min-width: 576px) and (max-width: 767.98px) {
		#recommend .slick-slider:before{
			width: calc((100% / 1) - 8px);
			}
		}
	@media (min-width: 768px) and (max-width: 991.98px) {
		#recommend .slick-slider:before{
			width: calc((100% / 2) - 8px);
			}
		}
	@media (min-width: 992px) {
		#recommend .slick-slider:before{
			width: calc((100% / 3) - 40px);
			}
		#recommend .slick-list{
			margin: 0 -20px;
			}
		#recommend .slick-slide{
			margin: 0 20px;
			}
		}
	@media (min-width: 1200px) {
		#recommend .slick-slider{
			margin: 0 -24px;
			}
		}

.button{
	display: grid;
	grid-template-columns: auto 18px;
	grid-gap: 16px;
	align-items: center;
	width: min(100%, 320px);
	min-height: 50px;
	margin: 0 auto;
	padding: 4px 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	color: var(--color);
	text-align: center;
	line-height: 1.65;
	text-decoration: none;
	}
	.button:after{
		content: "";
		aspect-ratio: 1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0"/></svg>') center no-repeat;
		-webkit-mask-size: 17.16px 15.71px;
		background: currentColor;
		}

.title{
	display: grid;
	grid-template-columns: 13px auto;
	grid-gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-min);
	font-size: clamp(20px, 4.2vw, 28px);
	font-weight: 700;
	line-height: 1.65;
	}
	.title:before{
		content: "";
		aspect-ratio: 13 / 31;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 31"><circle cx="2" cy="2" r="2" fill="%23e39b88"/><circle cx="2" cy="11" r="2" fill="%2393889f"/><circle cx="2" cy="20" r="2" fill="%23ceba79"/><circle cx="2" cy="29" r="2" fill="%238bbda7"/></svg>') left center repeat-x;
		background-size: contain;
		transform: translateY(0.3em);
		}

.photos{}
	.photos:not(:first-child){
		margin-top: clamp(24px, 4.8vw, 32px);
		}
	.photos li{
		display: grid;
		grid-template-areas: 'main';
		background: var(--dummy) center no-repeat;
		background-size: cover;
		}
		.photos li[data-caption]:not([data-caption=""]){}
			.photos li[data-caption]:not([data-caption=""]):after{
				content: attr(data-caption);
				grid-area: main;
				align-self: end;
				display: grid;
				align-content: end;
				width: 100%;
				padding: clamp(16px, 3.6vw, 24px) clamp(28px, 4.8vw, 32px);
				background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
				color: #fff;
				line-height: 1.65;
				pointer-events: none;
				}
		.photos li img{
			grid-area: main;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
	.photos .slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		}
	.photos .slick-list{
		grid-column: 2;
		grid-row: 1;
		}
	.photos .slick-slide{
		display: grid !important;
		}
	.photos .slick-arrow{
		grid-row: 1;
		align-self: center;
		width: clamp(40px, 7.2vw, 48px);
		background: #fff;
		border-color: var(--color-border);
		color: var(--color);
		}
	.photos .slick-prev{
		grid-column: 1;
		}
	.photos .slick-next{
		grid-column: 3;
		justify-self: end;
		}
	.photos .slick-dotted{}
		.photos .slick-dotted li[data-caption]:not([data-caption=""]):after{
			padding-bottom: 40px;
			}
	.photos .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;
		}
		.photos .slick-dots li{
			width: 8px;
			aspect-ratio: 1;
			border: 1px solid #fff;
			border-radius: 100%;
			transform-origin: center center;
			opacity: 0.4;
			overflow: hidden;
			}
			.photos .slick-dots li:only-child{
				display: none;
				}
			.photos .slick-dots li.slick-active{
				background: #fff;
				opacity: 1;
				}
		.photos .slick-dots button{
			opacity: 0;
			}
	@media (max-width: 1199.98px) {
		.photos .slick-prev{
			transform: translateX(50%);
			}
		.photos .slick-next{
			transform: translateX(-50%);
			}
		}
	@media (min-width: 1200px) {
		.photos .slick-prev{
			transform: translateX(-50%);
			}
		.photos .slick-next{
			transform: translateX(50%);
			}
		}

.text{
	color: var(--color-pale);
	line-height: 1.65;
	}
	.text:not(:first-child){
		margin-top: clamp(24px, 5.4vw, 36px);
		}

.movie{}
	.movie:not(:first-child){
		margin-top: clamp(24px, 5.4vw, 36px);
		}
	.movie iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		}

.links{}
	.links:not(:first-child){
		margin-top: clamp(64px, 12vw, 80px);
		}
	.links ul{
		display: grid;
		grid-gap: clamp(16px, 3.6vw, 24px);
		justify-content: center;
		}
	@media (max-width: 991.98px) {
		.links li{
			width: min(100%, 300px);
			margin: 0 auto;
			}
		}
	@media (min-width: 992px) {
	.links ul{
		align-items: center;
		}
		.links li{
			grid-row: 1;
			}
	}

.documents{}
	.documents:not(:first-child){
		margin-top: clamp(64px, 12vw, 80px);
		}
	.documents h4{
		display: grid;
		grid-template-columns: 3px auto;
		grid-gap: 10px;
		font-size: clamp(20px, 3.6vw, 24px);
		font-weight: 700;
		}
		.documents h4:before{
			content: "";
			background: var(--color-point);
			transform: translateY(0.1em);
			}
	.documents h4+div{
		margin-top: clamp(16px, 3.6vw, 24px);
		}
	.documents ul{
		display: grid;
		grid-gap: clamp(16px, 3.6vw, 24px);
		justify-content: start;
		}
	.documents a{
		grid-template-columns: 16px auto;
		}
		.documents a:after{
			order: -1;
			-webkit-mask-image: 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,0v12h12V0H4Zm11,11H5V1h10v10Z"/></svg>') ;
			-webkit-mask-size: 16px 16px;
			background: var(--color-point);
			}
	@media (min-width: 576px) {
		.documents h4{
			grid-template-columns: 4px auto;
			}
		}

.column{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px) clamp(24px, 4.8vw, 32px);
	padding: clamp(24px, 4.8vw, 32px);
	background: #fff;
	border: 3px solid var(--color-point);
	color: var(--color);
	overflow: hidden;
	}
	.column:not(:first-child){
		margin-top: clamp(64px, 12vw, 80px);
		}
	.column h4{
		display: grid;
		grid-template-columns: 13px auto;
		grid-gap: 16px;
		font-size: clamp(20px, 4.2vw, 28px);
		font-weight: 700;
		line-height: 1.65;
		}
		.column h4:before{
			content: "";
			aspect-ratio: 13 / 31;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 31"><circle cx="2" cy="2" r="2" fill="%23e39b88"/><circle cx="2" cy="11" r="2" fill="%2393889f"/><circle cx="2" cy="20" r="2" fill="%23ceba79"/><circle cx="2" cy="29" r="2" fill="%238bbda7"/></svg>') left center repeat-x;
			background-size: contain;
			transform: translateY(0.3em);
			}
	.column h4+div{
		display: grid;
		grid-gap: clamp(16px, 3.6vw, 24px);
		}
	.column h5{
		color: var(--theme-color);
		font-size: clamp(16px, 3vw, 20px);
		font-weight: 500;
		line-height: 1.65;
		}
	.column h5+div+div{
		justify-self: center;
		margin: clamp(12px, 2.4vw, 16px) 0;
		}
	.column figure{}
		.column figure img{
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
	@media (max-width: 575.98px) {
		.column h4+div{
			order: 1;
			}
		}
	@media (min-width: 576px) {
		.column{
			grid-template-columns: min(40vw, 390px) auto;
			align-items: start;
			border-width: 4px;
			}
		.column h4{
			grid-column: 1 / 3;
			}
		.column figure{
			grid-column: 1;
			grid-row: 2;
			}
		.column h4+div{
			grid-column: 2;
			grid-row: 2;
			}
			.column h4+div:last-child{
				grid-column: 1 / 3;
				}
		}

.comment{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	}
	.comment [src="noImg.png"]{
		background: var(--dummy) center no-repeat;
		background-size: cover;
		}
	.comment:not(:first-child){
		margin-top: clamp(24px, 5.4vw, 36px);
		}
	.comment dl{
		display: grid;
		line-height: 1.65;
		}
		.comment dl:before{
			content: "";
			position: relative;
			grid-column: 2;
			grid-row: 1;
			width: 0;
			height: 0;
			margin-top: 16px;
			border: 12px solid transparent;
			transform: scale(1, 0.667);
			z-index: 1;
			}
	.comment dt{
		justify-self: center;
		font-size: clamp(10px, 2.1vw, 14px);
		}
	.comment dd{}
		.comment dd img{
			display: block;
			width: 100%;
			aspect-ratio: 1;
			border-radius: 100%;
			object-fit: cover;
			}
	.comment dt+dd{
		position: relative;
		grid-row: 1 / 4;
		align-self: start;
		padding: clamp(16px, 3.6vw, 24px);
		background: var(--color-variable);
		color: var(--color);
		}
		.comment dt+dd:last-child{
			grid-row: 1;
			}
	.comment dt+dd+dd{
		margin-bottom: 4px;
		grid-row: 1;
		}
	.commentLeft{
		grid-template-columns: 80px clamp(24px, 5.4vw, 36px) auto;
		}
		.commentLeft:before{
			border-right-color: var(--color-variable) !important;
			justify-self: end;
			}
		.commentLeft dt+dd{
			grid-column: 3;
			}
	.commentRight{
		grid-template-columns: auto clamp(24px, 5.4vw, 36px) 80px;
		}
		.commentRight:before{
			border-left-color: var(--color-variable) !important;
			}
		.commentRight dt{
			grid-column: 3;
			}
		.commentRight dt+dd{
			grid-column: 1;
			}

.spot{
	display: grid;
	grid-gap: clamp(28px, 6.6vw, 44px);
	}
	.spot:not(:first-child){
		margin-top: clamp(24px, 5.4vw, 36px);
		}
	.spot dl{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		grid-gap: clamp(16px, 3vw, 20px);
		line-height: 1.65;
		}
	.spot dt{
		color: var(--theme-color);
		font-weight: 500;
		}
	.spot dt+dd{
		margin-bottom: auto;
		color: var(--color-pale);
		font-size: clamp(12px, 2.1vw, 14px);
		}
		.spot dt+dd:empty{
			display: none;
			}
	.spot dd+dd{
		display: contents;
		}
		.spot dd+dd figure{
			order: -1;
			}
		.spot dd+dd img{
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
		.spot dd+dd a{
			align-self: center;
			margin-top: clamp(16px, 3.6vw, 24px);
			}
	@media (min-width: 576px) {
		.spot{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 992px) {
		.spot{
			grid-template-columns: repeat(3, 1fr);
			}
		.spot dd+dd figure:after{
			font-size: 14px;
			}
		}

.map{
	grid-column: 1 / 4 !important;
	display: grid;
	grid-gap: clamp(32px, 7.2vw, 48px);
	}
	.map:not(:first-child){
		margin-top: clamp(32px, 7.2vw, 48px);
		}
	.map menu{
		display: grid;
		grid-template-columns: 16px auto 12px;
		place-items: center;
		grid-gap: 16px;
		width: min(100%, 300px);
		min-height: 50px;
		margin:  auto;
		padding: 4px 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		color: var(--color);
		cursor: pointer;
		}
		.map menu:before{
			content: "";
			width: 100%;
			aspect-ratio: 1;
			-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;
			background: var(--color-point);
			}
		.map menu:after{
			content: "";
			width: 100%;
			aspect-ratio: 1;
			-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;
			background: currentColor;
			}
		.map menu.open{}
			.map menu.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;
				}
	.map menu+span{
		display: grid;
		transform-origin: center top;
		}

.mapBody{
	margin-bottom: clamp(4px, 1.2vw, 8px);
	background: #fff;
	border: 1px solid var(--color-border);
	color: var(--color);
	overflow: hidden;
	}
	.mapBody > div[id*="gMap"]{
		margin: 8px;
		padding-top: min(65vw, 550px);
		background: #ccc;
		}
	.mapBody+p{
		margin: 0 auto;
		font-size: 14px;
		line-height: 1.65;
		}
	@media (min-width: 992px) {
		.mapBody{
			display: grid;
			grid-template-columns: auto 370px;
			position: relative;
			}
		}

.mapList{
	padding: clamp(16px, 3.6vw, 24px);
	overflow-y: auto;
	}
	.mapList ul{
		display: grid;
		grid-gap: clamp(14px, 2.4vw, 16px) clamp(16px, 3.6vw, 24px);
		counter-reset: count;
		}
	.mapList li{
		display: grid;
		grid-template-columns: 24px auto;
		justify-content: start;
		grid-gap: 16px;
		color: inherit;
		font-weight: 500;
		cursor: pointer;
		line-height: 1.65;
		text-decoration: none;
		}
		.mapList li:before{
			counter-increment: count;
			content: counter(count);
			display: grid;
			place-items: center;
			width: 100%;
			aspect-ratio: 1;
			padding-bottom: 0.05em;
			background: var(--color);
			border-radius: 100%;
			color: #fff;
			line-height: 1;
			transform: translateY(0.25em);
			}
	@media (max-width: 991.98px) {
		.mapList{
			max-height: min(50vw, 300px);
			}
		}
	@media (min-width: 576px) and (max-width: 991.98px) {
		.mapList ul{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 992px) {
		.mapList{
			position: absolute;
			right: 0;
			top: 0;
			width: 370px;
			height: 100%;
			}
		}

.fr-view{
	line-height: 1.65;
	}

.slide{
	opacity: 0;
	transition: opacity 0.2s ease-out;
	}
	.slide.slick-initialized{
		opacity: 1 !important;
		}
	.slide .slick-arrow{
		width: clamp(40px, 7.2vw, 48px);
		background: #fff;
		color: var(--color);
		align-items: center;
		}