@charset "UTF-8";
/*
 * コンパイルは手動で行う。出力は assets/css/style.css のみ。
 * この scss フォルダ内に style.css を出さないこと（二重ファイルの原因になる）。
 * 誤例: scss 内で `sass style.scss` だけ実行
 * 正例（プロジェクトルート）:
 *   sass assets/css/scss/style.scss assets/css/style.css --source-map
 * ウォッチする場合は末尾に --watch を付ける。
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

:root {
  --color-brand: #004098;
  --color-ink: #101828;
  --color-surface: #ffffff;
  --content-wide: 1440px;
  --content-main: 1280px;
  --content-narrow: 880px;
  --page-gutter: clamp(20px, 5vw, 80px);
  --section-space-sm: clamp(48px, 5vw, 80px);
  --section-space-md: clamp(72px, 8vw, 140px);
  --section-space-lg: clamp(100px, 12vw, 200px);
  --layout-max-width: 100%;
  --space-inline: 15px;
  --space-inline-fluid: 15px;
  --design-base-width: 375px;
}

@media (min-width: 768px) {
  :root {
    --space-inline: 24px;
    --space-inline-fluid: 24px;
  }
}
@media (min-width: 1280px) {
  :root {
    --space-inline: 40px;
    --space-inline-fluid: 40px;
    --layout-max-width: 1200px;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  background-color: #ffffff;
  touch-action: manipulation;
}

:where(
  a,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  label[for],
  select,
  summary,
  [role="button"]
) {
  touch-action: manipulation;
}

:where(a, button, [role="button"], label[for], summary) {
  cursor: pointer;
}

:where(a, button, [role="button"]) {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--color-ink);
  background-color: var(--color-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid #ffcd00;
  outline-offset: 4px;
}

/* Lenis（慣性スクロール / assets/js/smooth-scroll.js）の必須スタイル。
   クラスは Lenis が <html> へ付ける。JS無効時・reduced-motion時は付かない */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.l-main {
  width: 100%;
}

.l-container {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--content-main);
  margin-inline: auto;
}

.l-container--wide {
  max-width: var(--content-wide);
}

.l-container--narrow {
  max-width: var(--content-narrow);
}

/* 1920px上限の外枠（実装ガイドライン 4-2 方式A）。
   1920px以下では width:100% と等価なので何もしない。
   MV（Hero）はこの外枠の外に置き、1920超でも全幅にする。 */
.l-shell {
  width: min(100%, 1920px);
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 20;
  color: #fff;
  background: var(--color-brand);
}

.site-header--top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
}

/* 下層6ページ（TOPと digital-service 以外）。ヘッダーの組み立ては TOP と同じで、
   置き方と背景だけ切り替える。
     SP / TB（〜1023）… TOPと同じ。背景は透明で、ヒーローへ重ねる
     PC（1024〜）    … #000 の帯として積み上げる（重ねない）
   透明のときは必ず重ねる。フローのままだと背後がページの白地になり、
   白いロゴが見えなくなる。 */
.site-header:not(.site-header--top):not(.dservice1-header) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .site-header:not(.site-header--top):not(.dservice1-header) {
    position: relative;
    background: #000;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 69px;
  padding-inline: clamp(20px, 4vw, 80px);
  border-block: 1px solid rgba(255, 255, 255, 0.3);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  width: min(150px, 34vw);
}

.site-header__brand > img {
  width: 100%;
  filter: brightness(0) invert(1);
}

.site-header__brand-lockup {
  display: flex;
  width: 100%;
  align-items: center;
}

.site-header__brand-mark {
  width: 20.25%;
  flex: none;
}

.site-header__brand-wordmark {
  width: 72.93%;
  flex: none;
  margin-left: 6.82%;
}

.site-header__nav {
  display: none;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 46px);
  font-size: 16px;
}

.site-header__link {
  display: inline-block;
  padding-block: 10px;
}

.site-header__menu-button {
  display: grid;
  place-content: center;
  width: 68px;
  min-height: 68px;
  margin-right: calc(clamp(20px, 4vw, 80px) * -1);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: inherit;
  background: transparent;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
}

.site-header__menu-icon {
  position: relative;
}

.site-header__menu-icon::before {
  position: absolute;
  top: -10px;
}

.site-header__menu-icon::after {
  position: absolute;
  top: 10px;
}

/* 1024以上の旧・共通指定。背景のグラデーションは下層ページ用だったが、
   TOPの構造へ揃えたので不要になった（下層は #004098、TOPは透明）。 */
@media (min-width: 1024px) {
  .site-header__inner {
    min-height: 133px;
  }
  .site-header__brand {
    width: 231px;
  }
  .site-header__nav {
    display: block;
    margin-left: auto;
    margin-right: clamp(42px, 5vw, 120px);
  }
  .site-header__menu-button {
    width: 133px;
    min-height: 133px;
  }
  .site-header__menu-icon,
  .site-header__menu-icon::before,
  .site-header__menu-icon::after {
    width: 51px;
  }
  .site-header__menu-icon::before {
    top: -18px;
  }
  .site-header__menu-icon::after {
    top: 18px;
  }
}
@media (min-width: 1280px) {
  .site-header__list {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .site-header__inner {
    min-height: 68px;
    padding-left: 4vw;
    padding-right: 0;
  }
  .site-header__brand {
    width: 110px;
  }
  .site-header__menu-button {
    width: 68px;
    min-height: 68px;
    margin-right: 0;
    color: var(--color-brand);
  }
}
@media (min-width: 768px) {
  .site-header:not(.dservice1-header) .site-header__inner {
    min-height: clamp(53.331px, 6.944vw, 133.328px);
    padding-right: 0;
    padding-left: clamp(16px, 2.083vw, 40px);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .site-header:not(.dservice1-header) .site-header__brand {
    width: clamp(92.4px, 12.031vw, 231px);
  }
  .site-header:not(.dservice1-header) .site-header__nav {
    display: none;
  }
  .site-header:not(.dservice1-header) .site-header__menu-button {
    position: relative;
    width: clamp(53.76px, 7vw, 134.4px);
    min-height: clamp(53.331px, 6.944vw, 133.328px);
    margin-right: 0;
    border-left: 0;
    color: #004098;
  }
  .site-header:not(.dservice1-header) .site-header__menu-button::before {
    position: absolute;
    top: 0;
    bottom: 1px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    content: "";
  }
  .site-header:not(.dservice1-header) .site-header__menu-icon,
  .site-header:not(.dservice1-header) .site-header__menu-icon::before,
  .site-header:not(.dservice1-header) .site-header__menu-icon::after {
    width: clamp(20.2px, 2.63vw, 50.5px);
    height: 3px;
  }
  .site-header:not(.dservice1-header) .site-header__menu-icon::before {
    top: clamp(-18px, -0.938vw, -12px);
  }
  .site-header:not(.dservice1-header) .site-header__menu-icon::after {
    top: clamp(12px, 0.938vw, 18px);
  }
}
/* ナビ（Figma 513:2262 / 1920×133.328）
   会社案内 x=994 … お問い合わせ 右端 1749.24、項目間 53px、fz 18px。
   ハンバーガーの区切り線が x=1785.66 なので、ナビ右端との間は 36.42px。
   768–1023 はハンバーガーだけ（上の @media の display: none がそのまま効く）。 */
@media (min-width: 1024px) {
  .site-header:not(.dservice1-header) .site-header__nav {
    display: block;
    margin-right: clamp(16px, 1.897vw, 36.42px);
    margin-left: auto;
  }
  .site-header:not(.dservice1-header) .site-header__list {
    gap: clamp(20px, 2.76vw, 53px);
    font-size: clamp(14px, 0.938vw, 18px);
  }
}
/* ==========================================================================
 * ハンバーガー → X（参考: https://www.uniform-net.jp/ ）
 *
 * 参考サイトは2本線だが、こちらは3本のまま。中央の線を消して、
 * 上下の線を中央へ寄せながら ±45度回してXにする。
 * 速さとイージングは参考サイトの実測値（0.3s ease-in-out）に合わせた。
 *
 * 引き金は aria-expanded。ドロワーの開閉状態そのものなので、
 * 表示のためだけのクラスを別に足す必要がない。
 * ========================================================================== */
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  transition:
    top 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

.site-header__menu-button[aria-expanded="true"] .site-header__menu-icon {
  background: transparent;
}

.site-header__menu-button[aria-expanded="true"]
  .site-header__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__menu-button[aria-expanded="true"] .site-header__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__menu-icon,
  .site-header__menu-icon::before,
  .site-header__menu-icon::after {
    transition: none;
  }
}
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  background: var(--color-brand);
}

.site-footer::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, #0055bb, #002b68);
  content: "";
}

.site-footer__inner {
  padding-block: var(--section-space-md) 32px;
}

.site-footer__lead {
  max-width: 880px;
}

.site-footer__kicker {
  font-size: clamp(16px, 1.5vw, 28px);
}

