@charset "UTF-8";

:root {
	--opt-blue: #133664;
	--opt-yellow: #fabe00;
	--opt-gray: #738691;
	--opt-red: #CC0000;
	--opt-gray-bg: #eaeff3;
	--opt-gray-dark: #343a40;
	--opt-gray-border: #b9c3c8;
	--opt-bluegray: #ccd9e2;
	--opt-softgray: #f9f9f9;
	--opt-link-blue: #0033aa;
	--opt-font-sans-serif: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "HiraginoKaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--opt-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--opt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
body {
	overflow-x: hidden;
	font-family:var(--opt-font-sans-serif)
}
b,
strong {
	font-weight: 800;
}
small, .small {
	font-size: 0.875em;
}
sub,
sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
.hide {
	display: none;
}
/*-----------------------------------------------------------------------

改行分け

-----------------------------------------------------------------------*/
/* デフォルトは改行を非表示 */
.responsive-br {
	display: none;
}

/* PCのみで改行 */
@media screen and (min-width: 961px) {
	.br-pc {
		display: block !important;
	}
}

/* タブレットのみで改行 */
@media screen and (min-width: 520px) and (max-width: 960px) {
	.br-tablet {
		display: block !important;
	}
}

/* スマホのみで改行 */
@media screen and (max-width: 519px) {
	.br-sp {
		display: block !important;
	}
}

/* PCとタブレットで改行 */
@media screen and (min-width: 520px) {
	.br-pc-tablet {
		display: block !important;
	}
}

/*-----------------------------------------------------------------------

Man・Go

-----------------------------------------------------------------------*/
.flex-center {
	flex-wrap: wrap;
}
.grid_box {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em; 
}

.features {
	display: flex; 
	flex-direction: column;
	padding: 1em;
	background: var(--opt-gray-bg);
}

.features_inner01 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.features_inner01 h3 {
	margin: 1em;
	color: var(--opt-blue);
	font-size: 1.3em;
	font-weight: 600;
	text-decoration: underline 1px var(--opt-blue);
}

.features_inner02 {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.features_inner02 p {
	flex: 1 0 auto;
	margin: 1em;
	color: #000;
}

/* スマホ表示 */
@media screen and (max-width: 519px) {
	.grid_box {
		grid-template-columns: 1fr; /* スマホ: 1列 */
	}
}
#section03 h3 {
	display: block;
	padding: .7em;
	margin: 1em auto 2em auto;
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	color:  #fff;
	background: var(--opt-blue);
}
.textDoubleWrap h4 {
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.7;
}
.textDoubleWrap ul {
	margin-top: 1em;
}
.textDoubleWrap ul li {
	padding: .3em;
	margin: 0 auto;
	font-size: .9em;
	text-indent: -1.4rem;
	margin-left: 1.4rem;
	line-height: 1.5;
}
.textDoubleWrap ul li::before {
	content: "\f633";
	font-family: bootstrap-icons;
	font-size: .9rem;
	font-weight: 600;
	color: var(--opt-blue);
	margin-right: .5em;
	vertical-align: middle;
}
.textDoubleWrap ul li:last-of-type {
	padding-bottom: 0;
}
.textDoubleWrap ul li span {
	font-weight: 600;
}
.textDoubleWrap dl {
	margin: 0 auto;
	padding: 1rem;
	width: 70%;
}
@media screen and (max-width: 519px) {
	.textDoubleWrap dl {
		width: 100%;
	}
}
.textDoubleWrap dl dt {
	display: block;
	padding: .7em;
	margin: 0 auto .5em auto;
	text-align: center;
	font-size: 1em;
	font-weight: 600;
	color:  #fff;
	background: var(--opt-gray-dark);
}
.flex-center dd {
	display: block;
	padding: .5em;
	margin: .5em;
	font-size: .8em;
	line-height: 1.5;
	border: 1px solid var(--opt-gray-dark);
}
.greenBox {
	padding: 1em;
	background: #b0eab0;
	display: inline-block;
}
.greenBox span {
	color: orange;
	text-decoration: underline 1px solid orange;
	font-weight: 600;
}
.function h3 {
	background-color: var(--opt-blue);
	color: #fff;
	padding: .5em;
	text-align: center;
}
.function-grid h4 {
	background-color: var(--opt-bluegray);
	padding: .5em 1em;
	margin: 0;
	text-align: center;
}
.function-grid {
	display: grid;
	font-size: .8em;
	outline: 1px solid var(--opt-bluegray);
	outline-offset: -1px;
	align-items: stretch;
	grid-template-areas: "col-1 col-2 order-col dpc-col col-5 col-6";
}
.function-grid > div:nth-child(1) { grid-area: col-1; }
.function-grid > div:nth-child(2) { grid-area: col-2; }
.function-grid > div:nth-child(3) { grid-area: order-col; }
.function-grid > div:nth-child(4) { grid-area: dpc-col; }
.function-grid > div:nth-child(5) { grid-area: col-5; }
.function-grid > div:nth-child(6) { grid-area: col-6; }

.function-grid > div {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-right: 1px solid var(--opt-bluegray);
}
.function-grid > div:last-child {
	border-right: none;
}
.function-grid ul {
	margin: 0;
	flex-grow: 1;
}
.function-grid ul li {
	padding: .5em 0 0 .5em;
}
.function-grid ul li:first-child {
	padding-top: .5em;
}
.function-grid ul li:last-child {
	padding-bottom: .5em;
}
.order-column {
	border-right: 1px solid var(--opt-bluegray);
}
.order-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.order-grid ul {
	border-right: 1px solid var(--opt-bluegray);
}
.order-grid ul:last-child {
	border-right: none;
}
/* PC: 6列 */
@media screen and (min-width: 961px) {
	.function-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}

/* タブレット: 3列 */
@media screen and (min-width: 520px) and (max-width: 960px) {
	.function-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"col-1 col-2 order-col"
			"dpc-col dpc-col dpc-col"
			"col-5 col-5 col-5"
			"col-6 col-6 col-6";
	}
}

