@charset "UTF-8";
/* ==========================================================================
   記事ページ + tcdce互換
   is_singular('post') のときだけ読み込まれる（functions.php）

   色・サイズは style.css の :root トークンが正本。ここで生の値を足さないこと。
   冒頭のルール（CLAUDE.md「全作業に共通する必須ルール」）:
   - オレンジ地の文字は必ず ink
   - 補助的な文字でも 12px を下限
   - opacity で文字を薄くしない
   ========================================================================== */

/* ==========================================================================
   記事レイアウト
   ========================================================================== */
.akb-article{padding:0 0 60px;}  /* 上端はコンパクト紺ヒーローが担うので padding-top は0 */
.akb-article__inner{max-width:912px;}  /* タイトルが2行に収まる幅（旧760の約1.2倍・2026-07-25 運営者指示）。広すぎる本文可読性には要注意。 */

/* コンパクト紺ヒーロー（記事・qa単体の見出し。ランディング系 .page-hero と同じ紺地に統一・2026-07-25 案B）。
   全幅の紺バンドに、カテゴリ（モノ体eyebrow）・タイトル（白）・日付/読了を載せる。本文は下の白地。 */
.akb-article-hero{background:var(--navy);color:#fff;padding:42px 0 34px;margin-bottom:34px;}
.akb-article-hero__eyebrow{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--navy-eyebrow);text-decoration:none;margin-bottom:14px;}
.akb-article-hero__eyebrow:hover{color:#fff;}
/* 改行は既定の貪欲折り返し（1行目を幅いっぱいまで詰めて残りを次行へ）。
   text-wrap:balance（2行の長さを揃える）は 2026-07-25 運営者指示で解除。 */
.akb-article-hero__title{font-size:clamp(23px,3.2vw,34px);font-weight:900;line-height:1.5;letter-spacing:.01em;color:#fff;margin:0 0 16px;}
.akb-article-hero__meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--navy-sub);}
.akb-article-hero__meta .mono{font-family:var(--font-mono);}
.akb-article-hero__updated{opacity:.85;}
.akb-article-hero__readtime{border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:2px 10px;font-weight:600;color:#fff;}
/* CPA監修済みバッジ（案D：オレンジのチェックチップ＋フル文・全記事共通）。2026-07-25 運営者指示。 */
.akb-article-hero__reviewed{display:inline-flex;align-items:center;gap:7px;color:var(--navy-sub);font-size:12px;font-weight:600;}
.akb-article-hero__reviewed-chip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 auto;background:var(--orange);color:#fff;font-size:11px;font-weight:900;line-height:1;}
@media (max-width:760px){ .akb-article-hero{padding:32px 0 26px;margin-bottom:26px;} }

/* 旧・記事ヘッダー（.akb-article__head/__title/__meta/__readtime/__updated）と
   旧「この記事を書いた人」ミニ（.akb-author-mini*）のCSSは 2026-07-25 に撤去。
   現行はコンパクト紺ヒーロー .akb-article-hero に置換済みで、対応する
   akb_author_mini() 関数も削除した。 */

/* ==========================================================================
   目次
   <details>/<summary> なので開閉にJSが不要。キーボード操作も読み上げも
   ブラウザ標準の実装に任せられる（現行はJSで自作していた）。
   ========================================================================== */
/* 外枠はサイト共通のカードと同じ言語（紙面色・2.5pxのinkの枠・ハードシャドウ・
   角丸16px）。トップの .board や .kakari と揃えてある。
   本文中に差し込まれるので上下に余白を取る。 */
.akb-toc{
  background:#F7F9FB;
  border:1px solid var(--hair);
  border-radius:0; /* 四角いボックスに統一（2026-07-25 運営者指示） */
  box-shadow:none;
  padding:16px 22px;
  margin:2.4em 0;
}
/* 畳んでいるときは見出しと［表示する］だけの1行になるので、余白を詰めて
   ボタンらしい佇まいにする。開くと中身の分だけ下に伸びる。 */
.akb-toc:not([open]){padding:10px 22px;}
/* NOTE: 目次は本文（.akb-article-body）の中に差し込まれる。
   本文の a や li のスタイルに負けないよう、セレクタは .akb-article-body で
   スコープして詳細度を上げてある。プレフィクスを外すと本文側の
   「オレンジ文字＋下線＋黄色ホバー」に上書きされる。 */
.akb-toc__head{
  font-size:14px;font-weight:900;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:10px;
  min-height:44px;                     /* タップ領域44px以上 */
}
.akb-toc__head::-webkit-details-marker{display:none;}
.akb-toc__head::before{
  content:"▶";font-size:12px;color:var(--orange-deep);
  transition:transform .15s ease;flex-shrink:0;
}
.akb-toc[open] .akb-toc__head::before{transform:rotate(90deg);}
.akb-toc__head:focus-visible{outline:3px solid var(--orange-deep);outline-offset:3px;}
.akb-toc__title{flex:1;}

/* 「表示する / 非表示にする」の切り替え。
   <details> の開閉状態だけで文字が変わるのでJSは不要。
   スクリーンリーダーには <summary> が展開状態を自前で伝えるため、
   この文字列は aria-hidden にして二重読み上げを避けている（single-parts.php）。 */
.akb-toc__toggle{
  flex-shrink:0;
  font-size:12px;font-weight:700;
  color:var(--orange-deep);
  white-space:nowrap;
}
.akb-toc__toggle::after{content:"［表示する］";}
.akb-toc[open] .akb-toc__toggle::after{content:"［非表示にする］";}
.akb-toc__head:hover .akb-toc__toggle{text-decoration:underline;}

.akb-article-body .akb-toc__list{
  list-style:none;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--hair);
}
.akb-article-body .akb-toc__item{margin:0 0 2px;padding-left:0;}
.akb-article-body .akb-toc__item::before{content:none;}  /* 本文のリスト装飾を打ち消す */
.akb-article-body .akb-toc__item > a{
  display:block;
  text-decoration:none;
  color:var(--ink);
  background:none;
  font-size:13.5px;line-height:1.7;
  padding:7px 6px;border-radius:6px;
  min-height:36px;
}
.akb-article-body .akb-toc__item > a:hover{
  background:var(--cream);
  color:var(--orange-deep);
  text-decoration:none;
}
.akb-article-body .akb-toc__item--h2 > a{font-weight:700;}
.akb-article-body .akb-toc__item--h3{padding-left:18px;}
.akb-article-body .akb-toc__item--h3 > a{font-size:13px;color:var(--ink-60);}
.akb-article-body .akb-toc__item--h3 > a::before{content:"− ";color:var(--ink-30);}

