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

[data-site="shinjo-construction"] {
  /* font は lib/fonts の共用 instance (CSS 重複防止)。旧変数名は alias で維持 */
  --font-sc-en: var(--font-roboto);
  --font-sc-jp: var(--font-noto-sans-jp);
  --site-ink: #000000;
  --site-body: #191919;
  --site-muted: #808080;
  --site-bg: #f9f9f9;
  --site-line: #eeeeee;
  --site-table-gray: #f1f1f1;
  --site-accent: #0e8078; /* 標準 ContactForm の submit (自社ブランド deep teal) */

  font-family: var(--font-sc-en), var(--font-sc-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="shinjo-construction"] {
    font-size: 13px;
  }
}

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

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

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

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

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

/* 本文 (実測: 1rem w500 lh2.1 ls.06em #191919) */
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-txt {
    font-size: 13px;
  }
}

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

[data-site="shinjo-construction"] .sc-ttl {
  position: relative;
  padding-left: 18px;
}
[data-site="shinjo-construction"] .sc-ttl::before {
  content: "";
  position: absolute;
  left: 0;
  background: var(--site-ink);
}
[data-site="shinjo-construction"] .sc-ttl-en {
  font-family: var(--font-sc-en), sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-ttl-l::before {
  top: 2px;
  bottom: 2px;
  width: 4px;
}
[data-site="shinjo-construction"] .sc-ttl-l .sc-ttl-en {
  font-size: 36px;
  margin-bottom: 8px;
}
[data-site="shinjo-construction"] .sc-ttl-l .sc-ttl-ja {
  font-size: 12px;
  line-height: 1;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-ttl-l {
    padding-left: 26px;
  }
  [data-site="shinjo-construction"] .sc-ttl-l .sc-ttl-en {
    font-size: 52px;
    margin-bottom: 10px;
  }
  [data-site="shinjo-construction"] .sc-ttl-l .sc-ttl-ja {
    font-size: 13px;
  }
}

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

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

/* 白抜き修飾 (暗背景上の M 見出し用) */
[data-site="shinjo-construction"] .sc-ttl-w,
[data-site="shinjo-construction"] .sc-ttl-w .sc-ttl-en {
  color: #fff;
}
[data-site="shinjo-construction"] .sc-ttl-w::before {
  background: #fff;
}
[data-site="shinjo-construction"] .sc-ttl-w .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-catch-en {
    margin-top: 43px;
    font-size: 15.6px;
  }
  [data-site="shinjo-construction"] .sc-catch {
    font-size: 33.8px;
  }
}

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

