@charset "UTF-8";
/* ============================================================
   実績（WORKS）詳細ページ 専用CSS
   本番配置先: fiz-theme/assets/styles/css/page/works-detail.css（想定）
   規則: デザインシステム（トークン）・コーディングルール§8 準拠
   出典: sns/sns.css（完成済みの土台）を複製し、svc- を wk- に付け替えたうえで
   works-00〜07.png（切り分け画像）・works-全体.png（全体像）の値に合わせて作った
   スマホはデザインが無いため、sns.html の流儀（1カラム縦積み＋上部の横スクロール目次）に合わせて自分で組んだ（2026-09-18）
   ============================================================ */

:root {
  --color-primary: #C10000;
  --color-text: #212121;
  --color-white: #FFFFFF;
  --color-gray: #A1A1A1;
  --color-gray-light: #EFEFEF;
  --color-border: #CCCCCC;
  --color-dark-sub: #3A3838;
  --color-bg-soft: #FAFAFA;
  --font-en: "Josefin Sans", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --radius-card: 10px;
  --radius-sm: 5px;
  --ease: cubic-bezier(0.4, 0.4, 0, 1);
  --duration: 0.3s;
}

/* ---- ページ基礎（wk- プレフィックスで既存CSSと衝突回避） ---- */
.wk {
  font-family: var(--font-jp);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 15px;
  line-height: 1.8;
}
.wk-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.wk a:focus-visible,
.wk button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- 見出しセット（eyebrow → H2 →（必要なら）リード文） ---- */
.wk-eyebrow {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（見出し上の英字ラベル） */
  margin: 0 0 8px;
}
.wk-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 var(--space-section-heading); /* 2026-09-24 余白の決まり: セクションの見出し→その中身 */
}
.wk-lead {
  font-weight: 700;
  margin: 0 0 24px;
  font-size: 14px;
}

/* ---- パンくず ---- */
/* パンくずは template-parts/common/breadcrumb.php と parts/breadcrumb.css に1つにまとめた（2026-09-29） */

/* ---- タイトル部（CASE STUDY・H1・要約・タグ） ---- */
.wk-hero {
  /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端（PCは変数が自動で切り替わる） */
  padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
}
.wk-hero__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  color: #111111;
  /* 本番の共通CSSは全要素を両端揃えにしているため、複数行に折れると文字間が伸びる。見出しは左揃え固定（sns.cssと同じ理由） */
  text-align: left;
  letter-spacing: 0;
}
.wk-hero__summary {
  margin: 0 0 20px;
  font-size: 14px;
  color: #333333;
}
.wk-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
/* 2026-10-06 本人決定：タグを小さくコンパクトに。12px・太さ400・内側の余白 2/10px。
   文字の最小 14px（--font-size-min）の例外：タグは読ませる文字ではなく目印のため（tokens.css に記録）。捨てた案：14px（大きい）・11px（スマホで読みにくい） */
.wk-tags li {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
}

/* ---- メイン画像（仮のグラデーション面。本番は works-hero 画像に差し替え） ---- */
.wk-hero__visual {
  border-radius: var(--radius-card);
  aspect-ratio: 335 / 220;
  width: 100%;
  background: linear-gradient(135deg, #3a3838, #7d1c1c 55%, #212121);
  margin: 0 0 24px;
}

/* ---- 基本情報（CLIENT / YEAR / SCOPE / ROLE） ---- */
.wk-basic {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--color-gray-light);
}
.wk-basic__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin: 0;
}
.wk-basic__item dt {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-text, #212121);  /* 2026-09-24 本人決定: 項目名は文字なので#212121のまま（会社概要の項目名と同じ考え方） */
  margin: 0 0 6px;
}
/* 2026-10-06 本人指摘：スマホの2列だと CLIENT の会社名が半分の幅で早く折れ、右に余白が残った。スマホは CLIENT だけ1行まるごと使う */
.wk-basic__item:first-child {
  grid-column: 1 / -1;
}
.wk-basic__item dd {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

/* ---- 2カラム本文（左: 目次／右: 各ブロック）
   スマホは1カラム縦積み。目次は上部の横スクロール帯にする（下の「目次（スマホ）」ブロックで上書き） ---- */
.wk-layout {
  padding: 32px 0 64px;
}
.wk-toc {
  margin: 0 0 24px;
}
.wk-toc__label {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-primary, #C10000); /* 2026-09-24 本人決定: 赤は差し色として使う（目次の英字ラベル） */
  margin: 0 0 12px;
}
.wk-toc__nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.wk-toc__nav::-webkit-scrollbar { display: none; }
.wk-toc__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.wk-toc__num {
  font-family: var(--font-en);
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（番号） */
}
.wk-toc__link.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.wk-toc__link.is-active .wk-toc__num {
  color: var(--color-white);
}

/* 各ブロック共通の余白（.wk-block は section=1ブロックの単位。PHP側でブロック単位のif分岐がしやすいよう入れ子にしない） */
.wk-block {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-gray-light);
  scroll-margin-top: 160px; /* 浮いた本番ヘッダー＋目次帯に見出しが隠れないよう、ジャンプの着地をずらす（PC向け。下端100pxのまま。スマホ向けは下の @media (max-width: 1023px) で150pxに上書き） */
}
.wk-block:last-of-type {
  border-bottom: 0;
}
.wk-box {
  background: var(--color-bg-soft);
  border-radius: var(--radius-card);
  padding: 24px;
}
.wk-box p {
  margin: 0;
}
.wk-box p + p {
  margin-top: 16px;
}

