@charset "UTF-8";
/* =========================================================
   Post / Article / Project detail — shared typography & layout
   - /works/[slug]/   project detail
   - /journal/[slug]/ article detail
   - /topics/[slug]/  news detail
========================================================= */

/* ---- Common: post hero --------------------------------- */
.post-hero {
  padding: clamp(120px, 16vw, 200px) 0 clamp(60px, 8vw, 100px);
  background: #ffffff;
}
.post-hero .breadcrumb { margin-bottom: 28px; }
.post-hero .meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px; margin-bottom: 18px;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub);
}
/* 2026-05-05: 英語(.cat) を大、日本語(h1) を小 — /journal/ の見出し参考 */
.post-hero .meta .cat {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-black);
  font-family: var(--font-en);
  font-size: 37px;
  font-weight: 300;
  letter-spacing: .34em;
  line-height: 1;
}
.post-hero .meta .date {
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--c-sub);
}
.post-hero h1 {
  font-family: var(--font-serif-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 30px 0;
}
@media (max-width: 800px) {
  .post-hero .meta .cat { font-size: 36px; line-height: 60px; letter-spacing: 6px; }   /* #3752 lh->60 / ls 12.2px->6px */
}

/* 2026-05-05: 単一記事詳細ページは記事タイトルが主役 — h1 を大きく、cat を小バッジへ */
body.single .post-hero h1 {
  font-family: var(--font-serif-jp);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 28px 0;
}
body.single .post-hero .meta .cat {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.24em;
  line-height: 1.5;
  color: var(--c-black);
  font-family: var(--font-en);
}
body.single .post-hero .meta {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.18em;
  margin-bottom: 24px;
}

/* 2026-05-05: post-hero-text 内のタグと著者ブロック */
.post-hero .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.post-hero .hero-tags .tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text);
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.post-hero .hero-tags .tag:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: #fff;
}
/* 2026-05-05: Post Views Counter プラグインの自動表示を非表示 */
.post-views-icon,
.post-views-label,
.post-views-count { display: none !important; }

/* 2026-05-05: hero-author レイアウト
   上: WRITER ラベル + 名前(大・英字bold) + 役職(小・グレー)
   下: アバター(左) + bio + sns(右) */
.post-hero .hero-author {
  display: block;
  padding: 40px 0 0;
  margin: 0;
}
.post-hero .hero-author .label {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-sub);
  margin-bottom: 5px;
}
.post-hero .hero-author .name-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.post-hero .hero-author .name-block a,
.post-hero .hero-author .name-block .name {
  font-family: var(--font-en);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-black);
  text-decoration: none;
}
.post-hero .hero-author .name-block a:hover { text-decoration: underline; }
.post-hero .hero-author .name-block .role {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 0.04em;
}
.post-hero .hero-author-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.post-hero .hero-author .avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.post-hero .hero-author .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-hero .hero-author .info {
  flex: 1;
  min-width: 0;
}
.post-hero .hero-author .info .bio {
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--c-text);
  margin: 0 0 12px;
}
.post-hero .hero-author .sns {
  display: inline-flex;
  gap: 12px;
  margin-top: 4px;
}
.post-hero .hero-author .sns a {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--c-sub);
  transition: color .25s ease;
}
.post-hero .hero-author .sns a:hover { color: var(--c-black); }
.post-hero .hero-author .sns svg { width: 14px; height: 14px; fill: currentColor; }

/* 単カラム時はそのまま */
.post-hero .post-hero-grid { display: block; }

/* 2カラム（has-feature 時）: 左テキスト / 右アイキャッチ */
.post-hero.has-feature .post-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.post-hero.has-feature .post-hero-text {
  padding: 12px 0;
}
.post-hero-feature .frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.post-hero-feature .frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .post-hero.has-feature .post-hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .post-hero-feature .frame { aspect-ratio: 16 / 9; }
}

/* ---- Legacy: featured image (after-hero 単独) — 互換維持 ---- */
.post-feature {
  background: var(--c-bg);
  padding: 0 0 clamp(60px, 8vw, 100px);
}
.post-feature .frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.post-feature .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Common: prose body --------------------------------- */
.post-body {
  background: #ffffff;
  padding: 0 0 clamp(80px, 10vw, 140px);
}
.post-body .prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 15px; line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--c-text);
}

/* Journal archive card: image-left + text-right at desktop, stacked at SP */
@media (max-width: 760px) {
  .journal-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 32px !important;
  }
  .journal-card .img { width: 100%; }
}

/* ---- Blog detail: 2-col layout (article + right sidebar) -------------
   .post-body.has-blog-sidebar > .container > .blog-grid > article + aside */
.post-body.has-blog-sidebar .blog-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr clamp(240px, 22vw, 300px);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.post-body.has-blog-sidebar .prose { max-width: none; margin: 0; }
@media (max-width: 900px) {
  .post-body.has-blog-sidebar .blog-grid { grid-template-columns: 1fr; }
}
/* 2026-05-05: 左サイド sticky TOC（voice 詳細など） */
.post-body.has-blog-sidebar .blog-grid.blog-grid-left {
  grid-template-columns: clamp(220px, 20vw, 260px) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .post-body.has-blog-sidebar .blog-grid.blog-grid-left { grid-template-columns: 1fr; }
}

/* The sidebar itself */
.blog-sidebar {
  position: sticky;
  top: clamp(100px, 12vh, 140px);
  font-size: 13px;
  align-self: start;
}
@media (max-width: 900px) {
  .blog-sidebar {
    position: static;
    margin-top: clamp(60px, 8vw, 80px);
    padding-top: clamp(40px, 5vw, 60px);
    border-top: 1px solid var(--c-line);
  }
}

.blog-sidebar .widget {
  padding-bottom: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 0;
}
.blog-sidebar .widget:last-child { margin-bottom: 0; }
.blog-sidebar .widget-title {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--c-black);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-black);
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.blog-sidebar .widget-title .ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--c-sub);
}

/* TOC widget — 左にドット、アクティブ項目は黒丸＋少し大きく、縦線でつながる */
.blog-sidebar .toc-list {
  list-style: none;
  padding: 0 0 0 18px;
  margin: 0;
  font-size: 13px;
  max-height: 420px;
  overflow-y: auto;
  position: relative;
}
.blog-sidebar .toc-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px; bottom: 14px;
  width: 1px;
  background: var(--c-line);
}
.blog-sidebar .toc-list li {
  padding: 0;
  position: relative;
}
.blog-sidebar .toc-list li.h3 { padding-left: 14px; }
.blog-sidebar .toc-list li::before {
  content: '';
  position: absolute;
  left: -18px; top: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  box-sizing: border-box;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.blog-sidebar .toc-list li.h3::before { left: -4px; width: 6px; height: 6px; top: 17px; }
.blog-sidebar .toc-list a {
  display: block;
  padding: 8px 0;
  color: var(--c-sub);
  line-height: 1.7;
  letter-spacing: 0.04em;
  transition: color .25s ease, padding-left .3s ease;
}
.blog-sidebar .toc-list a:hover { color: var(--c-black); }
.blog-sidebar .toc-list li.is-active > a {
  color: var(--c-black);
  font-weight: 500;
}
.blog-sidebar .toc-list li.is-active::before {
  background: var(--c-black);
  border-color: var(--c-black);
  transform: scale(1.15);
}

/* Categories widget */
.blog-sidebar .cat-list {
  list-style: none;
  padding: 0; margin: 0;
}
.blog-sidebar .cat-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--c-line);
}
.blog-sidebar .cat-list li:last-child { border-bottom: none; }
.blog-sidebar .cat-list a {
  flex: 1;
  font-size: 13px;
  color: var(--c-text);
  letter-spacing: 0.06em;
  transition: color .25s ease;
}
.blog-sidebar .cat-list a:hover { color: var(--c-black); }
.blog-sidebar .cat-list .count {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-sub);
}
.blog-sidebar .cat-list li.is-current a { color: var(--c-black); font-weight: 500; }

/* Ranking widget */
.blog-sidebar .rank-list {
  list-style: none;
  padding: 0; margin: 0;
  counter-reset: rank;
}
.blog-sidebar .rank-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--c-line);
  align-items: start;
}
.blog-sidebar .rank-item:last-child { border-bottom: none; }
.blog-sidebar .rank-item .img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg);
  position: relative;
}
.blog-sidebar .rank-item .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.blog-sidebar .rank-item:hover .img img { transform: scale(1.05); }
.blog-sidebar .rank-item .img::before {
  counter-increment: rank;
  content: counter(rank);
  position: absolute;
  top: 4px; left: 4px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  background: var(--c-black);
  border-radius: 50%;
  z-index: 1;
}
.blog-sidebar .rank-item .body {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.blog-sidebar .rank-item .meta {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-sub);
}
.blog-sidebar .rank-item .title {
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-black);
  letter-spacing: 0.04em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* No-thumbnail variant — NEWS RECENT / RELATED 等で使用 */
.blog-sidebar .rank-list-no-thumb .rank-item {
  grid-template-columns: 1fr;
  gap: 6px;
}
.blog-sidebar .rank-list-no-thumb .rank-item .img { display: none; }
.blog-sidebar .rank-list-no-thumb .rank-item .body { padding-top: 0; }
.post-body .prose > * + * { margin-top: 1.6em; }
/* prose 内の画像（直接 <img> や <figure>/<p> でラップされたもの）は上下 60px の余白 */
.post-body .prose img,
.post-body .prose figure,
.post-body .prose p > img,
.post-body .prose p:has(> img) { margin-top: 60px; margin-bottom: 60px; }
.post-body .prose img { display: block; height: auto; }
.post-body .prose h2 {
  font-family: var(--font-serif-jp);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500; line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--c-black);
  margin-top: 60px;
  padding-top: 0;
  border-top: 0;
}
.post-body .prose h3 {
  font-size: 17px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-top: 2em;
}
.post-body .prose p { margin-top: 1.4em; }
.post-body .prose strong { font-weight: 500; color: var(--c-black); }
.post-body .prose a { border-bottom: 1px solid var(--c-line); transition: border-color .25s ease; }
.post-body .prose a:hover { border-bottom-color: var(--c-black); }
/* prose 内の <ul>/<ol> をサイトトーンに合わせた装飾に
 *  - 共通: list-style 解除、余白を上下に少し
 *  - <ul>: 左に細い罫線 + 各項目の頭に小さな黒いダッシュ
 *  - <ol>: counter で「01.」のような Jost 数字を頭に表示
 */
.post-body .prose ul,
.post-body .prose ol {
  list-style: none;
  padding: 0;
  margin: 1.6em 0;
}
.post-body .prose ul > li,
.post-body .prose ol > li {
  position: relative;
  padding: 0.4em 0 0.4em 1.6em;
  margin: 0;
  line-height: 1.95;
  color: var(--c-text);
}
.post-body .prose ul > li + li,
.post-body .prose ol > li + li {
  border-top: 1px dashed var(--c-line);
}

