/* Generated by scripts/build_home_css.py; edit the source files. */

/* forecast.css */

/* ── ブリッジ内: 地点・日付セグメント（1行、幅が足りない時のみ折り返す） ── */
.fc-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.fc-controls .tb-seg{background:rgba(255,255,255,.08);flex-shrink:0}
.fc-controls .tb-seg > *{color:var(--on-navy-2);padding:0 10px}
.fc-controls .tb-seg > .is-active{background:rgba(255,255,255,.16);color:var(--on-navy);box-shadow:none}
.fc-loc-select{min-height:34px;padding:0 28px 0 10px;border-radius:var(--radius-sm);border:1px solid var(--on-navy-line);background:rgba(255,255,255,.08);color:var(--on-navy);font-size:13px;font-weight:700;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--on-navy-2) 50%),linear-gradient(135deg,var(--on-navy-2) 50%,transparent 50%);background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.fc-loc-select option,.fc-loc-select optgroup{color:var(--ink);background:var(--surface)}
.fc-point-meta{color:var(--on-navy-2);margin:0 0 14px}

/* ── ヒーロー: 対象の明示（地点・日付・時間帯・対象時刻・更新） ── */
.fc-hero-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:11px;color:var(--on-navy-3);font-variant-numeric:tabular-nums}
.fc-hero-updated{display:block;margin-top:6px;font-size:11px;color:var(--on-navy-3)}
.fc-hint{font-size:11px;font-weight:700;color:var(--on-navy-2);border:1px solid var(--on-navy-line);border-radius:999px;padding:1px 7px;white-space:nowrap}

/* ── 今の海況 / 今の天気: 統計グリッド ── */
.fc-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:479px){.fc-stat-grid{grid-template-columns:repeat(2,1fr)}}
.fc-weather-main{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}
.fc-weather-temp{font-size:32px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fc-weather-cond{font-size:13px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:6px;margin-bottom:4px}
.fc-hilo{display:flex;gap:14px;font-size:12px;color:var(--ink-3)}
.fc-hilo b{font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-alerts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.fc-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-shrink:0}
/* 期限切れ（state != fresh）の数値は灰色にし、判定は出さない */
.is-stale .tb-stat-value,.is-stale .fc-weather-temp,.is-stale .tb-table tbody td{color:var(--ink-3)}

/* ── 気圧トレンド ── */
.fc-pressure-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fc-pressure-trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.fc-chart-wrap{position:relative;height:160px}
@media (min-width:640px){.fc-chart-wrap{height:190px}}
.fc-chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.fc-chart-legend span{display:inline-flex;align-items:center;gap:5px}
.fc-swatch{display:inline-block;width:14px;height:0;border-top-width:2px;border-top-style:solid}
.fc-swatch.dash{border-top-style:dashed}
.fc-chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3)}
.fc-wx{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--ink-2)}

/* ── 潮汐×ソルナー ── */
.fc-tide-chart{position:relative;height:180px}
@media (min-width:640px){.fc-tide-chart{height:210px}}
.fc-golden-head{display:flex;align-items:center;gap:8px;margin-top:14px}
.fc-golden-empty{font-size:12px;color:var(--ink-3)}
.fc-golden-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;color:var(--ink)}
.fc-golden-row + .fc-golden-row{border-top:1px solid var(--line)}

/* ── 時間帯別コンディション ── */
.fc-hourly-th{position:sticky;left:0;z-index:1;background:var(--surface-2)}

/* ── データソース ── */
.fc-sources{margin-top:4px}
.fc-sources div + div{margin-top:2px}

