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

/* base */
// .sp-font-size(@font-size, @breakpoint) {
//   font-size: calc(100vw * (@font-size / @breakpoint));
// }
html {
  --base-bg-color: #c90707;
  --book-icon-color: #674444;
  --game-icon-color: #837157;
  --goods-icon-color: #595b86;
  --music-icon-color: #446745;
}

/* color */
.text-attention {
  color: #f65a27;
}
.text-strong {
  color: #c90707;
}
.text-icon--lg {
  color: #fff5c7;
}

/* content */
.content {
  background-color: #1d1712;
  color: #ffffff;

  &::before {
    top: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;

    .userweb & {
      background: url('../img/misc/bg/top-md.jpg');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 355px;
    }

    .smartphone & {
      background: url('../img/misc/bg/top-sm.jpg');
      background-position: bottom center;
      background-repeat: no-repeat;
      background-size: cover;
      height: calc(100vw * (350 / 770));
      max-height: 350px;
    }
  }

  &::after {
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;

    .userweb & {
      background: url('../img/misc/bg/bottom-md.jpg');
      background-position: bottom center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 354px;
    }

    .smartphone & {
      background: url('../img/misc/bg/bottom-sm.jpg');
      background-position: bottom center;
      background-repeat: no-repeat;
      background-size: cover;
      height: calc(100vw * (354 / 770));
      max-height: 354px;
    }
  }

  a,
  a:visited {
    color: #c90707;
  }
}

/* divider */
.divider {
  background-color: #8b571b;

  .userweb & {
    height: 1px;
  }
  .smartphone & {
    height: 2px;
  }

  &.gradient {
    background: linear-gradient(to right, #d5ba70, #d5ba70, #d5ba70, #d5ba70);

    .userweb & {
      height: 2px;
    }
    .smartphone & {
      height: 3px;
      margin-bottom: min(7vw, 60px);
      margin-top: min(9vw, 70px);
    }
  }
}

/* 上部テキスト */
.primary-lead {
  position: relative;

}

/* キービジュアル */
.primary-header {
  .userweb & {
    overflow: hidden;
    margin-bottom: 35px;
    height: 980px;
  }

  &__kv {
    .userweb & {
      // height: 800px;
    }
    .smartphone & {
      // height: calc(100vw * (975 / 660));
      // max-height: 975px;
    }
  }
  &__body {
    .catch-copy {
      position: absolute;

      .userweb & {
        bottom: 0;
        text-align: center;
        width: 100%;
      }
      .smartphone & {
        bottom: min(10vw, 77px);
        left: 50%;
        transform: translateX(-50%);
        width: 87%;
      }
    }
  }
}

/* 応募期間リスト */
.schedule-detail {
  margin-bottom: min(6vw, 45px);
  margin-left: auto;
  margin-right: auto;

  .smartphone & {
    text-align: center;
  }

  ul {
    .userweb & {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: fit-content;
      margin: 0 auto;
    }
  }

  li {
    display: flex;

    .smartphone & {
      flex-direction: column;
      justify-content: center;
      margin-top: min(7vw, 54px);
    }

    > span {
      &:nth-of-type(1) {
        color: #d1b568;
        font-weight: bold;
        .userweb & {
          margin-right: 1rem;
        }
      }
      &:nth-of-type(2) {
      }
    }
  }
}

/* 応募ボタン */
// ボタン
.button-apply {
  background: linear-gradient(#9f42ff, #015eea);
  box-shadow: 0 3px 0 #0045c4;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center;
  z-index: 1;

  &:hover {
    opacity: 0.8;
  }
  &.non-active {
    background: #888;
    box-shadow: 0 3px 0 #555;
    pointer-events: none;
  }
  .userweb & {
    border-radius: 10px;
    font-size: 1.875rem;
    height: 77px;
    width: 400px;
  }
  .smartphone & {
    // .smartphone-font-size(36);
    border-radius: 0.5rem;
    height: min(15.6vw, 120px);
    margin-bottom: min(3.9vw, 30px);
    margin-top: min(11vw, 88px);
  }

  a,
  a:visited {
    color: #ffffff;
    display: block;
    font-weight: bold;
    opacity: 1;
    text-decoration: none;
    width: 100%;

    .userweb & {
      line-height: 77px;
    }
    .smartphone & {
      line-height: min(15.6vw, 120px);
    }
  }

  a:hover {
    opacity: 0.8;
    transition: opacity 0.4s ease-in-out;
  }
}
// 注意文言
.text-apply {
  .userweb & {
    text-align: center;
  }
  .smartphone & {
    text-align: left;
  }
}

/* content-box */
.content-box {
  color: #341c01;

  .smartphone & {
    margin-top: min(13vw, 100px);
  }

  &__head {
    color: #fff5c7;

    .userweb & {
      background: url('../img/misc/head/bg-md.jpg');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 70px;
      width: 100%;
    }

    .smartphone & {
      .smartphone-font-size(46);
      align-items: center;
      background: url('../img/misc/head/bg-sm.jpg');
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      height: min(13vw, 100px);
      justify-content: center;
      width: 100%;
    }

    h3 {
      .userweb & {
        font-size: 30px;
      }
    }
  }

  &__body {
    background: linear-gradient(to right, #cbac5c, #fff5c7, #fff5c7, #cbac5c);
    .smartphone & {
      padding-bottom: min(13vw, 100px);
      padding-top: min(6vw, 50px);
    }
  }
}

/* primary-lead */
.primary-lead {
  background-color: #b70963;
  &.is-end {
    background-color: #b75215;
    color: #eee;
  }
}

/* チケット情報 */
.ticket-info {
  &__flex {
    display: flex;

    .userweb & {
      align-items: flex-start;
      justify-content: space-between;
    }

    .smartphone & {
      flex-direction: column;
    }

    > div {
      .userweb & {
        width: 49%;
      }
    }
  }

  &__image {
    &--pc {
      .userweb & {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
      }
    }

    &--sp {
      .smartphone & {
        margin-top: min(8vw, 66px);
      }
    }
  }

  &__attention {
    .smartphone & {
      margin-top: min(6vw, 50px);
    }
  }
}

/* イベント概要 */
.event-summary {
  table {
    width: 100%;
  }

  td {
    .smartphone & {
      display: block;
      width: 100%;
    }
  }

  th {
    .userweb & {
      height: 26px;
      line-height: 26px;
      padding: 0;
      width: 150px;
    }
  }

  .sm-spacer {
    .smartphone & {
      padding-top: min(5vw, 40px);
    }
  }
}

/* 注意事項 */
.attention {
  h4 {
    &:not(:nth-of-type(1)) {
      margin-top: min(6vw, 50px);
    }
  }

  &__banner {
    .smartphone & {
      margin-top: min(7vw, 60px);
    }
  }
}

/* 特設バナー */
.special-banner {
  .smartphone & {
    margin-top: min(7vw, 60px);
  }
}

/* 関連商品 */
.marchandise {
  position: relative;
  z-index: 1;

  .content-box__body--clear {
    .smartphone & {
      padding-bottom: min(9vw, 70px);
      padding-top: min(6vw, 50px);
    }
  }
}
.marchandise-box {
  color: #ffffff;
  a,
  a:visited {
    color: #d1b568;
  }
}

/* コピーライト */
.copyright {
  margin-bottom: min(13vw, 100px);
  position: relative;
  z-index: 1;
}

/* 注意事項ページ */
.faq-header {
  position: relative;

  .userweb & {
    padding-bottom: 2%;
    padding-top: 2%;
    width: 299px;
  }
  .smartphone & {
    width: 299px;
    padding-top: 3%;
    padding-bottom: 3%;
  }
}

//- content-box
.faq {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;

  .content-box__body {
    margin-top: 0;
    .smartphone & {
      padding-bottom: 0 !important;
    }
  }

  &-box {
    border-image: linear-gradient(to right, #d5ba70, #d5ba70, #d5ba70, #d5ba70) 1;

    .userweb & {
      border-top: solid 1px;
    }
    .smartphone & {
      border-top: solid 4px;
    }

    &__q {
      &::before {
        content: '';

        .userweb & {
          background: url(../img/misc/icon/q-md.png);
          background-position: left;
          background-repeat: no-repeat;
          background-size: contain;
          height: 25px;
          margin-top: 0;
          width: 17px;
        }

        .smartphone & {
          background: url(../img/misc/icon/q-sm.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          height: calc(100vw * (43 / 770));
          max-height: 43px;
          margin-right: 2%;
          margin-top: 0;
          width: calc(100vw * (31 / 770));
          max-width: 31px;
        }
      }
    }

    &__a {
      &::before {
        content: '';

        .userweb & {
          background: url(../img/misc/icon/a-md.png);
          background-position: left;
          background-repeat: no-repeat;
          background-size: contain;
          height: 18px;
          margin-top: 0;
          width: 17px;
        }

        .smartphone & {
          background: url(../img/misc/icon/a-sm.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          height: calc(100vw * (33 / 770));
          max-height: 33px;
          margin-right: 2%;
          margin-top: 0;
          width: calc(100vw * (31 / 770));
          max-width: 31px;
        }
      }
    }
  }

  //- コピーライト
  .copyright {
    color: #888888;

    .smartphone & {
      margin-bottom: min(7vw, 55px);
      margin-top: min(7vw, 55px);
    }
  }
}