/* ISC r11 トップ「実際の工事から」の章だけ（index.html だけが読む。すべて body.page-top #cases に限定）2026-11-03 NEXT05C
   写真を証拠で終わらせず、章の主役にする：主役のキッチン（3689・大）と補助の浴室（3703・中）を、大小と静かな余白と短い言葉で一つの誌面に。
   PC＝非対称の 12 列（大きい写真の横に言葉／言葉の横に中くらいの写真）。SP＝縮小ではなく 写真 → 短い言葉 → 次の写真 のリズム（主役は端まで、補助は少し小さく右寄せ）。
   3617 は写真を大きくせず、罫線の間の静かな文字の導線。写真は元のまま（補正・暗幕・動きなし）。表示の比率は元の比率（4:3・3:2）で切らない */
body.page-top #cases .spread{display:grid;row-gap:76px;margin-top:4px}
body.page-top #cases .sp-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;align-items:end;margin:0}
body.page-top #cases .sp-photo{display:block;border-radius:18px;overflow:hidden;background:var(--line)}
body.page-top #cases .sp-photo img{width:100%;height:auto;object-fit:cover;object-position:50% 50%;display:block}
body.page-top #cases .sp-main .sp-photo{grid-column:1 / span 8;grid-row:1}
body.page-top #cases .sp-main .sp-photo img{aspect-ratio:4/3}
body.page-top #cases .sp-main .sp-text{grid-column:9 / span 4;grid-row:1;align-self:end;padding-bottom:4px}
body.page-top #cases .sp-sub .sp-photo{grid-column:5 / span 7;grid-row:1}
body.page-top #cases .sp-sub .sp-photo img{aspect-ratio:3/2}
body.page-top #cases .sp-sub .sp-text{grid-column:1 / span 4;grid-row:1;align-self:center}
/* r11.1：写真の下の説明（sp-cap）は本文から外した（alt と台帳で保持）。写真と短い言葉だけで見せる */
body.page-top #cases .sp-text .meta{font-size:13.5px;color:var(--wood);font-weight:700;letter-spacing:.04em;line-height:1.6;margin:0 0 10px}
body.page-top #cases .sp-text h3{font-size:26px;line-height:1.45;color:var(--green-d);margin:0 0 12px}
body.page-top #cases .sp-sub .sp-text h3{font-size:22px}
body.page-top #cases .sp-line{font-size:15.5px;line-height:1.85;color:var(--ink);margin:0 0 16px}
body.page-top #cases .sp-text .link{font-size:15px}
body.page-top #cases .spread-story{margin:84px 0 0;padding:28px 0 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto;column-gap:28px;align-items:baseline}
body.page-top #cases .spread-story .eyebrow{grid-column:1 / -1;margin:0 0 8px}
body.page-top #cases .spread-story h3{font-size:20px;line-height:1.5;margin:0}
body.page-top #cases .spread-story h3 a{color:var(--green-d);text-decoration:none}
body.page-top #cases .spread-story p{font-size:15px;color:var(--ink2);line-height:1.8;margin:0}
body.page-top #cases .spread-story .link{white-space:nowrap;font-size:15px}
body.page-top #cases .more-cases{margin-top:28px}
@media (max-width:980px){
 body.page-top #cases .spread{row-gap:60px}
 body.page-top #cases .sp-item{grid-template-columns:minmax(0,1fr)}
 body.page-top #cases .sp-item>*{grid-column:1 !important;grid-row:auto !important}
 body.page-top #cases .sp-sub .sp-photo{width:82%;justify-self:end}
 body.page-top #cases .sp-text{margin-top:18px;align-self:start !important}
 body.page-top #cases .spread-story{grid-template-columns:minmax(0,1fr);row-gap:10px;margin-top:64px}
}
@media (max-width:640px){
 body.page-top #cases .spread{row-gap:52px}
 body.page-top #cases .sp-main .sp-photo{margin:0 -16px;border-radius:0}
 body.page-top #cases .sp-sub .sp-photo{width:88%}
 body.page-top #cases .sp-sub .sp-photo{border-radius:14px}
 body.page-top #cases .sp-text h3{font-size:22px}
 body.page-top #cases .sp-sub .sp-text h3{font-size:20px}
 body.page-top #cases .sp-line{font-size:15px}
 body.page-top #cases .spread-story{margin-top:52px;padding:22px 0}
}