/* CSS Document */

[data-type="ncn"],
[data-type="n-csc"],
[data-type="sanjokaiin"]{
	#title{
		background: unset;
		&:has(#photo){
			background: unset;
		}
	}
	#outline{
		background: unset;
		& h3{
			background: #fff;
		}
		& details{
			border-color: currentColor;
		}
	}
	#share{
		background: unset;
		& dl{
			border-color: currentColor;
		}
	}
	.column{
		border-color: currentColor;
		&:before{
			background: #fff;
		}
	}
}

#detail{
	margin-top: 16px;
	overflow: hidden;
}

#title{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: linear-gradient(transparent, #dfe9f2 120px, #dfe9f2 calc(100% - 120px), transparent);
	padding-bottom: clamp(96px, calc(160 / 1200 * 100dvw), 160px);
	&>*{
		grid-column: 2;
	}
	&:has(#photo){
		background: linear-gradient(transparent clamp(480px, calc(560 / 1200 * 100dvw), 560px), #dfe9f2 calc(clamp(480px, calc(560 / 1200 * 100dvw), 560px) + 120px), #dfe9f2 calc(100% - 120px), transparent);
		& h2{
			grid-column: 1 / 4;
			grid-row: 1;
			justify-self: center;
			align-self: end;
			width: min(var(--wrap-fit), 1302px);
			margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
			padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
			border-radius: 0 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
			color: #fff;
			text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			z-index: 1;
		}
	}
	&:not(:has(#outline)):has(.fr-view.none){
		margin-bottom: calc(0px - clamp(48px, calc(96 / 1200 * 100dvw), 96px));
	}
	& h2{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		margin-top: clamp(40px, calc(72 / 1200 * 100dvw), 72px);
		letter-spacing: 0.025em;
	}
	#outline{
		justify-self: center;
		width: min(100%, 1040px);
		margin-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
	}
	#photo{
		grid-column: 1 / 4;
		grid-row: 1;
		justify-self: center;
		width: min(var(--wrap-fit), 1302px);
		margin-inline: auto;
	}
}

#outline{
	display: grid;
	[lsc-lb="List"]{
		display: none;
	}
	& h3{
		grid-column: 1;
		grid-row: 1 / 3;
		justify-self: start;
		align-self: start;
		margin-left: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		padding: 0 16px;
		background: #dfe9f2;
		color: var(--color-theme);
		font-family: "futura-pt", sans-serif;
		font-weight: 500;
		font-size: 32px;
		letter-spacing: 0.05em;
		line-height: 1;
		z-index: 1;
	}
	& details{
		grid-column: 1;
		grid-row: 2 / 4;
		align-self: start;
		display: grid;
		border: 4px solid #fff;
		border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		&::details-content{
			all: unset;
		}
		& summary{
			order: 1;
			margin-top: 24px;
		}
		&:not(:has(li:nth-child(6))) summary{
			display: none;
		}
		&:not([open]) li:nth-child(n+6){
			display: none;
		}
	}
	& summary{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		padding: 0.5em 1em;
		font-size: 14px;
		letter-spacing: 0.048em;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			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" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="8" y1="1.5" x2="8" y2="14.5"/><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			-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-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>');
		}
	}
	& summary+div{
		margin-inline: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		margin-top: clamp(32px, calc(40 / 1200 * 100dvw), 40px);
	}
	& ul{
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(li:nth-child(6))){
			padding-bottom: 16px;
		}
		& span{
			display: grid;
			grid-row-gap: 8px;
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1em;
		color: inherit;
		font-weight: 500;
		letter-spacing: 0.025em;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 20px;
			background: var(--color-theme) 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: white; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><polyline points="14 8.5 10 12.5 6 8.5"/></svg>') no-repeat center / contain;
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
	}
}

