/* ==========================================================================
   NHR — nhr-style.css
   WordPress / GeneratePress 実装用 共通CSS
   ベース: NHR Visual Design v1.0（TOP / Capabilities / Services / Labs・Journal / Contact）

   構成:
     1. Color Tokens
     2. Typography
     3. Layout
     4. Components
     5. Animation

   注記:
   - 値（色・サイズ・余白等）はVisual Design v1.0から一切変更していません。構造の整理のみです。
   - 各ルールは「主目的」で分類しています。Componentsのルールが配色を含む場合がありますが、
     その色はすべて Section 1 のColor Tokenを参照しています。
   ========================================================================== */


/* ==========================================================================
   1. COLOR TOKENS
   ========================================================================== */
:root{
  --bg:#2B2622;
  --bg-alt:#332D26;
  --bg-card:#3B342B;
  --bg-deep:#15130F;
  --bg-hero:#19140F;
  --ink:#ECE8DF;
  --ink-dim:#A39C8E;
  --ink-faint:#6f6a60;
  --sand:#C9AE82;
  --slate:#6E7B82;
  --line:rgba(236,232,223,0.09);
  --line-strong:rgba(236,232,223,0.18);
  --bg-light:#F0E9DC;
  --bg-light-card:#E4DAC6;
}

/* Section Light — Anthropic的な温度感を持つ明るい面（トークンの上書きのみで成立） */
.section-light{
  background:var(--bg-light);
  --bg-card:var(--bg-light-card);
  --bg-alt:#E9E1D2;
  --ink:#2C2720;
  --ink-dim:#5C5346;
  --ink-faint:#6E6354;
  --slate:#56646B;
  --line:rgba(44,39,32,0.10);
  --line-strong:rgba(44,39,32,0.22);
}


/* ==========================================================================
   2. TYPOGRAPHY
   Google Fonts は functions.php 側で preconnect + wp_enqueue_style により
   別 stylesheet として読み込む(CSS内 @import は render blocking となるため撤去)。
   ========================================================================== */
:root{
  --font-display:'Archivo', 'Hiragino Sans', sans-serif;
  --font-body:'IBM Plex Sans','Hiragino Sans','Noto Sans JP',sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--ink);letter-spacing:-0.01em;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:1.1rem;
}

/* clamp下限を 2.6rem→2.05rem (35px→約35px) に落として、375px前後の狭幅で
   "Experience Driven." が2行に割れるのを緩和する。max/preferredは変更なし。 */
.hero h1{font-size:clamp(3.49rem,11.4vw,4.32rem);line-height:1.15;margin-bottom:3.4rem;}
.hero .eyebrow{margin-bottom:0.6rem;}
.hero-biz{font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--sand);margin-bottom:1.3rem;letter-spacing:0;}
.page-head h1{font-size:clamp(2.1rem,4.2vw,3.2rem);}
.hero-jp{font-size:clamp(0.92rem,1.7vw,0.95rem);color:var(--ink);line-height:1.45;margin-bottom:0.75rem;font-weight:400;text-wrap:balance;}
.hero-jp-line{display:block;}
/* hero-tech は複数の技術キーワードを羅列するが、以前は連続 で区切っていたため
   狭幅で改行禁止扱いとなり水平overflowの原因になっていた。flex+gapで自然に折り返す。 */
.hero-tech{font-family:var(--font-mono);font-size:0.88rem;color:#B2AB9E;letter-spacing:0.02em;margin-bottom:0.8rem;display:flex;flex-wrap:wrap;gap:6px 22px;}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
:root{
  --container:1180px;
  /* v2.0.8: セルフホストフォント導入後に実測ベースで再計算(以前はフォールバックフォント
     で計算していたため96pxとしていたが、Archivo/IBM Plex Sansが実際に描画される前提だと
     わずかに合わなかった)。
     nav 実高さ = padding18px×2 + logo-block(logo-img39px + gap3px +
     logo-legal(0.7rem×17px=11.9px × line-height1.7継承=20.23px)) + border1px
     = 36 + 62.23 + 1 ≈ 99.23px → 99px。
     PC/Tabletはこの基本値をそのまま使う(個別上書きなし)。Mobileは別途74pxで上書き済み。 */
  --nav-height:99px;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* html/body 双方に overflow-x:clip を敷いて、水平方向のはみ出しを塞ぐ。
   .service-tags の width:100vw + translateX(-50%) や tooltip-bubble の絶対位置が
   端で画面外へ突き抜けるケースを吸収する (縦sticky nav の挙動には影響しない)。 */
html{background:var(--bg);font-size:17px;scroll-behavior:smooth;overflow-x:clip;}
@keyframes pageSettle{0%,100%{filter:brightness(1);}50%{filter:brightness(1.012);}}
body.is-settling{animation:pageSettle 1.6s ease;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
section{padding:clamp(64px,9vw,128px) 0;border-bottom:1px solid var(--line);}
/* 2026-08-11 堀川さんレビュー: 記事詳細(single.php)のDATE帯が、付帯情報の割に
   縦方向の存在感が強すぎるとの指摘。原因は上記の汎用section{padding}(全ページ共通)。
   直接変更すると影響範囲がサイト全体に及ぶため、DATE帯のsectionにだけ
   fact-sectionクラスを付与し、ここだけpaddingを縮小する。DATE内部(罫線・
   ラベル・値のフォントサイズや配置)は無変更。他のsection(タイトル・本文・
   戻り導線)や他ページのsectionには一切影響しない。 */
.fact-section{padding:clamp(28px,5vw,56px) 0;}
section:last-of-type{border-bottom:none;}
:focus-visible{outline:1px solid var(--sand);outline-offset:3px;}

.page-head{padding-top:clamp(78px,16vw,80px);padding-bottom:8px;}
/* v2.1.0 — デザインレビュー(Aris+堀川さん、2026-07-13): Servicesは「短時間で該当案件か
   確認する」ページのため、Capabilitiesほど世界観に余白を割く必要はないとの指摘。
   Hero(page-head)と、Hero後のsection上部余白(Architectureバーが出るまでの間)の
   2箇所を、それぞれ約13%圧縮する(他ページの.page-headには影響しないようスコープ)。 */
.page-head--services{padding-top:clamp(68px,14vw,70px);}
.svc-list-section{padding-top:clamp(56px,8vw,112px);}
/* Capabilities Hero サブコピー — h1の直下に配置するサブコピー。
   主張の強いキャッチコピーではなく、Capabilities全体の読み方を静かに示す位置付けのため、
   font-bodyとink-dim(ライトモードで#5C5346)で目立たせすぎないように設定している。
   page-head自体はsection-lightのため、ink-dimは確実に読めるコントラストを確保している。 */
.page-head-sub{
  font-family:var(--font-body);font-size:clamp(0.92rem,1.4vw,0.95rem);
  color:var(--ink-dim);line-height:1.55;font-weight:400;
  margin-top:0.65rem;text-wrap:balance;
}
.page-head-sub-line{display:block;}
.hero{padding-top:clamp(52px,10vw,58px);padding-bottom:clamp(34px,8vw,39px);background:var(--bg-hero);position:relative;overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1.0fr 1.0fr;gap:clamp(40px,6vw,80px);align-items:center;position:relative;z-index:1;}
/* v1.9 — Ambient Experience: an almost imperceptible glow, slowly breathing on its own */
@keyframes heroAmbient{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:.75;transform:scale(1.05);}}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 50% at 72% 38%, rgba(201,174,130,0.05), transparent 70%);
  animation:heroAmbient 11s ease-in-out infinite;
}
.stack-tags{display:flex;flex-wrap:wrap;gap:10px;}
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.contact-form{max-width:520px;}

/* ---------- Responsive の宣言は COMPONENTS 定義の後、Section 5 直前にまとめる。
   ここに置くと同詳細度の base rule (COMPONENTS 内) より source order で先になるため、
   後書きされて機能しない (.nav-links{display:none} 等が失われる)。 */


/* ==========================================================================
   4. COMPONENTS
   （Navigation / Footer / Button / Tag / Feed / Service Row 等。共通パーツ整理は
     別紙 NHR_Common_Components.md を参照）
   ========================================================================== */

/* --- Navigation --- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(21,19,15,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;
  padding:18px clamp(20px,5vw,64px) 18px clamp(28px,5vw,72px);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:0.03em;}
.logo-img{height:30px;width:auto;display:block;}
.logo-block{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.logo-legal{font-family:var(--font-body);font-size:0.7rem;color:var(--slate);letter-spacing:0.06em;}
.nav-links{display:flex;gap:2.2rem;font-size:1.05rem;color:var(--sand);}
/* Link Interaction Guideline v1.0 — Normal: ブランドカラー(金色/sand)+下線常時表示。
   ※不具合修正: 以前はcolorをここで明示しておらず、親要素からの継承がブラウザ標準の
   リンク色(青)に競り負けていた。color/text-decoration-colorをここで明示する。 */
