/* pages/top.css: TOPページ専用（変数・ヘッダー/ドロワーのTOP用配置・FV〜NEWS の各セクション・SP再構成・アニメーション）。
   TOPの読み込み順で最後（base → drawer → footer → marquee の後）。components/ の宣言を同じセレクタで上書きしている箇所がある。
   PCは1366px幅基準、SPは375px幅基準で座標を vw に変換している。 */
:root {
  --c-ink: #212121;
  /* フォント: 本文・見出しとも Noto Sans JP（約物は YakuHanJP）、欧文は din-2014（使うのは w700 のみ）。
     Hiragino を挟まないこと（挟むと Mac だけヒラギノで組まれ、デザインと見た目がずれる） */
  --f-base: YakuHanJP, "Noto Sans JP", sans-serif;
  --f-title: YakuHanJP, "Noto Sans JP", sans-serif;
  --f-en: "din-2014", "Helvetica Neue", Arial, sans-serif;
  --content-w: 1248px;
  --gutter: 20px;
  --header-h: 104px;
  /* 動き: 通常UIは臨界減衰相当でオーバーシュートさせない */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* ドロワーの clip-path 開閉専用。--ease は終盤が長く伸びるため、開閉両方に使うと「開く＝早すぎ／閉じる＝もっさり」になる。
     開く＝ease-in-out、閉じる＝ease-in に分けている */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.footer__social {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(10px, 1.025vw, 20px);
}

.service__marquee-text {
  color: rgba(255, 255, 255, .14);
}

.works__list,
.works__more {
  position: relative;
  z-index: 3;
}

/* アンカー移動先が固定ヘッダーの下に隠れないためのオフセット */
#top,
#about,
#service,
#reason,
#works,
#news,
#contact {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  color: var(--c-ink);
  background: var(--c-white);
  font-family: var(--f-base);
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 1.8;
  overflow-x: hidden;
}

body.is-nav-open {
  overflow: hidden;
}

img {
  height: auto;
}

svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* 和文タイトル（見出しに当てる） */
.u-title {
  font-family: var(--f-title);
  font-weight: 700;
  line-height: 1.5;
  /* 見出しは大きいほど字間を締める */
  letter-spacing: -0.02em;
}

/* 欧文（din-2014）。和文には当てない。使うウェイトは700のみなので既定を700にする */
.u-en {
  font-family: var(--f-en);
  font-weight: 700;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 背景アニメーション: 最背面に fixed + z-index:-1 の WebGL2 キャンバス（js/fluid-bg.js）を置く。
   WebGL2 非対応・reduced-motion 時はキャンバスを出さず、下の静的グラデーションだけを見せる
   （fluid-bg.js が body に is-fluid-active を付けたときだけフォールバックを隠す） */
body {
  /* フォールバック: WebGL 非対応・reduced-motion 時だけ見える静止グラデーション。
     js/fluid-bg.js の色調と合わせ、ほぼ白に近い淡さに抑えている（色を濃くしない） */
  background: radial-gradient(36% 28% at 14% 10%, rgba(223, 234, 255, 0.85) 0%, rgba(223, 234, 255, 0) 72%),
    radial-gradient(30% 24% at 86% 22%, rgba(37, 187, 215, 0.2) 0%, rgba(37, 187, 215, 0) 72%),
    radial-gradient(40% 30% at 50% 60%, rgba(67, 90, 134, 0.12) 0%, rgba(67, 90, 134, 0) 74%),
    var(--c-white);
}

/* ピンク・紫のアクセント層だけを分け、濃淡と位置をゆっくり動かす。
   WebGL 描画に成功するとキャンバスがこの層を覆うので、実質 WebGL 非対応時のフォールバック */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 38% at 18% 24%, rgba(255, 175, 198, 0.24) 0%, rgba(255, 175, 198, 0) 88%),
    radial-gradient(34% 26% at 80% 66%, rgba(255, 175, 198, 0.2) 0%, rgba(255, 175, 198, 0) 88%),
    radial-gradient(28% 22% at 58% 8%, rgba(255, 175, 198, 0.16) 0%, rgba(255, 175, 198, 0) 88%),
    radial-gradient(40% 30% at 70% 30%, rgba(198, 180, 226, 0.18) 0%, rgba(198, 180, 226, 0) 88%),
    radial-gradient(30% 24% at 30% 82%, rgba(198, 180, 226, 0.15) 0%, rgba(198, 180, 226, 0) 88%);
  animation: bg-accent-breathe 22s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    opacity: 0.85;
  }
}

/* ヘッダー／ハンバーガーメニュー。オーバーレイは発生源（右上のボタン）から円で開き、項目は上から順に fade-up する */
.header {
  /* ヘッダーは固定せず、FV上部に重ねたままスクロールで流れる */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-h);
  padding-inline: var(--gutter);
  /* header（z-index:100）は gnav（99）より前面にあるため、gnav の閉じアニメーション（0.6s）が終わるまで再表示を遅らせる
     （遅らせないとロゴと×ボタンが二重に見える） */
  transition: visibility 0s linear 0.6s;
}

@media (min-width: 768px) {
  .header {
    padding-inline: 4.3924vw;
  }
}

.hamburger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.3924vw;
  height: 4.3924vw;
  border-radius: 50%;
  background: var(--c-navy);
  transition: background 0.4s var(--ease);
}

.hamburger__lines {
  position: relative;
  display: block;
  width: 2.0498vw;
  height: 0.8053vw;
}

.hamburger__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-white);
  transition: transform 0.4s var(--ease),
    opacity 0.2s linear;
}

.hamburger__lines span:nth-child(1) {
  top: 0;
}

.hamburger__lines span:nth-child(2) {
  bottom: 0;
}

/* 開いたら × に */
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) {
  transform: translateY(4.75px) rotate(20deg);
}

.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) {
  transform: translateY(-4.75px) rotate(-20deg);
}

.gnav {
  z-index: 99;
  display: block;
  background: rgba(4, 26, 68, 0.82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  /* 発生源（右上のボタン）から円で開く */
  clip-path: circle(0% at calc(100% - 50px) 72px);
  /* 閉じるときは終盤で加速する --ease-in（--ease だと縮みきる直前が尾を引き、なかなか消えない） */
  transition: clip-path 0.6s var(--ease-in),
    visibility 0s linear 0.6s;
}

.gnav.is-open {
  clip-path: circle(150% at calc(100% - 50px) 72px);
  /* 開くときは序盤を穏やかにする --ease-inout（--ease だと一瞬で画面を覆って早すぎる） */
  transition: clip-path 0.7s var(--ease-inout),
    visibility 0s linear 0s;
}

/* ドロワーには専用ロゴと閉じるボタンがあるため、展開中は通常ヘッダーを隠す。隠すときは遅延なし（遅延は閉じるときだけ） */
body.is-nav-open .header {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0s;
}

/* ドロワー（PC）: 左に写真、右に2カラムのリンク */
.gnav__close {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--c-white);
}

@media (min-width: 768px) {
  .gnav__close {
    top: 48px;
    right: 4.3924vw;
  }
}

.gnav__panel {
  position: relative;
  z-index: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 88px var(--gutter) 24px;
}

@media (min-width: 768px) {
  .gnav__panel {
    padding: 48px 4.3924vw 32px;
  }
}

.gnav__inner {
  align-content: center;
  gap: 32px;
}

@media (min-width: 768px) {
  .gnav__inner {
    grid-template-columns: 43.5641vw minmax(0, 1fr);
    align-items: center;
    gap: 7.3206vw;
  }
}

.gnav__photo {
  display: none;
}

@media (min-width: 768px) {
  .gnav__photo {
    display: block;
    width: 43.5641vw;
    height: 33.5722vw;
    overflow: hidden;
    border-radius: 8px;
  }
}

.gnav__main {
  gap: 40px;
}

@media (min-width: 768px) {
  .gnav__main {
    gap: 3.6603vw;
  }
}

.gnav__cols {
  grid-template-columns: repeat(2, auto);
  gap: 24px 0;
}

@media (min-width: 768px) {
  .gnav__cols {
    grid-template-columns: repeat(2, 18.5212vw);
    gap: 0;
  }
}

.gnav__list {
  gap: 24px;
}

@media (min-width: 768px) {
  .gnav__list {
    gap: 3.6603vw;
  }
}

.gnav__link {
  color: var(--c-white);
  font-family: var(--f-base);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  transition: opacity 0.3s var(--ease);
}

@media (min-width: 768px) {
  .gnav__link {
    gap: 0.6589vw;
    font-size: clamp(16px, 1.7569vw, 24px);
    letter-spacing: 0.0879vw;
  }
}

.gnav__link:hover,
.gnav__link:focus-visible {
  opacity: 0.7;
}

.gnav__dot {
  width: 8px;
  height: 8px;
}

@media (min-width: 768px) {
  .gnav__dot {
    width: 0.7321vw;
    height: 0.7321vw;
  }
}

.gnav__badges {
  gap: 12px;
}

@media (min-width: 768px) {
  .gnav__badges {
    gap: 1.5373vw;
  }
}

.gnav__badge-box {
  width: 115px;
  height: 50px;
  background: var(--c-white);
}

@media (min-width: 768px) {
  .gnav__badge-box {
    width: 16.8375vw;
    height: 7.3206vw;
    padding: 0.8053vw 4.1010vw;
  }

  .gnav__badge-box--hospitaldx {
    padding: 0.7321vw 0.6589vw;
  }
}

.gnav__badge-img--security {
  height: 38px;
}

@media (min-width: 768px) {
  .gnav__badge-img--security {
    height: 5.5259vw;
    width: 5.5259vw;
    object-fit: contain;
  }
}

.gnav__badge-crop {
  width: 60px;
  height: 38px;
}

@media (min-width: 768px) {
  .gnav__badge-crop--hospitaldx {
    width: 8.7550vw;
    height: 5.5410vw;
  }
}

