/* ============================================================
   mv
   ============================================================ */
.mv {
  position: relative;
  z-index: 0;
  /* margin-top: var(--header-height, 80px); */

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/mv_bg.png) no-repeat center center / cover;
    z-index: -1;
  }
}

.mv__photos {
  position: absolute;
  top: 0;
  right: -354px;
  bottom: 0;
  overflow-y: clip;
  z-index: -1;
}

.mv__photos-inner {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: min(100%, 1040px);
  height: 180%;
  transform: rotate(30deg);
  transform-origin: right top;
  margin-top: -10%;
}

.mv__photos-row {
  display: flex;
  flex-direction: column;
}

.mv__photos-track {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  animation: mv-slide-up 60s linear infinite;
}

.mv__photos-row:nth-of-type(3) .mv__photos-track {
  animation-duration: 40s;
}

.mv__photos-row--reverse .mv__photos-track {
  animation-name: mv-slide-down;
}

.mv__photos-item {
  flex-shrink: 0;
  width: clamp(200px, calc(280 / 1440 * 100vw), 280px);
  border-radius: 20px;
  margin-bottom: 16px;
}

.mv__photos-item img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

@keyframes mv-slide-up {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes mv-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mv__photos-track {
    animation-play-state: paused;
  }
}

.mv__inner {
  position: relative;
  width: max(1040px, 100%);
}

.mv__body {

}

.mv__content {
  padding: 57px 0 0 clamp(60px, calc(100 / 1440 * 100vw), 100px);
  max-width: 1440px;
  margin-inline: auto;
}

.mv__ttl {
  position: relative;
  font-size: clamp(48px, calc(52 / 1440 * 100vw), 52px);
  line-height: 1.38;
  margin: 0;
  width: fit-content;
  text-shadow: 0px 0px 10px #FFFFFF;

  &::before {
    position: absolute;
    top: -34px;
    left: -172px;
    content: "";
    background: url(../images/mv_flower.png) no-repeat left top / contain;
    width: 177px;
    height: 151px;
    z-index: 1;
  }

  &::after {
    position: absolute;
    content: "";
    background: url(../images/mv_leaf.png) no-repeat center / contain;
    width: 29px;
    height: 68px;
    bottom: 0;
    right: -17px;
  }
}

.mv__lead {
  font-size: clamp(12px, calc(14 / 1440 * 100vw), 14px);
  line-height: 1.85;
  margin: clamp(24px, calc(30 / 1440 * 100vw), 30px) 0 0;
  text-shadow: 0px 0px 10px #FFFFFF;
}

.mv__sub {
  font-size: clamp(16px, calc(18 / 1440 * 100vw), 18px);
  line-height: 1.55;
  margin: clamp(20px, calc(27 / 1440 * 100vw), 27px) 0 0;
  text-shadow: 0px 0px 10px #FFFFFF;
}

.mv__content-bottom {
  margin-top: clamp(28px, calc(36 / 1440 * 100vw), 36px);
}

.mv__classrooms {
  width: fit-content;
}

.mv__classrooms-badge {
  position: relative;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-full);
  text-align: center;
  padding: 13px 50px;
  margin: 0;

  &::before {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    translate: -50% 0;
    content: "";
    background: var(--color-primary);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    width: 20px;
    height: 17px;
  }
}

.mv__classrooms-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.mv__classroom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 23px 14px;
  border-radius: 10px;
  text-align: center;
}

.mv__classroom--sunaoka {
  background: #E6F3FF;
  border: 4px solid #ADD2F5;

  & .mv__classroom-name {
    color: #2289BC;
  }
}

.mv__classroom--midorimachi {
  background: #E9F2E6;
  border: 4px solid #C9E3C0;

  & .mv__classroom-name {
    color: #438B2B;
  }
}

.mv__classroom-name {
  line-height: 1;
  margin: 0;
}

.mv__classroom-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  margin: 20px 0 0;
  white-space: nowrap;
}

.mv__classroom-schedule-time {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.mv__news {
  margin-top: 30px;
}

.mv__news-link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 20px;
  align-items: center;
  width: 560px;
  background: var(--color-white);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 0px 10px #0000001A;
}

.mv__news-label {
  font-size: 12px;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: 6px;
  padding: 20px 16px;
  margin: 0;
}

