/* ============================================================
 *  Blog Redesign — Editorial Mono
 *  色は極力使わない。タイポ・余白・1px罫線で階層を作る。
 *  唯一の控えめなアクセント = "ink"（ほぼ黒）。
 *  既存テーマCSSを上書き／補完。
 * ============================================================ */

:root {
  /* グレースケール */
  --cp-ink: #111; /* 本文・タイトル */
  --cp-ink-2: #2a2a2a; /* 副見出し */
  --cp-muted: #6b6b6b; /* キャプション・メタ */
  --cp-mute-2: #8a8a8a; /* ごく淡い情報 */
  --cp-line: #e5e5e5; /* 1px罫線 */
  --cp-line-soft: #ededed;
  --cp-bg-soft: #fafafa; /* 微差の背景 */
  --cp-bg-card: #ffffff;

  /* アクセント（既存CTAの黄色を一点だけ流用） */
  --cp-accent: #ffc83d;
  --cp-accent-ink: #1a1300;

  /* タイポ ─ サイト本体と統一（Noto Sans JP / Inter） */
  --cp-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* スペース */
  --cp-gap-xl: 56px;
  --cp-gap-l: 40px;
  --cp-gap-m: 24px;
  --cp-gap-s: 16px;
}

/* ============================================================
 *  TOC（目次）— izakaya 風（モノクロ）
 *  注: .blog-article-block ol li::before { counter ... } が本文の
 *      汎用olに番号疑似要素を出すため、TOC内のol/liではこれを打ち消す。
 * ============================================================ */

.c-toc {
  margin: 0 0 32px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.c-toc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  list-style: none;
  gap: 12px;
}
.c-toc__btn::-webkit-details-marker,
.c-toc__btn::marker {
  display: none;
  content: "";
}
.c-toc__btn:hover {
  background: rgba(0, 0, 0, 0.02);
}
.c-toc__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-ink);
}
.c-toc__heading::before {
  content: none;
}
.c-toc__arrow {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #888;
  border-bottom: 1.5px solid #888;
  transform: rotate(45deg);
  transition: transform 0.25s;
  flex: 0 0 auto;
}
.c-toc[open] .c-toc__arrow {
  transform: rotate(-135deg);
}
.c-toc__body {
  padding: 0 20px 16px;
}

/* 本文ol干渉の打ち消し（重要） */
.blog-article-block .c-toc__list,
.blog-article-block .c-toc__sublist,
.article-content .c-toc__list,
.article-content .c-toc__sublist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blog-article-block .c-toc__item,
.blog-article-block .c-toc__subitem,
.article-content .c-toc__item,
.article-content .c-toc__subitem {
  padding-left: 0 !important;
  position: static !important;
}
/* 本文の .blog-article-block ol li::before が TOC にも噛むのを完全に殺す */
.blog-article-block .c-toc__item::before,
.blog-article-block .c-toc__subitem::before,
.article-content .c-toc__item::before,
.article-content .c-toc__subitem::before {
  content: none !important;
}

/* TOC 独自の番号 (counter-reset / increment) */
.c-toc__list {
  counter-reset: cp-toc-counter;
}
.c-toc__sublist {
  counter-reset: cp-toc-sub-counter;
  position: relative;
  padding: 4px 0 6px 28px !important;
  margin: 8px 0 14px 8px !important;
}
/* 縦罫線は擬似要素で出して、subitem との間に十分な余白を確保 */
.c-toc__sublist::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #d8d8d8;
}
.c-toc__item {
  counter-increment: cp-toc-counter;
  margin-bottom: 2px !important;
}
.c-toc__subitem {
  counter-increment: cp-toc-sub-counter;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}
.c-toc__link {
  display: block;
  padding: 6px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-ink);
  text-decoration: none;
  transition:
    color 0.2s,
    opacity 0.2s;
  line-height: 1.5;
}
.c-toc__item > .c-toc__link::before {
  content: counter(cp-toc-counter) ".";
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  color: var(--cp-ink);
}
.c-toc__link--sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--cp-ink-2);
  padding: 3px 0;
  padding-left: 20px;
  line-height: 1.55;
}
.c-toc__link--sub::before {
  content: none;
}
.c-toc__link:hover {
  opacity: 0.65;
}

@media (max-width: 600px) {
  .c-toc {
    margin-bottom: 24px;
  }
  .c-toc__btn {
    padding: 12px 16px;
  }
  .c-toc__body {
    padding: 0 16px 12px;
  }
  .c-toc__heading {
    font-size: 14px;
  }
  .c-toc__link {
    font-size: 13px;
  }
  .c-toc__link--sub {
    font-size: 12px;
  }
  .c-toc__sublist {
    padding-left: 24px !important;
    margin-left: 6px !important;
  }
  .c-toc__sublist::before {
    left: 8px;
  }
}

