/* =====================================================================
   Hoipoi 記事装飾 CSS
   共通の記事装飾 / テーマ非依存
   ---------------------------------------------------------------------
   v10.0 をベースに、比較表スクロール不具合・重複定義を全て修正
   ===================================================================== */

/* =====================================================================
   §1. デザイントークン（CSS変数）
   ===================================================================== */
.hoipoi-article-content,
.art-scope,
.hoipoi-article-content .art-scope {
  --art-ink: #202229;
  --art-ink-sub: #444850;
  --art-muted: #676c76;
  --art-line: #e6e5e1;
  --art-bg:       #FFFFFF;
  --art-bg-soft: #f8f7f3;
  --art-bg-tint: #f8f7f3;
  --art-pink: #202229;
  --art-coral: #202229;
  --art-orange: #202229;
  --art-gold: #202229;
  --art-accent: #202229;
  --art-accent-d: #3f4249;
  --art-accent-l: #f8f7f3;
  --art-fill: #202229;
  --art-fill-soft: #f8f7f3;
  --art-good: #486051;  --art-good-l: #f5f7f4;
  --art-warn: #786644;  --art-warn-l: #f8f5ee;
  --art-bad: #7e4f49;  --art-bad-l: #faf5f4;
  --art-info: #4b5e6b;  --art-info-l: #f3f6f8;
  --art-purple: #5c586b;  --art-purple-l: #f6f5f8;
  --art-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
              "Hiragino Kaku Gothic ProN", "Hiragino Sans",
              "Noto Sans JP", Meiryo, sans-serif;
  --art-r-sm: 4px; --art-r-md: 6px; --art-r-lg: 8px; --art-r-xl: 8px;

}

/* =====================================================================
   §2. 基本設定
   ===================================================================== */
[class^="art-"],
[class*=" art-"] {
  box-sizing: border-box;
  font-family: var(--art-font);
}
[class^="art-"] *,
[class*=" art-"] * {
  box-sizing: border-box;
}

/* =====================================================================
   §3. wpautop 保護層
   ===================================================================== */
.hoipoi-article-content .art-scope br,
.hoipoi-article-content .art-supervisor br,
.hoipoi-article-content .art-meta br,
.hoipoi-article-content .art-alert br,
.hoipoi-article-content .art-summary br,
.hoipoi-article-content .art-toc br,
.hoipoi-article-content .art-voice br,
.hoipoi-article-content .art-pros-cons br,
.hoipoi-article-content .art-pros-cons__col br,
.hoipoi-article-content .art-plan-card br,
.hoipoi-article-content .art-cta-wrap br,
.hoipoi-article-content .art-compare-wrap br,
.hoipoi-article-content .art-faq br,
.hoipoi-article-content .art-faq__item br,
.hoipoi-article-content .art-step br,
.hoipoi-article-content .art-step__item br,
.hoipoi-article-content .art-feat-grid br,
.hoipoi-article-content .art-feat-grid__item br,
.hoipoi-article-content .art-recommend br,
.hoipoi-article-content .art-recommend__col br,
.hoipoi-article-content .art-testimonial br,
.hoipoi-article-content .art-footer br {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

.hoipoi-article-content .art-scope > p:not([class]):empty,
.hoipoi-article-content .art-supervisor > p:not([class]):empty,
.hoipoi-article-content .art-meta > p:not([class]):empty,
.hoipoi-article-content .art-alert > p:not([class]):empty,
.hoipoi-article-content .art-summary > p:not([class]):empty,
.hoipoi-article-content .art-toc > p:not([class]):empty,
.hoipoi-article-content .art-voice > p:not([class]):empty,
.hoipoi-article-content .art-pros-cons > p:not([class]):empty,
.hoipoi-article-content .art-pros-cons__col > p:not([class]):empty,
.hoipoi-article-content .art-plan-card > p:not([class]):empty,
.hoipoi-article-content .art-cta-wrap > p:not([class]):empty,
.hoipoi-article-content .art-compare-wrap > p:not([class]):empty,
.hoipoi-article-content .art-faq > p:not([class]):empty,
.hoipoi-article-content .art-faq__item > p:not([class]):empty,
.hoipoi-article-content .art-step > p:not([class]):empty,
.hoipoi-article-content .art-step__item > p:not([class]):empty,
.hoipoi-article-content .art-feat-grid > p:not([class]):empty,
.hoipoi-article-content .art-feat-grid__item > p:not([class]):empty,
.hoipoi-article-content .art-recommend > p:not([class]):empty,
.hoipoi-article-content .art-recommend__col > p:not([class]):empty,
.hoipoi-article-content .art-testimonial > p:not([class]):empty,
.hoipoi-article-content .art-footer > p:not([class]):empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hoipoi-article-content .art-scope p:not([class]),
.hoipoi-article-content .art-supervisor p:not([class]),
.hoipoi-article-content .art-voice p:not([class]),
.hoipoi-article-content .art-plan-card p:not([class]),
.hoipoi-article-content .art-pros-cons__col p:not([class]),
.hoipoi-article-content .art-recommend__col p:not([class]),
.hoipoi-article-content .art-feat-grid__item p:not([class]),
.hoipoi-article-content .art-step__item p:not([class]),
.hoipoi-article-content .art-faq__item p:not([class]),
.hoipoi-article-content .art-summary p:not([class]),
.hoipoi-article-content .art-toc p:not([class]),
.hoipoi-article-content .art-testimonial p:not([class]) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}

.hoipoi-article-content .art-scope p[class],
.hoipoi-article-content .art-voice p[class],
.hoipoi-article-content .art-plan-card p[class],
.hoipoi-article-content .art-pros-cons p[class],
.hoipoi-article-content .art-recommend p[class],
.hoipoi-article-content .art-feat-grid p[class],
.hoipoi-article-content .art-step p[class],
.hoipoi-article-content .art-faq p[class],
.hoipoi-article-content .art-summary p[class],
.hoipoi-article-content .art-toc p[class] {
  display: revert !important;
  visibility: visible !important;
}

.hoipoi-article-content .art-voice > *,
.hoipoi-article-content .art-plan-card > *,
.hoipoi-article-content .art-supervisor > *,
.hoipoi-article-content .art-pros-cons__col > *,
.hoipoi-article-content .art-recommend__col > *,
.hoipoi-article-content .art-feat-grid__item > *,
.hoipoi-article-content .art-step__item > *,
.hoipoi-article-content .art-summary > *,
.hoipoi-article-content .art-toc > * {
  margin-top: 0 !important;
}

/* =====================================================================
   §4. Sango 上書きベース
   ===================================================================== */
.hoipoi-article-content ul.art-summary__list,
.hoipoi-article-content ul.art-toc__list,
.hoipoi-article-content ul.art-pros-cons__list,
.hoipoi-article-content ul.art-recommend__list,
.hoipoi-article-content ul.art-plan-card__feats,
.hoipoi-article-content ol.art-step,
.hoipoi-article-content .art-summary__list,
.hoipoi-article-content .art-toc__list,
.hoipoi-article-content .art-pros-cons__list,
.hoipoi-article-content .art-recommend__list,
.hoipoi-article-content .art-plan-card__feats,
.hoipoi-article-content .art-step {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
}

.hoipoi-article-content ul.art-summary__list > li,
.hoipoi-article-content ul.art-toc__list > li,
.hoipoi-article-content ul.art-pros-cons__list > li,
.hoipoi-article-content ul.art-recommend__list > li,
.hoipoi-article-content ul.art-plan-card__feats > li,
.hoipoi-article-content ol.art-step > li,
.hoipoi-article-content .art-summary__list > li,
.hoipoi-article-content .art-toc__list > li,
.hoipoi-article-content .art-pros-cons__list > li,
.hoipoi-article-content .art-recommend__list > li,
.hoipoi-article-content .art-plan-card__feats > li,
.hoipoi-article-content .art-step > li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  background-image: none !important;
  margin-left: 0 !important;
  border: none !important;
  text-indent: 0 !important;
}