.nav-links a{
  display:inline-block;color:var(--sand);
  padding:8px 4px;
  text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:3px;
  transition:color .25s ease,transform .25s ease,text-decoration-color .25s ease;
}
/* Hover/Focus: 文字色のみOff White(=このコンテキストでのink)へ。下線色(sand)は維持し、
   スケールは使わずtranslateXのみで「確実に認識できる」反応を返す。 */
.nav-links a:hover,.nav-links a:focus-visible{
  color:var(--ink);
  text-decoration-color:var(--sand);
  transform:translateX(3px);
}
/* Active(押下中)はブランドカラー(金色/sand)へ戻す */
.nav-links a:active{color:var(--sand);}
/* 現在地表示(.active)はhoverと同じ視認性(Off White)を維持。translateXは付与しない(常時シフトして
   見えるのを避けるため、現在地インジケータとしての座標は固定のまま) */
.nav-links a.active{color:var(--ink);text-decoration-color:var(--sand);}
/* Hamburger — 3本線をCSSで組み立てる (U+2261 は環境により見た目が異なるため使わない)。
   is-open時は上下の線を回転させて×印にする。transition は 0.2s ease で軽く。 */
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);
  color:var(--ink);width:44px;height:44px;border-radius:2px;
  padding:0;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--sand);}
