/* 三和エンジニアリング 簡易サイト
   方針: 画像はロゴのみ。白地・濃いグレーの文字・薄い罫線。色はロゴの青 (#0458D5、ロゴ画像から実測) を1色だけ、リンクと見出しの罫に使う。四角はすべて 1px の薄い罫線・角丸なしで統一。
   フォントはOS標準の日本語フォント。影・グラデーション・装飾は使わない。 */
:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #222222;
  --muted: #666666;
  --line: #d9d9d9;
  --line-soft: #ececec;
  --head: #f4f4f4;
  --brand: #0458d5;
  --brand-ink: #0346a8;
  --notice-bg: #f7f7f7;
  --zebra: #f8f8f8;
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --w: 960px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1b1b; --paper: #1b1b1b; --ink: #e8e8e8; --muted: #a9a9a9; --line: #444444; --line-soft: #333333; --head: #262626;
    --brand: #7fb3ff; --brand-ink: #a9ccff; --notice-bg: #262626; --zebra: #212121;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1b1b; --paper: #1b1b1b; --ink: #e8e8e8; --muted: #a9a9a9; --line: #444444; --line-soft: #333333; --head: #262626;
  --brand: #7fb3ff; --brand-ink: #a9ccff; --notice-bg: #262626; --zebra: #212121;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: inherit; line-height: 1.45; text-wrap: balance; margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid var(--line); padding: .5em .8em; text-align: left; vertical-align: top; }
