@charset "utf-8";

:root{
  /* SP時に本文・見出しをまとめて縮小するための係数（font-size は全て calc(... * var(--fsc))） */
  --fsc:1;
  --navy:#0f2965;
  --navy-d:#0a1c4a;
  --blue:#1a66e5;
  --blue-l:#7dbdf5;
  --sky:#e6f3fb;
  --sky2:#f4fafd;
  --accent:#0b32ad;
  --accent-d:#082887;
  --ink:#16274f;
  --gray:#556480;
  --gray-l:#7d8ca6;
  --line:#cfe4f3;
  --brand:#dd262d;
  --white:#fff;
  /* 角丸スケール：0=構造（カード・ボタン・写真） / part=図版の部品 / panel=図版パネル / pill=ラベル */
  --radius:0;
  --r-part:12px;
  --r-panel:20px;
  --r-pill:999px;
  --shadow:0 2px 14px rgba(15,41,101,.09);
  --shadow-l:0 10px 34px rgba(15,41,101,.14);
  --wrap-w:1480px;
  --wrap:1120px;
  --ease:cubic-bezier(.22,.7,.3,1);
}
@media (max-width:900px){:root{--fsc:1.08}}
/* SPは文字が小さいうえ、Safariは同じウエイトでもChromeより細く描くため、
   本文のふつうの太さを400から500に上げる。見出しなど太さを指定済みの箇所は変わらない */
@media (max-width:900px){body{font-weight:500}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--white);
  font-family:"DM Sans","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  font-size:calc(16px * var(--fsc));line-height:1.9;letter-spacing:.02em;
  font-feature-settings:"palt";
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.5;font-weight:700;letter-spacing:.035em}
p{margin:0}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 40px,var(--wrap));margin-inline:auto}

/* ---------- 表示性能 ---------- */
/* 以前は main > section と .ft に content-visibility:auto を掛けていたが外した。
   画面外の要素が1000pxの箱として扱われるためページ全体の高さが実際と食い違い、
   #contact などのページ内リンクが目的のセクションまで届かず手前で止まっていた。
   画像はすべて loading="lazy" と width/height 指定があるので、これが無くても
   初期表示の重さは変わらない。 */

