/* CSS Document */

#siteName{}
	@media (max-width: 575.98px) {
		.scrollTop:not(.nav) #siteName a{
			transform: scale(2);
			}
		}
	@media (min-width: 576px) {
		.scrollTop #siteName a{
			transform: scale(2) translateY(4px);
			}
		}
	@media (min-width: 992px) {
		.scrollTop #siteName a{
			transform: scale(2.5) translateY(8px);
			}
		}

#pagePath{
	display: none;
	}

#hero{
	display: grid;
	grid-template-areas: 'main';
	background: #ccc;
	font-family: var(--font-min);
	}
	#hero #heroSlide{
		grid-area: main;
		}
	#hero #heroMovie{
		grid-area: main;
		}

#heroSlide{
	transition: opacity 0.2s ease-out;
	opacity: 0;
	}
	#heroSlide dl{
		position: relative;
		display: grid;
		grid-template-rows: 1fr auto auto;
		grid-template-areas: 'title' 'catch' 'link';
		grid-gap: clamp(20px, 3.6vw, 24px) 0;
		aspect-ratio: 390 / 540;
		padding: clamp(20px, 3.6vw, 24px);
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 57%);
		color: #fff;
		}
		#heroSlide dl:has(a){
			cursor: pointer;
			}
	#heroSlide dt{
		grid-area: title;
		display: grid;
		place-items: center;
		font-size: clamp(24px, 4.8vw, 32px);
		writing-mode: vertical-rl;
		text-orientation: upright;
		line-height: 1.65em;
		text-shadow: 0 0 5px #000;
		}
	#heroSlide dt+dd{}
		#heroSlide dt+dd:empty{
			display: none;
			}
	#heroSlide dd{}
		#heroSlide dd:nth-last-child(2){
			grid-area: catch;
			display: flex;
			align-items: center;
			grid-gap: 24px;
			font-size: 18px;
			line-height: 1.65em;
			word-break: keep-all;
			text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			}
			#heroSlide dd:nth-last-child(2):after{
				content: "";
				min-width: 1em;
				width: 100%;
				border-bottom: 1px solid rgba(255, 255, 255, 0.4);
				}
		#heroSlide dd:last-child{
			display: contents;
			}
		#heroSlide dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
			}
		#heroSlide dd a{
			grid-area: link;
			display: grid;
			justify-self: center;
			grid-template-columns: auto 4px;
			grid-gap: 16px;
			align-items: center;
			min-height: 40px;
			padding: 8px 16px;
			border: 1px solid rgba(255, 255, 255, 0.4);
			color: inherit;
			text-align: center;
			text-decoration: none;
			z-index: 1;
			}
			#heroSlide dd a: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 4 8"><polygon points="4 4 0 8 0 0 4 4"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}
	#heroSlide.slick-slider{
		display: grid;
		grid-template-areas: 'main';
		}
	#heroSlide.slick-dotted{}
		#heroSlide.slick-dotted dl{
			padding-bottom: 56px;
			}
	#heroSlide.slick-initialized{
		display: grid;
		grid-template-areas: 'main';
		opacity: 1;
		}
	#heroSlide .slick-list{
		grid-area: main;
		}
	#heroSlide .slick-slide{
		position: relative;
		}
	#heroSlide .slick-arrow{
		grid-area: main;
		align-self: center;
		position: relative;
		color: #fff;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
		}
	#heroSlide .slick-prev{
		justify-self: start;
		margin-left: 20px;
		}
	#heroSlide .slick-next{
		justify-self: end;
		margin-right: 20px;
		}
	#heroSlide .slick-dots{
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
		width: 100%;
		padding: 24px;
		z-index: 1;
		}
		#heroSlide .slick-dots li{
			width: 8px;
			height: 8px;
			border: 1px solid rgba(255, 255, 255, 0.4);
			border-radius: 4px;
			overflow: hidden;
			}
			#heroSlide .slick-dots li.slick-active{
				background: #fff;
				}
		#heroSlide .slick-dots button{
			opacity: 0;
			}
	@media (min-width: 576px) {
		#heroSlide dl{
			grid-template-columns: 1fr auto;
			grid-template-rows: 1fr auto;
			grid-template-areas: 'title title' 'catch link';
			align-items: center;
			aspect-ratio: 2 / 1;
			background: linear-gradient(rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.4));
			}
		#heroSlide dd{}
			#heroSlide dd a{
				justify-self: end;
				}
		}
	@media (min-width: 992px) {
		#heroSlide dl{
			grid-column-gap: 0;
			}
		#heroSlide dd{}
			#heroSlide dd a{
				width: 160px;
				}
		#heroSlide .slick-prev{
			margin-left: 60px;
			}
		#heroSlide .slick-next{
			margin-right: 60px;
			}
		}
	@media (min-width: 1200px) {
		#heroSlide dl{
			padding: 48px;
			}
		#heroSlide dt{
			font-size: 48px;
			}
		#heroSlide dd{}
			#heroSlide dd:nth-last-child(2){
				font-size: 20px;
				}
		}