.site-footer__title {
  margin-top: 20px;
  color: #a5dcff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(34px, 5.1vw, 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-width: min(100%, 420px);
  margin-top: 48px;
  padding: 19px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.site-footer__cta-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.site-footer__cta-bullet,
.site-footer__cta-arrow-pc {
  display: none;
}

.site-footer__cta-more-group {
  display: contents;
}

.site-footer__cta-arrow-sp {
  display: none;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 30px;
  margin-top: var(--section-space-md);
  font-size: 14px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.site-footer [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.site-footer__nav-sp,
.site-footer__legal-sp,
.site-footer__brand-row {
  display: none;
}

.site-footer__brand-combined {
  display: none;
}

/* ロゴはトップページへのリンク。見た目が変わらないと押せると気づけないので、
   ホバーで薄くする。タッチ端末では :hover が張り付くため、
   サイト内の他のホバーと同じく実ポインタのある環境だけに限定する */
.site-footer__brand {
  transition: opacity 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__brand:hover {
    opacity: 0.6;
  }
}
@media (min-width: 768px) {
  .site-footer__nav {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 767px) {
  /*
    TOP SP Footer — Figma 153:5163 / 430px基準。
    横方向は430→375へ比例縮小し、固定pxの列・gapで375が重ならないようにする。
    縦座標（nav 328 / legal 552 など）は430基準値を維持。
  */
  .site-footer--top::before {
    background-color: rgba(0, 64, 152, 0.8);
    background-image: url("../images/footer-bg-sp.png");
    background-position: center bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  }
  .site-footer--top .site-footer__inner {
    position: relative;
    width: 100%;
    max-width: none;
    /* 縦座標（nav 328 / legal 552 / brand bottom 35）は430固定のため高さは縮めない */
    min-height: 730px;
    padding: clamp(41.86px, 11.1627906977vw, 48px)
      clamp(14.826px, 3.9534883721vw, 17px)
      clamp(17.442px, 4.6511627907vw, 20px);
  }
  .site-footer--top .site-footer__kicker {
    margin-left: clamp(5.233px, 1.3953488372vw, 6px);
    font-family: "Inter", sans-serif;
    font-size: clamp(21px, 5.6vw, 24.08px);
    font-weight: 500;
    line-height: clamp(26px, 6.933255814vw, 29.813px);
  }
  .site-footer--top .site-footer__title {
    margin-top: clamp(12.209px, 3.2558139535vw, 14px);
    color: #004098;
    font-family: "Inter", sans-serif;
    font-size: clamp(31.395px, 8.3720930233vw, 36px);
    font-weight: 500;
    line-height: clamp(38px, 10.133255814vw, 43.573px);
    letter-spacing: -0.506744186vw;
  }
  .site-footer--top .site-footer__cta {
    position: relative;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: clamp(54.07px, 14.4186046512vw, 62px);
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(31.395px, 8.3720930233vw, 36px);
    padding-block: clamp(9.593px, 2.5581395349vw, 11px);
    opacity: 1;
  }
  .site-footer--top .site-footer__cta-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    font-size: clamp(14px, 3.7209302326vw, 16px);
  }
  .site-footer--top .site-footer__cta-bullet {
    display: none;
  }
  .site-footer--top .site-footer__cta-arrow-pc {
    display: none;
  }
  .site-footer--top .site-footer__cta-more-group {
    position: relative;
    display: block;
    width: clamp(102.907px, 27.4418604651vw, 118px);
    height: clamp(34.884px, 9.3023255814vw, 40px);
    flex: none;
  }
  .site-footer--top .site-footer__cta-more {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: "Inter", sans-serif;
    font-size: clamp(11.628px, 3.1006976744vw, 13.333px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
  }
  .site-footer--top .site-footer__cta-arrow {
    position: absolute;
    top: 0;
    left: clamp(68.023px, 18.1395348837vw, 78px);
    display: grid;
    width: clamp(34.884px, 9.3023255814vw, 40px);
    height: clamp(34.884px, 9.3023255814vw, 40px);
    place-items: center;
  }
  .site-footer--top .site-footer__cta-arrow-circle,
  .site-footer--top .site-footer__cta-arrow-glyph {
    display: none;
  }
  .site-footer--top .site-footer__cta-arrow-sp {
    display: block;
    width: 100%;
    height: 100%;
  }
  .site-footer--top .site-footer__nav--desktop,
  .site-footer--top .site-footer__bottom--desktop {
    display: none;
  }
  .site-footer--top .site-footer__nav-sp {
    position: absolute;
    top: 328px;
    right: clamp(14.826px, 3.9534883721vw, 17px);
    left: clamp(14.826px, 3.9534883721vw, 17px);
    display: grid;
    /* 430: 列103 + gap42。狭幅では1frで均等分配し、nowrap文字のmin-contentで列が押し広げられないようにする */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(36.628px, 9.7674418605vw, 42px);
    row-gap: clamp(22.674px, 6.0465116279vw, 26px);
    margin-top: 0;
  }
  .site-footer--top .site-footer__nav-group {
    min-width: 0;
  }
  .site-footer--top .site-footer__nav-heading {
    display: block;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(13.953px, 3.7209302326vw, 16px);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    opacity: 1;
  }
  .site-footer--top .site-footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1.3318604651vw, 5.727px);
    margin-top: clamp(12.209px, 3.2558139535vw, 14px);
    color: #666;
    font-family: "Inter", sans-serif;
    font-size: clamp(12px, 3.2vw, 13.76px);
    font-weight: 500;
    line-height: clamp(17px, 4.533255814vw, 19.493px);
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .site-footer--top
    .site-footer__nav-group:nth-child(4)
    .site-footer__nav-list {
    gap: clamp(10px, 2.6597674419vw, 11.437px);
  }
  .site-footer--top .site-footer__nav-list [aria-disabled="true"] {
    opacity: 1;
  }
  .site-footer--top .site-footer__legal-sp {
    position: absolute;
    top: 552px;
    right: clamp(13.953px, 3.7209302326vw, 16px);
    bottom: auto;
    display: block;
    width: clamp(156.047px, 41.6279069767vw, 179px);
    height: clamp(68.95px, 18.386744186vw, 79.063px);
    color: #666;
    font-family: "Inter", sans-serif;
    font-size: clamp(12px, 3.2vw, 13.76px);
    font-weight: 500;
    line-height: clamp(17px, 4.533255814vw, 19.493px);
  }
  .site-footer--top .site-footer__legal-sp span {
    position: absolute;
    right: 0;
    white-space: nowrap;
  }
  .site-footer--top .site-footer__legal-sp span:first-child {
    top: 0;
    left: 0;
  }
  .site-footer--top .site-footer__legal-sp span:nth-child(2) {
    top: clamp(27.05px, 7.2130232558vw, 31.016px);
  }
  .site-footer--top .site-footer__legal-sp span:last-child {
    top: clamp(58.49px, 15.5960465116vw, 67.063px);
    font-size: clamp(10px, 2.666744186vw, 11.467px);
    line-height: 1;
  }
  .site-footer--top .site-footer__brand-row {
    position: absolute;
    right: clamp(14.826px, 3.9534883721vw, 17px);
    bottom: 35px;
    left: clamp(14.826px, 3.9534883721vw, 17px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }
  .site-footer--top .site-footer__brand {
    display: flex;
    width: clamp(201.488px, 53.7209302326vw, 231px);
    flex: none;
    align-items: center;
  }
  .site-footer--top .site-footer__brand-mark {
    width: 20.25%;
  }
  .site-footer--top .site-footer__brand-wordmark {
    width: 72.93%;
    margin-left: 6.82%;
  }
  .site-footer--top .site-footer__socials {
    display: flex;
    align-items: center;
    gap: clamp(10.465px, 2.7906976744vw, 12px);
    margin-left: clamp(22.674px, 6.0465116279vw, 26px);
    transform: translateY(clamp(6.105px, 1.6279069767vw, 7px));
  }
  .site-footer--top .site-footer__social {
    position: relative;
    display: block;
    width: clamp(19.366px, 5.1648837209vw, 22.209px);
    height: clamp(19.366px, 5.1648837209vw, 22.209px);
    flex: none;
    opacity: 1;
  }
  .site-footer--top .site-footer__social > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .site-footer--top .site-footer__social--instagram > img {
    position: absolute;
    inset: 0;
  }
  .site-footer--top .site-footer__social--instagram > img:nth-child(2) {
    inset: 24.32%;
    width: 51.36%;
    height: 51.36%;
  }
  .site-footer--top .site-footer__social--instagram > img:nth-child(3) {
    top: 17.3%;
    right: 17.3%;
    bottom: 70.7%;
    left: 70.7%;
    width: 12%;
    height: 12%;
  }
}
@media (min-width: 1024px) {
  .site-footer__inner {
    min-height: 720px;
    padding-block: 96px 40px;
  }
  .site-footer__lead {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(64px, 8vw, 144px);
    max-width: none;
  }
  .site-footer__kicker,
  .site-footer__title {
    grid-column: 1;
  }
  .site-footer__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    padding-block: 28px;
  }
  .site-footer__nav {
    margin-top: 120px;
    font-size: 16px;
  }
  .site-footer__bottom {
    margin-top: 88px;
  }
  /* TOP Footer は専用Gridのため、共通Footerの lead 内2カラム化を打ち消す */
  .site-footer--top .site-footer__lead {
    display: block;
  }
  .site-footer--top .site-footer__cta {
    grid-column: auto;
    grid-row: auto;
    padding-block: clamp(9.088px, 1.183vw, 22.72px) 0;
  }
  .site-footer--top .site-footer__nav--desktop {
    margin-top: 0;
  }
  .site-footer--top .site-footer__bottom--desktop {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  /*
  TOP PC Footer — Figma 169:6266 の2カラム構成を Grid で組む。
  絶対座標の左寄せ／右寄せをやめ、中央の空きを column-gap のリキッドで吸収する。
  下層ページの共通Footerへは波及させない。
  */
  .site-footer--top::before {
    background-color: rgba(0, 64, 152, 0.8);
    background-image: url("../images/footer-bg-pc.png");
    background-position: center bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
  }
  .site-footer--top .site-footer__inner {
    position: relative;
    display: grid;
    /* 左: キャッチ＋ロゴ / 右: CTA＋ナビ＋法務。隙間は gap で伸縮 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "lead cta" "brand nav" "brand bottom";
    column-gap: clamp(24px, 4.1666666667vw, 80px);
    row-gap: clamp(28px, 2.9166666667vw, 56px);
    align-content: space-between;
    width: 100%;
    max-width: none;
    min-height: clamp(432px, 56.25vw, 1080px);
    height: auto;
    padding: clamp(48px, 5.9375vw, 114px) clamp(32px, 4.167vw, 80px)
      clamp(32px, 4.1666666667vw, 80px);
    box-sizing: border-box;
  }
  .site-footer--top .site-footer__nav-sp,
  .site-footer--top .site-footer__legal-sp {
    display: none;
  }
  /* 左上: キャッチ */
  .site-footer--top .site-footer__lead {
    grid-area: lead;
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .site-footer--top .site-footer__kicker {
    font-family: "Roboto", sans-serif;
    font-size: clamp(14px, 1.458vw, 28px);
    font-weight: 500;
    line-height: clamp(18px, 1.875vw, 36px);
  }
  .site-footer--top .site-footer__title {
    margin-top: clamp(12px, 0.833vw, 16px);
    color: #004098;
    font-family: "Roboto", sans-serif;
    font-size: clamp(32px, 4.167vw, 80px);
    font-weight: 500;
    line-height: 1;
    /* Figma PC/Display/M */
    letter-spacing: -3.333px;
  }
  /* 右上: お問い合わせ CTA */
  .site-footer--top .site-footer__cta {
    grid-area: cta;
    position: static;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: clamp(35.2px, 4.583vw, 88px);
    align-items: center;
    justify-content: space-between;
    align-self: start;
    margin-top: 0;
    padding: clamp(9.088px, 1.183vw, 22.72px) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 1;
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.111vw, 21.333px);
    font-weight: 500;
    line-height: 1;
  }
  .site-footer--top .site-footer__cta-label {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 0.833vw, 16px);
  }
  .site-footer--top .site-footer__cta-bullet {
    display: block;
    width: clamp(8px, 0.555vw, 10.656px);
    height: clamp(8px, 0.555vw, 10.656px);
    flex: none;
  }
  .site-footer--top .site-footer__cta-more-group {
    position: relative;
    display: block;
    /* 46.8px まで縮めると "View More" が折り返すため下限を確保 */
    width: clamp(100px, 6.09375vw, 117px);
    height: clamp(16px, 2.083vw, 40px);
    flex: none;
  }
  .site-footer--top .site-footer__cta-more {
    position: absolute;
    top: calc(50% - 0.42em);
    left: 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(11px, 0.695vw, 13.333px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .site-footer--top .site-footer__cta-arrow {
    position: absolute;
    top: 0;
    left: clamp(60px, 4.01vw, 77px);
    display: block;
    width: clamp(16px, 2.083vw, 40px);
    height: clamp(16px, 2.083vw, 40px);
  }
  .site-footer--top .site-footer__cta-arrow-pc {
    display: block;
    width: 100%;
    height: 100%;
  }
  .site-footer--top .site-footer__cta-arrow-circle,
  .site-footer--top .site-footer__cta-arrow-glyph,
  .site-footer--top .site-footer__cta-arrow-sp {
    display: none;
  }
  /* 右: ナビ 3列。列幅は 1fr、列間はリキッド gap */
  /* 左下: ロゴ＋SNS */
  /* 右下: 法務＋コピーライト */
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .site-footer--top .site-footer__cta:hover .site-footer__cta-arrow-pc {
    content: url("../images/top/about-nav-arrow-brand.svg");
  }
}
@media (min-width: 768px) {
  .site-footer--top .site-footer__nav--desktop {
    grid-area: nav;
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 2.0833333333vw, 40px);
    row-gap: clamp(28px, 4.1666666667vw, 126.6px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: inherit;
  }
  .site-footer--top .site-footer__nav--desktop .site-footer__nav-group {
    min-width: 0;
  }
  .site-footer--top .site-footer__nav--desktop .site-footer__nav-heading {
    display: block;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.111vw, 21.333px);
    font-weight: 500;
    line-height: 1;
    opacity: 1;
  }
  .site-footer--top .site-footer__nav--desktop .site-footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.346875vw, 6.66px);
    margin-top: clamp(12px, 1.8vw, 34.65px);
    color: #666;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(14px, 0.903vw, 17.333px);
    font-weight: 300;
    line-height: clamp(18px, 1.25vw, 24px);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .site-footer--top .site-footer__nav--desktop .site-footer__nav-list a,
  .site-footer--top
    .site-footer__nav--desktop
    .site-footer__nav-list
    [aria-disabled="true"] {
    color: inherit;
    text-decoration: none;
    opacity: 1;
  }
  .site-footer--top .site-footer__brand-row {
    grid-area: brand;
    position: static;
    display: flex;
    width: 100%;
    max-width: clamp(211.2px, 27.5vw, 528px);
    flex-direction: column;
    align-items: flex-start;
    align-self: end;
    gap: clamp(20.664px, 2.69vw, 51.66px);
    margin: 0;
  }
  .site-footer--top .site-footer__brand {
    display: block;
    width: 100%;
  }
  .site-footer--top .site-footer__brand-combined {
    display: block;
    width: 100%;
    height: auto;
  }
  .site-footer--top .site-footer__brand-mark,
  .site-footer--top .site-footer__brand-wordmark {
    display: none;
  }
  .site-footer--top .site-footer__socials {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.3020833333vw, 25px);
    margin-left: clamp(4.4px, 0.5729166667vw, 11px);
    transform: none;
  }
  .site-footer--top .site-footer__social {
    position: relative;
    display: block;
    width: clamp(19.2px, 2.5vw, 48px);
    height: clamp(19.2px, 2.5vw, 48px);
    opacity: 1;
  }
  .site-footer--top .site-footer__social > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .site-footer--top .site-footer__social--instagram > img {
    position: absolute;
    inset: 0;
  }
  .site-footer--top .site-footer__social--instagram > img:nth-child(2) {
    inset: 24.32%;
    width: 51.36%;
    height: 51.36%;
  }
  .site-footer--top .site-footer__social--instagram > img:nth-child(3) {
    top: 17.3%;
    right: 17.3%;
    bottom: 70.7%;
    left: 70.7%;
    width: 12%;
    height: 12%;
  }
  .site-footer--top .site-footer__bottom--desktop {
    grid-area: bottom;
    position: static;
    display: flex;
    width: 100%;
    max-width: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-self: end;
    gap: clamp(8px, 1.041vw, 20px);
    margin: 0;
    padding: 0;
    border-top: none;
    color: #666;
  }
  .site-footer--top .site-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(20.4px, 2.65625vw, 51px);
    min-width: 0;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(14px, 0.903vw, 17.333px);
    font-weight: 300;
    line-height: clamp(18px, 1.25vw, 24px);
  }
  .site-footer--top .site-footer__legal-links [aria-disabled="true"] {
    opacity: 1;
  }
  .site-footer--top .site-footer__copyright {
    font-family: "Roboto", sans-serif;
    font-size: clamp(13px, 0.833vw, 16px);
    font-weight: 300;
    line-height: clamp(15px, 0.938vw, 18px);
  }
}
@media (min-width: 1280px) {
  .site-footer__inner {
    min-height: 880px;
    padding-block: 132px 48px;
  }
  .site-footer__lead {
    grid-template-columns: minmax(0, 1.55fr) minmax(420px, 0.85fr);
  }
  .site-footer__title {
    font-size: clamp(64px, 5.1vw, 80px);
  }
  .site-footer__nav {
    margin-top: 168px;
  }
  /* TOP Footer は専用Gridを維持（共通Footerの padding / nav margin を打ち消す） */
  .site-footer--top .site-footer__inner {
    min-height: clamp(432px, 56.25vw, 1080px);
    padding: clamp(48px, 5.9375vw, 114px) clamp(32px, 4.167vw, 80px)
      clamp(32px, 4.1666666667vw, 80px);
  }
  .site-footer--top .site-footer__nav--desktop {
    margin-top: 0;
  }
}
.c-brand-name {
  letter-spacing: -0.1em;
}
.c-brand-name::after {
  content: "";
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  background-color: #ffffff;
  margin-left: -0.1em;
  margin-bottom: -0.01em;
}

.c-brand-name.--black::after {
  background-color: #000000;
}

.c-button {
  display: grid;
  align-items: center;
  justify-items: center;
  border-radius: 30px;
  border: 1px solid #000;
  background: #d9d9d9;
  color: #000;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.05em;
  padding-left: 5px;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.c-button svg circle,
.c-button svg path {
  transition:
    fill 0.25s ease,
    stroke 0.25s ease;
}
.c-button svg circle {
  fill: #000;
}
.c-button svg path {
  stroke: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .c-button:hover {
    background: #000;
    color: #fff;
  }
  .c-button:hover svg circle {
    fill: #fff;
  }
  .c-button:hover svg path {
    stroke: #000;
  }
}
@media (min-width: 768px) {
  .c-button {
    width: 200px;
    height: 43px;
    font-size: 14px;
    letter-spacing: -0.05em;
    grid-template-columns: 1fr 36px;
  }
}
@media (min-width: 1280px) {
  .c-button {
    width: 354px;
    height: 60px;
    font-size: 20px;
    letter-spacing: 0.05em;
    grid-template-columns: 1fr 40px;
  }
}
.c-button__icon {
  margin-right: 7px;
  width: 27px;
}
@media (min-width: 1280px) {
  .c-button__icon {
    margin-right: 16px;
    width: 40px;
  }
}

.site-drawer[hidden] {
  display: none;
}

.site-drawer {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr min(100%, 720px);
  color: #fff;
}

.site-drawer__overlay {
  border: 0;
  background: rgba(0, 0, 0, 0.62);
}

.site-drawer__panel {
  overflow-y: auto;
  min-height: 100%;
  padding: 24px var(--page-gutter) 40px;
  background: #080b12;
}

.site-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-drawer__brand {
  width: min(150px, 35vw);
}

.site-drawer__brand img {
  filter: brightness(0) invert(1);
}

.site-drawer__close {
  display: grid;
  place-content: center;
  width: 50px;
  aspect-ratio: 1;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 30px;
}

/* SPドロワー本体（Figma sp_drawer_menu 499:1952 / 430px基準）
   カンプは項目 h=32・gap=20 の等間隔。実装はタップ領域44px以上を確保するため、
   1項目の高さを 52px（32+20）として gap を持たせず、テキストを縦中央に置く。
   結果として中心間隔はカンプと一致する。 */
/* カンプは Nav の上端が y=96。パネルの padding-top 24px を引いた 72px を持たせる */
.site-drawer__nav {
  margin-top: min(65.5px, 15.233vw);
}

/* カンプ: 項目の高さ32px・間隔20px（中心間隔52px） */
.site-drawer__list {
  display: grid;
  gap: min(20px, 4.651vw);
}

/* 見た目の高さはカンプどおり32pxにしつつ、上下の padding で当たり判定を52pxまで広げる。
   広げた分を負の margin で相殺するので、レイアウト上の高さと間隔はカンプのまま。
   padding 10px × 2 = gap 20px なので、隣の項目と当たり判定が重なることもない。 */
.site-drawer__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: min(52px, 12.093vw);
  padding: 0;
  margin-block: max(-10px, -2.326vw);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: min(20.64px, 4.8vw);
  font-weight: 500;
  line-height: 1;
  text-align: left;
}

.site-drawer__link--toggle {
  cursor: pointer;
}

/* ＋ / − アイコン（カンプ: 23×23・線1px・#666）。
   開いている間は縦線を倒して「−」にする */
.site-drawer__plus {
  position: relative;
  flex: none;
  width: min(23px, 5.349vw);
  height: min(23px, 5.349vw);
}

.site-drawer__plus::before,
.site-drawer__plus::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #666;
  content: "";
  transition: transform 0.25s ease;
}

.site-drawer__plus::after {
  transform: rotate(90deg);
}

[aria-expanded="true"] .site-drawer__plus::after {
  transform: rotate(0deg);
}

/* アコーディオンの中身 */
.site-drawer__sub[hidden] {
  display: none;
}

.site-drawer__sub {
  display: grid;
  padding: 0 0 min(12px, 2.791vw) min(17px, 3.953vw);
}

.site-drawer__sub-link {
  min-height: 44px; /* タップ領域 */
  display: flex;
  align-items: center;
  color: #a6afbd;
  font-size: min(16px, 3.721vw);
  line-height: 1.6;
}

.site-drawer__sub-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.site-drawer__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(6px, 1.395vw);
  margin-top: min(61px, 14.186vw);
  color: #666;
  font-size: min(14px, 3.256vw);
  letter-spacing: -0.05em;
}

