/*
 Theme Name: Cocoon Child - AI Blog
 Template: cocoon-master
 Description: AI Blog Site Design - Material Design based custom theme
 Version: 1.0.0
 Author: AI Blog Team
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: cocoon-child-ai-blog
*/

/* ==========================================================================
   デザイントークン（CSS カスタムプロパティ）
   Material Design 準拠のデザインシステム変数定義
   Requirements: 1.1-1.6, 2.1-2.4, 12.1-12.4
   ========================================================================== */

:root {
  /* --- カラースキーム ---
     プライマリ: 信頼性とテクノロジーを表現するディープブルー
     セカンダリ: インタラクティブ要素用のティール
     WCAG 2.1 AA コントラスト比 4.5:1 以上を確保
  */
  --md-primary: #1565C0;
  --md-primary-light: #1E88E5;
  --md-primary-dark: #0D47A1;
  --md-secondary: #00897B;
  --md-secondary-light: #26A69A;
  --md-background: #FAFAFA;
  --md-surface: #FFFFFF;
  --md-text-primary: #212121;
  --md-text-secondary: #757575;
  --md-footer-bg: #263238;
  --md-footer-text: #FFFFFF;

  /* --- タイポグラフィ ---
     日本語対応のサンセリフフォントスタック
     ベースフォントサイズ 16px、行間 1.8 で長文の可読性を確保
  */
  --font-family-base: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.8;
  --font-size-h1: 28px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 18px;

  /* --- スペーシング（8px グリッド） ---
     Material Design の 8px グリッドシステムに準拠
  */
  --spacing-unit: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* --- エレベーション（Material Design） ---
     コンポーネント階層を box-shadow で表現
     レベル 0: フラット要素
     レベル 1: 記事カード（通常）
     レベル 2: ヘッダー、ホバー中のインタラクティブ要素
     レベル 3: 記事カード（ホバー）、CTA ボタン（ホバー）
  */
  --elevation-0: none;
  --elevation-1: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  --elevation-2: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  --elevation-3: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);

  /* --- トランジション ---
     ホバー・フォーカス状態変化のスムーズなアニメーション
  */
  --transition-default: 200ms ease-in-out;

  /* --- ボーダーラジウス ---
     インタラクティブコンポーネント用の角丸
  */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* --- レイアウト ---
     サイドバー幅とコンテンツ最大幅の定義
  */
  --sidebar-width: 336px;
  --content-max-width: 780px;
}

/* ==========================================================================
   CSS カスタムプロパティ未対応ブラウザ向けフォールバック
   var() 未対応環境では直前のフォールバック値が適用される
   ========================================================================== */

body {
  /* フォールバック: フォントファミリー */
  font-family: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-family-base);
  /* フォールバック: ベースフォントサイズ */
  font-size: 16px;
  font-size: var(--font-size-base);
  /* フォールバック: 行間 */
  line-height: 1.8;
  line-height: var(--line-height-base);
  /* フォールバック: 背景色 */
  background-color: #FAFAFA;
  background-color: var(--md-background);
  /* フォールバック: テキスト色 */
  color: #212121;
  color: var(--md-text-primary);
}

/* ==========================================================================
   4.1 サイト全体のカラースキーム
   プライマリカラー、セカンダリカラー、テキスト色、リンク色を適用
   WCAG 2.1 AA コントラスト比 4.5:1 以上を確保
   Requirements: 1.1-1.6
   ========================================================================== */

/* --- リンクの基本色 ---
   プライマリカラー (#1565C0) を使用
   背景 #FAFAFA に対するコントラスト比: 約 6.4:1（AA 準拠）
*/
a {
  color: #1565C0;
  color: var(--md-primary);
  text-decoration: none;
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

/* --- リンクのホバー・フォーカス状態 ---
   プライマリライト (#1E88E5) を使用
   背景 #FAFAFA に対するコントラスト比: 約 4.6:1（AA 準拠）
*/
a:hover,
a:focus {
  color: #1E88E5;
  color: var(--md-primary-light);
}

/* --- セカンダリテキスト ---
   補足情報、メタデータ、キャプション等に使用
   #757575 は背景 #FAFAFA に対してコントラスト比 約 4.6:1（AA 準拠）
*/
.entry-date,
.entry-category,
.post-meta,
.post-date,
.post-update,
.post-author,
.cat-label,
.entry-card-meta,
.article-meta {
  color: #757575;
  color: var(--md-text-secondary);
}

/* --- 選択テキストのハイライト ---
   プライマリカラーを背景に使用し、白テキストで表示
*/
::selection {
  background-color: #1565C0;
  background-color: var(--md-primary);
  color: #FFFFFF;
  color: var(--md-surface);
}

/* --- フォーカスアウトライン ---
   キーボードナビゲーション時のアクセシビリティ対応
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1565C0;
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   4.2 タイポグラフィスタイル
   フォントファミリー、ベースフォントサイズ、行間、見出しサイズを適用
   Requirements: 2.1-2.4
   ========================================================================== */

/* --- body のタイポグラフィ ---
   フォントファミリー、ベースサイズ、行間は上部フォールバックセクションで定義済み
   ここでは追加のタイポグラフィ調整を行う
*/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --- 見出し共通スタイル ---
   全見出しにフォントファミリーとウェイトを適用
*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: 1.4;
  color: #212121;
  color: var(--md-text-primary);
}

/* --- 見出し h1 ---
   ページタイトル、記事タイトルに使用（28px）
*/
h1 {
  font-size: 28px;
  font-size: var(--font-size-h1);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
}

/* --- 見出し h2 ---
   セクション見出しに使用（24px）
*/
h2 {
  font-size: 24px;
  font-size: var(--font-size-h2);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
}

/* --- 見出し h3 ---
   サブセクション見出しに使用（20px）
*/
h3 {
  font-size: 20px;
  font-size: var(--font-size-h3);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
}

/* --- 見出し h4 ---
   小見出しに使用（18px）
*/
h4 {
  font-size: 18px;
  font-size: var(--font-size-h4);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
}

/* --- 段落テキスト ---
   本文の行間と余白を設定
*/
p {
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  line-height: 1.8;
  line-height: var(--line-height-base);
}

/* ==========================================================================
   4.3 Material Design スペーシングとエレベーション
   8px グリッドベースのユーティリティ、エレベーション、トランジション、角丸
   Requirements: 12.1-12.4
   ========================================================================== */

/* --- 8px グリッドベースのマージンユーティリティ ---
   Material Design の 8px グリッドシステムに準拠
*/
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 4px; margin-top: var(--spacing-xs); }
.mt-sm { margin-top: 8px; margin-top: var(--spacing-sm); }
.mt-md { margin-top: 16px; margin-top: var(--spacing-md); }
.mt-lg { margin-top: 24px; margin-top: var(--spacing-lg); }
.mt-xl { margin-top: 32px; margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: 48px; margin-top: var(--spacing-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: 4px; margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: 8px; margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: 16px; margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: 24px; margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: 32px; margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: 48px; margin-bottom: var(--spacing-2xl); }

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: 4px; margin-left: var(--spacing-xs); }
.ml-sm { margin-left: 8px; margin-left: var(--spacing-sm); }
.ml-md { margin-left: 16px; margin-left: var(--spacing-md); }
.ml-lg { margin-left: 24px; margin-left: var(--spacing-lg); }
.ml-xl { margin-left: 32px; margin-left: var(--spacing-xl); }

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: 4px; margin-right: var(--spacing-xs); }
.mr-sm { margin-right: 8px; margin-right: var(--spacing-sm); }
.mr-md { margin-right: 16px; margin-right: var(--spacing-md); }
.mr-lg { margin-right: 24px; margin-right: var(--spacing-lg); }
.mr-xl { margin-right: 32px; margin-right: var(--spacing-xl); }

