/*
  Skin Name: macemulator editorial
  Description: macemulator.tech 専用オリジナルスキン。Apple 風ミニマル・テックをベースに、余白の広いエディトリアル設計。ロゴのブルー(#0A84FF)とニアブラック(#1D1D1F)を基調とし、ヘアライン中心の静かなUIで読みやすさを最優先しています。
  Skin URI: https://macemulator.tech/
  Author: macemulator
  Author URI: https://macemulator.tech/
  Screenshot URI: /wp-content/themes/cocoon-child-master/skins/macemulator-editorial/images/screenshot.png
  Version: 1.0.0
  Priority: 1000000000
*/

/* ============================================================
   目次
   ------------------------------------------------------------
   00. デザイントークン（CSS変数）
   01. Cocoon 標準変数の上書き
   02. ベース / タイポグラフィ
   03. レイアウト（wrap / content / main / sidebar）
   04. ヘッダー / ロゴ / キャッチフレーズ
   05. グローバルナビ
   06. モバイルボタン / ドロワーメニュー
   07. パンくずリスト
   08. 記事一覧（エントリーカード）
   09. カテゴリーラベル / タグ
   10. アイキャッチ / 記事ヘッダー
   11. 本文タイポグラフィ（h2-h4 / p / a / list / table / quote / code）
   12. 目次（TOC）
   13. Cocoon パーツ（ボックス / 吹き出し / ボタン / FAQ / タイムライン）
   14. 記事フッター / SNS / プロフィール
   15. 関連記事 / 前後ナビ
   16. ページネーション
   17. サイドバー / ウィジェット / 検索
   18. 広告エリア
   19. フッター
   20. 404 / 検索結果なし
   21. レスポンシブ
   22. アクセシビリティ / 印刷
   ============================================================ */


/* ============================================================
   00. デザイントークン（CSS変数）
   ------------------------------------------------------------
   ロゴ・ファビコンから抽出した値を単一の情報源にしています。
   配色を変えたいときは原則このブロックだけを編集してください。
   ============================================================ */
:root {
  /* --- ブランドカラー（ロゴ／ファビコンから抽出） --- */
  --me-blue: #0a84ff;        /* ロゴアイコンのブルー。面・アクセント用 */
  --me-blue-link: #0062cc;   /* 文字色として使うブルー（白背景でコントラスト比 5.8:1） */
  --me-blue-deep: #0058b9;   /* ホバー／アクティブ（6.8:1） */
  --me-blue-tint: #eaf3ff;   /* 極薄ブルー。選択面・強調面 */
  --me-blue-tint-2: #f5f9ff; /* さらに薄いブルー。広い面用 */

  /* --- インク（テキスト）--- */
  --me-ink: #1d1d1f;         /* 本文・見出し（16.8:1） */
  --me-ink-2: #515154;       /* 副次テキスト（7.9:1） */
  --me-ink-3: #6e6e73;       /* メタ情報（5.1:1） */
  --me-ink-4: #86868b;       /* 装飾・大きい文字のみ（3.6:1） */

  /* --- サーフェス / 罫線 --- */
  --me-bg: #ffffff;          /* サイト背景 */
  --me-surface: #ffffff;     /* カード・記事の面 */
  --me-surface-2: #f5f5f7;   /* 沈んだ面（ページ背景・コードブロック） */
  --me-surface-3: #fafafc;   /* ごく浅く沈んだ面 */
  --me-line: #d2d2d7;        /* 標準のヘアライン */
  --me-line-soft: #e8e8ed;   /* さらに淡いヘアライン */

  /* --- 角丸（控えめな2段階のみ） --- */
  --me-radius-s: 6px;        /* ボタン・ラベル・入力欄 */
  --me-radius-m: 10px;       /* カード・画像・大きな面 */

  /* --- 影（ほぼ使わない。使う場合も極薄） --- */
  --me-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --me-shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .08);

  /* --- 余白スケール（4px グリッド） --- */
  --me-space-1: 4px;
  --me-space-2: 8px;
  --me-space-3: 12px;
  --me-space-4: 16px;
  --me-space-5: 24px;
  --me-space-6: 32px;
  --me-space-7: 48px;
  --me-space-8: 64px;
  --me-space-9: 96px;

  /* --- タイポグラフィ ---
     欧文フォントを先に置き、日本語はフォールバックで拾う構成。
     日英2言語（Polylang）運用のため、英語ページでは -apple-system /
     Segoe UI が、日本語ページでは Hiragino Sans が自然に選ばれます。 */
  --me-font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter",
    "Helvetica Neue", Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  /* 見出し用。欧文は同じ系統で、字面を締めて見せる */
  --me-font-display: var(--me-font-sans);
  /* 等幅：コード・キー表記・スペック表 */
  --me-font-mono:
    "SF Mono", "SFMono-Regular", ui-monospace, "Menlo", "Consolas",
    "Roboto Mono", monospace;

  --me-fs-body: 17px;        /* 本文サイズ（PC） */
  --me-lh-body: 1.9;         /* 和文の可読行間 */
  --me-lh-tight: 1.45;       /* 見出しの行間 */
  --me-tracking: .01em;      /* 和文の軽いトラッキング */

  /* --- モーション --- */
  --me-ease: cubic-bezier(.4, 0, .2, 1);
  --me-dur: .2s;

  /* --- レイアウト --- */
  --me-measure: 44em;        /* 本文の最大行長の目安 */
}


/* ============================================================
   01. Cocoon 標準変数の上書き
   ------------------------------------------------------------
   Cocoon 本体は :root のカスタムプロパティで配色・角丸を決めています。
   ここを差し替えるだけで、個別セレクタを書かずに大半のパーツ
   （ブロックエディタの装飾類を含む）がブランド配色に揃います。
   ＝ !important を使わずに済ませるための土台。
   ============================================================ */
:root {
  --cocoon-text-color: var(--me-ink);
  --cocoon-pallid-text-color: var(--me-ink-3);
  --cocoon-x-pallid-text-color: var(--me-ink-4);
  --cocoon-black-color: var(--me-ink);
  --cocoon-white-color: var(--me-surface);

  /* 罫線まわりをすべてヘアライン基調に */
  --cocoon-basic-border-color: var(--me-line);
  --cocoon-box-border-color: var(--me-line);
  --cocoon-thin-color: var(--me-line);
  --cocoon-x-thin-color: var(--me-line-soft);
  --cocoon-xx-thin-color: var(--me-surface-2);
  --cocoon-xxx-thin-color: var(--me-surface-3);
  --cocoon-middle-thickness-color: var(--me-ink-4);
  --cocoon-light-grey-color: var(--me-line);
  --cocoon-grey-color: var(--me-ink-4);
  --cocoon-dark-grey-color: var(--me-ink-2);
  /* 立体的な3D枠線は使わないので、単色ヘアラインに潰す */
  --cocoon-three-d-border-colors: var(--me-line) var(--me-line) var(--me-line) var(--me-line);

  --cocoon-current-background-color: var(--me-blue-tint);
  --cocoon-select-background-color: var(--me-blue-tint);
  --cocoon-tab-label-color: var(--me-surface-2);
  --cocoon-tab-label-active-color: var(--me-ink);

  /* ブランドのブルーを Cocoon の青系に流し込む */
  --cocoon-blue-color: var(--me-blue-link);
  --cocoon-light-blue-color: var(--me-blue);
  --cocoon-indigo-color: var(--me-blue-deep);
  --cocoon-watery-blue-color: var(--me-blue-tint-2);

  /* 角丸は控えめに統一 */
  --cocoon-basic-border-radius: var(--me-radius-s);
  --cocoon-middle-border-radius: var(--me-radius-m);
  --cocoon-badge-border-radius: 3px;

  --cocoon-default-font: var(--me-font-sans);
  --cocoon-default-text-size: var(--me-fs-body);
  --cocoon-box-padding: var(--me-space-5);
}


