/*
Theme Name: 辰巳の辻占 リニューアル
Theme URI: https://divinus-jp.com/
Author: Yuri Nakanishi
Description: 辰巳の辻占（divinus-jp.com）の刷新用テーマ。青〜青紫を基調に、記事を中心とした簡潔な表示と主要導線を提供する。表示責務のみを持ち、URL維持・移行処理は tatsumi-site プラグインへ分離する。
Version: 0.11.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tatsumi-renewal
Tags: blog, two-columns, right-sidebar, responsive-layout, custom-menu, translation-ready
*/

/* =========================================================
   1. 設計トークン

   青〜青紫を主色にし、白い本文面と淡い背景で読みやすさを優先する。
   既存イラストと画像そのものの色は変更しない。
   ========================================================= */
/*
 * 見出しフォントの @font-face は assets/css/fonts.css にある。
 * 配布元の .ttc はブラウザが読めないため、scripts/build-title-font.py で
 * woff2 へ分割変換したものを使う。ここへ書き戻さない。
 */

:root {
  --color-page: #f5f7fc;
  --color-page-deep: #e9edf8;
  --color-card: #ffffff;

  --color-text: #20243a;
  --color-text-muted: #69708b;
  --color-text-soft: #454c68;

  --color-accent: #5260b8;
  --color-accent-hover: #39479d;

  --color-gold: #747bd1;
  --color-gold-light: #aeb5f2;
  --color-gold-pale: #e8eaff;

  --color-charcoal: #252a62;
  --color-charcoal-soft: #394080;

  --color-link: #3859a8;
  --color-link-hover: #6548a8;

  --color-border: #dce1f0;
  --color-rule: #e8ebf5;

  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
    Meiryo, Helvetica, Arial, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Shippori Mincho", "MS PMincho", serif;
  /* サイト名と記事タイトルの書体。読み込み前・範囲外の字は明朝へ落ちる。 */
  --font-header: "DFP Roman Yuki W9", var(--font-serif);

  /*
   * 面のグラデーション。
   *
   * 主色の青〜青紫から外へ出ず、明度差は薄くとる。濃くすると帯が主張して
   * 本文の白面が沈むため、どれも同系色の3段までに留める。
   */
  --grad-header: linear-gradient(118deg, #383f83 0%, #2c3272 46%, #232859 100%);
  --grad-nav: linear-gradient(180deg, rgba(60, 68, 136, 0.97) 0%, rgba(48, 54, 111, 0.97) 100%);
  --grad-footer: linear-gradient(180deg, #2a3070 0%, #242a5e 55%, #1e2350 100%);
  /* 右から出るドロワー。縦に長い面なので、上から下へ落とす。 */
  --grad-drawer: linear-gradient(180deg, #363d80 0%, #2b3170 45%, #232859 100%);
  --grad-accent: linear-gradient(135deg, #6d7ada 0%, #5260b8 55%, #45529f 100%);
  --grad-accent-hover: linear-gradient(135deg, #5b68c4 0%, #45529f 55%, #39479d 100%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
  --grad-rule: linear-gradient(90deg, transparent, rgba(174, 181, 242, 0.55), transparent);
  /* 濃紺の帯に載せる釦。地と同系の青では沈むため、明るい側へ振る。 */
  --grad-on-dark: linear-gradient(180deg, #ffffff 0%, #dfe4ff 100%);
  --grad-on-dark-hover: linear-gradient(180deg, #ffffff 0%, #c9d0ff 100%);

  --size-content: 740px;
  --size-sidebar: 250px;
  --size-gap: 16px;
  --size-shell: 1120px;
  --pad-card: 16px;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-image: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(35, 43, 97, 0.05), 0 10px 28px -18px rgba(35, 43, 97, 0.28);
  --shadow-raise: 0 2px 4px rgba(35, 43, 97, 0.06), 0 18px 36px -22px rgba(35, 43, 97, 0.4);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* タブレット帯は1カラムのぶん本文が広い。余白を詰めたままだと1行が長くなりすぎる。 */
@media (min-width: 600px) {
  :root { --pad-card: 30px; --size-gap: 22px; }
}

@media (min-width: 1024px) {
  :root { --pad-card: 40px; --size-gap: 26px; }
}

/* =========================================================
   2. ベース
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--color-page);
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(116, 123, 209, 0.13), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(82, 96, 184, 0.08), transparent 55%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.85;
  /* 日本語の禁則を保ちつつ、長いURLだけ折り返す */
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe,
embed,
object { max-width: 100%; }

img,
video { height: auto; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover,
a:focus { color: var(--color-link-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75em 1.25em;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

/* =========================================================
   3. レイアウト
   ========================================================= */
.site-inner {
  width: min(100% - 24px, var(--size-shell));
  margin-inline: auto;
}
@media (min-width: 600px) {
  .site-inner { width: min(100% - 48px, var(--size-shell)); }
}

.site-main-area {
  display: block;
  padding-block: 22px 44px;
}
@media (min-width: 600px) {
  .site-main-area { padding-block: 34px 60px; }
}

/* 右カラムを置かず、記事一覧と本文を読みやすい幅で中央に置く。 */
.site-content {
  position: relative;
  width: min(100%, 900px);
  margin-inline: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
/* 上端の細いゴールドの線。参考の装飾を1本だけ引き継ぐ。 */
.site-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold) 45%, var(--color-accent));
}

.site-sidebar { min-width: 0; }

/* =========================================================
   4. ヘッダー
   ========================================================= */
.site-navigation-shell {
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar .site-navigation-shell { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-navigation-shell { top: 46px; }
}
@media (max-width: 1099px) {
  /* 検索フォームを含むヘッダーで本文を覆わないよう、狭い画面では追従させない。 */
  .site-navigation-shell,
  .admin-bar .site-navigation-shell { position: relative; top: auto; }
}

.site-header {
  position: relative;
  /*
   * ナビ帯(z-index:3)より上。同値だと後ろにあるナビが上に乗り、
   * 「絞り込み」の浮動パネルがナビへ潜り込む。
   */
  z-index: 4;
  background: var(--grad-header);
  color: #fff;
}
/* 左上の淡い光。単色の紺より奥行きが出る。演出はこの1枚だけに絞る。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 180% at 8% -40%, rgba(174, 181, 242, 0.22), transparent 62%);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grad-rule);
}
.site-header > * { position: relative; }

.site-header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 10px 0;
}
@media (min-width: 600px) {
  .site-header-inner { min-height: 84px; padding: 14px 0; }
}
@media (max-width: 599px) {
  /* メニュー釦(44px)は右16pxに浮いている。重ならない下限は44px。 */
  .site-branding { padding-right: 50px; }
  .nav-toggle { position: absolute; top: 10px; right: 16px; }
}

.header-search {
  order: 3;
  flex: 1 0 100%;
  min-width: 0;
}
@media (min-width: 1100px) {
  .site-header-inner { flex-wrap: nowrap; }
  .header-search {
    order: initial;
    flex: 1 1 600px;
    max-width: 680px;
  }
}

.site-branding {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ヘッダー左のサイトロゴ（assets/images/header-logo.jpg） */
.site-brand-mark {
	display: block;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 2px solid var(--color-gold-light);
	border-radius: 9px;
	background: var(--color-cream);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
@media (min-width: 600px) {
	.site-brand-mark { width: 60px; height: 60px; }
}
.site-brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-brand-mark:hover,
.site-brand-mark:focus-visible { opacity: 0.9; }

.site-branding-text { min-width: 0; }

.site-title {
  margin: 0;
  font-family: var(--font-header);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.12em;
}
@media (min-width: 900px) {
  .site-title { font-size: 27px; }
}
.site-title a { color: #fff; }
.site-title a:hover,
.site-title a:focus { color: var(--color-gold-light); text-decoration: none; }

.site-description {
  margin: 3px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
  letter-spacing: 0.06em;
}
@media (min-width: 600px) {
  .site-description { font-size: 13px; }
}
/*
 * 狭い画面でも、キャッチコピーは折り返さずに全文を出す。
 * 幅が足りないぶんは字の大きさで吸収する。
 *
 * 引く136pxは、キャッチコピーが使えない横幅の合計。
 *   左右の余白 16px×2 ＋ ロゴ 44px ＋ ロゴとの間隔 10px ＋ メニュー釦を避ける 50px
 * 割る23は、いまのキャッチコピー22文字に1文字分の余裕を足したもの。
 * 全角はほぼ1em幅なので「使える幅 ÷ 文字数」がそのまま収まる上限になる。
 *
 * キャッチコピーを長くすると入りきらなくなる。そのときは横スクロールを
 * 出さないよう overflow 側で止まる（末尾が欠ける）ので、割る数を直す。
 */
@media (max-width: 599px) {
  .site-description {
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: normal;
    font-size: min(11px, calc((100vw - 136px) / 23));
  }
}

.site-custom-logo img { max-height: 52px; width: auto; }

/* =========================================================
   5. グローバルナビ
   ========================================================= */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  /* タップ対象の下限44px */
  min-width: 44px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(226, 200, 119, 0.55);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-gold-light);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.nav-toggle:hover { background: rgba(226, 200, 119, 0.18); }
.nav-toggle-bars {
  display: block;
  position: relative;
  width: 18px; height: 1.5px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* ナビ帯。ヘッダーの兄弟なので、ページ全体に対して追従できる。 */
.main-navigation-bar {
  position: relative;
  z-index: 3;
  background: var(--grad-nav);
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation a {
  position: relative;
  display: block;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.main-navigation a:hover,
.main-navigation a:focus {
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  text-decoration: none;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--color-gold-light); }

/* ドロワーの見出し行と外部リンク。帯として並ぶ幅では出さない。 */
.drawer-head,
.drawer-social,
.drawer-search-slot { display: none; }

/*
 * モバイル／タブレット: 右から出るドロワー。
 *
 * 本文を押さないよう画面に固定し、閉じているあいだは visibility で
 * 隠す。translateだけだと、畳んだ中のリンクへタブで入れてしまう。
 */
@media (max-width: 899px) {
  body.navigation-open { overflow: hidden; }

  .main-navigation-bar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    display: flex;
    width: min(330px, 88vw);
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--grad-drawer);
    box-shadow: -18px 0 44px rgba(18, 20, 48, 0.42);
    transform: translateX(100%);
    visibility: hidden;
    /* 閉じるときは、滑り終えてから隠す。 */
    transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
  }
  body.navigation-open .main-navigation-bar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s var(--ease), visibility 0s;
  }
  .main-navigation-bar .site-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 14px 16px 24px;
  }

  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .drawer-title {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
  }
  .drawer-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.18s var(--ease);
  }
  .drawer-close:hover { background: rgba(255, 255, 255, 0.18); }

  /* 検索欄はJavaScriptがここへ移してくる。移る前は高さを持たない。 */
  .drawer-search-slot { display: block; }
  .drawer-search-slot:empty { display: none; }
  .drawer-search-slot .header-search { margin-bottom: 18px; }
  .drawer-search-slot .header-search .search-actions { margin-top: 8px; }

  .main-navigation {
    display: none;
    margin-block: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  /* 開閉式のときは指で押す。帯の高さではなく44pxを確保する。 */
  .main-navigation a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* 行頭に小さな印 */
  .main-navigation a::before {
    content: "";
    width: 4px; height: 4px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--color-gold-light);
    opacity: 0.8;
  }

  /*
   * メニューのすぐ下に外部サービスの3件を置く。
   * 下端へ寄せると、縦長の画面でメニューとのあいだが大きく空く。
   */
  .drawer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .drawer-social a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.82rem;
  }
  .drawer-social a:hover,
  .drawer-social a:focus-visible {
    border-color: var(--color-gold-light);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
  }
  .drawer-social .social-icon { width: 16px; height: 16px; }

  .navigation-scrim {
    display: none;
    position: fixed;
    z-index: 55;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(18, 20, 48, 0.5);
    cursor: default;
  }
  body.navigation-open .navigation-scrim { display: block; }
}

/* タブレット以上: 中央に寄せた横並びの帯 */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .main-navigation { display: block !important; }
  .main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .main-navigation li { position: relative; }
  /* 項目の間に細い縦罫。参考デザインの区切りを踏襲する。 */
  .main-navigation > ul > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.22);
  }
  .main-navigation a { padding: 12px 20px; line-height: 1.5; }
  /* ホバー時に下からゴールドの下線が伸びる */
  .main-navigation > ul > li > a::after {
    content: "";
    position: absolute;
    left: 20px; right: 20px; bottom: 6px;
    height: 1px;
    background: var(--color-gold-light);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s var(--ease);
  }
  .main-navigation > ul > li > a:hover::after,
  .main-navigation > ul > li > a:focus::after,
  .main-navigation > ul > li.current-menu-item > a::after,
  .main-navigation > ul > li.current_page_item > a::after { transform: scaleX(1); }
}

@media (min-width: 900px) {
  .navigation-scrim { display: none !important; }
}

/* =========================================================
   6. ページ見出し
   ========================================================= */
.page-header {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-rule);
}
.page-title {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
/* 見出し左のゴールドの縦棒 */
.page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
}
@media (min-width: 600px) {
  .page-title { font-size: 27px; padding-left: 18px; }
}
.page-title span { color: var(--color-accent); }
.archive-description {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* =========================================================
   7. 投稿一覧
   ========================================================= */
.entry-list { display: flex; flex-direction: column; }

/* 並び順と件数の行。並び順は左、件数は右端へ寄せる。 */
.entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-rule);
}
.page-header + .entry-toolbar { margin-top: -4px; }

.entry-count {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.entry-count strong {
  color: var(--color-text);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

/*
 * 新着順／人気順の切替。
 *
 * 選択中がひと目で分かるよう、溝の中で選択側だけを持ち上げる。
 * 溝と摘みの差は影と地色でつけ、枠線を重ねない。
 */
.entry-sort {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-page-deep);
  box-shadow: inset 0 1px 2px rgba(35, 43, 97, 0.08);
}
.entry-sort a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.entry-sort a:hover {
  text-decoration: none;
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.6);
}
.entry-sort a[aria-current="page"] {
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 1px 2px rgba(35, 43, 97, 0.2), 0 6px 14px -8px rgba(35, 43, 97, 0.75);
}
.entry-sort a[aria-current="page"]:hover { color: #fff; }

/* 絞り込み条件。1つずつ外せるようにする。 */
.filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 2px 4px 2px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, var(--color-gold-pale) 100%);
  color: var(--color-text-soft);
  font-size: 0.78rem;
}
.filter-chip-label { line-height: 1.5; }
/* 24pxはWCAG 2.5.8の下限。メタ行のリンクと同じ床にする。 */
.filter-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.filter-chip-remove:hover,
.filter-chip-remove:focus-visible {
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.entry-card {
  position: relative;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.entry-card:hover {
  background: var(--color-page);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

/*
 * カード全体をタップ対象にする。
 *
 * 見出しリンクの実高さは1行で25pxしかなく、指では狙いにくい。見出し自体を
 * 44pxに膨らませると行間が崩れるため、見出しリンクの当たり判定をカードへ広げる。
 * サムネイルは同じURLを指すため、上に載せて操作可能に保つ。
 */
.entry-card .entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.entry-card .entry-thumbnail a {
  position: relative;
  z-index: 1;
}
.entry-card.has-thumbnail {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
}
/* 375px幅では、サムネイルを詰めないと抜粋が1行4〜5文字になる。 */
@media (min-width: 400px) and (max-width: 599px) {
  .entry-card.has-thumbnail { grid-template-columns: 96px minmax(0, 1fr); }
}
.entry-card:last-child { margin-bottom: 0; }

/* 一覧の行末のシェブロン。参考デザインの一覧の作法。 */
.entry-card-chevron { display: none; }

@media (min-width: 600px) {
  .entry-card-chevron {
    display: block;
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid var(--color-gold);
    border-bottom: 1.5px solid var(--color-gold);
    transform: rotate(-45deg);
    transition: right 0.2s var(--ease);
  }
  .entry-card:hover .entry-card-chevron { right: 9px; }
  .entry-card.has-thumbnail { grid-template-columns: 128px minmax(0, 1fr); gap: 18px; }
  .entry-card { margin-bottom: 16px; padding: 18px 38px 18px 18px; }
}

@media (min-width: 1024px) {
  .entry-card.has-thumbnail { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
}

.entry-thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-image);
  background: var(--color-page-deep);
  box-shadow: 0 1px 2px rgba(74, 58, 30, 0.08);
}

/*
 * 一覧のタイトルは本文と同じゴシック。ロマン雪はサイト名だけに残し、
 * 記事タイトルは読みやすさを優先する。
 */
.entry-card .entry-title {
  margin: 0 0 6px;
  font-family: var(--font-base);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.025em;
}
@media (min-width: 600px) {
  .entry-card .entry-title { font-size: 21px; line-height: 1.55; }
}
.entry-card .entry-title a { color: var(--color-text); }
.entry-card .entry-title a:hover { color: var(--color-accent); text-decoration: none; }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.entry-date { font-variant-numeric: tabular-nums; }
/*
 * 日付・カテゴリ・パンくず・コメント日時は補助情報で、44pxまで広げると
 * メタ行の見え方が変わる。WCAG 2.5.8 の下限である24pxを床にする。
 */
.entry-meta a,
.breadcrumbs a,
.comment-metadata a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
}
.entry-meta a { color: var(--color-text-muted); }
.entry-meta a:hover { color: var(--color-accent); }

.entry-excerpt {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-soft);
}

/* =========================================================
   8. 記事本文
   ========================================================= */
.singular .entry-header {
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-rule);
}

