/* CSS Document */

article{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	&:not(#search, #result){
		margin: 32px 0;
		@media (min-width: 1200px) {
			margin: 72px 0 48px 0;
		}
		& h2{
			justify-self: center;
			position: relative;
			padding: 4px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 32px;
			font-family: fot-tsukubrdgothic-std, sans-serif;
			@media (min-width: 1200px) {
				font-size: 48px;
			}
			&:before,
			&:after{
				content: "";
				position: absolute;
				background: currentColor;
			}
			&:before{
				top: 0;
				right: 0;
				aspect-ratio: 22 / 28;
				width: 22px;
				transform: translateX(100%);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.98 28.31"><path d="M7.32.2c-.64-.39-1.47-.19-1.86.45-.87,1.42-1.74,2.84-2.6,4.26C1.96,6.36-.61,9.16.13,10.98c.23.56.53.77.88.74,1.35-.12,3.31-4.03,3.73-4.73,1.01-1.65,2.02-3.29,3.02-4.94.39-.64.19-1.47-.45-1.86ZM20.56,24.61c-1.92.1-3.35.28-4.73.45-1.52.19-4.26-.3-5.44.93-.87.91-.35,1.95.85,2.23.04,0,.07.02.11.02,1.41.27,3.42-.32,4.82-.5,1.39-.18,2.71-.34,4.53-.43.75-.04,1.32-.67,1.28-1.42s-.66-1.32-1.42-1.28ZM11.97,16.33c2.13-.94,4.19-2.05,6.28-3.07.67-.33.95-1.14.62-1.81-.33-.67-1.14-.94-1.81-.62-1.36.66-2.72,1.33-4.08,1.99-1.08.53-3.1.91-3.65,2.13-.61,1.37.19,1.75,1.15,1.72.52-.02,1.09-.16,1.49-.34Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
			&:after{
				left: 0;
				bottom: 0;
				width: 100%;
				height: 3px;
				border-radius: 3px;
			}
		}
		& h2+div{
			margin-top: 32px;
			font-weight: 700;
			font-size: 15px;
			text-align: center;
			letter-spacing: 0.1em;
			@media (min-width: 1200px) {
				margin-top: 56px;
			}
			&:has(wbr){
				word-break: keep-all;
			}
		}
	}
	&:has(#tab){
		margin-bottom: 0;
	}
}

#tab{
	display: grid;
	grid-template-columns: 1fr min(100%, 768px) 1fr;
	margin-top: 32px;
	@media (min-width: 1200px) {
		margin-top: 56px;
	}
	& ul{
		grid-column: 2;
		display: grid;
		column-gap: 8px;
		@media (min-width: 576px) {
			column-gap: 24px;
			&:has(li:nth-child(2):last-child){
				grid-template-columns: repeat(2, 1fr);
			}
		}
		@media (min-width: 768px) {
			column-gap: 48px;
		}
	}
	& li{
		grid-row: 1;
		position: relative;
		display: grid;
		color: var(--color-theme);
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 200%;
			border: 3px solid currentColor;
			border-radius: 16px 16px 0 0;
			z-index: -1;
		}
		&.select{
			color: #fff;
			&:before{
				background: var(--color-theme);
				border-color: transparent;
			}
		}
	}
	& a{
		display: grid;
		min-height: 56px;
		padding: 8px;
		align-items: center;
		color: inherit;
		font-weight: 900;
		letter-spacing: 0.03em;
		text-align: center;
		text-decoration: none;
		@media (min-width: 1200px) {
			min-height: 64px;
			font-size: 20px;
		}
	}
}