.nav-toggle-bars{display:block;position:relative;width:20px;height:14px;}
.nav-toggle-bar{
  position:absolute;left:0;right:0;height:1.5px;background:var(--ink);border-radius:1px;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.nav-toggle-bar:nth-child(1){top:0;}
.nav-toggle-bar:nth-child(2){top:6.25px;}
.nav-toggle-bar:nth-child(3){top:12.5px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){top:6.25px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){top:6.25px;transform:rotate(-45deg);}

/* --- Hero link (TOP / single.php共通) ---
   Link Interaction Guideline v1.0: 下線の代わりに既存のborder-bottomを「下線」として扱う。
   ブランドカラー(#D4BD96)はNormal/Hoverを通じて維持し、Hoverでは文字色のみOff White(ink)へ。 */
.hero-link{
  font-family:var(--font-mono);font-size:1rem;font-weight:500;letter-spacing:0.04em;
  border-bottom:1px solid #D4BD96;padding-bottom:6px;
  display:inline-block;color:#D4BD96;
  transition:color .25s ease,transform .25s ease,border-color .25s ease;
}
.hero-link:hover,.hero-link:focus-visible{
  color:var(--ink);
  border-color:#D4BD96;
  transform:translateX(3px);
}
.hero-link:active{color:#D4BD96;}

@keyframes heroFadeIn{from{opacity:0;transform:translateY(16px);filter:blur(3px);}to{opacity:1;transform:translateY(0);filter:blur(0);}}
@keyframes heroFigureIn{from{opacity:0;transform:translateY(16px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.hero .eyebrow{animation:heroFadeIn .7s ease both;}
.hero h1 .hero-line{display:inline-block;animation:heroFadeIn .7s ease both;}
.hero h1 .hero-line:first-child{animation-delay:.12s;}
.hero h1 .hero-line-2{animation-delay:.26s;}
.hero-biz{animation:heroFadeIn .7s ease .34s both;}
.hero-jp{animation:heroFadeIn .7s ease .42s both;}
.hero-tech{animation:heroFadeIn .7s ease .54s both;}
.hero-link{animation:heroFadeIn .7s ease .66s both;}
.hero-figure{animation:heroFigureIn .9s ease .3s both;}

/* --- Architecture diagram (TOP only) --- */
@keyframes diagramFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
/* v2.2.4 — TOP Hero 光学調整(Design Freeze前, 2026-07-14): 図版(Reference Architecture)が
   Hero背景に沈んで見える件。--bg-card/--bg-alt/--lineは他コンポーネント(filter-btn等)と
   共有トークンのため変更せず、この図版だけに効くリテラル値で最小限のコントラストを
   足す。「目立たせる」のではなく「静かな存在感」を目的に、枠線をわずかに強め、
   ノードの塗りをカード背景よりわずかに明るくして、カードから浮くようにする。 */
.diagram-card{background:var(--bg-card);border:1px solid rgba(236,232,223,0.17);border-radius:3px;padding:28px 22px 16px;
  /* 2026-07-24: Heroのテキスト側を約30%縮小したため、バランスを保つため図解側も
     約30%縮小する。svgはwidth:100%(親要素基準)のため、max-widthだけで比例縮小する。 */
  max-width:100%;margin-left:auto;}
.diagram-card svg{width:100%;height:auto;display:block;}
.diagram-card figcaption{font-family:var(--font-mono);font-size:0.68rem;color:var(--ink-faint);margin-top:14px;letter-spacing:0.03em;}
.dnode{fill:#423A30;stroke:rgba(236,232,223,0.20);stroke-width:1;opacity:0;transition:opacity .35s ease,stroke .25s ease,stroke-width .25s ease;}
.dline{stroke:#7d7669;stroke-width:1;fill:none;stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset .45s ease,stroke .25s ease,opacity .25s ease;}
.dlabel{font-family:var(--font-mono);font-size:10px;fill:var(--ink-dim);letter-spacing:0.04em;opacity:0;transition:opacity .35s ease,fill .25s ease;}
.dlabel-accent{fill:var(--sand);}
.dnode-group{cursor:pointer;outline:none;}

.dnode-group[data-node="opnsense"] .dnode,.dnode-group[data-node="opnsense"] .dlabel{transition-delay:.25s;}
.dline[data-node="opnsense"]{transition-delay:0s;}
.dnode-group[data-node="dmz"] .dnode,.dnode-group[data-node="dmz"] .dlabel,
.dnode-group[data-node="proxy"] .dnode,.dnode-group[data-node="proxy"] .dlabel{transition-delay:.6s;}
.dline[data-node="dmz"],.dline[data-node="proxy"]{transition-delay:.35s;}
.dnode-group[data-node="nexus"] .dnode,.dnode-group[data-node="nexus"] .dlabel{transition-delay:1s;}
.dline[data-node="nexus"]{transition-delay:.75s;}

.diagram-card.is-built .dnode,.diagram-card.is-built .dlabel{opacity:1;}
.diagram-card.is-built .dline{stroke-dashoffset:0;}

.diagram-card.has-hover .dnode-group:not(.is-active-node) .dnode{opacity:.3;}
.diagram-card.has-hover .dnode-group:not(.is-active-node) .dlabel{opacity:.3;}
.diagram-card.has-hover .dline:not(.is-active-line){opacity:.18;}
/* 2026-07-26 Arisレビュー: REV.PROXYだけ、ホバー前の静止状態でもごく薄くsandアクセントを
   効かせる(強調しすぎないよう、is-active-nodeの本アクセントより弱いopacityに留める)。
   .is-active-nodeルールより前に置くことで、同じ詳細度でもホバー時は正しく上書きされる。 */
.dnode-group[data-node="proxy"] .dnode{stroke:rgba(201,174,130,0.45);}
.dnode-group.is-active-node .dnode{stroke:var(--sand);stroke-width:1.4;}
.dnode-group.is-active-node .dlabel{fill:var(--sand);}
.dline.is-active-line{stroke:var(--sand);stroke-width:1.4;}
@keyframes lineSignal{0%,100%{stroke:var(--ink-faint);}50%{stroke:var(--slate);}}
.dline.is-signal{animation:lineSignal 1.1s ease;}
.dnode-group:focus .dnode{stroke:var(--sand);}

/* --- Structure Row（Architecture/Consulting/Implementation/Operations） ---
   .toc-row: 章区切りのナビゲーションバー。グローバルなsection paddingは本文セクション向けの
   余白(64〜128px)で過剰に分厚くなるため、ここで専用に薄く上書きする。vw連動のclampだと
   広い画面で再び余白が伸びてしまうため、固定値で統一する。
   アンカーリンク(#architecture等)はこのtoc-row自身に付与しており(本文セクションにはid無し)、
   スクロール時にこのバーがヘッダー直下に表示された状態で止まるようにしている。
   scroll-margin-topは、スティッキーヘッダー(nav-inner padding36px+ロゴ39px+ロゴ法人名14px+gap3px+border1px≈93px)
   + WordPressログイン時の管理バー(32px) = 125px を考慮し、128pxで余裕を持たせている。 */
.toc-row{padding:80px 0 24px;scroll-margin-top:0;}
.structure-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,5vw,52px);align-items:start;}
.structure-item{display:flex;flex-direction:column;gap:10px;padding:6px 8px;margin:-6px -8px;border-radius:2px;transition:opacity .25s ease,transform .25s ease;}
.structure-row:hover .structure-item{opacity:.5;}
/* span版(非リンク)使用時のみ — 既存のscale演出を維持。現在はTOP/Capabilities共にaのため適用対象なし */
.structure-row:hover .structure-item:not(:has(a)):hover,.structure-row:hover .structure-item:not(:has(a)):focus-within{opacity:1;transform:scale(1.02);}
/* Capabilities(実リンク) — Link Interaction Guideline v1.0適用のため、親側のscaleは付与しない
   (translateXはa.structure-label自身に付与する) */
.structure-row:hover .structure-item:has(a):hover,.structure-row:hover .structure-item:has(a):focus-within{opacity:1;}
.structure-item.is-dim{opacity:.5;}
/* Capabilities only — clear "selected" card treatment (selecting page) */
.structure-item.is-open{background:var(--bg-card);padding:14px 16px;margin:-14px -16px;border-radius:3px;}
.structure-item.is-open .category-toggle::before{content:'● ';color:var(--sand);font-size:0.6em;vertical-align:middle;}
.category-toggle{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1rem,2.1vw,1.45rem);color:var(--ink);
  letter-spacing:0.01em;
  background:none;border:none;padding:0;margin:0;cursor:pointer;display:block;text-align:left;
  transition:color .2s ease;
}
.category-toggle:hover{color:var(--sand);}
.structure-item.is-open .category-toggle{color:var(--sand);}

/* TOP — Capabilitiesページの該当セクションへのアンカーリンク(a)として実装している
   (以前は非リンクのspanだったが、本リクエストにより実リンク化した)。
   Capabilities(a) — ページ内の同セクションへのアンカーリンク。
   どちらもLink Interaction Guideline v1.0を適用する。
   span版のCSSは、非リンクのラベルとして再利用する場合のために残している。 */
.structure-label{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1rem,2.1vw,1.45rem);color:var(--ink);
  letter-spacing:0.01em;
}
/* TOP — 既存のhover挙動(sandへの色変化)はspanのみ維持 */
.structure-item:hover span.structure-label{color:var(--sand);transition:color .2s ease;}
/* Capabilities — ヘッダーナビ(.nav-links a)と同じ配色ルールに統一。
   Normal(未選択): ブランドカラー(金色/sand)+下線常時表示。
   ※不具合修正: colorをここで明示しておらず、親要素からの継承がブラウザ標準のリンク色(青)に
   競り負けていた。 */
a.structure-label{
  display:inline-block;color:var(--sand);
  text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:3px;
  transition:color .25s ease,transform .25s ease,text-decoration-color .25s ease;
}
/* Hover/Focus: 文字色はOff White(ink)へ。下線色(sand)は維持し、
   スケールは使わずtranslateXのみで「確実に認識できる」反応を返す。 */
a.structure-label:hover,a.structure-label:focus-visible{
  color:var(--ink);
  text-decoration-color:var(--sand);
  transform:translateX(3px);
}
a.structure-label:active{color:var(--sand);}
/* 現在地(is-open) — ヘッダーナビの現在地表示(.nav-links a.active)と同じくOff White(ink)で
   強調する。ヘッダーとブロックヘッダーで「現在地=金色/非選択=白」「現在地=白/非選択=金色」と
   逆のルールが混在していた不整合を解消している。 */
.structure-item.is-open a.structure-label{color:var(--ink);text-decoration-color:var(--sand);}
.category-detail{
  display:flex;flex-wrap:wrap;gap:6px;max-width:240px;
  max-height:0;opacity:0;overflow:hidden;padding:10px 2px 2px;margin-top:-10px;
  transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;
}
.structure-item:hover .category-detail,.structure-item:focus-within .category-detail,.structure-item.is-open .category-detail{
  max-height:160px;opacity:1;margin-top:2px;
}

/* --- Tag --- */
.tag{
  font-family:var(--font-mono);font-size:0.86rem;
  border:1px solid var(--line-strong);border-radius:2px;
  padding:12px 16px;color:var(--ink-dim);
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.tag:hover{border-color:var(--sand);color:var(--ink);transform:translateY(-2px);}
.stack-tags:hover .tag{opacity:.5;}
.stack-tags:hover .tag:hover{opacity:1;}
/* v1.9 — Ambient Experience: sand = response to a user action, slate = the page's own idle life.
   Idle breathing and the "ping" reaction now share one visual language instead of being
   two unrelated effects. */
@keyframes tagBreathe{0%,100%{box-shadow:0 0 0 0 rgba(110,123,130,0);}50%{box-shadow:0 0 6px 1px rgba(110,123,130,0.22);}}
.stack-tags .tag{animation:tagBreathe 7s ease-in-out infinite;}
.stack-tags .tag:nth-child(2){animation-delay:.5s;}
.stack-tags .tag:nth-child(3){animation-delay:1s;}
.stack-tags .tag:nth-child(4){animation-delay:1.5s;}
.stack-tags .tag:nth-child(5){animation-delay:2s;}
@keyframes tagPingBoost{0%{box-shadow:0 0 0 0 rgba(201,174,130,0);}40%{box-shadow:0 0 10px 2px rgba(201,174,130,0.5);}100%{box-shadow:0 0 0 0 rgba(201,174,130,0);}}
.tag.is-pinged{animation:tagPingBoost .7s ease;}

@keyframes cardBreathe{0%,100%{box-shadow:0 18px 40px -20px rgba(0,0,0,0.55),0 0 0 0 rgba(110,123,130,0);}50%{box-shadow:0 18px 40px -20px rgba(0,0,0,0.55),0 0 16px 2px rgba(110,123,130,0.16);}}
.diagram-card{animation:diagramFloat 6s ease-in-out infinite,cardBreathe 9s ease-in-out infinite;}
@keyframes cardPingBoost{0%{box-shadow:0 18px 40px -20px rgba(0,0,0,0.55),0 0 0 0 rgba(201,174,130,0);}40%{box-shadow:0 18px 40px -20px rgba(0,0,0,0.55),0 0 22px 3px rgba(201,174,130,0.45);}100%{box-shadow:0 18px 40px -20px rgba(0,0,0,0.55),0 0 0 0 rgba(201,174,130,0);}}
.diagram-card.is-pinged{animation:diagramFloat 6s ease-in-out infinite,cardPingBoost .9s ease;}

/* --- Tooltip (data-tip) --- */
[data-tip]{cursor:help;}
.tooltip-bubble{
  position:absolute;z-index:200;
  transform:translate(-50%,-100%);
  background:var(--bg-deep);color:var(--ink);
  font-family:var(--font-mono);font-size:0.72rem;
  padding:7px 11px;border-radius:2px;
  border:1px solid var(--line-strong);
  max-width:230px;line-height:1.5;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
}
.tooltip-bubble.is-visible{opacity:1;}

/* --- Feed（Labs/Journal） --- */
.feed{display:flex;flex-direction:column;}
/* Labs/Journal — reading page: quiet typographic hover only, no card-style motion */
/* 2026-08-09: Labs/Journal一覧(page-labs.php)限定でカテゴリー列を非表示にする。
   カテゴリー機能(WordPress標準/PHP側のデータ取得)自体は撤去せず、表示のみを
   このスコープ付きクラスで隠す。TOPページのプレビューカードは.feed-item(共通クラス)
   をそのまま使っており、この.feed--no-catスコープの外なので影響しない。
   将来カテゴリー運用を再開する際は、page-labs.phpの<div class="feed">から
   "feed--no-cat"クラスを外すだけで元の3カラム表示に戻る。 */
.feed--no-cat .feed-item{grid-template-columns:1fr 80px;}
.feed--no-cat .feed-cat{display:none;}
.feed-item{
  display:grid;grid-template-columns:160px 1fr 80px;align-items:baseline;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--line);max-height:80px;overflow:hidden;
  transition:opacity .3s ease,max-height .3s ease,padding .3s ease,margin .3s ease;
}
.feed-item:last-child{border-bottom:none;}
.feed-item:hover .feed-title{color:var(--sand);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;}
.feed-cat{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;color:var(--slate);text-transform:uppercase;}
.feed-title{font-family:var(--font-body);font-size:1.05rem;color:var(--ink);transition:color .2s ease;}
.feed-date{font-family:var(--font-mono);font-size:0.82rem;color:var(--ink-faint);text-align:right;}

/* --- Feed empty state / Pagination（Labs/Journal） ---
     paginate_links(type=list) は <ul class="page-numbers"><li>...</li></ul> を吐く。
     デザインは filter-btn とほぼ同一(モノスペース + 罫線ボタン)を踏襲。 */
.feed-empty{color:var(--ink-dim);}
.pagination{margin-top:clamp(40px,6vw,64px);}
.pagination ul.page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;margin:0;}
.pagination .page-numbers{
  display:inline-block;
  font-family:var(--font-mono);font-size:0.82rem;
  padding:10px 14px;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--ink-dim);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.pagination a.page-numbers:hover,.pagination a.page-numbers:focus-visible{
  border-color:var(--sand);color:var(--ink);
}
.pagination .page-numbers.current{
  border-color:var(--sand);color:var(--sand);background:var(--bg-card);
}
.pagination .page-numbers.dots{border-color:transparent;}

/* --- Feed filter --- */
.feed-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
.filter-btn{
  font-family:var(--font-mono);font-size:0.78rem;
  border:1px solid var(--line-strong);border-radius:2px;
  padding:12px 16px;color:var(--ink-dim);
  background:none;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.filter-btn:hover{border-color:var(--sand);color:var(--ink);}
.filter-btn.is-active{border-color:var(--sand);color:var(--sand);background:var(--bg-card);box-shadow:inset 0 -2px 0 var(--sand);}
.filter-btn.is-echo{border-color:var(--sand);color:var(--ink);transition:border-color .15s ease,color .15s ease;}
.feed-item.is-filtered-out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-bottom-color:transparent;pointer-events:none;}

/* --- About date stamp (TOP only) --- */
.about-date{font-family:var(--font-mono);font-size:0.92rem;color:var(--ink-faint);letter-spacing:0.04em;}
/* ─── Approach Section ─────────────────────────────────── */
.approach-section{padding:clamp(64px,9vw,112px) 0;}
.approach-heading{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  margin-bottom:0.5rem;
}
.approach-lead{
  font-family:var(--font-body);
  font-size:clamp(0.88rem,1.2vw,1rem);
  color:var(--ink-dim);
  font-weight:300;
  line-height:1.7;
  max-width:520px;
  margin-bottom:clamp(36px,5vw,56px);
}
.approach-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1px;
  background:var(--line-strong);
  border:1px solid var(--line-strong);
}
.arch-card{
  background:var(--bg-light);
  padding:clamp(22px,3vw,32px) clamp(18px,2.5vw,28px);
  display:flex;
  flex-direction:column;
  gap:0;
  transition:background .2s ease;
}
.arch-card:hover{background:var(--bg-light-card);}
.arch-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-bottom:10px;
}
.arch-title{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.3;
  margin-bottom:18px;
}
.arch-roadmap{
  display:flex;
  flex-direction:column;
  border-left:1px solid rgba(201,174,130,0.35);
  padding-left:12px;
  margin-bottom:18px;
  gap:0;
}
.arch-step{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--ink-faint);
  line-height:1;
  padding:5px 0;
  position:relative;
}
.arch-step::before{
  content:'';
  position:absolute;
  left:-16px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(201,174,130,0.35);
}
.arch-step+.arch-step{margin-top:6px;}
.arch-step--origin{
  color:var(--sand);
  font-weight:500;
}
.arch-step--origin::before{
  background:var(--sand);
  width:5px;
  height:5px;
  left:-16.5px;
}
.arch-step--goal{
  color:var(--ink-dim);
}
.arch-step--goal::before{
  background:var(--ink-faint);
}
.arch-arrow{display:none;}
.arch-desc{
  font-family:var(--font-body);
  font-size:0.88rem;
  color:var(--ink-dim);
  line-height:1.65;
  font-weight:300;
  margin-bottom:16px;
  flex:1;
}
.arch-cost{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--ink-faint);
  letter-spacing:0.03em;
  padding-top:14px;
  border-top:1px solid var(--line-strong);
}
.arch-cost-value{
  color:var(--sand);
  font-weight:500;
}
.arch-cost-value--muted{
  color:var(--ink-faint);
  font-weight:400;
}

