@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,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;
  --en-sans: "Roboto", sans-serif;
  --base: #fff;
  --main: #000;
  --primary-color: #d6d6d6;
  --header-h: 3.75rem;
  --container-w: 71.25rem;
  --container-space: 5rem;
}
@media screen and (max-width: 767px) {
  :root {
    --header-h: 2.75rem;
    --container-space: 2.1875rem;
  }
}

@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;
    font-family: var(--sans-serif);
    line-height: 1.8;
    color: var(--main);
    background: var(--base);
    text-size-adjust: 100%;
  }
  *,
  *::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: currentcolor;
    text-decoration: none;
    word-break: break-all;
  }
  @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__inner {
    padding-block: 3.4375rem;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .l-footer__inner {
      padding-block: 1.875rem;
    }
  }
  .l-footer__copyright {
    font-family: var(--en-sans);
    line-height: 1;
  }
  .l-footer__copyright small {
    font-size: 0.875rem;
  }
  @media screen and (max-width: 767px) {
    .l-footer__copyright small {
      font-size: 0.625rem;
    }
  }
}
/* ========================================
  サイト共通のヘッダー
======================================== */
@layer layout {
  .l-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-h);
    background: var(--primary-color);
  }
  .l-header__inner {
    --container-w: 72.1875rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    height: inherit;
  }
  @media screen and (max-width: 767px) {
    .l-header__inner {
      --container-space: 0;
      grid-template-columns: 1fr;
    }
  }
  .l-header__logo {
    text-align: center;
  }
  .l-header__logo a {
    display: inline-block;
  }
  @media screen and (max-width: 767px) {
    .l-header__logo a img {
      width: 8.75rem;
      height: auto;
    }
  }
  .l-header__nav {
    justify-self: end;
  }
  @media screen and (max-width: 767px) {
    .l-header__nav {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .home .l-header .l-header__inner {
    grid-template-columns: 1fr;
  }
}
/*========================================
  メインコンテンツ
========================================*/
@layer layout {}
/* ========================================
  ヘッダーのナビゲーション（グローバルナビ）
======================================== */
@layer layout {
  @media screen and (max-width: 767px) {
    .l-nav.is-expanded .l-nav__body {
      right: 0;
      visibility: visible;
    }
  }
  .l-nav__btn {
    position: relative;
    z-index: 101;
    display: none;
    width: var(--header-h);
    height: var(--header-h);
    padding: 0;
    margin: auto;
    background-color: transparent;
    border: none;
  }
  @media screen and (max-width: 767px) {
    .l-nav__btn {
      display: grid;
      place-items: center;
      border-radius: 5px;
    }
  }
  .l-nav__btn[aria-expanded=true] .l-nav__line.is-1 {
    transform: rotate(25deg);
  }
  .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: rotate(-25deg);
  }
  .l-nav__lines {
    position: relative;
    display: block;
    width: 50%;
    height: 20%;
  }
  .l-nav__line {
    position: absolute;
    inset-block: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin-block: auto;
    background-color: var(--main);
    border-radius: 100vmax;
    transition: 0.3s ease-in;
    transition-property: opacity, transform;
  }
  .l-nav__line.is-1 {
    transform: translateY(-0.3125rem);
  }
  .l-nav__line.is-3 {
    transform: translateY(0.3125rem);
  }
  @media screen and (max-width: 767px) {
    .l-nav__body {
      position: fixed;
      top: 0;
      right: -100%;
      z-index: 100;
      display: block;
      width: 100%;
      height: 100vh;
      height: 100svh;
      overflow: auto;
      overscroll-behavior-y: contain;
      visibility: hidden;
      background: var(--primary-color);
      transition: 0.3s ease-in;
    }
  }
  @media screen and (max-width: 767px) {
    .l-nav__menu {
      height: 100%;
    }
  }
  .l-nav__list {
    display: flex;
    gap: 4.6875rem;
    align-items: center;
    justify-content: end;
  }
  @media screen and (max-width: 767px) {
    .l-nav__list {
      flex-direction: column;
      gap: 3.75rem;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
  .l-nav__link {
    font-family: var(--en-sans);
  }
  .l-nav__link.is-current {
    font-weight: 900;
  }
  @media (any-hover: hover) {
    .l-nav__link span {
      position: relative;
      background: linear-gradient(var(--main), var(--main)) 100% 100%/0 1px no-repeat;
      transition: background-size 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
    }
    .l-nav__link:hover span {
      background-position: 0 100%;
      background-size: 100% 1px;
    }
  }
}
/* ========================================
  ページ全体のレイアウト
======================================== */
@layer layout {
  .l-page {
    display: grid;
    grid-template: "header" auto "main" 1fr "footer" auto/1fr;
    min-height: 100vh;
    min-height: 100svh;
  }
  .l-page__header {
    grid-area: header;
  }
  .l-page__main {
    grid-area: main;
  }
  .l-page__footer {
    grid-area: footer;
  }
}
@layer component {}
@layer component {
  .c-container, .c-container-sm, .c-container-md {
    width: min(100% - var(--container-space), var(--container-w));
    margin-inline: auto;
  }
  .c-container-md {
    --container-w: 62.5rem;
  }
  .c-container-sm {
    --container-w: 39rem;
  }
}
@layer component {}
@layer project {
  .p-page-header__inner {
    padding-block: 5.625rem 0;
  }
  @media screen and (max-width: 767px) {
    .p-page-header__inner {
      padding-block: 1.875rem 0;
    }
  }
  .p-page-header__ttl-en {
    font-family: var(--en-sans);
    font-size: 2.375rem;
    font-weight: 700;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .p-page-header__ttl-en {
      font-size: 1.375rem;
    }
  }
  .p-page-header__desc {
    margin-top: 0.9375rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
  }
}
@layer project {
  .p-page-content__inner {
    padding-block: 5rem;
  }
  @media screen and (max-width: 767px) {
    .p-page-content__inner {
      padding-block: 1.25rem 2.5rem;
    }
  }
}
@layer project {
  .p-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--main);
    opacity: 0;
    transition-duration: 0.4s;
    transition-property: opacity;
  }
  .p-modal.is-show {
    opacity: 1;
  }
  .p-modal.is-show .p-modal__content {
    margin-top: 0;
  }
  .p-modal.no-transition, .p-modal[style*="transition: none"] {
    transition: none !important;
    transition-duration: 0s !important;
    transition-property: none !important;
  }
  .p-modal.no-transition *, .p-modal.no-transition *::before, .p-modal.no-transition *::after, .p-modal[style*="transition: none"] *, .p-modal[style*="transition: none"] *::before, .p-modal[style*="transition: none"] *::after {
    transition: none !important;
    transition-duration: 0s !important;
    transition-property: none !important;
  }
  .p-modal__wrap {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    transition-duration: 0.4s;
    transition-property: margin;
  }
  .p-modal__content {
    position: absolute;
    top: calc(var(--header-h) + 47%);
    left: 50%;
    box-sizing: border-box;
    width: min(100%, 71.25rem);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    padding: 1.25rem 4.375rem 0;
    margin-inline: auto;
    overflow: hidden auto;
    overscroll-behavior: contain;
    color: #fff;
    transform: translate(-50%, -50%);
  }
  @media screen and (max-width: 767px) {
    .p-modal__content {
      width: calc(100% - 2.1875rem);
      padding: 2.8125rem 0 0;
    }
  }
  .p-modal__content-inner {
    height: calc(var(--final-slide-h) + var(--modal-counter-h));
  }
  .p-modal__close-btn-wrap {
    position: absolute;
    top: 0;
    right: 0;
  }
  @media screen and (max-width: 767px) {
    .p-modal__close-btn-wrap {
      top: 0;
      right: initial;
      left: 0;
    }
  }
  .p-modal__close-btn {
    position: relative;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
  }
  @media screen and (max-width: 767px) {
    .p-modal__close-btn {
      width: 1.5625rem;
      height: 1.5625rem;
      background: url("../img/common/icon/icon_arrow_left.png") center center/1.5625rem 0.875rem no-repeat;
    }
  }
  @media screen and (min-width: 768px) {
    .p-modal__close-btn::before, .p-modal__close-btn::after {
      position: absolute;
      left: 15%;
      display: block;
      width: 70%;
      height: 1px;
      content: "";
      background: #fff;
    }
  }
  .p-modal__close-btn::before {
    transform: rotate(-25deg);
  }
  .p-modal__close-btn::after {
    transform: rotate(25deg);
  }
  @media (any-hover: hover) {
    .p-modal__close-btn {
      transition: 0.3s;
      transition-property: transform;
    }
    .p-modal__close-btn:hover {
      transform: scale(1.1);
    }
  }
  .p-modal__counter {
    display: flex;
    justify-content: center;
    padding-top: 1.875rem;
    font-family: var(--en-sans);
  }
  @media screen and (max-width: 767px) {
    .p-modal__counter {
      display: none;
    }
  }
  .p-modal__counter-current {
    position: relative;
  }
  .p-modal__counter-current::after {
    position: absolute;
    top: calc(50% + 0.05em);
    left: 0.2em;
    width: 1.75rem;
    height: 1px;
    content: "";
    background-color: #fff;
    transform: translateY(-50%) rotate(-24deg);
  }
  .p-modal__counter-total {
    padding-top: 1em;
  }
}
@layer project {
  .p-works__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19.375rem, 1fr));
    gap: 3rem 2.5rem;
  }
  @media screen and (max-width: 767px) {
    .p-works__list {
      grid-template-columns: 1fr;
      gap: 1.4375rem;
    }
  }
  .p-works__btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 354/200;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }
  .p-works__btn img,
  .p-works__btn video {
    width: auto;
    height: 100%;
    object-position: center;
  }
  @media (hover: hover) {
    .p-works__btn img {
      transition: transform 0.6s ease;
    }
    .p-works__btn .p-works__ttl {
      transition: opacity 0.6s ease;
    }
    .p-works__btn:hover img {
      transform: scale(1.2);
    }
    .p-works__btn:hover .p-works__ttl {
      opacity: 1;
    }
  }
  @media (hover: none) {
    .p-works__btn.is-tapped img {
      transform: scale(1.2);
      transition: transform 0.6s ease;
    }
    .p-works__btn.is-tapped .p-works__ttl {
      opacity: 1;
      transition: opacity 0.6s ease;
    }
  }
  .p-works__ttl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.0625rem 1.875rem;
    font-size: 1.375rem;
    line-height: 1.7;
    color: #fff;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
  }
  .p-works__video-preview {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: auto;
    transform: translate(-50%, -50%);
  }
  .p-works-modal__ttl {
    margin-top: 0.625rem;
    font-size: 1.25rem;
  }
  @media screen and (max-width: 767px) {
    .p-works-modal__ttl {
      margin-top: 0.3125rem;
      font-size: 0.875rem;
    }
  }
  .p-works-modal__media {
    width: min(100%, 62.5rem);
    max-height: calc(100vh - var(--header-h) - 10rem);
    max-height: calc(100svh - var(--header-h) - 10rem);
  }
  @media screen and (max-width: 767px) {
    .p-works-modal__media {
      max-height: calc(100vh - var(--header-h) - 8.125rem);
      max-height: calc(100svh - var(--header-h) - 8.125rem);
    }
  }
  .p-works-modal__img, .p-works-modal__video {
    max-height: inherit;
    text-align: center;
  }
  .p-works-modal__img img,
  .p-works-modal__img video, .p-works-modal__video img,
  .p-works-modal__video video {
    width: auto;
    max-height: inherit;
  }
  .p-works-modal__embed {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .p-works-modal__embed iframe {
    width: auto;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}
@layer project {
  .p-form__row + .p-form__row {
    margin-top: 0.9375rem;
  }
  .p-form__label {
    display: grid;
    gap: 0.3125rem;
    width: 100%;
  }
  .p-form__label-header {
    display: flex;
    gap: 0 0.625rem;
    align-items: center;
    font-weight: 600;
  }
  .p-form__required {
    padding: 0.1875rem 0.3125rem;
    font-size: 0.75rem;
    line-height: 1;
    border: 1px solid var(--main);
  }
  .p-form__input input[type=text],
  .p-form__input input[type=email],
  .p-form__input input[type=tel],
  .p-form__input input[type=password] {
    width: 100%;
    height: 3.3125rem;
    padding: 0 0.9375rem;
    border: 1px solid var(--main);
  }
  .p-form__input input[type=text]::placeholder,
  .p-form__input input[type=email]::placeholder,
  .p-form__input input[type=tel]::placeholder,
  .p-form__input input[type=password]::placeholder {
    color: #989798;
  }
  .p-form__input textarea {
    width: 100%;
    height: 13.875rem;
    padding: 0.2em 1em;
    resize: vertical;
    border: 1px solid var(--main);
  }
  .p-form__input textarea::placeholder {
    color: #989798;
  }
  .p-form__submit-btn {
    position: relative;
    width: 10.375rem;
    height: 3.25rem;
    margin-inline: auto;
    margin-top: 2.5rem;
    font-family: var(--en-sans);
    font-weight: 500;
    color: #fff;
    background-color: var(--main);
    border: 1px solid var(--main);
  }
  .p-form__submit-btn input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
  }
  @media (hover: hover) {
    .p-form__submit-btn {
      transition: 0.3s;
      transition-property: background-color, color;
    }
    .p-form__submit-btn:hover {
      color: var(--main);
      background-color: #fff;
    }
  }
}
.wpcf7-spinner {
  position: absolute;
  inset-inline: 0;
  bottom: -1.5625rem;
  margin-inline: auto;
}

