/**
 * works 一覧（archive-works.php／taxonomy-works_cat.php／taxonomy-works_family.php／
 * taxonomy-works_theme.php）共通CSS
 *
 * 出典: design/pages/works.html の2つの<style>ブロック（#page-scoped 269行＋無名19行）を結合・移植
 * （docs/29_template-map.md §2-2 F分類）。内容は無変更（文言・コメント含め保持）。
 *
 * 申し送り: 2番目のブロック（.nowrap／.sub-nav SP中央寄せ）は works／interview／interview-detail
 * の3ページで同一コピーが重複しており、docs/29 §2-1 は design-system.css への昇格候補としている。
 * 本ラウンドでは共有CSSの変更（docs/22 R09の慎重な取り扱いが必要）を避け、各ページ側にF分類の
 * まま置く。昇格は影響範囲（3ページ）を明示したうえで別ラウンドの判断とする。
 *
 * 2026-09-07 wp-engineer 移植（P4-2 第2陣）。
 */

/* ===== ブロック1/2: #page-scoped（旧works.html #17-284） ===== */
/* ==========================================================
   works一覧 専用（カテゴリタブ／タグ絞り込み／事例カード）
   ========================================================== */
/* [20260821h] interview.html と同一構成化に伴い、旧ヒーロー（画像なし・h1直開始）用の
   .page-hero__sub / .page-hero .c1-label の指定を撤去。キャッチは .hero-intro__catch へ移設した。 */

/* ============================================================================
   [20260821h] 級数を **home.html 基準** に統一（ディレクター指示 2026-08-21）
   ----------------------------------------------------------------------------
   指示: 「home.html が基準。works.html の見出しサイズ・本文サイズを home に揃える。
          他ページは後から統一していく。」
   home.html は c1-theme.css を読み込まない自己完結ページ（Figma正）で、共有トークン
   （tokens.css）の値で組まれている。works.html は c1-theme.css の B確定トークン
   （--c1-fs-* / clamp系）で組まれているため、その3点を home の値へ引き戻す。

   ┌ 項目 ─────┬ home（基準）─────────────────┬ works（変更前）──────────────┐
   │ 赤英字     │ SP 14px / 768以上 16px       │ clamp(16px,1.5vw,20px)=最大20 │
   │            │ w500・ls SP.2em→PC.22em      │ w500・ls .22em（SPのみ.2em）  │
   │ 黒和文見出し│ SP 28px / PC 32px・w400      │ clamp(26px,2.8vw,40px)・w500  │
   │            │ ls --ls-h2(1.68px)・lh1.31   │ ls .04em・lh1.31              │
   │ 本文       │ 15px・lh 2.05・ls 0.96px     │ clamp(15,1.35vw,19)・lh1.95   │
   │            │ (--fs-body/--lh-body/--ls-body)│ ls --ls-1(0.6px)            │
   └───────────┴─────────────────────────────┴──────────────────────────────┘
   ※共有CSS（design-system.css / c1-theme.css）は無改変＝?vバンプなし・他ページ影響なし。
   ※対象外: .consult__* ＝共有CTAブロックで home と既に同値（clamp(24,3vw,32) / 15px）。
             .card__title / .card__copy / .cat-tabs__link ＝項目レベルの文字（home に対応要素なし）。
   ============================================================================ */
/* ① 赤英字ラベル（WORKS ほか） */
.c1 .c1-label__en{ font-size:14px; letter-spacing:.2em; }
@media(min-width:768px){
  .c1 .c1-label__en{ font-size:16px; letter-spacing:.22em; }
}
/* ② 黒の和文見出し（「一邸ごとの、対話と実現の記録。」ほか） */
.c1 .hero-intro__catch,
.c1 .section__title{
  font-size:var(--fs-h2-sm);
  font-weight:500;   /* [20260821ae] 400→500 */
  letter-spacing:var(--ls-h2);
  line-height:var(--lh-h2);
}
@media(min-width:768px){
  .c1 .hero-intro__catch,
  .c1 .section__title{ font-size:var(--fs-h2); }
}
/* ③ 本文リード */
.c1 .hero-intro__lead,
.c1 .section__lead{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
}
/* ④ 見出しと本文のあいだの罫線＝home.html と同値（2026-08-21 ディレクター確認で不足が判明）。
   home の実測値: 40×1px / 背景 var(--c-line-hair)=#aaa / 上マージン calc(28px - .23em)=20.64px@32px
                  / 見出しの下マージン 28px。
   .23em ＝ 和文見出しのインク下端〜ボックス下端の実測値（canvas実測）。これを引くことで
   「見出しと本文のちょうど真ん中よりわずかに上」＝2026-08-21にディレクター確認済みの位置になる。
   ※works.html は c1-theme.css を読み込むため --home-* 変数が無い。home と同じ計算式を直接書く。 */