.hoipoi-article-content ul.art-summary__list > li::marker,
.hoipoi-article-content ul.art-toc__list > li::marker,
.hoipoi-article-content ul.art-pros-cons__list > li::marker,
.hoipoi-article-content ul.art-recommend__list > li::marker,
.hoipoi-article-content ul.art-plan-card__feats > li::marker,
.hoipoi-article-content ol.art-step > li::marker,
.hoipoi-article-content .art-summary__list > li::marker,
.hoipoi-article-content .art-toc__list > li::marker,
.hoipoi-article-content .art-pros-cons__list > li::marker,
.hoipoi-article-content .art-recommend__list > li::marker,
.hoipoi-article-content .art-plan-card__feats > li::marker,
.hoipoi-article-content .art-step > li::marker {
  content: "" !important;
  display: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

.hoipoi-article-content .art-scope:where(:not(.art-highlight-text)),
.hoipoi-article-content .art-supervisor,
.hoipoi-article-content .art-meta,
.hoipoi-article-content .art-alert,
.hoipoi-article-content .art-summary,
.hoipoi-article-content .art-toc,
.hoipoi-article-content .art-voice,
.hoipoi-article-content .art-pros-cons,
.hoipoi-article-content .art-pros-cons__col,
.hoipoi-article-content .art-plan-card,
.hoipoi-article-content .art-cta-wrap,
.hoipoi-article-content .art-compare-wrap,
.hoipoi-article-content .art-faq,
.hoipoi-article-content .art-faq__item,
.hoipoi-article-content .art-step,
.hoipoi-article-content .art-feat-grid,
.hoipoi-article-content .art-feat-grid__item,
.hoipoi-article-content .art-recommend,
.hoipoi-article-content .art-recommend__col,
.hoipoi-article-content .art-testimonial,
.hoipoi-article-content .art-footer {
  background-image: none !important;
}

.hoipoi-article-content .art-summary__title,
.hoipoi-article-content .art-toc__title,
.hoipoi-article-content .art-pros-cons__title,
.hoipoi-article-content .art-plan-card__name,
.hoipoi-article-content .art-step__title,
.hoipoi-article-content .art-feat-grid__title,
.hoipoi-article-content .art-recommend__title,
.hoipoi-article-content .art-faq__q {
  background: none !important;
  background-image: none !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =====================================================================
   §5. 記事見出し（H2 / H3 / H4）記事本文共通
   ===================================================================== */

/* ----- H2: 淡い背景と左罫線 ----- */
.hoipoi-article-content h2  {
  margin:48px 0 20px !important; padding:14px 20px !important; background:#f8f7f3 !important; color:#202229 !important; border:0 !important; border-left:6px solid #d8b56d !important; border-radius:4px !important; font-size:24px !important; line-height:1.6 !important; font-weight:700 !important;
}
.hoipoi-article-content h2::before  {
  content:none !important; display:none !important;
}

/* ----- H3: 小見出し ----- */
.hoipoi-article-content h3  {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 36px 0 18px !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
}
.hoipoi-article-content h3::before  {
  content:none !important; display:none !important;
}
.hoipoi-article-content h3::after  {
  content:none !important; display:none !important;
}

/* ----- H4: 小見出し ----- */
.hoipoi-article-content h4  {
  position: relative !important;
  padding: 0 !important;
  margin: 28px 0 14px !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
}
.hoipoi-article-content h4::before  {
  content:none !important; display:none !important;
}

/* ----- art-scope 等コンポーネント内の見出しはリセット ----- */
.hoipoi-article-content .art-scope h2,
.hoipoi-article-content .art-scope h3,
.hoipoi-article-content .art-scope h4,
.hoipoi-article-content .art-supervisor h2,
.hoipoi-article-content .art-supervisor h3,
.hoipoi-article-content .art-supervisor h4,
.hoipoi-article-content .art-plan-card h2,
.hoipoi-article-content .art-plan-card h3,
.hoipoi-article-content .art-plan-card h4 {
  display: block !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  padding: initial !important;
  margin: initial !important;
  box-shadow: none !important;
  color: initial !important;
  letter-spacing: initial !important;
}
.hoipoi-article-content .art-scope h2::before,
.hoipoi-article-content .art-scope h3::before,
.hoipoi-article-content .art-scope h4::before,
.hoipoi-article-content .art-scope h2::after,
.hoipoi-article-content .art-scope h3::after,
.hoipoi-article-content .art-scope h4::after,
.hoipoi-article-content .art-supervisor h2::before,
.hoipoi-article-content .art-supervisor h3::before,
.hoipoi-article-content .art-supervisor h4::before,
.hoipoi-article-content .art-plan-card h2::before,
.hoipoi-article-content .art-plan-card h3::before,
.hoipoi-article-content .art-plan-card h4::before {
  content: none !important;
  display: none !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content h2  {
  padding:14px 16px !important; font-size:20px !important;
}
  .hoipoi-article-content h3  { font-size: 17px !important; }
  .hoipoi-article-content h4  { font-size: 15px !important; }
}

/* =====================================================================
   §6-1. 監修者ボックス（art-supervisor）
   ===================================================================== */
.art-supervisor {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--art-bg);
  border: 1px solid var(--art-line);
  border-radius: var(--art-r-xl);
  padding: 22px 24px;
  margin: 24px 0;
  box-shadow: none;
}
.art-supervisor__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--art-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  box-shadow: none;
}
.hoipoi-article-content .art-supervisor__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.art-supervisor__label {
  font-size: 11px;
  color: var(--art-muted);
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.hoipoi-article-content .art-supervisor__name {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--art-ink) !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}
.hoipoi-article-content .art-supervisor__title {
  display: block !important;
  font-size: 13px !important;
  color: var(--art-ink-sub) !important;
  margin-bottom: 8px !important;
}
.art-supervisor__credential {
  font-size: 13px;
  line-height: 1.7;
  color: var(--art-ink-sub);
  margin: 0;
}

/* =====================================================================
   §6-2. メタ情報バー（art-meta） v4 / 統計カード風
   ===================================================================== */
.art-meta {
  background: #fff;
  border: 1px solid var(--art-line);
  border-radius: 6px;
  padding: 18px 24px;
  margin: 16px 0 28px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}

/* ----- メタ項目 ----- */
.art-meta__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px 24px !important;
  border-right: 1px solid var(--art-line) !important;
  align-items: flex-start !important;
}
.art-meta__item:last-child {
  border-right: none !important;
}

/* ----- ラベル（英字キャプション風）----- */
.art-meta__key {
  font-size: 9px !important;
  color: #999 !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* ----- 値（日付・件数など）----- */
.art-meta__val {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A1426 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
}
.art-meta__val a {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--art-ink) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

/* ----- 数値の強調 ----- */
.art-meta__val .art-meta__num {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--art-ink) !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .art-meta {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px 18px;
    gap: 12px 0;
  }
  .art-meta__item {
    padding: 6px 14px !important;
    gap: 6px !important;
  }
  .art-meta__item:nth-child(2n) {
    border-right: none !important;
  }
  .art-meta__val { font-size: 13px !important; }
}

/* =====================================================================
   §6-3. アラートボックス（art-alert） v3
   5タイプ統一：種別ラベルと補足本文
   ===================================================================== */
.hoipoi-article-content .art-alert {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--art-alert-bg) !important;
  border: 1px solid var(--art-alert-color) !important;
  box-shadow: none !important;
}


/* ----- 本文 ----- */
.hoipoi-article-content .art-alert__body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #1A1426 !important;
}
.art-alert__body strong { font-weight: 700; }

/* ----- ヘッダー：タイプの説明（5タイプ共通の構造、内容だけ違う） ----- */
.hoipoi-article-content .art-alert__body::before {
  display: block !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  color: var(--art-alert-color) !important;
}

