/*
  本文の見た目（blocks.md §4・site-spec §6）: 本文の基本（見出し・段落・リスト・表・画像・リンク・強調）と 12 種のブロック。
  今の IFA の値を使い、CSS は新しく書いた（Find の CSS は写していない）。

  - 範囲: 公開の画面は記事の div.entry-content（single.php）、ブロックエディターは .editor-styles-wrapper。このファイルは
    エディターの CSS としても読む（functions.php）。本体はエディターの CSS の各規則の前に .editor-styles-wrapper を付けるが、
    それを含む規則は書き換えないので、範囲は :is(.entry-content, .editor-styles-wrapper) と書く。値の変数は、ページの枠と画面の
    CSS（style.css）も使うので :root に置く（このファイルは、どのページでも読む）
  - 大きさ: 1400px を基準に幅に比べて縮み、1400px で止まる（clamp(SP の値, 1400px での値 × --unit, 1400px での値)）。
    768px 以下でも式が SP の値にならない所（PC の最小と SP の値が違う所など）だけを、最後の SP の @media で入れ直す。
    PC の狭い幅（1100px 以下。site-spec §6）で変える物（表の横スクロール）は、その @media で分ける
  - 余白: 要素の上の余白だけで間を作る（下は 0）。余白の規則は :where() で詳細度をそろえ、後に書いた規則（「直後」の間）が
    勝つ。余白の値は変数にして、SP では変数だけを入れ直す（規則を書き直すと、勝ち負けの順が PC と SP で変わるため）
  - 飾り: エディターはブロックの外側の要素の ::after で、選んだブロックの枠を描く。飾りの疑似要素は、中の要素に付ける
  - 画像: 今の IFA のアイコンとイラスト（images/。Find のテーマの物をそのまま写した）
*/

/* 値。ページの枠と画面の CSS（style.css）も使うので :root に置く（エディターの中は .editor-styles-wrapper） */
:root,
.editor-styles-wrapper {
  /* 色 */
  --color-primary: #03c4bd;
  --color-primary-dark: #03a59f;
  --color-primary-pale: #dff6f5;
  --color-text: #222;
  --color-dark: #343434;
  --color-gray: #656565;
  --color-line: #dcdcdc;
  --color-bg: #f2f8f8;
  --color-surface: #fff;
  --color-accent: #ffe800;
  /* 1400px の幅で 1px（狭いと幅に比べて縮む） */
  --unit: calc(100vw / 1400);
  /* 文字 */
  --font-body: clamp(14px, calc(17 * var(--unit)), 17px);
  --font-h2: clamp(18px, calc(26 * var(--unit)), 26px);
  --font-h3: clamp(16px, calc(22 * var(--unit)), 22px);
  --font-h4: clamp(14px, calc(18 * var(--unit)), 18px);
  --font-ui: clamp(14px, calc(16 * var(--unit)), 16px);
  --font-note: clamp(12px, calc(14 * var(--unit)), 14px);
  --font-caption: 14px;
  /* 要素の上の余白 */
  --space-block: clamp(24px, calc(40 * var(--unit)), 40px);
  --space-h2: clamp(48px, calc(80 * var(--unit)), 80px);
  --space-h3: clamp(32px, calc(48 * var(--unit)), 48px);
  --space-h4: clamp(24px, calc(48 * var(--unit)), 48px);
  --space-merit-heading: clamp(32px, calc(65 * var(--unit)), 65px);
  --space-preface: min(calc(25 * var(--unit)), 25px);
  --space-note: clamp(12px, calc(20 * var(--unit)), 20px);
  --space-list: clamp(18px, calc(24 * var(--unit)), 24px);
  --space-item: clamp(6px, calc(12 * var(--unit)), 12px);
  /* 直後の間 */
  --space-paragraphs: var(--space-block);
  --space-after-h3: clamp(16px, calc(24 * var(--unit)), 24px);
  --space-after-h4: clamp(9px, calc(24 * var(--unit)), 24px);
  --space-after-merit-heading: clamp(16px, calc(48 * var(--unit)), 48px);
  --space-after-merits: clamp(24px, calc(56 * var(--unit)), 56px);
  --space-detail-links: clamp(8px, calc(16 * var(--unit)), 16px);
  /* 線と角 */
  --line: 3px solid var(--color-text);
  --radius-card: 20px;
  --radius-box: clamp(30px, calc(40 * var(--unit)), 40px);
  --radius-pill: 9999px;
}