/* [20260821ag] ディレクター指示「home.html 以外のページのタイトル下罫線は削除」。
   20260821h〜ad で入れた見出し下の罫線（40×1px）を撤去した。
   見出し下のマージン28pxは、統一済みの余白としてそのまま維持する。 */
.c1 .hero-intro__catch{ margin-bottom:28px; }

/* ---- [20260821h-3] ヒーロー画像帯の見せ方 ─ works.html 限定 -------------------------
   ● 帯の領域は **interview.html と完全に同一**（確定形 §8-b の min-height / padding / flex中央寄せ）。
     他ページとの統一感が目的であり、帯のサイズは変えない（2026-08-21 ディレクター明示）。
     ※h-2 で試した aspect-ratio 固定（画像を一切切らない＝1440幅で816px）は**撤回**した。
   ● その固定サイズの中で、残る3条件をトリミング位置だけで最適化する:
       ａ. 横幅はできる限り切り取らない  ｂ. 線画をできる限り写す  ｃ. 白線と「施工事例」を被らせない
     PCは帯が横長（1440×360＝比率4.0 > 画像1.765）なので **cover は高さ方向だけを切る**
     ＝横幅は自動的に100%残る（ａは自動的に満たされる）。よってY位置だけの最適化になる。
     SPは帯が縦長寄り（375×308＝比率1.22 < 1.765）で **幅方向が切れる**（帯サイズ固定の帰結・回避不能）。
     こちらはX位置の最適化になる。
   ● 決め方＝「タイトルの実描画矩形」を画像座標へ逆写像し、その中の白線密度を実測。
     密度0%を満たす範囲のうち **線画が最も多く入る位置（＝下方向へ最大限送った位置）** を採用。
     数値は下の --works-fv-pos に集約（調整はこの1〜2行だけ）。
   ● 暗幕 ＝ 上部（タイトル側）.45 → 下部（線画側）.24 のグラデーション。
     白文字のコントラストは確定形と同等に保ちつつ、線画と光の階調を沈めない。
     ※階層B（色調のパラメータ調整）としてオプトアウト承認扱い。 */
/* ● トリミング位置＝**画像の下端に寄せる**（2026-08-21 ディレクター指示
     「画像元下の部分を見えるように。これだと手書きの設計メモが書いてある画像なのに、何かわからない」）。
   帯を上寄せ（Y=18%）にすると白線はタイトルから完全に外れる（0.00%）が、写るのは画像の
   y6〜50%＝天井と壁が主で、**設計メモであることが伝わらない**。下端寄せに切り替えた。
   実測（タイトルの文字描画矩形＋周囲8pxを画像座標へ逆写像／PC1440×900）:
   ┌ Y ──┬ 可視域 ────┬ 帯全体の白線量 ┬ タイトル背後の白線 ┐
   │ 60% │ y34-78%     │ 9.42%          │ 6.99%              │
   │ 72% │ y40-84%     │ 6.50%          │ 10.15%             │
   │ 80% │ y45-89%     │ 5.49%          │ 13.69%（最悪）      │
   │ 92% │ y51-96%     │ 7.79%          │ 8.37%              │
   │**100%**│**y56-100%**│**8.97%**      │**5.35%（下方向で最小）**│
   └─────┴─────────────┴────────────────┴────────────────────┘
   ＝Y=100% は「帯全体の線画量がほぼ最大（9.42%が最大なので95%水準）」でありながら
     「タイトル背後の白線が下方向のどの位置よりも少ない」＝設計メモらしさと可読性の最良点。
     写るのはカウンター前面（STORAGE の破線）・床の大矢印・対流・AIR＝手書きメモの主役部分。
   SPは帯比率1.22＜画像1.765のため**幅方向**が切れる（＝縦は最初から y0-100% 全部写っている）ので
   Yは効かない。Xの最適化＝6%（タイトル背後の白線0.02%・輝度65の暗部に抜ける）。 */
