/*====================================================
    ページタイトル
====================================================*/
.pageHead {
  .pageHead__title--en {
    color: var(--color-orange);
    font-size: 8.3rem;
    position: relative;
    width: fit-content;
    line-height: 1;
    font-family: 'Rowdies', sans-serif;
  }
  .pageHead__title--en::before {
    content: '';
    background-color: #fae500;
    width: 2.64rem;
    height: 0.72rem;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 3.6px;
  }
  .pageHead__title--ja {
    display: block;
    color: #000;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0.4rem;
  }
  @media screen and (max-width: 767px) {
    .pageHead__title {
      width: fit-content;
      margin: 0 auto;
      text-align: center;
    }
    .pageHead__title--en {
      line-height: 0.6;
      font-size: 13.86667vw;
    }
    .pageHead__title--en::before {
      width: 4.39vw;
      height: 1.2vw;
    }
    .pageHead__title--ja {
      font-size: 3.2vw;
      text-align: left;
      margin-top: 1vw;
    }
  }
}

/*==================================================
    パンくず
==================================================*/
.breadcrumb {
  ul {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;

    li {
      font-size: 1.4rem;
      font-weight: 400;
      position: relative;
      &.is-current {
        font-weight: 700;
      }
      &:not(:first-of-type) {
        margin-left: 3rem;
      }
      &:not(:first-of-type)::before {
        content: '';
        background-color: #000;
        width: 2.8rem;
        height: 0.1rem;
        position: absolute;
        top: 50%;
        left: -3.5rem;
        transform: translateY(-50%);
      }
      a {
        border-bottom: 1px solid transparent;
        &:hover {
          border-color: #000;
          opacity: 1;
        }
      }
    }
  }
}

/*==================================================
    ボタン
==================================================*/
/* 【ボタン】白背景-四角
------------------------------------------------- */
.buttonSquareWrap {
  display: flex;
  flex-flow: row wrap;
  gap: 0.4rem;
}

.buttonSquare {
  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;
  position: relative;
  transition: 0.3s;
  width: calc((100% - (0.4rem * 4)) / 5);
}

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

