/* CSS Document */

:root{
	--color-variable: #2c9470;
	--color-variable-rba: 44, 148, 112;
	--wrap-space: 24px;
	--wrap-min: 375px;
	--wrap-max: 1140px;
	--wrap-fit: calc(clamp(var(--wrap-min), 100dvw, 100%) - (var(--wrap-space) * 2));
	--wrap: clamp(calc(var(--wrap-min) - (var(--wrap-space) * 2)), calc(max(100dvw, 100%) - (var(--wrap-space) * 2)), var(--wrap-max));
	}

::before,
::after{
	box-sizing: border-box;
	}

img[src="[url]"]{
	display: block;
	background: #ccc;
	}

html{
	min-width: var(--wrap-min);
}

main{}
	main *{
		line-height: inherit;
		}
	main > *,
	main article,
	main header,
	main section,
	main footer{
		padding-top: unset;
		padding-bottom: unset;
		}
	main img{
		width: 100%;
		height: auto;
		}

#pagePath{
	display: none;
	}

#header{}
	@media (min-width: 1200px) {
		#header{
			position: fixed;
			top: 0;
			left: 0;
			transition: transform 0.2s ease-out;
			}
		.scrollTop #header{
			transform: translateY(-200%);
			}
		}

#main{
	display: grid;
	}
	#main #hero,
	#main #tool{
		grid-column: 1;
		grid-row: 1;
		}
	@media (max-width: 1199.98px) {
		#main #tool{
			display: none;
			}
		}
	@media (min-width: 1200px) {
		#main #hero{
			margin-left: 258px;
			}
		#main #tool{
			width: 258px;
			}
		}

#hero{
	display: grid;
	grid-template-columns: 1fr calc(100% - clamp(32px, calc(96 / 1200 * 100dvw), 96px)) 1fr;
	background: #f2f2f2 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="gray"><circle cx="10" cy="50"><animate attributeName="r" begin="0s" dur="1.4s" values="0;8;0;0" repeatCount="indefinite"/></circle><circle cx="50" cy="50"><animate attributeName="r" begin="0.16s" dur="1.4s" values="0;8;0;0" repeatCount="indefinite"/></circle><circle cx="90" cy="50"><animate attributeName="r" begin="0.32s" dur="1.4s" values="0;8;0;0" repeatCount="indefinite"/></circle></svg>') no-repeat center / 48px auto;
	transition: background 0.2s ease-out;
	overflow: hidden;
	}
	.done #hero{
		background: transparent;
		}
	#hero #heroText{
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		z-index: 1;
		}
	#hero #heroPhoto{
		grid-column: 1 / 4;
		grid-row: 1;
		}
	@media (max-width: 767.98px) {
		#hero #heroText{
			grid-column: 1 / 4;
			grid-row: 2;
			}
		}

#heroText{
	display: grid;
	aspect-ratio: 79/ 75;
	width: min(75%, 380px);
	background: url("../images/heroLogo.svg") no-repeat center / contain;
	font-size: 0;
	}
	@media (max-width: 767.98px) {
		#heroText{
			width: 100%;
			background: url("../images/heroLogo_sp.svg") no-repeat center / contain;
			}
		}

#heroPhoto{
	opacity: 0;
	transition: opacity 0.2s ease-out;
	}
	.done #heroPhoto{
		opacity: 1;
		}
	#heroPhoto img{
		width: 100%;
		object-fit: cover;
		}
	@media (max-width: 767.98px) {
		#heroPhoto img{
			height: 100dvw;
			}
		}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		#heroPhoto img{
			height: 60dvw;
			}
		}
	@media (min-width: 1200px) {
		#heroPhoto img{
			height: 100dvh;
			}
		}


#heroPhoto{
	opacity: 0;
	transition: opacity 0.2s ease-out;
	}
	.done #heroPhoto{
		opacity: 1;
		}
	#heroPhoto img{
		width: 100%;
		object-fit: cover;
		}
	@media (max-width: 767.98px) {
		#heroPhoto img{
			height: 100dvw;
			}
		}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		#heroPhoto img{
			height: 60dvw;
			}
		}
	@media (min-width: 1200px) {
		#heroPhoto img{
			height: 100dvh;
			}
		}

