/*
Theme Name: The Liminiverse Theme
Theme URI:
Author: Aki Yamamichi
Author URI:
Version: 2.0
*/

@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:focus {
  outline: unset !important;
}
body {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  font-style: normal;
  line-height: 2em;
  letter-spacing: 0.1em;
  background: #222;
}
section {
  background-color: #222;
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: inherit;
  text-decoration: unset;
}
a:hover {
  color: unset;
  text-decoration: none;
}
img {
  width: 100%;
}
hr {
  border-top: 1px solid #888;
}
video {
  width: 100vw;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

@media screen and (min-width: 769px) {
  /*------------------------------------------------------------------------------
  Common
  ------------------------------------------------------------------------------*/
  html {
    font-size: 0.65vw;
  }
  body {
    font-size: 1.8rem;
  }
  /*------------------------------------------------------------------------------
  parts
  ------------------------------------------------------------------------------*/
  .display-pc {
    display: initial;
  }
  .display-mb {
    display: none;
  }
  .sticky__wrapper {
    min-height: 120vh;
  }
  .br-pc {
    display: initial;
  }
  .br-mb {
    display: none;
  }
  .section__space {
    height: 30vh;
  }
  .title--jp {
    font-size: 8rem;
    margin: 0 6rem 0 5%;
  }
  .subtitle--jp {
    font-size: 3.5rem;
    line-height: 5rem;
  }
  .head {
    font-size: 2.2rem;
  }
  .modal--close {
    bottom: unset;
    top: 5.5vh;
    right: 6.5vw;
  }
  .modal__content .container--flex {
    flex-direction: row;
  }
  @keyframes musicFadeIn {
    from {
      opacity: 0;
      bottom: 2.5rem;
    }
    to {
      opacity: 1;
      bottom: 7rem;
    }
  }
  @keyframes musicFadeOut {
    from {
      opacity: 1;
      bottom: 7rem;
    }
    to {
      opacity: 0;
      bottom: 2.5rem;
    }
  }
  @keyframes episodeFadeIn1 {
    from {
      opacity: 0;
      bottom: 2.5rem;
    }
    to {
      opacity: 1;
      bottom: 12rem;
    }
  }
  @keyframes episodeFadeOut1 {
    from {
      opacity: 1;
      bottom: 12rem;
    }
    to {
      opacity: 0;
      bottom: 2.5rem;
    }
  }
  @keyframes episodeFadeIn2 {
    from {
      opacity: 0;
      bottom: 2.5rem;
    }
    to {
      opacity: 1;
      bottom: 17rem;
    }
  }
  @keyframes episodeFadeOut2 {
    from {
      opacity: 1;
      bottom: 17rem;
    }
    to {
      opacity: 0;
      bottom: 2.5rem;
    }
  }
  #music--control {
    bottom: 2rem;
  }
  .option__button--main {
    bottom: 3rem;
  }

  .js-cursor {
    position: fixed;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: exclusion;
    z-index: 100000;
  }
  .js-cursor__main {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity, transform 0.2s;
    will-change: transform;
  }
  .is-moved .js-cursor__main {
    opacity: 1;
  }
  .is-outside .js-cursor__main {
    opacity: 0;
  }

  /*------------------------------------------------------------------------------
  Header
  ------------------------------------------------------------------------------*/
  .header.active {
    overflow-y: unset;
  }
  .header--pc {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .header--mb {
    display: none;
  }
  .header__logo {
    top: 3rem;
    left: 4rem;
  }
  .menu--pc a::after {
    left: -15px;
  }
  .menu--pc {
    display: initial;
    position: absolute;
    top: 4.5rem;
    right: calc(5% + 48px);
    z-index: 9999;
  }
  .menu--pc ul {
    display: flex;
  }
  .menu--pc li {
    position: relative;
    display: flex;
    margin: 0 22px;
  }
  .menu--pc a {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu--pc i {
    color: #666;
    font-size: 21px;
    width: 20px;
  }
  .menu__btn {
    top: 4.5rem;
    right: 4rem;
  }

  .header__menu--pc {
    height: 100vh;
    margin: 20vh 5% 20vh 0;
  }
  .header__menu--pc,
  .header__news--pc {
    width: 50%;
  }
  .header__list--pc {
    display: flex;
    flex-direction: column;
    font-size: 2rem;
  }
  .header__list--pc li {
    line-height: 0.75em;
  }
  .header__list--pc p {
    margin: 0 0 1.5em 1em;
  }
  .link--bottom {
    margin-top: 2em;
    margin-left: 0.5em;
  }
  .header__news--pc {
    margin-top: 20vh;
  }
  .header--news__post .post__contents {
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  .header--news__list {
    padding-left: 1rem;
  }
  .header--news__post {
    height: 12.5vh;
  }
  .header--news__title {
    color: #fff;
    font-weight: bold;
    padding: 1rem;
    margin-bottom: 1.5em;
    border-bottom: 2px solid #fff;
  }
  .header--news__image {
    height: 100%;
    width: 20vw;
  }
  .header--pc a {
    display: block;
  }
  .header--pc li:last-child a {
    margin-bottom: 0;
  }
  .header--pc a p,
  .header--pc a small {
    transition: color 0.5s;
  }
  .header--pc a:hover p,
  .header--pc a:hover small {
    color: #c6b52a;
  }
  .link--share {
    top: 10rem;
    bottom: unset;
    right: 3.25rem;
    flex-direction: column;
  }
  .link--share a {
    margin: 1rem 0 !important;
    padding: 0.25rem 1rem;
  }

  /*------------------------------------------------------------------------------
  Footer
  ------------------------------------------------------------------------------*/
  .menu--footer {
    width: 50%;
  }
  footer img {
    width: 50vw;
  }

  /*------------------------------------------------------------------------------
  Top
  ------------------------------------------------------------------------------*/
  .header--top {
    overflow: hidden;
  }
  .copy--top {
    position: unset;
  }
  .copy--top .first {
    font-size: 10rem;
  }
  .copy--top .rest {
    font-size: 3rem;
    margin-top: 0.5em;
  }
  .title--top {
    left: 4.5rem;
  }

  #top--intro {
    padding: 30vh 0;
  }
  #top--intro .container p::first-letter {
    font-size: 7.5rem;
    line-height: 1;
    margin-right: 0.2em;
  }
  .text--top__intro {
    inline-size: 40em;
  }

  .post--episode {
    margin-right: 5%;
  }
  .post--episode:last-child {
    margin-right: 0;
  }
  .episode__title--top {
    line-height: 1.5;
  }
  .buttons--swiper {
    bottom: 1em;
  }

  #top--about {
    padding-bottom: 27.5vh;
  }
  #top--about .container {
    padding-top: 30vh;
  }
  .container--video {
    width: 100%;
  }
  #video--about {
    width: inherit;
  }
  .text--top__about {
    inline-size: 40em;
    margin: 0 auto;
  }

  .box--top__world {
    right: 50%;
    transform: translateX(100%);
  }
  #top--world img {
    height: 70vh;
    width: 30em;
  }
  .text--top__world {
    inline-size: 30em;
    margin-top: 3em;
  }

  .top--slider__wrapper1,
  .top--slider__slide1 {
    height: 18vw;
  }
  .top--slider__wrapper2,
  .top--slider__slide2 {
    height: 14vw;
  }
  .top--slider__wrapper3,
  .top--slider__slide3 {
    height: 10vw;
  }

  #top--character .img--top__character {
    height: 30vh;
    width: 35vw;
    object-position: top;
  }
  .img--top__character1 {
    top: -35%;
    left: 50%;
  }
  .img--top__character2 {
    top: 35%;
    right: -5%;
  }
  .img--top__character3 {
    top: 50%;
    left: 5%;
  }
  .img--top__character4 {
    top: -10%;
    left: -15%;
  }
  .box--top__character p {
    inline-size: 17em;
  }

  #top--news .post__cat {
    top: 3em;
  }
  .title--top--news {
    position: absolute;
    bottom: -1em;
    right: 1em;
    padding: 1rem 2rem 1rem 3rem;
  }

  /*------------------------------------------------------------------------------
  Lower
  ------------------------------------------------------------------------------*/
  .header--lower {
    height: 45rem;
    background-position: center;
  }
  .header--lower .header--bg::before {
    background: radial-gradient(
      circle at top,
      #fff 0%,
      #fff 5%,
      #b6961a 5%,
      #4b5573 30%,
      #222 90%
    );
  }
  .header--bx {
    left: 10%;
  }
  .header--bx p {
    font-size: 2rem;
    padding-right: 1.4rem;
  }
  .header--lower h1 {
    font-size: 8rem;
    left: 10%;
  }
  .additional__warning {
    padding: 3rem 5rem;
  }

  /*------------------------------------------------------------------------------
  Article
  ------------------------------------------------------------------------------*/
  .header--article {
    width: auto;
    margin-left: unset;
  }
  .header--article .header--bx {
    width: max-content;
    top: 75%;
  }
  .header--article .post__date li {
    margin: 0;
  }
  .header--article h1 {
    font-size: 5rem;
  }
  .article__content {
    margin: 12em 5% 0;
  }

  /*------------------------------------------------------------------------------
  Episode Archive
  ------------------------------------------------------------------------------*/
  .logline__text {
    inline-size: 30em;
    margin: 0 auto;
  }
  .episode__post {
    display: flex;
  }
  .episode__box {
    padding: 3rem;
    justify-content: space-around;
  }
  .episode__image img {
    object-fit: cover;
  }
  .episode__no {
    font-size: 1.2rem;
  }
  .episode__title {
    font-size: 2rem;
  }
  .post__info--episode {
    flex-direction: column;
    align-items: flex-start;
  }

  /*------------------------------------------------------------------------------
  Episode Single
  ------------------------------------------------------------------------------*/
  .footer--episode {
    width: 80vw;
    margin-left: calc(20vw - 2rem);
  }
  .menu--episode .header__logo {
    left: calc(20vw + 4rem);
  }
  .episode__side::-webkit-scrollbar {
    width: 6px;
  }
  .episode__side::-webkit-scrollbar-track {
    background: transparent;
  }
  .episode__side::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }
  .progress--bar {
    width: calc(80vw - 3.5rem);
    left: calc(20vw + 1rem);
  }

  #episode .container {
    width: 80vw;
    margin-left: 20vw;
  }
  .episode__side {
    left: 0;
    width: 20vw;
    transform: none;
  }
  .episode__toggle {
    display: none;
  }
  .episode__share {
    margin: 3em 5% 2em;
  }

  .episode__intro--characters,
  .episode__intro--words {
    padding: 4rem;
  }
  .episode--prev:hover.episode--prev:before,
  .episode--prev:hover.episode--prev:after {
    left: 10%;
  }
  .episode--next:hover.episode--next:before,
  .episode--next:hover.episode--next:after {
    right: 10%;
  }

  /*------------------------------------------------------------------------------
  About
  ------------------------------------------------------------------------------*/
  .prologue__text {
    text-align: center;
  }
  #news--archive .post__date {
    display: initial;
  }
  .guide__list {
    flex-direction: row;
    height: 35vh;
  }
  .guide__list li {
    height: 35vh;
    width: 33.33%;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: unset;
  }
  .guide__list li:last-child {
    border-right: 1px solid #fff;
  }
  .guide__list li:hover {
    width: 100%;
  }
  .guide__box {
    height: 100%;
    width: 100%;
  }
  .guide__text {
    font-size: 4rem;
  }
  .guide__list li:hover .guide__text {
    left: 2em;
    top: 2em;
  }
  .guide__wrapper {
    top: 5rem;
    left: 0;
  }
  .guide__list li:hover .guide__wrapper {
    width: 26em;
    padding: 0.5rem 0.5rem 0.5rem 3em;
  }
  .guide__content {
    bottom: 0;
  }
  .guide__content .button {
    bottom: unset;
    top: 5.5rem;
    right: 12rem;
  }

  /*------------------------------------------------------------------------------
  World
  ------------------------------------------------------------------------------*/
  .world__wrapper {
    background-size: 80vw 50vh;
  }

  /*------------------------------------------------------------------------------
  Characters Archive
  ------------------------------------------------------------------------------*/
  .character__item {
    width: calc(25% - 1rem);
  }
  .character__name--en {
    bottom: 3em;
    left: 2rem;
    font-size: 3rem;
    line-height: 3.5rem;
    margin: 0;
  }
  .character__name--jp {
    font-size: 1.4rem;
  }
  .character__image--modal,
  .character__info {
    width: 50%;
    max-height: max-content;
  }
  .character__info {
    margin-left: 2em;
  }
  .character__name--en--modal {
    font-size: 4rem;
    margin-bottom: 0.5em;
  }

  /*------------------------------------------------------------------------------
  Secrets
  ------------------------------------------------------------------------------*/
  .secret__accordion--children img {
    width: 50%;
    max-width: 500px;
  }

  /*------------------------------------------------------------------------------
  Author
  ------------------------------------------------------------------------------*/
  #message .container {
    padding: 5rem;
  }
  .contact__list {
    width: 600px;
    margin: 0 auto;
  }
  .contact__item {
    column-gap: 2.5rem;
  }

  /*------------------------------------------------------------------------------
  News
  ------------------------------------------------------------------------------*/
  #news .header--bx {
    top: 80%;
  }
  .post__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #news--archive .post {
    width: 48%;
  }
  .post__title {
    font-size: 1.6rem;
  }
  .post__cat--list {
    padding-bottom: 2rem;
  }
  .post__cat a {
    padding: 0.75rem 2rem;
    margin-bottom: 1rem;
  }
  .post__date li {
    margin-right: 0;
  }
}