/**
 * styles.css — レイアウト / コンポーネント
 *
 * ★ モバイルファースト
 *   ここに書く「素の」宣言はすべてモバイル（〜599px）のもの。
 *   広い画面向けの上書きは @media (min-width: …) だけで行い、max-width クエリは使わない。
 *   ブレークポイント（要件定義書 v2.3 §5.2 準拠）: 375px を基準幅とし、768 / 1024 / 1280 / 1536px で拡張。
       1536px は上書き無し。コンテナ幅は --width-content = max(1200px, 80vw) で、広い画面では画面の80%を使う（2026-08-18 に 1200px 固定から変更）。
 *   広げる方針が決まった時点で 1536px のブロックを足す。
 *
 * ★ 色・寸法は必ず tokens.css の var() を参照する（SPEC.md §7）。
 *   リテラル値を書くとデザイン差し替えが不能になり、ビルドが ⚠️ 警告を出す。
 */

/* ══════════════════════════════════════════════════
   1. リセットと土台（モバイル基準）
   ══════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
  -webkit-text-size-adjust: 100%;
}

/* フッターを下端へ（上の body の flex と対）。main だけが伸び、ヘッダー・フッターは中身の高さのまま */
body > main {
  flex: 1 0 auto;
}

body {
  margin: 0;
  /* 2026-09-10（利用者報告・15-redesign M10）: 中身が短いページ（企業のイベント一覧 4 件など）でフッターが画面の途中に浮いていた。
     body を縦の flex にして main を伸ばし、フッターを常に画面の下端以下に置く。 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  margin: 0;
}

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

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

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
}

/* 横スクロールする帯の共通挙動。モバイルでは指で送れることを最優先にする。 */
.scroller {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  /* スナップ位置を余白の内側に合わせる。指定しないと読み込み直後に padding 分
     （=5vw）だけスクロールした状態になり、先頭カードだけ画面端に貼り付く。 */

  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  /* 画面端まで流して「まだ続く」ことを見せる */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-2);
}

.scroller > * {
  scroll-snap-align: start;
}

/* ══════════════════════════════════════════════════
   2. アクセシビリティ
   ══════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   3. ブランドロゴ
   ══════════════════════════════════════════════════ */
.brand {
  /* U10: ロゴもタップ目標。文字の大きさは変えず当たり判定だけ44pxにする */
  min-height: 44px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.brand__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  font-style: italic;
  letter-spacing: var(--tracking-logo);
  color: var(--color-heading);
}

.brand-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  align-self: flex-end;
  margin-bottom: 3px;
}

/* 15-redesign A1（2026-09-13 利用者裁定）: 副題はロゴの**下**。横に並べるとロゴ＋副題が 389px になり、
   ヘッダー幅 1232px の中でメニュー（570px）を真ん中に置けなかった（左端と重なる）。縦に積めば左の塊は 174px */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
}
.brand__tagline {
  display: none; /* モバイルでは省く。80rem 以上で表示 */
  margin: -4px 0 0; /* ロゴの当たり判定 44px の余白に少し食い込ませ、塊を 58px（ヘッダー 60px）に収める */
  line-height: 1.2;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   4. ヘッダー（モバイル: 2段構成 / 1120px〜: 1段）
   ══════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  /* CR-07: 左＝ロゴ／中央＝メニュー／右＝言語切替。
     ⚠️ グリッドで列を固定してはいけない。タグラインは狭い画面で display:none になり、
     **display:none の子はグリッドの列を占めない**ため、子と列がずれて右端の 1fr が
     空のまま余った（実測: 言語切替が中央付近に取り残された）。
     フレックスにして、ナビの auto マージンで中央を作る。子の数が変わっても崩れない。
     ⚠️ D-024: 折り返しは `wrap`。以前 `nowrap` だったため、2段目へ回る前提で書かれた
     ナビ（`grid-column: 1 / -1`）が回れず、帯だけが潰れて 375px で可視率 9% になった。 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
}

.site-header__inner > .site-nav {
  /* 左右に auto マージンを置くと、残り幅の中央へ寄る（1280px 以上でだけ意味を持つ。
     それ未満ではナビは幅いっぱいのパネル行なので効かない） */
  margin-inline: auto;
  min-width: 0;
}

/* D-024: 1280px 未満のナビと言語切替は、1段目の下に開くパネル行にする。
   ☰（.nav-toggle）が開閉する。横スクロールの帯は使わない。 */
.site-nav {
  order: 10;
  flex-basis: 100%;
  /* 項目が多い言語でも画面の外へ伸びない。パネル自身が縦スクロールする。 */
  max-height: calc(100dvh - var(--header-height) - var(--space-5));
  overflow-y: auto;
}

.lang-switch {
  order: 11;
  flex-basis: 100%;
}

.site-nav ul {
  display: flex;
  /* パネルでは縦積み。1280px 以上で横並びへ戻す（§17） */
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.site-nav a {
  /* U10: タップ目標44px以上。旧 display:inline-block + padding のみでは高さ29pxで、
     指では狙いにくくグローバルナビ全項目が該当していた。高さだけを広げ、
     文字サイズ・色・項目そのものは変更しない。 */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  border-top: 1px solid var(--color-border);
}

/* 右肩の道具立て（検索・☰）をひとまとまりにして右端へ寄せる。
   個々に auto マージンを置くと、CTA の有無で余白の配り方が変わって位置が動く。 */
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* CTA（site.navCta）が在るときは、右へ寄せる役目を CTA が引き受ける。
   ⚠️ 両方に auto マージンを置くと余白が等分され、CTA が1段目の中央に取り残される
   （タグラインを display:none にしたときに列がずれた CR-07 と同じ型の事故）。 */
.header-cta {
  margin-left: auto;
}

.header-cta ~ .header-tools {
  margin-left: var(--space-3);
}

/* ☰（D-024）。hidden で出力され、スクリプトが動いたときだけ現れる。
   ⚠️ `:not([hidden])` を外してはいけない —— 作者側の display は hidden 属性に勝つため、
   JS が動かない環境でも押せないボタンが出てしまう。 */
.nav-toggle:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* U10: タップ目標44px */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}

/* 閉じている間は display で消す（JS が動いているときだけ畳む）。
   ⚠️ hidden 属性で消してはいけない —— 属性は CSS で打ち消しても読み上げから
   消えたままになり、1280px 以上へ回転したとき「見えるのに読まれない」ナビが残る（D-024）。 */
.js .site-header:not(.is-nav-open) .site-nav,
.js .site-header:not(.is-nav-open) .lang-switch {
  display: none;
}

/* モバイルの固定ヘッダーには収まらないので出さない。
   リンク先(#services)はナビと本文から到達できるため、導線は失われない。600px 以上で表示する。 */
.header-cta {
  display: none;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: background var(--transition-base);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.lang-switch__current {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* ── ヘッダーの検索（CR-95 / CR-106）──────────────────────────
   運営指摘 2026-09-09「虫眼鏡アイコンと被らないように。モーションも付けて」。
   初版は入れ物のスタイルが無く、開いた入力欄が虫眼鏡の上に重なっていた。

   構造: .header-search（入れ物・relative）
           ├ .header-search__toggle（虫眼鏡。**常に見える位置に居続ける**）
           └ .header-search__form（開いたときだけ横に伸びる）
   ⚠️ 虫眼鏡は absolute で浮かせない。並びの中に置いたまま**動かさない**。
   🚨 逆に、伸びるのは**フォームの側**で、これは absolute にする（CR-106 の実測 2026-09-09）。
      最初はフォームも並びの中に置いて幅で押し出したが、`.site-header__inner` は
      `flex-wrap: wrap`（D-024）なので、280px が入りきらず**検索一式が2段目の左端へ
      折り返した**（虫眼鏡が x=1185 → x=41 へ飛ぶ）。絶対配置にすると行の幅を1px も
      増やさないので、折り返しが起きない。ナビの上へ被さるが、下地を敷いてある。 */
.header-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
}

.header-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px は「押せると分かる大きさ」の下限。狭い画面でも押し外さない */
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  color: inherit;
  transition: background var(--transition-base), color var(--transition-base);
}

.header-search__toggle:hover,
.header-search__toggle:focus-visible {
  background: var(--color-surface-subtle, rgb(0 0 0 / 5%));
}

/* 開いている間は、押した場所が「閉じる」だと分かるよう色を反転させる */
.header-search--open .header-search__toggle {
  background: var(--color-accent);
  color: #fff;
}

/* ── 開閉のモーション ────────────────────────────────
   幅と不透明度だけを動かす（display は動かせない）。
   🚨 hidden 属性が付いている間は幅0なので、閉じている時にレイアウトを一切押さない。
   ⚠️ [hidden] より詳細度を上げないこと。JS 無効時は hidden のまま＝出ない、が正しい。 */
.header-search__form {
  /* 虫眼鏡の**左隣**へ伸びる。right を 100% + 隙間 にすると、閉じた時に幅0でも
     虫眼鏡へ寄り付かない＝重ならない。 */
  position: absolute;
  top: 50%;
  right: calc(100% + var(--space-1));
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
  width: 0;
  opacity: 0;
  /* 下地。ナビの文字の上に重なるので、透けさせない */
  background: var(--color-bg);
  transition:
    width var(--transition-base) ease,
    opacity var(--transition-base) ease;
}

.header-search--open .header-search__form {
  width: min(280px, 60vw);
  opacity: 1;
}

.header-search__input {
  flex: 1 1 auto;
  min-width: 0; /* flex の中で縮めるために要る。無いと入力欄がはみ出す */
  height: 34px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.header-search__input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(31 69 180 / 18%);
}

.header-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-accent);
  color: #fff;
  transition: background var(--transition-base);
}

.header-search__submit:hover { background: var(--color-accent-hover); }

/* 開いている間はナビを退かせる。フォームはナビの上へ被さるので、下の文字が
   フォームの縁で切れて「半分だけの字」が覗く（実測 2026-09-09）。薄くすると気にならない。
   ⚠️ 検索は**ナビの後ろ**の兄弟なので、`~` では前のナビに届かない。:has で親から辿る。 */
.site-header:has(.header-search--open) .site-nav {
  opacity: 0.3;
  transition: opacity var(--transition-base) ease;
}

/* 動きを減らす設定の人には動かさない（既存の規律に合わせる） */
@media (prefers-reduced-motion: reduce) {
  .header-search__form,
  .site-header:has(.header-search--open) .site-nav { transition: none; }
}

/* ══════════════════════════════════════════════════
   5. ヒーロー（ポータル）
   ══════════════════════════════════════════════════ */
.hero {
  position: relative;
  /* 支給画像を背景に敷き、**明るい幕**を上に重ねる。
     ⚠️ このヒーローの文字は濃色（--color-heading）なので、暗幕を敷くと読めなくなる。
     文字側ではなく幕側を明るくして、画像を淡く沈める。背景色は画像が落ちた時の受け皿。 */
  background:
    var(--gradient-hero-scrim),
    var(--gradient-hero);
  padding: var(--space-5) var(--gutter) var(--space-5);
}

.hero__inner {
  display: grid;
  gap: var(--space-4);
  max-width: var(--width-content);
  margin: 0 auto;
}

.hero__heading {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  /* 依頼（2026-08-18）: モバイルは「,」で改行する。
     語の途中で折らず、<wbr> を入れたカンマ直後だけで折り返させる。 */
  overflow-wrap: normal;
  word-break: keep-all;
}

.hero__lead {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* 2026-09-11 利用者指示: ヒーローの CTA 2 つ（掲載のご依頼＝塗り／お問い合わせ＝枠） */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.hero__btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.hero__btn--ghost {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.hero__btn:hover {
  opacity: 0.85;
}

.hero__answer {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--width-prose);
}

/* 装飾グラフィックはモバイルでは邪魔になるので出さない */
.hero__graphic {
  display: none;
  width: 100%;
  height: auto;
  color: var(--color-hero-dot);
}

.hero__graphic-dots circle {
  fill: currentColor;
}

.hero__graphic-links path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  opacity: 0.45;
}

.hero__graphic-nodes circle {
  fill: var(--color-accent);
}

.hero__searchwrap {
  max-width: var(--width-content);
  margin: var(--space-4) auto 0;
}

/* ── 検索カード ── */
.searchcard {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.search-tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar {
  display: none;
}

.search-tab {
  padding: var(--space-2) var(--space-1) var(--space-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.search-tab--active {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  border-bottom-color: var(--color-accent);
}

/* モバイルは縦積み。入力欄とボタンをそれぞれ十分な高さにする */
.search-form {
  display: grid;
  gap: var(--space-2);
}

.search-input {
  min-width: 0;
  min-height: 44px;
  padding: var(--space-3);
  font-size: var(--text-base); /* 16px 未満だと iOS で自動ズームするため縮めない */
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.search-input::placeholder {
  color: var(--color-text-faint);
}

.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: background var(--transition-base);
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.keywords__label {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* 人気キーワードの帯（CR-100・2026-09-09）
   運営指示で hero の検索カードから独立させ、最新ニュースと導入事例の間に置いた。
   ⚠️ 節として単独で立つので、上下に余白と区切りが要る。カードの列に埋もれると
      「ニュースの続き」に見えてしまう。 */
.section--keywords {
  padding-block: var(--space-4);
}
.keywords--bar {
  margin-top: 0;
  /* 2026-09-10（15-redesign B2）: 帯の上下の余白を広げる（space-3 → space-5） */
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
}
/* 帯の中ではラベルを横に置く（縦積みだと帯が厚くなりすぎる） */
.keywords--bar .keywords__label {
  width: auto;
  margin-right: var(--space-2);
  font-weight: var(--weight-bold);
}

.keyword-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

/* ══════════════════════════════════════════════════
   6. セクション共通
   ══════════════════════════════════════════════════ */
.section {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
}

.section--flush {
  padding-top: var(--space-3);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.section__heading {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.section__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: var(--accent-bar-width);
  border-radius: var(--radius-xs);
  background: var(--color-accent);
}

/* 直答（AEO-01）。視覚的には控えめだが、隠蔽はしない（クローキング回避のため必ず可視）。
   既定は負のマージンを持たない。見出しブロック直後に置かれた場合だけ、
   そのブロックの下マージン分だけ引き上げて詰める（見出しへの重なりを構造的に防ぐ）。 */
.section__answer {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--width-prose);
}

.section__head + .section__answer,
.cmp-head + .section__answer {
  margin-top: calc(var(--space-3) * -1);
}

.section__answer--standalone {
  margin-top: var(--space-3);
}

.view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;  /* U10: 旧32px。「すべて見る」は各セクションの主要導線 */
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   7. TOP STORY
   ══════════════════════════════════════════════════ */
.topstory {
  display: grid;
  gap: var(--space-4);
}

.feature {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.feature__link {
  display: block;
  position: relative;
}

.feature__img {
  width: 100%;
  min-height: 200px;
  object-fit: cover;
}

.feature__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 2px var(--space-3);
  background: var(--color-badge-pickup);
  color: var(--color-badge-contrast);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.feature__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: var(--space-6) var(--space-3) var(--space-3);
  background: var(--gradient-feature);
  color: var(--color-on-dark);
}

.feature__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-on-dark-muted);
}

.chip--category {
  padding: 1px var(--space-2);
  border: 1px solid var(--color-on-dark-muted);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
}

.feature__title {
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.feature__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-on-dark);
}

/* ── 動画ボックス ── */
.videobox {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-video-bg);
}

.videobox__stage {
  position: relative;
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--gradient-video);
  padding: var(--space-5);
}

.videobox__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--color-on-dark);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  font-style: italic;
  letter-spacing: var(--tracking-logo);
}