#share{
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr min(var(--wrap), 960px) 1fr;
	align-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(32px, 7.2vw, 48px) 0;
	background: rgba(0 ,0 ,0 ,0.8);
	z-index: 1000;
	& dl{
		grid-column: 2;
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
		padding: 24px;
		background: #fff;
		border-radius: 8px;
		filter: drop-shadow(0 0 0.3em rgba(0,0,0,0.1));
	}
	& dt{
		display: grid;
		grid-template-columns: 4px auto;
		grid-gap: 8px;
		width: 100%;
		font-weight: 700;
		font-size: 20px;
		&:before{
			content: "";
			margin: 0.35em 0 0.25em 0;
			background: var(--color-theme);
		}
	}
	& dt+dd{
		width: 100%;
	}
	& dd{
		& a{
			display: grid;
			grid-template-columns: 16px auto;
			align-items: center;
			grid-gap: 4px;
			min-height: 32px;
			padding: 4px 16px;
			border-radius: 16px;
			color: inherit;
			font-size: 12px;
			text-align: center;
			text-decoration: none;
			letter-spacing: 0.025em;
			cursor: pointer;
			&:before{
				content: "";
				aspect-ratio: 1;
				-webkit-mask-position: center;
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				transform: translateX(-4px);
			}
			&[data-target="confirm"] {
				border: 1px solid var(--color-border);
				&:before {
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0.106 11.553c-0.136 0.274-0.146 0.603 0 0.894 0 0 0.396 0.789 1.12 1.843 0.451 0.656 1.038 1.432 1.757 2.218 0.894 0.979 2.004 1.987 3.319 2.8 1.595 0.986 3.506 1.692 5.698 1.692s4.103-0.706 5.698-1.692c1.315-0.813 2.425-1.821 3.319-2.8 0.718-0.786 1.306-1.562 1.757-2.218 0.724-1.054 1.12-1.843 1.12-1.843 0.136-0.274 0.146-0.603 0-0.894 0 0-0.396-0.789-1.12-1.843-0.451-0.656-1.038-1.432-1.757-2.218-0.894-0.979-2.004-1.987-3.319-2.8-1.595-0.986-3.506-1.692-5.698-1.692s-4.103 0.706-5.698 1.692c-1.315 0.813-2.425 1.821-3.319 2.8-0.719 0.786-1.306 1.561-1.757 2.218-0.724 1.054-1.12 1.843-1.12 1.843zM2.14 12c0.163-0.281 0.407-0.681 0.734-1.158 0.41-0.596 0.94-1.296 1.585-2.001 0.805-0.881 1.775-1.756 2.894-2.448 1.35-0.834 2.901-1.393 4.647-1.393s3.297 0.559 4.646 1.393c1.119 0.692 2.089 1.567 2.894 2.448 0.644 0.705 1.175 1.405 1.585 2.001 0.328 0.477 0.572 0.876 0.734 1.158-0.163 0.281-0.407 0.681-0.734 1.158-0.41 0.596-0.94 1.296-1.585 2.001-0.805 0.881-1.775 1.756-2.894 2.448-1.349 0.834-2.9 1.393-4.646 1.393s-3.297-0.559-4.646-1.393c-1.119-0.692-2.089-1.567-2.894-2.448-0.644-0.705-1.175-1.405-1.585-2.001-0.328-0.477-0.572-0.877-0.735-1.158zM16 12c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172-2.106 0.449-2.828 1.172-1.172 1.724-1.172 2.828 0.449 2.106 1.172 2.828 1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828zM14 12c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414 0.223-1.051 0.586-1.414 0.861-0.586 1.414-0.586 1.051 0.223 1.414 0.586 0.586 0.861 0.586 1.414z"/></svg>');
				}
			}
			&[data-target="mailto"] {
				border: 1px solid var(--color-border);
				&:before {
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.921l8.427 5.899c0.34 0.235 0.795 0.246 1.147 0l8.426-5.899v10.079c0 0.272-0.11 0.521-0.295 0.705s-0.433 0.295-0.705 0.295h-16c-0.272 0-0.521-0.11-0.705-0.295s-0.295-0.433-0.295-0.705zM1 5.983c0 0.010 0 0.020 0 0.030v11.987c0 0.828 0.34 1.579 0.88 2.12s1.292 0.88 2.12 0.88h16c0.828 0 1.579-0.34 2.12-0.88s0.88-1.292 0.88-2.12v-11.988c0-0.010 0-0.020 0-0.030-0.005-0.821-0.343-1.565-0.88-2.102-0.541-0.54-1.292-0.88-2.12-0.88h-16c-0.828 0-1.579 0.34-2.12 0.88-0.537 0.537-0.875 1.281-0.88 2.103zM20.894 5.554l-8.894 6.225-8.894-6.225c0.048-0.096 0.112-0.183 0.188-0.259 0.185-0.185 0.434-0.295 0.706-0.295h16c0.272 0 0.521 0.11 0.705 0.295 0.076 0.076 0.14 0.164 0.188 0.259z"/></svg>');
				}
			}
			&[data-target="twitter"] {
				background: #000;
				color: #fff;
				&:before {
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M21.42,15.24L34.83,0h-3.18l-11.64,13.24L10.72,0H0l14.05,20.01L0,36h3.18l12.29-13.98,9.82,13.98h10.72l-14.58-20.76h0ZM17.07,20.19l-1.42-1.99L4.32,2.34h4.88l9.14,12.8,1.42,1.99,11.89,16.64h-4.88l-9.7-13.58h0Z"/></svg>');
				}
			}
			&[data-target="facebook"] {
				background: #3b5998;
				color: #fff;
				&:before {
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M19.52,5.08V0c-3.16,0-5.51.91-7,2.7a6.88,6.88,0,0,0-1.46,5.08V9.61H8.48v5.08h2.58V28h5.09V14.69h2.49V9.61H16.15v-2l0-.41a1.81,1.81,0,0,1,.34-1.28C16.92,5.38,18,5.08,19.52,5.08Z"/></svg>');
				}
			}
			&[data-target="line"] {
				background: #00c300;
				color: #fff;
				&:before {
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M28,12C28,5.76,21.72.66,14,.66S0,5.76,0,12c0,5.62,5,10.32,11.71,11.21.45.1,1.07.3,1.23.69A3,3,0,0,1,13,25.19s-.17,1-.2,1.2-.28,1.38,1.21.75S22.06,22.39,25,19h0A10.09,10.09,0,0,0,28,12ZM9.06,15.37a.27.27,0,0,1-.27.27H4.86a.27.27,0,0,1-.27-.27h0V9.26A.27.27,0,0,1,4.86,9h1a.27.27,0,0,1,.27.27v4.85H8.79a.27.27,0,0,1,.27.27Zm2.37,0a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,10.17,9h1a.27.27,0,0,1,.27.27Zm6.76,0a.27.27,0,0,1-.27.27H16.78a.23.23,0,0,1-.07-.07l-2.8-3.78v3.63a.27.27,0,0,1-.27.27h-1a.27.27,0,0,1-.27-.27V9.26A.27.27,0,0,1,12.65,9h1.18v0h0l0,0,2.8,3.77V9.26A.27.27,0,0,1,16.93,9h1a.27.27,0,0,1,.27.27Zm5.42-5.12a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H20.67v1h2.67a.27.27,0,0,1,.27.27v1a.27.27,0,0,1-.27.27H19.41a.27.27,0,0,1-.27-.27h0V9.27h0A.27.27,0,0,1,19.41,9h3.93a.27.27,0,0,1,.27.27Z"/></svg>');
				}
			}
		}
	}
	& menu{
		all: unset;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		width: 32px;
		aspect-ratio: 1;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"/></svg>') center no-repeat;
		background-size: 75%;
		border-radius: 100%;
		font-size: 0;
		cursor: pointer;
		transform: translate(50%, -50%);
		z-index: 1;
	}
}

