@charset "UTF-8";
@use "sass:math";
/* color 追加
----------------------------------------------------------------------------*/
/* mixin 追加
----------------------------------------------------------------------------*/
/* function 追加
----------------------------------------------------------------------------*/
/* css ここから
----------------------------------------------------------------------------*/
img {
  vertical-align: bottom; }

.is-fixed {
  overflow: hidden; }

.pink {
  color: #ff47b0; }

@media screen and (max-width: 767px) {
  .pc {
    display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp {
      display: block; } }

.karaokevideo {
  margin: 0;
  color: #362868;
  font-family: "m-plus-1p", sans-serif;
  font-size: clamp(18px, calc(15.71429px + 0.29762vw), 20px);
  font-weight: 800;
  font-style: normal;
  position: relative; }
  @media screen and (max-width: 767px) {
    .karaokevideo {
      font-size: 18px; } }

.contents_bg {
  width: 100vw;
  height: 100vh;
  background: url(../images/bg.webp) no-repeat center/cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; }

.inner {
  width: 69.44444%;
  max-width: 1000px;
  min-width: 700px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .inner {
      width: 90%;
      min-width: unset; } }

.h2 {
  margin: 0 auto 68px; }
  @media screen and (max-width: 767px) {
    .h2 {
      margin-bottom: 34px; } }

.point__contents,
.overview__contents,
.participate__contents,
.appearance__contents,
.song__contents,
.faq__contents {
  padding: 80px 50px;
  border: solid 5px #362868;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 6px 8px #2a1f50; }
  @media screen and (max-width: 767px) {
    .point__contents,
    .overview__contents,
    .participate__contents,
    .appearance__contents,
    .song__contents,
    .faq__contents {
      padding: 40px 25px;
      border: solid 4px #362868;
      box-shadow: 5px 7px #2a1f50; } }

.note {
  margin-top: 24px;
  padding-left: 1em;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-indent: -1em; }
  @media screen and (max-width: 767px) {
    .note {
      max-width: 500px;
      margin: 24px auto 0;
      font-size: 14px; } }

.mv img {
  width: 100%; }

.about {
  padding: 60px 0;
  border-top: solid 5px #362868;
  border-bottom: solid 5px #362868;
  background: url(../images/about_pic_bg.webp) no-repeat center/cover; }
  @media screen and (max-width: 767px) {
    .about {
      padding: 30px 0;
      border-top: solid 4px #362868;
      border-bottom: solid 4px #362868; } }
  .about__pictures {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 91.66667%;
    max-width: 1320px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .about__pictures {
        display: block;
        width: 100%; }
        .about__pictures.slick-slider {
          margin-bottom: 0;
          padding-bottom: clamp(80px, calc(51.36465px + 8.94855vw), 120px);
          overflow: hidden; }
        .about__pictures .slick-slide img {
          width: 100%; }
        .about__pictures .slick-dots {
          bottom: 0; }
        .about__pictures .slick-slide.slick-active {
          transform: translateY(20%); }
        .about__pictures .slick-list {
          overflow: unset; }
        .about__pictures .slick-dots li {
          width: 4.4vw;
          height: 4.4vw;
          margin: 0 2%; }
        .about__pictures .slick-dots li button:before {
          font-size: 4.0vw;
          color: #696969;
          line-height: 1;
          width: 3.0vw;
          height: 3.0vw;
          opacity: 1; }
        .about__pictures .slick-dots li.slick-active button:before {
          color: #ff47b0; } }
  .about__pic {
    width: 32.42424%;
    max-width: 428px; }
    @media screen and (max-width: 767px) {
      .about__pic {
        width: auto;
        max-width: none;
        padding: 0 10px;
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease; } }

.movie {
  width: 50.27778%;
  max-width: 724px;
  min-width: 500px;
  margin: 106px auto; }
  @media screen and (max-width: 767px) {
    .movie {
      width: 80%;
      min-width: unset;
      margin: 53px auto; } }
  .movie__img {
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease; }
    .movie__img::after {
      content: "";
      width: 86px;
      background: url(../images/icon_play.webp) no-repeat center/contain;
      aspect-ratio: 1/1;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      @media screen and (max-width: 767px) {
        .movie__img::after {
          width: clamp(40px, calc(7.06935px + 10.29083vw), 86px); } }

.modal {
  width: 100%;
  height: 100vh;
  background: url(../images/bg.webp) no-repeat center/cover;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.3s ease;
  visibility: hidden; }
  .modal__close_btn {
    width: 72px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      .modal__close_btn {
        width: 14vw;
        top: 5vw;
        right: 4vw; } }
    .modal__close_btn:hover {
      animation: btn-glitch 0.3s both infinite; }
  .modal .youtube {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 auto; }
  .modal #youtube-player {
    width: 100%;
    max-width: 900px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .modal #youtube-player {
        width: 90%; } }
  .modal #youtube-player iframe {
    width: 100% !important;
    height: 100% !important; }

.modal-open {
  opacity: 1;
  pointer-events: all;
  visibility: visible; }

.story {
  margin-bottom: 170px;
  padding: 10px;
  border: solid 5px #362868;
  background-color: rgba(255, 255, 255, 0.4);
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .story {
      margin-bottom: 85px;
      border: solid 4px #362868; } }
  .story__inner {
    padding: 50px 0 60px;
    border: solid 5px #362868;
    background: url(../images/grid_bg.webp) no-repeat center/cover;
    position: relative; }
    @media screen and (max-width: 767px) {
      .story__inner {
        padding: 25px 0 30px;
        border: solid 4px #362868; } }
  .story__title {
    width: 40.9%;
    max-width: 409px;
    margin-bottom: 50px; }
    @media screen and (max-width: 767px) {
      .story__title {
        width: clamp(180px, calc(101.2528px + 24.6085vw), 290px);
        margin-bottom: 25px; } }
  .story__text {
    margin-bottom: 28px;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .story__text {
        margin-bottom: 14px;
        font-size: clamp(16px, calc(14.56823px + 0.44743vw), 18px); } }
  .story__textArea {
    width: 71.42857%;
    max-width: 1000px;
    min-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1; }
    @media screen and (max-width: 767px) {
      .story__textArea {
        width: 90%;
        min-width: unset; } }
    .story__textArea p:last-child {
      margin-bottom: 0; }
  .story__bubble {
    width: 91.9%;
    max-width: 919px;
    margin-bottom: 30px;
    transform: translateX(clamp(-80px, calc(27.14286px + -7.44048vw), -30px)); }
    @media screen and (max-width: 767px) {
      .story__bubble {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 15px;
        transform: unset; } }
  .story__pic {
    width: 31%;
    max-width: 434px;
    position: absolute;
    bottom: clamp(0px, calc(257.14286px + -17.85714vw), 120px);
    right: clamp(-30px, calc(-98.57143px + 8.92857vw), 30px); }
    @media screen and (max-width: 1050px) {
      .story__pic {
        width: 29%; } }
    @media screen and (max-width: 767px) {
      .story__pic {
        display: none; } }
  .story__img {
    object-fit: cover;
    object-position: bottom right; }

.point {
  margin-bottom: 155px; }
  @media screen and (max-width: 767px) {
    .point {
      margin-bottom: 85px; } }
  .point__title {
    width: 33.3%;
    max-width: 333px; }
    @media screen and (max-width: 767px) {
      .point__title {
        width: clamp(160px, calc(81.2528px + 24.6085vw), 270px); } }
  .point__item {
    display: flex;
    align-items: center;
    margin-bottom: 62px; }
    @media screen and (max-width: 767px) {
      .point__item {
        display: block; } }
    .point__item:nth-child(even) {
      flex-direction: row-reverse; }
      .point__item:nth-child(even) .point__textArea {
        margin-left: 0;
        margin-right: -34px;
        position: relative;
        z-index: 1; }
        @media screen and (max-width: 767px) {
          .point__item:nth-child(even) .point__textArea {
            display: block;
            width: 95%;
            min-width: unset;
            margin: -20px auto 0;
            padding: 15px 15px 20px;
            position: relative;
            z-index: 2; } }
    .point__item:last-child {
      margin-bottom: 0; }
  .point__img {
    width: 45%;
    max-width: 450px;
    min-width: 270px; }
    @media screen and (max-width: 767px) {
      .point__img {
        width: 100%;
        max-width: 500px;
        min-width: unset;
        margin: 0 auto; } }
  .point__textArea {
    width: 50.5618%;
    max-width: 450px;
    min-width: 340px;
    display: inline-block;
    margin-left: -34px;
    padding: 30px 30px 40px;
    border-radius: 10px;
    background-color: #362868;
    color: #fff;
    box-sizing: border-box; }
    @media screen and (max-width: 767px) {
      .point__textArea {
        display: block;
        width: 95%;
        min-width: unset;
        margin: -20px auto  0;
        padding: 15px 15px 20px;
        position: relative;
        z-index: 2; } }
  .point__heading {
    display: inline-block;
    margin: 0;
    margin-left: -30px;
    padding: 5px 20px 5px 10px;
    background-color: #ff47b0;
    font-size: 24px;
    line-height: 1em;
    transform: rotate(0.05deg);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
    @media screen and (max-width: 767px) {
      .point__heading {
        margin-left: -15px;
        font-size: clamp(16px, calc(13.13647px + 0.89485vw), 20px); } }
  .point__text {
    margin-top: 20px;
    font-size: clamp(16px, calc(13.71429px + 0.29762vw), 18px);
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .point__text {
        margin-top: 10px;
        font-size: clamp(14px, calc(11.13647px + 0.89485vw), 18px); } }
    .point__text .pink {
      font-size: 1.2em; }
      @media screen and (max-width: 767px) {
        .point__text .pink {
          font-size: 1.1em; } }

.overview {
  margin-bottom: 154px; }
  @media screen and (max-width: 767px) {
    .overview {
      margin-bottom: 85px; } }
  .overview__title {
    width: 40.9%;
    max-width: 409px; }
    @media screen and (max-width: 767px) {
      .overview__title {
        width: clamp(190px, calc(118.41163px + 22.37136vw), 290px); } }

.detail__list {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  border-radius: 10px;
  background-color: #fff; }
  @media screen and (max-width: 767px) {
    .detail__list {
      display: block;
      max-width: 500px;
      margin: 0 auto 16px; } }
.detail__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 170px;
  height: stretch;
  padding: 30px 37px;
  background-color: #362868;
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 1em;
  transform: rotate(0.05deg); }
  @media screen and (max-width: 767px) {
    .detail__title {
      max-width: unset;
      padding: 15px 0;
      font-size: 20px; } }
.detail__data {
  width: 100%;
  margin: 30px 20px 30px 0; }
  @media screen and (max-width: 767px) {
    .detail__data {
      margin: 0;
      padding: 14px 12px; } }
.detail__text {
  width: 94.28571%;
  max-width: 660px;
  margin-left: clamp(20px, calc(-2.85714px + 2.97619vw), 40px);
  transform: rotate(0.05deg); }
  @media screen and (max-width: 767px) {
    .detail__text {
      width: 100%;
      margin: 0;
      font-size: clamp(14px, calc(12.56823px + 0.44743vw), 16px);
      word-break: break-all; } }
  .detail__text span {
    display: inline-block;
    width: 100px;
    margin-bottom: 8px;
    margin-right: 20px;
    padding: 6px 0;
    border-radius: 25px;
    background-color: #ff47b0;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 1em; }
    @media screen and (max-width: 1126px) {
      .detail__text span {
        display: block;
        margin-right: 0; } }
    @media screen and (max-width: 767px) {
      .detail__text span {
        display: inline-block;
        width: 80px;
        margin-right: 10px;
        font-size: 14px; } }
    .detail__text span:last-child {
      margin-bottom: 0; }
      @media screen and (max-width: 1126px) {
        .detail__text span:last-child {
          margin-top: 10px; } }
      @media screen and (max-width: 767px) {
        .detail__text span:last-child {
          margin-top: 0; } }
  @media screen and (max-width: 767px) {
    .detail__text--period {
      width: fit-content;
      max-width: 235px;
      margin: 0 auto; } }
  .detail__text--period br {
    display: none; }
    @media screen and (max-width: 1271px) {
      .detail__text--period br {
        display: block; } }
  .detail__text--price {
    width: 54.54545%;
    max-width: 300px;
    padding: 14px;
    border: solid 1px #362868;
    border-radius: 10px;
    position: relative; }
    @media screen and (max-width: 1126px) {
      .detail__text--price {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; } }
    @media screen and (max-width: 767px) {
      .detail__text--price {
        display: block;
        width: 100%;
        max-width: unset;
        text-align: center; } }
  .detail__text--room {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36.36364%;
    max-width: 200px;
    margin-left: 10px;
    padding: 14px;
    border: solid 1px #362868;
    border-radius: 10px;
    position: relative; }
    @media screen and (max-width: 767px) {
      .detail__text--room {
        display: block;
        width: 100%;
        max-width: unset;
        margin-left: 0;
        margin-top: 10px;
        text-align: center; } }
    .detail__text--room::before {
      content: "";
      width: 30px;
      height: 30px;
      background: url(../images/icon_plus.webp) no-repeat center/cover;
      position: absolute;
      top: 50%;
      left: -21px;
      transform: translateY(-50%);
      z-index: 1; }
      @media screen and (max-width: 767px) {
        .detail__text--room::before {
          top: -20px;
          bottom: unset;
          left: 50%;
          transform: translate(-50%, 0); } }
    .detail__text--room::after {
      content: "（税込み）";
      color: #000;
      font-size: clamp(14px, calc(11.71429px + 0.29762vw), 16px);
      font-weight: 500;
      position: absolute;
      right: 0;
      bottom: clamp(-40px, calc(-29.28571px + -0.74405vw), -35px); }
      @media screen and (max-width: 767px) {
        .detail__text--room::after {
          font-size: 12px;
          bottom: -25px; } }
  @media screen and (max-width: 767px) {
    .detail__text--people, .detail__text--duration {
      text-align: center; } }
.detail__note {
  margin-top: 14px;
  margin-left: clamp(20px, calc(-2.85714px + 2.97619vw), 40px);
  color: #555;
  font-size: clamp(14px, calc(11.71429px + 0.29762vw), 16px);
  font-weight: 500;
  transform: rotate(0.05deg); }
  @media screen and (max-width: 767px) {
    .detail__note {
      margin-top: 20px;
      margin-left: 0;
      font-size: 12px; } }
  @media screen and (max-width: 767px) {
    .detail__note--priceNote {
      margin-top: 40px; } }
  .detail__note span {
    display: block;
    padding-left: 1em;
    text-indent: -1em; }
.detail__flex {
  display: flex; }
  @media screen and (max-width: 767px) {
    .detail__flex {
      display: block; } }
.detail__taxText {
  margin-top: 14px;
  font-size: 16px; }
.detail__iconArea {
  width: 11.90476%;
  max-width: 75px; }
  @media screen and (max-width: 767px) {
    .detail__iconArea {
      width: 20%; } }
.detail__table {
  width: 100%;
  padding-left: 20px; }
  @media screen and (max-width: 767px) {
    .detail__table {
      padding-left: 0; } }
  .detail__table tr {
    display: block;
    margin-bottom: 25px;
    padding-bottom: 25px;
    padding-left: 24px;
    border-bottom: solid 1px #362868;
    position: relative; }
    @media screen and (max-width: 767px) {
      .detail__table tr {
        padding-left: 0;
        padding-bottom: 20px; } }
    .detail__table tr::after {
      content: "";
      width: 21px;
      height: 18px;
      width: 21px;
      height: 18px;
      background: #ff47b0;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%); }
    .detail__table tr:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border: none; }
      .detail__table tr:last-child::after {
        display: none; }
  .detail__table td {
    display: inline-block;
    padding: 0;
    font-weight: unset;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .detail__table td {
        display: block;
        margin: 0 auto 10px;
        font-size: clamp(14px, calc(12.56823px + 0.44743vw), 16px); } }
    .detail__table td:nth-child(2) {
      width: 76.92308%;
      max-width: 520px;
      margin-left: 22px;
      line-height: 1.5em; }
      @media screen and (max-width: 767px) {
        .detail__table td:nth-child(2) {
          width: 100%;
          max-width: unset;
          margin: 0;
          font-size: 16px;
          text-align: center; } }
    .detail__table td img {
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .detail__table td img {
          max-width: clamp(55px, calc(51.42058px + 1.11857vw), 60px); } }

.participate {
  margin-bottom: 230px; }
  @media screen and (max-width: 767px) {
    .participate {
      margin-bottom: 85px; } }
  .participate__title {
    width: 34.1%;
    max-width: 341px; }
    @media screen and (max-width: 767px) {
      .participate__title {
        width: clamp(170px, calc(112.72931px + 17.89709vw), 250px); } }
  .participate .detail__text {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 25px 20px;
    padding-bottom: 25px;
    border-bottom: solid 1px #362868; }
    @media screen and (max-width: 767px) {
      .participate .detail__text {
        display: block; } }
    .participate .detail__text:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none; }
  .participate .note {
    margin-top: 0;
    transform: rotate(0.05deg); }

.ticket_btn {
  display: block;
  width: fit-content;
  max-width: 500px;
  margin: 50px auto 0;
  transition: .3s; }
  @media screen and (max-width: 767px) {
    .ticket_btn {
      margin-top: 25px; } }
  .ticket_btn:hover {
    opacity: .7; }

.yodaka {
  margin-bottom: 170px;
  padding: 10px;
  border: solid 5px #362868;
  background-color: rgba(255, 255, 255, 0.4); }
  @media screen and (max-width: 767px) {
    .yodaka {
      margin-bottom: 85px;
      border: solid 4px #362868; } }
  .yodaka__inner {
    padding: 130px 0 70px;
    border: solid 5px #362868;
    background: url(../images/grid_bg.webp) no-repeat center/cover;
    position: relative; }
    @media screen and (max-width: 767px) {
      .yodaka__inner {
        padding: 65px 0 35px;
        border: solid 4px #362868; } }
  .yodaka__contents {
    width: 78.57143%;
    max-width: 1100px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .yodaka__contents {
        width: 90%; } }
  .yodaka__bubble {
    width: 42.54545%;
    max-width: 468px;
    position: absolute;
    top: clamp(-90px, calc(81.42857px + -11.90476vw), -10px);
    left: clamp(10px, calc(-115.71429px + 16.36905vw), 120px); }
    @media screen and (max-width: 767px) {
      .yodaka__bubble {
        width: 40%;
        min-width: 240px;
        top: clamp(-60px, calc(-34.26174px + -3.3557vw), -45px);
        left: clamp(-10px, calc(-24.31767px + 4.47427vw), 10px); } }
  .yodaka__title {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 2px #362868;
    font-size: 30px;
    line-height: 1em;
    position: relative;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .yodaka__title {
        width: 100%;
        padding-right: 45px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        font-size: 24px;
        font-size: clamp(18px, calc(13.7047px + 1.34228vw), 24px); } }
  .yodaka__icon {
    max-width: 95px;
    position: absolute;
    right: 0;
    bottom: -1px; }
    @media screen and (max-width: 767px) {
      .yodaka__icon {
        width: clamp(40px, calc(46.86353px + -0.89485vw), 44px); } }
  .yodaka__text {
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .yodaka__text {
        font-size: 16px; } }

.appearance {
  margin-bottom: 155px;
  line-height: 1.5em; }
  @media screen and (max-width: 767px) {
    .appearance {
      margin-bottom: 85px; } }
  .appearance__title {
    width: 18.3%;
    max-width: 183px;
    margin-bottom: 68px; }
    @media screen and (max-width: 767px) {
      .appearance__title {
        width: clamp(100px, calc(64.20582px + 11.18568vw), 150px);
        margin-bottom: 34px; } }
  .appearance__contents {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 65px 50px 63px 38px; }
    @media screen and (max-width: 767px) {
      .appearance__contents {
        display: block;
        padding: 30px 25px 20px; } }
  .appearance__pic {
    width: 45.95506%;
    max-width: 409px; }
    @media screen and (max-width: 767px) {
      .appearance__pic {
        width: clamp(228px, calc(165.71812px + 19.46309vw), 315px);
        max-width: 300px;
        margin: 0 auto; } }
    .appearance__pic img {
      width: 100%; }
  .appearance__textArea {
    width: 53.93258%;
    max-width: 480px; }
    @media screen and (max-width: 767px) {
      .appearance__textArea {
        width: 100%;
        max-width: unset; } }
  .appearance__name {
    margin-bottom: 40px;
    font-size: 30px;
    line-height: 1em;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .appearance__name {
        margin: 20px 0;
        font-size: clamp(20px, calc(17.13647px + 0.89485vw), 24px); } }
  .appearance__text {
    transform: rotate(0.05deg);
    font-size: 20px;
    word-break: break-word; }
    @media screen and (max-width: 767px) {
      .appearance__text {
        font-size: clamp(16px, calc(14.56823px + 0.44743vw), 18px);
        line-height: 1.5em; } }

.song {
  margin-bottom: 162px;
  color: #362868; }
  @media screen and (max-width: 767px) {
    .song {
      margin-bottom: 85px; } }
  .song__title {
    width: 48.8%;
    max-width: 488px;
    margin-bottom: 67px; }
    @media screen and (max-width: 767px) {
      .song__title {
        width: clamp(220px, calc(148.41163px + 22.37136vw), 320px);
        margin-bottom: 34px; } }
  .song__singer {
    display: flex;
    align-items: center;
    gap: 36px; }
    @media screen and (max-width: 767px) {
      .song__singer {
        display: block; } }
  .song__pic {
    width: 50.5618%;
    max-width: 450px; }
    @media screen and (max-width: 767px) {
      .song__pic {
        width: 100%;
        max-width: 370px;
        margin: 0 auto; } }
  .song__themaSong {
    font-size: clamp(28px, calc(25.71429px + 0.29762vw), 30px);
    line-height: 1.5em;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .song__themaSong {
        width: fit-content;
        margin: 15px auto 0;
        font-size: clamp(20px, calc(17.13647px + 0.89485vw), 24px);
        text-align: center; } }
    .song__themaSong span {
      display: block;
      font-size: clamp(20px, calc(15.42857px + 0.59524vw), 24px);
      font-weight: 500;
      line-height: 1.5em; }
      @media screen and (max-width: 767px) {
        .song__themaSong span {
          font-size: clamp(16px, calc(13.13647px + 0.89485vw), 20px); } }
  .song__exist_trace_logo {
    max-width: 226px;
    margin-top: 30px; }
    @media screen and (max-width: 767px) {
      .song__exist_trace_logo {
        width: fit-content;
        max-width: 180px;
        margin: 15px auto 0; } }
  .song__text {
    margin-top: 40px;
    font-weight: 800;
    transform: rotate(0.05deg);
    word-break: break-all; }
    @media screen and (max-width: 767px) {
      .song__text {
        margin-top: 20px;
        font-size: clamp(16px, calc(14.56823px + 0.44743vw), 18px); } }

.caution {
  margin-bottom: 170px;
  padding: 80px 0 100px;
  background-color: #362868;
  color: #fff; }
  @media screen and (max-width: 767px) {
    .caution {
      width: 100%;
      margin-bottom: 85px;
      padding: 40px 0 50px;
      overflow: hidden; } }
  .caution__inner {
    width: 76.38889%;
    max-width: 1100px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .caution__inner {
        width: 90%; } }
  .caution__title {
    margin-bottom: 60px;
    font-size: 36px;
    text-align: center;
    position: relative;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .caution__title {
        margin-bottom: 30px;
        font-size: clamp(24px, calc(18.27293px + 1.78971vw), 32px);
        line-height: 1em; } }
    .caution__title::before, .caution__title::after {
      content: "";
      width: 36.36364%;
      max-width: 400px;
      height: 2px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); }
      @media screen and (max-width: 767px) {
        .caution__title::before, .caution__title::after {
          width: 25%; } }
    .caution__title::after {
      left: unset;
      right: 0; }
  .caution__block {
    margin-bottom: 60px; }
    @media screen and (max-width: 767px) {
      .caution__block {
        margin-bottom: 30px; } }
  .caution__heading {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 14px;
    background-color: #ff47b0;
    font-size: 24px;
    line-height: 1em;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .caution__heading {
        margin-bottom: 10px;
        padding: 4px 7px;
        font-size: clamp(18px, calc(16.56823px + 0.44743vw), 20px); } }
  .caution__list {
    margin: 0;
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 500; }
    @media screen and (max-width: 767px) {
      .caution__list {
        font-size: clamp(16px, calc(14.56823px + 0.44743vw), 18px); } }
  .caution__item {
    padding-left: 1em;
    text-indent: -1em;
    transform: rotate(0.05deg); }
  .caution__subHeading {
    margin-bottom: 18px;
    line-height: 1em;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .caution__subHeading {
        margin-bottom: 10px; } }
  .caution .block02 .caution__list {
    margin-bottom: 40px; }
    @media screen and (max-width: 767px) {
      .caution .block02 .caution__list {
        margin-bottom: 20px; } }
    .caution .block02 .caution__list:last-child {
      margin-bottom: 0; }

.faq {
  margin-bottom: 162px; }
  @media screen and (max-width: 767px) {
    .faq {
      margin-bottom: 85px; } }
  .faq__title {
    width: 21.5%;
    max-width: 215px; }
    @media screen and (max-width: 767px) {
      .faq__title {
        width: clamp(130px, calc(101.36465px + 8.94855vw), 170px);
        max-width: unset; } }
  .faq__contents {
    padding: 40px clamp(15px, calc(7.84116px + 2.23714vw), 25px); }
  .faq__item {
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff; }
    @media screen and (max-width: 767px) {
      .faq__item {
        margin-bottom: 15px; } }
  .faq__question {
    display: block;
    width: 100%;
    padding: 23px 80px 23px 30px;
    border: none;
    background-color: #362868;
    border-radius: 10px;
    color: #fff;
    font-size: clamp(20px, calc(15.42857px + 0.59524vw), 24px);
    text-align: left;
    position: relative;
    cursor: pointer;
    letter-spacing: -0.06em;
    line-height: 1.5em; }
    @media screen and (max-width: 767px) {
      .faq__question {
        padding: 10px 40px 10px 15px;
        font-size: clamp(14px, calc(9.7047px + 1.34228vw), 20px); } }
    .faq__question::before {
      content: "";
      width: 20px;
      height: 3px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      right: 30px;
      transform: translateY(-50%); }
      @media screen and (max-width: 767px) {
        .faq__question::before {
          width: 15px;
          height: 2px;
          right: 10px; } }
    .faq__question::after {
      content: "";
      display: none;
      width: 3px;
      height: 20px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      right: 38px;
      transform: translateY(-50%); }
      @media screen and (max-width: 767px) {
        .faq__question::after {
          width: 2px;
          height: 15px;
          right: 16px; } }
    .faq__question span {
      display: block;
      padding-left: 1.2em;
      text-indent: -1.2em;
      transform: rotate(0.05deg); }
  .faq__answerInner {
    overflow: hidden; }
  .faq__answerContent {
    padding: 30px; }
    @media screen and (max-width: 767px) {
      .faq__answerContent {
        padding: 15px; } }
  .faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: all 0.3s ease;
    overflow: hidden;
    pointer-events: none; }
  .faq .open .faq__answer {
    grid-template-rows: 1fr;
    pointer-events: all; }
  .faq .open .faq__question::after {
    display: block; }
  .faq__answerText {
    font-size: 18px;
    transform: rotate(0.05deg); }
    @media screen and (max-width: 767px) {
      .faq__answerText {
        font-size: clamp(13px, calc(9.42058px + 1.11857vw), 18px); } }
    .faq__answerText a {
      display: inline;
      color: #ff47b0;
      position: relative;
      transition: all .3s;
      text-decoration: underline;
      transform: rotate(0.05deg); }
      .faq__answerText a:hover {
        text-decoration: none;
        opacity: .7; }
      .faq__answerText a img {
        position: absolute;
        top: 50%;
        right: -1em;
        transform: translateY(-50%); }

.main_footer {
  padding: 80px 0;
  border-top: solid 5px #362868;
  background-color: rgba(54, 40, 104, 0.8);
  text-align: center; }
  @media screen and (max-width: 767px) {
    .main_footer {
      padding: 40px 0;
      border: solid 4px #362868; } }
  .main_footer a {
    display: inline-block;
    width: 18.54167%;
    max-width: 267px;
    min-width: 200px;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .main_footer a {
        width: clamp(192px, calc(138.30872px + 16.77852vw), 267px);
        max-width: unset;
        min-width: unset; } }

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0; }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0; }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%; }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%; } }
@keyframes glitch-anim-text {
  0% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); }
  10%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
@keyframes skew {
  0% {
    transform: none; }
  33% {
    transform: none; }
  33.3% {
    transform: skewX(20deg); }
  33.6% {
    transform: skewX(-20deg); }
  33.9% {
    transform: none; }
  66% {
    transform: none; }
  66.3% {
    transform: skewX(5deg); }
  66.6% {
    transform: skewX(-5deg); }
  66.9% {
    transform: none; }
  77% {
    transform: none; }
  77.3% {
    transform: skewX(15deg); }
  77.6% {
    transform: skewX(-15deg); }
  77.9% {
    transform: none; } }
.glitch {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease; }
  .glitch span {
    display: block;
    animation: glitch-anim-text 3s infinite, skew 2s infinite; }

.glitch02 {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease; }
  .glitch02 span {
    display: block; }
  .glitch02:hover span {
    display: block;
    animation: skew 1s infinite; }

.animeset {
  opacity: 0;
  visibility: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -ms-filter: blur(15px);
  -o-filter: blur(15px);
  filter: blur(15px);
  transition: opacity 1s, filter 1.2s; }

.animeset_on {
  opacity: 1;
  visibility: visible;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  -o-filter: blur(0px);
  filter: blur(0px); }

@keyframes btn-glitch {
  0% {
    transform: translate(0); }
  12.5% {
    transform: translate(-1px, 1px); }
  37.5% {
    transform: translate(-1px, -1px); }
  62.5% {
    transform: translate(1px, 1px); }
  87.5% {
    transform: translate(1px, -1px); }
  100% {
    transform: translate(0); } }
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 60.70364%, 100% 60.70364%, 100% 65.24313%, 0% 65.24313%);
    transform: translate(2.14575%, 0.35347%); }
  2% {
    clip-path: polygon(0% 46.76415%, 100% 46.76415%, 100% 50.57221%, 0% 50.57221%);
    transform: translate(-0.37248%, -0.12503%); }
  4% {
    clip-path: polygon(0% 11.08011%, 100% 11.08011%, 100% 16.84662%, 0% 16.84662%);
    transform: translate(4.91556%, 0.26208%); }
  6% {
    clip-path: polygon(0% 48.20369%, 100% 48.20369%, 100% 49.64976%, 0% 49.64976%);
    transform: translate(3.63256%, -0.49776%); }
  8% {
    clip-path: polygon(0% 29.26852%, 100% 29.26852%, 100% 32.20153%, 0% 32.20153%);
    transform: translate(5.6118%, 0.06916%); }
  10% {
    clip-path: polygon(0% 2.5923%, 100% 2.5923%, 100% 8.3393%, 0% 8.3393%);
    transform: translate(7.64417%, -0.25604%); }
  12% {
    clip-path: polygon(0% 28.39686%, 100% 28.39686%, 100% 32.04334%, 0% 32.04334%);
    transform: translate(-3.11485%, 0.29461%); }
  14% {
    clip-path: polygon(0% 63.91764%, 100% 63.91764%, 100% 70.92674%, 0% 70.92674%);
    transform: translate(-7.41339%, 0.26525%); }
  16% {
    clip-path: polygon(0% 71.64354%, 100% 71.64354%, 100% 75.54859%, 0% 75.54859%);
    transform: translate(-7.01913%, 0.1616%); }
  18% {
    clip-path: polygon(0% 27.86305%, 100% 27.86305%, 100% 37.83506%, 0% 37.83506%);
    transform: translate(5.00113%, 0.34542%); }
  20%, 100% {
    clip-path: none;
    transform: none; } }
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 78.45499%, 100% 78.45499%, 100% 81.795%, 0% 81.795%);
    transform: translate(6.82041%, -0.08757%); }
  2% {
    clip-path: polygon(0% 32.06516%, 100% 32.06516%, 100% 41.7406%, 0% 41.7406%);
    transform: translate(-2.44433%, 0.05142%); }
  4% {
    clip-path: polygon(0% 38.38139%, 100% 38.38139%, 100% 48.19613%, 0% 48.19613%);
    transform: translate(-6.71118%, -0.12056%); }
  6% {
    clip-path: polygon(0% 58.72098%, 100% 58.72098%, 100% 62.33739%, 0% 62.33739%);
    transform: translate(-2.43667%, -0.17207%); }
  8% {
    clip-path: polygon(0% 6.05149%, 100% 6.05149%, 100% 13.71225%, 0% 13.71225%);
    transform: translate(-7.22138%, 0.19267%); }
  10% {
    clip-path: polygon(0% 78.89014%, 100% 78.89014%, 100% 86.17608%, 0% 86.17608%);
    transform: translate(4.3084%, 0.18821%); }
  12% {
    clip-path: polygon(0% 2.80552%, 100% 2.80552%, 100% 12.56918%, 0% 12.56918%);
    transform: translate(-3.69659%, -0.44071%); }
  14% {
    clip-path: polygon(0% 76.61017%, 100% 76.61017%, 100% 80.1664%, 0% 80.1664%);
    transform: translate(2.46438%, -0.41015%); }
  16% {
    clip-path: polygon(0% 59.18154%, 100% 59.18154%, 100% 61.79354%, 0% 61.79354%);
    transform: translate(1.92331%, -0.43287%); }
  18% {
    clip-path: polygon(0% 56.92565%, 100% 56.92565%, 100% 66.00326%, 0% 66.00326%);
    transform: translate(1.18009%, -0.21029%); }
  20%, 100% {
    clip-path: none;
    transform: none; } }
@keyframes rgb-shift-r {
  0% {
    transform: translate(-0.40001%, 0.3329%); }
  2% {
    transform: translate(1.67085%, 0.28474%); }
  4% {
    transform: translate(0.9983%, -0.46014%); }
  6% {
    transform: translate(0.92645%, -0.24156%); }
  8% {
    transform: translate(-1.6975%, 0.04635%); }
  10% {
    transform: translate(0.38346%, 0.40306%); }
  12% {
    transform: translate(-0.27022%, -0.35075%); }
  14% {
    transform: translate(1.37116%, 0.16637%); }
  16% {
    transform: translate(0.70887%, 0.0791%); }
  18% {
    transform: translate(-1.11452%, -0.16901%); }
  20%, 100% {
    transform: none; } }
@keyframes rgb-shift-g {
  0% {
    transform: translate(1.19443%, 0.4182%); }
  2% {
    transform: translate(0.80726%, 0.14329%); }
  4% {
    transform: translate(0.20724%, 0.46877%); }
  6% {
    transform: translate(0.06373%, -0.09178%); }
  8% {
    transform: translate(-1.46268%, 0.18881%); }
  10% {
    transform: translate(1.82758%, 0.16959%); }
  12% {
    transform: translate(-0.98778%, -0.22937%); }
  14% {
    transform: translate(-1.03495%, -0.48995%); }
  16% {
    transform: translate(0.66056%, 0.42754%); }
  18% {
    transform: translate(-0.6428%, -0.2121%); }
  20%, 100% {
    transform: none; } }
@keyframes rgb-shift-b {
  0% {
    transform: translate(0.98726%, 0.39486%); }
  2% {
    transform: translate(-0.67957%, 0.21667%); }
  4% {
    transform: translate(-0.28689%, -0.47935%); }
  6% {
    transform: translate(-1.94898%, 0.25147%); }
  8% {
    transform: translate(1.04387%, -0.17363%); }
  10% {
    transform: translate(1.50656%, -0.19513%); }
  12% {
    transform: translate(-1.19535%, -0.46183%); }
  14% {
    transform: translate(-0.46923%, 0.33061%); }
  16% {
    transform: translate(-1.19562%, 0.37907%); }
  18% {
    transform: translate(-1.97015%, 0.16107%); }
  20%, 100% {
    transform: none; } }
@keyframes rotate_anime {
  0% {
    transform: rotate(18deg); }
  100% {
    transform: rotate(8deg); } }