@charset "utf-8";
/* ============================================================
   NOEX 次期サイト — コンポーネント CSS
   ------------------------------------------------------------
   出典: preview.studio.site/live/NxqgnDzEO1/noex-top を
         Chrome DevTools Protocol で実測（2026-09-11、幅 1440 / 768 / 390）
         スナップショット: content/snapshots/noex-top-2026-09-11/

   site.css（デザイントークン）は人間が管理するため触らない。
   トークンに無い実測値は下の「実測の追加値」節に隔離してある。
   site.css 側へ取り込むかどうかは人間が判断する。
   ============================================================ */

/* ---------- 実測の追加値 ----------
   site.css のトークンと食い違った／トークンに無かった実測値。
   ここだけ見れば差分が分かるようにまとめてある。
-------------------------------------------- */
/* ============================================================
   site.css との食い違いを、ここで打ち消す
   ------------------------------------------------------------
   site.css は人間が管理するファイルなので触らない。
   実測と違うところだけ、こちらで上書きする。

   ① 英字も和文と同じ "Noto Sans JP"。
      site.css は --f-en に Inter を先頭に置いているが、Studio は
      英字見出し（FEATURE / MESSAGE など）も Noto Sans JP で描いている。
      別の書体になると、字幅も見た目も全ページで変わる。
   ② 見出しの字間は normal。site.css の --ls-head（.01em）は入らない。
   ============================================================ */

h1, h2, h3, h4 { letter-spacing: normal; }

/* ============================================================
   日本語の折り返し（BudouX）
   ------------------------------------------------------------
   <wbr> は「ここで折り返してよい」を足すだけで、それ以外の場所で
   折り返すのを止めない。既定のままでは今までどおり文字単位で割れる。
   文節以外で割らせないために word-break: keep-all を併せて指定する。
   長すぎて 1 行に入らないときだけ、どこでも割ってよい（overflow-wrap）。
   ============================================================ */

.page-p, .page-lead, .page-h, .page-subh, .page-ul li,
.feature__text, .media__text, .page-hero__p, .page-hero__sub, .page-hero__title,
.job__name, .job__text, .qa__q, .qa__a, .qa__text,
.statement p, .words__body span,
.contact__text, .contact__label, .numbers__label, .numbers__sub,
.feature__label, .docs__name, .media__label, .link-card__sub,
.page-note, .spec__group, .spec__item, .spec td, .gnav__link, .sitemap__head,
.sec-lead, .sec-desc, .sec-head__ja,
.business-card__name, .business-card__sub, .business-card__body,
.product-card__name, .about-row__ja, .support__label, .support__title,
.page-hero__note, .media__head, .page-table dt, .page-table dd,
.link-card__name, .link-card__text, .job__field, .numbers__text,
.article__title, .article__h, .article__p, .article__ul li,
.news-item__title,
.sec-head__en, .sec-head__ja, .page-sec__en, .page-sec__ja {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:root {
  /* 英字も和文と同じ書体。site.css は Inter を先頭に置いているが、
     Studio は英字見出しも Noto Sans JP で描いている（実測）。 */
  --f-en: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;

  /* コンテナ: 実測 1280px（site.css の --container は 1188px） */
  --container-top: 1280px;
  /* ヘッダーの実際の高さ。ドロワーの上端をここへ合わせる。
     site.css の --header-h は幅で 72/60 と変わるので、
     ドロワーの基準に使うと 769〜1100px で 12px ずれる。 */
  --header-real: 60px;

  /* 級数: site.css に無い段 */
  --fs-hero:      80px;  /* ヒーロー "make our next"（--fs-display は 56px） */
  --fs-sec-en:    56px;  /* 英字セクション見出し。--fs-display と同値だが用途が別 */
  --fs-sec-ja:    22px;  /* 和文セクションラベル */
  --fs-lead:      26px;  /* セクションのリード文 */
  --fs-nav:       17px;  /* ヘッダーナビ */
  --fs-band:      48px;  /* SUPPORT / CONTACT の大見出し */

  /* 行間（実測の px 値。トークンの倍率では再現できない） */
  --lh-sec-en:    64px;
  --lh-sec-ja:    39px;
  --lh-lead:      35px;
  --lh-desc:      26px;
  --lh-card:      32px;
  --lh-card-sm:   28px;

  /* 角丸: 実測はピル形状が 999px ではなく実寸指定 */
  --r-tab:        23px;  /* 製品タブ */
  --r-btn:        28px;  /* VIEW MORE */

  /* 部品寸法 */
  --btn-w:       191px;
  --btn-h:        56px;
  --icon-28:      28px;
  --icon-34:      34px;
  --icon-75:      75px;  /* 事業カードの円弧アイコン枠 */
}

/* ============================================================
   共通
   ============================================================ */

.container-top {
  width: 100%;
  /* 内容幅を 1280px に保つため、左右の余白ぶんを max-width に足す */
  max-width: calc(var(--container-top) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクション見出し（和文ラベル＋英字タイトル） */
.sec-head__ja {
  font-size: var(--fs-sec-ja);
  line-height: var(--lh-sec-ja);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* 殻の和名に添えるブランドの標章（Kpnetworks の製品ページなど）。
   字の高さに合わせると潰れるので、和名 1 行ぶんより少し大きく取る。 */
.sec-head__ja--brand { display: flex; align-items: center; gap: 12px; }
.sec-head__logo { display: block; width: auto; height: 30px; }
/* 標章に行き先があるとき。字の色は変えず、指したときだけ下線を出す。
   赤くすると、その下の大きい赤（製品名）と役割が混ざって見える。 */
.sec-head__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.sec-head__brand:hover span { text-decoration: underline; }

.sec-head__en {
  font-family: var(--f-en);
  font-size: var(--fs-sec-en);
  line-height: var(--lh-sec-en);
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  margin-top: var(--sp-3);
}

.sec-lead {
  margin-top: 28px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.sec-lead--gap44 { margin-top: 44px; }   /* OUR BUSINESS */
.sec-lead--gap18 { margin-top: 18px; }   /* RECRUIT */

.sec-desc {
  margin-top: var(--sp-6);   /* 実測 24px */
  max-width: 914px;
  font-size: 15px;
  line-height: var(--lh-desc);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* 赤い円形アイコンボタン */
.icon-circle {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon-28);
  height: var(--icon-28);
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-surface);
}
.icon-circle svg { width: 16px; height: 16px; }
.icon-circle--lg { width: var(--icon-34); height: var(--icon-34); }
.icon-circle--lg svg { width: 20px; height: 20px; }

/* VIEW MORE ボタン */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 35px;
  gap: var(--sp-3);
  width: var(--btn-w);
  height: var(--btn-h);
  border-radius: var(--r-btn);
  background: var(--c-accent);
  color: var(--c-surface);
  font-family: var(--f-en);
  font-size: var(--fs-body);
  /* 親（.contact__title）の 64px を継いでしまうので、ここで戻す。
     実測 Studio は 28px。継いだままだと字の位置が 4px ずれる。 */
  line-height: var(--lh-card-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.btn-more:hover { background: var(--c-accent-hover); color: var(--c-surface); }

.btn-more svg { width: 8px; height: 13px; flex: none; }

.btn-more--invert { background: var(--c-surface); color: var(--c-accent); }
.btn-more--invert:hover { background: var(--c-surface-alt); color: var(--c-accent); }

/* ============================================================
   ヘッダー
   実測: 高さ 60px / 背景 rgba(255,255,255,.9) / ナビ 17px 700
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-real);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ロゴは flex アイテム。既定では縮むので、ナビが伸びると潰れる
   （実測: 幅 834px でロゴの幅が 0 になっていた）。 */
/* 実測: デザインのロゴは 98×27.9 で、上端 y=14.5。ヘッダー（60px）の
   中心に置くと y=16 になるので、下に 3.1px 足して中心だけ 1.5px 上げる。 */
.site-header__logo { flex: none; display: block; width: 98px; margin-bottom: 3.1px; }
.site-header__logo img { display: block; width: 98px; }

/* ロゴの動き（現行サイト noex-inc.co.jp から移植）。
   線を引いてから塗る。stroke-dasharray を path の長さより大きく取り、
   dashoffset を同じだけずらした状態から 0 へ動かすと「描かれる」ように見える。
   塗りは後半（50% 以降）で入るので、先に輪郭だけが出る。 */
.logo-anime { display: block; width: 100%; height: auto; overflow: visible; }
.logo-anime path {
  fill: var(--c-accent);
  stroke: var(--c-accent);
  stroke-width: 1;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
}
/* 読み込み時に 1 回だけ描く */
.site-header__logo .logo-anime path { animation: logo-draw 1.5s ease-in both; }

/* マウスを乗せると、ロゴの下に赤い線が伸びる。
   実測（現行サイト noex-inc.co.jp）:
     線は 4 本に分かれていて、41px ずつ隙間なく並ぶ。
     左から順に 0 / .05 / .1 / .15 秒ずらして、それぞれ左端から伸びる。
     伸び切ると 163px ── ロゴ（100px）より 63px 長い。
   1 本をただ伸ばすのとは見え方が違う。伸びている途中に継ぎ目の間が
   できて、それが最後につながる。そこがこの動きの眼目なので、
   4 本のまま持ってきている。 */
.site-header__logo { position: relative; }
.logo-rule {
  position: absolute;
  left: 0;
  bottom: -4px;
  display: flex;
  /* ロゴ幅 98px に対して、現行サイトと同じ 1.63 倍 */
  width: 160px;
}
.logo-rule i {
  display: block;
  flex: 1 1 auto;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.4, .4, 0, 1);
}
.site-header__logo:hover .logo-rule i,
.site-header__logo:focus-visible .logo-rule i { transform: scaleX(1); }
.logo-rule i:nth-child(2) { transition-delay: .05s; }
.logo-rule i:nth-child(3) { transition-delay: .1s; }
.logo-rule i:nth-child(4) { transition-delay: .15s; }

@keyframes logo-draw {
  0%   { stroke-dashoffset: 2000; stroke-width: 10; fill: transparent; }
  50%  { fill: transparent; }
  100% { stroke-dashoffset: 0; stroke-width: 1; fill: var(--c-accent); }
}

/* 動きを減らす設定の人には見せない（止まった完成形だけ出す） */
@media (prefers-reduced-motion: reduce) {
  .site-header__logo .logo-anime path { animation: none; }
  .logo-rule i { transition: none; }
}

/* li をヘッダー高いっぱいにして、ボタン→パネル間に隙間を作らない。
   隙間があると、そこを通った時点で mouseleave が出て閉じてしまう。 */
.gnav { height: 100%; }

.gnav > ul {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

.gnav__item {
  position: relative;   /* ドロップダウンの位置の基準 */
  display: flex;
  align-items: center;
  height: 100%;
}
/* 開いている項目を前に出す。パネルは隣の項目の上へ広がるが、重なり順は
   並び順で決まるので、そのままだと隣の項目のほうが前に来る。すると
   パネルの上を通っているつもりが隣の項目に入り、そこで閉じてしまう。 */
.gnav__item[data-open="true"] { z-index: 2; }


.gnav__link {
  /* button の既定パディング（1px 6px）が残ると、項目が 12px 広がって
     ナビ全体が 60px ずれる。実測で Studio と突き合わせて気づいた。 */
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  /* Studio 実測: 字そのものが y 16〜41（帯は 60px）。真ん中に置くと
     1.5px 下がって見えるので、Studio は少し上へ寄せている。字は下が
     詰まって見えるので、幾何学的な中央より少し上のほうが中央に見える。
     ロゴの 3.1px と同じ考え方。 */
  line-height: 28px;
  margin-bottom: 3px;
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  color: var(--c-body);
  white-space: nowrap;
}
.gnav__item--plain > .gnav__link { color: var(--c-ink); }
.gnav__link:hover { color: var(--c-accent); }

.gnav__caret {
  width: 20px;
  height: 20px;
  color: var(--c-faint);
  transition: transform .3s cubic-bezier(.4, .4, 0, 1);
}
/* 開くと矢印が反時計回りに回り、閉じると時計回りで戻る。
   実測: Studio の当たりは 0.3s cubic-bezier(0.4, 0.4, 0, 1)。
   マイナス方向へ回すと反時計回り、0 へ戻すと時計回りになる。
   （以前「回らない」と書いていたのは、計測が静止した状態しか
     見ていなかったため。実際の画面では回っている） */
.gnav__item[data-open="true"] .gnav__caret { transform: rotate(-180deg); }

/* ドロップダウン
   実測: 画面全幅のバーではなく、項目の真下に出る小箱。
     箱  x=414（見出し 434 の 20px 外側）/ y=60（ヘッダー直下）/ w=255 / h=198
         背景 rgba(255,255,255,.9)（ヘッダーと同じ）/ 角丸は下だけ 6px / 影なし
     項目 16px 500 #333333、高さ 20px、送り 30px（間隔 10px）
     余白 上 8px / 左右 20px / 下 20px */
/* パネルは高さ 0 から下へ生える（実測: overflow hidden のまま高さが伸びる）。
   display の切り替えでは動きが付かないので、grid の行を 0fr → 1fr にする。
   中身の高さが決まっていなくても動かせる、いまのところ唯一の書き方。 */
.gnav__panel {
  position: absolute;
  /* 当たり判定は文字のすぐ下（50% + 文字の半分）から。ここが空くと、
     斜めに動かしたときに隣の項目へ入って閉じてしまう。
     ただし白い面まで上げると、ナビの帯と重なって濃く見える。
     そこで、上の 16px は透明な余白にして、面は帯の下から始める。 */
  top: calc(50% + 14px);
  padding-top: 16px;
  left: -20px;
  display: block;
  width: max-content;
  min-width: 215px;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height .3s cubic-bezier(.4, .4, 0, 1);
}
/* 閉じているときに高さが残らないよう、余白は内側の箱が持つ。
   親に padding を置くと 0fr でも 28px 残って、線のように見える。 */
/* 白い面はこちらが持つ。パネル側は位置と当たり判定だけを受け持つ。 */
.gnav__panel__inner {
  padding: 8px 20px 20px;
  background: rgba(255, 255, 255, .9);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* 右寄りの項目のパネルは、設計幅より狭いと画面の外へ出る
   （実測: 幅 1280px で「採用情報」のパネルが右へ 26px はみ出す）。
   狭いときは右端へ寄せる。

   2026-09-13、お問い合わせをサポートの中へ移して「採用情報」が
   いちばん右になった。以前いちばん右だった「お問い合わせ」はパネルを
   持たなかったので 1440px でも収まっていたが、いまは 1440px でも
   右へ 108px はみ出す。最後の 1 つはどの幅でも右端へ寄せる。 */
.gnav__item:last-child > .gnav__panel { left: auto; right: -20px; }
@media (max-width: 1439px) {
  .gnav__item:nth-last-child(-n+2) > .gnav__panel { left: auto; right: -20px; }
}
/* 開いたときの高さ。実測 198px だが、項目数の多い節（サポート 4 件など）でも
   切れないよう、実際の高さより十分大きい値を上限にする。
   max-height は「上限」なので、これより低い中身はそのままの高さで止まる。 */
.gnav__item[data-open="true"] .gnav__panel {
  max-height: 400px;
  pointer-events: auto;
}

.gnav__panel ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gnav__panel a {
  display: block;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--c-body);
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.gnav__panel a:hover { opacity: .3; color: var(--c-body); }

/* 代表画像つきの節（製品情報）。絵を上、名前を下にして横に並べる。
   絵が無い節は上の縦一列のままなので、ここだけ向きを変える。 */
/* 上の .gnav__panel ul より詳細度を下げると縦一列のまま勝てない。
   同じ「クラス 2 つ」にして、後に書いたこちらを効かせる。 */
.gnav__panel ul.gnav__panel__pics { flex-direction: row; gap: 20px; }
.gnav__panel__pics a { width: 160px; text-align: center; white-space: normal; }
.gnav__pic {
  display: block;
  width: 160px;
  height: 100px;
  margin-bottom: 10px;
  object-fit: contain;
  /* 地色は敷かない。絵は背景が抜いてあるので、パネルの白の上に直に置く。
     薄灰を敷くと、絵の縦横比と枠の比が違うぶんだけ上下（または左右）に
     帯が出て、絵が半端に切り取られたように見える。 */
  border-radius: var(--r-sm);
}

.gnav__burger { display: none; }

/* ============================================================
   ヒーロー
   実測: 100vh / 背景は 1920x1080 の mp4 / 見出し 80px 700
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #FFFFFA;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__title {
  position: absolute;
  /* デザインは 1240px の中身を中央に置き、その左端から書き始める
     （実測: 1920→340 / 1600→180 / 1440→100 / 1280 以下→40）。
     100px で固定すると、設計幅より広い画面ほど左に置き去りになる。 */
  left: max(40px, calc((100% - 1240px) / 2));
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--f-en);
  font-size: var(--fs-hero);
  line-height: 84px;
  font-weight: var(--fw-bold);
  /* 実測: 字間 3.2px。入れないと make が 216px（デザインは 229px）になり、
     3 行の右端が全部内側へ寄る。影はデザインに無いので付けない。 */
  letter-spacing: 3.2px;
  color: #FFFFFA;
}

/* ============================================================
   PRODUCT
   実測: 背景 #FFFFFF / 2 パネルを横スライドで切替
   ============================================================ */

.section-product { background: var(--c-surface); overflow: hidden; }

.product__viewport { overflow: hidden; }

.product__track {
  display: flex;
  align-items: flex-start;
  transition: transform 420ms var(--ease);
}

.product__panel {
  flex: 0 0 100%;
  width: 100%;
}

.product__tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: 45px;
}

.product__tab {
  height: 46px;
  /* 字は下が詰まって見えるので、幾何学的な中央より少し上に置く。
     実測（Studio）: 字そのものが 2px 上にある。ヘッダーと同じ考え方。 */
  padding-bottom: 4px;
  padding-inline: var(--sp-6);
  border: 1px solid var(--c-muted);
  border-radius: var(--r-tab);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.product__tab[aria-selected="true"] {
  background: var(--c-muted);
  color: var(--c-surface);
}

/* タブと同じ行に並ぶ但し書き。タブの箱（46px）の中で縦の中央に置く。 */
.product__note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-left: var(--sp-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
}
.product__note a { text-decoration: underline; }

/* カード列（横スクロール） */
.product__rail {
  display: flex;
  gap: var(--sp-6);
  margin-top: 45px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.product__rail::-webkit-scrollbar { display: none; }

.product-card {
  flex: 0 0 628px;
  display: flex;
  flex-direction: column;
  height: 601px;
  padding: 24px 30px;
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  scroll-snap-align: start;
}

.product-card--sm { flex-basis: 301px; height: 397px; padding: 24px; }

.product-card__name {
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  line-height: 48px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.product-card--sm .product-card__name { line-height: 36px; }

.product-card__copy {
  /* 実測（Studio）: 製品名のすぐ下に続き、あいだの余白は 0。
     8px 空けると、名前と惹句が離れて見える。 */
  margin-top: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-card);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.product-card__figure {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  margin-top: var(--sp-4);
}
.product-card__figure img { max-height: 100%; object-fit: contain; }

/* 前後送り（モバイルで表示） */
.product__nav { display: none; }

/* ============================================================
   OUR BUSINESS
   実測: 背景 #F6F6F6 / カード 632x245 角丸 6px 白
   ============================================================ */

.section-business { background: var(--c-surface-alt); }

.business__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: 64px;
}

.business-card {
  position: relative;
  display: block;
  min-height: 245px;
  padding: 30px 45px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  overflow: hidden;
}

.business-card__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  color: var(--c-accent);
}
/* 実測: 見出しの左に 80px のアイコン画像が入る（768px 以下は 48px） */
.business-card__icon { flex: none; width: 80px; }
.business-card__name { font-size: var(--fs-sec-ja); line-height: 48px; font-weight: var(--fw-bold); }
.business-card__sub  { font-size: 18px; line-height: 43px; font-weight: var(--fw-bold); }

.business-card__body {
  display: block;
  width: 77%;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-card-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}

/* 右下の 1/4 円弧＋シェブロン
   実測: 75x75 をカード右下角に flush、上と左だけ 2px のボーダー、
   border-radius は左上のみ 100%。正円をずらすのではない。 */
.business-card__arc {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--icon-75);
  height: var(--icon-75);
  border-top: 2px solid var(--c-accent);
  border-left: 2px solid var(--c-accent);
  border-right: 0;
  border-bottom: 0;
  border-radius: 100% 0 0 0;
  pointer-events: none;
}
.business-card__chev {
  position: absolute;
  right: 17px;   /* 実測: カード右下角から 17px 内側 */
  bottom: 17px;
  width: 24px;
  height: 24px;
  color: var(--c-accent);
}

/* ホバー: 1/4 円が赤で塗りつぶされ、シェブロンが白へ反転する */
.business-card__arc  { transition: background var(--dur) var(--ease); }
.business-card__chev { transition: color var(--dur) var(--ease); }
.business-card:hover .business-card__arc  { background: var(--c-accent); }
.business-card:hover .business-card__chev { color: var(--c-surface); }

/* ============================================================
   ABOUT NOEX
   実測: 背景 #FFFFFF / 右カラムに 640x140 の画像リンク 3 本
   ============================================================ */

.section-about { background: var(--c-surface); }

.about__layout {
  display: grid;
  align-items: start;
  /* 左は実測 522px だが、説明文が 1 行に収まるよう余白側へ広げてある
     （右列は space-between で x=720 に固定されるので見た目は変わらない） */
  grid-template-columns: minmax(0, 600px) minmax(0, 640px);
  justify-content: space-between;
  column-gap: 0;
}

.about__intro { padding-top: 60px; }   /* 実測: 右の行より 60px 下から始まる */
.about__list { display: flex; flex-direction: column; gap: 14px; }

.about-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 140px;
  padding: 56px 40px 56px 50px;
  border-radius: var(--r-sm);
  overflow: hidden;
  color: var(--c-surface);
}
.about-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--row-bg);
  background-size: cover;
  background-position: center;
  transition: transform 600ms var(--ease);
}
.about-row:hover::before { transform: scale(1.04); }
.about-row > * { position: relative; }
.about-row:hover { color: var(--c-surface); }

