/* --------------------------------------------------
 * 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(168, 44, 116, 1) 0%,
    rgba(203, 51, 136, 1) 50%,
    rgba(168, 44, 116, 1) 100%
  );
  box-shadow: 0px 8px #7d3365;
  .userweb & {
    box-shadow: 0px 4px #7d3365;
  }
  &: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 {
  color: #232222;
  background-image: url(../img/bg.jpg);
  background-repeat: repeat;
  background-size: 90px 90px;
}

.text-notes {
  color: #232323;
}

.line-marker--yellow {
  background-color: #ffee08;
}

.campaign-end {
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 18px 0;
  padding-right: 1rem;
  padding-left: 1rem;
  background-image: url(../img/obi.png);
}

/** --------------------------------------------------
 * キービジュアルまわり
 */

.primary-header {
  background-image: url(../img/hero-bg.jpg);
  &__kv {
    .userweb & {
      position: relative;
    }
  }
  &__body {
    .smartphone & {
      position: relative;
    }

    .userweb & {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
  }
}

.sale-period-box,
.sale-explain-box {
  text-align: center;

  .userweb & {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
}

// -------------------------
// 期間
.sale-period-box {
  font-weight: bold;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  position: relative;
  color: #fff;
  margin-right: auto;
  margin-left: auto;

  .userweb & {
    background-color: #28150a;
    width: 645px;
    bottom: 241px;
  }

  .smartphone & {
    background-color: #1d1c1b;
  }

  p {
    &:nth-of-type(1) {
      .smartphone & {
        .smartphone-font-size(34);
      }
    }
    &:nth-of-type(2) {
      color: #eee619;

      .smartphone & {
        .smartphone-font-size(30);
      }
    }
  }
}

// -------------------------
// セール説明
.sale-explain-box {
  color: #ffffff;

  * {
    line-height: 1.8;
  }

  .smartphone & {
    .smartphone-font-size(34);
    text-align: left;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    background-color: #bf1d03;
  }

  .userweb & {
    // margin-top: 30px;
    bottom: 40px;
    width: 720px;
    margin-right: auto;
    margin-left: auto;
  }
}

// -------------------------
// 商品リストの調整
.marchandise-box__discount-rate {
  color: #fff;
  font-weight: 700;
  text-align: center;
  background-color: #be240b;
  .smartphone & {
    .smartphone-font-size(30);
  }
  .userweb & {
    font-size: 18px;
  }
}
.marchandise-box__name {
  a {
    color: #232323 !important;
  }
}
.marchandise-box__price,
.marchandise-box__discount-price {
  .userweb & {
    font-size: 14px;
  }
}
.marchandise-box__price {
  color: #232323 !important;
  margin-top: 0.5rem;
}
.marchandise-box__discount-price {
  color: #bb2c00;
  font-weight: bold;
  margin-top: 0;
  // →
  &::first-letter {
    color: #bb2c00;
  }
}
.marchandise-box__soldout {
  background-image: url(../img/sold-out.png);
  background-position: center center;
  background-repeat: no-repeat;
}

/** --------------------------------------------------
 * シリーズから探す
 */
.category-link-pane,
.all-discount-items-pane {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  &__item {
    margin-right: auto;
    margin-left: auto;

    .smartphone & {
      .smartphone-font-size(23);
      width: 50%;
      padding-left: 1%;
      padding-right: 1%;

      &:nth-of-type(n + 3) {
        margin-top: 1.2rem;
      }
    }

    .userweb & {
      width: 430px;

      &:nth-of-type(n + 3) {
        margin-top: 2rem;
      }
    }
  }
}

.push-btn,
.push-btn--strong {
  color: #232323 !important;
  padding-top: 1.3em;
  padding-bottom: 1.3em;
  display: block;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  background-color: rgb(255, 255, 255);
  width: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 8px;
  border: 3px solid #bb2c00;
  box-shadow: 0px 5px 0px 0px #bb2c00;

  .userweb & {
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 10px;
    box-shadow: 0px 10px 0px 0px #bb2c00;
  }

  &:hover {
    transform: translateY(2px);
    box-shadow: 0px 2px 0px 0px #bb2c00;
    .userweb & {
      transform: translateY(8px);
    }
  }
  .button-shadow-mute();
  &.mute {
    opacity: 0.8;
    color: #5a5a5a !important;
  }
}

// -------------------------
// 全商品
.all-discount-items-pane {
  .userweb {
    justify-content: center;
  }

  &__item {
    .smartphone & {
      .smartphone-font-size(26);
      width: min(100vw*(433/770), 433px);
    }
  }
}

.push-btn--strong {
  color: #fff !important;
  background-color: #be240b;
  border: 3px solid #be240b;
  box-shadow: 0px 5px 0px 0px #8e2312;

  .userweb & {
    box-shadow: 0px 10px 0px 0px #8e2312;
  }
  &:hover {
    box-shadow: 0px 2px 0px 0px #8e2312;
  }
}

// -------------------------
// コピーライト
.copyright-box {
  color: #232323;
  text-align: center;
}

// -------------------------
// 4/29：お知らせ追加
.latest-news {
  background-color: #f98c00;
}