@charset "UTF-8";

#pageHeader hgroup::before {
	background-image: url(../images/icon_overview.svg);
}

#contents { color: var(--color-brown); }
#intro {
	font-weight: 700;
	& > p::after {
		content: "";
		display: block;
		background: url(../images/top/main-menu_img_overview.svg) no-repeat center center;
		background-size: 100%;
		aspect-ratio: 209 / 122;
	}
}
@media screen and (min-width:769px), print{
	#contents { margin-top: 138px; }
	#intro {
		font-size: 24px;
		line-height: 70px;
		& > p {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			padding-inline: 100px 110px;
			&::after {
				width: 437px;
				margin-bottom: 5px;
			}
		}
	}
}
@media screen and (max-width:768px){
	#intro {
		font-size: 14px;
		line-height: 38px;
		& > p {
			padding-inline: 10px;
			&::after {
				width: 280px;
				margin-inline: auto;
			}
		}
	}
}

#pageNav {
	ul {
		display: flex;
		justify-content: space-between;
		a {
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #efa396;
			position: relative;
			&::after {
				content: "";
				left: 0;
				right: 0;
				margin-inline: auto;
				display: block;
				position: absolute;
				aspect-ratio: 1 / 1;
				border-radius: 50%;
				transform: rotate(90deg);
				background: url(../images/arrow_orange.svg) var(--color-beige) no-repeat center center;
			}
		}
	}
}
@media screen and (min-width:769px), print{
	#pageNav {
		margin-top: 210px;
		ul {
			li { width: calc((100% - 72px) / 5); }
			a {
				height: 105px;
				font-size: 20px;
				padding-bottom: 15px;
				border-radius: 30px;
				&::after {
					width: 46px;
					bottom: -23px;
					background-size: 16px;
				}
				&:hover {
					color: #fff;
					background-color: var(--color-orange);
					&::after {
						background-color: var(--color-brown);
						background-image: url(../images/arrow_white.svg);
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	#pageNav {
		font-size: 12px;
		line-height: 14px;
		margin-top: 40px;
		li {
			width: calc((100% - 20px) / 5);
			a {
				height: 50px;
				border-radius: 10px;
				padding-bottom: 11px;
				&::after {
					width: 23px;
					bottom: -11px;
					background-size: 10px;
				}
			}
		}
	}
}

.boxTitle {
	font-weight: 700;
	position: relative;
	&::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		border-radius: 50%;
		aspect-ratio: 1 / 1;
		background-color: var(--color-orange);
	}
}
@media screen and (min-width:769px), print{
	.boxWrapper { border-radius: 20px; }
	.boxTitle {
		font-size: 32px;
		&::before {
			width: 14px;
			margin-right: 10px;
			margin-bottom: 7px;
		}
	}
}
@media screen and (max-width:768px){
	.boxWrapper { border-radius: 10px; }
	.boxTitle {
		font-size: 19px;
		&::before {
			width: 9px;
			margin-right: 5px;
			margin-bottom: 3px;
		}
	}
}

#philosophy {
	.list {
		li {
			display: flex;
			background: no-repeat var(--color-beige);
			&::before {
				content: "";
				display: block;
				flex-shrink: 0;
				background: no-repeat left top;
			}
			dt {
				color: var(--color-orange);
			}
		}
		li:nth-child(1){ background-image: url(../images/overview/img_philosophy_01.webp); }
		li:nth-child(2){ background-image: url(../images/overview/img_philosophy_02.webp); }
		li:nth-child(3){ background-image: url(../images/overview/img_philosophy_03.webp); }
		li:nth-child(4){ background-image: url(../images/overview/img_philosophy_04.webp); }
	}
}
@media screen and (min-width:769px), print{
	#philosophy {
		margin-top: 25px;
		padding-block: 45px 105px;
		.list {
			margin-top: 55px;
			li {
				border-radius: 20px;
				padding: 40px 300px 50px 45px;
				background-size: 105px auto;
				background-position: right 70px center;
				&::before {
					width: 80px;
				}
				dt {
					font-size: 24px;
					margin-top: 3px;
				}
				dd {
					line-height: 34px;
					margin-top: 25px;
				}
			}
			li + li { margin-top: 25px; }
			li:nth-child(1)::before { background-image: url(../images/overview/num_01_pc.webp); }
			li:nth-child(2)::before { background-image: url(../images/overview/num_02_pc.webp); }
			li:nth-child(3)::before { background-image: url(../images/overview/num_03_pc.webp); }
			li:nth-child(4)::before { background-image: url(../images/overview/num_04_pc.webp); }
		}
	}
}
@media screen and (max-width:768px){
	#philosophy {
		margin-top: 13px;
		padding-block: 27px 50px;
		.list {
			margin-top: 18px;
			li {
				line-height: 24px;
				border-radius: 10px;
				padding: 25px 30px 105px 18px;
				background-size: 87px auto;
				background-position: right 44px bottom 25px;
				&::before {
					width: 38px;
					background-size: auto 22px;
				}
				dt {
					font-size: 15px;
					margin-top: 4px;
				}
				dd {
					font-size: 12px;
					margin-top: 7px;
				}
			}
			li + li { margin-top: 17px; }
			li:nth-child(1)::before { background-image: url(../images/overview/num_01_sp.webp); }
			li:nth-child(2)::before { background-image: url(../images/overview/num_02_sp.webp); }
			li:nth-child(3)::before { background-image: url(../images/overview/num_03_sp.webp); }
			li:nth-child(4)::before { background-image: url(../images/overview/num_04_sp.webp); }
		}
	}
}

