.port-map{background:var(--c-bg-paper);padding:40px 0 0}@media (min-width:720px){.port-map{padding:48px 0 0}}.port-map__h2{color:var(--c-text);font-size:20px;font-weight:700;line-height:1.4;font-family:var(--font-ja);margin:0 0 16px}@media (min-width:720px){.port-map__h2{font-size:22px}}@media (min-width:1100px){.port-map__h2{font-size:24px}}.port-map__card{aspect-ratio:16/9;border:1px solid var(--c-line);background:linear-gradient(160deg,#eaf3f9 0%,#d8ecf5 55%,#bfe0f0 100%);border-radius:14px;width:100%;min-height:240px;position:relative;overflow:hidden;box-shadow:0 4px 14px #1e88c40f}.port-map__grid{pointer-events:none;background-image:linear-gradient(#1e88c40f 1px,#0000 1px),linear-gradient(90deg,#1e88c40f 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0}.port-map__blob{pointer-events:none;position:absolute}.port-map__blob--1{opacity:.8;background:radial-gradient(60% 70% at 40% 40%,#eaf6ec 0%,#ded 60%,#0000 100%);inset:24% 34% -6% 2%}.port-map__blob--2{opacity:.8;background:radial-gradient(60% 70% at 40% 40%,#eaf6ec 0%,#ded 60%,#0000 100%);inset:-8% -4% 34% 56%}.port-map__badge{z-index:10;color:var(--c-ocean-deep);border:1px solid var(--c-line);border-radius:var(--r-tag);pointer-events:none;background:#ffffffd1;padding:3px 8px;font-size:10px;font-weight:700;line-height:1.4;position:absolute;top:10px;left:12px}.port-map__legend{z-index:10;border:1px solid var(--c-line);border-radius:var(--r-btn);pointer-events:none;background:#ffffffdb;flex-direction:column;gap:4px;padding:6px 10px;display:flex;position:absolute;top:10px;right:12px}.port-map__legend-row{align-items:center;gap:6px;display:flex}.port-map__dot{border-radius:50%;flex-shrink:0;display:inline-block;box-shadow:0 1px 4px #15689b73}.port-map__dot--active{background:var(--c-sun);border:1.5px solid var(--c-bg-paper);width:9px;height:9px}.port-map__dot--normal{background:var(--c-ocean);border:1.5px solid var(--c-bg-paper);width:8px;height:8px}.port-map__legend-label{font-size:10px;font-weight:600}.port-map__legend-label--active{color:var(--c-text)}.port-map__legend-label--normal{color:var(--c-text-sub)}.port-map__pin{z-index:5;flex-direction:column;align-items:center;gap:2px;display:flex;position:absolute;transform:translate(-50%,-100%);text-decoration:none!important}.port-map__pin:not(.port-map__pin--active) .port-map__pin-label{opacity:0;transition:opacity .15s}.port-map__pin:not(.port-map__pin--active):hover .port-map__pin-label{opacity:1}@media (prefers-reduced-motion:reduce){.port-map__pin:not(.port-map__pin--active) .port-map__pin-label{transition:none}}.port-map__pin-label{border:1px solid var(--c-line);white-space:nowrap;color:var(--c-text);background:#ffffffdb;border-radius:5px;padding:1px 5px;font-size:10px;font-weight:600;line-height:1.4;display:block}.port-map__pin--active .port-map__pin-label{background:#ffffffe6;font-weight:700}.port-map__pin-dot{border-radius:50%;flex-shrink:0;display:block;box-shadow:0 1px 4px #15689b73}.port-map__pin--active .port-map__pin-dot{background:var(--c-sun);border:2px solid var(--c-bg-paper);width:11px;height:11px}.port-map__pin:not(.port-map__pin--active) .port-map__pin-dot{background:var(--c-ocean);border:2px solid var(--c-bg-paper);width:10px;height:10px}.port-map__footer{color:var(--c-text-sub);background:#ffffffb3;border-top:1px solid #e1eef5;padding:8px 14px;font-size:11px;line-height:1.5;position:absolute;bottom:0;left:0;right:0}