.about-row__label { display: flex; align-items: center; gap: var(--sp-6); width: 248px; }
.about-row__en, .about-row__ja { white-space: nowrap; }
.about-row__en {
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  line-height: 28px;
  font-weight: var(--fw-bold);
  text-shadow: 1px 1px 6px rgba(0, 0, 0, .35);
}
.about-row__ja {
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: var(--fw-bold);
  text-shadow: 1px 1px 6px rgba(0, 0, 0, .35);
}

/* ============================================================
   NEWS
   実測: 背景 #F6F6F6 / 2 カラム、右に一覧
   ============================================================ */

.section-news { background: var(--c-surface-alt); }

/* MOVIE。お知らせと同じ左右の分け方にして、トップの流れに乗せる。
   事業紹介（薄灰）の次なので、ここも薄灰のまま続け、白の
   「NOEX について」で切れるようにしてある。 */
/* 事業紹介と同じ薄灰が続くので、境目は節どうしの空きだけで見せる。
   上の余白まで削ると、事業紹介の続きに見えてしまう。 */
.section-movie { background: var(--c-surface-alt); }

.movie__layout {
  display: grid;
  grid-template-columns: minmax(0, 362px) minmax(0, 838px);
  justify-content: space-between;
  gap: var(--sp-8);
}

/* サムネイルは 266x150 の固定。画面が狭くなっても縮めない。
   1fr で分けると、幅を詰めたときに題も絵も小さくなって読めなくなる。
   266 x 3 + 20 x 2 = 838 で、お知らせの右の列にちょうど収まる。 */
.movie__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 266px);
  justify-content: start;
  gap: 28px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.movie-item { width: 266px; }

.movie-item__link {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}
.movie-item__thumb {
  display: block;
  width: 266px;
  height: 150px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #DEDEDE;
}
/* YouTube の絵は 4:3 の中に 16:9 が入っている。上下の黒帯を切り落とす。 */
.movie-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.movie-item__link:hover .movie-item__thumb { opacity: .82; }

.movie-item__date {
  display: block;
  margin-bottom: 6px;
  color: var(--c-accent);
  font-family: var(--f-en);
  font-size: 13px;
  font-weight: var(--fw-bold);
}
.movie-item__title {
  display: block;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  /* 題は長いものが多い。3 行で切って、高さを揃える。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.movie-item__link:hover .movie-item__title { color: var(--c-accent); }

.movie__more { margin-top: var(--sp-8); text-align: right; }

@media (max-width: 900px) {
  /* 見出しを上へ。列の数は入るだけで決まるので、こちらは触らない。 */
  .movie__layout { grid-template-columns: 1fr; }
}

.news__layout {
  display: grid;
  grid-template-columns: minmax(0, 362px) minmax(0, 838px);
  justify-content: space-between;
  gap: var(--sp-8);
}

.news__list { display: flex; flex-direction: column; }

.news-item {
  display: flex;
  gap: var(--sp-14);
  padding-block: 22px;
  /* 実測（Studio）: rgb(200,200,200)。--c-line(#EEEEEE) だと薄すぎて、
     線が細く見える。太さは同じ 1px でも、色で見え方が変わる。 */
  border-bottom: 1px solid #C8C8C8;
}
.news-item:first-child { padding-top: 0; }
.news-item { transition: opacity var(--dur) var(--ease); }
.news-item:hover { opacity: .3; }

.news-item__date {
  flex: none;
  width: 81px;
  font-family: var(--f-en);
  font-size: 15px;
  line-height: var(--lh-card-sm);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.news-item__title {
  font-size: 15px;
  line-height: var(--lh-desc);
  color: var(--c-ink);
}

.news__more { display: flex; justify-content: flex-end; padding-right: 45px; margin-top: 47px; }

/* ============================================================
   RECRUIT
   実測: 背景 #F6F6F6 / 白カード角丸 6px にテキスト＋写真
   ============================================================ */

.section-recruit { background: var(--c-surface-alt); padding-block: 0; }

.recruit-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 510px) minmax(0, 1fr);
  gap: 0;
  min-height: 536px;
  padding: 0;
  border: 3px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  overflow: hidden;
}

.recruit-card__body { align-self: start; padding: 68px 49px 68px 70px; }
.recruit-card__figure { position: relative; }

/* 画像の左端を白へ溶かす。実測 linear-gradient(90deg, #FFF 9%, transparent 42%)。
   （Studio には中間ブレークポイント用に 13%→53% の変種もある） */
.recruit-card__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-surface) 9%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.recruit-card__figure img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   SUPPORT / 購入
   実測: 背景 #F6F6F6 / 中央に縦罫、2 カラム
   ============================================================ */

.section-support { background: var(--c-surface-alt); padding-block: 120px 77px; }

.support__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-muted);   /* 実測 #606060。--c-line(#EEEEEE) では薄すぎる */
  min-height: 253px;
}
.support__col { padding: 82px 60px 0; }
.support__col + .support__col { border-left: 1px solid var(--c-muted); padding-left: 70px; }

.support__label { font-size: 18px; line-height: 35px; font-weight: var(--fw-bold); color: var(--c-ink); }

.support__title {
  display: flex;
  align-items: center;
  /* 丸は下に付いている「chevron の丸」。Studio 実測では、字の中心より
     20px 上にある。真ん中に揃えると低く見える。 */
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--f-en);
  font-size: var(--fs-band);
  line-height: 56px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* 丸だけを持ち上げる。字は動かさない。 */
.support__title .icon-circle { margin-bottom: 40px; }

.shop-list { display: flex; align-items: center; gap: 27px; margin-top: var(--sp-3); }
.shop-list img { width: auto; }
.shop-list img[alt="楽天のロゴ"] { width: 193px; }
.shop-list img[alt="Yahoo!ショッピングのロゴ"] { width: 290px; }

/* ============================================================
   CONTACT
   実測: 背景 #E22A1F / 高さ 338px / 2 カラム
   ============================================================ */

.section-contact { background: var(--c-accent); color: var(--c-surface); }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  padding-block: 48px 56px;
}
.contact__col { padding-left: 60px; }
.contact__col:first-child { border-right: 1px solid var(--c-surface); }
.contact__col + .contact__col { padding-left: 64px; }

.contact__label { font-size: 20px; line-height: 32px; font-weight: var(--fw-bold); }

.contact__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 65px;
  font-family: var(--f-en);
  font-size: var(--fs-band);
  line-height: 64px;
  font-weight: var(--fw-bold);
}

.contact__text {
  margin-top: var(--sp-6);
  /* 実測 16px。15px にしていたため幅が 351 → 329 と詰まっていた */
  font-size: var(--fs-body);
  line-height: var(--lh-card-sm);
  font-weight: var(--fw-medium);
}

.contact__tel {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: 28px;
  font-family: var(--f-en);
  font-size: 20px;
  line-height: 30px;
  font-weight: var(--fw-bold);
}
.contact__tel span { font-family: var(--f-ja); font-size: var(--fs-sm); }

.sns-list { display: flex; flex-wrap: wrap; align-items: center; gap: 39px 62px; margin-top: 45px; }
/* ヘッダーのロゴは薄くしない。マウスを乗せたときは下の赤い線で示す
   （現行サイトと同じ）。薄くすると線まで一緒に薄くなる。 */
.sns-list a, .shop-list a { transition: opacity var(--dur) var(--ease); }
.sns-list a:hover, .shop-list a:hover { opacity: .3; }
.sns-list img { height: 48px; width: auto; }
.sns-list img[alt="Youtubeのロゴ"] { height: 42px; }

/* ============================================================
   フッター
   実測: 背景 #606060 / 見出し 15px 700 白、リンク 13px 400 白
   ============================================================ */

.site-footer { background: var(--c-muted); color: var(--c-surface); }

.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 34px; }
.site-footer__logo { padding-top: 6px; }
.site-footer__logo img { width: 98px; }

