/* --------------------------------------------------
 * 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 {
  // グラデ左から右　#005b24 0%, #378145 75%, #378145 100%
  background: linear-gradient(to right, #005b24 0%, #378145 75%, #378145 100%);
  color: #ffffff;
}

.content-box__head {
  background-color: #b48d40;
}

.content-box__body {
  background-color: #efe5c9;
  color: #000000;
}

// 商品詳細
.marchandise-sidebyside__explain {
  .smartphone & {
    margin-top: min(100vw * (30/770), 30px);
  }
}

.marchandise-sidebyside__explain-icon {
  background-color: #824300;
  color: #ffe44f;

  .smartphone & {
    .smartphone-font-size(26) !important;
  }
}

.marchandise-sidebyside__explain-head {
  color: #824300;

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

.marchandise-sidebyside__explain-body {
  .smartphone & {
    .smartphone-font-size(30) !important;
    margin-top: min(100vw * (30/770), 30px);
  }
}

// アコーディオン
.accordion-box-pane .accordion-box:nth-of-type(n+2) {
  .smartphone & {
    margin-top: min(100vw * (30/770), 30px);
  }
}

.accordion-box-pane.accordion-blue,
.accordion-box-pane.accordion-green {
  .accordion-box__head {
    .userweb & {
      font-size: 24px !important;
    }
    .smartphone & {
      .smartphone-font-size(34) !important;
    }
  }

  .accordion-box__body {
    .gutter {
      .smartphone & {
        padding-top: min(100vw * (30/770), 30px);
        padding-bottom: min(100vw * (35/770), 35px);
      }
    }
  }
}

// 動画
.video-button::after, .video-button--mute::after {
  display: none;
}

/* 新規 */
// 発売日
.release-date {
  background-color: #004d1e;
  font-weight: bold;
  padding: 1rem;
  text-align: center;

  .userweb & {
    font-size: 20px;
  }
  .smartphone & {
    .smartphone-font-size(38);
  }
}

// 見出し
.heading-bg {
  position: relative;

  .userweb & {
    background: url('../img/heading/bg-wide-md.jpg');
    background-repeat: repeat-y;
    padding: 0 !important;
    width: 100%;
  }
  .smartphone & {
    background: url('../img/heading/bg-wide-sm.jpg');
    background-repeat: repeat-y;
    padding: 0 !important;
    width: 100%;
  }

  // border
  &::before,
  &::after {
    content: '';
    left: 0;
    position: absolute;
    right: 0;
  }

  // border top
  &::before {
    top: 0;
    .userweb & {
      background: url('../img/heading/border-top-md.jpg');
      background-size: cover;
      height: 22px;
    }
    .smartphone & {
      background: url('../img/heading/border-top-sm.jpg');
      background-size: cover;
      height: min(100vw*(29/770),29px);
    }
  }

  // border bottom
  &::after {
    bottom: 0;

    .userweb & {
      background: url('../img/heading/border-bottom-md.jpg');
      background-size: cover;
      height: 4px;
    }
    .smartphone & {
      background: url('../img/heading/border-bottom-sm.jpg');
      background-size: cover;
      height: min(100vw*(8/770),8px);
    }
  }

  h3 {
    align-items: center;
    display: flex;
    flex-direction: column;

    .userweb & {
      padding-top: 32px;
      padding-bottom: 10px;
    }
    .smartphone & {
      padding-top: min(100vw*(50/770),50px);
      padding-bottom: min(100vw*(45/770),45px);
    }
  }

  .icon-estore {
    .userweb & {}
    .smartphone & {
      width: min(100vw*(402/770),402px);
    }
  }

  .line1 {
    .userweb & {
      font-size: 24px;
    }
    .smartphone & {
      .smartphone-font-size(30);
    }
  }
  .line2 {
    .userweb & {
      font-size: 34px;
    }
    .smartphone & {
      .smartphone-font-size(40);
    }
  }

  // 通常版1行
  .line-single {
    letter-spacing: 0.2em;

    .userweb & {
      font-size: 34px;
      padding-bottom: 9px;
    }
    .smartphone & {
      padding-top: min(100vw*(15/770),15px);
    }
  }
}

