/*
 * 分散撹拌装置の検討・スケールアップ支援（/solutions/fiber-dispersion/）の本文の見た目。
 * 元＝坂本さんが ChatGPT で作った LP の <style>。元は header・nav・section・h2 などの要素に直接効いていて、
 * トップのヘッダー・フッター（lp_chrome.css）と相談の窓（components.css）とぶつかるため、すべて .fx の中に限った。値は元のまま。
 * 坂本案のページ共通の components.css の後に読む（solutions/base.html の page_css）。共通の分はここで上書きしない（solutions/CLAUDE.md 5章）。
 */
.fx{--navy:#10273b;--blue:#1267dd;--ink:#152c3e;--muted:#5c6e7e;--line:#d9e3eb;--paper:#f3f7fa;--cta:#ff7007;--cta-hover:#e35f00;color:var(--ink);line-height:1.85;font-size:16px;overflow:hidden}
.fx a{color:inherit}
.fx .wrap{max-width:1160px;margin:auto;padding:0 28px}
/* ページ内ナビゲーション（元はページ上部の帯。トップのヘッダーの下に置いた） */
.fx .fx-nav{border-bottom:1px solid var(--line);background:#fff}
.fx .fx-nav__in{display:flex;justify-content:flex-end;gap:26px;font-size:14px;padding-top:12px;padding-bottom:12px}
.fx .fx-nav a{text-decoration:none}
.fx .hero{background:var(--navy);color:#fff;padding:72px 0 64px}
.fx .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.fx .eyebrow{font-size:14px;letter-spacing:.12em;font-weight:700;color:#92bffe}
.fx .hero h1{font-size:clamp(32px,4vw,52px);line-height:1.5;letter-spacing:.02em;margin:20px 0 24px}
.fx .hero p{color:#c6d6e2;max-width:590px}
.fx .tag{font-size:13px;border:1px solid #496071;border-radius:3px;padding:5px 12px;display:inline-block;margin-bottom:15px}
.fx .button{display:inline-block;background:var(--blue);color:#fff;padding:13px 25px;border-radius:4px;text-decoration:none;border:none;font:inherit;font-weight:700;cursor:pointer}
.fx .ghost{background:transparent;border:1px solid #617887;margin-left:10px}
/* 相談の入口（足した分。トップの「相談先を探す」と同じ色） */
.fx .button--cta{background:var(--cta)}
.fx .button--cta:hover{background:var(--cta-hover)}
.fx .hero-cta{margin:20px 0 0}
.fx .blueprint{background:#19364c;border:1px solid #38566d;padding:25px;border-radius:6px}
.fx .bp-top{display:flex;justify-content:space-between;border-bottom:1px solid #38566d;padding-bottom:14px;font-size:14px}
.fx .process-map{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.fx .process-map div{background:#24475f;padding:16px;font-size:14px}
.fx .process-map strong{display:block;color:#9cc9ff;font-size:12px}
.fx .core{grid-column:1/-1;border:1px solid #8dbdf1!important;text-align:center}
.fx .core b{font-size:24px;display:block}
.fx .bp-note{font-size:12px;color:#b7cedd;margin:0}
.fx .metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:#fff}
.fx .metrics div{padding:28px;text-align:center;border-right:1px solid var(--line)}
.fx .metrics b{font-size:32px;line-height:1.5;display:block}
.fx .metrics span{font-size:14px;color:var(--muted)}
.fx section{padding:78px 0}
.fx .kicker{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--blue)}
.fx h2{font-size:32px;line-height:1.6;margin:8px 0 20px}
.fx h3{font-size:20px;line-height:1.6;margin:0 0 12px}
.fx .lead{color:var(--muted);max-width:800px;margin-bottom:32px}
.fx .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* 07 は枠を2つにした（会社名の枠を外したため） */
.fx .grid2{grid-template-columns:repeat(2,1fr)}
.fx .card{border:1px solid var(--line);padding:28px;border-radius:5px;background:white}
.fx .card .n{font-size:14px;color:var(--blue);font-weight:800;display:block;margin-bottom:18px}
.fx .card p{margin:0;color:var(--muted)}
.fx .soft{background:var(--paper)}
.fx .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.fx .list{list-style:none;padding:0;margin:0}
.fx .list li{padding:18px 0;border-bottom:1px solid var(--line)}
.fx .list b{display:block}
.fx .list span{color:var(--muted);font-size:15px}
.fx .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:stage}
.fx .step{background:#fff;padding:24px;border-top:3px solid var(--blue);counter-increment:stage}
.fx .step:before{content:"0" counter(stage);color:var(--blue);font-weight:800;font-size:14px}
.fx .step h3{margin-top:10px}
.fx .step p{font-size:15px;color:var(--muted);margin:0}
.fx .note{padding:18px 22px;border-left:3px solid var(--blue);background:#eaf2fb;font-size:14px;margin-top:26px}
.fx .table-wrap{overflow:auto}
.fx table{width:100%;border-collapse:collapse;font-size:15px}
.fx th,.fx td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line)}
.fx th{background:var(--paper);width:26%;font-weight:700}
.fx .label{font-size:12px;color:var(--blue);padding:3px 9px;background:#eaf2fb;border-radius:3px;display:inline-block;margin-bottom:12px}
.fx .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fx .timeline article{border-top:2px solid var(--line);padding-top:22px}
.fx .timeline strong{color:var(--blue);font-size:13px}
.fx .timeline p{font-size:15px;color:var(--muted)}
.fx details{border-bottom:1px solid var(--line);padding:20px 0}
.fx summary{font-size:18px;font-weight:700;cursor:pointer}
.fx details p{color:var(--muted);padding:0 24px}
.fx .cta{background:var(--navy);color:white}
.fx .cta .lead{color:#c6d6e2}
.fx .checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fx .checklist label{background:#19364c;padding:16px;cursor:pointer;display:flex;gap:12px;font-size:15px}
.fx .checklist input{accent-color:#64a9ff;min-width:18px}
.fx #progress{color:#a8cfff;font-size:14px;margin:18px 0}
.fx .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.fx .actions .ghost{margin:0}
/* 元のフッター（会社名を除いた文） */
.fx .fx-foot{padding:30px 0;font-size:13px;color:var(--muted)}
.fx .fx-foot__row{display:flex;justify-content:space-between;gap:20px}
.fx .sources{font-size:13px;color:var(--muted);margin-top:26px}
.fx .sources a{margin-right:18px}
@media(max-width:800px){
  .fx .fx-nav__in{gap:14px}
  .fx .fx-nav a:nth-child(2){display:none}
  .fx .hero{padding:45px 0}
  .fx .hero-grid,.fx .split{grid-template-columns:1fr;gap:30px}
  .fx .grid3,.fx .timeline{grid-template-columns:1fr}
  .fx .flow,.fx .checklist{grid-template-columns:1fr 1fr}
  .fx .metrics{grid-template-columns:1fr 1fr}
  .fx .metrics div{padding:20px}
  .fx .metrics b{font-size:26px}
  .fx section{padding:52px 0}
  .fx h2{font-size:27px}
  .fx .wrap{padding:0 22px}
  .fx .hero h1{font-size:34px}
  .fx .fx-foot__row{display:block}
}
@media(max-width:440px){
  .fx .flow,.fx .checklist{grid-template-columns:1fr}
  .fx .fx-nav a:first-child{display:none}
  .fx .ghost{margin-left:0;margin-top:10px}
  .fx .hero h1{font-size:30px}
}
@media print{
  .fx .fx-nav,.fx .actions,.fx .hero-cta{display:none!important}
  .fx .hero,.fx .cta{background:white;color:var(--ink)}
  .fx .hero p,.fx .cta .lead{color:var(--muted)}
  .fx section{padding:24px 0}
  .fx .blueprint{display:none}
  .fx .hero-grid{display:block}
  .fx .checklist label{background:#eee;color:#222}
  .fx .card,.fx .step,.fx details{break-inside:avoid}
}