/*==================================================
    ページ共通
==================================================*/
.bg-gray {
  &:where(.pageGenreDetail > &) {
    margin-top: 6.8rem;
    padding-top: 6.8rem;
  }
}

.pageGenreDetail {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .bg-gray {
    &:where(.pageGenreDetail > &) {
      margin-top: 10vw;
      padding-top: 10vw;
    }
  }
}

/*==================================================
    パンくず
==================================================*/
.breadcrumb {
  .inner {
    width: 1100px;
  }
}

/*==================================================
    見出し
==================================================*/
#genreDetailHead {
  padding-top: 2.2rem;

  .inner {
    width: 1100px;
  }

  .genreDetailHead__content {
    display: flex;
    gap: 6.3rem;
  }

  .genreDetailHead__textArea {
    flex: 1;
  }

  .genreDetailHead__title {
    line-height: 1.3;
  }

  .genreDetailHead__title--en {
    font-family: 'Outfit', sans-serif;
    font-size: 4.4rem;
    font-weight: 800;
  }

  .genreDetailHead__title--ja {
    display: block;
    font-size: 2rem;
    font-weight: 700;
  }

  .genreDetailHead__text {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.65;
    margin-top: 4rem;
  }

  .genreDetailHead__img {
    flex: 1.2;
  }

  @media screen and (max-width: 767px) {
    padding-top: 0;

    .genreDetailHead__content {
      flex-direction: column-reverse;
      gap: 6vw;
    }

    .genreDetailHead__textArea {
      padding: 0 6vw;
    }

    .genreDetailHead__title--en {
      font-size: 8vw;
    }

    .genreDetailHead__title--ja {
      font-size: 3.2vw;
    }

    .genreDetailHead__text {
      font-size: 4.26vw;
      font-weight: 500;
      line-height: 2.03;
      margin-top: 9vw;
    }

    .genreDetailHead__img {
      margin: 0px -4vw;
    }
  }
}

/*==================================================
    目次
==================================================*/
#index {
  padding-bottom: 6.8rem;

  .inner {
    width: 1100px;
  }

  .indexWrap {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 15rem auto;
    padding: 3.5rem 5rem;
    position: relative;
  }

  .indexClose {
    position: absolute;
    top: 2rem;
    right: 2rem;
    transition: 0.3s;
    width: 3.1rem;
    height: 3.1rem;
    cursor: pointer;
  }

  .indexClose::after {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_open_black.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
  }

  .indexWrap.open .indexClose::after {
    background-image: url(../img/genre/detail/common/icon_close_black.png);
  }

  .indexTitleArea {
    border-right: 1px solid #000;
    display: flex;
    align-items: flex-end;
  }

  .indexTitle {
    line-height: 1.4;
  }

  .indexTitle--ja {
    font-weight: 600;
  }

  .indexTitle--en {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 800;
  }

  .indexContent {
    padding-left: 7rem;
    max-height: 60rem;
  }

  .indexContent li:nth-child(n + 2) {
    margin-top: 1rem;
  }

  .indexContent a {
    display: inline-block;
    font-weight: 500;
    text-decoration: underline;
  }

  @media screen and (max-width: 767px) {
    padding-bottom: 10vw;

    .indexWrap {
      grid-template-columns: 100%;
      gap: 3.5vw;
      border-radius: 1vw;
      padding: 7vw 6vw 6vw;
    }

    .indexClose {
      top: 2.5vw;
      right: 3vw;
      width: 4.13vw;
      height: 4.13vw;
    }

    .indexTitleArea {
      order: 2;
      border-right: none;
    }

    .indexTitle {
      line-height: 1;
    }

    .indexTitle--ja {
      font-size: 2.53vw;
    }

    .indexTitle--en {
      font-size: 5.06vw;
    }

    .indexContent {
      order: 1;
      padding-left: 5vw;
      max-height: 111.73vw;
      border-left: 1px solid #000;
    }

    .indexContent li:nth-child(n + 2) {
      margin-top: 0;
    }

    .indexContent a {
      font-size: 3.59vw;
    }
  }
}

