@charset "UTF-8";
body {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-size: 16px;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-image: url(../img/back_pc.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
}
body p {
  font-weight: 500;
  line-height: 1.5rem;
}
body img {
  vertical-align: baseline;
  height: auto;
}

.wrapper {
  position: relative;
  max-width: 500px;
  margin: auto;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
}

.inner {
  padding: 0 20px;
}

.section {
  padding: 12% 0;
}

.section-title {
  text-align: center;
}
.section-title_main {
  text-align: center;
  font-family: "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: white;
}
.section-title_line1, .section-title_line2 {
  font-weight: 800;
  display: inline-block;
  background: #000000;
  padding: 0.2em 0.5em;
  vertical-align: middle;
}
.section-title_line2 {
  margin-top: -0.3em;
}
.section-title_sub {
  margin-top: 0.6em;
  font-weight: 800;
}

.name {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: 0.4em;
  text-align: center;
}

.btn {
  margin: auto;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  max-width: 420px;
  width: 100%;
  height: 3em;
  background: -webkit-linear-gradient(315deg, #ff6f0f, #ee0a1a);
  background: linear-gradient(135deg, #ff6f0f, #ee0a1a);
  color: white;
  position: relative;
  -webkit-transition: background 1.2s ease-in-out;
  transition: background 1.2s ease-in-out;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn a {
  width: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: 1.2em;
}
.btn a span {
  font-size: 1rem;
}

.btn:hover {
  background: -webkit-linear-gradient(315deg, #ee0a1a, #ff6f0f);
  background: linear-gradient(135deg, #ee0a1a, #ff6f0f);
}

.btn::after {
  content: "";
  display: block;
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  right: 3%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-image: url("../img/arrow.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sns {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2em;
}
.sns .sns-instagram,
.sns .sns-x {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 15vw;
  height: 15vw;
  max-width: 70px;
  max-height: 70px;
  border-radius: 50%;
}
.sns .sns-instagram:hover,
.sns .sns-x:hover {
  opacity: 0.8;
}
.sns .sns-instagram {
  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.sns .sns-x {
  background: #ffffff;
}
.sns .sns-instagram img,
.sns .sns-x img {
  width: 50%;
  -o-object-fit: contain;
     object-fit: contain;
}

.main {
  background-image: url(../img/mv_jam.png), url(../img/mv_back.png);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-size: contain, cover;
  position: relative;
}

.text-banner {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 9999;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background: -webkit-gradient(linear, left top, left bottom, from(#00a0e9), to(#0074be));
  background: -webkit-linear-gradient(top, #00a0e9, #0074be);
  background: linear-gradient(180deg, #00a0e9, #0074be);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 0;
  border-radius: 10px 0 0 10px;
  height: 12rem;
  width: 3rem;
  overflow: hidden;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.text-banner:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#00a0e9), to(#0074be));
  background: -webkit-linear-gradient(bottom, #00a0e9, #0074be);
  background: linear-gradient(0deg, #00a0e9, #0074be);
}

.mv {
  font-size: 1rem;
  margin: auto;
  text-align: center;
  position: relative;
  padding: 2.5em 0 4em 0;
  height: auto;
  /* 左スラッシュ */
  /* 右スラッシュ */
}
.mv .logo {
  font-size: 1rem;
  margin: 3em auto 0;
  width: 100%;
}
.mv .logo img {
  width: 100%;
}
.mv-info {
  font-size: 1rem;
  margin-top: 1em;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2em;
}
.mv-info img {
  width: 100%;
}
.mv-text {
  width: 100%;
  font-size: 1rem;
  margin-top: 2em;
}
.mv-text img {
  width: 100%;
}
.mv-schedule {
  width: 100%;
  font-size: 1rem;
  margin-top: 2.5em;
}
.mv-schedule img {
  width: 100%;
}
.mv .btnarea {
  font-size: 1rem;
  margin-top: 1.2em;
}
.mv .btnarea .btn {
  margin-top: 0.5em;
}
.mv-copy {
  margin-top: 3.5em;
  text-align: left;
}
.mv-copy img {
  width: 100%;
}
.mv-copy p {
  margin-top: -1em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6em;
  background: #ffe1cf;
  padding: 1.7em 1em 1em;
}
.mv .slash-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2em;
  margin-top: 3em;
}
.mv .slash-text .followus {
  color: #ff6f0f;
  text-align: center;
  font-size: 1.8rem;
  font-family: "Roboto", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 800;
}
.mv .slash-text .message {
  margin-top: 0.5em;
  font-size: 1.5rem;
  font-weight: 800;
}
.mv .slash-left,
.mv .slash-right {
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 0 0 60px 10px;
  border-left-color: #ff6f0f;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.mv .slash-right {
  border-width: 0 10px 60px 0;
  border-left-color: transparent;
  border-right-color: #ff6f0f;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.mv .sns {
  margin-top: 1em;
}
.mv .sns-x {
  background: #000000;
}

.performer {
  background: #d90009;
  color: white;
}

.artist {
  margin-top: 2em;
}
.artist-flex {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2em;
}
.artist-flex img {
  width: 100%;
}
.artist-flex .text {
  font-size: 1rem;
  line-height: 1.6em;
  text-align: left;
  margin-top: 0.6em;
}

.schoolband {
  font-size: 1rem;
  margin-top: 1.5em;
  padding-top: 1.5em;
  font-weight: 800;
  text-align: left;
  border-top: 2px dotted #ec7f84;
}

.special {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1em;
  width: 100%;
  text-align: center;
  margin-bottom: 1.5em;
}
.special .flex-img {
  width: calc((100% - 1em) / 2);
}
.special .flex-img img {
  width: 100%;
}
.special-text {
  width: calc((100% - 1em) / 2);
}
.special-text .collab {
  background: #ffffff;
  color: #f40009;
  padding: 0.1em 0.5em;
  font-weight: 800;
  line-height: 1.4em;
}
.special-text .text {
  font-size: 0.9rem;
  text-align: left;
  margin-top: 0.5em;
  line-height: 1.5em;
}

.performer-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1em;
  padding-top: 1.5em;
  border-top: 2px dotted #ec7f84;
}
.performer-flex .flex-img {
  width: calc((100% - 1em) / 2);
}
.performer-flex .flex-img img {
  width: 100%;
}

.timetable {
  width: 100%;
  margin: 0 auto;
  font-weight: 800;
  margin-top: 4em;
}
.timetable-list {
  margin-top: 2em;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0.5em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.header .time {
  padding-bottom: 0.6em;
}

.header .event {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: none;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.time {
  color: #ffffff;
  padding: 0.5em;
  width: 20%;
  text-align: center;
  font-size: 1.2rem;
  border-bottom: 2px solid #ffffff;
}

.event {
  background: #ffffff;
  color: #f40009;
  padding: 0.5em;
  width: 80%;
  text-align: center;
  font-size: 1.2rem;
  border-bottom: 2px solid #ffffff;
}

.collab .time {
  padding: 1.07em 0;
}

.event.collab {
  background: #fff600;
  border-bottom: 2px solid #fff600;
}

.attention {
  text-align: right;
  color: white;
  font-size: 0.9rem;
}

.mc {
  background: #ffe1cf;
  background-image: url("../img/mc_back_1.png"), url("../img/mc_back_2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top, bottom;
  background-size: 100%;
}
.mc-flex {
  margin-top: 2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1em;
  width: 100%;
}
.mc-flex-list {
  width: calc((100% - 1em) / 2);
}
.mc-flex img {
  width: 100%;
}
.mc-flex .text {
  font-size: 0.9rem;
  margin-top: 0.2em;
  text-align: center;
}

.ticket {
  background: #ffefc3;
}
.ticket-list {
  width: 100%;
  text-align: center;
  margin-top: 2em;
}
.ticket thead th {
  background-color: #ff6f0f;
  color: #ffffff;
  padding: 0.4em;
  font-size: 1.5em;
  font-weight: 800;
  text-align: center;
  line-height: 1.4em;
}
.ticket thead th span {
  font-size: 1.3rem;
  font-weight: 600;
}
.ticket tbody {
  background: #ffffff;
  text-align: center;
}
.ticket tbody tr {
  border-bottom: 1px solid #cccccc;
}
.ticket tbody tr:last-child {
  border-bottom: none;
}
.ticket tbody td {
  padding: 0.8em 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.5rem;
  vertical-align: middle;
}
.ticket tbody .name {
  border-right: 1px solid #cccccc;
  width: 55%;
}
.ticket tbody .name span {
  font-size: 0.9rem;
}
.ticket tbody .price {
  width: 45%;
}
.ticket tbody .end {
  background: #dddddd;
}
.ticket p {
  font-size: 0.9rem;
  margin-top: 1em;
}
.ticket .btnarea {
  margin-top: 2.5em;
}
.ticket .btnarea .btn {
  margin-top: 0.5em;
}
.ticket-attention {
  width: 100%;
  margin-top: 3em;
  font-size: 0.9rem;
}
.ticket-attention ul {
  list-style: none;
  line-height: 1.2rem;
}
.ticket-attention li {
  text-indent: -1em;
  padding-left: 1em;
}
.ticket-attention li::before {
  content: "※";
}
.ticket-attention li + li {
  padding-top: 0.5em;
}

.accordion {
  width: 100%;
  margin: 2em auto;
}

.accordion-header {
  background: #ffffff;
  border: 2px solid #ff6f0f;
  padding: 1em 2.5em 1em 1em;
  position: relative;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.accordion-header .icon {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 12px;
  height: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.accordion-header .icon::before,
.accordion-header .icon::after {
  content: "";
  position: absolute;
  background: #ff6f0f;
  width: 12px;
  height: 2px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.accordion-header .icon::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}

.accordion-header.open .icon::after {
  display: none;
}

.accordion-content {
  display: none;
  padding-top: 1em;
  text-align: center;
}

.accordion-content img {
  max-width: 100%;
  height: auto;
}

.access-sponsor {
  background: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-image: url("../img/access_back.png"), url("../img/access_back.png");
  background-repeat: no-repeat, no-repeat;
  background-position: right -20% top 5%, left -20% bottom 40%;
  background-size: 50%;
}

.access iframe {
  font-size: 1rem;
  margin-top: 2em;
  width: 100%;
  height: 22em;
  border: 2px solid black;
  display: block;
}
.access-text {
  margin-top: 1em;
  text-align: left;
}
.access-text .place {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f40009;
}
.access-text .address {
  margin-top: 1em;
}

.sponsor {
  margin-top: 4em;
}
.sponsor-img {
  width: 80%;
  max-width: 350px;
  margin: 2em auto 0;
}
.sponsor-img img {
  width: 100%;
}
.sponsor-img:hover {
  opacity: 0.8;
}

.credit {
  width: 100%;
  background: #000000;
  color: #ffffff;
}
.credit-table {
  width: 100%;
  font-size: 1rem;
  border-collapse: collapse;
}
.credit-table tr {
  border-top: 1px solid #ffffff;
}
.credit-table tr:last-child {
  border-bottom: 1px solid #ffffff;
}
.credit-table th,
.credit-table td {
  padding: 0.6em 0;
  vertical-align: middle;
}
.credit-table th {
  width: 35%;
  text-align: center;
  font-weight: 500;
}
.credit-table td {
  width: 65%;
  text-align: left;
  padding-left: 2em;
  border-top: 1px solid #918c8a;
}
.credit-table td:last-child {
  border-bottom: 1px solid #918c8a;
}
.credit .footer-sns {
  margin-top: 3em;
  text-align: center;
}
.credit .footer-sns p {
  font-size: 1.2rem;
  font-weight: 800;
}
.credit .footer-sns .sns {
  margin-top: 1.5em;
}
.credit .copyright {
  margin-top: 4em;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1rem;
}

.section-last {
  font-size: 1rem;
  padding: 2em 0;
}

@media screen and (max-width: 500px) {
  body {
    background-image: none;
  }
  .wrapper {
    position: relative;
    width: 100%;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
@media screen and (max-width: 499px) {
  .inner {
    padding: 0 15px;
  }
  .section-title_main {
    font-size: 8vw;
  }
  .section-title_sub {
    font-size: 3.4vw;
    margin-top: 0.6em;
    font-weight: 800;
  }
  .btn {
    font-size: 4.8vw;
  }
  .btn a span {
    font-size: 3.4vw;
  }
  .name {
    font-size: 4.8vw;
    line-height: 4.8vw;
  }
  .text-banner {
    font-size: 3.6vw;
  }
  .mv {
    font-size: 3.4vw;
  }
  .mv .logo {
    font-size: 3.4vw;
  }
  .mv-info {
    font-size: 3.4vw;
  }
  .mv-text {
    font-size: 3.4vw;
  }
  .mv-schedule {
    font-size: 3.4vw;
  }
  .mv .btnarea {
    font-size: 4.8vw;
  }
  .mv-copy p {
    font-size: 3.4vw;
  }
  .mv .slash-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 2em;
    margin-top: 3em;
  }
  .mv .slash-text .followus {
    font-size: 5.5vw;
    line-height: 4.8vw;
  }
  .mv .slash-text .message {
    font-size: 4.8vw;
    line-height: 4.8vw;
  }
  .artist {
    font-size: 3.4vw;
  }
  .artist-flex {
    font-size: 3.4vw;
  }
  .artist-flex .text {
    font-size: 3.4vw;
  }
  .schoolband {
    font-size: 3.4vw;
  }
  .special {
    font-size: 3.4vw;
  }
  .special-text .text {
    font-size: 3vw;
  }
  .performer-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 1em;
  }
  .performer-flex .flex-img {
    width: calc((100% - 1em) / 2);
  }
  .performer-flex .flex-img img {
    width: 100%;
  }
  .timetable {
    font-size: 4.8vw;
  }
  .timetable-list {
    margin-top: 2em;
  }
  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0.5em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .time {
    font-size: 3.4vw;
  }
  .header .time {
    padding-bottom: 0.65em;
  }
  .event {
    font-size: 3.4vw;
  }
  .collab .time {
    padding: 1.07em 0;
  }
  .attention {
    font-size: 2.8vw;
  }
  .mc-flex {
    font-size: 3.4vw;
  }
  .mc-flex .text {
    font-size: 3vw;
    line-height: 1.6;
  }
  .ticket-list {
    font-size: 3.4vw;
  }
  .ticket thead th {
    padding: 0.4em;
    font-size: 4.8vw;
    line-height: 1.2em;
  }
  .ticket thead th span {
    font-size: 3.4vw;
  }
  .ticket tbody td {
    font-size: 3.4vw;
    line-height: 1.4em;
  }
  .ticket tbody .name span {
    font-size: 2.8vw;
  }
  .ticket p {
    font-size: 2.8vw;
    line-height: 1.4em;
  }
  .ticket-attention {
    font-size: 2.8vw;
  }
  .ticket-attention ul {
    line-height: 1.6em;
  }
  .ticket .btnarea {
    font-size: 3.4vw;
  }
  .accordion {
    font-size: 3.4vw;
  }
  .accordion-header {
    font-size: 3.4vw;
  }
  .access iframe {
    font-size: 3.4vw;
    height: 20em;
  }
  .access-text {
    font-size: 3.4vw;
    line-height: 1.4;
  }
  .access-text .place {
    font-size: 4.8vw;
    line-height: 1.4;
  }
  .access-text .address {
    font-size: 3.4vw;
    line-height: 1.4;
  }
  .sponsor {
    font-size: 3.4vw;
  }
  .credit-table {
    font-size: 3.4vw;
    line-height: 3.4vw;
  }
  .credit-table th,
  .credit-table td {
    font-size: 3.4vw;
    padding: 0.6em 0;
  }
  .credit-table th {
    text-align: center;
    font-weight: 500;
  }
  .credit-table td {
    text-align: left;
    padding-left: 1.5em;
    border-top: 1px solid #918c8a;
  }
  .credit-table td:last-child {
    border-bottom: 1px solid #918c8a;
  }
  .credit .footer-sns p {
    font-size: 3.4vw;
    line-height: 1.4;
  }
  .credit .copyright {
    font-size: 3.2vw;
  }
  .section-last {
    font-size: 3.4vw;
    padding: 2em 0 130px;
  }
}
@media screen and (max-width: 312px) {
  .special .spnone {
    display: none;
  }
  .special .flex-img {
    width: 100%;
  }
  .special-text {
    width: 100%;
  }
  .performer .performer-flex,
  .performer .special {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .performer .performer-flex .flex-img,
  .performer .special .flex-img {
    width: 100%;
  }
  .performer .performer-flex .flex-img img,
  .performer .special .flex-img img {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */