/*
Theme Name: Web Howto LAB
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: 初心者・挫折経験者・Web担当者向けのWeb制作How toテーマ
Version: 1.4.9
Text Domain: webhowto
*/

/* ============================================================
   CSS カスタムプロパティ（デザイントークン）
   ここを変更することでサイト全体の色・余白を一括調整できます
   ============================================================ */
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-muted: #f2f2f2;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-light: #999999;
  --line: #e0e0e0;
  --line-light: #ebebeb;
  --primary: #1a1a1a;
  --accent: #3e8685;        /* ロゴ・ボタンのアクセントカラー */
  --accent-hover: #326f6e;  /* ホバー時（少し暗く） */

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --container: 1400px;
  --radius: 4px;
  --radius-sm: 2px;

  --space-xs: 16px;
  --space-sm: 32px;
  --space-md: 56px;
  --space-lg: 80px;
  --space-xl: 112px;
}

/* ============================================================
   リセット・ベース
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   レイアウト基盤
   ============================================================ */

/* メインコンテナ */
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* 記事本文の幅コンテナ */
.container-narrow {
  width: min(100% - 40px, 800px);
  margin-inline: auto;
}

/* セクション余白 */
.section    { padding: var(--space-lg) 0; }
.section-sm { padding: var(--space-md) 0; }
.section-xs { padding: var(--space-sm) 0; }

/* ============================================================
   タイポグラフィ（ジャンプ率設計）
   ============================================================ */

/* ページ最上位タイトル（フロントページ h1） */
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* アーカイブ・検索ページタイトル */
.page-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* 記事タイトル（cover-title） */
.cover-title {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

/* セクション見出し */
.section-title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* リードテキスト */
.section-lead,
.page-lead,
.hero-lead {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.8;
  margin-top: 10px;
}

/* カテゴリ上のキャプション */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   ヘッダー
   ============================================================ */

/* ヘッダー全体（固定表示） */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* ヘッダー内部 */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

/* ロゴ */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: var(--radius);
}

/* グローバルナビ（PCのみ表示） */
.site-nav {
  display: flex;
  align-items: center;
  flex: 1;
}

.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
}

.site-menu > li > a {
  display: block;
  padding: 6px 11px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}

.site-menu > li > a:hover {
  color: var(--text);
  background: var(--surface-muted);
  text-decoration: none;
}

/* 現在のページのナビリンク */
.current-menu-item > a,
.current-menu-ancestor > a,
.current-cat > a,
.current_page_item > a {
  color: var(--text) !important;
  font-weight: 600;
}

/* ヘッダー右アクション群 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ヘッダー内検索フォーム（PC） */
.header-search {
  width: 220px;
}

/* ============================================================
   ハンバーガーメニュー（768px 以下で表示）
   ============================================================ */

/* ハンバーガーボタン（スマホのみ表示） */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.hamburger:hover {
  background: var(--surface-muted);
}

/* ハンバーガーの3本線 */
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}

/* × アニメーション（メニューオープン時） */
.hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルナビドロワー */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  z-index: 99;
  padding: 24px 20px 40px;
}

.mobile-nav.is-open {
  display: block;
}

/* モバイルナビのリンク（縦並びblock要素） */
.mobile-nav ul,
.mobile-nav .site-menu {
  list-style: none;
  display: block; /* flexを上書きして縦並びに */
}

.mobile-nav ul li,
.mobile-nav .site-menu li {
  display: block;
}

.mobile-nav ul li a,
.mobile-nav .site-menu li a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--line-light);
}

.mobile-nav ul li a:hover,
.mobile-nav .site-menu li a:hover {
  color: var(--text-muted);
  text-decoration: none;
}

/* モバイルナビ内の検索フォーム */
.mobile-nav .search-form {
  margin-top: 24px;
}

/* ============================================================
   検索フォーム
   ============================================================ */

/* 検索フォーム共通ラッパー */
.search-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* テキストフィールド */
.search-field {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font-base);
  outline: none;
  transition: border-color 0.15s;
}

