/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
/*
Zen Kurenaido
	font-family: "Zen Kurenaido", sans-serif;
	font-weight: 400;
*/

:root{
	--bg: #f0f5f7;
	--areaTabHeight: 40px;
	--calendarTabHeight: 40px;
}

#main{
	display: grid;
	padding-bottom: clamp(88px, calc(144 / 768 * 100dvw), 144px);
	background: var(--color-bg);
	#contents{
		justify-self: center;
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
		padding: clamp(48px, calc(72 / 768 * 100dvw), 72px) clamp(24px, calc(40 / 768 * 100dvw), 40px);
		background: white;
		@media (min-width: 992px) {
			width: min(100%, 1120px);
			border-radius: 40px;
		}
	}
}

#guide{
	display: grid;
	&{
		#guideText{
			justify-self: center;
			width: min(var(--wrap-fit), 1040px);
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	& hgroup{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: 16px;
		&{
			&:before{
				content: "";
				grid-column: 1 / 4;
				grid-row: 1;
				background: white;
				margin-bottom: -8px;
			}
			& h2{
				grid-column: 2;
				grid-row: 1;
				margin-top: 24px;
			}
			& p{
				grid-column: 2;
				grid-row: 2;
				justify-self: center;
			}
		}
		& h2{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
			text-align: center;
		}
		& p{
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
			#guide &{
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em, currentColor 6.6em, var(--color-theme) 6.6em, var(--color-theme) 7.6em, currentColor 7.6em);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	#guideText{
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 2.25;
	}
}

