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

#head-image { background-color: #000; width: 100%; color: #fff; font-family: "Noto Serif JP"; text-align: center; background: url("../../img/aluminum_wheels/head-image-background.jpg")no-repeat left top #000; overflow: hidden; }
.box { display: block; width: 90%; max-width: 1280px; margin: 0 auto; padding: 20px; }

div.box h1 { font-size: 360%; font-weight: 900; letter-spacing: 4px; padding: 185px 0 120px 0; }
#head-image p { font-size: 102%; font-weight: 400; text-align: left; color: #fff;  font-family: "Noto Sans JP"; line-height: 250%; }
#head-image p img { float: right; width: 100%; max-width: 250px; }
div.box h3 { color: #fff; font-size: 200%; font-weight: 600; padding: 0 0 20px 0; text-align: left;  font-family: "Noto Sans JP"; line-height: 180%; }

.wheels_navi { width: 100%; max-width: 1000px; margin: 0 auto; }
.wheels_navi img:first-child { margin-left: 0; }
.wheels_navi img:nth-child(8) { margin-left: 0; }
.wheels_navi img { width: 100%; max-width: calc(14% - -41px); filter: drop-shadow(0 20px 20px #555); float: left; margin-left: -4.5%; position: relative; margin-bottom: 40px; }

div.none { padding: 50px; }
div.none img { width: 100%; max-width: calc(13.6% - -31px); filter: drop-shadow(0 20px 20px #555); float: left; margin-left: -4.5%; position: relative; }

section#footer div.wheels_navi img { top: 0px; transition: 0.3s; }
section#footer div.wheels_navi img:hover { top:-10px; transition: 0.3s; cursor: pointer; }
.none img:hover { top:0; cursor: default; }
.none { overflow: hidden; }

#second-image { background-color: #000; width: 100%; color: #fff; font-family: "Noto Sans JP"; background: url("../../img/aluminum_wheels/second-image-background.jpg")no-repeat center top #000; padding: 40px 0; }

.head-line-wrapper { position: relative; clear: both; }
.head-line { position: absolute; top: 45px; left: -100px; font-family: 'Roboto', sans-serif; font-size: 700%; font-weight: 900; color: #363636; white-space: nowrap; }

.second-image { width: 100%; max-width: 800px; margin: 0 auto; padding-top: 140px; z-index: 100; position: relative; }

section#second-image h2 { font-size: 220%; margin-bottom: 40px; color: #fff; }



.section { position: relative; padding: 200px 0 100px; background-color: #000; overflow: hidden; }
.section-02 { position: relative; padding: 300px 0; background-color: #fff; }
.section_background { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; overflow: hidden; }
.section_background img { flex-shrink: 0; width: 100%; min-width: 2000px; height: 100%; object-fit: cover; clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 256px); background-color: #ddd; }
section.section-01 .section_inner { position: relative; width: 90%; max-width: 1280px; margin: 0 auto; text-align: center; color: #000; }
section.section-02 .section_inner { position: relative; width: 90%; max-width: 1280px; margin: 0 auto; text-align: left; color: #fff; }

section.section-01 div.section-01-wrapper { background: url("../../img/aluminum_wheels/section-01.jpg")no-repeat center top; }

section.section-01 .section_inner div img { width: 35%; float: left; }
section.section-01 .section_inner div.center img { width: 80%; float: none; display: block; margin: 40px auto 0; }
/*section.section-01 .section_inner p { width: calc(50% - 40px); float: right; text-align: left; line-height: 180%; font-weight: 400; }*/

section.section-02 .section_inner img { width: 50%; float: right; margin-left: 40px; }
section.section-02 .section_inner div.center img { width: 60%; float: none; display: block; margin: 40px auto 0; }
section.section-02 .section_inner p { width: 102%; text-align: left; line-height: 180%; font-weight: 400; }

#footer { background-color: #000; padding: 200px 0; color: #fff; }
#footer h2 { text-align: center; }
#footer div.box { margin-top: 300px; max-width: 1024px; clear: both; }

.mod { display: none; }




@media print, screen and (max-width: 767.98px) {
#head-image { background-size: contain; }
div.box h1 { font-size: 175%; padding: 60px 0 30px 0; letter-spacing: 0; line-height: 180%; }
#head-image p { font-size: 80%; line-height: 180%; }
#head-image p img { display: block; float: none; margin: 0 auto; margin-bottom: 10px; }
.wheels_navi img:nth-child(odd) { margin-left: 7%; }
#second-image { background: url("../../img/aluminum_wheels/second-image-background-sp.jpg")no-repeat center top #000; background-size: cover; }
.second-image { width: 90%; }
div.box h2 { font-size: 150%; margin-bottom: 20px; }
section#second-image div.box p { line-height: 195%; font-size: 85%; }

.section { padding: 200px 0 40px; }
section.section-01 .section_inner div img { width: 90%; float: none; margin: 0 auto 20px; }
section.section-01 .section_inner p { width: 90%; float: none; margin: 0 auto; }

section.section-02 .section_inner { width: 90%; }
section.section-02 .section_inner div.center img { width: 90%; margin: 40px auto 100px; }
section#footer h2 { width: 90%; margin: 0 auto 30px; }
#footer { padding: 100px 0 0; }

div.box h3 { font-size: 100%; }
}







.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: #000 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: block; 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: 100%; 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% }
}



.details {

}
.details-summary {
    position: relative;
    display: block;
    padding: 20px 20px 20px 8%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
}
.details-summary:hover {
    cursor: pointer;
    opacity: 0.8;
}
.details-summary .btn1 {
    position: absolute;
    top: 37%;
    left: 4%;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    transition-duration: 0.2s;
}
.details-summary .btn1:before, .details-summary .btn1:after {
    content: "";
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    transform-origin: center center;
}
.details-summary .btn1:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.details-summary.is-active .btn1 {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.details-summary.is-active .btn1:before {
    content: none;
}
.details-summary::-webkit-details-marker {
    display: none;
}
.details-content {
    padding: 20px; background-color: rgba(255,255,255,0.1); margin: 0 9%;
}
.details-content p {
    margin: 0 0 20px;
    color: #000;
    font-size: 18px;
    text-align: left;
}
.details-content p:last-of-type {
    margin: 0 0 0;
}

div.details-content p { line-height: 180%; font-size: 102%; color: #fff; }

p.wheels_wrapper { overflow: hidden; display: block; }

details.section-black { width: 65%; float: right; }
details.section-black summary.details-summary { color: #282828; }
details.section-black div.details-content { background-color: rgba(0,0,0,0.02); margin: 0 9%; }
details.section-black div.details-content p { color: #282828; }
details.section-black div.details-content p img { float: none; display: block; margin: 0 auto; width: 60%; }
details.section-black summary.details-summary .btn1:before, details.section-black summary.details-summary .btn1:after { background-color: #282828; }

details.section-blue div.details-content p img { float: none; display: block; margin: 0 auto; width: 60%; }

section.section-02 h2 { color: #fff; }
#footer h2 { color: #fff; margin-bottom: 60px; }

@media print, screen and (max-width: 767.98px) {

.details-summary { font-size: 100%; padding: 20px 5px 20px 10%; }
details.section-blue div.details-content p img { margin: 10px auto 0; width: 100%; }
details.section-black div.details-content p img { margin: 10px auto 0; width: 100%; }
details.section-black { width: 100%; float: none; }
div.none { padding: 0 0 30px 0; }
div.none img { max-width: calc(17% - -58px); margin-bottom: 0; }
.wheels_navi img { max-width: calc(34% - -45px); margin-bottom: 0; }
.other-box { font-size: 75%; }
.wheels_navi img:nth-child(8) {
  margin-left: -4.5%;
}

}

span.note { font-size: 65%; }
span.note2 { font-size: 85%; }

div.footer-text { float: none; clear: both; text-align: center; font-size: 150%; margin: 0 0 50px; }

div.footer-banner { margin-top: 60px; text-align: center; clear: both; }
div.footer-banner a:first-child { display: block; width: 48%; float: left; border: 1px solid #ECECEC; border-radius: 20px; }
div.footer-banner a { display: block; width: 48%; float: right; }
div.footer-banner a img { border-radius: 20px; transition: 0.3s; }
div.footer-banner a img:hover { opacity: 0.7; transition: 0.3s; }

@media print, screen and (max-width: 767.98px) {

div.footer-banner a:first-child { display: block; width: 100%; float: none; border: 1px solid #ECECEC; border-radius: 20px; margin-bottom: 20px; }
div.footer-banner a { display: block; width: 100%; float: none; }

}

@media print, screen and (max-width: 767.98px) {
div.footer-text { font-size: 100%; margin: 50px 0 50px; }
}