/* ==========================================================================
   Ashiya Deco Blocks － 装飾ブロックのスタイル
   フロント／編集画面 共通で読み込まれます。
   --------------------------------------------------------------------------
   デザイン方針（uktsc / The Style Dictionary 準拠のエディトリアル）
   ・影は使わない。角丸は 2px まで。塗りつぶしカードを使わない。
   ・区切りは「罫線」と「余白」で作る。色数は増やさない。
   ・ラベルは小さく字間を広く。差し色は注意喚起だけに限定する。
   --------------------------------------------------------------------------
   ・このファイルが --ab-* 変数の定義元です（typography.css は参照するだけ）。
   ・クラス名は ab- 接頭辞で固定。プラグインを削除しても記事内のHTMLは残るので、
     このファイルをテーマの追加CSSに貼れば見た目はそのまま復旧できます。
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. 変数（設定画面の値が :root にインラインで上書きされます）
   -------------------------------------------------------------------------- */
:root {
  /* レイアウト */
  --ab-content-max: 800px;
  --ab-gutter: 20px;
  --ab-radius: 2px;

  /* タイポグラフィ */
  /* SP でひとまわり小さく、PC は 17px のまま。
     390px→14.6px / 768px→16.0px / 1024px以上→17px */
  --ab-fs-body: clamp(14.5px, 0.38vw + 13.1px, 17px);
  --ab-fs-h2:   clamp(19px,   1.65vw + 12.6px, 27px);
  --ab-fs-h3:   clamp(16.5px, 0.95vw + 12.8px, 21px);
  --ab-fs-h4:   clamp(15px,   0.55vw + 12.9px, 18px);
  --ab-fs-small: 0.875em;
  --ab-lh-body: 1.95;
  --ab-lh-head: 1.55;
  --ab-ls: 0.02em;
  --ab-ls-label: 0.14em;         /* ラベル用の広い字間 */
  --ab-gap-p:  1.55em;
  --ab-gap-h2: 3.4em;
  --ab-gap-h3: 2.5em;

  /* 色：インクと紙、そして罫線。差し色は注意だけ。 */
  --ab-text:    #26282c;
  --ab-heading: #16181b;
  --ab-muted:   #8a8d93;
  --ab-line:    #e3e2de;         /* ヘアライン（わずかに暖色寄りのグレー） */
  --ab-line-strong: #c3c2bd;
  --ab-bg-soft: #f7f6f3;         /* 紙の地 */
  --ab-table-head: #f1f0ed;      /* 表のヘッダ・フッタの地色 */
  --ab-toc-bg: #f4f3f0;          /* 目次の地色 */
  --ab-accent:  #16181b;         /* 既定はインク。設定画面で変更可 */
  --ab-accent-dark: #000000;
  --ab-accent-soft: #f2f1ed;
  --ab-caution: #8c3b2e;         /* くすんだ煉瓦色。純赤は使わない */
  --ab-pro: #b32a24;             /* おすすめ・デメリットBOX：おすすめ側の見出し */
  --ab-con: #1f4e8c;             /* おすすめ・デメリットBOX：デメリット側の見出し */
  --ab-green: #7ba587;           /* 特徴BOX：グリーン */
  --ab-caution-soft: #faf6f4;
}

/* ブロック共通の外余白。エディトリアルは余白で区切る。 */
.ab-balloon.ab-balloon.ab-balloon,
.ab-pc.ab-pc.ab-pc,
.ab-fbox.ab-fbox.ab-fbox,
.ab-table.ab-table.ab-table,
.ab-box.ab-box.ab-box,
.ab-btnwrap.ab-btnwrap.ab-btnwrap,
.ab-faq.ab-faq.ab-faq,
.ab-steps.ab-steps.ab-steps {
  margin-block: 2.1em;
  font-family: inherit;
}

/* ラベル共通（小さく・字間広め・詰めない） */
.ab-box.ab-box.ab-box .ab-box__title,
.ab-steps.ab-steps.ab-steps .ab-steps__item::before,
.ab-table.ab-table.ab-table .ab-table__hint,
.ab-balloon__name.ab-balloon__name.ab-balloon__name {
  font-feature-settings: normal;
}


/* ==========================================================================
   1. 吹き出し
   丸い枠と影をやめ、角の立った紙片に薄いしっぽを付けた形にしています。
   ========================================================================== */

.ab-balloon.ab-balloon.ab-balloon {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ab-balloon--right.ab-balloon--right.ab-balloon--right { flex-direction: row-reverse; }

/* --- アバター：正方形。円はどこにでもあるので使わない --- */
.ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar {
  flex: 0 0 auto;
  width: 84px;          /* 画像より広く取り、名前が本文幅からはみ出さないように */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding-top: 3px;
}

.ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar img,
.ab-balloon__placeholder.ab-balloon__placeholder.ab-balloon__placeholder {
  width: 58px;
  height: 58px;
  min-height: 0;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0;                 /* テーマが本文中の画像に付ける余白を打ち消す。
                                これが残ると名前が写真から大きく離れます */
  border-radius: 0;
  object-fit: cover;
  background: var(--ab-bg-soft);
  border: 1px solid var(--ab-line);
  display: block;
}

/* アバター列の中身は余白を持たせない（テーマの img / figure 余白対策） */
.ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar > *,
.ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar figure {
  margin: 0;
  padding: 0;
}

.ab-balloon__name.ab-balloon__name.ab-balloon__name {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ab-muted);
  text-align: center;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* --- 吹き出し本体 --- */
.ab-balloon__body.ab-balloon__body.ab-balloon__body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  background: #fff;
}

.ab-balloon__body.ab-balloon__body.ab-balloon__body > *:first-child { margin-top: 0; }
.ab-balloon__body.ab-balloon__body.ab-balloon__body > *:last-child  { margin-bottom: 0; }
.ab-balloon__body.ab-balloon__body.ab-balloon__body p { margin-bottom: 0.7em; }

/* しっぽ：細めの二等辺三角を2枚重ねて枠線ぶんを表現 */
.ab-balloon__body.ab-balloon__body.ab-balloon__body::before,
.ab-balloon__body.ab-balloon__body.ab-balloon__body::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
}

.ab-balloon--left.ab-balloon--left.ab-balloon--left .ab-balloon__body::before {
  left: -9px;
  border-width: 6px 9px 6px 0;
  border-color: transparent var(--ab-line) transparent transparent;
}
.ab-balloon--left.ab-balloon--left.ab-balloon--left .ab-balloon__body::after {
  left: -8px;
  border-width: 6px 9px 6px 0;
  border-color: transparent #fff transparent transparent;
}

.ab-balloon--right.ab-balloon--right.ab-balloon--right .ab-balloon__body::before {
  right: -9px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--ab-line);
}
.ab-balloon--right.ab-balloon--right.ab-balloon--right .ab-balloon__body::after {
  right: -8px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/* --- 重要：色を足すのではなく、枠線をインクに変えて強くする --- */
.ab-balloon--important.ab-balloon--important.ab-balloon--important .ab-balloon__body {
  border-color: var(--ab-heading);
}
.ab-balloon--important.ab-balloon--important.ab-balloon--important.ab-balloon--left .ab-balloon__body::before { border-right-color: var(--ab-heading); }
.ab-balloon--important.ab-balloon--important.ab-balloon--important.ab-balloon--right .ab-balloon__body::before { border-left-color: var(--ab-heading); }

/* --- 控えめ：枠なし、地色だけ --- */
.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--quiet .ab-balloon__body {
  border-color: transparent;
  background: var(--ab-bg-soft);
}
.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--left .ab-balloon__body::before { border-right-color: var(--ab-bg-soft); }
.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--left .ab-balloon__body::after  { border-right-color: var(--ab-bg-soft); }
.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--right .ab-balloon__body::before { border-left-color: var(--ab-bg-soft); }
.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--quiet.ab-balloon--right .ab-balloon__body::after  { border-left-color: var(--ab-bg-soft); }



/* ==========================================================================
   2. 素の表（装飾ブロックを使っていない core/table）
   --------------------------------------------------------------------------
   ・.ab-table-plain はプラグインが表ブロックの描画時に付けるクラスです。
     標準のテーブルのほか、Flexible Table Block にも付きます。
     本文ラッパー（.ab-typo）の有無に関係なく効くようにするための保険で、
     テーマが the_content をどう扱っていても当たります。
   ・クラスを4回重ねているのは詳細度のためです。テーマ側の
       body.single .entry-content .wp-block-table th { background: #f0f0f0 }
     のような指定に負けないようにしています。
   ・本文用CSSの display:block だと表が左に縮むため、display:table に戻します。
   ========================================================================== */

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table,
.ab-typo.ab-typo.ab-typo .wp-block-table {
  margin: 1.8em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain table,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table,
.ab-typo.ab-typo.ab-typo .wp-block-table table {
  display: table;            /* ← 表が左に縮む原因を打ち消す */
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1.5px solid var(--ab-heading);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: transparent;
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(th, td),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(th, td),
.ab-typo.ab-typo.ab-typo .wp-block-table :is(th, td) {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--ab-line);
  vertical-align: top;
  text-align: left;
  color: inherit;            /* 色を固定しない。WordPressの色設定を活かす */
  font-size: 14px;           /* テーマが td に直接指定していても効くよう、セル側にも持たせる */
  line-height: 1.7;
  word-break: normal;
  overflow-wrap: anywhere;
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain tr:last-child :is(th, td),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table tr:last-child :is(th, td),
.ab-typo.ab-typo.ab-typo .wp-block-table tr:last-child :is(th, td) {
  border-bottom: 1.5px solid var(--ab-heading);
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain thead th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table thead th,
.ab-typo.ab-typo.ab-typo .wp-block-table thead th {
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ab-heading);
  background: transparent;   /* テーマのグレー地を打ち消す */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* 表の直後は余白が重なりやすいので詰める */
.ab-typo.ab-typo.ab-typo :is(.ab-table-plain, .wp-block-table, .wp-block-flexible-table-block-table, .ab-table) + p {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   セルの地色について

   ブロック側で色を指定したセルには、こちらの地色を当てません。
   セレクタの :not(...) がその判定です。これを外すと、
   ブロックの色設定がフロントだけ反映されない状態に戻ります。
   -------------------------------------------------------------------------- */

/* 色指定のないセルだけ、テーマの地色を打ち消して透明にする */
.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-typo.ab-typo.ab-typo .wp-block-table :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-table.ab-table.ab-table .ab-table__scroll :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: transparent;
}

/* ヘッダ行・フッタ行は地色を敷く（色指定のないセルのみ） */
.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(thead, tfoot) :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(thead, tfoot) :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-typo.ab-typo.ab-typo .wp-block-table :is(thead, tfoot) :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-table.ab-table.ab-table .ab-table__scroll :is(thead, tfoot) :is(th, td):not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: var(--ab-table-head);
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(thead, tfoot) :is(th, td),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(thead, tfoot) :is(th, td),
.ab-typo.ab-typo.ab-typo .wp-block-table :is(thead, tfoot) :is(th, td),
.ab-table.ab-table.ab-table .ab-table__scroll :is(thead, tfoot) :is(th, td) {
  font-weight: 700;
}

/* 行の見出しセル（1列目）も、ヘッダ・フッタと同じ地色にする */
.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain tbody th:not([style*="background"]):not([class*="background"]):not(.has-background),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table tbody th:not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-typo.ab-typo.ab-typo .wp-block-table tbody th:not([style*="background"]):not([class*="background"]):not(.has-background),
.ab-table.ab-table.ab-table .ab-table__scroll tbody th:not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: var(--ab-table-head);
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain tbody th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table tbody th,
.ab-typo.ab-typo.ab-typo .wp-block-table tbody th,
.ab-table.ab-table.ab-table .ab-table__scroll tbody th {
  font-weight: 700;
  text-align: left;
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain tfoot :is(th, td),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table tfoot :is(th, td),
.ab-typo.ab-typo.ab-typo .wp-block-table tfoot :is(th, td),
.ab-table.ab-table.ab-table .ab-table__scroll tfoot :is(th, td) {
  border-top: 1px solid var(--ab-heading);
}

.ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain figcaption,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table figcaption,
.ab-typo.ab-typo.ab-typo .wp-block-table figcaption {
  margin: 10px 1px 0;
  color: var(--ab-muted);
  font-size: 11.5px;
}

@media (max-width: 782px) {
  .ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain table,
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table table,
  .ab-typo.ab-typo.ab-typo .wp-block-table table { font-size: 13px; }

  .ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(th, td),
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(th, td),
  .ab-typo.ab-typo.ab-typo .wp-block-table :is(th, td) { padding: 11px 13px; font-size: 13px; }

  .ab-table-plain.ab-table-plain.ab-table-plain.ab-table-plain :is(thead, tfoot) :is(th, td),
  .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table :is(thead, tfoot) :is(th, td),
  .ab-typo.ab-typo.ab-typo .wp-block-table :is(thead, tfoot) :is(th, td) { font-size: 12px; letter-spacing: 0.03em; }
}


/* ==========================================================================
   3. 比較表
   囲み枠と角丸をやめ、上下のインク罫と行間のヘアラインで組む新聞式。
   ========================================================================== */

.ab-table.ab-table.ab-table { color: var(--ab-text); }

.ab-table.ab-table.ab-table .ab-table__hint {
  display: none;                 /* PCでは不要。SPでだけ出す */
  margin: 0 0 8px;
  color: var(--ab-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: right;
}
.ab-table.ab-table.ab-table .ab-table__hint::before {
  content: "";
  display: inline-block;
  width: 14px; height: 9px;
  margin-right: 6px;
  vertical-align: 0;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M6 2L2 6l4 4M22 2l4 4-4 4M2 6h24' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M6 2L2 6l4 4M22 2l4 4-4 4M2 6h24' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
}

.ab-table__scroll.ab-table__scroll.ab-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  border-radius: 0;
  background: #fff;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.ab-table__scroll.ab-table__scroll.ab-table__scroll::-webkit-scrollbar { height: 6px; }
.ab-table__scroll.ab-table__scroll.ab-table__scroll::-webkit-scrollbar-thumb { background: var(--ab-line-strong); }

.ab-table.ab-table.ab-table .ab-table__scroll table,
.ab-table.ab-table.ab-table .wp-block-table table {
  display: table;        /* 本文用CSSの display:block を打ち消す */
  overflow: visible;
  width: 100%;
  min-width: var(--ab-table-min, 640px);
  margin: 0;
  border: 0;
  border-top: 1.5px solid var(--ab-heading);   /* 表の天地はインク罫で締める */
  border-collapse: separate;   /* 1列目固定に必要 */
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: transparent;
}

.ab-table.ab-table.ab-table .wp-block-table { margin: 0; overflow: visible; }
.ab-table.ab-table.ab-table .wp-block-table figcaption {
  margin: 10px 1px 0;
  color: var(--ab-muted);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.ab-table.ab-table.ab-table .ab-table__scroll :is(th, td) {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--ab-line);
  vertical-align: top;
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
  color: inherit;
  font-size: 14px;
  line-height: 1.7;
}
.ab-table.ab-table.ab-table .ab-table__scroll tr:last-child :is(th, td) {
  border-bottom: 1.5px solid var(--ab-heading);
}

/* 見出し行：塗らず、下に1本引くだけ
   色は inherit。ここで固定すると、WordPressの「テキスト色」設定が効かなくなる。 */
.ab-table.ab-table.ab-table .ab-table__scroll tfoot :is(th, td) {
  border-top: 1px solid var(--ab-heading);
  font-weight: 700;
}

.ab-table.ab-table.ab-table .ab-table__scroll thead th {
  padding-top: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ab-heading);
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 1列目：見出しとして扱う（太さだけ。色は inherit のまま） */
.ab-table.ab-table.ab-table .ab-table__scroll tbody tr > *:first-child {
  font-weight: 700;
}

/* 1列目を固定 */
.ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first :is(thead, tbody) tr > *:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  /* 1列目の区切り。スクロールしていない時も「意図した罫」に見えるよう
     ヘアラインを引き、影はごく薄くだけ添える */
  border-right: 1px solid var(--ab-line);
  box-shadow: 7px 0 6px -6px rgba(22, 24, 27, .10);
}
.ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first thead tr > *:first-child { z-index: 3; }

/* 固定した1列目は不透明でないと内容が透けるため、地色を敷き直す。
   ただし色を指定したセルには当てない。 */
.ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first tbody tr > td:first-child:not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: #fff;
}
.ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first tbody tr > th:first-child:not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: var(--ab-table-head);
}
.ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first :is(thead, tfoot) tr > *:first-child:not([style*="background"]):not([class*="background"]):not(.has-background) {
  background: var(--ab-table-head);
}

/* ヘッダ行を固定（縦に長い表で効きます） */
.ab-table--sticky-head.ab-table--sticky-head.ab-table--sticky-head thead th {
  position: sticky;
  top: var(--ab-sticky-offset, 0px);
  z-index: 2;
}

/* 詰めて表示 */
.ab-table--compact.ab-table--compact.ab-table--compact .ab-table__scroll :is(th, td) { padding: 9px 12px; }
.ab-table--compact.ab-table--compact.ab-table--compact .ab-table__scroll table { font-size: 13px; }

.ab-table.ab-table.ab-table td.has-text-align-center,
.ab-table.ab-table.ab-table th.has-text-align-center { text-align: center; }


/* ==========================================================================
   4. ボックス
   囲みカードをやめ、上の太罫＋小さなラベルで「章」を作る形に。
   ========================================================================== */

.ab-box.ab-box.ab-box {
  padding: 16px 0 18px;
  border: 0;
  border-top: 2px solid var(--ab-heading);
  border-bottom: 1px solid var(--ab-line);
  border-radius: 0;
  background: none;
}

.ab-box.ab-box.ab-box .ab-box__title {
  margin: 0 0 0.85em;
  color: var(--ab-heading);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ab-ls-label);
}

.ab-box__body.ab-box__body.ab-box__body > *:first-child { margin-top: 0; }
.ab-box__body.ab-box__body.ab-box__body > *:last-child  { margin-bottom: 0; }
.ab-box__body.ab-box__body.ab-box__body :is(ul, ol) { margin-bottom: 0.8em; }

/* --- ポイント：既定形。上のインク罫がそのまま強調になる --- */

/* --- 注意：罫とラベルだけを煉瓦色に。地は塗らない --- */
.ab-box--caution.ab-box--caution.ab-box--caution {
  border-top-color: var(--ab-caution);
}
.ab-box--caution.ab-box--caution.ab-box--caution .ab-box__title { color: var(--ab-caution); }

/* --- メモ：上罫も細くして、いちばん静かに --- */
.ab-box--memo.ab-box--memo.ab-box--memo {
  border-top: 1px solid var(--ab-line);
}
.ab-box--memo.ab-box--memo.ab-box--memo .ab-box__title { color: var(--ab-muted); }

/* --- 監修コメント：ここだけ地を敷いて、本文と質を変える --- */
.ab-box--supervisor.ab-box--supervisor.ab-box--supervisor {
  padding: 20px 22px;
  border: 0;
  background: var(--ab-bg-soft);
}
.ab-box--supervisor.ab-box--supervisor.ab-box--supervisor .ab-box__title { color: var(--ab-muted); }

/* --- シンプル枠：四方ヘアライン --- */
.ab-box--plain.ab-box--plain.ab-box--plain {
  padding: 18px 20px;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
}


/* ==========================================================================
   5. CTAボタン
   角丸・影・ホバーで浮く動きをやめ、面で押す形に。
   ========================================================================== */

.ab-btnwrap.ab-btnwrap.ab-btnwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  padding: 0 30px;
  min-height: 58px;
  border: 1px solid var(--ab-accent);
  border-radius: var(--ab-radius);
  background: var(--ab-accent);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn:hover,
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn:focus-visible {
  background: #fff;
  border-color: var(--ab-accent);
  color: var(--ab-accent);
  text-decoration: none;
}
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn:focus-visible { outline: 1px solid var(--ab-accent); outline-offset: 3px; }

.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn__label { display: inline-block; }

/* 矢印：細い線1本。太い山括弧はやめる */
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn__arrow {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 1px;
  background: currentColor;
}
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* サイズ */
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--m {
  min-height: 46px;
  padding: 0 22px;
  font-size: 14px;
  gap: 11px;
}
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--m .ab-btn__arrow { width: 15px; }

/* サブ：線だけ */
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--secondary {
  background: #fff;
  color: var(--ab-accent);
}
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--secondary:hover,
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--secondary:focus-visible {
  background: var(--ab-accent);
  color: #fff;
}

/* テキストリンク風 */
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--ghost {
  min-height: 0;
  padding: 4px 2px;
  border-color: transparent;
  background: transparent;
  color: var(--ab-accent);
  font-size: 14.5px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--ghost:hover,
.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--ghost:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--ab-muted);
}

/* 幅いっぱい */
.ab-btnwrap--full.ab-btnwrap--full.ab-btnwrap--full .ab-btn { width: 100%; max-width: 440px; }
.ab-btnwrap--full.ab-btnwrap--full.ab-btnwrap--full .ab-btn--ghost { width: auto; }

.ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn__note {
  margin: 0;
  color: var(--ab-muted);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-align: center;
}


/* ==========================================================================
   6. FAQ（<details> / <summary> なので JavaScript 不要）
   四角バッジと山括弧をやめ、Q/A の活字と ＋／− の細線で。
   ========================================================================== */

.ab-faq.ab-faq.ab-faq {
  border-top: 1.5px solid var(--ab-heading);
}

.ab-faq.ab-faq.ab-faq .ab-faq__title {
  margin: 0;
  padding: 13px 0 0;
  color: var(--ab-heading);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ab-ls-label);
}