/* ============================================================
 *  Ad Disclosure（広告に関する開示）— izakaya tooltip パターン
 * ============================================================ */

.post-detail__ad-disclosure {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid var(--cp-line);
  margin-bottom: 16px;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--cp-muted);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
.tooltip__trigger:hover {
  color: var(--cp-ink);
  border-color: var(--cp-ink-2);
}
.tooltip__trigger[aria-expanded="true"] {
  color: var(--cp-ink);
  border-color: var(--cp-ink);
}
.tooltip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--cp-font-en);
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
.tooltip__icon::before {
  content: "i";
}
.tooltip__label {
  line-height: 1;
}
.tooltip__content {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: 320px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--cp-line);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  line-height: 1.75;
  color: var(--cp-ink-2);
  text-align: left;
}
.tooltip__content[hidden] {
  display: none;
}
.tooltip__content::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 20px;
  border: 6px solid transparent;
  border-top-color: var(--cp-line);
}
.tooltip__content::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 21px;
  border: 5px solid transparent;
  border-top-color: #fff;
}
.tooltip__content a {
  color: var(--cp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tooltip__content a:hover {
  opacity: 0.7;
}
.tooltip__content p {
  margin: 0;
}

@media (max-width: 600px) {
  .tooltip__content {
    width: calc(100vw - 48px);
    max-width: 320px;
    right: 0;
  }
}

/* ============================================================
 *  Byline（筆者・監修者） — izakaya 構造、モノクロ配色
 * ============================================================ */

.post-detail__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 16px 0;
}
.post-detail__byline-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-detail__byline-label {
  font-family: var(--cp-font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--cp-ink);
  padding: 3px 9px;
  border-radius: 3px;
}
.post-detail__byline-author {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--cp-ink);
  transition: opacity 0.2s;
}
.post-detail__byline-author:hover {
  opacity: 0.7;
}
.post-detail__byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cp-bg-soft);
}
.post-detail__byline-name {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}
@media (max-width: 600px) {
  .post-detail__byline {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============================================================
 *  Trust bar（免責 + 信頼する理由 accordion） — izakaya 構造
 * ============================================================ */

.post-detail__trust-bar {
  margin: 16px 0;
}
.post-detail__disclaimer-text {
  background: var(--cp-bg-soft);
  border-left: 3px solid var(--cp-ink);
  padding: 12px 16px;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--cp-ink-2);
  margin: 0;
}
.post-detail__disclaimer-text strong {
  color: var(--cp-ink);
  font-weight: 700;
}
.post-detail__disclaimer-link {
  color: var(--cp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-detail__disclaimer-link:hover {
  opacity: 0.7;
}

.trust-accordion {
  margin-top: 8px;
  border: 1px solid var(--cp-line);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.trust-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--cp-bg-soft);
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
  list-style: none;
}
.trust-accordion__btn::-webkit-details-marker,
.trust-accordion__btn::marker {
  display: none;
  content: "";
}
.trust-accordion__btn:hover {
  background: #f0f0f0;
}
.trust-accordion__btn-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-ink);
}
.trust-accordion__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--cp-ink);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>')
    center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>')
    center/contain no-repeat;
}
.trust-accordion__arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--cp-ink);
  border-bottom: 1px solid var(--cp-ink);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.trust-accordion[open] .trust-accordion__arrow {
  transform: rotate(-135deg);
}
.trust-accordion__body {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--cp-line);
}
.trust-accordion__text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--cp-ink-2);
  margin: 0 0 12px;
}
.trust-accordion__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.trust-accordion__checklist li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--cp-ink-2);
}
.trust-accordion__checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--cp-ink);
  border-bottom: 1.5px solid var(--cp-ink);
  transform: rotate(-45deg);
}
.trust-accordion__checklist li a {
  color: var(--cp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust-accordion__checklist li a:hover {
  opacity: 0.7;
}

/* ============================================================
 *  Author Box（記事末尾） — izakaya 構造、モノクロ配色
 * ============================================================ */

.post-detail__author-box {
  margin: var(--cp-gap-l) 0 var(--cp-gap-m);
  padding: 24px;
  background: var(--cp-bg-soft);
  border-radius: 8px;
}
.post-detail__author-box-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.post-detail__author-box-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.post-detail__author-box-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.post-detail__author-box-label {
  font-family: var(--cp-font-en);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cp-muted);
}
.post-detail__author-box-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--cp-ink);
  text-decoration: none;
  line-height: 1.3;
}
.post-detail__author-box-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-detail__author-box-bio {
  font-size: 13px;
  font-weight: 400;
  color: var(--cp-ink-2);
  line-height: 1.85;
  margin: 0 0 8px;
}
.post-detail__author-box-social {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-detail__author-box-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--cp-font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cp-ink);
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.post-detail__author-box-social-link:hover {
  background: var(--cp-ink);
  color: #fff;
  border-color: var(--cp-ink);
}
.post-detail__author-box-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cp-ink);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.post-detail__author-box-more:hover {
  opacity: 0.7;
}