/* 範囲 */
:is(.entry-content, .editor-styles-wrapper) {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: YakuHanJP, Inter, "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* ---------- 余白（要素の上だけ） ---------- */

:is(.entry-content, .editor-styles-wrapper) :where(h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, .wp-element-caption, .wp-block-fin-d-pro-preface, .wp-block-fin-d-pro-detail-link, .wp-block-fin-d-pro-merit) {
  margin: 0;
}
/* 内側の余白（padding）を幅に含める。エディターはブロックの幅に上限を付けて並べるので、内側の余白を持つブロックだけが
   段落より広がらないように（公開の画面は幅が自動なので変わらない） */
:is(.entry-content, .editor-styles-wrapper) :where(h2, h3, h4, ul, ol, dl, .wp-block-fin-d-pro-preface) {
  box-sizing: border-box;
}
:is(.entry-content, .editor-styles-wrapper) :where(p, figure, .wp-block-fin-d-pro-detail-link, .wp-block-fin-d-pro-steps, .wp-block-fin-d-pro-merits) {
  margin-top: var(--space-block);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-list) {
  margin-top: var(--space-list);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-list > li + li, li > .wp-block-list) {
  margin-top: var(--space-item);
}
:is(.entry-content, .editor-styles-wrapper) :where(h2.wp-block-heading) {
  margin-top: var(--space-h2);
}
:is(.entry-content, .editor-styles-wrapper) :where(h3.wp-block-heading) {
  margin-top: var(--space-h3);
}
:is(.entry-content, .editor-styles-wrapper) :where(h4.wp-block-heading) {
  margin-top: var(--space-h4);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-fin-d-pro-merit-heading) {
  margin-top: var(--space-merit-heading);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-fin-d-pro-preface) {
  margin-top: var(--space-preface);
}
:is(.entry-content, .editor-styles-wrapper) :where(p.is-style-fin-d-pro-note) {
  margin-top: var(--space-note);
}
/* 直後の間。見出し 2 の直後は、見出し 2 の下の間（40px・SP 24px）より狭くしない */
:is(.entry-content, .editor-styles-wrapper) :where(p) + :where(p:not(.is-style-fin-d-pro-note)) {
  margin-top: var(--space-paragraphs);
}
:is(.entry-content, .editor-styles-wrapper) :where(h2.wp-block-heading) + :where(.wp-block-list, p.is-style-fin-d-pro-note) {
  margin-top: var(--space-block);
}
:is(.entry-content, .editor-styles-wrapper) :where(h3.wp-block-heading) + * {
  margin-top: var(--space-after-h3);
}
:is(.entry-content, .editor-styles-wrapper) :where(h4.wp-block-heading) + * {
  margin-top: var(--space-after-h4);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-fin-d-pro-merit-heading) + :where(p) {
  margin-top: var(--space-after-merit-heading);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-fin-d-pro-merits) + :where(p) {
  margin-top: var(--space-after-merits);
}
:is(.entry-content, .editor-styles-wrapper) :where(.wp-block-fin-d-pro-detail-link) + :where(.wp-block-fin-d-pro-detail-link) {
  margin-top: var(--space-detail-links);
}

/* 公開の画面: 本文の左右に余白を取り、見出し 2 の箱と囲みメリットはその外まで広げる（SP は広げない）。
   エディターはブロックを本体の幅で中央に並べるので、広げない */
.entry-content {
  padding-inline: 20px;
}
.entry-content > :is(h2.wp-block-heading:not(.is-style-fin-d-pro-check), .wp-block-fin-d-pro-merits) {
  margin-inline: -20px;
}

/* ---------- 見出し ---------- */

:is(.entry-content, .editor-styles-wrapper) h2.wp-block-heading {
  padding: clamp(13px, calc(22 * var(--unit)), 22px) clamp(22px, calc(42 * var(--unit)), 42px) clamp(12px, calc(24 * var(--unit)), 24px);
  border: var(--line);
  border-radius: clamp(20px, calc(30 * var(--unit)), 30px);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--font-h2);
  font-weight: 700;
}
:is(.entry-content, .editor-styles-wrapper) :is(h3, h4).wp-block-heading {
  position: relative;
  font-weight: 700;
}
:is(.entry-content, .editor-styles-wrapper) h3.wp-block-heading {
  padding-left: clamp(32px, calc(48 * var(--unit)), 48px);
  font-size: var(--font-h3);
}
:is(.entry-content, .editor-styles-wrapper) h4.wp-block-heading {
  padding-left: clamp(16px, calc(27 * var(--unit)), 27px);
  font-size: var(--font-h4);
}
:is(.entry-content, .editor-styles-wrapper) :is(h3, h4).wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  background: no-repeat 0 0 / 100% 100%;
}
:is(.entry-content, .editor-styles-wrapper) h3.wp-block-heading::before {
  top: 4px;
  width: clamp(24px, calc(34 * var(--unit)), 34px);
  height: clamp(23px, calc(32 * var(--unit)), 32px);
  background-image: url(images/icn_single_h3_01.svg);
}
:is(.entry-content, .editor-styles-wrapper) h4.wp-block-heading::before {
  top: 2px;
  width: clamp(10px, calc(12 * var(--unit)), 12px);
  height: clamp(19px, calc(25 * var(--unit)), 25px);
  background-image: url(images/icn_single_h4_01.svg);
}

