/* TOP ページ固有スタイル（2026-07-15 デザインFIX 統合版）
   構成=旧v1 / トンマナ=旧v3（ダーク） / ブログ・About=旧v2 踏襲
   共通分（.wrap / .section-head / .pill-btn / .reveal / .header / .git / .post-card / .footer）は common.css
   フィルター/カード系（.fpill / .fpills / .fselect / .cgrid / .ccard）は companies.css を流用ロード */

/* ============ ヒーロー（フレーム + スライドショー） ============ */
.hero {
  position: relative;
  background: var(--paper);
  padding: 22px 22px 0;
}
.hero__frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 78vh;
  isolation: isolate;
  background: var(--panel);
}
/* ⚠️ 拡大の基準点は人物側（右）に置く（2026-08-14 クライアント指摘の対応）。
   既定の中心基準だと 1.06 → 1.0 の縮小で右にいる人物が左へ動き、
   見出しへ「徐々に被っていく」ように見える。基準点を人物へ寄せると人物はその場に留まり、
   文字の無い左側だけが動く。heroFocus（初回のぼかし）と heroCycle3 の両方に効かせること */
.hero__bg,
.hero__bg > * { transform-origin: 72% 50%; }
.hero__bg {
  position: absolute;
  inset: 0;
  animation: heroFocus 2.0s cubic-bezier(0.25, 0.6, 0.2, 1) both;
}
@keyframes heroFocus {
  0% { filter: blur(22px); transform: scale(1.07); }
  100% { filter: blur(0); transform: scale(1); }
}
/* スライドは img だけでなく「切り抜き人物＋ドット」を重ねた div も入るため、
   切替そのものは直下の子すべてに掛ける。cover や色調整は img スライドだけの話 */
.hero__bg > * {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroCycle 16s ease-in-out infinite;
}
.hero__bg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.82) contrast(1.02);
}
.hero__bg > *:nth-child(2) { animation-delay: 8s; }

/* --- 1枚目: 宮本氏の切り抜き × 動くドット（2026-08-14 クライアント確定）---
   受領した原本から人物だけを抜き、ダークな下地・ドット・人物の3層で組む。
   焼き込み画像（fv-slide-ambassador.webp）は背景が動かせないため使わない */
.hero__slide--amb {
  overflow: hidden;
  background:
    radial-gradient(ellipse 74% 88% at 78% 42%, rgba(28, 46, 88, 0.85), transparent 68%),
    linear-gradient(104deg, #0B0D12 0%, #10182A 52%, #16233F 100%);
}

/* 見出しは既定で2行。広い画面だけ1行に戻す（1行のままだと中間幅で人物の顔に文字がかかる） */
@media (min-width: 1100px) {
  .hero__title--jp br { display: none; }
}

/* 原本と同じ座標系の切り抜きを、原本と同じ cover で敷く（見え方を変えないため）。
   暗く沈める必要があったのは球場の背景ごと写っていたときの話で、人物だけになった今は
   下地のダークに負けない明るさに戻している */
.hero__ambphoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.88) brightness(0.94) contrast(1.02);
}
@keyframes heroCycle {
  0% { opacity: 0; transform: scale(1.06); }
  5% { opacity: 1; }
  50% { opacity: 1; transform: scale(1); }
  56% { opacity: 0; }
  100% { opacity: 0; transform: scale(1.06); }
}
/* スライド3枚（宮本氏 / ミートアップ / 横浜）。1枚8秒 × 3 = 24秒周期。
   枚数を増減したら duration と delay をここで揃える（表示比率が崩れると2枚が重なる） */
.hero__bg--3 > * {
  animation-name: heroCycle3;
  animation-duration: 24s;
}
.hero__bg--3 > *:nth-child(2) { animation-delay: 8s; }
.hero__bg--3 > *:nth-child(3) { animation-delay: 16s; }
/* 表示時間の比率は2枚版と同じ（フェードイン0.8秒 → 8秒まで保持 → 1秒かけて消える）。
   消え始めを8秒より前に置くと、次の1枚が立ち上がる前に背景が暗く沈む */
