@charset "utf-8";

@media all and (width < 750px) {
	.vi-level2 {
		background: url(../img/bak_vi01_sp.jpg) no-repeat center / cover;
	}
}
@media all and (width >= 750px) {
	.vi-level2 {
		background: url(../img/bak_vi01_pc.jpg) no-repeat center / cover;
	}
}

.contents .mod-h3::before {
	border-color: #9e0303;
}
.contents .cap {
	margin-top: .5em;
	font-weight: 500;
	line-height: 1.3;
}

.fig .arr dl {
	width: 38%;
}
.fig .arr dl dt {
	font-weight: 700;
	text-align: center;
}
.fig .arr dl dd {
	font-size: smaller;
	padding: 1em;
}
.fig .arr dl dd .list {
	width: fit-content;
	margin: 0 auto;
}
.fig .arr .arrImg { width: 24%;}

/*	system
-------------------------------------------------- */
.system > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: fit-content;
	margin: 20px auto 0;
	text-align: center;
}
.system-box {
	display: flex;
	column-gap: 20px;
	justify-content: center;
}
.system-box > div {
	flex: 1;
}
.system-btn { margin-top: 15px;}
@media all and (width >= 750px) {
	.system {
		display: flex;
		column-gap: 64px;
		width: fit-content;
		margin: 45px auto 0;
	}
	.system > div { margin: 0;}
	.system02 .img {
		display: grid;
		place-content: center;
	}
	.system-btn {
		margin-top: auto;
		padding-top: 25px;
	}

	.system01 .system-inner01 { width: 55%; }
	.system01 .system-inner02 { width: 45%;	}
	.system01 .img { height: 214px;	}
	.system01 .system-inner02 .img{
		display: grid;
    place-content: center;
	}
	.system02 .system-inner01 { width: 580px; }
	.system02 .system-inner02 { width: 360px;	}
	.system02 .img { height: 246px;	}
	.system03 .system-inner01 { width: 520px; }
	.system03 .system-inner02 { width: 360px;	}
	.system03 .img { height: 243px;	}
	.system04 .img { height: 224px;	}
	.system05 .img { height: 210px;	}
}

/*	comana
-------------------------------------------------- */
.comana {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}
.comana-box { text-align: center; }
.comana-box + .comana-box { margin-top: 15px;}
.possible-inner { margin-top: 15px; }

@media all and (width < 750px) {
	.comana .img01 { width: 56%; }
	.comana .img02 { width: 38%; }
}
@media all and (width >= 750px) {
	.comana {
		margin-top: 30px;
	}
	.comana-box + .comana-box { margin-top: 30px;}
	.possible {
		display: flex;
		column-gap: 52px;
	}
	.possible-inner {
		flex: 1;
		margin-top: 35px;
	}
}

/*	suite
-------------------------------------------------- */
@media all and (width >= 750px) {
	.suite-box { flex: 1;}
	.suite-box .img {
		display: grid;
		place-content: center;
		height: 190px;
	}
}