@charset "UTF-8";

/* =============================================================
   RITA-STYLE ブロックエディタ用テーマCSS（rita-blocks.css）
   VK Blocks 実機の class構造に合わせてテラコッタテイストで塗り直し
   commons-post.css と同じパレットで統一
   ・メイン #D16750（テラコッタ）
   ・薄ベージュ #faf5f4
   ・補助ベージュ #fff7ea
   ・文字 #333 / グレー #999
   ・ライン #e9e5e2
   最終更新: 2026-06-10 v2（VK Blocks実装に合わせて全面書き直し）
   ============================================================= */

:root {
  --rita-main: #D16750;
  --rita-main-deep: #b85440;
  --rita-bg-soft: #faf5f4;
  --rita-bg-warm: #fff7ea;
  --rita-text: #333;
  --rita-text-mute: #777;
  --rita-line: #e9e5e2;
  --rita-accent: #e0a948;

  /* VK Blocks のプライマリカラーを丸ごとテラコッタに上書き
     → vk_button / heading / 各ブロックの「Primary」選択が全部テラコッタになる */
  --wp--preset--color--vk-color-primary: #D16750;
  --wp--preset--color--vk-color-primary-dark: #b85440;
  --wp--preset--color--vk-color-primary-vivid: #e0664a;
}

/* ============================================================
   1. コアブロック：引用 / 区切り / インラインマーカー
   ============================================================ */

.wp-block-quote {
  position: relative;
  border-left: 4px solid var(--rita-main) !important;
  background-color: var(--rita-bg-soft);
  padding: 24px 28px 24px 52px;
  margin: 1.5em 0;
  font-style: normal;
  border-radius: 0 6px 6px 0;
}
.wp-block-quote::before {
  content: "\201C"; /* 左ダブルクォート */
  position: absolute;
  left: 14px;
  top: 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 1;
  color: var(--rita-main);
  opacity: 0.45;
  font-weight: 700;
}
.wp-block-quote p { font-style: normal; }
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--rita-text-mute);
  font-style: normal;
  text-align: right;
}
.wp-block-quote cite::before,
.wp-block-quote .wp-block-quote__citation::before {
  content: "— ";
}

/* プルクオート（is-style-large等） */
.wp-block-pullquote {
  background: var(--rita-bg-soft);
  border-top: 3px solid var(--rita-main);
  border-bottom: 3px solid var(--rita-main);
  padding: 24px 16px;
  margin: 2em 0;
  text-align: center;
}
.wp-block-pullquote blockquote { border: none; background: none; padding: 0; }

.wp-block-separator {
  border: none !important;
  border-top: 2px dotted var(--rita-main) !important;
  max-width: 80px;
  margin: 40px auto !important;
  opacity: 0.7;
}
.wp-block-separator.is-style-wide {
  max-width: 100%;
  border-top: 1px solid var(--rita-line) !important;
}

/* ============================================================
   1-2. コアブロック：リスト（ul / ol）
       commons-post.css の旧ルールは entry-body 限定のため
       エディタや wp-block-list には届かないので別途上書き
   ============================================================ */

/* 順序なし — テラコッタ●マーカー */
.wp-block-list,
ul.wp-block-list,
.entry-body ul,
.entry-content ul {
  list-style: none;
  padding-left: 0;
  margin: 1em 0 1.5em;
}
.wp-block-list > li,
ul.wp-block-list > li,
.entry-body ul > li,
.entry-content ul > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  line-height: 1.8;
  list-style: none;
}
.wp-block-list > li::before,
ul.wp-block-list > li::before,
.entry-body ul > li::before,
.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 9px;
  height: 9px;
  background: var(--rita-main);
  border-radius: 50%;
}

/* ネスト2段目以降は別マーカー（小さい◯） */
.wp-block-list ul li::before,
.entry-body ul ul li::before {
  background: transparent;
  border: 2px solid var(--rita-main);
  width: 8px;
  height: 8px;
}

/* 順序あり — 番号をテラコッタの丸数字風に */
ol.wp-block-list,
.entry-body ol,
.entry-content ol {
  list-style: none;
  padding-left: 0;
  counter-reset: rita-ol;
  margin: 1em 0 1.5em;
}
ol.wp-block-list > li,
.entry-body ol > li,
.entry-content ol > li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 10px;
  line-height: 1.8;
  counter-increment: rita-ol;
  list-style: none;
}
ol.wp-block-list > li::before,
.entry-body ol > li::before,
.entry-content ol > li::before {
  content: counter(rita-ol);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 26px;
  height: 26px;
  background: var(--rita-main);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ============================================================
   1-3. コアブロック：コード（インライン / ブロック / 整形済み）
   ============================================================ */

/* インラインコード */
code,
.wp-block-paragraph code,
.entry-body code {
  background: #f5efed;
  color: var(--rita-main-deep);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--rita-line);
}

