@charset "UTF-8";
/* =====================
	製品紹介ページ
 ======================= */

/** ------------------------ 一覧 ------------------------ **/

/** ------------------------ product ------------------------ **/
.product {
  margin-bottom: 7.81%;
}

.product .scatter-plot-wrapper {
  background-color: var(--c_white);
  padding: 2.6% 0;
  margin-bottom: 5.21%;
}

.product .scatter-plot-ttl {
  font-size: 250%;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  margin-bottom: 2.17%;
}

.product .scatter-plot {
  width: 54%;
  margin: 0 auto;
}

.product .product-cat-ttl {
  font-size: 300%;
  font-weight: normal;
  padding-bottom: 0.08em;
  border-bottom: 1px solid var(--c_text);
  margin-bottom: 4.17%;
}

.product .product-list {
  /* font-family: var(--font_Noto_Sans_JP); */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5em 3em;
}

.product .product-img {
  aspect-ratio: 1;
  margin-bottom: 1em;
}

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

.product .product-ttl {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.2em;
}

.product .volume-container {
  font-size: 75%;
  display: flex;
  justify-content: center;
  column-gap: 1em;
}

/** ------------------------ kihei ------------------------ **/
.product .kihei {
  margin-bottom: 10.25%;
}

.product .kihei .product-cat + .product-cat {
  margin-top: 10.25%;
}

/** ------------------------ 詳細 ------------------------ **/

/** ------------------------ product-single ------------------------ **/
.product-single {
  margin: 7.19% 0 7.81%;
}

.product-single .product-ttl,
.product-single .about-ttl,
.product-single .taste .taste-ttl,
.product-single .product-info .product-info-ttl,
.product-single .temperature .temperature-ttl,
.product-single .recommended-dishes .recommended-dishes-ttl {
  font-size: 250%;
  font-weight: normal;
  line-height: 1;
  margin-bottom: 0.76em;
}

.product-single .product-article-top {
  display: flex;
  align-items: flex-start;
  column-gap: 1em;
  margin-bottom: 2.5%;
}

.product-single .product-overview {
  flex: 1;
}

.product-single .product-img {
  width: 33.33%;
}

.product-single .product-description {
  /* font-family: var(--font_Noto_Sans_JP); */
  margin-bottom: 1.5em;
}

.product-single .srp-ttl {
  /* font-family: var(--font_Noto_Sans_JP); */
  font-weight: bold;
}

.product-single .srp-list {
  /* font-family: var(--font_Noto_Sans_JP); */
  display: flex;
  flex-direction: column;
}

.product-single .srp-item {
  display: flex;
}

.product-single .volume {
  width: 8em;
}

.product-single .btn-online-shop {
  margin: 0 auto 8.33%;
}

.product-single .about-txt {
  /* font-family: var(--font_Noto_Sans_JP); */
  margin-bottom: 8.33%;
}

.product-single .details {
  padding: 2.6% 0;
  background-color: var(--c_white);
}

.product-single .details-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-single .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 2.5em;
}

.product-single .btn-container .btn-online-shop {
  margin: 0;
}

.product-single .btn-product {
  padding: 0.85em 1.35em 0.7em 3.6em;
}

/** ------------------------ taste ------------------------ **/

.product-single .taste {
  margin-bottom: 4.17%;
}

.product-single .taste .taste-ttl {
  text-align: center;
}

.product-single .taste .scatter-plot {
  width: 54%;
  margin: 0 auto;
}

/** ------------------------ product-info ------------------------ **/
.product-single .product-info {
  width: 47.25%;
}

.product-single .product-info .product-info-list {
  /* font-family: var(--font_Noto_Sans_JP); */
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c_text);
  border-left: 1px solid var(--c_text);
  margin-bottom: 1.76%;
}

.product-single .product-info .product-info-list dt,
.product-single .product-info .product-info-list dd {
  border-bottom: 1px solid var(--c_text);
  border-right: 1px solid var(--c_text);
  padding: 0.75em 1em 0.75em 2.5em;
}

.product-single .product-info .note {
  /* font-family: var(--font_Noto_Sans_JP); */
}

/** ------------------------ temperature ------------------------ **/
.product-single .temperature {
  width: 47.25%;
}

.product-single .temperature .temperature-chart {
  background-color: #dddddd;
  padding: 2em;
  aspect-ratio: 567 / 180;
}