/*==================================================
    【CTA】体験レッスンへの参加
==================================================*/
.experience {
  padding: 5rem 0 4rem;

  .experience__lead {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.83;
    text-align: center;
  }

  .buttonArea {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2.6rem;
  }

  .buttonArea__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }

  .buttonArea__left a {
    background: #fff;
    border: 1px solid #597086;
    border-radius: 2rem;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0 auto;
    max-width: 362px;
    width: 100%;
    padding: 2rem 0 1.8rem 6.5rem;
    position: relative;
    transition: 0.3s;
  }

  .buttonArea__left a:hover {
    background: #000;
    color: #fff;
    opacity: 1;
  }

  .buttonArea__left a::before {
    position: absolute;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    width: 3rem;
    height: 3rem;
  }

  .buttonArea__left a::after {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_arrow_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 2rem;
    height: 1.5rem;
  }

  .buttonArea__left a:hover::after {
    background-image: url(../img/genre/detail/common/icon_arrow_01_hover.png);
  }

  .buttonArea__link--flow::before {
    background-image: url(../img/genre/detail/common/icon_02.png);
  }

  .buttonArea__link--flow:hover::before {
    background-image: url(../img/genre/detail/common/icon_02_hover.png);
  }

  .buttonArea__link--beginner::before {
    background-image: url(../img/genre/detail/common/icon_03.png);
  }

  .buttonArea__link--beginner:hover::before {
    background-image: url(../img/genre/detail/common/icon_03_hover.png);
  }

  .buttonArea__right {
    background: #ffe249;
    text-align: center;
    padding: 3.5rem 0 4.5rem;
  }

  .experience__lead span {
    font-size: 2.2rem;
    position: relative;
  }

  .experience__lead span::before,
  .experience__lead span::after {
    position: absolute;
    content: '';
    background: #000;
    top: 50%;
    margin-top: -0.5rem;
    width: 4rem;
    height: 0.1rem;
  }

  .experience__lead span::before {
    transform: translateY(-50%) rotate(55deg);
    left: -4rem;
  }

  .experience__lead span::after {
    transform: translateY(-50%) rotate(-55deg);
    right: -4rem;
  }

  .experience__buttonArea {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
  }

  .experience__button {
    background: #268360;
    border-radius: 1rem;
    border-top: 1px solid #268360;
    box-shadow: inset 0px 1px 0px #fff;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    flex: 1;
    max-width: 17.5rem;
    border-bottom: 1px solid #fff;
    line-height: 1.4;
    padding: 4rem 0 1rem;
    position: relative;
    transition: 0.3s;
  }

  .experience__button:hover {
    opacity: 1;
    background: #3e3e3e;
    border-top: 1px solid #3e3e3e;
  }

  .experience__button::before {
    position: absolute;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 2.5rem;
  }

  .experience__button--web::before {
    background-image: url(../img/genre/detail/common/icon_04.png);
  }

  .experience__button--tel::before {
    background-image: url(../img/genre/detail/common/icon_05.png);
  }

  @media screen and (max-width: 767px) {
    padding: 11vw 0 5vw;

    .experience__lead {
      font-size: 4vw;
    }

    .experience__lead span {
      font-size: 4vw;
    }

    .buttonArea {
      grid-template-columns: 100%;
      gap: 9vw;
      margin-top: 3vw;
    }

    .buttonArea__left {
      gap: 3vw;
    }

    .buttonArea__left a {
      max-width: 73.6vw;
      font-size: 3.73vw;
      border-radius: 2vw;
      padding: 4vw 0 4vw 13vw;
    }

    .buttonArea__left a::before {
      width: 5vw;
      height: 5vw;
    }

    .buttonArea__left a::after {
      width: 3.86vw;
      height: 2.93vw;
    }

    .buttonArea__right {
      margin: 0 -4vw;
      padding: 8vw 0 9vw;
      border-bottom: 1.3vw solid #9b9897;
    }

    .experience__lead span::before,
    .experience__lead span::after {
      width: 7vw;
      height: 0.1vw;
    }

    .experience__lead span::before {
      left: -8vw;
    }

    .experience__lead span::after {
      right: -7vw;
    }

    .experience__buttonArea {
      margin-top: 3vw;
    }

    .experience__button {
      font-size: 3.33vw;
      max-width: 36.8vw;
      border-radius: 1vw;
      padding: 8vw 0 3vw;
    }

    .experience__button::before {
      width: 6vw;
      height: 5vw;
    }
  }
}

