@charset "UTF-8";

/* common */
#pageHeader {
	hgroup::before {
		background-image: url(../images/icon_record.svg);
	}
}
#contents { color: var(--color-brown); }

/* main */
.main {
	#history {
		background-color: #fff;
		border: solid var(--color-orange);
		dt {
			color: var(--color-orange);
			font-weight: 700;
		}
		.link a {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--color-orange);
			&::before {
				content: "";
				display: block;
				aspect-ratio: 1 / 1;
				background: no-repeat center center;
				background-size: auto 100%;
			}
		}
		.pdf a::before { background-image: url(../images/icon_pdf.svg); }
		.excel a::before { background-image: url(../images/icon_excel.svg); }
	}
	#links {
		a { display: block; }
		.disability a { background-color: #b3cc66; }
		.youth a { background-color: #72c6c7; }
		.elder a { background-color: #efa396; }
		.disaster a { background-color: #b790cc; }
		.title {
			color: #fff;
			font-weight: 700;
			&::before {
				content: "";
				display: inline-block;
				vertical-align: middle;
				border-radius: 50%;
				aspect-ratio: 1 / 1;
				background-color: var(--color-orange);
			}
		}
		.image img { max-width: 100%; }
		.text {
			display: flex;
			align-items: flex-start;
			&::after {
				content: "";
				display: block;
				flex-shrink: 0;
				border-radius: 50%;
				aspect-ratio: 1 / 1;
				background: url(../images/arrow_brown.svg) #fff no-repeat center center;
			}
		}
	}
}
@media screen and (min-width:769px), print{
	.main {
		#history {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			border-width: 2px;
			border-radius: 20px;
			padding: 50px 90px 55px 70px;
			dl { margin-right: 80px; }
			dt { font-size: 28px; }
			dd {
				font-size: 18px;
				line-height: 30px;
				padding-bottom: 18px;
				margin-top: 35px;
			}
			.link a {
				width: 400px;
				height: 110px;
				font-size: 20px;
				border-radius: 20px;
				&::before {
					width: 33px;
					margin-inline: -50px 45px;
				}
			}
		}
		#links ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 40px;
			li {
				display: flex;
				margin-top: 40px;
				width: calc(50% - 20px);
				a {
					padding: 35px 50px 50px;
					border-radius: 20px;
					.title {
						font-size: 24px;
						margin-bottom: 12px;
						&::before {
							width: 9px;
							margin-right: 5px;
							margin-bottom: 4px;
						}
					}
					.text {
						font-size: 18px;
						line-height: 30px;
						margin-top: 19px;
						&::after {
							width: 53px;
							margin-top: 10px;
							margin-left: 50px;
							background-size: 18px;
						}
					}
					&:hover {
						background-color: var(--color-brown);
						.text { color: #fff; }
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	.main {
		#history {
			border-width: 1px;
			border-radius: 10px;
			padding: 22px 27px 32px;
			dt { font-size: 15px; }
			dd {
				font-size: 12px;
				line-height: 24px;
				margin-top: 14px;
			}
			.link a {
				width: 215px;
				height: 50px;
				font-size: 13px;
				margin-top: 22px;
				margin-inline: auto;
				border-radius: 10px;
				&::before {
					width: 28px;
					margin-right: 19px;
				}
			}
		}
		#links {
			margin-top: 40px;
			li + li { margin-top: 15px; }
			a {
				border-radius: 10px;
				padding: 22px 25px 27px;
				.title {
					font-size: 18px;
					margin-bottom: 14px;
					&::before {
						width: 8px;
						margin-right: 5px;
						margin-bottom: 4px;
					}
				}
				.text {
					font-size: 12px;
					line-height: 20px;
					margin-top: 10px;
					&::after {
						width: 40px;
						margin-left: 25px;
						background-size: 13px;
					}
				}
			}
		}
	}
}

/* lower */
.disability {
	#records {
		border-color: #b3cc66;
		.links a { background-color: #b3cc66; }
	}
}
.youth {
	#records {
		border-color: #72c6c7;
		.links a { background-color: #72c6c7; }
	}
	#reports {
		background-color: #b8e2e3;
		.list li::before { background-color: #72c6c7; }
	}
	& + #guideline {
		margin-top: 0;
		&::before {
			background-image: url(../images/guideline_outline_blue.svg);
		}
	}
}
.elder {
	#records {
		border-color: #efa396;
		.links a { background-color: #efa396; }
	}
	#event {
		background-color: #f7d1ca;
	}
	& + #guideline {
		margin-top: 0;
		&::before {
			background-image: url(../images/guideline_outline_pink.svg);
		}
	}
}
.disaster {
	#records {
		border-color: #b790cc;
		.links a { background-color: #b790cc; }
	}
	#reports {
		background-color: #dbc7e5;
		.list li::before { background-color: #b790cc; }
	}
	& + #guideline {
		margin-top: 0;
		&::before {
			background-image: url(../images/guideline_outline_purple.svg);
		}
	}
}

