/* ===== base.css ===== */
/* インテリア吉田 — 2026-10-03 Figma「10｜新デザイン」（ページ 338:2・決まりの表 386:2）の実装。
   このファイルは builders/css/ の部品から lib.build_css() が組み立てる。site/site.css を直接直さない。
   値は決まりの表のまま: 色 9 つ・文字は PC/スマホの 2 段（390〜1440 の幅で連続して変わる）・余白・12 列の格子。
   CSP の都合で外部フォントは読まない（明朝・ゴシックとも端末の書体。iPhone・Mac はヒラギノ、Windows は游書体）。 */
:root{
  --white:#ffffff;--alt:#f6f5f2;--line:#e4e1d9;--ink:#25271f;--text:#4a4f45;--muted:#6b7064;
  --dark:#20241e;--dark-card:#2b3027;--dark-line:#41463b;--dark-text:#cfd2c4;--paper:#f4f1e9;--illu:#f3f0e9;
  --accent:#2f4c6e;--accent-d:#93a9c6;--ok:#4f7a3a;--btn-line:#c9c4b6;--field:#9a9686;--shu:#c23a1e;--shu-soft:#f7e6df;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif CJK JP","Noto Serif JP",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --roman:"Times New Roman",Tinos,Times,serif;
  /* 390→1440 の間で連続して変わる値 */
  --fl:calc((100vw - 390px) / 1050);
  --gut:clamp(16px,calc(16px + 104 * var(--fl)),120px);
  --sec:clamp(64px,calc(64px + 48 * var(--fl)),112px);
  --gap:clamp(16px,calc(16px + 8 * var(--fl)),24px);
  --pad:clamp(22px,calc(22px + 10 * var(--fl)),32px);
  --hgap:clamp(32px,calc(32px + 24 * var(--fl)),56px);
  --wrap:1200px;--head:64px;--r:10px;
  --t-h1:clamp(40px,calc(40px + 36 * var(--fl)),76px);
  --t-h2:clamp(28px,calc(28px + 16 * var(--fl)),44px);
  --t-h3:clamp(22px,calc(22px + 4 * var(--fl)),26px);
  --t-h4:clamp(18px,calc(18px + 3 * var(--fl)),21px);
  --t-body:clamp(17px,calc(17px + 1 * var(--fl)),18px);
  --t-small:clamp(15px,calc(15px + 1 * var(--fl)),16px);
}
@media(min-width:1024px){:root{--head:88px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.8;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;line-break:strict}
img{max-width:100%;height:auto;display:block}
svg.ic{flex:none;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #a58b43;outline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:500}
h1,h2,h3,h4,.card__sub,.card__title,.faq__q{word-break:auto-phrase;text-wrap:balance} /* 見出しは文節で折る */
p,li,dt,dd{text-wrap:pretty}
/* 短い部品の文（札・ボタン・リンク・箇条・表の値）は語の途中で折らない。本文の段落は対象外（行が短くなるため） */
.sh__lead,.page-head__lead,.cta__text,.card__text,.rows dd,.faq summary,.faq__a p,.site-foot__brand p,.site-foot__copy,.art-checks li,.note,.chip,.act,.more a,.state,.status-line,.card__label,.checks li,.dots-list li,.price__incl li,.toc li,.siteinfo dd,.site-foot nav a,.form .btn,.cap,.imgnote,.nums__l,.nums__s,.est__k,.pz-unit__k,.page-trail{word-break:auto-phrase}
.act,.state,.form .btn,.more a,.cap,.site-foot nav a{text-wrap:balance} /* 本文は普通に折り、最後の行に数文字だけ残さない（文節折りは本文の行を短くし、語の途中で折れることもあるため見出しだけ） */
p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:min(100% - var(--gut) * 2,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - var(--gut) * 2,780px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--white);padding:8px 14px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb{display:inline-block}
.pc{display:none}
@media(min-width:1024px){.pc{display:inline}.sp{display:none}}
.serif{font-family:var(--serif);font-weight:500}
.roman{font-family:var(--roman);font-weight:400}
.small{font-size:var(--t-small);line-height:1.75;color:var(--text)}
.note{font-size:14px;line-height:22px;color:var(--muted)}
.lead{font-size:var(--t-body);line-height:1.85;color:var(--text)}
.kicker{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--ink)}

/* ===== 節 ===== */
.sec{padding-block:var(--sec);background:var(--white)}
.sec--alt{background:var(--alt)}
.sec--dark{background:var(--dark);color:var(--paper)}
.sec>.wrap{display:grid;gap:var(--hgap)}
.sec__body{display:grid;gap:var(--gap)}
/* 節の見出し: 番号 ＋ 短い線 ＋ 小見出し / 明朝の見出し / 説明（最大 780px） */
.sh{display:grid;gap:18px;align-content:start}
.sh__label{display:flex;align-items:center;gap:12px;font-size:15px;line-height:24px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.sh__num{font-family:var(--roman);font-size:20px;font-weight:400;letter-spacing:0;color:var(--accent)}
.sh__bar{width:28px;height:2px;background:var(--accent)}
.sh__title{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.46;letter-spacing:.02em;color:var(--ink)}
.sh__lead{max-width:780px;font-size:var(--t-body);line-height:1.85;color:var(--text)}
.sec--dark .sh__num{color:var(--accent-d)}.sec--dark .sh__bar{background:var(--accent-d)}
.sec--dark .sh__label,.sec--dark .sh__title{color:var(--paper)}.sec--dark .sh__lead{color:var(--dark-text)}
/* 見出しと中身の 2 段組み（トップ 5:7・下層 4:8）。スマホは縦に積む */
.split{display:grid;gap:var(--hgap)}
@media(min-width:1200px){
  .split{grid-template-columns:5fr 7fr;gap:var(--gap)}
  .split--48{grid-template-columns:4fr 8fr}
  .split>.sh{position:sticky;top:calc(var(--head) + 32px);align-self:start}
  .split--48>.sh .sh__title{font-size:min(var(--t-h2),calc(min(100vw - 2 * var(--gut),var(--wrap)) / 3 / 9.6))}
}

/* ===== 格子（等分か 12 列の比率だけ。同じ段は自然に高さがそろう） ===== */
.g2,.g3,.g4,.g57,.g75{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){
  .g57{grid-template-columns:5fr 7fr}.g75{grid-template-columns:7fr 5fr}
}
@media(min-width:1200px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px){.g3.carousel{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 768〜1199: カードの横スクロール（工程）は 3 列だと文の列が狭すぎるので、横長カードを縦に 3 枚。写真だけの横スクロールは 3 等分のまま */
@media(min-width:768px) and (max-width:1199px){
  .g3.carousel:has(>.card--media){grid-template-columns:minmax(0,1fr)}
  .g3.carousel>.card--media{display:grid;grid-template-columns:5fr 7fr}
  .g3.carousel>.card--media>.card__media{position:relative;min-height:240px;aspect-ratio:auto}
  .g3.carousel>.card--media>.card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .g3.carousel>.card--media>.card__body{justify-content:center}
}
/* 600〜1023: 3 つ並べる写真つきカードは 1 列のまま横長にする（写真 5：文 7）。写真が画面いっぱいに間延びしない */
@media(min-width:600px) and (max-width:1199px){
  .g3:not(.carousel)>.card--media{display:grid;grid-template-columns:5fr 7fr}
  .g3:not(.carousel)>.card--media>.card__media{position:relative;min-height:220px;aspect-ratio:auto}
  .g3:not(.carousel)>.card--media>.card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}
.g4--sp2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ===== カード ===== */
.card{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px var(--pad) var(--pad)}
.card--alt{background:var(--alt)}
.sec--alt .card--alt{background:var(--white)}
.card--dark{background:var(--dark-card);border-color:var(--dark-card);color:var(--paper)}
.card--media{padding:0;overflow:hidden;gap:0}
.card__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:28px var(--pad) var(--pad)}
.card__media{background:var(--alt);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__media--illu{background:var(--illu)}
.card__media--illu img{object-fit:contain}
.card__title{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.54;color:var(--ink)}
.card__sub{font-family:var(--serif);font-weight:500;font-size:var(--t-h4);line-height:1.52;color:var(--ink)}
.card__text{font-size:var(--t-small);line-height:1.75;color:var(--text)}
.card__text--lg{font-size:var(--t-body);line-height:1.85}
.card__label{font-size:15px;line-height:24px;font-weight:700;color:var(--ink)}
.card--dark .card__title,.card--dark .card__sub,.card--dark .card__label{color:var(--paper)}
.card--dark .card__text{color:var(--dark-text)}
.card__row{display:flex;flex-direction:column;align-items:flex-start;gap:8px} /* 見出しの下に札。文の長さで札が横に来たり下に落ちたりしない */
.card__push{margin-top:auto} /* 下のリンクを下の端にそろえる */
.card>.more,.card__body>.more{margin-top:auto;padding-top:4px}

/* 丸い札（場所・種類） */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:5px 14px;border:1px solid var(--line);border-radius:100px;background:var(--alt);font-size:14px;line-height:1.3;color:var(--ink);white-space:nowrap}
.chip--white{background:var(--white);border-color:var(--white)}
.chips{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chips .chip{padding:10px 14px;font-size:16px;min-width:0;white-space:normal;text-wrap:balance;text-align:center}
.chips .chip .ic{color:var(--accent)}
/* 写真の上の札 */
.tag{position:absolute;left:12px;top:12px;z-index:1;background:var(--white);color:var(--ink);font-size:14px;font-weight:700;line-height:1.5;padding:3px 10px;border-radius:4px;letter-spacing:.04em}
.tag--fin{background:var(--accent);color:var(--white)}
.tag--dark{position:static;display:inline-block;align-self:flex-start;background:var(--dark);color:var(--white)}

/* 写真 */
.shot{position:relative;margin:0;min-width:0}
.shot>img{width:100%;height:auto;aspect-ratio:var(--ar,3/2);object-fit:cover;border-radius:8px;background:var(--alt)}
.shot--tall{--ar:3/4}.shot--sq{--ar:1/1}.shot--43{--ar:4/3}
.shot--illu>img{object-fit:contain;background:var(--illu)}
.imgnote{display:block;margin-top:6px;font-size:14px;line-height:22px;color:var(--muted)}
.card__media .imgnote{position:absolute;right:10px;bottom:8px;margin:0;padding:1px 8px;border-radius:4px;background:rgba(255,255,255,.88)}
.card__media{position:relative}
.cap{margin-top:10px;font-size:14px;line-height:22px;color:var(--muted)}

/* ===== ボタンとリンク ===== */
.act{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border:1.5px solid var(--dark);border-radius:6px;background:var(--dark);color:var(--paper);font-family:var(--sans);font-weight:700;font-size:17px;line-height:1.4;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.act:hover{background:#353a31;text-decoration:none}
.act--light{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.act--light:hover{background:var(--white)}
.act--sub,.act--line{background:var(--white);border:1px solid var(--btn-line);color:var(--ink);font-weight:700}
.act--sub:hover,.act--line:hover{background:var(--alt)}
.act--sm{min-height:44px;padding:10px 20px;font-size:16px}
.act--wide{width:100%}
.acts{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding-top:16px}
.acts--col{flex-direction:column;align-items:center;gap:16px}
.more{display:flex;justify-content:flex-end;text-align:right}
.more a{font-size:16px;line-height:24px;font-weight:700;color:var(--accent);text-decoration:underline}
.more--light a,.sec--dark .more a{color:var(--paper)}
.text-link{font-weight:700;color:var(--accent);text-decoration:underline}

/* 番号の丸（流れ・見積書の行・注記） */
.num-c{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1.5px solid var(--accent);border-radius:50%;background:var(--white);font-family:var(--roman);font-size:21px;line-height:1;color:var(--accent)}
.num-c--sm{width:34px;height:34px;font-size:17px}
.ic-c{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--white)}
.ic-c--soft{background:var(--white);color:var(--accent);border:1px solid var(--line)}
.ic-c+.card__sub,.ic-c+.card__title,.ic-c+h3,.ic-c+h4{padding-top:max(0px,calc((44px - 1lh) / 2))}

/* ===== 罫線の表（ラベルと値） ===== */
.rows{display:grid}
.rows>div{display:grid;grid-template-columns:minmax(96px,120px) minmax(0,1fr);gap:8px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.rows>div:last-child{border-bottom:0}
.rows dt,.rows .rows__k{font-size:16px;line-height:1.9;font-weight:700;color:var(--ink)}
.rows dd,.rows .rows__v{margin:0;font-size:var(--t-body);line-height:1.85;color:var(--text)}
@media(max-width:479px){.rows>div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* 箇条の表（チェックの印つき） */
.checks{display:grid;gap:0}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-body);line-height:1.85;color:var(--text)}
.checks li .ic{margin-top:6px;color:var(--accent)}
.checks--2{grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.checks--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}}

/* ===== よくある質問（開閉） ===== */
.faq{display:grid;gap:var(--gap)}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{display:flex;align-items:center;gap:18px;padding:22px 28px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";margin-left:auto;flex:none;font-size:22px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"－"}
.faq__q{font-family:var(--serif);font-weight:500;font-size:var(--t-h4);line-height:1.52;color:var(--ink)}
.faq__mark{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--roman);font-size:17px;line-height:1}
.faq__mark--a{background:var(--white);border:1.5px solid var(--accent);color:var(--accent)}
.faq__a{display:flex;gap:18px;align-items:flex-start;padding:20px 28px 24px;background:var(--alt);border-top:1px solid var(--line)}
.faq__a p{font-size:var(--t-body);line-height:1.85;color:var(--text)}
@media(max-width:767px){.faq summary{padding:18px 18px;gap:14px}.faq__a{padding:16px 18px 20px;gap:14px}}

/* ===== 横スクロール（スマホで写真3枚の流れ。1枚 270px・次をのぞかせる・位置の点） ===== */
@media(max-width:767px){
  .carousel{display:grid;grid-auto-flow:column;grid-auto-columns:min(270px,78%);grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
  .carousel::-webkit-scrollbar{display:none}
  .carousel>*{scroll-snap-align:start}
}
.dots{display:flex;justify-content:center;gap:8px;margin-top:-4px}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s}
.dots span.is-on{background:var(--accent)}
@media(min-width:768px){.dots{display:none}}

/* ===== 記事の目次・本文（下層とコラム） ===== */
.toc{background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:24px var(--pad)}
.toc p{font-size:15px;font-weight:700;margin-bottom:10px}
.toc ol{display:grid;gap:8px;counter-reset:toc}
.toc li{counter-increment:toc;display:flex;gap:12px;font-size:16px;line-height:1.75}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--roman);color:var(--accent);flex:none}
.toc a{color:var(--ink)}
.prose{display:grid;gap:1.8em;font-size:var(--t-body);line-height:1.9;color:var(--text)}
.prose h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.54;color:var(--ink);margin-top:1.2em;padding-top:1.2em;border-top:1px solid var(--line)}
.prose h3{font-family:var(--serif);font-weight:500;font-size:var(--t-h4);line-height:1.52;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.4em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose strong{color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.75}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--alt);font-weight:700;color:var(--ink)}
.tbl{overflow-x:auto}
.byline{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}

/* ===== 下層ページの最初（薄い灰の地。パンくずも同じ地に載せる） ===== */
.page-trail{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;line-height:22px;color:var(--muted);padding-top:clamp(20px,calc(20px + 36 * var(--fl)),56px)}
.page-trail a{color:var(--muted);display:inline-block;padding-block:10px;margin-block:-10px} /* 押せる範囲だけ広げる（見た目の位置は同じ） */
.page-trail{position:relative}
.page-trail::before{content:"";position:absolute;inset:0 calc((100vw - 100%) / -2);z-index:-1;background:var(--alt)}
body:not(.home){overflow-x:clip}
.page-head{padding-block:28px clamp(48px,calc(48px + 24 * var(--fl)),72px);background:var(--alt)}
.page-head .wrap{display:grid;gap:28px}
.page-head__title{font-family:var(--serif);font-weight:500;font-size:clamp(32px,calc(32px + 20 * var(--fl)),52px);line-height:1.46;letter-spacing:.02em;color:var(--ink)}
.page-head__lead{max-width:780px;font-size:var(--t-body);line-height:1.85;color:var(--text)}
.page-head__media{min-width:0}

/* ===== 相談への帯（ページの最後。フッターと同じ黒・境目は白 12% の線） ===== */
.cta{background:var(--dark);color:var(--paper);padding-block:clamp(64px,calc(64px + 40 * var(--fl)),104px)}
.cta .wrap{display:grid;gap:28px;justify-items:center;text-align:center} /* Figma の相談への帯は中央ぞろえ */
.cta__title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,calc(26px + 14 * var(--fl)),40px);line-height:1.45;color:var(--paper)}
.cta__text{font-size:var(--t-body);line-height:1.85;color:var(--dark-text)}
.cta__acts{display:flex;flex-direction:column;align-items:center;gap:20px}
.cta__btn{min-height:60px;padding:18px 28px}
.cta__tel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px}
.cta__tel-k{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.cta__tel p{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px}
.cta__num,.cta__tel .phone-number,.cta__tel button.phone-number{font-family:var(--roman);font-size:28px;line-height:1.15;color:var(--paper);text-decoration:none}
.cta__note,.cta__tel .phone-hours{font-size:14px;color:var(--dark-text)}
@media(max-width:767px){.cta__btn{width:100%}.cta__acts{width:100%}}
.cta+.site-foot{border-top:1px solid rgba(255,255,255,.12)}

/* ===== 受付の状況 ===== */
.state{display:flex;align-items:center;gap:10px}
.state::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--ok)}
.status-line{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:22px}
.status-line::before{content:"";width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ok);flex:none}
.status-line__k{flex:none;white-space:nowrap}

