@charset "UTF-8";
/* Scss Document */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");
/* common */
* {
  margin: 0;
  padding: 0;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 2.5vw, 16px);
  box-sizing: border-box;
  list-style-type: none; }

body {
  background: linear-gradient(to left, #0f0405 0%, #341600 50%, #0f0405 100%);
  color: #FFF;
  margin: 0;
  font-size: clamp(14px, 2.5vw, 16px); }
  @media (max-width: 640px) {
    body {
      font-size: clamp(12px, 2.2vw, 14px); } }
  @media (max-width: 420px) {
    body {
      font-size: clamp(11px, 2vw, 13px); } }

a {
  color: #FFF;
  text-decoration: underline; }

a:hover {
  text-decoration: none; }

p {
  line-height: 1.4; }

.br-sp {
  display: none; }
  @media (max-width: 420px) {
    .br-sp {
      display: block; } }

.text-center {
  text-align: center; }

.d-block {
  display: block; }

.mincho {
  font-family: "Sawarabi Mincho", sans-serif; }

.w100 {
  width: 100%;
  height: auto; }

.d-block {
  display: block; }

.txt-center {
  text-align: center; }

.mb-5p {
  margin-bottom: 5%; }

.f-l {
  font-size: clamp(15px, 2.8vw, 24px); }

/*----- cssの初期化：ここまで -----*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 100px);
  /* フェードインで動く高さを指定 */
  transition: all 2000ms;
  /* フェードインにかかる時間を指定 */ }

.effect-scroll {
  opacity: 1;
  transform: translate(0, 0); }

/*animation*/
.animate__animated {
  animation-duration: 3s;
  animation-delay: .5s; }

.show_sp {
  display: none; }

@media (max-width: 640px) {
  .show_pc {
    display: none; }

  .show_sp {
    display: block; } }
.commingsoon {
  display: block;
  max-width: 800px;
  margin: 0 auto;
  border: rgba(255, 255, 255, 0.5) 3px dotted;
  text-align: center;
  padding: clamp(30px, 5%, 100px) 15px; }
  .commingsoon b {
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 2em; }

.t01 {
  display: block;
  margin-bottom: clamp(20px, 3%, 80px);
  text-align: center; }
  .t01 img.t_info {
    max-width: 350px; }
    @media (max-width: 640px) {
      .t01 img.t_info {
        max-width: 250px; } }
  .t01 img.t_ensyutu {
    max-width: 240px; }
    @media (max-width: 640px) {
      .t01 img.t_ensyutu {
        max-width: 180px; } }
  .t01 img.t_choreo {
    max-width: 450px; }
    @media (max-width: 640px) {
      .t01 img.t_choreo {
        max-width: 350px; } }
  .t01 img.t_dancenumber {
    max-width: 400px; }
    @media (max-width: 640px) {
      .t01 img.t_dancenumber {
        max-width: 300px; } }
  .t01 img.t_ticket {
    max-width: 200px; }
    @media (max-width: 640px) {
      .t01 img.t_ticket {
        max-width: 150px; } }
  .t01 img.t_photoreport {
    max-width: 400px; }
    @media (max-width: 640px) {
      .t01 img.t_photoreport {
        max-width: 250px; } }

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto; }
  .flex .col_3 {
    width: 33.3%;
    padding: 3%; }

img {
  width: 100%;
  height: auto; }

