/* templates/sites/horizon-lab/styles.css
 *
 * playbook 規約: 全ルール [data-site="horizon-lab"] 配下 / @theme・@utility 禁止。
 * shinjo-construction/styles.css の完全コピー (class prefix sc- → hl- のみ差分)。
 * 数値は docs 参照: sandbox (~/Desktop/dev/shinjo-holyday-clone/docs/research/DESIGN_SPEC.md)
 * の computed-style 実測値を転記。rem 体系 (13px / ≤680px 12px) を px 直書きで再現、
 * breakpoints は実測どおり 960px / 680px。
 */

[data-site="horizon-lab"] {
  /* font は lib/fonts の共用 instance (CSS 重複防止)。旧変数名は alias で維持 */
  --font-hl-en: var(--font-roboto);
  --font-hl-jp: var(--font-noto-sans-jp);
  --site-ink: #000000;
  --site-body: #191919;
  --site-muted: #707070; /* 2026-09-14: #808080 だと #f9f9f9 地でコントラスト 3.75 (小さい文字の基準 4.5 未満) → 4.7 */
  --site-bg: #f9f9f9;
  --site-line: #eeeeee;
  --site-table-gray: #f1f1f1;
  --site-accent: #0e8078; /* 標準 ContactForm の submit (自社ブランド deep teal) */

  font-family: var(--font-hl-en), var(--font-hl-jp), "游ゴシック Medium",
    "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--site-ink);
  background: var(--site-bg);
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] {
    font-size: 13px;
  }
}

/* ============ layout primitives ============ */

/* 背景の縦線レイヤー (実測: 1px #efefef × 5 本、0/25/50/75/100%、z-0)。
 * コンテンツは .hl-container (relative) と暗色セクション (z-1) が上に載る */
[data-site="horizon-lab"] .hl-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[data-site="horizon-lab"] .hl-lines ul {
  width: 90%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  position: relative;
}
[data-site="horizon-lab"] .hl-lines li {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #efefef;
}
[data-site="horizon-lab"] .hl-lines li:nth-child(1) { left: 0; }
[data-site="horizon-lab"] .hl-lines li:nth-child(2) { left: 25%; }
[data-site="horizon-lab"] .hl-lines li:nth-child(3) { left: 50%; }
[data-site="horizon-lab"] .hl-lines li:nth-child(4) { left: 75%; }
[data-site="horizon-lab"] .hl-lines li:nth-child(5) { left: calc(100% - 1px); }
/* 白セクション内 variant (実測: 白背景には #f9f9f9 の薄い線を別レイヤーで敷く) */
[data-site="horizon-lab"] .hl-lines-sec {
  position: absolute;
}
[data-site="horizon-lab"] .hl-lines-sec li {
  background: #f9f9f9;
}

/* container: max 1280 + 両サイド余白 (実測 80px / mobile 24px)。
 * relative = 縦線レイヤーより上に描画する */
[data-site="horizon-lab"] .hl-container {
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* 暗色の全幅要素は縦線より上に (footer / 下層タイトル帯) */
[data-site="horizon-lab"] .hl-footer,
[data-site="horizon-lab"] .hl-pagehero {
  position: relative;
  z-index: 1;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-container {
    padding-inline: min(80px, 5.5vw);
  }
}
@media (min-width: 1440px) {
  [data-site="horizon-lab"] .hl-container {
    padding-inline: 0;
  }
}

/* section rhythm (実測 115.2px = 8vw@1440) */
[data-site="horizon-lab"] .hl-sec {
  padding-block: 56px;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-sec {
    padding-block: min(8vw, 115.2px);
  }
}
/* 白セクション: 全体の #efefef 縦線を覆い、内側に #f9f9f9 の薄い線を敷く */
[data-site="horizon-lab"] .hl-bgw {
  background: #fff;
  position: relative;
  z-index: 1;
}

/* 本文 (実測: 1rem w500 lh2.1 ls.06em #191919) */
[data-site="horizon-lab"] .hl-txt {
  font-size: 12px;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--site-body);
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-txt {
    font-size: 13px;
  }
}

/* ============ 見出しシステム (バーは ::before) ============ */

[data-site="horizon-lab"] .hl-ttl {
  position: relative;
  padding-left: 18px;
}
[data-site="horizon-lab"] .hl-ttl::before {
  content: "";
  position: absolute;
  left: 0;
  background: var(--site-ink);
}
/* 見出しタグ自体は素通し (英字 + 日本語の span を block で積む。TitleBox 2026-09-14) */
[data-site="horizon-lab"] .hl-ttl-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
[data-site="horizon-lab"] .hl-ttl-en,
[data-site="horizon-lab"] .hl-ttl-ja {
  display: block;
}
[data-site="horizon-lab"] .hl-ttl-en {
  font-family: var(--font-hl-en), sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
[data-site="horizon-lab"] .hl-ttl-ja {
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--site-muted);
}

/* home 用 L (h2 36→52。日本語ラベル上・バーは日本語〜英字の全体 — 指定 2026-08-20) */
[data-site="horizon-lab"] .hl-ttl-l::before {
  top: 2px;
  bottom: 2px;
  width: 4px;
}
[data-site="horizon-lab"] .hl-ttl-l .hl-ttl-en {
  font-size: 36px;
  margin-bottom: 8px;
}
[data-site="horizon-lab"] .hl-ttl-l .hl-ttl-ja {
  font-size: 12px;
  line-height: 1;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-ttl-l {
    padding-left: 26px;
  }
  [data-site="horizon-lab"] .hl-ttl-l .hl-ttl-en {
    font-size: 52px;
    margin-bottom: 10px;
  }
  [data-site="horizon-lab"] .hl-ttl-l .hl-ttl-ja {
    font-size: 13px;
  }
}

/* 下層 M (実測: pl19.5 bar4 top3.9-bottom0 h2 41.6 mb10.4 / mobile h2 24 mb6) */
[data-site="horizon-lab"] .hl-ttl-m::before {
  top: 3px;
  bottom: 0;
  width: 4px;
}
[data-site="horizon-lab"] .hl-ttl-m .hl-ttl-en {
  font-size: 24px;
  margin-bottom: 6px;
}
[data-site="horizon-lab"] .hl-ttl-m .hl-ttl-ja {
  font-size: 12px;
  line-height: 1;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-ttl-m {
    padding-left: 19.5px;
  }
  [data-site="horizon-lab"] .hl-ttl-m::before {
    top: 4px;
  }
  [data-site="horizon-lab"] .hl-ttl-m .hl-ttl-en {
    font-size: 41.6px;
    margin-bottom: 10.4px;
  }
  [data-site="horizon-lab"] .hl-ttl-m .hl-ttl-ja {
    font-size: 13px;
  }
}

/* 下層タイトル帯 W (実測: 白 pl26 bar6 h2 52 mb13 sub15.6 / mobile h2 33.6 mb8.4) */
[data-site="horizon-lab"] .hl-ttl-hero {
  color: #fff;
}
[data-site="horizon-lab"] .hl-ttl-hero::before {
  top: 3px;
  bottom: 0;
  width: 6px;
  background: #fff;
}
[data-site="horizon-lab"] .hl-ttl-hero .hl-ttl-en {
  font-size: 33.6px;
  margin-bottom: 8.4px;
}
[data-site="horizon-lab"] .hl-ttl-hero .hl-ttl-ja {
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-ttl-hero {
    padding-left: 26px;
  }
  [data-site="horizon-lab"] .hl-ttl-hero::before {
    top: 4px;
  }
  [data-site="horizon-lab"] .hl-ttl-hero .hl-ttl-en {
    font-size: 52px;
    margin-bottom: 13px;
  }
  [data-site="horizon-lab"] .hl-ttl-hero .hl-ttl-ja {
    font-size: 15.6px;
  }
}

/* 白抜き修飾 (暗背景上の M 見出し用) */
[data-site="horizon-lab"] .hl-ttl-w,
[data-site="horizon-lab"] .hl-ttl-w .hl-ttl-en {
  color: #fff;
}
[data-site="horizon-lab"] .hl-ttl-w::before {
  background: #fff;
}
[data-site="horizon-lab"] .hl-ttl-w .hl-ttl-ja {
  color: rgba(255, 255, 255, 0.7);
}

/* 和文キャッチ (実測: En 15.6/13.2 w700 lh1.7 mt43 — Ja 33.8/27.6 w700 ls.1 lh1.4 mt15) */
[data-site="horizon-lab"] .hl-catch-en {
  margin-top: 30px;
  font-size: 13.2px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--site-ink);
}
[data-site="horizon-lab"] .hl-catch {
  margin-top: 15px;
  font-size: 27.6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--site-ink);
  text-wrap: balance;
  word-break: auto-phrase;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-catch-en {
    margin-top: 43px;
    font-size: 15.6px;
  }
  [data-site="horizon-lab"] .hl-catch {
    font-size: 33.8px;
  }
}

/* ============ header (白背景 sticky・ロゴ左 + nav 右) ============ */

