/* ============================================================
   ANZAS Column v2 — main.css(デザイン準拠版)
   出典: コラムのカンプ(hifi)
   トークン: ブルー #1298D6 × イエロー #FFC906 / Poppins + Zen Kaku Gothic New
   BP: 840px。予算: compat.css と合算 30KB 以下。
   ============================================================ */

:root {
  --acv-ink: #1F2227;
  --acv-ink-mid: #2B2E34;
  --acv-body: #3D4042;
  --acv-cap: #8A8F93;
  --acv-line: #E3E6E7;
  --acv-line-soft: #C7CDD1;
  --acv-surface: #F7F8F8;
  --acv-brand: #1298D6;
  --acv-brand-hover: #0F86BC;
  --acv-tint: #EAF5FB;
  --acv-tint-border: #BFE2F4;
  --acv-yellow: #FFC906;
  --acv-marker: rgba(255, 201, 6, .55);
  --acv-green: #06C755;
  --acv-footer: #1F2227;
  --acv-en: Poppins, "Zen Kaku Gothic New", system-ui, sans-serif;
  --acv-shadow: 0 12px 28px rgba(43, 46, 52, .10);
  --acv-shadow-lg: 0 16px 40px rgba(43, 46, 52, .10);
}

/* 円形グロー・フッターのゴーストワード(絶対配置)が右へはみ出すと、html 側に横の広がりが
   生まれ、スマートフォンで表示幅が広がる。body の overflow-x: clip はルート要素を抑えない
   ため、本体テーマ(pages.css)と同じくここで止める。clip は sticky を壊さない。 */
html { overflow-x: clip; }

body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* ---------- 共通部品 ---------- */

/* ブランド装飾: 本体サイトと同じバーストマーク(画像)。正方形なので幅=高さで扱う */
.acv-rays { display: inline-block; width: 26px; height: 26px; line-height: 0; flex-shrink: 0; }
.acv-rays img { width: 100%; height: 100%; object-fit: contain; display: block; }
.acv-rays--sm { width: 20px; height: 20px; }
.acv-rays--lg { width: 88px; height: 88px; }
/* 暗背景では白抜きにする(元画像は濃紺・黄のため、暗所で沈まないよう明度を上げる) */
.acv-rays--dark img { filter: brightness(0) invert(1); }
/* 記事本文に直接書かれた旧マークアップ(<i> 3本)は、画像を背景で当てて見た目を揃える。
   本文へテーマの絶対 URL を埋め込まずに済ませるため、DB ではなく CSS 側で吸収する */
.acv-rays > i { display: none; }
.acv-rays:not(:has(img)) { background: url(../img/burst.png) center / contain no-repeat; }