#header {
  width: 100%;
  height: 70px;
  padding: 10px;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2; }
  @media (max-width: 690px) {
    #header {
      padding: 5px; } }
  #header .wrapper {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
    #header .wrapper h1 {
      width: 240px;
      margin: 0 15px; }
      @media (max-width: 860px) {
        #header .wrapper h1 {
          width: 220px;
          margin: 0 10px; } }
    #header .wrapper .catch {
      display: flex;
      align-items: center;
      color: #FFF; }
      #header .wrapper .catch strong {
        font-family: "Sawarabi Mincho", sans-serif;
        font-size: 120%;
        margin: 0 15px; }
      #header .wrapper .catch b {
        border: rgba(255, 255, 255, 0.7) 1px solid;
        padding: 5px 15px;
        font-family: "Sawarabi Mincho", sans-serif; }
      @media (max-width: 926px) {
        #header .wrapper .catch {
          flex-wrap: wrap;
          font-size: 90%;
          margin-left: 10px; }
          #header .wrapper .catch strong {
            width: 100%;
            margin: 0; }
          #header .wrapper .catch b {
            padding: 1px 10px;
            font-size: 80%; } }
    @media (max-width: 690px) {
      #header .wrapper {
        flex-wrap: wrap; }
        #header .wrapper h1 {
          width: 180px;
          margin: 0 5px;
          margin-bottom: -13px; }
        #header .wrapper .catch {
          width: 100%;
          flex-wrap: nowrap; }
          #header .wrapper .catch strong {
            width: auto;
            font-size: 13px;
            margin-right: 7px;
            padding-top: 2px; } }
    @media (max-width: 420px) {
      #header .wrapper h1 {
        margin-bottom: -5px; }
      #header .wrapper .catch b {
        display: none; } }
  #header .ticketlink {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    max-width: 250px;
    height: 70px; }
    #header .ticketlink a {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #FFF;
      text-decoration: none;
      font-size: 0;
      height: 70px;
      border: #39A936 1px solid;
      padding: 15px 13px 13px; }
      #header .ticketlink a.ti-own {
        width: 250px; }
      #header .ticketlink a.ti-peatix {
        width: 90px; }
        #header .ticketlink a.ti-peatix.wide {
          width: 120px; }
      #header .ticketlink a img.small {
        display: none; }
    @media (max-width: 1024px) {
      #header .ticketlink a.ti-own {
        width: 160px; } }
  @media (max-width: 1024px) and (max-width: 380px) {
    #header .ticketlink a.ti-own {
      width: 120px;
      padding: 15px 5px; } }
  @media (max-width: 1024px) and (max-width: 330px) {
    #header .ticketlink a.ti-own {
      border: #39A936 2px solid;
      width: 100px;
      padding: 15px 5px; } }
    @media (max-width: 1024px) {
      #header .ticketlink a img.small {
        display: block; }
      #header .ticketlink a img.wide {
        display: none; } }