#contents{
	display: grid;
	grid-row-gap: clamp(64px, calc(120 / 768 * 100dvw), 120px);
	& article{
		display: grid;
		& hgroup,
		[id$="Text"]{
			justify-self: center;
			width: min(100%, 864px);
		}
		[id$="Text"]{
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto clamp(16px, calc(24 / 768 * 100dvw), 24px);
		align-items: center;
		column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		&{
			&:before{
				grid-column: 1;
				grid-row: 2;
			}
			& h2{
				grid-column: 1;
				grid-row: 1;
			}
			& p{
				grid-column: 2;
				grid-row: 2;
			}
		}
		&:before{
			content: "";
			min-width: 48px;
			border-top: 1px solid currentColor;
		}
		& h2{
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
		}
		& p{
			font-weight: 600;
			font-size: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			font-family: 'Montserrat', var(--font);
			white-space: nowrap;
			letter-spacing: 0.1em;
			#area &{
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0, currentColor 3.1em, var(--color-theme) 3.1em, var(--color-theme) 3.9em, currentColor 0);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#faq &{
				background: linear-gradient(90deg, var(--color-theme) 0.7em, currentColor 0);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#calendar &{
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#dialect &{
				background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}
	[id$="Text"]{
		font-weight: 600;
		letter-spacing: 0.05em;
		line-height: 1.75;
	}
	[id$="Tab"]{
		display: grid;
		grid-template-columns: calc(100% - (var(--wrap-space) * 2));
		justify-content: center;
		justify-items: center;
		& ul{
			display: grid;
			border-radius: 20px;
			background: white;
			outline: 1px solid currentColor;
			& li{
				grid-row: 1;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 40px;
			padding: 4px clamp(16px, calc(20 / 768 * 100dvw), 20px);
			border-radius: 20px;
			font-weight: 700;
			font-size: clamp(12px, calc(16 / 768 * 100dvw), 16px);
			text-align: center;
			text-wrap: balance;
			cursor: pointer;
			&.select{
				background: var(--color);
				color: white;
				pointer-events: none;
			}
		}
	}
	[id$="Link"]{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		& a{
			display: grid;
			align-items: center;
			min-width: 272px;
			min-height: 48px;
			padding: 8px 16px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 800;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
		}
	}
}

#area{
	&{
		#areaTab{
			margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
			z-index: 1;
		}
		#areaLink{
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	#areaTab{
		grid-template-rows: calc(var(--areaTabHeight) / 2);
		align-items: start;
	}
	#areaContents{
		display: grid;
		align-items: start;
		& details{
			grid-column: 1;
			grid-row: 1;
			background: #c5dae8;
			border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			overflow: hidden;
			&{
				display: grid;
				@media (max-width: 991.98px) {
					[id$="List"]{
						order: 1;
						&:not(.open){
							display: none;
						}
					}
					&:not(.select){
						display: none;
					}
				}
				@media (min-width: 992px) {
					[id$="List"],
					[id$="Map"]{
						grid-column: 1;
						grid-row: 1;
					}
					[id$="List"]{
						align-self: end;
						justify-self: end;
						transition: transform 0.2s ease-out;
						transform: translateX(calc(100% + 48px));
						z-index: 1;
						&.open{
							transform: translateX(0);
						}
						&:not(.open){
							[id$="Map"]{
							}
						}
					}
					&:not(.select){
						visibility: hidden;
					}
				}
			}
			&::details-content{
				display: contents;
			}
			& summary{
				display: none;
			}
		}
	}
	[id$="List"]{
		display: grid;
		& section{
			display: grid;
			grid-template-rows: auto auto auto 1fr;
			grid-row-gap: 24px;
			padding: clamp(40px, calc(48 / 768 * 100dvw), 48px) clamp(32px, calc(56 / 768 * 100dvw), 56px);
			background: var(--color);
			color: #fff;
			&[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;
				& h4{
					margin-top: -8px;
					font-weight: 700;
					font-size: 18px;
					letter-spacing: 0.15em;
				}
				& 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{
				grid-row: 3;
				& img{
					#areaSpotList &{
						aspect-ratio: 3 / 2;
						object-fit: cover;
					}
				}
			}
		}
		[id$="Slide"]{
			&:not(.slick-slider){
				& > section,
				& > span{
					&:nth-child(n+2){
						display: none;
					}
				}
			}
			&.slick-slider{
				.slick-track{
					display: flex;
				}
				.slick-slide{
					float: unset;
					display: grid;
					height: auto;
				}
			}
		}
		[id$="Close"]{
			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;
		}
		&{
			position: relative;
			[id$="Close"]{
				position: absolute;
				top: 0;
			}
			@media (max-width: 991.98px) {
				[id$="Close"]{
					right: 0;
					transform: translateY(-100%);
				}
			}
			@media (min-width: 992px) {
				width: min(100%, 480px);
				& section{
					border-radius: clamp(32px, calc(56 / 768 * 100dvw), 56px) 0 0 0;
				}
				[id$="Close"]{
					left: 0;
					transform: translateX(-100%);
				}
			}
		}
	}
	[id$="Map"]{
		position: relative;
		& svg{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			&[viewBox="0 0 537 384"]{
				height: 100%;
				transform: scale(0.9);
			}
		}
		& a{
			opacity: 0;
			cursor: pointer;
		}
		@media (max-width: 991.98px) {
			aspect-ratio: 1;
			& svg{
				&:has(.select){
					& > use,
					& a{
						opacity: 0;
						pointer-events: none;
					}
				}
				&[viewBox="0 0 1040 750"]{
					display: none;
				}
			}
			&:has(g.select){
				& svg:has(a){
					visibility: hidden;
				}
			}
			&:not(:has(g.select)){
				& svg:has(g){
					display: none;
				}
			}
			& g{
				opacity: 0;
				pointer-events: none;
				&.select{
					opacity: 1;
				}
			}
		}
		@media (min-width: 992px) {
			aspect-ratio: 1040 / 750;
			& svg{
				&[viewBox="0 0 390 786"]{
					display: none;
				}
			}
		}
	}
}

#faq{
	&{
		#faqLink{
			order: 1;
			margin-top: 24px;
		}
		& figure{
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
}

