@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap');

/*==================================================
    パンくず
==================================================*/
.breadcrumb {
  padding: 2.8rem 0;
}

/*==================================================
    見出し
==================================================*/
#societyDetailHead {
  padding-top: 2.2rem;
  padding-bottom: 11rem;

  .inner {
    width: 1100px;
  }

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

  .societyDetailHead__textArea {
    flex: 0.5;
    padding-right: 10rem;
  }

  .societyDetailHead__title {
    line-height: 1.3;
  }

  .societyDetailHead__title--ja {
    color: #f06414;
    display: block;
    font-size: 4.4rem;
    font-weight: 700;
  }

  .societyDetailHead__text {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.65;
    margin-top: 2.5rem;
  }

  .societyDetailHead__img {
    flex: 1.2;
  }

  .inner_wrap {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    width: 100%;
  }

  .societyDetailHead__img {
    position: absolute;
    right: 0;
    width: 720px;
  }

  .societyDetailHead__img img {
    border-radius: 3rem 0 0 3rem;
    overflow: hidden;
    @media screen and (min-width: 768px) {
      max-height: 40rem;
      object-fit: cover;
      width: 100%;
    }
  }

  .societyDetailHead__titleH2 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-top: 6rem;
  }

  .societyDetailHead__titleH2 span {
    display: block;
  }

  @media screen and (max-width: 1439px) {
    .societyDetailHead__title {
      margin-top: 3rem;
    }

    .societyDetailHead__textArea {
      padding-right: 0;
    }

    .societyDetailHead__content {
      display: block;
    }

    .societyDetailHead__img {
      margin-left: auto;
      margin-right: -4vw;
      position: static;
    }
  }

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

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

    .societyDetailHead__img {
      margin: 0px -4vw;
      width: auto;
    }

    .societyDetailHead__textArea {
      padding: 0 6vw;
      padding-left: 0;
    }

    .societyDetailHead__title--ja {
      font-size: 5.86vw;
    }

    .societyDetailHead__titleH2 {
      font-size: 4.2vw;
      margin-top: 3vw;
    }

    .societyDetailHead__text {
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 2.03;
      margin-top: 4.5vw;
    }

    & .societyDetailHead__text {
      font-size: 1.25rem;
      margin-top: 4vw;
    }
  }
}

/*==================================================
    ETCダンススクールの特徴
==================================================*/
#society__content {
  margin-top: 11.5rem;

  .inner.inner1100 {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  .icon_fukidashi {
    position: absolute;
    transform: translateX(-35%);
    top: -5rem;
    left: 0;
  }

  @media screen and (max-width: 991px) {
    .icon_fukidashi {
      width: 15vw;
      transform: translateX(-35%);
      top: -6rem;
    }

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

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

    .icon_fukidashi {
      width: 19vw;
      top: -5.33vw;
    }
  }
}

/*==================================================
    社会⼈がダンススクールに通うメリット
==================================================*/
#society__meritLine {
  background: #f7f6f6;
  border-radius: 3rem;
  margin-bottom: 2.4rem;
  padding: 5rem;

  .society__meritList {
    display: flex;
    margin-left: -1.1rem;
    margin-right: -1.1rem;
    margin-top: 3.5rem;
    justify-content: space-between;
  }

  .society__meritList li {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    width: calc(100% / 3);
  }

  .society__meritBox {
    background: #fff;
    padding: 3rem 1.8rem;
  }

  .society__meritTitle {
    align-items: center;
    color: #f06414;
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    min-height: 6.4rem;
    justify-content: center;
    text-align: center;
  }

  .society__meritCont p {
    font-size: 1.6rem;
    min-height: 13rem;
  }

  .merit-img {
    margin-bottom: 2rem;
  }

  @media screen and (max-width: 991px) {
    .society__meritCont p {
      min-height: 15rem;
    }
  }

  @media screen and (max-width: 767px) {
    padding: 9.0667vw 3.4667vw 14.4vw;
    padding-bottom: 2rem;
    border-radius: 2vw;

    .society__slideWrap {
      position: relative;
      overflow-x: scroll;
    }

    .society__meritList {
      display: block;
      margin-left: 0;
      margin-right: 0;
    }

    .society__meritBox {
      padding-top: 1.5rem;
    }

    .society__meritTitle {
      min-height: 5rem;
    }

    .society__meritList li {
      margin-bottom: 1rem;
      padding-left: 0;
      padding-right: 0;
      width: 100%;
    }

    .society__meritCont p {
      min-height: auto;
    }
  }
}

