@charset "UTF-8";
/* maint.css */

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


/* ===== 最初のセクション ===== */
#sec_maint .wrap > img {
	width: 50%;
	max-width: 220px;
	display: block;
	margin: auto;
}
#service h3:before {
	content: none !important;
}
/* ページリンク  */
.ul_contlink {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}
.ul_contlink li {
	width: calc(100%/4 - 15px/1.5);
	display: inline-block;
	margin-left: 10px;
	margin-bottom: 15px;
}
.ul_contlink li:first-of-type,
.ul_contlink li:nth-of-type(5n) {
	margin-left: 0;
}
.ul_contlink li.add_width {
	width: calc(100%/3.8);
	max-width: 240px;
}
.ul_contlink li a {
	width:  100%;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: min(1.5vw,15px) min(1.5vw,15px) min(2vw,20px);
	color: #fff;
	border-radius: 10px;
	background-color: #ff5d00;
}
.ul_contlink li a span {
	min-height: 3em;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ul_contlink li a:after {
	content: "";
	width: 100%;
	height: 1.25em;
	min-height: 1.25em;
	display: block;
	margin-top: .7em;
	background-image: url(../../img/common/arrow_orange_maru_bottom.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform .3s;
	transform: translateY(0);
}
.ul_contlink li a:hover:after {
	transform: translateY(.1em);
}
.ul_contlink li.bg_active a {
	background-color: #2c2c2c;
}


/* ===== white_box ===== */
#service .white_box h2 {
	text-align: left;
	margin-bottom: 30px;
}
#service .white_box h2 + p {
	letter-spacing: .15em;
	font-feature-settings: "palt";
	margin-bottom: 30px;
}
#service .white_box h3 {
	font-size: 18px;
	font-feature-settings: "palt";
}
#service .white_box h3 small {
	font-size: 16px;
	font-size: min(14px,1.6vw,16px);
	margin-left: .5em;
}
.white_box .cont_flex {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 40px;
}
.cont_flex .img_wrap  {
	width: 32%;	
}
.cont_flex .cont_wrap {
	width: 64%;
}
.td_addcolor td.column-1,
.td_addcolor_two td.column-1,
.td_addcolor_two td.column-2 {
	font-weight: bold;
	background-color: #fafafa;
}

/* BSP ボッシュカーサービス */
.gray_box {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	border-radius: 10px;
	padding: 30px;
	background-color: #f5f5f5;
}
.gray_box .img_wrap {
	min-width: 100px;
	min-height: 100px;
	margin-right: 25px;
}
#service .gray_box img {
	width: 100%;
	max-width: inherit;
}
.bsp_box {
	background-color: #eff4fa;
}
.gray_box .cont_wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
}
#service .gray_box h3 {
	font-size: 16px;
}
#service .gray_box .cont {
	margin-right: 1em;
}
#service .gray_box p {
	line-height: 1.5;
}
#service .gray_box a {
	min-width: 10em;
}

/* コンピューター診断 */
table p {
	width:  fit-content;
	margin: auto;
}

#computer_box th:first-of-type,
#computer_box th:nth-of-type(3) {
	width: calc(100%/3.2);
}
#computer_box th:nth-of-type(2) {
	width: calc(100%/2.8);
}
/* border box */
#service .border_box {
	display: flex;
	flex-wrap: nowrap;
	padding: 30px;
	padding: min(3vw,30px);
	border: 1px solid #cbcbcb;
}
#service .border_box .img_wrap {
	width: 30%;
	margin-right: 25px;
}
#service .white_box img {
	width: 100%;
	max-width: inherit;
}
#service .border_box .cont_wrap {
	width: 70%;
	min-width: 390px;
}

