:root {
	--color-blue: #4D4D4D;
	--color-light-blue: #F4F4F4;
}

.bg-light-blue {
	background-color: var(--color-light-blue);
}

#main-area {
	/* position: relative; */
	/* z-index: 10; */
	font-family: 'Noto Sans JP', sans-serif;
	/* background-color: #fff; */
}

.main-area {
	--link-color:#CC0000;
}

.main-area a:link,
.main-area a:visited,
.main-area a:hover,
.main-area a:active {
	color: var(--link-color);
}

.FlexDescriptionRow {
	flex-direction: row;
}

.FlexDescriptionRowReverse {
	flex-direction: row-reverse;
}

.FlexDescriptionColumn {
	flex-direction: column;
}

.FlexDescriptionColumnReverse {
	flex-direction: column-reverse;
}

.FlexColumnSet {
	--flex-column-gutter-x: 20px;
	--flex-column-gutter-y: 20px;

	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: calc(var(--flex-column-gutter-y) * -1);
	margin-left: calc(var(--flex-column-gutter-x) * -0.5);
	margin-right: calc(var(--flex-column-gutter-x) * -0.5);
}

.FlexColumnSet [class^="FlexColumn"] {
	max-width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	margin-top: var(--flex-column-gutter-y);
	padding-left: calc(var(--flex-column-gutter-x) / 2);
	padding-right: calc(var(--flex-column-gutter-x) / 2);
	box-sizing: border-box;
}

.FlexColumn1 {
	width: calc(100% / 12 * 1);
}

.FlexColumn2 {
	width: calc(100% / 12 * 2);
}

.FlexColumn3 {
	width: calc(100% / 12 * 3);
}

.FlexColumn4 {
	width: calc(100% / 12 * 4);
}

.FlexColumn5 {
	width: calc(100% / 12 * 5);
}

.FlexColumn6 {
	width: calc(100% / 12 * 6);
}

.FlexColumn7 {
	width: calc(100% / 12 * 7);
}

.FlexColumn8 {
	width: calc(100% / 12 * 8);
}

.FlexColumn9 {
	width: calc(100% / 12 * 9);
}

.FlexColumn10 {
	width: calc(100% / 12 * 10);
}

.FlexColumn11 {
	width: calc(100% / 12 * 11);
}

.FlexColumn12 {
	width: calc(100% / 12 * 12);
}

@media screen and (min-width: 768px) {
	.sp-only {
		display: none !important;
	}

	.FlexDescriptionPcRow {
		flex-direction: row;
	}

	.FlexDescriptionPcRowReverse {
		flex-direction: row-reverse;
	}

	.FlexDescriptionPcColumn {
		flex-direction: column;
	}

	.FlexDescriptionPcColumnReverse {
		flex-direction: column-reverse;
	}

	.FlexColumnPc1 {
		width: calc(100% / 12 * 1);
	}

	.FlexColumnPc2 {
		width: calc(100% / 12 * 2);
	}

	.FlexColumnPc3 {
		width: calc(100% / 12 * 3);
	}

	.FlexColumnPc4 {
		width: calc(100% / 12 * 4);
	}

	.FlexColumnPc5 {
		width: calc(100% / 12 * 5);
	}

	.FlexColumnPc6 {
		width: calc(100% / 12 * 6);
	}

	.FlexColumnPc7 {
		width: calc(100% / 12 * 7);
	}

	.FlexColumnPc8 {
		width: calc(100% / 12 * 8);
	}

	.FlexColumnPc9 {
		width: calc(100% / 12 * 9);
	}

	.FlexColumnPc10 {
		width: calc(100% / 12 * 10);
	}

	.FlexColumnPc11 {
		width: calc(100% / 12 * 11);
	}

	.FlexColumnPc12 {
		width: calc(100% / 12 * 12);
	}
}

@media screen and (max-width: 767px) {
	.pc-only {
		display: none !important;
	}

	.FlexDescriptionSpRow {
		flex-direction: row;
	}

	.FlexDescriptionSpRowReverse {
		flex-direction: row-reverse;
	}

	.FlexDescriptionSpColumn {
		flex-direction: column;
	}

	.FlexDescriptionSpColumnReverse {
		flex-direction: column-reverse;
	}

	.FlexColumnSp1 {
		width: calc(100% / 12 * 1);
	}

	.FlexColumnSp2 {
		width: calc(100% / 12 * 2);
	}

	.FlexColumnSp3 {
		width: calc(100% / 12 * 3);
	}

	.FlexColumnSp4 {
		width: calc(100% / 12 * 4);
	}

	.FlexColumnSp5 {
		width: calc(100% / 12 * 5);
	}

	.FlexColumnSp6 {
		width: calc(100% / 12 * 6);
	}

	.FlexColumnSp7 {
		width: calc(100% / 12 * 7);
	}

	.FlexColumnSp8 {
		width: calc(100% / 12 * 8);
	}

	.FlexColumnSp9 {
		width: calc(100% / 12 * 9);
	}

	.FlexColumnSp10 {
		width: calc(100% / 12 * 10);
	}

	.FlexColumnSp11 {
		width: calc(100% / 12 * 11);
	}

	.FlexColumnSp12 {
		width: calc(100% / 12 * 12);
	}
}