@charset "UTF-8";

/*-------------------------------------------------------------------
 *
 * File Name   :products_detail.css
 *
-------------------------------------------------------------------*/

:root {
  --productsdetail-main-color: #9B6346;
  --productsdetail-ttlbg-color: #FDE5DC;
}

#products.detail,#products.results {
  background: #fff;
  color: #535353;
}
.products-detail-wrap {
  font-family: 'Zen Maru Gothic', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;
  width: 823px;
  margin: 30px auto 0;
}
.products-detail-hdg-lv1 {
  color: var(--productsdetail-main-color);
  font-size: 30px;
  padding: 30px 0;
  font-weight: bold;
}
.products-detail-flex {
  display: flex;
  align-items: center;
  gap: 30px;
}
.products-detail-flex-itm-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  flex-grow: 0;
  flex-shrink: 0;
}
.products-detail-flex-itm-pic-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.products-detail-flex-itm-content-txt {
  font-size: 18px;
  line-height: calc( 24 / 15 );
}
.products-detail-flex-itm-content-txt + .products-detail-flex-itm-content-txt {
  margin-top: 30px;
}
.products-detail-flex-itm-dl {
  margin-bottom: 32px;
}
.products-detail-flex-itm-dt {
  display: block;
  background: var(--productsdetail-ttlbg-color);
  padding: 10px 24px;
  font-size: 24px;
  text-align: center;
  color: var(--productsdetail-main-color);
  margin-bottom: 24px;
}
.products-detail-flex-itm-dt span {
  display: block;
  font-size: 18px;
}
.products-detail-flex-itm-dt-sub {
  font-size: 16px;
  padding: 10px 0;
  border-top: dashed 1px #535353;
}
.products-detail-flex-itm-dd {
  margin-bottom: 32px;
  font-weight: bold;
  font-size: 16px;
}
.products-detail-flex-itm-dd.r-normal {
  font-weight: normal;
}
.products-detail-flex.r-between {
  justify-content: space-between;
  align-items: flex-start;
  width: 823px;
  margin: 115px auto 0;
  gap: 0;
}
.products-detail-flex-itm {
  width: 362px;
}
.products-detail-flex-itm-allergy-info {
  font-size: 16px;
  padding: 10px 0;
  border-top: dashed 1px #535353;
  border-bottom: dashed 1px #535353;
  text-decoration: underline;
}
.products-detail-flex-itm-allergy-info::after {
  content: ">";
}
.products-detail-table {
  border-collapse: separate;
  border-spacing: 2px;
}
.products-detail-table th {
  padding: 12px 14px;
  background: #FEEEDF;
  font-size: 16px;
  width: 127px;
}
.products-detail-table td {
  padding: 12px 14px;
  background: #F7F7F7;
  font-size: 16px;
  width: 233px;
}
.products-detail-update {
  text-align: right;
  font-size: 16px;
}
.products-detail-txt {
  font-size: 16px;
  font-weight: normal;
  line-height: calc( 22 / 13 );
}
.products-detail-txt + .products-detail-txt {
  margin-top: 16px;
}
.products-detail-point-btn-wap {
  margin: 32px 0 0;
}
.products-detail-point-btn {
  display: flex;
  align-items: center;
  width: 364px;
  height: 41px;
  border-radius: 6px;
  border: solid 2px #FD6355;
  font-size: 16px;
  font-weight: bold;
  color: #FD6355 !important;
  position: relative;
  padding: 0 16px;
  margin: 0 auto;
  transition: 0.6s;
  background: #fff;
}
.products-detail-point-btn::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: solid 2px #FD6355;
  border-left: solid 2px #FD6355;
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  margin: auto;
  transition: 0.6s;
}
.products-detail-point-btn:hover {
  background: #FD6355;
  color: #fff !important;
}
.products-detail-point-btn:hover::after {
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
}
.products-detail-flex-wrap {
  width: 823px;
  margin: 0 auto;
}
.products-result-txt {
  font-size: 20px;
  color: #846041;
  width: 823px;
  margin: 16px auto 22px;
}
/*.products-result-txt span {
  font-weight: bold;
}*/
.products-result-txt span.r-em {
  color: #5470D0;
}
.productsListArea + .products-category-list-box-h3 {
  margin-top: 40px;
}
.allergy-note + .allergy-note {
  margin-top: 16px;
}
.products-category-list-box-h5 {
  font-size: 12px;
  color: #454444;
  margin-top: 8px;
  width: 150px;
  text-align: left;
  font-weight: bold;
}
.products-category-list-box-txt-s {
  font-size: 12px;
  color: #454444;
  margin-top: 4px;
  width: 150px;
  text-align: left;
}

.u-mb16 {
  margin-bottom: 16px !important;
}
.u-mb30 {
  margin-bottom: 30px !important;
}
.u-mt30 {
  margin-top: 30px !important;
}
.u-pt60 {
  padding-top: 60px !important;
}
.u-pb60 {
  padding-bottom: 60px !important;
}
.u-pb0 {
  padding-bottom: 0 !important;
}
.u-bg-color {
  background-color: #fff8dc !important;
}
@media screen and (min-width: 769px), print {
  .u-ml60--pc {
    margin-left: 60px !important;
  }
}

