@charset "UTF-8";

/* ==========================================================================
   Product - archive
========================================================================== */
.product-list {
  position: relative;
}
.product-list.row .list {
  margin-bottom: 30px;
}
.product-list .list > a {
  display: block;
}
.product-list .list .imgBox {
  position: relative;
}
.product-list .list .imgBox .cover {
  background-color: #ECEFF1;
  padding-top: 150%;
}
.product-list .list .txtBox {
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-list .list .entry-title {
  margin-top: 1.5em;
  margin-bottom: .25rem;
  font-size: 1rem;
}
.product-list .list .price {
  font-size: .8rem;
}
.product-list .list .price .num {
  display: inline-block;
  margin-right: .5em;
  font-size: 1rem;
  font-weight: 600;
}

.fk---1{
  max-width: 600px;
  margin: auto;
}


@media only screen and (max-width: 575px) {
  .product-list .list {
    max-width: 360px;
    margin-right: auto;
    margin-left: auto;
  }
  .product-list .list:not(:last-of-type) {
    margin-bottom: 60px;
  }
  .product-list .list .imgBox {
    transform: translateX(30px);
  }
  .product-list .list .imgBox .cover {
    margin: 0 0 0 auto;
    width: 83%;
  }
  .product-list .list .txtBox {
    margin-top: -7.5em;
  }
  .product-list .list .btn {
    margin-top: 2rem;
  }

  .product-list .list:nth-of-type(even) .imgBox {
    transform: translateX(-30px);
  }
  .product-list .list:nth-of-type(even) .imgBox .cover {
    margin: 0 auto 0 0;
  }
  .product-list .list:nth-of-type(even) .txtBox .entry-title,
  .product-list .list:nth-of-type(even) .txtBox .price {
    text-align: right;
  }
}

@media only screen and (min-width: 992px) {
  .product-list .list .imgBox .cover {
    padding-top: 135%;
  }
}

@media only screen and (min-width: 1200px) {
  .product-list.row {
    margin-right: -50px;
    margin-left: -50px;
  }
  .product-list.row .list {
    padding-right: 50px;
    padding-left: 50px;
  }
}

@media only screen and (min-width: 1440px) {
  .product-list.row {
    margin-right: 0;
    margin-left: 0;
    padding: 0 50px;
  }
}





/* ==========================================================================
   Product - single
========================================================================== */

/* --------------------
   Product Box
-------------------- */
.product__ttl span {
  display: inline-block;
}
.productBox .imgBox {
  margin-bottom: 30px;
}

.productBox .product__header em {
  letter-spacing: .05em;
  font-style: normal;
  color: #BDBDBD;
}
.orderForm {
  text-align: center;
  margin-bottom: 60px;
}
.orderForm .formLabel {
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}
.orderForm .formLabel::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
}
.orderForm .formLabel .ttl {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .1em;
  background-color: #FFF;
  padding: 0 1em;
}


.orderForm .priceBox .num {
  font-size: 1.5rem;
  font-weight: 500;
}

.detailBox {
  padding: 1.5em 1em;
  border: 2px solid #EEE;
}
.detailBox .ttl {
  font-size: .8rem;
  font-weight: 500;
}
.detailBox p {
  font-size: .75rem;
  line-height: 1.5;
}
.detailBox p:last-of-type {
  margin-bottom: 0;
}


@media only screen and (max-width: 991px) {
  .productBox .imgBox {
    margin-top: -30px;
  }
}
@media only screen and (min-width: 992px) {
  .productBox .imgBox {
    padding-right: 30px;
  }
  .productBox .txtBox {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 1440px) {
  .detailBox p {
    font-size: .6rem;
  }
}

/* --------------------
   Concept
-------------------- */
#product_single #concept {
  position: relative;
}
#product_single #concept .imgBox .cover {
  height: 100%;
}
#product_single #concept .txtBox .ttl {
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 30px;
}
#product_single #concept .txtBox p {
  color: #7C7C7C;
}
#product_single #concept .txtBox p:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 992px) {
  #product_single #concept .imgBox {
    position: absolute;
    top: 105px;
    right: -15px;
    bottom: 105px;
    padding-left: 45px;
  }
  #product_single #concept .txtBox .ttl {
    white-space: nowrap;
  }
  #product_single #concept .txtBox p {
    padding-right: 35%;
  }
}
@media only screen and (max-width: 991px) {
  #product_single #concept .imgBox {
    width: 100vw;
    padding: 0;
    margin: 0 calc(((100vw - 100%)/2)*-1) 30px;
    height: 360px;
  }
}
@media only screen and (min-width: 1440px) {
  #product_single #concept .txtBox p {
    font-size: .9rem;
    line-height: 2;
  }
}

/* --------------------
   Point
-------------------- */
.point-list .list {
  border-bottom: 1px solid currentColor;
  padding: 3em 0;
}
.point-list .txtBox .num {
  margin-bottom: 1.5rem;
  letter-spacing: .05em;
}
.point-list .txtBox .ttl {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.point-list .txtBox .ttl .h3 {
  font-weight: 500;
}
.point-list .txtBox .badge {
  margin: .75em 0;
}
.point-list .txtBox p {
  color: #7C7C7C;
}
.point-list .txtBox p:last-of-type {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .point-list .imgBox {
    margin-bottom: 2rem;
  }
  .point-list .txtBox {
    position: relative;
  }
  .point-list .txtBox p {
    font-size: .857rem;
  }
}

@media only screen and (min-width: 1200px) {
  .point-list .imgBox {
    padding-right: 50px;
  }
}

@media only screen and (min-width: 1440px) {
  .point-list .txtBox p {
    font-size: .9rem;
  }
  .point-list .txtBox p .badge {
    font-size: 100%;
  }
}