[data-site="horizon-lab"] .hl-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--site-line);
}
[data-site="horizon-lab"] .hl-nav a {
  display: block;
  padding: 8px 15px;
  font-family: var(--font-hl-en), var(--font-hl-jp), sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--site-ink);
  text-decoration: none;
}
/* ヘッダーロゴ hover: 枠内が黒に塗られて白抜き反転 */
[data-site="horizon-lab"] .hl-logo-link .hl-wordmark {
  transition: background-color 250ms cubic-bezier(0.25, 0.1, 0.25, 1),
    color 250ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-site="horizon-lab"] .hl-logo-link:hover .hl-wordmark {
  background: var(--site-ink);
  color: #fff;
}

/* hover 下線: 左から伸びて、離すと右へ抜ける。current は常時表示 */
[data-site="horizon-lab"] .hl-nav a {
  position: relative;
}
[data-site="horizon-lab"] .hl-nav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 1px;
  height: 2px;
  background: var(--site-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-site="horizon-lab"] .hl-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* 採用情報ピルは塗り hover があるので下線は出さない */
[data-site="horizon-lab"] .hl-nav a.hl-recruit-pill::after {
  display: none;
}
/* 現在ページは前置きドット (hover 下線と役割を分離)。hover すると下線も伸びる */
[data-site="horizon-lab"] .hl-nav a.is-current::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--site-ink);
}
[data-site="horizon-lab"] .hl-recruit-pill {
  display: inline-block;
  padding: 8px 22px;
  font-family: var(--font-hl-en), var(--font-hl-jp), sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--site-ink);
  background: #fff;
  border: 1px solid var(--site-ink);
  border-radius: 39px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-site="horizon-lab"] .hl-recruit-pill:hover {
  background: var(--site-ink);
  color: #fff;
}

/* ============ ボタン/リンク ============ */

/* View More / View Detail (実測: 13px w400 + 丸枠矢印) */
[data-site="horizon-lab"] .hl-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--site-ink);
  text-decoration: none;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-more {
    font-size: 13px;
  }
}
[data-site="horizon-lab"] .hl-more .hl-more-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--site-ink);
  border-radius: 9999px;
  flex: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-site="horizon-lab"] .hl-more:hover .hl-more-circle {
  background: var(--site-ink);
  color: #fff;
}

/* 黒ボタン (contact 帯) */
[data-site="horizon-lab"] .hl-btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 280px;
  padding: 18px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #fff;
  background: #000;
  border: 1px solid #000;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-site="horizon-lab"] .hl-btn-black:hover {
  background: #fff;
  color: #000;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-btn-black {
    min-width: 340px;
    padding: 19.5px 40px;
  }
}

/* ============ ページ入場アニメーション (実測転記) ============
 * 参照挙動: 退場アニメ無し。遷移先で全体 opacity 0→1 (600ms、home +300ms delay)。
 * home: ロゴ reveal → 2.0s header → 2.2s 英字キャッチ → 2.4s リード。
 * 下層: タイトル帯バー 高さ0→全高 (600ms delay600ms) + 文字 stagger。
 * .fx-ready は JS mount 時付与 (無効環境では全表示)、.is-load は fonts.ready / load の先着で付与
 * (どちらも来なくても fx-ready から 1200ms で付与)。 */

/* hydration 前の初回描画からページを隠す (リロード時に完成画面が一瞬映る
 * フラッシュ対策)。JS 無効環境は Root 内の <noscript> スタイルが表示に戻す */
[data-site="horizon-lab"] {
  visibility: hidden;
  /* JS (fx-ready) が 0.5 秒以内に来なければ CSS だけで解放する (低速回線で FCP/LCP が hydration 待ちにならない。
   * 2026-09-14: Lighthouse mobile で FCP 7.5s の原因がこのゲートだった)。fx-ready が先なら animation: none で従来どおり。
   * opacity ではなく visibility を切り替える理由: opacity 0→1 の CSS animation は compositor だけで進んで main thread の
   * 再描画が起きず、Chrome は FCP/LCP を記録しない (次の再描画 = フォント swap や hydration まで遅れる。実測 +0.8〜1.1s)。
   * visibility の離散切替は必ず再描画になり、切替時刻がそのまま FCP/LCP になる (2026-09-14 実測、journal 📋) */
  animation: hl-gate 10ms steps(1, start) 500ms forwards;
}
@keyframes hl-gate {
  to {
    visibility: visible;
  }
}
/* 表示復帰は hydration (fx-ready) 時点 — window load (画像待ち) には依存しない。
 * is-load は入場アニメ (ワードマーク / header / タイトル帯バー / カーテン) 専用。
 * 全体フェード 600ms (実測転記) は animation で (is-late は animation: none で省く) */