/* 記事タイトルも一覧と同じ通常フォント。一覧から詳細へ移っても字面が変わらない。 */
.singular .entry-title {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

@media (min-width: 600px) {
  .singular .entry-title { font-size: 30px; }
}

.entry-featured-image { margin: 0 0 24px; }
.entry-featured-image img { border-radius: var(--radius-image); }

/* 本文は行間を広く取って読ませる。 */
.entry-content > * + * { margin-top: 1.6em; }
.entry-content { font-size: 16px; line-height: 1.95; color: var(--color-text-soft); }
@media (min-width: 600px) {
  /* 1カラムでも日本語の読み幅が約45字を超えないよう、本文だけ中央で絞る。 */
  .entry-content { max-width: 45em; margin-inline: auto; }
}
.entry-content a {
  text-decoration: underline;
  text-decoration-color: rgba(43, 111, 128, 0.4);
  text-underline-offset: 3px;
}
.entry-content a:hover { text-decoration-color: currentColor; }

.entry-content h2 {
  margin-top: 2.4em;
  padding: 0.5em 0 0.5em 0.85em;
  border-left: 4px solid var(--color-gold);
  background: linear-gradient(90deg, var(--color-gold-pale), rgba(245, 234, 208, 0));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.entry-content h3 {
  position: relative;
  margin-top: 2.2em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--color-text);
}
/* 罫線の左端だけゴールドに差し替える */
.entry-content h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 3em; height: 1px;
  background: var(--color-gold);
}
.entry-content h4 {
  margin-top: 1.9em;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.03em;
}

