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

/*====================================================
COMMON
====================================================*/
body {
  line-height: 1.9;
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
}

/*====================================================
HEADER
====================================================*/
#header {
  .header__inner {
    transition: transform 0.7s ease-in-out;
    &.hidden {
      transform: translateY(-100%);
    }
  }
}

/*====================================================
FOOTER
====================================================*/
#footer {
  .footer__button {
    padding: 0.5em !important;
    border-radius: 0.6em !important;
    font-weight: 400 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
  }
}

/*====================================================
STUDIO INDEX NAVIGATION
====================================================*/
.header__studio_index_nav {
  width: 100%;
  background-color: #efebe9;
  position: fixed;
  top: -1px;
  left: 0;
  z-index: 99;
  transform: translateY(-100%);
  transition: transform 0.7s ease-in-out;
  box-shadow: -0.1em 0.1em 0.7em 0px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  font-size: 16px;

  .header__studio_index_nav.show {
    transform: translateY(0);
  }
  .header__studio_index_nav.hidden {
    transform: translateY(0%);
  }
  .header__studio_index_nav_title {
    font-size: 1.625em;
    padding: 0.74em 1.3em;
    column-gap: 0.2em;
  }
  .header__studio_index_nav_title_text_main {
    color: var(--color-orange);
  }
  .header__studio_index_nav_list {
    font-size: 1.125em;
    margin-left: auto;
    align-items: center;
    margin-right: 1.8em;
    column-gap: 3.3em;
    justify-content: center;
  }
  .header__studio_index_nav_list_item {
    position: relative;
    &:nth-child(n + 2) {
      &::before {
        content: '';
        display: block;
        width: 1px;
        height: 60%;
        background-color: #000;
        position: absolute;
        top: 50%;
        right: calc(100% + 1.65em);
        transform: translate(50%, -56%);
        pointer-events: none;
      }
    }
  }
  .header__studio_index_button_list {
    font-size: 1.2em;
    font-family: 'Outfit', sans-serif;
    height: auto;
    justify-content: center;
  }
  .header__studio_index_button_list_item_link {
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    width: 7.5em;
    row-gap: 0.16em;
    padding-top: 0.2em;

    &:where(.header__studio_index_button_list_item:nth-child(1) &) {
      background-color: #fff;
    }
    &:where(.header__studio_index_button_list_item:nth-child(2) &) {
      background-color: #3e3e3e;
    }
  }
  .header__studio_index_button_list_item_link_img {
    width: 1.6em;
  }
  .header__studio_index_button_list_item_link_text {
    &:where(.header__studio_index_button_list_item:nth-child(1) &) {
      color: var(--color-orange);
    }
    &:where(.header__studio_index_button_list_item:nth-child(2) &) {
      color: #fff;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1250px) {
    font-size: 1.28vw;
  }

  @media screen and (max-width: 767px) {
    font-size: 4.26666667vw;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    row-gap: 0.2em;
    padding-bottom: 0.4em;

    .header__studio_index_nav_title {
      font-size: 0.8125em;
      flex-direction: column;
      padding: 0.2em 0.5em 0.2em 1.2em;
      line-height: 1.4;
    }
    .header__studio_index_nav_title_text_main {
      font-size: 1.31em;
    }
    .koshigaya_title {
      font-size: 1em;
    }
    .header__studio_index_nav_list {
      font-size: 0.75em;
      margin: 0;
      grid-row: 2/3;
      grid-column: 1/3;
    }
    .header__studio_index_nav_list_item {
      &:nth-child(n + 2) {
        &::before {
          transform: translate(50%, -50%);
        }
      }
    }
    .header__studio_index_nav_list_item_link {
      padding-block: 0.6em;
      display: block;
    }
    .header__studio_index_button_list {
      font-size: 0.6875em;
    }
    .header__studio_index_button_list_item_link {
      padding-block: 0.5em 0.4em;
      width: auto;
      &:where(.header__studio_index_button_list_item:nth-child(1) &) {
        padding-inline: 1em;
      }
      &:where(.header__studio_index_button_list_item:nth-child(2) &) {
        padding-inline: 1.3em;
      }
    }
    .header__studio_index_button_list_item_link_img {
      width: 1.3em;
    }
  }
}

/*====================================================
COMMON
====================================================*/
main {
  overflow: hidden;
}
.inner {
  position: relative;
}

/*====================================================
====================================================*/
.rowdies-light {
  font-family: 'Rowdies', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rowdies-regular {
  font-family: 'Rowdies', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rowdies-bold {
  font-family: 'Rowdies', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.outfit {
  font-family: 'Outfit', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

main .common_btn {
  text-align: left;
  a {
    background-color: #3e3e3e;
    padding: 1em 4em 1em 3em;
    display: block;
    border-radius: 3em;
    box-sizing: border-box;
    width: fit-content;
    position: relative;
    overflow: hidden;
    &:hover {
      opacity: 1;
    }
    span {
      color: #fff;
      font-size: 1.8rem;
      position: relative;
      z-index: 2;
      width: 100%;
      display: block;
      &:before {
        content: '';
        position: absolute;
        width: 0.7em;
        height: 0.7em;
        top: 50%;
        left: -1.5em;
        border-radius: 50%;
        background-color: #fff;
        transform: translateY(-50%);
      }
      &:after {
        content: '';
        background: url(/wp-content/themes/pgfamily/asset/img/common/arrow_dot_white.svg) 0 0 / contain no-repeat;
        width: 1.333em;
        height: auto;
        position: absolute;
        left: calc(100% + 1em);
        top: 50%;
        transform: translateY(-50%);
        aspect-ratio: 28/15;
      }
    }
    &:after {
      content: '';
      position: absolute;
      background-color: #eb610f;
      width: 100%;
      height: 100%;
      left: -100%;
      top: 0px;
      transition-duration: 0.3s;
      z-index: 1;
    }
    &:hover:after {
      left: 0%;
    }
  }
}

#main_v {
  position: relative;
  height: 68.7rem;
  background: url('../img/index/mv_img.jpg') center center / cover no-repeat;
  > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    .inner {
      height: 100%;
      position: relative;
      display: flex;
      align-items: flex-end;
      flex-direction: column;
      justify-content: flex-end;
      width: 85%;
      h1 {
        font-size: 8rem;
        color: #fff;
        font-family: 'Outfit', sans-serif;
        font-optical-sizing: auto;
        font-weight: bold;
        font-style: normal;
        text-align: right;
      }
      > div {
        background-color: #f06414;
        color: #fff;
        font-size: 3rem;
        padding: 0.5em 0 3em 1em;
        border-radius: 1em 0 0 0;
        position: relative;
        font-weight: 600;
        &:after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          right: -100%;
          top: 0px;
          background-color: #f06414;
        }
        span {
          font-size: 0.6em;
          margin-right: 0.5em;
        }
      }
    }
  }
}

main .bg_gray {
  background-color: #efebe9;
}

#features {
  max-width: 1145px;
  margin: 0 auto 9rem;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 2rem 2rem 1rem rgba(0, 0, 0, 0.2);
  padding: 3.4rem 5% 7rem;
  box-sizing: border-box;
  margin-top: -8rem;
  position: relative;
  z-index: 1;
  h2 {
    span {
      font-size: 1.5rem;
    }
  }
  .pankuzu {
    margin-bottom: 1em;
    ul {
      display: flex;
      justify-content: flex-end;
      li {
        font-size: 1.4rem;
        margin-left: 3em;
        position: relative;
        font-weight: 400;
        &:before {
          content: '';
          position: absolute;
          left: -2.5em;
          top: 45%;
          width: 2em;
          border-top: 1px solid;
        }
        &:last-child {
          text-decoration: underline;
          font-weight: 700;
        }
        &:first-child {
          &:before {
            display: none;
          }
        }
        a {
          &:hover {
            @media (hover: hover) {
              text-decoration: underline;
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .flex {
    align-items: flex-start;
    > div {
      width: 43%;
      h3 {
        font-size: 2.4rem;
        color: #f16a14;
        line-height: 1.5;
        margin: 0.8em 0 0.5em;
        font-weight: 600;
        + p {
          font-size: 1.8rem;
          width: 90%;
        }
      }
    }
    > img {
      width: 56.436%;
    }
  }
}

main h2 {
  font-family: 'Rowdies', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 4.4rem;
  line-height: 1.3;
  span {
    font-size: 2rem;
    color: #f06414;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    display: block;
    line-height: 1.4;
    > span {
      font-size: 0.75em;
    }
  }
}

#features_list {
  padding-bottom: 8rem;
  ul {
    li {
      display: flex;
      align-items: flex-start;
      margin-bottom: 6rem;
      &:last-child {
        margin-bottom: 0px;
      }
      .img {
        width: 50%;
        img {
          width: 143.8%;
          max-width: 143.8%;
          margin-left: -43.8%;
        }
      }
      > div {
        width: 50%;
        h3 {
          font-size: 2.4rem;
          color: #f06414;
          display: flex;
          align-items: flex-end;
          border-bottom: 1px solid #f06414;
          padding-left: 15%;
          column-gap: 0.4em;
          padding-bottom: 0.3em;
          .number {
            font-size: 7.983rem;
            font-family: 'Barlow Condensed', sans-serif;
            font-optical-sizing: auto;
            font-weight: 700;
            font-style: normal;
            position: relative;
            z-index: 1;
            line-height: 1;
            + span {
              font-family: 'Rowdies', sans-serif;
              font-weight: 300;
              font-style: normal;
              color: #fff;
              font-size: 3.4rem;
              line-height: 1.4;
            }
          }
        }
        h4 {
          font-size: 2.2rem;
          margin: 1em 0 0.5em 15%;
          font-weight: 600;
          line-height: 1.5;
          span {
            color: #f06414;
          }
          + p {
            font-size: 1.8rem;
            margin: 0 1em 0 15%;
            font-weight: 400;
          }
        }
      }
    }
    li:nth-of-type(even) {
      .img {
        img {
          margin-left: auto;
          margin-right: -43.8%;
        }
      }
      > div {
        h3 {
          padding-left: 0px;
        }
        h4 {
          margin-left: 0px;
          + p {
            margin-left: 0px;
          }
        }
      }
    }
  }
}

#studio-photo {
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  padding: 7rem 0 11rem;
  .slide-title {
    background: linear-gradient(to right, #ff8c00, #ff6600);
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    width: 33.333%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 5vw 0 0 0;
    h2 {
      font-size: 5rem;
      line-height: 1;
      + p {
        margin-top: 0.5em;
        font-size: 2rem;
        line-height: 1.3;
        span {
          font-size: 0.75em;
        }
      }
    }
  }
  .studio-photo-swiper {
    flex: 1;
    width: 66.6666%;
    position: relative;
    overflow: clip;
    overflow-y: visible;
    .swiper-slide {
      width: auto;
      flex-shrink: 0;
      position: relative;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        bottom: 0px;
        left: 0px;
        font-size: 1.5rem;
        color: #fff;
        background-color: #000;
        padding: 0.3em 0.5em;
      }
    }
    .swiper-pagination__wrap {
      position: absolute;
      line-height: 1;
      right: 15.4vw;
      top: calc(100% + 2.2vw);
    }
    .swiper-pagination {
      font-weight: bold;
      position: static;
      font-size: 1.8rem;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      column-gap: 0.3em;
      .current {
        color: #f06414;
      }
      span {
        cursor: pointer;
      }
    }
    .swiper-button-prev {
      color: #f06414;
      position: absolute;
      height: auto;
      margin-top: 0;
      top: 50%;
      transform: translateY(-50%);
      left: auto;
      right: calc(100% + 4rem);
      &:after {
        font-size: 2.4rem;
      }
    }
    .swiper-button-next {
      color: #f06414;
      position: absolute;
      height: auto;
      margin-top: 0;
      top: 50%;
      transform: translateY(-50%);
      left: calc(100% + 4rem);
      right: auto;
      &:after {
        font-size: 2.4rem;
      }
    }
  }
}

#dance {
  padding: 13rem 0 15rem;
  border-radius: 0 0 5vw 5vw;
  position: relative;
  z-index: 1;
  picture img {
    width: 100%;
  }
  h2 {
    text-align: right;
    margin-top: -9rem;
    margin-bottom: 5rem;
  }
  h3 {
    text-align: right;
    margin-top: -11rem;
    margin-bottom: 5rem;
    img {
      width: 55.5%;
    }
  }
  ul {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    li {
      width: 19.2%;
      margin-bottom: 1%;
      &.large {
        width: 39.4%;
      }
      a {
        font-size: 1.6rem;
      }
    }
  }
}

#news {
  background-color: #fff;
  .bg {
    background-color: #efebe9;
    padding: 14rem 0 0;
    h2 {
      > span {
        margin-bottom: 2em;
      }
    }
    & ul.tab {
      & li {
        a {
          font-size: 1.6rem;
        }
      }
    }
    & ul.news_list {
      li:last-child {
        .btns {
          p {
            margin-right: 2%;
          }
        }
      }
    }
  }
}

#event {
  padding: 6rem 0 6rem;
  background-color: #e1dddb;
  box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.4);
  h2 {
    margin-bottom: 2rem;
  }
}

#blog {
  background-color: #efebe9;
  padding: 6rem 0 10rem;
  .flex {
    > div {
      width: 73%;
      dl {
        a {
          border-bottom: 1px solid #a1a0a0;
          padding-bottom: 1em;
          margin-bottom: 1em;
          display: block;
          &:last-child {
            margin-bottom: 0px;
          }
          dt {
            font-size: 2rem;
            font-family: 'Rowdies', sans-serif;
            font-weight: 300;
            font-style: normal;
            margin-bottom: 0.5em;
          }
        }
      }
    }
  }
  .common_btn {
    a {
      margin-left: auto;
      margin-top: 1.5em;
    }
  }
}