/* ブロックエディタの「コード」ブロック */
.wp-block-code,
.wp-block-preformatted {
  background: #2b2424;
  color: #f3eae6;
  padding: 18px 22px;
  border-radius: 8px;
  border-left: 4px solid var(--rita-main);
  margin: 1.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
}
.wp-block-code code,
.wp-block-preformatted {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* シンタックスっぽい雰囲気の薄ハイライト */
.wp-block-code {
  position: relative;
}
.wp-block-code::before {
  content: "CODE";
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--rita-main);
  opacity: 0.7;
  font-weight: 700;
  font-family: "SFMono-Regular", Consolas, monospace;
}

/* キーボードキー風 <kbd> */
kbd {
  background: var(--rita-bg-soft);
  border: 1px solid var(--rita-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.88em;
  color: var(--rita-text);
}

/* ============================================================
   2. コアブロック：ボタン
   ============================================================ */

.wp-block-button .wp-block-button__link {
  background-color: var(--rita-main);
  color: #fff !important;
  border-radius: 6px;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: opacity .3s;
  box-shadow: 0 2px 0 var(--rita-main-deep);
}
.wp-block-button .wp-block-button__link:hover { opacity: .88; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--rita-main) !important;
  border: 2px solid var(--rita-main);
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--rita-main);
  color: #fff !important;
}

/* ============================================================
   3. コアブロック：表（wp-block-table）
      旧スクロール非対応で横にはみ出すのでスマホは横スクロール
   ============================================================ */

.wp-block-table {
  margin: 1.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp-block-table table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  font-size: 15px;
  border: 1px solid var(--rita-line) !important;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
}
/* ヘッダー：薄ベージュ背景 ＋ テラコッタ文字 ＋ テラコッタ下線で柔らかく */
.wp-block-table thead {
  background: var(--rita-bg-warm);
}
.wp-block-table thead th {
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  color: var(--rita-main);
  border: none !important;
  border-right: 1px solid var(--rita-line) !important;
  border-bottom: 2px solid var(--rita-main) !important;
}
.wp-block-table thead th:last-child {
  border-right: none !important;
}

/* ボディ：縦罫線も追加（最後の列は右ボーダー無し） */
.wp-block-table tbody td,
.wp-block-table tbody th {
  padding: 12px 16px;
  border-top: 1px solid var(--rita-line) !important;
  border-right: 1px solid var(--rita-line) !important;
  border-left: none !important;
  border-bottom: none !important;
}
.wp-block-table tbody td:last-child,
.wp-block-table tbody th:last-child {
  border-right: none !important;
}
.wp-block-table tbody tr:nth-child(odd) { background: var(--rita-bg-soft); }
.wp-block-table tbody tr:first-child td,
.wp-block-table tbody tr:first-child th { border-top: none !important; }

/* is-style-stripes（ストライプスタイル）でも同じ見た目に */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--rita-bg-soft);
}
.wp-block-table.is-style-stripes {
  border-bottom: none;
}

/* キャプション */
.wp-block-table figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--rita-text-mute);
  margin-top: 8px;
}

/* ============================================================
   4. VK Blocks：吹き出し（vk_balloon）
      実機クラス: .vk_balloon_content / position-left|right / type-speech|think
   ============================================================ */

/* 中身：色未指定（has-background なし）のときベージュに */
.vk_balloon .vk_balloon_content:not(.has-background) {
  background: var(--rita-bg-soft) !important;
}

/* speech 型のしっぽ：color未指定時にベージュへ */
.vk_balloon-position-left.vk_balloon-type-speech
  .vk_balloon_content:not(.has-text-color) .vk_balloon_content_before,
.vk_balloon-position-left.vk_balloon-type-speech
  .vk_balloon_content:not(.has-text-color) .vk_balloon_content_after {
  border-color: transparent var(--rita-bg-soft) transparent transparent !important;
}
.vk_balloon-position-right.vk_balloon-type-speech
  .vk_balloon_content:not(.has-text-color) .vk_balloon_content_before,
.vk_balloon-position-right.vk_balloon-type-speech
  .vk_balloon_content:not(.has-text-color) .vk_balloon_content_after {
  border-color: transparent transparent transparent var(--rita-bg-soft) !important;
}

/* think 型の吹き出し */
.vk_balloon-type-think .vk_balloon_content:not(.has-background),
.vk_balloon-type-think .vk_balloon_content:not(.has-background)
  .vk_balloon_content_before,
.vk_balloon-type-think .vk_balloon_content:not(.has-background)
  .vk_balloon_content_after {
  background: var(--rita-bg-soft) !important;
}

/* アイコン名キャプション */
.vk_balloon .vk_balloon_icon_name {
  color: var(--rita-text-mute);
  font-weight: 500;
}