/* =====================================================================
   タイプ別カラー＆キャプション
   ===================================================================== */

/* ----- info：補足情報 / 青灰 ----- */
.hoipoi-article-content .art-alert--info {
  --art-alert-color: var(--art-info);
  --art-alert-bg: #eaf1f6;
}
.hoipoi-article-content .art-alert--info .art-alert__body::before {
  content: "補足情報" !important;
}

/* ----- good：良い点 / 緑 ----- */
.hoipoi-article-content .art-alert--good {
  --art-alert-color: var(--art-good);
  --art-alert-bg: #e9f2e9;
}
.hoipoi-article-content .art-alert--good .art-alert__body::before {
  content: "良い点" !important;
}

/* ----- warn：要確認 / 黄 ----- */
.hoipoi-article-content .art-alert--warn {
  --art-alert-color: var(--art-warn);
  --art-alert-bg: #fff2d1;
}
.hoipoi-article-content .art-alert--warn .art-alert__body::before {
  content: "要確認" !important;
}

/* ----- bad：注意 / 赤 ----- */
.hoipoi-article-content .art-alert--bad {
  --art-alert-color: var(--art-bad);
  --art-alert-bg: #fbe8e5;
}
.hoipoi-article-content .art-alert--bad .art-alert__body::before {
  content: "注意" !important;
}

/* ----- ai：AI情報 / 紫 ----- */
.hoipoi-article-content .art-alert--ai {
  --art-alert-color: var(--art-purple);
  --art-alert-bg: #eee9f6;
}
.hoipoi-article-content .art-alert--ai .art-alert__body::before {
  content: "AI情報" !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-alert {
    padding: 16px 18px !important;
    gap: 12px !important;
  }
}
/* =====================================================================
   §6-4. サマリーボックス（art-summary） v4
   ヘッダー：目次トンマナ統一 / リスト：チェック記号
   ===================================================================== */
.hoipoi-article-content .art-summary,
.hoipoi-article-content section .art-summary {
  background: var(--art-bg) !important;
  border: 1px solid var(--art-line) !important;
  border-radius: 6px !important;
  padding: 24px 28px !important;
  margin: 24px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* ----- アイコン＋タイトル ----- */
.hoipoi-article-content .art-summary__title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1A1426 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ----- リスト：チェック記号 ----- */
.hoipoi-article-content ul.art-summary__list,
.hoipoi-article-content .art-summary__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}
.hoipoi-article-content ul.art-summary__list > li,
.hoipoi-article-content .art-summary__list > li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  position: static !important;
  color: #1A1426 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
}
.hoipoi-article-content ul.art-summary__list > li + li,
.hoipoi-article-content .art-summary__list > li + li {
  border-top: 1px dashed var(--art-line) !important;
}

/* チェック記号 */
.hoipoi-article-content ul.art-summary__list > li::before,
.hoipoi-article-content .art-summary__list > li::before {
  content: none !important;
}
.hoipoi-article-content ul.art-summary__list > li::marker,
.hoipoi-article-content .art-summary__list > li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-summary,
  .hoipoi-article-content section .art-summary {
    padding: 22px !important;
  }
  .hoipoi-article-content .art-summary__title { font-size: 17px !important; }
}

/* =====================================================================
   §6-5. 目次（art-toc） v2 / 半開示アコーディオン
   ===================================================================== */
.art-toc {
  background: #fff;
  border: 1px solid var(--art-line);
  border-radius: 6px;
  padding: 24px 28px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}

/* ----- アイコン＋目次タイトル ----- */
.art-toc__title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1A1426 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
}

/* ----- リスト ----- */
.hoipoi-article-content ul.art-toc__list,
.hoipoi-article-content .art-toc__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}
.hoipoi-article-content ul.art-toc__list > li,
.hoipoi-article-content .art-toc__list > li {
  padding: 10px 0 !important;
  border-top: 1px solid var(--art-line) !important;
  border-bottom: none !important;
  list-style: none !important;
}
.hoipoi-article-content ul.art-toc__list > li:first-child,
.hoipoi-article-content .art-toc__list > li:first-child {
  border-top: none !important;
}

/* ----- リンク行 ----- */
.art-toc__list a {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  color: #1A1426 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  padding: 0 !important;
  transition: color .15s !important;
}
.art-toc__list a:hover { color: var(--art-ink) !important; }

/* ----- アウトラインピル（番号バッジ） ----- */
.art-toc__list a::before {
  content: counter(art-toc-counter, decimal-leading-zero) !important;
  counter-increment: art-toc-counter !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 24px !important;
  padding: 0 12px !important;
  background: #fff !important;
  border-radius: 6px !important;
  font-family: 'Helvetica Neue', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--art-line) !important;
  color: var(--art-ink) !important;
}

.art-toc { counter-reset: art-toc-counter; }

/* ----- 半開示：6番目以降を隠す ----- */
.art-toc[data-enhanced="true"]:not(.is-open) .art-toc__list > li:nth-child(n+6) {
  display: none !important;
}

/* ----- 「もっと見る/閉じる」ボタン ----- */
.art-toc__more {
  margin-top: 14px;
  padding: 14px 0 0;
  border-top: 1px dashed var(--art-line);
  text-align: center;
}
.art-toc__more-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 28px !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--art-line) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color .15s, border-color .15s !important;
  box-shadow: none !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
}
.art-toc__more-btn-text,
.art-toc__more-btn-icon {
  font-size: 12px !important;
  font-weight: 700 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--art-ink) !important;
  line-height: 1 !important;
}
.art-toc__more-btn-icon {
  font-size: 11px !important;
  transition: transform 0.25s !important;
}

