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

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

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

  .inner {
    width: 1100px;
  }

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

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

  .shoshinshaDetailHead__title {
    line-height: 1.3;
  }

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

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

  .shoshinshaDetailHead__img {
    flex: 1.2;
  }

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

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

  .shoshinshaDetailHead__img img {
    border-radius: 30px 0 0 30px;
    overflow: hidden;
  }

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

  .shoshinshaDetailHead__titleH2 span {
    display: block;
  }

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

    .shoshinshaDetailHead__textArea {
      padding-right: 0;
    }

    .shoshinshaDetailHead__content {
      display: block;
    }

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

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

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

    .shoshinshaDetailHead__img {
      margin: 0;
      width: 96vw;

      img {
        border-radius: 1rem 0 0 1rem;
      }
    }

    .shoshinshaDetailHead__textArea {
      padding: 0;
      padding-left: 0;
    }

    .shoshinshaDetailHead__title--ja {
      font-size: 8vw;
    }

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

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

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

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

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

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

/*==================================================
    ダンス初心者の不安BEST5
==================================================*/
#syoshinsha__content {
  .inner.inner1100 {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  .shoshinsha__best5Line {
    padding: 10rem 0 0 0;
  }

  .shoshinsha__best5Title {
    align-items: center;
    background: url(../img/syoshinsha/bg_title_wave.png) center center no-repeat;
    display: flex;
    font-size: 2.6rem;
    font-weight: 700;
    height: 9rem;
    justify-content: center;
    min-height: 90px;
    text-align: center;
  }

  .color_orange {
    display: inline-block;
    color: #f06414;
    font-size: 3.4rem;
    margin-left: 1rem;
  }

  .shoshinsha__best5Title > span {
    position: relative;
  }

  .shoshinsha__best5Title > span:before {
    background: #000;
    border-radius: 999px;
    content: '';
    height: 10px;
    left: -2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 10px;
  }

  .shoshinsha__best5Title > span:after {
    background: #000;
    border-radius: 999px;
    content: '';
    height: 10px;
    right: -2rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width: 10px;
  }

  .shoshinsha__best5List {
    margin-top: 6.7rem;
  }

  .shoshinsha__best5List {
    display: flex;
    margin-left: -12px;
    margin-right: -12px;
    justify-content: space-between;
  }

  .shoshinsha__best5List li {
    border-right: #efebe9 solid 1px;
    padding: 0 11px 10px 11px;
    width: calc(100% / 5);
  }

  .shoshinsha__best5List li:first-child {
    border-left: #efebe9 solid 1px;
  }

  .shoshinsha__best5List li:nth-child(even) dt {
    background: #efebe9;
  }

  .shoshinsha__best5Icon {
    background: #fdf0e7;
    border-radius: 999px;
    height: 16.5rem;
    margin: 0 auto;
    position: relative;
    width: 16.5rem;
  }

  .shoshinsha__best5Img {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
  }

  .shoshinsha__best5Img img {
    margin-top: 20px;
  }

  .shoshinsha__best5Best {
    background: #f06414;
    border-radius: 999px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    height: 3.7rem;
    line-height: 3.7rem;
    padding: 0 1.1rem;
    position: absolute;
  }

  .shoshinsha__best5Best .count {
    font-size: 2.6rem;
  }

  .inner_title {
    align-items: center;
    background: url(../img/syoshinsha/bg_title_wave_black.png) center bottom no-repeat;
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    justify-content: center;
    line-height: 2.7rem;
    margin-bottom: 2rem;
    margin-top: 1.3rem;
    min-height: 6.6rem;
    padding-bottom: 1.2rem;
    text-align: center;
  }

  .shoshinsha__best5Text p {
    font-weight: 400;
  }

  .shoshinsha__bottomArrow {
    margin-bottom: 2.4rem;
    margin-top: 2.4rem;
    text-align: center;
  }

  @media screen and (max-width: 767px) {
    .shoshinsha__best5Line {
      padding-top: 5rem;
    }

    .shoshinsha__best5List {
      margin-top: 3.5rem;
      padding-top: 0;
    }

    .shoshinsha__best5Title {
      font-size: 2rem;
    }

    .color_orange {
      font-size: 2.7rem;
    }

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

    .shoshinsha__best5List li {
      border-left: none;
      border-right: none;
      margin-bottom: 2rem;
      width: 100%;
    }

    .shoshinsha__best5List li:first-child {
      border-left: none;
    }

    .shoshinsha__best5Box {
      align-items: flex-start;
      display: flex;
      justify-content: center;
    }

    .shoshinsha__best5Icon {
      width: 122px;
      height: 122px;
    }

    .shoshinsha__best5Text {
      padding-left: 2rem;
      width: calc(100% - 122px);
    }

    .inner_title {
      background: url(../img/syoshinsha/bg_title_wave_black.png) left bottom repeat-x;
      font-size: 1.5rem;
      height: auto;
      justify-content: flex-start;
      line-height: 1.4;
      margin-bottom: 1rem;
      margin-top: 0;
      min-height: auto;
      text-align: left;
    }

    .shoshinsha__best5Img img {
      width: 60%;
    }

    .shoshinsha__best5Best {
      transform: scale(0.6);
      transform-origin: top left;
    }

    .shoshinsha__best5Text p {
      font-size: 1.25rem;
    }

    .shoshinsha__bottomArrow {
      width: 12rem;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/*==================================================
    ダンス初⼼者でも安⼼な理由
==================================================*/
#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;
    margin: 0 auto;
    width: 41.4rem;
  }

  .features__lead {
    align-items: center;
    background: url(../img/syoshinsha/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__contents .buttonMore .buttonMore__link {
    max-width: 42rem;
  }

  .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: 10.6667vw 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/syoshinsha/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;
    }
  }
}

/*==================================================
    知っておくと安心の基本ステップ
==================================================*/
#shoshinsha__basicStep {
  background: #f7f6f6;
  border-radius: 30px;
  padding: 5rem;

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

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

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

  .shoshinsha__stepTitle {
    color: #f06414;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
  }

  .shoshinsha__stepCont p {
    min-height: 7.68rem;
    text-align: center;
  }

  .step-mov {
    margin-top: 2rem;
    width: 100%;
    aspect-ratio: 16/9;
  }

  .step-mov iframe {
    width: 100%;
    height: 100%;
  }

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

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

    .shoshinsha__stepList {
      margin-left: 0;
      margin-right: 0;
      width: 260vw;
    }
  }
}

/*==================================================
    ダンス初⼼者におすすめの学び⽅
==================================================*/
#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;
  }

  .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;
    grid-column: 2;
    grid-row: 2;
  }

  @media screen and (max-width: 767px) {
    margin-top: 4vw;
    padding: 0 0 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/syoshinsha/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: 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;
  }
}

/*==================================================
    【共通】詳細リスト-パターン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;
    }
  }
}

/*==================================================
    【共通】タイトル装飾
==================================================*/
.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;
  }

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