.sitemap { display: flex; gap: 40px; }
.sitemap__head { font-size: 15px; line-height: var(--lh-card-sm); font-weight: var(--fw-bold); }
.sitemap__list { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 1px solid var(--c-surface); }
.sitemap__list li { font-size: var(--fs-xs); line-height: var(--lh-card-sm); }
.sitemap__list a { font-size: var(--fs-xs); line-height: var(--lh-card-sm); }
.site-footer a:hover { color: var(--c-surface); opacity: .3; }
.site-footer a { transition: opacity var(--dur) var(--ease); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: 30px 34px;
}
/* 実測（Studio）: 3 つの間は 24px。--sp-8（32px）だと広い。 */
.policy-list { display: flex; gap: 24px; }
.policy-list a, .site-footer__copy { font-size: var(--fs-xs); line-height: var(--lh-card-sm); }

/* ============================================================
   レスポンシブ
   実測: 768 以下で 1 カラム、390 で製品カードが前後送り付きの単票
   ============================================================ */

@media screen and (max-width: 1280px) {
  .about__layout { gap: var(--sp-20); }
  .recruit-card { padding-left: 48px; }
}

/* タブレット帯（769〜1100px）の組み直し。
   ここには設計（1440）の 2 カラムがそのまま残っていて、
   欄が半分以下になるため文字が詰まる。横並びをやめて縦に積む。 */
@media screen and (max-width: 1100px) {
  /* 右の帯が 357px まで痩せ、「社長メッセージ」と矢印が重なる（実測）。 */
  .about__layout,
  .news__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about-row__label { width: auto; }

  /* 「公式ソーシャルメディア」が 3 行に折れ、アイコンが縦 1 列になる。 */
  .contact__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .contact__col { padding-left: 0; min-width: 0; }
  .contact__col + .contact__col {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    padding-top: var(--sp-8);
  }

  /* フッタの 7 列は、この幅だと 1 語ずつ折れて読めなくなる。 */
  .sitemap { flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); }

}

/* 設計幅より狭いところでは、項目の間を詰めて横一列を粘る。
   実測: 溝 40px でナビ 926px。24px で 830px、16px で 782px になり、
   ロゴ 98px と合わせても 1000px 前後まで収まる。

   2026-09-13 に「無線LANレンタル」が 1 段目へ増えて 8 項目になり、
   1024px でナビの左端がロゴの右端に接した（隙間 0）。溝をもう一段
   詰めて、ドロワーへ切り替わるまで余裕を持たせる。 */
@media screen and (max-width: 1280px) {
  .gnav > ul { gap: 24px; }
}
@media screen and (max-width: 1080px) {
  .gnav > ul { gap: 16px; }
}
@media screen and (max-width: 1025px) {
  .gnav > ul { gap: 12px; }
}

/* それでも収まらない幅からドロワーへ切り替える。
   実測（2026-09-13、お問い合わせをサポートの中へ移して 7 項目になったあと）:
     溝 24px でナビ 863px、16px で 815px、12px で 791px。
     ロゴ 118px ＋ すき間 24px ＋ 右余白 20px が要るので、
     溝 12px では 953px を下回ると入らない。
   「無線LANレンタル」が増えた代わりに「お問い合わせ」が抜けたので、
   幅はほぼ元どおり。切り替えも元の 980px に戻す（すき間 52px）。 */
@media screen and (max-width: 980px) {
    .gnav__burger {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--c-ink);
  }

  /* backdrop-filter は fixed 要素の包含ブロックを作る。
     付けたままだとドロワーがヘッダーの 60px 内に閉じ込められ、
     中身が 392px あっても 48px に切られて触れなくなる。 */
  .site-header { backdrop-filter: none; background: var(--c-surface); }

  /* ヘッダーの下に全面ドロワーとして開く。
     横並びのままだと 60px のヘッダー内に押し込まれて画面外へ出る。 */
  .gnav {
    display: none;
    position: fixed;
    inset: var(--header-real) 0 0;
    height: auto;
    background: var(--c-surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--sp-20);
  }
  .gnav.is-open { display: block; }

  .gnav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
  }

  .gnav__item { display: block; height: auto; }

  .gnav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;          /* 指で押せる大きさ */
    height: auto;
    padding-inline: var(--gutter);
    border-bottom: 1px solid var(--c-line);
  }

  .gnav__panel {
    position: static;
    width: auto;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: var(--c-surface-alt);
  }
  .gnav__panel ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-width: none;
  }
  .gnav__panel li { border-bottom: 1px solid var(--c-line); }
  /* ドロワーでは絵を大きく出す場所が無い。名前の左に小さく添える。 */
  .gnav__panel ul.gnav__panel__pics { flex-direction: column; gap: 0; }
  .gnav__panel__pics a { width: auto; text-align: left; }
  .gnav__pic { width: 56px; height: 36px; margin: 0 12px 0 0; border-radius: 4px; }
  .gnav__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: calc(var(--gutter) + var(--sp-4));
    font-size: var(--fs-body);
  }

  /* ドロワーを開いている間は背面をスクロールさせない */
  body.nav-open { overflow: hidden; }
}

@media screen and (max-width: 768px) {

  .hero__title { left: var(--gutter); bottom: 18%; }

  .product__tabs { margin-top: var(--sp-8); }
  .product__rail { gap: var(--sp-4); }
  .product-card,
  .product-card--sm { flex-basis: 100%; height: auto; min-height: 420px; }
  .product__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset: 50% 0 auto;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .product__nav button { pointer-events: auto; }
  .product__rail-wrap { position: relative; }

  .business__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .business-card { padding: 24px; }
  .business-card__icon { width: 48px; }
  .business-card__body { width: 100%; }

  .about__layout,
  .news__layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about-row { padding: 40px 24px; }
  .about-row__label { width: auto; gap: var(--sp-4); }

  .news-item { gap: var(--sp-4); }
  .news__more { justify-content: center; }

  .recruit-card { grid-template-columns: 1fr; min-height: 0; }
  .recruit-card__body { padding: 40px 24px; }
  .recruit-card__figure { position: relative; height: 220px; }
  .recruit-card__figure::after {
    background: linear-gradient(0deg, var(--c-surface) 13%, rgba(255, 255, 255, 0) 63%);
  }
  .recruit-card__figure img { position: absolute; }

  .support__grid { grid-template-columns: 1fr; }
  .support__col { padding: 40px 0; }
  .support__col + .support__col { border-left: 0; border-top: 1px solid var(--c-line); }
  .support__title { gap: var(--sp-6); font-size: 36px; line-height: 44px; }

  .contact__grid { grid-template-columns: 1fr; gap: var(--sp-8); }

  /* min-width:0 が無いと、中身の min-content 幅で列が広がり
     ページ全体が横にはみ出す（実測 390px で 60px 分）。 */
  .contact__col { padding-left: 0; min-width: 0; }
  .contact__col + .contact__col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: var(--sp-8); }

  /* CONTACT + VIEW MORE を 1 行に並べると 390px に収まらないので折り返す */
  .contact__title {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--sp-4);
    padding-right: 0;
    font-size: 36px;
    line-height: 44px;
  }

  /* ロゴとサイトマップを横に並べたままだと、ロゴのすぐ右に
     「製品情報」が来て重なって見える。縦に積む。 */
  .site-footer__top { flex-direction: column; justify-content: flex-start; gap: var(--sp-8); }
  .site-footer__logo { padding-top: 0; }
  .sitemap { flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .policy-list { flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
}

@media screen and (max-width: 540px) {
  .sec-head__en { font-size: 40px; line-height: 48px; }
  .sec-lead { font-size: 20px; line-height: 30px; }
  .btn-more { width: 100%; max-width: var(--btn-w); }
}

/* ============================================================
   下層ページ共通
   実測: 見出し「お知らせ」y=132 / NEWS y=183、本文は中央寄せ 914px
   ============================================================ */

.section-page { padding-block: 132px 0; }
.section-page .sec-head__ja { line-height: var(--lh-sec-ja); }

/* 本文カラム。コンテナ 1280 の中央に 914 を置く。
   ただしセクション見出しと帯だけは 1280 いっぱいに出るので、
   幅を持たせるのは子の側にする。 */
.page-body > * {
  /* 既定は文書ページの 914px。道具のページのように本文の欄が
     もっと狭い設計のときは style.bodyW で渡す（追跡ページは 760）。 */
  max-width: var(--p-bodyW, 914px);
  margin-inline: auto;
}
.page-body > .page-band { max-width: none; }
/* 本文の頭の空きは --p-bodyTop が持つ。1 つ目のブロックが自分の
   margin-top を足すと、ページごとに 30〜50px ずれる。 */
.page-body > *:first-child { margin-top: 0; }

/* 製品・事業ページはコンテナ 1280 をそのまま使う（x=80 から）。
   914px の中央カラムは規約やお知らせのような文書のページ用。
   デザイナーはこの 2 種類しか使っていない。 */
.page-body--wide { position: relative; }
/* 全幅ページでも、本文の欄だけ狭い設計のときは style.bodyW で絞る
   （求人の個別ページは x=80 から 806px）。 */
.page-body--wide > * { max-width: var(--p-bodyW, none); margin-inline: 0; }
.page-body--wide > .page-sec { max-width: 806px; }
/* 文は全幅に伸ばさない。実測では 15px の段落は 7 ページとも 806px を
   超えない。none のままだと 1280px まで伸びて、1 行が長すぎて読めない
   （ev-relatedbusibess の「私たちが目指すのは…」が右へ抜けていた）。 */
.page-body--wide > .page-p,
.page-body--wide > .page-ul,
.page-body--wide > .page-note,
.page-body--wide .page-band > .page-p,
.page-body--wide .page-band > .page-ul,
.page-body--wide .page-band > .page-note { max-width: 806px; }
/* 帯の中も同じ。ここを直さないと、見出しだけ x=80 で中身が x=263 になる。 */
.page-body--wide .page-band > * { max-width: none; margin-inline: 0; }
.page-body--wide .page-band > .page-sec { max-width: 806px; }
/* ------------------------------------------------------------
   右に目次があるページの伸びしろ
   ------------------------------------------------------------
   目次（.page-nav-rail）はコンテナの右端に浮いていて、本文の上に重なる。
   全幅に伸びる要素はその下へ潜り込み、字や絵が読めなくなる。
   目次の幅（--p-navW）と 40px の余白をコンテナから引いたところで止める。

   本文の段落は 806px のまま。ここで許しているのは「表や絵は本文より
   少しはみ出してよい」という範囲で、目次の下までは行かせない。
   幅の指定を px で固定しないのは、コンテナが画面幅に応じて縮むため
   （1440 では目次の左端が 1033、1280 では 993 と、位置が動く）。

   帯（.page-band）の中も同じ。帯は画面いっぱいに広がるが、目次は
   その上に浮いたままなので、中身は同じところで止める必要がある。 */
.page-body--rail {
  --p-railW: calc(100% - var(--p-navW, 258px) - 40px);
}
.page-body--rail > .page-form,
.page-body--rail > .page-figure,
.page-body--rail > .page-images,
.page-body--rail > .steps,
.page-body--rail > .media,
.page-body--rail > .feature-grid,
.page-body--rail > .spec-scroll,
.page-body--rail > .docs,
.page-body--rail > .people,
.page-body--rail > .numbers,
.page-body--rail > .videos,
.page-body--rail > .link-cards,
.page-body--rail .page-band > .page-form,
.page-body--rail .page-band > .page-figure,
.page-body--rail .page-band > .page-images,
.page-body--rail .page-band > .steps,
.page-body--rail .page-band > .media,
.page-body--rail .page-band > .feature-grid,
.page-body--rail .page-band > .spec-scroll,
.page-body--rail .page-band > .docs,
.page-body--rail .page-band > .people,
.page-body--rail .page-band > .numbers,
.page-body--rail .page-band > .videos,
.page-body--rail .page-band > .link-cards { max-width: var(--p-railW); }
/* 小見出しとピルは字だけなので下に潜っても見た目には出ないが、
   長い小見出しが来たときに備えて本文と同じ幅で止めておく。 */
.page-body--rail > .page-subh,
.page-body--rail > .pill { max-width: 806px; }
/* 文の欄は 806px のまま。ただし目次が近づく狭い画面では、806px でも
   目次に届いてしまう（UPCYCLE EV は目次が 362px と広く、1101px の画面で
   注記が目次の下に入っていた）。届くほうで止める。 */
.page-body--rail > .page-p,
.page-body--rail > .page-ul,
.page-body--rail > .page-note,
.page-body--rail > .page-sec,
.page-body--rail .page-band > .page-p,
.page-body--rail .page-band > .page-ul,
.page-body--rail .page-band > .page-note,
.page-body--rail .page-band > .page-sec { max-width: min(806px, var(--p-railW)); }
/* docs・link-cards・フォームは目次の無いページでは中央寄せ。目次がある
   ときは左端から始めないと、幅を絞っても右がその下に入る。 */
.page-body--rail > .docs,
.page-body--rail > .link-cards,
.page-body--rail > .page-form,
.page-body--rail .page-band > .link-cards { margin-inline: 0; }

@media (max-width: 1100px) {
  /* この幅では目次が浮くのをやめて流れの中に入る（下の指定を参照）。
     浮いていないのだから、避ける必要もない。none ではなく 100% にするのは、
     min(806px, ...) の中で使っているため（none は計算できない）。 */
  .page-body--rail { --p-railW: 100%; }
}

/* セクション見出しは本文カラムより外、コンテナ左端から 806px */
.page-body > .page-sec { max-width: 806px; margin-inline: 0; }

.page-body {
  width: 100%;
  /* 実測: 見出しの下端から本文先頭まで 64px、
     本文の下端から CONTACT 帯まで 204px（うち帯側が 83px）。
     privacypolicy で本文下端が Studio と 1232px で一致したうえで
     帯の位置が 21px 手前だったため、こちらで持つ。 */
  padding-block: var(--p-bodyTop, 64px) 121px;
}

/* ---------- お知らせ一覧 ---------- */

/* 一覧ページの行は、トップの NEWS 節とは日付の位置も送りも違う。
   実測: 日付 x=278（本文カラム 263 から 15px 内側）、日付→見出し 40px、
   行の送り 67px（= 日付 28 + 上下 19 + 罫線 1）。 */
.news__list--page .news-item {
  gap: 40px;
  padding: 19px 0 19px 15px;
}
.news__list--page .news-item:first-child { padding-top: 0; }

/* ---------- お知らせ記事 ---------- */

.article__title {
  font-size: 40px;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}

.article__date {
  margin-top: 40px;   /* 実測: 見出しの下端から 40px */
  font-family: var(--f-en);
  font-size: var(--fs-h3);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.article__h {
  margin-top: var(--sp-14);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.article__p {
  margin-top: var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
}
.article__p a { color: var(--c-accent); text-decoration: underline; }

.article__ul { margin-top: var(--sp-6); }
.article__ul li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
}
.article__ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--lh-body) * .5em - 2px);
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

