@charset "utf-8";

body {
  --lp-main-color: #1c221c;
  --lp-sub-color: #fcf2cd;
  --lp-light-color: #d3cabe;
  --lp-accent-red-color: #ea5637;
  --lp-accent-green-color: #9e9e3c;
  --lp-sub-accent-color: #ece0a2;
  --font-zenkaku: "Zen Kaku Gothic New", sans-serif;
  --font-penletter: "vdl-penletter", sans-serif;
  font-family: var(--font-penletter);
  letter-spacing: 0.05em;
  background-color: var(--lp-light-color);
}

@media screen and (max-width: 767px) {
  .hamburger-contents {
    background: var(--lp-light-color);
  }
}

.lp-title.type01 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .ja {
    font-size: calc(36 * var(--lp-px));
    line-height: 1em;
  }

  .en {
    margin-bottom: calc(4 * var(--lp-px));
    font-size: calc(18 * var(--lp-px));
    font-family: var(--font-zenkaku);
    font-weight: 500;
    color: var(--lp-accent-green-color);
  }
}

.lp-title.type02 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  font-size: calc(22 * var(--lp-px));
  line-height: 1;

  &::before {
    content: "";
    display: block;
    margin-right: 0.9em;
    width: 1em;
    height: 1em;
    border: solid calc(2 * var(--lp-px)) var(--lp-main-color);
    border-radius: 50%;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.3em;
    left: 0.3em;
    width: 1em;
    height: 1em;
    background-color: var(--lp-main-color);
    opacity: 0.3;
    border-radius: 50%;
  }
}

.lp-btn.type01 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: calc(24 * var(--lp-px));
  padding-left: calc(24 * var(--lp-px));
  min-width: calc(280 * var(--lp-px));
  height: calc(50 * var(--lp-px));
  font-size: calc(16 * var(--lp-px));
  color: #fff;
  background-color: var(--lp-main-color);
  border: solid calc(2 * var(--lp-px)) var(--lp-main-color);
  border-radius: calc(25 * var(--lp-px));

  &:hover {
    border-color: #fff;
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &::after {
    content: "";
    margin-left: calc(50 * var(--lp-px));
  }

  &.btn-down {
    &::after {
      content: "↓";
    }
  }

  &.btn-newtab {
    &::after {
      content: "";
      width: calc(13 * var(--lp-px));
      height: calc(13 * var(--lp-px));
      background-color: #fff;
      mask: url(../../common/img/icon-newtab.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      -webkit-mask: url(../../common/img/icon-newtab.svg);
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
    }
  }
}

.comingsoon {
  font-size: calc(22 * var(--lp-px));
  text-align: center;
}

.track-area {
  position: relative;
  padding: calc(20 * var(--lp-px)) calc(30 * var(--lp-px));

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--lp-sub-color);
    opacity: 0.5;
  }

  .lp-title {
    margin-bottom: calc(20 * var(--lp-px));
  }

  .track-list-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 1;

    .track-list {
      width: calc((100% - (20 * var(--lp-px))) / 2);

      .track-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;

        + .track-item {
          margin-top: calc(10 * var(--lp-px));
        }

        .num {
          flex-shrink: 0;
          margin-right: calc(16 * var(--lp-px));
          width: 1.5em;
          font-size: calc(16 * var(--lp-px));
          line-height: calc(24 * var(--lp-px));
        }

        .title {
          font-family: var(--font-zenkaku);
          font-size: calc(16 * var(--lp-px));
          line-height: calc(24 * var(--lp-px));
        }
      }

      &.right {
        margin-left: calc(30 * var(--lp-px));
      }

    }
  }
}