#shareToggle{
	display: grid;
	grid-template-columns: 12px 1fr;
	align-items: center;
	grid-gap: 8px;
	min-height: 48px;
	width: min(100%, 320px);
	padding: 8px 16px;
	background: #fff;
	border: 2px solid #4D4141;
	border-radius: 24px;
	color: inherit;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	&:before {
		content: "";
		aspect-ratio: 1;
		background: var(--color-theme);
		border-radius: 50%;
	}
	div:has(>&){
		display: flex;
		justify-content: center;
		margin-bottom: 24px;
	}
}

#search{
	position: relative;
	padding: 48px 0;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 60"><path fill="%23f0f0e4" d="M0,59.81S0,15.33,0,15.33c0,0,105.52-9.8,113.02-10.51C163.29,0,214.69-1.23,265.51,1.25c114.63,5.59,228.35,29.73,341.86,19.29,46.5-4.28,90.85-14.26,137.46-18.18,97.94-8.22,195.9,10.83,294.48,16.24,57.01,3.13,114.85,1.66,171.1-4.36,28.98-3.1,58.89-7.45,88.66-6.01,24.05,1.16,66.94,7.09,66.94,7.09v44.48S0,60.23,0,59.81Z"/></svg>'), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 60"><path fill="%23f0f0e4" d="M0,0s0,40.35,0,40.35c0-.53,55.47-3.1,60.56-3.38,96.12-5.3,196.78-4.81,291.33,9.28,23.37,3.48,46.91,7.87,70.64,10.67,20.1,2.37,39.63,1.83,59.68,2.68,22.81.97,45.79.24,68.22-2.93,27.14-3.84,52.98-11.19,79.73-16.19,57.44-10.75,119.36-9.76,177.69-3.06,56.94,6.54,114.72,16.74,172.22,6.84,36.75-6.32,71.31-20.11,109.16-20.71,45.91-.73,87.1,18.17,131.18,27.13,68.6,13.95,145.6,6.5,145.6,6.5V0S-3,0,0,0Z"/></svg>'), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10" width="10" height="10"><rect fill="%23f0f0e4" width="10" height="10"/></svg>');
	background-repeat: no-repeat;
	background-position: center top, center bottom, center;
	background-repeat: no-repeat;
	background-size: 100% min(5vw, 64px), 100% min(5vw, 64px), 100% calc(100% - (min(5vw, 64px) * 2) + 2px);
	z-index: 10;
	@media (max-width: 991.98px) {
		grid-row-gap: 8px;
		#searchMenu,
		#searchMenu ul,
		#searchDetail{
			display: contents;
		}
		#searchMenu li,
		#searchDetail section{
			grid-column: 2;
			&:nth-child(1){
				order: 1;
			}
			&:nth-child(2){
				order: 2;
			}
			&:nth-child(3){
				order: 3;
			}
			&:nth-child(4){
				order: 4;
			}
			&:nth-child(5){
				order: 5;
			}
		}
		#searchCurrent{
			order: 10;
		}
	}
	@media (min-width: 1200px) {
		padding: 80px 0 64px 0;
	}
	&:not(:has(#searchCurrent)){
		padding-bottom: 64px;
		@media (min-width: 1200px) {
			padding-bottom: 80px;
		}
	}
	& h2{
		display: none;
	}
}