#tool{
	display: grid;
	grid-template-rows: 1fr auto auto;
	}
	#tool:before{
		content: "";
		aspect-ratio: 1.6 / 1;
		margin: auto 1.5em;
		background-image: var(--logoType), var(--logoText), var(--logoIcon);
		background-position: left 75%, left 92%, center top;
		background-repeat: no-repeat;
		background-size: 100% 35%, 100% 8%, 100% 45%;
		}

#toolLink{}
	#toolLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-bottom: 1px solid rgba(255, 255, 055, 0.2);
		color: #fff;
		font: 700 14px var(--font-min);
		text-decoration: none;
		}
		#toolLink a:hover{
			background: var(--color-variable);
			}
		#toolLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#toolLanguage{}
	#toolLanguage details{}
		#toolLanguage details::details-content{
			display: contents;
			}
		#toolLanguage details:not([open]) summary+div{
			display: none;
			}
	#toolLanguage summary{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		color: #fff;
		font: 700 14px var(--font-min);
		}
		#toolLanguage summary:hover{
			background: var(--color-variable);
			}
		#toolLanguage summary:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18,9.5h-7.5V2c0-0.3-0.2-0.5-0.5-0.5S9.5,1.7,9.5,2v7.5H2c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5h7.5V18 c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-7.5H18c0.3,0,0.5-0.2,0.5-0.5S18.3,9.5,18,9.5z"/></svg>') no-repeat center / contain;
			}
		#toolLanguage [open] summary{
			background: var(--color-variable);
			}
			#toolLanguage [open] summary:after{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18,10.5H2c-0.3,0-0.5-0.2-0.5-0.5S1.7,9.5,2,9.5h16c0.3,0,0.5,0.2,0.5,0.5S18.3,10.5,18,10.5z"/></svg>');
				}
		#toolLanguage ul{
			border-bottom: 1px solid #bdbdbd;
			}
		#toolLanguage li{
			border-top: 1px solid #bdbdbd;
			}
		#toolLanguage a{
			display: grid;
			grid-template-columns: 0.4em 1fr;
			align-items: center;
			grid-gap: 0.5em;
			min-height: 48px;
			padding: 0.25em 1em;
			color: inherit;
			font: 700 14px var(--font-min);
			text-decoration: none;
			}
			#toolLanguage a:hover{
				background: #fff;
				color: var(--color);
				}
			#toolLanguage a:before{
				content: "";
				aspect-ratio: 1 / 1;
				border-radius: 100%;
				background: var(--color-variable);
				opacity: 0.5;
				}

#intro{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: 1em;
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	font: 700 1.125em var(--font-min);
	letter-spacing: 0.1em;
	line-height: 2;
	}

#memo{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	padding-bottom: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	background: url("/common/images/pattern.png") top center;
	}
	#memo:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: rgba(var(--color-variable-rba), 0.9);
		mix-blend-mode: multiply;
		}
	#memo h2{
		grid-column: 2;
		grid-row: 1;
		padding: 0.5em;
		color: #fff;
		font: 700 1.75em var(--font-min);
		letter-spacing: 0.1em;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		z-index: 1;
		}
	#memo h2+div{
		grid-column: 2;
		justify-self: center;
		margin-top: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
		}
	#memo dl{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
	#memo dt{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font: 700 1.25em var(--font-min);
		}
		#memo dt:before{
			content: counter(count);
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 1.8em;
			padding-top: 0.2em;
			background: var(--color-variable);
			border-radius: 2px;
			color: #fff;
			text-align: center;
			line-height: 1;
			transform: translateY(-0.15em);
			}
		#memo dt:nth-of-type(n+2){
			margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
			}
	#memo dd{
		margin-top: 8px;
		}

#charm{
	justify-self: center;
	display: grid;
	width: var(--wrap);
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	#charm h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#charm h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#charm h2+div{
		margin-top: 8px;
		}
	#charm figure{
		grid-row: 2;
		}
		#charm figure img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			}
	#charm #charmLink{
		margin-top: 24px;
		}
	@media (max-width: 991.98px) {
		#charm figure{
			margin-top: 16px;
			}
		}
	@media (min-width: 992px) {
		#charm{
			grid-template-columns: 1fr 50%;
			grid-template-rows: auto 1fr auto;
			column-gap: 48px;
			}
		#charm figure{
			grid-column: 2;
			grid-row: 1 / 4;
			align-self: start;
			}
		}