[data-site="horizon-lab"].fx-ready {
  visibility: visible;
  animation: hl-fade 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes hl-fade {
  from {
    opacity: 0;
  }
}
/* is-late: CSS ゲートが先に開いた後で hydration が来た時 (ScrollEffects が fx-ready / is-load と同時に付ける)。
 * 入場アニメの初期状態 (隠す・ずらす・線画) を経由せず最終状態へ直行 = 見えていたものが一瞬消える瞬きを出さない */
[data-site="horizon-lab"].is-late,
[data-site="horizon-lab"].is-late .hl-hero-tagline,
[data-site="horizon-lab"].is-late .hl-header,
[data-site="horizon-lab"].is-late .hl-header .hl-container,
[data-site="horizon-lab"].is-late .hl-hero canvas,
[data-site="horizon-lab"].is-late .hl-pagehero .hl-ttl-hero::before,
[data-site="horizon-lab"].is-late .hl-pagehero .hl-ttl-hero > *,
[data-site="horizon-lab"].is-late .hl-ttl-enter .hl-ttl::before,
[data-site="horizon-lab"].is-late .hl-ttl-enter .hl-ttl > * {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
[data-site="horizon-lab"].is-late .hl-mark-text,
[data-site="horizon-lab"].is-late .hl-mark-text tspan,
[data-site="horizon-lab"].is-late .hl-mark-box {
  fill: var(--site-ink);
  stroke-dashoffset: 0 !important;
  stroke-dasharray: none !important;
  transition: none !important;
}
[data-site="horizon-lab"].is-late .hl-mark-box {
  fill: var(--site-ink) !important;
  stroke-opacity: 0 !important;
}
[data-site="horizon-lab"].is-late .hl-cover-line,
[data-site="horizon-lab"].is-late .hl-cover-panel::before {
  transition: none !important;
}
[data-site="horizon-lab"].is-late .hl-cover-line {
  opacity: 0 !important;
}
[data-site="horizon-lab"].is-late .hl-cover-panel::before {
  width: 0% !important;
  transform: translate3d(100%, 0, 0) !important;
}
[data-site="horizon-lab"].fx-ready.is-top {
  transition-delay: 300ms;
}

/* home hero: SVG ワードマーク (参照と同方式のストローク描画 → 塗り)。
 * 実測タイミング: stroke 2400ms delay300ms / fill 1000ms delay2000ms / 枠は先行 */
[data-site="horizon-lab"] .hl-mark-svg {
  display: block;
  width: min(100%, 320px);
  height: auto;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-mark-svg {
    width: 400px;
  }
}
/* 枠 = リング path (外周+内周、evenodd)。太さは stroke でなく塗りで出す (実測)。
 * stroke は描画アニメ専用 — 静止状態では消す (dash 残骸が塗りの輪郭から
 * 0.35px はみ出して接合点の段差に見えるため) */
[data-site="horizon-lab"] .hl-mark-box {
  fill: var(--site-ink);
  stroke: var(--site-ink);
  stroke-width: 0.7;
  stroke-opacity: 0;
}
/* font-size は "SHINJO Construction" (19 字) の自然幅が 340 (viewBox 内) になる値。
 * textLength 圧縮は iOS Safari で効かないため使わない (HeroWordmark 参照) */
[data-site="horizon-lab"] .hl-mark-text {
  font-family: var(--font-hl-en), sans-serif;
  font-size: 35.3px;
  font-weight: 800;
  letter-spacing: 0;
  fill: var(--site-ink);
  stroke: var(--site-ink);
  stroke-width: 0.7;
}
/* 初期状態: 塗りなし + 各文字の輪郭は未描画 (dashoffset)。
 * dasharray / 初期 offset を文字ごとに変えて「描き始めの位置」を散らす
 * (参照はロゴの path ごとに値が計算されているため、その質感を再現) */
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-text {
  fill: transparent;
  transition: none;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-text tspan {
  stroke-dasharray: 230;
  stroke-dashoffset: 245;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-text tspan:nth-child(3n + 1) {
  stroke-dasharray: 240;
  stroke-dashoffset: 262;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-text tspan:nth-child(3n + 2) {
  stroke-dasharray: 215;
  stroke-dashoffset: 228;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-text tspan:nth-child(4n + 3) {
  stroke-dasharray: 255;
  stroke-dashoffset: 292;
}
/* 枠の初期状態 (実測比率の転記: dasharray = 外周の約半分 → 描画中は
 * 「伸びる線」と「滑る線分」が枠上を競走し、塗りで完成する) */
[data-site="horizon-lab"].fx-ready.is-top .hl-mark-box {
  fill: transparent;
  stroke-opacity: 1;
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
}
/* is-load: 文字ごとに 100ms ずつ遅延して輪郭が描かれ (2400ms)、
 * 2.0s で全体に塗りが入る (1000ms)。枠は先行 (1400ms delay200ms)。 */
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text {
  fill: var(--site-ink);
  transition: fill 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1200ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(1) { transition-delay: 300ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(2) { transition-delay: 400ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(3) { transition-delay: 500ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(4) { transition-delay: 600ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(5) { transition-delay: 700ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(6) { transition-delay: 800ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(7) { transition-delay: 900ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(8) { transition-delay: 1000ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-text tspan:nth-child(9) { transition-delay: 1100ms; }
/* 枠の描画 (実測: dashoffset 2000ms delay 200ms / fill 1000ms delay 2000ms)。
 * 塗り完成後 (3.0s) に描画用 stroke をフェードアウト → 残骸の段差を消す */
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-mark-box {
  stroke-dashoffset: 0;
  fill: var(--site-ink);
  stroke-opacity: 0;
  transition:
    stroke-dashoffset 2000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms,
    fill 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms,
    stroke-opacity 400ms linear 3000ms;
}
/* home hero: 英字キャッチ (実測: 800ms delay2200ms translateY(1rem)) */
[data-site="horizon-lab"].fx-ready.is-top .hl-hero-tagline {
  opacity: 0;
  transform: translate3d(0, 13px, 0);
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-hero-tagline {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2200ms,
    opacity 800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2200ms;
}
/* home hero のブロブはカーテン退場後にフェードイン
 * (退場パネルがブロブ上を通過する縦エッジが 75% ラインで白チラつきに見えるため) */
[data-site="horizon-lab"].fx-ready.is-top .hl-hero canvas {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-hero canvas {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 800ms;
}

/* home のみ: header 入場。背景帯は常時表示 (消すと下のページ背景が白帯に見える) し、
 * 中身 (.hl-container = ロゴ+ナビ) だけを遅らせて出す */
[data-site="horizon-lab"].fx-ready.is-top .hl-header .hl-container {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-header .hl-container {
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms;
}

/* 下層タイトル帯: バー伸長 + 文字 stagger (実測: 600ms bezier(.25,.1,.25,1))。
 * .hl-ttl-enter で白帯タイトル (Work 一覧) にも同じ入場を適用 */
[data-site="horizon-lab"].fx-ready .hl-pagehero .hl-ttl-hero::before,
[data-site="horizon-lab"].fx-ready .hl-ttl-enter .hl-ttl::before {
  transform: scaleY(0);
  transform-origin: top;
}
[data-site="horizon-lab"].fx-ready.is-load .hl-pagehero .hl-ttl-hero::before,
[data-site="horizon-lab"].fx-ready.is-load .hl-ttl-enter .hl-ttl::before {
  transform: scaleY(1);
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1) 600ms;
}
[data-site="horizon-lab"].fx-ready .hl-pagehero .hl-ttl-hero > *,
[data-site="horizon-lab"].fx-ready .hl-ttl-enter .hl-ttl > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
[data-site="horizon-lab"].fx-ready.is-load .hl-pagehero .hl-ttl-hero > *,
[data-site="horizon-lab"].fx-ready.is-load .hl-ttl-enter .hl-ttl > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms,
    transform 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) 200ms;
}
[data-site="horizon-lab"].fx-ready.is-load .hl-pagehero .hl-ttl-hero > *:nth-child(2),
[data-site="horizon-lab"].fx-ready.is-load .hl-ttl-enter .hl-ttl > *:nth-child(2) {
  transition-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-site="horizon-lab"].fx-ready,
  [data-site="horizon-lab"].fx-ready .hl-hero-tagline,
  [data-site="horizon-lab"].fx-ready .hl-header,
  [data-site="horizon-lab"].fx-ready .hl-hero canvas,
  [data-site="horizon-lab"].fx-ready .hl-pagehero .hl-ttl-hero::before,
  [data-site="horizon-lab"].fx-ready .hl-pagehero .hl-ttl-hero > *,
  [data-site="horizon-lab"].fx-ready .hl-ttl-enter .hl-ttl::before,
  [data-site="horizon-lab"].fx-ready .hl-ttl-enter .hl-ttl > * {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-mark-text,
  [data-site="horizon-lab"].fx-ready .hl-mark-text tspan,
  [data-site="horizon-lab"].fx-ready .hl-mark-box {
    fill: var(--site-ink);
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
    transition: none !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-mark-box {
    fill: var(--site-ink) !important;
    stroke-opacity: 0 !important;
  }
}

/* ============ ページ遷移カーテン (実フレーム計測で転記) ============
 * 参照挙動:
 *   入場 = ページは覆われた状態で始まり、load 時にパネルが width 100% のまま
 *          右へスライドアウト (tx 0→100% / 300ms ease-in-out) = 左→右リビール。
 *          width は 300ms 後に 0 へスナップ、カーテン全体は 500ms 後に 200ms fade out
 *   退場 = click 後 100ms でカーテン fade in、パネルは tx 即 0 のまま
 *          width 0→100% を 300ms = 左→右ワイプ。遷移は click から 500ms 後
 * JS 無効環境ではカーテン自体を出さない (fx-ready ゲート) */
[data-site="horizon-lab"] .hl-cover {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  display: none;
}
[data-site="horizon-lab"].fx-ready .hl-cover {
  display: block;
}
[data-site="horizon-lab"] .hl-cover-line {
  width: 100%;
  height: 100%;
  opacity: 1;
}
[data-site="horizon-lab"] .hl-cover-panel {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
/* 覆い状態 (入場前の初期値) */
[data-site="horizon-lab"] .hl-cover-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  /* will-change 必須: 無いと合成レイヤーが sub-pixel 位置 (25% 等の端数 x) で
     再サンプリングされ、塗り内の 1px 罫線が薄くにじむ (768px 幅で #efefef → #f6f6f6 に
     実測)。付けると .hl-lines li と同じ画素に同じ値で描かれる (全 viewport で pixel 一致) */
  will-change: transform;
  background: var(--site-bg);
}
/* 入場リビール (is-load): tx 0→100% 300ms、width は 300ms 後に 0、line は 500ms 後 fade */
[data-site="horizon-lab"].fx-ready.is-load .hl-cover-line {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms;
}
[data-site="horizon-lab"].fx-ready.is-load .hl-cover-panel::before {
  width: 0%;
  transform: translate3d(100%, 0, 0);
  /* width のスナップは transform (300ms) が確実に終わった後に (レースすると
     カラム右端に薄い縦帯が 1 フレーム残る — リロード時の白チラつきの原因) */
  transition:
    transform 300ms cubic-bezier(0.42, 0, 0.58, 1),
    width 0ms linear 500ms;
}
/* home はヒーロー演出 (無地→水平線) が開幕を担うため入場カーテンを出さない
 * (リロード時にパネル境界の縦線が見えるのを防ぐ)。退場ワイプは下の is-leaving が上書き */
[data-site="horizon-lab"].fx-ready.is-top .hl-cover-line {
  opacity: 0;
}
/* 退場ワイプ (is-leaving — is-load より後に定義して上書き):
 * line 100ms fade-in、パネルは tx 即 0・width 0→100% 300ms (100ms 遅れて開始) */
[data-site="horizon-lab"].fx-ready.is-leaving .hl-cover-line {
  opacity: 1;
  transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-site="horizon-lab"].fx-ready.is-leaving .hl-cover-panel::before {
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0ms linear,
    width 300ms cubic-bezier(0.42, 0, 0.58, 1) 100ms;
}
/* パネル境界は border で描かない (下層遷移時に「謎の縦線」と指摘 2026-08-31)。
 * 1px の border はレイアウトに残り、塗り (::before は padding box 基準) が 1px 内側に
 * 引っ込んでカーテン面に下のページが透ける (暗い縦線の正体)。
 * さらに各パネルは右隣へ 2px 食い込ませて sub-pixel の切れ目も物理的に塞ぐ
 * (同色ベタ同士なので重なりは見えない)。6 枚カラムワイプの動きは不変 */
/* カーテン面の薄い縦線 = サイト背景のカラム罫線 (.hl-lines: 1px #efefef、cols の
 * 0/25/50/75/100%) の再現 (ユーザー指示 2026-09-02「背景の薄い縦線はカーテンにも表示」)。
 * 線は border ではなく塗り (::before) の中に gradient で描く — 塗りの外に出る領域が無いので
 * 透けは再発しない。カラム 4 枚の左端 1px が 0/25/50/75% の罫線。100% の罫線は右 side が担う:
 * 右 side は cols 右端の 2px 左から始まるので、線は local x=1px (= cols 右端の内側 1px、
 * .hl-lines li:nth-child(5) の calc(100% - 1px) と同位置)。後続パネルが上に描画されるので
 * 全閉時も 2px 重なりの下に線が埋もれない */
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel::before {
  background: linear-gradient(to right, #efefef 0 1px, var(--site-bg) 1px);
}
[data-site="horizon-lab"] .hl-cover-side.is-right::before {
  background: linear-gradient(
    to right,
    var(--site-bg) 0 1px,
    #efefef 1px 2px,
    var(--site-bg) 2px
  );
}
[data-site="horizon-lab"] .hl-cover-side {
  /* cols (90% / 上限 1280px) の端まで必ず届く幅 + 2px 重ね。
     旧実装 (5% ↔ 1440px で切替) は 1422〜1439px で cols 端に届かず左右に縦帯が出た */
  width: calc(max(5%, 50% - 640px) + 2px);
}
[data-site="horizon-lab"] .hl-cover-side.is-left {
  left: 0;
}
[data-site="horizon-lab"] .hl-cover-side.is-right {
  /* viewport 右端の 1 device px が透けるのを防ぐため右へ 2px はみ出す (左端位置は不変):
     左端が端数 x (5% 等) に来ると合成レイヤーの右端が AA され、右端 1 列に下のページが
     50% 混ざる (430px@3x / 1425px@1x で実測 rgb 193)。fixed 要素なので横スクロールは生じない */
  right: -2px;
  width: calc(max(5%, 50% - 640px) + 4px);
}
[data-site="horizon-lab"] .hl-cover-cols {
  width: 90%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  position: relative;
}
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel {
  width: calc(25% + 2px);
}
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel:nth-child(1) { left: 0; }
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel:nth-child(2) { left: 25%; }
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel:nth-child(3) { left: 50%; }
[data-site="horizon-lab"] .hl-cover-cols .hl-cover-panel:nth-child(4) { left: 75%; }
@media (prefers-reduced-motion: reduce) {
  [data-site="horizon-lab"] .hl-cover {
    display: none;
  }
}

/* ============ scroll reveal (実測 CSS の転記) ============ */

[data-site="horizon-lab"].fx-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition:
    transform 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95),
    opacity 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-site="horizon-lab"].fx-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* 時差 reveal: data-reveal="2/3/4" は 120ms 刻みで遅れて表示
 * (見出し → 本文 → リンクの順に現れる。同時表示の平板さ対策) */
[data-site="horizon-lab"].fx-ready [data-reveal="2"] {
  transition-delay: 120ms;
}
[data-site="horizon-lab"].fx-ready [data-reveal="3"] {
  transition-delay: 240ms;
}
[data-site="horizon-lab"].fx-ready [data-reveal="4"] {
  transition-delay: 360ms;
}

/* リスト stagger (実測: 600ms translateY(3rem)) — 親 [data-reveal-list] 配下の子 */
[data-site="horizon-lab"].fx-ready [data-reveal-list] > * {
  opacity: 0;
  transform: translate3d(0, 39px, 0);
  transition:
    transform 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95),
    opacity 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-site="horizon-lab"].fx-ready [data-reveal-list].is-revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-site="horizon-lab"].fx-ready [data-reveal-list].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-site="horizon-lab"].fx-ready [data-reveal-list].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-site="horizon-lab"].fx-ready [data-reveal-list].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-site="horizon-lab"].fx-ready [data-reveal-list].is-revealed > *:nth-child(n + 5) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  [data-site="horizon-lab"].fx-ready [data-reveal],
  [data-site="horizon-lab"].fx-ready [data-reveal-list] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ work card ============ */

[data-site="horizon-lab"] .hl-work-grid {
  display: flex;
  flex-wrap: wrap;
}
[data-site="horizon-lab"] .hl-work-card {
  width: 100%;
  margin: 0 0 40px;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-work-grid {
    margin-inline: -17px;
  }
  [data-site="horizon-lab"] .hl-work-card {
    width: calc(25% - 34px);
    margin: 0 17px 40px;
  }
}
[data-site="horizon-lab"] .hl-work-card a {
  color: var(--site-ink);
  text-decoration: none;
}
[data-site="horizon-lab"] .hl-work-card figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 15px;
  overflow: hidden;
  background: #f3f2f0;
}
[data-site="horizon-lab"] .hl-work-card figure img,
[data-site="horizon-lab"] .hl-work-card figure > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-site="horizon-lab"] .hl-work-name {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--site-ink);
}
[data-site="horizon-lab"] .hl-work-title {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
[data-site="horizon-lab"] .hl-work-tags {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--site-ink);
}

/* ============ What we do card ============ */

[data-site="horizon-lab"] .hl-wwd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-wwd-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
}
[data-site="horizon-lab"] .hl-wwd-card {
  color: var(--site-ink);
  text-decoration: none;
  display: block;
}
[data-site="horizon-lab"] .hl-wwd-fig {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #efefef;
}
[data-site="horizon-lab"] .hl-wwd-num {
  position: absolute;
  left: 14px;
  top: 2px;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}
[data-site="horizon-lab"] .hl-wwd-en {
  margin-top: 20px;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 15.6px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}
[data-site="horizon-lab"] .hl-wwd-ja {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--site-muted);
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-wwd-ja {
    font-size: 13px;
  }
}

/* ============ split (50/50 交互) ============ */

[data-site="horizon-lab"] .hl-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 961px) {
  [data-site="horizon-lab"] .hl-split {
    grid-template-columns: 1fr 1fr;
    gap: 52px;
  }
  [data-site="horizon-lab"] .hl-split.is-flip > *:first-child {
    order: 2;
  }
}

/* Strength ブロック (実測: ラベル黒帯 / 見出し 20.8 w600 ls.06 lh1.7) */
[data-site="horizon-lab"] .hl-st-label {
  display: inline-block;
  padding: 3px 12px;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--site-ink);
}
[data-site="horizon-lab"] .hl-st-ttl {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-st-ttl {
    font-size: 20.8px;
  }
}

/* ============ 定義テーブル (会社概要 実測) ============ */

[data-site="horizon-lab"] .hl-tbl {
  width: 100%;
  border-collapse: collapse;
}
[data-site="horizon-lab"] .hl-tbl th {
  width: 128px;
  padding: 16px;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
  background: var(--site-table-gray);
  border-bottom: 2px solid #fff;
  line-height: 2;
}
[data-site="horizon-lab"] .hl-tbl td {
  padding: 16px 0 16px 20px;
  font-size: 12px;
  vertical-align: baseline;
  border-bottom: 2px solid var(--site-table-gray);
  white-space: pre-line;
  line-height: 2;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-tbl th {
    width: 160px;
    padding: 19.5px;
    font-size: 13px;
  }
  [data-site="horizon-lab"] .hl-tbl td {
    padding: 19.5px 0 19.5px 26px;
    font-size: 13px;
  }
}

/* ============ 下層タイトル帯 + breadcrumb ============ */

[data-site="horizon-lab"] .hl-pagehero {
  position: relative;
  display: flex;
  align-items: center;
  height: 220px;
  overflow: hidden;
  background: #161616;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-pagehero {
    height: 430px;
  }
}
[data-site="horizon-lab"] .hl-breadcrumb {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-size: 11.7px;
  letter-spacing: 0.06em;
  color: var(--site-muted);
  padding-block: 12px;
}
[data-site="horizon-lab"] .hl-breadcrumb a {
  color: var(--site-muted);
  text-decoration: none;
}
[data-site="horizon-lab"] .hl-breadcrumb a:hover {
  text-decoration: underline;
}

/* ============ footer (bg #000, 実測レイアウト) ============ */

[data-site="horizon-lab"] .hl-footer {
  background: #000;
  color: #fff;
}
[data-site="horizon-lab"] .hl-footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 52px 0 60px;
}
@media (min-width: 961px) {
  [data-site="horizon-lab"] .hl-footer-main {
    grid-template-columns: 390px 1fr;
    gap: 0;
    padding: 52px 0 78px;
  }
}
[data-site="horizon-lab"] .hl-footer-addr {
  margin-top: 20px;
  font-size: 12px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-footer-addr {
    font-size: 13px;
  }
}
[data-site="horizon-lab"] .hl-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (min-width: 961px) {
  [data-site="horizon-lab"] .hl-footer-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
[data-site="horizon-lab"] .hl-footer-cols h3 {
  font-family: var(--font-hl-en), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-site="horizon-lab"] .hl-footer-cols ul {
  margin-top: 14px;
}
[data-site="horizon-lab"] .hl-footer-cols li {
  line-height: 2.6;
}
[data-site="horizon-lab"] .hl-footer-cols a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-footer-cols a {
    font-size: 13px;
  }
}
[data-site="horizon-lab"] .hl-footer-cols a:hover {
  color: #fff;
}
[data-site="horizon-lab"] .hl-footer-copy {
  padding: 13px 0;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

/* ============ contact 帯 / フォーム ============ */

[data-site="horizon-lab"] .hl-contact-band-ttl {
  font-family: var(--font-hl-en), sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-contact-band-ttl {
    font-size: 41.6px;
  }
}

/* 標準 ContactForm を実測スタイルに寄せる (要素セレクタで上書き) */
[data-site="horizon-lab"] .hl-form input[type="text"],
[data-site="horizon-lab"] .hl-form input[type="email"],
[data-site="horizon-lab"] .hl-form input[type="tel"] {
  width: 100%;
  height: 36.4px;
  padding: 0 13px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 0;
}
[data-site="horizon-lab"] .hl-form textarea {
  width: 100%;
  min-height: 260px;
  padding: 13px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 0;
}
[data-site="horizon-lab"] .hl-form label,
[data-site="horizon-lab"] .hl-form p {
  font-size: 13px;
}
[data-site="horizon-lab"] .hl-form button[type="submit"] {
  display: block;
  margin-inline: auto;
  min-width: 280px;
  padding: 19.5px 40px;
  font-size: 15.6px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--site-accent);
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-form button[type="submit"] {
    min-width: 460px;
  }
}
[data-site="horizon-lab"] .hl-form button[type="submit"]:hover {
  opacity: 0.85;
}

/* ============ news ============ */

[data-site="horizon-lab"] .hl-news-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--site-line);
}
[data-site="horizon-lab"] .hl-news-date {
  font-family: var(--font-hl-en), sans-serif;
  font-size: 12px;
  color: var(--site-muted);
  letter-spacing: 0.06em;
}
[data-site="horizon-lab"] .hl-news-cat {
  display: inline-block;
  padding: 1px 10px;
  font-size: 10.5px;
  line-height: 1.8;
  border: 1px solid var(--site-ink);
}

