:root{--bg:#fff;--surface:#fff;--soft:#f3f9fd;--text:#102a43;--muted:#4f6475;--primary:#0068b7;--primary-dark:#004b8d;--accent:#00a6d6;--border:#d8e8f2;--shadow:0 12px 30px rgba(0,75,141,.1);--max-width:1120px;--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23004b8d' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E")}
*{box-sizing:border-box}body{margin:0;color:var(--text);font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;line-height:1.7;background:var(--bg)}img{max-width:100%;height:auto}.container{width:min(100% - 40px,var(--max-width));margin-inline:auto}.skip-link{position:absolute;left:16px;top:12px;z-index:100;transform:translateY(-140%);padding:10px 14px;color:#fff;background:var(--primary-dark);border-radius:8px}.skip-link:focus{transform:none}.site-header{background:#fff;border-top:6px solid var(--primary);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;color:var(--primary-dark);font-weight:900;text-decoration:none}.brand-mark{width:42px}.brand-text{font-size:clamp(1rem,2vw,1.35rem)}.breadcrumb{padding:8px 0 6px;font-size:.86rem}.breadcrumb ol{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.breadcrumb li:not(:last-child)::after{content:">";margin-left:6px;color:var(--muted)}.breadcrumb a{color:var(--muted);text-decoration:none}.breadcrumb [aria-current=page]{color:var(--primary-dark);font-weight:700}
.page-hero{background:#f7fbfe;border-block:1px solid var(--border)}.page-hero-inner{padding:18px 0 20px}.page-hero h1{margin:0;color:var(--primary-dark);font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.25}.lead{max-width:760px;margin:8px 0 0;color:var(--muted);font-size:.96rem;line-height:1.55}
.tide-section{padding:28px 0 52px}.tide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tide-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.tide-card-link{display:block;height:100%;padding:22px;color:inherit;text-decoration:none}.tide-card-link:hover{background:#f8fcff;box-shadow:inset 0 0 0 2px rgba(0,166,214,.3)}.tide-card h2{display:inline-block;margin:0;color:var(--primary-dark)}.source-label{display:inline-block;margin:0 0 12px 8px;padding:2px 9px;color:var(--primary-dark);font-size:.78rem;font-weight:700;background:var(--soft);border-radius:999px}.tide-image-wrap{overflow-x:auto;padding:8px;border:1px solid var(--border);border-radius:12px}.tide-image-wrap img{display:block;width:100%;min-width:420px}.card-link-hint{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:14px;color:var(--primary);font-weight:700}.card-link-hint::after,.notice-link::after{content:"";display:inline-block;width:16px;height:16px;background:var(--icon) center/16px no-repeat}.notice{margin-top:24px;padding:18px 20px;background:var(--soft);border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:12px}.notice h2{margin:0 0 6px;color:var(--primary-dark);font-size:1.1rem}.notice p{margin:0 0 8px}.notice p:last-child{margin-bottom:0}.notice-link{color:var(--primary-dark);font-weight:700;text-decoration:underline}.site-footer{border-top:1px solid var(--border)}.site-footer p{margin:0;padding:22px 0;color:var(--muted);font-size:.9rem}a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}



/* その他の観測施設（気象庁サイト） */
.other-observatories{margin-top:28px;padding:22px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.other-observatories h2{margin:0;color:var(--primary-dark);font-size:clamp(1.25rem,2.5vw,1.65rem)}
.other-observatories-lead{margin:8px 0 16px;color:var(--muted)}
.tide-map-wrap{display:flex;justify-content:center;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:12px}

.tide-map{display:block;width:min(100%,521px)}
.tide-map>svg{display:block;width:100%;height:auto;max-width:521px;margin-inline:auto}





/* SVG地点: hover時は丸枠ではなく記号そのものの色を変更 */
.maparea-link:hover .maparea-hit { fill: transparent; stroke: none; }
.maparea-link:hover .maparea-marker { fill: #0068b7; }

/* Responsive layout enhancements */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

.container {
  width: min(100% - 32px, var(--max-width));
}

.header-inner,
.brand,
.tide-card,
.tide-card-link,
.other-observatories,
.notice {
  min-width: 0;
}

.brand-text,
.page-hero h1,
.page-hero p,
.other-observatories h2,
.other-observatories-lead,
.notice,
.notice-link,
.card-link-hint {
  overflow-wrap: anywhere;
}

.tide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tide-card-link {
  height: 100%;
}

.tide-image-wrap img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

.tide-map-wrap {
  width: 100%;
  overflow: hidden;
}

.tide-map {
  width: min(100%, 521px);
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 521 / 466;
}

.tide-map > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .tide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .other-observatories,
  .notice {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, var(--max-width));
  }

  .site-header {
    border-top-width: 4px;
  }

  .header-inner {
    padding-block: 8px;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark {
    width: 36px;
    flex: 0 0 36px;
  }

  .brand-text {
    font-size: 1rem;
    line-height: 1.45;
  }

  .breadcrumb {
    font-size: .8rem;
  }

  .page-hero-inner {
    padding: 14px 0 16px;
  }

  .page-hero h1 {
    font-size: clamp(1.35rem, 7vw, 1.75rem);
    line-height: 1.4;
  }

  .tide-section {
    padding-block: 24px;
  }

  .tide-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .tide-card,
  .other-observatories,
  .notice {
    border-radius: 12px;
  }

  .other-observatories {
    margin-top: 22px;
    padding: 16px 12px;
  }

  .other-observatories h2 {
    font-size: 1.18rem;
  }

  .other-observatories-lead {
    font-size: .9rem;
    line-height: 1.65;
  }

  .tide-map-wrap {
    border-radius: 8px;
  }

  .notice {
    padding: 16px;
    font-size: .92rem;
  }

  .site-footer {
    font-size: .82rem;
  }
}

@media (max-width: 380px) {
  .container {
    width: min(100% - 16px, var(--max-width));
  }

  .brand-mark {
    width: 32px;
    flex-basis: 32px;
  }

  .brand-text {
    font-size: .92rem;
  }

  .other-observatories {
    padding-inline: 8px;
  }
}