/* スマホ: 1列 */
@media screen and (max-width: 519px) {
	.function-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"col-1"
			"col-2"
			"order-col"
			"dpc-col"
			"col-5"
			"col-6";
	}
}
.option-grid {
	display: grid;
	font-size: .8em;
	outline: 1px solid var(--opt-bluegray);
	outline-offset: -1px;
	align-items: stretch;
	width: 80%;
}
.option-grid .span-col-2 {
	display: flex;
	flex-direction: column;
	height: 100%;
	grid-column: span 2;
	border-right: 1px solid var(--opt-bluegray);
}
.option-grid .span-col-2:last-child {
	border-right: none;
}
.option-grid .span-col-2 h3 {
	color: #fff;
	padding: .5em;
	text-align: center;
	font-size: 1rem;
}
.option-grid .span-col-2 h3.blue {
	background-color: blue;
}
.option-grid .span-col-2 h3.green {
	background-color: green;
}
/* 2列にまたがる見出しの下の2列をレイアウト */
.sub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	flex-grow: 1;
}
.sub-grid > div {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-right: 1px solid var(--opt-bluegray);
	padding-top: .5em;
	padding-bottom: 1em;
}
.sub-grid > div:last-child {
	border-right: none;
}
.option-grid ul {
	margin: 0;
	flex-grow: 1;
}
.option-grid ul li {
	padding: .5em 0 0 .5em;
	line-height: 1.2;
}
.option-grid li li {
	padding-left: 1.5em;
	line-height: 1.2;
}
.option-grid li li li {
	padding-left: 3em;
	line-height: 1.2;
}

/* PC / タブレット: 4列 */
@media screen and (min-width: 520px) {
	.option-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.sub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
/* PC / タブレットでのみ2列にまたがる */
	.span-col-2 {
		grid-column: span 2;
	}
}

/* スマホ: 1列 */
@media screen and (max-width: 519px) {
	.option-grid {
		grid-template-columns: 1fr;
		width: 100%;
	}
	.sub-grid {
		grid-template-columns: 1fr; /* スマホでは1列に */
	}
}