/* ==========================================================================
   NEXIO Corporate Site
   ブランド素材：NEXIO ロゴデータ一式 ver.2.0（2026.09）
   Navy #0B1B33 / Blue #0057E7 / Cyan #22DAFE（シアンは文字色に使わない）
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy-900: #0B1B33;
  --navy-800: #122646;
  --navy-700: #1B3359;
  --blue-600: #0057E7;
  --blue-700: #0047C0;
  --cyan-400: #22DAFE;
  --gray-50: #F7F9FC;
  --gray-100: #F2F5F9;
  --gray-200: #E3E8EF;
  --gray-300: #CDD6E2;
  --gray-600: #5B677B;
  --gray-700: #3E4C63;
  --red-600: #C4283A;

  --c-text: var(--navy-900);
  --c-text-2: var(--gray-700);
  --c-text-3: var(--gray-600);
  --c-accent: var(--blue-600);
  --c-line: var(--gray-200);
  --c-line-strong: var(--gray-300);
  --c-bg: #FFFFFF;
  --c-bg-muted: var(--gray-100);
  --c-bg-inverse: var(--navy-900);
  --c-danger: var(--red-600);

  --grad-brand: linear-gradient(to bottom left, #22DAFE 0%, #0057E7 100%);
  --grad-line: linear-gradient(90deg, #0057E7 0%, #22DAFE 100%);
  --grad-line-v: linear-gradient(180deg, #22DAFE 0%, #0057E7 100%);

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-en: "Poppins", "Noto Sans JP", "Hiragino Sans", sans-serif;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 10vw, 160px);
  --header-h: 84px;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(11, 27, 51, .04), 0 18px 40px -18px rgba(11, 27, 51, .16);
  --shadow-photo: 0 28px 60px -32px rgba(11, 27, 51, .45);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 767px) {
  :root { --header-h: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  overflow-x: clip;
}
@media (max-width: 599px) { body { font-size: 15px; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; border-radius: 4px; }
.band-navy :focus-visible, .site-footer :focus-visible { outline-color: var(--cyan-400); }
::selection { background: rgba(34, 218, 254, .3); }

/* ---------- Utilities ---------- */
.en { font-family: var(--font-en); letter-spacing: .08em; }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.u-pc { display: none; }
@media (min-width: 900px) { .u-pc { display: inline; } .u-sp { display: none; } }
/* 語のまとまりの途中で改行させない（まとまりの間でだけ折り返す） */
.u-nw { display: inline-block; }
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }
.band-muted { background: var(--c-bg-muted); }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* 1列のグリッドでも中身の最小幅で横にはみ出さないようにする */
.hero__inner, .about__grid, .approach__head, .mv__grid, .mv__vision-grid, .role, .biz-group, .future,
.company__grid, .contact__grid, .form, .site-footer__top { grid-template-columns: minmax(0, 1fr); }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--navy-900); color: #fff; text-decoration: none; font-size: 14px;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ---------- Typography blocks ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-en); font-size: 12px; font-weight: 500; line-height: 1;
  letter-spacing: .26em; color: var(--blue-600);
}
.eyebrow::before {
  content: ""; flex: none; width: 7px; height: 17px;
  background:
    radial-gradient(circle at 50% 3.5px, #22DAFE 0 3.1px, transparent 3.6px),
    radial-gradient(circle at 50% 13.5px, #0057E7 0 3.1px, transparent 3.6px);
}
.eyebrow--light { color: var(--cyan-400); }
.section-head { margin-bottom: clamp(48px, 6vw, 80px); }
.section-head--center { text-align: center; }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.section-title {
  font-size: clamp(28px, 1.9vw + 14px, 44px);
  line-height: 1.45; letter-spacing: .06em;
  font-feature-settings: "palt";
}
.section-lead { margin-top: 24px; max-width: 44em; color: var(--c-text-2); }
.section-copy {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: clamp(17px, .6vw + 13px, 22px); font-weight: 500; letter-spacing: .12em;
}
.section-copy::before { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--grad-line); }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: .08em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--navy-900); color: #fff; }
.btn--primary:hover { background: var(--blue-600); }
.btn--outline { background: #fff; color: var(--navy-900); border-color: var(--c-line-strong); }
.btn--outline:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 0 34px 0 40px; }
.btn--block { display: flex; width: 100%; }
.btn:has(.btn__arrow) { padding-right: 16px; }
.btn__arrow {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-brand); transition: transform .35s var(--ease-out);
}
.btn__arrow::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff;
  transform: translateX(-1px) rotate(45deg);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn svg { width: 14px; height: 14px; flex: none; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 2px; font-weight: 500; letter-spacing: .08em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 100% 1px no-repeat;
  transition: color .25s, background-size .35s var(--ease-out);
}
.link-arrow::after {
  content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .35s var(--ease-out);
}
.link-arrow:hover { color: var(--blue-600); }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--header-h);
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.site-header.is-scrolled, .is-menu-open .site-header {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(11, 27, 51, .07);
}
.site-header__inner {
  height: 100%; max-width: 1440px; margin-inline: auto;
  padding-inline: clamp(20px, 3.4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* ヘッダーのロゴはガイドラインの最小サイズ（横組み：画面180px）に合わせて控えめに */
.site-logo { flex: none; display: block; width: 180px; color: var(--navy-900); border-radius: 6px; }
.site-logo__svg { width: 100%; height: auto; overflow: visible; }
.gnav { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 0 0 12px; border: 0; background: none;
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
}
.menu-toggle__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-900); transition: background-color .3s; }
.menu-toggle:hover .menu-toggle__icon { background: var(--blue-600); }
.menu-toggle__icon span {
  position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 1px; background: #fff;
  transition: transform .35s var(--ease-out), top .35s var(--ease-out);
}
.menu-toggle__icon span:nth-child(1) { top: 18px; }
.menu-toggle__icon span:nth-child(2) { top: 25px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }
@media (max-width: 399px) {
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1180px) {
  .gnav { display: flex; align-items: center; gap: clamp(24px, 2.2vw, 40px); }
  .gnav__list { display: flex; align-items: center; gap: clamp(18px, 1.7vw, 30px); }
  .gnav__list a {
    position: relative; display: block; padding: 8px 0;
    font-size: 14px; font-weight: 500; letter-spacing: .06em; text-decoration: none;
    transition: color .25s;
  }
  .gnav__list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px;
    background: var(--grad-line); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out);
  }
  .gnav__list a:hover { color: var(--blue-600); }
  .gnav__list a:hover::after, .gnav__list a.is-current::after { transform: scaleX(1); }
  .menu-toggle { display: none; }
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
  background: #fff; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__inner { max-width: 560px; margin-inline: auto; }