/* ホバー：濃い背景と白文字 */
.art-toc__more-btn:hover {
  background-image: none !important;
  box-shadow: none !important;
  background-color: var(--art-ink) !important;
}
.art-toc__more-btn:hover .art-toc__more-btn-text,
.art-toc__more-btn:hover .art-toc__more-btn-icon {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* 開いた状態：アイコンを反転、テキスト切替 */
.art-toc.is-open .art-toc__more-btn-icon {
  transform: rotate(180deg) !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .art-toc { padding: 20px 22px; }
  .hoipoi-article-content .art-toc__title { font-size: 17px !important; }
  .art-toc__list a { gap: 12px !important; font-size: 12.5px !important; }
  .art-toc__list a::before { min-width: 44px !important; padding: 0 10px !important; font-size: 10.5px !important; }
}

/* =====================================================================
   §6-6. 口コミ音声カード（art-voice）
   ===================================================================== */
.hoipoi-article-content .art-voice {
  background: var(--art-bg) !important;
  border: 1px solid var(--art-line) !important;
  border-radius: var(--art-r-xl) !important;
  padding: 24px 26px !important;
  margin: 20px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}
.hoipoi-article-content .art-voice::before {
  content: "\201C" !important;
  position: absolute !important;
  top: -6px !important;
  left: 18px !important;
  font-size: 54px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  color: var(--art-coral) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: block !important;
}
.hoipoi-article-content .art-voice p.art-voice__quote,
.hoipoi-article-content .art-voice .art-voice__quote,
.hoipoi-article-content p.art-voice__quote {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: var(--art-ink) !important;
  margin: 10px 0 14px !important;
  padding: 0 0 0 6px !important;
  font-weight: 400 !important;
  background: none !important;
  border: none !important;
  height: auto !important;
  overflow: visible !important;
}
.hoipoi-article-content .art-voice .art-voice__meta {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: center !important;
  padding-top: 12px !important;
  margin: 0 !important;
  border-top: 1px dashed var(--art-line) !important;
  flex-wrap: nowrap !important;
}
.hoipoi-article-content .art-voice .art-voice__avatar,
.hoipoi-article-content .art-voice .art-voice__meta .art-voice__avatar {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: var(--art-fill) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.hoipoi-article-content .art-voice .art-voice__meta > div:not(.art-voice__avatar) {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
.hoipoi-article-content .art-voice .art-voice__name {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--art-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.hoipoi-article-content .art-voice .art-voice__role {
  display: inline-block !important;
  font-size: 12px !important;
  color: var(--art-muted) !important;
  margin: 0 !important;
  margin-left: 6px !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

/* =====================================================================
   §6-7. メリット・デメリット（art-pros-cons） v2
   ===================================================================== */
.art-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}
@media (max-width: 640px) {
  .art-pros-cons { grid-template-columns: 1fr; }
}

.hoipoi-article-content .art-pros-cons__col {
  border-radius: 6px !important;
  padding: 22px 24px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--art-line) !important;
}
.hoipoi-article-content .art-pros-cons__col--pros {
  background: var(--art-bg) !important;
  border-color: var(--art-line) !important;
}
.hoipoi-article-content .art-pros-cons__col--cons {
  background: var(--art-bg) !important;
  border-color: var(--art-line) !important;
}

/* ----- タイトル領域：角丸スクエアアイコン＋PROS/CONS英字＋日本語 ----- */
.hoipoi-article-content .art-pros-cons__title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.3 !important;
}
.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__title {
  color: var(--art-ink) !important;
}
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__title {
  color: var(--art-ink) !important;
}

/* ----- リスト ----- */
.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__list,
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__list > li,
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__list > li {
  padding: 7px 0 7px 22px !important;
  position: relative !important;
  color: #1A1426 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
}
.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__list > li + li {
  border-top: 1px dashed var(--art-line) !important;
}
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__list > li + li {
  border-top: 1px dashed var(--art-line) !important;
}

.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__list > li::before {
  content: "◎" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  color: #10B981 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  line-height: 1 !important;
}
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__list > li::before {
  content: "✕" !important;
  position: absolute !important;
  left: 4px !important;
  top: 8px !important;
  color: #DC2626 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  line-height: 1 !important;
}
.hoipoi-article-content .art-pros-cons__col--pros .art-pros-cons__list > li::marker,
.hoipoi-article-content .art-pros-cons__col--cons .art-pros-cons__list > li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

/* =====================================================================
   §6-8. 料金プランカード（art-plan-card）v6
   価格超大型化＋price_subをCTA注釈に統合パターン
   ===================================================================== */
.hoipoi-article-content .art-plan-card {
  background: var(--art-bg) !important;
  background-image: none !important;
  border: 1px solid var(--art-line) !important;
  border-radius: var(--art-r-xl) !important;
  padding: 28px 30px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: visible !important;
}
.hoipoi-article-content .art-plan-card--recommended {
  border: 2px solid var(--art-ink) !important;
  background: var(--art-bg) !important;
}

/* ----- リボン ----- */
.hoipoi-article-content .art-plan-card__ribbon {
  position: absolute !important;
  top: -14px !important;
  left: 24px !important;
  background: var(--art-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  letter-spacing: .05em !important;
  box-shadow: none !important;
  display: inline-block !important;
  z-index: 2 !important;
  line-height: 1.4 !important;
}

/* ----- ヘッド領域：プラン名＋価格 ----- */
.hoipoi-article-content .art-plan-card .art-plan-card__head {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  writing-mode: horizontal-tb !important;
}
.hoipoi-article-content .art-plan-card .art-plan-card__head > div:first-child,
.hoipoi-article-content .art-plan-card .art-plan-card__head > :first-child {
  flex: 1 1 60% !important;
  min-width: 0 !important;
  max-width: 60% !important;
  text-align: left !important;
  overflow: hidden !important;
  writing-mode: horizontal-tb !important;
  display: block !important;
  align-self: center !important;
}

/* ----- プラン名（v6：22pxに大型化＋ピンクカラー） ----- */
.hoipoi-article-content .art-plan-card .art-plan-card__name {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--art-ink) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  background: none !important;
  border: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  letter-spacing: normal !important;
  text-align: left !important;
}
.hoipoi-article-content .art-plan-card .art-plan-card__tagline {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  font-size: 13px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  writing-mode: horizontal-tb !important;
  letter-spacing: normal !important;
  text-align: left !important;
}

/* ----- 価格カラム（v6：42pxに超大型化） ----- */
.hoipoi-article-content .art-plan-card .art-plan-card__price {
  display: block !important;
  text-align: right !important;
  flex: 0 0 auto !important;
  max-width: 40% !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  line-height: 1 !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}
.hoipoi-article-content .art-plan-card .art-plan-card__price > div {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  width: auto !important;
  text-align: right !important;
}
/* ★ 価格メイン：42pxに超大型化 */
.hoipoi-article-content .art-plan-card .art-plan-card__price-main {
  display: inline !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--art-ink) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}
.hoipoi-article-content .art-plan-card .art-plan-card__price-unit {
  display: inline !important;
  font-size: 14px !important;
  color: #999 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
/* ★ price_sub：価格下に小さく表示（簡潔な内容用） */
.hoipoi-article-content .art-plan-card .art-plan-card__price-sub {
  display: block !important;
  font-size: 11px !important;
  color: #888 !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
}

/* ----- 機能リスト ----- */
.hoipoi-article-content ul.art-plan-card__feats,
.hoipoi-article-content .art-plan-card .art-plan-card__feats {
  list-style: none !important;
  padding: 14px 0 16px !important;
  margin: 22px 0 0 !important;
  border-top: 1px dashed var(--art-line) !important;
  border-bottom: 1px dashed var(--art-line) !important;
  border-left: none !important;
  border-right: none !important;
  background: none !important;
}
.hoipoi-article-content ul.art-plan-card__feats > li,
.hoipoi-article-content .art-plan-card .art-plan-card__feats > li,
.hoipoi-article-content .art-plan-card .art-plan-card__feats-item {
  padding: 5px 0 5px 24px !important;
  position: relative !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--art-ink-sub) !important;
  display: block !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  list-style: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.hoipoi-article-content ul.art-plan-card__feats > li::before,
.hoipoi-article-content .art-plan-card .art-plan-card__feats > li::before,
.hoipoi-article-content .art-plan-card .art-plan-card__feats-item::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 2px !important;
  top: 5px !important;
  color: var(--art-good) !important;
  font-weight: 700 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  border: none !important;
}
.hoipoi-article-content ul.art-plan-card__feats > li.art-excl::before,
.hoipoi-article-content .art-plan-card .art-plan-card__feats > li.art-excl::before,
.hoipoi-article-content .art-plan-card .art-plan-card__feats-item.art-excl::before {
  content: "\2014" !important;
  color: var(--art-muted) !important;
}

/* ----- CTAボタン領域 ----- */
.hoipoi-article-content .art-plan-card .art-cta-wrap {
  text-align: center !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-plan-card {
    padding: 24px 22px !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__head > :first-child {
    max-width: 100% !important;
    flex: none !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price {
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price > div {
    justify-content: flex-start !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price-main {
    font-size: 36px !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price-sub {
    text-align: left !important;
  }
}

/* =====================================================================
   §6-9. CTAボタン（art-cta）
   ===================================================================== */
.art-cta-wrap {
  text-align: center;
  margin: 24px 0;
}
.hoipoi-article-content .art-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 38px !important;
  background: var(--art-fill) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color .15s !important;
  min-width: 260px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 0 !important;
}
.hoipoi-article-content .art-cta:hover {
  box-shadow: none !important;
  color: #fff !important;
  background: #3f4249 !important;
}
.hoipoi-article-content .art-cta > * { position: relative !important; z-index: 2 !important; }
.hoipoi-article-content .art-cta.art-cta--active,
.hoipoi-article-content .art-cta.art-cta--active:hover {
  background: linear-gradient(90deg, #de339c 0%, #ff191d 28%, #ff2518 57%, #ffad42 100%) !important;
  color: #fff !important;
  min-width: min(260px, 100%) !important;
  max-width: 100% !important;
}
.hoipoi-article-content .art-cta.art-cta--active:focus-visible {
  outline: 2px solid var(--art-ink);
  outline-offset: 4px;
}

.art-cta-note {
  display: block;
  font-size: 11px;
  color: var(--art-muted);
  margin-top: 8px;
}

/* =============================================================
 * 比較表：行コンパクト化＋1列目sticky固定＋ドラッグカーソル
 * ============================================================= */

/* セルを改行禁止にして、行を1行にキープ */
.hoipoi-article-content .art-compare-table th,
.hoipoi-article-content .art-compare-table td {
  white-space: nowrap !important;
}

/* 1列目（tbody th = ラベル列）を左側に固定 */
.hoipoi-article-content .art-compare-table tbody th {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  box-shadow: 1px 0 0 rgba(236,228,236,.9) !important;
}

/* ヘッダー行の1列目（thead th:first-child）も左固定 */
.hoipoi-article-content .art-compare-table thead tr:first-child th:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;
}

/* ラッパーに掴む手カーソル */
.hoipoi-article-content .art-compare-wrap {
  cursor: grab;
}
.hoipoi-article-content .art-compare-wrap:active {
  cursor: grabbing;
}

/* スクロールバー装飾（比較表ラッパー） */
.hoipoi-article-content .art-compare-wrap::-webkit-scrollbar { height: 10px; }
.hoipoi-article-content .art-compare-wrap::-webkit-scrollbar-track { background: #f5eedd; border-radius: 5px; }
.hoipoi-article-content .art-compare-wrap::-webkit-scrollbar-thumb { background: #b0a587; border-radius: 5px; }
.hoipoi-article-content .art-compare-wrap::-webkit-scrollbar-thumb:hover { background: #958a6c; }

/* =====================================================================
   §6-11. FAQアコーディオン（art-faq）
   ===================================================================== */
.art-faq { margin: 24px 0; }
.art-faq__item {
  border: 1px solid var(--art-line);
  border-radius: var(--art-r-md);
  background: var(--art-bg);
  margin-bottom: 10px;
  overflow: hidden;
}
.hoipoi-article-content .art-faq__q {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  padding: 16px 18px !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--art-ink);
  text-align: left;
  line-height: 1.5;
  font-family: var(--art-font);
}
.art-faq__q::before {
  content: "Q";
  flex: 0 0 26px;
  width: 26px; height: 26px;
  background: var(--art-fill);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  box-shadow: none;
}
.hoipoi-article-content .art-faq__q-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.art-faq__toggle {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
}
.art-faq__item.is-open .art-faq__toggle {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
}
.art-faq__a {
  display: block;
  padding: 14px 18px 18px 56px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--art-ink-sub);
  border-top: 1px dashed var(--art-line);
  position: relative;
}
.art-faq__a::before {
  content: "A";
  position: absolute;
  left: 18px; top: 14px;
  width: 26px; height: 26px;
  background: var(--art-accent);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  box-shadow: none;
}
.art-faq__a[hidden] { display: none; }

/* =====================================================================
   §6-12. STEP（art-step）
   ===================================================================== */
.hoipoi-article-content ol.art-step,
.hoipoi-article-content .art-step {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 24px 0 !important;
  counter-reset: step !important;
  border: none !important;
  background: none !important;
}

.hoipoi-article-content ol.art-step > li.art-step__item,
.hoipoi-article-content ol.art-step > li,
.hoipoi-article-content .art-step > li.art-step__item,
.hoipoi-article-content .art-step > li {
  list-style: none !important;
  list-style-type: none !important;
  display: block !important;
  counter-increment: step !important;
  position: relative !important;
  padding: 0 0 24px 56px !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  text-indent: 0 !important;
}
.hoipoi-article-content ol.art-step > li::marker,
.hoipoi-article-content .art-step > li::marker {
  content: "" !important;
  display: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* ----- 番号バッジ：番号を角丸の枠内に表示 ----- */
.hoipoi-article-content ol.art-step > li.art-step__item::before,
.hoipoi-article-content ol.art-step > li::before,
.hoipoi-article-content .art-step > li.art-step__item::before,
.hoipoi-article-content .art-step > li::before {
  content: counter(step) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--art-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  z-index: 1 !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

/* ----- 手順の接続線 ----- */
.hoipoi-article-content ol.art-step > li.art-step__item:not(:last-child)::after,
.hoipoi-article-content .art-step > li.art-step__item:not(:last-child)::after,
.hoipoi-article-content ol.art-step > li:not(:last-child)::after,
.hoipoi-article-content .art-step > li:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  left: 19px !important;
  top: 40px !important;
  width: 2px !important;
  height: calc(100% - 40px) !important;
  background: var(--art-accent) !important;
  opacity: 0.25 !important;
  display: block !important;
  border: none !important;
}

/* ----- タイトル ----- */
.hoipoi-article-content .art-step .art-step__title,
.hoipoi-article-content .art-step__item .art-step__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1A1426 !important;
  margin: 6px 0 4px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  line-height: 1.4 !important;
  padding-top: 6px !important;
}

/* ----- 所要時間バッジ ----- */
.hoipoi-article-content .art-step .art-step__time,
.hoipoi-article-content .art-step__item .art-step__time {
  font-size: 11px !important;
  color: var(--art-ink) !important;
  background: #FCE7F3 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  white-space: nowrap !important;
  border: none !important;
}

/* ----- 説明文 ----- */
.hoipoi-article-content .art-step__desc {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #3F3349 !important;
  margin: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 480px) {
  .hoipoi-article-content ol.art-step > li.art-step__item::before,
  .hoipoi-article-content ol.art-step > li::before,
  .hoipoi-article-content .art-step > li.art-step__item::before,
  .hoipoi-article-content .art-step > li::before {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }
  .hoipoi-article-content ol.art-step > li,
  .hoipoi-article-content .art-step > li {
    padding-left: 48px !important;
  }
  .hoipoi-article-content ol.art-step > li:not(:last-child)::after,
  .hoipoi-article-content .art-step > li:not(:last-child)::after {
    left: 17px !important;
    top: 36px !important;
  }
}

/* =====================================================================
   §6-13. 機能グリッド（art-feat-grid） v2
   項目番号と説明文
   ===================================================================== */
.art-feat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin: 24px 0 !important;
  counter-reset: art-feat-counter !important;
}
@media (max-width: 640px) {
  .art-feat-grid { grid-template-columns: 1fr !important; }
}

.hoipoi-article-content .art-feat-grid__item {
  background: #fff !important;
  border: 1px solid var(--art-line) !important;
  border-radius: 6px !important;
  padding: 20px 22px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  counter-increment: art-feat-counter !important;
  margin: 0 !important;
}


/* ----- 本文ラッパー ----- */
.hoipoi-article-content .art-feat-grid__body {
  flex: 1 !important;
  min-width: 0 !important;
}

/* ----- FEATURE 番号（自動カウンタ） ----- */
.hoipoi-article-content .art-feat-grid__body::before {
  content: "FEATURE " counter(art-feat-counter, decimal-leading-zero) !important;
  display: block !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  color: var(--art-ink) !important;
}

/* ----- タイトル ----- */
.hoipoi-article-content .art-feat-grid__title {
  display: block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1A1426 !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* ----- 説明文 ----- */
.hoipoi-article-content .art-feat-grid__desc,
.hoipoi-article-content .art-feat-grid__item .art-feat-grid__desc,
.hoipoi-article-content .art-feat-grid__item p {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: #444 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-feat-grid__item {
    padding: 18px 18px !important;
    gap: 10px !important;
  }
  .hoipoi-article-content .art-feat-grid__title { font-size: 13px !important; }
}

/* =====================================================================
   §6-14. おすすめ対象（art-recommend） v2
   ヘッダー強化＋アイコンバッジ統一 / YES=緑 / NO=ニュートラルグレー
   ===================================================================== */
.art-recommend {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 24px 0 !important;
}
@media (max-width: 640px) {
  .art-recommend { grid-template-columns: 1fr !important; }
}

.hoipoi-article-content .art-recommend__col {
  border-radius: 6px !important;
  padding: 22px 24px !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--art-line) !important;
}
.hoipoi-article-content .art-recommend__col--yes {
  background: var(--art-bg) !important;
  border-color: var(--art-line) !important;
}
.hoipoi-article-content .art-recommend__col--no {
  background: var(--art-bg) !important;
  border-color: var(--art-line) !important;
}

/* ----- タイトル：角丸スクエアアイコン＋英字ラベル+日本語 ----- */
.hoipoi-article-content .art-recommend__title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.3 !important;
}
.hoipoi-article-content .art-recommend__col--yes .art-recommend__title {  color: var(--art-ink) !important; }
.hoipoi-article-content .art-recommend__col--no .art-recommend__title {  color: var(--art-ink) !important; }

/* ----- リスト ----- */
.hoipoi-article-content .art-recommend__col--yes .art-recommend__list,
.hoipoi-article-content .art-recommend__col--no .art-recommend__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.hoipoi-article-content .art-recommend__col--yes .art-recommend__list > li,
.hoipoi-article-content .art-recommend__col--no .art-recommend__list > li {
  padding: 7px 0 7px 22px !important;
  position: relative !important;
  color: #1A1426 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
}
.hoipoi-article-content .art-recommend__col--yes .art-recommend__list > li + li {
  border-top: 1px dashed var(--art-line) !important;
}
.hoipoi-article-content .art-recommend__col--no .art-recommend__list > li + li {
  border-top: 1px dashed var(--art-line) !important;
}

.hoipoi-article-content .art-recommend__col--yes .art-recommend__list > li::before {
  content: "◎" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  color: #10B981 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  line-height: 1 !important;
}
.hoipoi-article-content .art-recommend__col--no .art-recommend__list > li::before {
  content: "×" !important;
  position: absolute !important;
  left: 4px !important;
  top: 8px !important;
  color: #78716C !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  line-height: 1 !important;
}
.hoipoi-article-content .art-recommend__col--yes .art-recommend__list > li::marker,
.hoipoi-article-content .art-recommend__col--no .art-recommend__list > li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

/* =====================================================================
   §6-15. 体験談カード（art-testimonial） v2
   アバター＋ピル型タグ＋CASE番号＋業種別カラー
   ===================================================================== */
.hoipoi-article-content .art-testimonial {
  background: #fff !important;
  border: 1px solid var(--art-line) !important;
  border-left: none !important;
  border-radius: 6px !important;
  padding: 20px 22px !important;
  margin: 20px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  counter-increment: art-testimonial-counter !important;
}
.hoipoi-article-content section.entry-content,
.hoipoi-article-content {
  counter-reset: art-testimonial-counter !important;
}

/* ----- アバター＋CASE番号の縦積みコンテナ ----- */
.hoipoi-article-content .art-testimonial__avatar-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  min-width: 56px !important;
}
.hoipoi-article-content .art-testimonial__avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--art-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.hoipoi-article-content .art-testimonial__case {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--art-ink) !important;
}
.hoipoi-article-content .art-testimonial__case::before {
  content: "CASE " counter(art-testimonial-counter, decimal-leading-zero) !important;
}

/* ----- メタ情報（ピル型タグ） ----- */
.hoipoi-article-content .art-testimonial__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.hoipoi-article-content .art-testimonial__meta span {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: #666 !important;
  background: #f5f5f5 !important;
  border: none !important;
}
/* 業種タグ（先頭）：細い罫線 */
.hoipoi-article-content .art-testimonial__meta span.art-testimonial__industry {
  background: var(--art-bg) !important;
  border: 1px solid var(--art-line) !important;
  color: var(--art-ink) !important;
  font-weight: 700 !important;
}
/* プラン+利用歴タグ（最後）：黒背景白文字で強調 */
.hoipoi-article-content .art-testimonial__meta span.art-testimonial__plan {
  background: #1A1426 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ----- 本文（コンテナはflex化） ----- */
.hoipoi-article-content .art-testimonial {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.hoipoi-article-content .art-testimonial__body {
  flex: 1 !important;
  min-width: 0 !important;
}
.hoipoi-article-content .art-testimonial__body p,
.hoipoi-article-content p.art-testimonial__body {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #1A1426 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-testimonial {
    padding: 18px 18px !important;
    gap: 12px !important;
  }
  .hoipoi-article-content .art-testimonial__avatar-wrap { min-width: 48px !important; }
  .hoipoi-article-content .art-testimonial__avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
  }
  .hoipoi-article-content .art-testimonial__meta span { font-size: 9px !important; padding: 2px 7px !important; }
}

/* =====================================================================
   §6-16. 記事フッター（art-footer）
   ===================================================================== */
.art-footer {
  margin: 40px 0 20px;
  padding: 20px 24px;
  background: var(--art-bg-tint);
  border-radius: var(--art-r-lg);
  font-size: 12px;
  color: var(--art-muted);
  line-height: 1.7;
}
.art-footer a { color: var(--art-ink-sub); }

/* =====================================================================
   §7. ユーティリティ
   ===================================================================== */
.art-highlight-text {
  background: linear-gradient(transparent 55%, rgba(216,181,109,.38) 55%);
  font-weight:700; padding:0 2px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.art-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
  background: var(--art-bg-tint);
  color: var(--art-ink-sub);
}
.art-tag--ai  { background: var(--art-purple-l); color: var(--art-purple); }
.art-tag--new { background: var(--art-accent-l); color: var(--art-accent); }

/* =====================================================================
   §8. アニメーション
   ===================================================================== */

/* =====================================================================
   §9. モバイル調整
   ===================================================================== */
@media (max-width: 480px) {
  .art-supervisor         { padding: 16px; gap: 12px; }
  .art-supervisor__avatar { flex-basis: 48px; width: 48px; height: 48px; font-size: 19px; }

  .hoipoi-article-content .art-plan-card              { padding: 18px 18px !important; }
  .hoipoi-article-content .art-plan-card .art-plan-card__head {
    flex-direction: column !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price {
    text-align: left !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price > div {
    justify-content: flex-start !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price-sub {
    text-align: left !important;
  }
  .hoipoi-article-content .art-plan-card .art-plan-card__price-main {
    font-size: 20px !important;
    text-align: left !important;
  }

  .hoipoi-article-content .art-cta {
    min-width: 0 !important;
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
  }

  .art-meta { font-size: 11px; gap: 8px 14px; padding: 10px 14px; }

  .hoipoi-article-content .art-step__item::before       { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .hoipoi-article-content .art-step > li                { padding-left: 48px !important; }
  .hoipoi-article-content .art-step__item:not(:last-child)::after { left: 18px !important; top: 36px !important; }
}

/* =====================================================================
   §10. [art_table] 自由な比較表（ショートコード用・統合版）
   ===================================================================== */
.art-table-title {
  margin: 1.6em 0 0.6em;
  padding: 0 4px;
  font-size: 1em;
  font-weight: 700;
  color: #202229;
}

.art-table-wrap {
  margin: 0 0 1.6em;
  background: #fff;
  border: 1px solid var(--art-line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.art-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  line-height: 0;
}

.art-table-wrap table.art-table {
  width: 100% !important;
  min-width: 560px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  font-size: 0.95em;
  line-height: 1.55;
  color: #202229;
}

.art-table-wrap table.art-table th,
.art-table-wrap table.art-table td {
  margin: 0 !important;
  border: 0 !important;
  background-clip: padding-box;
}

.art-table-wrap table.art-table thead th {
  background: #202229;
  color: #fff;
  padding: 18px 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.art-table-wrap table.art-table thead th.art-table__th--label {
  background: #202229;
  color: #fff;
}
.art-table-wrap table.art-table thead th.art-table__th--highlight {
  background: #3f4249;
  color: #fff;
}

.art-table-wrap table.art-table tbody th,
.art-table-wrap table.art-table tbody td {
  padding: 16px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  color: #202229;
  word-break: break-word;
  box-shadow: none;
}

.art-table-wrap table.art-table tbody th.art-table__cell--label {
  background: #f8f7f3;
  color: #202229;
  text-align: left;
  font-weight: 700;
  padding: 16px 20px;
  white-space: nowrap;
}
.art-table-wrap table.art-table tbody td.art-table__cell--highlight,
.art-table-wrap table.art-table tbody th.art-table__cell--highlight {
  background: #f0efeb;
  color: #202229;
  font-weight: 700;
}

.art-table-wrap table.art-table tbody tr:first-child th,
.art-table-wrap table.art-table tbody tr:first-child td {
  box-shadow: none;
}

.art-table-good { color: #4a9d6a; font-weight: 700; }
.art-table-bad  { color: #c44545; font-weight: 700; }

.art-table-caption {
  margin: 0.8em 4px 1.8em;
  font-size: 0.82em;
  color: #888;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .art-table-wrap table.art-table { font-size: 0.88em; }
  .art-table-wrap table.art-table thead th,
  .art-table-wrap table.art-table tbody th,
  .art-table-wrap table.art-table tbody td { padding: 12px 10px; }
  .art-table-wrap table.art-table tbody th.art-table__cell--label { padding: 12px 14px; }
}

/* =============================================================
 * [art_table] スクロール＆行コンパクト化修正
 * ============================================================= */

/* ラッパーを横スクロール可能に */
.art-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.art-table-wrap:active {
  cursor: grabbing;
}
/* 内側の art-table-scroll は不要（二重スクロール防止） */
.art-table-wrap .art-table-scroll {
  overflow: visible !important;
  line-height: normal;
}

/* セルを改行禁止にして縦書き回避 */
.art-table-wrap table.art-table th,
.art-table-wrap table.art-table td {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* 1列目（ラベル列）を左固定 */
.art-table-wrap table.art-table thead th:first-child,
.art-table-wrap table.art-table tbody th:first-child,
.art-table-wrap table.art-table tbody td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
}
.art-table-wrap table.art-table thead th:first-child {
  z-index: 3 !important;
}

/* スクロールバー装飾 */
.art-table-wrap::-webkit-scrollbar { height: 10px; }
.art-table-wrap::-webkit-scrollbar-track { background: #f5eedd; border-radius: 5px; }
.art-table-wrap::-webkit-scrollbar-thumb { background: #b0a587; border-radius: 5px; }
.art-table-wrap::-webkit-scrollbar-thumb:hover { background: #958a6c; }

/* =====================================================================
   §11. YouTube埋め込み 16:9 固定
   ===================================================================== */
.hoipoi-article-content iframe[src*="youtube.com"],
.hoipoi-article-content iframe[src*="youtu.be"],
.hoipoi-article-content iframe[src*="youtube-nocookie.com"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 1.5em auto !important;
  border: 0 !important;
  border-radius: 8px;
}

.hoipoi-article-content .wp-block-embed-youtube,
.hoipoi-article-content .wp-block-embed__wrapper,
.hoipoi-article-content figure.wp-block-embed,
.hoipoi-article-content p:has(> iframe[src*="youtube"]) {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@supports not (aspect-ratio: 16 / 9) {
  iframe[src*="youtube.com"],
  iframe[src*="youtu.be"],
  iframe[src*="youtube-nocookie.com"] {
    height: 56.25vw !important;
    max-height: 56.25vw !important;
  }
}

/* =====================================================================
   §12. 記事内プレーンテーブル（.hp-table-wrap 専用）
   ===================================================================== */
.hoipoi-article-content .hp-table-wrap  {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border: 1px solid #e0d9c8;
  border-radius: 8px;
  background: #fff;
}

.hoipoi-article-content .hp-table-wrap > table  {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px;
  line-height: 1.6;
  background: transparent;
  display: table !important;
}

.hoipoi-article-content .hp-table-wrap td,
.hoipoi-article-content .hp-table-wrap th  {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  text-align: center !important;
  line-height: 1.55 !important;
  white-space: nowrap !important;
  border-right: 1px solid #eee5d1 !important;
  border-bottom: 1px solid #eee5d1 !important;
}
.hoipoi-article-content .hp-table-wrap td:last-child,
.hoipoi-article-content .hp-table-wrap th:last-child  {
  border-right: none !important;
}
.hoipoi-article-content .hp-table-wrap tr:last-child td,
.hoipoi-article-content .hp-table-wrap tr:last-child th  {
  border-bottom: none !important;
}

.hoipoi-article-content .hp-table-wrap td:first-child,
.hoipoi-article-content .hp-table-wrap th:first-child  {
  text-align: left !important;
  background: #faf6ec !important;
  font-weight: 500 !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  box-shadow: 1px 0 0 #e0d9c8 !important;
}

.hoipoi-article-content .hp-table-wrap tr:has(> td strong):not(:has(> td:not(:has(strong)))) td  {
  background: #2B1B4A !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
}
.hoipoi-article-content .hp-table-wrap tr:has(> td strong):not(:has(> td:not(:has(strong)))) td:first-child  {
  background: #2B1B4A !important;
  z-index: 3 !important;
}
.hoipoi-article-content .hp-table-wrap tr:has(> td strong):not(:has(> td:not(:has(strong)))) strong  {
  color: #fff !important;
}

.hoipoi-article-content .hp-table-wrap tbody > tr:first-child:has(td:empty):not(:has(td:not(:empty)))  {
  display: none !important;
}

.hoipoi-article-content .hp-table-wrap::-webkit-scrollbar  { height: 10px; }
.hoipoi-article-content .hp-table-wrap::-webkit-scrollbar-track  { background: #f5eedd; border-radius: 5px; }
.hoipoi-article-content .hp-table-wrap::-webkit-scrollbar-thumb  { background: #b0a587; border-radius: 5px; }

@media (max-width: 767px) {
  .hoipoi-article-content .hp-table-wrap > table  { font-size: 13px; }
  .hoipoi-article-content .hp-table-wrap td,
.hoipoi-article-content .hp-table-wrap th  { padding: 10px 12px !important; }
}

/* =====================================================================
   以上 / Hoipoi Artlist記事装飾 CSS（完全版 v11.0）
   ===================================================================== */

/* =====================================================================
   §6-18. 解説リスト（art-deflist）/ 横並び型ピル型タグ＋説明 v2
   ===================================================================== */
.hoipoi-article-content .art-deflist,
.hoipoi-article-content section .art-deflist {
  background: #fff !important;
  border: 1px solid var(--art-line) !important;
  border-radius: 6px !important;
  padding: 24px 26px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ----- 項目（横並び：タグ＋説明） ----- */
.hoipoi-article-content .art-deflist .art-deflist__item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  border-top: 1px dashed var(--art-line) !important;
  background: none !important;
  list-style: none !important;
}
.hoipoi-article-content .art-deflist .art-deflist__item:first-child {
  padding-top: 4px !important;
  border-top: none !important;
}
.hoipoi-article-content .art-deflist .art-deflist__item:last-child {
  padding-bottom: 4px !important;
}

/* ----- 項目名 ----- */
.hoipoi-article-content .art-deflist .art-deflist__term {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 90px !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  flex-shrink: 1 !important;
  max-width: 45% !important;
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  background: var(--art-bg) !important;
  border: 1px solid var(--art-line) !important;
  box-sizing: border-box !important;
}
.hoipoi-article-content .art-deflist .art-deflist__term span,
.hoipoi-article-content .art-deflist .art-deflist__term > span {
  display: inline-block !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--art-ink) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

/* ----- 説明文 ----- */
.hoipoi-article-content .art-deflist .art-deflist__desc {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: #1A1426 !important;
  padding-top: 4px !important;
  margin: 0 !important;
}

/* ----- スマホ対応 ----- */
@media (max-width: 600px) {
  .hoipoi-article-content .art-deflist {
    padding: 20px 20px !important;
  }
  .hoipoi-article-content .art-deflist .art-deflist__item {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .hoipoi-article-content .art-deflist .art-deflist__term {
    align-self: flex-start !important;
    margin-top: 0 !important;
    max-width: 100% !important;
  }
  .hoipoi-article-content .art-deflist .art-deflist__desc {
    padding-top: 0 !important;
    font-size: 13px !important;
  }
}

/* =====================================================================
   §6-19. 本文中の素のリスト（<ul>）/ 箇条書き記号
   ※ ショートコード内 (.art-scope) のリストには影響しない
   ===================================================================== */
.hoipoi-article-content > ul,
.hoipoi-article-content > p + ul,
.hoipoi-article-content > h2 + ul,
.hoipoi-article-content > h3 + ul,
.hoipoi-article-content > h4 + ul {
  background: #fff !important;
  border: 1px solid var(--art-line) !important;
  border-radius: 6px !important;
  padding: 22px 26px !important;
  margin: 24px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  list-style: none !important;
}

/* 各項目 */
.hoipoi-article-content > ul > li,
.hoipoi-article-content > p + ul > li,
.hoipoi-article-content > h2 + ul > li,
.hoipoi-article-content > h3 + ul > li,
.hoipoi-article-content > h4 + ul > li {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border-top: 1px dashed var(--art-line) !important;
  background: none !important;
  list-style: none !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #1A1426 !important;
}
.hoipoi-article-content > ul > li:first-child,
.hoipoi-article-content > p + ul > li:first-child,
.hoipoi-article-content > h2 + ul > li:first-child,
.hoipoi-article-content > h3 + ul > li:first-child,
.hoipoi-article-content > h4 + ul > li:first-child {
  padding-top: 4px !important;
  border-top: none !important;
}
.hoipoi-article-content > ul > li:last-child,
.hoipoi-article-content > p + ul > li:last-child,
.hoipoi-article-content > h2 + ul > li:last-child,
.hoipoi-article-content > h3 + ul > li:last-child,
.hoipoi-article-content > h4 + ul > li:last-child {
  padding-bottom: 4px !important;
}

/* 箇条書き記号 */
.hoipoi-article-content > ul > li::before,
.hoipoi-article-content > p + ul > li::before,
.hoipoi-article-content > h2 + ul > li::before,
.hoipoi-article-content > h3 + ul > li::before,
.hoipoi-article-content > h4 + ul > li::before {
  content: "" !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  background: var(--art-accent) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.hoipoi-article-content > ul > li::marker,
.hoipoi-article-content > p + ul > li::marker,
.hoipoi-article-content > h2 + ul > li::marker,
.hoipoi-article-content > h3 + ul > li::marker,
.hoipoi-article-content > h4 + ul > li::marker {
  content: "" !important;
  display: none !important;
  font-size: 0 !important;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .hoipoi-article-content > ul,
  .hoipoi-article-content > p + ul,
  .hoipoi-article-content > h2 + ul,
  .hoipoi-article-content > h3 + ul,
  .hoipoi-article-content > h4 + ul {
    padding: 20px 22px !important;
  }
  .hoipoi-article-content > ul > li,
  .hoipoi-article-content > p + ul > li,
  .hoipoi-article-content > h2 + ul > li,
  .hoipoi-article-content > h3 + ul > li,
  .hoipoi-article-content > h4 + ul > li {
    font-size: 13px !important;
    gap: 12px !important;
  }
  .hoipoi-article-content > ul > li::before,
  .hoipoi-article-content > p + ul > li::before,
  .hoipoi-article-content > h2 + ul > li::before,
  .hoipoi-article-content > h3 + ul > li::before,
  .hoipoi-article-content > h4 + ul > li::before {
    width: 10px !important;
    height: 10px !important;
  }
}

/* =====================================================================
   §6-20. 筆者ノートカード(art-balloon)v1.1 / 2026-05-13
   - art_testimonial の構造を完全踏襲
   - アバターは44px円形・画像対応(object-fit:cover)
   - 色味: 紫 → ゴールド(#9333EA → #FBBF24)
   - 用途: 記事内に筆者の意見を随所に挟み込む装飾

   v1.0(2026-05-13)→ v1.1(2026-05-13): 色味をティール系から紫黄色グラデに変更

   ※ このブロックを style.css の末尾(§6-19の後)に追記してください
   ※ 色味を変えたい場合はこのブロック内の #9333EA / #FBBF24 を一括置換
   ===================================================================== */
.hoipoi-article-content .art-balloon {
  background: #fff !important;
  border: 1px solid var(--art-line) !important;
  border-radius: 6px !important;
  padding: 20px 22px !important;
  margin: 20px 0 !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}

/* アバター + ラベルの縦積みコンテナ(testimonialと同型) */
.hoipoi-article-content .art-balloon__avatar-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  min-width: 56px !important;
}

/* 円形アバター(画像対応) */
.hoipoi-article-content .art-balloon__avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--art-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 画像が指定された場合: 縦長・横長どんな画像も円形に綺麗に収まる */
.hoipoi-article-content .art-balloon__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 50% !important;
}

/* アバター下の英字ラベル(testimonialのCASE 01相当の位置) */
.hoipoi-article-content .art-balloon__label {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
  color: var(--art-ink) !important;
  text-align: center !important;
}

/* 本文ラッパー */
.hoipoi-article-content .art-balloon__body {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 本文上部の英字+日本語キャプション */
.hoipoi-article-content .art-balloon__caption {
  display: block !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: var(--art-ink) !important;
}

/* 本文p */
.hoipoi-article-content .art-balloon__body p,
.hoipoi-article-content p.art-balloon__body {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #1A1426 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .hoipoi-article-content .art-balloon {
    padding: 18px 18px !important;
    gap: 12px !important;
  }
  .hoipoi-article-content .art-balloon__avatar-wrap {
    min-width: 48px !important;
  }
  .hoipoi-article-content .art-balloon__avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
  }
}

/* =====================================================================
   以上 / §6-20. art_balloon 追加分(v1.1 紫黄色版)
   ===================================================================== */
/* Standalone compatibility and code gallery. */
.hoipoi-legacy-open { margin:24px 0; border:1px solid #e7e0d5; border-radius: 6px; }
.hoipoi-legacy-open > summary { padding:16px 20px; font-weight:700; cursor:pointer; }
.hoipoi-legacy-open > div { padding:0 20px 20px; }
.hoipoi-legacy-list { margin:24px 0; }
.hoipoi-shortcode-sample { margin:48px 0; padding-top:12px; scroll-margin-top:24px; }
.hoipoi-sample-note { padding:18px 22px; border-left:3px solid #d8b56d; background:#f8f7f3; }
.hoipoi-sample-index ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; padding-left:20px; }
.hoipoi-sample-index a { color:inherit; text-underline-offset:4px; }
.hoipoi-sample-preview { min-width:0; padding:16px 0; }
.hoipoi-sample-source { background:#151821; color:#fff; border-radius:8px; padding:16px; }
.hoipoi-article-content .hoipoi-sample-source pre { background:transparent; color:inherit; max-width:100%; overflow-x:auto; margin:12px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.hoipoi-sample-source code { color:inherit; font-size:13px; line-height:1.7; }
.hoipoi-sample-copy { padding:9px 14px; border:1px solid #d8b56d; border-radius:6px; background:transparent; color:#fff; cursor:pointer; font:inherit; font-size:13px; }
.hoipoi-sample-copy:focus-visible, .hoipoi-legacy-open > summary:focus-visible { outline:2px solid #d8b56d; outline-offset:4px; }
@media(max-width:640px) { .hoipoi-sample-index ul { grid-template-columns:1fr; } }