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


/* 上書き */
html {
  --loupe-icon-color: #491e0c;
  --game-icon-color: #837157;
  --book-icon-color: #674444;
  --music-icon-color: #446745;
  --goods-icon-color: #595b86;
  --pre-icon-color: #da8000;
}

.content {
  color: #491e0c;

  .userweb & {
    background-image: url(../img/bg/content-repeat-y-md.jpg);
    background-position: top center;
    background-repeat: repeat-y;
  }
  .smartphone & {
    background-image: url(../img/bg/content-repeat-y-sm.jpg);
    background-position: top center;
    background-repeat: repeat-y;
  }
}

.order-button-pane--single,
.order-button-pane--2-cols,
.order-button-pane--3-cols {
  .order-button-pane__item {
    .smartphone & {
      width: 92.5%;
    }
    
    a {
      .smartphone & {
        .smartphone-font-size(30);
        font-weight: bold;
        padding-top: 1rem;
        padding-bottom: 1.2rem;
      }
    }
  }
}
.order-button-pane--2-cols {
  margin-left: auto;
  margin-right: auto;

  .userweb & {
    width: 564px;
  }

  .order-button-pane__item {
    .userweb & {
      width: 276px;

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

    .order-button--switch2 {
      // scss>object>component>_order-button.scss
    }
  }
}

.order-button-pane--3-cols {
    .userweb & {
      justify-content: center;
    }
  .order-button-pane__item {
    .userweb & {
      width: 236px;
    }
  }
}

.special-bg {
  background-color: #f5f3f4;
}

.primary-header__body {
  background-color: #000;
  color: #fff;
  .smartphone & {
    .smartphone-font-size(34);
  }
}

.content-box__head {
  background-color: #8f707f;

  .head-icon {
    display: flex;
    justify-content: center;
    line-height: 1 !important;
    position: relative !important;

    span {
      color: #981513;
      line-height: 1 !important;
      
      .userweb & {
        margin-left: 0;
        padding: 5px 25px 6px;
      }
      .smartphone & {
        padding: 0.5rem 1.5rem;
        margin-bottom: 0;
      }
    }
  }

  .marchandise-sidebyside__explain-icon {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 !important;

    span {
      display: block;

      .userweb & {
        margin-left: 0;
        padding: 5px 25px 6px !important;
      }
      .smartphone & {
        padding: 0.5rem 1rem;
      }
    }
  }
}

.marchandise-sidebyside--square .marchandise-sidebyside__images {
  .userweb & {
    margin-left: 0px;
  }
}
.marchandise-sidebyside__explain {
  .userweb & {
    width: calc(100% - 350px);
  }
}

.marchandise-sidebyside__explain-icon {
  background-color: #8f707f;
  
  .smartphone & {
    .smartphone-font-size(26);
  }
}

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

  //- 横並び見出しの設定(PC)
  .flex & {
    .userweb & {
      margin-top: 0;
    }
  }
}

.accordion-box__head {
  background-color: #8f707f;
  span {}

}

.video-button::after,
.video-button--mute::after {
  display: none !important;
}

.marchandise-box-pane__item {
  a,
  a:hover,
  a:active,
  a:visited {
    color: #491e0c !important;

    .userweb & {
      font-weight: 600;
    }
  }

}

/* 新規 */
// 赤色見出しの上下の模様
.head-deco {
  .userweb & {
    background: center 0 / auto no-repeat url(../img/bg/heading-top-md.png), center bottom / auto no-repeat url(../img/bg/heading-bottom-md.png);
    padding-bottom: 30px;
    padding-top: 30px;
  }
  .smartphone & {
    background: center 0 / 100% min(100vw*(11/770),11px) no-repeat url(../img/bg/heading-top-sm.png), center bottom / 100% min(100vw*(11/770),11px) no-repeat url(../img/bg/heading-bottom-sm.png);
    padding: 4% 3% 5%;
  }
}

// 「セット内容」の左右の飾り
.head-line {
  align-items: center;
  display: flex;
  justify-content: center;

  &--l,
  &--r {
    .userweb & {
      background-image: url(../img/bg/heading-line-md.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: 25px;
      width: 77px;
    }
    .smartphone & {
      background-image: url(../img/bg/heading-line-sm.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      height: min(100vw*(35/770), 35px);
      width: min(100vw*(107/770), 107px);
    }
  }

  &--r {
    transform: rotate(180deg);
  }

  h4 {
    .userweb & {
      font-size: 30px;
      padding-left: 23px;
      padding-right: 23px;
    }
    .smartphone & {
      .smartphone-font-size(40);
      padding-left: min(100vw*(30/770), 30px);
      padding-right: min(100vw*(30/770), 30px);
    }
  }
}

// 通常版画像
.normal-image {
  img {
    .smartphone & {
      width: min(100vw*(509/770), 509px);
    }
  }
}

// 背景
.bg-red {
  background-color: #981513 !important;
}

.bg-accordion-head {
    .userweb & {
      background-image: url(../img/bg/accordion-heading-md.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .smartphone & {
      background-image: url(../img/bg/accordion-heading-sm.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
}

.bg-accordion-body {
    .userweb & {
      background-image: url(../img/bg/accordion-repeat-y-md.jpg);
      background-position: top center;
      background-repeat: repeat-y;
      background-size: cover;
    }
    .smartphone & {
      background-image: url(../img/bg/accordion-repeat-y-sm.jpg);
      background-position: top center;
      background-repeat: repeat-y;
      background-size: cover;
    }
}

// 文字色
.color-lilac {
  color: #8e717e;
}
.color-white {
  color: #fff;
}

// 文字サイズ
.head-text {
  // デラックスエディション＋特別装丁コレクターズBOX
  &__deluxe-box {
    &--line1 {
      .userweb & {
        font-size: 17px;
      }
      .smartphone & {
        .smartphone-font-size(22);
      }
    }
    &--line2 {
      .userweb & {
        font-size: 32px;
      }
      .smartphone & {
        .smartphone-font-size(40);
      }
    }
  }
  
  // デラックスエディション
  &__deluxe {
    &--line1 {
      .userweb & {
        font-size: 20px;
      }
      .smartphone & {
        .smartphone-font-size(22);
      }
    }
    &--line2 {
      .userweb & {
        font-size: 34px;
      }
      .smartphone & {
        .smartphone-font-size(40);
      }
    }
  }

  // 大きめ1行
  &__single {
    &--large {
      .userweb & {
        font-size: 34px;
      }
      .smartphone & {
        .smartphone-font-size(40);
      }
    }
  }
}

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

// 文字間
.font-palt {
  font-feature-settings: "palt";
}
.letter-spacing {
  .smartphone & {
    letter-spacing: 0.2rem;
  }
}