@charset 'UTF-8';

/**
 * Product Page Settings
 * ================================================================================
 * Table of Contents:
 *
 * Products Detail Page Settings
 *  - Overview
 *  - Spec
 * ================================================================================
 */



/**
 * ================================================================================
 * Products Detail Page Settings
 * ================================================================================
 */

body.page-product-detail .l-main {
  padding-bottom: 0;
}


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

body.page-product-detail .overview {
  margin-top: 4.0rem;
}

body.page-product-detail .overview-inner {
  display: flex;
}

@media all and (max-width: 767px) {
  body.page-product-detail .overview {
    margin-top: 2.5rem;
  }
  
  body.page-product-detail .overview-inner {
    display: block;
  }
}

/* -- .overview-slider -- */
body.page-product-detail .overview-slider {
  width: 55%;
}

body.page-product-detail .overview-slider-main {
  border: 1px solid #ccc;
}

body.page-product-detail .overview-slider-main-item {
  overflow: hidden;
}

body.page-product-detail .overview-slider-nav {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding: 0 4.5rem;
}

body.page-product-detail .overview-slider-nav-item {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  overflow: hidden;
}

body.page-product-detail .overview-slider-nav-item img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 767px) {
  body.page-product-detail .overview-slider {
    width: 100%;
  }

  body.page-product-detail .overview-slider-main .slick-arrow {
    width: 2.8rem;
    height: 2.8rem;
    background-size: 1.2rem auto;
  }

  body.page-product-detail .overview-slider-main .slick-prev {
    left: -1.4rem;
  }

  body.page-product-detail .overview-slider-main .slick-next {
    right: -1.4rem;
  }
  
  body.page-product-detail .overview-slider-main-item {
    height: 30.75rem;
  }

  body.page-product-detail .overview-slider-main-item img {
    margin-top: -0.875rem;
  }
  
  body.page-product-detail .overview-slider-nav {
    margin-top: 1.5rem;
    padding: 0 2.5rem;
  }

  body.page-product-detail .overview-slider-nav.slick-arrowed-inside .slick-prev {
    left: -1.0rem;
  }

  body.page-product-detail .overview-slider-nav.slick-arrowed-inside .slick-next {
    right: -1.0rem;
  }

  body.page-product-detail .overview-slider-nav-item {
    width: 5.1rem;
    height: 5.1rem;
  }
}

/* -- .overview-main -- */
body.page-product-detail .overview-main {
  width: 45%;
  padding-left: 5.0rem;
}

body.page-product-detail .overview-labels {
  display: flex;
  flex-wrap: wrap;
  margin-top: -0.6rem;
  margin-left: -0.6rem;
  margin-bottom: 1.0rem;
}

body.page-product-detail .overview-labels-item {
  margin-top: 0.6rem;
  margin-left: 0.6rem;
  font-size: 1.3rem;
  font-weight: 500;
}

body.page-product-detail .overview-ttl > * {
  display: block;
  margin-top: 0.2rem;
  line-height: 1.4;
}

body.page-product-detail .overview-ttl > *:nth-of-type(1) {
  margin-top: 0;
}

body.page-product-detail .overview-ttl-maker {
  color: #808080;
  font-size: 1.4rem;
}

