@charset "utf-8";

/* ============================================= main_visual */
.products_list .main_visual {
	background: url(../imgs/products/quality/main_visual.jpg) no-repeat center center / cover;
	height:440px;
}

.main_visual .text {
	max-width: 736px;
}
.main_visual .text a {
	color:#FFFFFF;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.products_list .main_visual {
		background: url(../imgs/products/quality/main_visual_sp.jpg) no-repeat center top / cover;
		height:auto;
	}
}

/* ============================================= contents */
.subpage.products .contents.quality {
	margin-top:20px !important;
}


/* ============================================= quality_content */
.quality_content p {
	line-height:1.875;
}
.quality_image {
	display:flex;
	justify-content:space-between;
}
.image01 .image {
	width:150px;
}
.image01 p {
	width:calc(100% - 180px);
}
.quality_image.image02 {
	display:block;
}
.image02 .image {
	width:58.6%;
}
.image02 p {
	width:100%;
	margin-top:20px;
}
.image03 .image_left {
	width:38.4%;
}
.image03 .image_right {
	width:57.1%;
}

.arrow {
	position: relative;
	margin-bottom:130px;
	padding-bottom:80px;
}
.arrow::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -50px; /* 要素の下から50px下 */
	transform: translateX(-50%);
	width: 66px;   /* 底辺 */
	height: 57.2px; /* 正三角形の高さ（66 * √3 / 2） */
background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='66' height='57.2' viewBox='0 0 66 57.2'>\
<defs>\
<linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0%' stop-color='%23DCDCDC'/>\
<stop offset='100%' stop-color='%23F0F0F0'/>\
</linearGradient>\
</defs>\
<polygon points='0,0 66,0 33,57.2' fill='url(%23grad)'/>\
</svg>") no-repeat center / contain;
}


.quality_content dl dt {
	font-size:1.6rem;
	position:relative;
	color:#0068B6;
	font-weight:700;
}
.quality_content dl dd {
	margin-top:10px;
	line-height:1.875;
}
.quality_content ol {
	padding:0;
	list-style-position:inside;
}



/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.quality_image {
		display:block;
	}
	.image01 .image {
		float:left;
		width:48%;
		margin-right:2rem;
	}
	.image01::after {
		content: "";
		clear: both;
		display: block;
	}
	.image01 .image img {
		width:150px;
		max-width:100%;
	}
	.image01 p {
		width:auto;
	}
	.image02 .image {
		width:auto;
	}
	.image02 .image img {
		width:100%;
		margin:0 auto;
	}
	.image02 p {
		width:100%;
	}
	.image03 .image_left {
		width:auto;
	}
	.image03 .image_left img {
		width:356px;
		max-width:100%;
		margin:0 auto;
	}
	.image03 .image_right {
		width:auto;
		margin-top:20px;
	}
	.image03 .image_right img {
		width:580px;
		max-width:100%;
		margin:0 auto;
	}

	.arrow {
		position: relative;
		margin-bottom:100px;
		padding-bottom:30px;
	}
	.arrow::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -50px; /* 要素の下から50px下 */
	transform: translateX(-50%);
	width: 50px;   /* 底辺 */
	height: 43.3px;
background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='50' height='43.3' viewBox='0 0 50 43.3'>\
<defs>\
<linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0%' stop-color='%23DCDCDC'/>\
<stop offset='100%' stop-color='%23F0F0F0'/>\
</linearGradient>\
</defs>\
<polygon points='0,0 50,0 25,43.3' fill='url(%23grad)'/>\
</svg>") no-repeat center / contain;
	}
}