.gnav__social-label {
  margin-bottom: 12px;
  color: var(--c-white);
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (min-width: 768px) {
  .gnav__social-label {
    margin-bottom: 2.1232vw;
    font-size: clamp(14px, 1.4641vw, 20px);
    letter-spacing: 0.0732vw;
  }
}

.gnav__social-list {
  gap: 15px;
}

@media (min-width: 768px) {
  .gnav__social-list {
    gap: 1.3381vw;
  }
}

.gnav__social-link {
  width: 39px;
  height: 39px;
  color: var(--c-white);
  transition: opacity 0.4s var(--ease);
}

@media (min-width: 768px) {
  .gnav__social-link {
    width: 3.5722vw;
    height: 3.5722vw;
  }
}

.gnav__ghost {
  left: -0.02em;
  bottom: -0.08em;
  color: rgba(255, 255, 255, 0.06);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 11vw;
  letter-spacing: -0.02em;
}

.gnav__footer {
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--c-white);
  font-size: 12px;
}

@media (min-width: 768px) {
  .gnav__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
}

.gnav__policy a {
  opacity: 0.8;
  transition: opacity 0.3s var(--ease);
}

.gnav__copyright {
  opacity: 0.6;
}

.gnav {
  background: #041a44;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gnav__logo {
  position: absolute;
  top: 42px;
  left: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 250px;
  height: 60px;
}

.gnav__logo-image {
  display: block;
  width: 238px;
  height: 61px;
  object-fit: contain;
}

.gnav__close {
  /* 閉じるボタンはハンバーガーと同じ vw 値・left 基準で置く（座標系が違うと開閉のたびに数pxずれて見える） */
  top: 3.0476vw;
  left: 91.2592vw;
  right: auto;
  width: 60px;
  height: 64px;
  border-radius: 0;
  color: #041a44;
  overflow: visible;
  box-shadow: none;
}

.gnav__close-image {
  display: block;
  width: 60px;
  height: 64px;
}

.gnav__panel {
  padding: 48px 60px 16px;
}

.gnav__inner {
  position: absolute;
  top: 161px;
  left: 60px;
  grid-template-columns: 595px 506px;
  gap: 100px;
  align-items: center;
  width: 1201px;
  height: 459px;
}

.gnav__photo {
  width: 595px;
  height: 459px;
  border-radius: 0;
}

.gnav__main {
  gap: 50px;
}

.gnav__cols {
  grid-template-columns: 253px 253px;
}

.gnav__list {
  gap: 45px;
}

.gnav__link {
  gap: 9px;
  font-size: 24px;
  line-height: 18px;
  letter-spacing: .05em;
}

.gnav__dot {
  width: 10px;
  height: 10px;
}

.gnav__badges {
  gap: 21px;
}

.gnav__badge-box {
  width: 230px;
  height: 100px;
  padding: 0 56px;
  border-radius: 3px;
}

.gnav__badge-box--hospitaldx {
  padding: 10px 9px;
}

.gnav__badge-img--security {
  width: 75px;
  height: 75px;
}

.gnav__badge-crop--hospitaldx {
  width: 120px;
  height: 76px;
}

.gnav__social-label {
  margin-bottom: 24px;
  font-size: 20px;
}

/* 旧フラット画像は使わない（アイコンは .gnav__social-list の個別SVG） */
.gnav__social-image {
  display: none;
}

.gnav__social-list {
  gap: 18px;
}

.gnav__social-link {
  width: 49px;
  height: 49px;
}

.gnav__ghost {
  font-size: 11vw;
}

.gnav__footer {
  position: absolute;
  inset: 0;
  left: 68px;
  right: 64px;
  padding: 0;
  border-top: 0;
  font-weight: 700;
  line-height: 12px;
}

@media (min-width: 768px) {
  /* ゴースト文字の帯とフッターテキストを同じ箱に入れ、箱の中で上下中央にそろえる。
     .gnav__panel の実高さ基準で bottom 固定なので、ブラウザの高さが変わっても位置がずれない */
  .gnav__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.1629vw;
    height: 9.5168vw;
  }

  .gnav__ghost {
    position: absolute;
    inset: 0;
    left: -0.02em;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  /* SPも backdrop-filter を外して不透明の単色にする。position:fixed + clip-path + backdrop-filter の組み合わせは
     iOS Safari でタップ判定がずれ、×ボタンが効かなくなることがある */
  .gnav {
    background: #041a44;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* SPは開閉を短くして機敏にする（イージングの使い分けはPCと同じ） */
    transition: clip-path 0.4s var(--ease-in),
      visibility 0s linear 0.4s;
  }

  .gnav.is-open {
    transition: clip-path 0.45s var(--ease-inout),
      visibility 0s linear 0s;
  }

  .gnav__logo {
    top: 4.0557vw;
    left: 4.5885vw;
    width: 46.0157vw;
    height: 10.9333vw;
  }

  .gnav__logo-image {
    width: 42.6667vw;
    height: 10.9333vw;
  }

  /* 見た目のアイコンは変えず当たり判定だけ44×44pxにする。位置はハンバーガーの中心と一致するよう left 基準で計算している */
  .gnav__close {
    top: 3.915vw;
    left: 84.8158vw;
    right: auto;
    width: 11.7333vw;
    height: 11.7333vw;
  }

  .gnav__close-image {
    width: 10.6667vw;
    height: 11.4667vw;
  }

  .gnav__panel {
    padding: 0 4.5333vw 4.2667vw;
  }

  .gnav__inner {
    position: absolute;
    top: 23.5vw;
    left: 4.6624vw;
    width: 91.8709vw;
    height: 110.4vw;
  }

  .gnav__photo {
    display: none;
  }

  .gnav__main {
    gap: 5.3333vw;
  }

  .gnav__cols {
    gap: 8vw;
    width: 72vw;
  }

  .gnav__list {
    gap: 5.3333vw;
    width: 32vw;
  }

  .gnav__link {
    gap: 2.4vw;
    font-size: 4.2667vw;
    line-height: 1.6;
    letter-spacing: 0.05em;
  }

  .gnav__dot {
    width: 2.6667vw;
    height: 2.6667vw;
  }

  .gnav__badges {
    display: flex;
    gap: 4.404vw;
  }

  .gnav__badge-box {
    width: 43.7333vw;
    height: 18.9333vw;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gnav__badge-box--hospitaldx {
    padding: 0;
  }

  .gnav__badge-img--security {
    width: 15.1845vw;
    height: 15.1845vw;
  }

  .gnav__badge-crop--hospitaldx {
    width: 26.5355vw;
    height: 16.7981vw;
  }

  .gnav__social-label {
    margin-bottom: 5.3333vw;
    font-size: 4.2667vw;
    letter-spacing: 0.2133vw;
    transform: none;
    writing-mode: horizontal-tb;
  }

  .gnav__social-list {
    gap: 4.5333vw;
  }

  .gnav__social-link {
    width: 13.0667vw;
    height: 13.0667vw;
  }

  .gnav__footer {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .gnav__policy {
    position: absolute;
    top: 126.7vw;
    left: 4.6624vw;
    margin: 0;
    font-size: 3.2vw;
    letter-spacing: 0.16vw;
    line-height: 3;
  }

  .gnav__copyright {
    position: absolute;
    top: 165.9vw;
    left: 4.397vw;
    margin: 0;
  }

  /* SPの帯の位置と overflow:hidden を .gnav__bottom に持たせる（ないとゴースト文字が画面幅を超えて横スクロールが出る） */
  .gnav__bottom {
    position: absolute;
    inset: 0;
    height: auto;
    overflow: hidden;
    pointer-events: none;
  }

  .gnav__footer {
    inset: 0;
    height: auto;
    pointer-events: auto;
  }

  .gnav__ghost {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: -0.02em;
    height: 18.4vw;
    display: flex;
    align-items: center;
  }
}

/* 矢印付きテキストリンク（一覧を見る 等） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 21px;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  letter-spacing: 0.06em;
}

.link-arrow__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.3924vw;
  height: 4.3924vw;
  border: 1px solid var(--c-navy);
  border-radius: 50%;
  overflow: hidden;
  transition: color 0.4s var(--ease);
}

.link-arrow__circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: var(--c-navy);
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}

.link-arrow__circle svg {
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--ease);
}

.link-arrow:hover .link-arrow__circle {
  color: var(--c-white);
}

.link-arrow:hover .link-arrow__circle::before {
  transform: scale(1);
}

.link-arrow:hover .link-arrow__circle svg {
  transform: translateX(4px);
}

/* circle-expand: FVの円形写真がスクロールで画面いっぱいに広がり、そのままABOUTの背景として残る。
   - .circle-expand が舞台（100vh の sticky 予約 + 220vh の拡大距離 + ABOUT本体）。拡大の進み具合 0→1 を JS が --p に入れる
   - --p 0 は FV の円、1 は画面いっぱいの矩形。最初の220vhで1に達し、ABOUTを読み終えるまで1のまま
   - JS は rAF で1フレーム1回だけ書き込む
   - sticky で留まるのは写真（.circle-expand__stage）だけ。.fv のテキスト等は absolute のまま流れて消える
   - ABOUTを舞台の中に入れて写真を共有している（別セクションに写真を敷き直すと、別カットに見えて継ぎ目ができる） */
.circle-expand {
  --p: 0;
  position: relative;
  /* 100vh = stageのsticky予約ぶん、220vh = 拡大アニメーションの巻き取り距離、
       67.1303vw = ABOUT本体（.about）の高さ。ABOUTがこの舞台の中に同居する */
  height: calc(100vh + 220vh + 67.1303vw);
}

.circle-expand__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* FVセクションの地色。.fv 自体は透明にし、この背景を透かして
       円形写真（.circle-expand__media）が見えるようにする */
  background: #f8f8f8;
}

.circle-expand__media {
  /* FVの円形写真をそのまま拡大し、別写真には差し替えない。
     p が 0.9〜1.0 の終盤だけ、ABOUTの文字を読ませるための紺の幕（.circle-expand__veil）をフェードインする */
  --circle-left: 17.3865vw;
  --circle-top: -5.7504vw;
  --circle-size: 66.0695vw;
  --circle-fade: clamp(0, calc((var(--p, 0) - 0.9) / 0.1), 1);
  position: absolute;
  left: calc(var(--circle-left) * (1 - var(--p)));
  top: calc(var(--circle-top) * (1 - var(--p)));
  width: calc(var(--circle-size) + (100vw - var(--circle-size)) * var(--p));
  height: calc(var(--circle-size) + (100vh - var(--circle-size)) * var(--p));
  border-radius: calc(50% * (1 - var(--p)));
  overflow: hidden;
  will-change: left, top, width, height, border-radius;
}

.circle-expand__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* ABOUT側の #435a86 opacity .7 ベタと同じ色を終盤にかけて重ね、
   セクションが切り替わった瞬間の色調ジャンプを防ぐ */
.circle-expand__veil {
  position: absolute;
  inset: 0;
  background: rgba(67, 90, 134, 0.7);
  opacity: var(--circle-fade);
  pointer-events: none;
}

/* 流れる帯の無限ループ（同じ内容を2枚並べて -50% 動かす。JSはトラックの複製だけ） */
.marquee {
  position: relative;
  width: 100%;
}

/* 事業内容の画像スライダーは hover で止めないため、一時停止ルールの対象から :not() で外す */
.marquee:not(.service__slider):hover .marquee__track {
  animation-play-state: paused;
}

/* スクロールでのフェードイン。カード・リスト系は main.js が --delay に index×0.15s を入れて順に表示する（PCのみ。SPは同時） */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* オープニングアニメーション（GSAP・js/intro.js）: 中央画像 → 左右テキスト → ヘッダー＋スクロール解禁。
   初期状態はCSSで隠し、GSAP が表示状態へアニメーションする */
html.is-intro-locked,
html.is-intro-locked body {
  overflow: hidden;
  height: 100%;
}

.js-intro-img {
  opacity: 0;
  transform: scale(1.06);
}

.js-intro-left,
.js-intro-right {
  opacity: 0;
  transform: translateY(28px);
}

.js-intro-header {
  opacity: 0;
  transform: translateY(-16px);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    transform: none;
  }

  /* 写真そのものがFV本編なので、最終状態（全幅）ではなく
       アニメーション開始前の静止状態（FVの円形写真・元の座標）で固定する。
       舞台の丈もABOUT延長ぶんを外し、.about を通常フローに戻して
       .circle-expand__stage の直後にそのまま並べる */
  .circle-expand {
    height: auto;
  }

  .circle-expand__stage {
    position: static;
    height: 54.978vw;
  }

  .circle-expand__media {
    left: 17.3865vw;
    top: -5.7504vw;
    width: 66.0695vw;
    height: 66.0695vw;
    border-radius: 50%;
  }

  .circle-expand__veil {
    opacity: 0;
  }

  /* ABOUT の reduced-motion 上書きは、メディアクエリでは詳細度が上がらないため、.about 本体の定義より後ろに別ブロックで置いている */
  .gnav {
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
    clip-path: none;
    opacity: 0;
  }

  .gnav.is-open {
    clip-path: none;
    opacity: 1;
    transition: opacity 0.2s linear, visibility 0s linear 0s;
  }

  .gnav__item,
  .js-reveal {
    transform: none;
    transition: opacity 0.2s linear;
  }

  html.is-intro-locked,
  html.is-intro-locked body {
    overflow: visible;
    height: auto;
  }

  .js-intro-img,
  .js-intro-left,
  .js-intro-right,
  .js-intro-header {
    opacity: 1;
    transform: none;
  }

  .link-arrow__circle::before,
  .link-arrow__circle svg {
    transition-duration: 0.1s;
  }
}

