/*
Theme Name: Miyabi Theme
Theme URI: https://miyabi-ai.com/
Author: Miyabi
Author URI: https://miyabi-ai.com/
Description: 「おばあちゃんでもわかるAI解説」みやびブランド専用WordPressテーマ。マガジン型レイアウト・Stripe階層料金サブスク・カスタムブロック5種を内包。
Version: 1.17.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: miyabi-theme
Tags: blog, custom-colors, custom-menu, featured-images, threaded-comments
*/

/* ==========================================
   みやびブランド カラー変数定義
   ========================================== */
:root {
  /* メインカラー */
  --color-main: #2d1a4e;        /* 深紫 */
  --color-accent: #f5b942;      /* シャンパンゴールド（上品な金） */
  --color-sub: #10b981;         /* モダングリーン */
  --color-warning: #f0c040;     /* 黄 */
  --color-danger: #c0392b;      /* 赤 */
  --color-base: #fdf9f4;        /* 生成り */
  --color-purple: #7B4F9E;      /* 中紫 */

  /* テキストカラー */
  --text-primary: #1a1a1a;
  --text-secondary: #555;
  --text-tertiary: #888;

  /* ボーダー・背景 */
  --border-light: #ede8df;
  --bg-light: #f7f4ef;
  --bg-card: #ffffff;

  /* フォント（ハイブリッド方式：見出しNoto Serif、本文システム） */
  --font-serif: 'Noto Serif JP', "Hiragino Mincho ProN", "Yu Mincho", "ヒラギノ明朝 ProN", "游明朝", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif;

  /* スペース */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 角丸 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* ==========================================
   リセット・基本
   ========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.9;
  font-size: 16px;
}

a {
  color: var(--color-purple);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.7;
}

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

/* ==========================================
   レイアウト基本
   ========================================== */
.miyabi-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 16px;
}

/* セクション内側コンテナ（料金・マイページ・決済完了等の共通） */
.miyabi-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px;
  box-sizing: border-box;
}

/* タブレット */
@media (max-width: 900px) {
  .miyabi-section-inner {
    padding: 56px 20px;
  }
}

/* モバイル */
@media (max-width: 600px) {
  .miyabi-section-inner {
    padding: 40px 16px;
  }
  .miyabi-container {
    padding: 24px 16px;
  }
}

/* ==========================================
   タイポグラフィ
   ========================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}

h1 {
  font-size: 28px;
  margin-bottom: 24px;
}

h2 {
  font-size: 22px;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-purple);
}

h3 {
  font-size: 18px;
  margin: 32px 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--color-purple);
}

p {
  font-size: 16px;
  line-height: 2.0;
  margin-bottom: 20px;
  color: var(--text-primary);
}

/* ==========================================
   ヘッダー
   ========================================== */
.miyabi-header {
  background: linear-gradient(135deg, var(--color-main) 0%, #1a3a2e 100%);
  padding: 16px 0;
}

.miyabi-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.miyabi-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent);
}

.miyabi-logo a {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* 🌸 みやびロゴ画像（マスタークラス） */
.miyabi-logo-img {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ヘッダーのロゴマーク（40px） */
.miyabi-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

/* 大きい使用（モーダル・アバター・success ページ等） */
.miyabi-logo-mark-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #fffdf5 0%, #f0e9f7 100%);
  box-shadow: 0 4px 12px rgba(45, 26, 78, 0.1);
}

/* インライン使用（テキスト並びの装飾） */
.miyabi-logo-mark-inline {
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -0.35em;
}

.miyabi-logo-text {
  font-family: var(--font-serif);
  font-weight: 700;
}

@media (max-width: 768px) {
  .miyabi-logo-mark {
    width: 36px;
    height: 36px;
  }
}

.miyabi-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
}