#searchMenu{
	& ul{
		display: grid;
		grid-gap: 24px;
		@media (min-width: 992px) {
			& li,
			& input,
			& button{
				grid-row: 1;
			}
			&:has(li:nth-child(2)):last-child{
				grid-template-columns: 1fr 1fr;
			}
		}
		@media (min-width: 1200px) {
			&:has(li:nth-child(3)):last-child{
				grid-template-columns: 1fr 1fr 1fr;
			}
			&:has(li:nth-child(4)):last-child{
				grid-template-columns: 1fr 1fr 1fr 1.5fr;
			}
		}
	}
	& li{
		&:not(:has(input)){
			display: grid;
			grid-template-columns: 1fr 14px;
			align-items: center;
			grid-gap: 8px;
			min-height: 48px;
			padding: 8px 16px 8px 24px;
			border-radius: 24px;
			background: #fff;
			color: #a6a4a3;
			font-weight: 700;
			letter-spacing: 0.18em;
			cursor: pointer;
			&:after{
				content: "";
				aspect-ratio: 1;
				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" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="2 4.81 6.84 9.5 12 4.5"/></svg>') center no-repeat;
			}
			&.select{
				color: var(--color-theme);
				&:after{
					transform: scale(1, -1)
				}
			}
		}
		&:has(input){
			display: grid;
			grid-template-columns: 1fr auto;
			@media (min-width: 992px) {
				display: contents;
			}
		}
	}
	& input{
		padding: 0 24px;
		border: none;
		border-radius: 24px;
		font-weight: 700;
		letter-spacing: 0.18em;
		@media (max-width: 991.98px) {
			grid-column: 1 / 3;
			grid-row: 1;
			padding-right: 56px;
		}
		&::placeholder{
			color: #a6a4a3;
		}
	}
	& button{
		align-self: stretch;
		position: relative;
		aspect-ratio: 1;
		min-width: 48px;
		background: var(--color-theme);
		border-radius: 100%;
		font-size: 0;
		overflow: hidden;
		@media (max-width: 991.98px) {
			grid-column: 2;
			grid-row: 1;
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24,15.44c4.72,0,8.56,3.84,8.56,8.56s-3.84,8.56-8.56,8.56-8.56-3.84-8.56-8.56,3.84-8.56,8.56-8.56M24,13c-6.07,0-11,4.93-11,11s4.93,11,11,11,11-4.93,11-11-4.93-11-11-11h0Z"/><path d="M33.09,28.55h2v10.07c0,.55-.45,1-1,1h0c-.55,0-1-.45-1-1v-10.07h0Z" transform="translate(-14.12 34.09) rotate(-45)"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

#searchDetail{
	position: relative;
	& section{
		position: relative;
		display: grid;
		grid-gap: 24px;
		padding: 24px;
		background: #fff;
		border: 2px solid var(--color-theme);
		border-radius: 16px;
		overflow: hidden;
		z-index: 10;
		@media (min-width: 992px) {
			position: absolute;
			top: 16px;
			left: 0;
			width: 100%;
		}
		@media (min-width: 1200px) {
			grid-gap: 48px 32px;
			padding: 32px;
		}
	}
	& h3{
		display: none;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
		align-items: start;
		grid-gap: 8px 24px;
	}
	& li{
		display: grid;
		grid-template-columns: auto 1fr;
		font-weight: 700;
		letter-spacing: 0.05em;
		& input{
			grid-column: 1;
			grid-row: 1;
			margin: 12px;
			z-index: 1;
		}
		& label{
			grid-column: 1 / 3;
			grid-row: 1;
		}
		& ul{
			grid-column: 1 / 3;
			margin: 8px 0;
			& input{
				border-width: 1px;
			}
		}
		& li{
			font-weight: 500;
			font-size: 14px;
		}
	}
	& input{
		width: 10px;
		border: 2px solid currentColor;
		background: #fff;
		color: var(--color-theme);
		&:checked{
			background: currentColor;
			color: var(--color-theme)
		}
		&:checked+label{
			background: #f0f0e4;
			color: var(--color-theme);
		}
	}
	& label{
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 4px 16px 4px 32px;
		border-radius: 16px;
		background: #f2f2f2;
	}
	& menu{
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		aspect-ratio: 1;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 0 16px 0 16px;
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			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 48 48"><rect x="14" y="23.33" width="20" height="1.33" transform="translate(-9.94 24) rotate(-45)"/><rect x="23.33" y="14" width="1.33" height="20" transform="translate(-9.94 24) rotate(-45)"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& svg{
		width: 100%;
		height: auto;
		fill: var(--color);
	}
	.doButton{
		display: grid;
		justify-items: center;
		grid-gap: 16px 32px;
		margin-top: 16px;
		@media (min-width: 576px) {
			display: flex;
			flex-direction: row-reverse;
			justify-content: center;
		}
		@media (min-width: 1200px) {
			grid-gap: 24px 64px;
		}
		& button{
			display: grid;
			align-items: center;
			width: min(90%, 216px);
			min-height: 48px;
			padding: 4px 24px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			text-align: center;
			letter-spacing: 0.1em;
			&.doSearch{
				grid-template-columns: 1fr 24px;
				width: min(100%, 296px);
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				&:after{
					content: "";
					aspect-ratio: 1;
					background: #fff;
					transform: translateX(8px);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,5.75c3.45,0,6.25,2.8,6.25,6.25s-2.8,6.25-6.25,6.25-6.25-2.8-6.25-6.25,2.8-6.25,6.25-6.25M12,3.75C7.45,3.75,3.75,7.45,3.75,12s3.7,8.25,8.25,8.25,8.25-3.7,8.25-8.25S16.55,3.75,12,3.75h0Z"/><path d="M19.12,16.41h2v6.07c0,.55-.45,1-1,1h0c-.55,0-1-.45-1-1v-6.07h0Z" transform="translate(-8.21 20.07) rotate(-45)"/></svg>') center no-repeat;
					-webkit-mask-size: contain;
				}
			}
		}
	}
}

#searchArea{
	@media (min-width: 576px) {
		display: grid;
		grid-template-columns: 1fr auto;
		#searchAreaWide{
			align-self: center;
		}
		#searchAreaCity{
			grid-column: 1 / 3;
		}
	}
	@media (min-width: 1200px) {
		#searchAreaMap{
			margin-right: 24px;
		}
	}
	&:after{
		content: "";
		grid-row: 3;
		width: calc(100% + 48px);
		height: 3px;
		margin: 0 -24px;
		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 8 3" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 3px;"><line x1="3" y1="1.5" x2="5" y2="1.5"/></svg>') center repeat-x;
		-webkit-mask-size: contain;
	}
	@media (min-width: 576px) {
		&:after{
			grid-row: 2;
			width: calc(100% + 64px);
			margin: 0 -32px;
			grid-column: 1 / 3;
		}
	}
	& h4{
		display: none;
	}
	& dl{
		display: grid;
		grid-gap: 8px 24px;
		align-items: center;
		@media (min-width: 992px) {
			grid-template-columns: 9.5em auto;
			&:nth-child(1) dt{
				grid-column: 1 / 3;
				margin-right: auto;
				& label{
					padding-right: 40px;
				}
			}
		}
		@media (min-width: 1200px) {
			column-gap: 32px;
		}
	}
	& dt{
		display: grid;
		grid-template-columns: auto 1fr;
		font-weight: 700;
		letter-spacing: 0.05em;
		& input{
			grid-column: 1;
			grid-row: 1;
			margin: 12px;
			border-color: currentColor;
			z-index: 1;
		}
		& label{
			grid-column: 1 / 3;
			grid-row: 1;
		}
	}
	& dd{
		align-items: center;
		font-weight: 500;
		font-size: 13px;
		letter-spacing: 0.05em;
		&:empty{
			display: none;
		}
	}
	& li{
		& ul{
			grid-template-columns: repeat(2, 1fr);
			column-gap: 8px;
		}
	}
	& input{
		&[id="areaL1"],
		&[id="area1"]{
			color: #de5252;
			&:checked+label{
				background: #f5e0df;
				color: #de5252;
			}
		}
		&[id="areaL2"],
		&[id="area2"]{
			color: #1ead2b;
			&:checked+label{
				background: #cbe6c3;
				color: #1ead2b;
			}
		}
		&[id="areaL3"],
		&[id="area3"]{
			color: #2baacc;
			&:checked+label{
				background: #c2e5f2;
				color: #2baacc;
			}
		}
	}
	& label{
		&[for="areaL0"],
		&[for="area0"]{
			color: var(--color-theme);
		}
		&[for="areaL1"],
		&[for="area1"]{
			color: #de5252;
			&+ul input{
				color: #de5252;
				&:checked+label{
					background: #f5e0df;
					color: #de5252;
				}
			}
		}
		&[for="areaL2"],
		&[for="area2"]{
			color: #1ead2b;
			&+ul input{
				color: #1ead2b;
				&:checked+label{
					background: #cbe6c3;
					color: #1ead2b;
				}
			}
		}
		&[for="areaL3"],
		&[for="area3"]{
			color: #2baacc;
			&+ul input{
				color: #2baacc;
				&:checked+label{
					background: #c2e5f2;
					color: #2baacc;
				}
			}
		}
	}
	#searchAreaMap{
		order: -1;
	}
}