/* ============================================================
   02. ベース / タイポグラフィ
   ============================================================ */

/* ページ全体の背景。記事面（白）との段差でカードを浮かせる */
body {
  background-color: var(--me-surface-2);
  color: var(--me-ink);
  font-family: var(--me-font-sans);
  font-size: var(--me-fs-body);
  line-height: var(--me-lh-body);
  letter-spacing: var(--me-tracking);
  /* 和欧混植の字間を自動調整（対応ブラウザのみ） */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 英語ページでは和文用のツメを外し、欧文本来のリズムに戻す */
html[lang^="en"] body {
  font-feature-settings: normal;
  letter-spacing: 0;
  line-height: 1.75;
}

/* リンクの基本。下線は残し、色だけでは伝えない（アクセシビリティ） */
a {
  color: var(--me-blue-link);
  text-decoration-color: rgba(10, 132, 255, .35);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--me-dur) var(--me-ease),
              text-decoration-color var(--me-dur) var(--me-ease);
}

a:hover {
  color: var(--me-blue-deep);
  text-decoration-color: currentColor;
}

/* カード等のブロックリンクは下線を出さない */
.a-wrap,
.a-wrap:hover {
  text-decoration: none;
}

/* 選択範囲もブランド色で */
::selection {
  background-color: var(--me-blue-tint);
  color: var(--me-ink);
}

/* 見出し共通のリセット。装飾は 11 章で個別に付ける */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--me-font-display);
  line-height: var(--me-lh-tight);
  letter-spacing: -.005em;
  color: var(--me-ink);
}

/* 画像は常に角丸＋レスポンシブ。「画像を主役にする」ための土台 */
img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   03. レイアウト（wrap / content / main / sidebar）
   ------------------------------------------------------------
   Cocoon 既定値: .wrap 1256px / .main 860px / .sidebar 376px
   幅そのものは変えず、内側の余白と面の質感だけを再設計します。
   （幅を変更すると Cocoon 設定の生成CSSと競合するため）
   ============================================================ */

/* コンテンツ全体の上下に広い余白を取り、雑誌的な間を作る */
.content {
  margin-top: var(--me-space-7);
  margin-bottom: var(--me-space-8);
}

/* 記事面：白＋ヘアライン。影は使わず段差で分離する */
.main {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  padding: var(--me-space-8) var(--me-space-7);
}

/* サイドバー：主役ではないので枠線なし・背景も透過に近づける */
.sidebar {
  background-color: transparent;
  border: 0;
  padding: 0;
}

/* 1カラム時は本文の行長が伸びすぎないよう内側で絞る */
.no-sidebar .main {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   04. ヘッダー / ロゴ / キャッチフレーズ
   ------------------------------------------------------------
   ロゴ（青アイコン＋ニアブラックのワードマーク）を最も目立たせたい
   ので、ヘッダーは白・低い高さ・下端ヘアラインのみに徹します。
   ============================================================ */
.header-container {
  background-color: var(--me-surface);
  border-bottom: 1px solid var(--me-line-soft);
}

.header-container-in {
  background-color: transparent;
}

.header {
  background-color: transparent;
}

/* ロゴ帯の高さを抑え、左右に十分な余白 */
.header-in {
  padding: var(--me-space-5) var(--me-space-5);
}

/* ロゴ画像は最大44pxに抑える（Apple のナビ高に近い密度） */
.logo-image img,
.logo-header img {
  max-height: 44px;
  width: auto;
}

/* テキストロゴを使う場合もワードマークの字面に寄せる */
.logo-text,
.site-name-text {
  font-family: var(--me-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.site-name-text-link,
.site-name-text-link:hover {
  color: var(--me-ink);
  text-decoration: none;
}

/* キャッチフレーズは主張させない */
.tagline {
  color: var(--me-ink-3);
  font-size: 13px;
  letter-spacing: .02em;
  margin-top: var(--me-space-2);
}


/* ============================================================
   05. グローバルナビ
   ------------------------------------------------------------
   バーの塗りはやめ、白背景＋下線インジケーターに。
   「情報が整理されて見える」ことを優先しています。
   ============================================================ */
.navi {
  background-color: var(--me-surface);
}

.navi-in {
  padding: 0 var(--me-space-5);
}

.navi-in > ul {
  justify-content: flex-start;
  gap: var(--me-space-1);
}

.navi-in > ul > li {
  width: auto;
  line-height: 1;
}

.navi-in > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--me-space-4);
  color: var(--me-ink-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--me-dur) var(--me-ease);
}

/* 下線インジケーター。ホバー・現在地で伸びる（背景塗りは使わない） */
.navi-in > ul > li > a::after {
  content: "";
  position: absolute;
  left: var(--me-space-4);
  right: var(--me-space-4);
  bottom: 0;
  height: 2px;
  background-color: var(--me-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--me-dur) var(--me-ease);
}

.navi-in > ul > li > a:hover {
  background-color: transparent;
  color: var(--me-ink);
}

.navi-in > ul > li > a:hover::after,
.navi-in > ul > li.current-menu-item > a::after,
.navi-in > ul > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-menu-ancestor > a {
  color: var(--me-ink);
  background-color: transparent;
}

/* メニュー説明文はごく小さく */
.navi-in > ul > li > a .caption-wrap .item-description {
  color: var(--me-ink-4);
  font-size: 11px;
}

/* ドロップダウン：白いカード。派手な影は使わない */
.navi-in > ul li ul {
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  box-shadow: var(--me-shadow);
  overflow: hidden;
  padding: var(--me-space-1) 0;
  background-color: var(--me-surface);
}

.navi-in > ul li ul li a {
  background-color: transparent;
  color: var(--me-ink-2);
  font-size: 14px;
  line-height: 1.5;
  padding: var(--me-space-3) var(--me-space-4);
  border: 0;
}

.navi-in > ul li ul li a:hover {
  background-color: var(--me-blue-tint);
  color: var(--me-ink);
}
/* ============================================================
   06. モバイルボタン / ドロワーメニュー
   ------------------------------------------------------------
   Cocoon はチェックボックス（#navi-menu-input 等）でドロワーを
   開閉するため、JS なしで CSS だけで見た目を作れます。
   ============================================================ */

/* ヘッダー下・フッター固定のボタン列 */
.mobile-menu-buttons,
.mobile-footer-menu-buttons {
  background-color: var(--me-surface);
  border-top: 1px solid var(--me-line-soft);
  border-bottom: 1px solid var(--me-line-soft);
}

.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button > label,
.mobile-footer-menu-buttons .menu-button > a,
.mobile-footer-menu-buttons .menu-button > label {
  color: var(--me-ink-2);
  background-color: transparent;
  border: 0;
  font-size: 10px;
  letter-spacing: .02em;
  transition: color var(--me-dur) var(--me-ease);
}

.mobile-menu-buttons .menu-button > a:hover,
.mobile-menu-buttons .menu-button > label:hover {
  color: var(--me-blue-link);
}

.mobile-menu-buttons .menu-button .menu-icon,
.mobile-footer-menu-buttons .menu-button .menu-icon {
  font-size: 20px;
}

/* ドロワー本体 */
.menu-content,
.search-menu-content,
.follow-menu-content,
.share-menu-content {
  background-color: var(--me-surface);
  color: var(--me-ink);
}

.menu-close-button {
  background-color: transparent;
  color: var(--me-ink-2);
  font-size: 20px;
}

.menu-close-button:hover {
  color: var(--me-ink);
}

/* ドロワー内メニュー項目：区切りはヘアラインのみ */
.menu-drawer {
  padding: var(--me-space-2) 0;
}

.menu-drawer li a {
  border-bottom: 1px solid var(--me-line-soft);
  color: var(--me-ink);
  font-size: 15px;
  font-weight: 500;
  padding: var(--me-space-4) var(--me-space-5);
  transition: background-color var(--me-dur) var(--me-ease);
}

.menu-drawer li a:hover {
  background-color: var(--me-surface-2);
}

/* 第2階層はインデントして淡く */
.menu-drawer li li a {
  color: var(--me-ink-2);
  font-size: 14px;
  font-weight: 400;
  padding-left: var(--me-space-7);
}

/* サイドバードロワー内のウィジェット見出し */
.sidebar-menu-content .widget {
  padding: 0 var(--me-space-5);
}


/* ============================================================
   07. パンくずリスト
   ------------------------------------------------------------
   位置情報なので最小限のトーンに。アイコンは残しつつ淡色。
   ============================================================ */
.breadcrumb {
  margin: 0 auto;
  padding: var(--me-space-5) var(--me-space-2) 0;
  color: var(--me-ink-3);
  font-size: 12px;
  letter-spacing: .02em;
}

.breadcrumb a,
.breadcrumb .breadcrumb-home a {
  color: var(--me-ink-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--me-blue-link);
  text-decoration: underline;
}

.breadcrumb .fa {
  color: var(--me-ink-4);
  margin-right: var(--me-space-1);
}

/* 区切りの「>」は詰めて軽く */
.breadcrumb .fa-angle-right {
  margin: 0 var(--me-space-1);
  opacity: .6;
}


/* ============================================================
   08. 記事一覧（エントリーカード）
   ------------------------------------------------------------
   サムネイルを大きく、テキストは静かに。「画像を主役にする」方針。
   Cocoon のカードは <a class="entry-card-wrap"> が全体を包む構造。
   ============================================================ */

/* 一覧の見出し（カテゴリー名など） */
.archive-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 0;
  background: none;
  padding: 0 0 var(--me-space-5);
  margin-bottom: var(--me-space-6);
  border-bottom: 1px solid var(--me-line-soft);
}