.article__figure { margin-top: var(--sp-8); }

/* 「＜ お知らせ一覧へ」 実測: 中央、下線つき */
.article__back {
  display: flex;
  justify-content: center;
  margin-top: 100px;   /* 実測: 日付の下端から 100px */
}
.article__back a {
  display: inline-flex;
  align-items: center;
  gap: 40px;   /* 実測: シェブロン右端から文字まで 40px */
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.article__back a:hover { opacity: .6; color: var(--c-accent); }
.article__back svg { width: 24px; height: 24px; }

@media screen and (max-width: 768px) {
  .section-page { padding-block: 100px 0; }
  .page-body { padding-block: 40px 64px; }
  .article__title { font-size: 28px; }
  .article__date { font-size: 20px; margin-top: var(--sp-6); }
  .article__back { margin-top: 80px; }
  .news__list--page .news-item { gap: var(--sp-4); }
}

/* ============================================================
   下層ページの本文ブロック
   ------------------------------------------------------------
   殻（.section-page / .sec-head__ja / __en / .page-body）は
   お知らせと共用する。実測で 20 ページ中 14 ページが同じ値だった。
     和名 22px y=132 ／ 英名 56px y=183 ／ 本文 914px を中央（x=263）
     本文先頭 y=311 = 英名の下端 247 + .page-body の padding 64
   ここに足すのは中身のブロックだけ。

   送りの実測（privacypolicy 幅 1440）:
     段落どうし          0    （26px の行送りで続く）
     小見出し → 段落    16px
     段落 → 小見出し    48px
   Studio のリッチテキストは「行が続く」作りなので、段落の間は空けない。
   節の切れ目だけを 48px で作る。
   ============================================================ */

.page-p, .page-ul li {
  font-size: 15px;
  /* 実測 26.3px = 15 x 1.75。26px 固定にすると 20 行で 2px ずれる */
  line-height: 1.75;
  /* Studio はページごとに 400 と 500 を使い分けている（社長メッセージは 500）。
     既定は 400 で、必要なページだけ style.bodyWeight で 500 にする。 */
  font-weight: var(--p-bodyWeight, 400);
  color: var(--c-ink);
}

/* 導入文。実測 24px/700 #0F0F0F、本文カラムより外（x=80）で幅 1000 前後 */
.page-lead {
  max-width: 1000px;
  margin-inline: 0;
  font-size: var(--fs-h3);
  /* 実測: 3 行で 126px ＝ 42px 送り */
  line-height: 42px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* 小見出し。実測 24px/700 #E22A1F、行の高さ 32px */
.page-h {
  margin-top: 48px;
  font-size: var(--fs-h3);
  line-height: 1.3125;   /* 実測 31.5px = 24 x 1.3125 */
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}

/* 見出しの直後だけ 16px 空ける。段落が続くときは空けない */
.page-h + .page-p,
.page-h + .page-ul { margin-top: 16px; }

/* 箇条書き。実測: 本文より 20px 内側（x=283）、行送りは段落と同じ。
   全幅ページでは x=96（コンテナ左端から 16px）、字 15px/500、行送り 32px。
   ★ 先頭の点（・）を忘れないこと。点が無いとただの段落に見える。 */
.page-ul li { position: relative; }
.page-ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--c-ink);
}
.page-body--wide .page-ul li {
  padding-left: 16px;
  line-height: 32px;
  font-weight: var(--fw-medium);
}

.page-ul li {
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-ink);
}

/* 英字セクション見出し（実測 40px/700 #E22A1F・行 64px）。
   和名は右どなりに 18px/700 で並ぶ（下に置くのではない。実測 x=80 と x=269）。
   ★ 下に赤い 1px の罫線が入る。幅 806px・高さ 67px（＝行 64 + 罫線までの 3）。
     この線がデザインの骨格なので、文字だけ合っていても再現にならない。
   FEATURE / TECHNOLOGY / OUTLINE / ACCESS / HISTORY などに使う */
.page-sec {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  max-width: 806px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-accent);
}
.page-sec__en {
  font-family: var(--f-en);
  font-size: 40px;
  line-height: 64px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.page-sec__ja {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

/* セクションの帯。画面いっぱいに広がり、白と薄灰が交互になる。
   .page-body の外へはみ出させるため、左右に大きめの内側余白を取って
   負のマージンで引き伸ばす。 */
/* 実測: 帯の上端から見出しまで 100px、最後の中身から下端まで 120px。
   先頭の帯だけは .page-body の 64px がそのまま効くので上を詰める。 */
/* 帯を敷くページでは、節と節の間の空きは帯の内側の余白が受け持つ。
   実測（ev-relatedbusibess）: 帯の上端から見出しまで 100px、
   最後の中身から下端まで 149px。帯どうしは隙間なく接する。 */
.page-band {
  /* 帯の上には、直前の文から 130px 空く（実測: 事業 4 ページで
     130 / 130 / 140 / 160）。0 のままだと本文に帯がくっついて見える。 */
  margin-top: var(--p-bandGap, 130px);
  margin-inline: calc(50% - 50vw);
  padding: var(--p-bandTop, 100px) calc(50vw - 50%) var(--p-bandBottom, 149px);
}
.page-body > .page-band:first-child { margin-top: 0; }
.page-band > .page-sec { margin-top: 0; }
.page-band + .page-band { margin-top: 0; }
/* 帯の中では、ブロックの組で決めた節前の空きは使わない（帯が持つため） */
.page-body--wide .page-band .page-sec { margin-top: 0; }
.page-body > .page-band:first-child { padding-top: 0; }
/* 節の前後の空きは実測どおり。gridvan で 5 つの節すべてが
   「前 100px / 後 44px」で揃っていた。ブロックごとに margin を
   持たせると、並びが変わるたびに崩れるのでここ 1 か所で持つ。
   （企業情報のように帯を敷くページは .page-band 側で上書きする） */
/* ページごとの微調整は、コンテンツ側が渡す CSS 変数で受ける。
   指定が無ければ既定値。自由な CSS は受け取らない。 */
.page-sec { margin-top: var(--p-secGap, 100px); }
.page-sec + * { margin-top: var(--p-secAfter, 44px); }
.page-body > .page-sec:first-child,
.page-band > .page-sec:first-child { margin-top: 0; }

.page-band--alt { background: var(--c-surface-alt); }
/* KPN の淡い黄色。現行 kpnetworks.jp の地の色（#FFF100）はそのままだと
   本文が読めないので、帯として敷ける濃さまで落としてある。 */
.page-band--yellow { background: #FFFBE0; }
.page-band > * { max-width: 914px; margin-inline: auto; }
.page-band > .page-sec { max-width: 806px; margin-inline: 0; }

.page-figure { margin-top: var(--sp-6); }
.page-figure img { display: block; width: 100%; border-radius: var(--r-sm); }

.page-p a,
.page-lead a { color: var(--c-accent); text-decoration: underline; }

/* 定義表。企業情報の OUTLINE / ACCESS / HISTORY や製品の SPEC で使う。
   実測: 見出し x=263・本文 x=387（= 124px 送り）、行の間隔 69px、
   字は 16px で行の高さ 28px。罫線は無い（間隔だけで区切る）。 */
/* 表だけは節の直後が 55px（実測） */
.page-sec + .page-table { margin-top: 55px; }
.page-sec + .spec-scroll { margin-top: 55px; }
.page-sec + .spec-scroll > .spec { margin-top: 0; }

.page-table {
  display: grid;
  grid-template-columns: 124px 1fr;
  row-gap: 41px;
}
.page-table dt,
.page-table dd {
  font-size: var(--fs-body);
  line-height: 28px;
}
/* dd はブラウザ既定で margin-inline-start: 40px を持つ。
   grid の列を 124px にしても、これを消さないと 40px ずれる（実際にずれた）。 */
.page-table dt,
.page-table dd { margin: 0; }
.page-table dt { font-weight: var(--fw-bold); color: var(--c-ink); }
.page-table dd { color: var(--c-ink); }
.page-table dd a { color: var(--c-accent); text-decoration: underline; }
/* 日本語の下に置く英語表記。同じ項目の一部なので行は変えるが、
   別の項目に見えないよう字は小さめ・色は控えめにする。 */
.page-table__en { display: block; margin-top: 4px; font-size: 14px; color: var(--c-body); }

/* ---------- リンクカード ----------
   実測（support 幅 1440）:
     カード 616x244、角丸 6px、白、影 rgba(0,0,0,.15) 2px 2px 10px
     2 列・間隔 48px（x=80 と x=744）、行の間隔も 48px
     見出し 32px/700 をカード左から 48px、上から 98px
     右下に 34px の赤丸（カード右端から 48px）
   採用ハブも同じ作りなので、ページごとに書かず 1 つで持つ。 */

/* 実測: カードは 616x244（小さい版は 616x158）、x=80 と x=744 の 2 列。
   914px の中央カラムに入れると 433px に潰れるので、
   カードを置くページはコンテナ幅（1280）で使うこと。 */
.link-cards {
  width: 100%;
  max-width: 1280px;
  /* 実測: 殻の英名の下端 247 からカードの上端 337 まで 90px。
     .page-body の上の空き（--p-bodyTop 既定 64）と足して 90 になるよう 26。 */
  margin-top: 26px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 616px));
  gap: 48px;
}

/* 実測: カード 616x244。中の文字は上下中央（副題のあるカードでは
   見出しが 411、無いカードでは 435 から始まり、どちらも中央）。
   padding-top を固定にすると、副題のあるカードだけ下に寄る。 */
.link-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 244px;
  padding: 0 48px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: rgba(0, 0, 0, .15) 2px 2px 10px 0;
  transition: box-shadow var(--dur) var(--ease);
}
.link-card__link:hover { box-shadow: rgba(0, 0, 0, .25) 2px 2px 16px 0; }

.link-card__name {
  display: block;
  font-size: 32px;
  line-height: 48px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
/* 実測: 副題も 24px/48。小さくすると見出しとの間が空いて見える。 */
.link-card__sub {
  display: block;
  font-size: var(--fs-h3);
  line-height: 48px;
  font-weight: var(--fw-medium);
  color: var(--c-body);
}

.link-card__img {
  position: absolute;
  right: 48px;
  top: 56px;
  width: 113px;
  height: 113px;
  object-fit: contain;
}

/* 右下の赤丸。トップページと同じ .icon-circle を使い回す */
/* 実測: 赤丸はカードの右 48px、上下は中央（y=442、カードの中心 459）。 */
.link-card__go {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-34);
  height: var(--icon-34);
}

@media (max-width: 768px) {
  .link-cards { grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-8); }
  .link-card__link { height: auto; padding: var(--sp-8) var(--sp-6) 72px; }
  .link-card__name { font-size: var(--fs-h2); }
  .link-card__img { position: static; margin-bottom: var(--sp-4); }
  .link-card__go { right: var(--sp-6); bottom: var(--sp-6); }
  .page-table { grid-template-columns: 1fr; }
  .page-table dt { padding-bottom: 0; border-bottom: 0; }
  .page-table dd { padding-top: var(--sp-1); border-top: 0; }
  .page-sec { margin-top: var(--sp-14); }
  .page-sec__en { font-size: var(--fs-h1); }
}

/* 見出しの 3 階層目（実測 18px/700 #0F0F0F・行 28px）。
   33 ページを横断で数えたところ 15 ページ 84 箇所で使われていた。 */
.page-subh {
  /* 実測（communityguidelines）: 直前の段落の下端から 24px、行送り 26px。 */
  margin-top: 24px;
  font-size: 18px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.page-subh + .page-p,
.page-subh + .page-ul { margin-top: var(--sp-1); }

/* 注記（実測 13px/500 #333・行 22px） */
.page-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--c-body);
}

/* ---------- お問い合わせフォーム ----------
   実測（contact 幅 1440）:
     欄     760x50、角丸 6px、白地
     ラベル 15px/700、必須のピル 60x27 角丸 40px #E22A1F、白字 14px/700
     ラベルからピルまで 0、ピルの右から文字まで 12px（x=340 と x=412）
     欄の並びは 141px ピッチ（ラベル 27 + 20 + 欄 50 + 44）
     フォーム全体は本文カラムより外、x=340（＝画面中央 760px）
   ------------------------------------------------------------ */

.page-form {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  margin-top: 100px;
}

.page-form__row + .page-form__row { margin-top: 44px; }

.page-form__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 27px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.page-form__req {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 27px;
  border-radius: 40px;
  background: var(--c-accent);
  color: var(--c-surface);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.page-form__input {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  padding-inline: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--c-ink);
}
.page-form__input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }
.page-form__input--area { height: 200px; padding-block: 12px; resize: vertical; }

.page-form__choices { display: flex; flex-wrap: wrap; gap: 24px 74px; margin-top: 20px; }
/* 1 つだけのチェック欄。選択肢の並びと同じ字の大きさにそろえる。 */
.page-form__check { margin-top: 20px; }
/* 選択肢が長い文のときは横並びにできない。縦に積む。 */
.page-form__choices--col { flex-direction: column; gap: 12px; }
.page-form__choices--col .page-form__choice { align-items: flex-start; }
.page-form__choices--col .page-form__choice input { margin-top: 6px; }
/* 項目ごとの但し書き。欄の直前に小さく置く。 */
.page-form__note { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--c-body); }
/* reCAPTCHA の箱。既定の 304px 幅を中央に置く。狭い画面では縮める。 */
.page-form__robot { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 390px) {
  .page-form__robot .g-recaptcha { transform: scale(.86); transform-origin: center top; }
}
.page-form__check label { display: flex; align-items: center; gap: var(--sp-2); font-size: 15px; color: var(--c-ink); }
.page-form__choice { display: flex; align-items: center; gap: var(--sp-2); font-size: 15px; color: var(--c-ink); }

/* 機械よけの罠。人には見せないが、display: none だと埋めない機械がいる。
   left: -9999px のように外へ飛ばすと、はみ出しの検査に引っかかるうえ
   レイアウトの幅にも影響しうるので、1px に潰して切り抜く形にする。 */
.page-form { position: relative; }
/* 断られて戻ってきたときの注意書き。出るのは JavaScript から。
   赤いだけだと見落とすので、左に太い罫を立てて本文と区別する。 */
