/* 右下のポップアップ（装置の特設ページへの案内）
   どのページにも置ける独立した部品。色はサイトと同じ（ネイビーの面＋白い輪郭）。
   影は使わず、白い輪郭（3px）で、白・ネイビーどちらの地の上でも浮かせる（押せる番号と同じ扱い：デザインルール 2-1） */
.promo{position:fixed;right:24px;bottom:24px;z-index:80;width:330px;background:#0b1a30;color:#fff;border-radius:16px;outline:3px solid #fff;overflow:hidden;opacity:0;translate:0 24px;visibility:hidden;transition:opacity .4s ease,translate .55s cubic-bezier(.2,.8,.2,1)}
.promo.is-on{opacity:1;translate:0 0;visibility:visible}
.promo-link{display:block;color:inherit;text-decoration:none}
.promo-ph{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#16304f}
.promo-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.promo-link:hover .promo-ph img{transform:scale(1.05)}
.promo-tx{display:block;padding:16px 20px 18px}
.promo-lb{display:inline-block;background:#0a4fa6;color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1.8;padding:0 10px;border-radius:4px}
.promo-h{display:block;font-family:"Noto Serif JP","Yu Mincho",serif;font-weight:900;font-size:18px;line-height:1.55;letter-spacing:.02em;margin-top:10px;white-space:nowrap}
.promo-s{display:block;font-weight:700;font-size:13px;letter-spacing:.06em;color:#9fc0ee;margin-top:6px}
.promo-go{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;background:#fff;color:#0b1a30;border-radius:999px;padding:8px 8px 8px 20px;font-weight:700;font-size:14px;letter-spacing:.06em}
.promo-go .arr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#0a4fa6;color:#fff;font-size:13px;flex:none}
.promo-link:hover .promo-go{background:#dde8f7}
.promo-x{position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0}
.promo-x::before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:#0b1a30}
.promo-x span{position:relative;color:#fff;font-size:18px;line-height:1;font-weight:700}
.promo-x:hover::before{background:#0a4fa6}
.promo-x:focus-visible,.promo-link:focus-visible,.promo-mini:focus-visible{outline:3px solid #9fc0ee;outline-offset:2px}

/* 閉じたあとの小さな呼び出しボタン */
.promo-mini{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 6px;border:0;border-radius:999px;background:#0b1a30;color:#fff;outline:3px solid #fff;font:inherit;font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer}
.promo-mini img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.promo-mini:hover{background:#0a4fa6}

/* ページの中に置く横長のバナー（技術・サービスなど） */
.promo-band{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 48px;gap:32px;align-items:center;margin-top:76px;background:#0b1a30;color:#fff;border-radius:28px;overflow:hidden;padding:0 36px 0 0;text-decoration:none}
.promo-band-ph{display:block;position:relative;align-self:stretch;min-height:240px;background:#16304f;overflow:hidden}
.promo-band-ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.promo-band:hover .promo-band-ph img{transform:scale(1.05)}
.promo-band-tx{display:block;padding:34px 0}
.promo-band-tx b{display:block;font-family:"Noto Serif JP","Yu Mincho",serif;font-weight:900;font-size:clamp(22px,2.2vw,30px);line-height:1.5;margin-top:12px}
.promo-band-tx b .nb{display:block;font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;color:#9fc0ee;margin-top:4px}
.promo-band-tx .d{display:block;font-size:15px;line-height:1.9;color:#d9e2ee;margin-top:10px}
.promo-band .arr{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#0a4fa6;color:#fff;font-size:16px}
.promo-band:hover .arr{background:#fff;color:#0a4fa6}

@media (max-width:1100px){
  .promo{width:290px}
  .promo-h{font-size:16px}
}
/* スマホ：画面下のCTAバーの上に、横長の小さなカード */
@media (max-width:640px){
  .promo{left:12px;right:12px;width:auto;bottom:calc(62px + 12px + env(safe-area-inset-bottom));border-radius:14px}
  .promo-link{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:stretch}
  .promo-ph{aspect-ratio:auto;height:100%;min-height:84px}
  .promo-tx{padding:10px 48px 12px 14px}
  .promo-lb{font-size:11px;padding:0 8px}
  .promo-h{font-size:16px;line-height:1.4;margin-top:4px;white-space:nowrap}
  .promo-h br,.promo-h .l2{display:none}
  .promo-s{font-size:12px;margin-top:2px}
  .promo-go{display:none}
  .promo-x{top:50%;right:2px;margin-top:-22px}
  .promo-mini{right:12px;bottom:calc(62px + 12px + env(safe-area-inset-bottom))}
  .promo-band{grid-template-columns:1fr;gap:0;padding:0;border-radius:22px;margin-top:56px}
  .promo-band-ph{min-height:0;aspect-ratio:16/9}
  .promo-band-tx{padding:22px 22px 8px}
  .promo-band .arr{margin:12px 22px 22px auto}
}
@media (prefers-reduced-motion:reduce){
  .promo,.promo.is-on{transition:none;translate:0 0}
}
/* display を指定した部品でも hidden 属性を効かせる（デザインルール 10） */
.promo[hidden],.promo-mini[hidden]{display:none!important}