/* =====================================================
   横浜市防災機器販売協同組合  共通スタイル
   配色: 深紺(信頼) / 防災レッド(警告・行動喚起のみ) / 白
   視覚言語: 消防・避難標識のプレート表現
   ===================================================== */
:root{
  --navy:#1B2A4A;
  --navy-deep:#12203D;
  --red:#C7361F;
  --red-dark:#A72A16;
  --paper:#F5F7F9;
  --ink:#24292F;
  --muted:#5B6672;
  --line:#D8DEE6;
  --white:#FFFFFF;
  --focus:#2E6FD8;
  --radius:6px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:18px;line-height:1.85;color:var(--ink);background:var(--white);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;border:0}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;line-height:1.4;color:var(--navy)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- 緊急連絡バー ---------- */
.telbar{background:var(--navy-deep);color:#fff;font-size:14px}
.telbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.telbar strong{font-weight:700;letter-spacing:.04em}

/* ---------- ヘッダー ---------- */
header.site{background:var(--white);border-bottom:4px solid var(--navy)}
.brand{display:flex;align-items:center;gap:14px;padding:18px 0;justify-content:space-between;flex-wrap:wrap}
.brand .name{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--navy)}
.brand .bar{width:10px;height:56px;background:var(--red);border-radius:2px;flex:none}
.brand .t1{font-size:13px;letter-spacing:.14em;color:var(--muted);display:block}
.brand .t2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(19px,3.4vw,27px);letter-spacing:.05em;display:block;line-height:1.3}
.brand .tel{text-align:right}
.brand .tel .lbl{font-size:12px;color:var(--muted);letter-spacing:.1em}
.brand .tel a{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(20px,3.4vw,26px);color:var(--navy);text-decoration:none;white-space:nowrap}
.brand .tel a::before{content:"☎ ";color:var(--red)}
.brand .tel .fax{font-size:13px;color:var(--muted)}

