/* 羽山行政書士事務所 ── 素材：図面（Tec Spec）／差し色 #005D35
   写真を使わない。工程を線画で見せる。角丸・影・装飾イラスト・帯のベタ塗りを使わない。 */

:root{
  --ji:#FFFFFF;      /* 地 */
  --men:#F4F5F4;     /* 面 */
  --kz:#232825;      /* 構造 */
  --ac:#005D35;      /* 差し色 */
  --kei:#DDDFDD;     /* 細い罫 */
  --kei2:#C9CCC9;    /* 少し濃い罫 */
  --tint:#C4EBD4;    /* 淡い緑地 OKLCh L.906 C.051（有彩の判定 C>=0.035 の内側） */
  --usu:#5C625E;     /* 淡い文字 */
  --men-w:1120px;    /* 版面 */
  --ma:44px;         /* 節の間隔 */
  /* 2026-08-29：1段上げた。14px/行送り1.95 では1行が短く、面積で最大の文字が
     11px の注記になっていた（ジャンプ率の本文が11pxと出ていたのがその印）。 */
  --f11:12px; --f12:13px; --f14:16px; --f16:17px;
  --f19:20px; --f23:24px; --f28:29px; --f34:36px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ji);color:var(--kz);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:var(--f14);line-height:1.8;letter-spacing:.04em;
  font-feature-settings:"palt" 1;line-break:strict;overflow-wrap:break-word;
}
svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.25em}
h1,h2,h3{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
         line-height:1.5;letter-spacing:.02em;margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
caption{text-align:left}
img{max-width:100%;height:auto;display:block;border:0}

.wrap{width:100%;max-width:var(--men-w);margin:0 auto;padding:0 28px}

/* 動き：fade / 300ms */
.pre{opacity:0;transform:translateY(8px);transition:opacity 300ms ease,transform 300ms ease}
.pre.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pre{opacity:1;transform:none;transition:none}}

/* 図の中の文字（SVG） */
.dia__n{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-size:11px;fill:var(--ac);letter-spacing:.16em}
.dia__t{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-size:14px;fill:var(--kz);font-weight:700}
.dia__d{font-size:11px;fill:var(--usu);letter-spacing:.04em}
.dia__c{font-size:11px;fill:var(--usu);letter-spacing:.14em}
.dia{margin:0}
.dia--side{margin:0}
/* 分野ごとの小さな線画。2026-08-29：図版率0.30（図面のデモは0.46）。
   図が3枚しか無く、どれも細い。分野の説明の横に「詰まるところ」の形を1枚ずつ置く。 */
.dia--cat{margin:0 0 14px;background:var(--tint);padding:6px 8px;border:1px solid var(--ac)}
.dia--cat svg{width:100%;max-width:232px;height:auto}
.dia--side svg{width:100%;height:auto;display:block}
.dia--flat{margin:28px 0 0}
/* 署名（工程を横一列に並べて線でつなぐ図）だけ、差し色の淡い地に置く。
   この素材で有彩色の面積（4.2〜6.3%）を作るのはここと帯（2026-08-28実測）。 */
.dia--field{background:var(--men);padding:12px 16px;border:1px solid var(--ac)}
.cap{font-size:var(--f11);color:var(--usu);line-height:1.9;margin-top:10px}

/* ヘッダー：single-row */
.bar{border-bottom:1px solid var(--kei2);background:var(--ji);position:sticky;top:0;z-index:20}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;flex-wrap:wrap}
.brand{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;font-size:var(--f16);letter-spacing:.06em}
.menu{display:flex;gap:22px;flex-wrap:wrap}
.menu a{font-size:var(--f12);color:var(--usu);letter-spacing:.06em;padding:5px 0}
.menu a:hover{color:var(--kz)}

/* ヒーロー：強調=bracket / バッジ=above-catch
   2026-08-29：中央寄せの文字だけで上半分を使っていたため、図版率0.19・版面率0.32。
   「最初の面談で1枚の図をお渡しします」と本文で言っている図そのものを右に置いた。 */