/* --- 8px グリッドベースのパディングユーティリティ --- */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: 4px; padding-top: var(--spacing-xs); }
.pt-sm { padding-top: 8px; padding-top: var(--spacing-sm); }
.pt-md { padding-top: 16px; padding-top: var(--spacing-md); }
.pt-lg { padding-top: 24px; padding-top: var(--spacing-lg); }
.pt-xl { padding-top: 32px; padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: 48px; padding-top: var(--spacing-2xl); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: 4px; padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: 8px; padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: 16px; padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: 24px; padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: 32px; padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: 48px; padding-bottom: var(--spacing-2xl); }

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: 4px; padding-left: var(--spacing-xs); }
.pl-sm { padding-left: 8px; padding-left: var(--spacing-sm); }
.pl-md { padding-left: 16px; padding-left: var(--spacing-md); }
.pl-lg { padding-left: 24px; padding-left: var(--spacing-lg); }
.pl-xl { padding-left: 32px; padding-left: var(--spacing-xl); }

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: 4px; padding-right: var(--spacing-xs); }
.pr-sm { padding-right: 8px; padding-right: var(--spacing-sm); }
.pr-md { padding-right: 16px; padding-right: var(--spacing-md); }
.pr-lg { padding-right: 24px; padding-right: var(--spacing-lg); }
.pr-xl { padding-right: 32px; padding-right: var(--spacing-xl); }

/* --- ショートハンドパディングユーティリティ --- */
.p-0 { padding: 0; }
.p-xs { padding: 4px; padding: var(--spacing-xs); }
.p-sm { padding: 8px; padding: var(--spacing-sm); }
.p-md { padding: 16px; padding: var(--spacing-md); }
.p-lg { padding: 24px; padding: var(--spacing-lg); }
.p-xl { padding: 32px; padding: var(--spacing-xl); }

/* --- エレベーション（Material Design box-shadow）クラス ---
   コンポーネントの階層を視覚的に表現
   レベル 0: フラット（影なし）
   レベル 1: 記事カード通常状態
   レベル 2: ヘッダー、アクティブ要素
   レベル 3: ホバー状態、CTA ボタン
*/
.elevation-0 {
  box-shadow: none;
  box-shadow: var(--elevation-0);
}

.elevation-1 {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-1);
}

.elevation-2 {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-2);
}

.elevation-3 {
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-3);
}

/* --- トランジション ---
   ホバー・フォーカス状態変化のスムーズなアニメーション（200ms ease-in-out）
*/
.transition-default {
  transition: all 200ms ease-in-out;
  transition: all var(--transition-default);
}

.transition-shadow {
  transition: box-shadow 200ms ease-in-out;
  transition: box-shadow var(--transition-default);
}

