@font-face {
		font-family: "Noto Sans JP";
		src: url("../fonts/NotoSansJP-Bold.woff") format("woff");
		font-weight: 700;
		font-style: bold
}

@font-face {
		font-family: "Noto Sans JP";
		src: url("../fonts/NotoSansJP-Medium.woff") format("woff");
		font-weight: 500;
		font-style: medium
}

@font-face {
		font-family: "Noto Sans JP";
		src: url("../fonts/NotoSansJP-Regular.woff") format("woff");
		font-weight: 400;
		font-style: normal
}

@font-face {
		font-family: "Noto Serif JP";
		src: url("../fonts/NotoSerifJP-Bold.woff") format("woff");
		font-weight: 700;
		font-style: bold
}

@font-face {
		font-family: "Noto Serif JP";
		src: url("../fonts/NotoSerifJP-Medium.woff") format("woff");
		font-weight: 500;
		font-style: medium
}

@font-face {
		font-family: "Noto Serif JP";
		src: url("../fonts/NotoSerifJP-Regular.woff") format("woff");
		font-weight: 400;
		font-style: normal
}

.header_wrap {
		padding: 8px 0;
		max-width: 90%;
}

@media print, screen and (max-width: 767.98px) {
		.header_wrap {
				padding: 10px
		}
}

.header_logo {
		display: block;
		width: 146px
}

.header_container {
		display: flex;
		width: 100%;
		height: 85px;
		position: relative;
		background-color: #fff
}

@media print, screen and (max-width: 767.98px) {
		.header_container {
				height: 0
		}
}

.fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20
}



.main-image {
		background-color: #030000;
		background: #fff url("../img/bodycoat-header-bg.jpg");
		background-size: cover
}

.hero {
		position: relative;
		z-index: 1;
		padding: 0;
		background-color: #030000
}

#main-image div { max-width: 1280px; color: #fff; padding: 0 0 45px 0; font-family: "Noto Serif JP"; font-weight: normal; font-size: 2.8rem }
#main-image div.left { float: left; width: 49.9999999% }
#main-image div span { display: block; font-size: 1.8rem }
#main-image div span.text { font-size: 1.6rem; line-height: 345%; padding: 40px 0 }
#main-image div.movie { float: right; width: 49.999999% }
#main-image div.note { font-family: "Noto Sans JP"; font-size: 1.3rem; float: none; clear: both }
@media only screen and (max-width: 767.98px) {
#main-image div { color: #fff; padding: 0 0 20px 0; font-size: 2.0rem }
#main-image div.left { float: none; width: 100% }
#main-image div span { display: block; font-size: 1.4rem }
#main-image div span.text { font-size: 1.2rem; line-height: 180%; padding: 0 0 }
#main-image div.movie { float: none; width: 100% }
#main-image div.note { font-family: "Noto Sans JP"; font-size: 1.0rem; float: none; clear: both }
}

#main-image div.movie a:hover { opacity: 0.6 }

