/*====================================================================
    商品情報
====================================================================*/
html{
  background: #F5F2ED;
  color: #463A3E;
}

.main-product{
  max-width: 1200px;
  margin-inline: auto;
  >.container{
    max-width: initial;
    padding: initial;
  }
  .page__sub-header{
    margin-block: 0.5em 3em;
    color: var(--text-color);
    font-size: min(calc((20/640)*100vw),12px);
    .breadcrumb{
      overflow-x: auto;
      li{
        white-space: nowrap;
      }
    }
  }
  @media (min-width: 641px){
    padding-inline: min(calc((20/640)*100vw),20px);
  }
}

[id^="product-info-"]{
  color: #463A3E;
  p{
    margin: initial;
  }
  
  .product-block-list{
    position: relative;

    .product-block-list__wrapper{
      @media screen and (min-width: 1000px) {
        /* 1200px - 右コンテンツ幅 - 間隔 */
        width: calc(100% - 540px - 60px);
      }
      @media screen and (min-width: 641px) and (max-width: 999px) {
         width: calc(100% - 50% - 8%);
      }
    }

    .product-block-list__item{
      background: initial;
      .card{
        background: initial;
        border: none;
        box-shadow: none;
        .card__section{
          padding: initial;
        }
      }


      &.product-block-list__item--gallery{
        .product-gallery--with-thumbnails{
          gap: 15px;
          .product-gallery__carousel-wrapper{
            margin: initial;
            .product-gallery__carousel{
              margin: initial;
              .product-gallery__carousel-item{
                padding: initial;
              }
            }
          }
          .scroller{
            align-self: stretch;
            @media screen and (min-width: 641px) and (max-width: 999px) {
              margin: initial;    
            }
            
            .scroller__inner{
              padding-block-end: initial;
              margin-block-end: initial;
              scrollbar-width: none;
              overflow-x: auto;
              overflow-y: hidden;
            }
            .product-gallery__thumbnail-list{
              display: flex;
              gap: 5px 0;
              width: max-content;
              margin: initial;
              overflow: auto;

              a{
                width: min(calc((120/640)*100vw),90px);
                max-width: min(calc((120/640)*100vw),90px);
                margin: initial;
              }

              @media screen and (min-width: 1000px) {
                /* PC */
                flex-direction: column;
                max-height: 500px;
                a{
                  width: 90px;
                  max-width: 90px;
                }
              }
              @media screen and (min-width: 641px) and (max-width: 999px) {

              }
              @media screen and (max-width: 640px) {
                /* SP */
                padding-inline: min(calc((20/640)*100vw),20px);
                margin-block-start: min(calc((20/640)*100vw),20px);
                margin-block-end: min(calc((30/640)*100vw),30px);
              }
            }
          }
        }
      }

      &.product-block-list__item--info{
        /* 商品名、販売元、価格など */
        @media screen and (min-width: 1000px) {
          width: 540px;
        }
        @media screen and (min-width: 641px) and (max-width: 999px) {
          width: 50%;
          height: 100%;
          position: absolute;
          top: 0px;
          right: 0px;
          .card--collapsed{
            margin-block-start: initial !important;
            position: sticky;
            top: 0;
          }
        }
        @media screen and (max-width: 999px) {
          /* TAB・SP */
          padding-inline: min(calc((20/640)*100vw),20px);
        }
        .product-form{
          margin: initial;
        }
        .product-meta{
          margin: initial;
          .product-meta__heading{
            margin-block-end: min(calc((45/640)*100vw),35px);
            h1{
              margin-block-end: min(calc((20/640)*100vw),10px);
              color: #463A3E;
              font-size: min(calc((28/640)*100vw),18px);
              font-weight: bold;
              line-height: 1.6;
            }
          }
          .product-meta__reference{
            display: flex;
            gap: 0 2em;
            .product-meta__vendor{
              color: #463A3E;
              font-size: min(calc((22/640)*100vw),12px);
              font-weight: bold;
              text-decoration: underline;
               @media screen and (min-width: 1000px) {
                transition: ease 0.3s;
                &:hover{
                  text-decoration: none;
                  opacity: 0.8;
                }
               }
            }
            .product-meta__sku{
              font-size: min(calc((22/640)*100vw),12px);
              font-weight: bold;
              &:before{
                content: none;
              }
            }
          }
          .product-meta__label-list:not(:has(.product-label:not([style*="display: none"]))) {
            display: none;
          }
        }

        .product-info__block-item{

          &[data-block-id="variant_selector"]{
            /* 価格〜数量 */
            .product-form__info-list{
              display: block;
              margin: initial;
              border-spacing: initial;

              .product-form__info-item{
                display: block;
                .product-form__price-policy{
                  margin-block-start: min(calc((25/640)*100vw),15px);
                  button{
                    font-size: min(calc((26/640)*100vw),16px);
                  }
                }
              }

              .product-form__info-content{
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: max-content;
                .price-list{
                  grid-row: 1/2;
                  .price{
                    color: #463A3E;
                    font-size: min(calc((34/640)*100vw),24px);
                    font-weight: bold;
                  }
                }
                .product-form__price-info{
                  grid-row: 1/2;
                  margin-block: initial;
                }
                .product-form__price-tax{
                  align-self: end;
                  margin-inline-start: 1em;
                  font-size: min(calc((24/640)*100vw),14px);
                  font-weight: bold;
                  line-height: 1.3;
                }
              }

              .product-form__rating{
                margin-block: min(calc((45/640)*100vw),35px);
                a{
                  &:link,
                  &:visited,
                  &:hover,
                  &:active,
                  &:focus {
                    color: #463A3E; /* 状態が変わっても色を維持 */
                  }
                }
                .rating{
                  .rating__stars{
                    .rating__star--full{
                      width: min(calc((30/640)*100vw),20px);
                      height: min(calc((30/640)*100vw),20px);
                      color: #463A3E;
                    }
                    .rating__star--empty {
                      width: min(calc((30/640)*100vw),20px);
                      height: min(calc((30/640)*100vw),20px);
                      color: rgba(var(--text-color-rgb), .4);
                    }
                  }
                  .rating__caption{
                    font-size: min(calc((26/640)*100vw),16px);
                    font-weight: bold;
                    line-height: 1.6;
                    text-decoration: underline;
                  }
                }
              }

              .product-form__info-irisu{
                .product-form__info-irisulist{
                  list-style: none;
                  li{
                    min-width: calc((100% - 2.0em)/5);
                    margin-block-start: min(calc((10/640)*100vw),10px);
                    a{
                      display: inline-flex;
                      align-items: center;
                      padding: 0.5em 1.0em;
                      background: #ffffff;
                      border: solid 1px #D9D9D9;
                      border-radius: 8px;
                      font-size: min(calc((22/640)*100vw),12px);
                      line-height: 1.5;
                      transition: ease 0.3s;
                      @media screen and (min-width: 1000px) {
                        &:hover{
                          border-color: #463A3E;
                        }
                      }
                    }
                    &.is-handle-active{
                      a{
                        background: #AF7F44;
                        border-color: #AF7F44;
                        color: #ffffff;
                      }
                    }
                    &:first-child{
                      margin-block-start: initial;
                    }
                  }
                }
              }

              .product-form__info-item--quantity{
                margin-block: min(calc((45/640)*100vw),35px);
                label{
                  padding: initial;
                  color: #463A3E;
                  font-size: min(calc((28/640)*100vw),18px);
                  line-height: 1.6;
                }
                .product-form__info-content{
                  padding: initial;
                  .quantity-selector{
                    background: #ffffff;
                    border-width: 2px;
                    border-radius: 8px;
                    .quantity-selector__button{
                      color: #463A3E;
                    }
                    .quantity-selector__value{
                      border-left: initial;
                      border-right: initial;
                      box-shadow: initial;
                      color: #463A3E;
                    }
                  }
                }
              }
            }
          }

          .product-form__buy-buttons{
            .product-form__payment-container {
              margin: initial;
              @media screen and (max-width: 999px) {
                gap: min(calc((10/640)*100vw),10px);
              }
              /* 直下の子要素が1つだけのとき */
              > :only-child {
                width: 100%;
                margin: initial;
              }
            }

          }

        }
      }

      &.product-block-list__item--description{
        @media screen and (max-width: 640px) {
          /* SP */
          padding-inline: min(calc((20/640)*100vw),20px);
        }

        .product-content-list {
          margin-bottom: 0; 
          padding-left: 0;
          list-style: none;

          .product-content-list__item {
            display: grid;
            grid-template-columns: 7em minmax(0, 1fr);
            border-bottom: solid 1px #D9D9D9;
            @media screen and (min-width: 641px) and (max-width: 999px) {
              grid-template-columns: initial;    
            }

            &:nth-child(1){
              border-top: solid 1px #D9D9D9;
            }

            dt{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-block: min(calc((15/640)*100vw),15px);
                padding-inline: min(calc((10/640)*100vw),10px);
                background: #F9F6ED;
                font-size: min(calc((22/640)*100vw),14px);
                font-weight: bold;
                line-height: 1.6;
            }

            dd{
                padding-block: min(calc((15/640)*100vw),15px);
                padding-inline: min(calc((10/640)*100vw),10px);
                margin-inline-start: initial;
                background: #ffffff;
                font-size: min(calc((22/640)*100vw),14px);
                line-height: 1.6;
                overflow-wrap: anywhere;
            }

            .product-content-list__item-notion{
              list-style: none;
              li{
                padding-inline-start: 1em;
                list-style: none;
                text-indent: -1em;
              }
            }
          }
        }
      }

    }

  }
}


