/* ===== 工務店・設計事務所を探す（ページ固有） ===== */

    /* エリア絞り込みポップアップ */
    .area-popup {
      margin: 0 auto 40px; max-width: 900px;
      background: #fff; border: 1px solid var(--line);
      box-shadow: 0 18px 44px rgba(60,50,40,.10);
      padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(28px, 3vw, 44px);
      position: relative;
    }
    .area-popup[hidden] { display: none; }
    .area-popup__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
    .area-popup__title { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
    .area-popup__close {
      display: grid; place-items: center; width: 34px; height: 34px; flex: none;
      border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft);
      transition: border-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform .3s var(--ease-out);
    }
    .area-popup__close:hover { border-color: var(--brown); color: var(--brown); transform: rotate(90deg); }
    .area-popup__close svg { width: 16px; height: 16px; }
    .area-popup .area-row:first-child { border-top: 1px solid var(--line); }

    /* 工務店カード */
    .klist { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); }
    .kcard {
      display: grid; grid-template-columns: clamp(300px, 40%, 440px) 1fr;
      gap: clamp(24px, 3vw, 48px); align-items: start;
      background: #fff; border: 1px solid var(--line);
      padding: clamp(20px, 2.4vw, 32px);
      box-shadow: 0 10px 26px rgba(60,50,40,.05);
      transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    }
    .kcard:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(60,50,40,.12); }

    .kcard__gallery { display: grid; grid-template-rows: auto auto; gap: 10px; }
    .kcard__main { overflow: hidden; aspect-ratio: 4 / 3; }
    .kcard__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
    .kcard:hover .kcard__main img { transform: scale(1.045); }
    .kcard__subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .kcard__sub { overflow: hidden; aspect-ratio: 1 / 1; }
    .kcard__sub img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
    .kcard:hover .kcard__sub img { transform: scale(1.05); }

    .kcard__body { padding-top: 4px; }
    .kcard__name { font-size: clamp(18px, 1.9vw, 23px); font-weight: 700; line-height: 1.5; color: var(--ink); }
    .kcard__catch { margin-top: 14px; font-size: 13.5px; line-height: 2; color: var(--ink-soft); }
    .kcard__info { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
    .kcard__row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-soft); }
    .kcard__row svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brown); }
    .kcard__row-label { flex: none; color: var(--ink); font-weight: 600; }
    .kcard__btn { margin-top: 24px; }

    @media (max-width: 768px) {
      .kcard { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
      .kcard__name { font-size: 19px; }
    }
    @media (max-width: 480px) {
      .area-popup { padding: 22px 16px 26px; }
      .kcard__subs { gap: 8px; }
      .kcard__btn .btn-brown { width: 100%; justify-content: center; }
    }