#charmLink{
	display: flex;
	justify-content: center;
	}
	#charmLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#charmLink a:hover{
			background: var(--color-variable);
			}
		#charmLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#point{
	display: grid;
	width: var(--wrap);
	margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) auto 0 auto;
	}
	#point h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#point h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#point h2+div{
		margin-top: 8px;
		}
	#point figure{
		grid-row: 2;
		}
		#point figure img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			}
	#point #pointLink{
		margin-top: 24px;
		}
	@media (max-width: 991.98px) {
		#point figure{
			margin-top: 16px;
			}
		}
	@media (min-width: 992px) {
		#point{
			grid-template-columns: 50% 1fr;
			grid-template-rows: auto 1fr auto;
			column-gap: 48px;
			}
		#point figure{
			grid-column: 1;
			grid-row: 1 / 4;
			align-self: start;
			}
		}

#pointLink{
	display: flex;
	justify-content: center;
	}
	#pointLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#pointLink a:hover{
			background: var(--color-variable);
			}
		#pointLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#movie{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	#movie h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#movie h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#movie h2+div{
		margin-top: 8px;
		}
	#movie #movieList{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
	#movie #movieLink{
		margin-top: 24px;
		}
	#movie .slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		}
		#movie .slick-slider:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			background: red;
			opacity: 0.4;
			z-index: 1;
			visibility: hidden;
			}
	#movie .slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: -8px;
		}
	#movie .slick-slide{
		margin-inline: 8px;
		}
	@media (min-width: 576px) {
		#movie .slick-slider:before{
			width: calc(50% - 8px);
			}
		}
	@media (min-width: 1200px) {
		#movie .slick-slider:before{
			width: calc(33.33% - 8px);
			}
		}

#movieList{}
	#movieList section{
		display: grid;
		grid-row-gap: 8px;
		}
	#movieList h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font: 700 1.125em var(--font-min);
		}
		#movieList h3:before{
			content: "";
			width: 1em;
			height: 2px;
			background: var(--color-theme);
			transform: translateY(0.725em);
			}
	#movieList h3+div{
		grid-row: 1;
		}
	#movieList iframe{
		aspect-ratio: 3 / 2;
		width: 100%;
		height: auto;
		}

#movieLink{
	display: flex;
	justify-content: center;
	}
	#movieLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#movieLink a:hover{
			background: var(--color-variable);
			}
		#movieLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#map{
	display: grid;
	width: var(--wrap);
	margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) auto 0 auto;
	}
	#map h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#map h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#map h2+div{
		margin-top: 8px;
		}
	#map figure{
		grid-row: 2;
		}
		#map figure img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			}
	#map #mapLink{
		margin-top: 24px;
		}
	@media (max-width: 991.98px) {
		#map figure{
			margin-top: 16px;
			}
		}
	@media (min-width: 992px) {
		#map{
			grid-template-columns: 1fr 50%;
			grid-template-rows: auto 1fr auto;
			column-gap: 48px;
			}
		#map figure{
			grid-column: 2;
			grid-row: 1 / 4;
			align-self: start;
			}
		}

#mapLink{
	display: flex;
	justify-content: center;
	}
	#mapLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#mapLink a:hover{
			background: var(--color-variable);
			}
		#mapLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#live{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	#live > *{
		grid-column: 2;
		}
	#live h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#live h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#live h2+div{
		margin-top: 8px;
		}
	#live #liveList{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		}
		#live #liveList:has([aria-hidden="true"]){
			grid-column: 1 / 4;
			justify-self: center;
			}
	#live #liveLink{
		margin-top: 24px;
		}