@media (max-width: 600px) {
  .post-detail__author-box {
    padding: 18px;
  }
  .post-detail__author-box-avatar {
    width: 48px;
    height: 48px;
  }
  .post-detail__author-box-name {
    font-size: 16px;
  }
  .post-detail__author-box-bio {
    font-size: 12px;
  }
}

/* ============================================================
 *  Author Archive Page (/author/{slug}/)
 * ============================================================ */

.c-cp-author-page {
  margin: var(--cp-gap-m) 0 var(--cp-gap-l);
  padding: 32px 0;
  border-top: 1px solid var(--cp-ink);
  border-bottom: 1px solid var(--cp-line);
}
.c-cp-author-page__head {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.c-cp-author-page__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cp-bg-soft);
  border: 1px solid var(--cp-line);
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .c-cp-author-page__avatar {
    width: 120px;
    height: 120px;
  }
}
.c-cp-author-page__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.c-cp-author-page__label {
  font-family: var(--cp-font-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cp-muted);
  margin: 0 0 8px;
}
.c-cp-author-page__name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--cp-ink);
}
.c-cp-author-page__bio {
  font-size: 14px;
  line-height: 1.95;
  color: var(--cp-ink-2);
  margin: 0 0 14px;
  max-width: 64ch;
}
.c-cp-author-page__articles {
  margin: var(--cp-gap-l) 0;
}
.c-cp-author-page__articles-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cp-ink);
}

/* ============================================================
 *  スポイラー / 広告開示 / 免責
 *  色付き背景 → 全廃。1px罫線 + 黒1色のアイコン。
 * ============================================================ */

.c-cp-spoiler {
  margin: var(--cp-gap-s) 0;
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  background: var(--cp-bg-card);
  overflow: hidden;
}
.c-cp-spoiler__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-ink);
  background: transparent;
}
.c-cp-spoiler__summary::-webkit-details-marker,
.c-cp-spoiler__summary::marker {
  display: none;
  content: "";
}
.c-cp-spoiler__title {
  flex: 1 1 auto;
}
.c-cp-spoiler__chevron {
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--cp-ink);
  border-bottom: 1px solid var(--cp-ink);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.c-cp-spoiler[open] .c-cp-spoiler__chevron {
  transform: rotate(-135deg);
}
.c-cp-spoiler__body {
  padding: 14px 16px 18px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--cp-ink-2);
  border-top: 1px solid var(--cp-line-soft);
}
/* （旧バリエーション削除済み — ショートコード [cp_spoiler] のみで使用） */

/* ============================================================
 *  About Us — 同様にトーンダウン
 * ============================================================ */

.c-cp-about {
  margin: var(--cp-gap-l) 0 var(--cp-gap-m);
  padding: 32px 0;
  background: transparent;
  border-top: 1px solid var(--cp-ink);
  border-bottom: 1px solid var(--cp-line);
  border-radius: 0;
}
.c-cp-about__title {
  margin: 0 0 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cp-ink);
  padding: 0;
  border: 0;
}
.c-cp-about__body p {
  margin: 0 0 1em;
  font-size: 14px;
  line-height: 1.95;
  color: var(--cp-ink-2);
  width: 100%;
  max-width: none;
}
.c-cp-about__body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
 *  関連記事 — カードを廃し、グリッドの罫線で構造化
 * ============================================================ */

.c-related-articles {
  margin: var(--cp-gap-xl) 0 var(--cp-gap-l);
}
.c-related-articles__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cp-ink);
}
.c-related-articles__label {
  font-family: var(--cp-font-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cp-muted);
  font-weight: 600;
  margin: 0;
}
.c-related-articles__title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--cp-ink);
}
.c-related-articles__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .c-related-articles__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
.c-related-articles__item {
  border-bottom: 1px solid var(--cp-line);
}
@media (min-width: 768px) {
  .c-related-articles__item {
    border-bottom: 0;
  }
}