/* チェックマーク付き見出し: 段（2〜4）の文字の大きさのまま、段の飾り（見出し 2 の箱など）をチェックマークに替える。
   マークは 1 行目の縦の中央に置く（lh の使えないブラウザは上から 6px） */
:is(.entry-content, .editor-styles-wrapper) .wp-block-heading.is-style-fin-d-pro-check {
  --check-height: clamp(16px, calc(21 * var(--unit)), 21px);
  position: relative;
  padding: 0 0 0 clamp(32px, calc(41 * var(--unit)), 41px);
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-heading.is-style-fin-d-pro-check::before {
  content: "";
  position: absolute;
  top: 6px;
  top: calc((1lh - var(--check-height)) / 2);
  left: 0;
  width: clamp(21px, calc(26 * var(--unit)), 26px);
  height: var(--check-height);
  background: url(images/icn_single_check_01.svg) no-repeat 0 0 / 100% 100%;
}

/* ---------- 段落・リンク・強調・注釈文 ---------- */

:is(.entry-content, .editor-styles-wrapper) p {
  font-size: var(--font-body);
  line-height: 2;
}
:is(.entry-content, .editor-styles-wrapper) :where(p, li, td, th, figcaption) a {
  background: url(images/line_dot_link_01.svg) repeat-x 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}
:is(.entry-content, .editor-styles-wrapper) :where(p, .wp-block-fin-d-pro-merit__body) strong {
  border-bottom: 2px solid var(--color-accent);
  background: linear-gradient(transparent 70%, var(--color-accent) 70%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:is(.entry-content, .editor-styles-wrapper) p.is-style-fin-d-pro-note {
  font-size: var(--font-note);
}

/* ---------- リスト ---------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-list {
  font-size: var(--font-body);
  line-height: 1.8;
}
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list {
  padding: 0;
  list-style: none;
}
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list > li {
  position: relative;
  padding-left: clamp(20px, calc(28 * var(--unit)), 28px);
}
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list > li::before {
  content: "";
  position: absolute;
  top: clamp(8px, calc(10 * var(--unit)), 10px);
  left: 0;
  width: clamp(10px, calc(12 * var(--unit)), 12px);
  height: clamp(10px, calc(12 * var(--unit)), 12px);
  background: url(images/icn_single_ul_01.svg) no-repeat 0 0 / 100% 100%;
}
/* 番号付きのリスト: 番号は主色の太字（本体の「開始の番号」「逆順」の設定がそのまま効く） */
:is(.entry-content, .editor-styles-wrapper) ol.wp-block-list {
  padding-left: clamp(20px, calc(28 * var(--unit)), 28px);
  list-style: decimal;
}
:is(.entry-content, .editor-styles-wrapper) ol.wp-block-list > li::marker {
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- 画像 ---------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-image {
  width: min(100%, 500px);
  margin-inline: auto;
  text-align: center;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-image.is-style-fin-d-pro-full {
  width: 100%;
}
:is(.entry-content, .editor-styles-wrapper) .wp-element-caption {
  margin-top: 14px;
  font-size: var(--font-caption);
}

/* ---------- 表（テーブルA・テーブルB） ---------- */

:is(.entry-content, .editor-styles-wrapper) :is(.is-style-fin-d-pro-table-a, .is-style-fin-d-pro-table-b) :is(td, th) {
  border: 0;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-table .wp-element-caption {
  margin-top: 10px;
}

/* テーブルA: 行ごとに線を引き、偶数の行は淡い色。縦は上に寄せる */
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-a table {
  border-top: var(--line);
  background: var(--color-surface);
  font-size: 16px;
  line-height: 1.4;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-a tr {
  border-bottom: var(--line);
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-a :is(td, th) {
  padding: 27px 20px;
  vertical-align: top;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-a thead :is(td, th) {
  padding: 26px 20px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 18px;
  font-weight: 700;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-a tbody tr:nth-child(even) {
  background: var(--color-primary-pale);
}

/* テーブルB: 列の間に 5px の隙間（左端の帯）。1 列目は行見出しとして白。縦は中央に寄せる */
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b table {
  font-size: 14px;
  font-weight: 700;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b :is(td, th) {
  padding: 18px 10px 16px 15px;
  background: linear-gradient(to right, var(--color-bg) 5px, var(--color-primary-pale) 5px);
  vertical-align: middle;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b thead :is(td, th) {
  box-sizing: border-box;
  height: 79px;
  padding: 19px 10px 15px 15px;
  background: linear-gradient(to right, var(--color-bg) 5px, var(--color-primary) 5px);
  color: var(--color-surface);
  line-height: 1.4;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b thead :is(td, th):first-child {
  background: var(--color-primary);
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b thead :is(td, th):empty {
  background: none;
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b tbody tr {
  border-bottom: 2px solid var(--color-text);
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b tbody :is(td, th):first-child {
  padding: 18px 11px 16px 16px;
  background: var(--color-surface);
}
:is(.entry-content, .editor-styles-wrapper) .is-style-fin-d-pro-table-b tbody :is(td, th):first-child + :is(td, th) {
  background: linear-gradient(to right, var(--color-surface) 5px, var(--color-primary-pale) 5px);
}
/* 行見出しは左寄せ。本体の列の寄せ（:root .has-text-align-*）が勝つよう、詳細度を下げる */
:where(.entry-content, .editor-styles-wrapper) :where(.is-style-fin-d-pro-table-b) tbody :where(td, th):first-child {
  text-align: left;
}

/* ---------- はじめに ---------- */

/* 左に人のイラスト、右に囲み。囲みとイラストは、固定の文字（はじめに）の p の疑似要素で描く */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface {
  position: relative;
  isolation: isolate;
  min-height: 237px;
  padding-left: 100px;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label::before {
  content: "";
  position: absolute;
  inset: 0 0 0 100px;
  z-index: -1;
  border: var(--line);
  border-radius: var(--radius-box);
  background: var(--color-surface);
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label::after {
  content: "";
  position: absolute;
  bottom: -19px;
  left: -10px;
  width: 121px;
  height: 262px;
  background: url(images/img_single_preface_01.svg) no-repeat 0 0 / 100% 100%;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label {
  margin: 0;
  padding: calc(3px + clamp(22px, calc(29 * var(--unit)), 29px)) calc(3px + clamp(28px, calc(47 * var(--unit)), 47px)) 0;
  color: var(--color-primary);
  font-size: clamp(16px, calc(18 * var(--unit)), 18px);
  font-weight: 700;
  line-height: 1.5;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__body {
  margin: 0;
  padding: clamp(9px, calc(10 * var(--unit)), 10px) calc(3px + clamp(28px, calc(47 * var(--unit)), 47px)) calc(3px + clamp(20px, calc(38 * var(--unit)), 38px));
  line-height: 1.75;
}

/* ---------- 詳細リンク ---------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link {
  position: relative;
  display: block;
  padding: clamp(14px, calc(17 * var(--unit)), 17px) clamp(45px, calc(65 * var(--unit)), 65px) clamp(14px, calc(16 * var(--unit)), 16px) clamp(18px, calc(27 * var(--unit)), 27px);
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-body);
  font-weight: 700;
  text-decoration: none;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(18px, calc(36 * var(--unit)), 36px);
  width: clamp(17px, calc(20 * var(--unit)), 20px);
  height: clamp(12px, calc(13 * var(--unit)), 13px);
  background: url(images/icn_single_detail_01.svg) no-repeat 0 0 / 100% 100%;
  transform: translateY(-50%);
}

/* ---------- ステップ ---------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-steps {
  padding: 0;
  list-style: none;
  counter-reset: fin-d-pro-step;
}
/* 左に番号、右に見出しと本文 */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(24px, calc(30 * var(--unit)), 30px);
  padding: clamp(16px, calc(24 * var(--unit)), 24px) clamp(24px, calc(30 * var(--unit)), 30px);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  counter-increment: fin-d-pro-step;
}
/* 番号（STEP1・STEP2…）。手で入れず、並びから数える */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step::before {
  content: "STEP" counter(fin-d-pro-step);
  grid-row: span 2;
  color: var(--color-primary);
  font-size: var(--font-ui);
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step__heading {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-ui);
  font-weight: 700;
  line-height: 1.4;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step__body {
  grid-column: 2;
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
/* 手順の間の矢印（2 つ目からの手順の上。見出しの p の疑似要素で、手順の li を基準に置く） */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step + .wp-block-fin-d-pro-step {
  margin-top: 42px;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step + .wp-block-fin-d-pro-step > .wp-block-fin-d-pro-step__heading::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 22px;
  height: 12px;
  margin-left: -11px;
  background: url(images/icn_single_flow_01.svg) no-repeat 0 0 / 100% 100%;
}

/* ---------- 囲みメリット・見出しメリット ---------- */

:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merits {
  padding: clamp(5px, calc(12 * var(--unit)), 12px) clamp(22px, calc(37 * var(--unit)), 37px) 23px;
  border: var(--line);
  border-radius: clamp(15px, calc(40 * var(--unit)), 40px);
  background: var(--color-surface);
}
/* メリットはラベルの下に本文（1101px 以上は横に並べる）。2 つ目からの上に点線の区切り */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit {
  display: flex;
  flex-direction: column;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit + .wp-block-fin-d-pro-merit {
  background: url(images/line_dot_02.svg) repeat-x 0 0;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit__label {
  align-self: flex-start;
  margin: clamp(26px, calc(34 * var(--unit)), 34px) 0 0;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit__body {
  padding: 10px 0 clamp(13px, calc(23 * var(--unit)), 23px);
  font-size: var(--font-body);
  font-weight: 500;
  line-height: 2;
}
/* 見出しメリット: 左にラベル、右に見出し */
:is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit-heading {
  display: flex;
  align-items: center;
  column-gap: clamp(16px, calc(26 * var(--unit)), 26px);
  font-size: var(--font-h3);
  font-weight: 700;
}
/* ラベルの丸い札（右上に二重丸） */
:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-fin-d-pro-merit__label, .wp-block-fin-d-pro-merit-heading__label) {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px;
  padding: 0 20px;
  border: var(--line);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: clamp(14px, calc(16 * var(--unit)), 16px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-fin-d-pro-merit__label, .wp-block-fin-d-pro-merit-heading__label)::before {
  content: "";
  position: absolute;
  top: -13px;
  right: -13px;
  width: 32px;
  height: 31px;
  background: url(images/icn_single_box_01.svg) no-repeat 0 0 / 100% 100%;
}

/* ---------- マウスを載せた時（タッチの画面では変えない） ---------- */

@media (hover: hover) {
  :is(.entry-content, .editor-styles-wrapper) :where(p, li, td, th, figcaption) a:hover {
    background-image: url(images/line_dot_link_01_on.svg);
    color: var(--color-text);
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link:hover {
    background-color: transparent;
    color: var(--color-primary);
  }
}

/* ---------- 動き（動きを減らす設定の人には、動かさない） ---------- */

@media (prefers-reduced-motion: no-preference) {
  :is(.entry-content, .editor-styles-wrapper) :where(p, li, td, th, figcaption) a,
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link {
    transition: color 0.3s ease;
  }
}

/* ---------- 1101px 以上: 囲みメリットのラベルと本文を横に並べる ---------- */

@media (min-width: 1101px) {
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit {
    flex-direction: row;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit__label {
    margin-bottom: min(calc(23 * var(--unit)), 23px);
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit__body {
    flex: 1;
    padding: min(calc(40 * var(--unit)), 40px) 0 min(calc(23 * var(--unit)), 23px) min(calc(26 * var(--unit)), 26px);
  }
}

/* ---------- 1100px 以下: 表を 760px にして横にスクロールさせ、上に注意の文を出す（文は保存する HTML に入れない）。769〜1100px は
   2 列のままで本文の列が 760px より狭くなるため（site-spec §6）。横のスクロールは本体の表のブロックの CSS が持つ ---------- */

@media (max-width: 1100px) {
  :is(.entry-content, .editor-styles-wrapper) :is(.is-style-fin-d-pro-table-a, .is-style-fin-d-pro-table-b) {
    padding-bottom: 10px;
    scrollbar-color: #c4c4c4 #e3e3e3;
  }
  :is(.entry-content, .editor-styles-wrapper) :is(.is-style-fin-d-pro-table-a, .is-style-fin-d-pro-table-b) table {
    width: 760px;
  }
  :is(.entry-content, .editor-styles-wrapper) :is(.is-style-fin-d-pro-table-a, .is-style-fin-d-pro-table-b)::before {
    content: "この表は横にスクロールできます";
    position: sticky;
    left: 0;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
    text-align: right;
  }
}

/* ---------- SP（768px 以下） ---------- */

@media (max-width: 768px) {
  /* 768px 以下でも式が SP の値にならない物だけ（ほかの文字と余白は、式が SP の値を返す） */
  :is(.entry-content, .editor-styles-wrapper) {
    --font-caption: 12px;
    --space-h4: 24px;
    --space-merit-heading: 32px;
    --space-preface: 30px;
    --space-item: 6px;
    --space-paragraphs: 2em;
    --space-after-h4: 9px;
    --space-after-merit-heading: 16px;
    --space-after-merits: 24px;
    --space-detail-links: 8px;
  }
  .entry-content {
    padding-inline: 0;
  }
  .entry-content > :is(h2.wp-block-heading:not(.is-style-fin-d-pro-check), .wp-block-fin-d-pro-merits) {
    margin-inline: 0;
  }

  /* 見出し */
  :is(.entry-content, .editor-styles-wrapper) h2.wp-block-heading {
    padding: 13px 22px 12px;
  }
  :is(.entry-content, .editor-styles-wrapper) h3.wp-block-heading::before {
    top: 3px;
  }
  :is(.entry-content, .editor-styles-wrapper) h4.wp-block-heading::before {
    top: 1px;
    background-image: url(images/icn_single_h4_01_sp.svg);
  }

  /* 強調・リスト・画像 */
  :is(.entry-content, .editor-styles-wrapper) :where(p, .wp-block-fin-d-pro-merit__body) strong {
    border-bottom-width: 1px;
    background-image: linear-gradient(transparent 65%, var(--color-accent) 65%);
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-list {
    line-height: 2;
  }
  :is(.entry-content, .editor-styles-wrapper) ul.wp-block-list > li::before {
    top: 10px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-image {
    width: min(100%, 330px);
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-element-caption {
    margin-top: 12px;
  }

  /* はじめに */
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface {
    padding-left: 40px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label::before {
    left: 40px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label::after {
    bottom: 0;
    left: -8px;
    width: 81px;
    height: 175px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__label {
    font-size: 14px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-preface__body {
    padding-bottom: 23px;
  }

  /* 詳細リンク */
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link {
    border-width: 2px;
    line-height: 1.4;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-detail-link__link::after {
    right: 18px;
  }

  /* ステップ: 番号・見出し・本文を縦に積む */
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step {
    grid-template-columns: 1fr;
    padding: 16px 24px 25px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step::before {
    grid-row: auto;
    white-space: normal;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step__heading {
    grid-column: 1;
    margin-top: 11px;
    line-height: 1.8;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step__body {
    grid-column: 1;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.8;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step + .wp-block-fin-d-pro-step {
    margin-top: 40px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-step + .wp-block-fin-d-pro-step > .wp-block-fin-d-pro-step__heading::before {
    top: -26px;
  }

  /* 囲みメリット・見出しメリット */
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merits {
    padding: 5px 22px 23px;
    border-width: 2px;
    border-radius: 15px;
  }
  :is(.entry-content, .editor-styles-wrapper) .wp-block-fin-d-pro-merit__body {
    padding: 7px 0 13px;
  }
  :is(.entry-content, .editor-styles-wrapper) :is(.wp-block-fin-d-pro-merit__label, .wp-block-fin-d-pro-merit-heading__label) {
    height: 38px;
    font-size: 12px;
  }
  :is(.entry-content, .editor-styles-wrapper) :is(.wp-block-fin-d-pro-merit__label, .wp-block-fin-d-pro-merit-heading__label)::before {
    top: -12px;
    right: -12px;
    width: 26px;
    height: 25px;
  }
}