#access {
  padding: 10rem 0 5rem;
  /* border-bottom: 1px solid #c9c9c9; */
  .flex {
    div {
      width: 45%;
      padding: 5rem 0;
      ul {
        li {
          border-bottom: 1px solid;
          padding-bottom: 1.5em;
          margin-top: 1.5em;
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
    .map {
      width: 50%;
      iframe {
        width: 150%;
        height: 100%;
      }
    }
  }
}

#road {
  padding: 6rem 0;
  .title {
    font-size: 3rem;
    line-height: 1.3;
    color: #f06414;
    font-weight: 600;
    span {
      font-size: 0.5333em;
    }
  }
  .way-slider {
    width: 100%;
    position: relative;
    .swiper-slide {
      text-align: center;
      margin-top: 1.5em;
      h3 {
        font-size: 1.8rem;
        text-align: left;
      }
      img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
      }
      p {
        font-size: 1.6rem;
        margin-top: 0.5em;
        text-align: left;
      }
    }
  }
  .swiper-pagination {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #f60;
    opacity: 0.4;
    border-radius: 50%;
    transition: 0.3s;
  }
  .swiper-pagination-bullet-active {
    height: 30px;
    border-radius: 5px;
    opacity: 1;
  }
}

#experience {
  background: url('../img/index/experience_img.png') 0 0/68.88% no-repeat;
  padding-top: 9vw;
  padding-bottom: 13vw;
  .inner {
    > div {
      width: 100%;
      margin-left: 50%;
      box-sizing: border-box;
      background: linear-gradient(to right, #ff8c00, #ff6600);
      border-radius: 2vw 0 0 2vw;
      padding: 8rem 50% 6rem 0;
      h3 {
        color: #fff;
        font-size: 3.8rem;
        margin-left: 14%;
        white-space: nowrap;
        font-weight: 600;
        line-height: 1.42105263;
        + p {
          font-size: 1.8rem;
          color: #fff;
          margin: 1em 0 1em 14%;
        }
        span {
          font-size: 0.73em;
        }
        mark {
          background-color: #fff;
          line-height: 1.3;
          display: inline-block;
        }
      }
      .common_btn {
        a {
          margin-left: auto;
        }
      }
      .reserve {
        text-align: center;
        background-color: #ffec25;
        padding: 3.5rem 0 2.5rem;
        margin-top: 5rem;
        box-shadow: 0.8rem 0.8rem 0rem rgba(62, 62, 62, 1);
        h4 {
          font-size: 2rem;
          display: inline-block;
          position: relative;
          margin-bottom: 0.8em;
          font-weight: 600;
          &:before {
            content: '';
            height: 1.8em;
            border-right: 0.1em solid #000;
            transform: rotate(-40deg);
            left: -1em;
            top: -0.2em;
            position: absolute;
          }
          &:after {
            content: '';
            height: 1.8em;
            border-right: 0.1em solid #000;
            transform: rotate(40deg);
            right: -1em;
            top: -0.2em;
            position: absolute;
          }
        }
        ul {
          display: flex;
          justify-content: center;
          li {
            a {
              color: #fff;
              background-color: #268360;
              font-size: 1.8rem;
              width: 10em;
              text-align: center;
              padding: 2.5em 0 0.8em;
              display: block;
              border-radius: 0.7em;
              line-height: 1.3;
              margin: 0 0.3em;
              transition-duration: 0.3s;
              &:hover {
                background-color: #3e3e3e !important;
                opacity: 1;
              }
            }
            &.web a {
              background: url('/wp-content/themes/pgfamily/asset/img/studio/index/icon_pc.png') center 0.3em /2.22em no-repeat;
              background-color: #268360;
            }
            &.tel a {
              background: url('/wp-content/themes/pgfamily/asset/img/studio/index/icon_sp.png') center 0.3em /2.22em no-repeat;
              background-color: #268360;
            }
          }
        }
      }
    }
    ul.btn {
      position: absolute;
      top: 43vw;
      left: 0;
      li {
        margin-top: 1rem;
        a {
          font-size: 1.8rem;
          align-items: center;
          color: #000;
          background-color: #fff;
          border: 0.2rem solid #62798f;
          width: 20em;
          padding-inline: 1em 1.2em;
          padding-block: 1em;
          border-radius: 1.11111111em;
          flex-wrap: nowrap;
          justify-content: space-between;
          column-gap: 1em;
          &:hover {
            @media (hover: hover) {
              opacity: 1;
              background-color: #000;
              color: #fff;
            }
          }
          .icon {
            aspect-ratio: 1 / 1;
            height: 1.55555556em;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            &:where(ul.btn li:nth-child(1) &) {
              background-image: url(../img/studio/experience_btn_icon_flow.svg);
            }
            &:where(ul.btn li:nth-child(2) &) {
              background-image: url(../img/studio/experience_btn_icon_beginner.png);
            }
            &:where(ul.btn li:nth-child(1) a:hover &) {
              @media (hover: hover) {
                background-image: url(../img/studio/experience_btn_icon_flow_white.svg);
              }
            }
            &:where(ul.btn li:nth-child(2) a:hover &) {
              @media (hover: hover) {
                background-image: url(../img/studio/experience_btn_icon_beginner_white.svg);
              }
            }
          }
          .text {
            line-height: 1;
            white-space: nowrap;
            letter-spacing: -0.1em;
            flex: 1;
          }
          .arrow {
            width: 1.1em;
            aspect-ratio: 1 / 1;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image: url(../img/common/arrow_right_black.svg);
            &:where(ul.btn li a:hover &) {
              @media (hover: hover) {
                background-image: url(../img/common/arrow_right_white.svg);
              }
            }
          }
        }
      }
    }
  }
}