/* ===== ヘッダー（墨の地・明朝の屋号） ===== */
.site-head{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper);border-bottom:1px solid #505345}
.site-head__in{display:flex;align-items:center;gap:28px;min-height:var(--head)}
.logo{display:flex;align-items:center;gap:clamp(10px,calc(10px + 4 * var(--fl)),14px);text-decoration:none;margin-right:auto;flex:none;white-space:nowrap}
/* 名刺のロゴ（白い I・金の Y・白い R・斜線の組み文字）。名刺の写真から形を変えずに 2 色で清書したもの。金はロゴだけに使う */
.logo__mark{display:block;width:auto;height:40px}
@media(min-width:1024px){.logo__mark{height:48px}}
.logo__text{display:flex;flex-direction:column;justify-content:center}
.logo__name{font-family:var(--serif);font-weight:500;font-size:clamp(19px,calc(19px + 3 * var(--fl)),22px);letter-spacing:.04em;line-height:1.3}
.logo__area{font-size:14px;letter-spacing:.1em;line-height:1.4;color:var(--dark-text)}
.gnav{display:none;gap:26px;font-size:16px}
.gnav a{text-decoration:none;padding:10px 0;border-bottom:1px solid transparent;white-space:nowrap}
.gnav a:hover,.gnav a[aria-current]{border-bottom-color:currentColor}
.site-head__tel{display:none;flex:none;white-space:nowrap;line-height:1.3;text-align:right}
.head__cta{flex:none;white-space:nowrap}
.site-head__tel .phone-number{font-family:var(--sans);font-size:18px;font-weight:500;letter-spacing:.04em;list-style:none;cursor:help}
.site-head__tel .phone-number::-webkit-details-marker{display:none}
.site-head__tel small{display:block;font-size:14px;font-weight:400;color:var(--dark-text)}
.phone-placeholder{position:relative}
.phone-placeholder>summary{list-style:none;cursor:help}
.phone-placeholder>summary::-webkit-details-marker{display:none}
.phone-placeholder>p{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:max-content;max-width:240px;padding:8px 12px;border-radius:6px;background:var(--white);color:var(--ink);font-size:14px;line-height:1.6;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.site-head .act{min-height:44px;padding:11px 20px;font-size:16px;font-weight:500;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.site-head .act:hover{background:var(--white)}
/* app.js が仮番号を <button class="phone-number"> に置き換える（押すと「発信しません」の案内）。ボタンの初期の見た目を消す */
.phone-contact button.phone-number{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:help;text-align:inherit}
dialog{border:0;border-radius:var(--r);padding:28px;max-width:min(420px,calc(100vw - 32px));color:var(--ink)}
dialog::backdrop{background:rgba(16,19,14,.55)}
dialog .phone-number{font-family:var(--roman);font-size:32px;margin:8px 0}
dialog p{margin-bottom:16px;font-size:16px;line-height:1.8}
.phone-contact .phone-hours{font-size:14px;font-weight:400;color:var(--muted);line-height:1.5}
.site-head .phone-hours{color:var(--dark-text)}
.menu{position:relative}
.menu>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #6a6d5e;border-radius:6px;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu__bars,.menu__bars::before,.menu__bars::after{display:block;width:18px;height:1.5px;background:var(--paper);position:relative;content:""}
.menu__bars::before{position:absolute;top:-6px}.menu__bars::after{position:absolute;top:6px}
.menu[open] .menu__bars{background:transparent}
.menu[open] .menu__bars::before{top:0;transform:rotate(45deg)}.menu[open] .menu__bars::after{top:0;transform:rotate(-45deg)}
.menu__panel{position:fixed;left:0;right:0;top:var(--head);bottom:0;overflow:auto;background:var(--ink);color:var(--paper);border-top:1px solid #505345;padding:16px var(--gut) 40px}
.menu__panel nav{display:grid;border-top:1px solid #505345}
.menu__panel nav a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid #505345;text-decoration:none;font-family:var(--serif);font-weight:500;font-size:19px}
.menu__panel nav a::after{content:"";width:8px;height:8px;border-top:1.5px solid #b2b4a5;border-right:1.5px solid #b2b4a5;transform:rotate(45deg)}
.menu__panel{display:flex;flex-direction:column}
.menu__panel .menu__sub{order:-1;margin:0 0 24px;display:grid;gap:14px} /* 開いたらまず電話（大きく）→ 相談する（10-04 吉田さま）。電話は HTML で先にある */
.menu__panel .phone-number{font-family:var(--roman);font-size:36px;line-height:1.15;font-weight:500;letter-spacing:.02em;color:var(--paper);text-decoration:none;list-style:none}
.menu__panel .phone-hours{margin-top:4px;font-size:15px}
.menu__panel .phone-number small{display:block;font-size:14px;font-weight:400;color:var(--dark-text)}
.menu__panel .phone-placeholder>p{position:static;margin-top:6px;background:transparent;color:var(--dark-text);box-shadow:none;padding:0}
.menu__panel .act{width:100%;background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(min-width:1200px){.gnav{display:flex}.menu{display:none}}
@media(min-width:1400px){.site-head__tel{display:block}.site-head__in{gap:24px}} /* 2026-10-05: 電話が出ると 28px 間隔で 1,210px になり 10px はみ出していた */
@media(min-width:1200px) and (max-width:1439px){.gnav{gap:20px}}
@media(max-width:1199px){.site-head__in{gap:12px}}
@media(max-width:479px){.site-head .head__cta{display:none}} /* ロゴの組み文字・屋号・メニューで幅いっぱい。相談は下の固定ボタンが受ける（app.js も狭い幅ではヘッダーの相談ボタンを隠す） */

/* ===== フッター（相談の帯と同じ黒・境目は白 12% の 1px） ===== */
.site-foot{background:var(--dark);color:var(--dark-text);border-top:1px solid rgba(255,255,255,.12);padding-block:clamp(56px,calc(56px + 24 * var(--fl)),80px) 28px;overflow:hidden}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,calc(32px + 24 * var(--fl)),56px)}
.site-foot__grid{display:grid;gap:36px}
@media(min-width:768px) and (max-width:899px){.site-foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}.site-foot__brand{grid-column:1/-1}}
@media(min-width:900px){.site-foot__grid{grid-template-columns:minmax(0,1.83fr) minmax(0,1fr) minmax(0,1fr);gap:64px}}
.site-foot__brand{display:grid;gap:14px;align-content:start}
.site-foot__name{justify-self:start;padding-block:2px;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.4;color:var(--paper);text-decoration:none}
.site-foot__brand p{font-size:15px;line-height:28px}
.site-foot__brand p.small{font-size:14px;line-height:26px;color:var(--dark-text)}
.site-foot nav h2{font-size:14px;font-weight:500;color:var(--dark-text);margin-bottom:14px;letter-spacing:.06em}
.site-foot nav ul{display:grid;gap:0}
.site-foot nav a{display:inline-block;padding-block:9px;font-size:15px;line-height:1.5;color:var(--paper);text-decoration:none}
.site-foot nav a:hover{text-decoration:underline}
.site-foot__mark{font-family:var(--roman);font-weight:400;font-size:min(clamp(84px,calc(84px + 84 * var(--fl)),168px),calc((100vw - 2 * var(--gut)) / 4.7));line-height:.78;letter-spacing:-.005em;color:var(--dark-card);margin:0;white-space:nowrap;user-select:none}
/* 2026-10-05 吉田さま「AI に聞く」（見本は CyXen・メディカ採用サイト）: ChatGPT と Claude の公式ロゴを重ねた丸＋太字の文。押すと小窓（dialog）。
   置き場: 相談の帯の真上（読み終えて相談するか決める直前）・トップのよくある質問の後・PC は現在地の行の右端（ヘッダーは幅が埋まっている）・SP のメニューの中。フッターと浮かぶ札には置かない */
.ask-ai-logos{display:inline-flex;flex:none}
.ask-ai-logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;flex:none}
.ask-ai-logos .ask-ai-logo+.ask-ai-logo{margin-left:-8px}
.ask-ai-logo img{width:62%;height:62%}
.ask-ai-logo--chatgpt{background:#000}
.ask-ai-logo--claude{background:var(--white);border:1px solid var(--line)}
.ask-line{padding-block:clamp(28px,calc(28px + 12 * var(--fl)),40px)}
.ask-line__btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:6px 4px;border:0;background:none;font-family:var(--sans);font-size:var(--t-body);font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.ask-line__btn:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.ask-line__btn:focus-visible,.trail__ai:focus-visible,.menu__ai:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.trail__ai{display:none;align-items:center;gap:10px;margin:-8px 0 -8px auto;min-height:40px;padding:2px 0;border:0;background:none;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}
.trail__ai .ask-ai-logo{width:28px;height:28px}
.trail__ai:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
@media(min-width:900px){.trail__ai{display:inline-flex}}
.menu__ai{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin-top:12px;padding:6px 0;border:0;background:none;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--paper);text-align:left;cursor:pointer}
.menu__ai .ask-ai-logo--claude{border-color:var(--dark-line)}
.ask-ai-dialog{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--r);background:var(--white);color:var(--ink);box-shadow:0 24px 64px rgba(32,36,30,.24)}
.ask-ai-dialog p{margin-bottom:0} /* 共通の dialog p（電話の小窓用）の下の余白を打ち消す */
.ask-ai-dialog::backdrop{background:rgba(32,36,30,.48)}
.ask-ai-dialog__in{display:grid;gap:0;padding:clamp(20px,calc(20px + 8 * var(--fl)),28px)}
.ask-ai-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ask-ai-dialog__title{font-family:var(--sans);font-size:clamp(19px,calc(19px + 3 * var(--fl)),22px);font-weight:700;line-height:1.45}
.ask-ai-dialog__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:-8px -10px 0 0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}
.ask-ai-dialog__close:hover{background:var(--alt)}
.ask-ai-dialog__lead{margin-top:6px;font-size:15px;line-height:1.75;color:var(--text)}
.ask-ai-dialog__set{margin:20px 0 0;padding:0;border:0;min-width:0}
.ask-ai-dialog__k{display:block;font-size:15px;font-weight:700;color:var(--ink)}
label.ask-ai-dialog__k{margin-top:20px}
.ask-ai-dialog__qs{display:grid;gap:8px;margin-top:8px}
.ask-ai-q{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:15px;line-height:1.65;color:var(--ink);cursor:pointer}
.ask-ai-q input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink)}
.ask-ai-q:has(input:checked){border-color:var(--ink);background:var(--alt)}
.ask-ai-q:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ask-ai-dialog__mine{width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--field);border-radius:6px;background:var(--white);font:inherit;font-size:16px;line-height:1.7;color:var(--ink);resize:vertical}
.ask-ai-dialog__mine:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ask-ai-dialog__note{margin-top:6px;font-size:13px;line-height:1.7;color:var(--muted)}
.ask-ai-dialog__go{display:grid;gap:8px;margin-top:20px}
@media(min-width:480px){.ask-ai-dialog__go{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ask-ai-dialog__to{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.ask-ai-dialog__to:hover{background:var(--alt)}
.ask-ai-dialog__to:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ask-ai-dialog__to .ask-ai-logo{width:32px;height:32px}
.ask-ai-dialog__go+.ask-ai-dialog__note{margin-top:14px}
.site-foot__copy{padding-top:18px;border-top:1px solid #505345;font-size:14px;line-height:1.7;color:var(--dark-text)}
.site-foot .status-line{color:var(--dark-text)}

/* スマホ下の固定の相談ボタン */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(32,36,30,.97);border-top:1px solid rgba(255,255,255,.12)}
.dock .act{flex:1;min-width:0;min-height:48px;padding:10px 12px;font-size:16px;white-space:nowrap;background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dock .act--line{background:transparent;color:var(--paper);border:1px solid #8a8d7c}
.dock--off{display:none}
@media(max-width:767px){.head__cta--quiet{display:none}body::after{content:"";display:block;height:calc(69px + env(safe-area-inset-bottom));background:var(--dark)}} /* 下の固定帯のためのすき間はフッターと同じ暗い色（白い帯に見えないように） */
@media(max-width:359px){.dock .act{padding:10px 6px;font-size:15px;letter-spacing:0;gap:6px}}
@media(min-width:768px){.dock{display:none}}

/* ===== フォーム（見た目だけ。項目と data-* は partials/consultation-form.html が正本） ===== */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px var(--pad) var(--pad)}
.form-card__title{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.54;margin-bottom:8px}
.form{display:grid;gap:16px}
.form__intro{font-size:16px;line-height:28px;color:var(--muted)}
.fields{display:grid;gap:18px}
@media(min-width:700px){.form-optional .fields{grid-template-columns:1fr 1fr}.f-full{grid-column:1/-1}}
.f{display:grid;gap:8px;font-size:var(--t-body);font-weight:700;line-height:1.6;color:var(--ink)}
.f input,.f select,.f textarea{width:100%;min-height:54px;border:1px solid var(--field);border-radius:6px;background:var(--white);padding:14px 16px;font:inherit;font-weight:400;font-size:17px;color:var(--ink)}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.f textarea{min-height:120px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--muted)}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field-required{display:inline-block;font-style:normal;font-size:14px;line-height:1.3;font-weight:700;background:var(--dark);color:var(--white);padding:1px 7px;margin-left:8px;border-radius:4px;vertical-align:2px}
.form-optional{border:1px solid var(--field);border-radius:6px;padding:14px 16px}
.form-optional>summary{cursor:pointer;font-weight:700;font-size:var(--t-body);line-height:1.85;list-style:none}
.form-optional>summary::-webkit-details-marker{display:none}
.form-optional>summary::before{content:"＋ "}
.form-optional[open]>summary::before{content:"－ "}
.form-optional>summary span{font-size:14px;color:var(--muted);font-weight:400;margin-left:6px}
.form-optional[open]>.fields{margin-top:16px}
.form__foot{display:grid;gap:12px}
.form__privacy{font-size:16px;line-height:28px;color:var(--text)}
.form__privacy a{color:var(--accent);font-weight:700}
.intake-test-note{font-size:14px;line-height:1.7;background:var(--shu-soft);color:#7a2413;padding:10px 12px;border-radius:6px}
.intake-field-error{color:var(--shu);font-size:14px;font-weight:700}
.intake-check{font-size:14px;color:var(--muted)}
.intake-result{padding:14px;background:var(--alt);border-radius:6px;font-size:16px}
/* 送信後の完了画面（app.js の showReceipt が組む h3・受付番号・dl・次の流れ。処理は変えず見た目だけ）。
   送信後は入力欄を隠し、完了のカードと「新しく相談する」だけを残す */
.form.is-sent>.form__intro,.form.is-sent>.intake-test-note,.form.is-sent>.fields,.form.is-sent>.form-optional,
.form.is-sent>.intake-help,.form.is-sent .form__privacy,.form.is-sent .intake-check,.form.is-sent .form__send{display:none}
.form.is-sent .form__foot{justify-items:center}
.form-card:has(.form.is-sent) .form-card__title{display:none}
.intake-result.is-success{display:grid;gap:20px;justify-items:center;background:none;border:0;border-radius:0;padding:16px 0 8px;text-align:center} /* 外の .form-card の中に直に並べる（箱の中の箱にしない） */
.intake-result.is-success::before{content:"✓";display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--white);font-size:26px;line-height:1;font-weight:700}
.intake-result.is-success>h3{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(22px,5.6vw,28px);line-height:1.5;color:var(--ink)}
.intake-reference{margin:0;padding:10px 20px;background:var(--alt);border-radius:6px;font-size:17px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.intake-summary{width:100%;max-width:560px;margin:0;border-top:1px solid var(--line);text-align:left}
.intake-summary>div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.intake-summary dt{font-size:14px;line-height:1.7;color:var(--muted)}
.intake-summary dd{margin:0;font-size:16px;line-height:1.7;color:var(--ink)}
.intake-result.is-success>p:not(.intake-reference){max-width:560px;margin:0;text-align:left;color:var(--text);text-wrap:pretty}
.intake-result.is-success>.ui-disclosure{width:100%;max-width:560px;text-align:left;font-size:15px}
.intake-result.is-success>.ui-disclosure>summary{cursor:pointer;color:var(--accent);font-weight:700}
@media(max-width:479px){.intake-summary>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.intake-help{font-size:14px;color:var(--muted)}
.urgent-contact,.material-preference{background:var(--alt);padding:12px 14px;border-radius:6px;font-size:14px}
.file-feedback{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}
.file-clear{font:inherit;font-size:14px;background:none;border:0;text-decoration:underline;cursor:pointer;padding:0;color:var(--text)}
.form .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:18px 24px;border:1.5px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font:inherit;font-weight:700;font-size:18px;letter-spacing:.04em;cursor:pointer}
.form .btn--secondary{background:var(--white);color:var(--ink);min-height:44px;font-size:16px}
.form .btn--sm{min-height:40px;font-size:14px}
.form .btn[disabled]{opacity:.45;cursor:not-allowed}
.form .text-link{background:none;border:0;padding:0;font:inherit;font-size:14px;cursor:pointer}
.form [hidden]{display:none!important}
.form__reply-to{font-size:14px}
.form__reply-to span{color:var(--muted);margin-right:8px}

/* ===== CMS が描くページ（管理画面の一覧・記事）に残る基本の部品 ===== */
.sec__head{display:grid;gap:14px;margin-bottom:var(--hgap);max-width:780px}
.sec__head h2,.sec__title{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.46}
.sec__lead{color:var(--text)}
.sec__more{margin-top:24px;text-align:right}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border-radius:6px;background:var(--dark);color:var(--paper);font-weight:700;text-decoration:none}
.link{color:var(--accent);font-weight:700}
.grid-2,.grid-3{display:grid;gap:var(--gap)}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}}
.status{display:flex;gap:12px;align-items:baseline;margin-bottom:24px;padding:14px 18px;background:var(--alt);border-radius:var(--r)}
.status span{font-size:14px;color:var(--muted)}
.trust-contact-timing{font-size:16px;line-height:1.8;color:var(--text)}
.person-slot:empty,.about-person:empty{display:none}
/* スマホ: 節の終わりのボタンは、すべて横幅いっぱいに積む（幅の違うボタンが不ぞろいに並ばないように。2026-10-04） */
@media(max-width:767px){.acts{flex-direction:column;align-items:stretch}.acts .act{width:100%}}
/* よくある質問の答えは文として読ませる: 文節で送らず、行の長さをそろえる（数字の途中で割れないよう、金額・日数は .nb で包む。2026-10-04） */
.faq__a p{word-break:normal;text-wrap:pretty}

/* 見出しの括弧書きは小さな補足の行（lib.sec_head が分ける）。左の列（4:8）の見出しは 1 行に 11 字ほど入る大きさ・字間 0 */
.sh__paren{display:block;margin-top:6px;font-family:var(--sans);font-size:max(15px,.42em);font-weight:500;line-height:1.6;letter-spacing:0;color:var(--muted)}
@media(min-width:1024px){.split--48>.sh .sh__title{font-size:min(var(--t-h2),calc(min(100vw - 2 * var(--gut),var(--wrap)) / 3 / 11.5));letter-spacing:0}}

/* 節の本文の下の文字リンクは、本文の左端にそろえる（カードの中のリンクは右下のまま） */
.sec__body>.more{justify-content:flex-start;text-align:left}
.flow__in .card__text{text-wrap:pretty} /* 流れのカードの説明は幅いっぱいまで使って折る */

/* ===== about.css ===== */
/* 職人について（Figma 443:260 PC ／ 443:552 スマホ） */
/* 最初の段: 顔写真（縦5：横4）と、名前・本人の一言・掲載先。PC は 5：7、スマホは縦に並べる */
.page-head__media{display:grid;gap:var(--gap)}
.ab-person{align-items:start;margin-bottom:8px}
.ab-person__photo{aspect-ratio:4/5;display:grid;place-content:center;gap:6px;text-align:center;background:#e9e6de;border:1px dashed #b9b4a7;border-radius:var(--r);font-size:15px;font-weight:700;color:var(--text);padding:16px}
.ab-person__body{display:grid;gap:28px;align-content:start}
.ab-person__name{display:grid;gap:10px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ab-person__role{font-size:15px;font-weight:700;color:var(--muted)}
.ab-person__nm{font-family:var(--serif);font-weight:500;font-size:clamp(26px,calc(26px + 10 * var(--fl)),36px);line-height:1.4;color:var(--ink)}
.ab-person__quote{display:grid;gap:12px;margin:0}
.ab-person__quote blockquote{margin:0}
.ab-person__quote blockquote p{font-family:var(--serif);font-weight:500;font-size:clamp(19px,calc(19px + 5 * var(--fl)),24px);line-height:1.8;color:var(--ink)}
.ab-listings{display:grid;gap:12px}
.ab-listings__t{font-size:16px;font-weight:700;line-height:1.6;color:var(--ink)}
.ab-listings ul{display:grid;gap:10px}
.ab-listings li{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.ab-listings li .ic{flex:none;margin-top:2px;color:var(--ink)}
.ab-listings__nm{font-size:16px;font-weight:700;line-height:1.6;color:var(--ink)}
/* 最初の写真（剥がし・下地・仕上げ）。PC は 3 等分で高さ 460、スマホは横スクロール */
.ab-first__ph>img{aspect-ratio:3/4;object-position:center 40%}
@media(min-width:1024px){.ab-first__ph>img{aspect-ratio:auto;height:460px}}
.page-head .dots{margin-top:16px}
.ab-col{display:grid;gap:var(--gap);align-content:start;min-width:0}
/* 経験と施工の表（薄い灰の地・罫線の枠） */
.ab-tbl{background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:0 24px 0 28px}
.ab-tbl>div{padding:20px 0}
@media(max-width:479px){.ab-tbl{padding:0 20px}.ab-tbl>div{padding:16px 0}}
/* ご依頼にあたって（白い地の枠・チェックの印） */
.ab-checks{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0 24px 0 28px}
.ab-checks li{padding:20px 0;gap:12px;color:var(--ink)}
.ab-checks li:last-child{border-bottom:0}
.ab-checks li .ic{margin-top:7px}
@media(max-width:479px){.ab-checks{padding:0 20px}.ab-checks li{padding:16px 0}}
.ab-ph>img{aspect-ratio:3/4;object-position:center 40%}
@media(min-width:1024px){.ab-ph>img{aspect-ratio:auto;height:512px}}
/* スマホは Figma のとおり下地の 1 枚だけ */
@media(max-width:767px){.ab-ph--pc{display:none}}

/* ===== contact.css ===== */
/* 見積・ご相談（Figma 443:864 PC ／ 443:1160 スマホ）。形はトップの節 10 の consult・tel・rows・form-card・referral を使う */
.contact__small{max-width:780px;font-size:var(--t-small);line-height:1.75;color:var(--muted)}
/* 電話の枠は .card を使わない: 公開ビルドの写し（cms/lib/components.js）が .card の中の <p> に class を足し、
   build-release.mjs の電話の器の置き換え（素の <p> を探す）が外れて仮番号が公開物に残るため。見た目は .card と同じ */
.contact__box{display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px var(--pad) var(--pad)}
.contact .status{margin-bottom:0} /* 公開ビルドが入れる受付時間の帯（base の .status）。節の中の間は grid の gap に任せる */
/* PC: 左の列の 3 枚は上に詰め、右のフォームと下端をそろえない（Figma のまま） */
/* スマホ・タブレット: Figma のスマホは「受付状況 → 電話 → フォーム → 紹介 → 当事者の断り → ご相談のあとに伺うこと → 受付の注記 → 流れへのリンク」の順。
   同じ HTML のまま、左の列とフォームの枠を外して並べ替える */
@media(max-width:1023px){
  .contact .consult,.contact .consult__side{display:contents}
  .contact>*{order:10}
  .contact>.status{order:0}
  .contact__state{order:1}
  .contact__tel{order:2}
  .contact__form{order:3}
  .contact__referral{order:4}
  .contact__disclaimer{order:5}
  .contact__after{order:6;margin-top:calc(var(--hgap) - var(--gap))}
  .contact__trust{order:7}
  .contact__more{order:8}
}

/* ===== floor.css ===== */
/* 床の張替え（Figma 435:184 PC ／ 435:512 スマホ）
   sv- で始まるものは、工事の下層 3 ページ（クロス・床・トイレ洗面所）で共通に使う。名前の順で floor.css が先につながるのでここに置く */

/* アイコンの丸＋見出しのカード（場所・床材） */
.sv-kind__head{display:flex;align-items:flex-start;gap:14px}
.sv-kind .card__text{flex:1}
.g3>.sv-kind:not(.sv-kind--sm),.g4>.sv-kind:not(.sv-kind--sm),.g2>.sv-kind:not(.sv-kind--sm){display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:12px;align-content:start}
.g3>.rs-job{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:12px;align-content:start}
.sv-kind .note{margin-top:4px}
.sv-kind--sm{padding-block:var(--pad)}

/* 最初の線画（地の色の枠に全体を見せる。PC は 1200×460 の帯） */
.sv-illu>img{--ar:3/2;border-radius:var(--r)}
@media(min-width:1024px){.sv-illu>img{--ar:1200/460}.sv-illu--fill>img{object-fit:cover}}
/* 絵が真ん中に小さい線画（床）は、Figma の PC と同じく枠いっぱいに敷く（絵は切れない）。絵が上下いっぱいのもの（トイレ）は全体を見せる */

/* 中身の下の補足（灰色の小さな文） */
.sv-aside{font-size:var(--t-small);line-height:1.75;color:var(--muted)}

/* カードの中の確かめる箇条（罫線なし） */
.sv-checks li{border-bottom:0;padding:8px 0}

/* 事務所・お店の床（2026-10-04 お父さまの回答）。リンクは本文の左端にそろえる */
.fo-more{justify-content:flex-start;text-align:left}
.fo-min{font-size:15px}

/* ===== guides.css ===== */
/* コラム（一覧 Figma 444:806 ／ 444:1067、記事 444:1354・445:310・445:971 ／ 444:1685・445:630・445:1268） */

/* 最初の絵（線画のイラスト。PC 1200×460・スマホ 350×220 の枠に全体を見せる） */
.art-hero{--ar:350/220}
@media(min-width:1024px){.art-hero{--ar:1200/460}}
.guide-article .page-head__media{display:grid;gap:28px}
.art-byline{margin-top:-10px}

/* 一覧のカード（絵・小さな太字の分類・明朝の見出し・説明・右下の「読む」） */
.guide-card .card__body{padding-top:20px}
.guide-card__label{font-size:14px;line-height:22px;font-weight:700;color:var(--muted)}

/* 記事の節（見出しと中身の 4:8。節の間は詰め、最後の節だけ下を広く） */
.art-sec{padding-block:clamp(40px,calc(40px + 24 * var(--fl)),64px) clamp(24px,calc(24px + 16 * var(--fl)),40px)}
.art-sec--last{padding-bottom:clamp(56px,calc(56px + 40 * var(--fl)),96px)}
.art-sec>.wrap{gap:clamp(28px,calc(28px + 12 * var(--fl)),40px)}
@media(max-width:1199px){.art-sec .split{gap:28px}}
.art-body{display:grid;gap:clamp(16px,calc(16px + 8 * var(--fl)),24px);align-content:start;min-width:0}
.art-text{font-size:var(--t-body);line-height:1.85;color:var(--text)}
.art-note{font-size:var(--t-small);line-height:1.75;color:var(--muted)}

/* 目次（スマホは詰めた行・PC は罫線で区切った行） */
.art-toc{padding:22px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r)}
.art-toc ol{display:grid;gap:10px}
.art-toc li{counter-increment:none;display:flex;align-items:baseline;gap:14px;font-size:16px;line-height:28px}
.art-toc li::before{content:none}
.art-toc__no{flex:none;min-width:9px;font-family:var(--roman);font-size:18px;color:var(--accent)}
.art-toc a{font-weight:700;color:var(--accent);text-decoration:underline}

/* 確かめることの箇条（チェックの印・同じ枠の中に行） */
.art-checks{display:grid;gap:10px;padding:22px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r)}
.art-checks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body);line-height:1.85;color:var(--ink)}
.art-checks .ic{margin-top:7px;color:var(--accent)}