.open{border-bottom:1px solid var(--kei2);background:var(--men)}
.open__in{display:grid;grid-template-columns:1fr 500px;gap:0 44px;align-items:start;
          padding:46px 28px 38px}
.open__l{min-width:0}
.open__fig{margin:0;min-width:0}
.open__fig svg{width:100%;height:auto;display:block}
.open__badge{display:inline-block;font-size:var(--f11);letter-spacing:.22em;color:var(--ac);
             border:1px solid var(--ac);padding:5px 14px;margin-bottom:20px}
.open__h{font-size:clamp(var(--f23),3.2vw,var(--f34));margin-bottom:18px}
.br{position:relative;padding:0 .5em}
.br::before,.br::after{content:"";position:absolute;top:-.1em;bottom:-.1em;width:.34em;
  border:1px solid var(--ac);border-left:0;border-right:0}
/* [ ] の向き。::before は左側なので **左** の縦棒を引く（2026-08-28に逆で出た） */
.br::before{left:0;border-left:1px solid var(--ac)}
.br::after{right:0;border-right:1px solid var(--ac)}
.open__p{font-size:var(--f16);max-width:none;margin:0 0 22px}
.open__act{margin-bottom:30px}

/* ボタン：塗らない・角丸なし */
.btn0,.btn{display:inline-block;border:1px solid var(--kz);background:none;
           padding:12px 30px;font-size:var(--f12);letter-spacing:.14em}
.btn0:hover,.btn:hover{border-color:var(--ac);color:var(--ac);background:var(--tint);text-decoration:none}
.btn--accent{border-color:var(--ac);color:var(--ac)}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* ヒーロー下の諸元 */
.spec{display:flex;flex-wrap:wrap;gap:6px 34px;
      border-top:1px solid var(--kei2);padding-top:18px;font-size:var(--f11)}
.spec li{display:flex;gap:8px;align-items:baseline}
.spec__k{color:var(--usu);letter-spacing:.16em}

/* 節：見出しの型は none（番号も欧文ラベルも置かない） */
.blk{padding:var(--ma) 0}
/* 本文 ＋ 右の注記欄。図面の署名は「細部の文字を隙間に置く」なので、
   余った右側を余白にせず、工程番号・期限・書類の点数を置く欄にする。
   2026-08-29：版面率0.245（実サイト11件の最小と同値）で余白だらけだったのを直した。 */
.wrap--rail{display:grid;grid-template-columns:1fr 236px;gap:0 40px;align-items:start}
.wrap--rail .col{min-width:0}
.rail{border-top:1px solid var(--kz);padding-top:9px;position:sticky;top:76px}
.rail__h{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
         font-size:var(--f11);letter-spacing:.18em;color:var(--ac);margin-bottom:10px}
.rail__l{display:grid;grid-template-columns:1fr auto;gap:0}
.rail__l dt{font-size:var(--f11);color:var(--usu);padding:6px 8px 6px 0;
            border-bottom:1px solid var(--kei)}
.rail__l dd{font-size:var(--f11);margin:0;padding:6px 0;text-align:right;
            border-bottom:1px solid var(--kei);letter-spacing:.04em}
.rail__n{font-size:var(--f11);color:var(--usu);line-height:1.85;margin-top:12px}
.blk--tint{background:var(--men)}
.blk__h{font-size:var(--f28);border-bottom:1px solid var(--kz);padding-bottom:12px;margin-bottom:18px}
.blk__lead{font-size:var(--f16);max-width:none;margin-bottom:22px}
.p0{font-size:var(--f14);max-width:none;margin-bottom:16px}
/* 2026-08-29：max-width を全部外したら散文が1行90字になって読めなくなった。
   一覧と表は幅いっぱいのままにし、**続けて読む段落だけ**を絞る。 */
.blk__lead{max-width:52em}
.prose{columns:2;column-gap:44px;column-rule:1px solid var(--kei)}
.prose .p0{max-width:none;break-inside:avoid}
.fine{font-size:var(--f11);color:var(--usu);line-height:1.9;display:block}
.sub0{font-size:var(--f16);margin:28px 0 10px}
.prose{max-width:none}
.more{margin-top:30px}
.more a{display:inline-block;font-size:var(--f12);letter-spacing:.12em;
        border-bottom:1px solid var(--ac);padding-bottom:4px}
