/* --------------------------------------------------
 * 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: #42413f;

  .userweb & {
    background-image: url(../img/misc/bg/pattern-md.jpg);
    background-position: top center;
    background-position-y: -105px;
    background-repeat: repeat-y;
  }
  .smartphone & {
    background-image: url(../img/misc/bg/pattern-sm.jpg);
    background-position: top center;
    // background-position-y: min(100vw*(105/770), 105px);
    background-repeat: repeat-y;
    background-size: contain;
  }
}

.secondary-header--border {
  .userweb & {
    border-top: 2px solid #d1cfd5;
    border-bottom: 2px solid #d1cfd5;
    font-size: 20px;
  }
  .smartphone & {
    .smartphone-font-size(34);
  }
}
.secondary-header--border__head {
  &::after {
    .userweb & {
      content: "　";
    }
  }
}
.secondary-header--border__body {
  .userweb & {
    color: #42413f;
    font-weight: normal;
  }
  .smartphone & {
    border-top: 2px solid #d1cfd5;
    border-bottom: 2px solid #d1cfd5;
    color: #6b6b6b;
  }
}

.content-box__head {
  background-image: linear-gradient(to right, #edb548 0%, #dc8964 100%);

  .userweb & {
    border-radius: 10px 10px 0 0;
  }
  .smartphone & {
    border-radius: min(100vw*(10/770), 10px) min(100vw*(10/770), 10px) 0 0;
  }

  h3 {
    .userweb & {
      font-size: 30px;
    }
    .smartphone & {
      .smartphone-font-size(40);
    }
  }
}
.content-box__body {
  .userweb & {
    border-radius: 0 0 10px 10px;
  }
  .smartphone & {
    border-radius: 0 0 min(100vw*(10/770), 10px) min(100vw*(10/770), 10px);
  }
}

.marchandise-sidebyside__explain-head {
  .userweb & {
    font-size: 18px;
    line-height: 1;
  }
  .smartphone & {
    .smartphone-font-size(34);
  }
}
.marchandise-sidebyside__explain-body {
  .smartphone & {
    .smartphone-font-size(34);
    margin-top: 0;
  }
}

.marchandise-box-pane__item {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.marchandise-box__icons {
  display: none;
}
.marchandise-box__name {
  a,
  a:hover,
  a:active,
  a:visited {
    color: #369900;
  }
}
.marchandise-box__released-date {
  display: none;
}

/* 新規 */
.color-gray {
  color: #afafaf;
}
.color-strong {
  color: #dd8b63;
}

.attention {
  .userweb & {
    margin-left: 25px;
  }
}

// 対象商品
.marchandise {
  h4 {
    align-items: center;
    display: flex;
    justify-content: center;

    .userweb & {
      letter-spacing: 0.14rem;
    }
    .smartphone & {
      flex-direction: column;
      letter-spacing: 0.11rem;
    }

    .logo-dq {
      .smartphone & {
        width: min(100vw*(124/770), 124px);
      }
    }
    .logo-ff {
      .smartphone & {
        width: min(100vw*(192/770), 192px);
      }
    }
    .logo-kh {
      .smartphone & {
        width: min(100vw*(156/770), 156px);
      }
    }
  }

  .content-box__head {
    border-radius: 0 0 0 0;
  }

  //- 見出し直下の白枠
  &__overview {
    .content-box__body {
      background-color: #fff !important;

      .userweb & {
        border-radius: 10px !important;
      }
      .smartphone & {
        .smartphone-font-size(34);
        border-radius: min(100vw*(10/770), 10px) !important;
      }

      img {
        vertical-align: middle;
    
        .userweb & {
          display: inline-block !important;
          margin: 0 12px;
          width: 140px;
        }
        .smartphone & {
          margin: min(100vw*(20/770), 20px) auto;
          width: min(100vw*(320/770), 320px);
        }
      }
    }
  }

  //- 各Pets対象商品の白or透明枠
  .content-box__body {
    background-color: #f8f8f8;

    .userweb & {
      border-radius: 0;
    }
    .smartphone & {
      border-radius: 0;
    }

    a,
    a:hover,
    a:active,
    a:visited {
      color: #369900;
    }

  }
}

.button-x {
  .userweb & {
    margin-top: 12px;
  }
  .smartphone & {
    margin-top: min(100vw*(22/770), 22px);
  }

  img {
    .userweb & {
      width: 198px;
    }
    .smartphone & {
      width: min(100vw*(320/770), 320px);
    }
  }
}


/* FONT SIZE(SP) */
.sm-font-34px {
  .smartphone & {
    .smartphone-font-size(34);
  }
}