@media all and (max-width:767px) { /* SP */
  .products-detail-wrap {
    width: calc((370 / 390) * 100vw);
    margin: calc((20 / 390) * 100vw) auto 0;
  }
  .products-detail-hdg-lv1 {
    font-size: calc((30 / 390) * 100vw);
    padding: calc((30 / 390) * 100vw) 0;
  }
  .products-detail-flex {
    flex-direction: column;
    gap: calc((28 / 390) * 100vw);
  }
  .products-detail-flex-itm-pic {
    width: calc((210 / 390) * 100vw);
  }
  .products-detail-flex-itm-pic-img {
    width: 100%;
    max-height: calc((200 / 390) * 100vw);
  }
  .products-detail-flex-itm-content-txt {
    font-size: calc((16 / 390) * 100vw);
  }
  .products-detail-flex-itm-content-txt + .products-detail-flex-itm-content-txt {
    margin-top: calc((20 / 390) * 100vw);
  }
  .products-detail-flex-itm-content {
    margin-bottom: calc((32 / 390) * 100vw);
  }
  .products-detail-flex-itm-dl {
    margin-bottom: calc((72 / 390) * 100vw);
  }
  .products-detail-flex-itm-dt {
    padding: calc((10 / 390) * 100vw) 0;
    font-size: calc((24 / 390) * 100vw);
    margin-bottom: calc((24 / 390) * 100vw);
  }
  .products-detail-flex-itm-dt span {
    font-size: calc((16 / 390) * 100vw);
  }
  .products-detail-flex-itm-dt-sub {
    font-size: calc((16 / 390) * 100vw);
    padding: calc((10 / 390) * 100vw) 0;
  }
  .products-detail-flex-itm-dd {
    margin-bottom: calc((32 / 390) * 100vw);
    font-size: calc((16 / 390) * 100vw);
  }
  .products-detail-flex.r-between {
    width: 100%;
    margin: 0 auto;
  }
  .products-detail-flex-itm {
    width: 100%;
  }
  .products-detail-flex-itm-allergy-info {
    font-size: calc((16 / 390) * 100vw);
    padding: calc((10 / 390) * 100vw) 0;
  }
  .products-detail-table {
    border-spacing: calc((2 / 390) * 100vw);
    width: 93vw;
    margin: 0 auto;
  }
  .products-detail-table th {
    padding: calc((16 / 390) * 100vw) calc((14 / 390) * 100vw);
    font-size: calc((16 / 390) * 100vw);
    width: calc((127 / 390) * 100vw);
  }
  .products-detail-table td {
    padding: calc((16 / 390) * 100vw) calc((14 / 390) * 100vw);
    font-size: calc((16 / 390) * 100vw);
    width: calc((233 / 390) * 100vw);
  }
  .products-detail-update {
    font-size: calc((16 / 390) * 100vw);
    margin-top: 4vw;
  }
  .products-detail-txt {
    font-size: calc((16 / 390) * 100vw);
  }
  .products-detail-txt + .products-detail-txt {
    margin-top: calc((16 / 390) * 100vw);
  }
  .products-detail-point-btn-wap {
    margin: calc((60 / 390) * 100vw) 0 0;
  }
  .products-detail-point-btn {
    width: 77vw;
    min-height: calc((41 / 390) * 100vw);
    height: auto;
    border-radius: calc((6 / 390) * 100vw);
    border: solid calc((3 / 390) * 100vw) #FD6355;
    font-size: calc((19 / 390) * 100vw);
    padding: 2vw calc((27 / 390) * 100vw) 2vw calc((16 / 390) * 100vw);
  }
  .products-detail-point-btn::after {
    width: calc((6 / 390) * 100vw);
    height: calc((6 / 390) * 100vw);
    border-top: solid calc((2 / 390) * 100vw) #FD6355;
    border-left: solid calc((2 / 390) * 100vw) #FD6355;
    right: calc((14 / 390) * 100vw);
  }
  .products-detail-point-btn:hover {
    background: #fff;
    color: #FD6355 !important;
  }
  .products-detail-point-btn:hover::after {
    border-top: solid 2px #FD6355;
    border-left: solid 2px #FD6355;
  }
  .products-detail-flex-wrap {
    width: 100%;
  }
  .products-result-txt {
    font-size: calc((17 / 390) * 100vw);
    width: calc((370 / 390)* 100vw);
    margin: calc((16 / 390) * 100vw) auto calc((22 / 390) * 100vw);
  }
  .productsListArea + .products-category-list-box-h3 {
    margin-top: calc((40 / 390) * 100vw);
  }
  .allergy-note + .allergy-note {
    margin-top: calc((16 / 390) * 100vw);
  }
  .allergy-note-txt {
    font-size: calc((16 / 390) * 100vw);
  }
  .products-category-list-box-h5 {
    font-size: calc((10 / 390) * 100vw);
    margin-top: calc((8 / 390) * 100vw);
    width: calc((140 / 390)* 100vw);
  }
  .products-category-list-box-txt-s {
    font-size: calc((10 / 390) * 100vw);
    margin-top: calc((4 / 390) * 100vw);
    width: calc((140 / 390)* 100vw);
  }
  .u-mb16 {
    margin-bottom: calc((16 / 390) * 100vw) !important;
  }
  .u-mb30 {
    margin-bottom: calc((30 / 390) * 100vw) !important;
  }
  .u-mt30 {
    margin-top: calc((30 / 390) * 100vw) !important;
  }
  .u-pt60 {
    padding-top: calc((60 / 390) * 100vw) !important;
  }
  .u-pb60 {
    padding-bottom: calc((60 / 390) * 100vw) !important;
  }
  .u-pb30--sp {
    padding-bottom: calc((30 / 390) * 100vw) !important;
  }
}