/* 現場の道具ノート — 携帯優先の最小の見た目。外部フォント・外部CSSは使わない。 */
:root {
  --ink: #1e2328;
  --muted: #5b6670;
  --line: #d9dee3;
  --paper: #ffffff;
  --paper-2: #f4f6f8;
  --accent: #1f5f8b;
  --accent-ink: #ffffff;
  --diy: #e9f3ea;
  --diy-line: #7fae86;
  --hire: #fff4e5;
  --hire-line: #d9a05b;
  --note: #f7f2e8;
  --maxw: 44rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  word-break: normal;
  overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* 広告表記（全ページの最上部） */
.pr-banner {
  margin: 0;
  padding: 0.5rem 1rem;
  background: #fff4d6;
  color: #3d2c00;
  font-size: 0.95rem;
  font-weight: 700;
  border-bottom: 2px solid #e0b84a;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

/* 頭 */
.site-header {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.9rem 1rem 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.site-header .brand {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.site-header nav a { font-size: 0.9rem; margin-right: 0.8rem; }
.tagline { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }

/* 本文の幅 */
main { max-width: var(--maxw); margin: 0 auto; padding: 0.5rem 1rem 2rem; }
h1 { font-size: 1.5rem; line-height: 1.4; margin: 0.6rem 0 0.8rem; }
h2 { font-size: 1.2rem; line-height: 1.4; margin: 2rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--line); }
h3 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: 0.3rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: 0.95rem; }
th, td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
th { background: var(--paper-2); }

/* 著者・日付 */
.meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.2rem; }
.meta span { display: inline-block; margin-right: 1rem; }
.lead { font-size: 1.05rem; }

/* 二択の枠 */
.choice { padding: 0.8rem 1rem; border-radius: 6px; margin: 0 0 1.2rem; }
.choice h2 { margin-top: 0.2rem; border-bottom-color: transparent; }
.choice-diy { background: var(--diy); border-left: 5px solid var(--diy-line); }
.choice-hire { background: var(--hire); border-left: 5px solid var(--hire-line); }
.hitokoto { background: var(--note); padding: 0.8rem 1rem; border-radius: 6px; margin: 0 0 1.2rem; }
.hitokoto h2 { margin-top: 0.2rem; border-bottom-color: transparent; }
.price-note { color: var(--muted); font-size: 0.85rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }

/* リンク（計測つき・準備中） */
a[rel~="sponsored"]::after { content: " ↗"; font-size: 0.8em; }
.link-pending { color: var(--muted); }
.link-pending::after { content: ""; }

/* 写真の枠（準備中） */
figure { margin: 0 0 1.2rem; }
figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; }
.photo-box {
  border: 2px dashed var(--line);
  color: var(--muted);
  text-align: center;
  padding: 2rem 1rem;
  background: var(--paper-2);
  border-radius: 6px;
}

/* FAQ */
.faq h3 { margin-top: 1rem; }
.faq h3::before { content: "Q. "; color: var(--accent); }
.faq p::before { content: "A. "; color: var(--muted); }

/* 記事一覧 */
.article-list { list-style: none; padding: 0; }
.article-list li { border-bottom: 1px solid var(--line); padding: 0.7rem 0; margin: 0; }
.article-list a { font-weight: 600; text-decoration: none; }
.article-list a:hover { text-decoration: underline; }
.article-list .desc { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.2rem; }
.article-list .date { color: var(--muted); font-size: 0.8rem; }
.cluster-tag { display: inline-block; font-size: 0.75rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 0.4rem; margin-right: 0.4rem; }

/* 脚 */
.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.2rem 1rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer p { margin: 0 0 0.5rem; }
.author-box { background: var(--paper-2); padding: 0.7rem 0.9rem; border-radius: 6px; margin-bottom: 0.8rem; }

/* 広い画面 */
@media (min-width: 40rem) {
  body { font-size: 1.05rem; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.3rem; }
  .site-header { padding-top: 1.4rem; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ebee; --muted: #a2abb3; --line: #3a434b; --paper: #15191d; --paper-2: #1f252b;
    --accent: #7fb7e2; --diy: #1d2d20; --diy-line: #6f9c76; --hire: #332a1c; --hire-line: #c48c43; --note: #2a2620;
  }
}
@media print { .pr-banner, .site-header nav { display: none; } }