/* <ul> 用 — 短い横ダッシュ */
.post-body .prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 12px;
  height: 1px;
  background: var(--c-black);
}

/* <ol> 用 — Jost の 01 / 02 / 03 ... */
.post-body .prose ol { counter-reset: prose-ol; }
.post-body .prose ol > li {
  padding-left: 2.4em;
  counter-increment: prose-ol;
}
.post-body .prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.4em;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  line-height: inherit;
}

/* ネスト時はベースを返す（既存の意味どおりに） */
.post-body .prose ul ul,
.post-body .prose ol ol,
.post-body .prose ul ol,
.post-body .prose ol ul {
  margin: 0.4em 0 0;
}
.post-body .prose blockquote {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  border-left: 2px solid var(--c-black);
  background: var(--c-bg-soft);
  font-family: var(--font-serif-jp);
  font-size: 15px; line-height: 2.0; color: var(--c-text);
}
.post-body .prose figure {
  margin: 2.4em 0;
}
.post-body .prose figure img {
  width: 100%; display: block;
  background: var(--c-bg-soft);
}
.post-body .prose figure figcaption {
  margin-top: 14px;
  font-size: 12px; line-height: 1.8;
  letter-spacing: 0.06em; color: var(--c-sub);
  text-align: center;
}
.post-body .prose hr {
  border: none;
  border-top: 1px solid var(--c-line);
  margin: 3em auto;
  width: 80px;
}

/* ---- Prose内 タグ（h1直下） -------------------------------- */
.prose-tags {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.prose-tags .tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub);
  padding: 5px 13px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line) !important;
  transition: color .25s ease, border-color .25s ease;
}
.prose-tags .tag:hover {
  color: var(--c-black);
  border-color: var(--c-black) !important;
}

/* ---- Prose内 著者カード（タグの下・本文の前） ---------------- */
.prose-author {
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--c-line);
}
.prose-author-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}
.prose-author-card .avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg);
}
.prose-author-card .avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.prose-author-card .info {
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.prose-author-card .label {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--c-sub);
}
.prose-author-card .name-block {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
}
.prose-author-card .name-block .name,
.prose-author-card .name-block a {
  font-size: 17px; font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.06em;
  border-bottom: none;
}
.prose-author-card .name-block a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.prose-author-card .name-block a:hover { border-bottom-color: var(--c-black); }
.prose-author-card .name-block .role {
  font-size: 12px; color: var(--c-sub);
  letter-spacing: 0.08em;
}
.prose-author-card .bio {
  margin: 4px 0 0;
  font-size: 13px; line-height: 2.0;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.prose-author-card .sns {
  display: flex; gap: 14px; margin-top: 4px;
}
.prose-author-card .sns a {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-black);
  border-bottom: none !important;
  transition: opacity .25s ease;
}
.prose-author-card .sns a:hover { opacity: 0.55; }
.prose-author-card .sns svg { width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 600px) {
  .prose-author-card {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
  .prose-author-card .avatar { width: 80px; height: 80px; }
}

/* ---- Common: tag list ----------------------------------- */
.post-tags {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 720px;
}
.post-body:not(.has-blog-sidebar) .post-tags {
  margin-left: auto; margin-right: auto;
}
.post-body.has-blog-sidebar .post-tags {
  max-width: none;
}
.post-tags .tag {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub);
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}

/* ---- Common: author card (大きめサークル＋右側にbio/name/sns) -------- */
.post-author {
  background: var(--c-bg-soft);
  padding: clamp(80px, 10vw, 140px) 0 0;
}
.post-author .author-card {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 320px) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding: 0 var(--pad-x) clamp(48px, 6vw, 72px);
  border-bottom: 1px dotted var(--c-line);
}
.post-author .author-card .avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-bg);
}
.post-author .author-card .avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.post-author .author-card .info {
  display: flex; flex-direction: column;
  height: 100%;
  min-height: clamp(220px, 26vw, 320px);
  padding: clamp(20px, 3vw, 40px) 0 0;
}
.post-author .author-card .bio {
  font-size: 15px;
  line-height: 2.1;
  color: var(--c-text);
  letter-spacing: 0.06em;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.post-author .author-card .name-block {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 6px;
}
.post-author .author-card .name {
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: 0.06em;
}
.post-author .author-card .role {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.post-author .author-card .sns {
  position: absolute;
  right: var(--pad-x);
  display: flex; gap: 18px;
  margin-top: 24px;
}
.post-author .author-card .sns a {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-black);
  transition: opacity .25s ease;
}
.post-author .author-card .sns a:hover { opacity: 0.6; }
.post-author .author-card .sns svg {
  width: 100%; height: 100%; fill: currentColor;
}

/* sns is positioned absolutely against author-card */
.post-author .author-card { position: relative; }
.post-author .author-card .sns {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(48px, 6vw, 72px);
}

@media (max-width: 700px) {
  .post-author .author-card {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
  .post-author .author-card .avatar { width: 160px; height: 160px; }
  .post-author .author-card .info { min-height: 0; padding-top: 8px; }
  .post-author .author-card .bio { margin-bottom: 24px; font-size: 14px; }
  .post-author .author-card .sns { position: static; margin-top: 24px; }
}
@media (max-width: 480px) {
  .post-author .author-card { grid-template-columns: 1fr; }
  .post-author .author-card .avatar { width: 140px; height: 140px; margin: 0 auto; }
  .post-author .author-card .info { text-align: left; }
}

/* ---- Common: related posts ------------------------------ */
.post-related {
  background: transparent;
  padding: clamp(80px, 10vw, 140px) 0;
}
.post-related .section-head .en-label {
  font-size: clamp(20px, 2.4vw, 30px);
  margin-bottom: 10px;
}
.post-related .section-head h2 {
  font-size: 12px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.post-related .related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
  margin-top: -20px;
}
.post-related .related-card {
  display: block;
}
.post-related .related-card .img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: 20px;
}
.post-related .related-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.post-related .related-card:hover .img img { transform: scale(1.04); }
.post-related .related-card .meta {
  display: flex; gap: 14px;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub);
  margin-bottom: 10px;
}
.post-related .related-card h3 {
  font-size: 15px; line-height: 1.7;
  font-weight: 500; color: var(--c-black);
  letter-spacing: 0.06em;
}
@media (max-width: 800px) {
  .post-related .related-grid { grid-template-columns: 1fr; }
}

/* 関連プロジェクトが 1 件のときの中央寄せ（旧 single-voice.php インライン style から集約） */
.post-related .related-grid.is-single { grid-template-columns: 1fr; }
.post-related .related-card.is-single { max-width: 720px; margin-inline: auto; }

/* project 詳細の課題 / 進め方 本文（旧 single-project.php インライン style から集約） */
.project-section .prose.is-narrow { max-width: 720px; margin: clamp(40px, 5vw, 64px) auto 0; }

/* ---- Related list（NEWS 詳細など、サムネ無しの行リスト） -------- */
.post-related-list .related-list {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 920px;
  border-top: 1px solid var(--c-line);
}
.post-related-list .related-list > li {
  border-bottom: 1px solid var(--c-line);
}
.post-related-list .related-row {
  display: grid;
  grid-template-columns: 110px 90px 1fr 24px;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(20px, 2.5vw, 28px) 8px;
  text-decoration: none;
  transition: background .25s ease;
}
.post-related-list .related-row:hover { background: var(--c-bg-soft); }
.post-related-list .related-row .date {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-text);
}
.post-related-list .related-row .cat {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-black);
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-soft);
}
.post-related-list .related-row .title {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-black);
  letter-spacing: 0.04em;
}
.post-related-list .related-row .arr {
  font-family: var(--font-en);
  color: var(--c-sub);
  text-align: right;
  transition: transform .3s, color .3s;
}
.post-related-list .related-row:hover .arr {
  transform: translateX(4px);
  color: var(--c-black);
}
@media (max-width: 700px) {
  .post-related-list .related-row {
    grid-template-columns: 90px 70px 1fr;
    gap: 12px;
    padding: 16px 4px;
  }
  .post-related-list .related-row .arr { display: none; }
  .post-related-list .related-row .title { font-size: 13px; }
}

/* ---- Like ボタン（prose 末尾に配置） ------------------- */
.prose-like {
  margin: 80px 0 0 !important;
  padding: clamp(32px, 4vw, 48px) clamp(20px, 3vw, 36px);
  border: 0;
  border-radius: 0;
  background: #f7f7f7;
  text-align: center;
}
.prose-like-prompt {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.prose-like .like-btn {
  appearance: none;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 12px 24px;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  font-family: var(--font-jp);
  color: var(--c-text);
  letter-spacing: 0.06em;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .2s ease;
}
.prose-like .like-btn:hover {
  border-color: var(--c-black);
  color: var(--c-black);
}
.prose-like .like-btn:active { transform: scale(0.96); }
.prose-like .like-btn .like-icon {
  width: 20px; height: 20px;
  color: var(--c-sub);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .25s ease, transform .3s ease;
}
.prose-like .like-btn .like-icon svg { width: 100%; height: 100%; }
.prose-like .like-btn:hover .like-icon { color: #d96b6b; }
.prose-like .like-btn .like-count {
  font-family: var(--font-en);
  font-size: 17px; font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.04em;
  min-width: 1.6em;
}
.prose-like .like-btn .like-label {
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub);
}
.prose-like .like-btn.is-liked {
  background: var(--c-black);
  border-color: var(--c-black);
  color: #fff;
}
.prose-like .like-btn.is-liked .like-icon { color: #fff; }
.prose-like .like-btn.is-liked .like-icon svg { fill: currentColor; }
.prose-like .like-btn.is-liked .like-count,
.prose-like .like-btn.is-liked .like-label { color: #fff; }
.prose-like .like-btn.is-popping .like-icon { animation: like-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Common: pager (prev / next) ------------------------ */
.post-pager {
  background: transparent;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.post-pager .pager-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: 110px;
}
.post-pager .pager-grid > * {
  padding: 32px clamp(20px, 3vw, 40px);
}
.post-pager .pager-grid > a {
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: var(--c-sub);
  letter-spacing: 0.06em;
  transition: color .25s ease;
}
.post-pager .pager-grid > a:hover { color: var(--c-black); }
.post-pager .pager-grid .prev { justify-self: start; }
.post-pager .pager-grid .next { justify-self: end; flex-direction: row-reverse; }
.post-pager .pager-grid .index {
  justify-self: center;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--c-sub);
  border-left: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  text-align: center;
}
.post-pager .pager-grid .arr {
  width: 32px; height: 1px; background: currentColor;
  position: relative; flex-shrink: 0;
  transition: width .3s ease;
}
.post-pager .pager-grid .arr::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  top: -3px;
}
.post-pager .pager-grid .prev .arr::after { left: 0; transform: rotate(-135deg); }
.post-pager .pager-grid .next .arr::after { right: 0; transform: rotate(45deg); }
.post-pager .pager-grid > a:hover .arr { width: 48px; }
@media (max-width: 700px) {
  .post-pager .pager-grid { grid-template-columns: 1fr; }
  .post-pager .pager-grid .index { border: none; padding: 16px 20px; }
  .post-pager .pager-grid > * { padding: 16px 20px; }
  .post-pager .pager-grid .next { justify-self: stretch; flex-direction: row; }
  .post-pager .pager-grid .prev { justify-self: stretch; }
}

/* =========================================================
   Project (works) detail-specific
========================================================= */
.project-overview {
  background: var(--c-bg-soft);
  padding: clamp(80px, 10vw, 140px) 0;
}
.project-overview .overview-grid {
  display: grid; grid-template-columns: 280px 1fr;
  gap: clamp(40px, 6vw, 100px);
  max-width: 1100px; margin: 0 auto;
}
.project-overview .meta-table {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--c-line);
}
.project-overview .meta-table .row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 20px; padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.project-overview .meta-table .label {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-sub); padding-top: 2px;
}
.project-overview .meta-table .value {
  font-size: 14px; line-height: 1.9;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.project-overview .summary p {
  font-size: 15px; line-height: 2.2;
  letter-spacing: 0.06em; color: var(--c-text);
}
.project-overview .summary p + p { margin-top: 1.4em; }

@media (max-width: 800px) {
  .project-overview .overview-grid { grid-template-columns: 1fr; }
}

.project-section {
  background: var(--c-bg);
  padding: clamp(80px, 10vw, 140px) 0;
}
.project-section + .project-section { background: var(--c-bg-soft); }
.project-section + .project-section + .project-section { background: var(--c-bg); }

.project-section .lead {
  max-width: 720px; margin: 32px auto 0;
  font-size: 15px; line-height: 2.2;
  letter-spacing: 0.06em; color: var(--c-text);
}

/* Approach steps */
.approach-list {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex; flex-direction: column;
  gap: clamp(56px, 7vw, 100px);
  max-width: 1080px; margin-left: auto; margin-right: auto;
}
.approach-step {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.approach-step.alt { direction: rtl; }
.approach-step.alt > * { direction: ltr; }
.approach-step .img {
  aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--c-bg-soft);
}
.approach-step .img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.approach-step:hover .img img { transform: scale(1.04); }
.approach-step .body .num {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.32em;
  color: var(--c-sub); display: inline-flex;
  align-items: center; gap: 14px; margin-bottom: 24px;
}
.approach-step .body .num::after {
  content: ''; width: 32px; height: 1px;
  background: var(--c-sub);
}
.approach-step .body h3 {
  font-family: var(--font-serif-jp);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500; line-height: 1.7;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.approach-step .body p {
  font-size: 14px; line-height: 2.2;
  letter-spacing: 0.06em; color: var(--c-text);
}
.approach-step .body p + p { margin-top: 1em; }
@media (max-width: 800px) {
  .approach-step, .approach-step.alt { grid-template-columns: 1fr; direction: ltr; }
  .approach-step .img { aspect-ratio: 16 / 11; }
}

/* Result / quote */
.result-block {
  max-width: 880px; margin: clamp(48px, 6vw, 80px) auto 0;
}
.result-block .quote {
  font-family: var(--font-serif-jp);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.95; letter-spacing: 0.08em;
  color: var(--c-black); text-align: center;
  padding: clamp(40px, 5vw, 60px) clamp(24px, 4vw, 60px);
  background: var(--c-bg-soft);
  position: relative;
}
.result-block .quote::before,
.result-block .quote::after {
  content: '';
  position: absolute; width: 28px; height: 1px;
  background: var(--c-black);
}
.result-block .quote::before { top: 32px; left: 32px; }
.result-block .quote::after { bottom: 32px; right: 32px; }
.result-block .attribution {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--c-sub);
}
.result-block .attribution .name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; letter-spacing: 0.08em;
  color: var(--c-black); margin-left: 14px;
}

/* Gallery */
.project-gallery {
  background: var(--c-bg);
  padding: clamp(80px, 10vw, 140px) 0;
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(40px, 5vw, 64px);
}
.gallery-grid .gimg {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-bg-soft);
}
.gallery-grid .gimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.gallery-grid .gimg:hover img { transform: scale(1.04); }
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Works / Project 詳細ページ — mitonedesign 風ミニマル
   （静的版 /works/[slug]/ のインラインCSSを移植）
========================================================= */
.work-mv {
  padding: clamp(120px, 16vw, 200px) 0 clamp(40px, 5vw, 64px);
  background: #ffffff;
}
.work-mv .breadcrumb { margin-bottom: 24px; }
.work-mv .cat-tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--c-sub);
  padding: 0;
  border: 0;
  margin-bottom: 28px;
}
.work-mv h1 {
  font-family: var(--font-serif-jp);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500; line-height: 1.55;
  letter-spacing: 0.06em; color: var(--c-black);
  margin: 0;
}

.work-hero {
  background: #ffffff;
  padding: clamp(20px, 3vw, 40px) 0 clamp(30px, 4vw, 50px);
}
.work-hero .frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.work-hero .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.work-overview {
  background: #ffffff;
  padding: clamp(60px, 8vw, 120px) 0;
}
/* 2カラム（meta-table 220px + content 720px） — 全体を 1000px に揃えて container 内で中央寄せ */
.work-overview .grid {
  max-width: 1000px; margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
  justify-content: center;
}
.work-overview .meta-table {
  border-top: 1px solid var(--c-line);
  position: sticky;
  top: clamp(100px, 12vh, 140px);
}
/* クリック可能なサービス/業種チップ */
.work-overview .meta-table .value.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.work-overview .meta-table .value.chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line); /* 既定の .value a の下線を打ち消し */
  border-radius: 999px;
  text-decoration: none;
  transition: all .2s ease;
  line-height: 1.5;
}
.work-overview .meta-table .value.chips .chip:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: #fff;
}
.work-overview .meta-table .row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}
.work-overview .meta-table .row .label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-sub);
  text-transform: uppercase;
}
.work-overview .meta-table .row .value {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-black);
  letter-spacing: 0.04em;
}
.work-overview .meta-table .label {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--c-sub); padding-top: 2px;
}
.work-overview .meta-table .value {
  font-size: 13px; line-height: 1.85;
  color: var(--c-text); letter-spacing: 0.06em;
}
.work-overview .meta-table .value a { border-bottom: 1px solid var(--c-line); }
.work-overview .meta-table .value a:hover { border-bottom-color: var(--c-black); }

.work-overview .concept .h2 {
  font-family: var(--font-serif-jp);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500; line-height: 1.7;
  letter-spacing: 0.08em; color: var(--c-black);
  margin: 40px 0;                    /* #4138 56->40 / 上40 */
  padding-bottom: 0;                 /* #4138 48->0 */
  border-bottom: 1px solid var(--c-line);
}
.work-overview .concept p {
  font-size: 15px; line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin-bottom: 1.6em;
}
/* concept 内に the_content() を入れた .prose 用 */
.work-overview .concept .prose {
  max-width: none; margin: 0;
  font-size: 15px; line-height: 2.2;
  letter-spacing: 0.06em; color: var(--c-text);
}
.work-overview .concept .prose img {
  max-width: 100%; height: auto;
  display: block; margin: 0.5em 0;
}
.work-overview .concept .prose figure { margin: 2em 0; }
.work-overview .concept .prose figure img { margin: 0; }
.work-overview .concept .prose h2,
.work-overview .concept .prose h2.add_ttl {
  font-family: var(--font-serif-jp);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500; line-height: 1.7;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-top: 0; margin-bottom: 0.6em;
  padding-left: 0;
}
.work-overview .concept .prose h2.add_ttl {
  position: relative;
  padding-left: 16px;
  margin-top: 0;
}
.work-overview .concept .prose h2.add_ttl::before {
  content: ''; position: absolute;
  left: 0; top: 0;
  width: 4px; height: 2em;
  background: var(--c-black);
  margin-bottom: 20px;
}
.work-overview .concept .prose h3 {
  font-size: 16px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-top: 1.8em; margin-bottom: 0.4em;
}
.work-overview .concept .prose blockquote {
  margin: 2em 0;
  padding: 1.2em 1.4em;
  border-left: 2px solid var(--c-black);
  background: var(--c-bg-soft);
  font-family: var(--font-serif-jp);
}
.work-overview .concept .prose ul,
.work-overview .concept .prose ol { padding-left: 1.4em; margin: 1.2em 0; }
.work-overview .concept .prose li { margin: 0.4em 0; line-height: 2.0; }
.work-overview .concept .prose strong { font-weight: 500; color: var(--c-black); }
.work-overview .concept .prose a { border-bottom: 1px solid var(--c-line); }
.work-overview .concept .prose a:hover { border-bottom-color: var(--c-black); }

@media (max-width: 800px) {
  /* 2026-06-13 #1505: 1fr の auto-minimum が prose 内の img(900px) に引っ張られて
     track 全体が 900px に成長していたため、minmax(0, 1fr) で抑え込む */
  .work-overview .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 100%; }
  .work-overview .meta-table { position: static; min-width: 0; max-width: 100%; }
  .work-overview .meta-table .row,
  .work-overview .meta-table .row .label,
  .work-overview .meta-table .row .value,
  .work-overview .meta-table .label,
  .work-overview .meta-table .value { min-width: 0; max-width: 100%; }
  .work-overview .meta-table .value { overflow-wrap: anywhere; word-break: break-word; }
  .work-overview .concept { min-width: 0; max-width: 100%; overflow: hidden; }
  /* .prose 外の素の img / iframe / video も含めて強制縮小 */
  .work-overview .concept img,
  .work-overview .concept iframe,
  .work-overview .concept video,
  .work-overview .concept table { max-width: 100% !important; height: auto; }
}

.work-shot {
  background: var(--c-bg);
  padding: clamp(40px, 5vw, 80px) 0;
}
.work-shot .frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.work-shot.split { padding: clamp(24px, 3vw, 48px) 0; }
.work-shot.split .grid {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 16px);
}
.work-shot.split .frame { aspect-ratio: 4 / 5; }
.work-shot .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.work-pager {
  background: #ffffff;
  border-top: 1px solid var(--c-line);
  padding: clamp(60px, 8vw, 100px) 0;
}
.work-pager .grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.work-pager .back,
.work-pager .next-link {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--c-black);
}
.work-pager .next-link { justify-content: flex-end; }
.work-pager .arr {
  width: 36px; height: 1px; background: currentColor;
  position: relative; transition: width .3s ease;
  flex-shrink: 0;
}
.work-pager .arr::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  top: -3px;
}
.work-pager .back .arr::after { left: 0; transform: rotate(-135deg); }
.work-pager .next-link .arr::after { right: 0; transform: rotate(45deg); }
.work-pager .back:hover .arr,
.work-pager .next-link:hover .arr { width: 56px; }
.work-pager .next-link .ja { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; }
@media (max-width: 700px) {
  .work-pager .grid { grid-template-columns: 1fr; gap: 32px; }
  .work-pager .next-link { justify-content: flex-start; }
}

