@charset "UTF-8";

.wrapper {
  max-width: 1260px;
  padding: 0 20px;
  margin: 0 auto;
}

/* セクションタイトル */
.common-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
  position: relative;
}

.common-title span {
  max-width: 1260px;
  display: block;
  padding: 0 20px;
  margin: 0 auto;
}

/*-------------------------------------------
productmenu-btn-area
-------------------------------------------*/
.productmenu-btn-area {
  display: flex;
  justify-content: center;
  margin-bottom: 120px;
}

.productmenu-btn:first-child {
  margin-right: 25px;
}

.productmenu-btn a {
  background: #191970;
  padding: 14px 40px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-size: 16px;
  text-align: center;
}

.productmenu-btn a:hover {
  background: #EBF6F7;
  color: #191970;
}


/*-------------------------------------------
Product-explain
-------------------------------------------*/
.product-explain {
  margin-bottom: 120px;
}

.product-explain .item {
  display: flex;
  align-items: center;
  border-top: solid 1px #191970;
  border-bottom: solid 1px #191970;
  margin-bottom: 40px;
}

.product-explain .item .text {
  width: 52%;
  padding: 1% 5%;
}

.product-explain .item .text .desc-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.product-explain .item .text .description {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.product-explain .item .img {
  width: 48%;
  overflow: hidden;
}

.product-explain .merit {
  width: 160px;
  background-color: #EE7800;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

.product-explain .merit-description {
  font-size: 20px;
  line-height: 1.75;
  font-weight: 500;
}

/*-------------------------------------------
Product-plot
-------------------------------------------*/
.product-plot {
  margin-bottom: 120px;
}

.product-plot .plot-item {
  display: flex;
  border-top: solid 1px #191970;
  border-bottom: solid 1px #191970;
  align-items: center;
  margin-bottom: 30px;
}

.product-plot .plot-item .img {
  width: 48%;
}

.product-plot .plote-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-plot .plot-item .text {
  width: 52%;
  background-color: #fff;
  padding: 1% 5%;
}

.product-plot .plot-item .text .section-title-l {
  margin-bottom: 20px;
}

.product-plot .plot-item .text .section-title-l .ja {
  display: block;
  font-size: 20px;
  font-weight: 500;
}

.product-plot .plot-item .description {
  font-size: 16px;
  line-height: 1.75;
}

.custom-list {
  position: relative;
  padding-left: 1.25em;
}

.custom-list::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #EE7800;
}

/*-------------------------------------------
Product-content
-------------------------------------------*/
.product-content {
  margin-bottom: 40px;
}

.product-content .item {
  display: flex;
  border-top: solid 1px #191970;
  border-bottom: solid 1px #191970;
  margin-bottom: 40px;
}

.product-content .item .leftside-area {
  width: 48%;
}

.product-content .item .leftside-area img {
  height: auto;
  width: 100%;
}

.product-content .item .leftside-area .thumbnail .thumbnail-img {
  width: calc(100% / 3) !important;
}

.slider {
  margin-bottom: 10px;
}

.thumbnail {
  margin-bottom: 20px;
}

.product-content .item .rightside-area {
  width: 52%;
  padding: 5%;
}

.product-content .item .text .product-name {
  font-size: 24px;
  font-weight: 700;
  color: #191970;
  margin-bottom: 20px;
}

.product-content .item .text .description {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.product-content .merit {
  width: 160px;
  background-color: #EE7800;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
}

.product-content .merit-description {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 20px;
}

.subtitle {
  font-size: 20px;
  font-weight: 500;
  background: linear-gradient(transparent 65%, #ffebcd 65%);
}

/*-------------------------------------------
Price-area
-------------------------------------------*/
.price-area {
  margin-bottom: 80px;
}

.price-area .price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #1f1f1f;
  padding-bottom: 5px;
  font-size: 16px;
}

.price-area .price-item:first-child {
  margin-bottom: 20px;
}

.o-shop-btn a  {
  background-color: #A52A2A;
  color: #fff;
  display: block;
  padding: 6px 17px;
  text-align: center;
  transition: 0.3s ease-in-out;
}

.o-shop-btn a:hover {
  background: #ffc0cb;
  color: #A52A2A;
}

.price {
  font-size: 24px;
  font-weight: 500;
}



/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {

  /* セクションタイトル */
  .product-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  /*-------------------------------------------
productmenu-btn-area
-------------------------------------------*/
  .productmenu-btn-area {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: 80px;
  }

  .productmenu-btn:first-child {
    margin-right: 0px;
  }

  .productmenu-btn:first-child {
    margin-bottom: 40px;
  }

  .productmenu-btn a {
  padding: 14px;
}


  /*-------------------------------------------
  Product-explain
  -------------------------------------------*/
  .product-explain {
    margin-bottom: 60px;
  }

  .product-explain .item {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .product-explain .item .text .desc-title {
    font-size: 20px;
  }

  .product-explain .item .text {
    width: 100%;
    padding: 20px;
  }

  .product-explain .item .img {
    width: 100%;
  }

  .product-explain .merit-description {
    font-size: 16px;
  }

  /*-------------------------------------------
  Product-plot
  -------------------------------------------*/
  .product-plot {
    margin-bottom: 60px;
  }

  .product-plot .plot-item {
    flex-direction: column;
  }

  .product-plot .plot-item .img {
    width: 100%;
  }

  .product-plot .plot-item .img img {
    object-fit: contain;
  }

  .product-plot .plot-item .text {
    width: 100%;
    padding: 20px;
  }

  .product-plot .plot-item .text .section-title-l .ja {
    font-size: 18px;
  }

  /*-------------------------------------------
Product-content
-------------------------------------------*/
  .product-content {
    margin-bottom: 40px;
  }

  .product-content .item {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .product-content .item .leftside-area {
    width: 100%;
    padding-bottom: 10px;
  }

  .product-content .item .rightside-area {
    width: 100%;
    padding: 20px;
  }

  .product-content .item .text .product-name {
    font-size: 20px;
  }

  .product-content .item .text .description {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 40px;
  }

  .subtitle {
    font-size: 18px;
  }

  /*-------------------------------------------
Price-area
-------------------------------------------*/
.price-area {
  margin-bottom: 20px;
}

.price-area .price-item {
  flex-direction: column;
}

.o-shop-btn {
 width: 100%;
}

}