#mainvisual {
  position: relative;
  background: var(--lp-main-color);

  .logo-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    margin-right: auto;
    margin-left: auto;
    padding-top: calc(50 * var(--lp-px));
    padding-left: calc(50 * var(--lp-px));
    width: min(100%, 2560px);
    text-align: left;

    & img {
      width: calc(150 * var(--lp-px));
      filter: brightness(0) invert(1);
    }
  }

  .img-wrapper {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    max-width: min(100%, 2560px);
    height: min(100%, calc(var(--100vw) / 1279 * 853));

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      left: -1px;
      background: radial-gradient(
        closest-side,
        rgba(28, 34, 28, 0) calc(100% - (50 * var(--lp-px))),
        rgba(28, 34, 28, 1) 100%
      );
      pointer-events: none;
    }

    @media screen and (max-width: 767px) {
      &::before {
        right: 0;
        left: 0;
      }
    }

    & img {
      width: 100%;
      max-height: calc(100svh - calc(160 * var(--lp-px)));
      object-fit: contain;
    }

    .title-wrapper {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: absolute;
      top: 0;
      right: 0;
      bottom: calc(-50 * var(--lp-px));
      left: 0;
      z-index: 1;
      padding-right: calc(50 * var(--lp-px));
      padding-left: calc(50 * var(--lp-px));
      width: 100%;

      & img {
        width: 100%;
        height: auto;
        filter: drop-shadow(0 0 calc(10 * var(--lp-px)) var(--lp-main-color));
      }
    }
  }
}

#banner-section {
  padding-top: calc(80 * var(--lp-px));
  padding-bottom: calc(50 * var(--lp-px));
  background: var(--lp-main-color);

  .banner-list {
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: calc((100% - (30 * var(--lp-px))) / 2);
      border: solid calc(3 * var(--lp-px)) transparent;

      + .item {
        margin-left: calc(30 * var(--lp-px));
      }

      &:hover {
        border-color: var(--lp-accent-red-color);
      }

      & img {
        width: 100%;
      }
    }
  }
}

#concept {
  padding-top: calc(50 * var(--lp-px));

  .text {
    margin-top: calc(30 * var(--lp-px));
    font-size: calc(16 * var(--lp-px));
    line-height: 2.5em;

    & p + p {
      margin-top: 1.5em;
    }

    .highlight {
      font-size: 110%;
      letter-spacing: 0.1em;
      text-decoration: underline;
      text-underline-offset: -1em;
      text-decoration-color: var(--lp-accent-red-color);
      text-decoration-thickness: 1.2em;
      text-decoration-skip-ink: none;
    }
  }

  .btn-area {
    margin-top: calc(30 * var(--lp-px));
    display: flex;
    justify-content: center;
    align-items: center;

    .lp-btn + .lp-btn {
      margin-left: calc(20 * var(--lp-px));
    }
  }
}

/* #tracks {
  padding-top: calc(80 * var(--lp-px));
  padding-bottom: calc(50 * var(--lp-px));
} */

