@charset "utf-8";

.contents {
	overflow: visible;
}
/* ------------------------------
 CVC Image（PC）
------------------------------ */
.beforeAfter {
	position: relative;
}
.beforeAfter h3 {
	padding-left: 0;
}
.beforeAfter h3::before {
	content: none;
}
.beforeAfter ul li {
	margin-top: 15px;
	padding-left: 25px;
	font-weight: bold;
}
@media print, screen and (min-width: 768px) {
	.beforeAfter {
		display: flex;
		justify-content: space-between;
	}
	.beforeAfter::after {
		content: none;
	}
	.before,
	.after {
		/*height: 400px;*/
		margin-bottom: 0;
	}
	.h450.before,
	.h450.after {
		/*height: 450px;*/
		margin-bottom: 0;
	}
}
.before ul li:before {
	content: "";
	top: 12px;
	width: 16px;
	height: 2px;
	background-color: #869cac;
	transform: rotate(45deg);
}
.before ul li:after {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 16px;
	height: 2px;
	background-color: #869cac;
	transform: rotate(-45deg);
}
.after ul li::before {
	content: "";
	top: 4px;
	width: 12px;
	height: 12px;
	border: 2px solid #869cac;
	border-radius: 100%;
	background-color: #fff;
}
.arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 92px;
	margin-top: -46px;
	margin-left: -50px;
}

/* ------------------------------
 CVC Image（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.beforeAfter .cms_fl {
		margin-bottom: 0;
	}
	.beforeAfter .grayBox {
		padding: 7.5% 5%;
	}
	.beforeAfter ul li {
		margin-top: 10px;
		padding-left: 20px;
	}
	.before {
		margin-bottom: 40px !important;
	}
	.arrow {
		transform: rotate(90deg);
		width: 80px;
		height: 74px;
		margin-top: -90px;
		margin-left: -37px;
	}
	.arrow.codec {
		margin-top: -85px;
	}
}
@media screen and (max-width: 320px) {
	.arrow.codec {
		margin-top: -65px;
	}
}


/* ------------------------------
 導入実績（PC）
------------------------------ */
/* コンテンツナビ導入実績用に書き替え */
@media print, screen and (min-width: 768px) {
	.contentsNav ul li {
	    width: 258px;
	}
	.contentsNav ul li:not(:nth-child(3n+1)) {
		margin-left: 0;
	}
	.contentsNav ul li:not(:nth-child(4n+1)) {
		margin-left: 36px;
	}
	.contentsNav ul li a:hover {
		text-decoration: underline;
	}
	.contentsNav ul li a span {
		-webkit-transition: 0.1s ease-in-out;
		-moz-transition: 0.1s ease-in-out;
		-o-transition: 0.1s ease-in-out;
		transition: 0.1s ease-in-out;
	}
	.contentsNav ul li a:hover span {
		opacity: 0.7;
		text-decoration: none;
	}
}
.contentsNav ul li {
	line-height: 1.2;
}
.contentsNav ul li img {
	margin-bottom: 10px;
}
.contentsNav ul li span {
	display: inline-block;
	width: 80px;
	margin-bottom: 8px;
	padding: 3px 0;
	border-radius: 3px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
.contentsNav ul li span.image {
	background-color: #1a1a7c;
}
.contentsNav ul li span.wave {
	background-color: #00a0e9;
}
.contentsNav ul li span.codec {
	background-color: #008086;
}
.contentsNav ul li span.accl {
	background-color: #005bac;
}
.contentsNav ul li span.lidar {
	background-color: #5f258a;
}
.contentsNav ul li span + span {
	margin-left: 8px;
}
.contentsNav ul li h3 {
	font-size: 1.6rem;
	font-weight: normal;
}
.contentsNav ul li h3::after {
	content: none;
}
@media screen and (min-width: 768px) {
	.contentsNav ul li span:nth-of-type(4n) {
		margin-left: 0;
	}
}
/* ------------------------------
 導入実績（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.contentsNav ul {
		display: flex;
		flex-flow: row wrap;
	}
	.contentsNav ul li {
		width: 47.5%;
		margin-bottom: 15px;
	}
	.contentsNav ul li:not(:nth-child(2n+1)) {
		margin-left: 5%;
	}
	.contentsNav ul li img {
		margin-bottom: 8px;
	}
	.contentsNav ul li span {
		width: 70px;
		margin-bottom: 6px;
		border-radius: 3px;
		font-size: 1rem;
	}
	.contentsNav ul li span + span {
		margin-left: 8px;
	}
	.contentsNav ul li span:nth-of-type(3n) {
		margin-left: 0;
	}
	.contentsNav ul li h3 {
		font-size: 1.3rem;
		font-weight: normal;
	}
}

@media screen and (max-width: 320px) {
	.contentsNav ul li span {
		width: 64px;
	}
}

/* ------------------------------
 CVC Accelerator（PCIeアクセラレータ）
------------------------------ */
.accelerator.grayBox{
	padding: 0;
}
.accelerator img{
	position: absolute;
	left: -20px;
	bottom: 50px;
}
@media screen and (max-width: 767px) {
	.accelerator img{
		position: static;
		margin: 20px 0 0;
		max-width: 80%;
	}
}