@charset "utf-8";

/**
 * Body Kit Line Products Page Style
 * ================================================================================
 * Table of Contents:
 *
 * Body Kit Line Products Page
 *  - Key Visual
 *  - Overview
 *  - Gallery
 *  - Modal
 * ================================================================================
 */



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

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

.specialBodykitlineProducts .kv img {
  width: 100%;
}


/**
 * Overview
 * -------------------------------
 */

.specialBodykitlineProducts .overview {
  margin-top: 90px;
}

.specialBodykitlineProducts .overviewTtl {
  text-align: center;
}

.specialBodykitlineProducts .overviewTtl img {
  width: 385px;
}

.specialBodykitlineProducts .overviewList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 85px 110px 0 110px;
  margin-top: -120px;
  margin-left: -220px;
}

.specialBodykitlineProducts .overviewListItem {
  width: 50%;
  padding-top: 120px;
  padding-left: 220px;
}

.specialBodykitlineProducts .overviewListTtlSub {
  display: block;
  margin-bottom: 10px;
  font-size: 1.9rem;
}

.specialBodykitlineProducts .overviewListTtlMain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1.5px solid #221815;
  font-size: 3.0rem;
  line-height: 1;
}

.specialBodykitlineProducts .overviewListPrice {
  margin-top: 15px;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
}

.specialBodykitlineProducts .overviewListSpec {
  margin-top: 15px;
}

.specialBodykitlineProducts .overviewListSpec th,
.specialBodykitlineProducts .overviewListSpec td {
  padding: 5px 0;
  font-size: 2.0rem;
}

.specialBodykitlineProducts .overviewListSpec th {
  width: 40%;
}

.specialBodykitlineProducts .overviewListSpec td {
  width: 60%;
}

.specialBodykitlineProducts .overviewListComments {
  font-size: 1.0rem;
}

.specialBodykitlineProducts .overviewListComments:nth-of-type(1) {
  margin-top: 30px;
}

@media only screen and (max-width: 767px) {
  .specialBodykitlineProducts .overview {
    margin-top: calc(100vw * (90 / 325) * 0.3);
  }

  .specialBodykitlineProducts .overviewTtl img {
    width: calc(100vw * (385 / 325) * 0.45);
  }

  .specialBodykitlineProducts .overviewList {
    padding: calc(100vw * (85 / 325) * 0.3) calc(100vw * (110 / 325) * 0.15) 0 calc(100vw * (110 / 325) * 0.15);
    margin-top: 0;
    margin-left: 0;
  }

  .specialBodykitlineProducts .overviewListItem {
    width: 100%;
    padding-top: calc(100vw * (120 / 325) * 0.2);
    padding-left: 0;
    margin-top: calc(100vw * (120 / 325) * 0.2);
    border-top: 1px solid #221815;
  }

  .specialBodykitlineProducts .overviewListItem:nth-of-type(1) {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
  }

  .specialBodykitlineProducts .overviewListTtlSub {
    margin-bottom: calc(100vw * (10 / 325) * 0.4);
    font-size: calc(100vw * (19 / 325) * 0.55);
  }

  .specialBodykitlineProducts .overviewListTtlMain {
    padding: calc(100vw * (20 / 325) * 0.5);
    font-size: calc(100vw * (30 / 325) * 0.55);
  }

  .specialBodykitlineProducts .overviewListPrice {
    margin-top: calc(100vw * (15 / 325) * 0.5);
    font-size: calc(100vw * (22 / 325) * 0.55);
  }

  .specialBodykitlineProducts .overviewListSpec {
    margin-top: calc(100vw * (15 / 325) * 0.5);
  }

  .specialBodykitlineProducts .overviewListSpec th,
  .specialBodykitlineProducts .overviewListSpec td {
    padding: calc(100vw * (5 / 325) * 0.5) 0;
    font-size: calc(100vw * (20 / 325) * 0.55);
  }

  .specialBodykitlineProducts .overviewListComments {
    font-size: calc(100vw * (10 / 325) * 0.8);
  }

  .specialBodykitlineProducts .overviewListComments:nth-of-type(1) {
    margin-top: calc(100vw * (30 / 325) * 0.3);
  }
}



/**
 * Gallery
 * -------------------------------
 */

