@charset "UTF-8";
/* =====================================================
  1.0 - Foundation
===================================================== */
/*
  Reset & Base
---------------------------------------------- */

/* Global */
*,
::before,
::after,
::backdrop {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* Document & Sections */
:where(html) {
  font-family: var(--base-font-family);
  font-weight: var(--base-font-weight);
  line-break: strict;
  overflow-wrap: anywhere;
  line-height: var(--base-line-height, 1.5);
  color: var(--base-color);
  background-color: var(--base-background);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(body) {
  min-block-size: 100svb;
  overflow-x: clip;
}

/* Grouping content */
:where(section) {
  scroll-margin-block-start: var(--base-scroll-margin);
}

:where(ul, ol) {
  list-style-type: "";
}

/* Text-level semantics */
:where(em, address) {
  font-style: normal;
}

:where(strong) {
  font-weight: 700;
  color: var(--base-strong-color);
}

:where(:any-link) {
  color: unset;
}

/* Embedded content */
:where(img, svg, iframe) {
  display: block flow;
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

/* Tabular data */
:where(table) {
  border-collapse: collapse;
}

/* Forms */
:where(input, button, textarea, select, optgroup) {
  color: unset;
  letter-spacing: inherit;
  word-spacing: inherit;
  font: unset;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary) {
  cursor: pointer;
}

/*
  Variable
-----------------------------------------------------*/

:root {
  /* color */
  --color-main: #6eb4be;
  --color-light-blue: #8cd2de;
  --color-sub: #96b26e;
  --color-dark: #000000;
  --color-grey: #808080;
  --color-light: #ffffff;
  --color-dark-grey: #7d8797;
  --color-grad: linear-gradient(90deg, var(--color-main) 0%, var(--color-sub) 100%);

  /* font family */
  --font-mincho: "dnp-shuei-mincho-pr6", sans-serif;
  --font-gothic: "source-han-sans-japanese", sans-serif;

  /* font size */
  --fs-100: clamp(calc(45 * var(--torem)), 1.978rem + 3.56vw, calc(100 * var(--torem))); /* 2.813rem ≒ 45px */
  --fs-88: clamp(calc(45 * var(--torem)), 2.16rem + 2.78vw, calc(88 * var(--torem))); /* 2.813rem ≒ 45px */
  --fs-70: clamp(calc(30 * var(--torem)), 1.268rem + 2.59vw, calc(70 * var(--torem))); /* 1.875rem = 30px */
  --fs-50: clamp(calc(24 * var(--torem)), 1.106rem + 1.68vw, calc(50 * var(--torem))); /* 1.5rem  = 24px */

  --fs-34: clamp(calc(22 * var(--torem)), 1.193rem + 0.78vw, calc(34 * var(--torem))); /* 1.375rem= 22px */
  --fs-30: clamp(calc(14 * var(--torem)), 0.632rem + 1.04vw, calc(30 * var(--torem))); /* 0.875rem= 14px */

  --fs-24: clamp(calc(14 * var(--torem)), 0.723rem + 0.65vw, calc(24 * var(--torem)));
  --fs-20: clamp(calc(13 * var(--torem)), 0.706rem + 0.45vw, calc(20 * var(--torem)));
  --fs-18: clamp(calc(12 * var(--torem)), 0.659rem + 0.39vw, calc(18 * var(--torem)));
  --fs-16: clamp(calc(10 * var(--torem)), 0.534rem + 0.39vw, calc(16 * var(--torem)));

  @media screen and (min-width: 1200px) {
    /* --fs-100: 5.2vi;
    --fs-88: 4.6vi;
    --fs-70: 3.6vi;
    --fs-50: 2.6vi;
    --fs-34: 1.8vi;
    --fs-30: 1.5vi;
    --fs-28: 28px;
    --fs-24: 24px;
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-16: 16px; */

    --fs-100: 100px;
    --fs-88: 88px;
    --fs-70: 3.6vi;
    --fs-50: 50px;
    --fs-34: 34px;
    --fs-30: 30px;

    --fs-24: 24px;
    --fs-20: 20px;
    --fs-18: 18px;
    --fs-16: 16px;
  }

  /* spacer */
  --space-2xs: clamp(0.875rem, -0.716rem + 6.79vw, 4.375rem);
  --space-xs: clamp(1rem, -1.102rem + 8.97vw, 5.625rem);
  --space-sm: clamp(2rem, -0.5rem + 10.67vw, 7.5rem);
  --space-md: clamp(3rem, 0.386rem + 11.15vw, 8.75rem);
  --space-lg: clamp(4rem, 1.273rem + 11.64vw, 10rem);
  --space-xl: clamp(5rem, 1.591rem + 14.55vw, 12.5rem);
  --space-2xl: clamp(6rem, 1.909rem + 17.45vw, 15rem);
  --space-3xl: clamp(8rem, 2.261rem + 24.48vw, 20.625rem);

  /* offset */
  --offset-md: 5vi;
  --offset-lg: 10vi;

  /* contents size */
  --contents-size-md: 1000px;
  --contents-size-lg: 1200px;
  --contents-size-xl: 1400px;

  /* oveflow container */
  --overflow-1000: max(5vi, calc(100vi - 1000px - (100vi - 1000px) / 2));
  --overflow-1200: max(5vi, calc(100vi - 1200px - (100vi - 1200px) / 2));

  /* tool */
  --torem: calc(1rem / 16);

  /* animation & toransition */
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1.6s;
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);

  /* base */
  --base-background: var(--color-light);
  --base-line-height: 2.5;
  --base-color: var(--color-dark);
  --base-font-family: var(--font-serif-ja);
  --base-font-weight: 400;
  --base-strong-color: var(--color-main);
  --base-scroll-margin: var(--space-2xl);

  /* ヘッダー */
  --header-logo: clamp(1rem, 0.818rem + 0.78vw, 1.75rem);
  --header-pad: 0.5rem;
  --header-height: calc(var(--header-logo) + var(--header-pad) * 2);

  @media screen and (min-width: 960px) {
    --header-pad: 1rem;
  }
}

/*
  Base
-----------------------------------------------------*/
body {
  overflow: scroll;
  font-family: var(--font-gothic);
  font-size: var(--fs-18);
  font-weight: 300;
  letter-spacing: 0.1em;
}
.is-drawer-open body {
  overflow: hidden;

  &::after {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--color-dark-grey);
    opacity: 0.2;
    z-index: 1;
  }
}
p {
  line-height: var(--base-line-height);
}
a,
button {
  text-decoration: none;
  color: var(--color-main);
  transition: color 0.3s;

  &:focus-visible {
    color: var(--color-sub);
    outline: none;
    outline-offset: 1px;
  }

  @media (any-hover) {
    &:hover {
      color: var(--color-sub);
    }
  }
}
code {
  margin-inline: 0.4em;
  padding-block: 0.05em;
  padding-inline: 0.4em;
  color: var(--color-dark);
  background-color: #e8eaee;
}
.eng {
  font-family: var(--font-en);
}

/* =====================================================
  2.0 - Layout
===================================================== */
/*
  Centering
-----------------------------------------------------*/
.l-container {
  container: container / inline-size;
  box-sizing: content-box;
  max-inline-size: var(--container-max-size, none);
  padding-inline: var(--offset-md);
  margin-inline: auto;

  @media screen and (min-width: 1920px) {
    padding-inline: var(--offset-lg);
  }
}
.l-container-max-md {
  --container-max-size: var(--contents-size-md);
}
.l-container-max-lg {
  --container-max-size: var(--contents-size-lg);
}
.l-container-max-xl {
  --container-max-size: var(--contents-size-xl);
}

/*
  Header
-----------------------------------------------------*/
.l-header {
  position: sticky;
  background-color: rgba(255, 255, 255, 1);
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  transition: background-color var(--duration-fast);
}
.l-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
}
.l-header__wrapper {
  display: block flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--header-pad);
  z-index: 10;
  color: var(--base-strong-color);
  line-height: 1;
  transition: background-color 0.2s, border 0.2s, position 0.2s;
}
.l-header__logo {
  font-family: var(--font-gothic);
  font-size: var(--header-logo);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}