.search-field:focus {
  border-color: var(--text);
}

/* 検索ボタン（「検索」横書き固定） */
.search-submit {
  height: 40px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer;
  white-space: nowrap;         /* 改行させない */
  writing-mode: horizontal-tb; /* 縦書き防止 */
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s;
}

.search-submit:hover { opacity: 0.75; }

/* ヒーロー内の大きめ検索フォーム */
.hero-search .search-field  { height: 48px; font-size: 0.95rem; }
.hero-search .search-submit { height: 48px; padding: 0 20px; }

/* ============================================================
   ボタン
   ============================================================ */

/* ベースボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.btn:hover { opacity: 0.75; text-decoration: none; }

/* アウトライン系ボタン */
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover { background: var(--surface-muted); opacity: 1; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

/* ============================================================
   タグ・チップ・メタ情報
   ============================================================ */

/* カテゴリタグ */
.cat-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.cat-tag:hover { background: var(--line); text-decoration: none; }

/* ナビチップ（フロントページ用） */
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.chip:hover { color: var(--text); border-color: var(--text); text-decoration: none; }

/* 記事メタ情報行（更新日・著者・読了目安・閲覧数） */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.meta-pill {
  font-size: 0.8rem;
  color: var(--text-light);
}

/* カード内のメタ情報 */
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 10px;
}

/* ============================================================
   ヒーローセクション（フロントページ）
   ============================================================ */

/* ヒーロー全体 */
.hero {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--line);
}

/* ヒーロー 2カラムグリッド */
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

/* ヒーロー左テキストエリア */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* クイックリンク（チップ群） */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ヒーロー右パネル（人気テーマ） */
.hero-panel {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ミニスタッツグリッド */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* スタッツカード */
.stat-card {
  padding: 14px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 0.9rem;
  font-weight: 600;
}

/* ============================================================
   セクション共通レイアウト
   ============================================================ */

/* セクションヘッダー（タイトル + ボタン横並び） */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

/* ターゲット別カードグリッド（3カラム） */
.target-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* カードグリッド汎用 */
.card-grid,
.feature-grid,
.category-grid {
  display: grid;
  gap: 24px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   記事カード（template-parts/post-card.php）
   ============================================================ */

/* カード外枠 */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative; /* オーバーレイリンクの基準 */
}

/* カード全体をクリッカブルにする透明オーバーレイリンク */
.card-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* タグ・タイトルリンクはオーバーレイより前面 */
.article-card .cat-tag,
.article-card h3 a {
  position: relative;
  z-index: 2;
}

/* アイキャッチ画像エリア（1280×630 比率） */
.post-thumb {
  display: block;
  aspect-ratio: 1280 / 630;
  overflow: hidden;
  background: var(--surface-muted);
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .post-thumb img {
  transform: scale(1.03);
}

/* カードのテキストエリア */
.article-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  flex: 1;
}

/* タグ行 */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* カード記事タイトル */
.article-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}

.article-card h3 a {
  color: var(--text);
}

.article-card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* カード抜粋文 */
.article-card > p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   ターゲットカード（目的別ガイド）
   ============================================================ */
.target-card {
  padding: 28px 24px;
  background: var(--surface);
  border-radius: var(--radius);
}

.target-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 8px;
}

.target-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.icon-badge {
  font-size: 1.5rem;
  line-height: 1;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   ページヒーロー（アーカイブ・検索・一覧ページ）
   ============================================================ */
.page-hero {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 16px;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }

/* ============================================================
   記事2カラムレイアウト（single / archive）
   ============================================================ */

/* 2カラム（メイン + サイドバー） */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
}

/* ロードマップなど汎用2カラム */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
}

/* メインコラム */
.article-main { min-width: 0; }

/* ============================================================
   記事カバー（単記事ヘッダー）
   ============================================================ */