/* カード外枠：Cocoon 既定の枠線を消し、区切りは下ヘアラインのみ
   ※ Cocoon は「.ecb-entry-border .entry-card-wrap」で枠線を付けるため、
     同じ詳細度で打ち消す必要があります（!important は使わない） */
.entry-card-wrap,
.ecb-entry-border .entry-card-wrap {
  border: 0;
  border-radius: var(--me-radius-m);
  padding: var(--me-space-5);
  margin-bottom: var(--me-space-2);
  transition: background-color var(--me-dur) var(--me-ease);
}

.entry-card-wrap:hover {
  background-color: var(--me-surface-2);
}

/* リスト形式のとき、カード間に細い区切りを入れる */
.list .entry-card-wrap + .entry-card-wrap {
  border-top: 1px solid var(--me-line-soft);
  border-radius: 0;
}

/* サムネイル：角丸＋ヘアライン。白背景の画像でも輪郭が出る */
.entry-card-thumb,
.widget-entry-card-thumb,
.related-entry-card-thumb,
.carousel-entry-card-thumb,
.card-thumb {
  overflow: hidden;
  border-radius: var(--me-radius-m);
}

.entry-card-thumb img,
.related-entry-card-thumb img,
.widget-entry-card-thumb img {
  display: block;
  width: 100%;
  border-radius: var(--me-radius-m);
  border: 1px solid var(--me-line-soft);
  transition: transform .45s var(--me-ease);
}

/* ホバーでわずかに寄る程度。派手な動きは避ける */
.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-card-thumb img {
  transform: scale(1.03);
}

/* タイトル：一覧で一番強い要素 */
.entry-card-title,
.related-entry-card-title,
.widget-entry-card-title {
  color: var(--me-ink);
  font-family: var(--me-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -.005em;
  margin-bottom: var(--me-space-2);
  transition: color var(--me-dur) var(--me-ease);
}

.entry-card-wrap:hover .entry-card-title,
.a-wrap:hover .related-entry-card-title,
.a-wrap:hover .widget-entry-card-title {
  color: var(--me-blue-link);
}

/* スニペット：2〜3行で止め、視線をタイトルに戻す */
.entry-card-snippet,
.related-entry-card-snippet,
.widget-entry-card-snippet {
  color: var(--me-ink-3);
  font-size: 14px;
  line-height: 1.8;
}

/* メタ情報（日付・カテゴリー）は最小 */
.entry-card-meta,
.related-entry-card-meta {
  color: var(--me-ink-4);
  font-size: 12px;
  letter-spacing: .02em;
}

.entry-card-info .post-date,
.entry-card-info .post-update {
  color: var(--me-ink-4);
}

/* 先頭の大きいカード：見出しだけ一段大きく */
.ec-big-card-first .entry-card-title {
  font-size: 24px;
}

/* タイル／カラム表示時のカード間隔 */
.ect-tile-card .entry-card-wrap,
.ect-vertical-card .entry-card-wrap {
  padding: var(--me-space-3);
}

/* 「もっと見る」ボタン */
.list-more-button {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  border-radius: var(--me-radius-s);
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 500;
  padding: var(--me-space-3) var(--me-space-6);
  transition: background-color var(--me-dur) var(--me-ease),
              border-color var(--me-dur) var(--me-ease);
}

.list-more-button:hover {
  background-color: var(--me-surface-2);
  border-color: var(--me-ink-4);
}


/* ============================================================
   09. カテゴリーラベル / タグ
   ------------------------------------------------------------
   ピル型は使わず、角丸3pxの小さな矩形ラベルに統一。
   ============================================================ */
.cat-label {
  background-color: rgba(29, 29, 31, .82);
  border: 0;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 3px var(--me-space-2);
  line-height: 1.5;
  /* サムネイル上に重なるため、背景を半透明にして画像を殺さない */
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
}

/* Cocoon は「.eye-catch .cat-label」「.related-entry-card .cat-label」で
   個別に上書きしているため、同じ詳細度で揃え直す */
.eye-catch .cat-label,
.related-entry-card .cat-label {
  border: 0;
  font-size: 11px;
  padding: 3px var(--me-space-2);
  opacity: 1;
  background-color: rgba(29, 29, 31, .82);
}

/* 記事下・一覧のカテゴリー／タグリンク */
.entry-categories-tags .cat-link,
.entry-categories-tags .tag-link,
.entry-card-categorys .cat-link {
  background-color: var(--me-surface-2);
  border: 1px solid var(--me-line-soft);
  border-radius: 3px;
  color: var(--me-ink-2);
  font-size: 12px;
  padding: 2px var(--me-space-2);
  text-decoration: none;
  transition: background-color var(--me-dur) var(--me-ease),
              color var(--me-dur) var(--me-ease);
}

.entry-categories-tags .cat-link:hover,
.entry-categories-tags .tag-link:hover {
  background-color: var(--me-blue-tint);
  color: var(--me-blue-link);
}

/* タグクラウドも同じ見た目に揃える */
.tagcloud a {
  background-color: var(--me-surface-2);
  border: 1px solid var(--me-line-soft);
  border-radius: 3px;
  color: var(--me-ink-2);
  font-size: 12px !important; /* Cocoon がインラインでfont-sizeを出力するため、ここのみ上書きが必要 */
  padding: 3px var(--me-space-2);
  text-decoration: none;
}

.tagcloud a:hover {
  background-color: var(--me-blue-tint);
  color: var(--me-blue-link);
}


/* ============================================================
   10. アイキャッチ / 記事ヘッダー
   ------------------------------------------------------------
   タイトル → メタ → アイキャッチ の順に視線が流れるように、
   要素間の余白でリズムを作ります。
   ============================================================ */
.article-header {
  margin-bottom: var(--me-space-7);
}

/* 記事タイトル：本文中で最大のコントラスト */
.entry-title,
.article h1.entry-title {
  font-family: var(--me-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--me-ink);
  margin: 0 0 var(--me-space-4);
  padding: 0;
  border: 0;
  background: none;
}

/* 日付・タグ行 */
.date-tags {
  color: var(--me-ink-3);
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: var(--me-space-5);
}

.date-tags a {
  color: var(--me-ink-3);
  text-decoration: none;
}

.date-tags a:hover {
  color: var(--me-blue-link);
}

.read-time {
  color: var(--me-ink-4);
  font-size: 12px;
}

/* アイキャッチ：角丸＋ヘアライン。影は付けない */
.eye-catch-wrap {
  margin-bottom: var(--me-space-6);
}

.eye-catch {
  border-radius: var(--me-radius-m);
  overflow: hidden;
  border: 1px solid var(--me-line-soft);
}

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

.eye-catch-caption {
  background-color: rgba(29, 29, 31, .82);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px var(--me-space-2);
}
/* ============================================================
   11. 本文タイポグラフィ
   ------------------------------------------------------------
   Cocoon 既定の h2 は背景ベタ塗り、h3 は左7pxの太い線、h4 は上下
   2px罫線。いずれも「派手な装飾」に当たるため、すべて外して
   ウェイト・サイズ・余白だけで階層を作り直します。
   ============================================================ */

.entry-content {
  font-size: var(--me-fs-body);
  line-height: var(--me-lh-body);
  color: var(--me-ink);
}

.entry-content > p {
  margin: 0 0 1.6em;
}

/* --- H2：セクションの切れ目。上に大きな余白＋細い上罫線 --- */
.article h2 {
  background: none;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--me-line-soft);
  border-radius: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--me-ink);
  padding: var(--me-space-7) 0 0;
  margin: var(--me-space-8) 0 var(--me-space-5);
}

