@charset "utf-8";
/*
 * 矢巾町広報DX地域コミュニケーション支援システム 共通デザイン（システム3）
 *
 * 方針
 *  - 配色: 矢巾町の田園・山並みをイメージした深緑を基本色にする。
 *          文字と背景の明るさの差（コントラスト比）は 4.5:1 以上を確保する。
 *  - 文字は大きめ（標準 18px）。ヘッダーの「文字サイズ」で 標準／大／特大 を切り替えられる
 *    （html の data-fs 属性。assets/site.js が設定し、ブラウザに記憶する）
 *  - スマホ（幅 700px 以下）では1列に並べ、横にはみ出さないようにする
 *  - ボタンや入力欄は指で押しやすい大きさにする（高さ 44px 以上）
 *  - データを送るボタン（コメント投稿・ログインなど）は緑、移動するだけのボタンは白で区別する
 *  - 各ページに直接書かれた px 指定の文字サイズは、ここで rem に置き換えて、文字サイズ切り替えが効くようにする
 */

:root {
  /* 基本色（深緑） */
  --yh-green-900: #0f3d22;
  --yh-green-700: #1b6e3a;   /* 白文字とのコントラスト 6.3:1 */
  --yh-green-100: #e6f2ea;
  --yh-green-050: #f3f8f4;
  /* 補助色 */
  --yh-amber-700: #8a4b00;   /* 来訪者 */
  --yh-amber-100: #fdf0dc;
  --yh-navy-700: #1f3a5f;    /* 管理者・行政 */
  --yh-navy-100: #e5ecf5;
  --yh-red-700: #b42318;
  --yh-red-100: #fde8e6;
  /* 文字・面 */
  --yh-text: #1f2328;
  --yh-muted: #4b5563;       /* 白背景とのコントラスト 7.5:1 */
  --yh-bg: #f6f7f5;
  --yh-surface: #ffffff;
  --yh-border: #d3d9d4;
  --yh-border-strong: #8a948d;
  --yh-link: #0b57d0;
  --yh-link-visited: #6b3fa0;
  --yh-focus: #ffbf47;
  --yh-radius: 10px;
  --yh-shadow: 0 1px 2px rgba(15, 61, 34, 0.08), 0 2px 8px rgba(15, 61, 34, 0.06);
}

/* ---- 文字サイズ（rem の基準） ---- */
html { font-size: 112.5%; }                 /* 標準: 18px */
html[data-fs="l"] { font-size: 131.25%; }   /* 大: 21px */
html[data-fs="xl"] { font-size: 150%; }     /* 特大: 24px */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--yh-bg) !important;
  color: var(--yh-text) !important;
  font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* ページごとに px で指定された文字サイズを、文字サイズ切り替えに合わせる */
body *:not(h1):not(h2):not(h3):not(h4):not(svg):not(svg *) { font-size: 1rem !important; }
body h1 { font-size: 1.6rem !important; line-height: 1.4 !important; }
body h2 { font-size: 1.4rem !important; line-height: 1.45 !important; }
body h3 { font-size: 1.15rem !important; line-height: 1.5 !important; }
body h4 { font-size: 1.05rem !important; }
/* 見出しの中の文字は見出しの大きさに合わせる（ボタンや入力欄は除く） */
body :is(h1, h2, h3, h4) *:not(button):not(input):not(select):not(textarea):not(#yh-none) { font-size: inherit !important; }
/* 大きく見せていた文字は少し大きめを保つ */
body [style*="font-size:24px"], body [style*="font-size: 24px"],
body [style*="font-size:26px"], body [style*="font-size: 26px"],
body [style*="font-size:28px"], body [style*="font-size: 28px"],
body [style*="font-size:30px"], body [style*="font-size: 30px"],
body .issue-col, body .Title, body .Issue_title { font-size: 1.2rem !important; }
/* 補足の小さい文字 */
body small, body .sv-muted, body .yh-small, body .yh-meta, body .yh-chip, body .yh-count { font-size: 0.9rem !important; }

h1, h2, h3, h4 { color: var(--yh-green-900); }

/* ---- リンク・フォーカス ---- */
a { color: var(--yh-link); text-underline-offset: 3px; }
a:visited { color: var(--yh-link-visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--yh-focus) !important; outline-offset: 2px; }

/* ---- 画像・PDF・表 ---- */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; border-collapse: collapse; }
th { background: var(--yh-green-050); }

