@charset "UTF-8";

/*---------------- 基本設定 ----------------*/
html {
  font-family: Verdana, 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size: 62.5%;
  font-weight: 400;
}

*, *::before, *::after {
  box-sizing: border-box;
}

strong {
  font-weight: 700;
}

body {
  width: 100%;
  color: #D1D1D1;
  background-color:#212121;
  overflow-x: hidden;
}

a {
  color: #8b8b8b;
  text-decoration: underline;
  word-break: break-all;
}

img {
  vertical-align: bottom;
}

main {
  display: block;
  /* IE対応として */
}



/* ------ヘッダー----- */
.header {
  position: relative;
  height: 375px;
  font-family: toppan-bunkyu-midashi-go-std, 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-weight: 900;
  font-style: normal;
}
@media(min-width:1025px) {
  .header {
    height: 100vh;
    /* JSにて取得 */
  }
}



/* タイトルロゴ */
.header_h1 {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 130px;
  text-align: left;
  z-index: -1;
  opacity: 1;
}
@media(min-width:1025px) {
  .header_h1 {
    width: 350px;
    top: 24px;
    left: 24px;
  }
}
.header_h1.opacity {
  opacity: 0;
}

.header_name {
  width: 128px;
  height: 13.97px;
  margin-bottom: 10px;
  margin-left: 1px;
  fill: #EDD600;
}
@media(min-width:1025px) {
  .header_name {
    width: 344px;
    height: 37.56px;
    margin-bottom: 12px;
  }
}

.header_title {
  width: 130px;
  height: 157.38px;
  fill: #4CB7A5;
}
@media(min-width:1025px) {
  .header_title {
    width: 350px;
    height: 423.5px;
  }
}


/* メイン画像 */
.header_top-img_wrapper {
  z-index: -5;
  position: fixed;
  top: 0;
  left: -60px;
  left: -130px;
}
@media(min-width:500px) {
  .header_top-img_wrapper {
    left: 0;
  }
}

.header_top-img {
  height: 375px;
  opacity: 1;
  object-fit: cover;
  /* JSよりheight,width調整 */
}
@media(min-width:680px) {
  .header_top-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* JSよりheight,width調整 */
  }
}
@media(min-width:1025px) {
  .header_top-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    /* JSよりheight,width調整 */
  }
}

.header_top-img.opacity {
  opacity: 0;
}


/* 右下の会場と日程 */
.place-date_wrapper {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 197px;
  text-align: right;
}
@media(min-width:1025px) {
  .place-date_wrapper {
    right: 24px;
    bottom: calc(88px + 24px);
    width: 360px;
  }
}

.place {
  width: 148px;
  height: 17px;
  margin-bottom: 6px;
  margin-right: -5px;
  fill: #4CB7A5;
  stroke: #7a7a7a;
}
@media(min-width:1025px) {
  .place {
    width: 261px;
    height: 32.38px;
    margin-bottom: 12px;
    margin-right: 0;
    stroke: inherit;
  }
}

.date {
  width: 197px;
  height: 13px;
  fill: #EDD600;
  stroke: #7a7a7a;
}
@media(min-width:1025px) {
  .date {
    width: 360px;
    height: 23.59px;
    stroke: inherit;
  }
}



/* グローバルナビ */
.nav_wrapper {
  width: 100%;
  height: 64px;
  position: absolute;
  left: 0;
  bottom: -64px;
  background: rgba(59, 59, 59, .6);
  z-index: 25;
}
@media(min-width:1025px) {
  .nav_wrapper {
    height: 88px;
    bottom: 0;
  }
}
.nav_wrapper.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.global_nav {
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  transform: translateY(calc(100% + 1px));
  padding: 32px 16px 0;
  background: rgba(59, 59, 59, .6);
  width: 100%;
}
@media(min-width:1025px) {
  .global_nav {
    display: block;
    transform: translateY(0);
    height: 88px;
    background: rgba(59, 59, 59, 0);
    line-height: 88px;
    padding: 0 24px;
  }
}

.global_nav_ul {
  display: flex;
  flex-wrap: wrap;
}

.global_nav_li {
  margin-bottom: 32px;
  position: relative;
}
@media(min-width:1025px) {
  .global_nav_li {
    margin-bottom: 0;
  }
}

