html {
  scroll-behavior: smooth;
}

body {
  font-family: "源ノ角ゴシック", "Source Han Sans", "Noto Sans JP", sans-serif;
  background: #000;
  margin: 0;
}

.wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
  background-image: url(../img/background.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 580px;
  background: #000;
  z-index: 99;
}

a {
  display: block;
}

img {
  width: 630px;
  margin: 0 auto;
  object-fit: contain;
}

.top-wrap {
  position: relative;
  width: 100%;
}

.top {
  width: 630px;
  margin: 0 auto;
  display: block;
}

.cta {
  position: absolute;
  top: 60%;
  width: 100%;
  text-align: center;
}

.cta_btn{
  width: 342px;
}

.content03-wrap {
  position: relative;
  width: 100%;
}

.content03 {
  width: 630px;
  margin: 0 auto;
  display: block;
}

.instagram {
  position: absolute;
  top: 24%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.x {
  position: absolute;
  top: 28%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.instagram img,
.x img {
  width: 295px;
  margin: 0 auto;
  display: block;
}

.studio-accordion {
  width: 630px;
  margin: 0 auto;
  background: #000;
}

.studio-item {
  background: #fff;
}

.studio-title::-webkit-details-marker {
  display: none;
}

.studio-title::marker {
  display: none;
}

.studio-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  box-sizing: border-box;
  background: linear-gradient(90deg,#bd1d23 0%,#ed7410 100%);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  cursor: pointer;
}

.studio-icon {
  position: relative;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.studio-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.studio-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.2s ease;
}

.studio-item[open] .studio-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.event-list {
  background: #000;
}

.event-item {
  background: #fff;
  margin-bottom: 30px;
}

.event-item:last-child {
  margin: 0;
}

.event-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #222;
  cursor: default;
  list-style: none;
}

.event-header::-webkit-details-marker {
  display: none;
}

.event-header::marker {
  display: none;
}

.event-content,
.event-list {
  overflow: hidden;
  height: auto;
  transition: height 0.35s ease;
}

.event-icon {
  position: relative;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.event-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #080808;
  transform: translate(-50%, -50%);
}

.event-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #080808;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.2s ease;
}

