@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*メディアサイズ*/
/* Scss Document */
/* Scss Document */
/*メデイアクエリブレイクポイント*/
/*clearfix*/
* {
  box-sizing: border-box;
}

body.-is-in {
  overflow: hidden;
  height: 100%;
  overflow: hidden;
  /* PC/Android */
  overscroll-behavior: none;
  touch-action: none;
}
body .-open {
  overflow: hidden;
}

.has-text-color {
  color: unset;
}

figure {
  margin: 0;
}

html {
  font-size: 100%;
}

html[data-font-scale=small] {
  font-size: 87.5%;
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  html[data-font-scale=small] {
    font-size: 100%;
  }
}

html[data-font-scale=medium] {
  font-size: 100%;
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  html[data-font-scale=medium] {
    font-size: 100%;
  }
}

html[data-font-scale=large] {
  font-size: 112.5%;
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  html[data-font-scale=large] {
    font-size: 100%;
  }
}

body {
  background-color: var(--wp--preset--color--background-gray);
  color: var(--wp--preset--color--primary);
  height: 100%;
  margin-bottom: 0 !important;
}
body button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}
body .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000;
  z-index: 200;
}

a {
  color: var(--wp--preset--color--link-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

* {
  /* 游明朝体 */
  font-family: "Noto Serif JP", serif;
  font-style: 400;
  font-display: swap;
}

/* Scss Document */
/*  ハンバーガーメニュー */
.toggle,
.toggle span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}

.toggle {
  opacity: 1;
  position: relative;
  width: 1.4rem;
  height: 0.6rem;
  cursor: pointer;
}
.toggle.top span {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}
.toggle.top span:nth-of-type(4) {
  bottom: -1rem;
  border: none;
  background: none;
  height: inherit;
  font-size: 0.55rem;
}
.toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.1rem;
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--background);
  transition: background-color 3s ease-in-out, color 3s ease-in-out, transform 0.4s;
  border-radius: 0.1rem;
}
.toggle span.stop {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--background);
}
.toggle span:nth-of-type(1) {
  top: 0;
}
.toggle span:nth-of-type(2) {
  top: 0.3rem;
}
.toggle span:nth-of-type(3) {
  top: 0.6rem;
}
.toggle span:nth-of-type(4) {
  bottom: -1rem;
  border: none;
  background: none;
  height: inherit;
  font-size: 0.55rem;
}

.toggle.active {
  transition: 0.3s;
}
.toggle.active span {
  background-color: var(--wp--preset--color--primary);
}
.toggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(0.3rem) rotate(-315deg);
  transform: translateY(0.3rem) rotate(-315deg);
}
.toggle.active span:nth-of-type(2) {
  opacity: 0;
}
.toggle.active span:nth-of-type(3) {
  -webkit-transform: translateY(-0.3rem) rotate(315deg);
  transform: translateY(-0.3rem) rotate(315deg);
}
.toggle.active span:nth-of-type(4) {
  background: none;
  color: #fff;
}

.toggle_wrap {
  border: 1px solid var(--wp--preset--color--background);
  border-radius: 100%;
  height: 2.4rem;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: border-color 3s ease-in-out;
  /*全スマホ*/
}
.toggle_wrap.-is-color {
  border-color: var(--wp--preset--color--primary);
  transition: border-color 3s ease-in-out;
}
.toggle_wrap.-is-color span {
  background-color: var(--wp--preset--color--primary);
}
.toggle_wrap.-open {
  border-color: var(--wp--preset--color--primary);
}
.toggle_cover {
  display: block;
  position: fixed;
  right: 0.6rem;
  top: 0.6rem;
  z-index: 1000;
}
.toggle_cover.-open {
  position: absolute;
  top: 0;
  right: 1rem;
}
.toggle_cover:hover {
  cursor: pointer;
}

/* 全画面の白背景オーバーレイ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--wp--preset--color--background);
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 1;
}

/* Lottieコンテナ（200x200） */
.loading-box {
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}

/* 低モーション配慮：アニメをスキップして即時非表示 */
@media (prefers-reduced-motion: reduce) {
  .loading-overlay {
    display: none !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  text-shadow: 0 0 11.387px rgba(0, 0, 0, 0.4);
}

.split-char {
  display: inline-block;
  transform: translate3d(-0.4em, 0, 0) scale(0.9);
  opacity: 0;
  will-change: transform, opacity;
  /* 付けっぱなしにしないなら後で外す */
  animation: pop-in 4000ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 45ms);
}

