@charset "UTF-8";

#pageHeader {
	position: relative;
	&::after {
		content: "";
		display: block;
		background: url(../images/top/main-menu_img_plan.svg) no-repeat center center;
		background-size: 100%;
		aspect-ratio: 209 / 122;
	}
	hgroup::before {
		background-image: url(../images/icon_plan.svg);
	}
}

#contents { color: var(--color-brown); }
@media screen and (min-width:769px), print{
	#pageHeader {
		&::after {
			top: 278px;
			right: 90px;
			height: 327px;
			position: absolute;
		}
	}
}
@media screen and (max-width:768px){
	#pageHeader {
		overflow: hidden;
		&::after {
			margin: 23px -25px 0;
		}
	}
}

#mainVis {
	text-align: center;
	img { max-width: 100%; }
}
@media screen and (min-width:769px), print{
	#mainVis { padding-block: 80px 120px; }
}
@media screen and (max-width:768px){
	#mainVis { padding-block: 10px 50px; }
}

#business {
	border-top: 1px solid var(--color-brown);
	thead {
		th { background-color: var(--color-beige); }
		th + th { border-left: 1px solid var(--color-brown); }
	}
	tr {
		border-bottom: 1px solid var(--color-brown);

		& > * { vertical-align: top; }
		th {
			font-weight: 700;
			.thInner { display: flex; }
			.num { color: #fff; }
		}
		td { border-left: 1px solid var(--color-brown); }
		.green { background-color: #b3cc66; }
		.blue { background-color: #72c6c7; }
		.red { background-color: #efa396; }
		.purple { background-color: #b790cc; }
	}
}
@media screen and (min-width:769px), print{
	#business {
		thead {
			font-size: 20px;
			th {
				padding-left: 20px;
				padding-block: 25px;
			}
			th:nth-child(1) {
				width: 250px;
				padding-left: 30px;
			}
			th:nth-child(2),
			th:nth-child(3) { width: 280px; }
		}
		tbody {
			th {
				font-size: 20px;
				padding-left: 30px;
				padding-block: 22px;
				.num { width: 44px; }
			}
			td {
				font-size: 18px;
				line-height: 30px;
				padding: 14px 20px 15px 20px;
			}
		}
	}
}
@media screen and (max-width:768px){
	#business {
		.table {
			width: 720px;
			padding-bottom: 36px;
			thead {
				font-size: 12px;
				th {
					padding-left: 12px;
					padding-block: 14px;
				}
				th:nth-child(1) {
					width: 130px;
					padding-left: 20px;
				}
				th:nth-child(2),
				th:nth-child(3) { width: 158px; }
			}
			tbody {
				letter-spacing: 0;
				th {
					font-size: 12px;
					line-height: 15px;
					padding-left: 20px;
					padding-block: 15px;
					.num { width: 26px; }
				}
				td {
					font-size: 11px;
					line-height: 18px;
					padding: 6px 12px;
				}
			}
		}
		.os-scrollbar-horizontal {
			height: 9px;
		}
		.os-scrollbar-track {
			background-color: var(--color-beige);
			.os-scrollbar-handle { background-color: #595959; }
		}
	}
}

#meeting {
	text-align: center;
	background-color: var(--color-beige);
	.list {
		dt {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			border-radius: 999px;
			background-color: var(--color-orange);
		}
	}
	.text { color: var(--color-orange); }
}
@media screen and (min-width:769px), print{
	#meeting {
		font-size: 20px;
		margin-top: 110px;
		border-radius: 20px;
		padding-block: 50px 60px;
		.list {
			display: flex;
			justify-content: center;
			li { width: 300px; }
			li + li { margin-left: 130px; }
			dt { height: 56px; }
			dd { margin-top: 28px; }
		}
		.text {
			font-size: 18px;
			margin-top: 48px;
		}
	}
}
@media screen and (max-width:768px){
	#meeting {
		margin-top: 60px;
		border-radius: 10px;
		padding-block: 30px;
		.list {
			font-size: 13px;
			li + li { margin-top: 28px; }
			dt {
				width: 200px;
				height: 40px;
				margin-inline: auto;
			}
			dd { margin-top: 13px; }
		}
		.text {
			font-size: 12px;
			line-height: 20px;
			margin-top: 20px;
		}
	}
}