/* CSS Document */

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

#pagePath{
	display: none;
}

#main{
	overflow: hidden;
	& hgroup{
		#why &,
		#search &,
		#citizen &,
		#news &{
			@media (max-width: 1199.98px) {
				display: grid;
				grid-template-columns: 1fr auto 1fr;
				grid-column-gap: var(--wrap-space);
				align-items: center;
				text-align: center;
				text-wrap: balance;
				&:before,
				&:after{
					content: "";
					border-top: 1px solid currentColor;
					min-width: var(--wrap-space);
				}
				& h2{
					grid-column: 2;
					grid-row: 1;
				}
				& p{
					grid-column: 1 / 4;
					grid-row: 2;
					margin-inline: var(--wrap-space);
				}
			}
		}
		& p[translate="no"]{
			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);
			}
		}
	}
	& h2{
		font-weight: 900;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.15em;
	}
	#hero{
		padding: 0 16px;
		background: linear-gradient(180deg, #1a1a1a 50%, transparent 50%);
		@media (min-width: 1200px) {
			padding-top: 16px;
		}
	}
	#why{
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
	}
	#inquiry{
		margin-top: clamp(96px, calc(128 / 768 * 100dvw), 128px);
	}
	#search{
		margin-top: clamp(200px, calc(224 / 768 * 100dvw), 224px);
	}
	#citizen{
		margin-top: clamp(96px, calc(120 / 768 * 100dvw), 120px);
	}
	#news{
		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;
		z-index: 1;
		&:not(.slick-sllider){
			& > li{
				grid-column: 1;
				grid-row: 1;
				&:nth-child(n+2){
					display: none;
				}
			}
		}
		&.slick-slider{
			position: relative;
			.slick-Control{
				position: absolute;
				right: clamp(24px, calc(48 / 1366 * 100dvw), 48px);
				bottom: clamp(24px, calc(48 / 1366 * 100dvw), 48px);
				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;
			@media (min-width: 768px) {
				aspect-ratio: 16 / 9;
				padding: 24px clamp(40px, calc(64 / 1366 * 100dvw), 64px);
			}
			&{
				& dt{
					align-self: center;
					justify-self: center;
				}
			}
		}
		& dt{
			position: relative;
			z-index: 1;
			align-self: end;
			padding: 0.25em;
			border-bottom: 2px solid currentColor;
			color: #fff;
			font-weight: 700;
			font-size: clamp(18px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			filter: drop-shadow(0 0 5px color-mix(in srgb, transparent, #001b48 50%));
		}
		& dd{
			display: contents;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#why{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#whyText{
				grid-column: 2;
				margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			}
			#whyPhoto{
				grid-column: 1 / 4;
				grid-row: 4;
				margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			}
			#whyLink{
				grid-column: 2;
				margin-top: 32px;
			}
		}
		@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: 1fr 1fr 32px auto;
			&:before,
			&:after{
				content: "";
			}
			&:before{
				content: "";
				grid-column: 1;
				grid-row: 1 / 3;
				align-self: center;
				border-bottom: 1px solid currentColor;
			}
			&:after{
				grid-column: 1;
				grid-row: 2 / 4;
				justify-self: center;
				margin-bottom: -16px;
				border-left: 1px solid currentColor;
			}
			& hgroup{
				display: contents;
				&:before,
				&:after{
					content: "";
					align-self: center;
					border-bottom: 1px solid currentColor;
				}
				&:before{
					grid-column: 5;
					grid-row: 1 / 3;
				}
				&:after{
					grid-column: 3;
					grid-row: 1 / 3;
					min-width: 64px;
				}
				& h2{
					grid-column: 2;
					grid-row: 1 / 3;
					align-self: center;
					margin: 0 clamp(32px, calc(40 / 1366 * 100dvw), 40px);
				}
				& p{
					grid-column: 1;
					grid-row: 4;
					justify-self: center;
					align-self: start;
					margin-top: 40px;
					writing-mode: vertical-rl;
				}
			}
			#whyText,
			#whyPhoto{
				grid-column: 2 / 6;
				grid-row: 4;
			}
			#whyText{
				margin: 64px;
				color: white;
				filter: drop-shadow(0 0 5px color-mix(in srgb, transparent, #001b48 50%));
				z-index: 1;
			}
			#whyLink{
				grid-column: 4;
				grid-row: 1 / 3;
				min-width: 216px;
				align-self: center;
			}
		}
	}
	#whyText{
		font-weight: 600;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		line-height: 2.4;
	}
	#whyLink{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			align-items: center;
			min-width: min(100%, 216px);
			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;
		}
	}
	#whyPhoto{
		position: relative;
		border-radius: clamp(32px, calc(80 / 768 * 100dvw), 80px) 0 0 0;
		overflow: hidden;
		&:before{
			content: "";
			display: block;
			aspect-ratio: 16 / 9;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

#point{
	&{
		overflow: hidden;
		#pointTitle{
			position: relative;
			left: 50%;
			min-width: 1000px;
			transform: translateX(-50%);
		}
	}
	#pointTitle{
		padding: 40px 0;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" fill="white"><rect width="50%" height="100%"/></svg>') repeat-x center 10px / 40px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" fill="white"><rect width="50%" height="100%"/></svg>') repeat-x center calc(100% - 10px) / 40px, color-mix(in srgb, white, black 89%);
		&{
			display: grid;
			grid-template-columns: 1fr 1fr auto 1fr 1fr;
			justify-content: center;
			column-gap: 16px;
			& hgroup{
				grid-column: 3;
				grid-row: 1;
				max-width: 80dvw;
				min-height: 200px;
			}
			& figure{
				display: contents;
				& ul{
					display: contents;
				}
				& li{
					grid-row: 1;
				}
			}
		}
		& hgroup{
			padding: 16px clamp(32px, calc(64 / 768 * 100dvw), 64px);
			background: white;
			&{
				display: grid;
				justify-content: center;
				align-content: center;
				grid-row-gap: 8px;
				text-align: center;
				text-wrap: balance;
				&:after{
					grid-column: 1;
					grid-row: 2;
				}
				& h2{
					padding: 0 0.5em;
				}
			}
			&:after{
				content: "";
				border-top: 1px solid currentColor;
			}
			& p{
				font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
			}
		}
		& figure{
			& li{
				position: relative;
			}
			& img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	#pointList{
		display: grid;
		& section{
			counter-increment: count;
			&{
				display: grid;
				& h3{
					margin-top: clamp(24px, calc(48 / 768 * 100dvw), 48px);
				}
				& h3+div{
					margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
				}
				@media (max-width: 991.98px) {
					grid-template-columns: 1fr var(--wrap) 1fr;
					&:nth-child(n+2){
						margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
					}
					& h3,
					& h3+div{
						grid-column: 2;
					}
					& figure{
						grid-column: 1 / 4;
						grid-row: 1;
					}
				}
				@media (min-width: 992px) {
					grid-template-columns: var(--wrap-space) 1fr var(--wrap-space) 1fr var(--wrap-space);
					grid-template-rows: auto 1fr;
					& h3{
						margin-top: clamp(56px, calc(80 / 1366 * 100dvw), 80px);
					}
					& h3+div{
						margin-bottom: clamp(56px, calc(80 / 1366 * 100dvw), 80px);
					}
					&:nth-child(odd){
						& h3,
						& h3+div{
							grid-column: 2;
							margin-right: 24px;
						}
						& figure{
							grid-column: 4 / 6;
							grid-row: 1 / 3;
							border-radius: max(56px, calc(56 / 1367 * 100dvw)) 0 0 max(56px, calc(56 / 1367 * 100dvw));
						}
						&:first-child{
							& figure{
								border-radius: 0 0 0 max(56px, calc(56 / 1367 * 100dvw));
							}
						}
					}
					&:nth-child(even){
						& h3,
						& h3+div{
							grid-column: 4;
							margin-left: 24px;
						}
						& figure{
							grid-column: 1 / 3;
							grid-row: 1 / 3;
							border-radius: 0 max(56px, calc(56 / 1367 * 100dvw))  max(56px, calc(56 / 1367 * 100dvw)) 0;
						}
					}
				}
				@media (min-width: 1200px) {
					grid-template-columns:  max(112px, calc(112 / 1367 * 100dvw)) 1fr max(80px, calc(80 / 1367 * 100dvw)) 1fr  max(112px, calc(112 / 1367 * 100dvw));
				}
			}
			& h3{
				display: grid;
				grid-template-columns: auto 1fr;
				column-gap: 16px;
				font-weight: 900;
				font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
				&:before{
					content: counter(count);
					display: grid;
					align-items: center;
					aspect-ratio: 1;
					width: 56px;
					padding: 0 0 0.35em 0.25em;
					background: var(--color-theme);
					color: white;
					font-weight: 700;
					font-size: 1em;
					font-family: 'Montserrat', var(--font);
					line-height: 1;
					text-align: center;
					transform: translateY(calc(0.825em - 50%));
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.8 54.21"><path d="M34.1,0c-3.75,0-7,2.13-8.61,5.24-1.62-3.11-4.86-5.24-8.61-5.24C11.52,0,7.17,4.34,7.17,9.7c0,3.74,2.12,6.98,5.22,8.6v2.4h-4.54v-2.07c0-.29-.23-.52-.52-.52H.52c-.29,0-.52.23-.52.52v18.5c0,.29.23.52.52.52h6.8c.29,0,.52-.23.52-.52v-2.07h4.54v2.77c0,.32.26.58.58.58h9.77l-6.89,12.85c-.52.97-.16,2.19.82,2.71.97.52,2.19.16,2.71-.82l4.11-7.66v6.72c0,1.1.9,2,2,2s2-.9,2-2v-6.72l4.11,7.66c.36.67,1.05,1.06,1.76,1.06.32,0,.64-.08.94-.24.97-.52,1.34-1.73.82-2.71l-6.89-12.85h9.77c.32,0,.58-.26.58-.58v-19.53c3.1-1.62,5.22-4.86,5.22-8.6,0-5.36-4.34-9.7-9.7-9.7Z"/></svg>') no-repeat center / contain;
				}
			}
			& h3+div{
				padding-left: 72px;
				font-weight: 600;
				line-height: 2.25;
			}
			& figure{
				position: relative;
				aspect-ratio: 3 / 2;
				border-radius: 0 0 0 clamp(24px, calc(56 / 768 * 100dvw), 56px);
				overflow: hidden;
				& img{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

#inquiry{
	position: relative;
	&:before{
		content: "";
		position: absolute;
		top: 48px;
		left: 50%;
		height: 100%;
		min-height: 297px;
		aspect-ratio: 150 / 41;
		background: var(--color-bg);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1092.58 297"><path d="M4.85,131.38c15.55-37.52,61.61-68.14,96.34-80.78,25.37-9.24,54.92-9.85,82.45-12.64,57.85-5.88,116.21-8.51,173.95-14.55,33.11-3.38,64.02-12.08,96.46-17.17,50.4-7.91,102.47-7.72,153.34-2.59,46,4.63,90.21,15.61,135.14,23.97,32.16,5.98,63.98,13.4,96.87,16.81,28.73,2.97,57.98.68,86.85,2.46,38.54,2.37,80.52,7,112.82,24.05,31.87,16.83,66.65,57.5,48.5,95.41-16.43,34.33-59.82,47.5-91.81,62.16-6.22,2.85-12.42,5.8-18.36,9.19-11.78,6.73-23.29,13.76-35.74,19.77-29.35,14.17-65.22,17.11-99.03,18.34-35.22,1.28-70.21,3.21-105.42,3.22-49.53,0-98.1,12.31-147.41,16.43-24.12,2.02-48.87,1.64-73.02,1.21-26.97-.48-53.91-2.17-80.58-5.28-9.04-1.05-18.04-2.27-27-3.66-48.33-7.5-95.29-18.72-143.26-27.21-20.49-3.62-40.7-6.31-61.31-9.27-13.16-1.89-26.79-2.87-39.79-4.88-12.67-1.96-24.65-5.13-37.71-6.08-21.25-1.54-44.94.91-65.4-6.02-18.6-6.3-37.14-21.25-48.31-37.17C-.08,177.85-4.24,153.3,4.85,131.38Z"/></svg>') no-repeat center / contain;
		transform: translateX(-50%);
		z-index: -1;
	}
	&:after{
		content: "";
		position: absolute;
		top: 48px;
		left: 50%;
		width: min(110%, 980px);
		aspect-ratio: 70 / 19;
		background: url("../images/inquiry_bg.svg") no-repeat center / contain;
		transform: translateX(-50%);
		z-index: -1;
	}
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		#inquiryTel{
			margin-top: 8px;
		}
		#inquiryForm{
			margin-top: 24px;
		}
	}
	& hgroup{
		text-align: center;
		text-wrap: balance;
		&{
			display: grid;
			justify-items: center;
			& h2{
				order: 1;
				margin-top: 32px;
			}
		}
		& h2{
			color: var(--color-theme);
			font-weight: 700;
			font-size: inherit;
			letter-spacing: 0.2em;
		}
		& p{
			aspect-ratio: 100 / 27;
			width: min(80%, 304px);
			background: url("../images/inquiry_text.svg") no-repeat center / contain;
			font-size: 0;
		}
	}
	#inquiryTel{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 424px);
			min-height: 72px;
			padding: 8px 24px;
			background: white;
			border: 2px solid var(--color-theme);
			border-radius: 16px;
			color: inherit;
			font-weight: 800;
			font-size: clamp(32px, calc(36 / 768 * 100dvw), 36px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.1em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
		}
	}
	#inquiryForm{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 360px);
			min-height: 48px;
			padding: 8px 24px;
			background: white;
			border: 2px solid var(--color-theme);
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.2em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><rect x="1.5" y="5.13" width="21" height="13.73"/><path d="M22.05,5.63l-8.9,7.4c-.64.53-1.65.53-2.29,0L1.95,5.63"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#search{
	&{
		display: grid;
		#searchText{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		}
		#searchButton{
			margin-top: clamp(24px, calc(56 / 768 * 100dvw), 56px);
		}
		#searchList{
			margin-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
		}
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#searchText,
			#searchButton,
			#searchList{
				grid-column: 2;
			}
			#searchLink{
				grid-column: 2;
				display: flex;
				justify-content: center;
				margin-top: clamp(48px, calc(72 / 768 * 100dvw), 72px);
				& a{
					min-width: min(100%, 216px);
				}
			}
			#searchPhoto{
				display: contents;
				& ul{
					display: contents;
				}
				& li{
					aspect-ratio: 16 / 9;
					margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
					&:nth-child(1){
						grid-column: 1 / 3;
						grid-row: 4;
						border-radius: 0 clamp(24px, calc(56 / 768 * 100dvw), 56px) clamp(24px, calc(56 / 768 * 100dvw), 56px) 0;
					}
					&:nth-child(2){
						grid-column: 2 / 4;
						grid-row: 6;
						border-radius: clamp(24px, calc(56 / 768 * 100dvw), 56px) 0 0 clamp(24px, calc(56 / 768 * 100dvw), 56px);
					}
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: clamp(240px, calc(324 / 1200 * 100dvw), 324px) 1fr clamp(240px, calc(324 / 1200 * 100dvw), 324px);
				#searchPhoto{
					& li{
						aspect-ratio: unset;
						&:nth-child(1){
							grid-column: 1;
							grid-row: 2 / 5;
						}
						&:nth-child(2){
							grid-column: 3;
							grid-row: 2 / 5;
						}
					}
				}
				#searchText,
				#searchButton,
				#searchList{
					margin-inline: clamp(32px, calc(32 / 1200 * 100dvw), 56px);
				}
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: max(324px, calc(324 / 1367 * 100dvw)) 1fr max(324px, calc(324 / 1367 * 100dvw));
			&:before{
				content: "";
				grid-column: 1;
				grid-row: 1;
				align-self: center;
				border-top: 1px solid currentColor;
			}
			& hgroup{
				display: contents;
				text-align: center;
				text-wrap: balance;
				& h2{
					display: grid;
					grid-template-columns: 1fr auto 1fr;
					align-items: center;
					column-gap: 1.5em;
					text-indent: 0.15em;
					&:before,
					&:after{
						content: "";
						min-width: 48px;
						border-top: 1px solid currentColor;
					}
				}
				& p{
					grid-column: 2;
					grid-row: 2;
				}
			}
			#searchText,
			#searchButton,
			#searchList{
				grid-column: 2;
				margin-inline: 56px;
			}
			#searchLink{
				grid-column: 3;
				grid-row: 1;
				display: grid;
				grid-template-columns: auto 1fr;
				align-items: center;
				& a{
					min-width: 216px;
				}
				&:after{
					content: "";
					min-width: 48px;
					border-top: 1px solid currentColor;
				}
			}
			#searchPhoto{
				display: contents;
				& ul{
					display: contents;
				}
				& li{
					grid-row: 3 / 8;
					&:nth-child(1){
						grid-column: 1;
						border-radius: 0 56px 56px 0;
					}
					&:nth-child(2){
						grid-column: 3;
						border-radius: 56px 0 0 56px;
					}
				}
			}
		}
	}
	#searchText{
		font-weight: 600;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		text-align: center;
		text-wrap: balance;
	}
	#searchButton{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 480px);
			min-height: 80px;
			padding: 8px 32px;
			border: 2px solid currentColor;
			border-radius: 40px;
			color: inherit;
			font-weight: 800;
			font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
			letter-spacing: 0.05em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 28px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3px;"><circle cx="11.38" cy="10.96" r="7.92"/><line x1="16.67" y1="17.09" x2="24.54" y2="24.96"/></svg>') no-repeat center / contain;
			}
		}
	}
	#searchList{
		display: grid;
		justify-items: center;
		grid-row-gap: clamp(24px, calc(48 / 768 * 100dvw), 48px);
		& p{
			line-height: 2;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			min-width: min(100%, 480px);
			min-height: 48px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.05em;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
			&: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-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / contain;
			}
		}
	}
	#searchLink{
		& a{
			display: grid;
			align-items: center;
			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;
		}
	}
	#searchPhoto{
		& li{
			position: relative;
			overflow: hidden;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

#citizen{
	padding: clamp(64px, calc(80 / 768 * 100dvw), 80px) 0;
	background: var(--color-bg);
	&{
		display: grid;
		#citizenText,
		#citizenList{
			justify-self: center;
			width: var(--wrap);
			margin-top: clamp(24px, calc(48 / 768 * 100dvw), 48px);
		}
	}
	& hgroup{
		@media (min-width: 1200px) {
			&{
				text-align: center;
				text-wrap: balance;
				& h2{
					display: grid;
					grid-template-columns: 1fr auto 1fr;
					align-items: center;
					column-gap: 1.5em;
					text-indent: 0.15em;
					&:before,
					&:after{
						content: "";
						min-width: 48px;
						border-top: 1px solid currentColor;
					}
				}
			}
		}
	}
	#citizenText{
		font-weight: 600;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		text-align: center;
		text-wrap: balance;
	}
	#citizenList{
		&{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
			grid-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		}
		& section{
			position: relative;
			border: 2px solid currentColor;
			border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			overflow: hidden;
			& h3{
				display: grid;
				grid-template-columns: auto 1fr auto;
				align-items: center;
				min-height: 88px;
				padding: 8px 24px;
				background: var(--color);
				color: white;
				font-weight: 600;
				font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
				letter-spacing: 0.05em;
				text-align: center;
				text-wrap: balance;
				&:before,
				&: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 20 20"></svg>') no-repeat center / contain;
				}
				&:before{
					width: clamp(48px, calc(58 / 768 * 100dvw), 58px);
				}
				section:nth-child(1) &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="34.52" cy="31.28" r="3.9"/><path d="M30.62,48.92v-7.51c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v7.51"/><circle cx="21.48" cy="31.28" r="3.9"/><path d="M17.58,48.92v-7.51c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v7.51"/><circle cx="8.45" cy="31.28" r="3.9"/><path d="M4.55,48.92v-7.51c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v7.51"/><circle cx="40.82" cy="10.98" r="3.9"/><path d="M36.92,22.32v-1.21c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v1.21"/><circle cx="27.78" cy="10.98" r="3.9"/><path d="M23.88,22.32v-1.21c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v1.21"/><circle cx="14.75" cy="10.98" r="3.9"/><path d="M10.85,22.32v-1.21c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v1.21"/><circle cx="47.55" cy="31.28" r="3.9"/><path d="M43.65,48.92v-7.51c0-1.4,1.13-2.53,2.53-2.53h2.73c1.4,0,2.53,1.13,2.53,2.53v7.51"/></svg>');
				}
				section:nth-child(2) &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M41.44,6.44c-3.71-3.71-8.58-5.57-13.44-5.57s-9.73,1.86-13.44,5.57c-7.42,7.42-7.64,18.51-.7,27.05,5.96,7.34,14.14,13.27,14.14,13.27,0,0,8.18-5.94,14.14-13.27,6.94-8.54,6.72-19.62-.7-27.05Z"/><polyline points="15.16 26.07 23.87 19.14 32.57 26.07"/><polyline points="41.09 26.07 34.39 20.74 30.21 24.07"/><circle cx="33.97" cy="14.96" r="2.49"/><circle cx="28" cy="20.2" r="14.49"/><path d="M20.83,48.91c-2.91.63-4.79,1.63-4.79,2.76,0,1.91,5.36,3.46,11.96,3.46s11.96-1.55,11.96-3.46c0-1.13-1.88-2.13-4.79-2.76"/></svg>');
				}
				section:nth-child(3) &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polygon points="21.67 42.68 15.45 37.61 21.67 32.53 21.67 42.68"/><rect x="2.64" y="32.02" width="12.83" height="11.72"/><polyline points="4.41 54.91 9.09 44.59 13.78 54.91"/><line x1="6.33" y1="12.53" x2="6.33" y2="20.97"/><polyline points="3.06 24.83 6.33 20.53 9.61 24.83"/><polygon points="14.92 1.12 7.9 5.41 2.64 5.41 2.64 12.47 7.9 12.47 14.92 16.76 14.92 1.12"/><path d="M50.8,54.91v-25.34s-5.11,3.41-5.11,10.22v7.67h5.11"/><path d="M39.91,32.77v4.76c0,1.96-1.59,3.55-3.55,3.55h-1.77c-1.96,0-3.55-1.59-3.55-3.55v-4.76"/><line x1="35.47" y1="32.77" x2="35.47" y2="54.91"/><circle cx="30.79" cy="19.78" r="3.83"/><circle cx="46.12" cy="19.78" r="3.83"/><polyline points="49.95 19.78 53.36 19.78 53.36 8.7 48.25 8.7 48.25 1.89 30.36 1.89 30.36 8.7 23.55 8.7 23.55 19.78 26.95 19.78"/><line x1="34.62" y1="19.78" x2="42.29" y2="19.78"/></svg>');
				}
				&:after{
					width: 16px;
					-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-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>');
				}
			}
			& h3+div{
				padding: clamp(24px, calc(32 / 768 * 100dvw), 32px);
				background: white;
			}
			& h3+div+div{
				display: contents;
				& a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					font-size: 0;
				}
			}
		}
	}
}

#news{
	&{
		display: grid;
		@media (max-width: 1199.98px) {
			grid-template-columns: 1fr var(--wrap) 1fr;
			& hgroup{
				grid-column: 1 / 4;
			}
			#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;
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 2;
				justify-self: center;
				min-height: 64px;
				margin: 40px 0 48px 0;
				border-left: 1px solid currentColor;
			}
			& hgroup{
				grid-column: 2;
				grid-row: 1;
				display: grid;
				justify-items: center;
				margin-top: 88px;
				text-align: center;
				text-wrap: balance;
			}
			#newsList{
				grid-column: 3;
				grid-row: 1 / 4;
				align-self: center;
			}
			#newsLink{
				grid-column: 2;
				grid-row: 3;
				align-self: center;
				margin-bottom: 32px;
			}
		}
		
	}
	#newsList{
		& 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;
			text-wrap: balance;
			&.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;
		}
	}
}