.mobile-menu__list { border-top: 1px solid var(--c-line); margin-bottom: 32px; }
.mobile-menu__list a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 4px; border-bottom: 1px solid var(--c-line);
  font-size: 18px; font-weight: 500; letter-spacing: .06em; text-decoration: none;
}
.mobile-menu__list a .en { font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--blue-600); }
.mobile-menu__list a.is-current { color: var(--blue-600); }
.mobile-menu__tagline { margin-top: 32px; text-align: center; font-size: 13px; letter-spacing: .32em; color: var(--c-text-3); }
html.is-menu-open { overflow: hidden; }

/* ---------- Opening (intro) ---------- */
.intro { display: none; }
.intro-active .intro { display: block; position: fixed; inset: 0; z-index: 100; }
.intro__bg { position: absolute; inset: 0; background: #fff; }
.intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.intro.is-running .intro__svg { opacity: 1; }
.intro.is-fading { opacity: 0; transition: opacity .45s linear; }
html.intro-active { overflow: hidden; }
.intro-active .site-logo { opacity: 0; }
/* オープニングの引き継ぎ：ヘッダーのロゴは、流れの順（丸棒→帯→下のドット→上のドット）に描き出し、ロゴタイプが続く。
   描き出しはオープニング中だけ。それ以外は完成形のまま表示する */
html.logo-dock .site-logo { opacity: 1; }
.hl-draw { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 0; }
.hl-draw--band { stroke-width: 262px; stroke-dasharray: 1 3; }
.hl-draw--capsule { stroke-width: 212px; stroke-dasharray: 1 4; }
.hl-dot { transform-box: view-box; }
.hl-dot--b { transform-origin: 834.43px 323.61px; }
.hl-dot--a { transform-origin: 834.43px 100px; }
.js .hl-draw--capsule { transition: stroke-dashoffset .55s cubic-bezier(.62, 0, .24, 1), stroke-width .45s var(--ease-out); }
.js .hl-draw--band { transition: stroke-dashoffset .85s cubic-bezier(.62, 0, .24, 1) .15s; }
.js .hl-dot--b { transition: transform .5s var(--ease-out) .62s; }
.js .hl-dot--a { transition: transform .7s cubic-bezier(.3, 1.18, .5, 1) .78s, opacity .15s linear .78s; }
.js .site-logo__word { transition: opacity .8s var(--ease-out) .5s; }
html.intro-active:not(.logo-dock) .hl-draw--capsule { stroke-dashoffset: 1.47; stroke-width: 0; }
html.intro-active:not(.logo-dock) .hl-draw--band { stroke-dashoffset: 1.12; }
html.intro-active:not(.logo-dock) .hl-dot--b { transform: scale(0); }
html.intro-active:not(.logo-dock) .hl-dot--a { opacity: 0; transform: translate(0, 223.61px) scale(.4); }
html.intro-active:not(.logo-dock) .site-logo__word { opacity: 0; }

/* ---------- Page reveal after the opening ---------- */
.js .gnav, .js .menu-toggle { transition: opacity .8s var(--ease-out) .35s; }
.js:not(.page-revealed) .gnav, .js:not(.page-revealed) .menu-toggle { opacity: 0; }
.js [data-seq] {
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--seq, 0) * 90ms + 250ms);
}
.js:not(.page-revealed) [data-seq] { opacity: 0; transform: translate3d(0, 24px, 0); }

