/* ============================================================
   FIGURA — Redesign Layer
   ------------------------------------------------------------
   既存 style.min.css の後に読み込み、上から静かさを与える層。
   このファイルを外せば従来の見た目に戻る（可逆）。

   設計の要点:
   1) 静けさは「字間」ではなく「行間」で作る。
      従来は letter-spacing .5em〜.7em を本文にも多用していたが、
      日本語では可読性を落とすだけで静けさは生まれない。
      本文は line-height 1.9〜2.0 / letter-spacing .04em に寄せ、
      広い字間は FIGURA のワードマークなど「表示用」だけに残す。
   2) 色は4色 + アクセント1色に絞る。
   3) モーションは opacity と色のみ。transform は原則使わない。
   ============================================================ */

:root{
  /* --- 面 --------------------------------------------------- */
  --f-paper:#f5f4f1;          /* 紙。純白でも冷たいグレーでもない */
  --f-paper-deep:#eceae5;     /* 一段沈めた面（区切り・カード） */
  --f-ink:#1a1a1a;            /* 見出し・強い文字 */
  --f-body:#5a5754;           /* 本文。#666より僅かに暖かい */
  --f-quiet:#6f6b65;          /* 補助・メタ情報 */
  --f-line:#dcdad5;           /* 罫線 */

  /* --- 暗い面（vision / service / knowledge 等） -------------- */
  --f-dark:#1a1a1a;
  --f-dark-paper:#f0efec;     /* 暗面上の文字 */
  --f-dark-body:#b5b1aa;      /* 暗面上の本文 */
  --f-dark-quiet:#8a8681;
  --f-dark-line:rgba(240,239,236,.16);

  /* --- アクセント（ロゴのグリーン） -------------------------- */
  --f-accent:#009944;
  --f-accent-deep:#00803d;    /* 白文字を乗せてAA(5.0:1)を満たす */

  /* --- 行間 / 字間 ------------------------------------------ */
  --f-lh-body:1.95;
  --f-lh-tight:1.7;
  --f-ls-body:.04em;
  --f-ls-meta:.12em;
  --f-ls-display:.5em;        /* ワードマーク等の表示用のみ */

  /* --- 余白スケール（cosmos実測の 65/70/100 を中心に整理） --- */
  --f-s1:8px;
  --f-s2:16px;
  --f-s3:24px;
  --f-s4:40px;
  --f-s5:64px;
  --f-s6:96px;
  --f-s7:128px;
  --f-s8:176px;

  --f-gutter:5%;              /* 左右のインセット */
  --f-ease:ease;
  --f-dur:.4s;
  --f-tap:44px;
}

/* ============================================================
   1. 本文の組版（このサイトで一番効く変更）
   ============================================================ */

body{
  color:var(--f-body);
  background-color:var(--f-paper);
  line-height:var(--f-lh-body);
  letter-spacing:var(--f-ls-body);
  font-feature-settings:"palt" 1;   /* 日本語の詰め組 */
  text-rendering:optimizeLegibility;
}

/* 従来 letter-spacing が広すぎた本文系を一括で引き締める */.vision-text-jp,
.vision-text-en,
.content-text-jp,
.content-text-en,
.process-item-text,
.hero-lead,
.company__message p,
.about-text,
.privacy-text{
  line-height:var(--f-lh-body);
  letter-spacing:var(--f-ls-body);
  text-align:justify;
  text-justify:inter-character;
}

/* 日本語の長文は1行を詰めすぎない（可読の上限） */.vision-text-jp,
.content-text-jp,
.process-item-text{max-width:38em}.vision-text-en,
.content-text-en{max-width:44em}

/* ============================================================
   2. モーションの統制
   ------------------------------------------------------------
   transform 由来の hover を無効化し、opacity と色だけに絞る。
   transition は :hover 側だけでなく通常状態に置く（戻りも同速に）。
   ============================================================ */a,
button,
.c-btn,
.global-nav__cta{
  transition:opacity var(--f-dur) var(--f-ease),
             color var(--f-dur) var(--f-ease),
             background-color var(--f-dur) var(--f-ease),
             border-color var(--f-dur) var(--f-ease);
}.c-btn:hover,
.c-btn--primary:hover,
.c-btn--ghost:hover{transform:none}

.vision-image:hover{transform:none}
.vision-image{transition:opacity .8s var(--f-ease)}

