@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..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;
  --en-sans: "Rubik", sans-serif;
  --base: #fff;
  --main: #333;
  --accent: #e94909;
  --sp-base-fs: 4vw;
  --sp-pad: 4vw;
}

@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;
  }
  summary {
    display: block;
  }
  summary::-webkit-details-marker {
    display: none;
  }
}
@layer foundation {
  html {
    height: 100%;
    scroll-behavior: smooth;
    font-size: 1.1016949153vw;
  }
  body {
    text-size-adjust: 100%;
    font-feature-settings: "palt" 1;
    font-family: var(--sans-serif);
    line-height: 1.8;
    min-width: 320px;
    color: var(--main);
    background: var(--base);
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :focus-visible {
    outline: 2px solid blue;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }
  img,
  svg,
  iframe,
  video,
  picture {
    max-width: 100%;
  }
  img {
    letter-spacing: 0;
    font-size: 12px;
    height: auto;
  }
  a {
    text-decoration: none;
    word-break: break-all;
    color: currentColor;
  }
  @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] {
    cursor: pointer;
    font: inherit;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  label {
    cursor: pointer;
    display: inline-block;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.5;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary {
    list-style: none;
    display: block;
    cursor: pointer;
    user-select: none;
  }
}
/*========================================
  コンテンツ（メインコンテンツとサイドバーのラッパー）
========================================*/
@layer layout {}
/*========================================
  サイト共通のフッター
========================================*/
@layer layout {
  .l-footer {
    margin-top: 10.9375rem;
    font-size: 1.0625rem;
    line-height: 1.6470588235;
  }
  @media screen and (max-width: 767px) {
    .l-footer {
      margin-top: 30.6666666667vw;
      padding-left: 6vw;
      padding-right: 6vw;
    }
  }
  @media screen and (min-width: 768px) {
    .l-footer__row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: center;
      gap: 0 7.5rem;
    }
  }
  @media screen and (min-width: 768px) {
    .l-footer__logo img {
      width: 34.375rem;
    }
  }
  @media screen and (max-width: 767px) {
    .l-footer__logo {
      text-align: center;
    }
    .l-footer__logo img {
      width: 64vw;
    }
  }
  @media screen and (max-width: 767px) {
    .l-footer__info {
      margin-top: 8vw;
      font-size: 3.4666666667vw;
    }
  }
  .l-footer__contact {
    margin-top: 2.5rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__contact {
      margin-top: 4vw;
      font-size: 3.4666666667vw;
    }
  }
  .l-footer__contact-wbtn {
    margin-top: 2.1875rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__contact-wbtn {
      margin-top: 8vw;
    }
  }
  @media screen and (max-width: 767px) {
    .l-footer__sns {
      text-align: center;
      margin-top: 18.6666666667vw;
    }
    .l-footer__sns svg {
      width: 14.6666666667vw;
      height: 14.6666666667vw;
    }
  }
  .l-footer__copyright {
    text-align: center;
    margin-top: 13.75rem;
    margin-bottom: 4.375rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright {
      margin-top: 12vw;
    }
  }
  .l-footer__copyright-logo {
    margin-bottom: 2.5rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright-logo {
      margin-bottom: 8vw;
    }
  }
  .l-footer__copyright-logo img {
    width: 8.4375rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright-logo img {
      width: 33.3333333333vw;
    }
  }
  .l-footer__copyright-text {
    font-size: 0.75rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright-text {
      font-size: 2.6666666667vw;
    }
  }
}
/*========================================
  サイト共通のヘッダー
========================================*/
@layer layout {
  .l-header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  @media screen and (min-width: 768px) {
    .l-header {
      padding: 3.125rem 3.75rem;
    }
  }
  .l-header__inner.is-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .l-header__logo {
    width: 15.625rem;
  }
  @media screen and (min-width: 768px) {
    .l-header__nav {
      display: flex;
      justify-content: flex-end;
    }
  }
}
/*========================================
  メインコンテンツ
========================================*/
@layer layout {}
/*========================================
  ヘッダーのナビゲーション（グローバルナビ）
========================================*/
@layer layout {
  @media screen and (max-width: 767px) {
    .l-nav.is-expanded .l-nav__body {
      visibility: visible;
      right: 0;
      transform: translateX(0%);
    }
  }
  @media screen and (max-width: 767px) {
    .l-nav__logo {
      position: absolute;
      left: 2.6666666667vw;
      top: 2.6666666667vw;
      width: 51.0666666667vw;
    }
  }
  .l-nav__btn {
    position: relative;
    z-index: 100;
    width: 18.9333333333vw;
    height: 18.9333333333vw;
    background-color: transparent;
    border: 0;
  }
  @media screen and (max-width: 767px) {
    .l-nav__btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .l-nav__btn svg {
    transform: translate(10%, 20%);
    width: 8.2666666667vw;
    height: 8.2666666667vw;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-1 {
    transform-origin: left top;
    transform: rotate(45deg);
    translate: 10% 0;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-2 {
    opacity: 0;
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-3 {
    transform-origin: left bottom;
    translate: 35% 4%;
    transform: rotate(-45deg);
  }
  .l-nav__line {
    transition-property: opacity, transform;
    transition-duration: 0.25s;
  }
  @media screen and (max-width: 767px) {
    .l-nav__body {
      background: #fff;
      width: 100%;
      height: 100%;
      display: block;
      visibility: hidden;
      position: fixed;
      top: 0;
      right: -100%;
      overflow: auto;
      overscroll-behavior-y: contain;
      transition: 0.3s ease-in;
      z-index: 99;
      transform: translateX(100%);
    }
  }
  @media screen and (min-width: 768px) {
    .l-nav__list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  @media screen and (max-width: 767px) {
    .l-nav__list {
      padding-top: 66vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12vw;
    }
  }
  @media screen and (min-width: 768px) {
    .l-nav__item {
      margin-left: 2.375rem;
    }
  }
  .l-nav__item svg {
    fill: #333;
    fill-rule: evenodd;
    aspect-ratio: var(--my-width)/var(--my-height);
  }
  @media screen and (min-width: 768px) {
    .l-nav__item svg {
      height: 0.8125rem;
    }
  }
  @media screen and (max-width: 767px) {
    .l-nav__item svg {
      height: 4vw;
    }
  }
  @media screen and (min-width: 768px) {
    .l-nav__sns {
      margin-left: 1.875rem;
    }
  }
  @media screen and (max-width: 767px) {
    .l-nav__sns-box {
      position: absolute;
      z-index: 100;
      right: 19.3333333333vw;
      top: 4.5333333333vw;
    }
  }
}
/*========================================
  ページ全体のレイアウト
========================================*/
@layer layout {
  .l-page__content {
    padding-top: 22.5rem;
  }
  @media screen and (max-width: 767px) {
    .l-page__content {
      padding-top: 37.3333333333vw;
    }
  }
}
@layer component {
  .c-btn {
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 1.1;
    text-decoration: none;
    user-select: none;
    border: 0;
  }
  .c-btn:hover {
    text-decoration: none;
  }
}
@layer component {
  @media screen and (min-width: 768px) {
    .c-container {
      width: 62.5rem;
      max-width: 100%;
      margin-right: auto;
      margin-left: auto;
    }
  }
}
@layer component {
  .c-icon {
    position: relative;
    display: inline-block;
    background: 50% 50% no-repeat;
    background-size: contain;
    vertical-align: top;
    line-height: 1;
    font-style: normal;
  }
}
/*========================================
  ボタン
========================================*/
@layer project {
  @media (hover: hover) {
    .p-btn-a {
      transition: 0.25s filter;
    }
    .p-btn-a:hover {
      filter: brightness(120%);
    }
  }
  .p-btn-b {
    border: 4px solid var(--main);
    border-radius: 3.75rem;
    background: #fff;
    padding: 1.875rem;
    width: 28.75rem;
    max-width: 100%;
    text-align: center;
    transition: 0.25s background;
  }
  @media screen and (max-width: 767px) {
    .p-btn-b {
      padding: 6.6666666667vw;
      border-width: 2px;
      border-radius: 26.6666666667vw;
      width: 100%;
    }
  }
  .p-btn-b__label-contact {
    width: 9.875rem;
    height: 1.5625rem;
    fill: var(--main);
    transition: 0.25s fill;
  }
  @media screen and (max-width: 767px) {
    .p-btn-b__label-contact {
      width: 28vw;
      height: 4.5333333333vw;
    }
  }
  @media (hover: hover) {
    .p-btn-b:hover {
      background: var(--main);
    }
    .p-btn-b:hover .p-btn-b__label-contact {
      fill: #fff;
    }
  }
  .p-btn-c {
    color: #fff;
    padding: 2.5rem 0.625rem;
    width: 28.75rem;
    font-size: 1.375rem;
    border-radius: 100rem;
    background: #333333;
  }
  .p-btn-c[disabled] {
    opacity: 0.2;
  }
  @media screen and (max-width: 767px) {
    .p-btn-c {
      width: 61.3333333333vw;
      font-size: 3.4666666667vw;
      padding: 5.3333333333vw 1.3333333333vw;
    }
  }
}
/*========================================
  hdr
========================================*/
@layer project {
  .p-page-hdr {
    text-align: center;
    margin-bottom: 3.75rem;
  }
  @media screen and (max-width: 767px) {
    .p-page-hdr {
      margin-bottom: 10.6666666667vw;
    }
  }
  .p-page-hdr__ttl {
    font-weight: 600;
    margin: 0 auto;
  }
  .p-page-hdr__ttl img {
    width: calc(var(--my-width) / 16 * 1rem);
  }
  @media screen and (max-width: 767px) {
    .p-page-hdr__ttl img {
      width: calc(var(--my-width) / 500 * 100vw);
    }
  }
}
@layer project {
  .p-icon-insta {
    width: 2.8125rem;
    height: 2.8125rem;
  }
  @media screen and (max-width: 767px) {
    .p-icon-insta {
      width: 9.3333333333vw;
      height: 9.3333333333vw;
    }
  }
  .p-icon-arrow {
    width: 1rem;
    height: 1.5625rem;
    stroke: #000;
  }
  @media screen and (max-width: 767px) {
    .p-icon-arrow {
      width: 2.1333333333vw;
      height: 3.3333333333vw;
    }
  }
}
/*========================================
  article
========================================*/
@layer project {
  @media screen and (min-width: 768px) {
    .p-article {
      width: 61.5625rem;
      margin: 0 auto;
    }
  }
  .p-article__hdr {
    margin-bottom: 2.5rem;
    font-weight: 600;
  }
  @media screen and (max-width: 767px) {
    .p-article__hdr {
      margin-bottom: 4vw;
    }
  }
  .p-article__date {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
  }
  @media screen and (max-width: 767px) {
    .p-article__date {
      margin-bottom: 2.6666666667vw;
      font-size: 4vw;
    }
  }
  .p-article__ttl {
    font-size: 1.5rem;
  }
  @media screen and (max-width: 767px) {
    .p-article__ttl {
      font-size: 6.6666666667vw;
    }
  }
  .p-article__body {
    line-height: 2.2;
  }
  @media screen and (max-width: 767px) {
    .p-article__body {
      font-size: 4.5333333333vw;
    }
  }
  .p-article__body > * + * {
    margin: 2em 0;
  }
  .p-article__body ul {
    list-style: disc;
    margin-left: 20px;
  }
  .p-article__wbtn {
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
  }
  @media screen and (min-width: 768px) {
    .p-article__wbtn {
      margin-top: 7.5rem;
    }
  }
  @media screen and (max-width: 767px) {
    .p-article__wbtn {
      margin-top: 16vw;
      font-size: 4.5333333333vw;
    }
  }
  .p-article__wbtn a {
    display: inline-flex;
    gap: 0.625rem;
  }
  @media (hover: hover) {
    .p-article__wbtn a:hover {
      text-decoration: underline;
    }
  }
}
.p-form__agree .wpcf7-list-item {
  margin: 0;
}

@layer project {
  .p-form fieldset {
    display: contents;
    border: 0;
    padding: 0;
    border: 0;
  }
  .p-form input[type=checkbox] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--main);
    border-radius: 0.3125rem;
  }
  @media screen and (max-width: 767px) {
    .p-form input[type=checkbox] {
      width: 4vw;
      height: 4vw;
      border-radius: 0.6666666667vw;
    }
  }
  .p-form input[type=checkbox]:checked {
    background: url("../img/icon/check.svg") no-repeat center center/0.875rem 0.6875rem;
  }
  @media screen and (max-width: 767px) {
    .p-form input[type=checkbox]:checked {
      background-size: 2.6666666667vw 2vw;
    }
  }
  .p-form__row + .p-form__row {
    margin-top: 3.75rem;
  }
  .p-form__label {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    gap: 0.9375rem;
    margin-bottom: 0.9375rem;
  }
  @media screen and (max-width: 767px) {
    .p-form__label {
      gap: 2.6666666667vw;
      font-size: 4vw;
      align-items: center;
      margin-bottom: 4vw;
    }
  }
  .p-form__label .c-icon {
    width: 3.75rem;
    height: 1.875rem;
    border-radius: 0.625rem;
    background: #c9c9c9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
  }
  @media screen and (max-width: 767px) {
    .p-form__label .c-icon {
      width: 10.6666666667vw;
      height: 5.3333333333vw;
      font-size: 2.9333333333vw;
    }
  }
  .p-form__label .c-icon.is-required {
    background: #e94909;
    color: #fff;
  }
  @media screen and (max-width: 767px) {
    .p-form__input {
      font-size: 4vw;
    }
  }
  .p-form__input input[type=text],
  .p-form__input input[type=email],
  .p-form__input input[type=tel],
  .p-form__input textarea {
    background: #eee;
    padding: 1em 1.6em;
    border: 1px solid var(--main);
    width: 100%;
    border: 0;
    border-radius: 0.625em;
  }
  @media screen and (max-width: 767px) {
    .p-form__input input[type=text],
    .p-form__input input[type=email],
    .p-form__input input[type=tel],
    .p-form__input textarea {
      font-size: 4vw;
    }
  }
  .p-form__input textarea + label,
  .p-form__input input[type=checkbox] + label,
  .p-form__input input[type=radio] + label {
    cursor: pointer;
  }
  .p-form__input textarea:focus + label,
  .p-form__input input[type=checkbox]:focus + label,
  .p-form__input input[type=radio]:focus + label {
    text-decoration: underline;
  }
  .p-form__input textarea:disabled + label,
  .p-form__input input[type=checkbox]:disabled + label,
  .p-form__input input[type=radio]:disabled + label {
    cursor: not-allowed;
    color: #ccc;
  }
  @media screen and (max-width: 767px) {
    .p-form__input textarea {
      height: 53.3333333333vw;
    }
  }
  .p-form__agree-text {
    text-align: center;
    margin-top: 3.75rem;
    font-size: 1.125rem;
  }
  @media screen and (max-width: 767px) {
    .p-form__agree-text {
      font-size: 3.4666666667vw;
    }
  }
  .p-form__agree-text a {
    text-decoration: underline;
  }
  .p-form__agree {
    margin-top: 1.25rem;
    font-size: 1.125rem;
  }
  .p-form__agree label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
  }
  .p-form__agree label {
    margin-left: -2em;
  }
  @media screen and (max-width: 767px) {
    .p-form__agree {
      font-size: 4vw;
    }
  }
  .p-form__wbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4.375rem;
  }
  @media screen and (max-width: 767px) {
    .p-form__wbtn {
      margin-top: 5.3333333333vw;
    }
  }
}
@layer project {
  .p-posts {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    font-weight: 600;
  }
  @media screen and (min-width: 768px) {
    .p-posts {
      font-size: 1.125rem;
    }
  }
  @media screen and (max-width: 767px) {
    .p-posts {
      font-size: 4vw;
      gap: 6.6666666667vw;
    }
  }
  @media screen and (min-width: 768px) {
    .p-posts__link {
      display: grid;
      grid-template-columns: 8.125rem 1fr;
    }
  }
  @media screen and (max-width: 767px) {
    .p-posts__link {
      display: flex;
      flex-direction: column;
      gap: 1.3333333333vw;
    }
  }
  @media (hover: hover) {
    .p-posts__link:hover p {
      text-decoration: underline;
    }
  }
  @media screen and (max-width: 767px) {
    .p-posts__ttl {
      font-weight: normal;
    }
  }
}
/*========================================
  pagination
========================================*/
@layer project {
  .p-pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 0.8em;
    font-size: 1.25rem;
    margin-top: 5rem;
  }
  @media screen and (max-width: 767px) {
    .p-pagination {
      gap: 1.3333333333vw;
      font-size: 3.2vw;
      margin-top: 6.6666666667vw;
    }
  }
  .p-pagination > *:not(.next, .last, .prev, .first) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #000;
    width: 3.125rem;
    height: 3.125rem;
    text-decoration: none;
    color: currentColor;
    border-radius: 100px;
    font-size: 1.25rem;
    color: #fff;
  }
  @media screen and (max-width: 767px) {
    .p-pagination > *:not(.next, .last, .prev, .first) {
      width: 9.3333333333vw;
      height: 9.3333333333vw;
      font-size: 3.2vw;
    }
  }
  .p-pagination > *:not(.next, .last, .prev, .first).current {
    background-color: #fff;
    color: var(--main);
  }
  .p-pagination a {
    transition-property: background;
    transition-duration: 0.5s;
  }
  @media (hover: hover) {
    .p-pagination a:hover {
      background-color: var(--accent);
    }
  }
  .p-pagination .prev,
  .p-pagination .next {
    overflow: hidden;
    text-indent: -999px;
    display: block;
    background: url("../img/icon/arrow.svg") 50% 50%/80% auto no-repeat;
  }
  @media screen and (min-width: 768px) {
    .p-pagination .prev,
    .p-pagination .next {
      margin: 0 1.25rem;
    }
  }
  @media (hover: hover) {
    .p-pagination .prev:hover,
    .p-pagination .next:hover {
      background-color: transparent;
    }
  }
  .p-pagination .prev {
    transform: scale(-1, 1);
  }
  .p-pagination .prev, .p-pagination .next, .p-pagination .last, .p-pagination .first {
    border: 0;
    width: auto;
    height: auto;
    padding: 0.2em 0.5em;
    border-radius: 6.25rem;
    transition: 0.25s color;
  }
  @media (hover: hover) {
    .p-pagination .prev:hover, .p-pagination .next:hover, .p-pagination .last:hover, .p-pagination .first:hover {
      color: var(--accent);
    }
  }
}
/*========================================
 * hide
 *
 * クラス : u-hide
========================================*/
@layer utilities {
  .u-hide {
    display: none;
  }
}
@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;
    }
  }
}
/*========================================
 * padding
========================================*/
@layer utilities {
  @media screen and (max-width: 1200px) and (min-width: 767px) {
    .u-PC-pad {
      padding-right: 4%;
      padding-left: 4%;
    }
  }
  @media screen and (max-width: 767px) {
    .u-SP-pad {
      padding-right: var(--sp-pad);
      padding-left: var(--sp-pad);
    }
  }
}
@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;
    }
  }
}