/* ============ hero (home) ============ */

[data-site="horizon-lab"] .hl-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
[data-site="horizon-lab"] .hl-hero-tagline {
  margin-top: 24px;
  font-size: 14.25px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-hero-tagline {
    font-size: 20.16px;
  }
}
/* 折り返し (Chrome 系のみ auto-phrase) */
[data-site="horizon-lab"] h1,
[data-site="horizon-lab"] h2,
[data-site="horizon-lab"] h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ============ Horizon Lab identity / home hero ============
 * 生成AIの定番表現（gradient blob / particle cloud）を避け、一本の入力線が
 * 3領域へ展開するnetwork diagramで「可能性を事業へ変える」を可視化する。 */
[data-site="horizon-lab"] {
  --hl-electric: #075cff;
  --hl-trust: #1e6fd9; /* CTA hover の信頼ブルー */
  --hl-coral: #ff715b;
  --hl-cyan: #21c4c7;
  --hl-violet: #765cf6;
  --hl-hero-bg: #f8f7f3;
}

/* 旧shinjoのorganic blobに代わるHorizon固有の差し色system。
 * 分光・干渉をモチーフに TOP About us (prism) を原型として Company Philosophy (cool) /
 * Service (warm) で反復し、配置ごとに配色を少し変える。
 * 3 円盤の色は RGB 三つ組の変数で持ち、variant が上書きする。 */