/* ---------- Hero ----------
   上段に一行の大きな見出しと、補足・ボタンを中央に置き、下段に画面幅いっぱいのシンボル（写真の窓）を置く。
   シンボルは下端の2割ほどを次の画面へ流れ込ませ、谷間の余白に「Next × Connection」を添える。
   スマホはシンボルを先に見せ、見出し・ボタン・説明を中央にそろえる。 */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 16px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  background: #fff;
}
.hero__inner { display: flex; flex-direction: column; }
.hero__head { position: relative; z-index: 1; text-align: center; }
.hero__title {
  margin-bottom: 20px;
  font-size: clamp(26px, 8.3vw, 46px);
  line-height: 1.3; letter-spacing: .04em;
  font-feature-settings: "palt";
}
.hero__line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__line > span { display: inline-block; white-space: nowrap; }
/* 見出し：1文字ずつ、下から立ち上がる */
.hero__ch { display: inline-block; }
.js .hero__ch { transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms + 350ms); }
.js:not(.page-revealed) .hero__ch { transform: translate3d(0, 108%, 0); }
.hero__row { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__sub { font-size: clamp(15px, .6vw + 12px, 19px); font-weight: 500; letter-spacing: .14em; }
/* サブコピー：中央から左右へ開くように現れる */
.js .hero__sub { clip-path: inset(-.4em 0 -.4em 0); transition: clip-path 1.3s var(--ease-in-out) .9s; }
.js:not(.page-revealed) .hero__sub { clip-path: inset(-.4em 50% -.4em 50%); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.hero__note { display: grid; gap: 18px; margin-top: 28px; text-align: center; }
.hero__lead { color: var(--c-text-2); }
.hero__group {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; color: var(--c-text-2);
}
.hero__group-label {
  padding-right: 14px; border-right: 1px solid var(--c-line-strong);
  font-size: 11px; letter-spacing: .24em; color: var(--blue-600);
}

/* シンボル（写真の窓）：スマホは見出しの上に */
.hero__visual { position: relative; order: -1; width: calc(100% - 24px); max-width: 720px; margin: 8px auto 32px; }
.hero-mark { display: block; width: 100%; height: auto; overflow: visible; }
.hm-fill { fill: var(--gray-200); }
.hero__formula { display: none; }
/* スマホ・タブレット：シンボルと見出しのまとまりを、画面の縦中央に置く */
@media (max-width: 1023px) {
  .hero { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; }
}

@media (min-width: 1024px) {
  .hero { padding: calc(var(--header-h) + clamp(32px, 6vh, 72px)) 0 clamp(64px, 7vw, 112px); }
  .hero__title { margin-bottom: 26px; font-size: clamp(52px, 5.2vw + 4px, 96px); }
  .hero__row { flex-direction: row; justify-content: center; gap: 20px 44px; }
  .hero__visual {
    order: 0;
    /* 画面の高さに合わせ、下端の2割ほどが次の画面へ流れ込む大きさに */
    width: min(calc(100% - 80px), 1200px);
    width: min(calc(100% - 2 * clamp(20px, 2.5vw, 40px)), 1320px, calc((100svh - 370px) * 2.27));
    min-width: min(calc(100% - 40px), 860px);
    max-width: none;
    margin: clamp(36px, 6vh, 64px) auto 0;
  }
  .hero__formula {
    position: absolute; left: 51%; top: 5.5%; z-index: 1;
    display: flex; align-items: center; gap: .8em;
    font-size: clamp(11px, .55vw + 5px, 14px); font-weight: 500; letter-spacing: .32em; color: var(--blue-600);
    text-transform: uppercase; white-space: nowrap;
  }
  .hero__formula .hero__times { font-weight: 300; letter-spacing: 0; color: var(--c-text-3); }
  .hero__note {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px;
    margin-top: clamp(40px, 5vw, 64px); text-align: left;
  }
  .hero__group { justify-content: flex-end; }
}
/* 式は、見出しのあとに文字間を詰めながら現れる */
.js .hero__formula { transition: opacity 1.2s var(--ease-out) 1.2s, letter-spacing 1.8s var(--ease-out) 1.2s; }
.js:not(.page-revealed) .hero__formula { opacity: 0; letter-spacing: .7em; }


/* ---------- 写真シンボルの登場 ----------
   ロゴアニメーションと同じ流れで描く：丸棒が点から伸び、帯が中心線に沿って流れ、下のドットが開き、
   上のドットが下のドットから押し出される。先頭をブランドのグラデーションが走り、写真が後を追う。
   時間はページ表示（.page-revealed）からの秒数。 */
.hero-mark { --hm-flow: cubic-bezier(.62, 0, .24, 1); }
.hm-draw { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 0; }
.hm-draw--band { stroke-width: 262px; stroke-dasharray: 1 3; }
.hm-draw--band.hm-draw--lead { stroke-dasharray: 1.1 3; }
.hm-draw--capsule { stroke-width: 212px; stroke-dasharray: 1 4; }
.hm-draw--capsule.hm-draw--lead { stroke-dasharray: 1.45 4; }
.hero-mark image { transform-box: fill-box; transform-origin: 50% 50%; }
.hm-glow-dot--b, .hm-part--dot-b { transform-box: view-box; transform-origin: 834.43px 323.61px; }
.hm-push, .hm-part--dot-a { transform-box: view-box; transform-origin: 834.43px 100px; }
.hm-glow { opacity: 0; }

.js .hm-draw--capsule { transition: stroke-dashoffset 1.2s var(--hm-flow) .5s, stroke-width .9s var(--ease-out) .5s; }
.js .hm-draw--band { transition: stroke-dashoffset 1.75s var(--hm-flow) .95s; }
.js .hero-mark image { transition: transform 3.2s var(--ease-out); }
.js .hm-part--capsule image { transition-delay: .8s; }
.js .hm-flow image { transition-delay: 1.2s; }
.js .hm-part--dot-b image { transition-delay: 2.3s; }
.js .hm-part--dot-a image { transition-delay: 2.75s; }
.js .hm-glow-dot--b { transition: transform 1s var(--ease-out) 2.15s; }
.js .hm-part--dot-b { transition: transform 1s var(--ease-out) 2.3s; }
.js .hm-push { transition: transform 1.2s cubic-bezier(.3, 1.18, .5, 1) 2.45s, opacity .2s linear 2.45s; }
.js .hm-part--dot-a { transition: transform 1s var(--ease-out) 2.75s; }
.js .hm-glow { transition: opacity .8s linear 3.9s; }

.js:not(.page-revealed) .hm-draw--capsule { stroke-dashoffset: 1.47; stroke-width: 0; }
.js:not(.page-revealed) .hm-draw--band { stroke-dashoffset: 1.12; }
.js:not(.page-revealed) .hero-mark image { transform: scale(1.24); }
.js:not(.page-revealed) .hm-glow-dot--b,
.js:not(.page-revealed) .hm-part--dot-b,
.js:not(.page-revealed) .hm-part--dot-a { transform: scale(0); }
.js:not(.page-revealed) .hm-push { opacity: 0; transform: translate(0, 223.61px) scale(.4); }
.js:not(.page-revealed) .hm-glow { opacity: 1; }

/* ---------- オープニングからの引き継ぎ ----------
   オープニングのシンボルがここへ泳いで着地し、グラデーションが抜けて写真に入れ替わる（intro.js）。
   このときは描き出しをせず、着地まで隠しておき、着地後は写真だけがゆっくり引いて落ち着く。 */
html.js.hm-handoff .hero-mark { visibility: hidden; }
html.js.hm-handoff.hm-landed .hero-mark { visibility: visible; }
html.js.hm-handoff .hero-mark .hm-draw,
html.js.hm-handoff .hero-mark .hm-glow,
html.js.hm-handoff .hero-mark .hm-glow-dot--b,
html.js.hm-handoff .hero-mark .hm-part--dot-b,
html.js.hm-handoff .hero-mark .hm-part--dot-a,
html.js.hm-handoff .hero-mark .hm-push { transition: none; }
html.js.hm-handoff .hero-mark .hm-draw--capsule { stroke-dashoffset: 0; stroke-width: 212px; }
html.js.hm-handoff .hero-mark .hm-draw--band { stroke-dashoffset: 0; }
html.js.hm-handoff .hero-mark .hm-glow { opacity: 0; }
html.js.hm-handoff .hero-mark .hm-glow-dot--b,
html.js.hm-handoff .hero-mark .hm-part--dot-b,
html.js.hm-handoff .hero-mark .hm-part--dot-a,
html.js.hm-handoff .hero-mark .hm-push { transform: none; opacity: 1; }
html.js.hm-handoff .hero-mark image { transform: scale(1.08); transition: none; }
html.js.hm-handoff.hm-landed .hero-mark image { transform: none; transition: transform 2.4s var(--ease-out); }
/* 上のドットの写真は、オープニングで下のドットから押し出されるまで出さない */
html.js.hm-handoff:not(.hm-dot-a-in) .hero-mark .hm-push { opacity: 0; }
/* ---------- Scroll reveal ---------- */
.reveal-ready [data-reveal] {
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal-ready [data-reveal]:not(.is-inview) { opacity: 0; transform: translate3d(0, 32px, 0); }

/* ---------- About ---------- */
.about__head { margin-bottom: clamp(48px, 6vw, 88px); }
.about__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28em .42em;
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(30px, 4vw + 10px, 76px); line-height: 1.2; letter-spacing: .05em;
}
.about__wordmark { width: auto; height: .7em; color: var(--navy-900); }
.about__op { font-weight: 200; color: var(--blue-600); }
.about__words { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .42em; }
.about__grid { display: grid; gap: 48px; }
@media (min-width: 960px) {
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 112px); align-items: center; }
}
.pairs { display: grid; }
.pair {
  display: grid; grid-template-columns: 3.5em minmax(48px, 1fr) 3.5em; align-items: center; gap: .6em;
  padding: 18px 0; border-bottom: 1px solid var(--c-line);
  font-size: clamp(21px, 1.3vw + 12px, 30px);
}
.pair:first-child { border-top: 1px solid var(--c-line); }
.pair__term { font-size: 1em; font-weight: 500; letter-spacing: .08em; line-height: 1.4; white-space: nowrap; }
.pair__term:last-child { text-align: right; }
.pair__link { position: relative; height: 28px; }
.pair__link svg { width: 100%; height: 100%; overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 120ms + 350ms); }
.pair__link path { fill: none; stroke: url(#nx-line-grad); stroke-width: 1.6; stroke-linecap: round; }
.pair__link::before, .pair__link::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  transition: transform .6s var(--ease-out); transform: scale(0);
}
.pair__link::before { left: -2px; background: var(--blue-600); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
.pair__link::after { right: -2px; background: var(--cyan-400); transition-delay: calc(var(--i, 0) * 120ms + 1300ms); }
.pair.is-inview .pair__link svg { clip-path: inset(0 0 0 0); }
.pair.is-inview .pair__link::before, .pair.is-inview .pair__link::after { transform: scale(1); }
.no-js .pair__link svg, .pair:not([data-reveal]) .pair__link svg { clip-path: none; }
.about__lead { margin-bottom: 24px; font-size: clamp(19px, .9vw + 13px, 25px); font-weight: 500; line-height: 1.8; letter-spacing: .06em; font-feature-settings: "palt"; }
.about__body p:not(.about__lead) { color: var(--c-text-2); }

/* ---------- Service ---------- */
.service-list { display: grid; gap: 20px; }
@media (min-width: 600px) { .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .service-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.service-card {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 28px 36px; overflow: hidden;
  background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-card);
}
.service-card::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--grad-line); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 450ms);
}
.service-card.is-inview::after, .no-js .service-card::after { transform: scaleX(1); }
.icon {
  width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: var(--navy-900); overflow: visible;
}
.icon .icon-dot { fill: url(#nx-dot-grad); stroke: none; }
.icon .icon-fill { fill: currentColor; stroke: none; }
.icon .icon-soft { opacity: .3; }
.service-card__icon { width: 52px; height: 52px; margin-bottom: 28px; }
.service-card__num { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--blue-600); }
.service-card__en { font-size: 11px; letter-spacing: .2em; color: var(--c-text-3); }
.service-card__title { margin-bottom: 12px; font-size: 22px; letter-spacing: .08em; }
.service-card__text { font-size: 15px; line-height: 1.9; color: var(--c-text-2); }

.service-merge { position: relative; height: 96px; }
.service-merge__svg { display: none; }
.service-merge__stem { position: absolute; left: 50%; top: 16px; bottom: 8px; width: 16px; margin-left: -8px; }
.service-merge__stem::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 87, 231, .2), #0057E7);
}
@media (min-width: 1024px) {
  .service-merge { height: 220px; }
  .service-merge__svg {
    display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 150px; overflow: visible;
    clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease-in-out) .2s;
  }
  .service-merge.is-inview .service-merge__svg { clip-path: inset(0 0 0 0); }
  .service-merge__svg path { fill: none; stroke: url(#merge-grad); stroke-width: 1.6; stroke-linecap: round; }
  .service-merge__stem { top: 150px; }
}
.service-result { text-align: center; }
.service-result__pre { margin-bottom: 8px; font-size: clamp(15px, .4vw + 13px, 18px); letter-spacing: .12em; color: var(--c-text-2); }
.service-result__main {
  font-size: clamp(23px, 2vw + 12px, 44px); font-weight: 500; line-height: 1.6; letter-spacing: .06em;
  font-feature-settings: "palt";
}
.service-result__main em { font-style: normal; background: linear-gradient(transparent 64%, rgba(34, 218, 254, .38) 64%); padding: 0 .06em; }

/* ---------- Approach ---------- */
.approach__head { display: grid; gap: 28px; margin-bottom: clamp(56px, 7vw, 96px); }
.approach__head .section-head { margin-bottom: 0; }
@media (min-width: 960px) { .approach__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 48px; } }
.approach__lead { margin-bottom: 10px; font-size: clamp(15px, .3vw + 14px, 18px); color: var(--c-text-2); }
.approach__statement { font-size: clamp(21px, 1.4vw + 13px, 34px); font-weight: 500; line-height: 1.7; letter-spacing: .05em; font-feature-settings: "palt"; }
.approach__statement em { font-style: normal; color: var(--blue-600); }