/* 記事の先頭がH2の場合は上の罫線・余白を出さない */
.entry-content > h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* --- H3：短い青のアクセントバーのみ。太い縦線は使わない --- */
.article h3 {
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--me-ink);
  padding: 0;
  margin: var(--me-space-7) 0 var(--me-space-4);
  position: relative;
  padding-left: var(--me-space-4);
}

.article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  bottom: .32em;
  width: 3px;
  border-radius: 2px;
  background-color: var(--me-blue);
}

/* --- H4：罫線なし。ウェイトとサイズだけで差をつける --- */
.article h4 {
  background: none;
  border: 0;
  border-top: 0;
  border-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--me-ink);
  padding: 0;
  margin: var(--me-space-6) 0 var(--me-space-3);
}

/* --- H5 / H6：さらに小さく、色で下げる --- */
.article h5 {
  font-size: 16px;
  font-weight: 600;
  color: var(--me-ink-2);
  border: 0;
  padding: 0;
  margin: var(--me-space-5) 0 var(--me-space-2);
}

.article h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--me-ink-3);
  letter-spacing: .04em;
  border: 0;
  padding: 0;
  margin: var(--me-space-5) 0 var(--me-space-2);
}

/* --- 本文中のリンク --- */
.entry-content a {
  color: var(--me-blue-link);
  text-decoration: underline;
  text-decoration-color: rgba(10, 132, 255, .4);
}

.entry-content a:hover {
  color: var(--me-blue-deep);
  text-decoration-color: currentColor;
}

/* --- 強調 --- */
.entry-content strong,
.entry-content b {
  font-weight: 600;
  color: var(--me-ink);
}

/* Cocoon のマーカー。蛍光ペン風の彩度は落とす */
.marker,
.marker-under {
  background: linear-gradient(transparent 62%, rgba(10, 132, 255, .22) 0);
}

.marker-red,
.marker-under-red {
  background: linear-gradient(transparent 62%, rgba(214, 45, 45, .18) 0);
}

/* --- リスト --- */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.6em;
  padding-left: 1.6em;
}

.entry-content li {
  margin-bottom: .6em;
  line-height: 1.85;
}

/* 入れ子リストは余白を詰める */
.entry-content li > ul,
.entry-content li > ol {
  margin: .6em 0 0;
}

/* マーカーをブランドカラーに */
.entry-content ul > li::marker {
  color: var(--me-blue);
}

.entry-content ol > li::marker {
  color: var(--me-ink-4);
  font-variant-numeric: tabular-nums;
}

/* --- 引用 --- */
.entry-content blockquote {
  background-color: transparent;
  border: 0;
  border-left: 2px solid var(--me-line);
  border-radius: 0;
  color: var(--me-ink-2);
  font-size: .96em;
  margin: var(--me-space-6) 0;
  padding: var(--me-space-1) 0 var(--me-space-1) var(--me-space-5);
}

/* Cocoon が入れる引用符アイコンは非表示（装飾過多を避ける） */
.entry-content blockquote::before,
.entry-content blockquote::after {
  content: none;
}

.entry-content blockquote cite {
  display: block;
  margin-top: var(--me-space-3);
  color: var(--me-ink-4);
  font-size: 13px;
  font-style: normal;
}

/* --- 表 ---
   エミュレータの対応表・スペック表が多いため、視認性を最優先。 */
.entry-content table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-s);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
  width: 100%;
  margin: var(--me-space-6) 0;
}

.entry-content th,
.entry-content td {
  border: 0;
  border-bottom: 1px solid var(--me-line-soft);
  padding: var(--me-space-3) var(--me-space-4);
  text-align: left;
  vertical-align: top;
}

.entry-content thead th {
  background-color: var(--me-surface-2);
  color: var(--me-ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* 行頭の見出しセル */
.entry-content tbody th {
  background-color: var(--me-surface-3);
  font-weight: 600;
}

.entry-content tbody tr:last-child th,
.entry-content tbody tr:last-child td {
  border-bottom: 0;
}

/* Cocoon 既定のゼブラ（奇数行の背景）は解除。
   ヘアラインだけで行を追える設計にし、面をうるさくしない */
.entry-content table tr:nth-of-type(2n+1) {
  background-color: transparent;
}

.entry-content tbody tr:hover td {
  background-color: var(--me-blue-tint-2);
}

/* 横スクロールのヒント表示（Cocoon 標準） */
.scrollable-table {
  border-radius: var(--me-radius-s);
}

/* --- コード --- */
.entry-content code {
  background-color: var(--me-surface-2);
  border: 1px solid var(--me-line-soft);
  border-radius: 4px;
  color: var(--me-ink);
  font-family: var(--me-font-mono);
  font-size: .88em;
  padding: .12em .4em;
}

.entry-content pre {
  background-color: var(--me-surface-2);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-s);
  padding: var(--me-space-5);
  font-family: var(--me-font-mono);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
}

.entry-content pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* キー表記（⌘Q など）。Mac の操作説明で多用する想定 */
.keyboard-key {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  box-shadow: none;
  color: var(--me-ink);
  font-family: var(--me-font-mono);
  font-size: .85em;
  padding: .1em .45em;
}

/* --- 画像・キャプション --- */
.entry-content img {
  border-radius: var(--me-radius-m);
}

.entry-content figure {
  margin: var(--me-space-6) 0;
}

.entry-content figcaption,
.wp-caption-dd,
.wp-block-image figcaption {
  color: var(--me-ink-3);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
  margin-top: var(--me-space-3);
}

/* 区切り線 */
.entry-content hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--me-line-soft);
  margin: var(--me-space-7) 0;
}


