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

// 汎用
// -----------------------------------
.text-white {
  color: #fff;
}

.text-crimson {
  color: #b01e1d;
}

.content .text-link,
.content .text-link:active {
  color: #ec4e01 !important;
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}

// 破線 -----
.dashed-divider {
  .userweb & {
    padding-left: 40px;
    padding-right: 40px;
  }
  .smartphone & {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

// 見出し -----
.head-xl {
  font-weight: 900;
}

// 背景
// -----------------------------------
.content {
  background-image: url(../img/bg.jpg);
}

// ボックス
// -----------------------------------
.content-box__head {
  background-color: transparent;
  .userweb &,
  .smartphone & {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
.content-box__head.special {
  background-color: #940100;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  .userweb & {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.content-box__body {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
// プレゼント
// -----------------------------------
.marchandise-sidebyside {
  .smartphone & {
    display: flex;
    flex-direction: column-reverse;
  }
}
.marchandise-sidebyside__explain-head {
  margin-top: 0;
}

.marchandise-sidebyside__explain-subhead {
  color: #b01e1d;
  font-weight: 700;
}

.marchandise-sidebyside__explain {
  .smartphone & {
    margin-top: 0;
  }
}

.marchandise-sidebyside__images {
  .smartphone & {
    margin-top: 1rem;
  }
}

// 箇条書き
// -----------------------------------
dl.xpost-explain {
  display: flex;
  dt {
    font-size: 1.2rem;
    color: #b01e1d;
  }
  dd {
    margin-top: 0.3rem;
    .userweb & {
      margin-top: 0.2rem;
    }
  }
}

// カスタム2
a.button-shadow-round.button-entry {
  background: #e1610e;
  box-shadow: 0px 4px #ffb17e;
  .userweb & {
    box-shadow: 0px 4px #ffb17e;
  }
  &:hover {
    box-shadow: 0 0;
  }
  // 無効
  .button-shadow-mute();
}

// おすすめ見出しパターン
// -----------------------------------
.grad(@color1, @color2) {
  background: linear-gradient(to right, @color1 0%, @color2 50%, @color1 100%);
}
.bg-1 {
  .grad(#c75407, #e37e0b);
}
.bg-2 {
  .grad(#e663b1, #cc4276);
}
.bg-3 {
  .grad(#2b9326, #41c939);
}
.bg-4 {
  .grad(#3d59a8, #5c86d4);
}

.marchandise-box__released-date,
.marchandise-box__price {
  color: #6b6b6b;
}