#instructors {
  background: url('../img/index/instructor_bg.jpg') center top/cover no-repeat;
  height: 531px;
  .inner {
    height: 100%;
    > div {
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #efebe9;
      width: 42%;
      justify-content: center;
      padding: 0 6%;
      box-sizing: border-box;
      h2 {
        + p {
          font-size: 1.8rem;
          margin: 1.5em 0 1.5em;
        }
      }
    }
  }
}
#staff {
  padding: 10rem 0 15rem;
  .inner {
    width: 860px;
  }
  h2 {
    margin-bottom: 0.5em;
  }
  .staff-slider {
    position: relative;
    .swiper-slide {
      transition: transform 0.3s ease;
      img {
        border-radius: 1.2em;
      }
      .name {
        text-align: center;
        font-size: 1.8rem;
        margin: 1em 0 1.5em;
        background-color: ;
      }
      .comment {
        border: solid 0.2em #f06414;
        padding: 1em;
        border-radius: 1em;
        position: relative;
        box-sizing: border-box;
        min-height: 8.8em;
        &:before {
          content: '';
          position: absolute;
          width: 1.1875em;
          height: 0.9375em;
          top: -0.9375em;
          left: 50%;
          margin-left: -0.5em;
          background: url(/wp-content/themes/pgfamily/asset/img/studio/index/comment_arrow.png) 0 0 / contain no-repeat;
        }
        &.gray {
          background-color: #eeeeee;
          &:before {
            background: url(/wp-content/themes/pgfamily/asset/img/studio/index/comment_arrow2.png) 0 0 / contain no-repeat;
          }
        }
      }
    }
  }
  .swiper-button-prev {
    width: 75px;
    height: 75px;
    margin-top: 0px;
    left: -90px;
    background: url(/wp-content/themes/pgfamily/asset/img/common/btn_prev.png) 0 0 / contain no-repeat;
    z-index: 10;
    position: absolute;
    &:after {
      display: none;
    }
    &[aria-disabled='true'] {
      display: none;
    }
  }
  .swiper-button-next {
    width: 75px;
    height: 75px;
    margin-top: 0px;
    right: -90px;
    background: url(/wp-content/themes/pgfamily/asset/img/common/btn_next.png) 0 0 / contain no-repeat;
    z-index: 10;
    &:after {
      display: none;
    }
    &[aria-disabled='true'] {
      display: none;
    }
  }
}

