/* =======================================
   post_list.css  —  上：索引 / 下：本文（上品・すっきり）
   依存：Noto Sans JP / Vollkorn / Font Awesome / Bootstrap
   ======================================= */

:root{
  --pl-bg: #fafafa;
  --pl-surface: #ffffff;
  --pl-muted: #6b7280;          /* gray-500 */
  --pl-strong: #111827;         /* gray-900 */
  --pl-accent: #0ea5e9;         /* sky-500 */
  --pl-border: #e5e7eb;         /* gray-200 */
}

/* 全体ボックス */
.menu-post-lists{
  background: var(--pl-bg);
  padding: clamp(16px, 3vw, 28px);
  border-radius: 14px;
}

/* ページ見出し（上部の大見出し） */
.menu-post-lists > h1{
  font-family: "Vollkorn", "Noto Sans JP", "Noto Sans Japanese", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: .02em;
  margin: 0 0 14px;
  color: var(--pl-strong);
}
.menu-post-lists > h1 a{
  text-decoration: none;
  color: inherit;
}
.menu-post-lists > h1 i{
  opacity: .65;
  margin-right: .5em;
}

/* ===== 上段：タイトル一覧（索引） ===== */
.post-list-index{
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.035);
}

.post-list-index ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
  gap: .5rem .8rem;
}

.post-list-index li{
  line-height: 1.5;
}

.post-list-index a{
  display: block;
  padding: .38em .6em;
  border-radius: 8px;
  background: #f9fafb;
  color: var(--pl-strong);
  text-decoration: none;
  border: 1px solid #f3f4f6;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
  will-change: transform;
}
.post-list-index a:hover,
.post-list-index a:focus{
  background: #eaf6ff;
  border-color: #dbeafe;
  color: var(--pl-accent);
  outline: none;
  transform: translateY(-1px);
}

/* 狭い画面では1列 */
@media (max-width: 640px){
  .post-list-index ul{
    grid-template-columns: 1fr;
  }
}

/* ===== 下段：本文エリア ===== */
.post-list-contents{
  margin-top: clamp(18px, 3vw, 28px);
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
}

/* 記事カード（外枠の罫線は無し） */
.kiji{
  background: var(--pl-surface);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* 下段：記事タイトル（上品・視認性重視） */
.kiji h1{
  font-family: "Vollkorn", "Noto Sans JP", "Noto Sans Japanese", serif;
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
  margin: 0 0 .7rem;
  padding: .6em .8em;
  color: #222;
  background: #f3f4f6;                /* 薄いグレー背景 */
  border-left: 4px solid var(--pl-accent); /* 左にアクセント線 */
  border-radius: 8px;
}
.kiji h1 a{
  color: inherit;
  text-decoration: none;
}
.kiji h1 a:hover,
.kiji h1 a:focus{
  color: var(--pl-accent);
  text-decoration: underline;
  outline: none;
}

/* 投稿日表示 */
.kiji-date{
  color: var(--pl-muted);
  font-size: .93rem;
  margin: .2rem 0 1rem;
}

/* 本文タイポグラフィ */
.kiji-body{
  font-family: "Noto Sans JP", "Noto Sans Japanese", system-ui, -apple-system, sans-serif;
  color: #1f2937;
  line-height: 1.85;
  font-size: clamp(15px, 1.8vw, 16.5px);
  letter-spacing: .01em;
}
.kiji-body p{ margin: 0 0 1.05em; }
.kiji-body h2, .kiji-body h3, .kiji-body h4{
  font-family: "Vollkorn", "Noto Sans JP", "Noto Sans Japanese", serif;
  margin: 1.2em 0 .6em;
  line-height: 1.35;
  color: #111827;
}
.kiji-body h2{ font-size: clamp(18px, 2.1vw, 22px); }
.kiji-body h3{ font-size: clamp(16px, 1.9vw, 19px); }

/* 引用・リスト・表 */
.kiji-body blockquote{
  margin: 1em 0;
  padding: .8em 1em;
  background: #f8fafc;
  border-left: 4px solid var(--pl-accent);
  border-radius: 8px;
}
.kiji-body ul,
.kiji-body ol{ margin: .8em 0 .8em 1.2em; }
.kiji-body li{ margin: .25em 0; }
.kiji-body table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: .95em;
}
.kiji-body th,
.kiji-body td{
  padding: .6em .7em;
  border-bottom: 1px solid var(--pl-border);
}
.kiji-body th{
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
}

/* 画像 */
.kiji-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: .6em 0;
  border-radius: 10px;
}

/* 本文内リンク */
.kiji-body a{
  color: var(--pl-accent);
  text-decoration: none;
}
.kiji-body a:hover,
.kiji-body a:focus{
  text-decoration: underline;
  outline: none;
}

/* 「該当記事なし」メッセージ */
.post-list.empty{
  color: var(--pl-muted);
  font-size: .96rem;
  padding: .6rem 0 0;
}

/* Goto Top を右寄せ */
.goto-top{
  display: block;
  text-align: right;
  margin-top: 1rem;
}
.goto-top a{
  color: var(--pl-accent);
  text-decoration: none;
  font-size: .95rem;
}
.goto-top a:hover{ text-decoration: underline; }

/* 余白の詰まり防止 */
.kiji-body > *:last-child{ margin-bottom: 0; }

/* レスポンシブ微調整 */
@media (max-width: 640px){
  .menu-post-lists{ padding: 14px; border-radius: 12px; }
  .post-list-index{ padding: 12px 14px; }
  .kiji{ padding: 14px; border-radius: 14px; }
  .kiji h1{ font-size: 18px; }
  .kiji-body{ font-size: 15px; }
}

/* post_list.css */
.menu-post-lists{max-width:100%;}
.menu-post-lists .post-list-index ul{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0;padding-left:1.2rem;}
.menu-post-lists .post-list-index li{list-style:disc;}
.menu-post-lists .post-list-contents{max-width:100%;}
.menu-post-lists .kiji{margin:1.25rem 0 2.5rem;border-top:1px solid #eee;padding-top:1rem;}
.menu-post-lists .kiji h1{font-size:1.25rem;margin:.2rem 0 .4rem 0;}
.menu-post-lists .kiji-date{font-size:.9rem;opacity:.8;margin-bottom:.5rem}

/* overflows */
.menu-post-lists .kiji-body{overflow-wrap:anywhere;word-break:normal;}
.menu-post-lists .kiji-body img,
.menu-post-lists .kiji-body video,
.menu-post-lists .kiji-body iframe{max-width:100%;height:auto}
.menu-post-lists .kiji-body table{width:100%;max-width:100%;border-collapse:collapse}
.menu-post-lists .kiji-body pre,
.menu-post-lists .kiji-body code{white-space:pre-wrap;word-break:break-word}
.menu-post-lists .kiji-body .alignfull,
.menu-post-lists .kiji-body .alignwide,
.menu-post-lists .kiji-body figure{max-width:100% !important;width:100% !important;margin-left:auto;margin-right:auto}

/* goto top */
.menu-post-lists .goto-top a{display:inline-block;padding:6px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc;text-decoration:none}
.menu-post-lists .goto-top a:hover{background:#eef6ff}

#goto_top{scroll-margin-top:72px;}
@media (max-width:782px){ #goto_top{scroll-margin-top:86px;} }