.specialBodykitlineProducts .gallery {
  padding-top: 140px;
  padding-bottom: 180px;
  margin-top: 70px;
  background-color: #f2f2f2;
}

.specialBodykitlineProducts .galleryTtl {
  padding-bottom: 80px;
  text-align: center;
}

.specialBodykitlineProducts .galleryTtlLabel.-features {
  width: 175px;
  height: 47px;
}

.specialBodykitlineProducts .galleryTtlLabel.-option {
  width: 135px;
  height: 60px;
}

.specialBodykitlineProducts .galleryInner {
  margin-top: 140px;
}

.specialBodykitlineProducts .galleryInner:nth-of-type(1) {
  margin-top: 0;
}

.specialBodykitlineProducts .galleryList {
  margin-top: -40px;
  margin-left: -40px;
  overflow: hidden;
}

.specialBodykitlineProducts .galleryListItem {
  float: left;
  padding-top: 40px;
  padding-left: 40px;
}

.specialBodykitlineProducts .galleryListItem.-w720 {
  width: 58.9%;
}

.specialBodykitlineProducts .galleryListItem.-w490 {
  width: 41.1%;
}

.specialBodykitlineProducts .galleryListInner {
  display: block;
}

.specialBodykitlineProducts a.galleryListInner {
  transition: none !important;
}

.specialBodykitlineProducts a.galleryListInner:hover {
  opacity: 1 !important;
}

.specialBodykitlineProducts .galleryListFig {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.specialBodykitlineProducts .galleryListFig.-icon::after {
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 2;
  width: 46px;
  height: 46px;
  mask-image: url('/files/cdb/ZZ/special/bodykitline/common/2511/zz_special_bodykitline_common_icon-plus.svg');
  mask-repeat: no-repeat;
  mask-position: 50% 0;
  mask-size: 100% auto;
  content: '';
}

.specialBodykitlineProducts .galleryListFig.-icon.-black::after {
  background-color: #211815;
}

.specialBodykitlineProducts .galleryListFig.-icon.-white::after {
  background-color: #fff;
}

.specialBodykitlineProducts a.galleryListInner:hover .galleryListFig.-icon.-black::after,
.specialBodykitlineProducts a.galleryListInner:hover .galleryListFig.-icon.-white::after {
  background-color: #fff;
}

.specialBodykitlineProducts .galleryListImg {
  position: relative;
  z-index: -1;
}

.specialBodykitlineProducts .galleryListImg img {
  width: 100%;
}

.specialBodykitlineProducts .galleryListFigcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translateY(100%);
  width: 100%;
  height: 100%;
  background-color: rgba(102, 102, 102, 0.8);
  color: #fff;
  font-size: 3.1rem;
  text-align: center;
  transition: transform 0.2s ease-out;
}

.specialBodykitlineProducts a.galleryListInner:hover .galleryListFigcaption {
  transform: translateY(0);
}

.specialBodykitlineProducts .galleryBottom {
  margin-top: 150px;
}

.specialBodykitlineProducts .galleryBtn .c-btn {
  min-width: 100%;
  height: 180px;
  font-size: 3.1rem;
}

.specialBodykitlineProducts .galleryBtn .c-btn::after {
  right: 30px;
  width: 16px;
  height: 16px;
}