/* ピルボタン+円形矢印 */
.acv-pill { display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 8px 0 22px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; transition: background .2s ease, opacity .2s ease; }
.acv-pill span:first-child { white-space: nowrap; }
.acv-pill__arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--acv-en); font-size: 13px; flex-shrink: 0; }
.acv-pill--fill { background: var(--acv-brand); color: #fff !important; }
.acv-pill--fill:hover { background: var(--acv-brand-hover); }
.acv-pill--fill .acv-pill__arrow { background: #fff; color: var(--acv-brand); }
.acv-pill--ghost { border: 1px solid var(--acv-brand); color: var(--acv-brand) !important; }
.acv-pill--ghost:hover { background: var(--acv-tint); }
.acv-pill--ghost .acv-pill__arrow { background: var(--acv-brand); color: #fff; }
.acv-pill--line { background: var(--acv-green); color: #fff !important; }
.acv-pill--line:hover { opacity: .85; }
.acv-pill--white { background: #fff; color: var(--acv-ink) !important; }
.acv-pill--white .acv-pill__arrow { background: var(--acv-brand); color: #fff; }
.acv-pill--s { height: 40px; padding: 0 20px; font-size: 12px; gap: 0; }
.acv-pill--s .acv-pill__arrow { display: none; }

.acv-mini-arrow { width: 22px; height: 22px; border-radius: 50%; background: var(--acv-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--acv-en); font-size: 10px; flex-shrink: 0; }
.acv-mini-arrow--lg { width: 28px; height: 28px; font-size: 12px; }

/* チップ */
.acv-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none; }
.acv-chip--tint { background: var(--acv-tint); color: var(--acv-brand); }
.acv-chip--yellow { background: var(--acv-yellow); color: var(--acv-ink); }
.acv-chip--line { border: 1px solid var(--acv-line); color: var(--acv-ink-mid); padding: 6px 14px; height: auto; font-size: 12px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.acv-chip--line:hover { background: var(--acv-tint); border-color: var(--acv-brand); color: var(--acv-brand); }

/* セクション見出し(英語アイキャッチ+JP) */
.acv-sec { margin-top: 96px; }
.acv-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acv-sec-head__en { font-family: var(--acv-en); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--acv-yellow); }
/* セクションの H2。見出しの既定 margin / font-size を打ち消し、見た目は変えない。 */
.acv-sec-head__jp { margin: 0; font-size: 18px; line-height: 1.6; font-weight: 900; color: var(--acv-ink); }
.acv-sec-head__note { font-size: 11px; font-weight: 700; color: var(--acv-cap); }

/* パンくず */
.acv-crumb { font-size: 11px; font-weight: 700; }
/* nav ではなく ol を flex コンテナにする(ol を挟むと nav の flex item が 1 個になるため) */
.acv-crumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.acv-crumb__li { display: inline-flex; align-items: center; gap: 8px; }
.acv-crumb__item { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--acv-surface); color: var(--acv-cap); text-decoration: none; transition: background .2s ease, color .2s ease; }
a.acv-crumb__item:hover { background: var(--acv-tint); color: var(--acv-brand); }
.acv-crumb__item.is-current { background: var(--acv-tint); color: var(--acv-brand); }
.acv-crumb__sep { font-family: var(--acv-en); font-size: 11px; color: var(--acv-line-soft); }

/* 青黄ディバイダー */
.acv-divider { position: relative; height: 2px; background: var(--acv-line); margin-top: 28px; }
.acv-divider span:first-child { position: absolute; left: 0; top: 0; width: 72px; height: 2px; background: var(--acv-brand); }
.acv-divider span:last-child { position: absolute; left: 76px; top: 0; width: 16px; height: 2px; background: var(--acv-yellow); }

/* 眉(レイ+英語+注記) */
.acv-eyebrow { display: flex; align-items: flex-end; gap: 12px; margin-top: 40px; }
.acv-eyebrow__en { font-family: var(--acv-en); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--acv-brand); }
.acv-eyebrow__note { font-size: 11px; font-weight: 700; color: var(--acv-cap); }

/* ---------- ヘッダー ---------- */
/* ヘッダーはテンプレートパーツ(header.wp-block-template-part・高さ 69px)の中にあり、
   .acv-header に sticky を付けても親の中でしか止まれない。親ごと追従させる。
   ログイン中は管理バー(32px・782px 以下は 46px・600px 以下はスクロールで消える)の下に付ける。 */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 20; }
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
/* 目次などで見出しへ飛んだとき、追従するヘッダー(69px)の下に隠れないようにする */
html { scroll-padding-top: 84px; }
.acv-header { position: relative; z-index: 10; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--acv-line); }
.acv-header__in { max-width: 1140px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.acv-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.acv-logo__img { display: block; width: 112px; height: 36px; object-fit: contain; }
.acv-logo__mark { display: flex; flex-direction: column; gap: 2px; }
.acv-logo__anzas { font-family: var(--acv-en); font-weight: 700; font-size: 20px; letter-spacing: .06em; color: var(--acv-brand); line-height: 1; }
.acv-logo__anzas--xl { font-size: 28px; color: #fff; }
.acv-logo__column { font-family: var(--acv-en); font-weight: 600; font-size: 7px; letter-spacing: .22em; color: var(--acv-cap); }
.acv-logo__column--blue { font-size: 8px; letter-spacing: .26em; color: var(--acv-brand); }
.acv-logo__jp { font-size: 12px; font-weight: 700; color: var(--acv-ink-mid); }
.acv-nav { display: flex; align-items: center; }
/* role="list" は list-style:none を当てた ul をリストとして読ませ続けるため(WebKit 対策)。 */
.acv-nav__list { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.acv-nav a { font-size: 13px; font-weight: 700; color: var(--acv-ink-mid); white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.acv-nav a:hover { color: var(--acv-brand); }
.acv-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.acv-header__actions .acv-pill--ghost { height: 36px; padding: 0 16px; }

/* ---------- モバイルのメニュー ----------
   840px 以下は .acv-nav が畳まれるので、同じ項目をここから開けるようにする。
   これが無いと、スマホではフッターまでスクロールしないとカテゴリへ移動できない。 */
.acv-burger { display: none; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--acv-line); background: #fff; cursor: pointer; padding: 0; flex-shrink: 0; }
.acv-burger__bars { display: flex; flex-direction: column; gap: 4px; }
.acv-burger__bars i { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--acv-ink); }
.acv-burger__bars i:nth-child(2) { background: var(--acv-brand); }
.acv-burger__close { display: none; font-size: 15px; color: var(--acv-ink); line-height: 1; }
.acv-burger.is-open .acv-burger__bars { display: none; }
.acv-burger.is-open .acv-burger__close { display: block; }

.acv-menu { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; border-top: 0 solid var(--acv-line); transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, visibility 0s linear .35s; }
.acv-menu.is-open { max-height: 560px; opacity: 1; visibility: visible; pointer-events: auto; border-top-width: 1px; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, visibility 0s; }
.acv-menu__panel { max-width: 1140px; margin: 0 auto; padding: 8px 24px 16px; }
.acv-menu__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.acv-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--acv-line); font-size: 14px; font-weight: 700; color: var(--acv-ink-mid) !important; text-decoration: none; }
/* li でくるむと a はどれも :last-of-type になるため、li の位置で最後だけ線を消す。 */
.acv-menu__list li:last-child .acv-menu__link { border-bottom: 0; }
.acv-menu__link span { font-family: var(--acv-en); font-size: 12px; color: var(--acv-brand); }
.acv-menu__ctas { display: flex; gap: 10px; padding-top: 14px; }
.acv-menu__cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; box-sizing: border-box; }
/* 透明ボーダーは幅合わせ。flex-basis:0 は border 分にクランプされるため、
   ghost だけ 1px 太くなって左右の CTA が揃わない。 */
.acv-menu__cta--fill { border: 1px solid transparent; background: var(--acv-brand); color: #fff !important; }
.acv-menu__cta--fill:hover { background: var(--acv-brand-hover); }
.acv-menu__cta--ghost { border: 1px solid var(--acv-brand); color: var(--acv-brand) !important; }
.acv-menu__cta--ghost:hover { background: var(--acv-tint); }

/* ---------- レイアウト(左右 padding はヘッダー .acv-header__in の 24px と一致させる) ---------- */
.acv-shell { max-width: 1140px; margin: 0 auto; padding: 72px 24px 128px; }
.acv-shell--grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
.acv-article { position: relative; z-index: 0; min-width: 0; }

/* ---------- 記事ヘッダー ---------- */
.acv-art-head { position: relative; }
.acv-art-head__ghost { position: absolute; z-index: -1; top: -20px; right: -8px; font-family: var(--acv-en); font-weight: 600; font-size: 132px; line-height: 1; letter-spacing: -.02em; color: var(--acv-surface); white-space: nowrap; pointer-events: none; }
.acv-art-head__title { margin: 18px 0 0; font-size: clamp(24px, 6.4vw, 32px); font-weight: 900; line-height: 1.6; color: var(--acv-ink); }
.acv-art-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.acv-dates { display: flex; align-items: center; gap: 20px; }
.acv-date__k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--acv-cap); }
.acv-date__v { display: block; font-family: var(--acv-en); font-weight: 600; font-size: 13px; color: var(--acv-ink-mid); margin-top: 2px; }
.acv-date--brand .acv-date__k, .acv-date--brand .acv-date__v { color: var(--acv-brand); }
.acv-date__sep { width: 1px; height: 28px; background: var(--acv-line); }
.acv-supervisor { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--acv-line); border-radius: 999px; padding: 5px 18px 5px 6px; box-shadow: 0 2px 10px rgba(43, 46, 52, .06); }
.acv-supervisor__face { width: 32px; height: 32px; border-radius: 50%; background: var(--acv-tint); border: 1.5px solid var(--acv-brand); flex-shrink: 0; object-fit: cover; display: block; }
.acv-supervisor__t { display: flex; flex-direction: column; }
.acv-supervisor__en { font-family: var(--acv-en); font-weight: 700; font-size: 8px; letter-spacing: .18em; color: var(--acv-yellow); }
.acv-supervisor__jp { font-size: 12px; font-weight: 700; color: var(--acv-ink-mid); }

