@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap';
@layer foundation, vendor, layout, component, project, page, utilities;
:root {
  --sans-serif: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --serif: "Noto Serif JP", serif;
  --en-sans: "", sans-serif;
  --en-serif: "", serif;
  --base: #fff;
  --main: #000;
  --primary-color: #0041C6;
  --color-teal: #4FC7C3;
  --color-yellow: #FBC52E;
  --color-blue: #007FC4;
  --header-h: 20.5333333333vw;
  --container-w: 86.6666666667vw;
  --container-space: 6.6666666667vw;
}
@media screen and (min-width: 768px) {
  :root {
    --header-h: 154px;
    --container-w: 650px;
    --container-space: 50px;
  }
}

@layer foundation {
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  dl,
  dt,
  dd,
  ol,
  ul,
  figure {
    all: unset;
    display: revert;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  img {
    vertical-align: middle;
  }
}
@layer foundation {
  html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
  }
  body {
    min-width: 320px;
    max-width: 750px;
    margin-inline: auto;
    font-family: var(--sans-serif);
    line-height: 1.8;
    color: var(--main);
    background: var(--base);
    text-size-adjust: 100%;
  }
  body.is-preload * {
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :focus-visible {
    outline: 2px solid blue;
  }
  img,
  svg,
  iframe,
  video,
  picture {
    max-width: 100%;
  }
  img {
    height: auto;
    font-size: 12px;
    letter-spacing: 0;
  }
  a {
    color: inherit;
    word-break: break-all;
    text-decoration: none;
  }
  @media screen and (min-width: 768px) {
    a[href^="tel:"] {
      display: inline-block;
      pointer-events: none;
    }
  }
  small {
    font-size: 80%;
  }
  button,
  input[type=button],
  input[type=submit] {
    font: inherit;
    cursor: pointer;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  label {
    display: inline-block;
    cursor: pointer;
  }
}
/*========================================
  コンテンツ（メインコンテンツとサイドバーのラッパー）
========================================*/
@layer layout {}
/* ========================================
  サイト共通のフッター
======================================== */
@layer layout {
  .l-footer {
    background-color: #288B78;
  }
  .l-footer__inner {
    padding-block: 5.3333333333vw;
  }
  @media screen and (min-width: 768px) {
    .l-footer__inner {
      padding-block: 40px;
    }
  }
  .l-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6.1333333333vw;
    justify-content: center;
  }
  @media screen and (min-width: 768px) {
    .l-footer__list {
      gap: 46px;
    }
  }
  .l-footer__link {
    display: block;
    font-size: 2.1333333333vw;
    color: #fff;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .l-footer__link {
      font-size: 16px;
    }
  }
  @media (hover: hover) {
    .l-footer__link:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
  }
  .l-footer__copyright {
    margin-top: 2.1333333333vw;
    line-height: 1;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .l-footer__copyright {
      margin-top: 16px;
    }
  }
  .l-footer__copyright small {
    font-size: 2.1333333333vw;
    color: #fff;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .l-footer__copyright small {
      font-size: 16px;
    }
  }
}
/* ========================================
  サイト共通のヘッダー
======================================== */
@layer layout {
  .l-header {
    position: sticky;
    top: 0;
    z-index: 99;
    height: var(--header-h);
    background-color: #fff;
  }
  .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: 2.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .l-header__inner {
      padding-inline: 20px;
    }
  }
  .l-header__logo {
    width: 55.3333333333vw;
    height: auto;
  }
  @media screen and (min-width: 768px) {
    .l-header__logo {
      width: 415px;
    }
  }
  .l-header__logo img {
    width: 100%;
    height: 100%;
  }
}
/*========================================
  メインコンテンツ
========================================*/
@layer layout {}
/* ========================================
  ヘッダーのナビゲーション（グローバルナビ）
======================================== */
@layer layout {
  .l-nav.is-expanded .l-nav__body {
    visibility: visible;
    opacity: 1;
  }
  .l-nav__btn {
    position: relative;
    display: grid;
    width: 6.6666666667vw;
    height: 8.8vw;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none;
    border: none;
  }
  @media screen and (min-width: 768px) {
    .l-nav__btn {
      width: 50px;
      height: 66px;
    }
  }
  .l-nav__btn.l-nav__btn--close {
    position: absolute;
    top: 6.1333333333vw;
    right: 2.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .l-nav__btn.l-nav__btn--close {
      top: 46px;
      right: 20px;
    }
  }
  .l-nav__btn.l-nav__btn--close .l-nav__lines {
    width: 6.6666666667vw;
    height: 4.4vw;
  }
  @media screen and (min-width: 768px) {
    .l-nav__btn.l-nav__btn--close .l-nav__lines {
      width: 50px;
      height: 33px;
    }
  }
  .l-nav__btn.l-nav__btn--close .l-nav__line {
    background-color: #fff;
  }
  .l-nav__btn.l-nav__btn--close .l-nav__line.is-1 {
    transform: rotate(33deg);
  }
  .l-nav__btn.l-nav__btn--close .l-nav__line.is-2 {
    transform: rotate(-33deg);
  }
  .l-nav__btn.l-nav__btn--close .l-nav__menu-text {
    color: #fff;
  }
  .l-nav__lines {
    position: relative;
    display: block;
    width: 6.6666666667vw;
    height: 5.0666666667vw;
  }
  @media screen and (min-width: 768px) {
    .l-nav__lines {
      width: 50px;
      height: 38px;
    }
  }
  .l-nav__line {
    position: absolute;
    inset-block: 0;
    display: block;
    width: 100%;
    height: 2px;
    margin-block: auto;
    background-color: var(--main);
  }
  .l-nav__line.is-1 {
    transform: translateY(-1.7333333333vw);
  }
  @media screen and (min-width: 768px) {
    .l-nav__line.is-1 {
      transform: translateY(-13px);
    }
  }
  .l-nav__line.is-3 {
    transform: translateY(1.7333333333vw);
  }
  @media screen and (min-width: 768px) {
    .l-nav__line.is-3 {
      transform: translateY(13px);
    }
  }
  .l-nav__menu-text {
    font-size: 2vw;
    font-weight: 500;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .l-nav__menu-text {
      font-size: 15px;
    }
  }
  .l-nav__body {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 99;
    display: block;
    visibility: hidden;
    width: min(100%, 750px);
    height: 100vh;
    height: 100svh;
    padding-inline: 6.6666666667vw;
    padding-top: 17.3333333333vw;
    margin-inline: auto;
    overflow: auto;
    overscroll-behavior-y: contain;
    background: var(--primary-color);
    opacity: 0;
    transition: 0.3s ease-in;
  }
  @media screen and (min-width: 768px) {
    .l-nav__body {
      padding-inline: 50px;
      padding-top: 130px;
    }
  }
  .l-nav__list {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .l-nav__item {
    margin-bottom: 2.6666666667vw;
    border-bottom: 1px solid #fff;
  }
  @media screen and (min-width: 768px) {
    .l-nav__item {
      margin-bottom: 20px;
    }
  }
  .l-nav__item:last-child {
    margin-bottom: 0;
  }
  .l-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 3.3333333333vw;
    font-size: 2.9333333333vw;
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    transition: color 0.2s;
  }
  @media screen and (min-width: 768px) {
    .l-nav__link {
      padding-block: 25px;
      font-size: 22px;
    }
  }
  .l-nav__link::after {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 3.2vw;
    height: 3.2vw;
    margin-block: auto;
    content: "";
    background: url("../img/icon_arrow.svg") no-repeat center center/contain;
  }
  @media screen and (min-width: 768px) {
    .l-nav__link::after {
      width: 24px;
      height: 24px;
    }
  }
  @media (hover: hover) {
    .l-nav__link:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }
  }
}
/* ========================================
  ページ全体のレイアウト
======================================== */
@layer layout {
  .l-page {
    display: grid;
    grid-template: "header" var(--header-h) "main" 1fr "footer" auto/1fr;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }
  .l-page__header {
    grid-area: header;
  }
  .l-page__main {
    grid-area: main;
    padding-bottom: 26.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .l-page__main {
      padding-bottom: 200px;
    }
  }
  .l-page__footer {
    grid-area: footer;
  }
}
@layer component {
  .c-btn, .c-btn-white, .c-btn-blue, .c-btn-yellow, .c-btn-teal, .c-btn-primary {
    --btn-w: auto;
    --btn-h: auto;
    --btn-padding-x: 1rem;
    --btn-padding-y: 0.5rem;
    --btn-border-width: 2px;
    --btn-border-color: transparent;
    --btn-bg-color: transparent;
    --btn-color: var(--main
    );
    --btn-hover-border-color: var(--main);
    --btn-hover-bg: var(--main);
    --btn-hover-color: #fff;
    --btn-border-radius: 100vmax;
    --btn-focus-ring-color: rgb(var(--primary-color-rgb), 0.25);
    --btn-focus-ring-width: 0.25rem;
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0.5em;
    place-content: center;
    align-items: center;
    width: min(100%, var(--btn-w));
    height: var(--btn-h);
    padding-block: var(--btn-padding-y);
    padding-inline: var(--btn-padding-x);
    font-size: 4vw;
    font-weight: 700;
    line-height: 1.1;
    color: var(--btn-color);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background-color: var(--btn-bg-color);
    border: var(--btn-border-width) solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
  }
  @media screen and (min-width: 768px) {
    .c-btn, .c-btn-white, .c-btn-blue, .c-btn-yellow, .c-btn-teal, .c-btn-primary {
      font-size: 30px;
    }
  }
  @media (any-hover: hover) {
    .c-btn, .c-btn-white, .c-btn-blue, .c-btn-yellow, .c-btn-teal, .c-btn-primary {
      transition: border 0.3s, background-color 0.3s, color 0.3s;
    }
    .c-btn:hover, .c-btn-white:hover, .c-btn-blue:hover, .c-btn-yellow:hover, .c-btn-teal:hover, .c-btn-primary:hover {
      --btn-border-color: var(--btn-hover-border-color);
      --btn-bg-color: var(--btn-hover-bg);
      --btn-color: var(--btn-hover-color);
    }
  }
  .c-btn:focus-visible, .c-btn-white:focus-visible, .c-btn-blue:focus-visible, .c-btn-yellow:focus-visible, .c-btn-teal:focus-visible, .c-btn-primary:focus-visible {
    outline: var(--btn-focus-ring-width) solid var(--btn-focus-ring-color);
    outline-offset: 2px;
  }
  .c-btn:active, .c-btn-white:active, .c-btn-blue:active, .c-btn-yellow:active, .c-btn-teal:active, .c-btn-primary:active {
    transform: translateY(1px);
  }
  .c-btn:disabled, .c-btn-white:disabled, .c-btn-blue:disabled, .c-btn-yellow:disabled, .c-btn-teal:disabled, .c-btn-primary:disabled, .c-btn[aria-disabled=true], [aria-disabled=true].c-btn-white, [aria-disabled=true].c-btn-blue, [aria-disabled=true].c-btn-yellow, [aria-disabled=true].c-btn-teal, [aria-disabled=true].c-btn-primary {
    pointer-events: none;
    opacity: 0.65;
  }
  .c-btn-primary {
    --btn-border-color: var(--primary-color);
    --btn-bg-color: var(--primary-color);
    --btn-color: #fff;
  }
  @media (any-hover: hover) {
    .c-btn-primary {
      --btn-hover-border-color: var(--primary-color);
      --btn-hover-bg: #fff;
      --btn-hover-color: var(--primary-color);
    }
  }
  .c-btn-teal {
    --btn-border-color: var(--color-teal);
    --btn-bg-color: var(--color-teal);
    --btn-color: #fff;
  }
  @media (any-hover: hover) {
    .c-btn-teal {
      --btn-hover-border-color: var(--color-teal);
      --btn-hover-bg: #fff;
      --btn-hover-color: var(--color-teal);
    }
  }
  .c-btn-yellow {
    --btn-border-color: var(--color-yellow);
    --btn-bg-color: var(--color-yellow);
    --btn-color: #fff;
  }
  @media (any-hover: hover) {
    .c-btn-yellow {
      --btn-hover-border-color: var(--color-yellow);
      --btn-hover-bg: #fff;
      --btn-hover-color: var(--color-yellow);
    }
  }
  .c-btn-blue {
    --btn-border-color: var(--color-blue);
    --btn-bg-color: var(--color-blue);
    --btn-color: #fff;
  }
  @media (any-hover: hover) {
    .c-btn-blue {
      --btn-hover-border-color: var(--color-blue);
      --btn-hover-bg: #fff;
      --btn-hover-color: var(--color-blue);
    }
  }
  .c-btn-white {
    --btn-border-color: #fff;
    --btn-bg-color: #fff;
    --btn-color: #007FC5;
  }
  @media (any-hover: hover) {
    .c-btn-white {
      --btn-hover-border-color: #007FC5;
      --btn-hover-bg: #007FC5;
      --btn-hover-color: #fff;
    }
  }
  .c-btn-size-default {
    --btn-w: 500px;
    --btn-h: 90px;
  }
  @media screen and (max-width: 767px) {
    .c-btn-size-default {
      --btn-w: 66.6666666667vw;
      --btn-h: 12vw;
    }
  }
  .c-btn-shadow {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  }
}
@layer component {
  .c-container {
    width: min(100% - var(--container-space), var(--container-w));
    margin-inline: auto;
  }
}
@layer component {}
@layer project {
  .p-form__row {
    font-size: 2.6666666667vw;
    font-weight: 500;
    letter-spacing: 0.015em;
  }
  @media screen and (min-width: 768px) {
    .p-form__row {
      font-size: 20px;
    }
  }
  .p-form__row + .p-form__row {
    margin-top: 2.4vw;
  }
  @media screen and (min-width: 768px) {
    .p-form__row + .p-form__row {
      margin-top: 18px;
    }
  }
  .p-form__label {
    line-height: 1.3;
  }
  .p-form__required {
    font-size: 3.3333333333vw;
    color: #F00;
  }
  @media screen and (min-width: 768px) {
    .p-form__required {
      font-size: 25px;
    }
  }
  .p-form__any {
    font-size: 2.4vw;
    line-height: 1.5;
    color: #6A6A6A;
  }
  @media screen and (min-width: 768px) {
    .p-form__any {
      font-size: 18px;
    }
  }
  .p-form__input {
    margin-top: 1.3333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-form__input {
      margin-top: 10px;
    }
  }
  .p-form__input input[type=text],
  .p-form__input input[type=tel],
  .p-form__input input[type=email],
  .p-form__input textarea {
    width: 100%;
    height: 7.3333333333vw;
    padding: 0.6666666667vw 1.3333333333vw;
    border: 1px solid #707070;
    border-radius: 0.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-form__input input[type=text],
    .p-form__input input[type=tel],
    .p-form__input input[type=email],
    .p-form__input textarea {
      height: 55px;
      padding: 5px 10px;
      border-radius: 5px;
    }
  }
  .p-form__input input[type=text]::placeholder,
  .p-form__input input[type=tel]::placeholder,
  .p-form__input input[type=email]::placeholder,
  .p-form__input textarea::placeholder {
    color: #6A6A6A;
  }
  .p-form__input textarea {
    height: 26.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-form__input textarea {
      height: 200px;
    }
  }
  .p-form__input textarea#consultation-date {
    height: 10.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-form__input textarea#consultation-date {
      height: 80px;
    }
  }
  .p-form__schedule {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1em;
    color: #6A6A6A;
    letter-spacing: 0.01em;
  }
  .p-form__privacy {
    margin-top: 7.4666666667vw;
    font-size: 2.4vw;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .p-form__privacy {
      margin-top: 56px;
      font-size: 18px;
    }
  }
  .p-form__privacy-link {
    color: #F00;
  }
  @media (hover: hover) {
    .p-form__privacy-link:hover {
      text-decoration: underline;
    }
  }
  .p-form__btn-wrap {
    margin-top: 4vw;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .p-form__btn-wrap {
      margin-top: 30px;
    }
  }
  fieldset {
    padding: 0;
    margin: 0;
    border: none;
  }
}
@layer project {
  .p-fv {
    margin-top: -1.3333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-fv {
      margin-top: -10px;
    }
  }
}
@layer project {
  .p-floating-bnr {
    position: sticky;
    bottom: 26.6666666667vw;
    z-index: 98;
    height: 0;
    padding-right: 1.3333333333vw;
    margin-top: -26.6666666667vw;
    text-align: right;
  }
  @media screen and (min-width: 768px) {
    .p-floating-bnr {
      bottom: 200px;
      padding-right: 10px;
      margin-top: -200px;
    }
  }
  .p-floating-bnr__link {
    position: relative;
    display: inline-block;
  }
  @media (hover: hover) {
    .p-floating-bnr__link {
      transition: transform 0.3s;
    }
    .p-floating-bnr__link:hover {
      transform: scale(1.05);
    }
  }
  .p-floating-bnr__link img {
    width: 26.6666666667vw;
    height: 26.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-floating-bnr__link img {
      width: 200px;
      height: 200px;
    }
  }
}
@layer project {
  .p-voice__head {
    padding-block: 26.6666666667vw 11.4666666667vw;
    background: url("../img/illust_01.png") no-repeat, url("../img/illust_02.png") no-repeat;
    background-position: 0 8vw, right 0 bottom 4vw;
    background-size: 86.6666666667vw 14.6666666667vw, 12.8vw 20.1333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-voice__head {
      padding-block: 200px 86px;
      background-position: 0 60px, right 0 bottom 30px;
      background-size: 650px 110px, 96px 151px;
    }
  }
  .p-voice__ttl {
    font-size: 7.3333333333vw;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-voice__ttl {
      font-size: 55px;
    }
  }
  .p-voice__lead {
    margin-top: 4.5333333333vw;
    font-size: 4vw;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-voice__lead {
      margin-top: 34px;
      font-size: 30px;
    }
  }
  .p-voice__list {
    display: grid;
    gap: 10.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-voice__list {
      gap: 80px;
    }
  }
  .p-voice__img img {
    width: 100%;
  }
  .p-voice__sttl {
    margin-top: 4.6666666667vw;
    font-size: 5.6vw;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-voice__sttl {
      margin-top: 35px;
      font-size: 42px;
    }
  }
  .p-voice__text {
    margin-top: 3.2vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
  }
  @media screen and (min-width: 768px) {
    .p-voice__text {
      margin-top: 24px;
      font-size: 28px;
    }
  }
  .p-voice__btn-wrap {
    margin-top: 10.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-voice__btn-wrap {
      margin-top: 80px;
    }
  }
}
@layer project {
  .p-interview {
    margin-top: 24vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview {
      margin-top: 180px;
    }
  }
  .p-interview__ttl {
    display: grid;
    gap: 1.3333333333vw;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.08em;
  }
  @media screen and (min-width: 768px) {
    .p-interview__ttl {
      gap: 10px;
    }
  }
  .p-interview__ttl-en {
    font-size: 8vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview__ttl-en {
      font-size: 60px;
    }
  }
  .p-interview__ttl-ja {
    font-size: 3.7333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview__ttl-ja {
      font-size: 28px;
    }
  }
  .p-interview__list {
    display: grid;
    gap: 10.6666666667vw;
    margin-top: 10.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview__list {
      gap: 80px;
      margin-top: 80px;
    }
  }
  @media (hover: hover) {
    .p-interview__link .p-interview__img img {
      transition: transform 0.3s;
    }
    .p-interview__link .p-interview__text span {
      position: relative;
      background: linear-gradient(var(--main), var(--main)) 100% 100%/0 2px no-repeat;
      transition: background-size 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    .p-interview__link:hover .p-interview__img img {
      transform: scale(1.05);
    }
    .p-interview__link:hover .p-interview__text span {
      background-position: 0 100%;
      background-size: 100% 2px;
    }
  }
  .p-interview__img img {
    border-radius: 4vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview__img img {
      border-radius: 30px;
    }
  }
  .p-interview__cat {
    display: inline-grid;
    place-items: center;
    padding: 0.5333333333vw 3.4666666667vw;
    margin-top: 3.4666666667vw;
    font-size: 2.6666666667vw;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    background-color: #FBC52D;
    border-radius: 100vmax;
  }
  @media screen and (min-width: 768px) {
    .p-interview__cat {
      padding: 4px 26px;
      margin-top: 26px;
      font-size: 20px;
    }
  }
  .p-interview__sttl {
    margin-top: 2.6666666667vw;
    font-size: 3.3333333333vw;
    font-weight: 700;
    line-height: 1.2;
  }
  @media screen and (min-width: 768px) {
    .p-interview__sttl {
      margin-top: 20px;
      font-size: 25px;
    }
  }
  .p-interview__text {
    margin-top: 1.8666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.03em;
  }
  @media screen and (min-width: 768px) {
    .p-interview__text {
      margin-top: 14px;
      font-size: 28px;
    }
  }
  .p-interview__btn-wrap {
    margin-top: 9.8666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-interview__btn-wrap {
      margin-top: 74px;
    }
  }
}
@layer project {
  .p-support {
    margin-top: 16.8vw;
    background: url("../img/bg_01.png") no-repeat, url("../img/bg_02.png") no-repeat;
    background-position: top 0 left 50%, bottom 0 left 76%;
    background-size: 160vw 53.3333333333vw, 186vw 56.5333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-support {
      margin-top: 126px;
      background-size: 1200px 400px, 1395px 424px;
    }
  }
  .p-support__inner {
    padding-block: 10.1333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__inner {
      padding-block: 76px;
    }
  }
  .p-support__box {
    padding: 5.3333333333vw 4.5333333333vw 4.2666666667vw;
    background-color: #fff;
    border-radius: 4vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__box {
      padding: 40px 34px 32px;
      border-radius: 30px;
    }
  }
  .p-support__ttl {
    font-size: 6vw;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-support__ttl {
      font-size: 45px;
    }
  }
  .p-support__lead {
    margin-top: 1.0666666667vw;
    font-size: 2.6666666667vw;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.01em;
  }
  @media screen and (min-width: 768px) {
    .p-support__lead {
      margin-top: 8px;
      font-size: 20px;
    }
  }
  .p-support__list {
    display: grid;
    gap: 10vw;
    margin-top: 6vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__list {
      gap: 75px;
      margin-top: 45px;
    }
  }
  .p-support__item {
    padding: 3.3333333333vw 4.5333333333vw;
    border-radius: 4vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__item {
      padding: 25px 34px;
      border-radius: 30px;
    }
  }
  .p-support__item.p-support__item--1 {
    background-color: #ACE1EC;
  }
  .p-support__item.p-support__item--2 {
    background-color: #DAEEE1;
  }
  .p-support__item.p-support__item--3 {
    background-color: #8AC4E4;
  }
  .p-support__item.p-support__item--3 .p-support__price {
    padding-left: 2vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__item.p-support__item--3 .p-support__price {
      padding-left: 15px;
    }
  }
  .p-support__sttl {
    font-size: 5.0666666667vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.01em;
  }
  @media screen and (min-width: 768px) {
    .p-support__sttl {
      font-size: 38px;
    }
  }
  .p-support__catch {
    display: grid;
    place-items: center;
    min-height: 7.7333333333vw;
    margin-top: 2.6666666667vw;
    font-size: 2.5333333333vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    background-color: #fff;
    border-radius: 100vmax;
  }
  @media screen and (min-width: 768px) {
    .p-support__catch {
      min-height: 58px;
      margin-top: 20px;
      font-size: 19px;
    }
  }
  .p-support__price {
    display: flex;
    gap: 0.6666666667vw;
    align-items: center;
    justify-content: center;
    font-size: 4.4vw;
    font-weight: 700;
    line-height: 1;
  }
  @media screen and (min-width: 768px) {
    .p-support__price {
      gap: 5px;
      font-size: 33px;
    }
  }
  .p-support__price-num {
    padding-bottom: 1.3333333333vw;
    font-size: 14.6666666667vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__price-num {
      padding-bottom: 10px;
      font-size: 110px;
    }
  }
  .p-support__price-unit {
    align-self: end;
    padding-bottom: 2.6666666667vw;
    font-size: 5.7333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__price-unit {
      padding-bottom: 20px;
      font-size: 43px;
    }
  }
  .p-support__text {
    margin-top: 1.0666666667vw;
    font-size: 2.9333333333vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .p-support__text {
      margin-top: 8px;
      font-size: 22px;
    }
  }
  .p-support__note {
    margin-top: 1.3333333333vw;
    font-size: 2.1333333333vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .p-support__note {
      margin-top: 10px;
      font-size: 16px;
    }
  }
  .p-support__btn-wrap {
    margin-top: 6.1333333333vw;
  }
  @media screen and (min-width: 768px) {
    .p-support__btn-wrap {
      margin-top: 46px;
    }
  }
}
@layer project {
  .p-access {
    padding-bottom: 28vw;
    background-color: #FFF8E3;
  }
  @media screen and (min-width: 768px) {
    .p-access {
      padding-bottom: 210px;
    }
  }
  .p-access__head-inner {
    padding-block: 6.4vw 4vw;
  }
  @media screen and (min-width: 768px) {
    .p-access__head-inner {
      padding-block: 48px 30px;
    }
  }
  .p-access__ttl {
    margin-right: -1em;
    font-size: 5.7333333333vw;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  @media screen and (min-width: 768px) {
    .p-access__ttl {
      font-size: 43px;
    }
  }
  .p-access__lead {
    margin-top: 1.0666666667vw;
    font-size: 3.3333333333vw;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-access__lead {
      margin-top: 8px;
      font-size: 25px;
    }
  }
  .p-access__text {
    font-size: 3.3333333333vw;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  @media screen and (min-width: 768px) {
    .p-access__text {
      font-size: 25px;
    }
  }
  .p-access__map {
    line-height: 1;
  }
  .p-access__map iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 750/500;
  }
}
@layer utilities {
  @media screen and (max-width: 767px) {
    .u-hidden-ltSP {
      display: none;
    }
  }
  @media screen and (max-width: 991px) {
    .u-hidden-ltTAB {
      display: none;
    }
  }
  @media screen and (min-width: 768px) {
    .u-hidden-gtTAB {
      display: none;
    }
  }
  @media screen and (min-width: 992px) {
    .u-hidden-gtPC {
      display: none;
    }
  }
}
@layer utilities {
  .screen-reader-text,
  .u-screen-reader {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal;
  }
}
@layer utilities {
  .u-ta-left {
    text-align: left;
  }
  .u-ta-center {
    text-align: center;
  }
  .u-ta-right {
    text-align: right;
  }
  @media screen and (max-width: 767px) {
    .u-SP-ta-left {
      text-align: left;
    }
    .u-SP-ta-center {
      text-align: center;
    }
    .u-SP-ta-right {
      text-align: right;
    }
  }
}
@layer utilities {
  .u-text-uppercase {
    text-transform: uppercase;
  }
}
@layer utilities {
  .u-text-br {
    display: block;
  }
}