.mv__news-ttl {
  color: var(--color-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (min-width: 1441px) {
  .mv {
    position: relative;
    z-index: 0;
    margin-top: var(--header-height, 80px);

    &::before {
      left: unset;
      right: calc(50% + 613px);
    }
  }

  .mv__photos {
    right: unset;
    left: calc(50% + 194px);
  }

  .mv__circle-badge {
    right: unset;
    left: calc(50% + 325px);
  }
}

@media screen and (max-width: 767px) {
  .mv {
    &::after {
      top: 400px;
      left: 50%;
      translate: -50% 0;
      width: 100%;
      height: auto;
      aspect-ratio: 375 / 200;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.85) 60%,
        #fdfeff 100%
      );
    }
  }

  .mv__photos {
    top: 265px;
    left: calc(50% + 130px);
    translate: -50% 0;
    right: unset;
    height: 320px;
    transform-origin: unset;
  }

  .mv__photos-inner {
    width: 100%;
    height: 100%;
    gap: 10px;
  }

  .mv__photos-item {
    width: calc(112 / 375 * 100vw);
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .mv__photos-item img {
    border-radius: 10px;
  }

  .mv__inner {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .mv__body {
  }
  
  .mv__content {
    display: grid;
    grid-template-areas: "head" "news" "bottom";
    padding: 46px 20px 40px;
  }
  
  .mv__content-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mv__ttl {
    font-size: 32px;
    line-height: 1.25;
    text-align: center;

    &::before {
      top: -47px;
      left: -142px;
      z-index: 1;
    }

    &::after {
      right: -40px;
      bottom: -77px;
    }
  }

  .mv__lead {
    font-size: 11px;
    margin-top: 12px;
    text-align: center;
  }

  .mv__sub {
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
  }

  .mv__content-bottom-wrap {
    margin-top: 310px;
  }

  .mv__content-bottom {
    grid-area: bottom;
    flex-direction: column;
    align-self: start;
    gap: 24px;
    width: 100%;
    margin-top: 10px;
  }

  .mv__classrooms {
    width: 100%;
  }

  .mv__classrooms-badge {
    width: min(100%, 330px);
    font-size: 12px;
    padding: 9px 30px;
    margin-inline: auto;
  }

  .mv__classrooms-cards {
    gap: 5px;
    width: 100%;
    grid-template-columns: 50% 50%;
  }

  .mv__classroom {
    padding: 18px;
    flex: 1;
  }

  .mv__classroom-name {
    font-size: 14px;
  }

  .mv__classroom-schedule {
    font-size: 12px;
    margin-top: 10px;
  }

  .mv__news {
    grid-area: news;
  }

  .mv__news-link {
    width: min(100%, 560px);
    grid-template-areas: "label label" "date ttl";
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
  }

  .mv__news-label {
    grid-area: label;
    font-size: 11px;
    border-radius: 4px;
    padding: 14px 15px;
    width: fit-content;
  }

  .mv__news-date {
    grid-area: date;
    font-size: 13px;
  }

  .mv__news-ttl {
    grid-area: ttl;
    font-size: 14px;
  }
}

@media screen and (600px <= width <= 767px) {
  .mv__photos {
    left: calc(50% + 170px);
  }
}


/* ============================================================
   worries-effect block
   ============================================================ */
.worries-effect-block {
  position: relative;
  margin-bottom: -240px;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/worries_bg.webp) no-repeat center center / cover;
    z-index: -1;
  }
}

@media screen and (max-width: 767px) {
  .worries-effect-block {
    margin-bottom: -360px;
  }
}

/* ============================================================
   worries section
   ============================================================ */
.worries {
  position: relative;
}

.worries__inner {
  padding-bottom: 60px;
}

.worries__content {
  padding: 0;
}

.worries__ttl {
  position: relative;
  color: var(--color-primary);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;
  text-align: center;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_brown.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.worries__list {
  gap: 10px;
  margin-top: 32px;
}

.worries__item {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 10px;
  padding: 15px 20px;
  width: 340px;

  &::before {
    content: "";
    background: url(../images/checkbox_circle.svg) no-repeat center center / cover;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  &:nth-of-type(4),
  &:nth-of-type(5) {
    flex: 1;
  }
}

.worries__text {
  position: relative;
  font-size: 18px;
  line-height: 1.44;
  margin: 0;
  text-decoration: underline;
  text-underline-offset: -1px;
  text-decoration-thickness: 8px;
  text-decoration-color: #E6F3FF;
  text-decoration-skip-ink: none;
  z-index: 1;
}

.worries__text span {
  color: var(--color-primary);
}

@media screen and (max-width: 767px) {
  .worries {
  }

  .worries__inner {
    padding-bottom: 60px;
  }

  .worries__content {
    padding: 0 20px;
  }

  .worries__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding-bottom: 24px;
  }

  .worries__list {
    flex-direction: column;
    align-items: center;
  }

  .worries__item {
    width: min(100%, 400px);
    justify-content: flex-start;
    gap: 12px;
    padding: 15px 16px;

    &::before {
      width: 24px;
      height: 24px;
    }

    &:nth-of-type(4),
    &:nth-of-type(5) {
      flex: unset;
    }
  }

  .worries__text {
    font-size: 16px;
  }

  .worries__catch-sub {
    font-size: 18px;
  }

  .worries__catch-ttl {
    font-size: 30px;
  }
}

/* ============================================================
   effect
   ============================================================ */
.effect {
  z-index: 1;
}

.effect__inner {
  padding: 0 0 100px;
}

.effect__ttl {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.effect__ttl-sub {
  font-size: 22px;
  line-height: 1;
  margin: 0;
}

.effect__ttl-large {
  font-size: 42px;
  line-height: 1.42;
  color: var(--color-primary);
  margin: 24px 0 0;
}

.effect__content {
  display: flex;
  flex-direction: column;
  padding: 65px 0 80px;
  position: relative;
  width: clamp(1040px, 100%, 1340px);
  margin: 60px auto 0;
  aspect-ratio: 1340 / 481;
  z-index: 1;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/effect_bg.svg) no-repeat center center / contain;
    z-index: -1;
  }

  &::after {
    position: absolute;
    top: calc(100% - 45px);
    right: 90px;
    content: "";
    background: url(../images/effect_image_03.png) no-repeat center bottom / contain;
    width: 137px;
    height: 162px;
    z-index: 1;
  }
}

.effect__head-ttl {
  position: relative;
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
  margin: 0;

  &::before {
    position: absolute;
    top: 50%;
    left: 85px;
    translate: 0 -50%;
    content: "";
    background: url(../images/effect_image_01.png) no-repeat center center / contain;
    width: 115px;
    height: 148px;
  }

  &::after {
    position: absolute;
    top: 50%;
    right: 92px;
    translate: 0 -50%;
    content: "";
    background: url(../images/effect_image_02.png) no-repeat center center / contain;
    width: 158px;
    height: 104px;
  }
}

.effect__head-ttl span {
  font-size: 48px;
  line-height: 1;
  margin-top: 17px;
  display: inline-block;
}

.effect__list {
  display: flex;
  margin: 90px auto 0;
  max-width: 1080px;
}