/* ---------- 記事本文 ---------- */
.acv-content { margin-top: 40px; }
.acv-content > p { font-size: 16.5px; line-height: 1.9; margin: 1.4em 0; }
.acv-content h2 { display: flex; align-items: center; gap: 12px; margin: 96px 0 0; font-size: clamp(20px, 5.6vw, 23px); font-weight: 900; line-height: 1.6; color: var(--acv-ink); }
.acv-content h2::before { content: ""; flex-shrink: 0; width: 5px; height: 28px; border-radius: 3px; background: var(--acv-brand); }
.acv-content h3 { margin: 48px 0 0; font-size: 18px; font-weight: 700; color: var(--acv-ink); }
.acv-content h2 + p, .acv-content h3 + p { margin-top: 24px; }
.acv-content img { max-width: 100%; height: auto; border-radius: 12px; }
.acv-content figure { margin: 48px 0 0; }
.acv-content figcaption { font-size: 12px; color: var(--acv-cap); margin-top: 8px; }
.acv-content table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 24px; }
.acv-content th { background: var(--acv-surface); border: 1px solid var(--acv-line); padding: 9px 12px; text-align: left; color: var(--acv-ink); font-weight: 700; }
.acv-content td { border: 1px solid var(--acv-line); padding: 9px 12px; }
.acv-content blockquote { margin: 48px 0 0; border-left: 3px solid var(--acv-line-soft); background: var(--acv-surface); border-radius: 0 8px 8px 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.9; font-style: normal; }
.acv-content ul:not([class]) { padding-left: 1.4em; font-size: 15px; line-height: 2.0; }

/* H2 直下の結論帯(パターン) */
.acv-tldr { background: var(--acv-tint); border-radius: 8px; padding: 16px 20px; margin: 24px 0 0; font-size: 14px; font-weight: 500; line-height: 1.85; }
.acv-tldr::before { content: "結論"; font-family: var(--acv-en); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: var(--acv-brand); margin-right: 8px; }