@media(max-width:900px){
  .approach-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .approach-grid{grid-template-columns:1fr;}
}
/* ──────────────────────────────────────────────────────── */

.about-strip{padding:clamp(40px,6vw,72px) 0;}

/* --- Fact（Capabilities） --- */
.fact{border-top:1px solid var(--line-strong);padding-top:14px;transition:opacity .5s ease,transform .4s ease;}
.fact:hover{transform:translateY(-2px);}
.fact-label{display:block;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;color:var(--slate);text-transform:uppercase;margin-bottom:8px;}
.fact-value{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);font-weight:500;}
/* 2026-08-11: 記事詳細(single.php)のDATE値だけ一段大きくする。共有クラス.fact-value本体
   (Capabilitiesの「Founded/Structure/Focus」でも使用)は変更せず、fact-sectionスコープの
   み上書きする。font-family/font-weight/color/letter-spacingは変更しない。 */
.fact-section .fact-value{font-size:1.3rem;}

/* --- Service Row（Services）---
   ヘッダーはwrap内に配置（テキスト位置をwrapコンテンツと揃える）。
   service-tagsは常にwidth:100vw+left:50%+translateX(-50%)で全幅配置し、
   max-height:0→opacityで開閉アニメーションする。
   open時のpadding = max(0px,(100vw - container)/2) + clamp padding
   = wrap auto-margin + wrap padding = wrapコンテンツと同じ開始位置。 */
.service-row{
  display:block;
  padding:0;
  border-bottom:1px solid var(--line);
  border-left:none;
  margin-left:0;
  background:none;
  transition:none;
  /* 閉じた時に scrollIntoView({block:start}) で row がヘッダー直下に揃うよう、
     scroll-margin-top を nav-height と揃える。sticky title の解除で発生する
     位置ジャンプを smooth scroll で吸収するのに使う。
     2026-07-24: 実際にはヘッダー直下ぴったりだと直前の行の文字がわずかに
     見切れて見えたため、8px分高め(ヘッダーに少し潜り込む位置)に着地するよう調整。
     下の .service-row.is-open .service-name の top と必ず同じ値にすること。 */
  scroll-margin-top:calc(var(--nav-height) - 12px);
}
.service-row:last-child{border-bottom:none;}
.service-row:hover{background:none;border-left:none;transform:none;}
/* v2.2.2 — デザインレビュー(2026-07-14): Capabilities chapter-nav / グローバルnavは
   「選択中=白(--ink)、非選択=ゴールド(--sand)」で統一されているが、Servicesの
   カテゴリバーだけ逆(選択中=ゴールド、非選択=白)になっていた。同一ルールに揃える。
   v2.1.9のhoverフィードバック(色変化のみ、開閉トリガーではない)は維持しつつ、
   色を sand→ink (選択に近づく予告、chapter-nav の hover{color:ink} と同じロジック)
   に変更する。 */
.service-row:not(.is-open):hover .service-name{color:var(--ink);}
/* v2.2.0 — デザインレビュー(2026-07-14): hover/focus時にボタン背景へ青みがかった
   グレーが付いていた。出どころはGeneratePress側と断定はしていない(未検証)。堀川さん
   によれば、拓海さんが視認性向上の観点であえて加えた可能性が高いとのこと。
   バグ修正ではなく、「Servicesは静かなブランドトーンで、hoverは文字色の変化だけに
   留める」という今回のデザイン方針に合わせた意図的な変更。拓海さんのコードレビュー時に
   誤解を避けるため、経緯をここに残す。
   .category-toggleはTOPの.structure-itemとも共有するクラスのため、Services専用の
   .service-name.category-toggle(複合セレクタ)でスコープし、他ページへ影響させない。 */
.service-name.category-toggle:hover,
.service-name.category-toggle:focus,
.service-name.category-toggle:focus-visible,
.service-name.category-toggle:active{background:none;background-color:transparent;}
.service-name{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--sand);
  background:none;border:none;padding:20px 0;margin:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  width:100%;transition:color .2s ease;
}
.service-name::after{
  content:'+';
  font-family:var(--font-mono);font-weight:400;font-size:1rem;
  color:var(--ink-dim);flex-shrink:0;margin-left:1rem;
  transition:color .2s ease;
}
.service-name:hover{color:var(--ink);}
.service-name:hover::after{color:var(--ink);}
/* is-open時のタイトル: sticky でヘッダー直下に追従。
   box-shadow + clip-path で背景を viewport 幅まで拡張し、下でスクロール中の
   beige tags を確実に隠す(wrap外まで背景を伸ばす)。z-index はheader(50)より下、
   コンテンツ(1)より上。 */
.service-row.is-open .service-name{
  color:var(--ink);
  position:sticky;
  /* 2026-07-24: 上の.service-row scroll-margin-topと同じ-8px調整。値を変える場合は
     必ず両方同時に変更すること(片方だけ更新すると再びズレが発生する)。 */
  top:calc(var(--nav-height) - 12px);
  z-index:5;
  background:var(--bg);
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(0 -100vmax);
}
.service-row.is-open .service-name::after{content:'−';color:var(--ink);}
.service-row.is-open .service-name::before{content:none;}
/* service-tagsは常にwidth:100vw・全幅中央寄せで配置。
   closed時はmax-height:0+opacity:0で非表示。
   width/left/transformはopen/closedに関わらず固定（アニメーション不要）。 */
