/*
Theme Name:    AI Hacks
Theme URI:     https://ai-hacks.net/
Author:        AI Hacks
Description:   AIで稼げるか、初心者が自ら実証する検証メディア。ガジェット系A — 細罫・モノスペース・スペック表の語彙で構築。
Version:       1.0.9
Requires PHP:  7.4
License:       GPL v2 or later
Text Domain:   ai-hacks
*/

/* =============================================================
   Design Tokens
   ============================================================= */
:root {
  /* Brand */
  --ah-teal: #5dcaa5;
  --ah-teal-soft: #e8f7f0;

  /* Category colors — matched to OG card palette */
  --ah-blue:        #7fa3cb;          /* ズルく知る   — dusty blue */
  --ah-blue-soft:   #eaf0f7;
  --ah-green:       #5dbf99;          /* ズルく始める — mint */
  --ah-green-soft:  #e8f5ee;
  --ah-purple:      #c79bd0;          /* ズルく使う   — lavender */
  --ah-purple-soft: #f4ebf6;
  --ah-gold:        #c9a24a;          /* ズルく稼ぐ   — mustard */
  --ah-gold-soft:   #f5ecd6;

  /* Neutrals */
  --ah-ink: #0b0b0c;
  --ah-body: #1a1c20;
  --ah-muted: #6b7280;
  --ah-faint: #9aa0a6;
  --ah-line: #e6e7ea;
  --ah-line-soft: #f1f2f4;
  --ah-bg: #ffffff;
  --ah-bg-alt: #fafafa;

  /* Type */
  --ah-sans: -apple-system, "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  --ah-mono: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
}

/* =============================================================
   Reset & Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ah-sans);
  color: var(--ah-body);
  background: var(--ah-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ah-ink); }
.mono { font-family: var(--ah-mono); }
.screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================
   Header
   ============================================================= */