#heroMovie{
	position: relative;
	aspect-ratio: 390 / 540;
	transition: opacity 0.2s ease-out;
	opacity: 0;
	overflow: hidden;
	}
	#heroMovie:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 77%);
		z-index: 1;
		}
	#heroMovie.done{
		opacity: 1;
		}
	#heroMovie div{
		display: contents;
		}
	#heroMovie .playerBox{
		top: 50% !important;
		left: 50% !important;
		width: 100% !important;
		height: 100% !important;
		transform: translate(-50%, -50%) scale(2.5);
		z-index: -1;
		}
	@media (min-width: 576px) {
		#heroMovie{
			aspect-ratio: 2 / 1;
			}
			#heroMovie:before{
				background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 57%);
				}
			#heroMovie .playerBox{
				transform: translate(-50%, -50%) scale(1.5);
				}
		}

#about{
	display: grid;
	grid-gap: clamp(32px, 6vw, 40px);
	width: var(--wrap);
	margin: 80px auto clamp(32px, 6vw, 40px) auto;
	}
	#about h2{
		justify-self: center;
		}
	#about h2+div{
		justify-self: center;
		display: grid;
		grid-gap: 24px;
		width: min(100%, 940px);
		font-family:  var(--font-go);
		line-height: 2;
		}
	#about h2+div+div{
		display: grid;
		justify-content: center;
		grid-gap: 24px;
		}
	#about .button{
		width: min(100%, 400px);
		margin: 0;
		}
	@media (min-width: 768px) {
		#about h2+div+div{
			grid-template-columns: repeat(2, auto);
			}
		#about .button{
			min-width: 330px;
			}
		}
	@media (min-width: 1200px) {
		#about h2{
			justify-self: start;
			}
		}

#map{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	width: var(--wrap);
	margin: 0 auto 128px auto;
	padding: clamp(16px, 3.6vw, 24px);
	border: 1px solid var(--color-border);
	}
	#map h2{
		display: none;
		}
	#map h2+div+div{
		margin: 8px 0;
		}
	@media (min-width: 992px) {
		#map{
			margin-top: 80px;
			}
		#map h2+div+div{
			margin: 16px 0;
			}
		}

#mapBody{
	display: grid;
	grid-gap: 16px 24px;
	}
	#mapBody > div[id*="gMap"]{
		padding-top: min(65vw, 550px);
		background: #ccc;
		}
	@media (min-width: 992px) {
		#mapBody{
			grid-template-columns: auto 370px;
			position: relative;
			}
		}

#mapList{
	border: 0 solid var(--color-border);
	border-width: 1px 0;
	overflow-y: auto;
	}
	#mapList ul{
		display: grid;
		}
	#mapList li{
		padding: 16px 0;
		font-family: var(--font-go);
		font-weight: 500;
		cursor: pointer;
		line-height: 1.65;
		text-decoration: none;
		}
		#mapList li:nth-child(n+2){
			border-top: 1px solid rgba(180, 180, 180, 0.2);
			}
	@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%;
			}
		}

#mapToggle{
	cursor: pointer;
	}