.steps { position: relative; display: grid; padding-left: 44px; }
.steps::before {
  content: ""; position: absolute; left: 11px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
  background: var(--grad-line-v); transform: scaleY(0); transform-origin: top;
  transition: transform 1.6s var(--ease-in-out) .2s;
}
.steps.is-inview::before, .no-js .steps::before { transform: scaleY(1); }
.step {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--c-line);
}
.step:first-child { border-top: 1px solid var(--c-line); }
.step__node {
  position: absolute; left: -40px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue-600);
}
.step__num { grid-column: 2; font-size: 11px; font-weight: 500; letter-spacing: .22em; color: var(--blue-600); }
.step__icon { grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; }
.step__title { grid-column: 2; font-size: 18px; letter-spacing: .06em; line-height: 1.6; }
.step__desc { grid-column: 2; font-size: 14px; line-height: 1.8; color: var(--c-text-2); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding: 48px 0 0; }
  .steps::before {
    left: 10%; right: 10%; top: 13px; bottom: auto; width: auto; height: 2px;
    background: var(--grad-line); transform: scaleX(0); transform-origin: left;
  }
  .steps.is-inview::before, .no-js .steps::before { transform: scaleX(1); }
  .step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; border: 0; }
  .step:first-child { border: 0; }
  .step__node { left: 50%; top: -42px; margin: 0 0 0 -8px; }
  .step__num { margin-bottom: 18px; }
  .step__icon { width: 52px; height: 52px; margin-bottom: 18px; }
  .step__title { margin-bottom: 6px; font-size: 19px; }
}
.approach__closing {
  margin-top: clamp(56px, 7vw, 96px); text-align: center;
  font-size: clamp(18px, .9vw + 13px, 26px); font-weight: 500; line-height: 1.8; letter-spacing: .06em;
  font-feature-settings: "palt";
}

