/* 子育てサイト 共通スタイル（スマホ前提・外部フォントなし） */
:root {
  --bg: #fbf8f3;
  --surface: #ffffff;
  --text: #3a3631;
  --muted: #7a7268;
  --line: #e8e1d6;
  --accent: #5f8f7b;        /* 落ち着いた緑 */
  --accent-soft: #e7f0eb;
  --accent-dark: #3f6b59;
  --warm: #e59a7c;          /* 広告ボタンなどのやわらかい橙 */
  --warm-dark: #cf7c5c;
  --notice-bg: #fff6e6;
  --notice-line: #f0d9a8;
  --radius: 10px;
  --max: 760px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
a { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ヘッダー・フッター */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 0 10px; }
.site-logo { font-size: 1.25rem; font-weight: 700; color: var(--accent-dark); text-decoration: none; }
.site-tagline { margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.site-footer { margin-top: 48px; padding: 24px 0 32px; background: #f1ece3; font-size: .85rem; color: var(--muted); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-nav a { color: var(--muted); }
.copyright { margin: 16px 0 0; }

/* パンくず */
.breadcrumb { font-size: .8rem; color: var(--muted); margin: 14px 0 6px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "›"; margin: 0 6px; }
.breadcrumb a { color: var(--muted); }

/* 記事 */
.article-header h1 { font-size: 1.45rem; line-height: 1.5; margin: 6px 0 10px; }
.article-kicker { margin: 8px 0 0; font-size: .75rem; }
.article-meta { font-size: .8rem; color: var(--muted); margin: 0 0 12px; }
.ad-notice {
  background: var(--notice-bg); border: 1px solid var(--notice-line); border-radius: var(--radius);
  font-size: .8rem; color: #7a5a1f; padding: 6px 12px; margin: 0 0 16px; line-height: 1.6;
}
.featured { margin: 0 0 20px; border-radius: var(--radius); overflow: hidden; }
.featured img { display: block; width: 100%; }

.article-body { background: var(--surface); border-radius: var(--radius); padding: 20px 16px; }
.article-body p { margin: 0 0 1.2em; }
.article-body img { display: block; margin: 1.2em auto; border-radius: 6px; }

.article-body h2 { font-size: 1.25rem; line-height: 1.5; margin: 2.2em 0 .9em; }
.article-body h3 { font-size: 1.08rem; line-height: 1.5; margin: 1.8em 0 .7em; }
.article-body h4 { font-size: 1rem; margin: 1.5em 0 .5em; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.article-body li { margin: .3em 0; }
.article-body .table-scroll { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.article-body table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .88rem; line-height: 1.6; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; text-align: left; }
.article-body th { background: var(--accent-soft); }
.article-body tr > :first-child { min-width: 5.5em; }

/* 囲み（[box] ショートコードの変換先） */
.box { border: 2px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 1.4em; background: #f7fbf9; }
.box-title { font-weight: 700; color: var(--accent-dark); margin: 0 0 6px; }
.box.yellow_box { border-color: #e2c26b; background: #fffaf0; }
.box.red_box { border-color: var(--warm); background: #fff5f1; }

/* 広告ボタン（deaeruappli と同じ .btn-wrap の型） */
.btn-wrap { text-align: center; margin: 1.6em 0; }
.btn-wrap a {
  display: inline-block; min-width: 260px; max-width: 100%; padding: 14px 24px;
  background: var(--warm); color: #fff; font-weight: 700; text-decoration: none;
  border-radius: 999px; box-shadow: 0 3px 0 var(--warm-dark);
}
.btn-wrap a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--warm-dark); }
.btn-wrap img[width="1"] { display: inline; margin: 0; }

/* 目次 */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin: 0 0 20px; font-size: .9rem; }
.toc summary { font-weight: 700; cursor: pointer; color: var(--accent-dark); list-style: none; display: flex; align-items: center; gap: 8px; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.toc[open] summary::after { transform: rotate(-135deg); }
.toc-count { font-size: .75rem; font-weight: 400; color: var(--muted); }
.toc ol { margin: 8px 0 4px; padding-left: 1.3em; }
.toc ol ol { padding-left: 1.1em; font-size: .85rem; }
.toc li { margin: .25em 0; line-height: 1.6; }
.toc a { color: var(--text); text-decoration: none; }

/* 書き手欄 */
.author-box { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 28px 0; }
.author-icon { flex: 0 0 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.author-label { font-size: .75rem; color: var(--muted); margin: 0; }
.author-name { font-weight: 700; margin: 0 0 4px; }
.author-profile { font-size: .88rem; margin: 0; line-height: 1.7; }

/* 記事一覧・関連記事のカード */
.section-title { font-size: 1.1rem; margin: 28px 0 12px; color: var(--accent-dark); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card a { display: block; color: var(--text); text-decoration: none; }
.card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--accent-soft); }
.card-body { padding: 10px 14px 14px; }
.card-title { font-size: 1rem; font-weight: 700; line-height: 1.55; margin: 0 0 4px; }
.card-desc { font-size: .82rem; color: var(--muted); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-date { font-size: .75rem; color: var(--muted); margin: 6px 0 0; }
.empty { color: var(--muted); }

.home-intro { margin: 18px 0 4px; font-size: .92rem; color: var(--muted); }

/* 固定ページ */
.page { background: var(--surface); border-radius: var(--radius); padding: 20px 16px; margin-top: 18px; }
.page h1 { font-size: 1.35rem; margin: 0 0 12px; }
.page h2 { font-size: 1.05rem; margin: 1.8em 0 .5em; color: var(--accent-dark); }
.page-updated, .small { font-size: .8rem; color: var(--muted); }
.placeholder-note { border: 1px dashed var(--line); color: var(--muted); font-size: .85rem; padding: 10px 12px; border-radius: 6px; }
.info-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.info-table th, .info-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.info-table th { background: var(--accent-soft); width: 32%; white-space: nowrap; }
.btn-home { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; }

/* PC幅 */
@media (min-width: 720px) {
  body { font-size: 17px; }
  .article-header h1 { font-size: 1.75rem; }
  .article-body, .page { padding: 32px 36px; }
  .cards { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================
   デザイン案（config.json の "theme" で切り替え：human1 / human2 / human3）
   human1＝ノート・付箋／human2＝雑誌（明朝の見出し）／human3＝絵本・手描き
   手描きの線やアイコンはこのファイルに SVG を直接書いている（外部読み込みなし）
   ===================================================================== */
.box-body > :last-child { margin-bottom: 0; }

/* ---------------- 案1：ノート・付箋 ---------------- */
.theme-human1 .article-body { background-color: #fffefb; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2222%22%20height%3D%2222%22%3E%3Cpath%20d%3D%22M22%200H0V22%22%20fill%3D%22none%22%20stroke%3D%22%235f8f7b%22%20stroke-opacity%3D%22.09%22%20stroke-width%3D%221%22/%3E%3C/svg%3E"); }
.theme-human1 .article-kicker span {
  display: inline-block; font-family: "Klee One", var(--hand, sans-serif); font-weight: 600; font-size: .82rem; color: #5b4a2a;
  background: #fbefc2; padding: 3px 12px 2px; transform: rotate(-2deg); box-shadow: 1px 2px 0 rgba(58,54,49,.12);
}
.theme-human1 .article-header h1 { font-size: 1.5rem; margin: 10px 0 10px; }
.theme-human1 .h1-text, .theme-human1 .article-body h3 .h-text {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23e59a7c%22%20fill-opacity%3D%22.42%22%20d%3D%22M3%209%20C40%206%2082%2011%20121%207%20S178%209%20198%206%20L196%2016%20C152%2018%20104%2014%2061%2017%20S14%2016%202%2017%20Z%22/%3E%3C/svg%3E") bottom left / 100% .5em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;
}
.theme-human1 .article-body h3 .h-text { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2020%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%238fb8a2%22%20fill-opacity%3D%22.45%22%20d%3D%22M2%208%20C46%205%2090%2010%20130%206%20S182%208%20199%205%20L197%2015%20C150%2017%2098%2013%2058%2016%20S12%2015%203%2017%20Z%22/%3E%3C/svg%3E"); }
.theme-human1 .ad-notice { background: transparent; border: 0; padding: 0; color: var(--muted); font-size: .78rem; }
.theme-human1 .ad-notice::before { content: "※ "; }
.theme-human1 .toc {
  border: 1px solid var(--line); border-radius: 4px; padding: 10px 16px 10px 28px; position: relative;
  background: #fffefb repeating-linear-gradient(transparent 0 27px, rgba(95,143,123,.14) 27px 28px);
  box-shadow: 2px 3px 0 rgba(58,54,49,.06);
}
.theme-human1 .toc::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: rgba(229,154,124,.45); }
.theme-human1 .toc summary { font-family: "Klee One", sans-serif; font-size: 1rem; color: var(--text); }
.theme-human1 .article-body h2 {
  position: relative; background: #e9f2ec; padding: 14px 14px 12px 16px; margin: 2.4em 4px 1em 0;
  box-shadow: 2px 3px 0 rgba(58,54,49,.08); transform: rotate(-.6deg); border-radius: 2px 2px 14px 2px;
}
.theme-human1 .article-body h2::before {
  content: ""; position: absolute; left: 14px; top: -9px; width: 64px; height: 18px;
  background: rgba(229,154,124,.38); transform: rotate(-4deg);
}
.theme-human1 .article-body h3 { padding-left: 2px; }
.theme-human1 .box {
  position: relative; background: #fdf3cf; border: 0; border-radius: 2px; transform: rotate(.5deg);
  box-shadow: 2px 4px 0 rgba(58,54,49,.08); padding-top: 18px; margin-top: 10px;
}
.theme-human1 .box::before { content: ""; position: absolute; left: 50%; top: -9px; width: 80px; height: 18px; margin-left: -40px; background: rgba(143,184,162,.45); transform: rotate(2deg); }
.theme-human1 .box-title { font-family: "Klee One", sans-serif; font-size: 1.05rem; color: #5b4a2a; }

/* ---------------- 案2：雑誌・エディトリアル ---------------- */
.theme-human2 { --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.theme-human2 .article-kicker { text-align: center; margin-top: 18px; }
.theme-human2 .article-kicker span { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; letter-spacing: .3em; color: var(--accent-dark); }
.theme-human2 .article-kicker span::before, .theme-human2 .article-kicker span::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.theme-human2 .article-header h1 { font-family: var(--serif); font-weight: 700; font-size: 1.62rem; line-height: 1.6; letter-spacing: .02em; text-align: center; margin: 10px 0 14px; }
.theme-human2 .article-meta { text-align: center; letter-spacing: .06em; padding-bottom: 14px; border-bottom: 1px solid var(--text); margin-bottom: 0; }
.theme-human2 .ad-notice { background: transparent; border: 0; border-radius: 0; padding: 8px 0 18px; text-align: center; color: var(--muted); font-size: .74rem; }
.theme-human2 .featured { border-radius: 0; margin-bottom: 28px; }
.theme-human2 .toc { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 2px; margin-bottom: 28px; }
.theme-human2 .toc summary { font-family: var(--serif); font-size: 1rem; color: var(--text); letter-spacing: .1em; }
.theme-human2 .toc ol { font-family: var(--serif); }
.theme-human2 .article-body { border-radius: 0; padding-top: 28px; }
.theme-human2 .article-body h2 { font-family: var(--serif); font-weight: 700; font-size: 1.38rem; line-height: 1.6; letter-spacing: .02em; margin: 3.2em 0 1.2em; }
.theme-human2 .article-body h2::before {
  content: attr(data-jnum); display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .2em;
  color: var(--accent-dark); margin-bottom: 10px;
}
.theme-human2 .article-body h2::after { content: ""; display: block; width: 100%; height: 1px; background: var(--text); margin-top: 12px; opacity: .8; }
.theme-human2 .article-body h3 { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; padding-left: 14px; border-left: 1px solid var(--warm); }
.theme-human2 .box { background: transparent; border: 0; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0 14px; }
.theme-human2 .box-title { font-family: var(--serif); font-size: .82rem; letter-spacing: .3em; color: var(--accent-dark); }
.theme-human2 .article-body img + p[style*="small"], .theme-human2 .article-body p[style*="small"] { color: var(--muted); letter-spacing: .04em; }

/* ---------------- 案3：絵本・手描き ---------------- */
.theme-human3 { --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; }
.theme-human3 .article-kicker span {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--round); font-weight: 700; font-size: .78rem; color: var(--accent-dark);
  background: #fff; border: 1.5px solid var(--accent); border-radius: 999px 999px 999px 999px / 80% 90% 85% 95%; padding: 2px 12px 2px 8px;
}
.theme-human3 .article-kicker span::before { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cf7c5c%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.2%2019.6c-4.4-3-7.6-5.9-7.8-9.3-.1-2.4%201.6-4.3%203.8-4.4%201.7%200%203%20.9%203.8%202.4.9-1.6%202.3-2.5%204-2.4%202.3.2%203.8%202.2%203.6%204.5-.4%203.5-3.6%206.3-7.4%209.2z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.theme-human3 .article-header h1 { font-family: var(--round); font-weight: 700; font-size: 1.5rem; line-height: 1.55; margin: 10px 0 8px; padding-bottom: 12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%208%22%3E%3Cpath%20d%3D%22M0%204%20Q6%200.5%2012%204%20T24%204%22%20fill%3D%22none%22%20stroke%3D%22%235f8f7b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") left bottom / 22px 8px repeat-x; }
.theme-human3 .ad-notice { border-radius: 16px; border-style: dashed; }
.theme-human3 .featured { border-radius: 22px; }
.theme-human3 .toc { border-radius: 20px; border: 2px dashed rgba(95,143,123,.4); background: #fff; }
.theme-human3 .toc summary { font-family: var(--round); }
.theme-human3 .toc summary .toc-label { display: inline-flex; align-items: center; gap: 6px; }
.theme-human3 .toc summary .toc-label::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233f6b59%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.4C9.8%205%207%204.7%203.6%205.2l.3%2012.6c3.2-.5%205.9-.2%208.2%201.2%22/%3E%3Cpath%20d%3D%22M12%206.4c2.3-1.3%205-1.6%208.4-1.1l-.3%2012.5c-3.1-.4-5.8-.1-8%201.2%22/%3E%3Cpath%20d%3D%22M12%206.6l.1%2012.2%22/%3E%3C/svg%3E") center/contain no-repeat; }
.theme-human3 .article-body { border-radius: 22px; }
.theme-human3 .article-body h2 {
  font-family: var(--round); font-weight: 700; display: flex; align-items: center; gap: 10px;
  background: #ecf4ef; border-radius: 22px; padding: 14px 16px 14px 12px; outline: 2px dashed rgba(95,143,123,.45); outline-offset: -7px;
}
.theme-human3 .article-body h2::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%233f6b59%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.2%2028c-.3-4.2-.1-8.4.3-12.6%22/%3E%3Cpath%20d%3D%22M16.4%2016.6c-1.2-4.4-4.6-6.8-9.6-6.9.2%204.6%203.6%207.3%209.4%207.2%22/%3E%3Cpath%20d%3D%22M16.6%2013.8c.9-4.6%204.1-7.4%209.2-7.9.1%204.9-3.4%208-9.1%208.3%22/%3E%3Cpath%20d%3D%22M10.5%2028.2c3.6-.6%207.6-.5%2011.2.1%22/%3E%3C/svg%3E") center/26px no-repeat, #fff; border: 1.5px solid rgba(95,143,123,.6);
}
.theme-human3 .article-body h3 { font-family: var(--round); font-weight: 700; padding-bottom: 8px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%208%22%3E%3Cpath%20d%3D%22M0%204%20Q6%200.5%2012%204%20T24%204%22%20fill%3D%22none%22%20stroke%3D%22%23e59a7c%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") left bottom / 18px 7px repeat-x; }
.theme-human3 .box { border-radius: 20px; background: #fffaf2; border: 2px solid rgba(229,154,124,.55); border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px; }
.theme-human3 .box-title { display: flex; align-items: center; gap: 6px; font-family: var(--round); color: #a35d41; }
.theme-human3 .box-title::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23cf7c5c%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212.2%22%20r%3D%224.1%22/%3E%3Cpath%20d%3D%22M12%202.8v2.1M12.1%2019.3v2M3%2012.1h2.1M19%2012h2M5.6%205.7l1.4%201.5M17%2017l1.5%201.4M5.7%2018.5l1.5-1.4M17.1%207.1l1.4-1.5%22/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------------- 案4：雑誌風・似顔絵の色（2026-10-20 作り直し b2） ----------------
   色は似顔絵（static/profile/papa_profile_01_smile）から取った：水色＝主役、黄色＝差し色、黒＝線
   書体：和文 Zen Kaku Gothic New（HugMug の秀英角ゴシック金に近い無料書体）、英字 Poppins（HugMug と同じ）
   トップは「特集枠 → メニュー板 → 大小のカード → 話題のことば → 横に流れる列」。アイコンは自作の線画 */
.theme-human4 {
  --sky: #b0e5fd;       /* 似顔絵の背景の水色（主役） */
  --sky-2: #d9f2fe;     /* 中くらいの水色 */
  --sky-3: #eef9ff;     /* うすい水色（帯・箱） */
  --yel: #ffbf46;       /* 似顔絵の「！」の黄色（差し色） */
  --yel-2: #fff0c7;     /* うすい黄色 */
  --ink: #111111;       /* 線と文字 */
  --gray: #4a535c;      /* 補足の文字（白地で 8:1 くらい） */
  --link: #0a5a82;      /* 本文のリンク（白地で 7:1 くらい） */
  --jp: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --en: "Poppins", "Zen Kaku Gothic New", sans-serif;
  --bg: #ffffff; --surface: #ffffff; --text: var(--ink); --muted: var(--gray);
  --line: #c9d3da; --accent: var(--link); --accent-soft: var(--sky-3); --accent-dark: var(--link);
  --radius: 0;
  background: #fff; color: var(--ink); font-family: var(--jp); line-height: 1.95; overflow-x: hidden;
}
.theme-human4 main.wrap { max-width: 1180px; padding: 0 16px; }
.theme-human4 a { color: var(--link); }
.theme-human4 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-human4 .cards, .theme-human4 .cards > li, .theme-human4 .card-body { min-width: 0; }

/* ヘッダー：似顔絵＋サイト名 */
.theme-human4 .site-header { background: #fff; border-bottom: 2px solid var(--ink); padding: 14px 0 0; text-align: center; }
.theme-human4 .site-header > .wrap { max-width: 1180px; padding-bottom: 12px; }
.theme-human4 .site-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; }
.theme-human4 .logo-face { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); flex: none; }
.theme-human4 .site-tagline { font-size: .76rem; color: var(--gray); margin-top: 4px; }
.theme-human4 .cat-nav { border-top: 1px solid var(--ink); background: var(--sky-3); }
.theme-human4 .cat-nav ul { list-style: none; margin: 0 auto; max-width: 1180px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-human4 .cat-nav li + li { border-left: 1px solid var(--ink); }
.theme-human4 .cat-nav li:nth-child(3) { border-left: 0; }
.theme-human4 .cat-nav li:nth-child(n+3) { border-top: 1px solid var(--ink); }
.theme-human4 .cat-nav a { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 700; line-height: 1.35; }
.theme-human4 .cat-nav a:hover { background: var(--sky); }
.theme-human4 .cat-nav .cat-icon { width: 24px; height: 24px; flex: none; color: var(--ink); }
.theme-human4:has(.h4-home) .cat-nav { display: none; }   /* トップはメニュー板があるので重ねない */

/* フッター：水色の帯 */
.theme-human4 .site-footer { background: var(--sky); border-top: 2px solid var(--ink); color: var(--ink); margin-top: 72px; }
.theme-human4 .site-footer .wrap { max-width: 1180px; }
.theme-human4 .footer-nav a { color: var(--ink); }

/* パンくず */
.theme-human4 .breadcrumb { max-width: 760px; margin: 18px auto 10px; font-size: .76rem; color: var(--gray); }
.theme-human4 .breadcrumb a { color: var(--gray); }

/* ---- トップ ---- */
.theme-human4 .h4-home { padding-top: 14px; }
.theme-human4 .hot { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: .84rem; font-weight: 700; line-height: 1.5; min-width: 0; }
.theme-human4 .hot-tag { flex: none; font-family: var(--en); font-weight: 700; font-size: .7rem; letter-spacing: .04em; padding: 1px 10px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--yel); box-shadow: 2px 2px 0 var(--ink); }
.theme-human4 .hot a { color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 特集枠（写真が無いあいだは似顔絵＋大きな見出し＋水色の面） */
.theme-human4 .feature { position: relative; display: flex; flex-direction: column; background: var(--sky); border: 2px solid var(--ink); color: var(--ink); text-decoration: none; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.4px, transparent 1.6px); background-size: 16px 16px; }
.theme-human4 .feature-visual { position: relative; display: flex; justify-content: center; padding: 22px 0 0; }
.theme-human4 .fv-face { position: relative; z-index: 1; width: 200px; height: 200px; border-radius: 50%; border: 3px solid var(--ink); background: var(--sky); }
.theme-human4 .fv-burst { position: absolute; z-index: 0; top: 6px; left: 50%; width: 230px; height: 230px; margin-left: -88px; background: var(--yel);
  clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 31%, 100% 38%, 85% 54%, 97% 73%, 75% 76%, 70% 98%, 50% 85%, 30% 98%, 25% 76%, 3% 73%, 15% 54%, 0 38%, 20% 31%, 18% 8%, 39% 18%); }
.theme-human4 .feature-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--ink); }
.theme-human4 .feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-human4 .feature-text { position: relative; z-index: 2; display: block; padding: 18px 18px 22px; }
.theme-human4 .feature-en { display: block; font-family: var(--en); font-weight: 700; font-size: 2.3rem; line-height: 1; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.theme-human4 .feature-label { display: inline-block; margin: 12px 0 6px; font-size: .74rem; font-weight: 700; padding: 0 10px; line-height: 1.9; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; }
.theme-human4 .feature-catch { display: block; font-size: 2rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; margin: 4px 0 12px; }
.theme-human4 .feature-title { display: block; font-size: .92rem; font-weight: 700; line-height: 2.05; }
.theme-human4 .feature-title span { background: #fff; padding: .15em .45em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.theme-human4 .feature-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--en), var(--jp); font-size: .86rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 999px; padding: 6px 20px; }
.theme-human4 .feature-go::after { content: "→"; }
.theme-human4 .feature:hover .feature-go { background: #333; }

/* メニュー板（カテゴリ・新着ボタン）とパパの一言 */
.theme-human4 .h4-side { margin-top: 22px; min-width: 0; }
.theme-human4 .menu-board { background: var(--sky-3); border: 2px solid var(--ink); border-radius: 16px; padding: 16px 14px 18px; }
.theme-human4 .mb-head { margin: 0 0 10px; font-family: var(--en); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.theme-human4 .mb-head span { font-family: var(--jp); font-size: .72rem; letter-spacing: 0; color: var(--gray); }
.theme-human4 .menu-board ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.theme-human4 .menu-board li a { display: flex; align-items: center; gap: 8px; padding: 8px 4px; color: var(--ink); text-decoration: none; border-radius: 10px; }
.theme-human4 .menu-board li a:hover { background: var(--sky-2); }
.theme-human4 .menu-board .cat-icon { width: 34px; height: 34px; flex: none; color: var(--ink); }
.theme-human4 .mb-text { display: flex; flex-direction: column; min-width: 0; }
.theme-human4 .mb-name { font-size: .8rem; font-weight: 700; line-height: 1.4; }
.theme-human4 .mb-en { font-family: var(--en); font-size: .6rem; font-weight: 500; letter-spacing: .04em; line-height: 1.4; color: var(--gray); }
.theme-human4 .new-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-family: var(--en), var(--jp); font-weight: 600; font-size: .86rem; }
.theme-human4 .new-btn::before { content: "→"; }
.theme-human4 .papa-talk { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 0; }
.theme-human4 .talk-face { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); }
.theme-human4 .talk-bubble { position: relative; margin: 4px 0 0; padding: 10px 14px 12px; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; font-size: .8rem; line-height: 1.75; }
.theme-human4 .talk-bubble::before { content: ""; position: absolute; left: -9px; top: 18px; width: 14px; height: 14px; background: #fff; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.theme-human4 .talk-en { display: block; font-family: var(--en); font-weight: 700; font-size: .66rem; letter-spacing: .08em; color: var(--ink); background: var(--yel); width: fit-content; padding: 0 8px; border-radius: 4px; margin-bottom: 4px; }
.theme-human4 .talk-bubble a { display: inline-block; margin-left: 4px; font-weight: 700; }

/* 見出し（トップ・一覧）：矢印の箱＋英字＋日本語 */
.theme-human4 .h4-feed { min-width: 0; }
.theme-human4 .home-sec { margin: 52px 0 0; min-width: 0; }
.theme-human4 .sec-title { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-height: 42px; }
.theme-human4 .sec-title::before { content: "→"; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 42px; flex: none; border-right: 1px solid var(--ink); font-family: var(--en); background: var(--yel); }
.theme-human4 .st-en { font-family: var(--en); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; line-height: 1.2; white-space: nowrap; }
.theme-human4 .sec-title > span:last-child:not(.st-en) { font-size: .78rem; line-height: 1.4; min-width: 0; padding-right: 6px; }
.theme-human4 .cat-row .sec-title .cat-icon { display: none; }
.theme-human4 .sec-title .cat-icon { width: 28px; height: 28px; flex: none; color: var(--ink); }
.theme-human4 .more { text-align: right; margin: 16px 0 0; font-size: .86rem; }
.theme-human4 .more a { color: var(--ink); font-weight: 700; text-underline-offset: 4px; }
.theme-human4 .more a::before { content: "→ "; }

/* カード：黒の細枠・色面の表紙・右上にカテゴリの札・日付の小札 */
.theme-human4 .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; padding-top: 10px; }
.theme-human4 .card { position: relative; background: #fff; border: 1px solid var(--ink); border-radius: 0; overflow: visible; }
.theme-human4 .card a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.theme-human4 .card a:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }
.theme-human4 .card-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--ink); }
.theme-human4 .card-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.theme-human4 .card-visual { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 10px 10px 12px; border-bottom: 1px solid var(--ink); overflow: hidden; }
.theme-human4 .card-visual.tone-0 { background: var(--sky); }
.theme-human4 .card-visual.tone-1 { background: var(--yel-2); background-image: radial-gradient(rgba(255,191,70,.55) 1.5px, transparent 1.7px); background-size: 12px 12px; }
.theme-human4 .card-visual.tone-2 { background: var(--sky-3); background-image: linear-gradient(rgba(10,90,130,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(10,90,130,.12) 1px, transparent 1px); background-size: 14px 14px; }
.theme-human4 .card-visual.tone-3 { background: var(--yel); }
.theme-human4 .cv-en { position: absolute; top: 16px; left: 10px; font-family: var(--en); font-weight: 700; font-size: .62rem; letter-spacing: .1em; line-height: 1; }
.theme-human4 .cv-icon { position: absolute; top: 32px; right: 10px; width: 36px; height: 36px; color: var(--ink); }
.theme-human4 .cv-catch { position: relative; display: block; font-size: .98rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
.theme-human4 .card-cat { position: absolute; top: -11px; right: 8px; z-index: 1; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .66rem; font-weight: 700; line-height: 20px; padding: 0 9px; background: #fff; border: 1px solid var(--ink); border-radius: 5px; }
.theme-human4 .card-body { position: relative; display: block; padding: 18px 10px 12px; }
.theme-human4 .card-date { position: absolute; top: -11px; left: 8px; margin: 0; font-family: var(--en); font-size: .64rem; font-weight: 500; line-height: 20px; padding: 0 7px; background: #fff; border: 1px solid var(--ink); color: var(--ink); letter-spacing: .03em; }
.theme-human4 .card-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; line-height: 1.6; font-weight: 700; margin: 0; }
.theme-human4 .card-desc { display: none; }
/* 横長のカード（大小まじり） */
.theme-human4 .cards.mix .card.wide { grid-column: 1 / -1; }
.theme-human4 .card.wide .card-visual { aspect-ratio: 16 / 9; padding: 14px 16px 16px; }
.theme-human4 .card.wide .cv-catch { font-size: 1.45rem; max-width: 85%; }
.theme-human4 .card.wide .cv-icon { width: 64px; height: 64px; top: 30px; right: 16px; }
.theme-human4 .card.wide .cv-en { font-size: .74rem; top: 14px; left: 16px; }
.theme-human4 .card.wide .card-title { font-size: .98rem; }
.theme-human4 .card.wide .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; color: var(--gray); line-height: 1.7; margin-top: 6px; white-space: normal; }
/* 横に流れる列 */
.theme-human4 .cards.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 14px 2px 12px; scrollbar-width: thin; }
.theme-human4 .cards.rail > li { scroll-snap-align: start; }

/* 話題のことば */
.theme-human4 .trend { background: var(--sky-3); border: 1px solid var(--ink); padding: 0 0 18px; }
.theme-human4 .trend .sec-title { border-top: 0; margin-bottom: 16px; background: #fff; }
.theme-human4 .pills { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-wrap: wrap; gap: 10px 8px; }
.theme-human4 .pills a { display: inline-block; padding: 4px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 700; line-height: 1.6; }
.theme-human4 .pills a::before { content: "#"; font-family: var(--en); margin-right: 3px; color: var(--link); }
.theme-human4 .pills a:hover { background: var(--yel); }

/* 全体ガイド・入口記事の案内（カテゴリ一覧ページ） */
.theme-human4 .guide-box { display: flex; gap: 16px; align-items: center; margin: 28px auto 0; max-width: 880px; padding: 18px 16px; background: var(--sky); border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.4px, transparent 1.6px); background-size: 16px 16px; }
.theme-human4 .entry-face { width: 76px; height: 76px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); align-self: flex-start; }
.theme-human4 .guide-text { display: block; min-width: 0; }
.theme-human4 .guide-label { display: inline-block; font-size: .72rem; font-weight: 700; background: var(--yel); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 10px; line-height: 1.8; }
.theme-human4 .guide-title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.6; margin: 8px 0 6px; }
.theme-human4 .guide-desc { display: block; font-size: .84rem; color: var(--ink); line-height: 1.75; margin-bottom: 10px; }
.theme-human4 .guide-go { display: inline-flex; gap: 6px; font-size: .82rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 999px; padding: 3px 16px; }
.theme-human4 .guide-go::after { content: "→"; }

/* カテゴリ一覧ページ */
.theme-human4 .cat-header { text-align: center; padding: 22px 0 8px; }
.theme-human4 .cat-header .cat-icon { width: 76px; height: 76px; padding: 14px; color: var(--ink); background: var(--sky); border: 2px solid var(--ink); border-radius: 50%; }
.theme-human4 .cat-en { margin: 8px 0 0; font-family: var(--en); font-weight: 600; font-size: .72rem; letter-spacing: .3em; color: var(--gray); }
.theme-human4 .cat-header h1 { font-size: 1.6rem; margin: 2px 0 10px; }
.theme-human4 .cat-desc { font-size: .88rem; color: var(--gray); max-width: 36em; margin: 0 auto; }
.theme-human4 .breadcrumb:has(+ .cat-header) { max-width: none; }

/* ---- 記事ページ：本文幅は狭め ---- */
.theme-human4 article, .theme-human4 .related { max-width: 760px; margin-left: auto; margin-right: auto; }
.theme-human4 .featured { border: 2px solid var(--ink); border-radius: 0; margin: 0 0 -2px; }
.theme-human4 .article-header { background: var(--sky-3); border: 2px solid var(--ink); padding: 20px 18px 16px; margin-bottom: 28px; }
.theme-human4 .article-kicker { margin: 0; }
.theme-human4 .cat-tag { display: inline-block; font-size: .72rem; font-weight: 700; line-height: 22px; padding: 0 12px; background: var(--sky); border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; }
.theme-human4 .article-header h1 { font-size: 1.36rem; line-height: 1.6; margin: 12px 0 12px; font-weight: 700; }
.theme-human4 .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .76rem; color: var(--ink); margin: 0 0 12px; }
.theme-human4 .date-tag { font-family: var(--en); font-size: .7rem; line-height: 20px; padding: 0 7px; background: #fff; border: 1px solid var(--ink); letter-spacing: .03em; }
.theme-human4 .date-note { font-family: var(--en), var(--jp); font-size: .7rem; }
.theme-human4 .ad-notice { background: transparent; border: 0; border-top: 1px solid rgba(17,17,17,.25); border-radius: 0; padding: 10px 0 0; margin: 0; color: var(--gray); font-size: .74rem; }

/* 目次：CONTENTS・#01 の番号つき・下線だけ・最初から開いた形 */
.theme-human4 .toc { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 40px; font-size: .9rem; }
.theme-human4 .toc summary { display: inline-flex; font-size: .74rem; letter-spacing: .08em; color: #fff; background: var(--ink); border-radius: 999px; padding: 2px 14px; margin-bottom: 8px; }
.theme-human4 .toc-label::before { content: "CONTENTS ｜ "; font-family: var(--en); font-weight: 600; }
.theme-human4 .toc summary::after { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; margin-left: 4px; }
.theme-human4 .toc-count { color: #fff; opacity: .85; }
.theme-human4 .toc > ol { list-style: none; padding: 0; margin: 0; counter-reset: h4toc; border-top: 1px solid var(--ink); }
.theme-human4 .toc > ol > li { counter-increment: h4toc; border-bottom: 1px solid var(--ink); margin: 0; }
.theme-human4 .toc > ol > li > a { display: flex; gap: 10px; padding: 11px 26px 9px 2px; position: relative; line-height: 1.6; font-weight: 500; color: var(--ink); text-decoration: none; }
.theme-human4 .toc > ol > li > a::before { content: "#" counter(h4toc, decimal-leading-zero); flex: none; font-family: var(--en); font-weight: 700; color: var(--link); }
.theme-human4 .toc > ol > li > a::after { content: "↓"; position: absolute; right: 4px; top: 10px; color: var(--ink); }
.theme-human4 .toc > ol > li > a:hover { background: var(--sky-3); }
.theme-human4 .toc ol ol { display: none; }

/* 本文 */
.theme-human4 .article-body { background: #fff; border-radius: 0; padding: 0; }
.theme-human4 .article-body p { margin: 0 0 1.4em; }
.theme-human4 .article-body h2 { position: relative; background: var(--sky); border: 2px solid var(--ink); text-align: center; font-size: 1.14rem; line-height: 1.6; padding: 14px 16px; margin: 3.4em 0 1.8em; }
.theme-human4 .article-body h2::before { content: "#" attr(data-num) "  "; white-space: pre; font-family: var(--en); font-weight: 700; }
.theme-human4 .article-body h2::after { content: ""; position: absolute; left: 50%; bottom: -12px; margin-left: -11px; width: 18px; height: 18px; background: var(--sky); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.theme-human4 .article-body h3 { font-size: 1.06rem; margin: 2.4em 0 1em; }
.theme-human4 .article-body h3 .h-text { border-bottom: 2px solid var(--ink); padding-bottom: 2px; background: linear-gradient(transparent 62%, var(--yel-2) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.theme-human4 .article-body h4 { border-left: 4px solid var(--yel); padding-left: 10px; }
.theme-human4 .article-body img { border-radius: 0; }
.theme-human4 .article-body th, .theme-human4 .article-body td { border-color: #9fb0bb; }
.theme-human4 .article-body th { background: var(--sky-2); }
.theme-human4 .box { background: #fff; border: 1.5px solid var(--ink); border-radius: 0; padding: 18px 16px 14px; margin-top: 18px; position: relative; }
.theme-human4 .box-title { position: absolute; top: -12px; left: 12px; margin: 0; font-size: .78rem; line-height: 22px; padding: 0 10px; background: var(--sky); border: 1.5px solid var(--ink); color: var(--ink); }
.theme-human4 .box.yellow_box { background: #fffbef; border-color: var(--ink); }
.theme-human4 .box.red_box { background: #fff7f4; border-color: var(--ink); }
/* 「結論」＝パパの吹き出し */
.theme-human4 .box.papa-say { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 14px; border: 0; padding: 0; margin: 8px 0 2em; background: transparent; }
.theme-human4 .article-body img.say-face { margin: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); }
.theme-human4 .papa-say .box-title { position: static; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; line-height: 24px; padding: 0 12px 0 0; background: transparent; border: 0; }
.theme-human4 .say-en { font-family: var(--en); font-weight: 700; font-size: .66rem; letter-spacing: .08em; background: var(--yel); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 10px; line-height: 20px; }
.theme-human4 .papa-say .box-body { grid-column: 1 / -1; margin-top: 10px; position: relative; background: var(--sky-3); border: 1.5px solid var(--ink); border-radius: 14px; padding: 14px 16px; }
.theme-human4 .papa-say .box-body::before { content: ""; position: absolute; left: 20px; top: -9px; transform: rotate(135deg) !important; width: 14px; height: 14px; background: var(--sky-3); border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }

/* 広告ボタン：黄色の地＋黒い文字・黒い枠と影（水色の飾りとぶつからず、いちばん目立つ色にする。rel は記事のまま） */
.theme-human4 .btn-wrap a { background: var(--yel); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.theme-human4 .btn-wrap a:active { box-shadow: 0 1px 0 var(--ink); }

/* 書き手欄 */
.theme-human4 .author-box { border: 2px solid var(--ink); border-radius: 0; margin-top: 48px; background: var(--sky-3); align-items: center; }
.theme-human4 .author-face { flex: none; }
.theme-human4 .author-face .face { display: block; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); }
.theme-human4 .author-label { font-family: var(--jp); color: var(--gray); }
.theme-human4 .related { margin-top: 56px; }
.theme-human4 .related .section-title { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-height: 42px; margin-bottom: 22px; padding: 0; }
.theme-human4 .related .section-title::before { content: "→"; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 42px; border-right: 1px solid var(--ink); background: var(--yel); font-family: var(--en); }
.theme-human4 .page { border: 2px solid var(--ink); max-width: 760px; margin-left: auto; margin-right: auto; }
.theme-human4 .btn-home { background: var(--ink); color: #fff; }

@media (min-width: 720px) {
  .theme-human4 .cat-nav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-human4 .cat-nav li:nth-child(3) { border-left: 1px solid var(--ink); }
  .theme-human4 .cat-nav li:nth-child(n+3) { border-top: 0; }
  .theme-human4 .cat-nav a { font-size: .86rem; padding: 10px 8px; }
  .theme-human4 .feature { flex-direction: row-reverse; align-items: stretch; min-height: 420px; }
  .theme-human4 .feature-visual { flex: 0 0 42%; align-items: center; padding: 0; }
  .theme-human4 .fv-face { width: 280px; height: 280px; }
  .theme-human4 .fv-burst { top: 50%; width: 320px; height: 320px; margin: -178px 0 0 -116px; }
  .theme-human4 .feature.has-photo { flex-direction: column; min-height: 0; }
  .theme-human4 .feature-text { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 34px 10px 34px 34px; }
  .theme-human4 .feature-en { font-size: 3.4rem; }
  .theme-human4 .feature-catch { font-size: 2.9rem; }
  .theme-human4 .feature-title { font-size: 1.02rem; }
  .theme-human4 .cards { gap: 34px 22px; }
  .theme-human4 .card-body { padding: 20px 14px 14px; }
  .theme-human4 .card-title { font-size: .92rem; }
  .theme-human4 .cv-catch { font-size: 1.4rem; }
  .theme-human4 .card-visual { padding: 14px 14px 16px; aspect-ratio: 3 / 2; }
  .theme-human4 .cards.rail .cv-catch { font-size: 1.15rem; }
  .theme-human4 .cv-en { top: 13px; left: 14px; }
  .theme-human4 .cv-icon { width: 48px; height: 48px; top: 30px; right: 14px; }
  .theme-human4 .cards.mix .card.wide a { flex-direction: row; }
  .theme-human4 .cards.mix .card.wide .card-visual { flex: 0 0 54%; aspect-ratio: 16 / 10; border-bottom: 0; border-right: 1px solid var(--ink); }
  .theme-human4 .cards.mix .card.wide .card-body { display: flex; flex-direction: column; justify-content: center; padding: 26px 22px; }
  .theme-human4 .cards.mix .card.wide .card-date { position: static; align-self: flex-start; margin-bottom: 10px; }
  .theme-human4 .card.wide .cv-catch { font-size: 1.75rem; }
  .theme-human4 .card.wide .card-title { font-size: 1.05rem; }
  .theme-human4 .cards.rail { grid-auto-columns: 260px; }
  .theme-human4 .menu-board ul { gap: 4px 10px; }
  .theme-human4 .st-en { font-size: 1.3rem; }
  .theme-human4 .sec-title > span:last-child:not(.st-en) { font-size: .86rem; }
  .theme-human4 .cat-row .sec-title .cat-icon { display: block; }
  .theme-human4 .cv-en { top: 13px; }
  .theme-human4 .cards.mix .card:not(.wide) .card-visual { aspect-ratio: 3 / 2; }
  .theme-human4 .cards.mix .card:not(.wide) .cv-catch { font-size: 1.4rem; }
  .theme-human4 .guide-box { padding: 24px 28px; }
  .theme-human4 .entry-face { width: 96px; height: 96px; }
  .theme-human4 .article-header { padding: 30px 34px 20px; }
  .theme-human4 .article-header h1 { font-size: 1.72rem; }
  .theme-human4 .article-body { padding: 0; }
  .theme-human4 .article-body h2 { font-size: 1.28rem; padding: 16px 24px; }
  .theme-human4 .box.papa-say { grid-template-columns: 84px minmax(0, 1fr); }
  .theme-human4 .article-body img.say-face { width: 84px; height: 84px; grid-row: 1 / span 2; align-self: start; }
  .theme-human4 .box.papa-say { align-items: start; }
  .theme-human4 .papa-say .box-body { grid-column: 2; margin-top: 0; }
  .theme-human4 .papa-say .box-body::before { left: -9px; top: 16px; transform: rotate(45deg) !important; }
  .theme-human4 main > .cards, .theme-human4 .related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  /* PC のトップ：左にメニュー板（スクロールしてもついてくる）、右に特集枠と記事 */
  .theme-human4 .h4-home { display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .theme-human4 .h4-side { grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 16px; margin-top: 0; }
  .theme-human4 .menu-board ul { grid-template-columns: minmax(0, 1fr); }
  .theme-human4 .menu-board li + li { border-top: 1px dashed rgba(17,17,17,.3); }
  .theme-human4 .hot, .theme-human4 .feature, .theme-human4 .h4-feed { grid-column: 2; }
  .theme-human4 .cat-row .cards:not(.rail), .theme-human4 main > .home-sec .cards:not(.mix):not(.rail) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.theme-human4 .toc a { color: var(--ink); }

/* human4 の固定ページの似顔絵（運営者情報＝プロフィール、お問い合わせ・プライバシー＝見出しの横に小さく） */
.theme-human4 .page-profile { display: flex; align-items: center; gap: 18px; margin: 16px 0 28px; padding: 18px 16px; background: var(--sky-3); border: 2px solid var(--ink); }
.theme-human4 .pp-face { display: block; flex: none; width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); box-shadow: 5px 5px 0 var(--yel); }
.theme-human4 .pp-text p { margin: 0; line-height: 1.6; }
.theme-human4 .pp-label { display: inline-block; font-family: var(--en); font-weight: 700; font-size: .68rem; letter-spacing: .1em; background: var(--yel); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 10px; line-height: 20px; }
.theme-human4 .pp-name { font-size: 1.25rem; font-weight: 700; margin-top: 6px !important; }
.theme-human4 .pp-site { font-size: .85rem; color: var(--gray); }
.theme-human4 .h1-face { display: flex; align-items: center; gap: 12px; }
.theme-human4 .h1-face-img { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sky); }
@media (min-width: 720px) {
  .theme-human4 .pp-face { width: 140px; height: 140px; }
  .theme-human4 .pp-name { font-size: 1.4rem; }
  .theme-human4 .h1-face-img { width: 56px; height: 56px; }
}