@charset "utf-8";

/*===============================================
 メンテナンスページ mainte.css
===============================================*/
/*=======================================================
 - ～767.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 768px ～		：タブレット・PC環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - 960px ～		：ヘッダーメニューが2種類に(ハンバーガー + オープン状態)
 - ～1099.9px	：コンテンツ幅最大値(ニュース記事など)
 - ～1399.9px	：サイトデザイン最大幅
●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (max-width: 767.9px) {
}

@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 960px) {
}
@media print, screen and (min-width: 1100px) {
}
@media print, screen and (min-width: 1400px) {
}



/*===============================================
 ページ共通
===============================================*/
.check {
	border: 2px solid #ccc;
	margin: 0 0 1.5em;
	padding: 1em;
	width: 100%;
}

.showSP,
.showPC {
	margin: 0 0 1em;
}



/*===============================================
 メンテナンストップ
===============================================*/
.moy_link {
	text-align: center;
	width: 90%;
}

@media print, screen and (min-width: 520px) {
	.moy_link {
		width: 70%;
	}
}

.moy_link a {
	display: inline-block !important;
}

.top_text {
	margin: 0 0 3em;
	position: relative;
}

.top_text:before {
	background: #ededed;
	content: '';
	display: block;
	height: 150%;
	left: 0;
	position: absolute;
	top: 1.8em;
	transform: scale(0, 1);
	width: 90%;
}

@media print, screen and (min-width: 768px) {
	.top_text:before {
		top: 2.5em;
	}
}

@media print, screen and (min-width: 1100px) {
	.top_text:before {
		width: calc((1100px * .9) + (100vw - 1100px) / 2);
	}
}

.inview.top_text:before {
	animation: mouseon-extend 1s ease-in-out forwards;
}

.top_text h3 {
	font-size: max(4rem, min(9vw, 9rem));	/* 古いSafari用 */
	font-size: clamp(4rem, 9vw, 9rem);
	font-weight: bold;
	opacity: 0;
	overflow: hidden;
	transition: var(--ani_transition);
}

.inview.top_text h3 {
	opacity: 1;
}

.top_text h3 span {
	display: block;
	transform: translate(0, 105%);
	transition: var(--ani_transition);
	min-width: .2em;
}

.inview.top_text h3 span.inview {
	transform: translate(0, 0);
}

.top_text h4 {
	font-size: max(1.7rem, min(3vw, 2.5rem));	/* 古いSafari用 */
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: bold;
	margin: .8em 0 1em;
	opacity: 0;
	overflow: hidden;
	transition: var(--ani_transition);
}

@media print, screen and (max-width: 414.9px) {
	.top_text h4 {
		font-size: 1.5rem;
		letter-spacing: .04em;
	}
}

.inview.top_text h4 {
	opacity: 1;
}

.top_text h4 span {
	display: block;
	transform: translate(0, 105%);
	transition: var(--ani_transition);
}

.inview.top_text h4 span.inview {
	transform: translate(0, 0);
}

.top_list {
	margin: 0 0 0 5%;
	width: 95%;
}

@media screen and (max-width: 599.9px) {
	.top_list {
		margin: 0;
		width: 98%;
	}
}

.top_list li {
	width: 100%;
}

@media screen and (max-width: 767.9px) {
	.top_list li:not(:last-child) {
		margin: 0 0 2em;
	}
}

@media print, screen and (min-width: 600px) {
	.top_list li {
		width: 48%;
	}

	.top_list li:not(:nth-last-of-type(-n+2)) {
		margin: 0 0 3em;
	}
}

.top_list .img {
	margin: 0 0 1em;
	position: relative;
	width: 100%;
}

.top_list .img:before {
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: max(60px, min(7vw, 80px)) 0 0 max(75px, min(8vw, 90px));	/* 古いSafari 用 */
	border-width: clamp(60px, 7vw, 80px) 0 0 clamp(75px, 8vw, 90px);
	bottom: 0;
	content: '';
	display: block;
	height: 0;
	left: 0;
	position: absolute;
	width: 0;
}

@media screen and (max-width: 599.9px) {
	.top_list .img:before {
		border-width: max(50px, min(7vw, 80px)) 0 0 max(65px, min(8vw, 90px));	/* 古いSafari 用 */
		border-width: clamp(50px, 7vw, 80px) 0 0 clamp(65px, 8vw, 90px);
	}
}

.top_list .img:after {
	bottom: -.5em;
	color: var(--color-red);
	font-family: var(--english);
	font-size: 4em;
	font-weight: bold;
	content: '1';
	display: block;
	left: 0;
	line-height: 1;
	opacity: .4;
	position: absolute;
}

.top_list li:nth-of-type(2) .img:after {
	content: '2';
}

.top_list li:nth-of-type(3) .img:after {
	content: '3';
}

.top_list li:nth-of-type(4) .img:after {
	content: '4';
}

.top_list li:nth-of-type(5) .img:after {
	content: '5';
}