/* ---------- Mission / Vision ---------- */
.band-navy {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(55% 45% at 92% 6%, rgba(0, 87, 231, .38), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(34, 218, 254, .12), transparent 70%),
    var(--navy-900);
}
.mv__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .mv__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 104px); } }
.mv__title {
  margin-bottom: 32px;
  font-size: clamp(28px, 2.4vw + 14px, 52px); line-height: 1.45; letter-spacing: .06em;
  font-feature-settings: "palt";
}
.mv__text p:not(.eyebrow):not(.mv__em), .mv__vision-body p { color: rgba(255, 255, 255, .8); }
.mv__text p + p, .mv__vision-body p + p { margin-top: 14px; }
.mv .mv__em { margin-top: 28px; font-size: clamp(17px, .5vw + 14px, 20px); font-weight: 500; color: #fff; }
.mv--vision { padding-top: 0; }
.mv--vision .container { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--section-y); }
.mv__vision-grid { display: grid; gap: 8px 64px; margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 960px) { .mv__vision-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; } .mv__vision-grid .mv__title { margin-bottom: 0; } }
.vision-photo { position: relative; overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 16 / 7; background: var(--navy-800); }
.vision-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.vision-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 27, 51, 0) 55%, rgba(11, 27, 51, .4)); }
@media (max-width: 599px) { .vision-photo { aspect-ratio: 4 / 3; } }