.article-cover {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

/* 記事アイキャッチ画像（1280×630 比率） */
.article-eyecatch {
  aspect-ratio: 1280 / 630;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 32px;
  background: var(--surface-muted);
}

.article-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   記事本文（ブロックエディタに近い素朴なスタイル）
   ============================================================ */
.article-content {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
}

/* 段落 */
.article-content p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* h2：装飾なし・サイズとウェイトで差別化 */
.article-content h2 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-top: 2.8em;
  margin-bottom: 0.9em;
  padding: 0;
  border: none;
  background: none;
}

/* h3：装飾なし */
.article-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  padding: 0;
  border: none;
  background: none;
}

/* h4 */
.article-content h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

/* リスト */
.article-content ul,
.article-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
  list-style: revert;
}

.article-content li { margin-bottom: 0.3em; }

/* 引用 */
.article-content blockquote {
  margin: 1.8em 0;
  padding: 14px 18px;
  border-left: 3px solid var(--line);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* テーブル */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 0.9rem;
}

.article-content th,
.article-content td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: var(--surface-muted);
  font-weight: 600;
}

/* コードブロック（背景黒） */
.article-content pre {
  background: #111111;
  color: #e8e8e8;
  padding: 20px 24px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  margin-bottom: 1.5em;
  border: none;
}

/* インラインコード */
.article-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-muted);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
}

/* コードブロック内 code をリセット */
.article-content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* リンク */
.article-content a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 強調 */
.article-content strong { font-weight: 700; }

/* 画像 */
.article-content img {
  border-radius: var(--radius);
  margin-bottom: 1.5em;
}

/* ブロックエディタ: 画像ブロック */
.article-content .wp-block-image {
  margin-bottom: 1.5em;
}
.article-content .wp-block-image img {
  margin-bottom: 0;
}
.article-content .wp-block-image figcaption {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}

/* ブロックエディタ: アライメント */
.article-content .aligncenter { margin-inline: auto; }
.article-content .alignleft   { float: left; margin-right: 1.5em; margin-bottom: 0.8em; }
.article-content .alignright  { float: right; margin-left: 1.5em; margin-bottom: 0.8em; }

/* ブロックエディタ: ボタンブロック */
.article-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--text);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ブロックエディタ: セパレータ */
.article-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

/* ============================================================
   要点・補足ボックス
   ============================================================ */

/* 記事冒頭の要点ボックス */
.summary-box {
  padding: 22px 24px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.summary-box h2 {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.summary-box p {
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-muted);
}

/* 注意・補足ボックス */
.notice {
  padding: 16px 18px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.5em;
}

/* ============================================================
   著者ボックス（single.php 記事下）
   ============================================================ */
.author-box {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin-top: 48px;
}

.author-box h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.author-box p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   サイドバー
   ============================================================ */

/* サイドバー全体（sticky） */
aside .sidebar-wrap,
aside > * {
  position: sticky;
  top: 80px;
}

/* サイドバーのブロック間隔 */
.sidebar-block {
  margin-bottom: 32px;
}

.sidebar-block:last-child { margin-bottom: 0; }

/* サイドバー見出し */
.sidebar-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* サイドバーリンクリスト */
.sidebar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-list a {
  display: block;
  padding: 6px 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line-light);
  transition: color 0.15s;
}

.sidebar-list a:hover {
  color: var(--text);
  text-decoration: none;
}

/* サイドバーアーカイブ（プルダウン） */
.sidebar-archive-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font-base);
  cursor: pointer;
}

/* WPウィジェット（sidebar-main） */
.widget { margin-bottom: 28px; }

.widget .footer-title,
.widget h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   サイドバーカード（フロントページ比較記事など）
   ============================================================ */