.mainvisual_bg {
  background: linear-gradient(to bottom, #0f0405, #0f0405 90%, rgba(15, 4, 5, 0) 100%); }

.mainvisual {
  display: block;
  position: relative;
  padding-top: 80px;
  max-width: 1366px;
  margin: 0 auto clamp(20px, 3%, 40px) auto; }
  .mainvisual .photo {
    display: block;
    width: 100%;
    z-index: 0; }
    .mainvisual .photo img {
      margin-top: -180px; }
    @media (max-width: 1366px) {
      .mainvisual .photo img {
        margin-top: -13%; } }
    @media (max-width: 1024px) {
      .mainvisual .photo {
        overflow: hidden; }
        .mainvisual .photo img {
          width: 120%;
          margin-left: -10%;
          margin-right: -15%;
          margin-top: -20%; } }
    @media (max-width: 640px) {
      .mainvisual .photo img {
        margin-left: -12%;
        margin-right: -13%;
        margin-top: -13%; } }
  .mainvisual .title {
    display: block;
    position: absolute;
    top: clamp(90px, 4%, 160px);
    width: 100%;
    text-align: center;
    z-index: 1; }
    .mainvisual .title .txt1 {
      margin-bottom: -2%; }
      .mainvisual .title .txt1 img {
        width: 50%; }
      @media (max-width: 640px) {
        .mainvisual .title .txt1 {
          margin-bottom: -2%; }
          .mainvisual .title .txt1 img {
            width: 55%; } }
    .mainvisual .title .logo {
      margin-bottom: -5%; }
      .mainvisual .title .logo img {
        width: 80%; }
        @media (max-width: 640px) {
          .mainvisual .title .logo img {
            width: 90%; } }
    .mainvisual .title .subcatch img {
      width: 60%; }
    @media (max-width: 640px) {
      .mainvisual .title .subcatch img {
        width: 75%; } }
  .mainvisual .info {
    display: block;
    position: absolute;
    bottom: clamp(20px, 4%, 80px);
    width: 100%;
    text-align: center; }
    .mainvisual .info .date img {
      width: 50%; }
    @media (max-width: 640px) {
      .mainvisual .info .date img {
        width: 65%; } }
    .mainvisual .info .kaijo img {
      width: 30%; }
    @media (max-width: 640px) {
      .mainvisual .info .kaijo img {
        width: 55%; } }

.box01 {
  display: block;
  max-width: 1366px;
  margin: 0 auto 5% auto; }
  @media (max-width: 1366px) {
    .box01 {
      padding-left: 15px;
      padding-right: 15px; } }
  .box01 .light {
    display: block;
    max-width: 700px;
    margin: 0 auto 5% auto; }
    @media (max-width: 1366px) {
      .box01 .light {
        padding-left: 10%;
        padding-right: 10%; } }
  .box01 p {
    display: block; }
  .box01 b {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "Sawarabi Mincho", sans-serif; }
  .box01.area01 {
    text-align: center; }
    .box01.area01 .photo {
      max-width: 300px;
      margin: 0 auto; }
      @media (max-width: 1024px) {
        .box01.area01 .photo {
          width: 50%; } }
  .box01.area02 {
    max-width: 1000px; }
    .box01.area02 .col_3 {
      text-align: center; }
    .box01.area02 .photo img {
      max-width: 330px; }
      .box01.area02 .photo img.small {
        width: 85%;
        max-width: 280px; }
    .box01.area02 p {
      text-align: center;
      font-size: 1.2rem; }
    .box01.area02 .show-sp {
      display: none; }
      @media (max-width: 420px) {
        .box01.area02 .show-sp {
          display: block; }
          .box01.area02 .show-sp .col_3 {
            width: 50%; } }
    @media (max-width: 420px) {
      .box01.area02 .show-pc {
        display: none; } }
  .box01.area03 {
    max-width: 800px;
    margin: 0 auto 5% auto; }
    .box01.area03 table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 10%; }
      @media (max-width: 640px) {
        .box01.area03 table {
          margin-bottom: 6%; } }
      .box01.area03 table th, .box01.area03 table td {
        border: rgba(227, 210, 140, 0.5) 1px solid;
        padding: 15px 20px;
        color: #FFF; }
      .box01.area03 table th {
        word-break: keep-all;
        background: rgba(227, 210, 140, 0.1); }
      @media (max-width: 420px) {
        .box01.area03 table {
          border: none;
          border-bottom: rgba(227, 210, 140, 0.5) 1px solid; }
          .box01.area03 table th, .box01.area03 table td {
            display: block;
            width: 100%;
            border-bottom: none;
            padding: 10px; } }
    .box01.area03 .small {
      display: block; }
      .box01.area03 .small b, .box01.area03 .small p {
        display: block;
        font-size: 75%;
        line-height: 1.8; }
    .box01.area03 .price {
      max-width: 200px;
      margin: 0 auto 20px auto; }
    .box01.area03 .txt {
      border: rgba(227, 210, 140, 0.5) 1px solid;
      padding: clamp(15px, 2%, 20px);
      max-width: 800px;
      margin: 0 auto 5% auto; }
      .box01.area03 .txt p {
        line-height: 1.8; }
    .box01.area03 .btn_peatix a {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 500px;
      border: #2da438 3px solid;
      background: #FFF;
      padding: 15px;
      border-radius: 30px;
      text-decoration: none;
      margin: 0 auto; }
      .box01.area03 .btn_peatix a span {
        display: flex;
        align-items: center;
        margin-right: 10px; }
        .box01.area03 .btn_peatix a span img {
          width: 75px;
          height: auto; }
      .box01.area03 .btn_peatix a b {
        color: #2da438;
        font-size: 1.2em;
        font-weight: bold;
        display: flex;
        align-items: center;
        font-family: 'M PLUS 1p', sans-serif; }
      @media (max-width: 460px) {
        .box01.area03 .btn_peatix a {
          padding: 10px; } }
      @media (max-width: 420px) {
        .box01.area03 .btn_peatix a {
          border-radius: 50px;
          flex-wrap: wrap; }
          .box01.area03 .btn_peatix a span {
            width: 100%;
            justify-content: center;
            margin: 0 0 5px 0; } }

.tyuui {
  display: block;
  max-width: 1000px;
  margin: 3% auto;
  text-align: left; }
  @media (max-width: 1024px) {
    .tyuui {
      padding-left: 15px;
      padding-right: 15px; } }
  .tyuui b {
    display: block;
    font-size: 90%; }
  .tyuui p {
    font-size: 80%; }

.btn {
  text-align: center;
  margin-bottom: 3%;
  padding: 0 15px; }
  .btn a img {
    width: 100%;
    height: auto;
    max-width: 600px;
    transition: all linear .3s; }
    .btn a img:hover {
      opacity: .7; }

#page-top {
  display: block;
  width: 80px;
  height: 80px;
  position: fixed;
  bottom: 0px;
  right: 0;
  z-index: 1; }
  @media (max-width: 640px) {
    #page-top {
      width: 60px;
      height: 60px; } }

#footer {
  padding: 8px;
  background: #000;
  text-align: center; }
  #footer address {
    font-style: normal;
    font-size: 80%;
    color: #FFF; }

.photoreport {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto; }
  .photoreport .photo {
    width: 25%;
    padding: 1%; }
    .photoreport .photo a {
      display: block;
      overflow: hidden;
      font-size: 0; }
      .photoreport .photo a img {
        width: 100%;
        height: auto;
        transition: all linear 0.3s; }
      .photoreport .photo a:hover img {
        transform: scale(1.05, 1.05); }
    @media (max-width: 640px) {
      .photoreport .photo {
        width: 50%; } }