.global_nav_li + .global_nav_li {
  margin-left: 24px;
}
@media(min-width:1025px) {
  .global_nav_li + .global_nav_li {
    margin-left: 32px;
  }
}
.global_nav_li + .global_nav_li::before {
  content: "/";
  position: absolute;
  top: 2px;
  left: -13px;
}
@media(min-width:1025px) {
  .global_nav_li + .global_nav_li::before {
    left: -19px;
    top: 0;
  }
}

.global_nav_a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  display: block;
}

@media(min-width:1025px) {
  .global_nav_li:nth-child(odd) .global_nav_a:hover {
    color: #EDD600;
  }
  .global_nav_li:nth-child(even) .global_nav_a:hover {
    color: #4CB7A5;
  }
}

.global_nav_li:nth-child(odd) .global_nav_a.current {
  color: #EDD600;
}

.global_nav_li:nth-child(even) .global_nav_a.current {
  color: #4CB7A5;
}


/* ハンバーガー */
.hamburger {
  position: absolute;
  left: 16px;
  top: 24px;
  width: 24px;
  height: 18px;
  cursor: pointer;
  user-select: none;
  display: block;
}
@media(min-width:1025px) {
  .hamburger {
    display: none;
  }
}


.hamburger_line {
  width: 24px;
  background: #fff;
  height: 1px;
  position: absolute;
  left: 0;
}


.hamburger_1 {
  top: 0;
}
.hamburger_2 {
  top: 8px;
}
.hamburger_3 {
  top: 16px;
}

.hit .hamburger_1 {
  animation-name: close_line01;
  animation-fill-mode: both;
  animation-duration: .2s;
}
.open .hamburger_1 {
  animation-name: open_line01;
  animation-fill-mode: both;
  animation-duration: .2s;
}

.hit .hamburger_2 {
  animation-name: close_line02;
  animation-fill-mode: both;
  animation-duration: .2s;
}
.open .hamburger_2 {
  animation-name: open_line02;
  animation-fill-mode: both;
  animation-duration: .2s;
}
.hit .hamburger_3 {
  animation-name: close_line03;
  animation-fill-mode: both;
  animation-duration: .2s;
}
.open .hamburger_3 {
  animation-name: open_line03;
  animation-fill-mode: both;
  animation-duration: .2s;
}


/* ハンバーガーメニューのアニメーション設定 */
@keyframes open_line01 {
  0% {
      top:0;
      left: 0;
      transform: rotate(0);
    }
    50% {
      top:8px;
      left: 0px;
      transform: rotate(0);
    }
    100% {
      top:8px;
      left: 0;
      transform: rotate(45deg);
  }
}
@keyframes close_line01 {
  0% {
    top:8px;
    left: 0;
    transform: rotate(45deg);
  }
    50% {
      top:8px;
      left: 0px;
      transform: rotate(0);
    }
    100% {
      top:0;
      left: 0;
      transform: rotate(0);
  }
}

@keyframes open_line02 {
  0% {
      top:8px;
      left: 0;
      width: 24px;
    }
    100% {
      top: 8px;
      left: 12px;
      width: 0;
  }
}
@keyframes close_line02 {
  0% {
    top: 8px;
    left: 12px;
    width: 0; 
    }
    100% {
      top:8px;
      left: 0;
      width: 24px;
  }
}

@keyframes open_line03 {
  0% {
    top: 16px;
    left: 0;
    transform: rotate(0);
  }
    50% {
      top: 8px;
      left: 0px;
      transform: rotate(0);
    }
    100% {
      top: 8px;
      left: 0;
      transform: rotate(-45deg);
  }
}
@keyframes close_line03 {
  0% {
    top: 8px;
    left: 0;
    transform: rotate(-45deg);
    }
    50% {
      top: 8px;
      left: 0px;
      transform: rotate(0);
    }
    100% {
      top: 16px;
      left: 0;
      transform: rotate(0);
  }
}
/* ハンバーガーメニューのアニメーション設定 end*/