.page-form__msg {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid #d7000f;
  background: #fdf2f3;
  color: #d7000f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

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

.page-form__agree { margin-top: 56px; text-align: center; font-size: 15px; }
.page-form__agree label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.page-form__agree a { color: var(--c-accent); text-decoration: underline; }

.page-form__submit { margin-top: 34px; display: flex; justify-content: center; }
.btn-more--center { justify-content: center; padding-left: 0; }

.page-form__todo { text-align: center; color: var(--c-accent); }

@media (max-width: 768px) {
  .page-form { margin-top: var(--sp-14); }
  .page-form__choices { gap: var(--sp-4) var(--sp-8); }
}

/* 横並びの絵。枚数ぶんの列にする。Studio は 2〜3 列で並べているので、
   1 枚ずつ縦に積むとページが数千 px 伸びる（実際に伸びた）。 */
.page-images {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
.page-images img { display: block; width: 100%; border-radius: var(--r-sm); }
/* 名前つきで横に並べる絵（追跡ページの取扱店）。
   実測: 232x174 を 3 枚、名前は 18px/700 を絵の下 12px。 */
/* 名前つきのときは実測どおり溝 32px（232x3 + 32x2 = 760）。 */
.page-images--cap { gap: 32px; }
.page-images__item { display: block; margin: 0; }
.page-images__item img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.page-images__item figcaption {
  margin-top: 12px;
  font-size: 18px;
  line-height: 27px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  text-align: center;
}

@media (max-width: 768px) {
  .page-images { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* 資料一覧のカード（小）。実測: 616x158、説明 15px/500 を見出しの下、
   赤丸は大きい版と同じ右下 48px。大きい版と骨格は同じなので、寸法だけ差し替える。

   上からの位置（実測 61px）を padding で固定しない。副題のあるカードを
   測った値なので、副題の無いカードだけ文字が下に寄ってしまう
   （取扱説明書の「ネットワーク関連機器」「LASHIC」が下がっていた）。
   大きい版と同じく justify-content: center に任せて、上下中央に置く。 */
.link-cards--sm .link-card__link { height: 158px; }
/* 資料一覧のカードは見出しが赤（実測 24px/700 #E22A1F）。
   ハブのカード（32px 黒）とは色が違う。 */
.link-cards--sm .link-card__name { font-size: var(--fs-h3); color: var(--c-accent); }
.link-cards--sm .link-card__sub  { margin-top: var(--sp-1); font-size: 15px; line-height: 22px; }
.link-cards--sm .link-card__go   { bottom: 41px; }

@media (max-width: 768px) {
  .link-cards--sm .link-card__link { height: auto; padding-top: var(--sp-6); }
}

/* メンバー紹介。実測: 3 列（x=80 / 530 / 980）、役職 15px/700 の
   すぐ下に氏名 24px/700。カードの箱は無く、文字だけが並ぶ。 */
.people {
  display: grid;
  /* 1280px を 380px 3 列＋70px の溝で割る（実測 x=80/530/980） */
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 70px;
  margin-top: 64px;
}
.people__item a { display: block; transition: opacity var(--dur) var(--ease); }
.people__item a:hover { opacity: .6; }
/* 元の絵は 380x285 だが、枠は 380x253。上下を切って合わせる。 */
.people__item img { display: block; width: 100%; aspect-ratio: 380 / 253; object-fit: cover; margin-bottom: 20px; border-radius: var(--r-sm); }
.people__role { display: block; font-size: 15px; line-height: 26px; font-weight: var(--fw-bold); color: var(--c-ink); }
.people__name { display: block; margin-top: 8px; font-size: var(--fs-h3); line-height: 1.4; font-weight: var(--fw-bold); color: var(--c-ink); }

@media (max-width: 768px) {
  .people { grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-8); }
}

/* 資料一覧の表。実測（support/catalog/grid 幅 1440）:
   見出し 16px/700、本文 15px、名称は 700 のリンク、行の送り 68px。
   表全体は本文カラムより広く、x=204 から始まる（1033px 幅）。 */
.docs {
  width: 100%;
  max-width: 1033px;
  margin-top: 56px;
  margin-inline: auto;
  border-collapse: collapse;
  text-align: left;
}
/* 実測（support/manual/lashic 幅 1440）: 表は x=204 から 1033px。
   列は 412 / 145 / 145 / 331、見出しの行も本文の行も高さ 48px。
   行の送りは 68px（枠 48px ＋ 20px の空き）。 */
.docs th {
  padding-bottom: 22px;
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.docs td {
  padding-block: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
  line-height: 28px;
  color: var(--c-ink);
}
.docs th:nth-child(2), .docs td:nth-child(2) { width: 145px; }
.docs th:nth-child(3), .docs td:nth-child(3) { width: 145px; }
.docs th:nth-child(4), .docs td:nth-child(4) { width: 331px; }
/* 実測: 小見出し（LASHIC-sleep など）の下端から表の見出し行まで 16px。
   既定の 56px のままだと、表が 2 つあるページで 80px 高くなる。 */
.page-subh + .docs, .page-h + .docs { margin-top: 16px; }
.docs__name a { font-weight: var(--fw-bold); color: var(--c-accent); text-decoration: underline; }

@media (max-width: 768px) {
  .docs, .docs thead, .docs tbody, .docs tr, .docs th, .docs td { display: block; width: auto; }
  .docs thead { display: none; }
  .docs tr { padding-block: var(--sp-4); border-top: 1px solid var(--c-line); }
  .docs td { padding-block: 2px; border: 0; }
}

/* 製品のスペック表。実測（gridvan 幅 1440）:
     表は x=80 から 807px（本文カラムより外）
     列幅 152 / 201 / 227 / 227
     見出し行 高さ 48px・背景 #E5E5E5
     本文行   高さ 46px・背景 #F6F6F6
     枠線 1px #606060
     型式名（Type C / Type F）は赤、それ以外は黒
   背景と枠線がこの表の見た目そのものなので、素の表にしない。 */
/* 設計幅より狭い画面では、表を潰さずこの箱の中だけ横へ流す。
   実測の列幅（152+201+227+227＝807px）を下限にして、
   列の境を越えて数字が重なるのを防ぐ。 */
/* 表の角を丸める。table そのものに角丸を持たせると、縦にまたいでいる
   升目（rowspan）があるぶん「どの升目が隅なのか」が表ごとに変わり、
   丸みが変なところに付く。外の箱を表の幅ぴったりにして、そこで切る。
   overflow が visible でなければ角丸でクリップされるので、横送りと両立する。 */
.spec-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: max-content;
  max-width: 100%;
  border-radius: var(--r-sm);
}

.spec {
  width: 100%;
  min-width: 807px;
  max-width: 807px;
  margin-top: 56px;
  /* 升目の枠は右と下だけを引く。外周には引かない（実測: Studio も外枠は
     なく、升目の薄い地色でできた面の角が丸いだけ）。
     collapse だと枠が溶け合って外周にも線が回るので separate にする。 */
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: 15px;
  table-layout: fixed;
}

.spec col.spec__c1 { width: 152px; }
.spec col.spec__c2 { width: 201px; }

.spec th, .spec td {
  height: 46px;
  padding: 6px 14px;
  border: 0;
  border-right: 1px solid var(--c-muted);
  border-bottom: 1px solid var(--c-muted);
  background: var(--c-surface-alt);
  vertical-align: middle;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.spec thead th {
  height: 48px;
  background: #E5E5E5;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
/* 型式名だけ赤。左上の空きは枠線も背景も無し */
.spec thead th.spec__type { color: var(--c-accent); }
/* 外周には線を引かない。いちばん右の列の右と、いちばん下の升目の下は消す。
   縦にまたいでいる（rowspan）升目も表の下端に接するので、同じく消す。 */
.spec tr > *:last-child { border-right: 0; }
.spec tbody:last-of-type tr:last-child > *,
.spec tbody:last-of-type th[rowspan] { border-bottom: 0; }
/* 左上の空の升目。ここだけ枠を持たないので、右の線（「機種名/型式」の
   左にあるべき線）が消えてしまう。右だけ引き直す。 */
.spec thead th.spec__corner { border-right: 1px solid var(--c-muted); }
.spec thead th.spec__corner { background: #E5E5E5; border: 0; }

/* 項目と値だけの版（GRID CONTAINER）。実測（幅 1440）:
     左 194px #E5E5E5 15px/700、右 612px #F6F6F6 15px/500、行 46px
     罫線は行の間と列の間だけで、外枠は無い。 */
.spec--pair { min-width: 806px; max-width: 806px; margin-top: 0; }
.spec__p1 { width: 194px; }
.spec__p2 { width: 612px; }
.spec--pair th,
.spec--pair td { border: 0; border-top: 1px solid var(--c-muted); font-size: 15px; }
.spec--pair tr:first-child th,
.spec--pair tr:first-child td { border-top: 0; }
.spec--pair th {
  height: 46px;
  background: #E5E5E5;
  font-weight: var(--fw-bold);
  vertical-align: middle;
}
.spec--pair td { border-left: 1px solid var(--c-muted); }
.page-sec + .spec-scroll--pair { margin-top: 44px; }

.spec__group { font-weight: var(--fw-bold); }
.spec__item  { font-weight: var(--fw-medium); }
.spec__unit  { margin-left: 6px; font-size: var(--fs-2xs); color: var(--c-body); }
.spec__note  { margin-left: 6px; font-size: var(--fs-2xs); color: var(--c-body); }

@media (max-width: 768px) {
  .spec { font-size: var(--fs-xs); }
  .spec th, .spec td { height: auto; padding: var(--sp-1); }
  .spec col.spec__c1 { width: 84px; }
  .spec col.spec__c2 { width: auto; }
}

/* ---------- 製品の特徴（2 段組み）----------
   実測（gridvan 幅 1440）:
     2 列、x=80 と x=503、幅 380、間隔 43px
     絵がその上に入る
     見出し 14px/700 #0F0F0F、説明 16px/700 #E22A1F（赤）
   説明が赤いのがこの節の要。黒いままだと別物に見える。 */

/* 実測: 絵 383x287、列 x=80 と x=503（＝ 383 + 40 の送り） */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 383px));
  /* 実測: 行の送り 438px = 絵 287 + 文字 111 + 40 */
  gap: 40px;
  margin-top: 56px;
}
.feature__img { display: block; width: min(100%, 383px); height: auto; margin-bottom: var(--sp-6); border-radius: var(--r-sm); }
.feature__label {
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.feature__text {
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}

/* 写真の縦横比がそろわない一覧（導入事例など）。
   高さがばらつくと行が階段状にずれるので、枠を決めて切り抜く。 */
.feature-grid--card .feature { display: flex; flex-direction: column; }
.feature-grid--card .feature__img { aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ============================================================
   下層ページの骨格（デザイナーの設計にあたるところ）
   ------------------------------------------------------------
   文字が載っているだけでは再現にならない。この節の寸法は
   すべて Studio の実測値で、勝手に丸めないこと。
   ============================================================ */

/* ---------- ページ頭 ----------
   製品ページ: 写真 580x344 を右（x=732）、
               ロゴ 556x94・見出し 31px/700・副題 24.5px/700 を左（x=128）
   事業ページ: 全幅 1280x600 の絵だけ */
/* 写真は右（製品ページ）にも左（社長メッセージ）にも置ける。
   左に置くときは文字が右へ回るので、列の並びも入れ替える。 */
/* 製品ページの頭は、薄灰（#F6F6F6）の箱の中に写真と文字を入れ子にしたもの。
   箱は x=80・幅 1280 で、コンテナの内側いっぱい。高さと中の寸法は
   3 ページとも違うので、実測値をページごとに style で渡す。

     ページ           箱の高さ  写真        右余白  ロゴ幅  左内余白
     gridvan            562     580x344      48     556     48   ←既定
     gridcontainer      600     384x348      60     724     60
     upcycleev          609     641x391      60     471     60

   写真も文字も箱の中で上下中央（実測とも 1px 以内で一致する）。 */
.page-hero {
  position: relative;
  display: grid;
  /* 文字の列の幅もページごと。既定より広いロゴ（GRID CONTAINER の 724px）や
     広い写真（UPCYCLE EV の 641px）が入るページでは、ここを変えないと
     どちらかが列からはみ出して、もう片方に重なる。 */
  grid-template-columns: minmax(0, var(--p-heroBodyW, 652px)) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: 0;
  max-width: none;
  min-height: var(--p-heroH, 562px);
  background: var(--c-surface-alt);
}

/* 写真を伸ばすと頭の高さが変わり、以降すべてがずれる。 */
/* max-width: none を明示するのは、site.css の img { max-width: 100% } に
   当たって列の幅（628px）に切られるため。実測は 641px まで出る。 */
.page-hero__img {
  width: var(--p-heroImgW, 580px);
  /* 列（と右の余白）より広くならない。100% だけだと、右マージンぶん
     写真が左へせり出して本文の文字を隠す（実測 1280px で 40px 重なった）。 */
  max-width: calc(100% - var(--p-heroImgGap, 48px));
  height: auto;
  justify-self: end;
  margin-right: var(--p-heroImgGap, 48px);
}
.page-hero__body { padding-left: var(--p-heroPad, 48px); }
.page-hero__logo { display: block; width: var(--p-heroLogoW, 556px); max-width: 100%; margin-bottom: 18px; }
.page-hero__title {
  font-size: 31px;
  line-height: 45px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
/* 製品名の図版が無いときに、図版の位置へ置く赤い字。
   GRID CONTAINER の図版に合わせて、大文字・字間広め・赤。
   図版（.page-hero__logo）と同じだけ下に空きを取る。 */
.page-hero__logotype {
  margin-bottom: 18px;
  font-family: var(--f-en);
  font-size: 48px;
  line-height: 56px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--c-accent);
}

.page-hero__sub {
  margin-top: 5px;
  font-size: 24.5px;
  line-height: 48px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.page-hero__img { display: block; border-radius: var(--r-sm); }

/* タブレット帯では 1 列に積む。2 列のままだと写真が痩せていき、
   1024px では 236px まで細くなる（文字の列は 652px のまま）。
   ※この規則はヒーローの定義より後ろに置くこと。前に置くと、
     あとから来る .page-hero の grid-template-columns に負ける。 */
@media screen and (max-width: 1100px) {
  .page-hero { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-6); padding: var(--sp-8) var(--sp-6); }
  .page-hero__img { width: 100%; max-width: 100%; margin-right: 0; justify-self: stretch; }
  .page-hero__logo { width: 100%; max-width: 100%; }
  .page-hero__body { padding-left: 0; }
}

/* 帯があるのは製品 3 ページだけ。事業ページと社長メッセージには無い（実測）。 */
.page-hero--wide,
.page-hero--left { min-height: 0; background: none; }

/* 写真が左（実測: 社長メッセージ 452x586 を x=80、文は x=632） */
.page-hero--left { grid-template-columns: minmax(0, var(--hw, 452px)) minmax(0, 1fr); gap: 100px; }
.page-hero--left .page-hero__img  { order: 0; width: min(100%, var(--hw, 452px)); margin-right: 0; justify-self: start; }
.page-hero--left .page-hero__body { order: 1; padding-left: 0; }
/* 見出しを赤にする変種（社長メッセージ） */
.page-hero--accent .page-hero__title { color: var(--c-accent); font-size: 40px; line-height: 56px; }
.page-hero--accent .page-hero__sub   { margin-top: 30px; font-size: var(--fs-h3); line-height: 42px; }

/* 事業ページの頭は、全幅ではなくコンテナの中（x=80・幅 1280・上 311）。
   画面いっぱいに広げると 100px 上にずれ、以降すべてが合わなくなる。 */
/* 実測: 殻の英名の下端 238 から絵の上端 311 まで 73px */
/* 上の空きは --p-heroTop（ページごと）が持つ。ここで 9px 足すと
   その値と二重になり、絵が 9px 下がる。 */
.page-hero--wide { display: block; margin-top: 0; }
.page-hero--wide .page-hero__img {
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin-right: 0;
}

/* ---------- 右側の目次 ----------
   実測（ev-relatedbusibess 幅 1440）:
     見出し 18px/700 黒（x=1101）。その下に 178x1 の黒い罫線。
     項目は 258x54 の白い箱、赤 1px の枠、角丸 4px、x=1101、送り 70px。
     文字は 16px/700 赤、箱の左から 25px。
   枠が無いとただのリンク一覧に見えるので、箱がこの部品の要。 */
.page-nav {
  position: absolute;
  right: 0;
  top: 0;
  width: 258px;
}
/* 見出しの罫線は下ではなく「右どなり」。実測: 文字 x=1101、
   罫線 x=1181 から 178px、文字の中ほど（y+18）の高さに入る。 */
/* 導入文と目次を横に並べるための入れ物 */
.page-lead-row { position: relative; }
/* 幅は max-width ではなく min() で縛る。max-width は
   .page-body--wide .page-band > * { max-width: none } に
   詳細度で負けて外され、絵がカラム幅いっぱいに伸びる（実測で 1280px になった）。 */
/* 目次はスクロールに追従して止まる（実測: Studio は画面上端から
   199px のところで止まり、そのまま最後まで付いてくる）。
   ------------------------------------------------------------
   grid の 2 列にすると、目次が 1 行ぶんの高さを本文にも要求して
   以降が 500px ほど押し下がる。float なら本文の流れを乱さずに
   右へ寄せられ、sticky も本文の箱の中で最後まで効く。
   ------------------------------------------------------------ */
.page-body--wide { position: relative; }

/* 目次は導入文と同じ高さから始まり、そこから本文の最後まで付いてくる。
   ------------------------------------------------------------
   float だと自分の高さぶん本文を押し下げてしまい、grid だと 1 行ぶん
   場所を取る。絶対配置にして本文の流れから外し、追従は
   「本文と同じ高さの見えない柱」を立てて、その中で sticky にする。
   ------------------------------------------------------------ */
.page-nav-rail {
  position: absolute;
  /* 起点は .page-body の上端。導入文と同じ高さから始める。
     .page-hero の高さぶんは --p-navTop で足す（ページごとに違う）。 */
  top: var(--p-navTop, 0);
  right: 0;
  /* 下は本文の終わりより少し手前で止める。0 にすると、いちばん下まで
     送ったときに目次の箱が赤い帯にぶつかる。実測（Studio）: 目次の下端と
     帯のあいだは 160px ほど空いている。 */
  bottom: 160px;
  width: var(--p-navW, 258px);
  pointer-events: none;
}
/* 右端は 1360 に揃うが、幅はページごとにデザイナーが決めている
   （事業 258 / GRID VAN 247 / GRID CONTAINER 242 / 求人 264 /
     UPCYCLE EV 362）。中身なりでは出ない値なので style で渡す。 */
.page-nav {
  position: sticky;
  top: 148px;
  width: var(--p-navW, 258px);
  max-width: 100%;
  margin-left: auto;
  pointer-events: auto;
}
/* 目次のぶん、導入文だけ幅を詰める。以降の節は帯や絵で全幅を使う。 */
.page-lead-row { max-width: 806px; }

.page-nav__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.page-nav__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-ink);
}
.page-nav ul { margin-top: 23px; display: flex; flex-direction: column; gap: 16px; }
.page-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 54px;
  /* 実測: 文字の左が枠から 25px、矢印（24x24）の右が 11px。 */
  padding-inline: 25px 11px;
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: 4px;
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-nav a:hover { background: var(--c-accent); color: var(--c-surface); }
/* 実測: 節へ降りることを示す下向きの矢印が 24x24 で入る。 */
.page-nav__chev { flex: none; width: 24px; height: 24px; }
/* 最後の「応募する」だけ赤い塗り（実測 264x56、矢印は右向き 7x12）。 */
.page-nav a.page-nav__go {
  height: 56px;
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-surface);
}
.page-nav a.page-nav__go:hover { background: var(--c-ink); border-color: var(--c-ink); }
.page-nav a.page-nav__go .page-nav__chev { width: 7px; height: 12px; }

.page-sec[id] { scroll-margin-top: 108px; }
/* 小見出しにも飛べる（サポートから製品の取扱説明書へ直接飛ぶ経路）。
   固定ヘッダーの下に隠れないよう、節と同じだけ上を空ける。 */
.page-subh[id],
.page-lead[id] { scroll-margin-top: 108px; }

@media (max-width: 1100px) {
  /* 幅は --p-navW で決めているが、狭い画面では画面幅を超える
     （UPCYCLE EV の 362px が 320px の画面からはみ出した）。

     浮くのをやめる境目は 1100px。ヒーローが 1 段に積むのと同じところで
     揃える。目次だけ浮いたままだと、積んで全幅になったヒーローの写真の上に
     目次が乗ってしまう（1100px で実際に乗っていた）。 */
  .page-nav-rail { position: static; width: auto; }
  .page-nav { float: none; position: static; width: auto; margin: var(--sp-6) 0 0; }
  .page-lead-row { max-width: none; }
}

/* ---------- 動画（YouTube の埋め込み）----------
   参考にしたページ（terra-charge.co.jp/judenou-tokyo2026/）の実測:
   2 列（x=191 / 757）、1 列 492px、列の間 74px、段の送り 433px。
   絵の下に題名 14px。ここでは列幅を決め打ちせず、本文の幅に従わせる。 */
.videos {
  display: grid;
  /* このサイトの 2 列は幅を決め打ちする（.feature-grid と同じ 383px + 40px、
     足して本文の 806px）。1fr にすると同じページの中で列幅が揃わない。 */
  grid-template-columns: repeat(2, minmax(0, 383px));
  gap: 40px;
  margin-top: 56px;
}
/* 埋め込みは 16:9。高さを決めずに比だけ決めると、幅が変わっても崩れない。 */
.video__frame {
  position: relative;
  width: min(100%, 383px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-surface-alt);
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 題名は絵の説明と同じ組み（実測 14px/24 700）。 */
.video__name {
  margin-top: var(--sp-6);
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-bold);
}
.video__name a { color: var(--c-ink); transition: color var(--dur) var(--ease); }
.video__name a:hover { color: var(--c-accent); }
.video__text { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--c-body); }

@media (max-width: 768px) {
  .videos { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ---------- 番号つきの項目 ----------
   実測: 番号 32px/700 赤（x=104）、ラベル 18px/700（x=175）を 2 行。
   2 列だが 1 列は 415px で、コンテナ幅いっぱいには広げない。
   1fr にすると 2 列目が x=806 まで飛び、設計と別物になる。 */
/* 実測（fabusiness 幅 1440）: 1 つずつが白いカード 391x116〜128、
   角丸 6px、影 rgba(0,0,0,.05) 2px 2px 10px。x=80 と x=495 の 2 列。
   カードが無いとただの箇条書きに見える。 */
.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 391px));
  gap: 24px;
  /* 実測: 節の下端から 48px（fabusiness / iotbusiness / networkbusiness）。 */
  margin-top: 48px;
}
.numbers__item {
  display: flex;
  /* 実測: 番号も文字もカードの高さの真ん中。カードは中身なりに伸び、
     1 行なら 116px、2 行なら 127〜128px（fabusiness / networkbusiness）。
     上ぞろえにすると、2 行のカードで文字が上に寄って見える。 */
  align-items: center;
  gap: 16px;
  min-height: 116px;
  /* 実測: 内側の余白は 32px/24px。高さは中身なりで、1 行のカードは
     番号（52px）＋余白 64px ＝ 116px、2 行は行送り 32x2 ＝ 128px。
     同じ行のカードは高いほうに揃う（grid の既定）。 */
  padding: 32px 24px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: rgba(0, 0, 0, .05) 2px 2px 10px 0;
}
/* 実測: 番号の枠は 55x52（x=104、カードの左端から 24px）。 */
.numbers__no {
  flex: none;
  width: 55px;
  font-family: var(--f-en);
  font-size: 32px;
  line-height: 52px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.numbers__body { display: block; }
/* 実測: 見出しは 18px/26、添え書きは 16px/24（（コンパクトファブライン）など）。
   どちらも 18px にすると 2 行目が大きすぎて、カードの高さも合わない。 */
.numbers__label {
  display: block;
  font-size: 18px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-body);
}
.numbers__sub {
  display: block;
  font-size: var(--fs-body);
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--c-body);
}