h2.title p { display: block; font-size: 2.8rem; text-align: center; color: #030000 }
h2.title span { display: block; font-size: 1.5rem; text-align: center; color: #aaaaaa }
@media only screen and (max-width: 767.98px) {
h2.title p { font-size: 2.2rem }
h2.title span { font-size: 1.2rem }
}

.features { padding: 120px 0 140px 0; background-color: #ececec; overflow: hidden }
.features-box p { float: left; width: 33.3333%; text-align: center; padding: 20px; }
@media only screen and (max-width: 767.98px) {
.features { padding: 70px 0 90px 0; }
.features-box p { float: none; width: 100%; }
}


.year-1 { color: #7c9354; clear: both; overflow: hidden }
.year-3 { color: #6da967; clear: both; overflow: hidden }
.year-5 { color: #25b6ac; clear: both; overflow: hidden }

.year-1 .spec-title { background-color: #7c9354 }
.year-3 .spec-title { background-color: #6da967 }
.year-5 .spec-title { background-color: #25b6ac }

.year-1 h5.heading span { display: flex; align-items: center; text-transform: uppercase; margin-bottom: 25px; font-size: 1.6rem; color: #7c9354 }
.year-1 h5.heading span::before { content: ''; display: inline-block; margin-right: 20px; width: 55px; height: 8px; border-radius: 10px; background-color: #7c9354; }
.year-3 h5.heading span { display: flex; align-items: center; text-transform: uppercase; margin-bottom: 25px; font-size: 1.6rem; color: #6da967 }
.year-3 h5.heading span::before { content: ''; display: inline-block; margin-right: 20px; width: 55px; height: 8px; border-radius: 10px; background-color: #6da967; }
.year-5 h5.heading span { display: flex; align-items: center; text-transform: uppercase; margin-bottom: 25px; font-size: 1.6rem; color: #25b6ac }
.year-5 h5.heading span::before { content: ''; display: inline-block; margin-right: 20px; width: 55px; height: 8px; border-radius: 10px; background-color: #25b6ac; }


.spec { padding: 120px 0 140px 0; background-color: #ffffff; overflow: hidden }
.spec-title { color: #ffffff; text-align: center; border-radius: 30px; padding: 10px; margin: 80px 0 0 0; font-size: 2.4rem }
#spec h4 { margin: 40px 0 0; text-align: center; border-bottom: 1px solid; border-color: #dcdcdc; padding-bottom: 35px; font-size: 2.0rem }
.spec-box img { margin: 20px auto 0 }
.box-01 { margin-top: 40px; color: #333 }
.box-01 img { width: 60% }
.box-02 { margin-top: 40px; color: #333; float: left; width: 48% }
.box-03 { margin-top: 40px; color: #333; float: right; width: 48% }
@media only screen and (max-width: 767.98px) {
.spec { padding: 70px 0 90px 0 }
.spec-title { font-size: 2.2rem }
#spec h4 { margin: 20px 0 0; padding-bottom: 25px; font-size: 1.6rem; text-align: left }
.box-01 img { width: 100% }
.box-02 { margin-top: 40px; float: none; width: 100% }
.box-03 { margin-top: 40px; float: none; width: 100% }
}

.comparison { padding: 120px 0 140px 0; background-color: #f9f9f9; overflow: hidden }
.comparison table { width: 100%; margin-top: 100px }
.comparison table tr.comparison-title { border-bottom: 1px solid #4d4d4d }
.comparison table tr { border-bottom: 1px solid #bdbdbd }
.comparison table tr th { width: 40%; text-align: left; padding: 20px; font-weight: normal; font-size: 1.8rem }
.comparison table tr td { width: 20%; text-align: center; padding: 20px; font-weight: normal; font-size: 1.8rem }
.comparison table tr td span.sp-only-inline { display: none }
.comparison-box { padding: 20px }
.comparison-box img { display: block; float: left; width: 186px; margin: 0 40px }
.comparison-box span { display: block; float: right; text-align: right; font-size: 1.4rem }
@media only screen and (max-width: 767.98px) {
.comparison table tr.comparison-title { display: none }
.comparison table tr { border-bottom: none }
.comparison table tr th { width: 100%; text-align: center; padding: 10px; font-weight: bold; font-size: 1.6rem; display: block; border-bottom: 1px solid #4d4d4d; border-top: 1px solid #4d4d4d }
.comparison table tr td { width: 100%; text-align: center; padding: 20px; font-weight: normal; font-size: 1.4rem; display: block; border-bottom: 1px solid #bdbdbd }
.comparison table tr td:last-child { border-bottom: none }
.comparison table tr td span.sp-only-inline { display: inline }
.comparison-box { padding: 10px 0 }
.comparison-box img { display: block; float: none; width: 186px; margin: 0 auto 10px }
.comparison-box span { display: block; float: none; text-align: left; font-size: 1.2rem }
}

.price { padding: 120px 0 140px 0; background-color: #ffffff; overflow: hidden }
.price table { width: 100%; margin-top: 100px }
.price table tr.price-title { border-bottom: 1px solid #4d4d4d }
.price table tr.price-title td { text-align: center; background-color: #fff }
.price table tr.price-01 th { background-color: #eaeff5 }
.price table tr.price-02 th { background-color: #e0e7ef }
.price table tr.price-03 th { background-color: #d8dee6 }
.price table tr.price-01 td { background-color: #eaeff5 }
.price table tr.price-02 td { background-color: #e0e7ef }
.price table tr.price-03 td { background-color: #d8dee6 }
.price table tr { border-bottom: 1px solid #ffffff }
.price table tr th span { font-weight: normal; font-size: 1.2rem; display: block; margin-top: 10px }
.price table tr th { width: 25%; text-align: left; padding: 30px 16px; font-weight: normal; font-size: 1.8rem }
.price table tr td { width: 25%; text-align: left; padding: 30px 16px; font-weight: normal; font-size: 1.8rem }
.price table tr td span.sp-only-inline { display: none }
.price table tr td p.text-01 { display: block; font-size: 1.2rem }
.price table tr td p.text-02 { display: inline-block; font-size: 3.2rem; font-weight: bold }
.price table tr td p.text-02 span { display: inline-block; font-size: 1.2rem; font-weight: normal }
.price table tr td p.text-03 { display: inline-block; margin: 0 0 0 10px; padding: 2px 6px;  border: 1px solid #000; border-radius: 6px; font-size: 1.0rem }
@media only screen and (max-width: 767.98px) {
.price table tr.price-title { display: none }
.price table tr { border-bottom: none }
.price table tr th { width: 100%; text-align: center; padding: 10px; font-weight: bold; font-size: 1.6rem; display: block; border-bottom: 1px solid #4d4d4d; border-top: 1px solid #4d4d4d }
.price table tr td { width: 100%; text-align: center; padding: 20px; font-weight: normal; font-size: 1.4rem; display: block; border-bottom: 1px solid #ffffff }
.price table tr td:last-child { border-bottom: none }
.price table tr td span.sp-only-inline { display: inline; font-size: 1.6rem }
}

.maintenance { padding: 100px 0 140px 0; background-color: #ffffff; overflow: hidden }
.maintenance-box { color: #fff; background-color: #003894; padding: 10px }
.maintenance-box img { display: inline-block; width: 47%; vertical-align: middle }
.maintenance-box span { display: inline-block; width: 50%; margin-left: 3%; vertical-align: middle; font-size: 1.6rem; line-height: 200% }
.other-box { margin: 20px 0; font-size: 1.2rem; line-height: 180% }
@media only screen and (max-width: 767.98px) {
.maintenance { padding: 50px 0 140px 0 }
.maintenance-box img { display: block; width: 100% }
.maintenance-box span { display: block; width: 100%; margin-left: 0; vertical-align: middle; font-size: 1.3rem; line-height: 200% }
}

.est_time_caption--blank { display: inline-block; width: 30px; height: 17px; background: #FFFFFF; border: 1px solid #333333; border-radius: 3px; margin: 0 2px; vertical-align: bottom; }
.est_time_caption { display: inline; background: #FFFFFF; border: 1px solid #333333; border-radius: 3px; padding: 0 4px; margin-right: 1px; }