.event-item[open] .event-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.challenge-title{
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(90deg, #bd1d23 0%, #ed7410 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.event-title {
  flex: 1;
}

.event-date {
  margin: 0;
  color: #080808;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}

.event-subtitle {
  margin: 0;
  color: #080808;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 5px;
}

.member-label {
  padding: 4px 15px;
  background: #080808;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  align-self: flex-start;
  margin-right: 49px;
}

.non-member-label{
  color: #fff;
  background: linear-gradient(90deg, #bd1d23 0%, #ed7410 100%);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 15px;
  align-self: flex-start;
  margin-right: 67px;
}

.event-icon {
  position: relative;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.event-icon::before,
.event-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #080808;
  transform: translate(-50%, -50%);
}

.event-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

.event-content {
  padding: 20px;
}

.event-content dl {
  margin: 0 0 28px;
}

.event-content dl > div {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 20px;
}

.event-content dt {
  color: #ed7410;
  font-size: 1rem;
  font-weight: bold;
}

.event-content dd {
  margin: 0;
  color: #080808;
  font-size: 1rem;
  font-weight: bold;
}

.reservation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 70px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 900;
}

.challenge-btn {
  background: linear-gradient(90deg, #bd1d23 0%, #ed7410 100%);
}

.old-price {
  position: relative;
  display: inline-block;
}

.old-price::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: red;
  transform: translateY(-50%) rotate(-15deg);
  transform-origin: center;
}

footer{
  width: 630px;
  margin: 0 auto;
  padding: 15px 0 100px 0;
  background: #000;
}

footer p{
  color: #fff;
  font-size: 0.8rem;
  padding: 0 20px;
  margin-bottom: 7px;
}

footer a{
  width: 17%;
  margin-left: 20px;
  padding: 2px 0;
  font-size: 0.8rem;
  color: #ed7410;
  background-color: #fff;
  text-align: center;
  border-radius: 5px;
}




  
  @media screen and (max-width: 568px) {

    img {
      width: 100%;
    }

    .top {
      width: 100%;
    }

    .content03 {
      width: 100%;
    }

    .studio-accordion {
      width: 100%;
    }

    footer{
      width: 100%;
    }

    .instagram{
      width: 100%;
    }

    .x{
      width: 100%;
    }

    .instagram img,
    .x img {
      width: 216px;
    }

    .cta{
      top: 59%;
    }

    .cta_btn{
      width: 271px;
    }

    .studio-name{
      font-size: 1.4rem;
    }

    .event-header{
      padding: 15px 20px;
    }

    .event-date{
      font-size: 1.2rem;
      line-height: 1;
    }

    .event-subtitle{
      font-size: 1rem;
    }

    .event-icon{
      width: 25px;
      height: 25px;
    }

    .event-icon::before,
    .event-icon::after {
      width: 25px;
    }

    .event-content{
      padding: 15px 20px;
    }

    .event-content dl{
      margin: 0 0 15px;
    }

    .event-content dl > div{
      margin-bottom: 7px;
    }

    .challenge-title{
      font-size: 1.4rem;
    }

    .member-label{
      margin-right: 0;
      font-size: 0.9rem;
      padding: 3px 7px;
      margin-right: 10px;
      font-weight: 600;
    }

    .non-member-label{
      margin-right: 0;
      font-size: 1rem;
      padding: 5px 10px;
    }

    .reservation-btn{
      min-height: 0;
      padding: 13px 0;
    }
    
    span {
      font-size: 1rem;
      font-weight: normal;
      font-weight: bold;
      position: relative;
    }

    .old-price{
      font-size: 1rem;
    }

    footer a{
      width: 26%;
      padding: 3px 0;
    }

  }

  
/* ===== 予約アコーディオン調整 ===== */

/* スタジオ・日程を縦並びに */
.studio-item,
.event-list,
.event-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 日程ヘッダー */
.event-item > .event-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.event-title {
  flex: 1;
  min-width: 0;
}

/* 開閉アイコン */
.event-item[open] > .event-header
.event-icon::after {
  transform: translate(-50%, -50%)
    rotate(90deg) scaleX(0);
}

/* 予約内容 */
.event-item > .event-content {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 会員・非会員の見出し */
.booking-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.booking-heading strong {
  font-size: 1.5rem;
  font-weight: 900;
}

.member-tag,
.guest-tag {
  display: inline-block;
  min-width: 105px;
  padding: 4px 12px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-weight: 900;
}

.member-tag {
  background: #000;
}

.guest-tag {
  background: linear-gradient(
    90deg,#bd1d23,#ed7410
  );
}

.guest-title {
  color: #c43b1b;
}

/* 料金・パフォーマー */
.booking-section {
  margin-bottom: 22px;
}

.booking-section p {
  margin: 5px 0;
  font-size: 1rem;
  font-weight: bold;
}

.booking-section em {
  color: #ed7410;
  font-style: normal;
  margin-right: 12px;
}

.booking-section .entry-date {
  color: #c9232a;
  font-weight: 900;
}

/* 予約ボタン */
.booking-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;
  margin-top: 15px;
  text-decoration: none;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

.member-btn {
  background: #000;
}

.guest-btn {
  background: linear-gradient(
    90deg,#bd1d23,#ed7410
  );
}

/* 受付開始日時 */
.event-subtitle .entry-date {
  color: #000000;
  font-weight: 900;
}

/* スマホ */
@media screen and (max-width: 568px) {
  .booking-heading {
    gap: 8px;
  }

  .booking-heading strong {
    font-size: 1.2rem;
  }

  .member-tag,
  .guest-tag {
    min-width: 100px;
    padding: 4px 8px;
    font-size: 0.9rem;
  }

  .booking-btn {
    min-height: 50px;
    font-size: 1rem;
  }

  .event-title {
    min-width: 0;
  }
}

.studio-item + .studio-item {
  margin-top: 20px;
}