/* ---- ボタン ---- */
button, input[type="submit"], input[type="button"], .yh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 44px;
  padding: 0.35em 1em !important;
  border: 2px solid var(--yh-border-strong) !important;
  border-radius: var(--yh-radius) !important;
  background: var(--yh-surface) !important;
  color: var(--yh-text) !important;
  font-weight: bold;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color .15s, border-color .15s;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .yh-btn:hover {
  background: var(--yh-green-050) !important;
  border-color: var(--yh-green-700) !important;
}
a.yh-btn:visited { color: var(--yh-text) !important; }
/* データを送るボタン（入力欄のあるフォームの送信ボタン）は緑にする */
.yh-btn--primary,
form:has(textarea) button[type="submit"], form:has(textarea) input[type="submit"],
form:has(input[type="password"]) button[type="submit"], form:has(input[type="password"]) input[type="submit"],
form:has(input[type="email"]) button[type="submit"], form:has(input[type="email"]) input[type="submit"] {
  background: var(--yh-green-700) !important;
  border-color: var(--yh-green-700) !important;
  color: #fff !important;
}
.yh-btn--primary:hover,
form:has(textarea) button[type="submit"]:hover, form:has(input[type="password"]) [type="submit"]:hover,
form:has(input[type="email"]) [type="submit"]:hover {
  background: var(--yh-green-900) !important;
  border-color: var(--yh-green-900) !important;
}
a.yh-btn--primary:visited { color: #fff !important; }
.yh-btn--small { min-height: 40px; padding: 0.2em 0.8em !important; }
.yh-btn--block { display: flex; width: 100%; text-align: center; }
.yh-inline { display: inline; margin: 0; }

/* ---- 入力欄 ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], select, textarea {
  min-height: 44px;
  padding: 0.35em 0.6em !important;
  border: 2px solid var(--yh-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--yh-text) !important;
  max-width: 100%;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--yh-green-700) !important; }
textarea { width: 100%; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { width: 1.3em; height: 1.3em; vertical-align: -0.2em; accent-color: var(--yh-green-700); }
label { cursor: pointer; }

/* ================= 共通ヘッダー ================= */
.yh-header {
  background: var(--yh-surface);
  color: var(--yh-text);
  border-top: 6px solid var(--yh-green-700);
  box-shadow: var(--yh-shadow);
  margin: 0 0 24px;
}
.yh-header--admin { border-top-color: var(--yh-navy-700); }
.yh-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.yh-title { flex: 1 1 auto; margin: 0 !important; font-weight: bold; }
.yh-title a, .yh-title a:visited { color: var(--yh-green-900) !important; text-decoration: none; }
.yh-header--admin .yh-title a { color: var(--yh-navy-700) !important; }
body .yh-title, body .yh-title a { font-size: 1.25rem !important; line-height: 1.4 !important; }
.yh-user { flex: 1 1 100%; order: 3; margin: 0; }
.yh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.yh-fs { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
.yh-fs__label { margin-right: 4px; font-weight: bold; }
.yh-fs__label, .yh-fs button, .yh-menu-btn { white-space: nowrap; }
.yh-fs button { min-width: 48px; padding: 0.2em 0.6em !important; }
.yh-fs button[aria-pressed="true"] {
  background: var(--yh-green-700) !important;
  color: #fff !important;
  border-color: var(--yh-green-700) !important;
}
.yh-header--admin .yh-fs button[aria-pressed="true"] { background: var(--yh-navy-700) !important; border-color: var(--yh-navy-700) !important; }
.yh-menu-btn { display: none !important; }

.yh-nav { background: var(--yh-green-700); }
.yh-header--admin .yh-nav { background: var(--yh-navy-700); }
.yh-nav__inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.yh-nav ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 0; background: transparent !important; }
.yh-nav li { margin: 0 !important; }
.yh-nav a, .yh-nav a:visited {
  display: block;
  padding: 12px 14px !important;
  color: #fff !important;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
  border-bottom: 4px solid transparent;
}
.yh-nav a:hover { background: rgba(255, 255, 255, 0.12) !important; text-decoration: underline; }
.yh-nav a[aria-current="page"] { border-bottom-color: #fff; }
.yh-searchbar { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; }
.yh-search { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; margin: 0 !important; }
.yh-search input[type="text"] { width: 11em; }

/* 利用者区分などの小さなラベル */
.yh-chip {
  display: inline-block;
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: #eef0ee;
  color: var(--yh-text);
  border: 1px solid var(--yh-border);
  white-space: nowrap;
  font-weight: bold;
}
.yh-chip--resident { background: var(--yh-green-100); color: var(--yh-green-900); border-color: #b9d8c4; }
.yh-chip--visitor { background: var(--yh-amber-100); color: var(--yh-amber-700); border-color: #efd2a6; }
.yh-chip--admin { background: var(--yh-navy-100); color: var(--yh-navy-700); border-color: #c3d1e4; }

/* ================= ページ本文 ================= */
.yh-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 24px; }
.yh-hero {
  background: var(--yh-green-050);
  border: 1px solid #c6e0cf;
  border-radius: var(--yh-radius);
  padding: 16px 20px;
  margin: 0 0 24px;
}
.yh-hero__lead { margin: 0 0 12px; font-weight: bold; }
.yh-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }

.yh-section {
  background: var(--yh-surface);
  border: 1px solid var(--yh-border);
  border-radius: var(--yh-radius);
  box-shadow: var(--yh-shadow);
  padding: 16px 20px 20px;
  margin: 0 0 24px;
}
.yh-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.yh-section__head h2 {
  margin: 0 !important;
  padding-left: 12px;
  border-left: 6px solid var(--yh-green-700);
}
.yh-section__desc { margin: 6px 0 14px; color: var(--yh-muted); }

.yh-grid { display: grid; gap: 16px; }
.yh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yh-card {
  background: var(--yh-surface);
  border: 1px solid var(--yh-border);
  border-radius: var(--yh-radius);
  padding: 12px 14px;
}
.yh-card h3 { margin: 0 0 8px !important; }
.yh-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.yh-card__head h3 { margin: 0 !important; }

/* テーマなどの一覧 */
.yh-list { list-style: none; margin: 0; padding: 0; }
.yh-list__item { padding: 12px 4px; border-top: 1px solid var(--yh-border); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.yh-list__item:first-child { border-top: none; }
.yh-list__title { font-weight: bold; }
.yh-meta { color: var(--yh-muted); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 記事の一覧 */
.yh-articles { list-style: none; margin: 0; padding: 0; }
.yh-article { padding: 10px 0; border-top: 1px solid var(--yh-border); }
.yh-article:first-child { border-top: none; padding-top: 0; }
.yh-article__title { margin: 4px 0 2px; font-weight: bold; }
.yh-article p { margin: 2px 0; }
.yh-article__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.yh-count { display: inline-block; padding: 0.1em 0.6em; border-radius: 6px; font-weight: bold; }
.yh-count--gov { background: var(--yh-navy-100); color: var(--yh-navy-700); }
.yh-count--res { background: var(--yh-green-100); color: var(--yh-green-900); }

.yh-linklist { margin: 0; padding-left: 1.2em; }
.yh-linklist li { margin: 4px 0; }
.yh-issues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 10px; }

/* メッセージ */
.yh-note { background: var(--yh-green-050); border-left: 6px solid var(--yh-green-700); padding: 10px 14px; border-radius: 6px; }
.yh-alert { background: var(--yh-red-100); border-left: 6px solid var(--yh-red-700); color: #7a1610; padding: 10px 14px; border-radius: 6px; }

/* ================= フッター ================= */
.yh-footer { background: var(--yh-green-900); color: #fff; margin-top: 32px; }
.yh-footer__inner { max-width: 1100px; margin: 0 auto; padding: 20px 16px 28px; }
.yh-footer a, .yh-footer a:visited { color: #fff !important; }
.yh-footer__links { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.yh-footer p { margin: 0; }

/* ================= 既存ページの部品（style.css や各ページの指定を整える） ================= */
.sv-card, .comment-box, .reply-box, .three-column, .column-box {
  border-color: var(--yh-border) !important;
  border-radius: var(--yh-radius) !important;
  background: var(--yh-surface) !important;
}
.sv-answer { border-left-color: var(--yh-green-700) !important; background: var(--yh-green-050) !important; }
.sv-error { color: var(--yh-red-700) !important; }
.sv-ok { color: var(--yh-green-700) !important; }
.sv-wrap { padding: 0 16px; }

/* 古い作りのページの本文に余白をつける（新しい作りのページは .yh-page で余白をとる） */
body > *:not(.yh-header):not(.yh-footer):not(.yh-page):not(script):not(style):not(.sv-wrap) {
  margin-left: max(16px, calc((100% - 1100px) / 2)) !important;
  margin-right: max(16px, calc((100% - 1100px) / 2)) !important;
}

/* 一覧の中だけがスクロールする作りは分かりにくいので、ページ全体のスクロールにする */
body [style*="max-height"][style*="overflow"] { max-height: none !important; overflow: visible !important; }

/* ================= タブレット ================= */
@media (max-width: 960px) {
  .yh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yh-grid--3 { grid-template-columns: 1fr; }
}

/* ================= スマホ（幅 700px 以下） ================= */
@media (max-width: 700px) {
  .yh-header { margin-bottom: 16px; }
  .yh-header__inner { padding: 8px 12px; }
  body .yh-title, body .yh-title a { font-size: 1.1rem !important; }
  .yh-tools { width: 100%; justify-content: space-between; }
  .yh-menu-btn { display: inline-flex !important; }
  .yh-nav { display: none; }
  .yh-nav.is-open { display: block; }
  .yh-nav__inner { flex-direction: column; align-items: stretch; padding: 0 12px 10px; }
  .yh-nav ul { flex-direction: column; }
  .yh-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.25); }
  .yh-nav a[aria-current="page"] { border-bottom-color: transparent; border-left: 6px solid #fff; }
  .yh-searchbar { flex-direction: column; }
  .yh-search { flex-wrap: wrap; }
  .yh-search input[type="text"], .yh-search select { flex: 1 1 auto; width: auto; min-width: 0; }

  .yh-page { padding: 0 12px 16px; }
  .yh-section { padding: 14px 14px 16px; border-radius: 8px; }
  .yh-grid--4 { grid-template-columns: 1fr; }
  .yh-list__item { flex-direction: column; align-items: flex-start; }
  .yh-issues { grid-template-columns: 1fr 1fr; }
  .sv-wrap { padding: 0 12px; }

  /* 古い作りのページ: 1列に並べ、はみ出しを防ぐ */
  body > *:not(.yh-header):not(.yh-footer):not(.yh-page):not(script):not(style):not(.sv-wrap) { margin-left: 12px !important; margin-right: 12px !important; }
  body [style*="width:"], body [style*="width :"] { max-width: 100% !important; }
  body [style*="width: 60%"], body [style*="width:60%"], body [style*="width: 50%"], body [style*="width:50%"],
  body [style*="width: 70%"], body [style*="width:70%"], body [style*="width: 80%"], body [style*="width:80%"] { width: auto !important; }
  body [style*="display:flex"], body [style*="display: flex"] { flex-wrap: wrap !important; }
  body [style*="white-space:nowrap"], body [style*="white-space: nowrap"] { white-space: normal !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  input[type="text"], input[type="email"], input[type="password"], input[type="date"],
  input[type="number"], input[type="search"], select, textarea { width: 100%; }
  iframe, embed { height: 70vh; }

  /* 広報やはばの記事一覧（おすすめ登録など） */
  .article-row { flex-wrap: wrap !important; gap: 6px 12px !important; width: 100% !important; }
  .category-col, .issue-col, .title-col, .checkbox-col { width: auto !important; flex: 1 1 100%; white-space: normal !important; }
  .checkbox-col { justify-content: flex-start !important; }
  .article-button { white-space: normal !important; width: 100%; text-align: left; }
  .header-row { margin-right: 0 !important; justify-content: flex-start !important; }
  .three-column-container { margin: 12px 0 !important; }
  .three-column-container > * { flex: 1 1 100% !important; width: auto !important; }
  .box-content { flex-direction: column; }
}

/* 画面には出さず、読み上げソフトには読ませる */
.yh-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 印刷時はヘッダーの操作部品を隠す */
@media print {
  .yh-tools, .yh-nav, .yh-menu-btn, .yh-footer { display: none !important; }
  body { background: #fff !important; }
}

/* ---- 入力フォーム（ログイン・新規登録など） ---- */
.yh-narrow { max-width: 640px; margin: 0 auto; }
.yh-form { display: grid; gap: 14px; }
.yh-field { display: grid; gap: 4px; }
.yh-field label { font-weight: bold; }
.yh-field input[type="text"], .yh-field input[type="email"], .yh-field input[type="password"],
.yh-field input[type="date"], .yh-field input[type="number"], .yh-field select, .yh-field textarea { width: 100%; }
.yh-field__hint { color: var(--yh-muted); margin: 0; }
.yh-required { color: var(--yh-red-700); font-weight: bold; margin-left: 4px; }
.yh-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; padding: 0; margin: 0; }
.yh-choices label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--yh-border); border-radius: 8px; background: #fff; min-height: 44px; box-sizing: border-box; }
.yh-choices label:has(input:checked) { border-color: var(--yh-green-700); background: var(--yh-green-050); }

/* ================= 読みやすさのための部品（文字の多いページ用） ================= */
/* 1行が長くなりすぎないようにする（日本語で1行およそ40字） */
.yh-post__body, .yh-lead, .yh-section__desc, .yh-steps span, .yh-card p, .sv-comment, .sv-answer { max-width: 42em; }
.yh-page p { margin: 0 0 0.8em; }

/* パンくず（今いる場所） */
.yh-breadcrumb { margin: 0 0 12px; color: var(--yh-muted); }
.yh-breadcrumb a { color: var(--yh-muted); }

/* ページの主題（テーマ・記事など） */
.yh-eyebrow { margin: 0 0 4px; color: var(--yh-green-700); font-weight: bold; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body .yh-topic__title { margin: 0 0 8px !important; font-size: 1.5rem !important; line-height: 1.45 !important; }
.yh-lead { margin: 4px 0 12px; }
.yh-topic .yh-meta { margin: 0 0 10px; }

/* 「このページの使い方」など、たたんでおける説明 */
.yh-help { margin-top: 8px; border: 1px solid var(--yh-border); border-radius: 8px; background: var(--yh-green-050); }
.yh-help > summary { cursor: pointer; padding: 10px 14px; font-weight: bold; color: var(--yh-green-900); min-height: 44px; box-sizing: border-box; }
.yh-help[open] > summary { border-bottom: 1px solid var(--yh-border); }
.yh-help > ul, .yh-help > p { margin: 10px 14px 12px; padding-left: 1.2em; }
.yh-help li { margin: 4px 0; }

/* 目次 */
.yh-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.yh-toc a { display: inline-block; padding: 6px 12px; border: 2px solid var(--yh-border); border-radius: 999px; background: #fff; text-decoration: none; font-weight: bold; min-height: 44px; box-sizing: border-box; line-height: 1.7; }
.yh-toc a:visited { color: var(--yh-link); }

/* 手順 */
.yh-steps { counter-reset: yhstep; list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.yh-steps li { counter-increment: yhstep; position: relative; padding: 12px 14px 12px 64px; border: 1px solid var(--yh-border); border-radius: var(--yh-radius); background: #fff; }
.yh-steps li::before {
  content: counter(yhstep);
  position: absolute; left: 14px; top: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--yh-green-700); color: #fff; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.yh-steps strong { display: block; color: var(--yh-green-900); }
.yh-steps span { display: block; }
.yh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* チェックリスト */
.yh-checklist { list-style: none; margin: 0; padding: 0; }
.yh-checklist li { position: relative; padding: 4px 0 4px 1.8em; }
.yh-checklist li::before { content: "✓"; position: absolute; left: 0.2em; top: 4px; color: var(--yh-green-700); font-weight: bold; }
.yh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yh-card--accent { border: 2px solid var(--yh-green-700); background: var(--yh-green-050); }

/* コメント・返信 */
.yh-count-badge { display: inline-block; margin-left: 6px; padding: 0 0.6em; border-radius: 999px; background: var(--yh-green-100); color: var(--yh-green-900); vertical-align: middle; }
body .yh-count-badge { font-size: 0.9rem !important; }
.yh-empty { color: var(--yh-muted); }
.yh-thread { list-style: none; margin: 0; padding: 0; }
.yh-thread__item { padding: 16px 0; border-top: 1px solid var(--yh-border); }
.yh-thread__item:first-child { border-top: none; padding-top: 4px; }
.yh-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px !important; }
.yh-post__name { font-weight: bold; }
.yh-post__sub, .yh-post__date, .yh-post__stamps { color: var(--yh-muted); }
body .yh-post__sub, body .yh-post__date, body .yh-post__stamps { font-size: 0.9rem !important; }
.yh-post__date { margin-left: auto; }
.yh-post__body { margin: 0 0 10px; line-height: 1.85; }
body .yh-post__body { font-size: 1.05rem !important; }
.yh-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.yh-post__toggle { margin-left: auto; }
.yh-post--hidden { color: var(--yh-muted); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.yh-post__hidden-text { margin: 0 !important; font-style: italic; }
.yh-agree.is-pressed { background: var(--yh-green-100) !important; border-color: var(--yh-green-700) !important; color: var(--yh-green-900) !important; }
.yh-btn--quiet { border-color: var(--yh-border) !important; color: var(--yh-muted) !important; font-weight: normal; }

.yh-replies { margin: 10px 0 0 0; }
.yh-replies > summary {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 4px 12px; border-radius: 8px; cursor: pointer;
  color: var(--yh-green-900); font-weight: bold; background: var(--yh-green-050); border: 1px solid #c6e0cf;
}
.yh-replies__body { margin: 10px 0 0 12px; padding-left: 16px; border-left: 4px solid var(--yh-green-100); display: grid; gap: 14px; }
.yh-reply-form { display: grid; gap: 8px; }
.yh-reply-form button { justify-self: start; }
.yh-backlink { margin: 8px 0 0; }

@media (max-width: 700px) {
  .yh-grid--2 { grid-template-columns: 1fr; }
  body .yh-topic__title { font-size: 1.3rem !important; }
  .yh-post__date { margin-left: 0; flex-basis: 100%; }
  .yh-post__toggle { margin-left: 0; }
  .yh-replies__body { margin-left: 4px; padding-left: 12px; }
  .yh-steps li { padding-left: 58px; }
}

/* 一覧の続きをたたむ「もっと見る」 */
.yh-more { margin-top: 8px; }
.yh-more > summary {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 4px 14px; border: 2px solid var(--yh-border-strong); border-radius: var(--yh-radius);
  background: #fff; font-weight: bold; cursor: pointer; margin: 4px 0 10px;
}
.yh-more[open] > summary { margin-bottom: 12px; }

/* 見出しと一覧の間をあける */
.yh-section__head + .yh-thread, .yh-section__head + .yh-empty { margin-top: 14px; }

/* ================= オススメの記事: すべての記事を同じ大きさのカードにそろえる ================= */
/* 3つの列は「見出し」「本体」の2段。subgrid で3列の見出しの高さをそろえ、記事が行ごとに横一列に並ぶようにする */
.yh-grid--3 { grid-template-rows: auto 1fr; align-items: start; }
.yh-grid--3 > .yh-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
.yh-grid--3 > .yh-card > .yh-card__head { margin-bottom: 0; }
.yh-card__head--stack { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.yh-card__head--stack .yh-btn { width: 100%; }

/* 記事カード: 5段の高さを固定する（カテゴリ1行／記事名2行／掲載号1行／オススメ数1行／ボタン） */
.yh-articles { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.yh-article,
.yh-article:first-child {
  display: grid;
  grid-template-rows: 2em calc(2 * 1.6em) 1.6em 2em auto;
  row-gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--yh-border);
  border-top: 1px solid var(--yh-border);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  min-width: 0;
}
.yh-article p { margin: 0 !important; min-width: 0; }
.yh-article__cat { overflow: hidden; white-space: nowrap; }
.yh-article__title, .yh-article__issue {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6 !important;
}
.yh-article__title { -webkit-line-clamp: 2; }
.yh-article__issue { -webkit-line-clamp: 1; }
.yh-article__counts { display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; }
.yh-article__btn { width: 100%; }

@media (max-width: 960px) {
  /* 1列表示: 列ごとの見出しの高さをそろえる必要がないので通常の並びに戻す */
  .yh-grid--3 { grid-template-rows: none; }
  .yh-grid--3 > .yh-card { grid-row: auto; grid-template-rows: none; }
  /* 記事カードは横に並べられるだけ並べる（同じ幅・同じ高さ） */
  .yh-grid--3 > .yh-card .yh-articles { grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); }
}

/* ================= カテゴリごとの背景色（ごく薄い色。文字の読みやすさは変えない） ================= */
/* 背景は明るさ96%前後、枠線は少し濃い同系色。カテゴリ名のラベルは白地にして読みやすくする */
.yh-cat--kosodate { --cat-bg: #fdf0f4; --cat-border: #efc3d1; }  /* 子育て: 桃 */
.yh-cat--kenko    { --cat-bg: #eef7ef; --cat-border: #bfdec4; }  /* 健康・暮らし・健康: 若草 */
.yh-cat--kurashi  { --cat-bg: #eef4fb; --cat-border: #c4d6ee; }  /* くらし・お知らせ: 空色 */
.yh-cat--sports   { --cat-bg: #fff3e6; --cat-border: #f3cfa3; }  /* スポーツ: 橙 */
.yh-cat--event    { --cat-bg: #fdf8e2; --cat-border: #eadc9a; }  /* イベント・イベント・教室: 黄 */
.yh-cat--bunka    { --cat-bg: #f4f0fa; --cat-border: #d6c8ec; }  /* 文化: 藤 */
.yh-cat--shigoto  { --cat-bg: #ecf6f6; --cat-border: #bcdcdc; }  /* 仕事: 青緑 */
.yh-cat--koza     { --cat-bg: #f7f2ea; --cat-border: #ddcfb4; }  /* 講座: 生成り */
.yh-cat--calendar { --cat-bg: #f1f2fb; --cat-border: #cdd0ee; }  /* カレンダー: 薄紫青 */
.yh-cat--sonota   { --cat-bg: #f4f5f6; --cat-border: #d4d8dc; }  /* その他: 灰 */
.yh-cat--none     { --cat-bg: #ffffff; --cat-border: var(--yh-border); }  /* カテゴリなし: 白 */
.yh-card.yh-cat, .yh-article.yh-cat, .yh-article.yh-cat:first-child {
  background: var(--cat-bg) !important;
  border-color: var(--cat-border) !important;
}
.yh-cat .yh-chip { background: #fff; border-color: var(--cat-border); }
.yh-cat .yh-article__btn { background: #fff !important; }

/* オススメの記事: コメント件数（1件以上あるときは目立たせる） */
.yh-article__ccount { display: inline-block; min-width: 2.6em; padding: 0 0.4em; border-radius: 999px; background: #eef0ee; color: var(--yh-muted); }
.yh-article__ccount.has-comments { background: var(--yh-green-700); color: #fff; }

/* ================= トップページ: このサイトの趣旨 ================= */
.yh-about { padding: 20px 22px; }
body .yh-about__title { margin: 0 0 10px !important; font-size: 1.45rem !important; color: var(--yh-green-900); }
.yh-about .yh-hero__lead { font-weight: normal; max-width: 46em; }
.yh-about__points { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yh-about__points li { background: #fff; border: 1px solid #c6e0cf; border-radius: 8px; padding: 10px 12px; }
.yh-about__points strong { display: block; color: var(--yh-green-700); }
body .yh-about__points strong { font-size: 1.1rem !important; }
.yh-about__points span { display: block; }
@media (max-width: 700px) {
  .yh-about { padding: 14px; }
  body .yh-about__title { font-size: 1.25rem !important; }
  .yh-about__points { grid-template-columns: 1fr; }
}

/* 使い方ページ: 「困ったとき」の質問を縦に並べる */
.yh-help + .yh-help { margin-top: 8px; }

/* ================= 愛称「やはばかたりば」 ================= */
.yh-title a { display: inline-flex; flex-direction: column; line-height: 1.25 !important; }
.yh-title__name { font-weight: bold; color: var(--yh-green-900); letter-spacing: 0.06em; }
body .yh-title .yh-title__name { font-size: 1.5rem !important; line-height: 1.25 !important; }
.yh-header--admin .yh-title__name { color: var(--yh-navy-700); }
.yh-title__sub { font-weight: normal; color: var(--yh-muted); }
body .yh-title .yh-title__sub { font-size: 0.8rem !important; line-height: 1.4 !important; }
.yh-about__name { margin: 0 0 2px !important; font-weight: bold; color: var(--yh-green-700); letter-spacing: 0.06em; }
body .yh-about__name { font-size: 1.05rem !important; }
.yh-footer__name { font-weight: bold; margin-bottom: 6px !important; }
body .yh-footer__name { font-size: 1.1rem !important; }
.yh-footer__name span { font-weight: normal; }
body .yh-footer__name span { font-size: 0.85rem !important; }
@media (max-width: 700px) {
  body .yh-title .yh-title__name { font-size: 1.3rem !important; }
}

/* はじめての方へ: 行政職員からのコメントの説明 */
.yh-card--gov { border: 2px solid #c3d1e4; background: var(--yh-navy-100); margin: 4px 0 14px; }
.yh-card--gov h3 { color: var(--yh-navy-700); }
.yh-card--gov .yh-checklist li::before { color: var(--yh-navy-700); }

/* 管理者による投稿の修正 */
.yh-post__edited { margin: -4px 0 10px !important; color: var(--yh-muted); font-style: italic; }
body .yh-post__edited { font-size: 0.85rem !important; }
.yh-edit { flex-basis: 100%; order: 10; }
.yh-edit > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 10px; border: 1px dashed var(--yh-navy-700); border-radius: 8px; color: var(--yh-navy-700); cursor: pointer; font-weight: bold; }
.yh-edit__form { display: grid; gap: 8px; margin-top: 8px; padding: 10px; background: var(--yh-navy-100); border-radius: 8px; }

/* みんなの意見: PDFへの管理者コメント */
.sv-admin-comment { border: 2px solid #c3d1e4; border-left: 6px solid var(--yh-navy-700); background: var(--yh-navy-100); border-radius: 8px; padding: 12px 16px; margin: 0 0 14px; }
.sv-admin-comment__head { margin: 0 0 6px !important; font-weight: bold; color: var(--yh-navy-700); }
.sv-admin-comment__body { max-width: 42em; line-height: 1.85; }
.sv-admin-comment__teaser { margin: 0 0 6px !important; }