.sidebar-card {
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sidebar-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ============================================================
   CTAバナー
   ============================================================ */
.cta-banner {
  padding: 36px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.cta-banner h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.cta-banner p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.disclosure {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ============================================================
   学習ロードマップ（info-list）
   ============================================================ */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.info-item {
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
  border-left: 3px solid var(--text);
}

/* ============================================================
   ページネーション
   ============================================================ */
.pagination {
  margin-top: 40px;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}

.pagination .page-numbers.current {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.pagination .page-numbers:hover {
  color: var(--text);
  border-color: var(--text);
  text-decoration: none;
}

/* ============================================================
   広告枠ラベル
   ============================================================ */
.ad-label-box {
  padding: 8px 12px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.ad-label-box h2 {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 2px;
}

.ad-label-box p {
  font-size: 0.72rem;
  color: var(--text-light);
  margin: 0;
}

/* ============================================================
   比較テーブル
   ============================================================ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.compare-table th,
.compare-table td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.compare-table th {
  background: var(--surface-muted);
  font-weight: 600;
}

/* ============================================================
   空の状態
   ============================================================ */
.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

/* ============================================================
   フッター
   ============================================================ */

/* フッター全体 */
.footer {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* フッターグリッド（4カラム） */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: 32px;
  padding: var(--space-md) 0 var(--space-sm);
}

/* フッター見出し */
.footer-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* フッターリスト */
.list-unstyled { list-style: none; }

.list-unstyled li { margin-bottom: 10px; }

.list-unstyled a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color 0.15s;
}

.list-unstyled a:hover { color: var(--text); text-decoration: none; }

/* フッターサイト説明文 */
.footer-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.7;
}

/* コピーライト行 */
.copyright {
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ============================================================
   アクセシビリティ
   ============================================================ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ============================================================
   フィルターバー（JS連携）
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-bar .chip.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

/* ============================================================
   レスポンシブ：タブレット（〜1100px）
   ============================================================ */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important; /* PC・タブレットは4カラム維持 */
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-layout,
  .split {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   レスポンシブ：スマホ（〜768px）ブレークポイント
   ============================================================ */
@media (max-width: 768px) {

  /* コンテナ余白を縮小 */
  .container,
  .container-narrow {
    width: min(100% - 24px, var(--container));
  }

  /* スペーシング変数を縮小 */
  :root {
    --space-sm: 24px;
    --space-md: 40px;
    --space-lg: 56px;
    --space-xl: 72px;
  }

  /* ---- ヘッダー ---- */
  /* PCのナビと検索を非表示 */
  .site-nav,
  .header-search {
    display: none;
  }

  /* ハンバーガーボタンを表示 */
  .hamburger {
    display: flex;
  }

  /* ---- グリッドをシングルカラムに ---- */
  .target-grid,
  .grid-3,
  .grid-4,
  .footer-grid,
  .mini-stats {
    grid-template-columns: 1fr;
  }

  /* 記事レイアウトはすでに1100pxで解除済み */

  /* ---- section-head を縦並びに ---- */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ---- ヒーロー ---- */
  .hero {
    padding: var(--space-md) 0;
  }

  /* ---- CTAバナー ---- */
  .cta-banner {
    padding: 24px;
  }

  /* ---- フッター ---- */
  .footer-grid {
    padding-top: var(--space-sm);
  }
}

/* ============================================================
   エディタースタイル（ブロックエディタ editor-style）
   ============================================================ */
.editor-styles-wrapper {
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
}

/* ============================================================
   前後記事ナビゲーション（single.php・同カテゴリ内）
   ============================================================ */

/* ナビ全体：2カラムグリッド */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* 各ナビアイテム（リンクあり） */
.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

.post-nav-item:hover {
  text-decoration: none;
}

/* 空のプレースホルダー：ホバーも枠もなし */
.post-nav-empty {
  pointer-events: none;
}

/* ボタン部分（「← 前の記事」「次の記事 →」） */
.post-nav-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  width: fit-content;
  transition: opacity 0.15s;
}

.post-nav-item:hover .post-nav-btn {
  opacity: 0.75;
}

/* 次の記事ボタンは右寄せ */
.post-nav-next .post-nav-btn {
  margin-left: auto;
}

/* 記事タイトル */
.post-nav-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}

.post-nav-item:hover .post-nav-title {
  color: var(--text);
}

/* 次の記事タイトルは右寄せ */
.post-nav-next .post-nav-title {
  text-align: right;
}

/* スマホ：縦並び */
@media (max-width: 768px) {
  .post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav-next .post-nav-btn,
  .post-nav-next .post-nav-title {
    margin-left: 0;
    text-align: left;
  }
}

/* ============================================================
   投稿タグ
   ============================================================ */

/* タグ1個（カード・記事詳細・サイドバー共通） */
.post-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.post-tag:hover {
  color: var(--text);
  border-color: var(--text);
  text-decoration: none;
}

/* カード内タグ行 */
.post-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  z-index: 2; /* オーバーレイリンクより前面 */
}

/* 記事詳細ページのタグリスト（著者ボックス上） */
.article-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin-top: 32px;
}

/* サイドバーのタグクラウド */
.sidebar-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ============================================================
   トップページ専用スタイル（front-page.php）
   各セクションは fp- プレフィックスで管理
   ============================================================ */

/* ---- A. ヒーロー ---- */

/* ヒーロー外枠 */
.fp-hero {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--line);
}