[data-site="horizon-lab"] .hl-spectrum-field {
  --sp-1: 255, 113, 91; /* 珊瑚 */
  --sp-2: 33, 196, 199; /* シアン */
  --sp-3: 118, 92, 246; /* 紫 */
  --sp-focus: var(--hl-violet);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
  opacity: 0.82;
}
[data-site="horizon-lab"] .hl-spectrum-disc,
[data-site="horizon-lab"] .hl-spectrum-ring,
[data-site="horizon-lab"] .hl-spectrum-axis,
[data-site="horizon-lab"] .hl-spectrum-focus {
  position: absolute;
  display: block;
}
[data-site="horizon-lab"] .hl-spectrum-disc {
  border-radius: 9999px;
  filter: blur(16px);
  mix-blend-mode: multiply;
  will-change: transform;
}
[data-site="horizon-lab"] .hl-spectrum-disc.is-coral {
  top: 13%;
  left: 6%;
  width: 54%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 38%, rgba(var(--sp-1), 0.78), rgba(var(--sp-1), 0.16) 57%, transparent 73%);
  animation: hl-spectrum-drift-a 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
[data-site="horizon-lab"] .hl-spectrum-disc.is-cyan {
  top: 17%;
  right: 4%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 56% 40%, rgba(var(--sp-2), 0.76), rgba(var(--sp-2), 0.15) 56%, transparent 73%);
  animation: hl-spectrum-drift-b 8.5s cubic-bezier(0.45, 0, 0.55, 1) -2s infinite alternate;
}
[data-site="horizon-lab"] .hl-spectrum-disc.is-violet {
  right: 20%;
  bottom: 7%;
  width: 53%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 48% 54%, rgba(var(--sp-3), 0.76), rgba(var(--sp-3), 0.16) 58%, transparent 74%);
  animation: hl-spectrum-drift-c 7.5s cubic-bezier(0.45, 0, 0.55, 1) -4s infinite alternate;
}
[data-site="horizon-lab"] .hl-spectrum-ring {
  border: 1px solid rgba(24, 30, 36, 0.2);
  border-radius: 9999px;
}
[data-site="horizon-lab"] .hl-spectrum-ring.is-outer {
  inset: 8%;
  border-style: dashed;
  animation: hl-spectrum-spin 48s linear infinite;
}
[data-site="horizon-lab"] .hl-spectrum-ring.is-inner {
  inset: 28%;
  border-color: rgba(255, 255, 255, 0.72);
  animation: hl-spectrum-breathe 7s ease-in-out infinite alternate;
  box-shadow:
    0 0 24px rgba(var(--sp-2), 0.2),
    inset 0 0 20px rgba(var(--sp-3), 0.13);
}
[data-site="horizon-lab"] .hl-spectrum-axis {
  top: 50%;
  right: 2%;
  left: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24, 30, 36, 0.28) 34%, rgba(24, 30, 36, 0.28) 66%, transparent);
}
[data-site="horizon-lab"] .hl-spectrum-focus {
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--sp-focus);
  animation: hl-spectrum-pulse 3.6s ease-in-out infinite;
  box-shadow:
    0 0 0 8px rgba(var(--sp-3), 0.1),
    0 0 28px rgba(var(--sp-3), 0.42);
}
/* cool (Company Philosophy): 珊瑚 → 湖青、焦点はシアン。配置も入れ替える */
[data-site="horizon-lab"] .hl-spectrum-field.is-cool {
  --sp-1: 31, 111, 158; /* 湖青 */
  --sp-focus: var(--hl-cyan);
}
[data-site="horizon-lab"] .hl-spectrum-field.is-cool .hl-spectrum-disc.is-coral {
  top: 49%;
  left: 35%;
  opacity: 0.54;
}
[data-site="horizon-lab"] .hl-spectrum-field.is-cool .hl-spectrum-disc.is-cyan {
  top: 7%;
  right: 17%;
}
[data-site="horizon-lab"] .hl-spectrum-field.is-cool .hl-spectrum-disc.is-violet {
  right: 36%;
  bottom: 16%;
}
/* warm (Service): シアン → 菜の花、焦点は珊瑚 */
[data-site="horizon-lab"] .hl-spectrum-field.is-warm {
  --sp-2: 230, 195, 63; /* 菜の花 */
  --sp-focus: var(--hl-coral);
}
[data-site="horizon-lab"] .hl-spectrum-field.is-warm .hl-spectrum-disc.is-coral {
  top: 9%;
  left: 18%;
}
[data-site="horizon-lab"] .hl-spectrum-field.is-warm .hl-spectrum-disc.is-cyan {
  top: 30%;
  right: 2%;
}
[data-site="horizon-lab"] .hl-spectrum-field.is-warm .hl-spectrum-disc.is-violet {
  right: 30%;
  bottom: 4%;
  opacity: 0.6;
}

@keyframes hl-spectrum-drift-a {
  to { transform: translate3d(20%, 14%, 0) scale(1.16); }
}
@keyframes hl-spectrum-drift-b {
  to { transform: translate3d(-18%, 20%, 0) scale(0.88); }
}
@keyframes hl-spectrum-drift-c {
  to { transform: translate3d(-14%, -18%, 0) scale(1.14); }
}
@keyframes hl-spectrum-spin {
  to { transform: rotate(360deg); }
}
@keyframes hl-spectrum-breathe {
  to { transform: scale(1.06); }
}
@keyframes hl-spectrum-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 8px rgba(var(--sp-3), 0.1),
      0 0 28px rgba(var(--sp-3), 0.42);
  }
  50% {
    transform: scale(1.3);
    box-shadow:
      0 0 0 13px rgba(var(--sp-3), 0.16),
      0 0 40px rgba(var(--sp-3), 0.6);
  }
}

/* TOP Contact: 縦バー付き見出し (m より小さめ) + 白箱内の全幅黒ボタン */
[data-site="horizon-lab"] .hl-contact-ttl::before {
  top: 2px;
  bottom: 2px;
  width: 4px;
}
[data-site="horizon-lab"] .hl-contact-ttl .hl-ttl-en {
  font-size: 20px;
  margin-bottom: 6px;
}
[data-site="horizon-lab"] .hl-contact-ttl .hl-ttl-ja {
  font-size: 11px;
  line-height: 1;
}
@media (min-width: 681px) {
  [data-site="horizon-lab"] .hl-contact-ttl .hl-ttl-en {
    font-size: 24px;
  }
}
[data-site="horizon-lab"] .hl-contact-cta {
  background: #111;
  transition: background-color 220ms ease;
}
[data-site="horizon-lab"] .hl-contact-cta:hover {
  background: var(--hl-trust);
}

