*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: inherit;
}

button {
  border: none;
  border-radius: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

html {
  font: 16px sans-serif;
}

@media screen and (max-width: 750px) {
  html {
    font: 13px sans-serif;
  }
}

@font-face {
  font-family: wq;
  src: url(../assets/fonts/quin_extra-bold.woff2), url(../../assets/fonts/wano-quin_extra-bold.ttf);
}

@font-face {
  font-family: ns;
  src: url(../assets/fonts/NotoSansJP-Regular.otf);
}

header a {
  font: 2rem "wq";
}

header button {
  font: 1rem "ns";
  color: white;
}

p {
  font: 1.5rem "ns";
  margin-bottom: 2rem;
}

h1 {
  font: 7rem "wq";
  line-height: 1.6ch;
  margin-bottom: .8rem;
}

.table .cell-content--option,
.table .cell-content::before {
  font: 1.5rem serif;
  text-transform: uppercase;
}

.table .cell-content::before {
  font: 2.5rem "ns";
}

.table .cell-content--hour {
  font: 1.5rem "ns";
  color: #e46020;
}

.table .cell-caption {
  font-style: italic;
  margin-bottom: .6rem;
}

#loader {
  z-index: 20;
  background: #e5ddd4;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#loader path {
  stroke: black;
  stroke-linecap: round;
  stroke-width: 10;
  stroke-miterlimit: 3;
}

body {
  background-color: #e5ddd4;
  height: 100vh;
  overflow-y: hidden;
}

#background {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

#background .ball {
  position: absolute;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, #e46020 15%, #e5ddd4 70%);
  border-radius: 50%;
}

#background .ball:nth-child(1) {
  top: -30vw;
  left: 15vw;
}

#background .ball:nth-child(2) {
  top: calc(100vh - 40vw);
  right: 0;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem 2.5rem;
  position: relative;
}

header .line {
  display: block;
  position: absolute;
  bottom: -0.5px;
  left: 2.5rem;
  right: 2.5rem;
  height: 1px;
}

header .line::before {
  background: black;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

header button {
  padding: 0.3rem 1.6rem;
  background: black;
}

#menu {
  width: 5%;
  height: 30px;
  padding: 5px 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-perspective: 100px;
          perspective: 100px;
}

#menu .bar {
  position: absolute;
  top: 4.8px;
  left: 0;
  right: 0;
  height: 2px;
  background: black;
  -webkit-transition: -webkit-transform ease 250ms;
  transition: -webkit-transform ease 250ms;
  transition: transform ease 250ms;
  transition: transform ease 250ms, -webkit-transform ease 250ms;
}

#menu .bar:nth-child(2) {
  top: 19.2px;
}

#menu:hover .bar {
  -webkit-transform: scale3d(1, 2, 1);
          transform: scale3d(1, 2, 1);
}

main {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  -ms-grid-rows: 100%;
      grid-template-rows: 100%;
  position: relative;
}

main .left {
  -ms-flex-item-align: center;
      align-self: center;
  height: 60%;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / span 1;
  padding: 2.5rem;
  margin-bottom: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

main .left .table {
  width: 90%;
  background: #e5ddd4;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
      grid-template-columns: 100%;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  position: relative;
  z-index: 1;
}

main .left .table .line {
  z-index: 5;
  display: inline-block;
  position: absolute;
  background: black;
}

main .left .table .line:nth-child(1) {
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
}

main .left .table .line:nth-child(2) {
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

main .left .table .line:nth-child(3) {
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
}

main .left .table .line:nth-child(4) {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

main .left .table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background: black;
}

main .left .table .cell {
  background-color: #e5ddd4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 1rem 1rem 2rem;
  position: relative;
}

main .left .table .cell:nth-child(5)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: black;
}

main .left .table .cell-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
}

main .left .table .cell-content::before {
  content: "*";
  position: absolute;
  top: 50%;
  left: -.3rem;
  -webkit-transform: translate3d(-100%, -43%, 0);
          transform: translate3d(-100%, -43%, 0);
}

main .middle {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  height: 92%;
}

main .middle .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 90%;
  width: 1px;
  background: black;
}

main .middle .button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: black;
  position: absolute;
  top: calc(90% - 25px);
  left: -25px;
  display: -ms-grid;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
}

main .middle .button path {
  fill: white;
}

main .right {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / span 1;
  position: relative;
}

main .right figure {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

main .right figure img {
  width: 70%;
}

main .right figure:nth-child(1) {
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

main .right figure:nth-child(2) {
  -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
          transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
}

@media screen and (max-width: 700px) and (max-width: 500px) {
  header #login {
    position: absolute;
    left: 0;
    opacity: 0;
  }
  header #menu {
    left: unset;
    right: 2.5rem;
    width: 25px;
  }
}