.cycle { width: 100%; max-width: 440px; margin-inline: auto; }
.cycle__svg { width: 100%; height: auto; overflow: visible; }
.cycle__ring { fill: none; stroke: url(#cycle-grad); stroke-width: 2; opacity: .85; }
.cycle__arrows path { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cycle__node circle { fill: var(--navy-800); stroke: rgba(255, 255, 255, .3); stroke-width: 1.2; }
.cycle__node text { fill: #fff; font-family: var(--font-jp); font-size: 16px; font-weight: 500; letter-spacing: .06em; text-anchor: middle; }
.cycle__center-en { fill: rgba(255, 255, 255, .6); font-family: var(--font-en); font-size: 13px; font-weight: 300; letter-spacing: .28em; text-anchor: middle; }

/* ---------- Roles ---------- */
.roles__list { position: relative; display: grid; gap: clamp(72px, 9vw, 128px); padding-left: 44px; --progress: 0; }
@media (min-width: 960px) { .roles__list { padding-left: 88px; } }
.roles__line { position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
@media (min-width: 960px) { .roles__line { left: 23px; } }
.roles__line-fill { position: absolute; inset: 0; background: var(--grad-line-v); transform: scaleY(var(--progress)); transform-origin: top; }
.role { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .role { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 88px); } }
.role__marker {
  position: absolute; left: -44px; top: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-line-strong);
  transition: border-color .45s, background-color .45s;
}
@media (min-width: 960px) { .role__marker { left: -76px; top: 6px; } }
.role.is-reached .role__marker { border-color: var(--blue-600); background: var(--blue-600); box-shadow: inset 0 0 0 5px #fff; }
.role__num { margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--blue-600); }
.role__title { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.role__en { font-size: clamp(40px, 3.4vw + 16px, 80px); font-weight: 300; line-height: 1; letter-spacing: .1em; }
.role__ja { font-size: clamp(20px, .8vw + 15px, 26px); font-weight: 500; line-height: 1.6; letter-spacing: .06em; font-feature-settings: "palt"; }
.role__text { max-width: 30em; color: var(--c-text-2); }
.role__media { position: relative; overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 4 / 3; background: var(--gray-200); }
.role__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
.role.is-inview .role__media img, .no-js .role__media img { transform: none; }

/* ---------- Business ---------- */
.biz { display: grid; gap: clamp(56px, 7vw, 96px); }
.biz-group { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) {
  .biz-group { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); }
  .biz-group--reverse .biz-group__media { order: 2; }
}
.biz-group__media { overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 3 / 2; background: var(--gray-200); }
.biz-group__media img { width: 100%; height: 100%; object-fit: cover; }
.biz-group__en { margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .26em; color: var(--blue-600); }
.biz-group__title { margin-bottom: 16px; font-size: clamp(24px, 1.2vw + 16px, 34px); line-height: 1.5; letter-spacing: .06em; font-feature-settings: "palt"; }
.biz-group__text { margin-bottom: 28px; color: var(--c-text-2); }
.biz-list { display: grid; border-top: 1px solid var(--c-line-strong); }
@media (min-width: 600px) { .biz-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.biz-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 4px; border-bottom: 1px solid var(--c-line-strong);
  font-size: 17px; font-weight: 500; letter-spacing: .06em;
}
.biz-list__num { min-width: 2em; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--blue-600); }

.future {
  position: relative; overflow: hidden;
  display: grid; gap: 24px 64px;
  margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(32px, 5vw, 64px);
  background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-card);
}
.future::after {
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 218, 254, .16), transparent 70%); pointer-events: none;
}
@media (min-width: 960px) { .future { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; } }
.future__head .eyebrow { margin-bottom: 14px; }
.future__title { margin-bottom: 8px; font-size: clamp(22px, 1vw + 16px, 30px); letter-spacing: .06em; }
.future__copy { font-size: 15px; letter-spacing: .12em; color: var(--c-text-2); }
.future__body { position: relative; z-index: 1; }
.future__body > p:first-child { color: var(--c-text-2); }
.future__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.future__list li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill);
  background: #fff; font-size: 15px; font-weight: 500; letter-spacing: .04em;
}
.future__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-brand); }
.future__note { font-size: 14px; color: var(--c-text-3); }