/* ヒーロー内部：中央寄せ1カラム */
.fp-hero-inner {
  max-width: 80%;
  text-align: center;
}

/* ヒーローのeyebrow */
.fp-hero-inner .eyebrow {
  margin-bottom: 16px;
}

/* ヒーロータイトル */
.fp-hero-inner .hero-title {
  margin-bottom: 20px;
}

/* ヒーローリード */
.fp-hero-inner .hero-lead {
  margin-bottom: 32px;
}

/* ヒーロー検索フォーム */
.fp-hero-search {
  width: 80%;
  max-width: 100%;
  margin: 0 auto 28px;
}

.fp-hero-search .search-form {
  flex-direction: row;
}

.fp-hero-search .search-field {
  height: 58px;
  font-size: 1.05rem;
  padding: 0 20px;
}

.fp-hero-search .search-submit {
  height: 58px;
  padding: 0 28px;
  font-size: 1rem;
}

/* カテゴリチップ群 */
.fp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ヒーローエリア タグリスト */
.fp-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

/* ---- 汎用セクション ---- */

/* 通常セクション */
.fp-section {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
}

.fp-section:last-child {
  border-bottom: none;
}

/* 背景がミュートのセクション（カテゴリ一覧） */
.fp-section--muted {
  background: var(--surface-muted);
}

/* 空の状態メッセージ */
.fp-empty {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* ---- C. カテゴリ一覧グリッド ---- */

/* カテゴリカードのグリッド */
.fp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* カテゴリカード1枚 */
.fp-cat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s;
}

.fp-cat-card:hover {
  border-color: var(--accent);
  text-decoration: none;
}

/* カテゴリ名 */
.fp-cat-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* 件数 */
.fp-cat-count {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ---- E. CTAバナー ---- */

/* CTAバナー外枠 */
.fp-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* CTAテキストエリア */
.fp-cta-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* CTAタイトル */
.fp-cta-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

/* CTAリード */
.fp-cta-lead {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---- レスポンシブ（〜768px） ---- */
@media (max-width: 768px) {

  /* ヒーロー */
  .fp-hero {
    padding: var(--space-lg) 0 var(--space-md);
    text-align: left;
  }

  .fp-hero-inner {
    max-width: 720px;
    text-align: left;
  }

  .fp-hero-search {
    max-width: 100%;
    margin-left: 0;
  }

  .fp-hero-chips {
    justify-content: flex-start;
  }

  /* カテゴリグリッド */
  .fp-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTAバナー */
  .fp-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 20px;
  }
}

/* ============================================================
   別ウィンドウ用テンプレート（page-blank.php）
   ヘッダー・フッターなし・コンテンツのみのシンプルレイアウト
   ============================================================ */

/* body リセット */
.page-blank {
  background: var(--surface);
}

/* メインエリア */
.blank-main {
  padding: var(--space-md) 0 var(--space-lg);
}

/* コンテンツコンテナ */
.blank-container {
  width: min(100% - 40px, 800px);
  margin-inline: auto;
}

/* スマホ余白調整 */
@media (max-width: 768px) {
  .blank-container {
    width: min(100% - 24px, 800px);
  }

  .blank-main {
    padding: var(--space-sm) 0 var(--space-md);
  }
}

/* ============================================================
   Contact Form 7 フォームスタイル
   プラグイン：Contact Form 7 + Flamingo（保存用）
   確認画面：CF7 Confirm プラグイン使用
   ============================================================ */

/* フォーム全体ラッパー */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 各フィールドブロック */
.cf7-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}