/* FV（1366px幅基準）。座標はデザインのフレーム相対の実値を vw に変換している */
.fv {
  /* .circle-expand（舞台）の中で position:absolute。舞台自体は sticky ではないため、
       ページスクロールに乗ってそのまま上へ流れて消える。円形写真（.circle-expand__media）
       だけが同じ .circle-expand 内で sticky ピン留めされ、居残って拡大する */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 54.978vw;
  overflow: hidden;
  /* 背景は透明。地色は下層の .circle-expand__stage が持ち、
       円形写真（.circle-expand__media）が透けて見える状態を保つ */
  background: transparent;
  pointer-events: none;
}

.fv > * {
  pointer-events: auto;
}

/* 背景の街並み（不透明度0.1はCSS側で持つ） */
.fv__bg {
  position: absolute;
  left: -0.3514vw;
  top: -7.9246vw;
  width: 100.6889vw;
  height: 67.2079vw;
  opacity: 0.1;
  pointer-events: none;
}

/* 2行（lh40）を55pxの箱の中で縦中央に置くデザインなので、flex の中央寄せで同じ位置を再現する */
.fv__lead {
  position: absolute;
  left: 4.2416vw;
  top: 14.795vw;
  display: flex;
  align-items: center;
  width: 25.183vw;
  height: 4.0264vw;
}

.fv__lead-text {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  line-height: 2.9283vw;
  letter-spacing: 0.0732vw;
  color: var(--c-navy);
}

.fv__rule {
  position: absolute;
  left: 0;
  top: 21.9912vw;
  width: 29.978vw;
  height: 1px;
  background: var(--c-navy);
}

/* 縦並びのアンカーメニュー */
.fv__nav {
  position: absolute;
  left: 4.4612vw;
  top: 24.4363vw;
}

.fv__nav-item + .fv__nav-item {
  margin-top: 0.366vw;
}

.fv__nav-link {
  display: flex;
  align-items: center;
  gap: 10.96px;
  height: 2.9283vw;
}

.fv__nav-dot {
  flex: none;
  width: 0.7321vw;
  height: 0.7321vw;
  border-radius: 50%;
  background: var(--c-cyan);
}

.fv__nav-label {
  font-family: var(--f-base);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  line-height: 2.9283vw;
  letter-spacing: 0.0732vw;
  color: var(--c-navy);
}

.fv-pill {
  position: absolute;
  left: 4.2416vw;
  width: 16.1054vw;
  height: 3.2943vw;
  border-radius: 999px;
}

.fv-pill__icon {
  position: absolute;
}

.fv-pill__label {
  position: absolute;
  display: flex;
  align-items: center;
  height: 1.3909vw;
  font-family: var(--f-base);
  font-weight: 700;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 1.4056vw;
  white-space: nowrap;
  color: var(--c-white);
}