/*==================================================
    【共通】セクション
==================================================*/
.commonWrap {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 3rem;

  .commonWrap__titleArea {
    background: var(--color-orange);
    padding: 1.9rem 0;
  }

  .commonWrap__title {
    color: #fff;
    font-size: 2.6rem;
    font-weight: 700;
  }

  .commonWrap__contentArea {
    background: #fff;
    overflow: hidden;
    padding-bottom: 4rem;
  }

  .common__title {
    font-size: 2rem;
    font-weight: 700;
    padding-left: 2rem;
    position: relative;
  }

  .common__title::before {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 2.3rem;
    height: 2.3rem;
    top: 0.2rem;
    left: -0.5rem;
  }

  @media screen and (max-width: 767px) {
    .commonWrap__titleArea {
      padding: 4.5vw 0 3.5vw;
    }

    .commonWrap__title {
      font-size: 5.33vw;
      line-height: 1.4;
    }

    .common__title {
      font-size: 4.26vw;
      line-height: 1.4;
    }

    .common__title::before {
      width: 4vw;
      height: 4vw;
    }
  }
}

/*==================================================
    【共通】画像・テキスト横並び
==================================================*/
.gridBox {
  display: grid;
  gap: 5.4rem;
  grid-template-columns: 1.2fr 1fr;
  padding: 6rem 0 4.4rem 5rem;

  /* [共通]画像・テキスト横並び - 1カラムにする場合 */
  &.column-1 {
    grid-template-columns: 1fr;
    padding: 6rem 5rem 4.4rem;
  }

  /* [共通]画像・テキスト横並び - 画像・テキストの左右入れ替え */
  &.is-rowreserve {
    grid-template-columns: 1fr 1.5fr;
  }

  &.is-rowreserve .gridBox__textArea {
    order: 2;
  }

  &.is-rowreserve .gridBox__img {
    order: 1;
  }

  /* [共通]画像・テキスト横並び - テキストの位置を上下センターにする */
  &.is-center {
    align-items: center;
  }

  .gridBox__text {
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 2rem;
  }

  .gridBox__text .is-small {
    font-size: 1.6rem;
  }

  .gridBox__text.mt-0 {
    margin-top: 0;
  }

  .gridBox__img img {
    border: 1px solid #ececec;
    border-radius: 1rem;
  }

  @media screen and (max-width: 767px) {
    grid-template-columns: 100%;
    padding: 7vw 0 7vw;
    gap: 6vw;

    &:last-of-type {
      padding-bottom: 0;
    }

    &.column-1 {
      padding: 7vw 0 4vw;
    }

    &.is-rowreserve {
      grid-template-columns: 100%;
    }

    .gridBox__img {
      order: 1;
    }

    .gridBox__textArea {
      order: 2;
    }

    .gridBox__text {
      font-size: 3.73vw;
      margin: 3vw 5vw 0;
    }
  }
}

.commonBox {
  padding-top: 1rem;

  .gridBox:nth-child(n + 2) {
    border-top: 1px solid #c9c9c9;
  }

  .inner {
    width: 1100px;
  }
}

