@charset "UTF-8";
/* ---------------------------------------------------
mixin
---------------------------------------------------- */
/*-------------------------------------------
common
-------------------------------------------*/
.c-title__h2.c-stl-en {
  position: relative;
  font-size: 3.2rem;
  font-family: "Inter", sans-serif;
  padding-bottom: 0.6em;
}
@media screen and (max-width: 768px) {
  .c-title__h2.c-stl-en {
    font-size: 2rem;
  }
}
.c-title__h2.c-stl-en .u-jp {
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .c-title__h2.c-stl-en .u-jp {
    font-size: 1rem;
  }
}
.c-title__h2.c-stl-en.no-jp {
  padding-bottom: 0;
}

.js-header {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.8s, visibility 0.8s ease;
  transition: opacity 0.8s, visibility 0.8s ease;
  margin-top: -80px;
}
.js-header.is-show {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

/*-------------------------------------------
kv
-------------------------------------------*/
.kv-wrapper {
  width: 100vw;
}
.kv-wrapper > figure {
  width: 100%;
}
.kv-wrapper > figure > img {
  width: 100%;
}

/*-------------------------------------------
update
-------------------------------------------*/
.c-update-list dl {
  display: grid;
  grid-template-columns: 15em auto;
  padding: 20px 0;
}
@media screen and (max-width: 1024px) {
  .c-update-list dl {
    grid-template-columns: 12em auto;
  }
}
@media screen and (max-width: 768px) {
  .c-update-list dl {
    grid-template-columns: 1fr;
  }
}
.c-update-list dl dt {
  font-weight: 700;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .c-update-list dl dt {
    margin-bottom: 10px;
  }
}
.c-update-list dl dd {
  line-height: 1.3;
}
.c-update-list dl dd p + p {
  margin-top: 0.5em;
}
.c-update-list dl + dl {
  border-top: #ccc solid 1px;
}
.c-update-list dl:first-child {
  padding-top: 0;
}
.c-update-list__link {
  position: relative;
  color: var(--txtlink);
  padding-left: 1.5em;
}
.c-update-list__link::before {
  position: absolute;
  display: inline-block;
  content: "・";
  margin-left: -1.5em;
}
.c-update-list__link.nolink {
  color: #272727;
  pointer-events: none;
}

/*-------------------------------------------
feature
-------------------------------------------*/
.c-feature {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media screen and (max-width: 1024px) {
  .c-feature {
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .c-feature {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.c-feature__box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.c-feature__box .bg-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: brightness(0.6);
          filter: brightness(0.6);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.c-feature__box .overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.c-feature__box .overlay .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .c-feature__box .overlay .title {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .c-feature__box .overlay .title {
    font-size: 1.5rem;
  }
}
.c-feature__box .overlay .title .u-jp {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 0.7em;
}
@media screen and (max-width: 1024px) {
  .c-feature__box .overlay .title .u-jp {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-feature__box .overlay .title .u-jp {
    font-size: 0.8rem;
  }
}
.c-feature__box:hover {
  opacity: 1;
}
.c-feature__box:hover .bg-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: brightness(0.4);
          filter: brightness(0.4);
}
.c-feature__box.is-inactive {
  pointer-events: none;
  background: #000;
}
.c-feature__box.is-inactive .bg-img img {
  opacity: 0.3;
}
.c-feature__box.is-inactive .overlay .title {
  color: var(--darkgray);
}
.c-feature__box.is-inactive .overlay .title .catch {
  color: var(--darkgray);
}

/*-------------------------------------------
event
-------------------------------------------*/
.l-tab-event {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .l-tab-event {
    width: 90vw;
  }
}
.l-tab-event .l-tab-list {
  position: relative;
}
.l-tab-event .l-tab-list > ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  .l-tab-event .l-tab-list > ul {
    gap: 8px;
  }
}
@media screen and (max-width: 768px) {
  .l-tab-event .l-tab-list > ul {
    gap: 5px;
  }
}
.l-tab-event .l-tab-list > ul > li {
  display: grid;
  place-content: center;
  background: #F7F7F7;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom: none;
  cursor: pointer;
}
.l-tab-event .l-tab-list > ul > li > a {
  display: block;
  width: 100%;
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  padding: 20px 10px;
}
@media screen and (max-width: 1024px) {
  .l-tab-event .l-tab-list > ul > li > a {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 768px) {
  .l-tab-event .l-tab-list > ul > li > a {
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 15px 5px;
  }
}
@media (hover: hover) {
  .l-tab-event .l-tab-list > ul > li:hover {
    background: #DCDCDC;
  }
  .l-tab-event .l-tab-list > ul > li:hover > a {
    opacity: 1;
  }
}
.l-tab-event .l-tab-list > ul > li.is-active {
  background: #DCDCDC;
}
.l-tab-event .l-tab-list > ul > li.is-active > a {
  color: #272727;
}
.l-tab-event .l-tab-panel {
  display: none;
  border: #F7F7F7 solid 30px;
  padding: 40px 0;
}
@media screen and (max-width: 1024px) {
  .l-tab-event .l-tab-panel {
    border-width: 20px;
    padding: 20px 0;
  }
}
@media screen and (max-width: 768px) {
  .l-tab-event .l-tab-panel {
    border-width: 10px;
    padding: 10px 0;
  }
}
.l-tab-event .l-tab-panel.is-active {
  display: block;
  -webkit-animation-name: fadeInPanel;
          animation-name: fadeInPanel;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  border-color: #DCDCDC;
  opacity: 0;
}
@-webkit-keyframes fadeInPanel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInPanel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.l-tab-event .l-tab-panel > *:last-child {
  margin-bottom: 0;
}

.c-event-caption {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .c-event-caption {
    margin-bottom: 30px;
  }
}
.c-event-caption > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
}
@media screen and (max-width: 1024px) {
  .c-event-caption > ul {
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .c-event-caption > ul {
    gap: 10px;
  }
}
.c-event-caption > ul > li {
  font-weight: 700;
  text-align: center;
  padding: 10px 120px;
}
@media screen and (max-width: 1024px) {
  .c-event-caption > ul > li {
    padding: 10px 90px;
  }
}
@media screen and (max-width: 768px) {
  .c-event-caption > ul > li {
    width: calc((100% - 30px) / 2);
    font-size: 0.8rem;
    padding: 5px;
  }
}
.c-event-caption > ul > li.stage {
  background: #e5e5e5;
}
.c-event-caption > ul > li.ground {
  background: #999;
}

.c-event-timetable {
  text-align: center;
}

/*-------------------------------------------
ticket
-------------------------------------------*/
#ticket .c-title__h3 {
  border: none;
  padding-bottom: 0;
  margin-bottom: 1em;
}

.c-ticket-schedule {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}
@media screen and (max-width: 1024px) {
  .c-ticket-schedule {
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    gap: 10px;
  }
}
@media screen and (max-width: 768px) {
  .c-ticket-schedule {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.c-ticket-schedule dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 16px;
}
@media screen and (max-width: 1024px) {
  .c-ticket-schedule dl {
    grid-template-columns: 5.2em 1fr;
    gap: 12px;
  }
}
@media screen and (max-width: 768px) {
  .c-ticket-schedule dl {
    grid-template-columns: 38px 1fr;
    gap: 10px;
  }
}
.c-ticket-schedule dl dt {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-ticket-schedule dl dt {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-orientation: upright;
  }
}
.c-ticket-schedule dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.c-ticket-schedule dl dd .c-ticket-schedule__seat {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: inline-block;
  background: #d9d9d9;
  border-radius: 100px;
  font-weight: 700;
  padding: 4px 20px;
}
.c-ticket-schedule dl dd .c-ticket-schedule__target {
  font-weight: 700;
}
.c-ticket-schedule dl dd .c-ticket-schedule__period {
  line-height: 1.3;
}
.c-ticket-schedule dl.presale_1st dt {
  background: #343434;
}
.c-ticket-schedule dl.presale_1st dd .c-ticket-schedule__seat {
  background: #9a9a9a;
  color: #fff;
}
.c-ticket-schedule dl.presale_2nd dt {
  background: #656565;
}
.c-ticket-schedule dl.presale_3rd dt {
  background: #989898;
}
.c-ticket-schedule dl.generalsale dt {
  background: #c1c1c1;
}

.c-ticket-type {
  margin-bottom: 60px;
}
.c-ticket-type dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 20px;
  border-bottom: #000 solid 1px;
  padding: 20px 10px;
}
@media screen and (max-width: 768px) {
  .c-ticket-type dl {
    padding: 10px 0;
  }
}
.c-ticket-type dl dt {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .c-ticket-type dl dt {
    line-height: 1.3;
  }
}
.c-ticket-type dl dt span {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .c-ticket-type dl dt span {
    display: block;
  }
}
.c-ticket-type dl dd {
  font-size: 1.1rem;
  font-weight: 700;
}

/*-------------------------------------------
concept
-------------------------------------------*/
#concept {
  background: url("../img/bg_concept01.webp") no-repeat center center;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  #concept {
    background-size: cover;
  }
}

.c-concept-copy {
  padding: 50px;
}
@media screen and (max-width: 1024px) {
  .c-concept-copy {
    padding: 50px 30px;
    margin: 0 20px;
  }
}
@media screen and (max-width: 768px) {
  .c-concept-copy {
    padding: 30px 20px;
    margin: 0;
  }
}
.c-concept-copy .c-text p {
  color: #fff;
  text-align: center;
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .c-concept-copy .c-text p {
    text-align: left;
  }
}
.c-concept-copy .c-text:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------
mc
-------------------------------------------*/
.c-mc-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .c-mc-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.c-mc-list figcaption {
  font-size: 1.1rem;
  font-weight: 700;
}
@media screen and (max-width: 1024px) {
  .c-mc-list figcaption {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-mc-list figcaption {
    font-size: 0.9rem;
  }
}

/*-------------------------------------------
comingsoon
-------------------------------------------*/
.c-comingsoon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .c-comingsoon {
    gap: 10px;
  }
}
.c-comingsoon > li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #000;
  aspect-ratio: 3/1;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .c-comingsoon > li {
    aspect-ratio: 9/7;
    padding: 10px;
  }
}
.c-comingsoon > li .c-category {
  color: #a4a4a4;
  font-family: "Inter", sans-serif;
  font-size: 1.8rem;
  line-height: 1.2;
  margin-top: -1em;
}
.c-comingsoon > li .c-category .stl-jp {
  display: block;
  font-size: 0.9rem;
  padding-left: 0.3em;
}
@media screen and (max-width: 1024px) {
  .c-comingsoon > li .c-category .stl-jp {
    padding-left: 0.1em;
  }
}
.c-comingsoon > li:after {
  position: absolute;
  left: 50%;
  bottom: 10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  content: "COMING SOON";
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
}
.c-comingsoon.column1 {
  width: 50%;
  grid-template-columns: 1fr;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .c-comingsoon.column1 {
    width: 60%;
  }
}/*# sourceMappingURL=top.css.map */