/* ================= 施工事例 一覧 ================= */
.arh{position:relative;background:var(--cream);border-bottom:var(--bd);overflow:hidden;padding:84px 0 30px}
.arh__in{position:relative;z-index:2}
.arh .lb{margin-bottom:11px;font-size:13px;padding:4px 13px}
.arh__h{font-size:clamp(23px,6.6vw,30px);line-height:1.4;letter-spacing:-.025em}
.arh__h em{font-style:normal}
.arh__s{font-size:14px;font-weight:600;color:var(--sub);line-height:1.85;margin-top:11px;max-width:36em}

/* 絞り込み */
.flt{position:relative;z-index:4;background:var(--paper);border-bottom:var(--bd);padding:11px 0}
.flt__bar{display:flex;align-items:center;gap:14px}
.pconly{display:none}
.arh .bc{font-size:13px;margin-bottom:12px}
.arh + .sec,.nb + .sec{padding-top:40px}
.flt + .sec{padding-top:22px}
.flt__row{display:flex;align-items:flex-start;gap:10px;margin-top:13px}
.flt__row:first-of-type{margin-top:0}
.flt__lb{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;
 font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--sub);white-space:nowrap}
.flt__ps{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;overflow-y:hidden;
 padding:4px 14px 6px 2px;margin:-4px -14px -6px -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.flt__ps::-webkit-scrollbar{display:none}
.flt{-webkit-mask-image:none}
.fp{display:inline-flex;align-items:center;height:34px;padding:0 13px;background:#fff;
 border:2px solid var(--ink);border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:-.01em;
 box-shadow:2.5px 2.5px 0 var(--ink);cursor:pointer;white-space:nowrap;
 transition:transform .16s steps(2,end),box-shadow .16s steps(2,end),background .16s steps(2,end),color .16s steps(2,end)}
.fp:hover{transform:translate(1.5px,1.5px);box-shadow:1px 1px 0 var(--ink)}
.fp[aria-pressed="true"]{background:var(--ink);color:#fff;transform:translate(2.5px,2.5px);box-shadow:0 0 0 var(--ink)}
.flt__ct{margin:0 0 0 auto;font-size:13px;font-weight:800;color:var(--sub);letter-spacing:.02em;white-space:nowrap}
.flt__ct b{color:var(--ink);font-size:16px;margin:0 2px}

/* カード（一覧版） */
.ar{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--ink);
 border-bottom:var(--bd)}
.ar .gl__c{animation:none}
.ar__c.off{display:none}
.ar__c.pop{animation:arpop .34s steps(3,end) both}
@keyframes arpop{
 0%{opacity:0;transform:translateY(16px) scale(.94)}
 60%{opacity:1;transform:translateY(-3px) scale(1.02)}
 100%{opacity:1;transform:translateY(0) scale(1)}}
.ar__none{display:none;grid-column:1/-1;background:var(--paper);padding:56px 20px;text-align:center;
 font-size:16px;font-weight:700;line-height:1.9}
.ar__none.on{display:block}
.ar__none b{display:block;font-size:19px;margin-bottom:8px}

/* もっと見る */
.mrw{display:flex;justify-content:center;padding:40px 0 0}
.mrw__b{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--ink);
 border:var(--bd);border-radius:999px;padding:15px 30px;font-size:16px;font-weight:800;
 box-shadow:var(--sh);transition:transform .18s steps(2,end),box-shadow .18s steps(2,end)}
.mrw__b:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.mrw__b.done{display:none}