/* ==========================================================================
   JOURNAL 本文タグ装飾（h1-h6 / table / dl / kbd / mark / 引用 etc）
   ========================================================================== */
.post-body .prose h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--c-black);
  margin-top: 2.8em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--c-black);
}
.post-body .prose h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--c-black);
  margin-top: 2em;
  padding-left: 14px;
  border-left: 2px solid var(--c-black);
}
.post-body .prose h5 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--c-sub);
  margin-top: 1.8em;
  text-transform: uppercase;
}
.post-body .prose h6 {
  font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--c-sub);
  margin-top: 1.6em;
  text-transform: uppercase;
}

/* テーブル */
.post-body .prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 14px;
  line-height: 1.9;
}
.post-body .prose table thead {
  border-top: 2px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  background: var(--c-bg-soft);
}
.post-body .prose table th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.04em;
}
.post-body .prose table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  vertical-align: top;
}
.post-body .prose table tbody tr:hover { background: rgba(0,0,0,.02); }
.post-body .prose table caption {
  caption-side: top;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-sub);
  margin-bottom: 8px;
  text-align: left;
}

/* 定義リスト */
.post-body .prose dl {
  margin: 1.8em 0;
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 8px 24px;
  padding-top: 1em;
  border-top: 1px solid var(--c-line);
}
.post-body .prose dt {
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.06em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.post-body .prose dd {
  margin: 0;
  color: var(--c-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}

/* インラインタグ */
.post-body .prose code {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.9em;
  background: #f4f4f2;
  padding: 2px 6px;
  border-radius: 3px;
  color: #b14242;
}
.post-body .prose pre {
  background: #1a1a1a;
  color: #f4f4f4;
  padding: 1.4em 1.6em;
  margin: 2em 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 0;
}
.post-body .prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.post-body .prose mark {
  background: linear-gradient(transparent 60%, rgba(255, 220, 100, .55) 60%);
  padding: 0 4px;
}
.post-body .prose kbd {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Menlo', monospace;
  font-size: 0.85em;
  color: var(--c-black);
}
.post-body .prose abbr {
  border-bottom: 1px dotted var(--c-sub);
  cursor: help;
}
.post-body .prose small { font-size: 0.85em; color: var(--c-sub); }
.post-body .prose sub, .post-body .prose sup {
  font-size: 0.75em; line-height: 0;
}
.post-body .prose details {
  margin: 1.6em 0;
  padding: 1em 1.4em;
  background: var(--c-bg-soft);
  border-left: 2px solid var(--c-line);
}
.post-body .prose details > summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.04em;
}
.post-body .prose details[open] > summary { margin-bottom: 1em; }

@media (max-width: 600px) {
  .post-body .prose table { font-size: 13px; }
  .post-body .prose table th,
  .post-body .prose table td { padding: 10px 12px; }
  .post-body .prose dl { grid-template-columns: 1fr; gap: 4px; }
  .post-body .prose dt { padding-bottom: 4px; border-bottom: none; }
  .post-body .prose dd { padding-bottom: 12px; }
}

/* =========================================================
   Archive: /works/  — フィルタバー + ピル + ページネーション
   archive-works.php から移植（旧インライン<style>）
========================================================= */
.works-filter {
  background: #ffffff;
  border-top: 0;     /* #1808 上下ボーダー撤去 */
  border-bottom: 0;
  padding: 40px 0 !important;  /* #1808 60→40 */
}
.post-hero + .works-filter { margin-top: clamp(-60px, -7vw, -90px); }
.works-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0; flex-wrap: wrap; min-height: 0;
}
.works-filter-bar > p,
.works-filter-bar > p.works-filter-status { margin: 0; }
.works-filter > .container { padding-top: 0; padding-bottom: 0; }
.works-filter-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 18px;
  background: transparent;
  border: 1px solid var(--c-black);
  border-radius: 999px;
  font: inherit; color: var(--c-black);
  font-size: 13px; letter-spacing: 0.08em;
  cursor: pointer; transition: all .2s ease;
}
.works-filter-toggle:hover { background: var(--c-black); color: #fff; }
.works-filter-toggle .wf-toggle-label { display: inline-flex; align-items: center; gap: 10px; }
.works-filter-toggle .wf-icon { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; }
.works-filter-toggle .wf-icon span { display: block; height: 1px; background: currentColor; }
.works-filter-toggle .wf-icon span:nth-child(1) { width: 100%; }
.works-filter-toggle .wf-icon span:nth-child(2) { width: 70%; }
.works-filter-toggle .wf-icon span:nth-child(3) { width: 40%; }
.works-filter-toggle .wf-state {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.16em; opacity: 0.7;
}
.works-filter-status {
  margin: 0; font-size: 13px; color: var(--c-sub); letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.works-filter-status .wf-current { color: var(--c-text); }
.works-filter-status .wf-current strong { font-weight: 500; color: var(--c-black); }
.works-filter-status .wf-clear {
  margin-left: 12px; color: var(--c-sub);
  border-bottom: 1px solid var(--c-line); padding-bottom: 1px;
}
.works-filter-status .wf-count { color: var(--c-text); }
.works-filter-status .filter-count {
  font-family: var(--font-en); font-size: 16px; color: var(--c-black); margin-right: 4px;
}
.works-filter-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
}
.works-filter.is-open .works-filter-panel {
  max-height: 1600px;
  padding: 8px 0 clamp(20px, 2.4vw, 32px);
}
.works-filter-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 32px);
}
@media (max-width: 800px) { .works-filter-cols { grid-template-columns: 1fr; } }
.works-filter .filter-group h4 {
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--c-sub); margin: 0 0 14px; font-weight: 500;
}
.works-filter .filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--c-text); text-decoration: none;
  border-radius: 999px; cursor: pointer;
  transition: all .2s ease;
}
.filter-pill:hover { border-color: var(--c-black); color: var(--c-black); }
.filter-pill.is-active { background: var(--c-black); color: #fff; border-color: var(--c-black); }
.filter-pill-count { font-family: var(--font-en); font-size: 12px; color: var(--c-sub); letter-spacing: 0.06em; }
.filter-pill.is-active .filter-pill-count { color: rgba(255,255,255,0.7); }

/* archive-works.php のカードグリッド（旧インライン style から移植） */
.works-grid-section { background: #ffffff; padding: clamp(60px, 8vw, 100px) 0 150px; }   /* #3739 bottom 100->150 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 60px clamp(24px, 3vw, 48px);
}
.work-card { display: block; }
.work-card .img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: 14px;
}
.work-card .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.work-card .meta {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 1px;   /* #3741 0.18em(=2.2px) -> 1px */
  color: var(--c-sub);
  margin-bottom: 6px;
}
.work-card h3 {
  font-size: 16px;   /* #3740 15->16 */
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-black);
  letter-spacing: 0.06em;
}
.work-card:hover img { transform: scale(1.04); }
.works-empty {
  text-align: center;
  color: var(--c-sub);
  padding: clamp(40px, 5vw, 64px) 0;
}

.pagination { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border: 1px solid var(--c-line);
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--c-text); text-decoration: none;
  transition: all .25s ease;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--c-black); color: #fff; border-color: var(--c-black); }

/* =========================================================
   Archive: /voice/  — お客様の声 3列カード
   archive-voice.php から移植（旧インライン<style>）
========================================================= */
.voice-archive-section { background: #ffffff; padding: 0 0 clamp(60px, 8vw, 100px); } /* #1804 上 padding 100→0 */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px clamp(28px, 3vw, 48px);
}
@media (max-width: 1100px) { .voice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .voice-grid { grid-template-columns: 1fr; } }
.voice-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-bg-soft);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.18), 0 2px 6px -3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.voice-card:hover {
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.22), 0 3px 8px -2px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.voice-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-bg); }
.voice-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.voice-card:hover .voice-card-img img { transform: scale(1.04); }
.voice-card-body { padding: clamp(24px, 3vw, 36px); }
.voice-card-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-en);
  font-size: 12px; letter-spacing: 0.18em; color: var(--c-sub);
  margin-bottom: 16px;
}
.voice-card-title {
  font-family: var(--font-serif-jp);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500; line-height: 1.6; letter-spacing: 0.06em;
  color: var(--c-black);
  margin: 0 0 14px;
}
.voice-card-excerpt {
  font-size: 13px; line-height: 1.95;
  color: var(--c-text); letter-spacing: 0.04em;
  margin: 0 0 18px;
}
.voice-card-client {
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 12px; color: var(--c-sub); letter-spacing: 0.06em;
  margin: 0;
}

/* ============================================================
   2026-05-09: prose 内のインラインスタイルをクラス化
   journal/project/voice/works/note/branding-design/post の本文で
   繰り返し使われていた style="..." を以下のクラスへ移行
============================================================ */

