@charset "utf-8";

body {
  --ww-px: calc(1 / 1400 * var(--100vw));
  --lp-px: 1px;
  background-color: #F9F9FE;
}

@media screen and (max-width: 767px) {
  body {
    --lp-px: calc(1 / 767 * var(--100vw));
  }
}

.lp-inner {
  margin-right: auto;
  margin-left: auto;
  width: calc(767 * var(--lp-px));
  text-align: center;

  @media screen and (max-width: 827px) {
    width: calc(707 * var(--lp-px));
  }
}

a {
  cursor: pointer;
}

img {
  vertical-align: bottom;
}

.lp-title.type01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-right: calc(30 * var(--lp-px));
  padding-left: calc(30 * var(--lp-px));
  height: calc(52 * var(--lp-px));
  font-family: "Noto Serif JP", serif;
  font-weight: normal;
  font-size: calc(26 * var(--lp-px));
  letter-spacing: 0.05em;
  text-align: right;
  color: #fff;
  background: linear-gradient(
    100deg,
    #e72935 0%,
    #82c02e 50%,
    #3aa7df 100%
  );
  border-radius: calc(25 * var(--lp-px));
}

.comingsoon {
  text-align: center;
}

.comingsoon img {
  height: calc(26 * var(--lp-px));
}

.lp-btn.type01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-right: calc(20 * var(--lp-px));
  padding-left: calc(20 * var(--lp-px));
  height: calc(48 * var(--lp-px));
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: calc(22 * var(--lp-px));
  text-align: center;
  color: #000;
  background-color: #fff;
  border-radius: calc(24 * var(--lp-px));
}

.lp-btn.type01.disabled {
  background-color: #aaa;
}

.lp-btn.type01.newtab::after {
  content: "";
  display: block;
  margin-left: calc(10 * var(--lp-px));
  width: calc(20 * var(--lp-px));
  height: calc(20 * var(--lp-px));
  background-image: url(../../img/twilight-river/icon-newtab.svg);
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0);
}

header {
  position: relative;
  z-index: 1;
}

.fixed-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  width: 100%;
  height: calc(160 * var(--ww-px));
}

@media screen and (max-width: 767px) {
  .fixed-header {
    /* position: fixed; */
    top: 0;
    right: 0;
    left: 0;
  }
}

.fixed-header .header-logo {
  position: relative;
  z-index: 1;
  margin-left: calc(40 * var(--ww-px));
  width: calc(120 * var(--ww-px));
  height: calc(80 * var(--ww-px));
  object-fit: contain;

  @media screen and (max-width: 767px) {
    width: calc(180 * var(--ww-px));
    height: calc(120 * var(--ww-px));
  }
}

.lp-hamburger-icon {
  display: none;
}

@media screen and (max-width: 767px) {
  .lp-hamburger-icon {
    display: block;
    position: fixed;
    top: calc(36 / 767 * var(--100vw));
    right: calc(20 / 767 * var(--100vw));
    z-index: 10;
    width: calc(44 / 767 * var(--100vw));
    height: calc(44 / 767 * var(--100vw));
  }

  .lp-hamburger-icon span {
    display: block;
    width: 100%;
    height: calc(2 / 767 * var(--100vw));
    background-color: #fff;
  }

  .lp-hamburger-icon span:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }

  .lp-hamburger-icon span:nth-child(2) {
    position: absolute;
    top: calc(16 / 767 * var(--100vw));
    right: 0;
    left: 0;
  }

  .lp-hamburger-icon span:nth-child(3) {
    position: absolute;
    top: calc(32 / 767 * var(--100vw));
    right: 0;
    left: 0;
  }

  .menu-on .lp-hamburger-icon span:nth-child(1) {
    left: calc(4 / 767 * var(--100vw));
    transform: rotate(45deg);
    transform-origin: top left;
  }

  .menu-on .lp-hamburger-icon span:nth-child(2) {
    display: none;
  }

  .menu-on .lp-hamburger-icon span:nth-child(3) {
    left: calc(4 / 767 * var(--100vw));
    transform: rotate(-45deg);
    transform-origin: bottom left;
  }
}

.hamburger-contents {
  flex-grow: 1;
}

