/* --------------------------------------------------
 * 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;
  }
}

// ボタンカスタマイズパターン
// --------------------
// 無効
.button-shadow-mute {
  &.mute {
    pointer-events: none;
    background: gray;
    box-shadow: 0px 8px rgba(0, 0, 0, 0.8);
    color: #5a5a5a;
    .userweb & {
      box-shadow: 0px 4px rgba(0, 0, 0, 0.8);
    }
  }
}

.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;
  }
}

.button-hexa-mute {
  &.mute {
    pointer-events: none;
    filter: drop-shadow(0 4px 0px rgba(0, 0, 0, 0.8));
    span {
      color: #5a5a5a;
      background: gray;
    }
  }
}

// カスタム1
a.button-line.button-custom-1 {
  background-color: #ce0160;
  box-shadow: 0 0 0 4px #ce0160 inset, 0 0 0 6px #ffc955 inset;
  &:hover {
    box-shadow: 0 0 0 0px #ce0160 inset, 0 0 0 2px #ffc955 inset;
  }
  // 無効
  .button-line-mute();
}

// カスタム2(上書き)
a.button-shadow.button-custom-2 {
  background: linear-gradient(
    to right,
    rgba(48, 48, 48, 1) 0%,
    rgba(118, 118, 118, 1) 50%,
    rgba(48, 48, 48, 1) 100%
  );
  box-shadow: 0px 8px #4f4f4f;
  .userweb & {
    box-shadow: 0px 4px #4f4f4f;
    width: 500px;
  }
  .smartphone & {
    width: min(100vw * (500/770), 500px);
  }
  &:hover {
    box-shadow: 0 0;
  }
  // 無効
  .button-shadow-mute();
}
// カスタム5(新規)
a.button-shadow.button-custom-5 {
  background: linear-gradient(
    to right,
    rgba(51, 39, 157, 1) 0%,
    rgba(100, 42, 157, 1) 50%,
    rgba(51, 39, 157, 1) 100%
  );
  box-shadow: 0px 8px #120a5f;
  .userweb & {
    box-shadow: 0px 4px #120a5f;
    font-size: 26px;
    width: 500px;
  }
  .smartphone & {
    width: min(100vw * (500/770), 500px);
  }
  &:hover {
    box-shadow: 0 0;
  }
  // 無効
  .button-shadow-mute();
}

// カスタム3
a.button-line.button-custom-3 {
  background: linear-gradient(
    to bottom,
    rgba(44, 99, 131, 1) 0%,
    rgba(44, 99, 131, 1) 30%,
    rgba(171, 39, 49, 1) 100%
  );
  box-shadow: 0 0 0 4px #2c6383 inset, 0 0 0 6px #4a88a6 inset;
  &:hover {
    box-shadow: 0 0 0 0px #2c6383 inset, 0 0 0 2px #4a88a6 inset;
  }
  // 無効
  .button-line-mute();
}

// カスタム4
a.button-hexa-shadow.button-custom-4 {
  filter: drop-shadow(0 8px 0px #5b4112);
  .userweb & {
    filter: drop-shadow(0 4px 0px #5b4112);
  }
  span {
    background: linear-gradient(
      to right,
      rgba(194, 143, 49, 1) 0%,
      rgba(104, 78, 35, 1) 100%
    );
  }
  &:hover {
    filter: drop-shadow(0 0 0 #5b4112);
    span {
      transform: translateY(4px);
    }
  }
  // 無効
  .button-hexa-mute();
}

/* 既存の上書き */
.content-box__head {
  background-color: #527879;
}
.video-button::after,
.video-button--mute::after {
  display: none;
}
.order-button-pane--2-cols {
  justify-content: center;
}

/* 新規クラス */
.color-green {
  color: #527879;
}
.catch-copy {
  font-feature-settings: "palt";
  font-weight: bold;
  line-height: 1.3;
  text-align: center;

  .userweb & {
    font-size: 44px;
  }
}

// h3 {
//   .userweb & {
//     font-size: 34px;
//   }
// }

.head-sub {
  background-color: #668f90;
  color: #ffffff;
  text-align: center;
  width: 100%;

  .userweb & {
    padding: 20px;
  }
  .smartphone & {
    padding: min(100vw * (30/770), 30px);
  }
}