/* テキストマーカー（蛍光ペン風ハイライト） */
.prose .marker,
.prose .prose-marker {
  background: linear-gradient(transparent 60%, #fbfba8 0%);
  padding: 0 .15em;
}
.prose .marker.is-yellow,  .prose .prose-marker.is-yellow  { background: linear-gradient(transparent 60%, #fbfba8 0%); }
.prose .marker.is-gold,    .prose .prose-marker.is-gold    { background: linear-gradient(transparent 60%, #ffd700 0%); }
.prose .marker.is-green,   .prose .prose-marker.is-green   { background: linear-gradient(transparent 60%, #90ee90 0%); }
.prose .marker.is-blue,    .prose .prose-marker.is-blue    { background: linear-gradient(transparent 60%, #b0e0e6 0%); }
.prose .marker.is-pink,    .prose .prose-marker.is-pink    { background: linear-gradient(transparent 60%, #ffc0cb 0%); }

/* 引用 / 囲み（薄グレー塗り） */
.prose .prose-quote-box {
  background: #f4f4f4;
  padding: 1.5rem;
  margin: 2rem 0;
  display: block;
}
.prose .prose-note-box {
  padding: 1rem;
  background: #f9f9f9;
  border: 1px solid #999;
  margin: 1rem 0;
}

/* 小さなインラインバッジ（コードや短い注釈） */
.prose .prose-tag {
  padding: 2px 10px;
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 1px 2px 2px #ddd;
  margin: 0 5px;
  display: inline-block;
}

/* セージグリーンの罫線・囲み */
.prose .prose-bordered {
  border: 2px solid #A9B5AC;
  padding: 15px;
  margin-top: 5rem;
}
.prose .prose-underline-sage {
  border-bottom: 3px solid #A9B5AC;
  padding-bottom: 2px;
}

/* 強調・色 */
.prose .prose-bold       { font-weight: bold; }
.prose .prose-bold-large { font-weight: bold; font-size: 120%; }
.prose .prose-red        { color: #ff0000; }
.prose .prose-underline  { text-decoration: underline; }

/* 画像の幅制限ヘルパー（max-width:NNNpx; width:100%;） */
.prose .prose-img-narrow,
.prose .prose-img-narrow-300 { max-width: 300px; width: 100%; height: auto; }
.prose .prose-img-narrow-500 { max-width: 500px; width: 100%; height: auto; }
.prose .prose-img-narrow-700 { max-width: 700px; width: 100%; height: auto; }

/* ============================================================
   2026-05-09: CASE (project) / WORKS / JOURNAL / NOTE / VOICE
   配下のベース背景を #ffffff に統一（テクスチャ無し）
============================================================ */
body.single-works,
body.post-type-archive-works,
body.single-project,
body.post-type-archive-project,
body.single-journal,
body.post-type-archive-journal,
body.tax-journalcat,
body.single-note,
body.post-type-archive-note,
body.single-voice,
body.post-type-archive-voice {
  background: #ffffff;
}

body.single-works .post-hero,
body.post-type-archive-works .post-hero,
body.single-project .post-hero,
body.post-type-archive-project .post-hero,
body.single-journal .post-hero,
body.post-type-archive-journal .post-hero,
body.tax-journalcat .post-hero,
body.single-note .post-hero,
body.post-type-archive-note .post-hero,
body.single-voice .post-hero,
body.post-type-archive-voice .post-hero {
  background: #ffffff;
}

body.single-works .post-feature,
body.single-project .post-feature,
body.single-journal .post-feature,
body.single-note .post-feature,
body.single-voice .post-feature {
  background: #ffffff;
}
body.single-works .post-feature .frame,
body.single-project .post-feature .frame,
body.single-journal .post-feature .frame,
body.single-note .post-feature .frame,
body.single-voice .post-feature .frame {
  background: #ffffff;
}

/* ============================================
   2026-06-11: /journal/ アーカイブ + 個別記事 SP 調整
   websupport コメント #969-980（viewport=sp）
============================================ */
@media (max-width: 900px) {
  /* ===== /journal/ アーカイブ ===== */

  /* #969 archive-card の下罫線を削除 */
  body.post-type-archive-journal .archive-card,
  body.tax-journalcat .archive-card {
    border-bottom: none;
    padding-bottom: 0;
  }
  body.post-type-archive-journal .archive-list,
  body.tax-journalcat .archive-list {
    gap: clamp(48px, 7vw, 64px);
  }

  /* #970 CATEGORIES widget をアコーディオン化（cat-list を持つ widget のみ） */
  .blog-sidebar .widget.cat-accordion .widget-title {
    cursor: pointer;
    margin-bottom: 0;
  }
  .blog-sidebar .widget.cat-accordion .widget-title::after {
    content: '+';
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
    color: var(--c-sub);
    margin-left: auto;
    transition: transform 0.3s ease;
  }
  .blog-sidebar .widget.cat-accordion.is-open .widget-title::after {
    content: '−';
  }
  .blog-sidebar .widget.cat-accordion .cat-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(.2,.8,.2,1);
  }
  .blog-sidebar .widget.cat-accordion.is-open .cat-list {
    max-height: 1200px;
    margin-top: 14px;
  }

  /* #971 count を黒丸＋白文字に。●サイズは桁数に依らず一定（24×24） */
  .blog-sidebar .cat-list .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-black);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    flex-shrink: 0;
  }

  /* #972 RANKING の meta を「カテゴリー」「日付」「タイトル」3行表示に */
  .blog-sidebar .rank-item .meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .blog-sidebar .rank-item .meta .sep { display: none; }

  /* #973 CATEGORIES widget の margin-bottom を 60px に（archive 系のみ） */
  body.post-type-archive-journal .blog-sidebar .widget:has(.cat-list),
  body.tax-journalcat .blog-sidebar .widget:has(.cat-list) {
    margin-bottom: 60px;
  }

  /* #1240 archive-card h3 を weight 700 に（SP） */
  body.post-type-archive-journal .archive-card h3,
  body.tax-journalcat .archive-card h3 {
    font-weight: 700;
    font-size: 16px;       /* #3755 17->16 */
    line-height: 30px;     /* #3755 34->30 */
  }
  /* #1241/#1242 widget-title 拡大・細く（SP archive 系） */
  body.post-type-archive-journal .blog-sidebar .widget-title,
  body.tax-journalcat .blog-sidebar .widget-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2em;
  }
  /* #1243 RANKING title font-size 13px（SP archive 系） */
  body.post-type-archive-journal .blog-sidebar .rank-item .title,
  body.tax-journalcat .blog-sidebar .rank-item .title {
    font-size: 13px;
  }

  /* #1009 archive: blog-sidebar の上罫線を削除 / #1008 widget の下罫線を削除 */
  body.post-type-archive-journal .blog-sidebar,
  body.tax-journalcat .blog-sidebar {
    border-top: none;
    padding-top: 0;
  }
  body.post-type-archive-journal .blog-sidebar .widget,
  body.tax-journalcat .blog-sidebar .widget {
    border-bottom: none;
  }

  /* ===== /journal/journal-XXX/ 個別記事 ===== */

  /* #974 パンくずを1行表示+横スクロール */
  body.single-journal .post-hero .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  body.single-journal .post-hero .breadcrumb::-webkit-scrollbar { display: none; }
  body.single-journal .post-hero .breadcrumb a,
  body.single-journal .post-hero .breadcrumb span {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* #975 hero meta（カテゴリー / 日付）を 2行表示に */
  body.single-journal .post-hero .meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* #977 article.prose の文字サイズ 15→14px */
  body.single-journal .post-body .prose {
    font-size: 14px;
  }

  /* #978/#979 サイドバー上罫線を削除 */
  body.single-journal .blog-sidebar {
    border-top: none;
    padding-top: 0;
  }
}

/* #982 /note/ アーカイブ / #983 /topics/ アーカイブ：archive-card の下罫線を削除 */
body.post-type-archive-note .archive-card,
body.blog .archive-card {
  border-bottom: none;
  padding-bottom: 0;
}
body.post-type-archive-note .archive-list,
body.blog .archive-list {
  gap: clamp(48px, 5vw, 64px);
}

/* #981 /journal/ + /journalcat/X/ のヒーロー直下にカテゴリーナビ */
.journal-cats-nav {
  margin-top: 0;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.journal-cats-nav .count {
  margin-left: 6px;
}
/* #1190/#1191 nav 上下 border 0 + コンパクト化（PC） */
@media (min-width: 701px) {
  .journal-cats-nav {
    border-top: none;
    border-bottom: none;
    padding: 0;
    gap: clamp(14px, 1.8vw, 22px);
    /* #1207 margin-bottom 48→120px に */
    margin-bottom: clamp(80px, 10vw, 120px);
  }
  .journal-cats-nav a {
    font-size: 13px;
    padding-bottom: 0;
  }
  .journal-cats-nav a.is-active::after { bottom: -6px; }

  /* #1208/#1209 widget-title 拡大・細く（PC） */
  body.post-type-archive-journal .blog-sidebar .widget-title,
  body.tax-journalcat .blog-sidebar .widget-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2em;
  }

  /* #1210 RANKING .meta .date 拡大 / #1211 .title 拡大 + 行間調整（PC） */
  body.post-type-archive-journal .blog-sidebar .rank-item .meta,
  body.post-type-archive-journal .blog-sidebar .rank-item .meta .date,
  body.tax-journalcat .blog-sidebar .rank-item .meta,
  body.tax-journalcat .blog-sidebar .rank-item .meta .date {
    font-size: 12px;
  }
  body.post-type-archive-journal .blog-sidebar .rank-item .title,
  body.tax-journalcat .blog-sidebar .rank-item .title {
    font-size: 14px;
    line-height: 1.55;
  }

  /* #1212/#1213/#1214 contact-cta の label / meta 拡大（PC） */
  .contact-cta .contact-method .label {
    font-size: 16px;
    display: inline-block;
  }
  .contact-cta .contact-method:nth-of-type(2) .label { min-width: 100px; }
  .contact-cta .contact-method:nth-of-type(3) .label { min-width: 130px; }
  .contact-cta .contact-method .meta { font-size: 13px; }

  /* #1222 /journal/ archive-card の h3 を 20px / weight 700 に（PC） */
  body.post-type-archive-journal .archive-card h3,
  body.tax-journalcat .archive-card h3 {
    font-size: 20px;
    font-weight: 700;
  }

  /* #1223 single-journal hero h1 を weight 700 に（PC） */
  body.single-journal .post-hero h1 { font-weight: 700; }
  /* #1224 hero-author 名前リンクを weight 500 に（PC） */
  body.single-journal .post-hero .hero-author .name-block a,
  body.single-journal .post-hero .hero-author .name-block .name {
    font-weight: 500;
  }
  /* #1225 hero-author .label を 13px に（PC） */
  body.single-journal .post-hero .hero-author .label { font-size: 13px; }
  /* #1226 prose 内 h2 を weight 700 に（PC） */
  body.single-journal .post-body .prose h2 { font-weight: 700; }

  /* #1233/#1234/#1235 single-journal の widget-title 拡大・細く（PC） */
  body.single-journal .blog-sidebar .widget-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2em;
  }
  /* #1229 related-card h3 を weight 700 / #1236 16px・line-height 28px（PC） */
  body.single-journal .related-card h3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
  }
  /* #1230/#1231/#1232/#1237 related-card .meta の line-height と margin（PC） */
  body.single-journal .related-card .meta {
    line-height: 10px;
    margin: 15px 0 15px;
  }
}

/* #1502/#1503 /note/ single の WRITER ラベルを吹き出し風に */
body.single-note .post-hero .hero-author .label {
  display: inline-block;
  font-size: 14px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: 8px 18px;
  border-radius: 20px;
  color: var(--c-text);
  letter-spacing: 0.18em;
  position: relative;
  margin-bottom: 14px;
}
body.single-note .post-hero .hero-author .label::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--c-bg-soft);
}
body.single-note .post-hero .hero-author .label::before {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 23px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--c-line);
}

/* #1192 /journal/ archive-card 上下罫線 0（PC も含めて全 viewport） */
body.post-type-archive-journal .archive-card,
body.tax-journalcat .archive-card {
  border-bottom: none;
  padding-bottom: 0;
}
body.post-type-archive-journal .archive-list,
body.tax-journalcat .archive-list {
  gap: clamp(48px, 5vw, 64px);
}

/* #1193 archive-card meta のセパレータ " / " スタイル */
.archive-card .meta .sep { color: var(--c-line); }

/* #1194 /journal/ + /journalcat/ cat-list の最下行罫線を確実に削除（PC・SP 共通） */
body.post-type-archive-journal .blog-sidebar .cat-list li:last-child,
body.tax-journalcat .blog-sidebar .cat-list li:last-child {
  border-bottom: none !important;
}
/* widget の下罫線もアーカイブ全体で削除（PC・SP 共通） */
body.post-type-archive-journal .blog-sidebar .widget,
body.tax-journalcat .blog-sidebar .widget,
body.post-type-archive-note .blog-sidebar .widget {
  border-bottom: none;
}

/* #1196/#1197 single-journal の widget 下罫線も削除（PC） */
body.single-journal .blog-sidebar .widget {
  border-bottom: none;
}

/* #1199 single-journal の related-card meta をカテゴリー / 日付 / タイトル の 3段に */
.related-card .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* #1007 SP: nav の代わりにセレクトボックスを表示 */
.journal-cats-select-wrap { display: none; }
@media (max-width: 700px) {
  .journal-cats-nav { display: none; }
  .journal-cats-select-wrap {
    display: block;
    /* #1239 SP margin-bottom 40px */
    margin: 0 0 40px;
    position: relative;
  }
  .journal-cats-select-wrap::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--c-black);
    border-bottom: 1px solid var(--c-black);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
  .journal-cats-select {
    width: 100%;
    margin-bottom: 40px;   /* #3753 select 下余白 ->40 */
    padding: 16px 44px 16px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--c-black);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }
}

/* ============================================
   2026-06-11: /journal/journal-XXX/ SP 追加調整
   websupport コメント #997-1000（viewport=sp）
============================================ */
@media (max-width: 900px) {
  /* #997/#998 hero 内に JS で移動したサムネが右にはみ出す対策 */
  body.single-journal .post-hero { overflow: hidden; }
  body.single-journal .post-hero-grid,
  body.single-journal .post-hero-text { min-width: 0; max-width: 100%; }
  body.single-journal .post-hero-feature {
    width: 100%; max-width: 100%; overflow: hidden;
    margin: clamp(24px, 5vw, 36px) 0;
  }
  body.single-journal .post-hero-feature .frame { width: 100%; max-width: 100%; }
  body.single-journal .post-hero-feature .frame img {
    width: 100%; max-width: 100%; height: auto;
  }

  /* #999 著者ブロック内のテキストが幅からはみ出す対策 */
  body.single-journal .hero-author,
  body.single-journal .hero-author-body,
  body.single-journal .hero-author .info { min-width: 0; max-width: 100%; }
  body.single-journal .hero-author .info .bio {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.single-journal .hero-author .name-block {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* #1000 JS で hero-author の下に移動した目次を PC と同じデザインに
     （.blog-sidebar のスコープ外なので、同じ見た目を再現する） */
  .widget.is-toc-moved {
    padding: clamp(24px, 4vw, 36px) 0 0;
    margin: 0 0 clamp(20px, 4vw, 32px);
  }
  .widget.is-toc-moved .widget-title {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--c-black);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-black);
    display: flex; align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .widget.is-toc-moved .widget-title .ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--c-sub);
  }
  .widget.is-toc-moved .toc-list {
    list-style: none;
    padding: 0 0 0 18px;
    margin: 0;
    font-size: 13px;
    position: relative;
  }
  .widget.is-toc-moved .toc-list::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px; bottom: 14px;
    width: 1px;
    background: var(--c-line);
  }
  .widget.is-toc-moved .toc-list li { padding: 0; position: relative; }
  .widget.is-toc-moved .toc-list li.h3 { padding-left: 14px; }
  .widget.is-toc-moved .toc-list li::before {
    content: '';
    position: absolute;
    left: -18px; top: 16px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--c-line);
    box-sizing: border-box;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .widget.is-toc-moved .toc-list li.h3::before { left: -4px; width: 6px; height: 6px; top: 17px; }
  .widget.is-toc-moved .toc-list a {
    display: block;
    padding: 8px 0;
    color: var(--c-sub);
    line-height: 1.7;
    letter-spacing: 0.04em;
    transition: color .25s ease;
  }
  .widget.is-toc-moved .toc-list a:hover { color: var(--c-black); }
  .widget.is-toc-moved .toc-list li.is-active > a {
    color: var(--c-black);
    font-weight: 500;
  }
  .widget.is-toc-moved .toc-list li.is-active::before {
    background: var(--c-black);
    border-color: var(--c-black);
    transform: scale(1.15);
  }
}