@media screen and (max-width: 767px) {
  .hamburger-contents {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    padding-top: calc(104 / 767 * var(--100vw));
    padding-bottom: calc(50 / 384 * 80 * var(--vw));
    width: 100%;
    height: 100%;
    background: #AE871E;
    background: linear-gradient(90deg, rgba(174, 135, 30, 1) 0%, rgba(197, 171, 70, 1) 20%, rgba(229, 213, 142, 1) 50%, rgba(198, 165, 68, 1) 80%, rgba(192, 161, 66, 1) 100%);
    overflow: auto;
  }

  .hamburger-contents-inner {
    padding-bottom: 80px;
  }
}

.fixed-header .header-nav {
  /* display: none; */
  position: relative;
  z-index: 1;
}

.fixed-header .header-nav ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: calc(40 * var(--ww-px));
  padding-left: calc(60 * var(--ww-px));

  @media screen and (max-width: 767px) {
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 0;
  }
}

.fixed-header .header-nav li {
  padding-right: calc(10 * var(--ww-px));
  padding-left: calc(10 * var(--ww-px));
}

.fixed-header .header-nav li + li {
  margin-left: calc(20 * var(--ww-px));
}

@media screen and (max-width: 767px) {
  .fixed-header .header-nav li + li {
    margin-top: calc(28 / 767 * var(--100vw));
    margin-left: 0;
  }
}

.fixed-header .header-nav li a {
  position: relative;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: calc(18 * var(--ww-px));
  text-align: center;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: calc(-10 * var(--ww-px));
    bottom: 0;
    left: calc(-10 * var(--ww-px));
    z-index: -1;
    background-color: #333;
    filter: blur(calc(13 * var(--ww-px)));
  }

  @media screen and (max-width: 767px) {
    color: #333;
    font-weight: 500;
    font-size: calc(48 * var(--ww-px));

    &::before {
      display: none;
    }
  }

  .sub {
    display: none;

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

.fixed-header .header-nav li a.newtab {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fixed-header .header-nav li a.newtab::after {
  content: "";
  display: block;
  margin-left: calc(10 * var(--ww-px));
  width: calc(18 * var(--ww-px));
  height: calc(16 * var(--ww-px));
  background-image: url(../../img/twilight-river/icon-newtab.svg);
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 767px) {
  .fixed-header .header-nav li a.newtab::after {
    margin-left: calc(10 / 767 * var(--100vw));
    width: calc(18 / 767 * var(--100vw));
    height: calc(16 / 767 * var(--100vw));
    filter: none;
  }
}

.fixed-header .header-nav li a img {
  height: calc(18 * var(--ww-px));
}

@media screen and (max-width: 767px) {
  .fixed-header .header-nav li a img {
    height: calc(18 / 767 * var(--100vw));
  }
}

/* .fixed-title {
  position: fixed;
  bottom: calc(362 * var(--lp-px));
  left: calc(30 * var(--lp-px));
}

@media screen and (max-width: 767px) {
  .fixed-title {
    top: calc(30 / 767 * var(--100vw));
    bottom: auto;
    left: calc(144 / 767 * var(--100vw));
    z-index: 2;
  }
}

.fixed-title img {
  width: calc(517 * var(--lp-px));
}

@media screen and (max-width: 767px) {
  .fixed-title img {
    width: calc(240 / 767 * var(--100vw));
  }
}

.fixed-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: calc(66 * var(--lp-px));
  left: calc(30 * var(--lp-px));
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .fixed-btns {
    flex-direction: row;
    right: 0;
    bottom: 0;
    left: 0;
    width: calc(100 * var(--vw));
  }
}

.fixed-btns .btn {
}

@media screen and (max-width: 767px) {
  .fixed-btns .btn {
    width: 50%;
  }
}

.fixed-btns .btn + .btn {
  margin-top: calc(26 * var(--lp-px));
}

.fixed-btns .btn img {
  width: calc(517 * var(--lp-px));
  filter: drop-shadow(calc(10 * var(--lp-px)) calc(10 * var(--lp-px)) calc(20 * var(--lp-px)) rgba(87, 84, 86, 0.5));
}

@media screen and (max-width: 767px) {
  .fixed-btns .btn img {
    width: 100%;
    height: calc(50 / 384 * 80 * var(--vw));
  }
} */

.fixed-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #AE871E;
  background: linear-gradient(90deg, rgba(174, 135, 30, 1) 0%, rgba(197, 171, 70, 1) 20%, rgba(229, 213, 142, 1) 50%, rgba(198, 165, 68, 1) 80%, rgba(192, 161, 66, 1) 100%);
}

.fixed-bg .lp-inner {
  height: 100%;
}

#wrapper {
  padding-top: 0;
}