.item-detail {
  display: flex;
  flex-direction: column;

  .userweb & {
    margin-left: auto;
    margin-right: auto;
    width: 323px;
  }
  .smartphone & {
    width: min(100vw * (320/770), 320px);
  }

  &:nth-of-type(n+3) {
    .userweb & {
      margin-top: 50px;
    }
    .smartphone & {
      margin-top: min(100vw * (50/770), 50px);
    }
  }

  &-flex-wrapper {
    display: flex;
    flex-wrap: wrap;

    .smartphone & {
      justify-content: space-between;
    }
  }

  &__name {
    color: #527879;
    font-weight: bold;
    line-height: 1.3;

    .userweb & {
      font-size: 24px;
    }
  }

  &__price,
  &__text {
    .userweb & {
      font-size: 14px;
    }
  }

  .order-button-pane--single {
    .order-button-pane__item {
      width: 100% !important;
    }
  }
}

/* Swiper */
.slider-wrapper {
  position: relative;

  // 左右矢印
  .swiper-button-prev,
  .swiper-button-next {
    .userweb & {
      height: 47px;
      top: 44%;
      width: 47px;
    }
    .smartphone & {
      height: min(100vw * (94/770), 94px);
      top: 44%;
      width: min(100vw * (94/770), 94px);
    }

    &::after {
      font-size: 0;
    }
  }
  
  .swiper-button-prev {
    .userweb & {
      background: url(../img/slider/arrow-md.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      left: 10px;
    }
    .smartphone & {
      background: url(../img/slider/arrow-sm.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      left: 2%;
    }
  }

  .swiper-button-next {
    .userweb & {
      background: url(../img/slider/arrow-md.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      right: 10px;
      transform: rotate(180deg);
    }
    .smartphone & {
      background: url(../img/slider/arrow-sm.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      right: 2%;
      transform: rotate(180deg);
    }
  }

  // 左右の見切れ(SP)
  .swiper-slide-prev,
  .swiper-slide-next {
    .smartphone & {
      opacity: .5;
    }
  }

  // ページネーション丸(SP)
  .swiper-pagination {
    bottom: max(100vw * (-40/770), -40px);

    .swiper-pagination-bullet {
      background-color: #d9e5ef;
      height: min(100vw * (23/770), 23px);
      opacity: 1;
      width: min(100vw * (23/770), 23px);

      &-active {
        background-color: #0960cf;
      }
    }
  }
}

.art-swiper--pc,
.art-swiper--sp {
  .userweb & {
    width: 832px !important;
  }

  .swiper-wrapper {
    .swiper-slide {
      display: flex;
      flex-direction: column;

      .userweb & {
        width: 416px !important;
      }
    }
  }
}

/* margin(PC) */
.mt-30px-md {
  .userweb & {
    margin-top: 30px;
  }
}
.mt-50px-md {
  .userweb & {
    margin-top: 50px;
  }
}
.mt-60px-md {
  .userweb & {
    margin-top: 60px;
  }
}
.mt-75px-md {
  .userweb & {
    margin-top: 75px;
  }
}

/* margin(SP) */
.mt-30px-sm {
  .smartphone & {
    margin-top: min(100vw * (30/770), 30px);
  }
}
.mt-40px-sm {
  .smartphone & {
    margin-top: min(100vw * (40/770), 40px);
  }
}
.mt-60px-sm {
  .smartphone & {
    margin-top: min(100vw * (60/770), 60px);
  }
}
.mt-90px-sm {
  .smartphone & {
    margin-top: min(100vw * (90/770), 90px);
  }
}
.mt-100px-sm {
  .smartphone & {
    margin-top: min(100vw * (100/770), 100px);
  }
}
.mt-140px-sm {
  .smartphone & {
    margin-top: min(100vw * (140/770), 140px);
  }
}

/* font-size(PC) */
.md-font-18px {
  .userweb & {
    font-size: 18px;
  }
}
.md-font-23px {
  .userweb & {
    font-size: 23px;
  }
}
.md-font-30px {
  .userweb & {
    font-size: 30px;
  }
}
.md-font-34px {
  .userweb & {
    font-size: 34px;
  }
}

/* font-size(SP) */
.sm-font-22px {
  .smartphone & {
    .smartphone-font-size(22);
  }
}
.sm-font-26px {
  .smartphone & {
    .smartphone-font-size(26);
  }
}
.sm-font-30px {
  .smartphone & {
    .smartphone-font-size(30);
  }
}
.sm-font-34px {
  .smartphone & {
    .smartphone-font-size(34);
  }
}
.sm-font-44px {
  .smartphone & {
    .smartphone-font-size(44);
  }
}