/*
Theme Name: Junkie Surfer Notes Coastal Blue
Theme URI: https://blog.love-bears.com/
Author: Satomi Abe
Description: Junkie Surfer Notes 専用テーマ。コーストブルー配色、1カラムホームページ、DXD日次ツイート対応、3カラムアーカイブ、レスポンシブ対応。
Version: 1.0.0
Text Domain: junkie-surfer-notes
*/

:root {
  --bg: #eef3f7;        /* 淡いブルーグレー（モックのほぼ白背景） */
  --fg: #1a3548;        /* ダークネイビー */
  --muted: #6b8aa4;     /* ミューテッドブルー */
  --accent: #2f6f95;    /* コーストブルー */
  --accent-2: #1f5876;  /* ダーク版コーストブルー */
  --card: #ffffff;
  --border: #d8eaf3;    /* 境界線（軽め・モックの薄い分離感） */
}

* { box-sizing: border-box; }
html, body {
  margin:0; padding:0;
  color:var(--fg); background:var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }

.container { max-width: 920px; margin: 0 auto; padding: 0 20px; }

/* =========================
   3カラムレイアウト（Grid）
   ========================= */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 3fr 1.3fr;  /* 左18% 中58% 右24%（モック比率） */
  gap: 28px;
  padding-top: 16px;
  grid-template-areas: "left main right";
}
.col-left  { grid-area: left; }
.col-main  { grid-area: main; }
.col-right { grid-area: right; }

@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "left"
      "right";
  }
}

/* カラムが中身(iframe等)に引っ張られないように */
.col-left, .col-main, .col-right { min-width: 0; }

.site-header { padding: 24px 0; border-bottom: none; }
.site-branding .custom-logo-link, .site-branding .custom-logo { display:block; max-width:1000px; width:100%; height:auto; margin:0 auto; }
.site-title a { font-weight:700; font-size:24px; color:var(--fg); text-decoration:none; }
.site-description { color: var(--muted); font-size: 14px; }