@media(min-width:1024px){
  .art-toc,.art-checks{padding:0;gap:0}
  .art-toc ol{gap:0}
  .art-toc li,.art-checks li{padding:20px 24px 20px 28px;border-bottom:1px solid var(--line)}
  .art-toc li:last-child,.art-checks li:last-child{border-bottom:0}
  .art-toc__no{min-width:32px}
}

/* 番号つきのカード（費用を決める 4 つ・張替えの段取り） */
.art-card{padding:var(--pad)}
.art-card__head{display:flex;align-items:baseline;gap:14px}
.art-card__no{flex:none;font-family:var(--roman);font-size:22px;line-height:1;color:var(--accent)}
.art-cards--steps .art-card{justify-content:center}
.art-cards--steps .art-card__head{align-items:center}

/* 工程の写真（実写。PC 588×400・スマホ 350×240 に切り抜き、下に説明） */
.art-photo__img{--ar:588/400}
.art-photo__img--top>img{object-position:center 8%} /* 縦長の実写の上側（天井と照明）を見せる */

/* ===== 2026-10-04 コラム19本（columns/IA.md §5・Figma のコラムの段 y=22000） ===== */
/* お父さまの確認待ちの印（答えがそろうまで朱色の文字で見せる） */
.art-mark{color:var(--shu);font-weight:700}
.art-wait{font-size:14px;line-height:22px;font-weight:700;color:var(--shu)}