/*==================================================
    社会人におすすめの通い方
==================================================*/
#society__recommendationLine {
  background: #f7f6f6;
  border-radius: 3rem;
  margin-bottom: 2.4rem;
  padding: 5rem;

  .society__recommendationListWrap {
    margin-top: 4rem;
  }

  .society__recommendationList {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .society__recommendationList li {
    width: 50%;
    padding-left: 25px;
    padding-right: 25px;
  }

  .society__recommendationBox {
    background: #fff;
    overflow: hidden;
    padding: 1vw 2vw 2vw;
  }

  .society__recommendationBoxTitle {
    color: #f06414;
    font-size: 2.2rem;
    font-weight: bold;
    padding: 2.5rem 0 2rem 0;
    text-align: center;
  }

  .society__recommendationBoxText {
    padding: 0 1rem 2rem;
  }

  .society__recommendationBoxText p {
    font-size: 1.8rem;
  }

  .society__recommendationBoxImg {
    position: relative;
  }

  .society__recommendationBoxImg img {
    border-radius: 2rem;
  }

  .society__recommendationBoxImg .icon {
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 2;
  }

  @media screen and (max-width: 767px) {
    padding: 9.0667vw 3.4667vw 14.4vw;
    padding-bottom: 2rem;
    border-radius: 2vw;

    .society__recommendationList {
      display: block;
    }

    .society__recommendationList li {
      padding-left: 0;
      padding-right: 0;
      width: 100%;
      margin-bottom: 2rem;
    }

    .society__recommendationBoxTitle {
      font-size: 4.53vw;
    }

    .society__recommendationBoxText p {
      font-size: 3.73vw;
    }

    .society__recommendationBoxImg .icon {
      right: 1rem;
      bottom: auto;
      top: 0;
    }
  }
}

/*==================================================
    【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/society/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/society/icon_arrow_01_hover.png);
  }

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

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

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

  .buttonArea__link--beginner:hover::before {
    background-image: url(../img/society/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/society/icon_04.png);
  }

  .experience__button--tel::before {
    background-image: url(../img/society/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;
    }
  }
}

/*==================================================
    ダンス初⼼者でも安⼼な理由
==================================================*/
#features {
  background: #fff;
  padding: 0 0;
  padding-bottom: 2.4rem;

  .inner {
    background: #fdf0e7;
    border-radius: 2.7rem;
    max-width: 100%;
    padding: 0 5rem 7rem;
    position: relative;
    width: 110rem;
  }

  .features__title {
    align-items: center;
    background: #fff;
    border-radius: 0 0 2rem 2rem;
    display: flex;
    font-size: 2.6rem;
    font-weight: 600;
    height: 9rem;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    width: 41.4rem;
  }

  .features__lead {
    align-items: center;
    background: url(../img/society/bubble.png) no-repeat center / cover;
    display: flex;
    height: 8rem;
    justify-content: center;
    left: 28.7rem;
    position: absolute;
    top: -5rem;
    width: 14.8rem;
    z-index: 1;
  }

  .features__lead p {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    transform: rotate(-9deg) translate(0.3rem, -0.3rem);
  }

  .features__list {
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
    margin-top: 3rem;
  }

  .features__item {
    display: grid;
    gap: 0 5.8rem;
    grid-template-columns: 55rem 1fr;
    grid-template-rows: auto 1fr;
  }

  .features__heading {
    border-bottom: 0.1rem solid var(--color-orange);
    color: var(--color-orange);
    display: flex;
    font-size: 2.6rem;
    font-weight: 600;
    grid-column: 1;
    grid-row: 1;
    line-height: 1;
    padding-bottom: 1.2rem;
  }

  .features__heading .text {
    align-self: flex-end;
    margin-right: 0.4rem;
    transform: translateY(-0.6rem);
  }

  .features__heading .dot {
    background: var(--color-orange);
    border-radius: 50%;
    display: block;
    height: 1.3rem;
    margin-right: 1rem;
    transform: translateY(2.4rem);
    width: 1.3rem;
  }

  .features__heading .number {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 5rem;
    font-weight: 700;
  }

  .features__contents {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    grid-column: 1;
    grid-row: 2;
    margin-top: 3.2rem;
  }

  .features__contents p {
    font-size: 1.8rem;
    font-weight: 400;
  }

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

  .features__image {
    grid-column: 2;
    grid-row: 2;
  }

  .features__image img {
    border-radius: 1rem;
  }

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

    .inner {
      border-radius: 2.6667vw;
      padding: 0 3.2vw 11.2vw;
      width: 100%;
    }

    .features__title {
      border-radius: 0 0 2.6667vw 2.6667vw;
      font-size: 5.3333vw;
      height: 16vw;
      width: 75.7333vw;
    }

    .features__lead {
      background: url(../img/society/bubble_sp.png) no-repeat center / cover;
      height: 15.0667vw;
      left: 3.5vw;
      top: -11.5vw;
      width: 27.7333vw;
    }

    .features__lead p {
      font-size: 4.1333vw;
      transform: rotate(-7.9deg) translate(0.9333vw, -0.2667vw);
    }

    .features__list {
      gap: 9.8667vw;
      margin-top: 8.2667vw;
    }

    .features__item {
      gap: 5.6vw;
      grid-template-columns: 1fr;
    }

    .features__heading {
      border-bottom-width: 0.4vw;
      font-size: 4.8vw;
      padding-bottom: 4vw;
    }

    .features__heading .text {
      align-self: flex-end;
      margin-right: 0.8vw;
      transform: translateY(-0.8vw);
    }

    .features__heading .dot {
      height: 2.1333vw;
      margin-right: 1.3333vw;
      transform: translateY(5.1vw);
      width: 2.1333vw;
    }

    .features__heading .number {
      font-size: 9.3333vw;
    }

    .features__contents {
      gap: 3.2vw;
      grid-row: 3;
      margin-top: 0;
    }

    .features__contents p {
      font-size: 3.7333vw;
    }

    .features__subheading {
      font-size: 4.5333vw;
    }

    .features__image {
      grid-column: 1;
    }

    .features__image img {
      border-radius: 1.3333vw;
    }
  }
}