@media only screen and (max-width: 767px) {
  .specialBodykitlineProducts .gallery {
    padding-top: calc(100vw * (140 / 325) * 0.35);
    padding-bottom: calc(100vw * (180 / 325) * 0.35);
    margin-top: calc(100vw * (70 / 325) * 0.5);
  }

  .specialBodykitlineProducts .galleryTtl {
    padding-bottom: calc(100vw * (80 / 325) * 0.25);
  }

  .specialBodykitlineProducts .galleryTtlLabel.-features {
    width: calc(100vw * (175 / 325) * 0.6);
    height: calc(100vw * (47 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryTtlLabel.-option {
    width: calc(100vw * (135 / 325) * 0.6);
    height: calc(100vw * (60 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryInner {
    margin-top: calc(100vw * (140 / 325) * 0.3);
  }

  .specialBodykitlineProducts .galleryList {
    margin-top: calc(100vw * (-40 / 325) * 0.2);
    margin-left: calc(100vw * (-40 / 325) * 0.2);
  }

  .specialBodykitlineProducts .galleryListItem {
    padding-top: calc(100vw * (40 / 325) * 0.2);
    padding-left: calc(100vw * (40 / 325) * 0.2);
  }

  .specialBodykitlineProducts .galleryListFig.-icon::after {
    right: calc(100vw * (25 / 325) * 0.2);
    bottom: calc(100vw * (25 / 325) * 0.2);
    width: calc(100vw * (46 / 325) * 0.35);
    height: calc(100vw * (46 / 325) * 0.35);
  }

  .specialBodykitlineProducts .galleryListFigcaption {
    font-size: calc(100vw * (31 / 325) * 0.5);
  }

  .specialBodykitlineProducts a.galleryListInner:hover .galleryListFigcaption {
    transform: translateY(100%);
  }

  .specialBodykitlineProducts .galleryBottom {
    margin-top: calc(100vw * (150 / 325) * 0.3);
  }

  .specialBodykitlineProducts .galleryBtn .c-btn {
    height: calc(100vw * (180 / 325) * 0.3);
    font-size: calc(100vw * (31 / 325) * 0.45);
  }

  .specialBodykitlineProducts .galleryBtn .c-btn::after {
    right: calc(100vw * (30 / 325) * 0.5);
    width: calc(100vw * (16 / 325) * 0.5);
    height: calc(100vw * (16 / 325) * 0.5);
  }
}


/**
 * Modal
 * -------------------------------
 */

.specialBodykitlineProducts .modal {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.specialBodykitlineProducts .p-modal {
  display: block !important;
}

.fancybox__slide.has-close-btn {
  padding: 5vw;
}

.f-button.is-close-button {
  position: sticky;
  top: 0;
  right: auto;
  left: calc(100% - 80px);
  z-index: 10;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background-color: #fff;
  transition: opacity 0.2s ease-out;
}

.f-button.is-close-button:hover {
  opacity: 0.6;
  background-color: #fff;
}

.f-button.is-close-button::before,
.f-button.is-close-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 1px;
  background-color: #000;
  content: '';
}

.f-button.is-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.f-button.is-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.specialBodykitlineProducts.galleryModal {
  width: 100%;
  max-width: 1100px;
  max-height: 560px;
  padding: 0;
  overflow: auto;
}

.specialBodykitlineProducts .galleryModalInner {
  width: 1100px;
  margin-top: -80px;
}

.specialBodykitlineProducts .galleryModalSlider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1000px;
  margin-top: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease-out;
}

.specialBodykitlineProducts .galleryModalSlider .slick-prev {
  left: 20px;
}

.specialBodykitlineProducts .galleryModalSlider .slick-next {
  right: 20px;
}

.specialBodykitlineProducts .galleryModalSlider .slick-arrow:hover {
  opacity: 0.6;
}

.specialBodykitlineProducts .galleryModalSlider .slick-arrow::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  content: '';
}

.specialBodykitlineProducts .galleryModalSlider .slick-prev::after {
  margin-left: 5px;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.specialBodykitlineProducts .galleryModalSlider .slick-next::after {
  margin-left: -5px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.specialBodykitlineProducts .galleryModalSliderFig {
  display: flex;
  flex-direction: row-reverse;
}

.specialBodykitlineProducts .galleryModalSliderImg {
  width: 560px;
}

.specialBodykitlineProducts .galleryModalSliderFigcaption {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 60px 40px 60px 120px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSub {
  display: block;
  margin-bottom: 25px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel {
  margin-left: 10px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel:nth-of-type(1) {
  margin-left: 0;
}

#optionModal .galleryModalSliderTtlSubLabel:nth-of-type(2) {
  position: relative;
  top: -6px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-features {
  width: 92px;
  height: 25px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-option {
  width: 71px;
  height: 32px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num1 {
  width: 29px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num2 {
  width: 34px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num3 {
  width: 33px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num4 {
  width: 34px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num5 {
  width: 35px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num6 {
  width: 34px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num7 {
  width: 34px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num8 {
  width: 34px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num9 {
  width: 33px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num10 {
  width: 27px;
  height: 23px;
}

.specialBodykitlineProducts .galleryModalSliderTtlMain {
  display: block;
  color: #808080;
  font-size: 3.1rem;
  line-height: 1.4;
}

.specialBodykitlineProducts .galleryModalSliderTxt {
  margin-top: 40px;
  font-size: 1.7rem;
  line-height: 1.8;
}

.specialBodykitlineProducts .galleryModalSliderPrice {
  margin-top: auto;
}

.specialBodykitlineProducts .galleryModalSliderPriceHead,
.specialBodykitlineProducts .galleryModalSliderPriceBody {
  font-weight: 700;
}

.specialBodykitlineProducts .galleryModalSliderPriceHead {
  display: block;
  font-size: 1.8rem;
}

.specialBodykitlineProducts .galleryModalSliderPriceBody {
  font-size: 2.0rem;
}

@media only screen and (max-width: 767px) {
  .f-button.is-close-button {
    left: calc(100% - (100vw * (80 / 325) * 0.4));
    width: calc(100vw * (80 / 325) * 0.4);
    height: calc(100vw * (80 / 325) * 0.4);
  }

  .f-button.is-close-button:hover {
    opacity: 1;
  }

  .f-button.is-close-button::before,
  .f-button.is-close-button::after {
    width: calc(100vw * (50 / 325) * 0.4);
  }

  .specialBodykitlineProducts.galleryModal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .specialBodykitlineProducts .galleryModalInner {
    width: 90vw;
    margin-top: calc((100vw * (80 / 325) * 0.4) * -1);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-arrow {
    width: calc(100vw * (70 / 325) * 0.4);
    height: calc(100vw * (70 / 325) * 0.4);
    top: calc(100vw * (130 / 325));
    transform: translateY(0);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-prev {
    left: calc(100vw * (20 / 325) * 0.4);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-next {
    right: calc(100vw * (20 / 325) * 0.4);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-arrow:hover {
    opacity: 1;
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-arrow::after {
    width: calc(100vw * (22 / 325) * 0.4);
    height: calc(100vw * (22 / 325) * 0.4);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-prev::after {
    margin-left: calc(100vw * (5 / 325) * 0.4);
  }

  .specialBodykitlineProducts .galleryModalSlider .slick-next::after {
    margin-left: calc(100vw * (-5 / 325) * 0.4);
  }

  .specialBodykitlineProducts .galleryModalSliderFig {
    display: block;
  }

  .specialBodykitlineProducts .galleryModalSliderImg {
    width: 100%;
  }

  .specialBodykitlineProducts .galleryModalSliderFigcaption {
    display: block;
    width: 100%;
    padding: calc(100vw * (60 / 325) * 0.5);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSub {
    margin-bottom: calc(100vw * (25 / 325) * 0.5);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel {
    margin-left: calc(100vw * (10 / 325) * 0.5);
  }

  #optionModal .galleryModalSliderTtlSubLabel:nth-of-type(2) {
    top: calc(100vw * (-6 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-features {
    width: calc(100vw * (92 / 325) * 0.6);
    height: calc(100vw * (25 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-option {
    width: calc(100vw * (71 / 325) * 0.6);
    height: calc(100vw * (32 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num1 {
    width: calc(100vw * (29 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num2 {
    width: calc(100vw * (34 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num3 {
    width: calc(100vw * (33 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num4 {
    width: calc(100vw * (34 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num5 {
    width: calc(100vw * (35 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num6 {
    width: calc(100vw * (34 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num7 {
    width: calc(100vw * (34 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num8 {
    width: calc(100vw * (34 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num9 {
    width: calc(100vw * (33 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlSubLabel.-num10 {
    width: calc(100vw * (27 / 325) * 0.6);
    height: calc(100vw * (23 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTtlMain {
    font-size: calc(100vw * (31 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderTxt {
    margin-top: calc(100vw * (40 / 325) * 0.5);
    font-size: calc(100vw * (17 / 325) * 0.65);
  }

  .specialBodykitlineProducts .galleryModalSliderPrice {
    margin-top: calc(100vw * (60 / 325) * 0.5);
  }

  .specialBodykitlineProducts .galleryModalSliderPriceHead {
    font-size: calc(100vw * (18 / 325) * 0.6);
  }

  .specialBodykitlineProducts .galleryModalSliderPriceBody {
    font-size: calc(100vw * (20 / 325) * 0.6);
  }
}