/* ============================================================
   meruope-hyakka / hyakka.css — 「メルオペ百科」
   百科事典の型: 罫線と余白で区切る。影・角丸・イラストを使わない。
   色・文字・余白は theme.json のトークン（CSS変数）だけ。
   ============================================================ */
:root {
  --c-sumi: var(--wp--preset--color--sumi);
  --c-kinari: var(--wp--preset--color--kinari);
  --c-shu: var(--wp--preset--color--shu);
  --c-shu-ink: var(--wp--preset--color--shu-ink);
  --c-nezumi: var(--wp--preset--color--nezumi);
  --c-kei: var(--wp--preset--color--kei);
  --c-washi: var(--wp--preset--color--washi);
  --c-shiro: var(--wp--preset--color--shiro);
  --c-ai: var(--wp--preset--color--ai);
  --f-min: var(--wp--preset--font-family--mincho);
  --f-got: var(--wp--preset--font-family--gothic);
  --s1: var(--wp--preset--spacing--1); --s2: var(--wp--preset--spacing--2); --s3: var(--wp--preset--spacing--3); --s4: var(--wp--preset--spacing--4);
  --s5: var(--wp--preset--spacing--5); --s6: var(--wp--preset--spacing--6); --s7: var(--wp--preset--spacing--7); --s8: var(--wp--preset--spacing--8); --s9: var(--wp--preset--spacing--9);
  --fs-s: var(--wp--preset--font-size--s); --fs-m: var(--wp--preset--font-size--m); --fs-b: var(--wp--preset--font-size--base);
  --fs-l: var(--wp--preset--font-size--l); --fs-xl: var(--wp--preset--font-size--xl); --fs-2: var(--wp--preset--font-size--2-xl);
  --fs-3: var(--wp--preset--font-size--3-xl); --fs-4: var(--wp--preset--font-size--4-xl);
  --hair: var(--wp--custom--rule--thin) solid var(--c-kei);
  --bold: var(--wp--custom--rule--bold) solid var(--c-sumi);
  --tap: var(--wp--custom--size--tap);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-kinari); color: var(--c-sumi); font-family: var(--f-got); font-size: var(--fs-b); line-height: var(--wp--custom--lh--body); overflow-wrap: anywhere; font-feature-settings: "palt" 1; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-ai); text-underline-offset: 0.2em; text-decoration-thickness: var(--wp--custom--rule--thin); }
a:hover { color: var(--c-shu-ink); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--wp--custom--rule--bold) solid var(--c-shu); outline-offset: var(--wp--custom--rule--thin); }
h1, h2, h3, h4 { font-family: var(--f-min); font-weight: 700; line-height: var(--wp--custom--lh--head); margin: 0; letter-spacing: 0.02em; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: calc(-1 * var(--s9, 96px)); display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s4); background: var(--c-shiro); color: var(--c-sumi); z-index: 10; }
.skip:focus { top: var(--s2); }
/* 短い語のリンクも 44px 四方を確保（用語「SLA」「CX」など） */
.gnav a, .side-toc a, .termcloud a, .crumbs a, .see a, .colophon a, .textlink, .dict__item dt a, .article-head__cat a { min-width: var(--tap); justify-content: center; }
.side-toc a, .colophon a, .crumbs a { justify-content: flex-start; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--c-nezumi); font-size: var(--fs-m); }
.textlink { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ---------- 見出し帯（masthead） ---------- */
.masthead { background: var(--c-sumi); color: var(--c-kinari); border-bottom: var(--wp--custom--rule--bold) solid var(--c-shu); }
.masthead__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; }
.brand { display: flex; align-items: baseline; gap: var(--s2); color: var(--c-kinari); text-decoration: none; min-height: var(--tap); align-items: center; }
.brand:hover { color: var(--c-kinari); }
.brand__mark { width: var(--wp--custom--size--mark); height: var(--wp--custom--size--mark); }
.brand__name { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-xl); }
.brand__sub { font-size: var(--fs-s); letter-spacing: 0.2em; color: var(--c-kei); }
.find { display: flex; flex: 1 1 100%; order: 3; border-bottom: var(--wp--custom--rule--thin) solid var(--c-kei); }
.find input { flex: 1; min-width: 0; min-height: var(--tap); background: transparent; border: 0; color: var(--c-kinari); font: inherit; font-size: var(--fs-b); padding: 0 var(--s2); }
.find input::placeholder { color: var(--c-kei); }
.find button { min-height: var(--tap); min-width: var(--tap); background: transparent; color: var(--c-kinari); border: 0; font-family: var(--f-min); font-weight: 700; font-size: var(--fs-b); cursor: pointer; }
.menu { margin-left: auto; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s3); background: transparent; color: var(--c-kinari); border: var(--wp--custom--rule--thin) solid var(--c-kei); font-family: var(--f-min); font-weight: 700; font-size: var(--fs-m); cursor: pointer; }
.gnav { display: none; background: var(--c-sumi); }
.gnav.is-open { display: block; }
.gnav ul { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 var(--s4) var(--s2); }
.gnav a { display: flex; align-items: center; min-height: var(--tap); color: var(--c-kinari); text-decoration: none; font-family: var(--f-min); font-weight: 700; border-bottom: var(--wp--custom--rule--thin) solid var(--c-nezumi); }
.gnav a:hover { color: var(--c-kei); }