@media(min-width:900px){
 .arh{padding:146px 0 64px}
 .arh .lb{margin-bottom:15px;font-size:16px;padding:5px 16px}

 .arh__h{font-size:clamp(34px,3.6vw,50px);line-height:1.34}
 .arh__s{font-size:17px;line-height:2;margin-top:20px;max-width:46em}
 .flt{padding:24px 0 20px}
 .flt__ct{font-size:15px}
 .arh .bc{font-size:16px;margin-bottom:22px}
 .arh + .sec,.nb + .sec{padding-top:78px}
 .flt + .sec{padding-top:34px}
 .pconly{display:inline}
 .flt__row{gap:14px;margin-top:12px}
 .flt__lb{height:38px;font-size:14px}
 .flt__ps{gap:9px;flex-wrap:wrap;overflow:visible;padding:0;margin:0}
 .flt__row{display:none}
 .fp{height:38px;padding:0 17px;font-size:15px}

 .flt__ct b{font-size:20px}
 .ar{grid-template-columns:repeat(3,1fr)}
 .mrw{padding:56px 0 0}
 .mrw__b{padding:17px 38px;font-size:17px}
}
.sec--tight{padding:0 0 70px}
@media(min-width:900px){ .sec--tight{padding:0 0 86px} }
.gl__im img{width:100%;aspect-ratio:4/3.5;object-fit:cover;border:var(--bd);border-radius:8px;
 display:block;transition:transform .25s,box-shadow .25s}
.gl__c:hover .gl__im img{transform:translate(-4px,-4px);box-shadow:5px 5px 0 var(--ink)}
/* TOPページのカードと同じ比率にする */
@media(min-width:900px){.gl__im img{aspect-ratio:4/3;border-radius:10px}}

/* ===== FLAT：影なしに揃える（全ページ共通ルール） ===== */
.fp{box-shadow:none}
.fp:hover{transform:none;box-shadow:none;background:var(--gold)}
.fp[aria-pressed="true"]{transform:none;box-shadow:none}
.mrw__b:hover{transform:none;box-shadow:none;background:var(--gold)}
.gl__c:hover .gl__im img{transform:none;box-shadow:none;filter:brightness(.92)}
.gl__im img{box-shadow:none}