/* 本文の部品: 小見出し・箇条書き・注記・表・本文のリンク */
.art-h3{font-size:var(--t-h4);line-height:1.6;font-weight:700;color:var(--ink)}
.art-list{display:grid;gap:8px}
.art-list li{position:relative;padding-left:1.2em;font-size:var(--t-body);line-height:1.85;color:var(--text)}
.art-list li::before{content:"・";position:absolute;left:0;top:0;font-weight:700;color:var(--accent)}
.art-quote{padding:var(--pad);background:var(--alt);border-radius:var(--r)}
.art-quote p{font-size:var(--t-body);line-height:1.8;color:var(--ink)}
.art-table{overflow-x:auto}
.art-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:28px}
.art-table th,.art-table td{padding:12px 16px 12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.art-table th{color:var(--ink);font-weight:700}
.art-table td{color:var(--text)}
.art-text a,.art-list a,.art-quote a,.art-table a{color:var(--accent);font-weight:700;text-decoration:underline}
.art-photo .art-photo__img img{object-position:center 30%}

/* 同じカテゴリの記事（PC 2列・スマホ 1列。カード全体を押せる） */
.art-rel{padding:0}
.art-rel__link{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 24px;color:inherit;text-decoration:none}
.art-rel__title{font-size:17px;line-height:28px;font-weight:700;color:var(--ink)}
.art-rel__sub{font-size:14px;line-height:22px;color:var(--muted)}
.art-rel__more{margin-top:auto;font-size:15px;line-height:24px;font-weight:700;color:var(--accent);text-decoration:underline}

/* 関係する工事（小さな札のリンク） */
.art-works{display:flex;flex-wrap:wrap;gap:12px}
.art-works a{display:inline-flex;padding:10px 16px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-size:15px;line-height:24px;font-weight:700;color:var(--accent);text-decoration:none}

/* コラムのトップ: カテゴリの行（PC は 名前・説明・本数 の3列、スマホは縦に積む） */
.gt-cats li,.gt-list li{border-top:1px solid var(--line)}
.gt-cats li:last-child,.gt-list li:last-child{border-bottom:1px solid var(--line)}
.gt-cats__link{display:grid;gap:6px;padding:16px 0;color:inherit;text-decoration:none}
.gt-cats__name{font-family:var(--serif);font-size:19px;line-height:30px;color:var(--ink)}
.gt-cats__desc{font-size:16px;line-height:28px;color:var(--text)}
.gt-cats__count{font-size:15px;line-height:24px;font-weight:700;color:var(--accent)}
@media(min-width:1024px){
  .gt-cats__link{grid-template-columns:240px minmax(0,1fr) auto;align-items:center;gap:24px;padding:20px 0}
  .gt-cats__name{font-size:20px;line-height:32px}
}
/* カテゴリごとの記事の行（題と札・右に矢印） */
.gt-list__link{display:flex;align-items:center;gap:16px;padding:16px 0;color:inherit;text-decoration:none}
.gt-list__main{display:grid;gap:6px;flex:1;min-width:0}
.gt-list__title{font-size:16px;line-height:26px;color:var(--ink)}
.gt-list__title--pillar{font-weight:700}
.gt-list__tags{display:flex;flex-wrap:wrap;gap:12px}
.gt-tag{font-size:13px;line-height:20px;font-weight:700;color:var(--accent)}
.gt-tag--wait{color:var(--shu)}
.gt-list__arrow{flex:none;font-size:20px;line-height:28px;font-weight:700;color:var(--accent)}
@media(min-width:1024px){.gt-list__link{padding:20px 0}.gt-list__title{font-size:17px;line-height:28px}}

.art-photos{margin-top:8px}

/* ===== notfound.css ===== */
/* ページが見つかりません（404.html）。Figma に無いページ。ボタンはページの見出しと同じ左ぞろえ */
.nf__acts{justify-content:flex-start;padding-top:0}
@media(max-width:767px){.nf__acts .act{width:100%}}

/* ===== price.css ===== */
/* 費用の決まり方（Figma 396:374 PC ／ 396:540 スマホ）。クラスは pz- で始める */

/* 費用を決める4つのこと（番号＋明朝の見出し） */
.pz-factor{gap:8px}
.pz-factor__head{display:flex;align-items:baseline;gap:10px}
.pz-factor__no{flex:none;white-space:nowrap;font-family:var(--roman);font-size:28px;line-height:1;color:var(--accent)}

/* いまお出しできる金額（濃い地の 1 枚。PC は 5:7 で左に金額・右に含むもの） */
.price.pz-price{gap:24px}
.pz-price__main{display:grid;gap:8px;align-content:start}
.pz-price .card__title{color:var(--paper)}
.pz-price .pz-price__incl ul{font-size:var(--t-body)}
@media(min-width:1200px){
  .price.pz-price{grid-template-columns:5fr 7fr;gap:56px;padding:44px 48px}
  .pz-price .pz-price__incl{margin-top:0;padding-top:0;border-top:0;gap:40px}
}

/* 見積書の 5 つの行 */
.pz-est{padding-block:8px}
.pz-est__rows li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.pz-est__rows li:first-child{border-top:0}
.pz-est__k{font-size:var(--t-body);font-weight:700;line-height:1.7;color:var(--ink)}
.pz-memo{border-color:transparent}
.sec--alt .pz-memo{border-color:var(--line)}

/* ㎡単価と m 単価 */
.pz-unit{gap:8px}
.pz-unit__k{font-size:var(--t-body);font-weight:700;line-height:1.7;color:var(--ink)}

/* 本文の下のリンクは左寄せ（Figma） */
.pz-more{justify-content:flex-start;text-align:left}

/* いちばん小さな工事（白い地の 1 枚。PC は上の濃い 1 枚と同じ 5:7 で、左に金額・右に説明） */
.pz-min{display:grid;gap:16px;align-items:center;margin-top:var(--gap)}
.pz-min__main{display:grid;gap:8px}
.pz-min .price__label{color:var(--muted)}
@media(min-width:1200px){.pz-min{grid-template-columns:5fr 7fr;gap:56px;padding:36px 48px}}

/* ===== privacy.css ===== */
/* 個人情報の取扱い（Figma 443:1493 PC ／ 443:1822 スマホ）。
   節の HTML は公開ビルドが同じ形で置き換えるため、legacy の素の形（section[data-page-section] > h2 + p）に見た目を付ける。
   節の番号（短い線＋数字）は CSS の数え上げ。目次の「このページの内容」は nav の中の p を節の見出しの大きさで見せる。 */
.pv__doc{display:grid;gap:var(--sec);counter-reset:pv}
.pv__index{display:grid;gap:14px}
.pv .toc{display:grid;gap:calc(var(--gap) + 16px);padding:0;background:none;border:0;border-radius:0}
.pv .toc>p{margin:0;font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.46;letter-spacing:.02em;color:var(--ink)}
.pv .toc>p strong{font-weight:500}
.pv .toc ol{max-width:780px;gap:10px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad)}
.pv .toc li{gap:14px;font-size:16px;line-height:28px}
.pv .toc li::before{content:counter(toc);font-size:18px;min-width:.6em}
.pv .toc a{color:var(--accent);font-weight:700;text-decoration:underline}
.pv section[data-page-section]{counter-increment:pv;display:grid;gap:var(--gap);align-content:start}
.pv section[data-page-section]>h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.46;letter-spacing:.02em;color:var(--ink);margin-bottom:16px} /* 見出しと本文の間は Figma の 40（節の中の gap 24 ＋ 16） */
.pv section[data-page-section]>h2::before{content:counter(pv);display:block;margin-bottom:14px;padding-left:40px;font-family:var(--sans);font-size:15px;line-height:24px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) left center/28px 2px no-repeat}
.pv section[data-page-section]>p{max-width:780px;font-size:var(--t-body);line-height:1.85;color:var(--text)}
.pv section[data-page-section] a{color:var(--accent);font-weight:700}

