@charset "utf-8";

/**
 * Body Kit Line Top Page Style
 * ================================================================================
 * Table of Contents:
 *
 * Body Kit Line Top Page
 *  - Opening
 *  - Key Visual
 *  - Navigation
 *  - About
 *  - Products
 *  - Dealers
 *  - Faq
 * ================================================================================
 */



/**
 * ================================================================================
 * Body Kit Line Top Page Settings
 * ================================================================================
 */

/**
 * Key Visual
 * -------------------------------
 */

#specialBodykitlineTop .kv {
  position: relative;
}

#specialBodykitlineTop .kv .p-loader {
  position: absolute;
}

#specialBodykitlineTop .kvOpening {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
  transition: all 1s linear;
}

#specialBodykitlineTop .kvOpening.is-ended {
  opacity: 0;
  visibility: hidden;
}

#specialBodykitlineTop .kvOpeningTtlSub {
  display: block;
  color: #666666;
  font-size: 3.6rem;
}

#specialBodykitlineTop .kvOpeningTtlMain {
  display: block;
  margin-top: 70px;
}

#specialBodykitlineTop .kvOpeningTtlMain img {
  width: 512px;
}

#specialBodykitlineTop .kv {
  line-height: 1;
}

#specialBodykitlineTop .kvSlider {
  position: relative;
  z-index: 1;
}

#specialBodykitlineTop .kvSlider img {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .kvOpeningTtlSub {
    font-size: calc(100vw * (36 / 325) * 0.35);
  }

  #specialBodykitlineTop .kvOpeningTtlMain {
    margin-top: calc(100vw * (70 / 325) * 0.35);
  }

  #specialBodykitlineTop .kvOpeningTtlMain img {
    width: calc(100vw * (512 / 325) * 0.35);
  }

  #specialBodykitlineTop .kvSliderItem {
    overflow-x: hidden;
  }

  #specialBodykitlineTop .kvSlider img {
    width: 140%;
    max-width: 140%;
    margin-left: -20%;
  }
}


/**
 * Navigation
 * -------------------------------
 */

#specialBodykitlineTop .nav {
  margin-top: 40px;
}

#specialBodykitlineTop .navMenu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 30px;
  padding-left: 110px;
  padding-right: 110px;
  border-bottom: 1px solid #808080;
}

#specialBodykitlineTop .navMenuItem {
  width: 25%;
  padding-left: 30px;
  padding-right: 30px;
}

#specialBodykitlineTop .navMenuLabel {
  display: block;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #666;
}

#specialBodykitlineTop .navMenuTtl {
  display: block;
  text-align: center;
}

#specialBodykitlineTop .navMenuTtlSub {
  display: block;
  margin-top: 30px;
  font-size: 1.6rem;
  line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .nav {
    margin-top: calc(100vw * (40 / 325) * 0.3);
  }

  #specialBodykitlineTop .navMenu {
    padding-bottom: calc(100vw * (30 / 325) * 0.3);
    padding-left: 0;
    padding-right: 0;
  }

  #specialBodykitlineTop .navMenuItem {
    /* width: 50%; */
    width: 33.3333%;
    padding-left: calc(100vw * (30 / 325) * 0.3);
    padding-right: calc(100vw * (30 / 325) * 0.3);
  }

  #specialBodykitlineTop .navMenuLabel {
    padding-top: calc(100vw * (30 / 325) * 0.3);
    padding-bottom: calc(100vw * (30 / 325) * 0.3);
  }

  #specialBodykitlineTop .navMenuTtlSub {
    margin-top: calc(100vw * (30 / 325) * 0.3);
    font-size: calc(100vw * (16 / 325) * 0.6);
  }
}


/**
 * About
 * -------------------------------
 */

#specialBodykitlineTop .about {
  position: relative;
  z-index: 1;
  padding-top: 110px;
  padding-bottom: 200px;
  text-align: center;
}

#specialBodykitlineTop .about::before,
#specialBodykitlineTop .about::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  content: '';
}

#specialBodykitlineTop .about::before {
  height: 300px;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#specialBodykitlineTop .about::after {
  z-index: -1;
  min-width: 1920px;
  height: 100%;
  background-image: url('/files//cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_about-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% auto;
}

#specialBodykitlineTop .aboutTtlSub {
  width: 107px;
  height: 37px;
}

#specialBodykitlineTop .aboutTtlMain {
  display: block;
  margin-top: 90px;
}

#specialBodykitlineTop .aboutTtlMain img {
  width: 425px;
}

#specialBodykitlineTop .aboutInner {
  margin-top: 90px;
  color: #666;
  letter-spacing: 0.05em;
}

#specialBodykitlineTop .aboutHead {
  display: block;
  font-size: 3.6rem;
}

#specialBodykitlineTop .aboutBody {
  margin-top: 50px;
}

#specialBodykitlineTop .aboutTxt {
  margin-top: 40px;
  font-size: 2.2rem;
  line-height: 2.6;
}

#specialBodykitlineTop .aboutTxt:nth-of-type(1) {
  margin-top: 0;
}

