body,
html {
  margin: 0;
  background: url(../img/white.webp);
  background-repeat: repeat;
}

img,
svg,
.top,
.tickets,
.story,
.how_to_play {
  /* PCでの右クリック禁止 */
  pointer-events: none;

  /* スマホでの長押し禁止 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -khtml-touch-callout: none;
  -khtml-user-drag: none;
  user-select: none;
}

/* メニューのクリックのみ許可 */
.top > .menu,
.top > .ticket_info,
.clickable {
  pointer-events: all;
}

/* 文字列, URLのクリックは許可 */
p,
li,
td,
a {
  pointer-events: all;
  user-select: text;
}

/* 印刷対策 */
@media print {
  body {
    display: none;
  }
}

body {
  position: relative;
}

.load {
  width: 100vw;
  height: 100vh;
  background-color: white;
  position: fixed;
  z-index: 100;
  transition: all 0.4s linear;
}

.load.none {
  background-color: transparent;
}

.load > .logo {
  position: absolute;
  z-index: 120;
  max-width: 500px;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: none;
}

.load > .logo.start {
  display: block;
  animation: logo_anim 3s forwards ease;
}

@keyframes logo_anim {
  0% {
    display: block;
    opacity: 0;
    filter: blur(5px);
  }
  20% {
    opacity: 1;
    filter: none;
  }
  80% {
    opacity: 1;
    filter: none;
  }
  100% {
    opacity: 0;
  }
}

.load > .waves {
  position: absolute;
  left: -10vw;
  width: 120vw;
  top: 100vh;
  z-index: 120;
}

.load > .waves.start {
  animation: wave_anim 4s forwards ease-in-out;
}

.load > .waves > img {
  height: 900px;
  width: 100%;
  filter: blur(10px);
  object-fit: cover;
}

.load > .waves > .sea {
  position: absolute;
  top: 870px;
  width: 150vw;
  height: 100vh;
  background-color: #0693e3;
  filter: blur(10px);
  z-index: 110;
}

@keyframes wave_anim {
  0% {
    top: 90vh;
  }
  86% {
    top: -62vh;
    opacity: 1;
  }
  100% {
    top: -80vh;
    opacity: 0;
  }
}

#bubbles {
  position: absolute;
  width: 200vw;
  height: 100vh;
  top: 0;
  z-index: 140;
}

#bubbles > .b {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0) 0%,
    rgba(204, 223, 255, 0.3015800070028011) 41%,
    rgba(204, 223, 255, 1) 93%,
    rgba(172, 204, 255, 1) 95%,
    rgba(255, 255, 255, 1) 100%
  );
  position: absolute;
  animation: bubble_anim 4s linear forwards;
  filter: blur(0.3px);
}

@keyframes bubble_anim {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(-150px);
  }
}

.fixed {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  z-index: 50;
  pointer-events: none;
}

.fixed > .social {
  position: absolute;
  left: 25px;
  bottom: 25px;
  background-color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: all;
}

.fixed > .social > .twitter {
  width: 30px;
  height: 25px;
  background: url(../img/social/twitter_logo_blue.svg);
  background-size: cover;
  display: block;
  margin: 8px;
  z-index: 55;
}

.fixed > .social > .line {
  width: 25px;
  height: 25px;
  background: url(../img/social/line_logo.png);
  background-size: cover;
  display: block;
  margin: 8px;
  z-index: 55;
}

.fixed > .social > .x {
  width: 25px;
  height: 25px;
  background: url(../img/social/x_logo.svg);
  background-size: cover;
  display: block;
  margin: 8px;
  z-index: 55;
}

.fixed > .social > .more {
  width: 20px;
  height: 20px;
  background: url(../img/social/more.svg);
  background-size: cover;
  display: block;
  margin: 10px;
  z-index: 55;
  outline: none;
  border: none;
}

.fixed > .social > * {
  font-size: 0;
  color: transparent;
}

.fixed > .social > .bar {
  height: 0.5px;
  width: calc(100% - 4px);
  background: linear-gradient(
    to right,
    transparent,
    rgb(44, 44, 44) 30%,
    rgb(44, 44, 44) 70%,
    transparent 100%
  );
  margin: 5px 0;
}

.fixed > .social > .only-share {
  display: none;
}