/*==================================================
    【共通】矢印付き
==================================================*/
.arrowBox {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 5rem;
  margin-top: 2rem;

  .arrowBox__img {
    position: relative;
  }

  .arrowBox__img:nth-child(n + 2)::before {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_arrow_02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    left: -3.3rem;
    width: 1.8rem;
    height: 1.7rem;
  }

  .arrowBox__text {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
    gap: 4vw;
    margin: 4vw 0 6vw;

    .arrowBox__img {
      max-width: 28vw;
    }

    .arrowBox__img:nth-child(n + 2)::before {
      width: 1.73vw;
      height: 1.6vw;
      left: -2.7vw;
    }

    .arrowBox__text {
      font-size: 2.66vw;
    }
  }
}

/*==================================================
    【共通】アコーディオン
==================================================*/
.moreButton {
  background: #60605f;

  .moreButton__text {
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    padding: 1.7rem 0;
    position: relative;
  }

  .moreButton__text::after {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_open.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    width: 3rem;
    height: 3rem;
    right: 2rem;
    transform: translateY(-50%);
    transition: 0.3s;
  }

  @media screen and (max-width: 767px) {
    .moreButton__text {
      font-size: 3.73vw;
      padding: 2vw 0;
    }

    .moreButton__text::after {
      width: 4.5vw;
      height: 4.5vw;
      right: 3.5vw;
    }
  }
}

.js-accordionWrap.open .moreButton__text::after {
  background-image: url(../img/genre/detail/common/icon_close.png);
}

/*==================================================
    【共通】詳細リスト
==================================================*/
.listBox {
  margin-top: 3rem;

  .listBox__li {
    background: #efebe9;
    padding: 3rem;
    display: grid;
    grid-template-columns: 21.5rem auto;
    gap: 2rem;
  }

  .listBox__li:nth-child(n + 2) {
    margin-top: 1rem;
  }

  .listBox__title {
    font-size: 2rem;
    font-weight: 700;
  }

  .listBox__text {
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 1rem;
  }

  @media screen and (max-width: 767px) {
    .listBox__li {
      grid-template-columns: 28.59vw auto;
      padding: 6vw 4vw;
      gap: 4vw;
    }

    .listBox__li:nth-child(n + 2) {
      margin-top: 1vw;
    }

    .listBox__title {
      font-size: 4vw;
      line-height: 1.23;
    }

    .listBox__text {
      font-size: 3.73vw;
      margin-top: 1vw;
      grid-column: 1 / 3;
    }
  }
}

/*==================================================
    【共通】詳細リスト-パターン2
==================================================*/
.detailBox {
  background: #efebe9;
  padding: 4rem;

  .detailBox__li:nth-child(n + 2) {
    margin-top: 2rem;
  }

  .detailBox__title {
    font-size: 2rem;
    font-weight: 700;
  }

  .detailBox__text {
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 0.8rem;
  }

  @media screen and (max-width: 767px) {
    padding: 5vw 5vw 7vw;

    .detailBox__title {
      font-size: 4vw;
    }

    .detailBox__text {
      font-size: 3.73vw;
      margin-top: 0;
    }
  }
}