#searchAreaWide{
	display: grid;
	grid-gap: 24px;
	@media (min-width: 1200px) {
		grid-gap: 32px;
	}
	& h4+div{
		display: grid;
		grid-gap: 24px;
		@media (min-width: 1200px) {
			grid-gap: 40px;
			margin-bottom: 16px;
		}
	}
	.doButton{
		display: grid;
	}
}

#searchAreaCity{
	position: relative;
	display: grid;
	grid-gap: 24px;
	@media (min-width: 992px) {
		& ul{
			grid-template-columns: repeat(3, auto);
		}
	}
	@media (min-width: 1200px) {
		grid-gap: 32px;
		& ul{
			grid-template-columns: repeat(4, auto);
		}
	}
}

#searchDate{
	& table{
		width: 100%;
		text-align: center;
	}
	& caption{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
		padding: 16px 16px 8px 16px;
		background: #333;
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		& span{
			font-size: 12px;
		}
	}
	& thead{
		display: grid;
		background: #333;
		color: #fff;
		font-weight: 700;
		& td{
			padding: 4px;
		}
	}
	& tbody{
		display: grid;
		border: 0 solid #333;
		border-width: 1px 0 0 1px;
		font-weight: 500;
		& td{
			padding: 8px 4px;
			border: 0 solid #333;
			border-width: 0 1px 1px 0;
			&:empty{
				background: #f0f0e4;
			}
			&:not(:empty).check{
				background: #bfa108;
				color: #fff;
			}
		}
	}
	& tr{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
	}
}

