/* ========================================
  Arrow Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Number} $border - Border
  @param {Color} $color - Color
  ex: @include arrow.arrow(upward, 20px, 20px, 2px, #333);
======================================== */
/* ========================================
  Aspect Ratio Mixin
  @param {Number} $width - Width
  @param {Number} $height - Height
  ex: @include aspect-ratio.aspect-ratio(16, 9);
======================================== */
/* ========================================
  Hover Mixin
  ex: @include hover.hover() {...}
======================================== */
/* ========================================
  Leading Trim Mixin
  @param {Number} $line-height - Line Height
  Note: You can use get-line-height function.
  ex: @include leading-trim.leading-trim(1.6);
======================================== */
/* ========================================
  Breakpoint Variables
  Note: These breakpoints are refered from Bootstrap.
  https://getbootstrap.com/docs/5.0/layout/breakpoints/
  ex: $breakpoints
======================================== */
/* ========================================
  Media Query Mixin
  @param {String} $breakpoint - Class infix like 'sm', 'md'
  Note: Check out a breakpoints file if you want to modify breakpoints.
  ex: @include media-query(md) {...}
======================================== */
/* ========================================
  Triangle Mixin
  @param {String} $direction - Direction
  @param {Number} $width - Width
  @param {Number} $height - Height
  @param {Color} $color - Color
  ex: @include triangle.triangle(upward, 20px, 20px, #333);
======================================== */
/* ========================================
  Underline Mixin
  @param {Color} $color - Color
  @param {Number} $height - Height
  ex: @include underline.underline(#ff6B00, 10px);
======================================== */
/* ========================================
  Visibility Hidden Mixin
  ex: @include visibility-hidden.visibility-hidden();
======================================== */
/* ========================================
  Strip-unit Function
  @param {Number} $number - Number to remove unit
  @return {Number} - Unitless number
  note: You can use this function in other functions and mixins.
  ex: strip-unit(100px); -> 100
======================================== */
/* ========================================
  Get Line Hight Function
  @param {Number} $font-size - Font size with px
  @param {Number} $line-feed - Line feed with no-unit
  @return {Number} $line-height - Line hight
  ex: get-line-height(16); -> 1.5
======================================== */
/* ========================================
  Font Size Variables
======================================== */
/* ========================================
  Get Rem Function
  @param {Number} $font-size - Number to convert px to rem
  @param {Number} $root-font-size - Number to divite target value by root's font size
  @return {Number} $rem - Number with rem unit
  ex: get-rem(16px); -> 1rem
======================================== */
/* ========================================
  Get Vw Function
  @param {Number} $px - Number to convert px to vw
  @param {Number} $viewport - Viewport size
  @return {Number} $vw - Number with vw unit
  ex: get-vw(30px); -> 8vw
======================================== */
/* ========================================
  Z-index Function
======================================== */
/* ========================================
  Color Variables
======================================== */
/* ========================================
  Font Variables
======================================== */
/* ========================================
  Transition Variables
======================================== */
/* ========================================
  Content Width Variables
======================================== */
body:has(.p-page-review) .u-color__bg--base {
  background: transparent !important;
}

.p-page-review {
  padding-top: 20px;
}
.p-page-review .revico-star {
  margin-top: 20px;
}
.p-page-review .revico-star .revico-star-graph {
  background-color: transparent;
  padding: 0;
}
.p-page-review .revico-star .revico-star-graph-wrapper {
  width: 100%;
  justify-content: center;
}
.p-page-review .revico-star .revico-logo {
  display: none !important;
}
.p-page-review #revico-picture {
  margin-top: 20px;
}
.p-page-review #revico-picture .revico-logo {
  display: none !important;
}
.p-page-review .revico-multicomment-top .revico-review-comment-detail--product-name-image {
  flex-shrink: 0;
}
.p-page-review .revico-multicomment-top .revico-review-comment-detail--product-name-image img {
  max-width: 100px !important;
  max-height: 100px !important;
  width: 100px;
  height: auto;
}
.p-page-review .revico-multicomment-top .revico-picture-slide-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.p-page-review .revico-multicomment-top .revico-widget .revico-review-comment-row[data-pickup-review=true] .revico-review-comment-detail::after {
  background: linear-gradient(250deg, #f09897 41.92%, #e6dfc1 88.16%, #f4e0e0 122.37%, #ffc3c1 142.12%);
}
.p-page-review .revico-review-picture-detail--more span {
  background-color: transparent;
}
.p-page-review .revico-common-background-style {
  background-color: transparent;
}
.p-page-review .revico-review-comment-detail--product-name > span {
  display: flex;
}
.p-page-review .revico-review-comment-row-wrapper {
  border-radius: 5px;
}
.p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--action-sns {
  display: flex;
  gap: 5px;
}
.p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail a {
  width: 18px;
}
.p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--action-sns img {
  height: auto;
}
.p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--addition .revico-review-comment-detail--addition-image .revico-picture-slide-back {
  z-index: 1;
}
.p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--reply-comment {
  border-radius: 5px;
}
.p-page-review .revico-multicomment-top .revico-review-comment-detail--staff-recommend--staff-recommend-info--comment-balloon {
  border-radius: 5px;
}
.p-page-review .revico-review-picture-detail--more {
  bottom: -15px;
}

.revico-modal input {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

.revico-modal .revico-modal__inner.revico-picture-modal-product .revico-modal-content .revico-comment-header-modal .revico-comment-filter-wrapper .revico-comment-filter--block-item[name=revico-comment-filter--block-item-star] .revico-comment-filter--block-item-select {
  width: auto !important;
}

.revico-modal .revico-modal__inner.revico-picture-modal-product .revico-modal-content .revico-comment-header-modal .revico-comment-filter-wrapper .revico-comment-filter--block-item .revico-comment-filter--block-item-select {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.revico-modal .revico-star-block .starability-result {
  background-image: url("https://show.revico.jp/img/star_yellow.png");
}

.revico-modal .revico-modal__inner.revico-picture-modal-product .revico-review-comment-detail--comment--content {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.revico-modal .revico-modal__inner.revico-picture-modal-product .revico-modal-content .revico-review-modal-wrapper .revico-review-modal-product-image .revico-review-modal-product-image--main .revico-review-modal-product-image--back {
  right: 5px;
}

.revico-modal .revico-modal__inner.revico-picture-modal-product .revico-modal-content .revico-review-modal-wrapper .revico-review-modal-product-image .revico-review-modal-product-image--main .revico-review-modal-product-image--next {
  left: 5px;
}

.p-page-review__heading-block {
  padding: 0 15px;
}

.p-page-review__heading-lv1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
}

.p-page-review__lead {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  margin-top: 16px;
  color: #333;
}

.p-page-review_bg-container {
  background: linear-gradient(90deg, rgba(255, 244, 215, 0.6) 0%, rgba(250, 251, 239, 0.6) 84.37%, rgba(232, 250, 221, 0.6) 100%);
  padding-top: 20px;
  margin-top: 40px;
}
.p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a,
.p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a {
  border-radius: 5px;
}
.p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item .revico-review-image,
.p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item .revico-review-image {
  border-radius: 5px;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.p-products__description-wrap {
  position: relative;
}

.p-products__description-wrap--has-bg::before {
  content: "";
  position: absolute;
  background-image: url("https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/assets/img/products/bg_products_01_sp.webp");
  background-repeat: no-repeat;
  background-size: cover;
  width: 177px;
  height: 157.17px;
  top: 48px;
  left: -40px;
  opacity: 0.4;
  z-index: -1;
}
.p-products__description-wrap--has-bg::after {
  content: "";
  position: absolute;
  background-image: url("https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/assets/img/products/bg_products_02_sp.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  width: 197.9px;
  height: 382.3px;
  bottom: 0;
  right: 0;
  opacity: 0.4;
  z-index: -1;
}

.p-page-review__tabs {
  margin-top: 30px;
  padding: 0 15px;
}
.p-page-review__tabs .p-tabs__list {
  display: flex;
  border-bottom: 1px solid #C1C1C1;
}
.p-page-review__tabs .p-tabs__item {
  width: 50%;
  color: #C1C1C1;
}
.p-page-review__tabs .p-tabs__item.is-active {
  color: #333;
}
.p-page-review__tabs .p-tabs__item.is-active::after {
  content: "";
  display: block;
  height: 2px;
  background: #333;
  bottom: 1px;
  position: relative;
}
.p-page-review__tabs .p-tabs-list__tab {
  display: block;
  text-align: center;
  padding: 15px;
  width: 100%;
  height: 100%;
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .p-page-review {
    padding-top: 30px;
  }
  .p-page-review .revico-star {
    margin-top: 40px;
  }
  .p-page-review #revico-picture {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1120px;
  }
  .p-page-review .revico-multicomment-top .revico-review-comment-detail--product-name-image img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: 120px;
    height: auto;
  }
  .p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail a {
    width: 30px;
  }
  .p-page-review__heading-block {
    padding: 0;
  }
  .p-page-review_bg-container {
    margin-top: 80px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a,
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a {
    width: 100% !important;
    height: 100% !important;
  }
  .p-products__description-wrap--has-bg::before {
    background-image: url("https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/assets/img/products/bg_products_01_pc.webp");
    width: 535.353px;
    height: 493.353px;
    top: -80px;
    left: -248px;
  }
  .p-products__description-wrap--has-bg::after {
    background-image: url("https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/assets/img/products/bg_products_02_pc.webp");
    width: 679.259px;
    height: 715.814px;
    bottom: -300px;
    right: 0;
  }
  .p-page-review__tabs {
    margin: 55px auto 0;
    padding: 0;
    max-width: 997px;
  }
  .p-page-review__tabs .p-tabs__list {
    justify-content: center;
  }
  .p-page-review__tabs .p-tabs__item {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 208px;
  }
}

@media screen and (max-width: 767px) {
  .p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--action-sns {
    margin: 0 10px 0 0;
  }
  .p-page-review .revico-multicomment-top .revico-review-comment-row-wrapper .revico-review-comment-row .revico-review-comment-detail .revico-review-comment-detail--action {
    justify-content: flex-end;
  }
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child),
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) {
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px !important;
    justify-content: center !important;
    width: 60%;
    max-width: 250px;
    margin: 0 auto;
  }
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item,
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item {
    flex: 1 1 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
  }
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper,
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:only-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a,
  .p-page-review_bg-container .revico-picture-slide-box.revico-horizontal_scroll:has(.revico-picture-slide-item:nth-child(2):last-child) .revico-picture-slide-item .revico-picture-slide-img-wrapper a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
}