/* 答えの箱 */
.acv-answer { border: 2px solid var(--acv-brand); border-radius: 12px; overflow: hidden; margin: 44px 0 0; }
.acv-answer__head { display: flex; align-items: center; gap: 10px; background: var(--acv-brand); color: #fff; padding: 9px 16px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.acv-answer__head .acv-rays { width: 18px; height: 18px; }
.acv-answer__head .acv-rays img { filter: brightness(0) invert(1); }
.acv-answer__head .acv-rays:not(:has(img)) { filter: brightness(0) invert(1); }
.acv-answer__body { padding: 28px 28px 24px; }
.acv-answer__body table { margin-top: 0; }
.acv-answer__body ul { margin: 14px 0 0; padding-left: 1.4em; font-size: 14px; line-height: 2.0; }
.acv-answer__src { font-size: 11px; color: var(--acv-cap); margin-top: 12px; }

/* 目次(記事内 box) */
.acv-toc { background: var(--acv-surface); border-radius: 12px; padding: 28px 32px; margin: 44px 0 0; }
.acv-toc__head { font-family: var(--acv-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--acv-brand); }
.acv-toc__head span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--acv-cap); letter-spacing: .06em; margin-left: 6px; }
.acv-toc ol { margin: 10px 0 0; padding-left: 1.5em; font-size: 14px; line-height: 2.2; font-weight: 500; }
.acv-toc a { color: var(--acv-ink-mid); text-decoration: none; }
.acv-toc a:hover { color: var(--acv-brand); }

/* ---------- CTA ---------- */
.acv-cta-early { border-top: 1px dashed var(--acv-line); border-bottom: 1px dashed var(--acv-line); padding: 18px 0; margin: 40px 0 0; font-size: 14px; }
.acv-cta-early a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.acv-cta-early__micro { font-size: 11px; color: var(--acv-cap); }

.acv-cta--mid { border: 1.5px solid var(--acv-tint-border); background: var(--acv-tint); border-radius: 12px; padding: 26px 28px; margin: 48px 0 0; }
.acv-cta--mid .acv-cta__ttl { font-size: 13px; font-weight: 700; color: var(--acv-brand-hover); margin: 0; }
.acv-cta--mid .acv-cta__txt { font-size: 14.5px; line-height: 1.9; margin: 6px 0 0; color: var(--acv-body); }
.acv-cta--mid .acv-cta__act { margin: 14px 0 0; }
.acv-cta--mid .acv-pill { height: 44px; }
.acv-cta__micro { font-size: 11px; color: var(--acv-cap); margin: 8px 0 0; }

.acv-cta--end { position: relative; border: 2px solid var(--acv-brand); border-radius: 16px; padding: 36px 32px 30px; margin: 40px 0 0; text-align: center; overflow: hidden; background: #fff; }
.acv-cta--end::before { content: "Go"; position: absolute; top: -8px; right: 8px; font-family: var(--acv-en); font-weight: 600; font-size: 88px; line-height: 1; color: #F4F8FA; pointer-events: none; }
.acv-cta--end > * { position: relative; }
.acv-cta--end .acv-cta__ttl { font-size: 20px; font-weight: 900; color: var(--acv-ink); margin: 0; }
.acv-cta--end .acv-cta__txt { font-size: 13px; color: var(--acv-cap); margin: 6px 0 0; }
.acv-cta--end .acv-cta__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 0; }
.acv-cta--end .acv-cta__micro { margin-top: 14px; }
.acv-cta--end .acv-pill--ghost, .acv-cta--end .acv-pill--line { padding: 0 22px; }
.acv-cta--end .acv-pill--ghost .acv-pill__arrow, .acv-cta--end .acv-pill--line .acv-pill__arrow { display: none; }

/* ---------- FAQ ---------- */
.acv-faq { margin: 32px 0 0; }
.acv-faq__head { font-family: var(--acv-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; color: var(--acv-brand); }
.acv-faq__head span { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--acv-cap); letter-spacing: .06em; margin-left: 6px; }
.acv-faq details, .acv-content details { border: 1px solid var(--acv-line); border-radius: 10px; margin-top: 10px; padding: 0 16px; }
.acv-faq summary, .acv-content summary { font-size: 14px; font-weight: 700; color: var(--acv-ink); padding: 12px 0; cursor: pointer; }
.acv-faq details > div, .acv-content details > div { font-size: 14px; line-height: 1.9; color: var(--acv-body); padding: 0 0 14px; }

/* ---------- 監修者カード・次に読む ---------- */
.acv-author { display: flex; gap: 16px; align-items: flex-start; background: var(--acv-surface); border-radius: 12px; padding: 20px 22px; margin: 32px 0 0; font-size: 13px; line-height: 1.9; }
.acv-author__face { width: 56px; height: 56px; border-radius: 50%; background: var(--acv-tint); border: 2px solid var(--acv-brand); flex-shrink: 0; }
.acv-author b { color: var(--acv-ink); }
.acv-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
.acv-next__card { border: 1px solid var(--acv-line); border-radius: 12px; padding: 16px 18px; color: var(--acv-body); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.acv-next__card:hover { transform: translateY(-4px); box-shadow: var(--acv-shadow); color: var(--acv-body); }
.acv-next__en { display: block; font-family: var(--acv-en); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--acv-yellow); }
.acv-next__en span { color: var(--acv-cap); font-family: "Zen Kaku Gothic New", sans-serif; letter-spacing: .04em; margin-left: 4px; }
.acv-next__ttl { display: block; font-size: 14px; line-height: 1.7; color: var(--acv-ink); margin-top: 6px; font-weight: 700; }

/* ---------- 吹き出し(loos/balloon 互換・デザイン準拠) ---------- */
.acv-balloon { display: flex; gap: 14px; align-items: flex-start; margin: 48px 0 0; }
.acv-balloon__icon { flex-shrink: 0; width: 56px; text-align: center; }
.acv-balloon__img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--acv-brand); background: var(--acv-tint); display: inline-block; }
.acv-balloon__img--empty { width: 48px; height: 48px; }
.acv-balloon__name { display: block; font-size: 10px; color: var(--acv-cap); margin-top: 4px; line-height: 1.4; }
.acv-balloon__body { position: relative; background: var(--acv-tint); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; line-height: 1.9; min-width: 0; }
.acv-balloon__body::before { content: ""; position: absolute; left: -8px; top: 18px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--acv-tint); }
.acv-balloon__body > p:first-child { margin-top: 0; }
.acv-balloon__body > p:last-child { margin-bottom: 0; }
.acv-balloon.is-right { flex-direction: row-reverse; }
.acv-balloon.is-right .acv-balloon__body::before { left: auto; right: -8px; border-right: 0; border-left: 8px solid var(--acv-tint); }

