:root {
  --ink: #09243a;
  --navy: #061a2b;
  --navy-2: #0c2f49;
  --blue: #146082;
  --aqua: #52b8c5;
  --sun: #ef583f;
  --paper: #f4f7f8;
  --white: #fff;
  --muted: #62717c;
  --line: #d8e1e5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans JP", sans-serif; line-height: 1.75; }
a { color: inherit; }
button, select { font: inherit; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.topbar { position: absolute; z-index: 5; inset: 0 0 auto; height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1180px) / 2)); color: white; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; line-height: 1; }
.brand b { display: block; font-family: Georgia, serif; font-size: 1.25rem; letter-spacing: .02em; }
.brand small { display: block; margin-top: 7px; font-family: "Roboto Mono", monospace; font-size: .63rem; letter-spacing: .2em; opacity: .72; }
.brand-mark { position: relative; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 51%; transform: scale(2.75); }
nav { display:flex; align-items:center; gap:28px; font-size:.88rem; }
nav a { text-decoration:none; color:rgba(255,255,255,.82); }
nav a:hover { color:white; }
.blog-link { padding:10px 16px; border:1px solid rgba(255,255,255,.35); }
.hero { position:relative; min-height:720px; height:88vh; max-height:900px; display:flex; align-items:center; color:white; overflow:hidden; background:var(--navy); }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,17,30,.93) 0%, rgba(3,24,39,.72) 42%, rgba(3,24,39,.18) 75%), linear-gradient(0deg, rgba(2,17,30,.78), transparent 42%); }
.hero-content { position:relative; z-index:1; width:min(1180px, calc(100% - 48px)); margin:40px auto 0; }
.eyebrow { display:flex; align-items:center; gap:12px; font-family:"Roboto Mono",monospace; font-size:.74rem; letter-spacing:.15em; color:#b6d9e2; }
.eyebrow span { width:28px; height:1px; background:var(--sun); }
.eyebrow.dark { color:#607683; }
.hero h1 { margin:24px 0 24px; max-width:800px; font-family:"Shippori Mincho","Yu Mincho",serif; line-height:1; font-weight:700; }
.hero h1 span { display:block; margin-bottom:18px; color:#9fc5d1; font:500 clamp(.66rem,1vw,.82rem) "Roboto Mono",monospace; letter-spacing:.25em; }
.hero h1 strong { position:relative; display:inline-block; padding:0 .03em .14em 0; color:#fff; font-size:clamp(4rem,8.5vw,7.8rem); font-weight:800; letter-spacing:.13em; text-shadow:0 10px 34px rgba(0,0,0,.34); }
.hero h1 strong::after { content:""; position:absolute; left:0; right:.13em; bottom:0; height:2px; background:linear-gradient(90deg,var(--sun),rgba(239,88,63,0)); }
.hero h1 em { display:block; margin-top:18px; color:#ffd3c7; font-size:clamp(1.15rem,2vw,1.65rem); font-style:normal; font-weight:500; letter-spacing:.16em; line-height:1.7; }
.hero-content > p:not(.eyebrow) { max-width:620px; color:rgba(255,255,255,.75); font-size:1.04rem; }
.hero-actions { margin-top:36px; display:flex; align-items:center; gap:30px; }
.primary-action { display:inline-flex; gap:22px; align-items:center; padding:15px 20px; color:white; background:var(--sun); text-decoration:none; font-weight:600; box-shadow:0 10px 34px rgba(239,88,63,.25); }
.tagline { font-family:Georgia,serif; font-style:italic; color:rgba(255,255,255,.58); }
.sea-readout { position:absolute; z-index:1; bottom:0; right:max(24px, calc((100vw - 1180px) / 2)); display:flex; background:rgba(4,23,38,.76); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.15); }
.sea-readout span { min-width:150px; padding:16px 22px; font-size:.83rem; border-left:1px solid rgba(255,255,255,.12); }
.sea-readout small { display:block; color:#73b7c8; font: .62rem "Roboto Mono",monospace; letter-spacing:.15em; }
.analytics { padding:104px 0 112px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; margin-bottom:38px; }
.section-heading h2, .insight h2 { margin:8px 0 8px; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(2rem,3.4vw,3.25rem); line-height:1.35; font-weight:400; }
.section-heading p { margin:0; color:var(--muted); }
.year-switch { display:flex; align-items:center; border-bottom:1px solid #c9d4d9; }
.year-switch button { padding:10px 15px; border:0; border-bottom:2px solid transparent; background:none; color:#8a979d; cursor:pointer; transition:color .2s,border-color .2s; }
.year-switch button:hover, .year-switch button:focus-visible { color:var(--ink); }
.year-switch button.active { color:var(--ink); border-color:var(--sun); font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:white; }
.metrics article { padding:26px 24px; min-height:150px; display:flex; gap:16px; border-right:1px solid var(--line); }
.metrics article:last-child { border:0; }
.metric-icon { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; color:var(--sun); border:1px solid #efb9ab; border-radius:50%; }
.metrics small { color:var(--muted); font-size:.76rem; }
.metrics strong { display:block; margin-top:3px; font:500 2.25rem "Roboto Mono",monospace; line-height:1.25; }
.metrics strong em { margin-left:4px; font:500 .8rem "Noto Sans JP",sans-serif; font-style:normal; }
.metrics p { margin:5px 0 0; color:#839098; font-size:.71rem; }
.chart-card { margin-top:26px; padding:32px 34px 24px; background:var(--navy); color:white; box-shadow:0 24px 60px rgba(5,31,49,.15); }
.chart-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.chart-head h3 { margin:0; font-family:Georgia,"Yu Mincho",serif; font-size:1.5rem; font-weight:400; }
.chart-head p { margin:3px 0 0; font-size:.76rem; color:#87a3b3; }
.legend { color:#aec5d0; font-size:.76rem; }.legend i { display:inline-block; width:9px; height:9px; margin-right:7px; background:var(--aqua); }
.chart-shell { position:relative; height:330px; margin-top:26px; padding-left:36px; border-bottom:1px solid rgba(255,255,255,.2); background:repeating-linear-gradient(to bottom, transparent 0, transparent 81px, rgba(255,255,255,.075) 82px); }
.axis-labels { position:absolute; inset:-10px auto -12px 0; display:flex; flex-direction:column; justify-content:space-between; color:#6d8b9b; font: .65rem "Roboto Mono",monospace; }
.chart { height:100%; display:grid; grid-template-columns:repeat(12,1fr); gap:14px; align-items:end; padding:0 8px; }
.bar-group { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; position:relative; }
.bar { width:min(34px,72%); min-height:2px; background:linear-gradient(180deg,#74d2dc,#27758f); cursor:pointer; position:relative; transition:filter .2s, transform .2s; }
.bar:hover, .bar:focus-visible { filter:brightness(1.25); transform:translateY(-2px); outline:2px solid white; outline-offset:3px; }
.bar.peak { background:linear-gradient(180deg,#ff9d83,var(--sun)); }
.bar-value { color:#d9ecf1; font:.65rem "Roboto Mono",monospace; }
.bar-month { color:#7797a7; font:.67rem "Roboto Mono",monospace; white-space:nowrap; }
.tooltip { position:absolute; left:50%; bottom:calc(var(--h) + 50px); transform:translateX(-50%); z-index:4; width:max-content; max-width:190px; padding:9px 11px; color:var(--ink); background:white; font-size:.72rem; line-height:1.5; box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .15s; }
.bar:hover + .tooltip, .bar:focus-visible + .tooltip { opacity:1; }
.chart-note { margin-top:20px; color:#8aa5b2; font-size:.72rem; }.chart-note > span { margin-right:10px; color:#f78c73; font-family:"Roboto Mono",monospace; }.chart-note b { font-weight:400; }
.records-section { padding:100px 0 108px; background:white; border-top:1px solid var(--line); }
.section-heading.compact { align-items:center; }
.filter-wrap { display:flex; align-items:center; gap:12px; font-size:.78rem; color:var(--muted); }
.filter-wrap select { min-width:135px; padding:10px 36px 10px 13px; border:1px solid #bfcdd3; background:white; color:var(--ink); }
.record-list { border-top:1px solid var(--ink); }
.record { display:grid; grid-template-columns:115px 1fr 88px 42px; gap:22px; align-items:center; padding:22px 12px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .2s; }
.record:hover { background:#f1f6f7; }
.record time { font: .76rem "Roboto Mono",monospace; color:var(--muted); }
.record-main { min-width:0; }.record-main h3 { margin:0; font-size:1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.record-main p { margin:5px 0 0; color:#71818a; font-size:.78rem; }
.record-count { text-align:right; font:500 1.15rem "Roboto Mono",monospace; }.record-count small { display:block; color:#83949c; font:.65rem "Noto Sans JP",sans-serif; }
.record-arrow { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); color:var(--sun); }
.empty { padding:40px 12px; color:var(--muted); text-align:center; }
.insight { padding:112px 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.insight-copy .lead { margin:26px 0 16px; color:var(--blue); font-size:1.12rem; font-weight:600; }
.insight-copy > p:not(.eyebrow):not(.lead) { color:var(--muted); }
.insight-copy > a { display:inline-flex; gap:22px; margin-top:20px; padding-bottom:6px; text-decoration:none; font-weight:600; border-bottom:1px solid var(--ink); }
.insight-panel { padding:28px 32px 30px; background:var(--navy); color:white; }
.panel-top { display:flex; justify-content:space-between; color:#7693a3; font:.66rem "Roboto Mono",monospace; letter-spacing:.12em; }
.season-ring { position:relative; width:330px; height:330px; margin:18px auto 12px; border-radius:50%; background:conic-gradient(var(--sun) 0 var(--p1,24%),#2d8399 var(--p1,24%) var(--p2,54%),#6fc0c9 var(--p2,54%) var(--p3,100%),#16445a var(--p3,100%) 100%); transform:rotate(25deg); }
.season-ring::before { content:""; position:absolute; inset:38px; z-index:1; background:var(--navy); border-radius:50%; }
.season-ring::after { content:""; position:absolute; inset:-40px; border:1px dashed rgba(255,255,255,.16); border-radius:50%; }
.ring-center { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-25deg); }
.ring-center strong { font:500 3.5rem "Roboto Mono",monospace; }.ring-center small { color:#88aab8; letter-spacing:.25em; }
.season { position:absolute; z-index:2; color:#d0e1e7; font-size:.68rem; white-space:nowrap; transform:rotate(-25deg); }.season b { display:block; font:500 .85rem "Roboto Mono",monospace; }
.spring { top:-28px; left:33px; }.summer { right:-60px; top:90px; }.autumn { right:12px; bottom:-38px; }.winter { left:-55px; bottom:65px; }
.signal-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; }.signal-row span { color:#93acb8; }.signal-row i { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; }.good { background:var(--sun); }.variable { background:#6fc0c9; }.next { border:1px solid #9eb7c2; }
footer { padding:40px 0; color:white; background:#03131f; }
.footer-inner { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; }
.footer-inner p { margin:0; text-align:center; color:#9bb0ba; font-size:.77rem; }.footer-inner p small { color:#5f7885; }
.footer-inner > a { text-decoration:none; font-size:.78rem; color:#bfd2d9; }
@media (max-width:900px) {
  nav a:not(.blog-link) { display:none; }
  .hero { min-height:680px; }
  .metrics { grid-template-columns:1fr 1fr; }.metrics article:nth-child(2){border-right:0}.metrics article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .section-heading { align-items:flex-start; flex-direction:column; }
  .insight { grid-template-columns:1fr; gap:55px; }
  .footer-inner { grid-template-columns:1fr; justify-items:center; }.footer-inner p{text-align:center}
}
@media (max-width:620px) {
  .wrap, .hero-content { width:min(100% - 30px,1180px); }
  .topbar { height:70px; padding:0 15px; }.brand b{font-size:1.03rem}.brand-mark{width:36px;height:36px;flex-basis:36px}.blog-link{padding:8px 10px;font-size:.73rem}
  .hero { min-height:720px; height:100svh; }.hero > img{object-position:61% center}.hero-shade{background:linear-gradient(90deg,rgba(2,17,30,.94),rgba(3,24,39,.45)),linear-gradient(0deg,rgba(2,17,30,.9),transparent 48%)}
  .hero-content { margin-top:0; padding-top:30px; }.hero h1 strong{font-size:3.7rem;letter-spacing:.08em}.hero h1 em{font-size:1rem;letter-spacing:.1em}.hero-content>p:not(.eyebrow){font-size:.92rem}.hero-content br{display:none}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}
  .sea-readout { left:0; right:0; }.sea-readout span{flex:1;min-width:0;padding:12px 9px;text-align:center;font-size:.67rem}
  .analytics,.records-section,.insight{padding:76px 0}.section-heading h2,.insight h2{font-size:2rem}.metrics{grid-template-columns:1fr}.metrics article{border-right:0;border-bottom:1px solid var(--line)!important}.metrics article:last-child{border:0!important}
  .chart-card{padding:24px 14px 20px}.chart-shell{height:285px;padding-left:27px}.chart{gap:5px;padding:0}.bar{width:68%}.bar-month{font-size:.58rem}.bar-value{font-size:.58rem}.chart-head{flex-direction:column}.legend{align-self:flex-end}
  .section-heading.compact{align-items:flex-start}.filter-wrap{width:100%;justify-content:space-between}.filter-wrap select{flex:1}
  .record{grid-template-columns:1fr 58px 34px;gap:10px;padding:18px 4px}.record time{grid-column:1/-1}.record-main h3{white-space:normal}.record-main p{display:none}
  .insight-panel{padding:24px 18px}.season-ring{width:240px;height:240px}.season-ring::before{inset:29px}.season-ring::after{inset:-31px}.season{font-size:.6rem}.summer{right:-49px;top:68px}.winter{left:-43px;bottom:52px}.ring-center strong{font-size:2.8rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar{transition:none}}