.buttonSquare::after {
  background-image: url(../img/common/right_black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 1rem;
  width: 1.2rem;
}

.buttonSquare:hover::after {
  background-image: url(../img/common/right_white.svg);
}

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

@media screen and (max-width: 767px) {
  .buttonSquare {
    width: calc((100% - (0.4rem * 1)) / 2);
  }
}

/* 【ボタン】白背景-四角 センター寄せにする場合
------------------------------------------------- */
.buttonSquareWrap.is-center {
  justify-content: center;
}

/* 【ボタン】白背景-四角-下矢印
------------------------------------------------- */
.buttonSquare.arrow-down::after {
  background-image: url(../img/common/arrow_down_black.svg);
  height: 1.2rem;
  width: 1rem;
}

.buttonSquare.arrow-down:hover::after {
  background-image: url(../img/common/arrow_down_white.svg);
}

/* 【ボタン】白背景-四角-矢印なし
------------------------------------------------- */
.buttonSquare.arrow-none::after {
  content: none;
}

/* 【ボタン】黒背景-角丸
------------------------------------------------- */
.buttonMore {
  .buttonMore__link {
    align-items: center;
    background: #3e3e3e;
    border-radius: 2.6rem;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 1.6rem 1fr 2.4rem;
    margin: 2.6rem auto 0;
    max-width: 25.2rem;
    overflow: hidden;
    padding: 1.7rem 2.2rem;
    position: relative;
    width: 100%;
  }

  .buttonMore__link:hover {
    opacity: 1;
  }

  .buttonMore__link::before {
    background: var(--color-orange);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.5s ease;
    transition-property: transform;
    width: 100%;
  }

  .buttonMore__link:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  .buttonMore__linkDot {
    background: #fff;
    border-radius: 50%;
    display: block;
    height: 1rem;
    position: relative;
    width: 1rem;
  }

  .buttonMore__linkText {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1;
    position: relative;
    transform: translateY(-0.1em);
  }

  .buttonMore__linkArrow {
    position: relative;
  }

  .buttonMore__linkArrow::after {
    background-image: url(../img/common/arrow_dot_white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    height: 1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
  }

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

/* 【ボタン】黒背景-角丸-右寄せ
------------------------------------------------- */
.buttonMore {
  .buttonMore__link.is-right {
    margin-right: 0;
  }

  @media screen and (max-width: 767px) {
    .buttonMore__link.is-right {
      margin-right: auto;
    }
  }
}

/* 【ボタン】背景白-角丸
------------------------------------------------- */
.buttonMore {
  .buttonMore__link.bg-white {
    background: #fff;
    color: #3e3e3e;
  }

  .buttonMore__link.bg-white:hover {
    color: #fff;
  }

  .buttonMore__link.bg-white .buttonMore__linkDot {
    background: #3e3e3e;
  }

  .buttonMore__link.bg-white:hover .buttonMore__linkDot {
    background: #fff;
  }

  .buttonMore__link.bg-white .buttonMore__linkArrow::after {
    background-image: url(../img/common/arrow_dot_black.svg);
  }

  .buttonMore__link.bg-white:hover .buttonMore__linkArrow::after {
    background-image: url(../img/common/arrow_dot_white.svg);
  }

  .buttonMore__link.bg-white .buttonMore__linkText {
    color: #3e3e3e;
  }

  .buttonMore__link.bg-white:hover .buttonMore__linkText {
    color: #fff;
  }
}

/* 【ボタン】背景白-オレンジ枠-角丸
------------------------------------------------- */
.buttonMore {
  .buttonMore__link.is-orange {
    background: #fff;
    border: 0.2rem solid var(--color-orange);
  }

  .buttonMore__link.is-orange .buttonMore__linkDot {
    background: var(--color-orange);
  }

  .buttonMore__link.is-orange:hover .buttonMore__linkDot {
    background: #fff;
  }

  .buttonMore__link.is-orange .buttonMore__linkText {
    color: #000;
  }

  .buttonMore__link.is-orange:hover .buttonMore__linkText {
    color: #fff;
  }

  .buttonMore__link.is-orange .buttonMore__linkArrow::after {
    background-image: url(../img/common/arrow_dot_orange.svg);
  }

  .buttonMore__link.is-orange:hover .buttonMore__linkArrow::after {
    background-image: url(../img/common/arrow_dot_white.svg);
  }
}

/* 【ボタン】ジャンル
------------------------------------------------- */
.buttonGenreWrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
}

.buttonGenre {
  align-items: center;
  background: #fff;
  border: 0.2rem solid var(--color-orange);
  border-radius: 2rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.74);
  display: flex;
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  height: 6.6rem;
  justify-content: center;
  line-height: 1;
  text-align: center;
  transition: 0.3s;
}

.buttonGenre:hover {
  background: var(--color-orange);
  color: #fff;
  opacity: 1;
}

.buttonGenre.column-2 {
  grid-column: span 2;
}

@media screen and (max-width: 767px) {
  .buttonGenreWrap {
    gap: 1.73vw 1.86vw;
    grid-template-columns: repeat(3, 1fr);
  }

  .buttonGenre {
    border-radius: 2.66vw;
    font-size: 3.73vw;
    height: 12.4vw;
  }
}

/* 【ボタン】アイコン有りボタン
------------------------------------------------- */
.buttonIcon {
  font-size: 1.8rem;
  align-items: center;
  color: #000;
  background-color: #fff;
  border: 0.2rem solid #62798f;
  width: 12.2em;
  padding: 0.54em 0.2em 0.54em 0;
  border-radius: 1.11111111em;
  flex-wrap: nowrap;
  justify-content: space-around;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background-color: #000;
      color: #fff;
    }
  }
}
.buttonIcon__icon {
  aspect-ratio: 1/1;
  height: 2.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  &.--schedule {
    background-image: url(../img/common/button_icon_schedule.svg);
  }
  &.--substitute {
    background-image: url(../img/common/button_icon_substitute.svg);
  }
  &.--report {
    background-image: url(../img/common/button_icon_report.svg);
  }
  &.--column {
    background-image: url(../img/common/button_icon_column.svg);
  }
  &.--clock {
    background-image: url(../img/common/button_icon_clock.svg);
  }
  &:where(.buttonIcon:hover &) {
    @media (hover: hover) {
      &.--schedule {
        background-image: url(../img/common/button_icon_schedule_white.svg);
      }
      &.--substitute {
        background-image: url(../img/common/button_icon_substitute_white.svg);
      }
      &.--report {
        background-image: url(../img/common/button_icon_report_white.svg);
      }
      &.--column {
        background-image: url(../img/common/button_icon_column_white.svg);
      }
      &.--clock {
        background-image: url(../img/common/button_icon_clock_white.svg);
      }
    }
  }
}
.buttonIcon__text {
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.1em;
}
.buttonIcon__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(.buttonIcon:hover &) {
    @media (hover: hover) {
      background-image: url(../img/common/arrow_right_white.svg);
    }
  }
}
@media screen and (max-width: 767px) {
  .buttonIcon {
    font-size: 1.4rem;
    justify-content: flex-start;
    padding-inline: 1em 0.6em;
    padding-block: 0.8em;
    width: 12.6em;
    column-gap: 0.4em;
    border-width: 1px;
    border-radius: 0.71428571em;
  }
  .buttonIcon__icon {
    width: auto;
    height: 2.2em;
  }
  .buttonIcon__arrow {
    margin-left: auto;
  }
}

