/* WUW Editor Toolkit: 記事パーツのスタイル。公開ページとブロックエディターの本文で共用する。
 *
 * 設計
 * - カスケードレイヤー内の !important は、レイヤー外（テーマ・追加CSS）の通常の宣言と
 *   !important の両方に優先する。詳細度を競わずにテーマより優先させるため、宣言はすべて
 *   !important で書く。
 * - 「1. 土台」でテーマが段落・リストなどに付ける装飾を打ち消し、以降で部品ごとの見た目を決める。
 *   土台は :where() で詳細度を0にしてあり、部品の指定が常に勝つ。
 * - 書体・字間・本文リンクの色はテーマから継承する。文字サイズは記事本文を基準にした em で決める。
 * - 編集画面がブロックの選択表示に使う ::after は、ブロックになる要素（外枠・リスト・項目）では使わない。
 * - アイコンはSVGをCSSに埋め込み、--wuw-icon で差し替える。配信元が別ドメインでもマスクとして使える。
 * - 旧SUWのクラス（suw-）にも同じ見た目を適用する。class名と保存済みのHTMLは変更しない。
 *
 * 目次: 0. 色と寸法 / 1. 土台 / 2. 見出し / 3. 情報ボックス / 4. 要点まとめ / 5. 手順リスト
 *       6. 関連リンク / 7. FAQ / 8. 装飾リスト / 9. 料金目安表 / 10. 文字装飾 / 11. 狭い画面
 */