#photo{
	position: relative;
	&:before{
		content: "";
		display: block;
	}
	@media (max-width: 767.98px) {
		&:before{
			aspect-ratio: 3 / 2;
		}
	}
	@media (min-width: 768px) {
		&:before{
			height: clamp(480px, calc(560 / 1200 * 100dvw), 560px);
		}
	}
	& img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		object-fit: cover;
	}
}

#article{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	overflow: hidden;
	& section{
		&:nth-child(n+2){
			.title{
				margin-top: clamp(64px, calc(120 / 1200 * 100dvw), 120px);
			}
		}
	}
	.photo{
		justify-self: center;
		width: min(100%, 980px);
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
		&:not(:first-child){
			margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
		}
	}
	.text{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		.photo+&{
			margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
		}
	}
	.article{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	.comment{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
	}
	.movie{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	.map{
		margin-top: clamp(64px, calc(96 / 1200 * 100dvw), 96px);
	}
	.documents{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(64px, calc(96 / 1200 * 100dvw), 96px);
	}
	.column{
		justify-self: center;
		width: min(100%, 1040px);
		margin-top: clamp(64px, calc(104 / 1200 * 100dvw), 104px);
	}
	.links{
		justify-self: center;
		width: min(100%, 940px);
		margin-top: clamp(48px, calc(72 / 1200 * 100dvw), 72px);
	}
	[lsc-lt="List"]{
		display: none;
	}
}

#share{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	justify-items: center;
	background: linear-gradient(transparent, #dfe9f2 120px);
	padding: clamp(96px, calc(120 / 1200 * 100dvw), 120px) 0 clamp(48px, calc(80 / 1200 * 100dvw), 80px) 0;
	& dl{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 16px;
		padding: clamp(16px, calc(32 / 1200 * 100dvw), 32px) clamp(40px, calc(80 / 1200 * 100dvw), 80px);
		border: 4px solid #fff;
		border-radius: clamp(40px, calc(64 / 1200 * 100dvw), 64px);
	}
	& dt{
		font-weight: 500;
		font-size: 24px;
		font-family: "futura-pt", sans-serif;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}
	& dd{
		& a{
			display: block;
			aspect-ratio: 1;
			width: 32px;
			font-size: 0;
			&[href*="facebook.com"]{
				background: #007bf8 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M27.83,48v-16.82c1.62,0,5.65-.12,5.65-.12l.91-6.81h-6.55s.04-3.63.04-5.55c.15-1.59,1.17-2.41,2.7-2.56,1.17-.1,3.93-.27,3.93-.27v-6.19s-6.22-.67-9.12.51c-3.46,1.41-4.9,4.26-5.08,7.84-.09,1.72-.02,3.46-.03,5.2v.99c-1.72,0-4.98-.02-4.98-.02h-1.14l.03,6.99h6.06v16.81h7.57Z"/></svg>') no-repeat center bottom / 95%;
				border-radius: 100%;
			}
			&[href*="line.me"]{
				background: #00c74a url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M26.67,14.49c0-4.77-4.79-8.66-10.67-8.66s-10.67,3.88-10.67,8.66c0,4.28,3.8,7.86,8.92,8.54.35.08.82.23.94.53.11.27.07.69.03.96,0,0-.13.75-.15.91-.05.27-.21,1.05.92.58,1.14-.48,6.14-3.62,8.38-6.19h0c1.55-1.7,2.29-3.42,2.29-5.33ZM12.23,17.05c0,.11-.09.2-.2.2h-3c-.11,0-.2-.09-.2-.2h0v-4.66c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v3.7h2.04c.11,0,.2.09.2.2v.76ZM14.04,17.05c0,.11-.09.2-.2.2h-.76c-.11,0-.2-.09-.2-.2v-4.66c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v4.66ZM19.19,17.05c0,.11-.09.2-.2.2h-.75s-.04,0-.05,0c0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0,0,0,0,0,0,0-.01,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0-.01,0,0,0,0,0,0,0-.02-.01-.04-.03-.05-.05l-2.13-2.88v2.76c0,.11-.09.2-.2.2h-.76c-.11,0-.2-.09-.2-.2v-4.66c0-.11.09-.2.2-.2h.75s0,0,0,0c0,0,0,0,.01,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0h0s0,0,.01,0c0,0,0,0,0,0,0,0,0,0,.01,0h0s0,0,.01,0c0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01,0,0,0,0,0,0,0,0,0,0,0,.01.01h0s.01.02.02.02l2.13,2.88v-2.77c0-.11.09-.2.2-.2h.76c.11,0,.2.09.2.2v4.66ZM23.32,13.15c0,.11-.09.2-.2.2h-2.04v.79h2.04c.11,0,.2.09.2.2v.76c0,.11-.09.2-.2.2h-2.04v.79h2.04c.11,0,.2.09.2.2v.76c0,.11-.09.2-.2.2h-3c-.11,0-.2-.09-.2-.2h0v-4.65h0c0-.12.09-.21.2-.21h3c.11,0,.2.09.2.2v.76Z"/></svg>') no-repeat center bottom / contain;
				border-radius: 8px;
			}
			&[href*="x.com"]{
				background: #000;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18.98,13.55L30.64,0h-2.76l-10.12,11.77L9.67,0H.34l12.22,17.79L.34,32h2.76l10.69-12.42,8.54,12.42h9.32l-12.68-18.45h0ZM15.2,17.95l-1.24-1.77L4.1,2.08h4.24l7.95,11.38,1.24,1.77,10.34,14.79h-4.24l-8.44-12.07h0Z"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(56px, calc(104 / 1200 * 100dvw), 104px) 0 clamp(72px, calc(128 / 1200 * 100dvw), 128px) 0;
	background: #b6d0de;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "RECOMMEND";
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		align-self: center;
		padding: 0 0.5em;
		background: #b6d0de;
		color: #edf2f7;
		font-weight: 400;
		font-size: clamp(40px, calc(72 / 768 * 100dvw), 72px);
		font-family: "futura-pt", sans-serif;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		line-height: 1;
		text-align: center;
		z-index: 1;
	}
	&:after{
		content: "";
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		border-bottom: 2px solid #edf2f7;
	}
	& h2{
		margin-top: 32px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		display: grid;
		margin-top: 24px;
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 20px;
		}
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 8px;
		}
	}
	& h3{
		margin-inline: 8px;
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	.slide{
		grid-column: 1 / 4;
		justify-self: center;
		display: grid;
		width: min(var(--wrap-fit), 1280px);
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 248px), 1fr));
			grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		@media (min-width: 1400px) {
			grid-template-columns: auto var(--wrap) auto;
		}
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(33.33% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - (clamp(8px, calc(20 / 1200 * 100dvw), 20px) * 3)) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: calc(0px - clamp(8px, calc(12 / 1200 * 100dvw), 12px));
		@media (max-width: 1199.98px) {
			overflow: visible;
		}
	}
	.slick-slide{
		margin: 0 clamp(8px, calc(12 / 1200 * 100dvw), 12px);
	}
	.slick-arrow{
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
	.slick-next{
		justify-self: end;
	}
	.slick-dots{
		grid-column: 2;
		grid-row: 3;
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

.title{
	position: relative;
	display: grid;
	color: var(--color-theme);
	font-weight: 700;
	font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
	letter-spacing: 0.1em;
	&:before{
		content: "";
		position: absolute;
		right: calc(100% + 1em);
		top: 0;
		width: 100dvw;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		transform: translateY(calc(0.875em - 50%));
	}
	&:empty{
		display: none;
	}
}

.photo{
	display: grid;
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-row-gap: 16px;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dt{
		order: 1;
		font-weight: 500;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		letter-spacing: 0.05em;
		text-align: center;
		&:empty{
			display: none;
		}
	}
	& dd{
		& a{
			display: block;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	.slide{
		display: grid;
		.slick-prev{
			grid-column: 1;
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}
	.slick-arrow{
		filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
	}
	.slick-dots{
		color: #ccdce8;
	}
	@media (max-width: 575.98px) {
		.slick-slider{
			grid-gap: 24px;
		}
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1;
			overflow: visible;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 2;
		}
	}
	@media (min-width: 576px) {
		.slick-slider{
			grid-template-columns: auto 1fr auto;
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(8px, calc(32 / 1200 * 100dvw), 32px);
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 3 / 2;
			}
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
			margin-inline: calc(0px - clamp(16px, calc(60 / 1200 * 100dvw), 60px));
			overflow: visible;
		}
		.slick-slide{
			margin-inline: clamp(16px, calc(60 / 1200 * 100dvw), 60px);
		}
		.slick-arrow{
			grid-row: 1;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 3;
		}
	}
}

.article{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 264px), 1fr));
	grid-gap: clamp(40px, calc(48 / 1200 * 100dvw), 48px) clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	& dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 16px;
		&:has(img){
			grid-template-rows: auto auto 1fr;
		}
	}
	& dt{
		margin-inline: 8px;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
	}
	& dd{
		&:nth-of-type(1){
			margin-inline: 8px;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		}
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
		&:has(a){
			display: flex;
			justify-content: center;
			margin-top: 16px;
		}
		& a{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 180px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: #f9fbfc;
			border-radius: 20px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		}
	}
}

