@import url("https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=New+Tegomin&family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Yuji+Syuku&display=swap");
body {
  background-color: #000000;
  margin: 0;
}

.global_head {
  margin-bottom: 0;
}

.event {
  background-color: #ffffff;
  box-sizing: border-box;
  font-family: "Note Sans JP", sans-serif;
  font-size: 0.9em;
  margin: 0 auto;
  padding: 56px 16px;
  width: 100%;
  max-width: 800px;
}
@media only screen and (min-width: 768px) {
  .event {
    font-size: 1.1em;
    padding: 56px 48px;
  }
}
.event h1 {
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
.event img {
  vertical-align: bottom;
  width: 100%;
}
.event__hero {
  margin: 0 auto;
  width: 200px;
}
@media only screen and (min-width: 768px) {
  .event__hero {
    width: 250px;
  }
}
.event__logo {
  margin: 32px auto 0 auto;
  width: 300px;
}
@media only screen and (min-width: 768px) {
  .event__logo {
    width: 350px;
  }
}
.event__sub {
  font-size: 1.6rem;
  font-weight: 900;
  line-break: strict;
  margin: 16px auto 0 auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}
@media only screen and (min-width: 768px) {
  .event__sub {
    font-size: 1.8rem;
    text-align: justify;
    -moz-text-align-last: justify;
         text-align-last: justify;
    text-justify: inter-ideograph;
  }
}
.event__casts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 40px auto 0 auto;
}
.event__cast {
  width: 163px;
}
.event__cast figure {
  border: 5px solid #000000;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}
.event__cast-name {
  font-size: 1.2rem;
  font-weight: 600;
  height: 3.4rem;
  margin: 5px auto 0 auto;
  text-align: center;
}
.event__cast-name span {
  display: block;
  font-size: 0.8rem;
}
.event__outline ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: space-between;
  list-style: none;
  margin: 24px auto 0 auto;
  padding: 0;
  width: 100%;
}
.event__col, .event__col--4, .event__col--2, .event__col--1 {
  background-color: #000000;
  box-sizing: border-box;
  color: #ffffff;
  padding: 8px 1rem;
}
.event__col a, .event__col--4 a, .event__col--2 a, .event__col--1 a {
  color: #ffffff;
}
.event__col--1 {
  width: calc(50% - 1px);
}
@media only screen and (min-width: 768px) {
  .event__col--1 {
    width: calc(25% - 2px);
  }
}
.event__col--2 {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .event__col--2 {
    width: calc(50% - 1px);
  }
}
.event__col--4 {
  width: 100%;
}
.event__map {
  margin: 16px auto 0 auto;
}
.event__link {
  margin: 5px auto 0 auto;
  text-align: center;
}
.event__external::before, .event__external--x::before, .event__external--instagram::before {
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 30px;
  margin: 0;
  width: 30px;
}
.event__external--instagram::before {
  background-image: url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>');
}
.event__external--x::before {
  background-image: url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>');
}
.event__ticket {
  margin: 24px auto 0 auto;
}
.event__ticket a {
  background-color: #ef0012;
  color: #ffffff;
  display: block;
  font-size: 1.4rem;
  height: 56px;
  line-height: 56px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.event__ticket a:hover {
  filter: brightness(1.2);
}
@media only screen and (min-width: 768px) {
  .event__ticket a {
    font-size: 1.6rem;
    height: 64px;
    line-height: 64px;
  }
}/*# sourceMappingURL=style.css.map */