#recommend{
	display: grid;
	grid-gap: clamp(16px, 3.6vw, 24px);
	width: var(--wrap);
	margin: 80px auto;
	}
	#recommend h2{
		justify-self: center;
		}
	#recommend h2+div{
		display: grid;
		grid-gap: 16px 24px;
		margin-top: clamp(24px, 4.8vw, 32px);
		}
		#recommend h2+div p{
			font-family: var(--font-go);
			text-align: center;
			}
	#recommend section{
		margin-top: clamp(24px, 4.8vw, 32px);
		}
		#recommend section:not(.select){
			display: none;
			}
	#recommend h3{
		display: none;
		}
	#recommend h3+div{
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	#recommend dl{
		position: relative;
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 16px;
		}
		#recommend dl:before{
			content: "NO PHOTO";
			grid-area: photo;
			background: var(--dummy);
			background-size: contain;
			aspect-ratio: 1 / 0.667;
			}
		#recommend dl:after{
			content: "";
			border-top: 1px solid var(--color-border);
			}
		#recommend dl:has(a){
			cursor: pointer;
			}
	#recommend dt{
		font-family: var(--font-min);
		font-size: clamp(16px, 2.7vw, 18px);
		font-weight: 500;
		line-height: 1.65;
		}
	#recommend dt+dd{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-height: calc(1.65em * 2);
		overflow: hidden;
		line-height: 1.65;
		}
	#recommend dd{
		font-family: var(--font-go);
		}
	#recommend dd+dd{
		display: contents;
		}
		#recommend dd img{
			grid-area: photo;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			}
		#recommend dd a{
			order: 1;
			justify-self: end;
			display: grid;
			grid-template-columns: auto 10px;
			grid-gap: 16px;
			justify-content: end;
			color: inherit;
			letter-spacing: 0.05em;
			text-decoration: none;
			}
			#recommend dd a:after{
				content: "";
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 16"><path d="m1,16c-.26,0-.51-.1-.71-.29-.39-.39-.39-1.02,0-1.41l6.29-6.29L.29,1.71C-.1,1.32-.1.68.29.29S1.32-.1,1.71.29l7.71,7.71L1.71,15.71c-.2.2-.45.29-.71.29Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: var(--color-point);
				}
	#recommend .slick-slider{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-gap: clamp(24px, 4.8vw, 32px) 16px;
		}
	#recommend .slick-initialized{
		opacity: 1;
		}
	#recommend .slick-list{
		grid-column: 1 / 3;
		grid-row: 1;
		padding-right: 20px;
		overflow: visible;
		}
	#recommend .slick-slide{
		margin: 0 20px 0 0;
		}
	#recommend .slick-prev{
		justify-self: end;
		}
	@media (min-width: 992px) {
		#recommend .slick-list{
			margin: 0 -20px;
			padding-right: 0;
			overflow: hidden;
			}
		#recommend .slick-slide{
			margin: 0 20px;
			}
		}
	@media (min-width: 1200px) {
		#recommend h2{
			justify-self: start;
			}
		#recommend h2+div{
			grid-template-columns: auto auto;
			align-items: center;
			justify-content: start;
			padding-top: 20px;
			}
		}

#exhibition{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-gap: clamp(32px, 6vw, 40px) 0;
	margin: 80px 0;
	}
	#exhibition > *{
		grid-column: 2;
		}
	#exhibition h2{
		justify-self: center;
		}
	#exhibition h2+div{
		grid-column: 1 / 4;
		}
	#exhibition section{
		display: grid;
		justify-items: center;
		grid-gap: clamp(24px, 4.8vw, 32px);
		}
	#exhibition h3{
		font-family: var(--font-go);
		font-size: 20px;
		}
	#exhibition h3+div{
		width: var(--wrap);
		}
	#exhibition dl{
		position: relative;
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 16px;
		padding: 16px;
		border: 1px solid var(--color-border);
		}
		#exhibition dl:before{
			content: "NO PHOTO";
			grid-area: photo;
			background: var(--dummy);
			background-size: contain;
			aspect-ratio: 1 / 1.414;
			}
	#exhibition dt{
		font-family: var(--font-min);
		font-size: clamp(16px, 2.7vw, 18px);
		font-weight: 500;
		line-height: 1.65;
		}
	#exhibition dd{}
		#exhibition dd:nth-of-type(1){
			padding-top: 16px;
			border-top: 1px solid var(--color-border);
			font-family: var(--font-go);
			line-height: 1.65;
			}
		#exhibition dd:nth-of-type(n+2){
			display: contents;
			}
		#exhibition dd img{
			grid-area: photo;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 1.414;
			object-fit: cover;
			}
		#exhibition dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			}
	#exhibition .button{
		width: min(100%, 400px);
		}
	@media (min-width: 1200px) {
		#exhibition h2{
			justify-self: start;
			}
		}

#exhibitionSlide{
	display: grid;
	grid-gap: 24px 200px;
	}
	#exhibitionSlide > .slick-list{
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		}
	#exhibitionSlide section{
		overflow: hidden;
		}
		#exhibitionSlide section .slick-slider{
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			grid-gap: clamp(24px, 4.8vw, 32px) 16px;
			}
		#exhibitionSlide section .slick-list{
			grid-column: 1 / 3;
			grid-row: 1;
			overflow: visible;
			}
		#exhibitionSlide section .slick-slide{
			width: min(calc(100vw - 80px), 344px);
			margin: 0 8px;
			}
		#exhibitionSlide section .slick-prev{
			justify-self: end;
			}
	#exhibitionSlide > .slick-arrow{
		grid-row: 1;
		display: grid;
		grid-gap: 16px;
		width: auto;
		aspect-ratio: initial;
		margin-top: 2px;
		padding: 0;
		border: none;
		border-radius: 0;
		font-family: var(--font-go);
		font-size: inherit;
		}
		#exhibitionSlide > .slick-arrow:before{
			content: "";
			position: static;
			width: 100%;
			aspect-ratio: 1 / 1.6;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 16"><path d="m1,16c-.26,0-.51-.1-.71-.29-.39-.39-.39-1.02,0-1.41l6.29-6.29L.29,1.71C-.1,1.32-.1.68.29.29S1.32-.1,1.71.29l7.71,7.71L1.71,15.71c-.2.2-.45.29-.71.29Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: var(--color-point);
			transform: none;
			}
		#exhibitionSlide > .slick-arrow.slick-disabled{
			visibility: hidden;
			}
	#exhibitionSlide > .slick-prev{
		grid-column: 1;
		justify-self: end;
		grid-template-columns: 10px auto;
		}
		#exhibitionSlide > .slick-prev:before{
			transform: scale(-1, 1);
			}
	#exhibitionSlide > .slick-next{
		grid-column: 2;
		justify-self: start;
		grid-template-columns: auto 10px;
		}
		#exhibitionSlide > .slick-next:before{
			order: 1;
			}

