/*
 * 充電機器・電子機器メーカー向け｜電気検査装置のご提案（/solutions/charging-device-inspection/）の本文の見た目。
 * 元＝坂本さんが 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:#102839;--blue:#087eac;--line:#d3e0e7;--paper:#f0f5f8;color:var(--navy);line-height:1.85;font-size:16px}
.fx *{box-sizing:border-box}
.fx a{color:inherit}
.fx p{margin:0 0 18px}
.fx ul{padding-left:22px;margin:12px 0}
.fx li{margin:8px 0}
.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:24px;font-size:14px;padding:12px 5%}
.fx .fx-nav a{text-decoration:none}
.fx .hero{background:var(--navy);color:#fff;padding:76px 0 60px}
.fx .eyebrow{font-size:14px;letter-spacing:.12em;color:#78d6ef;font-weight:700}
.fx h1{font-size:clamp(30px,4.2vw,54px);line-height:1.5;letter-spacing:.02em;margin:18px 0 25px}
.fx h2{font-size:clamp(25px,3vw,36px);line-height:1.55;margin:10px 0 24px}
.fx h3{font-size:21px;line-height:1.6;margin:0 0 12px}
.fx .lead{max-width:790px;color:#d5e3ec}
.fx .hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.fx .architecture{border:1px solid #456579;padding:26px;background:#183547}
.fx .control{text-align:center;padding:24px;border:1px solid #78d6ef;font-weight:700}
.fx .control__sub{font-size:14px;font-weight:400}
.fx .branches{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:24px}
.fx .branches div{border-top:3px solid #78d6ef;padding:18px 10px;background:#244456;text-align:center}
.fx .branches small{display:block;font-size:14px;font-weight:400}
.fx .caption{font-size:14px;color:#b6cbd8;margin-top:15px;margin-bottom:0}
.fx .button{display:inline-block;background:#79d8ee;color:#102839;padding:12px 25px;text-decoration:none;font-weight:700;margin-top:10px}
/* 相談の入口（足した分。トップの「相談先を探す」と同じ色） */
.fx .button--cta{background:#ff7007;color:#fff}
.fx .button--cta:hover{background:#e35f00}
/* 元のボタンの横に相談のボタンを足した並び。横に並べて同じ幅、スマホ幅では縦に並べて全幅（solutions/CLAUDE.md 3章） */
.fx .fx-actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.fx .fx-actions>*{text-align:center}
.fx .dates{display:flex;gap:40px;margin-top:44px;padding-top:25px;border-top:1px solid #456579;flex-wrap:wrap}
.fx .dates small{display:block;color:#bed0dc;font-size:14px}
.fx .dates b{font-size:24px}
.fx section{padding:68px 0;scroll-margin-top:15px}
.fx .muted{background:var(--paper)}
.fx .kicker{color:var(--blue);font-size:14px;font-weight:700;letter-spacing:.08em}
/* 薄い灰青の背景（.muted）の上では元の青だとコントラスト比 4.5 に届かないため、同じ青系で少し濃くした（solutions/CLAUDE.md 5.1） */
.fx .muted .kicker{color:#06718c}
.fx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.fx .card{border-top:3px solid var(--blue);padding:25px;background:#fff}
.fx .num{font-size:14px;color:var(--blue);font-weight:bold;margin-bottom:15px}
.fx .two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.fx .two--gap{margin-top:30px}
.fx .panel{border:1px solid var(--line);padding:28px}
.fx .panel strong{color:var(--blue)}
.fx .table-wrap{overflow:auto}
.fx table{border-collapse:collapse;width:100%;min-width:570px;font-size:16px}
.fx th,.fx td{padding:17px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.fx th{background:var(--navy);color:#fff}
.fx td:first-child{font-weight:700;width:23%}
.fx .note{border-left:4px solid var(--blue);padding:18px 22px;background:#e5f2f7;font-size:15px;margin-top:24px}
.fx .sequence{counter-reset:steps;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fx .step{border-top:1px solid var(--line);padding-top:20px}
.fx .step:before{counter-increment:steps;content:'0' counter(steps);font-size:28px;color:var(--blue);font-weight:700;display:block;margin-bottom:12px}
.fx details{border-bottom:1px solid var(--line);padding:20px 0}
.fx summary{cursor:pointer;font-weight:700;font-size:18px}
.fx details p{padding:15px 0 0}
.fx .closing{background:var(--navy);color:#fff}
.fx .closing .kicker{color:#78d6ef}
.fx .checklist{background:#203d50;padding:28px}
.fx .checklist li{color:#d5e3ec}
/* 元のフッター（会社名を除いた文） */
.fx .fx-foot{padding:25px 5%;font-size:14px;display:flex;justify-content:space-between;gap:20px}
@media(max-width:800px){
  .fx .fx-nav__in{flex-wrap:wrap;gap:10px 20px;justify-content:flex-start}
  .fx .hero-grid,.fx .two,.fx .grid,.fx .sequence{grid-template-columns:1fr}
  .fx .hero{padding:45px 0}
  .fx .wrap{padding:0 22px}
  .fx section{padding:45px 0}
  .fx .dates{gap:25px}
  .fx .fx-foot{display:block}
  .fx .branches{gap:10px}
}
@media(max-width:440px){
  .fx .fx-actions{display:grid;grid-auto-flow:row;width:100%}
  /* スマホ幅で見出しの最後の行が1〜2文字だけになるのを避ける（文言は変えず、文字の大きさだけ。solutions/CLAUDE.md 5.1） */
  .fx h1{font-size:27px}
  .fx summary{font-size:16px}
}
@media print{
  .fx .fx-nav,.fx .button{display:none}
  .fx .hero,.fx .closing{background:#fff;color:#102839}
  .fx .lead,.fx .caption,.fx .dates small{color:#102839}
  .fx section{padding:25px 0}
  .fx .card,.fx .panel,.fx table{break-inside:avoid}
  .fx .architecture,.fx .checklist{background:#eef3f6;color:#102839}
  .fx .branches div{background:#e0eaf0;color:#102839}
  .fx .checklist li{color:#102839}
}