/* ---- 課題・背景（連番付き3行） ---- */
.wk-numbered {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.wk-numbered li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
}
.wk-numbered__num {
  flex: none;
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  font-weight: 700;
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（番号） */
  letter-spacing: 1px;
}
.wk-numbered p {
  margin: 0;
  font-size: 14px;
}

/* ---- 工夫したこと（縦の行。2026-10-11 本人決定・案A） ----
   列の数を件数で決めない（前は件数ぶん横に並べ、4件で1列が約190px・1行8〜9文字になり、見出しが言葉の途中で折れた）。
   1件＝1行：左に番号、右に見出しと説明。カードの枠はやめ、上の罫線で区切る。件数が増えても縦に伸びるだけ。スマホも同じ形 */
.wk-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.wk-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  border-top: 1px solid var(--color-border-strong, #949494);
  padding: 24px 0;
}
.wk-card:last-child {
  border-bottom: 1px solid var(--color-border-strong, #949494);
}
.wk-card__num {
  grid-row: 1 / span 2;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 27px; /* 見出し（18px×1.5）の1行目と高さをそろえる */
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（番号） */
  letter-spacing: 1px;
  margin: 0;
}
.wk-card h3 {
  grid-column: 2;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
  text-align: left;
}
.wk-card p:not(.wk-card__num) {
  grid-column: 2;
  margin: 0;
  font-size: 16px; /* 2026-10-11 横幅が広くなったので本文と同じ 16px（DADS） */
  color: #595959;
}

/* ---- 改善イメージ（前後2枚＋赤い矢印） ---- */
.wk-baf {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wk-baf__img {
  flex: 1;
  aspect-ratio: 365 / 270;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #f7d9d9, #ffffff);
}
.wk-baf__arrow {
  flex: none;
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（矢印） */
  font-size: 22px;
  font-weight: 700;
}

/* ---- 成果（数字が主役。2026-10-11 本人決定・案A） ----
   列の数を件数で決めない（前は件数ぶん横に並べ、スマホは2列固定でラベルの最後の1文字だけが次の行に落ちた）。
   スマホ・タブレット未満は1列、768px 以上は3列まで（4件目からは次の段）。数字を上・項目名を下に見せる
   （読み上げの順は HTML のまま「項目名→数字」）。カードの枠はやめ、上の罫線で区切る */
.wk-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
}
.wk-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  border-top: 1px solid var(--color-border-strong, #949494);
  padding: 16px 0 24px;
}
.wk-stat__label {
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  line-height: 1.6;
  color: #595959;
  margin: 0;
}
.wk-stat__value {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #212121);  /* 2026-09-24 本人決定: 赤の飾りを減らす */
  margin: 0;
  text-align: left;
}

/* ---- 制作フロー／運用フロー（3〜6ステップを想定。PCは横並び均等・スマホは縦積み） ---- */
.wk-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.wk-flow li {
  border-left: 3px solid var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う */
  padding: 4px 0 4px 20px;
}
.wk-flow__num {
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  font-weight: 700;
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う（番号） */
  margin: 0 0 4px;
}
.wk-flow h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  text-align: left;
}
.wk-flow p:not(.wk-flow__num) {
  margin: 0;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  color: #666666;
}

/* ---- お客様の声 ---- */
.wk-voice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.wk-voice__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-gray-light);
}
.wk-voice__comment {
  margin: 0 0 12px;
  font-size: 14px;
}
.wk-voice__name {
  margin: 0;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  font-weight: 700;
  text-align: right;
}

/* ---- 制作物（3列×2段の画像。スマホは2列） ---- */
.wk-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.wk-gallery__img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f7d9d9, #ffffff);
}