/* SP (default): 左サムネ + 右に日付/タイトル の横並び */
.c-related-articles__link {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  padding: 16px 0;
  text-decoration: none;
  color: var(--cp-ink);
  transition: opacity 0.15s;
}
.c-related-articles__link:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.78;
}
.c-related-articles__thumb-wrap {
  width: 110px;
  min-width: 110px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cp-bg-soft);
  border-radius: 4px;
  flex: 0 0 auto;
}
.c-related-articles__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.04);
}
.c-related-articles__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* PC: 3カラムカード型に戻す（サムネ上、本文下） */
@media (min-width: 768px) {
  .c-related-articles__link {
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }
  .c-related-articles__thumb-wrap {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
}
.c-related-articles__meta {
  display: flex;
  gap: 12px;
  font-family: var(--cp-font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-muted);
  margin-bottom: 8px;
}
.c-related-articles__date {
  font-weight: 500;
}
.c-related-articles__tag {
  display: inline-block;
  background: #e6edee;
  color: #333;
  padding: 3px 12px;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  text-align: center;
}
.c-related-articles__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  color: var(--cp-ink);
}

/* ============================================================
 *  SP専用 改行 (br) ヘルパー
 *  使い方: <br class="c-br-sp">
 * ============================================================ */
.c-br-sp {
  display: none;
}
@media (max-width: 767px) {
  .c-br-sp {
    display: inline;
  }
}

/* ============================================================
 *  X フォローセクション — 黒地は維持しつつ装飾を削る
 * ============================================================ */