.transition-color {
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

.transition-bg {
  transition: background-color 200ms ease-in-out;
  transition: background-color var(--transition-default);
}

/* --- ボーダーラジウス ---
   インタラクティブコンポーネント用の角丸（4px / 8px）
*/
.radius-sm {
  border-radius: 4px;
  border-radius: var(--radius-sm);
}

.radius-md {
  border-radius: 8px;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   5.1 ヘッダーのスタイル
   固定ヘッダー、ロゴ、ナビゲーションの水平配置
   Cocoon クラス .header, .header-in, .navi, .navi-in をオーバーライド
   Requirements: 3.1-3.5
   ========================================================================== */

/* --- 固定ヘッダーのための body パディング ---
   ヘッダーが position: fixed のため、コンテンツが隠れないよう上部に余白を確保
*/
body {
  padding-top: 64px;
}

/* --- ヘッダー本体 ---
   背景色: Surface (#FFFFFF)、エレベーション 2 の box-shadow
   ビューポート上部に固定表示（z-index: 1000）
*/
.header {
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* --- ヘッダー内部コンテナ ---
   ロゴとナビゲーションを水平配置（flexbox）
   上下パディングで適切な高さを確保
*/
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* --- サイトロゴ ---
   最大高さ 48px に制限し、アスペクト比を維持
*/
.header .logo-header img,
.header .site-name-text-link img,
.header-in .logo-image img {
  max-height: 48px;
  width: auto;
  display: block;
}

/* --- ロゴテキスト（画像ロゴがない場合） ---
   プライマリカラーで表示
*/
.header .site-name-text,
.header .logo-text {
  font-size: 24px;
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: #212121;
  color: var(--md-text-primary);
  text-decoration: none;
}

/* --- グローバルナビゲーション ---
   Cocoon のナビゲーションバーをオーバーライド
   背景色を透明にし、ヘッダーと一体化
*/
.navi {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

/* --- ナビゲーション内部コンテナ ---
   水平配置（flexbox）、アイテム間のスペーシング
*/
.navi-in > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  gap: var(--spacing-sm);
}

/* --- ナビゲーションリンク ---
   テキスト色、ホバー時のカラー変化、トランジション
*/
.navi-in > ul > li > a {
  color: #212121;
  color: var(--md-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 16px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  transition: background-color var(--transition-default), color var(--transition-default);
  display: block;
}

/* --- ナビゲーションリンクのホバー・フォーカス状態 ---
   背景色を薄いグレーに変化させ、インタラクションを示す
*/
.navi-in > ul > li > a:hover,
.navi-in > ul > li > a:focus {
  background-color: rgba(21, 101, 192, 0.08);
  color: #1565C0;
  color: var(--md-primary);
}

/* --- 現在のページのナビゲーションリンク ---
   プライマリカラーで強調表示
*/
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current_page_item > a {
  color: #1565C0;
  color: var(--md-primary);
  font-weight: 700;
}

/* --- サブメニュー（ドロップダウン） ---
   Surface 背景、エレベーション 2 のシャドウ
*/
.navi-in > ul > li > ul {
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-2);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  border: none;
}

.navi-in > ul > li > ul > li > a {
  color: #212121;
  color: var(--md-text-primary);
  padding: 8px 16px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  transition: background-color 200ms ease-in-out;
  transition: background-color var(--transition-default);
}

.navi-in > ul > li > ul > li > a:hover {
  background-color: rgba(21, 101, 192, 0.08);
  color: #1565C0;
  color: var(--md-primary);
}

/* ==========================================================================
   5.2 検索アイコンの展開アニメーション
   検索アイコンクリックで入力フィールドが展開するトランジション
   Requirements: 3.3
   ========================================================================== */

/* --- 検索フォームコンテナ ---
   ヘッダー内で右寄せ配置、展開アニメーション用の基盤
*/
.header .search-box,
.header .search-menu-content {
  position: relative;
  display: flex;
  align-items: center;
}

/* --- 検索入力フィールド（折りたたみ状態） ---
   幅 0 で非表示、展開時にスムーズにアニメーション
*/
.header .search-edit,
.header .search-menu-content input[type="text"],
.header .search-menu-content input[type="search"] {
  width: 0;
  padding: 8px 0;
  padding: var(--spacing-sm) 0;
  border: none;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  font-size: 14px;
  color: #212121;
  color: var(--md-text-primary);
  opacity: 0;
  transition: width 300ms ease-in-out, opacity 300ms ease-in-out, padding 300ms ease-in-out, border-color 300ms ease-in-out;
  outline: none;
}

/* --- 検索入力フィールド（展開状態） ---
   .open クラスが付与された時に入力フィールドを展開表示
*/
.header .search-box.open .search-edit,
.header .search-menu-content.open input[type="text"],
.header .search-menu-content.open input[type="search"],
.header .search-edit:focus,
.header .search-menu-content input[type="text"]:focus,
.header .search-menu-content input[type="search"]:focus {
  width: 200px;
  padding: 8px 12px;
  padding: var(--spacing-sm) 12px;
  opacity: 1;
  border-bottom-color: #1565C0;
  border-bottom-color: var(--md-primary);
}

/* --- 検索アイコンボタン ---
   Material Design スタイルのアイコンボタン
*/
.header .search-submit,
.header .search-box-btn,
.header .search-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  padding: var(--spacing-sm);
  color: #757575;
  color: var(--md-text-secondary);
  border-radius: 50%;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  transition: background-color var(--transition-default), color var(--transition-default);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 検索アイコンボタンのホバー状態 --- */
.header .search-submit:hover,
.header .search-box-btn:hover,
.header .search-menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #212121;
  color: var(--md-text-primary);
}

/* ==========================================================================
   5.3 ヘッダーのモバイル対応
   768px 以下でハンバーガーメニューに折りたたみ
   Cocoon クラス .mobile-menu-buttons をスタイリング
   Requirements: 3.6, 9.1
   ========================================================================== */

@media (max-width: 767px) {
  /* --- モバイル時の body パディング調整 ---
     モバイルヘッダーの高さに合わせて調整
  */
  body {
    padding-top: 56px;
  }

  /* --- モバイルヘッダー内部コンテナ ---
     コンパクトなパディングに調整
  */
  .header-in {
    padding: 4px 8px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  /* --- デスクトップナビゲーションを非表示 --- */
  .navi {
    display: none;
  }

  /* --- モバイルメニューボタン ---
     ハンバーガーメニューアイコンのスタイリング
     タッチターゲット最小 44x44px を確保
  */
  .mobile-menu-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    gap: var(--spacing-xs);
  }

  .mobile-menu-buttons .menu-button,
  .mobile-menu-buttons button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    padding: var(--spacing-sm);
    color: #212121;
    color: var(--md-text-primary);
    border-radius: 50%;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease-in-out;
    transition: background-color var(--transition-default);
  }

  .mobile-menu-buttons .menu-button:hover,
  .mobile-menu-buttons button:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

  /* --- モバイルメニューアイコン ---
     ハンバーガーアイコンのサイズ調整
  */
  .mobile-menu-buttons .menu-button::before,
  .mobile-menu-buttons .fa,
  .mobile-menu-buttons .fas,
  .mobile-menu-buttons .far {
    font-size: 24px;
  }

  /* --- モバイルスライドインメニュー ---
     ナビゲーションメニューのモバイル展開時スタイル
  */
  .mobile-menu-buttons + .navi,
  #navi-menu-content {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    background-color: var(--md-surface);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
    box-shadow: var(--elevation-2);
    z-index: 999;
  }

  /* --- モバイルメニュー内のリンク ---
     縦積みレイアウト、十分なタッチターゲットサイズ
  */
  #navi-menu-content ul {
    flex-direction: column;
    padding: 8px 0;
    padding: var(--spacing-sm) 0;
  }

  #navi-menu-content ul li a {
    padding: 12px 16px;
    padding: 12px var(--spacing-md);
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* --- モバイル検索フィールド ---
     モバイルでは展開時にフル幅表示
  */
  .header .search-edit:focus,
  .header .search-menu-content.open input[type="text"],
  .header .search-menu-content.open input[type="search"] {
    width: 140px;
  }
}

/* ==========================================================================
   6.1 フッターのスタイル
   ダーク背景、3カラムウィジェットレイアウト、著作権表示
   Cocoon クラス .footer, .footer-in, .footer-widget-area, .copyright をオーバーライド
   Requirements: 4.1-4.3
   ========================================================================== */

/* --- フッター本体 ---
   ダーク背景 (#263238)、白テキスト (#FFFFFF)
*/
.footer {
  background-color: #263238;
  background-color: var(--md-footer-bg);
  color: #FFFFFF;
  color: var(--md-footer-text);
  padding: 48px 0 0;
  padding: var(--spacing-2xl) 0 0;
}

/* --- フッター内部コンテナ ---
   最大幅を制限し、中央揃え
*/
.footer-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  padding: 0 var(--spacing-md);
}

/* --- フッターウィジェットエリア ---
   デスクトップで3カラムグリッドレイアウト
*/
.footer-widget-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  gap: var(--spacing-xl);
  padding-bottom: 32px;
  padding-bottom: var(--spacing-xl);
}

/* --- フッターウィジェット個別スタイル ---
   各ウィジェットカラムの基本スタイル
*/
.footer-widget-area .widget {
  color: #FFFFFF;
  color: var(--md-footer-text);
}

/* --- フッターウィジェットの見出し ---
   白テキスト、下線で区切り
*/
.footer-widget-area .widget h2,
.footer-widget-area .widget h3,
.footer-widget-area .widget-title {
  color: #FFFFFF;
  color: var(--md-footer-text);
  font-size: 18px;
  font-size: var(--font-size-h4);
  font-weight: 700;
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  padding-bottom: 8px;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- フッター内のリンク ---
   白テキスト、ホバー時にセカンダリライトカラー
*/
.footer a,
.footer-widget-area a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

.footer a:hover,
.footer a:focus,
.footer-widget-area a:hover,
.footer-widget-area a:focus {
  color: #26A69A;
  color: var(--md-secondary-light);
}

/* --- フッターリスト ---
   ウィジェット内のリスト項目のスタイル
*/
.footer-widget-area ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-widget-area ul li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-widget-area ul li:last-child {
  border-bottom: none;
}

/* --- 著作権表示 ---
   フッター下部中央に配置、上部にセパレーター
*/
.copyright {
  text-align: center;
  padding: 24px 16px;
  padding: var(--spacing-lg) var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-top: 0;
}

/* --- 著作権表示内のリンク --- */
.copyright a {
  color: rgba(255, 255, 255, 0.85);
}

.copyright a:hover,
.copyright a:focus {
  color: #26A69A;
  color: var(--md-secondary-light);
}

/* ==========================================================================
   6.2 フッターのモバイル対応
   768px 以下でウィジェットカラムを1カラムに縦積み
   Requirements: 4.4, 9.1
   ========================================================================== */

@media (max-width: 767px) {
  /* --- フッターのモバイルパディング調整 --- */
  .footer {
    padding: 32px 0 0;
    padding: var(--spacing-xl) 0 0;
  }

  /* --- ウィジェットエリアを1カラムに変更 ---
     3カラムグリッドから1カラム縦積みに切り替え
  */
  .footer-widget-area {
    grid-template-columns: 1fr;
    gap: 24px;
    gap: var(--spacing-lg);
    padding-bottom: 24px;
    padding-bottom: var(--spacing-lg);
  }

  /* --- 著作権表示のモバイル調整 ---
     パディングを縮小
  */
  .copyright {
    padding: 16px 8px;
    padding: var(--spacing-md) var(--spacing-sm);
    font-size: 13px;
  }
}

/* ==========================================================================
   8.1 Article Card のスタイル
   記事一覧でのカード型表示コンポーネント
   サムネイル 16:9、タイトル2行制限、メタ情報、抜粋80文字、
   エレベーション 1→3（ホバー）、角丸 8px、トランジション 200ms
   Cocoon クラス .entry-card, .entry-card-wrap, .entry-card-thumb,
   .entry-card-title, .entry-card-snippet をオーバーライド
   Requirements: 6.1-6.6
   ========================================================================== */

/* --- 記事カードラッパー ---
   角丸 8px、エレベーション 1、ホバーでエレベーション 3 に変化
   overflow: hidden でサムネイルの角丸を適用
*/
.entry-card-wrap {
  display: block;
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  border-radius: 8px;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
  transition: box-shadow var(--transition-default), transform var(--transition-default);
  text-decoration: none;
  border: none;
}

/* --- 記事カードラッパーのホバー状態 ---
   エレベーション 3 に上昇、わずかに浮き上がるエフェクト
*/
.entry-card-wrap:hover {
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
}

/* --- 記事カード本体 ---
   Cocoon のデフォルトボーダーを除去
*/
.entry-card {
  border: none;
  border-radius: 8px;
  border-radius: var(--radius-md);
  background-color: transparent;
}

/* --- サムネイル画像コンテナ ---
   16:9 アスペクト比を維持
*/
.entry-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  margin: 0;
}