.entry-content p { margin: 0; }

.entry-content img,
.entry-content figure img { border-radius: var(--radius-image); }

.entry-content figure { margin-inline: 0; }
.entry-content figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.entry-content ul,
.entry-content ol { padding-left: 1.6em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content ul li::marker { color: var(--color-gold); }

.entry-content blockquote {
  margin-inline: 0;
  padding: 1.1em 1.3em;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #55504a;
}
.entry-content blockquote > :first-child { margin-top: 0; }

/* 表は横スクロールで逃がす。旧記事に固定幅の table が残っているため */
.entry-content table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.entry-content th,
.entry-content td {
  padding: 0.65em 0.9em;
  border: 1px solid var(--color-border);
  text-align: left;
}
.entry-content th { background: var(--color-page-deep); font-weight: 700; }

.entry-content pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em;
  background: #f6f2ea;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.84rem;
  line-height: 1.7;
}
.entry-content code {
  padding: 0.15em 0.45em;
  background: var(--color-page-deep);
  border-radius: 4px;
  font-size: 0.88em;
}
.entry-content pre code { padding: 0; background: none; }

.entry-content hr {
  height: 0;
  margin-block: 2.4em;
  border: 0;
  border-top: 1px solid var(--color-rule);
}

/* 埋め込み（YouTube・X など）を潰さない */
.entry-content iframe { max-width: 100%; }
/*
 * 旧記事の iframe は width="560" height="315" のような固定値を持つ。
 * max-width だけを当てると幅は縮むが高さは315pxのまま残り、比率が崩れる。
 * 属性から比率を作り、高さを幅に追従させる。
 */