/*==================================================
    【共通】画像・テキストを大きく横並びで配置
==================================================*/
.overlapBox {
  position: relative;

  .overlapBox__textArea {
    position: absolute;
    bottom: -4rem;
    right: 0;
    background: #fcfdf3;
    box-shadow: 0 0 18px rgba(151, 95, 57, 0.27);
    border-radius: 2rem 0 0 0;
    padding: 4rem 15rem 4rem 7rem;
    max-width: 71.5rem;
  }

  .overlapBox__title {
    font-size: 3rem;
    font-weight: 700;
    position: relative;
    padding-left: 1rem;
  }

  .overlapBox__title span {
    position: relative;
  }

  .overlapBox__title span::before,
  .overlapBox__title span::after {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_overlap.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0.6rem;
    width: 2rem;
    height: 3rem;
  }

  .overlapBox__title span::before {
    left: -2.5rem;
  }

  .overlapBox__title span::after {
    transform: scale(-1, 1);
    right: -2rem;
  }

  .overlapBox__text {
    margin-top: 1.5rem;
  }

  @media screen and (max-width: 767px) {
    margin-top: 20vw;

    .overlapBox__textArea {
      padding: 7vw 9vw;
      max-width: 96vw;
      position: relative;
      top: -10vw;
      right: -4vw;
      border-radius: 4vw 0 0 0;
      margin-bottom: -21vw;
    }

    .overlapBox__title {
      font-size: 5.33vw;
      padding: 0;
      text-align: center;
      margin-bottom: 8vw;
      line-height: 1.4;
    }

    .overlapBox__title span::before,
    .overlapBox__title span::after {
      width: 7.33vw;
      height: 13.33vw;
      top: 1vw;
    }

    .overlapBox__title span::before {
      left: -12vw;
    }

    .overlapBox__title span::after {
      right: -13vw;
    }

    .overlapBox__text {
      font-size: 3.73vw;
      margin-top: 2.5vw;
    }
  }
}

/*==================================================
    【共通】タイトル装飾
==================================================*/
.title-h2 {
  font-size: 2.6rem;
  font-weight: 600;
  padding-left: 2.6rem;
  position: relative;
  line-height: 1;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid #000;
}

.title-h2::before {
  content: '';
  background-color: var(--color-orange);
  width: 1.3rem;
  height: 1.3rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  .title-h2 {
    font-size: 4.8vw;
    padding-bottom: 4.2667vw;
    padding-left: 3.2vw;
    margin-top: 4vw;
  }

  .title-h2::before {
    width: 2.1333vw;
    height: 2.1333vw;
    top: 1.2vw;
  }
}

/*==================================================
    【共通】アコーディオン
==================================================*/
.js-toggleButton {
  transition: 0.3s;
}

.js-accordionBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

/*==================================================
    【共通】料金表
==================================================*/
.priceBox {
  border-bottom: 1px solid #d0cccc;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 0 1rem;

  &:last-of-type {
    border-bottom: none;
  }

  &.column-1 {
    flex-direction: column;
  }

  .priceBox__title {
    font-size: 2.6rem;
  }

  .priceBox__text {
    font-size: 2.2rem;
  }

  .priceBox__text--unit {
    font-size: 2rem;
  }

  .priceDetailBox {
    border-bottom: 1px solid #d0cccc;
    display: flex;
    justify-content: space-between;
    padding: 2.5rem 0 2rem;
  }

  .priceDetailBox__title,
  .priceDetailBox__text {
    font-size: 1.8rem;
  }

  .priceDetailBox__text--unit {
    font-size: 1.5rem;
  }

  @media screen and (max-width: 767px) {
    padding-right: 6vw;

    &.column-1 {
      padding-top: 8vw;
    }

    .priceBox__title {
      font-size: 5.86vw;
    }

    .priceBox__text {
      font-size: 5.86vw;
    }

    .priceBox__text--unit {
      font-size: 5.33vw;
    }

    .priceDetailBox {
      padding: 5vw 0 4vw;
    }

    .priceDetailBox__title,
    .priceDetailBox__text {
      font-size: 4vw;
    }

    .priceDetailBox__text--unit {
      font-size: 3.2vw;
    }
  }
}

/*==================================================
    【共通】SP時に文章と画像が逆になるセクション
==================================================*/
@media screen and (max-width: 767px) {
  .commonBox_4_2 .gridBox__textArea {
    order: 1;
  }

  .commonBox_4_2 .gridBox__img {
    order: 2;
  }

  .commonBox_5_1.is-rowreserve .gridBox__textArea {
    order: 1;
  }

  .commonBox_5_1.is-rowreserve .gridBox__img {
    order: 2;
  }

  .commonBox_6_1.is-rowreserve .gridBox__textArea {
    order: 1;
  }

  .commonBox_6_1.is-rowreserve .gridBox__img {
    order: 2;
  }
}