.fixed > .social::before {
  content: "share";
  display: inherit;
  width: 50px;
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotateZ(-90deg);
  background-color: white;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.4s ease;
  font-size: xx-small;
  text-align: center;
  color: black;
  pointer-events: none;
  filter: blur(3px);
  justify-content: center;
}

.fixed > .social:hover::before {
  opacity: 1;
  transform: translateX(calc(-50% - 35px)) translateY(-50%) rotateZ(-90deg);
  filter: none;
}

.fixed > .ticket_info {
  transition: all 0.4s ease;
  position: absolute;
  right: 15px;
  bottom: 0px;
  display: flex;
  width: 150px;
  height: 50px;
  border-radius: 2px;
  border: 1px solid #f7e066;
  background: #ef940c;
  font-size: small;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.fixed > .ticket_info:link,
.fixed > .ticket_info:visited {
  color: white;
  text-decoration: none;
}

.fixed > .ticket_info > svg {
  text-align: center;
  height: 8px;
  width: 10px;
  margin: 3px;
  position: absolute;
  bottom: 3px;
}

.top {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.top > .key_bg {
  display: none;
  width: 100%;
}

.top > .key_bg_sp {
  display: block;
  width: 100%;
}

.top > .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: auto;
  position: absolute;
  top: 40px;
  left: 40px;
  padding: 0 30px;
  font-family: "Noto Sans JP", sans-serif;
  color: gray;
  z-index: 50;
}
.top > .menu::before {
  position: inherit;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 40px;
  background: #fff;
  filter: blur(20px);
  z-index: 1;
}

.top > .menu > .bar {
  width: 2px;
  height: 20px;
  transform: rotateZ(25deg);
  background-color: #a7a7a7;
  z-index: 10;
}

.top > .menu > .item > a:link,
.top > .menu > .item > a:visited {
  color: black;
  text-decoration: none;
}

.top > .menu > .item {
  z-index: 10;
  margin: 20px 10px;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}

@media (max-width: 900px) {
  .top > .menu {
    display: none;
  }
}

.logo_container {
  width: 530px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}

.logo_container::before {
  display: inherit;
  content: "";
  width: 100%;
  height: 100%;
  filter: blur(25px);
  position: absolute;
  z-index: -1;
  background-color: rgba(79, 79, 79, 0.306);
  border-radius: 120px;
}

.top > .logo_container > .logo {
  position: relative;
  width: 450px;
  z-index: 10;
  margin: 30px 40px;
  /* filter: contrast(140%) saturate(200%) */
}

.top > .calette_logo {
  position: absolute;
  width: 100px;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}

.top > .bottom {
  position: absolute;
  width: 110vw;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(58, 58, 58, 0) 0%,
    rgba(31, 31, 31, 0.86) 100%
  );
  filter: blur(5px);
  bottom: -5px;
  left: -5vw;
  z-index: 20;
}

@media (min-width: 1200px) {
  .top > .key_bg {
    display: block;
  }

  .top > .key_bg_sp {
    display: none;
  }
}

@media (max-width: 1200px) {
  .top {
    background-position-x: center;
    background-position-y: top;
  }
}

@media (max-width: 530px) {
  .top > .logo_container {
    width: 100%;
  }

  .top > .logo_container > .logo {
    width: calc(100% - 60px);
  }
}

.story {
  background-image: url("../img/story_bg.webp");
  background-repeat: repeat;
  background-clip: 10px;

  position: relative;
  overflow: hidden;
  -webkit-mask-image: url(../img/splash_effect.webp);
  mask-image: url(../img/splash_effect.webp);
  -webkit-mask-size: calc(100vw * 32) 100%;
  mask-size: calc(100vw * 32) calc(100vh);
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: mask-position;
}

.story > .container {
  position: relative;
  border: 2px solid rgb(221, 247, 253);
  border-top: none;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
  min-width: 500px;
  max-width: 800px;
  transition: all 1s ease;
}

.story > .container::before {
  content: "";
  display: inherit;
  position: absolute;
  width: calc(50% - 70px);
  height: 0;
  border-top: 2px solid rgb(221, 247, 253);
  top: 0;
  left: 0;
}