/* ---------- 絵と文の組み（media）----------
   技術の節   : 絵 368x276 を右（x=518）、文は左（x=80・幅 368）
   メンバー紹介: 絵 322x242 を左（x=80）、文は右（x=452）
   どちらも「絵と文が横に並ぶ」同じ形なので、左右と絵の幅だけを変えて使う。
   似た見た目を別々に作ると、片方だけ直し忘れる。 */
.media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--mw, 368px)));
  align-items: center;
  gap: 70px;
  margin-top: 64px;
}
.media--left  { grid-template-columns: minmax(0, var(--mw, 322px)) minmax(0, 1fr); }
.media--left  .media__img  { order: 0; }
.media--left  .media__body { order: 1; }
.media--right .media__img  { order: 1; }
.media--right .media__body { order: 0; }
.media + .media { margin-top: 49px; }
/* 絵を置かない段。2 段組のままだと本文が絵の幅（--mw）に縮む。 */
.media--solo { grid-template-columns: minmax(0, 1fr); }
.media--solo .media__text { max-width: 806px; }

.media__img { display: block; width: min(100%, var(--mw, 368px)); height: auto; border-radius: var(--r-sm); }
.media__label { font-size: 15px; line-height: 28px; font-weight: var(--fw-bold); color: var(--c-ink); }
.media__head {
  font-size: var(--fs-h3);
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
/* 絵が左のとき（メンバー紹介）は見出しが氏名なので黒・22px */
.media--left .media__head { font-size: 22px; line-height: 34px; color: var(--c-ink); }
.media__text { margin-top: 20px; font-size: 15px; line-height: 1.75; color: var(--c-ink); }
.media--left .media__text { margin-top: 14px; }

/* 絵つき小さい版。
   チラシは表紙なので絵を引き伸ばさず、実寸（184x260）のまま置く。
   Studio の実測は 2 列だったが、そこには 2 枚しか置かれていなかった。
   列は固定幅なので 3 列にしても 2 枚以下のページの並びは変わらない。
   GRID VAN のように宛先ちがいのチラシが 3 枚あると、2 列では最後の
   1 枚だけが次の行に落ちて、右が大きく空いてしまう。 */
.feature-grid--sm { grid-template-columns: repeat(3, 184px); gap: 40px 43px; }
.feature-grid--sm .feature__img { width: 184px; }
.feature-grid--sm .feature__label { font-size: 14px; line-height: 24px; }

@media (max-width: 768px) {
  /* 列を固定幅で 3 つ並べると、狭い画面では画面の外まで伸びてしまう
     （390px で本文が 654px になっていた）。入るだけ並べる形に変える。 */
  .feature-grid--sm { grid-template-columns: repeat(auto-fill, 184px); justify-content: start; }
  .page-hero { grid-template-columns: 1fr; gap: var(--sp-6); min-height: 0; }
  /* 1 列になると、写真の右マージン 48px がそのまま画面外へ出る。 */
  .page-hero__img { margin-right: 0; }
  .page-hero__body { padding-left: 0; }
  .page-hero__logo { width: 100%; }
  .page-hero__title { font-size: var(--fs-h2); line-height: 1.5; }
  .page-hero__sub { font-size: var(--fs-lg); line-height: 1.5; }
  .page-nav { position: static; width: auto; margin-top: var(--sp-8); }
  .page-nav ul { gap: var(--sp-4); margin-top: var(--sp-4); }
  .numbers { grid-template-columns: 1fr; }
  .media { grid-template-columns: 1fr; gap: var(--sp-6); }
  .media__img { width: 100%; }
  .page-lead { font-size: var(--fs-lg); line-height: 1.7; }
}

/* 頭に絵があるページは、殻の見出しが無いぶん上の余白を詰める。
   実測: 製品ページの絵は y=209 から始まる。 */
/* 実測: 製品ページの頭の絵は y=209 から始まる */
.section-page--hero { padding-top: 0; }
.section-page--hero .page-body { padding-top: var(--p-heroTop, 209px); }

/* 導入文と目次の行。実測: 導入文 x=80 幅 1000、目次は右端（x=1113）。 */
/* 導入文の行。目次は別のブロックとして右の列に入るので、
   ここは幅の指定だけを持つ。 */
.page-lead-row {
  position: relative;
  margin-top: var(--p-leadTop, 177px);
  margin-bottom: var(--p-leadGap, 46px);
  /* 目次のぶんは max-width: 806px で空けてある（実測: 導入文の右端 886、
     目次の左端 1101）。ここでさらに padding を足すと、文の幅が
     806-340=466px になって行数が 3 行から 5 行に増える。 */
  padding-right: var(--p-navRight, 0px);
}
.page-lead-row .page-nav { top: 0; }

/* 絵つき 2 段組みの「説明つき」版（製品・実例、導入事例）。
   実測: 絵 383x287、ラベル 18px/700 黒、本文 14px/400 黒。
   製品の特徴（ラベル 14px・本文 16px 赤）とは役割が違うので変種で持つ。 */
.feature-grid--desc .feature__label { font-size: 18px; line-height: 32px; }
.feature-grid--desc .feature__text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-regular);
  color: var(--c-ink);
}

/* 定義表の小さい版（製品のスペック。枠線は無く、間隔だけで区切る）。
   実測（gridcontainer 幅 1440）: 見出し x=94 幅 166（15px/700）、
   本文 x=289（15px/500）、行の送り 46px。 */
.page-table--sm {
  grid-template-columns: 195px 1fr;
  row-gap: 20px;
  margin-top: 96px;
}
.page-table--sm dt,
.page-table--sm dd { font-size: 15px; line-height: 26px; }
.page-table--sm dd { font-weight: var(--fw-medium); color: var(--c-body); }
.page-table--sm dt { color: var(--c-body); }

/* 見出しの下の添え書き（実測 14px/500 #A3A3A3） */
.page-hero__note { margin-top: 18px; font-size: 14px; line-height: 14px; font-weight: var(--fw-medium); color: #A3A3A3; }

/* ---------- 節の前の空き（事業ページ）----------
   実測すると、節の前の空きは「直前が何か」で決まっていた。
     箇条書き（導入）→ 節   224px
     番号つき       → 節   249px
     技術の節       → 節   245px
   製品ページの 100px とは別の値なので、組で持つ。
   1 つの値に丸めると 4 つの節で 500px ずれる（実際にずれた）。 */
.page-body--wide .page-ul  + .page-sec { margin-top: 155px; }
.page-body--wide .numbers  + .page-sec { margin-top: 249px; }
.page-body--wide .media    + .page-sec { margin-top: 245px; }
/* 説明つきカード（事業ページの製品・実例）の後だけ広い。
   製品ページの特徴カードの後は 100px なので、変種で分ける。 */
/* カードの中の「もっとみる」。実測（Studio の IoT 事業）: 説明文の下
   12px、14px/24px の太字で、色と下線は本文中のリンクと同じ。
   カードの外に出すと、どの製品の話なのかが分からなくなる
   （独立した link ブロックにしていたときは 1000px 下へ離れていた）。 */
.feature__more {
  margin-top: 12px;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--fw-bold);
}
.feature__more a { color: var(--c-accent); text-decoration: underline; }
.feature__more a:hover { opacity: .7; }