@layer project {
  .p-slide .splide__arrow {
    width: 2.375rem !important;
    height: 1.8125rem !important;
    background: url("../img/common/icon/icon_arrow_right_white.png") center center/contain no-repeat !important;
  }
  .p-slide .splide__arrow--prev {
    left: -4.375rem !important;
    transform: scale(-1, 1) translateY(-50%) !important;
  }
  .p-slide .splide__arrow--next {
    right: -4.375rem !important;
  }
}
@layer project {
  .p-pagination {
    --item-size: 2rem;
    --item-gap: 0.625rem;
    margin-top: 6.25rem;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .p-pagination {
      --item-size: 1.5rem;
      --item-gap: 0.5rem;
    }
  }
  .p-pagination__items {
    position: relative;
    display: inline-flex;
    gap: var(--item-gap);
    align-items: center;
  }
  @media screen and (max-width: 767px) {
    .p-pagination__items {
      gap: 2.6666666667vmin;
    }
  }
  .p-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--item-size);
    height: var(--item-size);
    font-size: 1.375rem;
  }
  @media screen and (max-width: 767px) {
    .p-pagination .page-numbers {
      font-size: 0.875rem;
    }
  }
  @media (hover: hover) {
    .p-pagination .page-numbers[href] {
      transition: background-color 0.3s;
    }
    .p-pagination .page-numbers[href]:hover {
      background-color: #c6c5c5;
    }
  }
  .p-pagination .page-numbers.current {
    background-color: #c6c5c5;
  }
  .p-pagination .page-numbers.prev, .p-pagination .page-numbers.next {
    position: absolute;
    background: url("../img/common/icon/icon_arrow_right.png") center center/1.25rem 0.9375rem no-repeat;
  }
  @media screen and (max-width: 767px) {
    .p-pagination .page-numbers.prev, .p-pagination .page-numbers.next {
      background-size: 0.9375rem 0.625rem;
    }
  }
  .p-pagination .page-numbers.prev {
    left: calc((var(--item-size) * 1 + var(--item-gap)) * -1);
    transform: scale(-1, 1);
  }
  .p-pagination .page-numbers.next {
    right: calc((var(--item-size) * 1 + var(--item-gap)) * -1);
  }
}
@layer project {
  .p-page-top {
    position: sticky;
    bottom: 1.875rem;
    z-index: 9;
    height: 0;
    padding-right: 2.5rem;
    text-align: right;
  }
  @media screen and (max-width: 767px) {
    .p-page-top {
      padding-right: 1.0625rem;
    }
  }
  .p-page-top__btn {
    position: relative;
    top: -3.75rem;
    display: inline-grid;
    place-content: center;
    width: 3.875rem;
    height: 3.875rem;
    padding: 0;
    text-align: center;
    background: #000 url("../img/common/icon/icon_arrow_up_white.png") top 45% left 50%/2.3125rem 1.4375rem no-repeat;
    border: 2px solid var(--main);
    border-radius: 50%;
    opacity: 0;
    transition: 0.3s;
    transition-property: transform, opacity;
  }
  @media screen and (max-width: 767px) {
    .p-page-top__btn {
      top: -1.25rem;
      width: 2.125rem;
      height: 2.125rem;
      background-size: 1.1875rem 0.75rem;
    }
  }
  @media (any-hover: hover) {
    .p-page-top__btn:hover {
      transform: scale(1.1);
    }
  }
  .p-page-top__btn.is-show {
    opacity: 1;
  }
}
@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-tt-upper {
    text-transform: uppercase;
  }
  @media screen and (max-width: 767px) {
    .u-SP-tt-upper {
      text-transform: uppercase;
    }
  }
}