/* ISC r14 施工事例の一覧（cases.html だけが読む。すべて body.page-cases に限定）2026-11-03 CASE03
   主役 2 件（3689 キッチン・3703 浴室）を写真の大小と左右で見せ、ほかの 3 件は小さく。これは選んだ 5 件で、全件は既存の一覧（/gallery/）へ。
   絞り込みはこの 5 件の中だけ（JS 無効では全部表示・ボタンを出さない） */
body.page-cases main h1,body.page-cases main h2,body.page-cases main h3{text-wrap:balance;word-break:keep-all}  /* GPT 限定仕上げ①：SP390 で「近／い」と語の途中で割れたため、「、」の位置で折り返す（長すぎる時は body の折返しの指定で折り返す） */
body.page-cases .cl-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:8px;padding:16px 0 0;border-top:1px solid var(--line)}
body.page-cases .cl-note p{margin:0;font-size:15px;line-height:1.85;color:var(--ink2);max-width:640px}
body.page-cases .cl-filter{display:none}
html.js body.page-cases .cl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px auto 0}
body.page-cases .cl-filter small{width:100%;font-size:13.5px;color:var(--ink2)}
body.page-cases .cl-filter button{font:inherit;font-size:14.5px;min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
body.page-cases .cl-filter button[aria-pressed="true"]{background:var(--green-d);border-color:var(--green-d);color:#fff}
body.page-cases .cl-featured{display:grid;gap:64px;margin-top:40px}
body.page-cases .cl-big{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:center}
body.page-cases .cl-big.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
body.page-cases .cl-big.rev .cl-photo{order:2}
body.page-cases .cl-photo{display:block}
body.page-cases .cl-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;display:block}
body.page-cases .cl-big .meta{font-size:13.5px;color:var(--wood);letter-spacing:.06em;margin:0 0 10px;word-break:keep-all}  /* 初回の PC 画面で「ラン／ドリースペース」と割れたため、「・」「｜」の位置で折り返す */
body.page-cases .cl-item .meta{word-break:keep-all}
body.page-cases .cl-big h2{font-size:27px;line-height:1.5;margin:0 0 12px;text-wrap:balance;word-break:keep-all}
body.page-cases .cl-big h2 a{text-decoration:none;color:inherit}
body.page-cases .cl-big p{font-size:16px;line-height:1.9;margin:0 0 16px}
body.page-cases .cl-more{margin-top:80px}
body.page-cases .cl-more h2{font-size:22px;margin:0 0 22px}
body.page-cases .cl-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
body.page-cases .cl-item{display:block;text-decoration:none;color:inherit}
body.page-cases .cl-item img{width:100%;height:auto;object-fit:cover;border-radius:12px;display:block}
body.page-cases .cl-item.read img{aspect-ratio:16/9}
body.page-cases .cl-item.tall img{aspect-ratio:4/5}
body.page-cases .cl-item.small img{aspect-ratio:4/3}
body.page-cases .cl-item .meta{font-size:12.5px;color:var(--wood);margin:12px 0 6px;letter-spacing:.04em}
body.page-cases .cl-item h3{font-size:17px;line-height:1.55;margin:0 0 8px;text-wrap:balance;word-break:keep-all}
body.page-cases .cl-item p{font-size:14.5px;line-height:1.8;margin:0 0 8px;color:var(--ink2)}
body.page-cases [data-case-id][hidden]{display:none}
body.page-cases .cl-all{margin:72px auto 0;padding:28px 0 104px;border-top:1px solid var(--line);text-align:center}  /* GPT 限定仕上げ②：末尾のボタンの下辺が緑のフッターに接していたため、フッターとの間に余白（フッター本体は変えない） */
body.page-cases .cl-all p{font-size:15px;line-height:1.9;color:var(--ink2);margin:0 0 16px}
@media (max-width:980px){
 body.page-cases .cl-big,body.page-cases .cl-big.rev{grid-template-columns:1fr;gap:20px}
 body.page-cases .cl-big.rev .cl-photo{order:0}
 body.page-cases .cl-grid{grid-template-columns:1fr 1fr}
 body.page-cases .cl-item.read{grid-column:1 / -1}
}
@media (max-width:640px){
 body.page-cases .cl-featured{gap:48px;margin-top:30px}
 body.page-cases .cl-photo{margin:0 -16px}
 body.page-cases .cl-photo img{border-radius:0}
 body.page-cases .cl-big h2{font-size:22px}
 body.page-cases .cl-more{margin-top:56px}
 body.page-cases .cl-grid{grid-template-columns:1fr;gap:28px}
 body.page-cases .cl-item.tall img{aspect-ratio:4/5;max-width:300px}
 body.page-cases .cl-all{margin-top:56px;padding-bottom:72px}
 body.page-cases .page-head h1{font-size:26px}  /* GPT 限定仕上げ①：1 行目「あなたの暮らしに近い、」（11 文字）が SP360 の幅（328px）に収まる大きさ。PC はそのまま */
}