/* ============================================================
   5. VK Blocks：FAQ
      実機：.vk_faq_title:before に "Q"、.vk_faq_content:before に "A"
   ============================================================ */

/* normal（線のみ） — Qをテラコッタ、Aをアクセントオレンジ */
.vk_faq .vk_faq_title:before { color: var(--rita-main) !important; }
.vk_faq .vk_faq_content:before { color: var(--rita-accent) !important; }

/* bgfill 系（塗り潰し丸/角/丸角） */
.is-style-vk_faq-bgfill-circle .vk_faq_title:before,
.is-style-vk_faq-bgfill-square .vk_faq_title:before,
.is-style-vk_faq-bgfill-rounded .vk_faq_title:before {
  background-color: var(--rita-main) !important;
}
.is-style-vk_faq-bgfill-circle .vk_faq_content:before,
.is-style-vk_faq-bgfill-square .vk_faq_content:before,
.is-style-vk_faq-bgfill-rounded .vk_faq_content:before {
  background-color: var(--rita-accent) !important;
}

/* border 系（枠線丸/角/丸角） */
.is-style-vk_faq-border-circle .vk_faq_title:before,
.is-style-vk_faq-border-square .vk_faq_title:before,
.is-style-vk_faq-border-rounded .vk_faq_title:before {
  border-color: var(--rita-main) !important;
  color: var(--rita-main) !important;
}
.is-style-vk_faq-border-circle .vk_faq_content:before,
.is-style-vk_faq-border-square .vk_faq_content:before,
.is-style-vk_faq-border-rounded .vk_faq_content:before {
  border-color: var(--rita-accent) !important;
  color: var(--rita-accent) !important;
}

/* FAQタイトル行に薄ベージュ背景（読みやすさ） */
.vk_faq .vk_faq_title {
  background: var(--rita-bg-soft);
  border-radius: 4px;
  padding: .9rem .9rem .9rem 3rem;
}
.vk_faq { border-bottom-color: var(--rita-line); }

/* ============================================================
   6. VK Blocks：Alert（vk_alert / .alert-*）
   ============================================================ */

.vk_alert,
.alert {
  border-radius: 8px;
  border-left-width: 5px;
  border-left-style: solid;
  padding: 16px 20px;
}

.alert-info {
  background-color: #f0f7fb !important;
  color: #2c5f7f !important;
  border-color: #4a8cb8 !important;
  border-left-color: #4a8cb8 !important;
}
.alert-success {
  background-color: #f1f7ef !important;
  color: #3e6e3e !important;
  border-color: #6aa86a !important;
  border-left-color: #6aa86a !important;
}
.alert-warning {
  background-color: var(--rita-bg-warm) !important;
  color: #6e5414 !important;
  border-color: var(--rita-accent) !important;
  border-left-color: var(--rita-accent) !important;
}
.alert-danger {
  background-color: var(--rita-bg-soft) !important;
  color: var(--rita-text) !important;
  border-color: var(--rita-main) !important;
  border-left-color: var(--rita-main) !important;
}

/* アイコン付きアラート */
.vk_alert.has-alert-icon > .vk_alert_content {
  border-left-color: currentColor;
}

/* ============================================================
   7. VK Blocks：Flow（ステップ／流れ）
      実機：.vk_flow_frame / _frame_text_title / _frame_text_content / _frame_image
   ============================================================ */

.vk_flow .vk_flow_frame {
  border: 2px solid var(--rita-line) !important;
  border-radius: 8px;
  background: #fff;
  padding: 20px 25px;
}
.vk_flow .vk_flow_frame_text_title {
  color: var(--rita-main);
  border-bottom: 1px dotted var(--rita-line);
  font-weight: 700;
}
.vk_flow .vk_flow_frame_text_content { color: var(--rita-text); }

/* 矢印アイコン色（VKデフォルトSVG変数を上書き） */
.vk_flow.vk_flow-arrow-on::after,
.vk_flow > .vk_flow_frame_arrow {
  filter: hue-rotate(0deg);
  opacity: 0.7;
}

/* ============================================================
   8. VK Blocks：Button（vk_button / .btn）
      :root で --wp--preset--color--vk-color-primary を上書き済みなので
      「プライマリカラー選択」だけで自動でテラコッタになる
      ここでは未指定時の規定色も整える
   ============================================================ */

.vk_button .vk_button_link.btn {
  border-radius: 6px;
  padding: .8em 2rem;
  font-weight: 700;
}
.vk_button .vk_button_link.btn:not(.has-background) {
  background-color: var(--rita-main);
  color: #fff;
  border-color: var(--rita-main);
}
.vk_button .vk_button_link.btn:not(.has-background):hover {
  background-color: var(--rita-main-deep);
  color: #fff;
  opacity: 1;
}