.service-tags{
  display:block;
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  max-height:0;opacity:0;overflow:hidden;
  padding:0;
  /* background/color/padding も transition 対象に含める。以前は max-height と opacity
     しか transition していなかったため、閉じる時に background だけ snap で消えて
     テキストがdark背景上に残って見える不自然さがあった。全プロパティを揃えて
     フェード同期させる。 */
  transition:
    max-height .55s cubic-bezier(.2,.85,.3,1),
    padding .55s cubic-bezier(.2,.85,.3,1),
    opacity .5s ease,
    background-color .5s ease,
    color .5s ease;
}
/* open時：ベージュ背景+コンテンツ表示。
   padding計算: max(0px,(100vw-1180px)/2) + clamp(20px,5vw,64px)
   = wrapのauto margin + wrapのpadding = wrapコンテンツ開始位置と一致。
   v2.1.9 — デザインレビュー(Aris+堀川さん、2026-07-13): 従来はhover/focus-withinでも
   開いていたが、「Servicesは読むページ」という設計思想に対し、hoverで開いて
   読んでいる途中にマウスがそれて閉じてしまう挙動がUXとして不適切と判断。
   PC/Tabletもclick(is-open)のみで開閉する形に統一する(Mobileは元々tap/is-openのみ)。 */
.service-row.is-open .service-tags{
  max-height:140px;opacity:1;
  background-color:#E4DAC6;
  color:#2C2720;
  /* v2.1.7 — デザインレビュー(Aris+堀川さん、2026-07-13): .svc-group-label / .svc-detail-list li
     は var(--slate) / var(--ink-dim) を参照するが、この要素は .section-light を使わず
     background-color/color を直接指定しているため、暗背景用のデフォルト値
     (--ink-dim:#A39C8E, --slate:#6E7B82)のままベージュ背景に載っていた(低コントラスト)。
     新しい色を作らず、.section-light と同じ明背景用の値をそのまま再利用する。 */
  --ink-dim:#5C5346;
  --slate:#56646B;
  padding:20px max(clamp(20px,5vw,64px), calc((100vw - var(--container)) / 2 + clamp(20px,5vw,64px)));
}
.service-row.is-open{background:none;padding:0;margin-left:0;border-radius:0;}
.service-row.is-calm{opacity:.82;transition:opacity .3s ease;}

/* --- Services Architecture 6分類展開 --- */
.svc-arch.service-row.is-open .service-tags{max-height:600px;padding-top:28px;padding-bottom:28px;}
.svc-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 36px;width:100%;}
.svc-group{display:flex;flex-direction:column;gap:8px;}
.svc-group-label{
  font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--slate);
}
.svc-detail-list{list-style:none;display:flex;flex-direction:column;gap:4px;}
.svc-detail-list li{font-family:var(--font-body);font-size:0.88rem;color:var(--ink-dim);}