/* ---------- ナビ ---------- */
nav.global{background:var(--navy)}
nav.global ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
nav.global li{flex:1 1 auto}
nav.global a{display:block;padding:13px 10px;color:#fff;text-align:center;text-decoration:none;font-size:15px;font-weight:500;border-right:1px solid rgba(255,255,255,.14)}
nav.global li:first-child a{border-left:1px solid rgba(255,255,255,.14)}
nav.global a:hover,nav.global a[aria-current="page"]{background:var(--red);color:#fff}
.navtoggle{display:none}
@media(max-width:760px){
  .navtoggle{display:block;width:100%;background:var(--navy);color:#fff;border:0;padding:13px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer}
  .navtoggle::before{content:"≡ ";color:#fff}
  nav.global ul{display:none;flex-direction:column}
  nav.global ul.open{display:flex}
  nav.global a{border-right:0;border-top:1px solid rgba(255,255,255,.14);text-align:left;padding-left:20px}
}

/* ---------- 標識プレート見出し ---------- */
.plate{background:var(--navy);color:#fff;border-left:14px solid var(--red);padding:26px 24px;margin:34px 0 26px;border-radius:var(--radius)}
.plate h1{margin:0;color:#fff;font-size:clamp(23px,4vw,32px);font-weight:700;letter-spacing:.04em}
.plate .sub{margin:6px 0 0;font-size:14.5px;color:#C9D4E6}

h2.sec{font-size:clamp(20px,3vw,24px);border-bottom:3px solid var(--navy);padding-bottom:8px;margin:52px 0 20px;position:relative}
h2.sec::after{content:"";position:absolute;left:0;bottom:-3px;width:88px;height:3px;background:var(--red)}
h3{font-size:19px;margin:34px 0 12px}
h3::before{content:"■ ";color:var(--red)}

/* ---------- ヒーロー ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:46px;padding-bottom:46px}
.hero .eyebrow{display:inline-block;background:var(--red);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.16em;padding:5px 14px;border-radius:3px;margin-bottom:16px}
.hero h1{font-size:clamp(25px,4.6vw,38px);margin:0 0 18px;letter-spacing:.03em}
.hero p{max-width:46em;margin:0 0 1em}
.since{font-size:14px;color:var(--muted);letter-spacing:.08em}

/* ---------- 導線カード ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:30px 0 8px;padding:0;list-style:none}
.cards a{display:block;background:#fff;border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:var(--radius);padding:20px 18px 18px;text-decoration:none;color:var(--ink);box-shadow:0 1px 3px rgba(18,32,61,.06);transition:box-shadow .15s,transform .15s}
.cards a:hover{box-shadow:0 6px 18px rgba(18,32,61,.14);transform:translateY(-2px)}
.cards .ic{font-size:30px;line-height:1;display:block;margin-bottom:10px}
.cards .tt{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:18px;color:var(--navy);display:block;margin-bottom:6px}
.cards .tt::after{content:" →";color:var(--red)}
.cards .dd{font-size:14.5px;color:var(--muted);line-height:1.7;display:block}

/* ---------- お知らせ掲示板 ---------- */
.board{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:6px 26px 20px;margin:14px 0}
.board ul{list-style:none;margin:0;padding:0}
.board li{padding:15px 2px;border-bottom:1px dashed var(--line);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.board li:last-child{border-bottom:0}
.board .tag{flex:none;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:3px;letter-spacing:.06em}
.board .tag.alert{background:var(--red)}
.board details{margin-top:6px}
.board summary{cursor:pointer;color:var(--muted);font-size:15px;font-weight:500}
.pdfnote{font-size:13.5px;color:var(--muted)}

/* ---------- 警告帯（赤白ストライプ）---------- */
.caution{border:2px solid var(--red);border-radius:var(--radius);margin:44px 0;overflow:hidden;background:#fff}
.caution .stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 16px,#fff 16px 32px)}
.caution .body{padding:20px 24px}
.caution h2,.caution h3{margin:0 0 10px;color:var(--red);font-size:19px}
.caution h3::before{content:""}
.caution ul{margin:8px 0 0;padding-left:1.3em}
.caution li{margin:4px 0}

/* ---------- 表 ---------- */
table.data{width:100%;border-collapse:collapse;margin:16px 0;background:#fff;font-size:16.5px}
table.data caption{text-align:left;font-weight:700;color:var(--navy);padding-bottom:8px}
table.data th,table.data td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
table.data th{background:var(--paper);color:var(--navy);font-weight:700;white-space:nowrap}
table.data thead th{background:var(--navy);color:#fff}

/* ---------- 定義リスト（組合データ） ---------- */
dl.spec{display:grid;grid-template-columns:minmax(11em,auto) 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:16px 0;background:#fff}
dl.spec dt{background:var(--paper);color:var(--navy);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line)}
dl.spec dd{margin:0;padding:12px 16px;border-bottom:1px solid var(--line)}
dl.spec dt:last-of-type,dl.spec dd:last-of-type{border-bottom:0}
@media(max-width:560px){dl.spec{grid-template-columns:1fr}dl.spec dt{border-bottom:0}}

/* ---------- 沿革タイムライン ---------- */
.history{list-style:none;margin:18px 0;padding:0;border-left:4px solid var(--navy)}
.history li{position:relative;padding:0 0 22px 26px}
.history li::before{content:"";position:absolute;left:-10px;top:8px;width:16px;height:16px;background:#fff;border:4px solid var(--red);border-radius:50%}
.history .era{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;color:var(--navy);display:block;font-size:17px}

/* ---------- 図版 ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:18px 0}
.figs figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-align:center}
.figs figcaption{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
figure.solo{margin:18px 0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
figure.solo figcaption{font-size:14px;color:var(--muted);margin-top:8px}

/* ---------- 火災種別の丸マーク ---------- */
.fires{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.fire{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center}
.fire .mark{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;border:3px solid var(--ink)}
.fire .mark.a{background:#fff}
.fire .mark.b{background:#F5C518}
.fire .mark.c{background:#1E63C4}
.fire strong{display:block;color:var(--navy)}
.fire span{font-size:14.5px;color:var(--muted)}

/* ---------- 手順ステップ ---------- */
ol.steps{list-style:none;counter-reset:s;margin:18px 0;padding:0}
ol.steps li{counter-increment:s;position:relative;padding:14px 16px 14px 66px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
ol.steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:38px;height:38px;background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:19px}

/* ---------- CTA ---------- */
.cta{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;margin:46px 0 10px}
.cta p{margin:0 0 14px}
.btn{display:inline-block;background:var(--red);color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:17px;padding:14px 34px;border-radius:6px;text-decoration:none;letter-spacing:.05em}
.btn:hover{background:var(--red-dark);color:#fff}
.btn.ghost{background:var(--navy)}
.btn.ghost:hover{background:var(--navy-deep)}

/* ---------- 組合員名簿 ---------- */
.office{background:var(--navy);color:#fff;border-radius:var(--radius);padding:26px;margin:20px 0 34px}
.office h2{color:#fff;margin:0 0 8px;font-size:21px}
.office .tel-l a{color:#fff;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:clamp(24px,5vw,32px);text-decoration:none}
.office .tel-l a::before{content:"☎ ";color:#FF8A70}
.office p{margin:4px 0}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:18px 0;padding:0;list-style:none}
.member{background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:var(--radius);padding:16px 18px}
.member .nm{font-weight:700;color:var(--navy);font-size:17px}
.member .nm a{color:var(--navy)}
.member .tl{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:19px;margin:2px 0}
.member .tl a{text-decoration:none;color:var(--ink)}
.member .tl a::before{content:"☎ ";color:var(--red);font-size:15px}
.member .ad,.member .ar{font-size:14.5px;color:var(--muted);line-height:1.7}
.member .ar b{color:var(--ink);font-weight:500}

/* ---------- 持ち物リスト ---------- */
.kitcols{columns:3;column-gap:28px;margin:10px 0;padding-left:1.2em}
.kitcols li{break-inside:avoid;margin:3px 0}
@media(max-width:760px){.kitcols{columns:2}}
@media(max-width:460px){.kitcols{columns:1}}

/* ---------- ページ内注記 ---------- */
.note{background:var(--paper);border-left:5px solid var(--navy);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:18px 0;font-size:16.5px}
.note.red{border-left-color:var(--red)}

/* ---------- フッター ---------- */
footer.site{background:var(--navy-deep);color:#C9D4E6;margin-top:70px;font-size:15px}
footer.site .wrap{padding-top:36px;padding-bottom:28px}
footer.site .fnav{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 22px;padding:0}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{color:#FF9B84;text-decoration:underline}
footer.site .addr{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;line-height:2}
footer.site .cp{margin-top:16px;font-size:13px;color:#8DA0BC}
.totop{display:inline-block;margin-top:10px}