/* ラベル */
.cf7-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* 必須バッジ */
.cf7-required {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}

/* 任意バッジ */
.cf7-optional {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* テキスト入力・メールアドレス */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

/* テキストエリア */
.wpcf7-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font-base);
  line-height: 1.8;
  resize: vertical;
  min-height: 200px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* フォーカス時 */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 134, 133, 0.12);
}

/* プレースホルダー */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--text-light);
  font-size: 0.9rem;
}

/* バリデーションエラー時 */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #d63638;
  box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.1);
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #d63638;
  margin-top: 4px;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"],
.wpcf7-submit {
  height: 52px;
  padding: 0 40px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover {
  opacity: 0.8;
}

/* 送信中スピナー非表示（CF7デフォルト） */
.wpcf7-spinner {
  display: none !important;
}

/* 送信結果メッセージ */
.wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  border: none !important;
}

/* 送信成功 */
.wpcf7-mail-sent-ok {
  background: #f0faf0;
  color: #1e6e1e;
}

/* 送信失敗 */
.wpcf7-mail-sent-ng,
.wpcf7-aborted {
  background: #fff0f0;
  color: #d63638;
}

/* バリデーションエラー */
.wpcf7-validation-errors,
.wpcf7-spam-blocked {
  background: #fff8e5;
  color: #8a6000;
}

/* ---- 確認画面（CF7 Multi-Step Forms） ---- */

/* 確認テーブル */
.wpcf7c-conf-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
}

.wpcf7c-conf-table th,
.wpcf7c-conf-table td {
  padding: 14px 16px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  text-align: left;
  vertical-align: top;
}

.wpcf7c-conf-table th {
  background: var(--surface-muted);
  font-weight: 600;
  width: 30%;
  color: var(--text);
}

.wpcf7c-conf-table td {
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap; /* お問い合わせ内容の改行を保持 */
}

/* ステップ進む・戻るボタン共通ラッパー */
.cf7-btn-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* 「確認画面へ」ボタン（next_step） */
.wpcf7-form input.wpcf7-submit,
.wpcf7-form .wpcf7-submit {
  height: 52px;
  padding: 0 40px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-base);
  cursor: pointer;
  transition: opacity 0.15s;
}

.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:hover {
  opacity: 0.8;
}

/* 「← 入力に戻る」ボタン（prev_step） */
.wpcf7c-btn-back,
.wpcf7-form input.wpcf7c-btn-back {
  height: 52px;
  padding: 0 32px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-base);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.wpcf7c-btn-back:hover,
.wpcf7-form input.wpcf7c-btn-back:hover {
  border-color: var(--text);
  background: var(--surface-muted);
}

/* Multi-Step のステップインジケーター（プラグインが出力する場合） */
.wpcf7msf-step-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.wpcf7msf-step-indicator .active {
  color: var(--accent);
  font-weight: 700;
}

/* スマホ */
@media (max-width: 768px) {
  .wpcf7-form input[type="submit"],
  .wpcf7-form .wpcf7-submit,
  .wpcf7c-btn-back,
  .wpcf7-form input.wpcf7c-btn-back {
    width: 100%;
    text-align: center;
  }

  .cf7-btn-row {
    flex-direction: column-reverse; /* 送信ボタンを上に */
  }

  .wpcf7c-conf-table th {
    width: 40%;
  }
}

/* ============================================================
   reCAPTCHA バッジを非表示
   ============================================================ */
.grecaptcha-badge { visibility: hidden; }

/* ============================================================
   SNSシェアボタン（single.php）
   ============================================================ */

/* シェアバー全体 */
.share-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin-top: 32px;
}