@media screen and (max-width: 700px) {
  main {
    height: calc(200vh - 120px);
    -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    -ms-grid-rows: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
  }
  main .left {
    height: 80%;
  }
  main .middle {
    top: 25vh;
    left: unset;
    right: 50px;
    height: 37%;
  }
  main .middle .line {
    display: none;
  }
  main .right {
    grid-column: unset;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/span 1;
  }
}

#prev {
  position: fixed;
  top: 0;
  width: 80vw;
  opacity: 0;
  border: 1px solid;
}

#prev:hover {
  opacity: 0;
}

#loader[loaded] {
  -webkit-transition: ease-in opacity 400ms 400ms, ease-in transform 400ms 400ms;
  transition: ease-in opacity 400ms 400ms, ease-in transform 400ms 400ms;
  -webkit-transform: scale3d(2.5, 2.5, 1);
          transform: scale3d(2.5, 2.5, 1);
  opacity: 0;
  pointer-events: none;
}

#loader path.d {
  -webkit-transition: stroke-dashoffset ease 400ms;
  transition: stroke-dashoffset ease 400ms;
  will-change: stroke-dashoffset;
}

header .line {
  -webkit-transition: -webkit-transform ease 250ms 1600ms;
  transition: -webkit-transform ease 250ms 1600ms;
  transition: transform ease 250ms 1600ms;
  transition: transform ease 250ms 1600ms, -webkit-transform ease 250ms 1600ms;
}

header .line::before {
  -webkit-transition: -webkit-transform ease 800ms 800ms;
  transition: -webkit-transform ease 800ms 800ms;
  transition: transform ease 800ms 800ms;
  transition: transform ease 800ms 800ms, -webkit-transform ease 800ms 800ms;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scale3d(0, 1, 1);
          transform: scale3d(0, 1, 1);
}

header #login {
  position: relative;
}

header #login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  border: 1px solid black;
  z-index: -1;
}

header #login button {
  -webkit-transition: -webkit-transform ease 150ms;
  transition: -webkit-transform ease 150ms;
  transition: transform ease 150ms;
  transition: transform ease 150ms, -webkit-transform ease 150ms;
}

header #login button:hover {
  -webkit-transform: translate3d(4px, 4px, 0);
          transform: translate3d(4px, 4px, 0);
}

header #login button:active {
  -webkit-transition: -webkit-transform ease 50ms;
  transition: -webkit-transform ease 50ms;
  transition: transform ease 50ms;
  transition: transform ease 50ms, -webkit-transform ease 50ms;
  -webkit-transform: translate3d(0px, 0px, 0);
          transform: translate3d(0px, 0px, 0);
}