.comment{
	display: grid;
	grid-row-gap: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		align-items: start;
		column-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		text-align: center;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			background: var(--dummy);
			border-radius: 100%;
		}
	}
	& dt+dd{
		grid-row: 1 / 3;
		position: relative;
		margin-top: 16px;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		background: #f9fbfc;
		border-radius: 8px;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		&:before{
			content: "";
			position: absolute;
			top: calc(clamp(40px, calc(60 / 768 * 100dvw), 60px) - 24px);
			aspect-ratio: 1;
			width: 16px;
			background: #f9fbfc;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polygon points="16 16 2 8 16 0 16 16"/></svg>') no-repeat center / contain;
		}
	}
	& dd{
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
		}
	}
}

.commentLeft{
	grid-template-columns: clamp(80px, calc(120 / 768 * 100dvw), 120px) 1fr;
	&:before{
		grid-column: 1;
		grid-row: 1;
	}
	& dt+dd{
		grid-column: 2;
		&:before{
			left: 0;
			transform: translateX(-100%);
		}
	}
	& dd:has(img){
		grid-column: 1;
		grid-row: 1;
	}
}

.commentRight{
	grid-template-columns: 1fr clamp(80px, calc(120 / 768 * 100dvw), 120px);
	&:before{
		grid-column: 2;
		grid-row: 1;
	}
	& dt{
		grid-column: 2;
		grid-row: 2;
	}
	& dt+dd{
		grid-column: 1;
		&:before{
			left: 100%;
			transform: scale(-1, 1);
		}
	}
	& dd:has(img){
		grid-column: 2;
		grid-row: 1;
	}
}