#gallery {
  position: relative;
  margin-bottom: 14rem;
  img {
    width: 100%;
  }
  h2 {
    position: absolute;
    left: 14%;
    bottom: 3rem;
    color: #fff;
    text-align: right;
    font-size: 3vw;
    span {
      color: #fff;
    }
  }
}

#studio {
  background-color: #fff;
  position: relative;
  .bg {
    h2 {
      margin-bottom: 3rem;
    }
    padding: 10rem 0 14rem;
    background-color: #efebe9;
    border-radius: 5vw;
    .studio-swiper {
      width: 100%;
      overflow: hidden;
      .swiper-slide {
        min-width: 280px;
        height: auto;
        text-align: center;
        padding: 1rem;
        background-color: #fff;
        h3 {
          font-size: 2rem;
          text-align: center;
          border-bottom: 0.1em solid;
          padding: 0.7em 0 0.5em;
          margin-bottom: 0.5em;
        }
        .flex {
          align-items: center;
          .tel {
            font-size: 2.3rem;
            font-family: 'Rowdies', sans-serif;
            font-weight: 300;
            font-style: normal;
            background: url(/wp-content/themes/pgfamily/asset/img/studio/index/icon_tel.png) 0 center/0.5218em no-repeat;
            padding-left: 0.8em;
          }
          + p {
            text-align: left;
          }
        }
        .common_btn {
          a {
            margin: 1em auto;
            text-align: left;
            width: 15em;
          }
        }
      }
    }
    .swiper-scrollbar {
      height: 1rem;
      bottom: -7rem;
      background-color: #c8c5c4;
      box-shadow: 0.1rem 0.1rem 0.1rem rgba(164, 164, 164, 1);
      .swiper-scrollbar-drag {
        background-color: #ef5f13;
      }
    }
  }
}