.effect__item {
  flex: 1;
  padding: 0 40px;
  border-left: 2px dashed #D1D1D1;

  &:first-child {
    border-left: none;
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
}

.effect__item-ttl {
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}

.effect__item-text {
  font-size: 16px;
  line-height: 1.875;
  color: var(--color-text);
  margin: 28px 0 0;
}

@media screen and (max-width: 767px) {
  .effect {
  }

  .effect__inner {
    padding: 0 0 60px;
  }

  .effect__ttl {
  }

  .effect__ttl-sub {
    font-size: 18px;
  }

  .effect__ttl-large {
    font-size: 30px;
  }

  .effect__content {
    width: min(calc(100% - 20px), 600px);
    background: var(--color-white);
    padding: 60px 20px;
    margin-top: 32px;
    border: 5px solid #ffe483;
    border-radius: 20px;

    &::before {
      background: url(../images/bg_no_border_sp.svg) no-repeat center center / cover;
      border-radius: 20px;
    }

    &::after {
      top: calc(100% - 50px);
      right: 2%;
      width: 80px;
      height: auto;
      aspect-ratio: 137 / 162;
    }
  }

  .effect__head-ttl {
    font-size: 18px;

    &::before {
      top: -73px;
      left: unset;
      right: calc(50% + 100px);
      width: 50px;
      height: auto;
      aspect-ratio: 115 / 148;
      translate: 0;
    }

    &::after {
      top: 78px;
      right: unset;
      left: calc(50% + 95px);
      width: 70px;
      height: auto;
      aspect-ratio: 158 / 104;
      translate: 0;
    }

    & span {
      font-size: 32px;
      margin-top: 12px;
      line-height: 1.5;
    }
  }

  .effect__list {
    flex-direction: column;
    max-width: 600px;
    margin: 32px auto 0;
  }

  .effect__item {
    display: flex;
    gap: 12px;
    border-left: none;
    border-bottom: 2px dashed #D1D1D1;
    padding: 20px 0;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .effect__item-ttl {
    font-size: 20px;
    line-height: 1.3;
    min-width: 80px;
    text-align: left;
  }

  .effect__item-text {
    font-size: 14px;
    margin: 0;
    flex: 1;
  }
}

/* ============================================================
   reason
   ============================================================ */
.reason {
  position: relative;
  background: var(--color-primary);
  z-index: 0;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/block_bg_01.svg) no-repeat left top / auto;
    z-index: -1;
    margin-top: 269px;
    margin-left: 20px;
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/block_bg_02.svg) no-repeat right bottom / auto;
    z-index: -1;
    margin-right: 20px;
    margin-bottom: 100px;
  }
}

.reason__inner {
  padding: 229px 0 200px;
}

.reason__ttl {
  position: relative;
  color: var(--color-white);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_yellow.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.reason__list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 35px;
  margin-top: 48px;
  justify-content: center;
}

.reason__item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  width: calc((100% - 70px) / 3);
}

.reason__item-img {
  position: relative;
}

.reason__item-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 330 / 220;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.reason__item-label {
  position: absolute;
  top: -12px;
  left: -19px;
  width: 107px;
  height: 91px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 36px;
  line-height: 1;
  margin: 0;
  z-index: 1;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/reason_label.svg) no-repeat center center / contain;
    z-index: -1;
  }
}

.reason__item-label span {
  font-size: 14px;
  font-family: var(--font-base);
  line-height: 1;
  margin-top: 10px;
}

.reason__item-body {
  padding: 24px 20px 32px;
}

.reason__item-ttl {
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-primary);
  text-align: center;
  margin: 0 0 16px;
}

.reason__item-text {
  font-size: 14px;
  line-height: 1.875;
  color: var(--color-text);
  margin: 0;
}

@media screen and (max-width: 767px) {
  .reason {
    &::before {
      background-size: 40%;
      margin-top: 340px;
    }

    &::after {
      background-size: 40%;
    }
  }

  .reason__inner {
    padding: 380px 0 160px;
  }

  .reason__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding-bottom: 24px;
  }

  .reason__list {
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
  }

  .reason__item {
    width: min(100%, 330px);
    margin-inline: auto;
  }

  .reason__item-label {
    font-size: 28px;
    top: -10px;
    left: -8px;
    width: 80px;
    height: auto;
    aspect-ratio: 107 / 91;

    & span {
      font-size: 13px;
    }
  }
}

/* ============================================================
   insta-news-block
   ============================================================ */
.insta-news-block {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: 40px;
  margin-top: -80px;
  overflow: hidden;

  &::before {
    position: absolute;
    top: -66px;
    right: -60px;
    width: 396px;
    height: 393px;
    content: "";
    background: url(../images/insta_bg_01.png) no-repeat right top / contain;
    z-index: -1;
  }

  &::after {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 396px;
    height: 393px;
    content: "";
    background: url(../images/insta_bg_02.png) no-repeat left bottom / contain;
  }
}

.insta-news-block__inner {

}

@media screen and (768px <= width <= 1240px) {
  .insta-news-block {
    &::before {
      width: calc(396 / 1440 * 100%);
      height: auto;
      aspect-ratio: 396 / 393;
    }

    &::after {
      width: calc(396 / 1440 * 100%);
      height: auto;
      aspect-ratio: 396 / 393;
    }
  }
}

@media screen and (max-width: 767px) {
  .insta-news-block {
    border-radius: 20px;

    &::before {
      top: -39px;
      right: -27px;
      width: calc(237 / 375 * 100%);
      height: auto;
      aspect-ratio: 396 / 393;
    }

    &::after {
      display: none;
    }
  }
}

/* ============================================================
   insta
   ============================================================ */

.insta__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.insta__ttl {
  font-family: var(--font-en);
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0;
}

.insta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  text-decoration: underline !important;
}

.insta__feed {
  margin-top: 32px;
}

@media screen and (max-width: 767px) {
  .insta__content {
    max-width: 600px;
    margin-inline: auto;
  }

  .insta__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .insta__ttl {
    font-size: 40px;
  }
}

/* ============================================================
   news
   ============================================================ */
.news {
}

.news__inner {
  padding: 100px 0 0;
}