.page-body--wide .feature-grid--desc + .page-sec { margin-top: 285px; }

/* 事業ページの小見出しから本文までは 30px（製品ページの 16px とは別） */
.page-body--wide .page-h + .page-p { margin-top: 30px; }

/* 写真の横に続く段落（社長メッセージ）。実測 15px/500、行 26.3px。
   写真とは上ぞろえなので、.page-hero--left では align-items を上に。 */
.page-hero--left { align-items: start; }
.page-hero--accent .page-hero__body { padding-top: 52px; }
.page-hero__p { margin-top: 26px; font-size: 15px; line-height: 1.75; font-weight: var(--fw-medium); color: var(--c-ink); }

/* ---------- 中央ぞろえの宣言文（企業理念）----------
   実測: 20px/700 #0F0F0F、行の送り 42px、中央ぞろえ */
/* デザインは左揃え（実測: 3 行とも x=110 から始まる）。
   中央揃えにすると行頭が揃わず、読む目が毎行さまよう。 */
.statement { margin-top: 70px; }
.statement p { font-size: 20px; line-height: 42px; font-weight: var(--fw-bold); color: var(--c-ink); }

/* ---------- 英単語を大きく見せる組み（Make / Our / Next）----------
   実測: 単語 64px/700 #E22A1F（x=163）、説明 18px/700（x=415）を 2 行、
   1 組の送り 137px */
/* 実測（aboutnoex-philosophy 幅 1440）:
   1280x536 の白い箱を 3px の赤（#E22A1F）で囲い、内側の余白は 80px。
   中は 3 段で、2 段目からは上に 1px #E3E3E3 の区切り線が入り、
   段と段の間は 20px 空く。囲いが無いと、ただの見出しの列に見える。 */
.words {
  margin-top: 58px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 80px;
  background: var(--c-surface);
  border: 3px solid var(--c-accent);
  border-radius: 0;
}
.words__item { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; }
.words__item + .words__item { padding-top: 20px; border-top: 1px solid #E3E3E3; }
.words__word {
  font-family: var(--f-en);
  font-size: 64px;
  /* 実測: 語の枠は 172x96。84 にすると段の高さが 105px になり、
     3 段ぶんで 36px 足りなくなる。 */
  line-height: 96px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.words__body { display: block; padding-top: 19px; }
.words__body span { display: block; font-size: 18px; line-height: 31px; font-weight: var(--fw-bold); color: var(--c-ink); }

@media (max-width: 768px) {
  .words { padding: var(--sp-8) var(--sp-6); }
  .words__item { grid-template-columns: 1fr; }
  .words__word { font-size: var(--fs-h1); line-height: 1.3; }
  .statement p { font-size: var(--fs-lg); line-height: 1.8; }
}

/* 番号つきの小見出し（企業理念の 01 / 02）。
   実測: 番号 40px/700 赤（x=80）、見出し 24px/700 赤（x=161） */
/* 実測（企業理念 INNOVATION）: 番号 40px（x=80、枠 47x60）、
   見出しの字 24px/42（x=161）、その左に 2px の赤い縦棒（x=143、高さ 30）。
   縦棒が無いと、番号と見出しがただ横に並んでいるだけに見える。 */
.page-h--no { display: grid; grid-template-columns: 81px minmax(0, 1fr); align-items: center; }
.page-h__no { font-family: var(--f-en); font-size: 40px; line-height: 60px; font-weight: var(--fw-bold); }
.page-h--no > span:not(.page-h__no) {
  position: relative;
  display: block;
  padding-left: 18px;
  line-height: 42px;
}
/* 棒は字の高さいっぱいではなく、上下 6px ずつ内側（実測: 行 42px に対し棒 30px）。 */
.page-h--no > span:not(.page-h__no)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--c-accent);
}
/* 番号つきの見出しの箱（番号の 60px で決まる）の下は 10px
   （実測: 見出しの箱 2069〜2129、本文 2139）。 */
/* .page-body--wide .page-h + .page-p（クラス 3 つ）に負けないよう、
   こちらも同じ詳細度で書く。 */
.page-body--wide .page-h--no + .page-p,
.page-h--no + .page-p { margin-top: 10px; }

/* 絵の回り込み。後ろのブロックが横に並ぶ */
.page-figure--right { float: right; width: min(100%, var(--fw, 562px)); margin-left: 60px; }
.page-figure--left  { float: left;  width: min(100%, var(--fw, 562px)); margin-right: 60px; }
.page-figure--right img, .page-figure--left img { width: 100%; }
/* 絵の上にロゴを重ねる（BRAND IMAGE）。実測: 写真 1280x600 の
   ちょうど中央に 399x118 のロゴ。下に並べると別の構成になる。 */
.page-figure--logo { position: relative; }
.page-figure__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.page-figure__logo img,
.page-figure__logo .logo-anime { width: min(70%, var(--logo-w, 399px)); height: auto; }
/* 画面に入るまでは止めておき、入ったら 1 回だけ描く（site.js が is-drawn を付ける）。 */
.logo-anime--reveal path { animation: none; }
.logo-anime--reveal.is-drawn path { animation: logo-draw 1.5s ease-in both; }

/* 回り込みは節で切る */
.page-sec { clear: both; }

@media (max-width: 768px) {
  .page-figure--right, .page-figure--left { float: none; width: 100%; margin: var(--sp-6) 0 0; }
  .page-h--no { grid-template-columns: 48px minmax(0, 1fr); }
  .page-h__no { font-size: var(--fs-h2); }
}

/* 白い面（帯の中に置く箱）。実測: 1280px 幅・角丸 6px・白。
   薄灰の帯の上に白い面を重ねる作りで、幅はコンテナと同じ。 */
.panel {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  /* 実測（aboutnoex-philosophy）: 箱の上端からピルまで 44px、
     最後の行から箱の下端まで 38px。上 40 / 下 60 では逆に見えていた。 */
  padding: 44px 0 40px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
}
/* 左に絵の場所を空ける形（FABTOPE）。実測: 箱 1280x818 の中で、
   中身は左端から 600px のところ（x=680）から始まる。
   絵はまだ用意されていない（Studio のプレビューにも入っていない）ので、
   場所だけ空けておく。src が入ったら .panel__slot に img を置く。 */
/* 前の組との間。詰まっていると、白い箱が前の段落に貼り付いて見える。 */
.cols + .panel { margin-top: 64px; }
.panel--split { display: grid; grid-template-columns: 600px minmax(0, 1fr); align-items: stretch; }
.panel--split > .panel__body { min-width: 0; }
/* 左の絵。縦長の絵（1461x2400）を枠に収める。切り取ると木の上が欠ける。
   絵を流れの中に置くと、絵の高さ（986px）が箱の高さを決めてしまい、
   右の文より 300px 以上高い箱になる。絵は場所から出して重ねる。 */
.panel__slot { position: relative; }
.panel__slot img {
  position: absolute;
  inset: 24px;
  display: block;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
}
/* 絵がまだ無いときは場所だけ空ける */
.panel__slot--empty { background: var(--c-surface-alt); border-radius: var(--r-sm); }

/* 番号つきの手順を 2 列に流す（求人の「業務の流れ」）。
   実測: 番号 13px（x=126 / x=513）、本文 15px（x=145 / x=532）、送り 34px。
   番号は列をまたいで 1 から続くので、CSS の段組みに任せる。 */
.steps {
  columns: 2;
  column-gap: 0;
  margin-top: 24px;
  padding-left: 25px;
  list-style: decimal outside;
}
.steps li {
  break-inside: avoid;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 26px;
  color: var(--c-ink);
}
.steps li::marker { font-size: 13px; color: var(--c-ink); }

@media (max-width: 768px) {
  .steps { columns: 1; }
}

/* 見出しを左、本文を右に並べる 2 段組み（企業理念の FABTOPE）。
   実測: 見出し x=80（32px）、本文 x=653（15px）。縦に積むと別の構成になる。 */
/* 左に大きな見出し、右に本文。
   ------------------------------------------------------------
   grid で組んで左の見出しを全行にまたがらせていたが、またぐ要素の高さは
   またいだ行へ配られる。そのため右の段落が本来の余白よりずっと離れて並び、
   見出しのすぐ下だけ 127px も空いていた（実測。デザインは 61px）。
   左の見出しを流れから外し、右は普通の縦並びにする。こうすると段落どうしの
   余白が自分の margin だけで決まり、行の高さに引きずられない。 */
.cols {
  position: relative;
  padding-left: 573px;
}
.page-body--wide .cols { max-width: none; }
.cols > * { max-width: none; margin-inline: 0; }
.cols > *:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 573px;
  margin-top: 0;
}
/* 左の見出しは 32px（実測: BRAND IMAGE と FABTOPE とも 32px/46px）。
   本文の小見出し（24px）のままだと、右の文と大きさが並んでしまう。 */
.cols > .page-h:first-child { font-size: 32px; line-height: 56px; }
/* 文の中で小さくする断片。見出しの括弧書きなど。
   実測: FABTOPE の見出しは 32px の中で「（製造工場）」だけ 18px。 */
.span--sm { font-size: .5625em; }
/* 右の列の小見出し（NO = 望（のぞみ）など）も 32px（実測、行送り 42px）。
   2 つ目以降の小見出しの前は空ける（実測: 前の段落の行から 77px）。 */
.cols .page-subh { font-size: 32px; line-height: 42px; margin-top: 0; }
.cols .page-p + .page-subh { margin-top: 45px; }
/* 段落が続くときは 1 行ぶん空ける。詰めると、別の話が地続きに見える
   （「こんなモノが作りたい！」が前の段落の続きに読めていた）。 */
.cols .page-p + .page-p { margin-top: 26px; }
/* 小見出しのすぐ下の段落だけ 18px/700。以降の説明文は 15px/400 のまま
   （実測: 「望みとは遠く見渡すこと。」は太く、「日本語の「望」と、」は細い）。 */
.cols .page-subh + .page-p {
  margin-top: 15px;
  font-size: 18px;
  line-height: 32px;
  font-weight: var(--fw-bold);
}
/* 組と組の間には 1px #C8C8C8 の横線が入る（実測: 1280px 幅）。
   最後の組の下には線が無いので、2 つ目以降の上に引く。 */
.cols { margin-top: 64px; }
.cols + .cols {
  margin-top: 68px;
  padding-top: 64px;
  border-top: 1px solid #C8C8C8;
}


/* 薄灰の面（求人の「具体的な業務」）。実測: x=80 から 806x614、内側 40px。
   .panel の margin-inline: auto が残ると 1280 の中で中央に寄る。 */
.panel--grey {
  max-width: var(--p-bodyW, 806px);
  margin-inline: 0;
  padding: 0;
  background: var(--c-surface-alt);
}
.page-body--wide .panel--grey > * { max-width: none; margin-inline: 0; padding-inline: 40px; }
/* 箇条書きの行間。求人の個別ページだけ 10px 空く（実測: 送り 36px）。
   事業ページは 0（送り 32px）なので、ページごとに style.ulGap で渡す。 */
.page-ul li + li { margin-top: var(--p-ulGap, 0); }
.panel--grey .page-note { line-height: 34px; }
.panel--grey > *:first-child { padding-top: 40px; margin-top: 0; }
.panel--grey > *:last-child { padding-bottom: 40px; }

.panel > * { max-width: 914px; margin-inline: auto; }
.page-body--wide .panel > * { max-width: none; margin-inline: 0; padding-inline: 40px; }
/* split では左右の余白は箱ではなく中身の側が持つ。
   .pill だけは自分の padding が見た目そのものなので外さない。 */
.page-body--wide .panel--split > * { padding-inline: 0; }
.page-body--wide .panel--split .panel__body > *:not(.pill) { padding-inline: 0; }

/* 赤い角丸の札（実測 272x50・角丸 6px・白字 24px/700） */
.pill {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding-inline: 15px;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-surface);
  font-size: var(--fs-h3);
  line-height: 34px;
  font-weight: var(--fw-bold);
}
/* 小さい版（求人の「身につくスキル」）。実測 122x28、字 14px、左右 12px。 */
.pill--sm { height: 28px; padding-inline: 12px; font-size: 14px; line-height: 20px; }


/* 小見出しの色。実測でページによって違う（規約は赤、社長メッセージは黒）。 */
.page-h--ink { color: var(--c-ink); }

/* メンバーの間の横罫線（実測 1px #C8C8C8、コンテナ幅 1280）。
   区切りが無いと 3 人がひと続きに見える。 */
