/* Placeholder for article styling overrides.
   ここにブログ記事用の追加デザインを書きます。既存の blog.css がある場合は、このファイルを置き換えてください。 */

/* =========================================================
   固定ページ（.ww-page）
   ========================================================= */
.ww-page{
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0 64px;
}
.ww-page__header{
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
}
.ww-page__title{
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}
.ww-page__content{
  line-height: 1.9;
  color: #334155;
}
.ww-page__content h2{
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 800;
  margin: 40px 0 12px;
  padding: 10px 14px;
  background: #f0f5ff;
  border-left: 4px solid #2563eb;
  border-radius: 0 8px 8px 0;
  color: #0f172a;
}
.ww-page__content h3{
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  margin: 28px 0 10px;
  padding-left: 12px;
  border-left: 3px solid #7c3aed;
  color: #1e293b;
}
.ww-page__content p{
  margin: 10px 0;
}
.ww-page__content ul,
.ww-page__content ol{
  padding-left: 1.5em;
  margin: 10px 0 16px;
}
.ww-page__content li{
  margin: 6px 0;
}
.ww-page__content table{
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: .92rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
.ww-page__content th,
.ww-page__content td{
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}
.ww-page__content th{
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  width: 30%;
  white-space: nowrap;
}
.ww-page__content tr:last-child th,
.ww-page__content tr:last-child td{
  border-bottom: none;
}
.ww-page__content a{
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 640px){
  .ww-page__content table,
  .ww-page__content tbody,
  .ww-page__content tr,
  .ww-page__content th,
  .ww-page__content td{
    display: block;
    width: 100%;
  }
  .ww-page__content th{
    background: #f1f5f9;
    padding-bottom: 4px;
    border-bottom: none;
  }
  .ww-page__content td{
    padding-top: 4px;
  }
}

/* =========================================================
   フッター（.ww-footer）
   ========================================================= */

/* ── CTA 帯 ── */
.ww-footer-cta{
  background: linear-gradient(135deg, #050f25 0%, #0b1c40 60%, #1a1040 100%);
  padding: 48px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ww-footer-cta::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(300px 300px at 20% 50%, rgba(37,99,235,.18), transparent 70%),
    radial-gradient(200px 200px at 80% 30%, rgba(124,58,237,.15), transparent 70%);
  pointer-events: none;
}
.ww-footer-cta__inner{
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.ww-footer-cta__label{
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  color: #7dd3fc;
  background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.25);
  border-radius: 999px; padding: 3px 12px; margin: 0 0 12px;
  text-transform: uppercase;
}
.ww-footer-cta__title{
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900; color: #fff;
  margin: 0 0 8px; line-height: 1.25;
}
.ww-footer-cta__sub{
  font-size: .88rem; color: #94a3b8;
  margin: 0 0 24px;
}
.ww-footer-cta__btns{
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.ww-footer-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 12px;
  font-weight: 800; font-size: 1rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 180px;
}
.ww-footer-btn:hover{ transform: translateY(-2px); }
.ww-footer-btn--line{
  background: linear-gradient(180deg, #06c755, #04a947);
  color: #fff;
  box-shadow: 0 6px 20px rgba(6,199,85,.35);
}
.ww-footer-btn--ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #e2e8f0;
}
.ww-footer-btn--ghost:hover{
  background: rgba(255,255,255,.14);
}

/* ── メインフッター ── */
.ww-footer-main{
  background: #0b1221;
  padding: 48px 16px;
}
.ww-footer-main__inner{
  max-width: 1100px; margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .ww-footer-main__inner{
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
}

/* ブランドエリア */
.ww-footer-brand__logo{
  display: inline-block;
  font-size: 1.2rem; font-weight: 900; letter-spacing: .1em;
  color: #fff; text-decoration: none;
  margin-bottom: 12px;
}
.ww-footer-brand__tagline{
  font-size: .85rem; color: #64748b;
  line-height: 1.7; margin: 0;
  max-width: 300px;
}

/* ナビ共通 */
.ww-footer-nav__title{
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: #475569; text-transform: uppercase;
  margin: 0 0 12px; padding: 0;
}
.ww-footer-nav__list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.ww-footer-nav__list a{
  color: #94a3b8; text-decoration: none;
  font-size: .88rem;
  transition: color .12s;
}
.ww-footer-nav__list a:hover{ color: #e2e8f0; }

/* 未設定リンク（管理画面へ誘導） */
.ww-footer-nav__unset a{
  color: #475569 !important;
}
.ww-footer-nav__badge{
  display: inline-block;
  margin-left: 6px;
  font-size: .68rem; font-weight: 700;
  color: #f59e0b;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 4px; padding: 1px 5px;
  vertical-align: middle;
}
/* フロントエンドでは未設定バッジを非表示（管理者以外） */
body:not(.logged-in) .ww-footer-nav__unset{ display: none; }

/* ── コピーライト ── */
.ww-footer-bottom{
  background: #060d1a;
  padding: 16px;
  text-align: center;
}
.ww-footer-bottom p{
  margin: 0;
  font-size: .78rem; color: #475569;
}

.entry-content h1,.entry-content h2{scroll-margin-top:90px}
.toc{background:#f0f7ff;border:1px solid #dbeafe;border-radius:12px;padding:16px}

/* ブログ（一覧/記事/アーカイブ）ではハンバーガーを消す。LINEボタンはそのまま */
@media (max-width: 980px) {
  /* ハンバーガー本体 */
  .blog .site-header .burger,
  .single-post .site-header .burger,
  .archive .site-header .burger,
  /* 念のため、aria-controls で指定されているボタンも */
  .blog .site-header [aria-controls="wwx-drawer"],
  .single-post .site-header [aria-controls="wwx-drawer"],
  .archive .site-header [aria-controls="wwx-drawer"] {
    display: none !important;
  }

  /* ドロワーとスクリーンを完全に無効化（誤作動防止） */
  .blog #wwx-drawer,
  .single-post #wwx-drawer,
  .archive #wwx-drawer,
  .blog #wwx-scrim,
  .single-post #wwx-scrim,
  .archive #wwx-scrim {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* ===============================
   Wonderwall Blog – Article Pro Styling
   この記事内だけに効かせる安全なスコープ
   =============================== */
:root{
  --ww-brand:#2e65f6;            /* ヒーローに合わせたブルー */
  --ww-accent:#10b981;           /* ミント/グリーン */
  --ww-ink:#0f172a;              /* 濃い文字 */
  --ww-ink-2:#334155;            /* 補助文字 */
  --ww-muted:#94a3b8;            /* 薄い文字 */
  --ww-bg:#f8fafc;               /* ページ背景 */
  --ww-card:#ffffff;             /* カード背景 */
  --ww-line:#e2e8f0;             /* 線 */
  --ww-shadow:0 10px 25px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.05);
  --ww-radius:16px;
  --ww-radius-sm:12px;
  --ww-radius-lg:20px;
}

/* WordPressの本文ラッパーに広く対応 */
.entry-content, .wp-block-post-content, .post .entry-content, .single-post .entry-content{
  color:var(--ww-ink);
  line-height:1.9;
  font-size:16.5px;
}

/* アンカー位置ズレ（固定ヘッダー）対策 */
.entry-content [id]{ scroll-margin-top: 92px; }

/* 見出し ---------------------------------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5{
  color:var(--ww-ink);
  letter-spacing:.02em;
  font-weight:800;
}
.entry-content h1{
  font-size: clamp(28px, 5vw, 38px);
  line-height:1.25;
  margin:48px 0 16px;
}

/* H2 — 背景グラデーション＋左ボーダー */
.entry-content h2{
  font-size: clamp(22px, 4vw, 28px);
  position:relative;
  margin:52px 0 18px;
  padding:14px 18px 14px 22px;
  border-radius:0 12px 12px 0;
  background:linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  border-left:5px solid transparent;
  border-image: linear-gradient(180deg, #2563eb, #7c3aed) 1;
  line-height:1.3;
}
.entry-content h2::before{
  content:"";
  position:absolute; left:-5px; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, #2563eb, #7c3aed);
  border-radius:4px 0 0 4px;
}

/* H3 — 細めの左バー */
.entry-content h3{
  font-size: clamp(18px, 3.2vw, 22px);
  margin:40px 0 14px;
  padding-left:14px;
  position:relative;
  color:var(--ww-ink);
  border-bottom:1px solid #e2e8f0;
  padding-bottom:8px;
}
.entry-content h3::before{
  content:"";
  position:absolute; left:0; top:.15em; bottom:.15em;
  width:4px; border-radius:4px;
  background:linear-gradient(180deg, #2563eb, #7c3aed);
}

/* H4 — ダイアモンドバレット */
.entry-content h4{
  font-size: clamp(16px, 2.6vw, 19px);
  margin:32px 0 10px;
  padding-left:20px;
  position:relative;
  color:var(--ww-ink);
}
.entry-content h4::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:10px; height:10px;
  border-radius:3px;
  transform:rotate(45deg);
  background:linear-gradient(135deg, #2563eb, #7c3aed);
}

/* H5 — ラベル型（大文字スタイル） */
.entry-content h5{
  font-size: clamp(13px, 2vw, 15px);
  margin:24px 0 8px;
  padding:4px 10px;
  display:inline-block;
  background:linear-gradient(90deg, #2563eb, #7c3aed);
  color:#fff;
  border-radius:6px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* リード文 -------------------------------- */
.entry-content .lead{
  font-size: clamp(16px, 2.5vw, 18px);
  color:var(--ww-ink-2);
  background:linear-gradient(180deg,#ffffff, #f5f8ff);
  border:1px solid var(--ww-line);
  border-radius:var(--ww-radius);
  padding:18px 20px;
  box-shadow: var(--ww-shadow);
  margin:18px 0 28px;
}

/* ボタン（記事内） ------------------------ */
.entry-content .btns{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 28px; }
.entry-content .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid transparent; text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease;
  box-shadow:0 4px 14px rgba(46,101,246,.18);
}
.entry-content .btn:hover{ transform:translateY(-1px); }
.entry-content .btn--brand{ background:var(--ww-brand); color:#fff; }
.entry-content .btn--line{ background:var(--ww-accent); color:#fff; }
.entry-content .btn--ghost{ background:#fff; border-color:var(--ww-line); color:var(--ww-ink); }

/* 目次（カード型） ------------------------ */
.entry-content .toc-cards{
  display:grid; gap:10px; grid-template-columns:repeat(2,1fr);
  background:linear-gradient(180deg,#fff,#f4f7ff);
  border:1px solid var(--ww-line); border-radius:var(--ww-radius); padding:14px;
  box-shadow: var(--ww-shadow); margin:8px 0 26px;
}
@media (min-width:820px){ .entry-content .toc-cards{ grid-template-columns:repeat(3,1fr); } }
.entry-content .toc-cards a{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px dashed #dbe3ef; border-radius:12px; padding:10px 12px;
  color:var(--ww-ink-2); text-decoration:none; font-weight:600;
}
.entry-content .toc-cards a::before{
  content:"›"; width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; background:#eef3ff; color:var(--ww-brand); font-weight:800;
}
.entry-content .toc-cards a:hover{ border-style:solid; border-color:var(--ww-brand); color:var(--ww-ink); }

/* カード/セクション ----------------------- */
.entry-content .card{
  background:var(--ww-card); border:1px solid var(--ww-line);
  border-radius:var(--ww-radius); padding:18px; box-shadow:var(--ww-shadow);
  margin:18px 0;
}
.entry-content .card--ghost{ background:linear-gradient(180deg,#fff,#f9fbff); }
.entry-content .grid-2{ display:grid; gap:14px; }
@media (min-width:900px){ .entry-content .grid-2{ grid-template-columns:1fr 1fr; } }

/* リスト（チェック/ステップ） ------------ */
.entry-content ul.checklist{ list-style:none; padding:0; margin:8px 0 0; }
.entry-content ul.checklist li{
  position:relative; padding-left:28px; margin:10px 0; color:var(--ww-ink-2); font-weight:600;
}
.entry-content ul.checklist li::before{
  content:""; width:18px; height:18px; border-radius:6px; position:absolute; left:0; top:.35em;
  background:conic-gradient(from 220deg, var(--ww-accent), var(--ww-brand));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M20.285 6.708l-11.025 11.025-5.545-5.545 1.414-1.414 4.131 4.131 9.611-9.611z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M20.285 6.708l-11.025 11.025-5.545-5.545 1.414-1.414 4.131 4.131 9.611-9.611z"/></svg>') center/contain no-repeat;
}

/* 番号ステップ */
.entry-content ol.steps{ counter-reset: s; list-style:none; padding:0; margin:10px 0 0; }
.entry-content ol.steps li{
  counter-increment:s; background:#fff; border:1px solid var(--ww-line);
  border-radius:12px; padding:14px 14px 14px 54px; margin:12px 0; position:relative; box-shadow:var(--ww-shadow);
}
.entry-content ol.steps li::before{
  content:counter(s);
  position:absolute; left:12px; top:12px; width:28px; height:28px; display:grid; place-items:center;
  color:#fff; font-weight:800; border-radius:10px;
  background:linear-gradient(180deg, var(--ww-brand), #5f8cff);
}

/* 吹き出し/注意（コールアウト） ---------- */
.entry-content .callout{
  border-left:6px solid var(--ww-brand);
  background:linear-gradient(180deg,#ffffff,#f7faff);
  border:1px solid var(--ww-line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--ww-shadow); margin:18px 0;
}
.entry-content .callout--warn{ border-left-color:#f59e0b; background:linear-gradient(180deg,#fffbee,#fff8e6); }
.entry-content .callout--ok{ border-left-color:var(--ww-accent); background:linear-gradient(180deg,#effef7,#e8fff8); }
.entry-content .callout strong{ color:var(--ww-ink); }

/* FAQ（details 要素を美しく）-------------- */
.entry-content .faq details{
  border:1px solid var(--ww-line); border-radius:12px; padding:12px 14px; margin:12px 0; background:#fff; box-shadow:var(--ww-shadow);
}
.entry-content .faq summary{ cursor:pointer; font-weight:700; color:var(--ww-ink); list-style:none; }
.entry-content .faq summary::-webkit-details-marker{ display:none; }
.entry-content .faq summary::after{
  content:"＋"; float:right; font-weight:900; color:var(--ww-brand);
}
.entry-content .faq details[open] summary::after{ content:"－"; }

/* 表/コード/引用 --------------------------- */
/* Gutenberg の figure.wp-block-table ラッパー */
.entry-content figure.wp-block-table{
  margin:28px 0;
  overflow-x:auto;          /* モバイル横スクロール */
  border-radius:14px;
  box-shadow:var(--ww-shadow);
  border:1px solid #c7d7f0;
  -webkit-overflow-scrolling:touch;
}
.entry-content figure.wp-block-table table{
  width:100%; min-width:480px;
  border-collapse:collapse;
  border-spacing:0;
}
.entry-content figure.wp-block-table thead tr{
  background:linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
}
.entry-content figure.wp-block-table th{
  padding:13px 16px;
  color:#fff; font-weight:800;
  font-size:.9rem; letter-spacing:.03em;
  text-align:left; white-space:nowrap;
  border-bottom:none;
}
.entry-content figure.wp-block-table td{
  padding:11px 16px;
  border-bottom:1px solid #e2e8f0;
  font-size:.9rem; color:var(--ww-ink-2);
  vertical-align:top;
}
.entry-content figure.wp-block-table tbody tr:nth-child(even) td{
  background:#f0f5ff;
}
.entry-content figure.wp-block-table tbody tr:last-child td{
  border-bottom:none;
}
.entry-content figure.wp-block-table tbody tr:hover td{
  background:#e8f0fe;
  transition:background .12s;
}
/* figcaption */
.entry-content figure.wp-block-table figcaption{
  font-size:.78rem; color:#94a3b8; text-align:center;
  padding:6px 0 0; margin-top:-2px;
}
/* フォールバック：通常の table タグ */
.entry-content table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border:1px solid var(--ww-line); border-radius:12px; box-shadow:var(--ww-shadow); margin:16px 0;
}
.entry-content th, .entry-content td{ padding:12px 14px; border-bottom:1px solid var(--ww-line); }
.entry-content tr:last-child td{ border-bottom:none; }
.entry-content th{ background:#f8fbff; text-align:left; }
.entry-content blockquote{
  margin:18px 0; padding:14px 16px; border-left:5px solid var(--ww-brand);
  background:linear-gradient(180deg,#fff,#f5f8ff); color:var(--ww-ink-2); border-radius:12px;
}
.entry-content pre, .entry-content code{
  background:#0f172a; color:#e2e8f0; border-radius:10px; padding:.2em .45em;
}

/* 余白の最適化 */
.entry-content p{ margin:10px 0 0; }

/* ========== End Card (公式サイト誘導) ========== */
.ww-endcard{
  margin:48px 0 0;
  position:relative;
  padding:24px 20px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  border:1px solid var(--ww-line, #e2e8f0);
  box-shadow:var(--ww-shadow, 0 10px 25px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.05));
  overflow:hidden;
}
.ww-endcard::before{
  content:"";
  position:absolute; inset:-40% -10% auto -10%;
  height:180%;
  background:
    radial-gradient(120px 120px at 20% 30%, rgba(46,101,246,.10), transparent 60%),
    radial-gradient(200px 200px at 80% 10%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
}
.ww-endcard__eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.08em;
  color:var(--ww-muted,#94a3b8); margin:0 0 6px; text-transform:uppercase;
}
.ww-endcard__title{
  margin:0 0 8px; font-weight:900;
  font-size:clamp(20px,3.8vw,28px); color:var(--ww-ink,#0f172a);
}
.ww-endcard__lead{ color:var(--ww-ink-2,#334155); margin:0 0 14px; }
.ww-endcard__btns{ display:flex; gap:10px; flex-wrap:wrap; }

/* 既存の .btn を使っていない場合の軽いフォールバック */
.ww-endcard .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid transparent; text-decoration:none;
}
.ww-endcard .btn--brand{ background:var(--ww-brand,#2e65f6); color:#fff; }
.ww-endcard .btn--ghost{ background:#fff; border-color:var(--ww-line,#e2e8f0); color:var(--ww-ink,#0f172a); }

/* =========================================================
   WONDERWALL EndCard Pro
   ========================================================= */
:root{
  --ww-ink:#0f172a;            /* 見出し色 */
  --ww-ink-2:#334155;          /* 本文色 */
  --ww-muted:#94a3b8;          /* 補助色 */
  --ww-line:#e2e8f0;           /* 枠線 */
  --ww-brand:#2e65f6;          /* コアカラー */
  --ww-accent:#10b981;         /* アクセント */
  --ww-shadow:0 12px 28px rgba(2,6,23,.08), 0 4px 10px rgba(2,6,23,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --ww-ink:#e2e8f0;
    --ww-ink-2:#cbd5e1;
    --ww-muted:#94a3b8;
    --ww-line:#334155;
    --ww-shadow:0 12px 28px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25);
  }
}

.ww-endcard{ margin:56px 0 0; position:relative; }
.ww-endcard--pro{
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid var(--ww-line);
  box-shadow:var(--ww-shadow);
  overflow:hidden;
  isolation:isolate;
}
@media (prefers-color-scheme: dark){
  .ww-endcard--pro{
    background:linear-gradient(180deg,#0b1220,#0f172a);
  }
}

/* 背景ハロー＆ドット */
.ww-endcard__halo{
  position:absolute; inset:-25% -10% auto -10%; height:210%;
  background:
    radial-gradient(140px 140px at 18% 28%, rgba(46,101,246,.18), transparent 62%),
    radial-gradient(230px 230px at 82% 10%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(160px 160px at 70% 70%, rgba(46,101,246,.10), transparent 60%);
  filter:blur(1px);
  pointer-events:none;
  z-index:0;
}
.ww-endcard--pro::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(15,23,42,.06) 60%, transparent 61%) repeat;
  background-size: 22px 22px;
  mix-blend-mode:soft-light;
  opacity:.5;
  pointer-events:none;
  z-index:0;
}

/* インナー */
.ww-endcard__inner{
  position:relative; z-index:1;
  padding:28px 22px;
}
@media (min-width:720px){
  .ww-endcard__inner{ padding:36px 40px; }
}

/* 見出し */
.ww-chip{
  display:inline-flex; align-items:center; gap:6px;
  font:700 11px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ww-muted);
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--ww-line);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px);
}
@media (prefers-color-scheme: dark){
  .ww-chip{ background:rgba(15,23,42,.35); }
}

.ww-endcard__head h2{
  margin:10px 0 8px; font-weight:900; color:var(--ww-ink);
  font-size:clamp(22px,3.4vw,32px);
  letter-spacing:.01em;
}
.ww-endcard__head .ww-fade{
  background:linear-gradient(90deg,var(--ww-brand),var(--ww-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ww-lead{
  margin:0; color:var(--ww-ink-2);
}

/* 箇条書き（チェックアイコン） */
.ww-endcard__bullets{
  display:grid; grid-template-columns:repeat(12,1fr); gap:10px 16px;
  margin:18px 0 22px; padding:0; list-style:none;
}
.ww-endcard__bullets li{
  grid-column: span 12;
  display:flex; align-items:center; gap:10px;
  color:var(--ww-ink); font-weight:700;
}
.ww-endcard__bullets li::before{
  content:""; width:18px; height:18px; border-radius:6px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 45%),
    linear-gradient(135deg,var(--ww-brand),var(--ww-accent));
  mask: radial-gradient(circle at 120% 120%,#000 70%,transparent 71%);
  box-shadow:0 2px 8px rgba(46,101,246,.25);
}
@media (min-width:640px){
  .ww-endcard__bullets li{ grid-column: span 4; }
}

/* ボタン */
.ww-endcard__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.ww-endcard .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 18px; border-radius:14px; font-weight:800;
  border:1px solid transparent; text-decoration:none; user-select:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ww-endcard .btn--brand{
  background:linear-gradient(180deg,var(--ww-brand), color-mix(in oklab, var(--ww-brand), #000 8%));
  color:#fff;
  box-shadow:0 6px 18px rgba(46,101,246,.28);
}
.ww-endcard .btn--brand:hover{ transform:translateY(-1px); }
.ww-endcard .btn--ghost{
  background:#fff; color:var(--ww-ink);
  border-color:var(--ww-line);
}
@media (prefers-color-scheme: dark){
  .ww-endcard .btn--ghost{ background:#0b1220; }
}

/* きらっと演出（主張弱め） */
@keyframes ww-shine {
  0% { background-position:-180% 0; } 100%{ background-position:380% 0; }
}
.btn--shine{
  position:relative; overflow:hidden;
}
.btn--shine::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  background-size:200% 100%;
  mix-blend-mode:screen; opacity:.0;
  animation:ww-shine 2.2s linear infinite;
}
.btn--shine:hover::after{ opacity:.55; }
@media (prefers-reduced-motion: reduce){
  .btn--shine::after{ animation:none; opacity:.0; }
}

/* オプション：記事末で“くっつく”ドック型（使う場合は section に ww-endcard--dock を追加） */
.ww-endcard--dock{ position:sticky; bottom:18px; }

/* ===== EndCard: 2段・特大CTA ===== */
.ww-actions--xl{
  display:grid;
  grid-template-rows:auto auto;   /* 常に2段 */
  gap:14px;
  margin-top:14px;
}
.ww-endcard .btn{ text-decoration:none; user-select:none; }

/* フル幅＆特大サイズ */
.btn--block{ width:100%; }
.btn--xl{
  padding:18px 22px;
  border-radius:16px;
  font-weight:900;
  font-size:clamp(18px,2.2vw,20px);
  letter-spacing:.01em;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:66px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn--xl .btn-txt{ line-height:1.15; }
.btn--xl .btn-sub{
  display:block;
  margin-top:4px;
  font-weight:800;
  font-size:clamp(12px,1.4vw,13px);
  opacity:.92;
}

/* 公式サイト（ブランドブルー） */
.ww-endcard .btn--brand{
  background:linear-gradient(180deg,var(--ww-brand), color-mix(in oklab, var(--ww-brand), #000 8%));
  color:#fff;
  box-shadow:0 10px 26px rgba(46,101,246,.28);
}
.ww-endcard .btn--brand:hover{ transform:translateY(-1px); }

/* LINE（公式グリーン基調） */
.ww-endcard .btn--line{
  background:linear-gradient(180deg,#06c755,#04a947);
  color:#fff;
  box-shadow:0 10px 26px rgba(6,199,85,.25);
  border:1px solid color-mix(in oklab, #04a947, #000 12%);
}
@media (prefers-color-scheme: dark){
  .ww-endcard .btn--line{
    border-color: color-mix(in oklab, #06c755, #000 22%);
  }
}

/* きらっと（控えめ） */
@keyframes ww-shine { 0%{background-position:-180% 0} 100%{background-position:380% 0} }
.btn--shine{ position:relative; overflow:hidden; }
.btn--shine::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  background-size:200% 100%; mix-blend-mode:screen; opacity:0;
  animation:ww-shine 2.2s linear infinite;
}
.btn--shine:hover::after{ opacity:.55; }
@media (prefers-reduced-motion: reduce){ .btn--shine::after{ animation:none; opacity:0; } }

/* =========================================================
   Wonderwall Blog — SKINS (選べる見せ方)
   ※ 既存のblog.cssの最後に追加
========================================================= */

/* 共通トークン（ベース） */
.ww-article{
  --ink:#0f172a; --muted:#667085; --bd:#e6eef8; --card:#fff;
  --brand:#2563eb; --brand-2:#7c3aed; --accent:#0ea5e9;
  --r:16px; --r-lg:22px; --shadow-md:0 10px 24px rgba(2,6,23,.08);
}

/* ====== NEO GLASS（近未来ガラス） ====== */
.ww-skin-neo{
  --brand:#5aa2ff; --brand-2:#8b5cff; --accent:#60a5fa;
}
.ww-skin-neo .lp-hero{
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#f9fbff,#f3f7ff);
  box-shadow:0 30px 60px rgba(2,6,23,.12);
  overflow:hidden; isolation:isolate;
}
.ww-skin-neo .lp-hero::before,
.ww-skin-neo .lp-hero::after{
  content:""; position:absolute; inset:auto; border-radius:999px; filter:blur(50px);
  opacity:.6; z-index:-1;
}
.ww-skin-neo .lp-hero::before{ width:320px;height:320px;left:-80px;top:-60px;background:radial-gradient(closest-side, rgba(90,162,255,.45), transparent 70%); }
.ww-skin-neo .lp-hero::after{ width:360px;height:360px;right:-100px;bottom:-80px;background:radial-gradient(closest-side, rgba(139,92,255,.35), transparent 70%); }
.ww-skin-neo .lp-hero__title .accent{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ww-skin-neo .toc{
  --glass: rgba(255,255,255,.65);
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.45));
  backdrop-filter: blur(8px) saturate(130%);
  border:1px solid rgba(14,23,42,.08); box-shadow: var(--shadow-md); border-radius:16px;
}
.ww-skin-neo .lp-card{ border:1px solid rgba(14,23,42,.06); backdrop-filter: blur(2px); }

/* ====== PAPER JOURNAL（上質紙系） ====== */
.ww-skin-paper{
  --ink:#0e172a; --muted:#475569; --bd:#e6e4dc; --card:#fffdf8;
  --brand:#0ea5e9; --brand-2:#2563eb; --accent:#1d4ed8;
}
.ww-skin-paper .lp-hero{
  border-radius:0; background:
    linear-gradient(180deg,#fffdf8,#fffaf0 60%,#fffefa),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,.02) 28px 29px);
  border:1px solid #efeade; box-shadow:0 12px 30px rgba(84,63,0,.08);
  padding-block:38px;
}
.ww-skin-paper .lp-hero__title{ font-family: "Noto Serif JP", serif; letter-spacing:.01em; }
.ww-skin-paper .lp-section__title{ font-family: "Noto Serif JP", serif; }
.ww-skin-paper .toc{
  background:#fffef9; border:1px solid #efeade; border-radius:12px;
}
.ww-skin-paper .lp-card{
  background:#fffef9; border:1px solid #efeade; box-shadow:0 10px 24px rgba(84,63,0,.06);
}
.ww-skin-paper .lp-section p:first-of-type::first-letter{
  font-family:"Noto Serif JP", serif; font-size:170%; font-weight:700; margin-right:.08em;
}

/* ====== VIVID GRADIENT（ビビッド） ====== */
.ww-skin-vivid{
  --brand:#2563eb; --brand-2:#7c3aed; --accent:#0ea5e9;
}
.ww-skin-vivid .lp-hero{
  color:#fff; border-radius:22px;
  background: radial-gradient(80% 120% at 10% 0%, #2563eb 0%, transparent 40%),
              radial-gradient(100% 140% at 100% 0%, #7c3aed 0%, transparent 45%),
              linear-gradient(180deg,#0b1020,#0e1326 60%,#0b1020);
  box-shadow:0 30px 80px rgba(14,19,38,.45);
}
.ww-skin-vivid .lp-hero__eyebrow{ color:rgba(255,255,255,.85); }
.ww-skin-vivid .lp-badge{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; }
.ww-skin-vivid .toc{ background:#0f1220; border:1px solid rgba(255,255,255,.12); color:#e8ecff; }
.ww-skin-vivid .lp-section__title{ color:#0f172a; border-image: linear-gradient(90deg, var(--brand), var(--brand-2)) 1; border-bottom:4px solid; }

/* ====== MAGAZINE（雑誌風） ====== */
.ww-skin-mag{
  --brand:#0ea5e9; --brand-2:#2563eb;
}
.ww-skin-mag .lp-hero{
  border-left:6px solid var(--brand); background:#f7fbff; box-shadow:0 10px 30px rgba(2,6,23,.08);
}
.ww-skin-mag .lp-hero__title{ letter-spacing:.02em; }
.ww-skin-mag .lp-section__title{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;
}
.ww-skin-mag .lp-section__title::after{
  content:""; height:2px; background:linear-gradient(90deg,var(--brand),transparent);
}
.ww-skin-mag .lp-grid{ --col: minmax(260px, 1fr); display:grid; grid-template-columns: repeat(auto-fit, var(--col)); gap:18px; }

/* ====== MINIMAL MONO（超クリーン：ライト） ====== */
.ww-skin-mono{
  --ink:#0f172a; --muted:#475569; --bd:#eaeef4; --card:#fff;
  --brand:#111827; --brand-2:#0f172a; --accent:#111827;
}
.ww-skin-mono .lp-hero{ background:#ffffff; border:1px solid var(--bd); border-radius:16px; }
.ww-skin-mono .lp-hero__title .accent{ color:var(--brand); text-decoration:underline; text-decoration-thickness:6px; text-underline-offset:6px; }
.ww-skin-mono .toc{ background:#fff; border:1px solid var(--bd); }
.ww-skin-mono .lp-card{ border:1px solid var(--bd); box-shadow:none; }

/* ====== 共通：ボタン強化（shineあり） ====== */
.ww-article .btn--brand{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff;
  box-shadow:0 10px 22px rgba(14,23,42,.18);
}
.ww-article .btn--line{ border:1px solid currentColor; color:var(--brand); background:#fff; }
.ww-article .btn--ghost{ background:#fff; border:1px solid var(--bd); color:var(--ink); }

/* 目次の見栄え（ライト・ガラス系） */
.ww-article .toc{ padding:14px 16px; border-radius:14px; }
.ww-article .toc__title{ font-weight:900; margin-bottom:6px; }
.ww-article .toc__list{ margin:0; padding-left:1em; display:grid; gap:4px; }
.ww-article .toc__list a{ text-decoration: none; border-bottom:1px dashed rgba(14,23,42,.15); }
.ww-article .toc__list a:hover{ border-bottom-color: transparent; }

/* 各ブロックの角丸/影 統一 */
.ww-article .lp-card,
.ww-article .lp-hero,
.ww-article .toc{ border-radius: var(--r-lg); }

/* ===== Blog Index ( /blog/ ) ===== */

/* ── Hero: CSS-only deep blue（画像不要） ── */
.blog-hero{
  position: relative;
  overflow: hidden;
  padding: 72px 16px 56px;
  /* 深みのある3層グラデーション */
  background:
    radial-gradient(ellipse 1000px 700px at 8%  55%, rgba(37,99,235,.36)   0%, transparent 65%),
    radial-gradient(ellipse  700px 500px at 92%  8%, rgba(99,102,241,.28)  0%, transparent 60%),
    radial-gradient(ellipse  500px 350px at 58% 95%, rgba(14,165,233,.20)  0%, transparent 55%),
    linear-gradient(158deg, #040e22 0%, #0b1c40 50%, #060f24 100%);
  color: #f1f5f9;
}

/* ドットグリッド（奥行き感） */
.blog-hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}

/* 下部グロウライン */
.blog-hero::after{
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.55) 35%, rgba(139,92,246,.45) 65%, transparent 100%);
  pointer-events: none;
}

.blog-hero__inner{ max-width:960px; margin:0 auto; position:relative; z-index:1; }

/* アイキャッチバッジ */
.blog-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em;
  color: #7dd3fc;
  background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.30);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}

/* メインタイトル */
.blog-hero__title{
  margin: 14px 0 10px;
  font-size: clamp(24px, 3.8vw, 42px); line-height: 1.2; font-weight: 900;
  color: #fff; letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(37,99,235,.40);
}

/* リード文 */
.blog-hero__lead{
  color: #94a3b8; max-width: 780px;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.8;
}

.blog-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 18px; }

/* 検索フォーム */
.blog-hero__search{ display:flex; gap:8px; margin-top:8px; max-width:640px; }
.blog-hero__search input{
  flex:1; padding:12px 16px;
  border: 1px solid rgba(255,255,255,.12); border-radius:12px;
  background: rgba(255,255,255,.07); color:#fff;
  backdrop-filter: blur(4px); font-size:15px;
}
.blog-hero__search input::placeholder{ color:rgba(255,255,255,.38); }
.blog-hero__search input:focus{
  outline:none;
  border-color: rgba(59,130,246,.60);
  background: rgba(255,255,255,.10);
}
.blog-hero__search button{
  padding:12px 20px; border-radius:12px; border:none;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color:#fff; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow: 0 4px 14px rgba(37,99,235,.40);
  transition: transform .15s ease, box-shadow .15s ease;
}
.blog-hero__search button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,.52);
}

/* カテゴリチップ */
.blog-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.blog-chips .chip{
  display:inline-block;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:6px 12px; color:#cbd5e1; font-size:.85rem;
  backdrop-filter: blur(4px);
  transition: background .15s, border-color .15s, color .15s;
}
.blog-chips .chip:hover{
  background: rgba(37,99,235,.22);
  border-color: rgba(59,130,246,.45);
  color: #fff;
}

/* =========================================================
   カテゴリ / アーカイブ ヒーロー（.arch-hero）
   ========================================================= */
.arch-hero{
  position: relative;
  overflow: hidden;
  padding: 56px 16px 48px;
  background:
    radial-gradient(ellipse 800px 600px at 5%  60%, rgba(37,99,235,.32)  0%, transparent 65%),
    radial-gradient(ellipse 600px 400px at 95% 10%, rgba(99,102,241,.24)  0%, transparent 60%),
    radial-gradient(ellipse 400px 300px at 55% 90%, rgba(14,165,233,.18)  0%, transparent 55%),
    linear-gradient(155deg, #040e22 0%, #0b1c40 50%, #060f24 100%);
  color: #f1f5f9;
}
.arch-hero::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}
.arch-hero::after{
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,.5) 35%, rgba(139,92,246,.4) 65%, transparent 100%);
  pointer-events: none;
}
.arch-hero__inner{
  max-width: 960px; margin: 0 auto;
  position: relative; z-index: 1;
}

/* パンくず */
.arch-hero__bc{ margin-bottom: 16px; }
.arch-hero__bc ol{
  display: flex; gap: 6px; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-size: .8rem; color: #64748b;
}
.arch-hero__bc ol li + li::before{
  content: "›"; margin-right: 6px; color: #475569;
}
.arch-hero__bc a{ color: #94a3b8; text-decoration: none; }
.arch-hero__bc a:hover{ color: #e2e8f0; }

/* CATEGORY バッジ */
.arch-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .78rem; letter-spacing: .1em;
  color: #7dd3fc;
  background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.28);
  padding: 5px 12px; border-radius: 999px;
  margin: 0 0 10px;
}

/* H1 */
.arch-hero__title{
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 44px); line-height: 1.2; font-weight: 900;
  color: #fff; letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(37,99,235,.35);
}

/* 説明文 */
.arch-hero__desc{
  color: #94a3b8; max-width: 720px;
  font-size: clamp(14px, 1.7vw, 16px); line-height: 1.8;
  margin: 0 0 12px;
}
.arch-hero__desc p{ margin: 0; }

/* 件数 */
.arch-hero__count{
  display: inline-block;
  font-size: .82rem; color: #64748b;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px; padding: 4px 12px;
  margin: 0 0 16px;
}

/* CTA */
.arch-hero__ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }

/* 空記事 */
.arch-empty{
  text-align: center; color: #94a3b8;
  padding: 48px 16px; font-size: 1rem;
}

/* arch-about（説明SEOテキスト） */
.arch-about{ border-top: 1px solid #e2e8f0; margin-top: 32px; padding-top: 24px; }

/* ── 記事セクション ── */
.blog-section{max-width:960px;margin:28px auto;padding:0 16px}
.blog-section__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.blog-section__title{font-size:1.25rem;font-weight:800}
.blog-section__more{font-size:.9rem;color:#2563eb}

/* 記事グリッド */
.post-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.post-grid{grid-template-columns:repeat(2,1fr)}}
.post-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 4px 20px rgba(16,24,40,.06);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.post-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(37,99,235,.12)}
.post-card--featured{border-color:#bfdbfe;background:linear-gradient(180deg,#ffffff 0,#f0f7ff 100%)}
.post-card__link{display:block;text-decoration:none;color:inherit}
/* サムネイル */
.post-card__thumb{aspect-ratio:16/9;overflow:hidden;background:#f1f5f9}
.post-card__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.post-card:hover .post-card__thumb img{transform:scale(1.04)}
.post-card__noimg{width:100%;height:100%;background:linear-gradient(135deg,#e0eaff,#f0f4ff);display:flex;align-items:center;justify-content:center}
.post-card__noimg::after{content:"📄";font-size:2rem;opacity:.4}
/* テキスト部分 */
.post-card__body{padding:14px 16px 16px}
.post-card__meta{display:flex;gap:10px;align-items:center;color:#64748b;font-size:.82rem;margin-bottom:6px}
.post-card__cat{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:999px;padding:2px 8px;font-weight:600}
.post-card__title{font-weight:900;line-height:1.35;font-size:1.05rem;margin:4px 0 6px;color:#0f172a}
.post-card__excerpt{color:#475569;font-size:.88rem;line-height:1.6}

/* ページャー */
.blog-pager{margin-top:18px}
.blog-pager .page-numbers{display:inline-block;margin:0 4px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:12px;color:#0f172a;transition:background .15s}
.blog-pager .page-numbers:hover{background:#eff6ff;border-color:#bfdbfe}
.blog-pager .current{background:linear-gradient(135deg,#2563eb,#4f46e5);border-color:transparent;color:#fff;font-weight:700}

/* ブログ紹介・FAQ */
.blog-about{max-width:960px;margin:24px auto;padding:12px 16px}
.blog-about h2{font-weight:900;margin-bottom:8px}
.blog-about__cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 6px}
.blog-faq details{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;margin:8px 0}
.blog-faq summary{cursor:pointer;font-weight:700}

/* ===== Featured Image 基本形 ===== */
.entry__thumb{ position:relative; margin:0 0 24px; border-radius:18px; overflow:hidden;
  box-shadow:0 16px 36px rgba(2,6,23,.12) }
.entry__thumb img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:16/9 }

/* 失敗しにくい“ネオングラデ＋下フェード” */
.entry__thumb.v-gradient::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(124,58,237,.35) 0%, rgba(14,165,233,.20) 35%, rgba(2,6,23,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
}

/* 文字を重ねる予定があっても読みやすい */
.entry__thumb .badges{ position:absolute; left:16px; top:16px; display:flex; gap:8px; z-index:2 }
.entry__thumb .pill{ font:600 12px/1 ui-sans-serif,system-ui; color:#fff; padding:8px 10px; border-radius:999px;
  background:linear-gradient(135deg,#22d3ee,#7c3aed); box-shadow:0 6px 18px rgba(124,58,237,.35) }

/* =========================================================
   Single Article — パンくず・記事ヘッダー
   ========================================================= */

/* パンくず */
.ww-breadcrumb{ margin: 20px 0 0; font-size:.85rem; }
.ww-breadcrumb__list{
  display:flex; flex-wrap:wrap; gap:4px 2px;
  list-style:none; margin:0; padding:0; color:#94a3b8;
}
.ww-breadcrumb__list li{ display:flex; align-items:center; }
.ww-breadcrumb__list li + li::before{ content:"›"; margin-right:6px; color:#cbd5e1; }
.ww-breadcrumb__list a{ color:#2563eb; text-decoration:none; }
.ww-breadcrumb__list a:hover{ text-decoration:underline; }
.ww-breadcrumb__list [aria-current]{ color:#64748b; }

/* RankMath / Yoast が出力するパンくずにも同じ見た目を適用 */
.ww-breadcrumb .breadcrumb_last{ color:#64748b; }
.ww-breadcrumb .breadcrumb{ display:flex; flex-wrap:wrap; gap:4px 2px; font-size:.85rem; color:#94a3b8; }

/* 記事ヘッダー */
.ww-entry-header{ margin: 18px 0 28px; }

.ww-entry-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin-bottom:12px; font-size:.82rem;
}
.ww-entry-cat{
  display:inline-block;
  background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe;
  border-radius:999px; padding:3px 10px; font-weight:700;
  text-decoration:none;
}
.ww-entry-cat:hover{ background:#dbeafe; }
.ww-entry-date{ color:#64748b; }
.ww-entry-updated{
  color:#94a3b8; font-size:.78rem;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; padding:2px 7px;
}
.ww-entry-readtime{
  display:inline-flex; align-items:center; gap:4px;
  color:#64748b; font-size:.78rem;
  background:#f1f5f9; border-radius:6px; padding:2px 7px;
}
.ww-entry-readtime::before{ content:"⏱"; font-size:.8em; }

/* 記事タイトル */
.ww-entry-title{
  font-size: clamp(22px, 3.5vw, 34px);
  line-height: 1.3; font-weight: 900;
  color: #0f172a; letter-spacing:.01em;
  margin: 8px 0 20px;
}

/* =========================================================
   読了進捗バー
   ========================================================= */
.ww-progress{
  position: fixed; top: 0; left: 0;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
  z-index: 9998;
  transition: width .08s linear;
  box-shadow: 0 0 10px rgba(37,99,235,.55);
}

/* =========================================================
   記事 2カラムレイアウト（本文 + サイドバー）
   ========================================================= */
.ww-article-body{
  display: grid;
  gap: 0;
  margin-top: 8px;
}
@media (min-width: 1024px){
  .ww-article-body{
    grid-template-columns: 1fr 288px;
    grid-template-areas: "content sidebar";
    gap: 48px;
    align-items: start;
  }
  .ww-article-content{ grid-area: content; }
  .ww-article-sidebar{ grid-area: sidebar; }
}

/* ── サイドバー ── */
.ww-article-sidebar{
  display: none; /* モバイルは非表示 */
}
@media (min-width: 1024px){
  .ww-article-sidebar{
    display: block;
    position: sticky;
    top: 88px; /* ヘッダー高さ分 */
  }
}

/* ── 目次（共通） ── */
.ww-toc{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.ww-toc__title{
  font-weight: 900; font-size: .8rem; letter-spacing: .06em;
  color: #94a3b8; text-transform: uppercase;
  margin: 0 0 10px; padding: 0;
}
.ww-toc__list{
  margin: 0; padding: 0;
  list-style: none; counter-reset: toc;
  display: grid; gap: 2px;
}
.ww-toc__list li{ counter-increment: toc; }
.ww-toc__list a{
  display: flex; align-items: baseline; gap: 8px;
  color: #334155; text-decoration: none;
  font-size: .88rem; line-height: 1.5;
  padding: 5px 8px; border-radius: 8px;
  transition: background .12s, color .12s;
}
.ww-toc__list a::before{
  content: counter(toc);
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e0eaff; color: #2563eb;
  border-radius: 5px; font-size: .75rem; font-weight: 800;
  flex-shrink: 0;
}
.ww-toc__list a:hover{
  background: #eff6ff; color: #2563eb;
}
.ww-toc__item--sub a{
  padding-left: 20px; font-size: .82rem; color: #64748b;
}
.ww-toc__item--sub a::before{ display: none; }

/* インライン目次（モバイル用） */
.ww-toc--inline{ display: block; }
@media (min-width: 1024px){ .ww-toc--inline{ display: none; } }

/* ── サイドバー CTA ── */
.ww-sidebar-cta{
  background: linear-gradient(160deg, #050f25 0%, #0b1c40 100%);
  border: 1px solid rgba(37,99,235,.25);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(2,6,23,.2);
}
.ww-sidebar-cta__label{
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: #7dd3fc;
  background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.28);
  border-radius: 999px; padding: 3px 10px; margin: 0 0 10px;
}
.ww-sidebar-cta__title{
  font-size: 1.05rem; font-weight: 900; color: #fff;
  line-height: 1.4; margin: 0 0 8px;
}
.ww-sidebar-cta__desc{
  font-size: .82rem; color: #94a3b8; line-height: 1.65; margin: 0 0 14px;
}
.ww-sidebar-cta__btn{
  display: block; width: 100%; text-align: center;
  padding: 12px 10px; border-radius: 12px;
  font-weight: 800; font-size: .9rem; text-decoration: none;
  margin-top: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ww-sidebar-cta__btn:hover{ transform: translateY(-1px); }
.ww-sidebar-cta__btn--line{
  background: linear-gradient(180deg, #06c755, #04a947);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6,199,85,.3);
}
.ww-sidebar-cta__btn--ghost{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #cbd5e1;
}

/* =========================================================
   FAQ セクション（.ww-faq-section）
   h2 id="faq" 以降を PHP でラップしたエリア
   ========================================================= */
.ww-faq-section{
  margin: 8px 0 0;
  display: grid;
  gap: 12px;
}

/* --- Q カード：<strong> だけの段落 --- */
.ww-faq-section p:has(> strong:only-child){
  position: relative;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  padding: 14px 16px 14px 52px;
  margin: 0;
  font-weight: 800;
  color: #1e40af;
  font-size: 1rem;
}
.ww-faq-section p:has(> strong:only-child)::before{
  content: "Q";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-weight: 900; font-size: .85rem;
  border-radius: 8px;
}

/* --- A カード：通常の段落 --- */
.ww-faq-section p{
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 14px 52px;
  margin: 0;
  color: var(--ww-ink-2);
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
}
.ww-faq-section p::before{
  content: "A";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; font-weight: 900; font-size: .85rem;
  border-radius: 8px;
}

/* --- 混在段落内の <strong> Q テキスト（A文末にQが埋め込まれる場合）--- */
.ww-faq-section p > strong:not(:only-child){
  display: block;
  margin: 14px -16px -14px -52px;  /* カード内側に広げて区切り線風に */
  padding: 10px 16px 10px 52px;
  background: linear-gradient(135deg, #eff6ff, #f0f4ff);
  border-top: 1px solid #bfdbfe;
  border-radius: 0 0 12px 12px;
  color: #1e40af;
  font-size: .95rem;
}

/* リストがFAQ内にある場合 */
.ww-faq-section ul,
.ww-faq-section ol{
  margin: 0; padding-left: 20px;
}

/* =========================================================
   関連記事ブロック（.ww-related）
   ========================================================= */
.ww-related{
  margin: 48px 0 0;
  display: grid;
  gap: 40px;
}

/* セクション見出し */
.ww-related__title{
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--ww-ink);
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid #e2e8f0;
  position: relative;
}
.ww-related__title::after{
  content: "";
  position: absolute; bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  border-radius: 2px;
}

/* カードグリッド */
.ww-related__grid{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 680px){
  .ww-related__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (min-width: 681px) and (max-width: 900px){
  .ww-related__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* カード */
.ww-related__link{
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(2,6,23,.05);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.ww-related__link:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(2,6,23,.10);
}

/* サムネイル */
.ww-related__thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f1f5f9;
}
.ww-related__thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ww-related__link:hover .ww-related__thumb img{
  transform: scale(1.04);
}
.ww-related__noimg{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #e0e7ff, #ddd6fe);
}

/* テキスト */
.ww-related__body{
  padding: 10px 12px 12px;
}
.ww-related__date{
  display: block;
  font-size: .75rem;
  color: #94a3b8;
  margin-bottom: 4px;
}
.ww-related__ttl{
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ww-ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* モバイル：横並びカード */
@media (max-width: 680px){
  .ww-related__link{
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .ww-related__thumb{
    width: 96px;
    flex-shrink: 0;
    aspect-ratio: unset;
  }
  .ww-related__body{
    padding: 8px 10px;
  }
  .ww-related__ttl{
    font-size: .85rem;
    -webkit-line-clamp: 3;
  }
}

/* 「すべて見る」リンク */
.ww-related__more{
  display: inline-block;
  margin-top: 12px;
  font-size: .82rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s;
}
.ww-related__more:hover{
  border-bottom-color: #2563eb;
}

/* =========================================================
   Gutenberg wp-block-list のデフォルト整形
   ========================================================= */
.entry-content .wp-block-list{
  padding-left: 1.4em;
  margin: 12px 0;
}
.entry-content .wp-block-list li{
  margin: 6px 0;
  color: var(--ww-ink-2);
  line-height: 1.75;
}