.story > .container::after {
  content: "";
  display: inherit;
  position: absolute;
  width: calc(50% - 70px);
  height: 0;
  border-top: 2px solid rgb(221, 247, 253);
  top: 0;
  right: 0;
}

.story > .container > .title {
  display: block;
  transform: translateY(-40%);
  width: 90px;
  margin-left: auto;
  margin-right: auto;
}

.story > .container > .synopsis {
  text-align: center;
  margin: 20px;
  margin-top: -20px;
  margin-bottom: 40px;
  color: white;
  font-family: "Noto Serif JP", serif;
  line-height: 170%;
  font-size: 120%;
}

.story > .container > .synopsis::before {
  content: "";
  display: inherit;
  position: absolute;
  background: rgba(47, 47, 47, 0.31);
  filter: blur(5px);
  width: calc(100% - 40px);
  height: calc(100% - 60px);
  z-index: 1;
}

.story > .container > .synopsis > * {
  position: relative;
  z-index: 10;
}

.story > .container > .synopsis > p > span {
  background: linear-gradient(transparent 80%, rgba(54, 97, 249, 0.56) 80%);
  font-weight: bolder;
}

.story > .container > .synopsis > p > br.sp {
  display: none;
}

@media (max-width: 900px) {
  .story > .container {
    border: none;
  }

  .story > .container::before {
    width: 100px;
    left: calc(50% - 170px);
  }

  .story > .container::after {
    width: 100px;
    right: calc(50% - 170px);
  }

  .story > .container > .synopsis::before {
    height: calc(100% - 0px);
    bottom: -20px;
  }
}

@media (max-width: 750px) {
  .story > .container > .synopsis > p > br.sp {
    display: inline;
  }
}

@media (max-width: 500px) {
  .story > .container {
    border-left: none;
    border-right: none;
    width: 100%;
    min-width: 0;
  }

  .story > .container > .title {
    width: 80px;
  }

  .story > .container > .synopsis {
    margin: 5px;
    width: calc(100% - 10px);
    overflow: hidden;
    font-size: small;
  }

  .story > .container > .synopsis::before {
    width: calc(100% - 10px);
  }
}

@media (max-width: 350px) {
  .story > .container > .title {
    width: 60px;
  }

  .story > .container > .synopsis {
    width: 100%;
    overflow: hidden;
    font-size: x-small;
  }
}

.story > .black_board {
  position: relative;
  height: 180px;
  width: 500px;
  margin: 20px auto;
  background: #37514a;
  font-family: "Zen Kurenaido", sans-serif;
  color: white;
  overflow: hidden;
}

.story > .black_board::after {
  position: absolute;
  content: "";
  display: inherit;
  width: 100%;
  height: 3px;
  background: #945d0c;
  bottom: 0;
}

.story > .black_board > .container {
  margin: 20px;
}

.story > .black_board > .container > ul > li {
  font-size: 80%;
  padding: 5px 0;
}

.story > .black_board > .container > ul > li > span {
  position: relative;
  font-size: 140%;
  margin-right: 5px;
  background: linear-gradient(
      transparent 75%,
      rgba(246, 230, 90, 0.61) 80%,
      rgba(246, 230, 90, 0.61) 95%,
      transparent 100%
    ),
    url(/assets/img/noise.svg);
}

.story > .black_board > .container > ul > li > span.link {
  background: linear-gradient(
      transparent 75%,
      rgba(29, 110, 223, 0.61) 80%,
      rgba(29, 110, 223, 0.61) 95%,
      transparent 100%
    ),
    url(/assets/img/noise.svg);
}

.story > .black_board > .container > ul > li > span.link > a {
  color: white;
  text-decoration: none;
}

.story > .black_board > .container > .chalk {
  width: 20px;
  height: 5px;
  display: block;
  position: absolute;
  bottom: 0px;
}

.story > .black_board > .container > .chalk.red {
  background-color: #df1dbc;
}

.story > .black_board > .container > .chalk.yellow {
  background-color: #f6e65a;
}

.story > .black_board > .container > .chalk.white {
  background-color: #d9d9d9;
}

.story > .black_board > .container > .eraser {
  position: absolute;
  width: 40px;
  height: 6px;
  bottom: 3px;
  background: #1b46b3;
  right: 10%;
}

.story > .black_board > .container > .eraser::before {
  position: absolute;
  display: inherit;
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 1px 1px 0px 0px;
  background: #fbbd46;
  top: -4px;
}