/* ---------- 紙面（sheet） ---------- */
.sheet { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.sheet__side { display: none; }
.sheet__main { min-width: 0; }
.entry > * + * { margin-top: var(--s5); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--fs-m); color: var(--c-nezumi); }
.crumbs li + li::before { content: "／"; margin-right: var(--s2); color: var(--c-kei); }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.crumbs span[aria-current] { display: inline-flex; align-items: center; min-height: var(--tap); }

/* 見出し語 */
.headword { border-bottom: var(--bold); padding-bottom: var(--s3); }
.headword__word { font-size: var(--fs-3); }
.headword__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); font-size: var(--fs-m); color: var(--c-nezumi); }
.headword__reading::before { content: "【よみ】"; color: var(--c-shu-ink); }
.headword__pos { border: var(--hair); padding: 0 var(--s2); }

/* 定義 */
.def { border-left: var(--wp--custom--rule--bold) solid var(--c-shu); padding: var(--s1) 0 var(--s1) var(--s4); }
.def__label { font-size: var(--fs-s); color: var(--c-shu-ink); font-weight: 700; letter-spacing: 0.2em; }
.def__text { font-size: var(--fs-l); font-weight: 600; line-height: var(--wp--custom--lh--body); margin-top: var(--s1); }
.def__note { font-size: var(--fs-s); color: var(--c-nezumi); margin-top: var(--s2); }

/* 数字（いまの数字） */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--hair); border-bottom: var(--hair); }
.figures > div { padding: var(--s3) var(--s2); text-align: center; }
.figures > div + div { border-left: var(--hair); }
.figures dt { font-size: var(--fs-s); color: var(--c-nezumi); }
.figures dd { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-2); line-height: var(--wp--custom--lh--tight); }
.figures dd small { font-size: var(--fs-m); }
.figures__src { font-size: var(--fs-s); color: var(--c-nezumi); margin-top: var(--s2) !important; }

/* 本文 */
.prose { max-width: var(--wp--custom--size--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--fs-2); margin-top: var(--s7); padding-top: var(--s3); border-top: var(--bold); }
.prose h3 { font-size: var(--fs-l); margin-top: var(--s5); }
.prose h3::before { content: "◇ "; color: var(--c-shu-ink); }
.prose ul { list-style: none; }
.prose ul li { padding-left: 1.2em; text-indent: -1.2em; }
.prose ul li::before { content: "・"; }
.prose ol { list-style: decimal; padding-left: 1.6em; }
.prose li + li { margin-top: var(--s1); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); display: block; overflow-x: auto; }
.prose th, .prose td { border-top: var(--hair); border-bottom: var(--hair); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }
.prose th { font-family: var(--f-min); background: var(--c-washi); white-space: nowrap; }
.prose blockquote { margin: 0; padding: var(--s3) var(--s4); background: var(--c-washi); }
.prose hr { border: 0; border-top: var(--hair); }
.prose a { word-break: break-all; }
.prose p a, .prose li a, .prose td a { padding: var(--s4) 0; }