.media--rule { padding-top: 27px; border-top: 1px solid #C8C8C8; }

/* 定義表の行の罫線（実測 1px #E3E3E3）。企業情報の OUTLINE / HISTORY。 */
.page-table dt, .page-table dd { border-bottom: 1px solid #E3E3E3; padding-bottom: 20px; }
.page-table { row-gap: 21px; }

/* ---------- 宅配便の追跡 URL 作成ツール ----------
   実測（delivery-tracking 幅 1440）:
     全体 760px 幅を中央（x=340）
     使い方の囲み 760x249・#F6F6F6・角丸 6px、見出し 20px/700
     入力欄 760x64・白・角丸 6px、文字 18px
     個別入力は 372x66 を 2 列（x=340 / x=728）
     運送会社ごとの囲み #F6F6F6・角丸 6px、社名 24px/700
     ボタン 270x56・赤・角丸 28px
   ------------------------------------------------------------ */

.tracking { width: 100%; max-width: 760px; margin-inline: auto; margin-top: 106px; }

/* 実測: 箱 760x249。見出し 20px/35 のあと 12px 空けて 15px/26 が 6 行、
   下の余白は 22px。注記の前に余白を足すと 26px ぶん高くなる。 */
/* PDF を分ける道具。配達物追跡と同じ枠組みで、入力の並びだけ変える。
   「どこにも送らない」は、この道具を使うかどうかの判断そのものなので、
   小さな注記ではなく、目に入る箱に入れて置く。 */
.pdfsplit__safe {
  margin-bottom: 48px;
  padding: 20px 28px;
  background: var(--c-surface-alt);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 27px;
  color: var(--c-ink);
}
/* PDF を分ける道具。配達物追跡と同じ枠組みで、入力の並びだけ変える。 */
.pdfsplit__row + .pdfsplit__row { margin-top: 40px; }
.pdfsplit__label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.pdfsplit__file-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* 既定のファイル選択は見た目が揃わないので、押せる部分だけ整える。 */
.pdfsplit__file { font-size: 15px; }
.pdfsplit__file::file-selector-button {
  margin-right: 14px;
  padding: 10px 22px;
  border: 1px solid var(--c-accent);
  border-radius: 999px;
  background: #FFFFFA;
  color: var(--c-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.pdfsplit__file::file-selector-button:hover { background: var(--c-accent); color: #FFFFFA; }
.pdfsplit__picked { font-size: 14px; color: var(--c-body); }

.pdfsplit__range {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #DEDEDE;
  border-radius: var(--r-sm);
  background: #FFFFFA;
  font-family: inherit;
  font-size: 15px;
}
.pdfsplit__range:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.pdfsplit__hint { margin-top: 10px; font-size: 14px; line-height: 24px; color: var(--c-body); }

.pdfsplit__act { margin-top: 40px; }
.pdfsplit__status {
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--c-surface-alt);
  font-size: 15px;
  line-height: 26px;
}
.pdfsplit__status--error { background: #FDECEB; color: var(--c-accent); }

.tracking__how {
  padding: 24px 32px 22px;
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
}
.tracking__how p + p { margin-top: 0; }
.tracking__how p { font-size: 15px; line-height: 26px; color: var(--c-ink); }
/* 見出しも p なので、あとに置いた .tracking__how p に負ける。
   同じ詳細度で勝つよう p を付けて書く。 */
.tracking__how p.tracking__how-head { font-size: 20px; line-height: 35px; font-weight: var(--fw-bold); color: var(--c-ink); }
.tracking__how p.tracking__how-head + p { margin-top: 12px; }
.tracking__note { margin-top: 0; }

.tracking__head {
  margin-top: 64px;
  font-size: var(--fs-h3);
  line-height: 47px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.tracking__input {
  width: 100%;
  height: 64px;
  margin-top: 27px;
  padding-inline: 30px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 18px;
  color: var(--c-ink);
}
.tracking__input:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; }

.tracking__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 372px)); gap: 16px; margin-top: 27px; }
.tracking__grid .tracking__input { height: 66px; margin-top: 0; }

.tracking__actions { display: flex; align-items: center; gap: 40px; margin-top: 26px; }
.tracking__reset {
  font-size: var(--fs-body);
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.tracking__reset:hover { color: var(--c-accent); }

/* 実測: 運送会社の欄は開閉式。閉じていると高さ 100px、
   開くと 747px。欄と欄の間は 64px。既定で開いているのは先頭だけ。
   ここを開きっぱなしにすると、ページが Studio の 1.7 倍の高さになる。 */
.tracking__carrier {
  margin-top: 64px;
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
}
.tracking__carrier-body { padding: 0 32px 32px; }
.tracking__carrier-name,
.tracking__fold > .tracking__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding-inline: 32px;
  font-size: var(--fs-h3);
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
}
.tracking__carrier-name::-webkit-details-marker,
.tracking__fold > .tracking__head::-webkit-details-marker { display: none; }
/* 開いている間は上向き、閉じると下向き（実測の keyboard_arrow_up と同じ向き）。 */
.tracking__chev { flex: none; width: 32px; height: 32px; color: var(--c-ink); transform: rotate(180deg); transition: transform .2s var(--ease); }
details:not([open]) > * > .tracking__chev,
details:not([open]) > .tracking__head > .tracking__chev { transform: rotate(0deg); }
.tracking__fold { margin-top: 64px; }
.tracking__fold > .tracking__head { margin-top: 0; padding-inline: 0; }
.tracking__fold .tracking__panel {
  padding: 32px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
}
.tracking__fold .tracking__grid { margin-top: 0; }
.tracking__carrier-body > .tracking__label:first-child { margin-top: 0; }
.tracking__label { margin-top: 68px; font-size: 15px; line-height: 26px; font-weight: var(--fw-bold); color: var(--c-ink); }
.tracking__out {
  width: 100%;
  height: 160px;
  margin-top: 19px;
  padding: 14px 30px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 18px;
  line-height: 30px;
  color: var(--c-ink);
  resize: vertical;
}
.tracking__out--one { height: 65px; }

@media (max-width: 768px) {
  .tracking { margin-top: var(--sp-8); }
  .tracking__grid { grid-template-columns: 1fr; }
  .tracking__actions { flex-wrap: wrap; gap: var(--sp-4); }
  .tracking__carrier { padding: var(--sp-6) var(--sp-4); }
}

/* ---------- 求人カード ----------
   実測（recruit/career 幅 1440）:
     箱 616x396・白・角丸 6px、2 列（x=80 / x=744）
     タグ 13px/500 黒（x=128）、職種 24px/700 赤、説明 15px/500、
     該当事業 15px/500 赤 */
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 616px)); gap: 48px; margin-top: 84px; }
.job {
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: rgba(0, 0, 0, .15) 2px 2px 10px 0;
  transition: box-shadow var(--dur) var(--ease);
}
/* 余白は中の箱が持つ。カードごと押せるようにするとき、余白が外側に
   あると、字と字のあいだの空白が押せない帯になってしまう。 */
.job__link { display: block; padding: 40px 48px; color: inherit; text-decoration: none; }
/* 押せるカードだけ、指したときに影を強める（押せないカードは動かさない） */
.job--link:hover { box-shadow: rgba(0, 0, 0, .25) 2px 2px 16px 0; }
.job__tags { display: flex; gap: 18px; }
.job__tag { font-size: var(--fs-xs); line-height: 22px; font-weight: var(--fw-medium); color: var(--c-ink); }
.job__name { margin-top: 24px; font-size: var(--fs-h3); line-height: 34px; font-weight: var(--fw-bold); color: var(--c-accent); }
.job__text { margin-top: 22px; font-size: 15px; line-height: 26px; font-weight: var(--fw-medium); color: var(--c-ink); }
.job__field { margin-top: 24px; font-size: 15px; line-height: 26px; font-weight: var(--fw-medium); color: var(--c-accent); }

/* ---------- メンバーの声の問答 ----------
   実測（voice/hardware-engineer 幅 1440）:
     1 問目 … 写真 483x362 を左（x=80）、文は右（x=643・幅 717）
     2 問目 … 写真 483x644 を右（x=877）、文は左（x=80・幅 717）
     3 問目 … 写真なし。文は左いっぱい
     問い 32px/700 赤、答えの見出し 24px/700 赤、本文 15px/400
   写真の高さが問いごとに違うので、高さは指定せず元のまま置く。 */
/* 写真が左の問いは、文の塊が写真の高さの真ん中に来る（実測で 3 ページとも一致）。 */
.qa { display: grid; grid-template-columns: minmax(0, 483px) minmax(0, 1fr); gap: 80px; align-items: center; margin-top: 64px; }
.qa--right { grid-template-columns: minmax(0, 1fr) minmax(0, 483px); }
.qa--right .qa__img  { order: 1; }
.qa--right .qa__body { order: 0; }
/* 写真の無い問いも、文の幅は写真ありのときと同じ 717px のまま。
   1fr にすると 1280px まで広がって行数が変わる（実測は 3 行）。 */
.qa--none { grid-template-columns: minmax(0, 717px); }
/* 実測: 帯の直後の 1 問目は 64px、以降は前の問いの下端から 120px。 */
.qa + .qa { margin-top: 120px; }
/* 背の高い写真（2 問目）の次は、写真の下端ではなく文の下端を基準にする。
   写真は行の高さを決めない、という Studio の置き方に合わせるための相殺。 */
.qa--right { align-items: start; }
.qa--right + .qa--none { margin-top: -268px; }
/* 写真が右の問いだけは中央ではなく、写真の上端から 40px 下に置かれている。 */
.qa--right .qa__body { padding-top: 40px; }
.qa__img { display: block; width: min(100%, 483px); height: auto; border-radius: var(--r-sm); }
.qa__q { padding-bottom: 26px; border-bottom: 1px solid var(--c-accent); font-size: 32px; line-height: 46px; font-weight: var(--fw-bold); color: var(--c-accent); }
.qa__a { margin-top: 24px; font-size: var(--fs-h3); line-height: 34px; font-weight: var(--fw-bold); color: var(--c-accent); }
.qa__text { margin-top: 22px; font-size: 15px; line-height: 1.75; color: var(--c-ink); }

@media (max-width: 768px) {
  .jobs { grid-template-columns: 1fr; gap: var(--sp-6); }
  .job { padding: var(--sp-6); }
  .qa, .qa--right { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* 1 列になると写真は行の高さを決めなくなる。設計幅で写真の下端を
     揃えるための相殺（-268px）が残ると、問いどうしが重なる。 */
  .qa + .qa { margin-top: var(--sp-14); }
  .qa--right + .qa--none { margin-top: var(--sp-14); }
  .qa--right .qa__body { padding-top: 0; }
  .qa__img { width: 100%; max-width: none; }
  .qa--right .qa__img { order: 0; }
  .qa--right .qa__body { order: 1; }
  .qa__q { font-size: var(--fs-h2); line-height: 1.4; }
}

/* 個々のメンバー紹介の頭。実測（voice/hardware-engineer 幅 1440）:
   薄灰の帯（全幅・#F6F6F6）の中に、役職と氏名を横並びで置く。
   役職が 2 行になるページでは帯が 108px → 136px に伸びる。
   文字は 24px/700 #333、左端 x=80。 */
.statement--band {
  margin-top: 0;
  margin-inline: calc(50% - 50vw);
  padding: 39px calc(50vw - 50%) 41px;
  background: var(--c-surface-alt);
  text-align: left;
}
/* 氏名は役職の「最後の行」と揃う。役職が 2 行のページで上に寄ると崩れる。 */
.statement--inline { display: flex; align-items: flex-end; gap: 24px; }
.statement--band p { font-size: var(--fs-h3); line-height: 28px; font-weight: var(--fw-bold); color: var(--c-body); }
.statement--inline p:first-child { white-space: pre-line; }

@media (max-width: 768px) {
  .statement--inline { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  /* 24px のままだと「テクノロジープラットフォームリーダー」が
     1 行に入らず、文節の無いところで割れる。 */
  .statement--band p { font-size: var(--fs-lg); line-height: 1.6; }
}

/* 写真がまだ無いところ。実測の寸法（380x253）で場所だけ空けておく。
   Studio 側が見本画像（Unsplash）のままだったため、本物が来るまでの仮。 */
.people__blank {
  display: block;
  width: min(100%, 380px);
  aspect-ratio: 380 / 253;
  margin-bottom: 20px;
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
}
@media (max-width: 768px) {
  .people__blank { width: 100%; height: auto; aspect-ratio: 380 / 253; }
}

/* ---------- 絵を押して大きく見る ----------
   製品の写真は、営業が資料に使えるよう原寸に近いものを別に置いてある。
   本文には軽い版を出し、押されたときだけ大きい版を読む。

   「押せる」ことが分からないと誰も押さないので、指を乗せると
   ふちが浮き、右下に虫めがねを出す。 */
.page-figure--zoom { position: relative; }
.page-figure__zoom,
.page-hero__zoom {
  display: block;
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
}
.page-figure__zoom img,
.page-hero__zoom img { display: block; transition: transform var(--dur) var(--ease); }
.page-figure__zoom:hover img,
.page-hero__zoom:hover img { transform: scale(1.03); }
/* 虫めがね。絵の上に小さく置く（絵そのものは隠さない大きさにする）。 */
.page-figure__zoom::after,
.page-hero__zoom::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 15, 15, .55) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.page-figure__zoom:hover::after,
.page-figure__zoom:focus-visible::after,
.page-hero__zoom:hover::after,
.page-hero__zoom:focus-visible::after { opacity: 1; }
/* 指で触る画面には hover が無い。always 出しておく。 */
@media (hover: none) {
  .page-figure__zoom::after,
  .page-hero__zoom::after { opacity: .85; }
}

/* 広げたときの覆い。背景を押すか Esc で閉じる。
   中では、ころがし・つまみ広げ・二度押しでさらに大きくでき、
   大きくしているあいだは引きずって見たい場所へ寄せられる。 */
.zoom {
  position: fixed;
  inset: 0;
  /* ヘッダーより前に出す。ヘッダーは 100 なので、それより大きくする。 */
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 40px;
  background: rgba(15, 15, 15, .82);
  /* まわりに虫めがねの印は出さない。広げている最中は押しても閉じない
     （引きずって見る操作と見分けるため）ので、閉じられそうに見えると
     かえって迷う。閉じるのは右上の × と Esc。 */
  cursor: default;
  /* 指の動きをこちらで受け取る。ブラウザに先に拾われると、
     つまみ広げがページ全体の拡大になってしまう。 */
  touch-action: none;
  overflow: hidden;
  overscroll-behavior: contain;
}
/* 画面に収める。grid の子に max-height:100% を書いても、行そのものが
   中身の高さまで伸びるので効かない。画面の高さから余白を引いて決める。 */
.zoom__img {
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: default;
  /* 寄せは JavaScript が translate で入れる。広げるほうは幅を変える
     （transform: scale だと、小さい姿のまま引き伸ばされてぼける）。 */
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.zoom__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #FFFFFA;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.zoom__close:hover { background: rgba(255, 255, 255, .26); }
/* 広げているあいだは後ろを動かさない */
body.is-zoomed { overflow: hidden; }

@media (max-width: 768px) {
  .zoom { padding: 16px; }
  .zoom__img { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .zoom__close { top: 8px; right: 10px; }
}

/* ---------- お知らせの前後送り ----------
   読み終わった人が、もう 1 本読めるように。左が古いほう、右が新しいほう。
   端の記事では片側が無いので、空の枠を置いて位置を保つ（無いほうへ
   もう一方が寄ると、ページごとに場所が変わって目で追えない）。 */
.article__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
}
.article__nav-item {
  display: block;
  min-width: 0;
  color: var(--c-ink);
  text-decoration: none;
}
.article__nav-item--next { text-align: right; }
.article__nav-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
}
.article__nav-item--next .article__nav-label { justify-content: flex-end; }
.article__nav-label svg { width: 14px; height: 14px; }
/* 見出しは長いものがある。2 行で止める。 */
.article__nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 15px;
  line-height: 26px;
  font-weight: var(--fw-medium);
  color: var(--c-body);
}
.article__nav-item:hover .article__nav-title { color: var(--c-accent); }

@media (max-width: 768px) {
  .article__nav { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .article__nav-item--next { text-align: left; }
  .article__nav-item--next .article__nav-label { justify-content: flex-start; }
  /* 1 列になったら、空の枠は場所を取らない */
  span.article__nav-item { display: none; }
}

/* ---------- 目次を押したときのスクロール ----------
   右の目次や本文の中のアンカーを押したとき、一瞬で飛ばずに滑らせる。
   どこからどこへ動いたのかが見えると、長いページの中で
   自分がどこにいるのかを見失わない。

   scroll-behavior はスクロールする側（＝ルート）に書くもので、
   リンクの側には書けない。そのため目次だけに絞ることはできず、
   ページ内のアンカーすべてに効く。それで困る場所は無い。

   動きを減らす設定にしている人には、これまでどおり一瞬で移す。
   滑らかな動きは、その設定をしている人にとっては具合が悪くなる原因になる。 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}