/* ---- 関連実績（灰色の帯に3枚カード） ---- */
.wk-related {
  background: var(--color-gray-light);
  padding: 40px 0;
}
.wk-related__grid {
  display: grid;
  gap: 16px;
}
.wk-work-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}
.wk-work-card__img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f2c9c9, var(--color-primary));
}
.wk-work-card__body {
  padding: 20px;
}
.wk-work-card__tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '11'px→14px */
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-primary, #C10000);  /* 2026-09-24 本人決定: タグは赤の目印に戻す */
  margin: 0 0 8px;
}
.wk-work-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: left;
}
.wk-work-card p:not(.wk-work-card__tag) {
  margin: 0;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '13'px→14px */
  color: #666666;
}

/* ----------------------------------------------------------------
   文字揃えの固定（sns.css と同じ考え方）
   本番の共通CSSは全要素を両端揃え（text-align: justify）にしている。
   見出し・ラベル・数値・タグ・カード見出しは左揃え（中央のものは中央）に固定し、本文段落だけ両端揃えのまま残す
   ---------------------------------------------------------------- */
.wk h1, .wk h2, .wk h3, .wk h4,
.wk-eyebrow, .wk-lead, .wk-hero__title, .wk-hero__summary,
.wk-basic__item dt, .wk-basic__item dd, .wk-tags li,
.wk-toc__label, .wk-toc__link,
.wk-numbered__num, .wk-card__num, .wk-card h3,
.wk-stat__label, .wk-stat__value,
.wk-flow__num, .wk-flow h3,
.wk-voice__name,
.wk-work-card__tag, .wk-work-card h3 {
  text-align: left;
  letter-spacing: 0;
  text-justify: none;
}
/* 中央揃えのままにする要素 */
.wk-voice__name { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .wk * {
    transition: none !important;
  }
}

/* ============ Tablet ============ */
@media (min-width: 768px) {
  .wk {
    font-size: 16px;
  }
  .wk-h2 {
    font-size: 28px;
  }
  .wk-hero__title {
    font-size: 28px;
  }
  .wk-basic__item:first-child {
    grid-column: auto;
  }
  .wk-basic__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .wk-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2026-10-11 3列まで（前は4列） */
  }
  .wk-stat__value {
    font-size: 32px;
  }
  .wk-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .wk-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============ PC（2カラム化） ============ */