.news__content {
  display: flex;
  gap: 120px;
  justify-content: space-between;
}

.news__ttl {
  font-family: var(--font-en);
  font-size: 48px;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0;
  text-transform: uppercase;
}

.news__sub {
  font-family: var(--font-sub);
  line-height: 1;
  margin: 5px 0 0;
}

@media screen and (max-width: 767px) {
  .news {

  }

  .news__inner {
    padding: 60px 0 0;
  }

  .news__content {
    flex-direction: column;
    gap: 32px;
    max-width: 600px;
    margin-inline: auto;
  }

  .news__sub {
    font-size: 16px;
  }

  .news__ttl {
    font-size: 40px;
  }
}


/* ============================================================
   select-loop-block
   ============================================================ */
.select-loop-block {
  position: relative;
  margin-top: -80px;
}

/* ============================================================
   select
   ============================================================ */
.select {
  background: var(--color-primary);
}

.select__inner {
  padding: 180px 0 336px;
}

.select__content {
  width: 1120px;
  padding: 0 40px;
}

.select__ttl {
  position: relative;
  color: var(--color-white);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;
  text-align: center;
  margin: 0;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_yellow.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.select__classrooms {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "sunaoka center midorimachi";
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}

.select__card {
  display: flex;
  align-items: center;
  gap: 24px;
  border-radius: 10px;
  padding: 38px 30px;
  min-height: 180px;
}

.select__card--sunaoka {
  grid-area: sunaoka;
  background: #E6F3FF;
  border: 4px solid #ADD2F5;
}

.select__card--midorimachi {
  grid-area: midorimachi;
  background: #E9F2E6;
  border: 4px solid #C9E3C0;
}

.select__card-name {
  position: relative;
  font-size: 22px;
  line-height: 1;
  padding-left: 32px;
  white-space: nowrap;
  margin: 0;

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    content: "";
    background: url(../images/map_pin_blue.svg) no-repeat center center / contain;
    width: 22px;
    height: 26px;
  }
}

.select__card--sunaoka .select__card-name {
  color: #2289BC;
}

.select__card--midorimachi .select__card-name {
  color: #438B2B;

  &::before {
    background-image: url(../images/map_pin_green.svg);
  }
}

.select__card-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
  margin: 0;
  white-space: nowrap;
}

.select__card-schedule--midorimachi {
  gap: 12px;
}

.select__card-schedule-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.select__center {
  position: relative;
  grid-area: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(15, 74, 134, 0.2);
  border-radius: 50%;
  width: 300px;
  height: 300px;
  padding: 24px;
  flex-shrink: 0;
  font-family: var(--font-sub);

  &::before {
    position: absolute;
    inset: 27px;
    content: "";
    background: rgba(15, 74, 134, 0.2);
    border-radius: 50%;
  }
}

.select__center-ttl {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  margin: 0;
  z-index: 1;

  & span {
    font-size: 26px;
    line-height: 1;
    color: #FFDC8E;
  }
}

.select__center-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 27px 0 0;
  z-index: 1;
}

.select__center-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);

  &::before {
    content: "";
    background: url(../images/checkbox_circle.svg) no-repeat center center / cover;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
}

.select__catch {
  margin-top: 56px;
  text-align: center;
  color: var(--color-white);
}

.select__catch-ttl {
  font-size: 36px;
  line-height: 1;
  margin: 0;
}

.select__catch-text {
  line-height: 1.875;
  margin: 32px 0 0;
}

.select__btns {
  display: flex;
  gap: 25px;
  margin-top: 45px;
}

.select__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex: 1;
  height: 80px;
}

.select__btn--trial {
  background: var(--color-white);

  & span {
    color: var(--color-primary);
    font-size: 20px;
  }
}

.select__btn--tel {
  background: var(--color-white);
  flex-direction: column;
  gap: 4px;
}

.select__btn-tel-label {
  font-size: 12px;
  line-height: 1;
}

.select__btn-tel-num {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 22px;
  line-height: 1.36;
  font-family: var(--font-en);
}

.select__btn--line {
  background: var(--color-line);
  gap: 10px;

  & span {
    color: var(--color-white);
    font-size: 20px;
    text-transform: uppercase;
  }
}

@media screen and (max-width: 767px) {
  .select__inner {
    padding: 140px 0 240px;
  }

  .select__content {
    width: 100%;
    padding: 0 20px;
  }

  .select__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding: 0 20px 24px;
  }

  .select__classrooms {
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "sunaoka"
      "midorimachi";
    gap: 20px;
    margin-top: 32px;
  }

  .select__card {
    min-height: 136px;
  }

  .select__card-name {
    font-size: 18px;
  }

  .select__card-schedule {
    font-size: 16px;
  }

  .select__center {
    margin-inline: auto;
  }

  .select__center-ttl {
    & span {
      font-size: 20px;
    }
  }

  .select__center-list {
    margin-top: 20px;
  }

  .select__center-item {
    font-size: 16px;
    gap: 6px;
  }

  .select__card {
    width: min(100%, 330px);
    padding: 20px 16px;
    margin-inline: auto;
  }

  .select__catch {
    margin-top: 48px;
    padding: 0 20px;
  }

  .select__catch-ttl {
    font-size: 24px;
    line-height: 1.5;
  }

  .select__catch-text {
    font-size: 14px;
    margin-top: 20px;
  }

  .select__btns {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
  }

  .select__btn {
    width: min(100%, 300px);
    height: 64px;
    flex: unset;
  }
}

/* ============================================================
   loop
   ============================================================ */
.loop__slide-block {
  position: absolute;
  bottom: 0;
  translate: 0 calc(50% - 30px);
  z-index: 1;
  overflow: hidden;
}

.loop__slide-wrap {
  display: flex;
}

.loop__slider {
  display: flex;
  flex-shrink: 0;
  animation: horizontal-animation 40s linear infinite;
}