/* The forecast is a working surface: a shared time axis and explicit units. */
.fp-page { max-width:1184px; margin:auto; padding:32px 24px 48px; color:var(--ink); font-size:16px; }
.fp-page [hidden] { display:none !important; }
.fp-page button, .fp-page select { font:inherit; }
.fp-page button { cursor:pointer; }
.fp-page button:focus-visible, .fp-page select:focus-visible, .fp-page summary:focus-visible, .fp-scroll:focus-visible { outline:3px solid #2377e8; outline-offset:3px; }
.fp-page-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.fp-eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; color:#466586; margin:0 0 6px; }
.fp-page h1 { margin:0; font-size:clamp(26px,4vw,36px); font-weight:700; letter-spacing:.01em; line-height:1.4; }
.fp-intro { color:var(--ink-2); margin:8px 0 0; font-size:16px; }
.fp-radar { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; min-height:44px; color:#135bbe; text-decoration:none; }
.fp-radar:hover { text-decoration:underline; }
.fp-selector { border:1px solid #d3e0ee; border-radius:16px; background:#fff; padding:18px 22px; margin-bottom:18px; }
.fp-select-top, .fp-select-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.fp-select-bottom { border-top:1px solid #e1eaf3; margin-top:16px; padding-top:14px; justify-content:flex-start; }
.fp-location-label { display:flex; align-items:center; gap:12px; color:#4c6380; font-size:14px; font-weight:700; }
.fp-page .fc-loc-select { max-width:100%; min-height:46px; color:#102d4f; background-color:#edf4fb; border:1px solid #b7cce0; font-size:16px; padding:8px 34px 8px 14px; border-radius:8px; background-image:linear-gradient(45deg,transparent 50%,#4c6380 50%),linear-gradient(135deg,#4c6380 50%,transparent 50%); background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px; }
.fp-segment { display:inline-flex; gap:4px; border:1px solid #cbdcec; border-radius:10px; padding:4px; background:#f0f5fa; }
.fp-segment button { border:0; border-radius:7px; background:transparent; min-height:44px; padding:8px 18px; color:#4c6380; font-weight:700; font-size:15px; }
.fp-segment button span, .fp-segment button small { display:block; font-weight:400; font-size:12px; }
.fp-segment button[aria-pressed="true"] { color:#fff; background:#103a66; box-shadow:0 2px 5px #092b501a; }
.fp-control-label { color:#4c6380; font-size:14px; font-weight:700; }
.fp-window-options { display:flex; gap:8px; flex-wrap:wrap; }
.fp-window-options button { border:1px solid transparent; background:transparent; min-height:44px; border-radius:7px; padding:6px 12px; font-size:14px; font-weight:700; color:#46617f; }
.fp-window-options small { font-size:12px; font-weight:400; margin-left:4px; }
.fp-window-options button[aria-pressed="true"] { color:#135bbe; background:#e9f2ff; border-color:#a7c9f4; }
.fp-overview { padding:24px 28px 20px; border-radius:18px; background:#0d3157; color:#fff; margin-bottom:30px; }
.fp-overview-top { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:baseline; }
.fp-overview .fp-eyebrow { color:#c5e3ff; font-size:14px; }
.fp-updated { color:#b8cee4; font-size:12px; }
.fp-overview-body { display:flex; align-items:center; gap:20px; margin:18px 0 24px; }
.fp-summary-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:80px; height:80px; color:#a4d0ff; background:#224b73; border:1px solid #527799; border-radius:20px; }
.fp-overview h2 { font-size:clamp(20px,2.7vw,28px); line-height:1.5; font-weight:700; margin:0 0 8px; text-wrap:balance; }
.fp-overview-body p { margin:0; color:#c1d7ed; font-size:14px; line-height:1.8; }
.fp-summary-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #3c5d7e; border-bottom:1px solid #3c5d7e; padding:18px 0; }
.fp-summary-stats > div { display:grid; grid-template-columns:24px 1fr; gap:6px 8px; align-content:start; padding:0 18px; border-left:1px solid #3c5d7e; }
.fp-summary-stats > div:first-child { padding-left:0; border:0; }
.fp-summary-stats > div:last-child { padding-right:0; }
.fp-summary-stats svg { color:#a5cdff; }
.fp-stat-label { font-size:14px; color:#e2edf8; }
.fp-stat-label small { display:block; font-size:12px; color:#b8cee4; }
.fp-summary-stats strong { grid-column:1/-1; font-size:clamp(22px,3vw,32px); letter-spacing:.01em; font-variant-numeric:tabular-nums; font-weight:700; line-height:1.5; }
.fp-stat-note { grid-column:1/-1; color:#c1d7ed; font-size:12px; line-height:1.7; }
.fp-safety { color:#bed1e4; font-size:12px; line-height:1.8; margin:12px 0 0; }
.fp-retry { min-height:44px; border:1px solid #a4c6e8; background:#fff; color:#103a66; padding:8px 18px; border-radius:8px; margin-top:16px; font-weight:700; }
.fp-overview[data-state="stale"], .fp-overview[data-state="missing"] { background:#34465b; }
.fp-overview[data-state="stale"] .fp-summary-stats { opacity:.75; }
.fp-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.fp-section-head h2 { margin:0; font-size:24px; font-weight:700; line-height:1.5; }
.fp-resolution button { padding:6px 18px; }
.fp-scroll-hint { font-size:12px; color:#4c6380; margin:0 0 10px; }
.fp-scroll { width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid #cbdcec; border-radius:14px; background:#fff; scrollbar-color:#9ab7d5 #f1f6fb; scrollbar-width:thin; }
.fp-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-variant-numeric:tabular-nums; }
.fp-table th, .fp-table td { width:150px; min-width:130px; text-align:center; padding:12px 10px; border-right:1px solid #e0eaf4; border-bottom:1px solid #e0eaf4; vertical-align:middle; }
.fp-table th:first-child { width:138px; min-width:138px; position:sticky; left:0; z-index:2; background:#f3f7fc; text-align:left; box-shadow:1px 0 #cbdcec; }
.fp-table th:last-child, .fp-table td:last-child { border-right:0; }
.fp-table tr:last-child th, .fp-table tr:last-child td { border-bottom:0; }
.fp-table thead th { background:#eff5fc; padding:0; }
.fp-table thead th:first-child { font-size:14px; padding:16px; }
.fp-table tbody th { font-size:14px; font-weight:700; padding-left:16px; }
.fp-table tbody th > svg { margin-bottom:8px; display:block; color:#496b8e; }
.fp-table th small { display:block; font-size:12px; font-weight:400; color:#4c6380; margin-top:3px; }
.fp-period { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:76px; width:100%; background:none; border:0; color:#102d4f; padding:8px; }
.fp-period > span:first-child { font-size:24px; font-weight:700; }
.fp-period small { display:inline !important; font-size:14px !important; color:inherit !important; }
.fp-period-hint { font-size:12px; color:#135bbe; margin-top:2px; }
.fp-period:hover { background:#dcecff; }
.fp-weather-row td > svg { display:block; margin:0 auto 8px; }
.fp-weather-name { display:block; font-size:14px; min-height:22px; font-weight:700; }
.fp-temperature { display:block; font-size:19px; margin-top:5px; }
.fp-temperature small, .fp-number small { font-size:12px; font-weight:400; margin-left:3px; }
.fp-icon-sun, .fp-icon-cloud-sun { color:#af7100; }
.fp-summary-icon .fp-icon-sun, .fp-summary-icon .fp-icon-cloud-sun { color:#ffd985; }
.fp-icon-rain, .fp-icon-drop { color:#2378ce; }
.fp-summary-icon .fp-icon-rain, .fp-summary-icon .fp-icon-drop { color:#a4d0ff; }
.fp-icon-thunder { color:#9f5c08; }
.fp-summary-icon .fp-icon-thunder { color:#ffca7e; }
.fp-icon-snow { color:#416bc1; }
.fp-icon-fog, .fp-icon-cloud { color:#627c99; }
.fp-summary-icon .fp-icon-cloud, .fp-summary-icon .fp-icon-fog { color:#cce1f5; }
.fp-probability-row strong { color:#1468b9; font-size:20px; font-weight:700; }
.fp-probability-row strong small { font-size:12px; margin-left:2px; }
.fp-prob-track { display:block; width:70%; height:5px; margin:9px auto 0; background:#dfedfa; border-radius:4px; overflow:hidden; }
.fp-prob-track i { display:block; height:100%; background:#267ccb; }
.fp-graph-row td { position:relative; height:110px; padding-top:10px; padding-bottom:8px; }
.fp-number { position:relative; z-index:1; display:block; font-size:21px; font-weight:700; }
.fp-bar-space { display:flex; align-items:flex-end; height:40px; border-bottom:1px solid #d3e0ee; width:70%; margin:5px auto 0; }
.fp-bar { display:block; width:100%; border-radius:4px 4px 0 0; min-height:0; }
.fp-bar-rain { background:#74b8ed; }
.fp-bar-wind { background:#8199bb; }
.fp-bar-wave { background:#6aafac; }
.fp-direction { display:block; font-size:12px; color:#4c6380; margin-top:4px; }
.fp-missing { display:block; font-size:12px; color:#736047; margin-top:4px; }
.fp-method-note { font-size:12px; color:#4c6380; line-height:1.9; margin:12px 0; }
.fp-reading { border-bottom:1px solid #d3e0ee; padding:4px 0 14px; }
.fp-reading summary { cursor:pointer; min-height:44px; display:list-item; padding:10px 0; font-size:14px; font-weight:700; color:#17599f; }
.fp-reading > div { max-width:75ch; font-size:14px; color:#4c6380; line-height:1.9; }
.fp-reading p { margin:0 0 12px; }
.fp-reading a, .fp-next > a:last-child { color:#135bbe; text-decoration:underline; text-underline-offset:3px; font-size:14px; }
.fp-detail { border:1px solid #a7c9f4; background:#e9f2ff; padding:16px; border-radius:12px; margin-top:14px; }
.fp-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.fp-detail-head h3 { font-size:16px; margin:0; }
.fp-detail-head button { min-height:44px; border:0; background:transparent; color:#135bbe; padding:4px 10px; font-size:14px; }
.fp-detail-table { border-collapse:collapse; width:100%; min-width:600px; font-size:14px; }
.fp-detail-table th, .fp-detail-table td { text-align:left; padding:12px; border-bottom:1px solid #d3e0ee; }
.fp-detail-table th { background:#f2f7fc; }
.fp-detail-table td svg { vertical-align:middle; }
.fp-detail-table small { display:block; font-size:12px; font-weight:400; }
.fp-preparation { margin:28px 0; }
.fp-advice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.fp-advice-card { display:flex; align-items:flex-start; gap:10px; padding:18px 0; border-top:2px solid #bed2e6; }
.fp-advice-card > svg { flex-shrink:0; color:#416b99; margin-top:2px; }
.fp-advice-card h3 { margin:0 0 8px; font-size:15px; line-height:1.7; }
.fp-advice-card p { margin:0; color:#4c6380; font-size:14px; line-height:1.9; }
.fp-next { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin:8px 0 24px; }
.fp-next .tb-btn { font-size:14px; min-height:48px; padding:10px 20px; }
.fp-more { border-top:1px solid #cbdcec; }
.fp-disclosure { border-bottom:1px solid #cbdcec; }
.fp-disclosure > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; padding:22px 0; }
.fp-disclosure > summary::-webkit-details-marker { display:none; }
.fp-disclosure > summary > span:first-child { display:flex; align-items:center; gap:14px; }
.fp-disclosure > summary strong { display:block; font-size:17px; font-weight:700; }
.fp-disclosure > summary small { display:block; font-size:13px; margin-top:5px; color:#4c6380; }
.fp-disclosure > summary > span:last-child { font-size:24px; color:#466586; }
.fp-disclosure[open] > summary > span:last-child { transform:rotate(45deg); }
.fp-disclosure-body { padding:0 0 24px; }
.fp-disclosure-body .tb-section { margin:0; }
.fp-disclosure-body .tb-section-title { font-size:18px; }
.fp-disclosure-body .tb-stat-label { font-size:14px; color:#4c6380; }
.fp-disclosure-body .tb-stat-value { font-size:24px; }
.fp-disclosure-body .tb-stat-foot, .fp-disclosure-body .tb-cap { font-size:12px; }
.fp-current-grid { display:grid; gap:24px; }
.fp-mini-explain { font-size:12px; color:#4c6380; margin:3px 0 8px; }
.fp-page .fc-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fp-data-notes { padding:24px 0; }
.fp-data-notes h2 { font-size:16px; font-weight:700; margin:0 0 8px; }
.fp-data-notes p { font-size:13px; line-height:1.9; color:#4c6380; max-width:75ch; }
.fp-data-notes .fc-sources { font-size:12px; line-height:1.9; }
.fp-empty { padding:32px 24px; text-align:center; border:1px dashed #b7cce0; border-radius:12px; font-size:16px; background:#f8fbff; line-height:1.9; }
.fp-empty p { font-size:14px; color:#4c6380; }
.fp-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:700px) {
 .fp-page { padding:22px 16px 32px; }
 .fp-page-head { align-items:flex-start; gap:12px; }
 .fp-radar { font-size:12px; max-width:110px; flex-wrap:wrap; gap:4px; }
 .fp-intro { font-size:14px; }
 .fp-selector { padding:14px; }
 .fp-select-top { align-items:stretch; gap:14px; }
 .fp-location-label { width:100%; justify-content:space-between; }
 .fp-page .fc-loc-select { flex:1; min-width:0; max-width:calc(100% - 75px); }
 #day-seg { width:100%; }
 #day-seg button { flex:1; padding:8px 12px; }
 .fp-select-bottom { gap:8px; }
 .fp-control-label { width:100%; }
 .fp-window-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:4px; }
 .fp-window-options button { padding:6px 4px; }
 .fp-window-options small { display:block; margin:3px 0 0; }
 .fp-overview { padding:20px 18px 16px; margin-bottom:24px; }
 .fp-overview-top { gap:4px; }
 .fp-updated { font-size:12px; }
 .fp-overview-body { align-items:flex-start; gap:12px; margin:16px 0 18px; }
 .fp-summary-icon { width:52px; height:56px; border-radius:12px; }
 .fp-summary-icon svg { width:36px; height:36px; }
 .fp-overview h2 { font-size:20px; text-wrap:initial; }
 .fp-overview-body p { font-size:13px; }
 .fp-summary-stats { gap:0; }
 .fp-summary-stats > div { padding:0 9px; grid-template-columns:1fr; gap:4px; }
 .fp-summary-stats > div > svg { display:none; }
 .fp-stat-label { font-size:14px; }
 .fp-stat-label small { font-size:12px; }
 .fp-summary-stats strong { font-size:21px; line-height:1.5; overflow-wrap:anywhere; }
 .fp-stat-note { font-size:12px; }
 .fp-section-head h2 { font-size:21px; }
 .fp-resolution button { font-size:14px; padding:6px 12px; }
 .fp-section-head .fp-eyebrow { font-size:12px; }
 .fp-table th, .fp-table td { width:108px; min-width:108px; padding:10px 6px; }
 .fp-table th:first-child { width:102px; min-width:102px; padding-left:10px; }
 .fp-table thead th:first-child { padding:10px; }
 .fp-table tbody th { font-size:14px; }
 .fp-table th small { font-size:12px; }
 .fp-period > span:first-child { font-size:23px; }
 .fp-period small { font-size:13px !important; }
 .fp-period-hint { font-size:12px; }
 .fp-weather-row td > svg { width:32px; height:32px; }
 .fp-weather-name { font-size:13px; }
 .fp-number { font-size:20px; }
 .fp-advice-grid { grid-template-columns:1fr; gap:0; }
 .fp-advice-card { padding:16px 0; }
 .fp-advice-card h3 { font-size:16px; margin-bottom:4px; }
 .fp-disclosure > summary strong { font-size:16px; }
 .fp-page .fc-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fp-disclosure-body .tb-card-p { padding:14px; }
}
@media (prefers-reduced-motion:reduce) { .fp-page * { scroll-behavior:auto; transition:none; animation:none; } }
/* Keep the first useful result and its units legible on narrow screens. */
.fp-summary-stats strong { white-space:nowrap; }
.fp-summary-stats strong small { font-size:16px; font-weight:500; }
.fp-page-head { margin-bottom:18px; }
.fp-selector { padding-top:14px; padding-bottom:14px; }
.fp-overview-body { margin-top:12px; margin-bottom:18px; }
@media (max-width:700px) {
 .fp-page { padding-top:16px; }
 .fp-page-head { gap:8px; }
 .fp-page-head > div { min-width:0; }
 .fp-page-head .fp-eyebrow { font-size:12px; letter-spacing:0; }
 .fp-radar { display:block; font-size:12px; min-width:76px; max-width:76px; line-height:1.8; }
 .fp-radar > svg { display:none; }
 .fp-intro { margin-top:5px; }
 .fp-select-top { gap:10px; }
 .fp-select-bottom { margin-top:10px; padding-top:10px; }
 .fp-control-label { display:none; }
 .fp-segment button span { display:inline; margin-left:3px; }
 .fp-summary-stats strong small { font-size:13px; }
 .fp-summary-stats strong { font-size:20px; }
 .fp-summary-stats { padding:14px 0; }
 .fp-overview h2 { font-size:19px; }
}
@media (max-width:380px) {
 .fp-page-head { display:block; }
 .fp-radar { display:inline-flex; min-width:0; max-width:none; margin-top:10px; }
}

/* Put marine peaks and their limitations ahead of optional detail. */
.fp-maxima-label { font-size:14px; font-weight:700; margin:18px 0 8px; }
.fp-briefing { margin-bottom:30px; }
.fp-briefing h2 { font-size:22px; margin:0 0 14px; }
.fp-briefing .fp-advice-grid { border:1px solid #d3e0ee; border-radius:14px; padding:0 20px; background:#fff; }
.fp-advice-card { min-width:0; }
.fp-advice-card p { overflow-wrap:anywhere; line-height:1.8; }
.fp-peak-link, .fp-alert-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:700; color:#135bbe; }
.fp-peak-link:focus-visible { outline:3px solid #2377e8; outline-offset:3px; }
#alerts-section { border-left:3px solid #c8913b; padding:12px 16px; background:#fffaf0; border-radius:8px; margin-bottom:18px; }
#alerts-section .tb-section-header { flex-wrap:wrap; }
#alerts-section .tb-section-title { font-size:16px; }
#alerts-section .fc-alerts { margin-top:4px; font-size:14px; line-height:1.7; }
#alerts-section p { margin:0; }
.fp-overview .fp-stat-note { overflow-wrap:anywhere; }
@media(max-width:700px) {
 .fp-overview .fp-summary-stats { grid-template-columns:1fr; padding:0; }
 .fp-overview .fp-summary-stats > div { grid-template-columns:minmax(70px,1fr) minmax(0,1.4fr); padding:12px 0; border-left:0; border-bottom:1px solid #3c5d7e; column-gap:8px; }
 .fp-overview .fp-summary-stats > div:last-child { border-bottom:0; }
 .fp-overview .fp-stat-label { grid-column:1; grid-row:1; align-self:center; }
 .fp-overview .fp-summary-stats strong { grid-column:2; grid-row:1; font-size:26px; }
 .fp-overview .fp-stat-note { grid-column:2; font-size:13px; }
 .fp-overview .fp-summary-stats strong small { font-size:16px; }
 .fp-briefing .fp-advice-grid { padding:0 16px; }
}

/* Place-first forecast, October 2026. */
.fp-page { overflow-wrap:anywhere; }
.fp-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#617184; font-size:12px; margin:0 0 14px; }
.fp-breadcrumb a { min-height:44px; display:inline-flex; align-items:center; color:#315b72; }
.fp-spot-search { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid #e1eaf3; }
.fp-search-form label { display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:#15394b; }
.fp-search-row { display:flex; gap:8px; }
.fp-search-row input { width:100%; min-width:0; min-height:48px; border:1px solid #9fb7c4; border-radius:9px; padding:10px 12px; font:inherit; font-size:16px; background:#fff; color:#163545; }
.fp-search-row button,.fp-directory-form button { flex-shrink:0; min-height:48px; padding:10px 18px; border:0; background:#0e5568; color:#fff; border-radius:9px; font-size:15px; font-weight:700; cursor:pointer; }
.fp-search-links { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 18px; margin-top:8px; }
.fp-search-links a { color:#0e5568; font-weight:700; font-size:14px; min-height:44px; display:inline-flex; align-items:center; }
.fp-search-links span { color:#677b89; font-size:12px; }
.fp-search-results { border:1px solid #b4cbd7; border-radius:9px; background:#fff; padding:6px; margin-top:8px; }
.fp-search-results a { display:flex; flex-direction:column; justify-content:center; min-height:54px; padding:8px 10px; color:#15394b; text-decoration:none; border-radius:6px; }
.fp-search-results a:hover,.fp-search-results a:focus-visible { background:#e9f3f5; }
.fp-search-results small { color:#667b89; font-size:12px; }
.fp-search-results p { margin:10px; color:#5a7080; }
.fp-location-privacy { font-size:11px; line-height:1.6; color:#687d87; margin:10px 0 0; }
.fp-page .fp-place-actions #fp-locate { background:#e8f3f3; color:#0e5568; border:1px solid #9bbfc5; min-height:46px; font-weight:700; }
.fp-period-summary { padding:20px 0; margin:8px 0 20px; }
.fp-period-summary h2 { font-size:19px; margin:0; }
.fp-period-summary .fp-section-head a { min-height:44px; display:flex; align-items:center; font-size:13px; color:#0e5568; }
.fp-quick-periods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.fp-quick-periods article { border:1px solid #d6e3e9; border-radius:12px; padding:14px; background:#fff; }
.fp-quick-periods h3 { font-size:15px; margin:0 0 10px; color:#16485b; }
.fp-quick-periods p { font-size:13px; margin:5px 0; color:#506b7a; }
.fp-quick-periods strong { font-size:20px; color:#173b50; font-variant-numeric:tabular-nums; }
.fp-quick-periods small { display:block; margin-top:10px; color:#758693; font-size:11px; }
.fp-local-context { margin:30px 0; padding:24px; border:1px solid #d7e3e9; border-radius:14px; background:#fff; }
.fp-local-context h2 { font-size:22px; margin:4px 0 14px; }
.fp-local-context h3 { font-size:17px; margin-top:24px; }
.fp-local-context p { color:#536c7d; line-height:1.8; font-size:14px; }
.fp-local-context dl { font-size:13px; margin:20px 0; }
.fp-local-context dl>div { display:grid; grid-template-columns:90px 1fr; border-bottom:1px solid #e4edf1; padding:10px 0; gap:10px; }
.fp-local-context dt { color:#6e8391; }
.fp-local-context dd { margin:0; color:#16394e; }
.fp-nearby { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fp-nearby a { border:1px solid #ccdee5; border-radius:8px; min-height:58px; padding:12px; color:#0e5568; font-size:14px; font-weight:700; }
.fp-nearby small { display:block; color:#6c7f8c; font-size:11px; font-weight:400; }
.fp-browse-all { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; font-weight:700; color:#0e5568; font-size:14px; }
.fp-data-notes summary { cursor:pointer; min-height:44px; font-size:15px; font-weight:700; }
.fp-directory-form { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; align-items:end; }
.fp-directory-form label { font-size:13px; color:#466573; font-weight:700; }
.fp-directory-form input,.fp-directory-form select { display:block; width:100%; min-width:0; min-height:48px; border:1px solid #a8c0cb; padding:9px; border-radius:8px; background:#fff; color:#173e4f; font:inherit; font-size:16px; margin-top:8px; }
.fp-directory-form button { grid-column:1 / -1; }
.fp-directory h2 { font-size:21px; }
.fp-area-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fp-area-grid a { padding:18px; display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:70px; border:1px solid #cfdee5; border-radius:10px; background:#fff; color:#174252; }
.fp-area-grid span { flex-shrink:0; font-size:12px; color:#637f8b; }
.fp-place-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.fp-place-list>a { min-width:0; padding:18px; display:flex; align-items:center; gap:12px; justify-content:space-between; border:1px solid #d2e0e6; background:#fff; border-radius:12px; text-decoration:none; color:#143f50; }
.fp-place-list strong { font-size:17px; }
.fp-place-list small { display:block; font-size:12px; color:#54717e; margin:5px 0; }
.fp-place-list span>span { display:block; font-size:12px; color:#71818c; line-height:1.7; }
.fp-no-results { grid-column:1 / -1; padding:24px; border:1px dashed #b5cbd6; border-radius:12px; color:#4c6a78; }
.fp-pagination { display:flex; justify-content:space-between; margin:20px 0; gap:16px; }
.fp-pagination a { min-height:44px; display:flex; align-items:center; padding:8px 12px; color:#0e5568; }
.fp-directory-note { font-size:13px; line-height:1.8; color:#637d8c; margin:30px 0; }
@media(max-width:600px) {
 .fp-page .fp-page-head { gap:10px; margin-bottom:16px; }
 .fp-page h1 { font-size:25px; }
 .fp-page .fp-intro { font-size:14px; }
 .fp-page .fp-selector { padding:16px 12px; }
 .fp-select-top { gap:12px; }
 .fp-location-label { flex-wrap:wrap; width:100%; gap:6px; }
 .fp-page .fc-loc-select { width:100%; }
 .fp-page .fp-summary-stats { gap:0; }
 .fp-page .fp-summary-stats>div { padding:12px 6px; }
 .fp-page .fp-stat-label { font-size:12px; }
 .fp-page .fp-summary-stats strong { font-size:24px; white-space:normal; }
 .fp-page .fp-stat-note { font-size:11px; }
 .fp-page .fp-overview { padding:18px 14px; }
 .fp-page .fp-overview-body { gap:10px; }
 .fp-page .fp-overview-body h2 { font-size:22px; }
 .fp-quick-periods { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .fp-local-context { padding:18px 14px; }
 .fp-local-context dl>div { grid-template-columns:1fr; gap:4px; }
 .fp-nearby { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fp-directory-form { grid-template-columns:1fr 1fr; }
 .fp-directory-form label:first-child { grid-column:1 / -1; }
 .fp-area-grid,.fp-place-list { grid-template-columns:1fr; }
 .fp-search-links span { display:none; }
}
@media(prefers-reduced-motion:reduce) { .fp-page * { scroll-behavior:auto; transition:none; } }
.fp-page .fd-time-control input[type="range"] { min-height:44px; height:44px; }
.fp-page summary { min-height:44px; }
.fp-location-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.fp-current-place { font-size:17px; font-weight:700; color:#173b50; }
#fp-locate-quick { min-height:44px; padding:8px 12px; border:1px solid #91b9c0; border-radius:8px; background:#eaf5f5; color:#0e5568; font:inherit; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0; }
.fp-change-place>summary { min-height:44px; cursor:pointer; padding:10px 0; color:#0e5568; font-size:14px; font-weight:700; }
.fp-change-place[open] { border-bottom:1px solid #d8e5ea; padding-bottom:16px; margin-bottom:12px; }
.fp-change-place .fp-spot-search { margin-top:12px; }
.fp-date-controls { margin-top:8px; }
@media(max-width:600px) {
 .fp-page .fp-overview .fp-summary-stats { grid-template-columns:repeat(3,minmax(0,1fr)); padding:12px 0; }
 .fp-page .fp-overview .fp-summary-stats>div { display:flex; flex-direction:column; gap:5px; border-bottom:0; border-left:1px solid #3c5d7e; padding:0 8px; }
 .fp-page .fp-overview .fp-summary-stats>div:first-child { padding-left:0; border-left:0; }
 .fp-page .fp-overview .fp-summary-stats>div:last-child { padding-right:0; }
 .fp-page .fp-overview .fp-summary-stats strong { display:flex; flex-wrap:wrap; gap:2px 4px; align-items:baseline; font-size:24px; line-height:1.3; }
 .fp-page .fp-overview .fp-summary-stats strong small { font-size:12px; }
 .fp-page .fp-overview .fp-stat-note { font-size:11px; }
 .fp-page .fp-overview .fp-stat-label { font-size:12px; }
 .fp-page .fp-location-toolbar { gap:8px; }
 .fp-page .fp-overview-body { margin:12px 0; }
 .fp-page .fp-summary-icon { display:none; }
}
.fp-warning-disclosure { border:1px solid #dfd5ba; border-radius:10px; background:#fffaf0; color:#6e5836; margin:0 0 18px; padding:0 14px; }
.fp-warning-disclosure>summary { min-height:48px; padding:10px 0; cursor:pointer; font-size:13px; font-weight:600; }
.fp-warning-disclosure>summary small { display:block; font-size:11px; color:#8c785b; margin-left:14px; }
.fp-warning-disclosure #alerts-section { padding:10px 0; margin:0; border:0; background:transparent; }

/* forecast-location.css */
.fp-place{padding:16px 0 0;border-top:1px solid var(--line,#dce4ed);margin-top:16px;color:var(--ink,#153047)}
.fp-place-description{display:flex;gap:9px;align-items:flex-start;margin:0 0 10px;line-height:1.65;font-size:14px}
.fp-place-description small{display:block;color:var(--ink-2,#526575);font-size:12px;font-weight:400;margin-top:2px}
.fp-place-marker{color:#17648b;font-size:17px;line-height:1.5}
.fp-place-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.fp-place button{border:1px solid var(--line-strong,#bacbd8);border-radius:8px;background:var(--surface,#fff);color:var(--ink,#153047);padding:10px 12px;min-height:44px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.fp-place button:hover{background:#edf5fa;border-color:#17648b}
.fp-place button:disabled{opacity:.65;cursor:wait}
.fp-place button:focus-visible,.fp-place a:focus-visible,.fp-place summary:focus-visible{outline:3px solid #117ea5;outline-offset:3px}
.fp-place [hidden]{display:none!important}
.fp-place-caption,.fp-place-status,.fp-place-map-note{font-size:12px;line-height:1.7;color:var(--ink-2,#526575)}
.fp-place-caption{margin:0}
.fp-place-status:empty{display:none}
.fp-place-status{margin:10px 0}
.fp-place-candidates{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-place-candidates li{display:flex;flex-wrap:wrap;gap:5px 8px;align-content:flex-start;border:1px solid var(--line,#dce4ed);border-radius:10px;padding:12px;background:var(--surface,#fff)}
.fp-place-candidates a{font-size:14px;font-weight:700;line-height:1.6;color:#125b7f;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center}
.fp-place-distance{font-size:12px;line-height:1.7;color:var(--ink-2,#526575);white-space:nowrap}
.fp-place-candidates small{flex-basis:100%;font-size:12px;color:var(--ink-2,#526575);line-height:1.7}
.fp-place-map-details{margin-top:10px}
.fp-place-map-details>summary{min-height:44px;cursor:pointer;display:list-item;font-size:13px;font-weight:650;color:#125b7f;line-height:1.6;padding:10px 0}
.fp-place-map-actions{display:flex;flex-wrap:wrap;gap:8px}
.fp-place-map{height:310px;width:100%;position:relative;border:1px solid var(--line,#dce4ed);border-radius:12px;background:#eef3f6;overflow:hidden;isolation:isolate}
.fp-place-map-note{margin:8px 0}
.fp-place .leaflet-container{font-family:inherit}
.fp-place .leaflet-control-attribution{font-size:10px}
.fp-map-pin{display:flex;align-items:center;justify-content:center;background:transparent}
.fp-map-pin>span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid #fff;border-radius:50%;background:#fff;color:#526575;box-shadow:0 1px 6px #102a4338;font-size:21px;font-weight:bold}
.fp-map-pin.is-selected>span{background:#17648b;color:white;border:3px solid white;width:30px;height:30px}
.fp-map-popup{font-size:13px;line-height:1.6;max-width:240px}
.fp-map-popup p{margin:6px 0!important}
.fp-map-popup a{display:block;min-height:44px;align-content:center;font-weight:700}
@media(max-width:600px){.fp-place-candidates{grid-template-columns:1fr}.fp-place-candidates a{flex:1}.fp-place-distance{align-self:center}.fp-place-map{height:290px}.fp-place-caption{font-size:11px}}

/* forecast-v2.css */
/* 海況ページ v2（docs/forecast-design.md §2、docs/forecast-readability-2026-10-19.md §3）。トークンは theboat.css の :root のみ。
   旧 forecast.css の .fp-page より後に読む（padding / max-width / font-size を v2 の値で上書きするため）。 */
.fp2-page.fp-page{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter) 32px;color:var(--ink);font-size:var(--text-base)}
.fp2-page h1{font-size:var(--text-xl);line-height:var(--lh-tight);margin:10px 0 2px;font-weight:800}
.fp2-sub{margin:0 0 10px;color:var(--ink-3);font-size:var(--text-sm)}
.fp2-breadcrumb{display:flex;gap:6px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--ink-3);padding-top:10px}
.fp2-breadcrumb a{color:var(--ink-2)}

/* 警報バナー（該当時のみ最上部） */
.fp2-alert{border:1px solid var(--poor);background:var(--poor-tint);border-radius:var(--radius);padding:10px 12px;margin:8px 0 12px}
.fp2-alert.is-advisory{border-color:var(--fair);background:var(--fair-tint)}
.fp2-alert h2{margin:0 0 4px;font-size:var(--text-md);display:flex;align-items:center;gap:6px}
.fp2-alert ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:var(--text-sm)}
.fp2-alert .tb-cap{display:block;margin-top:6px}
.fp2-alert-line{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12px;color:var(--ink-3);margin:6px 0 0}

/* 地点・日付・時間帯 */
.fp2-select{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:10px 12px;margin:8px 0 12px}
.fp2-place-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--tap)}
.fp2-place-name{font-size:var(--text-lg);font-weight:800;line-height:1.2}
/* h1 は地点名の行そのもの（見た目を変えない）。続きの文言は読み上げ・検索用に視覚的に隠す（Issue #426）。 */
.fp2-page .fp2-h1{display:inline;margin:0;padding:0;font:inherit;color:inherit}
.fp2-page .fp2-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fp2-oneliner{margin:6px 0 2px;padding:8px 10px;border-left:3px solid var(--line-strong);background:var(--surface-2,transparent);border-radius:var(--radius-sm,6px)}
.fp2-oneliner[data-tone="good"]{border-left-color:var(--good)}.fp2-oneliner[data-tone="fair"]{border-left-color:var(--fair)}.fp2-oneliner[data-tone="poor"]{border-left-color:var(--poor)}
.fp2-oneliner-main{margin:0;font-size:var(--text-sm,14px);line-height:1.5;overflow-wrap:anywhere}
.fp2-oneliner-main .tb-mark{font-size:16px}
.fp2-oneliner-head{color:var(--ink-2)}
.fp2-oneliner-note{margin:2px 0 0}
.fp2-place-sub{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.fp2-place-row summary{list-style:none;cursor:pointer;color:var(--brand);font-weight:700;font-size:var(--text-sm);min-height:var(--tap);display:flex;align-items:center;padding:0 4px;white-space:nowrap;flex:0 0 auto}
.fp2-place-row summary::-webkit-details-marker{display:none}
.fp2-change{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}
.fp2-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:10px 0 0;background:var(--surface-2);padding:4px;border-radius:var(--radius-sm)}
.fp2-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--tap);border-radius:6px;text-decoration:none;color:var(--ink-2);font-size:var(--text-sm);font-weight:700;line-height:1.15;padding:4px 2px}
.fp2-tabs a small{font-weight:500;font-size:var(--text-xs);color:inherit;opacity:.8}
.fp2-tabs a[aria-current="page"]{background:var(--navy);color:var(--on-navy)}
.fp2-window{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:var(--text-xs);color:var(--ink-3)}
.fp2-window a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:var(--text-sm);font-weight:600}
.fp2-window a[aria-current="true"]{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-strong)}

/* 結論ブロック: 最大値を大きく、帯は全幅 */
.fp2-conclusion{background:var(--navy);color:var(--on-navy);border-radius:var(--radius);padding:14px 14px 10px;margin:0 0 10px}
.fp2-conclusion.is-stale{outline:2px solid var(--fair)}
.fp2-conclusion header{display:flex;justify-content:space-between;gap:6px 12px;align-items:flex-start;flex-wrap:wrap}
.fp2-conclusion h2{margin:0;font-size:var(--text-lg);font-weight:800;line-height:1.25;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.fp2-h-place{font-size:var(--text-base);font-weight:600;color:var(--on-navy-2)}
.fp2-conclusion .fp2-asof{font-size:12px;color:var(--on-navy-3);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fp2-badge{display:inline-block;border:1px solid var(--on-navy-line);border-radius:999px;padding:1px 7px;font-size:11px;color:var(--on-navy-2);font-weight:700}
.fp2-lines{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0}
.fp2-line{display:grid;gap:2px 0;padding:8px 0 6px;border-top:1px solid var(--on-navy-line)}
.fp2-line:first-child{border-top:0;padding-top:4px}
.fp2-line-head{display:grid;grid-template-columns:5.6em auto minmax(0,1fr);gap:0 8px;align-items:baseline}
.fp2-line-label{font-size:var(--text-sm);color:var(--on-navy-2);font-weight:700;white-space:nowrap}
.fp2-line.is-exceeded .fp2-line-label::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fair-on-navy);margin-left:5px;vertical-align:middle}
.fp2-line-main{display:inline-flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fp2-line-main strong{font-size:var(--text-xl);font-weight:800;line-height:1.1;letter-spacing:-.01em}
.fp2-line-main small{font-size:var(--text-xs);color:var(--on-navy-2);font-weight:600}
.fp2-line-status{font-size:12px;color:var(--on-navy-3);text-align:right;font-variant-numeric:tabular-nums;line-height:1.3;justify-self:end;max-width:100%;white-space:nowrap}
.fp2-line-status small{display:block;font-size:11px;font-weight:500;opacity:.9}
.fp2-line.is-exceeded .fp2-line-status{color:var(--fair-on-navy);font-weight:700}
.fp2-line-note{grid-column:1 / -1;padding-left:calc(5.6em + 8px);font-size:12px;color:var(--on-navy-3);line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fp2-band{display:block;width:100%;height:26px;margin-top:4px}
.fp2-band-win{fill:rgba(255,255,255,.09)}
.fp2-band-th{stroke:rgba(255,209,102,.5);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.fp2-bar{fill:var(--on-navy-2);opacity:.95}
.fp2-bar.is-out{opacity:.38}
.fp2-bar.is-over{fill:var(--fair-on-navy);opacity:1}
.fp2-bar.is-out.is-over{opacity:.55}
.fp2-bar.is-missing{fill:var(--on-navy-line)}
.fp2-axis{position:relative;height:14px;margin:2px 0 0;font-size:10px;color:var(--on-navy-3);font-variant-numeric:tabular-nums}
.fp2-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.fp2-axis span:nth-child(1){left:0;transform:none}
.fp2-axis span:nth-child(2){left:25%}
.fp2-axis span:nth-child(3){left:50%}
.fp2-axis span:nth-child(4){left:75%}
.fp2-axis span:nth-child(5){left:100%;transform:translateX(-100%)}
.fp2-conclusion-foot{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0 0;font-size:12px;color:var(--on-navy-3)}
.fp2-band-legend{display:inline-flex;align-items:center;gap:4px}
.fp2-band-legend i{display:inline-block;width:12px;height:10px;border-radius:2px;margin-left:6px}
.fp2-band-legend i:first-child{margin-left:0}
.fp2-lg-win{background:rgba(255,255,255,.14);border:1px solid var(--on-navy-line)}
.fp2-lg-over{background:var(--fair-on-navy)}
.fp2-conclusion-foot summary{cursor:pointer;color:var(--on-navy-2);list-style:none;display:inline-block;padding:12px 0;line-height:1.4}
.fp2-conclusion-foot summary::-webkit-details-marker{display:none}
.fp2-thresholds{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--on-navy-line);display:grid;gap:6px}
.fp2-thresholds label{display:grid;grid-template-columns:7em 1fr 4.5em;gap:8px;align-items:center;font-size:var(--text-sm);color:var(--on-navy-2)}
.fp2-thresholds input[type=range]{width:100%;min-height:var(--tap)}
.fp2-thresholds output{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;color:var(--on-navy)}
.fp2-thresholds .fp2-threshold-actions{display:flex;gap:8px;justify-content:flex-end}
.fp2-notice{margin:0 0 10px;font-size:12px;color:var(--ink-3);line-height:1.55}

/* 時間ごとの表（海天気の読み方: 1 行 1 時刻、矢印と段階色で読む） */
.fp2-table-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin:0 0 12px}
.fp2-table-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 6px 12px;flex-wrap:wrap}
.fp2-table-head h2{margin:0;font-size:var(--text-md)}
.fp2-step > button{min-height:36px;min-width:64px;padding:0 10px}
.fp2-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--text-base);table-layout:fixed}
.fp2-table th,.fp2-table td{padding:6px 3px;text-align:right;border-top:1px solid var(--line);white-space:nowrap;line-height:1.2;vertical-align:middle}
.fp2-table th{font-size:var(--text-xs);color:var(--ink-3);font-weight:600;background:var(--surface-2);border-top:0;position:sticky;top:0;z-index:1;padding-top:7px;padding-bottom:7px}
.fp2-table th small{display:block;font-size:10px;font-weight:500;opacity:.85}
.fp2-table th:nth-child(1),.fp2-table td:nth-child(1){text-align:left;padding-left:10px;width:2.7em}
.fp2-table th:nth-child(2),.fp2-table td:nth-child(2){text-align:center;width:2.2em;padding-left:0;padding-right:0}
.fp2-table th:nth-child(3),.fp2-table td:nth-child(3){width:4.9em}
.fp2-table th:nth-child(8),.fp2-table td:nth-child(8){padding-right:10px}
.fp2-table td.fp2-h{font-weight:600;color:var(--ink-2)}
.fp2-table td.fp2-wx svg{width:18px;height:18px;vertical-align:-4px;color:var(--ink-2)}
.fp2-table td.fp2-wx .fp2-wx-txt{font-size:var(--text-sm);color:var(--ink-2)}
.fp2-table td.fp2-wind{display:table-cell}
.fp2-table td.fp2-wind > span:last-child{display:inline-block;min-width:2.2em;text-align:right}
.fp2-arrow{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:3px;color:var(--ink-2)}
.fp2-arrow svg{display:block;width:12px;height:12px;transform:rotate(var(--deg,0deg));fill:currentColor}
.fp2-table td small{font-size:10px;color:var(--ink-3);line-height:1;margin-left:2px;font-weight:500}
.fp2-table td.is-missing{color:var(--ink-3)}
.fp2-table td.is-zero{color:var(--ink-3)}
.fp2-table td.lv-1{background:var(--fair-tint);color:var(--fair);font-weight:700}
.fp2-table td.lv-2{background:var(--poor-tint);color:var(--poor);font-weight:800}
.fp2-table td.lv-1 .fp2-arrow,.fp2-table td.lv-2 .fp2-arrow{color:currentColor}
.fp2-table td.lv-1 small,.fp2-table td.lv-2 small{color:inherit;opacity:.8}
.fp2-table tr.in-window td{border-top-color:var(--line)}
.fp2-table tr.in-window td:first-child{box-shadow:inset 3px 0 0 var(--brand);color:var(--brand-strong);font-weight:800}
.fp2-table tbody.fp2-day-head td{background:var(--surface-2);text-align:left;padding:7px 10px;font-size:12px;color:var(--ink-2);white-space:normal;line-height:1.5;border-top:1px solid var(--line-strong)}
.fp2-table tbody.fp2-day-head strong{font-size:var(--text-sm);color:var(--ink);margin-right:8px}
.fp2-table tbody.fp2-day-head span{display:inline-block;margin-right:10px;font-variant-numeric:tabular-nums}
.fp2-table tbody.fp2-day-head span em{font-style:normal;color:var(--ink-3);margin-right:3px}
.fp2-table tbody.fp2-day-head .fp2-dh-sun svg{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:2px;color:var(--ink-3)}
.fp2-table tbody.fp2-day-head .fp2-dh-phase{font-weight:700;color:var(--ink)}
.fp2-table tbody.fp2-day-head small{color:var(--ink-3)}
.fp2-more-days{display:flex;gap:8px;padding:8px 12px 10px;flex-wrap:wrap}
.fp2-more-days button{min-height:var(--tap)}
.fp2-legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 12px 10px;margin:0;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line)}
.fp2-legend span{display:inline-flex;align-items:center;gap:4px}
.fp2-legend b{font-weight:700;color:var(--ink-2)}
.fp2-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line)}
.fp2-legend .fp2-lv1{background:var(--fair-tint);border-color:var(--fair)}
.fp2-legend .fp2-lv2{background:var(--poor-tint);border-color:var(--poor)}
.fp2-legend .fp2-lg-win-bar{width:4px;height:12px;border-radius:1px;background:var(--brand);border:0}

/* モデルのブレ */
.fp2-models summary.is-flagged{color:var(--fair)}
.fp2-models-body{padding:6px 0 0}
.fp2-models-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--text-xs);margin:6px 0}
.fp2-models-table th,.fp2-models-table td{padding:4px 4px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
.fp2-models-table th{color:var(--ink-3);font-weight:600;background:var(--surface-2);border-top:0}
.fp2-models-table th:first-child,.fp2-models-table td:first-child{text-align:left}
.fp2-models-table tr.is-flagged td{background:var(--fair-tint)}
.fp2-models-meta{font-size:12px;color:var(--ink-3);margin:4px 0 0}

/* 船宿の動き・実況・潮 */
.fp2-posts{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.fp2-posts li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 12px;border-top:1px solid var(--line);font-size:var(--text-sm)}
.fp2-posts li:first-child{border-top:0}
.fp2-posts .fp2-post-boat{font-weight:700;color:var(--ink);text-decoration:none}
.fp2-posts .fp2-post-time{color:var(--ink-3);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.fp2-posts p{grid-column:1 / -1;margin:0;color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere}
.fp2-posts .fp2-post-link{grid-column:1 / -1;font-size:var(--text-xs);color:var(--brand-strong);min-height:28px;display:inline-flex;align-items:center}
.fp2-tide-list{display:flex;flex-wrap:wrap;gap:4px 12px;font-variant-numeric:tabular-nums}

/* マイ地点・ホーム画面追加 */
.fp2-star{appearance:none;border:0;background:transparent;color:var(--ink-3);font-size:20px;line-height:1;min-width:var(--tap);min-height:var(--tap);cursor:pointer;vertical-align:middle;padding:0}
.fp2-star[aria-pressed="true"]{color:var(--fair)}
.fp2-my{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.fp2-my a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink);text-decoration:none;font-size:var(--text-sm)}
.fp2-my a[aria-current="page"]{border-color:var(--brand);color:var(--brand-strong);background:var(--brand-tint)}
.fp2-a2hs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}

.fp2-page .tb-cap{font-size:12px}

/* セクション共通 */
.fp2-section{margin:0 0 12px}
.fp2-section h2{font-size:var(--text-md);margin:0 0 6px}
.fp2-kv{display:grid;grid-template-columns:7em 1fr;gap:4px 10px;font-size:var(--text-sm);margin:0}
.fp2-kv dt{color:var(--ink-3)}
.fp2-kv dd{margin:0;overflow-wrap:anywhere}
.fp2-sources{font-size:12px;color:var(--ink-3);line-height:1.7;border-top:1px solid var(--line);padding-top:10px;margin-top:16px}
.fp2-sources p{margin:0 0 4px}
.fp2-nearby{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.fp2-nearby a{display:inline-flex;flex-direction:column;min-height:var(--tap);justify-content:center;padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--ink);font-size:var(--text-sm)}
.fp2-nearby a small{color:var(--ink-3);font-size:var(--text-xs)}
.fp2-fold summary{min-height:var(--tap);display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;font-size:var(--text-sm);color:var(--ink-2)}
@media (max-width:359px){
  .fp2-line-head{grid-template-columns:4.6em auto minmax(0,1fr)}
  .fp2-line-note{padding-left:calc(4.6em + 8px)}
  .fp2-table{font-size:12.5px}
  .fp2-table th,.fp2-table td{padding:6px 2px}
  .fp2-table th:nth-child(1),.fp2-table td:nth-child(1){padding-left:6px;width:2.4em}
  .fp2-table td small{display:none}
  .fp2-table th:nth-child(3),.fp2-table td:nth-child(3){width:4.4em}
  .fp2-table th:nth-child(8),.fp2-table td:nth-child(8){padding-right:6px}
}
@media (min-width:640px){
  .fp2-line-head{grid-template-columns:7em auto minmax(0,1fr)}
  .fp2-line-note{padding-left:calc(7em + 8px)}
  .fp2-band{height:32px}
  .fp2-table th,.fp2-table td{padding:7px 8px}
  .fp2-table th:nth-child(3),.fp2-table td:nth-child(3){width:6em}
}
@media (prefers-reduced-motion:no-preference){.fp2-tabs a,.fp2-window a{transition:background .12s}}
/* #430 この港の船宿と釣果: タップしやすい行（44px）。長い船宿名は折り返す。 */
.fp2-portlinks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.fp2-portlinks li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:44px;font-size:var(--text-sm);overflow-wrap:anywhere}
.fp2-portlinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.fp2-portlinks a:active{opacity:.7}

/* 7日間の出船しやすさの目安（Issue #432）。SSR 済みで高さは行の min-height（44px）が決める。
   スマホは 1 日 1 行の縦リスト（タップ領域 44px 以上）、広い画面は 7 列の帯。 */
.fp2-week{margin:8px 0 2px}
.fp2-week-h{margin:0 0 4px;font-size:var(--text-sm,14px);font-weight:800;line-height:1.4}
.fp2-week-fold{margin:0}
.fp2-week-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:2px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--surface,transparent);color:var(--ink);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.fp2-week-sum::-webkit-details-marker{display:none}
.fp2-week-sum::marker{content:""}
.fp2-week-sum:active{background:var(--surface-2)}
.fp2-week-sum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fp2-week-sum .fp2-week-h{margin:0;grid-column:1}
.fp2-week-peek{grid-column:1;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--text-xs,12px);color:var(--ink-2);line-height:1.4}
.fp2-week-peek-d{white-space:nowrap}
.fp2-week-peek .tb-mark{margin-left:1px;font-size:13px}
.fp2-week-toggle{grid-column:2;grid-row:1 / span 2;font-size:var(--text-xs,12px);font-weight:700;color:var(--brand,var(--navy));white-space:nowrap}
.fp2-week-toggle::after{content:"7日を開く ▾"}
.fp2-week-fold[open] .fp2-week-toggle::after{content:"閉じる ▴"}
.fp2-week-fold[open] .fp2-week-sum{margin-bottom:4px}
.fp2-week-fold[open] .fp2-week-peek{display:none}
.fp2-week-h small{display:block;font-weight:500;font-size:var(--text-xs,12px);color:var(--ink-3)}
.fp2-week-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fp2-week-cell a{display:grid;grid-template-columns:4.6em 1.5em minmax(0,1fr);align-items:center;column-gap:6px;min-height:44px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--radius-sm,6px);text-decoration:none;color:var(--ink);background:var(--surface,transparent)}
.fp2-week-cell a:active{background:var(--surface-2)}
.fp2-week-cell a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fp2-week-cell.is-current a{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.fp2-week-date{font-weight:700;font-size:var(--text-sm,14px);line-height:1.2}
.fp2-week-date small{display:block;font-weight:500;font-size:var(--text-xs,12px);color:var(--ink-3)}
.fp2-week-mark{font-size:16px;line-height:1;text-align:center}
.fp2-week-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp2-week-vals{display:flex;flex-wrap:wrap;gap:0 10px;font-size:var(--text-sm,14px);line-height:1.4}
.fp2-week-vals b{font-weight:800}
.fp2-week-vals small{font-size:var(--text-xs,12px);color:var(--ink-3)}
.fp2-week-na{grid-column:2 / -1;color:var(--ink-3);font-size:var(--text-sm,14px)}
.fp2-week-note{margin:4px 0 0}
@media (max-width:359px){.fp2-week-vals small{display:none}.fp2-week-cell a{column-gap:4px;padding:4px 6px}}
@media (min-width:720px){
  .fp2-week-list{grid-template-columns:repeat(7,minmax(0,1fr))}
  .fp2-week-sum{display:block;min-height:0;padding:0;border:0;background:none;cursor:default;pointer-events:none;margin-bottom:4px}
  .fp2-week-sum .fp2-week-h{margin:0 0 4px}
  .fp2-week-peek,.fp2-week-toggle{display:none}
  .fp2-week-cell a{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:2px;min-height:96px;padding:6px 4px}
  .fp2-week-vals{flex-direction:column;align-items:center}
  .fp2-week-na{grid-column:auto}
  .fp2-week-label{position:static;width:auto;height:auto;clip:auto;font-size:var(--text-xs,12px);color:var(--ink-2)}
  .fp2-week-mark{display:flex;flex-direction:column;align-items:center;gap:2px}
}
/* 720px 以上は閉じていても 7 列を常に出す（スマホだけ折りたたむ。Issue #432 2026-11-05） */
@supports selector(::details-content){@media (min-width:720px){.fp2-week-fold::details-content{content-visibility:visible;display:block}}}