/* =========================================================
WordPress版で足したぶんのCSS。
⚠ デザインの原本（common.css / category.css / part.css / page.css / top.css）は触らない。
足すものは全部このファイルに書く。全ページで読み込む。
========================================================= */
/* ---------------------------------------------------------
移植した本文（旧サイトのHTMLがそのまま入っている）
p / h3 / img / a / span しか出てこないので、その5つだけ整える。
--------------------------------------------------------- */
.mig-body{font-size:16px;line-height:2.0;color:var(--ink,#2b2b2b)}
.mig-body > *:first-child{margin-top:0}
.mig-body > *:last-child{margin-bottom:0}
.mig-body p{margin:0 0 1.4em;font-size:16px;line-height:2.0}
/* 旧サイトの「空段落で間をあける」書き方（
や
）は
そのままだと間が開きすぎるので、余白として最小限に畳む。文字は消さない。 */
.mig-body p:empty{margin:0 0 .6em}
.mig-body h2,
.mig-body h3,
.mig-body h4{
margin:2.2em 0 .9em;
font-size:19px;
line-height:1.7;
font-weight:700;
letter-spacing:.02em;
padding-left:.7em;
border-left:3px solid var(--accent2,#c9b8a4);
}
.mig-body h3 a,
.mig-body h2 a{font-weight:700}
.mig-body img{
display:block;
max-width:100%;
height:auto;
margin:1.6em auto;
}
/* 旧サイトの回り込みクラス。狭い画面では回り込ませない（本文が細くなって読めなくなる） */
@media (min-width:768px){
.mig-body img.alignleft{float:left;margin:.4em 1.6em 1.2em 0}
.mig-body img.alignright{float:right;margin:.4em 0 1.2em 1.6em}
}
.mig-body .aligncenter{margin-left:auto;margin-right:auto}
.mig-body::after{content:"";display:block;clear:both}
.mig-body a{
color:inherit;
text-decoration:underline;
text-underline-offset:.25em;
text-decoration-thickness:1px;
transition:opacity .2s;
}
.mig-body a:hover{opacity:.6}
/* 画像だけのリンクに下線を引かない */
.mig-body a:has(> img){text-decoration:none}
.mig-body ul,
.mig-body ol{margin:0 0 1.4em 1.4em}
.mig-body li{margin:0 0 .5em;line-height:1.9}
.mig-body table{width:100%;border-collapse:collapse;margin:1.6em 0}
.mig-body th,
.mig-body td{border:1px solid var(--line,#e3ded7);padding:.7em .9em;font-size:15px;line-height:1.8}
@media (max-width:767px){
.mig-body,
.mig-body p{font-size:16px;line-height:1.95}
.mig-body h2,
.mig-body h3,
.mig-body h4{font-size:17px;margin:1.8em 0 .8em}
}
/* ---------------------------------------------------------
お知らせ一覧の「対象の店舗」列
原本のダミーは「補助金／イベント／お知らせ」＝4字までだったが、実データは店舗名で
「名古屋中央店」「守山尾張旭店」の6字、複数店舗のときは「◯◯店ほか」で8字になる。
⚠ min-width はタイトルの頭を縦にそろえるための指定。狭いままだと行ごとに列幅が変わる。
--------------------------------------------------------- */
.newsitem__cat{min-width:124px}
@media (max-width:700px){
.newsitem__cat{min-width:0}
}
/* ============================================================
施工事例の「この事例の担当」を2名横並びに（修正）
原本の .staff-card はそのまま。並べる器だけ足す。
============================================================ */
.staff-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.staff-cards .staff-card{margin:0}
.staff-card__role-in{font-size:13px;color:var(--sub);font-weight:400}
@media (max-width:768px){.staff-cards{grid-template-columns:1fr}}
/* ============================================================
人数が少ない店舗・職種は、流さずに中央にそろえて置く
（マーキーは1組4人以上ないと同じ顔が何度も出る）
============================================================ */
.procard-row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,1.6vw,24px)}
.procard-row .procard{width:clamp(216px,19.5vw,280px);flex:0 0 auto}
@media (max-width:560px){.procard-row .procard{width:min(78vw,300px)}}
/* ============================================================
Contact Form 7 を、原本のフォームの見た目にそろえる
------------------------------------------------------------
原本のHTMLはそのまま残し、入力部品だけCF7のタグに置き換えてある。
CF7 が自分で足す入れ物（span）を、原本のクラスと同じ振る舞いにする。
.wpcf7-form-control-wrap … 入力欄1つを包む span（幅を殺さないよう block に）
.wpcf7-list-item … チェックボックス/ラジオの1項目
.wpcf7-list-item label … 原本の .form-check にあたる
⚠ 原本のCSSは `.form-card input[type=...]` の**子孫**指定なので、
span が挟まっても効く。ここで足すのは「並べ方」だけ。
============================================================ */
.form-card .wpcf7-form-control-wrap{display:block}
/* チェックボックス・ラジオのかたまり */
.form-checks .wpcf7-form-control-wrap{display:contents}
.form-checks .wpcf7-checkbox,
.form-checks .wpcf7-radio{display:flex;flex-wrap:wrap;gap:12px 26px}
.form-checks--stack .wpcf7-checkbox,
.form-checks--stack .wpcf7-radio{flex-direction:column;gap:12px}
.form-checks--grid .wpcf7-checkbox,
.form-checks--grid .wpcf7-radio{display:grid;gap:12px 26px;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media (max-width:560px){
.form-checks--grid .wpcf7-checkbox,
.form-checks--grid .wpcf7-radio{grid-template-columns:minmax(0,1fr)}
}
.form-checks .wpcf7-list-item{margin:0;display:block}
.form-checks .wpcf7-list-item label{display:flex;align-items:center;gap:10px;
font-size:15px;letter-spacing:.05em;cursor:pointer}
.form-checks .wpcf7-list-item input{width:19px;height:19px;flex:0 0 19px;
accent-color:var(--accent)}
.form-checks .wpcf7-list-item-label{flex:1 1 auto;min-width:0}
/* 「その他」など、選択肢の右に自由記入がつく行（.form-check__sub の中） */
.form-check__sub .wpcf7-form-control-wrap:has(input[type="text"]){flex:1 1 auto;min-width:0;display:block}
/* 同意（プライバシーポリシー） */
.form-agree .wpcf7-list-item{margin:0}
.form-agree .wpcf7-list-item label{display:flex;align-items:center;justify-content:center;
gap:10px;font-size:15px;letter-spacing:.05em;cursor:pointer;flex-wrap:wrap}
.form-agree .wpcf7-list-item input{width:19px;height:19px;flex:0 0 19px;accent-color:var(--accent)}
/* 送信ボタン
⚠⚠ 原本の送信ボタンは 。CF7 は を出す。
すると `.section-white .form-card input{background:var(--white)}`（入力欄を白くする指定）が
**送信ボタンにも当たってしまい**、白地に白文字＝**ラベルが見えなくなる**。
詳細度で勝つように、ここで塗り直す。 */
.form-card input.wpcf7-submit,
.section-white .form-card input.wpcf7-submit{
-webkit-appearance:none;appearance:none;cursor:pointer;
background:var(--accent);color:var(--white);border-color:var(--accent)}
.form-card input.wpcf7-submit:hover,
.section-white .form-card input.wpcf7-submit:hover{opacity:.88}
.form-card .wpcf7-spinner{margin:0 0 0 12px;vertical-align:middle}
/* 検証メッセージ（原本には無い部品なので、フォームの文字づかいにそろえる） */
.form-card .wpcf7-not-valid-tip{font-size:14px;line-height:1.8;letter-spacing:.04em;
color:#c0392b;margin-top:8px}
.form-card :is(input,select,textarea).wpcf7-not-valid{border-color:#c0392b}
.wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:16px 20px;border:1px solid var(--line);
font-size:15px;line-height:1.9;letter-spacing:.04em;text-align:center}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--accent);color:var(--ink)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#c0392b;color:#c0392b}
/* ============================================================
確認画面（Confirm Plus Contact Form 7）
------------------------------------------------------------
js/wp-extra.js が #wpcf7cpcnf に .form-card を、表に .spec-table を、
ボタンに .btn / .btn.primary を付けている。ここは器の余白だけ。
⚠ プラグインの既定は「入力フォームを visibility:hidden で残したまま
確認表を重ねる」ため、下に大きな空白ができる。ふつうの流れに戻す。
============================================================ */
.wpcf7cp-form-hide{display:none !important}
/* ⚠ プラグインのCSSは #wpcf7cpcnf（id指定）なので、クラスの指定では勝てない。
入力フォームの座布団と同じ見た目を、こちらもid指定で当て直す。 */
#wpcf7cpcnf{position:static !important;max-width:880px;margin-inline:auto;
background:var(--white);border-radius:var(--radius-lg);
padding:clamp(28px,3.4vw,56px)}
.section-white #wpcf7cpcnf{background:var(--bg)}
#wpcf7cpcnf .spec-table{width:100%}
#wpcf7cpcnf .spec-table p{margin:0}
#wpcf7cpcnf .wpcf7cp-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
margin-top:clamp(26px,3vw,38px)}
#wpcf7cpcnf .wpcf7cp-btns .btn{cursor:pointer}
@media (max-width:560px){
#wpcf7cpcnf .wpcf7cp-btns{flex-direction:column-reverse}
#wpcf7cpcnf .wpcf7cp-btns .btn{width:100%}
}
/* ---- 事例のBEFORE/AFTERをクリックで拡大（2026-08-17）------------
モーダルの定石：body直下に置く／×は写真の外／背面は動かさない。 */
.ba--zoomable{cursor:zoom-in}
/* ⚠⚠ hidden を効かせる。ブラウザ既定の [hidden]{display:none} は**要素セレクタより弱い**ので、
.balb / .glb の display:grid に負ける。書き忘れると、閉じたあとも透明な覆いが
画面いっぱいに残り、**下の写真もリンクも押せなくなる**（2026-09-05 実測）。 */
.balb[hidden],.glb[hidden]{display:none}
.balb{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
background:rgba(20,18,16,.88);padding:clamp(16px,4vw,48px);
opacity:0;transition:opacity .25s ease}
.balb.is-open{opacity:1}
.balb__fig{margin:0;max-width:min(1200px,100%);max-height:100%;
display:flex;flex-direction:column;gap:12px;align-items:center}
.balb__img{max-width:100%;max-height:calc(100vh - clamp(96px,16vw,168px));
width:auto;height:auto;object-fit:contain;display:block;background:var(--line)}
.balb__cap{color:#fff;font-size:13px;letter-spacing:.06em;text-align:center;
font-family:var(--en)}
.balb__close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
background:rgba(20,18,16,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer;
display:grid;place-items:center}
.balb__close:hover{background:#fff;color:var(--ink);border-color:#fff}
.balb__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.balb{transition:none}}
/* ---- 写真からデザインを探す（/gallery/）--------------------------------
2026-08-17／2026-09-05「クラボと同じ仕様に」。
左＝追従するメニュー、右＝写真の石積み。写真を押すとポップアップ。
⚠ この節は /gallery/ 専用。ほかのページに .gtile などは無い。 */
.gallery-page{padding-top:clamp(96px,9vw,132px)}
.gpage-head{margin-bottom:clamp(26px,3vw,40px)}
.gpage-head .sec-title{margin-top:6px}
.gpage-head .sec-lead{margin-top:12px;max-width:46em}
/* ⚠ 見出しは左メニューの上ではなく **全幅の上** に置く。スマホでメニューが
横スクロールの帯になったとき、見出し → 絞り込み → 写真の順で読めるようにするため。 */
.gwrap{display:grid;grid-template-columns:210px minmax(0,1fr);
gap:clamp(24px,3vw,52px);width:100%;max-width:var(--maxw);margin-inline:auto;
padding-inline:var(--gut)}
/* ---- 左メニュー ---- */
/* ⚠ 追従は sticky。親（.gwrap）に overflow を付けると効かなくなるので付けない。
止まる位置はヘッダーの高さぶん下げる。 */
.gside__in{position:sticky;top:104px;display:flex;flex-direction:column;gap:6px}
.gside__all,
.gside__item{display:flex;align-items:center;gap:8px;width:100%;
font-size:14px;line-height:1.5;letter-spacing:.03em;text-align:left;
padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink);
cursor:pointer;transition:background .2s ease,color .2s ease}
.gside__all{font-weight:500}
.gside__all:hover,.gside__item:hover{background:rgba(42,42,42,.06)}
/* ：選んでいる項目はオレンジ。
指摘は「すべての写真」に刺さっていたが、選択の色は全項目で同じでないと
どれが選ばれているか分からなくなるので、メニュー全体に当てる。
地＋白文字の組み合わせは .btn.primary と同じ（サイト内で色の意味をそろえる）。 */
.gside__all.is-current,.gside__item.is-current{background:var(--accent);color:#fff}
.gside__all:focus-visible,.gside__item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ：見出しの頭にオレンジの●を入れる。
3つの見出し（場所から／リフォームの種類から／住まいの種類から）すべてに付ける
（指摘は2つに刺さっていたが、1つだけ●が無いほうが不自然なため）。 */
.gside__head{display:flex;align-items:center;gap:7px;
font-size:12px;letter-spacing:.12em;color:var(--sub);
margin:20px 0 6px;padding-inline:12px}
.gside__head::before{content:"";flex:none;width:6px;height:6px;
border-radius:50%;background:var(--accent)}
.gside__list{list-style:none;margin:0;padding:0}
.gside__n{margin-left:auto;font-family:var(--en);font-size:12px;opacity:.55;
font-variant-numeric:tabular-nums}
.gside__foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:4px}
.gside__heart{width:15px;height:15px;flex:none}
.gside__item--fav.is-current .gside__heart{color:#fff}
.gside__item--link{text-decoration:none}
/* ---- 右の石積み ---- */
/* CSSの段組みで積む。JSの位置計算を持たない＝写真の高さがバラついても崩れない。
⚠ 段組みの中の要素は break-inside:avoid を付けないと段をまたいで切れる。 */
.gmasonry{column-count:4;column-gap:clamp(10px,1.1vw,16px)}
.gtile{break-inside:avoid;position:relative;margin:0 0 clamp(10px,1.1vw,16px);
border-radius:var(--radius);overflow:hidden;background:var(--line);cursor:zoom-in}
.gtile img{width:100%;height:auto;display:block}
.gtile.is-hidden{display:none}
.gtile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ハート＝お気に入り（この端末）＋いいね（みんな）。
押す前＝白の輪郭だけ／押したあと＝白で塗りつぶす（2026-09-05）。
⚠ 色は使わない。影も敷かない（同指示）。そのぶん、白い浴室・洗面の写真の上では
見分けにくくなる。輪郭か塗りかの差だけで伝えるので、線は細くしすぎないこと。 */
.gheart{position:absolute;top:8px;right:8px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:6px 8px;border:0;border-radius:999px;background:none;cursor:pointer;
color:#fff}
.gheart svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.gheart__n{font-family:var(--en);font-size:12px;font-variant-numeric:tabular-nums;
line-height:1;letter-spacing:.02em}
.gheart__n:empty{display:none}
.gheart:hover svg{fill:rgba(255,255,255,.35)}
.gheart.is-on svg{fill:#fff;stroke:#fff}
.gheart:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:999px}
.gmasonry__empty{text-align:center;color:var(--sub);margin-top:clamp(26px,3vw,40px)}
/* ---- ポップアップ ---- */
/* 定石は .balb と同じ（body直下・フォーカス復帰・×は写真の外・背面固定）。 */
.glb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
padding:clamp(16px,3vw,44px);background:rgba(20,18,16,.72);
opacity:0;transition:opacity .28s ease}
.glb.is-open{opacity:1}
.glb__box{position:relative;width:min(880px,100%);background:var(--white);
border-radius:var(--radius);padding:clamp(12px,1.4vw,18px);
max-height:calc(100dvh - clamp(32px,6vw,88px));display:flex;flex-direction:column;gap:14px}
.glb__img{width:100%;min-height:0;object-fit:contain;border-radius:6px;display:block}
.glb__btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding-bottom:4px}
.glb__fav,.glb__link{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-width:216px;font-size:14px;letter-spacing:.04em;line-height:1;
padding:14px 22px;border-radius:999px;border:1px solid var(--line);
background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none;
transition:border-color .25s ease,color .25s ease,background .25s ease}
.glb__fav:hover,.glb__link:hover{border-color:var(--ink)}
.glb__fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.glb__fav.is-on{color:var(--accent);border-color:var(--accent)}
.glb__fav.is-on svg{fill:currentColor}
.glb__close{position:absolute;top:-52px;right:-4px;width:44px;height:44px;
border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.25);
color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center}
.glb__close:hover{background:#fff;color:var(--ink);border-color:#fff}
.glb__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.glb{transition:none}}
@media (max-width:1200px){ .gmasonry{column-count:3} }
@media (max-width:900px){
/* 左メニューは上に回して横スクロールの帯にする（縦に長い一覧の上に置くため） */
.gwrap{grid-template-columns:minmax(0,1fr)}
.gside__in{position:static;flex-direction:row;flex-wrap:nowrap;gap:8px;
overflow-x:auto;-webkit-overflow-scrolling:touch;
margin-inline:calc(var(--gut) * -1);padding:2px var(--gut) 10px;
scroll-padding-inline:var(--gut);scrollbar-width:none}
.gside__in::-webkit-scrollbar{display:none}
.gside__head{display:none}
.gside__list{display:contents}
.gside__foot{display:contents}
.gside__all,.gside__item{width:auto;flex:none;white-space:nowrap;
border:1px solid var(--line);border-radius:999px;padding:9px 15px;background:var(--white)}
.gside__n{margin-left:6px}
.gmasonry{column-count:2}
}
@media (max-width:560px){
.glb__btns{flex-direction:column;align-items:stretch}
.glb__fav,.glb__link{min-width:0;width:100%}
.glb__close{top:-48px;right:0}
}
/* =============================================================
事例詳細（2026-09-05 修正で構造化）
⚠ 修正「画像をここまで大きく表示しなくても良い」
→ メイン写真は高さで頭打ちにする（横幅いっぱいに伸ばさない）
============================================================= */
/* ⚠ 2026-09-05 ：メイン写真は見出しの下ではなく、
2カラムの**右カラムの先頭**に置く。列いっぱいに敷く。 */
.detail-2col__main > .wk-hero{margin-bottom:clamp(36px,4vw,60px)}
.wk-hero__main{position:relative;
aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--line)}
.wk-hero__main img{width:100%;height:100%;object-fit:cover;display:block}
.wk-hero__thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.wk-thumb{width:96px;aspect-ratio:4/3;padding:0;border:1px solid var(--line);background:var(--line);
overflow:hidden;cursor:pointer;opacity:.55;transition:opacity .3s ease,border-color .3s ease}
.wk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wk-thumb:hover,.wk-thumb.is-on{opacity:1;border-color:var(--accent)}
@media(max-width:600px){
.wk-hero__main{aspect-ratio:4/3;border-radius:var(--radius)}
.wk-thumb{width:62px}
}
/* AFTERの写真は押すと大きく表示する（修正） */
.wk-zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.wk-zoom img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.wk-zoom:hover img{opacity:.88}
/* 拡大表示の覆い */
.wk-lightbox{position:fixed;inset:0;z-index:2000;display:none;place-items:center;
background:rgba(20,20,20,.9);padding:24px}
.wk-lightbox.is-open{display:grid}
.wk-lightbox img{max-width:min(1200px,94vw);max-height:88vh;width:auto;height:auto;display:block}
.wk-lightbox__close{position:absolute;top:16px;right:16px;width:44px;height:44px;
border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#222;font-size:20px;cursor:pointer}
/* 担当（アドバイザー＋プランナーの2名まで） */
.staff-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(18px,2.2vw,30px)}
.staff-cards .staff-card{max-width:none;width:100%}
.staff-card__btn{margin-top:14px}
/* AFTERに縦位置の写真を入れたとき（2026-08-17）。
4/3の枠のままだと上下が切れるので、縦の写真は枠ごと縦にして全部見せる。
横の写真と混ざっても、行の高さは各カードで決まるので崩れない。 */
.after-card--portrait figure{aspect-ratio:3/4}
@media(max-width:560px){
/* スマホは1列なので、縦写真が画面を占領しすぎないよう少し詰める */
.after-card--portrait figure{aspect-ratio:4/5}
}
/* 特集の一覧（/features/）：分類をタグで出す（2026-09-05）。
⚠ .workcard__tags の位置指定は .workcard__media の中にしか効かないので、
.doccard__media 用にここで同じ指定を書く。 */
.ft-index .doccard__media{position:relative}
.ft-index .doccard__media .workcard__tags{position:absolute;top:14px;right:16px;z-index:2;
display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:0}
.ft-index .doccard__media .tag{margin:0;background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6)}
/* （2026-09-05）
事例詳細の本文の節だけ、上の余白を落とす（100 0 100 0 → 0 0 100 0）。
⚠ .detail-body はお知らせ・コラム・スタッフ・イベントでも使う共有部品なので、
事例詳細（body.single-works）に限って効かせる。 */
body.single-works .section.detail-body{padding-top:0}
/* （2026-09-11）
スタッフ詳細の本文の節も、上の余白を落とす（100 0 100 0 → 0 0 100 0）。
⚠ 上の と同じ話。.detail-body は共有部品なので、**そのページ種別に限って**効かせる。
お知らせ・コラムの詳細には当てない。 */
body.single-staff .section.detail-body{padding-top:0}
/* （2026-09-26）イベント詳細も同じく上の余白を落とす。
⚠ コメントは「section.section と同じクラス全部に、全ページで」と書かれていたが、
`.section` はサイト全体の節の縦リズムそのもので、当てると**全ページの節の上が詰まる**。
指摘の主旨は「見出しの節と本文の節のあいだが空きすぎ」なので、
上の works / staff と同じく **イベント詳細に限って**効かせる。
⚠ この形（body.single-*）はWordPressが出す body クラスに頼るので、
原本（html-work/event-detail.html・body class="pt"）には効かない。works / staff も同じ。 */
body.single-event .section.detail-body{padding-top:0}
/* （2026-09-26）お知らせ詳細も同じく上の余白を落とす。
見出しの節（.works-index）と本文の節（.detail-body）はどちらも section-paper ＝ 地色が続く境界。
ここに .detail-head--lg の下余白100px と .detail-body の上余白100px が足し算で入って
200px あいていた（SPは60+100=160px）。works / staff / event には既に入れてある処理で、
お知らせとコラムだけ抜けていた。⚠ コラム（body.single-blog）は未適用。 */
body.single-news .section.detail-body{padding-top:0}
/* （2026-09-05）
押すと大きく表示できることが分かるように、写真の右上にフラットな虫眼鏡を置く。
⚠ 影は付けない（指示）。四角も塗りだけで、角丸・境界線・影は使わない。 */
.wk-zoom{position:relative}
.wk-zoom::after{content:"";position:absolute;top:12px;right:12px;z-index:2;
width:34px;height:34px;background:rgba(255,255,255,.92);
-webkit-mask:var(--wk-lens) center / 18px 18px no-repeat;
mask:var(--wk-lens) center / 18px 18px no-repeat;
background-color:transparent}
/* 白い四角＋その上に濃い虫眼鏡、の2枚重ね（擬似要素は1つしか使えないので枠は box-shadow を使わず outline も使わない） */
.wk-zoom::before{content:"";position:absolute;top:12px;right:12px;z-index:1;
width:34px;height:34px;background:rgba(255,255,255,.92)}
.wk-zoom::after{background:var(--ink)}
:root{--wk-lens:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.55 13.46l4.24 4.25 1.42-1.42-4.25-4.24A7.5 7.5 0 0 0 10.5 3zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zM7.5 9.5h6v1.6h-6z' fill='%23000'/%3E%3Cpath d='M9.7 7.3h1.6v6H9.7z' fill='%23000'/%3E%3C/svg%3E")}
/* ============================================================
事例詳細 （2026-09-05）
============================================================ */
/* メイン写真と最初の節のあいだが142pxで、他の節間（84px）より広かった。
写真の下余白を外して、ほかの節と同じ間隔にそろえる。 */
.detail-2col__main > .wk-hero{margin-bottom:0}
/* AFTERの説明文だけ、写真との間を8px→20pxに。
（場所名・一言・使用商品はもとの間隔のまま） */
.after-card > p:not(.after-card__lead):not(.after-card__prod){margin-top:20px}
/* こだわりは「項目名と説明を近づけ、項目どうしを離す」（近接の法則）。
もとは全部が同じ行間で並んでいて、どこまでが1項目か分からなかった。 */
.wk-point p{margin-top:30px}
.wk-point p:first-child{margin-top:0}
.wk-point strong{display:block;margin-bottom:4px;font-weight:500;
letter-spacing:.08em;color:var(--ink)}
.wk-point strong + br{display:none}
/* 担当はカードごとリンク。右下に右斜め下の矢印を出す（ボタンは置かない）。 */
.staff-card--link{position:relative;display:flex;text-decoration:none;color:inherit;
padding-right:56px;transition:opacity .3s ease}
.staff-card--link:hover{opacity:.75}
/* 右斜め下向きの矢印（↘）。
⚠ border の2辺だけだと「┘」の角記号に見えて矢印にならない。斜めの線＋矢じりで描く。 */
.staff-card__arw{position:absolute;right:18px;bottom:16px;width:22px;height:22px;
background:var(--ink);transition:transform .3s ease;
-webkit-mask:var(--wk-arw-dr) center / 22px 22px no-repeat;
mask:var(--wk-arw-dr) center / 22px 22px no-repeat}
.staff-card--link:hover .staff-card__arw{transform:translate(3px,3px)}
:root{--wk-arw-dr:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M6 6 L17.5 17.5'/%3E%3Cpath d='M17.5 10.5 V17.5 H10.5'/%3E%3C/g%3E%3C/svg%3E")}
.u-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){
.staff-card--link{padding-right:44px}
.staff-card__arw{right:12px;bottom:12px;width:16px;height:16px}
}
/* （2026-09-05）
事例詳細の見出しの下は、楕円のタグではなく「部位 ／ メーカー」の1行で出す。 */
.detail-head__parts{margin-top:14px;font-size:15px;color:var(--sub);letter-spacing:.08em}
.works-index .detail-head__parts{text-align:center}
@media(max-width:600px){ .detail-head__parts{font-size:14px;margin-top:12px} }
/* ============================================================
splitヒーロー（renovation・reform・concept・warranty）
2026-09-05：**スマホでは、見出しの下のリード文をヒーロー写真の下に出す。**
------------------------------------------------------------
リード文は HTML 上で .phead の外（.wrap の直下）に出してある。
スマホでは節を縦並びの flex にして、.wrap を display:contents で透かし、
見出し → 写真 → リード文 の順に並べ替える。
⚠ display:contents にすると .wrap の左右ガターが消えるので、
中の2つ（.phead / リード文）に同じガターを付け直す。
============================================================ */
@media (max-width:600px){
.page-hero--split{display:flex;flex-direction:column}
.page-hero--split > .wrap{display:contents}
.page-hero--split .phead{order:1;padding-inline:var(--gut)}
.page-hero--split .phero__media{order:2}
.page-hero--split .phead__lead,
.page-hero--split .phead__tag{order:3;padding-inline:var(--gut);
margin-top:clamp(24px,6vw,32px);max-width:none}
.page-hero--split .hero__social{order:4}
}
/* ============================================================
スマホの改行（2026-09-05）
------------------------------------------------------------
・本文の手動改行は原本側で「PCだけ」に変えた（
）。
・そのうえで、機械の折り返しで**最後に1〜2文字だけ落ちる行**が出るので、
見出し・短い文は行の長さを均し、本文は文節の切れ目で折る。
⚠ text-wrap:pretty は使わない（Safariで行が縮み、本文が左に寄る）。
============================================================ */
@media (max-width:600px){
/* 見出し・カードの短い文＝行を均す（対応ブラウザで孤立行が消える） */
h1,h2,h3,h4,
.sec-title,.concept__title,.phead__tag,
.workcard__title,.workcard__cat,
.eventcard__ttl,.eventcard__cap,
.doccard__body h3,.infocard h3,.after-card h3,
.promise__item h4,.flowstep__title,
.staffcard__cat,.shopcard__name{ text-wrap:balance }
/* 本文＝文節の切れ目で折る（非対応ブラウザは今までどおり） */
p,li,dd,
.sec-lead,.concept__lead,.story__body,.flowstep__desc,
.after-card p,.ba-item__desc,.doccard__body p{ word-break:auto-phrase }
}
/* ============================================================
スマホの見た目の調整（2026-09-05）
============================================================ */
@media (max-width:600px){
/* ① 写真に重なる白ボックスが、390pxの画面で本文幅236pxしか無かった
（幅88% ＋ 内側余白36px×2）。器いっぱいに広げ、余白を詰めて本文幅を306pxに。
これで最後に1〜2文字だけ落ちる行がほぼ無くなる。 */
.concept__box{width:100%;padding:26px 22px}
/* ② 読む文字が11px台だったところを12pxに（社内規定＝本文の最小12px）。
STEP・Trouble・BEFORE のような**飾りの英字ラベル**はそのまま小さくてよいが、
10pxは小さすぎるので11pxを下限にする。 */
.tag{font-size:12px}
.crumb,.crumb a,.crumb .sep,.crumb .cur{font-size:12px}
.foot-bottom,.foot-bottom a,.foot-bottom span{font-size:12px}
dt{font-size:12px}
.gside__n,.gside__head{font-size:12px}
.pt-item__incl,.pt-item__maker{font-size:12px}
.ba__label{font-size:12px}
}
/* ③ 文章の入るカードが、スマホで2列＝本文幅123pxになっていた（/contact/）。
写真だけのカード（ショールームなど）は2列のままでよいので、
**文章カード（.infocard）を含むときだけ**1列にする。 */
@media (max-width:600px){
.cards4:has(.infocard){grid-template-columns:1fr}
}
/* ④ /estimate/ がスマホで横に30pxはみ出していた（2026-09-05 実測）。
「その他」などの自由記入欄が、器がブロック要素なので flex-basis:260px が効かず、
入力欄の生まれつきの幅（size属性ぶん）のまま親からはみ出していた。
幅を器に合わせる。ついでにフォーム全体の保険も置く。 */
.form-card .form-check__sub input[type="text"],
.form-check__sub .wpcf7-form-control-wrap input[type="text"]{
width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0}
@media (max-width:600px){
.form-card input,.form-card select,.form-card textarea{max-width:100%;box-sizing:border-box}
}
/* ⑤ スマホで「語の途中」で割れていた3か所（2026-09-05 実測）。
文の途中で折れるのは自然だが、時刻・商品名・肩書きが割れるのは読みにくい。 */
@media (max-width:600px){
/* 電話の受付時間「月〜土 9:00〜18:00 ／ 日・祝 9:00〜17:00」が
「日・祝 9:00〜／17:00」のように時刻の途中で割れていた。塊で折る。 */
.telbox__hours{word-break:keep-all;overflow-wrap:anywhere}
/* 「あったかリフォーム／ローン」と商品名が割れていた。文節で折る。 */
.concept__title{word-break:auto-phrase}
/* 「インテリアコーディ／ネーター」と肩書きが割れていた。
2列のカードは1行167px。1文字ぶん詰めて収まるようにする（本文の最小12pxは守る）。 */
.staffgrid .staffcard__cat{font-size:13px;letter-spacing:.04em}
}
/* ============================================================
小さい写真を引き伸ばさない（2026-09-07）
------------------------------------------------------------
モアリビングから移した「施工ポイント」の写真は公開版が 150〜220px しかなく
（3,738枚中1,731枚＝46%）、4/3の枠に cover で入れると約3倍に伸びて溶ける。
実測＝/works/case-152/ で 実150×220 → 表示451×338（×3.0）。
小さい写真は「実寸のまま・切らずに」出す。小さくても鮮明なほうが読める。
値（--maxw / --ar / --tile）は single-works.php が写真ごとに流し込む。
⚠ この2つは1クラスだと効かない。
`.ba` は category.css の `.ba{aspect-ratio:4/3}` と同じ強さで、
`.after-card--portrait figure{aspect-ratio:3/4}` はこのファイルの上にある。
どちらもクラス2つで書いて確実に勝たせる。
============================================================ */
/* 1枚ぶん：実寸で止めて、切らない（contain） */
.ba.ba--fit{aspect-ratio:var(--ar);width:min(100%, var(--maxw));margin-inline:auto;background:none}
.ba.ba--fit img{object-fit:contain}
/* AFTERは写真の下に見出しと説明が続く。写真だけ中央に置くと文字と軸がずれるので、
本文と同じ左そろえにする（BEFOREは文字が無いので中央でよい）。 */
.after-card.after-card--fit figure{aspect-ratio:var(--ar);width:min(100%, var(--maxw));
margin-inline-start:0;margin-inline-end:auto;background:none}
.after-card.after-card--fit figure img{object-fit:contain}
/* 集まりが「全部小さい」ときは升目そのものを写真の幅に詰めて、中央に寄せる。
（2列のままだと150pxの写真の右に余白が大きく空いて間が抜ける） */
.ba-grid.ba-grid--fit{grid-template-columns:repeat(auto-fill, var(--tile));
justify-content:center;gap:clamp(10px,1.2vw,18px)}
@media (max-width:600px){
/* スマホは升目を詰めきると1列になりがち。最低2列は保つ */
.ba-grid.ba-grid--fit{grid-template-columns:repeat(auto-fill, minmax(min(var(--tile), 44%), var(--tile)))}
}
/* =============================================================
デザイン4原則の点検（2026-09-12）＝ 近接・整列・反復・対比
⚠ このファイルは最後に読まれる（common→category→part→page→wp-extra）＝同じ強さのルールはここが勝つ。
============================================================= */
/* 【対比】ベージュ（--accent2）の文字は、明るい地の上ではクリーム地2.19:1で読めなかった。
文字は濃いほう（--accent2-ink＝4.52:1）へ。線・飾りの筆記体・アイコン、暗い写真帯の上
（.promise の番号札・.stat）は明るい --accent2 のまま。 */
.flowstep__no,
.infocard__en,.compare__en,.optcard__en,.optcard__op,.form-step__en,.price-block__en,
.staffcard__cat,.staffcard__name small,.staffcard dt,.shopcard__area,
.tl__yr small,.perf-card__icon--num,.value__no b,
.hero-news__label{color:var(--accent2-ink)}
/* 【反復】ボタンの高さ。スマホで「大きめのボタン」(.btn--lg) が標準(56px)より小さい53pxになっていた。
フォームの送信ボタンも 55/51px と他とずれていた → 標準にそろえる。
（サービスの「詳しく見る」.entry__cta はスマホだけ小さくしてあるので触らない） */
.form-card input.wpcf7-submit,
.section-white .form-card input.wpcf7-submit{min-height:60px}
@media (max-width:600px){
.btn--lg{min-height:60px}
.form-card input.wpcf7-submit,
.section-white .form-card input.wpcf7-submit{min-height:56px}
}
/* 【近接】事例詳細の各ブロック：見出しの中（小見出し→見出し 17px）と、見出し→本文（18px）が同じで、
見出しが本文から離れて見えなかった。見出し→本文を広げて、まとまりを分ける。 */
.dblock > .sec-head{margin-bottom:clamp(28px,2.6vw,36px)}
/* 【反復】写真の角丸。ナビカードだけ 12px 決め打ちで、ほかの写真（--radius）とずれていた。 */
.navcard__media{border-radius:var(--radius)}
/* 【対比】 案A（2026-09-12）：オレンジの小さい文字は濃いオレンジ（--accent-ink）。
塗り（ボタン・追従タブ・「必須」の札）・大きい文字（価格・番号・口コミ平均の★）・hover は今のオレンジのまま。
暗い写真帯の上の小見出し（.promise .eyebrow）はベージュのまま（page.css）。 */
.eyebrow,
.entry__cat,.mcard__cat,.perf-card__en,.reno-link__en,.mm-en,.foot-col h6,
.vcard__stars,.quote__g .s,.zen__center i,.pbitem__ttl,.after-card__lead,.pt-count,
.works-bar__count b,.type-filter__count b,
.form-step.is-on .form-step__en{color:var(--accent-ink)}
.promise .eyebrow{color:var(--accent2)} /* 上の .eyebrow より後に置いて、暗い帯の上は明るいまま */
/* 【対比】案Aの仕上げ（2026-09-12）。基準（4.5:1／大きい文字3:1）にわずかに届かなかった3か所。
・イベントの帯（.event__band）は地が少し濃いグレー（#EDECE9）＝その中だけ一段濃く（小見出し4.5↑・開催日の見出し4.5↑）
・部位別の価格（大きい数字）＝ --accent だと2.81:1 → 同じ系統の --accent-hover（3:1↑）
・ギャラリーの件数＝ opacity:.55 で薄くなっていた → 半透明をやめて補助色 */
.event__band .eyebrow{color:#9C581B}
.event__band .eventcard__meta dt{color:#675F58}
.pt-item__amount{color:var(--accent-hover)}
.gside__n{opacity:1;color:var(--sub)}
/* ギャラリーの横メニュー：選ばれている項目はオレンジ地＋白文字（.btn.primary と同じ）。
件数だけ補助色になるとオレンジの上で読めない（1.69:1）→ 選択中は件数も白。 */
.gside__all.is-current .gside__n,.gside__item.is-current .gside__n{color:#fff}
/* ---- 施工事例一覧：条件から探す（2026-09-12・本物の絞り込みにした）----
チップはチェックボックスを包んだ