/* ==========================================================================
   本文タイポグラフィ
   ========================================================================== */
.akb-article-body{font-size:16px;line-height:2.0;}
.akb-article-body > p,
.akb-article-body p{margin:0 0 1.6em;}
.akb-article-body strong{font-weight:700;}

.akb-article-body h2{
  font-size:clamp(20px,3vw,25px);font-weight:900;line-height:1.6;
  margin:2.4em 0 1em;padding:6px 0 8px 16px;
  color:var(--navy);border-left:5px solid var(--orange);
  scroll-margin-top:calc(var(--header-h) + 16px); /* sticky headerに隠れないように */
}
.akb-article-body h3{
  font-size:clamp(17px,2.4vw,20px);font-weight:900;line-height:1.55;color:var(--navy);
  margin:2em 0 .9em;padding:0 0 8px 14px;
  border-left:5px solid var(--orange);
  border-bottom:1px solid var(--hair);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.akb-article-body h4{
  font-size:16px;font-weight:900;margin:1.8em 0 .8em;
  scroll-margin-top:calc(var(--header-h) + 16px);
}

.akb-article-body a{
  color:var(--orange-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
.akb-article-body a:hover{color:var(--orange);text-decoration-thickness:2px;}

.akb-article-body ul,
.akb-article-body ol{margin:0 0 1.6em 1.4em;}
.akb-article-body li{margin:0 0 .6em;line-height:1.9;}
.akb-article-body ul li::marker{color:var(--orange);}
.akb-article-body ol li::marker{color:var(--orange-deep);font-weight:700;}

.akb-article-body img{height:auto;border-radius:8px;}
.akb-article-body figure{margin:0 0 1.8em;}
.akb-article-body figcaption,
.akb-article-body .wp-caption-text{
  font-size:12px;color:var(--ink-45);margin-top:8px;line-height:1.7;
}
.akb-article-body .wp-caption{max-width:100%;}

/* ---- 画像・キャプションの配置（aligncenter / alignleft / alignright / alignnone）----
   WordPressが旧エディタの本文に付ける標準クラス。これまでテーマ側に指定が無く、
   tcd-classic-editor のCSSが肩代わりしていた。しかもそのCSSはテーマ側で
   dequeue しているため、実際には「どこも面倒を見ていない」状態だった。
   実測: /article114/ の <div class="wp-caption aligncenter" style="width:704px">
   が本文幅712pxの中で左余白0px・右余白8px＝左寄せになっていた。
   本文で aligncenter が39回、[caption] が56回使われているので影響範囲は広い。
   ブロックエディタ用の .wp-block-* 系はコアCSSが面倒を見るので、
   ここでは旧エディタ由来の素の img / div だけを対象にする。 */
.akb-article-body .aligncenter{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.akb-article-body .alignleft{float:left;margin:0 24px 16px 0;}
.akb-article-body .alignright{float:right;margin:0 0 16px 24px;}
.akb-article-body .alignnone{display:block;margin-left:0;margin-right:auto;}
/* 回り込みの解除。float した画像の後に見出しが食い込むのを防ぐ */
.akb-article-body h2,.akb-article-body h3,.akb-article-body h4{clear:both;}
/* スマホでは回り込みをやめる（本文幅が狭く、文字が数文字ずつになるため） */
@media (max-width:639px){
  .akb-article-body .alignleft,
  .akb-article-body .alignright{float:none;display:block;margin:0 auto 16px;}
}

.akb-article-body blockquote{
  margin:0 0 1.8em;padding:14px 20px;
  background:var(--callout);border:1px solid var(--callout-line);
  border-left:4px solid var(--orange);border-radius:8px;
}
.akb-article-body blockquote p:last-child{margin-bottom:0;}

.akb-article-body hr{
  border:none;border-top:1px solid var(--hair);margin:2.4em 0;
}

/* 表。横に長い表はページ全体を横スクロールさせず、表の中だけでスクロールさせる。
   .s_table は tcd-classic-editor が the_content で付けるラッパ。
   プラグイン停止時はこのラッパが消えるので、その際は素の table にも
   同等の処理を入れること（_akb-docs/tcdce-inventory.md 参照）。 */
.akb-article-body .s_table{
  overflow-x:auto;
  margin:0 0 1.8em;
  border:1px solid var(--hair);border-radius:8px;
  background:#fff;
}
.akb-article-body table{
  width:100%;border-collapse:collapse;font-size:14px;
}
.akb-article-body .s_table table{margin:0;}

/* 記事本文の表は、DB側の本文で次のdivに包まれている（2026-07時点で88箇所すべて
   インラインstyleが完全一致）:
     <div style="overflow-x:auto; margin:32px 0; border:1px solid var(--ink);
                 border-radius:8px; overflow:hidden">
   その内側の .s_table にもテーマが2pxの枠と下マージン(1.8em)を与えているため、
     1. 枠が1pxと2pxで二重に描かれる
     2. 親が overflow:hidden なので .s_table の下マージンが外へ抜けられず、
        枠の内側に約29pxの空白が残る（表の下に余計な線と余白として見える）
   の2つが起きていた。本文はDBにあり本番へ移行しないため、修正はテーマ側で行う。

   包んでいる側の枠だけを消し、サイトの体裁である .s_table の2px枠を残す。
   overflow:hidden も visible に戻す（横スクロールは .s_table 側が担うが、
   hidden のままだと将来はみ出す要素を黙って切ってしまうため）。
   マージン(32px 0)は表の前後の間隔として使えるので残す。

   セレクタを div[style] ではなく div[style*="border:"] に絞っているのは誤爆を防ぐため。
   同じ .s_table を包むdivでも、
     ・article89 は border-top で意図的に区切り線を引いている
       （border: の一括指定ではないので、この属性セレクタには当たらない）
     ・注釈の無い15箇所は style="overflow-x:auto; margin:32px 0" で枠を持たない
       （overflow-x:auto を visible に潰さないよう、対象から外す）
   があり、div[style] だと両方を巻き込んで壊してしまう。
   なお border-radius: は「border-」+「radius:」なので "border:" には一致しない。 */
.akb-article-body div[style*="border:"]:has(> .s_table){
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
/* 上のdivの内側では .s_table の下マージンが空白として残るだけなので消す。
   :last-child にしているのは、7箇所だけ表の下に「※…」の注釈 <p> が同居しており、
   そこでは表と注釈の間隔としてマージンが必要なため（その場合は :last-child が
   外れてマージンが残る）。 */
.akb-article-body div[style*="border:"]:has(> .s_table) > .s_table:last-child{
  margin-bottom:0;
}
.akb-article-body th,
.akb-article-body td{
  border:1px solid var(--rule-dash);padding:10px 12px;text-align:left;line-height:1.7;
}
.akb-article-body th{background:var(--cream);font-weight:700;}

/* ==========================================================================
   図解（seo-autopilot-diagram）

   中身はAI生成パイプラインが出すインラインstyle付きのHTML。配色は
   inc/diagram-restyle.php が表示時にトークンへ差し替えている（記事は書き換えない）。
   ここでは外枠と、はみ出し対策だけを持つ。
   ========================================================================== */
.akb-article-body .seo-autopilot-diagram{
  margin:2.2em 0;
  /* 図解は表を含むものが多い。ページ全体を横に押し広げず、図の中だけで
     スクロールさせる（CLAUDE.md 6章「横スクロール禁止」）。 */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
/* 中の枠は figure 側ではなく内側の div が持っているため、そこに影を付ける。
   :not(.akb-fig) = 旧記事（インラインstyleの図解）だけを対象にする。
   新しいクラス方式の図解（.akb-fig）は自前でスタイルを持つので除外する。 */
.akb-article-body .seo-autopilot-diagram > div:not(.akb-fig){
  /* 背景を紙面色（ほぼ白）にする。
     元HTMLのコンテナは背景を指定しておらず透明だったため、ページの
     クリーム色がそのまま透けて本文と見分けが付かなかった。
     白地にすることで図解が「別の面」として立ち、視認性も上がる。
     内側の行が持つ薄いクリームの帯は、この白地の上で初めて縞として機能する。
     ※ インラインで背景を持つ図解（濃色ヘッダの1件）はそちらが優先されるので
       この指定に上書きされない。 */
  background:#fff;
  border:1px solid var(--hair);
  box-shadow:none;
  /* インラインの margin:32px 0 を打ち消す。figure側で余白を管理する。 */
  margin:0 !important;
  /* 狭い画面で潰れないよう最低幅を確保（超えた分は figure が横スクロール） */
  min-width:min(560px, 100%);
}
.akb-article-body .seo-autopilot-diagram figcaption{margin-top:10px;}

/* 図解の中の表は、図解自身のインライン指定に任せて本文用の表スタイルを持ち込まない。
   tcd-classic-editor は the_content で**全ての** <table> を <div class="s_table"> で
   包むため、図解の中の表にも本文用の .s_table スタイル（2pxの枠・角丸・下マージン）が
   当たり、図解の枠の内側にもう1枚枠と余白ができていた（43個・40記事）。
   セルは962個すべてがインラインで枠を持つので、枠は図解側に任せてよい。 */
.akb-article-body .seo-autopilot-diagram .s_table{
  border:none;
  border-radius:0;
  background:transparent;
  margin:0;
  overflow:visible;   /* 横スクロールは figure 側が持つ。二重にしない */
}
.akb-article-body .seo-autopilot-diagram table{margin:0;}
/* th の cream 背景も持ち込まない（594セルがインライン背景を持たないため、
   本文用の指定が図解の配色を乱す）。インラインを持つセルはそちらが勝つ。 */
.akb-article-body .seo-autopilot-diagram th{background:none;}

/* ==========================================================================
   tcdce互換：ボックス
   全111記事に残るTCDクイックタグ由来のHTML。記事は書き換えず、
   同じクラス名を新デザイントーンで再装飾する（CLAUDE.md 5章）。
   用途ラベルは _akb-docs/tcdce-inventory.md より。
   ========================================================================== */
.akb-article-body .tcdce-box{
  border:1px solid var(--hair);
  border-radius:10px;
  padding:1.3em 1.5em;
  margin:2em 0;
  background:#F7F9FB;
  font-size:15px;
  line-height:1.9;
}
.akb-article-body .tcdce-box > :last-child{margin-bottom:0;}
.akb-article-body .tcdce-box p:last-child{margin-bottom:0;}
.akb-article-body .tcdce-box ul,
.akb-article-body .tcdce-box ol{margin-bottom:0;}

/* box-757「この記事でわかること」80箇所・記事冒頭の看板。
   この部の署名要素なので、唯一ハードシャドウ付きのフル装飾にする。 */
.akb-article-body .box-757{
  background:#F4F7FC;
  border:1px solid var(--callout-line);
  box-shadow:none;
  border-radius:0; /* 四角いボックスに統一（2026-07-25 運営者指示） */
  font-size:16px;
  font-weight:700;
  padding:1.5em 1.6em;
}
.akb-article-body .box-757 > *:first-child{
  font-size:17px;font-weight:900;
}

/* box-368「灰色・参考記事リンク用」213箇所・最多。
   本文中に何度も出るので、主張しすぎない控えめな装飾にする。 */
.akb-article-body .box-368{
  background:#F7F9FB;
  border:1px solid var(--hair);
}

/* box-932「黄色・関連記事紹介用」104箇所 */
.akb-article-body .box-932{
  background:var(--pinkish);
  border:1px solid #E7D3CB;
  font-weight:700;
}

/* box-905「気付き・補足」7箇所 */
.akb-article-body .box-905{
  background:var(--mint);
  border:1px solid #CFE3D6;
}

/* box-966「メインカラー」5箇所。**濃い地に白文字の箱**。
 *
 * ⚠️ ここをオレンジ地にしてはいけない。
 * この箱は元が茶色地(#8b7b6b)＋白文字で、**記事本文が
 * `<span style="color:#ffffff">` で白文字をインラインで強制している**（5記事すべて）。
 * インラインはCSSより強いので、箱をオレンジにすると
 * 「オレンジ地に白文字 = 3.03:1」でAA不適合になる。実際に一度そうしていた。
 *
 * 地を ink にすることで、本文が強制する白文字が 17.58:1 になり適合する。
 * これは inc/diagram-restyle.php が #8b7b6b の背景を var(--ink) に写しているのと
 * 同じ扱いで、図解と箱で一貫する。
 */
.akb-article-body .box-966{
  background:var(--navy);
  color:var(--paper);
  border:none;
  font-weight:700;
  font-size:16px;
}
/* 箱の中のリンクも紙面色に（本文の orange-deep のままだと ink 地で 2.4:1 になる） */
.akb-article-body .box-966 a{color:var(--paper);}
.akb-article-body .box-966 a:hover{background:var(--paper);color:var(--ink);}

/* box-197「白・文字通常サイズ」3箇所 */
.akb-article-body .box-197{
  background:#fff;
  border:1px solid var(--hair);
}

/* ==========================================================================
   tcdce互換：見出し・リストのプリセット

   custom_h2〜h6 / custom_ul / custom_ol / ol-772 も tcdce のクイックタグ由来。
   h2〜h4 は上のジェネリック指定が効くので、ここでは足りない分だけ補う。
   ========================================================================== */
.akb-article-body h5,
.akb-article-body .custom_h5{
  font-size:15px;font-weight:900;margin:1.6em 0 .7em;line-height:1.7;
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.akb-article-body h6,
.akb-article-body .custom_h6{
  font-size:14px;font-weight:900;margin:1.4em 0 .6em;line-height:1.7;
  color:var(--ink-60);
  scroll-margin-top:calc(var(--header-h) + 16px);
}

/* custom_ul（356箇所）: 元プリセットはチェックマークのアイコン付き箇条書き。
   ハンコ／チェックの意匠に寄せて丸バッジにする。 */
.akb-article-body .custom_ul{
  list-style:none;margin-left:0;
}
.akb-article-body .custom_ul > li{
  position:relative;padding-left:2em;
}
.akb-article-body .custom_ul > li::before{
  content:"✓";
  position:absolute;left:0;top:.3em;
  width:1.3em;height:1.3em;border-radius:50%;
  background:var(--yellow);border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.7em;font-weight:900;line-height:1;
}

/* custom_ol（20箇所）/ ol-772（80箇所）: 元プリセットはゼロ埋め番号（01, 02...）。
   数字は IBM Plex Mono を使う（トークンの用途「日付・番号」に合致）。 */
.akb-article-body .custom_ol,
.akb-article-body .ol-772{
  list-style:none;margin-left:0;counter-reset:akb-ol;
}
.akb-article-body .custom_ol > li,
.akb-article-body .ol-772 > li{
  position:relative;padding-left:2.6em;counter-increment:akb-ol;
}
.akb-article-body .custom_ol > li::before,
.akb-article-body .ol-772 > li::before{
  content:counter(akb-ol, decimal-leading-zero) ".";
  position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-weight:700;
  color:var(--orange-deep);
}

/* ol-772 は「この記事でわかること」(.box-757) の中身。
   各項目が #section1 等へのジャンプリンクになっている。
   ここは記事の価値提示なので折りたたまない（畳むのは下の目次セクションだけ）。 */
.akb-article-body .ol-772{margin-bottom:0;}
.akb-article-body .ol-772 > li{margin-bottom:.5em;}
.akb-article-body .ol-772 a{
  text-decoration:none;
  border-bottom:2px solid var(--rule-dash);
  color:var(--ink);
  font-weight:700;
}
.akb-article-body .ol-772 a:hover{
  background:transparent;
  border-bottom-color:var(--orange);
  color:var(--orange-deep);
}
/* 「この記事でわかること」の中の区切り線は詰める */
.akb-article-body .box-757 hr{margin:.9em 0;border-top-color:var(--ink);}

/* ==========================================================================
   tcdce互換：ボタン（固定ページで使用）

   `<p class="tcdce-button-wrapper"><a class="tcdce-button button-440" href="…">…</a></p>`
   お問い合わせ・免責事項・プライバシーポリシー等の固定ページに8箇所。
   ※ Phase 0 の棚卸しは post_type='post' しか見ておらず、これを取りこぼしていた。
     固定ページでしか使われていないため記事の集計には現れなかった。

   元は #d85604 地に白文字（＝コントラスト不足）。サイトのボタン言語に合わせて
   オレンジ地＋黒文字にする（ink/orange = 5.80:1）。
   ========================================================================== */
.akb-article-body .tcdce-button-wrapper{
  text-align:center;
  margin:2em 0;
}
.akb-article-body .tcdce-button,
.akb-article-body a.tcdce-button{
  display:inline-block;
  min-width:min(270px, 100%);
  padding:15px 30px;
  background:var(--orange);
  color:var(--ink);
  border:1px solid transparent;
  border-radius:9px;
  box-shadow:none;
  font-size:16px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  transition:opacity .15s ease;
}
.akb-article-body a.tcdce-button:hover{
  background:var(--orange);
  color:var(--ink);
  opacity:.92;
}
@media (max-width:479px){
  .akb-article-body .tcdce-button,
  .akb-article-body a.tcdce-button{
    min-width:min(220px, 100%);
    padding:14px 22px;
    font-size:15px;
  }
}

/* ==========================================================================
   tcdce互換：マーカー
   ========================================================================== */
.akb-article-body .tcdce-marker{
  font-weight:600;
  background-repeat:no-repeat;
  padding:0 2px;
}

/* marker-880「薄グレー下線」1038箇所・圧倒的多数。
   これを黄色にすると本文が黄色だらけになるので、控えめな中間色を使う。 */
.akb-article-body .marker-880{
  background-image:linear-gradient(transparent 58%, var(--marker-neutral) 58%);
  background-size:100% 100%;
}

/* marker-230「強調」243箇所。ヒーローの .hl-marker と同じ黄色ハイライト。 */
.akb-article-body .marker-230{
  background-image:linear-gradient(transparent 55%, var(--yellow) 55%);
  background-size:100% 100%;
}

/* marker-985「強調・アニメ有」8箇所 */
.akb-article-body .marker-985{
  background-image:linear-gradient(transparent 55%, var(--yellow) 55%);
  background-size:0% 100%;
  animation:akb-marker-in .9s ease .2s forwards;
}
@keyframes akb-marker-in{to{background-size:100% 100%;}}

/* アニメーションを止める設定のとき、background-size:0% のまま残ると
   マーカーが消えてしまう。塗った状態で固定する。 */
@media (prefers-reduced-motion: reduce){
  .akb-article-body .marker-985{
    background-size:100% 100% !important;
    animation:none !important;
  }
}

/* ==========================================================================
   tcdce互換：吹き出し（[speech_bubble id="292"]）
   7箇所・4記事。話者は「ワンポイント解説」。
   ========================================================================== */
.akb-article-body .tcdce-sb{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:2em 0;
}
.akb-article-body .tcdce-sb-user{
  flex-shrink:0;
  width:64px;
  text-align:center;
}
.akb-article-body .tcdce-sb-user-image img{
  width:56px;height:56px;border-radius:50%;
  border:2px solid var(--hair);
  background:var(--mint);
  object-fit:cover;
  display:block;margin:0 auto;
}
.akb-article-body .tcdce-sb-user-name{
  display:block;font-size:12px;font-weight:700;line-height:1.4;margin-top:6px;
}
.akb-article-body .tcdce-sb-content{
  position:relative;flex:1;min-width:0;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:16px 20px;
  box-shadow:none;
  font-size:15px;
  line-height:1.9;
}
.akb-article-body .tcdce-sb-content p:last-child{margin-bottom:0;}
/* 吹き出しの三角。枠線付きなので2枚重ねて縁取りを作る。 */
.akb-article-body .tcdce-sb-content::before,
.akb-article-body .tcdce-sb-content::after{
  content:"";position:absolute;top:20px;
  width:0;height:0;
  border-style:solid;
}
.akb-article-body .tcdce-sb-content::before{
  left:-12px;
  border-width:8px 12px 8px 0;
  border-color:transparent var(--hair) transparent transparent;
}
.akb-article-body .tcdce-sb-content::after{
  left:-8px;
  border-width:6px 9px 6px 0;
  border-color:transparent #fff transparent transparent;
}

/* ==========================================================================
   CTA（マシュマロ導線）
   ========================================================================== */
/* .akb-cta（記事内CTA）のCSSは style.css（全ページ読み込み）へ移動した
   （2026-07 検索・404でも使うため）。article.css は記事/固定ページでしか
   読まれないので、他テンプレートでも使う部品はここに置けない。 */

/* 追従フローティングCTAのCSSは style.css（全ページ読み込み）へ移動
   （2026-07-17 全ページ化）。article.css は記事/固定ページでしか
   読まれないため、全ページに出す要素はここに置けない。 */

/* ==========================================================================
   シェア
   ========================================================================== */
.akb-share{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:44px 0 0;padding:18px 0 0;border-top:1px solid var(--hair);
}
.akb-share__label{font-size:12px;font-weight:900;letter-spacing:0.12em;color:var(--ink-45);}
.akb-share__list{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.akb-share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;
  font-size:12px;font-weight:700;text-decoration:none;color:var(--navy);
  background:#fff;border:1px solid var(--hair);border-radius:999px;
  box-shadow:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.akb-share__btn:hover{border-color:#C9D2E0;background:#F4F6F9;}

/* ==========================================================================
   関連記事
   ========================================================================== */
/* 上端の44pxは、直前の運営者カードとの間隔。以前は著者ボックス（削除済み）が
   margin-bottom:44px を持っていたが、2026-07にトップと共通の .bucho-card へ
   差し替えた際に余白の持ち主がいなくなり、見出しがカードに重なっていた
   （影を含めて-6px）。直前に何が来ても効くよう、こちら側で確保する。
   カードの影（--shadow-lg = 6px）より十分大きい値。 */
.akb-related{margin:44px 0 20px;}
.akb-related__head{
  font-size:19px;font-weight:900;margin:0 0 20px;color:var(--navy);
  padding-bottom:10px;border-bottom:1px solid var(--hair);
}
/* 記事の本文幅は760pxに絞ってあるので、トップより早く列が減る。
   style.css の .article-grid と同じく auto-fit に任せる。 */
.akb-related .article-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}

/* ページ分割 */
.akb-pager{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin:30px 0;font-size:13px;font-weight:700;
}
.akb-pager a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px;
  border:1px solid var(--hair);border-radius:8px;text-decoration:none;
  background:#fff;color:var(--navy);
}


@media (max-width:479px){
  .akb-article{padding:24px 0 40px;}
  .akb-article-body{font-size:15px;line-height:1.95;}
  .akb-article-body h2{padding:12px 14px;}

  /* 吹き出しは横並びだと本文が細くなりすぎるので縦積みにする */
  .akb-article-body .tcdce-sb{flex-direction:column;gap:10px;}
  .akb-article-body .tcdce-sb-user{
    width:auto;display:flex;align-items:center;gap:10px;text-align:left;
  }
  .akb-article-body .tcdce-sb-user-image img{width:40px;height:40px;}
  .akb-article-body .tcdce-sb-user-name{margin-top:0;}
  /* 縦積みでは三角の向きが合わないので消す */
  .akb-article-body .tcdce-sb-content::before,
  .akb-article-body .tcdce-sb-content::after{display:none;}

  .akb-cta__actions{flex-direction:column;}
  .akb-cta__actions .btn{width:100%;}
}

/* === 角丸ボックスの一律四角化（2026-07-25「全て四角く」）。本文内のボックス類のみ。 === */
.akb-article-body blockquote,.akb-article-body .s_table,.akb-article-body .tcdce-box,
.akb-article-body .tcdce-sb-content{border-radius:0;}

/* === ボタン・pill も四角化（2026-07-25）。 === */
.akb-article-hero__readtime,
.akb-article-body a.tcdce-button,.akb-share__btn,.akb-pager a{border-radius:0;}

/* === 記事末尾の著者欄「アメリカの経理部 編集部」（2026-07-25・案2 横並び） ===
   左＝サイトのワードマーク（.brand を流用）／右＝著者名＋主要導線。
   ロゴの字形・下線は style.css の .brand-name / .brand-underline / .brand-sub をそのまま使う。 */
.akb-editorial{
  max-width:912px;margin:40px auto 0;padding:28px 0 4px;
  border-top:1px solid var(--hair);
  display:flex;gap:40px;align-items:flex-start;
}
.akb-editorial__logo{flex:0 0 auto;padding-top:2px;}
.akb-editorial__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}
.akb-editorial__name{margin:0;font-size:16px;font-weight:700;color:var(--navy);letter-spacing:.01em;}
.akb-editorial__links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;}
.akb-editorial__links a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--navy);text-decoration:none;
}
/* 導線の頭は角丸なし＝四角のオレンジドット（円ではない） */
.akb-editorial__links a::before{content:"";width:7px;height:7px;background:var(--orange);flex:0 0 auto;}
.akb-editorial__links a:hover{color:var(--orange-deep);}
@media (max-width:760px){
  .akb-editorial{flex-direction:column;gap:20px;}
}