.js-split:not(.-in) .split-char {
  animation: none;
  /* ← -in がつくまでは止めておく */
}

.js-split {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--heading-xl);
  letter-spacing: 0.1rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
  text-shadow: 0 0 11.387px rgba(0, 0, 0, 0.4);
}
.js-split.-in {
  transform: translate3d(-0.4em, 0, 0);
  animation: 20s left-in forwards;
}

@keyframes pop-in {
  60% {
    transform: translate3d(0, 0, 0) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes left-in {
  60% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
/* ビューポートに入ったら開始したい場合 */
.-in .split-char {
  /* クラス付与時にアニメ開始（上記を適用） */
}

@media (max-width: 640px) {
  .split-contents {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-top: -5rem;
  }
}

.c-heading {
  font-weight: bold;
  margin-bottom: 1rem;
}
.c-heading__ttl {
  font-size: var(--wp--preset--font-size--heading-lg);
  text-align: center;
  margin-bottom: clamp(74px, 10vw, 180px);
}
.c-heading__subttl {
  font-size: var(--wp--preset--font-size--heading-md);
  margin: 0;
}

.c-logo {
  display: block;
  width: 5rem;
  height: 7rem;
  margin-left: -3rem;
  display: block;
  position: fixed;
  position: absolute;
  top: 1rem;
  left: 50%;
  z-index: 1000;
  opacity: 0;
}
.c-logo__img-mono, .c-logo__img-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.c-logo.-in {
  animation: logo-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  transform: scale(1.3);
}
.c-logo.-in-animated {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.c-logo:not(.-is-color, .-in) {
  transform: scale(1);
}
.c-logo:not(.-is-color) {
  transition: transform 3s;
}
.c-logo:not(.-is-color) .c-logo__img-color {
  opacity: 0;
  transition: 3s opacity, 3s transform;
}
.c-logo.-is-color.-in {
  transform: scale(0.9) !important;
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.c-logo.-is-color {
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, opacity 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s;
}
.c-logo.-is-color .c-logo__img-color {
  opacity: 1;
  transition: 3s opacity, 3s transform;
}
.c-logo.-is-color .c-logo__img-mono {
  opacity: 0;
  animation-direction: reverse;
  transform: scale(0.9);
  transition: 3s opacity, 3s transform;
}

.c-logo__hero-spacer {
  height: 100vh;
  margin-bottom: -1px;
}

@keyframes logo-in {
  60% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
.c-top-fv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-top-fv__frame {
  position: relative;
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* ← 少し傾けておく */
  transition: clip-path 3s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-top-fv__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  opacity: 0;
  /* ← ここが"枠が広がる"見え方の肝 */
  transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1) opacity 7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 枠線は擬似要素で被せる（ボーダー厚みを一定に保てる） */
.c-top-fv.-is-in .c-top-fv__frame {
  clip-path: inset(0);
}

.c-top-fv.-is-in .c-top-fv__frame img {
  transform: scale(1);
  transition: transform 20s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

.c-top-lead {
  padding-top: 8vw;
  padding-bottom: 8vw;
}
.c-top-lead__description {
  font-size: var(--wp--preset--font-size--body-lg);
  letter-spacing: 0.22em;
  grid-column: 3/span 8;
}
@container section (width < 1000px) {
  .c-top-lead__description {
    grid-column: 4/-4;
  }
  .c-top-lead__description br {
    display: none;
  }
}
.c-top-lead__link {
  grid-column: 12/span 4;
  justify-self: end;
  font-size: var(--wp--preset--font-size--body-md);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  opacity: 0;
  transform: translate3d(-2vw, 0, 0);
}
.c-top-lead__link.is-visible {
  animation: 4s left-in forwards;
}
.c-top-lead__link:hover {
  border-bottom: 1px solid var(--wp--preset--color--grey);
  text-decoration: none;
}

.c-top-message {
  grid-template-rows: auto auto 1fr auto;
  padding-block: clamp(6rem, -0.4rem + 16vw, 14rem);
}
@media (max-width: 640px) {
  .c-top-message {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "ttl ttl ttl ttl ttl ttl ttl ttl" "img-ttl img-ttl img-ttl img-ttl img-ttl img-ttl img-ttl img-ttl" "txt txt txt txt txt txt txt txt" "btn btn btn btn btn btn btn btn";
  }
}
.c-top-message__ttl {
  grid-column: 7/span 18;
  grid-row: 1/2;
  margin-block: 0;
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  align-content: center;
  line-height: 1;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  font-size: var(--wp--preset--font-size--heading-md);
  margin-bottom: clamp(2rem, 0.4rem + 4vw, 4rem);
  font-weight: 500;
}
@media (max-width: 1200px) {
  .c-top-message__ttl {
    grid-column: 5/span 20;
  }
}
@media (max-width: 640px) {
  .c-top-message__ttl {
    grid-area: ttl;
    grid-column: 1/-1;
    text-align: center;
    grid-template-columns: 1fr;
    gap: 1rem;
    font-size: 1.5rem;
  }
  .c-top-message__ttl .u-line {
    width: 30px;
    margin-inline: auto;
  }
}
.c-top-message__box {
  grid-column: 6/span 19;
  color: #ffffff;
}
.c-top-message__btn {
  grid-column: 32/44;
  grid-row: 2/3;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  margin-bottom: clamp(1rem, 0.2rem + 2vw, 2rem);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 15rem;
  font-size: var(--wp--preset--font-size--body-xs);
}
@media (max-width: 640px) {
  .c-top-message__btn {
    grid-area: btn;
    grid-column: 1/9;
    margin-inline: auto;
    width: 80%;
    text-align: center;
    margin-top: 2rem;
  }
}
.c-top-message__img-ttl {
  grid-column: 33/46;
  grid-row: 3/4;
  width: 100%;
  justify-self: end;
}
@media (max-width: 640px) {
  .c-top-message__img-ttl {
    grid-area: img-ttl;
    grid-column: 1/9;
    justify-self: center;
    width: 60%;
    margin-top: -5rem;
    transform: rotate(-5deg);
    opacity: 0.5;
  }
}
.c-top-message__r-box {
  grid-column: 28/44;
  margin-block: auto;
  display: grid;
  grid-template-columns: 1fr;
}
.c-top-message__txt {
  grid-row: 2/4;
  grid-column: 7/span 18;
  font-size: clamp(0.85rem, 0.57rem + 0.573vw, 1rem);
  font-size: var(--wp--preset--font-size--body-md);
  line-height: 200%;
  margin: 0;
}
@media (max-width: 1200px) {
  .c-top-message__txt {
    grid-column: 5/span 20;
  }
}
@media (max-width: 640px) {
  .c-top-message__txt {
    grid-area: txt;
    grid-column: 1/9;
  }
}

.c-top-service {
  margin-top: clamp(6rem, 4.4rem + 4vw, 8rem);
}
.c-top-service__ttl {
  text-align: center;
  font-size: var(--wp--preset--font-size--heading-md);
  color: var(--wp--preset--color--primary);
  position: relative;
}
.c-top-service__ttl:after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 1px;
  background-color: var(--wp--preset--color--accent);
}
.c-top-service__subttl {
  font-size: clamp(8rem, 6.4rem + 4vw, 10rem);
  color: var(--wp--preset--color--primary);
  margin: 0;
  margin-top: -8rem;
  color: #BFC6CA;
  text-align: center;
  font-weight: 500;
  opacity: 0.4;
}
.c-top-service__lead {
  font-size: var(--wp--preset--font-size--body-md);
  font-size: clamp(1rem, 0.25rem + 1vw, 1.5rem);
  text-align: center;
  line-height: 200%;
  margin-block: clamp(2rem, 0.4rem + 4vw, 4rem);
}
@media (max-width: 1200px) {
  .c-top-service__lead {
    padding-inline: 2rem;
  }
}
@media (max-width: 640px) {
  .c-top-service__lead {
    text-align: left;
  }
}

.c-top-service-card {
  margin-block: clamp(6rem, 4.4rem + 4vw, 8rem);
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .c-top-service-card {
    grid-template-rows: repeat(8, minmax(0, 1fr));
    grid-template-rows: inherit;
    gap: 0 !important;
    margin-block: 2rem;
  }
}
.c-top-service-card__picture {
  grid-column: 1/25;
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 5;
  grid-row: 1/8;
  height: 100%;
}
.c-top-service-card__picture.-reverse {
  grid-column: 25/49;
}
@media (max-width: 640px) {
  .c-top-service-card__picture {
    grid-column: 1/-1;
    grid-row: inherit;
    margin-left: -1.5rem;
  }
  .c-top-service-card__picture.-reverse {
    grid-column: 1/-1;
    margin-right: -1.5rem;
    margin-left: 1.5rem;
  }
}
.c-top-service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-top-service-card__icon {
  height: 5rem;
}
@media (max-width: 640px) {
  .c-top-service-card__icon {
    height: 15vw;
  }
}
.c-top-service-card__ttl {
  font-size: var(--wp--preset--font-size--heading-sm);
  border-bottom: 1px solid var(--wp--preset--color--accent);
  padding-bottom: 2.5rem;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.c-top-service-card__box {
  position: relative;
  z-index: 4;
  grid-column: 17/49;
  grid-row: 2/9;
  background-color: var(--wp--preset--color--primary);
  align-content: center;
  padding-block: clamp(4rem, -5rem + 12vw, 10rem);
}
.c-top-service-card__box.-reverse {
  grid-column: 1/33;
}
@media (max-width: 640px) {
  .c-top-service-card__box {
    grid-column: 1/-1;
    height: auto;
    grid-row: inherit;
    margin-top: -2rem;
  }
  .c-top-service-card__box.-reverse {
    grid-column: 1/-1;
  }
}
.c-top-service-card__box-inr {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  color: var(--wp--preset--color--white);
  align-content: center;
}
.c-top-service-card__head {
  grid-column: 12/26;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.c-top-service-card__head.-reverse {
  grid-column: 6/20;
}
@media (max-width: 1200px) {
  .c-top-service-card__head {
    grid-column: 12/30;
  }
  .c-top-service-card__head.-reverse {
    grid-column: 3/21;
  }
}
@media (max-width: 640px) {
  .c-top-service-card__head {
    grid-column: 2/48;
  }
  .c-top-service-card__head.-reverse {
    grid-column: 2/48;
  }
}
.c-top-service-card__txt {
  grid-column: 12/26;
  font-size: var(--wp--preset--font-size--body-md);
  font-weight: 400;
  line-height: 200%;
  letter-spacing: 0.05em;
  color: #F1F1F1;
}
.c-top-service-card__txt.-reverse {
  grid-column: 6/20;
}
@media (max-width: 1200px) {
  .c-top-service-card__txt {
    grid-column: 12/30;
  }
  .c-top-service-card__txt.-reverse {
    grid-column: 3/21;
  }
}
@media (max-width: 640px) {
  .c-top-service-card__txt {
    grid-column: 3/29;
  }
  .c-top-service-card__txt.-reverse {
    grid-column: 3/29;
  }
}

@media (max-width: 1000px) {
  .c-top-about {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1rem;
    width: calc(100% - 4rem);
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .c-top-about {
    width: 100%;
  }
}
.c-top-about__picture {
  position: relative;
  height: 80%;
  grid-column: 8/24;
}
@media (max-width: 1500px) {
  .c-top-about__picture {
    grid-column: 7/24;
  }
}
.c-top-about__picture:after {
  content: "";
  display: block;
  background: linear-gradient(180deg, #004B79 0%, #2277A6 100%);
  position: absolute;
  top: clamp(2rem, 0.857rem + 2.857vw, 3rem);
  left: calc(clamp(2rem, 0.857rem + 2.857vw, 3rem) * -1);
  width: 100%;
  height: 100%;
}
@media (max-width: 1200px) {
  .c-top-about__picture {
    grid-column: 4/24;
  }
}
@media (max-width: 1000px) {
  .c-top-about__picture {
    grid-column: 3/-3;
    grid-row: 2;
    margin: 3rem;
  }
}
@media (max-width: 640px) {
  .c-top-about__picture {
    grid-column: 1/-1;
  }
}
.c-top-about__img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 5;
}
@media (max-width: 1200px) {
  .c-top-about__img {
    grid-column: 6/24;
  }
}
.c-top-about__box {
  grid-column: 26/42;
}
@media (max-width: 1500px) {
  .c-top-about__box {
    grid-column: 26/45;
  }
}
@media (max-width: 1200px) {
  .c-top-about__box {
    grid-column: 26/47;
  }
}
@media (max-width: 1000px) {
  .c-top-about__box {
    grid-column: 1/-1;
    margin-top: 2rem;
    grid-row: 1;
  }
}
.c-top-about__ttl {
  letter-spacing: 0.2em;
  font-size: var(--wp--preset--font-size--heading-md);
  color: var(--wp--preset--color--primary);
  display: grid;
  grid-template-columns: 1fr 0.5fr;
  align-content: center;
  line-height: 1;
}
@media (max-width: 1000px) {
  .c-top-about__ttl {
    grid-template-columns: 1fr;
    position: relative;
    text-align: center;
  }
  .c-top-about__ttl:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    height: 1px;
    background-color: var(--wp--preset--color--accent);
  }
  .c-top-about__ttl .u-line {
    display: none;
  }
}
.c-top-about__ttl--display {
  font-family: var(--wp--preset--font-family--quentin);
  font-size: clamp(3rem, 0.714rem + 5.714vw, 5rem);
  color: #BFC6CA;
  font-weight: 500;
}
@media (max-width: 1000px) {
  .c-top-about__ttl--display {
    display: block;
    text-align: center;
  }
}
.c-top-about__txt {
  font-size: var(--wp--preset--font-size--body-md);
  line-height: 200%;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--primary);
}
.c-top-about__name-ttl {
  font-size: var(--wp--preset--font-size--heading-sm);
  letter-spacing: 0.05em;
}
.c-top-about__img-name {
  width: 100%;
  object-fit: cover;
  height: auto;
  max-width: 400px;
}
@media (max-width: 1000px) {
  .c-top-about__img-name {
    width: 60%;
    display: block;
  }
}

.c-top-company {
  margin-block: 5rem;
}
@media (max-width: 1000px) {
  .c-top-company {
    padding-inline: 0 !important;
  }
}
.c-top-company__head {
  grid-column: 1/24;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  align-content: center;
  text-align: center;
}
@media (max-width: 1000px) {
  .c-top-company__head {
    grid-column: 1/-1;
    aspect-ratio: 1/1;
  }
}
.c-top-company__ttl {
  letter-spacing: 0.2em;
  font-size: var(--wp--preset--font-size--heading-md);
  color: var(--wp--preset--color--white);
  position: relative;
}
.c-top-company__ttl:after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 1px;
  background-color: var(--wp--preset--color--accent);
}
.c-top-company__ttl--display {
  font-size: clamp(5rem, 3.222rem + 3.642vw, 6.5rem);
  color: var(--wp--preset--color--primary);
  color: #055180;
  display: block;
  margin-top: -3rem;
}
.c-top-company__table {
  grid-column: 28/46;
  width: 100%;
  border-collapse: collapse;
}
@media (max-width: 1000px) {
  .c-top-company__table {
    width: calc(100% - 2rem);
    margin-inline: auto;
    grid-column: 1/-1;
  }
}
.c-top-company__table th,
.c-top-company__table td {
  padding: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--primary);
  text-align: left;
  font-size: var(--wp--preset--font-size--body-xs);
  font-size: var(--wp--preset--font-size--body-md);
}

.c-top-casestudy {
  margin-block: clamp(4rem, -2rem + 8vw, 8rem);
}
.c-top-casestudy__wrap {
  grid-column: 7/42;
  display: grid;
  grid-template-columns: 1fr;
}
@media (max-width: 1500px) {
  .c-top-casestudy__wrap {
    grid-column: 7/42;
  }
}
@media (max-width: 1200px) {
  .c-top-casestudy__wrap {
    grid-column: 4/45;
  }
}
@media (max-width: 1000px) {
  .c-top-casestudy__wrap {
    grid-column: 3/-3;
  }
}
@media (max-width: 640px) {
  .c-top-casestudy__wrap {
    grid-column: 1/-1;
  }
}
.c-top-casestudy__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, -2rem + 4vw, 3rem);
  margin-bottom: clamp(6rem, 4.4rem + 4vw, 8rem);
  margin-bottom: clamp(4rem, -2rem + 8vw, 8rem);
}
@media (max-width: 640px) {
  .c-top-casestudy__head {
    grid-template-columns: 1fr;
    text-align: center;
    margin-bottom: clamp(2rem, 0.4rem + 4vw, 4rem);
  }
}
.c-top-casestudy__ttl {
  margin-block: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, -2rem + 4vw, 3rem);
  align-content: center;
  line-height: 1;
  font-size: clamp(2rem, 0.5rem + 2vw, 3rem);
  font-size: var(--wp--preset--font-size--heading-md);
  font-weight: 700;
  color: var(--wp--preset--color--primary);
}
@media (max-width: 640px) {
  .c-top-casestudy__ttl {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 1rem;
    font-size: 1.5rem;
  }
  .c-top-casestudy__ttl .u-line {
    width: 30px;
    margin-inline: auto;
  }
}
.c-top-casestudy__ttl--display {
  font-size: clamp(4rem, 1rem + 4vw, 6rem);
  color: #BFC6CA;
  opacity: 0.3;
}
@media (max-width: 640px) {
  .c-top-casestudy__ttl--display {
    margin-top: -3rem;
  }
}
.c-top-casestudy__box {
  grid-column: 1/29;
  grid-row: 2/3;
}
.c-top-casestudy__item:last-child .c-top-casestudy__link {
  border-bottom: none;
}
.c-top-casestudy__link {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  font-size: clamp(1rem, 0.25rem + 1vw, 1.5rem);
  align-content: center;
  padding-bottom: clamp(1rem, 0.25rem + 1vw, 1.5rem);
  margin-bottom: clamp(1rem, 0.25rem + 1vw, 1.5rem);
}
.c-top-casestudy__label {
  background: var(--wp--preset--color--primary);
  display: block;
  padding: 0.2rem 0.5rem;
  color: var(--wp--preset--color--white);
  font-size: 80%;
}

.c-top-map iframe {
  width: 100%;
  height: 500px;
}
@media (max-width: 640px) {
  .c-top-map iframe {
    height: 300px;
  }
}

.c-form {
  grid-column: 6/-6;
}
.c-form .smf-form--simple-table .smf-item {
  padding: 0.5rem 0;
  font-size: var(--wp--preset--font-size--body-md);
}
.c-form input,
.c-form textarea,
.c-form select,
.c-form button {
  font-size: var(--wp--preset--font-size--body-md);
}
.c-form .smf-textarea-control__control {
  color: #000;
}
.c-form .smf-action .smf-button-control__control {
  width: 100%;
  background-image: none;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  appearance: none;
  -webkit-appearance: none;
  padding: 1rem;
  margin-block: clamp(2rem, 0.5rem + 2vw, 3rem);
}
@media (max-width: 640px) {
  .c-form {
    grid-column: 1/-1;
  }
}

.c-contact {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2rem auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  height: 12rem;
  width: 2rem;
}
.c-contact:hover {
  text-decoration: none;
}
.c-contact__head {
  background-color: var(--wp--preset--color--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--accent);
}
.c-contact__body {
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--body-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-global-nav {
  opacity: 0;
  visibility: hidden;
  margin-left: -30000px;
  transition: opacity 0.4s, visibility 0.4s;
  position: fixed;
  height: 100vh;
  width: 100%;
  top: var(--spheader-height, 0px);
  left: 0;
  background: var(--wp--preset--color--background);
  overflow: auto;
}
.c-global-nav.-open {
  margin: 0;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0.4s;
  z-index: 500;
  overflow: hidden;
}
.c-global-nav__list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: 1rem;
}
.c-global-nav__list a {
  font-size: var(--wp--preset--font-size--body-md);
  color: var(--wp--preset--color--primary);
  transition: color 0.3s ease-in-out;
}
.c-global-nav__list a:hover {
  color: var(--wp--preset--color--link-hover);
  transition: color 0.3s ease-in-out;
  text-decoration: none;
}

.c-font-scale-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.c-font-scale-switcher__label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}
.c-font-scale-switcher__button {
  padding: 0.25rem 0.5rem;
  border: none;
  background-color: var(--wp--preset--color--background-gray);
  border-radius: 100%;
  cursor: pointer;
  font-size: var(--wp--preset--font-size--sm);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  aspect-ratio: 1/1;
  font-weight: bold;
}
.c-font-scale-switcher__button.is-active {
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--red);
}

