@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
コーティング
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.page-header {
	background-image: url("../img/coating/header.jpg");
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
製品情報
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-product {
	padding-bottom: 0;
	background: var(--color-white);
}

.coating-product .heading {
	margin-bottom: 0.6em;
	font-size: 2rem;
}

.coating-product .description {
	margin-bottom: 20px;
}

.coating-product th {
	width: 129px;
}

@media (min-width: 768px) {
.coating-product .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.coating-product .image {
	width: 48.3%;
	align-self: flex-start;
}

.coating-product .text {
	width: 48.3%;
}

.coating-product .heading {
	font-size: 3.2rem;
}

.coating-product .description {
	margin-bottom: 37px;
}

.coating-product th {
	width: 143px;
}
}

@media (max-width: 767.9px) {
.coating-product .image {
	display: block;
	width: 327px;
	margin: 0 auto 23px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
コンセプト
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-concept {
	background: var(--color-white);
}

.coating-concept .heading {
	position: relative;
	z-index: 0;
	margin-bottom: 0.7em;
	font-size: 2.4rem;
	line-height: 1.6;
}

.coating-concept .logo {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
}

@media (min-width: 768px) {
.coating-concept .heading {
	font-size: 4rem;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
特徴
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-feature-shop {
	background: url("../img/coating/feature-shop-background.jpg") center center no-repeat;
	background-size: cover;
	color: var(--color-white);
}

.coating-feature {
	padding-bottom: 0;
}

.coating-feature .heading {
	margin-bottom: 0.4em;
	font-size: 2.4rem;
}

.coating-feature .annotation {
	margin-top: 0.5em;
	font-size: 1.2rem;
}

@media (min-width: 768px) {
.coating-feature .wrapper {
	display: flex;
	align-items: center;
}

.coating-feature .image {
	margin-right: 40px;
	align-self: flex-start;
}

.coating-feature .text {
	flex: 1;
}

.coating-feature .heading {
	font-size: 3.2rem;
}
}

@media (min-width: 1024px) {
.coating-feature .descriptions {
	display: flex;
	justify-content: space-between;
}

.coating-feature .description {
	width: 47.5%;
}
}

@media (max-width: 1023.9px) {
.coating-feature .description:not(:last-child) {
	margin-bottom: 10px;
}
}

@media (max-width: 767.9px) {
.coating-feature .image {
	display: block;
	margin: 0 auto 15px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
取り扱い店
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-shop .banner-link {
	background-image: url("../img/coating/shop.jpg");
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
施工写真
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-photo {
	padding-bottom: 0;
	background: var(--color-white);
}

.coating-photo-slide {
	overflow: visible;
}

.coating-photo-slide:not(:last-child) {
	margin-bottom: 16px;
	transform: translateX(-88px);
}

.coating-photo-slide-ul {
	transition-timing-function: linear;
}

.coating-photo-slide-li {
	width: auto;
	margin-right: 16px;
}

@media (min-width: 768px) {
.coating-photo-slide:not(:last-child) {
	margin-bottom: 40px;
	transform: translateX(-153px);
}

.coating-photo-slide-li {
	margin-right: 40px;
}
}

@media (max-width: 767.9px) {
.coating-photo-slide-li img {
	width: 160px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
施工動画
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-video {
	background: var(--color-white);
}

@media (min-width: 768px) {
.coating-video .video-ul {
	max-height: 720px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
よくある質問
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.coating-faq {
	color: var(--color-white);
}

.coating-faq::before {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: 100vh;
	background: url("../img/coating/faq-background.jpg") center center no-repeat;
	background-size: cover;
	content: "";
}

.coating-faq th {
	padding-top: 15px;
}

.coating-faq th::before {
	content: "Q,";
}

.coating-faq td {
	padding-bottom: 15px;
}

.coating-faq td::before {
	content: "A,";
}

@media (min-width: 768px) {
.coating-faq th {
	width: 31%;
	padding: 23px 22px;
}

.coating-faq td {
	padding: 23px 22px;
	border-color: #2b2b2b;
}
}

@media (max-width: 767.9px) {
.coating-faq th {
	border-bottom: none;
}

.coating-faq td {
	border: none;
}

.coating-faq tr:last-child td {
	padding-bottom: 0;
}
}