.product-description--master{
  container-type: inline-size;
  max-width: 1125px;
  padding-inline: min(calc((20 / 640) * 100vw), 20px);
  margin-block-start: min(calc((100/640)*100vw),100px);
  margin-block-end: min(calc((100/640)*100vw),100px);
  margin-inline: auto;

  header{
    margin-block-end: min(calc((35/640)*100vw),35px);
    h2{
      padding-inline-start: 1em;
      font-size: min(calc((30/640)*100vw),26px);
      font-weight: bold;
      line-height: 1.3em;
      position: relative;
      &::before{
        content: "";
        display: inline-block;
        width: 5px;
        height: 100%;
        background: #DAA75F;
        position: absolute;
        top: calc((1.3em - 100%)/2);
        left: 0;
      }
    }
  }

  .product-description__body{
    padding: min(calc((40/640)*100vw),30px);
    background: #FFFFFF;
    border-radius: min(calc((15/640)*100vw),15px);

    h3{
      margin-block-end: min(calc((20/640)*100vw),20px);
      font-size: min(calc((36/640)*100vw),32px);
      font-weight: bold;
      line-height: 1.8;
    }

    .product-description__image{
      margin-block-end: min(calc((20/640)*100vw),20px);
      img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: min(calc((8/640)*100vw),8px);
      }
    }

    .product-description__text{
      font-size: min(calc((26/640)*100vw),20px);
      line-height: 1.8;
    }

    @container (min-width: 641px) {
      display: grid;
      grid-template-columns: 1fr min(calc((530/1125)*100vw),530px);
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "image title"
        "image text";
      gap: 15px min(calc((30/1125)*100vw),30px);

      .product-description__image {
        grid-area: image;
        margin-block-end: 0;
      }

      h3 {
        grid-area: title;
        margin-block-end: 0;
        line-height: 1.8;
      }

      .product-description__text {
        grid-area: text;
        line-height: 1.8;
      }
    }

  }

}

.product-description--handle{
  max-width: 1200px;
  padding-inline: min(calc((20 / 640) * 100vw), 20px);
  margin-block-start: min(calc((100/640)*100vw),100px);
  margin-block-end: min(calc((100/640)*100vw),100px);
  margin-inline: auto;
}

.section-review{
  max-width: 1125px;
  padding-inline: min(calc((20 / 640) * 100vw), 20px);
  margin-block-start: min(calc((100/640)*100vw),100px);
  margin-block-end: min(calc((100/640)*100vw),100px);
  margin-inline: auto;

  header{
    margin-block-end: min(calc((35/640)*100vw),35px);
    h2{
      padding-inline-start: 1em;
      font-size: min(calc((30/640)*100vw),26px);
      font-weight: bold;
      line-height: 1.3em;
      position: relative;
      &::before{
        content: "";
        display: inline-block;
        width: 5px;
        height: 100%;
        background: #DAA75F;
        position: absolute;
        top: calc((1.3em - 100%)/2);
        left: 0;
      }
    }
  }

  &.jdgm-widget-review{

    .jm-review-widget{
      &.jm-review-widget--sidebar-header{
        padding-block: initial;
        .jm-review-widget__header-and-body{
          @media screen and (min-width: 1000px) {
            gap: 0 80px;
          }
        }
      }

      .jm-review-widget-sidebar-header__sidebar{
        .jm-average-rating-display{
          .jm-text:nth-child(1){
            font-size: min(calc((38/640)*100vw),28px);
          }
        }
      }

      .jm-review-widget__body{
        .jm-review-item:last-child{
          padding-block-end: initial;
          border-block-end: initial;
        }
      }

      .jm-review-widget-sidebar-header__action-buttons{
        @media screen and (max-width: 999px) {
          width: 70%;
          margin-block-start: min(calc((20/640)*100vw),20px);
          margin-inline: auto;
        }
      }

      .jm-histogram{
        font-size: min(calc((22/640)*100vw),12px);
        @media screen and (max-width: 999px) {
          width: 70%;
          margin-block-start: min(calc((20/640)*100vw),20px);
          margin-inline: auto;
        }

        .jm-histogram-row{
          &+.jm-histogram-row{
            @media screen and (max-width: 999px) {
              margin-block-start: min(calc((10/640)*100vw),10px);
            }
          }
        }
      }

      .jm-filters__buttons{
        font-size: 14px;
        .jm-sort-filter__icon{
          svg{
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }

}