#information{
	display: grid;
	grid-gap: clamp(32px, 6vw, 40px);
	width: var(--wrap);
	margin: 80px auto;
	}
	#information h2{
		justify-self: center;
		}
	#information h2+div{
		display: grid;
		grid-gap: 24px;
		width: min(100%, 1000px);
		margin: 0 auto;
		}
	#information .topicsList{
		color: #fff;
		}
		#information .topicsList li{
			background: #d1d4d7;
			border-color: transparent;
			color: var(--color);
			}
	@media (min-width: 992px) {
		#information{
			grid-template-columns: 170px auto;
			}
		#information h2{
			grid-column: 1;
			align-self: start;
			}
		#information h2+div{
			grid-column: 2;
			padding: 32px;
			border: 1px solid var(--color-border);
			}
		#information h2+div+div{
			grid-column: 1 / 3;
			}
		}

#sns{
	/*display: grid;
	justify-items: center;*/
	text-align: center;
	width: var(--wrap);
	margin: 80px auto;
	font-family: var(--font-min);
	}
	#sns h3{
		margin-bottom: 40px;
		font-size: 1.6em;
		}
	#sns a {
		display: inline-block;
		margin: 0 16px;
		}
	#sns img{
		height: 48px;
		}
		#sns #followX{
			transform: scale(0.9);
			}
		#sns #followFacebook{
			transform: scale(1.1);
			}
	@media (max-width: 991.98px) {
		#sns img{
			height: 42px;
			}
		}

#banner{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(48px, 10.8vw, 72px) 0;
	background: #d2d4d7;
	}
	#banner > *{
		grid-column: 2;
		}
	#banner h2{
		display: none;
		}
	#banner ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center;
		grid-gap: 16px;
		}
	#banner a{
		display: grid;
		}
	#banner img{
		width: 100%;
		height: auto;
		}
	@media (min-width: 768px) {
		#banner ul{
			grid-template-columns: repeat(3, 1fr);
			}
		}
	@media (min-width: 1200px) {
		#banner ul{
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 24px;
			}
		}

.title{
	display: inline-block;
	border: 1px solid var(--color-border);
	font-family: var(--font-min);
	font-size: 28px;
	}

.tab{
	display: flex;
	justify-content: center;
	}
	.tab li{
		position: relative;
		display: grid;
		align-content: center;
		margin: 16px -1px 0 0;
		padding: clamp(4px, 1.2vw, 8px) clamp(12px, 2.4vw, 16px);
		border: 1px solid var(--color-border);
		font-size: clamp(12px, 2.4vw, 16px);
		font-family: var(--font-go);
		line-height: 1.65;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		}
		.tab li:before{
			content: "";
			position: absolute;
			right: 1px;
			bottom: 1px;
			width: 4px;
			height: 4px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><polygon points="6 0 6 6 0 6 6 0"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: var(--color-point);
			pointer-events: none;
			}
		.tab li.select{
			margin-top: 0;
			font-weight: 500;
			pointer-events: none;
			}
	@media (max-width: 575.98px) {
		.tab li{
			width: 50%;
			}
		}
	@media (min-width: 768px) {
		.tab li{}
			.tab li:before{
				right: 2px;
				bottom: 2px;
				width: 6px;
				height: 6px;
				}
		}
	@media (min-width: 1200px) {
		.tab li{
			margin-top: 0;
			}
			.tab li.select{
				margin-top: -20px;
				}
		}

.button{
	display: grid;
	grid-template-columns: auto 18px;
	grid-gap: 16px;
	align-items: center;
	width: min(100%, 330px);
	min-height: 50px;
	margin: 0 auto;
	padding: 4px 16px;
	background: var(--color-point);
	color: --var(--color);
	font-family: var(--font-go);
	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;
		}