.nav-menu a:hover{color:var(--f-quiet);letter-spacing:var(--f-ls-display)}

@media (prefers-reduced-motion:reduce){*,
*::before,
*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   3. ヘッダー — 静かに、しかし常に届く場所に置く
   ============================================================ */

header{
  border-bottom:1px solid transparent;   /* 最上部では罫線を出さない */
  background:transparent;
  transition:background-color var(--f-dur) var(--f-ease),
             border-color var(--f-dur) var(--f-ease);
}
header.scrolled{
  background:rgba(245,244,241,.92);
  border-bottom-color:var(--f-line);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}body.figura-dark header.scrolled{
  background:rgba(26,26,26,.92);
  border-bottom-color:var(--f-dark-line);
}
/* color-mix 非対応ブラウザ向けの素直なフォールバック */.header-container{padding:28px var(--f-gutter)}

.global-nav__list{gap:32px}
.global-nav__list a{
  font-size:.75rem;
  letter-spacing:var(--f-ls-meta);
  color:var(--f-quiet);
}
.global-nav__list a:hover{color:var(--f-ink);opacity:1}
.global-nav__list a::after{background:var(--f-accent)}body.figura-dark .global-nav__list a{color:var(--f-dark-body)}body.figura-dark .global-nav__list a:hover{color:var(--f-dark-paper)}

/* ヘッダーのCTAは「ボタン」をやめ、静かなテキストリンクにする。
   獲得はヒーローではなく、記事末尾と追従バーで受ける。 */
.global-nav__cta{
  margin-left:32px;padding:0;min-height:0;
  background:none;border:none;border-radius:0;
  font-size:.75rem;letter-spacing:var(--f-ls-meta);
  color:var(--f-ink);
  border-bottom:1px solid var(--f-accent);
  padding-bottom:3px;
}
.global-nav__cta:hover{background:none;color:var(--f-accent-deep);border-bottom-color:var(--f-accent-deep)}body.figura-dark .global-nav__cta{
  background:none;border:none;color:var(--f-dark-paper);
  border-bottom:1px solid var(--f-accent);
}body.figura-dark .global-nav__cta:hover{background:none;color:#fff;border-bottom-color:#fff}

/* ============================================================
   4. ヒーロー — 何も語らない
   ------------------------------------------------------------
   説明文とボタンを外し、ワードマークと一行だけ残す。
   参考サイト同様、ここでは売り込まない。
   ============================================================ */

.hero-container{padding:0 var(--f-gutter)}

.hero-title{margin-bottom:0}
.hero-title__brand{
  font-size:clamp(2.2rem, 8vw, 5.5rem);
  font-weight:200;
  letter-spacing:var(--f-ls-display);
  color:var(--f-ink);
  line-height:1.15;
}
.hero-title__desc{
  margin-top:var(--f-s4);
  font-size:.8rem;
  font-weight:400;
  letter-spacing:var(--f-ls-meta);
  line-height:2;
  color:var(--f-body);
}

/* 英語のタグラインは残すが、さらに沈める */
.hero-subtitle{
  margin-top:var(--f-s2);
  margin-bottom:0;
  font-size:.68rem;
  font-weight:300;
  letter-spacing:.34em;
  color:var(--f-quiet);
}

/* ヒーローから撤去する要素（獲得は下層と追従バーが担う） */.hero-lead,
.hero-actions,
.hero-note{display:none}

.scroll-text{color:var(--f-quiet);font-size:.62rem;letter-spacing:var(--f-ls-meta)}
.scroll-arrow::before{background:var(--f-line)}
.scroll-arrow::after{background:var(--f-line)}
.scroll-dot{background:var(--f-quiet)}

/* ============================================================
   5. セクション見出し
   ------------------------------------------------------------
   太らせず、ウェイトを落として字間で格を出す（参考サイトの手法）。
   ============================================================ */.vision-title,
.about-title .page-title__en,
.service-title .page-title__en,
.works-title .page-title__en,
.company__title .page-title__en,
.contact-title .page-title__en,
.p-news-archive__title .page-title__en{
  font-weight:200;
  letter-spacing:.42em;
  line-height:1.5;
}

.page-title__ja{
  margin-top:var(--f-s3);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:var(--f-ls-meta);
  line-height:2;
  color:var(--f-quiet);
}body.figura-dark .page-title__ja{color:var(--f-dark-quiet)}

/* ============================================================
   6. ボタン — 面ではなく線で
   ============================================================ */

.c-btn{
  min-height:var(--f-tap);
  padding:16px 36px;
  font-size:.78rem;font-weight:400;
  letter-spacing:var(--f-ls-meta);
  border-radius:0;
}
.c-btn--primary{background:var(--f-ink);color:var(--f-paper);border-color:var(--f-ink)}
.c-btn--primary:hover{background:var(--f-accent-deep);border-color:var(--f-accent-deep);color:#fff}
.c-btn--ghost{background:none;color:var(--f-ink);border-color:var(--f-line)}
.c-btn--ghost:hover{background:none;color:var(--f-accent-deep);border-color:var(--f-accent-deep)}

/* ============================================================
   7. 暗い面の調整
   ============================================================ */

.vision{background-color:var(--f-dark)}
.vision-title{color:var(--f-dark-paper)}
.vision-title::after{background-color:var(--f-dark-line)}.vision-text-jp,
.vision-text-en{color:var(--f-dark-body)}
.vision-image-overlay{background:rgba(26,26,26,.82)}
.vision-image-title{
  font-size:.8rem;font-weight:300;
  letter-spacing:.3em;color:var(--f-dark-paper);
}
.vision-image-text{
  font-size:.78rem;line-height:1.9;
  letter-spacing:var(--f-ls-body);color:var(--f-dark-body);
}

/* ============================================================
   8. フッター
   ============================================================ */

footer{border-top:1px solid var(--f-line);padding:var(--f-s5) 0}
.footer-container{color:var(--f-body)}
.footer-button{color:var(--f-body);font-size:.72rem;letter-spacing:var(--f-ls-meta)}
.footer-button:hover{color:var(--f-ink)}.footer-left .nav-separator,
.nav-separator{color:var(--f-line)}
.footer-center p{color:var(--f-quiet);font-size:.68rem;letter-spacing:.06em}
/* 縦のガイド罫線を紙の色に馴染ませる */footer::before,
footer::after{background-color:var(--f-line)}

/* ============================================================
   9. モバイルナビ
   ============================================================ */

.hamburger-nav{background:var(--f-paper);opacity:1;padding-left:var(--f-gutter);padding-top:120px}
.nav-menu a{
  font-size:clamp(1.4rem, 6vw, 2rem);
  font-weight:200;
  letter-spacing:.34em;
  color:var(--f-ink);
}
.nav-social a{font-size:.72rem;letter-spacing:var(--f-ls-meta);color:var(--f-body)}
.nav-social a:hover{color:var(--f-ink)}
.hamburger-line{background-color:var(--f-ink)}

@media (max-width:767px){
  .header-container{padding:18px var(--f-gutter)}
  .hero-title__desc{margin-top:var(--f-s3);font-size:.74rem}
  .hero-subtitle{font-size:.58rem;letter-spacing:.26em}
}

/* ============================================================
   10. 記事内の自動挿入パーツ（目次 / CTA / 関連記事 / 自動リンク）
   ------------------------------------------------------------
   knowledge記事は背景が暗い（body.figura-dark）ため、暗面前提で組む。
   ============================================================ */

/* --- 自動内部リンク --- */
.c-autolink{
  color:inherit;
  border-bottom:1px solid var(--f-accent);
  padding-bottom:1px;
}
.c-autolink:hover{color:var(--f-accent);border-bottom-color:currentColor}
body.figura-dark .c-autolink:hover{color:#41c47c;border-bottom-color:currentColor}

/* --- 目次 --- */
.c-toc{
  margin:var(--f-s5) 0;
  padding:var(--f-s4);
  border:1px solid var(--f-line);
}
.c-toc__title{
  margin:0 0 var(--f-s3);
  font-size:.72rem;font-weight:400;
  letter-spacing:var(--f-ls-meta);
  color:var(--f-quiet);
}.c-toc__list,
.c-toc__sub{list-style:none;margin:0;padding:0}
.c-toc__list > li{margin:0 0 .9em}
.c-toc__sub{margin:.7em 0 0 1.2em}
.c-toc__sub > li{margin:0 0 .7em}
.c-toc a{
  font-size:.9rem;line-height:1.7;
  letter-spacing:var(--f-ls-body);
  color:var(--f-body);
  border-bottom:1px solid transparent;
}
.c-toc a:hover{color:var(--f-ink);border-bottom-color:var(--f-accent)}

body.figura-dark .c-toc{border-color:var(--f-dark-line)}
body.figura-dark .c-toc__title{color:var(--f-dark-quiet)}
body.figura-dark .c-toc a{color:var(--f-dark-body)}
body.figura-dark .c-toc a:hover{color:var(--f-dark-paper)}

/* --- CTA --- */
.c-cta{margin:var(--f-s6) 0}
.c-cta--mid{
  margin:var(--f-s5) 0;
  padding:var(--f-s4);
  border-top:1px solid var(--f-line);
  border-bottom:1px solid var(--f-line);
  text-align:center;
}
.c-cta--bottom{
  margin-top:var(--f-s7);
  padding:var(--f-s5) var(--f-s4);
  border:1px solid var(--f-line);
  text-align:center;
}
.c-cta__title{
  margin:0 0 var(--f-s3);
  font-size:1rem;font-weight:300;
  letter-spacing:.24em;
  color:var(--f-ink);
}.c-cta__lead,
.c-cta__body{
  margin:0 auto var(--f-s4);
  max-width:34em;
  font-size:.9rem;line-height:var(--f-lh-body);
  letter-spacing:var(--f-ls-body);
  color:var(--f-body);
}
.c-cta__btn{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;align-items:center;
  margin:0;
}
.c-cta--mid .c-cta__btn a{
  font-size:.82rem;letter-spacing:var(--f-ls-meta);
  color:var(--f-ink);
  border-bottom:1px solid var(--f-accent);
  padding-bottom:3px;
}
.c-cta--mid .c-cta__btn a:hover{color:var(--f-accent-deep)}
.c-cta__note{
  margin:var(--f-s3) 0 0;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--f-quiet);
}body.figura-dark .c-cta--mid,
body.figura-dark .c-cta--bottom{border-color:var(--f-dark-line)}
body.figura-dark .c-cta__title{color:var(--f-dark-paper)}body.figura-dark .c-cta__lead,
body.figura-dark .c-cta__body{color:var(--f-dark-body)}
body.figura-dark .c-cta__note{color:var(--f-dark-quiet)}
body.figura-dark .c-cta--mid .c-cta__btn a{color:var(--f-dark-paper)}
body.figura-dark .c-cta--bottom .c-btn--primary{background:var(--f-dark-paper);color:var(--f-ink);border-color:var(--f-dark-paper)}
body.figura-dark .c-cta--bottom .c-btn--primary:hover{background:var(--f-accent);color:#fff;border-color:var(--f-accent)}
body.figura-dark .c-cta--bottom .c-btn--ghost{color:var(--f-dark-paper);border-color:var(--f-dark-line)}
body.figura-dark .c-cta--bottom .c-btn--ghost:hover{color:#fff;border-color:var(--f-dark-paper)}

/* --- 関連記事 --- */
.c-related{margin:var(--f-s7) 0 0}
.c-related__title{
  margin:0 0 var(--f-s4);
  font-size:.72rem;font-weight:400;
  letter-spacing:var(--f-ls-meta);
  color:var(--f-quiet);
}
.c-related__list{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--f-s4);
}
.c-related__item a{display:block}
.c-related__item img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  margin-bottom:var(--f-s2);
  transition:opacity var(--f-dur) var(--f-ease);
}
.c-related__item a:hover img{opacity:.62}
.c-related__label{
  display:block;
  font-size:.85rem;line-height:1.75;
  letter-spacing:var(--f-ls-body);
  color:var(--f-body);
}
.c-related__item a:hover .c-related__label{color:var(--f-ink)}
body.figura-dark .c-related__title{color:var(--f-dark-quiet)}
body.figura-dark .c-related__label{color:var(--f-dark-body)}
body.figura-dark .c-related__item a:hover .c-related__label{color:var(--f-dark-paper)}

@media (max-width:767px){.c-toc,
.c-cta--mid,
.c-cta--bottom{padding:var(--f-s3)}
  .c-cta__btn{flex-direction:column;align-items:stretch}
  .c-cta--bottom .c-cta__btn .c-btn{width:100%}
  .c-related__list{grid-template-columns:1fr;gap:var(--f-s3)}
  .c-related__item a{display:grid;grid-template-columns:96px 1fr;gap:var(--f-s2);align-items:start}
  .c-related__item img{margin-bottom:0}
}

/* ============================================================
   11. パンくず
   ============================================================ */
.p-news-single__breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em;
  margin:0 0 var(--f-s4);
  font-size:.68rem;letter-spacing:.08em;line-height:1.8;
  color:var(--f-quiet);
}
.p-news-single__breadcrumb a{color:var(--f-quiet);border-bottom:1px solid transparent}
.p-news-single__breadcrumb a:hover{color:var(--f-ink);border-bottom-color:var(--f-accent)}
.p-news-single__breadcrumb .sep{color:var(--f-line);margin:0 -.15em}
.p-news-single__breadcrumb .current{color:var(--f-body)}
body.figura-dark .p-news-single__breadcrumb,
body.figura-dark .p-news-single__breadcrumb a{color:var(--f-dark-quiet)}
body.figura-dark .p-news-single__breadcrumb a:hover{color:var(--f-dark-paper)}
body.figura-dark .p-news-single__breadcrumb .sep{color:var(--f-dark-line)}
body.figura-dark .p-news-single__breadcrumb .current{color:var(--f-dark-body)}

/* ============================================================
   12. モバイル追従CTA
   ------------------------------------------------------------
   ヒーローから売り込みを外した代わりに、読み進めた人だけに出す。
   40%スクロールで現れ、フッターに達すると引っ込む。
   ============================================================ */
.c-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(26,26,26,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(240,239,236,.14);
  transform:translateY(110%);
  opacity:0;visibility:hidden;
  transition:transform .45s var(--f-ease),opacity .3s var(--f-ease),visibility .3s;
}
.c-sticky-cta.is-visible{transform:translateY(0);opacity:1;visibility:visible}
.c-sticky-cta__text{
  flex:1 1 auto;min-width:0;
  font-size:.72rem;line-height:1.6;letter-spacing:.04em;
  color:var(--f-dark-body);
}
.c-sticky-cta__btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--f-tap);padding:12px 20px;
  font-size:.78rem;letter-spacing:var(--f-ls-meta);
  background:var(--f-dark-paper);color:var(--f-ink);
}
.c-sticky-cta__btn:hover{background:var(--f-accent);color:#fff}

/* 追従CTAは狭い画面だけ。PCはヘッダーと記事内CTAで足りる。 */
@media (min-width:900px){ .c-sticky-cta{display:none} }
@media (prefers-reduced-motion:reduce){
  .c-sticky-cta{transition:opacity .01ms,visibility .01ms;transform:none}
  .c-sticky-cta:not(.is-visible){opacity:0;visibility:hidden}
}

/* ============================================================
   13. ヘッダーが「暗い面に重なっている」状態の統一
   ------------------------------------------------------------
   script.js は scrollY>50 で .scrolled を全ページに付け、
   トップページでは vision セクション到達時に .vision-active を付ける。
   つまりトップでは両方が同時に付く。

   これを考慮せず .scrolled にだけ明色の背景を与えていたため、
   背後が暗い vision セクションなのにヘッダーだけ明色の帯になり、
   さらに .vision-active が文字を明色にするので
   「明色の帯に明色の文字」で消えていた。

   暗い面に重なる状態を1か所にまとめ、背景・文字・CTAを揃える。
   ============================================================ */

header.vision-active,
header.vision-active.scrolled,
body.figura-dark header.scrolled{
  background:rgba(26,26,26,.9);
  border-bottom-color:var(--f-dark-line);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
/* 暗い面の上のナビ */
header.vision-active .global-nav__list a{color:var(--f-dark-body)}
header.vision-active .global-nav__list a:hover{color:var(--f-dark-paper)}
header.vision-active .global-nav__list a::after{background:var(--f-accent)}

/* 白いピルを撤去し、暗い面用の静かなテキストリンクに揃える */
header.vision-active .global-nav__cta{
  background:none;border:none;border-radius:0;
  min-height:0;padding:0 0 3px;margin-left:32px;
  color:var(--f-dark-paper);
  border-bottom:1px solid var(--f-accent);
}
header.vision-active .global-nav__cta:hover{
  background:none;color:#fff;border-bottom-color:#fff;
}

header.vision-active .hamburger-line{background-color:var(--f-dark-paper)}

/* ============================================================
   14. フッター — 面の明暗に追従させる
   ------------------------------------------------------------
   フッターは自前の背景を持たずページの面に乗るため、
   暗いページ(figura-dark)では明色ページ用の文字色だと沈む。
   実測で footer-button 2.43:1 / copyright 3.29:1 まで落ちていた。
   ============================================================ */
body.figura-dark footer{border-top-color:var(--f-dark-line)}
body.figura-dark .footer-container{color:var(--f-dark-body)}
body.figura-dark .footer-button{color:var(--f-dark-body)}
body.figura-dark .footer-button:hover{color:var(--f-dark-paper)}
body.figura-dark .footer-center p{color:var(--f-dark-quiet)}
body.figura-dark .footer-left .nav-separator,
body.figura-dark .nav-separator{color:var(--f-dark-line)}
body.figura-dark footer::before,
body.figura-dark footer::after{background-color:var(--f-dark-line)}

/* ============================================================
   15. WORKS
   ------------------------------------------------------------
   件数が少ないうちは1件を大きく見せる。3列に敷き詰めると
   埋まらない余白が「手薄さ」として読まれるため。
   キャプションは常時表示（ホバーで出す方式は件数が多い前提の探索UIで、
   タッチデバイスでは機能しない）。
   ============================================================ */

.p-works{list-style:none;margin:var(--f-s6) 0 0;padding:0}
.p-works__item + .p-works__item{margin-top:var(--f-s7)}
.p-works__link{display:block}
.p-works__media{margin:0;overflow:hidden;background:var(--f-paper-deep)}
.p-works__image{
  width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  transition:opacity var(--f-dur) var(--f-ease);
}
.p-works__link:hover .p-works__image{opacity:.72}

.p-works__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.4em;
  margin-top:var(--f-s3);
}
.p-works__year{
  font-size:.7rem;letter-spacing:var(--f-ls-meta);
  color:var(--f-quiet);font-variant-numeric:tabular-nums;
}
.p-works__client{
  flex:1 1 100%;order:1;
  font-size:1.15rem;font-weight:300;letter-spacing:.1em;line-height:1.6;
  color:var(--f-ink);
}
.p-works__category{
  order:2;
  font-size:.72rem;letter-spacing:var(--f-ls-meta);
  color:var(--f-quiet);
}
.p-works__link:hover .p-works__client{color:var(--f-accent-deep)}
.p-works__empty{
  margin:var(--f-s5) 0;
  font-size:.9rem;letter-spacing:var(--f-ls-body);color:var(--f-quiet);
}

body.figura-dark .p-works__client{color:var(--f-dark-paper)}
body.figura-dark .p-works__year,
body.figura-dark .p-works__category,
body.figura-dark .p-works__empty{color:var(--f-dark-quiet)}

/* --- 詳細 --------------------------------------------------- */
.p-work{padding:140px 0 var(--f-s7)}
.p-work__inner{width:min(1040px, 90%);margin:0 auto}

.p-work__header{margin:var(--f-s5) 0 var(--f-s6)}
.p-work__eyebrow{
  display:flex;flex-wrap:wrap;gap:1.4em;margin:0 0 var(--f-s3);
  font-size:.72rem;letter-spacing:var(--f-ls-meta);color:var(--f-quiet);
}
.p-work__title{
  margin:0 0 var(--f-s2);
  font-size:clamp(1.5rem, 4vw, 2.4rem);
  font-weight:200;letter-spacing:.16em;line-height:1.5;
  color:var(--f-ink);
}
.p-work__client{margin:0;font-size:.95rem;letter-spacing:.08em;color:var(--f-body)}
.p-work__note{margin-left:.4em;font-size:.78rem;color:var(--f-quiet)}

.p-work__gallery{display:grid;gap:var(--f-s4)}
.p-work__figure{margin:0}
.p-work__image{width:100%;height:auto}

.p-work__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--f-s4);
  margin:var(--f-s6) 0;padding:var(--f-s4) 0;
  border-top:1px solid var(--f-line);border-bottom:1px solid var(--f-line);
}
.p-work__fact dt{
  margin:0 0 .6em;
  font-size:.68rem;letter-spacing:var(--f-ls-meta);color:var(--f-quiet);
}
.p-work__fact dd{margin:0;font-size:.9rem;line-height:1.8;color:var(--f-body)}