.c-cp-follow-x {
  margin: var(--cp-gap-l) 0;
  padding: 36px 24px;
  background: var(--cp-ink);
  color: #fff;
  border-radius: 4px;
  text-align: center;
}
.c-cp-follow-x__inner {
  max-width: 560px;
  margin: 0 auto;
}
.c-cp-follow-x__logo {
  display: block;
  margin: 0 auto 18px;
  width: auto;
  height: 38px;
  max-width: 220px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .c-cp-follow-x__logo {
    height: 32px;
    margin-bottom: 14px;
  }
}
.c-cp-follow-x__label {
  font-family: var(--cp-font-en);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 10px;
}
.c-cp-follow-x__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}
.c-cp-follow-x__lead {
  font-size: 13px;
  color: #b4b4b4;
  margin: 0 0 22px;
  line-height: 1.85;
}
.c-cp-follow-x__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 14px 26px;
  background: #fff;
  color: var(--cp-ink);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid #fff;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.c-cp-follow-x__btn:hover {
  opacity: 0.8;
}
.c-cp-follow-x__btn-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}
.c-cp-follow-x__btn-text {
  flex: 0 1 auto;
  min-width: 0;
}
.c-cp-follow-x__btn-arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--cp-ink);
  border-right: 1.5px solid var(--cp-ink);
  transform: rotate(45deg);
  flex: 0 0 auto;
  margin-left: 4px;
}
@media (max-width: 600px) {
  .c-cp-follow-x__btn {
    padding: 12px 18px;
    font-size: 13px;
    gap: 8px;
  }
  .c-cp-follow-x__btn-icon {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
 *  CTAボタン（ショートコード [cp_cta_button]）
 *  影/グラデを廃し、塗りボタンの輪郭を明確に。
 * ============================================================ */

/* ============================================================
 *  記事内 CTA ボタン — テーマ既存の .c-btn02 を活かす
 *  [cp_cta_button] / [cp_cta_area] の出力構造は <a class="c-btn02"> なので
 *  style.css 側の .c-btn02 系スタイルがそのまま適用される。
 *  ここでは：
 *    - 記事内・CTA エリア内の .c-btn02 にキラキラと黒文字を補強
 *    - 黄色塗りで白文字になっていた問題を解消
 * ============================================================ */

/* 記事内に置かれる .c-btn02 の見た目を整える
   - .blog-article-block a の青文字・下線を打ち消す
   - 文字・アイコンを常に白
   - hover は style.css 側の反転スタイル（白背景＋色文字）に任せる
   - キラキラは無し */
.blog-article-block .c-btn02,
.article-content .c-btn02,
.c-cp-cta-area .c-btn02 {
  text-decoration: none !important;
  color: #fff;
}
.blog-article-block .c-btn02:hover,
.article-content .c-btn02:hover,
.c-cp-cta-area .c-btn02:hover {
  text-decoration: none !important;
}

/* ホバー時の色反転を明示（私の color:#fff が同スペシフィシティで勝ってしまうため） */
@media (min-width: 768px) {
  .blog-article-block .c-btn02:hover,
  .article-content .c-btn02:hover,
  .c-cp-cta-area .c-btn02:hover {
    background: #fff;
    color: #0298AF;
  }
  .blog-article-block .c-btn02.yellow:hover,
  .article-content .c-btn02.yellow:hover,
  .c-cp-cta-area .c-btn02.yellow:hover {
    background: #fff;
    color: #FCC831;
  }
  .blog-article-block .c-btn02.cp-dark:hover,
  .article-content .c-btn02.cp-dark:hover,
  .c-cp-cta-area .c-btn02.cp-dark:hover {
    background: #fff;
    color: #111;
  }
}
/* アイコン（sprite SVG）も白で塗る。hover で text 色と一緒に反転 */
.blog-article-block .c-btn02 .c-svg,
.article-content .c-btn02 .c-svg,
.c-cp-cta-area .c-btn02 .c-svg {
  fill: currentColor;
  color: inherit;
}
.blog-article-block .c-btn02 .c-svg use,
.article-content .c-btn02 .c-svg use,
.c-cp-cta-area .c-btn02 .c-svg use {
  fill: currentColor;
}

/* CTA エリア内のボタンはエリア幅にフィット */
.c-cp-cta-area .c-btn02 {
  min-width: min(400px, 100%);
}

/* .c-btn02.cp-dark — モノクロ副CTA（黒塗り）バリエーション */
.c-btn02.cp-dark {
  background: #111;
  border-color: #111;
  color: #fff;
}
@media (min-width: 768px) {
  .c-btn02.cp-dark:hover {
    background: #fff;
    color: #111;
  }
}

/* ============================================================
 *  記事内テーブルの SP 横スクロール対応
 *  対象: [su_table] / Gutenberg <table>（wp-block-table）/ 素の<table>
 * ============================================================ */

/* SU [su_table responsive="yes"] と Gutenberg のテーブルブロック */
.article-content .su-table,
.blog-article-block .su-table,
.article-content .wp-block-table,
.blog-article-block .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 素の <table>（wrapper無し）には display:block + overflow を直接掛ける */
.article-content > table,
.blog-article-block .article-content > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* SP では中身のテーブルに最低幅を持たせて、必要なら横スクロール発生 */
@media (max-width: 767px) {
  .article-content .su-table table,
  .blog-article-block .su-table table,
  .article-content .wp-block-table table,
  .blog-article-block .wp-block-table table,
  .article-content > table,
  .blog-article-block .article-content > table {
    min-width: 520px;
    width: 100%;
  }
}

/* スクロールバーをモバイルでも見えやすく */
.article-content .su-table::-webkit-scrollbar,
.article-content .wp-block-table::-webkit-scrollbar,
.blog-article-block .su-table::-webkit-scrollbar,
.blog-article-block .wp-block-table::-webkit-scrollbar {
  height: 6px;
}
.article-content .su-table::-webkit-scrollbar-thumb,
.article-content .wp-block-table::-webkit-scrollbar-thumb,
.blog-article-block .su-table::-webkit-scrollbar-thumb,
.blog-article-block .wp-block-table::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 999px;
}

/* ============================================================
 *  Shortcodes Ultimate の [su_button] を記事内でブランド統一
 *  プラグインがインラインスタイルを噛ますので !important で上書き。
 *  色は黄色 (.c-btn02.yellow) と同じ、サイズも揃える。
 * ============================================================ */
.blog-article-block .su-button,
.article-content .su-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: min(400px, 100%) !important;
  min-height: 60px !important;
  height: auto !important;
  padding: 16px 36px !important;
  margin: 8px 0 !important;
  background: #FCC831 !important;
  border: 2px solid #FCC831 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background .2s, color .2s, border-color .2s !important;
}
/* SU が内側に挿入する子要素のスタイルも中和 */
.blog-article-block .su-button > *,
.article-content .su-button > * {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ホバー反転（PC） */
@media (min-width: 768px) {
  .blog-article-block .su-button:hover,
  .article-content .su-button:hover {
    background: #fff !important;
    border-color: #FCC831 !important;
    color: #FCC831 !important;
  }
}
/* SP */
@media (max-width: 600px) {
  .blog-article-block .su-button,
  .article-content .su-button {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 360px !important;
    font-size: 15px !important;
    padding: 14px 24px !important;
    min-height: 56px !important;
  }
}

/* ============================================================
 *  CTA エリア — 構造的に「Call to Action」感を出す
 *  - 上端に太い黒バー（セクション区切り感）
 *  - 左寄せ＋小見出し（kicker）で編集記事のCTA風
 *  - 黄色ボタンを唯一の色アクセントに
 * ============================================================ */

.c-cp-cta-area {
  position: relative;
  margin: var(--cp-gap-xl) 0 var(--cp-gap-l);
  padding: 36px 36px 32px;
  background: #fafafa;
  border: 1px solid var(--cp-line);
  border-top: 0;
  border-radius: 0;
  text-align: left;
  overflow: hidden;
}
/* 上端の黒バー（厚み 3px） */
.c-cp-cta-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cp-ink);
}

.c-cp-cta-area__title {
  margin: 0 0 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--cp-ink);
}
@media (min-width: 768px) {
  .c-cp-cta-area__title { font-size: 24px; }
}

.c-cp-cta-area__subtitle {
  font-size: 13px;
  color: var(--cp-muted);
  margin: 0 0 18px;
  line-height: 1.7;
}
.c-cp-cta-area__body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--cp-ink-2);
  margin-bottom: 22px;
  max-width: 60ch;
}
.c-cp-cta-area__body p:last-child { margin-bottom: 0; }