#calendar{
	&{
		#calendarTab{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
			z-index: 1;
		}
		#calendarLink{
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	#calendarTab{
		grid-template-rows: calc(var(--calendarTabHeight) / 2);
		align-items: start;
	}
	#calendarList{
		& details{
			&:not(.select){
				display: none;
			}
			&::details-content{
				display: contents;
			}
		}
		& summary{
			display: none;
		}
		& summary+div{
			border: 1px solid currentColor;
			border-radius: 16px;
			overflow: hidden;
		}
		& table{
			display: grid;
			& tr{
				display: grid;
			}
			@media (max-width: 991.98px) {
				& thead{
					display: none;
				}
				& tbody{
					display: grid;
					padding-top: calc(var(--calendarTabHeight) / 2);
					& tr{
						grid-template-columns: repeat(6, 1fr);
						&:nth-child(n+2){
							border-top: 1px solid color-mix(in srgb, white, black 14.9%);
						}
					}
					& th{
						grid-column: 1 / 7;
					}
					& td{
						border-top: 1px solid color-mix(in srgb, white, black 14.9%);
						&:not(:nth-of-type(6n+1)){
							border-left: 1px solid color-mix(in srgb, white, black 14.9%);
						}
					}
					@media (min-width: 768px) {
						& tr{
							grid-template-columns: repeat(12, 1fr);
						}
						& th{
							grid-column: 1 / 13;
						}
						& td{
							&:not(:nth-of-type(1)){
								border-left: 1px solid color-mix(in srgb, white, black 14.9%);
							}
						}
					}
				}
				&.on{
					background: var(--color-theme);
					color: white;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				& tr{
					grid-template-columns: subgrid;
					grid-column: 1 / 14;
				}
				& td{
					border-left: 1px solid color-mix(in srgb, white, black 14.9%);
				}
				& thead{
					& th,
					& td{
						padding-top: calc(var(--calendarTabHeight) / 2 + 8px);
					}
				}
				& tbody{
					& tr{
						transition: background 0.2s ease-out;
						&:nth-child(even){
							background: color-mix(in srgb, white, black 3.14%);
						}
						&:has(a:hover){
							background: color-mix(in srgb, transparent, var(--color-theme) 10%);
						}
					}
					& th{
						width: clamp(320px, calc(376 / 1366 * 100dvw), 376px);
					}
				}
			}
		}
		& thead{
			display: contents;
			& tr{
				background: color-mix(in srgb, white, black 3.14%);
				border-bottom: 1px solid color-mix(in srgb, white, black 30%);
				font-size: clamp(10px, calc(14 / 768 * 100dvw), 14px);
			}
			& th,
			& td{
				padding: 8px;
				font-weight: inherit;
				text-align: center;
				text-wrap: balance;
			}
		}
		& tbody{
			display: contents;
			background: white;
			& tr{
				position: relative;
			}
			& th{
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				column-gap: 16px;
				padding: 8px;
				& h3{
					margin-right: 8px;
					font-weight: inherit;
					font-size: 14px;
				}
				& h3+div{
					display: contents;
				}
				& a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					font-size: 0;
					z-index: 1;
					&[href="[url]"]{
						pointer-events: none;
					}
				}
				& figure{
					order: -1;
					& img{
						aspect-ratio: 1;
						width: 64px;
						border-radius: 8px;
						object-fit: cover;
					}
				}
			}
			& td{
				display: grid;
				align-items: center;
				padding: 8px;
				font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
				text-align: center;
				text-wrap: balance;
				@media (max-width: 991.98px) {
					background: color-mix(in srgb, transparent, black 10%);
					color: color-mix(in srgb, transparent, black 20%);
					&[data-level]{
						background: var(--color-theme);
						color: white;
						font-weight: 700;
					}
				}
				@media (min-width: 992px) {
					position: relative;
					font-size: 0;
					&:after{
						content: "";
						position: absolute;
						top: 50%;
						left: 0;
						width: 100%;
						height: 18px;
						background: color-mix(in srgb, white, black 18%);
						transform: translateY(-50%);
					}
					&[data-level]:after{
						background: var(--color-theme);
					}
					&[data-level="1"]:after{
						left: 0;
						width: 100%;
					}
					&[data-level="0-1"]:after{
						background: linear-gradient(90deg, color-mix(in srgb, white, black 18%) 50%, var(--color-theme) 0);
					}
					&[data-level="1-0"]:after{
						background: linear-gradient(90deg, var(--color-theme) 50%, color-mix(in srgb, white, black 18%) 0);
					}
				}
			}
		}
	}
}