.more a::after{content:"\2009\2192";color:var(--ac)}
.more a:hover{color:var(--ac);text-decoration:none}

/* 2段組 */
.split{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.split--half{grid-template-columns:480px 1fr}

/* 確認の一覧 */
/* 確認の一覧は2段。1段だと1行が版面の4割しか使わず、右が空いたまま縦に伸びる
   （2026-08-29：版面率0.276。実サイト11件の最小と同値だった） */
.list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
      border-top:1px solid var(--kei)}
.list li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;
         border-bottom:1px solid var(--kei);font-size:var(--f12)}
.tk{flex:0 0 auto;margin-top:.6em;color:var(--ac)}

/* お悩み＝table */
.tbl2 th,.tbl2 td{border-top:1px solid var(--kei2);padding:16px 0;vertical-align:top;text-align:left}
.tbl2 th{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
         font-size:var(--f16);padding-bottom:6px;border-bottom:0}
.tbl2 td{font-size:var(--f14);border-top:0;padding-top:0}
.tbl2 tr:last-child td:last-child{border-bottom:1px solid var(--kei2);padding-bottom:16px}
.tbl2__x{font-size:var(--f11);color:var(--usu);letter-spacing:.06em}
.tbl2 caption{padding-bottom:14px;font-size:var(--f11);color:var(--usu)}
.tbl2 tr{display:block;padding:4px 0}
.tbl2 th,.tbl2 td{display:block}

/* 強み＝table */
.str th,.str td{border-top:1px solid var(--kei2);padding:18px 0;vertical-align:top;text-align:left}
.str th{width:30%;padding-right:24px;font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;
        font-weight:700;font-size:var(--f14)}
.str td{font-size:var(--f12)}
.str__k{width:13em;padding-right:22px;font-size:var(--f11);color:var(--ac);letter-spacing:.06em}
.str tr:last-child th,.str tr:last-child td{border-bottom:1px solid var(--kei2)}
.str--rows th{width:6.5em;font-size:var(--f11);color:var(--usu);letter-spacing:.12em}
.str--rows td{font-size:var(--f12)}

/* 費用 */
.fee th,.fee td{border-bottom:1px solid var(--kei);padding:14px 22px 14px 0;
                text-align:left;vertical-align:top;font-size:var(--f12)}
.fee thead th{border-bottom:1px solid var(--kz);font-size:var(--f11);letter-spacing:.14em;
              color:var(--usu);font-weight:400;padding-bottom:9px}
.fee caption{padding-bottom:12px;font-size:var(--f11);color:var(--usu)}
.fee__v{white-space:nowrap;color:var(--ac);letter-spacing:.08em}
.notes{margin-top:24px;counter-reset:n;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.notes li{counter-increment:n;font-size:var(--f11);color:var(--usu);
          padding:4px 0 4px 32px;position:relative;line-height:1.9}
.notes li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;
                  letter-spacing:.14em;color:var(--ac)}

/* 取扱分野 */
.cat{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
/* 2026-08-29：4段にしたら1行15字になり check_responsive が落ちた（基準16字）。
   幅を使い切ることより、1行の字数が先。 */
.cat > li{border-top:1px solid var(--kei2);padding:24px 0}
.cat > li:nth-last-child(-n+2){border-bottom:1px solid var(--kei2)}
.cat__h{font-size:var(--f19);margin-bottom:10px}
.sub li{font-size:var(--f11);color:var(--usu);padding:3px 0 3px 18px;position:relative}
.split .tbl2{width:100%}
.sub li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--ac)}
.span0{font-size:var(--f11);letter-spacing:.14em;color:var(--usu);margin-top:12px}

/* 質問 */
.qs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.qs__i{border-top:1px solid var(--kei);padding:16px 0}
.qs__i:nth-last-child(-n+2){border-bottom:1px solid var(--kei)}
.qs__q{font-size:var(--f16);margin-bottom:6px}
.qs__a{font-size:var(--f12);max-width:none}