/* ============================================================
   2026-06-13 / コメント反映
   blog / journal / topics / note / journalcat の post-hero h1 を太く
   ============================================================ */
body.search .post-hero h1,
body.blog .post-hero h1,
body.single-post .post-hero h1,
body.post-type-archive-journal .post-hero h1,
body.tax-journalcat .post-hero h1,
body.single-journal .post-hero h1,
body.post-type-archive-note .post-hero h1,
body.single-note .post-hero h1 {
  font-weight: 700;
}

/* ============================================================
   2026-06-13 / コメント反映（SP only）
   ============================================================ */
@media (max-width: 700px) {
  /* prose h2 を太く */
  .post-body .prose h2 { font-weight: 700; }

  /* RELATED: en-label を大きく */
  .post-related .section-head .en-label {
    font-size: clamp(28px, 3.4vw, 30px);
    margin-bottom: 10px;
  }

  /* RELATED: カードタイトルを太く */
  .post-related .related-card h3 {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: 0.06em;
  }

  /* RELATED: meta の gap を狭める */
  .post-related .related-card .meta {
    display: flex;
    gap: 5px;
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--c-sub);
    margin-bottom: 10px;
  }
}

/* ============================================================
   2026-06-13 / コメント反映 第2弾（PC/SP 両方）
   ============================================================ */
/* #1805 voice 本文 h2 を太く（SP は既に上の rule で 700、PC も 700 に） */
body.single-voice .post-body .prose h2 { font-weight: 700; }
/* #1806 project 本文（課題/進め方）h2・add_ttl を太く */
body.single-project .work-overview .concept .prose h2 { font-weight: 700; }
/* #1807 SP /voice/vri/（postid 7492）のみ post-feature 下 padding 60→0（他の voice には反映しない） */
@media (max-width: 700px) {
  body.postid-7492 .post-feature { padding-bottom: 0; }
  /* #1809 SP project 詳細 work-overview の上 padding 60→0 */
  body.single-project .work-overview { padding-top: 0; }
}
/* #1811 project add_ttl の下 margin 10.8→20px */
body.single-project .work-overview .concept .prose h2.add_ttl { margin-bottom: 20px; }

/* 2026-06-26 websupport #3490,#3492,#3493 — work/project ページ SP（全ページ同一クラス） */
@media (max-width: 900px) {
  .work-mv .cat-tag { margin-bottom: 15px; }                       /* #3490 28->15 */
  .work-hero { padding-bottom: 40px; }                             /* #3492 30->40 */
  .work-pager { padding-left: 40px; padding-right: 40px; }         /* #3493 左右0->40 */
}

/* 2026-06-26 websupport #3505-#3507 — project本文(.work-overview .concept .prose) SP（全ページ同一クラス） */
@media (max-width: 900px) {
  .work-overview .concept .prose p { font-size: 14px; line-height: 28px; margin-bottom: 40px; }   /* #3505/#3535/#4139 mb->40 / #3506 15->14・lh33->28 */
  .work-overview .concept .prose img.alignnone { margin: 15px 0; }                                 /* #3507→#4136 40/20 -> 15 0 15 0 */
}

/* 2026-07-04 websupport #4135/#4137 — work-overview SP 上下padding（全ページ同一クラス／#4137採用: 60 0 80） */
@media (max-width: 900px) {
  .work-overview { padding: 60px 0 80px; }
  .work-overview .concept .work-shots { margin-bottom: 60px; }   /* #4140 下60 */
}

/* 2026-06-26 websupport #3515-#3517 — works archive / project SP（全ページ同一クラス） */
@media (max-width: 900px) {
  .post-hero h1 { font-size: 14px; }                          /* #3515 archive見出し16->14（single は body.single .post-hero h1 が優先で不変） */
  .work-card h3 { font-size: 16px; font-weight: 700; }        /* #3516 15->16 / 500->700 */
  .work-overview .meta-table { margin-bottom: 40px; }         /* #3517 下margin->40 */
}

/* 2026-06-26 websupport #3536-#3540 — /voice/(blog) SP（全ページ同一クラス） */
@media (max-width: 900px) {
  .blog-sidebar { margin-top: 0; padding-top: 20px; }                            /* #3536 margin60->0 / padding40->20 */
  body.single-voice .blog-sidebar { padding-top: 40px; }                         /* 社長指示 2026-06-27: voice配下のみ padding-top 40（#3536の20pxを上書き） */
  .blog-sidebar .widget { padding-bottom: 0; }                                    /* #3537 下28->0 */
  .post-body.has-blog-sidebar .prose { font-size: 14px; line-height: 28px; }      /* #3538 15->14 / lh33->28 */
  .post-pager .pager-grid { padding-left: 40px; padding-right: 40px; }            /* #3540 左右0->40 */
}

/* 2026-06-26 websupport #3578 — /voice/yotsuba/（postid-1870）pager-grid 下margin（この要素のみ） */
@media (max-width: 900px) {
  body.postid-1870 .post-pager .pager-grid { margin-bottom: 100px; }                    /* #3578 ->100 */
}

/* 2026-06-27 websupport #3754 全 section.post-hero SP 下余白 60->40（access等 page-id個別は高特異度で不変） */
@media (max-width: 767px) {
  section.post-hero { padding-bottom: 40px; }
}

/* 2026-06-27 websupport #3779-#3785 SP：single-journal 関連記事＋サイドバー（ランキング/見出し） */
@media (max-width: 900px) {
  .post-related .related-grid { gap: 60px; }                               /* #3779 28->60 */
  .post-related .related-card h3 { font-size: 16px; line-height: 30px; }   /* #3780 15->16 / 25.5->30 */
:is(.blog-sidebar, .journal-sp-side) .rank-item { grid-template-columns: 120px 1fr; }          /* #3782 サムネ幅120 */
  :is(.blog-sidebar, .journal-sp-side) .rank-item .img { aspect-ratio: 4 / 3; }                   /* #3782 1:1->4:3 */
  :is(.blog-sidebar, .journal-sp-side) .rank-item .title { font-size: 14px; line-height: 26px; }  /* #3781 12->14 / 19.8->26 */
  :is(.blog-sidebar, .journal-sp-side) .rank-item .meta .date { letter-spacing: 1px; }           /* #3783 1.9px->1px */
  :is(.blog-sidebar, .journal-sp-side) .widget-title { font-size: 16px; }                         /* #3784/#3785 12->16（移動先も対象） */
  .journal-sp-side .rank-item { gap: 20px; }                                /* #3794 12->20（移動ブロックのみ） */
}
/* 社長指示 2026-06-27 SP：CATEGORIES/RANKING をページャー直後（関連記事の上）へ移動した際の器 */
.journal-sp-side { max-width: var(--container); margin: 100px auto 0; padding: 0 var(--pad-x); }   /* #3793 上余白0->100 */
.journal-sp-side .widget { margin-bottom: 48px; }