/* 見出し右の黒背景BOX */
.head_flex {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.black_box {
	font-size: 14px;
	font-size: clamp(12px,1.4vw,14px);
	display: inline-block;
	line-height: 1;
	margin-left: .75em;
	padding: .5em .75em;
	color: #fff;
	background-color: #000;
	transform: translateY(.15em);
}

/* おすすめオプション（エンジンオイル） */
.osusume_head {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch !important;
	justify-content: flex-start;
	margin-bottom: 0 !important;
}
.osusume_head span {
	width: fit-content;
	font-size: 16px;
	line-height: 1;
	padding: .5em;
	color: #fff;
	background-color: #ff5d00;
}
.osusume_head:after {
	content: "";
	min-width:  15px;
	min-height: 15px;
	display: block;
	background: linear-gradient(65deg, #ff5d00 0%, #ff5d00 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}
.osusume_box {
	border-color: #ff5d00 !important;
}





@media screen and (max-width:768px) {
	/* ===== 最初のセクション ===== */
	/* ページリンク  */
	.ul_contlink {
		justify-content: flex-start;
	}
	.ul_contlink li {
		width: calc(100%/2 - 10px/2) !important;
		max-width: inherit !important;
		margin-left: 10px !important;
		margin-bottom: 10px;
	}
	.ul_contlink li:nth-of-type(odd) {
		margin-left: 0 !important;
	}
	.ul_contlink li a {
		font-size: min(4.267vw,16px);
		padding: 15px 5px 20px;
	}
	.ul_contlink li span {
		letter-spacing: 0;
	}
	.ul_contlink li a span {
		min-height: 2.5em;
		line-height: 1.3;
	}
	.ul_contlink li a:after {
		height: 1.1em;
		min-height: 1.1em;
		margin-top: .5em
	}

	/* BSP ボッシュカーサービス */
	.bsp_box {
		display:   inline-block;
		flex-wrap: wrap;
		padding: 30px 20px;
	}
	.bsp_box .img_wrap {
		width: 45%;
		margin-left:  auto;
		margin-right: auto;
		margin-bottom: 15px;
	}
	.bsp_box .cont_wrap {
		flex-wrap: wrap;
		flex-direction: column;
	}
	.bsp_box h3 {
		width: 100%;
		font-size: 18px;
		margin-bottom: 15px;
	}
	#service .bsp_box .cont {
		margin-right: 0;
	}
	#service .bsp_box .cont p {
		line-height: 1.7;
		font-feature-settings: "palt";
	}

	/* ===== white box ===== */
	.white_box {
		padding: 30px 20px;
		padding-top:    clamp(30px,8vw,50px);
		padding-bottom: clamp(30px,8vw,50px);
	}
	.white_box .cont_flex {
		flex-wrap: wrap;
		margin-bottom: 20px;	
	}
	.cont_flex .img_wrap,
	.cont_flex .cont_wrap {
		width: 100%;
	}
	.cont_flex .cont_wrap {
		margin-top: 20px;
	}
	#service h2.left_border {
		line-height: 1.3;
		margin-bottom: 20px;
	}
	#service h2.left_border:before {
		margin-top: .15em;
	}
	#service .white_box h3 {
		align-items: flex-start;
		text-align: left;
	}
	#service .white_box h3 small {
		width: 100%;
		font-size: 14px;
		font-size: clamp(10px,3.733vw,14px);
		line-height: 1.5;
		font-feature-settings: "palt";
		display: block;
		margin-top: .25em;
		margin-left: 0;
	}
	.table_wrap table {
		min-width: 800px;
	}
	.table_wrap.add_width_half table {
		min-width: 500px;
	}
	.table_wrap.add_width_spfit table {
		min-width: 295px;
	}

	/* おすすめオプション */
	#service .border_box .cont_wrap {
		min-width: inherit;
	}
	#service .osusume_head {
		display: flex !important;
		flex-wrap: nowrap;
		flex-direction: row !important;
	}
	#service .border_box {
		flex-wrap: wrap;
		padding: 25px;
	}
	#service .border_box .img_wrap {
		width: 100%;
		margin-right: 0;
	}
	#service .border_box .cont_wrap {
		width: 100%;
	}
	.osusume_box .cont_wrap p {
		font-size: 16px;
		font-size: min(4.267vw,16px);
		line-height: 1.75;
		letter-spacing: .05em;
	}
	.osusume_box .cont_wrap p:first-of-type {
		font-feature-settings: "palt";
		letter-spacing: 0;
		text-align: center;
	}
	#service .white_box h3.head_flex {
		width: 100%;
	}
	#service .white_box h3.head_flex .black_box {
		margin-left: 0;
	}

}