/* ==================================================
  修理事例一覧 /cases/（2026-09-10・ct #35 置き場C）
  クラスは cs- プレフィックス。カードの見た目はトップの修理実績（top-lp.css .lp-cases__*）と揃える。
  craftsman.css の .craftsman-wrap / .inner-wrap / .c-ttl01 を土台にしているので px で指定する。
================================================== */
.cs-page { background: #faf8f4; }
.cs-page .c-ttl01 h1 small.cs-total { font-size: 14px; font-weight: 700; color: #8a7a5f; margin-left: 10px; }
.cs-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #6b6155; max-width: 40em; }

/* ---------- 絞り込み ---------- */
.cs-filters { border-top: 1px solid #e6e1d8; border-bottom: 1px solid #e6e1d8; padding: 6px 0; }
.cs-frow { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.cs-frow + .cs-frow { border-top: 1px dashed #e6e1d8; }
.cs-frow__lab { flex: 0 0 52px; font-size: 11px; font-weight: 700; color: #8a7a5f; letter-spacing: .04em; padding: 6px 0; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.cs-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid #e6e1d8; background: #ffffff; color: #3a3126;
    border-radius: 999px; padding: 4px 10px; font-size: 12px; line-height: 1.4;
    text-decoration: none;
}
.cs-chip b { font-weight: 500; color: #a2957e; font-size: 10px; }
.cs-chip.is-on { background: #3a3126; border-color: #3a3126; color: #ffffff; }
.cs-chip.is-on b { color: #d8cfbe; }
.cs-chip.is-zero { opacity: .45; }
.cs-chip:hover { border-color: #b8ab92; }
.cs-chip:focus-visible { outline: 2px solid #005dc5; outline-offset: 2px; }
/* reset.css の img{width:100%;display:block} を打ち消す */
.cs-chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: inline-block; }
.cs-fstat { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 6px 0 0; font-size: 12px; color: #8a7a5f; }
.cs-fstat a { color: #005dc5; }

/* ---------- グリッド ---------- */
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0 8px; }
@media (min-width: 600px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.cs-empty { grid-column: 1 / -1; text-align: center; color: #8a7a5f; padding: 40px 0; font-size: 13px; }
.cs-card {
    background: #ffffff; border: 1px solid #f0e9dd; border-radius: 9px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(40,30,10,0.08); display: flex; flex-direction: column;
}
.cs-card__media { position: relative; display: block; width: 100%; padding: 0; border: none; background: #eeeae3; cursor: zoom-in; }
.cs-card__media > img { width: 100%; height: 124px; object-fit: cover; display: block; }
@media (min-width: 600px) { .cs-card__media > img { height: 170px; } }
.cs-card__media:focus-visible { outline: 3px solid #005dc5; outline-offset: -3px; }
.cs-card__thumb {
    position: absolute; left: 6px; bottom: 6px; width: 46px; height: 46px;
    border: 2px solid #ffffff; border-radius: 3px; overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4); background: #000000;
}
@media (min-width: 600px) { .cs-card__thumb { width: 52px; height: 52px; } }
.cs-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card__thumb em {
    position: absolute; left: 0; right: 0; bottom: 0; font-style: normal;
    font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-align: center;
    color: #ffffff; background: rgba(0,0,0,0.62); padding: 1px 0; line-height: 1.3;
}
.cs-card__zoom {
    position: absolute; right: 5px; bottom: 5px; width: 19px; height: 19px; border-radius: 4px;
    background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
}
.cs-card__zoom svg { width: 10px; height: 10px; }
.cs-card__body { padding: 6px 9px 9px; }
.cs-card__body p { margin: 0; line-height: 1.4; }
.cs-card__price { font-weight: 900; font-size: 15px; color: #b3401f; font-variant-numeric: tabular-nums; }
.cs-card__work, .cs-card__days { font-size: 11px; color: #8a7a5f; }
.cs-card__brand { font-size: 12px; font-weight: 700; color: #3a3126; }
.cs-card__worker { font-size: 11px; color: #a2957e; }
.cs-card__worker a { color: #6b5a3a; text-decoration: underline; text-underline-offset: 2px; }
.cs-card__face { display: inline-block; width: 17px; height: 17px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 3px; }
.cs-card__vbadge { display: flex; align-items: center; gap: 4px; margin-top: 3px !important; font-size: 10.5px; font-weight: 700; color: #8a7757; }
.cs-card__vstar { height: 11px; width: auto; flex: 0 0 auto; display: block; }
.cs-card__spec[hidden] { display: none; }
.cs-note { text-align: center; font-size: 11px; color: #a2957e; margin: 0 0 8px; line-height: 1.5; }

/* ---------- CTA（view/common/cta-why-box.php を流用。上の余白だけここで持つ） ---------- */
.cs-ctawrap { padding: 0 0 32px; }
.cs-ctawrap .lcg-why { margin-top: 8px; }

/* ---------- 拡大表示 ---------- */
.cs-lightbox { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cs-lightbox[hidden] { display: none; }
.cs-lightbox__close { position: absolute; top: 6px; right: 12px; background: none; border: none; color: #ffffff; font-size: 36px; line-height: 1; cursor: pointer; z-index: 1; }
.cs-lightbox__box { max-width: 960px; width: 100%; max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.cs-lightbox__pair { display: flex; gap: 10px; align-items: center; justify-content: center; }
.cs-lightbox__fig { position: relative; margin: 0; flex: 1 1 0; display: flex; justify-content: center; }
.cs-lightbox__fig[hidden] { display: none; }
/* reset.css の img{width:100%} を打ち消す。両軸とも auto＋max で収める（top-lp.css の拡大表示と同じ） */
.cs-lightbox__fig img { width: auto; height: auto; max-width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.cs-lightbox__cap {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px;
    padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: #ffffff; background: rgba(0,0,0,0.7); border-radius: 3px;
}
.cs-lightbox__cap--after { background: rgba(179,64,31,0.9); }
.cs-lightbox__spec {
    margin: 0; background: #ffffff; border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.6;
    display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; color: #3a3126;
}
.cs-lightbox__spec dt { color: #8a7a5f; font-weight: 700; white-space: nowrap; }
.cs-lightbox__spec dd { margin: 0; }
.cs-lightbox__spec small { color: #8a7a5f; font-size: 11.5px; }
.cs-lightbox__spec a { color: #005dc5; }
.cs-spec__price { color: #b3401f; font-weight: 900; font-size: 15px; }
@media (max-width: 599.98px) {
    .cs-lightbox__pair { flex-direction: column; gap: 8px; }
    .cs-lightbox__fig img { max-height: 34vh; }
}
body.cs-lightbox-open { overflow: hidden; }