/* --------------------------------------------------
 * mixin
 */

// .aspect-ratioが使えないブラウザ用のpolyfill
// --------------------
.aspect-ratio(@width, @height) {
  @supports (aspect-ratio: 1) {
    aspect-ratio: @width / @height;
  }

  @supports not (aspect-ratio: 1) {
    &::before {
      content: '';
      float: left;
      padding-top: (@height / @width * 100% * 100) / 100;
    }

    &::after {
      content: '';
      display: block;
      clear: both;
    }
  }
}

// スマートフォン用フォントサイズ指定
// --------------------
.smartphone-font-size(@font-size) {
  @size: (100 / 770) * @font-size * 1vw;
  font-size: @size;

  @media screen and (min-width: 771px) {
    font-size: (640 / 770) * @font-size * 1px;
  }
}

.primary-header__share .share-nav-pane {
  right: auto;
  left: 10px;
}

// ボタンカスタマイズパターン
// --------------------
.button-line-mute {
  &.mute {
    cursor: default;
    pointer-events: none;
    background: gray;
    box-shadow: 0 0 0 4px gray inset, 0 0 0 6px #5a5a5a inset;
    color: #5a5a5a;
  }
}

// カスタム1
a.button-line.button-custom-1 {
  color: #344249;
  border-radius: 0;
  font-weight: 700;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  background: linear-gradient(
    to bottom,
    rgba(167, 190, 202, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );

  box-shadow: 0 0 0 4px #bbcfd9 inset, 0 0 0 6px #000000 inset;
  &:hover {
    box-shadow: 0 0 0 0px #bbcfd9 inset, 0 0 0 2px #000000 inset;
  }
  // 無効
  .button-line-mute();
}

:root {
  --loupe-icon-color: #577787;
  --game-icon-color: #523b1b;
  --book-icon-color: #3f1516;
  --music-icon-color: #154015;
  --goods-icon-color: #1c1f54;
}

.content {
  color: #fff;
  background-color: #000000;
}

.decorative-bg,
.decorative-2b-bg {
  background-color: #0f1316;
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: repeat-y;
  .smartphone & {
    background-image: url(../img/feature-bg-sm.png);
  }
  .userweb & {
    background-image: url(../img/feature-bg-md.png);
  }
}
.decorative-2b-bg {
  background-repeat: no-repeat, repeat-y;
  .smartphone & {
    background-image: url(../img/2b-bg-sm.png), url(../img/feature-bg-sm.png);
  }
  .userweb & {
    background-image: url(../img/2b-bg-md.png), url(../img/feature-bg-md.png);
  }
}

.content .text-strong {
  //color: #b6daec;
  color: #fff;
}
.content .text-link,
.content .text-link:visited {
  color: #97b5c4;
}

// 特徴
// --------------------
.feature-title {
  margin-right: auto;
  margin-left: auto;
  .smartphone & {
    width: ~'calc((100 / 770) * 322%)';
  }
  .userweb & {
    width: 217px;
  }
}
.feature-items-pane {
  .userweb & {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
  }
  li {
    display: block;
    .smartphone & {
      &:nth-of-type(n + 2):not(:last-of-type) {
        margin-top: 3rem;
      }
    }
    .userweb & {
      width: calc(50% - 40px);
    }
    img {
      width: 100%;
    }
  }
}

// 商品
// --------------------
.product {
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #e8e8e8;
  .userweb & {
    background-image: url(../img/slide-bg-md.png);
  }

  // 大商品
  // --------------------
  .product-slide {
    margin-right: auto;
    margin-left: auto;
    .userweb & {
      width: 550px;
    }
    img {
      width: 100%;
    }
    .swiper-wrapper {
      align-items: stretch;
    }
    .swiper-slide {
      align-items: center;
      justify-content: stretch;
      display: flex;
      aspect-ratio: 1/1;
      background-color: #fff;
      a {
        display: flex;
        aspect-ratio: 1/1;
        width: 100%;
      }
    }
    .lightbox-link {
      aspect-ratio: 1 / 1;
      align-items: center;
      display: flex;
    }
  }

  // サムネイル
  // --------------------
  .product-navbox {
    position: relative;
    user-select: none;
    // スライドコンテナ
    // --------------------
    .swiper-container {
      overflow: hidden;
      margin-right: auto;
      margin-left: auto;
    }
    .smartphone & .swiper-container {
      width: 84%;
    }
    .userweb & .swiper-container {
      width: 790px;
    }

    .swiper-slide {
      cursor: pointer;
      align-items: center;
      display: flex;
      position: relative;
      aspect-ratio: 1/1;
      background-color: #fff;
      img {
        width: 100%;
        position: relative;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        background-color: #fff;
        opacity: 0;
        transition: opacity 0.2s;
      }
      &.swiper-slide-active::after,
      &:hover::after {
        opacity: 0.4;
      }
    }

    .swiper-button-prev,
    .swiper-button-next {
      background-repeat: no-repeat;
      background-position: center center;
      &::after {
        content: '';
      }
    }
    .swiper-button-prev {
      .userweb & {
        left: 50px;
      }
      background-image: url(../img/angle-l.png);
    }
    .swiper-button-next {
      .userweb & {
        right: 50px;
      }
      background-image: url(../img/angle-r.png);
    }
  }
}

// 注文
// --------------------
.order {
  .order-title {
    .smartphone-font-size(60);
    .userweb & {
      font-size: 30px;
    }
  }
}

.movie-title {
  margin-right: auto;
  margin-left: auto;
  img {
    width: 100%;
  }
  .smartphone & {
    width: ~'calc((100 / 770) * 218%)';
  }
  .userweb & {
    width: 147px;
  }
}

.related-items-title {
  width: ~'calc((100 / 770) * 236%)';
  margin-right: auto;
  margin-left: auto;
  img {
    width: 100%;
  }
  .smartphone & {
    width: ~'calc((100 / 770) * 236%)';
  }
  .userweb & {
    width: 159px;
  }
}

.marchandise-box__name a,
.marchandise-box__name a:active {
  color: #abeae2 !important;
}