#specialBodykitlineTop .aboutMovie {
  display: inline-block;
  margin-top: 100px;
  width: 720px;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .about {
    padding-top: calc(100vw * (110 / 325) * 0.4);
    padding-bottom: calc(100vw * (200 / 325) * 0.3);
  }
  #specialBodykitlineTop .about::before {
    height: calc(100vw * (300 / 325) * 0.4);
  }

  #specialBodykitlineTop .about::after {
    min-width: 100%;
    background-size: cover;
  }

  #specialBodykitlineTop .aboutTtlSub {
    width: calc(100vw * (107 / 325) * 0.6);
    height: calc(100vw * (37 / 325) * 0.6);
  }

  #specialBodykitlineTop .aboutTtlMain {
    margin-top: calc(100vw * (90 / 325) * 0.3);
  }

  #specialBodykitlineTop .aboutTtlMain img {
    width: calc(100vw * (425 / 325) * 0.55);
  }

  #specialBodykitlineTop .aboutInner {
    margin-top: calc(100vw * (90 / 325) * 0.4);
  }

  #specialBodykitlineTop .aboutHead {
    font-size: calc(100vw * (36 / 325) * 0.5);
  }

  #specialBodykitlineTop .aboutBody {
    margin-top: calc(100vw * (50 / 325) * 0.4);
  }

  #specialBodykitlineTop .aboutTxt {
    margin-top: calc(100vw * (40 / 325) * 0.4);
    font-size: calc(100vw * (22 / 325) * 0.5);
  }

  #specialBodykitlineTop .aboutMovie {
    margin-top: calc(100vw * (100 / 325) * 0.4);
    width: 100%;
  }
}


/**
 * Products
 * -------------------------------
 */

#specialBodykitlineTop .products {
  padding-top: 205px;
  padding-bottom: 110px;
}

#specialBodykitlineTop .productsTtl {
  text-align: center;
}

#specialBodykitlineTop .productsTtlLabel {
  width: 181px;
  height: 47px;
}

#specialBodykitlineTop .productsList {
  padding-top: 220px;
  margin-top: -230px;
}

#specialBodykitlineTop .productsListItem {
  margin-top: 230px;
}

#specialBodykitlineTop .productsListInner {
  display: flex;
}

#specialBodykitlineTop .productsListHead,
#specialBodykitlineTop .productsListBody {
  width: 50%;
}

#specialBodykitlineTop .productsListHead {
  display: block;
  position: relative;
  z-index: 1;
  padding-top: 190px;
  text-align: right;
}

#specialBodykitlineTop .productsListInner.u-flexFdRowreverse .productsListHead {
  text-align: left;
}

#specialBodykitlineTop .productsListHead::before {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  min-width: 960px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: cover;
  content: '';
}

#specialBodykitlineTop .productsListInner.u-flexFdRowreverse .productsListHead::before {
  left: 0;
  background-position: 0 50%;
}

#specialBodykitlineTop .productsListItem.-beas .productsListHead::before {
  background-image: url('/files/cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_products-list-beas-bg.jpg');
}

#specialBodykitlineTop .productsListItem.-beasPlus .productsListHead::before {
  background-image: url('/files/cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_products-list-beasplus-bg.jpg');
}

#specialBodykitlineTop .productsListItem.-beasPlusL .productsListHead::before {
  background-image: url('/files/cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_products-list-beasplusL-bg.jpg');
}

#specialBodykitlineTop .productsListItem.-sandy .productsListHead::before {
  background-image: url('/files/cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_products-list-sandy-bg.jpg');
}

#specialBodykitlineTop .productsListItem.-lewis .productsListHead::before {
  background-image: url('/files/cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_products-list-lewis-bg.jpg');
}

#specialBodykitlineTop .productsListImg {
  display: inline-block;
  margin-right: -60px;
}

#specialBodykitlineTop .productsListInner.u-flexFdRowreverse .productsListImg {
  margin-right: 0;
  margin-left: -60px;
}

#specialBodykitlineTop .productsListImg img {
  width: 675px;
}

#specialBodykitlineTop .productsListBody {
  padding-top: 60px;
  padding-left: 130px;
  text-align: left;
}

#specialBodykitlineTop .productsListInner.u-flexFdRowreverse .productsListBody {
  padding-left: 0;
  padding-right: 130px;
  text-align: right;
}

#specialBodykitlineTop .productsListBodyInner {
  display: inline-block;
  text-align: center;
}

#specialBodykitlineTop .productsListTtl img {
  width: 300px;
}

#specialBodykitlineTop .productsListBtn {
  margin-top: 150px;
}