@keyframes heroCycle3 {
  0% { opacity: 0; transform: scale(1.06); }
  3.33% { opacity: 1; }
  33.33% { opacity: 1; transform: scale(1); }
  37.33% { opacity: 0; }
  100% { opacity: 0; transform: scale(1.06); }
}
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 14, 19, 0.62) 0%, rgba(12, 14, 19, 0.30) 30%, rgba(12, 14, 19, 0) 55%),
    linear-gradient(180deg, rgba(12, 14, 19, 0.28) 0%, rgba(12, 14, 19, 0.05) 40%, rgba(12, 14, 19, 0.58) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 88px 64px 96px;
}
.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  display: inline-block;
}
/* アンバサダーバッジ（2026-08-06 TOP-01）
   右のロゴはアンバサダー専用ロゴができるまで既存エンブレムの仮置き。
   ゴールドは CTA 限定のため、バッジ側は白と半透明で構成しロゴの金に任せる */
.hero__amb {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 14, 19, 0.42);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: wordIn 0.8s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__amb__face {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  background: rgba(255, 255, 255, 0.08);
  flex: none;
}
.hero__amb__body { display: flex; flex-direction: column; gap: 3px; }
.hero__amb__label {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.72);
}
.hero__amb__name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hero__amb__mark { width: 34px; height: 34px; object-fit: contain; flex: none; }

.hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(40px, 5.8vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #fff;
}
/* 日本語を主役にした見出し（2026-08-06 TOP-01）。
   英字用の設定（Unbounded / line-height 0.98 / 負の字送り）のままだと日本語が詰まって見えるため分ける */
/* 5.0vw だと 1100〜1440px で1行の右端が人物の顔まで届く（2026-08-14 クライアント指摘）。
   人物を右へ寄せただけでは 1100px 帯が埋まらないため、字も一段落としてある */
.hero__title--jp {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(34px, 4.7vw, 74px);
  line-height: 1.14;
  letter-spacing: -0.005em;
}
.hero__title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: wordIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes wordIn { to { opacity: 1; transform: translateY(0); } }
.hero__tag {
  margin-top: 22px;
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  opacity: 0;
  animation: wordIn 0.8s 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__lead {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
  /* 1文=1行に収まる幅を確保する（旧 44ch は日本語だと約22文字分しかなく、
     「〜空気を、入る / 前に感じてください。」のように文の途中で折れていた） */
  max-width: 420px;
  opacity: 0;
  animation: wordIn 0.8s 2.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero__actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  animation: wordIn 0.8s 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
/* サブCTA は主役の「地元企業を探す」より一段小さく（2026-08-06 TOP-02） */
.hero__subcta {
  font-size: 12.5px;
  padding: 9px 18px 9px 24px;
  box-shadow: none;
}

/* ヒーロー内お知らせ（右下小箱） */
.hero__notice {
  position: absolute;
  right: 46px;
  bottom: 24px;
  z-index: 3;
  display: block;
  width: 34%;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 20px 15px;
  background: rgba(12, 14, 19, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.94);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.hero__notice:hover {
  background: rgba(12, 14, 19, 0.9);
  border-color: var(--accent-line);
}
.hero__notice__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__notice__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-line);
}
.hero__notice__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero__notice__date {
  display: block;
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.14em;
}

/* ============ Jimoto Select（検索 + グリッド） ============ */
.jimoto-select {
  position: relative;
  background: var(--paper);
  padding: 96px 0 110px;
}
.jimoto-select .wrap { max-width: 1240px; }

.topsec__title {
  text-align: center;
  font-family: var(--font-jp);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 auto 40px;
}
.topsec__title__en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* --- 検索パネル（ダーク） --- */
.topsearch {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 26px;
  background: rgba(11, 13, 18, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topsearch__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.18s ease, background-color 0.18s ease;
  margin-bottom: 18px;
}
.topsearch__field:focus-within {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--accent-line);
}
.topsearch__icon { flex: none; color: rgba(255, 255, 255, 0.72); }
.topsearch__field input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  min-width: 0;
  /* 入力欄そのものの高さは 17px しかなく、指で狙うと外しやすい（2026-08-10 SP チェック）。
     上下の padding でタップ領域を 45px に広げ、同量の負 margin で枠の高さは元のまま保つ */
  padding: 14px 0;
  margin: -14px 0;
}
.topsearch__field input::placeholder { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.topsearch__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.topsearch__row { display: flex; align-items: flex-start; gap: 18px; }
.topsearch__row + .topsearch__row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.topsearch__label {
  flex: none;
  padding-top: 6px;
  min-width: 82px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.topsearch__label small {
  display: block;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- 該当企業グリッド --- */
.topgrid-wrap { margin-top: 44px; }

.topstatus {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 14px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.topstatus__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.topstatus__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-line);
  flex: none;
}
.topstatus__kw { color: var(--accent); font-weight: 900; padding: 0 2px; }
.topstatus__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 2px;
}
.topstatus__count {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  flex: none;
}

/* 並び替えドロップダウン */
.topsort { position: relative; }
.topsort__toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.topsort__toggle:hover { border-color: var(--accent-line); color: var(--accent); }
.topsort__toggle[aria-expanded="true"] {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-dim);
}
.topsort__toggle svg { display: block; }
.topsort__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.7);
  padding: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topsort__menu[hidden] { display: none; }