#liveList{}
	#liveList section{
		display: grid;
		grid-row-gap: 8px;
		}
	#liveList h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font: 700 1.125em var(--font-min);
		}
		#liveList h3:before{
			content: "";
			width: 1em;
			height: 2px;
			background: var(--color-theme);
			transform: translateY(0.725em);
			}
	#liveList h3+div{
		grid-row: 1;
		}
	#liveList iframe{
		aspect-ratio: 3 / 2;
		width: 100%;
		height: auto;
		}
	#liveList.slick-slider{}
		#liveList.slick-slider:has([aria-hidden="true"]){
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			grid-column-gap: 8px;
			width: min(var(--wrap-fit), calc(1140px + 112px));
			}
			#liveList.slick-slider:has([aria-hidden="true"]):before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 3 / 2;
				background: red;
				opacity: 0.4;
				z-index: 1;
				visibility: hidden;
				}
	#liveList .slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		margin-inline: -8px;
		}
	#liveList .slick-slide{
		margin-inline: 8px;
		}
	@media (min-width: 992px) {
		#liveList.slick-slider:before{
			width: calc(50% - 8px);
			}
		}
	@media (min-width: 1200px) {
		#liveList.slick-slider:before{
			width: calc(33.33% - 8px);
			}
		}

#liveLink{
	display: flex;
	justify-content: center;
	}
	#liveLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#liveLink a:hover{
			background: var(--color-variable);
			}
		#liveLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#locker{
	display: grid;
	width: var(--wrap);
	margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) auto 0 auto;
	}
	#locker h2{
		display: grid;
		grid-template-columns: 0.25em 1fr;
		column-gap: 0.5em;
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#locker h2:before{
			content: "";
			height: 1em;
			background: var(--color-variable);
			transform: translateY(0.2em);
			}
	#locker h2+div{
		margin-top: 8px;
		}
	#locker #lockerList{
		margin-top: 24px;
		}

#lockerList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 352px), 1fr));
	grid-gap: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	}
	#lockerList section{
		display: grid;
		grid-row-gap: 8px;
		}
	#lockerList h3{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font: 700 1.125em var(--font-min);
		}
		#lockerList h3:before{
			content: "";
			width: 1em;
			height: 2px;
			background: var(--color-theme);
			transform: translateY(0.725em);
			}
	#lockerList h3+div{
		display: flex;
		justify-content: center;
		margin-top: 16px;
		}
		#lockerList h3+div a{
			display: grid;
			grid-template-columns: 1fr 1em;
			align-items: center;
			grid-gap: 0.5em;
			min-width: min(100%, 320px);
			min-height: 48px;
			padding: 0.25em 0.5em 0.25em 1em;
			background: #1a1a1a;
			border-radius: 4px;
			color: #fff;
			font-weight: 700;
			font-family: var(--font-min);
			text-align: center;
			text-decoration: none;
			filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
			}
			#lockerList h3+div a:hover{
				background: var(--color-variable);
				}
			#lockerList h3+div a:after{
				content: "";
				aspect-ratio: 1 / 1;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
				}
	#lockerList figure{
		grid-row: 1;
		}
		#lockerList figure img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			}

#information{
	display: grid;
	width: var(--wrap);
	margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) auto 0 auto;
	}
	#information h2{
		display: grid;
		grid-template-columns: 3em 1fr;
		grid-gap: 0.25em 0.5em;
		font: 700 1em var(--font-min);
		letter-spacing: 0.1em;
		}
		#information h2:before{
			content: "Information";
			grid-column: 1 / 3;
			font-size: 2em;
			letter-spacing: unset;
			line-height: 1;
			}
		#information h2:after{
			content: "";
			grid-column: 1;
			grid-row: 2;
			height: 2px;
			background: var(--color-theme);
			transform: translateY(calc(0.75em - 1px));
			}
	@media (min-width: 768px) {
		#information h2{
			font-size: 18px;
			}
			#information h2:before{
				font-size: 44px;
				}
		}
	@media (max-width: 991.98px) {
		#information #informationList{
			margin-top: 16px;
			}
		#information #informationLink{
			margin-top: 24px;
			}
		}
	@media (min-width: 992px) {
		#information{
			grid-template-columns: auto 1fr;
			grid-gap: 24px 48px;
			}
			#information h2{
				align-self: end;
				}
			#information #informationList{
				grid-column: 2;
				grid-row: 1 / 3;
				}
			#information #informationLink{
				align-self: start;
				}
		}

