/* CSS Document */

#header{
	@media (min-width: 1200px) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 32px 32px 0 0;
		z-index: 10;
		#siteName{
			grid-row: 1 / 3;
			margin: -16px 0 0 0;
			padding: 16px 40px 32px 40px;
			background: white;
			border-radius: 0 0 56px 0;
			& a{
				height: 56px;
			}
		}
		#hLanguage summary,
		#navButton{
			color: white;
		}
	}
}

#pagePath{
	display: none;
}

#main{
	& hgroup{
		&{
			@media (max-width: 1199.98px) {
				display: grid;
				grid-template-columns: calc(100% - 64px);
				justify-content: center;
				overflow: hidden;
				& h2{
					justify-self: start;
					position: relative;
					&:before,
					&:after{
						content: "";
						position: absolute;
						top: 50%;
						border-bottom: 1px solid currentColor;
						width: 100vw;
					}
					&:before{
						right: calc(100% + 16px);
					}
					&:after{
						left: calc(100% + 16px);
					}
				}
			}
		}
		& h2{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
		}
		& p{
			font-weight: 600;
			font-size: clamp(18px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	#hero{
		margin-inline: 16px;
		@media (min-width: 1200px) {
			margin-top: 16px;
		}
	}
	#news{
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
	#about,
	#data,
	#media,
	#member,
	#area,
	#inquiry{
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
	#outlink{
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
}

#hero{
	&{
		display: grid;
		grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		overflow: hidden;
	}
	#heroSlide{
		display: grid;
		&:not(.slick-sllider){
			& > span,
			& > dl{
				grid-column: 1;
				grid-row: 1;
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			position: relative;
			.slick-Control{
				position: absolute;
				right: clamp(24px, calc(32 / 1366 * 100dvw), 32px);
				bottom: clamp(24px, calc(32 / 1366 * 100dvw), 32px);
				z-index: 10;
				&{
					display: flex;
					align-items: center;
					column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
					.slick-num{
						margin-left: 8px;
					}
				}
				.slick-num{
					display: grid;
					column-gap: 0.25em;
					align-items: center;
					color: white;
					font-weight: 600;
					font-size: clamp(20px, calc(24 / 1366 * 100dvw), 24px);
					font-family: 'Montserrat', var(--font);
					&:before{
						content: "";
						grid-column: 2;
						grid-row: 1;
						height: 2em;
						border-left: 1px solid currentColor;
						transform: rotate(45deg);
					}
					.now-count{
						grid-column: 1;
						grid-row: 1;
						transform: translateY(-30%);
					}
					.all-count{
						grid-column: 3;
						grid-row: 1;
						transform: translateY(30%);
					}
				}
			}
			.slick-arrow{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				position: relative;
				aspect-ratio: 1;
				width: 40px;
				background: color-mix(in srgb, transparent, #001b48 20%);
				border: 1px solid currentColor;
				border-radius: 100%;
				color: white;
				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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
				}
				&.slick-prev:before{
					transform: scale(-1, 1);
				}
				&.slick-disabled{
					pointer-events: none;
					opacity: 0.5;
				}
			}
		}
		& dl{
			position: relative;
			display: grid;
			grid-template-rows: 1fr;
			grid-row-gap: 24px;
			aspect-ratio: 358 / 424;
			padding: 24px clamp(16px, calc(32 / 768 * 100dvw), 32px);
			border-radius: 0 0 clamp(24px, calc(32 / 1366 * 100dvw), 32px) clamp(24px, calc(32 / 1366 * 100dvw), 32px);
			overflow: hidden;
			&:has(a){
				cursor: pointer;
			}
			@media (min-width: 768px) {
				aspect-ratio: 16 / 9;
				padding: 24px clamp(40px, calc(64 / 1366 * 100dvw), 64px);
			}
		}
		& dt{
			position: relative;
			z-index: 1;
			align-self: end;
			color: #fff;
			font-weight: 700;
			font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
			text-shadow: 0 0 5px color-mix(in srgb, transparent, black 50%);
			letter-spacing: 0.1em;
			overflow: hidden;
			@media (min-width: 768px) {
				font-size: clamp(20px, calc(40 / 1366 * 100dvw), 40px);
			}
		}
		& dd{
			&:has(iframe){
				pointer-events: none;
			}
			&:has(a){
				position: relative;
				z-index: 1;
				justify-self: start;
			}
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
		& iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 1em;
			padding: 24px 1em 0 0;
			border-top: 1px solid color-mix(in srgb, transparent, white 60%);
			color: #fff;
			font-weight: 600;
			font-size: 14px;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: currentColor;
				-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="0 12 5 6 0 0 1 0 6 6 1.22 12 0 12"/><polygon points="5 12 10 6 5 0 6 0 11 6 6.22 12 5 12"/></svg>') no-repeat center / contain; 
			}
		}
	}
	#heroMovie{
		position: relative;
		aspect-ratio: 16 / 9;
		background: color-mix(in srgb, white, var(--color-theme) 25%);
		border-radius: 0 0 clamp(24px, calc(32 / 1366 * 100dvw), 32px) clamp(24px, calc(32 / 1366 * 100dvw), 32px);
		overflow: hidden;
		pointer-events: none;
		[class^="moviePlayer_"]{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-position: center center !important;
			background-attachment: inherit !important;
			background-size: cover !important;
		}
		.inline-YTPlayer,
		.ytp{
			position: static !important;
		}
		.playerBox{
			top: 50% !important;
			left: 50% !important;
			margin: 0 !important;
			transform: translate(-50%, -50%);
		}
	}
}