#mv {
  position: relative;
  margin-top: calc(80 * var(--lp-px));
  padding-top: calc(80 * var(--lp-px));
  padding-bottom: calc(80 * var(--lp-px));

  &::before,
  &::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 50%;
  }

  &::before {
    top: 0;
    background: linear-gradient(
      to right,
      #e2dab5 0%,
      #e2dab5 calc(100% / 3),
      #d7e2cb calc(100% / 3),
      #d7e2cb calc(100% / 3 * 2),
      #e4d7ce calc(100% / 3 * 2),
      #e4d7ce 100%
    );
  }

  &::after {
    bottom: 0;
    background: linear-gradient(
      to right,
      #e5d2cd 0%,
      #e5d2cd calc(100% / 3),
      #c9dade calc(100% / 3),
      #c9dade calc(100% / 3 * 2),
      #c3d1c6 calc(100% / 3 * 2),
      #c3d1c6 100%
    );
  }

  .lp-inner {
    position: relative;
    z-index: 1;

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: calc(-40 * var(--lp-px));
      right: calc(-50 * var(--lp-px));
      bottom: calc(-40 * var(--lp-px));
      left: calc(-50 * var(--lp-px));
      z-index: -1;
      background-color: #fff;
    }

    @media screen and (max-width: 767px) {
      width: calc(647 * var(--lp-px));

      &::before {
        right: calc(-30 * var(--lp-px));
        left: calc(-30 * var(--lp-px));
      }
    }
  }

  .top-text {
    padding-top: calc(30 * var(--lp-px));
    font-family: var(--font-zenkaku);
    font-size: calc(16 * var(--lp-px));
  }

  .track-area {
    margin-top: calc(20 * var(--lp-px));
  }

  .mv-btn-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(20 * var(--lp-px));
  }

  .join-area {
    padding-top: calc(50 * var(--lp-px));

    .join-list {
      padding-top: calc(20 * var(--lp-px));
      font-family: var(--font-zenkaku);
      text-align: left;

      > li {
        + li {
          margin-top: calc(50 * var(--lp-px));
        }

        .title {
          font-size: calc(18 * var(--lp-px));
          font-weight: 500;

          .date {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-left: calc(10 * var(--lp-px));
            padding-right: 1.2em;
            padding-left: 1.2em;
            height: 2em;
            font-weight: 500;
            background-color: var(--lp-accent-red-color);
            border: solid calc(2 * var(--lp-px)) var(--lp-main-color);
            border-radius: 1em;
          }
        }

        .desc {
          margin-top: calc(10 * var(--lp-px));
          font-size: calc(16 * var(--lp-px));

          & p + p {
            margin-top: 1em;
          }
        }

        .btn-area {
          margin-top: calc(20 * var(--lp-px));
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: var(--font-penletter);

          .lp-btn + .lp-btn {
            margin-left: calc(20 * var(--lp-px));
          }
        }

        .common-sns-list {
          --px: var(--lp-px);
          justify-content: center;
          margin-top: calc(20 * var(--lp-px));
        }
      }
    }
  }

  .ranking-area {
    padding-top: calc(50 * var(--lp-px));
  }
}