#searchDateSlide{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 24px 16px;
	@media (min-width: 768px) {
		grid-template-columns: auto 1fr auto;
	}
	&>span,
	&>table{
		grid-column: 1 / 3;
		grid-row: 1;
		@media (min-width: 768px) {
			grid-column: 2;
		}
		&:nth-child(n+2){
			display: none;
		}
	}
	.slick-list{
		grid-column: 1 / 3;
		grid-row: 1;
		margin: 0 -16px;
		@media (min-width: 768px) {
			grid-column: 2;
		}
	}
	.slick-track{
		display: flex!important;
	}
	.slick-slide{
		margin: 0 16px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 48px;
		background: #fff;
		border-radius: 100%;
		border: 2px solid currentColor;
		color: var(--color-theme);
		font-size: 0;
		z-index: 1;
		@media (min-width: 768px) {
			justify-self: center;
		}
		&: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 48 48"><polyline points="21 32 29 24 21 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4px;"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
		&.slick-disabled{
			visibility: hidden;
		}
		&.slick-prev{
			@media (max-width: 767.98px) {
				justify-self: end;
			}
			&:before{
				transform: scale(-1, 1);
			}
		}
	}
}

#searchCurrent{
	margin-top: 32px;
	@media (min-width: 1200px) {
		grid-gap: 48px;
	}
	& dl{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px 16px;
		color: var(--color-theme);
		font-weight: 700;
	}
	& dt{
		padding-right: 32px;
		@media (max-width: 575.98px) {
			width: 100%;
		}
	}
	& dd{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 10px;
		align-items: center;
		grid-gap: 8px;
		min-height: 32px;
		padding: 4px 8px;
		border: 1px solid currentColor;
		border-radius: 16px;
		font-size: 14px;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><rect x="-1.48" y="4.41" width="12.96" height="1.18" transform="translate(-2.07 5) rotate(-45)"/><rect x="4.41" y="-1.48" width="1.18" height="12.96" transform="translate(-2.07 5) rotate(-45)"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
	& button{
		display: grid;
		grid-template-columns: 10px 1fr;
		align-items: center;
		grid-gap: 8px;
		min-height: 32px;
		padding: 4px 8px;
		border-radius: 16px;
		font-size: 14px;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
		}
	}
}

#result{
	& h2{
		display: none;
	}
}

#resultStatus{
	display: grid;
	justify-items: center;
	grid-gap: 16px 40px;
	margin: 16px 0 40px 0;
	@media (min-width: 768px) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

#resultCount{
	display: flex;
	align-items: center;
	column-gap: 8px;
	color: #595e5c;
	font-weight: 700;
	letter-spacing: 0.05em;
	@media (min-width: 1200px) {
		font-size: 18px;
	}
	& span{
		font-size: 32px;
		transform: translateY(-0.1em);
		@media (min-width: 1200px) {
			font-size: 40px;
		}
	}
}