/* =========================================================
   Works 詳細 — 2026-07 レイアウト刷新
   ・h1 直下にサービス／業種、右に公開URL
   ・本文ワイド／データは薄グレーの囲みボックス（右サイド）
   ・Web実績の画像はフラット全幅（グレー背景・枠・切り抜きなし）
========================================================= */
/* works-board のヒーローと同じ骨格：大きめ上余白／パンくず→h1／わたぼうは .container 基準で右に絶対配置 */
.work-mv{ padding:clamp(170px,21vw,300px) 0 40px; }
.work-mv .container{ position:relative; }
.work-mv .breadcrumb{ position:relative; z-index:2; }
.work-mv .work-head{ position:relative; z-index:2; max-width:62%; }
.work-mv .work-head__cat{
  margin:14px 0 0;
  font-size:13px; letter-spacing:.08em; color:var(--c-sub); line-height:1.7;
}
/* 公開サイトリンク（h1→サービス／業種 の下）: VISIT WEB SITE ＋ URL ＋ 濃いグレーのフラット矢印 */
.work-mv .work-head__visit{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  text-decoration:none; color:#4a4a4a; transition:opacity .2s ease;
}
.work-mv .work-head__visit:hover{ opacity:.6; }
.work-mv .work-head__visit .lbl{
  font-family:var(--font-en); font-size:12px; letter-spacing:.14em; color:var(--c-black); font-weight:500;
}
.work-mv .work-head__visit .arr{ color:#4a4a4a; flex:0 0 auto; }
.work-mv .work-head__visit .u{
  font-size:13px; letter-spacing:.02em; color:var(--c-sub);
  border-bottom:1px solid var(--c-line); overflow-wrap:anywhere;
}

/* わたぼう：works-board のヒーローと同じ（.container 基準で右下に絶対配置、手から上） */
.work-mv .work-head__watabo{
  position:absolute; right:clamp(0px,3vw,64px); bottom:-8px;
  width:clamp(220px,34vw,520px); aspect-ratio:4/3;
  overflow:hidden; z-index:1; pointer-events:none;
}
.work-mv .work-head__watabo img{ width:100%; height:auto; display:block; object-position:top; }

/* 本文ワイド + 右サイドのデータボックス */
.work-overview .grid{
  max-width:1240px; margin:0 auto;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(40px,5vw,72px);
  align-items:start; justify-content:center;
}
.work-overview .concept{ min-width:0; }
.work-overview .meta-box{
  background:#f6f6f4;
  border:0;
  border-radius:14px;
  padding:22px 26px 26px;
  position:sticky; top:clamp(100px,12vh,140px);
}
.work-overview .meta-box__ttl{
  font-family:var(--font-en); font-size:11px; letter-spacing:.16em;
  color:var(--c-sub); margin:0 0 4px;
}
.work-overview .meta-box .meta-table{ border-top:0; position:static; top:auto; }
.work-overview .meta-box .meta-table .row{ padding:14px 0; border-bottom:1px solid var(--c-line); }
.work-overview .meta-box .meta-table .row:last-child{ border-bottom:0; padding-bottom:0; }
.work-overview .meta-box .meta-table .value.chips .chip{ background:#fff; }

/* ヒーローのモック（mv）：h2 見出しの上に全幅で表示 */
.work-overview .concept .work-heromock{ margin:0 0 clamp(28px,3.4vw,48px); }
.work-overview .concept .work-heromock + .h2{ border-bottom:0; }
.work-overview .concept .work-heromock img{ display:block; width:100%; height:auto; }

/* Web実績：合成済みの見せ画像（PC 2分割 / スマホ3台 等）を本文カラム内に全幅で縦積み（works-11023 に揃える） */
.work-overview .concept .work-shots{ margin-top:clamp(28px,3.4vw,52px); }
.work-overview .concept .work-shots img{
  display:block; width:100%; height:auto;
  margin:0 0 clamp(16px,2vw,28px);
}
.work-overview .concept .work-shots img:last-child{ margin-bottom:0; }

@media (max-width:800px){
  .work-mv{ padding-top:clamp(120px,26vw,170px); }
  .work-mv .work-head{ max-width:100%; }
  .work-mv .work-head__watabo{ display:none; }   /* スマホではわたぼう非表示 */
  .work-overview .grid{ grid-template-columns:minmax(0,1fr); max-width:100%; gap:36px; }
  .work-overview .concept{ order:1; }
  .work-overview .meta-box{ position:static; order:2; }
}

/* ===== 2026-07-04 全投稿共通：文章(段落)の直後に画像が来る箇所は下に40px空ける =====
   文章→画像の組み合わせを判別（画像=p内img / 素のimg / figure の3パターン）。
   段落側 margin-bottom:40 ＋ 直後画像の margin-top:0 で相殺を防ぎ 40px を確定。 */
.prose p:not(:has(img)):has(+ p:has(img)),
.prose p:not(:has(img)):has(+ figure),
.prose p:not(:has(img)):has(+ img){ margin-bottom: 40px; }
.prose p:not(:has(img)) + p:has(img),
.prose p:not(:has(img)) + figure,
.prose p:not(:has(img)) + img{ margin-top: 0; }

/* ===== 2026-07-04 WORKS ヒーロー＋わたぼう（works-board と 制作実績一覧/カテゴリを統一） =====
   .archive-mv は page-templates/works-board.php と archive-works.php の2つだけが使用。 */
section.archive-mv { padding-bottom: 40px; }
.archive-mv.post-hero { padding-top: clamp(170px, 21vw, 300px); }
.archive-mv .container { position: relative; }
.pb-h1 { position: relative; z-index: 2; }
.pb-watabo {
  position: absolute;
  right: clamp(0px, 3vw, 64px);
  bottom: -8px;
  width: clamp(220px, 34vw, 520px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-80px);   /* PCは80px上げる（SPは下の767ブロックで上書き） */
}
.pb-watabo img { display: block; width: 100%; height: auto; object-position: top; }
@media (max-width: 767px) {
  .archive-mv.post-hero { padding-top: clamp(120px, 26vw, 170px); }
  .pb-h1 { padding-right: 108px; }
  .pb-watabo { width: clamp(88px, 27vw, 116px); right: 2px; bottom: -20px; transform: translateY(-20px); }  /* SPは下80px（200→120上げ） */
}


/* ===== 2026-07-04 本文中の改行(br)を外す（段落=pは残す・全ビューポート・全投稿共通） 社長指示 ===== */
.prose p br { display: none; }

/* ===== 制作実績 詳細：お気に入り(★)/いいね(♥)（ボードと同ロジック・localStorage連動） ===== */
.work-favlike { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.work-favlike .pb-fav, .work-favlike .pb-like {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  color: var(--c-black); font-size: 12px; letter-spacing: 0.12em;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.work-favlike .pb-fav:hover, .work-favlike .pb-like:hover { border-color: #111; }
.work-favlike .pb-fav:active, .work-favlike .pb-like:active { transform: scale(.94); }
.work-favlike .pb-fav-ico { fill: none; stroke: #111; stroke-width: 1.5; }
.work-favlike .pb-like-ico { fill: none; stroke: #111; stroke-width: 1.6; }
.work-favlike .pb-like-n { font-variant-numeric: tabular-nums; min-width: 8px; text-align: center; }
.work-favlike .pb-fav[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.work-favlike .pb-fav[aria-pressed="true"] .pb-fav-ico { fill: #fff; stroke: #fff; }
.work-favlike .pb-like[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.work-favlike .pb-like[aria-pressed="true"] .pb-like-ico { fill: #fff; stroke: #fff; }
.work-favlike .pb-fav.is-pop, .work-favlike .pb-like.is-pop { animation: wfPop .34s ease; }
@keyframes wfPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* WORKS DATA ボックス内の ★/♥ は幅いっぱい（2ボタンで横幅を分け合う） */
.meta-box .work-favlike { gap: 8px; margin-top: 20px; }
.meta-box .work-favlike .pb-fav,
.meta-box .work-favlike .pb-like { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 10px; }


/* ============================================================
   2026-07-04 制作実績 詳細（single-works）＝fieldcorp 風 1カラム中央寄せに刷新
   ※ .work-overview 等の旧CSSは single-project が使うため残置。ここは .work-single / .ws-* 専用。
   ============================================================ */
.work-single { --ws-narrow: 900px; }
.work-single .container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.work-single .ws-inner { max-width: var(--ws-narrow); margin: 0 auto; }

.work-single .work-crumb { padding-top: clamp(96px, 12vw, 148px); padding-bottom: 60px; }   /* #4233 下0->60（PC/SP共通） */
.work-single .work-crumb .breadcrumb { margin: 0; }

/* 1) ヒーロー写真 */
.ws-hero { margin: 0; padding: 0 0 60px; }   /* #4170 上0/下60 */
body.postid-1152 .ws-hero { padding-top: 40px; }   /* #4178 このページのみ 上40 */
.ws-hero .frame img { display: block; width: 100%; height: auto; }

/* 2) タイトル / データ / visit */
.ws-head { padding: clamp(34px, 5vw, 64px) 0 0; }
.ws-title { font-family: var(--font-serif-jp); font-size: clamp(24px, 3.4vw, 34px); font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; color: var(--c-black); }   /* #4179 40->34 */
.ws-cat { margin-top: 14px; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.18em; color: var(--c-sub); }

.ws-data { margin: clamp(28px, 4vw, 44px) 0 0; }
.ws-data .row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 9px 0; align-items: start; border: 0; }
.ws-data dt { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--c-black); line-height: 1.9; }
.ws-data dd { margin: 0; font-size: 14px; line-height: 1.9; letter-spacing: 0.04em; color: var(--c-text); }
.ws-data dd a { border-bottom: 1px solid var(--c-line); }
.ws-data dd a:hover { border-bottom-color: var(--c-black); }
.ws-data dd a .ext-ico { display: inline-block; width: 11px; height: 11px; margin-left: 5px; fill: currentColor; vertical-align: baseline; position: relative; top: 1px; }
.ws-data dd.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-data .chip { border: 1px solid var(--c-line); border-radius: 999px; padding: 3px 12px; font-size: 12px; color: var(--c-text); }
.ws-data .chip:hover { border-color: var(--c-black); color: var(--c-black); }

.ws-visit { display: inline-flex; align-items: baseline; gap: 12px; margin-top: clamp(24px, 3.4vw, 36px); padding: 13px 24px; border: 1px solid var(--c-black); border-radius: 999px; color: var(--c-black); transition: background .2s ease, color .2s ease; }
.ws-visit:hover { background: #111; color: #fff; }
.ws-visit-label { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.16em; }
.ws-visit-u { font-size: 12px; letter-spacing: 0.02em; color: inherit; opacity: .75; }

/* 5) 概要（2カラム） */
.ws-concept { padding: clamp(48px, 7vw, 92px) 0 0; }
.ws-concept-grid { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.ws-concept-head h2 { font-family: var(--font-serif-jp); font-size: clamp(19px, 2.4vw, 28px); font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; color: var(--c-black); }
.ws-concept-body .prose { font-size: 15px; line-height: 2.1; letter-spacing: 0.05em; color: var(--c-text); }
.ws-concept-body .prose p { margin: 0 0 1.5em; }
.ws-concept-body .prose p:last-child { margin-bottom: 0; }
.ws-concept-body .prose img { display: block; width: 100%; height: auto; margin: 1.4em 0; }

/* 6) 本文（1カラム） */
.ws-body { padding: clamp(56px, 8vw, 104px) 0 0; }
.ws-body .prose { font-size: 15px; line-height: 2.1; letter-spacing: 0.05em; color: var(--c-text); }
.ws-body .prose > *:first-child { margin-top: 0; }
.ws-body .prose img { display: block; width: 100%; height: auto; margin: 0 0 40px; }   /* #4173 上0/下40 */
.ws-body .prose h2 { font-family: var(--font-serif-jp); font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; letter-spacing: 0.08em; color: var(--c-black); margin: 2.4em 0 0.8em; }
/* エディタ見出し h2.add_ttl：テキストの下に短い「ー」（参考サイト踏襲。旧・左縦棒は無し） */
.ws-body .prose h2.add_ttl { font-family: var(--font-serif-jp); font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-black); padding-left: 0; margin: clamp(52px, 6vw, 88px) 0 clamp(28px, 3.6vw, 44px); }   /* #4172 700 */
.ws-body .prose h2.add_ttl::before { content: none; }
.ws-body .prose h2.add_ttl::after { content: ''; display: block; width: 40px; height: 2px; background: var(--c-black); margin-top: 22px; }
.ws-body .prose h2.add_ttl:first-child { margin-top: 0; }
.ws-body .prose h3 { font-size: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--c-black); margin: 2.2em 0 0.5em; }
.ws-body .prose h3.add_ttl_02 { font-size: 20px; font-weight: 700; margin: 35.2px 0 15px; }   /* #4171 */
.ws-body .prose p { margin: 0 0 2em; line-height: 2.15; }
.ws-body .prose a { border-bottom: 1px solid var(--c-line); }
.ws-body .prose a:hover { border-bottom-color: var(--c-black); }

/* 画像 全幅縦積み */
.ws-gallery { padding: clamp(40px, 6vw, 72px) 0 0; }
.ws-gallery .frame { margin: 0 0 clamp(16px, 2.4vw, 32px); }
.ws-gallery .frame:last-child { margin-bottom: 0; }
.ws-gallery img { display: block; width: 100%; height: auto; }

/* 7) いいね/お気に入り */
.ws-favlike-wrap { display: flex; justify-content: center; padding: 80px 0 150px; }   /* #4174 */

/* 8) ページャー */
.ws-pager { padding: clamp(48px, 7vw, 80px) 0; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--c-line); }
.ws-pager-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
.ws-pager-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-pager-item.next { justify-content: flex-end; text-align: right; }
.ws-pager-item.is-empty { visibility: hidden; }
.ws-pager-thumb { width: 96px; height: 60px; flex-shrink: 0; overflow: hidden; background: var(--c-bg); }
.ws-pager-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-pager-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ws-pager-meta .dir { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.16em; color: var(--c-sub); }
.ws-pager-meta .t { font-size: 13px; line-height: 1.5; color: var(--c-black); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ws-pager-item:hover .t { opacity: .55; }
.ws-pager-all { justify-self: center; font-family: var(--font-en); font-size: 12px; letter-spacing: 0.16em; color: var(--c-black); border: 1px solid var(--c-black); border-radius: 999px; padding: 12px 24px; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.ws-pager-all:hover { background: #111; color: #fff; }

/* 9) 関連実績 */
.ws-related { padding: clamp(56px, 8vw, 100px) 0 0; }
.ws-sec-ttl { font-family: var(--font-en); font-size: 16px; letter-spacing: 0.2em; text-align: left; color: var(--c-black); margin: 0 0 clamp(28px, 4vw, 44px); }   /* #4175/#4176 16px左 */
.ws-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.ws-related-card { display: block; color: var(--c-black); }
.ws-related-card .rc-thumb { display: block; overflow: hidden; background: var(--c-bg); aspect-ratio: 16 / 10; }
.ws-related-card .rc-thumb img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: opacity .25s ease; }   /* #4234→16:10 (社長指示: 投稿系サムネ統一) */
.ws-related-card:hover .rc-thumb img { opacity: .82; }
.ws-related-card .rc-cat { display: block; font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.14em; color: var(--c-sub); margin-top: 12px; }
.ws-related-card .rc-title { display: block; font-size: 13px; line-height: 1.6; color: var(--c-black); margin-top: 5px; }

/* 10) カテゴリー */
.ws-cat-nav { padding: clamp(56px, 8vw, 100px) 0 150px; }   /* #4177 下150 */
.ws-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.ws-cat-list a { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--c-line); border-radius: 999px; padding: 8px 18px; font-size: 12.5px; letter-spacing: 0.06em; color: var(--c-text); }
.ws-cat-list a:hover { border-color: var(--c-black); color: var(--c-black); }
.ws-cat-list .n { font-family: var(--font-en); font-size: 11px; color: var(--c-sub); }

@media (max-width: 767px) {
  .ws-concept-grid { grid-template-columns: 1fr; gap: 14px; }
  .ws-concept-head h2::after { margin-top: 12px; }
  .ws-data .row { grid-template-columns: 108px 1fr; gap: 10px; }
  .ws-related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .ws-pager-inner { grid-template-columns: 1fr; gap: 16px; }
  .ws-pager-item.next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
  .ws-pager-thumb { width: 80px; height: 50px; }
}


/* 色チップ：下地を実際の色に。テキストは視認性で白/黒（社長指示 2026-07-04） */
.ws-data .color-chip { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 4px 14px; font-size: 12px; letter-spacing: 0.02em; line-height: 1.5; background: #999; color: #fff; transition: opacity .2s ease; }
.ws-data .color-chip:hover { opacity: .82; }
.ws-data .color-chip.is-white  { background: #ffffff; color: #333333; border-color: var(--c-line); }
.ws-data .color-chip.is-beige  { background: #d8c7ac; color: #4a3f2e; }
.ws-data .color-chip.is-yellow { background: #e7c645; color: #4a3f10; }
.ws-data .color-chip.is-pink   { background: #e5a3b6; color: #5a2f3a; }
.ws-data .color-chip.is-gray   { background: #8a8a8a; color: #ffffff; }
.ws-data .color-chip.is-brown  { background: #7a583c; color: #ffffff; }
.ws-data .color-chip.is-blue   { background: #3f6ea8; color: #ffffff; }
.ws-data .color-chip.is-green  { background: #5f8a58; color: #ffffff; }
.ws-data .color-chip.is-red    { background: #c0463d; color: #ffffff; }
.ws-data .color-chip.is-black  { background: #262626; color: #ffffff; }

/* 制作実績一覧のわたぼうは全体表示（アップ=4:3クロップにしない・archiveのみ／ボードは従来通り） */
body.post-type-archive-works .pb-watabo { aspect-ratio: auto; overflow: visible; }
body.post-type-archive-works .pb-watabo img { height: auto; object-position: center; }

/* 2026-07-04 websupport #4216/#4217（全ページ・実績/ボード ヒーロー） */
.post-hero .meta .cat { font-size: 50px; font-weight: 400; padding-bottom: 10px; }   /* #4216/#4218 ->50 / pb10 */
.archive-mv .pb-h1 { font-size: 15px; }                        /* #4217 14->15 */

/* 制作実績一覧のわたぼうを少し小さく（archiveのみ。PC/SPそれぞれスコープ＝ボード/SP既定を壊さない） */
body.post-type-archive-works .pb-watabo { width: clamp(120px, 17vw, 256px); transform: translateY(60px); }   /* 約80%＋下60px */
@media (max-width: 767px) { body.post-type-archive-works .pb-watabo { width: clamp(68px, 20vw, 88px); transform: translateY(-20px); } }

/* 2026-07-04 websupport #4222（SP・実績/ボード ヒーロー cat） */
@media (max-width: 767px) { .post-hero .meta .cat { font-size: 40px; } }

/* 2026-07-04 websupport #4223-4230（SP・実績詳細/一覧） */
@media (max-width: 767px) {
  .works-grid { gap: 40px; }                            /* #4230 60/24->40 */
  .work-single .work-crumb { padding-top: 150px; padding-bottom: 40px; }    /* #4223/#4231/#4236 上150/下40 */
  .ws-hero .frame img { margin: 0; }                    /* #4224 下40->0 */
  .ws-head { padding-top: 0; }                          /* #4225 上34->0 */
  .ws-favlike-wrap { padding: 40px 0 80px; }            /* #4226 80/150->40/80 */
  .ws-pager { padding-bottom: 0; }                      /* #4227 下48->0 */
  .ws-related-grid { gap: 30px; }                       /* #4228 ->30 */
  .ws-cat-list { justify-content: flex-start; }         /* #4229 左寄せ */
  .ws-title { font-size: 22px; }                        /* #4235 24->22 */
  .ws-hero { padding-bottom: 40px; }                    /* #4237 60->40 */
  .work-single .work-crumb .breadcrumb { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }   /* #4238 1行・横スクロール */
  .work-single .work-crumb .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ===== 本文(.prose)内 YouTube埋め込み/iframe のレスポンシブ化（固定width=900px のはみ出し防止・社長指摘 works-10810） ===== */
.prose .youtube { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 0.5em 0; overflow: hidden; }
.prose .youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose iframe, .prose video { max-width: 100%; }

/* #4290 PC: .ws-inner の左右余白 226.2px→150px（内容を広げる／全実績・PC限定＝SPはコンテナ余白のまま） */
@media (min-width: 768px) {
  .work-single .ws-inner { max-width: none; margin-left: 150px; margin-right: 150px; }
}

/* #4329 ジャーナル本文「メモ帳」枠：薄グレー・左線なし・下向き吹き出し */
.jp-memo {
  position: relative;
  background: #f4f4f4;
  border-radius: 12px;
  padding: 28px 36px;
  line-height: 2;
  color: #111;
  font-size: 16px;
  margin: 32px 0 46px;
}
.jp-memo::after {
  content: "";
  position: absolute;
  left: 48px;
  bottom: -13px;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-bottom: 0;
  border-top-color: #f4f4f4;
}

/* ===== websupport #4367 (SP・works本文 prose 段落) ===== */
@media (max-width: 767px) {
  .ws-concept-body .prose p { font-size: 14px; line-height: 30px; }   /* #4367 15->14 / 31.5->30 */
}

/* ===== websupport #4368 (関連実績: SP4件表示/ PCは3件維持) ===== */
@media (min-width: 768px) {
  .ws-related-grid .ws-related-card:nth-child(4) { display: none; }   /* #4368 PCは3件 */
}