/*==================================================
    【共通】矢印付きリンク
==================================================*/
.gridBox__nav {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(5, 1fr);
}

.gridBox__navLink {
  align-items: center;
  background: #fff;
  border: 0.1rem solid #000;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  padding: 1.6rem 1.6rem 1.6rem 2.6rem;
  width: 100%;
  position: relative;
  transition: 0.3s;
}

.gridBox__navLink:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

.gridBox__navLink::after {
  background-image: url(../img/genre/detail/common/icon_nav_arrow_right.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 1rem;
  width: 1.2rem;
}

.gridBox__navLink:hover::after {
  background-image: url(../img/genre/detail/common/icon_nav_arrow_right_hover.png);
}

.gridBox__navText {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}

/*==================================================
    ヒップホップダンス練習動画
==================================================*/
.commonWrap__contentArea:has(.gridBox__slide) {
  padding-bottom: 7.4rem;
}

.commonWrap__contentArea:has(.gridBox__slide) .gridBox__text {
  margin-top: 4rem;
  font-weight: 400;
}

.commonWrap__contentArea:has(.gridBox__slide) .common__title {
  margin-top: 5rem;
}

.gridBox__slideWrap {
  margin-inline: auto;
  max-width: 1100px;
  padding-inline: 8.6rem;
  position: relative;
  width: 100%;
}

.gridBox__slide {
  margin-top: 2rem;
  overflow-x: hidden;
}

.gridBox__slide iframe {
  animation: pulse-bg 1.5s infinite ease-in-out;
  aspect-ratio: 16 / 9;
  background: red;
  background-color: #252525;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.gridBox__swiperTextArea {
  margin-top: 1.2rem;
}

.gridBox__swiperTitle {
  color: var(--color-orange);
  font-size: 1.6rem;
  font-weight: 700;
}

.gridBox__swiperLead {
  font-size: 1.6rem;
  font-weight: 700;
}

.gridBox__slide02 .gridBox__swiperLead {
  min-height: 5.2rem;
}

.gridBox__swiperText {
  font-size: 1.6rem;
  font-weight: 400;
}

.gridBox__swiperText span {
  font-size: 1.4rem;
  display: block;
  margin-top: 2rem;
}

.gridBox__slideWrap .swiper-button-prev,
.gridBox__slideWrap .swiper-button-next {
  height: 5.3rem;
  top: 6rem;
  width: 5.3rem;
}

.gridBox__slideWrap .swiper-button-prev {
  left: 0;
}

.gridBox__slideWrap .swiper-button-next {
  right: 0;
}

.gridBox__slideWrap .swiper-button-prev:after {
  background-image: url(../img/genre/detail/common/icon_arrow_slide-left.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 5.3rem;
  width: 5.3rem;
}

.gridBox__slideWrap .swiper-button-next:after {
  background-image: url(../img/genre/detail/common/icon_arrow_slide-right.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 5.3rem;
  width: 5.3rem;
}

.gridBox__slide01-scrollbar,
.gridBox__slide02-scrollbar {
  display: none;
}

.swiper-scrollbar-drag {
  background: var(--color-orange);
}

@media screen and (max-width: 767px) {
  .commonWrap__contentArea:has(.gridBox__slide) .gridBox__text {
    margin-top: 7vw;
    font-size: 3.73vw;
  }

  .commonWrap__contentArea:has(.gridBox__slide) .common__title {
    margin-top: 7vw;
  }

  .gridBox__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .gridBox__slideWrap {
    padding-bottom: 4vw;
    padding-inline: 0;
    width: 100%;
    margin: 0 -4vw 0 10vw;
  }

  .gridBox__slide01-prev,
  .gridBox__slide01-next,
  .gridBox__slide02-prev,
  .gridBox__slide02-next {
    display: none;
  }

  .gridBox__slide01-scrollbar,
  .gridBox__slide02-scrollbar {
    display: block;
  }

  .gridBox__slide02 .gridBox__swiperLead {
    min-height: unset;
  }

  .gridBox__swiperTitle,
  .gridBox__swiperLead,
  .gridBox__swiperText {
    font-size: 3.46vw;
  }

  .gridBox__swiperText span {
    font-size: 3.06vw;
    margin-top: 2vw;
  }
}

/*==================================================
    インストラクター
==================================================*/
.commonWrap__contentArea.bg-black {
  background: #3e3e3e;
}

@media screen and (max-width: 767px) {
  .gridBox.column-1:has(.gridBox__swiper) {
    padding: 1vw 0px;
    margin: 0 -3vw;
  }

  .gridBox.column-1:has(.gridBox__swiper) .buttonMore__link.is-right {
    margin-top: 0;
  }
}

/*==================================================
    店舗紹介
==================================================*/
.storeSwiper {
  max-width: 100%;
  overflow-x: hidden;
  padding-bottom: 8rem;
  width: 100%;
}

.storeSwiper__title {
  border-bottom: 1px solid #000;
  font-size: 2rem;
  font-weight: 700;
  padding-block: 1.5rem;
  text-align: center;
}

.storeSwiper__textarea {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 2rem;
}

.storeSwiper__detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.storeSwiper__tel {
  align-items: center;
  display: flex;
  font-size: 2.3rem;
  font-weight: 700;
  gap: 0.4rem;
}

.storeSwiper__access {
  align-items: flex-start;
  border: 1px solid #000;
  border-radius: 0.5rem;
  display: flex;
  font-size: 1.33rem;
  gap: 0.2rem;
  height: min-content;
  justify-content: center;
  padding: 0.4rem 0.4rem 0.2rem;
  transition: 0.3s;
  margin-right: 0.1vw;
}

.storeSwiper__access:hover {
  background: #000;
  color: #fff;
}

.storeSwiper__access::before {
  background-image: url(../img/genre/detail/common/icon_map.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 1.7rem;
  width: 1.2rem;
}

.storeSwiper__access:hover::before {
  background-image: url(../img/genre/detail/common/icon_map_hover.svg);
}

.storeSwiper__genre {
  color: var(--color-orange);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 1rem;
}

.storeSwiper__genreText {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1rem;
}

.storeSwiper .store-scrollbar {
  background: linear-gradient(to bottom, #c8c7c7, #e3e1e2);
  border: 0.1rem solid #c9c8c8;
  border-radius: 1rem;
  cursor: pointer;
  height: 1rem;
}

.store-scrollbar .swiper-scrollbar-drag {
  background: #e43105;
}

.swiper-slide {
  &:where(.storeSwiper &) {
    display: flex;
    flex-direction: column;
  }
}

.buttonMore {
  &:where(.storeSwiper &) {
    margin-top: auto;
  }
}

@media screen and (max-width: 767px) {
  .storeSwiper__tel img {
    width: auto;
  }

  .storeSwiper {
    padding-bottom: 10vw;
  }

  .commonWrap {
    position: relative;
    padding: 0;
  }

  .commonWrap:has(.storeSwiper)::after {
    position: absolute;
    content: '';
    background-image: url(../img/genre/detail/common/icon_slide_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 25vw;
    height: 8vw;
    z-index: 1;
    right: -1vw;
    top: 45vw;
  }
}

/*==================================================
    ダンスジャンル
==================================================*/
.inner:has(.buttonGenreWrap) {
  padding-bottom: 7rem;
}

.buttonMore__link.genreButton {
  max-width: 29.6rem;
}

/*====================================================
  インストラクター
====================================================*/
.commonBox {
  &:has(.swiper-slide.no-instructor) {
    display: none;
  }
}