main .left .table .line {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

main .left .table .line:nth-child(1), main .left .table .line:nth-child(4) {
  -webkit-transform: scale3d(0, 1, 1);
          transform: scale3d(0, 1, 1);
}

main .left .table .line:nth-child(2), main .left .table .line:nth-child(3) {
  -webkit-transform: scale3d(1, 0, 1);
          transform: scale3d(1, 0, 1);
}

main .left .table .cell {
  overflow: hidden;
}

main .left .table .cell .cell-caption,
main .left .table .cell .cell-content {
  -webkit-transform: translate3d(0, 160px, 0);
          transform: translate3d(0, 160px, 0);
}

main .left .table .cell::after {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale3d(0, 1, 1);
          transform: scale3d(0, 1, 1);
}

main .middle .line {
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: scale3d(1, 0, 1);
          transform: scale3d(1, 0, 1);
}

main .middle .button {
  overflow: hidden;
}

main .middle .button svg {
  -webkit-transform: translate3d(0, -40px, 0);
          transform: translate3d(0, -40px, 0);
}

main .button {
  -webkit-transform: scale3d(0, 0, 1);
          transform: scale3d(0, 0, 1);
}

body[l] header .line:nth-child(1) {
  -webkit-transform: rotate3d(0, 0, 1, 1deg);
          transform: rotate3d(0, 0, 1, 1deg);
}

@media screen and (max-width: 800px) {
  body[l] header .line:nth-child(1) {
    -webkit-transform: rotate3d(0, 0, 1, 1.5deg);
            transform: rotate3d(0, 0, 1, 1.5deg);
  }
}

@media screen and (max-width: 500px) {
  body[l] header .line:nth-child(1) {
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
            transform: rotate3d(0, 0, 1, 2deg);
  }
}

body[l] header .line::before {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

body[l] main .middle .line {
  -webkit-transition: -webkit-transform ease 800ms 1040ms;
  transition: -webkit-transform ease 800ms 1040ms;
  transition: transform ease 800ms 1040ms;
  transition: transform ease 800ms 1040ms, -webkit-transform ease 800ms 1040ms;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

body[l] main .middle .button {
  -webkit-transition: -webkit-transform ease 250ms 2400ms;
  transition: -webkit-transform ease 250ms 2400ms;
  transition: transform ease 250ms 2400ms;
  transition: transform ease 250ms 2400ms, -webkit-transform ease 250ms 2400ms;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

body[l] main .middle .button svg {
  -webkit-transition: -webkit-transform ease 250ms 2450ms;
  transition: -webkit-transform ease 250ms 2450ms;
  transition: transform ease 250ms 2450ms;
  transition: transform ease 250ms 2450ms, -webkit-transform ease 250ms 2450ms;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

body[l] main .middle .button:hover {
  -webkit-transition: ease 50ms transform;
  transition: ease 50ms transform;
  -webkit-transform: scale3d(1.15, 1.15, 1.15);
          transform: scale3d(1.15, 1.15, 1.15);
}

body[l] main .middle .button:active {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

body[l] main .left .table {
  -webkit-transform: translate3d(1rem, 1rem, 0);
          transform: translate3d(1rem, 1rem, 0);
  -webkit-transition: -webkit-transform ease 400ms 4010ms;
  transition: -webkit-transform ease 400ms 4010ms;
  transition: transform ease 400ms 4010ms;
  transition: transform ease 400ms 4010ms, -webkit-transform ease 400ms 4010ms;
}

body[l] main .left .table .line {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
}

body[l] main .left .table .line:nth-child(1), body[l] main .left .table .line:nth-child(2) {
  -webkit-transition: -webkit-transform ease 480ms 2550ms;
  transition: -webkit-transform ease 480ms 2550ms;
  transition: transform ease 480ms 2550ms;
  transition: transform ease 480ms 2550ms, -webkit-transform ease 480ms 2550ms;
}

body[l] main .left .table .line:nth-child(3), body[l] main .left .table .line:nth-child(4) {
  -webkit-transition: -webkit-transform ease 480ms 3030ms;
  transition: -webkit-transform ease 480ms 3030ms;
  transition: transform ease 480ms 3030ms;
  transition: transform ease 480ms 3030ms, -webkit-transform ease 480ms 3030ms;
}

body[l] main .left .table .cell::after {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform ease 480ms 2670ms;
  transition: -webkit-transform ease 480ms 2670ms;
  transition: transform ease 480ms 2670ms;
  transition: transform ease 480ms 2670ms, -webkit-transform ease 480ms 2670ms;
}

body[l] main .left .table .cell-caption,
body[l] main .left .table .cell-content {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

body[l] main .left .table .cell:nth-child(5) .cell-caption,
body[l] main .left .table .cell:nth-child(5) .cell-content {
  -webkit-transition: -webkit-transform ease 350ms 3510ms;
  transition: -webkit-transform ease 350ms 3510ms;
  transition: transform ease 350ms 3510ms;
  transition: transform ease 350ms 3510ms, -webkit-transform ease 350ms 3510ms;
}

body[l] main .left .table .cell:nth-child(6) .cell-caption,
body[l] main .left .table .cell:nth-child(6) .cell-content {
  -webkit-transition: -webkit-transform ease 350ms 3660ms;
  transition: -webkit-transform ease 350ms 3660ms;
  transition: transform ease 350ms 3660ms;
  transition: transform ease 350ms 3660ms, -webkit-transform ease 350ms 3660ms;
}

body[l] main .left .table::before {
  -webkit-transition: -webkit-transform ease 400ms 4010ms;
  transition: -webkit-transform ease 400ms 4010ms;
  transition: transform ease 400ms 4010ms;
  transition: transform ease 400ms 4010ms, -webkit-transform ease 400ms 4010ms;
  -webkit-transform: translate3d(-1rem, -1rem, 0);
          transform: translate3d(-1rem, -1rem, 0);
}

body[l] main .right figure:nth-child(1) {
  -webkit-transition: -webkit-transform ease 250ms 5210ms;
  transition: -webkit-transform ease 250ms 5210ms;
  transition: transform ease 250ms 5210ms;
  transition: transform ease 250ms 5210ms, -webkit-transform ease 250ms 5210ms;
  -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -20deg);
          transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -20deg);
}

body[l] main .right figure:nth-child(2) {
  -webkit-transition: -webkit-transform ease 250ms 5310ms;
  transition: -webkit-transform ease 250ms 5310ms;
  transition: transform ease 250ms 5310ms;
  transition: transform ease 250ms 5310ms, -webkit-transform ease 250ms 5310ms;
  -webkit-transform: rotate3d(0, 0, 1, 20deg) translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
          transform: rotate3d(0, 0, 1, 20deg) translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
}
/*# sourceMappingURL=style.css.map */