@layer wuw-editor-toolkit {
  /* ---------------------------------------------------------------------------
   * 0. 色と寸法
   * ------------------------------------------------------------------------- */
  /* :is() は中で最も高い詳細度を持つため、表は別のセレクターに分けて種類別の色が勝つようにする。 */
  :is(.wuw-editor-box, .suw-editor-box, .wuw-summary-list, .suw-summary-list, .wuw-step-list, .suw-step-list,
      .wuw-related-links, .suw-related-links, .wuw-faq, .suw-faq),
  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) {
    --wuw-ink: #24333e !important;       /* 見出し */
    --wuw-text: #3e4b55 !important;      /* 本文 */
    --wuw-mute: #64717b !important;      /* 補助 */
    --wuw-line: #dce3e7 !important;      /* 罫線 */
    --wuw-surface: #fff !important;      /* 白い面 */
    --wuw-wash: #f5f7f8 !important;      /* 淡い面 */
    --wuw-accent: #245f7a !important;    /* 強調色 */
    --wuw-tint: #f5f7f8 !important;      /* 強調色の淡い面 */
    --wuw-radius: 4px !important;
  }

  :is(.wuw-editor-box--note, .suw-editor-box--note) {
    --wuw-accent: #5a6577 !important;
    --wuw-tint: #f4f6f8 !important;
  }

  :is(.wuw-editor-box--warning, .suw-editor-box--warning) {
    --wuw-accent: #87610f !important;
    --wuw-tint: #faf8f2 !important;
  }

  :is(.wuw-editor-box--check, .suw-editor-box--check) {
    --wuw-accent: #337052 !important;
    --wuw-tint: #f5f8f6 !important;
  }

  /* ---------------------------------------------------------------------------
   * 1. 土台
   * ------------------------------------------------------------------------- */
  /* パーツの外枠。横方向の余白と最大幅はテーマとエディターに任せる。 */
  :is(.wuw-editor-box, .suw-editor-box, .wuw-summary-list, .suw-summary-list, .wuw-step-list, .suw-step-list,
      .wuw-related-links, .suw-related-links, .wuw-faq, .suw-faq) {
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    min-width: 0 !important;
    margin-block: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--wuw-surface) !important;
    box-shadow: none !important;
    color: var(--wuw-text) !important;
    font-size: 1em !important;
    line-height: 1.8 !important;
    text-align: start !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    overflow-wrap: anywhere !important;
  }

  /* パーツの内側の要素。テーマが p・ul・ol・li に付ける余白・枠・背景を打ち消す。 */
  :where(.wuw-editor-box__title, .suw-editor-box__title, .wuw-summary-list__title, .suw-summary-list__title,
         .wuw-step-list__title, .suw-step-list__title, .wuw-related-links__title, .suw-related-links__title,
         .wuw-faq__title, .suw-faq__title,
         .wuw-editor-box__body, .suw-editor-box__body, .wuw-summary-list__body, .suw-summary-list__body,
         .wuw-step-list__body, .suw-step-list__body, .wuw-related-links__body, .suw-related-links__body,
         .wuw-faq__items, .suw-faq__items, .wuw-faq__item, .suw-faq__item,
         .wuw-faq__question, .suw-faq__question, .wuw-faq__answer, .suw-faq__answer,
         .wuw-faq__label, .suw-faq__label, .wuw-faq__question-text, .suw-faq__question-text,
         .wuw-faq__answer-text, .suw-faq__answer-text),
  :where(.wuw-editor-box__body, .suw-editor-box__body, .wuw-summary-list__body, .suw-summary-list__body,
         .wuw-step-list__body, .suw-step-list__body, .wuw-related-links__body, .suw-related-links__body)
    :where(p, ul, ol, li) {
    box-sizing: border-box !important;
    float: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    text-indent: 0 !important;
    text-shadow: none !important;
  }

  /* テーマが段落やリスト項目の前後に差し込む記号を消す。
     編集画面でブロックになる要素の ::after は選択表示に使われるため、対象から外す。 */
  :where(.wuw-faq__items, .suw-faq__items, .wuw-faq__item, .suw-faq__item,
         .wuw-faq__question, .suw-faq__question, .wuw-faq__answer, .suw-faq__answer,
         .wuw-faq__label, .suw-faq__label, .wuw-faq__question-text, .suw-faq__question-text,
         .wuw-faq__answer-text, .suw-faq__answer-text)::before,
  :where(.wuw-faq__items, .suw-faq__items, .wuw-faq__item, .suw-faq__item,
         .wuw-faq__question, .suw-faq__question, .wuw-faq__answer, .suw-faq__answer,
         .wuw-faq__label, .suw-faq__label, .wuw-faq__question-text, .suw-faq__question-text,
         .wuw-faq__answer-text, .suw-faq__answer-text)::after,
  :where(.wuw-editor-box__body, .suw-editor-box__body, .wuw-summary-list__body, .suw-summary-list__body,
         .wuw-step-list__body, .suw-step-list__body, .wuw-related-links__body, .suw-related-links__body)
    :where(p)::before,
  :where(.wuw-editor-box__body, .suw-editor-box__body, .wuw-summary-list__body, .suw-summary-list__body,
         .wuw-step-list__body, .suw-step-list__body, .wuw-related-links__body, .suw-related-links__body)
    :where(p, ul, ol, li):where(:not(.block-editor-block-list__block))::after,
  ul:where(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
           .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash)
    :where(li):where(:not(.block-editor-block-list__block))::after {
    content: none !important;
  }

  /* 入れ子のリストは、通常の記号と番号で表示する。 */
  :where(.wuw-summary-list__body, .suw-summary-list__body, .wuw-step-list__body, .suw-step-list__body,
         .wuw-related-links__body, .suw-related-links__body) :where(li) :where(ul, ol) {
    margin: 6px 0 0 !important;
    padding: 0 0 0 1.4em !important;
  }

  :where(.wuw-summary-list__body, .suw-summary-list__body, .wuw-step-list__body, .suw-step-list__body,
         .wuw-related-links__body, .suw-related-links__body) :where(li) :where(ul) {
    list-style: disc !important;
  }

  :where(.wuw-summary-list__body, .suw-summary-list__body, .wuw-step-list__body, .suw-step-list__body,
         .wuw-related-links__body, .suw-related-links__body) :where(li) :where(ol) {
    list-style: decimal !important;
  }

  :where(.wuw-summary-list__body, .suw-summary-list__body, .wuw-step-list__body, .suw-step-list__body,
         .wuw-related-links__body, .suw-related-links__body) :where(li li) {
    display: list-item !important;
    margin: 0 0 4px !important;
    line-height: 1.75 !important;
    list-style: inherit !important;
  }

  :where(.wuw-summary-list__body, .suw-summary-list__body, .wuw-step-list__body, .suw-step-list__body,
         .wuw-related-links__body, .suw-related-links__body) :where(li li)::before {
    content: none !important;
  }

  /* ---------------------------------------------------------------------------
   * 2. 見出し（アイコン + 太字）
   * ------------------------------------------------------------------------- */
  :is(.wuw-editor-box__title, .suw-editor-box__title, .wuw-summary-list__title, .suw-summary-list__title,
      .wuw-step-list__title, .suw-step-list__title, .wuw-related-links__title, .suw-related-links__title) {
    position: relative !important;
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 0 0 36px !important;
    color: var(--wuw-ink) !important;
    font-size: 1.125em !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-align: start !important;
  }

  /* アイコンは1行目の中央に置く（行の高さ 1.6em の半分 - アイコンの半分）。 */
  :is(.wuw-editor-box__title, .suw-editor-box__title, .wuw-summary-list__title, .suw-summary-list__title,
      .wuw-step-list__title, .suw-step-list__title, .wuw-related-links__title, .suw-related-links__title)::before {
    content: '' !important;
    position: absolute !important;
    top: calc(0.8em - 11px) !important;
    font-size: 1em !important;
    left: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--wuw-accent) !important;
    box-shadow: none !important;
    transform: none !important;
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21.5h4'/%3E%3Cpath d='M8.5 14.5a6 6 0 1 1 7 0c-.8.6-1.2 1.4-1.2 2.5H9.7c0-1.1-.4-1.9-1.2-2.5Z'/%3E%3C/svg%3E") !important;
    -webkit-mask: var(--wuw-icon) center / contain no-repeat !important;
    mask: var(--wuw-icon) center / contain no-repeat !important;
  }

  :is(.wuw-editor-box__title, .suw-editor-box__title, .wuw-summary-list__title, .suw-summary-list__title,
      .wuw-step-list__title, .suw-step-list__title, .wuw-related-links__title, .suw-related-links__title)::after {
    content: none !important;
  }

  /* 見出しを空にしたパーツは、本文だけを表示する。 */
  :is(.wuw-editor-box__title, .suw-editor-box__title, .wuw-summary-list__title, .suw-summary-list__title,
      .wuw-step-list__title, .suw-step-list__title, .wuw-related-links__title, .suw-related-links__title):empty {
    display: none !important;
  }

  /* ---------------------------------------------------------------------------
   * 3. 情報ボックス（ポイント・補足・注意・チェック）
   * ------------------------------------------------------------------------- */
  :is(.wuw-editor-box, .suw-editor-box) {
    padding: 28px 32px 30px !important;
    border: 0 !important;
    border-radius: var(--wuw-radius) !important;
    background: var(--wuw-tint) !important;
  }

  :is(.wuw-editor-box--note, .suw-editor-box--note) > :is(.wuw-editor-box__title, .suw-editor-box__title)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E") !important;
  }

  :is(.wuw-editor-box--warning, .suw-editor-box--warning) > :is(.wuw-editor-box__title, .suw-editor-box__title)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.5 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.5a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") !important;
  }

  :is(.wuw-editor-box--check, .suw-editor-box--check) > :is(.wuw-editor-box__title, .suw-editor-box__title)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.3'/%3E%3C/svg%3E") !important;
  }

  :is(.wuw-editor-box__body, .suw-editor-box__body) {
    color: var(--wuw-text) !important;
    line-height: 1.95 !important;
  }

  :is(.wuw-editor-box__body, .suw-editor-box__body) > :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 0.8em !important;
  }

  :is(.wuw-editor-box__body, .suw-editor-box__body) > :is(ul, ol) {
    padding-left: 1.4em !important;
  }

  /* ---------------------------------------------------------------------------
   * 4. 要点まとめ
   * ------------------------------------------------------------------------- */
  :is(.wuw-summary-list, .suw-summary-list) {
    padding: 6px 0 6px 28px !important;
    border-left: 3px solid var(--wuw-accent) !important;
    background: none !important;
  }

  :is(.wuw-summary-list__title, .suw-summary-list__title) {
    margin-bottom: 20px !important;
    padding: 0 !important;
  }

  :is(.wuw-summary-list__title, .suw-summary-list__title)::before {
    content: none !important;
  }

  :is(.wuw-summary-list__body, .suw-summary-list__body) :is(ul, ol):not(li *) {
    list-style: none !important;
  }

  :is(.wuw-summary-list__body, .suw-summary-list__body) :is(ul, ol):not(li *) + :is(ul, ol) {
    margin-top: 0.85em !important;
  }

  :is(.wuw-summary-list__body, .suw-summary-list__body) :is(ul, ol):not(li *) > li {
    position: relative !important;
    display: list-item !important;
    margin: 0 0 0.85em !important;
    padding: 0 0 0 1.75em !important;
    line-height: 1.8 !important;
    list-style: none !important;
  }

  :is(.wuw-summary-list__body, .suw-summary-list__body) :is(ul, ol):not(li *) > li:last-child {
    margin-bottom: 0 !important;
  }

  /* スタイル未指定のリストは、点と番号で表示する。 */
  :is(.wuw-summary-list__body, .suw-summary-list__body) :is(ul, ol):not(li *) > li::before {
    content: '' !important;
    position: absolute !important;
    top: calc(0.9em - 3px) !important;
    font-size: 1em !important;
    left: 0.4em !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wuw-accent) !important;
    transform: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  :is(.wuw-summary-list__body, .suw-summary-list__body) ol:not(li *) > li::before {
    content: counter(list-item) '.' !important;
    top: 0 !important;
    left: 0 !important;
    width: 1.4em !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--wuw-accent) !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------------------------
   * 5. 手順リスト（順序と各手順のまとまり）
   * ------------------------------------------------------------------------- */
  :is(.wuw-step-list__title, .suw-step-list__title) {
    margin-bottom: 28px !important;
    padding: 0 !important;
  }

  :is(.wuw-step-list__title, .suw-step-list__title)::before {
    content: none !important;
  }

  :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) {
    list-style: none !important;
  }

  :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) + :is(ol, ul) {
    margin-top: 18px !important;
  }

  /* 左側に番号、右側に本文をそろえる。編集用の ::after は空けておく。 */
  :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) > li {
    position: relative !important;
    display: list-item !important;
    margin: 0 !important;
    padding: 0 0 28px 48px !important;
    background: none !important;
    line-height: 1.9 !important;
    list-style: none !important;
  }

  :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) > li:last-child {
    padding-bottom: 0 !important;
    background: none !important;
  }

  :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) > li::before {
    content: counter(list-item) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--wuw-accent) !important;
    font-size: 1.25em !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
    line-height: 1.52 !important;
    text-align: start !important;
    text-indent: 0 !important;
    transform: none !important;
    -webkit-mask: none !important;
    mask: none !important;
  }

  /* 番号なしのリストに切り替えた場合は、点を表示する。 */
  :is(.wuw-step-list__body, .suw-step-list__body) ul:not(li *) > li::before {
    content: '' !important;
    background: var(--wuw-accent) !important;
    border-radius: 50% !important;
    top: calc(0.95em - 4px) !important;
    left: calc(0.875em - 5px) !important;
    width: 8px !important;
    height: 8px !important;
    font-size: 1em !important;
  }

  /* ---------------------------------------------------------------------------
   * 6. 関連リンク
   * ------------------------------------------------------------------------- */
  :is(.wuw-related-links, .suw-related-links) {
    padding: 28px 0 0 !important;
    border-top: 1px solid var(--wuw-line) !important;
    background: none !important;
  }

  :is(.wuw-related-links__title, .suw-related-links__title) {
    margin-bottom: 20px !important;
    padding: 0 !important;
  }

  :is(.wuw-related-links__title, .suw-related-links__title)::before {
    content: none !important;
  }

  :is(.wuw-related-links__body, .suw-related-links__body) :is(ul, ol):not(li *) {
    list-style: none !important;
  }

  :is(.wuw-related-links__body, .suw-related-links__body) :is(ul, ol):not(li *) > li {
    position: relative !important;
    display: list-item !important;
    margin: 0 !important;
    padding: 14px 0 14px 28px !important;
    border-top: 1px solid var(--wuw-line) !important;
    line-height: 1.6 !important;
    list-style: none !important;
  }

  :is(.wuw-related-links__body, .suw-related-links__body) > :is(ul, ol):first-child > li:first-child,
  :is(.wuw-related-links__body, .suw-related-links__body) > * > * > :is(ul, ol):first-child > li:first-child {
    border-top-color: transparent !important;
  }

  :is(.wuw-related-links__body, .suw-related-links__body) :is(ul, ol):not(li *) > li::before {
    content: '' !important;
    position: absolute !important;
    top: calc(10px + 0.8em - 8px) !important;
    font-size: 1em !important;
    left: 0 !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--wuw-accent) !important;
    transform: none !important;
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14'/%3E%3Cpath d='m12.8 6.2 5.8 5.8-5.8 5.8'/%3E%3C/svg%3E") !important;
    -webkit-mask: var(--wuw-icon) center / contain no-repeat !important;
    mask: var(--wuw-icon) center / contain no-repeat !important;
  }

  /* ---------------------------------------------------------------------------
   * 7. FAQ
   * ------------------------------------------------------------------------- */
  :is(.wuw-faq, .suw-faq) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }

  /* FAQの見出しは保存内容に残し、表示しない。章の見出しは直前の見出しブロックで付ける。 */
  :is(.wuw-faq__title, .suw-faq__title) {
    display: none !important;
  }

  /* 質問のまとまりを、上下の余白と区切りで見つけやすくする。 */
  :is(.wuw-faq__item, .suw-faq__item) {
    display: block !important;
    margin: 0 !important;
    padding: 28px 0 32px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wuw-line) !important;
    background: var(--wuw-surface) !important;
  }

  :is(.wuw-faq__question, .suw-faq__question),
  :is(.wuw-faq__answer, .suw-faq__answer) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    line-height: 1.9 !important;
  }

  :is(.wuw-faq__answer, .suw-faq__answer) {
    margin-top: 14px !important;
  }

  /* Q・Aの位置を固定し、複数行の質問と回答の左端をそろえる。 */
  :is(.wuw-faq__label, .suw-faq__label) {
    display: inline-flex !important;
    flex: 0 0 28px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--wuw-accent) !important;
    font-size: 1.125em !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.8 !important;
  }

  :is(.wuw-faq__answer, .suw-faq__answer) > :is(.wuw-faq__label, .suw-faq__label) {
    background: none !important;
    color: var(--wuw-mute) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
  }

  :is(.wuw-faq__question-text, .suw-faq__question-text),
  :is(.wuw-faq__answer-text, .suw-faq__answer-text) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.9 !important;
  }

  :is(.wuw-faq__question-text, .suw-faq__question-text) {
    color: var(--wuw-ink) !important;
    font-size: 1.0625em !important;
    font-weight: 700 !important;
  }

  :is(.wuw-faq__answer-text, .suw-faq__answer-text) {
    color: var(--wuw-text) !important;
    font-weight: 400 !important;
    white-space: pre-line !important;
  }

  /* ---------------------------------------------------------------------------
   * 8. 装飾リスト（チェック・ひし形・矢印・ダッシュ）
   * ------------------------------------------------------------------------- */
  ul:is(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
        .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    list-style: none !important;
  }

  ul:is(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
        .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash) li:not(ol > li) {
    position: relative !important;
    display: list-item !important;
    margin: 0 0 0.85em !important;
    padding: 0 0 0 1.75em !important;
    border: 0 !important;
    background: none !important;
    line-height: 1.8 !important;
    list-style: none !important;
    text-indent: 0 !important;
  }

  ul:is(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
        .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash) li:not(ol > li):last-child {
    margin-bottom: 0 !important;
  }

  ul:is(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
        .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash) li > :is(ul, ol) {
    margin: 0.5em 0 0 !important;
  }

  /* 記号は1行目の中央に置き、色は文字色か指定した記号色を使う。 */
  ul:is(.is-style-wuw-check, .is-style-suw-check, .is-style-wuw-diamond, .is-style-suw-diamond,
        .is-style-wuw-arrow, .is-style-suw-arrow, .is-style-wuw-dash, .is-style-suw-dash) li:not(ol > li)::before {
    content: '' !important;
    position: absolute !important;
    top: calc(0.9em - 0.5em) !important;
    font-size: 1em !important;
    left: 0.125em !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--wuw-list-marker-color, var(--suw-list-marker-color, var(--wuw-marker-default, currentColor))) !important;
    transform: none !important;
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.6 4.9 4.9L19.5 6.8'/%3E%3C/svg%3E") !important;
    -webkit-mask: var(--wuw-icon) center / contain no-repeat !important;
    mask: var(--wuw-icon) center / contain no-repeat !important;
  }

  ul:is(.is-style-wuw-diamond, .is-style-suw-diamond) li:not(ol > li)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 5.6 18.4 12 12 18.4 5.6 12Z'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: 0.7em !important;
    mask-size: 0.7em !important;
  }

  ul:is(.is-style-wuw-arrow, .is-style-suw-arrow) li:not(ol > li)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14'/%3E%3Cpath d='m12.8 6.2 5.8 5.8-5.8 5.8'/%3E%3C/svg%3E") !important;
  }

  ul:is(.is-style-wuw-dash, .is-style-suw-dash) li:not(ol > li)::before {
    --wuw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
  }

  /* ---------------------------------------------------------------------------
   * 9. 料金目安表
   * ------------------------------------------------------------------------- */
  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) {
    /* 最大幅はテーマとエディターに任せる（100%にすると編集画面で本文の幅を超える）。 */
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wuw-line) !important;
    border-radius: var(--wuw-radius) !important;
    background: var(--wuw-surface) !important;
    box-shadow: none !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table {
    width: 100% !important;
    min-width: 620px !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-radius: 0 !important;
    border-spacing: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--wuw-text) !important;
    font-size: 0.9375em !important;
    line-height: 1.7 !important;
    table-layout: auto !important;
  }

  /* 列幅は表ブロックの「表のセル幅を固定」の設定に従わせ、編集画面と同じにする。 */
  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table.has-fixed-layout {
    table-layout: fixed !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table :is(thead, tbody, tfoot, tr) {
    border: 0 !important;
    background: none !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table :is(th, td) {
    padding: 22px 24px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--wuw-line) !important;
    background: none !important;
    color: inherit !important;
    font-weight: 400 !important;
    text-align: start !important;
    vertical-align: top !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table th {
    color: var(--wuw-ink) !important;
    font-weight: 700 !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table thead th {
    padding-block: 18px !important;
    background: var(--wuw-wash) !important;
    font-size: 0.9333em !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table > :last-child > tr:last-child > :is(th, td) {
    border-bottom: 0 !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table tfoot :is(th, td) {
    border-top: 1px solid var(--wuw-line) !important;
  }

  .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) :is(figcaption, .wp-element-caption) {
    margin: 0 !important;
    padding: 16px 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--wuw-line) !important;
    background: none !important;
    color: var(--wuw-mute) !important;
    font-size: 0.8125em !important;
    line-height: 1.65 !important;
    text-align: start !important;
  }

  /* ---------------------------------------------------------------------------
   * 10. 文字装飾（マーカー・ラベル・注記）
   *     色は本文に保存したインラインのカスタムプロパティから受け取る。
   * ------------------------------------------------------------------------- */
  :is(.wuw-editor-marker, .suw-editor-marker,
      .wuw-editor-marker-yellow, .suw-editor-marker-yellow, .wuw-editor-marker-blue, .suw-editor-marker-blue,
      .wuw-editor-marker-green, .suw-editor-marker-green, .wuw-editor-marker-pink, .suw-editor-marker-pink,
      .wuw-editor-marker-orange, .suw-editor-marker-orange) {
    display: inline !important;
    margin: 0 !important;
    padding: 0 0.12em !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(transparent 58%, var(--wuw-editor-marker-color, var(--suw-editor-marker-color, #ffe98a)) 58%) !important;
    box-shadow: none !important;
    color: inherit !important;
    font-style: inherit !important;
    text-decoration: none !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }

  :is(.wuw-editor-badge, .suw-editor-badge,
      .wuw-editor-badge-blue, .suw-editor-badge-blue, .wuw-editor-badge-gray, .suw-editor-badge-gray,
      .wuw-editor-badge-orange, .suw-editor-badge-orange, .wuw-editor-badge-green, .suw-editor-badge-green,
      .wuw-editor-badge-red, .suw-editor-badge-red) {
    display: inline-block !important;
    box-sizing: border-box !important;
    margin: 0 0.4em 0 0.15em !important;
    padding: 0.2em 0.65em !important;
    border: 1px solid var(--wuw-editor-badge-border, var(--suw-editor-badge-border, #9fc5df)) !important;
    border-radius: 5px !important;
    background: var(--wuw-editor-badge-bg, var(--suw-editor-badge-bg, #eef6fc)) !important;
    box-shadow: none !important;
    color: var(--wuw-editor-badge-color, var(--suw-editor-badge-color, #1b75bb)) !important;
    font-size: 0.75em !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    vertical-align: 0.14em !important;
    white-space: nowrap !important;
  }

  :is(.wuw-editor-note-text, .suw-editor-note-text) {
    color: #667284 !important;
    font-size: 0.875em !important;
  }

  /* ---------------------------------------------------------------------------
   * 11. 狭い画面
   * ------------------------------------------------------------------------- */
  @media (max-width: 600px) {
    :is(.wuw-editor-box, .suw-editor-box, .wuw-summary-list, .suw-summary-list, .wuw-step-list, .suw-step-list,
        .wuw-related-links, .suw-related-links, .wuw-faq, .suw-faq) {
      margin-block: 36px !important;
    }

    :is(.wuw-editor-box, .suw-editor-box) {
      padding: 24px 20px !important;
    }

    :is(.wuw-summary-list, .suw-summary-list) {
      padding: 4px 0 4px 20px !important;
    }

    :is(.wuw-related-links, .suw-related-links) {
      padding: 24px 0 0 !important;
    }

    :is(.wuw-step-list__body, .suw-step-list__body) :is(ol, ul):not(li *) > li {
      padding-left: 40px !important;
    }

    :is(.wuw-faq__item, .suw-faq__item) {
      padding: 24px 0 28px !important;
    }

    :is(.wuw-faq__question, .suw-faq__question),
    :is(.wuw-faq__answer, .suw-faq__answer) {
      gap: 12px !important;
    }

    .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table :is(th, td) {
      padding: 18px !important;
    }

    .wp-block-table:is(.is-style-wuw-price-table, .is-style-suw-price-table, .is-style-tr-nowrap, .tr-nowrap) table thead th {
      padding-block: 16px !important;
    }
  }
}