.story > .black_board > .container > .eraser::after {
  position: absolute;
  display: inherit;
  content: "";
  width: 4px;
  height: 6px;
  background: #393939;
  top: -6px;
  left: 18px;
}

@media (max-width: 500px) {
  .story > .black_board {
    width: 100%;
  }

  .story > .black_board > .container {
    font-size: smaller;
  }
}

.how_to_play {
  background: url(../img/how_to_play_bg.svg);
  position: relative;
  overflow: hidden;
  z-index: 0;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-mask-image: url(../img/splash_effect.webp);
  mask-image: url(../img/splash_effect.webp);
  -webkit-mask-size: calc(100vw * 32) 100%;
  mask-size: calc(100vw * 32) 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: mask-position;
}

.how_to_play::before {
  position: absolute;
  content: "";
  display: inherit;
  width: 100%;
  height: 100%;
  backdrop-filter: opacity(30%);
  background: rgba(84, 146, 160, 0.669);
  z-index: 0;
}

.how_to_play > .title {
  position: relative;
  text-align: center;
  margin: 60px auto 30px auto;
  color: white;
  z-index: 10;
  font-size: x-large;
  width: 150px;
}

.how_to_play > .title::before {
  content: "";
  display: inherit;
  position: absolute;
  top: 50%;
  width: 200px;
  height: 1px;
  background-color: white;
  left: -200px;
}

.how_to_play > .title::after {
  content: "";
  display: inherit;
  position: absolute;
  top: 50%;
  width: 200px;
  height: 1px;
  background-color: white;
  right: -200px;
}

.how_to_play > .container {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  flex-direction: column;
}

.how_to_play > .container > .box {
  border-radius: 16px;
  background: #fff;
  width: 90%;
  max-width: 600px;
  height: 160px;
  margin: 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how_to_play > .container > .box > img {
  height: 35px;
}

.how_to_play > .container > .box > h3 {
  text-align: center;
  margin: 3px 0;
}

.how_to_play > .container > .box > p {
  text-align: center;
  font-size: medium;
  margin: 0;
}

.how_to_play > .container > .arrow::before {
  content: ">";
  display: inherit;
  color: white;
  transform: rotateZ(90deg);
}

.tickets {
  background-image: url(../img/key-bg-sp.webp);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: url(../img/splash_effect.webp);
  mask-image: url(../img/splash_effect.webp);
  -webkit-mask-size: calc(100vw * 32) 100%;
  mask-size: calc(100vw * 32) 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: mask-position;
}

.tickets > .tickets_inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(124, 173, 245, 0.67);
  backdrop-filter: blur(10px);
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tickets > .tickets_inner > .title {
  position: relative;
  z-index: 10;
  display: block;
  width: 120px;
  margin: 30px auto;
}

.tickets > .tickets_inner > .info {
  position: relative;
  width: 80%;
  max-width: 550px;
  min-width: 400px;
  height: max-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
}

.tickets > .tickets_inner > .info > svg {
  position: relative;
  display: block;
  z-index: 10;
  width: 80%;
  max-width: 500px;
  height: max-content;
  margin: 30px auto;
}

.tickets > .tickets_inner > .faq {
  width: 100%;
  max-width: 700px;
  position: relative;
  z-index: 20;
  margin: 50px auto;
  background: url(../img/paper.webp);
  overflow: hidden;
  font-family: "Zen Kurenaido", sans-serif;
}

.tickets > .tickets_inner > .faq > h2 {
  text-align: center;
  font-weight: 300;
  font-size: large;
}

.tickets > .tickets_inner > .faq > .item {
  margin: 15px 35px;
}

.tickets > .tickets_inner > .faq > .item > .question {
  font-size: larger;
  margin: 0;
}

.tickets > .tickets_inner > .faq > .item > .answer {
  font-size: medium;
  margin: 0;
  margin-left: 25px;
}

.tickets > .tickets_inner > .faq > .item > .answer > a {
  text-decoration: none;
}

.tickets > .tickets_inner > .faq > .item > .answer > a {
  background: linear-gradient(
      transparent 75%,
      rgba(29, 110, 223, 0.61) 80%,
      rgba(29, 110, 223, 0.61) 95%,
      transparent 100%
    ),
    url(/assets/img/noise.svg);
}

.tickets > .tickets_inner > .faq > .item > div.answer {
  margin-left: 0;
}

.tickets > .tickets_inner > .faq > .item > .answer > ul > li {
  margin: 5px 0;
}

.ticket_container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.event_notice {
  width: 90%;
  max-width: 400px;
  text-align: center;
  background: url(../img/paper.webp);
  margin: 10px;
}

.event_table {
  position: relative;
  width: calc(100% - 20px);
  max-width: 300px;
  text-align: center;
  left: auto;
  right: auto;
  margin: 10px;
}

.ticket_table {
  position: relative;
  width: 80%;
  max-width: 400px;
  margin: 10px;
  text-align: center;
  left: auto;
  right: auto;
  background: url(../img/paper.webp);
  padding: 10px;
}

.ticket_table > tr.outline > td {
  border: black 1px solid;
}

.ticket_notice {
  font-family: "Zen Kurenaido", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 40px;
  margin: 20px;
  width: 90%;
  max-width: 600px;
  background: url(../img/paper.webp);
}

.ticket_notice > ul {
  padding-left: 35px;
  list-style-type: "※";
}

.ticket_notice > .buy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 400px;
  height: 80px;
  margin: 5px;
  background: url("../img/brushed.webp");
  filter: drop-shadow(-1px 4px 3px grey);
  color: rgb(232, 34, 87);
}