.site-drawer__footer [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.site-drawer__brand-pc,
.site-drawer__visual-pc,
.site-drawer__nav-pc,
.site-drawer__copyright-pc {
  display: none;
}

/* ドロワーのロゴを、ヘッダーのロゴと同じ位置・同じ形にする（開閉で動かないように）。
   値はすべて SP のヘッダー側と同一：
     left  … .site-header__inner の padding-left: 4vw
     width … .site-header__brand の width: 110px
     top   … border-top 1px +（min-height 68px − ロゴ高 26.7px）÷ 2
   ヘッダー側を変えるときは、ここも必ず一緒に直すこと。 */
@media (max-width: 767px) {
  .site-drawer__brand-mobile {
    display: none;
  }

  .site-drawer__brand-pc {
    display: flex;
    width: 100%;
    align-items: center;
  }

  .site-drawer__brand-pc img:first-child {
    width: 20.25%;
    flex: none;
  }

  .site-drawer__brand-pc img:last-child {
    width: 72.93%;
    flex: none;
    margin-left: 6.82%;
  }

  /* パネルはカンプ（430×726）の縦横比のまま画面幅に追従させ、726pxで頭打ちにする。
     画面がそれより高いときは、下に敷いたオーバーレイ（下地）が見える。
     下地の側はスクロールしない（body.is-drawer-open が position:fixed で固定済み）。 */
  .site-drawer__panel {
    position: relative;
    z-index: 1;
    height: min(726px, 168.837vw); /* 726 ÷ 430 × 100vw */
    min-height: 0;
    align-self: start;
    padding-bottom: 0;
  }

  .site-drawer__top {
    position: static;
  }

  .site-drawer__brand {
    position: absolute;
    z-index: 2;
    top: 21.7px;
    left: 4vw;
    width: 110px;
  }
}

/* SPでもキャッチコピーとコピーライトを出す（Figma sp_drawer_menu 499:1952）。
   クラス名の `-pc` は 768以上専用だった頃の名残。DOMを二重に持たないため、
   同じ要素をSPでも使い、配置だけここで与える。
   768以上の配置は下の @media (min-width: 768px) が担当する。 */
@media (max-width: 767px) {
  .site-drawer__visual-pc {
    display: block;
    margin-top: min(46px, 10.698vw);
  }

  .site-drawer__visual-kicker {
    color: #fff;
    font-size: min(18.347px, 4.267vw);
    font-weight: 500;
    line-height: 1;
  }

  .site-drawer__visual-title {
    margin-top: min(14px, 3.256vw);
    color: #004098;
    font-family: "Roboto", sans-serif;
    font-size: min(28px, 6.512vw);
    font-weight: 500;
    line-height: 1.286; /* カンプ 36 / 28 */
  }

  /* カンプでは英字キャッチの最終行の右横に来る（y=670 / キャッチ下端693） */
  .site-drawer__copyright-pc {
    display: block;
    margin-top: max(-23px, -5.349vw);
    color: #666;
    font-family: "Roboto", sans-serif;
    font-size: min(16px, 3.721vw);
    font-weight: 300;
    text-align: right;
  }
}

@media (min-width: 768px) {
  /* パネルは16:9（カンプ 165:6157 / 1920×1080）。**余った領域は塗りつぶさず、
     下地を見せる。** 以前は .site-drawer を #000 で塗って画面全体を覆っていたため、
     16:9のパネルがどこまでか見えなかった。SP（〜767）と同じ扱いに揃える。 */
  .site-drawer {
    display: block;
    background: transparent;
  }
  .site-drawer__nav,
  .site-drawer__footer,
  .site-drawer__brand-mobile {
    display: none;
  }
  /* 下地（タップで閉じる導線も兼ねる） */
  .site-drawer__overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
  }
  /* ------------------------------------------------------------------
     パネルの中身を Grid で組む（以前は12個すべて position: absolute）

     　　top  top  top  top
     　　***  nav  nav  nav
     　　cop  cop  leg  leg

     キャッチコピーをナビと同じ行から外したのがポイント。同じ行にいると
     キャッチ（nowrapで幅を持つ）が左の余白を占有してしまい、ナビは右の4割しか
     使えず、768〜900で「アーヴァント.に込めた想い」と
     「デジタルソリューション部」が重なっていた。行を分けると、ナビ側は
     必要なだけ左へ広がれる。

     列は 左端 / 余り / グループ3列 / 右端 の6本。グループ3列は fr
     （＝minmax(auto, Nfr)）。auto の最小値は中身の最小幅なので、狭くなると
     グループが必要な幅を主張し、「余り」の列が譲る。
     min-content を最小値に書いてはいけない。min-width: 0 が効かず、
     2列にまたがるキャッチのnowrap幅がグループ側の列へ丸ごと乗る
     （1920でグループ1列目が792pxになった）。

     外周の余白は padding ではなくトラックで持つ。パネルは container-type: size
     なので、padding を足すと cqw / cqh の基準（コンテンツボックス）が縮み、
     中の文字とロゴまで一緒に小さくなってしまう。
     トラックの値に cqw / cqh は使えない。コンテナは自分自身の寸法を問い合わせ
     できず、ビューポート基準へ落ちるため（768で上端が93.3→202.3にずれた）。
     パネルは高さが確定しているので % がそのまま使える。

     上端寄せにしているのは、画面の高さが変わってもロゴとナビが動かないため。
     以前は上下中央だったので、開いた瞬間にロゴが飛んでいた。
     横は中央のまま（画面が16:9より横長のときだけ左右に余りが出る）。

     ロゴと × は絶対配置のまま残す（ヘッダーのロゴと位置を合わせてあり、
     パネルの余白を基準にしていないため）。
     ------------------------------------------------------------------ */
  .site-drawer__panel {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    display: grid;
    grid-template-columns: 2.083% minmax(0, 946fr) 200fr 276fr 324fr 6.781%;
    /* 行は 上端 / トップページ / 間 / グループ1段目 / 間 / 2段目 / 余り / 下段 / 下端。
       カンプ1920: 上端233.14、行間85.3、下端85.86 */
    grid-template-rows: 21.587% auto 7.898% auto 7.898% auto minmax(
        0,
        1fr
      ) auto 7.95%;
    grid-template-areas:
      "topbar topbar topbar topbar topbar topbar"
      ".      .      navtop navtop navtop ."
      ".      .      .      .      .      ."
      ".      .      ga1    ga2    ga3    ."
      ".      .      .      .      .      ."
      ".      .      gb1    gb2    gb3    ."
      ".      .      .      .      .      ."
      ".      copy   copy   legal  legal  ."
      ".      .      .      .      .      .";
    width: min(100vw, calc(100vh * 16 / 9), 1920px);
    height: min(100vh, calc(100vw * 9 / 16), 1080px);
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    background: #000;
    transform: translateX(-50%);
    container-type: size;
  }
  /* ロゴと × を持つ箱。中身は絶対配置なので何も描かない */
  .site-drawer__top {
    position: static;
    grid-area: topbar;
  }
  .site-drawer__brand {
    position: absolute;
    z-index: 2;
    top: calc(clamp(53.331px, 6.944cqw, 133.328px) / 2);
    left: clamp(16px, 2.083cqw, 40px);
    width: clamp(92.4px, 12.031cqw, 231px);
    transform: translateY(-50%);
  }
  .site-drawer__brand-pc {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .site-drawer__brand-pc img:first-child {
    width: 20.25%;
    flex: none;
  }
  .site-drawer__brand-pc img:last-child {
    width: 72.93%;
    flex: none;
    margin-left: 6.82%;
  }
  .site-drawer__close {
    position: absolute;
    z-index: 2;
    top: clamp(14.4px, 3.333cqh, 36px);
    right: clamp(15.2px, 1.979cqw, 38px);
    width: clamp(28px, 3.646cqw, 70px);
    height: clamp(28px, 6.481cqh, 70px);
    color: #004098;
    font-size: 0;
  }
  .site-drawer__close::before,
  .site-drawer__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(20.2px, 2.63cqw, 50.5px);
    height: 3px;
    background: currentColor;
    content: "";
  }
  .site-drawer__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .site-drawer__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  /* キャッチは下段の左。中の2行はフローで積む */
  .site-drawer__visual-pc {
    grid-area: copy;
    align-self: end;
    display: block;
    /* 2列にまたがるので、既定の自動最小幅（nowrapのタイトル812px）が
       グループ側の列まで押し広げてしまう。0にして列の寸法から外す */
    min-width: 0;
  }
  .site-drawer__visual-kicker {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(11.2px, 1.458cqw, 28px);
    font-weight: 500;
    line-height: clamp(14.4px, 1.875cqw, 36px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* カンプ: キャッチ下端813.0 → タイトル上端834.1 */
  .site-drawer__visual-title {
    margin-top: min(1.099cqw, 21.1px);
    color: #004098;
    font-family: "Roboto", sans-serif;
    font-size: clamp(32px, 4.167cqw, 80px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: clamp(-3.333px, -0.174cqw, -2.222px);
    white-space: nowrap;
  }
  /* nav と groups は箱としての役割を終える。中身をパネルの Grid に直接並べる */
  .site-drawer__nav-pc,
  .site-drawer__nav-pc-groups {
    display: contents;
  }
  .site-drawer__nav-pc-top,
  .site-drawer__nav-pc-group h2 {
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.111cqw, 21.333px);
    font-weight: 500;
    line-height: clamp(8.533px, 1.111cqw, 21.333px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .site-drawer__nav-pc-top {
    grid-area: navtop;
    justify-self: start;
    /* line-height が font-size と同値なので、押せる範囲が高さ16pxしかなかった。
       padding で44pxまで広げ、同じ量の負の margin で位置を戻す */
    padding: 14px 10px;
    margin: -14px -10px;
  }
  .site-drawer__nav-pc-group--company {
    grid-area: ga1;
  }
  .site-drawer__nav-pc-group--message {
    grid-area: ga2;
  }
  .site-drawer__nav-pc-group--business {
    grid-area: ga3;
  }
  .site-drawer__nav-pc-group--recruit {
    grid-area: gb1;
  }
  .site-drawer__nav-pc-group--news {
    grid-area: gb2;
  }
  .site-drawer__nav-pc-group--contact {
    grid-area: gb3;
  }
  .site-drawer__nav-pc-group h2 {
    margin: 0;
    font-size: clamp(14px, 1.111cqw, 21.333px);
  }
  .site-drawer__nav-pc-group > div {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.365cqw, 7px);
    margin-top: clamp(14.8px, 1.927cqw, 37px);
    color: #666;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(13px, 0.903cqw, 17.333px);
    font-weight: 300;
    line-height: clamp(9.6px, 1.25cqw, 24px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* 下段の右。legal が左、コピーライトが右 */
  .site-drawer__legal-pc {
    grid-area: legal;
    align-self: end;
    display: flex;
    gap: min(2.656cqw, 51px);
    color: #666;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(13px, 0.903cqw, 17.333px);
    font-weight: 300;
    line-height: clamp(9.6px, 1.25cqw, 24px);
    white-space: nowrap;
  }
  .site-drawer__copyright-pc {
    grid-area: legal;
    align-self: end;
    justify-self: end;
    display: block;
    color: #666;
    font-family: "Roboto", sans-serif;
    font-size: clamp(12px, 0.833cqw, 16px);
    font-weight: 300;
    line-height: clamp(14px, 0.938cqw, 18px);
    white-space: nowrap;
  }

  /* 列が中身の幅で伸びるので、下位項目は nowrap のままでよい。
     キャッチだけは、狭いときに下段の2列へ収まらないので折り返しを許す。
     判定は画面幅ではなくパネル幅（コンテナ）で行う。パネルは
     min(100vw, 100vh*16/9, 1920px) なので、画面が低いと幅も縮むため。 */
  @container (max-width: 1279px) {
    .site-drawer__visual-title {
      white-space: normal;
    }

    /* 狭いと列幅＝中身の幅になり、隣の列と文字がくっつく。
       列の間隔は padding で持つ（1280以上は列に余りがあるので不要） */
    .site-drawer__nav-pc-group {
      padding-right: min(2.083cqw, 26.7px);
    }
  }

  /* 1024未満はパネルが432pxしかなく、キャッチが32pxのままだと4行になって
     下段がパネルからはみ出す。ここだけ一段小さくする */
  @container (max-width: 1023px) {
    .site-drawer__visual-title {
      font-size: min(3.2cqw, 32px);
      line-height: 1.2;
    }
  }
}
@media (min-width: 1920px) {
  .site-drawer__brand {
    transform: translateY(calc(-50% - 0.0078125px));
  }
}
@media (max-width: 767px) {
  .site-drawer {
    grid-template-columns: 1fr;
  }
  /* 以前はパネルが画面いっぱいだったため overlay を消していた。
     パネルの高さを 726px（カンプ比）で頭打ちにしたので、その下に下地として見せる。
     タップで閉じる導線も兼ねる。 */
  .site-drawer__overlay {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
  }
}
body.is-drawer-open {
  position: fixed;
  width: 100%;
}

/* ==========================================================================
 * ドロワーの開閉（参考: https://www.uniform-net.jp/ ）
 *
 * 参考サイトを計測したところ、パネルはスライドせず
 * opacity + visibility のフェードだけだった（0.3s ease-in-out）。
 * 中の項目に時間差も付いていない。同じ作りにする。
 *
 * hidden 属性は display: none なので transition が効かない。
 * navigation.js が「開くときは hidden を外してから次のフレームで is-open」
 * 「閉じるときは is-open を外してフェードが終わってから hidden」の順で扱う。
 * ========================================================================== */
.site-drawer {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
}

.site-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

/* 閉じる操作はハンバーガー（Xに変形）が兼ねるので、専用ボタンは出さない。
   要素自体は残す。navigation.js のフォーカストラップが参照している */
.site-drawer__close {
  display: none;
}

/* 開いている間はヘッダーをドロワーより前面へ出す。
   そうしないと X が全画面パネルの裏に隠れて見えない。
   ロゴとナビはドロワー側にあるので消す。visibility なら
   タブ移動の対象からも外れる（opacity だと残ってしまう） */
body.is-drawer-open .site-header {
  z-index: 110;
  background: transparent;
}

body.is-drawer-open .site-header__inner {
  border-color: transparent;
}

body.is-drawer-open .site-header__brand,
body.is-drawer-open .site-header__nav {
  visibility: hidden;
}

/* SPのハンバーガーはブランドカラー。暗いパネルの上では見えないので白へ */
body.is-drawer-open .site-header__menu-button {
  color: #fff;
}

body.is-drawer-open .site-header__menu-button::before {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .site-drawer {
    transition: none;
  }
}
/* ==========================================================================
   製造事業部 manufacturing.html
   Figma: 225:1430（1920×7027）
   ========================================================================== */
.manufacturing-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

/* Hero */
.manufacturing-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(420px, 56.25vw, 1080px);
}

.manufacturing-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.manufacturing-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(0, 12, 32, 0.85) 0%,
    rgba(0, 30, 74, 0.62) 50%,
    rgba(0, 8, 24, 0.88) 100%
  );
  pointer-events: none;
}

.manufacturing-hero__inner {
  position: relative;
  z-index: 1;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.manufacturing-hero__heading {
  margin-left: 52%;
}

.manufacturing-hero__label {
  font-size: clamp(15px, 1.25vw, 24px);
}

.manufacturing-hero__title {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(34px, 3.333vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* About */
.manufacturing-about {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-space-lg);
}

.manufacturing-about__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.manufacturing-about__media {
  position: relative;
  grid-column: 1 / span 5;
}

.manufacturing-about__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.manufacturing-about__image--main {
  width: 62%;
  margin-left: 24%;
  aspect-ratio: 281/387;
}

.manufacturing-about__image--sub {
  position: absolute;
  bottom: clamp(-40px, -3.125vw, -60px);
  left: 4%;
  width: 34%;
  aspect-ratio: 185/255;
}

.manufacturing-about__body {
  grid-column: 7 / span 6;
}

.manufacturing-about__title {
  font-size: clamp(24px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1.6;
}

.manufacturing-about__text {
  margin-top: clamp(20px, 1.667vw, 32px);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
}

.manufacturing-about__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.042vw, 20px);
  margin-top: clamp(28px, 2.5vw, 48px);
}

.manufacturing-about__nav-link {
  display: flex;
  min-height: 48px;
  min-width: clamp(220px, 16.667vw, 320px);
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(18px, 1.667vw, 32px);
  border: 1px solid var(--color-brand);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(13px, 0.833vw, 16px);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.manufacturing-about__nav-link--primary {
  background: var(--color-brand);
}

@media (hover: hover) and (pointer: fine) {
  .manufacturing-about__nav-link:hover {
    background: #fff;
    color: var(--color-brand);
  }
}
.manufacturing-about__nav-link:focus-visible {
  background: #fff;
  color: var(--color-brand);
}

/* Machine（機械設備一覧） */
.manufacturing-machine {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--section-space-lg);
}

/* 全幅の帯見出し */
.manufacturing-machine__band {
  display: grid;
  min-height: clamp(64px, 6.094vw, 117px);
  place-items: center;
  background: linear-gradient(90deg, #000d1f 0%, #0a54b4 50%, #000d1f 100%);
  font-size: clamp(18px, 1.667vw, 32px);
  font-weight: 500;
}

.manufacturing-machine__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.manufacturing-machine__factory {
  margin-top: clamp(40px, 4.167vw, 80px);
  font-size: clamp(22px, 2.5vw, 48px);
  font-weight: 500;
  text-align: center;
}

/* 分類ピル帯 */
.manufacturing-machine__category {
  display: grid;
  min-height: clamp(48px, 4.167vw, 80px);
  place-items: center;
  margin-top: clamp(32px, 3.333vw, 64px);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0, 24, 60, 0) 0%,
    #0a54b4 50%,
    rgba(0, 24, 60, 0) 100%
  );
  font-size: clamp(16px, 1.667vw, 32px);
  font-weight: 500;
}

.manufacturing-machine__category--half {
  margin-top: 0;
}

.manufacturing-machine__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 3.125vw, 60px);
  row-gap: clamp(32px, 3.333vw, 64px);
  margin-top: clamp(24px, 2.083vw, 40px);
}

.manufacturing-machine__columns--secondary {
  margin-top: clamp(48px, 5.208vw, 100px);
}

.manufacturing-machine__type {
  padding-bottom: clamp(10px, 0.833vw, 16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 500;
  text-align: center;
}

.manufacturing-machine__maker-group {
  margin-top: clamp(20px, 2.083vw, 40px);
}

.manufacturing-machine__maker {
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 500;
}

.manufacturing-machine__rows {
  margin-top: clamp(8px, 0.833vw, 16px);
}

.manufacturing-machine__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: clamp(12px, 1.042vw, 20px);
  padding-block: clamp(12px, 1.146vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: clamp(13px, 0.833vw, 16px);
}

.manufacturing-machine__qty {
  flex: none;
}

/* ==========================================================================
   MQはファイル末尾（ガイドライン5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .manufacturing-hero__inner,
  .manufacturing-about__inner,
  .manufacturing-machine__inner {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .manufacturing-hero__inner,
  .manufacturing-about__inner,
  .manufacturing-machine__inner {
    width: 90%;
  }
  .manufacturing-hero__heading {
    margin-left: 0;
  }
  .manufacturing-about__media,
  .manufacturing-about__body {
    grid-column: 1/-1;
  }
  .manufacturing-about__body {
    margin-top: clamp(48px, 6.25vw, 72px);
  }
  .manufacturing-machine__columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .manufacturing-machine__category--half {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .manufacturing-hero__inner,
  .manufacturing-about__inner,
  .manufacturing-machine__inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .manufacturing-hero {
    min-height: min(560px, 130.233vw);
  }
  .manufacturing-about {
    padding-block: var(--section-space-md);
  }
  .manufacturing-about__nav-link {
    width: 100%;
  }
}
/* ==========================================================================
   デジタルソリューション部 digital.html
   Figma: 372:5316（1920×4680）
   ========================================================================== */
.digital-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

/* Hero */
.digital-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(420px, 56.25vw, 1080px);
}

.digital-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.digital-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(0, 10, 28, 0.88) 0%,
    rgba(0, 26, 64, 0.68) 50%,
    rgba(0, 6, 20, 0.92) 100%
  );
  pointer-events: none;
}

.digital-hero__inner {
  position: relative;
  z-index: 1;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.digital-hero__heading {
  margin-left: 52%;
}

.digital-hero__label {
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.digital-hero__title {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(34px, 3.333vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65);
}

/* About */
.digital-about {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-space-lg);
}

.digital-about__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.digital-about__media {
  position: relative;
  grid-column: 1 / span 5;
}

.digital-about__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.digital-about__image--main {
  width: 66%;
  margin-left: 22%;
  aspect-ratio: 4/3;
}

.digital-about__image--sub {
  position: absolute;
  bottom: clamp(-36px, -2.917vw, -56px);
  left: 2%;
  width: 38%;
  aspect-ratio: 4/3;
}

.digital-about__body {
  grid-column: 7 / span 6;
}

.digital-about__title {
  font-size: clamp(23px, 2.292vw, 44px);
  font-weight: 500;
  line-height: 1.6;
}

.digital-about__text {
  margin-top: clamp(20px, 1.667vw, 32px);
  max-width: 40em;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(15px, 1.042vw, 20px);
  line-height: 2.1;
}

/* Service */
/* Figma上はステージ下端＝フッター上端のため下余白は持たせない */
.digital-service {
  position: relative;
  isolation: isolate;
}

.digital-service__glow {
  position: absolute;
  z-index: 0;
  top: clamp(-80px, -6vw, -120px);
  left: -12%;
  width: clamp(420px, 59.844vw, 1149px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(0, 64, 152, 0.4) 0%,
    rgba(0, 64, 152, 0.1) 45%,
    rgba(0, 64, 152, 0) 70%
  );
  pointer-events: none;
}

.digital-service__inner {
  position: relative;
  z-index: 1;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.digital-heading__label {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 400;
}

.digital-heading__title {
  margin-top: clamp(18px, 2.083vw, 40px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(44px, 6.25vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

/* サービス面は全幅ステージ（Figma: Frame 4 / 1920×1080） */
.digital-service__stage {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: grid;
  align-content: center;
  margin-top: clamp(36px, 3.333vw, 64px);
  aspect-ratio: 16/9;
  min-height: clamp(420px, 56.25vw, 1080px);
  overflow: hidden;
}

.digital-service__stage-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(3, 15, 36, 0.92) 0%,
      rgba(8, 50, 114, 0.76) 55%,
      rgba(2, 10, 26, 0.95) 100%
    ),
    url("../images/digital/stage-bg.webp") center/cover no-repeat;
  pointer-events: none;
}

.digital-service__stage-inner {
  display: grid;
  grid-template-columns: 12.083fr 39.844fr 10.573fr 37.5fr;
  align-items: center;
  width: 100%;
}

/* 左：サービスページのキャプチャ（765×410 相当） */
.digital-service__shot {
  display: block;
  grid-column: 2;
  overflow: hidden;
  border-radius: clamp(6px, 0.417vw, 8px);
  box-shadow: 0 clamp(14px, 1.458vw, 28px) clamp(30px, 3.125vw, 60px)
    rgba(0, 0, 0, 0.45);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.digital-service__shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .digital-service__shot:hover {
    transform: translateY(clamp(-8px, -0.417vw, -4px));
    box-shadow: 0 clamp(20px, 2.083vw, 40px) clamp(40px, 4.167vw, 80px)
      rgba(0, 0, 0, 0.55);
  }
}
/* 右：テキストブロック（Figma: x=1200 / w=720） */
.digital-service__body {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  padding-right: clamp(20px, 3.125vw, 60px);
}

.digital-service__card-label {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  letter-spacing: 0.1em;
}

.digital-service__card-title {
  margin-top: clamp(6px, 0.625vw, 12px);
  font-size: clamp(22px, 2.5vw, 48px);
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.digital-service__more {
  display: flex;
  align-items: center;
  column-gap: clamp(10px, 0.833vw, 16px);
  width: min(320px, 100%);
  margin-top: clamp(24px, 2.5vw, 48px);
  padding-top: clamp(14px, 1.25vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  color: inherit;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .digital-service__more:hover {
    border-top-color: #fff;
  }
  .digital-service__more:hover .digital-service__more-arrow {
    background: var(--color-brand);
    color: #fff;
  }
}
.digital-service__more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.digital-service__more-en {
  margin-left: auto;
  font-family: "Roboto", sans-serif;
  font-size: clamp(11px, 0.729vw, 14px);
}

.digital-service__more-arrow {
  display: grid;
  width: clamp(28px, 2.083vw, 40px);
  height: clamp(28px, 2.083vw, 40px);
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-brand);
  font-family: "Roboto", sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ==========================================================================
   MQはファイル末尾（ガイドライン5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .digital-hero__inner,
  .digital-about__inner,
  .digital-service__inner {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .digital-hero__inner,
  .digital-about__inner,
  .digital-service__inner {
    width: 90%;
  }
  .digital-hero__heading {
    margin-left: 0;
  }
  .digital-about__media,
  .digital-about__body {
    grid-column: 1/-1;
  }
  .digital-about__body {
    margin-top: clamp(44px, 5.729vw, 64px);
  }
  .digital-service__stage {
    aspect-ratio: auto;
    min-height: 0;
    padding-block: clamp(44px, 6.25vw, 80px);
  }
  .digital-service__stage-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 3.906vw, 40px);
    width: 90%;
    margin-inline: auto;
  }
  .digital-service__shot,
  .digital-service__body {
    grid-column: 1;
  }
  .digital-service__body {
    padding-right: 0;
  }
}
@media (max-width: 767px) {
  .digital-hero__inner,
  .digital-about__inner,
  .digital-service__inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .digital-hero {
    min-height: min(560px, 130.233vw);
  }
  .digital-about {
    padding-block: var(--section-space-md);
  }
  .digital-service__stage-inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
}
/* ==========================================================================
   デジタルソリューション部 旧サービスページ digital-service1.html
   Figma: 372:3078（1920×9104）／原稿: LP_デジタルソリューション事業部（6/22支給）
   下層で唯一のライト基調ページ（Figma準拠）
   ========================================================================== */
.dservice-page {
  overflow-x: clip;
  color: #1a2333;
  background: #fff;
  font-family: "Noto Sans JP", "Zen Kaku Gothic New", sans-serif;
}

/* 見出し共通 */
.dservice-heading {
  text-align: center;
}

.dservice-heading__label {
  color: var(--color-brand);
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.dservice-heading__title {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: clamp(22px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 1.5;
}

.dservice-heading__lead {
  margin-top: clamp(12px, 1.042vw, 20px);
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 2;
}

/* Hero */
.dservice-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: #fff;
}

.dservice-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("../images/dservice/dservice-hero-art.webp");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 116%;
  content: "";
  pointer-events: none;
}

.dservice-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    100deg,
    #fff 0%,
    rgba(255, 255, 255, 0.96) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 72%
  );
  content: "";
  pointer-events: none;
}

.dservice-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(16px, 1.667vw, 32px);
  width: min(75vw, 1440px);
  min-height: clamp(520px, 44vw, 860px);
  margin-inline: auto;
  padding-block: clamp(48px, 5.208vw, 100px);
}

.dservice-hero__body {
  grid-column: 1 / span 6;
}

.dservice-hero__badges {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(14px, 1.25vw, 24px);
  row-gap: clamp(6px, 0.417vw, 8px);
  color: #05f;
  font-size: clamp(12px, 0.938vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dservice-hero__badge {
  position: relative;
  padding-left: clamp(24px, 1.771vw, 34px);
}

.dservice-hero__badge::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: clamp(17px, 1.302vw, 25px);
  height: clamp(17px, 1.302vw, 25px);
  border-radius: 50%;
  background: #05f;
  color: #fff;
  font-size: 0.66em;
  font-weight: 700;
  line-height: 1;
  content: "\2713";
  transform: translateY(-50%);
}

.dservice-hero__title {
  margin-top: clamp(18px, 1.667vw, 32px);
  color: #0a1a33;
  font-size: clamp(30px, 3.229vw, 62px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.01em;
}

.dservice-hero__title em {
  color: #05f;
  font-style: normal;
}

.dservice-hero__title-blue {
  color: #05f;
  font-weight: 700;
}

.dservice-hero__text {
  margin-top: clamp(16px, 1.458vw, 28px);
  color: #38445a;
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
}

.dservice-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.042vw, 20px);
  margin-top: clamp(24px, 2.083vw, 40px);
}