.loop__slide {
  width: 580px;
  height: 435px;
  margin: 0 40px 60px 0;
  flex-shrink: 0;

  & img {
    border-radius: 20px;
  }
}

.loop__slide--small {
  width: 370px;
  height: 370px;
  margin: auto 40px 0 0;
}

@keyframes horizontal-animation {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 767px) {
  .loop__slide {
    width: 348px;
    height: 261px;
    margin: 0 12px 30px 0;

    & img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }

  .loop__slide--small {
    width: 222px;
    height: 222px;
    margin: auto 12px 0 0;
  }
}

/* voice-message block */
.voice-message-block {
  position: relative;
  background: #F7FBFF;
  z-index: 0;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/voice_message_bg.webp) no-repeat center center / cover;
    z-index: -1;
  }
}

/* ============================================================
   voice
   ============================================================ */
.voice {

}

.voice__inner {
  padding: 279px 0 50px;
}

.voice__ttl {
  position: relative;
  color: var(--color-primary);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_brown.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.voice__list {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 60px;
}

.voice__item {
  flex: 1;
  position: relative;
  padding: 40px;
  display: flex;
  flex-direction: column;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/voice_card_bg.png) no-repeat center center / contain;
    z-index: -1;
  }
}

.voice__item-ttl {
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-primary);
  margin: 0;
}

.voice__item-text {
  font-size: 18px;
  line-height: 1.89;
  margin: 30px 0 0;
}

.voice__item-name {
  line-height: 1;
  text-align: right;
  margin: 20px 0 0;
}

@media screen and (max-width: 767px) {
  .voice__inner {
    padding: 160px 0 60px;
  }

  .voice__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding-bottom: 24px;
  }

  .voice__list {
    flex-direction: column;
    gap: 16px;
    width: min(100%, 340px);
    margin: 32px auto 0;
  }

  .voice__item {
    flex: unset;
    padding: 32px;
    width: 100%;
    aspect-ratio: 340 / 269;

    &::before {
      background: url(../images/voice_card_bg_sp.png) no-repeat center center / contain;
    }
  }

  .voice__item-ttl {
  }

  .voice__item-text {
    font-size: 16px;
    margin-top: 24px;
  }

  .voice__item-name {
    font-size: 14px;
    margin-top: 16px;
  }
}

/* ============================================================
   message
   ============================================================ */
.message {
}

.message__inner {
  padding: 88px 0 224px;
}

.message__content {
  position: relative;
  text-align: center;
  padding: 0 120px;

  &::before {
    position: absolute;
    content: "";
    background: url(../images/message_flower_01.png) no-repeat right top / contain;
    top: -90px;
    right: 0;
    width: 112px;
    height: 183px;
  }

  &::after {
    position: absolute;
    content: "";
    background: url(../images/message_flower_02.png) no-repeat left bottom / contain;
    left: 0;
    bottom: -90px;
    width: 192px;
    height: 270px;
  }
}

.message__heading {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin-inline: auto;
}

.message__ttl-sub {
  font-family: var(--font-en);
  font-size: 116px;
  line-height: 1;
  color: #EDF4FA;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: -1;
}

.message__ttl {
  font-size: 38px;
  line-height: 1.5;
  color: var(--color-primary);
  margin: -40px 0 0;
  text-align: left;
}

.message__body {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 50px 0 0;
}

.message__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 22px;
  margin: 0;
}

.message__image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message__image {
  width: 240px;
  height: auto;
}

.message__image-caption {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1;
}

.message__image-caption-name {
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .message__inner {
    padding: 60px 20px 120px;
  }

  .message__content {
    padding: 0;
    max-width: 480px;
    margin-inline: auto;

    &::before {
      width: 60px;
      aspect-ratio: 112 / 183;
      right: -12px;
    }

    &::after {
      width: 80px;
      aspect-ratio: 192 / 270;
      left: -12px;
    }
  }

  .message__ttl-sub {
    font-size: 60px;
    top: -32px;
  }

  .message__ttl {
    font-size: 28px;
    margin-top: -24px;
    text-align: center;
  }

  .message__body {
    flex-direction: column-reverse;
    gap: 20px;
    margin-top: 20px;
  }

  .message__text {
    font-size: 14px;
  }

  .message__image-wrap {
  }
}

/* ============================================================
   price-flow-block
   ============================================================ */
.price-flow-block {
  position: relative;
}

/* ============================================================
   price
   ============================================================ */
.price {
  position: relative;
  z-index: 0;
  border-radius: 60px;
  margin-top: -80px;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/price_bg.webp) no-repeat center center / cover;
    border-radius: 60px;
    z-index: -2;
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px) brightness(1.1);
    border-radius: 60px;
    z-index: -1;
  }
}

.price__inner {
  padding: 100px 0 380px;
}

.price__content {
  width: 1080px;
}

.price__ttl {
  position: relative;
  color: var(--color-white);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_yellow.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.price__basic {
  border-radius: 20px;
  overflow: hidden;
  margin-top: 48px;
}

.price__basic-head {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-sub);
  font-size: 22px;
  line-height: 1;
  text-align: center;
  padding: 20px;
  margin: 0;
}

.price__basic-body {
  display: grid;
  grid-template-columns: 1fr min(100%, 470px);
  gap: 40px;
  align-items: center;
  background: var(--color-white);
  padding: 30px 30px 40px;
}

.price__basic-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.price__basic-left-item {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  background: #F7FBFF;
  padding: 24px 30px;
  border-radius: 10px;
}

.price__basic-label {
  font-size: 24px;
  line-height: 1;
  color: var(--color-primary);
  white-space: nowrap;
}

.price__basic-amount {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;

  & span {
    font-size: 32px;
    margin-right: 3px;
  }
}

.price__basic-right {
  margin: 0;

  & > :nth-of-type(2) {
    border-top: none;
  }
}