.ticket_notice > .buy > * {
  margin: 0;
}

.access {
  background: url(../img/paper.webp);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 20px 0;

  width: 100%;
  max-width: 800px;
  font-family: "Zen Kurenaido", sans-serif;
}

.access > img {
  margin: 10px;
  width: calc(100% - 40px);
  max-width: 600px;
}

.access > p {
  margin: 20px 10px;
  font-size: 0.9rem;
}

.schedule_table {
  border-collapse: collapse;
  margin: 1rem auto;
  background-color: white;
  text-align: center;
}

.schedule_table th,
.schedule_table td {
  width: 70px;
  /* padding: 1rem; */
  border: 1px solid black;
}

.schedule_table tr:nth-child(1) th {
  font-size: 1.3rem;
}

.schedule_table tr:nth-child(2n) td {
  border-bottom: none;
  font-size: 1.3rem;
  font-weight: bold;
}

.schedule_table tr:nth-child(2n) td:nth-child(6) {
  color: #2e3190;
}
.schedule_table tr:nth-child(2n) td:nth-child(7) {
  color: #8f1d24;
}

.schedule_table tr:nth-child(2n + 3) td {
  border-top: none;
  line-height: 1.3rem;
}

.schedule_table tr:nth-child(1) th:nth-child(6) {
  background-color: #2e3190;
  color: white;
}

.schedule_table tr:nth-child(1) th:nth-child(7) {
  background-color: #8f1d24;
  color: white;
}

.schedule_table tr:nth-child(2n + 3) td:nth-child(n + 5),
.schedule_table tr:nth-child(2n) td:nth-child(n + 5) {
  background: rgba(236, 215, 0, 0.25);
}

.schedule_table tr:nth-child(7) td:nth-child(3),
.schedule_table tr:nth-child(6) td:nth-child(3) {
  background: rgba(236, 215, 0, 0.25);
}

.hash_tag {
  color: #495bf8;
  font-weight: 600;
  text-decoration: underline;
}

footer {
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

footer > table {
  width: 90%;
  max-width: 500px;
  display: block;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  margin: 20px 0;
}
footer > table > tbody > tr > td {
  width: 50%;
  max-width: 250px;
  height: auto;
  padding: 30px;
}
footer > table > tbody > tr > td > a {
  display: block;
  width: 100%;
  height: auto;
}

footer > table > tbody > tr > td > a > img {
  width: 100%;
  height: auto;
}

footer > .copy_right {
  margin-top: 30px;
  margin-bottom: 30px;
  color: black;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 30px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}

@media (max-width: 200px) {
  footer > a > .calette_logo {
    height: auto;
    width: 100%;
    margin: 30px auto;
    display: block;
  }
}

html {
  /* スクロールのスムース化 */
  scroll-behavior: smooth;
}

tr {
  display: table-row;
}