.topsort__option {
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.topsort__option:hover { background: var(--accent-dim); color: var(--accent-strong); }
.topsort__option.is-active { background: var(--accent-fill); color: var(--on-accent); }

.cgrid--top { grid-template-columns: repeat(3, 1fr); }
.topgrid__empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 2.1;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.topgrid__empty[hidden] { display: none; }
.topgrid__more {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}

/* --- SP: カテゴリ別 横スクロール行（Netflix風）。デスクトップでは非表示 --- */
.toprows { display: none; }
.toprow { margin-top: 36px; }
.toprow__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.toprow__title {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.03em;
}
.toprow__en {
  font-family: var(--font-en);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.toprow__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -22px;
  padding: 0 22px 8px;
  /* スナップ時も左パディング分を残す（これがないと初期表示で先頭カードが画面左端に貼り付く） */
  scroll-padding-left: 22px;
  scrollbar-width: none;
}
.toprow__track::-webkit-scrollbar { display: none; }
.rcard {
  flex: none;
  width: 74vw;
  max-width: 320px;
  scroll-snap-align: start;
}
.rcard__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-2);
}
.rcard__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rcard__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #0C0E13;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}
.rcard__play svg { display: block; }
.rcard__vcount {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: #0C0E13;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50px;
  padding: 2px 9px;
}
.rcard__name {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}
.rcard__meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}
.toprows__more {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}

/* ============ About（Who we are + フィーチャー + 統計） ============ */
.aboutx {
  position: relative;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 120px 0;
}
.aboutx__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
/* エンブレムを統計セクションへ移したため1カラム、かつ中央揃え（2026-08-10 ユーザー指示）。
   本文は <br> で1文=1行に組んであるので、行が間延びしないよう幅の上限を与えたうえで中央に置く */