/* --------------------------------------------------------------------------
   ボックス表示
   罫線だけの既定形に対して、囲みと見出しの帯を付けた形。
   -------------------------------------------------------------------------- */
.ab-faq--box.ab-faq--box.ab-faq--box {
  border: 1px solid var(--ab-line-strong);
  border-top: 1px solid var(--ab-line-strong);
  border-radius: var(--ab-radius);
  background: #fff;
  overflow: hidden;
}

.ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__title {
  margin: 0;
  padding: 12px 18px;
  background: var(--ab-heading);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__list {
  padding: 0 18px;
}

.ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__item:last-child {
  border-bottom: 0;
}

.ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__q {
  padding-right: 34px;
}

@media (max-width: 782px) {
  .ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__title {
    padding: 11px 14px;
    font-size: 12px;
  }
  .ab-faq--box.ab-faq--box.ab-faq--box .ab-faq__list { padding: 0 14px; }
}

.ab-faq.ab-faq.ab-faq .ab-faq__item {
  border-bottom: 1px solid var(--ab-line);
}

.ab-faq__q.ab-faq__q.ab-faq__q {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 18px 36px 18px 0;
  position: relative;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ab-heading);
  list-style: none;
  transition: color .14s ease;
}
.ab-faq__q.ab-faq__q.ab-faq__q::-webkit-details-marker { display: none; }
.ab-faq__q.ab-faq__q.ab-faq__q:hover { color: var(--ab-muted); }
.ab-faq__q.ab-faq__q.ab-faq__q:focus-visible { outline: 1px solid var(--ab-heading); outline-offset: -1px; }