.movie{
	display: grid;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	& iframe{
		order: 1;
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
}

.map{
	display: grid;
	padding-bottom: 8px;
	& summary{
		order: 1;
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 298px);
		min-height: 48px;
		padding: 0.25em 1.5em;
		background: #f9fbfc;
		border-radius: 24px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			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" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="8" y1="1.5" x2="8" y2="14.5"/><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>') no-repeat center / contain;
		}
		[open] &{
			margin-top: clamp(32px, calc(56 / 1200 * 100dvw), 56px);
			&:after{
				-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-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="1.5" y1="8" x2="14.5" y2="8"/></svg>');
			}
		}
	}
	& summary+div{
		display: grid;
		.mapBody{
			grid-column: 1;
			grid-row: 1;
			height: min(75dvw, 540px);
			overflow: hidden;
		}
		.mapList{
			grid-column: 1;
			grid-row: 2;
			background: #f9fbfc;
		}
		.mapText{
			margin-top: 16px;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
		}
		@media (max-width: 991.98px) {
			.mapBody{
				border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 0;
			}
			.mapList{
				height: 200px;
				border-radius: 0 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: 1fr clamp(280px, calc(368 / 1200 * 100dvw), 368px);
			.mapBody{
				grid-column: 1;
				grid-row: 1;
				border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			}
			.mapList{
				grid-column: 2;
				grid-row: 1;
				height: min(75dvw, 540px);
				border-radius: 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px) clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
			}
			.mapText{
				grid-column: 1 / 3;
			}
		}
	}
}