/* ============================================================
   12. 目次（TOC）
   ------------------------------------------------------------
   Cocoon 既定は display:table で内容幅。全幅の静かなパネルにします。
   ============================================================ */
.toc {
  display: block;
  width: 100%;
  background-color: var(--me-surface-3);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  padding: var(--me-space-5) var(--me-space-6);
  margin: var(--me-space-6) 0 var(--me-space-7);
  font-size: 15px;
}

.toc-title {
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  padding-bottom: var(--me-space-3);
  margin-bottom: var(--me-space-3);
  border-bottom: 1px solid var(--me-line-soft);
  cursor: pointer;
}

.toc .toc-list {
  line-height: 1.7;
}

.toc .toc-list > li {
  margin-bottom: var(--me-space-2);
}

.toc .toc-list a {
  color: var(--me-ink-2);
  text-decoration: none;
}

.toc .toc-list a:hover {
  color: var(--me-blue-link);
  text-decoration: underline;
}

/* 第1階層だけ少し強く、第2階層以下は淡く小さく */
.toc .toc-list > li > a {
  color: var(--me-ink);
  font-weight: 500;
}

.toc .toc-list ul,
.toc .toc-list ol {
  margin-top: var(--me-space-2);
  padding-left: 1.2em;
  font-size: 14px;
}

.toc .toc-list ul li,
.toc .toc-list ol li {
  margin-bottom: var(--me-space-1);
}

/* 番号のドット表現をブランド色に */
.toc .toc-list > li::marker {
  color: var(--me-blue);
}

/* 折りたたみボタン */
.toc-checkbox + .toc-content .toc-title::after {
  color: var(--me-ink-4);
}


/* ============================================================
   13. Cocoon パーツ（ボックス / 吹き出し / ボタン / FAQ / タイムライン）
   ------------------------------------------------------------
   ブロックエディタの装飾ブロック群。強い色面をやめ、
   「淡い面 + ヘアライン + 1色のアクセント」に統一します。
   ============================================================ */

/* --- 汎用ボックス（囲みボックス・アラート類） --- */
.blank-box,
.information-box,
.question-box,
.alert-box,
.memo-box,
.comment-box,
.common-icon-box,
.caption-box,
.label-box,
.tab-caption-box,
.primary-box,
.secondary-box,
.light-box,
.success-box,
.info-box,
.warning-box,
.danger-box,
.good-box,
.bad-box,
.ok-box,
.ng-box,
.profile-box,
.timeline-box {
  border-radius: var(--me-radius-m);
  border-width: 1px;
  padding: var(--me-space-5);
  margin: var(--me-space-6) 0;
  line-height: 1.85;
}

/* 情報系はブランドブルーの淡色で統一 */
.information-box,
.info-box,
.primary-box {
  background-color: var(--me-blue-tint-2);
  border-color: rgba(10, 132, 255, .25);
  color: var(--me-ink);
}

/* 注意・警告は最小限の彩度で */
.warning-box,
.question-box {
  background-color: #fffaf0;
  border-color: #f2dfb8;
}

.alert-box,
.danger-box,
.ng-box,
.bad-box {
  background-color: #fdf5f5;
  border-color: #ecd3d3;
}

.success-box,
.good-box,
.ok-box {
  background-color: #f3faf5;
  border-color: #cfe6d7;
}

/* ラベル付きボックスのラベル部（ピル型にしない） */
.caption-box-label,
.label-box-label,
.tab-caption-box-label,
.block-box-label {
  background-color: var(--me-ink);
  border-radius: var(--me-radius-s) var(--me-radius-s) 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: var(--me-space-2) var(--me-space-4);
}

.caption-box-content,
.label-box-content,
.tab-caption-box-content {
  border-radius: 0 0 var(--me-radius-s) var(--me-radius-s);
  border-color: var(--me-line-soft);
  padding: var(--me-space-5);
}

/* --- 吹き出し ---
   Mac のメッセージUIに近い、角丸控えめの静かな吹き出し。

   実装メモ：Cocoon の吹き出しは本体・枠線・三角すべてが
   --cocoon-custom-background-color / --cocoon-custom-border-color /
   --cocoon-custom-text-color の3変数で決まります。
   個々の色を直接書くと三角（::before / ::after）とズレるため、
   変数側を差し替えるのが正解です。 */
.speech-wrap {
  --cocoon-custom-background-color: var(--me-surface-2);
  --cocoon-custom-border-color: var(--me-line-soft);
  --cocoon-custom-text-color: var(--me-ink);
  margin: var(--me-space-6) 0;
  align-items: flex-start;
}

/* Cocoon 側が「div.speech-balloon」（要素＋クラス）で指定しているため、
   同じ形の詳細度で受ける */
div.speech-balloon {
  border-width: 1px;
  border-radius: var(--me-radius-m);
  font-size: 15px;
  line-height: 1.8;
  padding: var(--me-space-4) var(--me-space-5);
}

/* 白地・枠線のみのスタイル */
.sbs-line {
  --cocoon-custom-background-color: var(--me-surface);
  --cocoon-custom-border-color: var(--me-line);
  --cocoon-custom-text-color: var(--me-ink);
}

/* 右側の吹き出し。Cocoon 既定は LINE 風の緑なので、
   ブランドの淡いブルーに置き換える */
.sbp-r,
.sbs-line.sbp-r {
  --cocoon-custom-background-color: var(--me-blue-tint);
  --cocoon-custom-border-color: rgba(10, 132, 255, .28);
  --cocoon-custom-text-color: var(--me-ink);
}

/* 話者アイコン：円形＋ヘアライン */
.speech-icon img,
.speech-person img,
.speech-icon-image {
  border: 1px solid var(--me-line-soft);
  border-radius: 50%;
  box-shadow: none;
}

.speech-name {
  color: var(--me-ink-3);
  font-size: 11px;
  letter-spacing: .02em;
}

/* --- ボタン --- */
.btn,
.btn-wrap > a,
.wp-block-button__link {
  border-radius: var(--me-radius-s);
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  padding: var(--me-space-3) var(--me-space-6);
  text-decoration: none;
  transition: background-color var(--me-dur) var(--me-ease),
              border-color var(--me-dur) var(--me-ease),
              color var(--me-dur) var(--me-ease);
}

/* 主要ボタン：ブランドブルーのベタ塗り（白文字でコントラスト 5.8:1） */
.btn-blue,
.btn-wrap.btn-wrap-blue > a,
.wp-block-button__link {
  background-color: var(--me-blue-link);
  border: 1px solid var(--me-blue-link);
  color: #fff;
}

.btn-blue:hover,
.btn-wrap.btn-wrap-blue > a:hover,
.wp-block-button__link:hover {
  background-color: var(--me-blue-deep);
  border-color: var(--me-blue-deep);
  color: #fff;
  opacity: 1;
}

/* 副次ボタン：白地＋ヘアライン */
.btn-white,
.is-style-outline .wp-block-button__link {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  color: var(--me-ink);
}

.btn-white:hover,
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--me-surface-2);
  border-color: var(--me-ink-4);
}

