@charset "UTF-8";

html {
  font-size: calc(100vw * 10 / 375);
  overflow-x: hidden;
}

/* =========================
   Common
========================= */
.inner {
  width: 100%;
  padding: 0 5.333vw;
}
.title_section {
  font-size: 3.2rem;
}
.title_sub {
  margin-bottom: 8vw;
}

/* =========================
   Header / Hamburger
========================= */
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 13.333vw;
}
.nav_global {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14vw;
  position: fixed;
  top: 13.333vw;
  left: 0;
  width: 100%;
  height: 0;
  padding: 0 5.333vw;
  background-color: #000;
  box-sizing: border-box;
  transition: all .5s ease;
  overflow: hidden;
}
.nav_global.open {
  height: calc(100dvh - 13.333vw);
}
.nav_global ul {
  flex-direction: column;
  width: 74vw;
  height: auto;
  font-size: 2.4rem;
  margin: 0 auto;
}
.nav_global ul li {
  width: 100%;
  text-align: center;
}
.nav_global ul li + li {
  border-left: none;
  border-top: solid 1px #B6A66C;
}
.nav_global ul li a {
  padding: .8em 0;
}
.nav_global .banner {
  display: flex;
  justify-content: center;
  gap: 5.333vw;
}
.nav_global .banner a {
  width: 42.0005vw;
}
.hamburger-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 13vw;
  height: 6vw;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
  z-index: 11;
}
.hamburger-menu span {
  display: block;
  width: 100%;
  height: .5vw;
  background: #B6A66C;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.hamburger-menu.open span {
  width: 80%;
}
.hamburger-menu.open span:nth-child(1) {
  transform: translateY(2.9vw) rotate(30deg);
}
.hamburger-menu.open span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.open span:nth-child(3) {
  transform: translateY(-2.9vw) rotate(-30deg);
}

/* =========================
   Main
========================= */
main {
  margin-top: 13.333vw;
}

/* =========================
   Mv
========================= */
#mv {
  height: 141.6vw;
  background-image: url("../img/bg_mv_sp@2x.jpg");
}
#mv .logo_kingdom {
  top: 85vw;
  left: 0;
  width: 100vw;
}
#mv .copy_mv_01 {
  top: -1vw;
  right: -1vw;
  width: 16vw;
}
#mv .copy_mv_02 {
  top: -1vw;
  left: -1vw;
  width: 16vw;
}
#mv .logo_20th {
  bottom: 1em;
  right: 1em;
  width: 10vw;
}

/* =========================
   News
========================= */
#news {
  padding: 10.666vw 0;
}
#news .list_news {
  width: 80vw;
}
#news .list_news li {
  align-items: flex-start;
  font-size: 1.4rem;
}

/* =========================
   Schedule
========================= */
#schedule {
  padding-top: 10.666vw;
}
#schedule .content_schedule h3 {
  font-size: 2.2rem;
}
#schedule .content_schedule h3 small {
  font-size: .727em;
}
#schedule .content_schedule .list_schedule {
  flex-direction: column;
  gap: 8vw;
  width: 80vw;
  margin: 0 auto;
}
#schedule .content_schedule .list_schedule li {
  width: 100%;
}
#schedule .content_schedule .list_schedule li h4 {
  font-size: 2.4rem;
}
#schedule .content_schedule .list_schedule li .date {
  font-size: 3.6rem;
}
#schedule .content_schedule .list_schedule li .contact {
  font-size: 1.2rem;
  margin-top: 2.666vw;
}
#schedule .img_schedule {
  margin-top: 10.666vw;
}

/* =========================
   Ticket
========================= */
#ticket {
  padding-top: 10.666vw;
}
#ticket .content_ticket .release {
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 8vw;
}
#ticket .content_ticket .list_playguide {
  flex-direction: column;
  gap: 5.333vw;
}
#ticket .content_ticket .list_playguide li a {
  width: 100%;
  font-size: 1.8rem;
}
#ticket .content_ticket .price {
  font-size: 2.0rem;
  margin-top: 8vw;
}
#ticket .content_ticket .img_exclusive-merchandise {
  width: 100%;
  margin: 4vw auto 0;
}
#ticket .content_ticket .note_ticket {
  width: 100%;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-top: 8vw;
}
#ticket .img_ticket {
  margin-top: 10.666vw;
}

/* =========================
   About
========================= */
#about {
  padding-top: 10.666vw;
}
#about .content_about .description {
  text-align: left;
  margin-bottom: 10.666vw;
}
#about .content_about .description p {
  font-size: 1.6rem;
  font-weight: 700;
}
#about .content_about .description small {
  font-size: 1.4rem;
  font-weight: 700;
}
#about .content_about .cinema .title {
  font-size: 2.4rem;
  font-weight: 700;
}
#about .content_about .cinema .data {
  font-size: 1.4rem;
}
#about .content_about .cinema .staff {
  font-size: 1.4rem;
}
#about .content_about .cinema .composition {
  font-size: 1.4rem;
}
#about .content_about .profile_composition {
  flex-direction: column;
  gap: 4vw;
  width: 100%;
  margin-top: 4vw;
}
#about .content_about .profile_composition .image {
  width: 42.666vw;
}
#about .content_about .profile_composition .text p {
  font-size: 1.2rem;
}
#about .movie {
  width: 100%;
  margin: 10.666vw auto 0;
}
#about .movie .title_movie {
  font-size: 2.4rem;
  margin-bottom: 4vw;
}
#about .img_about {
  margin-top: 10.666vw;
}

/* =========================
   Performers
========================= */
#performers {
  padding: 10.666vw 0;
}
#performers .content_performers .list_performers {
  gap: 5.333vw;
}
#performers .content_performers .list_performers li {
  padding: 8vw 4vw;
  border-top: solid 1.333vw #B6A66C;
}
#performers .content_performers .list_performers li .card {
  flex-direction: column;
  gap: 5.333vw;
}
#performers .content_performers .list_performers li .card .text {
  align-items: center;
  text-align: center;
}
#performers .content_performers .list_performers li .card .text .name_ja {
  font-size: 2.0rem;
  margin: 2.666vw 0;
}
#performers .content_performers .list_performers li .card .text .name_en {
  font-size: 1.6rem;
}
#performers .content_performers .list_performers li .card .image {
  width: 100%;
}
#performers .content_performers .list_performers li .profile {
  margin-top: 5.333vw;
}
#performers .content_performers .list_performers li .profile p {
  font-size: 1.2rem;
}

/* =========================
   Cinema Concert
========================= */
#cinema-concert {
  padding: 10.666vw 0;
}
#cinema-concert .content_cinema-concert {
  width: 100%;
}
#cinema-concert .content_cinema-concert p {
  font-size: 1.2rem;
}

/* =========================
   Footer
========================= */
footer {
  padding: 16vw 0;
}
footer .banner {
  gap: 5.333vw;
}
footer .banner a {
  width: 42.0005vw;
}
footer p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-top: 5.333vw;
}