[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-nav a {
  display: block;
  padding: 8px 15px;
  font-family: var(--font-sc-en), var(--font-sc-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="shinjo-construction"] .sc-logo-link .sc-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="shinjo-construction"] .sc-logo-link:hover .sc-wordmark {
  background: var(--site-ink);
  color: #fff;
}

/* hover 下線: 左から伸びて、離すと右へ抜ける。current は常時表示 */
[data-site="shinjo-construction"] .sc-nav a {
  position: relative;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* 採用情報ピルは塗り hover があるので下線は出さない */
[data-site="shinjo-construction"] .sc-nav a.sc-recruit-pill::after {
  display: none;
}
/* 現在ページは前置きドット (hover 下線と役割を分離)。hover すると下線も伸びる */
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-recruit-pill {
  display: inline-block;
  padding: 8px 22px;
  font-family: var(--font-sc-en), var(--font-sc-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="shinjo-construction"] .sc-recruit-pill:hover {
  background: var(--site-ink);
  color: #fff;
}

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

/* View More / View Detail (実測: 13px w400 + 丸枠矢印) */
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-more {
    font-size: 13px;
  }
}
[data-site="shinjo-construction"] .sc-more .sc-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="shinjo-construction"] .sc-more:hover .sc-more-circle {
  background: var(--site-ink);
  color: #fff;
}

/* 黒ボタン (contact 帯) */
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-btn-black:hover {
  background: #fff;
  color: #000;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-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 は load 後付与
 * (load が来なくても fx-ready から 2500ms で付与)。 */

/* hydration 前の初回描画からページを隠す (リロード時に完成画面が一瞬映る
 * フラッシュ対策)。JS 無効環境は Root 内の <noscript> スタイルが表示に戻す */
[data-site="shinjo-construction"] {
  opacity: 0;
}
/* 表示復帰は hydration (fx-ready) 時点 — window load (画像待ち) には依存しない。
 * is-load は入場アニメ (ワードマーク / header / タイトル帯バー / カーテン) 専用 */
[data-site="shinjo-construction"].fx-ready {
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-site="shinjo-construction"].fx-ready.is-top {
  transition-delay: 300ms;
}

/* home hero: SVG ワードマーク (参照と同方式のストローク描画 → 塗り)。
 * 実測タイミング: stroke 2400ms delay300ms / fill 1000ms delay2000ms / 枠は先行 */
[data-site="shinjo-construction"] .sc-mark-svg {
  display: block;
  width: min(100%, 320px);
  height: auto;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-mark-svg {
    width: 400px;
  }
}
/* 枠 = リング path (外周+内周、evenodd)。太さは stroke でなく塗りで出す (実測)。
 * stroke は描画アニメ専用 — 静止状態では消す (dash 残骸が塗りの輪郭から
 * 0.35px はみ出して接合点の段差に見えるため) */
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-mark-text {
  font-family: var(--font-sc-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="shinjo-construction"].fx-ready.is-top .sc-mark-text {
  fill: transparent;
  transition: none;
}
[data-site="shinjo-construction"].fx-ready.is-top .sc-mark-text tspan {
  stroke-dasharray: 230;
  stroke-dashoffset: 245;
}
[data-site="shinjo-construction"].fx-ready.is-top .sc-mark-text tspan:nth-child(3n + 1) {
  stroke-dasharray: 240;
  stroke-dashoffset: 262;
}
[data-site="shinjo-construction"].fx-ready.is-top .sc-mark-text tspan:nth-child(3n + 2) {
  stroke-dasharray: 215;
  stroke-dashoffset: 228;
}
[data-site="shinjo-construction"].fx-ready.is-top .sc-mark-text tspan:nth-child(4n + 3) {
  stroke-dasharray: 255;
  stroke-dashoffset: 292;
}
/* 枠の初期状態 (実測比率の転記: dasharray = 外周の約半分 → 描画中は
 * 「伸びる線」と「滑る線分」が枠上を競走し、塗りで完成する) */
[data-site="shinjo-construction"].fx-ready.is-top .sc-mark-box {
  fill: transparent;
  stroke-opacity: 1;
  stroke-dasharray: 470;
  stroke-dashoffset: 470;
}
/* is-load: 文字ごとに 100ms ずつ遅延して輪郭が描かれ (2400ms)、
 * 2.0s で全体に塗りが入る (1000ms)。枠は先行 (1400ms delay200ms)。 */
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text {
  fill: var(--site-ink);
  transition: fill 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms;
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1200ms;
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(1) { transition-delay: 300ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(2) { transition-delay: 400ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(3) { transition-delay: 500ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(4) { transition-delay: 600ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(5) { transition-delay: 700ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(6) { transition-delay: 800ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(7) { transition-delay: 900ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(8) { transition-delay: 1000ms; }
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-mark-text tspan:nth-child(9) { transition-delay: 1100ms; }
/* 枠の描画 (実測: dashoffset 2000ms delay 200ms / fill 1000ms delay 2000ms)。
 * 塗り完成後 (3.0s) に描画用 stroke をフェードアウト → 残骸の段差を消す */
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-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="shinjo-construction"].fx-ready.is-top .sc-hero-tagline {
  opacity: 0;
  transform: translate3d(0, 13px, 0);
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-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: リード文 (実測: 1000ms delay2400ms) */
[data-site="shinjo-construction"].fx-ready.is-top .sc-hero-lead {
  opacity: 0;
  transform: translate3d(0, 13px, 0);
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-hero-lead {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2400ms,
    opacity 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2400ms;
}
/* home hero のブロブはカーテン退場後にフェードイン
 * (退場パネルがブロブ上を通過する縦エッジが 75% ラインで白チラつきに見えるため) */
[data-site="shinjo-construction"].fx-ready.is-top .sc-hero canvas {
  opacity: 0;
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-hero canvas {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 800ms;
}

/* home のみ: header 入場 (実測: opacity 0→1 1000ms delay2000ms) */
[data-site="shinjo-construction"].fx-ready.is-top .sc-header {
  opacity: 0;
}
[data-site="shinjo-construction"].fx-ready.is-load.is-top .sc-header {
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-site="shinjo-construction"].fx-ready,
  [data-site="shinjo-construction"].fx-ready .sc-hero-tagline,
  [data-site="shinjo-construction"].fx-ready .sc-hero-lead,
  [data-site="shinjo-construction"].fx-ready .sc-header,
  [data-site="shinjo-construction"].fx-ready .sc-hero canvas,
  [data-site="shinjo-construction"].fx-ready .sc-pagehero .sc-ttl-hero::before,
  [data-site="shinjo-construction"].fx-ready .sc-pagehero .sc-ttl-hero > *,
  [data-site="shinjo-construction"].fx-ready .sc-ttl-enter .sc-ttl::before,
  [data-site="shinjo-construction"].fx-ready .sc-ttl-enter .sc-ttl > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-site="shinjo-construction"].fx-ready .sc-mark-text,
  [data-site="shinjo-construction"].fx-ready .sc-mark-text tspan,
  [data-site="shinjo-construction"].fx-ready .sc-mark-box {
    fill: var(--site-ink);
    stroke-dashoffset: 0 !important;
    stroke-dasharray: none !important;
    transition: none !important;
  }
  [data-site="shinjo-construction"].fx-ready .sc-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="shinjo-construction"] .sc-cover {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  display: none;
}
[data-site="shinjo-construction"].fx-ready .sc-cover {
  display: block;
}
[data-site="shinjo-construction"] .sc-cover-line {
  width: 100%;
  height: 100%;
  opacity: 1;
}
[data-site="shinjo-construction"] .sc-cover-panel {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
/* 覆い状態 (入場前の初期値) */
[data-site="shinjo-construction"] .sc-cover-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  background: var(--site-bg);
}
/* 入場リビール (is-load): tx 0→100% 300ms、width は 300ms 後に 0、line は 500ms 後 fade */
[data-site="shinjo-construction"].fx-ready.is-load .sc-cover-line {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 500ms;
}
[data-site="shinjo-construction"].fx-ready.is-load .sc-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;
}
/* 退場ワイプ (is-leaving — is-load より後に定義して上書き):
 * line 100ms fade-in、パネルは tx 即 0・width 0→100% 300ms (100ms 遅れて開始) */
[data-site="shinjo-construction"].fx-ready.is-leaving .sc-cover-line {
  opacity: 1;
  transition: opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
[data-site="shinjo-construction"].fx-ready.is-leaving .sc-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;
}
[data-site="shinjo-construction"] .sc-cover-side {
  width: 5%;
}
@media (min-width: 1440px) {
  [data-site="shinjo-construction"] .sc-cover-side {
    width: calc(50% - 640px);
  }
}
[data-site="shinjo-construction"] .sc-cover-side.is-left {
  left: 0;
}
[data-site="shinjo-construction"] .sc-cover-side.is-right {
  right: 0;
  border-left: 1px solid #f1f1f1;
}
[data-site="shinjo-construction"] .sc-cover-cols {
  width: 90%;
  max-width: 1280px;
  height: 100%;
  margin-inline: auto;
  position: relative;
}
[data-site="shinjo-construction"] .sc-cover-cols .sc-cover-panel {
  width: 25%;
  border-left: 1px solid #f1f1f1;
}
[data-site="shinjo-construction"] .sc-cover-cols .sc-cover-panel:nth-child(1) { left: 0; }
[data-site="shinjo-construction"] .sc-cover-cols .sc-cover-panel:nth-child(2) { left: 25%; }
[data-site="shinjo-construction"] .sc-cover-cols .sc-cover-panel:nth-child(3) { left: 50%; }
[data-site="shinjo-construction"] .sc-cover-cols .sc-cover-panel:nth-child(4) { left: 75%; }
@media (prefers-reduced-motion: reduce) {
  [data-site="shinjo-construction"] .sc-cover {
    display: none;
  }
}

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

[data-site="shinjo-construction"].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="shinjo-construction"].fx-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* 時差 reveal: data-reveal="2/3/4" は 120ms 刻みで遅れて表示
 * (見出し → 本文 → リンクの順に現れる。同時表示の平板さ対策) */
[data-site="shinjo-construction"].fx-ready [data-reveal="2"] {
  transition-delay: 120ms;
}
[data-site="shinjo-construction"].fx-ready [data-reveal="3"] {
  transition-delay: 240ms;
}
[data-site="shinjo-construction"].fx-ready [data-reveal="4"] {
  transition-delay: 360ms;
}

/* リスト stagger (実測: 600ms translateY(3rem)) — 親 [data-reveal-list] 配下の子 */
[data-site="shinjo-construction"].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="shinjo-construction"].fx-ready [data-reveal-list].is-revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-site="shinjo-construction"].fx-ready [data-reveal-list].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-site="shinjo-construction"].fx-ready [data-reveal-list].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-site="shinjo-construction"].fx-ready [data-reveal-list].is-revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-site="shinjo-construction"].fx-ready [data-reveal-list].is-revealed > *:nth-child(n + 5) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  [data-site="shinjo-construction"].fx-ready [data-reveal],
  [data-site="shinjo-construction"].fx-ready [data-reveal-list] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

[data-site="shinjo-construction"] .sc-work-grid {
  display: flex;
  flex-wrap: wrap;
}
[data-site="shinjo-construction"] .sc-work-card {
  width: 100%;
  margin: 0 0 40px;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-work-grid {
    margin-inline: -17px;
  }
  [data-site="shinjo-construction"] .sc-work-card {
    width: calc(25% - 34px);
    margin: 0 17px 40px;
  }
}
[data-site="shinjo-construction"] .sc-work-card a {
  color: var(--site-ink);
  text-decoration: none;
}
[data-site="shinjo-construction"] .sc-work-card figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 0 15px;
  overflow: hidden;
  background: #f3f2f0;
}
[data-site="shinjo-construction"] .sc-work-card figure img,
[data-site="shinjo-construction"] .sc-work-card figure > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-site="shinjo-construction"] .sc-work-name {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--site-ink);
}
[data-site="shinjo-construction"] .sc-work-title {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-wwd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-wwd-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
}
[data-site="shinjo-construction"] .sc-wwd-card {
  color: var(--site-ink);
  text-decoration: none;
  display: block;
}
[data-site="shinjo-construction"] .sc-wwd-fig {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #efefef;
}
[data-site="shinjo-construction"] .sc-wwd-num {
  position: absolute;
  left: 14px;
  top: 2px;
  font-family: var(--font-sc-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="shinjo-construction"] .sc-wwd-en {
  margin-top: 20px;
  font-family: var(--font-sc-en), sans-serif;
  font-size: 15.6px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}
[data-site="shinjo-construction"] .sc-wwd-ja {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--site-muted);
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-wwd-ja {
    font-size: 13px;
  }
}

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

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

/* Strength ブロック (実測: ラベル黒帯 / 見出し 20.8 w600 ls.06 lh1.7) */
[data-site="shinjo-construction"] .sc-st-label {
  display: inline-block;
  padding: 3px 12px;
  font-family: var(--font-sc-en), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--site-ink);
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-st-ttl {
    font-size: 20.8px;
  }
}

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