/*==================================================
    ダンス初⼼者におすすめの学び⽅
==================================================*/
#beginner-learning-methods {
  margin-top: 2.2rem;
  padding: 0 0 7.8rem;

  .inner {
    background: #fdf0e7;
    border-radius: 2.7rem;
    max-width: 100%;
    padding: 5rem 5rem 7rem;
    width: 110rem;
  }

  .rec__nav .buttonMore__link {
    grid-template-columns: 1rem 1fr 2.2rem;
    max-width: 100%;
    padding: 1.4rem 2.2rem 1.5rem;
    margin: 0;
  }

  .rec__nav .buttonMore__linkText {
    font-size: 1.7rem;
  }

  .cardSubtitle {
    margin-top: 4.8rem;
    color: var(--color-orange);
    font-size: 2.2rem;
    font-weight: 700;
  }

  .rec__contents {
    display: grid;
    gap: 7.2rem 3.5rem;
    grid-template-columns: 1fr 39rem;
    grid-template-rows: 30rem 1fr;
    margin-top: 4.8rem;
    &:where(:not(:has(.rec__image))) {
      grid-template-rows: 1fr;
      row-gap: 0;
    }
  }

  .rec__text {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
  }

  .rec__text p {
    font-size: 1.8rem;
    font-weight: 400;
  }

  .rec__image {
    grid-column: 2;
    grid-row: 1;
  }

  .rec__image img {
    border-radius: 1rem;
  }

  .rec__nav {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: fit-content;
    align-self: start;
  }

  @media screen and (max-width: 767px) {
    margin-top: 4vw;
    padding: 0 2.6667vw 13.3333vw;

    .inner {
      border-radius: 2.6667vw;
      padding: 9.0667vw 3.4667vw 14.4vw;
    }

    .rec__nav .buttonMore__link {
      grid-template-columns: 1rem 1fr 2.2rem;
      max-width: 100%;
      padding: 1.4rem 2.2rem 1.5rem;
    }

    .cardSubtitle {
      margin-top: 6.4vw;
      font-size: 4.53vw;
    }

    .rec__contents {
      display: flex;
      flex-direction: column;
      gap: 5.6vw;
      margin: 4.2667vw auto 0;
      max-width: 83.3333vw;
    }

    .rec__text {
      order: 2;
      gap: 6.13vw;
    }

    .rec__text p {
      font-size: 3.7333vw;
    }

    .rec__image {
      order: 1;
    }

    .rec__image img {
      border-radius: 1.3333vw;
    }

    .rec__nav {
      gap: 3.8667vw;
      grid-template-columns: 1fr;
      margin: 5.6vw auto 0;
      max-width: fit-content;
      order: 3;
    }

    .rec__nav .buttonMore__linkText {
      font-size: 3.73vw;
    }

    .rec__nav .buttonMore__link {
      gap: 1.6vw;
      grid-template-columns: 2.1333vw 1fr 4.2667vw;
      margin: 0;
      padding: 3.2vw 4.6667vw 3.3333vw;
    }
  }
}

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

  .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/society/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: 1.5fr 1fr;
  }

  &.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: 5vw 0 7vw;
    gap: 6vw;

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

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

    &.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/society/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/society/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/society/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/society/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: 0;
  }

  .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;
  }

  &.mt-15 {
    margin-top: 1.5rem;
  }

  .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;
    }

    &.mt-15 {
      margin-top: 1.67vw;
    }

    .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%;
}

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

.gridBox__navArrow {
  display: flex;
}

.gridBox__navArrow img {
  max-width: 1.2rem;
}

/*==================================================
    ヒップホップダンス練習動画
==================================================*/
.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/society/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/society/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;
  }
}