#how-to-get {
  padding-top: calc(80 * var(--lp-px));

  .jacket-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: calc(50 * var(--lp-px));

    .pht-area {
      margin-right: calc(30 * var(--lp-px));
      width: calc(220 * var(--lp-px));

      & img {
        width: 100%;
        box-shadow: calc(10 * var(--lp-px)) calc(10 * var(--lp-px)) calc(20 * var(--lp-px)) var(--lp-main-color);
      }

      .code {
        margin-top: calc(10 * var(--lp-px));
        font-weight: 500;
        font-size: calc(16 * var(--lp-px));

        .small {
          font-size: 80%;
        }
      }
    }

    .text-area {
      font-family: var(--font-zenkaku);
      text-align: left;

      .sub {
        font-size: calc(20 * var(--lp-px));
        font-weight: 500;
      }

      .title {
        margin-top: calc(10 * var(--lp-px));
        font-size: calc(24 * var(--lp-px));
        font-weight: 500;
      }

      .release {
        margin-top: calc(20 * var(--lp-px));
        font-size: calc(32 * var(--lp-px));
        font-weight: 700;
        letter-spacing: 0.08em;
      }
    }
  }

  .track-area {
    margin-top: calc(50 * var(--lp-px));
  }

  .info-area {
    padding-top: calc(50 * var(--lp-px));

    .text {
      font-family: var(--font-zenkaku);
      font-size: calc(16 * var(--lp-px));
      line-height: 2;
      text-align: left;

      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        @media screen and (max-width: 767px) {
          display: block;
        }

        .main {
          display: inline-block;
          width: 11em;

          @media screen and (max-width: 767px) {
            width: 100%;
          }
        }
      }

      & a {
        text-decoration: underline;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .btn-area {
    margin-top: calc(50 * var(--lp-px));
    display: flex;
    justify-content: center;
    align-items: center;

    .lp-btn + .lp-btn {
      margin-left: calc(20 * var(--lp-px));
    }
  }
  
  .reserve-area {
    margin-top: calc(30 * var(--lp-px));

    .text {
      margin-top: calc(20 * var(--lp-px));
      font-family: var(--font-zenkaku);
      font-size: calc(16 * var(--lp-px));
      line-height: 2;
      text-align: left;
    }
  }
}

#party {
  margin-top: calc(80 * var(--lp-px));
  padding-top: calc(80 * var(--lp-px));
  padding-bottom: calc(80 * var(--lp-px));
  background-color: var(--lp-sub-color);

  .anker-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(30 * var(--lp-px));

    & a {
      display: block;
      padding-right: 0.5em;
      padding-left: 0.5em;
      color: #fff;
      font-size: calc(26 * var(--lp-px));
      line-height: 1.5;
      background-color: var(--lp-main-color);

      + a {
        margin-left: calc(30 * var(--lp-px));
      }
    }
  }

  .contents {
    padding-top: calc(50 * var(--lp-px));

    .item {
      position: relative;

      + .item {
        margin-top: calc(80 * var(--lp-px));
      }

      &.day1::before {
        content: "";
        display: block;
        position: absolute;
        top: calc(60 * var(--lp-px));
        right: 0;
        width: calc(100 * var(--lp-px));
        height: 100%;
        background-image: url(../../img/2nd-mini-album/img-day1.svg);
        background-size: contain;
        background-repeat: no-repeat;
      }
      &.day2::before {
        content: "";
        display: block;
        position: absolute;
        top: calc(60 * var(--lp-px));
        left: 0;
        width: calc(100 * var(--lp-px));
        height: 100%;
        background-image: url(../../img/2nd-mini-album/img-day2.svg);
        background-size: contain;
        background-repeat: no-repeat;
      }

      .title {
        display: flex;
        justify-content: center;
        align-items: center;

        .day {
          padding-right: 0.5em;
          padding-left: 0.5em;
          color: #fff;
          font-size: calc(22 * var(--lp-px));
          line-height: 1.5;
          background-color: var(--lp-main-color);
        }

        .main {
          margin-left: calc(20 * var(--lp-px));
          height: 3rem;
        }
      }

      .info-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: calc(20 * var(--lp-px));
        line-height: 1;

        .date {
          font-size: calc(24 * var(--lp-px));

          .dow {
            margin-left: calc(10 * var(--lp-px));
            font-size: calc(18 * var(--lp-px));
          }
        }

        .venue {
          margin-top: calc(10 * var(--lp-px));
          font-size: calc(24 * var(--lp-px));
        }

        .time {
          margin-top: calc(10 * var(--lp-px));
          font-size: calc(18 * var(--lp-px));
        }

        .comingsoon {
          margin-top: calc(20 * var(--lp-px));
          font-size: calc(16 * var(--lp-px));
        }
      }

      .ticket-area {
        margin-top: calc(30 * var(--lp-px));
        margin-right: auto;
        margin-left: auto;
        width: calc(500 * var(--lp-px));
        max-width: 100%;

        .set {
          + .set {
            margin-top: calc(30 * var(--lp-px));
          }

          .lp-title {
            margin-bottom: calc(10 * var(--lp-px));
          }

          .text {
            font-family: var(--font-zenkaku);
            font-size: calc(16 * var(--lp-px));
            line-height: 2;
            text-align: left;
          }

          .ticket-item {
            font-family: var(--font-zenkaku);
            font-size: calc(16 * var(--lp-px));
            font-weight: 500;
            line-height: 2;
            text-align: left;

            + .ticket-item {
              margin-top: calc(10 * var(--lp-px));
            }

            .note {
              font-weight: 400;
              font-size: 80%;
            }

            .btn-area {
              display: flex;
              justify-content: center;
              margin-top: calc(10 * var(--lp-px));
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  .bonus-area {
    position: relative;
    margin-top: calc(30 * var(--lp-px));
    padding: calc(10 * var(--lp-px)) calc(20 * var(--lp-px));

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--lp-sub-accent-color);
      opacity: 0.5;
    }

    &::after {
      content: url(../../img/2nd-mini-album/icon-bonus.svg?0);
      position: absolute;
      right: calc(30 * var(--lp-px));
      bottom: calc(-20 * var(--lp-px));
      width: calc(80 * var(--lp-px));
    }

    @media screen and (max-width: 767px) {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      text-align: left;
      padding: calc(20 * var(--lp-px)) calc(20 * var(--lp-px));
    }

    .area-inner {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      z-index: 1;
      font-family: var(--font-zenkaku);
      font-weight: 500;
      font-size: calc(16 * var(--lp-px));

      @media screen and (max-width: 767px) {
        display: block;
      }

      .lp-title {
        font-size: calc(16 * var(--lp-px));
      }

      .text {
        margin-left: calc(20 * var(--lp-px));

        @media screen and (max-width: 767px) {
          margin-top: calc(10 * var(--lp-px));
          margin-left: 0;
        }
      }
    }
  }
}

#topics {
  padding-top: calc(80 * var(--lp-px));

  .list {
    padding-top: calc(30 * var(--lp-px));

    > li {
      + li {
        margin-top: calc(30 * var(--lp-px));
      }

      .info {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .date {
          flex-shrink: 0;
          margin-right: calc(16 * var(--lp-px));
          padding-right: calc(10 * var(--lp-px));
          width: calc(4em + (10 * var(--lp-px)));
          font-size: calc(16 * var(--lp-px));
          line-height: calc(24 * var(--lp-px));
          border-right: solid calc(1 * var(--lp-px)) var(--lp-main-color);
        }

        .new {
          flex-shrink: 0;
          margin-right: calc(16 * var(--lp-px));
          font-size: calc(18 * var(--lp-px));
          letter-spacing: 0.1em;
          text-decoration: underline;
          text-underline-offset: -1em;
          text-decoration-color: var(--lp-accent-red-color);
          text-decoration-thickness: 1.2em;
          text-decoration-skip-ink: none;
        }

        .title {
          font-family: var(--font-zenkaku);
          font-size: calc(18 * var(--lp-px));
          font-weight: 500;
          line-height: 2;
          text-align: left;
        }
      }

      .common-wysiwyg-text {
        --px: calc(0.9 * var(--lp-px));
        --accent-color: var(--lp-accent-green-color);
        --accent-light-color: var(--lp-light-color);
        --font: var(--font-zenkaku);
        --font-color: var(--lp-main-color);
        margin-top: calc(20 * var(--lp-px));
      }
    }
  }
}

#profile {
  padding-top: calc(80 * var(--lp-px));

  .profile-area {
    padding-top: calc(30 * var(--lp-px));

    .text {
      font-family: var(--font-zenkaku);
      font-size: calc(18 * var(--lp-px));
      font-weight: 400;
      line-height: 1.8;
      text-align: center;

      @media screen and (max-width: 767px) {
        text-align: left;
      }

      & p + p {
        margin-top: 1em;
      }
    }
  }

  .prev-area {
    position: relative;
    margin-top: calc(50 * var(--lp-px));
    padding: calc(20 * var(--lp-px)) calc(30 * var(--lp-px));

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--lp-sub-color);
      opacity: 0.5;
    }

    .content {
      display: flex;
      align-items: flex-start;
      position: relative;
      z-index: 1;
      margin-top: calc(30 * var(--lp-px));

      .pht-area {
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: calc(30 * var(--lp-px));
        width: calc(140 * var(--lp-px));

        & img {
          width: 100%;
          box-shadow: calc(5 * var(--lp-px)) calc(5 * var(--lp-px)) calc(15 * var(--lp-px)) var(--lp-main-color);
        }
      }

      .text-area {
        font-family: var(--font-zenkaku);

        .text {
          font-size: calc(16 * var(--lp-px));
          font-weight: 400;
          line-height: 1.5;
          text-align: left;
        }

        .tracks {
          margin-top: 2em;
          text-align: left;

          .title {
            font-size: calc(16 * var(--lp-px));
            font-weight: 500;
          }

          .list {
            margin-top: calc(6 * var(--lp-px));
            font-size: calc(16 * var(--lp-px));
            font-weight: 400;
          }
        }
      }
    }

    .mv-wrapper {
      position: relative;
      z-index: 1;
      margin-top: calc(30 * var(--lp-px));
      width: 100%;

      & iframe {
        width: calc(707 * var(--lp-px));
        height: calc((707 * var(--lp-px)) / 16 * 9);

        @media screen and (max-width: 767px) {
          width: calc(647 * var(--lp-px));
          height: calc((647 * var(--lp-px)) / 16 * 9);
        }
      }
    }
  }

}