/* ===== a11y-css ===== */
.skip-link{position:fixed!important;left:0!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;font-size:0!important;line-height:0!important;color:transparent!important;background:transparent!important;z-index:-1!important;transform:translateY(-200%)!important}
.skip-link:focus{position:fixed!important;left:8px!important;top:8px!important;width:auto!important;height:auto!important;padding:12px 20px!important;margin:0!important;opacity:1!important;pointer-events:auto!important;overflow:visible!important;font-size:12px!important;line-height:1.4!important;color:#050505!important;background:#00f0ff!important;z-index:100010!important;transform:none!important;outline:2px solid #fff!important;font-family:'JetBrains Mono','Noto Sans JP','Hiragino Kaku Gothic ProN',monospace;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #00f0ff;outline-offset:2px}
.nvm a{padding:10px 4px;display:inline-flex;align-items:center;min-height:40px}
.nvx a{padding:6px 2px}
.ftx-col a{padding:3px 0}

/* ===== 小さい文字のコントラスト確保（WCAG AA 4.5:1）=====
   ブランド色の色味は保ったまま、判読できる明度まで引き上げ。
   大きな見出し・背景色としての利用には影響しません。 */
.font-mono.text-ntech-blue,.text-ntech-blue.font-mono,
a.text-ntech-blue,span.text-ntech-blue,p.text-ntech-blue,div.text-ntech-blue{color:#3D7BFF!important}
.font-mono.text-kendo-red,.text-kendo-red.font-mono,
a.text-kendo-red,span.text-kendo-red{color:#E8455C!important}
/* 暗い背景のページに限定して適用（明るい背景での可読性低下を防ぐ） */
body:not(.light-theme) .text-gray-600{color:#8A94A6}
body:not(.light-theme) .text-gray-500{color:#9CA3AF}

/* ===== コントラスト最終調整（残存箇所を個別に） ===== */
body:not(.light-theme) .eyebrow,body:not(.light-theme) .text-kendo-red{color:#E8455C}
.roi-sub{color:#A0A8B4!important}
body:not(.light-theme) .text-gray-700{color:#8A94A6}
.nav-link-en,.msl-en{opacity:1!important}

/* スマホ：吹き出しがAIボタンを指すよう、AIを最上段・部品見積を最下段へ入れ替え
   2026-08-16 修正：この共通CSSは全62ページが読み込むため、
   3段積みが存在しないページ（採用ページなど、AIボタンしかない）にも
   156px が適用され、ボタンの下に2段ぶん(140px)の空白ができていた。
   実測（Chromium 149 / 390x844）:
     index    部品見積16px / TOOLS 90px / AI 156px  → 3段が詰まって正常
     recruit  AI 156px のみ                          → 下に空白
   :has() で「同じ画面に部品見積ボタンがある場合」に限定する。
   非対応ブラウザ向けに、body のクラスでも同じ判定を行う。 */
@media(max-width:768px){
  body:has(.floating-quote-cta) #sys-fab-btn,
  html body:has(.floating-quote-cta) button#sys-fab-btn,
  body.has-fab-stack #sys-fab-btn,
  html body.has-fab-stack button#sys-fab-btn{
    bottom:156px!important;right:16px!important}
  body .floating-quote-cta,html body a.floating-quote-cta{bottom:16px!important;right:16px!important}
}

/* 狭い画面ではヘッダーのナビを主要導線のみに絞る（折り返し防止） */
@media(max-width:560px){
  .nvm{gap:.6rem}
  .nvm a:nth-of-type(n+3){display:none}
  .nvm a.cta{white-space:nowrap;padding:6px 12px}
}
.nvm a{white-space:nowrap}

/* ===== アンカー移動時に見出しがヘッダーへ潜り込むのを防ぐ =====
   ページ内リンク（#history 等）でジャンプしたとき、
   固定ヘッダーの高さぶん手前で止まるようにする。 */
/* 旧指定は --hdr-offset による一元管理へ集約（下部に定義） */

/* 動きを減らす設定の利用者への配慮（今回追加した動きを無効化） */
@media (prefers-reduced-motion: reduce){
  .fab-guard{transition:none!important}
  .artcta,.ftx,.nvx,.nvm{animation:none!important}
  .skip-link{transition:none!important}
  html{scroll-behavior:auto!important}
}

/* ヘッダー高さが将来変わっても自動追従するよう、変数で管理 */
:root{--hdr-offset:96px}
@media(max-width:899px){:root{--hdr-offset:150px}}
html{scroll-padding-top:var(--hdr-offset)}
:target,h1[id],h2[id],h3[id],section[id],article[id],main[id],#main-content{scroll-margin-top:var(--hdr-offset)}

/* ===== jp-font-guard ===== */
/* ===== 日本語グリフの保険（2026-08-12）=====
   欧文フォント（JetBrains Mono / Oswald 等）には日本語が含まれないため、
   フォールバック先が中国語字形になることがある。
   日本語フォントを常に後続に置き、字形のブレを防ぐ。 */
.font-mono,[class*="font-mono"],code,kbd,pre,samp,
.news-pn-home,.news-pn-home-link,[class*="news-pn"],
.mob-subnav-link,.kendo-subnav-link,.skip-link,
[class*="fqcta"],[class*="mm-"],.artcta,.artcta *,.ftx,.ftx *{
  font-family:'JetBrains Mono','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Meiryo',monospace!important}
.font-display,[class*="font-display"],.font-oswald,
[class*="stat-"],[class*="-num"],[class*="metric"],[class*="counter"],
.rmb-number,.sol-counter,.count-up{
  font-family:'Oswald','Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif!important}
h1,h2,h3,h4,h5,h6{font-family:inherit}
body{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Meiryo',sans-serif}

/* 欧文専用クラスにも日本語フォントを後続指定（数値＋単位の混在に対応） */
[class*="font-eng"],[class*="font-en"],[class*="font-display"],[class*="font-oswald"],
[class*="font-heading"],[class*="font-num"]{
  font-family:'Oswald','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif!important}
/* 最終保険：日本語が含まれうる全要素の既定 */
body,body *:not(svg):not(path){font-synthesis:none}

/* フォーム部品はブラウザ既定（Times/Arial）になり日本語が中国語字形になりうるため明示 */
input,select,textarea,button,option,optgroup,label,fieldset,legend,table,th,td{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Meiryo',sans-serif}

/* ルート要素にも既定を置く（継承の起点を日本語フォントにする） */
html{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic Medium','Meiryo',sans-serif}

/* ===== design-polish ===== */
/* ===== 質感の統一（2026-08-12）=====
   1. ブラウザ既定の ease を廃し、全体を同じ加減速曲線に揃える
   2. 白系の階調を4種から3種に整理
   3. セクション余白の規則外の値を8の倍数へ
   目的：個々の動きと間に「同じ設計者の手」を感じさせる */

:root{
  /* 減速主体。終わり際が静かに止まる曲線に統一 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: .2s;   /* 微細な反応 */
  --dur-2: .32s;  /* 標準 */
  --dur-3: .55s;  /* 大きな移動 */
}

/* ブラウザ既定の ease を使っている箇所を、設計された曲線に置換 */
a,button,input,select,textarea,
[class*="btn"],[class*="card"],[class*="link"],[class*="nav"],
[class*="fab"],[class*="cta"],[class*="menu"],[class*="tab"],
.ftx a,.artcta a,.mob-subnav-link,.kendo-subnav-link{
  transition-timing-function: var(--ease-out) !important;
}
/* 反応の速さも段階を揃える（0.15/0.25/0.35 のばらつきを吸収） */
a,button,[class*="link"],[class*="btn"]{transition-duration: var(--dur-2) !important}
[class*="card"],[class*="panel"]{transition-duration: var(--dur-3) !important}

/* 白の階調を整理：本文・補助・微細の3段のみ */
:root{
  --tx-1: #f5f5f5;                    /* 本文 */
  --tx-2: rgba(255,255,255,.62);      /* 補助 */
  --tx-3: rgba(255,255,255,.38);      /* 微細 */
}

/* セクション余白を8の倍数に丸める（126px → 128px） */
section[class*="py-"],section[style*="padding"]{scroll-margin-top:var(--hdr-offset)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important}
}

/* ===== print-css (print専用) ===== */
@media print{
/* ===== 印刷時の体裁 2026-08-12 =====
   製造業では「印刷して社内で回す」が日常。
   黒背景・白文字のまま印刷すると読めないため、
   紙に適した配色へ切り替える。 */
*,*::before,*::after{
  background:transparent!important;
  color:#111!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
}
html,body{background:#fff!important;color:#111!important}
/* 画面用の装飾・操作要素は印刷しない */
header,footer,nav,
.fab-guard,.skip-link,.hp-rail,.hp-head,
[class*="loader"],[class*="cursor-"],[class*="cad-grid"],
[class*="marquee"],[class*="ticker"],[class*="scan"],
.rmv-sec,.tmv-sec,.artcta,.ftx,
canvas,video,iframe,
[class*="mobile-menu"],[class*="subnav"],[class*="tools-menu"],
[aria-hidden="true"]:not(table):not(td):not(th){
  display:none!important;
}
/* 見出しと本文を紙向けに */
h1{font-size:20pt!important;margin:0 0 8pt!important;page-break-after:avoid}
h2{font-size:15pt!important;margin:14pt 0 6pt!important;page-break-after:avoid}
h3{font-size:12pt!important;margin:10pt 0 4pt!important;page-break-after:avoid}
p,li,td,th{font-size:10pt!important;line-height:1.7!important}
img{max-width:100%!important;page-break-inside:avoid}
table,figure,section{page-break-inside:avoid}
/* リンクは印刷では下線のみ */
a{text-decoration:underline!important}
/* 外部リンクのURLを併記（紙から辿れるように） */
a[href^="http"]:not([href*="ntech.co.jp"])::after{
  content:" (" attr(href) ")";font-size:8pt;color:#555!important;word-break:break-all;
}
/* 各ページの先頭に社名を出す */
body::before{
  content:"株式会社エヌテック  ntech.co.jp";
  display:block;font-size:9pt;color:#555!important;
  border-bottom:1px solid #ccc;padding-bottom:6pt;margin-bottom:12pt;
}
@page{margin:14mm 12mm}

/* インライン指定・背景画像も確実に消す */
[style*="background"]{background:#fff!important;background-image:none!important}
body,main,section,article,div{background-image:none!important}
/* 残る固定要素を除去 */
[style*="position:fixed"],[style*="position: fixed"]{display:none!important}

/* 非表示にしたブロックの子孫も確実に除外 */
.rmv-sec *,.tmv-sec *,.artcta,.artcta *,.ftx,.ftx *,
footer *,header *,nav *,[class*="subnav"] *{display:none!important}
/* !important 付きの色指定に勝つ */
p,li,td,th,h1,h2,h3,h4,span,a,div,em,strong,b,i{color:#111!important}
a{color:#0b3d91!important}

/* インラインstyleの背景・色に勝つ（最終防衛） */
html,body,[style]{background-color:#fff!important}
[style*="color"]{color:#111!important}
svg{fill:#111!important;stroke:#111!important}
}

/* ===== zoom-safe ===== */
/* ===== 文字サイズ拡大への対応 2026-08-12 =====
   ブラウザの文字拡大（150〜200%）は弱視の方が日常的に使う機能。
   拡大しても横スクロールや文字の切れが起きないようにする。 */
/* 固定幅ではなく上限指定にし、拡大時は縮む */
h1,h2,h3{overflow-wrap: break-word;word-break:normal}
[class*="whitespace-nowrap"]:not([class*="flex"]){white-space:normal!important}
/* 横に流すバーは拡大時も自分の中で収める
   2026-08-16 修正：条件が広すぎ、自動で流れ続けるティッカー
   （.animate-marquee / .marquee-inner）まで巻き込んでいた。
   ティッカーは中身が画面の3倍あるため overflow-x:auto を当てると
   PC・タブレット・スマホすべてで横スクロールバーが出ていた。
   ユーザー操作でスクロールさせたい要素だけに限定する。 */
[class*="overflow-x-auto"],
[class*="whitespace-nowrap"][class*="flex"]:not(.animate-marquee):not(.animate-marquee-reverse):not(.marquee-inner):not([class*="animate-marquee"]){
  max-width:100vw!important;overflow-x:auto!important}
/* ティッカーは親側で隠す（自身にスクロールを持たせない） */
.animate-marquee,.animate-marquee-reverse,.marquee-inner{
  overflow-x:visible!important;max-width:none!important}
/* 高さ固定の箱は、文字が増えたら伸びる */
[class*="h-["],[style*="height:"]:not(canvas):not(video):not(img):not(iframe){min-height:0}
/* 切り詰め表示は「…」を出して溢れさせない */
.mm-text,.msl-en,.msl-jp,.cat-card-subtitle{
  overflow:hidden;text-overflow:ellipsis}
/* ルート要素の拡大に追従させる */
body{overflow-x:clip}

/* 長い日本語が inline-block で折り返せず溢れるのを防ぐ */
span.inline-block,.inline-block{max-width:100%!important;overflow-wrap: break-word!important}
.artcta *,article *,.news-body *{overflow-wrap: break-word}

/* ===== narrow-fix ===== */
/* ===== 狭い画面（320px以下）での溢れ防止 2026-08-12 =====
   サブバーの横スクロール領域が親からはみ出し、
   ページ全体に横スクロールが生じる問題への対処。 */
@media (max-width:360px){
  /* 横に流すバーは、必ず自分の中でスクロールさせる */
  .mob-subnav-link,.kendo-subnav-link{flex:0 0 auto}
  [class*="whitespace-nowrap"][class*="flex"]:not([class*="animate-marquee"]):not(.marquee-inner){
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    max-width:100vw!important;scrollbar-width:none}
  [class*="whitespace-nowrap"][class*="flex"]::-webkit-scrollbar{display:none}
  /* 画面外へ広がる装飾は視界の外で止める */
  body{overflow-x:clip!important}
  main,section,header,footer{max-width:100vw;overflow-x:clip}
  /* 極小画面では見出しをさらに詰める */
  h1{letter-spacing:-.03em!important}
}

/* ============================================================
   2026-08-16: SCROLL表示の縦線が中央からずれる問題
   ------------------------------------------------------------
   コンテナは Tailwind の flex flex-col items-center で組まれているが、
   同じ要素に付く .reveal-text が display:block を後から当てるため、
   flex が解除され items-center が効かなくなっていた。
   結果、幅いっぱいのテキストは中央に見えるのに、
   幅1pxの縦線だけがコンテナ左端に落ちていた（ズレ＝テキスト幅の半分）。
   flex を復帰させる。hidden で隠す指定は尊重する。
   ============================================================ */
.reveal-text.flex-col:not(.hidden) { display: flex; }
@media (min-width: 768px) {
  .reveal-text.flex-col.hidden.md\:flex { display: flex; }
}

/* ============================================================
   2026-08-16: 事前ビルド漏れユーティリティの補完
   ------------------------------------------------------------
   本番は Tailwind を CDN から実行時生成しているため、
   HTML に書いたクラスはすべて有効になる。
   計測用は事前ビルドした site.css に置き換えているが、
   そこに含まれなかったクラスが 21 種あり、指定しても効かない状態だった。
   （文字サイズ・段組み・余白・罫線に効くものを含むため、
     本番と改行位置や見た目が変わる原因になっていた）
   ここで同等の定義を補う。値は Tailwind 既定に準拠。
   ブレークポイント: md=768 / lg=1024 / xl=1280 / 2xl=1536
   ============================================================ */

/* --- 画面幅によらないもの --- */
.p-0{padding:0}
.p-1{padding:.25rem}
.z-15{z-index:15}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.border-l-\[6px\]{border-left-width:6px}

/* --- md (>=768px) --- */
@media (min-width:768px){
  .md\:mb-2{margin-bottom:.5rem}
  .md\:mb-20{margin-bottom:5rem}
  .md\:mt-16{margin-top:4rem}
  .md\:pb-40{padding-bottom:10rem}
  .md\:gap-6{gap:1.5rem}
  .md\:gap-12{gap:3rem}
  .md\:w-24{width:6rem}
  .md\:h-12{height:3rem}
  .md\:text-\[10px\]{font-size:10px}
}

/* --- lg (>=1024px) --- */
@media (min-width:1024px){
  .lg\:text-\[9rem\]{font-size:9rem}
}

/* --- xl (>=1280px) --- */
@media (min-width:1280px){
  .xl\:gap-2{gap:.5rem}
  .xl\:tracking-\[0\.08em\]{letter-spacing:.08em}
}

/* --- 2xl (>=1536px) --- */
@media (min-width:1536px){
  .\32xl\:gap-3{gap:.75rem}
  .\32xl\:gap-4{gap:1rem}
  .\32xl\:text-\[10px\]{font-size:10px}
  .\32xl\:tracking-\[0\.1em\]{letter-spacing:.1em}
}


/* --- 事前ビルド漏れ（見た目系）の補完 2026-08-16 --- */
.bg-\[linear-gradient\(rgba\(0\,240\,255\,0\.05\)_1px\,transparent_1px\)\]{background-image:linear-gradient(rgba(0,240,255,0.05) 1px,transparent 1px)}
.bg-\[linear-gradient\(rgba\(0\,85\,255\,0\.05\)_1px\,transparent_1px\)\]{background-image:linear-gradient(rgba(0,85,255,0.05) 1px,transparent 1px)}
.bg-\[linear-gradient\(rgba\(251\,191\,36\,0\.05\)_1px\,transparent_1px\)\]{background-image:linear-gradient(rgba(251,191,36,0.05) 1px,transparent 1px)}
.bg-\[linear-gradient\(rgba\(255\,255\,255\,0\.05\)_1px\,transparent_1px\)\]{background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px)}
.bg-\[linear-gradient\(rgba\(74\,222\,128\,0\.05\)_1px\,transparent_1px\)\]{background-image:linear-gradient(rgba(74,222,128,0.05) 1px,transparent 1px)}
.bg-\[radial-gradient\(circle_at_center\,rgba\(0\,240\,255\,0\.15\)_0\%\,transparent_60\%\)\]{background-image:radial-gradient(circle at center,rgba(0,240,255,0.15) 0%,transparent 60%)}
.bg-\[radial-gradient\(circle_at_center\,rgba\(0\,85\,255\,0\.15\)_0\%\,transparent_60\%\)\]{background-image:radial-gradient(circle at center,rgba(0,85,255,0.15) 0%,transparent 60%)}
.bg-\[radial-gradient\(circle_at_center\,rgba\(251\,191\,36\,0\.15\)_0\%\,transparent_60\%\)\]{background-image:radial-gradient(circle at center,rgba(251,191,36,0.15) 0%,transparent 60%)}
.bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\.15\)_0\%\,transparent_60\%\)\]{background-image:radial-gradient(circle at center,rgba(255,255,255,0.15) 0%,transparent 60%)}
.bg-\[radial-gradient\(circle_at_center\,rgba\(74\,222\,128\,0\.15\)_0\%\,transparent_60\%\)\]{background-image:radial-gradient(circle at center,rgba(74,222,128,0.15) 0%,transparent 60%)}
.bg-\[rgba\(255\,255\,255\,0\.02\)\]{background-color:rgba(255,255,255,0.02)}
.bg-ntech-black\/97{background-color:rgba(5,5,5,0.97)}
.bg-ntech-gold\/10{background-color:rgba(201,162,39,0.10)}
.duration-400{transition-duration:400ms}
.ease-\[cubic-bezier\(0\.76\,0\,0\.24\,1\)\]{transition-timing-function:cubic-bezier(0.76,0,0.24,1)}
.hover\:bg-ntech-gold:hover{background-color:#c9a227}
.hover\:shadow-\[0_0_15px_rgba\(0\,240\,255\,0\.2\)\]:hover{box-shadow:0 0 15px rgba(0,240,255,0.2)}
.hover\:shadow-\[0_0_20px_rgba\(0\,85\,255\,0\.2\)\]:hover{box-shadow:0 0 20px rgba(0,85,255,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(0\,240\,255\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(0,240,255,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(0\,240\,255\,0\.5\)\]:hover{box-shadow:0 0 30px rgba(0,240,255,0.5)}
.hover\:shadow-\[0_0_30px_rgba\(0\,85\,255\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(0,85,255,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(200\,20\,40\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(200,20,40,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(251\,191\,36\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(251,191,36,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(255\,0\,60\,0\.8\)\]:hover{box-shadow:0 0 30px rgba(255,0,60,0.8)}
.hover\:shadow-\[0_0_30px_rgba\(255\,255\,255\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(255,255,255,0.2)}
.hover\:shadow-\[0_0_30px_rgba\(74\,222\,128\,0\.2\)\]:hover{box-shadow:0 0 30px rgba(74,222,128,0.2)}
.hover\:shadow-\[0_0_40px_rgba\(255\,0\,0\,0\.6\)\]:hover{box-shadow:0 0 40px rgba(255,0,0,0.6)}
.hover\:shadow-\[inset_0_0_20px_rgba\(0\,240\,255\,0\.5\)\]:hover{box-shadow:inset 0 0 20px rgba(0,240,255,0.5)}
.hover\:shadow-\[inset_0_0_20px_rgba\(0\,85\,255\,0\.5\)\]:hover{box-shadow:inset 0 0 20px rgba(0,85,255,0.5)}
.hover\:shadow-\[inset_0_0_20px_rgba\(251\,191\,36\,0\.5\)\]:hover{box-shadow:inset 0 0 20px rgba(251,191,36,0.5)}
.hover\:shadow-\[inset_0_0_20px_rgba\(255\,255\,255\,0\.5\)\]:hover{box-shadow:inset 0 0 20px rgba(255,255,255,0.5)}
.hover\:shadow-\[inset_0_0_20px_rgba\(74\,222\,128\,0\.5\)\]:hover{box-shadow:inset 0 0 20px rgba(74,222,128,0.5)}
.shadow-\[0_0_10px_rgba\(0\,240\,255\,0\.1\)\]{box-shadow:0 0 10px rgba(0,240,255,0.1)}
.shadow-\[0_0_10px_rgba\(0\,240\,255\,0\.2\)\]{box-shadow:0 0 10px rgba(0,240,255,0.2)}
.shadow-\[0_0_10px_rgba\(0\,85\,255\,0\.2\)\]{box-shadow:0 0 10px rgba(0,85,255,0.2)}
.shadow-\[0_0_10px_rgba\(74\,222\,128\,0\.2\)\]{box-shadow:0 0 10px rgba(74,222,128,0.2)}
.shadow-\[0_0_15px_rgba\(0\,240\,255\,0\.1\)\]{box-shadow:0 0 15px rgba(0,240,255,0.1)}
.shadow-\[0_0_15px_rgba\(0\,240\,255\,0\.15\)\]{box-shadow:0 0 15px rgba(0,240,255,0.15)}
.shadow-\[0_0_15px_rgba\(0\,240\,255\,0\.2\)\]{box-shadow:0 0 15px rgba(0,240,255,0.2)}
.shadow-\[0_0_15px_rgba\(0\,85\,255\,0\.15\)\]{box-shadow:0 0 15px rgba(0,85,255,0.15)}
.shadow-\[0_0_15px_rgba\(0\,85\,255\,0\.2\)\]{box-shadow:0 0 15px rgba(0,85,255,0.2)}
.shadow-\[0_0_15px_rgba\(251\,191\,36\,0\.15\)\]{box-shadow:0 0 15px rgba(251,191,36,0.15)}
.shadow-\[0_0_15px_rgba\(255\,255\,255\,0\.15\)\]{box-shadow:0 0 15px rgba(255,255,255,0.15)}
.shadow-\[0_0_15px_rgba\(255\,255\,255\,0\.2\)\]{box-shadow:0 0 15px rgba(255,255,255,0.2)}
.shadow-\[0_0_15px_rgba\(74\,222\,128\,0\.15\)\]{box-shadow:0 0 15px rgba(74,222,128,0.15)}
.shadow-\[0_0_15px_rgba\(74\,222\,128\,0\.2\)\]{box-shadow:0 0 15px rgba(74,222,128,0.2)}
.shadow-\[0_0_20px_\#fbbf24\]{box-shadow:0 0 20px #fbbf24}
.shadow-\[0_0_20px_rgba\(255\,0\,0\,0\.2\)\]{box-shadow:0 0 20px rgba(255,0,0,0.2)}
.shadow-\[0_0_30px_\#fbbf24\]{box-shadow:0 0 30px #fbbf24}
.shadow-\[0_0_30px_rgba\(0\,0\,0\,0\.8\)\]{box-shadow:0 0 30px rgba(0,0,0,0.8)}
.shadow-\[0_0_30px_rgba\(0\,240\,255\,0\.05\)\]{box-shadow:0 0 30px rgba(0,240,255,0.05)}
.shadow-\[0_0_30px_rgba\(0\,240\,255\,0\.4\)\]{box-shadow:0 0 30px rgba(0,240,255,0.4)}
.shadow-\[0_0_30px_rgba\(251\,191\,36\,0\.15\)\]{box-shadow:0 0 30px rgba(251,191,36,0.15)}
.shadow-\[0_0_30px_rgba\(251\,191\,36\,0\.4\)\]{box-shadow:0 0 30px rgba(251,191,36,0.4)}
.shadow-\[0_0_50px_rgba\(255\,0\,60\,0\.3\)\]{box-shadow:0 0 50px rgba(255,0,60,0.3)}
.shadow-\[0_10px_30px_rgba\(0\,240\,255\,0\.4\)\]{box-shadow:0 10px 30px rgba(0,240,255,0.4)}
.shadow-\[0_10px_30px_rgba\(6\,199\,85\,0\.3\)\]{box-shadow:0 10px 30px rgba(6,199,85,0.3)}
.shadow-\[0_10px_40px_rgba\(0\,85\,255\,0\.5\)\]{box-shadow:0 10px 40px rgba(0,85,255,0.5)}
.shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.5\)\]{box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.shadow-\[0_20px_50px_rgba\(0\,0\,0\,0\.8\)\]{box-shadow:0 20px 50px rgba(0,0,0,0.8)}
.shadow-\[0_30px_60px_rgba\(0\,0\,0\,0\.8\)\]{box-shadow:0 30px 60px rgba(0,0,0,0.8)}
.shadow-\[0_30px_60px_rgba\(255\,0\,60\,0\.15\)\]{box-shadow:0 30px 60px rgba(255,0,60,0.15)}
.shadow-\[inset_0_0_0_rgba\(0\,240\,255\,0\)\]{box-shadow:inset 0 0 0 rgba(0,240,255,0)}
.shadow-\[inset_0_0_0_rgba\(0\,85\,255\,0\)\]{box-shadow:inset 0 0 0 rgba(0,85,255,0)}
.shadow-\[inset_0_0_0_rgba\(251\,191\,36\,0\)\]{box-shadow:inset 0 0 0 rgba(251,191,36,0)}
.shadow-\[inset_0_0_0_rgba\(255\,255\,255\,0\)\]{box-shadow:inset 0 0 0 rgba(255,255,255,0)}
.shadow-\[inset_0_0_0_rgba\(74\,222\,128\,0\)\]{box-shadow:inset 0 0 0 rgba(74,222,128,0)}
.shadow-\[inset_0_0_15px_rgba\(255\,0\,60\,0\.2\)\]{box-shadow:inset 0 0 15px rgba(255,0,60,0.2)}
.shadow-\[inset_0_0_30px_rgba\(0\,240\,255\,0\.05\)\,_0_30px_60px_rgba\(0\,0\,0\,0\.8\)\]{box-shadow:inset 0 0 30px rgba(0,240,255,0.05), 0 30px 60px rgba(0,0,0,0.8)}


/* 2026-08-16: 横スクロール領域のバーは全幅で非表示にする。
   360px以下のブロックでは既に隠していたが、通常幅では隠しておらず
   PC・タブレットでバーが見えていた。操作性は維持したまま見た目だけ揃える。 */
[class*="overflow-x-auto"],
[class*="whitespace-nowrap"][class*="flex"]:not([class*="animate-marquee"]):not(.marquee-inner){
  scrollbar-width:none;-ms-overflow-style:none}
[class*="overflow-x-auto"]::-webkit-scrollbar,
[class*="whitespace-nowrap"][class*="flex"]:not([class*="animate-marquee"]):not(.marquee-inner)::-webkit-scrollbar{
  display:none;height:0}


/* 2026-08-16: 残っていた横スクロール領域のバーを非表示に。
   いずれも「横に流して読ませる」意図の領域で、スクロール操作は残す。
   実測（Chromium 149 / PC1920・タブレット834・スマホ390）で
   バーが出ていた要素を個別に指定する。 */
.kendo-subnav,
nav[class*="subnav"],
.pq-parts-wrap,
.history-wrapper,
div.flex.whitespace-nowrap,
div.text-gray-300.text-xs.leading-loose{
  scrollbar-width:none;-ms-overflow-style:none}
.kendo-subnav::-webkit-scrollbar,
nav[class*="subnav"]::-webkit-scrollbar,
.pq-parts-wrap::-webkit-scrollbar,
.history-wrapper::-webkit-scrollbar,
div.flex.whitespace-nowrap::-webkit-scrollbar,
div.text-gray-300.text-xs.leading-loose::-webkit-scrollbar{
  display:none;height:0;width:0}


/* ============================================================
   2026-08-16: 文字が枠から溢れる箇所の是正
   ------------------------------------------------------------
   Chromium 149 で PC1920 / タブレット834 / スマホ390 の3幅を
   実測し、scrollWidth > clientWidth となった要素に対処する。
   原因は主に、日本語・英数字混在の長い行が折り返せていないこと。
   幅を変えるのではなく「折り返せるようにする」方針。
   ============================================================ */

/* 本文系：英数字の連続でも折り返す（日本語の禁則は保つ） */
.text-gray-300,
.text-gray-400,
.text-gray-500,
[class*="leading-relaxed"],
[class*="leading-loose"]{
  overflow-wrap: break-word;
  word-break:normal;
  min-width:0;
}

/* 見出し・ラベルの英数字：字間を保ったまま折り返す */
.font-eng,
[class*="font-mono"],
.pat-family-title-jp,
.nbk,
.hist-h3-years{
  overflow-wrap: break-word;
  word-break:normal;
  min-width:0;
}

/* flex の子は既定で縮まないため、溢れの温床になる */
.flex > *,
.inline-flex > *{ min-width:0 }
/* ただしティッカーとナビの項目は縮めない（流れ・並びが崩れるため） */
.animate-marquee > *,
.animate-marquee-reverse > *,
.marquee-inner > *,
.mob-subnav-link,
.kendo-subnav-link,
.en-nav-fit > a{ min-width:auto; flex:0 0 auto }

/* スマホでは、はみ出しやすい小さな注記をさらに詰める */
@media (max-width:430px){
  p[class*="text-[11px]"],
  div[class*="text-[10px]"],
  span.nbk,
  .pat-family-title-jp{
    overflow-wrap: break-word;
    letter-spacing:0!important;
  }
}


/* ============================================================
   2026-08-16: 本文が折り返せず溢れる問題
   ------------------------------------------------------------
   実測（Chromium 149）で、本文の親に white-space:nowrap が
   掛かっており、overflow-wrap を指定しても折り返せていなかった。
     例) index_en 1920px:
         div.text-gray-300  幅678 / 中身901  white-space=nowrap
   nowrap は「横に流すバー」に必要な指定なので全廃はできない。
   そこで、流す意図のない本文・説明文に限って解除する。
   ============================================================ */
.text-gray-300,.text-gray-400,.text-gray-500,
[class*="leading-relaxed"],[class*="leading-loose"],
.pat-family-quote,.pat-family-main,.pat-family-quote *,
p:not([class*="whitespace-nowrap"]),
li:not([class*="whitespace-nowrap"]){
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
/* ただし、横に流す・並べる要素の中では解除しない（並びが崩れるため） */
.animate-marquee *,.animate-marquee-reverse *,.marquee-inner *,
.mob-subnav-link,.kendo-subnav-link,
nav[class*="subnav"] *,.en-nav-fit *,
[class*="overflow-x-auto"] [class*="whitespace-nowrap"]{
  white-space: nowrap !important;
}


/* ============================================================
   2026-08-16: 横スクロールするサブナビで、項目が潰れる問題
   ------------------------------------------------------------
   実測（Chromium 149 / スマホ390px）で、index_en のサブナビ項目
   「01_CONCEPT」の幅が 8px まで潰れていた（本来は約60px）。
   親は横スクロール領域なので、子は縮まずに並ぶのが正しい。
   flex の既定（縮む）が効いていたため、明示的に止める。
   ============================================================ */
[class*="whitespace-nowrap"][class*="flex"] > a,
[class*="whitespace-nowrap"][class*="flex"] > span,
[class*="whitespace-nowrap"][class*="flex"] > div,
[class*="overflow-x-auto"] > a,
[class*="overflow-x-auto"] > span,
nav[class*="subnav"] > a,
.kendo-subnav > a{
  flex: 0 0 auto !important;
  min-width: max-content;
  white-space: nowrap !important;
}
/* ティッカーは対象外（送り量の計算が崩れるため） */
.animate-marquee > *,.animate-marquee-reverse > *,.marquee-inner > *{
  min-width: auto;
}


/* ============================================================
   2026-08-16: 残っていた小ラベル・英語見出しの溢れ
   ------------------------------------------------------------
   実測で残った2系統。いずれも横に流す要素ではないため折り返す。
     ・タグ状ラベル（Support_System / Flexibility / Advanced_Tech）
       → font-mono + 字間で幅が出て、枠から最大52px溢れていた
     ・英語見出し（THE SCIENCE OF CONTAINER DYNAMICS）
       → タブレット幅で90px溢れていた
   アンダースコア区切りの語も折り返せるようにする。
   ============================================================ */
span.text-ntech-cyan[class*="font-mono"],
span[class*="font-mono"][class*="text-[10px]"],
.pat-family-title-jp,
span.font-eng.font-bold{
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal;
  min-width: 0;
  max-width: 100%;
}
/* タブレット以下では英語見出しの字間を詰めて収まりを良くする */
@media (max-width: 1024px){
  span.font-eng.font-bold{ letter-spacing: .04em }
}


/* 2026-08-16: .nbk（改行禁止）はPCでの読みやすさのための指定だが、
   スマホ幅では枠を最大26px超えていた（unboxer.html 実測）。
   狭い画面でだけ解除する。PC・タブレットの見た目は変わらない。 */
@media (max-width: 767px){
  .nbk{ white-space: normal !important; overflow-wrap: break-word; }
}

/* 2026-08-16: 最後に残った7pxの溢れ（inspector.html / スマホ）。
   .nbk の解除だけでは足りなかった。閉じ括弧などの記号が行末で
   折り返せず、7pxだけはみ出していたため、子要素まで対象を広げる。
   日本語の禁則処理（行頭に句読点を置かない等）は維持する。 */
@media (max-width: 767px){
  .nbk, .nbk *{
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal;
  }
}

/* 2026-08-16: 最後の1件（inspector.html / スマホ / +7px）
   実測で判明：word-break:keep-all と line-break:strict が効いており、
   日本語を単語単位で扱うため、あと7pxが折り返せなかった。
   お客様の声カード（.voc-*）に限って、狭い画面でのみ解除する。
   PC・タブレットの読みやすさ（不自然な位置で切らない）は維持。 */
@media (max-width: 767px){
  .voc-card, .voc-card *, .voc-text, .voc-text *{
    word-break: normal !important;
    /* 2026-08-17: line-break を auto にすると禁則が緩み、
       行頭に「ー」「っ」「？」が出ていた。strict に戻す。
       溢れは overflow-wrap:break-word 側で吸収する。 */
    line-break: strict !important;
    overflow-wrap: break-word !important;
  }
}


/* ============================================================
   2026-08-17: 日本語の禁則処理を回復
   ------------------------------------------------------------
   溢れ対策で入れた overflow-wrap: break-word は「どこでも折る」ため、
   禁則処理（行頭に 。、ー 小書きカナ を置かない）を無効化していた。
   実測（Chromium 149 / 実フォント）で、行頭に「ー」9件・
   小書きカナ10件・「。」等が出ていた。

   break-word に変えると、通常は単語・文節を守り、
   どうしても収まらない長い連続文字だけを折る。
   あわせて line-break:strict で日本語の禁則を明示的に有効化する。
   ============================================================ */
html{ line-break: strict; }
p, li, h1, h2, h3, h4, h5, h6, dd, dt, figcaption, td, th,
.text-gray-300, .text-gray-400, .text-gray-500,
[class*="leading-relaxed"], [class*="leading-loose"]{
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  /* 日本語の行末揃えを自然にする（対応ブラウザのみ） */
  text-spacing-trim: trim-start;
}
/* 英数字の長い連続だけは、はみ出す場合に折る */
.text-gray-300, .text-gray-400, .text-gray-500,
p, li{ overflow-wrap: break-word; }

/* ============================================================
   2026-08-17: 行分割の最適化（孤立行の緩和）
   ------------------------------------------------------------
   最終行が1〜2文字になる現象（「す。」など）は日本語の自動折返しの
   正常な挙動で、文字サイズを個別に変えて逃がすのは
   ・画面幅で結果が変わる
   ・本文の統一感が崩れる
   ・本文更新で元に戻る
   の3点から実務的でない。

   text-wrap は、この問題のために策定された指定。
     pretty  … 最終行が極端に短くならないよう行分割を最適化（本文向け）
     balance … 各行の長さを揃える（見出し向け・数行までが対象）
   非対応ブラウザでは無視されるだけなので副作用がない。
   ============================================================ */
p, li, dd, dt, figcaption, blockquote, td,
.text-gray-300, .text-gray-400, .text-gray-500,
[class*="leading-relaxed"], [class*="leading-loose"]{
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6,
.hero-title, [class*="headline"], [class*="catch"], .eyebrow{
  text-wrap: balance;
}

/* ============================================================
   2026-08-17: 本文の行長を読みやすい範囲に収める
   ------------------------------------------------------------
   実測（PC1920）で、本文1行あたりの文字数は中央値37〜40字と
   日本語の推奨（35〜45字）に収まっているが、
   一部に131字に達する箇所があった。長すぎる行は
   ・目線が戻る距離が長く読み疲れる
   ・行末が1〜2文字になる確率が上がる
   ため、上限のみ設ける。中央値付近には影響しない。
   ============================================================ */
/* 2026-08-17 修正：46em を一律に当てると、元は37字だった段落まで
   46字に広がってしまった（max-width は下限ではなく上限だが、
   親が広い場合に既存の折返し位置が変わるため）。
   極端に長い行だけを抑えるよう、対象を「幅の制約が無い段落」に限定する。 */
p:not([class*="text-center"]):not([class*="marquee"]):not([class*="max-w"]):not([class*="w-"]),
li:not([class*="marquee"]):not([class*="max-w"]){
  max-width: 46em;
}
/* 中央寄せの文章・カード内・グリッド内は対象外（意図した幅があるため） */
[class*="text-center"] p, [class*="grid"] p, [class*="card"] p,
.hero p, header p, footer p{ max-width: none; }


/* 固定ボタンの配置をページ間でそろえる（2026-09-01）
   PC   : 右下に横並び。右から AI / TOOLS / 見積
   タブレット・スマホ : 右下に縦積み。上から AI / TOOLS / 見積 / TOP
   ページによって基準が 30px と 2rem で混在していたため、変数にまとめる。 */
:root{
  --fab-edge: 2rem;      /* 画面端からの距離 */
  --fab-size: 60px;      /* ボタンの直径 */
  --fab-gap: 16px;       /* ボタン同士の間隔 */
}
@media (max-width: 1024px){
  :root{ --fab-edge: 1rem; --fab-size: 52px; --fab-gap: 14px; }
}

/* --- PC：横並び（右から AI → TOOLS → 見積） --- */
.sys-fab,
.ai-fab{
  right: var(--fab-edge) !important;
  bottom: var(--fab-edge) !important;
}
.tools-fab{
  right: calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap)) !important;
  bottom: var(--fab-edge) !important;
}
.floating-quote-cta{
  right: calc(var(--fab-edge) + (var(--fab-size) + var(--fab-gap)) * 2) !important;
  bottom: var(--fab-edge) !important;
}

/* --- タブレット・スマホ：縦積み（上から AI → TOOLS → 見積 → TOP） --- */
@media (max-width: 1024px){
  .sys-fab,
  .ai-fab{
    right: var(--fab-edge) !important;
    bottom: calc(var(--fab-edge) + (var(--fab-size) + var(--fab-gap)) * 2) !important;
  }
  .tools-fab{
    right: var(--fab-edge) !important;
    bottom: calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap)) !important;
  }
  .floating-quote-cta{
    right: var(--fab-edge) !important;
    bottom: var(--fab-edge) !important;
  }
}

/* --- ボタンの見た目もそろえる --- */
.sys-fab,
.tools-fab,
.floating-quote-cta{
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
}
/* AIコンソールのロゴは白抜き（index.html と同じ処理） */
.sys-fab img{
  filter: brightness(0) invert(1) drop-shadow(0 0 8px #00f0ff) !important;
}

/* 製品ページの N コンシェルジュ（.ai-fab）も、他ページのボタンと同じ大きさにそろえる。
   ボタン本体は .ai-fab-button 側で描いているため、そちらに寸法を当てる。 */
.ai-fab-button{
  width: var(--fab-size) !important;
  height: var(--fab-size) !important;
}