/* 光沢アニメーションは使わない（方針：光沢を避ける） */
.btn-shine::before,
.btn-wrap-shine > a::before {
  content: none;
}

/* --- FAQ --- */
.faq-item {
  border-bottom: 1px solid var(--me-line-soft);
  padding: var(--me-space-4) 0;
}

.faq-question-label,
.faq-answer-label {
  background-color: transparent;
  border-radius: 3px;
  color: var(--me-blue-link);
  font-weight: 700;
}

.faq-answer-label {
  color: var(--me-ink-4);
}

.faq-question-content {
  color: var(--me-ink);
  font-weight: 600;
}

.faq-answer-content {
  color: var(--me-ink-2);
}

/* --- タイムライン --- */
.timeline-item::before {
  background-color: var(--me-line);
}

.timeline-item-label {
  color: var(--me-ink-3);
  font-size: 13px;
}

.timeline-item-title {
  color: var(--me-ink);
  font-weight: 600;
}

/* --- トグル / アコーディオン --- */
.toggle-wrap,
.is-style-accordion {
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-s);
  margin: var(--me-space-5) 0;
}

.toggle-button {
  background-color: var(--me-surface-3);
  border: 0;
  color: var(--me-ink);
  font-size: 15px;
  font-weight: 500;
  padding: var(--me-space-3) var(--me-space-4);
}

.toggle-content {
  border-top: 1px solid var(--me-line-soft);
  padding: var(--me-space-4);
}

/* --- ブログカード（内部リンク） --- */
.blogcard-wrap {
  margin: var(--me-space-6) 0;
}

.blogcard {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  box-shadow: none;
  padding: var(--me-space-4);
  transition: background-color var(--me-dur) var(--me-ease),
              border-color var(--me-dur) var(--me-ease);
}

.blogcard-wrap:hover .blogcard {
  background-color: var(--me-surface-3);
  border-color: var(--me-line);
}

.blogcard-label {
  background-color: var(--me-ink);
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 2px var(--me-space-2);
  border: 0;
}