.videobox__caption {
  color: var(--color-on-dark-muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

/* 2026-09-10（15-redesign C1）: 動画枠に YouTube のサムネイルを敷く。stage は <a> になり、画像の上に再生ボタンを重ねる */
.videobox__stage {
  text-decoration: none;
}
.videobox--poster .videobox__stage {
  padding: 0;
  background: var(--color-video-bg);
}
.videobox__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videobox--poster .videobox__play {
  position: relative;
  margin-top: 0;
}
.videobox--poster .videobox__stage:hover .videobox__play {
  background: var(--color-accent);
}

.videobox__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: var(--space-3);
  border: 2px solid var(--color-play-border);
  border-radius: var(--radius-full);
  background: var(--color-play-bg);
  color: var(--color-on-dark);
  transition: background var(--transition-base);
}

.videobox__bar {
  height: 3px;
  background: var(--color-track);
}

.videobox__progress {
  display: block;
  width: 4%;
  height: 100%;
  background: var(--color-accent-contrast);
}

.videobox__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-on-dark-muted);
  font-size: var(--text-2xs);
}

.videobox__ctl {
  display: inline-flex;
}

.videobox__spacer {
  flex: 1;
}

/* ══════════════════════════════════════════════════
   8. カード列（モバイル: 横スクロール / 900px〜: グリッド）
   ══════════════════════════════════════════════════ */
.carousel {
  position: relative;
}

.cardrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--peek-4);
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  /* スナップ位置を余白の内側に合わせる。指定しないと読み込み直後に padding 分
     （=5vw）だけスクロールした状態になり、先頭カードだけ画面端に貼り付く。 */

  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-2);
}

.cardrow > * {
  scroll-snap-align: start;
}

.cardrow--6 {
  grid-auto-columns: var(--peek-6);
}

/* 一覧ページ（ニュース・事例）は縦積みにする（2026-08-16・ユーザー報告）
 *
 * 横スワイプのレールは「編集部が選んだ数件を送って見せる」意図の部品で、
 * 一覧（アーカイブ）には合わない。一覧で横スワイプにすると次の3点で使いにくい:
 *   1. 全体の件数と現在地が分からない（縦なら残りがスクロールバーで分かる）
 *   2. ページ自体の縦スクロールと方向が直交し、指の動きが競合する
 *   3. 読み終えて次を見るのに、毎回横方向の操作が要る
 * レール（トップページの2本）は横のまま残し、一覧だけをこの修飾子で縦にする。
 *
 * 基底の .cardrow が持つ横スクロール用の指定（負のマージン・スナップ・
 * overflow-x）をすべて打ち消す。打ち消し漏れがあると、縦積みなのに
 * 端が見切れる／不要な横スクロールバーが出る。 */
.cardrow--stack {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow-x: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
  margin-inline: 0;
  padding: 0;
  gap: var(--space-4);
}

.cardrow--stack > * {
  scroll-snap-align: none;
}

@media (min-width: 768px) {
  .cardrow--stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 送りボタンの表示条件（2026-08-16 是正）
 *
 * 以前の指定は「モバイルでは display:none / デスクトップでは表示」だった。
 * ところがデスクトップの .cardrow は grid-auto-flow:row + overflow-x:visible の
 * 通常グリッドに戻る（下の 1024px 以上の指定）ため、**スクロールできない場所にだけ
 * 矢印が出て、スクロールできる場所では隠れている**という逆の状態になっていた。
 * どの画面幅でも押して動くことがなく、これがユーザー報告の原因。
 *
 * 正しい条件は画面幅ではなく次の2つ:
 *   1. マウス操作である（指でスワイプできる端末に矢印は要らない）→ @media (hover: hover)
 *   2. 実際に送る余地がある → スクリプトが hidden を外したときだけ
 */
.carousel__prev,
.carousel__next {
  display: none;
}

@media (hover: hover) {
  .carousel__prev:not([hidden]),
  .carousel__next:not([hidden]) {
    display: inline-flex;
  }
}

.thumb {
  width: 100%;
  /* height:auto が無いと width/height 属性のプレゼンテーションヒント(360px)が残り、
     aspect-ratio が効かずに画像が縦に伸びる */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ニュース・事例カード */
.ncard__media {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* CR-66: 分類タグは複数出る。**並べる箱**を絶対配置にし、バッジ自身は静的に置く。
   ⚠️ バッジ側を absolute のままにすると、2枚目が1枚目の真上に重なって読めない
   （2026-09-08 実測）。 */
.ncard__badges {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
}

.ncard__badge {
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-badge-contrast);
  background: var(--color-badge-news);
}

.ncard__badge--product {
  background: var(--color-badge-product);
}

.ncard__badge--market {
  background: var(--color-badge-market);
}

.ncard__badge--tech {
  background: var(--color-badge-tech);
}

/* 2つ目以降の分類。依頼書 0817 の「分類タグ（枠線）」がこれ。
   1つ目を塗りにして主分類を示し、残りは枠線で従にする（読み手が主従を取り違えない）。 */
/* 15-redesign D1（2026-09-11）: 国のタグ（掲載企業の所在国）。分類の帯の隣に濃い地で */
.ncard__badge--area {
  background: var(--color-text);
  color: var(--color-bg);
}

.ncard__badge--sub {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  font-weight: var(--weight-medium);
}

/* CR-65: 並びは 図版 image20 の指定どおり タイトル → 日付 → 罫線 → 企業名。
   日付が題名より先に来ていたため、余白の持ち主も入れ替えている
   （題名が画像に接し、日付が題名と企業名の間に入る）。 */
.ncard__date {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ncard__title {
  /* 2026-09-11（15-redesign D4）: 題は 2 行で揃える。上限（clamp）と下限（min-height）の両方を持たせ、日付の位置を揃える */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--leading-normal) * 1em);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

/* どの会社の記事かをカードの時点で示す（総トップは複数社が混ざる面）。 */
.ncard__company {
  display: block;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════
   9. ダイジェスト（4パネル）
   ══════════════════════════════════════════════════ */
.digest {
  display: grid;
  gap: var(--space-3);
}

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-surface);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.panel__heading {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.panel__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
}

.panel__body {
  display: grid;
  gap: var(--space-3);
}

/* ランキング */
.rank__link {
  display: grid;
  grid-template-columns: auto 64px 1fr;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

.rank__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent-contrast);
  background: var(--color-rank-other);
}

.rank__num--1 {
  background: var(--color-rank-1);
}

.rank__num--2 {
  background: var(--color-rank-2);
}

.rank__num--3 {
  background: var(--color-rank-3);
}

.rank__img {
  border-radius: var(--radius-xs);
}

.rank__title {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.rank__views {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}

/* サムネイル付きリスト */
.tlist__link {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-2);
  align-items: start;
  min-height: 44px;
}

.tlist__img {
  border-radius: var(--radius-xs);
}

.tlist__title {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tlist__date {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}

/* イベント */
.evt__link {
  display: block;
  padding: var(--space-1) 0;
}

.evt__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.evt__status {
  padding: 1px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent-contrast);
  background: var(--color-status-planned);
}

.evt__status--soon {
  background: var(--color-status-soon);
}

.evt__status--online {
  background: var(--color-status-online);
}

.evt__status--open {
  background: var(--color-status-open);
}

.evt__date {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.evt__title {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.evt__venue {
  display: block;
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}

/* ══════════════════════════════════════════════════
   10. 動画ライブラリー
   ══════════════════════════════════════════════════ */
.vcard__media {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-play-border);
  border-radius: var(--radius-full);
  background: var(--color-play-bg);
  color: var(--color-on-dark);
}

.vcard__dur {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-scrim-strong);
  color: var(--color-on-dark);
  font-size: var(--text-2xs);
}

.vcard__title {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════
   11. サービス
   ══════════════════════════════════════════════════ */
.services {
  display: grid;
  gap: var(--space-3);
}

.svcgroup {
  /* 2026-09-10（15-redesign F4）: 4 つの箱の高さを揃える。親のグリッドが行の高さを揃え、箱は縦いっぱいに伸びる */
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.svcgroup__heading {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.svcgroup__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
}

.svcgroup__items {
  display: grid;
  gap: var(--space-4);
}

.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.svc__icon {
  display: inline-flex;
  color: var(--color-svc-tv);
}

.svc__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-svc-tv);
}

.svc__body {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* CR-13: サービスの内訳（依頼書 図版 image19 の表を縦の箇条で出す）。
   <a> の中なので ul/li は使えず span を block にして並べる。 */
.svc__points {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.svc__point {
  display: block;
  padding-left: var(--space-3);
  position: relative;
  font-size: var(--text-2xs);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

/* 2026-09-10（15-redesign F2）: 名称と内訳の各項目がリンク。押せることが分かるよう hover で下線 */
a.svc__name,
a.svc__point {
  text-decoration: none;
}
a.svc__name:hover,
a.svc__point:hover {
  text-decoration: underline;
}

/* 2026-09-10（15-redesign F4）: 説明が 1 行の箱と 2 行の箱で区切り線の位置が揃うよう、説明の最低の高さを 2 行にする */
.svc__body {
  min-height: calc(2 * var(--leading-normal) * 1em);
}

.svc__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.svc__icon--media,
.svc__name--media {
  color: var(--color-svc-media);
}

.svc__icon--video,
.svc__name--video {
  color: var(--color-svc-video);
}

.svc__icon--magazine,
.svc__name--magazine {
  color: var(--color-svc-magazine);
}

.svc__icon--ad,
.svc__name--ad {
  color: var(--color-svc-ad);
}

.svc__icon--products,
.svc__name--products {
  color: var(--color-svc-products);
}

.svc__icon--exhibition,
.svc__name--exhibition {
  color: var(--color-svc-exhibition);
}

.svc__icon--recruitment,
.svc__name--recruitment {
  color: var(--color-svc-recruitment);
}

/* ══════════════════════════════════════════════════
   12. CTA バナー
   ══════════════════════════════════════════════════ */
.ctabanner {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
}

.ctabanner__heading {
  color: var(--color-accent-contrast);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

.ctabanner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  background: var(--color-surface);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: opacity var(--transition-base);
}

/* ══════════════════════════════════════════════════
   13. フッター（ポータル）
   ══════════════════════════════════════════════════ */
.site-footer {
  margin-top: var(--space-5);
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-5);
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

.brand--footer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.brand--footer .brand__name {
  color: var(--color-footer-heading);
}

.brand__tagline--footer {
  display: inline;
  color: var(--color-footer-text);
}

.site-footer__desc {
  font-size: var(--text-2xs);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* U10: タップ目標44px以上。アイコンの見た目の大きさは変えず、当たり判定だけ広げる */
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-footer-border);
  color: var(--color-footer-heading);
  transition: background var(--transition-base);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--color-footer-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.site-footer__nav ul {
  display: grid;
  gap: var(--space-2);
}

.site-footer__nav a {
  /* U10: タップ目標44px以上（旧26px）。ヘッダーナビと同じ扱いに揃える */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0;
  font-size: var(--text-2xs);
  color: var(--color-footer-text);
}

.site-footer__copy {
  padding: var(--space-4);
  border-top: 1px solid var(--color-footer-border);
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--color-footer-text);
}

/* ══════════════════════════════════════════════════
   14. 企業マイクロページ（.company-page）
   ══════════════════════════════════════════════════ */
.clogo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.clogo__main {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  font-style: italic;
  letter-spacing: var(--tracking-logo);
  color: var(--company-accent);
}

.clogo__sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* ── 企業ヘッダー（モバイル: 2段） ── */
.cmp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-company-border);
}

.cmp-header__inner {
  display: grid;
  /* ロゴ ／ 問い合わせ ／ ☰。CTA が無い企業では auto 列が潰れるだけで崩れない */
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
}

/* D-024: ポータルと同じ規則。1280px 未満は ☰ で開くパネル行 */
.cmp-nav {
  order: 10;
  grid-column: 1 / -1;
  max-height: calc(100dvh - var(--header-height) - var(--space-5));
  overflow-y: auto;
}

.cmp-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.cmp-nav a {
  display: flex;
  align-items: center;
  /* U10: タップ目標44px */
  min-height: 44px;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border-top: 1px solid var(--color-company-border);
}

.js .cmp-header:not(.is-nav-open) .cmp-nav {
  display: none;
}

/* CMS で「画像で出す」を選んだときの企業ロゴ。高さで大きさを決め、幅は縦横比に任せる
   （ポータルのロゴと同じ規律。max-width:100% が効くと横だけ潰れる） */
.clogo__img {
  display: block;
  max-width: none;
  height: 24px;
  width: auto;
}

/* ── 企業ボタン ── */
.cbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.cbtn--sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-2xs);
}

/* 企業ヘッダーのCTAはモバイルではアイコンのみの丸ボタンにする。
   問い合わせ導線は企業ページの要なので、消さずに幅だけ詰める。 */
.cmp-header .cbtn--sm {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--radius-full);
}

.cmp-header .cbtn--sm span {
  display: none;
}

.cbtn--primary {
  background: var(--company-cta);
  color: var(--color-on-dark);
  border: 1px solid var(--company-cta);
}

.cbtn--ghost {
  background: transparent;
  color: var(--color-on-dark);
  border: 1px solid var(--color-play-border);
}