.p-work__story{margin:var(--f-s6) 0}
.p-work__section + .p-work__section{margin-top:var(--f-s5)}
.p-work__section-title{
  margin:0 0 var(--f-s3);
  font-size:.8rem;font-weight:400;letter-spacing:.2em;color:var(--f-ink);
}
.p-work__section-body p{
  margin:0 0 1.2em;max-width:38em;
  font-size:.95rem;line-height:var(--f-lh-body);letter-spacing:var(--f-ls-body);
  color:var(--f-body);
}

.p-work__voice{
  margin:var(--f-s6) 0;padding:var(--f-s5) var(--f-s4);
  background:var(--f-paper-deep);
}
.p-work__voice blockquote{margin:0}
.p-work__voice blockquote p{
  margin:0 0 1em;max-width:36em;
  font-size:1rem;line-height:1.9;letter-spacing:var(--f-ls-body);color:var(--f-ink);
}
.p-work__voice figcaption{
  font-size:.78rem;letter-spacing:var(--f-ls-meta);color:var(--f-quiet);
}

body.figura-dark .p-work__title{color:var(--f-dark-paper)}
body.figura-dark .p-work__client,
body.figura-dark .p-work__fact dd,
body.figura-dark .p-work__section-body p{color:var(--f-dark-body)}
body.figura-dark .p-work__eyebrow,
body.figura-dark .p-work__note,
body.figura-dark .p-work__fact dt{color:var(--f-dark-quiet)}
body.figura-dark .p-work__facts{border-color:var(--f-dark-line)}
body.figura-dark .p-work__section-title{color:var(--f-dark-paper)}