/* ---------- サイドバー ---------- */
.acv-side { min-width: 0; }
.acv-about { border: 1px solid var(--acv-line); border-radius: 16px; overflow: hidden; }
.acv-about__photo { aspect-ratio: 16 / 9; background: var(--acv-tint); display: flex; align-items: center; justify-content: center; }
.acv-about__body { padding: 22px 24px 24px; }
.acv-about__brand { display: flex; align-items: baseline; gap: 10px; }
.acv-about__anzas { font-family: var(--acv-en); font-weight: 700; font-size: 18px; letter-spacing: .06em; color: var(--acv-brand); }
.acv-about__jp { font-size: 11px; font-weight: 700; color: var(--acv-cap); }
.acv-about__desc { font-size: 13px; line-height: 1.9; margin: 10px 0 0; }
.acv-about__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--acv-line); margin-top: 16px; padding-top: 14px; }
.acv-about__stats b { display: block; font-family: var(--acv-en); font-weight: 600; font-size: 24px; line-height: 1; color: var(--acv-brand); }
.acv-about__stats span { display: block; font-size: 10px; font-weight: 700; color: var(--acv-cap); margin-top: 4px; }
.acv-about .acv-pill { height: 40px; font-size: 12px; margin-top: 18px; padding: 0 6px 0 18px; }
.acv-about .acv-pill__arrow { width: 28px; height: 28px; font-size: 11px; }