/* 【画像】拡大表示
------------------------------------------------- */
.scaleUpImgHover {
  overflow: hidden;
  display: block;
  img {
    transition: scale 0.3s;
    &:where(a:hover .scaleUpImgHover &) {
      @media (hover: hover) {
        scale: 1.2;
      }
    }
  }
}

/*==================================================
    ブロック
==================================================*/

/* [ブロック]よくある質問
------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .faq__button {
    background: #eb610f;
    border-radius: 0.5rem 0.5rem;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 2.2rem;
    padding: 1.5rem 2.6rem 1.5rem 5.8rem;
    position: relative;
    transition: 0.3s;
    width: 100%;
  }

  .open .faq__button {
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .faq_q {
    align-items: center;
    background: #000;
    border-radius: 0.5rem 0 1rem 0;
    display: flex;
    font-size: 1.8rem;
    font-weight: 600;
    height: 3.6rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 4rem;
  }

  .faq__questionText {
    font-size: 2rem;
    font-weight: 600;
    text-align: start;
  }

  .faq__plus {
    align-self: center;
    display: block;
    height: 2.2rem;
    position: relative;
    width: 2.2rem;
  }

  .faq__plus::before,
  .faq__plus::after {
    background: #fff;
    content: '';
    display: block;
    height: 0.4rem;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
  }

  .faq__plus::before,
  .open .faq__plus::after {
    transform: translate(-50%, -50%);
  }

  .faq__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: 0.3s;
  }

  .faq__body {
    background: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
  }

  .faq__contents {
    padding: 2rem 6rem 2.7rem 2.6rem;
  }

  .faq__answer {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 3rem 1fr;
  }

  .faq__answerA {
    font-size: 1.8rem;
    font-weight: 600;
  }

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

  @media screen and (max-width: 767px) {
    gap: 1vw;

    .faq__questionText {
      font-size: 4.2667vw;
    }

    .faq__button {
      grid-template-columns: 1fr 2.4vw;
      padding: 2.7333vw 2.6667vw 2.7333vw 7.5333vw;
    }

    .faq__plus::before,
    .faq__plus::after {
      height: 0.4vw;
    }

    .faq__plus {
      height: 2.4vw;
      width: 2.4vw;
    }

    .faq_q {
      font-size: 4vw;
      height: 6.1333vw;
      width: 6vw;
    }

    .faq__contents {
      padding: 4.2667vw 5.3333vw 6.1333vw 2.4667vw;
    }

    .faq__answer {
      gap: 0.5vw;
      grid-template-columns: 4.6667vw 1fr;
    }

    .faq__answerA {
      font-size: 4vw;
    }

    .faq__answerText {
      font-size: 3.7333vw;
      line-height: 1.5;
    }
  }
}

/* [ブロック]STEPとタブ切り替え（Webで体験予約する　電話で体験予約する）
------------------------------------------------- */
.step__label {
  align-items: center;
  background: var(--color-orange);
  border-radius: 2.1rem;
  color: #fff;
  display: flex;
  font-family: 'Outfit', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  height: 4.7rem;
  justify-content: center;
  text-align: center;
  width: 12rem;
}