.c-cp-cta-area__action {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* (旧 .c-cp-cta-btn 用クラスは削除済み — .c-btn02 を使用) */

@media (max-width: 600px) {
  .c-cp-cta-area { padding: 28px 22px 26px; margin: var(--cp-gap-l) 0; }
  .c-cp-cta-area__title { font-size: 19px; }
  .c-cp-cta-area__body { font-size: 13px; }
  .c-cp-cta-area .c-btn02 { min-width: 0; width: 100%; }
}

/* ============================================================
 *  FAQ — 色丸を廃し、数字・記号で
 * ============================================================ */

.c-cp-faq {
  margin: var(--cp-gap-m) 0;
  counter-reset: cp-faq-counter;
}
.c-cp-faq__item {
  border: 0;
  border-top: 1px solid var(--cp-line);
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  counter-increment: cp-faq-counter;
}
.c-cp-faq__item:last-child {
  border-bottom: 1px solid var(--cp-line);
}
.c-cp-faq__q {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-right: 8px;
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--cp-ink);
}
.c-cp-faq__q::-webkit-details-marker,
.c-cp-faq__q::marker {
  display: none;
  content: "";
}
.c-cp-faq__q-mark,
.c-cp-faq__a-mark {
  flex: 0 0 auto;
  display: inline-block;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--cp-muted);
  border-radius: 0;
  font-family: var(--cp-font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.c-cp-faq__q-mark::after {
  content: counter(cp-faq-counter, decimal-leading-zero) " ";
}
.c-cp-faq__a-mark {
  color: var(--cp-ink);
  margin-top: 4px;
}
.c-cp-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.c-cp-faq__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--cp-ink);
  border-bottom: 1px solid var(--cp-ink);
  transform: rotate(45deg);
  transition: transform 0.2s;
  align-self: center;
}
.c-cp-faq__item[open] .c-cp-faq__chevron {
  transform: rotate(-135deg);
}
.c-cp-faq__a {
  display: flex;
  gap: 14px;
  padding: 0 0 22px 0;
  background: transparent;
  border-top: 0;
}
.c-cp-faq__a-text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.85;
  color: var(--cp-ink-2);
}
.c-cp-faq__a-text p {
  margin: 0 0 0.7em;
}
.c-cp-faq__a-text p:last-child {
  margin: 0;
}

/* ============================================================
 *  メリデメ — 緑/赤を廃し、見出しの記号のみで対比
 * ============================================================ */

/* メリデメ — カード型 / Unicode アイコンで対比（モノクロ） */
.c-cp-pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: var(--cp-gap-m) 0;
  border: 0;
}
@media (min-width: 768px) {
  .c-cp-pros-cons {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

.c-cp-pros-cons__col {
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  padding: 22px 22px 18px;
  background: #fff;
}
.c-cp-pros-cons__col--pros { background: #fafafa; }
.c-cp-pros-cons__col--cons { background: #f5f5f5; }

/* 見出し */
.c-cp-pros-cons__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--cp-line);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 700;
  color: var(--cp-ink);
  background: transparent;
}
/* 見出しアイコン（円形） */
.c-cp-pros-cons__col--pros .c-cp-pros-cons__head::before,
.c-cp-pros-cons__col--cons .c-cp-pros-cons__head::before {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
}
.c-cp-pros-cons__col--pros .c-cp-pros-cons__head::before {
  content: "✓";
  background: var(--cp-ink);
  color: #fff;
  font-size: 14px;
}
.c-cp-pros-cons__col--cons .c-cp-pros-cons__head::before {
  content: "✕";
  background: #fff;
  color: var(--cp-ink);
  border: 1.5px solid var(--cp-ink);
  font-size: 12px;
}

/* ボディ — 既存 .blog-article-block ul li の青グラデ丸を打ち消す */
.c-cp-pros-cons__body { padding: 0; background: transparent; }
.blog-article-block .c-cp-pros-cons__body ul,
.article-content .c-cp-pros-cons__body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blog-article-block .c-cp-pros-cons__body ul > li,
.article-content .c-cp-pros-cons__body ul > li {
  position: relative;
  padding: 9px 0 9px 30px !important;
  font-size: 14px;
  line-height: 1.75;
  color: var(--cp-ink);
  background: none;
  margin: 0;
  border-top: 1px solid var(--cp-line-soft);
}
.blog-article-block .c-cp-pros-cons__body ul > li:first-child,
.article-content .c-cp-pros-cons__body ul > li:first-child {
  border-top: 0;
}
/* 既存テーマの :before / :after を完全に上書き */
.blog-article-block .c-cp-pros-cons__body ul > li::before,
.blog-article-block .c-cp-pros-cons__body ul > li::after,
.article-content .c-cp-pros-cons__body ul > li::before,
.article-content .c-cp-pros-cons__body ul > li::after {
  background: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
/* メリット: ✓ */
.blog-article-block .c-cp-pros-cons__col--pros .c-cp-pros-cons__body li::before,
.article-content .c-cp-pros-cons__col--pros .c-cp-pros-cons__body li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--cp-ink) !important;
  background: none !important;
}
.blog-article-block .c-cp-pros-cons__col--pros .c-cp-pros-cons__body li::after,
.article-content .c-cp-pros-cons__col--pros .c-cp-pros-cons__body li::after {
  content: none !important;
}
/* デメリット: ✕ */
.blog-article-block .c-cp-pros-cons__col--cons .c-cp-pros-cons__body li::before,
.article-content .c-cp-pros-cons__col--cons .c-cp-pros-cons__body li::before {
  content: "✕" !important;
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--cp-muted) !important;
  background: none !important;
}
.blog-article-block .c-cp-pros-cons__col--cons .c-cp-pros-cons__body li::after,
.article-content .c-cp-pros-cons__col--cons .c-cp-pros-cons__body li::after {
  content: none !important;
}