.top_list li:nth-of-type(6) .img:after {
	content: '6';
}

@media screen and (max-width: 599.9px) {
	.top_list .img:after {
		font-size: max(3.5em, min(8vw, 5em)); /* 古いSafari用 */
		font-size: clamp(3.5em, 8vw, 5em);
	}
}

.top_list .text .title {
	color: var(--color-red);
	font-size: max(1.8rem, min(2vw, 2.4rem));	/* 古いSafari用 */
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	font-weight: bold;
	display: block;
	line-height: 1.4;
	margin: 0 0 .5em;
	padding: 0 0 0 70px;
	position: relative;
	width: 100%;
}

.top_list .text .title:before {
	background: #fff;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: scale(1, 1);
	transition: all .5s ease-in-out;
	transform-origin: right;
	width: 100%;
	z-index: 2;
}

@media screen and (max-width: 599.9px) {
	.top_list .text .title {
		font-size: max(1.6rem, min(4vw, 2.2rem));	/* 古いSafari用 */
		font-size: clamp(1.6rem, 4vw, 2.2rem);
		letter-spacing: .04em;
	}

	.top_list .text p {
		font-size: max(1.4rem, min(2vw, 1.6rem));  /* 古いSafari用 */
		font-size: clamp(1.4rem, 2vw, 1.6rem);
	}
}

.top_list .inview .text .title:before {
	transform: scale(0, 1);
}



/*===============================================
 車検
===============================================*/
/* SP テーブル表示切り替え */
@media screen and (max-width: 767.9px) {
	.block.shaken .sp,
	.block.shaken .spwrap {
		display: none;
	}

	.block.shaken .spwrap:not(:last-child) {
		margin: 0 0 1em;
	}

	.block.shaken .select {
		background: #000;
		color: #fff;
		cursor: pointer;
		display: block;
		height: 2.4em;
		line-height: 1em;
		padding: .6em .8em;
		position: relative;
		transition: var(--ani_transition);
	}

	.block.shaken .select:not(:last-child) {
		margin: 0 0 .5em;
	}

	.block.shaken .select.hover,
	.block.shaken .select.active {
		background: var(--color-red);
	}

	.block.shaken .select:before {
		border-bottom: 2px solid #fff;
		border-left: 2px solid #fff;
		content: '';
		display: block;
		height: .5em;
		pointer-events: none;
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translate(0, -50%) rotate(-45deg);
		width: .5em;
	}
}

/* 縦書き */
.table_shaken_ins .collapse01 {
	width: 3em;
}

.table_shaken_ins .row span {
	letter-spacing: .5em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	writing-mode: vertical-rl;
}

@media print, screen and (min-width: 768px) {
	.table_shaken_ins .collapse02 {
		width: 30%;
	}

	.table_shaken_add thead th:nth-of-type(1),
	.table_shaken_exempt thead th:nth-of-type(1) {
		width: 30%;
	}
}

/* 強調部分 */
.table_shaken_ins tbody tr:nth-last-of-type(2),
.block.shaken .emphasis {
	color: var(--color-red);
}

.table_shaken_ins tbody tr:nth-of-type(4),
.table_shaken_ins tbody tr:nth-of-type(5),
.table_shaken_ins tbody tr:nth-last-of-type(2),
.block.shaken .emphasis {
	font-weight: bold;
}

.table_shaken_ins tbody tr:nth-of-type(4) td,
.table_shaken_ins tbody tr:nth-of-type(5) td {
	background: #fdfafa;
}

.table_shaken_ins tbody tr:nth-last-of-type(2) th,
.table_shaken_ins tbody tr:nth-last-of-type(2) td {
	background: #f6ecec;
}



/*===============================================
 定期点検
===============================================*/
.block.tenken .list_ul li {
	width: 100%;
}

@media print, screen and (min-width: 768px) {
	.block.tenken .list_ul:not(.long) li {
		width: 48%;
	}
}

@media print, screen and (min-width: 768px) {
	.table_tenken th:first-child {
		width: 35%;
	}
}



/*===============================================
 消耗品交換
===============================================*/
@media screen and (max-width: 767.9px) {
	.table_parts tbody tr:nth-of-type(3),
	.table_parts tbody tr:nth-of-type(4) {
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.table_parts th,
	.table_parts td {
		font-size: .9em;
	}

	.table_parts thead th:nth-of-type(1) {
		width: 20%;
	}

	.table_parts thead th:nth-of-type(2) {
		width: 9%;
	}

	.table_parts thead th:nth-of-type(3) {
		width: 35%;
	}

	.table_parts tbody td:nth-of-type(1) {
		text-align: center;
	}
}

/* 強調部分 */
.block.parts .emphasis {
	color: var(--color-red);
	font-weight: bold;
}



/*===============================================
 リフレッシュサービス
===============================================*/
.block.refresh .img {
	margin: 2em 0;
}

.block.refresh .img figure {
	margin: 0 2em;
}

.block.refresh .list_ul {
	margin: 0 0 2em;
}