/* 地域の相談窓口（運営元の施工チーム） */
.local-desk { border: 2px solid #1f6f43; border-radius: 10px; padding: 14px 16px; margin: 18px 0; background: #f3faf5; }
.local-desk p { margin: 6px 0; }
.local-desk-area { font-size: 1.05em; }
.local-desk-button { display: inline-block; background: #06c755; color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.local-desk-outside { font-size: .9em; color: #555; }
@media (prefers-color-scheme: dark) { .local-desk { background: #12261a; border-color: #3fa86b; } .local-desk-outside { color: #aaa; } }

.local-desk-title{font-size:1.15em;color:#1f6f43}.local-desk-reply{font-size:.9em;color:#555}.local-desk-monitor{border-top:1px dashed #1f6f43;padding-top:8px;font-size:.92em}
.trust-box{border:1px solid #ccc;border-radius:10px;padding:12px 16px;margin:24px 0;background:#fafafa}.trust-box h2{font-size:1.05em;margin:0 0 6px}.trust-box li{margin:4px 0}
.ad-mark{margin-left:4px;font-size:.8em;color:#8a5a00;font-weight:600}
.local-desk-near{background:#fff;border-left:4px solid #1f6f43;padding:6px 10px}
.desk-more{margin:8px 0;background:#fff;border:1px solid #cfe3d6;border-radius:8px;padding:6px 10px}.desk-more summary{cursor:pointer;font-weight:700;color:#1f6f43}
.chat{display:flex;flex-direction:column;gap:6px;margin:8px 0}.bubble{max-width:85%;padding:8px 12px;border-radius:14px;margin:0;line-height:1.5}.bubble .who{display:block;font-size:.75em;color:#666}
.bubble.you{align-self:flex-end;background:#d9f7c4}.bubble.pro{align-self:flex-start;background:#f0f0f0}
.price-table{width:100%;border-collapse:collapse;margin:6px 0}.price-table th,.price-table td{border:1px solid #ddd;padding:6px;text-align:left;font-size:.92em}
.small{font-size:.82em;color:#666}.cases{margin-top:8px}
.outside-compare{border:1px dashed #8a5a00;border-radius:10px;padding:12px 16px;margin:20px 0;background:#fffaf0}.outside-compare h2{font-size:1.05em;margin:0 0 6px}
.ui-ic{width:40px;height:40px;stroke:#1f6f43;stroke-width:2}
.ui-steps{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ui-steps li{position:relative;background:#fff;border:1px solid #d7e7dc;border-radius:14px;padding:16px;box-shadow:0 4px 14px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:6px}
.ui-steps strong{font-size:1.05em}.ui-steps span{color:#555;font-size:.92em}.ui-num{position:absolute;top:10px;right:12px;background:#1f6f43;color:#fff!important;border-radius:999px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:700}
.ui-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
.ui-price{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:linear-gradient(135deg,#f6fbf8,#eef6f1);border:1px solid #cfe3d6;text-decoration:none;color:#222}
.ui-price-t{font-size:.92em;color:#444}.ui-price-v{font-size:1.25em;font-weight:800;color:#1f6f43}
.area-hero{background:linear-gradient(135deg,#1f6f43,#0f3d5c);color:#fff;border-radius:16px;padding:20px 22px;margin:8px 0 18px}.area-hero p{margin:6px 0}.area-hero strong{font-size:1.15em}
.sticky-line{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:block;text-align:center;background:#06c755;color:#fff!important;font-weight:800;padding:14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);text-decoration:none}
@media(min-width:900px){.sticky-line{left:auto;right:24px;width:320px}}
body{padding-bottom:84px}

.ad-px{border:0;position:absolute;width:1px;height:1px;opacity:0}

@media (prefers-color-scheme: dark){.trust-box{background:#1b1f24;border-color:#444}.outside-compare{background:#241d10;border-color:#c9a14a}.trust-box,.outside-compare{color:#e6e6e6}}

.oc-nudge{font-weight:700;border-left:4px solid #c9a14a;padding:6px 10px;margin:10px 0}
.oc-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:.92em}
.oc-table th,.oc-table td{border-bottom:1px solid #d9c9a3;padding:8px 6px;text-align:left;vertical-align:top}
.oc-table tr.oc-top{background:rgba(201,161,74,.15)}
.oc-btn{display:inline-block;background:#d9480f;color:#fff!important;font-weight:700;padding:8px 12px;border-radius:8px;text-decoration:none;white-space:nowrap}
@media (max-width:640px){.oc-table thead{display:none}.oc-table tr{display:block;border-bottom:1px solid #d9c9a3;padding:6px 0}.oc-table th,.oc-table td{display:block;border:0;padding:3px 4px}.oc-table td[data-l]::before{content:attr(data-l)"：";font-weight:700}}