.ab-faq__mark.ab-faq__mark.ab-faq__mark {
  flex: 0 0 auto;
  width: 15px;
  color: var(--ab-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.ab-faq__mark--a.ab-faq__mark--a.ab-faq__mark--a { color: var(--ab-muted); }

.ab-faq__qtext.ab-faq__qtext.ab-faq__qtext { flex: 1 1 auto; min-width: 0; }

/* ＋／− を細線2本で描く */
.ab-faq__chev.ab-faq__chev.ab-faq__chev {
  position: absolute;
  right: 4px;
  top: 27px;
  width: 13px;
  height: 13px;
}
.ab-faq__chev.ab-faq__chev.ab-faq__chev::before,
.ab-faq__chev.ab-faq__chev.ab-faq__chev::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
  background: var(--ab-heading);
  transition: transform .2s ease, opacity .2s ease;
}
.ab-faq__chev.ab-faq__chev.ab-faq__chev::after { transform: rotate(90deg); }
.ab-faq__item.ab-faq__item.ab-faq__item[open] .ab-faq__chev::after { transform: rotate(0deg); opacity: 0; }

.ab-faq__a.ab-faq__a.ab-faq__a {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 0 0 22px;
}
.ab-faq__atext.ab-faq__atext.ab-faq__atext { flex: 1 1 auto; min-width: 0; }
.ab-faq__atext.ab-faq__atext.ab-faq__atext > *:first-child { margin-top: 0; }
.ab-faq__atext.ab-faq__atext.ab-faq__atext > *:last-child  { margin-bottom: 0; }


/* ==========================================================================
   7. ステップ
   塗りピルをやめ、小さなラベル＋左のヘアラインで手順を示す。
   ========================================================================== */

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

.ab-steps.ab-steps.ab-steps .ab-steps__item {
  counter-increment: ab-step;
  position: relative;
  margin: 0 0 1.7em;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--ab-line);
}
.ab-steps.ab-steps.ab-steps .ab-steps__item:last-child { margin-bottom: 0; }

/* 見出し位置に短いインクの目盛りを重ねる */
.ab-steps.ab-steps.ab-steps .ab-steps__item::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 1.4em;
  background: var(--ab-heading);
}

.ab-steps.ab-steps.ab-steps .ab-steps__item::before {
  content: var(--ab-step-label, "STEP") " " counter(ab-step);
  display: block;
  margin-bottom: 0.5em;
  color: var(--ab-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ab-ls-label);
  line-height: 1.4;
}

.ab-steps.ab-steps.ab-steps .ab-steps__title {
  margin: 0 0 0.5em;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ab-heading);
}

.ab-steps__body.ab-steps__body.ab-steps__body > *:first-child { margin-top: 0; }
.ab-steps__body.ab-steps__body.ab-steps__body > *:last-child  { margin-bottom: 0; }



/* ==========================================================================
   8. おすすめ・デメリットBOX
   --------------------------------------------------------------------------
   <table> を使わず grid で組んでいます。テーマや表プラグインの表用CSSが
   一切効かないため、比較表より見た目が崩れにくい構成です。
   見出しの高さは subgrid で揃えます（対応していないブラウザでは
   min-height で近い見た目になります）。
   ========================================================================== */

.ab-pc.ab-pc.ab-pc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  border-top: 1.5px solid var(--ab-heading);
  border-bottom: 1.5px solid var(--ab-heading);
}

.ab-pc__col.ab-pc__col.ab-pc__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 2列目以降は縦のヘアラインで区切る */
.ab-pc__col.ab-pc__col.ab-pc__col + .ab-pc__col {
  border-left: 1px solid var(--ab-line);
}