.miyabi-nav a {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

/* ==========================================
   フッター
   ========================================== */
.miyabi-footer {
  background: var(--color-main);
  color: white;
  padding: 48px 16px 24px;
  margin-top: 80px;
}

.miyabi-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.miyabi-footer-logo {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.miyabi-footer-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

.miyabi-footer-copyright {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   レスポンシブ
   ========================================== */
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }
  h3 { font-size: 16px; }
  .miyabi-container { padding: 24px 16px; }
}

/* ==========================================
   🌸 SVGアイコン基本スタイル
   miyabi_icon() ヘルパーで出力されるSVGに適用
   ========================================== */
.miyabi-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  fill: none;
  color: currentColor;
}

/* サイズバリエーション */
.miyabi-icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.miyabi-icon-md { width: 20px; height: 20px; vertical-align: -4px; }
.miyabi-icon-lg { width: 28px; height: 28px; vertical-align: -7px; }
.miyabi-icon-xl { width: 40px; height: 40px; }

/* カラーバリエーション */
.miyabi-icon-gold     { color: var(--color-accent); }
.miyabi-icon-purple   { color: var(--color-purple); }
.miyabi-icon-main     { color: var(--color-main); }
.miyabi-icon-green    { color: var(--color-sub); }
.miyabi-icon-warning  { color: var(--color-warning); }
.miyabi-icon-danger   { color: var(--color-danger); }
.miyabi-icon-muted    { color: var(--text-tertiary); }
.miyabi-icon-white    { color: white; }

/* ロゴ用：桜色（淡いピンク〜ゴールド） */
/* sakura クラスは v1.7.1 で廃止（ロゴはキャラ画像 miyabi-logo.webp に統一） */

/* ==========================================
   アクセシビリティ：モーション削減対応
   （シニア・主婦層・前庭障害ユーザーへの配慮）
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================
   Stripe Checkout 遷移中の全画面ローディングオーバーレイ
   ========================================== */
.miyabi-checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(45, 26, 78, 0.92) 0%, rgba(123, 79, 158, 0.92) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.miyabi-checkout-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.miyabi-checkout-overlay-inner {
  text-align: center;
  color: #fff;
  padding: 32px 24px;
  max-width: 360px;
}
.miyabi-checkout-overlay-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffd700;
  border-radius: 50%;
  animation: miyabi-checkout-spin 0.9s linear infinite;
}
.miyabi-checkout-overlay-text {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.miyabi-checkout-overlay-sub {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.85;
}
@keyframes miyabi-checkout-spin {
  to { transform: rotate(360deg); }
}
body.miyabi-checkout-overlay-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .miyabi-checkout-overlay-spinner { animation-duration: 2s; }
  .miyabi-checkout-overlay { transition: none; }
}

/* ==========================================
   ブロック専用CSSは blocks/ 内の各CSSから読込
   ========================================== */
@import url('./blocks/miyabi-talk/style.css');
@import url('./blocks/lead-block/style.css');
@import url('./blocks/step-card/style.css');
@import url('./blocks/analogy-box/style.css');
@import url('./blocks/conclusion-box/style.css');

/* ==========================================
   🌸 LINE誘導CTAカード（v1.10.0以降）
   Shortcode: [miyabi_line_cta]
   - 単一ブロックとして強く視覚分離させる
   - 内部要素はグローバルh3/ul/liの記事スタイルを完全リセット
   ========================================== */

