/* ===== 製品詳細ページ（fsi-embedded.css / category.css の拡張） ===== */
/* 製品ヘッダー（page-hero内） */
.pdh-tags{display:flex;gap:calc(7px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(13px * var(--sp-k))}
.pdh-title{font-size:calc(30px * var(--fs-k));font-weight:900;line-height:1.45;letter-spacing:-0.02em}
.pdh-maker{display:inline-flex;align-items:center;gap:calc(13px * var(--sp-k));margin-top:calc(20px * var(--sp-k));background:#fff;border:1px solid var(--line);border-radius:10px;padding:calc(9px * var(--sp-k)) calc(16px * var(--sp-k)) calc(9px * var(--sp-k)) calc(14px * var(--sp-k));box-shadow:var(--sh-1);transition:.15s var(--ease)}
.pdh-maker:hover{border-color:var(--prod);transform:translateY(-1px)}
.pdh-maker .k{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-label);letter-spacing:.08em;color:var(--ink-mute)}
.pdh-maker .lg{width:88px;height:38px;display:flex;align-items:center;justify-content:center}
.pdh-maker .lg img{max-width:100%;max-height:100%;object-fit:contain}
.pdh-maker .nm{font-size:var(--fs-body);font-weight:900}
.pdh-maker svg{width:15px;height:15px;stroke:var(--prod);stroke-width:2.2;fill:none}

.pdp{display:grid;grid-template-columns:1fr 300px;gap:calc(40px * var(--sp-k));align-items:start}
.pdp-rail{position:sticky;top:124px}/* 104→124: ヘッダー（97px）との隙間を 7px→27px に（2026-09-08 ユーザー指示） */
.rail-card{border:1px solid var(--hair);background:#fff;border-radius:var(--rd-md);box-shadow:var(--sh-1);padding:calc(26px * var(--sp-k)) calc(24px * var(--sp-k));text-align:center}
.rail-card .t{font-size:var(--fs-body);font-weight:900;line-height:1.7}
.rail-card .btn{width:100%;justify-content:center;margin-top:calc(16px * var(--sp-k))}
.rail-card .note{font-size:var(--fs-sub);color:var(--ink-soft);margin-top:calc(16px * var(--sp-k));line-height:1.7}
.rail-card .dept{font-size:var(--fs-label);color:var(--ink-mute);margin-top:calc(12px * var(--sp-k))}
.rail-card .tel-v{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:calc(24px * var(--fs-k));font-weight:700;color:var(--navy);margin-top:calc(3px * var(--sp-k))}
.rail-card .tel-v svg{width:19px;height:19px;fill:var(--navy)}
.pdp-top{display:grid;grid-template-columns:minmax(0,390px) 1fr;gap:calc(34px * var(--sp-k));margin-top:calc(20px * var(--sp-k));align-items:start}
.pdp-media .tags{display:flex;gap:calc(7px * var(--sp-k));flex-wrap:wrap;margin-bottom:calc(12px * var(--sp-k))}
.pdp-media img{width:100%;border:1px solid var(--hair);border-radius:var(--rd-md);background:#fff;padding:calc(16px * var(--sp-k));box-sizing:border-box;display:block}
.pdspec>div{display:grid;grid-template-columns:158px 1fr;gap:calc(14px * var(--sp-k));padding:calc(11px * var(--sp-k)) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.pdspec dt{font-size:var(--fs-sub);color:var(--ink-mute)}
.pdspec dd{font-size:var(--fs-body);font-weight:700;line-height:1.5}
.pdspec+.btn{margin-top:calc(20px * var(--sp-k));width:100%;justify-content:space-between;padding:calc(15px * var(--sp-k)) calc(22px * var(--sp-k));font-size:var(--fs-ui)}
.backlinks{display:grid;grid-template-columns:1fr 1fr;gap:calc(10px * var(--sp-k));margin-top:calc(32px * var(--sp-k));padding-top:calc(28px * var(--sp-k));border-top:1px solid var(--line)}
.backlinks a{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--sp-k));background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:calc(14px * var(--sp-k)) calc(18px * var(--sp-k));font-size:var(--fs-ui);font-weight:700;color:var(--ink-soft);transition:.14s;line-height:1.5}
.backlinks a svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;flex:none}
.backlinks a:hover{border-color:var(--prod);color:var(--prod);background:#fff}

/* 記事セクション（概要・ブロック図・仕様・提供物） */
.pd-sec{margin-top:calc(46px * var(--sp-k))}
.pd-sec>h2{display:flex;align-items:center;gap:calc(12px * var(--sp-k));font-size:calc(20px * var(--fs-k));font-weight:900;background:var(--bg-soft);border-radius:9px;padding:calc(13px * var(--sp-k)) calc(18px * var(--sp-k))}
.pd-sec>h2::before{content:"";width:5px;height:21px;background:var(--prod);border-radius:2px;flex:none}
.pd-sec .bd{padding:calc(8px * var(--sp-k)) calc(6px * var(--sp-k)) 0}
.pd-sec .bd>p{font-size:var(--fs-body);line-height:2;color:var(--ink);margin-top:calc(14px * var(--sp-k))}
.mk-site{margin-top:calc(20px * var(--sp-k))}
.mk-site .lb{display:inline-flex;font-size:var(--fs-label);font-weight:700;background:var(--blue-50);color:var(--navy);border:1px solid var(--blue-100);border-radius:var(--shape-pill);padding:calc(4px * var(--sp-k)) calc(10px * var(--sp-k))}
.mk-site a{display:block;font-size:var(--fs-ui);font-weight:700;color:var(--navy);margin-top:calc(8px * var(--sp-k));word-break:break-all}
.mk-site a:hover{text-decoration:underline}
.blockfig{margin:calc(22px * var(--sp-k)) auto 0;max-width:780px}
.blockfig .ph{aspect-ratio:16/9}
.spec-h4{font-size:var(--fs-body);font-weight:900;margin:calc(24px * var(--sp-k)) 0 calc(5px * var(--sp-k));display:flex;gap:calc(9px * var(--sp-k));align-items:center}
.spec-h4::before{content:"";width:9px;height:9px;background:var(--prod);border-radius:2px;flex:none}
.spec-h4.plain::before{display:none}
.spec-p{font-size:var(--fs-body);line-height:1.95;color:var(--ink-soft)}
.pd-sec .bd ul.pl{list-style:none;margin-top:calc(10px * var(--sp-k));font-size:var(--fs-body);line-height:2}
.pd-sec .bd ul.pl li::before{content:"・"}

/* お問い合わせフォーム */
.pdform{border:1px solid var(--line);max-width:880px;margin:0 auto;background:#fff;border-radius:var(--rd-lg);padding:calc(44px * var(--sp-k)) calc(52px * var(--sp-k));box-shadow:var(--sh-1)}
.frow{display:grid;grid-template-columns:190px 1fr;gap:calc(18px * var(--sp-k));align-items:center;padding:calc(10px * var(--sp-k)) 0}
.frow.top{align-items:start}
.frow .fl{font-size:var(--fs-ui);font-weight:700;text-align:right;line-height:1.5;padding-top:2px}
.fin{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:calc(12px * var(--sp-k)) calc(14px * var(--sp-k));font-size:var(--fs-ui);font-family:inherit;outline:none;background:#fff;color:var(--ink);box-sizing:border-box;transition:.14s}
.fin:focus{border-color:var(--prod);box-shadow:0 0 0 3px color-mix(in oklab,var(--prod) 14%,transparent)}
.fin.s{max-width:220px}
textarea.fin{min-height:150px;resize:vertical;line-height:1.8}
.fselw{position:relative;display:block;max-width:340px}
.fselw::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5.5px solid var(--ink-soft);pointer-events:none}
.fselw select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:calc(38px * var(--sp-k))}
.fradios{display:flex;gap:calc(6px * var(--sp-k)) calc(20px * var(--sp-k));flex-wrap:wrap}
.fradios label,.fchecks label{display:inline-flex;align-items:center;gap:calc(7px * var(--sp-k));font-size:var(--fs-ui);font-weight:500;cursor:pointer}
.fradios input,.fchecks input{accent-color:var(--prod);width:16px;height:16px}
.fchecks{display:flex;gap:calc(10px * var(--sp-k)) calc(20px * var(--sp-k));flex-wrap:wrap;align-items:center}
.fnote{font-size:var(--fs-body);font-weight:700;margin:calc(26px * var(--sp-k)) 0 calc(4px * var(--sp-k));padding-top:calc(22px * var(--sp-k));border-top:1px solid var(--hair)}
.fsubmit{text-align:center;margin-top:calc(30px * var(--sp-k))}
.fsubmit .btn{padding:calc(16px * var(--sp-k)) calc(40px * var(--sp-k));font-size:var(--fs-ui)}
.hurry{border:1px solid var(--line);max-width:440px;margin:calc(36px * var(--sp-k)) auto 0;text-align:center;background:#fff;border-radius:var(--rd-md);padding:calc(22px * var(--sp-k));box-shadow:var(--sh-1)}
.hurry .k{font-size:var(--fs-sub);font-weight:900}
.hurry .tel-v{display:flex;align-items:center;justify-content:center;gap:calc(9px * var(--sp-k));font-family:"Roboto Condensed",sans-serif;font-size:calc(28px * var(--fs-k));font-weight:700;color:var(--navy);margin-top:calc(8px * var(--sp-k))}
.hurry .tel-v svg{width:21px;height:21px;fill:var(--navy)}
.hurry .o{font-size:var(--fs-label);color:var(--ink-mute);margin-top:calc(3px * var(--sp-k))}

@media(max-width:1100px){.pdp{grid-template-columns:1fr}.pdp-rail{position:static;order:2}}
@media(max-width:980px){.pdp-top{grid-template-columns:1fr}.backlinks{grid-template-columns:1fr}.pdform{padding:calc(28px * var(--sp-k)) calc(22px * var(--sp-k))}.frow{grid-template-columns:1fr;gap:calc(6px * var(--sp-k))}.frow .fl{text-align:left}}