@charset "UTF-8";
/* ============================================================
   works.css — 施工実績（一覧・詳細）
   担当スレッド：白系：施工実績・コラムの調整
   読み込み：施工実績の詳細、page-works-a / page-works-b、施工実績の検索結果
   2026-09-29 追加CSSから中身を変えずに移設（白系：基盤）。
   色の直書き（#9c5638 等）の変数化は、施工実績のスレッドで行う。
   ============================================================ */

/* ===== 詳細・一覧：SWELLの上部タイトルヘッダーを隠す ===== */
.single-works #top_title_area,
.single-works .l-topTitleArea{ display:none !important; }
/* パンくず〜タイトル間の余白を詰める */
.single-works #content{ padding-top:0 !important; margin-top:0 !important; }
.single-works .works-detail .wd-wrap{ padding-top:1.2rem !important; }
/* 施工実績 一覧・検索結果：SWELLの上部タイトルヘッダーを隠す */
.tb-works-list #top_title_area,
.tb-works-list .l-topTitleArea{ display:none !important; }


/* ===== 施工実績 検索フォーム（1行：キーワード20%＋5項目8rem＋竣工年8rem×2） ===== */
html body #body_wrap .vk-filter-search{
  display:flex !important; flex-wrap:nowrap; align-items:flex-end !important;
  gap:1.2rem .8rem !important; max-width:1680px !important; margin:0 auto 1rem !important;
  padding-left:0 !important;
}
/* 各項目の外枠：VKのcol幅を打ち消す */
html body #body_wrap .vk-filter-search .vkfs__outer-wrap{
  width:auto !important; max-width:none !important; min-width:0 !important;
  flex:0 0 auto !important; margin:0 !important; padding:0 !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
}
/* ラベル：段差解消＋nowrap解除（横伸び防止） */
html body #body_wrap .vk-filter-search .vkfs__label-name{
  margin:0 0 .35rem !important; line-height:1.4 !important; min-height:1.2em !important;
  white-space:normal !important; display:block !important; width:100% !important;
}
/* キーワードのラッパー */
html body #body_wrap .vk-filter-search .vkfs__input-form{ width:100% !important; }
html body #body_wrap .vk-filter-search div.vkfs__input-form{ display:flex !important; }

/* 入力・セレクト本体の高さ 2rem */
html body #body_wrap .vk-filter-search input.vkfs__input-form,
html body #body_wrap .vk-filter-search select.vkfs__input-form,
html body #body_wrap .vk-filter-search div.vkfs__input-form > input,
html body #body_wrap #cy-year .cy-range select{
  height:2rem !important; min-height:2rem !important; max-height:2rem !important;
  width:100% !important; padding:.35rem .8rem !important; line-height:1.4 !important;
  font-size:.95rem !important; box-sizing:border-box !important; margin:0 !important;
}

/* 幅：キーワード＝20% */
html body #body_wrap .vk-filter-search .vkfs__keyword,
html body #body_wrap .vk-filter-search .vkfs__keyword[class*="col-"]{
  flex:0 0 20% !important; width:20% !important; max-width:20% !important;
}
/* 幅：用途〜レンガ色味＝各8rem */
html body #body_wrap .vk-filter-search .vkfs__taxonomy,
html body #body_wrap .vk-filter-search .vkfs__taxonomy[class*="col-"]{
  flex:0 0 8rem !important; width:8rem !important; min-width:0 !important; max-width:8rem !important;
}
/* 竣工年：1行に参加。開始・終了は各8rem、間は文字幅分あける */
html body #body_wrap #cy-year{
  flex:0 0 auto !important; max-width:none !important;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
}
html body #body_wrap #cy-year .cy-range{
  display:flex !important; align-items:center !important; gap:.8rem !important;
}
html body #body_wrap #cy-year .cy-range select{
  flex:0 0 8rem !important; width:8rem !important;
}

/* キーワード〜用途／主体構造〜レンガ形式 の間に1文字分の空きを追加 */
html body #body_wrap .vk-filter-search .vkfs__block-id--cc71d03d-1140-4990-a7d9-252eb07ea328{
  margin-right:1em !important;
}
html body #body_wrap .vk-filter-search .vkfs__block-id--2c2056f7-47b9-48b8-bc52-b9c4b3542dcf{
  margin-right:1em !important;
}

/* 検索ボタン非表示・投稿日非表示 */
html body #body_wrap .vkfs_submit{ display:none !important; }
html body #body_wrap .vk-filter-search .vkfs__date{ display:none !important; }
/* リセット */
html body #body_wrap .tb-reset{ max-width:1680px !important; margin:.4rem auto 2rem !important; text-align:right !important; }
html body #body_wrap .tb-reset a{ display:inline-block; line-height:1.6; font-size:.82rem; color:#9c5638; text-decoration:underline; }

/* スマホ：各項目を1列に */
@media(max-width:640px){
  html body #body_wrap .vk-filter-search .vkfs__keyword,
  html body #body_wrap .vk-filter-search .vkfs__taxonomy{ flex:1 1 100% !important; max-width:none !important; }
}

/* ===== 一覧：パンくず帯の反転解除＋距離調整（詳細ページに合わせる） ===== */
.tb-works-list .p-breadcrumb,
.tb-works-list .p-breadcrumb.-bg-on{ background:transparent !important; }
.tb-works-list #content{ margin-top:0 !important; padding-top:0 !important; }
.tb-works-list .tb-works-archive{ padding-top:1.2rem !important; }

/* 投稿日(VK Post Date)を隠す保険 */
html body #body_wrap .vk-filter-search .vkfs__date{ display:none !important; }


/* ===== 一覧の幅：標準幅（1000px）で本文エリアの中央に置く =====
   2026-09-30 白系：基盤。tb-works-display の width:100vw と左右の余白（4vw）を、
   base.css の標準幅 --w-std に置き換える。プラグイン側のCSSは変更しない */
html body #body_wrap .tb-works-archive{
  width:var(--w-std) !important;
  margin-left:calc(50% - var(--w-std) / 2) !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ===== 一覧のカード：4列（1ページ20枚）。写真の左右の間隔はファーストビューと同じく詰める =====
   左右 6px（ファーストビューの写真グリッドと同じ）／上下は物件名・情報の分を空ける */
html body #body_wrap .tb-works-archive .tb-grid{
  column-gap:6px !important;
  row-gap:2.2rem !important;
}

/* ===== 検索フォームの改行（幅が足りないときに段階的に折り返す） =====
   2026-09-30 白系：基盤。
   ・フォームの構造（VK Filter Search）：
       <form class="vk-filter-search">
         <div class="vkfs__labels"> キーワード・用途・主体構造・レンガ形式… </div>
         <div id="cy-year"> 竣工年（カスタムHTML） </div>
       </form>
     竣工年は .vkfs__labels の外にあるので、フォーム側で「検索項目のかたまり」と竣工年を並べ、
     検索項目の中の改行は .vkfs__labels 側で行う。
   ・どの段階にするかは assets/js/works-form.js が決める。実際に並べてみて、
     決めた行がそれぞれ1行に収まる最初の段階を選び、フォームに data-tb-stage を付ける。
     data-tb-form="1"（①キーワード欄なし）/ "2"（②キーワード欄あり）も同じJSが付ける。

   ① 施工実績  0：すべて1行 / 1：竣工年だけ次の行へ /
               2：用途・主体構造 ／ レンガ形式・レンガ色味 ／ 竣工年 / 3：すべてバラバラ
   ② 施工実績Archi  0：すべて1行 / 1：竣工年だけ次の行へ /
               2：キーワード・用途・主体構造 ／ レンガ形式・レンガ工法・レンガ色味 ／ 竣工年 /
               3：キーワード ／ 用途・主体構造 ／ レンガ形式・レンガ工法 ／ レンガ色味 ／ 竣工年 /
               4：すべてバラバラ
*/

/* フォーム：検索項目のかたまりと竣工年を、左から詰めて並べる */
html body #body_wrap .tb-works-archive .vk-filter-search{
  flex-wrap:wrap !important; justify-content:flex-start !important;
}
html body #body_wrap .tb-works-archive .vk-filter-search > .vkfs__labels{
  flex:0 1 auto !important; min-width:0 !important; max-width:100% !important;
  display:flex !important; flex-wrap:wrap !important;
  row-gap:.6rem; column-gap:0;
}
html body #body_wrap .tb-works-archive .vk-filter-search > #cy-year{ margin-left:0 !important; }

/* 検索項目の並び順を固定する。改行用の見えない区切りを2つ用意：
   ::before＝主体構造の後 / ::after＝レンガ工法の後 */
html body #body_wrap .tb-works-archive .vkfs__labels > *{ order:10; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__keyword{ order:1; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_use){ order:2; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_structure){ order:3; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_form){ order:5; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_brick){ order:5; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_method){ order:6; }
html body #body_wrap .tb-works-archive .vkfs__labels > .vkfs__taxonomy:has(.vkfs__input-wrap--work_color){ order:8; }
html body #body_wrap .tb-works-archive .vkfs__labels::before,
html body #body_wrap .tb-works-archive .vkfs__labels::after{
  content:""; display:none;
  flex:0 0 100%; height:0; margin-top:-.6rem; /* 区切りの行で余白が二重にならないように */
}
html body #body_wrap .tb-works-archive .vkfs__labels::before{ order:4; }
html body #body_wrap .tb-works-archive .vkfs__labels::after{ order:7; }

/* 段階1以降：竣工年を単独の行に（検索項目のかたまりは行いっぱいを使う） */
html body #body_wrap .tb-works-archive .vk-filter-search[data-tb-stage]:not([data-tb-stage="0"]) > #cy-year{
  flex:0 0 100% !important;
}
html body #body_wrap .tb-works-archive .vk-filter-search[data-tb-stage]:not([data-tb-stage="0"]) > .vkfs__labels{
  flex:0 0 100% !important;
}
/* 主体構造の後で改行する段階 */
html body #body_wrap .vk-filter-search[data-tb-form="1"][data-tb-stage="2"] .vkfs__labels::before,
html body #body_wrap .vk-filter-search[data-tb-form="2"]:is([data-tb-stage="2"],[data-tb-stage="3"]) .vkfs__labels::before{
  display:block;
}
/* ②段階3：キーワードを単独の行に、レンガ工法の後でも改行 */
html body #body_wrap .vk-filter-search[data-tb-form="2"][data-tb-stage="3"] .vkfs__labels > .vkfs__keyword{
  flex:0 0 100% !important; width:100% !important; max-width:100% !important; margin-right:0 !important;
}
html body #body_wrap .vk-filter-search[data-tb-form="2"][data-tb-stage="3"] .vkfs__labels::after{ display:block; }
/* すべてバラバラ（1項目1行） */
html body #body_wrap .vk-filter-search[data-tb-form="1"][data-tb-stage="3"] .vkfs__labels,
html body #body_wrap .vk-filter-search[data-tb-form="2"][data-tb-stage="4"] .vkfs__labels{
  flex-direction:column !important; align-items:flex-start !important;
}