.price__basic-right-item {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 10px 0;
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
}

.price__basic-key {
  font-size: 18px;
  line-height: 1;
  color: var(--color-primary);
  min-width: 54px;
  white-space: nowrap;
}

.price__basic-detail {
  line-height: 1.875;
  margin: 0;
}

.price__basic-detail-item {
  display: block;
}

.price__basic-detail-sub {
  display: flex;
  white-space: nowrap;
}

.price__basic-detail-sub-item {
  display: flex;
  gap: 10px;
}

.price__sub {
  display: flex;
  gap: 80px;
  justify-content: center;
  margin-top: 40px;
}

.price__extra {
  color: var(--color-white);
}

.price__extra-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price__extra-ttl {
  position: relative;
  font-size: 22px;
  line-height: 1.54;
  padding-inline-start: 40px;
  margin: 0;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    background: #EEBC0A;
    rotate: 45deg;
  }
}

.price__extra-disc {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

.price__extra-item-wrap {
  display: flex;
  align-items: center;
}

.price__extra-item-wrap--type2 {
  flex-direction: column;
  align-items: flex-start;
}


.price__extra-item {
  font-size: 16px;
  line-height: 1;
  margin: 24px 0 0;
}

.price__extra-item-label {

}

.price__extra-item-amount {

  & .large {
    font-size: 20px;
    line-height: 1;
    margin: 0 3px;
  }

  & .slash {
    margin: 0 10px;
  }
}

.price__features {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  padding: 0;
}

.price__feature-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-white);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-primary);
  padding: 24px 10px 12px;
}

@media screen and (max-width: 767px) {
  .price {
    margin-top: 0;
    border-radius: var(--radius-md);

    &::before {
      border-radius: var(--radius-md);
          background: url(../images/price_bg.webp) no-repeat center top / contain;
    }

    &::after {
      border-radius: var(--radius-md);
      background: linear-gradient(to bottom, rgba(0,0,0, 0.5) 0%, #2477CB 35%);
    }
  }

  .price__inner {
    padding: 60px 0 740px;
  }

  .price__content {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .price__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding-bottom: 24px;
  }

  .price__basic {
    margin-top: 32px;
  }

  .price__basic-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .price__basic-left {
    width: 100%;
    /* padding: 16px 20px; */
    gap: 16px;
  }

  .price__basic-label {
    font-size: 20px;
  }

  .price__basic-amount {
    font-size: 16px;

    & span {
      font-size: 24px;
    }
  }

  .price__basic-right {
    flex-wrap: wrap;
    gap: 8px;
  }

  .price__basic-detail {
    font-size: 12px;
  }

  .price__basic-detail-sub-item {
    flex-direction: column;
    gap: 0;
  }

  .price__sub {
    flex-direction: column;
    gap: 32px;
    width: fit-content;
    margin-inline: auto;
  }

  .price__extra-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .price__extra-ttl {
    font-size: 20px;
    padding-inline-start: 32px;
    margin: 0;

    &::before {
      top: calc(50% - 2px);
      width: 16px;
      height: 16px;
    }
  }

  .price__extra-disc {
    font-size: 14px;
  }

  .price__extra-item-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .price__extra-item {
    font-size: 14px;
    line-height: 1.2;
    margin: 16px 0 0;

    &.sp-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  }

  .price__extra-item-label {

  }

  .price__extra-item-amount {
    & .large {
      font-size: 16px;
      margin: 0 2px;
    }

    & .slash {
      margin: 0 5px;
    }

    & + & {
      margin-top: 12px;
    }
  }

  .price__features {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 12px;
    place-items: center;
  }

  .price__feature-item {
    width: 120px;
    height: 120px;
    font-size: 13px;
    padding: 16px 10px 8px;
  }
}

@media screen and (max-width: 480px) {
  .price__features {
    grid-template-columns: repeat(2, auto);
  }
}

/* ================================================
   flow
================================================ */
.flow {
  position: relative;
  position: absolute;
  bottom: 50px;
  left: 50%;
  translate: -50% 50%;
  width: clamp(1100px, 100%, 1340px);
  z-index: 1;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/flow_bg.svg) no-repeat center center / contain;
    z-index: -1;
  }
}

.flow__inner {
  padding: 60px 0;
}

.flow__content {
  width: 1100px;
}

.flow__ttl {
  position: relative;
  color: var(--color-primary);
  font-size: 48px;
  line-height: 1;
  padding-bottom: 32px;

  &::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/dots_brown.svg) no-repeat center bottom / contain;
    width: 64px;
    height: 8px;
  }
}

.flow__container {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  align-items: center;
}

.flow__list {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0;
}

.flow__item {
  width: 220px;
}

.flow__item-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 20px 27px 0;
  z-index: 0;
  width: 220px;
  height: 158px;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/flow_item_bg.svg) no-repeat center center / contain;
    z-index: -1;
  }
}

.flow__item-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1;
  color: var(--color-white);
  font-weight: 600;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  padding: 6px 13px 4px;
  margin: 0;
  text-transform: uppercase;
}

.flow__item-icon {
  margin-top: 20px;
  flex: 1;
}

.flow__item-label {
  font-size: 18px;
  line-height: 1;
  margin: 20px 0 0;
}

.flow__item-text {
  font-size: 14px;
  line-height: 1.86;
  margin: 20px 20px 0 0;
}

.flow__note {
  padding: 36px 20px 40px;
  min-width: 352px;
  border-block: 3px solid var(--color-primary);
}

