@charset "UTF-8";
/* car_inspection（車検）.css */

#lower_mv:before {
	background-image: url(../../img/car_inspection/mv_pc.jpg);
}
@media screen and (max-width:768px){
	#lower_mv:before {
		background-image: url(../../img/car_inspection/mv_sp.jpg);
	}	
}


/* ===== 安全モーター商会の車検　3つの特徴 ===== */
/* 見出し調整（3つの特徴） */
#service .white_box.tokutyou_box h3 {
	font-size: clamp(18px,2.4vw,24px);
}


/* ===== 入庫〜車検完了までの流れ ===== */
/* 車検時にご用意いただくもの */
#service .pt_dot .h2_img {
	margin-bottom: min(7vw,70px);
}
.goyoui_box h3 {
	font-size: 20px;
	font-weight: bold;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	color: #fff;
}
.flow_card h3.color_orange {
	color: #ff5d00;
}
.goyoui_box h3:before {
	content: "";
	min-width:  1.5em;
	min-height: 1.5em;
	display: block;
	background-image: url(../../img/car_inspection/check_maru.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: .75em;
}
.goyoui_box ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.goyoui_box li {
 	width: calc(100%/3 - 2%);
	font-weight: bold;
	font-feature-settings: "palt";
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin-right:  2%;
	margin-bottom: 2%;
	padding: 20px;
	padding: min(2vw,20px) min(1vw,20px);
	border-radius: 10px;
	background-color: #fff;
}
.goyoui_box li:before {
	content: "";
	width:  1.5em;
	height: 1.5em;
	display: block;
	background-image: url(../../img/car_inspection/check_icon.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: .75em;
}
.goyoui_box li:nth-of-type(3n),
.goyoui_box li:last-of-type    {
	margin-right: 0;
}

/* 流れ */
.flow_wrap:before {
	height: 85%;
	left: 30px;
}
.flow_card + .flow_card {
	margin-top: min(4vw,40px);
}
.flow_card .img_wrap {
	width:  65px;
	height: 65px;
	min-width:  65px;
	min-height: 65px;
	display: block;
	margin-right: 60px;
}
.flow_card .cont_wrap {
	width: 100%;
}
.flow_card .aself_center {
	align-self: center;
	margin-bottom: 0;
}


/* ===== PRICE 料金 ===== */
/* 注釈 */
.ul_notes li {
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.ul_notes li + li {
	margin-top: .5em;
}
.ul_notes li:before {
	content: "※";
	line-height: 1.5;
}
.price_table {
	border-radius: 0 !important;
}
.price_table thead th {
	padding: 20px;
}
.table_wrap table {
	border-top-left-radius:  0;
	border-top-right-radius: 0;
}
.price_table th,
.price_table td {
	width: calc(100%/6);
}

/* ===== 車検に+aのオススメメニュー ===== */
#service .osusume_box {
	padding-bottom: 40px;
}
.osusume_box .flex_wrap {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
}
.osusume_box .img_wrap {
	width: 40%;
}
#service .osusume_box .img_wrap img {
	width: 100%;
	max-width: inherit;
}
#service .osusume_box h3:before {
	content: none;
}
.osusume_box .cont_wrap {
	width: 55%;
}
.osusume_box .cont_wrap p {
	margin-bottom: 1.5em;
}
/* table */
.box_table {
	width: 100%;
}
.box_table th,
.box_table td  {
	width: calc(100%/2);
	text-align: center;
	padding: .5em;
	border:  1px solid #cbcbcb;
}
.box_table th {
	background-color: #f5f5f5;
}
#service .white_box h3 {
	font-size: 18px;
}





@media screen and (max-width:768px) {

	/* ===== 安全モーター商会の車検　3つの特徴 ===== */
	.white_box p {
		font-size: 16px;
		font-feature-settings: "palt";
	}
	.white_box h3 {
		font-feature-settings: "palt";
	}
	.tokutyou_box p {
		max-width: 450px;
		margin-left:  auto;
		margin-right: auto;
	}

	/* 見出し調整（3つの特徴） */
	#service .white_box.tokutyou_box h3 {
		font-size: 18px;
	}

	/* ===== 入庫〜車検完了までの流れ ===== */
	.goyoui_box h3 {
		font-size: 18px;
		font-size: clamp(16px,4.8vw,18px);
	}
	.goyoui_box li {
		width: 100%;
		font-size: 16px;
		margin: 0 0 10px 0;
		justify-content: center;
		padding: 20px;
	}
	.goyoui_box li:before {
		transform: translateY(.15em)
	}
	.goyoui_box li span {
		min-width: 11em;
	}

	/* 流れ flex */
	.flow_card + .flow_card {
		margin-top: 30px;
	}
	.flow_card .img_wrap {
		width:  clamp(50px,16vw,60px);
		height: clamp(50px,16vw,60px);
		min-width:  clamp(50px,16vw,60px);
		min-height: clamp(50px,16vw,60px);
		margin-right: 15px;
	}
	.flow_card:before {
		left: clamp(23px,7.7vw,30px);
	}

	/* ===== 車検に+aのオススメメニュー ===== */
	.osusume_box .flex_wrap {
		flex-wrap: wrap;
	}
	.osusume_box .img_wrap,
	.osusume_box .cont_wrap {
		width: 100%;
	}
	#service .osusume_box {
		padding-top:    clamp(30px,8vw,60px) !important;
		padding-bottom: clamp(30px,8vw,60px) !important;
	}
	#service .osusume_box h3 {
		width: 100%;
		display: inline-block;
		text-align: left;
		margin-top: 20px;
	}
	.box_table th,
	.box_table td {
		font-size: 16px;
	}

}