.entry-content iframe[width][height] {
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
  height: auto;
}
@supports not (aspect-ratio: attr(width type(<number>)) / attr(height type(<number>))) {
  /* attr() の型付きが使えない環境では、動画で最も多い16:9へ寄せる。 */
  .entry-content iframe[width][height] { aspect-ratio: 16 / 9; height: auto; }
}
.wp-block-embed__wrapper { max-width: 100%; }
.wp-block-embed iframe { width: 100%; }
.wp-video,
.wp-video-shortcode,
.video-container,
.blogcard-wrap,
.blogcard { max-width: 100% !important; }
.video-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* WordPress標準の配置クラス */
.alignleft { float: left; margin: 0.4em 1.4em 1em 0; }
.alignright { float: right; margin: 0.4em 0 1em 1.4em; }
.aligncenter { display: block; margin-inline: auto; }
.entry-content::after { content: ""; display: table; clear: both; }

@media (max-width: 599px) {
  /* 狭い画面で回り込みは読みにくいので解除する */
  .alignleft,
  .alignright { float: none; display: block; margin: 1em auto; }
}

.entry-footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--color-rule);
}
.postid-25947 .entry-meta,
.post-25947 .entry-meta { display: none; }

/* パンくず */
.breadcrumbs {
  margin: 0 0 20px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li:not(:last-child)::after {
  content: "\203A";
  margin-inline: 8px;
  color: var(--color-gold);
}
.article-widgets,
.in-content-widgets { margin-block: 22px; }
.article-widgets .widget + .widget,
.in-content-widgets .widget + .widget { margin-top: 14px; }

/* 外部SDKなしの共有リンク */
.share-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--color-rule);
  font-size: 12px;
}
.share-label {
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  font-family: var(--font-serif);
}
.share-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-page);
  color: var(--color-text-soft);
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.social-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  overflow: visible;
}
.share-links a:hover,
.share-links a:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}
.entry-terms a {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 3px 12px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.entry-terms a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.page-links { margin-top: 1.5em; font-size: 0.9rem; }

/* =========================================================
   9. ページ送り・関連記事
   ========================================================= */
.pagination { margin-top: 36px; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* タップ対象。ページ送りは指で押す頻度が高い。 */
  min-width: 44px;
  min-height: 44px;
  padding: 0.5em 0.75em;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.5;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pagination a.page-numbers:hover {
  background: var(--color-gold-pale);
  border-color: var(--color-gold);
  color: var(--color-text);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.pagination .dots { background: none; border-color: transparent; }

.post-navigation { margin-top: 32px; }
.post-navigation .nav-links { display: grid; gap: 12px; }
@media (min-width: 600px) {
  .post-navigation .nav-links { grid-template-columns: 1fr 1fr; }
  .post-navigation .nav-next { text-align: right; }
}
.post-navigation a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 0.86rem;
  line-height: 1.7;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}
.post-navigation a:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-card);
  color: var(--color-accent);
  text-decoration: none;
}
.post-navigation .nav-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.related-posts {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
}
.related-posts > h2 {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* 見出しの前に小さなゴールドの菱形 */
.related-posts > h2::before,
.comments-title::before,
.comment-reply-title::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  vertical-align: 0.12em;
  background: var(--color-gold);
  transform: rotate(45deg);
}
.related-list { display: grid; gap: 14px; }
.related-card { display: block; }
.related-card.has-thumbnail {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}
.related-card:not(:last-child) {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-rule);
}
.related-thumbnail img {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-image);
}
.related-card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
/* 関連記事は見出しと「記事を読む」の両方が主要な導線。タップ対象を確保する。 */
.related-card h3 a {
  display: block;
  min-height: 44px;
  padding-block: 10px;
  color: var(--color-text);
}
.related-card h3 a:hover { color: var(--color-accent); text-decoration: none; }
.related-card p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.7;
}
.related-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
  min-width: 44px;
  min-height: 44px;
  margin-top: 3px;
  padding-inline: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.related-card::after { content: ""; display: table; clear: both; }

