*{box-sizing:border-box}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/NotoSansJP-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/NotoSansJP-700.woff2") format("woff2")}
@font-face{font-family:"Noto Serif JP";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/NotoSerifJP-700.woff2") format("woff2")}
body{margin:0;font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
 color:#22262b;background:#fff;line-height:2.05;font-size:16px;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* v2.80: palt（約物半角化）は見出しのみ。本文にかけると全角約物が詰まり
   「行間が狭い」印象の主原因になる。 */
h1,h2,h3,.nbox b,.card b,.mv__ttl,.mvb__txt h2,.mvb__txt h3{font-feature-settings:"palt" 1}
/* v2.80: 和文の快適な行長は 35〜45 字。版心全幅の正文は約 70 字になり
   「窮屈」のもう一つの原因。52em（約 52 字）で上限を切る。 */
p,li,dd{max-width:52em}
/* 最終行の孤立 1〜2 文字（「す。」等）を防ぐ。未対応ブラウザは通常折り返し。 */
p{text-wrap:pretty}
.lead{text-wrap:balance}
a{color:#1a5f9e;text-decoration:none}
/* v2.81: 本文内リンクは「下線」で示す。色だけでの判別（青字と灰字の区別がつかない）
   をやめる。nav・footer・カード型リンク（.btn/.mvlink 等）は対象外。 */
p a:not(.btn),li a,dd a,td a,figcaption a,.note a,.warn a,.ok a,.dnote a{
  text-decoration:underline;text-decoration-color:rgba(23,90,148,.38);
  text-decoration-thickness:1px;text-underline-offset:3px}
p a:not(.btn):hover,li a:hover,dd a:hover,td a:hover,figcaption a:hover,
.note a:hover,.warn a:hover,.ok a:hover,.dnote a:hover{text-decoration-color:currentColor}
/* 灰色輔文・注記ボックス内のリンクは一段濃く（13〜14px での判別性確保） */
.small a,.note a,.warn a,.ok a,.dnote a,.fig figcaption a,.card p a{color:#15507f}
/* v2.82: 注記の行長は本文と同じ「見た目の幅」へ（em は自身の字号基準のため 64em）。
   これしないと 13px の注記が 676px で折れて「幅があるのに改行」に見える。 */
p.small{max-width:64em}
/* 注記内リンクは短い（対応実績へ 等）。リンク文字列の途中で改行させない。 */
p.small a{white-space:nowrap}
/* v2.82: 暗い背景（hero・CTA帯・deepblock・mvb）のテキストリンクは明色＋下線。
   （前回の「辅文リンクを濃く」は暗背景では逆効果になるため、ここで上書き） */
.mv a:not(.btn),.cta a:not(.btn),.deepblock a:not(.btn),.mvb a{
  color:#cfe4f5;text-decoration:underline;
  text-decoration-color:rgba(207,228,245,.45);text-decoration-thickness:1px;
  text-underline-offset:3px}
.mv a:not(.btn):hover,.cta a:not(.btn):hover,.deepblock a:not(.btn):hover,
.mvb a:hover{text-decoration-color:currentColor}
/* footer のリンクも下線で示す（visibility 同様、色だけに頼らない） */
footer a{text-decoration:underline;text-decoration-color:rgba(185,195,205,.35);
  text-underline-offset:3px}
footer a:hover{text-decoration-color:currentColor}
/* footer の pill ボタン（お問い合わせフォームへ）。v2.85 で inline style から class 化。 */
footer .fpill{display:inline-block;margin:0 0 9px;background:#2c6ea5;color:#fff;
  border-radius:8px;padding:9px 16px;text-decoration:none;transition:background .18s ease}
footer .fpill:hover{background:#1a5f9e;text-decoration:none}
/* v2.82b: 全站审计后的补漏。footer 的蓝色 pill 按钮（inline style）不算链接遗漏。 */
#toast a{color:#cfe4f5;text-decoration:underline;
  text-decoration-color:rgba(207,228,245,.45);text-underline-offset:3px}
#toast a:hover{text-decoration-color:currentColor}
.card a:not(.btn){text-decoration:underline;
  text-decoration-color:rgba(26,95,158,.38);text-decoration-thickness:1px;
  text-underline-offset:3px}
.card a:not(.btn):hover{text-decoration-color:currentColor}
.fig a{color:#15507f;text-decoration:underline;
  text-decoration-color:rgba(21,80,127,.38);text-underline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
header{border-bottom:1px solid #e5e8ec;position:sticky;top:0;background:#fff;z-index:9}
.hd{display:flex;align-items:center;justify-content:space-between;padding:18px 30px;max-width:1180px;margin:0 auto}
.logo img{height:36px;width:auto;display:block}
.logo span{color:#1a5f9e}
nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;letter-spacing:.02em}
nav a{color:#4a5158;white-space:nowrap}
/* 移动端折叠导航按钮（仅 ≤880px 显示；桌面端隐藏）。图标用单 span + 两伪元素三条杠，开合转 X */
.navbtn{display:none;position:relative;margin-left:auto;width:40px;height:40px;
 border:1px solid #d7dee6;border-radius:8px;background:#fff;cursor:pointer;
 align-items:center;justify-content:center;padding:0}
.navbtn span{position:absolute;left:11px;top:19px;width:18px;height:2px;background:#16283a;transition:background .2s}
.navbtn span::before,.navbtn span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:#16283a;transition:transform .2s,top .2s}
.navbtn span::before{top:-6px}
.navbtn span::after{top:6px}
header.nav-open .navbtn span{background:transparent}
header.nav-open .navbtn span::before{top:0;transform:rotate(45deg)}
header.nav-open .navbtn span::after{top:0;transform:rotate(-45deg)}
h1{font-size:38px;line-height:1.55;margin:0 0 16px;font-weight:800;letter-spacing:-.018em}
/* 首屏：1秒で「誰が・何を・どれくらいで」が入るように。eyebrow で業態、h1 で約束、数字帯で裏づけ。 */
.eyebrow{font-size:12.5px;letter-spacing:.12em;color:#2c6ea5;font-weight:700;margin:0 0 10px}
.hero h1{font-size:36px;letter-spacing:-.02em;line-height:1.45}
.hero-note{font-size:13.5px;color:#41546a;margin:12px 0 0}
@media(max-width:640px){.hero h1{font-size:27px}h2{margin:44px 0 16px;padding-top:20px;font-size:24px}}
h2{font-size:33px;font-weight:700;letter-spacing:-.006em;line-height:1.6;
 border:0;border-top:1px solid #e5e8ec;padding:26px 0 0;margin:60px 0 18px}
h3{font-size:21px;line-height:1.7;margin:30px 0 10px;color:#1c3a52}
p{margin:13px 0}
.hero{background:#f5f6f8;padding:72px 0 60px;border-bottom:1px solid #e5e8ec}
/* ---- 首屏双栏：左文案 + 右视觉（缩略图组）——首屏必须落满，不许半边留白 ---- */
.hgrid{display:grid;grid-template-columns:1.26fr .74fr;gap:40px;align-items:center}
@media(max-width:880px){.hgrid{grid-template-columns:1fr}}
/* 見出しの折り返しを「最終行に1文字だけ残る」形にしない（text-wrap:balance ＋ 左右の余裕で担保） */
.hero h1{text-wrap:balance}
/* モバイル：ナビが折り返して粘着ヘッダーが画面を占める事故を防ぐ */
@media(max-width:880px){header{position:static}
 .hd{flex-wrap:wrap;padding:12px 18px;row-gap:8px}
 header nav{gap:12px;font-size:12.5px;width:100%}
 .navbtn{display:inline-flex}
 /* 仅当页内含 .navbtn 才启用折叠；不支持 :has() 的浏览器忽略本节，导航保持换行 */
 header:has(.navbtn) nav{display:none;flex-direction:column;gap:0;width:100%;
  border-top:1px solid #e5e8ec;padding-top:4px;margin-top:8px;font-size:14px}
 header:has(.navbtn).nav-open nav{display:flex}
 header:has(.navbtn) nav a{padding:11px 2px;border-bottom:1px solid #eef0f2;white-space:normal}}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* 画像比率は「現場写真=16:9」に統一（2026-10-10 ユーザー指摘：同じ写真が場所ごとに別物に見える）。
   動画(factory_loop/tour)も16:9なので、静止画と動画のフレームが一致する。 */
.hfig .main{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%;border-radius:10px;border:1px solid #e5e8ec;display:block;cursor:zoom-in}
.hthumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.hthumbs img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%;border-radius:7px;border:1px solid #e5e8ec;display:block;cursor:zoom-in}
/* ---- 图 + 信息卡双栏（图旁不许留空） ---- */
.igrid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;margin:16px 0 6px}
@media(max-width:880px){.igrid{grid-template-columns:1fr}}
.istack{display:flex;flex-direction:column;gap:10px}
.istack .card{margin:0}
/* v2.80: 一行 文案 のカードを縦積みにしない（縦の空白が無駄になる）。2 列グリッド。 */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 6px}
.pgrid .card{margin:0}
@media(max-width:720px){.pgrid{grid-template-columns:1fr}}
.lead{font-size:16.5px;color:#3a4149;max-width:790px}
.btn{display:inline-block;background:#1a5f9e;color:#fff!important;padding:14px 34px;border-radius:5px;
 font-weight:700;margin:18px 12px 0 0;font-size:15px}
.btn.gh{background:#fff;color:#1a5f9e!important;border:2px solid #1a5f9e}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:28px 0}
.card{border:1px solid #e5e8ec;border-radius:8px;padding:20px 22px;background:#fff}
.card b{display:block;font-size:16.5px;margin-bottom:6px;color:#16283a}
/* v2.80: 文中の <b>（先頭以外）は block にしない。block 化すると後ろの「。」
   が次の行に孤立する（サンプル室カードで実害）。 */
.card b:not(:first-child){display:inline;margin-bottom:0}
.num{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:28px 0}
.nbox{background:#16283a;color:#fff;border-radius:8px;padding:20px 16px;text-align:center}
.nbox b{display:block;font-size:28px;line-height:1.2}
.nbox span{font-size:12px;opacity:.85}
table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
th,td{border:1px solid #e5e8ec;padding:11px 14px;text-align:left;vertical-align:top}
th{background:#f4f6f9;font-weight:700}
tr:nth-child(even) td{background:#fafbfc}
.note{background:#fff8e6;border-left:4px solid #e0a800;padding:12px 16px;margin:16px 0;border-radius:0 6px 6px 0;font-size:14px}
.warn{background:#fdf1f0;border-left:4px solid #c0392b;padding:12px 16px;margin:16px 0;border-radius:0 6px 6px 0;font-size:14px}
.ok{background:#eef7f0;border-left:4px solid #27a35a;padding:12px 16px;margin:16px 0;border-radius:0 6px 6px 0;font-size:14px}
ul{padding-left:22px}
li{margin:5px 0}
footer{background:#14181d;color:#b9c3cd;margin-top:72px;padding:52px 0 32px;font-size:13px;line-height:1.85}
footer a{color:#9fc4e8}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
footer h4{color:#fff;font-size:14px;margin:0 0 8px}
.small{font-size:13px;color:#606b77}
.ph{border:2px dashed #c3ccd6;background:#f7f8fa;border-radius:8px;padding:34px 16px;text-align:center;color:#7a848f;font-size:13px}
.fig{margin:24px 0}
.fig img{width:100%;height:auto;max-width:960px;display:block;border-radius:8px;border:1px solid #e5e8ec}
.fig figcaption{font-size:13px;color:#606b77;margin-top:9px;line-height:1.7}
/* 現場写真は全ページ共通で「16:9」。
   理由：同じ画像を複数ページで使い回すため、比率を揃えないと同じ写真が別物に見える（露見する）。
   2026-10-10 ユーザー指摘「这个图的区块居中左右是白色空的」→ ページの顔となる .hero は全幅にする。
   本文フロー中の補助図 .wide は 780px のまま（全幅にすると 630px 高になり読み筋を切る）。 */
.fig.hero{max-width:none}
.fig.hero img{max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%}
/* v2.86: .wide（span2 主図）は列幅に完全揃える。旧 img.wide 780px は
   セレクタ不一致の死止まりルールで、実効は .fig img の 960px が効き
   右側が 56px 抜けていた（ユーザー指摘「短了一截」）。 */
.fig.wide img{width:100%;max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
@media(max-width:700px){.sgrid{grid-template-columns:1fr}}
.stn{display:inline-block;min-width:22px;text-align:center;background:#eef2f7;color:#15507f;border-radius:5px;font-size:11.5px;font-weight:700;padding:1px 6px;margin-right:5px;vertical-align:1px}
.sgrid .fig img{height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%;cursor:zoom-in}
.sgrid .fig{display:flex;flex-direction:column}
.sgrid .fig figcaption{flex:1}
/* 2026-10-10 追加：5枚のとき 3+2 で最終行が欠けるので、主図（縫製フロア）を2列に広げる。
   3列グリッドで 2+1 / 1+1+1 の2行に収まり、行が揃う。 */
.sgrid .fig.wide{grid-column:span 2}
/* v2.65 「工場の様子」は 2 列固定。
   3 列だと ①が細く図注が詰まり、wide の裁断が列を撑えて行高 448px まで見直しになる（①の下に約190pxの空白）、
   6枚目が1枚だけの孤立行になる。2 列 552px なら 3 行で pit 齊しく、絵も図注も Kala 长大。 */
.sgrid.sgrid2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:880px){.sgrid.sgrid2{grid-template-columns:1fr}}
.aiimg figcaption{border-left:3px solid #d9e2ec;padding-left:9px}
.proctbl{font-size:13.5px;table-layout:fixed;min-width:640px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.proctbl td,.proctbl th{vertical-align:top;line-height:1.6}
.proctbl td:nth-child(1),.proctbl th:nth-child(1){text-align:center;color:#606b77}
.proctbl td:nth-child(2){word-break:break-word}
.case{margin-top:52px;padding-top:26px;border-top:1px solid #e5e8ec}
.case h3{font-size:19px;color:#123;margin:0 0 4px}
.case .grid2{margin-top:12px}
.case .grid2 ul{margin:16px 0 0;font-size:14px}
/* ---- 事例の図版：既定は「小さく」表示し、クリックで#lb拡大（2026-10-10 ユーザー指摘：大図が大きすぎて閲覧の邪魔） ----
   2026-10-10 追加指摘「左边图和右边区块的上下高低差得远」への対応：
   左のルック写真を align-items:stretch で右カラムと同じ高さに伸ばし、上下の下沿いを揃える。
   左カラム 372px は「ルック原図 1024x1397(0.733)」と「右カラム実高」がほぼ一致する値（裁切ゼロ近辺）。
   箇条書きは grid の外へ出して全幅にし、右カラムの高さを写真に近づける。 */
.grid2.look2{grid-template-columns:minmax(0,372px) 1fr;align-items:stretch}
.grid2.look2 figure.fig{margin:0;display:flex;flex-direction:column}
.grid2.look2 figure.fig>a.zoom{flex:1;display:block;line-height:0}
.case .grid2 a.zoom{display:block;line-height:0}
.case .grid2 a.zoom img{border-radius:9px}
.case .grid2 img{cursor:zoom-in}
.case .grid2 img.det{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 50%}
.case .grid2 img.look{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.case ul.pts{margin:20px 0 0;font-size:14px;line-height:1.75}
@media(max-width:700px){
 .grid2.look2{grid-template-columns:1fr}
 .grid2.look2 figure.fig{max-width:372px}
 .case .grid2 img.look{height:auto;object-position:center 50%}
}
/* 同一画像を別ページでも同じ見え方にするための 16:9 固定枠（サンプル室など） */
.fig.r169 img{aspect-ratio:16/9;object-fit:cover;object-position:center 50%}
.faq dd{margin:4px 0 0 0;color:#3a4149}
.center{text-align:center}
/* ---- 観察データ記録：意図的に「静かな体裁」にする ----
   方針：これは資料であって広告ではない。人には控えめに見せ、機械（検索・AI）には全文を渡す。
   ただし可読性の下限は守る（本文 13px・コントラスト 5.9:1）。小さくしすぎ／薄くしすぎは
   隠しテキスト扱いになり得るため、これ以上は下げない。 */
.doc{max-width:920px}
.doc h1{font-size:26px;font-weight:700;letter-spacing:0;line-height:1.6;margin:0 0 10px;color:#2c3440}
.doc h2{font-size:18px;font-weight:700;border-left:3px solid #c8d2dc;padding-left:10px;
 line-height:1.6;margin:42px 0 14px;color:#2c3440}
.doc p,.doc li,.doc dd,.doc td,.doc th{font-size:14px;line-height:2.0;letter-spacing:.01em;color:#4a5560}
.doc table{font-size:13.5px;margin:16px 0}
.doc th{background:#faf8f4;color:#4a5462;font-weight:700;border-color:#e8e3da}
.doc td{border-color:#e8e3da}
.doc td.v{text-align:right;font-variant-numeric:tabular-nums;color:#2c3440}
.doc .dnote{background:#faf8f4;border:1px solid #e8e3da;border-radius:6px;padding:12px 14px;margin:14px 0}
.doc dl.meta{display:grid;grid-template-columns:130px 1fr;gap:9px 16px;margin:14px 0}
.doc dl.meta dt{color:#606b77}
.doc dl.meta dd{margin:0}
.doc .cite{background:#faf8f4;border:1px dashed #c8d2dc;border-radius:6px;padding:12px 14px;
 color:#3d4753;font-size:13px;word-break:break-all}
.doc .tw table{min-width:520px}
/* ---- 要点ブロック（GEO：AI が最初に抜き出せる要約） ----
 2026-10-10 追加。従来は冒頭が「営業資料ではありません」という断り書きで、
 検索/AI が引用できる具体的な文が本文の 1/3 まで下がっていた。要点を先頭に置く。 */
.doc .key{background:#f7f5f0;border:1px solid #e2ddd2;border-left:3px solid #8a97a5;
 border-radius:0 6px 6px 0;padding:14px 18px 10px;margin:16px 0 20px}
.doc .key h2{margin:0 0 10px;border:0;padding:0;font-size:15px;color:#4a5462;letter-spacing:.03em}
.doc .key ol{margin:0;padding-left:19px}
.doc .key li{margin:0 0 9px;font-size:14px;line-height:2.0}
.doc .key b{color:#2c3440;font-variant-numeric:tabular-nums}
/* ---- よくあるご質問（FAQPage 構造化データと同一内容を可視化） ---- */
.doc .qa{border-top:1px solid #e8e3da;padding:13px 0 3px}
.doc .qa:first-of-type{border-top:0;padding-top:2px}
.doc .qa h3{font-size:15px;font-weight:700;color:#2c3440;margin:0 0 6px;line-height:1.8}
.doc .qa .q,.doc .qa .a{color:#8a97a5;margin-right:7px;font-variant-numeric:tabular-nums}
.doc .qa p{margin:0}
/* ---- 作成者（AI に「誰が何をしている会社か」を一行で渡す） ---- */
.doc .who{background:#faf8f4;border:1px solid #e8e3da;border-radius:6px;padding:13px 15px;margin:14px 0}
@media(max-width:640px){.doc dl.meta{grid-template-columns:1fr;gap:2px 0}
 .doc dl.meta dt{margin-top:8px}}
/* ---- ライトボックス（画像クリック拡大・枠外クリックで閉じる） ---- */
#lb{display:none;position:fixed;inset:0;background:rgba(10,14,20,.87);z-index:99;
 align-items:center;justify-content:center;cursor:zoom-out;padding:18px}
#lb.on{display:flex}
#lb img{max-width:92%;max-height:92%;border-radius:8px;box-shadow:0 10px 44px rgba(0,0,0,.55)}
@media(max-width:700px){#lb img{max-width:97%;max-height:86%}}
/* ---- FAQ 2列（広い画面のみ） ---- */
/* ---- FAQ：Q と A は必ず同じブロック（.qa）。2列化は「ブロック単位」で行う ----
   SEO/GEO の理由：可視 DOM の「質問→回答」の隣接関係がそのまま抽出単位になるため、
   Q だけ右列・A だけ左列に分断される組版は禁止。JSON-LD(faq_ld) と 1:1 で対応させる。 */
dl.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 42px;align-items:start}
dl.faq .qa{break-inside:avoid;margin:0 0 16px}
dl.faq dd{margin:5px 0 0 0;color:#3a4149}
@media(max-width:700px){dl.faq{grid-template-columns:1fr}}
@media(max-width:640px){h1{font-size:23px}nav{gap:12px;font-size:13px}}
/* ---- 企画目録・見積りリスト ---- */
.plan{border:1px solid #e5e8ec;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.plan>figure{margin:0}
/* 2026-10-10 修正：16/10（横長）→ 3/4（縦）。ワンピースの企画カードで横長枠は
   **裾が切れる**（1400x1250 の原片3枚では縦が約3割落ちていた）。
   ファイル側も 3:4 に切り直してあるので、ここで追加の切落としは起きない。
   ※CSS はコメントごと配信物に入る。ここに禁止語を書くと tool_pack の自检②に出る。 */
.plan img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;display:block;cursor:zoom-in}
.plan .pb{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.plan h3{margin:0;font-size:16px;line-height:1.45}
.plan .pcap{font-size:12.5px;line-height:1.6;margin:0;color:#41546a}
.plan .pmeta{font-size:11.5px;line-height:1.5;margin:0;color:#5f6b78}
.plan .pb .btn{min-height:40px;padding:8px 12px;font-size:14px}
/* カード内の「向く先」＝読者が自分で選べるようにする一行（2026-10-10 追加）。
   カタログは「選べない一覧」だと読まれない。各カードに自問の答えを置く。 */
.plan .pfor{font-size:12px;line-height:1.6;margin:0;color:#2c3440}
.plan .pfor b{color:#5f6b78;font-weight:400;margin-right:6px}
/* 3つの入り口／3ステップの共通カード（2026-10-10 追加） */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin:18px 0 8px}
.cards3>div{border:1px solid #e5e8ec;border-radius:8px;padding:15px 16px 14px;background:#fff;
 display:flex;flex-direction:column}
.cards3 .en{display:block;font-size:11px;letter-spacing:.14em;color:#5f6b78;margin:0 0 6px;
 font-variant-numeric:tabular-nums}
.cards3 h3{margin:0 0 7px;font-size:15px;line-height:1.5}
.cards3 p{margin:0 0 9px;font-size:13px;line-height:1.75;color:#54606e;flex:1}
.cards3 a{font-size:13px;font-weight:500;margin-top:auto}
.chip{display:inline-block;font-size:11.5px;border:1px solid #d7dee6;border-radius:999px;padding:1px 9px;color:#41546a;background:#f7f8fa;margin:0 5px 5px 0}
.chips{margin:0}
.fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 4px}
.fbar button{border:1px solid #cfd8e0;background:#fff;border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;color:#41546a;transition:background .15s,border-color .15s}
.fbar button:hover{background:#eef2f6}
.fbar button.on{background:#16283a;color:#fff;border-color:#16283a}
.fbar button.on:hover{background:#16283a}
.fbar button:focus-visible{outline:2px solid #1a5f9e;outline-offset:2px}
/* 键盘可达性：为所有交互元素补可见焦点环（导航/按钮/表单） */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:2px solid #1a5f9e;outline-offset:2px}
.fcount{font-size:12.5px;color:#5b6b7c;margin:0 0 14px}
#estbar{position:fixed;right:18px;bottom:18px;background:#16283a;color:#fff;border-radius:999px;
padding:13px 22px;font-size:15px;font-weight:700;box-shadow:0 8px 24px rgba(10,20,35,.35);z-index:60;
display:none;text-decoration:none;user-select:none;-webkit-user-select:none}
#estbar.on{display:block}
#estbar.pulse{animation:estpulse .55s ease}
@keyframes estpulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
#toast{position:fixed;left:50%;bottom:82px;transform:translateX(-50%) translateY(14px);
background:#16283a;color:#fff;border-radius:10px;padding:13px 18px;font-size:14px;
box-shadow:0 10px 30px rgba(10,20,35,.4);z-index:70;display:flex;gap:16px;align-items:center;
opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;user-select:none;white-space:nowrap}
#toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
#toast a{color:#a9d0f2}
.cgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;align-items:start}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}}
/* ---- 右カラム（お見積りリスト）＝背景付きパネルで明確に分離 ---- */
#estpanel{background:#f7f8fa;border:1px solid #e5e8ec;border-radius:10px;padding:14px 16px}
#estpanel h2{font-size:19px}
#estpanel .card{background:#fff}
/* ---- 左カラム上部：フォームに反映される企画（＝常に見える位置） ---- */
.estsum{border:1px solid #d7e3ef;background:#f2f7fb;border-radius:8px;padding:10px 12px;margin:0 0 14px;font-size:13px}
.estsum b{font-size:13.5px}
#cfb{display:none;border:1px dashed #c9d4de;border-radius:8px;padding:12px;margin-top:12px;background:#fcfbf8}
#cfb.on{display:block}
.btn{min-height:44px}
body{font-family:"Noto Sans JP","Yu Gothic UI","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;line-height:1.75}
.estitem{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #e5e8ec;border-radius:8px;padding:9px 12px;margin-bottom:8px;background:#fcfbf8}
.estitem button{border:none;background:none;color:#8a4b4b;cursor:pointer;font-size:13px;white-space:nowrap;flex-shrink:0}
/* ---- 全站共通 CTA（ページ末尾・フッター直前）---- */
.cta{background:linear-gradient(135deg,#16283a,#1d4a6e);color:#fff;border-radius:12px;padding:28px 32px;margin-top:48px}
.cta b{display:block;font-size:20px;margin:0 0 8px}
.cta p{color:#d5e3f0;margin:6px 0 16px;font-size:14px;line-height:1.8}
.ctab{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cta .btn{background:#fff;color:#16283a!important;border:2px solid #fff;min-height:46px}
.cta .btn.gh{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.75)}
.cta a.fl{color:#a9d0f2}
/* ---- 対応実績（類目別台帳） ----
   方針：広告ではなく資料。punch news のような落ち着いた行リストで、行の余白を厚く（上下26px）。
   スクロール連動のフェード・アニメーションは入れない（資料を待たせて開けてはいけない）。 */
.ledger{border-top:2px solid #16283a;margin-top:22px}
.rrow{display:grid;grid-template-columns:74px 1fr;gap:2px 22px;padding:26px 2px;border-bottom:1px solid #e5e8ec}
.rrow .rno{font-variant-numeric:tabular-nums;color:#8a97a5;font-size:13px;padding-top:4px}
.rrow h3{margin:0 0 10px;font-size:18.5px;color:#16283a}
.rrow dl.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:3px 18px;margin:0 0 10px}
.rrow dl.spec dt{font-size:11.5px;color:#606b77;margin:0}
.rrow dl.spec dd{font-size:13.5px;color:#22262b;margin:0;font-weight:600}
.rrow .rnote{font-size:13.5px;color:#41546a;margin:0}
.rrow .rcats{margin:9px 0 0}
@media(max-width:720px){.rrow{grid-template-columns:1fr;padding:20px 0}.rrow .rno{padding:0}}

/* ---- v2.36：見出しに「添え字」を付けて punch 的な節のリズムを作る ----
   h2 の直前に英語のラベルを小さく置くと、日本語見出しが長くても節の切れ目が読める。 */
.sec{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
 color:#5f6b78;font-weight:700;margin:0 0 6px}
/* 全幅（フルブリード）の写真帯：端まで伸ばすと「密度」が出る。はみ出しは body 側で抑える。 */
html{overflow-x:hidden}
.full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)!important;
 border-radius:0!important;border-left:0!important;border-right:0!important}
.full img{width:100%;max-width:none!important;border-radius:0!important;border-left:0!important;border-right:0!important;
 /* 2026-10-10 修正：旧版は object-fit:fill!important で「箱の縦横比」に合わせて引き伸ばしていた。
    同じ画像がページごとに別の縦横比の箱に入るため、工場ページでは縦に27%伸びていた
    （＝ユーザー指摘の「没质感」。人物の体型まで歪む）。自然な縦横比で表示する。 */
 aspect-ratio:auto!important;height:auto!important;object-fit:cover!important;object-position:center 50%!important}
.fig.hero.full{padding:0!important;border-radius:14px;overflow:hidden;
  width:min(1240px,calc(100vw - 48px))!important;max-width:none;
  margin-left:auto!important;margin-right:auto!important;
  box-shadow:0 2px 16px rgba(18,32,48,.08);background:#fff}
@media(max-width:880px){.fig.hero.full{width:calc(100vw - 24px)!important;border-radius:10px}}
/* v2.66 hero：日系集団サイト式の処理（余白＋角丸カード枠）。
   参照 PUNCH INDUSTRIAL ほか日系メーカー：画像は枠の中で静かにshowing、装飾は丸角と余白で作る。
   マDollarセイク/Older venetian blind 系の動線は「不美观かつ唐突」なので採らない（ユーザー判断）。*/
.fig.hero.full img{display:block;aspect-ratio:auto;height:clamp(300px,38vw,520px);object-fit:cover;object-position:center 45%}
.fig.hero.full figcaption{position:static;max-width:none;margin:0;padding:11px 16px 13px;background:none;
  color:#5b6675;font-size:12.5px;line-height:1.9;border-top:1px solid #eef0f2}
.fig.hero.full figcaption a{color:#2c6ea5}
@media(prefers-reduced-motion:no-preference){
  .fig.hero.full{animation:heroIn .7s cubic-bezier(.22,.61,.36,1) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
/* v2.66 動画ブロック：従来の「動画＋カード2カラム」は動画(16:9)が短すぎてカード列の下に
   180〜226px の余白が出る。動画をフル幅に置き、カードは4列の行に並べる。 */
/* ================= v2.70 视觉升级（第三批）：满幅深色区块 ================= */
.deepblock{margin:64px 0;padding:38px 34px 34px;border-radius:16px;background:#12304a;color:#eef3f7;
  box-shadow:0 0 0 100vmax #12304a;clip-path:inset(0 -100vmax);
  --blue:#7fb3dd;--line:rgba(255,255,255,.16)}
.deepblock h2{color:#fff;border-top:0;margin:0 0 18px;padding:0 0 0 18px}
.deepblock h2::before{background:#e0a183;top:6px}
.deepblock .sec{color:#9fc4e4}
.deepblock .sec::before{background:#e0a183}
.deepblock .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#eef3f7}
.deepblock .card b{color:#fff}
.deepblock .card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.deepblock .small{color:#bcd2e4}
@media(max-width:720px){.deepblock{margin:44px 0;padding:28px 18px 24px}}
/* v2.80：v2.79 的字距/行高补丁并入全局体系（正文 2.05 / 字距 .01em），
   这里只保留表格与辅文的字距，行高全部交给 body 继承，避免双源打架。 */
.card,.card p,.lead,.small,td,th,li,.proctbl p,.mvlink span,.estp,.faq dd{
  letter-spacing:.01em}
/* v2.79：中段「文字压图」带（参考 PUNCH 的中段大图处理） */
.mvb{position:relative;margin:30px 0;overflow:hidden;border-radius:12px;background:#0d1a28}
.mvb img{display:block;width:100%;height:clamp(280px,32vw,430px);object-fit:cover}
.mvb__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,18,29,.93) 0%,rgba(8,18,29,.66) 48%,rgba(8,18,29,.16) 100%)}
.mvb__txt{position:absolute;left:0;right:0;bottom:0;padding:26px 30px 22px}
.mvb__txt h2,.mvb__txt h3{color:#fff;margin:0 0 7px;border:0;padding:0;line-height:1.4}
.mvb__txt h3{font-size:22px}
.mvb__txt h2{font-size:clamp(22px,2.4vw,30px)}
.mvb__txt h2::before{display:none}
.mvb__txt .sec{color:#a9c6e4;margin:0 0 8px;padding-left:22px}
.mvb__txt p{margin:0;color:#dfe9f2;font-size:14px;line-height:1.95;max-width:820px;letter-spacing:.015em}
.mvb__txt p a{color:#bcd8f2}
.mvb__txt b{color:#fff}
@media(max-width:640px){.mvb__txt{padding:20px 18px 18px}.mvb img{height:260px}}
/* v2.75：首页「市場の見方」深色块内的 .ok 适配（浅绿底 → 深底白字） */
.deepblock .ok{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#e8eff6}
.deepblock .ok b{color:#fff}
.deepblock .ok a{color:#bcd8f2}
.deepblock .ok:hover{background:rgba(255,255,255,.11)}
/* ================= v2.71 首屏主视觉 ＋ 浮条との重なり回避 ================= */
/* 主视觉：全面画像＋下端に重ねるキャッチコピー（PUNCH のトップと同じ構造） */
.mv{position:relative;background:#0d1a28;margin:0 0 8px}
.mv__media{position:absolute;inset:0;z-index:0}
.mv__media img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.mv__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,18,29,.50) 0%,rgba(8,18,29,.20) 52%,rgba(8,18,29,.04) 100%)}
.mv__inner{position:relative;z-index:2;min-height:clamp(440px,58vw,680px);
  padding:clamp(160px,22vw,330px) 0 clamp(38px,5.5vw,72px);
  display:flex;flex-direction:column;justify-content:flex-end}
.mv::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(38,24,19,.95) 0%,rgba(38,24,19,.88) 42%,
                             rgba(38,24,19,.58) 72%,rgba(38,24,19,.16) 100%)}
.mv__eyebrow{color:#a9c6e4;font-size:12.5px;letter-spacing:.13em;font-weight:700;margin:0 0 14px}
.mv__ttl{color:#fff;font-size:clamp(28px,4.1vw,52px);line-height:1.42;letter-spacing:.01em;
  margin:0;text-shadow:0 2px 20px rgba(0,0,0,.42)}
.mv__lead{color:#e8eff6;font-size:15px;line-height:2.0;max-width:660px;margin:20px 0 0}
.mv__lead a{color:#bcd8f2}
.mv__lead b{color:#fff;font-weight:700}
.mv__btns{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.mv__btns .btn.gh{background:rgba(255,255,255,.10);color:#fff!important;border-color:rgba(255,255,255,.55)}
.mv__btns .btn.gh:hover{background:#fff;color:#12304a!important;border-color:#fff}
/* 主视觉の下の入口カード（3枚） */
.mvlinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 12px}
.mvlink{display:block;padding:18px 20px;border:1px solid #e5e8ec;border-radius:12px;background:#fdfcfa;
  text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.mvlink:hover{border-color:#c3d6e8;transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,32,48,.07)}
.mvlink b{display:block;font-size:16px;color:#16283a;margin-bottom:5px;font-family:"Noto Serif JP",serif}
.mvlink span{font-size:13px;color:#5b6675;line-height:1.8}
@media(max-width:820px){
  .mvlinks{grid-template-columns:1fr}
  .mv__media{position:relative;inset:auto}
  .mv__media img{height:300px}
  .mv__scrim{background:linear-gradient(180deg,rgba(8,18,29,.30) 0%,rgba(8,18,29,.75) 100%)}
  .mv__inner{min-height:0;padding:26px 20px 28px;background:#0d1a28}
  .mv::after{background:linear-gradient(180deg,rgba(38,24,19,.20) 0%,rgba(38,24,19,.55) 100%)}
}
/* 見積りリスト浮条（.estbar.on）と toTop が重なっていた件の回避 */
body.est-on .toTop{bottom:88px}
@media(max-width:620px){body.est-on .toTop{bottom:78px}}
/* ================= v2.69 视觉升级（第一批＋第二批） =================
   参考：PUNCH INDUSTRIAL ほか日系メーカー disconnection の梳理结果。
   方針：不动文案与信息结构，只调「排版气质・留白・卡片语言・数字帯」。
   --------------------------------------------------------------- */
/* A. 見出し：縦罫＋ラベルの階層を作る */
h2{position:relative;padding-left:18px}
h2::before{content:'';position:absolute;left:0;top:33px;width:4px;height:26px;
  background:#2c6ea5;border-radius:2px}
.sec{position:relative;padding-left:22px}
.sec::before{content:'';position:absolute;left:0;top:5px;width:14px;height:2px;
  background:#2c6ea5;border-radius:1px}
/* B. 衬线＝时装的底色（見出しのみ。本文は可読性優先で据え置き） */
h1,h2,h3,.hero h1,.nbox b,.fact b,.tnum{font-family:"Noto Serif JP","Hiragino Mincho ProN",
  "Yu Mincho",serif;font-weight:700}
h1{letter-spacing:.01em}
h2{letter-spacing:.02em;margin:72px 0 20px;padding-top:30px}
h3{letter-spacing:.01em}
@media(max-width:640px){h2{margin:48px 0 16px;padding-top:22px;font-size:24px}h2::before{top:26px;height:22px}}
/* C. 版心收紧＋留白放开 */
.wrap{max-width:1152px;padding:0 34px}
@media(max-width:720px){.wrap{padding:0 20px}}
section+section{margin-top:0}
.lead{font-size:16px;line-height:2.1}
/* D. 卡片と画像の言語（微位移・微拡大・统一圆角） */
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:#ccd9e6;box-shadow:0 8px 22px rgba(18,32,48,.07)}
.fig img{border-radius:10px;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sgrid .fig:hover img,.grid .fig:hover img,.vrow .fig:hover img{transform:scale(1.018)}
.sgrid .fig,.grid .fig{overflow:hidden}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}.sgrid .fig:hover img{transform:none}}
/* E. 数字帯：独立盒5個 → 1本の深色帯＋发丝分隔線 */
.num{background:#12304a;border-radius:12px;padding:10px 8px;gap:0;margin:34px 0}
.nbox{background:transparent;border:0;border-radius:0;padding:20px 12px;position:relative}
.nbox b{font-size:27px;letter-spacing:.01em}
.nbox span{opacity:.72;font-size:11.5px;letter-spacing:.04em}
.nbox+.nbox::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:rgba(255,255,255,.16)}
@media(max-width:720px){
  .num{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 4px}
  .nbox+.nbox::before{display:none}
  .nbox{border-top:1px solid rgba(255,255,255,.14)}
  .nbox:nth-child(-n+2){border-top:0}
}
/* v2.68 先頭へ戻るボタン（右下・下0.5画面スクロールで出現・赤は使わない） */
.toTop{position:fixed;right:26px;bottom:26px;z-index:70;width:52px;height:52px;border-radius:50%;
  background:#fff;border:1.5px solid #c6d2dd;color:#12304a;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px rgba(18,32,48,.13);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .18s ease,
             color .18s ease,border-color .18s ease,box-shadow .18s ease}
.toTop.on{opacity:1;visibility:visible;transform:none}
.toTop:hover{background:#2c6ea5;border-color:#2c6ea5;color:#fff;box-shadow:0 8px 22px rgba(18,32,48,.30)}
.toTop:focus-visible{outline:2px solid #2c6ea5;outline-offset:3px}
.toTop svg{width:20px;height:20px;display:block}
@media(max-width:620px){.toTop{right:14px;bottom:14px;width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.toTop{transition:none}}
/* v2.67 観察メモ＝ニュース表示（日付＋カテゴリ＋件名） */
.nhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 8px;
  font-size:12.5px;color:#5b6675;line-height:1.6}
.nhead a{color:#2c6ea5;text-decoration:none}
.nhead a:hover{text-decoration:underline}
.ntag{display:inline-block;padding:1px 10px;border:1px solid #d6e0ea;border-radius:999px;
  background:#f2f7fb;color:#2c6ea5;font-size:12px;white-space:nowrap}
.nlist{display:grid;gap:9px;margin:12px 0 0}
.nrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 16px;
  border:1px solid #e6e9ee;border-radius:10px;background:#fdfcfa;text-decoration:none;
  transition:border-color .16s ease,background .16s ease}
.nrow:hover{border-color:#c3d6e8;background:#fff}
.nrow time{font-size:12.5px;color:#5b6675;letter-spacing:.02em;min-width:78px}
.nrow .nttl{font-size:14.5px;font-weight:700;color:#16283a;line-height:1.6}
/* v2.83: 行タイトルはリンク。日付・タグは汚さずタイトルだけ下線。 */
.nrow .nttl{text-decoration:underline;text-decoration-color:rgba(22,40,58,.35);
  text-decoration-thickness:1px;text-underline-offset:3px}
.nrow:hover .nttl{text-decoration-color:currentColor}
@media(max-width:620px){.nrow{gap:8px;padding:11px 13px}.nrow time{min-width:0}}
.vrow{display:grid;gap:16px;margin:22px 0 8px}
.vrow .fig{margin:0}
.vrow video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:10px;border:1px solid #e5e8ec;background:#0f1a26}
.vrow .istack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
@media(max-width:1000px){.vrow .istack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.vrow .istack{grid-template-columns:1fr}}
.full figcaption{max-width:1180px;margin:9px auto 0;padding:0 30px}
/* 工程表：実施列（当社／協力先）を色で切る */
.proctbl td:nth-child(3){text-align:center;font-size:12px;font-weight:700;color:#15507f;white-space:nowrap}
.proctbl tr td:nth-child(3):not(:empty){background:#f2f7fb}
/* ================= v2.84 hover 体系（悬停态 = :hover + transition） =================
   统一规则：所有按钮 180ms 过渡；暗底幽灵按钮悬停反白；白底幽灵按钮悬停填充实心蓝；
   实心蓝按钮悬停加深+投影。悬停只动 颜色/边框/投影，不动位移（与卡片 hover 区分）。 */
.btn{transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.btn:hover{background:#144d7d;box-shadow:0 6px 16px rgba(18,48,74,.22)}
.btn.gh:hover{background:#1a5f9e;color:#fff!important;border-color:#1a5f9e}
/* CTA 帯の白ボタンは白底深字。暗色 hover にすると文字（!important）が読めなくなる
   ため、浅い青灰で返す（v2.85）。 */
.cta .btn:hover{background:#dfe9f2;border-color:#dfe9f2;box-shadow:none}
/* 暗底幽灵按钮（写在其后 → 优先级同speciality时靠后者胜） */
.mv__btns .btn.gh:hover,.cta .btn.gh:hover,.deepblock .btn.gh:hover{
  background:#fff;color:#12304a!important;border-color:#fff;
  box-shadow:0 6px 18px rgba(18,32,48,.18)}
#estbar{transition:background .18s ease}
#estbar:hover{background:#24384f}