/* ============================================================
   9. VK Blocks：Icon Outer / Icon（vk_icons / vk_icon）
   ============================================================ */

.vk_icons .vk_icon { color: var(--rita-main); }
.vk_icon_frame { color: var(--rita-main); }

/* ============================================================
   10. VK Blocks：Heading（vk_heading）
       VKの見出しブロックがあれば
   ============================================================ */

.vk_heading_title,
.vk_heading .vk_heading_subtext {
  color: var(--rita-main);
}
.vk_heading_title { font-weight: 700; }

/* ============================================================
   11. VK Blocks：Border Box（ボーダーボックス）
       実機: .vk_borderBox_body に border、.vk_borderBox_title_container に色
   ============================================================ */

/* カラー未指定時：枠と文字色をテラコッタに */
.vk_borderBox:not([class*="vk_borderBox-color"]):not(.has-text-color) {
  color: var(--rita-main) !important;
}
.vk_borderBox:not([class*="vk_borderBox-color"]) .vk_borderBox_body {
  border-color: var(--rita-main) !important;
  border-radius: 6px;
}

/* tab/banner 型タイトル（カラー未指定時）の背景もテラコッタに */
.vk_borderBox:not([class*="vk_borderBox-color"]).is-style-vk_borderBox-style-solid-kado-tit-tab
  > .vk_borderBox_title_container:not(.has-background),
.vk_borderBox:not([class*="vk_borderBox-color"]).is-style-vk_borderBox-style-solid-round-tit-tab
  > .vk_borderBox_title_container:not(.has-background),
.vk_borderBox:not([class*="vk_borderBox-color"]).is-style-vk_borderBox-style-solid-kado-tit-banner
  > .vk_borderBox_title_container:not(.has-background) {
  background-color: var(--rita-main) !important;
  color: #fff !important;
}

/* iconFeature 型のアイコン丸 */
.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature
  > .vk_borderBox_title_container
  > .vk_borderBox_icon_border:not(.has-background) {
  background-color: var(--rita-main) !important;
}

/* ============================================================
   12. VK Blocks Pro：アコーディオン / タブ（あれば）
   ============================================================ */

.vk_accordion_target,
.vk_accordion_summary {
  background: var(--rita-bg-soft);
  border: 1px solid var(--rita-line);
  padding: 14px 20px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
}
.vk_accordion_body {
  padding: 16px 20px;
  border: 1px solid var(--rita-line);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.vk_tab_labels_label.vk_tab_labels_label-state-active,
.vk_tab_labels_label[aria-selected="true"] {
  color: var(--rita-main);
  border-bottom: 3px solid var(--rita-main);
}

/* ============================================================
   12-2. コアブロック：詳細（wp-block-details / details/summary）
        クリックで折りたためる補足ブロック
   ============================================================ */

.wp-block-details {
  margin: 1.5em 0;
  border: 1px solid var(--rita-line);
  border-left: 4px solid var(--rita-main);
  border-radius: 0 6px 6px 0;
  background: #fff;
  overflow: hidden;
}

.wp-block-details > summary {
  background: var(--rita-bg-soft);
  padding: 14px 50px 14px 18px;
  font-weight: 700;
  color: var(--rita-text);
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: background-color .2s;
}
.wp-block-details > summary::-webkit-details-marker {
  display: none; /* Chrome系のデフォルト▶印を消す */
}
.wp-block-details > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--rita-main);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s ease, background-color .2s;
}
.wp-block-details > summary:hover {
  background: #f3eae7;
}
.wp-block-details[open] > summary {
  border-bottom: 1px solid var(--rita-line);
}
.wp-block-details[open] > summary::after {
  content: "−";
  background: var(--rita-main-deep);
}

/* 本文側（summary以外の中身） */
.wp-block-details > *:not(summary) {
  padding: 16px 20px;
  margin: 0;
}
.wp-block-details > *:not(summary):not(:last-child) {
  padding-bottom: 0;
}
.wp-block-details > p:not(:last-child) {
  margin-bottom: .8em;
}

/* ネストしたブロックがある場合のレイアウト保持 */
.wp-block-details > .wp-block-group,
.wp-block-details > .wp-block-list,
.wp-block-details > ul,
.wp-block-details > ol {
  margin: 0;
  padding: 16px 20px;
}

/* ============================================================
   12-3. プラグイン：Easy Table of Contents（目次）
        設定 → Theme は「Custom」を選んでください。
        Custom にするとプラグイン側の色プリセットが切れて
        ここのCSSが当たります。
   ============================================================ */

#ez-toc-container {
  background: var(--rita-bg-soft) !important;
  border: 1px solid var(--rita-line) !important;
  border-left: 4px solid var(--rita-main) !important;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px !important;
  margin: 24px 0 36px !important;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* タイトル枠（「目次」と▼トグル） */