/* 「シェアする」テキスト */
.share-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* アイコン群 */
.share-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 各ボタン共通 */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.share-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
  text-decoration: none;
}

/* X（旧Twitter） */
.share-btn--x   { background: #000000; }

/* Facebook */
.share-btn--fb  { background: #1877f2; }

/* LINE */
.share-btn--line { background: #06c755; }

/* SVGのサイズ調整 */
.share-btn svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   おすすめ記事・関連記事セクション共通
   ============================================================ */

/* セクション外枠 */
.related-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   カルーセルスライダー
   PC：4カラム表示 / スマホ：1カラム表示
   最大10記事・前後ボタンで操作
   ============================================================ */

/* カルーセル外枠（ボタンの基準） */
.carousel-wrap {
  position: relative;
}

/* スライドトラック（横スクロールコンテナ） */
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px * 2) / 3); /* 3カラム */
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* スクロールバー非表示 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

/* 各スライド */
.carousel-slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* 前後ボタン共通 */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.carousel-btn:hover {
  background: var(--surface-muted);
  border-color: var(--text);
}

/* 非活性時は薄く */
.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* 前へボタン位置 */
.carousel-btn--prev {
  left: -20px;
}

/* 次へボタン位置 */
.carousel-btn--next {
  right: -20px;
}

/* ============================================================
   カルーセル：スマホ（〜768px）1カラム
   ============================================================ */
@media (max-width: 768px) {
  .carousel-track {
    grid-auto-columns: 85%; /* スワイプで次が少し見える */
  }

  /* ボタンをトラック下に移動 */
  .carousel-wrap {
    padding-bottom: 48px;
  }

  .carousel-btn {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .carousel-btn--prev {
    left: calc(50% - 48px);
  }

  .carousel-btn--next {
    right: calc(50% - 48px);
  }
}

/* ============================================================
   カルーセル：タブレット（769px〜1100px）2カラム
   ============================================================ */
@media (min-width: 769px) and (max-width: 1100px) {
  .carousel-track {
    grid-auto-columns: calc((100% - 24px) / 2); /* 2カラム（タブレット） */
  }
}

/* ============================================================
   カルーセル：2カラム（おすすめ記事用）
   ============================================================ */
.carousel-wrap--2col .carousel-track {
  grid-auto-columns: calc((100% - 24px) / 2);
}

@media (max-width: 768px) {
  .carousel-wrap--2col .carousel-track {
    grid-auto-columns: 85%;
  }
}

/* ============================================================
   記事編集ボタン（ログイン中のみ表示）
   ============================================================ */

/* ボタンラッパー（パンくずの下・記事カバーの上） */
.edit-btn-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* EDITボタン */
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.edit-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
  text-decoration: none;
}

/* ============================================================
   ロードマップバナー（フロントページ：新着記事直後）
   ============================================================ */

/* バナーセクション背景 */
.fp-roadmap-section {
  background: var(--accent);
}

/* 2カラムグリッド */
.fp-roadmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* バナーカード1枚 */
.fp-roadmap-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fp-roadmap-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  text-decoration: none;
}

/* ラベル */
.fp-roadmap-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* タイトル */
.fp-roadmap-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* 説明文 */
.fp-roadmap-card__desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  flex: 1;
}

/* 読むリンク */
.fp-roadmap-card__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}

/* スマホ：縦並び */
@media (max-width: 768px) {
  .fp-roadmap-grid {
    grid-template-columns: 1fr;
  }

  .fp-roadmap-card {
    padding: 22px 24px;
  }
}

/* ============================================================
   ロードマップリンク（サイドバー最下部）
   ============================================================ */

/* リンクリスト */
.sidebar-roadmap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 各リンク */
.sidebar-roadmap__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.sidebar-roadmap__item:hover {
  background: var(--line);
  text-decoration: none;
}

/* タイトル */
.sidebar-roadmap__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  flex: 1;
}

/* 矢印 */
.sidebar-roadmap__arrow {
  font-size: 0.82rem;
  color: var(--accent);
  flex-shrink: 0;
}