.aboutx__intro {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.aboutx__intro > div { max-width: 760px; }
.aboutx__title {
  font-family: var(--font-en);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 26px;
}
/* 日本語見出し（2026-08-06 TOP-07）。英字用の設定のままだと SP で収まらないため下限を下げる。
   word-break: auto-phrase は文節を割らないので、下限が大きいと折り返せず横に伸びる */
.aboutx__title--jp {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(27px, 4.4vw, 56px);
  line-height: 1.38;
  letter-spacing: -0.01em;
}
.aboutx__lead {
  font-size: 15px;
  font-weight: 500;
  line-height: 2.05;
  color: var(--ink-soft);
}
.aboutx__cta { margin-top: 32px; }
.aboutx__lead--gap { margin-top: 22px; }

/* ============ 数値セクション（2026-08-06 TOP-06）============
   5項目 → 3項目に減って余白が空くため、背景の軽いドットと
   数値下のラインの発光で間を持たせる（打ち合わせで採用範囲を確定）。
   重いアニメーション（波打つドット・レンズフレア）は工数の都合で不採用。 */
.statsx {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding: 118px 0 108px;
}
/* ドットのあしらい（統計セクションとヒーロー1枚目で共用・2026-08-07）。
   見え方の違いは mask とサイズだけにして、動きの定義は1箇所に置く。 */
.dotfield {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* 内側のレイヤーが親より大きいので、ここで確実に閉じる */
  pointer-events: none;
}
.dotfield--stats {
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 46%, #000 8%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 46%, #000 8%, transparent 76%);
}
/* ヒーローは左にコピーが乗るので、人物側（右寄り）にだけ出す */
.dotfield--hero {
  -webkit-mask-image: radial-gradient(ellipse 62% 82% at 72% 52%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse 62% 82% at 72% 52%, #000 10%, transparent 74%);
}
/* 3枚を時間差で明滅させつつ、タイル1枚ぶん（26px）だけゆっくり流す。
   ずらす量をタイルの倍数にしておくと、ループの継ぎ目が見えない */
.dotfield__layer {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(var(--accent-strong) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: 0.12;
  will-change: transform, opacity;
  animation: dotfieldPulse 9s ease-in-out infinite, dotfieldDrift 30s linear infinite;
}
.dotfield__layer:nth-child(2) {
  background-position: 13px 13px;
  animation-delay: -3s, -10s;
  animation-direction: normal, reverse;
}
.dotfield__layer:nth-child(3) {
  background-position: 0 13px;
  animation-delay: -6s, -20s;
}
@keyframes dotfieldPulse {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.32; }
}
@keyframes dotfieldDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(26px, -26px, 0); }
}
/* ドットの上をゆっくり往復する光。ドット単体の明滅より「動いている」ことが分かりやすい */
.dotfield__sweep {
  position: absolute;
  inset: -20% -40%;
  background: radial-gradient(ellipse 34% 58% at 50% 50%, var(--accent-line), transparent 68%);
  opacity: 0.62;   /* 数字の後ろの光と重なるため、単体で見た印象より抑えめにする */
  will-change: transform;
  animation: dotfieldSweep 15s ease-in-out infinite;
}
@keyframes dotfieldSweep {
  0%, 100% { transform: translate3d(-34%, 0, 0); }
  50%      { transform: translate3d(34%, 0, 0); }
}
.statsx__wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
/* 認定エンブレム（2026-08-10 打ち合わせで /about セクションから移設）。
   数字の上に置いてセクションの入口にする。PC/SP とも同じ扱い */
.statsx__emblem {
  margin: 0 auto 44px;
  width: min(140px, 34vw);
  display: grid;
  place-items: center;
}
.statsx__emblem img { width: 100%; height: auto; object-fit: contain; }
.statsx__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
/* 数字の後ろに置く淡い光。数字自体の形は変えず、奥行きだけ足す（2026-08-07）。
   ::before は「位置指定あり」なので、何もしないと静的な数字より前に描かれる。
   数字・ライン・ラベル側に position:relative を与えて前後関係を固定する */