/* =========================================================
   10. サイドバー
   ========================================================= */
.site-sidebar .widget {
  padding: 20px 18px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.site-sidebar .widget + .widget { margin-top: var(--size-gap); }
.sidebar-scroll-widgets { margin-top: var(--size-gap); }
@media (min-width: 1024px) {
  .sidebar-scroll-widgets {
    position: sticky;
    /* ナビ帯が追従しているぶんだけ下げる。 */
    top: 66px;
  }
}
@media (max-width: 1023px) {
  .sidebar-scroll-widgets { display: none; }
}

/* 見出しは明朝＋ゴールドの短い罫線 */
.widget-title {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-rule);
}
.widget-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 2.4em; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.widget ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: 15px;
}
.widget li { line-height: 1.7; }
.site-sidebar .widget > ul > li + li { border-top: 1px solid var(--color-rule); }
.widget li a {
  display: block;
  color: var(--color-text-soft);
  /* 一覧のリンクもタップ対象。1行だと約27pxしかない。 */
  min-height: 44px;
  padding-block: 9px;
}
.widget li a:hover { color: var(--color-accent); }

/* サイドバーの一覧はシェブロン付きの行にする */
.site-sidebar .widget_recent_entries > ul > li > a,
.site-sidebar .widget_categories > ul > li > a,
.site-sidebar .widget_pages > ul > li > a,
.site-sidebar .widget_nav_menu > div > ul > li > a,
.site-sidebar .widget_meta > ul > li > a {
  position: relative;
  padding-right: 18px;
}
.site-sidebar .widget_recent_entries > ul > li > a::after,
.site-sidebar .widget_categories > ul > li > a::after,
.site-sidebar .widget_pages > ul > li > a::after,
.site-sidebar .widget_nav_menu > div > ul > li > a::after,
.site-sidebar .widget_meta > ul > li > a::after {
  content: "";
  position: absolute;
  right: 4px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid var(--color-gold);
  border-bottom: 1.5px solid var(--color-gold);
  transform: rotate(-45deg);
  transition: right 0.18s var(--ease);
}
.site-sidebar .widget li a:hover::after { right: 0; }

/* 自動広告は使わず、全ページの主内容を読み終えた後に1枠だけ表示する。 */
.site-bottom-ad-area { padding-block: 0 40px; }
.tatsumi-bottom-ad {
  width: min(100%, 380px);
  margin: 40px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  text-align: center;
  overflow: hidden;
}
.tatsumi-bottom-ad .widget {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.tatsumi-ad-label {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.tatsumi-ad-placeholder {
  display: flex;
  min-height: 250px;
  margin: 0;
  padding: 28px 20px;
  border: 1px solid var(--color-rule);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 241, 249, 0.92)),
    var(--color-page-deep);
  color: var(--color-text-muted);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tatsumi-ad-placeholder-label {
  font-family: var(--font-base);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}
.tatsumi-ad-placeholder-title {
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tatsumi-ad-placeholder-note {
  font-size: 0.72rem;
}

.widget li ul { padding-left: 1em; }

/*
 * 人気記事は tatsumi-site の [tatsumi_popular_posts] が <ol> を返す。
 * 番号そのものが情報なので、既定のマーカーを消して金色の順位に置き換える。
 */
.tatsumi-popular-posts {
  counter-reset: tatsumi-rank;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tatsumi-popular-posts li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}
.site-sidebar .tatsumi-popular-posts li + li { border-top: 1px solid var(--color-rule); }
.tatsumi-popular-posts li::before {
  counter-increment: tatsumi-rank;
  content: counter(tatsumi-rank);
  margin-top: 11px;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  line-height: 1;
  text-align: center;
  color: var(--color-gold);
}
/* 上位3件だけ塗りの丸にして、順位の差を見せる。 */
.tatsumi-popular-posts li:nth-child(-n+3)::before {
  padding: 4px 0;
  border-radius: 50%;
  background: var(--color-gold);
  color: #fff;
}
.tatsumi-popular-posts li a {
  min-height: 44px;
  padding-block: 9px;
}

/*
 * サイトマップページ。[sitemap] は #sitemap_list の入れ子リストを返す。
 * 本文の箇条書きの体裁のままだと階層が読み取れないため、罫線で段を作る。
 */
#sitemap_list,
#sitemap_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sitemap_list li { margin: 0; }
#sitemap_list > li + li { border-top: 1px solid var(--color-rule); }
#sitemap_list a {
  display: block;
  min-height: 44px;
  padding: 10px 4px;
  color: var(--color-text-soft);
  text-decoration: none;
  line-height: 1.6;
}
#sitemap_list a:hover { color: var(--color-accent); }
#sitemap_list ul {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--color-rule);
}
#sitemap_list ul a { font-size: 0.92em; color: var(--color-text-muted); }