/* ブロック */
.block h2, .jobs__title, .qa h2 { font-size: var(--fs-xl); padding-bottom: var(--s2); border-bottom: var(--bold); margin-bottom: var(--s3); }
.block > p { margin-top: var(--s2); }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--hair); }
.cards a { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: var(--s8); padding: var(--s3) 0; border-bottom: var(--hair); color: var(--c-sumi); text-decoration: none; }
.cards a:hover { background: var(--c-washi); }
.cards__name { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-l); }
.cards__more { font-size: var(--fs-m); color: var(--c-ai); white-space: nowrap; }
.cards__more::after { content: " →"; }
.see { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.see a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* 五十音・用語 */
.kana ul { display: flex; flex-wrap: wrap; border-top: var(--hair); border-left: var(--hair); margin-top: var(--s3); }
.kana li { border-right: var(--hair); border-bottom: var(--hair); }
.kana a { display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); font-family: var(--f-min); font-weight: 700; color: var(--c-sumi); text-decoration: none; padding: 0 var(--s2); background: var(--c-shiro); }
.kana a:hover { background: var(--c-sumi); color: var(--c-kinari); }
.termcloud { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-top: var(--s3); }
.termcloud a { display: inline-flex; align-items: center; min-height: var(--tap); }
.dict { margin-top: var(--s6); }
.dict__row { font-size: var(--fs-2); color: var(--c-shu-ink); border-bottom: var(--bold); padding-bottom: var(--s1); }
.dict__item { padding: var(--s3) 0; border-bottom: var(--hair); }
.dict__item dt { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-l); }
.dict__item dt a { display: inline-flex; align-items: center; min-height: var(--tap); }
.dict__reading { font-family: var(--f-got); font-weight: 400; font-size: var(--fs-m); color: var(--c-nezumi); }
.dict__item dd { font-size: var(--fs-m); color: var(--c-nezumi); }

/* 求人（PCワークjp へ） */
.jobs__list { border-top: var(--hair); }
.jobline a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s3) 0; border-bottom: var(--hair); color: var(--c-sumi); text-decoration: none; }
.jobline a:hover { background: var(--c-washi); }
.jobline__title { display: block; font-family: var(--f-min); font-weight: 700; font-size: var(--fs-l); }
.jobline__comp { display: block; font-size: var(--fs-m); color: var(--c-nezumi); }
.jobline__side { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; }
.jobline__pay { font-weight: 700; color: var(--c-shu-ink); }
.jobline__tags { font-size: var(--fs-s); color: var(--c-nezumi); }
.jobline__go { font-size: var(--fs-s); color: var(--c-ai); }
.jobs__note { font-size: var(--fs-s); color: var(--c-nezumi); margin-top: var(--s2); }

/* よくある質問（問答） */
.qa__item { padding: var(--s4) 0; border-bottom: var(--hair); }
.qa__item dt { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-l); }
.qa__item dt::before { content: "問　"; color: var(--c-shu-ink); }
.qa__item dd { margin-top: var(--s2); padding-left: 2em; text-indent: -2em; }
.qa__item dd::before { content: "答　"; font-family: var(--f-min); font-weight: 700; }
.qa__item dd p { display: inline; }

/* 記事一覧 */
.postlist { border-top: var(--hair); }
.postlist a { display: grid; gap: var(--s1); padding: var(--s3) 0; border-bottom: var(--hair); color: var(--c-sumi); text-decoration: none; }
.postlist a:hover { background: var(--c-washi); }
.postlist__title { font-weight: 700; }
.postlist__ex { font-size: var(--fs-m); color: var(--c-nezumi); }
.postlist time { font-size: var(--fs-s); color: var(--c-nezumi); font-variant-numeric: tabular-nums; }
.pages { margin-top: var(--s5); }
.pages .nav-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border: var(--hair); color: var(--c-sumi); text-decoration: none; background: var(--c-shiro); padding: 0 var(--s2); }
.pages .current { background: var(--c-sumi); color: var(--c-kinari); }