/* --- Form field（Contact） --- */
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;color:var(--slate);text-transform:uppercase;margin-bottom:8px;}
.field .required-mark{color:var(--sand);margin-left:4px;}
.field input,.field textarea{
  width:100%;background:var(--bg-card);border:1px solid var(--line-strong);border-radius:2px;
  padding:12px 14px;color:var(--ink);font-family:var(--font-body);font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field:focus-within label{color:var(--sand);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(201,174,130,0.25);}
.field input:not(:placeholder-shown):not(:focus),.field textarea:not(:placeholder-shown):not(:focus){border-color:var(--ink-dim);}
.field textarea{min-height:120px;resize:vertical;}

/* --- Footer --- */
footer{padding:48px 0 56px;background:var(--bg-deep);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 1.8rem;font-size:0.9rem;color:var(--ink-dim);}
/* Link Interaction Guideline v1.0 — 従来hover挙動が未定義だったため新規追加。
   nav-linksと同じパターン(Normal:現行カラー+下線常時表示/Hover:Off White文字+下線維持
   +translateX/Active:現行カラーへ戻す)。
   ※不具合修正: colorをここで明示しておらず、親要素からの継承がブラウザ標準のリンク色(青)に
   競り負けていた。 */
.footer-links a{
  display:inline-block;color:var(--ink-dim);
  text-decoration:underline;text-decoration-color:var(--ink-dim);text-underline-offset:3px;
  transition:color .25s ease,transform .25s ease,text-decoration-color .25s ease;
}
.footer-links a:hover,.footer-links a:focus-visible{
  color:var(--ink);
  text-decoration-color:var(--ink-dim);
  transform:translateX(3px);
}
.footer-links a:active{color:var(--ink-dim);}
.footer-legal{margin-top:22px;}
.footer-company{font-family:var(--font-body);font-size:0.85rem;color:var(--ink-dim);margin-bottom:4px;}
.footer-address{font-family:var(--font-body);font-size:0.78rem;color:var(--ink-faint);margin-bottom:10px;font-style:normal;}
.footer-meta{font-family:var(--font-body);font-size:0.78rem;color:var(--ink-faint);}

/* --- Button --- */
.btn{font-family:var(--font-mono);font-size:0.85rem;padding:10px 20px;border-radius:2px;cursor:pointer;display:inline-block;border:none;}
.btn-primary{background:var(--sand);color:#141414;border:none;transition:background-color .2s ease,transform .2s ease;}
.btn-primary:hover{background:#D6BD8E;transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(201,174,130,0.45);}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-strong);transition:border-color .2s ease,transform .2s ease;}
.btn-secondary:hover{border-color:var(--sand);color:var(--sand);transform:translateY(-1px);}

/* --- Chapter（Capabilities — Architecture/Consulting/Implementation/Operationsの4章構成。
     章ごとに見出し(index+title)を統一し、Architecture単独に見えないようにする。
     本文(.chapter-inner)はコラムとして扱う。レイアウトの基準はHero(.wrap=1180px、PC表示の
     実効コンテンツ幅は約1052px)とし、そこに近いところまで本文幅を拡大(1100px=実効幅約972px。
     可読性を保ちつつ専門誌・技術コラムの読み幅に近づけている)。
     4章すべてHTML側でsection-lightを付与し、Heroと同じライトベージュで統一(章ごとの
     背景色切り替えはせず、罫線(section標準のborder-bottom)と余白で章立てを表現する)。 --- */
/* main nav(sticky) + chapter-nav-shell(sticky) の合計高さ分下げてスクロール停止位置を揃える。
   v2.0.9時点で「隙間」自体は解消したが、デザインレビュー(Aris+堀川さん、2026-07-13)で
   「章タイトルが帯に押しつけられている」との指摘を受け+40px追加(v2.1.0)。
   その後の再レビューで「今度は少し離れすぎ」との指摘があり、+32pxへ8px分だけ詰める。 */
.chapter{scroll-margin-top:calc(var(--nav-height) + 96px);}

/* --- Capabilities 章ナビ (chapter-nav-shell) ---
   単一のsub-navを sticky で main nav 直下に貼り付ける。配色は main nav と同じ
   ダーク系(bg-deep + sand text) にして、beige のページ本文とは明確に区別する
   (旧toc-rowの見た目と同じ配色)。中の chapter-nav は desktop で 4カラム grid、
   mobile では横スクロール1行にする。current 章の .is-current は JS が scroll
   位置から更新する。 */
.chapter-nav-shell{
  position:sticky;
  /* v2.1.2 — デザインレビュー(Aris+堀川さん、2026-07-13): グローバルnavとの間に数px
     のベージュの隙間が見える不具合。--nav-height と実際のnav高さのサブピクセル単位の
     丸め誤差(4K等の高DPI環境で発生しやすい)が原因と考えられる。ピクセル一致を追い求める
     代わりに、2px分だけ意図的に潜り込ませる(dark同士の重なりは見えないが、隙間は
     背景色が見えて目立つため)。scroll-margin-top(+32px)は変更しない。 */
  top:calc(var(--nav-height) - 3px);
  z-index:40;
  padding:14px 0 12px;
  background:rgba(21,19,15,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.chapter-nav{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,2vw,24px);
}
.chapter-nav-item{
  border-radius:3px;
  transition:background-color .2s ease;
}
.chapter-nav-item a{
  display:block;
  padding:14px 12px;
  font-family:var(--font-display);font-weight:600;
  /* v2.0 — Capabilities Responsive Review: chapter-nav の4語はページ内リンクではなく
     N.H.Rの仕事の構造を示すコンテンツ要素のため、グローバルナビ(1.05rem)およびTOPの
     structure-label(最大1.45rem)を明確に上回るサイズへ引き上げる。 */
  font-size:clamp(1.15rem,2.4vw,1.85rem);
  color:var(--sand);
  letter-spacing:0.01em;
  text-decoration:none;
  text-align:center;
  transition:color .2s ease;
}
.chapter-nav-item a:hover,
.chapter-nav-item a:focus-visible{color:var(--ink);}
.chapter-nav-item.is-current a{color:var(--ink);font-weight:600;}

/* Mobile — v2.0 Capabilities Responsive Review: 横スクロール方式を廃止し、縦4段のスタックに変更する。
   4語(Architecture/Consulting/Implementation/Operations)が同時に視野へ入り、「N.H.Rの仕事の構造」を
   示す一つのコンパクトな視覚単位として読めることを優先する。個別ボタンには見せない(背景・枠線なし)。
   currentの背景ハイライトは付与しない(色/太さの変化のみ、既存の.is-currentルールを流用)。
   新しい状態遷移(開閉アニメーション等)は導入しない。 */
@media (max-width:760px){
  .chapter-nav{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .chapter-nav-item a{
    font-size:1.05rem;
    font-weight:600;
    line-height:1.3;
    padding:6px 4px;
    text-align:left;
  }
}
.chapter-inner{max-width:1100px;}
.chapter-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,6vw,64px);}
.chapter-index{font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.12em;color:var(--slate);text-transform:uppercase;}
/* Architecture — タイトル/リード/読む時間を1つのヘッダーとしてまとまりを持たせるグループ。
   chapter-index(章番号)とは18px(.chapter-head側)で区切り、グループ内は8pxで密に組む。 */
.chapter-titlegroup{display:flex;flex-direction:column;gap:8px;}
/* 「Architecture（アーキテクチャ）」のように括弧+和文を含めても本文カラム幅内で
   1行に収まるよう、上限を3.2remから2.4remへ調整(章タイトルとして十分な太さ・存在感は
   font-weight 600(h1-h3共通スタイル)で確保) */
.chapter-title{font-size:clamp(1.8rem,3.1vw,2.6rem);}
/* ライトベージュ背景でのコントラスト実測:bg-light(#F0E9DC)に対しsand(#C9AE82)は1.76:1で
   AA基準(4.5:1)に対して不十分なため、ダークチャコール系のink-dim(6.26:1)に変更。
   新しい色は追加せず、既存トークンの中から読みやすい組み合わせを選んでいる。 */
.chapter-lead{font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink-dim);}
.chapter-def{font-family:var(--font-body);font-size:clamp(0.95rem,1.4vw,1.05rem);color:var(--ink-dim);line-height:1.5;}
.chapter-meta{font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.04em;color:var(--ink-faint);}
.chapter-placeholder-note{font-family:var(--font-mono);font-size:0.85rem;letter-spacing:0.06em;color:var(--ink-faint);}

/* --- Architecture本文（コラムとして扱う。意味のまとまりごとにブロック化し、
     縦方向に間延びしないようブロック単位でのみ余白を取る。手動の<br>は使用せず、
     広げたカラム幅の中で自然な改行に委ねる。段落間余白は読み物としての自然な
     リズムを優先し、従来比約54%に圧縮。行間は変更していない） --- */
.story-block{
  font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.85;color:var(--ink);
  margin-bottom:clamp(18px,2.5vw,28px);
}
.story-block:last-child{margin-bottom:0;}

/* --- Architecture ナラティブ構造(Story×N.H.R俯瞰の交互配置)。2026-07-23確定。
     Storyは主人公の一人称視点、N.H.R俯瞰はN.H.R側の視点。宣言的な接続詞を使わず
     視点を切り替えるため、Story側のみ枠+背景色で囲み、N.H.R俯瞰側は地の色のまま
     何もつけない(この非対称さ自体が視点の違いを示す)。
     配色はB-1案(slate系の寒色寄りトーン+35%透過の細枠)で確定。ページ全体の
     暖色(ベージュ/クリーム)に対して温度差を作り、主人公が一人で立ち止まっている
     感覚を演出する狙い。新しいCSS変数は追加せず、この2クラスにのみ直値で適用する。
     現時点ではArchitectureセクションのみで使用(他章は既存の.story/.story-blockのまま)。 --- */
.chapter-story{
  background:#DCE1E0;
  border:1px solid rgba(86,100,107,0.35);
  border-radius:6px;
  padding:clamp(20px,3vw,32px) clamp(20px,3.5vw,36px);
  margin-bottom:clamp(20px,2.8vw,30px);
}
.chapter-story:last-child{margin-bottom:0;}
.chapter-story .story-block:last-child{margin-bottom:0;}

.chapter-view{
  margin-bottom:clamp(20px,2.8vw,30px);
}
.chapter-view:last-child{margin-bottom:0;}
.chapter-view .story-block:last-child{margin-bottom:0;}

@media (max-width:760px){
  .chapter-story{padding:20px 22px;border-radius:5px;}
}

/* --- Single post (single.php) — Labs/Journal個別記事の本文と末尾タグ列。
     single.php にインラインstyleが散在するのを避け、専用クラスとして分離する。
     本文色は section-light の ink に依存(inheritで十分だが明示しておく)。 --- */
.single-body{color:var(--ink);}
.single-tags{margin-top:32px;display:flex;gap:8px;flex-wrap:wrap;}

/* --- Keywords（Architecture本文末。ボタンではなく控えめなテキストリンク、外部情報への入口。
     Link Interaction Guideline v1.0適用: Normal=現行カラー(ink-dim)+下線常時表示。
     Hoverは文字色のみOff White相当(=このライト背景ではinkが最も読みやすい色)へ変化させ、
     下線色はink-dimのまま維持する(ブランドカラーを維持し、新しい配色は追加していない)） --- */
.keywords{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(48px,7vw,72px);padding-top:24px;border-top:1px solid var(--line);}
.keyword-tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:0.84rem;color:var(--ink-dim);letter-spacing:0.02em;
  text-decoration:underline;text-decoration-color:var(--ink-dim);text-underline-offset:3px;
  transition:color .25s ease,transform .25s ease,text-decoration-color .25s ease;
}
.keyword-tag:hover,.keyword-tag:focus-visible{
  color:var(--ink);
  text-decoration-color:var(--ink-dim);
  transform:translateX(3px);
}
.keyword-tag:active{color:var(--ink-dim);}

/* --- Contact（v2.3.0）---
   Layer1（Contact案内）とLayer2（N.H.R AI Contact Reference Implementation）の
   2層構造。デザイン確定はHTMLモック v11。値はv11から一切変更していない。
   Layer2は意図的に.section-lightを付与せず、ルートのDarkトークンを使う
   （白〜グレー系の文字 + Dark Brown背景）。
   AI Contact Widget（実物）は本テーマの対象外。既存の実装済みWidgetが
   画面右下に表示される前提で、Contact側には何も追加していない。 --- */

/* Layer 1 — Contact案内。可読性最優先、Darkカードは使わない。 */
.contact-hero-lead{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.28rem,2.4vw,1.6rem);line-height:1.65;color:var(--ink);
  max-width:680px;margin-bottom:clamp(20px,3vw,26px);
}
/* 「AI Contact」= 右下Widgetと同じ見た目のチップとして文中に埋め込む。
   「この見た目のものを右下で探せばよい」という認識をテキストのみで作る
   （疑似UIの再現ではない）。 */
.chip-ai-contact{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-deep);color:var(--sand);
  font-family:var(--font-mono);font-weight:500;font-size:0.85em;letter-spacing:0.02em;
  border-radius:999px;padding:3px 14px 3px 10px;vertical-align:middle;white-space:nowrap;
}
.chip-ai-contact svg{width:13px;height:13px;flex-shrink:0;}
.contact-hero-sub{
  font-family:var(--font-body);font-size:clamp(1.02rem,1.5vw,1.12rem);line-height:1.85;
  color:var(--ink);max-width:640px;
}
.contact-hero-pointer{
  display:flex;align-items:center;gap:8px;margin-top:clamp(28px,4vw,36px);
  font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.04em;color:var(--ink-dim);
  max-width:680px;justify-content:flex-end;
}
.contact-hero-pointer svg{width:15px;height:15px;flex-shrink:0;}

/* Layer 2 — N.H.R AI Contact（Reference Implementation）。
   Darkは背景全体のみに使い、囲み枠・見出しバー・左アクセント線は使わない。 */
.system-section{
  padding-top:clamp(56px,8vw,88px);padding-bottom:clamp(72px,10vw,120px);
  background:#443C31; /* デザイン確定値。変更しないこと */
  border-top:1px solid var(--line);
  --slate:#8B9EA7; /* Layer2限定オーバーライド。ルートの--slate(#6E7B82)には影響しない */
}
/* 静かなラベル行 — Darkの塗りバーは使わず、テキスト+アウトラインバッジのみ。
   常時点灯のドット(sand)だけを稼働中である事の最小限のサインとして残す。 */
.system-label-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,56px);}
.system-label{font-family:var(--font-mono);font-size:0.82rem;letter-spacing:0.04em;color:var(--ink-dim);}
.system-badge{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:0.68rem;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--slate);
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 12px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 0 rgba(201,174,130,.5);animation:pulseDot 2.4s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(201,174,130,0.45);}50%{box-shadow:0 0 0 5px rgba(201,174,130,0);}}