/*---- Main ----*/
.l-main {
  position: relative;
  /* overflow: hidden; */
}
.l-main__decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
/*---- Footer Before ----*/
.l-footer__before {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 37vi;

  overflow: hidden;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(105deg, var(--color-main) 0%, var(--color-sub) 100%);
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
  }
  .l-footer__msg {
    margin-inline: 3vi;
    padding-block: clamp(1.875rem, -0.704rem + 11vw, 12.5rem);
    max-inline-size: 1200px;
    font-family: var(--font-mincho);
    font-size: var(--fs-24);
    color: var(--color-light);
    font-weight: 500;
    text-align: center;
    font-feature-settings: "palt" 1;
    overflow-wrap: anywhere;
    word-break: keep-all;
    letter-spacing: 0.05em;
    line-height: 2;
    z-index: 1;
  }
}
.l-footer__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center bottom;
  }
}

.l-footer__line {
  position: absolute;
  inset-inline-start: 52%;
  inset-block-start: 59%;
  inline-size: 102vi;
  transform: translate(-50%, -50%);
  z-index: 1;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
.l-footer__before:has(p) .l-footer__line {
  inset-inline-start: 49%;
  inset-block-start: 47%;
}
@media screen and (min-width: 600px) {
  .l-footer__before {
    min-block-size: 21vi;
  }
  .l-footer__msg {
    letter-spacing: 0.26em;
    line-height: 2.8;
  }
  .l-footer__bg {
    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: center 45%;
    }
  }
  .l-footer__line {
    position: absolute;
    inset-inline-start: 47%;
    inset-block-start: 58%;
    inline-size: 79vi;
  }
  .l-footer__before:has(p) .l-footer__line {
    position: absolute;
    inset-inline-start: 53%;
    inset-block-start: 56%;
    inline-size: 102vi;
  }
}
/*---- Footer ----*/
.l-footer {
  background-color: var(--color-light-blue);
  color: var(--color-light);
}
.l-footer__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-sm) var(--space-xs);
}
.l-footer__info {
  flex-basis: 100%;
}
.l-footer__siteName {
  font-family: var(--font-gothic);
  font-size: var(--fs-30);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.l-footer__address {
  font-family: var(--font-gothic);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.l-footer__company {
  font-size: var(--fs-18);
}
.l-footer__zip {
  font-size: var(--fs-16);
}
.l-footer__loc {
  font-size: var(--fs-16);
}
.l-footerNav {
  display: none;
  opacity: 0;
  visibility: hidden;
}
.l-footerNav__list {
  display: flex;
  justify-content: end;
  column-gap: 2em;
  flex-wrap: wrap;
  font-family: var(--font-gothic);
  font-size: clamp(1rem, 0.5rem + 0.83vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;

  a {
    color: var(--color-light);
  }
}
.l-footer__bottom {
  padding-block-end: 1.5em;
  font-family: var(--font-gothic);
  font-size: var(--fs-20);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}
/* ホバー・フォーカス時のCSS */
.l-footerNav__list a:focus-visible {
  color: var(--color-grey);
}
@media (any-hover) {
  .l-footerNav__list a:hover {
    color: var(--color-grey);
  }
}
/* ↑ここまで（ホバー・フォーカス時のCSS） */

@media screen and (min-width: 600px) {
  .l-footer__wrapper {
    padding-block: var(--space-xs);
  }

  .l-footer__info {
    flex-basis: 35%;
  }
  .l-footerNav {
    display: initial;
    opacity: 1;
    visibility: visible;
    flex-basis: 65%;
  }
  .l-footer__bottom {
    padding-block-end: 2em;
  }
}
@media screen and (min-width: 960px) {
  .l-footer__info {
    flex-basis: 30%;
  }
  .l-footerNav {
    flex-basis: 70%;
  }
  .l-footer__bottom {
    padding-block-end: 3em;
  }
}
/*
  Section
-----------------------------------------------------*/

/*
  Pagination
-----------------------------------------------------*/
.pagination {
  text-align: center;
}
.nav-links {
  display: table;
  margin-inline: auto;
}
.page-numbers {
  position: relative;
  padding-block-start: 0.5em;
  padding-block-end: 0.8em;
  padding-inline: 1em;
  background-color: var(--color-grey);
  text-decoration: none;
  color: var(--color-dark);
  transition: background-color 0.4s, color 0.4s;

  &::before {
    position: absolute;
    inset: 0;
    content: none;
    background-color: var(--color-dark);
    width: 0.5em;
    height: 0.5em;
    margin: auto;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transition: background-color 0.4s;
  }

  &:focus-visible {
    background-color: var(--color-dark-grey);
    color: var(--color-grey);

    &::before {
      background-color: var(--color-grey);
    }
  }

  @media (any-hover) {
    &:hover {
      background-color: var(--color-dark-grey);
      color: var(--color-grey);

      &::before {
        background-color: var(--color-grey);
      }
    }
  }
}
.page-numbers + .page-numbers {
  margin-inline-start: 0.3em;
}
.page-numbers.current {
  background-color: var(--color-key);
  color: var(--color-light);
}
.next.page-numbers {
  &::before {
    content: "";
    rotate: 90deg;
  }
}
.prev.page-numbers {
  &::before {
    content: "";
    rotate: -90deg;
  }
}
/*
  Spacer
-----------------------------------------------------*/
.spacer-2xs {
  margin-block-start: var(--space-2xs);
}
.spacer-xs {
  margin-block-start: var(--space-xs);
}
.spacer-sm {
  margin-block-start: var(--space-sm);
}
.spacer-md {
  margin-block-start: var(--space-md);
}
.spacer-lg {
  margin-block-start: var(--space-lg);
}
.spacer-xl {
  margin-block-start: var(--space-xl);
}
.spacer-2xl {
  margin-block-start: var(--space-2xl);
}
.spacer-3xl {
  margin-block-start: var(--space-3xl);
}
/* =====================================================
  3.0 - Object
===================================================== */

/*
  3.1 - Component
-----------------------------------------------------*/
/* layout */
.c-alignfull {
  position: relative;
  inset-inline-start: 50%;
  inline-size: 100vi;
  transform: translateX(-50%);
}

/* title */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  inline-size: fit-content;
  line-height: 1;
  text-align: center;
}
.c-heading__main {
  font-family: var(--font-gothic);
  font-size: var(--fs-24);
  font-weight: 400;
  letter-spacing: 0.2em;
}
.c-heading__sub {
  order: -1;
  font-family: var(--font-mincho);
  font-size: var(--fs-100);
  font-weight: 400;
  background: var(--color-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
}

.c-page__title {
  font-family: var(--font-mincho);
  font-size: calc(var(--fs-30) * 1.3);
  font-weight: 500;
}
.c-page__subtitle {
  font-family: var(--font-mincho);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.3;
}

/* card */
.c-featureCard {
  padding: 1.5em 1em;
  font-family: var(--font-gothic);
  font-weight: 400;
  background-color: var(--color-light);
  border-radius: 2rem;
  overflow: hidden;
  .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;

    figure {
      display: flex;
      flex-direction: column;
      justify-content: center;
      block-size: 200px;
      overflow: hidden; /* 念のためはみ出しを隠す */
      margin: 0;

      img {
        display: block; /* 画像下の隙間対策 */
        inline-size: 100%; /* 幅100% */
        block-size: 100%; /* ← 高さも100%（必須） */
        object-fit: contain; /* 中央でトリミング */
      }
    }
    p {
      font-size: var(--fs-18);
      line-height: 1.7;
      letter-spacing: 0.06em;
    }
  }
}
@media screen and (min-width: 960px) {
  .c-page__title {
    font-size: var(--fs-30);
  }
  .c-page__subtitle {
    line-height: 2;
  }
}

/* button */
.c-button {
  padding-inline: 2.5em 2.5em;
  padding-block: 1em;
  font-family: var(--font-gothic);
  font-weight: 700;
  border: none;
  border-radius: 2.5em;
  line-height: 1;

  &.-primary {
    position: relative;
    padding-inline: 2.5em 3.5em;
    color: var(--color-light);
    background: var(--color-grad);
    transition: filter 0.3s;

    &::before,
    &::after {
      position: absolute;
      inset-inline-end: calc(1.8em);
      inset-block: 0;
      display: block;
      margin-block: auto;
      inline-size: 1em;
      block-size: 1em;
      border-radius: 50%;
      font-size: 0.8em;
      transition: transform 0.3s;
    }
    &::before {
      content: "";
      background-color: var(--color-light);
    }
    &::after {
      padding-inline-start: 0.1em;
      content: ">";
      background: var(--color-grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.04em;
    }
  }

  &.-secondary {
    position: relative;
    padding-inline: 2.5em 3.5em;
    color: var(--color-main);
    background-color: var(--color-light);
    border: 1px solid var(--color-main);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;

    &::before,
    &::after {
      position: absolute;
      inset-inline-end: calc(1.8em);
      inset-block: 0;
      display: block;
      margin-block: auto;
      inline-size: 1em;
      block-size: 1em;
      border-radius: 50%;
      font-size: 0.8em;
      transition: transform 0.3s, background-color 0.3s, color 0.3s;
    }
    &::before {
      content: "";
      background-color: var(--color-main);
    }
    &::after {
      padding-inline-start: 0.1em;
      content: ">";
      color: var(--color-light);
    }
  }
}
/* ホバー・フォーカス時のCSS */
.c-button.-primary:focus-visible {
  filter: brightness(1.1);
  &::before,
  &::after {
    transform: translateX(0.5em);
  }
  .c-button.-secondary:focus-visible {
    background-color: var(--color-main);
    color: var(--color-light);
    border-color: transparent;

    &::before,
    &::after {
      transform: translateX(0.5em);
    }
    &::before {
      background-color: var(--color-light);
    }
    &::after {
      color: var(--color-main);
    }
  }
}
@media (any-hover) {
  .c-button.-primary:hover {
    filter: brightness(1.1);
    &::before,
    &::after {
      transform: translateX(0.5em);
    }
  }
  .c-button.-secondary:hover {
    background-color: var(--color-main);
    color: var(--color-light);
    border-color: transparent;

    &::before,
    &::after {
      transform: translateX(0.5em);
    }
    &::before {
      background-color: var(--color-light);
    }
    &::after {
      color: var(--color-main);
    }
  }
}

/* ここまで　ホバー・フォーカス時のCSS */
/*
  3.2 - Project
-----------------------------------------------------*/
/*---- Global Nav ----*/
.p-globalNav__wrapper {
  position: fixed;
  inset-inline-start: 100%;
  inset-inline-end: 0;
  inset-block: 0;

  padding-inline: var(--space-xs);
  padding-block: var(--space-sm) var(--space-xs);
  width: 100vi;
  height: 100vb;

  background-color: var(--color-light);
  transition: transform 0.4s ease-in-out;
  transform: translateX(110%);
  z-index: 5;
}
.p-globalNav__siteName {
  font-family: var(--font-gothic);
  font-size: clamp(1.125rem, 1.045rem + 0.34vw, 1.25rem);
  font-weight: 700;
}
.p-globalNav__list {
  margin-block-start: var(--space-xs);
  display: block flex;
  flex-direction: column;
  font-size: clamp(1.125rem, 1.045rem + 0.34vw, 1.25rem);
  li {
    display: none;
    visibility: hidden;
    border-block-end: 1px solid #808080;
  }
  a {
    display: block;
    padding-block: 1.3em;
    font-family: var(--font-gothic);
    font-weight: 500;
    text-decoration: none;
  }
}
.is-drawer-open {
  .p-globalNav__wrapper {
    transform: translateX(-100%);

    @media screen and (min-width: 960px) {
      transform: translateX(0);
    }
  }

  li {
    display: block;
    visibility: visible;
  }
}
@media screen and (min-width: 960px) {
  .p-globalNav__wrapper {
    position: static;
    padding: 0;
    width: auto;
    height: auto;
    box-shadow: none;
    background-color: inherit;
    transform: translateX(0);
  }
  .p-globalNav__siteName {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .p-globalNav__list {
    margin-block-start: 0;
    flex-direction: row;
    font-size: var(--fs-20);

    li {
      display: block;
      visibility: visible;
      border: none;
    }
    li:first-of-type a {
      padding-inline-start: 0;
    }
    li:last-of-type a {
      padding-inline-end: 0;
    }
    a {
      padding-inline: 1.5em;
      padding-block: 0;
    }
  }
}

/*---- Hamburger Button ----*/
.p-hamburger {
  position: relative;
  width: calc(30 * var(--torem));
  height: calc(30 * var(--torem));
  background-color: var(--color-main);
  border-radius: 50%;
  border: none;
  z-index: 10;

  @media screen and (min-width: 960px) {
    display: none;
  }

  &:focus-visible {
    background-color: var(--color-sub);
  }

  @media (any-hover) {
    &:hover {
      background-color: var(--color-sub);
    }
  }
}
.p-hamburger__line {
  position: relative;
  display: block;
  width: 50%;
  height: calc(2 / 16 * 1rem);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent 20%, var(--color-light) 20%);
  transition: background-color 0.2s;

  &::before,
  &::after {
    position: absolute;
    inset-inline: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    transition: rotate 0.2s, inset 0.2s 0.2s;
  }
  &::before {
    inset-block-start: calc(5 / 16 * 1rem * -1);
  }
  &::after {
    inset-block-start: calc(5 / 16 * 1rem);
  }
}
.is-drawer-open .p-hamburger__line {
  background: transparent;

  &::before,
  &::after {
    inset-block-start: 0;
    transition: inset 0.2s, rotate 0.2s 0.2s;
  }
  &::before {
    rotate: 45deg;
  }
  &::after {
    rotate: -45deg;
  }
}
/*--------- 全般 ---------*/
/*---- ヒーロー ----*/
.p-hero {
}
.p-hero__wrapper {
  display: grid;
  grid-template:
    "thumbnail" auto
    "title" auto
    "explain" auto / 1fr;
  align-items: center;
  padding-block-end: var(--space-md);
}
.p-hero__title {
  grid-area: title;
  position: relative;
  inset-inline-start: var(--overflow-1200);
  justify-self: start;
  padding-inline-start: 1em;
  padding-block: calc(44 * var(--torem)) 1.5rem;
  font-family: var(--font-mincho);
  font-size: var(--fs-50);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1;
}
.p-hero__subtitle {
  display: block;
  margin-block-end: 1.5em;
  font-family: var(--font-mincho);
  font-size: var(--fs-30);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.p-hero__thumbnail {
  grid-area: thumbnail;
  justify-self: end;
  inline-size: 84vi;
  block-size: 62vi;
  border-top-left-radius: 31vi;
  border-bottom-left-radius: 31vi;
  overflow: hidden;
  z-index: -2;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 34% center;
  }
}
.p-hero__explain {
  grid-area: explain;
  justify-self: center;
  align-self: start;
  max-inline-size: 1000px;
  inline-size: 90%;
  padding-inline: 1.75em;
  padding-block: 2em;
  font-size: var(--fs-18);
  background-color: #f1f7f7;
  letter-spacing: 0.22em;

  p {
    display: block;
    margin-inline: auto;
    inline-size: fit-content;
    letter-spacing: 0.12em;
    line-height: 2;
  }
}
@media screen and (min-width: 960px) {
  .p-hero {
  }
  .p-hero__wrapper {
    display: grid;
    grid-template:
      "hero" auto
      "explain" auto / 1fr;
    align-items: center;
    padding-block-end: var(--space-md);
  }
  .p-hero__title {
    grid-area: hero;
    inset-block-start: -1em;
    padding-block: 0;
  }
  .p-hero__subtitle {
  }
  .p-hero__thumbnail {
    grid-area: hero;
    inline-size: 53vi;
    block-size: 33vi;
    border-top-left-radius: 17vi;
    border-bottom-left-radius: 17vi;
  }
  .p-hero__explain {
    grid-area: explain;
    padding-block: calc(50 * var(--torem));

    transform: translateY(calc((65 * var(--torem)) * -1));

    p {
      white-space: pre-wrap;
      letter-spacing: 0.22em;
      line-height: 2.5;
    }
  }
}
/*---- 線 ----*/
.p-page__thumbnail-line {
  position: absolute;
  inset-inline-start: 50%;
  inline-size: 105vi;
  transform: translateX(-50%);
  z-index: -1;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 34% center;
  }

  &.-index01 {
    inset-block-start: 45vi;
  }
  &.-index02 {
    inset-block-start: 210vi;
  }
}
@media screen and (min-width: 600px) {
  .p-page__thumbnail-line {
    &.-index01 {
      inset-block-start: 45vi;
    }
    &.-index02 {
      inset-block-start: 155vi;
    }
  }
}
@media screen and (min-width: 960px) {
  .p-page__thumbnail-line {
    &.-index01 {
      inset-block-start: 13.5vi;
    }
    &.-index02 {
      inset-block-start: 70vi;
    }
  }
}
/*--------- TOPページ ---------*/
/*---- mainVisual ----*/
.p-mainVisual {
  position: relative;
  display: grid;
  grid-template:
    "sec01" auto
    "sec02" auto
    "title" auto
    / 1fr;
  overflow-x: hidden;
}
.p-mainVisual__title-wrapper {
  grid-area: title;
  padding-block-end: 18vi;
  line-height: 1;
}
.p-mainVisual__title {
  position: relative;
  margin-inline: 5vi;
  font-family: var(--font-mincho);
  font-size: var(--fs-70);
  font-weight: 500;
  letter-spacing: 0.1em;

  &::after {
    position: absolute;
    inset-inline-start: 3px;
    inset-block-start: 2px;
    content: "守り、導き、切り拓く";
    font-size: inherit;
    font-family: inherit;
    color: #ffffff;
    z-index: -1;
    text-shadow: 0px 0px 6px #ffffff;
  }
}
.p-mainVisual__thumbnail-main {
  --inline-size: 92vi;
  --block-size: 72vi;

  grid-area: sec02;
  justify-self: end;
  position: relative;
  margin-block-end: 11vi;
  inline-size: var(--inline-size);
  block-size: var(--block-size);
  border-top-left-radius: calc(var(--block-size) / 2);
  border-bottom-left-radius: calc(var(--block-size) / 2);
  overflow: hidden;
  transform: translateY(-10vi);

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--color-grad);
    pointer-events: none;
    opacity: 0.2;
    z-index: 1;
  }
  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 43% center;

    &::before {
    }
  }
}
.p-mainVisual__thumbnail-circle {
  --inline-size: 53vi;
  --block-size: 54vi;
  grid-area: sec01;
  position: relative;
  inline-size: var(--inline-size);
  block-size: var(--block-size);
  border-top-right-radius: calc(var(--block-size) / 2);
  border-bottom-right-radius: calc(var(--block-size) / 2);
  overflow: hidden;
  transform: translateY(-18vi);

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--color-grad);
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
  }
  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }
}
.p-mainVisual__thumbnail-line-02 {
  grid-area: sec02;
  position: absolute;
  inline-size: 113vi;
  inset-inline-start: 50%;
  inset-block-start: 31vi;
  transform: translateX(-50%);
  z-index: 2;

  img {
    inline-size: 100%;
    object-fit: cover;
  }
}
.p-mainVisual__thumbnail-line-01 {
  grid-area: sec01;
  position: absolute;
  inline-size: 65vi;
  inset-inline-start: 40%;
  inset-block-start: 6vi;
  z-index: -1;

  img {
    inline-size: 100%;
    object-fit: cover;
  }
}
.p-mainVisual__circle {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* background: var(--color-grad); */
  /* filter: blur(10vi); */
  background: radial-gradient(closest-side, var(--color-main) 0%, var(--color-sub) 50%, transparent 100%);
  opacity: 0.2;
  overflow: hidden;
  z-index: -1;

  &.-index01 {
    inset-block-start: -9vi;
    inset-inline-start: 84vi;
    inline-size: 35vi;
    rotate: 30deg;
  }
  &.-index02 {
    inset-block-start: 19vi;
    inset-inline-start: -18vi;
    inline-size: 35vi;
  }
  &.-index03 {
    inset-block-start: 98vi;
    inset-inline-start: -18vi;
    inline-size: 35vi;
  }
  &.-index04 {
    inset-block-start: 125vi;
    inset-inline-start: 77vi;
    inline-size: 35vi;
  }
}
@media screen and (min-width: 600px) {
  .p-mainVisual {
    grid-template: "mainVisual" auto / 1fr;
    place-items: center;
  }
  .p-mainVisual__title-wrapper {
    grid-area: mainVisual;
    padding-block: 40vi 15vi;
    inline-size: 100%;
    z-index: 3;
  }
  .p-mainVisual__title {
    margin-inline: 0;
    inset-inline-start: 14vi;
  }
  .p-mainVisual__thumbnail-main {
    --inline-size: 69vi;
    --block-size: 46vi;

    grid-area: mainVisual;
    justify-self: initial;
    position: absolute;
    margin-block-end: 0;
    inset-block-start: 2vi;
    inset-inline-end: 0;
    transform: translateY(0);
  }
  .p-mainVisual__thumbnail-circle {
    --inline-size: 31vi;
    --block-size: 46vi;
    grid-area: mainVisual;
    position: absolute;
    inset-inline-start: -5vi;
    inset-block-start: -17vi;
    transform: translateY(0);
  }
  .p-mainVisual__thumbnail-line-02 {
    grid-area: mainVisual;
    inline-size: 102vi;
    inset-inline-start: 50%;
    inset-block-start: 21vi;
    z-index: 2;
    scale: 1;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .p-mainVisual__circle {
    position: absolute;

    &.-index01 {
      inset-block-start: -13vi;
      inset-inline-start: 16vi;
      inline-size: 25vi;
      rotate: 30deg;
    }
    &.-index02 {
      inset-block-start: 19vi;
      inset-inline-start: 24vi;
      inline-size: 22vi;
    }
    &.-index03 {
      inset-block-start: 35vi;
      inset-inline-start: -10vi;
      inline-size: 22vi;
    }
    &.-index04 {
      display: none;
      opacity: 0;
      visibility: hidden;
    }
  }
}
/*---- News ----*/
.p-news__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}
.p-news__title .c-heading__sub {
  font-size: var(--fs-88);
}
.p-news__empty {
  padding-inline-start: 1em;
  max-inline-size: 600px;
  inline-size: 90%;
  align-self: center;
  border-block-end: 1px solid #999999;
}
.p-news__list {
  max-inline-size: calc(600 * var(--torem));
  flex-wrap: wrap;
  inline-size: 90%;
}
.p-news__item {
  padding-inline: 0.5em;
  border-block-end: 1px solid #999999;
  font-family: var(--font-gothic);
  font-size: var(--fs-18);
  font-weight: 500;

  a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5em;
    padding-block: 0.5em;
    color: var(--color-dark);
    line-height: 1.2;
  }
}
.p-news__item + .p-news__item {
  margin-block-start: 2em;
}
.p-news__date {
  flex-basis: 100%;
  margin-inline-end: 1em;
}
.p-news__category {
  margin-inline-end: 1em;

  padding-block: 0.3em;
  padding-inline: 0.5em;
  font-size: 0.8em;
  background-color: #e6e6e6;
}
/* ホバー・フォーカス時のCSS */
.p-news__item a:focus-visible {
  color: var(--color-sub);
}
@media (any-hover) {
  .p-news__item a:hover {
    color: var(--color-sub);
  }
}
/* ↑ここまで（ホバー・フォーカス時のCSS） */