/* 記事の頭 */
.article-head { border-bottom: var(--bold); padding-bottom: var(--s3); }
.article-head__cat a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-m); }
.article-head__title { font-size: var(--fs-2); }
.article-head__meta { font-size: var(--fs-s); color: var(--c-nezumi); margin-top: var(--s2); }
.byline { font-size: var(--fs-m); color: var(--c-nezumi); padding-top: var(--s3); border-top: var(--hair); }
.updated { font-size: var(--fs-s); color: var(--c-nezumi); text-align: right; }

/* 前後 */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.pager a { display: block; padding: var(--s3); border: var(--hair); background: var(--c-shiro); text-decoration: none; color: var(--c-sumi); font-family: var(--f-min); font-weight: 700; }
.pager small { display: block; font-family: var(--f-got); font-weight: 400; font-size: var(--fs-s); color: var(--c-nezumi); }
.pager__next { text-align: right; grid-column: 2; }

/* 送客バナー（共通 mu-plugin の部品を紙面に合わせる） */
.referral .pcwb-wrap { margin: 0; padding: 0; max-width: none; gap: var(--s3); }
.referral .pcwb-item { border-radius: 0; border: var(--hair); }
.referral .pcwb-item:nth-child(n+2) { display: none; }

/* 奥付（colophon） */
.colophon { background: var(--c-sumi); color: var(--c-kinari); border-top: var(--wp--custom--rule--bold) solid var(--c-shu); }
.colophon__in { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); display: grid; gap: var(--s5); }
.colophon__name { font-family: var(--f-min); font-weight: 700; font-size: var(--fs-xl); }
.colophon__desc, .colophon__org { font-size: var(--fs-m); color: var(--c-kei); margin-top: var(--s2); }
.colophon__head { font-family: var(--f-min); font-weight: 700; border-bottom: var(--wp--custom--rule--thin) solid var(--c-nezumi); padding-bottom: var(--s1); }
.colophon a { display: flex; align-items: center; min-height: var(--tap); color: var(--c-kinari); font-size: var(--fs-m); }
.colophon a:hover { color: var(--c-kei); }

/* ---------- PC ---------- */
@media (min-width: 1024px) {
  .masthead__in { flex-wrap: nowrap; padding: var(--s3) var(--s6); }
  .find { flex: 0 1 22em; order: 0; margin-left: auto; }
  .menu { display: none; }
  .gnav { display: block; background: var(--c-sumi); }
  .gnav ul { display: flex; gap: var(--s5); padding: 0 var(--s6); }
  .gnav a { border-bottom: 0; font-size: var(--fs-m); }
  .sheet { display: grid; grid-template-columns: var(--wp--custom--size--side) minmax(0, 1fr); gap: var(--s7); padding: var(--s6) var(--s6) var(--s8); }
  .sheet__side { display: block; }
  .side-toc { position: sticky; top: var(--s5); font-size: var(--fs-m); border-top: var(--bold); padding-top: var(--s3); }
  .side-toc__title { font-family: var(--f-min); font-weight: 700; margin-top: var(--s4); color: var(--c-shu-ink); }
  .side-toc__title:first-child { margin-top: 0; }
  .side-toc ol { list-style: decimal; padding-left: 1.4em; color: var(--c-nezumi); }
  .side-toc a { display: inline-flex; align-items: center; min-height: var(--tap); line-height: var(--wp--custom--lh--tight); }
  .sheet__main { max-width: 52em; }
  .headword__word { font-size: var(--fs-4); }
  .article-head__title { font-size: var(--fs-3); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .jobline a { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4); }
  .jobline__side { justify-content: flex-end; }
  .colophon__in { grid-template-columns: 2fr 1fr 1fr; padding: var(--s7) var(--s6); }
  .prose { font-size: var(--fs-l); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }