/* ========================================
  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
======================================== */
.i-list-slider__slide {
  display: block;
  overflow: hidden;
  padding: 0 5px;
  margin: 0;
}

.slick-prev.i-list-slider__prev {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #a7a7a7;
  border-radius: 50%;
  top: 27%;
  top: 29%;
  left: -2%;
  transform: translateY(0);
  z-index: 1;
  box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.16);
  transition: opacity 0.3s ease;
  border: none;
}
.slick-prev.i-list-slider__prev:hover {
  opacity: 0.8;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .slick-prev.i-list-slider__prev {
    left: -0.9%;
    top: 29%;
  }
}
.slick-prev.i-list-slider__prev::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
}

.slick-next.i-list-slider__next {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #a7a7a7 !important;
  border-radius: 50%;
  top: 27%;
  right: -2%;
  transform: translateY(0);
  z-index: 1;
  box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.16);
  transition: opacity 0.3s ease;
  border: none;
}
.slick-next.i-list-slider__next:hover {
  opacity: 0.8;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .slick-next.i-list-slider__next {
    right: -0.9%;
    top: 29%;
  }
}
.slick-next.i-list-slider__next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%) rotate(225deg);
  border-radius: 2px;
}

.i-list__mv {
  width: 100%;
  margin-inline: auto;
}

.i-list__mv--all {
  width: 100%;
  margin-inline: auto;
}

.i-list__mv-image {
  width: 100%;
  height: auto;
}

main .i-list__heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  margin-top: 42px;
}

.i-list__text {
  line-height: 28px;
  word-break: auto-phrase;
  text-align: center;
  margin-top: 30px;
}

.i-list__point-list {
  margin-top: 24px;
}

.i-list__point-item {
  border-radius: 5px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.15);
  width: 79%;
  margin-inline: 10px;
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .i-list__point-item {
    margin-inline: 8px;
  }
}
@media screen and (min-width: 768px) {
  .i-list__point-item--2 {
    width: 50%;
  }
}
.i-list__point-title {
  color: #666;
  font-weight: 700;
  line-height: 24px;
}

.i-list__point-title span {
  color: #000;
  font-size: 18px;
  line-height: 26px;
}

@media screen and (min-width: 768px) {
  .i-list__point-contents {
    display: flex;
    gap: 16px;
  }
}
.i-list__point-image {
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.i-list__point-text {
  color: #000;
  font-size: 14px;
  line-height: 24px;
  margin-top: 16px;
}

.i-list__point-list .slick-track {
  display: flex;
}

.i-list__point-list .slick-slide {
  height: auto;
}

@media screen and (min-width: 768px) {
  .i-list__point-list .slick-prev.i-list-slider__prev,
  .i-list__point-list .slick-next.i-list-slider__next {
    top: 46%;
  }
}
ul.js-i-list-slider > li:not(:first-child) {
  display: none;
}

@media screen and (min-width: 768px) {
  .i-list__point-list:has(.i-list__point-item--2) {
    display: flex;
  }
  .i-list__point-list:has(.i-list__point-item--2) picture {
    width: 58%;
  }
  .i-list__point-list:has(.i-list__point-item--2) .i-list__point-text {
    flex: 1;
  }
  .i-list__point-list:has(.i-list__point-item--2) .i-list__point-item {
    margin-inline: 5px;
  }
}
.block-genre-page.is-outlet .outlet-banner {
  padding-inline: 10px;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .block-genre-page.is-outlet .outlet-banner {
    padding-inline: 0;
    margin-top: 0;
  }
}
.block-genre-page.is-outlet .repro-167.block-goods-list--narrowdown {
  padding: 0;
  padding-bottom: 36px;
  background-color: #fff;
  margin-top: 24px;
  margin-bottom: 0;
}
.block-genre-page.is-outlet .repro-167.block-goods-list--narrowdown dt {
  display: none;
}
.block-genre-page.is-outlet .block-goods-list--narrowdown.is-category dt {
  display: block;
}
.block-genre-page.is-outlet .repro-167.block-goods-list--narrowdown dd {
  overflow: auto;
}
.block-genre-page.is-outlet .repro-167 .block-goods-list--narrowdown-inner {
  margin-bottom: 0;
}
.block-genre-page.is-outlet .repro-167 a {
  color: #9c0b0b;
  border: 1px solid #9c0b0b;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  padding: 8px;
  margin: 0 4px 4px 0;
}

/*# sourceMappingURL=style.css.map */