@supports (grid-template-rows: subgrid) {
  .ab-pc__col.ab-pc__col.ab-pc__col {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.ab-pc__label.ab-pc__label.ab-pc__label {
  display: flex;
  align-items: center;
  min-height: 3.2em;
  margin: 0;
  padding: 12px 16px;
  background: var(--ab-table-head);
  border-bottom: 1px solid var(--ab-heading);
  color: var(--ab-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

.ab-pc__col--pro.ab-pc__col--pro .ab-pc__label { color: var(--ab-pro); }
.ab-pc__col--con.ab-pc__col--con .ab-pc__label { color: var(--ab-con); }

.ab-pc__body.ab-pc__body.ab-pc__body {
  padding: 16px;
  font-size: 14px;
  line-height: 1.8;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

.ab-pc__body.ab-pc__body.ab-pc__body > *:first-child { margin-top: 0; }
.ab-pc__body.ab-pc__body.ab-pc__body > *:last-child  { margin-bottom: 0; }

/* 既定は点なしの行並び（表で組んでいたときの見た目に合わせる） */
.ab-pc__body.ab-pc__body.ab-pc__body :is(ul, ol) {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.ab-pc__body.ab-pc__body.ab-pc__body li {
  margin: 0 0 0.5em;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.8;
}

.ab-pc__body.ab-pc__body.ab-pc__body li:last-child { margin-bottom: 0; }

.ab-pc__body.ab-pc__body.ab-pc__body p {
  margin: 0 0 0.6em;
  font-size: 14px;
  line-height: 1.8;
}

/* 点を出す設定のとき */
.ab-pc__col--bullets.ab-pc__col--bullets .ab-pc__body :is(ul, ol) {
  padding-left: 1.3em;
  list-style: revert;
}
.ab-pc__col--bullets.ab-pc__col--bullets .ab-pc__body li::marker {
  color: var(--ab-line-strong);
}

/* SPでも2列のまま。縦に積むと左右の対比が読み取れなくなるため、
   余白と文字サイズを詰めて2列を維持します。 */
@media (max-width: 782px) {
  .ab-pc__label.ab-pc__label.ab-pc__label {
    min-height: 0;
    padding: 10px 11px;
    font-size: 11.5px;
    letter-spacing: 0.01em;
  }
  .ab-pc__body.ab-pc__body.ab-pc__body {
    padding: 12px 11px;
    font-size: 12.5px;
    line-height: 1.75;
  }
  .ab-pc__body.ab-pc__body.ab-pc__body li,
  .ab-pc__body.ab-pc__body.ab-pc__body p {
    font-size: 12.5px;
    line-height: 1.75;
  }
  .ab-pc__body.ab-pc__body.ab-pc__body li { margin-bottom: 0.6em; }
}

@media (max-width: 400px) {
  .ab-pc__label.ab-pc__label.ab-pc__label { padding: 9px 9px; font-size: 11px; }
  .ab-pc__body.ab-pc__body.ab-pc__body { padding: 11px 9px; font-size: 12px; }
  .ab-pc__body.ab-pc__body.ab-pc__body li,
  .ab-pc__body.ab-pc__body.ab-pc__body p { font-size: 12px; }
}



/* ==========================================================================
   9. 目次
   --------------------------------------------------------------------------
   本文の見出しから自動で作られます（PHP側）。
   囲みカードにせず、上下の罫線と余白で「別のブロック」に見せています。
   ========================================================================== */

.ab-toc.ab-toc.ab-toc {
  position: relative;
  margin: 2.2em 0;
  padding: 15px 20px 17px;
  border: 0;
  border-top: 2px solid var(--ab-heading);
  background: var(--ab-toc-bg);
}

/* 開閉用のチェックボックス。JavaScriptを使わずに畳むための仕掛けです。
   画面には出しません（キーボード操作は label 側で受けます）。 */
.ab-toc.ab-toc.ab-toc .ab-toc__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 畳んでいる間は高さを抑えて、下端をぼかして「続きがある」ことを示す */
.ab-toc--clamped.ab-toc--clamped.ab-toc--clamped .ab-toc__body {
  max-height: 15.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
          mask-image: linear-gradient(#000 72%, transparent 100%);
}

.ab-toc.ab-toc.ab-toc .ab-toc__toggle:checked ~ .ab-toc__body {
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.ab-toc.ab-toc.ab-toc .ab-toc__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 0;
  padding: 8px 0;
  border-top: 1px solid var(--ab-line-strong);
  color: var(--ab-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
}

.ab-toc.ab-toc.ab-toc .ab-toc__more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .18s ease;
}

.ab-toc.ab-toc.ab-toc .ab-toc__toggle:checked ~ .ab-toc__more::after {
  transform: rotate(225deg);
}

.ab-toc.ab-toc.ab-toc .ab-toc__more-close { display: none; }
.ab-toc.ab-toc.ab-toc .ab-toc__toggle:checked ~ .ab-toc__more .ab-toc__more-open { display: none; }
.ab-toc.ab-toc.ab-toc .ab-toc__toggle:checked ~ .ab-toc__more .ab-toc__more-close { display: inline; }

.ab-toc.ab-toc.ab-toc .ab-toc__toggle:focus-visible ~ .ab-toc__more {
  outline: 1px solid var(--ab-heading);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ab-toc.ab-toc.ab-toc .ab-toc__more::after { transition: none; }
}

.ab-toc.ab-toc.ab-toc .ab-toc__label {
  margin: 0 0 12px;
  padding: 0;
  color: var(--ab-heading);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: var(--ab-ls-label);
}

.ab-toc.ab-toc.ab-toc .ab-toc__list,
.ab-toc.ab-toc.ab-toc .ab-toc__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-toc.ab-toc.ab-toc .ab-toc__item {
  margin: 0;
  padding: 0;
}

.ab-toc.ab-toc.ab-toc .ab-toc__item + .ab-toc__item {
  border-top: 1px solid var(--ab-line-strong);
}

.ab-toc.ab-toc.ab-toc .ab-toc__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  color: var(--ab-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  text-decoration: none;
  transition: color .15s ease;
}

.ab-toc.ab-toc.ab-toc .ab-toc__link:hover,
.ab-toc.ab-toc.ab-toc .ab-toc__link:focus-visible {
  color: var(--ab-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ab-toc.ab-toc.ab-toc .ab-toc__num {
  flex: 0 0 auto;
  min-width: 1.4em;
  color: var(--ab-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.ab-toc.ab-toc.ab-toc .ab-toc__text { flex: 1 1 auto; min-width: 0; }

/* h3 は一段下げて、細い罫でぶら下げる */
.ab-toc.ab-toc.ab-toc .ab-toc__sub {
  margin: 0 0 8px 1.4em;
  padding-left: 12px;
  border-left: 1px solid var(--ab-line-strong);
}

.ab-toc.ab-toc.ab-toc .ab-toc__subitem { margin: 0; }

.ab-toc.ab-toc.ab-toc .ab-toc__subitem .ab-toc__link {
  padding: 5px 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ab-text);
}

/* 見出しにジャンプしたとき、固定ヘッダの下に隠れないように */
.ab-typo.ab-typo.ab-typo :is(h2, h3)[id] {
  scroll-margin-top: var(--ab-scroll-offset, 24px);
}

@media (max-width: 782px) {
  .ab-toc.ab-toc.ab-toc { padding: 13px 15px 15px; }
  .ab-toc.ab-toc.ab-toc .ab-toc__link { font-size: 13.5px; padding: 8px 0; }
  .ab-toc.ab-toc.ab-toc .ab-toc__subitem .ab-toc__link { font-size: 12.5px; }
  .ab-toc.ab-toc.ab-toc .ab-toc__sub { margin-left: 1.2em; padding-left: 10px; }
}


/* ==========================================================================
   10. アコーディオンを詰める
   --------------------------------------------------------------------------
   他のプラグインやテーマのアコーディオンは、見出しが大きく余白も広めで、
   本文の中で浮きがちです。文字サイズと余白を本文に合わせ、
   連続して置いたときの間隔も詰めます。
   （このプラグインのFAQブロックは対象外。あちらは専用の指定があります）
   設定「アコーディオンを詰めて表示する」がオンのときだけ、
   本文ラッパーに ab-typo--compact-acc が付いて有効になります。
   ========================================================================== */

.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc details:not([class*="ab-faq"]),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="toggle"]:not([class*="ab-"]):not(input),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="faq"]:not([class*="ab-"]) {
  margin-block: 0.7em;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   アコーディオンのタイトルに見出しタグ（h2〜h5）が使われている場合
   本文の見出しスタイルが当たると、文字が大きくなり上下に大きな余白が入ります。
   （目次からも除外する処理を PHP 側に入れています）
   -------------------------------------------------------------------------- */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(details, summary, [class*="accordion"], [class*="toggle"]):not([class*="ab-"]) :is(h2, h3, h4, h5),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(h2, h3, h4, h5)[class*="accordion"],
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(h2, h3, h4, h5)[class*="toggle"] {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ab-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
}

/* summary の中に見出しや段落が入っていると、ブロック要素なので開閉の三角が
   別の行に落ちます。インラインにして1行に収めます。 */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc summary :is(h2, h3, h4, h5, p) {
  display: inline;
  margin: 0;
}

/* --------------------------------------------------------------------------
   見出しタグから段落に変換したタイトル（PHP側で ab-acc-title を付与）
   「料金表の開閉」のようなタイトルは記事の見出しではないので、
   表示前に p へ変換しています。ここはその見た目です。
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo .ab-acc-title {
  margin: 0;
  color: var(--ab-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
}

@media (max-width: 782px) {
  .ab-typo.ab-typo.ab-typo .ab-acc-title { font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   タイトル行と中身（PHP側で ab-acc-row / ab-acc-panel を付与）

   アコーディオンのクラス名はテーマごとに違うので、CSSだけでタイトル行を
   狙うのは無理があります。段落へ変換する時点で印を付けているので、
   ここではその印を使って高さを詰めます。

   行の高さは --ab-acc-pad で調整できます（上下の余白）。
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo {
  --ab-acc-pad: 12px;
  --ab-acc-panel-pad: 14px;
}

/* ab-acc-item / ab-acc-row / ab-acc-panel はこのプラグインが付けたクラス
   なので、他のCSSと衝突しません。テーマのCSSがあとから読み込まれる環境でも
   確実に効くように !important を付けています。

   高さは3か所から出ます。1つでも残ると詰まらないので、まとめて0にします。
     ab-acc-item  … 項目の外枠（ブロックの余白、block-gap）
     ab-acc-row   … タイトル行。ここにだけ余白を持たせる
     ab-acc-panel … 中身。閉じているときに padding が残るのが最大の原因 */
.ab-typo.ab-typo.ab-typo .ab-acc-item {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

.ab-typo.ab-typo.ab-typo .ab-acc-row {
  min-height: 0 !important;
  height: auto !important;
  padding-top: var(--ab-acc-pad) !important;
  padding-bottom: var(--ab-acc-pad) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* タイトル行の中にボタンやリンクが入っている作り（WordPress標準の
   アコーディオンブロックなど）では、余白はそのボタンや中の span に
   付いています。上下の余白を持つのは行そのものだけにしたいので、
   中に入っているものは全部0にします。

   下のほうにある [class*="title"] / [class*="head"] / [class*="toggle"]
   といった当てずっぽうの指定が、ボタンの中の span
   （wp-block-accordion-heading__toggle-title など）にも当たってしまう
   ため、ここで打ち消す意味もあります。左右の余白は残します。 */
.ab-typo.ab-typo.ab-typo .ab-acc-row * {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 中身の余白。
   閉じているときに max-height:0 で隠すつくりだと、中身が見えていなくても
   padding だけが残って行の下に空白ができます。余白を padding から
   中身の margin に移すと、閉じているときは完全に0になります。 */
.ab-typo.ab-typo.ab-typo .ab-acc-panel {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 閉じているあいだは中身の余白を完全に消す。
   hidden="until-found" は display:none ではないので、
   中身が見えていなくても余白の箱だけ残ります。 */
.ab-typo.ab-typo.ab-typo .ab-acc-panel[hidden] > *,
.ab-typo.ab-typo.ab-typo .ab-acc-panel[aria-hidden="true"] > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ab-typo.ab-typo.ab-typo .ab-acc-panel > :first-child { margin-top: var(--ab-acc-panel-pad); }
.ab-typo.ab-typo.ab-typo .ab-acc-panel > :last-child { margin-bottom: calc(var(--ab-acc-panel-pad) + 4px); }

/* details の中身は開いているときだけ見えるので、閉じている間の余白は不要 */
.ab-typo.ab-typo.ab-typo details:not([open]) > :not(summary) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

/* 印が付いていないアコーディオン（タイトルが最初から段落・span の場合）向け。
   :has() でタイトル行を拾います。 */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(summary, div, button, a, label):has(> .ab-acc-title) {
  min-height: 0;
  height: auto;
  padding-block: var(--ab-acc-pad);
}

@media (max-width: 782px) {
  .ab-typo.ab-typo.ab-typo {
    --ab-acc-pad: 11px;
    --ab-acc-panel-pad: 12px;
  }
}

/* アコーディオンの直下にある見出し＝タイトル行そのものなので、余白を持たせる */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(details, [class*="accordion"], [class*="toggle"]):not([class*="ab-"]) > :is(h2, h3, h4, h5),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(h2, h3, h4, h5)[class*="accordion"],
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(h2, h3, h4, h5)[class*="toggle"] {
  padding-block: var(--ab-acc-pad);
}

@media (max-width: 782px) {
  .ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(details, summary, [class*="accordion"], [class*="toggle"]):not([class*="ab-"]) :is(h2, h3, h4, h5) {
    font-size: 13.5px;
  }
}

/* 見出しの行に大きな最小高さや余白が付いていることがあるので打ち消す */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(details, [class*="accordion"], [class*="toggle"]):not([class*="ab-"]) :is(summary, [class*="title"], [class*="head"], label, button) {
  min-height: 0;
  padding-block: var(--ab-acc-pad);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
}

/* 中身側の余白も詰める */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc :is(details, [class*="accordion"], [class*="toggle"]):not([class*="ab-"]) :is([class*="body"], [class*="content"], [class*="inner"]) {
  padding-block: 0 12px;
  font-size: 13.5px;
  line-height: 1.8;
}

/* 連続して置いたときは間を空けず、罫線でつなぐ */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc details:not([class*="ab-faq"]) + details:not([class*="ab-faq"]),
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]) + [class*="accordion"]:not([class*="ab-"]) {
  margin-top: -0.7em;
  border-top: 1px solid var(--ab-line);
}

.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc details:not([class*="ab-faq"]) > summary {
  padding: var(--ab-acc-pad) 30px var(--ab-acc-pad) 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ab-heading);
  cursor: pointer;
}

/* 他プラグインのアコーディオン見出し（div や button で作られているもの） */
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]) [class*="title"],
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]) > summary,
.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]) > button {
  padding-block: var(--ab-acc-pad);
  font-size: 14.5px;
  line-height: 1.6;
}

.ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc details:not([class*="ab-faq"]) > summary + * {
  padding-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.8;
}

@media (max-width: 782px) {
  .ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc details:not([class*="ab-faq"]) > summary,
  .ab-typo--compact-acc.ab-typo--compact-acc.ab-typo--compact-acc [class*="accordion"]:not([class*="ab-"]) [class*="title"] {
    padding-block: var(--ab-acc-pad);
    font-size: 13.5px;
  }
}



/* ==========================================================================
   11. 特徴BOX
   --------------------------------------------------------------------------
   見出しの帯＋点線区切りのリスト。帯の色は5種類から選べます。
   色は --ab-fbox-tone に入るので、CSSを触らずブロック側で切り替えられます。
   ========================================================================== */

.ab-fbox.ab-fbox.ab-fbox {
  --ab-fbox-tone: var(--ab-heading);
  margin-block: 2.6em;
  border: 1px solid var(--ab-fbox-tone);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}

.ab-fbox--green.ab-fbox--green.ab-fbox--green { --ab-fbox-tone: var(--ab-green); }
.ab-fbox--blue.ab-fbox--blue.ab-fbox--blue   { --ab-fbox-tone: var(--ab-con); }
.ab-fbox--red.ab-fbox--red.ab-fbox--red      { --ab-fbox-tone: var(--ab-pro); }
.ab-fbox--gray.ab-fbox--gray.ab-fbox--gray   { --ab-fbox-tone: #6d7075; }

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__title {
  margin: 0;
  padding: 13px 18px;
  background: var(--ab-fbox-tone);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-align: center;
}

.ab-fbox--title-left.ab-fbox--title-left.ab-fbox--title-left .ab-fbox__title {
  text-align: left;
}

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body {
  padding: 2px 18px;
}

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body > *:first-child { margin-top: 0; }
.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body > *:last-child  { margin-bottom: 0; }

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 22px;
  border-bottom: 1px dashed color-mix(in srgb, var(--ab-fbox-tone) 45%, #fff);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ab-text);
}

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body li:last-child { border-bottom: 0; }

.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ab-fbox-tone);
}

/* 箇条書き以外（段落など）を入れたときも整える */
.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body p {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ab-fbox-tone) 45%, #fff);
  font-size: 14.5px;
  line-height: 1.8;
}
.ab-fbox.ab-fbox.ab-fbox .ab-fbox__body p:last-child { border-bottom: 0; }

@media (max-width: 782px) {
  .ab-fbox.ab-fbox.ab-fbox .ab-fbox__title {
    padding: 11px 14px;
    font-size: 13.5px;
  }
  .ab-fbox.ab-fbox.ab-fbox .ab-fbox__body { padding: 2px 14px; }
  .ab-fbox.ab-fbox.ab-fbox .ab-fbox__body li {
    padding: 12px 0 12px 20px;
    font-size: 13.5px;
  }
  .ab-fbox.ab-fbox.ab-fbox .ab-fbox__body li::before { top: 1.32em; }
  .ab-fbox.ab-fbox.ab-fbox .ab-fbox__body p { padding: 12px 0; font-size: 13.5px; }
}


/* ==========================================================================
   12. レスポンシブ
   ========================================================================== */

/* タブレット以下：見出し前後の間だけ詰める */
@media (max-width: 900px) {
  :root { --ab-gap-h2: 2.9em; --ab-gap-h3: 2.2em; }
}

@media (max-width: 782px) {

  :root {
    --ab-gutter: 16px;
    --ab-lh-body: 1.85;
    --ab-gap-p: 1.4em;
    --ab-gap-h2: 2.5em;
    --ab-gap-h3: 2.0em;
  }

  .ab-balloon.ab-balloon.ab-balloon,
  .ab-pc.ab-pc.ab-pc,
  .ab-fbox.ab-fbox.ab-fbox,
  .ab-table.ab-table.ab-table,
  .ab-box.ab-box.ab-box,
  .ab-btnwrap.ab-btnwrap.ab-btnwrap,
  .ab-faq.ab-faq.ab-faq,
  .ab-steps.ab-steps.ab-steps { margin-block: 1.8em; }

  /* --- 吹き出し --- */
  .ab-balloon.ab-balloon.ab-balloon { gap: 11px; }
  .ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar { width: 66px; }
  .ab-balloon__avatar.ab-balloon__avatar.ab-balloon__avatar img,
  .ab-balloon__placeholder.ab-balloon__placeholder.ab-balloon__placeholder { width: 46px; height: 46px; margin: 0; }
  .ab-balloon__name.ab-balloon__name.ab-balloon__name { font-size: 10px; }
  .ab-balloon__body.ab-balloon__body.ab-balloon__body { padding: 14px 15px; font-size: 0.96em; }
  .ab-balloon__body.ab-balloon__body.ab-balloon__body::before,
  .ab-balloon__body.ab-balloon__body.ab-balloon__body::after { top: 15px; }

  /* --- 比較表 --- */
  .ab-table.ab-table.ab-table .ab-table__hint { display: block; }
  .ab-table.ab-table.ab-table .ab-table__scroll table { font-size: 13px; }
  .ab-table.ab-table.ab-table .ab-table__scroll :is(th, td) { padding: 11px 13px; font-size: 13px; }
  .ab-table.ab-table.ab-table .ab-table__scroll thead th { font-size: 12px; letter-spacing: 0.03em; }
  .ab-table--sticky-first.ab-table--sticky-first.ab-table--sticky-first :is(thead, tbody) tr > *:first-child {
    max-width: 128px;
    white-space: normal;
  }

  /* --- ボックス --- */
  .ab-box.ab-box.ab-box { padding: 14px 0 16px; }
  .ab-box--supervisor.ab-box--supervisor.ab-box--supervisor { padding: 17px 17px; }
  .ab-box--plain.ab-box--plain.ab-box--plain { padding: 16px 17px; }

  /* --- ボタン --- */
  .ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn { min-height: 56px; padding: 0 20px; font-size: 15px; gap: 11px; }
  .ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn--m { min-height: 44px; font-size: 13.5px; }
  .ab-btnwrap--full.ab-btnwrap--full.ab-btnwrap--full .ab-btn { max-width: none; }

  /* --- FAQ --- */
  .ab-faq.ab-faq.ab-faq .ab-faq__q { padding: 16px 30px 16px 0; font-size: 0.98em; }
  .ab-faq__a.ab-faq__a.ab-faq__a { padding-bottom: 19px; }
  .ab-faq__mark.ab-faq__mark.ab-faq__mark { width: 13px; font-size: 12px; }
  .ab-faq__chev.ab-faq__chev.ab-faq__chev { top: 24px; right: 1px; }

  /* --- ステップ --- */
  .ab-steps.ab-steps.ab-steps .ab-steps__item { padding-left: 16px; }
  .ab-steps.ab-steps.ab-steps .ab-steps__title { font-size: 1em; }
}


/* ==========================================================================
   13. 動きを減らす設定・印刷
   ========================================================================== */

/* 小型SP */
@media (max-width: 400px) {
  :root { --ab-gutter: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-faq__chev.ab-faq__chev.ab-faq__chev::before,
  .ab-faq__chev.ab-faq__chev.ab-faq__chev::after,
  .ab-btnwrap.ab-btnwrap.ab-btnwrap .ab-btn { transition: none; }
}

@media print {
  .ab-faq.ab-faq.ab-faq .ab-faq__item { border-bottom: 1px solid #ccc; }
  .ab-faq__item.ab-faq__item.ab-faq__item > .ab-faq__a { display: flex !important; }
  .ab-table__scroll.ab-table__scroll.ab-table__scroll { overflow: visible; }
  .ab-table.ab-table.ab-table .ab-table__hint { display: none; }
}

/* ==========================================================================
   13. 料金プランBOX
   --------------------------------------------------------------------------
   予防プラン／発毛プランのような料金カードを並べる枠。
   SPでも列数は変えません（文字と余白を詰めて対応）。
   ========================================================================== */

.ab-plans.ab-plans.ab-plans {
  --ab-plan-tone: var(--ab-line-strong);
  --ab-plan-tint: #fbfbfa;
  display: grid;
  gap: 12px;
  margin: var(--ab-gap-block) 0;
}

.ab-plans--2.ab-plans--2.ab-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-plans--3.ab-plans--3.ab-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ab-plans.ab-plans.ab-plans .ab-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 13px;
  border: 1.5px solid var(--ab-plan-tone);
  border-radius: 8px;
  background: var(--ab-plan-tint);
  text-align: center;
}

.ab-plan--blue.ab-plan--blue  { --ab-plan-tone: #4a6f9c; --ab-plan-tint: #f7fafd; }
.ab-plan--red.ab-plan--red    { --ab-plan-tone: #c25c56; --ab-plan-tint: #fdf6f5; }
.ab-plan--green.ab-plan--green{ --ab-plan-tone: #6f9a7c; --ab-plan-tint: #f6faf7; }
.ab-plan--gray.ab-plan--gray  { --ab-plan-tone: #9a9791; --ab-plan-tint: #faf9f7; }

.ab-plans.ab-plans.ab-plans .ab-plan__label {
  margin: 0;
  color: var(--ab-plan-tone);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.ab-plans.ab-plans.ab-plans .ab-plan__sub {
  margin: 0;
  color: var(--ab-text);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
}

.ab-plans.ab-plans.ab-plans .ab-plan__price {
  margin: 2px 0 0;
  color: var(--ab-pro);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-feature-settings: "palt" 1;
}

.ab-plans.ab-plans.ab-plans .ab-plan__note {
  margin: 0;
  color: var(--ab-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .ab-plans.ab-plans.ab-plans { gap: 8px; }
  .ab-plans.ab-plans.ab-plans .ab-plan { padding: 11px 8px 10px; border-radius: 6px; }
  .ab-plans.ab-plans.ab-plans .ab-plan__label { font-size: 12.5px; }
  .ab-plans.ab-plans.ab-plans .ab-plan__sub   { font-size: 11px; }
  .ab-plans.ab-plans.ab-plans .ab-plan__price { font-size: 16px; }
  .ab-plans.ab-plans.ab-plans .ab-plan__note  { font-size: 10.5px; }
}

/* ==========================================================================
   14. 症例BOX
   --------------------------------------------------------------------------
   見出し列に色を敷いた、症例まとめ用の枠。
   <table> を使わず div のグリッドで組んでいるので、テーマや
   表プラグインの表用CSSの影響を受けません。
   ========================================================================== */

.ab-case.ab-case.ab-case {
  --ab-case-tint: #e9f3ec;
  --ab-case-label: #2f4f3a;
  display: grid;
  grid-template-columns: minmax(88px, 0.24fr) minmax(0, 1fr);
  margin: var(--ab-gap-block) 0;
  border: 1px solid var(--ab-line);
  border-bottom: 0;
  background: #fff;
}

.ab-case--gray.ab-case--gray { --ab-case-tint: #f1f0ed; --ab-case-label: #45443f; }
.ab-case--blue.ab-case--blue { --ab-case-tint: #eaf0f7; --ab-case-label: #2c4867; }
.ab-case--pink.ab-case--pink { --ab-case-tint: #f9edec; --ab-case-label: #6b3a36; }

.ab-case.ab-case.ab-case .ab-case__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.ab-case.ab-case.ab-case .ab-case__label,
.ab-case.ab-case.ab-case .ab-case__value {
  padding: 13px 14px;
  border-bottom: 1px solid var(--ab-line);
  font-size: 13.5px;
  line-height: 1.75;
}

.ab-case.ab-case.ab-case .ab-case__label {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--ab-line);
  background: var(--ab-case-tint);
  color: var(--ab-case-label);
  font-weight: 700;
  line-height: 1.5;
}

.ab-case.ab-case.ab-case .ab-case__value > *:first-child { margin-top: 0; }
.ab-case.ab-case.ab-case .ab-case__value > *:last-child  { margin-bottom: 0; }

.ab-case.ab-case.ab-case .ab-case__value p {
  margin: 0 0 0.4em;
  font-size: 13.5px;
  line-height: 1.75;
}
.ab-case.ab-case.ab-case .ab-case__value p:last-child { margin-bottom: 0; }

/* Before / After の写真 */
.ab-case.ab-case.ab-case .ab-ba,
.ab-typo.ab-typo.ab-typo .ab-ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  max-width: 520px;
  margin: 0;
}

.ab-typo.ab-typo.ab-typo .ab-ba__item {
  margin: 0;
  min-width: 0;
}

.ab-typo.ab-typo.ab-typo .ab-ba__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ab-typo.ab-typo.ab-typo .ab-ba__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #f1f0ed;
  color: var(--ab-muted);
  font-size: 12px;
}

.ab-typo.ab-typo.ab-typo .ab-ba__cap {
  margin: 0;
  padding: 5px 6px;
  background: #57a07d;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .ab-case.ab-case.ab-case {
    grid-template-columns: minmax(72px, 0.3fr) minmax(0, 1fr);
  }
  .ab-case.ab-case.ab-case .ab-case__label,
  .ab-case.ab-case.ab-case .ab-case__value {
    padding: 10px 10px;
    font-size: 12.5px;
  }
  .ab-case.ab-case.ab-case .ab-case__value p { font-size: 12.5px; }
  .ab-typo.ab-typo.ab-typo .ab-ba__cap { font-size: 10.5px; padding: 4px; }
}