#specialBodykitlineTop .productsListBtn .c-btn {
  min-width: 400px;
  min-height: 110px;
  font-size: 3.0rem;
  line-height: 1.2;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .products {
    padding-top: calc(100vw * (205 / 325) * 0.2);
    padding-bottom: calc(100vw * (110 / 325) * 0.2);
  }

  #specialBodykitlineTop .productsTtlLabel {
    width: calc(100vw * (181 / 325) * 0.6);
    height: calc(100vw * (47 / 325) * 0.6);
  }

  #specialBodykitlineTop .productsList {
    padding-top: calc(100vw * (220 / 325) * 0.2);
    margin-top: calc(100vw * (-230 / 325) * 0.2);
  }

  #specialBodykitlineTop .productsListItem {
    margin-top: calc(100vw * (230 / 325) * 0.2);
  }

  #specialBodykitlineTop .productsListInner {
    display: block;
  }

  #specialBodykitlineTop .productsListHead,
  #specialBodykitlineTop .productsListBody {
    width: 100%;
  }

  #specialBodykitlineTop .productsListHead {
    padding-top: calc(100vw * (190 / 325) * 0.4);
    text-align: center !important;
  }

  #specialBodykitlineTop .productsListHead::before {
    left: 0 !important;
    min-width: 100%;
    height: calc(100vw * (400 / 325) * 0.4);
    background-position: 100% 50%;
  }

  #specialBodykitlineTop .productsListInner.u-flexFdRowreverse .productsListHead::before {
    background-position: 0 50%;
  }

  #specialBodykitlineTop .productsListImg {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #specialBodykitlineTop .productsListImg img {
    width: calc(100vw * (675 / 325) * 0.4);
  }

  #specialBodykitlineTop .productsListBody {
    padding-top: calc(100vw * (60 / 325) * 0.3);
    padding-left: calc(100vw * (20 / 325)) !important;
    padding-right: calc(100vw * (20 / 325)) !important;
    text-align: center !important;
  }

  #specialBodykitlineTop .productsListTtl img {
    width: calc(100vw * (300 / 325) * 0.55);
  }

  #specialBodykitlineTop .productsListBtn {
    margin-top: calc(100vw * (150 / 325) * 0.2);
  }

  #specialBodykitlineTop .productsListBtn .c-btn {
    min-width: calc(100vw * (400 / 325) * 0.55);
    min-height: calc(100vw * (110 / 325) * 0.55);
    font-size: calc(100vw * (30 / 325) * 0.55);
  }
}


/**
 * Dealers
 * -------------------------------
 */

#specialBodykitlineTop .dealers {
  position: relative;
  z-index: 1;
  padding-top: 440px;
  padding-bottom: 320px;
  text-align: center;
}

#specialBodykitlineTop .dealers::before,
#specialBodykitlineTop .dealers::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  content: '';
}

#specialBodykitlineTop .dealers::before {
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#specialBodykitlineTop .dealers::after {
  z-index: -1;
  min-width: 1920px;
  background-image: url('/files//cdb/ZZ/special/bodykitline/top/2511/zz_special_bodykitline_top_dealers-bg.jpg');
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: cover;
}

#specialBodykitlineTop .dealersTtlLabel {
  width: 168px;
  height: 47px;
}

#specialBodykitlineTop .dealersBtn {
  margin-top: 50px;
}

#specialBodykitlineTop .dealersBtn .c-btn {
  min-width: 600px;
  min-height: 110px;
  font-size: 3.0rem;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .dealers {
    padding-top: calc(100vw * (440 / 325) * 0.2);
    padding-bottom: calc(100vw * (320 / 325) * 0.2);
  }

  #specialBodykitlineTop .dealers::after {
    min-width: 100%;
  }

  #specialBodykitlineTop .dealersTtlLabel {
    width: calc(100vw * (168 / 325) * 0.6);
    height: calc(100vw * (47 / 325) * 0.6);
  }

  #specialBodykitlineTop .dealersBtn {
    margin-top: calc(100vw * (50 / 325) * 0.5);
  }

  #specialBodykitlineTop .dealersBtn .c-btn {
    min-width: calc(100vw * (600 / 325) * 0.4);
    min-height: calc(100vw * (110 / 325) * 0.5);
    font-size: calc(100vw * (30 / 325) * 0.5);
  }
}


/**
 * FAQ
 * -------------------------------
 */

#specialBodykitlineTop .faq {
  padding-top: 90px;
  padding-bottom: 180px;
  text-align: center;
}

#specialBodykitlineTop .faqTtlLabel {
  width: 121px;
  height: 50px;
}

#specialBodykitlineTop .faqBtn {
  margin-top: 50px;
}

#specialBodykitlineTop .faqBtn .c-btn {
  min-width: 600px;
  min-height: 110px;
  font-size: 3.0rem;
}

@media only screen and (max-width: 767px) {
  #specialBodykitlineTop .faq {
    padding-top: calc(100vw * (90 / 325) * 0.4);
    padding-bottom: calc(100vw * (180 / 325) * 0.4);
  }

  #specialBodykitlineTop .faq::after {
    min-width: 100%;
  }

  #specialBodykitlineTop .faqTtlLabel {
    width: calc(100vw * (121 / 325) * 0.6);
    height: calc(100vw * (50 / 325) * 0.6);
  }

  #specialBodykitlineTop .faqBtn {
    margin-top: calc(100vw * (50 / 325) * 0.5);
  }

  #specialBodykitlineTop .faqBtn .c-btn {
    min-width: calc(100vw * (600 / 325) * 0.4);
    min-height: calc(100vw * (110 / 325) * 0.5);
    font-size: calc(100vw * (30 / 325) * 0.5);
  }
}