/* 共通：カード全体（記事から浮かす） */
.miyabi-line-cta-card {
    box-sizing: border-box;
    background: linear-gradient(160deg, #fff8ed 0%, #fdf2f8 55%, #f0e7fa 100%);
    border: 2.5px solid #7B4F9E;
    border-radius: 18px;
    padding: 32px 28px 26px;
    margin: 40px auto;
    max-width: 620px;
    box-shadow:
        0 12px 32px rgba(45, 26, 78, 0.12),
        0 4px 8px rgba(45, 26, 78, 0.06);
    position: relative;
    overflow: visible;
    isolation: isolate; /* 内部要素のz-indexを閉じる */
}

/* トップ装飾バー（カード感を強める） */
.miyabi-line-cta-card::after {
    content: "";
    position: absolute;
    top: -2.5px;
    left: 14%;
    right: 14%;
    height: 4px;
    background: linear-gradient(90deg, #7B4F9E 0%, #ffd700 50%, #06C755 100%);
    border-radius: 0 0 4px 4px;
}

/* 右上の桜バッジ */
.miyabi-line-cta-card::before {
    content: "🌸";
    position: absolute;
    top: -18px;
    right: 22px;
    background: linear-gradient(135deg, #ffd700 0%, #f5b942 100%);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    z-index: 2;
}

/* === 内部要素の記事スタイル干渉を完全リセット === */
.miyabi-line-cta-card * {
    box-sizing: border-box;
}

.miyabi-line-cta-card h3,
.miyabi-line-cta-card .miyabi-line-cta__heading {
    /* 記事グローバルh3の border-left/padding-left/font-family/border-bottom を全リセット */
    all: unset;
    display: block;
    font-family: var(--font-serif, 'Noto Serif JP', serif);
    font-size: 19px;
    font-weight: 700;
    color: #2d1a4e;
    text-align: center;
    margin: 18px 0 16px;
    padding: 0;
    border: 0;
    line-height: 1.5;
}

.miyabi-line-cta-card ul,
.miyabi-line-cta-card .miyabi-line-cta__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 14px 16px 14px 18px;
}

.miyabi-line-cta-card ul li,
.miyabi-line-cta-card .miyabi-line-cta__benefits li {
    list-style: none;
    padding: 6px 0 6px 28px;
    margin: 0;
    position: relative;
    font-size: 14.5px;
    color: #3a2861;
    line-height: 1.6;
}

.miyabi-line-cta-card ul li::before,
.miyabi-line-cta-card .miyabi-line-cta__benefits li::before {
    content: "✓";
    position: absolute;
    left: 2px;
    top: 6px;
    color: #1D9E75;
    font-weight: 700;
    font-size: 15px;
}

.miyabi-line-cta-card p {
    margin: 0;
}

/* === Full（標準カード）=== */
.miyabi-line-cta__top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 4px;
}

.miyabi-line-cta__avatar {
    flex-shrink: 0;
}

.miyabi-line-cta__avatar img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(123, 79, 158, 0.25);
    background: #fff;
    object-fit: cover;
}

.miyabi-line-cta__balloon {
    flex: 1;
    background: #ffffff;
    border: 1.5px solid #7B4F9E;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #2d1a4e;
    position: relative;
    font-weight: 500;
}

.miyabi-line-cta__balloon::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 22px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #7B4F9E;
}

.miyabi-line-cta__balloon::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 23px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #ffffff;
}

.miyabi-line-cta__btn-wrap {
    text-align: center;
    margin: 6px 0 14px;
}

.miyabi-line-cta__btn,
.miyabi-line-cta-card a.miyabi-line-cta__btn {
    display: inline-block;
    background: linear-gradient(135deg, #06C755 0%, #00B844 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 17px;
    padding: 15px 40px;
    border-radius: 999px;
    box-shadow:
        0 6px 16px rgba(6, 199, 85, 0.35),
        inset 0 -2px 0 rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 0;
    cursor: pointer;
}

.miyabi-line-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(6, 199, 85, 0.45),
        inset 0 -2px 0 rgba(0,0,0,0.08);
    opacity: 1;
}

.miyabi-line-cta__footer {
    text-align: center;
    font-size: 12.5px;
    color: #6b5a8c;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px dashed rgba(123, 79, 158, 0.25);
}

/* === Mini版（帯状）=== */
.miyabi-line-cta-card--mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 24px auto;
    max-width: 720px;
}

.miyabi-line-cta-card--mini::before,
.miyabi-line-cta-card--mini::after {
    display: none;
}

.miyabi-line-cta-mini__avatar img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #fff;
    object-fit: cover;
}