/* ================= 施工事例・お客様の声の詳細ページ ================= */
.dt{padding:96px 0 46px}
.dt__bc{margin-bottom:16px;font-size:14px;align-items:baseline}
.bc__now{min-width:0;max-width:100%;font-weight:700;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc__now:before{content:"/";opacity:.45;margin-right:8px}
@media(min-width:900px){.dt__bc{font-size:15px}}
.dt__hd{display:grid;gap:14px}
.dt__mt{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dt__area{font-size:14.5px;font-weight:800;letter-spacing:.02em}
.dt__bg{display:inline-block;border:var(--bd);border-radius:999px;padding:3px 12px;
 font-size:12.5px;font-weight:800;background:#fff}
.dt__bg--new{background:var(--butter)} .dt__bg--reno{background:#E6F1EE}
.dt__ym{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.dt__h{font-size:clamp(26px,7.4vw,34px);font-weight:800;line-height:1.42;letter-spacing:-.025em;
 text-wrap:balance}
.dt__l{font-size:15.5px;line-height:2.05;color:var(--sub);max-width:44em}
.dt__tg{display:flex;flex-wrap:wrap;gap:7px}
.dt__tg span{font-size:12.5px;font-weight:800;border:var(--bd);border-radius:999px;padding:4px 12px;
 background:#F2F5EA}
.dt__main{margin-top:26px;border:var(--bd);border-radius:18px;overflow:hidden}
.dt__main img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.dtd{display:grid;gap:0;margin-top:28px;border:var(--bd);border-radius:16px;overflow:hidden;background:#fff}
.dtd dl{display:grid;grid-template-columns:104px 1fr;gap:0;border-bottom:1.5px solid #E4DDCE}
.dtd dl:last-child{border-bottom:none}
.dtd dt{padding:13px 14px;background:var(--tint);font-size:13.5px;font-weight:800;
 border-right:1.5px solid #E4DDCE}
.dtd dd{padding:13px 16px;margin:0;font-size:14.5px;line-height:1.8;font-weight:700}

.dtb{display:grid;gap:30px;margin-top:34px}
.dtb__c h3{font-size:19px;font-weight:800;line-height:1.5;letter-spacing:-.02em;
 padding-left:14px;border-left:6px solid var(--red)}
.dtb__c p{font-size:15.5px;line-height:2.05;color:var(--sub);margin-top:12px}
/* インタビュー本文（お客様の声）は1カラムの読みもの */
.dtb--read{grid-template-columns:1fr;gap:12px;max-width:44em}
/* インタビューのもくじ（PCだけ、左に置いて追従させる） */
.dtw{margin-top:30px}
.dtx{display:none}
.dtb--read{margin-top:0}
.dtb--read .dtb__c:has(h3){margin-top:22px}
.dtb--read .dtb__c:first-child{margin-top:0}
.dtb--read .dtb__ph{margin-top:10px}

.dtg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
.dtg figure{margin:0;border:var(--bd);border-radius:14px;overflow:hidden;background:#fff}
.dtg img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.dtg figcaption{display:block;padding:9px 11px 11px;font-size:12.5px;line-height:1.65;
 font-weight:700;color:var(--sub)}
.dtg figure:first-child:nth-last-child(n+4){grid-column:span 2}
.dtg figure:first-child:nth-last-child(n+4) img{aspect-ratio:16/9}
.dtg:has(figure:only-child){grid-template-columns:minmax(0,1fr);max-width:640px;
 margin-left:auto;margin-right:auto}
.dtg figure:only-child img{aspect-ratio:16/10}

.dtn{display:grid;gap:10px;margin-top:34px}
.dtn a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff;
 border:var(--bd);border-radius:14px;padding:15px 18px;transition:background .18s}
.dtn a:hover{background:var(--butter)}
.dtn b{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--sub)}
.dtn span{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-top:5px;line-height:1.45}
.dtn i{font-style:normal;font-size:19px;font-weight:800}

/* お客様の声の詳細 */
.vq{display:grid;gap:16px;margin-top:30px}
.vq__c{background:#fff;border:var(--bd);border-radius:18px;padding:20px 20px 22px}
.vq__q{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;
 font-size:17px;font-weight:800;line-height:1.6;letter-spacing:-.02em}
.vq__q:before{content:"Q";display:flex;align-items:center;justify-content:center;width:30px;height:30px;
 border-radius:50%;background:var(--ink);color:#fff;font-size:15px}
.vq__a{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;margin-top:13px;
 font-size:15.5px;line-height:2.05;color:var(--sub)}
.vq__a:before{content:"A";display:flex;align-items:center;justify-content:center;width:30px;height:30px;
 border-radius:50%;background:var(--red);color:#fff;font-size:15px;font-weight:800;flex:0 0 30px}

@media(min-width:900px){
 .dt{padding:138px 0 70px}
 .dt__hd{gap:18px}
 .dt__h{font-size:clamp(32px,3.2vw,44px)}
 .dt__l{font-size:16.5px}
 .dt__main{margin-top:34px;border-radius:24px}
 .dtd{grid-template-columns:repeat(2,1fr);margin-top:36px}
 .dtd dl{border-bottom:1.5px solid #E4DDCE;grid-template-columns:128px 1fr}
 .dtd dl:nth-child(odd){border-right:1.5px solid #E4DDCE}
 /* 行数が奇数のときは、最後の1行だけ右まで貫通させる */
 .dtd dl:last-child:nth-child(odd){grid-column:1/-1;border-right:none}
 .dtd dl:last-child{border-bottom:none}
 .dtd dl:nth-last-child(2):nth-child(odd){border-bottom:none}
 .dtd dt{padding:16px 18px;font-size:14px}
 .dtd dd{padding:16px 20px;font-size:15.5px}
 .dtb{gap:40px;margin-top:46px;grid-template-columns:repeat(2,1fr)}
 .dtb--read{grid-template-columns:1fr;gap:14px}
 .dtw{margin-top:40px;display:grid;grid-template-columns:1fr;gap:0}
 .dtw:has(.dtx){grid-template-columns:252px minmax(0,1fr);gap:0 56px;align-items:start}
 .dtx{display:block;position:sticky;top:104px}
 .dtx__t{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--sub);
  margin:0 0 14px;padding-bottom:10px;border-bottom:var(--bd)}
 .dtx__l{list-style:none;counter-reset:dtx;margin:0;padding:0;display:grid;gap:13px}
 .dtx__l li{counter-increment:dtx;position:relative;padding-left:26px}
 .dtx__l li:before{content:counter(dtx,decimal-leading-zero);position:absolute;left:0;top:.25em;
  font-size:11.5px;font-weight:800;color:var(--red);letter-spacing:.04em}
 .dtx__l a{display:block;font-size:14px;font-weight:700;line-height:1.72;color:var(--sub);
  word-break:auto-phrase;text-wrap:pretty;transition:color .18s}
 .dtx__l a:hover{color:var(--ink)}
 .dtb--read h3{scroll-margin-top:110px}
 .dtb--read .dtb__c:has(h3){margin-top:34px}
 .dtb--read .dtb__ph{margin-top:14px}
 .dtb__c h3{font-size:21px}
 .dtb__c p{font-size:16px}
 .dtg{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
 .dtg figure:first-child:nth-last-child(n+4){grid-column:span 3}
 .dtg figure:first-child:nth-last-child(n+4) img{aspect-ratio:21/9}
 .dtg:has(figure:only-child){max-width:760px}
 .dtg figure:nth-child(1):nth-last-child(2),.dtg figure:nth-child(2):nth-last-child(1){
  grid-column:span 1}
 .dtg:has(figure:nth-child(2):nth-last-child(1)){grid-template-columns:repeat(2,1fr);
  max-width:900px;margin-left:auto;margin-right:auto}
 .dtg figcaption{padding:11px 14px 13px;font-size:13.5px}
 .dtn{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
 .dtn a{padding:19px 22px}
 .vq{gap:20px;margin-top:40px;grid-template-columns:repeat(2,1fr)}
 .vq__c{padding:26px 28px 28px}
 .vq__q{font-size:18px}
 .vq__a{font-size:16px}
}

/* ---------- お客様の声：担当コメント ---------- */
.vcm{background:#fff;border:var(--bd);border-radius:20px;box-shadow:var(--sh);
 padding:22px 20px 24px;max-width:860px;margin:0 auto}
.vcm__lb{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;
 background:var(--gold);border:var(--bd);border-radius:999px;padding:4px 14px}
.vcm__t{font-size:15px;line-height:2;margin-top:13px;text-wrap:pretty}
@media(min-width:900px){
 .vcm{padding:30px 34px 34px}
 .vcm__t{font-size:16px;margin-top:16px}
}
.dtb__ph{margin:18px 0 0;border:var(--bd);border-radius:18px;overflow:hidden}
.dtb__ph img{width:100%;height:auto;display:block}
@media(min-width:900px){.dtb__ph{margin-top:24px;border-radius:22px}}

/* 施工事例の読みもの（長文の説明） */
.dts{display:grid;gap:34px;margin-top:28px}
.dts__c{background:#fff;border:var(--bd);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.dts__ph{border-bottom:var(--bd)}
.dts__ph img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.dts__bd{padding:22px 20px 24px}
.dts__h{font-size:18px;font-weight:800;line-height:1.52;letter-spacing:-.02em;
 word-break:auto-phrase;text-wrap:balance;padding-bottom:10px;
 border-bottom:3px solid var(--gold);display:inline-block;margin:0 0 4px}
.dts__h+.dts__p{margin-top:12px}
.dts__p{font-size:15.5px;line-height:2.05;color:var(--sub);margin:14px 0 0;text-wrap:pretty}
.dts__p:first-child{margin-top:0}
.dts__c+.dts__c .dts__h{margin-top:0}
@media(min-width:900px){
 .dts{gap:44px;margin-top:34px}
 .dts__c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  align-items:stretch;min-height:330px}
 .dts__ph{position:relative;border-bottom:none;border-right:var(--bd)}
 .dts__ph img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
 .dts__c:only-child,.dts__c:not(:has(.dts__ph)){grid-template-columns:1fr}
 .dts__bd{padding:34px 36px 36px;align-self:center}
 .dts__h{font-size:20px}
 .dts__p{font-size:16px}
}