.panel-intro{max-width:620px;margin-bottom:clamp(40px,6vw,56px);}
.panel-intro-title{font-size:clamp(1.15rem,1.9vw,1.4rem);margin-bottom:10px;color:var(--ink-dim);font-weight:600;}
.panel-lead{font-family:var(--font-display);font-weight:500;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--ink-dim);margin-bottom:clamp(16px,2.5vw,20px);}
.panel-intro p{font-size:0.98rem;line-height:1.85;color:var(--ink);margin-bottom:14px;}
.panel-intro p:last-child{margin-bottom:0;}
.panel-divider{border-top:1px solid var(--line-strong);margin:clamp(40px,6vw,56px) 0;}
.zone-head{margin-bottom:clamp(24px,3.5vw,32px);}
.zone-head h3{font-size:clamp(1.15rem,1.8vw,1.35rem);margin-top:4px;margin-bottom:8px;}
.zone-lead{font-family:var(--font-body);font-size:0.92rem;color:var(--ink-dim);max-width:560px;line-height:1.7;}

/* Structure / How It Works — 横方向フロー。AIが担当する工程だけSandで強調する。 */
.flow-strip{display:flex;flex-wrap:nowrap;position:relative;margin-top:clamp(28px,4vw,40px);}
.flow-strip::before{content:'';position:absolute;top:17px;left:0;right:0;height:1px;background:var(--line-strong);z-index:0;}
.flow-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 6px;}
.flow-node-marker{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.82rem;
  background:var(--bg-deep);color:#A39C8E;border:1px solid rgba(163,156,142,0.35);
}
.flow-node.is-ai .flow-node-marker{color:var(--sand);border-color:var(--sand);}
.flow-node-title{font-family:var(--font-display);font-weight:600;font-size:0.9rem;color:var(--ink);line-height:1.5;}
.flow-node-badge{
  display:inline-block;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:2px 9px;border-radius:2px;background:var(--bg-deep);color:#A39C8E;
}
.flow-node.is-ai .flow-node-badge{color:var(--sand);}

/* Specification / Reference Specification — 項目・採用構成・採用理由の3列。 */
.spec-list{margin-top:clamp(20px,3vw,28px);}
.spec-row{display:grid;grid-template-columns:170px 1fr 1.5fr;gap:clamp(14px,2.5vw,28px);padding:14px 0;border-top:1px solid var(--line-strong);align-items:baseline;}
.spec-row:last-child{border-bottom:1px solid var(--line-strong);}
.spec-item{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.05em;color:var(--slate);text-transform:uppercase;}
.spec-config{font-family:var(--font-mono);font-weight:500;font-size:0.92rem;color:var(--ink);}
.spec-reason{font-family:var(--font-body);font-size:0.86rem;color:var(--ink-dim);line-height:1.6;}
.spec-note{margin-top:18px;font-family:var(--font-body);font-size:0.8rem;color:var(--ink-faint);}

/* Reference Implementation の締め。CTAは設置しない（右下の実Widgetへ委ねる）。 */
.panel-close p{font-size:0.96rem;line-height:1.85;color:var(--ink-dim);margin-bottom:10px;max-width:640px;}
.panel-close p:last-of-type{margin-bottom:0;}


/* ==========================================================================
   4.5 RESPONSIVE OVERRIDES
   ブレークポイント方針:
   - 980px: nav-links(4項目)を畳んでhamburger化。hero-innerも同時に1カラムスタック。
     Labs/Journalを含む4リンク+ロゴが900-960px帯で詰まるため、余裕をもって早めに畳む。
   - 900px: Capabilities structure-row を 4→2 列、Services svc-groups を 3→2 列、
     Services accordion 展開時の max-height をmobile向けに拡張。
   - 761-980px: v2.0で新設したTabletの帯(既存の760/980の間、重複なし)。現時点では
     Capabilities page-head(.page-head--capabilities)のみがこの帯を使用する。
   - 760px: 本格的なmobile。structure/svc/feed/fact/service-rowを1列化、footer縦積み。
     v2.0でヘッダー(.nav-inner/.logo-img/.logo-legal)と --nav-height もこの帯で縮小・
     同期する(全ページ共通のheader.phpに影響するため実装後に他ページも目視確認が必要)。
   位置注意: COMPONENTS の base rule と同じ詳細度で上書きするため、必ず COMPONENTS の
   後(=このセクション)に置く。CSS上部に置くと同詳細度で source order 負けする。
   ========================================================================== */

/* --- Contact（v2.3.0）Responsive ---
   PC: How It Worksは横方向フロー、Reference Specificationは3列。
   Mobile(<=760px): フローは縦の接続ラインへ、Specificationは1列へ切り替える。
   .page-head/.wrap等の共通クラスは変更していないため、他ページの
   ブレークポイント挙動には影響しない。 */
@media (max-width:760px){
  .contact-hero-pointer{justify-content:flex-start;}
  .spec-row{grid-template-columns:1fr;gap:6px;padding:16px 0;}
  .flow-strip{flex-direction:column;gap:24px;align-items:stretch;}
  .flow-strip::before{top:0;bottom:0;left:17px;right:auto;width:1px;height:auto;}
  .flow-node{flex-direction:row;text-align:left;align-items:center;gap:16px;padding:0;}
  .flow-node-marker{margin:0;}
  .system-label-row{gap:10px;margin-bottom:32px;}
}

/* v2.0 — Capabilities Responsive Review: page-head の Tablet/Mobile 個別値。
   .page-head--capabilities でスコープし、他ページ(.page-head を共有する
   Services/Labs/Contact)には影響しない。
   Tablet範囲(761-980px)は既存の 760px(mobile切替)と 980px(nav hamburger化)の
   間に新設する帯で、既存ブレークポイントとは重ならない。
   v2.0.6: --subnav-height は scroll-margin-topの巻き戻しに伴い削除(+64px固定に戻した)。
   chapter-nav-shellのsticky構造・アンカー位置・current判定は別途まとめて再設計する。 */
@media (min-width:761px) and (max-width:980px){
  .page-head--capabilities{padding-top:96px;}
  .page-head--capabilities h1{font-size:40px;}
  /* 2026-07-27 Arisレビュー: TabletではHero-innerが1カラムにスタックし、
     Heroコピー(CTAまで)と図版が縦に並ぶ。この間隔が詰まって見えるため、
     図版側にmargin-topを追加。また、図版が幅いっぱいに広がりすぎているため、
     左右にごく僅かな余白(7%)を持たせる。 */
  .hero-figure{margin-top:28px;}
  .diagram-card{max-width:93%;margin-left:auto;margin-right:auto;}
  /* 2026-08-03: Hero見出し(clamp)のvw部分は644px前後で早々に上限へ張り付くため、
     768px(Tablet)もPC(1920px)と全く同じ最大サイズになっていた。画面幅に対する
     比率で見るとTabletでは約2.5倍の存在感になっていたため、Tablet専用に
     約20%縮小する。 */
  .hero h1{font-size:2.8rem;}
  .hero-jp{font-size:0.88rem;}
  .hero-biz{font-size:1.1rem;}
  /* v2.1.3 — デザインレビュー(Aris+堀川さん、2026-07-13): Tabletでは、chapter-nav-shell
     自体がPCより薄い(padding上書きがなく基本値のまま、実高さ約87-91px)ため、PC用に
     調整した .chapter の scroll-margin-top(+96px)をそのまま使うと、Architectureへの
     アンカー着地時にscrollYがchapter-nav-shellのsticky発動閾値にわずかに届かず、
     navとの間に大きな隙間が生じていた。
     v2.1.4: +56px→+80pxへ変更したが、これは方向を誤っていた。scroll-margin-topを
     大きくするとscrollY(=offsetTop-scrollMarginTop)は逆に小さくなり、sticky発動に
     必要なスクロール量が減ってしまう。実機で隙間が悪化(約21px相当)したことで判明。
     v2.1.5: 正しい方向(値を小さくしてscrollYを増やす)で+24pxへ修正。+56px時点の
     理論マージン(約33px)でも実機では不足していたため、今回はマージンを約65pxまで
     大きく確保する。PC(+96px/-2px)・Mobileには一切影響しない。 */
  .chapter{scroll-margin-top:calc(var(--nav-height) + 24px);}
  .chapter-nav-shell{top:calc(var(--nav-height) - 5px);}
}
@media (max-width:760px){
  /* v2.0.5: .page-head--capabilities単独(詳細度0-1-0)だと、後段の共有ルール
     .page-head{padding-top:96px;}(同じ0-1-0)に記述順で負けて28pxが適用されない不具合が
     あったため、.page-head.page-head--capabilities(0-2-0)へ変更し確実に上回らせる。 */
  .page-head.page-head--capabilities{padding-top:28px;}
  .page-head--capabilities h1{
    font-size:27.2px;
    /* "Capabilities"の英単語が文字単位で不自然に折り返されるのを防ぐ。
       CJK部分の自然な改行(「（」の直前禁則等)はブラウザ標準の挙動に委ねる。 */
    word-break:keep-all;
  }
}
/* v2.0.3 — Capabilities Responsive Review (PC帯厚み再々調整): 実装者が比較対象にしていた
   「約138px」の過去検証画像は元のPC版とは別物(本セッション以前の別の中間検証時点のもの)
   だったと判明。元のPC版(レスポンシブ対応前)を実測した結果、chapter-nav-shellは約224px
   の独立した色面として設計されていた。文字サイズは現行と同一(グリフ高さ実測で同じ)だった
   ため、差は帯のpaddingのみに起因する。実測/理論比(約96%)から逆算し、74px 0 へ引き上げる。 */