#resultSet{
	& dl{
		display: grid;
		min-height: 32px;
		align-items: center;
	}
	& dt{
		grid-row: 1;
		margin-right: 16px;
		color: #595e5c;
		font-weight: 700;
		letter-spacing: 0.05em;
	}
	& dd{
		grid-row: 1;
		display: grid;
		align-items: center;
		min-height: 32px;
		padding: 2px 16px;
		border: 0 solid currentColor;
		border-width: 1px 0;
		color: var(--color-theme);
		font-weight: 700;
		&.select{
			position: relative;
			border-color: var(--color-theme);
			color: #fff;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--color-theme);
				border-radius: 16px;
				z-index: -1;
			}
		}
		&:nth-of-type(1){
			border-width: 1px 0 1px 1px;
			border-radius: 16px 0 0 16px;
		}
		&:last-child{
			border-width: 1px 1px 1px 0;
			border-radius: 0 16px 16px 0;
		}
	}
}

#resultList{
	display: grid;
}

#resultMap{
	grid-column: 1 / 4;
	position: relative;
	display: grid;
	height: min(75vw, 560px);
	margin-top: 32px;
	&>*{
		grid-column: 1;
		grid-row: 1;
	}
	& p{
		align-self: center;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
	& #gMap{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #f3f3f3;
	}
	& [LSC-LB="dummy"]{
		display: grid;
		align-content: center;
		grid-gap: 16px;
		justify-items: center;
		z-index: 1;
		&>img{
			width: 36px;
			height: auto;
		}
	}
}

#pagenation{
	margin: 48px 0 64px 0;
	@media (min-width: 1200px) {
		margin: 64px 0 96px 0;
	}
	&:not(:has(ol)){
		margin-bottom: 0;
	}
}