/* パンくず（1行省略） */
.breadcrumb,
.breadcrumbs,
.breadcrumb-trail,
nav[aria-label="breadcrumb"] .breadcrumb-list {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  font-size: 13px;
  margin: 6px 0 12px;
}
.breadcrumb li,
.breadcrumbs li,
.breadcrumb-trail li,
.breadcrumb-list li { display: inline; }
.breadcrumb li + li::before,
.breadcrumbs li + li::before,
.breadcrumb-trail li + li::before,
.breadcrumb-list li + li::before { content: "›"; margin: 0 .32em; color: #94a3b8; white-space: nowrap; }
.breadcrumb li br,
.breadcrumbs li br,
.breadcrumb-trail li br,
.breadcrumb-list li br { display:none !important; }

h1, .h1 { font-size: clamp(18px, 2.5vw, 22px); line-height: 1.3; margin: 10px 0 8px; }
h2, .h2 { font-size: clamp(16px, 2.2vw, 20px); line-height: 1.35; margin: 4px 0 4px; } /* 追加CSSの意図を反映 */
h3, .h3 { font-size: clamp(15px, 1.8vw, 18px); line-height: 1.4; margin: 12px 0 6px; }

.entry { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.col-main article.entry { margin-bottom: 15px; }
/* 記事カードの重なり防止（マルチカラム/Masonry対策） */
.entry{
  margin-bottom: 28px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.entry-content { line-height: 1.9; }

/* ウィジェット：サイドバー感を抑えてページに溶け込む */
.widget {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 0 0;
  margin-bottom: 24px;
}
.widget h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 10px;
}
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { margin: 0.38em 0; font-size: 13px; }
.widget img { max-width:100%; height:auto; display:block; border-radius:6px; }

/* タイトル（一覧2行、省略） */
body:not(.single) .entry-title,
.widget .entry-title {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; line-height:1.35; max-height:calc(1.35em*2);
}

/* タイトル（個別3行、省略） */
.single .entry .entry-title, .single .entry-title {
  display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; max-height: calc(1.3em * 3);
  margin-top: 8px;
}

/* 抜粋：既定は3行クリップ */
.excerpt-3{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; text-overflow:ellipsis; line-height:1.7; max-height:calc(1.7em*3);
}

/* 抜粋：Tweet表示 / DXD / メディア有 のときはクリップ解除＋BFCで安定表示 */
.excerpt-3.excerpt-tweet-visible,
.excerpt-3.excerpt-dxd-visible,
.excerpt-3.excerpt-media-visible{
  display: flow-root; /* 新しいBFCで重なり防止 */
  overflow: visible;
  height: auto;
  max-height: none;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

/* Tweet埋め込みの幅・余白を安定化 */
.excerpt-3 .tx-tweet-wrap{ margin: 4px 0 12px; }
.excerpt-3 .twitter-tweet,
.excerpt-3 .tx-tweet-wrap,
.excerpt-3 .twitter-tweet iframe{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}
.excerpt-3 .twitter-tweet{ margin: 8px 0 !important; }

/* 投稿日時を右寄せに（追加CSSの意図を反映） */
.entry-meta {
  text-align: right;
  font-size: 14px;
  color: var(--muted, #666);
  margin-bottom: 8px;
}

/* 本文下のサムネイル（一覧） */
.entry-thumb { margin-top: 8px; text-align: center; }
.entry-thumb img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 個別ページ内メディア幅 */
.single .entry, .single .hentry, .single .entry-content { margin-left:auto; margin-right:auto; max-width:100%; box-sizing:border-box; }
.single .entry-content img, .single .entry-content video, .single .entry-content iframe, .single .entry-content embed, .single .entry-content object { max-width:100%; height:auto; display:block; }
@media (min-width:768px) { .single .entry-content img { max-width:600px; margin-left:auto; margin-right:auto; } }
.single .entry-content .alignwide, .single .entry-content .alignfull { width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; }
.single .entry-content figure, .single .entry-content .wp-block-image { margin-left:auto; margin-right:auto; }
.single .entry-content::after { content:""; display:block; clear:both; }

/* 関連 */
.related-posts, .related-entries, .section-related { clear:both; box-sizing:border-box; max-width:100%; margin:2rem 0 0; }
.related-posts .items, .related-entries .items, .related-posts ul, .related-entries ul {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px;
}
.related-posts img, .related-entries img { display:block; max-width:100%; height:auto; border-radius:6px; }
.related-posts .entry-title, .related-posts .related-entry-title, .related-posts a.entry-title,
.related-entries .entry-title, .related-entries .post-title, .related-entries a.entry-title {
  margin-top:.5rem; line-height:1.5;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; max-height:calc(1.5em*2);
  word-break:break-word; overflow-wrap:anywhere;
}

/* DXD digest（本文内） */
.dxd-digest { list-style:none; padding:0; margin:0; }
.dxd-digest .dxd-item { border:1px solid var(--border); border-radius:10px; padding:12px; margin:12px 0; background:var(--card); }
.dxd-digest .twitter-tweet { margin-left:auto; margin-right:auto; }
.dxd-digest .dxd-photo { margin-top:8px; }
.dxd-digest img { max-width:100%; height:auto; display:block; }
.dxd-digest .dxd-meta--bottom { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; display: block; }
.dxd-digest .dxd-meta--right { display:flex; justify-content:flex-end; }
.dxd-digest .dxd-meta--bottom a { text-decoration:none; opacity:.9; }
.dxd-digest .dxd-meta--bottom a:hover { text-decoration:underline; opacity:1; }

/* 本文中：Twitter embed を含む li のみカード風に（スコープ限定）
   旧：全 ul li に一括適用 → 副作用大のため限定版に変更 */
.entry-content ul > li:has(.twitter-tweet),
.entry-content ul.wp-block-list > li:has(.twitter-tweet),
.entry-content ul > li:has(.tx-tweet-wrap) {
  list-style: none;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
}
.entry-content ul > li:has(.twitter-tweet) img,
.entry-content ul > li:has(.tx-tweet-wrap) img { max-width: 100%; height: auto; display: block; }

/* DXDメディア：画像幅制限（追加CSSの意図） */
.entry-content .dxd-media img {
  max-width: 400px !important;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* DXDカード（追加CSSの意図） */
.dxd-heading {
  padding: 8px 12px;
  margin: 12px 0 20px;
  border-left: 4px solid #0073aa;
  background: #f9f9f9;
  font-weight: bold;
}
.dxd-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px;
  margin: 16px 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.dxd-card > div:first-child { line-height: 1.7; font-size: 15px; margin-bottom: 8px; }
.dxd-media { margin-top: 8px; }
.dxd-media img { width: 100%; height: auto; border-radius: 8px; margin-top: 6px; }

/* DXDメタ（時刻を常に右寄せ） */
.entry-content .dxd-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  /* 必要なら：justify-content: normal !important; */
}
.entry-content .dxd-meta .dxd-time {
  margin-left: auto !important;
  text-align: right;
  white-space: nowrap;
  opacity: .85;
  font-size: 14px; /* ← 追加 */
}

.entry-content .dxd-meta .dxd-link {
  font-size: 14px;
}


/* 境界線の削除（パンくず/フッター周り） */
.site-header,
.site-footer,
footer,
.container nav.breadcrumb,
nav[aria-label="breadcrumb"],
.breadcrumb,
.breadcrumb-list,
.breadcrumbs,
.breadcrumb-trail {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 免責文（コピーライトと同じ左寄せ／上ボーダーなし） */
.site-disclaimer {
  font-size: 12px;
  color: #666;
  text-align: left;
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
  line-height: 1.6;
}

/* =========================
   ページネーション（横一列・1つだけ表示）
   ========================= */
.pagination { display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; margin:24px 0; }
.pagination ul.page-numbers{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap; /* 折り返さない */
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination ul.page-numbers > li{ display: inline-flex; list-style: none; white-space: nowrap; }
.pagination ul.page-numbers > li .page-numbers{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.pagination ul.page-numbers > li .page-numbers.current{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pagination ul.page-numbers > li .page-numbers.dots{ border: none; background: transparent; padding: 0 6px; }

/* SP/PC切替：常にどちらか一方だけ */
.pagination--desktop { display: block; }
.pagination--mobile  { display: none; }
@media (max-width: 768px) {
  .pagination--desktop { display: none; }
  .pagination--mobile  { display: block; }
}

/* 画像のはみ出し防止（本文内の直リンク画像も含めて列幅に収める） */
.col-main .entry .entry-content img,
.col-main .entry .entry-content figure,
.col-main .entry .entry-content .wp-block-image img {
  max-width: 100% !important; /* 列幅を超えない */
  height: auto;
  width: auto;                 /* HTMLの width 属性を打ち消す */
  display: block;
  margin-left: auto;
  margin-right: auto;          /* 中央寄せ */
}

/* 画像を包むアンカーの挙動を安定化（:has 未対応ブラウザでもOK） */
.col-main .entry .entry-content a img {
  display: block;
}

/* 不要な横スクロールを抑止（万一のオーバーフロー対策） */
.col-main .entry {
  overflow-x: hidden;
}

/* コメント欄を投稿カードと同じスタイルに統一 */
#comments {
  background: var(--card, #fff);
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 10px;
  padding: 20px;
  margin-top: 24px;
}

/* コメント見出し */
#comments h2, #comments h3, #reply-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--fg, #0b2545);
  border-bottom: 1px solid var(--border, #dbe7f3);
  padding-bottom: 4px;
}

/* コメントリスト */
#comments .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#comments .comment-list > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
#comments .comment-list > li:last-child {
  border-bottom: none;
}

/* 子コメント（返信） */
#comments .children {
  list-style: none;
  margin: 8px 0 0 16px;
  padding: 0;
}
#comments .children > li {
  border-left: 2px solid var(--border, #dbe7f3);
  margin-top: 10px;
  padding-left: 10px;
}

/* コメント本文とメタ情報 */
#comments .comment-content {
  line-height: 1.8;
}
#comments .comment-meta {
  font-size: 12px;
  color: var(--muted, #5b7a99);
  margin-bottom: 6px;
}

/* コメント投稿フォーム */
#respond, .comment-respond {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}
#comments form {
  display: grid;
  gap: 12px;
}
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  width: 100%;
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  background: #fff;
}
#comments input[type="submit"] {
  justify-self: end;
  background: var(--accent, #0ea5e9);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
#comments input[type="submit"]:hover {
  background: var(--accent-2, #06b6d4);
}

/* アバター画像 */
#comments .avatar {
  border-radius: 50%;
}

/* コメントフォーム上の横線を消して一体化 */
#comments #respond,
#comments .comment-respond {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 12px; /* 見出しとの距離だけ確保 */
}

/* 念のため hr を非表示（プラグインが差し込む場合） */
#comments hr { display: none; }

/* コメントフォームの各項目の間隔を少し狭くする */
#comments form {
  display: grid;
  gap: 6px; /* ← 以前は12px。6〜8pxがちょうど良い */
}

/* 各フィールドの上下マージンを詰める */
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  margin: 2px 0; /* フィールド間の余白を縮小 */
  padding: 2px 2px; /* 内側の余白も少し軽く */
  font-size: 14px;
}