@media screen and (min-width: 960px) {
  .p-news__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }
  .p-news__list {
    max-inline-size: calc(600 * var(--torem));
  }
  .p-news__item {
  }
  .p-news__date {
    flex-basis: initial;
  }
}
/*---- About Us ----*/
.p-aboutUs {
  position: relative;

  padding-block: var(--space-xl) 0;
  background-color: #f1f7f7;
  border-top-right-radius: 21vi;
}
.p-aboutUs__wrapper {
  position: relative;
  display: grid;
  grid-template:
    "body" auto
    "thumbnail" auto
    / 1fr;
  align-items: end;
  z-index: 1;
}
.p-aboutUs__body {
  grid-area: body;
  justify-self: center;
  inline-size: 100%;
}
.p-aboutUs__title {
  position: relative;
  text-align: center;
  line-height: 1;
}
.p-aboutUs__title-main {
  position: relative;
  color: var(--color-main);
  font-family: var(--font-mincho);
  font-size: clamp(calc(18 * var(--torem)), 0.791rem + 1.42vw, calc(40 * var(--torem)));
  font-weight: 500;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.17em;
  z-index: 1;
}
.p-aboutUs__title-sub {
  position: absolute;
  inset-block-end: 50%;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  order: -1;
  font-family: var(--font-mincho);
  font-size: var(--fs-88);
  font-weight: 400;
  background: var(--color-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
  letter-spacing: 0.02em;
  z-index: 0;
}
.p-aboutUs__text {
  padding-block-start: var(--space-xs);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.p-aboutUs__thumbnail {
  grid-area: thumbnail;
  justify-self: end;
  inline-size: clamp(8.125rem, 3.295rem + 20.61vw, 18.75rem);
  transform: translateY(-1.25rem);
}
.p-aboutUs__info {
  --padding-block: calc(28 * var(--torem));
  --padding-inline: calc(36 * var(--torem));
  position: absolute;
  inset-block-start: calc(100% - 3rem);
  inset-inline-end: var(--overflow-1200);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.5rem;
  margin-inline-end: 9vi;
  margin-inline-start: auto;
  padding-block: var(--padding-block);
  padding-inline: var(--padding-inline);
  inline-size: max(calc(270 * var(--torem)), 60%);
  background-color: #ffffff;
  z-index: 0;
  transform: translateY(-1.25rem);
}
.p-aboutUs__info dd {
  * {
    line-height: 1.8;
  }
}
.p-aboutUs__company {
  &::before {
    inset-block-start: 0;
    inset-inline-start: 1rem;
    transform: translateY(-50%);
  }
  &::after {
    inset-block-start: 1rem;
    inset-inline-start: 0;
    transform: translateX(-50%);
  }
  dt {
    font-family: var(--font-mincho);
    font-size: var(--fs-34);
    font-weight: 400;
    background: var(--color-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.8;
  }
}
.p-aboutUs__business {
  &::before {
    inset-block-end: 0;
    inset-inline-end: 1rem;
    transform: translateY(50%);
  }
  &::after {
    inset-block-end: 1rem;
    inset-inline-end: 0;
    transform: translateX(50%);
  }
  dt {
    display: flex;
    justify-content: start;
    align-items: center;
    height: calc(var(--fs-34) * 1.8);

    span {
      padding-block: 0.5em;
      padding-inline: 1.5em;
      color: var(--color-light);
      font-family: var(--font-gothic);
      font-size: var(--fs-16);
      font-weight: 300;
      background-color: var(--color-sub);
      border-radius: 1em;
      line-height: 1;
      vertical-align: bottom;
    }
  }
}
.p-aboutUs__company-name {
  font-family: var(--font-gothic);
  font-size: var(--fs-20);
  font-weight: 400;
}
@media screen and (min-width: 600px) {
  .p-aboutUs {
    border-top-right-radius: 0;
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .p-aboutUs__wrapper {
    grid-template:
      "body thumbnail" auto
      / 1fr 23%;
  }

  .p-aboutUs__body {
    grid-area: body;
    padding-inline-start: 0;
    justify-self: initial;
  }
  .p-aboutUs__title {
    text-align: left;
  }
  .p-aboutUs__title-main {
    letter-spacing: 0.2em;
  }
  .p-aboutUs__title-sub {
    position: absolute;
    inset-block-end: 50%;
    inset-inline-start: -0.5em;
    margin-inline: 0;
  }
  .p-aboutUs__text {
  }
  .p-aboutUs__thumbnail {
    justify-self: initial;
    inline-size: initial;
    transform: translateY(0);
  }
  .p-aboutUs__info {
    --padding-block: 24px;
    --padding-inline: clamp(1.5rem, 0.477rem + 2.73vw, 3.75rem);

    position: absolute;
    inset-block-start: initial;
    inset-block-end: calc(90 * var(--torem) * -1);
    inset-inline-end: var(--overflow-1200);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--padding-inline) * 2);
    margin-inline-end: 0;
    max-inline-size: calc(660 * var(--torem));
    inline-size: 90%;
    transform: translateY(0);
  }
  .p-aboutUs__company {
    position: relative;

    &::after {
      position: absolute;
      inset-inline-start: initial;
      inset-inline-end: calc(var(--padding-inline) * -1);
      inset-block: 0;
      display: block;
      margin-block: auto;
      inline-size: 1px;
      block-size: 95%;
      content: "";
      background-color: #000000;
      transform: translatex(-50%);
    }
  }
}
@media screen and (min-width: 960px) {
  .p-aboutUs__wrapper {
    grid-template:
      "body thumbnail" auto
      / 1fr 30%;
  }
}
@media screen and (min-width: 1200px) {
  .p-aboutUs__wrapper {
    grid-template:
      "body thumbnail" auto
      / 860px 1fr;
  }
  .p-aboutUs__body {
    grid-area: body;
    padding-inline-start: clamp(0px, calc((100vi - (1000px + 5vi * 2)) / 2), 100px);
    justify-self: initial;
  }
  .p-aboutUs__info {
    max-inline-size: calc(880 * var(--torem));
  }
}
/*---- Service ----*/
.p-service {
  position: relative;

  overflow: hidden;
  padding-bottom: 25vi;
}
.p-service__title {
  margin-inline: auto;
}
.p-service__thumbnail-line-01 {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 21vi;
  inline-size: 107vi;
  transform: translateX(-50%);
  z-index: -5;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
.p-service__thumbnail-line-02 {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: 107vi;
  transform: translateX(-50%);
  z-index: -5;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}
.p-service__item {
}
.p-service__item + .p-service__item {
  margin-block-start: var(--space-md);
}
@media screen and (min-width: 600px) {
  .p-service__thumbnail-line-01 {
    inset-block-start: 1.5vi;
  }
  .p-service__thumbnail-line-02 {
    inset-block-end: 0;
  }
}
/*---- Service Card ----*/
.c-serviceCard {
  --thumbnail-i-size: 84vi;
  position: relative;
  inset-inline-start: 50%;
  display: flex;
  flex-direction: column;
  inline-size: 100vi;
  transform: translateX(-50%);
  block-size: calc(var(--thumbnail-i-size) / 1.8 + 120px);

  .c-serviceCard__panel {
    position: absolute;
    inset-block-start: calc(var(--thumbnail-i-size) / 1.8 - 10px);
    padding-block: calc(24 * var(--torem)) calc(12 * var(--torem));
    max-inline-size: calc(550 * var(--torem));
    inline-size: 58%;
    font-size: var(--fs-18);
    border: 1px solid var(--color-main);
    line-height: 1.2;
  }
  .c-serviceCard__number {
    padding-inline-start: 2em;
    font-family: var(--font-gothic);
    font-size: var(--fs-30);
    font-weight: 500;
    background: var(--color-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.02em;
  }
  .c-serviceCard__title {
    font-family: var(--font-mincho);
    font-size: var(--fs-30);
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.18em;
  }

  .c-serviceCard__link {
    margin-inline: auto;
    inline-size: fit-content;
    font-family: var(--font-gothic);
    font-size: var(--fs-18);
    font-weight: 400;
    letter-spacing: 0.12em;

    a {
      --arrow-size: 2em;
      color: var(--color-grey);
      transition: color var(--duration-fast);

      &::before {
        position: absolute;
        inset: 0;
        display: block;
        inline-size: 100%;
        block-size: 100%;
        content: "";
        background: var(--color-grad);
        z-index: 1;
        opacity: 0;
        transition: opacity var(--duration-fast);
      }

      span {
        position: relative;
        &::before {
          position: absolute;
          inset-inline-start: calc(100% + 1em);
          inset-block: 0;
          display: block;
          margin-block: auto;
          inline-size: var(--arrow-size);
          block-size: 1px;
          content: "";
          background-color: var(--color-grey);
          transition: transform var(--duration-fast);
        }
        &::after {
          --size: calc(var(--arrow-size) * 0.175);
          position: absolute;
          inset-inline-start: calc(100% + 1em + var(--arrow-size) - var(--size));
          inset-block: 0;
          display: block;
          margin-block: auto;
          inline-size: var(--size);
          block-size: 1px;
          content: "";
          background-color: var(--color-grey);
          transform-origin: center right;
          transform: rotate(45deg);
          transition: transform var(--duration-fast);
        }
      }
    }
  }
  .c-serviceCard__thumbnail {
    position: absolute;
    inset-block: 0;
    inline-size: var(--thumbnail-i-size);
    aspect-ratio: 1.8 / 1;
    overflow: hidden;
    z-index: -1;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: transform var(--duration-fast);
    }
  }
}
.c-serviceCard:nth-child(odd) {
  .c-serviceCard__panel {
    inset-inline-end: var(--overflow-1200);
  }
  .c-serviceCard__thumbnail {
    inset-inline-start: 0;
    border-top-right-radius: 6vi;
    border-bottom-right-radius: 6vi;
  }
}
.c-serviceCard:nth-child(even) {
  .c-serviceCard__panel {
    inset-inline-start: var(--overflow-1200);
  }
  .c-serviceCard__thumbnail {
    inset-inline-end: 0;
    border-top-left-radius: 6vi;
    border-bottom-left-radius: 6vi;
  }
}
/* ホバー・フォーカス時のCSS */
.c-serviceCard:has(a:focus-visible) {
  .c-serviceCard__panel {
    .c-serviceCard__link {
      a {
        color: var(--color-sub);
        &::before {
          opacity: 0.3;
        }
      }
      span::before {
        background-color: var(--color-sub);
        transform: translateX(10px);
      }
      span::after {
        background-color: var(--color-sub);
        transform: translateX(10px) rotate(45deg);
      }
    }
  }
  .c-serviceCard__thumbnail {
    overflow: hidden;

    img {
      transform: scale(1.1);
    }
  }
}
@media (any-hover) {
  .c-serviceCard:has(a:hover) {
    .c-serviceCard__panel {
      .c-serviceCard__link {
        a {
          color: var(--color-sub);
          &::before {
            opacity: 0.3;
          }
        }
        span::before {
          background-color: var(--color-sub);
          transform: translateX(10px);
        }
        span::after {
          background-color: var(--color-sub);
          transform: translateX(10px) rotate(45deg);
        }
      }
    }
    .c-serviceCard__thumbnail {
      overflow: hidden;

      img {
        transform: scale(1.1);
      }
    }
  }
}
/* ↑ここまで（ホバー・フォーカス時のCSS） */

@media screen and (min-width: 600px) {
  .c-serviceCard {
    .c-serviceCard__panel {
      inline-size: 50%;
    }
  }
}
@media screen and (min-width: 960px) {
  .c-serviceCard {
    --thumbnail-i-size: 56vi;
    block-size: calc(var(--thumbnail-i-size) / 1.8);

    .c-serviceCard__panel {
      inline-size: 44%;
      inset-block-start: initial;
      inset-block-end: 3vi;
      padding-block: calc(60 * var(--torem));
      line-height: 2.5;
    }
    .c-serviceCard__number {
      padding-inline: calc(155 * var(--torem));
    }
    .c-serviceCard__thumbnail {
    }
    .c-serviceCard__link a {
      --arrow-size: 4em;
    }
  }
}
/*---- Works ----*/
.p-works {
  /* overflow: hidden; */
  transform: translateY(-6vi);
}
.p-works__wrapper {
  --pad-left: calc(70 * var(--torem));
  position: relative;
  inset-inline-start: var(--overflow-1200);
  padding-inline-start: var(--pad-left);
  padding-block: var(--space-xl) var(--space-lg);
  inline-size: calc(100vi - var(--overflow-1200));
  background: linear-gradient(180deg, var(--color-light-blue) 65%, #f2f2f2 65%);
  border-top-left-radius: 25vi;
}
.p-works__title {
  inline-size: 100vi;
  text-align: center;
  color: var(--color-light);
  transform: translateX(calc((5vi + var(--pad-left)) * -1));

  .c-heading__sub {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
  }
}
.p-works__empty {
  inline-size: 100vi;
  block-size: 10vi;
  text-align: center;
  transform: translateX(calc((5vi + var(--pad-left)) * -1));
}
.p-works__list {
  display: flex;
  flex-wrap: nowrap;
  gap: calc(30 * var(--torem));
  margin-block-start: var(--space-sm);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: inline proximity;
  scrollbar-gutter: stable;
}
.p-works__item {
  background-color: var(--color-light);

  a {
    color: var(--color-dark);
  }
}

@media screen and (min-width: 600px) {
  .p-works__wrapper {
    border-top-left-radius: 13.5vi;
  }
}
@media screen and (min-width: 1300px) {
  .p-works__title,
  .p-works__empty {
    transform: translateX(calc((5vi + var(--overflow-1200)) * -1));
  }
}
/*---- works Card ----*/

.c-worksCard {
  flex: 0 0 auto;
  flex-basis: calc(210 * var(--torem));
  scroll-snap-align: start;
}
.c-worksCard__link {
  display: flex;
  flex-direction: column;
}
.c-worksCard__title {
  padding-inline: 1.5rem;
  padding-block: 0.5em;
  font-family: var(--font-mincho);
  font-size: var(--fs-24);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.c-worksCard__thumbnail {
  order: -1;
  inline-size: 100%;
  aspect-ratio: 1.26 / 1;
  overflow: hidden;

  img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--duration-fast);
  }
}
.c-worksCard__text {
  padding-inline: 1.5rem;
  padding-block-end: 1em;
  font-family: var(--font-gothic);
  font-size: var(--fs-16);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* ホバー・フォーカス時のCSS */
.c-worksCard__link:focus-visible {
  color: var(--color-sub);

  .c-worksCard__thumbnail {
    img {
      transform: scale(1.1);
    }
  }
}
@media (any-hover) {
  .c-worksCard__link:hover {
    color: var(--color-sub);

    .c-worksCard__thumbnail {
      img {
        transform: scale(1.1);
      }
    }
  }
}
/* ↑ここまで（ホバー・フォーカス時のCSS） */

@media screen and (min-width: 600px) {
  .c-worksCard {
    flex-basis: calc(380 * var(--torem));
  }
}
@media screen and (min-width: 960px) {
  .c-worksCard {
  }
}
/*--------- 404 ---------*/
.p-404-text {
  font-size: var(--fs-20);
}
.p-404-button {
  margin-block-end: var(--space-md);
  font-size: var(--fs-18);
}
/* =====================================================
  4.0 - Entry (post / page)
===================================================== */
/*--------- 全般 ---------*/
:where(:is(section, div, article)).has-background {
  padding: 2em;
}

/*--------- 固定ページ ---------*/
/*---- 実績セクション ----*/
.p-achievement {
  figure {
    inline-size: 77vi;
    aspect-ratio: 2 / 1;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }
  .p-achievement__box {
    --bd-color: var(--color-light-blue);
    position: relative;
    inset-block-end: 0;
    inset-inline-end: var(--overflow-1000);
    align-self: end;
    padding-inline: 1.75em;
    padding-block: 1.25em;
    max-inline-size: calc(500 / 12 * 1em);
    inline-size: 82vi;
    font-size: var(--fs-18);
    letter-spacing: 0.15em;
    transform: translateY(-9vi);
    line-height: 1.8;

    h3 {
      margin-inline: auto;
      padding-inline-start: 0.5em;
      inline-size: fit-content;
      font-family: var(--font-mincho);
      font-size: var(--fs-30);
      font-weight: 400;
      background-color: var(--color-light);
      line-height: 1.8;
      letter-spacing: 0.5em;
      z-index: 1;
    }
    strong {
      color: var(--color-text);
      font-weight: 300;
    }
    p {
      line-height: 1.8;
    }
  }
}
@media screen and (min-width: 960px) {
  .p-achievement {
    figure {
      inline-size: 49vi;
      aspect-ratio: 2 / 1;
    }
    .p-achievement__box {
      padding-inline: 3.5em;
      padding-block: 2.5em;
      max-inline-size: initial;
      inline-size: fit-content;
      letter-spacing: 0.15em;
      transform: translateY(-50%);
      line-height: 2.5;

      h3 {
        position: absolute;
        inset-block-start: -0.5em;
        line-height: 1;
      }
      strong {
        font-size: 1.25em;
      }
      p {
        line-height: 2.5;
      }
    }
  }
}
/*---- 特徴セクション ----*/
.p-feature {
  padding-block: var(--space-md);

  & > .wp-block-group__inner-container {
    margin-inline: auto;
    max-inline-size: 1000px;
  }

  .p-feature__list {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: var(--space-sm);
    justify-items: center;
    align-items: stretch;
    gap: 1.5em;
  }
  .p-feature__item {
    max-inline-size: calc(220 * var(--torem));
    inline-size: 100%;

    figure {
      block-size: calc(90 * var(--torem));
    }
    p {
      overflow-wrap: wrap;
      word-break: keep-all;
    }
  }
}
.p-feature.-service02 {
  & > .wp-block-group__inner-container {
    margin-inline: auto;
    max-inline-size: 1200px;
  }
  .p-feature__list {
    margin-block: var(--space-xs);
  }
  .p-feature__item {
    p {
      font-size: var(--fs-18);
    }
  }
  p {
    font-family: var(--font-mincho);
    font-size: calc(var(--fs-30) * 1.3);
    font-weight: 500;
    line-height: 1.8;
  }
}
@media screen and (min-width: 600px) {
  .p-feature {
    padding-block: var(--space-sm);

    .p-feature__list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      margin-block-start: var(--space-xs);
      justify-content: space-between;
      align-items: stretch;
      gap: 1.5em;
    }
    .p-feature__item {
      max-inline-size: calc(290 * var(--torem));

      figure {
        block-size: calc(120 * var(--torem));
      }
    }
  }
  .p-feature.-service02 {
    .p-feature__list {
      display: grid;
      grid-template-columns: calc(290 * var(--torem)) calc(290 * var(--torem));
      justify-content: center;
    }
    .p-feature__item {
      max-inline-size: calc(290 * var(--torem));
    }
  }
}

@media screen and (min-width: 960px) {
  .p-feature {
    .p-feature__list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .p-feature__item {
      figure {
        block-size: calc(170 * var(--torem));
      }
    }
  }
  .p-feature.-service02 {
    .p-feature__list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .p-feature__item {
      max-inline-size: calc(275 * var(--torem));
    }
    p {
      font-size: var(--fs-30);
    }
  }
}
/*---- 助成金サービスセクション ----*/
.p-grantService {
  padding-inline: 5vi;
  background: linear-gradient(180deg, transparent 36%, var(--color-light-blue) 36%);

  .p-grantService__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: stretch;
    gap: 1.5em;
    margin-inline: auto;
    margin-block-start: var(--space-xs);
    padding-block-end: var(--space-xs);
    max-inline-size: 1200px;
    font-family: var(--font-gothic);
    font-size: var(--fs-16);
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  .p-grantService__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    margin-inline: auto;
    inline-size: 39vi;
    background-color: var(--color-light);
    border-radius: 0.5rem;
    overflow: hidden;

    & > .wp-block-group__inner-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    figure {
      inline-size: 100%;
      block-size: 26vi;

      img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }
    }
    p {
      overflow-wrap: anywhere;
      word-break: keep-all;
      line-height: 1.7;
      padding-block: 1em;
    }
  }
}

@media screen and (min-width: 600px) {
  .p-grantService {
    background: linear-gradient(180deg, transparent 58%, var(--color-light-blue) 58%);

    .p-grantService__list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .p-grantService__item {
      inline-size: auto;
      background-color: transparent;
      border-radius: 0;

      figure {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 1.5 / 1;

        img {
          border-radius: 1vi;
        }
      }
    }
  }
}
/* =====================================================
  5.0 - Animation
===================================================== */
/*
  5.1 - Manipulate
-----------------------------------------------------*/
:where(.anim-svg-line path) {
  --duration: 3s;

  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.anim-svg-line.is-animated path {
  animation: draw-svg-line var(--duration) ease forwards;
}
:where(.anim-fadeIn-left) {
  opacity: 0;
  transform: translateX(-1em);
  transition: transform var(--duration-slow), opacity var(--duration-slow);
}
.anim-fadeIn-left.is-animated {
  opacity: 1;
  transform: translateX(0);
}
:where(.anim-border) {
  --border-color: var(--bd-color, var(--color-sub));
  position: relative;

  &::before,
  &::after {
    position: absolute;
    display: block;
    inline-size: 0;
    block-size: 0;
    content: "";
    background-color: transparent;
    transition: inline-size var(--duration-slow), block-size var(--duration-slow) ease-in-out;
  }
  &::before {
    inset-inline-end: -2px;
    inset-block-start: -2px;
    border-inline-end: 2px solid transparent;
    border-block-start: 2px solid transparent;
  }
  &::after {
    inset-inline-start: -2px;
    inset-block-end: -2px;
    border-inline-start: 2px solid transparent;
    border-block-end: 2px solid transparent;
  }
}
.anim-border.is-animated {
  &::before,
  &::after {
    inline-size: calc(100% - 1.5rem);
    block-size: calc(100% - 1.5rem);
    border-color: var(--border-color);
  }
}
:where(.anim-overlayIn) {
  --img-anim-time: 0.6s;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --overlay-color: var(--ovl-color, var(--color-grad));

  position: relative;
  scale: 0 1; /* 最初はx方向は倍率0 */
  &.is-animated {
    scale: 1 1; /* activeになったらスケールを1倍にする */
    transition: scale var(--img-anim-time) var(--ease);
    transform-origin: left center;
  }
  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--overlay-color);
    z-index: 1;
  }
}
.anim-overlayIn.is-animated::before {
  scale: 0 1; /* オーバーレイのx方向の倍率を0にし非表示にする */
  transition: scale 0.6s var(--ease);
  transition-delay: var(--img-anim-time); /* 画像のアニメーション時間分開始をずらす */
  transform-origin: right center;
}
/*
  5.2 - keyframs
-----------------------------------------------------*/
@keyframes draw-svg-line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes point-scroll {
  0% {
    opacity: 0;
    inset-block-start: -0.5em;
  }
  15% {
    opacity: 1;
    inset-block-start: -0.5em;
  }
  85% {
    opacity: 1;
    inset-block-start: calc(-0.5em + 100%);
  }
  100% {
    opacity: 0;
    inset-block-start: calc(-0.5em + 100%);
  }
}

