:root { --ink:#101820; --navy:#172b3a; --yellow:#ffd600; --red:#d62f2f; --paper:#f4f1e8; --line:#d7d4ca; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Noto Sans JP","Yu Gothic",YuGothic,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:82px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ddd; background:rgba(255,255,255,.96); position:sticky; top:0; z-index:20; }
.brand img { width:156px; height:auto; display:block; }
nav { display:flex; gap:30px; font-size:13px; font-weight:700; }
nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.status-strip { min-height:54px; padding:10px clamp(22px,5vw,76px); background:#fff; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; font-size:12px; }
.status-state { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.status-state span { width:10px; height:10px; border-radius:50%; background:#16834b; box-shadow:0 0 0 4px rgba(22,131,75,.13); }
.status-strip p { margin:0; color:#4f5559; }
.status-strip time { color:#697177; white-space:nowrap; }
.news-section { padding:clamp(58px,7vw,96px) clamp(24px,7vw,110px); display:grid; grid-template-columns:minmax(200px,.62fr) minmax(0,1.5fr); gap:clamp(40px,7vw,110px); background:#fff; border-bottom:1px solid var(--line); }
.news-heading h2 { margin:14px 0 0; font-size:clamp(34px,4vw,54px); letter-spacing:-.05em; }
.news-entry { border-top:5px solid var(--navy); background:var(--paper); padding:clamp(24px,4vw,42px); }
.news-entry-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.news-entry-header>time { font-size:13px; font-weight:800; letter-spacing:.08em; }
.news-status { padding:6px 11px; font-size:11px; font-weight:800; letter-spacing:.08em; }
.news-status.resolved { color:#fff; background:#16834b; }
.news-entry h3 { margin:24px 0 32px; font-size:clamp(22px,3vw,32px); line-height:1.5; }
.news-timeline { list-style:none; padding:0; margin:0; }
.news-timeline li { display:grid; grid-template-columns:72px 1fr; gap:20px; padding:18px 0; border-top:1px solid #cbc8be; }
.news-timeline li:last-child { border-bottom:1px solid #cbc8be; }
.news-timeline time { font-weight:900; font-variant-numeric:tabular-nums; }
.news-timeline p { margin:0; line-height:1.8; }
.news-entry-footer { display:flex; justify-content:space-between; gap:20px; margin-top:25px; color:#62686c; font-size:11px; }
.news-entry-footer p { margin:0; }
.hero { min-height:720px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr); }
.hero-copy { padding:clamp(64px,8vw,118px) clamp(26px,7vw,112px); background:var(--paper); position:relative; overflow:hidden; }
.hero-copy::after { content:"防災"; position:absolute; right:-25px; bottom:-95px; font-size:230px; font-weight:900; color:rgba(16,24,32,.035); line-height:1; }
.eyebrow,.kicker { font-size:11px; letter-spacing:.18em; font-weight:800; }
h1 { margin:26px 0; font-size:clamp(56px,7vw,102px); line-height:.98; letter-spacing:-.06em; font-weight:900; }
h1 em { font-style:normal; color:var(--red); }
.lead { max-width:600px; font-size:18px; line-height:1.9; font-weight:600; }
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:42px; max-width:780px; }
.social-card { min-height:92px; display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid #c8c6be; background:white; transition:transform .2s,box-shadow .2s; }
a.social-card:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(16,24,32,.12); }
.social-card svg,.social-card>img { width:36px; height:36px; }
.social-icon { width:36px; height:36px; display:grid; place-items:center; }
.social-card span:nth-child(2) { display:flex; flex-direction:column; gap:5px; min-width:0; }
.social-card b { font-size:14px; }
.social-card small { color:#666; font-size:11px; }
.social-card>span:last-child { margin-left:auto; font-size:19px; }
.social-card .qr { width:62px; height:62px; margin-left:auto; image-rendering:pixelated; }
.line-card { border-bottom:4px solid #06c755; }
.x-card { border-bottom:4px solid #111; }
.hero-panel { background:var(--navy); color:#fff; padding:80px clamp(32px,4vw,64px); display:flex; flex-direction:column; justify-content:center; }
.panel-number { font-size:clamp(74px,9vw,136px); color:var(--yellow); font-weight:900; line-height:.85; letter-spacing:-.08em; }
.hero-panel>p { font-size:13px; letter-spacing:.12em; font-weight:700; margin-top:20px; }
.hero-panel h2 { font-size:clamp(28px,3vw,45px); line-height:1.45; margin:34px 0; }
.panel-rule { height:1px; background:#60717d; }
.hero-panel .panel-note { letter-spacing:0; line-height:2; color:#c9d0d4; font-weight:400; }
.alert-band { background:var(--red); color:#fff; padding:34px clamp(24px,7vw,110px); display:flex; justify-content:space-between; align-items:center; gap:40px; }
.alert-band span { font-size:12px; letter-spacing:.16em; font-weight:800; }
.alert-band h2 { margin:5px 0 0; font-size:clamp(22px,3vw,36px); }
.alert-band p { max-width:520px; line-height:1.8; }
.section { padding:clamp(80px,10vw,150px) clamp(24px,7vw,110px); display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.5fr); gap:clamp(50px,8vw,130px); }
.section-heading h2 { font-size:clamp(36px,5vw,65px); line-height:1.25; letter-spacing:-.05em; margin:20px 0; }
.kicker { color:var(--red); }
.steps article { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.steps article:last-child { border-bottom:1px solid var(--line); }
.steps article>span,.prepare-grid article>span { font-size:13px; color:var(--red); font-weight:800; }
.steps h3,.prepare-grid h3 { margin:0 0 9px; font-size:21px; }
.steps p,.prepare-grid p { margin:0; color:#4f5559; line-height:1.9; }
.caution { grid-column:2; border-left:5px solid var(--yellow); background:#f7f5ef; margin:25px 0 0; padding:18px 22px; line-height:1.8; font-size:14px; }
.prepare-section { background:var(--navy); color:white; }
.light .kicker { color:var(--yellow); }
.prepare-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #5a6a75; border-left:1px solid #5a6a75; }
.prepare-grid article { padding:30px; border-right:1px solid #5a6a75; border-bottom:1px solid #5a6a75; min-height:220px; }
.prepare-grid article>span { color:var(--yellow); }
.prepare-grid h3 { margin-top:32px; }
.prepare-grid p { color:#c9d0d4; }
.mission-copy { max-width:790px; }
.mission-intro { font-size:clamp(20px,2.4vw,31px); line-height:1.75; font-weight:700; margin-top:0; }
.mission-copy ol { list-style:none; padding:0; margin:48px 0; counter-reset:mission; }
.mission-copy li { counter-increment:mission; display:grid; grid-template-columns:48px 1fr; padding:24px 0; border-top:1px solid var(--line); }
.mission-copy li::before { content:"0" counter(mission); color:var(--red); font-weight:900; }
.mission-copy li b,.mission-copy li span { grid-column:2; }
.mission-copy li b { font-size:19px; margin-bottom:8px; }
.mission-copy li span,.partner-note { color:#555; line-height:1.8; }
.partner-note { border-left:4px solid var(--navy); padding-left:18px; }
.machine-section { padding:clamp(80px,10vw,140px) clamp(24px,7vw,110px); background:#eef2f3; display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); gap:clamp(48px,8vw,120px); }
.machine-section h2 { font-size:clamp(36px,4.5vw,62px); line-height:1.25; letter-spacing:-.05em; margin:20px 0; }
.machine-copy>p:first-child { margin-top:0; font-size:18px; line-height:2; font-weight:600; }
.machine-copy dl { margin:40px 0 24px; border-top:1px solid #bac4c8; }
.machine-copy dl div { display:grid; grid-template-columns:115px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid #bac4c8; }
.machine-copy dt { font-size:12px; font-weight:800; }
.machine-copy dd { margin:0; line-height:1.7; }
.machine-copy dd a { font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.machine-note { padding:18px 20px; background:#fff; border-left:5px solid var(--red); font-size:13px; line-height:1.8; }
.final-cta { background:var(--yellow); padding:clamp(70px,9vw,130px) clamp(24px,7vw,110px); }
.final-cta>p { font-weight:800; letter-spacing:.08em; }
.final-cta h2 { font-size:clamp(40px,6vw,76px); line-height:1.2; letter-spacing:-.05em; margin:16px 0 40px; }
.compact { max-width:820px; margin-top:0; }
footer { background:#0d171e; color:#a9b2b8; padding:45px clamp(24px,7vw,110px); display:flex; align-items:center; gap:25px; font-size:12px; }
footer img { width:112px; }
.footer-identity p { margin:0 0 7px; color:#fff; font-weight:700; }
.footer-identity address { font-style:normal; line-height:1.8; }
.footer-plan { margin-left:auto; }
@media (max-width:850px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-panel { min-height:480px; }
  .alert-band { align-items:flex-start; flex-direction:column; gap:12px; }
  .section { grid-template-columns:1fr; }
  .news-section { grid-template-columns:1fr; }
  .machine-section { grid-template-columns:1fr; }
  .status-strip { grid-template-columns:1fr auto; gap:5px 18px; padding-top:12px; padding-bottom:12px; }
  .status-strip p { grid-column:1 / -1; grid-row:2; }
  .caution { grid-column:1; }
  footer { align-items:flex-start; flex-wrap:wrap; }
  .footer-plan { width:100%; margin-left:0; }
}
@media (max-width:600px) {
  .site-header { height:70px; }
  .brand img { width:132px; }
  .hero-copy { padding-top:62px; }
  .social-grid { grid-template-columns:1fr; }
  .social-card { min-height:82px; }
  .prepare-grid { grid-template-columns:1fr; }
  .prepare-grid article { min-height:auto; }
  .steps article { grid-template-columns:42px 1fr; gap:8px; }
  .news-timeline li { grid-template-columns:55px 1fr; gap:12px; }
  .news-entry-footer { flex-direction:column; gap:6px; }
  .status-strip { grid-template-columns:1fr; }
  .status-strip time { grid-row:auto; }
  .machine-copy dl div { grid-template-columns:1fr; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }