/* Y'S GEAR : /mc/oil/yamalube_cp/css/yamalube.css */


body {
	overflow-x: hidden;
}

.contentsWidth {
	font-size: 1.6rem;
	font-weight: 500;
}
.contentsWidth * { box-sizing: border-box; }
.contentsWidth a,
.contentsWidth a::before,
.contentsWidth a::after,
.contentsWidth button {transition: all 0.3s ease; }

@media screen and (min-width: 569px) {
	.contentsWidth .sp { display: none !important; }
} /* */

@media screen and (max-width: 568px) {
	.contentsWidth {
		font-size: 1.4rem;
	}
	.contentsWidth .pc { display: none !important; }
} /* */

.commonTitleH2 {
    background-color: #fae7e9 !important;
    color: #cc1533 !important;
}

.commonLinkBox a {
	cursor: pointer;
}
.commonLinkBox a:hover,
.commonLinkBox a:active {
    color: #cc1533 !important;
}
.commonLinkBox a:before {
	border-left-color: #cc1533;
}

@media screen and (max-width: 568px) {
	.commonLinkBox li { width:  50% !important; }
} /* */

/*======================================================================*
 *  [ shopList ] 
 *======================================================================*/

.shopList {
	margin-bottom: 50px;
}

/*======================================================================*
 *  [ shopArea ] 
 *======================================================================*/

.shopArea {
	margin-bottom: 20px;
}

.shopArea h3 {
	padding: 15px 30px;
	border-radius: 10px;
	background: #eee;
    color: #cc1533;
	font-size: 1.8rem;
}

.shopArea h3 + .inner {
	padding: 30px;
}

.shopArea h4 {
	margin-bottom: 10px;
}
.shopArea table + h4 {
	margin-top: 20px;
}

@media screen and (max-width: 568px) {
	.shopArea {
		margin-bottom: 15px;
	}

	.shopArea h3 {
		padding: 12px 15px;
		font-size: 1.6rem;
	}

	.shopArea h3 + .inner {
		padding: 15px;
	}
} /* */

/* [ アコーディオン ] */
.js-accordion .inner {
	display: none;
}
.js-accordion .ttl {
	position: relative;
	cursor: pointer;
}
.js-accordion .ttl::before,
.js-accordion .ttl::after {
	position: absolute;
	top: 50%;
    background: #cc1533;
	transform: translateY(-50%);
	content: "";
}
.js-accordion .ttl::before {
	right: 30px;
	width: 20px;
	height: 4px;
}
.js-accordion .ttl::after {
	right: 38px;
	width: 4px;
	height: 20px;
}
.js-accordion:not(.hide) .ttl::after {
	display: none;
}

@media screen and (max-width: 568px) {
	.js-accordion .ttl::before {
		right: 15px;
	}
	.js-accordion .ttl::after {
		right: 23px;
	}
} /* */

/*======================================================================*
 *  [ shopTable ] 
 *======================================================================*/

.shopTable {
	width: 100%;
	border: 1px solid #ccc;
	font-size: 1.4rem;
}
.shopTable th,
.shopTable td {
	padding: 10px;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.shopTable a {
	color: #000;
	text-decoration: underline;
}
.shopTable a:hover,
.shopTable a:active {
    color: #cc1533 !important;
	text-decoration: none;
}
.shopTable thead th {
	background: #eee;
}
.shopTable thead tr th:nth-child(1) { width: 33%; }
.shopTable thead tr th:nth-child(2) { width: 10%; }
.shopTable thead tr th:nth-child(4) { width: 14%; }
.shopTable tbody tr th { text-align: left; }
.shopTable tbody tr td:nth-child(2), 
.shopTable tbody tr td:nth-child(4) {
	text-align: center;
	white-space: nowrap;
}

@media screen and (max-width: 568px) {
	.shopTable {
		display: block;
	}
	.shopTable thead {
		display: none;
	}
	.shopTable tbody, 
	.shopTable tbody tr,
	.shopTable tbody th,
	.shopTable tbody td {
		display: block;
		width: 100% !important;
		border: none;
		box-sizing: border-box;
	}
	.shopTable tbody tr th {
		padding: 10px;
		background: #999;
		color: #fff;
	}
	.shopTable tbody tr th a {
		color: #fff;
	}
	.shopTable tbody tr td {
		padding: 0 10px;
		text-align: left !important;
	}
	.shopTable tbody tr td:nth-child(2) {
		padding-top: 10px;
	}
	.shopTable tbody tr td:nth-child(4) {
		padding-top: 5px;
		padding-bottom: 10px;
	}
	.shopTable tbody tr td:nth-child(2)::before { content: "〒"; }
	.shopTable tbody tr td:nth-child(4)::before { content: "TEL："; }
} /* */


/*======================================================================*
 *  [ トップへ戻る ] 
 *======================================================================*/

.returnTop {
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}

.returnTop a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 300px;
	height: 60px;
	border: 3px solid #F5F5F5;
	background-color: #fff;
	color: #333;
	font-size: 2rem;
}
.returnTop a:hover {
	border: 3px solid #F5F5F5!important;
	color: #cc1533 !important;
}

.returnTop a::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	/* border: 3px solid #CC1533; */
	border: 3px solid #cc1533;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(-135deg);
}

@media screen and (max-width: 768px) {
	.returnTop a {
		gap: 15px;
		width: 240px;
		font-size: 1.6rem;
	}
} /* */