@media (max-width: 600px) {
  .c-cp-pros-cons__col { padding: 18px 18px 14px; }
  .c-cp-pros-cons__head { font-size: 15px; }
}

/* ============================================================
 *  背景色ブロック — 1色だけ off-white に限定
 * ============================================================ */

.c-cp-bg {
  margin: var(--cp-gap-m) 0;
  border-radius: 4px;
  background: var(--cp-bg-soft);
}
.c-cp-bg--light,
.c-cp-bg--brand,
.c-cp-bg--gray,
.c-cp-bg--yellow {
  background: var(--cp-bg-soft);
}
.c-cp-bg--pad-md {
  padding: 22px 24px;
}
.c-cp-bg--pad-lg {
  padding: 32px 36px;
}
.c-cp-bg--pad-sm {
  padding: 14px 18px;
}

/* ============================================================
 *  本文側エリア微調整
 * ============================================================ */
.c-cp-ad-disclosure {
  margin-top: var(--cp-gap-s);
}
.c-cp-disclaimer {
  margin-top: var(--cp-gap-s);
}

/* ============================================================
 *  パンくず（.c-crumb）— izakaya 流の wrap 挙動
 *  「ブログ」などの中項目を改行させず、最後の長いタイトルだけ
 *  3点リーダーで省略する。
 * ============================================================ */

.c-mv-section .c-crumb {
  flex-wrap: wrap;
  row-gap: 4px;
  align-items: center;
}
.c-mv-section .c-crumb li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* item 内では絶対改行させない */
  min-width: 0; /* flex item の縮小許可 */
  max-width: 100%;
}
/* 最後の項目（カレント=記事タイトル）— 残りスペースを最大限使い、
   どうしても収まらない場合だけ三点リーダーで省略する */
.c-mv-section .c-crumb li:last-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 *  WordPress 標準 align クラスの修正
 *  style.css:2777 の .blog-article-block img { margin: 20px 0 0 0; }
 *  が aligncenter の auto margin を上書きしてしまうのを是正。
 * ============================================================ */