#records {
	border-style: solid;
	background-color: #fff;
	.title {
		color: var(--color-orange);
		font-weight: 700;
	}
	.links {
		display: flex;
		flex-wrap: wrap;
		a {
			display: flex;
			align-items: center;
			&::before {
				content: "";
				display: block;
				aspect-ratio: 1 / 1;
				background: no-repeat center center;
				background-size: auto 100%;
			}
			strong { margin-right: 0.3em }
		}
		.pdf a::before { background-image: url(../images/icon_pdf.svg); }
		.excel a::before { background-image: url(../images/icon_excel.svg); }
	}
}
@media screen and (min-width:769px), print{
	#records {
		border-width: 2px;
		border-radius: 20px;
		padding: 50px 65px 60px;
		box-sizing: border-box;
		.title { font-size: 28px; }
		.text {
			font-size: 18px;
			margin-top: 40px;
		}
		.links {
			margin-top: 70px;
			li {
				margin-right: 20px;
				width: calc((100% - 40px) / 3);
				&:only-child {
					width: 100%;
					a {
						width: fit-content;
						margin-inline: auto;
						padding-right: 50px;
					}
				}
			}
			li:nth-child(3n) { margin-right: 0; }
			li:nth-child(3) ~ li { margin-top: 20px; }
			a {
				height: 110px;
				font-size: 22px;
				line-height: 24px;
				padding-left: 42px;
				border-radius: 20px;
				&::before {
					width: 44px;
					margin-right: 28px;
				}
				strong { font-size: 26px; }
				small { font-size: 16px; }
				&:hover {
					color: #fff;
					background-color: var(--color-orange);
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#records {
		border-width: 1px;
		border-radius: 10px;
		margin-inline: 20px;
		padding: 20px 27px 32px;
		.title { font-size: 15px; }
		.text {
			font-size: 12px;
			line-height: 28px;
			margin-top: 12px;
		}
		.links {
			margin-top: 22px;
			justify-content: space-between;
			li { width: calc(50% - 5px); }
			li:nth-child(2) ~ li { margin-top: 10px; }
			a {
				height: 50px;
				font-size: 11px;
				line-height: 13px;
				border-radius: 10px;
				padding-left: 12px;
				&::before {
					width: 28px;
					margin-right: 10px;
				}
				strong { font-size: 13px; }
				small { font-size:8px; }
			}
		}
	}
}

#reports {
	.list li {
		overflow: hidden;
		background-color: #fff;
		&::before {
			content: "";
			display: block;
		}
		.title {
			color: var(--color-orange);
			font-weight: 700;
			text-align: center;
		}
		.image img { max-width: 100%; }
	}
}
@media screen and (min-width:769px), print{
	#reports {
		margin-top: 100px;
		padding-block: 100px;
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			li {
				width: calc(50% - 20px);
				border-radius: 20px;
				padding-inline: 32px;
				padding-bottom: 60px;
				box-sizing: border-box;
				&::before {
					height: 6px;
					margin-inline: -32px;
				}
				&:nth-child(2) ~ li { margin-top: 40px; }
				.title {
					height: 135px;
					margin-top: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24px;
					line-height: 36px;
				}
				.image.single {
					width: fit-content;
					margin-inline: auto;
				}
				.text {
					font-size: 18px;
					line-height: 30px;
					margin-top: 30px;
					padding-inline: 10px;
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#reports {
		padding-block: 40px 80px;
		.list {
			li {
				border-radius: 10px;
				padding-bottom: 27px;
				& + li { margin-top: 16px; }
				&::before { height: 4px; }
				.title {
					font-size: 17px;
					line-height: 24px;
					min-height: 68px;
					padding-block: 25px 15px;
					box-sizing: border-box;
				}
				.title ~ * { padding-inline: 25px; }
				.text {
					font-size: 12px;
					line-height: 24px;
					margin-top: 18px;
				}
			}
		}
	}
}

#event {
	.title {
		color: #fff;
		width: fit-content;
		text-align: center;
		margin-inline: auto;
		border-radius: 999px;
		background-color: var(--color-orange);
	}
	.image img { max-width: 100%; }
	.information {
		table {
			width: 100%;
			table-layout: fixed;
			border-top: 1px solid var(--color-brown);
			tr { border-bottom: 1px solid var(--color-brown);}
			tr > * { vertical-align: top; }
			th {
				color: var(--color-orange);
				background-color: #f7f6f2;
				font-weight: 700;
			}
			td { background-color: #fff; }
		}
	}
}
@media screen and (min-width:769px), print{
	#event {
		margin-top: 100px;
		padding-block: 95px 100px;
		.e-inner {
			max-width: 1000px;
			margin-inline: auto;
			padding-inline: 25px;
		}
		.title {
			font-size: 32px;
			margin-bottom: 72px;
			padding: 15px 78px 17px;
		}
		.information {
			margin-top: 70px;
			line-height: 40px;
			tr > * { padding-block: 20px; }
			th {
				width: 230px;
				font-size: 20px;
				padding-left: 50px;
			}
			td {
				font-size: 18px;
				padding-left: 47px;
			}
		}
	}
}
@media screen and (max-width:768px){
	#event {
		margin-top: 40px;
		padding: 45px 22px 50px;
		.title {
			font-size: 19px;
			padding: 11px 40px;
			margin-bottom: 32px;
		}
		.information {
			margin-top: 30px;
			line-height: 20px;
			table, tbody, tr, tr > * { display: block; }
			tr > * { padding-inline: 17px; }
			th {
				font-size: 13px;
				padding-block: 10px 9px;
			}
			td {
				font-size: 12px;
				padding-block: 10px 15px;
			}
		}
	}
}