#yellow {
	background-color: #f6f1cd;
	.boxWrapper {
		background-color: #fff;
		.links {
			a {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				&::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); }
		ul.links {
			display: flex;
			flex-wrap: wrap;
		}
	}
}
#AOI {
	.links a { background-color: #72c6c7; }
}
#finance {
	.links a { background-color: #b3cc66; }
}
@media screen and (min-width:769px), print{
	#yellow {
		padding-block: 80px;
		.boxWrapper {
			display: flex;
			padding: 40px 35px 30px 45px;
			.boxTitle {
				width: 315px;
				flex-shrink: 0;
			}
			.links {
				a {
					font-size: 20px;
					border-radius: 20px;
					margin-right: 10px;
					margin-bottom: 10px;
					padding-left: 25px;
					&::before {
						width: 33px;
						margin-right: 18px;
					}
					&:hover {
						color: #fff;
						background-color: var(--color-orange);
					}
				}
			}
		}
		.boxWrapper + .boxWrapper { margin-top: 30px; }
	}
	#AOI {
		.links {
			a {
				height: 110px;
				padding-right: 38px;
			}
		}
	}
	#finance {
		.links {
			a {
				width: 190px;
				height: 80px;
			}
		}
	}
}
@media screen and (max-width:768px){
	#yellow {
		padding-block: 45px;
		.boxWrapper {
			padding: 25px 33px 33px 22px;
			.links {
				padding-top: 10px;
				padding-left: 15px;
				a {
					font-size: 13px;
					line-height: 18px;
					letter-spacing: 0;
					border-radius: 10px;
					margin-top: 10px;
					padding-left: 17px;
					&::before {
						width: 28px;
						margin-right: 10px;
					}
				}
			}
		}
		.boxWrapper + .boxWrapper { margin-top: 20px; }
	}
	#AOI {
		.links {
			a {
				height: 60px;
			}
		}
	}
	#finance {
		.links {
			justify-content: space-between;
			li { width: calc(50% - 5px); }
			a { height: 50px; }
		}
	}
}

#officers, #location {
	.table {
		table {
			border-top: 1px solid var(--color-brown);
			tr { border-bottom: 1px solid var(--color-brown); }
			th {
				color: var(--color-orange);
				font-weight: 700;
				vertical-align: top;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
			}
		}
		.map iframe { width: 100%; }
	}
}
@media screen and (min-width:769px), print{
	#officers, #location {
		margin-top: 90px;
		.table {
			font-size: 18px;
			line-height: 40px;
			margin-top: 40px;
			table {
				width: 100%;
				table-layout: fixed;
				tr > * { padding-block: 30px; }
				th {
					width: 290px;
					font-size: 20px;
					padding-left: 30px;
				}
				.list li {
					width: 165px;
					margin-bottom: 10px;
				}
				* + .list { margin-top: 30px; }
			}
			.map iframe {
				height: 464px;
				margin-top: 22px;
			}
		}
	}
}
@media screen and (max-width:768px){
	#officers, #location {
		margin-top: 37px;
		.table {
			margin-top: 16px;
			table, tbody, tr, tr > * { display: block; }
			tr { padding: 17px 10px 16px; }
			th { font-size: 13px; }
			td {
				font-size: 12px;
				line-height: 25px;
				margin-top: 10px;
			}
			.list {
				li { width: 105px; }
			}
			* + .list { margin-top: 18px; }
			.map iframe {
				margin-top: 15px;
				aspect-ratio: 81 / 64;
			}
		}
	}
}