@charset "UTF-8";

@keyframes bird {
	0% {
		opacity: 0;
		filter: blur(10px);
	}
	100% {
		opacity:1;
		filter: blur(0);
	}
}
#mainVis {
	overflow: hidden;
	position: relative;
	background-repeat: no-repeat, repeat-x, no-repeat, no-repeat;
	.inner {
		position: relative;
		z-index: 2;
		&::before, &::after {
			content: "";
			display: block;
			opacity: 0;
			filter: blur(10px);
			position: absolute;
			background: no-repeat center center;
			background-size: 100%;
			aspect-ratio: 1 / 1;
			animation-name: bird;
			animation-duration: 1s;
			animation-fill-mode: forwards;
			pointer-events: none;
		}
		&::before {
			animation-delay: 1s;
			background-image: url(../images/top/mainvis_bird01.svg);
		}
		&::after {
			animation-delay: 1.2s;
			background-image: url(../images/top/mainvis_bird02.svg);
		}
	}
	&::before {
		content: "";
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		mix-blend-mode: multiply;
		pointer-events: none;
		background: url(../images/texture.webp) repeat center center;
	}
	&::after {
		content: "";
		display: block;
		left: 0;
		bottom: 0;
		width: 100%;
		position: absolute;
		z-index: 1;
		background: url(../images/top/mainvis_wave.svg) no-repeat center bottom;
	}
	#mainVisTitle, #mainText {
		color: var(--color-brown);
		font-weight: 700;
	}
	#pickupAnnounce {
		width: fit-content;
		margin-left: auto;
		a {
			display: flex;
			position: relative;
			align-items: center;
			background-color: var(--color-orange);
			.title {
				color: #ffec8e;
				&::before {
					content: "";
					display: inline-block;
					background: url(../images/top/icon_pickup.svg) no-repeat;
					background-size: 100%;
					aspect-ratio: 1 / 1;
					vertical-align: middle;
				}
			}
			.text { color: #fff; }
			&::after {
				content: "";
				top: 0;
				left: 100%;
				width: 100vw;
				height: 100%;
				display: block;
				position: absolute;
				background-color: inherit;
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#mainVis {
		padding-top: 140px;
		background-image:
			url(../images/top/mainvis_swing.svg),
			url(../images/top/mainvis_hill_pc.svg),
			url(../images/top/mainvis_cloud_pc.svg),
			url(../images/top/mainvis_sky.svg);
		background-size: 460px auto, auto 1349px, auto 483px, cover;
		background-position: calc(50% + 287px) 438px, center bottom -100px, left top, center center;
		.inner {
			height: 1074px;
			&::before, &::after { width: 66px; }
			&::before { top: 120px; left: calc(50% + 36px); }
			&::after { top: 136px; left: calc(50% + 121px); }
		}
		&::after {
			height: 15.9vw;
		}
		#mainVisTitle {
			font-size: 44px;
			line-height: 70px;
			padding-top: 100px;
			padding-left: 30px;
		}
		#mainText {
			font-size: 18px;
			line-height: 34px;
			margin-top: 18px;
			padding-left: 30px;
		}
		#pickupAnnounce {
			margin-top: 210px;
			a {
				height: 90px;
				padding-left: 39px;
				border-radius: 45px 0 0 45px;
				&:hover { background-color: var(--color-brown); }
				.title {
					font-size: 12px;
					margin-top: 5px;
					margin-right: 25px;
					&::before {
						width: 34px;
						margin-right: 11px;
					}
				}
				.text { font-size: 20px; }
			}
		}
	}
}
@media screen and (max-width:768px){
	.inner { padding-inline: 30px; }
	#mainVis {
		padding-block: 114px 133px;
		background-image:
			url(../images/top/mainvis_swing.svg),
			url(../images/top/mainvis_hill_sp.svg),
			url(../images/top/mainvis_cloud_sp.svg),
			url(../images/top/mainvis_sky.svg);
		background-size: auto 132px, 477px auto, auto 230px, cover;
		background-position: left calc(50% + 50px) bottom 220px, left calc(50% + 12px) bottom -63px, left -153px top 155px, center 155px;
		&::after {
			height: 116px;
			background-size: 100% 100%;
		}
		.inner {
			&::before, &::after { width: 32px; }
			&::before { top: 220px; right: calc(50% + 120px); }
			&::after { top: 230px; right: calc(50% + 80px); }
		}
		#mainVisTitle {
			font-size: 25px;
			line-height: 43px;
		}
		#mainText {
			font-size: 13px;
			font-weight: 500;
			line-height: 25px;
			margin-top: 13px;
		}
		#pickupAnnounce {
			margin-top: 260px;
			a {
				height: 50px;
				padding-left: 25px;
				border-radius: 25px 0 0 25px;
				.title {
					font-size: 9px;
					margin-top: 3px;
					margin-right: 18px;
					&::before {
						width: 25px;
						margin-right: 8px;
						margin-bottom: 2px;
					}
				}
				.text { font-size: 15px; }
			}
		}
	}
	#guideline { margin-top: 85px; }
}

