/* Cats 狭山IDC: 共用VPNの接続概念図（2026-10-18）。既存全体CSSには影響を与えない。 */
.vpn-network-panel { scroll-margin-top: 6rem; }
.vpn-network-panel .vpn-free-note {display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.1rem; margin:1.15rem 0; padding:1rem 1.25rem; border:1px solid #b1dacc; border-left:5px solid #16836d; border-radius:12px; background:#effaf5; color:#11624c; }
.vpn-free-note strong {font-size:1.18rem;}
.vpn-free-note span {font-size:.82rem; color:#516b63;}
.vpn-diagram {--vpn-line:#5a83b6; max-width:850px; margin:1.2rem auto; padding:1.2rem; border:1px solid #d7e2ef; background:linear-gradient(180deg,#fff 0%,#f4f8fd 100%); border-radius:16px; text-align:center; color:#152f50;}
.vpn-diagram__node {display:block; max-width:330px; margin:0 auto; padding:.75rem .95rem; border:1px solid #aac5e1; background:white; border-radius:10px; font-weight:700; box-shadow:0 2px 8px rgba(30,70,120,.05);}
.vpn-diagram__node small {display:block; margin-top:.25rem; font-size:.78rem; color:#55718d; font-weight:500;}
.vpn-diagram__down {height:38px; position:relative; display:flex; align-items:center; justify-content:center;}
.vpn-diagram__down::before {content:'';height:100%;border-left:2px solid var(--vpn-line);position:absolute;left:50%;top:0;}
.vpn-diagram__down::after {content:'';position:absolute;bottom:0;left:calc(50% - 4px);width:8px;height:8px;border-right:2px solid var(--vpn-line);border-bottom:2px solid var(--vpn-line);transform:rotate(45deg);}
.vpn-diagram__down span {position:relative;z-index:1;background:#f7faff;padding:0 .7rem;font-size:.78rem;color:#335e8b;}
.vpn-diagram__idc {margin-top:0; padding:1.1rem 1rem 1rem; border:2px solid #4f88be; border-radius:14px; background:#eef6ff;}
.vpn-diagram__idc-title {display:block;margin-bottom:.85rem;font-size:1.08rem;color:#144e87;}
.vpn-diagram__router {border-color:#79a3ce;}
.vpn-diagram__switch {border-color:#6e9cc6; background:#fff;}
.vpn-diagram__clients {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;}
.vpn-diagram__client {display:flex;min-width:0;align-items:center;flex-direction:column;gap:.25rem;padding:1rem .4rem;border:1px solid #8caad0;border-radius:10px;background:#fff;}
.vpn-diagram__client strong {color:#154b78;}
.vpn-diagram__client span {font-size:.88rem;}
.vpn-diagram__client small {font-size:.73rem;color:#546c84;}
.vpn-diagram__branch {display:grid;grid-template-columns:repeat(2,1fr);width:50%;margin:0 auto;height:34px;}
.vpn-diagram__branch span {border-top:2px solid var(--vpn-line);position:relative;margin-top:17px;}
.vpn-diagram__branch span:first-child {border-left:2px solid var(--vpn-line);}
.vpn-diagram__branch span:last-child {border-right:2px solid var(--vpn-line);}
.vpn-diagram__separation {margin:.9rem 0 0;color:#11624c;font-size:.84rem;font-weight:700;}
@media(max-width:620px){.vpn-diagram{padding:.65rem}.vpn-diagram__idc{padding:.8rem .5rem}.vpn-diagram__clients{gap:.45rem}.vpn-diagram__client{padding:.75rem .25rem}.vpn-diagram__client span{font-size:.76rem}.vpn-diagram__client small{font-size:.68rem}.vpn-free-note strong{font-size:1.02rem}}