@charset "UTF-8";
/* haivision-falkon.css ― Haivision Falkon 製品ページ（/dcms_media/other/haivision-falkon.css） */
@import url('https://use.typekit.net/lzt1fvs.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Montserrat:wght@500;600;700&display=swap');

/* ルート：画面幅いっぱい */
.hvf{width:calc(100vw - var(--hvf-sbw,0px));max-width:none;margin-left:calc(50% - (100vw - var(--hvf-sbw,0px)) / 2);margin-right:0;background:#fff;color:#333;font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
html body div.hvf:not(#hvf-x1):not(#hvf-x2){width:calc(100vw - var(--hvf-sbw,0px)) !important;max-width:none !important;margin-left:calc(50% - (100vw - var(--hvf-sbw,0px)) / 2) !important;margin-right:0 !important;margin-top:-68px !important}

/* リセット（:where で詳細度を下げる） */
.hvf :where(*,*::before,*::after){box-sizing:border-box}
.hvf :where(h1,h2,h3,p,ul,ol,li,table,th,td,hr){margin:0;padding:0;border:0;background:none;letter-spacing:normal}
.hvf :where(h1,h2,h3)::before,.hvf :where(h1,h2,h3)::after{content:none;display:none}
.hvf :where(ul,ol){list-style:none}
.hvf :where(li)::before,.hvf :where(li)::after{content:none;display:none}
.hvf :where(img){max-width:100%;height:auto;display:block}
.hvf :where(a){color:#0056a3}
.hvf :where(a:hover){color:#00427d}
.hvf :where(strong){font-weight:700}

/* レイアウト */
.hvf .hvf-inner{max-width:1200px;margin:0 auto;padding:56px 24px 64px;display:flex;flex-direction:column;gap:32px}
.hvf .hvf-rule{max-width:1152px;margin:0 auto;border-top:1px solid #c4c1b7}
.hvf .hvf-en{font-family:'gotham','Montserrat',sans-serif;font-weight:500}
.hvf .hvf-h2{font-size:28px;font-weight:700;color:#1a1a1a;line-height:1.5;text-align:center;text-wrap:pretty}

/* 製品概要：背景（グラデーション＋光の筋） */
.hvf .hvf-hero{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle 184px at 86% 16%,rgba(255,255,255,.85) 0%,rgba(200,240,255,.35) 18%,rgba(255,255,255,0) 55%),radial-gradient(ellipse 55% 85% at 76% 50%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 62%),radial-gradient(ellipse 70% 100% at 0% 100%,rgba(0,86,163,.38) 0%,rgba(0,86,163,0) 62%),radial-gradient(ellipse 55% 75% at 100% 0%,rgba(12,32,54,.38) 0%,rgba(12,32,54,0) 65%),linear-gradient(135deg,#e8f0f8 0%,#bed3e8 55%,#8fb2d4 100%)}
/* 光の線：BlueMonkeyが空要素を消すため疑似要素で描く（.hvf-fx / .hvf-fx2 は位置指定なしのラッパー） */
.hvf .hvf-hero::before,.hvf .hvf-hero::after,.hvf .hvf-fx::before,.hvf .hvf-fx::after,.hvf .hvf-fx2::before{content:"";position:absolute;z-index:0;display:block;width:240%;left:-34%;top:16%;pointer-events:none}
.hvf .hvf-hero::before{height:60px;margin-top:-30px;transform:rotate(-16deg);background:linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 80%);filter:blur(14px)}
.hvf .hvf-hero::after{height:2px;margin-top:-1px;transform:rotate(-16deg);background:linear-gradient(90deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 75%);box-shadow:0 0 12px rgba(255,255,255,.8)}
.hvf .hvf-fx::before{height:2px;margin-top:-1px;transform:rotate(22deg);background:linear-gradient(90deg,rgba(64,224,255,0) 25%,rgba(64,224,255,.95) 50%,rgba(64,224,255,0) 75%);box-shadow:0 0 14px rgba(64,224,255,.8)}
.hvf .hvf-fx::after{left:-82%;top:94%;height:2px;margin-top:-1px;transform:rotate(-40deg);background:linear-gradient(90deg,rgba(190,160,255,0) 30%,rgba(190,160,255,.85) 50%,rgba(190,160,255,0) 70%);box-shadow:0 0 14px rgba(190,160,255,.7)}
.hvf .hvf-fx2::before{left:-82%;top:94%;height:1px;transform:rotate(48deg);background:linear-gradient(90deg,rgba(255,214,140,0) 34%,rgba(255,214,140,.9) 50%,rgba(255,214,140,0) 66%);box-shadow:0 0 10px rgba(255,214,140,.7)}

/* 製品概要 */
.hvf .hvf-hero-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:48px 24px}
.hvf .hvf-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:center;gap:32px 40px;width:100%;max-width:1040px;margin:0 auto}
.hvf .hvf-hero-txt{display:flex;flex-direction:column;gap:24px;min-width:0}
.hvf .hvf-hero-head{display:flex;flex-direction:column;gap:14px}
.hvf .hvf-logo{height:36px;width:auto;align-self:flex-start}
.hvf .hvf-h1{display:flex;flex-direction:column;gap:2px;color:#1a1a1a;line-height:1.15}
.hvf .hvf-h1-name{font-family:'gotham','Montserrat',sans-serif;font-weight:500;font-size:clamp(40px,5vw,60px);letter-spacing:.01em}
.hvf .hvf-h1-ja{font-family:'Noto Sans JP',sans-serif;font-size:22px;font-weight:700;line-height:1.5;margin-top:8px}
.hvf .hvf-hero-lead{max-width:760px;font-size:17px;line-height:1.95;text-wrap:pretty}
.hvf .hvf-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hvf .hvf-tags li{background:#0056a3;color:#fff;font-size:14px;font-weight:700;line-height:1.4;padding:11.5px 10px;min-height:66px;text-align:center;display:flex;align-items:center;justify-content:center}
.hvf .hvf-hero-img{width:100%;max-width:560px;margin:0 auto}

/* データシート・日本語マニュアル */
.hvf .hvf-cta{max-width:1200px;margin:0 auto;padding:40px 24px 56px}
.hvf .hvf-cta-grid{width:100%;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch}
.hvf a.hvf-ds{background:#000;color:#fff;text-decoration:none;border-radius:8px;height:100px;padding:0 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
.hvf a.hvf-ds:hover{color:#fff;transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.hvf .hvf-ds-title{display:block;font-size:16px;font-weight:700;line-height:1.4;color:#fff}
.hvf .hvf-ds-sub{font-size:13px;line-height:1.6;color:#ddd}
.hvf .hvf-ds-btn{display:flex;align-items:center;gap:8px;background:#3cf01e;color:#000;font-size:14px;font-weight:700;line-height:1;padding:12px 22px;border-radius:999px}
.hvf a.hvf-manual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#1f74c0;color:#fff;text-decoration:none;text-align:center;border-radius:8px;padding:34px 24px 22px;transition:transform .18s ease,box-shadow .18s ease}
.hvf a.hvf-manual:hover{color:#fff;transform:translateY(-3px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.hvf .hvf-manual-txt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:15px;font-weight:700;line-height:1.6}
.hvf .hvf-manual-badge{background:#ffeb3b;color:#1a1a1a;padding:1px 8px}
.hvf .hvf-manual-series{border:1.5px solid #fff;border-radius:6px;padding:0 8px}
.hvf .hvf-manual-note{background:rgba(255,255,255,.22);border-radius:999px;padding:8px 22px;font-size:13px;font-weight:700;line-height:1.5}

/* 主な特長 */
.hvf .hvf-featsec{align-items:center;gap:40px}
.hvf .hvf-feat{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:48px 24px}
.hvf .hvf-feat li{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.hvf .hvf-feat img{width:100px;height:100px}
.hvf .hvf-feat p{font-size:17px;font-weight:700;color:#1a1a1a;line-height:1.6}

/* 製品比較 */
.hvf .hvf-cmpsec{gap:28px}
.hvf .hvf-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:960px;margin:0 auto}
.hvf .hvf-cmp{width:100%;min-width:720px;border-collapse:collapse;border:1.5px solid #b0ada3;font-size:15px;line-height:1.6;table-layout:fixed}
.hvf .hvf-cmp th,.hvf .hvf-cmp td{border-bottom:1px solid #c4c1b7;border-right:1px solid #c4c1b7;padding:12px 16px;text-align:center;vertical-align:middle;color:#333;font-size:15px}
.hvf .hvf-cmp tr > :last-child{border-right:0}
.hvf .hvf-cmp tbody tr:last-child > *{border-bottom:0}
.hvf .hvf-cmp tr.hvf-lt td{border-bottom-color:#e3e1da}
.hvf .hvf-cmp thead th{background:#f2f4f7;padding:20px 16px 16px;vertical-align:bottom}
.hvf .hvf-cmp thead th.hvf-c1{width:20%;border-right:0}
.hvf .hvf-cmp thead th.hvf-c2{width:12%}
.hvf .hvf-cmp thead th.hvf-c3{width:34%}
.hvf .hvf-cmp tbody th{text-align:left;white-space:nowrap;font-weight:700;color:#1a1a1a}
.hvf .hvf-cmp td.hvf-cmp-sub{text-align:left;font-family:'Montserrat','Noto Sans JP',sans-serif;font-weight:600;font-size:16px;color:#1a1a1a}
.hvf .hvf-cmp td.hvf-dot{color:#0056a3;font-size:18px}
.hvf .hvf-cmp .hvf-dot-note{font-size:13px;color:#333;margin-left:2px}
.hvf .hvf-cmp td.hvf-nw{white-space:nowrap}
.hvf .hvf-cmp-prod{display:flex;flex-direction:column;align-items:center;gap:12px}
.hvf .hvf-cmp-prod img{height:160px;width:auto;max-width:100%;object-fit:contain}
.hvf .hvf-cmp-prod span{font-family:'gotham','Montserrat',sans-serif;font-weight:500;font-size:20px;color:#0c2036}
.hvf .hvf-notes{width:100%;max-width:960px;margin:0 auto}
.hvf .hvf-note{font-size:13px;color:#555;line-height:1.6}

/* 製品外観 */
.hvf .hvf-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:20px}
.hvf .hvf-vcard{background:#fff;border:1.5px solid #b0ada3;display:flex;flex-direction:column}
.hvf .hvf-vhead{padding:16px 20px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid #c4c1b7}
.hvf .hvf-vname{font-weight:700;font-size:20px;color:#0c2036;line-height:1.4}
.hvf .hvf-vform{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;color:#0056a3;white-space:nowrap;line-height:1.4}
.hvf .hvf-vimg{padding:20px;display:flex;align-items:center;justify-content:center;flex:1}
.hvf .hvf-vimg img{width:100%}

/* 構成 */
.hvf .hvf-sys{width:85%;max-width:833px;margin:0 auto}
.hvf .hvf-sys img{width:100%}

/* 仕様 */
.hvf .hvf-specsec{padding:64px 24px 80px}
.hvf .hvf-specsec .hvf-h2{text-align:left}
.hvf .hvf-spec-body{display:flex;flex-direction:column;gap:8px}
.hvf .hvf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hvf .hvf-spec{width:100%;min-width:760px;border-collapse:collapse;border:1.5px solid #b0ada3;font-size:15px;line-height:1.75;table-layout:fixed;overflow-wrap:anywhere}
.hvf .hvf-spec th,.hvf .hvf-spec td{border-bottom:1px solid #c4c1b7;border-right:1px solid #c4c1b7;padding:18px 24px;text-align:left;vertical-align:top;color:#333;font-size:15px}
.hvf .hvf-spec tr > :last-child{border-right:0}
.hvf .hvf-spec tbody tr:last-child > *{border-bottom:0}
.hvf .hvf-spec thead th{background:#0c2036;color:#fff;border-bottom:0;border-right-color:#3a4a5c;padding:14px 24px;vertical-align:middle;font-family:'gotham','Montserrat',sans-serif;font-weight:500;font-size:17px}
.hvf .hvf-spec thead th.hvf-spec-c1{width:200px}
.hvf .hvf-spec tbody th{background:#f2f4f7;font-weight:700;color:#1a1a1a}
.hvf .hvf-spec tbody th.hvf-spec-g{background:#eaf0f6;padding:10px 24px;font-size:16px;color:#0056a3}
.hvf .hvf-spec td p{font-size:15px;line-height:1.75}

/* スマホ */
@media (max-width:767px){
  html body div.hvf:not(#hvf-x1):not(#hvf-x2){margin-top:-40px !important}
  .hvf .hvf-inner{padding:48px 16px}
  .hvf .hvf-hero-in{padding:32px 16px}
  .hvf .hvf-cta{padding:32px 16px 48px}
  .hvf .hvf-specsec{padding:48px 16px 64px}
  .hvf .hvf-h2{font-size:24px}
  .hvf .hvf-hero-lead{font-size:16px}
  .hvf a.hvf-ds{padding:0 20px}
  .hvf .hvf-sys{width:100%}
  .hvf .hvf-spec th,.hvf .hvf-spec td{padding:14px 16px}
  .hvf .hvf-spec thead th.hvf-spec-c1{width:140px}
}