#bottom-workshop-slider-section {
  display: none !important;
}

@media screen and (min-width: 768px) {
  #road {
    & .way-slider {
      padding-right: 0px;
      .swiper-wrapper {
        flex-wrap: wrap;
        gap: 2%;
        .swiper-slide {
          flex-shrink: 3;
          padding: 0px;
          width: 32%;
          position: relative;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-bottom: 1rem solid transparent;
            border-left: 1rem solid #f06414;
            margin: 0 1rem;
            align-self: center;
            position: absolute;
            right: -2.5rem;
            top: 11rem;
          }
          &:last-child:after {
            display: none;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  #staff .swiper-button-prev {
    left: 0px;
  }
  #staff .swiper-button-next {
    right: 10px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1053px) {
  html {
    font-size: 0.94966762vw;
  }
  .tab_display {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  body {
    padding-top: 8vw !important;
  }
  h3 {
    font-size: 5vw !important;
  }
  h4 {
    font-size: 4.8vw !important;
  }
  p {
    font-size: 4.2vw !important;
  }
  .content {
    margin-top: 0vh;
  }
  main .common_btn {
    a {
      font-size: 1.4rem;
    }
  }

  #main_v {
    height: 138.5vw;
    background: url(../img/index/mv_img_sp.jpg) center top / 100% no-repeat;
    & > div {
      & .inner {
        width: 90%;
        > div {
          font-size: 4.5vw;
          width: 95%;
          padding: 0.5em 0 8.5em 0.7em;
        }
        h1 {
          font-size: 11vw;
          text-align: left;
          width: 95%;
        }
      }
    }
  }

  main h2 {
    font-size: 9vw;
    span {
      font-size: 1.4rem;
      > span {
        font-size: 1.2rem;
      }
    }
  }

  #features {
    margin: -36vw auto 15vw;
    width: 90%;
    box-shadow: 1rem 1rem 0.5rem rgba(0, 0, 0, 0.2);
    padding: 2rem 5% 2rem;
    .pankuzu {
      display: none;
    }
    & .flex {
      > img {
        width: 100%;
        order: 1;
      }
      & > div {
        width: 100%;
        order: 2;
        margin-top: 5vw;
        h3 {
          font-size: 5vw;
          + p {
            font-size: 3.8vw;
            width: 100%;
          }
        }
      }
    }
  }

  #features_list {
    padding-bottom: 20vw;
    & ul {
      & li {
        flex-wrap: wrap;
        .img {
          order: 1;
          width: 100%;
          img {
            width: 110%;
            margin-left: -10%;
          }
        }
        &:nth-of-type(even) {
          .img {
            img {
              margin-right: -10%;
            }
          }
        }
        > div {
          order: 2;
          width: 100%;
          h3 {
            padding-left: 0;
            font-size: 5vw;
            .number {
              font-size: 15vw;
              + span {
                font-size: 6vw;
              }
            }
          }
          h4 {
            font-size: 5vw;
            margin-left: 0px;
            margin-bottom: 0.5em;
            + p {
              font-size: 3.8vw;
              margin-inline: 0;
            }
          }
        }
      }
    }
  }

  #studio-photo {
    display: block;
    .slide-title {
      padding: 10vw 0 8vw 10vw;
      box-sizing: border-box;
      width: 100%;
      display: block;
      h2 {
        font-size: 9vw;
        + p {
          font-size: 5vw;
        }
      }
    }
    .studio-photo-swiper {
      width: 100%;
      .swiper-pagination {
        text-align: center;
        padding-right: 0rem;
        font-size: 1.2rem;
        transform: translateY(-0.6vw);
        span {
          margin: 0 0.3em;
        }
      }
      .swiper-pagination__wrap {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        top: calc(100% + 8.2vw);
      }
      .swiper-button-next {
        left: calc(100% + 6vw);
        &::after {
          font-size: 2rem;
        }
      }
      .swiper-button-prev {
        right: calc(100% + 6vw);
        &::after {
          font-size: 2rem;
        }
      }
    }
  }

  #dance {
    padding: 7rem 0 7rem;
    border-radius: 0;
    h2 {
      margin-top: 2rem;
      margin-bottom: 3rem;
    }
    & ul {
      li {
        width: 31.8%;
        margin-bottom: 2%;
        &.large {
          width: 31.8%;
        }
      }
    }
  }

  #news {
    .bg {
      background-color: #efebe9;
      padding: 7rem 0 0;
      border-radius: 0;
      h3 {
        margin-bottom: 3rem;
        img {
          height: 21vw;
          width: auto;
        }
      }
    }
  }

  #event {
    padding: 7rem 0 7rem;
    background-color: #e1dddb;
    box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.4);
    h3 {
      img {
        width: 55vw;
        margin-left: 5vw;
      }
    }
  }

  #event {
    h2 {
      padding: 0 5%;
      margin-bottom: 0.3em;
    }
    .inner {
      max-width: 100%;
    }
  }

  #blog {
    padding: 6rem 0 6rem;
    .inner {
      max-width: 80%;
    }
    h2 {
      margin-bottom: 10vw;
    }
    & .flex {
      & > div {
        width: 100%;
        & dl {
          & a {
            dt {
              fotn-size: 2rem;
              font-family: 'Rowdies', sans-serif;
              font-weight: 300;
              font-style: normal;
              margin-bottom: 0.5em;
            }
          }
        }
      }
    }
    .common_btn {
      a {
        margin: 2em auto 0;
      }
    }
  }

  #access {
    padding: 8rem 0 5rem;
    & .flex {
      display: block;
      div {
        width: 100%;
        padding: 0;
      }
      .map {
        width: 110vw;
        margin-left: -5vw;
        iframe {
          width: 100%;
          height: 97vw;
        }
      }
    }
  }

  #road {
    padding: 4rem 0;
    .inner {
      padding-right: 5%;
    }
    .title {
      font-size: 5vw;
      span {
        font-size: 0.6em;
      }
    }
    & .way-slider {
      overflow-x: visible;
      & .swiper-slide {
        p {
          font-size: 3.8vw;
        }
      }
    }
    .swiper-pagination {
      left: 89vw;
    }
  }

  #experience {
    background: url(../img/index/experience_img.png) 0 146vw / 95% no-repeat;
    padding-top: 0rem;
    padding-bottom: 25vw;
    .inner {
      > div {
        margin-left: 0px;
        width: 97vw;
        border-radius: 5vw 0 0 5vw;
        padding: 3rem 9% 4rem 0;
        h3 {
          font-size: 6vw;
          margin-left: 10%;
          + p {
            font-size: 3.8vw;
            margin-left: 10%;
          }
        }
        .reserve {
          width: 96vw;
          margin-top: 3rem;
          box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.3);
          h4 {
            font-size: 4vw;
          }
          ul {
            li {
              a {
                font-size: 4vw;
              }
            }
          }
        }
      }
      ul.btn {
        position: relative;
        padding: 0 10%;
        margin-top: 64vw;
        top: 0;
        li {
          a {
            width: 100%;
            border-radius: 1rem;
            border-width: 1px;
            padding: 0.8em;
            column-gap: 0.5em;
            .text {
              font-size: 1.4rem;
            }
            .icon {
              height: 1.2em;
            }
            .arrow {
              width: 0.9em;
            }
          }
        }
      }
    }
  }

  #instructors {
    background: none;
    height: auto;
    & .inner {
      width: 100%;
      max-width: 100%;
      > div {
        width: 100%;
        padding: 10vw 10% 10vw;
        text-align: left;
        display: block;
        h2 {
          + p {
            font-size: 3.8vw;
          }
        }
        .common_btn {
          a {
            margin-left: auto;
          }
        }
      }
    }
  }

  #staff {
    padding: 8rem 0 10rem;
    & .staff-slider {
      & .swiper-slide {
        .name {
          font-size: 3.8vw;
        }
        .comment {
          font-size: 3.8vw;
        }
      }
    }
    .swiper-button-prev {
      width: 13vw;
      height: 13vw;
      left: -9vw;
      margin-top: -20vw;
    }
    .swiper-button-next {
      width: 13vw;
      height: 13vw;
      right: -8vw;
      margin-top: -20vw;
    }
  }

  #gallery {
    h2 {
      left: auto;
      right: 5%;
      bottom: auto;
      top: 74vw;
      font-size: 8.5vw;
    }
  }

  #studio {
    top: -3rem;
    margin-bottom: -3rem;
    .bg {
      padding: 8rem 0 12rem;
      .inner {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 30vw;
          height: auto;
          background-image: url(/wp-content/themes/pgfamily/asset/img/studio/studio_sp_arrow.png);
          aspect-ratio: 221 / 50;
          background-size: cover;
          top: 50.4vw;
          z-index: 2;
          right: -15.4vw;
        }
      }
      .swiper-scrollbar {
        bottom: -2rem;
      }
      .common_btn {
        a {
          margin: 0 auto;
        }
      }
    }
  }
}