/* Gutenberg：figure.aligncenter を shrink-wrap して中央寄せ */
.blog-article-block figure.aligncenter,
.blog-article-block .wp-block-image.aligncenter,
.blog-article-block .wp-caption.aligncenter,
.article-content figure.aligncenter,
.article-content .wp-block-image.aligncenter,
.article-content .wp-caption.aligncenter {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* aligncenter内の img: style.css の margin-left/right:0 を打ち消す */
.blog-article-block .aligncenter img,
.article-content .aligncenter img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* キャプションがある場合 */
.blog-article-block figure.aligncenter > figcaption,
.blog-article-block .wp-block-image.aligncenter > figcaption,
.article-content figure.aligncenter > figcaption,
.article-content .wp-block-image.aligncenter > figcaption {
  display: block;
  text-align: center;
  caption-side: bottom;
}

/* Classic editor / 直に img.aligncenter が付いているケース */
.blog-article-block img.aligncenter,
.article-content img.aligncenter,
.blog-article-block p > img.aligncenter,
.article-content p > img.aligncenter {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* p.aligncenter（古いエディタの段落中央寄せ） */
.blog-article-block p.aligncenter,
.article-content p.aligncenter {
  text-align: center;
}

/* ============================================================
 *  Phase 3 で追加した UI 部品の画像マージンを打ち消す
 *  style.css の .blog-article-block img { margin: 20px 0 0 0 } が
 *  byline アバターなどにも適用されてしまうため
 * ============================================================ */

.blog-article-block .post-detail__byline-avatar,
.blog-article-block .post-detail__author-box-avatar,
.blog-article-block .c-cp-follow-x img,
.blog-article-block .c-related-articles__thumb,
.blog-article-block .c-cp-byline__avatar {
  margin: 0 !important;
}
.blog-article-block img.alignleft,
.article-content img.alignleft,
.blog-article-block .alignleft,
.article-content .alignleft {
  float: left;
  margin: 0 24px 16px 0 !important;
}
.blog-article-block img.alignright,
.article-content img.alignright,
.blog-article-block .alignright,
.article-content .alignright {
  float: right;
  margin: 0 0 16px 24px !important;
}
.blog-article-block img.alignnone,
.article-content img.alignnone {
  display: block;
  margin: 20px 0 0;
}

/* キャプション付き画像 (figure.wp-caption / figure.aligncenter) */
.blog-article-block figure.aligncenter,
.article-content figure.aligncenter,
.blog-article-block .wp-caption.aligncenter,
.article-content .wp-caption.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.blog-article-block figure.aligncenter img,
.article-content figure.aligncenter img,
.blog-article-block .wp-caption.aligncenter img,
.article-content .wp-caption.aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

/* Gutenberg ワイド・フルワイド */
.blog-article-block .alignwide,
.article-content .alignwide {
  max-width: none;
  width: calc(100% + 8vw);
  margin-left: -4vw;
  margin-right: -4vw;
}
.blog-article-block .alignfull,
.article-content .alignfull {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 回り込み解除 */
.blog-article-block::after,
.article-content::after {
  content: "";
  display: block;
  clear: both;
}

/* 記事タイトル直下に置かれる広告開示 / 著者ブロックの間隔調整 */
.article-block > .c-cp-ad-disclosure + .c-cp-profile {
  margin-top: var(--cp-gap-s);
}
.article-block > .c-cp-profile + .c-cp-disclaimer {
  margin-top: var(--cp-gap-s);
}
.article-block > .c-cp-disclaimer + .c-cp-trust {
  margin-top: var(--cp-gap-l);
}

/* ============================================================
 *  既存 c-cta-block の CTA ボタン（F）— 控えめに引き締め
 *  シャインアニメは残すがコントラスト弱め、グラデは廃止
 * ============================================================ */

.c-cta .btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* .c-cta 内のボタンは style.css の .c-btn02 / .c-btn02.yellow をそのまま使用。
   home の more-inn-box 内ボタンと同一の見た目・ホバー挙動になる。
   ここでは .btn-wrap のレイアウトだけ調整。 */

/* ============================================================
 *  reCAPTCHA v3 保護表示テキスト（各フォーム末尾に自動挿入）
 * ============================================================ */
.c-recaptcha-notice {
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #8a8a8a;
  text-align: center;
}
.c-recaptcha-notice a {
  color: #6b6b6b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-recaptcha-notice a:hover {
  color: #111;
}

/* reCAPTCHA v3 バッジ非表示
 * （代わりに上記 .c-recaptcha-notice の帰属テキストを表示することで
 *   Google の利用規約要件を満たす。display:none ではなく visibility:hidden
 *   を使い、reCAPTCHA スクリプトの動作に影響を与えない。） */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ============================================================
 *  フッター YouTube アイコン（PNG）
 *  X は SVG スプライトだが YouTube は PNG のため個別調整
 * ============================================================ */
.c-footer .footer-sns-list .footer-sns-link .icon-youtube {
  width: 22px;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 767px) {
  .c-footer .footer-sns-list .footer-sns-link .icon-youtube {
    width: 18px;
  }
}

/* ============================================================
 *  トップページ YouTube 埋め込みセクション（お知らせの下）
 * ============================================================ */
.youtube-section {
  padding: 40px 0;
}
.youtube-section .youtube-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.youtube-section .youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .youtube-section {
    padding: 24px 0;
  }
  .youtube-section .youtube-embed {
    border-radius: 8px;
  }
}

/* フッター SNS アイコン間の余白 */
.c-footer .left-area .footer-sns-list {
  gap: min(14px, 0.9210526316vw);
}
@media (max-width: 767px) {
  .c-footer .left-area .footer-sns-list {
    gap: 12px;
  }
}

/* フッター SNS アイコン：X は既定サイズのまま、YouTube のみ拡大
   （YouTube PNG は画像の外周に余白があり小さく見えるため大きめに） */
.c-footer .left-area .footer-sns-list .footer-sns-link .icon-youtube {
  width: min(40px, 2.63vw);
}
@media (max-width: 767px) {
  .c-footer .left-area .footer-sns-list .footer-sns-link .icon-youtube {
    width: min(32px, 8.53vw);
  }
}