@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#pageApp {
  background: #dbeafb;
  font-weight: 500;
  #point,
  #function,
  #consultation {
    background: #fff;
  }
  [class*='item--photo'] {
    position: relative;
    overflow: hidden;
  }
  [class*='item--photo--image'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.attention__text {
  .base-textlink__texts {
    color: inherit;
    .base-textlink__text {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
  + .attention__text {
    margin-top: min((15vw / 3.75), 25px);
    padding-top: min((14vw / 3.75), 20px);
    border-top: 2px dashed var(--default-color-blue2);
  }
}
.attention__box {
  border: 1px solid var(--default-color-red);
  padding: min((24vw / 3.75), 32px) min((16vw / 3.75), 24px);
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  &:not(:first-child) {
    margin-top: 50px;
    .is-pc & {
      margin-top: 40px;
    }
  }
  .attention__box--title,
  .attention__box--text .is-strong {
    color: var(--default-color-red);
    font-weight: 900;
    font-size: min((17vw / 3.75), 24px);
  }
  .is-gap-05 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    justify-content: center;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
/*#mv*/
#mv {
  width: var(--base-w, 100%);
  margin: auto;
  color: var(--default-color-blue3);
  background: var(--bg) no-repeat center top / var(--bg-w, 100%);
  @media (width <=750px) {
    --bg: url(../images/mv_sp.webp);
    --base-w: min(((353 / 375) * 100%), 706px);
    --inner-pt: calc((566 / 350) * 100%);
    --text-fs: min((14vw / 3.75), 22px);
    text-align: center;
    .is-inline-block-ire {
      display: inline-block;
    }
  }
  @media (1210px > width >750px) {
    --bg: url(../images/mv_pc_w1104.webp);
    --base-w: min(((805 / 834) * 100%), 1076px);
    --inner-pt: calc((387 / 808) * 100%);
    --lead-w: calc((418 / 808) * 100%);
    /*--text-fs: 13px;*/
    --text-fs: clamp(13px, (13vw / 8.34), 15.5px);
  }
  @media (width >=1210px) {
    /*1195→1210*/
    --bg: url(../images/mv_pc_w1920.webp);
    --bg-w: 1836px;
    --inner-w: min(((1104 / 1194) * 100%), 1104px);
    --inner-pt: min(((530 / 1194) * 100%), 530px);
    --lead-w: min(((573 / 1104) * 100%), 573px);
    --text-fs: 16px;
    --text-gap: 8px;
  }
  .mv__inner {
    width: var(--inner-w, 100%);
    padding-top: var(--inner-pt);
    margin: auto;
  }
  .mv__lead {
    font-weight: 900;
    font-size: var(--text-fs);
    line-height: var(--default-font-lh2);
    width: var(--lead-w, 100%);
    display: grid;
    gap: var(--text-gap, 0) 0;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section__inner {
  width: var(--default-width);
  margin: auto;
  padding: var(--default-yohaku2) 0;
}
#mainArea:has(#point + #function) {
  #point .section__inner {
    padding-bottom: 0;
  }
}
/*section-nav*/
.section-nav {
  --btn-fs: min((12vw / 3.75), 14px);
  --btn-size-h: min((30vw / 3.75), 49px);
  margin: 48px 0 min((40vw / 8.34), 60px);
  .section-nav__list {
    @media (width <=560px) {
      width: calc(336vw / 3.75);
      margin: auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      .ui-static-button {
        &:not(.active):not(:disabled):active,
        &:focus,
        &.active,
        &.focused,
        &.base-button {
          min-width: 100%;
          grid-template-columns: 1fr auto;
          padding-left: calc(29em / 14);
        }
      }
    }
    @media (width > 560px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: min((11.68vw / 8.34), 16px);
      .ui-static-button {
        min-width: auto;
      }
    }
    @media (width > 750px) {
      .ui-static-button {
        --btn-fs: min((12vw / 7.44), 14px);
        --btn-size-h: min((37vw / 7.44), 49px);
        --btn-pl: min((17vw / 7.44), (24em / 14));
        --btn-pr: min((10vw / 7.44), (17em / 14));
      }
    }
  }
}
/*section__title*/
.section__title {
  color: var(--default-color-blue3);
  font-size: min((28vw / 3.75), 48px);
  font-weight: 900;
  line-height: 1.3;
  display: grid;
  margin-bottom: var(--sec-ttl-mb);
  .is-pc & {
    line-height: var(--default-font-lh);
  }
  .section__title--subtext {
    color: var(--default-color-blue1);
    font-size: min((22vw / 3.75), 30px);
  }
}
/*point*/
#point {
  --sec-ttl-mb: 16px;
  :is(.is-pc, .is-tab) & {
    --sec-ttl-mb: 12px;
  }
  .section__text {
    line-height: var(--default-font-lh2);
  }
  .point-notes {
    margin-top: min((20vw / 3.75), 24px);
  }
  .point-notes--item {
    font-size: min((12vw / 3.75), 14px);
    .is-strong {
      color: #f41d4c;
      font-weight: inherit;
    }
  }
  .point-lineup {
    margin-top: var(--default-yohaku2);
  }
  .point-lineup__item {
    display: grid;
    &:not(:first-child) {
      margin-top: var(--default-yohaku2);
    }
    :is(.is-pc, .is-tab) & {
      --item-photo-w: calc((450 / 1104) * 100%);
      grid-template-columns: 1fr var(--item-photo-w);
      gap: 0 calc((30 / 1104) * 100%);
      align-items: start;
      &:nth-child(odd) {
        grid-template-columns: var(--item-photo-w) 1fr;
      }
    }
  }
  .point-lineup__item--title {
    display: grid;
    margin-bottom: 16px;
    :is(.is-pc, .is-tab) & {
      margin-bottom: 12px;
    }
  }
  .point-lineup__item--title--num {
    font-family: var(--default-ff-en);
    font-size: min((20vw / 3.75), 30px);
    color: var(--default-color-blue1);
    .is-num {
      font-size: min((34vw / 3.75), 44px);
      margin-left: 4px;
    }
  }
  .point-lineup__item--title--text {
    font-size: min((24vw / 3.75), 36px);
    font-weight: 900;
    color: var(--default-color-blue3);
  }
  .point-lineup__item--text {
    line-height: var(--default-font-lh2);
    .is-tab & {
      font-size: min((13vw / 3.75), 16px);
    }
  }
  .point-lineup__item--photo {
    padding-top: calc((220 / 336) * 100%);
    border-radius: 16px;
    :is(.is-pc, .is-tab) & {
      padding-top: calc((360 / 450) * 100%);
    }
    .is-sp:not(.is-tab) &,
    :is(.is-pc, .is-tab) .point-lineup__item:nth-child(odd) & {
      order: -1;
    }
  }
}
/*function*/
#function {
  .section__text {
    font-size: min((22vw / 3.75), 30px);
    font-weight: 900;
    color: var(--default-color-blue1);
  }
  .function-lineup {
    margin-top: 32px;
    display: grid;
    --gap: min((16vw / 3.75), 35px);
    --col-num: 2;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
    justify-content: center;
    gap: var(--gap);
    .is-pc & {
      --col-num: 4;
      @media (width <=1000px) {
        --col-num: 3;
      }
    }
  }
  .function-lineup__item {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: min((8vw / 3.75), 12px);
  }
  .function-lineup__item--detail {
    font-size: min((13vw / 3.75), 16px);
  }
  .function-lineup__item--title {
    font-size: min((18vw / 3.75), 24px);
    font-weight: 900;
    color: var(--default-color-blue2);
    margin-bottom: 4px;
  }
  .function-lineup__item--photo {
    order: -1;
    padding-top: calc((113.07 / 160) * 100%);
    border-radius: 8px;
    .is-pc & {
      padding-top: calc((176.67 / 250) * 100%);
    }
  }
}
/*consultant*/
#consultant {
  position: relative;
  --sec-ttl-mb: 40px;
  .is-pc & {
    --sec-kazari-text: ' ';
    --sec-yohaku-t: 100px;
    --sec-ttl-mb: 30px;
  }
  &::before {
    content: 'HIS VIDEOCHAT' var(--sec-kazari-text, '\A') 'CENTER';
    white-space: pre;
    width: var(--default-width2);
    margin: auto;
    font-family: var(--default-ff-en);
    font-size: min((60vw / 3.75), 70px); /*デザインの60だと落ちるので*/
    line-height: 1;
    color: #acc2dd;
    text-align: right;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    translate: 0 -0.525em;
  }
  .section__inner {
    padding-top: var(--sec-yohaku-t, min((136.06vw / 3.75), 160px));
  }
  .section__text {
    font-size: min((17vw / 3.75), 24px);
    font-weight: 900;
    color: var(--default-color-blue3);
    margin-bottom: 27px;
    .is-pc & {
      line-height: var(--default-font-lh2);
      margin-bottom: 19px;
    }
  }
  .consultant-lineup {
    .consultant-lineup__buttons {
      padding: 0;
    }
    .consultant-lineup__button {
      gap: min((16vw / 3.75), 24px);
      @media (width < 680px) {
        gap: 12px;
      }
    }
    .consultant-lineup__button--item {
      background: var(--tab-bg, #fff);
      color: var(--tab-fc, var(--default-color-blue3));
      font-size: 13px;
      line-height: var(--default-font-lh);
      font-weight: 900;
      border-radius: 8px;
      padding: 8.76px 29.2px;
      border: 2px solid var(--default-color-blue3);
      .is-dsp-ire {
        display: none;
      }
      .is-pc & {
        padding: 12px 40px;
        font-size: 16px;
      }
      @media (width < 680px) {
        padding: 8px;
        .is-dsp-ire {
          display: block;
        }
      }
      &.is-active {
        --tab-fc: #fff;
        background: var(--default-color-blue3);
        &::before {
          background: var(--default-color-blue3);
          width: 21px;
          height: 18px;
          bottom: -12px;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          transform: rotate(0) translateX(-50%);
        }
      }
    }
    .consultant-lineup__block--wrapper {
      margin-top: 28px;
      .is-pc & {
        margin-top: 16px;
      }
    }
    .consultant-lineup__block--main--arrows {
      display: flex;
      justify-content: end;
      gap: 16px;
      margin-bottom: 15px;
      .splide__arrow {
        position: static;
        transform: translateY(0);
        width: 40px;
        height: 24px;
        border-radius: 100px;
        background: var(--bg, #fff);
        font-size: 0.9em;
        color: var(--default-color-blue3);
        border: 1px solid;
        opacity: 1;
        &:disabled {
          opacity: 0.5;
          cursor: default;
        }
      }
    }
    .consultant-lineup__block--main--track {
      overflow: visible;
    }
    .consultant-lineup__block--main--list {
      --item-w: 290px;
      --item-gap: 32px;
      --item-ttl-fs: 30px;
      --item-comment-fs: 16px;
      --item-other-fs: 13px;
      .is-pc & {
        --item-w: 320px;
        --item-gap: 56px;
        --item-ttl-fs: 36px;
        --item-comment-fs: 18px;
        --item-other-fs: 14px;
      }
      gap: var(--item-gap);
    }
    .consultant-lineup__block--main--list--item {
      width: var(--item-w);
      display: grid;
      grid-template-rows: auto 1fr auto;
      align-items: start;
    }
    .consultant-lineup__block--main--list--item--detail {
      display: grid;
    }
    .consultant-lineup__block--main--list--item--title,
    .consultant-lineup__block--main--list--item--comment {
      font-weight: 900;
      text-align: center;
    }
    .consultant-lineup__block--main--list--item--title {
      font-size: var(--item-ttl-fs);
      color: var(--default-color-blue3);
      margin-bottom: 16px;
    }
    .consultant-lineup__block--main--list--item--comment {
      order: -1;
      font-size: var(--item-comment-fs);
      color: var(--default-color-blue2);
    }
    .consultant-lineup__block--main--list--item--other {
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 16px 0;
      font-size: var(--item-other-fs);
    }
    .consultant-lineup__block--main--list--item--other--item {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
      gap: 12px;
    }
    .consultant-lineup__block--main--list--item--other--item--title {
      color: var(--default-color-blue1);
      text-align: right;
      font-weight: 900;
      border-right: 1px solid;
      padding-right: 12px;
    }
    .consultant-lineup__block--main--list--item--photo {
      order: -1;
      padding-top: calc((240 / 320) * 100%);
      border-radius: 16px;
      margin-bottom: 24px;
    }
    .consultant-lineup__block--main--list--item--button {
      margin-top: min((32vw / 3.75), 40px);
      .base-button {
        min-width: min((171vw / 3.75), 192px);
        margin: auto;
      }
    }
  }
}
/*consultation*/
#consultation {
  .section__title {
    --sec-ttl-mb: 40px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: min((6vw / 3.75), 19px);
    .is-pc & {
      --sec-ttl-mb: 30px;
    }
    &::after {
      content: '';
      height: min((34vw / 3.75), 59px);
      aspect-ratio: 169 / 150;
      background: url('../images/consultation_title_icon.svg') no-repeat center center / contain;
    }
  }
  .section__text {
    font-size: min((17vw / 3.75), 24px);
    font-weight: 900;
    color: var(--default-color-blue2);
    margin-bottom: 32px;
    .is-pc & {
      margin-bottom: 16px;
    }
  }
  .consultation-lineup {
    margin-top: 50px;
    .is-pc & {
      margin-top: 40px;
    }
    .consultation-lineup__item {
      background: var(--default-color-blue2);
      color: #fff;
      border-radius: 16px;
      padding: min((16vw / 3.75), 20px) min((20vw / 3.75), 24px) min((24vw / 3.75), 28px);
      &:not(:first-child) {
        margin-top: 40px;
      }
    }
    .consultation-lineup__item--title {
      font-size: min((26vw / 3.75), 36px);
      font-weight: 900;
      border-bottom: 2px dashed;
      padding-bottom: 14px;
      margin-bottom: 16px;
      #consultation_rightnow & {
        --icon-bg: url('../images/consultation_rightnow_title_icon.svg');
      }
      #consultation_specified & {
        --icon-bg: url('../images/consultation_specified_title_icon.svg');
        --icon-size: min((28vw / 3.75), 34px);
      }
      #consultation_consultant & {
        --icon-bg: url('../images/consultation_consultant_title_icon.svg');
      }
      .consultation-lineup__item--title--text {
        display: inline-block;
        padding-left: min((44vw / 3.75), 50px);
        background: var(--icon-bg) no-repeat 0 calc(50% + 0.1em) / var(--icon-size, min((32vw / 3.75), 38px));
      }
    }
    .consultation-lineup__item--text,
    .consultation-lineup__item--detail--attention {
      font-size: min((16vw / 3.75), 18px);
      margin-bottom: var(--text-mb, min((16vw / 3.75), 24px));
      .is-strong {
        font-weight: 900;
      }
    }
    .consultation-lineup__item--detail--attention {
      --text-mb: min((48vw / 3.75), 56px);
      &:not(:first-child) {
        margin-bottom: 24px;
        margin-top: var(--text-mb);
      }
    }
    .consultation-lineup__item--detail--info--item {
      font-size: min((14vw / 3.75), 16px);
      &:not(:first-child) {
        margin-top: 24px;
      }
      .consultation-lineup__item--detail--info--item--title {
        font-weight: 900;
      }
      .consultation-lineup__item--detail--info--item--text--name,
      .consultation-lineup__item--detail--info--item--text--date {
        display: inline;
      }
      .consultation-lineup__item--detail--info--item--text--name {
        margin-right: 1em;
      }
    }
    .consultation-lineup__item--dst {
      display: grid;
      gap: 16px;
      @media (width <=1000px) {
        grid-template-columns: repeat(3, 1fr);
        .is-sp & {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (width >1000px) {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
      }
    }
    .base-button {
      min-width: 100%;
      border: none;
    }
  }
  .consultation-notes__wrapper {
    font-size: min((12vw / 3.75), 14px);
    color: #7c7b7b;
    margin-top: 40px;
    .consultation-notes__title {
      font-size: min((14vw / 3.75), 16px);
      line-height: var(--default-font-lh2);
      margin-bottom: 8px;
    }
    .consultation-notes__item:not(:first-child) {
      margin-top: 12px;
    }
    .consultation-notes__item--ul {
      padding-left: 0;
    }
  }
}
/*faq*/
#faq {
  --sec-ttl-mb: min((24vw / 3.75), 40px);
  .faq-lineup {
    --item-radius: 16px;
    display: grid;
    gap: min((28vw / 3.75), 40px);
    .ui-static-accordion-trigger {
      --qa-icon: 'Q.';
      background: var(--default-color-blue1);
      color: #fff;
      gap: 16px;
      &,
      &[data-state='closed'] {
        border-radius: var(--item-radius);
      }
      &[data-state='open'] {
        border-radius: var(--item-radius) var(--item-radius) 0 0;
      }
      .ui-static-accordion-text,
      .ui-static-icon {
        color: inherit;
      }
      .ui-static-accordion-text {
        font-weight: 500;
      }
      .ui-static-icon {
        font-size: 1.25em;
      }
    }
    .ui-static-accordion-text,
    .ui-static-accordion-content {
      font-size: var(--default-font-size);
      line-height: var(--default-font-lh2);
      top: -16px; /*radius分マイナス*/
    }
    .ui-static-accordion-content {
      border-color: var(--default-color-blue1);
      border-radius: 0 0 var(--item-radius) var(--item-radius);
    }
    .ui-static-accordion-content-inner {
      --qa-icon: 'A.';
      --qa-icon-fc: var(--default-color-blue1);
      --qa-icon-posi-x: min((14vw / 3.75), 20px);
      padding: min((8vw / 3.75), 12px) min((6vw / 3.75), 20px) min((12vw / 3.75), 14px);
      .is-pc & {
        padding-right: calc(72em / 18);
      }
    }
    .ui-static-accordion-trigger,
    .ui-static-accordion-content-inner {
      --qa-icon-fs: min((30vw / 3.75), 34px);
      padding-left: min((72vw / 3.75), 98px);
      .ui-static-accordion-text,
      .ui-static-accordion-content-text {
        min-height: var(--qa-icon-fs);
        display: flex;
        align-items: center;
      }
      &::before {
        content: var(--qa-icon);
        font-family: var(--default-ff-en);
        color: var(--qa-icon-fc, inherit);
        font-size: var(--qa-icon-fs);
        line-height: 1;
        position: absolute;
        left: var(--qa-icon-posi-x, min((16vw / 3.75), 22px));
      }
      &.ui-static-accordion-trigger {
        &::before {
          top: 14px;
        }
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover: hover) and (pointer: fine) {
  .section-nav .ui-static-button {
    &.base-button:hover {
      --btn-bg: var(--default-color-blue3);
      --btn-fc: #fff;
    }
  }
  .attention__text {
    .base-textlink__link:hover {
      .base-textlink__text {
        text-decoration: none;
      }
    }
  }
  #consultant {
    .consultant-lineup__button--item:not(.is-active) {
      transition: var(--default-hover-transition-background), var(--default-hover-transition-color);
      &:hover {
        --tab-bg: var(--default-color-blue3);
        --tab-fc: #fff;
      }
    }
    .consultant-lineup__block--main--arrows {
      .splide__arrow {
        transition: var(--default-hover-transition-background);
        &:not(:disabled):hover {
          --bg: var(--default-color-yellow);
        }
      }
    }
  }
}