.miyabi-line-cta-mini__text {
    flex: 1;
    font-size: 13.5px;
    color: #2d1a4e;
    line-height: 1.45;
}

.miyabi-line-cta-mini__btn,
.miyabi-line-cta-card a.miyabi-line-cta-mini__btn {
    background: linear-gradient(135deg, #06C755 0%, #00B844 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 20px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(6, 199, 85, 0.3);
}

/* === Sidebar版（縦型・狭幅対応）=== */
.miyabi-line-cta-card--sidebar {
    max-width: 100%;
    padding: 22px 18px 18px;
    margin: 24px 0;
    border-radius: 14px;
}

.miyabi-line-cta-card--sidebar::before {
    width: 32px;
    height: 32px;
    font-size: 16px;
    top: -14px;
    right: 14px;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta-sidebar__avatar {
    text-align: center;
    margin-bottom: 8px;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta-sidebar__avatar img {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(123, 79, 158, 0.25);
    background: #fff;
    object-fit: cover;
}

.miyabi-line-cta-card--sidebar h3,
.miyabi-line-cta-card--sidebar .miyabi-line-cta__heading {
    font-size: 15.5px;
    margin: 4px 0 12px;
    line-height: 1.5;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__benefits {
    padding: 10px 12px 10px 14px;
    margin-bottom: 14px;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__benefits li {
    font-size: 13px;
    padding: 4px 0 4px 22px;
    line-height: 1.5;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__benefits li::before {
    font-size: 13px;
    top: 4px;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__btn-wrap {
    margin: 4px 0 10px;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__btn {
    font-size: 14px;
    padding: 12px 24px;
    width: 100%;
    box-sizing: border-box;
}

.miyabi-line-cta-card--sidebar .miyabi-line-cta__footer {
    font-size: 11.5px;
    padding-top: 8px;
}

/* === レスポンシブ === */
@media (max-width: 600px) {
    .miyabi-line-cta-card {
        padding: 26px 18px 22px;
        margin: 28px auto;
    }
    .miyabi-line-cta__top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .miyabi-line-cta__balloon::before,
    .miyabi-line-cta__balloon::after {
        display: none;
    }
    .miyabi-line-cta__balloon {
        font-size: 13.5px;
    }
    .miyabi-line-cta-card h3,
    .miyabi-line-cta-card .miyabi-line-cta__heading {
        font-size: 16.5px;
    }
    .miyabi-line-cta__btn {
        font-size: 15px;
        padding: 13px 28px;
    }
    .miyabi-line-cta-card--mini {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
}

/* ==========================================
   🔍 マガジン絞り込みチップ（v1.11.0以降）
   2軸：アクセスタイプ × カテゴリ
   URLパラメータ駆動・SEO/シェア対応
   ========================================== */

.miyabi-magazine-filter {
    background: linear-gradient(180deg, #fff 0%, #faf6f0 100%);
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--border-light);
}

.miyabi-magazine-filter .magazine-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.magazine-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}

.magazine-filter-row + .magazine-filter-row {
    border-top: 1px dashed rgba(123, 79, 158, 0.15);
    margin-top: 4px;
    padding-top: 10px;
}

.magazine-filter-label {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 32px;
    min-width: 70px;
}

.magazine-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.magazine-chip {
    display: inline-block;
    padding: 6px 14px;
    background: #fff;
    border: 1.5px solid #e2d6ee;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none !important;
    line-height: 1.4;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.magazine-chip:hover {
    background: #f5edf9;
    border-color: var(--color-purple);
    opacity: 1;
    transform: translateY(-1px);
}

.magazine-chip.is-active {
    background: linear-gradient(135deg, var(--color-purple) 0%, #5a3a78 100%);
    border-color: var(--color-purple);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(123, 79, 158, 0.3);
}

.magazine-chip.is-active:hover {
    transform: translateY(-1px);
}

.magazine-filter-clear {
    text-align: right;
    margin: 8px 0 0;
}

.magazine-filter-clear a {
    font-size: 12.5px;
    color: var(--text-tertiary);
    text-decoration: underline;
}

.magazine-filter-clear a:hover {
    color: var(--color-purple);
}

@media (max-width: 700px) {
    .magazine-filter-row {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    .magazine-filter-label {
        line-height: 1.4;
        min-width: 0;
    }
    .magazine-chips {
        gap: 6px;
    }
    .magazine-chip {
        font-size: 12.5px;
        padding: 5px 12px;
    }
}

/* ==========================================
   📄 記事本文＋固定ページ＋教材のリスト（v1.13.1以降）
   3つのコンテンツラッパーすべてに統一適用
   - .miyabi-article-content（投稿/post）
   - .miyabi-page-content（固定ページ：特商法・プライバシー・利用規約等）
   - .kyouzai-content（教材CPT）
   ========================================== */

.miyabi-article-content ul,
.miyabi-article-content ol,
.miyabi-article-content .wp-block-list,
.miyabi-page-content ul,
.miyabi-page-content ol,
.miyabi-page-content .wp-block-list,
.kyouzai-content ul,
.kyouzai-content ol,
.kyouzai-content .wp-block-list {
    margin: 18px 0 24px;
    padding-left: 1.6em;
}

.miyabi-article-content ul,
.miyabi-page-content ul,
.kyouzai-content ul {
    list-style: disc outside;
}

.miyabi-article-content ol,
.miyabi-page-content ol,
.kyouzai-content ol {
    list-style: decimal outside;
}

.miyabi-article-content ul li,
.miyabi-article-content ol li,
.miyabi-article-content .wp-block-list li,
.miyabi-page-content ul li,
.miyabi-page-content ol li,
.miyabi-page-content .wp-block-list li,
.kyouzai-content ul li,
.kyouzai-content ol li,
.kyouzai-content .wp-block-list li {
    margin: 0 0 10px;
    padding: 0 0 0 4px;
    line-height: 1.85;
    font-size: 16px;
    color: var(--text-primary);
}

.miyabi-article-content ul li::marker,
.miyabi-article-content ol li::marker,
.miyabi-page-content ul li::marker,
.miyabi-page-content ol li::marker,
.kyouzai-content ul li::marker,
.kyouzai-content ol li::marker {
    color: var(--color-purple);
}

/* ネストしたリスト */
.miyabi-article-content ul ul,
.miyabi-article-content ol ol,
.miyabi-article-content ul ol,
.miyabi-article-content ol ul,
.miyabi-page-content ul ul,
.miyabi-page-content ol ol,
.miyabi-page-content ul ol,
.miyabi-page-content ol ul,
.kyouzai-content ul ul,
.kyouzai-content ol ol,
.kyouzai-content ul ol,
.kyouzai-content ol ul {
    margin: 8px 0 8px;
    padding-left: 1.4em;
}

/* リスト内の <strong> */
.miyabi-article-content li strong,
.miyabi-page-content li strong,
.kyouzai-content li strong {
    color: var(--color-main);
    font-weight: 700;
}

/* ==========================================
   📊 表（テーブル）─ 3コンテンツラッパー共通
   特商法・プライバシーの表組みを統一デザインに
   ========================================== */

.miyabi-article-content .wp-block-table,
.miyabi-page-content .wp-block-table,
.kyouzai-content .wp-block-table {
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 右端で「→もっとあるよ」のヒント（スクロール可能な時だけ自然に見える） */
    background:
        linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)) right center / 18px 100% no-repeat,
        #fff;
    border-radius: 10px;
}

.miyabi-article-content table,
.miyabi-page-content table,
.kyouzai-content table {
    width: 100%;
    /* モバイルで列が潰れないよう最小幅を確保し、必要なら横スクロールへ */
    min-width: 580px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
}


.miyabi-article-content th,
.miyabi-page-content th,
.kyouzai-content th {
    background: linear-gradient(135deg, #f5edf9 0%, #fdf9f4 100%);
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--color-main);
    border-bottom: 2px solid var(--color-purple);
    line-height: 1.5;
}

.miyabi-article-content td,
.miyabi-page-content td,
.kyouzai-content td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    line-height: 1.7;
    vertical-align: top;
}

.miyabi-article-content tr:last-child td,
.miyabi-page-content tr:last-child td,
.kyouzai-content tr:last-child td {
    border-bottom: 0;
}

/* th が左カラム（td構造のテーブル）対応 */
.miyabi-article-content tbody tr td:first-child strong,
.miyabi-page-content tbody tr td:first-child strong,
.kyouzai-content tbody tr td:first-child strong {
    color: var(--color-main);
}

/* ==========================================
   📝 引用ブロック ─ 3コンテンツラッパー共通
   ========================================== */

.miyabi-article-content .wp-block-quote,
.miyabi-page-content .wp-block-quote,
.kyouzai-content .wp-block-quote {
    margin: 20px 0;
    padding: 14px 20px;
    background: #fdf9f4;
    border-left: 4px solid var(--color-purple);
    border-radius: 4px;
    font-size: 14.5px;
}

.miyabi-article-content .wp-block-quote p,
.miyabi-page-content .wp-block-quote p,
.kyouzai-content .wp-block-quote p {
    margin: 0;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ==========================================
   タブレット（768px以下）
   ========================================== */
@media (max-width: 768px) {
    .miyabi-article-content ul,
    .miyabi-article-content ol,
    .miyabi-article-content .wp-block-list,
    .miyabi-page-content ul,
    .miyabi-page-content ol,
    .miyabi-page-content .wp-block-list,
    .kyouzai-content ul,
    .kyouzai-content ol,
    .kyouzai-content .wp-block-list {
        padding-left: 1.4em;
        margin: 16px 0 20px;
    }

    .miyabi-article-content ul li,
    .miyabi-article-content ol li,
    .miyabi-article-content .wp-block-list li,
    .miyabi-page-content ul li,
    .miyabi-page-content ol li,
    .miyabi-page-content .wp-block-list li,
    .kyouzai-content ul li,
    .kyouzai-content ol li,
    .kyouzai-content .wp-block-list li {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 10px;
        padding-left: 2px;
    }

    .miyabi-article-content table,
    .miyabi-page-content table,
    .kyouzai-content table {
        font-size: 14px;
    }
    .miyabi-article-content th,
    .miyabi-page-content th,
    .kyouzai-content th,
    .miyabi-article-content td,
    .miyabi-page-content td,
    .kyouzai-content td {
        padding: 10px 12px;
    }
}

/* ==========================================
   モバイル（600px以下）── 端の窮屈さを解消
   ========================================== */
@media (max-width: 600px) {
    .miyabi-container {
        padding: 24px 18px;
    }

    .miyabi-article-content,
    .miyabi-page-content,
    .kyouzai-content {
        padding-right: 4px;
    }

    .miyabi-article-content ul,
    .miyabi-article-content ol,
    .miyabi-article-content .wp-block-list,
    .miyabi-page-content ul,
    .miyabi-page-content ol,
    .miyabi-page-content .wp-block-list,
    .kyouzai-content ul,
    .kyouzai-content ol,
    .kyouzai-content .wp-block-list {
        padding-left: 1.3em;
        margin: 14px 0 18px;
    }

    .miyabi-article-content ul li,
    .miyabi-article-content ol li,
    .miyabi-article-content .wp-block-list li,
    .miyabi-page-content ul li,
    .miyabi-page-content ol li,
    .miyabi-page-content .wp-block-list li,
    .kyouzai-content ul li,
    .kyouzai-content ol li,
    .kyouzai-content .wp-block-list li {
        font-size: 14.5px;
        line-height: 1.75;
        margin-bottom: 12px;
        padding-right: 2px;
    }

    .miyabi-article-content p,
    .miyabi-page-content p,
    .kyouzai-content p {
        padding-right: 2px;
    }

    /* モバイルの表は font-size をさらに下げて横スクロール許容 */
    .miyabi-article-content table,
    .miyabi-page-content table,
    .kyouzai-content table {
        font-size: 13.5px;
    }
    .miyabi-article-content th,
    .miyabi-page-content th,
    .kyouzai-content th,
    .miyabi-article-content td,
    .miyabi-page-content td,
    .kyouzai-content td {
        padding: 8px 10px;
    }
}

/* ==========================================
   📄 フッター法的表記リンク（v1.13.0以降）
   ========================================== */

.miyabi-footer-legal {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
}

.miyabi-footer-legal a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.15s;
}

.miyabi-footer-legal a:hover {
    color: var(--color-accent);
    opacity: 1;
}

.miyabi-footer-legal-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 6px;
}

@media (max-width: 600px) {
    .miyabi-footer-legal {
        font-size: 11.5px;
    }
    .miyabi-footer-legal-sep {
        margin: 0 4px;
    }
}

/* ==========================================
   ➖ Divider / 区切り線（v1.13.2以降）
   サイト全体・記事内・法的ページ・教材すべてに統一
   ========================================== */

hr,
.wp-block-separator {
    margin: 48px auto;
    padding: 0;
    width: 100%;
    max-width: 200px;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(123, 79, 158, 0.4) 50%,
        transparent 100%);
    overflow: visible;
    position: relative;
}

/* 中央に小さな桜マーク */
hr::after,
.wp-block-separator::after {
    content: "🌸";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-base);
    padding: 0 12px;
    font-size: 14px;
    line-height: 1;
}

/* WordPress標準の wide スタイル */
.wp-block-separator.is-style-wide {
    max-width: 100%;
    margin: 56px 0;
}

/* WordPress標準の dots スタイル */
.wp-block-separator.is-style-dots {
    background: none;
    text-align: center;
    color: var(--color-purple);
    line-height: 1;
    height: auto;
    max-width: 100%;
    margin: 48px auto;
}
.wp-block-separator.is-style-dots::before {
    content: "・・・";
    font-size: 24px;
    letter-spacing: 8px;
    color: var(--color-purple);
}
.wp-block-separator.is-style-dots::after {
    display: none;
}

/* コンテンツラッパー内の hr は前後余白をさらに広めに */
.miyabi-article-content hr,
.miyabi-article-content .wp-block-separator,
.miyabi-page-content hr,
.miyabi-page-content .wp-block-separator,
.kyouzai-content hr,
.kyouzai-content .wp-block-separator {
    margin: 56px auto;
}

/* タブレット */
@media (max-width: 768px) {
    hr,
    .wp-block-separator,
    .miyabi-article-content hr,
    .miyabi-article-content .wp-block-separator,
    .miyabi-page-content hr,
    .miyabi-page-content .wp-block-separator,
    .kyouzai-content hr,
    .kyouzai-content .wp-block-separator {
        margin: 40px auto;
    }
}

/* モバイル */
@media (max-width: 600px) {
    hr,
    .wp-block-separator,
    .miyabi-article-content hr,
    .miyabi-article-content .wp-block-separator,
    .miyabi-page-content hr,
    .miyabi-page-content .wp-block-separator,
    .kyouzai-content hr,
    .kyouzai-content .wp-block-separator {
        margin: 32px auto;
        max-width: 160px;
    }
}

/* ==========================================
   📑 目次プラグイン（Table of Contents Plus）上書き（v1.13.3以降）
   みやびブランドに合わせて完全カスタムデザイン
   ========================================== */

#toc_container,
.toc_container,
div#toc_container,
div.toc_container {
    background: linear-gradient(135deg, #fff8ed 0%, #fdf2f8 60%, #f5edf9 100%) !important;
    border: 2px solid var(--color-purple) !important;
    border-radius: 14px !important;
    padding: 22px 26px !important;
    margin: 32px auto !important;
    max-width: 100% !important;
    width: auto !important;
    box-shadow: 0 6px 18px rgba(45, 26, 78, 0.08) !important;
    position: relative !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

/* 右上にみやびアイコンバッジ */
#toc_container::before,
.toc_container::before {
    content: "" !important;
    position: absolute !important;
    top: -22px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-image: url('assets/images/miyabi-01-standard.webp') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-color: #fff !important;
    border: 3px solid #fff !important;
    box-shadow:
        0 0 0 2px var(--color-purple),
        0 4px 10px rgba(45, 26, 78, 0.15) !important;
}

/* タイトル（"目次"） */
#toc_container .toc_title,
.toc_container .toc_title,
p.toc_title {
    font-family: var(--font-serif) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--color-main) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: none !important;
}

#toc_container .toc_title::before {
    content: "📑 " !important;
    margin-right: 4px !important;
}

/* タイトル内の「表示／非表示」リンク */
#toc_container .toc_title .toc_toggle,
#toc_container .toc_toggle {
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-purple) !important;
    margin-left: 8px !important;
}

#toc_container .toc_toggle a {
    color: var(--color-purple) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(123, 79, 158, 0.4) !important;
}

#toc_container .toc_toggle a:hover {
    color: var(--color-main) !important;
    border-bottom-color: var(--color-main) !important;
}

/* リスト全体 */
#toc_container ul.toc_list,
.toc_container ul.toc_list,
#toc_container ul,
.toc_container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* リストアイテム */
#toc_container li,
.toc_container li {
    list-style: none !important;
    padding: 4px 0 4px 22px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    position: relative !important;
}

/* リストマーカー（H2項目：紫の小さなドット） */
#toc_container > ul > li::before,
.toc_container > ul > li::before,
#toc_container ul.toc_list > li::before,
.toc_container ul.toc_list > li::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 14px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--color-purple) !important;
}