/* ▼ 汎用レイアウト：c-split（この中の子にカラム割り当てを指示） */
.c-split {
  /* 子の配置パラメータ（デフォルト） */
  /* 自身は“グリッドの1行”として振る舞うので display: contents が便利 */
  display: contents;
  /* 親の .u-grid のグリッドラインをそのまま使える */
}
.c-split--lead {
  --body-col: 3 / span 8;
  --aside-col: 12 / span 4;
  --align: center;
}
.c-split--top-service {
  --body-col: 12 / span 6;
  --aside-col: 2 / span 9;
  --align: center;
}
.c-split--top-service--reverse {
  --aside-col: 9 / span 9;
  --body-col: 2 / span 6;
  --align: center;
}
.c-split--top-about {
  --aside-col: 10 / span 6;
  --body-col: 4 / span 6;
  --align: center;
}
.c-split--top-company .c-tableList {
  grid-column: 4/span 12;
}
.c-split--form .c-form {
  grid-column: 4/-4;
}
@media (max-width: 640px) {
  .c-split--form .c-form {
    grid-column: 2/-2;
  }
  .c-split--form .c-form textarea {
    width: 50%;
  }
  .c-split--form .c-form input {
    width: 50%;
  }
}

@container section (width < 1000px) {
  .c-split {
    --body-col: 3 / -3;
    --aside-col: 3 / -3;
    --align: start;
  }
  .c-split--top-about {
    --body-col: 3 / -3;
    --aside-col: 5 / -5;
    --align: start;
  }
}
.c-tableList {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--body-md);
  width: 100%;
}
.c-tableList dt,
.c-tableList dd {
  border-bottom: 1px solid var(--wp--preset--color--primary);
  margin: 0;
  padding: 1rem 4rem 1rem 0;
}