/* ---------- セクション共通 ---------- */
.sec{padding:72px 0}
.sec--sky{background:var(--sky)}
#onesystem{overflow:hidden}
/* MVの下端の色から次セクションへ自然につなぐ */
#issue.sec--pale{background:var(--sky)}
.sec--sky2{background:var(--sky2)}
.sec--navy{background:var(--navy);color:#fff}
.sec-head{text-align:center;margin-bottom:42px}
.sec-label{
  display:inline-block;font-size:calc(11.5px * var(--fsc));font-weight:500;letter-spacing:.24em;
  color:var(--blue);margin-bottom:18px;
}
.sec--navy .sec-label{color:var(--blue-l)}
.br-sp{display:none}
@media (max-width:600px){.br-sp{display:inline}}
/* PC専用の改行（タブレット以下では解除） */
@media (max-width:900px){br.pc{display:none}}
.sec-sub{margin:-4px 0 14px;font-size:calc(clamp(13.5px,1.5vw,15.5px) * var(--fsc));font-weight:700;color:var(--blue);letter-spacing:.03em;line-height:1.7}
.sec-head h2{font-size:calc(clamp(25px,3.1vw,34px) * var(--fsc));color:var(--navy);line-height:1.4}
.sec-head h2 em{font-style:normal;color:inherit}
.sec--navy .sec-head h2{color:#fff}
.sec-head .lead,.tb__head .lead{margin-top:18px;color:var(--gray);font-size:calc(15px * var(--fsc));line-height:1.7}
.sec--navy .sec-head .lead{color:#c3e1f5}

/* ---------- ヘッダー ---------- */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease);
}
.hd.is-stuck{box-shadow:0 2px 14px rgba(13,58,107,.08)}
.hd__in{display:flex;align-items:center;gap:26px;height:72px;width:min(100% - 40px,var(--wrap-w));margin-inline:auto}
.hd__logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.hd__logo img{width:132px}
.hd__logo span{
  font-size:calc(10.5px * var(--fsc));font-weight:700;color:var(--navy);letter-spacing:.06em;line-height:1.35;
  padding-left:11px;border-left:1px solid var(--line);
}
.hd__nav{display:flex;gap:22px;margin-left:auto}
.hd__nav a{font-size:calc(13.5px * var(--fsc));font-weight:700;color:var(--ink);white-space:nowrap;transition:color .2s}
.hd__nav a:hover{color:var(--blue)}
/* 項目を6つに増やしたぶん、横幅に余裕のない画面では間隔だけ詰める。
   1320pxより広ければ従来どおりの間隔のまま */
@media (min-width:1181px) and (max-width:1320px){
  .hd__nav{gap:14px}
  .hd__in{gap:16px}
}
.hd__tel{flex-shrink:0;text-align:right;line-height:1.25}
.hd__tel a{display:flex;align-items:center;gap:6px;color:var(--navy);text-decoration:none}
.hd__tel svg{width:15px;height:15px;fill:var(--blue);flex-shrink:0}
.hd__tel b{font-size:calc(18px * var(--fsc));font-weight:700;letter-spacing:.02em;white-space:nowrap}
.hd__tel span{display:block;margin-top:2px;font-size:calc(10.5px * var(--fsc));font-weight:700;color:var(--gray-l);white-space:nowrap}
.hd__cta{
  display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  font-size:calc(13.5px * var(--fsc));font-weight:700;padding:11px 20px;border-radius:0;white-space:nowrap;
  transition:background .2s;
}
.hd__cta:hover{background:var(--accent-d)}

/* ハンバーガー（ナビが隠れる幅で表示） */
.hd__burger{
  display:none;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;
  width:46px;padding:6px 0;margin-right:-6px;
  background:none;border:0;cursor:pointer;color:var(--navy);-webkit-tap-highlight-color:transparent;
}
.hd__burger-b{display:block;position:relative;width:24px;height:16px}
.hd__burger-b i{
  position:absolute;left:0;width:100%;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .28s var(--ease),opacity .2s linear;
}
.hd__burger-b i:nth-child(1){top:0}
.hd__burger-b i:nth-child(2){top:7px}
.hd__burger-b i:nth-child(3){top:14px}
.hd__burger-t{font-size:calc(9px * var(--fsc));font-weight:700;letter-spacing:.12em;line-height:1}
.hd__burger[aria-expanded="true"] .hd__burger-b i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__burger[aria-expanded="true"] .hd__burger-b i:nth-child(2){opacity:0}
.hd__burger[aria-expanded="true"] .hd__burger-b i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* SPはヘッダーを63px（.hd__in の62px＋下線1px）に詰める。
   FVの .fv__stage の margin-top と .fv__in の top も同じ63pxにそろえること */
@media (max-width:900px){
  .hd__in{height:62px}
}

/* ドロワー */
.drw{
  position:fixed;inset:0;z-index:95;display:flex;justify-content:flex-end;
  background:rgba(8,26,64,.45);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
}
.drw.is-open{opacity:1;visibility:visible}
.drw__in{
  width:min(84%,360px);height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;padding:96px 26px 40px;
  box-shadow:-8px 0 30px rgba(13,58,107,.16);
  transform:translateX(18px);transition:transform .3s var(--ease);
}
.drw.is-open .drw__in{transform:none}
.drw__nav li + li{border-top:1px solid var(--line)}
.drw__nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;font-size:calc(15px * var(--fsc));font-weight:700;color:var(--ink);
}
.drw__nav a::after{
  content:"";width:7px;height:7px;border-top:2px solid var(--blue-l);border-right:2px solid var(--blue-l);
  transform:rotate(45deg);flex-shrink:0;
}
.drw__act{margin-top:26px}
.drw__act .btn{width:100%}
.drw__tel{
  display:block;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;color:var(--navy);
}
.drw__tel svg{width:15px;height:15px;fill:var(--blue);vertical-align:-2px;margin-right:6px}
.drw__tel b{font-size:calc(21px * var(--fsc));font-weight:700;letter-spacing:.02em}
.drw__tel span{display:block;margin-top:4px;font-size:calc(11px * var(--fsc));font-weight:700;color:var(--gray-l)}
body.is-navopen{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .drw,.drw__in,.hd__burger-b i{transition:none}
}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:calc(15.5px * var(--fsc));font-weight:700;padding:17px 32px;border-radius:0;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn--pri{background:linear-gradient(90deg,#1046c9 0%,#1787f8 100%);color:#fff;box-shadow:0 4px 16px rgba(11,50,173,.24)}
.btn--pri:hover{filter:brightness(1.06);box-shadow:0 8px 22px rgba(11,50,173,.32)}
.btn--sec{background:#fff;color:var(--navy);border-color:#bedff6;box-shadow:var(--shadow)}
.btn--sec:hover{border-color:var(--blue);color:var(--blue)}
.btn--wh{background:#fff;color:var(--navy)}
.btn--wh:hover{background:var(--sky)}
.btn--gh{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--gh:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn--lg{font-size:calc(17px * var(--fsc));padding:20px 44px}
.btn__ico{width:19px;height:19px;flex-shrink:0;fill:currentColor}

/* 「止めずに更新できます」の比較図 */
.nostop__cmp{margin:0;max-width:none;text-align:left}
.nostop__row{display:flex;align-items:center;gap:18px}
.nostop__row + .nostop__row{margin-top:14px}
.nostop__k{
  flex:0 0 96px;font-size:calc(12px * var(--fsc));font-weight:700;line-height:1.6;
  color:var(--navy);letter-spacing:.02em;text-align:right;
}
.nostop__row--new .nostop__k{color:var(--accent)}
.nostop__bar{flex:1;display:flex;height:46px;gap:3px}
.nostop__bar .seg{
  display:flex;align-items:center;justify-content:center;
  font-size:calc(11.5px * var(--fsc));font-weight:700;letter-spacing:.02em;text-align:center;line-height:1.4;
  padding:0 6px;
}
.seg--on{flex:5;background:#e6f1f8;color:#6b7896}
.seg--off{
  flex:3;color:#a8443f;
  background:repeating-linear-gradient(-45deg,#fbeceb 0 6px,#f6dedc 6px 12px);
  border:1px solid #eec7c4;
}
.seg--on2{flex:3;background:#e6f1f8;color:#6b7896}
.nostop__row--new .seg--on{flex:8;background:var(--sky);color:var(--blue);border:1px solid #cfe8f8}
.seg--sw{flex:0 0 52px;background:var(--navy);color:#fff;font-size:calc(10.5px * var(--fsc));letter-spacing:.04em}
.seg--new{flex:3;background:var(--accent);color:#fff}
.nostop__axis{
  display:flex;justify-content:space-between;margin:12px 0 0 114px;
  font-size:calc(11px * var(--fsc));color:var(--gray-l);letter-spacing:.04em;
}

/* ---------- 課題（01） ---------- */
.issue__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:#c7dbe9;border:1px solid #c7dbe9;border-top:2px solid var(--navy);
}
.issue__item{
  display:flex;gap:15px;align-items:flex-start;background:#f8fcff;
  padding:22px 22px;
}
.issue__i{
  flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;margin-top:1px;
  background:#eaf5fd;color:var(--navy);
}
.issue__i svg{
  width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.issue__item h3{font-size:calc(16.5px * var(--fsc));color:var(--navy);margin-bottom:5px}
.issue__item p{font-size:calc(13.5px * var(--fsc));color:var(--gray);line-height:1.8}
.ans{margin-top:28px;text-align:center}
.ans__arw{
  display:block;width:78px;height:36px;margin:0 auto 13px auto;
  background:linear-gradient(180deg,#2f8ada 0%,#1b56b8 55%,#12379f 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.ans__box{
  background:var(--navy);color:#fff;padding:44px 40px 46px;margin-top:0;
  background-image:linear-gradient(135deg,#0f2965 0%,#12379f 100%);
}
.ans__k{font-size:calc(10.5px * var(--fsc));font-weight:700;letter-spacing:.26em;color:#9fc9ee;margin-bottom:18px}
.ans__box h3{font-size:calc(clamp(27px,2.5vw,30px) * var(--fsc));line-height:1.62;letter-spacing:.02em}
.ans__box h3 em{font-style:normal;color:#fff;box-shadow:inset 0 -.16em 0 rgba(125,191,255,.55)}
.ans__d{
  max-width:44em;margin:22px auto 0;font-size:calc(14.5px * var(--fsc));line-height:2.05;
  color:rgba(255,255,255,.86);word-break:auto-phrase;
}
.ans__d b{color:#fff}

/* ANSWER：つなぎ方の比較図（別案） */
.ans__fig{margin-top:clamp(22px,2.4vw,30px);background:#fff;padding:clamp(20px,2.3vw,28px);text-align:left}
@media (max-width:600px){
  /* 図の面積を稼ぐため、SPでは白枠の内側余白を詰める */
  .ans__fig{padding:16px 10px 18px}
}

/* 有線／無線の比較図（HTMLで作図） */
.bld{
  --bl:#0b53d4;--rd:#e2564b;--rd-d:#cf3f34;
  display:grid;gap:clamp(18px,2vw,26px);
}
/* min-width:0 がないと、図の内容幅ぶんグリッドの列が広がって画面からはみ出す */
.bld__p{min-width:0;border-radius:var(--r-panel);padding:clamp(12px,1.4vw,18px)}
.bld__p--old{background:#fdefec}
.bld__p--new{background:#e8f2ff}
.bld__h{
  margin:clamp(10px,1.2vw,15px) 0;padding:clamp(10px,1.1vw,14px) clamp(14px,2vw,28px);
  border-radius:var(--r-pill);color:#fff;text-align:center;
}
.bld__p--old .bld__h{background:#6e7f96}
.bld__p--new .bld__h{background:var(--bl)}
.bld__h b{font-size:calc(clamp(16px,1.9vw,23px) * var(--fsc));font-weight:700;letter-spacing:.03em}
.bld__svg{display:block;width:100%;height:auto;font-family:inherit}
.bld__c{
  margin:clamp(10px,1.2vw,15px) 0 0;padding:clamp(14px,1.6vw,21px) clamp(12px,1.6vw,22px);
  border-radius:var(--r-part);text-align:center;
}
.bld__p--old .bld__c{background:#fad9d4}
.bld__p--new .bld__c{background:#cfe2fd}
.bld__c b{
  font-size:calc(clamp(17px,2vw,24px) * var(--fsc));font-weight:700;line-height:1.5;letter-spacing:.02em;
  color:#12233f;word-break:auto-phrase;
}
.bld__c em{font-style:normal}
.bld__p--old .bld__c em{color:var(--rd-d)}
.bld__p--new .bld__c em{color:var(--bl)}
/* PCは左右に並べて見比べられるようにする */
@media (min-width:1001px){
  .bld{grid-template-columns:1fr 1fr;gap:16px}
  .bld__p{padding:12px}
  /* 2カラムでは下部コピーが折り返さない大きさに抑える */
  .bld__c b{font-size:calc(clamp(16px,1.45vw,21px) * var(--fsc))}
  .bld__h b{font-size:calc(clamp(16px,1.45vw,21px) * var(--fsc))}
}
/* 横スクロールをなくすため、SPでは図の枠ごと画面幅いっぱいに広げて縮尺を稼ぐ。
   図だけがはみ出すと紺色の枠が切れて見えるので、ANSWERの枠ごと画面幅に合わせる */
@media (max-width:580px){
  .ans__box,.ans__fig{width:100vw;margin-left:calc(50% - 50vw)}
  /* 白い下地はなくして、従来／ココヘルパの2枚を上下にぴったりくっつける */
  .ans__fig{background:none;padding:0}
  .bld{gap:0}
  .bld__p{padding:12px 6px;border-radius:0}
  .bld__h,.bld__c{margin-left:10px;margin-right:10px}
}

.ans__fig-t{
  font-size:calc(13px * var(--fsc));font-weight:700;letter-spacing:.03em;color:var(--navy);
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid #e2f1f9;
}
.cw__r{display:grid;grid-template-columns:112px 1fr;gap:0 20px;align-items:center}
.cw__r--new{margin-top:20px;padding-top:22px;border-top:1px dashed #d4e7f3}
.cw__k{
  font-size:calc(12px * var(--fsc));font-weight:700;line-height:1.5;text-align:center;padding:9px 8px;
  color:#8a6a3a;background:#f4f0e8;
}
.cw__k span{display:block;margin-top:3px;font-size:calc(10px * var(--fsc));letter-spacing:.1em;opacity:.8}
.cw__r--new .cw__k{color:var(--blue);background:var(--sky)}
.cw__ch{display:flex;align-items:stretch;max-width:780px}
.cw__n{
  flex:0 0 148px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:13px 6px 14px;background:#fbfeff;border:1px solid #daedf8;
  font-size:calc(11.5px * var(--fsc));font-weight:700;line-height:1.45;color:var(--navy);text-align:center;
}
.cw__n img{display:block;width:auto;height:42px;object-fit:contain}
.cw__ln{
  flex:1 1 auto;min-width:60px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.cw__ln::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.cw__ln--wire::before{height:7px;background:repeating-linear-gradient(90deg,#c98f4a 0 9px,#e6c19a 9px 15px)}
.cw__ln--air::before{height:0;border-top:2px dashed #9dc9f0}
.cw__ln em{
  position:relative;z-index:1;font-style:normal;font-size:calc(10.5px * var(--fsc));font-weight:700;
  line-height:1.4;padding:5px 9px;text-align:center;background:#fff;
}
.cw__ln--wire em{color:#8a6a3a;border:1px solid #e3d3b8}
.cw__ln--air em{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--blue);border:1px solid #cee3f1;
}
.cw__ln--air em svg{width:12px;height:12px;fill:var(--blue);flex:0 0 auto}
.cw__s{grid-column:2;margin-top:13px;font-size:calc(12.5px * var(--fsc));line-height:1.8;color:#8a7a5e}
.cw__s--new{color:#4e5a78}
.cw__s b{color:#8a6a3a}
.cw__s--new b{color:var(--blue)}

/* ANSWER：4つのお悩みへの回答 */
.ans__qa-t{
  margin-top:clamp(24px,2.6vw,32px);font-size:calc(14.5px * var(--fsc));font-weight:700;
  letter-spacing:.04em;color:#cfe7f7;
}
.ans__qa{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:clamp(30px,3vw,40px) 0 0;padding:clamp(26px,2.6vw,32px) 0 0;text-align:left;
  border-top:1px solid rgba(255,255,255,.24);
}
.ans__qa li{background:#fff;padding:22px 24px 24px}
.ans__t{
  display:flex;align-items:flex-start;gap:11px;
  font-size:calc(17.5px * var(--fsc));font-weight:700;line-height:1.5;letter-spacing:.03em;color:var(--navy);
  padding-bottom:13px;border-bottom:1px solid rgba(15,41,101,.18);
}
.ans__ti{
  flex:none;width:24px;height:24px;margin-top:.08em;padding:4.5px;border-radius:50%;
  background:var(--accent);fill:#fff;
}
.ans__a{
  margin-top:13px;padding-left:35px;
  font-size:calc(13.5px * var(--fsc));line-height:1.9;color:#43537a;
}
.ans__a b{color:var(--navy);font-weight:700;box-shadow:inset 0 -.16em 0 rgba(26,102,229,.28)}

/* ---------- ココヘルパのシステム（呼出のあとの流れ） ---------- */
.st4{
  list-style:none;margin:0 0 72px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
}
.st4__i{position:relative;text-align:center}
.st4__i:not(:last-child)::after{
  content:"";position:absolute;top:96px;right:-25px;width:0;height:0;
  border-left:12px solid var(--blue);border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.st4__no{
  font-family:"DM Sans",sans-serif;font-size:calc(12px * var(--fsc));font-weight:700;letter-spacing:.18em;
  color:var(--blue);margin-bottom:14px;
}
.st4__f{
  height:150px;display:grid;place-items:center;background:var(--sky2);
  border:1px solid var(--line);margin-bottom:20px;overflow:hidden;
}
.st4__f img{max-height:126px;width:auto;object-fit:contain}
.st4__f--ph{padding:0}
.st4__f--ph img{width:100%;height:150px;max-height:none;object-fit:cover;object-position:center 28%}
.st4__i h3{font-size:calc(16.5px * var(--fsc));color:var(--navy);line-height:1.6;margin-bottom:10px}
.st4__i p{font-size:calc(13px * var(--fsc));line-height:1.9;color:var(--gray)}
.st4__i p b{color:var(--accent);font-weight:700}

/* 図版ブロック（ONE SYSTEM の流れ図・システム図） */
/* ONE SYSTEM セクション下部コピー */
/* ONE SYSTEM 下部：図の続きとして水色の帯に乗せる */
.osys__msg{
  max-width:var(--wrap);margin:clamp(22px,2.6vw,34px) auto;
  padding:10px;
  background:#e9f4fd;border-radius:var(--r-panel);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,22px);
}
/* 「チーム全体で動ける」から移したイラスト。文字の右に添える */
.osys__msg-im{flex:none;width:clamp(74px,10.4vw,134px);height:auto}
/* SPは幅が足りず「動け／る。」と1文字だけ行が割れるので、「だから、」を出さない */
@media (max-width:900px){.osys__msg-l{display:none}}
/* 520px未満は文字の横にイラストを置くと「動け／る。」と行が割れるので、下に回す。
   境目はSafariで500px、Chromeで490px。余裕をみて519pxで切り替える */
@media (max-width:519px){
  .osys__msg{flex-direction:column;gap:4px;padding:12px 10px}
  .osys__msg-im{width:clamp(82px,23vw,106px)}
}
.osys__msg b{
  display:block;
  font-size:calc(clamp(17px,5.8vw,33px) * var(--fsc));font-weight:700;line-height:1.45;
  letter-spacing:.02em;color:var(--navy);
}

.figsec{margin:0 0 68px}
.figdesc{
  max-width:740px;margin:0 auto clamp(16px,2.1vw,22px);text-align:center;
  font-size:calc(14px * var(--fsc));line-height:2;letter-spacing:.02em;color:var(--gray);
}
.figdesc::before{content:"";display:block;width:24px;height:2px;background:var(--blue-l);margin:0 auto 18px}
.figdesc em{font-style:normal;font-weight:700;color:var(--navy)}
.figsec img{display:block;width:100%;max-width:1024px;height:auto;margin-inline:auto}
.fighd{margin:0 0 clamp(22px,3vw,32px);text-align:center}
.fighd__k{font-size:calc(10.5px * var(--fsc));font-weight:700;letter-spacing:.24em;color:var(--blue);margin-bottom:12px}
.fighd h3{font-size:calc(clamp(19px,2.2vw,26px) * var(--fsc));color:var(--navy);line-height:1.65;letter-spacing:.02em}
.fighd h3 em{font-style:normal;box-shadow:inset 0 -.18em 0 rgba(122,177,235,.5)}
.fighd > p{max-width:760px;margin:16px auto 0;font-size:calc(14.5px * var(--fsc));line-height:2;color:var(--gray)}
@media (max-width:900px){
  .figsec{margin-bottom:52px}
  .figsec img{max-width:560px}
  .figdesc{font-size:calc(13px * var(--fsc));line-height:1.95;text-align:left}
  .figdesc br{display:none}
  .fighd h3 br{display:none}
  .fighd > p{font-size:calc(13.5px * var(--fsc));line-height:1.95;text-align:left}
}

/* ONE SYSTEM：呼出から対応までの流れ（4ステップの循環図） */
/* PCは1162×470の座標系。数値は図の幅=100cqw基準（1cqw = 11.62px） */
.ofl{margin:0 auto clamp(10px,2.4vw,30px);max-width:var(--wrap)}
.ofl__i{background:#fff;border-radius:1.562cqw;box-shadow:0 2px 16px rgba(23,63,122,0.25)}
.ofl__t{
  display:flex;align-items:center;
  font-weight:700;line-height:1.45;letter-spacing:.01em;color:#0c1759;
}
.ofl__no{
  flex:none;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#4fb2fd,#0a5fe8 76%);
  font-family:"DM Sans",sans-serif;font-weight:700;line-height:1;color:#fff;
}
/* 丸の中身は数字ではなくアイコン。数字だと01→04の工程順に見えてしまうため */
.ofl__no svg{width:62%;height:62%;fill:currentColor}
/* flex:none がないと、本文が長いカードでは横棒が押し潰されて消える */
.ofl__bar{display:block;flex:none;border-radius:999px;background:linear-gradient(90deg,#3fb3dd,#a9dcec)}
.ofl__d{color:#4b515e;line-height:1.72}
.ofl__m{margin:0}
.ofl__m img{display:block;width:100%;height:auto}
.ofl__wifi{display:block;color:#3d9ff0}
.ofl__wifi svg{display:block;width:100%;height:auto}
.ofl__hk{font-weight:700;letter-spacing:.01em;color:#1a5fd0}
/* 以前は文字で組んでいたが、支給のロゴ（AIから書き出したSVG）に差し替えた。
   余白なしで文字がぴったり入っているので、幅＝文字の幅になる */
.ofl__hn img{display:block;width:100%;height:auto}
.ofl__hm{margin:0}
.ofl__hm img{display:block;width:100%;height:auto}

@media (min-width:901px){
  .ofl{
    /* 図の内側余白を外へ逃がし、カードの端を他セクションと同じ幅に揃える */
    --ofl-w:min(calc(100% * 1024 / 987),calc(100vw - 30px));
    width:var(--ofl-w);max-width:none;margin-inline:calc((100% - var(--ofl-w)) / 2);
    position:relative;container-type:inline-size;aspect-ratio:1162 / 567;
    background:#fff;border-radius:var(--r-panel);
  }
  .ofl__bg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .ofl__ring{fill:none;stroke:url(#oflR);stroke-width:2.4;stroke-dasharray:7 7;stroke-linecap:round}
  .ofl__ah{fill:#3f9be8}

  /* 中央ハブ：輪郭のある白い円 */
  .ofl__hub{
    position:absolute;left:36.231cqw;top:5cqw;width:27.539cqw;height:27.539cqw;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:50%;background:#fff;
    box-shadow:0 0 0 1px #d7ecfb,0 0 0 .947cqw #eaf5fd,0 1.205cqw 2.926cqw rgba(18,58,120,.16);
  }
  .ofl__hk{margin:0;font-size:calc(clamp(12px,1.377cqw,16px) * var(--fsc))}
  .ofl__hn{width:72%;margin:.688cqw 0 0}
  .ofl__hm{width:31.924cqw;margin:1.119cqw 0 0}
  .ofl__hm img{filter:drop-shadow(0 .516cqw .861cqw rgba(15,41,101,.18))}

  /* カード：テキストは縦積み、製品画像は右に絶対配置。
     画像をグリッドの行にまたがらせると行間が引き伸ばされるため、レイアウトから外している */
  /* 高さは本文が4行のカードに合わせる。中央寄せにすると本文の行数ぶん
     見出しの位置が4枚でずれるので、上そろえにする */
  .ofl__i{
    position:absolute;z-index:3;width:32.251cqw;height:13.9cqw;
    display:flex;flex-direction:column;justify-content:flex-start;
    /* 右の余白は画像の置き場所 */
    padding:1.377cqw 12.737cqw 1.377cqw 1.549cqw;
    border:1px solid #e3eefa;border-radius:1.205cqw;
    box-shadow:0 .516cqw 1.72cqw rgba(23,63,122,.13);
  }
  .ofl__i--a{left:2cqw;top:0}
  .ofl__i--b{left:66cqw;top:0}
  /* 3枚目はハブの円の真下、左右の中央に置く。top はハブの円の下端（34cqw）より下 */
  .ofl__i--d{left:33.875cqw;top:34.853cqw;padding-right:12.6cqw}
  .ofl__t{font-size:calc(clamp(13px,1.463cqw,17px) * var(--fsc));line-height:1.35;white-space:nowrap}
  .ofl__no{width:2.410cqw;height:2.410cqw;margin-right:.775cqw;font-size:calc(clamp(12px,1.291cqw,15px) * var(--fsc))}
  /* 本文・罫線の左端は見出し文字の左端に合わせる（番号丸＋右マージン分） */
  .ofl__bar{width:2.926cqw;height:.258cqw;margin:.516cqw 0 0 3.184cqw}
  /* 下限を付けると、画面が狭いときに図だけ縮んで文字が縮まず、4行が5行になって
     カードから溢れる。カードの高さは 1.076cqw ちょうどで4行ぶんに合わせてある */
  .ofl__d{margin:.516cqw 0 0 3.184cqw;font-size:calc(min(1.076cqw,12.5px) * var(--fsc))}
  .ofl__m{
    position:absolute;right:1.549cqw;top:50%;translate:0 -50%;
    width:10.155cqw;display:flex;align-items:flex-end;justify-content:center;gap:.43cqw;
  }
  .ofl__m > *{flex:none;width:auto}
  .ofl__m img{width:auto;max-width:none}
  .ofl__i--a .ofl__m1{height:5.164cqw}
  .ofl__i--a .ofl__wifi{width:1.205cqw;margin-bottom:2.8cqw}
  .ofl__i--a .ofl__m2{height:8.778cqw}
  .ofl__i--b .ofl__m1{height:4.303cqw}
  .ofl__i--b .ofl__m2{height:8.606cqw}
  .ofl__i--d .ofl__m{right:2.8cqw;width:9.8cqw}
  .ofl__i--d .ofl__m1{height:8cqw}
}

/* 〜900px：上から順に読ませる（循環の矢印は使わない） */
@media (max-width:900px){
  .ofl{display:grid;gap:clamp(12px,1.4vw,18px);max-width:560px}
  .ofl__bg{display:none}
  /* SPは01〜04を読ませてから、まとめとしてココヘルパを置く。
     見た目はPCと同じ「白い円＋淡いリング」。円の直径は段の78%で、
     製品画像はPC同様そこから左右にはみ出させる（.ofl__hm の116%） */
  .ofl__hub{
    /* リングが04のカードに寄るので、段の gap に加えて上に余白を足して下げる */
    position:relative;width:78%;aspect-ratio:1;margin:clamp(18px,6vw,30px) auto;padding:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;border-radius:50%;background:#fff;
    box-shadow:0 0 0 1px #d7ecfb,
               0 0 0 clamp(7px,2.4vw,12px) #eaf5fd,
               0 clamp(9px,2.6vw,14px) clamp(22px,6.4vw,34px) rgba(18,58,120,.16);
  }
  .ofl__hk{font-size:calc(clamp(12px,3.4vw,15px) * var(--fsc))}
  .ofl__hn{width:72%;margin-top:6px}
  .ofl__hm{width:116%;margin-top:clamp(8px,2.4vw,14px)}
  .ofl__i{
    display:grid;grid-template-columns:1fr clamp(104px,27vw,144px);
    column-gap:clamp(10px,2.5vw,18px);align-items:center;
    padding:clamp(14px,3.4vw,20px) clamp(14px,3.6vw,22px);
  }
  .ofl__t{grid-column:1;font-size:calc(clamp(15.5px,4.2vw,19px) * var(--fsc))}
  .ofl__no{width:clamp(28px,7.4vw,34px);height:clamp(28px,7.4vw,34px);margin-right:9px;font-size:calc(clamp(15px,4vw,18px) * var(--fsc))}
  .ofl__bar{grid-column:1;width:40px;height:3px;margin:clamp(7px,1.8vw,10px) 0 0 clamp(37px,9vw,43px)}
  .ofl__d{grid-column:1;margin-top:clamp(7px,1.8vw,10px);font-size:calc(clamp(12.5px,3.4vw,14.5px) * var(--fsc))}
  .ofl__m{grid-area:1/2/4/3;display:flex;align-items:flex-end;justify-content:center;gap:4%}
  .ofl__m > *{flex:none}
  .ofl__i--a .ofl__m1{width:26%}
  .ofl__i--a .ofl__wifi{width:11%;margin-bottom:22%}
  .ofl__i--a .ofl__m2{width:38%}
  .ofl__i--b .ofl__m1{width:56%}
  .ofl__i--b .ofl__m2{width:30%}
  .ofl__i--d .ofl__m1{width:100%}
}

/* 見せ場：手元に情報が集まる */
.pick{
  display:grid;grid-template-columns:1fr 400px;gap:clamp(30px,4vw,64px);align-items:center;
  background:var(--sky2);border:1px solid var(--line);padding:clamp(32px,4vw,56px);margin-bottom:68px;
}
.pick__k{font-size:calc(10.5px * var(--fsc));font-weight:700;letter-spacing:.24em;color:var(--blue);margin-bottom:16px}
.pick__bd h3{font-size:calc(clamp(20px,2.3vw,27px) * var(--fsc));color:var(--navy);line-height:1.6;letter-spacing:.02em}
.pick__bd h3 em{font-style:normal;box-shadow:inset 0 -.18em 0 rgba(122,177,235,.5)}
.pick__bd > p{margin-top:20px;font-size:calc(14.5px * var(--fsc));line-height:2.05;color:var(--gray)}
.pick__bd > p b{color:var(--navy);font-weight:700}
.pick__l{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid #d6e7f1}
.pick__l li{
  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid #d6e7f1;font-size:calc(13.5px * var(--fsc));line-height:1.85;color:var(--gray);
}
.pick__l b{font-size:calc(14px * var(--fsc));color:var(--navy)}
.pick__ph{display:grid;place-items:center}

/* スマートフォンの表示例 */
.ph{
  width:270px;background:#0b1533;border-radius:30px;padding:12px;
  box-shadow:0 24px 50px rgba(15,41,101,.22);
}
.ph__scr{background:#f4fafd;border-radius:20px;overflow:hidden;padding-bottom:12px}
.ph__bar{
  background:var(--navy);color:#fff;font-size:calc(12.5px * var(--fsc));font-weight:700;letter-spacing:.04em;
  padding:16px 16px 14px;display:flex;justify-content:space-between;align-items:baseline;
}
.ph__bar span{font-size:calc(10px * var(--fsc));font-weight:400;color:rgba(255,255,255,.7)}
.ph__l{list-style:none;margin:0;padding:10px;display:grid;gap:8px}
.ph__l li{
  background:#fff;border:1px solid #dcebf4;border-left:3px solid #c2d6e5;
  padding:11px 12px;display:grid;grid-template-columns:26px 1fr auto;
  grid-template-areas:"ic name time" "ic sub time";column-gap:9px;align-items:center;
}
.ph__ic{grid-area:ic;width:24px;height:24px;border-radius:50%;background:#eef7fc;display:grid;place-items:center}
.ph__ic svg{width:14px;height:14px;fill:#7d8db0}
.ph__l b{grid-area:name;font-size:calc(13px * var(--fsc));color:var(--navy);line-height:1.5}
.ph__l i{grid-area:sub;font-style:normal;font-size:calc(10.5px * var(--fsc));color:var(--gray-l);line-height:1.6}
.ph__l u{grid-area:time;text-decoration:none;font-size:calc(9.5px * var(--fsc));color:#a2b3c5}
.ph__l .is-new{border-left-color:var(--accent);box-shadow:0 4px 14px rgba(11,50,173,.12)}
.ph__l .is-new .ph__ic{background:var(--accent)}
.ph__l .is-new .ph__ic svg{fill:#fff}
.ph__l .is-new u{color:var(--accent);font-weight:700}
.ph__l .is-doing{border-left-color:#4d9b6a;background:#f5fbf7}
.ph__l .is-doing i{color:#2f7a4d;font-weight:700}
.ph__note{margin:2px 12px 0;font-size:calc(9.5px * var(--fsc));color:#a2b3c5;text-align:right}

/* インカム（オプション）：カンプ1024×768をそのまま再現 */
.opt__k{
  display:block;width:fit-content;margin:100px auto 0;
  font-size:calc(10.5px * var(--fsc));font-weight:700;letter-spacing:.24em;
  color:#fff;background:var(--blue);border-radius:var(--r-pill);padding:6px 16px;
}
.opt{position:relative;margin:0 auto;max-width:var(--wrap)}
.opt__bub{position:relative}
.opt__t{color:var(--navy);letter-spacing:.01em;line-height:1.35;text-align:center}
.opt__t em{
  font-style:normal;color:var(--blue);
  background:linear-gradient(90deg,#9fd3f4,#cfe9fa) no-repeat 0 100%/100% .16em;
}
.opt__lead{color:var(--gray);text-align:center}
.opt__c{position:relative;background:linear-gradient(155deg,#fff 42%,#e9f5fd);border:1px solid #dcecf9}
.opt__ic{position:absolute;display:block;object-fit:contain}
.opt__ct{position:relative;z-index:1;margin:0;color:var(--navy);font-weight:700;letter-spacing:.01em}
.opt__cd{position:relative;z-index:1;color:#4b515e}
.opt__cz{position:relative;z-index:1;color:#6b7686}
.opt__ci{display:block;height:auto}
.opt__bub{
  margin:0;background:#fff;border:1.6px solid #7fc2f2;
  box-shadow:0 2px 10px rgba(23,63,122,.07);
}
.opt__bi{display:grid;place-items:center}
.opt__bs{display:block;color:#2f8ce6}
.opt__bub{overflow:visible}
.opt__bs svg{width:100%;height:100%}
.opt__bi svg{width:100%;height:100%;fill:var(--blue)}
.opt__bub b{display:block;color:var(--blue);font-weight:700;letter-spacing:.01em;white-space:nowrap}
.opt__bub i{display:block;font-style:normal;color:var(--navy);font-weight:700;letter-spacing:.01em;white-space:nowrap}
.opt__hm{margin:0}
.opt__hm img{display:block;width:100%;height:auto}
.opt__hp{
  color:#fff;font-weight:700;text-align:center;letter-spacing:.02em;
  background:linear-gradient(100deg,#2a7ff0,#0b5ae0);border-radius:var(--r-pill);
}
.opt__hn{color:var(--navy);font-weight:700;letter-spacing:.04em;text-align:center}
.opt__hn i{
  font-style:normal;font-weight:700;letter-spacing:.1em;color:#fff;
  background:#e2453c;border-radius:var(--r-pill);
  /* ベースライン揃えだとGBTU-03より下にずれるため、文字の中心に合わせて持ち上げる */
  vertical-align:.155em;
}
.opt__pu{position:relative;overflow:hidden;background:linear-gradient(120deg,#eef7fd,#e2f1fc)}
.opt__pu-i{display:block;height:auto}
.opt__pu-t{color:var(--navy);font-weight:700;letter-spacing:.01em}
.opt__pu-t em{font-style:normal;color:var(--blue)}
.opt__pu-d{color:#4b515e}
.opt__note{max-width:var(--wrap);font-size:calc(13.5px * var(--fsc));line-height:1.9;color:var(--gray-l)}

@media (min-width:901px){
.opt{
    --opt-w:min(calc(100% * 1024 / 980),calc(100vw - 30px));
    width:var(--opt-w);max-width:none;margin-inline:calc((100% - var(--opt-w)) / 2);
    position:relative;container-type:inline-size;
    /* 以下の数値はすべて cqw（＝枠幅の1%）。枠の高さは 66.6cqw＝682 / 10.24 */
    aspect-ratio:1024 / 682;
  }
  /* 見出しはPCでは1行に収める（改行はSPのみ） */
  .opt__t br{display:none}
  /* インカムを囲むやわらかい円。中心は矢印の先端の中点（32.39cqw）に合わせている */
  .opt::before{
    content:"";position:absolute;left:37.891cqw;top:19.890cqw;width:25.000cqw;height:25.000cqw;border-radius:50%;
    background:radial-gradient(circle,#fff 46%,#f0f8fe 70%,#d8effd 93%,#edf7fe 100%);
  }
  /* 矢印SVG（viewBox 1024×768）は preserveAspectRatio="none" で枠に引き伸ばしている。
     根元がカードの右端・先端が中央の円に重なるよう top と height を逆算した値。
     カードの位置や高さを変えるときは、この2つも計算し直すこと。 */
  .opt__ar{position:absolute;left:10cqw;top:-0.671cqw;width:80cqw;height:67.172cqw;z-index:2;pointer-events:none}
  /* SVGの透明部分はクリックを素通りさせ、矢印の形の上だけ選択できるようにする */
  .opt__ar path{pointer-events:auto}
  .opt__t,.opt__lead,.opt__c,.opt__bub,.opt__hm,.opt__hp,.opt__hn,.opt__pu{position:absolute}
  .opt__t{left:0;top:2.031cqw;width:100%;font-size:calc(2.969cqw * var(--fsc));line-height:1.3}
  .opt__lead{left:0;top:7.600cqw;width:100%;font-size:calc(15px * var(--fsc));line-height:1.45}
  .opt__c{border-radius:1.406cqw;z-index:1}
  .opt__c--b::after,.opt__c--c::after,.opt__c--d::after,.opt__pu::after{
    content:"";position:absolute;border-radius:50%;z-index:0;
    background:radial-gradient(circle,#e2f1fd 58%,rgba(226,241,253,0) 74%);
  }
  .opt__c--b::after{left:21.832cqw;top:1.728cqw;width:10.063cqw;height:10.063cqw}
  .opt__c--c::after{left:22.066cqw;top:4.290cqw;width:8.773cqw;height:8.773cqw}
  .opt__c--d::after{left:22.373cqw;top:4.258cqw;width:9.057cqw;height:9.057cqw}
  .opt__pu::after{left:4.200cqw;top:0.045cqw;width:10.411cqw;height:10.411cqw}
  /* カードは高さを広げ、上下段の間も3cqw（約35px）あける */
  .opt__c--a{left:2.246cqw;top:14.300cqw;width:33.398cqw;height:15.200cqw}
  .opt__c--b{left:64.496cqw;top:14.300cqw;width:33.398cqw;height:15.200cqw}
  .opt__c--c{left:2.246cqw;top:32.500cqw;width:33.398cqw;height:14.700cqw}
  .opt__c--d{left:64.496cqw;top:32.500cqw;width:33.398cqw;height:14.700cqw}
  .opt__ic{left:1.094cqw;top:1.600cqw;width:5.391cqw;height:5.391cqw}
  .opt__ct{padding:2.150cqw 0 0 7.656cqw;font-size:calc(1.875cqw * var(--fsc));line-height:1.28}
  /* 本文の折り返しはカードごとの幅で決める。
     幅＝そのカードの挿絵（.opt__ci）の左端 − 余白。挿絵を動かしたらここも直すこと。
     auto-phrase は対応ブラウザで語の途中改行を避ける。非対応でも幅の中には収まる */
  .opt__cd{margin:1.094cqw 0 0;padding-left:7.656cqw;font-size:calc(1.211cqw * var(--fsc));line-height:1.55;word-break:auto-phrase}
  .opt__c--a .opt__cd{width:20cqw}
  .opt__c--b .opt__cd{width:21.65cqw}
  .opt__c--c .opt__cd{width:21.1cqw}
  .opt__c--d .opt__cd{width:21.8cqw}
  /* 注記は .opt__cd の中にあるので、PCでは改行して説明文の下に置く。
     左端はそろうので padding-left は不要 */
  .opt__cz{display:block;margin:0.703cqw 0 0;font-size:calc(1.016cqw * var(--fsc))}
  .opt__ci{position:absolute}
  /* イラストは右端の余白を2.2cqwでそろえ、上下は中央。左端は本文の右端から
     15px以上あける（03は見出しが長いので、見出しの下に逃がしている） */
  .opt__c--a .opt__ci{left:21.216cqw;top:2.482cqw;width:7.985cqw;z-index:1}
  .opt__c--b .opt__ci{left:22.864cqw;top:2.158cqw;width:7.3cqw;z-index:1}
  .opt__c--c .opt__ci{left:22.301cqw;top:4.900cqw;width:8.900cqw;z-index:1}
  .opt__c--d .opt__ci{left:23.036cqw;top:2.848cqw;width:8.165cqw;z-index:1}
  /* 吹き出しは01のカードの中にあるので、座標はカードの左上が基準。
     図全体での位置は、カードの left 2.246cqw / top 14.300cqw を足した値になる。
     しっぽは ::before が枠線色、::after が白で、ずらして枠線を隠している */
  .opt__bub{
    /* カードの1pxの枠線ぶんだけ内側にずれるので引いておく */
    left:calc(28.172cqw - 1px);top:calc(0.640cqw - 1px);width:max-content;height:auto;
    display:flex;align-items:center;
    border-radius:var(--r-pill);padding:0.726cqw 1.556cqw;z-index:4;
  }
  /* しっぽは左下に傾けて、左下にいる看護師のインカムを指す。
     border-width に「上」と「右」だけを持たせると、頂点が左下にくる三角になる */
  .opt__bub::before,.opt__bub::after{
    content:"";position:absolute;left:0.9cqw;width:0;height:0;border-style:solid;
    border-width:0.78cqw 1.3cqw 0 0;
    border-color:#7fc2f2 transparent transparent transparent;
  }
  .opt__bub::before{top:100%}
  .opt__bub::after{top:calc(100% - 2.4px);left:11px; border-top-color:#fff}
  .opt__bi{position:static;flex:none;width:2.274cqw;height:1.862cqw}
  .opt__bs{position:absolute;left:10.938cqw;top:-1.016cqw;width:2.812cqw;height:2.578cqw}
  .opt__bub b{font-size:calc(1.5cqw * var(--fsc));line-height:1.2}
  .opt__bub i{margin-top:0.391cqw;font-size:calc(1.133cqw * var(--fsc));line-height:1.2}
  /* 中央 */
  .opt__hm{left:41.953cqw;top:25.053cqw;width:16.875cqw;z-index:3}
  .opt__hp{left:42.383cqw;top:39.725cqw;width:15.625cqw;padding:0.391cqw 0;font-size:calc(1.641cqw * var(--fsc));line-height:1.35;z-index:3}
  .opt__hn{left:41.289cqw;top:42.929cqw;width:17.812cqw;font-size:calc(1.641cqw * var(--fsc));line-height:1.2;z-index:3}
  .opt__hn i{margin-left:0.938cqw;padding:0.234cqw 0.781cqw;font-size:calc(1.094cqw * var(--fsc))}
  /* 下帯 */
  .opt__pu{
    left:2.148cqw;top:50.000cqw;width:95.703cqw;height:13.400cqw;
    border-radius:1.406cqw;overflow:hidden;
  }
  .opt__pu-i{position:absolute;left:5.4cqw;top:0.669cqw;width:12.300cqw;z-index:1}
  /* 左22.531＋幅75.078＝97.6cqw で、枠（95.7cqw）から約22pxはみ出していた。
     これまでは文章が短く空白が切れていただけだったが、文字数が増えて文末が欠けるため幅を詰める */
  .opt__pu-bd{position:absolute;left:22.531cqw;top:3.883cqw;width:72.5cqw;border-left:0.234cqw solid #2b62c6;padding-left:1.719cqw;z-index:1}
  .opt__pu-t{font-size:calc(2.08cqw * var(--fsc));line-height:1.3}
  .opt__pu-d{margin:0.781cqw 0 0;font-size:calc(1.469cqw * var(--fsc));line-height:1.45}
}

@media (max-width:900px){
  /* PCの100pxのままだとONE SYSTEMとの間が空きすぎるので、画面幅に応じて詰める */
  .opt__k{margin-top:clamp(56px,18vw,100px)}
  .opt__ar{display:none}
  /* 注記はSPでは一段小さく（カード内の「※カスタマイズ」と同じ水準） */
  .opt__note{font-size:calc(10.5px * var(--fsc));margin-top:13px; line-height:1.8}
  .opt__t{font-size:calc(clamp(25px,3.4vw,28px) * var(--fsc)); margin-top:15px;}
  /* 1行目だけ小さくして「ナースコールの情報も、通話も。」を1行に収める。
     --fsc を掛けると22pxにならないので、ここは実寸で指定 */
  .opt__t-l{font-size:22px}
  .opt__lead{margin-top:clamp(12px,1.8vw,18px);font-size:calc(clamp(15px,1.7vw,15px) * var(--fsc));line-height:1.9}
  .opt__lead br{display:none}
  /* カードを小さくまとめたので、主役写真も大きすぎないサイズに合わせる */
  .opt__hub{margin:clamp(18px,3.2vw,26px) auto 0;max-width:300px}
  .opt__hm{margin:0 auto;max-width:200px}
  .opt__hp{margin:clamp(6px,1.4vw,10px) auto 0;width:fit-content;padding:5px 22px;font-size:calc(clamp(14px,2vw,16px) * var(--fsc))}
  .opt__hn{margin:8px 0 0;font-size:calc(clamp(15px,2.1vw,17px) * var(--fsc))}
  .opt__hn i{margin-left:8px;padding:3px 8px;font-size:calc(10px * var(--fsc))}
  /* 4枚のカードは「アイコン｜本文｜イラスト」の3列で高さと位置を揃える */
  .opt__c{
    display:grid;grid-template-columns:38px minmax(0,1fr) 76px;
    grid-template-areas:"i t m" "i d m";
    column-gap:11px;align-items:center;align-content:center;
    margin-top:10px;padding:14px 13px;border-radius:var(--r-part);
  }
  .opt__ic{position:static;grid-area:i;align-self:start;margin-top:1px;width:38px;height:38px}
  .opt__ct{grid-area:t;font-size:calc(clamp(16px,2.1vw,17px) * var(--fsc));line-height:1.4}
  .opt__ct br{display:none}
  .opt__cd{grid-area:d;margin:5px 0 0;font-size:calc(clamp(12.5px,1.7vw,13.5px) * var(--fsc));line-height:1.7}
  .opt__cd br{display:none}
  /* SPは説明文の横（末尾の続き）に流す */
  .opt__cz{display:inline;margin-left:.5em;font-size:calc(11px * var(--fsc))}
  /* イラストは大きさがまちまちなので、同じ枠に下揃えで収める。
     top は見た目だけを下げる微調整用（レイアウトやカードの高さには影響しない） */
  .opt__ci{position:relative;top:6px;grid-area:m;width:76px;height:80px;object-fit:contain;object-position:50% 100%}
  /* 「203 ベッド」は01の音声例なので、01のカードの中に入れる。
     カードの上余白を58pxに広げてそこに収め、負のマージンでカードを
     引き上げて重ねている。上に7pxだけ枠からはみ出す。
     PCと同じく絶対配置にしてあるので、下の top / right の2つだけで自由に動かせる。
     カードの padding-top は、その吹き出しのぶんの場所を空けておくためのもの。
     ※359px以下にもっと後ろで .opt__c の padding を上書きする指定があるため、
       詳細度を上げて .opt .opt__c--a と書いている */
  .opt .opt__c--a{margin-top:20px;padding-top:17px}
  .opt__bub{
    position:absolute;top:-7px;right:-1px;z-index:2;
    display:grid;grid-template-columns:22px auto;align-items:center;
    width:fit-content;margin:0;padding:3px 7px;border-radius:var(--r-pill);
  }
  .opt__bub::before,.opt__bub::after{
    content:"";display:block;position:absolute;right:26px;
    width:0;height:0;border-style:solid;border-width:7px 6px 0 6px;
    border-color:#7fc2f2 transparent transparent transparent;
  }
  .opt__bub::after{bottom:-5px;border-top-color:#fff}
  .opt__bub::before{bottom:-7px}
  .opt__bs{display:none}
  .opt__bi{width:22px;height:18px}
  .opt__bub b{font-size:calc(12px * var(--fsc))}
  .opt__pu{
    display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;
    margin-top:clamp(18px,3vw,26px);padding:clamp(14px,2vw,18px);border-radius:var(--r-part);
  }
  .opt__pu-i{width:100%}
  /* 見出し1本になり文字数が倍以上になったので、SPは文字を小さくして行数を抑える */
  .opt__pu-t{font-size:calc(clamp(10.5px,3.1vw,12.5px) * var(--fsc));line-height:1.6}
  .opt__pu-d{margin:6px 0 0;font-size:calc(clamp(11.5px,1.6vw,13px) * var(--fsc));line-height:1.8}
}
@media (max-width:560px){
  .opt__pu{grid-template-columns:76px 1fr;gap:12px}
}
@media (max-width:359px){
  .opt__c{grid-template-columns:34px minmax(0,1fr) 64px;column-gap:9px;padding:12px 11px}
  .opt__ic{width:34px;height:34px}
  .opt__ci{width:64px;height:68px}
}

/* 機器一覧 */
.devs__t{font-size:calc(clamp(18px,2vw,22px) * var(--fsc));color:var(--navy);text-align:center;line-height:1.6}
.devs__lead{margin:14px auto 34px;max-width:44em;font-size:calc(13.5px * var(--fsc));line-height:1.95;color:var(--gray);text-align:center}
.devs__l{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
}
.devs__l li{background:#fff;padding:22px 18px 24px;text-align:center}
.devs__l figure{height:104px;display:grid;place-items:center;margin:0 0 16px}
.devs__l img{max-height:100px;width:auto;max-width:100%;object-fit:contain}
.devs__l b{display:block;font-size:calc(14.5px * var(--fsc));color:var(--navy);margin-bottom:9px}
.devs__l span{display:block;font-size:calc(12px * var(--fsc));line-height:1.85;color:var(--gray)}
.devs__note{margin-top:18px;font-size:calc(11.5px * var(--fsc));color:var(--gray-l);text-align:center}

/* ---------- 導入事例（HOSPITAL CASE） ---------- */
.case{background:var(--sky)}
/* 事例内のパネルはすき間なく積む。あいだを空けると、ひとつの事例ではなく
   別々のセクションの区切りのように見えてしまうため。
   -1px は、上下の枠線が重なって2px に見えるのを防ぐぶん */
.hc__hd{
  display:grid;grid-template-columns:300px 1fr;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:-1px;
}
.hc__ph{margin:0;overflow:hidden;min-height:200px}
.hc__ph img{width:100%;height:100%;object-fit:cover}
.hc__meta{padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
.hc__name{font-size:calc(clamp(17px,2vw,21px) * var(--fsc));font-weight:700;color:var(--navy);letter-spacing:.02em}
/* 文節の区切り（<wbr>）だけで折り返す。auto-phraseと違いSafariでも同じ結果になる */
.hc__d{margin-top:14px;font-size:calc(13.5px * var(--fsc));line-height:1.95;color:var(--gray);
  word-break:keep-all;overflow-wrap:break-word}
.hc__tag{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;list-style:none;padding:0}
.hc__tag li{font-size:calc(11.5px * var(--fsc));font-weight:700;color:var(--blue);border:1px solid #c9e5f7;background:var(--sky2);padding:4px 11px}

.hc__chs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:0}
.hc__ch{background:#fff;padding:32px 34px 34px}
.hc__no{
  font-size:calc(11.5px * var(--fsc));font-weight:700;letter-spacing:.14em;color:var(--blue);
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.hc__ch h3{font-size:calc(17.5px * var(--fsc));color:var(--navy);line-height:1.62;margin-bottom:14px}
.hc__ch p{font-size:calc(13.5px * var(--fsc));line-height:2.05;color:var(--gray)}

.hc__big{
  display:grid;grid-template-columns:1fr 380px;
  background:var(--navy);background-image:linear-gradient(135deg,#0f2965 0%,#12379f 100%);
  color:#fff;margin-bottom:0;
}
.hc__big-bd{padding:clamp(32px,3.6vw,50px)}
.hc__no--w{color:#9fc9ee;border-bottom-color:rgba(255,255,255,.22)}
.hc__big h3{font-size:calc(clamp(20px,2.5vw,29px) * var(--fsc));line-height:1.58;letter-spacing:.02em;margin-bottom:20px}
.hc__big p{font-size:calc(14.5px * var(--fsc));line-height:2.05;color:rgba(255,255,255,.86)}
.hc__q{margin:28px 0;padding:26px 30px;background:rgba(255,255,255,.08);border-left:3px solid #7dbfff}
.hc__q p{
  font-size:calc(clamp(17px,2.1vw,24px) * var(--fsc));font-weight:700;line-height:1.7;color:#fff;letter-spacing:.02em;
}
.hc__q p::before{content:"「"}
.hc__q p::after{content:"」"}
.hc__big-ph{margin:0;position:relative;overflow:hidden;min-height:260px}
.hc__big-ph img{width:100%;height:100%;object-fit:cover}
.hc__big-ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 20px 14px;
  font-size:calc(11.5px * var(--fsc));color:#fff;background:linear-gradient(180deg,rgba(10,28,74,0),rgba(10,28,74,.8));
}

/* 厚労省の事例集カード（.mhlw）と同じ体裁：白カード＋紺の上罫＋左寄せ見出し＋淡色の中箱 */
.hc__voice{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);padding:17px}
.hc__voice-t{
  margin:0 0 14px;padding:0;border:0;text-align:left;letter-spacing:0;
  font-size:calc(20px * var(--fsc));font-weight:700;line-height:1.6;color:var(--navy);
  border-bottom:1px solid #cfe4f3;
}
.hc__voice ul{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hc__voice li{background:#f4fbff;border:1px solid var(--line);padding:18px 20px}
.hc__voice figure{margin:0 0 14px}
.hc__voice figure img{width:100%;height:230px;object-fit:cover}
.hc__voice figure img.is-top{object-position:50% 26%}
.hc__voice li > p{font-size:calc(14.5px * var(--fsc));font-weight:700;line-height:1.95;color:var(--navy)}
.hc__voice li > span{display:block;margin-top:12px;font-size:calc(12.5px * var(--fsc));line-height:1.9;color:var(--gray-l)}
/* 話者クレジットと注記は1枠にまとめる（左＝誰の声か／右＝その前提） */
.hc__cred{display:grid;gap:10px;margin-top:18px}
/* ラベルと氏名は同じ高さのセルにそろえる。stretch にしておくと、
   狭い画面で氏名が2行になってもラベル側が同じ高さまで伸びる */
.hc__by{display:flex;align-items:stretch;gap:12px;margin:0}
.hc__by-l{
  flex:none;display:flex;align-items:center;
  padding:5px 12px;border-radius:var(--r-pill);background:var(--sky);
  font-size:calc(11.5px * var(--fsc));font-weight:700;line-height:1.4;letter-spacing:.02em;color:var(--navy);
}
.hc__by-n{
  display:flex;align-items:center;padding:5px 0;
  font-size:calc(15px * var(--fsc));font-weight:700;line-height:1.4;color:var(--navy);
}
/* 狭い画面では法人名と病院名の間（全角スペース）で折り返す */
.hc__by-n small{display:block;margin-bottom:3px;font-size:calc(11.5px * var(--fsc));font-weight:500;letter-spacing:.01em;color:var(--gray-l);word-break:keep-all}
/* ※のぶら下げ */
.hc__note{margin:0;padding-left:1.3em;text-indent:-1.3em;font-size:calc(11.5px * var(--fsc));line-height:1.8;color:var(--gray-l)}

/* 厚生労働省 事例集での紹介 */
/* 上の「現場での使用感」と地続きに見せる。-1px は、重なる枠線を1本に見せるため */
.mhlw{margin-top:-1px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);padding:34px 36px 30px}
.mhlw__t{font-size:calc(20px * var(--fsc));line-height:1.6;color:var(--navy);margin:0 0 14px}
/* 「厚生労働省の事例集」だけマーカーで拾わせる */
.mhlw__hl{font-style:normal;background:linear-gradient(transparent 62%,#cee6fa 62%)}
.mhlw__d{font-size:calc(14px * var(--fsc));line-height:1.95;color:var(--gray);margin:0}
.mhlw__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 0;padding:0;list-style:none}
.mhlw__nums li{background:#f4fbff;border:1px solid var(--line);padding:18px 20px}
.mhlw__nl{display:block;font-size:calc(13px * var(--fsc));font-weight:700;line-height:1.6;color:var(--navy);margin-bottom:8px}
.mhlw__nv{display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
.mhlw__nv b{font-size:calc(26px * var(--fsc));font-weight:700;line-height:1.1;color:var(--navy);font-family:"DM Sans","Noto Sans JP",sans-serif}
.mhlw__nv em{font-style:normal;font-size:calc(13px * var(--fsc));font-weight:700;color:var(--navy)}
.mhlw__nv i{
  flex:none;width:26px;height:10px;margin:0 8px;align-self:center;background:var(--blue-l);
  clip-path:polygon(0 38%,62% 38%,62% 0,100% 50%,62% 100%,62% 62%,0 62%);
}
.mhlw__nv b:last-of-type,.mhlw__nv b:last-of-type + em{color:var(--blue)}
.mhlw__src{margin:18px 0 0;font-size:calc(12.5px * var(--fsc));line-height:1.8}
.mhlw__src a{display:inline-flex;align-items:center;gap:6px;color:var(--blue);text-decoration:underline}
.mhlw__src a svg{flex:none;width:13px;height:13px;fill:currentColor}
.mhlw__note{margin:10px 0 0;font-size:calc(11.5px * var(--fsc));line-height:1.8;color:var(--gray-l)}

/* ---------- 無線・費用（03） ---------- */

/* ---------- 製品モデル（04） ---------- */
.models{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;align-items:stretch;
  background:#c7dbe9;border:1px solid #c7dbe9;border-top:2px solid var(--navy);
}
.model{
  position:relative;background:#fff;
  overflow:hidden;display:flex;flex-direction:column;
}
.model--rec::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:2px solid var(--accent);
}
/* 選び方バッジ（LINEUP） */
/* モデル別カラー（--m:文字・枠線／--m-l:淡い枠線／--m-bg:塗り）
   --m は gcomm.co.jp の製品一覧で各モデルの見出しに使われている色に合わせている。
   --m-l・--m-bg は、その色を白に64%・94%混ぜたもの */
.model{--m:var(--accent);--m-l:var(--line);--m-bg:var(--sky2)}
.model--x {--m:#2a366b;--m-l:#b2b7ca;--m-bg:#f2f3f6}
.model--vp{--m:#8f318e;--m-l:#d7b5d6;--m-bg:#f8f3f8}
.model--g {--m:#ea6438;--m-l:#f7c7b7;--m-bg:#fef6f3}
.model--n {--m:#133d8d;--m-l:#aab9d6;--m-bg:#f1f3f8}
.model__use{
  position:relative;margin:18px 16px 28px;padding:12px 10px;
  display:grid;place-items:center;min-height:calc(14px * 1.5 * 2 + 24px);
  text-align:center;font-size:calc(14px * var(--fsc));font-weight:700;line-height:1.5;color:#fff;
  background:var(--m);border:2px solid var(--m);border-radius:10px;box-sizing:border-box;
}
/* 吹き出しの下向きしっぽ。枠線と塗りが同じ色なので2枚とも --m */
.model__use::before,.model__use::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:0;height:0;border-style:solid;
}
.model__use::before{top:100%;border-width:12px 9px 0;border-color:var(--m) transparent transparent}
.model__use::after{top:calc(100% - 3px);border-width:10px 7.5px 0;border-color:var(--m) transparent transparent}
/* 製品ページへのリンク */
.model__more{
  /* margin-top:auto で説明文の行数が違ってもボタン位置が4枚で揃う（20pxは説明文との最低間隔） */
  margin:auto 0 0;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 16px;border:1.5px solid var(--m-l);border-radius:var(--r-pill);
  font-size:calc(13px * var(--fsc));font-weight:700;line-height:1;color:var(--m);background:#fff;text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.model__more:hover{background:var(--m-bg);border-color:var(--m)}
.model__arw{flex:none;width:7px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.model figure{
  position:relative;margin:0;padding:22px 20px;aspect-ratio:4/3;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff 0%,#f4fbff 100%);border-bottom:1px solid var(--line);
}
.model figure img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.model__badge{
  position:absolute;left:0;top:0;font-size:calc(11px * var(--fsc));font-weight:500;letter-spacing:.08em;
  color:#fff;background:var(--blue-l);padding:6px 13px 6px 14px;
}
.model--rec .model__badge{background:var(--accent)}
.model__c{font-size:calc(14.5px * var(--fsc));font-weight:700;line-height:1.7;color:var(--accent);margin-bottom:10px}
@media (min-width:901px){.model__c{min-height:calc(14.5px * 1.7 * 2)}}
.model .bd{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.model h3{
  font-size:calc(18px * var(--fsc));color:var(--navy);margin-bottom:10px;display:flex;align-items:baseline;gap:3px;
}
.model h3 span{font-size:calc(25px * var(--fsc));font-weight:700;letter-spacing:.01em;line-height:1}
.model .bd > p{font-size:calc(12.8px * var(--fsc));color:var(--gray);line-height:1.88}
.model .bd > p:last-of-type{margin-bottom:20px}
.model .fit{
  margin-top:auto;padding-top:16px;font-size:calc(12.5px * var(--fsc));font-weight:700;color:var(--navy);line-height:1.7;
  min-height:78px;box-sizing:content-box;
}
.model .fit span{
  display:block;font-size:calc(10px * var(--fsc));font-weight:700;letter-spacing:.14em;color:var(--blue-l);
  margin-bottom:6px;padding-top:14px;border-top:1px dashed var(--line);
}

.tb{background:#fff;padding:78px 0 80px;color:var(--navy);border-top:1px solid #e6f3fb}
.tb__head{text-align:center;margin-bottom:46px}
.tb__lbl{display:inline-block;font-size:calc(11px * var(--fsc));font-weight:700;letter-spacing:.24em;color:var(--blue);margin-bottom:14px}
.tb__head h2{font-size:calc(34px * var(--fsc));line-height:1.5;font-weight:700;letter-spacing:.01em}
.tb__msg{
  max-width:42em;margin:0 auto 104px;padding:0 20px;text-align:center;
  word-break:auto-phrase;
}
.tb__msg p{
  font-size:calc(clamp(15px,1.45vw,16.5px) * var(--fsc));line-height:2.35;color:#3d4f78;letter-spacing:.02em;
  text-wrap:pretty;
}
.tb__msg .tb__msg-l{
  font-size:calc(clamp(16px,1.7vw,19px) * var(--fsc));line-height:2.15;color:var(--navy);
  letter-spacing:.03em;margin-bottom:52px;
}
.tb__msg p + p{margin-top:34px}
.tb__msg b{color:var(--navy);font-weight:700}
.tb__msg .tb__sign{
  margin-top:40px;font-size:calc(13px * var(--fsc));font-weight:700;letter-spacing:.16em;color:var(--navy);
}

/* ---- 02：管理画面キャプチャ ---- */
.scrfig{margin:0}
.scrfig__stage{position:relative;max-width:1180px;margin-inline:auto;container-type:inline-size}
.scrfig__full{display:block;width:100%;height:auto}
/* 吹き出しは画像に焼き込み済み。SPでは図内の文字が小さすぎるため、下に凡例を出す */
.scrfig__legend{display:none}
@media (max-width:640px){
  /* SPは余白を詰めたSP用の画像に差し替えてある（HTMLの <picture> で切り替え）ので、
     以前ここでやっていた「PC画像を広げて余白を切り落とす」処理はもう要らない */
  .scrfig__stage{overflow:hidden}
  .scrfig__legend{display:grid;gap:8px;margin-top:16px}
  .scrfig__legend li{
    display:flex;align-items:center;gap:10px;
    font-size:calc(13px * var(--fsc));font-weight:700;line-height:1.6;color:var(--navy);
  }
  .scrfig__dot{
    flex:none;width:10px;height:10px;border-radius:50%;
    background:linear-gradient(165deg,#1791e6,#005cb8);
  }
}


.tb__b{padding-top:46px;margin-top:46px;border-top:1px solid #daedf8}
.tb__b:first-of-type{padding-top:0;margin-top:0;border-top:0}
.tb__b--tech2 .tb__bh{margin-bottom:14px}
.tb__bh{display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 34px;align-items:start;margin-bottom:34px}
.tb__n{font-size:calc(64px * var(--fsc));line-height:.9;font-weight:700;color:#c3e0f4;letter-spacing:.02em}
.tb__bt h3{font-size:calc(27px * var(--fsc));line-height:1.55;font-weight:700;margin-bottom:14px}
.tb__bt h3 em{font-style:normal;box-shadow:inset 0 -.17em 0 rgba(122,177,235,.45)}
.tb__bt p{font-size:calc(14px * var(--fsc));line-height:2;color:#4a5c85;max-width:70em}
.tb__figimg{margin:0;background:#fff}
/* 旧：画像1枚だった頃の指定。新しい図版(.wt1)の幅・高さを上書きしないようpictureに限定 */
.tb__figimg > picture img{display:block;width:100%;height:auto}
.tb__bt b{color:var(--navy);font-weight:700}

/* ---- 01：無線技術の図版 ---- */
/* PCはカンプ画像(1024×576)に製品画像を重ね、SPは文字が潰れるためカード分割のHTML版を出す */
.wt1{position:relative;container-type:inline-size;border-radius:16px;overflow:hidden;background:#fff}
.wt1__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wt1__stage{position:relative}
.wt1__base{display:block;width:100%;height:auto}
.wt1__dev{position:absolute;translate:-50% -50%;height:auto;max-width:none;
  filter:drop-shadow(0 .5cqw .8cqw rgba(15,41,101,.26))}
/* 各製品は担当する電波アイコンの近くに置く。left は画像内のX・VP・G・Nの
   見出し位置に合わせた値（画像を差し替えたら測り直すこと） */
.wt1__dev--x {left:12%; top:24.3%;width:12cqw}
.wt1__dev--vp{left:37.9%;top:24.1%;width:10.8cqw}
.wt1__dev--g {left:58.56%;top:26.3%;width:13.6cqw}
.wt1__dev--n {left:84%;top:23%;width:6cqw}

/* --- SP用カード --- */
.wt1__c--n  .wt1__sig{--sg:#f5252c;--pb:#fdd6d7;--pc:#e8262c}
.wt1__c--g  .wt1__sig{--sg:#f99e0a;--pb:#fde3ae;--pc:#dd8806}
.wt1__c--vp .wt1__sig{--sg:#1a7ae8;--pb:#c8e5fb;--pc:#1568c9}
.wt1__c--x  .wt1__sig:nth-child(1){--sg:#06c476;--pb:#bdefd8;--pc:#10a26b}
.wt1__c--x  .wt1__sig:nth-child(2){--sg:#8310f2;--pb:#e6d2fb;--pc:#7d21da}
.wt1__cards{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.wt1__c{position:relative;overflow:hidden;background:#eef6fc;aspect-ratio:1/1.24}
.wt1__room{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* 文字・ピルの縦位置はカード高さに対する％で、カンプの比率をそのまま使う */
.wt1__l{position:absolute;margin:0;z-index:2;translate:-50% -50%;font-size:calc(26px * var(--fsc));
  font-weight:900;line-height:1;letter-spacing:.02em;color:#12275c;
  text-shadow:0 0 6px rgba(255,255,255,.92),0 0 14px rgba(255,255,255,.7)}
.wt1__c--n  .wt1__l{left:41.3%;top:34.3%}
.wt1__c--g  .wt1__l{left:49.4%;top:46.7%}
.wt1__c--vp .wt1__l{left:52.0%;top:14.9%}
.wt1__c--x  .wt1__l{left:54.2%;top:14.9%}
.wt1__cdev{position:absolute;left:50%;bottom:9px;z-index:2;translate:-50% 0;
  width:auto;max-width:none;filter:drop-shadow(0 4px 7px rgba(15,41,101,.24))}
.wt1__c--n  .wt1__cdev{height:78px}
.wt1__c--g  .wt1__cdev{height:46px}
.wt1__c--vp .wt1__cdev{height:54px}
.wt1__c--x  .wt1__cdev{height:56px}
.wt1__sigs{position:absolute;z-index:3;display:flex;align-items:flex-end;translate:-50% 0;gap:4px}
.wt1__c--n  .wt1__sigs{left:66.4%;bottom:63.3%}
.wt1__c--g  .wt1__sigs{left:62.1%;bottom:55.5%}
.wt1__c--vp .wt1__sigs{left:54.5%;bottom:47.8%}
.wt1__c--x  .wt1__sigs{left:50%;bottom:47.8%;width:100%;justify-content:center}
.wt1__sig{display:flex;flex-direction:column;align-items:center}
.wt1__bd{margin:0;padding:5px 9px;border-radius:var(--r-pill);white-space:nowrap;text-align:center;
  font-size:calc(11.5px * var(--fsc));font-weight:700;line-height:1.25;letter-spacing:.01em;color:var(--pc);background:var(--pb)}
.wt1__bd small{display:block;font-size:.78em;letter-spacing:0;line-height:1.2}
.wt1__wv{width:26px;margin-top:2px}
.wt1__wv svg{display:block;width:100%;height:auto}
.wt1__wv circle{fill:var(--sg)}
.wt1__wv path{fill:none;stroke:var(--sg);stroke-width:4.2;stroke-linecap:round}
.wt1__hub{margin:14px 0 0;text-align:center;font-size:calc(17px * var(--fsc));
  font-weight:800;letter-spacing:.04em;line-height:1;color:#12275c}
.wt1__hub::before{content:"";display:block;width:11px;height:11px;margin:0 auto 7px;
  border:3px solid #1a7ae8;border-radius:50%;background:#fff}

/* --- 凡例 --- */
.wt1__lg{background:#fff}
.wt1__lgt{margin:0;font-weight:700;letter-spacing:.01em;color:#123469}
.wt1__lgt em{font-style:normal;color:var(--blue)}
.wt1__lgl{margin:0;padding:0;list-style:none}
.wt1__lgi{display:flex;align-items:center;font-weight:700;line-height:1.3;color:var(--lc)}
.wt1__lgi i{flex:none;border-radius:50%;background:var(--ld)}
.wt1__lgi small{display:block;font-size:.82em;letter-spacing:0}
.wt1__lgi--n  {--lc:#dd333c;--ld:#fb021d}
.wt1__lgi--g  {--lc:#e79a1d;--ld:#fd9f03}
.wt1__lgi--vp {--lc:#2b86dc;--ld:#0182fd}
.wt1__lgi--x5 {--lc:#17b47c;--ld:#02c773}
.wt1__lgi--x60{--lc:#7c31c6;--ld:#8201fc}

/* --- PC：カンプ画像を使う --- */
@media (min-width:901px){
  .wt1__cards,.wt1__hub{display:none}
  /* 凡例は画像の下端（床の余白）に重ねる */
  .wt1__lg{position:absolute;left:1.95cqw;top:55cqw;width:96.09cqw;height:6.84cqw;z-index:2;
    display:flex;align-items:center;border-radius:1.17cqw;box-shadow:0 .2cqw .68cqw rgba(18,58,120,.10)}
  .wt1__lgt{flex:none;width:21.5cqw;padding-left:1.37cqw;font-size:calc(1.66cqw * var(--fsc));line-height:1.5}
  .wt1__lgl{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .wt1__lgi{position:relative;justify-content:center;gap:1.07cqw;font-size:calc(1.66cqw * var(--fsc))}
  /* 区切り線はパネル高さいっぱいではなく中央に短く入れる */
  .wt1__lgi::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:1px;height:3.5cqw;background:#dbeaf7}
  .wt1__lgi i{width:2.64cqw;height:2.64cqw}
  /* PCは高さの決まった横長バーなので、SP用の3行目の改行は効かせない */
  .wt1__lgbr{display:none}
}

/* --- SP：カード分割のHTML版を使う --- */
@media (max-width:900px){
  /* 凡例を画像に重ねるので、画像の下の余白はなくす */
  .wt1{padding:0;border-radius:14px}
  /* SPもPCと同じく、1枚のカンプ画像に製品画像を重ねる方式にする
     （画像はHTMLの <picture> で縦長のSP用に切り替わる）。
     カード分割版とその下の「ココヘルパ」表記は、画像の中に同じものが
     描かれているので出さない */
  .wt1__stage{display:block}
  .wt1__stage picture{display:block}
  .wt1__cards,.wt1__hub{display:none}
  /* 製品画像の位置は、それぞれの電波アイコンの真下。
     left/top は画像に対する％（中心の位置）、width は枠幅に対する％ */
  .wt1__dev--x {left:16.94%;top:20.6%;width:19cqw}
  .wt1__dev--vp{left:46.09%;top:20.5%;width:17cqw}
  .wt1__dev--g {left:67.1%; top:21.5%;width:20cqw}
  .wt1__dev--n {left:89.44%;top:20%;  width:9.5cqw}
  /* 見出しを上、帯を下に積み、PCと同じく画像の床の余白に重ねる。
     幅の狭い端末でも同じ形になるよう、横並びは使わない */
  .wt1__lg{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
    padding:11px 12px;border-radius:12px;
    display:flex;flex-direction:column;align-items:stretch;gap:7px;
    box-shadow:0 3px 12px rgba(18,58,120,.16)}
  /* 縦に積むと横幅を使えるので、見出しは折り返さず1行にする */
  .wt1__lgbr2,.wt1__lgbr{display:none}
  .wt1__lgt{flex:none;font-size:calc(13.5px * var(--fsc));line-height:1.5}
  /* 帯は2列。5つめの60GHz帯だけ最後の行の左に残る */
  .wt1__lgl{position:relative;width:100%;min-width:0;
    display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:0}
  /* 縦に積むので、区切り線は見出しと帯のあいだの横線にする */
  .wt1__lgl::before{content:"";position:absolute;left:0;right:0;top:-4px;
    width:100%;height:1px;background:#dbeaf7}
  .wt1__lgi{gap:6px;font-size:calc(12px * var(--fsc))}
  /* 2列にすると1項目あたりが狭くなるので、帯の名前は途中で折らない */
  .wt1__lgi > span{white-space:nowrap}
  .wt1__lgi i{width:15px;height:15px}
}
@media (max-width:379px){
  /* 幅の狭い端末は、この文字サイズだと見出しが2行になって枠が高くなり、
     画像に重ねたときに「ココヘルパ」を隠してしまうので、中身を一段詰める */
  .wt1__lg{padding:8px 10px;gap:5px}
  .wt1__lgt{font-size:calc(12.5px * var(--fsc));line-height:1.4}
  .wt1__lgl{gap:4px 8px}
  .wt1__lgi{font-size:calc(11px * var(--fsc));gap:5px;line-height:1.35}
  .wt1__lgi i{width:13px;height:13px}
  .wt1__l{font-size:calc(22px * var(--fsc))}
  .wt1__bd{padding:5px 6px;font-size:calc(10px * var(--fsc))}
  .wt1__sigs{gap:3px}
}

/* ---- 01：5種類の無線 ---- */
.wt5{margin:0 0 26px}
.wt5__h{margin:0 0 14px;font-size:calc(17px * var(--fsc));font-weight:700;line-height:1.5;color:#1b2b4d;text-align:center}
.wt5__h em{font-style:normal;color:var(--blue)}
.wt5__it--freq-note{display:block}
/* SPは「図 → 5種の無線」の順に入れ替え */
@media (max-width:900px){
  .tb__b--tech1{display:flex;flex-direction:column}
  .tb__b--tech1 > .tb__bh{order:1}
  .tb__b--tech1 > .tb__figimg{order:2}
  .tb__b--tech1 > .wt5{order:3;margin:22px 0 0}
  .tb__b--tech1 > .rs{order:4}
}
.tb__bt .wt5__t{font-size:calc(20px * var(--fsc));line-height:1.5;font-weight:700;margin:24px 0 0}
.tb__bt .wt5__t em{font-style:normal;font-size:calc(29px * var(--fsc));color:var(--blue);margin-right:3px;box-shadow:none}
.wt5__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.wt5__it{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 13px;border-radius:0;background:var(--bg)}
.wt5__i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid var(--ring)}
.wt5__i svg{width:24px;height:24px;fill:var(--c)}
.wt5__tx b{display:block;font-size:calc(15px * var(--fsc));line-height:1.45;font-weight:700;color:var(--c)}
.wt5__tx i{display:block;font-style:normal;font-size:calc(11.5px * var(--fsc));line-height:1.55;color:#4a5c85}
.wt5__br{display:inline}
.wt5__it--call{--c:#ef3b4e;--bg:#fdeef0;--ring:#f7bcc3}
.wt5__it--talk{--c:#ef8a04;--bg:#fdf4e6;--ring:#f8d59e}
.wt5__it--cam{--c:#0d6ef0;--bg:#e9f1fe;--ring:#abc9f9}
.wt5__it--sens{--c:#10a67f;--bg:#e6f6f1;--ring:#9adcc8}
.wt5__it--stat{--c:#7446ee;--bg:#f0ebfe;--ring:#c5b3f7}

/* ---- 01：病棟のフロア図 ---- */
.wl__cap{margin-bottom:9px;font-size:calc(11.5px * var(--fsc));font-weight:700;letter-spacing:.1em;color:#8492aa}
.wl__cap::before{content:"";display:inline-block;width:16px;height:2px;background:var(--blue-l);vertical-align:middle;margin-right:9px}
.wl__scene{border:1px solid #daedf8;border-radius:0;overflow:hidden;background:#fff}
.sc{display:block;width:100%;height:auto}
.sc__bldg{fill:none;stroke:#cbe2f1;stroke-width:1.2}
.sc__room{fill:#f7fcff;stroke:#daebf6;stroke-width:1}
.sc__corr{fill:#eff7fc;stroke:#daebf6;stroke-width:1}
.sc__bed{fill:#e4f2fa;stroke:#d2e7f4;stroke-width:1}
.sc__bed2{fill:#e4f2fa}
.sc__area{fill:#89a5c6;font-size:calc(13px * var(--fsc));font-weight:700;letter-spacing:.06em}

.sc__rail{fill:none;stroke:#cbdfed;stroke-width:1.2}
.sc__pk{
  fill:none;stroke:var(--c);stroke-width:var(--w);stroke-linecap:round;
  stroke-dasharray:var(--dash);
}
.is-live .sc__pk{animation:sc-run var(--d) linear infinite}
@keyframes sc-run{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--period) * -1px)}}
.sc__nd--q{opacity:.42}
.sc__nd .sc__hl{fill:#fff;stroke:#c7e0f1;stroke-width:1}
.sc__g{fill:#194380}
.sc__g2{fill:none;stroke:#194380;stroke-width:1.6;stroke-linecap:round}
.sc__lb{fill:#6b80a8;font-size:calc(13px * var(--fsc))}
.sc__ring{fill:none;stroke:#1f7ce6;stroke-width:1.4;opacity:0}
.is-live .sc__ring{animation:sc-ring var(--d) ease-out infinite}
@keyframes sc-ring{
  0%{transform:scale(.35);opacity:.85}
  55%{transform:scale(1);opacity:0}
  100%{transform:scale(1);opacity:0}
}
.sc__ring{transform-box:fill-box;transform-origin:center}

.wl__hint{display:none;margin-top:8px;font-size:calc(11px * var(--fsc));color:#8492aa}
.wl__leg{display:grid;grid-template-columns:repeat(5,1fr);gap:0 18px;margin-top:20px;padding-top:18px;border-top:1px solid #daedf8}
.wl__leg li{padding-left:16px;position:relative}
.wl__leg li::before{
  content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--c);
}
.wl__leg b{display:block;font-size:calc(13px * var(--fsc));color:var(--navy);line-height:1.5}
.wl__leg i{display:block;font-style:normal;font-size:calc(11px * var(--fsc));color:#7b8aa6;line-height:1.6;margin-top:2px}

/* ---- 01：通信未完了 → 自動再送 ---- */
.rs{margin-top:36px;background:#fff;border:1px solid #daedf8;padding:32px 36px 40px}
.rs__t{font-size:calc(clamp(18px,1.6vw,18px) * var(--fsc));font-weight:700;color:var(--navy);line-height:1.6;letter-spacing:.02em}
.rs__t b{color:var(--accent)}
.rs__d{margin-top:12px;font-size:calc(13.5px * var(--fsc));line-height:1.95;color:var(--gray)}
.rs__d b{color:var(--navy);font-weight:700}
.rs__stage{margin-top:38px;padding-bottom:14px}
.rs__track{display:flex;align-items:center;gap:20px}
.rs__node{
  flex:0 0 auto;width:96px;display:grid;justify-items:center;gap:9px;
  background:var(--sky2);border:1px solid #cee3f1;padding:16px 8px 14px;
  transition:background .3s ease,border-color .3s ease;
}
.rs__node svg{width:22px;height:22px;fill:var(--blue);transition:fill .3s ease}
.rs__node b{font-size:calc(12px * var(--fsc));font-weight:700;color:var(--navy);letter-spacing:.04em}
.rs__line{position:relative;flex:1;height:2px;background:#dceaf3}
.rs__p{
  position:absolute;top:-5px;left:0;margin-left:-6px;width:12px;height:12px;border-radius:50%;
  opacity:0;
}
.rs__p1{background:#9dbad6;animation:rsP1 6s linear infinite}
.rs__p2{background:var(--accent);box-shadow:0 0 0 5px rgba(11,50,173,.14);animation:rsP2 6s linear infinite}
.rs__x{
  position:absolute;left:52%;top:-13px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;background:#d64545;display:grid;place-items:center;opacity:0;
  animation:rsX 6s linear infinite;
}
.rs__x svg{width:16px;height:16px;fill:#fff}
.rs__lb{
  position:absolute;font-style:normal;font-size:calc(11.5px * var(--fsc));font-weight:700;letter-spacing:.04em;
  white-space:nowrap;opacity:0;padding:5px 11px;
}
.rs__lb--ng{left:52%;top:20px;transform:translateX(-50%);color:#c0403c;background:#fbeceb;animation:rsNg 6s linear infinite}
.rs__lb--re{left:50%;top:-46px;transform:translateX(-50%);color:#fff;background:var(--accent);animation:rsRe 6s linear infinite}
.rs__lb--re::after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--accent);
}
.rs__node--to{animation:rsTo 6s linear infinite}
@keyframes rsP1{
  0%{left:0;opacity:0} 4%{left:0;opacity:1} 22%{left:52%;opacity:1}
  26%{left:52%;opacity:0} 100%{left:52%;opacity:0}
}
@keyframes rsX{
  0%,22%{opacity:0;transform:translateX(-50%) scale(.5)}
  28%{opacity:1;transform:translateX(-50%) scale(1)}
  48%{opacity:1;transform:translateX(-50%) scale(1)}
  56%,100%{opacity:0;transform:translateX(-50%) scale(1)}
}
@keyframes rsNg{0%,24%{opacity:0}30%,48%{opacity:1}56%,100%{opacity:0}}
@keyframes rsRe{
  0%,48%{opacity:0;transform:translateX(-50%) translateY(6px)}
  56%,86%{opacity:1;transform:translateX(-50%) translateY(0)}
  94%,100%{opacity:0;transform:translateX(-50%) translateY(0)}
}
@keyframes rsP2{
  0%,52%{left:0;opacity:0} 56%{left:0;opacity:1} 84%{left:100%;opacity:1}
  88%{left:100%;opacity:0} 100%{opacity:0}
}
@keyframes rsTo{
  0%,82%{background:var(--sky2);border-color:#cee3f1}
  88%,96%{background:var(--accent);border-color:var(--accent)}
  100%{background:var(--sky2);border-color:#cee3f1}
}
@keyframes rsToI{0%,82%{fill:var(--blue)}88%,96%{fill:#fff}100%{fill:var(--blue)}}
.rs__node--to svg{animation:rsToI 6s linear infinite}
@keyframes rsToB{0%,82%{color:var(--navy)}88%,96%{color:#fff}100%{color:var(--navy)}}
.rs__node--to b{animation:rsToB 6s linear infinite}

/* ---- 02：管理画面（電池残量の一覧） ---- */
.pcm__scr{
  position:relative;background:#fff;border:1px solid #cee3f1;
  box-shadow:0 14px 40px rgba(15,41,101,.12);
}
.pcm__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--navy);padding:11px 14px}
.pcm__ttl{display:flex;align-items:baseline;gap:12px;font-size:calc(12.5px * var(--fsc));font-weight:700;color:#fff;letter-spacing:.04em}
.pcm__ttl i{font-style:normal;font-size:calc(10.5px * var(--fsc));font-weight:400;color:rgba(255,255,255,.66)}
.pcm__batt{
  appearance:none;cursor:pointer;font:inherit;display:flex;align-items:center;gap:9px;
  background:#d64545;border:0;color:#fff;padding:7px 13px;
  font-size:calc(11.5px * var(--fsc));font-weight:700;letter-spacing:.02em;
  box-shadow:0 0 0 0 rgba(214,69,69,.6);animation:battPulse 2.6s ease-out infinite;
}
.pcm.is-open .pcm__batt{animation:none;background:#b93a3a}
@keyframes battPulse{0%{box-shadow:0 0 0 0 rgba(214,69,69,.55)}70%{box-shadow:0 0 0 11px rgba(214,69,69,0)}100%{box-shadow:0 0 0 0 rgba(214,69,69,0)}}
.pcm__batt-i{display:block;width:24px;height:14px}
.pcm__batt-i svg{width:24px;height:14px;fill:none;stroke:#fff;stroke-width:1.6}
.pcm__batt-i .lv{fill:#fff;stroke:none}
.pcm__batt b{font-size:calc(11px * var(--fsc));background:#fff;color:#c0403c;padding:1px 6px}
.pcm__body{position:relative;background:#f4fafd;padding:20px;min-height:330px}
.pcm__rooms{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.pcm__rooms li{
  background:#fff;border:1px solid #dcebf4;border-left:3px solid #c2d6e5;padding:14px 16px;
}
.pcm__rooms b{display:block;font-size:calc(16px * var(--fsc));color:var(--navy);letter-spacing:.02em}
.pcm__rooms span{display:block;margin-top:5px;font-size:calc(11px * var(--fsc));color:#8492aa}
.pcm__rooms .is-wn{border-left-color:#d68a0b}
.pcm__rooms .is-wn span{color:#b3750a;font-weight:700}
.pcm__rooms .is-fail{border-left-color:#d64545;background:#fdf5f5}
.pcm__rooms .is-fail span{color:#c0403c;font-weight:700}
.pcm__panel{
  position:absolute;right:14px;top:50px;z-index:3;width:min(360px,calc(100% - 28px));
  background:#fff;border:1px solid #cee3f1;box-shadow:0 20px 48px rgba(15,41,101,.22);
  padding:16px 18px 14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.pcm.is-open .pcm__panel{opacity:1;visibility:visible;transform:none}
.pcm__panel::before{
  content:"";position:absolute;right:26px;top:-7px;width:12px;height:12px;background:#fff;
  border-left:1px solid #cee3f1;border-top:1px solid #cee3f1;transform:rotate(45deg);
}
.pcm__panel-t{font-size:calc(12px * var(--fsc));font-weight:700;color:var(--navy);letter-spacing:.04em;padding-bottom:10px;border-bottom:1px solid #e3f0f7}
.pcm__list{list-style:none;margin:0;padding:0}
.pcm__list li{
  display:grid;grid-template-columns:5.2em 1fr;grid-template-areas:"room dev" "bar bar";
  gap:4px 10px;padding:11px 0;border-bottom:1px solid #eef5f9;
}
.pcm__list b{grid-area:room;font-size:calc(12.5px * var(--fsc));color:var(--navy)}
.pcm__list i{grid-area:dev;font-style:normal;font-size:calc(11px * var(--fsc));color:#8492aa}
.pcm__g{grid-area:bar;position:relative;display:block;height:7px;background:#eef5f9;margin-top:3px}
.pcm__g u{position:absolute;left:0;top:0;bottom:0;width:var(--v);background:#5b9eef;text-decoration:none}
.pcm__list em{
  grid-area:dev;justify-self:end;font-style:normal;font-size:calc(11px * var(--fsc));font-weight:700;color:#8492aa;
}
.pcm__list .is-low em{color:#c0403c}
.pcm__list .is-low u{background:#d64545}
.pcm__list .is-mid em{color:#b3750a}
.pcm__list .is-mid u{background:#e0a63a}
.pcm__panel-n{margin-top:10px;font-size:calc(10.5px * var(--fsc));color:#97a8bc}
.pcm__n{margin-top:14px;font-size:calc(11.5px * var(--fsc));color:var(--gray-l);line-height:1.8}

/* ---- 03：長期運用を支える体制 ---- */
/* ---- 03：自社開発 × 国内製造 → 長期供給 ---- */
.sup{margin-top:34px}
.sup__row{
  /* アイコン径と直下の間隔。演算子（×・→）を見出し行に合わせる計算にも使う */
  --sup-ico:112px;--sup-ico-gap:8px;
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;
  column-gap:clamp(12px,2.6vw,34px);
  margin:0;padding:0;list-style:none;text-align:center;
}
.sup__it{display:grid;justify-items:center}
.sup__i{
  display:grid;place-items:center;width:var(--sup-ico);height:var(--sup-ico);
  border-radius:50%;background:#e1f0fd;
}
.sup__i svg{width:52px;height:52px}
.sup__f{width:60px;height:44px}   /* 工場＋国旗は横長のため個別指定 */
/* 歯車と時計は線画、工場は面 */
.sup__g,.sup__cl{fill:none;stroke:#1d82d9;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sup__f{fill:#1d82d9}
.sup__fl{fill:#fff;stroke:#a9d3f2;stroke-width:.7}   /* 淡い地色の上でも旗の形が分かるよう輪郭を足す */
.sup__flag{fill:#ea3240}
.sup__t{
  margin:var(--sup-ico-gap) 0 0;
  font-size:calc(clamp(23px,2.2vw,31px) * var(--fsc));font-weight:800;line-height:1.25;
  letter-spacing:.05em;color:#0d2658;
}
.sup__t small{
  display:block;margin-top:7px;
  font-size:calc(13px * var(--fsc));font-weight:700;letter-spacing:.11em;line-height:1.3;color:#3f8ccd;
}
.sup__d{margin:15px 0 0;font-size:calc(14px * var(--fsc));line-height:1.85;color:var(--gray)}
/* 演算子はアイコン＋見出し1行ぶん下げて、見出しの高さの中央に置く */
.sup__op{
  display:grid;place-items:center;
  margin-top:calc(var(--sup-ico) + var(--sup-ico-gap));
  height:calc(clamp(23px,2.2vw,31px) * 1.25);
}
.sup__op svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sup__x{width:clamp(22px,2.1vw,31px);height:clamp(22px,2.1vw,31px);stroke:#2683e1;stroke-width:2.5}
.sup__arw{width:clamp(29px,2.8vw,41px);height:clamp(23px,2.2vw,33px);stroke:#71b2ec;stroke-width:2}

@media (max-width:900px){
  .sup{margin-top:26px}
  /* 自社開発×国内製造は横に並べ、その結果である長期供給だけ下に全幅で置く */
  .sup__row{--sup-ico:92px;grid-template-columns:1fr auto 1fr;row-gap:6px}
  .sup__row > :nth-child(n+4){grid-column:1 / -1}
  /* ×は横に並んだ2つの見出しの高さにそろえる（PCと同じ計算） */
  .sup__row > :nth-child(2){margin-top:calc(var(--sup-ico) + var(--sup-ico-gap));
    height:calc(clamp(23px,2.2vw,31px) * 1.25);padding:0}
  .sup__i svg{width:44px;height:44px}
  .sup__t small{margin-top:6px;font-size:calc(12px * var(--fsc))}
  .sup__d{margin-top:11px;font-size:calc(13.5px * var(--fsc));line-height:1.85;max-width:30em;margin-inline:auto;word-break:auto-phrase}
  /* 縦積みでは演算子を項目の間に置き、矢印は下向きに回す */
  .sup__op{margin-top:0;height:auto;padding:4px 0}
  .sup__arw{rotate:90deg}
}
@media (max-width:429px){
  /* この幅から「HARDWARE + SOFTWARE」が2行になり、横に並べた2つで
     本文の始まる位置がずれる。英字の欄を2行ぶんの高さで固定してそろえる */
  .sup__row > :nth-child(-n+3) .sup__t small{min-height:2.6em}
}

.cz{display:grid;justify-items:center}
.cz__src{
  width:100%;background:#fff;border:1px solid #daedf8;border-top:3px solid var(--accent);
  padding:26px 32px 28px;text-align:center;
}
.cz__k{
  display:inline-block;font-size:calc(10px * var(--fsc));font-weight:700;letter-spacing:.2em;
  color:var(--blue);background:var(--sky);padding:4px 11px;margin-bottom:14px;
}
.cz__src b{display:block;font-size:calc(clamp(19px,2.2vw,25px) * var(--fsc));color:var(--navy);letter-spacing:.04em;margin-bottom:12px}
.cz__src p{font-size:calc(13px * var(--fsc));line-height:1.95;color:var(--gray);word-break:auto-phrase}
.cz__br{display:none}
.cz__arw{
  width:0;height:0;margin:18px 0;
  border-left:12px solid transparent;border-right:12px solid transparent;border-top:15px solid #b7d5ec;
}
.cz__mid{
  width:100%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 26px;text-align:center;
}
.cz__mid-i{flex:0 0 auto;width:26px;height:26px}
.cz__mid-i svg{width:26px;height:26px;fill:#8fc4f5}
.cz__mid b{font-size:calc(clamp(14.5px,1.7vw,18px) * var(--fsc));line-height:1.6;letter-spacing:.02em}
.cz__out{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.cz__out li{background:#fff;border:1px solid #daedf8;padding:28px 28px 30px;text-align:center}
.cz__ico{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:var(--sky)}
.cz__ico svg{width:26px;height:26px;fill:var(--accent)}
.cz__out b{display:block;font-size:calc(16.5px * var(--fsc));color:var(--navy);line-height:1.6;margin-bottom:11px}
.cz__out li > span:not(.cz__ico){display:block;font-size:calc(12.5px * var(--fsc));line-height:1.95;color:var(--gray);word-break:auto-phrase}
.cz__plus{
  width:100%;margin-top:26px;background:var(--sky2);border:1px solid #cee3f1;
  padding:24px 30px 26px;text-align:center;
}
.cz__plus-k{font-size:calc(11px * var(--fsc));font-weight:700;letter-spacing:.14em;color:var(--blue);margin-bottom:10px}
.cz__plus b{display:block;font-size:calc(19px * var(--fsc));color:var(--navy);letter-spacing:.06em;margin-bottom:11px}
.cz__plus p{font-size:calc(12.5px * var(--fsc));line-height:1.95;color:var(--gray);word-break:auto-phrase}

@media (prefers-reduced-motion:reduce){
  .is-live .sc__pk,.is-live .sc__ring{animation:none}
  .sc__ring{opacity:0}
  .rs__p,.rs__x,.rs__lb,.rs__node--to,.rs__node--to svg,.rs__node--to b,.pcm__batt{animation:none}
  .rs__p2{opacity:1;left:100%}
  .rs__lb--re{opacity:1}
}

/* ---- 技術・信頼性のレスポンシブ ---- */
@media (max-width:1080px){
  .tb__head h2{font-size:calc(29px * var(--fsc))}
  .tb__bh{grid-template-columns:76px minmax(0,1fr);gap:0 22px}
  .tb__n{font-size:calc(46px * var(--fsc))}
  .tb__bt h3{font-size:calc(23px * var(--fsc))}
  .tb__bt .wt5__t{font-size:calc(19px * var(--fsc))}
  .tb__bt .wt5__t em{font-size:calc(27px * var(--fsc))}
  .wt5__list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .wt5__it{flex:0 1 calc((100% - 28px) / 3)}
  .wl__leg{grid-template-columns:repeat(3,1fr);gap:14px 18px}
}
@media (max-width:860px){
  .tb{padding:58px 0 64px}
  .tb__head{margin-bottom:34px}
  .tb__head h2{font-size:calc(23px * var(--fsc));line-height:1.6}
  .tb__msg{margin-bottom:66px}
  .tb__msg .tb__msg-l{margin-bottom:36px}
  .tb__msg p + p{margin-top:26px}
  .tb__b{padding-top:38px;margin-top:38px}
  .tb__bh{grid-template-columns:1fr;gap:6px;margin-bottom:24px}
  .tb__n{font-size:calc(38px * var(--fsc))}
  .tb__bt h3{font-size:calc(20px * var(--fsc))}
  .tb__bt p{font-size:calc(13.5px * var(--fsc));line-height:1.95}

  .wt5{margin-bottom:22px}
  .tb__bt .wt5__t{font-size:calc(18px * var(--fsc));margin-top:20px}
  .tb__bt .wt5__t em{font-size:calc(25px * var(--fsc))}
  .wt5__list{gap:12px}
  .wt5__it{flex-basis:calc((100% - 12px) / 2)}
  .wt5__it--stat{flex-basis:100%}
  .wt5__it{gap:11px;padding:13px 12px}
  .wt5__i{width:44px;height:44px}
  .wt5__i svg{width:22px;height:22px}
  .wt5__tx b{font-size:calc(15px * var(--fsc))}
  .wt5__tx i{font-size:calc(11px * var(--fsc))}

  .wl__scene{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .wl__scene::-webkit-scrollbar{height:6px}
  .wl__scene::-webkit-scrollbar-track{background:#eaf5fb}
  .wl__scene::-webkit-scrollbar-thumb{background:#c1daec;border-radius:0}
  .sc{min-width:1080px}
  .sc__lb{font-size:calc(15px * var(--fsc))}
  .sc__area{font-size:calc(15px * var(--fsc))}
  .wl__hint{display:block}
  .wl__leg{grid-template-columns:1fr 1fr;gap:12px 14px}

  .rs{padding:24px 20px 32px}
  .rs__stage{margin-top:34px}
  .rs__track{gap:10px}
  .rs__node{width:74px;padding:12px 6px 11px}
  .rs__node b{font-size:calc(11px * var(--fsc))}
  .pcm__rooms{grid-template-columns:repeat(2,1fr);gap:9px}
  .pcm__body{padding:14px}
  .pcm__panel{right:10px;left:10px;width:auto;top:46px}
  .pcm__batt-t{display:none}
  /* 縦積みになる幅では、ブロックの間にも矢印を入れて流れを示す */
  .cz__out{grid-template-columns:1fr;gap:38px}
  .cz__out li{padding:22px 22px 24px}
  .cz__out li,.cz__plus{position:relative}
  .cz__out li + li::before,.cz__plus::before{
    content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);
    width:0;height:0;
    border-left:12px solid transparent;border-right:12px solid transparent;border-top:15px solid #b7d5ec;
  }
  .cz__plus{margin-top:38px}
  .cz__br{display:inline}
}
@media (max-width:560px){
  .wt5__it{padding:12px 10px;gap:9px}
  .wt5__i{width:40px;height:40px}
  .wt5__i svg{width:20px;height:20px}
  .wt5__tx b{font-size:calc(14px * var(--fsc))}
  .wt5__tx i{font-size:calc(10.5px * var(--fsc));letter-spacing:0}
}

/* ---------- 助成金（07） ---------- */
.subsidy{background:linear-gradient(180deg,#fff 0%,var(--sky2) 100%);padding:16px 0 58px}
.subsidy__box{
  background:#fff;border:1px solid #c7dbe9;border-top:3px solid var(--accent);
  padding:36px 42px 38px;box-shadow:0 8px 30px rgba(15,41,101,.09);
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:0 28px;align-items:center;
}
.subsidy__ico{
  width:58px;height:58px;background:var(--sky);display:grid;place-items:center;align-self:start;margin-top:3px;
}
.subsidy__ico svg{width:31px;height:31px;fill:var(--accent)}
.subsidy__k{
  display:block;font-size:calc(11px * var(--fsc));font-weight:500;letter-spacing:.24em;color:var(--blue);margin-bottom:10px;
}
.subsidy__box h2{font-size:calc(clamp(20px,2.5vw,26px) * var(--fsc));color:var(--navy);margin-bottom:12px;line-height:1.55}
.subsidy__box p{font-size:calc(14px * var(--fsc));color:var(--gray);line-height:1.95}
.subsidy__box .disc{margin-top:13px;font-size:calc(11.5px * var(--fsc));color:var(--gray-l);line-height:1.7}
.subsidy__box .btn{white-space:nowrap}

/* ---------- FAQ（08：LLMO想定） ---------- */
.faq__list{margin-inline:auto;background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy)}
.faq__item{background:#fff;overflow:hidden}
.faq__item + .faq__item{border-top:1px solid var(--line)}
.faq__q{
  display:flex;gap:14px;align-items:flex-start;width:100%;background:none;border:0;cursor:pointer;
  padding:21px 24px;text-align:left;font-family:inherit;font-size:calc(16px * var(--fsc));font-weight:700;color:var(--navy);line-height:1.65;
}
.faq__q .mk{
  width:24px;height:24px;flex-shrink:0;border-radius:0;background:var(--sky);color:var(--blue);
  display:grid;place-items:center;font-size:calc(13px * var(--fsc));font-weight:700;margin-top:1px;
}
.faq__q .tg{margin-left:auto;flex-shrink:0;width:18px;height:18px;position:relative;margin-top:5px}
.faq__q .tg::before,.faq__q .tg::after{content:"";position:absolute;background:var(--blue);border-radius:0;transition:transform .28s var(--ease)}
.faq__q .tg::before{left:0;top:8px;width:18px;height:2px}
.faq__q .tg::after{left:8px;top:0;width:2px;height:18px}
.faq__item.is-open .faq__q .tg::after{transform:rotate(90deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 24px 24px 62px;max-width:960px;font-size:calc(14px * var(--fsc));color:var(--gray);line-height:2}
.faq__a p+p{padding-top:0}
.faq__a b{color:var(--navy)}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:#fff;padding:68px 0;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:auto -10% -60% auto;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,177,235,.28),transparent 62%);
}
.cta__in{position:relative;text-align:center}
.cta h2{font-size:calc(clamp(23px,3vw,32px) * var(--fsc));line-height:1.6;margin-bottom:18px}
.cta p{font-size:calc(15.5px * var(--fsc));color:#c3e1f5;line-height:2;margin-bottom:5px}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta__sub{margin-top:28px;font-size:calc(13px * var(--fsc));color:#9ac6ed}
.cta__tel{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);font-size:calc(14px * var(--fsc));color:#c3e1f5}
.cta__tel a{color:inherit;text-decoration:none}
.cta__tel b{font-size:calc(26px * var(--fsc));color:#fff;letter-spacing:.03em;margin-left:10px}
.cta__hours{margin-top:6px;font-size:calc(12.5px * var(--fsc));color:#9ac6ed;letter-spacing:.02em}

/* ---------- フッター ---------- */
.ft{background:#0a1c4a;color:#9ac6ed;padding:46px 0 30px;font-size:calc(13px * var(--fsc))}
.ft__in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.ft__logo img{width:150px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:12px}
.ft__nav{display:flex;gap:26px;flex-wrap:wrap}
.ft__nav a{color:#9ac6ed}
.ft__nav a:hover{color:#fff}
.ft__cp{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:calc(11.5px * var(--fsc));color:#6c8acb}
.ft__brand{width:26px;height:3px;background:var(--brand);border-radius:0;margin-bottom:14px}

/* ---------- 追従CTA（モバイル） ---------- */
/* ページ全体の文字を大きくした（--fsc）ぶん、この帯だけ縦に伸びて
   画面を塞いでしまうので、ここは以前の倍率（.92）に戻す */
.sticky{
  --fsc:.92;
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:9px;padding:10px 12px;
  background:#fff;border-top:1px solid var(--line);
}
.sticky .btn{flex:1;padding:14px 8px;font-size:calc(14px * var(--fsc));border-radius:0}
.sticky__tel{gap:7px;padding:9px 8px}
.sticky__tel .btn__ico{width:16px;height:16px;flex-shrink:0}
.sticky__tel span{display:block;line-height:1.25;text-align:left}
.sticky__tel b{display:block;font-size:calc(17px * var(--fsc));font-weight:700;letter-spacing:.01em;white-space:nowrap}
.sticky__tel i{display:block;margin-top:2px;font-size:calc(9.5px * var(--fsc));font-style:normal;font-weight:700;color:var(--gray-l);white-space:nowrap}

.js-step{opacity:0;transform:translateY(26px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js-step.is-in{opacity:1;transform:none}
.js-rise{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

@media (max-width:1180px){
  .hd__nav{display:none}
  .hd__tel{margin-left:auto}
  .hd__burger{display:flex}
  .hd__in{gap:18px}
}

@media (max-width:1080px){
  .models{grid-template-columns:repeat(2,1fr)}
  .model__use{font-size:calc(13.5px * var(--fsc));min-height:calc(13.5px * 1.5 * 2 + 24px)}
  .st4{grid-template-columns:repeat(2,1fr);gap:30px 26px}
  .st4__i:nth-child(2)::after{display:none}
  .st4__f{height:200px}
  .st4__f img{max-height:168px}
  .st4__f--ph img{height:200px}
  .pick{grid-template-columns:1fr 320px;gap:32px}
  .devs__l{grid-template-columns:repeat(3,1fr)}
  .hc__voice ul{gap:12px}
}

@media (max-width:900px){
  .pick{grid-template-columns:1fr;gap:34px}
  .pick__l li{grid-template-columns:1fr;gap:4px}
  .hc__hd{grid-template-columns:1fr}
  .hc__ph{min-height:0}
  .hc__ph img{height:220px}
  .hc__chs{grid-template-columns:1fr}
  .hc__big{grid-template-columns:1fr}
  .hc__big-ph{min-height:220px}
  .hc__big-ph img{height:240px}
  .hc__voice ul{grid-template-columns:1fr;gap:10px}
}

@media (max-width:860px){
  .tb{padding:58px 0 64px}
  .tb__head{margin-bottom:34px}
  .tb__head h2{font-size:calc(23px * var(--fsc));line-height:1.6}
  .tb__msg{margin-bottom:66px}
  .tb__msg .tb__msg-l{margin-bottom:36px}
  .tb__msg p + p{margin-top:26px}
  .tb__b{padding-top:38px;margin-top:38px}
  /* 番号の横に見出しを置く。本文はそのまま全幅に流したいので、
     .tb__bt の箱をいったん外して（display:contents）
     h3 と p をそれぞれグリッドに直接並べている */
  .tb__bh{grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center;margin-bottom:24px}
  .tb__bt{display:contents}
  .tb__bt h3{grid-column:2;margin-bottom:0}
  .tb__bt p{grid-column:1 / -1;margin-top:13px}
  /* 番号の横に見出しが来ると、見出しが大見出しの続きのように見えてしまう。
     02・03と同じ区切り線を01にも引いて、ここから本編が始まることを示す */
  .tb__b:first-of-type{margin-top:0;padding-top:28px;border-top:1px solid #daedf8}
  .tb__n{font-size:calc(38px * var(--fsc))}
  .tb__bt h3{font-size:calc(20px * var(--fsc))}
  .tb__bt p{font-size:calc(13.5px * var(--fsc));line-height:1.95}

  .wt5{margin-bottom:22px}
  .tb__bt .wt5__t{font-size:calc(18px * var(--fsc));margin-top:20px}
  .tb__bt .wt5__t em{font-size:calc(25px * var(--fsc))}
  .wt5__list{gap:12px}
  .wt5__it{flex-basis:calc((100% - 12px) / 2)}
  .wt5__it--stat{flex-basis:100%}
  .wt5__it{gap:11px;padding:13px 12px}
  .wt5__i{width:44px;height:44px}
  .wt5__i svg{width:22px;height:22px}
  .wt5__tx b{font-size:calc(15px * var(--fsc))}
  .wt5__tx i{font-size:calc(11px * var(--fsc))}

  .wl__scene{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .wl__scene::-webkit-scrollbar{height:6px}
  .wl__scene::-webkit-scrollbar-track{background:#eaf5fb}
  .wl__scene::-webkit-scrollbar-thumb{background:#c1daec;border-radius:0}
  .sc{min-width:1080px}
  .sc__lb{font-size:calc(15px * var(--fsc))}
  .sc__area{font-size:calc(15px * var(--fsc))}
  .wl__hint{display:block}
  .wl__leg{grid-template-columns:1fr 1fr;gap:12px 14px}

  .rs{padding:24px 20px 32px}
  .rs__stage{margin-top:34px}
  .rs__track{gap:10px}
  .rs__node{width:74px;padding:12px 6px 11px}
  .rs__node b{font-size:calc(11px * var(--fsc))}
  .pcm__rooms{grid-template-columns:repeat(2,1fr);gap:9px}
  .pcm__body{padding:14px}
  .pcm__panel{right:10px;left:10px;width:auto;top:46px}
  .pcm__batt-t{display:none}
  /* 縦積みになる幅では、ブロックの間にも矢印を入れて流れを示す */
  .cz__out{grid-template-columns:1fr;gap:38px}
  .cz__out li{padding:22px 22px 24px}
  .cz__out li,.cz__plus{position:relative}
  .cz__out li + li::before,.cz__plus::before{
    content:"";position:absolute;left:50%;top:-26px;transform:translateX(-50%);
    width:0;height:0;
    border-left:12px solid transparent;border-right:12px solid transparent;border-top:15px solid #b7d5ec;
  }
  .cz__plus{margin-top:38px}
  .cz__br{display:inline}
}
@media (max-width:560px){
  .wt5__it{padding:12px 10px;gap:9px}
  .wt5__i{width:40px;height:40px}
  .wt5__i svg{width:20px;height:20px}
  .wt5__tx b{font-size:calc(14px * var(--fsc))}
  .wt5__tx i{font-size:calc(10.5px * var(--fsc));letter-spacing:0}
}

/* ---------- 助成金（07） ---------- */
.subsidy{background:linear-gradient(180deg,#fff 0%,var(--sky2) 100%);padding:16px 0 58px}
.subsidy__box{
  background:#fff;border:1px solid #c7dbe9;border-top:3px solid var(--accent);
  padding:36px 42px 38px;box-shadow:0 8px 30px rgba(15,41,101,.09);
  display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:0 28px;align-items:center;
}
.subsidy__ico{
  width:58px;height:58px;background:var(--sky);display:grid;place-items:center;align-self:start;margin-top:3px;
}
.subsidy__ico svg{width:31px;height:31px;fill:var(--accent)}
.subsidy__k{
  display:block;font-size:calc(11px * var(--fsc));font-weight:500;letter-spacing:.24em;color:var(--blue);margin-bottom:10px;
}
.subsidy__box h2{font-size:calc(clamp(20px,2.5vw,26px) * var(--fsc));color:var(--navy);margin-bottom:12px;line-height:1.55}
.subsidy__box p{font-size:calc(14px * var(--fsc));color:var(--gray);line-height:1.95}
.subsidy__box .disc{margin-top:13px;font-size:calc(11.5px * var(--fsc));color:var(--gray-l);line-height:1.7}
.subsidy__box .btn{white-space:nowrap}

/* ---------- FAQ（08：LLMO想定） ---------- */
.faq__list{margin-inline:auto;background:#fff;border:1px solid var(--line);border-top:2px solid var(--navy)}
.faq__item{background:#fff;overflow:hidden}
.faq__item + .faq__item{border-top:1px solid var(--line)}
.faq__q{
  display:flex;gap:14px;align-items:flex-start;width:100%;background:none;border:0;cursor:pointer;
  padding:21px 24px;text-align:left;font-family:inherit;font-size:calc(16px * var(--fsc));font-weight:700;color:var(--navy);line-height:1.65;
}
.faq__q .mk{
  width:24px;height:24px;flex-shrink:0;border-radius:0;background:var(--sky);color:var(--blue);
  display:grid;place-items:center;font-size:calc(13px * var(--fsc));font-weight:700;margin-top:1px;
}
.faq__q .tg{margin-left:auto;flex-shrink:0;width:18px;height:18px;position:relative;margin-top:5px}
.faq__q .tg::before,.faq__q .tg::after{content:"";position:absolute;background:var(--blue);border-radius:0;transition:transform .28s var(--ease)}
.faq__q .tg::before{left:0;top:8px;width:18px;height:2px}
.faq__q .tg::after{left:8px;top:0;width:2px;height:18px}
.faq__item.is-open .faq__q .tg::after{transform:rotate(90deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 24px 24px 62px;max-width:960px;font-size:calc(14px * var(--fsc));color:var(--gray);line-height:2}
.faq__a p+p{padding-top:0}
.faq__a b{color:var(--navy)}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:#fff;padding:68px 0;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:auto -10% -60% auto;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(122,177,235,.28),transparent 62%);
}
.cta__in{position:relative;text-align:center}
.cta h2{font-size:calc(clamp(23px,3vw,32px) * var(--fsc));line-height:1.6;margin-bottom:18px}
.cta p{font-size:calc(15.5px * var(--fsc));color:#c3e1f5;line-height:2;margin-bottom:5px}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta__sub{margin-top:28px;font-size:calc(13px * var(--fsc));color:#9ac6ed}
.cta__tel{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);font-size:calc(14px * var(--fsc));color:#c3e1f5}
.cta__tel a{color:inherit;text-decoration:none}
.cta__tel b{font-size:calc(26px * var(--fsc));color:#fff;letter-spacing:.03em;margin-left:10px}
.cta__hours{margin-top:6px;font-size:calc(12.5px * var(--fsc));color:#9ac6ed;letter-spacing:.02em}

/* ---------- フッター ---------- */
.ft{background:#0a1c4a;color:#9ac6ed;padding:46px 0 30px;font-size:calc(13px * var(--fsc))}
.ft__in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.ft__logo img{width:150px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:12px}
.ft__nav{display:flex;gap:26px;flex-wrap:wrap}
.ft__nav a{color:#9ac6ed}
.ft__nav a:hover{color:#fff}
.ft__cp{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:calc(11.5px * var(--fsc));color:#6c8acb}
.ft__brand{width:26px;height:3px;background:var(--brand);border-radius:0;margin-bottom:14px}
/* SPは横並びのリンクが不揃いに折り返すので、2列のリストにしてタップ領域も確保する */
@media (max-width:640px){
  .ft{padding:34px 0 24px;text-align:center}
  .ft__in{display:block}
  .ft__logo img{width:132px;margin:0 auto 9px}
  .ft__logo p{margin:0;font-size:calc(12px * var(--fsc));line-height:1.7}
  .ft__nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
    margin-top:22px;border-top:1px solid rgba(255,255,255,.12);
  }
  .ft__nav a{
    display:flex;align-items:center;justify-content:center;min-height:46px;padding:6px 8px;
    font-size:calc(12.5px * var(--fsc));line-height:1.5;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .ft__nav a:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .ft__nav a:last-child{grid-column:1/-1;border-right:0}
  .ft__cp{margin-top:18px;padding-top:0;border-top:0;font-size:calc(11px * var(--fsc))}
}

/* ---------- 追従CTA（モバイル） ---------- */
/* ページ全体の文字を大きくした（--fsc）ぶん、この帯だけ縦に伸びて
   画面を塞いでしまうので、ここは以前の倍率（.92）に戻す */
.sticky{
  --fsc:.92;
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:9px;padding:10px 12px;
  background:#fff;border-top:1px solid var(--line);
}
.sticky .btn{flex:1;padding:14px 8px;font-size:calc(14px * var(--fsc));border-radius:0}
.sticky__tel{gap:7px;padding:9px 8px}
.sticky__tel .btn__ico{width:16px;height:16px;flex-shrink:0}
.sticky__tel span{display:block;line-height:1.25;text-align:left}
.sticky__tel b{display:block;font-size:calc(17px * var(--fsc));font-weight:700;letter-spacing:.01em;white-space:nowrap}
.sticky__tel i{display:block;margin-top:2px;font-size:calc(9.5px * var(--fsc));font-style:normal;font-weight:700;color:var(--gray-l);white-space:nowrap}

.js-step{opacity:0;transform:translateY(26px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js-step.is-in{opacity:1;transform:none}
.js-rise{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

@media (max-width:1180px){
  .hd__nav{display:none}
  .hd__tel{margin-left:auto}
  .hd__burger{display:flex}
  .hd__in{gap:18px}
}

@media (max-width:1080px){
  .models{grid-template-columns:repeat(2,1fr)}
  .model__use{font-size:calc(13.5px * var(--fsc));min-height:calc(13.5px * 1.5 * 2 + 24px)}
  .st4{grid-template-columns:repeat(2,1fr);gap:30px 26px}
  .st4__i:nth-child(2)::after{display:none}
  .st4__f{height:200px}
  .st4__f img{max-height:168px}
  .st4__f--ph img{height:200px}
  .pick{grid-template-columns:1fr 320px;gap:32px}
  .devs__l{grid-template-columns:repeat(3,1fr)}
  .hc__voice ul{gap:12px}
}

@media (max-width:900px){
  .pick{grid-template-columns:1fr;gap:34px}
  .pick__l li{grid-template-columns:1fr;gap:4px}
  .hc__hd{grid-template-columns:1fr}
  .hc__ph{min-height:0}
  .hc__ph img{height:220px}
  /* 02の白いパネルと03の紺のパネルをすき間なくつなげる */
  .hc__chs{grid-template-columns:1fr;margin-bottom:0}
  .hc__big{grid-template-columns:1fr}
  .hc__big-ph{min-height:220px}
  .hc__big-ph img{height:240px}
  .hc__voice ul{grid-template-columns:1fr;gap:10px}
  /* SPでは見出しとの区切り線を出さない（上の余白はそのまま残す） */
  .ans__qa{border-top:0; margin:0;}
}

@media (max-width:860px){
  body{font-size:calc(15px * var(--fsc))}
  .hd__tel{display:none}
  .hd__cta{display:none}
  .hd__burger{margin-left:auto;margin-right:-8px}
  .sec{padding:50px 0}
  .sec-head{margin-bottom:30px}
  .issue__grid,.subsidy__box{grid-template-columns:1fr}
  .issue__i{width:40px;height:40px}
  .issue__i svg{width:22px;height:22px}
  .ans__t{font-size:calc(16px * var(--fsc));gap:9px;padding-bottom:11px}
  .ans__ti{width:22px;height:22px;padding:4px}
  .ans__a{padding-left:31px;margin-top:11px}
  .ans__qa{grid-template-columns:1fr}
  .subsidy__ico{justify-self:center;margin:0 auto 18px}
  .subsidy__box{padding:26px 24px;text-align:center}
  .ans__box{padding:32px 22px 34px}
  .ans__qa-t{font-size:calc(13.5px * var(--fsc))}
  .nostop__row{flex-direction:column;align-items:stretch;gap:8px}
  .nostop__k{flex:none;text-align:left}
  .nostop__k br{display:none}
  .nostop__bar{height:auto;min-height:46px}
  .nostop__bar .seg{font-size:calc(10.5px * var(--fsc));padding:8px 6px;line-height:1.45}
  .nostop__axis{margin-left:0}
  /* min-width:0 がないと、下のタグの281pxが最小幅として効いてしまい、
     狭い端末で枠ごと画面からはみ出す */
  .hc__meta{padding:26px 24px;min-width:0}
  /* 事例のタグは4つ。折り返し任せだと3つ＋1つの不ぞろいな2行になるので、
     2列×2行に固定して枠の大きさもそろえる。
     max-width は、281pxを取れない狭い端末ではみ出させないための保険 */
  .hc__tag{display:grid;grid-template-columns:1fr 1fr;width:281px;max-width:100%}
  .hc__tag li{display:grid;place-items:center;text-align:center}
  .hc__ch{padding:26px 24px 28px}
  .hc__voice{padding:26px 22px 24px}
  .hc__cred{gap:10px;margin-top:16px}
  /* 氏名が2行に回る幅では、行の高さに合わせて伸びるラベルが縦長の楕円に
     なってしまうので、角丸の四角に切り替える */
  .hc__by{gap:10px}
  .hc__by-l{border-radius:var(--r-part);padding:5px 11px}
  .hc__by-n{font-size:calc(14px * var(--fsc))}
  .mhlw{padding:26px 22px 24px}
  .mhlw__t,.hc__voice-t{font-size:calc(17px * var(--fsc));line-height:1.65}
  .mhlw__d{font-size:calc(13.5px * var(--fsc))}
  .mhlw__nums{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .mhlw__nums li{padding:15px 16px}
  .mhlw__nv b{font-size:calc(23px * var(--fsc))}
  .hc__voice figure img{height:250px}
  .faq__q{font-size:calc(15px * var(--fsc));padding:17px 18px}
  .faq__a p{padding:0 18px 20px 56px;font-size:calc(13.5px * var(--fsc))}
  .sticky{display:flex}
  body{padding-bottom:72px}
  .js-step{transform:translateY(18px)}
  .js-step.is-in{transform:none}
}

@media (max-width:760px){
  .st4{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .st4__i{
    display:grid;grid-template-columns:112px minmax(0,1fr);
    grid-template-areas:"fig no" "fig h" "fig p";
    column-gap:20px;align-content:center;text-align:left;
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .st4__i::after{display:none}
  .st4__no{grid-area:no;margin-bottom:6px;align-self:end}
  .st4__f{grid-area:fig;height:112px;margin:0;align-self:center}
  .st4__f img{max-height:94px}
  .st4__f--ph img{height:112px}
  .st4__i h3{grid-area:h;font-size:calc(16px * var(--fsc));margin-bottom:7px}
  .st4__i p{grid-area:p;font-size:calc(12.5px * var(--fsc))}
  .devs__l{grid-template-columns:repeat(2,1fr)}
  .devs__l li:last-child{grid-column:1 / -1}
  .ph{width:240px}
  .pcm__panel{position:static;width:auto;opacity:1;visibility:visible;transform:none;margin-top:14px;box-shadow:none}
  .pcm__panel::before{display:none}
  .pcm__body{min-height:0}
  .cz__mid{flex-direction:column;gap:10px}
}

@media (max-width:520px){
  /* 4つとも一度に目に入るよう2列×2行に並べる。
     横スクロールにすると縦は短くなるが、2枚目以降が初期表示で隠れてしまう */
  .model{border-top:4px solid var(--m)}
  /* 1枚あたり約170pxしかないので、吹き出し・見出し・本文を一段ずつ小さくする */
  /* 吹き出しはHTMLの<br>を無視して幅で折り返す（2列だと<br>の位置が合わない）。
     4つとも3行ぶんの高さにそろえて、下の製品画像と見出しの位置を横一列にそろえる */
  .model__use{
    margin:12px 10px 18px;padding:9px 8px;
    font-size:calc(12px * var(--fsc));line-height:1.5;
    min-height:calc(12px * var(--fsc) * 1.5 * 3 + 18px);
    word-break:auto-phrase;
  }
  .model__use br{display:none}
  .model figure{padding:0 10px}
  .model .bd{padding:14px 12px 16px}
  .model h3{font-size:calc(14px * var(--fsc))}
  .model h3 span{font-size:calc(19px * var(--fsc))}
  .model .bd > p{font-size:calc(11.5px * var(--fsc));line-height:1.75}
  .model .bd > p:last-of-type{margin-bottom:14px}
  .model__more{padding:9px 6px;font-size:calc(12px * var(--fsc))}
  .model--rec::after{border-radius:var(--r-panel)}
  .hd__logo img{width:112px}
  .hd__logo span{display:none}
  .hd__cta{padding:10px 14px;font-size:calc(12.5px * var(--fsc))}
  .btn{width:100%}
  .hc__q{padding:20px 20px}
  .devs__l{grid-template-columns:1fr}
  .devs__l li:last-child{grid-column:auto}
}

/* =========================================================
   メインビジュアル
   ========================================================= */
/* 高さは固定。1em=10px（1180px以上）を基準に、ビジュアルもコピーも同じ比率でロックする */
/* 1em = 画面幅/132.83。ビジュアルとコピーが常に同じ比率で拡大縮小する */
/* この font-size は文字サイズではなく、背景画像に合わせた 1em＝画像10px の基準単位（--fsc の対象外） */
.fv{position:relative;padding-top:73px;background:#f4f9fd;font-size:.7529vw}
.fv__stage{
  /* 高さは背景画像（1953×1067）と同じ比率。ここを変えると画像が上下で切れるので、
     132.83em（＝画面幅）× 1067/1953 = 72.57em を保つこと */
  position:relative;height:72.57em;overflow:hidden;background:#fafdff;
  container-type:inline-size;
}

/* MV下部の「一本化」帯：ビジュアル内のテキストをHTMLで表示 */
.fvb{
  position:absolute;z-index:2;color:#0f2965;
  left:7.94%;right:7.94%;top:64.67%;bottom:5.15%;
  display:flex;flex-direction:column;justify-content:center;
}
.fvb__t{
  text-align:center;font-weight:900;letter-spacing:.01em;line-height:1.3;
  font-size:calc(2.1cqw * var(--fsc));line-height:1.24;color:#12306b;
}
.fvb__t em{
  font-style:normal;color:#0b32ad;
  box-shadow:inset 0 -.16em 0 rgba(122,190,240,.6);
}
.fvb__list{
  /* 連結線と矢尻の位置を計算するための基準値 */
  --fvb-pad:.8cqw;--fvb-gap:2.7cqw;--fvb-ico:3.4cqw;
  --fvb-col:calc((100% - var(--fvb-pad) * 2 - var(--fvb-gap) * 3) / 4);
  position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:1.9cqw 0 0;padding:0 var(--fvb-pad);list-style:none;column-gap:var(--fvb-gap);
}
/* 4つのアイコンを貫く1本の細線。両端はアイコンの中心で止め、円の白地が線を隠す */
.fvb__list::before{
  content:"";position:absolute;z-index:0;
  top:calc(var(--fvb-ico) / 2);translate:0 -50%;
  left:calc(var(--fvb-pad) + var(--fvb-col) / 2);
  right:calc(var(--fvb-pad) + var(--fvb-col) / 2);
  height:.1cqw;background:#8fd0f4;
}
.fvb__list li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.fvb__i{
  display:grid;place-items:center;width:var(--fvb-ico);height:var(--fvb-ico);border-radius:50%;
  border:.13cqw solid #7cc6f2;background:#fff;
}
.fvb__i svg{width:1.95cqw;height:1.95cqw;fill:#1a66e5}
.fvb__list b{margin-top:.7cqw;font-size:calc(1.33cqw * var(--fsc));font-weight:700;line-height:1.45;color:#0c1a89}
.fvb__d{margin-top:.42cqw;font-size:calc(.9cqw * var(--fsc));line-height:1.45;color:#4f5b7e}
/* 線の中央に置く矢尻 */
.fvb__list li + li::before{
  content:"";position:absolute;
  top:calc(var(--fvb-ico) / 2);left:calc(var(--fvb-gap) / -2);translate:-50% -50%;
  width:0;height:0;border-style:solid;
  border-width:.42cqw 0 .42cqw .62cqw;
  border-color:transparent transparent transparent #56b3ee;
}
/* 以前はビジュアルに手書き文字で焼き込まれていたキャッチ。
   文字なしの画像に差し替わったので、同じ位置にHTMLのテキストで置き直す */
.fvt{
  position:absolute;z-index:2;right:8.2%;top:6%;margin:0;
  text-align:right;color:#12306b;font-weight:700;letter-spacing:.02em;line-height:1.52;
  font-size:calc(1.92cqw * var(--fsc));
}
.fvt span{display:block}
.fvt em{font-style:normal;color:#0b7fd4;box-shadow:inset 0 -.16em 0 rgba(122,190,240,.65)}
.fvt__br{display:none}

.fv__bg{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}

/* コピーはビジュアル上に実テキストで重ねる（ビジュアル内の座標に合わせて可変） */
.fv__in{
  position:absolute;z-index:2;top:73px;left:50%;transform:translateX(-50%);
  width:132.83em;height:64em;
  /* ビジュアル全面を覆う透明レイヤーなので、下の .fvb を選択・検証できるよう素通しにする */
  pointer-events:none;
}
/* コピーはビジュアルの構図に合わせる */
.fv__copy{position:absolute;top:9.15%;left:9%;width:fit-content;pointer-events:auto}
.fv__eyebrow .br-sp2{display:none}
.fv__eyebrow{font-size:1.12em;font-weight:700;letter-spacing:.04em;line-height:1.5;color:#22348c}
.fv h1{margin:0;font-size:1em}
.fv__brand{
  display:block;margin-top:.12em;
  font-size:4.1em;font-weight:900;line-height:1.04;
  letter-spacing:.01em;color:#0b32ad;
  font-feature-settings:"palt";
}
.fv__main{
  display:block;width:fit-content;margin-top:.19em;
  font-size:5.3em;font-weight:900;line-height:1.2;
  letter-spacing:-.01em;color:#0f2965;font-feature-settings:"palt";
}
.fv__main em{
  font-style:normal;
  background:linear-gradient(95deg,#1f9cf0 0%,#0fbfb0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fv__lead .br-pc{display:inline}
.fv__lead{
  width:0;min-width:100%;
  margin-top:.95em;
  font-size:1.45em;font-weight:500;line-height:1.62;
  letter-spacing:.01em;color:#434c81;
}
.fv__btns{display:flex;flex-wrap:wrap;align-items:center;gap:1.5em;margin-top:1.6em}
.fv__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.9em;
  /* 幅はコピー段（.fv__copy は fit-content＝見出しの幅）にそろえる */
  width:100%;min-width:15em;padding:0.5em 1em;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#1787f8 0%,#00b0f4 100%);
  box-shadow:0 6px 10px rgba(14,80,200,.26);
  font-size:2em;font-weight:700;letter-spacing:.03em;color:#fff;
  transition:box-shadow .2s,transform .2s,filter .2s;
}
/* 本のアイコンはSPのCTAだけで使う */
.fv__bk{display:none;flex:none;fill:currentColor}
.fv__arw{
  flex:none;width:1.6em;height:.74em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;
}
.fv__cta:hover{filter:brightness(1.05);box-shadow:0 14px 30px rgba(14,80,200,.34);transform:translateY(-2px)}
.fv__cta:hover .fv__arw{transform:translateX(4px)}

/* 一本化の図：PCはビジュアルに焼き込み済みのため非表示、SPのみHTMLで表示 */
.fvd{display:none}
.fvd{
  align-items:center;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(24px,2.8vw,34px);
}
.fvd__src{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  list-style:none;margin:0;padding:0;
}
.fvd__src li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:76px;padding:12px 5px 13px;
  background:rgba(255,255,255,.94);border:1px solid #cee3f1;
  font-size:calc(12px * var(--fsc));font-weight:700;line-height:1.4;color:#0f2965;letter-spacing:.02em;text-align:center;
}
.fvd__i{display:block;width:20px;height:20px}
.fvd__i svg{width:100%;height:100%;fill:#1a66e5}
.fvd__arw{
  flex:0 0 auto;width:0;height:0;
  border-left:13px solid #1a66e5;border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.fvd__hub{
  flex:0 0 auto;background:rgba(255,255,255,.95);border:1px solid #cee3f1;
  box-shadow:0 10px 26px rgba(15,41,101,.08);
}
.fvd__hub-t{
  display:flex;align-items:baseline;gap:12px;
  background:#0f2965;color:#fff;padding:9px 16px 10px;
}
.fvd__hub-t b{font-size:calc(15px * var(--fsc));letter-spacing:.08em}
.fvd__hub-t span{font-size:calc(11.5px * var(--fsc));color:#b6d8f2;letter-spacing:.02em}
.fvd__prod{display:flex;gap:6px;list-style:none;margin:0;padding:11px 14px 12px}
.fvd__prod li{display:flex;flex-direction:column;align-items:center;gap:6px;width:78px}
.fvd__prod img{display:block;width:auto;height:54px;object-fit:contain}
.fvd__prod span{font-size:calc(10px * var(--fsc));font-weight:700;line-height:1.35;color:#5a6686;text-align:center;letter-spacing:-.01em}
.fvd__prod li:last-child{width:84px}
.fvd__prod em{
  display:inline-block;margin-top:4px;padding:1px 6px 2px;
  font-style:normal;font-size:calc(8.5px * var(--fsc));letter-spacing:.06em;
  color:#1a66e5;background:#eaf8ff;border:1px solid #cee3f1;
}

@media (max-width:1080px){
  .fvd{gap:12px}
  .fvd__src li{min-height:70px;font-size:calc(11.5px * var(--fsc));padding:10px 4px 11px}
  .fvd__prod li{width:70px}
  .fvd__prod img{height:48px}
  .fvd__prod span{font-size:calc(9.5px * var(--fsc))}
}
@media (max-width:900px){
  /* SPはコピーをHTMLで先に置き、その下にビジュアル（一本化の図まで含む1枚）を敷く */
  .fv{
    display:flex;flex-direction:column;font-size:calc(16px * var(--fsc));
    background:linear-gradient(180deg,#fbfdff 0%,#eef6fc 62%,#e9f4fb 100%) no-repeat top/100% 470px;
  }
  .fv__in{
    order:1;position:static;transform:none;width:min(100% - 40px,var(--wrap-w));height:auto;
    margin-inline:auto;padding:clamp(16px,3.6vw,26px) 0 clamp(18px,3.8vw,28px);
  }
  .fv__stage{order:2;height:auto;background:none}
  .cta__tel{font-size:calc(13px * var(--fsc))}
  .cta__tel a{display:block}
  .cta__tel b{display:block;margin:6px 0 0;font-size:calc(24px * var(--fsc))}
  /* SPビジュアル内の白カードに合わせて配置 */
  .fvb{
    top:51.6%;bottom:3.8%;left:3.8%;right:3.8%;
    display:flex;flex-direction:column;padding:1.3cqw 2.6cqw 1cqw;
  }
  .fvb__t{font-size:calc(max(18px,4.2cqw) * var(--fsc));line-height:1.28}
  .fvb__list{
    flex:1;grid-template-columns:1fr;align-content:space-between;
    margin:13px 0 0;padding:0;
  }
  .fvb__list li{
    display:grid;grid-template-columns:max(34px,10.6cqw) 1fr;
    align-items:center;column-gap:max(10px,3cqw);text-align:left;
  }
  .fvb__i{
    position:relative;z-index:1;
    grid-row:span 2;width:var(--fvb-ico);height:var(--fvb-ico);
    border-width:max(1px,.3cqw);
  }
  .fvb__i svg{width:52%;height:52%}
  .fvb__list b{margin:0;align-self:end;font-size:calc(max(12.5px,3.1cqw) * var(--fsc));line-height:1.22}
  .fvb__d{margin-top:max(1px,.3cqw);align-self:start;font-size:calc(max(10.5px,2.4cqw) * var(--fsc));line-height:1.38}
  /* 縦線は先頭アイコンの中心から末尾アイコンの中心まで。円の白地が線を隠すので、見た目は円の縁から縁までつながる */
  .fvb__list{
    --fvb-ico:max(34px,10.6cqw);
    --fvb-arw-w:max(12px,3.4cqw);
    --fvb-arw-h:max(7px,2cqw);
    isolation:isolate;
  }
  .fvb__list li{position:static}
  .fvb__list::before{
    display:block;z-index:-1;
    top:calc(var(--fvb-ico) / 2);bottom:calc(var(--fvb-ico) / 2);
    left:calc(var(--fvb-ico) / 2);right:auto;
    width:max(1px,.3cqw);height:auto;translate:-50% 0;
    background:#8fd0f4;
  }
  .fvb__list li + li::before,
  .fvb__list li + li .fvb__i::before,
  .fvb__list li + li .fvb__i::after{content:none}
  .fvb__list li + li::after{
    content:"";position:absolute;z-index:1;
    left:calc(var(--fvb-ico) / 2);translate:-50% -50%;
    width:0;height:0;border-style:solid;
    border-width:var(--fvb-arw-h) calc(var(--fvb-arw-w) / 2) 0;
    border-color:#56b3ee transparent transparent;
  }
  .fvb__list li:nth-child(2)::after{top:calc(16.666% + var(--fvb-ico) / 3)}
  .fvb__list li:nth-child(3)::after{top:50%}
  .fvb__list li:nth-child(4)::after{top:calc(83.333% - var(--fvb-ico) / 3)}
  @media (max-width:365px){
    /* カード内に収めるため最小サイズを下げる */
    .fvb{padding:1cqw 2cqw .8cqw}
    .fvb__t{font-size:calc(max(12.5px,4.2cqw) * var(--fsc))}
    .fvb__list b{font-size:calc(max(11px,3.1cqw) * var(--fsc));line-height:1.18}
    .fvb__d{font-size:calc(max(9.2px,2.4cqw) * var(--fsc));line-height:1.3}
    .fvb__list{--fvb-ico:max(28px,10.6cqw)}
    .fvb__i{width:var(--fvb-ico);height:var(--fvb-ico)}
    .fvb__list li{grid-template-columns:max(28px,10.6cqw) 1fr}
  }
  .fv__bg{position:static;width:100%;max-width:none;height:auto;transform:none}
  .fv__stage::after{display:none}
  /* SPビジュアルの下端色（#d8f1fd）から次セクションへ繋ぐ */
  #issue.sec--pale{background:var(--sky)}
  .fv__copy{position:static;width:auto}
  .fv__eyebrow{font-size:calc(12.5px * var(--fsc))}
  .fv__brand{margin-top:6px;font-size:calc(17px * var(--fsc));}
  .fv__main{width:auto;margin-top:8px;font-size:calc(clamp(25px,6.3vw,38px) * var(--fsc));line-height:1.26;text-align-last:auto}
  .fv__lead{margin-top:13px;font-size:calc(13.5px * var(--fsc));line-height:1.85;letter-spacing:.01em}
  .fv__lead .br-pc{display:none}
  .fv__btns{gap:13px;margin-top:20px}
  .fv__cta{width:100%;max-width:340px;min-width:0;font-size:calc(15px * var(--fsc));padding:.95em 1.4em}
  /* 一本化の図はSP用ビジュアルに含まれるため、HTML側は非表示のまま */
  .fvd__src li{min-height:80px}
  .fvd__arw{
    align-self:center;margin:12px 0;
    border-left:9px solid transparent;border-right:9px solid transparent;
    border-top:12px solid #1a66e5;border-bottom:0;
  }
  .fvd__hub{display:flex;align-items:center;gap:16px;padding:0 14px 0 0}
  .fvd__hub-t{flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:3px;align-self:stretch;justify-content:center;padding:14px 18px}
  .fvd__prod{flex:1 1 auto;justify-content:space-between;gap:8px;padding:12px 0}
  .fvd__prod li{width:auto;flex:1 1 0}
  .fvd__prod img{height:58px}
}
/* 900px以下はコピーをビジュアルの左の空きに重ねるSP構成（1em＝画像の10px相当で等比に拡大縮小） */
@media (max-width:900px){
  /* こちらも基準単位。縮めるとコピーが背景画像とずれる。
     padding-top は使わない。Safariは padding のある箱の absolute を、
     padding の内側を起点に top を足すため、top:63px と重なるとCTAが
     63px下がって「バラバラだった情報」に重なる。余白はステージの margin に置く */
  .fv{display:flow-root;position:relative;font-size:1.0627vw;background:#fff;padding-top:0}
  /* 画像は幅100%・高さ自動。枠に合わせて引き伸ばさない */
  .fv__stage{position:relative;overflow:visible;margin-top:63px;height:auto}
  .fv__bg{display:block;position:static;width:100%;max-width:none;height:auto;margin-top:0;object-fit:contain}
  /* 高さは vw ではなく親に対する％で取る。vw はスクロールバーの幅を含むので、
     バーが出るブラウザだと画像の高さ（＝幅100%で決まる）より少し高くなり、
     中の％指定がぜんぶ下にずれてCTAが白い枠に差し掛かる */
  .fv__in{position:absolute;z-index:2;left:0;top:63px;width:100%;height:calc(100% - 63px);padding:0;margin:0}
  /* コピー段は画面幅の48%。CTAはその外まで広げ、画面幅の89.2%にする。
     89.2 ÷ 48 = 185.833%。変数の割り算（calc(var() / var())）は Safari が
     無効にしてボタン幅がコピー段のままになり、ラベルが折返して帯に重なる */
  /* top を上げ、ボタンの下端を白い枠（画像の縦 833/1725）より上で止める。
     見出し・リード・ボタンの間隔と、ボタンの文字サイズ 4em はそのまま */
  /* 上ではなく下を基準に置く。フォントが変わってリードが1行増えても、
     下へは伸びずに上へ伸びるので、ボタンの下端は動かず白い枠に差し掛からない。
     54.69% は、これまでのボタン下端の位置（上から45.31%）の裏返し */
  .fv__copy{position:absolute;left:5.4%;top:auto;bottom:53.8%;width:48%}
  /* SPは右上の空きが狭いので、PCの2行をPSDと同じ3行に分けて置く */
  .fvt{right:3%;top:2%;font-size:3.02em;line-height:1.62}
  .fvt__br{display:inline}
  .fv__eyebrow{font-size:2.29em;line-height:1.36;letter-spacing:0}
  .fv__eyebrow .br-sp2{display:inline}
  .fv__brand{margin-top:.5em;font-size:4.73em;line-height:1.04}
  .fv__main{margin-top:.4em;font-size:6em;line-height:1.14}
  /* 助詞（の・を）は一段小さく、結びの「もっと広く。」は一段大きくして強弱をつける */
  .fv__j{font-size:.82em}
  .fv__main em{font-size:1.4em}
  /* リードだけコピー段より少し狭くして、背景の製品画像に当たらないようにする。
     これ以上狭めると5行になり、下の白パネルに当たる */
  /* 背景写真の上に乗るぶん、本文よりさらに一段太くする */
  .fv__lead{width:94%;min-width:0;margin-top:1.15em;font-size:2.45em;font-weight:600;line-height:1.6;letter-spacing:0}
  .fv__lead br{display:none}
  .fv__btns{gap:0;margin-top:2.75em;width:185.833%}
  /* 添付レイアウトに合わせ、アイコン＝左端／文字＝中央／矢印＝右端。
     nowrap は Safari がラベルを2行にしてボタンが下の帯へ落ちるのを防ぐ。文字サイズは変えない */
  .fv__cta{width:100%;max-width:none;min-width:0;font-size:4em;line-height:1.35;padding:.54em 1.1em;gap:0}
  .fv__bk{display:block;width:1.6em;height:1.6em}
  .fv__cta-t{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap}
  .fv__arw{width:1.3em;height:.6em}
}
/* スマホだけリードを大きくする。601px以上は見出しが4行になって上の余白を
   使い切るので、ここは元のサイズのまま */
@media (max-width:600px){
  .fv__lead{font-size:2.75em}
}

@media (max-width:760px){
  .fvd__src{gap:6px}
  .fvd__src li{min-height:72px;padding:11px 3px 12px;font-size:calc(10.5px * var(--fsc));gap:6px}
  .fvd__i{width:18px;height:18px}
  .fvd__hub{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .fvd__hub-t{flex-direction:row;align-items:baseline;gap:10px;padding:10px 14px 11px}
  .fvd__prod{padding:12px 10px 13px;gap:6px}
  .fvd__prod img{height:50px}
  .fvd__prod span{font-size:calc(9.5px * var(--fsc))}
}

/* ---- ANSWERの図・回答のレスポンシブ ---- */
@media (max-width:1080px){
  .cw__n{flex:0 0 120px;font-size:calc(11px * var(--fsc))}
  .cw__n img{height:38px}
  .cw__ln{min-width:48px}
  .cw__ln em{font-size:calc(10px * var(--fsc));padding:4px 7px}
}
@media (max-width:900px){
  .cw__r{grid-template-columns:96px 1fr;gap:0 14px}
  .cw__k{font-size:calc(11px * var(--fsc));padding:8px 6px}
  .cw__n{flex:0 0 96px;font-size:calc(10.5px * var(--fsc));padding:11px 4px 12px;gap:6px}
  .cw__n img{height:34px}
  .cw__ln{min-width:36px}
  .cw__ln em{font-size:calc(9.5px * var(--fsc));padding:3px 5px}
  .cw__s{font-size:calc(12px * var(--fsc))}
}
@media (max-width:620px){
  .cw__r{grid-template-columns:1fr}
  .cw__k{justify-self:start;margin-bottom:14px;padding:7px 14px}
  .cw__k span{display:inline;margin-left:8px}
  .cw__ch{flex-direction:column;max-width:none}
  .cw__n{flex:0 0 auto;width:100%;flex-direction:row;gap:12px;padding:12px 10px;font-size:calc(12px * var(--fsc))}
  .cw__n br{display:none}
  .cw__n img{height:32px}
  .cw__ln{width:100%;min-height:56px}
  .cw__ln::before{left:50%;right:auto;top:0;bottom:0;transform:translateX(-50%)}
  .cw__ln--wire::before{width:7px;height:100%;background:repeating-linear-gradient(180deg,#c98f4a 0 9px,#e6c19a 9px 15px)}
  .cw__ln--air::before{width:0;height:100%;border-top:0;border-left:2px dashed #9dc9f0}
  .cw__s{grid-column:1;margin-top:14px}
  .ans__qa li{padding:18px 18px 19px}
}

/* ========== SP：ONE SYSTEMの3点を3段に分ける ==========
   01・02／ココヘルパ／03 の3段。縦に3枚並べるより1枚ぶん短くなる。
   DOM上はココヘルパが最後にあるので、置き場所は grid-area で指定している */
@media (max-width:900px){
  .ofl{grid-template-columns:1fr 1fr}
  .ofl__i--a{grid-area:1 / 1}
  .ofl__i--b{grid-area:1 / 2}
  .ofl__hub{grid-area:2 / 1 / 3 / 3}
  /* 3枚目は下の段をまるごと使う（01→02→03と時計回りに一周して01に戻る）。
     カードの中身は下の .ofl__i の指定より後ろでまとめて上書きしている */
  .ofl__i--d{grid-area:3 / 1 / 4 / 3}
  /* 横幅が半分になるので、文章の右にあった製品画像は下に積む */
  .ofl__i{grid-template-columns:1fr;align-content:start;padding:14px 13px 13px}
  /* 製品画像は文章の下に回るぶん、そのまま置くとカードが縦に伸びて
     4分割にした意味がなくなる。枠を細くして画像ごと小さくする
     （画像の大きさは .ofl__m の幅に対する％で決まっている） */
  .ofl__m{grid-area:auto;width:62%;margin:10px auto 0}
  /* 番号を上、見出しをその下に置く。見出しがカード幅をまるごと使えるので、
     「病室の様子が見える」も横に並べていたときより大きな字で1行に収まる */
  .ofl__t{
    flex-direction:column;align-items:flex-start;gap:7px;
    font-size:calc(clamp(17px,3.4vw,13.5px) * var(--fsc));line-height:1.4;word-break:auto-phrase;
  }
  .ofl__no{width:24px;height:24px;margin-right:0;font-size:calc(13px * var(--fsc))}
  /* 見出しが左端から始まるので、下の線も左端にそろえる */
  .ofl__bar{width:32px;margin-left:0}
  /* 幅が狭いので、HTMLの<br>は使わず幅で折り返す */
  .ofl__d{font-size:calc(12px * var(--fsc));line-height:1.7}
  .ofl__d br{display:none}
  /* 3枚目だけは段をまるごと使って横長になるので、文章の右に画像を戻す */
  .ofl__i--d{grid-template-columns:1fr clamp(96px,26vw,132px);
    column-gap:clamp(10px,2.5vw,18px);align-items:center;padding:14px 16px}
  .ofl__i--d .ofl__m{grid-area:1 / 2 / 4 / 3;width:100%;margin:0}

  /* PCと同じ「点線の輪＋矢尻」をSPの箱の形に合わせ直したもの。
     輪は4枚のカードとココヘルパの円の後ろを通るので、
     見えるのは上下の列のすき間と、円の左右のわきの4区間だけになる。
     --ofl-ring は輪の上下の食い込み量。矢印もこの値で位置をそろえる */
  /* 列のすき間は、輪の点線と矢尻が並んで入る幅を確保する */
  .ofl{--ofl-ring:64px;position:relative;column-gap:clamp(26px,8.6vw,34px)}
  .ofl::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    inset:var(--ofl-ring) 0;
    border:2px dashed #8fd0f4;border-radius:50%;
  }
  /* カードと円は白地なので、重なり順を上げるだけで輪が隠れる */
  .ofl__i,.ofl__hub{z-index:1}
  .ofl__i{position:relative}
  .ofl__i::after{
    content:"";position:absolute;z-index:2;
    width:0;height:0;border-style:solid;border-color:transparent;
  }
  /* 01→02：輪のいちばん上、列のすき間を右へ */
  .ofl__i--a::after{top:var(--ofl-ring);right:-22px;margin-top:-7px;border-width:7px 0 7px 10px;border-left-color:#3f9be8}
  /* 02→03：円の右わきを下へ */
  .ofl__i--b::after{right:-6px;top:calc(100% + 166px);border-width:10px 7px 0;border-top-color:#3f9be8}
  /* 03→01：円の左わきを上へ */
  .ofl__i--d::after{left:-6px;bottom:calc(100% + 166px);border-width:0 7px 10px;border-bottom-color:#3f9be8}
}