/* 子リスト（H3以下）*/
#toc_container ul ul,
.toc_container ul ul {
    margin: 4px 0 4px 8px !important;
    padding-left: 8px !important;
    border-left: 1px dashed rgba(123, 79, 158, 0.25) !important;
}

#toc_container ul ul li::before,
.toc_container ul ul li::before {
    content: "・" !important;
    color: var(--color-purple) !important;
    font-size: 14px !important;
    top: 4px !important;
}

#toc_container ul ul li {
    padding: 3px 0 3px 16px !important;
    font-size: 13.5px !important;
}

/* 番号表示（番号付きの場合） */
#toc_container .toc_number {
    color: var(--color-purple) !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}

/* リンク */
#toc_container a,
.toc_container a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    transition: color 0.15s, padding-left 0.15s !important;
    display: inline !important;
    border: 0 !important;
    padding: 0 !important;
}

#toc_container a:hover,
.toc_container a:hover {
    color: var(--color-purple) !important;
    opacity: 1 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(123, 79, 158, 0.4) !important;
    text-underline-offset: 3px !important;
}

#toc_container a:focus,
.toc_container a:focus {
    outline: 2px solid var(--color-purple) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* タブレット */
@media (max-width: 768px) {
    #toc_container,
    .toc_container {
        padding: 18px 20px !important;
        margin: 24px auto !important;
        font-size: 14px !important;
    }
    #toc_container .toc_title,
    .toc_container .toc_title {
        font-size: 16px !important;
    }
}

/* モバイル */
@media (max-width: 600px) {
    #toc_container,
    .toc_container {
        padding: 16px 18px !important;
        margin: 20px auto !important;
        font-size: 13.5px !important;
        border-radius: 12px !important;
    }
    #toc_container .toc_title,
    .toc_container .toc_title {
        font-size: 15px !important;
    }
    #toc_container::before,
    .toc_container::before {
        width: 40px !important;
        height: 40px !important;
        top: -18px !important;
        right: 16px !important;
    }
    #toc_container ul ul li {
        font-size: 13px !important;
    }
}