.c-prose {
  letter-spacing: 0.22em;
  font-size: var(--wp--preset--font-size--body-xs);
}
.c-prose--lg {
  font-size: var(--wp--preset--font-size--body-lg);
}

@container section (width < 1000px) {
  .c-prose br {
    display: none;
  }
}
.c-aside {
  grid-column: var(--aside-col);
  justify-self: end;
  align-self: var(--align);
  font-size: var(--wp--preset--font-size--body-md);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  grid-row: 1;
}
@container section (width < 1000px) {
  .c-aside {
    grid-row: inherit;
  }
}
.c-aside:hover {
  border-bottom: 1px solid var(--wp--preset--color--grey);
  text-decoration: none;
}

.c-body {
  grid-column: var(--body-col);
  align-self: var(--align);
  font-size: var(--wp--preset--font-size--body-md);
  grid-row: 1;
}
@container section (width < 1000px) {
  .c-body {
    grid-row: inherit;
  }
}

.c-media {
  --aspect: 7 / 5;
}
.c-media img {
  width: 100%;
  aspect-ratio: var(--aspect, 7/5);
  object-fit: cover;
}
.c-media--service {
  --aspect: 7 / 5;
}
.c-media--about {
  --aspect: 3 / 4;
}

.u-anime__gradient {
  background-image: linear-gradient(90deg, rgb(13, 46, 64) 0%, rgb(13, 46, 64) 80%, rgba(13, 46, 64, 0) 100%);
  background-repeat: repeat-y;
  background-position: 200% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  opacity: 0;
  -webkit-text-fill-color: rgba(13, 46, 64, 0.12);
  will-change: background-position;
}
.u-anime__gradient.is-visible {
  background-position: 0% 50%;
  opacity: 1;
  transition: opacity 0.35s linear 0s, background-position 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.u-anime__gradient--white {
  background-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat-y;
  background-position: 200% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  opacity: 0;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.12);
  will-change: background-position;
}
.u-anime__gradient--white.is-visible {
  background-position: 0% 50%;
  opacity: 1;
  transition: opacity 0.35s linear 0s, background-position 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.u-anime--leftin {
  /* アニメ初期状態 */
  opacity: 0;
  transform: translate3d(-2vw, 0, 0);
}
.u-anime--leftin.is-visible {
  animation: left-in 4s forwards;
}

/* アニメーション（元の名前を踏襲） */
@keyframes left-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.u-anime--pict-in {
  position: relative;
  display: block;
  overflow: hidden;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  opacity: 0;
}
.u-anime--pict-in picture:not([class]) {
  transform: translate3d(0, -0.9375rem, 0) scale(1.1);
}
.u-anime--pict-in.is-visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  transition: clip-path 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0s, transform 2.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 2.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0s, -webkit-clip-path 2.2s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 2.2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.u-anime--pict-in.is-visible picture:not([class]) {
  transform: translateZ(0) scale(1);
  transition: transform 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

@media (min-width: 641px) {
  .-sp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.-pc {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (min-width: 641px) {
  .-pc {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }
}

.u-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(16, 1fr);
  align-items: center;
  --gutter: clamp(32px, 4vw, 48px);
  --max: 1280px;
  display: grid;
  grid-template-columns: 1fr repeat(16, minmax(0, calc((var(--max) - 2 * var(--gutter)) / 16))) 1fr;
  column-gap: var(--gutter);
}
.u-grid--edge {
  margin-inline: calc(var(--gutter) * -1);
}

.u-container {
  --pad-block: 8vw;
  container-type: inline-size;
  container-name: section;
  padding-block: var(--pad-block, 0);
}

.u-border__bottom {
  border-bottom: 1px solid var(--wp--preset--color--primary);
  padding: 8rem 0;
  margin: 0 1rem;
}

.u-gradient--triangle {
  background: linear-gradient(180deg, #004B79 0%, #2277A6 100%);
  position: relative;
}
.u-gradient--triangle:after {
  content: "";
  position: absolute;
  inset: 0;
  /* 要素全体を覆う */
  background: #126290;
  /* 三角形の色 */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* 右上・右下・左下 */
}
.u-gradient--triangle > * {
  position: relative;
  z-index: 1;
}

.u-gradient {
  background: linear-gradient(180deg, #004B79 0%, #2277A6 100%);
}

.u-typography__en {
  letter-spacing: 0.37em;
}

.u-font-display {
  font-family: "Quentin", serif;
}

.u-line {
  border-bottom: 1px solid var(--wp--preset--color--accent);
  display: block;
  height: 50%;
}
.u-line.-black {
  border-color: var(--wp--preset--color--primary);
}

.l-header {
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid var(--wp--preset--color--background-gray);
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  .l-header {
    z-index: 1200;
  }
}
.l-header__toggle {
  grid-area: toggle;
  justify-self: start;
  display: none;
  /*PC*/
  /*全スマホ*/
}
@media all and (min-width: 40em) {
  .l-header__toggle {
    display: none;
  }
}
@media only screen and (max-width: 40em) {
  .l-header__toggle {
    display: block;
  }
}

.l-footer__inr {
  margin-block: 2rem;
  text-align: center;
}
.l-footer address {
  margin-block: 1rem;
}

.grecaptcha-badge {
  visibility: hidden;
}

.l-content {
  max-width: 62.5rem;
  max-width: 75rem;
  width: 100%;
  margin-inline: auto;
  flex: 1;
  /* JSで設定 */
}
.l-content__inr {
  padding: 2rem;
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  .l-content__inr {
    padding-top: 6.5rem;
  }
}
.l-content__2col {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  /*全スマホ*/
}
@media only screen and (max-width: 40em) {
  .l-content__2col {
    grid-template-columns: 1fr;
  }
}
.l-content__left {
  background-color: var(--wp--preset--color--background);
}
.l-content__right {
  background-color: var(--wp--preset--color--background);
}

.l-col3 {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.l-col3__left {
  flex: 1;
}
.l-col3__main {
  flex: 2;
}
.l-col3__right {
  flex: 1;
}

.l-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

:root {
  --container: 1200px;
  --side: clamp(16px, 4.2vw, 32px);
  --gutter: 16px;
}

.l-grid48 {
  display: grid;
  grid-template-columns: repeat(48, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 640px) {
  .l-grid48 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1rem;
    padding-inline: 1.5rem;
  }
}

.l-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--side);
}