#ez-toc-container .ez-toc-title-container {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px dashed var(--rita-line) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#ez-toc-container p.ez-toc-title,
#ez-toc-container .ez-toc-title {
  color: var(--rita-main) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ez-toc-container p.ez-toc-title::before {
  content: "≡";
  font-size: 22px;
  line-height: 1;
  color: var(--rita-main);
}

/* トグルボタン */
#ez-toc-container a.ez-toc-toggle,
#ez-toc-container .ez-toc-title-toggle a {
  color: var(--rita-main) !important;
  background: #fff !important;
  border: 1px solid var(--rita-main) !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color .2s, color .2s;
}
#ez-toc-container a.ez-toc-toggle:hover,
#ez-toc-container .ez-toc-title-toggle a:hover {
  background: var(--rita-main) !important;
  color: #fff !important;
}

/* ===== 既存リスト装飾の完全打ち消し（最重要） =====
   commons-post.css の `.entry-body ul li::before` テラコッタ●が
   ETOCの目次内にも当たってしまうので、ID詳細度＋!important で完全消去 */
#ez-toc-container ul,
#ez-toc-container ol,
#ez-toc-container ul.ez-toc-list,
#ez-toc-container nav ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
#ez-toc-container li,
#ez-toc-container ul li,
#ez-toc-container ul > li,
#ez-toc-container nav ul li {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
  list-style: none !important;
  position: relative !important;
  background: none !important;
}
#ez-toc-container li::before,
#ez-toc-container ul li::before,
#ez-toc-container ul > li::before,
#ez-toc-container ol li::before,
#ez-toc-container nav ul li::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#ez-toc-container li::after,
#ez-toc-container ul li::after,
#ez-toc-container nav ul li::after {
  content: none !important;
  display: none !important;
}

/* ===== リンク色：青リンク（Lightning/Bootstrap）を完全上書き ===== */
#ez-toc-container a,
#ez-toc-container a:link,
#ez-toc-container a:visited,
#ez-toc-container a:active,
#ez-toc-container nav a,
#ez-toc-container ul a,
#ez-toc-container ul li a,
#ez-toc-container ul li > a,
#ez-toc-container ul.ez-toc-list a {
  color: var(--rita-text) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  padding: 4px 0 !important;
  line-height: 1.6 !important;
  background: none !important;
  border: none !important;
  transition: color .2s !important;
}
#ez-toc-container a:hover,
#ez-toc-container nav a:hover,
#ez-toc-container ul a:hover,
#ez-toc-container ul li a:hover {
  color: var(--rita-main) !important;
  text-decoration: underline !important;
}

/* ===== 階層（ネスト：h3など）===== */
#ez-toc-container ul ul {
  padding-left: 20px !important;
  margin: 4px 0 6px 0 !important;
  border-left: 1px dashed var(--rita-line) !important;
}
#ez-toc-container ul ul li {
  margin-bottom: 2px !important;
  padding-left: 12px !important;
}
#ez-toc-container ul ul a,
#ez-toc-container ul ul li a {
  font-size: 14px !important;
  color: var(--rita-text-mute) !important;
  font-weight: 400 !important;
}
#ez-toc-container ul ul a:hover {
  color: var(--rita-main) !important;
}

/* ===== Counter（連番）— ETOC が出す番号をテラコッタに ===== */
#ez-toc-container.counter-decimal ul.ez-toc-list a::before,
#ez-toc-container.counter-numeric ul.ez-toc-list a::before,
#ez-toc-container.counter-hierarchy ul.ez-toc-list a::before,
#ez-toc-container.counter-roman ul.ez-toc-list a::before,
#ez-toc-container.ez-toc-counter ul.ez-toc-list a::before {
  color: var(--rita-main) !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
}

/* スマホ対応 */
@media (max-width: 767px) {
  #ez-toc-container {
    padding: 16px 18px !important;
    margin: 20px 0 28px !important;
  }
  #ez-toc-container p.ez-toc-title { font-size: 16px !important; }
  #ez-toc-container a { font-size: 14px !important; }
  #ez-toc-container ul ul a { font-size: 13px !important; }
}

/* ============================================================
   13. その他：グループのカスタムスタイル
   ============================================================ */

.wp-block-group.is-style-rita-box,
.is-style-rita-box {
  background: var(--rita-bg-soft);
  border: 1px solid var(--rita-line);
  border-left: 4px solid var(--rita-main);
  padding: 20px 24px;
  border-radius: 0 6px 6px 0;
  margin: 1.5em 0;
}