#informationList{}
	#informationList section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-row-gap: 0.25em;
		padding: 1em 0;
		border-bottom: 1px solid #bdbdbd;
		}
		#informationList section h3,
		#informationList section p{
			width: 100%;
			order: 1;
			}
		#informationList section h3{
			margin-top: 0.25em;
			}
		#informationList section:has(a){
			padding-right: 48px;
			}
			#informationList section:has(a):hover h3{
				color: var(--color-theme);
				}
		#informationList section.new{}
			#informationList section.new time{}
				#informationList section.new time:after{
					content: "NEW";
					color: #b90c0c;
					}
	#informationList h3{
		font-weight: 700;
		transition: color 0.2s ease-out;
		}
	#informationList ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0.5em;
		list-style: none;
		}
	#informationList li{
		display: grid;
		align-items: center;
		min-height: 2em;
		padding: 0.2em 1em 0 1em;
		border: 1px solid #1a1a1a;
		line-height: 1;
		text-align: center;
		}
		#informationList li.pu{
			background: #1a1a1a;
			color: #fff;
			}
	#informationList a{
		position: absolute;
		top: 0;
		left: 0;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		width: 100%;
		height: 100%;
		color: inherit;
		font-size: 0;
		}
		#informationList a:hover{
			color: var(--color-theme);
			}
		#informationList a:after{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			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"><path d="M6,12.5c-.13,0-.26-.05-.35-.15-.2-.2-.2-.51,0-.71l3.65-3.65-3.65-3.65c-.2-.2-.2-.51,0-.71s.51-.2,.71,0l4,4c.2,.2,.2,.51,0,.71l-4,4c-.1,.1-.23,.15-.35,.15Z"/></svg>') no-repeat center / contain;
			}
	#informationList:not(:has(section)) p{
		padding: 10% 0;
		text-align: center;
		}
	@media (max-width: 767.98px) {
		#informationList ul{
			margin-left: 1em;
			}
		#informationList time{
			display: flex;
			column-gap: 0.5em;
			}
		}
	@media (min-width: 768px) {
		#informationList section{
			padding-left: 7em;
			}
			#informationList section p{
				font-size: 0.875em;
				}
		#informationList time{
			position: absolute;
			top: 1.2em;
			left: 0;
			display: inline-grid;
			font-size: 0.875em;
			text-align: center;
			}
		#informationList li{
			font-size: 0.75em;
			}
		}

#informationLink{
	display: flex;
	justify-content: center;
	}
	#informationLink a{
		display: grid;
		grid-template-columns: 1fr 1em;
		align-items: center;
		grid-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 0.5em 0.25em 1em;
		background: #1a1a1a;
		border-radius: 4px;
		color: #fff;
		font-weight: 700;
		font-family: var(--font-min);
		text-align: center;
		text-decoration: none;
		filter: drop-shadow(0.2em 0.2em 0.2em rgba(0,0,0,0.15));
		}
		#informationLink a:hover{
			background: var(--color-variable);
			}
		#informationLink a:after{
			content: "";
			aspect-ratio: 1 / 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7,16.5c-0.1,0-0.3,0-0.4-0.1c-0.2-0.2-0.2-0.5,0-0.7l5.6-5.6L6.6,4.4c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0l6,6 c0.2,0.2,0.2,0.5,0,0.7l-6,6C7.3,16.5,7.1,16.5,7,16.5z"/></svg>') no-repeat center / contain;
			}

#sns{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	#sns h3{
		display: none;
		}