/* ---------- Message ---------- */
.message { text-align: center; overflow: hidden; }
.message::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(48px, 6vw, 88px);
  background: linear-gradient(180deg, transparent, var(--blue-600));
}
.message__inner { max-width: 1000px; }
.message__label { margin-bottom: 28px; font-size: 15px; letter-spacing: .2em; color: var(--c-text-2); }
.message__statement {
  margin-bottom: clamp(40px, 5vw, 64px);
  font-size: clamp(24px, 2.4vw + 12px, 50px); font-weight: 500; line-height: 1.7; letter-spacing: .06em;
  font-feature-settings: "palt";
}
.mark { background: linear-gradient(transparent 66%, rgba(34, 218, 254, .34) 66%); }
.message__body { max-width: 40em; margin-inline: auto; color: var(--c-text-2); }
.message__body p + p { margin-top: 14px; }
.message__body .message__em { margin-block: 28px; font-size: clamp(17px, .5vw + 14px, 20px); font-weight: 500; line-height: 1.9; color: var(--c-text); }

/* ---------- Company ---------- */
.company__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .company__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } .company__grid .section-head { margin-bottom: 0; } }
.company-table { border-top: 1px solid var(--navy-900); }
.company-table__row { display: grid; gap: 6px 32px; padding: 22px 4px; border-bottom: 1px solid var(--c-line); }
@media (min-width: 600px) { .company-table__row { grid-template-columns: 8em minmax(0, 1fr); } }
.company-table dt { font-weight: 500; }
.company-table dd { color: var(--c-text-2); }
.company-table__list { display: flex; flex-wrap: wrap; }
.company-table__list li:not(:last-child)::after { content: "、"; }
.tbd {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 3px 12px 3px 4px; border: 1px dashed #C9A13B; border-radius: 8px;
  background: #FFFBEF; color: #6B5310; font-size: 14px; line-height: 1.6;
}
.tbd::before { content: "要確認"; padding: 1px 8px; border-radius: 5px; background: #F4D77A; color: #4A3700; font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 96px); align-items: start; }
  .contact__head { position: sticky; top: calc(var(--header-h) + 40px); }
}
.contact__copy { margin: 12px 0 16px; font-size: clamp(18px, .6vw + 14px, 22px); font-weight: 500; letter-spacing: .12em; }
.contact__text { color: var(--c-text-2); }
/* 白背景のセクションに置くため、カードは淡いグレー面で区切る（入力欄は白） */
.form { display: grid; gap: 28px; padding: clamp(24px, 4vw, 56px); background: var(--gray-50); border: 1px solid var(--c-line); border-radius: var(--radius-l); }
.form__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.form__row { display: grid; gap: 28px; }
@media (min-width: 720px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.form__group { display: grid; gap: 10px; align-content: start; }
.form__label { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 15px; font-weight: 500; }
.req, .opt { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.8; letter-spacing: .06em; }
.req { background: var(--navy-900); color: #fff; }
.opt { background: var(--gray-100); color: var(--c-text-3); border: 1px solid var(--c-line); }
.input {
  width: 100%; min-height: 54px; padding: 13px 16px;
  border: 1px solid var(--c-line-strong); border-radius: 12px; background: #fff;
  font-size: 16px; line-height: 1.6;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input:hover { border-color: #9FB0C6; }
.input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(0, 87, 231, .14); }
.input[aria-invalid="true"] { border-color: var(--c-danger); background: #FFF8F8; }
.input--area { min-height: 180px; resize: vertical; }
.form__choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 18px 8px 14px;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); background: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.choice span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--c-line-strong); background: #fff; box-shadow: inset 0 0 0 3px #fff;
  transition: background-color .2s, border-color .2s;
}
.choice:hover span { border-color: #9FB0C6; }
.choice input:checked + span { border-color: var(--blue-600); background: #F1F6FF; }
.choice input:checked + span::before { border-color: var(--blue-600); background: var(--blue-600); }
.choice input:focus-visible + span { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.form__fieldset[aria-invalid="true"] .choice span { border-color: #E6A1A9; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.8; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--blue-600); }
.check input[aria-invalid="true"] { outline: 2px solid var(--c-danger); outline-offset: 2px; }
.form__error { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--c-danger); }
.form__error::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.form__error[hidden] { display: none; }
.form__submit { display: flex; justify-content: center; }
@media (max-width: 419px) {
  .form { padding: 28px 18px; }
  .form__submit .btn { width: 100%; padding: 0 12px 0 22px; gap: 10px; font-size: 14px; letter-spacing: .04em; }
  .choice { max-width: 100%; }
}
.form__status { padding: 18px 20px; border: 1px solid #BBD6FF; border-radius: 12px; background: #EEF5FF; font-size: 14px; line-height: 1.8; }
.form__status[hidden] { display: none; }
/* 送信先を設定するまではフォームを止めておく（index.html の fieldset.form__body に disabled） */
.form__notice { margin: 0; padding: 16px 20px; border: 1px solid #BBD6FF; border-radius: 12px; background: #EEF5FF; font-size: 14px; font-weight: 500; line-height: 1.8; }
.form__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form__body:disabled { opacity: .5; }
.form__body:disabled .choice span, .form__body:disabled .check, .form__body:disabled .input, .form__body:disabled .btn { cursor: not-allowed; }
.form__body:disabled .btn--primary:hover { background: var(--navy-900); }
.form__body:disabled .btn:hover .btn__arrow { transform: none; }

/* ---------- Footer ---------- */
.site-footer { padding: clamp(64px, 8vw, 104px) 0 104px; background: var(--navy-900); color: #fff; }
.site-footer__top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 960px) { .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.site-footer__logo { display: block; width: 220px; color: #fff; border-radius: 6px; }
.site-footer__logo svg { width: 100%; height: auto; overflow: visible; }
.site-footer__tagline { margin-top: 20px; font-size: 13px; letter-spacing: .32em; color: rgba(255, 255, 255, .74); }
.site-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 0 40px; }
@media (min-width: 720px) { .site-footer__nav ul { grid-template-columns: repeat(4, auto); } }
/* 指で押しやすいよう、リンクの高さを44px確保する（行の間隔もこの高さでつくる） */
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; font-size: 12px; color: rgba(255, 255, 255, .66); }
.site-footer__copy small { font-size: inherit; }

.to-top {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 40;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--navy-900); box-shadow: 0 10px 28px -10px rgba(11, 27, 51, .4);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s, transform .35s var(--ease-out), visibility .35s, color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 18px; height: 18px; }
.to-top:hover { color: var(--blue-600); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal] { transition: opacity .4s linear; transition-delay: 0s; }
  .reveal-ready [data-reveal]:not(.is-inview) { transform: none; }
  .js [data-seq], .js .hero__ch, .js .hero__formula { transition: opacity .4s linear; transition-delay: 0s; }
  .js:not(.page-revealed) [data-seq], .js:not(.page-revealed) .hero__ch { transform: none; }
  .js:not(.page-revealed) .hero__formula { letter-spacing: .32em; }
  .js:not(.page-revealed) .hero__ch { opacity: 0; }
  .js .hero__sub { clip-path: none; transition: opacity .4s linear; }
  .js:not(.page-revealed) .hero__sub { clip-path: none; opacity: 0; }
  /* 写真シンボル：描き出しをせず、全体を短いフェードで表示 */
  .hm-glow { display: none; }
  .js .hero-mark { transition: opacity .4s linear; }
  .js:not(.page-revealed) .hero-mark { opacity: 0; }
  .js .hm-draw, .js .hero-mark image, .js .hm-glow-dot--b, .js .hm-part--dot-b, .js .hm-part--dot-a, .js .hm-push { transition: none; }
  .js:not(.page-revealed) .hm-draw--capsule { stroke-dashoffset: 0; stroke-width: 212px; }
  .js:not(.page-revealed) .hm-draw--band { stroke-dashoffset: 0; }
  .js:not(.page-revealed) .hero-mark image,
  .js:not(.page-revealed) .hm-part--dot-b,
  .js:not(.page-revealed) .hm-part--dot-a,
  .js:not(.page-revealed) .hm-push { transform: none; opacity: 1; }
  .pair__link svg, .service-merge__svg { transition: none; clip-path: none !important; }
  .js .hl-draw, .js .hl-dot, .js .site-logo__word { transition: none; }
  .pair__link::before, .pair__link::after { transition: none; transform: none; }
  .steps::before, .service-card::after { transition: none; transform: none !important; }
  .role__media img { transition: none; transform: none; }
  .btn, .btn__arrow, .link-arrow::after { transition: none; }
}