/* 見出しとフォームの距離も少し詰める */
#comments #respond,
#comments .comment-respond {
  margin-top: 5px;  /* 20px → 8px */
  padding-top: 5px; /* 16px → 8px */
}

/* コメントフォームの全体をさらに詰める */
#comments form {
  display: grid;
  gap: 4px !important; /* ← 各フィールド間をより狭く */
}

/* 入力欄の上下余白を最小限に */
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  margin: 0 !important;       /* 上下の余白なし */
  padding: 4px 6px !important; /* 内側の余白を最小限に（可読性確保） */
  font-size: 14px;
  line-height: 1.4;           /* 行間も少し詰める */
}

/* ラベルと説明文の間隔を調整 */
#comments label,
#comments p {
  margin: 2px 0 !important;  /* ラベル・説明文の上下を詰める */
  line-height: 1.4;
}

/* CAPTCHA などのブロックも詰めて一体感を出す */
#comments .form-field,
#comments .comment-form-captcha {
  margin: 2px 0 !important;
  padding: 0 !important;
}

/* コメント送信ボタン周りの余白も最小化 */
#comments input[type="submit"] {
  margin-top: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px;
  border-radius: 6px;
}


/* =========================
   DXD X Digest：引用（Embed）重複URL対策（強化版）
   - blockquote 内のURL文字列/リンクを確実に非表示
   ========================= */
.dxd-quote blockquote.twitter-tweet a,
.dxd-quote blockquote.twitter-tweet p{
  display: none !important;
}

.dxd-quote{ margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background: var(--bg); }
.dxd-quote-link{ font-size:13px; color: var(--muted); line-height:1.4; margin:0; overflow-wrap:anywhere; }
.dxd-quote-link a{ text-decoration: underline; text-underline-offset: 2px; }

/* DXD X Digest：引用元URL 下の余白を詰める */
.dxd-quote-link {
  margin-bottom: 4px !important; /* デフォルト6〜8pxを詰める */
}

/* blockquote が持つデフォルト余白をリセット */
.dxd-quote blockquote.twitter-tweet {
  margin: 0 !important;
  padding: 0 !important;
}

.dxd-quote {
  padding-bottom: 6px; /* 10px → 6px 相当 */
}

/* =========================
   ヘッダー改修
   ========================= */