/* 長い一覧は高さを抑える。月別は163件、カテゴリは41件ある */
.widget_archive ul,
.widget_categories ul,
.widget_recent_entries ul {
  max-height: 20rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.widget select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 0.6em 0.7em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 0.88rem;
}

.widget img { height: auto; border-radius: var(--radius-image); }
.sidebar-consultation-banner,
.sidebar-consultation-banner img {
  display: block;
  width: 100%;
}
.sidebar-reference-banner {
  display: block;
  margin-top: var(--space-4);
}
.sidebar-reference-banner img {
  display: block;
  width: 100%;
  max-width: 288px;
  margin-inline: auto;
}
.sidebar-blogmura-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sidebar-blogmura-links a,
.sidebar-blogmura-links img {
  display: block;
}
.sidebar-blogmura-label {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}
.twitter-timeline {
  max-width: 100% !important;
}
.sidebar-fallback-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

@media (max-width: 639px) {
  .widget_pc_text,
  .widget_pc_ad { display: none !important; }
}
@media (min-width: 640px) {
  .widget_mobile_text,
  .widget_mobile_ad { display: none !important; }
}

.tagcloud a,
.tatsumi-tag-cloud a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; /* タップ対象 */
  margin: 0 5px 6px 0;
  padding: 3px 14px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.75rem !important;
  color: var(--color-text-muted);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tagcloud a:hover,
.tagcloud a:focus-visible,
.tatsumi-tag-cloud a:hover,
.tatsumi-tag-cloud a:focus-visible {
  background: var(--color-gold-pale);
  border-color: var(--color-gold);
  color: var(--color-text);
  text-decoration: none;
}

/* =========================================================
   キーワード・カテゴリー・タグをまとめた記事検索

   ヘッダーでは1本の帯として横に並べ、1099px以下ではキーワード欄だけを
   残してカテゴリーとタグを畳む。375pxで畳まないと、最初の画面が
   ほぼ検索欄で埋まって記事が1件も見えない。
   ========================================================= */
.search-form--filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.search-control { min-width: 0; }
.search-control label {
  display: block;
  margin: 0 0 4px 2px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

/* 入力欄と、その中へ重ねるアイコン・シェブロンの位置決め。 */
.search-field-wrap {
  position: relative;
  display: block;
}
.search-form .search-field,
.search-form--filters select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.55em 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--grad-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* iOSの自動ズーム防止 */
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.search-control--keyword .search-field { padding-left: 2.3em; }
.search-field-icon {
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-form .search-field:focus,
.search-form--filters select:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(82, 96, 184, 0.22);
}

/* select の三角は環境ごとに形が違う。消して自前のシェブロンへ揃える。 */
.search-form--filters select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1em;
}
.search-select-chevron {
  position: absolute;
  right: 0.95em;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/*
 * 320pxでは「絞り込み」＋「記事を探す」で1行が埋まる。折り返しを許さないと
 * 「条件をクリア」がはみ出してページ全体が横に溢れる。
 */
.search-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.search-form .search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.6em 1.4em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 43, 97, 0.18), 0 10px 20px -12px rgba(35, 43, 97, 0.7);
  transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.search-form .search-submit:hover {
  background: var(--grad-accent-hover);
  box-shadow: 0 2px 4px rgba(35, 43, 97, 0.2), 0 14px 24px -12px rgba(35, 43, 97, 0.8);
}
.search-form .search-submit:active { transform: translateY(1px); }
.search-submit-icon { flex: 0 0 auto; }