.dservice-hero__cta,
.dservice-hero__sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 3.333vw, 64px);
  padding-inline: clamp(24px, 2.083vw, 40px);
  border-radius: 999px;
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 700;
  text-decoration: none;
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

.dservice-hero__cta {
  column-gap: clamp(10px, 0.833vw, 16px);
  background: #05f;
  color: #fff;
  box-shadow: 0 clamp(6px, 0.625vw, 12px) clamp(16px, 1.667vw, 32px)
    rgba(0, 85, 255, 0.32);
}

.dservice-hero__cta-arrow,
.dservice-hero__sub-arrow {
  display: grid;
  place-items: center;
  width: clamp(24px, 1.667vw, 32px);
  height: clamp(24px, 1.667vw, 32px);
  margin-left: clamp(8px, 0.625vw, 12px);
  border-radius: 50%;
  font-family: "Roboto", sans-serif;
  line-height: 1;
}

.dservice-hero__cta-arrow {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.dservice-hero__sub {
  border: 1px solid #b9ccff;
  color: #05f;
  background: rgba(255, 255, 255, 0.9);
}

.dservice-hero__sub-arrow {
  border: 1px solid #b9ccff;
  color: #05f;
  font-size: 0.8em;
}

@media (hover: hover) and (pointer: fine) {
  .dservice-hero__cta:hover {
    opacity: 0.88;
  }
  .dservice-hero__sub:hover {
    background: #05f;
    border-color: #05f;
    color: #fff;
  }
  .dservice-hero__sub:hover .dservice-hero__sub-arrow {
    border-color: #fff;
    color: #fff;
  }
}
.dservice-hero__visual {
  grid-column: 7 / span 6;
}

.dservice-hero__laptop {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(
    0 clamp(16px, 1.667vw, 32px) clamp(24px, 2.5vw, 48px) rgba(0, 60, 180, 0.22)
  );
}

@media (max-width: 1023px) {
  .dservice-hero::before {
    background-position: right -18% top;
    background-size: 190% auto;
  }
  .dservice-hero::after {
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0.9) 42%,
      rgba(255, 255, 255, 0.35) 100%
    );
  }
}

/* レーダーチャートカード */
.dservice-chart {
  padding: clamp(20px, 2.083vw, 40px);
  border-radius: clamp(12px, 1.042vw, 20px);
  background: #fff;
  box-shadow: 0 clamp(12px, 1.25vw, 24px) clamp(30px, 3.125vw, 60px)
    rgba(10, 31, 68, 0.12);
  text-align: center;
}

.dservice-chart__title {
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
}

.dservice-chart__svg {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: clamp(8px, 0.833vw, 16px) auto 0;
}

.dservice-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.042vw, 20px);
  font-size: clamp(11px, 0.625vw, 12px);
}

.dservice-chart__legend-item {
  position: relative;
  padding-left: clamp(16px, 1.042vw, 20px);
}

.dservice-chart__legend-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(10px, 0.729vw, 14px);
  height: clamp(10px, 0.729vw, 14px);
  content: "";
  transform: translateY(-50%);
}

.dservice-chart__legend-item--before::before {
  background: rgba(240, 138, 66, 0.45);
}

.dservice-chart__legend-item--after::before {
  background: rgba(0, 64, 152, 0.45);
}

.dservice-chart__note {
  margin-top: clamp(8px, 0.625vw, 12px);
  color: #6a7688;
  font-size: clamp(10px, 0.625vw, 12px);
}

/* ISSUE（青の全幅バンド／Figma準拠） */
.dservice-issue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 7.292vw, 140px);
  background: linear-gradient(135deg, #2f6bd9 0%, #1d4fb0 55%, #2f6bd9 100%);
  color: #fff;
}

.dservice-issue::before,
.dservice-issue::after {
  position: absolute;
  z-index: -1;
  width: clamp(280px, 31.25vw, 600px);
  aspect-ratio: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.dservice-issue::before {
  top: clamp(-140px, -10.417vw, -200px);
  left: clamp(-140px, -10.417vw, -200px);
}

.dservice-issue::after {
  right: clamp(-140px, -10.417vw, -200px);
  bottom: clamp(-140px, -10.417vw, -200px);
}

.dservice-issue__watermark {
  position: absolute;
  top: clamp(8px, 0.833vw, 16px);
  left: 50%;
  color: rgba(255, 255, 255, 0.16);
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 4.167vw, 80px);
  font-weight: 500;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
  pointer-events: none;
}

.dservice-issue__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.dservice-issue__title {
  font-size: clamp(22px, 1.875vw, 36px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.dservice-issue__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 3.333vw, 64px);
}

.dservice-issue__item {
  padding-inline: clamp(16px, 2.083vw, 40px);
  text-align: center;
}

.dservice-issue__item + .dservice-issue__item {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.dservice-issue__item-icon {
  display: grid;
  place-items: center;
  height: clamp(96px, 8.125vw, 156px);
  margin-inline: auto;
}

.dservice-issue__item-icon img {
  width: auto;
  max-width: clamp(110px, 9.479vw, 182px);
  max-height: 100%;
}

.dservice-issue__item-title {
  margin-top: clamp(16px, 1.667vw, 32px);
  font-size: clamp(17px, 1.146vw, 22px);
  font-weight: 700;
}

.dservice-issue__item-text {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: clamp(13px, 0.729vw, 14px);
  line-height: 2;
}

.dservice-issue__conclusion {
  margin-top: clamp(36px, 3.75vw, 72px);
  font-size: clamp(17px, 1.354vw, 26px);
  font-weight: 700;
  text-align: center;
}

/* 解決宣言（白地） */
.dservice-resolve {
  padding-block: clamp(48px, 5.208vw, 100px);
  background: #fff;
}

.dservice-resolve__text {
  width: min(75vw, 1440px);
  margin-inline: auto;
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

.dservice-resolve__text em {
  color: #2563c4;
  font-style: normal;
}

/* STEP（全幅リボン＋番号カード／Figma準拠） */
.dservice-step {
  padding-bottom: clamp(56px, 6.25vw, 120px);
  background: #fff;
}

.dservice-step__ribbon {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(120px, 14.01vw, 269px);
  background: linear-gradient(
    90deg,
    rgba(47, 107, 217, 0.15) 0%,
    #2f6bd9 30%,
    #2f6bd9 70%,
    rgba(47, 107, 217, 0.15) 100%
  );
}

.dservice-step__badge {
  position: absolute;
  top: 50%;
  left: clamp(4%, 9vw, 13%);
  display: grid;
  place-items: center;
  width: clamp(96px, 7.292vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #6f9be6 0%, #3f6fc9 100%);
  color: #fff;
  font-size: clamp(11px, 0.833vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transform: translateY(-50%) rotate(-12deg);
  box-shadow: 0 clamp(6px, 0.625vw, 12px) clamp(14px, 1.25vw, 24px)
    rgba(13, 42, 96, 0.3);
}

.dservice-step__title {
  padding-left: clamp(120px, 12vw, 200px);
  color: #fff;
  font-size: clamp(22px, 2.083vw, 40px);
  font-weight: 700;
  text-align: center;
}

.dservice-step__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.dservice-step__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  column-gap: clamp(12px, 1.25vw, 24px);
  margin-top: clamp(40px, 4.167vw, 80px);
}

.dservice-step__card {
  position: relative;
  padding: clamp(32px, 3.333vw, 64px) clamp(20px, 2.5vw, 48px)
    clamp(24px, 2.5vw, 48px);
  border-radius: clamp(12px, 1.042vw, 20px);
  background: linear-gradient(180deg, #f2f7ff 0%, #fff 40%);
  box-shadow: 0 clamp(10px, 1.042vw, 20px) clamp(24px, 2.5vw, 48px)
    rgba(13, 42, 96, 0.12);
}

.dservice-step__num {
  position: absolute;
  top: clamp(-18px, -1.25vw, -24px);
  left: clamp(16px, 1.667vw, 32px);
  display: grid;
  place-items: center;
  width: clamp(40px, 2.917vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2f6bd9;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 700;
}

.dservice-step__illust {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin-inline: auto;
}

.dservice-step__card-title {
  margin-top: clamp(14px, 1.25vw, 24px);
  color: #2563c4;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}

.dservice-step__card-text {
  margin-top: clamp(12px, 1.042vw, 20px);
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 2;
}

.dservice-step__chevron {
  align-self: center;
  width: clamp(40px, 4.167vw, 80px);
  list-style: none;
}

.dservice-step__chevron img {
  display: block;
  width: 100%;
  height: auto;
}

/* SOLUTION */
.dservice-solution {
  padding-block: clamp(56px, 6.25vw, 120px);
  background: #fff;
}

.dservice-solution__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.dservice-solution__consul {
  margin-top: clamp(28px, 2.917vw, 56px);
  padding: clamp(24px, 2.5vw, 48px) clamp(20px, 2.083vw, 40px);
  border-radius: clamp(8px, 0.625vw, 12px);
  background: linear-gradient(90deg, #0a3f8f 0%, #3f7bd9 100%);
  color: #fff;
  text-align: center;
}

.dservice-solution__consul-title {
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 700;
}

.dservice-solution__consul-text {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 2;
}

.dservice-solution__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 24px);
  margin-top: clamp(20px, 2.083vw, 40px);
}

.dservice-solution__card {
  padding: clamp(20px, 2.083vw, 40px) clamp(14px, 1.25vw, 24px);
  border: 1px solid #dde4ef;
  border-radius: clamp(8px, 0.625vw, 12px);
  background: #fff;
  text-align: center;
}

.dservice-solution__card-logo {
  display: grid;
  place-items: center;
  min-height: clamp(48px, 3.646vw, 70px);
}

.dservice-solution__card-logo img {
  width: auto;
  max-width: 80%;
  max-height: clamp(40px, 3.125vw, 60px);
}

.dservice-solution__card-title {
  margin-top: clamp(12px, 1.042vw, 20px);
  color: var(--color-brand);
  font-size: clamp(15px, 0.938vw, 18px);
  font-weight: 700;
}

.dservice-solution__card-text {
  margin-top: clamp(6px, 0.625vw, 12px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.8;
}

/* PARTNER */
.dservice-partner {
  padding-block: clamp(56px, 6.25vw, 120px);
  background: #f4f7fb;
}

.dservice-partner__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.dservice-partner__group-label {
  position: relative;
  margin-top: clamp(28px, 2.917vw, 56px);
  color: var(--color-brand);
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 700;
  text-align: center;
}

.dservice-partner__group-label::before,
.dservice-partner__group-label::after {
  position: absolute;
  top: 50%;
  width: calc(50% - clamp(80px, 6.25vw, 120px));
  height: 1px;
  background: #c3cddd;
  content: "";
}

.dservice-partner__group-label::before {
  left: 0;
}

.dservice-partner__group-label::after {
  right: 0;
}

.dservice-partner__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.25vw, 24px);
  margin-top: clamp(20px, 2.083vw, 40px);
}

.dservice-partner__list--other {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dservice-partner__card {
  padding: clamp(20px, 1.875vw, 36px) clamp(16px, 1.667vw, 32px);
  border: 1px solid #dde4ef;
  border-radius: clamp(8px, 0.625vw, 12px);
  background: #fff;
}

.dservice-partner__card-title {
  color: var(--color-brand);
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 700;
}

.dservice-partner__card-text {
  margin-top: clamp(8px, 0.625vw, 12px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.9;
}

/* パートナー企業ロゴ帯 */
.dservice-partner__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.604vw, 50px);
  margin-top: clamp(32px, 3.333vw, 64px);
  padding: clamp(20px, 2.083vw, 40px);
  border-radius: clamp(8px, 0.625vw, 12px);
  background: #fff;
  list-style: none;
}

.dservice-partner__logos img {
  width: auto;
  max-height: clamp(28px, 2.396vw, 46px);
}

/* CTA（Figma準拠） */
.dservice-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 6.25vw, 120px);
  background: linear-gradient(135deg, #2f6bd9 0%, #1d4fb0 55%, #2f6bd9 100%);
  color: #fff;
}

.dservice-cta::before {
  position: absolute;
  z-index: -1;
  top: clamp(-160px, -12vw, -230px);
  right: clamp(-160px, -12vw, -230px);
  width: clamp(320px, 36.458vw, 700px);
  aspect-ratio: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.dservice-cta__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
  text-align: center;
}

.dservice-cta__title {
  font-size: clamp(20px, 1.667vw, 32px);
  font-weight: 700;
}

.dservice-cta__card {
  width: min(100%, 900px);
  margin: clamp(24px, 2.5vw, 48px) auto 0;
  padding: clamp(24px, 2.604vw, 50px) clamp(20px, 5.208vw, 100px);
  border-radius: clamp(16px, 1.563vw, 30px);
  background: #fff;
  color: #1a2333;
  text-align: left;
}

.dservice-cta__card-title {
  font-size: clamp(20px, 1.563vw, 30px);
  font-weight: 700;
  text-align: center;
}

.dservice-cta__card-lead {
  margin-top: clamp(10px, 0.833vw, 16px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 2;
  text-align: center;
}

/* フォーム（送信は未接続） */
.dservice-form {
  margin-top: clamp(24px, 2.083vw, 40px);
}

.dservice-form__field {
  margin-top: clamp(16px, 1.354vw, 26px);
}

.dservice-form__field:first-child {
  margin-top: 0;
}

.dservice-form__label {
  display: block;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 700;
}

.dservice-form__required {
  margin-left: 0.3em;
  color: #d64545;
}

.dservice-form__input,
.dservice-form__textarea {
  width: 100%;
  margin-top: clamp(6px, 0.417vw, 8px);
  padding: clamp(10px, 0.833vw, 16px);
  border: 1px solid #c3cddd;
  border-radius: clamp(4px, 0.313vw, 6px);
  background: #f8fafd;
  font-size: clamp(14px, 0.833vw, 16px);
  font-family: inherit;
}

.dservice-form__input::placeholder,
.dservice-form__textarea::placeholder {
  color: #9aa6b8;
}

.dservice-form__input:focus-visible,
.dservice-form__textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.dservice-form__textarea {
  resize: vertical;
}

.dservice-form__agree {
  margin-top: clamp(20px, 1.875vw, 36px);
  text-align: center;
}

.dservice-form__agree-label {
  display: inline-flex;
  align-items: center;
  column-gap: clamp(8px, 0.625vw, 12px);
  font-size: clamp(12px, 0.729vw, 14px);
  cursor: pointer;
}

.dservice-form__checkbox {
  width: clamp(16px, 1.042vw, 20px);
  height: clamp(16px, 1.042vw, 20px);
  accent-color: #05f;
}

.dservice-form__submit-wrap {
  margin-top: clamp(16px, 1.354vw, 26px);
  text-align: center;
}

.dservice-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 3.125vw, 60px);
  padding-inline: clamp(32px, 3.125vw, 60px);
  border: 0;
  border-radius: clamp(6px, 0.417vw, 8px);
  background: #05f;
  color: #fff;
  font-size: clamp(14px, 0.938vw, 18px);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .dservice-form__submit:hover {
    opacity: 0.85;
  }
}
.dservice-form__note {
  margin-top: clamp(10px, 0.833vw, 16px);
  color: #6a7688;
  font-size: clamp(11px, 0.625vw, 12px);
  text-align: center;
}

.dservice-form__note a {
  color: var(--color-brand);
}

/* ==========================================================================
   MQはファイル末尾（ガイドライン5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dservice-hero__inner,
  .dservice-issue__inner,
  .dservice-step__inner,
  .dservice-solution__inner,
  .dservice-partner__inner,
  .dservice-cta__inner,
  .dservice-resolve__text {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .dservice-hero__inner,
  .dservice-issue__inner,
  .dservice-step__inner,
  .dservice-solution__inner,
  .dservice-partner__inner,
  .dservice-cta__inner,
  .dservice-resolve__text {
    width: 90%;
  }
  .dservice-hero__body,
  .dservice-hero__visual {
    grid-column: 1/-1;
  }
  .dservice-hero__visual {
    margin-top: clamp(32px, 4.167vw, 48px);
  }
  .dservice-issue__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .dservice-issue__item + .dservice-issue__item {
    margin-top: clamp(28px, 3.646vw, 40px);
    padding-top: clamp(28px, 3.646vw, 40px);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    border-left: 0;
  }
  .dservice-step__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(36px, 4.688vw, 52px);
  }
  .dservice-step__chevron {
    justify-self: center;
    transform: rotate(90deg);
  }
  .dservice-step__badge {
    top: auto;
    bottom: clamp(-40px, -4.5vw, -52px);
    left: clamp(16px, 4vw, 40px);
    transform: rotate(-12deg);
  }
  .dservice-step__title {
    padding-left: 0;
  }
  .dservice-solution__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dservice-partner__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .dservice-hero__inner,
  .dservice-issue__inner,
  .dservice-step__inner,
  .dservice-solution__inner,
  .dservice-partner__inner,
  .dservice-cta__inner,
  .dservice-resolve__text {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .dservice-hero__actions {
    flex-direction: column;
  }
  .dservice-hero__cta,
  .dservice-hero__sub {
    width: 100%;
  }
  .dservice-solution__list,
  .dservice-partner__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .dservice-cta__card {
    padding-inline: min(20px, 4.651vw);
  }
  .dservice-partner__group-label::before,
  .dservice-partner__group-label::after {
    width: calc(50% - min(96px, 22.326vw));
  }
}
/* ==========================================================================
   お問い合わせ contact.html
   Figma: CONTACT 1070:2227（1920×4114）
   構成: ヒーロー（黒＋ベクター装飾）→ 電話CTA → 白カードのフォーム
   ========================================================================== */
.contact-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(320px, 41.667vw, 800px);
  background: linear-gradient(120deg, #00050f 0%, #001430 55%, #00050f 100%);
}

/* カンプの Vector（997×1080）を近似したシェブロン装飾 */
.contact-hero__deco {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: clamp(320px, 51.927vw, 997px);
  height: 100%;
  background:
    linear-gradient(
      115deg,
      transparent 46%,
      rgba(0, 64, 152, 0.55) 46%,
      rgba(0, 64, 152, 0.55) 62%,
      transparent 62%
    ),
    linear-gradient(
      115deg,
      transparent 22%,
      rgba(255, 255, 255, 0.06) 22%,
      rgba(255, 255, 255, 0.06) 38%,
      transparent 38%
    );
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  z-index: 1;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

/* カンプのX=1128は1440コンテナ内の約62% */
.contact-hero__heading {
  margin-left: 62%;
}

.contact-hero__label {
  font-size: clamp(16px, 1.875vw, 36px);
}

.contact-hero__title {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   電話CTA
   -------------------------------------------------------------------------- */
.contact-tel {
  padding-block: clamp(48px, 5.208vw, 100px) 0;
}

.contact-tel__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
  text-align: center;
}

.contact-tel__number {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(8px, 0.833vw, 16px);
}

.contact-tel__icon {
  display: grid;
  width: clamp(36px, 3.125vw, 60px);
  height: clamp(36px, 3.125vw, 60px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.contact-tel__icon::before {
  width: 42%;
  height: 42%;
  background: currentcolor;
  content: "";
  /* 受話器のシルエット。正式なSVG素材の受領後に差し替え */
  clip-path: polygon(
    18% 0%,
    42% 0%,
    50% 26%,
    36% 38%,
    62% 64%,
    74% 50%,
    100% 58%,
    100% 82%,
    88% 100%,
    60% 96%,
    24% 68%,
    4% 30%
  );
}

.contact-tel__link {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(24px, 2.083vw, 40px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.contact-tel__note {
  margin-top: clamp(8px, 0.625vw, 12px);
  font-size: clamp(12px, 0.729vw, 14px);
}

/* --------------------------------------------------------------------------
   フォームカード（白）
   -------------------------------------------------------------------------- */
.contact-form-section {
  padding-block: clamp(40px, 4.167vw, 80px) var(--section-space-lg);
}

.contact-form-section__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.contact-form-section__card {
  padding: clamp(28px, 2.604vw, 50px) clamp(20px, 2.604vw, 50px);
  border-radius: 6px;
  background: #fff;
  color: var(--color-ink);
}

.contact-form-section__heading {
  text-align: center;
}

.contact-form-section__title-en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-form-section__title-ja {
  margin-top: clamp(4px, 0.417vw, 8px);
  font-size: clamp(12px, 0.729vw, 14px);
}

.contact-form-section__description {
  margin-top: clamp(20px, 1.667vw, 32px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.9;
  text-align: center;
}

.contact-form {
  margin-top: clamp(28px, 2.604vw, 50px);
}

.contact-form__row {
  margin-top: clamp(16px, 1.25vw, 24px);
  border: 0;
  padding: 0;
}

.contact-form__row:first-child {
  margin-top: 0;
}

.contact-form__label {
  display: block;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 500;
}

.contact-form__required {
  margin-left: 2px;
  color: #d0021b;
}

.contact-form__input,
.contact-form__textarea {
  display: block;
  width: 100%;
  margin-top: clamp(6px, 0.521vw, 10px);
  padding: clamp(10px, 0.833vw, 16px) clamp(12px, 1.042vw, 20px);
  border: 1px solid #d5dae2;
  border-radius: 4px;
  background: #fafbfc;
  color: var(--color-ink);
  font-family: inherit;
  font-size: clamp(13px, 0.833vw, 16px);
  line-height: 1.6;
}

.contact-form__textarea {
  min-height: clamp(180px, 15.625vw, 300px);
  resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #9aa4b2;
}

/* 選択肢（お問い合わせ / 資料請求） */
.contact-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.042vw, 20px);
  margin-top: clamp(6px, 0.521vw, 10px);
}

.contact-form__choice,
.contact-form__agree-label {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  column-gap: 8px;
  font-size: clamp(13px, 0.833vw, 16px);
}

.contact-form__choice input,
.contact-form__agree-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__choice-mark {
  display: grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  border: 1px solid #9aa4b2;
  border-radius: 50%;
}

.contact-form__choice input:checked + .contact-form__choice-mark::before {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand);
  content: "";
}

.contact-form__choice input:focus-visible + .contact-form__choice-mark,
.contact-form__agree-label input:focus-visible + .contact-form__agree-mark {
  outline: 3px solid #ffcd00;
  outline-offset: 3px;
}

/* 同意チェック */
.contact-form__agree {
  margin-top: clamp(24px, 2.083vw, 40px);
  text-align: center;
}

.contact-form__agree-mark {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border: 1px solid #9aa4b2;
  border-radius: 2px;
}

.contact-form__agree-label input:checked + .contact-form__agree-mark::before {
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  content: "";
  transform: rotate(-45deg) translate(1px, -2px);
}

.contact-form__agree-link {
  text-decoration: underline;
}

/* 送信 */
.contact-form__actions {
  margin-top: clamp(16px, 1.25vw, 24px);
  text-align: center;
}

.contact-form__submit {
  min-width: clamp(180px, 10.417vw, 200px);
  min-height: 44px;
  padding: clamp(10px, 0.833vw, 14px) clamp(20px, 1.667vw, 32px);
  border: 1px solid var(--color-brand);
  border-radius: 3px;
  background: var(--color-brand);
  color: #fff;
  font-family: inherit;
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 500;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__submit:hover {
    background: #fff;
    color: var(--color-brand);
  }
}
.contact-form__submit:focus-visible {
  background: #fff;
  color: var(--color-brand);
}

/* 送信フォーム準備中の注記 */
.contact-form__note {
  margin-top: clamp(12px, 1.042vw, 20px);
  color: #6a7688;
  font-size: clamp(11px, 0.625vw, 12px);
  text-align: center;
}

.contact-form__note a {
  color: var(--color-brand);
}

.contact-form__submit[aria-disabled="true"] {
  cursor: default;
}

/* ==========================================================================
   メディアクエリはファイル末尾にまとめる（ガイドライン 5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .contact-hero__inner,
  .contact-tel__inner,
  .contact-form-section__inner {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .contact-hero__inner,
  .contact-tel__inner,
  .contact-form-section__inner {
    width: 90%;
  }
  .contact-hero__heading {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .contact-hero__inner,
  .contact-tel__inner,
  .contact-form-section__inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .contact-form-section {
    padding-block: min(32px, 7.442vw) var(--section-space-md);
  }
  .contact-form-section__description br {
    display: none;
  }
}
/* ==========================================================================
   個人情報の取り扱い privacy.html（仮ページ・ライス作成）
   ========================================================================== */
.privacy-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

.privacy {
  padding-block: clamp(64px, 7.292vw, 140px);
}

/* 767以下はヘッダー（高さ70px）が重なる。このページはヒーローを持たないので、
   ヘッダーぶんを上の余白で確保しないと見出しが潜る。
   重ねる前と同じ見た目（ヘッダー70 ＋ 余白64 = 134）になる値。 */
@media (max-width: 767px) {
  .privacy {
    padding-top: calc(70px + clamp(64px, 7.292vw, 140px));
  }
}

.privacy__inner {
  width: min(75vw, 960px);
  margin-inline: auto;
}

.privacy__label {
  font-size: clamp(14px, 0.938vw, 18px);
}

.privacy__title {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(34px, 3.333vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.privacy__lead {
  margin-top: clamp(28px, 2.917vw, 56px);
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 2;
}

.privacy__section {
  margin-top: clamp(32px, 3.333vw, 64px);
}

.privacy__section h2 {
  padding-bottom: clamp(10px, 0.833vw, 16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: 500;
}

.privacy__section p {
  margin-top: clamp(12px, 1.042vw, 20px);
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 2;
}

.privacy__date {
  margin-top: clamp(40px, 4.167vw, 80px);
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(12px, 0.729vw, 14px);
  text-align: right;
}

/* ==========================================================================
   MQはファイル末尾（ガイドライン5-4）
   ========================================================================== */
@media (max-width: 1023px) {
  .privacy__inner {
    width: 90%;
  }
}
@media (max-width: 767px) {
  .privacy__inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
}
/* ==========================================================================
   会社案内 company.html
   Figma: 会社案内 655:1305（1920×12673）
   基準: docs/implementation-guidelines.md
   - 下層ページはTOPと同じ黒基調（#000 / 白文字）
   - 幅はセクションごとの __inner。カンプ実測1491pxだが、規約の既定値
     min(75vw, 1440px) に寄せる（4-1）
   - ベース＝PC寄り、末尾の max-width MQ で SP を上書き（5-4）
   ========================================================================== */
.company-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

/* --------------------------------------------------------------------------
   セクション見出し（ラベル＋英字大見出し）
   Figma: ラベル24px / タイトル120px @1920
   -------------------------------------------------------------------------- */
.company-heading__label {
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 300;
}

.company-heading__title {
  margin-top: clamp(18px, 2.083vw, 40px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(44px, 6.25vw, 120px); /* 1920カンプ120px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.company-heading--right {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Hero（.l-shell の外＝1920超でも全幅）
   Figma: 1920×1080 の全画面写真。見出しは x=1110 / y=432 付近に重なる
   -------------------------------------------------------------------------- */
.company-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(420px, 56.25vw, 1080px); /* 1920カンプ1080px */
}

.company-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* 覆い。写真の上にブランドカラーの濃紺を重ねる */
.company-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(0, 12, 32, 0.88) 0%,
    rgba(0, 30, 74, 0.72) 45%,
    rgba(0, 8, 24, 0.9) 100%
  );
  pointer-events: none;
}

/* 背面のアウトライン文字（Company Information） */
.company-hero__wordmark {
  position: absolute;
  z-index: 0;
  bottom: clamp(8px, 1.042vw, 20px);
  left: clamp(-8px, -0.417vw, 0px);
  margin: 0;
  color: transparent;
  font-family: "Roboto", sans-serif;
  font-size: clamp(56px, 8.333vw, 160px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.company-hero__inner {
  position: relative;
  z-index: 1;
  width: min(75vw, 1440px);
  margin-inline: auto;
}

/* カンプのX=1110は1440コンテナ内の約60% */
.company-hero__heading {
  margin-left: 60%;
}

.company-hero__label {
  font-size: clamp(16px, 1.875vw, 36px);
  font-weight: 400;
}

.company-hero__title {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(40px, 5vw, 96px); /* 1920カンプ96px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   共通：セクション外枠
   -------------------------------------------------------------------------- */
.company-about,
.company-outline,
.company-history,
.company-philosophy,
.company-location {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-space-lg);
}

.company-about__inner,
.company-outline__inner,
.company-history__inner,
.company-philosophy__inner,
.company-location__inner {
  width: min(75vw, 1440px);
  max-width: none;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   About（写真2枚＋見出し・本文）
   Figma: 写真は左（x=443 / 243）、本文は右（x=924〜）
   -------------------------------------------------------------------------- */
.company-about__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}

.company-about__media {
  position: relative;
  grid-column: 1 / span 5;
}

.company-about__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.company-about__image--main {
  width: 72%;
  margin-left: 22%;
  aspect-ratio: 281/387;
}

/* 添え写真。メイン写真に重ねる（TOPの __accent と同じ考え方） */
.company-about__image--sub {
  position: absolute;
  bottom: clamp(-40px, -3.125vw, -60px);
  left: 0;
  width: 40%;
  aspect-ratio: 185/255;
}

.company-about__body {
  grid-column: 7 / span 6;
}

.company-about__title {
  font-size: clamp(24px, 2.5vw, 48px); /* 1920カンプ48px */
  font-weight: 500;
  line-height: 1.6;
}

.company-about__text {
  margin-top: clamp(20px, 1.667vw, 32px);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
}

/* --------------------------------------------------------------------------
   ページ内アンカー（会社概要 / 沿革 / 経営理念 / 拠点）
   Figma: 354×60 のボタンが4つ横並び（y=1899）
   -------------------------------------------------------------------------- */
.company-anchor {
  width: min(75vw, 1440px);
  margin-inline: auto;
  margin-top: clamp(48px, 5.208vw, 100px);
}

.company-anchor__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(12px, 0.938vw, 18px);
}

.company-anchor__link {
  position: relative;
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(12px, 1.25vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: clamp(13px, 0.833vw, 16px);
  text-decoration: none;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.company-anchor__arrow {
  position: absolute;
  right: clamp(12px, 1.042vw, 20px);
  width: 8px;
  height: 8px;
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .company-anchor__link:hover {
    border-color: #fff;
    background: #fff;
    color: #004098;
  }
}
.company-anchor__link:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #004098;
}

/* --------------------------------------------------------------------------
   Outline（会社概要）
   -------------------------------------------------------------------------- */
.company-outline__list {
  margin-top: clamp(40px, 4.167vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.company-outline__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  padding-block: clamp(14px, 1.146vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.company-outline__term {
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 400;
  line-height: 2;
}

.company-outline__desc {
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 2;
}

.company-outline__sublist li {
  line-height: 2;
}

/* --------------------------------------------------------------------------
   History（沿革）
   Figma: 年月はピル型。最新行のみブランドカラー塗り
   -------------------------------------------------------------------------- */
.company-history__list {
  margin-top: clamp(40px, 4.167vw, 80px);
}

.company-history__item {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  column-gap: clamp(16px, 1.667vw, 32px);
  align-items: start;
  padding-block: clamp(12px, 1.042vw, 20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.company-history__date {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(12px, 0.729vw, 14px);
  font-weight: 500;
  white-space: nowrap;
}

.company-history__item--current .company-history__date {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.company-history__text {
  padding-top: clamp(4px, 0.417vw, 8px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   Philosophy（経営理念）
   -------------------------------------------------------------------------- */
.company-philosophy__text {
  margin-top: clamp(40px, 4.167vw, 80px);
  font-size: clamp(14px, 1.042vw, 20px);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   Location（拠点）
   Figma: 1920×1080 の全画面ビジュアル×4。本文は右寄せ、右上にカウンター
   -------------------------------------------------------------------------- */
.company-location {
  padding-bottom: 0;
}

.company-location__item {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(420px, 56.25vw, 1080px);
  margin-top: clamp(48px, 5.208vw, 100px);
  padding-inline: clamp(20px, 4.167vw, 80px);
}

.company-location__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.company-location__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 右側に本文が乗るため、右半分を濃くして可読性を確保する */
  background:
    linear-gradient(
      100deg,
      rgba(0, 12, 32, 0.55) 0%,
      rgba(0, 24, 60, 0.45) 40%,
      rgba(0, 10, 28, 0.78) 100%
    ),
    linear-gradient(0deg, rgba(0, 8, 24, 0.3), rgba(0, 8, 24, 0.3));
  pointer-events: none;
}

.company-location__counter {
  position: absolute;
  top: clamp(20px, 2.083vw, 40px);
  right: clamp(20px, 4.167vw, 80px);
  display: flex;
  align-items: center;
  column-gap: clamp(8px, 0.625vw, 12px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(11px, 0.729vw, 14px);
}

.company-location__counter-bar {
  display: block;
  width: clamp(18px, 1.25vw, 24px);
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}

.company-location__counter-total {
  color: rgba(255, 255, 255, 0.55);
}

/* 本文はカンプ上 x≈755/1200（約63%）から始まる */
.company-location__body {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.company-location__name,
.company-location__address,
.company-location__contact,
.company-location__map {
  margin-left: 52%;
}

.company-location__name {
  font-size: clamp(26px, 2.5vw, 48px);
  font-weight: 400;
  line-height: 1.3;
}

.company-location__address {
  margin-top: clamp(14px, 1.25vw, 24px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 2;
}

.company-location__contact {
  margin-top: clamp(4px, 0.417vw, 8px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 2;
}

/* 拠点ごとのGoogleマップへ遷移（別タブ） */
.company-location__map {
  display: flex;
  align-items: center;
  margin-top: clamp(20px, 1.667vw, 32px);
  padding-top: clamp(12px, 1.042vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  color: inherit;
  font-size: clamp(12px, 0.729vw, 14px);
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .company-location__map:hover {
    border-top-color: #fff;
  }
  .company-location__map:hover .company-location__map-arrow {
    background: var(--color-brand);
    color: #fff;
  }
  .company-location__map:hover .company-location__map-more {
    opacity: 0.75;
  }
}
.company-location__map:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.company-location__map-label {
  position: relative;
  padding-left: clamp(12px, 0.833vw, 16px);
}

.company-location__map-label::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-brand);
  content: "";
  transform: translateY(-50%);
}

.company-location__map-more {
  margin-left: auto;
  font-family: "Roboto", sans-serif;
  font-size: clamp(10px, 0.625vw, 12px);
}

.company-location__map-arrow {
  display: grid;
  width: clamp(28px, 2.083vw, 40px);
  height: clamp(28px, 2.083vw, 40px);
  place-items: center;
  margin-left: clamp(8px, 0.625vw, 12px);
  border-radius: 50%;
  background: #fff;
  color: #004098;
  font-family: "Roboto", sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ==========================================================================
   メディアクエリはファイル末尾にまとめる（ガイドライン 5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .company-hero__inner,
  .company-about__inner,
  .company-anchor,
  .company-outline__inner,
  .company-history__inner,
  .company-philosophy__inner,
  .company-location__inner,
  .company-location__body {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .company-hero__inner,
  .company-about__inner,
  .company-anchor,
  .company-outline__inner,
  .company-history__inner,
  .company-philosophy__inner,
  .company-location__inner,
  .company-location__body {
    width: 90%;
  }
  .company-hero__heading {
    margin-left: 0;
  }
  /* 写真→本文の縦積み。DOM順が読み上げ順のまま */
  .company-about__media,
  .company-about__body {
    grid-column: 1/-1;
  }
  .company-about__body {
    margin-top: clamp(48px, 6.25vw, 72px);
  }
  .company-about__image--main {
    width: 62%;
    margin-left: 30%;
  }
  .company-about__image--sub {
    width: 34%;
    bottom: -24px;
  }
  .company-anchor__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(10px, 1.302vw, 14px);
  }
  .company-location__name,
  .company-location__address,
  .company-location__contact,
  .company-location__map {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .company-hero__inner,
  .company-about__inner,
  .company-anchor,
  .company-outline__inner,
  .company-history__inner,
  .company-philosophy__inner,
  .company-location__inner,
  .company-location__body {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .company-about,
  .company-outline,
  .company-history,
  .company-philosophy,
  .company-location {
    padding-block: var(--section-space-md);
  }
  .company-hero {
    min-height: min(560px, 130.233vw);
    padding-block: min(120px, 27.907vw) min(48px, 11.163vw);
  }
  .company-hero__wordmark {
    font-size: min(64px, 14.884vw);
  }
  .company-outline__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: min(4px, 0.93vw);
  }
  .company-history__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: min(10px, 2.326vw);
  }
  .company-history__date {
    justify-self: start;
    padding-inline: min(16px, 3.721vw);
  }
  .company-location__item {
    min-height: min(520px, 120.93vw);
    padding-inline: 0;
  }
  .company-philosophy__text br {
    display: none;
  }
}
/* ==========================================================================
   メッセージ message.html
   Figma: メッセージ 685:2546（1920×5581）
   構成: ご挨拶（黒基調）→ アーヴァント.に込めた想い（白基調・ノイズ背景）
   ========================================================================== */
.message-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

/* --------------------------------------------------------------------------
   ご挨拶
   Figma: 写真 x=278 / 477×657、本文 x=1020 幅660
   -------------------------------------------------------------------------- */
.message-greeting {
  position: relative;
  isolation: isolate;
  padding-block: clamp(64px, 6.25vw, 120px) var(--section-space-lg);
}

/* 放射光。カンプ Ellipse 7（1149px）を近似 */
.message-greeting__glow {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 54%;
  width: clamp(420px, 59.844vw, 1149px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(0, 64, 152, 0.45) 0%,
    rgba(0, 64, 152, 0.12) 45%,
    rgba(0, 64, 152, 0) 70%
  );
  pointer-events: none;
}

.message-greeting__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.message-greeting__figure {
  grid-column: 1 / span 5;
}

.message-greeting__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 477/657;
  object-fit: cover;
}

.message-greeting__body {
  grid-column: 7 / span 6;
}

.message-heading__label {
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 300;
}

.message-heading__title {
  margin-top: clamp(18px, 2.083vw, 40px);
  font-family: "Roboto", sans-serif;
  font-size: clamp(44px, 6.25vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.message-greeting__lead {
  margin-top: clamp(24px, 2.083vw, 40px);
  font-size: clamp(24px, 2.5vw, 48px); /* 1920カンプ48px */
  font-weight: 500;
  line-height: 1.35;
}

.message-greeting__text {
  margin-top: clamp(20px, 1.667vw, 32px);
  font-size: clamp(14px, 0.938vw, 18px);
  line-height: 2;
}

.message-greeting__signature {
  margin-top: clamp(24px, 2.083vw, 40px);
  font-size: clamp(14px, 0.938vw, 18px);
  font-weight: 500;
  line-height: 2;
  text-align: right;
}

.message-greeting__signature span {
  font-size: clamp(12px, 0.729vw, 14px);
}

/* --------------------------------------------------------------------------
   アーヴァント.に込めた想い（白基調）
   -------------------------------------------------------------------------- */
.message-reason {
  position: relative;
  isolation: isolate;
  color: var(--color-ink);
  /* 正式なノイズ素材の書き出し受領後に background-image を差し替え */
  background: #e7e7e7;
}

.message-reason__inner {
  width: min(75vw, 1440px);
  margin-inline: auto;
}

.message-reason__intro {
  padding-block: clamp(64px, 6.771vw, 130px);
}

.message-reason__heading {
  margin-left: 38%;
}

.message-reason__label {
  color: var(--color-brand);
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.message-reason__title {
  margin-top: clamp(12px, 1.042vw, 20px);
  font-size: clamp(28px, 2.917vw, 56px);
  font-weight: 700;
  line-height: 1.35;
}

.message-reason__nav {
  margin-top: clamp(32px, 3.125vw, 60px);
  margin-left: 14%;
}

.message-reason__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 0.833vw, 16px);
}

.message-reason__nav-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  column-gap: clamp(16px, 1.667vw, 32px);
  padding-inline: clamp(16px, 1.25vw, 24px);
  border: 1px solid rgba(0, 64, 152, 0.45);
  border-radius: 999px;
  color: var(--color-brand);
  font-size: clamp(11px, 0.677vw, 13px);
  text-decoration: none;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

.message-reason__nav-link--current,
.message-reason__nav-link:focus-visible {
  background: var(--color-brand);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .message-reason__nav-link:hover {
    background: var(--color-brand);
    color: #fff;
  }
}
/* 帯（COMPANY NAME / LOGO / COLOR） */
.message-reason__band {
  display: grid;
  min-height: clamp(34px, 2.604vw, 50px);
  place-items: center;
  background: linear-gradient(90deg, #000d1f 0%, #004098 50%, #000d1f 100%);
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: clamp(11px, 0.729vw, 14px);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.message-reason__block + .message-reason__block {
  margin-top: clamp(48px, 5.208vw, 100px);
}

.message-reason__wordmark {
  margin-top: clamp(48px, 5.208vw, 100px);
  color: #b3b3b3;
  font-family: "Roboto", sans-serif;
  font-size: clamp(72px, 12.5vw, 240px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.message-reason__formula {
  margin-top: clamp(12px, 1.042vw, 20px);
  color: var(--color-brand);
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(18px, 1.875vw, 36px);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.message-reason__note {
  margin-top: clamp(32px, 3.125vw, 60px);
  margin-left: 38%;
  padding-bottom: clamp(48px, 5.208vw, 100px);
  font-size: clamp(12px, 0.729vw, 14px);
  line-height: 1.9;
}

.message-reason__words {
  margin-block: clamp(8px, 0.625vw, 12px);
}

.message-reason__note p + p {
  margin-top: clamp(12px, 1.042vw, 20px);
}

/* ==========================================================================
   メディアクエリはファイル末尾にまとめる（ガイドライン 5-4）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .message-greeting__inner,
  .message-reason__inner {
    width: 90%;
  }
}
@media (max-width: 1023px) {
  .message-greeting__inner,
  .message-reason__inner {
    width: 90%;
  }
  /* 写真→本文の縦積み。DOM順が読み上げ順のまま */
  .message-greeting__figure,
  .message-greeting__body {
    grid-column: 1/-1;
  }
  .message-greeting__figure {
    max-width: 420px;
  }
  .message-greeting__body {
    margin-top: clamp(32px, 4.167vw, 48px);
  }
  .message-reason__heading,
  .message-reason__nav,
  .message-reason__note {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .message-greeting__inner,
  .message-reason__inner {
    width: 100%;
    padding-inline: min(20px, 4.651vw);
  }
  .message-greeting {
    padding-block: min(48px, 11.163vw) var(--section-space-md);
  }
  .message-reason__intro {
    padding-block: var(--section-space-md);
  }
  .message-reason__nav-list {
    flex-direction: column;
  }
  .message-reason__nav-link {
    width: 100%;
  }
  .message-reason__wordmark {
    font-size: min(88px, 20.465vw);
  }
  .message-reason__note br {
    display: none;
  }
}
.page-shell__hero {
  display: grid;
  align-content: end;
  min-height: clamp(300px, 40vw, 600px);
  padding-block: var(--section-space-md);
  color: #fff;
  background: linear-gradient(135deg, #0055bb, #001c43);
}

.page-shell__eyebrow {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-shell__title {
  margin-top: 16px;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1.05;
}

.page-shell__section {
  padding-block: var(--section-space-md);
}

.page-shell__section:nth-of-type(even) {
  background: #f3f7fc;
}

.page-shell__section-title {
  color: var(--color-brand);
  font-family: "Roboto", sans-serif;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 500;
}

.page-shell__section-title::after {
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 20px;
  background: currentColor;
  content: "";
}

.page-shell__section p {
  max-width: 62ch;
  margin-top: 28px;
  line-height: 2;
}

.top-page {
  overflow-x: clip;
  color: #fff;
  background: #000;
}

.top-section-heading__label {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 300;
}

.top-section-heading__title {
  margin-top: 36px;
  font-family: "Roboto", sans-serif;
  font-size: clamp(64px, 6.25vw, 120px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.top-section-heading--center {
  text-align: center;
}

.top-section-heading--center .top-section-heading__label {
  color: var(--color-brand);
}

.top-section-heading--center .top-section-heading__title {
  color: transparent;
  background: linear-gradient(90deg, #666, #ccc);
  background-clip: text;
}

.top-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(720px, 69.375vw, 1332px);
  overflow: clip;
  background: #00132d;
}

.top-hero__media,
.top-hero__shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.top-hero__media {
  margin: 0;
}

/* Figma 170:6421: Hero画像全面へブランドブルーのsoft-lightを重ねる */
.top-hero__media::after {
  position: absolute;
  inset: 0;
  background: #004098;
  mix-blend-mode: soft-light;
  pointer-events: none;
  content: "";
}

.top-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-hero__break--sp {
  display: none;
}

.top-hero__shade {
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
}

/* Figma 170:6424: y=834.25 / h=506.641（1920px基準）の下端グラデーション */
.top-hero__shade::after {
  position: absolute;
  top: 62.63138%;
  right: 0;
  left: 0;
  height: 38.03611%;
  background: linear-gradient(to top, #000, transparent);
  content: "";
}

.top-hero__content {
  display: grid;
  min-height: inherit;
  align-items: end;
  padding-bottom: clamp(86px, 8vw, 154px);
}

.top-hero__copy {
  /* テキスト塊は右寄せ50%/720。ただし IRVANT. ロゴ（最大791.274）は必ず1行で収める */
  width: min(50%, 720px);
  min-width: min(100%, clamp(316.51px, 41.2121875vw, 791.274px));
  max-width: 100%;
  margin-left: auto;
}

/* Figma PC/Heading/S: Roboto Medium 28 / lh 36 / tracking 0% */
.top-hero__copy-ja {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.45833vw, 28px);
  line-height: 1.2857142857;
  letter-spacing: 0;
}

.top-hero__copy-en {
  margin-top: 12px;
  font-family: "Roboto", sans-serif;
  font-size: clamp(28px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1;
}

.top-hero__title {
  margin-top: 20px;
  /* IRVANT. はロゴ（Figma 170:6450）。SVG1枚・折り返し禁止・末尾は正方形ドット */
  white-space: nowrap;
}

.top-hero__title-wordmark {
  display: block;
  width: clamp(316.51px, 41.2121875vw, 791.274px);
  max-width: 100%;
  height: auto;
}

.top-hero__title-wordmark-image {
  display: block;
  width: 100%;
  height: auto;
}

.top-about {
  position: relative;
  /* PC放射光がはみ出すため clip しない。横方向は .top-page で clip */
  overflow: visible;
  background: #000;
}

.top-about__deco-arrow,
.top-about__glow,
.top-features__deco-arrow {
  display: none;
}

/* --------------------------------------------------------------------------
 * About放射光のドリフト（デザイナー要望：固定ではなくランダムに動かす）
 * X移動・Y移動・拡縮・明滅を「すべて異なる素数秒」で回す。
 * 例: 61s / 89s / 47s / 43s → 4つの位相が揃うまで約8日かかるため、
 * 見た目にループ感が出ない（リサージュ軌道。参考シェーダーと同じ考え方）。
 * 振れ幅は % 指定なので、clamp() のレスポンシブ縮小に自動で追従する。
 * -------------------------------------------------------------------------- */
.top-about__glow {
  /* 振れ幅はここだけで調整する */
  --glow-drift-x: 8%;
  --glow-drift-y: 6%;
  --glow-scale-min: 0.8;
  --glow-scale-max: 1.2;
  --glow-opacity-min: 0.42;
  animation:
    top-about-glow-x var(--glow-dur-x) ease-in-out var(--glow-delay-x, 0s)
      infinite,
    top-about-glow-y var(--glow-dur-y) ease-in-out var(--glow-delay-y, 0s)
      infinite,
    top-about-glow-scale var(--glow-dur-scale) ease-in-out
      var(--glow-delay-scale, 0s) infinite,
    top-about-glow-opacity var(--glow-dur-opacity) ease-in-out
      var(--glow-delay-opacity, 0s) infinite;
}

/* PCとSPの放射光は同時に表示されないため、1つ目・2つ目・3つ目でまとめる */
.top-about__glow--pc-top,
.top-about__glow--520 {
  --glow-dur-x: 37s;
  --glow-dur-y: 53s;
  --glow-dur-scale: 29s;
  --glow-dur-opacity: 23s;
}

.top-about__glow--pc,
.top-about__glow--388 {
  --glow-dur-x: 43s;
  --glow-dur-y: 59s;
  --glow-dur-scale: 31s;
  --glow-dur-opacity: 19s;
}

.top-about__glow--pc-sm,
.top-about__glow--247 {
  --glow-dur-x: 41s;
  --glow-dur-y: 47s;
  --glow-dur-scale: 23s;
  --glow-dur-opacity: 17s;
  /* 小さい光は動きが目立ちやすいので振れ幅を抑える */
  --glow-drift-x: 6%;
  --glow-drift-y: 4.5%;
}

/* セクションが視界に入るまで止めておく（about-glow.js が付けるクラス）。
   0%が最も明るい状態なので、再生開始＝明点からのスタートになる。
   JS無効時は js-glow が付かないため、読み込みと同時に再生される */
.js-glow .top-about__glow {
  animation-play-state: paused;
}

.js-glow .top-about.is-glow-running .top-about__glow {
  animation-play-state: running;
}

/* X は translate、Y は transform に分けることで、
   1要素のまま2軸へ別々の周期を割り当てられる（HTMLの変更が不要） */
@keyframes top-about-glow-x {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: var(--glow-drift-x) 0;
  }
  75% {
    translate: calc(var(--glow-drift-x) * -1) 0;
  }
}
@keyframes top-about-glow-y {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(var(--glow-drift-y));
  }
  75% {
    transform: translateY(calc(var(--glow-drift-y) * -1));
  }
}
@keyframes top-about-glow-scale {
  0%,
  100% {
    scale: 1;
  }
  25% {
    scale: var(--glow-scale-max);
  }
  75% {
    scale: var(--glow-scale-min);
  }
}
/* 0%を最大の明るさにする。セクション登場時が一番明るい状態になる */
@keyframes top-about-glow-opacity {
  0%,
  100% {
    opacity: var(--glow-opacity-max, 1);
  }
  50% {
    opacity: var(--glow-opacity-min);
  }
}
@media (prefers-reduced-motion: reduce) {
  .top-about__glow {
    animation: none;
    translate: none;
    transform: none;
    scale: none;
    opacity: 1;
  }
}
.top-about__inner {
  position: relative;
  z-index: 1;
  min-height: clamp(2250px, 144.4vw, 2772px);
  padding-top: clamp(120px, 8.5vw, 164px);
  padding-bottom: 160px;
}

.top-about__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.top-about__grid--first {
  margin-top: clamp(160px, 11.5vw, 220px);
}

.top-about__body {
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2;
}

.top-about__body p + p {
  margin-top: 24px;
}

.top-about__line::after {
  content: " ";
}

.top-about__line--space {
  display: block;
  height: 1em;
}

.top-about__body--first {
  grid-column: 1 / span 5;
}

.top-about__lead {
  margin-bottom: clamp(42px, 4vw, 72px);
  font-size: clamp(38px, 2.82vw, 54px);
  font-weight: 400;
  line-height: 1.18;
}

.top-about__media {
  position: relative;
  overflow: clip;
}

.top-about__media img,
.top-about__accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-about__media picture {
  width: 100%;
  height: 100%;
}

.top-about__accent--factory picture {
  display: contents;
}

.top-about__media::after {
  position: absolute;
  inset: 0;
  background: #004098;
  mix-blend-mode: soft-light;
  content: "";
}

/* About写真のパララックス（assets/js/about-parallax.js）。
   写真を枠より大きめに拡大し、枠の中で上下へ流す。拡大率と振れ幅はJS側の定数。
   js-about-parallax は GSAP が読めて、かつ reduced-motion でないときだけ付く。
   動かすのは picture。figure はSPで translateX を持つため触らない */
.js-about-parallax .top-about__media picture {
  will-change: transform;
}

/* 保険。JS側でも matchMedia で早期 return している */
@media (prefers-reduced-motion: reduce) {
  .js-about-parallax .top-about__media picture {
    transform: none;
    will-change: auto;
  }
}
.top-about__media--machining {
  grid-column: 8 / span 5;
  height: clamp(560px, 41.7vw, 800px);
}

.top-about__accent {
  position: absolute;
  overflow: clip;
  margin: 0;
  pointer-events: none;
}

.top-about__accent--worker {
  top: 48px;
  right: calc((100vw - 100%) / -2);
  width: clamp(150px, 11.5vw, 220px);
  height: clamp(150px, 11.5vw, 220px);
}

.top-about__accent--factory {
  top: clamp(720px, 50.5vw, 970px);
  left: calc((100vw - 100%) / -2);
  width: clamp(150px, 11.5vw, 220px);
  height: clamp(150px, 11.5vw, 220px);
}

.top-about__grid--second {
  margin-top: clamp(150px, 12vw, 230px);
}

.top-about__media--robot {
  grid-column: 1 / span 5;
  height: clamp(620px, 43vw, 827px);
}

.top-about__body--second {
  grid-column: 8 / span 5;
  align-self: start;
  padding-top: clamp(90px, 8.3vw, 160px);
}

.top-about__nav {
  margin-top: clamp(70px, 7vw, 130px);
  border-bottom: 1px solid #4d4d4d;
}

/* Figma 170:6419 / 170:6420 — View More + 40円矢印。テキストは通常・hoverとも白。丸ボタンは通常白、hoverでブランド青 */
.top-about__nav-link {
  position: relative;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #4d4d4d;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: clamp(16px, 1.1vw, 21px);
  font-weight: 500;
  text-decoration: none;
}

/* メッセージ行も会社案内と同じ白文字。hover／focusでも文字色は変えない */
.top-about__nav-link--brand,
.top-about__nav-link:hover,
.top-about__nav-link:focus-visible {
  color: #fff;
}

.top-about__nav-more {
  position: relative;
  display: block;
  width: 118px;
  height: 40px;
  flex: none;
}

.top-about__nav-more-label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: "Inter", sans-serif;
  font-size: 13.333px;
  font-weight: 500;
  line-height: 13.333px;
  letter-spacing: 0;
  white-space: nowrap;
}

.top-about__nav-more-arrow {
  position: absolute;
  top: 0;
  left: 78px;
  display: block;
  width: 40px;
  height: 40px;
}

.top-about__nav-accents {
  display: contents;
}

.top-about__accent--president {
  bottom: 170px;
  left: 17%;
  width: clamp(220px, 18.75vw, 360px);
  height: clamp(260px, 22vw, 420px);
}

.top-about__accent--building {
  bottom: -28px;
  left: calc((100vw - 100%) / -2);
  width: clamp(150px, 11.5vw, 220px);
  height: clamp(150px, 11.5vw, 220px);
}

.top-features {
  background: #000;
}

.top-features__intro {
  min-height: clamp(560px, 34vw, 650px);
  padding-block: 100px;
}

.top-features__description {
  width: min(100%, var(--content-narrow));
  margin-top: clamp(64px, 6vw, 112px);
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2;
}

.top-feature {
  position: relative;
  isolation: isolate;
  min-height: clamp(720px, 56.25vw, 1080px);
  overflow: clip;
  background: #003174;
}

.top-feature__media,
.top-feature__deco {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-feature__media {
  margin: 0;
}

.top-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-feature--manufacturing .top-feature__image {
  opacity: 0.4;
}

.top-feature--creative .top-feature__image {
  object-position: center bottom;
}

.top-feature__deco {
  z-index: -1;
  inset: 0 0 0 auto;
  width: auto;
  aspect-ratio: 997/1080;
  object-fit: contain;
  mix-blend-mode: plus-lighter;
}

.top-feature--manufacturing::after,
.top-feature--creative::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 64, 152, 0.3);
  mix-blend-mode: soft-light;
  content: "";
}

.top-feature__body {
  display: grid;
  min-height: inherit;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 1.7vw, 32px);
  align-items: center;
}

.top-feature__copy {
  grid-column: 9 / span 4;
}

.top-feature__en {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 300;
}

.top-feature__title {
  margin-top: 28px;
  font-size: clamp(42px, 2.82vw, 54px);
  font-weight: 400;
  line-height: 1.18;
}

.top-feature__link {
  display: flex;
  width: min(100%, 320px);
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(72px, 7vw, 132px);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  font-size: clamp(17px, 1.1vw, 21px);
}

.top-feature__link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.top-feature__link-arrow-sp {
  display: none;
}

.top-feature__link-more-group {
  display: contents;
}

.top-feature__link--pc,
.top-feature__en--pc,
.top-features__break--pc {
  display: none;
}

.top-news {
  position: relative;
  min-height: clamp(1000px, 79.22vw, 1521px);
  overflow: clip;
  padding-block: clamp(160px, 16vw, 310px) clamp(260px, 21.25vw, 408px);
  color: #101828;
  background: #ccc;
}

/* PC用インライン背景。SPでは専用SVGをCSS背景で当てるため隠す */
.top-news__bg {
  display: none;
}

.top-news__inner {
  position: relative;
  z-index: 1;
}

.top-news__list {
  margin-top: clamp(100px, 9vw, 170px);
}

.top-news__item {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 32px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid #999;
  font-size: 14px;
}

.top-news__item time {
  color: var(--color-brand);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

.top-news__wordmark {
  position: absolute;
  z-index: 1;
  bottom: -2px;
  left: 50%;
  display: block;
  width: max(100%, 1440px);
  height: clamp(260px, 21.25vw, 408px);
  transform: translateX(-50%);
}

.top-news__wordmark-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.top-recruit {
  position: relative;
  isolation: isolate;
  min-height: clamp(680px, 47.3vw, 908px);
  overflow: clip;
  /* フォールバック。PC/SPは各ノイズ入りSVGをCSS背景で上書き */
  background: linear-gradient(#004098, #fff);
}

.top-recruit__deco {
  position: absolute;
  z-index: -1;
  top: -25%;
  right: -15%;
  width: auto;
  height: 140%;
  aspect-ratio: 1069/1284.81;
  object-fit: contain;
  mix-blend-mode: screen;
}

.top-recruit__inner {
  padding-top: clamp(140px, 10.4vw, 200px);
}

.top-recruit__description {
  width: min(100%, 880px);
  margin-top: 70px;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2;
}

.top-recruit__link {
  display: flex;
  width: 354px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  border: 2px solid #004098;
  border-radius: 30px;
  color: #fff;
  background: #004098;
  cursor: not-allowed;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1px;
  opacity: 1;
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

.top-recruit__link img {
  transition: filter 0.25s ease;
}

/* Figma 1:1855: ホバー時は背景と文字色を反転し、矢印もブランド色へ合わせる */
@media (hover: hover) and (pointer: fine) {
  .top-recruit__link:hover {
    color: #004098;
    background-color: #fff;
  }
  .top-recruit__link:hover img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(93%) saturate(2370%)
      hue-rotate(205deg) brightness(82%) contrast(105%);
  }
}
.top-banner {
  position: relative;
  isolation: isolate;
  height: clamp(129.6px, 16.875vw, 324px);
  overflow: clip;
  background: linear-gradient(to bottom, #fff 0%, #ccc 100%);
}

/* カンプは3枚を座標で置いていたが、2枚になり座標の意味が消えたため
   通常フローの中央揃えに置き換える。幅・高さはカンプの値を踏襲 */
.top-banner__list {
  position: absolute;
  z-index: 1;
  top: clamp(19.2px, 2.5vw, 48px);
  left: 0;
  display: flex;
  width: 100%;
  height: clamp(81.6px, 10.625vw, 204px);
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.333vw, 64px);
}

.top-banner__item {
  overflow: hidden;
  margin: 0;
}

/* Figma: fagiano / health のみ darken */
.top-banner__item--fagiano,
.top-banner__item--health {
  mix-blend-mode: darken;
}

.top-banner__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-banner__item--fagiano {
  width: clamp(205.2px, 26.7188vw, 513px);
  height: clamp(62.8px, 8.1771vw, 157px);
}

.top-banner__item--health {
  width: clamp(214.8px, 27.9688vw, 537px);
  height: clamp(60.8px, 7.9167vw, 152px);
}

@media (min-width: 768px) {
  /*
    Heroの IRVANT. ロゴ（約791px）は75vwに閉じ込めると折り返し／縮小で崩れる。
    Heroは768〜PC。全幅＋ページガター。News/Recruitのみ旧1440比率トラック。
  */
  .top-page .top-hero__content {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Figma 170:6421 / 189:6518: x=960 / y=572 / w=792（1920px基準） */
  .top-hero__copy {
    position: absolute;
    top: clamp(309px, 29.79167vw, 572px);
    left: 50vw;
    width: clamp(316.8px, 41.25vw, 792px);
    min-width: 0;
    max-width: none;
    margin-left: 0;
  }
  .top-hero__copy-en {
    width: min(100%, clamp(316.8px, 35.05208vw, 673px));
    margin-top: clamp(4.4px, 0.57292vw, 11px);
  }
  /* Figmaではテキスト群143pxの後に47px空けてロゴが始まる */
  .top-hero__title {
    margin-top: clamp(18.8px, 2.44792vw, 47px);
  }
  .top-hero__title-wordmark {
    width: clamp(316.8px, 41.25vw, 792px);
    max-width: none;
  }
  /* コンテンツ幅なし: 1920基準の全幅リキッドを768まで維持（px上限の1440固定はしない） */
  .top-page .l-container,
  .top-page .l-container--wide {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .top-page .top-news__inner,
  .top-page .top-recruit__inner {
    width: 75vw;
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }
  /* PC Information背景: インラインSVG（グラデ＋ノイズ） */
  .top-news__bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
  }
  /*
    PCワードマーク: SVGフィルターは <img> だと落ちることがあるため、
    CSS background で同じ news-wordmark.svg（ノイズ入り）を描画する。
    img は寸法確保用に残し、見た目は消す。SPの picture source には触らない。
  */
  .top-news__wordmark {
    width: 100%;
    max-width: none;
    background: url("../images/top/news-wordmark.svg") center top/100% 100%
      no-repeat;
  }
  .top-news__item {
    grid-template-columns: clamp(120px, 8.854vw, 170px) 1fr;
    gap: clamp(16px, 1.667vw, 32px);
    font-size: clamp(14px, 0.9375vw, 18px);
  }
  .top-news__wordmark-image {
    opacity: 0;
  }
  /*
    PC Recruitment背景: Figma 169:6263 / recruit__bg 1:1680
    SVG feTurbulence は PC幅で縦縞になるため、Figma書き出しPNGを使う。
  */
  .top-recruit {
    background: #004098 url("../images/top/recruit-background-pc.png")
      center/100% 100% no-repeat;
  }
  /* 事業部カード以降は768〜PC */
  /* About下部の放射光をOUR BUSINESS導入へ連続させる */
  .top-features {
    background: transparent;
  }
  .top-features__list {
    display: flex;
    flex-direction: column;
  }
  .top-feature {
    min-height: clamp(432px, 56.25vw, 1080px);
    background: #000;
  }
  .top-feature__media {
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .top-feature__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top-feature--manufacturing .top-feature__image {
    opacity: 0.4;
  }
  .top-feature--digital .top-feature__image,
  .top-feature--creative .top-feature__image {
    opacity: 1;
    object-position: center;
  }
  .top-feature--manufacturing::after,
  .top-feature--creative::after {
    z-index: 1;
    background: rgba(0, 64, 152, 0.3);
    mix-blend-mode: soft-light;
  }
  .top-feature__deco {
    z-index: 2;
    inset: 0 auto 0 0;
    width: clamp(398.8px, 51.92708vw, 997px);
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
    mix-blend-mode: plus-lighter;
  }
  .top-feature--digital .top-feature__deco {
    mix-blend-mode: color-dodge;
  }
  .top-feature__body {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
  }
  .top-feature__copy {
    position: absolute;
    right: 0;
    left: clamp(480px, 62.5vw, 1200px);
    width: auto;
    height: clamp(192px, 25vw, 480px);
  }
  .top-feature--manufacturing .top-feature__copy {
    top: clamp(133.2px, 17.34375vw, 333px);
  }
  .top-feature--digital .top-feature__copy,
  .top-feature--creative .top-feature__copy {
    top: clamp(120px, 15.625vw, 300px);
  }
  .top-feature__en {
    position: absolute;
    top: clamp(40.533px, 5.27776vw, 101.333px);
    left: 0;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
    letter-spacing: 0;
  }
  .top-feature__en--legacy {
    display: none;
  }
  .top-feature__en--pc {
    display: block;
  }
  .top-feature__title {
    position: absolute;
    top: clamp(55.664px, 7.24792vw, 139.16px);
    left: 0;
    margin: 0;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(21.6px, 2.8125vw, 54px);
    font-weight: 400;
    line-height: clamp(25.6px, 3.33333vw, 64px);
    letter-spacing: 0;
  }
  .top-feature__link--legacy {
    display: none;
  }
  .top-feature__link,
  .top-feature__link--pc {
    position: absolute;
    left: 0;
    display: flex;
    width: clamp(128px, 16.66667vw, 320px);
    min-height: clamp(35.2px, 4.58333vw, 88px);
    align-items: center;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    opacity: 1;
  }
  .top-feature__link.top-feature__link--legacy {
    display: none;
  }
  .top-feature--manufacturing .top-feature__link--pc {
    top: clamp(115.464px, 15.03438vw, 288.66px);
  }
  .top-feature--digital .top-feature__link {
    top: clamp(137.2px, 17.86458vw, 343px);
  }
  .top-feature--creative .top-feature__link--pc {
    top: clamp(137.068px, 17.8474vw, 342.67px);
  }
  .top-feature__link-label {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: clamp(3.962px, 0.51594vw, 9.906px);
    transform: translateY(-50%);
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.1111vw, 21.333px);
    font-weight: 500;
    line-height: clamp(8.533px, 1.1111vw, 21.333px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .top-feature__link-label img {
    width: clamp(6.702px, 0.8726vw, 16.754px);
    height: clamp(6.4px, 0.83333vw, 16px);
    flex: none;
  }
  .top-feature__link-more-group {
    position: absolute;
    top: clamp(8.808px, 1.14688vw, 22.02px);
    left: clamp(80.8px, 10.52083vw, 202px);
    display: block;
    width: clamp(47.2px, 6.14583vw, 118px);
    height: clamp(16px, 2.08333vw, 40px);
  }
  .top-feature__link-more {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: "Inter", sans-serif;
    font-size: clamp(12px, 0.69443vw, 13.333px);
    font-weight: 500;
    line-height: clamp(12px, 0.69443vw, 13.333px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .top-feature__link-arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: clamp(16px, 2.08333vw, 40px);
    height: clamp(16px, 2.08333vw, 40px);
  }
  .top-feature__link-arrow-circle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .top-feature__link-arrow-glyph {
    position: absolute;
    top: 35.9%;
    left: 38.45%;
    width: 23.638%;
    height: 30.91%;
  }
  /* PC Features CTA: 通常は白丸、キーボードフォーカス時は青丸 */
  .top-feature__link:focus-visible .top-feature__link-arrow-circle {
    content: url("../images/top/about-nav-arrow-brand.svg");
  }
  .top-feature__link:focus-visible .top-feature__link-arrow-glyph {
    opacity: 0;
  }
  /* OUR BUSINESS導入: 768〜PC */
  .top-features__intro {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: clamp(404.8px, 52.708vw, 1012px);
    padding: 0;
    overflow: clip;
    background: linear-gradient(to bottom, transparent 45.504%, #004098 100%);
  }
  .top-features__intro .top-section-heading__label {
    position: absolute;
    top: clamp(97.6px, 12.70833vw, 244px);
    left: clamp(97.2px, 12.65625vw, 243px);
    font-family: "Roboto", sans-serif;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 300;
    line-height: clamp(9.6px, 1.25vw, 24px);
    letter-spacing: 0;
  }
  .top-features__intro .top-section-heading__title {
    position: absolute;
    top: clamp(143.512px, 18.68652vw, 358.781px);
    left: clamp(97.2px, 12.65625vw, 243px);
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-size: clamp(48px, 6.25vw, 120px);
    font-weight: 400;
    line-height: clamp(48px, 6.25vw, 120px);
    letter-spacing: clamp(-3px, -0.15625vw, -2px);
  }
  .top-features__description {
    position: absolute;
    top: clamp(273.488px, 35.61035vw, 683.719px);
    left: clamp(97.2px, 12.65625vw, 243px);
    width: clamp(352px, 45.8333vw, 880px);
    margin: 0;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(14px, 0.9375vw, 18px);
    font-weight: 400;
    line-height: clamp(28px, 1.875vw, 36px);
    letter-spacing: 0;
  }
  .top-features__break--pc {
    display: block;
  }
  .top-features__deco-arrow {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    display: block;
    width: clamp(373.6px, 48.64583vw, 934px);
    max-width: none;
    height: auto;
    transform: scaleX(-1);
    transform-origin: center;
    pointer-events: none;
  }
}
/* 1920px超: 背景は全幅のまま、内容だけ1920px基準の中央キャンバスへ追従 */
@media (min-width: 1921px) {
  .top-feature__copy {
    left: calc(50% + 240px);
  }
  .top-features__intro .top-section-heading__label,
  .top-features__intro .top-section-heading__title,
  .top-features__description {
    left: calc(50% - 717px);
  }
}
/* About PC: 1024〜（1024–1279は幅90%＋サイド小写真非表示、1280〜は通常75vw） */
@media (min-width: 1024px) {
  /*
    About PC座標は旧 l-container--wide（1440/1920 = 75vw）基準。
    全幅化すると left:0 が見出しを画面端へ貼り付けるため、比率トラックを維持する。
  */
  .top-page .top-about__inner.l-container,
  .top-page .top-about__inner {
    width: 75vw;
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }
  .top-about {
    height: clamp(1172.256px, 152.638vw, 2930.641px);
  }
  /* PC About装飾: 1920基準・768まで比例補間。右向き・反転なし */
  .top-about__deco-arrow--pc {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: block;
    width: clamp(373.6px, 48.6458333333vw, 934px);
    max-width: none;
    height: auto;
    pointer-events: none;
    transform: none;
  }
  /* PC放射光（上部）: Figma Frame 595 / 166:6249・172:6479。About基準 left:894 top:-92 size:1149 */
  .top-about__glow--pc-top {
    position: absolute;
    z-index: 0;
    top: clamp(-92px, -4.7916666667vw, -36.8px);
    left: clamp(357.6px, 46.5625vw, 894px);
    display: block;
    width: clamp(459.6px, 59.84375vw, 1149px);
    max-width: none;
    height: auto;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  /* PC放射光: Figma Frame 593 / 166:6247。About基準 left:600 top:2096 size:1194 */
  .top-about__glow--pc {
    position: absolute;
    z-index: 0;
    top: clamp(838.4px, 109.1666666667vw, 2096px);
    left: clamp(240px, 31.25vw, 600px);
    display: block;
    width: clamp(477.6px, 62.1875vw, 1194px);
    max-width: none;
    height: auto;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  /* PC放射光小: Figma Frame 594 / 166:6248。About基準 left:-96 top:2048 size:502 */
  .top-about__glow--pc-sm {
    position: absolute;
    z-index: 0;
    top: clamp(819.2px, 106.6666666667vw, 2048px);
    left: clamp(-96px, -5vw, -64px);
    display: block;
    width: clamp(200.8px, 26.1458333333vw, 502px);
    max-width: none;
    height: auto;
    pointer-events: none;
    mix-blend-mode: plus-lighter;
  }
  .top-about__inner,
  .top-about__accent {
    z-index: 1;
  }
  .top-about__inner {
    height: 100%;
    min-height: 0;
    padding: 0;
  }
  .top-about__heading {
    position: absolute;
    top: clamp(128.275px, 16.703vw, 320.688px);
    left: 0;
    width: 100%;
  }
  .top-about__heading .top-section-heading__label {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 300;
    line-height: clamp(9.6px, 1.25vw, 24px);
    letter-spacing: 0;
  }
  .top-about__heading .top-section-heading__title {
    margin-top: clamp(20px, 2.604vw, 50px);
    margin-left: clamp(-10px, -0.521vw, -6.667px);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: clamp(48px, 6.25vw, 120px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: clamp(-3px, -0.15625vw, -2px);
    white-space: nowrap;
  }
  .top-about__grid {
    position: absolute;
    left: 0;
    width: 100%;
  }
  .top-about__grid--first {
    top: clamp(227.731px, 29.652vw, 569.328px);
    height: clamp(320.525px, 41.735vw, 801.313px);
    margin-top: 0;
  }
  .top-about__body {
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(14px, 0.938vw, 18px);
    font-weight: 400;
    line-height: clamp(28px, 1.875vw, 36px);
    letter-spacing: 0;
  }
  .top-about__body p + p {
    margin-top: clamp(28px, 1.875vw, 36px);
  }
  .top-about__lead {
    margin-bottom: clamp(29.862px, 3.888vw, 74.656px);
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: clamp(21.6px, 2.813vw, 54px);
    font-weight: 400;
    line-height: clamp(25.6px, 3.333vw, 64px);
    letter-spacing: 0;
  }
  /* 高さを vw で持つと、幅はグリッド比・高さは画面比で伸び方が違うため、
     画面幅やブラウザのズームで写真の切り取られ方が変わってしまう。
     SPと同じく縦横比で固定する。値はカンプ基準（1920px）の実寸 600 x 800 */
  .top-about__media--machining {
    height: auto;
    aspect-ratio: 3/4;
    backdrop-filter: blur(20px);
  }
  .top-about__accent--worker {
    top: clamp(131.731px, 17.152vw, 329.328px);
    right: max(-240px, -12.5vw);
    width: clamp(88px, 11.458vw, 220px);
    height: clamp(88px, 11.458vw, 220px);
  }
  .top-about__accent--factory {
    top: clamp(452.256px, 58.888vw, 1130.641px);
    left: max(-240px, -12.5vw);
    width: clamp(88px, 11.458vw, 220px);
    height: clamp(88px, 11.458vw, 220px);
  }
  .top-about__accent--factory img {
    width: 100%;
    height: clamp(123.2px, 16.042vw, 308px);
    object-fit: cover;
    object-position: center top;
  }
  .top-about__grid--second {
    top: clamp(548.256px, 71.388vw, 1370.641px);
    height: clamp(624px, 81.25vw, 1560px);
    margin-top: 0;
  }
  /* 同上。カンプ基準（1920px）の実寸 600 x 826.656 をそのまま比率にしている。
     端数のままなのは、1920px での見え方を1pxも変えないため */
  .top-about__media--robot {
    height: auto;
    aspect-ratio: 600/826.656;
  }
  .top-about__body--second {
    position: static;
    padding-top: clamp(64.019px, 8.336vw, 160.047px);
  }
  .top-about__body--second .top-about__line {
    display: block;
  }
  .top-about__body--second .top-about__line--pc-inline {
    display: inline;
  }
  .top-about__body--second .top-about__line--space {
    display: block;
    height: clamp(28px, 1.875vw, 36px);
  }
  .top-about__nav {
    position: absolute;
    /* 1280起点では旧768用minだと本文最終行に重なるため下限を上げる */
    top: clamp(720px, 50.416vw, 967.984px);
    right: 0;
    width: 41.6667%;
    margin-top: 0;
  }
  .top-about__nav-link {
    min-height: clamp(58.667px, 4.583vw, 88px);
    padding: 0 clamp(18.667px, 1.458vw, 28px) 0
      clamp(17.771px, 1.388vw, 26.656px);
    font-size: clamp(16px, 1.111vw, 21.333px);
    line-height: clamp(16px, 1.111vw, 21.333px);
    letter-spacing: 0;
  }
  /* ラベル前の白シェブロン。通常は非表示、hover／focus-visibleで表示 */
  .top-about__nav-link .top-about__nav-label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: none;
    width: clamp(11.169px, 0.873vw, 16.754px);
    height: clamp(10.667px, 0.833vw, 16px);
    transform: translateY(-50%);
    background: #fff;
    clip-path: polygon(
      0 44%,
      62% 44%,
      42% 20%,
      50% 12%,
      100% 50%,
      50% 88%,
      42% 80%,
      62% 56%,
      0 56%
    );
    content: "";
  }
  /*
    View More + 円矢印: 絶対座標clampだと1280でラベル幅不足→円と重なる。
    PCのみグリッドで並べ、縮尺しても重ならないようにする（SP/TBは1279以下のまま）。
  */
  .top-about__nav-more {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    column-gap: clamp(8px, 0.521vw, 10px);
    width: auto;
    min-width: clamp(104px, 6.094vw, 117px);
    height: clamp(32px, 2.083vw, 40px);
  }
  .top-about__nav-more-label {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    font-size: clamp(12px, 0.694vw, 13.333px);
    line-height: 1;
  }
  .top-about__nav-more-arrow {
    position: static;
    top: auto;
    left: auto;
    width: clamp(32px, 2.083vw, 40px);
    height: clamp(32px, 2.083vw, 40px);
  }
  /* 両行の白い丸ボタンはhover／キーボードフォーカス時にブランドカラーへ */
  .top-about__nav-link:focus-visible .top-about__nav-more-arrow {
    content: url("../images/top/about-nav-arrow-brand.svg");
  }
  .top-about__nav-link:focus-visible .top-about__nav-label::before {
    display: block;
  }
  .top-about__accent--president {
    top: min(50vw, 960px);
    bottom: auto;
    left: min(12.5vw, 240px);
    width: min(18.75vw, 360px);
    height: min(18.75vw, 360px);
  }
  .top-about__accent--president img {
    width: 100%;
    height: min(26.25vw, 504px);
    object-fit: cover;
    object-position: center top;
  }
  .top-about__accent--building {
    top: min(69.792vw, 1340px);
    bottom: auto;
    left: 0;
    width: min(11.458vw, 220px);
    height: min(11.458vw, 220px);
  }
  .top-about__accent--building img {
    width: 100%;
    height: min(16.042vw, 308px);
    object-fit: cover;
    object-position: center top;
  }
}
/* About TB寄り（1024–1279）: PCレイアウト＋サイド白黒写真なし＋幅90% */
@media (min-width: 1024px) and (max-width: 1279px) {
  .top-page .top-about__inner.l-container,
  .top-page .top-about__inner {
    width: 90%;
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }
  .top-about__accent--worker,
  .top-about__accent--factory {
    display: none;
  }
}
/* 〜1023: About はSPレイアウト */
@media (max-width: 1023px) {
  .top-about__inner {
    width: 100%;
    max-width: none;
  }
  .top-about {
    overflow: visible;
    background: #000;
  }
  .top-about__deco-arrow {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    pointer-events: none;
  }
  .top-about__deco-arrow--upper {
    top: min(31px, 7.209vw);
    left: min(1px, 0.233vw);
    width: min(429px, 99.767vw);
    height: auto;
  }
  .top-about__glow {
    position: absolute;
    z-index: 0;
    display: block;
    max-width: none;
    height: auto;
    pointer-events: none;
  }
  .top-about__glow--520 {
    top: max(-212px, -49.302vw);
    left: min(111px, 25.814vw);
    width: min(520px, 120.93vw);
    mix-blend-mode: screen;
  }
  .top-about__glow--388 {
    top: min(878px, 204.186vw);
    left: min(35px, 8.14vw);
    width: min(388px, 90.233vw);
    /* デザイナー指摘の柔らかい外周を再現する、承認済みのカンプ補正 */
    filter: blur(min(35px, 8.14vw));
    mix-blend-mode: plus-lighter;
  }
  .top-about__glow--247 {
    /* Figma 160:5708。人物写真との相対位置を保ち、狭幅で上へずれないよう写真ブロック基準にする */
    top: max(-67px, -15.5813953488vw);
    left: calc(max(-51px, -11.86vw) - 4vw);
    width: min(247px, 57.442vw);
    /* 388px光彩の35px blurと同じ比率で、外周を柔らかくする承認済み補正 */
    filter: blur(min(22px, 5.116vw));
    mix-blend-mode: plus-lighter;
  }
  /* 汎用 display:block より後で、PC専用装飾だけ非表示 */
  .top-about__deco-arrow--pc,
  .top-about__glow--pc-top,
  .top-about__glow--pc,
  .top-about__glow--pc-sm {
    display: none;
  }
  .top-about__inner {
    z-index: 2;
    min-height: clamp(1859px, 495.81vw, 2132px);
    padding: 114px 4vw 0;
  }
  .top-about__heading .top-section-heading__label {
    font-size: 16px;
    line-height: 16px;
  }
  /* Figma About見出し: Roboto Medium 57.333 / lh 51.6 / tracking -2.867（430基準） */
  .top-about__heading .top-section-heading__title {
    margin-top: 58.83px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: clamp(50px, 13.333255814vw, 57.333px);
    line-height: clamp(45px, 12vw, 51.6px);
    letter-spacing: max(-2.867px, -0.666744186vw);
    color: #fff;
  }
  .top-about__heading .top-section-heading__title span {
    display: block;
  }
  /* 12カラム基調のPC/中間レイアウトを打ち消し、SPは1カラム積み上げ */
  .top-about__grid {
    grid-template-columns: 1fr;
  }
  .top-about__body--first,
  .top-about__media--machining,
  .top-about__media--robot,
  .top-about__body--second {
    grid-column: 1;
  }
  .top-about__grid--first {
    margin-top: 15px;
  }
  .top-about__lead {
    margin-bottom: 18px;
    font-size: 28px;
    line-height: 1.43;
  }
  /* Figma SP/Body/S: Noto Sans Regular 14 / lh 26.373 / tracking -5% */
  .top-about__body {
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26.373px;
    letter-spacing: -0.05em;
  }
  .top-about__body p + p {
    margin-top: 18px;
  }
  .top-about__line {
    display: block;
  }
  .top-about__line::after {
    content: none;
  }
  .top-about__line--space {
    height: 26.373px;
  }
  .top-about__media--machining {
    width: 48.16%;
    height: auto;
    max-height: none;
    aspect-ratio: 190/253;
    justify-self: end;
    margin-top: 12px;
    transform: translateX(20px);
  }
  .top-about__grid--second {
    margin-top: -158px;
  }
  .top-about__media--robot {
    width: 48.48%;
    height: auto;
    max-height: none;
    aspect-ratio: 191/264;
    justify-self: start;
    margin-top: 0;
    transform: translateX(-10px);
  }
  .top-about__body--second {
    padding-top: 77px;
  }
  .top-about__nav {
    margin-top: 33px;
  }
  .top-about__nav-link {
    min-height: 62px;
    font-size: 16px;
    line-height: 1;
  }
  /* SPも Figma View More（170:6419 / 170:6420）を430基準で比例 */
  .top-about__nav-more {
    width: clamp(102.907px, 27.4418604651vw, 118px);
    height: clamp(34.884px, 9.3023255814vw, 40px);
  }
  .top-about__nav-more-label {
    font-size: clamp(11.628px, 3.1006976744vw, 13.333px);
    line-height: 1;
  }
  .top-about__nav-more-arrow {
    left: clamp(68.023px, 18.1395348837vw, 78px);
    width: clamp(34.884px, 9.3023255814vw, 40px);
    height: clamp(34.884px, 9.3023255814vw, 40px);
  }
  .top-about__nav-link .top-about__nav-label::before {
    display: none;
  }
  .top-about__accent {
    display: block;
  }
  .top-about__accent--worker {
    top: 82px;
    right: -4vw;
    width: 86px;
    height: 86px;
  }
  .top-about__accent--factory {
    top: 1144px;
    right: -4vw;
    left: auto;
    width: 86px;
    height: 86px;
  }
  .top-about__nav-accents {
    display: block;
    position: relative;
    height: 241px;
    margin-top: clamp(94px, 25.12vw, 108px);
  }
  .top-about__accent--president {
    top: 0;
    bottom: auto;
    left: 28%;
    width: 138px;
    height: 138px;
  }
  .top-about__accent--president img,
  .top-about__accent--building img {
    filter: grayscale(1);
  }
  .top-about__accent--building {
    top: 155px;
    bottom: auto;
    left: 0;
    width: 86px;
    height: 86px;
  }
}
/* 〜1279: 横はみ出し抑制（Hero / OUR BUSINESS は〜767のみSP） */
@media (max-width: 1279px) {
  .top-page {
    overflow-x: clip;
  }
}
@media (max-width: 767px) {
  .top-hero__content {
    width: 100%;
    max-width: none;
  }
  /* OUR BUSINESS導入: SP */
  .top-features__intro {
    width: 100%;
    max-width: none;
  }
  .top-features {
    position: relative;
    isolation: isolate;
    background: #000;
  }
  .top-features__deco-arrow {
    position: absolute;
    z-index: 0;
    top: max(-36px, -8.372vw);
    left: 0;
    display: block;
    width: min(429px, 99.767vw);
    max-width: none;
    height: auto;
    pointer-events: none;
    transform: scaleX(-1);
    transform-origin: center;
  }
  .top-features__intro,
  .top-features__list {
    position: relative;
    z-index: 1;
  }
  .top-features__intro {
    min-height: 544px;
    padding: 189px 4vw 44px;
    isolation: isolate;
    background: linear-gradient(to bottom, #000 65.788%, #004098 100%);
  }
  .top-features__intro > :not(.top-features__deco-arrow) {
    position: relative;
    z-index: 1;
  }
  .top-features__intro .top-section-heading__label {
    font-size: 16px;
    line-height: 16px;
  }
  .top-features__intro .top-section-heading__title {
    margin-top: 57.81px;
    font-size: 43.573px;
    line-height: 1;
  }
  /* Figma SP/Body/S */
  .top-features__description {
    margin-top: 43.76px;
    color: #fff;
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26.373px;
    letter-spacing: -0.05em;
  }
  /* SP FV: Figma Hero 1:1178（430×818） */
  .top-hero {
    min-height: clamp(713px, 190.23vw, 818px);
  }
  .top-hero__media {
    background: #00132d;
  }
  .top-hero__media::after {
    position: absolute;
    inset: 0;
    background: #004098;
    mix-blend-mode: soft-light;
    content: "";
  }
  /* 横長素材を縦枠coverするとき、centerだと手元のみ。頭(右上)+手が入るよう右寄り */
  .top-hero__image {
    object-position: 78% 35%;
  }
  /* ::before 40%遮光 + ::after 下端グラデ172px（Figma 22:268 / 22:269） */
  .top-hero__shade {
    background:
      linear-gradient(to top, #000 0, transparent 172px), rgba(0, 0, 0, 0.4);
  }
  .top-hero__shade::after {
    display: none;
  }
  .top-hero__content {
    padding: 0 5.12vw clamp(94px, 25.12vw, 108px);
  }
  .top-hero__copy {
    width: 100%;
    margin-left: 0;
  }
  /* PC/Heading/S: Roboto Medium 28 / lh 36 / tracking 0 */
  .top-hero__copy-ja {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0;
  }
  .top-hero__break--sp {
    display: none;
  }
  /* SP/Display/S: Roboto Regular 28 / lh 32 / tracking -1.72px */
  .top-hero__copy-en {
    margin-top: 11px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -1.72px;
  }
  .top-hero__title {
    margin-top: 25.5px;
  }
  .top-hero__title-wordmark {
    width: min(390.47px, 90.81vw);
    max-width: 100%;
    height: auto;
  }
  .top-section-heading__label {
    font-size: 14px;
  }
  .top-section-heading__title {
    margin-top: 54px;
    font-size: clamp(44px, 13.33vw, 57.33px);
    line-height: 0.9;
  }
  .top-recruit__inner {
    width: 100%;
    max-width: none;
  }
  .top-news {
    min-height: 825px;
    padding: 132px 0 168px;
    /* Figma Information/SP 153:5411: white→#ccc + Monotone Noise（Recruit SP背景と同じCSS背景方式） */
    background: #ccc url("../images/top/news-background-sp.svg") center/100%
      100% no-repeat;
  }
  .top-news__bg {
    display: none;
  }
  .top-news .top-section-heading__label {
    font-size: 16px;
    line-height: 16px;
  }
  .top-news .top-section-heading__title {
    margin-top: 20px;
    font-size: 43.573px;
    line-height: 1;
  }
  .top-news__inner {
    width: min(100%, 336px);
  }
  .top-news__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 45.4px;
  }
  .top-news__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding: 0 0 15px;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
  .top-news__item time {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
  }
  .top-news__item:nth-child(n + 4) {
    display: none;
  }
  .top-news__wordmark {
    width: 100%;
    height: auto;
    aspect-ratio: 430/91.4028;
  }
  .top-news__wordmark-image {
    object-fit: contain;
    object-position: top left;
  }
  .top-recruit {
    min-height: 590px;
  }
  .top-recruit {
    background: #fff url("../images/top/recruit-background-sp.svg") center/100%
      100% no-repeat;
  }
  .top-recruit__deco {
    top: 12%;
    right: 0;
    width: auto;
    height: 88%;
  }
  .top-recruit__inner {
    padding: 96px 7.67vw 56px;
  }
  .top-recruit .top-section-heading {
    margin-left: 14px;
  }
  .top-recruit .top-section-heading__label {
    font-size: 16px;
    line-height: 16px;
  }
  .top-recruit .top-section-heading__title {
    margin-top: 7px;
    font-size: 43.57px;
    line-height: 1;
  }
  .top-recruit__description {
    margin-top: 60px;
    font-size: 14px;
    line-height: 2.57;
  }
  .top-recruit__link {
    width: 354px;
    max-width: 100%;
    margin: 48px 0 0 4px;
  }
  .top-recruit__link {
    position: relative;
  }
  .top-recruit__link img {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 40px;
    height: 40px;
  }
  /* 関連バナー SP（Figma 299:6806 / 430x192基準）。
     画像はPCと同じ3点を使い回す。カンプ側は1枚のスクリーンショットを
     2箇所に切り出しているが、実装では正規のロゴ画像を使う。

     PCは絶対配置だが、SPは Grid にする。絶対配置のままだと
     430px を超えた幅（431〜767px）で中央に来ず左へ寄ってしまうため。
     1段目にファジアーノ、2段目に健活企業とシーガルズを並べる */
  .top-banner {
    height: auto;
    padding-block: min(14px, 3.256vw) min(16px, 3.721vw);
  }
  /* SPも横並び。画面幅に収めるため、枚数分の幅とgapの合計が
     100vwを超えないようvw基準で縮める */
  .top-banner__list {
    position: static;
    width: 100%;
    height: auto;
    gap: min(12px, 3.2vw);
  }
  /* 高さは画像の縦横比に任せる。カンプ側の枠は余白込みの切り出しなので、
     枠の比率を写すと正規ロゴでは合わない */
  .top-banner__item {
    overflow: visible;
  }
  .top-banner__item img {
    height: auto;
  }
  .top-banner__item--fagiano {
    width: min(255px, 45vw);
  }
  .top-banner__item--health {
    width: min(257px, 45vw);
  }
  .top-feature__body {
    width: 100%;
    max-width: none;
  }
  /* 事業部カードは767以下のみSP */
  .top-feature {
    min-height: 730px;
    background: #000;
  }
  .top-features__list {
    display: flex;
    flex-direction: column;
  }
  .top-feature--manufacturing {
    order: 1;
  }
  .top-feature--digital {
    order: 2;
  }
  .top-feature--creative {
    order: 3;
  }
  .top-feature__media {
    background: #000;
  }
  .top-feature__copy {
    grid-column: 1;
  }
  .top-feature__image {
    object-position: center;
  }
  .top-feature--manufacturing .top-feature__deco,
  .top-feature--digital .top-feature__deco,
  .top-feature--creative .top-feature__deco {
    inset: 0 auto 0 -56.74%;
    width: 156.74%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    object-fit: fill;
  }
  .top-feature--creative .top-feature__image {
    object-position: center bottom;
  }
  .top-feature__body {
    position: relative;
    display: block;
    padding: 0;
  }
  .top-feature__copy {
    position: absolute;
    top: 274px;
    right: 11.63vw;
    left: 14vw;
  }
  .top-feature--manufacturing .top-feature__copy {
    top: 295px;
    left: min(62px, 14.419vw);
  }
  .top-feature__en {
    font-size: 16px;
    line-height: 18px;
  }
  .top-feature__title {
    margin-top: 20px;
    font-size: 28px;
    line-height: 1.14;
  }
  .top-feature--manufacturing .top-feature__title {
    letter-spacing: -1.72px;
  }
  .top-feature--digital .top-feature__copy {
    top: min(274px, 63.721vw);
    right: min(50px, 11.628vw);
    left: min(60px, 13.953vw);
  }
  .top-feature--digital .top-feature__title {
    line-height: 32px;
    letter-spacing: -1.72px;
  }
  .top-feature__link {
    width: 100%;
    min-height: min(88px, 20.465vw);
    margin-top: min(233px, 54.186vw);
    border-top-color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
  }
  .top-feature__link-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .top-feature__link-label img {
    width: 16.754px;
    height: 16px;
  }
  .top-feature__link-more-group {
    position: relative;
    display: block;
    width: 118px;
    height: 40px;
    flex: none;
  }
  .top-feature__link-more {
    position: absolute;
    top: calc(50% - 7px);
    left: 0;
    font-family: "Inter", sans-serif;
    font-size: 13.333px;
    font-weight: 500;
    line-height: 13.333px;
    letter-spacing: 0;
  }
  .top-feature__link-arrow {
    position: absolute;
    top: 0;
    left: 78px;
    display: grid;
    width: 40px;
    height: 40px;
    flex: none;
    place-items: center;
  }
  .top-feature__link-arrow-circle,
  .top-feature__link-arrow-glyph {
    display: none;
  }
  .top-feature__link-arrow-sp {
    display: block;
    width: 40px;
    height: 40px;
  }
  .top-feature--manufacturing .top-feature__link--legacy,
  .top-feature--creative .top-feature__link--legacy {
    display: none;
  }
  .top-feature--manufacturing .top-feature__link--pc,
  .top-feature--creative .top-feature__link--pc {
    display: flex;
  }
  .top-feature--creative .top-feature__link--pc[aria-disabled="true"] {
    opacity: 1;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .top-about__nav-link:hover .top-about__nav-more-arrow {
    content: url("../images/top/about-nav-arrow-brand.svg");
  }
  .top-about__nav-link:hover .top-about__nav-label::before {
    display: block;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .top-feature__link:hover .top-feature__link-arrow-circle {
    content: url("../images/top/about-nav-arrow-brand.svg");
  }
  .top-feature__link:hover .top-feature__link-arrow-glyph {
    opacity: 0;
  }
}
html.js-about-accents .top-about__accent {
  opacity: 0;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.js-about-accents .top-about__accent {
    opacity: 1;
    will-change: auto;
  }
}
@media (min-width: 768px) {
  .top-page {
    --stack-dwell: 100vh;
  }
  .top-feature {
    position: sticky;
    top: 0;
    min-height: 100vh;
  }
  .top-feature + .top-feature {
    margin-top: var(--stack-dwell);
  }
  .top-features__list::after {
    height: calc(var(--stack-dwell) + 100vh);
    flex: none;
    content: "";
  }
  .top-feature--digital {
    z-index: 2;
  }
  .top-feature--manufacturing {
    z-index: 3;
  }
  .top-feature--creative {
    z-index: 4;
  }
  .top-news {
    z-index: 5;
    margin-top: -100vh;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .top-feature {
    position: relative;
    inset: auto;
    min-height: clamp(432px, 56.25vw, 1080px);
  }
  .top-feature + .top-feature {
    margin-top: 0;
  }
  .top-features__list::after {
    height: 0;
  }
  .top-news {
    margin-top: 0;
  }
}
.top-hero {
  --hero-rise-distance: 3rem;
  --hero-rise-time: 1.8s;
  --hero-rise-delay: 0.8s;
  --hero-rise-gap: 0.6s;
  --hero-rise-logo-gap: 0.8s;
  --hero-rise-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (animation-timing-function: linear(0, 1)) {
  .top-hero {
    --hero-rise-ease: linear(
      0,
      0.2486,
      0.4451,
      0.5981,
      0.7154,
      0.8035,
      0.8683,
      0.9148,
      0.9471,
      0.9688,
      0.9827,
      0.9911,
      0.9959,
      0.9983,
      0.9995,
      0.9999,
      1,
      1,
      1
    );
  }
}
@keyframes top-hero-rise {
  from {
    opacity: 0;
    transform: translateY(var(--hero-rise-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.top-hero__copy-ja,
.top-hero__copy-en,
.top-hero__title-wordmark {
  animation: top-hero-rise var(--hero-rise-time) var(--hero-rise-ease) both;
}

.top-hero__copy-ja {
  animation-delay: var(--hero-rise-delay);
}

.top-hero__copy-en {
  animation-delay: calc(var(--hero-rise-delay) + var(--hero-rise-gap));
}

.top-hero__title-wordmark {
  animation-delay: calc(
    var(--hero-rise-delay) + var(--hero-rise-gap) + var(--hero-rise-logo-gap)
  );
}

@media (prefers-reduced-motion: reduce) {
  .top-hero__copy-ja,
  .top-hero__copy-en,
  .top-hero__title-wordmark {
    animation: none;
  }
}
.top-feature__en.is-masked,
.top-feature__title.is-masked {
  overflow: clip;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.top-feature__title-inner {
  display: block;
  will-change: transform;
}

html.js-text-fadeup .top-about__heading .top-section-heading__label {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-about__heading .top-section-heading__title {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-about__lead {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-about__body--first > p {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-about__body--second > p {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-about__nav-link {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-features__intro .top-section-heading__label {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-features__intro .top-section-heading__title {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-features__description {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-news__inner .top-section-heading__label {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-news__inner .top-section-heading__title {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-news__item {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-recruit__inner .top-section-heading__label {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-recruit__inner .top-section-heading__title {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-recruit__description {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}
html.js-text-fadeup .top-recruit__link {
  opacity: 0;
  transform: translateY(2rem);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.js-text-fadeup .top-about__heading .top-section-heading__label {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-about__heading .top-section-heading__title {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-about__lead {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-about__body--first > p {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-about__body--second > p {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-about__nav-link {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-features__intro .top-section-heading__label {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-features__intro .top-section-heading__title {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-features__description {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-news__inner .top-section-heading__label {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-news__inner .top-section-heading__title {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-news__item {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-recruit__inner .top-section-heading__label {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-recruit__inner .top-section-heading__title {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-recruit__description {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  html.js-text-fadeup .top-recruit__link {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 12px 16px;
  color: #fff;
  background: var(--color-brand);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* SP専用改行など（767px以下でのみ表示） */
.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .u-sp-only {
    display: inline;
  }
}