body.page-product-detail .overview-ttl-main {
  font-size: 4.2rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

body.page-product-detail .overview-ttl-main > small {
  font-size: 2.0rem;
}

body.page-product-detail .overview-ttl-sub {
  font-size: 1.8rem;
}

body.page-product-detail .overview-color {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-top: 2.0rem;
  padding-bottom: 1.5em;
  margin-top: -1.0rem;
  margin-left: -1.0rem;
}

body.page-product-detail .overview-color-item {
  margin-left: 1.0rem;
  margin-top: 1.0rem;
}

body.page-product-detail .overview-color-item-inner {
  display: inline-block;
}

body.page-product-detail .overview-color-item-pointer {
  display: block;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 100.0rem;
  border: 1px solid #ccc;
}

body.page-product-detail .overview-color-item-inner.is-active .overview-color-item-pointer {
  border: none;
}

body.page-product-detail .overview-color-item-inner.is-active .overview-color-item-pointer::before {
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  width: 3.4rem;
  height: 3.4rem;
  border: 0.2rem solid #1a1a1a;
  border-radius: 100.0rem;
  content: '';
}

body.page-product-detail .overview-color-item-pointer.is-black {
  background-color: #000;
}
body.page-product-detail .overview-color-item-pointer.is-white {
  background-color: #fff;
}

body.page-product-detail .overview-color-item-txt {
  position: absolute;
  bottom: 0;
  left: 1.0rem;
  opacity: 0;
  width: 55.0rem;
  visibility: hidden;
  font-size: 1.3rem;
  pointer-events: none;
  transition: var(--transition);
}

body.page-product-detail .overview-color-item-inner.is-active .overview-color-item-txt,
body.page-product-detail .overview-color-item-inner .overview-color-item-txt.is-active {
  opacity: 1;
  visibility: visible;
}

body.page-product-detail .overview-info,
body.page-product-detail .overview-features {
  margin-top: 3.0rem;
  padding-top: 3.0rem;
  border-top: 0.1rem solid #ccc;
}

body.page-product-detail .overview-info-table {
  width: 100%;
}

body.page-product-detail .overview-info-table th,
body.page-product-detail .overview-info-table td {
  padding-right: 2.0rem;
  font-size: 1.4rem;
  line-height: 1.6;
}

body.page-product-detail .overview-features-list-item {
  margin-top: 0.8rem !important;
  line-height: 1.6;
}

body.page-product-detail .overview-features-comments {
  margin-top: 1.0rem;
  text-align: right;
}

body.page-product-detail .overview-features-comments .c-comments {
  display: inline-block;
  font-size: 1.4rem;
}

@media all and (max-width: 767px) {
  body.page-product-detail .overview-main {
    width: 100%;
    padding-left: 0;
    margin-top: 3.0rem;
  }

  body.page-product-detail .overview-labels {
    margin-top: -0.3rem;
    margin-left: -0.3rem;
    margin-bottom: 0.8rem;
  }

  body.page-product-detail .overview-labels-item {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    font-size: 1.2rem;
  }

  body.page-product-detail .overview-ttl > span {
    margin-top: 0.2rem;
  }

  body.page-product-detail .overview-ttl-maker {
    font-size: 1.3rem;
  }

  body.page-product-detail .overview-ttl-main {
    font-size: 2.8rem;
  }

  body.page-product-detail .overview-ttl-main > small {
    font-size: 1.8rem;
  }

  body.page-product-detail .overview-ttl-sub {
    margin-top: 1.2rem;
    font-size: 1.6rem;
  }
  
  body.page-product-detail .overview-color {
    padding-top: 1.65rem;
    padding-bottom: 2em;
    margin-top: -0.85rem;
    margin-left: -0.85rem;
  }

  body.page-product-detail .overview-color-item {
    margin-left: 0.85rem;
    margin-top: 0.85rem;
  }

  body.page-product-detail .overview-color-item-pointer {
    width: 2.25rem;
    height: 2.25rem;
  }

  body.page-product-detail .overview-color-item-inner.is-active .overview-color-item-pointer::before {
    position: absolute;
    top: -0.3625rem;
    left: -0.3625rem;
    width: 2.975rem;
    height: 2.975rem;
    border: 0.175rem solid #949494;
  }

  body.page-product-detail .overview-info,
  body.page-product-detail .overview-features {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }

  body.page-product-detail .overview-info-table th,
  body.page-product-detail .overview-info-table td {
    padding-right: 1.0rem;
    font-size: 1.2rem;
  }

  body.page-product-detail .overview-features-list-item {
    margin-top: 0.6rem !important;
  }

  body.page-product-detail .overview-features-comments {
    margin-top: 0.3rem;
  }
  
  body.page-product-detail .overview-features-comments .c-comments {
    font-size: 1.2rem;
  }
}


/**
 * Spec
 * -------------------------------
 */

body.page-product-detail .spec {
  margin-top: 11.0rem;
  padding-top: 10.0rem;
  padding-bottom: 11.0rem;
}

body.page-product-detail .spec-table {
  margin-top: 2.0rem;
}

@media all and (max-width: 767px) {
  body.page-product-detail .spec {
    margin-top: 8.0rem;
    padding-top: 6.0rem;
    padding-bottom: 8.0rem;
  }

  body.page-product-detail .spec-table {
    margin-top: 1.5rem;
  }
}