.step__label .large {
  font-size: 3.3rem;
  margin-left: 0.2rem;
  margin-top: -0.4rem;
}

.step1__group {
  padding-top: 6rem;
}

.step1__group.hidden {
  display: none;
}

.step1__tabGroup {
  display: flex;
  gap: 3.2rem;
  justify-content: center;
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}

.step1__tabGroup .line {
  background: #000;
  bottom: 0;
  display: block;
  height: 0.1rem;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.step1__tab {
  align-items: center;
  background: #eae9e9;
  border: 0.1rem solid #eae9e9;
  border-radius: 0.6rem 0.6rem 0 0;
  display: flex;
  font-weight: 600;
  height: 7rem;
  justify-content: center;
  transition: background-color 0.3s;
  width: 27rem;
  z-index: -1;
}

.step1__tab.active:hover {
  opacity: 1;
}

.step1__tab.active {
  background: #fff;
  border-color: #000;
  border-radius: 1rem 1rem 0 0;
  z-index: 2;
}

.step1__tab.active {
  border-bottom-color: #fff;
}

.webSteps__swiper {
  position: relative;
}

.webSteps__swiper .swiper-wrapper {
  overflow: visible;
}

.webSteps__controls {
  opacity: 0;
  position: absolute;
}

.webSteps__figure {
  display: grid;
  gap: 2.2rem;
  grid-template-rows: 3.7rem 1fr auto;
  height: 52rem;
  position: relative;
}

.webSteps__figure img {
  border: 0.2rem solid #313131;
}

.webSteps__imageWrapper {
  position: relative;
}

.webSteps__box {
  border: 3px solid var(--color-orange);
  position: absolute;
}

.webSteps__box.box1 {
  height: 12.1rem;
  left: 1.1rem;
  top: 17.3rem;
  width: 19.7rem;
}

.webSteps__box.box2 {
  height: 2.6rem;
  left: 3.8rem;
  top: 4.6rem;
  width: 3.7rem;
}

.webSteps__box.box3 {
  height: 10.4rem;
  left: 6.1rem;
  top: 11.4rem;
  width: 6.4rem;
}

.webSteps__box.box4 {
  height: 3.5rem;
  left: 0.6rem;
  top: 18rem;
  width: 20.6rem;
}

.webSteps__box.box5 {
  height: 13.4rem;
  left: 0.4rem;
  top: 21.9rem;
  width: 21.4rem;
}

.webSteps__highlight {
  align-items: center;
  background: var(--color-orange);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.5rem;
  height: 2.8rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 2.8rem;
}

.webSteps__disclaimer {
  bottom: -7.9rem;
  line-height: 1.35;
  position: absolute;
}

.webSteps__link {
  align-items: center;
  background: #268360;
  border-radius: 999px;
  border-top: 1px solid #268360;
  box-shadow: inset 0 1px 0 #fff;
  color: #fff;
  display: flex;
  gap: 0.8rem;
  height: 6rem;
  justify-content: center;
  margin: 4.4rem auto 0;
  position: relative;
  transition: 0.3s;
  width: 27.5rem;
  z-index: 1;
}

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

.webSteps__label {
  align-items: center;
  background: #000;
  border-radius: 0.5rem;
  color: #fff;
  display: flex;
  height: 3.7rem;
  justify-content: center;
  line-height: 1.35;
  margin: 0 auto;
  width: 10.8rem;
}

.webSteps__figcaption {
  align-content: center;
  font-size: 1.8rem;
  line-height: 1.33;
  margin: 0 -0.8rem;
  text-align: center;
}

.step1__subtitle {
  color: var(--color-orange);
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.step1__checkList {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 2rem;
  place-self: center;
}

.step1__checkitem {
  align-items: center;
  display: grid;
  font-size: 1.8rem;
  font-weight: 400;
  gap: 1.2rem;
  grid-template-columns: 1.6rem 1fr;
}

.step1__checkIcon {
  display: flex;
  transform: translateY(-0.2rem);
}

.region__olist {
  display: grid;
  gap: 4.4rem 2.7rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 4.8rem auto 0;
  max-width: 95.6rem;
}

.region__item--span3 {
  grid-column: span 3;
}

.region__heading {
  align-items: center;
  background: #faf2ed;
  display: flex;
  font-size: 2rem;
  font-weight: 600;
  gap: 0.9rem;
  height: 4.7rem;
  padding: 0 1.6rem;
}

.region__heading .dot {
  background: var(--color-orange);
  border-radius: 50%;
  display: block;
  height: 1.1rem;
  width: 1.1rem;
}

.region__headingText {
  margin-top: 0.1rem;
}

.region__ulist {
  display: grid;
  gap: 2.7rem;
  margin-top: 2.4rem;
}

.region__item--span3 .region__ulist {
  grid-template-columns: 1fr 1fr 1fr;
}

.storeCard {
  align-items: center;
  border: 0.1rem solid #000;
  border-radius: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: 10.6rem;
  justify-content: center;
  max-width: 29.8rem;
  transition: 0.3s;
}

.storeCard:hover {
  background: var(--color-orange);
  color: #fff;
  opacity: 1;
}

.storeCard__name {
  font-weight: 700;
  line-height: 1.625;
}

.storeCard__number {
  align-items: center;
  display: flex;
  font-family: 'Rowdies', sans-serif;
  font-size: 2.4rem;
  gap: 1.2rem;
  line-height: 1.08;
  padding-left: 2.2rem;
  position: relative;
}

.storeCard__number::before {
  background-image: url(../img/common/phone_black.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 2rem;
  left: 0;
  position: absolute;
  top: 0.2rem;
  width: 1.2rem;
}

.storeCard:hover .storeCard__number::before {
  background-image: url(../img/common/phone_white.svg);
}

@media screen and (min-width: 768px) {
  .webSteps.swiper-wrapper {
    display: grid;
    gap: 2.8rem;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    transform: unset !important;
  }

  .swiper.webSteps__swiper {
    overflow: visible;
  }

  .webSteps__item.swiper-slide {
    max-width: 21.8rem;
  }
}

@media screen and (max-width: 767px) {
  .step__label {
    border-radius: 3.3333vw;
    font-size: 4.2667vw;
    height: 7.6vw;
    left: 0;
    position: absolute;
    top: -3.7vw;
    width: 19.2vw;
  }

  .step__label .large {
    font-size: 5.2vw;
    margin-left: 0;
    margin-top: 0;
  }

  .step1__tabGroup {
    gap: 5.6vw;
    margin-top: 9.6vw;
  }

  .step1__tab {
    border-radius: 2.6667vw 2.6667vw 0 0;
    border-width: 0.2667vw;
    font-size: 3.7333vw;
    height: 15.3333vw;
    line-height: 1.3;
    text-align: center;
    width: 34.9333vw;
  }

  .step1__group {
    padding-top: 10vw;
  }

  .step1__subtitle {
    font-size: 4.2667vw;
    text-align: start;
  }

  .step1__checkList {
    gap: 2.1333vw;
    margin-top: 4.2667vw;
  }

  .step1__checkitem {
    font-size: 3.7333vw;
    font-weight: 500;
    gap: 3.2vw;
    grid-template-columns: 3.7333vw 1fr;
  }

  .step1__group:has(.swiper) {
    padding-top: 20.2667vw;
  }

  .step1__checkIcon {
    transform: translateY(-0.1333vw);
  }

  .region__olist {
    gap: 7.2vw 4vw;
    grid-template-columns: 1fr 1fr;
    margin: 10vw auto 0;
    max-width: 88.5333vw;
  }

  .region__item--span3 {
    grid-column: span 2;
  }

  .region__heading {
    font-size: 4.2667vw;
    gap: 2.1333vw;
    height: 10vw;
    padding: 0 2.4vw;
  }

  .region__heading .dot {
    height: 2.4vw;
    width: 2.4vw;
  }

  .region__headingText {
    margin-top: 0.1333vw;
  }

  .webSteps__controls {
    display: flex;
    gap: 5.3333vw;
    opacity: 1;
    right: 0;
    top: -12.5vw;
  }

  .region__item--span3 .region__ulist {
    grid-template-columns: 1fr 1fr;
  }

  .region__ulist {
    gap: 0.5333vw;
    margin-top: 4.2667vw;
  }

  .storeCard {
    border-radius: 1.3vw;
    border-width: 0.2667vw;
    gap: 0.4vw;
    height: 21.3333vw;
    max-width: 44vw;
  }

  .webSteps__swiper {
    overflow: visible;
  }

  .webSteps__swiperPrev,
  .webSteps__swiperNext {
    background: url(../img/common/arrow_swiper.svg) no-repeat center / cover;
    display: block;
    height: 5.8vw;
    width: 3.4667vw;
  }

  .storeCard__name {
    font-size: 3.2vw;
  }

  .storeCard__number {
    font-size: 4.8vw;
    gap: 2.1333vw;
    padding-left: 4vw;
  }

  .storeCard__number::before {
    height: 3.8667vw;
    width: 2.5333vw;
  }

  .webSteps__swiperNext {
    transform: scaleX(-1);
  }

  .webSteps__figure {
    gap: 4.8vw;
    grid-template-rows: auto 10vw auto;
    height: unset;
  }

  .webSteps__label {
    border-radius: 0.6667vw;
    font-size: 3.7333vw;
    height: 8.8vw;
    width: 25.8667vw;
  }

  .webSteps__figcaption {
    font-size: 3.7333vw;
    margin: 0;
  }

  .webSteps__box.box1 {
    aspect-ratio: 56 / 34;
    display: block;
    height: auto;
    left: 4%;
    top: 44%;
    width: 92%;
  }

  .webSteps__box.box2 {
    aspect-ratio: 8.1 / 6;
    display: block;
    height: auto;
    left: 19.2%;
    top: 12.6%;
    width: 13%;
  }

  .webSteps__box.box3 {
    aspect-ratio: 16.7 / 27.1;
    display: block;
    height: auto;
    left: 29.5%;
    top: 30.9%;
    width: 27.1%;
  }

  .webSteps__box.box4 {
    aspect-ratio: 55.9 / 6.6;
    display: block;
    height: auto;
    left: 5%;
    top: 48.2%;
    width: 90%;
  }

  .webSteps__box.box5 {
    aspect-ratio: 60.4 / 38.1;
    display: block;
    height: auto;
    left: 1.3%;
    top: 56.5%;
    width: 97.5%;
  }

  .webSteps__highlight {
    font-size: 3.3333vw;
    height: 6.6667vw;
    width: 6.6667vw;
  }

  .webSteps__disclaimer {
    font-size: 3.7333vw;
    left: 0;
    margin: 4vw auto 0;
    position: relative;
    top: 0;
    width: 70vw;
  }

  .webSteps__link {
    gap: 2.1333vw;
    height: 12.9333vw;
    margin: 5.3333vw auto 0;
    width: 64.8vw;
    z-index: 1;
  }

  .webSteps__linkIcon {
    max-width: 5.8667vw;
  }

  .webSteps__linkText {
    font-size: 3.4667vw;
  }
}

/* [ブロック] ニュースページ用タブリスト
------------------------------------------------- */
.tab_list {
  font-size: 1.8rem;
  column-gap: 0.2rem;
}
.tab_list__item {
  flex: 1;
}
.tab_list__item_link {
  display: block;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 0.27777778em;
  padding-block: 1.3em;
  transition: background-color 0.3s, color 0.3s;
  line-height: 1;
  &:hover {
    @media (hover: hover) {
      opacity: 1;
      background-color: #000;
      color: #fff;
    }
  }
  &:where(.--current *) {
    background-color: #000;
    color: #fff;
  }
}
@media screen and (max-width: 767px) {
  .tab_list {
    gap: 1.2vw 0;
  }
  .tab_list__item {
    flex: inherit;
  }
  .tab_list__item_link {
    font-size: 1.4rem;
    padding-block: 0.7em;
    border-radius: 0.5rem;
  }
}

/* [ブロック] ページネーション
------------------------------------------------- */
.pager {
  justify-content: center;
  font-size: 1.968rem;
  .pagiNation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1em;
  }
  .pre,
  .next {
    display: none;
  }
  a {
    color: #eb610f;
    background-color: #fff;
    aspect-ratio: 1/1;
    width: 3em;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #eb610f;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 700;
    &:where(.active) {
      background-color: #eb610f;
      color: #fff;
    }
    &:hover {
      @media (hover: hover) {
        background-color: #eb610f;
        color: #fff;
        opacity: 1;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .pager {
    font-size: 1.2rem;
    .pagiNation {
      gap: 1.2em;
    }
    a {
      border-width: 1px;
    }
  }
}

/* [ブロック] ニュースブロック
------------------------------------------------- */
#news {
  .bg {
    ul.tab {
      padding-bottom: 3rem;
      margin-bottom: 3rem;
      border-bottom: 1px solid #a1a0a0;
      li {
        width: 19.7%;
        a {
          display: block;
          background-color: #fff;
          border-radius: 0.5em;
          font-size: 1.8rem;
          padding: 1em 0;
          text-align: center;
          transition-duration: 0.3s;
          &:hover,
          &:where(.tab li.is-active &) {
            opacity: 1;
            background-color: #000;
            color: #fff;
          }
        }
      }
    }
    ul.news_list {
      width: 50%;
      margin-left: 50%;
      border-left: 1px solid #a1a0a0;
      position: relative;
      /* タブ切り替え用スタイル */
      &:not(.is-active) {
        display: none;
      }
      &.is-active {
        display: block;
      }
      li {
        .scaleUpImgHover {
          width: 39.635%;
          min-width: 39.635%;
          margin-right: 6%;
          border-radius: 1.5rem;
          img {
            &:where(.news_list .pc_display &) {
              aspect-ratio: 1 / 1;
              height: auto;
              width: 100%;
            }
          }
        }
        .permanent_link {
          padding: 3% 5%;
          display: flex;
          border-bottom: 1px solid #a1a0a0;
          align-items: flex-start;
          .permanent_link__content {
            .date {
              p {
                font-size: 2rem;
                font-family: 'Rowdies', sans-serif;
                font-weight: 300;
                font-style: normal;
                margin-bottom: 0.3em;
                margin-top: 0.8em;
                color: #000;
              }
              .news_list__category {
                font-size: 1.2rem;
                padding: 0.2em 0;
                background-color: #fff;
                display: inline-block;
                width: 10.5em;
                border-radius: 1em;
                border-top-left-radius: 0;
                box-sizing: border-box;
                padding-left: 1.5em;
                position: relative;
                color: #000;
                margin-bottom: 1em;

                /* カテゴリ別背景色 */
                &:before {
                  content: '';
                  position: absolute;
                  width: 0.6em;
                  height: 0.6em;
                  background-color: #424bc5;
                  border-radius: 50%;
                  top: 50%;
                  left: 0.5em;
                  margin-top: -0.35em;
                }
                &.event:before {
                  background-color: #268360;
                }
                &.calendar:before {
                  background-color: #424bc5;
                }
                &.substitute:before {
                  background-color: #ff658b;
                }
                &.columnlist:before {
                  background-color: #f8c616;
                }
              }
            }
          }
        }
      }
      li:last-child {
        border-bottom: none;
        padding: 5% 5% 8%;
        .btns {
          position: absolute;
          left: -100%;
          display: flex;
          width: 90%;
          @media screen and (min-width: 768px) {
            &:where(.ikebukuro &) {
              margin-top: 2rem;
            }
          }
          p {
            width: 49%;
            margin-right: 1%;
          }
          img {
            width: auto;
            min-width: inherit;
            margin-right: 0;
          }
          .buttonIcon {
            width: 100%;
          }
          .buttonIcon__icon {
            height: 2.5em;
          }
          .buttonIcon__arrow {
            width: 1.1em;
          }
        }
      }
    }
    @media screen and (min-width: 768px) {
      ul.news_list {
        li:first-child {
          .permanent_link {
            position: absolute;
            left: -100%;
            display: block;
            border-bottom: none;
            padding-left: 0px;
            padding-right: 0px;
            width: 90%;
            .scaleUpImgHover {
              width: 100%;
            }
            img {
              width: 100%;
              border-radius: 3rem;
            }
            .permanent_link__content {
              padding: 0 5%;
              .date {
                display: flex;
                align-items: flex-end;
                p {
                  margin-right: 1em;
                }
              }
            }
          }
        }
      }
    }
    @media screen and (max-width: 767px) {
      ul.tab {
        padding-bottom: 2rem;
        margin-bottom: 0rem;
        li {
          width: 32.5%;
          margin-bottom: 2vw;
          a {
            font-size: 1.4rem;
            padding: 0.7em 0;
          }
          &:nth-of-type(4),
          &:nth-of-type(5) {
            width: 49.1%;
          }
        }
      }
      ul.news_list {
        width: 100%;
        margin-left: 0px;
        border-left: none;
        li {
          .permanent_link {
            padding: 5% 0;
            align-items: flex-start;
            .permanent_link__content {
              font-size: 1.4rem;
              .date {
                p {
                  font-size: 1.6rem;
                  margin-top: 0.5em;
                }
                .news_list__category {
                  font-size: 1rem;
                }
              }
            }
            .scaleUpImgHover {
              border-radius: 1rem;
            }
          }
        }
        li:last-child {
          display: block;
          padding: 8% 0 15%;
          .btns {
            position: relative;
            left: auto;
            width: 100%;
          }
        }
        .common_btn {
          a {
            margin: 2.5em auto 0;
          }
        }
      }
    }
  }
}

/* [ブロック] インストラクタースライダー
------------------------------------------------- */
.gridBox__swiper {
  max-width: 100%;
  overflow-x: hidden;
  padding-bottom: 8rem;
  width: 100%;
  .instructor-scrollbar {
    background: linear-gradient(to bottom, #323232, #383738);
    height: 1rem;
  }

  a {
    display: block;
    position: relative;
    text-align: center;
    &:hover {
      opacity: 1;
    }
  }

  img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: auto;
  }

  p {
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    transition-duration: 0.3s;
    span {
      font-size: 0.8em;
    }
    @media (hover: hover) {
      &:where(.gridBox__swiper a:hover &) {
        opacity: 1;
      }
    }
  }
  @media screen and (max-width: 767px) {
    padding-bottom: 7vw;
    .instructor-scrollbar {
      height: 1vw;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }
  }
}

.instructor-scrollbar .swiper-scrollbar-drag {
  background: #d0cecd;
}