// アコーディオン青
.accordion-box-pane.accordion-blue {
  .accordion-box__head {
    background-color: #004c9c;
  }

  .accordion-box__body {
    background-color: #c9deef;
  }

  .marchandise-sidebyside__explain-icon {
    background-color: #004c9c;
  }
  .marchandise-sidebyside__explain-head {
    color: #004c9c;
  }
}

// アコーディオン緑
.accordion-box-pane.accordion-green {
  .accordion-box__head {
    background-color: #004d1e;
  }

  .accordion-box__body {
    background-color: #cdedd0;
  }

  .marchandise-sidebyside__explain-icon {
    background-color: #004d1e;
  }
  .marchandise-sidebyside__explain-head {
    color: #004d1e;
  }
}

// 動画見出し
.heading-movie {
  color: #014d1f;
  font-weight: bold;
  text-align: center;

  .userweb & {
    font-size: 24px;
    // padding-bottom: 9px;
  }
  .smartphone & {
    .smartphone-font-size(40);
    line-height: 1.2;
  }
}

// 注意書き
.text-notice {
  color: #cd0023;
  font-weight: bold;

  .userweb & {
    font-size: 16px;
    text-align: center;
  }
  .smartphone & {
    .smartphone-font-size(26);
  }
}

// ボタン
//- NOTE: scss/mixin/_button.scss の影の大きさを調整済み
.order-box,
.order-normal {
  background: linear-gradient(to right, #881022 0%, #bf1937 100%) !important;
  color: #fffb67 !important;
  margin-left: auto;
  margin-right: auto;
  
  .smartphone & {
    .smartphone-font-size(46) !important;
    width: min(100vw*(620/770),620px);
  }
}
.order-box {
  .userweb & {
    font-size: 30px !important;
    width: 400px;
  }
}
.order-normal {
  .userweb & {
    font-size: 24px !important;
    width: 320px;
  }
}

// 虫眼鏡アイコン
// 白色
.zoom-icon--white {
  .lightbox-link {
    &::after {
      .userweb & {
        background-color: #ffffff;
        opacity: .8;
      }
    }
  }
}
// アイコンなし、ズーム無効
.no-zoom {
  a.lightbox.lightbox-link {
    pointer-events: none;
    cursor: default;
    
    &::after {
      display: none;
    }
  }
}

/* BG */
.bg-green {
  background-color: #004d1e !important;
}

/* FONT */
// link
.text-link {
  // color: #000000 !important;
  color: inherit !important;
}
// color
.color-strong {
  color: #ffe44f !important;
}

// size(sp)
.sm-font-26px {
  .smartphone & {
    .smartphone-font-size(26) !important;
  }
}
.sm-font-30px {
  .smartphone & {
    .smartphone-font-size(30) !important;
  }
}
.sm-font-32px {
  .smartphone & {
    .smartphone-font-size(32) !important;
  }
}

/*  余白(SP)*/
// margin-top
.sm-mt30px {
  .smartphone & {
    margin-top: min(100vw * (30/770), 30px);
  }
}
.sm-mt40px {
  .smartphone & {
    margin-top: min(100vw * (40/770), 40px);
  }
}
.sm-mt50px {
  .smartphone & {
    margin-top: min(100vw * (50/770), 50px);
  }
}
.sm-mt90px {
  .smartphone & {
    margin-top: min(100vw * (90/770), 90px);
  }
}
.sm-mt100px {
  .smartphone & {
    margin-top: min(100vw * (100/770), 100px);
  }
}
// padding-top
.sm-pt20px {
  .smartphone & {
    padding-top: min(100vw * (20/770), 20px);
  }
}
.sm-pt30px {
  .smartphone & {
    padding-top: min(100vw * (30/770), 30px);
  }
}
.sm-pt40px {
  .smartphone & {
    padding-top: min(100vw * (40/770), 40px);
  }
}
// padding-bottom
.sm-pb50px {
  .smartphone & {
    padding-bottom: min(100vw * (50/770), 50px);
  }
}
.sm-pb90px {
  .smartphone & {
    padding-bottom: min(100vw * (90/770), 90px);
  }
}
.sm-pb100px {
  .smartphone & {
    padding-bottom: min(100vw * (100/770), 100px);
  }
}
// padding-y
.sm-py40px {
  .smartphone & {
    padding-top: min(100vw * (40/770), 40px);
    padding-bottom: min(100vw * (40/770), 40px);
  }
}