.search-clear {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* 「絞り込み」の開閉。1100px以上では帯へ全部並ぶので隠す。 */
.search-refine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.search-refine-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.search-refine-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.68rem;
  line-height: 1;
}
.search-refine-toggle-chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.search-refine-toggle[aria-expanded="true"] .search-refine-toggle-chevron {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.search-refine {
  display: grid;
  /*
   * 1欄を240pxより狭くしない。狭めると選択中のカテゴリー名やタグ名が
   * 途中で切れて、現在の条件が読めなくなる。
   * 収まらない幅では2列をやめて1列へ落ちる。
   */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
/*
 * 畳んだ状態は初期HTMLへ入れてある。JavaScriptが動かない環境で開けなく
 * ならないよう、`js` が付いているときだけ隠す。
 * この対応は assets/js/header-search.js と必ず揃える。
 */
.js .search-refine[data-collapsed] { display: none; }

/* ヘッダー内。濃紺の地に載るため、文字と枠を明るい側へ振る。 */
.header-search .search-control label { color: rgba(255, 255, 255, 0.78); }
.header-search .search-field,
.header-search select {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.96);
}
.header-search .search-field:focus,
.header-search select:focus {
  border-color: var(--color-gold-light);
  box-shadow: 0 0 0 3px rgba(174, 181, 242, 0.34);
}
.header-search .search-submit {
  background: var(--grad-on-dark);
  color: #2f3577;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 20px -12px rgba(0, 0, 0, 0.6);
}
.header-search .search-submit:hover {
  background: var(--grad-on-dark-hover);
  color: #262c66;
}
.header-search .search-refine-toggle {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.header-search .search-refine-toggle:hover,
.header-search .search-refine-toggle[aria-expanded="true"] {
  border-color: var(--color-gold-light);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.header-search .search-refine-count { background: var(--color-gold-light); color: #262c66; }
.header-search .search-clear { color: rgba(255, 255, 255, 0.82); }

/* キーワード欄のラベルは、虫眼鏡と占位表示で足りるので常に省く。 */
.header-search .search-control--keyword label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * 600px以上: キーワードと操作を1行へ収め、絞り込みは下段へ回す。
 * 釦を伸ばしたままだと、800pxで「記事を探す」が横幅の8割を占める。
 */
@media (min-width: 600px) {
  .header-search .search-form--filters { grid-template-columns: minmax(0, 1fr) auto; }
  .header-search .search-control--keyword { grid-column: 1; grid-row: 1; }
  .header-search .search-actions { grid-column: 2; grid-row: 1; }
  .header-search .search-refine { grid-column: 1 / -1; grid-row: 2; }
  .header-search .search-submit { flex: 0 0 auto; }
}

/*
 * 600〜899pxではドロワーの中に入る。幅が330px前後しかないため、
 * 直前の「キーワードと操作を1行へ」を取り消して縦へ積む。
 * 打ち消す相手と同じ節に置き、後から書くことで効かせている。
 */
@media (min-width: 600px) and (max-width: 899px) {
  .drawer-search-slot .header-search .search-form--filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .drawer-search-slot .header-search .search-control--keyword,
  .drawer-search-slot .header-search .search-actions,
  .drawer-search-slot .header-search .search-refine {
    grid-column: auto;
    grid-row: auto;
  }
  .drawer-search-slot .header-search .search-submit { flex: 1 1 auto; }
}

/*
 * 広い画面: 帯にはキーワードだけを残し、カテゴリーとタグは
 * 「絞り込み」から開く浮動パネルへ移す。
 *
 * 3つを帯へ並べると1つあたりが200px前後まで痩せ、占位表示も選択中の
 * カテゴリー名も途中で切れる。開閉式にすれば、開いたときに必要な幅を
 * とれるうえ、キーワード欄も帯いっぱいに使える。
 */
@media (min-width: 1100px) {
  .header-search .search-form--filters {
    position: relative;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.18);
  }
  /* 帯へ収めても、タップ対象の下限44pxは崩さない。 */
  .header-search .search-field {
    border-color: transparent;
    border-radius: var(--radius-pill);
    font-size: 0.92rem;
  }
  .header-search .search-submit {
    padding-inline: 1.25em;
    font-size: 0.84rem;
  }
  .header-search .search-actions { gap: 6px; }

  /*
   * パネルは帯の下へ浮かせる。JavaScriptが無いときは浮かせず、帯の下段へ
   * 並べたままにする。浮かせてしまうと開く手段が無くなる。
   */
  .js .header-search .search-refine {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: min(360px, 100vw - 32px);
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    box-shadow: var(--shadow-raise);
  }
  /* パネルは白地。帯用の白文字と透過枠をここで戻す。 */
  .js .header-search .search-refine label { color: var(--color-text-muted); }
  .js .header-search .search-refine select {
    border-color: var(--color-border);
    background: var(--grad-surface);
  }
  .js .header-search .search-refine select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(82, 96, 184, 0.22);
  }

  /*
   * 帯の中では「条件をクリア」の文字が丸みの外へはみ出す。
   * ×の丸釦へ畳む。文字は読み上げ用に残すので font-size を0にして消す。
   */
  .header-search .search-clear {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .header-search .search-clear::before {
    content: "\00d7";
    font-size: 17px;
    line-height: 1;
  }
  .header-search .search-clear:hover,
  .header-search .search-clear:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    text-decoration: none;
  }
}

/* =========================================================
   11. コメント
   ========================================================= */
.comments-area {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--color-rule);
}
.comments-title,
.comment-reply-title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.comment-list { list-style: none; margin: 0 0 30px; padding: 0; }
.comment-list ol.children { list-style: none; margin-left: 16px; padding: 0; }
@media (min-width: 600px) {
  .comment-list ol.children { margin-left: 28px; }
}
.comment-body {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.92rem;
}
.comment-meta { margin-bottom: 6px; font-size: 0.76rem; color: var(--color-text-muted); }
.comment-author .avatar {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
}
.comment-author .fn { font-style: normal; font-weight: 700; }
.reply { font-size: 0.8rem; }
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; /* タップ対象 */
  padding-inline: 4px;
}

.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; margin-bottom: 5px; font-size: 0.84rem; color: var(--color-text-soft); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.65em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}
.comment-form input:focus,
.comment-form textarea:focus {
  background: var(--color-card);
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(226, 200, 119, 0.28);
}
.comment-form textarea { line-height: 1.8; resize: vertical; }
.comment-form .submit {
  justify-self: start;
  padding: 0.75em 2.2em;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.comment-form .submit:hover { background: var(--color-accent-hover); }
.comment-notes,
.comment-form-cookies-consent label { font-size: 0.78rem; color: var(--color-text-muted); }

/* =========================================================
   12. フォーム（Contact Form 7 / 予約）

   プラグインの出力構造には手を入れず、幅と可読性のみ整える。
   ========================================================= */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="time"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-page);
  color: var(--color-text);
  font: inherit;
  font-size: 16px; /* iOSの自動ズーム防止。個人情報の入力欄が多いため必須 */
  line-height: 1.6;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  background: var(--color-card);
  border-color: var(--color-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(226, 200, 119, 0.28);
}
.wpcf7 textarea { resize: vertical; }
.wpcf7 .wpcf7-submit {
  width: auto;
  padding: 0.85em 2.6em;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.wpcf7 .wpcf7-submit:hover { background: var(--color-accent-hover); }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 6px; }