.statsx__item { position: relative; }
.statsx__item::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -14%;
  width: min(320px, 88%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(77, 124, 255, 0.16), transparent 64%);
  pointer-events: none;
}
.statsx__num,
.statsx__line,
.statsx__label { position: relative; z-index: 1; }
.statsx__num {
  font-family: var(--font-en);
  font-size: clamp(56px, 6.6vw, 96px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
/* 数字だけグラデーションで抜き、青みのグローを足す。単位（small）は巻き込まない */
.statsx__digits {
  display: inline-block;
  font-variant-numeric: tabular-nums;   /* カウントアップ中に字幅が動かないように */
  filter: drop-shadow(0 6px 20px rgba(77, 124, 255, 0.28));
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .statsx__digits {
    background: linear-gradient(176deg, #FFFFFF 0%, #FFFFFF 44%, rgba(245, 245, 245, 0.58) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.statsx__num small {
  font-family: var(--font-jp);
  /* 「都道府県」のように単位が長いものがあるため、数字に対して控えめの比率にする */
  font-size: 0.28em;
  font-weight: 700;
  margin-left: 6px;
  color: var(--ink-soft);
}
/* 数値の下のライン。メインカラーの青でほんのり光らせる（打ち合わせ合意） */
.statsx__line {
  display: block;
  width: 72px;
  height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  animation: statsLine 3.6s ease-in-out infinite;
}
.statsx__item:nth-child(2) .statsx__line { animation-delay: 0.6s; }
.statsx__item:nth-child(3) .statsx__line { animation-delay: 1.2s; }
@keyframes statsLine {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 8px 0 var(--accent-line); }
  50%      { opacity: 1;   box-shadow: 0 0 18px 2px var(--accent-line); }
}
.statsx__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 16px;
}
.statsx__note {
  margin-top: 54px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .dotfield__layer,
  .dotfield__sweep,
  .statsx__line { animation: none; }
}

/* ============ ブログ（ヘアライン行リスト・旧v2 nv2-posts 踏襲） ============ */
.blogx {
  position: relative;
  background: var(--paper);
  padding: 110px 0 120px;
}
.blogx__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.blogx__grid {
  display: grid;
  /* minmax(0,…) が無いと fr の下限が中身の min-content になり、記事タイトルの長い行が
     カラムを押し広げて 1000〜1160px でページごと横にはみ出す */
  grid-template-columns: 0.9fr minmax(0, 1.6fr);
  gap: 64px;
  align-items: start;
}
.blogx__title {
  font-family: var(--font-jp);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: #fff;
}
.blogx__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.16s ease;
}
.blogx__row:first-child { border-top: 1px solid var(--line); }
.blogx__badge {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
}
.blogx__date {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.blogx__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.16s ease;
}
.blogx__row:hover .blogx__name { color: var(--accent-strong); }
.blogx__arw {
  flex: 0 0 auto;
  font-family: var(--font-en);
  color: var(--accent);
  transition: transform 0.18s ease;
}
.blogx__row:hover .blogx__arw { transform: translateX(4px); }
.blogx__cta { margin-top: 36px; }

.posts__empty {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ============ レスポンシブ ============ */
@media (max-width: 1000px) {
  .cgrid--top { grid-template-columns: repeat(2, 1fr); }
  .topsearch__row { flex-direction: column; gap: 10px; }
  .topsearch__label { padding-top: 0; }
  .blogx__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 780px) {
  .hero { padding: 14px 14px 0; }
  .hero__frame { min-height: 72svh; }
  /* FV の要素が増えた（バッジ + 本文2文 + CTA2つ）ため、下のお知らせ小箱と重ならない余白を取る */
  .hero__inner { min-height: 72svh; padding: 56px 26px 150px; }
  /* 本文幅は SP で約310px。13px だと2文目が1行に収まらないため少しだけ詰める */
  .hero__lead { font-size: 12.5px; max-width: none; }
  .hero__notice { right: 14px; left: 14px; width: auto; min-width: 0; max-width: none; bottom: 14px; }
  /* バッジは SP 幅（本文幅 約295px）に収まらないため、顔とロゴを小さくし名前の折返しを許可する */
  .hero__amb { gap: 10px; padding: 6px 12px 6px 6px; margin-bottom: 20px; }
  .hero__amb__face { width: 38px; height: 38px; }
  .hero__amb__mark { width: 28px; height: 28px; }
  .hero__amb__name { font-size: 11.5px; line-height: 1.45; white-space: normal; }
  .hero__eyebrow { font-size: 9.5px; letter-spacing: 0.2em; margin-bottom: 18px; }
  .dotfield--hero {
    -webkit-mask-image: radial-gradient(ellipse 86% 54% at 62% 74%, #000 12%, transparent 76%);
    mask-image: radial-gradient(ellipse 86% 54% at 62% 74%, #000 12%, transparent 76%);
  }

  .jimoto-select { padding: 64px 0 80px; }
  .topsearch { padding: 18px; }
  .topsearch__field { padding: 11px 16px; }

  /* SP: 業種別カテゴリ行（横スクロール）で確定（2026-07-28 クライアント選定）。
     絞り込み中のみグリッド表示へ自動切替。 */
  .toprows { display: block; }
  #topGridWrap { display: none; }
  .jimoto-select.is-filtering .toprows { display: none; }
  .jimoto-select.is-filtering #topGridWrap { display: block; }

  .aboutx { padding: 88px 0; }

  .statsx { padding: 84px 0 76px; }
  .statsx__wrap { padding: 0 22px; }
  .statsx__emblem { margin-bottom: 36px; }
  .statsx__grid { grid-template-columns: 1fr; gap: 44px; }
  .statsx__note { margin-top: 44px; text-align: left; }

  .blogx { padding: 80px 0 90px; }
  .blogx__row { flex-wrap: wrap; gap: 8px 12px; }
  .blogx__name { white-space: normal; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .cgrid--top { grid-template-columns: 1fr; }
}

/* ============================================================
   SP ファーストビュー（2026-08-11 クライアント確定＝人物を大きく）
   打ち合わせで「人物が右下に小さくちょこんとしている」との指摘があり、ベンチマークとして
   提示されたサイト（アイドマ・ホールディングス）の SP FV を実測した:
     - 人物は画面幅いっぱい（375px 中 353px）まで大きく、左へ約 187px はみ出させて配置
     - コピーは人物を避けず、同じ帯に重ねる
   これに倣い、人物を右へ大きくはみ出させる。テキストとの重なりは意図的（打ち合わせで許容済み）で、
   可読性は .hero__shade の左からの暗がりで担保する。
   ⚠️ SP は縦長のため cover では写真の横が約875px切られ縦は全部出る。つまり顔の縦位置は
   動かせないので、2枚目以降は横位置だけ動かして左寄せのコピーから顔を逃がしている。
   ============================================================ */
@media (max-width: 780px) {
  /* 人物が大きいぶん、文字の下の暗がりを一段強くして本文を沈ませない */
  .hero__shade {
    background:
      linear-gradient(90deg, rgba(12, 14, 19, 0.82) 0%, rgba(12, 14, 19, 0.52) 42%, rgba(12, 14, 19, 0) 78%),
      linear-gradient(180deg, rgba(12, 14, 19, 0.34) 0%, rgba(12, 14, 19, 0.10) 40%, rgba(12, 14, 19, 0.62) 100%);
  }
  /* ドットのあしらいも人物に合わせて右下へ寄せる */
  .dotfield--hero {
    -webkit-mask-image: radial-gradient(ellipse 92% 58% at 68% 78%, #000 12%, transparent 78%);
    mask-image: radial-gradient(ellipse 92% 58% at 68% 78%, #000 12%, transparent 78%);
  }
  /* 顔の横位置（実測で算出）。SP は縦長のため cover で横だけが切られ、object-position の
     横指定が「顔をどこに置くか」の唯一の手段になる。値は 375px 幅で
     「顔が画面内に収まり、かつ見出しの右端寄りに来る」ように逆算したもの
     （1枚目 55% → 顔が画面の約86%・右で切れない / 2枚目 57% → 同 88%）。
     素材を差し替えたら scripts/prepare_hero_photo.py の FACE 値と併せて計算し直すこと */
  /* 画像の中で人物を右へ 60px 寄せた分を、切り取り位置を右へずらして相殺している
     （55% のままだと顔が画面右端へ寄って切れる）。素材を作り直したら compose_hero_ambassador.py の
     SHIFT_X と併せて計算し直すこと */
  .hero__ambphoto { object-position: 61% 42%; }
  .hero__bg > img:nth-child(2) { object-position: 57% 50%; }
  .hero__bg > img:nth-child(3) { object-position: 62% 50%; }
}