/* インラインマーカー（再利用ブロック等で使う） */
.has-rita-marker-background-color {
  background: linear-gradient(transparent 60%, #ffe9a8 60%);
  padding: 0 2px;
}

/* ============================================================
   14-2. /blog/ アーカイブ：SWELL風カードグリッド
        構造: .postList > article.media > div.hentry > .media-left/.media-body
        PC 3列・タブレット 2列・スマホ 2列
   ============================================================ */

/* postList を grid 化 */
main.main-container .postList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 991.98px) {
  main.main-container .postList {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}
@media (max-width: 575.98px) {
  main.main-container .postList {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* article.media を「カード」化 — 常時薄シャドウで品質感UP */
main.main-container .postList article.media {
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--rita-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow .25s, transform .25s !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
main.main-container .postList article.media:hover {
  box-shadow: 0 10px 24px rgba(209, 103, 80, 0.15) !important;
  transform: translateY(-3px);
}

/* 内側 .hentry ラッパー：縦並びレイアウト */
main.main-container .postList article.media > div.hentry,
main.main-container .postList article.media > div[class*="post-"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* アイキャッチ画像：上に16:9で配置 */
main.main-container .postList article.media .media-left,
main.main-container .postList article.media .postList_thumbnail {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
  display: block !important;
}
main.main-container .postList article.media .media-left a,
main.main-container .postList article.media .postList_thumbnail a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
main.main-container .postList article.media .media-left img,
main.main-container .postList article.media .postList_thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform .4s ease !important;
}
main.main-container .postList article.media:hover .media-left img,
main.main-container .postList article.media:hover .postList_thumbnail img {
  transform: scale(1.05);
}

/* 本文ボディ */
main.main-container .postList article.media .media-body {
  padding: 16px 18px 18px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* メタ情報：日付＋カテゴリ */
main.main-container .postList article.media .entry-meta {
  font-size: 12px !important;
  color: var(--rita-text-mute) !important;
  margin: 0 0 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  order: 2; /* 抜粋の下、最下部へ */
  border-top: 1px dashed var(--rita-line);
  padding-top: 10px;
  margin-top: auto !important;
}
main.main-container .postList article.media .entry-meta .vcard,
main.main-container .postList article.media .entry-meta .author,
main.main-container .postList article.media .entry-meta .entry-meta_items_author {
  display: none !important; /* 著者は非表示 */
}
main.main-container .postList article.media .entry-meta .published,
main.main-container .postList article.media .entry-meta .entry-meta_updated {
  font-size: 12px !important;
  color: var(--rita-text-mute) !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button {
  background: var(--rita-bg-warm) !important;
  color: var(--rita-main) !important;
  border: 1px solid var(--rita-main) !important;
  font-size: 11px !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button:hover {
  background: var(--rita-main) !important;
  color: #fff !important;
}

/* タイトル — 2行省略でカード高さ均一化／h1装飾は打ち消し */
main.main-container .postList article.media .media-heading,
main.main-container .postList article.media h1.entry-title,
main.main-container .postList article.media h1.media-heading,
main.main-container .postList article.media h2.entry-title,
main.main-container .postList article.media h2.media-heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
  color: var(--rita-text) !important;
  order: 0; /* 本文の一番上 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 3 → 2 でカード高さ揃え */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* commons-post.css の `main h1` 装飾を完全打ち消し */
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  background: none !important;
}

/* アイキャッチ無しカードのプレースホルダ — 薄ベージュ＋RITA-STYLEのRS文字 */
main.main-container .postList article.media > div.hentry:not(:has(.media-left))::before,
main.main-container .postList article.media > div[class*="post-"]:not(:has(.media-left))::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--rita-bg-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'><rect width='200' height='90' fill='none'/><text x='100' y='52' text-anchor='middle' font-family='Zen Kaku Gothic New, sans-serif' font-size='22' font-weight='700' fill='%23D16750' letter-spacing='3'>RITA-STYLE</text><line x1='60' y1='62' x2='140' y2='62' stroke='%23D16750' stroke-width='1' opacity='0.5'/><text x='100' y='75' text-anchor='middle' font-family='Zen Kaku Gothic New, sans-serif' font-size='8' fill='%23D16750' letter-spacing='2' opacity='0.7'>PERSONAL GYM</text></svg>");
  background-size: 70% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--rita-line);
}
main.main-container .postList article.media .media-heading a,
main.main-container .postList article.media h1.entry-title a,
main.main-container .postList article.media h2.entry-title a {
  color: var(--rita-text) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
main.main-container .postList article.media:hover .media-heading a {
  color: var(--rita-main) !important;
}

/* 抜粋は非表示（要望：すっきり） */
main.main-container .postList article.media .media-body_excerpt,
main.main-container .postList article.media .media-body > p,
main.main-container .postList article.media a.media-body_excerpt {
  display: none !important;
}

/* 作成日時（published）は非表示、更新日時だけ残す */
main.main-container .postList article.media .entry-meta .published {
  display: none !important;
}

/* 「/ 最終更新日時 :」のラベル冗長なので「更新: 」に整形
   テクニック：親 font-size:0 で冗長テキストを消し、.updated だけ font-size 復活
   さらに ::before で「更新: 」を挿入 */
main.main-container .postList article.media .entry-meta .entry-meta_updated {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_updated .updated {
  font-size: 12px !important;
  color: var(--rita-text-mute) !important;
  letter-spacing: normal;
}
main.main-container .postList article.media .entry-meta .entry-meta_updated .updated::before {
  content: "更新: ";
  font-size: 12px;
  color: var(--rita-text-mute);
}

/* カード全体クリック化は home.php の JavaScript で実装（CSS::beforeはサイト全体に影響したため廃止） */
/* article.media にカーソルとホバーだけ視覚的に */
main.main-container .postList article.media {
  cursor: pointer;
}

/* ② メタ情報を SWELL風にシンプル並び（📅 日付　🏷 カテゴリ） */
/* entry-meta の border-top dashed を外してシンプル化 */
main.main-container .postList article.media .entry-meta {
  border-top: none !important;
  padding-top: 0 !important;
}

/* カテゴリの表示位置を絶対配置→普通のインライン表示に戻す */
main.main-container .postList article.media .entry-meta .entry-meta_items_term {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-top: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 更新日時：時計の線画アイコン（Font Awesome regular fa-clock） */
main.main-container .postList article.media .entry-meta .entry-meta_updated .updated::before {
  content: "\f017" !important; /* fa-clock */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important; /* regular = 線画 */
  font-size: 11px !important;
  margin-right: 5px !important;
  color: var(--rita-text-mute) !important;
}

/* カテゴリ：ピルやめてシンプル線画＋テキストに（フォルダの線画アイコン） */
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: var(--rita-text-mute) !important;
  border: none !important;
  font-size: 12px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button::before {
  content: "\f07b" !important; /* fa-folder */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important; /* regular = 線画 */
  font-size: 11px !important;
  color: var(--rita-text-mute) !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button:hover {
  color: var(--rita-main) !important;
  background: transparent !important;
  text-decoration: underline !important;
  border: none !important;
}
main.main-container .postList article.media .entry-meta .entry-meta_items_term_button:hover::before {
  color: var(--rita-main) !important;
}

/* ============================================================
   /blog/ ページネーション — 横並びボタン式
   problem①: postList grid 内に navigation が混じって縦並びになる
   problem②: ul li::before のテラコッタ点が当たる
   ============================================================ */

/* navigation を grid 全幅に */
main.main-container .postList nav.navigation,
main.main-container .postList .navigation {
  grid-column: 1 / -1 !important;
  margin-top: 30px !important;
}

/* ul/li の disc削除＋テラコッタ●打ち消し＋横並び */
main.main-container .navigation ul.page-numbers,
main.main-container nav.navigation ul.page-numbers {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
}
main.main-container .navigation ul.page-numbers li,
main.main-container .navigation ul.page-numbers li:first-child,
main.main-container .navigation ul.page-numbers li:last-child {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
main.main-container .navigation ul.page-numbers li::before,
main.main-container .navigation ul.page-numbers li::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ボタン化（数字・矢印・current・dots） */
main.main-container .navigation ul.page-numbers li a,
main.main-container .navigation ul.page-numbers li span,
main.main-container .navigation ul.page-numbers li > .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1px solid var(--rita-line) !important;
  border-radius: 8px !important;
  color: var(--rita-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .2s !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
main.main-container .navigation ul.page-numbers li a:hover,
main.main-container .navigation ul.page-numbers li a.page-numbers:hover {
  background: var(--rita-bg-soft) !important;
  border-color: var(--rita-main) !important;
  color: var(--rita-main) !important;
}
/* 現在ページ：テラコッタ塗りつぶし */
main.main-container .navigation ul.page-numbers li span.current,
main.main-container .navigation ul.page-numbers li .current {
  background: var(--rita-main) !important;
  border-color: var(--rita-main) !important;
  color: #fff !important;
}
/* 「…」省略：枠なし */
main.main-container .navigation ul.page-numbers li span.dots,
main.main-container .navigation ul.page-numbers li .dots {
  background: transparent !important;
  border: none !important;
  color: var(--rita-text-mute) !important;
  min-width: 24px !important;
  height: auto !important;
}
/* 矢印：少しゆとり */
main.main-container .navigation ul.page-numbers li a.next,
main.main-container .navigation ul.page-numbers li a.prev {
  padding: 0 14px !important;
  font-weight: 700 !important;
}

/* スマホ：ボタン少し小さく */
@media (max-width: 575.98px) {
  main.main-container .navigation ul.page-numbers {
    gap: 6px !important;
  }
  main.main-container .navigation ul.page-numbers li a,
  main.main-container .navigation ul.page-numbers li span,
  main.main-container .navigation ul.page-numbers li > .page-numbers {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
  }
}

/* スマホでカード内のパディング縮める＋画面左右にpadding確保 */
@media (max-width: 575.98px) {
  /* メイン・サイドそれぞれに左右paddingで圧迫感解消 */
  main.main-container .mainSection-col-two,
  main.main-container .sideSection-col-two {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  main.main-container .postList article.media .media-body {
    padding: 12px 12px 14px !important;
  }
  main.main-container .postList article.media .media-heading,
  main.main-container .postList article.media h1.entry-title {
    font-size: 13px !important;
    -webkit-line-clamp: 2; /* スマホも2行省略 */
  }
  main.main-container .postList article.media .media-body_excerpt,
  main.main-container .postList article.media .media-body p {
    font-size: 12px !important;
    -webkit-line-clamp: 2;
    margin-bottom: 8px !important;
  }
  main.main-container .postList article.media .entry-meta {
    font-size: 11px !important;
    gap: 6px !important;
    padding-top: 8px;
  }
  /* スマホ用カテゴリ：日付と同じサイズで揃える（旧ピル時代の縮小設定を解除） */
  main.main-container .postList article.media .entry-meta .entry-meta_items_term {
    top: auto !important;
    right: auto !important;
  }
  main.main-container .postList article.media .entry-meta .entry-meta_items_term_button {
    font-size: 11px !important;
    padding: 0 !important;
  }
  main.main-container .postList article.media .entry-meta .entry-meta_items_term_button::before {
    font-size: 10px !important;
  }
  /* 日付の時計アイコンも揃える */
  main.main-container .postList article.media .entry-meta .entry-meta_updated .updated::before {
    font-size: 10px !important;
  }
}

/* ============================================================
   15. ブロック内 <p> の自動マージン打ち消し
       commons-post.css の `entry-body p { margin-bottom: 1.4em }` が
       VK ブロック内の <p> にも当たって余白が出るので強制リセット
   ============================================================ */

main.main-container .entry-body .vk_balloon_content > p,
main.main-container .entry-body .vk_borderBox_body > p,
main.main-container .entry-body .vk_faq_title > p,
main.main-container .entry-body .vk_faq_content > p,
main.main-container .entry-body .vk_alert > p,
main.main-container .entry-body .vk_alert_content > p,
main.main-container .entry-body .vk_flow_frame_text_content > p,
.vk_balloon_content > p,
.vk_borderBox_body > p,
.vk_faq_title > p,
.vk_faq_content > p,
.vk_alert > p,
.vk_alert_content > p,
.vk_flow_frame_text_content > p {
  margin-top: 0;
  margin-bottom: .6em;
}

main.main-container .entry-body .vk_balloon_content > p:last-child,
main.main-container .entry-body .vk_borderBox_body > p:last-child,
main.main-container .entry-body .vk_faq_title > p:last-child,
main.main-container .entry-body .vk_faq_content > p:last-child,
main.main-container .entry-body .vk_alert > p:last-child,
main.main-container .entry-body .vk_alert_content > p:last-child,
main.main-container .entry-body .vk_flow_frame_text_content > p:last-child,
.vk_balloon_content > p:last-child,
.vk_balloon_content > *:last-child,
.vk_borderBox_body > p:last-child,
.vk_borderBox_body > *:last-child,
.vk_faq_title > p:last-child,
.vk_faq_content > p:last-child,
.vk_alert > p:last-child,
.vk_alert_content > p:last-child,
.vk_flow_frame_text_content > p:last-child {
  margin-bottom: 0 !important;
}

main.main-container .entry-body .vk_balloon_content > p:first-child,
.vk_balloon_content > p:first-child,
.vk_balloon_content > *:first-child,
.vk_borderBox_body > p:first-child,
.vk_borderBox_body > *:first-child,
.vk_faq_title > p:first-child,
.vk_faq_content > p:first-child,
.vk_alert > p:first-child,
.vk_alert_content > p:first-child,
.vk_flow_frame_text_content > p:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   14. スマホ対応
   ============================================================ */

@media (max-width: 767px) {
  .vk_balloon .vk_balloon_content { font-size: 14px; padding: 12px 14px; }
  .vk_faq .vk_faq_title,
  .vk_faq .vk_faq_content { padding-left: 2.6rem; font-size: 15px; }
  .vk_flow .vk_flow_frame { padding: 16px 18px; }
  .wp-block-button .wp-block-button__link { padding: 14px 24px; font-size: 15px; }
  .wp-block-table table { font-size: 14px; }
  .wp-block-table thead th,
  .wp-block-table tbody td,
  .wp-block-table tbody th { padding: 10px 12px; }
}