@media (max-width:767px){
  .p-work{padding:100px 0 var(--f-s6)}
  .p-works__item + .p-works__item{margin-top:var(--f-s6)}
  .p-works__client{font-size:1rem}
  .p-work__facts{gap:var(--f-s3)}
}

/* ============================================================
   16. トップページの WORKS セクション
   ============================================================ */
.home-works{
  background:var(--f-paper);
  margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  width:100vw;padding:var(--f-s8) 0;
  position:relative;z-index:10;
}
.home-works__inner{width:min(1200px, 90%);margin:0 auto}
.home-works__head{margin:0 0 var(--f-s6)}
.home-works__title{
  margin:0;
  font-size:clamp(1.6rem, 4vw, 2.6rem);
  font-weight:200;letter-spacing:.42em;line-height:1.4;
  color:var(--f-ink);
}
.home-works__lead{
  margin:var(--f-s3) 0 0;
  font-size:.85rem;letter-spacing:var(--f-ls-meta);line-height:2;
  color:var(--f-quiet);
}
.home-works .p-works{margin-top:0}
.home-works__more{margin:var(--f-s6) 0 0}
.home-works__more a{
  font-size:.78rem;letter-spacing:var(--f-ls-meta);
  color:var(--f-ink);
  border-bottom:1px solid var(--f-accent);padding-bottom:3px;
}
.home-works__more a:hover{color:var(--f-accent-deep);border-bottom-color:var(--f-accent-deep)}