.wpcf7 .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="radio"] {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  accent-color: var(--color-accent);
}
.wpcf7 .wpcf7-list-item-label { font-size: 0.92rem; }
.wpcf7-not-valid-tip { font-size: 0.82rem; }
.wpcf7 form .wpcf7-response-output {
  margin: 1.5em 0 0;
  padding: 0.85em 1.1em;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.wpcf7 p { margin-block: 0 1.2em; }

.recaptcha-disclosure {
  margin-top: 1.4rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* 予約カレンダーは横スクロールで逃がす */
.ahb-calendar-wrapper,
.appointment-form-wrapper,
.ahb-form-wrapper,
.cpp_form {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cpp_form .fields,
.cpp_form .dfield { max-width: 100%; }
.cpp_form input,
.cpp_form select,
.cpp_form textarea {
  max-width: 100%;
  font-size: 16px;
}

/* =========================================================
   13. フッター
   ========================================================= */
/* 参考デザインにならい、フッターの手前にクリーム地の導線帯を置く。 */
.footer-lead {
  padding-block: 34px;
  background: linear-gradient(180deg, var(--color-page-deep), var(--color-page));
  border-top: 1px solid var(--color-border);
}
.footer-widgets {
  display: grid;
  gap: 24px;
}
@media (min-width: 700px) {
  .footer-widgets { grid-template-columns: repeat(3, 1fr); }
}
.footer-widgets .widget-title { font-size: 15px; }

.site-footer {
  position: relative;
  padding-block: 34px 30px;
  background: var(--grad-footer);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
}
/* ヘッダー下端と同じ細い線。上下で挟んで面をまとめる。 */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--grad-rule);
}
.site-footer a { color: rgba(255, 255, 255, 0.88); }
.site-footer a:hover { color: var(--color-gold-light); text-decoration: none; }

.footer-navigation ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 24px;
  margin: 0 0 22px;
  padding: 0;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
}
@media (min-width: 700px) {
  .footer-navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
  }
}
.footer-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
}

.footer-essential-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-essential-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 20px;
}
.footer-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
}
.footer-social-links .social-icon {
  width: 17px;
  height: 17px;
}
.social-service-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  color: var(--color-charcoal);
  font-weight: 700;
  line-height: 1;
}

.site-info {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(226, 200, 119, 0.5);
  border-radius: 50%;
  background: rgba(61, 57, 54, 0.92);
  color: var(--color-gold-light);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.back-to-top:hover,
.back-to-top:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* =========================================================
   13.5 狭い画面は「カードをやめる」

   375pxでは、外枠の余白24px＋枠線2px＋パネル内余白32px＋カード内余白28pxで
   86pxが本文の外側に消える。読み幅が289pxしか残らず、抜粋が1行8文字前後になる。
   599px以下では角丸・左右の枠線・影を外して全幅に開き、余白は1段だけにする。
   ========================================================= */
@media (max-width: 599px) {
  /* 外側の余白をやめる。左右の padding は帯ごとに持たせる。 */
  .site-inner { width: 100%; }
  .site-header-inner,
  .main-navigation-bar .site-inner,
  .footer-lead > .site-inner,
  .site-footer > .site-inner { padding-inline: 16px; }

  .site-main-area { padding-block: 0 26px; gap: 10px; }

  /* 本文パネル: 角丸・左右の枠線・影を外し、画面幅いっぱいに使う。 */
  .site-content {
    padding: 22px 16px 26px;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
  .site-content::before { border-radius: 0; }

  /* サイドバーのウィジェットも同じ扱い。帯として縦に積む。 */
  .site-sidebar .widget {
    padding: 20px 16px;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
  .site-sidebar .widget + .widget { margin-top: 10px; }
  .sidebar-scroll-widgets { margin-top: 10px; }

  /* 一覧の1件も枠を持たせない。区切りは細い罫線だけにする。 */
  .entry-card {
    margin-bottom: 0;
    padding: 18px 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .entry-card:hover {
    background: none;
    border-color: transparent;
    box-shadow: none;
  }
  .entry-card + .entry-card { border-top: 1px solid var(--color-rule); }
  .entry-card:first-child { padding-top: 4px; }

  /* 引用・見出しの帯も、左右の余白を食わないよう浅くする。 */
  .entry-content blockquote { padding: 0.9em 1em; }
  .entry-content h2 { padding-left: 0.7em; }
}

/* =========================================================
   14. 検索結果なし・404
   ========================================================= */
/* ヘッダー外の検索欄。既定が1列なので、幅を絞るだけでよい。 */
.no-results .search-form,
.error-404 .search-form { margin-block: 1.6em; max-width: 420px; }
.error-404 ul { padding-left: 1.4em; font-size: 0.92rem; }
.error-404 li + li { margin-top: 0.4em; }
.error-404 h2 {
  margin-top: 1.8em;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

/* =========================================================
   15. 印刷
   ========================================================= */
@media print {
  .site-header,
  .main-navigation-bar,
  .site-sidebar,
  .footer-lead,
  .site-footer,
  .comments-area,
  .pagination,
  .post-navigation,
  .share-links,
  .related-posts,
  .back-to-top,
  .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; line-height: 1.7; }
  .site-inner { width: auto; }
  .site-content { box-shadow: none; border: 0; padding: 0; }
  .site-content::before { display: none; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================
   16. モーション配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}