.ah-header { background: #fff; border-bottom: 1px solid var(--ah-line); }
.ah-header__inner { max-width: 1200px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ah-logo { display: flex; align-items: center; text-decoration: none; }
.ah-logo img { height: 38px; width: auto; display: block; }
.ah-gnav { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.ah-gnav li { margin: 0; padding: 0; }
.ah-gnav a { display: flex; align-items: baseline; gap: 8px; padding: 12px 20px; text-decoration: none; color: var(--ah-ink); font-size: 14px; font-weight: 600; position: relative; }
.ah-gnav a .num { font-size: 10.5px; color: var(--ah-faint); letter-spacing: 0.08em; font-family: var(--ah-mono); }
.ah-gnav a::after { content:""; position: absolute; left: 16px; right: 16px; bottom: -2px; height: 2px; background: transparent; transition: background .15s; }
.ah-gnav a[data-cat="zuruku-shiru"]:hover::after  { background: var(--ah-blue); }
.ah-gnav a[data-cat="zuruku-hajimeru"]:hover::after { background: var(--ah-green); }
.ah-gnav a[data-cat="zuruku-tsukau"]:hover::after   { background: var(--ah-purple); }
.ah-gnav a[data-cat="zuruku-kasegu"]:hover::after  { background: var(--ah-gold); }
.ah-menu { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.ah-menu span { width: 22px; height: 2px; background: var(--ah-ink); display: block; }

/* =============================================================
   Footer (AdSense-ready · 4 required legal links)
   ============================================================= */
.ah-footer { background: var(--ah-ink); color: #d8d8da; margin-top: 64px; }
.ah-footer__inner { max-width: 1200px; margin: 0 auto; padding: 56px 28px 36px; display: grid; grid-template-columns: 1.2fr 2fr; gap: 56px; }
.ah-footer__brand .mark { width: 200px; height: auto; display: block; filter: invert(1) brightness(1.1); }
.ah-footer__brand p { font-size: 13px; color: #a0a0a3; line-height: 1.85; margin: 18px 0; }
.ah-footer__brand .meta { font-size: 10.5px; color: #6a6a6e; letter-spacing: 0.1em; font-family: var(--ah-mono); }
.ah-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ah-footer__cols .hd { font-size: 10.5px; letter-spacing: 0.15em; color: var(--ah-teal); margin-bottom: 14px; text-transform: uppercase; font-family: var(--ah-mono); }
.ah-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.ah-footer__cols a { display: block; color: #d8d8da; text-decoration: none; font-size: 13px; line-height: 2.1; }
.ah-footer__cols a:hover { color: var(--ah-teal); }

/* =============================================================
   Section head & buttons
   ============================================================= */
.sec-head { margin-bottom: 22px; }
.sec-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sec-head .kicker { font-size: 10.5px; letter-spacing: 0.15em; color: var(--ah-teal); margin-bottom: 4px; text-transform: uppercase; font-family: var(--ah-mono); }
.sec-head h2 { font-size: 22px; font-weight: 700; color: var(--ah-ink); margin: 0; letter-spacing: 0.02em; }
.seeall { font-size: 11px; color: var(--ah-muted); text-decoration: none; letter-spacing: 0.08em; font-family: var(--ah-mono); }
.seeall:hover { color: var(--ah-ink); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--ah-ink); transition: background .15s, color .15s; cursor: pointer; }
.btn.primary { background: var(--ah-ink); color: #fff; }
.btn.primary:hover { background: var(--ah-teal); border-color: var(--ah-teal); color: var(--ah-ink); }
.btn.ghost { background: transparent; color: var(--ah-ink); }
.btn.ghost:hover { background: var(--ah-ink); color: #fff; }

/* =============================================================
   Front Page — Variant A (Spec-table type)
   ============================================================= */
.top-a { background: #fff; }

/* HERO */
.topa-hero { padding: 64px 28px 56px; background: #fafafa; border-bottom: 1px solid var(--ah-line); }
.topa-hero__inner { max-width: 980px; margin: 0 auto; }
.topa-hero__logo { display: block; width: 360px; max-width: 80%; height: auto; margin: 0 0 14px -8px; }
.topa-hero__sub { font-size: 12px; color: var(--ah-teal); letter-spacing: 0.1em; margin-bottom: 28px; font-family: var(--ah-mono); }
.topa-hero h1 { font-size: 52px; line-height: 1.25; font-weight: 800; color: var(--ah-ink); margin: 0 0 22px; letter-spacing: 0.01em; }
.topa-hero .lead { font-size: 16px; color: var(--ah-body); line-height: 1.95; margin: 0 0 36px; max-width: 680px; }
.topa-hero__cta { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap; }
.topa-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ah-line); background: #fff; }
.topa-hero__stats > div { padding: 14px 18px; border-right: 1px solid var(--ah-line); }
.topa-hero__stats > div:last-child { border-right: none; }
.topa-hero__stats .k { display: block; font-size: 10px; letter-spacing: 0.12em; color: var(--ah-faint); font-family: var(--ah-mono); }
.topa-hero__stats .v { display: block; font-size: 22px; font-weight: 700; color: var(--ah-ink); margin-top: 4px; font-family: var(--ah-mono); }

/* JOURNEY */
.topa-journey { max-width: 1200px; margin: 0 auto; padding: 80px 28px 32px; }
.topa-journey__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ah-line); background: var(--ah-line); }
.topa-cat { background: #fff; padding: 24px 22px 22px; text-decoration: none; color: var(--ah-ink); position: relative; transition: background .15s; display: block; }
.topa-cat:hover { background: #fafafa; }
.topa-cat .num { display: block; font-size: 11px; letter-spacing: 0.12em; color: var(--ah-faint); margin-bottom: 6px; font-family: var(--ah-mono); }
.topa-cat .bar { display: block; width: 32px; height: 3px; background: var(--ah-ink); margin-bottom: 14px; }
.topa-cat[data-cat="zuruku-shiru"] .bar  { background: var(--ah-blue); }
.topa-cat[data-cat="zuruku-hajimeru"] .bar { background: var(--ah-green); }
.topa-cat[data-cat="zuruku-tsukau"] .bar   { background: var(--ah-purple); }
.topa-cat[data-cat="zuruku-kasegu"] .bar  { background: var(--ah-gold); }
.topa-cat h3 { font-size: 18px; margin: 0 0 4px; letter-spacing: 0.02em; }
.topa-cat .role { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ah-faint); font-family: var(--ah-mono); }
.topa-cat p { font-size: 13.5px; color: var(--ah-body); line-height: 1.85; margin: 12px 0; }
.topa-cat .more { font-size: 11px; color: var(--ah-ink); letter-spacing: 0.08em; font-family: var(--ah-mono); }

/* LATEST */
.topa-latest { max-width: 1200px; margin: 0 auto; padding: 56px 28px; }
.topa-latest__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.topa-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ah-ink); border: 1px solid var(--ah-line); background: #fff; padding: 20px 22px 18px; transition: border-color .15s, background .15s; border-left: 3px solid var(--ah-ink); }
.topa-card[data-cat="zuruku-shiru"]  { border-left-color: var(--ah-blue); }
.topa-card[data-cat="zuruku-hajimeru"] { border-left-color: var(--ah-green); }
.topa-card[data-cat="zuruku-tsukau"]   { border-left-color: var(--ah-purple); }
.topa-card[data-cat="zuruku-kasegu"]  { border-left-color: var(--ah-gold); }
.topa-card:hover { background: #fafafa; }
.topa-card__head { display: flex; align-items: center; gap: 10px; }
.topa-card__head .catname { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 2px; }
.topa-card__head .catname[data-cat="zuruku-shiru"]  { color: #2c5a8a; background: var(--ah-blue-soft); }
.topa-card__head .catname[data-cat="zuruku-hajimeru"] { color: #1f7a55; background: var(--ah-green-soft); }
.topa-card__head .catname[data-cat="zuruku-tsukau"]   { color: #7d4d8b; background: var(--ah-purple-soft); }
.topa-card__head .catname[data-cat="zuruku-kasegu"]  { color: #946700; background: var(--ah-gold-soft); }
.topa-card__head .catnum { margin-left: auto; font-size: 10.5px; color: var(--ah-faint); letter-spacing: 0.05em; font-family: var(--ah-mono); }
.topa-card h3 { font-size: 17px; line-height: 1.55; margin: 0; letter-spacing: 0.01em; font-weight: 700; color: var(--ah-ink); }
.topa-card p { font-size: 14px; color: var(--ah-body); line-height: 1.75; margin: 0; flex: 1; }
.topa-card .meta { display: flex; gap: 8px; font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; padding-top: 8px; border-top: 1px dashed var(--ah-line); margin-top: 4px; font-family: var(--ah-mono); }

/* ABOUT */
.topa-about { max-width: 1200px; margin: 0 auto; padding: 56px 28px 32px; }
.topa-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 8px; }
.topa-about__copy p { font-size: 15px; line-height: 1.95; color: var(--ah-body); margin: 0 0 16px; }
.topa-about__specs { border: 1px solid var(--ah-line); background: #fff; }
.topa-about__specs .row { display: grid; grid-template-columns: 130px 1fr; padding: 14px 20px; border-bottom: 1px dashed var(--ah-line); font-size: 14px; }
.topa-about__specs .row:last-child { border-bottom: none; }
.topa-about__specs .k { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ah-faint); padding-top: 2px; font-family: var(--ah-mono); }
.topa-about__specs .v { color: var(--ah-ink); font-weight: 600; }

/* =============================================================
   Mobile (≤760px)
   ============================================================= */
@media (max-width: 760px) {
  .ah-header__inner { padding: 14px 18px; }
  .ah-logo img { height: 34px; }
  .ah-gnav { display: none; }
  .ah-menu { display: flex; }

  .topa-hero { padding: 40px 20px 44px; }
  .topa-hero__logo { width: 280px; margin-left: -4px; }
  .topa-hero__sub { font-size: 11.5px; margin-bottom: 20px; }
  .topa-hero h1 { font-size: 32px; line-height: 1.35; margin-bottom: 18px; }
  .topa-hero .lead { font-size: 15.5px; line-height: 1.95; margin-bottom: 28px; }
  .topa-hero__cta { gap: 10px; margin-bottom: 32px; flex-direction: column; align-items: stretch; }
  .topa-hero__cta .btn { justify-content: center; }
  .topa-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .topa-hero__stats > div { padding: 16px 18px; border-bottom: 1px solid var(--ah-line); }
  .topa-hero__stats > div:nth-child(2) { border-right: none; }
  .topa-hero__stats > div:nth-child(3) { border-bottom: none; border-right: none; }
  .topa-hero__stats .v { font-size: 20px; }

  .sec-head h2 { font-size: 20px; }

  .topa-journey { padding: 56px 20px 24px; }
  .topa-journey__grid { grid-template-columns: 1fr; gap: 1px; }
  .topa-cat { padding: 22px 22px 20px; }
  .topa-cat h3 { font-size: 19px; }
  .topa-cat p { font-size: 14.5px; }

  .topa-latest { padding: 40px 20px; }
  .topa-latest__grid { grid-template-columns: 1fr; gap: 14px; }
  .topa-card { padding: 18px 20px 16px; }
  .topa-card h3 { font-size: 17.5px; line-height: 1.55; }
  .topa-card p { font-size: 14.5px; line-height: 1.8; }

  .topa-about { padding: 40px 20px 28px; }
  .topa-about__grid { grid-template-columns: 1fr; gap: 28px; }
  .topa-about__copy p { font-size: 15px; }

  .ah-footer { margin-top: 40px; }
  .ah-footer__inner { padding: 40px 20px 28px; grid-template-columns: 1fr; gap: 32px; }
  .ah-footer__brand .mark { width: 180px; }
  .ah-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}
/* =====================================================
   固定ページ共通スタイル
   ===================================================== */
.ah-static-page { max-width: 800px; margin: 0 auto; padding: 48px 28px 80px; }
.ah-page-header { border-bottom: 1px solid var(--ah-line); padding-bottom: 24px; margin-bottom: 40px; }
.ah-page-header__kicker { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ah-faint); text-transform: uppercase; margin-bottom: 8px; }
.ah-page-header__title { font-size: 28px; font-weight: 800; color: var(--ah-ink); margin: 0 0 8px; }
.ah-page-header__meta { font-family: var(--ah-mono); font-size: 11px; color: var(--ah-faint); margin: 0; letter-spacing: 0.05em; }
.ah-page-body { font-size: 15px; line-height: 1.9; color: var(--ah-body); }
.ah-page-section { margin-bottom: 36px; }
.ah-page-section h2 { font-size: 17px; font-weight: 700; color: var(--ah-ink); margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--ah-ink); }
.ah-page-section p { margin: 0 0 12px; }
.ah-page-section a { color: var(--ah-ink); text-underline-offset: 3px; }

/* AI Hacksとは */
.ah-about-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ah-about-cat { border: 1px solid var(--ah-line); padding: 16px; border-top: 2px solid; }
.ah-about-cat[data-cat="zuruku-shiru"]    { border-top-color: #7fa3cb; }
.ah-about-cat[data-cat="zuruku-hajimeru"] { border-top-color: #5dbf99; }
.ah-about-cat[data-cat="zuruku-tsukau"]   { border-top-color: #c79bd0; }
.ah-about-cat[data-cat="zuruku-kasegu"]   { border-top-color: #c9a24a; }
.ah-about-cat__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ah-about-cat__num { font-family: var(--ah-mono); font-size: 11px; color: var(--ah-faint); letter-spacing: 0.1em; }
.ah-about-cat__name { font-size: 15px; font-weight: 700; color: var(--ah-ink); }
.ah-about-cat p { font-size: 13px; color: var(--ah-muted); line-height: 1.7; margin: 0; }
.ah-about-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ah-about-table tr { border-bottom: 1px dashed var(--ah-line); }
.ah-about-table th { text-align: left; padding: 12px 16px 12px 0; color: var(--ah-muted); font-weight: 500; width: 140px; white-space: nowrap; }
.ah-about-table td { padding: 12px 0; color: var(--ah-body); }
.ah-about-table a { color: var(--ah-ink); text-underline-offset: 3px; }

/* お問い合わせ */
.ah-contact-note { border: 1px solid var(--ah-line); border-left: 3px solid var(--ah-faint); background: var(--ah-bg-alt); padding: 14px 16px; margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ah-contact-note__label { font-family: var(--ah-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ah-faint); text-transform: uppercase; padding-top: 3px; }
.ah-contact-note p { font-size: 13.5px; color: var(--ah-muted); line-height: 1.75; margin: 0; }
.ah-contact-email { border: 1px solid var(--ah-line); padding: 20px 24px; display: flex; align-items: center; gap: 16px; }
.ah-contact-email__label { font-family: var(--ah-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ah-faint); text-transform: uppercase; }
.ah-contact-email__addr { font-size: 16px; font-weight: 700; color: var(--ah-ink); text-decoration: none; }
.ah-contact-email__addr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* サイトマップ */
.ah-sitemap-list { list-style: none; padding: 0; margin: 0; }
.ah-sitemap-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--ah-line); font-size: 14px; }
.ah-sitemap-list li:last-child { border-bottom: none; }
.ah-sitemap-list a { color: var(--ah-body); text-decoration: none; flex: 1; }
.ah-sitemap-list a:hover { color: var(--ah-ink); text-decoration: underline; text-underline-offset: 3px; }
.ah-sitemap-date { font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); white-space: nowrap; }
.ah-sitemap-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ah-sitemap-cat { border: 1px solid var(--ah-line); border-top: 2px solid; }
.ah-sitemap-cat[data-cat="zuruku-shiru"]    { border-top-color: #7fa3cb; }
.ah-sitemap-cat[data-cat="zuruku-hajimeru"] { border-top-color: #5dbf99; }
.ah-sitemap-cat[data-cat="zuruku-tsukau"]   { border-top-color: #c79bd0; }
.ah-sitemap-cat[data-cat="zuruku-kasegu"]   { border-top-color: #c9a24a; }
.ah-sitemap-cat__link { display: block; padding: 14px 16px; text-decoration: none; color: var(--ah-body); transition: background 0.12s; }
.ah-sitemap-cat__link:hover { background: var(--ah-bg-alt); }
.ah-sitemap-cat__num { display: block; font-family: var(--ah-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ah-faint); margin-bottom: 4px; }
.ah-sitemap-cat__name { display: block; font-size: 15px; font-weight: 700; color: var(--ah-ink); margin-bottom: 4px; }
.ah-sitemap-cat__desc { display: block; font-size: 12px; color: var(--ah-muted); }

/* プロフィール */
.ah-profile-card { display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: start; border: 1px solid var(--ah-line); padding: 24px; }
.ah-profile-card__avatar { width: 80px; height: 80px; background: var(--ah-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--ah-mono); font-size: 18px; font-weight: 700; flex-shrink: 0; }
.ah-profile-card__name { font-size: 18px; font-weight: 700; color: var(--ah-ink); margin-bottom: 4px; }
.ah-profile-card__tag { display: inline-block; font-family: var(--ah-mono); font-size: 10px; letter-spacing: 0.1em; color: #7fa3cb; background: #e6f1fb; padding: 3px 8px; border-radius: 2px; margin-bottom: 12px; }
.ah-profile-card__bio { font-size: 14px; color: var(--ah-muted); line-height: 1.8; margin: 0; }
.ah-profile-stats { display: flex; border: 1px solid var(--ah-line); background: var(--ah-bg-alt); width: fit-content; }
.ah-profile-stat { padding: 12px 24px; border-right: 1px solid var(--ah-line); text-align: center; }
.ah-profile-stat:last-child { border-right: none; }
.ah-profile-stat .k { display: block; font-family: var(--ah-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ah-faint); text-transform: uppercase; margin-bottom: 4px; }
.ah-profile-stat .v { font-size: 15px; font-weight: 700; color: var(--ah-ink); }
.ah-profile-links { display: flex; flex-direction: column; gap: 8px; }
.ah-profile-link { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ah-line); padding: 14px 18px; text-decoration: none; color: var(--ah-body); transition: border-color 0.15s, background 0.15s; }
.ah-profile-link:hover { border-color: var(--ah-ink); background: var(--ah-bg-alt); }
.ah-profile-link__icon { font-family: var(--ah-mono); font-size: 13px; font-weight: 700; color: var(--ah-ink); width: 28px; text-align: center; }
.ah-profile-link__label { font-size: 14px; font-weight: 500; color: var(--ah-ink); flex: 1; }
.ah-profile-link__arrow { font-family: var(--ah-mono); font-size: 13px; color: var(--ah-faint); }

/* page.php レイアウト */
.ah-page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px 80px; display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: start; }
.ah-page-wrap__side { position: sticky; top: 28px; padding-top: 48px; }
.ah-page-wrap__main { padding-top: 48px; }

/* ah-*ブロック（記事内カスタムCSS） */
.ah { font-family: var(--ah-sans); color: var(--ah-body); line-height: 1.75; }
.ah * { box-sizing: border-box; }
.ah-summary { border: 1px solid var(--ah-line); border-top: 2px solid var(--ah-ink); background: var(--ah-bg); padding: 24px 24px 20px; margin: 28px 0; }
.ah-summary__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--ah-line); }
.ah-summary__tag { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ah-teal); background: var(--ah-teal-soft); padding: 3px 8px; border-radius: 2px; text-transform: uppercase; }
.ah-summary__title { font-size: 15px; font-weight: 700; color: var(--ah-ink); margin: 0; }
.ah-summary__meta { margin-left: auto; font-family: var(--ah-mono); font-size: 11px; color: var(--ah-faint); }
.ah-summary__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ah-summary__list li { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: baseline; font-size: 14.5px; }
.ah-summary__list li .num { font-family: var(--ah-mono); font-size: 11px; color: var(--ah-muted); }
.ah-conclusion { border: 1px solid var(--ah-ink); background: var(--ah-ink); color: #fff; padding: 28px; margin: 36px 0; }
.ah-conclusion__label { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-teal); margin-bottom: 8px; display: block; }
.ah-conclusion__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; line-height: 1.5; }
.ah-conclusion__body { font-size: 14.5px; opacity: 0.88; margin-bottom: 18px; line-height: 1.85; }

/* モバイル対応 */
@media (max-width: 860px) {
  .ah-page-wrap { grid-template-columns: 1fr; padding: 0 20px 60px; gap: 32px; }
  .ah-page-wrap__side { position: static; padding-top: 0; }
  .ah-page-wrap__main { padding-top: 28px; }
  .ah-about-cats { grid-template-columns: 1fr; }
  .ah-sitemap-cats { grid-template-columns: 1fr; }
  .ah-profile-card { grid-template-columns: 1fr; }
  .ah-profile-stats { flex-wrap: wrap; }
  .ah-profile-stats { width: 100%; flex-wrap: nowrap; }
  .ah-profile-stat { flex: 1 1 0; min-width: 0; padding: 12px 10px; }
}
/* =====================================================
   体系図ブロック CSS (diagrams)
   ===================================================== */

/* ===== ① Before/After 図 ===== */
.ah-before-after { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-before-after__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-before-after__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-before-after__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-before-after__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.ah-before-after__col { padding: 20px 22px 18px; }
.ah-before-after__col.is-before { border-right: 1px dashed var(--ah-line); background: var(--ah-bg); }
.ah-before-after__col.is-after { border-left: 1px dashed var(--ah-line); background: linear-gradient(0deg, rgba(93,202,165,0.04), rgba(93,202,165,0.04)); }
.ah-before-after__col .lbl { display: inline-block; font-size: 10.5px; letter-spacing: 0.15em; padding: 3px 8px; border-radius: 2px; margin-bottom: 10px; text-transform: uppercase; }
.ah-before-after__col.is-before .lbl { background: var(--ah-line-soft); color: var(--ah-muted); }
.ah-before-after__col.is-after .lbl { background: var(--ah-teal-soft); color: var(--ah-teal); }
.ah-before-after__col h4 { font-size: 15px; font-weight: 700; color: var(--ah-ink); margin: 0 0 14px; letter-spacing: 0.01em; line-height: 1.5; }
.ah-before-after__col ul { list-style: none; padding: 0; margin: 0; }
.ah-before-after__col li { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--ah-line); font-size: 13px; align-items: baseline; }
.ah-before-after__col li:first-child { border-top: none; }
.ah-before-after__col li .k { font-size: 10.5px; letter-spacing: 0.05em; color: var(--ah-faint); text-transform: uppercase; }
.ah-before-after__col li .v { font-weight: 600; color: var(--ah-body); }
.ah-before-after__col li .v small { display: block; font-family: var(--ah-mono); font-size: 10px; color: var(--ah-faint); font-weight: 500; margin-top: 2px; }
.ah-before-after__col.is-after li .v { color: var(--ah-ink); }
.ah-before-after__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; background: var(--ah-bg); }
.ah-before-after__arrow > span:first-child { font-size: 22px; color: var(--ah-ink); line-height: 1; }
.ah-before-after__arrow .cap { font-size: 9.5px; letter-spacing: 0.1em; color: var(--ah-teal); text-align: center; margin-top: 6px; line-height: 1.4; }
@media (max-width: 600px) {
  .ah-before-after__grid { grid-template-columns: 1fr; }
  .ah-before-after__col.is-before { border-right: none; border-bottom: 1px dashed var(--ah-line); }
  .ah-before-after__col.is-after { border-left: none; }
  .ah-before-after__arrow { flex-direction: row; padding: 8px 0; gap: 10px; border-bottom: 1px dashed var(--ah-line); }
}

/* ===== ② フロー図 ===== */
.ah-flow { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-flow__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-flow__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-flow__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-flow__chart { display: flex; align-items: stretch; padding: 22px 18px; gap: 0; flex-wrap: wrap; justify-content: center; }
.ah-flow__node { flex: 1 1 0; min-width: 130px; border: 1px solid var(--ah-line); background: var(--ah-bg); padding: 14px 14px 12px; text-align: left; position: relative; }
.ah-flow__node .no { display: block; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ah-faint); margin-bottom: 4px; }
.ah-flow__node h5 { font-size: 14px; font-weight: 700; color: var(--ah-ink); margin: 0 0 4px; }
.ah-flow__node .role { font-size: 10.5px; color: var(--ah-muted); letter-spacing: 0.05em; }
.ah-flow__node.is-pick { border: 1px solid var(--ah-ink); background: var(--ah-ink); }
.ah-flow__node.is-pick h5 { color: #fff; }
.ah-flow__node.is-pick .no { color: var(--ah-teal); }
.ah-flow__node.is-pick .role { color: rgba(255,255,255,0.7); }
.ah-flow__node .pick-tag { position: absolute; top: -10px; left: 12px; background: var(--ah-teal); color: var(--ah-ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 2px; }
.ah-flow__arrow { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.ah-flow__arrow .line { width: 100%; height: 1px; background: var(--ah-ink); }
.ah-flow__arrow .head { position: absolute; right: 4px; top: 50%; width: 0; height: 0; border-left: 6px solid var(--ah-ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: translateY(-50%); }
.ah-flow__arrow .lbl { position: absolute; bottom: calc(50% + 4px); font-size: 10px; letter-spacing: 0.08em; color: var(--ah-faint); background: var(--ah-bg); padding: 0 4px; }
.ah-flow__foot { padding: 10px 18px; border-top: 1px solid var(--ah-line); background: var(--ah-bg-alt); font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }
@media (max-width: 720px) {
  .ah-flow__chart { flex-direction: column; padding: 18px 14px; }
  .ah-flow__node { width: 100%; min-width: 0; }
  .ah-flow__arrow { width: 100%; height: 36px; flex: 0 0 36px; }
  .ah-flow__arrow .line { width: 1px; height: 100%; }
  .ah-flow__arrow .head { right: auto; left: 50%; top: auto; bottom: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--ah-ink); border-bottom: none; transform: translateX(-50%); }
}

/* ===== ③ カード型リスト ===== */
.ah-cards { margin: 32px 0; }
.ah-cards__head { padding: 12px 0 14px; border-bottom: 2px solid var(--ah-ink); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ah-cards__head .t { font-size: 15px; font-weight: 700; color: var(--ah-ink); letter-spacing: 0.02em; }
.ah-cards__head .meta { font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }
.ah-cards__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--ah-line); border: 1px solid var(--ah-line); }
.ah-cards__item { background: var(--ah-bg); padding: 16px 16px 14px; display: flex; flex-direction: column; }
.ah-cards__item:hover { background: var(--ah-bg-alt); }
.ah-cards__item .num { font-size: 22px; font-weight: 700; color: var(--ah-ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.ah-cards__item .num::before { content: "#"; font-size: 12px; color: var(--ah-teal); margin-right: 1px; }
.ah-cards__item h4 { font-size: 14.5px; font-weight: 700; color: var(--ah-ink); margin: 0 0 6px; }
.ah-cards__item .prompt { font-size: 12.5px; color: var(--ah-muted); line-height: 1.7; margin: 0 0 12px; flex: 1; }
.ah-cards__item .badge { align-self: flex-start; font-size: 10px; letter-spacing: 0.08em; background: var(--ah-teal-soft); color: var(--ah-teal); padding: 3px 8px; border-radius: 2px; margin-top: auto; }

/* ===== ④ ピラミッド図 ===== */
.ah-pyramid { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-pyramid__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-pyramid__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-pyramid__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-pyramid__chart { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 4px; }
.ah-pyramid__row { display: grid; grid-template-columns: 56px 1fr 64px; gap: 12px; align-items: center; }
.ah-pyramid__row .lv { font-family: var(--ah-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ah-faint); }
.ah-pyramid__row .bar { padding: 12px 16px; border-left: 2px solid var(--ah-line); }
.ah-pyramid__row[data-lv="4"] .bar { border-left-color: var(--ah-ink); background: var(--ah-ink); color: #fff; margin: 0 60px; }
.ah-pyramid__row[data-lv="3"] .bar { border-left-color: var(--ah-muted); margin: 0 40px; }
.ah-pyramid__row[data-lv="2"] .bar { border-left-color: var(--ah-teal); margin: 0 20px; }
.ah-pyramid__row[data-lv="1"] .bar { border-left-color: var(--ah-teal-soft); margin: 0; }
.ah-pyramid__row .bar h5 { font-size: 13.5px; font-weight: 700; margin: 0 0 3px; }
.ah-pyramid__row[data-lv="4"] .bar h5 { color: #fff; }
.ah-pyramid__row .bar p { font-size: 12px; color: var(--ah-muted); margin: 0; line-height: 1.6; }
.ah-pyramid__row[data-lv="4"] .bar p { color: rgba(255,255,255,0.7); }
.ah-pyramid__row .time { font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); text-align: right; }
.ah-pyramid__foot { padding: 10px 18px; border-top: 1px solid var(--ah-line); background: var(--ah-bg-alt); font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }

/* =====================================================
   体系図ブロック CSS (diagrams)
   ===================================================== */

/* ===== ① Before/After 図 ===== */
.ah-before-after { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-before-after__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-before-after__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-before-after__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-before-after__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.ah-before-after__col { padding: 20px 22px 18px; }
.ah-before-after__col.is-before { border-right: 1px dashed var(--ah-line); background: var(--ah-bg); }
.ah-before-after__col.is-after { border-left: 1px dashed var(--ah-line); background: linear-gradient(0deg, rgba(93,202,165,0.04), rgba(93,202,165,0.04)); }
.ah-before-after__col .lbl { display: inline-block; font-size: 10.5px; letter-spacing: 0.15em; padding: 3px 8px; border-radius: 2px; margin-bottom: 10px; text-transform: uppercase; }
.ah-before-after__col.is-before .lbl { background: var(--ah-line-soft); color: var(--ah-muted); }
.ah-before-after__col.is-after .lbl { background: var(--ah-teal-soft); color: var(--ah-teal); }
.ah-before-after__col h4 { font-size: 15px; font-weight: 700; color: var(--ah-ink); margin: 0 0 14px; letter-spacing: 0.01em; line-height: 1.5; }
.ah-before-after__col ul { list-style: none; padding: 0; margin: 0; }
.ah-before-after__col li { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--ah-line); font-size: 13px; align-items: baseline; }
.ah-before-after__col li:first-child { border-top: none; }
.ah-before-after__col li .k { font-size: 10.5px; letter-spacing: 0.05em; color: var(--ah-faint); text-transform: uppercase; }
.ah-before-after__col li .v { font-weight: 600; color: var(--ah-body); }
.ah-before-after__col li .v small { display: block; font-family: var(--ah-mono); font-size: 10px; color: var(--ah-faint); font-weight: 500; margin-top: 2px; }
.ah-before-after__col.is-after li .v { color: var(--ah-ink); }
.ah-before-after__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; background: var(--ah-bg); }
.ah-before-after__arrow > span:first-child { font-size: 22px; color: var(--ah-ink); line-height: 1; }
.ah-before-after__arrow .cap { font-size: 9.5px; letter-spacing: 0.1em; color: var(--ah-teal); text-align: center; margin-top: 6px; line-height: 1.4; }
@media (max-width: 600px) {
  .ah-before-after__grid { grid-template-columns: 1fr; }
  .ah-before-after__col.is-before { border-right: none; border-bottom: 1px dashed var(--ah-line); }
  .ah-before-after__col.is-after { border-left: none; }
  .ah-before-after__arrow { flex-direction: row; padding: 8px 0; gap: 10px; border-bottom: 1px dashed var(--ah-line); }
}

/* ===== ② フロー図 ===== */
.ah-flow { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-flow__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-flow__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-flow__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-flow__chart { display: flex; align-items: stretch; padding: 22px 18px; gap: 0; flex-wrap: wrap; justify-content: center; }
.ah-flow__node { flex: 1 1 0; min-width: 130px; border: 1px solid var(--ah-line); background: var(--ah-bg); padding: 14px 14px 12px; text-align: left; position: relative; }
.ah-flow__node .no { display: block; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ah-faint); margin-bottom: 4px; }
.ah-flow__node h5 { font-size: 14px; font-weight: 700; color: var(--ah-ink); margin: 0 0 4px; }
.ah-flow__node .role { font-size: 10.5px; color: var(--ah-muted); letter-spacing: 0.05em; }
.ah-flow__node.is-pick { border: 1px solid var(--ah-ink); background: var(--ah-ink); }
.ah-flow__node.is-pick h5 { color: #fff; }
.ah-flow__node.is-pick .no { color: var(--ah-teal); }
.ah-flow__node.is-pick .role { color: rgba(255,255,255,0.7); }
.ah-flow__node .pick-tag { position: absolute; top: -10px; left: 12px; background: var(--ah-teal); color: var(--ah-ink); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; padding: 3px 7px; border-radius: 2px; }
.ah-flow__arrow { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.ah-flow__arrow .line { width: 100%; height: 1px; background: var(--ah-ink); }
.ah-flow__arrow .head { position: absolute; right: 4px; top: 50%; width: 0; height: 0; border-left: 6px solid var(--ah-ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: translateY(-50%); }
.ah-flow__arrow .lbl { position: absolute; bottom: calc(50% + 4px); font-size: 10px; letter-spacing: 0.08em; color: var(--ah-faint); background: var(--ah-bg); padding: 0 4px; }
.ah-flow__foot { padding: 10px 18px; border-top: 1px solid var(--ah-line); background: var(--ah-bg-alt); font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }
@media (max-width: 720px) {
  .ah-flow__chart { flex-direction: column; padding: 18px 14px; }
  .ah-flow__node { width: 100%; min-width: 0; }
  .ah-flow__arrow { width: 100%; height: 36px; flex: 0 0 36px; }
  .ah-flow__arrow .line { width: 1px; height: 100%; }
  .ah-flow__arrow .head { right: auto; left: 50%; top: auto; bottom: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--ah-ink); border-bottom: none; transform: translateX(-50%); }
}

/* ===== ③ カード型リスト ===== */
.ah-cards { margin: 32px 0; }
.ah-cards__head { padding: 12px 0 14px; border-bottom: 2px solid var(--ah-ink); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.ah-cards__head .t { font-size: 15px; font-weight: 700; color: var(--ah-ink); letter-spacing: 0.02em; }
.ah-cards__head .meta { font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }
.ah-cards__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--ah-line); border: 1px solid var(--ah-line); }
.ah-cards__item { background: var(--ah-bg); padding: 16px 16px 14px; display: flex; flex-direction: column; }
.ah-cards__item:hover { background: var(--ah-bg-alt); }
.ah-cards__item .num { font-size: 22px; font-weight: 700; color: var(--ah-ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.ah-cards__item .num::before { content: "#"; font-size: 12px; color: var(--ah-teal); margin-right: 1px; }
.ah-cards__item h4 { font-size: 14.5px; font-weight: 700; color: var(--ah-ink); margin: 0 0 6px; }
.ah-cards__item .prompt { font-size: 12.5px; color: var(--ah-muted); line-height: 1.7; margin: 0 0 12px; flex: 1; }
.ah-cards__item .badge { align-self: flex-start; font-size: 10px; letter-spacing: 0.08em; background: var(--ah-teal-soft); color: var(--ah-teal); padding: 3px 8px; border-radius: 2px; margin-top: auto; }

/* ===== ④ ピラミッド図 ===== */
.ah-pyramid { margin: 32px 0; border: 1px solid var(--ah-line); background: var(--ah-bg); }
.ah-pyramid__head { padding: 12px 18px; border-bottom: 1px solid var(--ah-line); display: flex; justify-content: space-between; align-items: baseline; background: var(--ah-bg-alt); }
.ah-pyramid__head .t { font-family: var(--ah-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ah-ink); text-transform: uppercase; }
.ah-pyramid__head .meta { font-size: 11px; color: var(--ah-faint); }
.ah-pyramid__chart { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 4px; }
.ah-pyramid__row { display: grid; grid-template-columns: 56px 1fr 64px; gap: 12px; align-items: center; }
.ah-pyramid__row .lv { font-family: var(--ah-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ah-faint); }
.ah-pyramid__row .bar { padding: 12px 16px; border-left: 2px solid var(--ah-line); }
.ah-pyramid__row[data-lv="4"] .bar { border-left-color: var(--ah-ink); background: var(--ah-ink); color: #fff; margin: 0 60px; }
.ah-pyramid__row[data-lv="3"] .bar { border-left-color: var(--ah-muted); margin: 0 40px; }
.ah-pyramid__row[data-lv="2"] .bar { border-left-color: var(--ah-teal); margin: 0 20px; }
.ah-pyramid__row[data-lv="1"] .bar { border-left-color: var(--ah-teal-soft); margin: 0; }
.ah-pyramid__row .bar h5 { font-size: 13.5px; font-weight: 700; margin: 0 0 3px; }
.ah-pyramid__row[data-lv="4"] .bar h5 { color: #fff; }
.ah-pyramid__row .bar p { font-size: 12px; color: var(--ah-muted); margin: 0; line-height: 1.6; }
.ah-pyramid__row[data-lv="4"] .bar p { color: rgba(255,255,255,0.7); }
.ah-pyramid__row .time { font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); text-align: right; }
.ah-pyramid__foot { padding: 10px 18px; border-top: 1px solid var(--ah-line); background: var(--ah-bg-alt); font-size: 11px; color: var(--ah-faint); letter-spacing: 0.05em; }

/* =============================================================
   AI Hacks — Article Block CSS
   記事本文用：カスタムHTMLブロックで利用する装飾セット
   既存トークン（--ah-*）に依存。style.css 末尾に追記して使用。
   ============================================================= */

/* Base utility — 記事本文内 (.entry-content / .post-content 等) で
   ブロックが浮かないよう共通の余白を付与する */
.ah-steps,
.ah-compare,
.ah-note,
.ah-faq,
.ah-author,
.ah-next,
.ah-series { margin: 32px 0; font-family: var(--ah-sans); color: var(--ah-body); }

.ah-steps *, .ah-compare *, .ah-note *,
.ah-faq *, .ah-author *, .ah-next *, .ah-series * { box-sizing: border-box; }


/* =============================================================
   ① STEPS — .ah-steps
   バリアント： .ah-steps--cards / .ah-steps--rail
   ============================================================= */
.ah-steps__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ah-line);
}
.ah-steps__head .label {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #993c1d;
	text-transform: uppercase;
}
.ah-steps__head .count {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: var(--ah-faint);
	letter-spacing: 0.06em;
	margin-left: auto;
}
.ah-steps__head h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 0;
	letter-spacing: 0.02em;
}

.ah-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ah-step;
}

/* --- Default: 縦リスト型 -------------------------------- */
.ah-steps__list li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 18px;
	padding: 18px 4px;
	border-bottom: 1px dashed var(--ah-line);
	counter-increment: ah-step;
}
.ah-steps__list li:last-child { border-bottom: none; }
.ah-steps__list .step-no {
	font-family: var(--ah-mono);
	font-size: 22px;
	font-weight: 700;
	color: var(--ah-ink);
	letter-spacing: 0.02em;
	line-height: 1;
	padding-top: 4px;
}
.ah-steps__list .step-no::before { content: "STEP "; font-size: 9.5px; letter-spacing: 0.14em; color: var(--ah-faint); display: block; font-weight: 500; margin-bottom: 4px; }
.ah-steps__list h4 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 0 0 6px;
	letter-spacing: 0.01em;
}
.ah-steps__list p {
	font-size: 14px;
	color: var(--ah-body);
	line-height: 1.85;
	margin: 0;
}
.ah-steps__list .note {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-muted);
	background: var(--ah-bg-alt);
	padding: 3px 8px;
	border: 1px solid var(--ah-line);
	border-radius: 2px;
}

/* --- Variant: 横カード型 --------------------------------- */
.ah-steps--cards .ah-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.ah-steps--cards .ah-steps__list li {
	display: block;
	padding: 18px 18px 16px;
	border: 1px solid var(--ah-line);
	border-bottom: 1px solid var(--ah-line);
	position: relative;
	background: #fff;
}
.ah-steps--cards .ah-steps__list li::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--ah-teal);
}
.ah-steps--cards .step-no {
	font-size: 26px;
	padding-top: 0;
	margin-bottom: 8px;
}
.ah-steps--cards .step-no::before { display: inline; margin-right: 6px; margin-bottom: 0; }

/* --- Variant: タイムライン型（縦） --------------------- */
.ah-steps--rail .ah-steps__list { position: relative; padding-left: 24px; }
.ah-steps--rail .ah-steps__list::before {
	content: "";
	position: absolute;
	top: 18px; bottom: 18px; left: 6px;
	width: 1px;
	background: var(--ah-line);
}
.ah-steps--rail .ah-steps__list li {
	display: block;
	padding: 14px 0 14px 0;
	border-bottom: none;
	position: relative;
}
.ah-steps--rail .ah-steps__list li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 22px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ah-teal);
}
.ah-steps--rail .step-no {
	font-size: 11px;
	color: #993c1d;
	margin-bottom: 4px;
	padding-top: 0;
}
.ah-steps--rail .step-no::before { display: inline; margin-right: 4px; margin-bottom: 0; color: var(--ah-faint); }


/* =============================================================
   ② COMPARE — .ah-compare
   バリアント： .ah-compare--spec / .ah-compare--bar
   ============================================================= */
.ah-compare { border: 1px solid var(--ah-line); background: #fff; overflow-x: auto; }
.ah-compare__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ah-line);
	background: #eeedfe;
}
.ah-compare__head .label {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #993c1d;
	text-transform: uppercase;
}
.ah-compare__head h3 { font-size: 15px; font-weight: 700; color: var(--ah-ink); margin: 0; }
.ah-compare__head .meta { margin-left: auto; font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); letter-spacing: 0.06em; }

.ah-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.ah-compare th,
.ah-compare td {
	padding: 12px 14px;
	border-bottom: 1px dashed var(--ah-line);
	text-align: left;
	vertical-align: middle;
}
.ah-compare thead th {
	font-size: 12px;
	font-weight: 700;
	color: var(--ah-ink);
	border-bottom: 1px solid var(--ah-line);
	background: var(--ah-bg-alt);
	letter-spacing: 0.04em;
}
.ah-compare thead th.is-pick {
	background: #fff;
	border-top: 2px solid var(--ah-teal);
	color: var(--ah-ink);
}
.ah-compare thead th .pickbadge {
	display: inline-block;
	margin-left: 6px;
	font-family: var(--ah-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	background: var(--ah-teal);
	color: #fff;
	padding: 2px 7px;
	border-radius: 2px;
	text-transform: uppercase;
}
.ah-compare tbody th {
	font-size: 12px;
	font-weight: 600;
	color: var(--ah-muted);
	width: 28%;
	background: var(--ah-bg-alt);
	border-right: 1px solid var(--ah-line);
}
.ah-compare td.is-pick { background: rgba(93, 202, 165, 0.06); }
.ah-compare tr:last-child th,
.ah-compare tr:last-child td { border-bottom: none; }
.ah-compare .yes { color: #1f7a55; font-weight: 600; }
.ah-compare .no  { color: var(--ah-faint); }
.ah-compare .num { font-family: var(--ah-mono); font-weight: 700; color: var(--ah-ink); }
.ah-compare .unit { font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); margin-left: 4px; }

/* --- Variant: スペックシート型 --------------------------- */
.ah-compare--spec { border: 1px solid var(--ah-line); padding: 0; }
.ah-compare--spec .specrow {
	display: grid;
	grid-template-columns: 140px 1fr 1fr 1fr;
	border-bottom: 1px dashed var(--ah-line);
	font-size: 13.5px;
}
.ah-compare--spec .specrow:last-child { border-bottom: none; }
.ah-compare--spec .specrow.head {
	background: var(--ah-bg-alt);
	border-bottom: 1px solid var(--ah-line);
	font-family: var(--ah-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ah-faint);
	text-transform: uppercase;
}
.ah-compare--spec .specrow > div { padding: 12px 14px; border-right: 1px dashed var(--ah-line); }
.ah-compare--spec .specrow > div:last-child { border-right: none; }
.ah-compare--spec .specrow > .key {
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	letter-spacing: 0.08em;
	background: var(--ah-bg-alt);
	border-right: 1px solid var(--ah-line);
}
.ah-compare--spec .specrow > .pick {
	background: rgba(93, 202, 165, 0.06);
	font-weight: 600;
	color: var(--ah-ink);
}

/* --- Variant: 速度バー型 --------------------------------- */
.ah-compare--bar { padding: 14px 18px; }
.ah-compare--bar .row {
	display: grid;
	grid-template-columns: 130px 1fr 70px;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--ah-line);
}
.ah-compare--bar .row:last-child { border-bottom: none; }
.ah-compare--bar .row .lb { font-size: 13px; color: var(--ah-ink); font-weight: 600; }
.ah-compare--bar .row .bar {
	height: 8px;
	background: var(--ah-line-soft);
	position: relative;
	overflow: hidden;
}
.ah-compare--bar .row .bar > span {
	display: block;
	height: 100%;
	background: var(--ah-ink);
}
.ah-compare--bar .row.is-pick .bar > span { background: var(--ah-teal); }
.ah-compare--bar .row .vl {
	font-family: var(--ah-mono);
	font-size: 12px;
	color: var(--ah-muted);
	text-align: right;
}


/* =============================================================
   ③ NOTE — .ah-note
   バリアント： .ah-note--warn / .ah-note--quote
   ============================================================= */
.ah-note {
	padding: 16px 18px 14px 22px;
	border: 1px solid var(--ah-line);
	border-left: 3px solid #d85a30;
	background: var(--ah-bg);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
}
.ah-note__label {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: #993c1d;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-top: 3px;
}
.ah-note__body { font-size: 14px; color: var(--ah-body); line-height: 1.85; }
.ah-note__body p { margin: 0 0 6px; }
.ah-note__body p:last-child { margin-bottom: 0; }
.ah-note__body strong { color: var(--ah-ink); font-weight: 700; }

.ah-note--warn { border-left-color: #ba7517; }
.ah-note--warn .ah-note__label { color: #854f0b; }

.ah-note--quote {
	border-left-color: #534ab7;
	background: #eeedfe;
}
.ah-note--quote .ah-note__label { color: #3c3489; }
.ah-note--quote .ah-note__body p { margin: 0 0 6px; font-style: normal; }
.ah-note--quote cite {
	display: block;
	margin-top: 6px;
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	font-style: normal;
	letter-spacing: 0.04em;
}
.ah-note--quote cite::before { content: "— "; }


/* =============================================================
   ④ FAQ — .ah-faq
   <details><summary>Q. ...</summary>...</details> 想定
   ============================================================= */
.ah-faq__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ah-line);
}
.ah-faq__head .label {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #993c1d;
	text-transform: uppercase;
}
.ah-faq__head h3 { font-size: 16px; font-weight: 700; color: var(--ah-ink); margin: 0; }
.ah-faq__head .count { margin-left: auto; font-family: var(--ah-mono); font-size: 10.5px; color: var(--ah-faint); }

.ah-faq__list { display: block; }
.ah-faq__item {
	border-bottom: 1px solid var(--ah-line);
	padding: 0;
}
.ah-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 36px 16px 4px;
	position: relative;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ah-ink);
	line-height: 1.6;
}
.ah-faq__item summary::-webkit-details-marker { display: none; }
.ah-faq__item summary::before {
	content: "Q.";
	font-family: var(--ah-mono);
	font-size: 11px;
	color: #993c1d;
	letter-spacing: 0.08em;
	margin-right: 8px;
	font-weight: 700;
}
.ah-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--ah-mono);
	font-size: 18px;
	color: var(--ah-faint);
	font-weight: 400;
	transition: transform .2s;
}
.ah-faq__item[open] summary::after { content: "−"; }
.ah-faq__item .ah-faq__body {
	padding: 4px 4px 18px 4px;
	font-size: 14px;
	color: var(--ah-body);
	line-height: 1.85;
}
.ah-faq__item .ah-faq__body p { margin: 0 0 8px; }
.ah-faq__item .ah-faq__body p:last-child { margin-bottom: 0; }
.ah-faq__item .ah-faq__body::before {
	content: "A.";
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	letter-spacing: 0.08em;
	margin-right: 8px;
	font-weight: 700;
}


/* =============================================================
   ⑤ AUTHOR — .ah-author
   記事末の信頼補強カード
   ============================================================= */
.ah-author {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 20px;
	padding: 22px 24px;
	border: 1px solid var(--ah-line);
	background: #fff;
	position: relative;
}
.ah-author::before {
	content: "AUTHOR";
	position: absolute;
	top: -8px;
	left: 18px;
	font-family: var(--ah-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--ah-faint);
	background: #fff;
	padding: 0 8px;
}
.ah-author__avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ah-bg-alt);
	border: 1px solid var(--ah-line);
}
.ah-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-author__body { padding-top: 4px; }
.ah-author__name {
	font-size: 16px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 0 0 2px;
	letter-spacing: 0.01em;
}
.ah-author__role {
	font-family: var(--ah-mono);
	font-size: 11px;
	color: #993c1d;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	display: block;
}
.ah-author__desc {
	font-size: 13.5px;
	color: var(--ah-body);
	line-height: 1.85;
	margin: 0 0 10px;
}
.ah-author__meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: var(--ah-faint);
	letter-spacing: 0.06em;
}
.ah-author__meta a { color: var(--ah-muted); text-decoration: none; border-bottom: 1px dashed var(--ah-line); }
.ah-author__meta a:hover { color: var(--ah-ink); border-bottom-color: var(--ah-ink); }


/* =============================================================
   ⑥ NEXT — .ah-next
   バリアント： .ah-next.ah-inline （本文中の差し込み版）
   ============================================================= */
.ah-next {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	border: 1px solid var(--ah-line);
	background: #fff;
	text-decoration: none;
	color: var(--ah-ink);
	transition: background .15s, border-color .15s;
}
.ah-next:hover { background: var(--ah-bg-alt); border-color: var(--ah-ink); }
.ah-next__label {
	display: block;
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #993c1d;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.ah-next__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ah-ink);
	line-height: 1.55;
	margin: 0 0 4px;
}
.ah-next__meta {
	display: flex;
	gap: 10px;
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: var(--ah-faint);
	letter-spacing: 0.05em;
}
.ah-next__arrow {
	font-family: var(--ah-mono);
	font-size: 22px;
	color: var(--ah-ink);
	padding-left: 12px;
	border-left: 1px solid var(--ah-line);
}

/* Inline variant — 本文中に挟む薄い差し込み */
.ah-next.ah-inline {
	margin: 18px 0;
	padding: 12px 14px;
	border: 1px solid var(--ah-line);
	border-left: 2px solid var(--ah-teal);
	background: #faeee8;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
}
.ah-next.ah-inline .ah-next__label {
	margin-bottom: 0;
	white-space: nowrap;
}
.ah-next.ah-inline .ah-next__title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0;
}
.ah-next.ah-inline .ah-next__arrow {
	border-left: none;
	padding-left: 0;
	font-size: 14px;
	color: #993c1d;
}
.ah-next.ah-inline:hover { background: #ddf1e6; }


/* =============================================================
   ⑦ SERIES — .ah-series
   ============================================================= */
.ah-series {
	border: 1px solid var(--ah-line);
	background: #fff;
}
.ah-series__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--ah-line);
	background: #eeedfe;
}
.ah-series__head .label {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: #993c1d;
	text-transform: uppercase;
}
.ah-series__head h3 { font-size: 14.5px; font-weight: 700; color: var(--ah-ink); margin: 0; }
.ah-series__head .progress {
	margin-left: auto;
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: var(--ah-faint);
	letter-spacing: 0.06em;
}