/* PC はほかのページと同じ 4:8（左に見出し・右に本文）。右が最後まで空かないように（2026-10-04 見た目の点検） */
@media(min-width:1024px){
  .pv .toc,.pv section[data-page-section]{grid-template-columns:4fr 8fr;column-gap:var(--gap);align-items:start}
  .pv .toc>p,.pv section[data-page-section]>h2{grid-column:1;grid-row:1}
  .pv .toc>ol,.pv section[data-page-section]>p{grid-column:2;max-width:none}
}

/* ===== process.css ===== */
/* ご依頼の流れ（Figma 441:840 PC ／ 441:1163 スマホ）。クラスは fl- で始める */

/* 最初の絵（線画・全体を見せる） */
.fl-head-illu>img{aspect-ratio:3/2;border-radius:var(--r)}
@media(min-width:1024px){.fl-head-illu>img{aspect-ratio:1200/460}}

/* 流れ（トップの .flow をそのまま使う。スマホは番号の横に見出しと文を縦に積む＝トップと同じ） */
.pg-process .flow__item{align-items:flex-start}
@media(min-width:768px){.pg-process .flow__item{align-items:center}.pg-process .flow__in{grid-template-columns:11em minmax(0,1fr)}} /* 見出し:文＝4:8 */

/* 頼む前に確かめておくこと（白いカードの中に 2 列の箇条） */
.fl-checks{padding-block:8px}
.fl-checks .checks li:nth-last-child(-n+2){border-bottom:0}
@media(max-width:767px){.fl-checks .checks li:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* ご紹介 */
.fl-label{display:flex;align-items:center;gap:8px}
.fl-label .ic{color:var(--accent)}
.fl-label+.card__text strong{font-weight:700;color:var(--ink)}

/* 工事の日数と、前にお願いすること（2026-10-04 お父さまの回答） */
.fl-days,.fl-prep{gap:12px}
.fl-days .rows dd{font-family:var(--serif);font-size:clamp(18px,calc(18px + 4 * var(--fl)),22px);color:var(--ink)}
.fl-prep .checks li:last-child{border-bottom:0}
.fl-prep__t2{padding-top:16px;border-top:1px solid var(--line)}
.fl-prep .checks li,.fl-prep .card__text{word-break:normal;text-wrap:pretty} /* 文節で送らず、行の長さをそろえる */

/* ===== restoration.css ===== */
/* 原状回復・内装の手間受け（Figma 441:202 PC ／ 441:506 スマホ）。クラスは rs- で始める */

/* 最初の絵（線画・全体を見せる） */
.rs-head-illu>img{aspect-ratio:3/2;border-radius:var(--r)}
@media(min-width:1024px){.rs-head-illu>img{aspect-ratio:1200/460}}

/* お受けする工事 */
.rs-job__head{display:flex;align-items:flex-start;gap:14px}
.rs-ic{background:var(--white);color:var(--accent)}

/* これまでのお仕事の写真（PC は 3 等分の縦長。スマホは Figma どおり 1 枚目だけを横長に切って見せる） */
.rs-photo__img{--ar:3/4}
@media(min-width:1024px){.rs-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rs-photo .cap{margin-top:10px}
@media(max-width:1023px){
  .rs-photo:not(:first-child){display:none}
  .rs-photo__img{--ar:35/24}
}

/* 本文の下のリンクは左寄せ（Figma） */
.rs-more{justify-content:flex-start;text-align:left}

/* お住まいの方 */
.rs-label{display:flex;align-items:center;gap:8px}
.rs-label .ic{color:var(--accent)}

/* ===== toilet.css ===== */
/* トイレ・洗面所（Figma 440:212 PC ／ 440:513 スマホ）
   トイレの節: PC は 4:8 で「見出し｜中身・写真」、その下に金額の帯を横いっぱい。スマホは見出し→中身→金額→写真の順 */
.tw{display:grid;row-gap:var(--gap)}
.tw>.sh{margin-bottom:calc(var(--hgap) - var(--gap))}
.tw__a{display:grid;gap:var(--gap)}
.tw__price{order:1}
.tw__photo{order:2}
@media(min-width:1200px){
  .tw{grid-template-columns:4fr 8fr;column-gap:var(--gap)}
  .tw>.sh{grid-column:1;grid-row:1/3;margin-bottom:0;position:sticky;top:calc(var(--head) + 32px);align-self:start}
  .tw__a{grid-column:2;grid-row:1}
  .tw__photo{grid-column:2;grid-row:2;order:0}
  .tw__price{grid-column:1/-1;grid-row:3;order:0;margin-top:calc(var(--hgap) - var(--gap))}
}

/* 金額の帯（top.css は名前の順でこの後ろにつながるので、上書きは .price.tw__price などで強める。トップの .price を使い、PC は 5:7 で左に金額・右に含むもの） */
.tw__price .card__title{color:var(--paper)}
.tw__price-main{display:grid;gap:8px;align-content:start}
@media(min-width:1200px){
  .price.tw__price{grid-template-columns:5fr 7fr;gap:var(--gap) 48px;padding:44px 48px}
  .tw__price .tw__incl{margin-top:0;padding-top:0;border-top:0;padding-left:48px;border-left:1px solid var(--dark-line)}
  .tw__price .tw__incl ul{font-size:var(--t-body)}
}

/* ===== top.css ===== */
/* トップ（Figma 339:2 PC ／ 343:2 スマホ） */

/* 最初の画面: 実写（加工なし。切り抜きだけ）＋暗い重ね＋明朝の大見出し＋下に YOSHIDA */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--white);background:var(--dark);min-height:clamp(600px,calc(600px + 112 * var(--fl)),712px);display:flex;flex-direction:column}
.hero__image{position:absolute;inset:0;z-index:-2;margin:0}
.hero__image>img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(16,19,14,.62),rgba(16,19,14,.22) 80%),linear-gradient(0deg,rgba(16,19,14,.72),transparent 50%)}
/* PC: 写真は縦長の実写のまま右に置き（引き伸ばさない・中身を足さない）、左の暗い地に文字を置く */
@media(min-width:1024px){
  .hero__image{left:auto;width:min(46%,680px)}
  .hero::after{background:linear-gradient(90deg,var(--dark) 0,var(--dark) calc(100% - min(46%,680px)),rgba(32,36,30,.35) calc(100% - min(46%,680px) + 1px),rgba(32,36,30,0) 100%),linear-gradient(0deg,rgba(16,19,14,.55),transparent 40%)}
}
.hero__content{position:relative;z-index:2;flex:1;padding-top:clamp(36px,calc(36px + 52 * var(--fl)),88px);padding-bottom:28px;display:grid;gap:clamp(18px,calc(18px + 8 * var(--fl)),26px);align-content:start}
@media(min-width:1024px){.hero__content{padding-bottom:clamp(40px,calc(40px + 16 * var(--fl)),56px)}.hero__content>*{max-width:calc(100vw - min(46vw,680px) - var(--gut) - 40px)}}
.hero__kicker{font-size:clamp(15px,calc(15px + 4 * var(--fl)),19px);font-weight:700;letter-spacing:.13em}
.hero h1{font-family:var(--serif);font-weight:500;font-size:var(--t-h1);line-height:1.5;letter-spacing:.05em}
.hero__lead{font-size:clamp(17px,calc(17px + 6 * var(--fl)),23px);line-height:1.65;color:#f0f0e8}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px;margin-top:8px}
.hero__btn{min-height:56px;padding:16px 28px;font-size:clamp(17px,calc(17px + 3 * var(--fl)),20px);font-weight:500}
.hero__link{display:inline-block;padding-block:8px;color:var(--white);font-size:clamp(16px,calc(16px + 4 * var(--fl)),20px);text-decoration:underline;text-underline-offset:.3em}
/* YOSHIDA: 箱を大文字の上端〜並びの線に切り詰め（書体の寸法に頼らない）、足元に余白を残す。大きさは幅に比例させ、どの幅でも左右に収める */
.hero__mark{position:relative;z-index:1;order:3;margin:0 0 clamp(8px,calc(12px - 4 * var(--fl)),12px);font-family:var(--roman);font-weight:400;font-size:min(23.5vw,296px);line-height:1;text-box:trim-both cap alphabetic;letter-spacing:-.055em;text-align:center;white-space:nowrap;color:var(--white);pointer-events:none;user-select:none}
.hero__caption{position:absolute;right:var(--gut);top:16px;z-index:2;font-size:14px;line-height:22px;color:var(--paper);margin:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
@media(max-width:767px){
  .hero__btn{width:100%}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__link{align-self:flex-start}
  .hero__caption{position:relative;top:auto;right:auto;order:2;align-self:flex-end;margin:0 var(--gut) 10px}
}

/* はじめまして（職人）: 生成りの紙の地（2026-10-04 吉田さま「最初の画面と下の緑が似すぎてメリハリがない」で濃い地から変更）。PC は写真 5：文 7 */
.hello{background:var(--paper)}
.hello__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hgap);grid-template-areas:"head" "photo" "lead" "facts"} /* スマホは Figma 589:402 のとおり 見出し → 写真 → 説明 → 事実 */
.hello__lead{grid-area:lead}
@media(max-width:1023px){.hello__lead{margin-top:calc(var(--hgap) * -1 + 24px)}.hello__grid>.sh .sh__title{font-size:min(26px,calc((100vw - 2 * var(--gut)) / 14.8));line-height:40px;letter-spacing:0}} /* 見出しは Figma のスマホの 26px・字間 0。3行目「吉田 佳津夫（カツオ）です。」を1行に収める */
.hello__grid>.sh{grid-area:head}
.hello__photo{grid-area:photo;aspect-ratio:7/8;display:grid;place-content:center;gap:6px;text-align:center;background:#e9e6de;border:1px dashed #b9b4a7;border-radius:var(--r);font-size:15px;font-weight:700;color:var(--text);padding:16px}
.hello__photo .note{font-weight:400}
.hello__lead{text-wrap:wrap;word-break:normal} /* 折り返しは Figma と同じく幅いっぱいまで（そろえない・文節で送らない） */
.hello__facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);padding-top:24px} /* スマホも3等分・中央ぞろえ（左に寄って見えないように。2026-10-04 吉田さま） */
.hello__facts li{display:grid;justify-items:center;align-content:start;gap:10px;padding:0 6px;text-align:center}
.hello__facts li+li{border-left:1px solid var(--line)}
.hello__n{display:flex;align-items:baseline;gap:4px;line-height:1}
.hello__n .roman{font-size:clamp(40px,calc(40px + 24 * var(--fl)),64px);line-height:1;color:var(--ink)}
.hello__u{font-family:var(--serif);font-weight:500;font-size:clamp(16px,calc(16px + 4 * var(--fl)),20px);color:var(--ink)}
.hello__dash{letter-spacing:0} /* 口コミの件数は公開後。数字と同じ書体の横線で、「年」「市」と同じ並びの線にそろえる */
.hello__l{font-size:clamp(14px,calc(14px + 2 * var(--fl)),16px);font-weight:700;line-height:1.5;color:var(--ink)}
.hello__s{font-size:13px;line-height:1.6;color:var(--muted);word-break:auto-phrase;text-wrap:balance}
@media(max-width:767px){.hello__btn{width:100%}.hello__lead{font-size:16px;line-height:1.85}} /* スマホのボタンは Figma のとおり横幅いっぱい。説明は Figma のスマホと同じ 16px（3行に収まり、行末に1字だけ残らない） */
@media(min-width:1024px){
  .hello__grid{grid-template-columns:5fr 7fr;grid-template-areas:"photo head" "photo lead" "photo facts";grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:24px;align-items:start}
  .hello__facts{padding-top:32px}
  .hello__facts li,.hello__facts li+li{justify-items:start;text-align:left;gap:12px;padding:0;border:0}
  .hello__s{font-size:14px}
}