[data-site="horizon-lab"] .hl-header-lab {
  background: rgba(248, 247, 243, 0.88);
  border-bottom-color: transparent;
  backdrop-filter: blur(14px);
}
[data-site="horizon-lab"] .hl-lab-wordmark {
  display: inline-block;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--site-ink);
}
[data-site="horizon-lab"] .hl-lab-logo {
  display: block;
  width: auto;
  height: 24px;
}
[data-site="horizon-lab"] .hl-footer-logo {
  display: block;
  width: auto;
  height: 22px;
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav a {
  margin-inline: 5px;
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
/* 現在ページはテキスト左に黒丸 (Contact ピルは塗りがあるため出さない) */
[data-site="horizon-lab"] .hl-header-lab .hl-nav a.is-current::before {
  left: 2px;
  width: 4px;
  height: 4px;
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav .hl-lab-contact.is-current::before {
  display: none;
}
/* hover 下線 (既存の「左から伸びて右へ抜ける」) を lab の余白・hover 色に合わせて継承。
 * Contact ピルは塗り hover のため下線なし */
[data-site="horizon-lab"] .hl-header-lab .hl-nav a::after {
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1.5px;
  background: var(--hl-electric);
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav .hl-lab-contact::after {
  display: none;
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav a:not(.hl-lab-contact) {
  transition: color 180ms ease;
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav a:not(.hl-lab-contact):hover {
  color: var(--hl-electric);
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav .hl-lab-contact {
  margin-left: 14px;
  padding: 11px 25px;
  border: 1px solid var(--site-ink);
  border-radius: 7px;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}
[data-site="horizon-lab"] .hl-header-lab .hl-nav .hl-lab-contact:hover {
  color: #fff;
  background: var(--site-ink);
  border-color: var(--site-ink);
}

[data-site="horizon-lab"] .hl-hero {
  min-height: min(610px, calc(100svh - 88px));
  isolation: isolate;
  background: var(--hl-hero-bg);
}
/* 背景の淡い radial は静的背景でなく擬似要素に分離し、開幕の無地を守って
 * network 展開期 (grid と同じ 3100ms) で浮かせる */
[data-site="horizon-lab"] .hl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 43%, rgba(36, 48, 58, 0.03), transparent 29%);
  pointer-events: none;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-hero::before {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-hero::before {
  opacity: 1;
  transition: opacity 1300ms ease 6400ms;
}
[data-site="horizon-lab"] .hl-horizon-container {
  z-index: 2;
  width: 100%;
}
/* copy は hero と同じ高さの相対ボックス。メッセージ群 (ワードマーク + h1) の下端を network の
 * 水平線 (hero top 60%) の 40px 上に揃えて絶対配置し、線が copy を横切らないようにする
 * (2026-09-02 再設計。CTA は撤去、% は copy の実高に解決される) */
[data-site="horizon-lab"] .hl-horizon-copy {
  position: relative;
  width: min(60%, 760px);
  min-height: min(610px, calc(100svh - 88px));
}
[data-site="horizon-lab"] .hl-horizon-message {
  position: absolute;
  inset: auto 0 calc(40% + 40px) 0;
}
[data-site="horizon-lab"] .hl-horizon-brand {
  width: min(100%, 350px);
  margin-bottom: 26px;
}
[data-site="horizon-lab"] .hl-horizon-brand .hl-mark-svg {
  width: 100%;
}
[data-site="horizon-lab"] .hl-horizon-brand .hl-mark-text {
  font-size: 58px;
  letter-spacing: -0.025em;
  transform: translateY(7px);
}
/* 旧shinjoの枠＋glyph strokeを復帰。水平線 (trunk) が走り切って
 * 0.4秒の間を置いた3.0秒から、枠→文字をstagger描画する。 */
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-brand {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand {
  opacity: 1;
  transition: opacity 200ms linear 3000ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text {
  fill: var(--site-ink);
  transition: fill 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 4900ms;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-brand .hl-mark-text tspan {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan {
  opacity: 1;
  stroke-dashoffset: 0;
  transition:
    opacity 120ms linear 3200ms,
    stroke-dashoffset 2900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 3200ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(2) { transition-delay: 3320ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(3) { transition-delay: 3440ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(4) { transition-delay: 3560ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(5) { transition-delay: 3680ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(6) { transition-delay: 3800ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(7) { transition-delay: 3920ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(8) { transition-delay: 4040ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(9) { transition-delay: 4160ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(10) { transition-delay: 4280ms; }
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-text tspan:nth-child(11) { transition-delay: 4400ms; }
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-brand .hl-mark-box {
  fill: transparent;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-box {
  stroke-dashoffset: 0;
  fill: var(--site-ink);
  stroke-opacity: 0;
  transition: fill 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 4900ms;
}
[data-site="horizon-lab"] .hl-horizon-brand .hl-mark-box-trace {
  fill: none;
  stroke: var(--site-ink);
  stroke-width: 0.7;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-brand .hl-mark-box-trace {
  stroke-dashoffset: 0;
  opacity: 0;
  transition:
    stroke-dashoffset 2500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 3100ms,
    opacity 400ms linear 6100ms;
}
/* h1 = 紹介文のステートメント (2026-09-02 メインコピー撤去)。hero の主役として 24px/600。
 * 2 行目 25 字 (≈ 612px) が 1200px 未満で copy 幅を超えるため clamp で 20px まで落とす */
[data-site="horizon-lab"] .hl-horizon-title {
  max-width: 640px;
  margin: 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #2b2b2b;
}
[data-site="horizon-lab"] .hl-horizon-title-line {
  display: block;
}
[data-site="horizon-lab"] .hl-horizon-guides {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
[data-site="horizon-lab"] .hl-horizon-guides ul {
  position: relative;
  width: 90%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
}
[data-site="horizon-lab"] .hl-horizon-guides li {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(125, 135, 149, 0.34) 0 2px,
    transparent 2px 7px
  );
}
[data-site="horizon-lab"] .hl-horizon-guides li:nth-child(1) { left: 0; }
[data-site="horizon-lab"] .hl-horizon-guides li:nth-child(2) { left: 25%; }
[data-site="horizon-lab"] .hl-horizon-guides li:nth-child(3) { left: 50%; }
[data-site="horizon-lab"] .hl-horizon-guides li:nth-child(4) { left: 75%; }
[data-site="horizon-lab"] .hl-horizon-guides li:nth-child(5) { left: calc(100% - 1px); }
[data-site="horizon-lab"] .hl-horizon-visual {
  position: absolute;
  z-index: 1;
  top: 60%;
  right: max(32px, calc((100vw - 1440px) / 2));
  width: min(52vw, 820px);
  transform: translateY(-50%);
  pointer-events: none;
}
[data-site="horizon-lab"] .hl-horizon-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 20.8%;
  width: min(37vw, 460px);
  aspect-ratio: 1;
  border-radius: 9999px;
  background:
    radial-gradient(circle at 34% 38%, rgba(255, 113, 91, 0.24), transparent 34%),
    radial-gradient(circle at 68% 40%, rgba(33, 196, 199, 0.22), transparent 35%),
    radial-gradient(circle at 50% 72%, rgba(118, 92, 246, 0.22), transparent 42%);
  filter: blur(9px);
  transform: translate(-50%, -50%);
  animation: hl-origin-breathe 6s ease-in-out infinite;
}
[data-site="horizon-lab"] .hl-horizon-network {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
[data-site="horizon-lab"] .hl-network-grid line {
  stroke: #aeb8c7;
  stroke-width: 0.65;
  stroke-dasharray: 2 5;
  opacity: 0.48;
  vector-effect: non-scaling-stroke;
}
[data-site="horizon-lab"] .hl-network-datum {
  opacity: 0.35;
  animation: hl-datum-pulse 3.6s ease-in-out infinite;
}
[data-site="horizon-lab"] .hl-network-datum:nth-of-type(3n + 1) { fill: var(--hl-coral); }
[data-site="horizon-lab"] .hl-network-datum:nth-of-type(3n + 2) { fill: var(--hl-cyan); }
[data-site="horizon-lab"] .hl-network-datum:nth-of-type(3n) { fill: var(--hl-violet); }
[data-site="horizon-lab"] .hl-network-crosses path {
  fill: none;
  stroke: #7d8795;
  stroke-width: 0.7;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
[data-site="horizon-lab"] .hl-network-spectrum {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.32;
  filter: blur(5px);
  mix-blend-mode: multiply;
  vector-effect: non-scaling-stroke;
}
[data-site="horizon-lab"] .hl-network-line {
  fill: none;
  stroke: rgba(18, 22, 27, 0.84);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* gap を path 長より長く (1 2) — gap 1 だと丸め誤差で draw 前/中に
   * 終点側へ次の dash の線片が漏れる。静止時の始点 dot は opacity で隠す */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
/* 水平線は単色でなく「奥へ消える」グラデーション (SVG defs) */
[data-site="horizon-lab"] .hl-network-trunk {
  stroke: url(#hl-network-horizon-ink);
}
[data-site="horizon-lab"] .hl-network-packet {
  opacity: 0;
}
[data-site="horizon-lab"] .hl-network-packet.is-business {
  fill: var(--hl-coral);
  filter: drop-shadow(0 0 6px rgba(255, 113, 91, 0.75));
}
[data-site="horizon-lab"] .hl-network-packet.is-digital {
  fill: var(--hl-cyan);
  filter: drop-shadow(0 0 6px rgba(33, 196, 199, 0.75));
}
[data-site="horizon-lab"] .hl-network-packet.is-creative {
  fill: var(--hl-violet);
  filter: drop-shadow(0 0 6px rgba(118, 92, 246, 0.75));
}
[data-site="horizon-lab"] .hl-network-motion-paths {
  fill: none;
  stroke: none;
}
[data-site="horizon-lab"] .hl-network-nodes {
  opacity: 0;
}
[data-site="horizon-lab"] .hl-network-origin { fill: var(--hl-violet); }
[data-site="horizon-lab"] .hl-network-nodes .is-business { fill: var(--hl-coral); }
[data-site="horizon-lab"] .hl-network-nodes .is-digital { fill: var(--hl-cyan); }
[data-site="horizon-lab"] .hl-network-nodes .is-creative { fill: var(--hl-violet); }
[data-site="horizon-lab"] .hl-network-origin-ring {
  fill: none;
  stroke: var(--hl-violet);
  stroke-width: 1;
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center;
  animation: hl-node-scan 2.8s ease-out infinite;
}
[data-site="horizon-lab"] .hl-network-labels {
  fill: #1b1b1b;
  font-family: var(--font-hl-en), sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0;
}

/* load sequence — 2幕構成。線は貫通する水平線 (trunk) 1本のみ:
 * Act1: 0–0.9s 無地 / 1.0–2.6s 水平線が速く貫通 / 2.6–3.0s 間 /
 *       3.0–6.1s ロゴがゆっくり組み上がる (trace→stroke→塗り) — ここまでワンセット
 * Act2: 6.2s– ゆったり分岐 (1.1s) + spectra・grid / 6.5s– タイトル・リード・ボタン (1.4s) /
 *       9.2s– data packet */
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-guides,
[data-site="horizon-lab"].fx-ready.is-top .hl-network-grid,
[data-site="horizon-lab"].fx-ready.is-top .hl-network-crosses {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-guides,
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-grid,
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-crosses {
  opacity: 1;
  transition: opacity 1100ms ease 6400ms;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-visual::before {
  opacity: 0;
  animation: none;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-visual::before {
  animation: hl-origin-emerge-breathe 6s ease-in-out 6200ms infinite both;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-network-spectrum {
  opacity: 0;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-spectrum {
  opacity: 0.32;
  transition: opacity 1300ms ease 6300ms;
}
[data-site="horizon-lab"].fx-ready.is-top .hl-horizon-title-line {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 36%, 0);
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-title-line {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1) 6500ms,
    clip-path 1400ms cubic-bezier(0.22, 1, 0.36, 1) 6500ms,
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) 6500ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-horizon-title-line:nth-child(2) {
  transition-delay: 6650ms;
}
/* home はヒーローの紹介文 2 行目 (6.65s + 1.4s) が出揃う頃にヘッダーの中身が出現 (旧 CTA の 7.2s を継承) */
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-header-lab .hl-container {
  opacity: 1;
  transition: opacity 900ms ease 7200ms;
}
/* Act1 の水平線ヒューン。in-out easing の助走 (画面外の -800〜0 区間) を経て
 * 左端から入り、分岐点を越えて奥 (右端の先) へ抜けていく */
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-trunk {
  animation: hl-network-draw 1600ms cubic-bezier(0.65, 0, 0.35, 1) 1000ms forwards;
}
/* Act2: ロゴ完成を受けてゆったり分岐 */
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-branch {
  animation: hl-network-draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 6200ms forwards;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-branch-c {
  animation-delay: 6350ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-nodes,
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-labels {
  opacity: 1;
  transition: opacity 700ms ease 7300ms;
}
[data-site="horizon-lab"].fx-ready.is-load.is-top .hl-network-packet {
  opacity: 1;
  transition: opacity 220ms ease 9200ms;
}

@keyframes hl-network-draw {
  from { opacity: 1; }
  to { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes hl-datum-pulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.58; }
}
@keyframes hl-node-scan {
  0% { opacity: 0.55; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes hl-origin-breathe {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.86); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes hl-origin-emerge-breathe {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  16%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.86); }
  58% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.08); }
}

@media (max-width: 1100px) {
  [data-site="horizon-lab"] .hl-horizon-visual {
    right: -4vw;
    width: 64vw;
    opacity: 0.88;
  }
}

@media (max-width: 960px) {
  [data-site="horizon-lab"] .hl-header-lab {
    background: rgba(248, 247, 243, 0.94);
  }
  [data-site="horizon-lab"] .hl-lab-wordmark {
    font-size: 17px;
  }
  [data-site="horizon-lab"] .hl-lab-logo {
    height: 21px;
  }
  [data-site="horizon-lab"] .hl-hero,
  [data-site="horizon-lab"] .hl-horizon-container {
    min-height: max(690px, calc(100svh - 68px));
  }
  /* network は下部 (guides 360px 帯) に移るので、copy は通常フローで上詰め。線は copy を横切らない */
  [data-site="horizon-lab"] .hl-horizon-copy {
    width: 100%;
    min-height: 0;
    padding-top: 54px;
    padding-bottom: 360px;
  }
  [data-site="horizon-lab"] .hl-horizon-message {
    position: static;
  }
  [data-site="horizon-lab"] .hl-horizon-brand {
    width: min(100%, 310px);
    margin-bottom: 22px;
  }
  [data-site="horizon-lab"] .hl-horizon-title {
    max-width: 680px;
    font-size: 22px;
  }
  [data-site="horizon-lab"] .hl-horizon-guides {
    inset: auto 0 0;
    height: 360px;
  }
  [data-site="horizon-lab"] .hl-horizon-visual {
    top: auto;
    right: -12%;
    bottom: 4px;
    width: 92%;
    transform: none;
    opacity: 0.9;
  }
}

@media (max-width: 680px) {
  [data-site="horizon-lab"] .hl-hero,
  [data-site="horizon-lab"] .hl-horizon-container {
    min-height: max(730px, calc(100svh - 68px));
  }
  [data-site="horizon-lab"] .hl-horizon-copy {
    padding-top: 42px;
    padding-bottom: 326px;
  }
  [data-site="horizon-lab"] .hl-horizon-brand {
    width: 240px;
    margin-bottom: 18px;
  }
  [data-site="horizon-lab"] .hl-horizon-brand .hl-mark-text {
    font-size: 58px;
  }
  /* 1 行目 18 字が 390px (内容幅 342) に収まる上限 = 18px。2 行目 25 字は折り返して計 3 行 */
  [data-site="horizon-lab"] .hl-horizon-title {
    font-size: clamp(18px, 4.6vw, 20px);
    line-height: 1.7;
  }
  [data-site="horizon-lab"] .hl-horizon-visual {
    right: -37%;
    bottom: 12px;
    width: 145%;
  }
  [data-site="horizon-lab"] .hl-network-labels {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-site="horizon-lab"].fx-ready .hl-horizon-guides,
  [data-site="horizon-lab"].fx-ready .hl-network-grid,
  [data-site="horizon-lab"].fx-ready .hl-network-crosses {
    opacity: 1 !important;
    transition: none !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-network-spectrum {
    opacity: 0.32 !important;
    transition: none !important;
  }
  [data-site="horizon-lab"] .hl-spectrum-disc,
  [data-site="horizon-lab"] .hl-spectrum-ring,
  [data-site="horizon-lab"] .hl-spectrum-focus,
  [data-site="horizon-lab"] .hl-network-datum,
  [data-site="horizon-lab"] .hl-network-origin-ring,
  [data-site="horizon-lab"] .hl-horizon-visual::before {
    animation: none !important;
  }
  [data-site="horizon-lab"] .hl-network-packet {
    display: none;
  }
  [data-site="horizon-lab"].fx-ready .hl-horizon-visual::before {
    opacity: 0.45 !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-horizon-title,
  [data-site="horizon-lab"].fx-ready .hl-horizon-title-line,
  [data-site="horizon-lab"].fx-ready .hl-horizon-brand,
  [data-site="horizon-lab"].fx-ready .hl-network-nodes,
  [data-site="horizon-lab"].fx-ready .hl-network-labels {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-horizon-brand .hl-mark-text {
    transform: translateY(7px) !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-horizon-brand .hl-mark-text tspan {
    opacity: 1 !important;
  }
  [data-site="horizon-lab"] .hl-mark-box-trace {
    display: none;
  }
  [data-site="horizon-lab"].fx-ready .hl-network-line {
    stroke-dashoffset: 0 !important;
    animation: none !important;
    opacity: 1 !important;
  }
  [data-site="horizon-lab"].fx-ready .hl-hero::before {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============ mobile メニュー (≤960px、参照 holyday 390px 実測転記 2026-08-22) ============
 * 参照: #MenuBtn (fixed, padding 1.8rem 5vw, ul 2rem×1.2rem, li 1px 黒 / 中線 gray)
 *       #SpRecruit (fixed, 1rem, border rgba(0,0,0,.7), radius 3rem, pad .4rem 1rem, right 16vw, top 1.5rem)
 *       #SpNav (fixed 全画面, opacity+visibility 300ms bezier(.455,.03,.515,.955))
 *         .spnav_bgline li ×4 (白, left 0/25/50/75%, width 0→25% 300ms, border-left #f9f9f9)
 *         .sub_canvas (bottom 0, height 80%, opacity 0→.7 300ms delay 200ms)
 *         .p (opacity 0 / translate -2rem → 0, 300ms bezier(.25,.1,.25,1), delay 30ms × n)
 * rem は参照 12px (≤680) 基準で px 化 */
[data-site="horizon-lab"] .hl-sp-recruit,
[data-site="horizon-lab"] .hl-sp-btn,
[data-site="horizon-lab"] .hl-spnav {
  display: none;
}
@media (max-width: 960px) {
  [data-site="horizon-lab"] .hl-sp-recruit {
    position: fixed;
    display: block;
    z-index: 99999;
    top: 20px;
    right: 16vw;
    padding: 5px 12px;
    font-family: var(--font-hl-en), sans-serif;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.06em;
    font-weight: 400;
    color: var(--site-ink);
    border: 1px solid rgba(0, 0, 0, 0.7);
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.5);
    text-decoration: none;
  }
  [data-site="horizon-lab"] .hl-sp-btn {
    position: fixed;
    display: block;
    z-index: 99999;
    top: 0;
    right: 0;
    padding: 22px 5vw;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  [data-site="horizon-lab"] .hl-sp-btn-lines {
    position: relative;
    display: block;
    width: 24px;
    height: 14px;
  }
  [data-site="horizon-lab"] .hl-sp-btn-lines i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--site-ink);
    transition:
      transform 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
      top 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 400ms,
      opacity 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  [data-site="horizon-lab"] .hl-sp-btn-lines i:nth-child(1) { top: 0; }
  [data-site="horizon-lab"] .hl-sp-btn-lines i:nth-child(2) { top: 50%; background: gray; }
  [data-site="horizon-lab"] .hl-sp-btn-lines i:nth-child(3) { top: 100%; }
  /* open: まず top が中央へ寄り (300ms)、その後 300ms 遅れて回転して X */
  [data-site="horizon-lab"] .hl-sp-btn.is-active .hl-sp-btn-lines i {
    transition:
      transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 300ms,
      top 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
      opacity 0ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 300ms,
      background-color 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  [data-site="horizon-lab"] .hl-sp-btn.is-active .hl-sp-btn-lines i:nth-child(1) {
    top: 50%;
    transform: rotate(-45deg);
  }
  [data-site="horizon-lab"] .hl-sp-btn.is-active .hl-sp-btn-lines i:nth-child(2) {
    top: 50%;
    opacity: 0;
  }
  [data-site="horizon-lab"] .hl-sp-btn.is-active .hl-sp-btn-lines i:nth-child(3) {
    top: 50%;
    transform: rotate(45deg);
  }

  /* overlay 本体 */
  [data-site="horizon-lab"] .hl-spnav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    /* close: 300ms fade out (参照 shorthand の 300ms は duration) */
    transition:
      visibility 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
      opacity 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955),
      z-index 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  [data-site="horizon-lab"] .hl-spnav.is-active {
    z-index: 99998;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  /* 白パネル wipe: 縦線位置 (container 90% 内 0/25/50/75%) から右へ 0→25%。
   * 両端の 5% は ::before / ::after で埋める */
  [data-site="horizon-lab"] .hl-spnav-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  [data-site="horizon-lab"] .hl-spnav-bg::before,
  [data-site="horizon-lab"] .hl-spnav-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    transition: width 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  [data-site="horizon-lab"] .hl-spnav-bg::after {
    left: 95%;
    border-left: 1px solid #f9f9f9;
  }
  [data-site="horizon-lab"] .hl-spnav-bg ul {
    position: relative;
    width: 90%;
    max-width: 1280px;
    height: 100%;
    margin-inline: auto;
    list-style: none;
    padding: 0;
    margin-block: 0;
  }
  [data-site="horizon-lab"] .hl-spnav-bg li {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    border-left: 1px solid #f9f9f9;
    z-index: 1;
    transition: width 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  [data-site="horizon-lab"] .hl-spnav-bg li:nth-child(1) { left: 0; }
  [data-site="horizon-lab"] .hl-spnav-bg li:nth-child(2) { left: 25%; }
  [data-site="horizon-lab"] .hl-spnav-bg li:nth-child(3) { left: 50%; }
  [data-site="horizon-lab"] .hl-spnav-bg li:nth-child(4) { left: 75%; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-spnav-bg { opacity: 1; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-spnav-bg::before,
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-spnav-bg::after { width: 5%; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-spnav-bg li { width: 25%; }

  /* 背景ブロブ (下 80% に敷く。canvas は正方形なので幅 100vw で中央寄せ) */
  [data-site="horizon-lab"] .hl-spnav-blob {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    z-index: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  /* 参照: ブロブは領域の上寄り (y 200〜530 / 844) に描かれる → 正方形を上端に寄せる */
  [data-site="horizon-lab"] .hl-spnav-blob canvas {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(100vw, 100%, 520px) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    transform: translateX(-50%);
  }
  /* 参照は .7 だが自社パレット (teal) は参照の淡橙より濃く gray 和文が沈むため .5 に (意図的差分) */
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-spnav-blob {
    opacity: 0.5;
    transition-delay: 200ms;
  }

  /* 本文 (container 90%、縦中央) */
  [data-site="horizon-lab"] .hl-spnav-wrap {
    position: relative;
    z-index: 100;
    width: 90%;
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
  [data-site="horizon-lab"] .hl-spnav-inner {
    width: 100%;
    padding-block: 80px 40px;
  }
  [data-site="horizon-lab"] .hl-spnav-logo {
    display: inline-block;
    margin-bottom: 36px;
  }
  [data-site="horizon-lab"] .hl-spnav-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  [data-site="horizon-lab"] .hl-spnav-list li {
    width: 50%;
    margin-bottom: 10px;
  }
  [data-site="horizon-lab"] .hl-spnav-list a {
    display: block;
    padding: 6px 0;
    color: var(--site-ink);
  }
  /* 書体は旧メニュー (14px w500) 踏襲でやや大きめ — 参照 (13.2px w400 / 11px) からの意図的差分 */
  [data-site="horizon-lab"] .hl-spnav-en {
    position: relative;
    display: inline-block;
    font-family: var(--font-hl-en), var(--font-hl-jp), sans-serif;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  [data-site="horizon-lab"] .hl-spnav-list a.is-current .hl-spnav-en::before {
    content: "";
    position: absolute;
    right: -14px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 100%;
    background: var(--site-ink);
  }
  [data-site="horizon-lab"] .hl-spnav-jp {
    display: block;
    font-family: var(--font-hl-en), var(--font-hl-jp), sans-serif;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--site-muted);
  }
  [data-site="horizon-lab"] .hl-spnav-foot {
    margin: 24px 0 0;
    padding-top: 24px;
  }
  [data-site="horizon-lab"] .hl-spnav-foot span {
    display: block;
    font-family: var(--font-hl-en), var(--font-hl-jp), sans-serif;
    font-size: 11px;
    line-height: 2.2;
    letter-spacing: 0.06em;
    font-weight: 400;
    color: var(--site-ink);
  }

  /* stagger 入場 */
  [data-site="horizon-lab"] .hl-spnav .hl-p {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
    transition:
      transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
      opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p1 { transition-delay: 0ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p2 { transition-delay: 30ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p3 { transition-delay: 60ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p4 { transition-delay: 90ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p5 { transition-delay: 120ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p6 { transition-delay: 150ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p7 { transition-delay: 180ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p8 { transition-delay: 210ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p9 { transition-delay: 240ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p10 { transition-delay: 270ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p11 { transition-delay: 300ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p12 { transition-delay: 330ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p13 { transition-delay: 360ms; }
  [data-site="horizon-lab"] .hl-spnav.is-active .hl-p14 { transition-delay: 390ms; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  [data-site="horizon-lab"] .hl-spnav,
  [data-site="horizon-lab"] .hl-spnav *,
  [data-site="horizon-lab"] .hl-spnav *::before,
  [data-site="horizon-lab"] .hl-spnav *::after,
  [data-site="horizon-lab"] .hl-sp-btn-lines i {
    transition: none !important;
  }
}