.blogcard-title {
  color: var(--me-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.blogcard-snippet {
  color: var(--me-ink-3);
  font-size: 13px;
}

.blogcard-thumbnail img {
  border-radius: var(--me-radius-s);
}

.blogcard-footer,
.blogcard-site {
  color: var(--me-ink-4);
  font-size: 12px;
}
/* ============================================================
   14. 記事フッター / SNS / プロフィール
   ============================================================ */
.article-footer {
  border-top: 1px solid var(--me-line-soft);
  margin-top: var(--me-space-8);
  padding-top: var(--me-space-6);
}

/* SNSシェア：塗りボタンをやめ、白地＋ヘアラインのアイコンに */
.sns-share-buttons a,
.sns-follow-buttons a {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  border-radius: var(--me-radius-s);
  color: var(--me-ink-2);
  box-shadow: none;
  transition: border-color var(--me-dur) var(--me-ease),
              color var(--me-dur) var(--me-ease);
}

.sns-share-buttons a:hover,
.sns-follow-buttons a:hover {
  border-color: var(--me-ink-4);
  color: var(--me-ink);
  opacity: 1;
}

.sns-share .sns-share-message,
.sns-follow .sns-follow-message {
  color: var(--me-ink-4);
  font-size: 12px;
  letter-spacing: .04em;
  border: 0;
}

/* プロフィール（著者ボックス） */
.author-box {
  background-color: var(--me-surface-3);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  padding: var(--me-space-6);
  margin: var(--me-space-7) 0;
}

.author-box .author-thumb img,
.author-thumb img {
  border: 1px solid var(--me-line-soft);
  border-radius: 50%;
}

.author-name,
.author-widget-name {
  color: var(--me-ink);
  font-size: 15px;
  font-weight: 600;
}

.author-description {
  color: var(--me-ink-2);
  font-size: 14px;
  line-height: 1.8;
}

/* CTA ボックス */
.cta-box {
  background-color: var(--me-blue-tint-2);
  border: 1px solid rgba(10, 132, 255, .25);
  border-radius: var(--me-radius-m);
  padding: var(--me-space-6);
}

.cta-heading {
  color: var(--me-ink);
  font-size: 18px;
  font-weight: 600;
}


/* ============================================================
   15. 関連記事 / 前後ナビ
   ============================================================ */
.related-entries {
  border-top: 1px solid var(--me-line-soft);
  margin-top: var(--me-space-7);
  padding-top: var(--me-space-6);
}

.related-entry-heading,
.related-entry-main-heading {
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  border: 0;
  padding: 0;
  margin-bottom: var(--me-space-5);
}

.related-entry-card-wrap {
  border: 0;
  border-radius: var(--me-radius-s);
  padding: var(--me-space-3);
  transition: background-color var(--me-dur) var(--me-ease);
}

.related-entry-card-wrap:hover {
  background-color: var(--me-surface-2);
}

.related-entry-card-title {
  font-size: 15px;
  line-height: 1.6;
}

/* 前後の記事ナビ */
.pager-post-navi {
  border-top: 1px solid var(--me-line-soft);
  border-bottom: 1px solid var(--me-line-soft);
  margin: var(--me-space-7) 0;
}

.pager-post-navi a {
  border: 0;
  padding: var(--me-space-5) var(--me-space-4);
  transition: background-color var(--me-dur) var(--me-ease);
}

.pager-post-navi a:hover {
  background-color: var(--me-surface-2);
}

.prev-post,
.next-post {
  border: 0;
}

.prev-post-title,
.next-post-title {
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.prev-post .fa,
.next-post .fa {
  color: var(--me-ink-4);
}

.prev-post-thumb img,
.next-post-thumb img {
  border-radius: var(--me-radius-s);
  border: 1px solid var(--me-line-soft);
}


/* ============================================================
   16. ページネーション
   ------------------------------------------------------------
   数字を並べるだけの静かなページャ。現在地のみブランド色で塗る。
   ============================================================ */
.pagination .page-numbers {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-s);
  color: var(--me-ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  /* Cocoon は width:46px 固定。桁数に応じて伸びるよう auto に戻す */
  width: auto;
  min-width: 40px;
  height: 40px;
  line-height: 38px;
  margin: 0 3px;
  padding: 0 var(--me-space-2);
  transition: background-color var(--me-dur) var(--me-ease),
              border-color var(--me-dur) var(--me-ease);
}

.pagination .page-numbers:hover {
  background-color: var(--me-surface-2);
  border-color: var(--me-ink-4);
  color: var(--me-ink);
}

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

.pagination .dots {
  background: none;
  border: 0;
  color: var(--me-ink-4);
}

/* 「次のページ」ボタン */
.pagination-next-link {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  border-radius: var(--me-radius-s);
  color: var(--me-ink);
  font-size: 14px;
  font-weight: 500;
  padding: var(--me-space-3) var(--me-space-6);
}

.pagination-next-link:hover {
  background-color: var(--me-surface-2);
  border-color: var(--me-ink-4);
}

/* ページ内リンク（複数ページ記事） */
.pager-links a,
.pager-links > span {
  border-radius: var(--me-radius-s);
  border: 1px solid var(--me-line-soft);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   17. サイドバー / ウィジェット / 検索
   ------------------------------------------------------------
   サイドバーは「本文の邪魔をしない索引」。枠を持たせず、
   見出しは小さな全角キャップスで。
   ============================================================ */
.sidebar .widget {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line-soft);
  border-radius: var(--me-radius-m);
  padding: var(--me-space-5);
  margin-bottom: var(--me-space-5);
}

/* ウィジェット見出し：ベタ塗りをやめ、下ヘアラインのみ */
.sidebar h2,
.sidebar h3,
.sidebar .widget-title {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--me-line-soft);
  border-radius: 0;
  color: var(--me-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 0 0 var(--me-space-3);
  margin: 0 0 var(--me-space-4);
  text-align: left;
}

/* ウィジェット内リンクリスト */
.sidebar ul li a,
.widget ul li a {
  color: var(--me-ink-2);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
  transition: color var(--me-dur) var(--me-ease);
}

.sidebar ul li a:hover,
.widget ul li a:hover {
  color: var(--me-blue-link);
}

.sidebar ul li {
  border-bottom: 1px solid var(--me-line-soft);
  padding: var(--me-space-2) 0;
}

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

/* ウィジェットの記事カード
   （リンクの実クラスは .widget-entry-card-link / .a-wrap） */
.widget-entry-cards .a-wrap {
  border: 0;
  border-radius: var(--me-radius-s);
  padding: var(--me-space-2);
  transition: background-color var(--me-dur) var(--me-ease);
}

.widget-entry-cards .a-wrap:hover {
  background-color: var(--me-surface-2);
}

.widget-entry-card-title {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.widget-entry-card-info,
.widget-entry-card-pv {
  color: var(--me-ink-4);
  font-size: 11px;
}

/* --- 検索フォーム --- */
.search-box,
.search-form {
  border: 1px solid var(--me-line);
  border-radius: var(--me-radius-s);
  background-color: var(--me-surface);
  overflow: hidden;
  transition: border-color var(--me-dur) var(--me-ease),
              box-shadow var(--me-dur) var(--me-ease);
}

.search-box:focus-within,
.search-form:focus-within {
  border-color: var(--me-blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .18);
}

/* Cocoon はモバイル検索ドロワーを #search-menu-content .search-edit
   （ID を含む詳細度）で指定しているため、そこも併記して揃える */
.search-edit,
.search-edit:focus,
#search-menu-content .search-edit {
  background-color: transparent;
  border: 0;
  color: var(--me-ink);
  font-family: var(--me-font-sans);
  font-size: 15px;
  padding: var(--me-space-3) var(--me-space-4);
  outline: none;
  box-shadow: none;
}

.search-edit::placeholder {
  color: var(--me-ink-4);
}

.search-submit {
  background-color: transparent;
  border: 0;
  color: var(--me-ink-3);
  transition: color var(--me-dur) var(--me-ease);
}

.search-submit:hover {
  background-color: transparent;
  color: var(--me-blue-link);
}

/* 汎用のフォーム部品も同じトーンに（コメント欄など） */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
  background-color: var(--me-surface);
  border: 1px solid var(--me-line);
  border-radius: var(--me-radius-s);
  color: var(--me-ink);
  font-family: var(--me-font-sans);
  font-size: 15px;
  padding: var(--me-space-3);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--me-blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .18);
  outline: none;
}

/* 送信ボタン */
input[type="submit"],
.comment-btn {
  background-color: var(--me-blue-link);
  border: 1px solid var(--me-blue-link);
  border-radius: var(--me-radius-s);
  color: #fff;
  font-family: var(--me-font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: var(--me-space-3) var(--me-space-6);
  transition: background-color var(--me-dur) var(--me-ease);
}

input[type="submit"]:hover,
.comment-btn:hover {
  background-color: var(--me-blue-deep);
}

/* トップへ戻るボタン */
.go-to-top-button {
  background-color: rgba(29, 29, 31, .72);
  border-radius: var(--me-radius-s);
  color: #fff;
  box-shadow: none;
  transition: background-color var(--me-dur) var(--me-ease);
}

.go-to-top-button:hover {
  background-color: var(--me-ink);
}


/* ============================================================
   18. 広告エリア
   ------------------------------------------------------------
   「広告が悪目立ちしない」ための処理。
   本文と地続きに見せず、かつ主張もさせないため、
   上下に十分な余白と極薄のラベルだけを与えます。
   ============================================================ */
.ad-area {
  margin: var(--me-space-8) 0;
  padding: var(--me-space-5) 0;
  border-top: 1px solid var(--me-line-soft);
  border-bottom: 1px solid var(--me-line-soft);
  text-align: center;
}

.ad-label,
.ad-area .ad-label {
  color: var(--me-ink-4);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--me-space-2);
}

/* サイドバー内広告は枠を持たせない */
.sidebar .ad-area {
  border: 0;
  margin: var(--me-space-5) 0;
  padding: 0;
}

/* PRラベル */
.pr-label-s,
.pr-label-l {
  background-color: transparent;
  border: 1px solid var(--me-line);
  border-radius: 3px;
  color: var(--me-ink-4);
  font-size: 10px;
  letter-spacing: .06em;
  padding: 1px var(--me-space-1);
}


/* ============================================================
   19. フッター
   ------------------------------------------------------------
   ニアブラックの面で締める。ロゴのダーク版が映える背景。
   ============================================================ */
.footer {
  background-color: var(--me-ink);
  color: #d6d6da;
  border: 0;
}

.footer-in {
  padding: var(--me-space-8) var(--me-space-5) var(--me-space-6);
}

.footer a {
  color: #d6d6da;
  text-decoration: none;
  transition: color var(--me-dur) var(--me-ease);
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* フッターウィジェットの見出し */
.footer h2,
.footer h3,
.footer .widget-title {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 0 0 var(--me-space-2);
  margin-bottom: var(--me-space-4);
  text-align: left;
}

.footer .widget {
  background-color: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
}

.footer ul li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: var(--me-space-2) 0;
}

.footer ul li:last-child {
  border-bottom: 0;
}

/* フッターナビ（横並びリンク） */
.navi-footer-in > ul {
  gap: var(--me-space-5);
  justify-content: center;
}

.navi-footer-in > ul > li > a {
  color: #d6d6da;
  font-size: 13px;
  padding: var(--me-space-2) 0;
}

.navi-footer-in > ul > li > a:hover {
  background-color: transparent;
  color: #fff;
}

/* 最下部：ロゴ＋コピーライト */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  margin-top: var(--me-space-6);
  padding: var(--me-space-5) 0;
}

.footer-bottom-logo img {
  max-height: 28px;
  width: auto;
}

.copyright,
.source-org {
  color: #8e8e93;
  font-size: 12px;
  letter-spacing: .02em;
}


/* ============================================================
   20. 404 / 検索結果なし
   ============================================================ */
.not-found {
  padding: var(--me-space-9) var(--me-space-5);
  text-align: center;
  color: var(--me-ink-2);
}

.not-found .entry-title,
.article .entry-title + .not-found {
  margin-bottom: var(--me-space-4);
}

.not-found p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: var(--me-space-6);
}

/* 404 の検索フォームは中央に細く */
.not-found .search-box {
  max-width: 420px;
  margin: 0 auto var(--me-space-6);
  text-align: left;
}

/* 404 ページのタイトルは大きく、しかし静かに */
.error404 .entry-title {
  font-size: 28px;
  text-align: center;
}
/* ============================================================
   21. レスポンシブ
   ------------------------------------------------------------
   Cocoon が使うブレークポイントに合わせています。
     1023px 以下 … タブレット（サイドバーが下に回り込む）
      834px 以下 … 小型タブレット
      768px 以下 … スマートフォン（モバイルボタン表示）
      480px 以下 … 小型スマートフォン
   ============================================================ */