.articleList{
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	grid-gap: 40px 16px;
	@media (min-width: 576px) {
		column-gap: 32px;
	}
	@media (min-width: 1200px) {
		grid-gap: 48px;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			border-radius: 16px;
			background: var(--dummy);
			background-size: cover;
		}
		&>div{
			display: contents;
		}
		& h3{
			font-weight: 900;
			letter-spacing: 0.025em;
		}
		& h4{
			grid-row: 2;
			margin-top: 8px;
			color: var(--color-theme);
			font-weight: 500;
			letter-spacing: 0.05em;
		}
		& h4+div{
			display: grid;
			grid-gap: 8px;
			margin-top: 16px;
		}
		& p{
			position: relative;
			padding-left: 1.5em;
			font-weight: 500;
			font-size: 12px;
			&:before{
				content: "";
				position: absolute;
				top: 0.825em;
				left: 0.5em;
				aspect-ratio: 1;
				width: 4px;
				background: currentColor;
				border-radius: 4px;
				transform: translate(-50%, -50%);
			}
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-content: start;
			grid-gap: 8px;
			margin-top: 8px;
			&:not(:has(li)){
				display: none;
			}
			&:has([data-area]){
				grid-column: 1;
				grid-row: 1;
				align-self: end;
				padding: 8px;
				z-index: 1;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 24px;
			padding: 0 12px;
			border: 1px solid currentColor;
			border-radius: 12px;
			color: var(--color-theme);
			font-weight: 500;
			font-size: 12px;
			letter-spacing: 0.1em;
			&[data-area]{
				border-color: transparent;
				color: inherit;
				font-weight: 700;
			}
			&[data-area="0"]{
				padding-right: 4px;
				background: var(--color-theme);
				color: #fff;
			}
			&[data-area="1"]{
				background: #f5e0df;
			}
			&[data-area="2"]{
				background: #cbe6c3;
			}
			&[data-area="3"]{
				background: #c2e5f2;
			}
		}
		& a{
			&:not([data-fav-id]){
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
				z-index: 1;
			}
			&[data-fav-id]{
				grid-column: 1;
				grid-row: 1;
				aspect-ratio: 1;
				width: 48px;
				align-self: start;
				justify-self: end;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12.04,2.43l2.38,7.27h7.58v.09l-6.13,4.44,2.4,7.32-.06.02-6.21-4.5-6.21,4.5-.06-.02,2.4-7.32-6.12-4.44v-.09h7.58l2.38-7.27h.09M12.04.93h-.09c-.65,0-1.22.42-1.43,1.03l-2.04,6.24H2c-.83,0-1.5.67-1.5,1.5v.09c0,.48.23.93.62,1.21l5.24,3.79-2.06,6.28c-.12.38-.09.79.09,1.15.18.35.49.62.87.75l.06.02c.15.05.31.07.47.07.31,0,.62-.1.88-.29l5.33-3.86,5.33,3.86c.26.19.57.29.88.29.16,0,.31-.02.47-.07l.06-.02c.38-.12.69-.39.87-.75s.21-.77.09-1.15l-2.06-6.28,5.24-3.79c.39-.28.62-.73.62-1.21v-.09c0-.83-.67-1.5-1.5-1.5h-6.49l-2.04-6.24c-.2-.62-.78-1.03-1.43-1.03h0Z"/></svg>') center no-repeat;
				background-size: 24px;
				filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
				font-size: 0;
				z-index: 1;
				&[data-fav-status="on"]{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12.04.93h-.09c-.65,0-1.22.42-1.43,1.03l-2.04,6.24H2c-.83,0-1.5.67-1.5,1.5v.09c0,.48.23.93.62,1.21l5.24,3.79-2.06,6.28c-.12.38-.09.79.09,1.15.18.36.5.62.88.75l.06.02c.15.05.31.07.46.07.31,0,.62-.1.88-.29l5.33-3.86,5.33,3.86c.26.19.57.29.88.29.15,0,.31-.02.46-.07l.06-.02c.38-.12.69-.39.88-.75.18-.36.21-.77.09-1.15l-2.06-6.28,5.24-3.79c.39-.28.62-.73.62-1.21v-.09c0-.83-.67-1.5-1.5-1.5h-6.49l-2.04-6.24c-.2-.62-.78-1.03-1.43-1.03h0Z"/></svg>');
				}
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			& img{
				aspect-ratio: 1 / 0.667;
				border-radius: 16px;
				object-fit: cover;
			}
		}
	}
}

.eventList{
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	grid-gap: 40px 16px;
	@media (min-width: 576px) {
		column-gap: 32px;
	}
	@media (min-width: 1200px) {
		grid-gap: 48px;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			border-radius: 16px;
			background: var(--dummy);
			background-size: cover;
		}
		&>div{
			display: contents;
		}
		& h3{
			order: 1;
			font-weight: 900;
			letter-spacing: 0.025em;
		}
		& p{
			color: var(--color-theme);
			font-weight: 700;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-content: start;
			grid-gap: 8px;
			&:has([data-area]){
				grid-row: 2;
			}
			&:not(:has([data-area])){
				order: 1;
				& li{
					min-height: 24px;
					padding: 0 12px;
					border-radius: 12px;
					font-size: 12px;
				}
			}
			&:not(:has(li)){
				display: none;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 16px;
			border: 1px solid currentColor;
			border-radius: 16px;
			color: var(--color-theme);
			font-weight: 500;
			letter-spacing: 0.1em;
			&[data-area]{
				border-color: transparent;
				color: inherit;
				font-weight: 700;
			}
			&[data-area="0"]{
				padding-right: 4px;
				background: var(--color-theme);
				color: #fff;
			}
			&[data-area="1"]{
				background: #f5e0df;
			}
			&[data-area="2"]{
				background: #cbe6c3;
			}
			&[data-area="3"]{
				background: #c2e5f2;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
			& img{
				aspect-ratio: 1 / 0.667;
				border-radius: 16px;
				object-fit: cover;
			}
		}
	}
}

.supportList{
	grid-row-gap: 16px;
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-gap: 16px 24px;
		min-height: 128px;
		padding: 24px;
		border: 2px solid var(--color-theme);
		border-radius: 8px;
		overflow: hidden;
		@media (min-width: 576px) {
			grid-template-columns: 216px 1fr;
			grid-template-rows: auto 1fr;
			& ul{
				grid-column: 1;
				grid-row: 1 / 3;
			}
		}
		& h3{
			font-weight: 700;
			letter-spacing: 0.05em;
		}
		& h3+div{
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.05em;
		}
		& h3+div+div{
			display: contents;
		}
		& ul{
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-content: start;
			justify-items: start;
			grid-gap: 16px;
			background: #f0f0e4;
			margin-top: 32px;
			@media (min-width: 576px) {
				display: grid;
				justify-items: start;
				margin: 0 32px 0 0;
			}
			&:before{
				content: "";
				position: absolute;
				top: -24px;
				left: -24px;
				width: calc(100% + 48px);
				height: calc(100% + 48px);
				background: #f0f0e4;
				z-index: -1;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 24px;
			padding: 0 12px;
			background: #fff;
			border: 1px solid currentColor;
			border-radius: 12px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.1em;
			&[data-area]{
				border-color: transparent;
				color: inherit;
				font-weight: 700;
			}
			&[data-area="0"]{
				padding-right: 4px;
				background: var(--color-theme);
				color: #fff;
			}
			&[data-area="1"]{
				background: #f5e0df;
			}
			&[data-area="2"]{
				background: #cbe6c3;
			}
			&[data-area="3"]{
				background: #c2e5f2;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
			}
		}
	}
}