/* A — architectural journal. Paper, chapter rules, serif numerals. */
:root{--a-ink:#202020;--a-sub:#484848;--a-rule:#929292;--k4:#555555}
html body{background:#fff;color:var(--a-ink);counter-reset:ka-chapter}
html .hd{background:linear-gradient(90deg,#fff,#f4f4f4);color:#202020;border-bottom:1px solid #929292}
html .hd .logo span{color:#484848;opacity:1}
html .hd nav li+li{border-left:1px solid #aaa;padding-left:12px}
html .hd nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
html .hero{background:#fff;color:#202020}
html .hero .mov{background:linear-gradient(110deg,#fff 38%,#f4f4f4 75%,#e8e8e8)}
html .hero .veil{background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,0))}
html .hero h1{font-family:var(--mincho);font-weight:700;color:#202020}
html .hero h1 .ka-gothic{font-family:var(--gothic);font-weight:800}
html .hero p,html .hero .side,html .hero .ply span{color:#484848}
html .hero .in>div{border-left:1px solid #929292}
html .hero .ply i{border-color:#484848}
html .hero .ply i::after{border-left-color:#484848}
html .hero .rule{height:1px;background:#929292}
/* Keep original padding. Rules and numbers occupy the existing upper margin. */
html .sec.white,html .atama,html .body-a,html .kanren{background:linear-gradient(90deg,#fff,#fafafa);color:#202020}
html .sec.paper,html .sec.dark,html .soudan,html .faq{background:linear-gradient(110deg,#f4f4f4,#f8f8f8);color:#202020}
html .sec,html .soudan,html .faq,html .atama{position:relative;counter-increment:ka-chapter}
html .sec::before,html .soudan::before,html .faq::before,html .atama::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#202020;pointer-events:none}
.ka-chapter{position:absolute;left:max(20px,calc((100% - 1100px)/2));top:13px;display:flex;align-items:center;gap:10px;color:#484848;font:11px/1 var(--gothic);letter-spacing:.12em;pointer-events:none}
.ka-chapter::before{content:counter(ka-chapter,decimal-leading-zero)}
.ka-chapter::after{content:"";width:28px;height:1px;background:#929292}
html .h2{font-family:var(--mincho);font-size:35px;font-weight:700;border-bottom:1px solid #929292;padding-bottom:10px}
html .h2 .sm{font-family:var(--gothic);font-weight:600;color:#484848;letter-spacing:.16em}
html .soudan h2,html .faq h2{font-family:var(--mincho);font-weight:700;border-bottom:1px solid #aaa;padding-bottom:9px}
html .atama h1{font-family:var(--mincho);font-weight:700}
html .sec.dark .desc,html .sec.dark .e figcaption,html .sec.dark .e figcaption b,html .sec.dark .h2 .sm,html .nums span,html .kyoka{color:#484848}
/* Paper cards stay flat at every depth, including steps, voices and FAQ. */
html .cards a,html .kanren a{background:#fff;color:#202020;border:1px solid #929292;border-radius:0;box-shadow:none;transition:box-shadow .35s ease,border-color .35s ease}
html .cards p,html .card p,html .cards em,html .card .go,html .kanren span,html .kanren em{color:#484848}
html .cards .ic,html .card .ic,html .kanren .ic{color:#202020}
html .step,html .koe,html .qa .card2,html .faq .qa{background:#fff;border:1px solid #aaa;border-radius:0;box-shadow:none}
html .step .bd{border-top:1px solid #929292}
html .step .no em{font-family:var(--mincho);color:#202020}
html .e figcaption{color:#484848;border-bottom:1px solid #aaa;padding-bottom:9px}
html .nums{border-top:1px solid #202020;border-bottom:1px solid #202020}
html .nums>div{background:transparent;border:0;border-left:1px solid #aaa;box-shadow:none;text-align:center}
html .nums>div:first-child{border-left:0}
html .nums b,html .nums div.hi b{font-family:var(--mincho);font-size:52px;font-weight:600;line-height:1.1;color:#202020}
html .nums b i{font-family:var(--gothic);color:#484848}
html .kyoka{border-color:#929292}
html .jisseki{background:#fff;border-top:1px solid #202020}
html .jisseki th{background:#f4f4f4;color:#202020;border-bottom:2px solid #202020;font-family:var(--mincho)}
html .jisseki td{border-bottom:1px solid #aaa}
html .futatsu .mine,html .obi,html .komuten{background:#f4f4f4;color:#202020;border:1px solid #929292;box-shadow:none}
html .futatsu .mine li{border-color:#aaa}
html .futatsu h3 em,html .futatsu .yours h3 em{background:#fff;color:#202020;border:1px solid #929292}
html .obi p,html .obi .ic{color:#484848}
html .soudan p,html .soudan .area,html .soudan .area .em{color:#484848}
html .soudan .area{background:transparent;border-color:#929292}
html .soudan .ways>a.w{background:#fff;border:2px solid #202020;color:#202020;box-shadow:none;border-radius:0;transition:box-shadow .4s ease}
html .soudan .ways>a.w b,html .soudan .ways>a.w span{color:#484848}
html .soudan .ways>a.w strong{font-family:var(--mincho);color:#202020}
/* All secondary and main buttons use one editorial ink-fill interaction. */
html .btn,html .btn.line,html .btn.fill,html .hero .btn,html .sec.dark .btn.line,html .sec.dark .btn.fill,html .komuten .btn,html .hd .tel,html .obi .go{background:#fff;color:#202020;border:1px solid #202020;border-radius:0;min-height:44px;min-width:44px;box-shadow:none;transition:box-shadow .3s ease,background-size .45s ease;position:relative}
html .go{min-height:44px;display:inline-flex;align-items:center}
@media(hover:hover){
 html .cards a:hover,html .kanren a:hover{background:#fff;color:#202020;border-color:#202020;box-shadow:inset 5px 0 #202020}
 html .soudan .ways>a.w:hover{background:#fff;color:#202020;box-shadow:inset 7px 0 #202020}
 html .btn:hover,html .btn.line:hover,html .btn.fill:hover,html .hero .btn:hover,html .sec.dark .btn.line:hover,html .sec.dark .btn.fill:hover,html .komuten .btn:hover,html .hd .tel:hover,html .obi .go:hover{background:linear-gradient(#111,#111) left/0% 100% no-repeat,#3a3a3a;color:#fff;opacity:1;animation:ka-ink .45s ease-out forwards}
 @keyframes ka-ink{to{background-size:100% 100%}}
 html a:hover .go{border-bottom-color:#202020;text-decoration:underline;text-underline-offset:6px}
 html .spbar a:hover{background:#f4f4f4;box-shadow:inset 0 3px #202020}
}
html .btn:focus-visible,html .hd .tel:focus-visible,html .soudan .w:focus-visible,html .cards a:focus-visible,html .kanren a:focus-visible,html .spbar a:focus-visible{outline:2px solid #202020;outline-offset:4px;box-shadow:0 0 0 2px #fff}
html a:focus-visible .go{outline:1px solid #202020;outline-offset:3px}
html .btn:active,html .btn.line:active,html .btn.fill:active,html .hero .btn:active,html .sec.dark .btn.line:active,html .sec.dark .btn.fill:active,html .komuten .btn:active,html .hd .tel:active,html .obi .go:active{background:#202020;color:#fff;box-shadow:inset 0 0 0 2px #fff;animation:none;translate:0 1px}
html .cards a:active,html .kanren a:active,html .soudan .ways>a.w:active{box-shadow:inset 8px 0 #202020;background:#f4f4f4;translate:0 1px}
html .spbar{background:#fff;border-top:1px solid #202020;box-shadow:none}
html .spbar .t,html .spbar .l,html .spbar .m{background:#fff;color:#202020;border-right:1px solid #929292;min-height:44px;transition:box-shadow .3s ease}
html .spbar a:active{background:#e8e8e8;box-shadow:inset 0 5px #202020}
/* Article / company / form supporting surfaces continue the paper language. */
html .kikan,html .kangae,html .sageru .s,html .oubo,html .sodan,html .shashin{background:#f4f4f4;color:#202020;border:1px solid #929292}
html .kikan .st span,html .kikan .ar,html .kikan .fin,html .kangae p,html .kanren .ic,html .sageru p,html .sageru em,html .sageru .ic,html .oubo p,html .sodan p{color:#484848}
html .kangae b{color:#202020}
html .range .cap,html .shiryo .hd2,html .bar .a,html .phone .msg.me{background:#f4f4f4;color:#202020;border-bottom:1px solid #929292}
html .range .cap span{color:#484848}
html .tag,html .ketsu .tag,html .yakusoku .tag,html .hissu,html .shibori span.on,html .faq .q .mk,html .qa .q .mk,html .hanni h3 i,html .hanni .no h3 i,html .komi h3 i,html .komi .x h3 i{background:#fff;color:#202020;box-shadow:inset 0 0 0 1px #929292;border-radius:0}
html .sodan .btns a.o{background:#fff;color:#202020;border:1px solid #929292}
html .faq .ttl{color:#484848}
html .ft{background:linear-gradient(115deg,#171717,#292929);color:#eee;border-top:3px solid #929292}
html .ft p,html .ft a,html .ft h4,html .ft .btm,html .ft .logo span{color:#eee;opacity:1}
html .ft a:hover{color:#fff;opacity:1;text-decoration:underline;text-underline-offset:6px}
html .ft :focus-visible{outline:1px solid #fff;outline-offset:5px}
html .ka-word{color:#595959;color:color-mix(in srgb,#171717 calc(var(--ink,1)*100%),#595959)}
@media(prefers-reduced-motion:no-preference){
 html.anim .hero h1,html.anim .hero p,html.anim .hero .btn{transition:opacity .8s ease-out,transform .8s ease-out;transform:translateY(24px)}
 html.anim .hero h1{transition-delay:0s}html.anim .hero p{transition-delay:.2s}html.anim .hero .btn{transition-delay:.4s}
 html.anim .hero.shown h1,html.anim .hero.shown p,html.anim .hero.shown .btn{opacity:1;transform:none}
}
@media(max-width:980px){html .h2{font-size:28px}}
@media(max-width:620px){html .h2{font-size:24px}html .nums b{font-size:50px}.ka-chapter{top:10px;font-size:10px}html .hd nav li+li{padding-left:0}}

/* Accessibility baseline is the only block deliberately shared by the proposals. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html.anim main>*,html.anim .soudan,html.anim [data-r],html.anim .hero h1,html.anim .hero p,html.anim .hero .desc,html.anim .hero .btn{opacity:1!important;transform:none!important;translate:none!important}
 .ka-word,.kc-word{opacity:1!important;filter:none!important;transform:none!important}
 html .hero .mov,html .hero .in>div{transform:none!important;opacity:1!important}
 html .btn,html .go,html .soudan .w,html .hd .tel,html .cards a,html .spbar a,html a .go{translate:none!important;transform:none!important}
}

/* Primary buttons only: C's dark surface and stretching arrow. */
html .hero .btn,html .komuten .btn,html .hd .tel{background:#171717;color:#fff;border:1px solid #171717;border-radius:0;min-height:44px;min-width:44px}
html .hero .btn::after,html .komuten .btn::after{content:"";flex:none;width:20px;height:8px;background:currentColor;clip-path:polygon(0 43%,78% 43%,78% 0,100% 50%,78% 100%,78% 57%,0 57%);transform-origin:left center;transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
 html .hero .btn:hover,html .komuten .btn:hover,html .hd .tel:hover{background:#303030;color:#fff;opacity:1;animation:none}
 html .hero .btn:hover::after,html .komuten .btn:hover::after{transform:scaleX(1.6)}
}
html .hero .btn:active,html .komuten .btn:active,html .hd .tel:active{background:#000;color:#fff;translate:0 1px}
html .hero .btn:focus-visible,html .komuten .btn:focus-visible,html .hd .tel:focus-visible{outline-color:#202020;box-shadow:0 0 0 2px #fff}
@media(prefers-reduced-motion:reduce){
 html .hero .btn::after,html .komuten .btn::after{transition:none!important;transform:none!important}
}
/* /flow/ の解体ガイド動画。16:9 の枠を先に取って読み込み前の高さの跳ねを防ぐ */
html .douga{margin:22px 0 0}
html .douga .waku{position:relative;width:100%;aspect-ratio:16/9;background:#111;border:1px solid #202020}
html .douga video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#111}
html .douga figcaption{margin-top:8px;font-size:13px;color:#555}

/* トップ冒頭見出しの「解体」を大きなコンクリート色に（2026-10-06 ボス指示「文字の配色だけでいい」。割れ・ヒビ・動きは付けない） */
html .hero h1:has(.kaitai){white-space:nowrap;line-height:1.32}
html .hero h1 .kaitai{display:inline-block;position:relative;font-family:var(--gothic);font-weight:900;font-size:1.5em;line-height:1;letter-spacing:-.02em;vertical-align:baseline;margin-top:.25em;margin-bottom:.03em;color:#4e4a47}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
html .hero h1 .kaitai{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%2290%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.16%22%20numOctaves%3D%222%22%20seed%3D%228%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%203%20-1.2%22%20result%3D%22grain%22%2F%3E%3CfeFlood%20flood-color%3D%22%238a8582%22%2F%3E%3CfeComposite%20in2%3D%22grain%22%20operator%3D%22in%22%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22%234e4a47%22%20d%3D%22M0%200h180v90H0z%22%2F%3E%3Cpath%20filter%3D%22url%28%23n%29%22%20opacity%3D%22.28%22%20d%3D%22M0%200h180v90H0z%22%2F%3E%3C%2Fsvg%3E");background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* 本物のロゴマーク（透明PNG）。旧マークの白い箱・枠を残さない */
html .hd .logo img.mk,html .ft .logo img.mk{background:transparent;border:0;border-radius:0;padding:0;object-fit:contain;flex-shrink:0}
/* スマホ: 縦積みの表に型別の固定幅を残さない／読ませる補足は15〜16pxへ／単独のリンクは指で押せる高さ44px */
@media (max-width:620px){
html .hyou th,html .hyou td{display:block;width:100%;max-width:none;font-size:16px;line-height:1.8;padding:12px 16px}
html .hyou th{white-space:normal}
html .fld .hint,html .doui .hint{font-size:15px;line-height:1.8}
html .youso .y span,html .kanren span{font-size:15px;line-height:1.8}
html .ft li{padding:0}
html .ft li>a{display:flex;align-items:center;min-height:44px;padding:8px 0}
html .moku li{padding:0}
html .moku li>a{display:flex;align-items:center;min-height:44px;padding:6px 0}
html .logo{min-height:44px}
html .jusho a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
html .sageru a[href="/guide/subsidy/"]{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
}

/* 10/09 指摘（/coating/）: ヘッダー右に LINE の入口。色は持ち込まず白黒で（色はイラストと写真だけ）。
   スマホは下の追従バナーに LINE があるので出さない */
html .hd .line{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid #202020;background:#fff;color:#202020;font-size:14px;font-weight:700;white-space:nowrap}
html .hd .line .lm{width:26px;height:24px;flex:none}
html .hd .line .lm path{fill:#202020}
html .hd .line .lm text{fill:#fff;font:800 7.4px Arial,Helvetica,sans-serif;letter-spacing:0}
html .hd .line:hover{background:#f4f4f4}
html .hd .line:focus-visible{outline:2px solid #202020;outline-offset:4px;box-shadow:0 0 0 2px #fff}
html .hd .line+.tel{margin-left:-14px}
@media (max-width:620px){html .hd .line{display:none}}
/* ナビが出る幅（981px〜）は横が足りない。1400px 未満はロゴだけにし、広い画面はヘッダーの器を広げて文字も出す */
@media (min-width:981px) and (max-width:1399px){html .hd .line{padding:0 9px}html .hd .line .lt{display:none}}
@media (min-width:1240px) and (max-width:1399px){html .hd-in{max-width:1240px}}
@media (min-width:1400px){html .hd-in{max-width:1340px}}
/* 10/09 指摘: 問い合わせ欄の3つの入口を同じ幅で1列に並べ、欄を本文の幅いっぱいに使う（右の空きをなくす） */
@media (min-width:981px){
  .soudan .ways{grid-template-columns:repeat(3,1fr);max-width:none}
  .soudan .w.ln{grid-column:auto}
  .soudan .w{padding:22px 18px}
  .soudan .w strong{font-size:18px;white-space:nowrap}
  .soudan .w span{text-wrap:pretty}
}
