@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
#mv {
  --mv-h: calc((1178 / 750) * 100%);
  @media (1146px > width >560px) {
    --mv-h: 565px;
  }
  @media (1920px > width > 1145px) {
    --mv-h: calc((960 / 1920) * 100%);
  }
  @media (width >=1920px) {
    --mv-h: 960px;
  }
  .mv__text--item {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    height: 0;
    padding-top: var(--mv-h);
    position: relative;
    .base-picture__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
#lead {
  font-family: var(--default-ff-min);
  background: #EEEDD7;
  padding: min((40vw / 3.75), 57px) 0;
  .lead__inner {
    width: min(var(--default-width-sp), 763px);
    margin: auto;
    position: relative;
    &::before, &::after {
      content: "";
      display: block;
      width: min((22 / var(--default-width-sp-val) * 100%), 29px);
      height: 0;
      padding-top: min((77 / var(--default-width-sp-val) * 100%), 100px);
      background: url("../images/lead_kazari.svg") no-repeat 0 0 / contain;
      position: absolute;
      top: 50%;
      translate: 0 -50%;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
      scale: -1 1;
    }
  }
  .lead__text {
    width: min((280 / var(--default-width-sp-val) * 100%), 577px);
    margin: auto;
    font-size: min((14vw / 3.75), 20px);
    line-height: 1.8;
    text-align: center;
    .is-notes {
      font-size: min((12vw / 3.75), 12px);
      margin: 0 .5em;
    }
    .is-sp & {
      .is-mark {
        margin: 0 .25em;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section {
  padding: min((80vw / 3.75), 80px) 0;
  &:nth-child(odd of .section) {
    background: #F5F5E9;
  }
}
.section__inner {
  width: var(--default-width);
  margin: auto;
}
.section-title {
  font-family: var(--default-ff-min);
  text-align: center;
  line-height: var(--default-font-lh2);
  .is-pc & {
    line-height: var(--default-font-lh);
  }
  &.is-type-a {
    font-size: min((28vw / 3.75), 36px);
    margin-bottom: min((32vw / 3.75), 40px);
  }
  &.is-type-b {
    font-size: min((24vw / 3.75), 32px);
    color: var(--default-color-blue2);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1em;
    margin-bottom: min((32vw / 3.75), 40px);
    &::before, &::after {
      content: "";
      width: 100%;
      height: 2px;
      background: currentColor;
    }
  }
}
.section-lead {
  width: min(100%, 728px);
  margin: 0 auto min((24vw / 3.75), 32px);
}
/*about-consultant*/
#about-consultant {
  font-family: var(--default-ff-min);
  .about-consultant__inner {
    display: grid;
    gap: min((32vw / 3.75), 32px);
    width: min(100%, 982px);
    margin: auto;
    .is-pc & {
      grid-template-columns: calc((316 / 982) * 100%) 1fr;
      align-items: center;
    }
  }
  .about-consultant__figure {
    height: min((268vw / 3.75), 370px);
    .is-pc & {
      height: 0;
      padding-top: calc((628 / 640) * 100%);
      position: relative;
      .about-consultant__figure--image {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .about-consultant__figure--image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .about-consultant__pickup--item {
    background: #fff;
    border: 2px solid #D0C271;
    padding: min((16vw / 3.75), 16px);
    display: grid;
    gap: min((16vw / 3.75), 16px) min((24vw / 3.75), 32px);
    .is-sp & {
      justify-items: center;
    }
    .is-pc & {
      grid-template-columns: auto 1fr;
    }
    &:not(:first-child) {
      margin-top: min((32vw / 3.75), 32px);
    }
    .about-consultant__pickup--item--icon {
      order: -1;
      height: min((88vw / 3.75), 88px);
      aspect-ratio: 1;
    }
    .about-consultant__pickup--item--title {
      font-weight: bold;
      font-size: min((20vw / 3.75), 20px);
      margin-bottom: min((7vw / 3.75), 7px);
      color: var(--default-color-blue);
    }
  }
}
/*staff*/
#staff {
  .staff {
    &:not(:first-child) {
      margin-top: min((80vw / 3.75), 80px);
    }
    .ui-static-tab {
      overflow-x: auto;
      .ui-static-tab-button-list {
        gap: min((8vw / 3.75), 16px);
        margin: auto;
      }
      .ui-static-tab-button {
        --btn-bg: #fff;
        --btn-fc: var(--default-color-blue);
        color: var(--btn-fc);
        font-size: min((14vw / 3.75), 16px);
        line-height: var(--default-font-lh2);
        font-weight: bold;
        background: var(--btn-bg);
        border: 2px solid var(--default-color-blue);
        border-radius: 8px;
        padding: min((6vw / 3.75), 6px) min((14vw / 3.75), 14px) min((22vw / 3.75), 22px);
        position: relative;
        &.is-active {
          cursor: default;
          --btn-bg: var(--default-color-blue);
          --btn-fc: #fff;
        }
        .is-pc & {
          line-height: var(--default-font-lh);
          .is-small {
            font-size: calc(14em / 16);
          }
        }
        .is-small {
          font-weight: 500;
        }
        &::after {
          content: var(--default-ico-arrow-d);
          font-family: var(--default-ff-icon);
          font-size: 1.25em;
          line-height: .25;
          font-weight: normal;
          position: absolute;
          bottom: min((7vw / 3.75), 7px);
          left: 50%;
          translate: -50% 0;
        }
        &::before {
          content: none;
        }
      }
    }
    .ui-static-tab-content {
      margin-top: min((24vw / 3.75), 32px);
    }
  }
  .staff-lineup.is-size-big {
    width: min(100%, 800px);
    margin: auto;
    .staff-lineup__item--photo {
      --item-img-size: calc((480 / 640) * 100%);
      --item-img-radius: var(--default-radius);
    }
    @media(width < 751px) {
      .staff-lineup__item--name, .staff-lineup__item--comment, .staff-lineup__item--other {
        margin-top: var(--item-gap);
      }
    }
    @media(750px < width) {
      .staff-lineup__item {
        gap: var(--item-gap) 24px;
        grid-template-columns: calc((308 / 800) * 100%) 1fr;
        grid-template-areas:
          "img txt"
          "img name"
          "img branch"
          "img dst"
          "img other";
        .staff-lineup__item--photo {
          grid-area: img;
        }
        .staff-lineup__item--comment {
          grid-area: txt;
        }
        .staff-lineup__item--name {
          grid-area: name;
        }
        .staff-lineup__item--branch {
          grid-area: branch;
        }
        .staff-lineup__item--dst {
          grid-area: dst;
        }
        .staff-lineup__item--other {
          grid-area: other;
        }
      }
    }
  }
  .staff-lineup.is-size-small {
    --gap-yoko: min((16vw / 3.75), 32px);
    --gap-tate: min((48vw / 3.75), 56px);
    display: grid;
    grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-yoko) * (var(--col-num) - 1)) / var(--col-num)));
    justify-content: center;
    gap: 0 var(--gap-yoko);
    @media(width < 751px) {
      --col-num: 2;
      .staff-lineup__item:nth-child(n + 3) {
        margin-top: var(--gap-tate);
      }
    }
    @media(750px < width < 1061px) {
      --col-num: 3;
      .staff-lineup__item:nth-child(n + 4) {
        margin-top: var(--gap-tate);
      }
    }
    @media(1060px < width) {
      --col-num: 4;
      .staff-lineup__item:nth-child(n + 5) {
        margin-top: var(--gap-tate);
      }
    }
    .staff-lineup__item {
      grid-template-rows: subgrid;
      grid-row: span 6;
    }
    .staff-lineup__item--photo {
      width: calc((200 / 252) * 100%);
      margin: auto;
      --item-img-size: 100%;
      --item-img-radius: 100%;
    }
    .staff-lineup__item--name, .staff-lineup__item--other {
      margin-top: min((4vw / 3.75), 4px);
    }
    .is-pc & {
      .staff-lineup__item--dst {
        margin-top: 2px;
      }
    }
  }
  .staff-lineup__item {
    display: grid;
    --item-gap: min((8vw / 3.75), 8px);
    gap: var(--item-gap);
    font-size: min((14vw / 3.75), 14px);
    text-align: center;
    .staff-lineup__item--photo {
      order: -1;
      .staff-lineup__item--photo--inner {
        height: 0;
        padding-top: var(--item-img-size);
        position: relative;
        border-radius: var(--item-img-radius);
        overflow: hidden;
      }
      .staff-lineup__item--photo--image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .staff-lineup__item--name {
      font-weight: bold;
      font-size: min((26vw / 3.75), 26px);
      color: var(--default-color-blue2);
      word-break: break-all;
    }
    .staff-lineup__item--comment {
      order: -1;
      text-align: left;
    }
    .staff-lineup__item--branch {
      line-height: var(--default-font-lh2);
      color: var(--default-color-blue2);
      background: #D4ECFF;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
    }
    .staff-lineup__item--dst {
      line-height: var(--default-font-lh2);
      color: var(--default-color-blue);
    }
    .staff-lineup__item--notes {
      font-size: min((12vw / 3.75), 12px);
      color: #888;
      margin-top: min((4vw / 3.75), 4px);
      text-align: left;
      justify-self: center;
      .staff-lineup__item--notes--item {
        padding-left: 1em;
        text-indent: -1em;
        &:not(:first-child) {
          margin-top: .25em;
        }
      }
    }
  }
}
/*voice*/
#voice {
  .voice-lineup__item {
    display: grid;
    justify-content: center;
    grid-template-columns: auto min((252vw / 3.75), 744px);
    gap: min((12vw / 3.75), 16px);
    &:not(:first-child) {
      margin-top: min((24vw / 3.75), 32px);
    }
    .voice-lineup__item--icon {
      height: min((72vw / 3.75), 88px);
      aspect-ratio: 1;
      object-fit: contain;
    }
    .voice-lineup__item--detail {
      --border: 2px solid var(--default-color-blue);
      position: relative;
      padding-left: min((16vw / 3.75), 24px);
      &::before {
        --arrow-bg: var(--default-color-blue);
        z-index: 0;
      }
      &::after {
        --arrow-bg: #fff;
        translate: min((5vw / 3.75), 5px) 0;
        z-index: 2;
      }
      &::before, &::after {
        content: "";
        width: min((25vw / 3.75), 25px);
        height: min((18vw / 3.75), 18px);
        background: var(--arrow-bg);
        position: absolute;
        left: 0;
        top: min((29vw / 3.75), 29px);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
      }
    }
    .voice-lineup__item--detail--text {
      background: #fff;
      border: var(--border);
      border-radius: var(--default-radius);
      padding: min((12vw / 3.75), 16px);
      position: relative;
      z-index: 1;
    }
  }
}
/*faq*/
#faq {
  .faq-lineup--item {
    --border: 1px solid #000;
    border: var(--border);
    border-radius: var(--default-radius);
    overflow: hidden;
    &:not(:first-child) {
      margin-top: min((24vw / 3.75), 32px);
    }
    --icon: "A.";
    --align: start;
    .faq-lineup--item--q {
      --icon: "Q.";
      --align: baseline;
      background: #D0E3FB;
      font-weight: bold;
      border-bottom: var(--border);
    }
    .faq-lineup--item--q, .faq-lineup--item--a {
      padding: min((11vw / 3.75), 15px) min((15vw / 3.75), 23px);
    }
    .faq-lineup--item--q--text, .faq-lineup--item--a--text {
      display: grid;
      gap: min((8vw / 3.75), 24px);
      grid-template-columns: auto 1fr;
      align-items: var(--align);
      &::before {
        content: var(--icon);
        font-size: min((20vw / 3.75), 24px);
        color: var(--default-color-blue);
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  #staff {
    .ui-static-tab {
      .ui-static-tab-button {
        &:hover {
          --btn-bg: var(--default-color-blue);
          --btn-fc: #fff;
        }
      }
    }
  }
}