/* =====================================================
  6.0 - etc
===================================================== */
/*
  6.1 - Utility
-----------------------------------------------------*/
.u-screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}
.u-section-bridge {
  position: relative;
  margin-inline: auto;
  margin-block: 21rem 2rem;
  inline-size: 2px;
  block-size: 3.5rem;
  background-color: #999999;

  &::before {
    position: absolute;
    inset-inline-start: 1px;
    inset-block-start: -0.5rem;
    display: block;
    margin-inline: auto;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    content: "";
    background-color: var(--color-main);
    border-radius: 50%;
    transform: translateX(-50%);
    opacity: 0;

    animation: point-scroll 2s ease-in-out infinite;
  }

  @media screen and (min-width: 600px) {
    margin-block: 11rem 4.5rem;
    block-size: 10rem;

    &::before {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
}
.u-sp {
  @media screen and (min-width: 600px) {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}
.u-pc {
  @media not screen and (min-width: 600px) {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}
.u-block-spacer-xs {
  height: var(--space-xs) !important;
}
.u-block-spacer-sm {
  height: var(--space-sm) !important;
}
.u-block-spacer-md {
  height: var(--space-md) !important;
}
.u-block-spacer-lg {
  height: var(--space-lg) !important;
}
.u-block-spacer-xl {
  height: var(--space-xl) !important;
}
/* ===============================
   カラーパレット対応
   slug名に応じてクラスが自動的に付与される
   =============================== */

/* メインカラー */
.has-main-color {
  color: #6eb4be;
}
.has-main-background-color {
  background-color: #6eb4be;
}

/* アクセントカラー */
.has-accent-color {
  color: #96b26e;
}
.has-accent-background-color {
  background-color: #96b26e;
}

/* 背景 */
.has-background-color {
  color: #ffffff;
}
.has-background-background-color {
  background-color: #ffffff;
}

/* 背景サブ */
.has-background-sub-01-color {
  color: #f1f7f7;
}
.has-background-sub-01-background-color {
  background-color: #f1f7f7;
}

/* 背景サブ */
.has-background-sub-02-color {
  color: #8cd2de;
}
.has-background-sub-02-background-color {
  background-color: #8cd2de;
}

/* 文字色 */
.has-default-color {
  color: #000000;
}
.has-default-background-color {
  background-color: #000000;
}

/*
  6.2 - Plagin
-----------------------------------------------------*/
/* contact form 7のCSS */
.wpcf7 {
  margin-inline: auto;
  max-inline-size: var(--contents-size-md);
  inline-size: 100%;
}
.form {
  margin-block-end: var(--space-md);
  .form-item {
    margin-block-end: 1.5em;
    font-family: var(--font-mincho);
    font-size: var(--fs-20);
    font-weight: 500;

    label {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: stretch;

      .label-name {
        flex-basis: 30%;
      }
      .wpcf7-form-control-wrap {
        flex-grow: 1;

        input,
        textarea {
          inline-size: 100%;
          padding-inline: 0.3em;
          font-size: var(--fs-18);
          font-weight: 400;
        }
      }
    }
  }
  .form-item:has([aria-required="true"]) .label-name {
    &::after {
      display: inline-block;
      margin-inline-start: 1.5em;
      padding-inline: 0.5em;
      padding-block: 0.4em;
      content: "必須";
      font-family: var(--font-gothic);
      font-size: 0.8em;
      font-weight: 700;
      color: var(--color-light);
      background-color: #cbcbcb;
      line-height: 1;
    }
  }
  .notion {
    padding-inline: 0.5em;
    padding-block: 2em;
    font-family: var(--font-mincho);
    font-size: calc(14 * var(--torem));
    font-weight: 400;
    border-block: 1px solid var(--color-dark);
    line-height: 1.8;
    letter-spacing: 0.06em;

    dt {
      font-family: inherit;
      font-size: calc(22 * var(--torem));
      font-weight: 500;
      line-height: 1.8;
    }
  }
  .form-acceptance {
    font-family: var(--font-mincho);
    font-sizse: var(--fs-18);
    font-weight: 500;
    text-align: center;

    label {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1em;
    }
    input {
      inline-size: 1.5em;
      aspect-ratio: 1 / 1;
    }
  }
}
.confirm-area {
  display: none;
  margin-block-end: var(--space-md);

  .confirm-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: stretch;
    margin-block-end: 1em;
    font-family: var(--font-mincho);
    font-size: var(--fs-20);
    font-weight: 500;

    .label-name {
      flex-basis: 30%;
    }
    .confirm-input {
      flex-grow: 1;
      inline-size: 100%;
      padding-inline: 0.3em;
      font-size: var(--fs-18);
      font-weight: 400;
    }
  }
}
.thanks-area {
  display: none;
  margin-block-end: var(--space-md);

  p {
    margin-block-end: 1em;
    font-family: var(--font-mincho);
    font-size: var(--fs-20);
    font-weight: 500;
  }
}
.button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.wpcf7-response-output {
  display: none;
}
@media screen and (min-width: 960px) {
  .form {
    .form-item {
      label {
        flex-direction: row;
        align-items: start;
      }
    }
  }
  .confirm-area {
    .confirm-item {
      flex-direction: row;
      align-items: start;
    }
  }
}