/* 白地＋1pxのグラデ枠（padding-box / border-box の2層背景で描く） */
.fv-pill--doc {
  top: 39.6047vw;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(300deg, #041a44 0%, #435a86 46%, #25bbd7 100%) border-box;
}

.fv-pill__icon--doc {
  left: 2.0542vw;
  top: 0.8053vw;
  width: 1.5373vw;
  height: 1.4641vw;
}

.fv-pill--doc .fv-pill__label {
  left: 4.2723vw;
  top: 0.8053vw;
  width: 9.3704vw;
}

.fv-pill__label--grad {
  background: linear-gradient(278deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fv-pill--contact {
  top: 44.3631vw;
  background: linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
}

.fv-pill__icon--mail {
  left: 2.3616vw;
  top: 1.1581vw;
  width: 1.2767vw;
  height: 1.0212vw;
}

.fv-pill--contact .fv-pill__label {
  left: 4.2284vw;
  top: 0.9517vw;
  width: 9.7365vw;
}

/* ホバーはフッターCTA（.contact-btn）と同じ。塗りは clip-path で左から広げる（scaleX だと枠線の太さまで伸び縮みする） */
.fv-pill {
  overflow: hidden;
}

.fv-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .4s var(--ease);
}

.fv-pill__icon,
.fv-pill__label {
  z-index: 1;
}

.fv-pill--doc::before {
  background: linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
}

.fv-pill--doc:hover::before,
.fv-pill--doc:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.fv-pill--contact::before {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%) border-box;
}

.fv-pill--contact:hover::before,
.fv-pill--contact:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.fv-pill__icon--hover,
.fv-pill--doc:hover .fv-pill__icon--base,
.fv-pill--doc:focus-visible .fv-pill__icon--base {
  display: none;
}

.fv-pill--doc:hover .fv-pill__icon--hover,
.fv-pill--doc:focus-visible .fv-pill__icon--hover {
  display: block;
}

.fv-pill--contact:hover .fv-pill__icon--base,
.fv-pill--contact:focus-visible .fv-pill__icon--base {
  display: none;
}

.fv-pill--contact:hover .fv-pill__icon--hover,
.fv-pill--contact:focus-visible .fv-pill__icon--hover {
  display: block;
}

.fv-pill--doc:hover .fv-pill__label--grad,
.fv-pill--doc:focus-visible .fv-pill__label--grad {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.fv-pill--contact:hover .fv-pill__label,
.fv-pill--contact:focus-visible .fv-pill__label {
  background: linear-gradient(278deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .fv-pill::before {
    transition-duration: .1s;
  }
}

/* 縦組みキャッチ（アウトライン化済みのためSVG） */
.fv__catch {
  position: absolute;
  left: 75.1808vw;
  top: 14.7914vw;
  width: 15.8411vw;
  height: 33.508vw;
}

/* SCROLL: 縦線に沿って明るいヘッド＋グラデーションの尾を上から下へ流す。線自体は淡いトラックで、::after が流れる本体 */
.fv__scroll-line {
  position: absolute;
  left: 93.8038vw;
  top: 41.2906vw;
  width: 1px;
  height: 13.7123vw;
  overflow: hidden;
  background: rgba(4, 26, 68, 0.18);
}

.fv__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(to bottom, rgba(4, 26, 68, 0), var(--c-navy) 85%);
  animation: fv-scroll-star 2.4s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* reduced-motion の指定は、無条件の .fv__scroll-line::after より必ず後ろに置く（詳細度が同じため、前に書くと上書きされて効かない） */
  .fv__scroll-line::after {
    animation: none;
    transform: none;
    opacity: 1;
    height: 100%;
    background: var(--c-navy);
  }
}

.fv__scroll-text {
  position: absolute;
  left: 94.5681vw;
  top: 41.2884vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 1.8741vw;
  letter-spacing: 0.0586vw;
  color: var(--c-navy);
}

/* ヘッダーのロゴとハンバーガーの位置（1366px幅基準） */
.fv-logo {
  position: absolute;
  left: 4.388vw;
  top: 3.0747vw;
  width: 15.2269vw;
  height: 4.3924vw;
}

.fv-logo__mark,
.fv-logo__name,
.fv-logo__tag {
  position: absolute;
}

.fv-logo__mark {
  left: 0;
  top: 0;
  width: 4.3924vw;
  height: 4.3924vw;
}

.fv-logo__name {
  left: 5.194vw;
  top: 0.7687vw;
  width: 12.1523vw;
  height: 1.757vw;
}

.fv-logo__tag {
  left: 7.2438vw;
  top: 3.1479vw;
  width: 7.9795vw;
  height: 0.4392vw;
}

.header .hamburger {
  position: absolute;
  left: 91.2592vw;
  top: 3.0476vw;
}

.header .hamburger__lines {
  width: 2.0447vw;
  height: 0.7716vw;
}

.header .hamburger__lines span {
  height: 1.7px;
}

@media (max-width: 767px) {
  /* SPヘッダー（375px幅基準）。.gnav__logo / .gnav__close はドロワー専用の別要素なのでここでは扱わない */
  .fv-logo {
    left: 4.0157vw;
    top: 4.3149vw;
    width: 46.0157vw;
    height: 10.9333vw;
  }

  .fv-logo__mark {
    left: 0;
    top: 0;
    width: 10.9333vw;
    height: 10.9333vw;
  }

  .fv-logo__name {
    left: 13.2156vw;
    top: 2.0889vw;
    width: 32.803vw;
    height: 4.5333vw;
  }

  .fv-logo__tag {
    left: 18.818vw;
    top: 8.489vw;
    width: 21.601vw;
    height: 1.0667vw;
  }

  .header .hamburger {
    left: 85.3491vw;
    top: 4.4483vw;
    width: 10.6667vw;
    height: 10.6667vw;
  }

  .header .hamburger__lines {
    width: 4.6125vw;
    height: 1.6296vw;
  }
}

/* ABOUT。テキストの top は「デザインの1行目ベースライン − ブラウザのベースライン位置」で算出している
   （デザインはキャップ上端基準、CSSはハーフレディング込みの行ボックス） */
/* .about は写真を持たないテキスト専用の層。背景は sticky で残る .circle-expand__media が見せる */
.about {
  position: absolute;
  top: calc(100vh + 220vh);
  left: 0;
  width: 100%;
  height: 67.1303vw;
  overflow: hidden;
}

/* reduced-motion 専用の静止写真。既定は非表示で、下の reduced-motion のメディアクエリ内で表示する */
.about-static {
  display: none;
}

.about-static__photo {
  position: absolute;
  top: -0.205vw;
  left: -0.0205vw;
  z-index: 0;
  width: 100.9151vw;
  height: 67.3499vw;
  object-fit: cover;
  object-position: center 38%;
}

.about-static__veil {
  position: absolute;
  top: -0.0652vw;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 67.2035vw;
  background: rgba(67, 90, 134, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  /* reduced-motion: ABOUT を通常フローに戻し、静止写真（.about-static）を表示する。
     メディアクエリは詳細度を上げないため、.about 本体の定義より後ろに置く */
  .about {
    position: relative;
    top: auto;
  }

  .about-static {
    display: block;
    position: absolute;
    inset: 0;
  }
}

.about__label {
  position: absolute;
  top: 6.5886vw;
  left: 4.2928vw;
  z-index: 2;
  color: var(--c-cyan);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(17.99px, 1.757vw, 33.73px);
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
}

.about__title {
  /* 見出しは手書き風ロゴタイプのSVG（元の縦横比のまま） */
  position: absolute;
  top: 11.5886vw;
  left: 4.2928vw;
  z-index: 2;
  display: block;
  width: 32.1375vw;
  height: 20.205vw;
}

.about__text {
  position: absolute;
  left: 44.0703vw;
  z-index: 2;
  width: 50.8053vw;
  color: var(--c-white);
  font-family: "Noto Sans JP", var(--f-base);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  line-height: 3.5139vw;
  letter-spacing: 0;
}

/* 段落の間は約2vw。行数（4・3・3・2行）× line-height から各段落の top を決めている */
.about__text--1 {
  top: 6.0761vw;
}

.about__text--2 {
  top: 22.1817vw;
}

.about__text--3 {
  top: 34.7234vw;
}

.about__text--4 {
  top: 47.3151vw;
}

.about__more {
  position: absolute;
  /* 最後の段落の下端から約4.7vw */
  top: 59.0543vw;
  left: 44.0703vw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 21px;
  width: 16.1786vw;
  height: 4.3924vw;
}

.about__more-label {
  flex: none;
  width: 10.2489vw;
  color: var(--c-white);
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  line-height: 3.5139vw;
  letter-spacing: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 1px;
}

.about__more-circle {
  position: relative;
  flex: none;
  width: 4.3924vw;
  height: 4.3924vw;
  border-radius: 50%;
  background: var(--c-navy);
  overflow: hidden;
  color: #fff;
}

.about__more-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}

.about__more-arrow {
  position: absolute;
  top: 1.6574vw;
  left: 1.3909vw;
  width: 1.7152vw;
  height: 1.0783vw;
  z-index: 1;
}

/* ホバー: 丸の塗りは中心から scale で広がり、矢印は右へ抜けてから左側から色反転して戻る */
.about__more:hover .about__more-circle::before,
.about__more:focus-visible .about__more-circle::before {
  transform: scale(1);
}

.about__more:hover .about__more-arrow,
.about__more:focus-visible .about__more-arrow {
  animation: link-arrow-swap 600ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .about__more-circle::before {
    transition-duration: 0.1s;
  }

  .about__more:hover .about__more-arrow,
  .about__more:focus-visible .about__more-arrow {
    animation: none;
    color: var(--c-navy);
  }
}

@media (max-width: 767px) {
  /* SP（FV＋ABOUT）もPCと同様に写真のマスク自体を拡大する。開始位置・大きさはデザインのSP版の円（375px基準）に合わせる */
  .circle-expand {
    height: auto;
  }

  .circle-expand__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background-color: #f8f8f8;
  }

  .circle-expand__media {
    --sp-circle-left: -19.2vw;
    --sp-circle-top: 62.76vw;
    --sp-circle-size: 138.27vw;
    position: absolute;
    left: calc(var(--sp-circle-left) * (1 - var(--p, 0)));
    top: calc(var(--sp-circle-top) * (1 - var(--p, 0)));
    width: calc(var(--sp-circle-size) + (100vw - var(--sp-circle-size)) * var(--p, 0));
    overflow: hidden;
    height: calc((100vh - var(--sp-circle-top)) + var(--sp-circle-top) * var(--p, 0));
    border-radius: calc(var(--sp-circle-size) / 2 * (1 - var(--p, 0)))
      calc(var(--sp-circle-size) / 2 * (1 - var(--p, 0)))
      0 0;
    --sp-img-ratio: 1.4984;
    --sp-img-w0: max(
      calc(var(--sp-circle-size) * 1.528),
      calc((100vh - var(--sp-circle-top) + var(--sp-circle-size) * 0.0212) * var(--sp-img-ratio))
    );
    --sp-img-w1: max(100vw, calc(100vh * var(--sp-img-ratio)));
  }

  /* ABOUTの先頭が画面へ入る直前から暗幕を重ね始める。
       PCと同じ写真を背景として使いながら、本文が重なる時点で十分な可読性を確保する。 */
  .circle-expand__veil {
    opacity: clamp(0, calc((var(--p, 0) - 0.24) / 0.18), 1);
  }

  /* SPでは縦メニュー・CTAピル2本・背景パターン・横罫を出さない（SPデザインに対応がないため）。
     キャッチ・見出しテキスト・SCROLLだけを残す */
  .fv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 177.867vw;
  }

  .fv__bg,
  .fv__rule,
  .fv__nav,
  .fv-pill--doc,
  .fv-pill--contact {
    display: none;
  }

  .fv__catch {
    left: 28.9333vw;
    top: 29.7781vw;
    width: 42.4vw;
    height: auto;
  }

  .fv__lead {
    display: block;
    height: auto;
    left: 4vw;
    top: 138.9333vw;
    width: 78vw;
  }

  .fv__lead-text {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    font-size: 5.3333vw;
    line-height: 10.6667vw;
    letter-spacing: 0.2667vw;
    color: #fff;
  }

  .fv__scroll-line {
    left: 89.3333vw;
    top: 141.8667vw;
    height: 36.2667vw;
    background: rgba(255, 255, 255, 0.35);
  }

  .fv__scroll-text {
    left: 90.8vw;
    top: 141.8667vw;
    color: #fff;
    font-size: 4.2667vw;
    line-height: 6.8267vw;
    letter-spacing: 0.2133vw;
  }

  /* ABOUT（SP）: 絶対配置をやめて通常フローの縦積みにする。間隔は40px前後で統一（デザインで25pxの箇所も40pxに寄せた近似） */
  .about {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10.6667vw;
    padding: 21.3333vw 4.5885vw;
    /* 背景は持たせず sticky の .circle-expand__media を透かす。終盤に .circle-expand__veil が写真を暗くし、PCと同じように FV から ABOUT へつなぐ */
    background: transparent;
  }

  .about-static {
    display: none;
  }

  .about__label,
  .about__title,
  .about__text,
  .about__more {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }

  .about__label {
    font-size: 4.2667vw;
    line-height: 1.6;
    letter-spacing: 0.2133vw;
  }

  .about__title {
    width: 100%;
    height: auto;
    margin: 0 0 4vw;
  }

  .about__text {
    font-size: 4.2667vw;
    line-height: 2;
  }

  /* SP専用の改行（<br class="u-br-sp">）をここで有効にする（PCでは base.css で非表示） */
  .u-br-sp {
    display: inline;
  }

  .about__more {
    display: flex;
    align-items: center;
    gap: 5.6vw;
    width: auto;
    height: auto;
    margin-top: 2.6667vw;
  }

  .about__more-label {
    width: auto;
    font-size: 4.2667vw;
    line-height: 2;
  }

  /* 矢印の丸は「事業内容を見る」（.service__cta-circle）と同じ大きさ */
  .about__more-circle {
    position: relative;
    width: 12vw;
    height: 12vw;
    display: grid;
    place-items: center;
  }

  .about__more-arrow {
    position: static;
    width: 5.2vw;
    height: auto;
  }
}

/* SERVICE（1366px幅基準）。下部の流れる帯もこのセクションに含む */
.service {
  position: relative;
  width: 100%;
  min-height: 69.2532vw;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

/* 背景テクスチャ（ページ通しのタイル） */
.service__bg {
  z-index: 0;
}

.service__en {
  position: absolute;
  top: 8.849vw;
  left: 4.3798vw;
  z-index: 3;
  /* 見出しの色は他セクションと同じシアン */
  color: var(--c-cyan);
  font-size: clamp(17.99px, 1.757vw, 33.73px);
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
}

.service__title {
  /* 見出しは手書き風ロゴタイプのSVG。行ボックス内で縦中央に置く */
  position: absolute;
  top: 12.3719vw;
  left: 4.3798vw;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 7.0278vw;
}

.service__title img {
  display: block;
  width: 18.0088vw;
  height: 4.0264vw;
}

/* キャッチは手書き風ロゴタイプのSVG（元の縦横比のまま幅でスケール） */
.service__catch {
  position: absolute;
  top: 23.272vw;
  left: 4.3798vw;
  z-index: 3;
  display: block;
  width: 28vw;
  height: auto;
  margin: 0;
}

.service__lead {
  position: absolute;
  top: 35.571vw;
  left: 4.3798vw;
  z-index: 3;
  width: 33.5vw;
  margin: 0;
  color: var(--c-navy);
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  font-weight: 400;
  line-height: 2.3426vw;
  letter-spacing: 0.0586vw;
}

/* CTAは .works__more と同じパターン（紺ベタの丸＋下線ラベル） */
.service__cta {
  position: absolute;
  top: 46.478vw;
  left: 4.3798vw;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 21px;
  height: 4.3924vw;
  color: var(--c-navy);
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
}

.service__cta-label {
  line-height: 3.5139vw;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.service__cta-circle {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 4.3924vw;
  height: 4.3924vw;
  border-radius: 50%;
  background: var(--c-navy);
  overflow: hidden;
  color: #fff;
}

.service__cta-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}

.service__cta-glyph {
  position: relative;
  z-index: 1;
}

.service__cta:hover .service__cta-circle::before,
.service__cta:focus-visible .service__cta-circle::before {
  transform: scale(1);
}

.service__cta:hover .service__cta-glyph,
.service__cta:focus-visible .service__cta-glyph {
  animation: link-arrow-swap 600ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .service__cta-circle::before {
    transition-duration: 0.1s;
  }

  .service__cta:hover .service__cta-glyph,
  .service__cta:focus-visible .service__cta-glyph {
    animation: none;
    color: var(--c-navy);
  }
}

/* 右側の自動スライド写真。同じ画像を2回並べて無限ループさせる（トラックの複製は main.js の initMarquee() が行うので、HTMLには1セットだけ書く） */
.service__slider {
  position: absolute;
  top: 8.7774vw;
  left: 45.2415vw;
  z-index: 2;
  width: 54.8316vw;
  height: 46.1224vw;
}

.service__slider-track {
  height: 100%;
  gap: 3.7335vw;
  animation-duration: 50s;
}

/* 写真スライダーは hover で止めない（上の .marquee:not(.service__slider) の除外と同じ意図） */
.service__slider:hover .service__slider-track {
  animation-play-state: running;
}

.service__slider-img {
  width: 40.6295vw;
  height: 100%;
  object-fit: cover;
}

/* 手書き風の英字ロゴ。写真スライダーの手前にサインのように重ねる */
.service__signature {
  position: absolute;
  top: 44.5095vw;
  left: 27.7418vw;
  z-index: 3;
  width: 67.9356vw;
  height: auto;
  pointer-events: none;
  /* 背景の WebGL アニメーションと重なるとコントラストが落ちるため、色はそのままで白いグローを足す */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.6));
}

/* SP専用の手書き英字。PCでは非表示 */
.service__signature--sp {
  display: none;
}

/* 下部の流れる文字帯 */
.service__marquee {
  position: absolute;
  top: 59.7364vw;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 9.5168vw;
  overflow: hidden;
}

.service__marquee .marquee__track {
  margin-top: -2.4275vw;
  margin-left: -69.8463vw;
}

.service__marquee-text {
  /* 帯の文字は明るい背景に溶け込む極薄の紺にする */
  padding-inline: 0.7321vw;
  font-family: var(--f-en);
  font-size: clamp(119.94px, 11.713vw, 224.89px);
  font-weight: 700;
  line-height: 14.0556vw;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .14);
}