.ah-series__list {
	list-style: none;
	margin: 0;
	padding: 8px 18px;
}
.ah-series__list li {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--ah-line-soft);
	font-size: 13.5px;
}
.ah-series__list li:last-child { border-bottom: none; }
.ah-series__list .num {
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	letter-spacing: 0.06em;
}
.ah-series__list a {
	color: var(--ah-ink);
	text-decoration: none;
	line-height: 1.55;
}
.ah-series__list a:hover { color: #993c1d; }
.ah-series__list .label {
	font-family: var(--ah-mono);
	font-size: 10px;
	color: var(--ah-faint);
	letter-spacing: 0.08em;
}

/* 今読んでいる回 */
.ah-series__list .now {
	background: linear-gradient(0deg, var(--ah-teal-soft), var(--ah-teal-soft));
	margin: 0 -10px;
	padding: 8px 10px;
	border-bottom: 1px dashed var(--ah-line-soft);
}
.ah-series__list .now .num { color: #993c1d; font-weight: 600; }
.ah-series__list .now span:nth-child(2) { color: var(--ah-ink); font-weight: 700; }
.ah-series__list .now .label {
	font-family: var(--ah-mono);
	font-size: 10px;
	color: #993c1d;
	letter-spacing: 0.1em;
}

/* 前後ナビ（フッタ） */
.ah-series__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--ah-line);
}
.ah-series__nav a {
	display: block;
	padding: 14px 18px;
	color: var(--ah-ink);
	text-decoration: none;
	font-size: 13px;
	transition: background .15s;
}
.ah-series__nav a:hover { background: var(--ah-bg-alt); }
.ah-series__nav a + a { border-left: 1px solid var(--ah-line); }
.ah-series__nav .dir {
	display: block;
	font-family: var(--ah-mono);
	font-size: 10.5px;
	color: var(--ah-faint);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
	text-transform: uppercase;
}
.ah-series__nav .t {
	display: block;
	font-weight: 600;
	color: var(--ah-ink);
	line-height: 1.5;
}
.ah-series__nav .next { text-align: right; }
.ah-series__nav .next .t::after { content: " →"; color: #993c1d; }
.ah-series__nav .prev .t::before { content: "← "; color: #993c1d; }


/* =============================================================
   Mobile (≤640px) — block adjustments
   ============================================================= */
@media (max-width: 640px) {
	.ah-steps,
	.ah-compare,
	.ah-note,
	.ah-faq,
	.ah-author,
	.ah-next,
	.ah-series { margin: 24px 0; }

	.ah-steps--cards .ah-steps__list { grid-template-columns: 1fr; }
	.ah-compare table { font-size: 12.5px; }
	.ah-compare th, .ah-compare td { padding: 10px 10px; }
	.ah-compare--spec .specrow { grid-template-columns: 110px repeat(3, 1fr); }
	.ah-compare--bar .row { grid-template-columns: 100px 1fr 56px; gap: 10px; }

	.ah-author { grid-template-columns: 64px 1fr; padding: 18px 18px; gap: 14px; }
	.ah-author__avatar { width: 64px; height: 64px; }
	.ah-author__name { font-size: 15px; }

	.ah-next { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
	.ah-next__arrow { display: none; }
	.ah-next.ah-inline { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
	.ah-next.ah-inline .ah-next__arrow { display: none; }

	.ah-series__nav { grid-template-columns: 1fr; }
	.ah-series__nav a + a { border-left: none; border-top: 1px solid var(--ah-line); }
	.ah-series__nav .next { text-align: left; }
}


.ah-art-header {
	border-bottom: 1px solid var(--ah-line);
	padding-bottom: 28px;
	margin-bottom: 32px;
}
.ah-art-header__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.ah-art-header__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 2px;
	text-decoration: none;
}
.ah-art-header__cat[data-cat="zuruku-shiru"]    { color: #fff; background: #7fa3cb; }
.ah-art-header__cat[data-cat="zuruku-hajimeru"] { color: #fff; background: #5dbf99; }
.ah-art-header__cat[data-cat="zuruku-tsukau"]   { color: #fff; background: #c79bd0; }
.ah-art-header__cat[data-cat="zuruku-kasegu"]   { color: #fff; background: #c9a24a; }
.ah-art-header__num {
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	letter-spacing: 0.05em;
}
.ah-art-header__title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--ah-ink);
	margin: 0 0 16px;
	letter-spacing: 0.01em;
}
.ah-art-header__info {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--ah-mono);
	font-size: 11px;
	color: var(--ah-faint);
	letter-spacing: 0.05em;
	padding: 10px 0;
	border-top: 1px dashed var(--ah-line);
}
.ah-art-header__info .dot {
	width: 3px;
	height: 3px;
	background: var(--ah-line);
	border-radius: 50%;
}
.ah-art-header__bar {
	height: 2px;
	width: 48px;
	margin-bottom: 14px;
}
.ah-art-header__bar[data-cat="zuruku-shiru"]    { background: #7fa3cb; }
.ah-art-header__bar[data-cat="zuruku-hajimeru"] { background: #5dbf99; }
.ah-art-header__bar[data-cat="zuruku-tsukau"]   { background: #c79bd0; }
.ah-art-header__bar[data-cat="zuruku-kasegu"]   { background: #c9a24a; }

/* Article Body */
.ah-art-body {
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--ah-body);
}
.ah-art-body h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 40px 0 14px;
	padding-left: 12px;
	border-left: 3px solid var(--ah-ink);
	letter-spacing: 0.02em;
}
.ah-art-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 32px 0 12px;
	letter-spacing: 0.01em;
}
.ah-art-body p { margin: 0 0 20px; }
.ah-art-body ul, .ah-art-body ol { margin: 0 0 20px; padding-left: 24px; }
.ah-art-body li { margin-bottom: 6px; }
.ah-art-body a { color: var(--ah-ink); text-decoration: underline; text-underline-offset: 3px; }
.ah-art-body a:hover { color: var(--ah-teal); }
.ah-art-body img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
.ah-art-body blockquote {
	border-left: 2px solid var(--ah-line);
	margin: 24px 0;
	padding: 12px 18px;
	color: var(--ah-muted);
	font-size: 14.5px;
}
.ah-art-body code {
	font-family: var(--ah-mono);
	font-size: 13px;
	background: var(--ah-bg-alt);
	padding: 2px 6px;
	border: 1px solid var(--ah-line);
	border-radius: 2px;
}
.ah-art-body pre {
	background: var(--ah-ink);
	color: #e8e8e8;
	padding: 20px 22px;
	overflow-x: auto;
	margin: 24px 0;
	font-family: var(--ah-mono);
	font-size: 13px;
	line-height: 1.7;
}
.ah-art-body pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

/* Article Footer */
.ah-art-footer {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--ah-line);
}

/* Next Article Card */
.ah-next-card {
	display: block;
	border: 1px solid var(--ah-line);
	background: var(--ah-bg);
	padding: 20px 24px;
	text-decoration: none;
	color: var(--ah-body);
	transition: border-color 0.15s, transform 0.15s;
	margin-bottom: 24px;
	position: relative;
}
.ah-next-card:hover { border-color: var(--ah-ink); transform: translateY(-1px); }
.ah-next-card__cap {
	font-family: var(--ah-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	color: var(--ah-teal);
	text-transform: uppercase;
	margin-bottom: 8px;
	display: block;
}
.ah-next-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ah-ink);
	margin: 0;
	line-height: 1.5;
}
.ah-next-card__arrow {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 14px;
}
.ah-next-card__arrow::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 6px;
	height: 1px;
	background: var(--ah-ink);
}
.ah-next-card__arrow::after {
	content: "";
	position: absolute;
	right: 0; top: 1.5px;
	width: 9px; height: 9px;
	border-top: 1px solid var(--ah-ink);
	border-right: 1px solid var(--ah-ink);
	transform: rotate(45deg);
}

/* Sidebar */
.ah-side-widget {
	border: 1px solid var(--ah-line);
	background: var(--ah-bg);
	margin-bottom: 20px;
}
.ah-side-widget__head {
	padding: 10px 16px;
	border-bottom: 1px solid var(--ah-line);
	background: var(--ah-ink);
}
.ah-side-widget__head .t {
	font-family: var(--ah-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--ah-teal);
	text-transform: uppercase;
}
.ah-side-widget__body { padding: 14px 16px; }
.ah-side-about {
	font-size: 12.5px;
	color: var(--ah-muted);
	line-height: 1.8;
	margin: 0;
}
.ah-side-cats { list-style: none; padding: 0; margin: 0; }
.ah-side-cats li { border-bottom: 1px dashed var(--ah-line-soft); }
.ah-side-cats li:last-child { border-bottom: none; }
.ah-side-cats a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	text-decoration: none;
	color: var(--ah-body);
	font-size: 13px;
	font-weight: 500;
	transition: color 0.12s;
}
.ah-side-cats a:hover { color: var(--ah-ink); }
.ah-side-cats .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ah-side-cats .dot[data-cat="zuruku-shiru"]    { background: #7fa3cb; }
.ah-side-cats .dot[data-cat="zuruku-hajimeru"] { background: #5dbf99; }
.ah-side-cats .dot[data-cat="zuruku-tsukau"]   { background: #c79bd0; }
.ah-side-cats .dot[data-cat="zuruku-kasegu"]   { background: #c9a24a; }

/* Related Posts (YARPP) */
.ah-related { margin-top: 40px; }
.ah-related__head {
	font-family: var(--ah-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--ah-faint);
	text-transform: uppercase;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ah-related__head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ah-line);
}
/* Article Single Layout */
.ah-single {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 28px 80px;
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 56px;
	align-items: start;
}
.ah-single__main {
    min-width: 0;
　  max-width: 840px;
}
.ah-single__side {
	position: sticky;
	top: 28px;
}
/* Mobile */
@media (max-width: 860px) {
	.ah-single {
		grid-template-columns: 1fr;
		padding: 28px 20px 60px;
		gap: 40px;
	}
	.ah-single__side { position: static; }
	.ah-art-header__title { font-size: 22px; }
	.ah-art-body { font-size: 15px; }
}
/* Article Tags */
.ah-art-header__tag {
  font-family: var(--ah-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ah-muted);
  background: var(--ah-bg-alt);
  border: 1px solid var(--ah-line);
  padding: 3px 8px;
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.ah-art-header__tag:hover { border-color: var(--ah-ink); color: var(--ah-ink); }

.ah-art-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px dashed var(--ah-line);
  margin-bottom: 24px;
}
.ah-art-tags__label {
  font-family: var(--ah-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ah-faint);
  text-transform: uppercase;
  margin-right: 4px;
}
.ah-art-tags__item {
  font-family: var(--ah-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ah-muted);
  background: var(--ah-bg-alt);
  border: 1px solid var(--ah-line);
  padding: 4px 10px;
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.ah-art-tags__item:hover { border-color: var(--ah-ink); color: var(--ah-ink); }

.ah-art-body > p,
.ah-art-body > h2,
.ah-art-body > h3,
.ah-art-body > ul,
.ah-art-body > ol {
	max-width: 720px;
}

.ah-art-body .ah,
.ah-art-body .ah-before-after,
.ah-art-body .ah-steps,
.ah-art-body .ah-flow,
.ah-art-body .ah-compare,
.ah-art-body .ah-cards,
.ah-art-body .ah-pyramid,
.ah-art-body .ah-summary,
.ah-art-body .ah-conclusion {
	max-width: 100%;
	width: 100%;
}

/* Share Buttons */
.ah-share { padding: 24px 0; border-top: 1px dashed var(--ah-line); margin-bottom: 32px; }
.ah-share__label { font-family: var(--ah-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ah-faint); text-transform: uppercase; margin-bottom: 12px; }
.ah-share__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ah-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; text-decoration: none; border: 1px solid var(--ah-line); border-radius: 2px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; background: var(--ah-bg); color: var(--ah-ink); font-family: var(--ah-mono); letter-spacing: 0.04em; }
.ah-share__btn--x { border-color: var(--ah-ink); }
.ah-share__btn--x:hover { background: var(--ah-ink); color: #fff; }
.ah-share__btn--hb { border-color: #00A4DE; color: #00A4DE; }
.ah-share__btn--hb:hover { background: #00A4DE; color: #fff; }
.ah-share__btn--line { border-color: #06C755; color: #06C755; }
.ah-share__btn--line:hover { background: #06C755; color: #fff; }
.ah-share__btn--copy { border-color: var(--ah-line); }
.ah-share__btn--copy:hover { border-color: var(--ah-ink); background: var(--ah-bg-alt); }
.ah-share__copy-done { display: none; font-size: 11px; color: var(--ah-teal); margin-left: 4px; }