.acv-swidget { border: 1px solid var(--acv-line); border-radius: 16px; padding: 22px 24px; margin-top: 20px; background: #fff; }
.acv-swidget__head { margin: 0; font-size: 13px; font-weight: 700; color: var(--acv-ink); }
.acv-swidget__en { display: inline-block; font-family: var(--acv-en); font-weight: 700; font-size: 10px; letter-spacing: .16em; color: var(--acv-yellow); margin-right: 8px; }
.acv-pop { display: flex; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.acv-pop__item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--acv-line); color: var(--acv-ink-mid); text-decoration: none; transition: color .2s ease; }
.acv-pop li:last-child .acv-pop__item { border-bottom: 0; padding-bottom: 4px; }
.acv-pop__item:hover { color: var(--acv-brand); }
.acv-pop__num { flex-shrink: 0; font-family: var(--acv-en); font-weight: 600; font-size: 28px; line-height: 1; color: var(--acv-tint-border); }
.acv-pop__ttl { font-size: 13px; font-weight: 700; line-height: 1.7; }
.acv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.acv-side__sticky { position: sticky; top: 92px; margin-top: 20px; }
.acv-stoc { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; }
.acv-stoc__item { color: var(--acv-cap); text-decoration: none; }
.acv-stoc__item:hover { color: var(--acv-brand); }
.acv-stoc__item.is-active { color: var(--acv-brand); font-weight: 700; border-left: 2px solid var(--acv-brand); padding-left: 8px; }
.acv-scta { position: relative; background: var(--acv-brand); border-radius: 16px; padding: 26px 24px; margin-top: 20px; overflow: hidden; }
.acv-scta__ghost { position: absolute; top: -10px; right: 4px; font-family: var(--acv-en); font-weight: 600; font-size: 80px; line-height: 1; color: rgba(255, 255, 255, .12); pointer-events: none; }
.acv-scta > * { position: relative; }
.acv-scta__en { font-family: var(--acv-en); font-weight: 700; font-size: 10px; letter-spacing: .18em; color: var(--acv-yellow); }
.acv-scta__ttl { font-size: 16px; font-weight: 900; line-height: 1.65; color: #fff; margin-top: 8px; }
.acv-scta .acv-pill { height: 44px; font-size: 12px; margin-top: 16px; padding: 0 6px 0 18px; }
.acv-scta__micro { font-size: 11px; color: rgba(255, 255, 255, .8); margin-top: 10px; }

/* ---------- コラムトップ ---------- */
.acv-hero { position: relative; z-index: 0; padding: 64px 56px 56px; }
.acv-hero__glow { position: absolute; border-radius: 50%; pointer-events: none; }
.acv-hero__glow--blue { top: -140px; right: -100px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(18, 152, 214, .16) 0%, rgba(18, 152, 214, 0) 70%); }
.acv-hero__glow--yellow { bottom: -160px; right: 200px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255, 201, 6, .20) 0%, rgba(255, 201, 6, 0) 70%); }
.acv-hero__glow--left { right: auto; left: -180px; top: 40px; bottom: auto; }
.acv-hero__rays { position: absolute; top: 56px; right: 64px; pointer-events: none; }
.acv-hero__kicker { display: flex; align-items: center; gap: 14px; }
.acv-hero__kicker span:last-child { font-family: var(--acv-en); font-weight: 600; font-size: 11px; letter-spacing: .3em; color: var(--acv-brand-hover); }
.acv-hero__line { width: 40px; height: 1px; background: var(--acv-brand); }
.acv-hero__type { margin-top: 32px; font-family: var(--acv-en); font-weight: 700; font-size: clamp(60px, 10vw, 118px); line-height: .98; letter-spacing: -.045em; color: var(--acv-ink); }
.acv-hero__type span { color: var(--acv-brand); }
.acv-hero__title { margin: 36px 0 0; font-size: clamp(15px, 2vw, 17px); font-weight: 700; line-height: 1.9; color: var(--acv-body); }

.acv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.acv-grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.acv-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
/* li を挟んでもカード幅が縮まないようにする(li を flex コンテナにして a を伸ばす) */
.acv-grid2 > li { display: flex; }
.acv-grid2 > li > .acv-spoke { flex: 1; }

.acv-card { display: flex; flex-direction: column; border: 1px solid var(--acv-line); border-radius: 16px; overflow: hidden; color: var(--acv-body); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.acv-card:hover { transform: translateY(-6px); box-shadow: var(--acv-shadow-lg); color: var(--acv-body); }
.acv-card__thumb { aspect-ratio: 16 / 9; width: 100%; display: block; background: var(--acv-tint); overflow: hidden; }
.acv-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-card__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.acv-card__body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.acv-card__meta { display: flex; align-items: center; gap: 8px; }
.acv-card__date { font-family: var(--acv-en); font-size: 11px; font-weight: 600; color: var(--acv-cap); }
.acv-card__ttl { font-size: 16px; font-weight: 900; line-height: 1.7; color: var(--acv-ink); }
.acv-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--acv-brand); }

.acv-tile { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--acv-line); border-radius: 16px; padding: 22px 20px; color: var(--acv-body); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.acv-tile:hover { transform: translateY(-4px); box-shadow: var(--acv-shadow); background: var(--acv-tint); color: var(--acv-body); }
.acv-tile__en { font-family: var(--acv-en); font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--acv-yellow); }
.acv-tile__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acv-tile__row b { font-size: 15px; color: var(--acv-ink); }
.acv-tile__desc { font-size: 11px; line-height: 1.7; color: var(--acv-cap); }

.acv-rows { display: flex; flex-direction: column; margin-top: 12px; }
.acv-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 4px; border-bottom: 1px solid var(--acv-line); color: var(--acv-ink-mid); text-decoration: none; transition: color .2s ease; }
.acv-row:hover { color: var(--acv-brand); }
.acv-row__date { font-family: var(--acv-en); font-weight: 600; font-size: 12px; color: var(--acv-cap); width: 88px; }
.acv-row__ttl { font-size: 14px; font-weight: 700; line-height: 1.7; }