/* --- サムネイル画像 ---
   コンテナに合わせてカバー表示、16:9 アスペクト比
*/
.entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

/* --- サムネイルなし時のプレースホルダー ---
   背景色でフォールバック表示
*/
.entry-card-thumb .no-image {
  width: 100%;
  height: 100%;
  background-color: #FAFAFA;
  background-color: var(--md-background);
  aspect-ratio: 16 / 9;
}

/* --- カードコンテンツエリア ---
   サムネイル下のテキスト領域にパディングを適用
*/
.entry-card-content {
  padding: 16px;
  padding: var(--spacing-md);
}

/* --- 記事カードタイトル ---
   太字、最大2行で切り詰め（-webkit-line-clamp: 2）
*/
.entry-card-title {
  font-size: 16px;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.5;
  color: #212121;
  color: var(--md-text-primary);
  margin: 0 0 8px;
  margin: 0 0 var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- メタ情報（公開日、カテゴリラベル） ---
   セカンダリテキスト色、小さめフォントサイズ
*/
.entry-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--spacing-sm);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
  font-size: 13px;
  color: #757575;
  color: var(--md-text-secondary);
}

/* --- 公開日アイコンとテキスト --- */
.entry-card-meta .entry-date,
.entry-card-meta .post-date {
  color: #757575;
  color: var(--md-text-secondary);
  font-size: 13px;
}

