:root {
  --black: #231815;
  --gray: #e6e6e6;
  --shadow: rgba(0, 0, 0, .25);
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

body {
  color: var(--black);
  text-align: justify;
  font-family: Noto Sans JP, sans-serif;
  font-size: 14px;
  line-height: 24px;
}

h1 {
  letter-spacing: 1px;
  margin-top: -5px;
  margin-bottom: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 50px;
}

p {
  margin-bottom: 0;
}

a {
  color: var(--black);
  text-align: center;
  text-decoration: none;
}

img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
}

.scroll-wrapper {
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.inner {
  width: 250vw;
  height: 250vh;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: row;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto auto 1fr 1fr 1fr;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  align-items: center;
  justify-items: center;
  margin-top: -30%;
  margin-left: -25%;
  transform: scale(.3);
}

.grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.heading-1.english {
  margin-right: 10px;
}

.text-block {
  flex: 1;
  padding: 15px 20px;
}

.text-block.button-appear:hover, .button:hover {
  background-color: var(--gray);
}

.button.member-close, .button.members-close, .button.animation-close {
  width: 150px;
}

.button.animation-close:hover {
  background-color: var(--gray);
}

.button.title-close, .button.koji-labo-close {
  width: 150px;
}

.button.koji-labo-close:hover {
  background-color: var(--gray);
}

.button.millenia-program-close {
  width: 150px;
}

.button.millenia-program-close:hover {
  background-color: var(--gray);
}

.button.tabroid-close {
  width: 150px;
}

.button.tabroid-close:hover {
  background-color: var(--gray);
}

.button.icon:hover, .button.icon:focus {
  background-color: var(--black);
}

.button.gaming-close {
  width: 150px;
}

.frame {
  width: 100%;
  height: 100%;
  border: 3px solid var(--black);
  background-color: #fff;
}

.frame.shadow {
  border-color: var(--black);
  box-shadow: 14px 14px 2px 0 var(--shadow);
}

.frame.shadow.cricle {
  border-radius: 0 50px 0 0;
  overflow: hidden;
}

.frame.shadow.cricle-1 {
  border-radius: 0 50px 50px 0;
  overflow: hidden;
}

.frame.shadow.cricle-2 {
  border-radius: 50px 0 0;
  overflow: hidden;
}

.frame.shadow.cricle-3 {
  border-radius: 50px 50px 0;
  overflow: hidden;
}

.title {
  width: 916px;
  margin-top: 50%;
  margin-left: 25%;
  position: fixed;
}

.members-popup {
  z-index: 1;
  width: 400px;
  margin-top: 35%;
  margin-left: 75%;
  display: none;
  position: fixed;
}

.japanese {
  float: left;
  margin-right: 10px;
}

.english {
  float: left;
}

.window-tab {
  justify-content: space-between;
  display: flex;
}

.window-tab.line {
  border-bottom: 1px solid var(--black);
}

.member-popup {
  width: 900px;
  display: flex;
  position: absolute;
  left: 65%;
}

.line {
  border-bottom: 1px solid var(--black);
}

.member {
  width: 668px;
  margin-top: 35%;
  margin-left: 60%;
  position: fixed;
}

.animation {
  width: 1000px;
  margin-top: 75%;
  margin-left: 0%;
  position: fixed;
}

.animation-popup {
  z-index: 1;
  width: 800px;
  margin-top: 80%;
  display: none;
  position: fixed;
}

.title-popup {
  z-index: 1;
  width: 600px;
  margin-top: 46%;
  margin-left: 34%;
  display: none;
  position: fixed;
}

.body {
  background-image: url('../images/PA_back.svg');
  background-position: 50% 0;
  background-repeat: repeat;
  background-size: auto 33.33vh;
  background-attachment: scroll;
}

.spacer {
  width: 50px;
}

.board-game {
  width: 1044px;
  margin-top: 20%;
  margin-left: -20%;
  position: fixed;
}

.game-board-popup {
  z-index: 1;
  width: 500px;
  margin-top: 30%;
  margin-left: -40%;
  display: none;
  position: fixed;
}

.image-block {
  width: 100%;
}

.millenia-program {
  width: 832px;
  margin-top: 80%;
  margin-left: 75%;
  position: fixed;
}

.millenia-program-popup {
  z-index: 1;
  width: 800px;
  margin-top: 85%;
  margin-left: 80%;
  display: none;
  position: fixed;
}

.koji-labo {
  width: 928px;
  margin-top: 55%;
  margin-left: 95%;
  position: fixed;
}

.koji-labo-popup {
  z-index: 1;
  width: 600px;
  margin-top: 60%;
  margin-left: 85%;
  display: none;
  position: fixed;
}

.link:hover {
  filter: brightness(115%);
}

.tabroid {
  width: 616px;
  margin-top: 47.5%;
  margin-left: -25%;
  position: fixed;
}

.pdf-block {
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.pdf {
  width: 100%;
  height: 100%;
}

.tabroid-popup {
  z-index: 1;
  width: 500px;
  margin-top: 50%;
  margin-left: -15%;
  display: none;
  position: fixed;
}

.footer {
  width: 928px;
  margin-top: 55%;
  margin-left: 95%;
  display: none;
  position: fixed;
}

.desktop:hover, .desktop:focus {
  filter: invert();
}

.sp {
  display: none;
}

.sp:hover, .sp:focus {
  filter: invert();
}

.gaming {
  width: 668px;
  margin-top: 25%;
  margin-left: 105%;
  position: fixed;
}

.gaming-popup {
  z-index: 1;
  width: 400px;
  margin-top: 25%;
  margin-left: 115%;
  display: none;
  position: fixed;
}

@media screen and (max-width: 991px) {
  .scroll-wrapper {
    display: block;
    position: static;
    overflow: visible;
  }

  .inner {
    width: auto;
    height: auto;
    margin-top: 0%;
    margin-left: 0%;
    transform: none;
  }

  .heading-1 {
    margin-top: 0;
    font-size: 14px;
  }

  .button.member-close, .button.members-close, .button.animation-close, .button.title-close, .button.koji-labo-close, .button.millenia-program-close, .button.tabroid-close, .button.gaming-close {
    width: 85px;
  }

  .frame.shadow {
    box-shadow: none;
    border-top-width: 2px;
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
  }

  .frame.shadow.cricle, .frame.shadow.cricle-1, .frame.shadow.cricle-2, .frame.shadow.cricle-3 {
    border-radius: 0;
  }

  .title, .members-popup {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }

  .member-popup {
    width: auto;
    margin: -16px -20px -39px;
    position: static;
  }

  .member, .animation {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }

  .animation-popup {
    width: auto;
    margin-top: 0%;
    margin-bottom: -1px;
    position: static;
  }

  .title-popup {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }

  .body {
    background-image: none;
  }

  .spacer {
    display: none;
  }

  .board-game, .game-board-popup, .millenia-program {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }

  .millenia-program-popup {
    width: auto;
    margin-top: 0%;
    margin-bottom: -1px;
    margin-left: 0%;
    position: static;
  }

  .koji-labo, .koji-labo-popup, .tabroid {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }

  .tabroid-popup {
    width: auto;
    margin-top: 0%;
    margin-bottom: -1px;
    margin-left: 0%;
    position: static;
  }

  .footer {
    width: auto;
    opacity: 1;
    margin-top: 0%;
    margin-left: 0%;
    display: block;
    position: static;
  }

  .image-2 {
    opacity: 0;
  }

  .desktop {
    display: none;
  }

  .sp {
    display: inline-block;
  }

  .gaming, .gaming-popup {
    width: auto;
    margin-top: 0%;
    margin-left: 0%;
    position: static;
  }
}

@media screen and (max-width: 767px) {
  .scroll-wrapper {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective-origin: 50%;
    transform-origin: 50%;
  }

  .frame.shadow {
    border-top-width: 1px;
  }
}

@media screen and (max-width: 479px) {
  .scroll-wrapper {
    justify-content: center;
    align-items: center;
  }

  .inner {
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: auto;
    grid-auto-columns: auto;
    transform: none;
  }
}