.flow__note-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow__note-item {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: -1px;
  text-decoration-thickness: 8px;
  text-decoration-color: #E6F3FF;
  text-decoration-skip-ink: none;

  &::before {
    content: "";
    background: url(../images/checkbox_circle.svg) no-repeat center center / cover;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

.flow__note-catch {
  font-size: 24px;
  line-height: 1.58;
  margin: 32px 0 0;
}

@media screen and (max-width: 767px) {
  .flow {
    width: min(calc(100% - 20px), 600px);
    background: var(--color-white);
    margin-inline: auto;
    border: 5px solid #ddeeff;
    border-radius: 20px;

    &::before {
      background: url(../images/bg_no_border_sp.svg) no-repeat center top / cover;
      border-radius: 20px;
    }
  }

  .flow__inner {
    padding: 60px 0;
  }

  .flow__content {
    width: 100%;
  }

  .flow__ttl {
    font-size: 32px;
    line-height: 1.5;
    padding-bottom: 24px;
  }

  .flow__container {
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
  }

  .flow__list {
    flex-direction: column;
    gap: 12px;
  }

  .flow__item {
    flex-direction: row;
  }

  .flow__item-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 20px 27px;
    z-index: 0;
    width: 220px;
    height: 160px;

    &::before {
      background: url(../images/flow_item_bg_sp.svg) no-repeat center center / contain;
    }
  }

  .flow__item-step {
  }

  .flow__item-icon {
  
  }

  .flow__item-label {
  }

  .flow__item-text {

  }

  .flow__note {
    width: min(100%, 352px);
    min-width: unset;
    padding: 20px 12px 24px;
    margin-inline: auto;
  }

  .flow__note-item {
    gap: 10px;
    font-size: 18px;

    &::before {
      width: 24px;
      height: 24px;
    }
  }

  .flow__note-catch {
    font-size: 20px;
    margin: 24px 0 0;
  }
}

/* ================================================
   faq
================================================ */
.faq {
  position: relative;

  &::before {
    position: absolute;
    top: 660px;
    left: 50px;
    width: 427px;
    height: auto;
    aspect-ratio: 427 / 272;
    content: "";
    background: url(../images/faq_bg.svg) no-repeat left center / cover;
    z-index: -1;
  }

  &::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    content: "";
    background: url(../images/faq_bg_bottom.svg) no-repeat center bottom / cover;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 1004;
    z-index: -1;
  }
}

.faq__inner {
  padding: 300px 0 118px;
}

.faq__content {
  display: flex;
  justify-content: space-between;
  gap: 74px;
  width: 1100px;
  padding: 0 40px;
}

.faq__heading {

}

.faq__ttl-sub {
  font-size: 22px;
  line-height: 1;
  color: var(--color-primary);
  margin: 5px 0 0;
  white-space: nowrap;
}

.faq__ttl {
  font-size: 48px;
  line-height: 1;
  margin: 36px 0 0;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 610px;
}

.faq__item {

}

.faq__box {
  padding: 24px 30px 23px;
  border-radius: 10px;
  background: var(--color-primary);

  &.is-open {
    & .faq__head {
      &::after {
        rotate: 180deg;
      }
    }

    & .faq__body {
      opacity: 1;
      padding: 32px 30px;
      margin-top: 10px;
      transition: padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
    }
  }
}

.faq__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  color: var(--color-white);
  padding: 0 60px 0 0;

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 20px;
    height: 4px;
    background: var(--color-white);
    border-radius: var(--radius-full);
    translate: 0 -50%;
    content: "";
  }

  &::after {
    rotate: 90deg;
    transition: rotate 0.3s ease-in-out;
  }

  &::-webkit-details-marker {
    display: none;
  }
}

@media (any-hover: hover) {
  .faq__head:hover {
    cursor: pointer;
  }
}

.faq__num {
  font-family: var(--font-en);
  font-size: 36px;
  line-height: 1;
}

.faq__head-text {
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}

.faq__body {
  box-sizing: content-box;
  padding: 0 30px;
  overflow: hidden;
  background: var(--color-white);
  border-radius: 10px;
  opacity: 0;
  transition: padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.faq__body-text {
  line-height: 1.5;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .faq {
    position: relative;

    &::before {
      position: absolute;
      top: 594px;
      left: unset;
      right: calc(50% + 26px);
      /* left: 30%; */
      width: 150px;
    }
  }

  .faq__inner {
    padding: 630px 0 100px;
  }

  .faq__content {
    flex-direction: column;
    gap: 12px;
    width: min(100%, 600px);
    padding: 0 20px;
    margin-inline: auto;
  }

  .faq__ttl-sub {
    font-size: 18px;
    text-align: center;
  }

  .faq__ttl {
    font-size: 32px;
    margin-top: 24px;
    text-align: center;
  }

  .faq__list {
    width: 100%;
  }

  .faq__box {
    padding: 16px;

    &.is-open {
      & .faq__body {
        padding: 16px;
      }
    }
  }

  .faq__head {
    gap: 16px;
    padding-right: 24px;

    &::before,
    &::after {
      right: 0;
      width: 16px;
      height: 2px;
    }
  }

  .faq__num {
    font-size: 24px;
    white-space: nowrap;
  }

  .faq__head-text {
    font-size: 16px;
  }

  .faq__body {
    padding: 0 16px;
  }

  .faq__body-text {
    font-size: 14px;
  }
}

/* ============================================================
   contact
   ============================================================ */
.contact {
  background: #F7FBFF;
}

.contact__inner {
  padding-bottom: 180px;
}

.contact-head {
  text-align: center;
}

.contact-head img {
  display: block;
  margin: 0 auto;
}

.contact-ttl {
  font-size: 48px;
  line-height: 1;
  margin: 24px 0 0;
}

.contact-lead {
  line-height: 1;
  margin: 48px 0 0;
}

.contact-text {
  font-size: 14px;
  line-height: 1;
  margin: 18px 0 0;
}

.contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-top: 32px;
}

.contact-tel-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-tel-label {
  font-size: 16px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

.contact-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  & span {
    font-family: var(--font-en);
    font-size: 32px;
    line-height: 1.18;
    color: var(--color-primary);
  }
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1;
  background: var(--color-line);
  border-radius: var(--radius-full);
  padding: 18px 28px;
  white-space: nowrap;
  
  & span {
    font-size: 16px;
    line-height: 1;
    color: var(--color-white);
    text-transform: uppercase;
  }
}