/* ---------- カテゴリ ---------- */
.acv-cat-head { position: relative; z-index: 0; }
.acv-cat-head__type { margin-top: 24px; font-family: var(--acv-en); font-weight: 700; font-size: clamp(48px, 7.6vw, 88px); line-height: 1; letter-spacing: -.04em; color: var(--acv-ink); }
.acv-cat-head__type span { color: var(--acv-brand); }
.acv-cat-head__title { margin: 22px 0 0; font-size: clamp(22px, 3.4vw, 28px); font-weight: 900; line-height: 1.6; color: var(--acv-ink); }
.acv-cat-head__desc { margin: 16px 0 0; font-size: 14.5px; line-height: 2.0; max-width: 640px; }
.acv-cat-head__desc a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.acv-cat-head .acv-divider { margin-top: 40px; }

.acv-hub { display: grid; grid-template-columns: 5fr 7fr; margin-top: 24px; border: 1px solid var(--acv-line); border-radius: 16px; overflow: hidden; color: var(--acv-body); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.acv-hub:hover { transform: translateY(-6px); box-shadow: var(--acv-shadow-lg); color: var(--acv-body); }
.acv-hub__thumb { min-width: 0; min-height: 240px; background: var(--acv-tint); display: flex; align-items: center; justify-content: center; }
.acv-hub__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acv-hub__body { padding: 32px 36px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.acv-hub__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acv-hub__ttl { font-size: 21px; font-weight: 900; line-height: 1.7; color: var(--acv-ink); }
.acv-hub__desc { font-size: 13px; line-height: 1.9; color: var(--acv-cap); }

.acv-spoke { display: flex; align-items: center; gap: 18px; border: 1px solid var(--acv-line); border-radius: 16px; padding: 24px 26px; color: var(--acv-body); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.acv-spoke:hover { transform: translateY(-4px); box-shadow: var(--acv-shadow); background: var(--acv-tint); color: var(--acv-body); }
.acv-spoke__num { flex-shrink: 0; font-family: var(--acv-en); font-weight: 600; font-size: 32px; line-height: 1; color: var(--acv-tint-border); }
.acv-spoke__ttl { flex: 1; font-size: 15px; font-weight: 900; line-height: 1.7; color: var(--acv-ink); }

.acv-catcta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1.5px solid var(--acv-tint-border); background: var(--acv-tint); border-radius: 16px; padding: 26px 30px; margin-top: 72px; }
.acv-catcta__txt { font-size: 14.5px; line-height: 1.9; }
.acv-catcta__txt b { color: var(--acv-ink); }
.acv-catcta__txt span { display: block; font-size: 11px; color: var(--acv-cap); margin-top: 4px; }
.acv-catcta .acv-pill { flex-shrink: 0; }

/* ---------- 監修者ページ ---------- */
.acv-prof { position: relative; z-index: 0; display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.acv-prof__photo { position: relative; min-width: 0; }
.acv-prof__accent { position: absolute; left: -20px; bottom: -20px; width: 60%; height: 45%; background: var(--acv-tint); border-radius: 16px; }
.acv-prof__photo > .acv-rays { position: absolute; top: -16px; right: -12px; z-index: 2; }
.acv-prof__ph { position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 20px; background: var(--acv-tint); display: flex; align-items: center; justify-content: center; }
/* 本体の講師ページ(.av2-kim__photo img)と同じ入れ方 */
.acv-prof__img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.acv-prof__type { margin-top: 24px; font-family: var(--acv-en); font-weight: 700; font-size: clamp(44px, 6.4vw, 72px); line-height: 1; letter-spacing: -.04em; color: var(--acv-ink); }
.acv-prof__type span { color: var(--acv-brand); }
.acv-prof__name { margin: 24px 0 0; font-size: 20px; font-weight: 900; line-height: 1.6; color: var(--acv-ink); }
.acv-prof__name span { font-size: 13px; font-weight: 700; color: var(--acv-cap); margin-left: 6px; }
.acv-prof__desc { margin: 16px 0 0; font-size: 14.5px; line-height: 2.0; max-width: 560px; }
.acv-prof__stats { display: flex; gap: 40px; border-top: 2px solid var(--acv-brand); margin-top: 28px; padding-top: 18px; }
.acv-prof__stats b { display: block; font-family: var(--acv-en); font-weight: 600; font-size: 40px; line-height: 1; color: var(--acv-brand); }
.acv-prof__stats span { display: block; font-size: 12px; font-weight: 700; color: var(--acv-ink-mid); margin-top: 8px; }
.acv-prof__act { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.acv-prof__act .acv-pill { height: 44px; }
.acv-prof__note { font-size: 11px; color: var(--acv-cap); }

/* ---------- フッター ---------- */
.acv-footer { position: relative; z-index: 0; background: var(--acv-footer); color: rgba(255, 255, 255, .75); overflow: hidden; margin-top: 0; }
.acv-footer__ghost { position: absolute; z-index: -1; left: 50%; bottom: -48px; transform: translateX(-50%); font-family: var(--acv-en); font-weight: 700; font-size: 220px; line-height: 1; letter-spacing: .04em; color: rgba(255, 255, 255, .035); white-space: nowrap; pointer-events: none; }
.acv-footer__in { max-width: 1140px; margin: 0 auto; padding: 72px 40px 0; }
.acv-footer__grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 56px; align-items: start; }
/* ロゴはコラムのトップへのリンク(ヘッダーのロゴと同じ行き先)。押せる範囲をロゴの幅に留める */
.acv-footer__brand { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; width: fit-content; text-decoration: none; }
.acv-footer__jp { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.acv-footer__desc { margin: 18px 0 0; font-size: 13px; line-height: 2.0; color: rgba(255, 255, 255, .7); }
.acv-footer__addr { margin-top: 20px; font-size: 12px; line-height: 2.0; color: rgba(255, 255, 255, .5); }
.acv-footer__badges { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.acv-footer__badges li { border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 6px 14px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .75); }
.acv-footer__head { font-family: var(--acv-en); font-weight: 700; font-size: 11px; letter-spacing: .18em; color: var(--acv-yellow); }
.acv-footer__links { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.acv-footer__links a { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .75); text-decoration: none; transition: color .2s ease; }
.acv-footer__links a:hover { color: #fff; }
.acv-footer .acv-pill--fill { margin-top: 28px; }
.acv-footer__micro { font-size: 11px; color: rgba(255, 255, 255, .45); margin-top: 10px; }
.acv-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 64px; padding: 28px 0 36px; }
.acv-footer__legal { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-family: var(--acv-en); font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .45); }
.acv-footer__legal a { font-size: 11px; color: rgba(255, 255, 255, .45); text-decoration: none; }
.acv-footer__legal a:hover { color: #fff; }
.acv-footer__tag { display: flex; align-items: center; gap: 16px; }
.acv-footer__slogan { font-family: var(--acv-en); font-weight: 600; font-size: 10px; letter-spacing: .28em; color: rgba(255, 255, 255, .45); }
.acv-totop { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font-family: var(--acv-en); font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.acv-totop:hover { background: var(--acv-brand); border-color: var(--acv-brand); }

/* ---------- モバイル追従バー ---------- */
.acv-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--acv-line); box-shadow: 0 -6px 20px rgba(31, 34, 39, .10); padding: 8px 12px; gap: 8px; align-items: center; }
/* 2 つのボタンは同じ幅(flex-basis 0 で、文字の長さに左右されない)。高さはタップしやすい最小限 */
.acv-bar__line, .acv-bar__main { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.acv-bar__line { background: var(--acv-green); }
.acv-bar__main { background: var(--acv-brand); }
.acv-bar__main:hover { background: var(--acv-brand-hover); }
.acv-bar__close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; color: var(--acv-cap); font-size: 16px; cursor: pointer; }

/* ---------- 840px ---------- */
@media (max-width: 840px) {
  .acv-shell { padding: 40px 24px 128px; }
  .acv-shell--grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .acv-shell--grid .acv-side { margin-top: 72px; }
  .acv-hide-mobile { display: none !important; }
  .acv-side__sticky { position: static; }
  .acv-cta--end .acv-cta__act { flex-direction: column; }
  .acv-cta--end .acv-cta__act .acv-pill { width: 100%; justify-content: center; box-sizing: border-box; }
  .acv-grid3, .acv-grid2, .acv-next { grid-template-columns: minmax(0, 1fr); }
  .acv-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acv-hub { grid-template-columns: minmax(0, 1fr); }
  .acv-hub__thumb { min-height: 180px; }
  .acv-footer__grid { grid-template-columns: 1fr; gap: 44px; }
  .acv-bar.is-visible { display: flex; }
  .acv-hero { padding: 28px 22px; }
  .acv-prof { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .acv-prof__photo { max-width: 440px; } /* 本体の講師ページ(.av2-kim__visual)と同じ上限 */
  .acv-art-head__ghost { font-size: 84px; }
  .acv-supervisor { margin-left: 0; }
}

/* ロゴ + カテゴリ 6 本 + 公式サイト + CTA は 1073px 必要で、1080px を切ると 1 行に
   収まらない(実測: 900px 幅で右に 149px はみ出し、body の overflow-x:clip で
   CTA の右側が見えないまま切れていた)。ここでバーガーへ畳む。 */
@media (max-width: 1080px) {
  .acv-nav { display: none !important; }
  .acv-burger { display: inline-flex; }
}

/* ヘッダーは 375px 幅でロゴ + CTA が 1 行に収まらず、ページごと横スクロールしていた
   (実測: バーガー追加前でも右に 43px はみ出していた)。
   狭い幅ではロゴを画像だけにし、CTA とバーガーを詰めて収める。 */
@media (max-width: 560px) {
  .acv-header__in { padding: 0 16px; gap: 10px; }
  .acv-logo { gap: 8px; }
  .acv-logo__jp { display: none; }
  .acv-header__actions { gap: 8px; }
  .acv-header__actions .acv-pill--s { height: 36px; padding: 0 14px; font-size: 11px; }
  .acv-burger { width: 36px; height: 36px; }
  .acv-menu__panel { padding: 8px 16px 16px; }
}