#mainvisual {
  position: relative;
  margin-top: calc(-160 * var(--ww-px));
  width: 100%;
  overflow: hidden;

  .mv {
    width: 100%;
  }

  .logo {
    position: absolute;
    right: 6%;
    bottom: 1%;
    left: -3%;
    margin-right: auto;
    margin-left: auto;
    width: 109%;
  }
}

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

  .top-text {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    font-size: calc(24 * var(--lp-px));
    line-height: 2;

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

  .info-box {
    margin-top: calc(50 * var(--lp-px));
    padding-top: calc(30 * var(--lp-px));
    padding-bottom: calc(30 * var(--lp-px));
    font-family: "Noto Serif JP", serif;
    border-top: calc(2 * var(--lp-px)) solid #000;
    border-bottom: calc(2 * var(--lp-px)) solid #000;

    .date {
      font-weight: 700;
      font-size: calc(42 * var(--lp-px));
    }

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

    .venue {
      margin-top: calc(20 * var(--lp-px));
      font-weight: 700;
      font-size: calc(30 * var(--lp-px));
    }
  }

  .image-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: calc(50 * var(--lp-px));

    & img {
      width: calc((100% - calc(20 * var(--lp-px))) / 2);
    }
  }
}

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

  .act-list {
    margin-top: calc(30 * var(--lp-px));
    width: 100%;

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

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

      .act-img {
        width: 100%;
      }

      .name-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: calc(20 * var(--lp-px));

        .name {
          font-family: "Noto Serif JP", serif;
          font-weight: 500;
          font-size: calc(42 * var(--lp-px));
          text-align: left;
        }

        .common-sns-list {
          --px: var(--lp-px);
          margin-left: calc(20 * var(--lp-px));
        }
      }

      .comment {
        margin-top: calc(30 * var(--lp-px));
        .common-wysiwyg-text {
          --px: calc(1.2 * var(--lp-px));
          --accent-color: #fff;
          --accent-light-color: rgba(255, 255, 255, 0.5);
          --font: "Noto Serif JP", serif;
        }
      }

      .cover {
        margin-top: calc(30 * var(--lp-px));

        .title {
          margin-bottom: calc(20 * var(--lp-px));
          font-family: "Noto Serif JP", serif;
          font-weight: 500;
          font-size: calc(32 * var(--lp-px));
        }

        & iframe {
          margin-right: auto !important;
          margin-left: auto !important;
        }
      }
    }
  }
}

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

  .ticket-list {
    margin-top: calc(30 * var(--lp-px));
    width: 100%;

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

      .title {
        margin-bottom: calc(20 * var(--lp-px));
        font-family: "Noto Serif JP", serif;
        font-weight: 500;
        font-size: calc(34 * var(--lp-px));
        line-height: 1.5;
      }

      .text {
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-size: calc(26 * var(--lp-px));

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

      .btn-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: calc(26 * var(--lp-px));

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

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

  .title-sub {
    padding-top: calc(20 * var(--lp-px));
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: calc(24 * var(--lp-px));
  }

  .common-wysiwyg-text {
    --px: calc(1.2 * var(--lp-px));
    --accent-color: #fff;
    --accent-light-color: rgba(255, 255, 255, 0.5);
    --font: "Noto Serif JP", serif;
    margin-top: calc(50 * var(--lp-px));
  }

  .insta-image {
    margin-top: calc(30 * var(--lp-px));
    width: 100%;
  }
}

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

  .title-sub {
    padding-top: calc(20 * var(--lp-px));
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: calc(24 * var(--lp-px));
  }

  .list {
    margin-top: calc(50 * var(--lp-px));
    width: 100%;

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

      .question {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-family: "Noto Serif JP", serif;
        font-weight: 700;
        font-size: calc(22 * var(--lp-px));
        text-align: left;

        /* &::before {
          content: "Q";
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: calc(10 * var(--lp-px));
          width: calc(38 * var(--lp-px));
          height: calc(38 * var(--lp-px));
          color: #fff;
          font-family: "Noto Serif JP", serif;
          font-weight: 700;
          font-size: calc(16 * var(--lp-px));
          background: linear-gradient(
            100deg,
            #e72935 0%,
            #82c02e 50%,
            #3aa7df 100%
          );
          border-radius: 50%;
        } */
      }

      .answer {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: calc(20 * var(--lp-px));
        font-family: "Noto Serif JP", serif;
        font-weight: 400;
        font-size: calc(20 * var(--lp-px));
        line-height: 1.4em;

        &::before {
          content: "";
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: calc(30 * var(--lp-px));
          width: calc(66 * var(--lp-px));
          height: calc(66 * var(--lp-px));
          background-size: cover;
          border-radius: 50%;
          border: calc(2 * var(--lp-px)) solid transparent;
        }

        &.tsuruda::before {
          background-image: url('../../img/about/tsuruda.png');
          background-position: 0 73%;
          border-color: #e60c0c;
        }

        &.miya::before {
          background-image: url('../../img/about/miyata.png');
          background-position: 0 17%;
          border-color: #69dd0f;
        }

        &.kazu::before {
          background-image: url('../../img/about/kazushi.png');
          background-position: 0 24%;
          border-color: #e66d11;
        }

        &.yuuki::before {
          background-image: url('../../img/three-man/yuuki.jpg');
          background-position: 56% 0;
          border-color: #1ac7dd;
        }

        &.yosaka::before {
          background-image: url('../../img/three-man/yosaka.jpg');
          background-position: 58% 0;
          border-color: #ff3fc6;
        }

        .common-wysiwyg-text {
          --px: calc(1.2 * var(--lp-px));
          --accent-color: #fff;
          --accent-light-color: rgba(255, 255, 255, 0.5);
          --font: "Noto Serif JP", serif;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: calc(66 * var(--lp-px));
        }
      }

      &.about {
        .answer {
          &::before {
            margin-right: calc(40 * var(--lp-px));
            width: calc(126 * var(--lp-px));
            height: calc(126 * var(--lp-px));
            border-width: calc(3 * var(--lp-px));
          }

          .common-wysiwyg-text {
            min-height: calc(126 * var(--lp-px));

            .name {
              font-weight: 700;
              font-size: calc(18 * var(--lp-px));
            }
          }
        }
      }
    }
  }
}

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

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

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

      .info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: calc(10 * var(--lp-px));

        .date {
          font-family: "Noto Serif JP", serif;
          font-weight: normal;
          font-size: calc(18 * var(--lp-px));
          text-align: left;
          color: #010;
        }

        .new {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          margin-left: calc(10 * var(--lp-px));
          padding-right: calc(20 * var(--lp-px));
          padding-left: calc(20 * var(--lp-px));
          height: calc(32 * var(--lp-px));
          font-family: "Noto Serif JP", serif;
          font-weight: normal;
          font-size: calc(18 * var(--lp-px));
          letter-spacing: 0.05em;
          color: #010;
          background-color: #fff;
          border-radius: calc(16 * var(--lp-px));
        }
      }

      .title {
        font-family: "Noto Serif JP", serif;
        font-weight: 500;
        font-size: calc(20 * var(--lp-px));
        text-align: left;
        color: #010;
      }

      .common-wysiwyg-text {
        --px: calc(1.2 * var(--lp-px));
        --accent-color: #fff;
        --accent-light-color: rgba(255, 255, 255, 0.5);
        --font: "Noto Serif JP", serif;
        margin-top: calc(10 * var(--lp-px));
      }
    }
  }
}

footer {
  background: linear-gradient(
    100deg,
    #e72935 0%,
    #82c02e 50%,
    #3aa7df 100%
  );
}

@media screen and (max-width: 767px) {
  footer {
    padding-bottom: calc(50 / 384 * 80 * var(--vw));
  }
}