th { background: var(--head); font-weight: 700; }
.wrap { max-width: var(--w); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* 告知帯 */
.notice-bar { background: var(--notice-bg); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.notice-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .2em 1em; padding-block: .5em; }
.notice-bar strong { color: var(--ink); }

/* ヘッダー (1段目: ロゴ・社名 / 2段目: メニュー) */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding-block: .7rem; }
.brand { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.brand img { width: 128px; height: auto; }
.brand span { font-weight: 700; font-size: 1rem; border-left: 1px solid var(--line); padding-left: .9rem; }
.menu-btn { display: none; font: inherit; font-weight: 700; font-size: .9rem; padding: .4rem .8rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.gnav { border-top: 1px solid var(--line-soft); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .2rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; color: inherit; text-decoration: none; font-size: .93rem; padding: .65rem .8rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.nav a:hover { color: var(--brand); }
.nav a[aria-current="page"] { border-bottom-color: var(--brand); font-weight: 700; }
.nav .cta { margin-left: auto; }
.nav .cta a { border: 1px solid var(--brand); color: var(--brand); padding: .35rem .9rem; font-weight: 700; margin-bottom: 0; }
.nav .cta a:hover, .nav .cta a[aria-current="page"] { background: var(--brand); color: #fff; }

/* セクション共通 */
main { display: block; }
.section { padding-block: 2.8rem; }
.section.alt { background: var(--paper); border-top: 1px solid var(--line-soft); }
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; margin-bottom: 1.2rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line); position: relative; }
.section-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 6rem; height: 2px; background: var(--brand); }
.section-head h2 { font-size: 1.35rem; order: 1; }
.section-head .en { font-size: .8rem; color: var(--muted); letter-spacing: .06em; order: 2; }
.section-head .more { margin-left: auto; font-size: .88rem; order: 3; }
.lead { max-width: 46em; }
.grid { display: grid; gap: 1.2rem; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid > * { min-width: 0; }
.card { background: var(--paper); border: 1px solid var(--line); padding: 1.2rem 1.3rem; }
.card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card h3 { color: var(--brand); }
a.card:hover { border-color: var(--brand); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; border: 1px solid var(--brand); cursor: pointer; font-family: inherit; font-size: .93rem; line-height: 1.4; }
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn.secondary { background: transparent; color: var(--brand); }
.btn.secondary:hover { background: var(--brand); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: var(--paper); }
.table-scroll table { width: 100%; min-width: 640px; }
.table-scroll th, .table-scroll td { white-space: nowrap; }
.table-scroll td.wrap-ok, .table-scroll th.wrap-ok { white-space: normal; }
.table-scroll table th, .table-scroll table td { border-left: 0; border-right: 0; }
.kv th { width: 9em; white-space: nowrap; }
h3.sub { font-size: 1rem; margin: 1.2rem 0 .5rem; padding-left: .6rem; border-left: 3px solid var(--brand); }

/* ページ見出し */
.page-head { border-bottom: 1px solid var(--line); padding-block: 1.8rem; background: var(--paper); }
.page-head .en { font-size: .8rem; color: var(--muted); letter-spacing: .06em; }
.page-head h1 { font-size: 1.7rem; }
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.breadcrumb a { color: inherit; }

/* トップ */
.intro { padding-block: 2.6rem 1.4rem; }
.intro h1 { font-size: 1.55rem; line-height: 1.6; margin-bottom: .8rem; }
.intro p { max-width: 40em; }
.renewal { border: 1px solid var(--line); padding: 1.2rem 1.4rem; margin: 1.2rem 0 0; background: var(--paper); }
.renewal .date { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.renewal h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.renewal p { margin-bottom: .4em; }
.renewal p:last-child { margin-bottom: 0; }
.renewal .assurance { font-weight: 700; }
.quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quick li { min-width: 0; }
.quick a { display: block; height: 100%; background: var(--bg); padding: 1rem 1.2rem; text-decoration: none; color: inherit; }
.quick a:hover { background: var(--head); }
.quick a:hover b { text-decoration: underline; }
.quick b { display: block; color: var(--brand); font-size: 1rem; margin-bottom: .1rem; }
.quick span { font-size: .85rem; color: var(--muted); }
@media (max-width: 800px) { .quick { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .quick { grid-template-columns: 1fr; } }

/* 製品 */
.lineup th:first-child, .lineup td:first-child { white-space: nowrap; font-weight: 700; }
.product { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.product:last-child { border-bottom: 1px solid var(--line); }
.product .model { font-size: 1.35rem; font-weight: 700; color: var(--brand-ink); }
.product .use { font-size: .85rem; color: var(--muted); margin: .1rem 0 .7rem; }
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.2rem; margin: 0 0 .8rem; font-size: .9rem; }
.spec-list dt { font-weight: 700; color: var(--muted); }
.spec-list dd { margin: 0; }
.product p { margin-bottom: .6em; }
.product h3.sub { border: 0; padding: 0;  font-size: .95rem; margin: .8rem 0 .4rem; }

/* スペック表 (3 つの表: 吐出量 / 寸法・重量 / 加圧方式・装備) */
.spec-block { margin-top: 2.4rem; }
.spec-block .section-head { margin-bottom: .7rem; }
.spec-block .unit { font-size: .85rem; color: var(--muted); margin: 0 0 .7rem; }
.spec-t { font-size: .86rem; width: 100%; border-collapse: collapse; }
.spec-t th, .spec-t td { padding: .5em .8em; border: 0; border-bottom: 1px solid var(--line-soft); text-align: center; vertical-align: middle; white-space: nowrap; line-height: 1.5; }
.spec-t thead th { background: var(--head); font-weight: 700; border-bottom: 1px solid var(--line); }
.spec-t thead tr:first-child th[colspan] { border-bottom: 1px solid var(--line); }
.spec-t th small { display: block; font-weight: 400; font-size: .78em; color: var(--muted); line-height: 1.3; }
.spec-t .model { text-align: left; font-weight: 700; color: var(--brand-ink); position: sticky; left: 0; z-index: 1; background: var(--bg); box-shadow: 1px 0 0 var(--line); min-width: 5.5em; }
.spec-t thead .model { background: var(--head); z-index: 2; }
.spec-t td.num, .spec-t td.kw { text-align: right; font-variant-numeric: tabular-nums; }
.spec-t td.kw { font-weight: 700; }
.spec-t td.span { text-align: left; }
.spec-t td.sym { font-size: 1.05em; }
.spec-t .none { color: var(--muted); }
.spec-t tr.grp th, .spec-t tr.grp td { border-top: 1px solid var(--line); }
.spec-t tbody tr:first-child th, .spec-t tbody tr:first-child td { border-top: 0; }
.spec-t tr.alt td, .spec-t tr.alt th.model { background: var(--zebra); }
.spec-t sup { font-size: .72em; color: var(--muted); margin-left: .1em; line-height: 0; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .87rem; margin: 0 0 .7rem; }
.notes { font-size: .82rem; color: var(--muted); margin: 1.2rem 0 0; padding-left: 1.2em; }
.notes li { margin-bottom: .2em; }

/* ダウンロード */
.dl-block { border: 1px solid var(--line); background: var(--paper); }
.dl-block header { display: flex; align-items: baseline; gap: .8rem; padding: .8rem 1.1rem; background: var(--head); border-bottom: 1px solid var(--line); }
.dl-block header .code { font-weight: 700; color: var(--brand-ink); font-size: 1.15rem; }
.dl-block header h3 { font-size: 1.02rem; }
.dl-block header .sub { font-size: .83rem; color: var(--muted); }
.dl-block table { font-size: .9rem; }
.dl-block td.no { font-weight: 700; white-space: nowrap; text-align: center; }
.dl-links { display: flex; flex-direction: column; gap: .3rem; }
.dl-links a { text-decoration: none; }
.dl-links a::before { content: "PDF"; display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; border: 1px solid var(--brand); color: var(--brand); padding: 0 .4em; margin-right: .5em; line-height: 1.5; vertical-align: middle; }
.dl-links a:hover { text-decoration: underline; }
.dl-links .size { color: var(--muted); font-size: .8rem; }

/* フォーム */
.form { border: 1px solid var(--line); padding: 1.4rem; display: grid; gap: 1rem; background: var(--paper); }
.form .row { display: grid; gap: .3rem; }
.form label { font-weight: 700; font-size: .92rem; }
.form .req { display: inline-block; font-size: .72rem; color: var(--brand); border: 1px solid var(--brand); padding: 0 .4em; margin-left: .5em; vertical-align: middle; line-height: 1.5; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: .6rem .8rem; }
.form textarea { min-height: 9em; resize: vertical; }
.form .hint { font-size: .82rem; color: var(--muted); }
.form .agree { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; }
.form .agree input { margin-top: .45em; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-result { display: none; background: var(--notice-bg); border: 1px solid var(--line); padding: .9rem 1rem; }
.form-result.show { display: block; }
.contact-side { display: grid; gap: 1rem; align-content: start; }
.tel { font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }

/* お知らせ (一覧: 日付 + 題名) */
.news { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.news li { display: grid; grid-template-columns: 7.5em 1fr; gap: .2rem 1.2rem; padding: .75rem .2rem; border-bottom: 1px solid var(--line-soft); }
.news time { color: var(--muted); font-variant-numeric: tabular-nums; }
.news a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.news a:hover { color: var(--brand); text-decoration-color: var(--brand); }
.news-article { max-width: 46em; }
.news-article .date { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.news-article p { margin-bottom: 1em; }
.news-back { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }

/* フッター */
.site-footer { border-top: 1px solid var(--line); margin-top: 2.5rem; background: var(--paper); font-size: .9rem; }
.site-footer .wrap { padding-block: 2rem 1.4rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.8rem; }
.site-footer img { width: 120px; }
.site-footer h3 { font-size: .92rem; margin-bottom: .5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--brand); }
.site-footer .addr { margin-top: .8rem; color: var(--muted); line-height: 1.8; }
.site-footer .copy { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: .9rem; font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

/* レスポンシブ */
@media (max-width: 900px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .menu-btn { display: inline-block; }
  .gnav { display: none; }
  .site-header.open .gnav { display: block; }
  .nav { flex-direction: column; align-items: stretch; gap: 0; padding-block: .3rem; }
  .nav a { border-bottom: 1px solid var(--line-soft); padding: .7rem .4rem; margin: 0; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--brand); }
  .nav .cta { margin: .5rem 0 .3rem; }
  .nav .cta a { text-align: center; }
}
@media (max-width: 760px) {
  .brand span { display: none; }
  .news li { grid-template-columns: 1fr; gap: .1rem; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .section { padding-block: 2rem; }
}


/* 資料ダウンロード: 仕様を選んでダウンロード */
.selector .sel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-top: .4rem; }
.selector label { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; }
.selector select { font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.selector select:disabled { color: var(--muted); background: var(--head); }
.sel-result { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--brand); }
details.dl-block > summary { list-style: none; cursor: pointer; padding: .8rem 1.1rem; font-weight: 700; background: var(--head); display: flex; justify-content: space-between; gap: 1rem; }
details.dl-block > summary::-webkit-details-marker { display: none; }
details.dl-block > summary::before { content: "＋"; color: var(--brand); margin-right: .6rem; }
details.dl-block[open] > summary::before { content: "－"; }
details.dl-block[open] > summary { border-bottom: 1px solid var(--line); }
details.dl-block .count { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: auto; }