#news{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#newsTab{
				grid-column: 2;
				margin-top: 32px;
			}
			#newsList{
				grid-column: 1 / 4;
				margin-top: 32px;
			}
			#newsLink{
				grid-column: 2;
				margin-top: 32px;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: max(112px, calc(112 / 1367 * 100dvw)) clamp(344px, calc(384 / 1366 * 100dvw), 384px) 1fr max(112px, calc(112 / 1367 * 100dvw));
			grid-template-rows: auto 1fr auto 1fr auto;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				justify-self: center;
				min-height: 24px;
				margin-block: 24px;
				border-left: 1px solid currentColor;
			}
			&:before{
				grid-row: 2;
			}
			&:after{
				grid-row: 4;
			}
			& hgroup{
				grid-column: 2;
				grid-row: 1;
				display: grid;
				justify-items: center;
				text-align: center;
			}
			#newsTab{
				grid-column: 2;
				grid-row: 3;
				& ul{
					flex-direction: column;
					align-items: center;
				}
			}
			#newsList{
				grid-column: 3;
				grid-row: 1 / 6;
				align-self: center;
				display: grid;
				& details{
					grid-column: 1;
					grid-row: 1;
					align-self: center;
					&:not(.select){
						display: block;
						visibility: hidden;
					}
				}
			}
			#newsLink{
				grid-column: 2;
				grid-row: 5;
			}
		}
		
	}
	#newsTab{
		& ul{
			display: flex;
			justify-content: center;
			grid-gap: 8px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
		& li{
			padding: 0.25em;
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
			cursor: pointer;
			&.select{
				border-bottom: 1px solid currentColor;
				color: var(--color-theme);
				font-weight: 800;
				pointer-events: none;
			}
		}
	}
	#newsList{
		& details{
			&::details-content{
				display: contents;
			}
			&:not(.select){
				display: none;
			}
			& summary{
				display: none;
			}
		}
		& section{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-gap: 4px 16px;
			margin-left: 56px;
			&:nth-child(n+2){
				border-top: 1px solid color-mix(in srgb, white, black 15%);
			}
			&:has(.tagCheck){
				& h3{
					position: relative;
					&:before{
						content: "";
					}
				}
			}
			@media (max-width: 1199.98px) {
				margin-right: 56px;
				&:nth-child(n+2){
					margin-top: 16px;
					padding-top: 16px;
				}
				& h3:before{
					transform: translateY(calc(0.875em - 50%));
				}
			}
			@media (min-width: 1200px) {
				&:nth-child(n+2){
					margin-top: 24px;
					padding-top: 24px;
				}
				&:has(a){
					padding-right: 56px;
				}
				& h3:before{
					transform: translate(-100%, calc(0.875em - 50%)) scale(1.5);
				}
			}
		}
		& h3{
			order: 1;
			width: 100%;
			margin-top: 4px;
			font-weight: 800;
			letter-spacing: 0.025em;
			&:before{
				position: absolute;
				top: 0;
				left: -32px;
				aspect-ratio: 1;
				width: 17px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><path d="M14.92,6.69c-1-1-2.58-1.03-3.62-.12l-3.98-2.63.61-1.46c.1-.25.05-.54-.14-.73l-1.25-1.25L.5,6.54l1.25,1.25c.19.19.48.25.73.14l1.46-.61,2.63,3.98c-.91,1.05-.87,2.63.12,3.62l.86.86L15.78,7.55l-.86-.86Z"/><line x1="11.83" y1="11.83" x2="16.5" y2="16.5"/></svg>') no-repeat center / contain; 
			}
		}
		& h3+div{
			display: contents;
		}
		& time{
			color: #666;
			font-size: 14px;
			letter-spacing: 0.05em;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			min-width: 8em;
			min-height: 20px;
			padding: 0 10px;
			border: 1px solid color-mix(in srgb, white, black 13%);
			border-radius: 10px;
			font-weight: 700;
			font-size: 12px;
			letter-spacing: 0.2em;
			text-align: center;
			&.tagCheck{
				display: none;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: inherit;
			font-size: 0;
			z-index: 1;
			@media (min-width: 1200px) {
				&:before{
					content: "";
					position: absolute;
					top: 50%;
					right: 28px;
					aspect-ratio: 1;
					width: 16px;
					background: currentColor;
					transition: transform 0.2s ease-out;
					transform: translate(50%, -50%);
					-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="0 12 5 6 0 0 1 0 6 6 1.22 12 0 12"/><polygon points="5 12 10 6 5 0 6 0 11 6 6.22 12 5 12"/></svg>') no-repeat center / contain; 
				}
				&:hover:before{
					transform: translate(75%, -50%);
				}
			}
		}
	}
	#newsLink{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			align-items: center;
			min-width: 164px;
			min-height: 48px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
		}
	}
}

#about,
#data,
#member,
#inquiry{
	&{
		display: grid;
		[id$="Index"]{
			z-index: 1;
		}
		[id$="Link"]{
			margin-top: 32px;
		}
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			grid-template-rows: auto auto auto clamp(24px, calc(56 / 768 * 100dvw), 56px) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			& figure{
				grid-column: 1 / 3;
				aspect-ratio: 3 / 2;
				grid-row: 3 / 5;
				margin-top: 32px;
				border-radius: 0 clamp(24px, calc(56 / 768 * 100dvw), 56px) clamp(24px, calc(56 / 768 * 100dvw), 56px) 0;
			}
			[id$="Index"]{
				grid-column: 2 / 4;
				grid-row: 4 / 6;
				border-radius: clamp(24px, calc(56 / 768 * 100dvw), 56px) 0 0 clamp(24px, calc(56 / 768 * 100dvw), 56px);
			}
			[id$="Link"]{
				grid-column: 2;
				grid-row: 2;
			}
		}
		@media (min-width: 1200px) {
			grid-template-rows: 24px auto auto auto 1fr 56px;
			&:before,
			&:after{
				content: "";
				grid-row: 2;
				align-self: center;
				min-width: 48px;
				border-top: 1px solid currentColor;
			}
			& hgroup{
				display: contents;
				& h2{
					grid-row: 2;
				}
				& p{
					grid-row: 3;
				}
			}
			& figure{
				grid-row: 1 / 6;
				min-height: max(280px, calc(280 / 1367 * 100dvw));
			}
			[id$="Index"]{
				grid-row: 5 / 7;
				margin-top: 48px;
			}
			[id$="Link"]{
				grid-row: 4;
			}
			&#about,
			&#member{
				grid-template-columns: min(50%, max(584px, calc(584 / 1367 * 100dvw))) 56px 56px 1fr auto max(112px, calc(112 / 1367 * 100dvw));
				&:before{
					grid-column: 3 / 5;
					margin-right: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				}
				&:after{
					grid-column: 6;
					margin-left: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				}
				& hgroup{
					& h2{
						grid-column: 5;
					}
					& p{
						grid-column: 4 / 6;
						justify-self: end;
						text-align: right;
						text-wrap: balance;
					}
				}
				& figure{
					grid-column: 1 / 3;
					border-radius: 0 56px 56px 0;
				}
				[id$="Index"]{
					grid-column: 2 / 7;
					padding-right: max(112px, calc(112 / 1367 * 100dvw));
					border-radius: 56px 0 0 56px;
				}
				[id$="Link"]{
					grid-column: 4 / 6;
					justify-self: end;
				}
			}
			&#data,
			&#inquiry{
				grid-template-columns: max(112px, calc(112 / 1367 * 100dvw)) auto 1fr 56px 56px min(50%, max(584px, calc(584 / 1367 * 100dvw)));
				&:before{
					grid-column: 1;
					margin-right: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				}
				&:after{
					grid-column: 3 / 5;
					margin-left: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				}
				& hgroup{
					& h2{
						grid-column: 2;
					}
					& p{
						grid-column: 2 / 5;
						text-wrap: balance;
					}
				}
				& figure{
					grid-column: 5 / 7;
					border-radius: 56px 0 0 56px;
				}
				[id$="Index"]{
					grid-column: 1 / 6;
					padding-left: max(112px, calc(112 / 1367 * 100dvw));
					border-radius: 0 56px 56px 0;
				}
				[id$="Link"]{
					grid-column: 2 / 5;
					justify-self: start;
				}
			}
		}
	}
	& figure{
		position: relative;
		overflow: hidden;
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	[id$="Index"]{
		padding: clamp(24px, calc(56 / 768 * 100dvw), 56px);
		background: var(--color-bg);
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(max(256px, calc(256 / 1367 * 100dvw)), 1fr));
			grid-gap: clamp(16px, calc(24 / 768 * 100dvw),24px);
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px 16px;
			background: white;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			letter-spacing: 0.05em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
		}
	}
	[id$="Link"]{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			padding: 8px;
			border-bottom: 1px solid var(--color-theme);
			color: inherit;
			font-weight: 600;
			letter-spacing: 0.15em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				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 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#media{
	&{
		display: grid;
		#mediaLink{
			grid-row: 2;
			justify-self: center;
			width: var(--wrap);
			margin-top: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		}
		#mediaIndex{
			grid-row: 3;
			margin-top: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	& hgroup{
		@media (min-width: 1200px) {
			text-align: center;
			text-wrap: balance;
			& h2{
				display: grid;
				grid-template-columns: 1fr auto 1fr;
				grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				align-items: center;
				&:before,
				&:after{
					content: "";
					min-width: 48px;
					border-top: 1px solid currentColor;
				}
			}
		}
	}
	#mediaIndex{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) 0;
		background: var(--color-bg);
		& ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-rows: auto 1fr;
			align-items: center;
			justify-items: center;
			grid-row-gap: 8px;
			aspect-ratio: 1;
			width: clamp(152px, calc(168 / 768 * 100dvw), 168px);
			padding: 16px 16px 8px 16px;
			background: white;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			letter-spacing: 0.05em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
			word-break: keep-all;
			overflow-wrap: anywhere;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: clamp(56px, calc(66 / 768 * 100dvw), 66px);
				background: currentColor;
				-webkit-mask: no-repeat center / contain;
			}
			&[href="/photo/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="13.9 47.86 29.25 35.65 44.6 47.86"/><polyline points="59.63 47.86 47.82 38.47 40.44 44.34"/><circle cx="47.08" cy="28.27" r="4.38"/><rect x="8.87" y="15.77" width="55.13" height="41.97"/><polyline points="4.06 50.23 2 50.23 2 8.26 57.13 8.26 57.13 10.73"/></svg>');
			}
			&[href="/business/movie/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polygon points="26.77 43.81 26.77 22.19 45.77 33 26.77 43.81"/><circle cx="33" cy="33" r="28"/></svg>');
			}
			&[href="/pamphlet/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polygon points="22.94 60.16 2.83 49.39 2.83 5.84 22.94 16.61 22.94 60.16"/><polyline points="22.94 60.16 22.94 16.61 43.06 5.84 63.17 16.61 63.17 60.16"/><polyline points="22.94 60.16 43.06 49.39 63.17 60.16"/><line x1="43.06" y1="5.84" x2="43.06" y2="49.31"/></svg>');
			}
			&[href="/poster/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="20.15 40.16 28.95 33.15 37.76 40.16"/><polyline points="46.38 40.16 39.61 34.77 35.37 38.14"/><circle cx="39.18" cy="28.92" r="2.51"/><rect x="16.59" y="22.7" width="32.81" height="21.7"/><polyline points="57.49 52.56 57.51 2.97 8.52 2.95 8.49 63.04 46.99 63.05"/><line x1="19" y1="12.7" x2="47" y2="12.7"/><line x1="19" y1="53.78" x2="30.9" y2="53.78"/><polygon points="47 63.05 47 52.55 57.5 52.55 47 63.05"/></svg>');
			}
			&[href="/business/logo/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="32.99" y1="48.84" x2="33.01" y2="16.34"/><rect x="16.27" y="5.5" width="33.47" height="22.76"/><polyline points="63.02 53.27 63.02 60.5 2.98 60.5 2.98 53.27"/><polyline points="39.34 42.5 33 48.84 26.66 42.5"/></svg>');
			}
			&[href="https://www.niigata-kankou-contents.com/"]:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="30.2" cy="30.2" r="24.62"/><line x1="47.6" y1="47.6" x2="53.44" y2="53.44"/><polyline points="59.95 64 51.41 55.46 55.46 51.41 64 59.95"/><polyline points="13.28 36.99 24.43 28.12 35.58 36.99"/><polyline points="46.5 36.99 37.92 30.17 32.56 34.44"/><circle cx="37.38" cy="22.76" r="3.18"/></svg>');
			}
		}
	}
	#mediaLink{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			padding: 8px;
			border-bottom: 1px solid var(--color-theme);
			color: inherit;
			font-weight: 600;
			letter-spacing: 0.15em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				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 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#area{
	#areaMap{
		position: relative;
		background: #c5dae8;
		overflow: hidden;
		& svg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border: 1px solid red;
			transform: scale(2.2) translate(1%, -5%);
			@media (max-width: 767.98px) {
				&[viewBox="0 0 1303.75 1667.2"]{
					display: none;
				}
			}
			@media (min-width: 768px) {
				transform: scale(2.5) translate(0%, -11%);
				&[viewBox="0 0 848.2 1084.65"]{
					display: none;
				}
			}
			@media (min-width: 1200px) {
				transform: scale(2.5) translate(3.5%, -11%);
			}
			& a{
				opacity: 0;
				cursor: pointer;
			}
		}
	}
	#areaList{
		& section{
			padding: clamp(40px, calc(48 / 768 * 100dvw), 48px) clamp(32px, calc(56 / 768 * 100dvw), 56px);
			background: var(--color);
			border-radius: clamp(32px, calc(56 / 768 * 100dvw), 56px) 0 0 0;
			color: #fff;
			&{
				display: grid;
				grid-template-rows: auto auto 1fr;
				grid-row-gap: 24px;
				& figure{
					grid-row: 2;
				}
			}
			&[data-area="1"]{
				background: #c1c42f;
			}
			&[data-area="2"]{
				background: #67afe1;
			}
			&[data-area="3"]{
				background: #81c2c2;
			}
			&[data-area="4"]{
				background: #555ea9;
			}
			&[data-area="5"]{
				background: #b078b0;
			}
			&[data-area="6"]{
				background: #e57897;
			}
			&[data-area="7"]{
				background: #ca7b5e;
			}
			& h3{
				font-weight: 800;
				font-size: 24px;
				letter-spacing: 0.15em;
			}
			& h3+div{
				display: contents;
				& p{
					font-size: 14px;
					letter-spacing: 0.05em;
				}
				& a{
					justify-self: start;
					display: grid;
					grid-template-columns: 1fr auto;
					align-items: center;
					column-gap: 1em;
					color: #fff;
					font-weight: 600;
					font-size: 14px;
					text-decoration: none;
					&:after{
						content: "";
						aspect-ratio: 1;
						width: 12px;
						background: currentColor;
						-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="0 12 5 6 0 0 1 0 6 6 1.22 12 0 12"/><polygon points="5 12 10 6 5 0 6 0 11 6 6.22 12 5 12"/></svg>') no-repeat center / contain; 
					}
				}
			}
			& figure{
				& img{
					aspect-ratio: 3 / 2;
					object-fit: cover;
				}
			}
		}
		#areaListSlide{
			width: max(100dvw, 100%);
			max-width: max(453px, 33.152dvw);
			&:not(.slick-slider){
				& > span,
				& > section{
					&:nth-child(n+2){
						display: none;
					}
				}
			}
			&.slick-slider{
				&{
					display: grid;
					grid-template-columns: 1fr auto auto;
					grid-template-rows: 1fr auto;
					column-gap: 8px;
					.slick-list{
						grid-column: 1 / 4;
						grid-row: 1 / 3;
					}
					.slick-arrow{
						grid-row: 2;
						margin-bottom: clamp(40px, calc(48 / 768 * 100dvw), 48px);
						&.slick-prev{
							grid-column: 2;
						}
						&.slick-next{
							grid-column: 3;
							margin-right: clamp(32px, calc(56 / 768 * 100dvw), 56px);
						}
					}
				}
			}
			.slick-track{
				display: flex;
			}
			.slick-slide{
				float: unset;
				display: grid;
				height: auto;
			}
			.slick-arrow{
				all: unset;
				box-sizing: border-box;
				cursor: pointer;
				position: relative;
				aspect-ratio: 1;
				width: 40px;
				border: 1px solid currentColor;
				border-radius: 100%;
				color: white;
				font-size: 0;
				z-index: 1;
				transform: translateY(8px);
				&: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: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
				}
				&.slick-prev:before{
					transform: scale(-1, 1);
				}
				&.slick-disabled{
					pointer-events: none;
					opacity: 0.5;
				}
			}
		}
		#areaListClose{
			all: unset;
			box-sizing: border-box;
			cursor: pointer;
			aspect-ratio: 1;
			width: 48px;
			background: currentColor;
			font-size: 0;
			z-index: 1;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="fill: none; stroke: black;"><line x1="36" y1="12" x2="12" y2="36"/><line x1="36" y1="36" x2="12" y2="12"/></svg>') no-repeat center / contain;
			@media (max-width: 1199.98px) {
				justify-self: end;
			}
		}
		&{
			@media (max-width: 991.98px) {
				display: grid;
				grid-gap: 8px;
			}
			@media (min-width: 992px) {
				position: relative;
				& section{
					border-radius: clamp(32px, calc(56 / 768 * 100dvw), 56px) 0 0 clamp(32px, calc(56 / 768 * 100dvw), 56px);
				}
				#areaListClose{
					position: absolute;
					top: 0;
					left: 0;
					transform: translateX(-100%);
				}
			}
		}
	}
	#areaLink{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			padding: 8px;
			border-bottom: 1px solid var(--color-theme);
			color: inherit;
			font-weight: 600;
			letter-spacing: 0.15em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				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 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
	}
	&{
		display: grid;
		overflow: hidden;
		#areaList{
			transition: transform 0.2s ease-out;
			transform: translateX(100%);
			z-index: 1;
			&.open{
				transform: translateX(0);
			}
		}
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#areaList,
			#areaMap{
				margin-top: clamp(40px, calc(56 / 768 * 100dvw), 56px);
			}
			#areaMap{
				grid-column: 1 / 4;
				grid-row: 3;
			}
			#areaList{
				grid-column: 1 / 4;
				grid-row: 3;
				align-self: end;
				justify-self: end;
			}
			#areaLink{
				grid-column: 2;
				margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
			}
		}
		@media (min-width: 992px) {
			&:has(#areaList.open){
				#areaMap{
					margin-right: 400px;
				}
				#areaList{
					opacity: 1;
				}
			}
			#areaMap{
				transition: margin-right 0.2s ease-out;
			}
			#areaList{
				opacity: 0;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: max(112px, calc(112 / 1367 * 100dvw)) auto 1fr auto max(112px, calc(112 / 1367 * 100dvw));
			grid-template-rows: 96px auto auto 1fr;
			& hgroup{
				display: contents;
				&:before{
					content: "";
					grid-column: 1;
					grid-row: 2;
					align-self: center;
					margin-right: clamp(16px, calc(32 / 768 * 100dvw), 32px);
					border-top: 1px solid currentColor;
					z-index: 1;
				}
				& h2{
					grid-column: 2;
					grid-row: 2;
					z-index: 1;
				}
				& p{
					grid-column: 2;
					grid-row: 3;
					z-index: 1;
				}
			}
			#areaMap{
				grid-column: 1 / 6;
				grid-row: 1 / 5;
			}
			#areaList{
				grid-column: 1 / 6;
				grid-row: 1 / 5;
				justify-self: end;
			}
			#areaLink{
				grid-column: 2;
				grid-row: 4;
				justify-self: start;
				align-self: start;
				margin-top: 48px;
				z-index: 1;
			}
		}
	}
}