/* --- タブレット（〜1023px） --- */
@media screen and (max-width: 1023px) {
  .content {
    margin-top: var(--me-space-5);
    margin-bottom: var(--me-space-7);
  }

  .main {
    padding: var(--me-space-7) var(--me-space-6);
    border-radius: var(--me-radius-m);
  }

  /* サイドバーが本文下に回るので、上に余白を追加して分離 */
  .sidebar {
    margin-top: var(--me-space-7);
  }

  .entry-title,
  .article h1.entry-title {
    font-size: 30px;
  }

  .article h2 {
    font-size: 24px;
    padding-top: var(--me-space-6);
    margin-top: var(--me-space-7);
  }

  .article h3 {
    font-size: 20px;
  }
}

/* --- 小型タブレット（〜834px） --- */
@media screen and (max-width: 834px) {
  .header-in {
    padding: var(--me-space-4);
  }

  .navi-in {
    padding: 0 var(--me-space-4);
  }
}

/* --- スマートフォン（〜768px） ---
   縦画面では白い記事面を画面幅いっぱいに広げ、
   左右の余白を本文側で確保します（読書面を最大化）。 */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.85;
  }

  .content {
    margin-top: 0;
    margin-bottom: var(--me-space-6);
  }

  /* 角丸と枠線を外し、フルブリードの読書面に */
  .main {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: var(--me-space-6) var(--me-space-4) var(--me-space-7);
  }

  .no-sidebar .main {
    max-width: none;
  }

  .sidebar {
    margin-top: var(--me-space-6);
    padding: 0 var(--me-space-4);
  }

  .breadcrumb {
    padding: var(--me-space-4) var(--me-space-4) 0;
    font-size: 11px;
  }

  /* 記事タイトル */
  .entry-title,
  .article h1.entry-title {
    font-size: 25px;
    line-height: 1.45;
  }

  .article-header {
    margin-bottom: var(--me-space-6);
  }

  /* 見出し：余白を詰めつつ階層差は保つ */
  .article h2 {
    font-size: 21px;
    padding-top: var(--me-space-5);
    margin: var(--me-space-6) 0 var(--me-space-4);
  }

  .article h3 {
    font-size: 18px;
    margin: var(--me-space-5) 0 var(--me-space-3);
    padding-left: var(--me-space-3);
  }

  .article h4 {
    font-size: 16px;
    margin: var(--me-space-5) 0 var(--me-space-2);
  }

  /* アイキャッチ・画像はフルブリードで見せる */
  .eye-catch {
    border-radius: var(--me-radius-s);
  }

  /* カード：横並びのまま、サムネ比率を保つ */
  .entry-card-wrap {
    padding: var(--me-space-4) 0;
    border-radius: 0;
  }

  .entry-card-wrap + .entry-card-wrap {
    border-top: 1px solid var(--me-line-soft);
  }

  .entry-card-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .ec-big-card-first .entry-card-title {
    font-size: 19px;
  }

  .entry-card-snippet {
    font-size: 13px;
  }

  /* 目次：余白を詰める */
  .toc {
    padding: var(--me-space-4);
    font-size: 14px;
    border-radius: var(--me-radius-s);
  }

  .toc .toc-list ul,
  .toc .toc-list ol {
    font-size: 13px;
  }

  /* 表：横スクロール可能にし、文字を詰めすぎない */
  .entry-content table {
    font-size: 14px;
  }

  .entry-content th,
  .entry-content td {
    padding: var(--me-space-2) var(--me-space-3);
  }

  /* ボックス類の内側余白 */
  .blank-box,
  .information-box,
  .question-box,
  .alert-box,
  .memo-box,
  .comment-box,
  .common-icon-box,
  .caption-box,
  .label-box,
  .primary-box,
  .secondary-box,
  .success-box,
  .info-box,
  .warning-box,
  .danger-box,
  .good-box,
  .bad-box,
  .ok-box,
  .ng-box {
    padding: var(--me-space-4);
    margin: var(--me-space-5) 0;
  }

  .author-box {
    padding: var(--me-space-5);
  }

  /* ページネーション：指で押せるサイズを確保 */
  .pagination .page-numbers {
    min-width: 44px;
    height: 44px;
    line-height: 42px;
  }

  /* 広告：上下の余白を確保して本文と混ざらないように */
  .ad-area {
    margin: var(--me-space-7) 0;
  }

  /* フッター */
  .footer-in {
    padding: var(--me-space-7) var(--me-space-4) var(--me-space-5);
  }

  .navi-footer-in > ul {
    flex-direction: column;
    gap: 0;
  }

  .navi-footer-in > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    width: 100%;
    text-align: center;
  }
}

/* --- 小型スマートフォン（〜480px） --- */
@media screen and (max-width: 480px) {
  .entry-title,
  .article h1.entry-title {
    font-size: 22px;
  }

  .article h2 {
    font-size: 19px;
  }

  .main {
    padding: var(--me-space-5) var(--me-space-4) var(--me-space-6);
  }

  /* カードのサムネイルを少し小さく、タイトルの行数を確保 */
  .entry-card-thumb {
    width: 36%;
  }

  .entry-card-title {
    font-size: 15px;
  }

  .entry-card-snippet {
    display: none; /* 狭い画面ではタイトルに集中させる */
  }

  .logo-image img,
  .logo-header img {
    max-height: 34px;
  }
}


/* ============================================================
   22. アクセシビリティ / 印刷
   ============================================================ */

/* --- キーボードフォーカス ---
   マウス操作時は出さず、キーボード操作時のみリングを表示。
   ブランドブルーのリングで、どのパーツでも一貫させる。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--me-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- スキップリンク（Cocoon 標準） --- */
.skip-link:focus {
  background-color: var(--me-ink);
  color: #fff;
  border-radius: 0 0 var(--me-radius-s) 0;
  font-size: 14px;
  padding: var(--me-space-3) var(--me-space-4);
  z-index: 9999;
}

/* --- タップターゲット ---
   モバイルのボタン・メニューは最低44pxを確保（WCAG 2.5.5 参考）。 */
@media screen and (max-width: 768px) {
  .menu-drawer li a,
  .mobile-menu-buttons .menu-button > a,
  .mobile-menu-buttons .menu-button > label,
  .mobile-footer-menu-buttons .menu-button > a,
  .mobile-footer-menu-buttons .menu-button > label {
    min-height: 44px;
  }
}

/* --- モーション低減 ---
   視覚過敏・乗り物酔い対策。OS設定を尊重してアニメーションを止める。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important; /* ユーザー設定の尊重は上書き必須のため例外的に使用 */
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .entry-card-wrap:hover .entry-card-thumb img {
    transform: none;
  }
}

/* --- ハイコントラスト設定 --- */
@media (prefers-contrast: more) {
  :root {
    --me-ink-3: #4a4a4d;
    --me-ink-4: #5a5a5e;
    --me-line: #a1a1a6;
    --me-line-soft: #c7c7cc;
  }

  a {
    text-decoration-color: currentColor;
  }
}

/* --- 印刷 ---
   ナビ・広告・サイドバーを落とし、本文だけを紙に載せる。 */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.7;
  }

  .header-container,
  .navi,
  .sidebar,
  .ad-area,
  .sns-share,
  .sns-follow,
  .related-entries,
  .pager-post-navi,
  .pagination,
  .footer,
  .go-to-top,
  .mobile-menu-buttons,
  .mobile-footer-menu-buttons,
  .breadcrumb {
    display: none;
  }

  .main {
    border: 0;
    padding: 0;
    width: 100%;
  }

  /* リンク先URLを併記して、紙でも情報が失われないように */
  .entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }

  .article h2,
  .article h3,
  .article h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .entry-content table,
  .entry-content figure,
  .entry-content pre {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}