.mapBody{
	position: relative;
	background: #ccc;
	[LSC-LT="dummy"] &{
		padding: 16px;
	}
	[id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.mapList{
	overflow-y: auto;
	&:has(menu){
		display: grid;
		grid-template-rows: auto 1fr auto;
		overflow: hidden;
		& ul{
			padding: 0 clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
	}
	& ul{
		display: grid;
		grid-row-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	& li{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: counter(count);
			align-self: start;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 32px;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			text-align: center;
			letter-spacing: 0em;
			line-height: 1;
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		height: 48px;
		background: transparent;
		color: var(--color-theme);
		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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px;"><polyline points="20 8 12 16 4 8"/></svg>') no-repeat center / 24px;
		}
		&.mapListUp:before{
			transform: scale(1, -1);
		}
	}
}

.mapText{
	font-weight: 500;
}

.documents{
	& h4{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
	}
	& h4+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	& ul{
		display: grid;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1em;
		color: inherit;
		font-weight: 700;
		letter-spacing: 0.025em;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			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 18 18" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="17 12 17 17 1 17 1 12"/><polyline points="13 7 9 11 5 7"/><line x1="9" y1="2" x2="9" y2="11"/></svg>') no-repeat center / contain;
		}
	}
}

.column{
	position: relative;
	display: grid;
	padding: clamp(40px, calc(64 / 1200 * 100dvw), 64px) clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	border: 4px solid #fff;
	border-radius: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	&:before{
		content: "COLUMN";
		position: absolute;
		top: 0;
		left: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		padding: 0 16px;
		background: #edf2f7;
		color: var(--color-theme);
		font-family: "futura-pt", sans-serif;
		font-weight: 500;
		font-size: 32px;
		letter-spacing: 0.05em;
		line-height: 1;
		transform: translateY(-50%);
		z-index: 1;
	}
	& h4{
		margin-top: 16px;
		font-weight: 700;
		font-size: 18px;
	}
	& h4+div{
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& h4+div+div{
		align-self: start;
		display: flex;
		justify-content: center;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 180px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: #f9fbfc;
			border-radius: 20px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
	}
	@media (min-width: 768px) {
		&:has(img){
			grid-template-columns: auto 1fr;
			grid-template-rows: auto 1fr;
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 4;
			width: clamp(320px, calc(420 / 1200 * 100dvw), 420px);
			margin-right: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
		}
	}
}

.links{
	& ul{
		display: grid;
		justify-content: center;
		grid-gap: 16px clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		@media (min-width: 992px) {
			display: flex;
			& a{
				min-width: calc((100% - clamp(48px, calc(64 / 1200 * 100dvw), 64px)) / 3);
			}
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 298px);
		min-height: 48px;
		padding: 0.25em 1.5em;
		background: #f9fbfc;
		border-radius: 24px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0 0 6px rgba(11, 59, 99, 0.15));
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: 48px;
	background: #fff;
	border-radius: 24px;
	color: var(--color-theme);
	font-size: 0;
	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-linecap: round; stroke-linejoin: round; stroke-width: 3px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / 16px;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}

.slick-dots{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	place-content: center;
	grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	color: #fff;
	z-index: 1;
	& li{
		aspect-ratio: 1;
		width: 8px;
		background: currentColor;
		border-radius: 100%;
		overflow: hidden;
		&.slick-active{
			color: var(--color-theme);
		}
	}
	& button{
		opacity: 0;
	}
}