/* 既存の padding を上書き */
.site-header {
  padding: 0;
  background: var(--card, #fff);
}

/* ブランディングエリア */
.site-header__top {
  padding: 22px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* カスタムロゴをコンパクトに：プラグインの !important より詳細度を上げて上書き */
.site-header .site-branding .custom-logo-link .custom-logo,
.site-header .site-branding a.custom-logo-link img.custom-logo {
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  display: block;
}

/* テキストタイトル（カスタムロゴなし時） */
.site-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.site-title a {
  color: var(--fg, #0b2545);
  text-decoration: none;
}
.site-title a:hover {
  color: #2f6f95;
  text-decoration: none;
}

/* サイト説明文（カスタムロゴ時も表示） */
.site-description {
  font-size: 13px;
  color: var(--muted, #5b7a99);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ナビバー */
.site-nav-bar {
  border-top: 1px solid var(--border, #cfe0eb);
  border-bottom: 2px solid var(--accent, #2f6f95);
  background: var(--card, #fff);
}
.site-nav-bar__inner {
  display: flex;
  align-items: stretch;
  min-height: 40px;
}

/* ナビメニュー（ul / li / a） */
.primary-nav { flex: 1; }
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu > li { display: flex; list-style: none; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  color: var(--fg, #0b2545);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-page-ancestor > a {
  color: #2f6f95;
  background: #eaf3f8;
  text-decoration: none;
}

/* 検索ボタン（虫眼鏡アイコン） */
.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--border, #dbe7f3);
  cursor: pointer;
  color: var(--muted, #5b7a99);
  transition: color 0.15s, background 0.15s;
}
.nav-search-btn:hover,
.nav-search-btn[aria-expanded="true"] {
  color: #2f6f95;
  background: #eaf3f8;
}

/* 検索フォーム（ドロップダウン） */
.header-search {
  border-top: 1px solid var(--border, #dbe7f3);
  padding: 10px 0;
  background: #f7fafc;
}
.header-search .search-form {
  display: flex;
  gap: 6px;
  max-width: 480px;
}
.header-search .search-field {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  outline: none;
}
.header-search .search-field:focus {
  border-color: #2f6f95;
  box-shadow: 0 0 0 2px rgba(47, 111, 149, 0.15);
}
.header-search .search-submit {
  padding: 6px 14px;
  background: #2f6f95;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.header-search .search-submit:hover {
  background: #1f5876;
}

/* ハンバーガーボタン（モバイルのみ表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  border-right: 1px solid var(--border, #dbe7f3);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--fg, #0b2545);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* スマホ（≤768px）：縦積みナビ */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .site-nav-bar__inner { flex-wrap: wrap; }
  .primary-nav {
    display: none;
    width: 100%;
    order: 10;
    border-top: 1px solid var(--border, #dbe7f3);
  }
  .primary-nav.is-open { display: block; }
  .nav-menu { flex-direction: column; }
  .nav-menu > li > a {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border, #dbe7f3);
  }
  .nav-menu > li:last-child > a { border-bottom: none; }
  .nav-search-btn { margin-left: auto; }
  .site-header__top { padding: 10px 0 8px; }
}

/* =========================
   記事カード（一覧）
   ========================= */

/* カードベース：.entry の padding を上書き、flex 横並び
   ※ .col-main 限定だと .hp-posts 内のカードに当たらないため article に変更 */
article.entry.entry-card {
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border, #d8eaf3);
  background: var(--card, #fff);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 45, 65, 0.09);
  transition: box-shadow 0.2s;
}
article.entry.entry-card:hover {
  box-shadow: 0 4px 18px rgba(15, 45, 65, 0.15);
  transform: translateY(-1px);
  transition: box-shadow 0.2s, transform 0.2s;
}

/* サムネイル：カード高さに追従する % 指定でマガジン感を出す */
.entry-card__thumb {
  flex-shrink: 0;
  width: 34%;
  align-self: stretch;
  display: block;
  overflow: hidden;
  background: var(--border, #d8eaf3);
  max-height: 230px;
}
.entry-card__thumb img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.24s ease;
}
.entry-card__thumb:hover img {
  transform: scale(1.04);
}

/* 本文エリア */
.entry-card__body {
  flex: 1;
  padding: 12px 18px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
}

/* メタ（日付・カテゴリ） */
.entry-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 12px;
  color: #537085;
  line-height: 1.4;
  margin: 0;
}
.entry-card__date { white-space: nowrap; }
.entry-card__cats a {
  color: #2f6f95;
  text-decoration: none;
}
.entry-card__cats a:hover {
  color: #1f5876;
  text-decoration: underline;
}

/* タイトル（2行クリップ継承・サイズ強化）
   h2 を加えて詳細度 0,2,1 にし body:not(.single) .entry-title (0,2,1) に後勝ち */
.entry-card__body h2.entry-title {
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  max-height: calc(1.4em * 2);
  margin: 0;
}
.entry-card__body .entry-title a {
  color: var(--fg, #1a3548);
  text-decoration: none;
}
.entry-card__body .entry-title a:hover {
  color: var(--accent, #2f6f95);
}

/* 抜粋テキスト */
.entry-card__body .excerpt-3 {
  font-size: 13px;
  line-height: 1.7;
  color: #4a6578;
  margin: 0;
}

/* カード内抜粋：通常は2行に抑えて情報量を削減（DXD/Tweet/メディアは解除済み） */
.entry-card__body .excerpt-3:not(.excerpt-tweet-visible):not(.excerpt-dxd-visible):not(.excerpt-media-visible) {
  -webkit-line-clamp: 2;
  max-height: calc(1.7em * 2);
}

/* 続きを読むリンク：カード密度を下げるため非表示（タイトル・画像リンクで代替） */
.entry-card__more {
  display: none;
}

/* アーカイブ・検索ページの見出し */
.archive-header {
  padding: 10px 0 16px;
}
.archive-header__type {
  margin-bottom: 4px;
}
.archive-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2f6f95;
  background: #eaf3f8;
  border: 1px solid #c5daea;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.6;
}
.archive-title {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  color: var(--fg, #0b2545);
  border-left: 3px solid #2f6f95;
  padding-left: 10px;
  margin: 0;
  line-height: 1.3;
}
.archive-header__desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #5b7a99);
  line-height: 1.6;
}

/* 検索ページ：再検索フォーム */
.search-again {
  margin-bottom: 20px;
}
.search-again .search-form {
  display: flex;
  gap: 6px;
  max-width: 480px;
}
.search-again .search-field {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  outline: none;
}
.search-again .search-field:focus {
  border-color: #2f6f95;
  box-shadow: 0 0 0 2px rgba(47, 111, 149, 0.15);
}
.search-again .search-submit {
  padding: 8px 16px;
  background: #2f6f95;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.search-again .search-submit:hover {
  background: #1f5876;
}

/* 記事なし */
.no-posts {
  padding: 24px 0;
  color: var(--muted, #5b7a99);
}

/* スマホ（≤768px）：縦積みカード
   desktop が article.entry.entry-card (0,2,1) のため同詳細度で上書き */
@media (max-width: 768px) {
  article.entry.entry-card {
    flex-direction: column;
  }
  .entry-card__thumb {
    width: 100%;
  }
  .entry-card__thumb img {
    width: 100%;
    height: 180px;
  }
  .entry-card__body {
    padding: 14px 16px;
  }
}

/* =========================
   個別記事ページ (single)
   ========================= */

/* 1カラム・中央寄せ（サイドバーなし） */
.single-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 16px;
}

/* 記事コンテナからカードスタイルをリセット */
.single .entry {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: visible;
}

/* タイトル：3行クリップを解除してフルに表示
   .single .entry .entry-title (0,3,0) に詳細度を合わせて上書き */
.single .entry .entry-title {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  max-height: none;
  font-size: clamp(21px, 3.2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg, #0b2545);
  margin: 14px 0 8px;
  text-decoration: none;
}

/* メタ情報（日付・時刻・カテゴリ） */
.entry-meta--single {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 13px;
  color: var(--muted, #5b7a99);
  margin-bottom: 28px;
  text-align: left;
}
.entry-meta--single a {
  color: #2f6f95;
  text-decoration: none;
}
.entry-meta--single a:hover {
  text-decoration: underline;
}
.entry-meta__sep { opacity: 0.4; }

/* =========================
   本文タイポグラフィ
   ========================= */
.single .entry-content {
  font-size: 17px;
  line-height: 1.85;
  color: #333;
  overflow-wrap: break-word;
  word-break: break-word;
}

.single .entry-content p {
  margin: 0 0 1.3em;
}

/* 見出し h2：ボーダー付き */
.single .entry-content h2 {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  margin: 2.2em 0 0.7em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border, #dbe7f3);
  color: var(--fg, #0b2545);
}

/* 見出し h3：左ライン */
.single .entry-content h3 {
  font-size: clamp(16px, 1.9vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  margin: 1.8em 0 0.5em;
  padding-left: 10px;
  border-left: 3px solid #2f6f95;
  color: var(--fg, #0b2545);
}

.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 1.5em 0 0.5em;
  color: var(--fg, #0b2545);
}

/* リンク */
.single .entry-content a {
  color: #2f6f95;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single .entry-content a:hover {
  color: #1f5876;
}

/* 引用 */
.single .entry-content blockquote:not(.twitter-tweet) {
  margin: 1.5em 0;
  padding: 0.8em 1.2em;
  border-left: 3px solid #2f6f95;
  background: #f0f6fb;
  border-radius: 0 6px 6px 0;
  font-size: 0.95em;
  color: #444;
}
.single .entry-content blockquote:not(.twitter-tweet) p:last-child {
  margin-bottom: 0;
}

/* インラインコード */
.single .entry-content code {
  font-size: 0.875em;
  background: #edf3f7;
  padding: 0.15em 0.45em;
  border-radius: 3px;
  word-break: break-all;
}

/* コードブロック */
.single .entry-content pre {
  background: #1e2a36;
  color: #cdd7e0;
  padding: 1.2em 1.4em;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.875em;
  line-height: 1.65;
  margin: 1.5em 0;
}
.single .entry-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* テーブル */
.single .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 1.5em 0;
}
.single .entry-content th,
.single .entry-content td {
  padding: 8px 12px;
  border: 1px solid var(--border, #dbe7f3);
  vertical-align: top;
}
.single .entry-content th {
  background: #eaf3f8;
  font-weight: 600;
  text-align: left;
}
.single .entry-content tr:nth-child(even) td {
  background: #f7fafc;
}
/* テーブルの横スクロール対応 */
.single .entry-content .wp-block-table,
.single .entry-content figure.wp-block-table {
  overflow-x: auto;
}

/* HR */
.single .entry-content hr {
  border: none;
  border-top: 1px solid var(--border, #dbe7f3);
  margin: 2.5em 0;
}

/* =========================
   前後記事ナビゲーション
   ========================= */
.post-nav {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #dbe7f3);
}
.post-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.post-nav .nav-previous { text-align: left; }
.post-nav .nav-next     { text-align: right; }
.post-nav .nav-previous a,
.post-nav .nav-next a {
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
  color: var(--fg, #0b2545);
}
.post-nav__label {
  display: block;
  font-size: 12px;
  color: var(--muted, #5b7a99);
  margin-bottom: 4px;
}
.post-nav__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: #2f6f95;
  word-break: break-word;
}
.post-nav a:hover .post-nav__title {
  color: #1f5876;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .post-nav .nav-links {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .post-nav .nav-next { text-align: left; }
}

/* =========================
   DXD 日次ツイート記事（表示改修）
   対象クラス: .dxd-card / .dxd-text / .dxd-reply-meta /
               .dxd-media / .dxd-media-item /
               .dxd-meta / .dxd-link / .dxd-time /
               .dxd-quote / .dxd-quote-link / .dxd-heading
   ========================= */

/* ---- カード本体 ---- */
/* 既存 .dxd-card (0,1,0) を上書き：テーマ変数に統一、shadow 削除 */
.dxd-card {
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin: 14px 0;
  background: var(--card, #fff);
  box-shadow: none;       /* 既存 0 2px 6px を除去 */
  overflow: hidden;       /* 横スクロール防止 */
}

/* ---- ツイート本文 ---- */
/* 既存 .dxd-card > div:first-child (0,1,1) より高い詳細度 (0,2,0) */
.dxd-card .dxd-text {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--fg, #222);
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 0;
}

/* ---- 返信先インジケーター ---- */
/* 既存スタイルなし → 新規追加 */
.dxd-reply-meta {
  font-size: 12px;
  color: var(--muted, #5b7a99);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #eaf3f8;
  border-radius: 4px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.dxd-reply-meta a {
  color: #2f6f95;
  text-decoration: none;
  word-break: break-all;
}
.dxd-reply-meta a:hover { text-decoration: underline; }

/* ---- メディアエリア ---- */
/* 既存 .dxd-media (0,1,0) を上書き */
.dxd-card .dxd-media {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 0;
}

/* 1枚のみ：自然なアスペクト比で最大 400px、中央寄せ */
.dxd-card .dxd-media-item {
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
}
/* 既存 .entry-content .dxd-media img { max-width:400px !important } (0,2,1)
   を同詳細度 + 後続記述で上書き */
.dxd-card .dxd-media .dxd-media-item img {
  width: 100%;
  height: auto;
  max-width: min(400px, 100%) !important;   /* 400px 制限はそのまま、100% 超えを防ぐ */
  display: block;
  border-radius: 6px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

/* 2枚以上：均一グリッド（:has が使えるブラウザ向け） */
.dxd-card .dxd-media:has(.dxd-media-item ~ .dxd-media-item) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.dxd-card .dxd-media:has(.dxd-media-item ~ .dxd-media-item) .dxd-media-item {
  flex: none; /* flex 指定を解除してグリッドに従わせる */
}
.dxd-card .dxd-media:has(.dxd-media-item ~ .dxd-media-item) .dxd-media-item img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  max-width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}

/* ---- メタ行（Xで見る + 時刻）---- */
/* 既存 .entry-content .dxd-meta (0,2,0) と同詳細度、後続記述で上書き */
.dxd-card .dxd-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #dbe7f3); /* 区切り線追加 */
}

/* 「Xで見る」リンク */
/* 既存 .entry-content .dxd-meta .dxd-link (0,3,0) と同詳細度、後続上書き */
.dxd-card .dxd-meta .dxd-link {
  font-size: 12px;
  color: #2f6f95;
  text-decoration: none;
  opacity: 0.85;
}
.dxd-card .dxd-meta .dxd-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* 時刻表示（控えめに） */
/* 既存 .entry-content .dxd-meta .dxd-time (0,3,0) と同詳細度、後続上書き */
.dxd-card .dxd-meta .dxd-time {
  font-size: 11px;
  color: var(--muted, #5b7a99);
  opacity: 0.6;
  /* margin-left: auto !important は既存ルールで維持（右寄せは保持）*/
}

/* ---- 引用ツイートエリア ---- */
/* 既存 .dxd-quote (0,1,0) より高い詳細度 (0,2,0) で上書き */
.dxd-card .dxd-quote {
  margin-top: 10px;
  padding: 8px 12px 6px;
  border: 1px solid var(--border, #dbe7f3);
  border-radius: 8px;
  background: var(--bg, #f7fafc);
  padding-bottom: 6px; /* 既存の重複定義を統合 */
}

/* 引用元 URL 行 */
/* 既存 .dxd-quote-link (0,1,0) より高い詳細度 (0,2,0) */
.dxd-card .dxd-quote-link {
  font-size: 12px;
  color: var(--muted, #5b7a99);
  line-height: 1.4;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.dxd-card .dxd-quote-link a {
  color: #2f6f95;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- セクション見出し ---- */
/* 既存 .dxd-heading (0,1,0) と同詳細度、後続上書き */
.dxd-heading {
  border-left-color: #2f6f95; /* 既存 #0073aa → coastal blue */
  background: #eaf3f8;        /* 既存 #f9f9f9 → テーマ淡色 */
  color: var(--fg, #0b2545);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- 旧形式（.dxd-digest）---- */
/* 既存スタイルはそのまま維持。テーマ変数との乖離だけ修正 */
.dxd-digest .dxd-item {
  border-color: var(--border, #dbe7f3);
}

/* ---- single ページの Twitter embed overflow 対策 ---- */
.single .entry-content .twitter-tweet iframe {
  max-width: 100% !important;
}

/* ---- スマホ：横スクロール防止と余白調整 ---- */
@media (max-width: 768px) {
  .dxd-card {
    padding: 12px 12px 8px;
    overflow-x: hidden;
  }
  /* 2枚以上のグリッドをモバイルでも維持 */
  .dxd-card .dxd-media:has(.dxd-media-item ~ .dxd-media-item) {
    grid-template-columns: repeat(2, 1fr);
  }
  .dxd-card .dxd-media:has(.dxd-media-item ~ .dxd-media-item) .dxd-media-item img {
    height: 110px;
  }
}

/* =========================
   サイトバッジ（ヘッダー "blog" ラベル）
   ========================= */
.site-kicker {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #2f6f95);
  margin-bottom: 2px;
  line-height: 1;
}

/* =========================
   ナビバーのソーシャルアイコン（X・RSS）
   ========================= */
.nav-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  border-left: 1px solid var(--border, #cfe0eb);
  color: var(--muted, #6b8aa4);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nav-icon-link:hover {
  color: var(--accent, #2f6f95);
  background: #eaf3f8;
  text-decoration: none;
}
.nav-icon-link svg {
  display: block;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  /* スマホではソーシャルアイコンを縮小 */
  .nav-icon-link {
    width: 36px;
  }
}

/* =========================
   スマホ最適化
   390px / 430px / 768px 対応
   ========================= */

/* ---- 1. 横スクロール完全禁止 ---- */
html {
  overflow-x: hidden;
  scroll-behavior: smooth; /* ページ内アンカー（back-to-top）のスムーズスクロール */
}
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* メディア要素が列幅を超えないグローバルガード */
img, video, iframe, embed, object {
  max-width: 100%;
}

/* Twitter embed の強制収め（blockquote 段階）*/
blockquote.twitter-tweet {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* pre / table の横スクロールを body に伝播させない */
pre {
  max-width: 100%;
  overflow-x: auto;
}
.single .entry-content table,
.entry-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* ---- 2. ヘッダー：サイズ・余白 ---- */
@media (max-width: 768px) {
  /* ロゴが横幅を圧迫しないよう上限を設ける */
  .site-branding .custom-logo-link,
  .site-branding .custom-logo {
    max-width: 260px;
  }

  /* テキストタイトル（カスタムロゴなし時）*/
  .site-title {
    font-size: 18px;
  }
  .site-description {
    font-size: 12px;
  }

  /* ヘッダートップ余白を詰める */
  .site-header__top {
    padding: 8px 0 6px;
  }
}

/* ---- 3. ナビバー：タップ領域を 44px 以上に ---- */
@media (max-width: 768px) {
  /* ナビバーの高さ */
  .site-nav-bar__inner {
    min-height: 44px;
  }

  /* ハンバーガー・検索ボタン */
  .nav-toggle,
  .nav-search-btn {
    min-height: 44px;
    height: 44px;
  }

  /* ドロップダウン展開時のナビ項目 */
  .nav-menu > li > a {
    padding-top: 13px;
    padding-bottom: 13px;
    min-height: 44px;
  }
}

/* ---- 4. ヘッダー内検索フォーム ---- */
@media (max-width: 768px) {
  .header-search .search-form {
    max-width: 100%;
  }
  /* iOS 自動ズーム防止（font-size < 16px でズーム発動）*/
  .header-search .search-field {
    font-size: 16px;
  }
}

/* ---- 5. ページネーション：タップ領域 44px ---- */
@media (max-width: 768px) {
  .pagination ul.page-numbers {
    gap: 4px;
    flex-wrap: wrap;
  }
  .pagination ul.page-numbers > li .page-numbers {
    padding: 10px 12px;
    min-height: 44px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
}

/* ---- 6. 記事カード：サムネイル・テキスト ---- */
@media (max-width: 430px) {
  .entry-card__thumb img {
    height: 170px;
  }

  .entry-card__body {
    padding: 12px 14px;
    gap: 5px;
  }

  /* タイトルフォントを少し詰める */
  .entry-card__body .entry-title {
    font-size: 15px;
  }

  /* 抜粋を 2行に抑えてカード密度を適正に */
  .entry-card__body .excerpt-3:not(.excerpt-tweet-visible):not(.excerpt-dxd-visible):not(.excerpt-media-visible) {
    -webkit-line-clamp: 2;
    max-height: calc(1.75em * 2);
  }

  /* カード間余白をやや詰める */
  article.entry.entry-card {
    margin-bottom: 14px;
  }
}

/* ---- 7. 個別記事：フォント・行間 ---- */
@media (max-width: 430px) {
  .single .entry-content {
    font-size: 16px;
    line-height: 1.85;
  }

  /* padding が狭い分コメント欄の余白も詰める */
  #comments {
    padding: 14px;
  }
}

/* ---- 8. コメントフォーム：iOS ズーム防止・タップ領域 ---- */
@media (max-width: 768px) {
  #comments input[type="text"],
  #comments input[type="email"],
  #comments input[type="url"],
  #comments textarea {
    font-size: 16px !important; /* iOS 自動ズーム防止 */
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }

  #comments input[type="submit"] {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 14px;
    width: auto;
  }
}

/* ---- 9. DXDカード：narrow 対応 ---- */
@media (max-width: 430px) {
  /* メタ行（Xで見る＋時刻）を折り返し可に */
  .dxd-card .dxd-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  /* カード余白を少し詰める */
  .dxd-card {
    padding: 10px 10px 8px;
  }

  /* 引用ブロックの余白 */
  .dxd-card .dxd-quote {
    padding: 6px 8px 4px;
  }
}

/* ---- 10. 検索ページ：再検索フォーム ---- */
@media (max-width: 430px) {
  .search-again .search-form {
    flex-wrap: wrap;
  }
  .search-again .search-field {
    font-size: 16px; /* iOS 自動ズーム防止 */
    width: 100%;
    flex: none;
  }
  .search-again .search-submit {
    min-height: 44px;
  }
}

/* ---- 11. フッター検索フォーム：縦積み ---- */
@media (max-width: 430px) {
  .footer-search .search-form {
    flex-direction: column;
    gap: 8px;
  }
  .footer-search .search-field {
    font-size: 16px; /* iOS 自動ズーム防止 */
    width: 100%;
  }
  .footer-search .search-submit {
    align-self: flex-start;
    min-height: 44px;
  }
}

/* ---- 12. フッタープレフッター：narrow 余白 ---- */
@media (max-width: 430px) {
  .footer-prefooter {
    padding: 24px 0 20px;
  }
  .footer-bottom {
    padding: 10px 0;
  }
  .footer-bottom .site-disclaimer {
    font-size: 11px;
  }
  .footer-copyright {
    font-size: 11px;
  }
}

/* ---- 13. アーカイブ・カテゴリ見出し ---- */
@media (max-width: 430px) {
  .archive-title {
    font-size: 15px;
  }
  .archive-header {
    padding: 8px 0 12px;
  }
}

/* ---- 14. ウィジェット：narrow（透明スタイルに合わせて上padding のみ） ---- */
@media (max-width: 430px) {
  .widget {
    padding: 12px 0 0;   /* 横パディングなし・上のみ縮小 */
    margin-bottom: 20px;
  }
  .widget h3 {
    font-size: 10px; /* 既存の大文字ラベルサイズを維持 */
  }
}

/* ---- 15. グリッドのサイドバー間隔：768px 境界 ---- */
@media (max-width: 1024px) {
  /* 1カラム時のサイドバー上部余白 */
  .col-left,
  .col-right {
    margin-top: 0;
  }
  /* 1カラム化後は gap・padding-top を縮小 */
  .grid-3 {
    gap: 16px;
    padding-top: 12px;
  }
}

/* =========================
   フッター（プレフッター + ボトムバー）
   ========================= */

/* site-footer 本体は border:none !important で固定済みのため
   余白のみ担当させる */
.site-footer {
  margin-top: 48px;
}

/* ---- プレフッター：ダークブルー3カラム ---- */
.footer-prefooter {
  background: #0f2d45;
  border-top: 3px solid #2f6f95; /* .site-footer 外の要素なので !important 干渉なし */
  padding: 36px 0 28px;
  color: #cde0ee;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
}

/* ---- カラム見出し ---- */
.footer-col__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5dd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 8px;
  margin: 0 0 12px;
}

/* ---- リスト共通（年別・カテゴリ・フッターNav） ---- */
.footer-archive-list,
.footer-cat-list,
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-archive-list li,
.footer-cat-list li,
.footer-nav-list li {
  margin: 0;
  padding: 0;
}

.footer-archive-list a,
.footer-cat-list a,
.footer-nav-list a {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #cde0ee;
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.15s;
}

.footer-archive-list a:hover,
.footer-cat-list a:hover,
.footer-nav-list a:hover {
  color: #fff;
  text-decoration: none;
}

/* wp_list_categories が出力する .children（サブカテゴリ）は非表示 */
.footer-cat-list .children {
  display: none;
}

/* ---- フッター内検索フォーム ---- */
.footer-search {
  margin-bottom: 14px;
}

.footer-search .search-form {
  display: flex;
  gap: 6px;
}

.footer-search .search-field {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8f2f9;
  font-size: 13px;
  outline: none;
}

.footer-search .search-field::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.footer-search .search-field:focus {
  border-color: #93c5dd;
  background: rgba(255, 255, 255, 0.13);
}

.footer-search .search-submit {
  flex-shrink: 0;
  padding: 7px 14px;
  background: #2f6f95;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.footer-search .search-submit:hover {
  background: #3d87b0;
}

/* ---- ボトムバー ---- */
.footer-bottom {
  background: #082030;
  padding: 12px 0;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ボトムバー内では既存 .site-disclaimer の color:#666 を上書き */
.footer-bottom .site-disclaimer {
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  padding-top: 0;
  font-size: 12px;
  line-height: 1.6;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  margin: 0;
}

/* ---- スマホ（≤768px）：縦積み ---- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* =========================
   ホームページ専用
   home.php / front-page.php
   ========================= */

/* ---- 記事一覧エリア：1カラム中央寄せ ---- */
.hp-posts-wrap {
  padding: 36px 0 44px;
}

.hp-posts {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- もっと見るボタン ---- */
.hp-more {
  text-align: center;
  margin-top: 24px;
}

.hp-more a {
  display: inline-block;
  padding: 10px 36px;
  border: 1px solid var(--accent, #2f6f95);
  border-radius: 4px;
  color: var(--accent, #2f6f95);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.hp-more a:hover {
  background: var(--accent, #2f6f95);
  color: #fff;
  text-decoration: none;
}

/* ---- カテゴリから読む ---- */
.hp-categories {
  background: var(--card, #fff);
  border-top: 1px solid var(--border, #d8eaf3);
  padding: 40px 0 44px;
}

.hp-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6b8aa4);
  text-align: center;
  margin: 0 0 24px;
}

.hp-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 8px;
}

.hp-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 18px;
  width: 116px;
  text-decoration: none;
  color: var(--fg, #1a3548);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.hp-cat-item:hover {
  background: var(--bg, #f0f6fa);
  border-color: var(--border, #d8eaf3);
  text-decoration: none;
  color: var(--fg, #1a3548);
}

.hp-cat-icon {
  display: block;
  color: var(--accent, #2f6f95);
}
.hp-cat-icon svg {
  width: 28px;
  height: 28px;
}

.hp-cat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  color: var(--fg, #1a3548);
}

/* ---- 下部導線エリア（4ブロック）---- */
.hp-blocks {
  background: var(--bg, #f0f6fa);
  border-top: 1px solid var(--border, #d8eaf3);
  padding: 40px 0 48px;
}

.hp-blocks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 28px;
  max-width: 840px;
  margin: 0 auto;
}

.hp-block h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6b8aa4);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #d8eaf3);
}

.hp-block-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.hp-block-list li {
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 1.4;
}

.hp-block-list a {
  color: var(--fg, #1a3548);
  text-decoration: none;
}

.hp-block-list a:hover {
  color: var(--accent, #2f6f95);
}

/* 共通ボタン */
.hp-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 22px;
  background: var(--accent, #2f6f95);
  color: #fff;
  font-size: 13px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}

.hp-btn:hover {
  background: var(--accent-2, #1f5876);
  color: #fff;
  text-decoration: none;
}

/* テキストリンク */
.hp-block-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent, #2f6f95);
  text-decoration: none;
}

.hp-block-link:hover {
  text-decoration: underline;
}

.hp-block-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg, #1a3548);
  margin: 0;
}

/* アーカイブブロック */
.hp-archive-lead {
  font-size: 11px;
  color: var(--muted, #6b8aa4);
  margin: 0 0 8px;
}

.hp-archive-yr {
  border-bottom: 1px solid var(--border, #d8eaf3);
}

.hp-archive-yr summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #1a3548);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  -webkit-user-select: none;
  user-select: none;
}

.hp-archive-yr summary::-webkit-details-marker,
.hp-archive-yr summary::marker {
  display: none;
}

.hp-archive-yr summary::before {
  content: '▶';
  font-size: 8px;
  color: var(--muted, #6b8aa4);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.hp-archive-yr[open] > summary::before {
  transform: rotate(90deg);
}

.hp-archive-mo {
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 4px 18px;
}

.hp-archive-mo li {
  padding: 2px 0;
}

.hp-archive-mo a {
  font-size: 12px;
  color: var(--muted, #6b8aa4);
  text-decoration: none;
}

.hp-archive-mo a:hover {
  color: var(--accent, #2f6f95);
}

.hp-archive-older {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted, #6b8aa4);
  text-decoration: none;
}

.hp-archive-older:hover {
  color: var(--accent, #2f6f95);
}

/* About me：アバター画像 */
.hp-about-avatar {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border, #d8eaf3);
  margin: 0 0 14px;
}

/* お問い合わせ：ソーシャルアイコン */
.hp-social-links {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}

.hp-social-links li {
  padding: 0;
  border: none;
}

.hp-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border, #d8eaf3);
  color: var(--muted, #6b8aa4);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.hp-social-links a:hover {
  color: var(--accent, #2f6f95);
  border-color: var(--accent, #2f6f95);
  text-decoration: none;
}

/* ---- フッター ボトムバー（3カラム：免責 中央著作権 TOPボタン）---- */
.footer-bottom__inner {
  display: grid !important;           /* 既存 flex を上書き */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.footer-bottom .site-disclaimer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
  line-height: 1.5;
  justify-self: start;
}

.footer-copyright {
  text-align: center;
  white-space: nowrap;
}

.footer-totop {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.footer-totop:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  text-decoration: none;
}

/* ---- レスポンシブ ---- */

/* タブレット〜スマホ（≤1024px）：グリッド→2カラムへ */
@media (max-width: 1024px) {
  .hp-posts {
    max-width: 100%;
  }

  .hp-blocks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
}

/* スマホ（≤768px）*/
@media (max-width: 768px) {
  .hp-blocks-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hp-cat-grid {
    gap: 6px 8px;
  }

  .hp-cat-item {
    width: 82px;
    padding: 12px 8px 10px;
  }

  .footer-bottom__inner {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
  }

  .footer-bottom .site-disclaimer {
    grid-column: 1 / 3;
    font-size: 10px;
  }

  .footer-copyright {
    text-align: left;
    grid-column: 1 / 2;
    font-size: 11px;
  }

  .footer-totop {
    grid-column: 2 / 3;
    grid-row: 2;
  }
}

/* 極小（≤480px）：カテゴリ2列 */
@media (max-width: 480px) {
  .hp-cat-item {
    width: calc(50% - 8px);
    max-width: 140px;
  }
}

/* =========================
   アーカイブ 1カラムレイアウト
   archive / category / search / index 共通
   ========================= */

.arc-wrap {
  padding: 24px 0 36px;
}

.arc-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* アーカイブヘッダーをアーカイブ内に収める */
.arc-inner .archive-header {
  margin-bottom: 20px;
}

/* ページネーションをアーカイブ幅に収める */
.arc-inner .pagination {
  margin-top: 28px;
}

/* 検索ページの再検索フォーム */
.arc-inner .search-again {
  margin-bottom: 20px;
}

/* スマホ（≤768px）*/
@media (max-width: 768px) {
  .arc-wrap {
    padding: 16px 0 24px;
  }

  .arc-inner {
    max-width: 100%;
  }
}

/* =========================
   /archives/ アーカイブ一覧ページ
   ========================= */
.pg-arc-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 0 48px;
}

.pg-arc-header {
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border, #d8eaf3);
}

.pg-arc-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg, #1a3548);
  margin: 0 0 6px;
}

.pg-arc-lead {
  font-size: 13px;
  color: var(--muted, #6b8aa4);
  margin: 0;
}

.pg-arc-year {
  margin-bottom: 22px;
}

.pg-arc-yr-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg, #1a3548);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border, #d8eaf3);
}

.pg-arc-yr-title a {
  color: inherit;
  text-decoration: none;
}

.pg-arc-yr-title a:hover {
  color: var(--accent, #2f6f95);
}

.pg-arc-mo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
}

.pg-arc-mo-list li {
  padding: 0;
  border: none;
}

.pg-arc-mo-list a {
  display: inline-block;
  padding: 4px 14px 4px 0;
  font-size: 13px;
  color: var(--muted, #6b8aa4);
  text-decoration: none;
}

.pg-arc-mo-list a:hover {
  color: var(--accent, #2f6f95);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .pg-arc-wrap {
    padding: 20px 0 36px;
  }

  .pg-arc-title {
    font-size: 19px;
  }
}