/* 2026-08-21 ディレクター指示で2段階上げた: 100% → 88% → **72%**（「もう少し上に」×2）。
     100% ＝ y56-100%（床と収納前面が主）
      88% ＝ y49-93%（カウンター上面と壁が戻る）
    **72% ＝ y40-84%**（開口部と中庭が入り、床の大矢印・STORAGE・対流・AIR も残る）
   ※Y=76〜80% は可視域が72%より**下**（y42-89%）なのに、タイトル背後の白線が13.7%まで跳ねる
     最悪帯（矢印の先端がちょうど中央に来る）。72% は「より上まで見えて、かつ白線が少ない」ため、
     76/80% を飛ばして採用した。白線は10.15%＝88%時（10.07%）とほぼ同じなので、
     ヴェール .52 のままコントラストは維持される。 */
:root{ --works-fv-pos: 50% 72%; }
@media(max-width:767px){ :root{ --works-fv-pos: 6% 50%; } }
.page-hero--overlay .page-hero__media--bg .page-hero__img{ object-position:var(--works-fv-pos); }
/* ● 暗幕を2枚に分ける（下端寄せで線画が全面に来たため）。
   ①全面＝確定形の一律 .45 より軽い .30〜.38。手書き線と光の階調を残す＝設計メモとして読める。
   ②タイトル背後だけ＝楕円のヴェールを重ねる。白線がタイトルを横切って見えるのを防ぐのが目的。
     中央の合成不透過＝1-(1-.46)(1-.34)≒0.64 → 背景輝度135が約49、白線220が約79まで落ち、
     純白(255)の文字とは十分に分離する。周囲へ滑らかに0へ抜けるので「黒い塊」には見えない。
   ※階層B（色調のパラメータ調整）としてオプトアウト承認扱い。共有CSSは無改変。 */
.page-hero--overlay .page-hero__media--bg::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.30) 46%,
    rgba(0,0,0,.34) 100%);
}
.page-hero--overlay .page-hero__media--bg::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 30% 36% at 50% 50%,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.36) 48%,
    rgba(0,0,0,0)   100%);
}

/* [20260821bu] ディレクター判断 P71＝**削除**（2026-08-24）。
   20260821h の一時非表示用クラス `.is-hidden-trial` と、それを条件にしていた `:has()` 3行を撤去。
   ただし**「隠していたときの見え方」がそのまま確定形**なので、当時 :has() で当てていた3点は
   条件なしの素の指定として残す。
     ・見出し下の罫線 = 出さない（罫線は home では本文とセットの要素。本文が無いなら罫線も無い）
     ・罫線のための下マージン28px = 0
     ・本文のための下パディング64px = 24px
   リードが無くなったので、この導入ブロックは「赤英字 WORKS ＋ キャッチ1行」だけになる。 */
.hero-intro__body .hero-intro__catch::after{display:none;}  /* 罫線 */
.hero-intro__body .hero-intro__catch{margin-bottom:0;}      /* 罫線用の下マージン28px */
.hero-intro__body{padding-bottom:24px;}                     /* 本文用の下パディング64px→24px */

/* 「事例をさがす」ブロック（2026-08-09 ディレクター指示①②）
   ① サブメニューが .hero-intro（padding 0）のため、グレー帯がサブメニューに密着していた＝上に「間」を確保
   ② ブロック全体が高さを取りすぎ＝縦padding・タブ高・アコーディオン内余白を圧縮（補足説明は削除） */
.works-find{margin-top:56px;padding-top:40px;padding-bottom:40px;}
@media(max-width:767px){ .works-find{margin-top:32px;padding-top:32px;padding-bottom:32px;} }