.product-single .temperature .temperature-chart-list {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.product-single .temperature .temperature-chart-list::before {
  content: "";
  width: 88%;
  height: 1px;
  background-color: var(--c_text);
  position: absolute;
  top: 0.8em;
  left: 7%;
}

.product-single .temperature .temperature-chart-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.product-single .temperature .evaluation-img {
  width: 1.5em;
  position: relative;
  z-index: 10;
}

.product-single .temperature .evaluation-img img {
  width: 100%;
}

/** ------------------------ recommended-dishes ------------------------ **/
.product-single .recommended-dishes {
  margin: 8.33% 0 6.67%;
}

.product-single .recommended-dishes .recommended-dishes-container {
  display: flex;
  align-items: flex-start;
  column-gap: 1em;
}

.product-single .recommended-dishes .recommended-dishes-list-container {
  flex: 1;
}

.product-single .recommended-dishes .recommended-dishes-list {
  font-size: 150%;
  line-height: 2.33;
}

.product-single .recommended-dishes .recommended-dish-img {
  width: 48.83%;
}

/** -------------------- タブレット -------------------- **/
@media (max-width: 1280px) {
  /** ------------------------ 詳細 ------------------------ **/

  /** ------------------------ product-single ------------------------ **/
  .product-single .details-container {
    flex-direction: column;
    align-items: center;
    row-gap: 50px;
  }

  /** ------------------------ product-info ------------------------ **/
  .product-single .product-info {
    width: 100%;
    max-width: 500px;
  }

  /** ------------------------ temperature ------------------------ **/
  .product-single .temperature {
    width: 100%;
    max-width: 500px;
  }
}

/** -------------------- スマホ -------------------- **/
@media (max-width: 699px) {
  /** ------------------------ 一覧 ------------------------ **/

  /** ------------------------ product ------------------------ **/
  .product {
    margin-bottom: 50px;
  }

  .product .scatter-plot-wrapper {
    padding: 25px 0;
    margin-bottom: 100px;
  }

  .product .scatter-plot-ttl {
    font-size: 25px;
    margin-bottom: 25px;
  }

  .product .scatter-plot {
    width: 100%;
  }

  .product .product-list {
    grid-template-columns: 300px;
    justify-content: center;
  }

  .product .product-cat-ttl {
    font-size: 25px;
    margin-bottom: 25px;
  }

  /** ------------------------ kihei ------------------------ **/
  .product .kihei {
    margin-bottom: 50px;
  }

  .product .kihei .product-cat + .product-cat {
    margin-top: 50px;
  }

  /** ------------------------ 詳細 ------------------------ **/

  /** ------------------------ product-single ------------------------ **/
  .product-single {
    margin: 50px 0 50px;
  }

  .product-single .product-ttl,
  .product-single .about-ttl,
  .product-single .taste .taste-ttl,
  .product-single .product-info .product-info-ttl,
  .product-single .temperature .temperature-ttl,
  .product-single .recommended-dishes .recommended-dishes-ttl {
    font-size: 25px;
    margin-bottom: 25px;
  }

  .product-single .product-article-top {
    flex-direction: column;
    align-items: center;
    row-gap: 25px;
    margin-bottom: 50px;
  }

  .product-single .product-img {
    width: 100%;
    max-width: 300px;
  }

  .product-single .btn-online-shop {
    margin-bottom: 100px;
  }

  .product-single .about-txt {
    margin-bottom: 50px;
  }

  .product-single .details {
    padding: 50px 0;
  }

  .product-single .details-container {
    row-gap: 100px;
  }

  .product-single .btn-container {
    flex-direction: column;
    row-gap: 25px;
  }

  /** ------------------------ taste ------------------------ **/
  .product-single .taste {
    margin-bottom: 100px;
  }

  .product-single .taste .scatter-plot {
    width: 100%;
  }

  /** ------------------------ product-info ------------------------ **/
  .product-single .product-info .product-info-list dt,
  .product-single .product-info .product-info-list dd {
    padding: 0.75em 0.5em;
  }

  /** ------------------------ temperature ------------------------ **/
  .product-single .temperature .temperature-chart {
    padding: 1em;
  }

  /** ------------------------ recommended-dishes ------------------------ **/
  .product-single .recommended-dishes {
    margin: 50px 0;
  }

  .product-single .recommended-dishes .recommended-dishes-container {
    flex-direction: column;
    row-gap: 25px;
  }

  .product-single .recommended-dishes .recommended-dishes-list-container {
    width: 100%;
  }

  .product-single .recommended-dishes .recommended-dishes-list {
    font-size: 20px;
  }

  .product-single .recommended-dishes .recommended-dish-img {
    width: 100%;
  }
}