#dialect{
	&{
		#dialectList{
			justify-self: center;
			width: min(100%, 864px);
			margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
		}
		#dialectLink{
			margin-top: clamp(48px, calc(80 / 768 * 100dvw), 80px);
		}
	}
	#dialectList{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
		grid-gap: clamp(32px, calc(48 / 768 * 100dvw), 48px) clamp(24px, calc(48 / 768 * 100dvw), 48px);
		& section{
			display: grid;
			align-content: start;
			grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
		& h3{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 0.25em;
			min-height: clamp(64px, calc(72 / 768 * 100dvw), 72px);
			padding: 8px clamp(16px, calc(24 / 768 * 100dvw), 24px);
			border: 4px solid color-mix(in srgb, white, black 20%);
			border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			font-family: "Zen Kurenaido", var(--font);
			letter-spacing: 0.2em;
			text-align: center;
			text-wrap: balance;
			&:before{
				content: "Q.";
				color: var(--color-theme);
				font-family: 'Montserrat', var(--font);
				letter-spacing: 0.1em;
			}
			&:after{
				content: "";
				position: absolute;
				top: 100%;
				right: clamp(24px, calc(40 / 768 * 100dvw), 40px);
				width: 38px;
				height: clamp(24px, calc(32 / 768 * 100dvw), 32px);
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" style="fill: white; stroke: color-mix(in srgb, white, black 20%); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px;"><polygon points="2 36 2 2 36 2 2 36"/></svg>') no-repeat right bottom / cover;
			}
			& span{
				position: absolute;
				top: 0;
				left: 0;
				transform: translate(-50%, -50%);
				display: grid;
				align-items: center;
				aspect-ratio: 1;
				width: 3.5em;
				background: white;
				border: 1px solid currentColor;
				border-radius: 100%;
				font-weight: 700;
				font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
				font-family: var(--font);
				letter-spacing: 0.15em;
				text-align: center;
				text-wrap: balance;
				&[dala-level="1"]{
					background: color-mix(in srgb, white, black 55%);
					border-color: transparent;
					color: white;
				}
				&[dala-level="2"]{
					background: color-mix(in srgb, white, black 81.11%);
					border-color: transparent;
					color: white;
				}
			}
		}
		& details{
			display: grid;
			min-height: clamp(64px, calc(72 / 768 * 100dvw), 72px);
			background: color-mix(in srgb, white, black 4%);
			border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			&::details-content{
				display: contents;
			}
		}
		& summary{
			order: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 8px;
			min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
			padding: 8px clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.025em;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				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-miterlimit: 10; stroke-width: 2px;"><line x1="8" y1="2" x2="8" y2="14"/><line x1="14" y1="8" x2="2" y2="8"/></svg>') no-repeat center / contain;
			}
			[open] &:after{
				-webkit-mask-image: 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="14" y1="8" x2="2" y2="8"/></svg>');
			}
		}
		& summary+div{
			padding: clamp(8px, calc(16 / 768 * 100dvw), 16px) clamp(24px, calc(32 / 768 * 100dvw), 32px) 0 clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
		& h4{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 0.05em;
			padding-bottom: 0.15em;
			border-bottom: 1px solid var(--color-theme);
			font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
			&:before{
				content: "A.";
				color: var(--color-theme);
				font-size: clamp(24px, calc(28 / 768 * 100dvw), 28px);
				font-family: 'Montserrat', var(--font);
				letter-spacing: 0.1em;
				white-space: nowrap;
				transform: translateY(0.025em);
			}
		}
		& h4+div{
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			& dl{
				display: grid;
				justify-items: start;
				& dt{
					padding: 0.15em 0.25em;
					border: 1px solid currentColor;
					border-radius: 4px;
					font-size: 13px;
					line-height: 1;
				}
				& dd{
					padding: 8px;
					letter-spacing: 0.025em;
				}
			}
		}
	}
}