.icon {
  display: none;
  width: 20px;
  fill: #fff;
  position: absolute;
  top: 22px;
}
@media(min-width:350px) {
  .icon {
    display: block;
  }
}
@media(max-width:1025px) {
  .icon {
    left: 70px;
  }
}
@media(min-width:1025px) {
  .icon {
    /* right: 264px; チケット予約ボタンが消えたため位置の調整 */
    left: 700px;
    top: 35px;
    transition: fill .1s;
  }
  .icon:hover {
    fill: #4CB7A5;
  }
}
@media(min-width:1200px) {
  .icon {
    width: 28px;
    /* right: 420px; チケット予約ボタンが消えたため位置の調整*/
    left: 700px;
    top: 30px;
  }
}
/* ヘッダー */


/* ボタン（三種類） */

.top_btn {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14px;
  padding: 0 40px;
  line-height: 32px;
  text-decoration: none;
  background: rgba(255, 255, 255, .1);
}
@media(min-width:1025px) {
  .top_btn {
    right: 24px;
    top: 28px;
    transition: background-color .1s;
  }
  .top_btn:hover {
    background: rgba(255, 255, 255, .3);
  }
}
@media(min-width:1200px) {
  .top_btn {
    right: 24px;
    top: 16px;
    height: 56px;
    line-height: 56px;
    width: 352px;
    text-align: center;
    font-size: 18px;
  }
}

.main_btn {
  border: 1px solid #fff;
  color: #fff;
  display: inline-block;
  font-family: toppan-bunkyu-midashi-go-std, 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  text-align: center;
  width: 100%;
  font-size: 16px;
  height: 56px;
  line-height: 56px;
  margin-bottom: 40px;
  text-decoration: none;
  background: rgba(255, 255, 255, .05);
}
@media(min-width:1025px) {
  .main_btn {
    /* font-size: 18px; */
    width: 368px;
  }
  .main_btn.yellow_btn:hover {
    background: rgba(237, 214, 0, .3);
  }
  .main_btn.green_btn:hover {
    background: rgba(76, 183, 165, .3);
  }
}
.main_btn.yellow_btn {
  background: rgba(237, 214, 0, .05);
  border: 1px solid #EDD600;
}
.main_btn.green_btn {
  background: rgba(76, 183, 165, .05);
  border: 1px solid #4CB7A5;
}


.btn {
  border: 1px solid #D1D1D1;
  color: #d1d1d1;
  font-size: 16px;
  height: 56px;
  line-height: 56px;
  margin-bottom: 40px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  text-align: center;
  background: rgba(255, 255, 255, .05);
}
@media(min-width:1025px) {
  .btn {
    transition: background-color .1s;
    width: 368px;
  }
  .btn:hover {
    background: rgba(255, 255, 255, .25);
  }
}

.hr {
  opacity: 0;
  margin-bottom: 40px;
}


/* main */