/* 01 頼めること */
.smalljobs{display:grid;gap:12px}
.smalljobs__t{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.smalljobs .chips{grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.smalljobs .chips{grid-template-columns:repeat(3,minmax(0,1fr))}}
.smalljobs .chip{justify-content:flex-start}
@media(min-width:1200px){.smalljobs{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px}}
.place__img>img{--ar:auto;aspect-ratio:auto;height:clamp(240px,calc(240px + 240 * var(--fl)),480px);border-radius:0;object-position:center 46%}
.place__img--top>img{object-position:center 48%}
.place__head{display:flex;justify-content:space-between;align-items:center;gap:12px} /* アイコンは左、札は右上の角 */
.place__head .chip{flex:none}
/* 写真つきの2枚: 見出しは左、札は右上（見出しが長いときは見出しの方が折れ、札は角から動かない） */
.card__row--corner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px}
.card__row--corner .chip{margin-top:4px}
.place__head .chip{padding:4px 12px}
.place .card__text{flex:1}

/* 02 施工の記録 */
.siteinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.siteinfo>div{padding:18px var(--pad);border-left:1px solid var(--line);border-top:1px solid var(--line);display:grid;gap:4px;align-content:start}
.siteinfo>div:nth-child(-n+2){border-top:0}.siteinfo>div:nth-child(odd){border-left:0}
.siteinfo dt{font-size:14px;color:var(--muted)}
.siteinfo dd{margin:0;font-size:16px;line-height:1.6;font-weight:700}
@media(min-width:1024px){.siteinfo{grid-template-columns:repeat(4,minmax(0,1fr))}.siteinfo>div{border-top:0}.siteinfo>div:nth-child(odd){border-left:1px solid var(--line)}.siteinfo>div:first-child{border-left:0}}
.record{gap:20px}
.record__head{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.record__no{font-size:15px;font-weight:700;color:var(--accent)}
@media(min-width:1024px){.record__head{grid-template-columns:auto 1fr auto;align-items:baseline;gap:16px}.record__legend{justify-self:end}}
.record__col{display:grid;gap:16px;align-content:start}
.record__img>img{--ar:auto;aspect-ratio:auto;height:clamp(420px,calc(420px + 140 * var(--fl)),560px);object-position:center 40%}
.pin{position:absolute;display:grid;place-items:center;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);border:2px solid var(--white);color:var(--white);font-family:var(--roman);font-size:16px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.mk-beam1{left:74%;top:30%}.mk-beam2{left:84%;top:71%}.mk-closet1{left:41%;top:52%}.mk-closet2{left:56%;top:9%}
.record__notes{display:grid;gap:14px}
.record__notes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.record__nt{font-size:var(--t-body);font-weight:700;line-height:1.6}
.steps{display:grid;gap:20px;padding-top:24px}
.steps__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px}
.step__img>img{--ar:auto;aspect-ratio:auto;height:260px;border-radius:0;object-position:center 22%}
.step:last-child .step__img>img{object-position:center 8%}
.step__head{display:flex;align-items:baseline;gap:12px}
.step__no{flex:none;white-space:nowrap;font-family:var(--roman);font-size:28px;line-height:1;color:var(--accent)}