/* 2026-09-10（15-redesign G1）: ヒーローのボタン 2 つ。赤＝お問い合わせ、淡色＝会社概要 */
.cbtn--cta {
  background: var(--company-cta, #d0021b);
  color: var(--color-on-dark);
  border: 1px solid transparent;
}
.cbtn--cta:hover {
  background: var(--company-cta-hover, #a80016);
}
.cmp-hero .cbtn--ghost {
  background: var(--color-on-dark);
  color: var(--company-accent-deep);
  border-color: var(--color-on-dark);
}
.cmp-hero .cbtn--ghost:hover {
  background: var(--color-on-dark-muted, #e6e9f2);
}

/* 15-redesign M5（2026-09-12）: 「ニュース」のプルダウン。狭い画面では出さない（ニュース面の分類タブが同じ役目）。1280px 以上で hover / focus-within */
/* ⚠️ .cmp-nav ul（flex）より詳細度を上げる。上げないと入れ子の ul が常時開いた（実測 1440px で display:flex） */
.cmp-nav ul.cmp-nav__sub {
  display: none;
}

/* 15-redesign M9 後半（2026-09-12）: 出展予定（会期＋展示会名＋会場の行）と出展レポート（カード） */
.cmp-events__sub {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--company-accent, var(--color-heading));
}
.upcoming {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.upcoming__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.upcoming__date {
  flex: none;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.upcoming__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--company-accent, var(--color-text));
}
.upcoming__venue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* 15-redesign M6: 帯の中の見出し・View More・説明文・「すべて表示」 */
.pcat__label {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.pcat__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: inherit;
  white-space: nowrap;
}
.pcat__more svg {
  /* アイコンは既定寸法で出し、ここで文字に合わせる（render 側に寸法の直書きを増やさない） */
  width: 14px;
  height: 14px;
}
.pcat__note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.pcat__all {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}
/* 「すべてのカテゴリーを表示」は戻る導線。本文と見分けが付くようリンク色＋下線、当たり判定は 44px（U10・.view-all と同じ） */
.pcat__all a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* ?cat= で 1 分類に絞ったとき（script が data-cat-open を付ける）は「もっと見る」の結果として全件を縦に並べる。
   横送り（4 枚＋送りボタン）のままだと View More を押しても見える枚数が増えない。 */
.pcat[data-cat-open] .pcat__more {
  display: none;
}
.pcat[data-cat-open] .cardrow {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: visible;
  overscroll-behavior-x: auto;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
  margin-inline: 0;
  padding: 0;
}
.pcat[data-cat-open] .carousel__prev,
.pcat[data-cat-open] .carousel__next {
  display: none;
}
@media (min-width: 1024px) {
  .pcat[data-cat-open] .cardrow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* 15-redesign M11: 動画はカテゴリー別に縦 4 列（狭い画面は 1〜2 列） */
.vcat {
  margin-bottom: var(--space-5);
}
.vcat__band {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-left: 4px solid var(--company-accent, var(--color-accent));
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
@media (min-width: 64rem) {
  .vgrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 企業ヒーロー ── */
.cmp-hero {
  position: relative;
  overflow: hidden;
  /* CR-32/47: 単色（企業のロゴカラー）。テーマが企業ごとに差し替える */
  /* 2026-09-11 利用者指示: 既定の地は斜め 45 度（左上 → 右下）で濃くなるグラデーション。両端はビルドが brandColor から導く
     （--company-hero-start / --company-hero-end・render-company.mjs）。変数が無い企業（theme 未設定）は従来の一色に落ちる。 */
  background: linear-gradient(135deg, var(--company-hero-start, var(--company-accent-deep)) 0%, var(--company-hero-end, var(--company-accent-deep)) 100%);
  color: var(--color-on-dark);
  padding: var(--space-6) var(--gutter);
}

.cmp-hero__watermark {
  display: none;
  position: absolute;
  left: 8%;
  bottom: -0.15em;
  font-size: 12rem;
  font-weight: var(--weight-black);
  font-style: italic;
  color: var(--color-company-watermark);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.cmp-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: var(--width-content);
  margin: 0 auto;
}

.cmp-hero__title {
  color: var(--color-on-dark);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.cmp-hero__headline {
  color: var(--color-on-dark);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.cmp-hero__lead {
  color: var(--color-on-dark-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.cmp-hero__answer {
  color: var(--color-on-dark-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  max-width: var(--width-prose);
  margin-bottom: var(--space-4);
}

/* モバイルでは主ボタンを幅いっぱいにして押しやすくする */
.cmp-hero__actions {
  /* 2026-09-10（15-redesign G1）: ボタン 2 つを横に並べる（狭い画面では折り返す） */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

/* 2026-09-10（15-redesign G1）: 動画が無い企業のバナー画像（動画枠と同じ場所・同じ比率） */
.cmp-banner {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cmp-banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.cmp-video--bare .cmp-video__link {
  aspect-ratio: 16 / 9;
  background: var(--gradient-video, var(--color-video-bg));
}

.cmp-video {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-video-bg);
  box-shadow: var(--shadow-md);
}

.cmp-video__link {
  position: relative;
  display: block;
}

.cmp-video__img {
  display: block;
  width: 100%;
  height: auto; /* 属性の height=720 を打ち消す（実測: 571×720 の縦長になっていた） */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cmp-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-on-dark);
  color: var(--company-accent-deep);
  box-shadow: var(--shadow-md);
}

.cmp-video__bar {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-on-dark);
  font-size: var(--text-xs);
}

.cmp-video__bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  color: var(--color-on-dark);
}

/* ── 企業セクション共通 ── */
.cmp-section {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
}

.cmp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cmp-eyebrow {
  color: var(--company-eyebrow);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-1);
}

.cmp-heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

/* ── ABOUT US ── */
.cmp-about__grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.cmp-about__body {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.cmp-about__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  color: var(--company-eyebrow);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cmp-about__figure {
  margin: 0;
}

.cmp-about__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* 実績カード: モバイルは横スクロール */
.cmp-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  /* スナップ位置を余白の内側に合わせる。指定しないと読み込み直後に padding 分
     （=5vw）だけスクロールした状態になり、先頭カードだけ画面端に貼り付く。 */

  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-2);
}

.cmp-stats > * {
  scroll-snap-align: start;
}

.cmp-stat {
  position: relative;
  display: flex;
  min-height: 190px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--company-accent-deep);
}

.cmp-stat__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.cmp-stat__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  text-align: center;
  background: var(--gradient-stat);
  color: var(--color-on-dark);
}

.cmp-stat__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1;
}

.cmp-stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cmp-stat__note {
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-on-dark-muted);
  line-height: var(--leading-normal);
}

/* ── 企業ページのカード列（モバイル: 横スクロール） ── */
.cmp-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--peek-5);
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  /* スナップ位置を余白の内側に合わせる。指定しないと読み込み直後に padding 分
     （=5vw）だけスクロールした状態になり、先頭カードだけ画面端に貼り付く。 */

  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--space-2);
}

.cmp-row > * {
  scroll-snap-align: start;
}

/* ニュースカード */
.nwcard {
  border: 1px solid var(--color-company-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow var(--transition-base);
}

.nwcard__link {
  display: block;
  position: relative;
  padding-bottom: var(--space-5);
}

.nwcard__media {
  position: relative;
  display: block;
}

.nwcard__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 1px var(--space-2);
  background: var(--company-cta);
  color: var(--color-on-dark);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.nwcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) 0;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.nwcard__cat {
  color: var(--company-eyebrow);
  font-weight: var(--weight-bold);
}

.nwcard__title {
  padding: var(--space-2) var(--space-3) 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

.nwcard__arrow {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  color: var(--color-text-muted);
}

/* 製品カード */
.pcard {
  border: 1px solid var(--color-company-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow var(--transition-base);
}

.pcard__link {
  display: block;
  position: relative;
  padding-bottom: var(--space-5);
}

.pcard__name {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.pcard__body {
  display: block;
  padding: 0 var(--space-3);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.pcard__arrow {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  color: var(--color-text-muted);
}

/* イベントカード */
.ecard {
  border: 1px solid var(--color-company-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: box-shadow var(--transition-base);
}

.ecard__link {
  display: block;
  padding: var(--space-3);
}

.ecard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ecard__status {
  padding: 1px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  background: var(--color-status-planned);
}

.ecard__status--upcoming {
  background: var(--color-status-upcoming);
}

.ecard__status--report {
  background: var(--color-status-report);
}

.ecard__date {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.ecard__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

.ecard__venue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* ── FAQ（アコーディオン） ── */
.faq2grid {
  display: grid;
  gap: var(--space-2);
}

.faq2 {
  border: 1px solid var(--color-company-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.faq2__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.faq2__q::-webkit-details-marker {
  display: none;
}

.faq2__qtext {
  display: flex;
  /* 2行になったときに「Q.」を1行目へ揃える（center だと上下中央でずれる） */
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.faq2__mark {
  /* ⚠️ flex の子は既定で縮む。質問文が2行になると「Q」と「.」が分かれて
     「Q」の下に「.」が落ちる（実測・モバイル 375px）。縮ませず改行もさせない。 */
  flex: none;
  white-space: nowrap;
  align-self: start;
  color: var(--company-accent);
  font-weight: var(--weight-bold);
}

.faq2__toggle {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
}

.faq2[open] .faq2__toggle {
  transform: rotate(45deg);
}

.faq2__a {
  padding: 0 var(--space-3) var(--space-3) var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── 求人 ── */
.recruit {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.recruit__jobs {
  display: grid;
  gap: var(--space-3);
}

.jcard {
  padding: var(--space-4);
  border: 1px solid var(--color-company-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.jcard__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.jcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.jcard__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.jcard__body {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.jcard__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--company-eyebrow);
}

.rbanner {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--company-accent-deep);
}

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

.rbanner__body {
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: var(--gradient-stat);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  align-items: flex-start;
}

.rbanner__heading {
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

.rbanner__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  background: var(--color-surface);
  color: var(--company-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* ── お問い合わせバナー ── */
.cmp-contact {
  margin-top: var(--space-5);
  background: var(--gradient-company-contact);
  color: var(--color-on-dark);
  padding: var(--space-5) var(--gutter);
}

/* 2026-09-11 利用者報告: 青地の問い合わせ帯で注記（灰色）が読めなかった。帯の中では白系にする */
.cmp-contact .teaser-form__note {
  color: var(--color-on-dark);
  opacity: 0.92;
}

.cmp-contact__inner {
  display: grid;
  gap: var(--space-4);
  max-width: var(--width-content);
  margin: 0 auto;
}

.cmp-contact__heading {
  color: var(--color-on-dark);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}

.cmp-contact__body {
  color: var(--color-on-dark-muted);
  font-size: var(--text-xs);
}

.cmp-contact .section__answer {
  max-width: var(--width-content);
  margin: var(--space-3) auto 0;
  color: var(--color-on-dark-muted);
}

/* ── 修正依頼（0817）の反映 ── */

/* CR-26: 表示中の面のメニューを目立たせる。
   正は HTML 側の aria-current="page"（機械可読）で、ここはその見え方だけを与える。
   色だけに頼らず下線も引く（色覚特性で伝わらない経路を作らない）。 */
.cmp-nav a[aria-current="page"] {
  color: var(--company-accent);
  font-weight: var(--weight-bold);
  border-bottom: 2px solid var(--company-accent);
}

/* CR-33: トップバナーの縦幅を狭く（依頼: 1920×560 ＝ 24:7）。
   固定 px ではなく比率で持たせ、狭い画面では下限を切って読めなくならないようにする。 */
.cmp-hero {
  padding-block: var(--space-5);
}

@media (min-width: 48rem) {
  /* 2026-09-11 利用者指示: ヒーロー部の高さは 560px 固定（帯全体。実測で余白込み 600px になっていたので帯自身に高さを持たせる） */
  .cmp-hero {
    box-sizing: border-box;
    height: 560px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .cmp-hero__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 2026-09-10（15-redesign G1）: 動画かバナーがあるときは左＝文章・右＝メディアの 2 列 */
  .cmp-hero--with-media .cmp-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
  }
  /* 動画・バナーは 560px の帯に収める（16:9 のまま、高さの上限で幅が決まる） */
  .cmp-hero--with-media .cmp-hero__media {
    max-height: calc(560px - 2 * var(--space-6));
    display: flex;
    justify-content: flex-end;
  }
  .cmp-hero--with-media .cmp-video,
  .cmp-hero--with-media .cmp-banner {
    width: 100%;
    max-width: calc((560px - 2 * var(--space-6)) * 16 / 9);
  }
  .cmp-hero--with-media .cmp-hero__headline {
    font-size: var(--text-2xl);
  }
}

/* CR-29: テキストと動画の間の余白を詰める */
.cmp-hero__copy + .cmp-hero__media,
.cmp-about__body + .cmp-about__figure {
  margin-top: var(--space-3);
}
@media (min-width: 48rem) {
  .cmp-hero__copy + .cmp-hero__media {
    margin-top: 0;
  }
}

/* CR-43: フッター背景は企業のロゴカラー・文字は白。
   ⚠️ 背景の指定は**この下の `.cmp-footer` 本体（後方）** に置くこと。
   ここに書くと同一詳細度で後方のルールに負ける（実測で白のままだった）。 */
.cmp-footer a,
.cmp-footer .clogo__main,
.cmp-footer .clogo__sub,
.cmp-footer__address {
  color: var(--color-on-dark);
}

.cmp-footer__nav a:hover {
  color: var(--color-on-dark-muted);
}

/* CR-44/45: 最下段は ENGINE への小さな戻り導線だけにする（コピーライト表記は出さない） */
.cmp-footer__engine {
  padding: var(--space-2) var(--gutter) var(--space-3);
  text-align: center;
}

.cmp-footer__engine a {
  color: var(--color-on-dark-muted);
  font-size: var(--text-2xs);
  /* U10: 小さくても押せる高さは確保する */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── 企業サブページ（PUB-105〜108）の見出し帯 ── */
/* 企業トップの cmp-hero より軽い帯。トップ=抜粋 / サブ=全件 の関係を、
   h1 の文言（「<社名> の<面>」）と戻り導線で示す。 */
.cmp-subhero {
  border-bottom: 1px solid var(--color-company-border);
  background: var(--color-bg-subtle);
}

.cmp-subhero__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
}

.cmp-subhero__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.cmp-subhero .section__answer {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.cmp-subhero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* U10: タップ目標を確保する（モバイルUI改善の既定値に合わせる） */
  min-height: 44px;
  margin-top: var(--space-2);
  color: var(--company-eyebrow);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* ── 会社概要（PUB-108）の基本情報表 ── */
.cmp-profile {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* 狭い画面では見出し列と値を縦に積む。横並びのまま住所を入れると、
   タイの英字住所が1語も折り返せずに表を突き破る。 */
.cmp-profile th,
.cmp-profile td {
  display: block;
  width: 100%;
  padding: var(--space-2) 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.cmp-profile th {
  padding-bottom: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.cmp-profile tr {
  display: block;
  border-bottom: 1px solid var(--color-border);
}

.cmp-profile td {
  color: var(--color-text);
}

.cmp-profile__locations {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.cmp-profile__loc-label {
  display: block;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

@media (min-width: 48rem) {
  .cmp-subhero__title {
    font-size: var(--text-3xl);
  }

  /* 画面が広ければ本来の2列に戻す */
  .cmp-profile tr {
    display: table-row;
  }

  .cmp-profile th,
  .cmp-profile td {
    display: table-cell;
    width: auto;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }

  .cmp-profile tr {
    border-bottom: 0;
  }

  .cmp-profile th {
    width: 12rem;
    padding-right: var(--space-4);
  }
}

/* ── 企業フッター ── */
/* CR-43: 背景は企業のロゴカラー（テーマが企業ごとに差し替える）、文字は白 */
.cmp-footer {
  /* 15-redesign M10（2026-09-11・利用者指示）: 背景はロゴカラー・文字は白。--company-accent はロゴ色そのもの（白文字で 4.5:1 を割る明るい色だけ build が濃くする） */
  background: var(--company-accent, var(--company-accent-deep));
  border-top: 0;
  color: var(--color-on-dark);
}

.cmp-footer__inner {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

.clogo--footer .clogo__main {
  font-size: var(--text-xl);
}

.cmp-footer__address {
  font-style: normal;
  font-size: var(--text-2xs);
  line-height: var(--leading-relaxed);
  /* 2026-09-10（利用者報告）: 紺の地に灰色の文字が乗って読めなかった。地が濃色なので白系にする */
  color: var(--color-on-dark);
}

.cmp-footer__address a {
  color: var(--color-on-dark);
}

.cmp-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.cmp-footer__nav ul {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.cmp-footer__nav a {
  display: inline-block;
  padding: var(--space-1) 0;
  font-size: var(--text-2xs);
  color: var(--color-on-dark); /* 2026-09-10: 濃色の地に合わせて白 */
}

.cmp-footer__social {
  display: flex;
  gap: var(--space-3);
}

.csocial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--company-accent-deep);
  color: var(--color-on-dark);
}

.cmp-footer__copy {
  padding: var(--space-4) var(--gutter);
  border-top: 1px solid var(--color-company-border);
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  max-width: var(--width-content);
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════
   15. 768px 〜（タブレット縦）
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-5);
  }

  /* ⚠️ ここでは出さない。CR-09 でメニュー名が長くなり、1265px 実測で
     ヘッダーが 1352px まで伸びて横スクロールが出た。タグラインは装飾なので、
     ナビが収まる幅まで待つ（下の 90rem 分岐で出す）。 */
  .brand__tagline {
    display: none;
  }

  .header-cta {
    display: inline-flex;
  }

  .cmp-header .cbtn--sm {
    width: auto;
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
  }

  .cmp-header .cbtn--sm span {
    display: inline;
  }

  .hero {
    padding-block: var(--space-6);
  }

  /* 入力欄とボタンを横並びに戻す */
  .search-form {
    grid-template-columns: 1fr auto;
  }

  .keywords__label {
    width: auto;
  }

  .cardrow {
    grid-auto-columns: 46%;
  }

  .cardrow--6 {
    grid-auto-columns: 34%;
  }

  .cmp-row {
    grid-auto-columns: 44%;
  }

  .cmp-stats {
    grid-auto-columns: 40%;
  }

  .digest {
    grid-template-columns: repeat(2, 1fr);
  }

  .svcgroup__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .recruit__jobs {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq2grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2) var(--space-4);
  }

  .ctabanner {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--space-5) var(--space-6);
  }

  .ctabanner__heading {
    font-size: var(--text-lg);
  }

  .cmp-hero__actions {
    grid-auto-flow: column;
    justify-content: start;
  }

  .cmp-contact__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .cmp-contact__heading {
    font-size: var(--text-xl);
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .cmp-footer__inner {
    grid-template-columns: auto 1fr;
  }

  .cmp-footer__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════════
   16. 1024px 〜（タブレット横・小型ラップトップ）: カード列をグリッドへ
   ══════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --scroll-offset: 76px;
  }

  .section,
  .cmp-section {
    padding-block: var(--space-6);
  }

  /* ⚠️ ここで `grid-auto-flow: row` / `overflow-x: visible` に戻さないこと。
     依頼書 0817 図版 image7 は「一度に4枚見せ、残りは送りボタンで送る」形で、
     カードレールは**デスクトップでも横のまま**。row に戻すと 10 件が縦に積まれ、
     横スクロールの余地が消えて carouselScript が送りボタンを隠す（実測）。
     .cmp-row / .cmp-stats は元々レールではないのでグリッドに戻してよい。 */
  .cmp-row,
  .cmp-stats {
    grid-auto-flow: row;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: var(--space-4);
  }

  .cardrow {
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: var(--space-4);
  }

  /* 依頼書 0817 図版 image7: 一度に4枚見せ、残りは送りボタンで送る。
     ⚠️ `grid-template-columns: repeat(4, …)` に**しない**。それだと列が確定して
        5枚目以降が次の行へ折り返し、横スクロールの余地が消えるため
        carouselScript が「送る余地なし」と判定して送りボタンを隠す（実測: 10件が3行になり
        ボタンは display:none だった）。列は auto のまま「1枚＝(幅-隙間)/4」に固定する。 */
  .cardrow {
    grid-auto-columns: calc((100% - var(--space-4) * 3) / 4);
  }

  .cardrow--6 {
    grid-auto-columns: calc((100% - var(--space-4) * 5) / 6);
  }

  /* 一覧ページは縦積みのまま（横スワイプはアーカイブに合わない・既存の判断） */
  .cardrow--stack {
    grid-auto-columns: auto;
  }

  /* CR-37: 新着ニュース一覧は4カラム（依頼: 総ENGINEトップと同じくらいのサイズ）。
     従来は5枚並べており、1枚あたりが小さく題名が読み切れなかった。 */
  .cmp-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .cmp-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .carousel__prev,
  .carousel__next {
    position: absolute;
    top: 38%;
    /* ⚠️ z-index が無いと .cardrow がボタンの上に乗り、クリックがボタンに届かない。
       elementFromPoint(ボタン中心) が .cardrow を返す状態で、
       「見えているのに押せない」＝span時代と同じ症状になる（2026-08-16 実測で検出）。 */
    z-index: 2;
    /* button なので押せることが分かる形にする（span のままだと装飾に見えていた） */
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
  }

  .carousel__prev { left: calc(var(--space-4) * -1); }
  .carousel__next { right: calc(var(--space-4) * -1); }

  /* 端に達したボタンは、押しても動かないことを見た目で示す */
  .carousel__prev[disabled],
  .carousel__next[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  /* hidden の間は出さない。スクリプトが動かない環境で死んだボタンを残さないため
     （display を持つ本規則が hidden 属性の既定を上書きしてしまうので明示する） */
  .carousel__prev[hidden],
  .carousel__next[hidden] {
    display: none;
  }

  .topstory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature__img {
    height: 100%;
    min-height: 260px;
  }

  .videobox__stage {
    min-height: 220px;
  }

  .videobox__brand {
    font-size: var(--text-2xl);
  }

  .digest {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .services {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2.6fr);
    gap: var(--space-4);
  }

  /* ⚠️ グループが1つしか無いとき、上の2カラムはそれを 240px の左列に押し込める。
     中の .svcgroup__items が3カラムなので1列 83px になり、サービス名が
     「HP 運 営」のように1文字ずつ折り返す（実測）。グループが1つなら全幅を使う。 */
  .svcgroup:only-child {
    grid-column: 1 / -1;
  }

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

  /* CR-13: 自社サービスメニューは群が1つ＝4項目。図版 image19 が4列の表なので
     4列で出す（3列だと1つだけ次の行へ落ちて、表と対応が取れなくなる）。 */
  .svcgroup:only-child .svcgroup__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 依頼書 0817 図版 image18: 左の「自社メディア」は狭い列に**縦2つ**、
     右の「自社サービス（機能）」が3列×2行。左群まで3列にすると1列 83px になり、
     サービス名が1文字ずつ折り返す（実測）。項目数で列数を決める。 */
  .svcgroup:first-child:not(:only-child) .svcgroup__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .section__heading,
  .cmp-heading {
    font-size: var(--text-xl);
  }

  .cmp-about__grid {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr);
    gap: var(--space-6);
  }

  .cmp-hero {
    padding-block: var(--space-7);
  }

  .cmp-hero__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-6);
  }

  .cmp-hero__watermark {
    display: block;
  }

  .cmp-hero__title {
    font-size: var(--text-3xl);
  }

  .cmp-video__play {
    width: 62px;
    height: 62px;
  }

  .recruit {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1.15fr);
  }

  .recruit__jobs {
    gap: var(--space-4);
  }

  .site-footer__inner {
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
  }

  .cmp-footer__inner {
    grid-template-columns: auto minmax(200px, 1.2fr) minmax(0, 2fr) auto;
  }

  .cmp-footer__copy {
    text-align: right;
  }
}

/* ══════════════════════════════════════════════════
   17. 1280px 〜（デスクトップ）: ヘッダーを1段に戻す
   ══════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  :root {
    --header-height: 60px;
    --scroll-offset: 76px;
  }

  .site-header__inner,
  .cmp-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-height);
    padding-block: 0;
  }

  .site-nav,
  .cmp-nav {
    order: 0;
    grid-column: auto;
    margin-left: auto;
    margin-inline: 0;
    flex-basis: auto;
    max-height: none;
    overflow-y: visible;
  }

  /* 15-redesign A1（2026-09-13 利用者裁定）: 総トップのメニューは**画面の真ん中**（ヘッダー幅の中央に absolute）。
     副題をロゴの下に移したので左の塊は 174px・右の言語切替＋検索は約 130px、ナビ 570px は 1280px から重ならない
     （実測 2026-09-13: 1280px でナビ 355〜925px・左の塊の右端 191px・言語切替の左端 1124px）。
     ⚠️ ナビが流れから外れるので、右端へ寄せる auto マージンは「ナビの次に流れる要素」＝CTA（あれば）か言語切替に
        1 つだけ置く。複数に置くと余白が等分されて位置が動く（CR-07 と同型） */
  .site-header__inner {
    position: relative;
  }
  .site-header__inner > .site-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-inline: 0;
  }
  .site-header__inner > .header-cta,
  .site-header__inner > .lang-switch {
    margin-left: auto;
  }
  .site-header__inner > .header-cta ~ .lang-switch,
  .site-header__inner > .header-tools {
    margin-left: 0;
  }

  .lang-switch {
    order: 0;
    flex-basis: auto;
  }

  .site-nav ul,
  .cmp-nav ul {
    flex-direction: row;
    overflow-x: visible;
    padding: 0;
    /* 実測 2026-09-08: 項目間 24px → 20px でナビが 685px → 661px。
       タグラインを 1280px から出すための余地をここで作る。 */
    gap: var(--space-4);
  }

  /* ナビの文字。14px → 13px でナビ幅が 843px → 661px（実測）。
     ⚠️ 畳んだパネルの中は 14px のまま（指で押す面なので小さくしない）。
     ここは1段に並ぶときだけの指定。 */
  .site-nav a,
  .cmp-nav a {
    font-size: 13px;
  }

  .site-nav a,
  .cmp-nav a {
    display: inline-flex;
    border-top: 0;
  }
  /* M5: プルダウンは 1 段に並ぶときだけ。親の「ニュース」の下に重ねて開く */
  .cmp-nav__item--menu {
    position: relative;
  }
  .cmp-nav .cmp-nav__item--menu:hover ul.cmp-nav__sub,
  .cmp-nav .cmp-nav__item--menu:focus-within ul.cmp-nav__sub {
    display: block;
  }
  .cmp-nav ul.cmp-nav__sub {
    position: absolute;
    flex-direction: column;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 220px;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
  }
  .cmp-nav__sub li {
    display: block;
  }
  .cmp-nav__sub a {
    display: flex;
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
    font-size: 13px;
    white-space: nowrap;
  }
  .cmp-nav__sub a:hover {
    background: var(--company-accent-soft, var(--color-accent-soft));
  }

  /* ナビは1段に収まる（実測 1279px で可視率 100%）。☰ は出さず、パネルは常に開いた形。
     ⚠️ 畳む側と**同じ形の選択子**で打ち消す。`:not()` は詳細度を1つ上げるため、
     `.js .site-header .site-nav` のような短い選択子では base の畳みに負ける。 */
  .js .site-header:not(.is-nav-open) .site-nav {
    display: block;
  }

  .js .site-header:not(.is-nav-open) .lang-switch {
    display: flex;
  }

  .js .cmp-header:not(.is-nav-open) .cmp-nav {
    display: block;
  }

  .nav-toggle:not([hidden]) {
    display: none;
  }

  .header-tools,
  .site-header .header-cta {
    margin-left: 0;
  }

  .cmp-header__inner {
    gap: var(--space-5);
  }

  .cmp-nav {
    margin-left: auto;
  }

  .brand__name {
    font-size: var(--text-xl);
  }

  .clogo__main {
    font-size: var(--text-2xl);
  }

  .clogo__sub {
    font-size: var(--text-sm);
  }

  .hero {
    padding-block: var(--space-7) var(--space-6);
  }

  .hero__inner {
    /* 図版 image7: 文章は**左半分**に収める。右半分は背景の世界地図が占める。
       ⚠️ 2カラムの grid には戻さないこと（右列に置く要素が無く、
          見出しが不要に折り返す）。左に寄せて幅だけ制限する。 */
    align-items: center;
    gap: var(--space-5);
  }

  /* 図版 image7: 文章は左半分。見出しは2行で収まる幅にする
     （52% だと3行に折れて帯が高くなった） */
  .hero__copy {
    max-width: 60%;
  }

  /* 🚨 2026-09-09（CR-101・運営指示）: 「背景画像にして、ヒーロー部のコンテンツエリア
     前面に表示して欲しい」。
     従来は「地図の全体が見えること」を優先して contain ＋ 右寄せにし、左に文章を
     組んでいた（図版 image7 の構成）。運営判断で**全面の背景**へ変えたので、
     デスクトップでもモバイルと同じく cover で敷き切る。
     ⚠️ 文字が読めなくなるのを防ぐのは .hero--slides::before の明るい幕。
        画像を差し替えても幕が効くので、暗い写真でも本文が沈まない。 */
  .hero--slides .hero__slide {
    object-fit: cover;
    object-position: 70% center;
  }

  /* 検索カードの**左端を文章と揃える**。
     ⚠️ `margin-inline: 0` だけだと、ラッパーが .hero__inner と違う基準で置かれ
        左端が数px ずれる（実測: 文章 33px / 検索 24px）。
        ラッパーは inner と同じ幅・同じ中央寄せにし、カード側の幅で左寄せを作る。 */
  .hero--slides > .hero__searchwrap {
    max-width: var(--width-content);
    margin-inline: auto;
  }

  .hero--slides .searchcard {
    max-width: 68%;
  }

  /* 図版の比率（帯の高さ ÷ 幅 ≒ 0.33）に合わせて下限だけ決める。
     ⚠️ ここで `display: grid` にしないこと。子の .hero__inner が grid 項目になり、
        max-width:1200px が「列の幅」ではなく中身に合わせて縮み（実測 704px）、
        文章が中央へ寄って左寄せが効かなくなる。 */
  .hero--slides {
    /* 2026-09-11 利用者指示: 帯を低く（24rem → 18rem）。画像は cover で比率を保つ（引き延ばさない・中央右寄せで地図を残す） */
    min-height: 18rem;
    /* 2026-09-11 利用者報告「体裁を整えて」: 検索カード（B3）を外したため文章の下が空いた。文章を帯の中で上下中央に置く。
       ⚠️ grid にはしない（上の注記のとおり .hero__inner が縮む）。縦の flex なら .hero__inner は幅いっぱいのまま */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero--slides > .hero__inner {
    width: 100%;
  }

  .searchcard {
    /* 幅はコンテンツ幅（.hero__searchwrap の max-width）に合わせる。
       ここで 640px に絞ると、右側が大きく空いて検索の存在感が落ちる。 */
    padding: var(--space-4);
  }
}

/* ══════════════════════════════════════════════════
   18. ホバーできる端末だけホバー効果を付ける
       （タッチ端末で「押したまま残る」状態を避ける）
   ══════════════════════════════════════════════════ */
@media (hover: hover) {
  a:hover {
    text-decoration: none;
  }

  .site-nav a:hover,
  .cmp-nav a:hover,
  .lang-switch__other:hover,
  .header-search__toggle:hover,
  .view-all:hover,
  .search-tab:hover {
    color: var(--color-accent);
  }

  .header-cta:hover,
  .search-submit:hover {
    background: var(--color-accent-hover);
  }

  .keyword-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
  }

  .brand__name:hover {
    color: var(--color-accent);
  }

  .ncard__link:hover .ncard__title,
  .rank__link:hover .rank__title,
  .tlist__link:hover .tlist__title,
  .evt__link:hover .evt__title,
  .vcard__link:hover .vcard__title {
    color: var(--color-accent);
  }

  .videobox__play:hover {
    background: var(--color-scrim);
  }

  .ctabanner__btn:hover {
    opacity: 0.88;
  }

  .social:hover {
    background: var(--color-accent);
  }

  .site-footer__nav a:hover {
    color: var(--color-footer-heading);
  }

  /* 企業ページ */
  .cmp-nav a:hover,
  .nwcard__link:hover .nwcard__title,
  .pcard__link:hover .pcard__name,
  .ecard__link:hover .ecard__title,
  .cmp-footer__nav a:hover {
    color: var(--company-accent);
  }

  .cbtn--primary:hover {
    background: var(--company-cta-hover);
    border-color: var(--company-cta-hover);
  }

  .cbtn--ghost:hover {
    background: var(--color-play-bg);
  }

  .nwcard:hover,
  .pcard:hover,
  .ecard:hover {
    box-shadow: var(--shadow-md);
  }

  .csocial:hover {
    background: var(--company-accent);
  }
}

/* ══════════════════════════════════════════════════
   19. モーション低減
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ── 記事詳細（ニュース／製品・サービス／イベント／導入事例／求人）────────
   これまで .detail__* は HTML に出ているのに CSS が1行も無く、詳細ページだけ
   素のブラウザ既定スタイルで表示されていた。読み物として成立させるため、
   本文幅・行間・節の区切り・要点・目次・掲載企業・関連記事を定義する。 */
.detail {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-8);
}

.detail__head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.detail__title {
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.detail__img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

/* サンプル原稿の告知。実記事と混同されると実害になるので、目立たせる。 */
.detail__sample {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-notice-border);
  border-left: 4px solid var(--color-notice-accent);
  border-radius: var(--radius-md);
  background: var(--color-notice-bg);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-notice-text);
}

.detail__sample-badge {
  flex-shrink: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-notice-accent);
  color: var(--color-notice-contrast);
  font-size: var(--text-2xs, 0.6875rem);
  font-weight: 700;
  white-space: nowrap;
}

/* 事実欄（会場・主催・勤務地など） */
.detail__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.detail__fact dt {
  margin: 0 0 2px;
  /* 11px bold は WCAG の large text ではないので 4.5:1 が要る。#6b7382 は 4.45:1 で
     僅かに届かないため、サイズを上げて本文級の判定にする */
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.detail__fact dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* 要点。回答エンジンに拾われる箇所なので、視覚的にも独立させる。 */
.detail__points {
  margin: var(--space-5) 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
}

.detail__points-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
}

.detail__points-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* 目次 */
.detail__toc {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* 2026-09-16 利用者指摘「本文の折り返しが画面の左半分」: 画像・要点が全幅なのに目次と本文だけ 70ch で
     止まり、不揃いに見えていた。詳細ページは本文も全幅（.detail の幅）に揃える。行長の上限は無い */
  max-width: none;
}

.detail__toc-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.detail__toc ol {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.detail__toc a {
  color: var(--color-accent);
  text-decoration: none;
}

.detail__toc a:hover {
  text-decoration: underline;
}

/* 本文（2026-09-16: 画像・要点と同じ全幅。70ch の行長制限は詳細ページでは外した） */
.detail__prose {
  max-width: none;
}

.detail__body,
.detail__block p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-loose, 2);
  color: var(--color-text);
}

/* 本文の中の Markdown 部分集合（D-048 / CR-150）。
   見出し・箇条書き・画像・リンク・強調だけ。行間・文字色は上の本文に揃え、
   幅は付けない（2026-09-16 に 70ch の折返しを全幅へ直した経緯。画像も本文幅いっぱい） */
.detail__body p,
.detail__block p {
  margin: 0 0 var(--space-4);
}

.detail__body > :last-child,
.detail__block > :last-child {
  margin-bottom: 0;
}

.detail__body h2,
.detail__block h2:not(.detail__block-title) {
  margin: var(--space-6) 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-accent);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.detail__body > h2:first-child {
  margin-top: 0;
}

.detail__body h3,
.detail__block h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.detail__body ul,
.detail__body ol,
.detail__block ul,
.detail__block ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.6em;
  font-size: var(--text-base);
  line-height: var(--leading-loose, 2);
  color: var(--color-text);
}

.detail__body ul,
.detail__block ul {
  list-style: disc;
}

.detail__body ol,
.detail__block ol {
  list-style: decimal;
}

.detail__body figure,
.detail__block figure {
  margin: var(--space-5) 0;
}

.detail__body figure img,
.detail__block figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.detail__body figcaption,
.detail__block figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.detail__body strong,
.detail__block strong {
  font-weight: 700;
  color: var(--color-heading);
}

.detail__body a,
.detail__block a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.detail__body a:hover,
.detail__block a:hover {
  text-decoration: none;
}

.detail__block {
  margin-top: var(--space-6);
}

.detail__block-title {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid var(--color-accent);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
}

/* 掲載企業への導線 */
.detail__company {
  margin: var(--space-6) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.detail__company-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs, 0.6875rem);
  font-weight: 700;
  color: var(--color-text-muted);
}

.detail__company-link {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.detail__company-link:hover {
  text-decoration: underline;
}

/* 関連記事 */
.detail__related {
  /* ⚠️ 横方向は auto を保つ。`margin: X 0 0` と書くと .section の `margin: 0 auto` を
     打ち消し、中央寄せが外れて左端に貼り付く（記事本文は中央、関連記事だけ左＝実測で発生）。 */
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.detail__related-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-heading);
}

.detail__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.detail__related-item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.detail__related-item a:hover {
  background: var(--color-bg-subtle);
}

.detail__related-item time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  /* --color-text-faint は白地で 2.64:1、hover 地では 2.46:1 で AA に届かない */
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* フッター直前の「最新の◯◯」。内部リンクの導線なので、関連記事より控えめに置く。
   関連記事＝関心の続き（本文のすぐ後）／最新＝サイト内の巡回路（ページの最後）。 */
.detail__latest {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.detail__latest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.detail__latest-item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.detail__latest-item a:hover {
  background: var(--color-bg-subtle);
}

.detail__latest-item time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 既定はモバイル。広い画面で見出しと余白を上げる（min-width で書く規約） */
.detail__title {
  font-size: var(--text-xl);
}

.detail__points,
.detail__company {
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 641px) {
  .detail__title {
    font-size: var(--text-2xl);
  }

  .detail__points,
  .detail__company {
    padding: var(--space-4) var(--space-5);
  }
}

/* 一覧カードのサンプル原稿の印。詳細ページに入る前に見分けられるようにする
   （詳細ページにだけ印があると、一覧で見たときは実記事と区別が付かない） */
.card__sample {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-notice-accent);
  color: var(--color-notice-contrast);
  font-size: var(--text-xs)  /* U10: 誤読を防ぐ告知のため本文下限14pxへ */;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── FAQ の分類グループ ──────────────────────────────────────
   旧サイトは5分類＋分類へのジャンプリンクで並べていた。取り込み時に分類を捨てて
   9件を平坦に並べていたため、読者は関係のない質問をスクロールし続けることになっていた。 */
.faq2nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.faq2nav a {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--company-accent);
  border-radius: var(--radius-full);
  color: var(--company-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  /* タップ領域を44px以上にする（ベンチマーク調査で自サイトの67%が未達だった） */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.faq2nav a:hover {
  background: var(--company-accent);
  color: var(--color-accent-contrast);
}

.faq2group + .faq2group {
  margin-top: var(--space-6);
}

.faq2group__heading {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: var(--accent-bar-width) solid var(--company-accent);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-heading);
  scroll-margin-top: var(--scroll-offset);
}

/* ============================================================
   始動予告LP（PUB-005 /jp/coming-soon）
   モバイルファースト。画像は「左にエンジン・右が余白」の横長1枚で、
   デスクトップでは右の余白に文面を重ね、モバイルではバナー＋通常フローに分ける。
   ============================================================ */

.teaser-page {
  background: var(--color-surface);
}

.teaser-top {
  border-bottom: 1px solid var(--color-border);
}

.teaser-top__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.teaser-top__note {
  margin: 0;
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.teaser-hero {
  position: relative;
  background: var(--color-surface);
}

/* モバイル: kicker を画像の中央に重ねる（ユーザー指示 2026-08-18）。
   画像は全幅・アスペクト比 1920/1067 なので、中心は 100vw÷1.7995÷2 ≒ 27.79vw。
   要素は copywrap 内の1つだけ（複製しない）。768px 以上で通常フローへ戻す。 */
.teaser-hero__kicker {
  /* 依頼（2026-08-18）: モバイルは「,」で改行。語の途中では折らない。
     文字間を広げているので、語中で折れると読みにくさが際立つ。 */
  overflow-wrap: normal;
  word-break: keep-all;
  position: absolute;
  top: 27.79vw;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: max-content;
  max-width: 92vw;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  /* 銀色のエンジンに炎色の文字が直接重なると読めない。文字の背後だけ白で持ち上げる */
  background: var(--color-overlay-scrim);
  box-shadow: 0 0 0 1px var(--color-overlay-scrim-edge);
}

.teaser-hero__bg {
  display: block;
  width: 100%;
  height: auto;
  /* エンジンは画像の左側にある。狭い画面で cover に切り替えたとき、
     主役が切れないよう常に左を基準にする */
  object-fit: cover;
  object-position: left center;
}

.teaser-hero__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
}

.teaser-hero__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  /* 通常フローへ戻す（画像中央への重ねはモバイルだけ）。
     ただし背景の下地は残す。銀色のエンジンの上に炎色の文字が乗るのは
     デスクトップでも同じで、下地が無いと読みにくい。
     ⚠️ p はブロック要素なので、そのままだと下地が親幅いっぱいに伸びて
     「壊れた帯」に見える（実測）。文字幅に合わせる。 */
  .teaser-hero__kicker {
    position: static;
    transform: none;
    width: max-content;
    max-width: 100%;
    border-radius: var(--radius-full);
  }
}

.teaser-hero__title {
  margin: 0 0 var(--space-3);
  /* ⚠️ 見出しは content 側で改行位置を指定している（2行）。字が大きすぎると
     1行目「世界へ挑戦する企業を、」が入りきらず**勝手に3行へ折れる**（2026-08-19 実測:
     48px × 11字 × 字送り1.04 = 約550px に対し、文字欄は 544px しかなかった）。
     上限を下げ、幅の伸びに対しても余裕を持たせる。 */
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.teaser-hero__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: 2.05;
}

.teaser-hero__answer {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 2.05;
  color: var(--color-text-muted);
}

.teaser-hero__note {
  display: inline-block;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}







.teaser-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.teaser-card__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 2.05;
  color: var(--color-text-muted);
}

.teaser-faq {
  display: grid;
  gap: var(--space-2);
}

.teaser-closing {
  text-align: center;
  padding-bottom: var(--space-7);
}

.teaser-closing__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 4.6vw, 2.4rem);
  letter-spacing: 0.06em;
}

.teaser-closing__body {
  margin: 0;
  line-height: 2;
  color: var(--color-text-muted);
}

.teaser-foot {
  border-top: 1px solid var(--color-border);
}

.teaser-foot__copy {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
  text-align: center;
}

@media (min-width: 768px) {


  /* 画像を背景として敷き、右の余白（エンジンの右側）へ文面を重ねる。
     当初 1024px 以上に限定していたが、768〜1023px では「画像だけが出て
     文字が無い」ヒーローになっていた（ユーザー指摘 2026-08-18）。 */
  .teaser-hero {
    display: flex;
    align-items: center;
    min-height: 30rem;
    overflow: hidden;
  }

  .teaser-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .teaser-hero__inner {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .teaser-hero__copywrap {
    /* 50% を超えるとエンジンに文字が掛かる。余白側に収める */
    max-width: min(36rem, 52%);
    /* 依頼 2026-08-19: 右端に寄りすぎているので中央側へ寄せる（右に余白を作って左へ押す）。
       ⚠️ 寄せられる量は画面幅ごとに**まったく違う**。単一の式にすると狭い幅で
          文字がエンジンに掛かる（実測で確認）。段階指定にする。
       根拠（実測 2026-08-19）: 背景画像 teaser-hero.webp は 1920×1067 で、
          エンジンの右端は画像幅の 44.7%。object-fit:cover・左寄せなので、
          表示上の右端 ≒ 859px × max(箱幅/1920, 箱高/1067)。
          文字欄の左端 = 箱の右端 − この余白 − 文字欄幅(min(36rem,52%))。
          両者の差が 48px を下回らない範囲で寄せる。
       1024px 以下は余裕が 33px しか無いので**動かさない**。 */
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  .teaser-hero {
    min-height: 34rem;
  }
}

/* ヒーローの文字欄を中央側へ寄せる段階指定（依頼 2026-08-19）。
   括弧内は**実測した上限**＝エンジンとの間隔 48px を保てる最大の寄せ幅。
   これを超えると文字がエンジンに掛かる（2026-08-19 に実測で確認）。
   ⚠️ 1440px 以下はもともと余裕が無い（エンジンの右端が文字欄のすぐ左）。
      ここを大きく寄せたい場合は、背景画像の縮小か配置変更が要る。 */
@media (min-width: 1280px) {
  .teaser-hero__copywrap { margin-right: 1rem; }    /* 実測上限 19px */
}

@media (min-width: 1440px) {
  .teaser-hero__copywrap { margin-right: 1.5rem; }  /* 実測上限 27px */
}

@media (min-width: 1680px) {
  .teaser-hero__copywrap { margin-right: 6rem; }    /* 実測上限 112px */
}

@media (min-width: 1920px) {
  .teaser-hero__copywrap { margin-right: 13rem; }   /* 実測上限 220px */
}



.teaser-person {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-surface);
}

.teaser-person__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 700;
}

/* 肩書 → 担当 → 氏名 の3行に分ける（ユーザー指示 2026-08-18）。
   肩書と担当を1行に並べると、英字と和文が同じ行で競合して
   どちらが役職名なのか読み取りに一拍かかる。行を分けると役割の階層がそのまま縦に出る。
   ※ inline のまま margin-left で離していたのを、block にして行を割る。 */
.teaser-person__role {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.teaser-person__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.teaser-person__bio {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 2.05;
  color: var(--color-text);
}

.teaser-person__duties {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.teaser-person__duties li {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  background: var(--color-bg, var(--color-surface));
}

.teaser-person__motto {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}

@media (min-width: 768px) {

}

.teaser-top__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.teaser-top__period {
  color: var(--color-accent);
}

.teaser-closing__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--color-accent);
}

/* WARM UP YOUR ENGINE. — 暖機の炎（ユーザー指示 2026-08-18）。
   文字自体を暖色グラデーションで塗り、ゆっくり揺らめかせる。
   動きを減らす設定の利用者には静止したグラデーションだけを見せる。 */
/* 炎の文字は内側の span が持つ。
   background-clip:text の塗りは**要素自身の背景レイヤー**なので、
   同じ要素に可読性の下地を置くことはできない（子・擬似要素は必ず塗りの上に来る）。
   外側の p が白い下地、内側の span が炎——という2要素に分けるのが唯一の解。 */
.teaser-hero__flame {
  background-image: linear-gradient(
    100deg,
    var(--color-flame-deep) 0%,
    var(--color-flame-hot) 30%,
    var(--color-flame-amber) 52%,
    var(--color-flame-hot) 74%,
    var(--color-flame-deep) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .teaser-hero__flame {
    animation: teaser-flame 2.6s ease-in-out infinite alternate;
  }

  @keyframes teaser-flame {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
  }
}

.teaser-people__lead {
  margin: 0 0 var(--space-5);
  max-width: var(--width-prose);
  font-size: var(--text-base);
  line-height: 2.1;
  color: var(--color-text);
}

.teaser-contact {
  padding-bottom: var(--space-7);
}

/* 入力フォームはコンテンツ幅の60%で中央寄せ（ユーザー指示 2026-08-18）。
   幅は rem ではなく％で持つ（画面幅が変わっても左右の余白比が崩れない）。
   モバイルは全幅——60%に絞ると入力欄が細くなりすぎて打ちにくい。 */
.teaser-form {
  max-width: var(--width-form);
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.teaser-form__row {
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.teaser-form__label {
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.teaser-form__req {
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.teaser-form input,
.teaser-form select,
.teaser-form textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  /* iOS が 16px 未満の入力欄で自動ズームするのを防ぐ */
  font-size: max(16px, var(--text-base));
}

.teaser-form textarea {
  resize: vertical;
  line-height: 1.8;
}

.teaser-form input:focus-visible,
.teaser-form select:focus-visible,
.teaser-form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* ハニーポット: 人間には見せない。display:none は一部の bot に読まれるので位置で外す */
.teaser-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.teaser-form__actions {
  margin: var(--space-2) 0 0;
}

.teaser-form__submit {
  /* U10: 指で押せる大きさを確保する */
  min-height: 48px;
  padding-inline: var(--space-5);
}

.teaser-form__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.teaser-form__note {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.teaser-form__status {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.teaser-form__status.is-ok {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.teaser-form__status.is-error {
  background: var(--color-flame-amber);
  color: var(--color-text);
}

/* SEO/AEO/AIO の3枚を「支える側」の説明。カードと並列に置くと
   3列グリッドで 3+1 になって余るうえ、意味の階層も潰れる。帯として下に敷く。 */
.teaser-note {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
}

.teaser-note__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-accent);
}

.teaser-note__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 2.05;
  color: var(--color-text);
}

.teaser-figure {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.teaser-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* サンプル画像である旨は画面で読める形にする（印を隠さない） */
.teaser-figure__note {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-overlay-scrim);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
}

/* 始動予告LPは「読み進める」ページなので、節ごとの余白を通常より広く取る。
   .section の既定（--space-5）だと節が詰まって、どこで話題が変わるか分かりにくい。 */






/* FAQ の問答も行間を確保する */
.teaser-faq .faq2__a {
  line-height: 2.05;
}

/* ============================================================
   タイポグラフィの遊び（メディアらしさ）
   ユーザー要望 2026-08-18。日本語メディアで定番の4手法だけを使う。
   ⚠️ 装飾のために可読性・アクセシビリティを削らない:
      ・文字は縮めない（U10 の下限を割らない）
      ・色だけで意味を伝えない
      ・動きは prefers-reduced-motion を尊重する
   ============================================================ */

/* ① 節番号を大きく薄く敷く。記事の「章」の感触を出す。
   数字は CSS カウンタで振るので、節を足し引きしても番号がずれない。 */
.teaser-page main {
  counter-reset: teaser-sec;
}







/* ② 節見出しは縦のアクセントバーをやめ、下に短い線を引く。
   メディアの「見出し罫」。既定の .section__heading は他ページで使うので上書きしない。 */


/* ③ 直答の書き出しにドロップキャップ風の縦線を添える。
   欧文のドロップキャップは日本語で崩れるので、線で代替する。 */


/* ④ カード見出しに小さな連番。一覧に「記事の目次」の感触を出す。 */


.teaser-card {
  counter-increment: teaser-card;
}

.teaser-card__title::before {
  content: counter(teaser-card, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  opacity: 0.75;
}

/* 英字のキッカーは字間を広く、和文の見出しは詰める。混植の定石。 */
.teaser-hero__kicker,
.teaser-top__note {
  font-feature-settings: "palt" 0;
}

.teaser-hero__title,
.teaser-closing__title,


/* 英字ラベル（従）＋和文見出し（主）の二層。日本語メディアの定石。
   英字は分類の目印なので小さく字間を広く、和文は詰めて大きく。 */
.teaser-head {
  display: block;
}





/* LPのリード文。短文で言い切る文体なので、段落ごとに余白を効かせる。
   本文より少し大きく、読み幅で折り返す（22art.jp のリズムを参考）。 */






/* ============================================================
   躍動感のあるタイポグラフィ（ユーザー指摘 2026-08-18）
   「ただ文字を並べているだけ」を脱するため、意味の階層を
   文字の大小・太さ・余白・罫線で作る。同じ大きさで並べても視線は動かない。
   ============================================================ */

/* 掴みの一文。節で最も大きく、行間を詰めて塊として見せる。
   本文（teaser-lead）との比を約1.9倍取り、視線の入口を1点に絞る。 */


/* 掴みの先頭に短い罫。記事の「リード罫」。
   節番号(01)・英字ラベルと合わせて、視線の始点を明示する。 */


/* 本文は掴みより小さく静かに。強弱がついて初めて掴みが効く。 */


/* 節の切れ目に細い罫を通す。読み物の「章の区切り」。
   最初の節は上に罫を出さない（ヒーロー直下で二重線になる）。 */


/* 見出しブロックにも罫。英字ラベルと和文見出しの間ではなく、
   ブロック全体の下に引いて「ここまでが見出し」を示す。 */
.teaser-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

/* 英字ラベルの前にも極短の罫。細部の反復がリズムになる。 */




/* カードの連番は罫と併せて左上に。数字だけだと浮く。 */
.teaser-card__title::before {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-accent-border);
  width: max-content;
}

/* 直答は節の主張の要約。罫で囲わず、左罫＋薄い地色で「引用」の質感にする。 */


/* ── ヘッダー/フッター: 本サイトに合わせる（ロゴ画像・濃紺フッター） ── */
.teaser-top__brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.teaser-top__logo {
  height: 26px;
  width: auto;
  display: block;
  flex: none;
}

.teaser-top__tagline {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teaser-foot {
  background: var(--color-footer-bg);
  border-top: none;
}

.teaser-foot__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

.teaser-foot__brand {
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 暗い地には**ブランドブックの白版 logo-white.svg** をそのまま使う。
   経緯（2026-08-19 に整理）:
     ① filter: invert(1) で白くしていた → 原本の白いベタ地が黒い矩形に化け、
        ブランドの青い点も橙になった。**色の同一性はフィルタでは守れない**。
     ② 暗地用の PNG（logo-on-dark.png）を別に持つ方式へ → 差し替え時に作り直しを忘れる。
     ③ ブランドブックが白版を正式に定義しているので、それを直接読む形に落ち着いた。
   ①②で使っていたラスタ4点は未参照になったので削除済み（生成器 make-logo-on-dark.mjs も撤去）。 */
.teaser-foot__logo {
  height: 24px;
  width: auto;
  display: block;
}

.teaser-foot__desc {
  font-size: var(--text-2xs);
  color: var(--color-footer-text);
  line-height: 1.9;
}

.teaser-foot__copy {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-footer-border);
  font-size: var(--text-2xs);
  color: var(--color-footer-text);
}

/* ── ボードメンバーの似顔絵 ── */
.teaser-person__face {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
  background: var(--color-bg-subtle);
  object-fit: cover;
}

/* ============================================================
   読み幅と全幅の落差を埋める（ユーザー指摘 2026-08-18）
   本文は 70ch 前後で折り返すのが読みやすい。一方で罫線とカードは全幅。
   その差（実測523px）が右の空白として目立っていた。
   幅を広げて読みにくくするのではなく、**掴みと本文を2段組にして
   空きを埋める**。読み幅は各段の中で保たれる。
   ============================================================ */

@media (min-width: 1024px) {


  /* 掴みは左段。段が半分になるぶん、文字はやや小さくして行数を保つ */


  /* 本文は右段。読み幅は段幅で自然に決まるので max-width を外す */


  /* 直答は見出し直下の全幅に置く（節の要約なので段組みに入れない）。
     ただし読み幅は保つ */

}

@media (min-width: 1024px) {
  /* 直答も右に523pxの空きを残していた。読み幅は保ちたいので幅は広げず、
     右段へ節番号を大きく置いて空きに役割を与える。
     （それまで節番号は見出しに重ねて薄く敷いていたが、
       同じ数字を2箇所に出すと視線が割れるので、こちらへ一本化する） */






  /* 番号は行の ::after で出す。空の <p> を置くと V-11（空要素禁止）に触れる。
     装飾なので読み上げには出ない（生成コンテンツは支援技術が読まない設定が主流だが、
     意味は直答本文が担っているので情報は失われない）。 */


  /* 見出しに重ねていた薄い番号は消す（同じ数字の二重表示を避ける） */

}

/* ============================================================
   本サイト（ENGINE 総トップ）のデザインに寄せる
   ユーザー提示のデザインカンプ 2026-08-18。
   カンプの特徴:
     ・節見出しは「左の青い縦バー＋和文」（英字ラベルは使わない）
     ・カードは白地・細枠・角丸小さめ・影は薄く
     ・見出しと本文が詰まっていて、余白は節間で取る
     ・全体に情報密度が高く、装飾的な大数字は使わない
   → 始動予告LPも同じ語彙にする。凝った演出より、本体と地続きに見えることを優先。
   ============================================================ */

/* 節見出し: 左の青い縦バー（本サイトの .section__heading と同じ語彙） */
.teaser-head {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: var(--space-3);
}



/* 英字ラベルは小さく添えるだけ（カンプには無いので控えめに） */


.teaser-head__eyebrow::before {
  content: none;
}

/* 大きな装飾数字はカンプに無い。情報密度を優先して出さない */




/* 直答は薄い地色のまま（本サイトの answer-block と同系）。読み幅で止める */


/* 掴みは残すが、カンプの密度に合わせて控えめに。2段組はやめて通常フローへ */








/* カード: 白地・細枠・薄い影（カンプのカードと同じ質感） */
.teaser-card,
.teaser-person {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.teaser-card__title::before {
  content: none;
}



/* 節の区切りは罫線ではなく地色で（カンプは白と薄灰の交互） */






@media (min-width: 1024px) {


  .teaser-copy .teaser-hook,



}

/* 日本語の折り返しを文節単位にする。
   既定の line-break は文字単位で折るため、「製造|業」「BtoB情報配信サ|イト」
   のように語の途中で割れる。word-break: auto-phrase は
   ブラウザが形態素解析して文節で折る（Chrome 119+ / Safari 17.4+）。
   非対応ブラウザは既定動作にフォールバックする（劣化するだけで壊れない）。 */
.teaser-hook,
.teaser-head__title,
.teaser-hero__title,
.teaser-hero__lead,
.teaser-lead p,
.teaser-card__title,
.teaser-card__body,
.teaser-person__bio,
.teaser-note__body,
.teaser-sec .section__answer,
.faq2__qtext,
.faq2__a {
  word-break: auto-phrase;
  /* ぶら下がりを許して行末をそろえる（約物が行頭に来るのを防ぐ） */
  line-break: strict;
  overflow-wrap: anywhere;
}

/* ============================================================
   読み物としての間（ま）を作り直す（ユーザー指摘 2026-08-18）
   実測で判明した3点:
     ① 直答・掴み・リードの margin-bottom が全て 0 で、要素が貼り付いていた
        （後から足したCSSが個別に margin を潰していた）
     ② 見出し28px と 掴み28.9px がほぼ同寸で、階層が潰れていた
     ③ 読み物の幅が 1152/629/679 とバラバラで視線の左右動が大きい
   → 余白を「見出し < 段落 < 節」の順で明確に段差をつけ、
     読み物の幅を1つに揃える。カードの前は特に大きく空ける。
   ============================================================ */

/* ① 要素間の余白を明示的に戻す（!important は使わず、後勝ちで上書き）
   ※ 以前ここは「セレクタ列の途中で宣言ブロックが失われ、4つのセレクタが
      1つの margin 指定に繋がっている」壊れ方をしていた（重複整理の取りこぼし）。
      幅の指定はこの節の末尾（max-width: var(--width-prose)）に1本化してある。 */
.teaser-sec .section__answer,
.teaser-copy,
.teaser-hook,
.teaser-answerrow {
  margin-bottom: var(--space-5);
}

.teaser-lead {
  margin-bottom: 0;
}

.teaser-copy {
  margin-bottom: var(--space-6);
}

/* ② 見出しと掴みの落差をつける。見出しは節のラベル、掴みは主張 */
.teaser-head__title {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
}

.teaser-hook {
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.65;
}

/* ③ カードの前を大きく空ける。読み物からカード群へ切り替わる合図 */
.teaser-grid {
  margin-top: var(--space-6);
}

.teaser-note {
  margin-top: var(--space-4);
}

/* 節の上下は文章の余白より大きく取る（節の切れ目が最も強い区切り） */
.teaser-sec {
  padding-block: var(--space-8);
}

/* FAQ とフォームも同じ間で */
.teaser-faq,
.teaser-form {
  margin-top: var(--space-5);
}

/* ── 読み物の幅を1本に揃える（重複整理で失われたので最後にまとめて指定） ──
   直答・掴み・リードを同じ折返し幅にすると、視線の戻り位置が一定になり読みやすい。
   カードとレールは全幅のままでよい（一覧は俯瞰する対象で、読み進める文章ではない）。
   幅は ch/px ではなく**コンテンツエリアに対する％**（--width-read）。理由は tokens.css を参照。 */
/* ⚠️ 幅を掛けるのは**入れ子の外側だけ**。掴み・リードは .teaser-copy の中に在るので、
   両方に 80% を掛けると 0.8 × 0.8 = 64% に潰れる
   （実測 2026-08-18: 説明文 772px に対し 掴み・リードが 618px＝節の 64%）。 */
.teaser-sec .section__answer,
.teaser-copy {
  max-width: var(--width-read);
}

.teaser-hook,
.teaser-lead {
  max-width: 100%;
}

/* 節の直答は「その節の答えそのもの」。本文より小さいと階層が逆転する
   （実測: 説明文 16px < リード 17px）。本文と同じ大きさまで上げる。 */
.teaser-sec .section__answer {
  font-size: var(--text-base);
}

/* 768px 以上で読み物を 80%、入力フォームを 60% に絞る。
   モバイルは全幅のまま（絞ると1行の文字数と入力欄の幅が足りない） */
@media (min-width: 768px) {
  :root {
    --width-read: 80%;
    --width-form: 60%;
  }
}

/* ============================================================
   tsukaji-kenchiku.com のタイポグラフィ手法を翻案（2026-08-18）
   実測で読み取った手法:
     ① キャッチは明朝、本文はゴシック（書体で役割を分ける）→ **ENGINE では不採用**
     ② キャッチの字間を強く詰める（実測 letter-spacing: -3.9px ≒ -0.13em）
     ③ 節を**上下の細い罫で挟む**（border-top/bottom 1px）
     ④ アクセント色は**語句単位**で差す（見出しの一部だけ色を変える）
     ⑤ 行間は用途で使い分け（キャッチ 1.0 / 本文 2.0）
   ⚠️ ①の書体分けは**採用しない**（明朝は使わない・ユーザー指示 2026-08-18）。
   代わりに同じゴシックの中で太さ(400→800)と字間(-0.04em)で質感の差を作る。
   ②〜⑤（字間・上下罫・語句単位のアクセント・行間の使い分け）は採用した。
   ============================================================ */

/* ① 書体は変えない（明朝は使わない・ユーザー指示）。
   代わりに**同じゴシックの中で太さを振り切る**。
   本文400に対して掴み800にすると、書体を変えなくても質感の差が出る。 */
.teaser-hook {
  font-weight: 800;
}

/* ② 字間を詰めて塊にする。詰めすぎると読めないので -0.04em に留める
   （参考サイトは -0.13em だが、あちらは3〜5文字の短句。
     ENGINE の掴みは15〜25文字あるため同じ値では潰れる） */
.teaser-hook {
  letter-spacing: -0.04em;
  line-height: 1.5;
}

/* ③ 節を上下の細い罫で挟む。地色の交互より、罫のほうが紙面の質感が出る */
.teaser-sec {
  background: none;
  border-top: 1px solid var(--color-border);
}

.teaser-sec:last-of-type {
  border-bottom: 1px solid var(--color-border);
}

/* ④ アクセントは語句単位で。掴みの中の強調語を青にする */
.teaser-hook em {
  font-style: normal;
  color: var(--color-accent);
}

/* ⑤ 行間の使い分け。掴みは詰め、本文は空ける */
.teaser-lead p {
  line-height: 2.05;
}

/* ============================================================
   表組み: recruit.kokuyo.com を参考（2026-08-18・実測）
   読み取った組み方:
     ・カードに**枠も角丸も影も無い**（border 0 / radius 0 / bg transparent）
     ・連番(01,02,03) → 見出し → 属性 の3層を1行に組む
     ・区切りは横罫1本のみ。囲まない
     ・英字ラベルは 12px / 700 / 字間0.48px / アクセント色
   → ENGINE のカードも「囲む」から「行で並べる」へ。
     BtoBの一覧は情報密度が高い方が読み進めやすい。
   ============================================================ */

.teaser-grid {
  display: block;
  border-top: 1px solid var(--color-border);
}

.teaser-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* 連番は左列。行の目印なので小さく、色で立たせる */
.teaser-card__num {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

/* 見出しと本文は右列に積む */
.teaser-card__text {
  min-width: 0;
}

.teaser-card__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  line-height: 1.7;
}

.teaser-card__body {
  margin: 0;
}

/* ============================================================
   図解（インラインSVG）
   画像ファイルにせずSVGで持つ理由:
     ・外部リクエストゼロ（SEO-11）を保てる
     ・図の中の文字がテキストのまま残り、読み上げ・検索・翻訳が効く
     ・色をトークンで受けるので、ブランド色を変えても図が取り残されない
   ============================================================ */

.teaser-diagram {
  margin: var(--space-5) 0 0;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.teaser-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 720px;
  margin: 0 auto;
}

/* ノード（円・矩形）: 白地に細枠。カードと同じ質感で揃える */
.dg-node circle,
.dg-node rect {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

/* 中央のハブ（ENGINE）はアクセント色で塗る。図の主役を1つに絞る */
.dg-hub rect {
  fill: var(--color-accent);
  stroke: none;
}

.dg-hub-label {
  fill: var(--color-accent-contrast);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dg-label {
  fill: var(--color-text);
  font-size: 16px;
  font-weight: 700;
}

.dg-sub {
  fill: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.dg-tag {
  fill: var(--color-accent);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.dg-note {
  fill: var(--color-text-muted);
  font-size: 13px;
}

.dg-goal {
  fill: var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

/* 図中の文字は全て中央揃え。座標は中心で指定している */
.teaser-diagram__svg text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: inherit;
}

.dg-arrow path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.dg-tip {
  fill: var(--color-accent);
}

/* 既定（モバイル）: 図は潰すより横スクロールで原寸を保つほうが読める */
.teaser-diagram {
  padding: var(--space-4) var(--space-3);
  overflow-x: auto;
}

.teaser-diagram__svg {
  min-width: 560px;
}

@media (min-width: 768px) {
  /* 幅が足りる画面では収まるので、スクロールも最小幅も要らない */
  .teaser-diagram {
    padding: var(--space-5) var(--space-4);
    overflow-x: visible;
  }

  .teaser-diagram__svg {
    min-width: 0;
  }
}

/* CR-07/CR-09: ヘッダーが横に溢れない幅になって初めてタグラインを出す。
   2026-09-08: ☰ の導入とナビの縮小（13px・項目間20px）で必要幅が 1436px → 1254px になったため、
   90rem(1440px) → 80rem(1280px) へ下げた。ノートPCでタグラインが見えるようになる。 */
@media (min-width: 80rem) {
  .brand__tagline {
    display: inline;
  }
}

/* ブランドロゴ（SVG）。明るい地は Primary（黒字＋ブランドブルーの丸）、
   暗い地は白版を**別ファイルで**読む。生成は scripts/make-logo-kit.mjs。 */
.brand__logo {
  display: block;
  /* ⚠️ 汎用の `img { max-width: 100% }` が効くと、ヘッダーが窮屈なときに
     親の残り幅まで**横だけ**潰れて 36px の細い帯になる（実測・375px 幅）。
     ロゴは縦横比を保つので、幅の上限を外して高さで大きさを決める。
     縮めたいときは height を変える（下のモバイル指定）。 */
  width: auto;
  max-width: none;
  height: 32px;
  flex: none;
}

.brand__logo--footer {
  max-width: none;
  height: 30px;
  /* 2026-08-19: filter による反転をやめた。ブランドブックが白版（logo-white.svg）を
     正式に定義しているので、そちらを直接読む。filter だと「黒に潰してから反転」なので
     ブランドブルーのドットまで白になり、**規定外の配色を機械的に作っていた**。 */
}

/* ── サイト内検索の結果面（PUB-701）────────────────────────────
   全件をサーバが出し、JS が hidden で絞る方式。したがって「0件の空枠」は
   構造上ありえず、JS 無効なら全件一覧としてそのまま読める。 */
.section--search {
  display: grid;
  gap: var(--space-4);
}

.search-form--page {
  max-width: 46rem;
}

.search-status {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.search-noscript {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.search-hits {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.search-hit {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.search-hit__kind {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.search-hit__title {
  margin-top: var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

.search-hit__title a {
  color: var(--color-text);
  text-decoration: none;
}

.search-hit__title a:hover {
  text-decoration: underline;
}

.search-hit__summary {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .search-form--page {
    grid-template-columns: 1fr auto;
  }

  .search-hits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── メインビジュアルのスライダー（要件定義書 3.2.1・最大10枚・自動切替）──
   画像は装飾。文字は濃色なので、上に敷く幕（--gradient-hero-scrim）は .hero 側が持つ。
   ここで z-index を持たせるのは「画像→幕→文字」の重なり順を固定するため。 */
.hero--slides {
  isolation: isolate;
}

.hero--slides::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gradient-hero-scrim);
  pointer-events: none;
}

.hero--slides > .hero__inner,
.hero--slides > .hero__searchwrap {
  position: relative;
  z-index: 2;
}

.hero--slides > .hero__slidepause {
  z-index: 2;
}

/* 図版 image7 の構成: 淡い地の**右側**に青い点線の世界地図を置き、左に文章を組む。
   写真を全面に敷くのではないので、画像は右へ寄せて左の文章と重ならないようにする。
   （2026-08-18 運営判断: 背景は切り替えない。機構は残すが枚数を1枚にしてある） */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 既定（モバイル）は全面に敷く。縦長の枠に横長の地図を contain で入れると
     上下に大きな余白ができ、地図が中途半端な帯に見える（実測: 375×655 の枠に高さ200）。
     図版どおり「右に地図・左に文章」を組めるのは横幅がある画面だけなので、
     contain + 右寄せはデスクトップ側でだけ効かせる。 */
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

/* 一時停止トグル。押せることが分かる大きさ（44px）を確保する */
.hero__slidepause {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.hero__slidepause:hover,
.hero__slidepause:focus-visible {
  opacity: 1;
}

/* 停止中は「再生できる」ことを示す。動作中は停止記号（二本線）に見せる */
.hero__slidepause:not(.is-paused) svg {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

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

/* ── 人気記事ランキングの順位 ────────────────────────────────
   閲覧数は実測が入るまで出さない。順位だけをサムネイル左上に重ねる。 */
.ncard__rank {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-1);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  border-bottom-right-radius: var(--radius-sm);
}

/* 新着ニュースのカテゴリ別タブ（要件定義書 3.2.1）。
   検索カードのタブと同じ見た目を使う（利用者から見て同じ操作なので揃える）。 */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ── 縦カラムのリストと左右2分割（依頼書 0817 図版 image16 / image17）──
   会社紹介・イベント・ランキング・ENGINEオリジナルは、カードを横に並べず
   小サムネイル＋2行見出し＋日付を縦に積む。2つの節が左右に並ぶ。 */
.section-pair {
  display: grid;
  gap: 0;
}

.section--stacklist {
  padding-block: var(--space-4);
}

.slist {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.slist__row {
  border-bottom: 1px solid var(--color-border);
}

.slist__row:last-child {
  border-bottom: none;
}

.slist__link {
  /* 2026-09-11（15-redesign C11 の是正・利用者報告）: 順位・文・画像の 3 つをグリッド 2 列に入れると画像が 2 行目の左へ落ちた（本番で実測）。
     フレックスで 1 行に並べ、画像は右端（order）・文の高さいっぱい（stretch）。画像側は object-fit で切り抜く。 */
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--space-2) 0;
  text-decoration: none;
  color: inherit;
}

.slist__link:hover .slist__title {
  text-decoration: underline;
}

/* 順位（人気記事ランキング）。サムネイルの前に置く */
.slist__rank {
  flex: none;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.slist__media {
  display: block;
  width: 96px;
  flex: none;
  align-self: stretch;
}

.slist__img {
  display: block;
  width: 96px;
  height: 100%;
  min-height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.slist__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

/* 2026-09-10（15-redesign C11）: 画像は右端。DOM は 順位・画像・文 の順のままで、表示だけ右へ回す */
.slist__link > .slist__media {
  order: 3;
}

/* 見出しは**常に2行ぶんの高さ**を取り、2行で打ち切る。
   依頼 2026-08-19: 左右2分割で、1行の項目（会社名）と2行の項目（イベント名）が
   混ざると行の高さが揃わず、左右の罫線がガタつく。
   ⚠️ line-clamp（上限）だけでは足りない。**下限（min-height）も要る**——
      1行しかない項目は 1 行ぶんの高さに縮むので、上限だけ揃えても罫線は揃わない。
   3em = 2行 × line-height 1.5（em は .slist__title 自身の --text-sm）。 */
.slist__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: var(--color-text);
}

.slist__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .section-pair {
    display: grid;
    /* 依頼 2026-08-19: 会社紹介とイベント・セミナーが近すぎて2列が1つの表に見える。
       列間だけを広げる（行間は変えない）。 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-7);
    max-width: var(--width-content);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  /* 2分割の中では節が自前の余白を持たない（行の余白は親が持つ）。
     ⚠️ `.section` の `margin: 0 auto` を打ち消さないと、列の中で中央寄せになり
        中身の幅までしか広がらない（実測: 568px の列に 337px で収まっていた）。
        width も明示して列いっぱいに伸ばす。 */
  .section-pair > .section {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
    justify-self: stretch;
  }
}

/* ============================================================
   文章と画像を横に組む（ユーザー指摘「デザイン性が皆無」2026-08-18）
   縦積みだと「文章の塊 → 巨大な画像 → カード」と続き、
   視線が単調に落ちるだけで文章と絵の関係が見えない。
   実測: 文章209px に対し画像504px（2.4倍）で、画像だけが浮いていた。
   ============================================================ */

.teaser-split {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: center;
}

.teaser-split .teaser-copy {
  margin-bottom: 0;
  max-width: none;
}

.teaser-split .teaser-figure,
.teaser-split .teaser-diagram {
  margin: 0;
}

/* grid の子は既定で min-width:auto。中身（SVG の min-width や長い語）が
   はみ出して列幅を押し広げ、横スクロールを生むのを止める */
.teaser-visual {
  min-width: 0;
}

/* 画像は文章と釣り合う高さに抑える。原寸で置くと画像だけが主役になる */
.teaser-split .teaser-figure img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .teaser-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  /* 節ごとに左右を入れ替える。同じ配置が続くと、そこから先を読み飛ばされる。
     :nth-of-type ではなく明示クラスにしないのは、節の増減で崩れないため
     （順序が変わっても「1つ飛ばしで反転」という規則は保たれる）。 */
  .teaser-sec:nth-of-type(even) .teaser-split {
    direction: rtl;
  }

  .teaser-sec:nth-of-type(even) .teaser-split > * {
    direction: ltr;
  }

  .teaser-split .teaser-figure img {
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   画像を背景に敷いた帯（teaser-band）
   ユーザー指示（2026-08-18）:「この部分を残す。左側に文字を載せても良い」
   画像そのものが節の主題（日本↔アジアの行き来）である節に使う。
   文章の下に置くと画像が独立した飾りになるが、背景に敷くと
   文章が画像の中の出来事として読める。
   可読性は透過ではなく**スクリム**で担保する（画像を差し替えても崩れない）。
   ============================================================ */

.teaser-band {
  position: relative;
  isolation: isolate;
  display: grid;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.teaser-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 文字を載せる左ではなく、地図の主役（東アジア〜東南アジア）側を残す */
  object-position: 68% 50%;
}

/* スクリムは擬似要素で敷く。空の <div> を置くと V-11（空要素の禁止）に当たるうえ、
   装飾のためだけの要素が DOM に増える。背景画像は**子要素の <img>** なので、
   z-index を明示すれば擬似要素を画像の上・文字の下へ確実に挟める
   （要素自身の background では下に潜ってしまい、この挟み方はできない）。 */
.teaser-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 既定（モバイル）は全面に薄く敷く。横に逃がす余白が無いため、
     画像は地の模様として残し、文字は全面のスクリムの上に置く */
  background: var(--gradient-band-scrim-stacked);
}

.teaser-band__copy {
  position: relative;
  z-index: 2;
  padding: var(--space-6) var(--space-5);
}

.teaser-band .teaser-lead {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .teaser-band {
    min-height: 420px;
    align-content: center;
  }

  /* 幅があるので、左は不透明・右は素通しへ。地図が右側で息をする */
  .teaser-band::before {
    background: var(--gradient-band-scrim);
  }

  .teaser-band__copy {
    max-width: 56%;
    padding: var(--space-8) var(--space-7);
  }
}

/* ============================================================
   ビジネスインパクト（teaser-impact）— ページで最も強い面
   web-design-director: Lv3 は1ページ2節まで（ここと hero だけ）。
   白い読み物が続く中に濃紺のベタを1枚差すと、そこが背骨に見える。
   .section を付けない＝ main の全幅へ広がる（100vw は使わない。
   スクロールバーぶんの横スクロールが出るため）。
   ============================================================ */

.teaser-impact {
  background: var(--color-footer-bg);
  border-top: none;
  color: var(--color-on-dark);
}

.teaser-impact__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.teaser-impact__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-flame-amber);
}

.teaser-impact__heading {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
  border-left: var(--accent-bar-width) solid var(--color-flame-hot);
  padding-left: var(--space-3);
}

.teaser-impact__answer {
  margin: 0 0 var(--space-6);
  max-width: var(--width-read);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-muted);
}

.teaser-impact__hook {
  margin: 0 0 var(--space-5);
  max-width: var(--width-read);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.5;
  color: var(--color-on-dark);
}

/* 強調語は暖色で。ヒーローの WARM UP YOUR ENGINE. と同じ系統にして、
   ページ全体で「熱を持つ色＝ENGINE の主張」という対応を作る */
.teaser-impact__hook em {
  font-style: normal;
  color: var(--color-flame-amber);
}

.teaser-impact__lead {
  max-width: var(--width-read);
  margin: 0 0 var(--space-7);
}

.teaser-impact__lead p {
  margin: 0 0 var(--space-3);
  color: var(--color-on-dark-muted);
  line-height: 2.05;
}

.teaser-impact__lead p:last-child {
  margin-bottom: 0;
}

.teaser-impact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.teaser-impact__item {
  border-top: 1px solid var(--color-footer-border);
  padding-top: var(--space-4);
}

.teaser-impact__num {
  margin: 0 0 var(--space-2);
  font-size: 2rem;
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-flame-amber);
}

.teaser-impact__itemtitle {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-on-dark);
}

.teaser-impact__itembody {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-on-dark-muted);
}

@media (min-width: 900px) {
  .teaser-impact__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .teaser-impact__num {
    font-size: 2.6rem;
  }
}

/* ============================================================
   利用方法（teaser-steps）— 「どう始めるか」で止まらせない
   薄い地色の帯＋番号付きの段。上の罫を進行のレールに見立てる。
   ============================================================ */

/* 地色は teaser-sec--tinted に一本化した（白と薄グレーを交互に置くため）。
   ここで固定の地色を持たせると、交互配置の並びから howto だけが外れる。 */
.teaser-steps {
  border-top: none;
}

.teaser-steps__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.teaser-steps__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.teaser-step {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--space-3);
}

.teaser-step__num {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}

.teaser-step__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

.teaser-step__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* 未確定（掲載条件・費用）は空欄にせず、準備中と読める形で出す。
   空欄は読者から見れば「無い」と同じで、問い合わせをためらわせる */
.teaser-steps__note {
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--accent-bar-width) solid var(--color-notice-border);
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  font-size: var(--text-2xs);
  line-height: var(--leading-relaxed);
}

@media (min-width: 900px) {
  .teaser-steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* ============================================================
   取り扱う分野・国のタグ面（teaser-tags）
   「実際に何が載るのか」は、文章で列挙するより面で見せたほうが早い。
   ここは読む場所ではなく、自社の分野を**探す**場所。
   ============================================================ */

.teaser-tags {
  margin-top: var(--space-6);
}

.teaser-tags__label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

.teaser-tags__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.teaser-tag {
  padding: 0.35em 0.9em;
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.6;
}

/* ============================================================
   表組み（teaser-table）— 「何が手に入るか」は散文より表が速い
   recruit.kokuyo.com の行組みに倣い、枠・角丸・影を持たず罫だけで列を分ける。
   狭い画面では文字を縮めず、表ごと横スクロールさせる。
   ============================================================ */

.teaser-table {
  margin-top: var(--space-6);
}

.teaser-table__label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

.teaser-table__scroll {
  overflow-x: auto;
}

.teaser-table__grid {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}

.teaser-table__grid th,
.teaser-table__grid td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.teaser-table__grid thead th {
  border-bottom: 2px solid var(--color-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
}

.teaser-table__grid tbody th {
  width: 11rem;
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

.teaser-table__grid tbody td {
  color: var(--color-text-muted);
}

/* 最終行の罫は残す（表の下端がどこかを示す） */
.teaser-table__grid tbody tr:last-child th,
.teaser-table__grid tbody tr:last-child td {
  border-bottom: 2px solid var(--color-border-strong);
}

/* ── ビジネスインパクトの節をページの背骨にする（Lv3）──
   実測で VD=4 に留まり、他の節と差が付いていなかった。
   面積・文字・余白の3点を上げて、通りすがりでも必ず目が止まる強さにする。 */
.teaser-impact {
  padding-block: calc(var(--space-8) * 1.5);
}

.teaser-impact__hook {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
}

@media (min-width: 900px) {
  .teaser-impact__num {
    font-size: 3.2rem;
  }
}

/* ── 人物カードは「罫で区切る行組み」ではなく独立した箱 ──
   .teaser-grid はコクヨ流の行組み（display:block ＋ 上罫）にしてあるが、
   人物カードは枠・角丸・影を持つ箱なので、そのまま受けると
   カード同士が隙間なく貼り付く（ユーザー指摘 2026-08-18「カードがくっついている」）。
   ここだけは grid に戻して間を取る。 */
.teaser-grid--people {
  display: grid;
  gap: var(--space-5);
  border-top: none;
}

@media (min-width: 768px) {
  .teaser-grid--people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ヒーローの次の一手。ボタンにする（ユーザー指示 2026-08-18）。
   色はブランドのアクセント（青）。フォームの送信ボタンが使っている
   --company-cta（赤）は企業マイクロサイト用の色で、ENGINE の面には合わない。
   飛び先はページ内の #contact だけ（本サイトは非公開で401＝押すと締め出される）。
   要素は <a> のまま。ページ内の移動なのでリンクが正しく、見た目だけボタンにする。 */
.teaser-hero__cta {
  margin: var(--space-5) 0 0;
}

.teaser-hero__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), border-color var(--transition-base);
}

/* 矢印は残す。押すと**ページ内を下へ移動する**ことの合図で、
   外部へ飛ぶボタンとの違いをこれ1文字で伝えられる */
.teaser-hero__cta a::after {
  content: "↓";
  font-weight: var(--weight-normal);
}

.teaser-hero__cta a:hover,
.teaser-hero__cta a:focus-visible {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ── モバイルのヘッダー・ヒーローの実測是正（2026-08-18 375px で確認）──
   ① タグラインが幅34pxに潰れて「A...」の1文字になっていた。
      省略記号だけが出るのは、情報がゼロなのに壊れて見える最悪の状態。狭い画面では出さない。
   ② kicker の白カプセルが全幅(345px)まで伸び、中の文字(250px)との差が空白として残っていた。
      カプセルは文字に合わせる。
   ③ ヒーロー画像が208pxしかなく、主題のエンジンが小さかった。 */
/* 既定＝モバイル値。768px 以上で戻す（このリポジトリは min-width だけで書く規約） */
.teaser-top__tagline {
  display: none;
}

/* kicker は狭い画面で2行に折り返す（36文字＋字送り0.28emは375pxに収まらない）。
   `width: max-content` は max-width:100% で頭打ちになるので、箱は全幅のまま
   文字だけが左に寄り、右に空きが残っていた。中央揃えにして箱と文字を釣り合わせる。
   ※ display は指定しない。この要素は position:absolute なので
     inline-block を書いても block に blockify され、指定が無意味になる。 */
.teaser-hero__kicker {
  text-align: center;
}

.teaser-hero__bg {
  min-height: 15rem;
}

@media (min-width: 768px) {
  .teaser-top__tagline {
    display: inline;
  }

  .teaser-hero__bg {
    min-height: 0;
  }
}

/* ── 地色を持つ節（teaser-sec--tinted）──
   MICROSITE と CONTENTS が白地で連続し、節の切れ目が見えなかった（ユーザー指摘 2026-08-18）。
   罫線だけでは、読み物が続く長いページで区切りとして弱い。
   ⚠️ .section を外して全幅にし、内側で本文幅へ絞る。
      .section のまま background を掛けると max-width:1200px の柱だけが色付きになり、
      左右のガターが白く残って「浮いた色帯」に見える。 */
.teaser-sec--tinted {
  background: var(--color-bg-subtle);
  border-top: none;
}

.teaser-sec__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* 見出し下のブランドはロゴ画像（依頼 2026-08-18）。
   文字だった頃の字送り指定は画像には効かないので、高さで大きさを決める。
   alt は "ENGINE."（ドットまでがロゴタイプ）＝読み上げは文字だった頃と同じになる。 */
.teaser-hero__brandlogo {
  display: block;
  width: auto;
  height: clamp(2rem, 5vw, 3.2rem);
  max-width: 100%;
}

/* ブランド行。見出し（説明）とブランド名を分けて、名前を面として立てる。
   ドットまで含めて ENGINE. がロゴタイプなので、字送りは詰めすぎない。 */
.teaser-hero__brand {
  margin: var(--space-2) 0 0;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-logo);
  color: var(--color-heading);
}

/* ── ランキングの順位バッジ（依頼書 0817 図版 image7）──
   1位=金・2位=銀・3位=青・4位以降は淡色。行の左端に独立した丸で置く。
   ⚠️ 2026-08-18: styles.css の3-wayマージで、この区画を持たないコミットを
      基準にしたため一度失われた（クラスは HTML に出るのに色が付かない状態だった）。 */
.slist__rank--1 { background: var(--color-rank-gold); color: var(--color-rank-ink); }
.slist__rank--2 { background: var(--color-rank-silver); color: var(--color-rank-ink); }
.slist__rank--3 { background: var(--color-accent); color: var(--color-accent-contrast); }
.slist__rank--rest { background: var(--color-rank-rest); color: var(--color-rank-rest-ink); }

/* 閲覧数。実測があるときだけ出る（無い行は日付） */
.slist__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── 配布物の一覧（PUB-006 / CR-61）──
   ヒアリングシートのダウンロード。押せる面を広く取り、何のシートか一目で分かるようにする。 */
.dl-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: 0 0 var(--space-4);
  list-style: none;
}

.dl-item__link {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}

.dl-item__link:hover {
  border-color: var(--color-accent);
}

.dl-item__label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.dl-item__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* 副フォーマット（CSV版）。主導線（Excel）より弱く、しかし押せる大きさは確保する。
   U10: 触れる的は 44px 以上。文字リンクでも高さを確保する。 */
.dl-item__alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.dl-item__alt:hover {
  color: var(--color-accent);
}

/* 送付先はコピーできるよう文字で置く（mailto が開かない環境がある） */
.dl-sendto {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dl-sendto__addr {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  user-select: all;
}

@media (min-width: 48rem) {
  .dl-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── 企業画像ギャラリー（要件 3.2.2 / CR-62）──
   顧客提供画像の**枚数で見せ方を変える**。
   1枚=大きく1枚 / 2〜3枚=その枚数の等幅 / 4枚以上=横レール（送りボタン付き）。
   枚数が揃わない企業が多く、同じレイアウトに流すと1枚の企業で余白だけの枠ができる。 */
.gal {
  display: grid;
  gap: var(--space-3);
}

.gal__fig {
  margin: 0;
}

.gal__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.gal__cap {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* レール（4枚以上）ではカードと同じ高さに揃える。比率を固定しないと段差が出る */
.gal__row .gal__img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 48rem) {
  .gal--grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal--grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 1枚のときは横いっぱいに広げず、読み物の幅に収める（間延びを防ぐ） */
  .gal--single {
    max-width: var(--width-prose);
  }
}

/* ── 製品一覧の分類帯（CR-39 / 依頼書 図版 image24）──
   分類名を企業カラーの帯で出し、その下にその分類の製品を並べる。
   分類が1つしか無い企業では帯を立てない（build 側で判定）。 */
.pcat {
  margin-bottom: var(--space-5);
}

.pcat__band {
  /* 15-redesign M6（2026-09-12）: 帯は 見出し（左）＋ View More（右） */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--company-accent-deep, var(--color-accent));
  color: var(--color-accent-contrast);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
}

/* ── 連絡窓口（CR-25 / 依頼書 図版 image25）──
   赤いお問い合わせボタン → 押すと拠点別の連絡先が開く。
   ボタンの赤は企業ごとに変えられる（--company-cta）。既定は依頼の「赤ベース」。 */
.cmp-contact__btn {
  min-height: 44px;
  padding: 0 var(--space-5);
  background: var(--company-cta, var(--color-cta-red));
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.cmp-contact__btn:hover {
  background: var(--company-cta-hover, var(--color-cta-red-hover));
}

/* モーダル本体。hidden 属性で閉じるので、JS が動かない環境では最初から出ない */
.cmp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(18 22 31 / 55%);
}

.cmp-modal[hidden] {
  display: none;
}

.cmp-modal__panel {
  width: min(34rem, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.cmp-modal__title {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-align: center;
}

.cmp-modal__lead {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cmp-modal__list {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  margin: 0 0 var(--space-4);
  list-style: none;
}

.cmp-ch__label {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cmp-ch__line {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-muted);
}

.cmp-ch__line a {
  color: var(--company-accent, var(--color-accent));
}

.cmp-modal__close {
  width: 100%;
  min-height: 44px;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* モーダルを開いている間は背後をスクロールさせない */
body.is-modal-open {
  overflow: hidden;
}

/* 横スクロールバーは出さない（運営指示 2026-08-18）。
   最新ニュース・導入事例・製品など全レール共通。指やホイールでは送れるが、
   バーが常時見えるとカードの下に灰色の帯が残って見栄えを損ねる。
   ⚠️ overflow は auto のまま（hidden にすると指で送れなくなる）。 */
.cardrow,
.cmp-row {
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* 旧 Edge */
}

.cardrow::-webkit-scrollbar,
.cmp-row::-webkit-scrollbar {
  display: none;                      /* Chrome / Safari */
}

/* ── 送りボタンは常時出さない（運営指示 2026-08-18）──
   カードの上に矢印が乗り続けると画像が隠れる。
   ホバー／フォーカス／タッチ操作のときだけ出す。
   ⚠️ opacity だけで消すと**見えないボタンが押せてしまう**ので
      visibility も落とす（キーボード移動でも飛ばされる）。 */
@media (min-width: 1024px) {
  .carousel[data-carousel-can="1"] .carousel__prev:not([hidden]),
  .carousel[data-carousel-can="1"] .carousel__next:not([hidden]) {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
  }

  .carousel[data-carousel-can="1"]:hover .carousel__prev:not([hidden]),
  .carousel[data-carousel-can="1"]:hover .carousel__next:not([hidden]),
  .carousel[data-carousel-can="1"]:focus-within .carousel__prev:not([hidden]),
  .carousel[data-carousel-can="1"]:focus-within .carousel__next:not([hidden]) {
    opacity: 1;
    visibility: visible;
  }
}

/* ホバーできない端末（スマホ・タブレット）は指で送れるので、そもそも矢印を出さない */
@media (hover: none) {
  .carousel__prev,
  .carousel__next {
    display: none;
  }
}

/* ヘッダーのロゴはモバイルで少しだけ小さくする。
   横に潰すのではなく**高さで**縮める（縦横比を保つため）。 */
@media (max-width: 30rem) {
  .brand__logo {
    height: 26px;
  }
}

/* JS 無効時に <noscript> で出す連絡先。モーダルの見た目を借りず、地の文として読ませる */
.cmp-ch--static {
  margin-top: var(--space-3);
}

/* ==========================================================================
   会員（掲載企業）ページ — MEM-001 / MEM-101 / MEM-202 / MEM-203
   ⚠️ 生成物ではなく Cloud Functions が描く面（deploy/functions/member-routes.js）。
      ここに当てが無いと素の HTML が出る。色・寸法は tokens.css の var() を使う。
   ========================================================================== */
.member-page {
  background: var(--color-bg);
}
.member-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.member-bar__brand {
  margin: 0;
  font-weight: 700;
}
.member-bar__brand a {
  color: var(--color-text);
  text-decoration: none;
}
.member-bar__me {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.member-bar__out {
  display: inline;
}
.member-bar__out button {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  padding: 0.2rem 0.8rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.member-main {
  width: min(var(--width-content), 100% - 2 * var(--space-5));
  margin-inline: auto;
  padding-block: var(--space-6);
}
.member-h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
}
.member-h2 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-lg);
}
.member-lead,
.member-fineprint {
  color: var(--color-text-muted);
}
.member-fineprint {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}
.member-note--error {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
}
.member-actions {
  margin-top: var(--space-5);
}
.member-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.member-card {
  min-width: 14rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.member-card__label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.member-card__value {
  margin: var(--space-2) 0 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.member-card__link {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}
.member-table {
  width: 100%;
  border-collapse: collapse;
}
.member-table th,
.member-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-2);
  text-align: left;
  vertical-align: top;
}
/* D-045 矛盾監査（ADM-102）: 食い違いの行を目立たせる。色はトークン */
.audit-row--ng td {
  background: var(--color-notice-bg);
}
.audit-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.member-table th {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.member-empty {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.member-empty__head {
  margin: 0;
  font-weight: 700;
}
.member-empty__lead {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.member-detail {
  margin: 0;
}
.member-kv {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.member-kv dt {
  flex: 0 0 8rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.member-kv dd {
  margin: 0;
}
.member-body {
  white-space: normal;
}

/* ── 運営管理エリア（ADM）───────────────────────────────
   会員エリア（.member-*）の枠をそのまま使い、運営だけに要る部品を足す。
   ⚠️ 色・寸法は必ず tokens.css の変数を参照する（色リテラルはビルドが警告する）。 */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.admin-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.admin-nav a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  color: inherit;
  text-decoration: none;
}
.admin-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-card__num {
  font-size: var(--text-2xl);
  font-weight: 700;
}
.admin-card__unit {
  margin-inline-start: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 400;
}
.admin-h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
}
/* ⚠️ 表は狭い画面でページ全体を横に伸ばしがち。器の側で横スクロールさせる。 */
.admin-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3);
  text-align: start;
  vertical-align: top;
}
.admin-table th {
  color: var(--color-text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.admin-muted {
  color: var(--color-text-muted);
}
.admin-danger {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  padding: 0.15rem 0.7rem;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}
.admin-form {
  max-width: 34rem;
  margin-block-start: var(--space-4);
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}
.admin-field label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-field input,
.admin-field select {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.admin-dl {
  display: grid;
  grid-template-columns: minmax(6rem, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}
.admin-dl dt {
  color: var(--color-text-muted);
}
.admin-dl dd {
  margin: 0;
}
.admin-body {
  border-inline-start: 3px solid var(--color-border);
  padding-inline-start: var(--space-4);
  white-space: pre-wrap;
}

/* ── 投稿依頼のやりとり（会員 MEM-303 / 運営 ADM-502 で共用）── */
.admin-field textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}
.admin-field legend {
  margin-block-end: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.admin-field fieldset,
fieldset.admin-field {
  border: 0;
  padding: 0;
}
.admin-field label input[type="checkbox"] {
  margin-inline-end: var(--space-2);
}
.admin-form--inline {
  max-width: 22rem;
}
.admin-dl-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.req-comments {
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}
.req-comment {
  border-inline-start: 3px solid var(--color-border);
  margin-block-end: var(--space-3);
  padding-inline-start: var(--space-4);
}
/* 運営の発言は色で分ける。誰が言ったかを読み返さずに追えるようにする。 */
.req-comment--staff {
  border-inline-start-color: var(--color-accent, var(--color-border-strong));
}
.req-comment__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.req-comment__body {
  margin: var(--space-2) 0 0;
  white-space: pre-wrap;
}