/* --- カテゴリラベル ---
   プライマリカラーの小さなラベル
*/
.entry-card-meta .cat-label,
.entry-card .cat-label {
  background-color: #1565C0;
  background-color: var(--md-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  padding: 2px var(--spacing-sm);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  display: inline-block;
  line-height: 1.4;
}

/* --- 抜粋テキスト ---
   最大80文字の表示制御、セカンダリテキスト色
*/
.entry-card-snippet {
  font-size: 14px;
  line-height: 1.6;
  color: #757575;
  color: var(--md-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
}


/* ==========================================================================
   9.1 ヒーローセクションのスタイル
   トップページ上部のキャッチコピーと CTA ボタン
   グラデーション背景（--md-primary → --md-primary-dark）、白テキスト
   Requirements: 5.1
   ========================================================================== */

/* --- ヒーローセクション本体 ---
   プライマリカラーのグラデーション背景、白テキスト
*/
.ai-blog-hero {
  background: linear-gradient(135deg, #1565C0, #0D47A1);
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  color: #FFFFFF;
  padding: 64px 16px;
  padding: 64px var(--spacing-md);
  text-align: center;
}

/* --- ヒーローセクション内部コンテナ ---
   最大幅を制限し中央揃え
*/
.ai-blog-hero__inner {
  max-width: 800px;
  margin: 0 auto;
}

/* --- タグラインテキスト ---
   大きめの白テキスト
*/
.ai-blog-hero__tagline {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0 0 16px;
  margin: 0 0 var(--spacing-md);
}

/* --- 説明テキスト --- */
.ai-blog-hero__description {
  font-size: 18px;
  font-size: var(--font-size-h4);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px;
  margin: 0 0 var(--spacing-xl);
}

/* --- CTA ボタン ---
   セカンダリカラー背景、角丸 4px、ホバーでエレベーション 3
*/
.ai-blog-hero__cta {
  display: inline-block;
  background-color: #00897B;
  background-color: var(--md-secondary);
  color: #FFFFFF;
  font-size: 16px;
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: 12px 32px;
  padding: 12px var(--spacing-xl);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: box-shadow 200ms ease-in-out, background-color 200ms ease-in-out;
  transition: box-shadow var(--transition-default), background-color var(--transition-default);
  box-shadow: none;
  box-shadow: var(--elevation-0);
  min-height: 44px;
  line-height: 1.4;
}

/* --- CTA ボタンのホバー状態 ---
   エレベーション 3、背景色をやや明るく
*/
.ai-blog-hero__cta:hover,
.ai-blog-hero__cta:focus {
  background-color: #26A69A;
  background-color: var(--md-secondary-light);
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-3);
  color: #FFFFFF;
}

/* --- ヒーローセクションのモバイル対応 --- */
@media (max-width: 767px) {
  .ai-blog-hero {
    padding: 48px 16px;
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .ai-blog-hero__tagline {
    font-size: 24px;
  }

  .ai-blog-hero__description {
    font-size: 15px;
  }
}

/* ==========================================================================
   9.3 トップページの記事グリッドレイアウト
   デスクトップ: 2カラムグリッド + サイドバー右側
   タブレット: 2カラムグリッド、サイドバーなし
   モバイル: 1カラム、サイドバーはコンテンツ下
   Requirements: 5.2-5.5, 9.1-9.4
   ========================================================================== */

/* --- メインコンテンツとサイドバーのラッパー ---
   Cocoon のメインレイアウトコンテナをオーバーライド
*/
#content-in,
.content-in {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  padding: var(--spacing-lg) var(--spacing-md);
  gap: 32px;
  gap: var(--spacing-xl);
}

/* --- メインコンテンツエリア ---
   サイドバーの幅を差し引いた残りの幅を使用
*/
#main,
.main {
  flex: 1;
  min-width: 0;
}

/* --- 記事一覧グリッド ---
   Cocoon のエントリーカードリストを2カラムグリッドに変更
*/
.entry-card-wrap {
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
}

#list,
.list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  gap: var(--spacing-lg);
}

/* --- グリッド内のカードラッパー ---
   グリッドアイテムとしてマージンをリセット
*/
#list .entry-card-wrap,
.list .entry-card-wrap {
  margin-bottom: 0;
}

/* --- タブレット: 2カラムグリッド、サイドバーなし --- */
@media (min-width: 768px) and (max-width: 1023px) {
  #content-in,
  .content-in {
    flex-direction: column;
  }

  /* サイドバーをメインコンテンツ下に移動 */
  #sidebar,
  .sidebar {
    width: 100%;
    order: 2;
  }

  #main,
  .main {
    width: 100%;
    order: 1;
  }

  /* 2カラムグリッドを維持 */
  #list,
  .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- モバイル: 1カラム、サイドバーはコンテンツ下 --- */
@media (max-width: 767px) {
  #content-in,
  .content-in {
    flex-direction: column;
    padding: 16px 8px;
    padding: var(--spacing-md) var(--spacing-sm);
    gap: 24px;
    gap: var(--spacing-lg);
  }

  #main,
  .main {
    width: 100%;
    order: 1;
  }

  #sidebar,
  .sidebar {
    width: 100%;
    order: 2;
  }

  /* 1カラムに変更 */
  #list,
  .list {
    grid-template-columns: 1fr;
    gap: 16px;
    gap: var(--spacing-md);
  }
}

/* --- デスクトップ: メインコンテンツ + サイドバー 2カラム --- */
@media (min-width: 1024px) {
  #content-in,
  .content-in {
    flex-wrap: nowrap;
  }

  #main,
  .main {
    flex: 1;
    min-width: 0;
  }

  #sidebar,
  .sidebar {
    width: 336px;
    width: var(--sidebar-width);
    flex-shrink: 0;
  }
}


/* ==========================================================================
   10.1 Single Post Page のスタイル
   個別記事の全文表示ページ
   コンテンツ最大幅 780px、タイトル h1、メタ情報、アイキャッチ画像フル幅
   Cocoon クラス .article, .entry-title, .entry-content をオーバーライド
   Requirements: 7.1-7.4
   ========================================================================== */

/* --- 記事コンテナ ---
   最大幅 780px で読みやすい行長を確保
*/
.article {
  max-width: 780px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0;
  background-color: #FFFFFF;
  background-color: var(--md-surface);
}

/* --- 記事タイトル（h1） ---
   大きめフォントサイズ、太字、プライマリテキスト色
*/
.entry-title {
  font-size: 28px;
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.4;
  color: #212121;
  color: var(--md-text-primary);
  margin: 0 0 16px;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  border: none;
}

/* --- 記事メタ情報（公開日、更新日、著者名、カテゴリ） ---
   セカンダリテキスト色、小さめフォント、アイテム間にスペーシング
*/
.article-meta,
.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  gap: var(--spacing-md);
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
  font-size: 14px;
  color: #757575;
  color: var(--md-text-secondary);
  padding-bottom: 16px;
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- メタ情報内の個別アイテム --- */
.article-meta .post-date,
.article-meta .post-update,
.article-meta .post-author,
.article-meta .entry-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  gap: var(--spacing-xs);
  color: #757575;
  color: var(--md-text-secondary);
}

/* --- アイキャッチ画像 ---
   コンテンツ幅いっぱいに表示、角丸
*/
.eye-catch {
  margin-bottom: 32px;
  margin-bottom: var(--spacing-xl);
  border-radius: 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.eye-catch img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 記事本文コンテンツ ---
   行間、段落間のスペーシング、見出しスタイル
*/
.entry-content {
  font-size: 16px;
  font-size: var(--font-size-base);
  line-height: 1.8;
  line-height: var(--line-height-base);
  color: #212121;
  color: var(--md-text-primary);
}

/* --- 記事本文内の見出し ---
   セクション区切りとして上部にマージン
*/
.entry-content h2 {
  font-size: 24px;
  font-size: var(--font-size-h2);
  margin-top: 48px;
  margin-top: var(--spacing-2xl);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  padding-bottom: 8px;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid #1565C0;
  border-bottom: 2px solid var(--md-primary);
}

.entry-content h3 {
  font-size: 20px;
  font-size: var(--font-size-h3);
  margin-top: 32px;
  margin-top: var(--spacing-xl);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
  padding-left: 12px;
  border-left: 3px solid #1565C0;
  border-left: 3px solid var(--md-primary);
}

.entry-content h4 {
  font-size: 18px;
  font-size: var(--font-size-h4);
  margin-top: 24px;
  margin-top: var(--spacing-lg);
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
}

/* --- 記事本文内の画像 ---
   最大幅 100% でレスポンシブ対応
*/
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border-radius: var(--radius-sm);
}

/* --- 記事本文内のコードブロック ---
   背景色で区別、角丸
*/
.entry-content pre,
.entry-content code {
  background-color: #FAFAFA;
  background-color: var(--md-background);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.entry-content pre {
  padding: 16px;
  padding: var(--spacing-md);
  overflow-x: auto;
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
}

.entry-content code {
  padding: 2px 6px;
}

/* --- モバイル時の記事タイトル調整 --- */
@media (max-width: 767px) {
  .entry-title {
    font-size: 22px;
  }

  .article-meta,
  .entry-meta {
    gap: 8px;
    gap: var(--spacing-sm);
    font-size: 13px;
  }

  .entry-content h2 {
    font-size: 20px;
    margin-top: 32px;
    margin-top: var(--spacing-xl);
  }

  .entry-content h3 {
    font-size: 18px;
    margin-top: 24px;
    margin-top: var(--spacing-lg);
  }
}

/* ==========================================================================
   10.2 パンくずリストのスタイル
   タイトル上部に表示、Cocoon クラス .breadcrumb をオーバーライド
   Requirements: 7.6
   ========================================================================== */

/* --- パンくずリストコンテナ ---
   記事タイトル上部に配置、セカンダリテキスト色
*/
.breadcrumb {
  font-size: 13px;
  color: #757575;
  color: var(--md-text-secondary);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  padding: 8px 0;
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  gap: var(--spacing-xs);
}

/* --- パンくずリストのリンク ---
   プライマリカラー、ホバーで下線表示
*/
.breadcrumb a {
  color: #1565C0;
  color: var(--md-primary);
  text-decoration: none;
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: #1E88E5;
  color: var(--md-primary-light);
  text-decoration: underline;
}

/* --- パンくずリストの区切り文字 ---
   セカンダリテキスト色で表示
*/
.breadcrumb .sp {
  color: #757575;
  color: var(--md-text-secondary);
  margin: 0 2px;
}

/* --- 現在のページ（最後の項目） ---
   リンクなし、セカンダリテキスト色
*/
.breadcrumb span:last-child {
  color: #757575;
  color: var(--md-text-secondary);
}

/* ==========================================================================
   10.3 目次のスタイル
   Cocoon 内蔵目次機能（h2, h3 から自動生成）のカスタマイズ
   Cocoon クラス .toc をオーバーライド
   Requirements: 7.5, 13.4
   ========================================================================== */

/* --- 目次コンテナ ---
   背景色、角丸、パディング、上下マージン
*/
.toc {
  background-color: #FAFAFA;
  background-color: var(--md-background);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border-radius: var(--radius-md);
  padding: 24px;
  padding: var(--spacing-lg);
  margin-bottom: 32px;
  margin-bottom: var(--spacing-xl);
}

/* --- 目次タイトル ---
   太字、プライマリテキスト色
*/
.toc-title {
  font-size: 18px;
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: #212121;
  color: var(--md-text-primary);
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  text-align: center;
}

/* --- 目次リスト ---
   番号付きリスト、適切なインデント
*/
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}

.toc-list li {
  counter-increment: toc-counter;
  margin-bottom: 8px;
  margin-bottom: var(--spacing-sm);
  line-height: 1.6;
}

.toc-list li::before {
  content: counter(toc-counter) ". ";
  color: #1565C0;
  color: var(--md-primary);
  font-weight: 700;
}

/* --- 目次リンク ---
   プライマリテキスト色、ホバーでプライマリカラー
*/
.toc-list a {
  color: #212121;
  color: var(--md-text-primary);
  text-decoration: none;
  font-size: 15px;
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

.toc-list a:hover,
.toc-list a:focus {
  color: #1565C0;
  color: var(--md-primary);
}

/* --- ネストされた目次リスト（h3 レベル） ---
   インデントを追加
*/
.toc-list .toc-list {
  margin-top: 8px;
  margin-top: var(--spacing-sm);
  padding-left: 24px;
  padding-left: var(--spacing-lg);
  counter-reset: toc-sub-counter;
}

.toc-list .toc-list li::before {
  content: counter(toc-sub-counter, lower-alpha) ". ";
  counter-increment: toc-sub-counter;
}

/* ==========================================================================
   10.4 関連記事セクションのスタイル
   Cocoon 内蔵関連記事機能を Article Card スタイルで表示
   Cocoon クラス .related-entries をオーバーライド
   Requirements: 7.7, 13.5
   ========================================================================== */

/* --- 関連記事セクションコンテナ ---
   上部にセパレーター、適切なマージン
*/
.related-entries {
  margin-top: 48px;
  margin-top: var(--spacing-2xl);
  padding-top: 32px;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- 関連記事セクションタイトル ---
   太字、プライマリテキスト色
*/
.related-entry-heading {
  font-size: 24px;
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: #212121;
  color: var(--md-text-primary);
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
}

/* --- 関連記事リスト ---
   2カラムグリッドで Article Card スタイルを適用
*/
.related-entries .related-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 関連記事カード ---
   Article Card と同じスタイルを適用
*/
.related-entries .related-entry-card {
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  border-radius: 8px;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.related-entries .related-entry-card:hover {
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
}

/* --- 関連記事カードのリンク --- */
.related-entries .related-entry-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* --- 関連記事サムネイル ---
   16:9 アスペクト比
*/
.related-entries .related-entry-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.related-entries .related-entry-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 関連記事カードコンテンツ --- */
.related-entries .related-entry-content {
  padding: 16px;
  padding: var(--spacing-md);
}

/* --- 関連記事タイトル ---
   太字、最大2行
*/
.related-entries .related-entry-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #212121;
  color: var(--md-text-primary);
  margin: 0 0 8px;
  margin: 0 0 var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 関連記事の抜粋 --- */
.related-entries .related-entry-snippet {
  font-size: 13px;
  color: #757575;
  color: var(--md-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 関連記事のモバイル対応 ---
   1カラムに変更
*/
@media (max-width: 767px) {
  .related-entries .related-list {
    grid-template-columns: 1fr;
    gap: 16px;
    gap: var(--spacing-md);
  }
}


/* ==========================================================================
   11.1 Category Page のスタイル
   カテゴリ名 h1 見出し、カテゴリ説明テキスト、記事グリッド
   Cocoon クラス .archive, .archive-title をオーバーライド
   Requirements: 10.1-10.3
   ========================================================================== */

/* --- アーカイブページコンテナ ---
   トップページと同一のレイアウト構造を使用
*/
.archive {
  background-color: #FAFAFA;
  background-color: var(--md-background);
}

/* --- カテゴリ名 h1 見出し ---
   大きめフォント、プライマリテキスト色、下部にアクセントライン
*/
.archive-title {
  font-size: 28px;
  font-size: var(--font-size-h1);
  font-weight: 700;
  color: #212121;
  color: var(--md-text-primary);
  margin: 0 0 8px;
  margin: 0 0 var(--spacing-sm);
  padding-bottom: 16px;
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid #1565C0;
  border-bottom: 2px solid var(--md-primary);
  line-height: 1.4;
}

/* --- カテゴリ説明テキスト ---
   見出し下部に表示、セカンダリテキスト色
*/
.archive-description,
.archive .tax-description,
.category-description {
  font-size: 15px;
  line-height: 1.7;
  color: #757575;
  color: var(--md-text-secondary);
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
  padding: 0;
}

/* --- カテゴリページの記事グリッド ---
   トップページと同一の2カラムグリッドレイアウトを使用
   （9.3 で定義した #list, .list のスタイルが適用される）
*/

/* --- モバイル時のカテゴリ見出し調整 --- */
@media (max-width: 767px) {
  .archive-title {
    font-size: 22px;
  }
}

/* ==========================================================================
   11.2 ページネーションのスタイル
   Material Design 準拠のボタンスタイル
   Cocoon クラス .pagination をオーバーライド
   Requirements: 10.4
   ========================================================================== */

/* --- ページネーションコンテナ ---
   中央揃え、上部にマージン
*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--spacing-sm);
  margin-top: 32px;
  margin-top: var(--spacing-xl);
  padding: 16px 0;
  padding: var(--spacing-md) 0;
}

/* --- ページネーションリンク（共通） ---
   Material Design ボタンスタイル、角丸、トランジション
*/
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  padding: var(--spacing-sm) 12px;
  font-size: 14px;
  font-weight: 500;
  color: #212121;
  color: var(--md-text-primary);
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, color 200ms ease-in-out;
  transition: background-color var(--transition-default), box-shadow var(--transition-default), color var(--transition-default);
  cursor: pointer;
}

/* --- ページネーションリンクのホバー状態 ---
   エレベーション 1、背景色変化
*/
.pagination .page-numbers:hover {
  background-color: rgba(21, 101, 192, 0.08);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-1);
  color: #1565C0;
  color: var(--md-primary);
}

/* --- 現在のページ番号 ---
   プライマリカラー背景、白テキスト
*/
.pagination .page-numbers.current {
  background-color: #1565C0;
  background-color: var(--md-primary);
  color: #FFFFFF;
  border-color: #1565C0;
  border-color: var(--md-primary);
  font-weight: 700;
  cursor: default;
}

.pagination .page-numbers.current:hover {
  background-color: #1565C0;
  background-color: var(--md-primary);
  box-shadow: none;
  color: #FFFFFF;
}

/* --- 前へ・次へリンク ---
   テキストリンクスタイル
*/
.pagination .prev,
.pagination .next {
  font-weight: 500;
  color: #1565C0;
  color: var(--md-primary);
}

.pagination .prev:hover,
.pagination .next:hover {
  color: #1E88E5;
  color: var(--md-primary-light);
}

/* --- 省略記号（...） ---
   非インタラクティブ、セカンダリテキスト色
*/
.pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: #757575;
  color: var(--md-text-secondary);
  cursor: default;
  min-width: auto;
  padding: 8px 4px;
  padding: var(--spacing-sm) var(--spacing-xs);
}

.pagination .page-numbers.dots:hover {
  background: transparent;
  box-shadow: none;
  color: #757575;
  color: var(--md-text-secondary);
}

/* --- モバイル時のページネーション調整 --- */
@media (max-width: 767px) {
  .pagination {
    gap: 4px;
    gap: var(--spacing-xs);
  }

  .pagination .page-numbers {
    min-width: 36px;
    min-height: 44px;
    padding: 8px;
    padding: var(--spacing-sm);
    font-size: 13px;
  }
}

/* ==========================================================================
   11.3 カテゴリページのパンくずリストスタイル
   カテゴリ見出し上部に表示（10.2 で作成したスタイルを共有）
   Requirements: 10.5
   ========================================================================== */

/* --- カテゴリページのパンくずリスト ---
   10.2 で定義した .breadcrumb スタイルを共有
   カテゴリ見出し上部に配置されるよう追加調整
*/
.archive .breadcrumb,
.category .breadcrumb {
  margin-bottom: 16px;
  margin-bottom: var(--spacing-md);
  padding: 8px 0;
  padding: var(--spacing-sm) 0;
}

/* --- カテゴリページのパンくずリスト内のホームリンク ---
   アイコン付きホームリンクのスタイル
*/
.archive .breadcrumb .fa-home,
.category .breadcrumb .fa-home {
  margin-right: 4px;
  margin-right: var(--spacing-xs);
}


/* ==========================================================================
   13.1 サイドバーのスタイル
   幅 336px (--sidebar-width)、ウィジェット共通スタイル
   Cocoon クラス .sidebar, .widget をオーバーライド
   Requirements: 8.5, 13.3
   ========================================================================== */

/* --- サイドバーコンテナ ---
   デスクトップ時に幅 336px、フレックスボックスで縮小しない
*/
#sidebar,
.sidebar {
  width: 336px;
  width: var(--sidebar-width);
  flex-shrink: 0;
}

/* --- ウィジェット共通スタイル ---
   背景色 Surface、パディング、下マージン、角丸、エレベーション 1
*/
.sidebar .widget {
  background-color: #FFFFFF;
  background-color: var(--md-surface);
  padding: 24px;
  padding: var(--spacing-lg);
  margin-bottom: 24px;
  margin-bottom: var(--spacing-lg);
  border-radius: 8px;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
  box-shadow: var(--elevation-1);
}

/* --- 最後のウィジェットの下マージンを除去 --- */
.sidebar .widget:last-child {
  margin-bottom: 0;
}

/* --- ウィジェットタイトル共通スタイル ---
   太字、プライマリテキスト色、下部にアクセントライン
*/
.sidebar .widget h2,
.sidebar .widget h3,
.sidebar .widget-title {
  font-size: 18px;
  font-size: var(--font-size-h4);
  font-weight: 700;
  color: #212121;
  color: var(--md-text-primary);
  margin: 0 0 16px;
  margin: 0 0 var(--spacing-md);
  padding-bottom: 8px;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid #1565C0;
  border-bottom: 2px solid var(--md-primary);
  line-height: 1.4;
}

/* --- ウィジェット内リンク共通スタイル --- */
.sidebar .widget a {
  color: #212121;
  color: var(--md-text-primary);
  text-decoration: none;
  transition: color 200ms ease-in-out;
  transition: color var(--transition-default);
}

.sidebar .widget a:hover,
.sidebar .widget a:focus {
  color: #1565C0;
  color: var(--md-primary);
}

/* --- ウィジェット内リスト共通スタイル --- */
.sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .widget ul li {
  padding: 8px 0;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
  line-height: 1.6;
}

.sidebar .widget ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- モバイル時のサイドバー調整 ---
   フル幅に変更、ウィジェットのパディング縮小
*/
@media (max-width: 767px) {
  #sidebar,
  .sidebar {
    width: 100%;
  }

  .sidebar .widget {
    padding: 16px;
    padding: var(--spacing-md);
    margin-bottom: 16px;
    margin-bottom: var(--spacing-md);
  }
}

/* ==========================================================================
   13.2 サイドバーウィジェット個別スタイル
   検索、人気記事、カテゴリ、タグクラウドの各ウィジェット
   Requirements: 8.1-8.4
   ========================================================================== */

/* --- 検索ウィジェット (.widget-search) ---
   検索フォームのスタイリング
*/
.sidebar .widget-search .search-box,
.sidebar .widget-search form,
.sidebar .search-box {
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .widget-search input[type="text"],
.sidebar .widget-search input[type="search"],
.sidebar .search-edit {
  width: 100%;
  padding: 10px 16px;
  padding: 10px var(--spacing-md);
  font-size: 14px;
  color: #212121;
  color: var(--md-text-primary);
  background-color: #FAFAFA;
  background-color: var(--md-background);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
  min-height: 44px;
}

/* --- 検索フィールドのフォーカス状態 --- */
.sidebar .widget-search input[type="text"]:focus,
.sidebar .widget-search input[type="search"]:focus,
.sidebar .search-edit:focus {
  border-color: #1565C0;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.2);
  background-color: #FFFFFF;
  background-color: var(--md-surface);
}

/* --- 検索ボタン --- */
.sidebar .widget-search .search-submit,
.sidebar .search-submit {
  background-color: #1565C0;
  background-color: var(--md-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  padding: 10px var(--spacing-md);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  margin-left: 8px;
  margin-left: var(--spacing-sm);
  transition: background-color 200ms ease-in-out;
  transition: background-color var(--transition-default);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar .widget-search .search-submit:hover,
.sidebar .search-submit:hover {
  background-color: #1E88E5;
  background-color: var(--md-primary-light);
}

/* --- 人気記事ウィジェット (.popular-entry) ---
   トップ5表示、サムネイル + タイトルの横並びレイアウト
*/
.sidebar .popular-entry-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: background-color 200ms ease-in-out;
  transition: background-color var(--transition-default);
}

.sidebar .popular-entry-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- 人気記事サムネイル ---
   小さめの正方形サムネイル
*/
.sidebar .popular-entry-card .popular-entry-card-thumb,
.sidebar .popular-entry-card-thumb {
  width: 80px;
  min-width: 80px;
  height: 60px;
  border-radius: 4px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar .popular-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- 人気記事タイトル ---
   最大2行で切り詰め
*/
.sidebar .popular-entry-card .popular-entry-card-content,
.sidebar .popular-entry-card-content {
  flex: 1;
  min-width: 0;
}

.sidebar .popular-entry-card-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #212121;
  color: var(--md-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* --- 人気記事の順位バッジ --- */
.sidebar .popular-entry-card .popular-count,
.sidebar .popular-count {
  font-size: 12px;
  color: #757575;
  color: var(--md-text-secondary);
  margin-top: 4px;
  margin-top: var(--spacing-xs);
}

/* --- カテゴリウィジェット (.widget_categories) ---
   投稿数付きカテゴリリスト
*/
.sidebar .widget_categories ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar .widget_categories ul li a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- カテゴリの投稿数バッジ ---
   小さな丸いバッジで投稿数を表示
*/
.sidebar .widget_categories ul li .post-count,
.sidebar .widget_categories ul li .count {
  font-size: 12px;
  color: #757575;
  color: var(--md-text-secondary);
  background-color: #FAFAFA;
  background-color: var(--md-background);
  padding: 2px 8px;
  padding: 2px var(--spacing-sm);
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 8px;
  margin-left: var(--spacing-sm);
}

/* --- タグクラウドウィジェット (.tagcloud) ---
   タグをインラインで並べ、均一なスタイルを適用
*/
.sidebar .tagcloud,
.sidebar .widget .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  gap: var(--spacing-sm);
}

.sidebar .tagcloud a {
  display: inline-block;
  font-size: 13px !important;
  color: #212121;
  color: var(--md-text-primary);
  background-color: #FAFAFA;
  background-color: var(--md-background);
  padding: 4px 12px;
  padding: var(--spacing-xs) 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
  transition: background-color var(--transition-default), color var(--transition-default), border-color var(--transition-default);
  line-height: 1.6;
}

/* --- タグクラウドのホバー状態 ---
   プライマリカラーのアクセント
*/
.sidebar .tagcloud a:hover,
.sidebar .tagcloud a:focus {
  background-color: rgba(21, 101, 192, 0.08);
  color: #1565C0;
  color: var(--md-primary);
  border-color: #1565C0;
  border-color: var(--md-primary);
}

/* --- JavaScript 無効時のスティッキーサイドバーフォールバック ---
   JS が無効な場合は通常のスクロールで表示
*/
.no-js .sidebar,
.no-js #sidebar {
  position: static !important;
}

/* ==========================================================================
   14.1 リップルエフェクトの CSS フォールバック
   JavaScript 無効時は CSS のみのホバースタイルで動作
   Requirements: 12.5
   ========================================================================== */

/* --- リップルエフェクト用コンテナ ---
   overflow: hidden でリップルがはみ出さないようにする
*/
.md-ripple {
  position: relative;
  overflow: hidden;
}

/* --- リップルエフェクトのアニメーション ---
   JavaScript から動的に追加される .md-ripple__wave 要素
*/
.md-ripple__wave {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: md-ripple-animation 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes md-ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- JavaScript 無効時の CSS フォールバック ---
   ボタン・リンクにホバー時のビジュアルフィードバックを提供
*/
.no-js a:hover,
.no-js button:hover,
.no-js input[type="submit"]:hover {
  opacity: 0.85;
  transition: opacity 100ms ease-in-out;
}

/* --- ボタン・CTA のアクティブ状態フィードバック ---
   クリック時に即座にフィードバックを表示（CSS のみ）
*/
a:active,
button:active,
input[type="submit"]:active,
.ai-blog-hero__cta:active {
  transform: scale(0.98);
  transition: transform 50ms ease-in-out;
}


/* ==========================================================================
   15. 統合レスポンシブデザイン
   各コンポーネントセクションで定義済みのレスポンシブスタイルを補完する
   統合セクション。ここでは未定義の追加スタイルのみを記述する。
   ========================================================================== */

/* ==========================================================================
   15.1 モバイル（0-767px）向け統合メディアクエリ
   - ベースフォントサイズ 15px（Req 2.5）
   - 見出しサイズ比例縮小
   - タッチターゲット最小 44x44px（Req 9.5）
   - サイドバーをコンテンツ下に移動（9.3 で定義済み、ここでは補完のみ）
   Requirements: 2.5, 5.5, 9.1-9.2, 9.5
   ========================================================================== */

@media (max-width: 767px) {

  /* --- ベースフォントサイズを 15px に縮小 ---
     デスクトップ 16px → モバイル 15px（Req 2.5）
  */
  body {
    font-size: 15px;
  }

  /* --- 見出しサイズの比例縮小 ---
     デスクトップ比で約 80-85% に縮小
     h1: 28px → 22px（10.1, 11.1 で個別定義済み、ここでは汎用 h1 を設定）
     h2: 24px → 20px
     h3: 20px → 17px
     h4: 18px → 16px
  */
  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 17px;
  }

  h4 {
    font-size: 16px;
  }

  /* --- 全インタラクティブ要素のタッチターゲット最小 44x44px ---
     リンク、ボタン、入力要素にタッチ可能な最小サイズを確保（Req 9.5）
  */

  /* ナビゲーションリンク・メニューリンク */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* インライン要素内のリンクは display を上書きしない */
  p a,
  li a,
  .entry-content a,
  .breadcrumb a,
  .entry-card-title a,
  .toc-list a,
  .footer a,
  .footer-widget-area a,
  .copyright a,
  .related-entry-title a {
    display: inline;
    min-height: auto;
  }

  /* ブロックレベルのカードリンクは block を維持 */
  .entry-card-wrap,
  .related-entry-card a,
  .popular-entry-card {
    display: block;
    min-height: auto;
  }

  /* ボタン・送信ボタンのタッチターゲット */
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .btn,
  .wp-block-button__link {
    min-width: 44px;
    min-height: 44px;
  }

  /* フォーム入力要素のタッチターゲット */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* iOS ズーム防止 */
  }

  /* ページネーションのタッチターゲット（11.2 で部分定義済み、補完） */
  .pagination a,
  .pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* サイドバーウィジェット内リストリンクのタッチターゲット */
  .sidebar .widget ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* カテゴリウィジェットのリストアイテム */
  .sidebar .widget_categories ul li {
    min-height: 44px;
  }

  /* タグクラウドのタッチターゲット */
  .sidebar .tagcloud a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 目次リンクのタッチターゲット */
  .toc-list li {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* CTA ボタンのタッチターゲット */
  .ai-blog-hero__cta {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* フッターリストリンクのタッチターゲット */
  .footer-widget-area ul li a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* パンくずリストリンクのタッチターゲット */
  .breadcrumb {
    min-height: 44px;
  }

  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   15.2 タブレット（768-1023px）向け統合メディアクエリ
   - 2カラムカードグリッド、サイドバーなし（9.3 で定義済み、ここでは補完のみ）
   Requirements: 9.3
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* --- タブレット時のサイドバー非表示 ---
     サイドバーをコンテンツ下に移動し、視覚的に分離
     （9.3 で order 設定済み、ここではマージン調整を補完）
  */
  #sidebar,
  .sidebar {
    margin-top: 32px;
    margin-top: var(--spacing-xl);
    padding-top: 32px;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* --- タブレット時の関連記事グリッド ---
     2カラムを維持
  */
  .related-entries .related-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- タブレット時のフッターウィジェット ---
     2カラムグリッドに調整（デスクトップ3カラム → タブレット2カラム）
  */
  .footer-widget-area {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   15.3 デスクトップ（1024px+）向け統合メディアクエリ
   - メインコンテンツ + サイドバー 2カラムレイアウト（9.3 で定義済み、ここでは補完のみ）
   Requirements: 9.4
   ========================================================================== */

@media (min-width: 1024px) {

  /* --- デスクトップ時のサイドバー表示確保 ---
     サイドバーが確実に右側に表示されるよう補完
     （9.3 で基本定義済み、ここでは追加調整のみ）
  */
  #sidebar,
  .sidebar {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* --- デスクトップ時のフッターウィジェット ---
     3カラムグリッドを確保（6.1 で定義済み、明示的に補完）
  */
  .footer-widget-area {
    grid-template-columns: repeat(3, 1fr);
  }

  /* --- デスクトップ時の関連記事グリッド ---
     2カラムを維持
  */
  .related-entries .related-list {
    grid-template-columns: repeat(2, 1fr);
  }
}