@charset "utf-8";

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

@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;
}

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

.fixed-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: var(--lp-main-color);

  @media screen and (max-width: 767px) {
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
  }

  .header-nav {
    position: relative;
    z-index: 1;

    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding-right: 30px;
      padding-left: 30px;
      width: 100%;

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

      & li {
        padding-right: 10px;
        padding-left: 10px;

        + li {
          margin-left: 20px;

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

        a {
          position: relative;
          color: #fff;
          font-weight: 400;
          font-size: 16px;
          letter-spacing: 0.05em;
          text-align: center;

          @media screen and (max-width: 500px) {
            color: var(--lp-main-color);
          }

          &::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            margin-right: auto;
            margin-left: auto;
            width: 0;
            height: 1px;
            background-color: #fff;
            transition: ease 0.2s width;
          }

          @media screen and (max-width: 500px) {
            &::before {
              background-color: var(--lp-main-color);
            }
          }

          &:hover {
            &::before {
              width: 100%;
            }
          }

          &.newtab {
            display: inline-flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            &::after {
              content: "";
              display: block;
              margin-left: 10px;
              width: 14px;
              height: 12px;
              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) {
              &::after {
                background-image: none;
                background-color: var(--lp-main-color);
                filter: none;
                mask: url(../../../img/twilight-river/icon-newtab.svg);
                mask-size: contain;
                mask-repeat: no-repeat;
                -webkit-mask: url(../../../img/twilight-river/icon-newtab.svg);
                -webkit-mask-size: contain;
                -webkit-mask-repeat: no-repeat;
              }
            }
          }
        }
      }
    }
  }
}

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

@media screen and (max-width: 767px) {
  .lp-hamburger-icon {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: var(--lp-main-color);
    border-radius: 50%;

    & span {
      display: block;
      width: 22px;
      height: 1px;
      background-color: #fff;

      &:nth-child(1) {
        position: absolute;
        top: 12px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
      }

      &:nth-child(2) {
        position: absolute;
        top: 20px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
      }

      &:nth-child(3) {
        position: absolute;
        top: 28px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
      }
    }
  }

  .menu-on {
    .lp-hamburger-icon {
      & span {
        &:nth-child(1) {
          left: 8px;
          transform: rotate(45deg);
          transform-origin: top left;
        }

        &:nth-child(2) {
          display: none;
        }

        &:nth-child(3) {
          left: 8px;
          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: 50px;
    padding-bottom: 80px;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: auto;

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

#wrapper {
  padding-top: 52px;

  @media screen and (max-width: 767px) {
    padding-top: 0;
  }
}

#topics {
  .no-content {
    margin-top: 30px;
    text-align: center;
  }
}

footer {
  background: var(--lp-main-color);

  @media screen and (max-width: 767px) {
    padding-bottom: 80px;
  }
}