/*
 * 大型グラファイト切断設備の導入相談（/solutions/graphite-cutting/）の本文の見た目。
 * 元＝坂本さんが 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{--paper:#f4f3ed;--ink:#202624;--green:#31634c;--lime:#d6ef9a;--line:#d4d8ce;--muted:#667069;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.85}
.fx *{box-sizing:border-box}
.fx a{color:inherit;text-decoration:none}
.fx button,.fx input{font:inherit}
.fx button,.fx a{touch-action:manipulation}
.fx button{cursor:pointer}
/* ページ内ナビゲーション（元はページ上部のヘッダーの中。トップのヘッダーの下に置いた） */
.fx .fx-nav{border-bottom:1px solid var(--line);background:rgba(244,243,237,.97)}
.fx .fx-nav__in{display:flex;justify-content:flex-end;gap:28px;font-size:12px;padding:14px 5%}
.fx .button{display:inline-flex;justify-content:center;align-items:center;gap:22px;background:var(--green);color:white;padding:14px 23px;font-size:13px;font-weight:700;border:1px solid var(--green);transition:.2s}
.fx .button:hover{background:#224c38;transform:translateY(-2px)}
/* 相談のボタン：ヘッダーの「相談先を探す」と同じ色（solutions/CLAUDE.md 3章） */
.fx .button--cta{background:#ff7007;color:#fff;border-color:#ff7007}
.fx .button--cta:hover{background:#e35f00}
.fx .wrap{max-width:1240px;margin:auto;padding:0 5%}
.fx .eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:2.6px;color:var(--green);font-weight:700}
.fx .hero{display:grid;grid-template-columns:1.04fr 1fr;gap:4%;padding-top:64px;padding-bottom:60px}
.fx .hero h1{font-size:clamp(32px,3.3vw,48px);line-height:1.55;letter-spacing:-1.6px;font-weight:600;margin:21px 0}
.fx .hero h1 em{font-style:normal;color:var(--green);border-bottom:2px solid var(--green)}
.fx .intro{font-size:14px;max-width:480px;color:#525d56}
.fx .hero .button{margin:23px 0 12px}
.fx .tiny{font-size:11px;color:var(--muted)}
.fx .visual{background:#242c28;color:#eff5e9;position:relative;min-height:470px;overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:space-between;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:28px 28px}
.fx .visual-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px}
.fx .dot{width:6px;height:6px;background:var(--lime);display:inline-block;border-radius:50%;margin-right:8px}
.fx .visual svg{width:100%;height:auto;overflow:visible}
.fx .visual-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx .visual-bottom p{font-size:11px;margin:0;color:#bac7ba}
.fx .visual button{background:transparent;border:1px solid #809780;color:var(--lime);padding:8px 13px;font-size:11px;min-height:44px}  /* ボタンの高さ 44px（5.1） */
.fx .moving{transition:transform .8s}
.fx .split .moving{transform:translate(20px,-10px)}
.fx .cutline{stroke-dasharray:5 5;animation:fx-dash 14s linear infinite}
@keyframes fx-dash{to{stroke-dashoffset:-100}}
.fx .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0;gap:20px;font-size:12px}
.fx .strip span{font-family:Arial;margin-right:13px;color:var(--green)}
.fx section{padding:85px 0}
.fx .section-head{display:grid;grid-template-columns:1fr 2.1fr;gap:6%;margin-bottom:36px}
.fx h2{font-size:30px;line-height:1.6;font-weight:500;letter-spacing:-.7px;margin:8px 0 12px}
.fx h3{font-size:18px;font-weight:600;line-height:1.7}
.fx .section-head p{font-size:13px;color:var(--muted);margin:10px 0}
.fx .problems{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.fx .problem{border-top:1px solid var(--ink);padding-top:16px}
.fx .num{font:12px Arial;color:var(--green)}
.fx .problem p{font-size:13px;color:var(--muted)}
.fx .dark{background:#26372e;color:#f3f4ec}
.fx .dark .eyebrow{color:var(--lime)}
.fx .dark .section-head p{color:#becbbf}
.fx .concept{display:grid;grid-template-columns:1.25fr 1fr;gap:8%;align-items:center}
.fx .concept svg{width:100%;height:auto}
.fx .features{display:grid;gap:20px}
.fx .feature{border-bottom:1px solid #5d7060;padding-bottom:16px;display:grid;grid-template-columns:28px 1fr;gap:10px}
.fx .feature b{font-size:15px;font-weight:500}
.fx .feature p{font-size:12px;color:#c1cfc3;margin:6px 0}
.fx .feature span{font:12px Arial;color:var(--lime)}
.fx .compare{margin-top:35px;border-top:1px solid #5d7060;padding-top:23px;display:flex;gap:30px;font-size:12px;color:#d1dbcf}
.fx .compare strong{color:var(--lime);font-weight:500}
.fx .calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:#fcfcf7}
.fx .calc-fields{padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fx .calc label{font-size:12px;display:block}
.fx .inputline{display:flex;align-items:center;background:var(--paper);border-bottom:1px solid #92a292;margin-top:9px;padding:5px 10px}
.fx .inputline input{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);font:23px Arial;padding:8px 0;outline-offset:5px}
.fx .inputline span{font:11px Arial;color:var(--muted)}
.fx .result{padding:32px;background:#e7ecdf;display:flex;flex-direction:column;justify-content:center}
.fx .result .value{font:54px Arial;letter-spacing:-2px;color:var(--green);margin:12px 0}
.fx .result .value small{font-size:16px;letter-spacing:0;margin-left:10px}
.fx .result p{font-size:12px;margin:0}
/* 元は style 属性（margin-top:15px;color:#63715e）。.fx の中の書き方に移した */
.fx .result p.required{margin-top:15px;color:#55624f}  /* コントラスト比 4.31 → 4.5 以上（5.1） */
.fx .calc-note{font-size:11px;color:var(--muted);margin-top:13px}
.fx .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fx .step{border-top:1px solid var(--line);padding-top:20px}
.fx .step span{font:26px Arial;color:var(--green)}
.fx .step h3{font-size:15px}
.fx .step p{font-size:12px;color:var(--muted)}
.fx .scope{margin-top:30px;padding:21px 25px;border-left:3px solid var(--green);background:#e9ecdf;font-size:12px}
/* 元は style="padding-top:10px" */
.fx section.flow,.fx section.faq-sec{padding-top:10px}
.fx .faq{max-width:840px;margin-left:auto}
.fx details{border-bottom:1px solid var(--line);padding:20px 0}
.fx summary{cursor:pointer;list-style:none;font-size:14px;display:flex;justify-content:space-between;gap:20px}
.fx summary::after{content:'＋';color:var(--green)}
.fx details[open] summary::after{content:'−'}
.fx details p{font-size:12px;color:var(--muted);padding-right:30px}
.fx .contact{background:var(--green);color:white;padding:65px 0}
.fx .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.fx .contact .eyebrow{color:var(--lime)}
.fx .contact h2{font-size:32px}
.fx .contact p{font-size:13px;color:#d9e4d9}
.fx .contact-info{border:1px solid #799a84;padding:28px}
.fx .contact-info ul{font-size:12px;margin:12px 0 22px;padding-left:18px}
.fx .contact-info .button{width:100%}
.fx .fx-foot{padding:35px 5%;font-size:10px;color:var(--muted)}
.fx a:focus-visible,.fx button:focus-visible,.fx summary:focus-visible{outline:3px solid #80ad56;outline-offset:5px}
.fx .mobile-cta{display:none}
@media(max-width:800px){
.fx .fx-nav__in{gap:18px;justify-content:center}
.fx .hero{grid-template-columns:1fr;gap:30px;padding-top:35px}
.fx .hero h1{font-size:30px}  /* 375px で「もう1本分の可能性を。」の最後の行が2文字になるのを防ぐため 35px → 30px（5.1） */
.fx .visual{min-height:360px}
.fx .strip{grid-template-columns:1fr;gap:9px}
.fx .section-head,.fx .concept,.fx .calc,.fx .contact .wrap{grid-template-columns:1fr;gap:25px}
.fx .section-head{margin-bottom:25px}
.fx .problems{grid-template-columns:1fr;gap:20px}
.fx section{padding:55px 0}
.fx section.flow,.fx section.faq-sec{padding-top:10px}
.fx h2{font-size:27px}
.fx .contact h2{font-size:24px}  /* 375px で最後の行が2文字になるのを防ぐ（5.1。元は 32px のまま 27px の指定に負けていた） */
.fx .steps{grid-template-columns:1fr 1fr}
.fx .compare{flex-direction:column;gap:8px}
.fx .calc-fields{padding:23px;gap:16px}
.fx .result{padding:25px}
.fx .fx-foot{padding-bottom:85px}
.fx .mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--paper);padding:8px 5%;border-top:1px solid var(--line)}
.fx .mobile-cta .button{width:100%;padding:10px}
.fx .contact-info{padding:23px}
}
@media(prefers-reduced-motion:reduce){
.fx{scroll-behavior:auto}
.fx *{animation:none!important;transition:none!important}
}
/* 見出し・ボタンの最後の行が1〜2文字だけになるのを、文言を変えずに行の長さをそろえて防ぐ（5.1） */
.fx h1,.fx h2,.fx .visual button{text-wrap:balance}