#snsList{}
	#snsList ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
		}
	#snsList li{
		display: contents;
		}
	#snsList a{
		display: block;
		aspect-ratio: 1;
		width: 48px;
		background: currentColor;
		color: inherit;
		font-size: 0;
		-webkit-mask: no-repeat center / 32px;
		}
		#snsList a:hover{
			color: #b9840c;
			}
		#snsList a[href^="https://www.facebook.com/"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 0 20 20"><path d="M17.2,3.9c-0.7-0.4-1.2-0.7-1.9-0.7c-0.7,0-1.2,0.2-1.5,0.4c-0.3,0.3-0.4,0.8-0.4,1.6v1.2h3.6l-0.8,3.3h-2.8V20H8.9V9.7H6.8 V6.4h2.1V5.1C8.9,3.8,9,3,9.3,2.4c0.3-0.6,0.9-1.4,1.7-1.8C11.9,0.2,13.1,0,14.4,0c1.3,0,2.3,0.4,3.6,0.8L17.2,3.9z"/></svg>');
			}
		#snsList a[href^="https://www.youtube.com/"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.681 9.6c0 0-0.313-2.206-1.275-3.175-1.219-1.275-2.581-1.281-3.206-1.356-4.475-0.325-11.194-0.325-11.194-0.325h-0.012c0 0-6.719 0-11.194 0.325-0.625 0.075-1.987 0.081-3.206 1.356-0.963 0.969-1.269 3.175-1.269 3.175s-0.319 2.588-0.319 5.181v2.425c0 2.587 0.319 5.181 0.319 5.181s0.313 2.206 1.269 3.175c1.219 1.275 2.819 1.231 3.531 1.369 2.563 0.244 10.881 0.319 10.881 0.319s6.725-0.012 11.2-0.331c0.625-0.075 1.988-0.081 3.206-1.356 0.962-0.969 1.275-3.175 1.275-3.175s0.319-2.587 0.319-5.181v-2.425c-0.006-2.588-0.325-5.181-0.325-5.181zM12.694 20.15v-8.994l8.644 4.513-8.644 4.481z"/></svg>');
			}
		#snsList a[href^="https://www.instagram.com/"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,4.8c-2.9,0-5.2,2.3-5.2,5.2c0,2.8,2.3,5.2,5.2,5.2c2.9,0,5.2-2.3,5.2-5.2C15.2,7.2,12.9,4.8,10,4.8z M10,13.5 c-2,0-3.6-1.6-3.6-3.5C6.4,8,8,6.5,10,6.5S13.6,8,13.6,10C13.6,12,12,13.5,10,13.5z M15.4,3.5c-0.6,0-1.2,0.5-1.2,1.2 c0,0.6,0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2C16.6,4.1,16,3.5,15.4,3.5z M14.3,0H5.7C2.6,0,0,2.5,0,5.7v8.7C0,17.5,2.6,20,5.7,20h8.5 c3.2,0,5.7-2.5,5.7-5.7V5.7C20,2.5,17.4,0,14.3,0z M18,14.3c0,2-1.7,3.6-3.7,3.6H5.7c-2,0-3.7-1.6-3.7-3.6V5.7C2,3.6,3.7,2,5.7,2 h8.5c2,0,3.7,1.6,3.7,3.6V14.3z"/></svg>');
			}

#instagram{
	margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	#instagram h4{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		column-gap: 0.5em;
		color: var(--color-theme);
		font: 700 1.5em var(--font-min);
		letter-spacing: 0.1em;
		}
		#instagram h4:before{
			content: "";
			aspect-ratio: 1;
			width: 1.5m;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10,4.8c-2.9,0-5.2,2.3-5.2,5.2c0,2.8,2.3,5.2,5.2,5.2c2.9,0,5.2-2.3,5.2-5.2C15.2,7.2,12.9,4.8,10,4.8z M10,13.5 c-2,0-3.6-1.6-3.6-3.5C6.4,8,8,6.5,10,6.5S13.6,8,13.6,10C13.6,12,12,13.5,10,13.5z M15.4,3.5c-0.6,0-1.2,0.5-1.2,1.2 c0,0.6,0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2C16.6,4.1,16,3.5,15.4,3.5z M14.3,0H5.7C2.6,0,0,2.5,0,5.7v8.7C0,17.5,2.6,20,5.7,20h8.5 c3.2,0,5.7-2.5,5.7-5.7V5.7C20,2.5,17.4,0,14.3,0z M18,14.3c0,2-1.7,3.6-3.7,3.6H5.7c-2,0-3.7-1.6-3.7-3.6V5.7C2,3.6,3.7,2,5.7,2 h8.5c2,0,3.7,1.6,3.7,3.6V14.3z"/></svg>') no-repeat center / contain;
			}
	#instagram h4+div{
		margin-top: 24px;
		}
	#instagram strong{
		color: var(--color-theme);
		font-weight: 700;
		}
	#instagram #instagramList{
		margin-top: 24px;
		}

#instagramList{}
	#instagramList ul{
		display: grid;
		grid-gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 224px), 1fr));
		list-style: none;
		}
	#instagramList img{
		aspect-ratio: 1;
		object-fit: cover;
		}