/* カテゴリタブ（横スクロールにせず等分3タブ・エリア幅=コンテンツ幅1480に整合） */
.cat-tabs{max-width:var(--w-content);margin:0 auto;}
.cat-tabs__list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;border:1px solid var(--c-text);max-width:900px;margin:0 auto;}
.cat-tabs__link{
  position:relative;z-index:0;overflow:hidden;   /* ホバー背景（中心から拡大）の土台 */
  display:flex;flex-direction:column;justify-content:center;height:100%;
  text-align:center;text-decoration:none;
  padding:12px 4px;font-size:var(--fs-caption);line-height:1.6;letter-spacing:var(--ls-1);
  border-left:1px solid var(--c-line);
}
.cat-tabs__item:first-child .cat-tabs__link{border-left:none;}
.cat-tabs__link.is-active{background:var(--c-btn);color:#fff;font-weight:400;}
/* 別サイト（事業用サイト）へ出ることを示す外部リンクアイコン。2026-08-09 ディレクター指示③で
   補足文「→ 事業用サイトへ」を廃し、アイコン1点に置換。currentColor＝無彩色（C-1 §9-3）。 */
.cat-tabs__exticon{
  width:1em;height:1em;flex:none;margin-left:.45em;vertical-align:-.1em;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;
  opacity:.75;
}
/* SP=4タブを2×2に折り返す（1行4タブは幅88pxで文字が窮屈になるため） */
@media(max-width:767px){
  .cat-tabs__list{grid-template-columns:repeat(2,1fr);}
  .cat-tabs__item:nth-child(odd) .cat-tabs__link{border-left:none;}
  .cat-tabs__item:nth-child(n+3) .cat-tabs__link{border-top:1px solid var(--c-line);}
}

/* タグ絞り込み（家族構成×暮らしテーマ）
   ─ エリア幅 W720→W最大1480（コンテンツ幅）／「暮らしのテーマから探す ▼」アコーディオン開閉 */
.tag-filter{max-width:var(--w-content);margin:24px auto 0;border:1px solid var(--c-line);background:var(--c-bg);}
/* アコーディオン開閉トグル（初期=閉） */
.tag-filter__toggle{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;background:var(--c-bg);border:0;cursor:pointer;
  padding:14px 20px;font-family:inherit;font-size:var(--fs-body);font-weight:400;
  letter-spacing:.06em;color:var(--c-text);text-align:center;
}
.tag-filter__toggle-icon{
  width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--c-text-sub);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.tag-filter.is-open .tag-filter__toggle-icon{transform:rotate(180deg);}
/* 「にゅっと」開閉（2026-08-09 ディレクター指示④）
   高さ＝grid-template-rows 0fr→1fr のスムーズ遷移（.38s ease-out系）。
   中身は僅かに遅らせてフェード＋4pxの沈み込みから復帰＝開き際の気持ちよさを出す。
   閉のあいだは visibility:hidden（遷移完了後に切替）＝キーボードフォーカスが潜り込まないようにする。 */
.tag-filter__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s cubic-bezier(.22,.61,.36,1);
}
.tag-filter.is-open .tag-filter__panel{grid-template-rows:1fr;}
.tag-filter__panel-inner{
  overflow:hidden;min-height:0;
  visibility:hidden;transition:visibility 0s linear .38s;
}
.tag-filter.is-open .tag-filter__panel-inner{visibility:visible;transition-delay:0s;}
.tag-filter__panel-pad{
  padding:2px 20px 20px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease .05s, transform .3s cubic-bezier(.22,.61,.36,1) .05s;
}
.tag-filter.is-open .tag-filter__panel-pad{opacity:1;transform:none;}
.tag-filter__axis{font-size:var(--fs-micro);color:var(--c-text-note);letter-spacing:.18em;margin:14px 0 8px;}
.tag-filter__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;}
.tag-chip{
  position:relative;z-index:0;overflow:hidden;    /* ホバー背景（中心から拡大）の土台 */
  display:inline-block;font-size:var(--fs-caption);line-height:1.5;
  border:1px solid var(--c-line-dark);border-radius:99px;
  padding:6px 14px;text-decoration:none;color:var(--c-text-sub);
  background:var(--c-bg);
}
.tag-chip.is-active{background:var(--c-btn);color:#fff;border-color:var(--c-btn);}

/* 枠内で背景（薄グレー）が中心から広がるロールオーバー（グレースケール厳守・非activeのみ） */
.tag-chip::before,
.cat-tabs__link::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--c-bg-sub);
  transform:scale(0);transform-origin:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.tag-chip:not(.is-active):hover::before,
.tag-chip:not(.is-active):focus-visible::before,
.cat-tabs__link:not(.is-active):hover::before,
.cat-tabs__link:not(.is-active):focus-visible::before{transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  .tag-filter__toggle-icon,
  .tag-filter__panel,
  .tag-filter__panel-pad,
  .tag-chip::before,
  .cat-tabs__link::before{transition:none;}
  .tag-filter__panel-inner{transition:none;}
}

/* 0件時メッセージ（表示状態サンプル）
   2026-08-09: 該当ブロックはコメントアウト（下記HTML参照）だが、CMS実装時に復活させるため定義は残す */
.zero-result{
  max-width:720px;margin:32px auto 0;border:1px solid var(--c-line);
  padding:20px 16px;text-align:center;font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);
  background:var(--c-bg);
}

/* 事例カード（写真＋物語タイトル＋暮らしの一言＋タグ） */
.works-card__copy{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);margin-top:6px;}
.works-card__tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.works-card__tags .card__tag{margin-bottom:0;}

