@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #172b46; --muted: #6b7b90; --blue: #3678c8; --blue-dark: #225ba4;
  --pale: #eff6ff; --line: #e0e8f2; --surface: #fff; --bg: #f5f8fc;
  --green: #18795c; --green-bg: #e4f6ef; --amber: #9b5a05; --amber-bg: #fff1d8;
  --red: #a63d4a; --red-bg: #ffeaec;
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.65; }
a { color: var(--blue-dark); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px max(22px, calc((100% - 1120px) / 2)); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#e7f2ff; color:var(--blue); font-size:25px; }
.brand strong, .brand small { display:block; }
.brand strong { font-size:16px; letter-spacing:.02em; }
.brand small { color:var(--muted); font-size:11px; }
.header-note { color:var(--muted); font-size:12px; }
.container { max-width:1120px; margin:0 auto; padding:30px 22px 44px; }
.intro { margin:6px 0 26px; }
.eyebrow { display:block; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.14em; }
h1 { margin:8px 0 10px; font-size:clamp(26px, 4vw, 40px); line-height:1.35; letter-spacing:-.035em; }
.intro-copy { max-width:690px; color:var(--muted); margin:0; font-size:14px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 28px rgba(26,55,91,.045); }
.search-panel { padding:22px 24px; display:grid; grid-template-columns:1fr; gap:14px; }
.search-intro h2, h2 { margin:3px 0 0; font-size:18px; letter-spacing:-.02em; }
.muted { color:var(--muted); font-size:12px; margin:5px 0 0; }
.location-form { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(220px,1.2fr) auto; align-items:end; gap:12px; }
.field { min-width:0; position:relative; }
.field label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; }
input, select { min-width:0; width:100%; min-height:46px; border:1px solid #cdd9e8; border-radius:12px; padding:11px 13px; font:inherit; font-size:14px; color:var(--ink); background:#fff; outline:none; }
input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(54,120,200,.12); }
button { border:0; border-radius:12px; background:var(--blue); color:#fff; padding:0 18px; min-height:46px; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
button:hover { background:var(--blue-dark); }
button:disabled { opacity:.65; cursor:wait; }
.status { min-height:18px; margin:0; font-size:12px; color:var(--muted); }
.status.error { color:var(--red); }
.candidate-list { position:absolute; z-index:20; top:calc(100% + 5px); left:0; right:0; max-height:260px; overflow:auto; padding:5px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px rgba(26,55,91,.15); }
.candidate-list[hidden] { display:none; }
.candidate-option { display:block; width:100%; text-align:left; white-space:normal; padding:10px 11px; min-height:0; background:#fff; color:var(--ink); border-radius:8px; font-size:13px; font-weight:500; }
.candidate-option:hover, .candidate-option:focus { background:var(--pale); color:var(--blue-dark); }
.candidate-empty { padding:10px 11px; color:var(--muted); font-size:12px; }
.forecast-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:18px; margin-top:18px; }
.main-forecast, .chart-panel, .hourly-panel, .method-panel { padding:24px; min-width:0; }
.panel-topline, .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.date-label { color:var(--muted); font-size:11px; }
.main-forecast h2 { font-size:22px; margin-top:9px; }
.risk-row { display:flex; align-items:center; gap:15px; margin:23px 0 20px; }
.risk-icon { flex:0 0 58px; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--amber-bg); color:var(--amber); font-size:27px; font-weight:800; }
.risk-label { font-size:24px; font-weight:800; line-height:1.3; margin:0; }
.risk-summary { color:var(--muted); font-size:12px; margin:5px 0 0; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric { background:#f5f8fc; border-radius:13px; padding:14px; }
.metric span { display:block; color:var(--muted); font-size:11px; }
.metric strong { display:block; margin-top:4px; font-size:25px; letter-spacing:-.04em; }
.metric strong small { font-size:12px; font-weight:500; letter-spacing:0; }
.explanation { margin:16px 0 0; color:#4b6078; font-size:12px; }
.unit-pill, .method-tag { padding:4px 9px; background:var(--pale); color:var(--blue-dark); border-radius:8px; font-size:10px; font-weight:700; white-space:nowrap; }
.chart-wrap { margin-top:18px; width:100%; }
#pressure-chart { display:block; width:100%; height:auto; overflow:visible; }
#pressure-chart .gridline { stroke:#e6edf5; stroke-width:1; }
#pressure-chart .chart-line { fill:none; stroke:#347dce; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
#pressure-chart .chart-area { fill:url(#chartGradient); }
#pressure-chart .point { fill:#fff; stroke:#347dce; stroke-width:3; }
#pressure-chart text { fill:#7a8ba0; font-size:12px; font-family:inherit; }
.chart-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; padding:0 4px; }
.small { font-size:10px; }
.hourly-panel, .method-panel { margin-top:18px; }
.hourly-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:17px; }
.hour-card { padding:13px 8px; text-align:center; background:#f6f9fd; border-radius:12px; }
.hour-card .hour { font-size:11px; color:var(--muted); }
.hour-card .pressure { font-size:17px; font-weight:800; margin-top:5px; }
.hour-card .delta { font-size:10px; margin-top:3px; }
.delta.down { color:var(--red); } .delta.up { color:var(--green); } .delta.steady { color:var(--muted); }
.method-lead { color:#4b6078; font-size:13px; margin:14px 0; }
.threshold-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.threshold-card { padding:15px; border-radius:13px; border:1px solid var(--line); }
.threshold-status { display:inline-block; font-size:11px; font-weight:800; padding:3px 8px; border-radius:7px; margin-bottom:9px; }
.threshold-card strong { display:block; font-size:13px; }
.threshold-card p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.threshold-low { background:#f2fbf7; } .threshold-low .threshold-status { background:var(--green-bg); color:var(--green); }
.threshold-medium { background:#fffaf0; } .threshold-medium .threshold-status { background:var(--amber-bg); color:var(--amber); }
.threshold-high { background:#fff6f6; } .threshold-high .threshold-status { background:var(--red-bg); color:var(--red); }
.calculation-detail { margin:14px 0 0; padding:12px 14px; background:#f5f8fc; border-radius:11px; font-size:12px; color:#405773; }
.method-caveat { margin:12px 0 0; color:var(--muted); font-size:11px; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.info-card { padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.info-icon { display:inline-grid; place-items:center; width:35px; height:35px; background:var(--pale); color:var(--blue); border-radius:11px; font-size:21px; }
.info-card h3 { margin:10px 0 5px; font-size:14px; }
.info-card p { margin:0; color:var(--muted); font-size:12px; }
.disclaimer { margin-top:18px; padding:17px 20px; border-radius:14px; background:#fff8e9; color:#72531e; font-size:12px; }
.disclaimer p { margin:5px 0 0; }
.site-footer { text-align:center; padding:22px; border-top:1px solid var(--line); background:#fff; color:var(--muted); font-size:11px; }
.site-footer p { margin:4px 0; }
.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; }
.risk-low .risk-icon { background:var(--green-bg); color:var(--green); }
.risk-low .risk-label { color:var(--green); }
.risk-medium .risk-icon { background:var(--amber-bg); color:var(--amber); }
.risk-medium .risk-label { color:var(--amber); }
.risk-high .risk-icon { background:var(--red-bg); color:var(--red); }
.risk-high .risk-label { color:var(--red); }
@media (max-width:760px) {
  .site-header { padding:14px 17px; } .header-note { display:none; }
  .container { padding:24px 15px 32px; }
  .location-form { grid-template-columns:1fr; }
  .search-panel { padding:19px; gap:12px; }
  .forecast-grid { grid-template-columns:1fr; gap:13px; margin-top:13px; }
  .main-forecast, .chart-panel, .hourly-panel, .method-panel { padding:19px; }
  .info-grid { grid-template-columns:1fr; gap:10px; }
  .hourly-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .threshold-grid { grid-template-columns:1fr; }
  .mobile-break { display:none; } h1 { font-size:27px; }
}
@media (max-width:380px) {
  .metric { padding:11px; } .metric strong { font-size:22px; }
}

/* 第3段階：7日間予報 */
.seven-day-panel { margin-top:18px; padding:24px; min-width:0; }
.seven-day-intro { margin-top:9px; }
.seven-day-chart { margin-top:16px; min-height:150px; padding:12px 8px 4px; border-radius:14px; background:#f7faff; overflow:hidden; }
.seven-day-chart svg { display:block; width:100%; height:auto; }
.seven-day-chart .day-grid { stroke:#e1eaf4; stroke-width:1; }
.seven-day-chart .day-line { fill:none; stroke:#347dce; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.seven-day-chart .day-dot { fill:#fff; stroke:#347dce; stroke-width:2.5; }
.seven-day-chart text { fill:#71839a; font-size:11px; font-family:inherit; }
.seven-day-list { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; margin-top:14px; }
.day-card { min-width:0; padding:13px 9px; text-align:center; border:1px solid var(--line); border-radius:13px; background:#fff; }
.day-card .day-name { color:var(--muted); font-size:11px; font-weight:700; }
.day-card .day-date { margin-top:2px; font-size:12px; font-weight:700; }
.day-card .day-risk { display:inline-block; margin:9px 0 6px; padding:4px 7px; border-radius:7px; font-size:11px; font-weight:800; }
.day-card .day-pressure { font-size:16px; font-weight:800; }
.day-card .day-pressure small { font-size:10px; font-weight:500; }
.day-card .day-range { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.day-card.risk-low { background:#f7fcf9; border-color:#d8eee4; }
.day-card.risk-low .day-risk { color:var(--green); background:var(--green-bg); }
.day-card.risk-medium { background:#fffdf7; border-color:#f3e5c8; }
.day-card.risk-medium .day-risk { color:var(--amber); background:var(--amber-bg); }
.day-card.risk-high { background:#fffafa; border-color:#f1d9dc; }
.day-card.risk-high .day-risk { color:var(--red); background:var(--red-bg); }
.seven-day-note { margin:13px 0 0; color:var(--muted); font-size:11px; }
@media (max-width:900px) { .seven-day-list { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { .seven-day-panel { padding:19px; } .seven-day-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .day-card { padding:12px 8px; } }