/* 03 費用 */
.price{background:var(--dark);color:var(--paper);border-radius:var(--r);padding:34px clamp(24px,calc(24px + 12 * var(--fl)),36px) 36px;display:grid;gap:8px;align-content:start}
.price__label{font-size:15px;font-weight:700;color:var(--dark-text)}
.price .card__sub{color:var(--paper)}
.price__num{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.price__num .roman{font-size:clamp(60px,calc(60px + 24 * var(--fl)),84px);line-height:1.1}
.price__u{font-family:var(--serif);font-size:24px}
.price__cond{font-size:15px;color:var(--dark-text)}
.price__incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px;padding-top:20px;border-top:1px solid var(--dark-line)}
.price__incl h4{font-size:15px;font-weight:700;margin-bottom:8px}
.price__incl ul{display:grid;gap:4px;font-size:15px;line-height:1.75;color:var(--dark-text)}
.price__incl li::before{content:"・"}
@media(max-width:459px){.price__incl{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1024px) and (max-width:1279px){.g57>.price .price__incl,.factors>.g2{grid-template-columns:minmax(0,1fr)}}
.factors{display:grid;gap:16px;grid-template-rows:auto 1fr}
.factors>.g2{grid-auto-rows:1fr}
.factors__t{font-family:var(--serif);font-weight:500;font-size:var(--t-h4);line-height:1.5}
.factor__head{display:flex;align-items:flex-start;gap:12px}
.factor__head .factor__no,.factor__head .card__sub{padding-top:max(0px,calc((44px - 1lh) / 2))}
.factor__no{flex:none;white-space:nowrap;font-family:var(--roman);font-size:26px;line-height:1;color:var(--accent)}
.est{padding:32px clamp(22px,calc(22px + 18 * var(--fl)),40px) 16px}
.est__head{display:grid;gap:6px;margin-bottom:8px}
.est__rows li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 16px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.est__k{font-size:var(--t-body);font-weight:700;line-height:1.7}
.est__v{grid-column:2;font-size:var(--t-body);line-height:1.85;color:var(--text)}
@media(min-width:1024px){.est__rows li{grid-template-columns:34px 300px minmax(0,1fr);align-items:center}.est__v{grid-column:auto}}

/* 04 流れ */
.flow{display:grid;gap:12px}
.flow__item{flex-direction:row;align-items:center;gap:clamp(16px,calc(16px + 12 * var(--fl)),28px);padding:24px var(--pad)}
.flow__in{display:grid;gap:4px;flex:1;min-width:0}
@media(max-width:767px){.flow__item{align-items:flex-start}}
@media(min-width:768px){.flow__in{grid-template-columns:11em minmax(0,1fr);gap:24px;align-items:center}} /* 題の列は決まった幅、説明に残りを渡す（2026-10-04 見た目の点検） */
.sec .wrap>.more{margin-top:calc(var(--hgap) * -1 + 24px)}

/* 05 地域: 文 5：地図 7。地図は国土数値情報から描いた SVG（出典の表示が要る） */
.area{align-items:center}
.area__text{display:grid;gap:32px;align-content:start}
.area__base{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:500;font-size:clamp(22px,calc(22px + 6 * var(--fl)),28px);line-height:1.4;color:var(--ink)}
.area__base .tag{background:var(--accent)}
.area__dirs{border-top:1px solid var(--line)}
.area__dirs div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.area__dirs dt{font-size:14px;font-weight:700;color:var(--muted)}
.area__dirs dd{font-family:var(--serif);font-weight:500;font-size:clamp(17px,calc(17px + 1 * var(--fl)),18px);line-height:1.6;color:var(--ink)}
.area__map{margin:0}
.area__map img{display:block;width:100%;height:auto;border-radius:8px;background:var(--alt)}
.state.card__sub{display:flex}

/* 06 賃貸 */
.dots-list{display:grid;gap:4px;font-size:var(--t-body);line-height:1.85;color:var(--text)}
.dots-list li{display:flex;gap:8px}
.dots-list li::before{content:"・";color:var(--accent);flex:none}

/* 07 FAQ のあと */
.acts--col p{font-size:var(--t-body);text-align:center}

/* 08 コラム（カード全体を押せる） */
.col{position:relative}
.col .card__row{flex-direction:row;align-items:center;gap:8px 12px} /* 札と日付は横に並べる */
.col__img{aspect-ratio:382/240}
.col__img>img{border-radius:0}
.col__link{text-decoration:none}
.col__link::after{content:"";position:absolute;inset:0;z-index:2}
.col:hover .col__link{text-decoration:underline}
.col .more span{font-size:16px;font-weight:700;color:var(--accent);text-decoration:underline}

/* 09 相談 */
.consult__side{display:flex;flex-direction:column;gap:16px}
.consult__side>:last-child{flex:1}
.consult__state{font-weight:700}
.tel--box{display:flex;flex-direction:column;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px var(--pad) var(--pad)} /* 公開ビルドはカード（.card）の中の段落にクラスを足し、電話番号の置き換えが効かなくなるので、電話の枠はカードにしない */
.tel__head{display:flex;align-items:center;gap:8px}
.tel__body p{display:grid;gap:4px}
.tel__num{font-family:var(--roman);font-size:40px;line-height:1.2;letter-spacing:.01em;color:var(--ink)}
.tel__body .phone-number,.tel__body button.phone-number{font-family:var(--roman);font-size:40px;line-height:1.2;color:var(--ink);text-decoration:none}
.referral{gap:8px}

/* 2026-10-04 お父さまの回答: いちばん小さな工事は 2万5千円（職人1人・1日分） */
.smalljobs__min{grid-column:1/-1;font-size:15px;line-height:1.75;color:var(--text)}
.smalljobs__min strong{color:var(--ink)}
.price__min{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 16px;margin-top:14px;padding-top:16px;border-top:1px solid var(--dark-line)}
.price__min-k{font-size:15px;font-weight:700;color:var(--paper)}
.price__min-v{font-family:var(--serif);font-size:18px;color:var(--paper)}
.price__min-v .roman{font-size:32px;line-height:1}
.price__min-s{grid-column:1/-1;font-size:14px;line-height:1.6;color:var(--dark-text)}
/* スマホ: 写真つきの2枚も、札は見出しの上の右端（下の小さいカードと同じ形。見出しが割れないように） */
@media(max-width:767px){.card__row--corner{grid-template-columns:minmax(0,1fr)}.card__row--corner .chip{order:-1;justify-self:end;margin-top:0}}

/* ===== wallpaper.css ===== */
/* クロス張替え（Figma 396:2 PC ／ 396:184 スマホ） */

/* 最初の写真 3 枚（PC は 3 等分・スマホは横スクロール） */
.wp-head{display:grid;gap:20px}
.wp-head__img>img{--ar:384/460;object-position:center 40%}

/* 工程: スマホだけ、最初に居間の下地の写真を大きく置く（Figma の PC では隠してある） */
.wp-living{display:grid;gap:12px}
.wp-living__img{margin-bottom:8px}
.wp-living__img>img{--ar:350/240;object-position:center 45%}
@media(min-width:1024px){.wp-living{display:none}}
.wp-steps{display:grid;gap:20px}
.wp-step__img>img{--ar:auto;aspect-ratio:auto;height:clamp(280px,calc(280px + 60 * var(--fl)),340px);border-radius:0;object-position:center 35%}

/* 費用を決める 4 つ */
.wp-factor__head{display:flex;align-items:baseline;gap:14px}
.wp-factor__no{flex:none;white-space:nowrap;font-size:28px;line-height:1;color:var(--accent)}

/* 質問の文を文節で折る（共通の .faq__q は span なので base.css の word-break:auto-phrase が届かない） */
.wp-faq .faq__q{word-break:auto-phrase}

/* ===== works-mansion.css ===== */
/* マンション1室の施工事例（Figma 395:3 PC ／ 395:244 スマホ） */
/* 見比べる: カードの中に下地と仕上げを横に 2 枚（スマホも横に 2 枚） */
.wm-pair{gap:14px;padding:24px 24px 26px}
.wm-pair__ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wm-pair__ph .shot>img{aspect-ratio:265/362;object-position:center 40%}
.wm-pair__ph .tag{left:10px;top:10px}
/* 工程の写真: スマホは 1 枚ずつ縦に大きく（3:4）、PC は Figma の段（3 枚・2 枚）で高さ 512 */
.wm-rows{display:grid;gap:var(--gap)}
.wm-ph>img{aspect-ratio:3/4;object-position:center 40%}
@media(min-width:1024px){.wm-ph>img{aspect-ratio:auto;height:512px}}
/* 600〜1023: Figma の段（3 枚・2 枚）のまま横に並べる（1 列のままだと 1 枚が画面いっぱいの高さになる） */
@media(min-width:600px){.wm-rows .g3{grid-template-columns:repeat(3,minmax(0,1fr))}.wm-rows .g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 現場の情報: スマホは「担当した工事」「担当外」を全幅にして、語の途中で折れないようにする */
@media(max-width:599px){.page-head .siteinfo>div:nth-child(n+3){grid-column:1/-1;border-left:0}}

/* ===== works.css ===== */
/* 施工事例の一覧（Figma 444:288 PC ／ 444:541 スマホ） */
.wk-body{gap:24px}
/* 下地と仕上げの写真（PC 588×480・スマホは同じ比率で縦に並べる） */
.wk-ph>img{aspect-ratio:588/480;object-position:center 40%}
.wk-lead{max-width:780px}
/* 担当した工事・担当外（薄い灰の地の表） */
.wk-info{background:var(--alt);border-radius:var(--r);padding:12px var(--pad)}
.wk-info .rows>div{padding:18px 0;grid-template-columns:200px minmax(0,1fr)}
@media(max-width:479px){.wk-info .rows>div{grid-template-columns:minmax(0,1fr)}}
/* 副ボタンはどの幅でも中央（Figma） */