/* 「さらに見る」＝下方向への追加読み込み（2026-08-09 ディレクター指示⑤）
   次ページ遷移をやめ、同一ページ内で隠しカードを段階表示する。全件表示で操作行ごと非表示。 */
.card.is-stashed{display:none;}
/* <a class="btn"> → <button class="btn"> への置換にともなう差分だけを補正する。
   SPの .btn は display:flex（＝aならブロック幅いっぱい）だが、button は既定で shrink-to-fit のため
   幅が縮む。従来の見え方（幅いっぱい）に合わせる。PCは .btn の min-width:min(360px,100%) が効く。 */
button.btn{font-family:inherit;cursor:pointer;}
@media(max-width:767px){ #works-more{width:100%;} }
@keyframes worksCardIn{
  from{opacity:0;transform:translate(-6px,10px);}
  to{opacity:1;transform:none;}
}
.card.is-appearing{animation:worksCardIn .5s cubic-bezier(.22,.61,.36,1) both;}
@media(prefers-reduced-motion:reduce){
  .card.is-appearing{animation:none;}
}

/* ===== ブロック2/2: 無名style（旧works.html #288-305＝.nowrap ＋ .sub-nav SP中央寄せ） ===== */
/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。 */
.nowrap{white-space:nowrap;}
/* サブナビ＝SPで中央寄せ（2026-08-20ディレクター指示）。
   このページは項目2つ（施工事例一覧｜OBインタビュー）で、SP全幅（320〜767px）で
   横スクロールが発生しない（実測: 溢れ0）。
   **2026-07-27確定のA案仕様（共有CSS design-system.css §8-d）は変更しない**方針のため、
   共有CSSは無改変・このページ内だけで対応する（?vバンプ不要）。
   ① auto余白で中央寄せ。万一項目が増えて溢れたら自動的に0になり、A案どおり
      左端から並ぶ横スクロールへ戻る（justify-content:center と違い先頭が切れない）。
   ② 右側に確保されている56pxのフェード帯ぶんの余白を左と同じ幅に戻す。
      スクロールしないページではフェードは .sub-nav--end で消えており機能していないため。
      ※将来このページの項目が増える場合は、この2ブロックの見直しが必要。 */
@media(max-width:767px){
  .sub-nav__list{padding-right:var(--pad-side,16px);}
  .sub-nav__item:first-child{margin-left:auto;}
  .sub-nav__list::after{margin-right:auto;}
}

/* ===== 2026-09-14 wp-engineer 追加（design版に無いブロック・是正ラウンド） =====
   「さらに見る」（下方向への追加読み込み）の復元にともなう追加分。
   design/pages/works.html はJS常時全件DOM出力の前提のため、CMS実装特有の以下2点は
   design版に対応が無く、このファイル側だけで新規に定義する。 */

/* 1. WP標準スクリーンリーダー用ユーティリティ。テーマ内どこにも定義が無く、
      paginate_links()と組み合わせて出力している <h2 class="screen-reader-text"> が
      素の見出しとしてそのまま可視表示されてしまっていた（実機確認で確認した不具合）。
      WP公式配布テーマの標準実装をそのまま採用する。 */
.works-pagination .screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}

/* 2. フォールバック用ページ送り（JS無効環境・クローラー向け）。
      the_posts_pagination()由来の <ul class="page-numbers"> に専用CSSが無く、
      素の箇条書き（黒丸付き）がそのまま表示されていた（ディレクター指摘の不具合）。
      JS有効時はwork-archive.jsがこの要素をhidden化し「さらに見る」ボタンに差し替えるため、
      ここでは主張しすぎない控えめな見た目にする（realestate-archive.cssの既存パターンに準拠）。 */
.works-pagination{max-width:980px;margin:40px auto 0;text-align:center;}
.works-pagination[hidden]{display:none;}
.works-pagination ul.page-numbers{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:0;}
.works-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 8px;
  border:1px solid var(--c-line-dark);font-family:var(--ff-en);font-size:var(--fs-caption);
  text-decoration:none;color:var(--c-text-sub);
}
.works-pagination a.page-numbers:hover{background:var(--c-bg-sub);color:var(--c-text);}
.works-pagination .page-numbers.current{background:var(--c-btn);color:var(--c-btn-text);border-color:var(--c-btn);}
.works-pagination .page-numbers.dots{border:0;}

/* 3. #works-more-foot は既定 hidden（PHP側属性）。button.btn/@media(max-width:767px)の
      幅補正は既存の1/2ブロック（271-276行）がそのまま効くため重複定義しない。 */
#works-more-foot[hidden]{display:none;}