/* 帯：accent-tint と dark */
.band{padding:44px 0;background:var(--tint);border-top:1px solid var(--ac);border-bottom:1px solid var(--ac)}
.band--dark{background:var(--kz);border-color:var(--kz);color:var(--ji)}
.band__in{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
.band__h{font-size:var(--f23);margin-bottom:12px}
.band__p{font-size:var(--f14);max-width:42em}
.band__side{border-left:1px solid var(--kei2);padding-left:32px}
.band--dark .band__side{border-left-color:#4A504C}
.band--dark .fine{color:#C7CCC8}
.band--dark .btn0{border-color:var(--ji);color:var(--ji)}
.band--dark .btn0:hover{border-color:#7FD3AC;color:#7FD3AC}
.tel{display:inline-block;font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
     font-size:var(--f28);letter-spacing:.04em;color:var(--ac);margin-bottom:6px}
.band--dark .tel{color:#7FD3AC}
.band__side .btn0{margin-top:14px}

/* フッター：center-minimal */
.end{padding:52px 0 40px;text-align:center}
.edge{width:100%;height:6px;margin-bottom:30px}
.end__name{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
           font-size:var(--f16);margin-bottom:8px}
.end__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:26px 0 22px}
.end__nav a{font-size:var(--f11);color:var(--usu)}
.end__nav a:hover{color:var(--kz)}
.end__legal{font-size:var(--f11);color:var(--usu);letter-spacing:.08em}
.end__legal:first-of-type{border-top:1px solid var(--kei);padding-top:18px;margin-top:4px}

/* ══ 下層ページ（build_d.py が出す class。名前は変えられない） ══ */
.sec{padding:64px 0}
.sec--layer{background:var(--men)}
.mark{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--kz);
      padding-top:9px;margin-bottom:16px}
.mark__no{font-size:var(--f11);letter-spacing:.16em;color:var(--ac)}
.mark__en{font-size:var(--f11);letter-spacing:.24em;color:var(--usu);text-transform:uppercase}
.sec__ttl{font-size:var(--f23);border-bottom:1px solid var(--kz);padding-bottom:12px;margin-bottom:18px}
.sec__lead{font-size:var(--f16);max-width:46em;margin-bottom:22px}
.p{font-size:var(--f14);max-width:46em;margin-bottom:16px}
.micro{font-size:var(--f11);color:var(--usu);line-height:1.9;margin-top:12px;display:block}
ul.micro{margin-top:14px}
ul.micro li{position:relative;padding:5px 0 5px 18px;font-size:var(--f12);color:var(--kz);
            border-bottom:1px solid var(--kei)}
ul.micro li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--ac)}
ul.micro li:first-child{border-top:1px solid var(--kei)}

.checks li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;
           border-bottom:1px solid var(--kei);font-size:var(--f12)}
.checks li:first-child{border-top:1px solid var(--kei)}
.tick{flex:0 0 auto;margin-top:.6em;color:var(--ac)}

.rows{margin-top:6px}
.rows li{border-top:1px solid var(--kei2);padding:18px 0;display:grid;
         grid-template-columns:56px 1fr;gap:0 18px}
.rows li:last-child{border-bottom:1px solid var(--kei2)}
.rows__no{grid-row:1 / span 2;font-size:var(--f16);color:var(--ac);letter-spacing:.06em}
.rows__t{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
         font-size:var(--f16);margin-bottom:5px}
.rows__d{font-size:var(--f12);max-width:44em}

.tbl th,.tbl td{border-bottom:1px solid var(--kei);padding:14px 22px 14px 0;
                text-align:left;vertical-align:top;font-size:var(--f12)}
.tbl thead th{border-bottom:1px solid var(--kz);font-size:var(--f11);letter-spacing:.14em;
              color:var(--usu);font-weight:400;padding-bottom:9px}
.tbl caption{display:table-caption;padding-bottom:12px;font-size:var(--f11);
             color:var(--usu);text-align:left}

.faq dt{font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;font-weight:700;
        font-size:var(--f16);border-top:1px solid var(--kei);padding-top:18px}
.faq dd{font-size:var(--f12);margin:6px 0 18px;max-width:48em}
.faq dd:last-of-type{border-bottom:1px solid var(--kei);padding-bottom:18px;margin-bottom:0}

.hr{width:100%;height:6px;margin:30px 0}
.hr__base{stroke:var(--kei);stroke-width:1;fill:none}
.hr__lead{stroke:var(--ac);stroke-width:2;fill:none}

.fld{display:block;width:100%;max-width:34em;border:1px solid var(--kei2);
     padding:10px 12px;font-family:inherit;font-size:var(--f12);color:var(--kz);
     background:var(--ji);border-radius:0;letter-spacing:.04em}
.fld:focus{outline:none;border-color:var(--ac)}
textarea.fld{min-height:9em;line-height:1.95}

/* 下層の帯は地のまま罫で区切る。淡い緑地にすると、thanks のような短いページで
   淡地が下限76%を割る（2026-08-28実測 74.28%）。有彩の面積はトップで作る。 */
.cta{padding:44px 0;background:var(--ji);
     border-top:2px solid var(--ac);border-bottom:1px solid var(--ac)}
.cta__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
.cta__ttl{font-size:var(--f23);margin-bottom:12px}
.cta__p{font-size:var(--f14);max-width:42em}
.cta__tel{display:inline-block;font-family:"BIZ UDPGothic","Noto Sans JP",sans-serif;
          font-weight:700;font-size:var(--f28);letter-spacing:.04em;color:var(--ac)}
.cta__hours{font-size:var(--f11);color:var(--usu);margin-top:5px;display:block}

/* ── 幅の切り替え ─────────────────────────── */
@media (max-width:900px){
  :root{--ma:58px}
  .wrap{padding:0 18px}
  .bar{position:static}
  .bar__in{min-height:0;padding-top:12px;padding-bottom:12px;gap:8px 16px}
  .menu{gap:8px 16px}
  .menu a{font-size:var(--f11);padding:2px 0}
  .open__in{grid-template-columns:1fr;gap:30px;padding:40px 18px 34px}
  .split,.split--half,.band__in,.cta__grid{grid-template-columns:1fr;gap:30px}
  .wrap--rail{grid-template-columns:1fr;gap:26px}
  .list,.cat,.qs,.notes{grid-template-columns:1fr}
  .prose{columns:1;column-rule:0}
  .cat > li:nth-last-child(-n+2),.qs__i:nth-last-child(-n+2){border-bottom:0}
  .cat > li:last-child,.qs__i:last-child{border-bottom:1px solid var(--kei2)}
  .rail{position:static}
  .blk__h{font-size:var(--f23)}
  .band__side{border-left:0;border-top:1px solid var(--kei2);padding-left:0;padding-top:22px}
  .band--dark .band__side{border-top-color:#4A504C}
  .str th,.str .str__k{width:auto;display:block;padding:0 0 5px;border-bottom:0;border-top:0}
  .str td{display:block;border-top:0;padding-top:0;padding-bottom:16px}
  .str--rows th{padding-top:14px;border-top:1px solid var(--kei2)}
  /* 工程図は6工程を横に並べる図なので、狭い画面で縮めると文字が読めない。
     縮めずに図だけ横へ送れるようにする（ページ全体の横スクロールは出さない）。 */
  .dia--field{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dia--field svg{width:820px;min-width:820px;max-width:none}
  .dia--flat{overflow-x:auto}
  .dia--flat svg{width:660px;min-width:660px;max-width:none}
  .dia--side svg,.split--half .dia svg{width:100%;min-width:0}
}
@media (max-width:560px){
  .fee thead{display:none}
  .fee td{display:block;border-bottom:0;padding:2px 0}
  .fee tr{display:block;border-bottom:1px solid var(--kei);padding:12px 0}
  .rows li{grid-template-columns:1fr}
  .rows__no{grid-row:auto;margin-bottom:4px}
  .spec{gap:4px 20px}
}