:root { --ink:#202321; --muted:#5c625c; --line:#d9ddd8; --paper:#fdfdfb; --wash:#f3f5f1; --accent:#2f5347; --reading-size:18px; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.85; }
body { margin:0; min-width:320px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus-visible { left:1rem; top:1rem; z-index:10; width:auto; height:auto; padding:.5rem .75rem; background:var(--paper); color:var(--ink); border:1px solid var(--ink); }
.frame { width:min(100% - 40px, 700px); margin-inline:auto; }

/* ヘッダー・表示設定 */
.site-header { border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; min-height:58px; font-size:.75rem; color:var(--muted); }
.site-name { margin:0; letter-spacing:.05em; color:var(--ink); font-weight:700; }
.edition { margin:0; text-align:right; }
.reader-bar { display:none; border-bottom:1px solid var(--line); background:var(--wash); }
html.js .reader-bar { display:block; }
.reader-tools { display:flex; align-items:center; gap:.55rem; min-height:46px; font-size:.75rem; color:var(--muted); }
.reader-label { margin-right:.15rem; white-space:nowrap; }
.reader-mark { color:var(--muted); }
.reader-value { min-width:2.1rem; text-align:right; font-variant-numeric:tabular-nums; }
#fontsize { flex:1 1 auto; max-width:16rem; min-width:6rem; height:1.5rem; accent-color:var(--accent); cursor:pointer; }

/* 本文の基本 */
article { padding:2.5rem 0 4rem; font-size:var(--reading-size); }
.article-entry { border-bottom:1px solid var(--line); padding-bottom:2rem; }
.eyebrow,.index { margin:0 0 .5rem; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.1em; }
h1,h2,h3,p,li { overflow-wrap:anywhere; }
h1 { margin:.2rem 0 1.1rem; font-size:clamp(1.75rem,6.6vw,2.5rem); line-height:1.38; letter-spacing:.015em; }
h2 { margin:0; font-size:1.2rem; line-height:1.45; }
h3 { margin:0 0 .45rem; font-size:.95rem; }
p { margin:0 0 1rem; font-size:1em; }
.lead { color:var(--muted); font-size:1em; }
.byline { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; margin:1.2rem 0 0; color:var(--muted); font-size:.8rem; }
.byline div,.source-list div { display:flex; gap:.5rem; }
dt { font-weight:700; } dd { margin:0; }
section { border-bottom:1px solid var(--line); padding:2.2rem 0; }
section:last-of-type { border-bottom:0; }
.section-heading { display:flex; align-items:baseline; gap:.8rem; margin-bottom:1.15rem; }
.index { min-width:1.6rem; margin:0; }
mark { background:#e7ede7; color:inherit; padding:0 .15em; }
blockquote { margin:1.3rem 0; padding:.2rem 1rem; border-left:2px solid var(--accent); color:var(--muted); } blockquote p { margin:0; }
.caution { margin:1rem 0 0; color:var(--muted); font-size:.9em; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.18em; } a:hover { text-decoration-thickness:2px; }

/* 箱もの */
.note { border-left:3px solid var(--accent); background:var(--wash); padding:1rem 1.1rem; }
.note p,.note ul { margin:0; } .note ul { padding-left:1.15rem; } .note li { margin:.35rem 0 0; }
.steps { list-style:none; counter-reset:step; padding:0; margin:0; }
.steps li { counter-increment:step; display:grid; grid-template-columns:2rem 1fr; column-gap:.65rem; padding:1rem 0; border-top:1px solid var(--line); }
.steps li::before { content:"0" counter(step); color:var(--accent); font-size:.8rem; font-weight:700; }
.steps strong,.steps span { grid-column:2; }
.steps span { color:var(--muted); font-size:.92em; }
.placeholder { margin:0; border:1px solid var(--line); background:var(--wash); }
.process-card { margin-top:1.35rem; }
.placeholder-lines { height:100px; display:grid; align-content:center; gap:.8rem; padding:1.3rem; }
.placeholder-lines i { display:block; height:1px; background:#9bad9f; }
.placeholder-lines i:nth-child(1){width:48%}.placeholder-lines i:nth-child(2){width:82%}.placeholder-lines i:nth-child(3){width:66%}
figcaption { padding:1rem 1.1rem; font-size:.85em; line-height:1.7; color:var(--muted); background:var(--paper); }
.two-notes { display:grid; gap:1px; border:1px solid var(--line); background:var(--line); }
.two-notes > div { padding:1.05rem; background:var(--paper); }
.two-notes p { margin:0; color:var(--muted); font-size:.94em; }

/* 依頼文の小窓 */
.prompt-box { margin-top:1.2rem; border:1px solid var(--line); background:var(--wash); }
.prompt-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); }
.prompt-label { font-size:.8rem; font-weight:700; color:var(--muted); }
.copy-button { flex:0 0 auto; padding:.42rem .8rem; border:1px solid var(--accent); background:var(--paper); color:var(--accent); font-size:.8rem; font-weight:700; font-family:inherit; line-height:1.4; cursor:pointer; }
.copy-button:hover { background:var(--accent); color:#fff; }
.prompt-body { display:block; width:100%; height:13rem; padding:.9rem; border:0; border-radius:0; background:var(--paper); color:var(--ink); font-family:ui-monospace,SFMono-Regular,"Hiragino Sans","Yu Gothic",monospace; font-size:.9em; line-height:1.75; overflow-y:auto; resize:vertical; }
.copy-status { margin:0; padding:.55rem .9rem; min-height:1.9rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }

/* 次回予告・脚部 */
.next { margin-top:2.5rem; border:1px solid var(--line); padding:1.5rem; background:var(--wash); }
.next .section-heading { margin-bottom:.9rem; }
.next-note { color:var(--muted); font-size:.94em; }
.button-link { display:inline-flex; gap:.7rem; align-items:center; padding:.6rem .8rem; border:1px solid currentColor; font-size:.9rem; font-weight:700; text-decoration:none; }
.button-link:hover { background:var(--accent); color:#fff; }
.site-footer { border-top:1px solid var(--line); margin-top:3rem; padding:1.8rem 0 2.4rem; color:var(--muted); font-size:.8rem; }
.footer-title { margin:0 0 .9rem; font-size:.8rem; letter-spacing:.1em; color:var(--accent); }
.source-list { display:grid; gap:.55rem; margin:0 0 1rem; }
.source-list dt { min-width:5.1rem; } .source-list dd { overflow-wrap:anywhere; }
.footer-note { margin:0; line-height:1.8; }

:focus-visible { outline:3px solid #a85f00; outline-offset:3px; }
@media (min-width: 720px) {
  .frame { width:min(100% - 96px, 700px); }
  article { padding-top:3.4rem; }
  .two-notes { grid-template-columns:1fr 1fr; }
  .prompt-body { height:15rem; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }

/* ============ サイト共通（トップ・運営者） ============ */
:root { --navy:#1e2c50; --navy-soft:#4a5878; --seal:#a8332b; }
.site-main { padding:1.8rem 0 2.6rem; }
.block { padding:1.8rem 0; border-bottom:1px solid var(--line); }
.block:last-child { border-bottom:0; }
.block-title { margin:0 0 .2rem; font-size:1.05rem; }
.block-note { margin:0 0 1rem; color:var(--muted); font-size:.82rem; }

/* 石板風サイト名(CSS表現・画像化しない) */
.stone { background:linear-gradient(180deg,#f7f8f5,#eceee8); border:1px solid var(--line); padding:1.5rem 1.2rem; text-align:center; }
.stone-name { margin:0; font-family:"Hiragino Mincho ProN",'Yu Mincho',serif; font-size:clamp(1.35rem,5.4vw,2rem); letter-spacing:.14em; color:var(--navy); text-shadow:0 1px 0 #fff, 0 -1px 0 rgba(30,44,80,.16); }
.stone-sub { margin:.6rem 0 0; font-size:.76rem; letter-spacing:.08em; color:var(--muted); }
.stone-lead { margin:1rem 0 0; font-size:.9rem; color:var(--ink); line-height:1.75; text-align:left; }

/* 最新3記事＝カテゴリ表示グラデーション（3段階） */
.feed { list-style:none; margin:0; padding:0; }
.feed li { border-top:1px solid var(--line); }
.feed li:first-child { border-top:0; }
.feed a { display:block; padding:.95rem 0; text-decoration:none; }
.feed a:hover .feed-title { text-decoration:underline; }
.feed-meta { display:flex; gap:.7rem; align-items:baseline; font-size:.72rem; letter-spacing:.04em; }
.feed-title { margin:.3rem 0 .25rem; font-size:1rem; line-height:1.5; font-weight:700; }
.feed-desc { margin:0; font-size:.84rem; line-height:1.65; }
.rank1 { --fg:#202321; --fg2:#5c625c; --ln:#d9ddd8; }
.rank2 { --fg:#3b423b; --fg2:#5c625c; --ln:#e2e5e0; }
.rank3 { --fg:#5a605a; --fg2:#6a706a; --ln:#e9ebe7; }
.feed li.rank2, .feed li.rank3 { border-top-color:var(--ln); }
.feed .feed-title { color:var(--fg); }
.feed .feed-desc, .feed .feed-meta { color:var(--fg2); }
.feed-cat { color:var(--accent); font-weight:700; }

/* プロフィール */
.profile { display:grid; grid-template-columns:104px 1fr; gap:1rem; align-items:start; }
.profile img { width:104px; height:104px; border:1px solid var(--line); background:var(--wash); display:block; }
.profile-name { margin:0 0 .3rem; font-size:.95rem; font-weight:700; }
.profile-text { margin:0 0 .7rem; font-size:.85rem; line-height:1.7; color:var(--muted); }

/* X吹き出し */
.bubble-wrap { position:relative; display:inline-block; max-width:100%; }
.bubble { position:relative; display:block; max-width:100%; text-align:left; padding:.6rem .8rem; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-size:.82rem; line-height:1.6; text-decoration:none; cursor:pointer; transition:transform .18s ease, border-color .18s ease; }
.bubble::after { content:""; position:absolute; left:18px; top:-6px; width:10px; height:10px; background:var(--paper); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
.bubble:hover, .bubble:focus-visible { border-color:var(--navy-soft); transform:translateY(-2px); }
.bubble-add { position:absolute; right:0; bottom:calc(100% + 10px); padding:.35rem .6rem; border:1px solid var(--navy-soft); background:var(--paper); color:var(--navy); font-size:.74rem; white-space:nowrap; opacity:0; transform:translateY(3px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
@media (hover: hover) and (pointer: fine) {
  .bubble-wrap:hover .bubble-add, .bubble:focus-visible ~ .bubble-add { opacity:1; transform:translateY(0); }
}
.bubble-status { margin:.45rem 0 0; font-size:.74rem; color:var(--muted); min-height:1.1em; }

/* 導線アイコン（ネイビー単色・X→note→Capafyの順） */
.links { display:flex; gap:.85rem; align-items:center; margin:.9rem 0 .35rem; padding:0; list-style:none; }
.links li { display:flex; }
.icon-slot { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--line); background:var(--paper); color:var(--navy); }
.icon-slot svg { width:15px; height:15px; fill:currentColor; }
.links-note { margin:0; font-size:.72rem; color:var(--muted); }

/* 建築計画のお知らせ */
.plate-open { display:block; width:100%; padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.plate { border:1.5px solid var(--navy); background:#fff; padding:.75rem .85rem; }
.plate-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; border-bottom:1px solid var(--navy); padding-bottom:.45rem; margin-bottom:.5rem; }
.plate-title { margin:0; font-family:"Hiragino Mincho ProN",'Yu Mincho',serif; font-size:.92rem; letter-spacing:.1em; color:var(--navy); }
.seal { width:16px; height:16px; border:1.5px solid var(--seal); border-radius:50%; flex:0 0 auto; }
.plate-table { width:100%; border-collapse:collapse; font-size:.74rem; }
.plate-table th, .plate-table td { border:1px solid var(--navy); padding:.3rem .45rem; vertical-align:top; text-align:left; }
.plate-table th { width:34%; font-weight:400; color:var(--navy-soft); font-size:.68rem; }
.plate-table td { color:var(--ink); }
.plate-hint { margin:.45rem 0 0; font-size:.7rem; color:var(--muted); }
dialog.plate-modal { width:min(100% - 32px, 620px); border:1.5px solid var(--navy); background:#fff; padding:1.1rem; }
dialog.plate-modal::backdrop { background:rgba(32,35,33,.4); }
dialog.plate-modal .plate-table { font-size:.86rem; }
dialog.plate-modal .plate-table th { font-size:.78rem; }
.modal-close { margin-top:.9rem; padding:.45rem .9rem; border:1px solid var(--navy); background:var(--paper); color:var(--navy); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }

/* 工事日報（枠のみ） */
.daily { width:100%; border-collapse:collapse; font-size:.74rem; }
.daily th, .daily td { border:1px solid var(--line); padding:.35rem .45rem; text-align:left; }
.daily thead th { background:var(--wash); color:var(--navy-soft); font-weight:400; font-size:.7rem; }
.daily td.num { color:var(--muted); font-variant-numeric:tabular-nums; }
.daily caption { caption-side:top; text-align:left; padding:0 0 .5rem; font-size:.74rem; color:var(--muted); }
@media (max-width: 480px) { .daily, .daily tbody, .daily tr, .daily td, .daily th { display:block; width:100%; } .daily caption { display:block; width:100%; } .daily thead { display:none; } .daily tr { border:1px solid var(--line); margin-bottom:.4rem; } .daily td, .daily th { border:0; border-bottom:1px solid var(--line); } .daily tr td:last-child { border-bottom:0; } .daily td::before { content:attr(data-label) "　"; color:var(--navy-soft); font-size:.7rem; } }

/* 運営者ページ */
.about-list { display:grid; gap:.6rem; margin:0; font-size:.88rem; }
.about-list div { display:grid; grid-template-columns:7.2rem 1fr; gap:.6rem; }
.about-list dt { color:var(--muted); font-weight:400; font-size:.8rem; }
.pill { display:inline-block; margin:0 .3rem .3rem 0; padding:.2rem .5rem; border:1px solid var(--line); font-size:.78rem; color:var(--muted); }
.nav-links { display:flex; gap:1rem; font-size:.78rem; }
@media (min-width: 720px) { .profile { grid-template-columns:132px 1fr; } .profile img { width:132px; height:132px; } }
@media (prefers-reduced-motion: reduce) { .bubble, .bubble-add { transition:none !important; transform:none !important; } .bubble:hover, .bubble:focus-visible { transform:none; } }