@media (min-width:900px){
  /* 2件目以降を交互にずらし、単調な縦積みを避ける */
  .home-works .p-works__item:nth-child(even){margin-left:auto;width:82%}
  .home-works .p-works__item:nth-child(odd){width:82%}
}
@media (max-width:767px){
  .home-works{padding:var(--f-s6) 0}
  .home-works__head{margin-bottom:var(--f-s5)}
}

/* ============================================================
   Contact — 必須/任意バッジと同意行
   ラベル末尾に必須・任意を明示し、入力前に負担が読めるようにする。
   色は既存トークンのみ。モーションは持たせない。
   ============================================================ */
.form-badge{
  display:inline-block;
  margin-left:var(--f-s1);
  padding:2px 8px;
  font-size:.62rem;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.7;
  vertical-align:middle;
  border:1px solid currentColor;
  border-radius:2px;
}
.form-badge--req{color:var(--f-accent-deep)}
.form-badge--opt{color:var(--f-quiet)}

/* チェックボックスと文言を1行に揃える（wpautop停止が前提） */
.privacy-section{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:var(--f-s5) 0;
}
.privacy-section .wpcf7-form-control-wrap{display:inline-flex;align-items:center}

/* 狭い幅では nowrap を解除して溢れさせない */
@media (max-width:600px){
  .privacy-text{white-space:normal;line-height:var(--f-lh-tight)}
  .privacy-section{align-items:flex-start}
  .privacy-section .wpcf7-form-control-wrap{padding-top:2px}
}