#mainMenu {
	position: relative;
	z-index: 5;
	a {
		display: block;
		position: relative;
		box-sizing: border-box;
		background: var(--color-beige) no-repeat;
		dt {
			font-weight: 700;
			color: var(--color-brown);
			position: relative;
			&::before {
				content: "";
				top: 0;
				bottom: 0;
				margin-block: auto;
				display: block;
				border-radius: 50%;
				aspect-ratio: 1 / 1;
				position: absolute;
				background-color: var(--color-orange);
			}
		}
		dd { color: #b29e83; }
		&::after {
			content: "";
			display: block;
			position: absolute;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background: url(../images/arrow_white.svg) no-repeat center center var(--color-orange);
		}
	}
	.overview a {
		background-image: url(../images/top/main-menu_img_overview.svg);
	}
	.plan a {
		background-image: url(../images/top/main-menu_img_plan.svg);
	}
}
@media screen and (min-width:769px), print{
	#mainMenu {
		margin-top: -346px;
		.inner {
			display: flex;
			justify-content: space-between;
			li {
				width: calc(50% - 20px);
				a {
					height: 455px;
					padding: 40px 70px 0;
					border-radius: 20px;
					background-size: auto 244px;
					background-position: center 162px;
					box-shadow: var(--shadow-pc);
					dt {
						font-size: 28px;
						margin-block: 12px;
						&::before {
							height: 13px;
							left: -24px;
						}
					}
					dd { font-size: 17px; }
					&::after {
						top: 37px;
						right: 36px;
						width: 53px;
						background-size: 18px;
					}
					&:hover {
						background-color: var(--color-orange);
						dt {
							color: #fff;
							&::before { background-color: #fff; }
						}
						dd { color: #fff; }
						&::after {
							background-color: #fff;
							background-image: url(../images/arrow_brown.svg);
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#mainMenu {
		margin-top: -60px;
		li + li { margin-top: 20px; }
		a {
			height: 242px;
			border-radius: 15px;
			padding: 17px 0 0 27px;
			box-shadow: var(--shadow-sp);
			background-size: 232px;
			background-position: center bottom 15px;
			&::after {
				top: 10px;
				right: 11px;
				width: 40px;
				background-size: 13px;
			}
			dt {
				font-size: 18px;
				padding-left: 16px;
				&::before {
					left: 0;
					height: 8px;
				}
			}
			dd {
				font-size: 12px;
				margin-top: 8px;
			}
		}
	}
}

#record {
	color: var(--color-brown);
	.title { font-weight: 700; }
	.link a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 999px;
		border: solid var(--color-orange);
		&::after {
			content: "";
			display: block;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background: url(../images/arrow_white.svg) no-repeat center center var(--color-orange);
		}
	}
	.links a {
		color: #fff;
		display: block;
		position: relative;
		box-sizing: border-box;
		background-repeat: no-repeat;
		&::before {
			content: "";
			display: inline-block;
			vertical-align: middle;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background-color: var(--color-orange);
		}
		&::after {
			content: "";
			display: block;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			position: absolute;
			background: url(../images/arrow_brown.svg) no-repeat center center #fff;
		}
	}
	.links .disability a {
		background-color: #b3cc66;
		background-image: url(../images/top/record_link_disability.svg);
	}
	.links .youth a {
		background-color: #72c6c7;
		background-image: url(../images/top/record_link_youth.svg);
	}
	.links .elder a {
		background-color: #efa396;
		background-image: url(../images/top/record_link_elder.svg);
	}
	.links .disaster a {
		background-color: #b790cc;
		background-image: url(../images/top/record_link_disaster.svg);
	}
}
@media screen and (min-width:769px), print{
	#record {
		position: relative;
		margin-top: 117px;
		background: url(../images/top/record_img_pc.webp) no-repeat right top;
		background-size: 812px auto;
		.title {
			font-size: 32px;
			padding-left: 70px;
		}
		.text {
			font-size: 18px;
			line-height: 34px;
			margin-top: 20px;
			padding-left: 70px;
		}
		.link a {
			width: 405px;
			height: 90px;
			font-size: 20px;
			border-width: 2px;
			margin-top: 40px;
			padding-inline: 45px 20px;
			&::after {
				width: 50px;
				background-size: 18px;
			}
			&:hover {
				color: #fff;
				background-color: var(--color-orange);
				&::after {
					background-color: #fff;
					background-image: url(../images/arrow_brown.svg);
				}
			}
		}
		.links {
			display: flex;
			justify-content: space-between;
			margin-top: 120px;
			li { width: calc((100% - 90px) / 4); }
			a {
				height: 374px;
				font-size: 24px;
				border-radius: 20px;
				padding: 36px 0 0 40px;
				background-position: center 94px;
				background-size: auto 207px;
				box-shadow: var(--shadow-pc);
				&::before {
					width: 9px;
					margin-right: 5px;
					margin-bottom: 5px;
				}
				&::after {
					width: 50px;
					right: 30px;
					bottom: 30px;
					background-size: 18px;
				}
				&:hover {
					color: var(--color-brown);
					background-color: var(--color-beige);
					&::after {
						background-color: var(--color-orange);
						background-image: url(../images/arrow_white.svg);
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#record {
		margin-top: 58px;
		background: url(../images/top/record_img_sp.webp) no-repeat right top 108px;
		background-size: auto 272px;
		.title { font-size: 20px; }
		.text {
			font-size: 12px;
			line-height: 20px;
			margin-top: 15px;
		}
		.link a {
			height: 60px;
			font-size: 13px;
			border-width: 1px;
			width: fit-content;
			margin-top: 16px;
			padding-inline: 25px 10px;
			&::after {
				width: 40px;
				margin-left: 35px;
				background-size: 13px;
			}
		}
		.links {
			margin-top: 170px;
			li + li { margin-top: 15px; }
			a {
				height: 300px;
				font-size: 18px;
				border-radius: 15px;
				padding: 17px 0 0 25px;
				box-shadow: var(--shadow-sp);
				background-size: 266px auto;
				background-position: center bottom 28px;
				&::before {
					width: 8px;
					margin-right: 7px;
					margin-bottom: 4px;
				}
			}
			.disaster a {
				background-size: auto 188px;
				background-position: center bottom 48px;
			}
		}
	}
}