@media (min-width:981px){
  /* 2026-08-03 堀川さんレビュー: PC(4K 43インチ1/4表示等)で章ナビ帯が過剰に大きく、
     コンテンツセクションのように見えるとの指摘。padding(74px)がこの帯の縦方向の高さの
     支配的要因(リンク自体のpadding14pxやTabletとの共有部分は変更しない)。
     まずは現行比75%程度を目安に48pxへ圧縮。最終値は実画面確認後に再調整する前提。 */
  .chapter-nav-shell{padding:48px 0;}
  /* 2026-08-11 堀川さんレビュー: 記事詳細(single.php)の本文が、PCでは広い画面・余白・
     タイトルとの相対関係でやや小さく見えるとの指摘。.single-bodyはbody{font-size:16px}を
     継承していたが、PCだけ18pxへ引き上げる。line-height(1.7)はbodyから継承したまま
     変更しない。Tablet/Mobileはこのmin-width:981pxの範囲外のため16pxを維持する。 */
  .single-body{font-size:18px;}
}
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-links.is-open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg-deep);
    padding:16px clamp(20px,5vw,64px) 24px;gap:1.1rem;
    border-bottom:1px solid var(--line);
  }
  .nav-toggle{display:flex;}
  .hero-inner{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .structure-row{grid-template-columns:repeat(2,1fr);}
  .svc-groups{grid-template-columns:repeat(2,1fr);}
  /* Services accordion: 1列展開時に内容が縦に伸びるため max-height を拡張 */
  .service-row.is-open .service-tags{max-height:400px;}
  .svc-arch.service-row.is-open .service-tags{max-height:1600px;}
}
@media (max-width:760px){
  /* v2.0 — Mobileグローバルヘッダー: ロゴ+ハンバーガーのみの薄いブランド層に縮小する。
     この変更はheader.php(.nav)が全ページ共通のため、Capabilitiesに限らず全ページの
     ヘッダー高さに影響する。--nav-height を実際のヘッダー高さと同期させることで、
     chapter-nav-shell / service-row(is-open) の sticky 位置ズレを解消する
     (以前は --nav-height:96px 固定に対し実ヘッダーが約74pxまで縮んでいたため、約22pxの
     隙間が発生していた)。法人名(.logo-legal)は「ロゴ+ハンバーガーのみ」の方針に基づき非表示にする。
     v2.1.6 — デザインレビュー(Aris+堀川さん、2026-07-13): DevTools実測(.nav rect.height)で
     nav実高さは67pxと判明(--nav-toggleの44px×44pxがlogo-img28pxより支配的だったため)。
     従来の74pxは7px過大で、chapter-nav-shellがsticky固定された際(Consulting以降、
     Architectureは通常フロー位置のままのため症状が出なかった)に約5pxの隙間として
     露出していた。67pxへ修正することで、既存の共通ルール
     top:calc(var(--nav-height) - 2px) がそのまま 65px を返し、PC(99→97)・
     Tablet(99→95)と同じ「2px潜り込む」設計に自然に揃う。Mobile専用の追加ルールは不要。 */
  :root{--nav-height:67px;}
  .nav-inner{padding-top:11px;padding-bottom:11px;}
  .logo-img{height:28px;}
  .logo-legal{display:none;}
  /* v2.2.4 — TOP Hero 光学調整(Design Freeze前, 2026-07-14): iPhone12 Pro相当の幅で
     Reference Architecture図版の下部が1画面に収まっていなかった件。図版サイズは
     変更せず、Hero全体をわずかにコンパクト化して吸収する。h1のfont-sizeを約7%、
     margin-bottomを約33%、Hero上下paddingも少しだけ詰める(数%〜数pxレベルの調整)。 */
  .hero{padding-top:40px;padding-bottom:44px;}
  .hero h1{font-size:1.9rem;margin-bottom:2rem;}
  .page-head{padding-top:96px;}
  .structure-row{grid-template-columns:1fr;gap:18px;}
  .svc-groups{grid-template-columns:1fr;}
  .category-detail{max-width:none;}
  .feed-item{grid-template-columns:1fr;gap:6px;padding:16px 0;max-height:150px;}
  .feed-date{text-align:left;}
  .fact-grid{grid-template-columns:1fr;gap:18px;}
  .service-row{grid-template-columns:1fr;gap:10px;}
  section{padding:52px 0;}
  .footer-inner{flex-direction:column;align-items:flex-start;}
  /* v2.0.4 — Capabilities Responsive Review (Mobile本文密度): Capabilitiesは読み物ページの
     ため、Mobileでは行間・余白を中心に圧縮して1画面あたりの情報量を増やす。font-sizeは
     可読性を保つため小幅な調整に留める。対象クラスは page-capabilities.php専用
     (story-block/chapter-title/chapter-lead/chapter-def/chapter-head/chapter-titlegroup)
     のため他ページへの影響はない。page-head/chapter-nav自体はここでは変更しない。 */
  .chapter-head{gap:12px;margin-bottom:24px;}
  .chapter-titlegroup{gap:6px;}
  .chapter-title{font-size:24px;line-height:1.3;}
  .chapter-lead{font-size:16px;line-height:1.4;}
  .chapter-def{font-size:15px;line-height:1.45;}
  .story-block{font-size:17px;line-height:1.55;margin-bottom:14px;}
  /* Services: v2.1.9でhover/focus-withinによる開閉自体を廃止したため、旧来の
     「mobileでhoverキャンセル」パッチは不要になった(打ち消す対象が存在しない)。
     2026-07-24: .service-name(カテゴリタイトル)にMobile専用のfont-size縮小が
     漏れていた(他のCapabilities要素は縮小済み)。1.3rem→1.1rem に調整。 */
  .service-name{font-size:1.1rem;}
  /* 2026-07-24: scroll-margin-topとsticky topは別の役割だと分かった。
     scroll-margin-top(クリック直後にどこまでスクロールするか)を緩めると、
     直前の行が隠れきらず見切れてしまう。PC/Tabletと同じ-22pxのまま維持する。
     sticky top(スクロール中に貼り付く位置)だけをMobileで緩め、ヘッダーとの間に
     隙間を作る。scroll-margin-topより緩い値にしても、着地時点で既に前の行は
     隠れきっているため、隙間には前の行ではなく背景色が見えるだけになる。 */
  .service-row.is-open .service-name{top:calc(var(--nav-height) - 6px);}
}


/* ==========================================================================
   5. ANIMATION
   注記: ホバー時の transition（リンク・ボタン・Feed行など）は各Componentルール内に
        残しています。本セクションはスクロール演出と動き低減対応のみを扱います。
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.reveal .feed-item,.reveal .service-row,.reveal .fact{opacity:0;transform:translateY(14px);}
.reveal.is-visible .feed-item,.reveal.is-visible .service-row,.reveal.is-visible .fact{opacity:1;transform:translateY(0);}
.feed-item:nth-child(1),.service-row:nth-child(1),.fact:nth-child(1){transition-delay:.05s;}
.feed-item:nth-child(2),.service-row:nth-child(2),.fact:nth-child(2){transition-delay:.1s;}
.feed-item:nth-child(3),.service-row:nth-child(3),.fact:nth-child(3){transition-delay:.15s;}
.feed-item:nth-child(4),.service-row:nth-child(4){transition-delay:.2s;}
.feed-item:nth-child(5){transition-delay:.25s;}
.feed-item:nth-child(6){transition-delay:.3s;}
.feed-item:nth-child(7){transition-delay:.35s;}
.feed-item:nth-child(8){transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal .feed-item,.reveal .service-row,.reveal .fact{opacity:1;transform:none;transition:none;}
  .hero .eyebrow,.hero h1 .hero-line,.hero-biz,.hero-jp,.hero-tech,.hero-link,.hero-figure,.diagram-card{animation:none;}
  .dnode,.dline,.dlabel{transition:none;opacity:1;stroke-dashoffset:0;}
  .feed-item,.service-row,.fact,.tag,.btn-primary,.btn-secondary,.tooltip-bubble,.category-toggle,.service-name,.filter-btn,.keyword-tag,.nav-links a,.footer-links a,a.structure-label{transition:none;}
  .tag.is-pinged,.diagram-card.is-pinged{animation:none;box-shadow:none;}
  .service-row.is-calm{transition:none;}
  .filter-btn.is-echo{transition:none;}
  .stack-tags .tag,.diagram-card,.hero::before,body.is-settling,.dline.is-signal,.live-dot{animation:none;}
}