.main {
  width: 100%;
  padding: 52px 0 104px;
  font-size: 16px;
  line-height: 28px;
  background: linear-gradient(#212121,#363636);
}
@media(min-width:1025px) {
  .main {
    padding: 76px 0 152px;
  }
}

.main_section {
  width: 90%;
  margin: 0 auto;
  padding: 104px 0 64px;
}
@media(min-width:768px) {
  .main_section {
    width: 70%;
  }
}
@media(min-width:1025px) {
  .main_section {
    width: 752px;
    margin: 0 auto;
    padding: 152px 0 112px;
  }
}

.sub_section {
  margin-bottom: 74px;
}
@media(min-width:1025px) {
  .sub_section {
    margin-bottom: 90px;
  }
}

.main_h1 {
  font-family: toppan-bunkyu-midashi-go-std, 'Noto Sans JP', "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 32px;
  line-height: 48px;
  margin-top: -8px;
  margin-bottom: 32px;
}
@media(min-width:1025px) {
  .main_h1 {
    font-size: 40px;
    margin-bottom: 56px;
  }
}

.main_h2 {
  font-size: 20px;
  line-height: 36px;
  margin-top: -8px;
  margin-bottom: 24px;
  font-weight: 700;
}
@media(min-width:1025px) {
  .main_h2 {
    font-size: 24px;
    margin-bottom: 32px;
  }
}

.main_p {
  font-size: 16px;
  line-height: 32px;
  margin-top: -8px;
  margin-bottom: 32px;
}

.line-through {
  text-decoration: line-through;
}

.yellow {
  color: #EDD600;
}
.green {
  color: #4CB7A5;
}

@media(min-width:1025px) {
  .main_p a:hover {
    color: #a5a5a5;
  }
  .main_li a:hover {
    color: #a5a5a5;
  }
}

/* 公演中止コメントのスタイル */
.white_background {
  background: #fff;
  padding: 72px 16px 32px;
}
@media(min-width:768px) {
  .white_background {
    padding: 96px 32px 56px;
  }
}
@media(min-width:1025px) {
  .white_background {
    padding: 96px 48px 56px;
  }
}

.comment_p {
  color: #363636;
  font-size: 15px;
}



/* テーブル内のスタイル */
.table_wrapper {
  width: 100%;
  margin: 0 auto 40px;
  background: rgba(59, 59, 59, .6);
  padding:  32px 16px 16px;
}
@media(min-width:1025px) {
  .table_wrapper {
    padding: 48px 48px 40px;
  }
}

.table {
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto 80px;
  width: 100%;
}
@media(min-width:1025px) {
  .table {
    font-size: 16px;
    line-height: 42px;
  }
}
.table th, .table td {
  border: dotted 1px #8b8b8b;
  border-bottom: solid 1px #D1D1D1;
  border-top: none;
}

.table th:last-child,
.table td:last-child {
  border-right: none;
}

.table th:first-child,
.table td:first-child {
  border-left: none;
  border-right: solid 1px #D1D1D1;
}

.table_small_font {
  font-size: 12px;
}
@media(min-width:1025px) {
  .table_small_font {
    font-size: 14px;
  }
}

.saturday {
  color: #9EA2D1;
}
.sunday {
  color: #D59D9D;
}

.table tr:nth-last-child(6) {
  background: rgba(208, 208, 208, .1);
}




/* ul内のスタイル */
.main_ul {
  margin-bottom: 32px;
  margin-top: -8px;
}

.main_li {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 30px;
}



/* ドット */
.dots {
  position: relative;
  width: 40px;
  height: 8px;
  margin: 104px auto;
}
@media(min-width:1025px) {
  .dots {
    margin: 152px auto;
  }
}


.dot {
  background: #D1D1D1;
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  display: block;
}

.dot_1 {
  left: 0;
  animation-name: dot_animate;
  animation-fill-mode: none;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: 0;
}
.dot_2 {
  left: 16px;
  animation-name: dot_animate;
  animation-fill-mode: none;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
}
.dot_3 {
  left: 32px;
  animation-name: dot_animate;
  animation-fill-mode: none;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
}




@keyframes dot_animate {
  0% {
      opacity: 1;
    }
  50% {
    opacity: .2;
  }
  100% {
    opacity: 1;
  }
}





/* フッター */
.footer {
  width: 100%;
  height: 100vh;
  margin-top: -24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background:#212121; */
  background:#363636;
}

.footer_a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer_name {
  fill: #fff;
  width: 128px;
  height: 13.97px;
  margin-bottom: 10px;
  margin-left: 1px;
  transition: fill .5s .5s;
}
.change .footer_name {
  fill:#EDD600;
}

.footer_title {
  fill: #fff;
  width: 130px;
  transition: fill .5s .5s;
}
.change .footer_title {
  fill:#4CB7A5;
}




/* フェード */
.fade_curtain {
  background:#212121;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s;
}
.fade_curtain.fade_on {
  opacity: 0;
}


.fade_curtain_name {
  fill: #fff;
  width: 128px;
  height: 13.97px;
  margin-bottom: 10px;
  margin-left: 1px;
}
.fade_curtain_name.fade_on {
  animation-name: fade_name;
  animation-fill-mode: both;
  animation-duration: 1s;
}

.fade_curtain_title {
  fill: #fff;
  width: 130px;
}
.fade_curtain_title.fade_on {
  animation-name: fade_title;
  animation-fill-mode: both;
  animation-duration: 1s;
}


@keyframes fade_name {
  0% {
    fill:#fff;
    opacity: 1;
  }
  50% {
    fill:#EDD600;
    opacity: 1;
  }
  90% {
    fill:#EDD600;
    opacity: 1;
  }
  100% {
    fill:#EDD600;
    opacity: 0;
  }
}

@keyframes fade_title {
  0% {
    fill:#fff;
    opacity: 1;
  }
  50% {
    fill:#4CB7A5;
    opacity: 1;
  }
  90% {
    fill:#4CB7A5;
    opacity: 1;
  }
  100% {
    fill:#4CB7A5;
    opacity: 0;
  }
}