.contact-form {
  background: var(--color-white);
  margin-top: 45px;
  padding: 66px 80px 80px;
  border-radius: 10px;
}

@media screen and (max-width: 767px) {
  .contact__inner {
    padding-bottom: 100px;
  }

  .contact__content {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .contact-ttl {
    font-size: 32px;
    line-height: 1.5;
  }

  .contact-lead {
    font-size: 14px;
    line-height: 1.5;
    margin: 24px 0 0;
  }

  .contact-text {
    font-size: 12px;
    line-height: 1.5;
  }

  .contact-actions {
    flex-direction: column;
    gap: 24px;
  }

  .contact-tel-wrap {
    flex-direction: column;
    gap: 8px;
  }

  .contact-form {
    margin-top: 32px;
    padding: 32px 16px;
    border-radius: 10px;
  }
}

/* ============================================================
   access
   ============================================================ */
.access {
  position: relative;
  background: var(--color-primary);
  z-index: 0;

  &::before {
    position: absolute;
    top: calc(-105 / 1440 * 100vw);
    left: 50%;
    translate: -50% 0;
    width: 156%;
    height: auto;
    aspect-ratio: 2258 / 388;
    content: "";
    background: url(../images/access_bg.svg) no-repeat center center / cover;
    z-index: -1;
  }
}

.access__bg {
  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/block_bg_01.svg) no-repeat left top / auto;
    z-index: -1;
    margin-left: 20px;
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/block_bg_02.svg) no-repeat right bottom / auto;
    z-index: -1;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}

.access__inner {
  padding-top: 40px;
}

.access__content {
  width: 1080px;
}

.access__ttl {
  position: relative;
  color: var(--color-white);
  font-size: 28px;
  line-height: 1;
  padding-left: 36px;

  &::before {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    content: "";
    background: url(../images/map_pin_white.svg) no-repeat center center / contain;
    width: 28px;
    height: 34px;
  }
}

.access__list {
  display: flex;
  gap: 40px;
  margin-top: 32px;
}

.access__card {
  flex: 1;
  padding: 20px 20px 35px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #00000033;
  overflow: hidden;
}

.access__card--sunaoka {
  background: #E6F3FF;
  border: 4px solid #ADD2F5;
}

.access__card--midorimachi {
  background: #E9F2E6;
  border: 4px solid #C9E3C0;
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: none;
  border-radius: 10px;
}

.access__body {
  padding: 0 32px;
}

.access__name {
  font-size: 22px;
  line-height: 1;
  margin: 34px 0 0;
}

.access__card--sunaoka .access__name {
  color: #2289BC;
}

.access__card--midorimachi .access__name {
  color: #438B2B;
}

.access__address {
  line-height: 1.25;
  margin: 18px 0 0;
}

.access__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 0;
}

.access__info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.access__info-label {
  display: grid;
  place-items: center;
  min-width: 80px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 12px;
  line-height: 1;
  padding: 9px 22px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  margin: 0;
}

.access__info-value {
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
}

.access__info-value--type2 {
  display: flex;
  flex-direction: column;
}

.access__info-value-sub {
  display: inline-block;
  text-align: right;
}

@media screen and (max-width: 767px) {
  .access__bg {
    &::before {
      background-size: 40%;
    }

    &::after {
      background-size: 40%;
    }
  }

  .access__inner {
    padding: 60px 0;
  }

  .access__content {
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .access__ttl {
    font-size: 24px;
    padding: 0 20px 0 48px;
    margin: 0;
  }

  .access__list {
    flex-direction: column;
    gap: 24px;
  }

  .access__card {

  }

  .access__map iframe {
    height: 220px;
  }

  .access__body {
    padding: 0 12px;
  }

  .access__name {
    font-size: 20px;
  }

  .access__address {
    line-height: 1.5;
  }

  .access__info-value {
    line-height: 1.5;
  }

  .access__info-value--type2 {
  }
  
  .access__info-value-sub {
  }
}

/* ============================================================
   cta
   ============================================================ */
.cta {
  position: relative;
  z-index: 0;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: url(../images/cta_bg.webp) no-repeat center center / cover;
    z-index: -2;
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px) brightness(1.1);
    z-index: -1;
  }
}

.cta__inner {
  padding-bottom: 170px;
}

.cta__content {
  color: var(--color-white);
  text-align: center;
}

.cta__ttl {
  font-size: 36px;
  line-height: 1;
  margin: 0;
}

.cta__text {
  line-height: 1.875;
  margin: 30px 0 0;
}

.cta__btns {
  display: flex;
  gap: 25px;
  margin-top: 40px;
}

.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex: 1;
  height: 80px;
}

.cta__btn--trial {
  background: var(--color-primary);

  & span {
    font-size: 20px;
  }
}

.cta__btn--tel {
  background: var(--color-primary);
  flex-direction: column;
  gap: 7px;
}

.cta__btn-tel-label {
  font-size: 12px;
  line-height: 1;
}

.cta__btn-tel-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  line-height: 1.23;
  font-family: var(--font-en);
}

.cta__btn--line {
  background: var(--color-line);
  gap: 10px;

  & span {
    font-size: 20px;
    text-transform: uppercase;
  }
}

.cta__btn--line img {
  width: 24px;
  height: 24px;
}

@media screen and (max-width: 767px) {
  .cta {
  }

  .cta__inner {
    padding-bottom: 150px;
  }

  .cta__ttl {
    font-size: 24px;
    line-height: 1.5;
  }

  .cta__text {
    font-size: 14px;
    margin: 24px 0 0;
  }

  .cta__btns {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
  }

  .cta__btn {
    width: min(100%, 300px);
    flex: unset;
    height: 64px;
  }
}