/* REASON（1366px幅基準）。カード4枚は千鳥配置で、カード自体に背景・枠・影はない */
.reason {
  position: relative;
  width: 100%;
  height: 67.2767vw;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* 背景テクスチャはページ通しのタイルなので、このセクションの開始位置に合わせて上へずらしている */
.reason__bg {
  z-index: 0;
  background-position: -3.7335vw -25.6515vw;
}

/* 前セクション（帯）から下端だけ覗く葉形マスク写真 */
.reason__photo-prev {
  position: absolute;
  top: -20.3009vw;
  left: 15.817vw;
  z-index: 2;
  width: 20.3009vw;
  height: 20.3009vw;
}

.reason__en,
.reason__title {
  position: absolute;
  left: 4.3192vw;
  z-index: 3;
}

/* 絶対配置なので、行ボックスの中央寄せ分を top から引いてデザインの文字上端に合わせている */
.reason__en {
  top: 8.8748vw;
  color: var(--c-cyan);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(17.99px, 1.757vw, 33.73px);
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
}

/* 見出しは手書き風ロゴタイプのSVG。行ボックス内で縦中央に置く */
.reason__title {
  top: 12.3719vw;
  display: flex;
  align-items: center;
  height: 7.0278vw;
}

.reason__title img {
  display: block;
  width: 26.8668vw;
  height: 4.1728vw;
}

.reason-card--01 {
  --x: 4.3192vw;
  --pill-x: 5.6662vw;
  --photo-y: 26.4473vw;
  --pill-y: 25.41vw;
  --title-y: 42.142vw;
  --text-y: 49.0264vw;
}

.reason-card--02 {
  --x: 27.9824vw;
  --pill-x: 29.3338vw;
  --photo-y: 31.702vw;
  --pill-y: 30.6662vw;
  --title-y: 47.3982vw;
  --text-y: 54.2826vw;
}

.reason-card--03 {
  --x: 51.6457vw;
  --pill-x: 52.9941vw;
  --photo-y: 26.4678vw;
  --pill-y: 25.4319vw;
  --title-y: 42.1567vw;
  --text-y: 49.041vw;
}

.reason-card--04 {
  --x: 75.2738vw;
  --pill-x: 76.6252vw;
  --photo-y: 31.702vw;
  --pill-y: 30.6662vw;
  --title-y: 47.3836vw;
  --text-y: 51.3543vw;
}

/* 写真の角丸（葉形）は透過PNGに焼き込み済み */
.reason-card__photo {
  position: absolute;
  top: var(--photo-y);
  left: var(--x);
  z-index: 2;
  width: 20.0761vw;
  height: 13.4905vw;
}

/* 番号ピルは写真上端より14.2pxはみ出す */
.reason-card__num {
  position: absolute;
  top: var(--pill-y);
  left: var(--pill-x);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6676vw;
  height: 2.0498vw;
  border-radius: 40px;
  background: var(--c-cyan);
}

.reason-card__num-text {
  color: var(--c-white);
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 1.8741vw;
  letter-spacing: 0.0586vw;
}

.reason-card__title,
.reason-card__text {
  position: absolute;
  left: var(--x);
  z-index: 3;
  width: 20.0761vw;
  color: var(--c-ink);
}

.reason-card__title {
  top: var(--title-y);
  font-size: clamp(17.99px, 1.757vw, 33.73px);
  font-weight: 700;
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
}

.reason-card__text {
  top: var(--text-y);
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  font-weight: 400;
  line-height: 2.3426vw;
  letter-spacing: 0.0586vw;
}

/* WORKS。テキストの top はデザインのグリフ上端から CSS の行ボックス上端へ逆算した値（Noto Sans JP: ascent 1.16em / 和文の字面 0.88em） */
/* .section-gap: セクション間の余白（8.7847vw）にも縦罫を通すブリッジ要素（各セクションの縦罫は自分の高さ分しかないため）。TOPのみ */
.section-gap {
  position: relative;
  height: 8.7847vw;
}

.works {
  position: relative;
  width: 100%;
  height: 50.5124vw;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  margin-top: 0;
}

/* 背景テクスチャをこのセクションの開始位置に合わせて上へずらしている */
.works__bg {
  z-index: 0;
  background-position: -3.7335vw -16.4275vw;
}

/* position:relative がないと z-index が効かず、横罫（.works__rule）が文字の手前に描かれる */
.works__label {
  position: relative;
  z-index: 2;
}

/* 見出しは手書き風ロゴタイプのSVG（縦書き） */
.works__label-ja {
  position: absolute;
  top: 2.1962vw;
  left: 6.7606vw;
  width: 4.3924vw;
  height: 17.5695vw;
  display: flex;
  justify-content: center;
}

.works__label-ja img {
  display: block;
  width: 4.1728vw;
  height: 17.2036vw;
}

/* 英字は90°回転して下から上へ読む */
.works__label-en {
  position: absolute;
  top: 7.3939vw;
  left: 4.0996vw;
  color: var(--c-cyan);
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 3.0454vw;
  letter-spacing: 0.0586vw;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(-90deg);
}

.works__list {
  z-index: 2;
}

/* カードは「ピル（タグ）の左上」を原点にして子を絶対配置する */
.work-card {
  position: absolute;
  width: 25.1098vw;
  height: 0;
}

.work-card--1 {
  top: 2.0498vw;
  left: 19.3265vw;
}

/* 2枚目は100px下げた千鳥配置 */
.work-card--2 {
  top: 9.3704vw;
  left: 48.0966vw;
}

/* 3枚目は右端で画面外に少し切れる */
.work-card--3 {
  top: 2.0498vw;
  left: 76.8668vw;
}

/* タグは写真上端より14px上にはみ出して重なる */
.work-card__tag {
  position: absolute;
  top: 0;
  left: 0.8053vw;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.0498vw;
  border-radius: 40px;
  background: var(--c-cyan);
  color: var(--c-white);
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
  font-weight: 700;
  line-height: 1.6398vw;
  letter-spacing: 0.0512vw;
  white-space: nowrap;
}

/* hover で画像を拡大するため、はみ出しを隠すラッパー（.work-card__media）を置く */
.work-card__media {
  position: absolute;
  top: 1.0249vw;
  left: 0;
  z-index: 1;
  width: 25.1098vw;
  height: 13.1772vw;
  overflow: hidden;
  display: block;
  border-radius: 0 7.3206vw 0 7.3206vw;
}

.work-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.work-card:hover .work-card__photo,
.work-card:focus-within .work-card__photo {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .work-card__photo {
    transition: none;
  }
}

/* top はデザインのグリフ上端から行ボックス上端に換算した値 */
.work-card__title {
  position: absolute;
  top: 15.754vw;
  left: 0;
  width: 25.1098vw;
  color: var(--c-navy);
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
  font-weight: 700;
  line-height: 2.3426vw;
  letter-spacing: 0.0732vw;
}

/* top はデザインのグリフ上端から行ボックス上端に換算した値 */
.work-card__text {
  position: absolute;
  top: 21.9444vw;
  left: 0;
  width: 25.1098vw;
  color: var(--c-navy);
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  font-weight: 400;
  line-height: 2.3426vw;
  letter-spacing: 0.0586vw;
}

.works__nav {
  z-index: 2;
}

.works__nav-btn {
  position: absolute;
  top: 44.0703vw;
  z-index: 2;
  width: 2.7086vw;
  height: 2.7086vw;
  border: 1px solid var(--c-navy);
  border-radius: 50%;
  background: none;
}

.works__nav-btn--prev {
  left: 19.3265vw;
}

.works__nav-btn--next {
  left: 23.4993vw;
}

.works__nav-glyph {
  position: absolute;
  top: 0.8155vw;
  left: 0.7584vw;
  transition: transform 0.4s var(--ease);
}

.works__nav-btn--prev .works__nav-glyph {
  left: 0.6852vw;
  transform: scaleX(-1);
}

.works__nav-btn:hover .works__nav-glyph {
  transform: translateX(3px);
}

.works__nav-btn--prev:hover .works__nav-glyph {
  transform: scaleX(-1) translateX(3px);
}

.works__more {
  position: absolute;
  top: 43.4846vw;
  left: 82.3572vw;
  z-index: 2;
  height: 4.3924vw;
  color: var(--c-navy);
  /* base の .link-arrow は字間0.06emなので0に戻す */
  letter-spacing: 0;
}

.works__more-label {
  line-height: 3.5139vw;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.works__more-circle {
  position: relative;
  flex: none;
  width: 4.3924vw;
  height: 4.3924vw;
  border-radius: 50%;
  background: var(--c-navy);
  overflow: hidden;
  color: #fff;
}

.works__more-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.45s var(--ease);
}

.works__more-glyph {
  position: absolute;
  top: 1.6574vw;
  left: 1.3909vw;
  z-index: 1;
}

.works__more:hover .works__more-circle::before,
.works__more:focus-visible .works__more-circle::before {
  transform: scale(1);
}

.works__more:hover .works__more-glyph,
.works__more:focus-visible .works__more-glyph {
  animation: link-arrow-swap 600ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .works__nav-glyph,
  .works__more-circle::before {
    transition-duration: 0.1s;
  }

  .works__more:hover .works__more-glyph,
  .works__more:focus-visible .works__more-glyph {
    animation: none;
    color: var(--c-navy);
  }
}

/* NEWS（1366px幅基準）。左カラムに見出しと「一覧を見る」、右カラムに記事3行 */
.news {
  position: relative;
  width: 100%;
  height: 27.8184vw;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  margin-top: 0;
}

/* 背景テクスチャをこのセクションの開始位置に合わせて上へずらしている */
.news__bg {
  background-position: -3.7335vw -28.6896vw;
}

/* デザインはキャップ高でトリムした箱なので、CSSの行ボックス基準に合わせてハーフレディング＋アセンダ分（27.7px）を引いて置く */
.news__en {
  position: absolute;
  top: 3.9751vw;
  left: 4.3192vw;
  z-index: 2;
  color: var(--c-cyan);
  font-size: clamp(17.99px, 1.757vw, 33.73px);
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
}

/* 見出しは手書き風ロゴタイプのSVG。行ボックス内で縦中央に置く */
.news__heading {
  position: absolute;
  top: 7.4671vw;
  left: 4.3192vw;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 7.0278vw;
}

.news__heading img {
  display: block;
  width: 17.3499vw;
  height: 4.0264vw;
}

/* .link-arrow の指定をそのまま使い、字間だけ0に戻す */
.news__more {
  position: absolute;
  top: 20.4978vw;
  left: 4.3192vw;
  z-index: 2;
  width: 13.2504vw;
  color: var(--c-navy);
  letter-spacing: 0;
}

.news__more-label {
  position: relative;
  top: -0.0366vw;
  line-height: 3.5139vw;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news__more-circle {
  border-color: transparent;
  background: var(--c-navy);
  color: #fff;
}

/* .link-arrow__circle::before は紺塗りだが、この丸は元から紺ベタなので白で上書きし、反転が見えるようにする */
.news__more .news__more-circle::before {
  background: #fff;
}

/* SVGの実描画が丸の中央より0.7px右なので、その分寄せる */
.news__more-arrow {
  position: relative;
  z-index: 1;
  width: 1.7152vw;
  height: 1.0783vw;
  transform: translateX(0.7px);
}

.news__more:hover .news__more-arrow,
.news__more:focus-visible .news__more-arrow {
  animation: link-arrow-swap 600ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .news__more:hover .news__more-arrow,
  .news__more:focus-visible .news__more-arrow {
    animation: none;
    color: var(--c-navy);
  }
}

.news__list {
  z-index: 2;
}

.news-item {
  position: absolute;
  top: var(--y);
  left: 0;
  width: 100%;
  height: 3.6603vw;
}

.news-item:nth-child(1) {
  --y: 4.7584vw;
}

.news-item:nth-child(2) {
  --y: 12.0791vw;
}

.news-item:nth-child(3) {
  --y: 19.3997vw;
}

.news-item__link {
  position: absolute;
  inset: 0;
  color: var(--c-ink);
  transition: color 0.25s var(--ease);
}

/* hover: テキストをシアンへ。日付・タイトル・矢印は currentColor の継承で一緒に変わる（バッジは color:#fff を明示しているので白のまま） */
.news-item__link:hover,
.news-item__link:focus-visible {
  color: var(--c-cyan);
}

.news-item__date {
  position: absolute;
  top: -0.0146vw;
  left: 32.284vw;
  color: inherit;
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
  line-height: 1.6398vw;
  letter-spacing: 0.0512vw;
}

/* ラベル文字数が変わっても崩れないよう、幅は固定せず padding で作る */
.news-item__badge {
  position: absolute;
  top: 0;
  left: 39.019vw;
  display: inline-flex;
  align-items: flex-start;
  height: 1.6105vw;
  padding: 0 0.7321vw;
  border-radius: 50px;
  background: var(--c-cyan);
  color: var(--c-white);
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
  font-weight: 700;
  line-height: 2.0498vw;
  letter-spacing: 0.0512vw;
  white-space: nowrap;
}

.news-item__badge-label {
  margin-top: -0.2928vw;
  margin-right: -0.0512vw;
}

/* 記事タイトルだけ YakuHanJP を外して素の Noto Sans JP で組む（デザインは約物が全角。--f-base のままだと「」・が半角になり行が短くなる） */
.news-item__title {
  position: absolute;
  top: -0.4392vw;
  left: 48.243vw;
  color: inherit;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 2.3426vw;
  letter-spacing: 0.0586vw;
  white-space: nowrap;
}

/* hover でテキストと一緒に色を変えるため、<img> ではなく span + mask にして currentColor で塗る */
.news-item__arrow {
  position: absolute;
  top: 0.5139vw;
  left: 93.918vw;
  width: 1.0066vw;
  height: 0.5388vw;
  background: currentColor;
  -webkit-mask: url("../../assets/s07-news-106_162.svg") no-repeat center / 100% 100%;
  mask: url("../../assets/s07-news-106_162.svg") no-repeat center / 100% 100%;
  transition: transform 0.3s var(--ease);
}

/* hover: 矢印を軽く右へ（下層のお知らせ一覧と同じ 6px / 0.3s） */
.news-item__link:hover .news-item__arrow,
.news-item__link:focus-visible .news-item__arrow {
  transform: translateX(6px);
}

/* 行の下罫は淡色ではなく #212121 の1px */
.news-item__rule {
  position: absolute;
  top: 3.5871vw;
  left: 31.8397vw;
  width: 63.7679vw;
  height: 1px;
  background: var(--c-ink);
}

@media (prefers-reduced-motion: reduce) {
  .news-item__arrow {
    transition-duration: 0.1s;
  }

  .news-item__link:hover .news-item__arrow,
  .news-item__link:focus-visible .news-item__arrow {
    transform: none;
  }
}

.contact__bg {
  background-position: -3.7335vw -18.257vw;
}

/* 流れる帯は白カードと同じ形のマスクの中で横スクロールする */
.contact__marquee {
  position: absolute;
  width: 91.3616vw;
}

.contact__marquee-text {
  font-family: var(--f-en);
  font-size: clamp(119.94px, 11.713vw, 224.89px);
  font-weight: 700;
}

.contact__en {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(17.99px, 1.757vw, 33.73px);
}

/* 見出しは実テキストで、色はSVG時代と同じグラデーションをCSSで再現する（.contact-btn__label--grad と同じ値）。
   数値は下層の .contact__title とそろえて全ページで同じ見た目にする。改行はSPのみ（<br class="u-br-sp">） */
.contact__title--text {
  margin: 0;
  width: 100%;
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(41.98px, 4.0996vw, 78.71px);
  line-height: 9.8389vw;
  letter-spacing: 0.41vw;
  white-space: nowrap;
  text-align: center;
  background: linear-gradient(275deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.contact-btn__label {
  font-family: var(--f-base);
  font-weight: 700;
  font-size: clamp(14.99px, 1.4641vw, 28.11px);
}

.footer__copy {
  font-family: var(--f-en);
  font-weight: 700;
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
}

.contact-btn {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .contact-btn {
    transition-duration: 0.1s;
  }
}

@media (max-width: 767px) {
  /* SP: SERVICE 以降。SPデザインのない範囲は「見出し→本文→カード」の縦積みに組み直す（375px基準） */
  .service,
  .reason,
  .works,
  .news {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .service {
    overflow: hidden;
    padding: 21.3333vw 4.8vw 0;
    isolation: isolate;
    /* SPも背景は透過にしてページ通しの WebGL キャンバスを見せる（セクションごとに背景を敷くと境目で色が切り替わって見える） */
    background: transparent;
  }

  .service__bg,
  .reason__bg,
  .reason__photo-prev,
  .works__bg,
  .news__bg {
    display: none;
  }

  .reason > :not(.reason__bg):not(.reason__photo-prev),
  .works > :not(.works__bg),
  .news > :not(.news__bg) {
    position: relative;
    z-index: 1;
  }

  .service__en,
  .service__title,
  .service__catch,
  .service__lead,
  .service__cta,
  .service__slider,
  .service__signature {
    position: static;
  }

  .service__en,
  .reason__en,
  .news__en {
    margin: 0 0 2.6667vw;
    font-size: 4.2667vw;
    line-height: 1.4;
    letter-spacing: .05em;
  }

  .contact__en {
    font-size: 4.2667vw;
  }

  .service__title,
  .reason__title,
  .news__heading {
    display: block;
    height: auto;
    margin: 0 0 10.6667vw;
  }

  .service__title img {
    width: 48vw;
    height: auto;
  }

  .service__catch {
    width: 88vw;
    height: auto;
    margin: 0 0 6.4vw;
  }

  .service__lead {
    width: auto;
    margin: 0 0 9.6vw;
    font-size: 4vw;
    line-height: 2;
    letter-spacing: .04em;
  }

  .service__cta {
    display: inline-flex;
    gap: 4.8vw;
    height: auto;
    margin: 0 0 13.3333vw;
    font-size: 4.2667vw;
  }

  .service__cta-label {
    line-height: 12vw;
  }

  .service__cta-circle {
    width: 12vw;
    height: 12vw;
  }

  .service__cta-glyph {
    width: 5.2vw;
    height: auto;
  }

  .service__slider {
    width: calc(100% + 9.6vw);
    height: 58.6667vw;
    margin: 0 -4.8vw;
  }

  .service__slider-track {
    gap: 4.8vw;
  }

  .service__slider-img {
    width: 76vw;
    height: 58.6667vw;
  }

  /* SPはPC用ではなく専用の sp_message.svg を使う */
  .service__signature--pc {
    display: none;
  }

  /* SP用SVGの比率に合わせ、画面内に収まる幅にする */
  .service__signature--sp {
    display: block;
    position: relative;
    /* PC用の left:27.7418vw が relative 下ではオフセットとして効き、右にずれて画面外にはみ出すため打ち消す */
    left: 0;
    top: 0;
    z-index: 2;
    width: 85vw;
    max-width: 319px;
    height: auto;
    /* 写真（.service__slider）の下側に一部重なるよう、負の margin-top で引き上げる */
    margin: -11.5556vw auto 4vw;
  }

  .service__marquee {
    position: relative;
    z-index: 1;
    top: auto;
    height: 22vw;
    margin: -4vw -4.8vw 0;
  }

  .service__marquee .marquee__track {
    margin: -4.4vw 0 0 -54vw;
  }

  .service__marquee-text {
    font-size: 26vw;
    line-height: 1;
  }

  .reason {
    overflow: hidden;
    padding: 21.3333vw 4.8vw;
    isolation: isolate;
    background: transparent;
  }

  .reason__head {
    position: static;
    margin-bottom: 10.6667vw;
  }

  .reason__en,
  .reason__title {
    position: static;
    left: auto;
  }

  .reason__title img {
    width: 64vw;
    height: auto;
  }

  .reason__list {
    display: grid;
    gap: 13.3333vw;
    margin: 0;
    padding: 0;
  }

  .reason-card,
  .reason-card--01,
  .reason-card--02,
  .reason-card--03,
  .reason-card--04 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    padding-top: 0;
  }

  .reason-card__photo {
    position: static;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 549 / 369;
    object-fit: cover;
  }

  .reason-card__num {
    position: absolute;
    top: -3.2vw;
    left: 4.8vw;
    /* 写真は flex の order で表示順を上げているため、同じ z-index だと写真がピルの上に描かれる。ピルを写真より上にする */
    z-index: 3;
    width: 13.3333vw;
    height: 7.4667vw;
  }

  .reason-card__num-text {
    font-size: 4.2667vw;
    line-height: 1;
  }

  .reason-card__title,
  .reason-card__text {
    position: static;
    width: auto;
  }

  .reason-card__title {
    order: 2;
    margin: 6.4vw 0 3.2vw;
    font-size: 5.3333vw;
    line-height: 1.55;
    letter-spacing: .04em;
  }

  .reason-card__text {
    order: 3;
    margin: 0;
    font-size: 4vw;
    line-height: 1.9;
    letter-spacing: .03em;
  }

  .works {
    overflow: hidden;
    padding: 21.3333vw 0;
    isolation: isolate;
    background: transparent;
    margin-top: 120px;
  }

  .works__label {
    position: static;
    display: flex;
    flex-direction: column;
    /* 左端は他のセクションと同じ4.8vwにそろえる */
    margin: 0 4.8vw 10.6667vw 4.8vw;
  }

  .works__label-ja,
  .works__label-en {
    position: static;
    transform: none;
  }

  /* 他セクションと同じ「英字ラベル→和文タイトル」の順にするため、DOM順（和→英）を flex の order で入れ替える */
  .works__label-en {
    order: 1;
    margin: 0 0 2.6667vw;
    font-size: 4.2667vw;
    line-height: 1.4;
  }

  .works__label-ja {
    order: 2;
    display: block;
    width: auto;
    height: auto;
  }

  .works__label-ja img {
    display: none;
  }

  .works__label-ja::after {
    content: "実績紹介";
    color: var(--c-navy);
    font-family: var(--f-title);
    font-size: 10.6667vw;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .04em;
  }

  .works__list {
    display: flex;
    gap: 5.3333vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 1.6vw 4.8vw 6.4vw 4.8vw;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4.8vw;
    scrollbar-width: none;
  }

  .works__list::-webkit-scrollbar {
    display: none;
  }

  .work-card,
  .work-card--1,
  .work-card--2,
  .work-card--3 {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 78vw;
    width: 78vw;
    height: auto;
    padding-top: 0;
    scroll-snap-align: start;
  }

  .work-card__tag {
    position: absolute;
    top: -2.9333vw;
    left: 3.2vw;
    width: auto;
    height: 7.4667vw;
    padding: 0 3.2vw;
    font-size: 3.4667vw;
    line-height: 1;
  }

  .work-card__media {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 343 / 180;
    border-radius: 0 22.7405vw 0 22.7405vw;
  }

  .work-card__photo {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .work-card__title,
  .work-card__text {
    position: static;
    width: auto;
  }

  .work-card__title {
    margin: 5.3333vw 0 2.6667vw;
    font-size: 4.8vw;
    line-height: 1.55;
    letter-spacing: .04em;
  }

  .work-card__text {
    margin: 0;
    font-size: 3.7333vw;
    line-height: 1.85;
    letter-spacing: .03em;
  }

  .works__nav {
    display: none;
  }

  .works__more {
    /* .works > :not(...) の詳細度の高いルールで position:relative が勝つため、PC用の top/left が相対オフセットとして残ると画面外へ飛ぶ。auto で打ち消す */
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 4vw 4.8vw 0 4.8vw;
    gap: 4.8vw;
    font-size: 4.2667vw;
  }

  .works__more-label {
    line-height: 12vw;
  }

  .works__more-circle {
    width: 12vw;
    height: 12vw;
  }

  .works__more-glyph {
    top: 4.2vw;
    left: 3.2vw;
    width: 5.2vw;
    height: auto;
  }

  .news {
    /* NEWS→CONTACT間も他のセクション間と同じ間隔（上下21.3333vwずつ）にそろえる */
    overflow: hidden;
    padding: 21.3333vw 4.8vw;
    isolation: isolate;
    background: transparent;
    margin-top: 120px;
  }

  .news__en,
  .news__heading,
  .news__more {
    position: static;
    left: auto;
    top: auto;
  }

  .news__heading img {
    width: 48vw;
    height: auto;
  }

  .news__list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-ink);
  }

  .news-item,
  .news-item:nth-child(1),
  .news-item:nth-child(2),
  .news-item:nth-child(3) {
    position: static;
    width: auto;
    height: auto;
  }

  .news-item__link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 3.2vw;
    row-gap: 2.4vw;
    padding: 5.3333vw 7.4667vw 5.3333vw 0;
    border-bottom: 1px solid var(--c-ink);
  }

  .news-item__date,
  .news-item__badge,
  .news-item__title,
  .news-item__arrow,
  .news-item__rule {
    position: static;
  }

  .news-item__date {
    font-size: 3.4667vw;
    line-height: 1.7;
  }

  .news-item__badge {
    align-self: start;
    width: max-content;
    height: auto;
    padding: .5vw 2.6667vw;
    font-size: 3.2vw;
    line-height: 1.45;
  }

  .news-item__badge-label {
    margin: 0;
  }

  .news-item__title {
    grid-column: 1 / -1;
    font-size: 4vw;
    line-height: 1.8;
    letter-spacing: .03em;
    white-space: normal;
  }

  .news-item__arrow {
    position: absolute;
    top: 50%;
    right: 1.0667vw;
    width: 4.2667vw;
    height: 2.4vw;
    transform: translateY(-50%);
  }

  .news-item__rule {
    display: none;
  }

  .news__more {
    display: inline-flex;
    width: auto;
    margin: 8vw 0 0;
    gap: 4.8vw;
    font-size: 4.2667vw;
  }

  .news__more-label {
    line-height: 12vw;
  }

  .news__more-circle {
    width: 12vw;
    height: 12vw;
  }

  .contact__title {
    width: auto;
  }

  .contact__en {
    margin: 0 0 2.6667vw;
  }

  .contact__title {
    margin-bottom: 10.6667vw;
  }

  /* 下層と同じ扱い。font-size はPC用 clamp の下限がそのまま効くので個別指定しない。改行は <br class="u-br-sp"> が担う */
  .contact__title--text {
    white-space: normal;
    text-align: center;
  }

  .contact-btn__label {
    font-size: 4.2667vw;
  }

  .footer__copy {
    font-size: 3.4667vw;
  }
}

/* TOPではセクション間の余白を .section-gap（実要素）が持つため、.contact の margin-top は0にする（二重に空けない・縦罫を通すため）。
   下層では .contact の margin-top をそのまま使う */
.page-top .contact {
  margin-top: 0;
}

@media (max-width: 767px) {
  .page-top .section-gap {
    display: none;
  }
}

.contact__title {
  line-height: 1.5;
}

.contact-btn__label {
  font-size: clamp(15px, 1.464vw, 28px);
}

.footer__copy {
  font-size: clamp(10px, 1.025vw, 20px);
}

@media (min-width: 768px) {
  /* PC専用の指定。SPに効くと absolute の座標が相対オフセットとして残り、「一覧を見る」がセクション外に押し出されて見えなくなる */
  .works__list,
  .works__more {
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 767px) {
  .contact__marquee {
    width: calc(100% - 40px);
  }

  .contact__title {
    width: calc(100% - 40px);
    font-size: 28px;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }

  .contact-btn__label {
    font-size: 12px;
  }

  .footer-menu__list li {
    height: 42px;
    gap: 16px;
  }

  .footer__copy {
    font-size: 10px;
  }

  /* SPの通常フローを、上の固定座標より優先する */
  .works,
  .news {
    margin-top: 0;
  }

  .contact__title {
    width: auto;
  }

  .contact__title {
    margin-bottom: 10.6667vw;
    line-height: 1.5;
  }

  .footer-menu__list li {
    height: auto;
    gap: 3.2vw;
  }

  .footer__copy {
    font-size: 3.4667vw;
  }
}

/* ドロワーのバッジは .gnav__item も兼ねていて、展開中は .gnav.is-open .gnav__item{opacity:1}（詳細度0,3,0）に負けるため、
   .gnav.is-open を前置して詳細度を上げ、hover の opacity を効かせる */
.gnav__badge-box {
  transition: opacity .4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .gnav__badge-box {
    transition-duration: .1s;
  }

  .marquee__track {
    animation: none;
  }
}

@media (min-width: 768px) {
  /* 実績紹介カルーセル（js/main.js）。.is-carousel は初回クリック時に付く（それまではスクロールフェードインの --delay を効かせるため） */
  .works__list.is-carousel .work-card {
    transition: left 0.7s var(--ease),
      top 0.7s var(--ease),
      opacity 0.3s linear,
      transform 0.7s var(--ease);
    transition-delay: 0s;
  }

  .works__list .work-card.is-slot-off {
    top: 2.0498vw;
    left: 105.6vw;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .works__list.is-carousel .work-card.is-wrapping {
    opacity: 0;
  }

  .works__list.is-carousel .work-card.is-jump {
    transition: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .works__list.is-carousel .work-card {
    transition: none;
  }
}

@media (max-width: 767px) {
  /* SPは画像が大きく1周の移動距離が長いため、PCより短い周期にして体感速度を合わせる */
  .service__slider-track {
    animation-duration: 35s;
  }

  /* SPの「一覧を見る」矢印は実績紹介（.works__more-glyph）と同じ大きさ */
  .news__more-arrow {
    width: 5.2vw;
    height: auto;
    transform: none;
  }

  /* SPの写真マスクは上辺だけ円弧にし、下辺は画面下端まで四角く伸ばす（正円のままだと円の下が空白になる）。
     スクロール拡大（--p: 0→1）の補間は共通 */
  /* SPのFVはデザインのSP版（375px基準）の値で組んでいる。画面が667pxより高い端末では、写真を中心を保ったまま拡大して画面下端まで覆う */
  .circle-expand__stage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 177.8667vw;
    background: url("../../assets/s01-fv-68_1212.webp") 51% 0 / cover no-repeat;
    opacity: 0.1;
    pointer-events: none;
  }

  .circle-expand__media-img {
    inset: auto;
    top: calc(var(--sp-circle-size) * -0.0212 * (1 - var(--p, 0)));
    left: calc(
      (var(--sp-circle-size) * -0.2794 - (var(--sp-img-w0) - var(--sp-circle-size) * 1.528) / 2) * (1 - var(--p, 0))
      + (100vw - var(--sp-img-w1)) / 2 * var(--p, 0)
    );
    width: calc(var(--sp-img-w0) * (1 - var(--p, 0)) + var(--sp-img-w1) * var(--p, 0));
    max-width: none;
    height: auto;
    aspect-ratio: 1380 / 921;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .circle-expand__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(4, 26, 68, 0) calc(var(--sp-circle-size) * 0.47),
      rgba(4, 26, 68, 1) var(--sp-circle-size)
    );
    opacity: calc(1 - var(--p, 0));
    pointer-events: none;
  }

  .fv__scroll-line::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .fv__scroll-line::after {
    background: #fff;
  }
}

@media (max-width: 767px) {
  /* 紺グラデはデザイン上見えるFV下端（667px相当）での濃さ（約0.68）を以降も保ち、縦長の端末で円より下が紺ベタの帯にならないようにする */
  .circle-expand__media::after {
    background: linear-gradient(
      to bottom,
      rgba(4, 26, 68, 0) calc(var(--sp-circle-size) * 0.47),
      rgba(4, 26, 68, 0.68) calc(177.8667vw - var(--sp-circle-top)),
      rgba(4, 26, 68, 0.68) 100%
    );
  }
}

/* カード全体を <a class="work-card__link"> で包む。PCのカードは中身が全部 absolute なので、リンクは display:contents にして配置を変えずにクリック可能にする。
   カテゴリ名は可変長なので、幅は固定せず padding で決める */
.work-card__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.work-card__link:focus-visible .work-card__title {
  text-decoration: underline;
}

.work-card__tag--auto {
  width: auto;
  padding: 0 0.7321vw;
}

.work-card:hover .work-card__title {
  color: var(--c-cyan);
}

@media (max-width: 767px) {
  .work-card__tag--auto {
    padding: 0 3.2vw;
  }
}

@media (min-width: 768px) {
  /* タイトル・説明文を .work-card__body で包んで縦フローにする（固定 top の絶対配置だとタイトルが3行で説明文に重なる）。
     矢印ボタンに届かないよう行数で「…」省略する。ドラッグ／スワイプ送り（js/main.js）のため touch-action と選択抑止も付ける */
  .work-card__body {
    position: absolute;
    top: 15.754vw;
    left: 0;
    width: 25.1098vw;
  }

  .work-card__body .work-card__title,
  .work-card__body .work-card__text {
    position: static;
    width: auto;
  }

  .work-card__body .work-card__text {
    margin-top: 1.5052vw;
  }

  .work-card__body .work-card__title,
  .work-card__body .work-card__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* タイトル2行・説明文4行。文字数はPHP側で切っており、ここは保険 */
  .work-card__body .work-card__title {
    -webkit-line-clamp: 2;
  }

  .work-card__body .work-card__text {
    -webkit-line-clamp: 4;
  }

  .works__list {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  .works__list img {
    -webkit-user-drag: none;
  }
}

/* CF7コアCSSを読み込んでいないため、スピナーは送信中以外は隠す */
.wpcf7-spinner {
  display: none;
}

@keyframes bg-accent-breathe {
  0% { opacity: 0.7; transform: scale(1) translate(0, 0); }

  50% { opacity: 1; transform: scale(1.06) translate(-1%, 1%); }

  100% { opacity: 0.75; transform: scale(1.02) translate(1%, -1%); }
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 「見る」系の丸矢印ボタン共通のホバー: 矢印が円の直径ぶん右へ抜け、色を反転した瞬間に左側へワープして戻る */
@keyframes link-arrow-swap {
  0% { transform: translateX(0); color: #fff; }

  40% { transform: translateX(4.3924vw); color: #fff; }

  41% { transform: translateX(-4.3924vw); color: var(--c-navy); }

  100% { transform: translateX(0); color: var(--c-navy); }
}

@keyframes fv-scroll-star {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(320%);
    opacity: 0;
  }
}