[data-site="shinjo-construction"] .sc-tbl {
  width: 100%;
  border-collapse: collapse;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-tbl th {
    width: 160px;
    padding: 19.5px;
    font-size: 13px;
  }
  [data-site="shinjo-construction"] .sc-tbl td {
    padding: 19.5px 0 19.5px 26px;
    font-size: 13px;
  }
}

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

[data-site="shinjo-construction"] .sc-pagehero {
  position: relative;
  display: flex;
  align-items: center;
  height: 220px;
  overflow: hidden;
  background: #161616;
}
@media (min-width: 681px) {
  [data-site="shinjo-construction"] .sc-pagehero {
    height: 430px;
  }
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-breadcrumb a {
  color: var(--site-muted);
  text-decoration: none;
}
[data-site="shinjo-construction"] .sc-breadcrumb a:hover {
  text-decoration: underline;
}

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

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

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

[data-site="shinjo-construction"] .sc-contact-band-ttl {
  font-family: var(--font-sc-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="shinjo-construction"] .sc-contact-band-ttl {
    font-size: 41.6px;
  }
}

/* 標準 ContactForm を実測スタイルに寄せる (要素セレクタで上書き) */
[data-site="shinjo-construction"] .sc-form input[type="text"],
[data-site="shinjo-construction"] .sc-form input[type="email"],
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-form textarea {
  width: 100%;
  min-height: 260px;
  padding: 13px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 0;
}
[data-site="shinjo-construction"] .sc-form label,
[data-site="shinjo-construction"] .sc-form p {
  font-size: 13px;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-form button[type="submit"] {
    min-width: 460px;
  }
}
[data-site="shinjo-construction"] .sc-form button[type="submit"]:hover {
  opacity: 0.85;
}

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

[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-news-date {
  font-family: var(--font-sc-en), sans-serif;
  font-size: 12px;
  color: var(--site-muted);
  letter-spacing: 0.06em;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
[data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-hero-tagline {
    font-size: 20.16px;
  }
}
/* 折り返し (Chrome 系のみ auto-phrase) */
[data-site="shinjo-construction"] h1,
[data-site="shinjo-construction"] h2,
[data-site="shinjo-construction"] h3 {
  text-wrap: balance;
  word-break: auto-phrase;
}

/* ============ 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="shinjo-construction"] .sc-sp-recruit,
[data-site="shinjo-construction"] .sc-sp-btn,
[data-site="shinjo-construction"] .sc-spnav {
  display: none;
}
@media (max-width: 960px) {
  [data-site="shinjo-construction"] .sc-sp-recruit {
    position: fixed;
    display: block;
    z-index: 99999;
    top: 20px;
    right: 16vw;
    padding: 5px 12px;
    font-family: var(--font-sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-sp-btn-lines {
    position: relative;
    display: block;
    width: 24px;
    height: 14px;
  }
  [data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-sp-btn-lines i:nth-child(1) { top: 0; }
  [data-site="shinjo-construction"] .sc-sp-btn-lines i:nth-child(2) { top: 50%; background: gray; }
  [data-site="shinjo-construction"] .sc-sp-btn-lines i:nth-child(3) { top: 100%; }
  /* open: まず top が中央へ寄り (300ms)、その後 300ms 遅れて回転して X */
  [data-site="shinjo-construction"] .sc-sp-btn.is-active .sc-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="shinjo-construction"] .sc-sp-btn.is-active .sc-sp-btn-lines i:nth-child(1) {
    top: 50%;
    transform: rotate(-45deg);
  }
  [data-site="shinjo-construction"] .sc-sp-btn.is-active .sc-sp-btn-lines i:nth-child(2) {
    top: 50%;
    opacity: 0;
  }
  [data-site="shinjo-construction"] .sc-sp-btn.is-active .sc-sp-btn-lines i:nth-child(3) {
    top: 50%;
    transform: rotate(45deg);
  }

  /* overlay 本体 */
  [data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-spnav-bg::before,
  [data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-spnav-bg::after {
    left: 95%;
    border-left: 1px solid #f9f9f9;
  }
  [data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-spnav-bg li:nth-child(1) { left: 0; }
  [data-site="shinjo-construction"] .sc-spnav-bg li:nth-child(2) { left: 25%; }
  [data-site="shinjo-construction"] .sc-spnav-bg li:nth-child(3) { left: 50%; }
  [data-site="shinjo-construction"] .sc-spnav-bg li:nth-child(4) { left: 75%; }
  [data-site="shinjo-construction"] .sc-spnav.is-active .sc-spnav-bg { opacity: 1; }
  [data-site="shinjo-construction"] .sc-spnav.is-active .sc-spnav-bg::before,
  [data-site="shinjo-construction"] .sc-spnav.is-active .sc-spnav-bg::after { width: 5%; }
  [data-site="shinjo-construction"] .sc-spnav.is-active .sc-spnav-bg li { width: 25%; }

  /* 背景ブロブ (下 80% に敷く。canvas は正方形なので幅 100vw で中央寄せ) */
  [data-site="shinjo-construction"] .sc-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="shinjo-construction"] .sc-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="shinjo-construction"] .sc-spnav.is-active .sc-spnav-blob {
    opacity: 0.5;
    transition-delay: 200ms;
  }

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

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