@media (min-width: 1024px) {
  .wk-wrap {
    padding: 0 40px;
  }
  .wk-hero {
    /* 2026-09-24 余白の決まり: パンくず下端→題名上端／題名下端→中身上端 */
    padding: var(--space-breadcrumb-to-title) 0 var(--space-title-to-content);
  }
  /* デザイン（PC works.png）の実寸：タイトル 約68px・行高1.2、要約 18px #666、メイン画像 1200×約520・角丸24（2026-09-18 照合して修正） */
  /* 2026-10-06 本人指摘：PC で大きすぎた（最大68px）。40px に固定。スマホ 24px・タブレット 28px */
  .wk-hero__title {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 28px;
  }
  .wk-hero__summary {
    font-size: 18px;
    line-height: 1.8;
    color: #666666;
    max-width: none;
    margin-bottom: 28px;
  }
  .wk-hero__visual {
    aspect-ratio: 1200 / 520;
    border-radius: 24px;
  }
  .wk-h2 {
    font-size: 32px;
  }
  .wk-basic {
    padding-bottom: 32px;
  }

  /* 2カラム本文：左に目次（sticky）・右に各ブロックを積む。
     .wk-block を1ブロック=1section・入れ子なしのまま2カラムに見せるため、
     兄弟要素として並ぶ .wk-toc と .wk-block をひとつのgridに置き、両方を明示的に配置する（2026-09-18判断） */
  .wk-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 64px;
    align-items: start;
    padding: 48px 0 96px;
  }
  .wk-toc {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    /* 本番ヘッダー（下端100px。2026-09-21 65px→70pxに伸びた分を反映）に連動して top を切り替える（is-header-hidden時は0）。JSはsns.htmlの目次JSを流用 */
    position: sticky;
    top: 125px;
    transition: top var(--duration) var(--ease);
  }
  .wk-toc.is-header-hidden {
    top: 24px;
  }
  .wk-toc__nav {
    flex-direction: column;
    overflow: visible;
    white-space: normal;
    gap: 4px;
    border-left: 2px solid var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う */
    padding-left: 16px;
  }
  .wk-toc__link {
    border: 0;
    border-radius: 0;
    padding: 8px 0;
    background: none;
    color: #666666;
  }
  .wk-toc__link:hover {
    color: var(--color-primary);
  }
  .wk-toc__link.is-active {
    background: none;
    color: var(--color-primary);
  }
  .wk-toc__link.is-active .wk-toc__num {
    color: var(--color-primary);
  }
  .wk-block {
    grid-column: 2;
    padding: 0 0 48px;
  }
  .wk-block:last-of-type {
    padding-bottom: 0;
  }

  .wk-numbered li {
    padding: 20px 24px;
  }
  .wk-baf {
    max-width: 780px;
  }
  .wk-flow {
    grid-template-columns: repeat(var(--flow-steps, 5), 1fr);
  }
  .wk-flow li {
    border-left: 0;
    border-top: 3px solid var(--color-primary, #C10000);  /* 2026-09-24 本人決定: 赤は差し色として使う */
    padding: 16px 4px 0;
  }
  .wk-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .wk-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------------
   目次（スマホ）：右端をぼかして「続きがある」と見せる（sns.cssと同じ仕組み）
   ---------------------------------------------------------------- */
.wk-toc__nav[data-fade="right"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.wk-toc__nav[data-fade="both"]  { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.wk-toc__nav[data-fade="left"]  { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
@media (min-width: 1024px) {
  .wk-toc__nav[data-fade] { -webkit-mask-image: none; mask-image: none; } /* PCは縦並びなので不要 */
}

/* ----------------------------------------------------------------
   目次（スマホ）：追従＋いま見ているブロックの強調（sns.htmlの目次JSと対）
   本番ヘッダーはスマホで上30px・高さ70pxの浮いた帯（下端100px。2026-09-21 PCメニューの2段化とお問い合わせボタンの拡大で60px→70pxに伸びた）。その直下に貼り付ける
   ---------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wk-toc {
    position: sticky;
    top: 90px; /* JS が動かないときの備え：ヘッダーの下（90px）に並べて出す。JS が動いたら下の .is-auto-hide に切り替わる */
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin: 0 -20px 24px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-gray-light);
    transition: top var(--duration) var(--ease);
  }
  /* 目次の高さ約102pxより大きく取る。2026-09-21 本人決定：スマホではヘッダーと目次を同時に出さない（2つ並ぶと画面の上が約150px埋まり、浮いた帯と白い帯が並んで違和感があった）。ヘッダーが出ている間は目次を画面の外（上）に置き、ヘッダーが隠れたら .is-header-hidden の top:0 で出す。ヘッダーは60px（下端90px）。PCは従来どおり並べて出す */
  .wk-toc.is-auto-hide:not(.is-header-hidden) { top: -140px; }
  .wk-toc.is-header-hidden {
    top: 0;
  }
  .wk-block {
    scroll-margin-top: 106px; /* ヘッダー 90 ＋ 余白16。上へ戻るジャンプではヘッダーが出るので、その分を空ける（2026-09-21） */
  }
}

/* ============================================================
   WordPress に組み込んだときの実画像と、入力数が変わるブロック（2026-09-19 追加）
   見本は色の面（div）だけ。WordPress では同じ枠の中に <img> が入る。枠の比率は変えず、画像は切り抜いて収める
   ============================================================ */
.wk-hero__visual, .wk-baf__img, .wk-gallery__img, .wk-work-card__img, .wk-voice__avatar { overflow: hidden; }
.wk-hero__visual img, .wk-baf__img img, .wk-gallery__img img, .wk-work-card__img img, .wk-voice__avatar img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 工夫・成果を入力した数で均等割りにする指定（--cols）は 2026-10-11 にやめた（本人決定。件数が多いと1列が狭くなるため）。
   single-works.php が style="--cols: n" を出しているが、CSS では使わない */
/* 目次に出すブロックが1つも無い実績は、目次を出さず本文を全幅にする */
@media (min-width: 1024px) {
  .wk-layout--no-toc { grid-template-columns: 1fr; }
  .wk-layout--no-toc .wk-block { grid-column: 1; }
}
/* 概要の中の動画（YouTube）。16:9 の枠に収める。文章の箱の下に置く */
.wk-video { aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; background: #000; }
.wk-box + .wk-video, .wk-video + .wk-video { margin-top: 24px; }
.wk-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* メイン画像が未入力でギャラリーの1枚目を使うとき：切り抜かずに全体を収め、余白には同じ画像をぼかして敷く（2026-09-21） */
.wk-hero__visual--fit { position: relative; background: #212121; }
.wk-hero__visual--fit .wk-hero__visual-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(0.75); transform: scale(1.15); }
.wk-hero__visual--fit .wk-hero__visual-img { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* 動画の実績：冒頭の大きな画像の場所に動画のプレーヤーを置く。動画は切り抜けないので、枠は 16:9 にする（2026-09-21 本人決定） */
.wk-hero__visual.wk-hero__visual--video { aspect-ratio: 16 / 9; background: #000; }
.wk-hero__visual--video iframe { display: block; width: 100%; height: 100%; border: 0; }