@layer reset, base, tokens, recipes, layout, utilities, state, top, page, include-debug;

@layer base {
  /*
   * ビューポートに応じた値の計算のためのベース設定
   * --clamp-root-font-size: rem計算の基準となるフォントサイズ
   */
  :root,
  :host {
    /* rem換算用の基準 */
    --clamp-root-font-size: 16;
  }

  /*
   * レスポンシブ設定の基本パラメータ
   * --clamp-viewport-min: ビューポート幅の最小値（px）
   * --clamp-viewport-max: ビューポート幅の最大値（px）
   * --fs-min: 最小フォントサイズ
   * --fs-max: 最大フォントサイズ
   */
  body,
  :host {
    --clamp-viewport-min: 640;
    /* px */
    --clamp-viewport-max: 640.0625;
    /* px */

    --fs-min: 16;
    --fs-max: 16;
  }

  /*
   * すべての要素に適用される共通のレスポンシブ設定
   * CSS Logical Propertiesを使用して、書字方向に依存しない
   * レイアウトを実現します
   * Web Components (data-sa-component属性を持つ要素) は除外
   */
  :where(
      *:not([data-sa-component]),
      *:not([data-sa-component])::before,
      *:not([data-sa-component])::after
    ) {
    /* ==============================
     * font-size (例：remベース)
     * ビューポート幅に応じて可変するフォントサイズの設定
     * slope（傾き）とy軸との交点を計算し、clamp()で
     * 最小値と最大値の間で滑らかに変化させます
     ============================== */
    --fs-slope: calc(
      (var(--fs-max) - var(--fs-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --fs-y-axis-intersection: calc(var(--fs-min) - (var(--fs-slope) * var(--clamp-viewport-min)));
    --fs-preferred-value: calc(
      /* rem 換算 */
      var(--fs-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--fs-slope) * 100vi)
    );
    --fs-clamp: clamp(
      calc(var(--fs-min) * (1rem / var(--clamp-root-font-size))),
      var(--fs-preferred-value),
      calc(var(--fs-max) * (1rem / var(--clamp-root-font-size)))
    );
    font-size: var(
      --fs-clamp,
      /* フォールバック */
      calc(var(--clamp-root-font-size) * (1rem / var(--clamp-root-font-size)))
    );

    --fs-min: ;
    --fs-max: ;

    /* ==============================
     * margin-block-start (remベース)
     * 上部マージンのレスポンシブ設定
     * 書字方向に依存しない論理プロパティを使用
     ============================== */
    --mbs-slope: calc(
      (var(--mbs-max) - var(--mbs-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --mbs-y-axis-intersection: calc(var(--mbs-min) - (var(--mbs-slope) * var(--clamp-viewport-min)));
    --mbs-preferred-value: calc(
      var(--mbs-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--mbs-slope) * 100vi)
    );
    --mbs-clamp: clamp(
      calc(var(--mbs-min) * (1rem / var(--clamp-root-font-size))),
      var(--mbs-preferred-value),
      calc(var(--mbs-max) * (1rem / var(--clamp-root-font-size)))
    );
    margin-block-start: var(--mbs-clamp, 0);

    --mbs-min: ;
    --mbs-max: ;

    /* ==============================
     * margin-block-end (remベース)
     * 下部マージンのレスポンシブ設定
     ============================== */
    --mbe-slope: calc(
      (var(--mbe-max) - var(--mbe-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --mbe-y-axis-intersection: calc(var(--mbe-min) - (var(--mbe-slope) * var(--clamp-viewport-min)));
    --mbe-preferred-value: calc(
      var(--mbe-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--mbe-slope) * 100vi)
    );
    --mbe-clamp: clamp(
      calc(var(--mbe-min) * (1rem / var(--clamp-root-font-size))),
      var(--mbe-preferred-value),
      calc(var(--mbe-max) * (1rem / var(--clamp-root-font-size)))
    );
    margin-block-end: var(--mbe-clamp, 0);

    --mbe-min: ;
    --mbe-max: ;

    /* ==============================
     * margin-inline-start (pxベース)
     * 開始側のインラインマージンのレスポンシブ設定
     * pxベースで計算を行います
     ============================== */
    --mis-slope: calc(
      (var(--mis-max) - var(--mis-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --mis-y-axis-intersection: calc(var(--mis-min) - (var(--mis-slope) * var(--clamp-viewport-min)));
    --mis-preferred-value: calc(
      var(--mis-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--mis-slope) * 100vi)
    );
    --mis-clamp: clamp(
      calc(var(--mis-min) * 1px),
      var(--mis-preferred-value),
      calc(var(--mis-max) * 1px)
    );
    margin-inline-start: var(--mis-clamp, 0);

    --mis-min: ;
    --mis-max: ;

    /* ==============================
     * margin-inline-end (pxベース)
     * 終了側のインラインマージンのレスポンシブ設定
     ============================== */
    --mie-slope: calc(
      (var(--mie-max) - var(--mie-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --mie-y-axis-intersection: calc(var(--mie-min) - (var(--mie-slope) * var(--clamp-viewport-min)));
    --mie-preferred-value: calc(
      var(--mie-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--mie-slope) * 100vi)
    );
    --mie-clamp: clamp(
      calc(var(--mie-min) * 1px),
      var(--mie-preferred-value),
      calc(var(--mie-max) * 1px)
    );
    margin-inline-end: var(--mie-clamp, 0);

    --mie-min: ;
    --mie-max: ;

    /* ==============================
     * padding-block-start (remベース)
     * 上部パディングのレスポンシブ設定
     ============================== */
    --pbs-slope: calc(
      (var(--pbs-max) - var(--pbs-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --pbs-y-axis-intersection: calc(var(--pbs-min) - (var(--pbs-slope) * var(--clamp-viewport-min)));
    --pbs-preferred-value: calc(
      var(--pbs-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--pbs-slope) * 100vi)
    );
    --pbs-clamp: clamp(
      calc(var(--pbs-min) * (1rem / var(--clamp-root-font-size))),
      var(--pbs-preferred-value),
      calc(var(--pbs-max) * (1rem / var(--clamp-root-font-size)))
    );
    padding-block-start: var(--pbs-clamp, 0);

    --pbs-min: ;
    --pbs-max: ;

    /* ==============================
     * padding-block-end (remベース)
     * 下部パディングのレスポンシブ設定
     ============================== */
    --pbe-slope: calc(
      (var(--pbe-max) - var(--pbe-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --pbe-y-axis-intersection: calc(var(--pbe-min) - (var(--pbe-slope) * var(--clamp-viewport-min)));
    --pbe-preferred-value: calc(
      var(--pbe-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--pbe-slope) * 100vi)
    );
    --pbe-clamp: clamp(
      calc(var(--pbe-min) * (1rem / var(--clamp-root-font-size))),
      var(--pbe-preferred-value),
      calc(var(--pbe-max) * (1rem / var(--clamp-root-font-size)))
    );
    padding-block-end: var(--pbe-clamp, 0);

    --pbe-min: ;
    --pbe-max: ;

    /* ==============================
     * padding-inline-start (pxベース)
     * 開始側のインラインパディングのレスポンシブ設定
     ============================== */
    --pis-slope: calc(
      (var(--pis-max) - var(--pis-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --pis-y-axis-intersection: calc(var(--pis-min) - (var(--pis-slope) * var(--clamp-viewport-min)));
    --pis-preferred-value: calc(
      var(--pis-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--pis-slope) * 100vi)
    );
    --pis-clamp: clamp(
      calc(var(--pis-min) * 1px),
      var(--pis-preferred-value),
      calc(var(--pis-max) * 1px)
    );
    padding-inline-start: var(--pis-clamp, 0);

    --pis-min: ;
    --pis-max: ;

    /* ==============================
     * padding-inline-end (pxベース)
     * 終了側のインラインパディングのレスポンシブ設定
     ============================== */
    --pie-slope: calc(
      (var(--pie-max) - var(--pie-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --pie-y-axis-intersection: calc(var(--pie-min) - (var(--pie-slope) * var(--clamp-viewport-min)));
    --pie-preferred-value: calc(
      var(--pie-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--pie-slope) * 100vi)
    );
    --pie-clamp: clamp(
      calc(var(--pie-min) * 1px),
      var(--pie-preferred-value),
      calc(var(--pie-max) * 1px)
    );
    padding-inline-end: var(--pie-clamp, 0);

    --pie-min: ;
    --pie-max: ;

    /* ==============================
     * block-size
     * ブロックサイズのレスポンシブ設定用
     * （現在は未実装）
     ============================== */

    /* ==============================
     * inline-size
     * インラインサイズのレスポンシブ設定
     * pxベースとremベースの2つの方式をサポート
     ============================== */
    /* ------------------------------
     * 1) pxベース
     * ピクセル単位での幅設定
     ------------------------------ */

    /* px版 用のスロープ計算 */
    --is-px-slope: calc(
      (var(--is-px-max) - var(--is-px-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --is-px-y-axis-intersection: calc(
      var(--is-px-min) -
      (var(--is-px-slope) * var(--clamp-viewport-min))
    );
    --is-px-preferred-value: calc(
      var(--is-px-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--is-px-slope) * 100vi)
    );

    /*
     * もし --is-px-min や --is-px-max が未定義なら
     * 下記 clamp(...) 全体が無効 (invalid) になり、
     * `var(--is-clamp-px)` 参照が失敗 → 2) remベースへフォールバック
     */
    --is-clamp-px: clamp(
      calc(var(--is-px-min) * 1px),
      var(--is-px-preferred-value),
      calc(var(--is-px-max) * 1px)
    );

    /* ------------------------------
     * 2) remベース
     * remベースでの幅設定
     ------------------------------ */

    /* rem版 用のスロープ計算 */
    --is-rem-slope: calc(
      (var(--is-rem-max) - var(--is-rem-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --is-rem-y-axis-intersection: calc(
      var(--is-rem-min) -
      (var(--is-rem-slope) * var(--clamp-viewport-min))
    );
    --is-rem-preferred-value: calc(
      var(--is-rem-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--is-rem-slope) * 100vi)
    );

    /*
     * もし --is-rem-min や --is-rem-max が未定義なら
     * 下記 clamp(...) 全体が無効 (invalid) になり、
     * `var(--is-clamp-rem)` 参照が失敗 → 3) 100% へフォールバック
     */
    --is-clamp-rem: clamp(
      calc(var(--is-rem-min) * (1rem / var(--clamp-root-font-size))),
      var(--is-rem-preferred-value),
      calc(var(--is-rem-max) * (1rem / var(--clamp-root-font-size)))
    );

    /* ------------------------------
     * 3) フォールバック
     * px版 → rem版 → 100%の順でフォールバック
     ------------------------------ */
    inline-size: var(--is-clamp-px, var(--is-clamp-rem, initial));

    /* ==============================
     * row-gap (remベース)
     * 行間のギャップのレスポンシブ設定
     ============================== */
    --rg-slope: calc(
      (var(--rg-max) - var(--rg-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --rg-y-axis-intersection: calc(var(--rg-min) - (var(--rg-slope) * var(--clamp-viewport-min)));
    --rg-preferred-value: calc(
      var(--rg-y-axis-intersection) *
      (1rem / var(--clamp-root-font-size)) +
      (var(--rg-slope) * 100vi)
    );
    --rg-clamp: clamp(
      calc(var(--rg-min) * (1rem / var(--clamp-root-font-size))),
      var(--rg-preferred-value),
      calc(var(--rg-max) * (1rem / var(--clamp-root-font-size)))
    );
    row-gap: var(--rg-clamp, initial);

    --rg-min: ;
    --rg-max: ;

    /* ==============================
     * column-gap (pxベース)
     * 列間のギャップのレスポンシブ設定
     ============================== */
    --cg-slope: calc(
      (var(--cg-max) - var(--cg-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
    );
    --cg-y-axis-intersection: calc(var(--cg-min) - (var(--cg-slope) * var(--clamp-viewport-min)));
    --cg-preferred-value: calc(var(--cg-y-axis-intersection) + (var(--cg-slope) * 100vi));
    --cg-clamp: clamp(
      calc(var(--cg-min) * 1px),
      var(--cg-preferred-value),
      calc(var(--cg-max) * 1px)
    );
    column-gap: var(--cg-clamp);

    --cg-min: ;
    --cg-max: ;
  }
}

@layer tokens {
  :where(:root, :host) {
    --container-actual-width: 990px;

    --scrollbar-block-size: 105px;

    --content-max-width: min(100%, 1030px);
    --content-side-space: var(--spacing-5-px);

    --line-height-lg: 1.75;
    --line-height-md: 1.5;
    --line-height-sm: 1.25;
    --line-height-one: 1;
    /* line-height */

    /* [data-theme="sp"] { */
    /* number */
    --accordion-body-padding-bottom: 1.375rem;
    --accordion-body-padding-inline: 22px;
    --accordion-body-padding-top: 1.375rem;
    --accordion-head-font-size: 1rem;
    --button-primary-md-width: 18.75rem;
    /* } */

    @media (width > 40.1rem) {
      /* [data-theme="pc"] { */
      /* number */
      --accordion-body-padding-top: 1.6875rem;
      --accordion-body-padding-bottom: 2.625rem;
      --accordion-body-padding-inline: 42px;
      --accordion-head-font-size: 1.375rem;
      --button-primary-md-width: 24.375rem;
      /* } */
    }

    /* [data-theme="value"] { */
    /* number */
    --clamp-font-size-10: 10;
    --clamp-font-size-11: 11;
    --clamp-font-size-12: 12;
    --clamp-font-size-13: 13;
    --clamp-font-size-14: 14;
    --clamp-font-size-15: 15;
    --clamp-font-size-16: 16;
    --clamp-font-size-17: 17;
    --clamp-font-size-18: 18;
    --clamp-font-size-19: 19;
    --clamp-font-size-20: 20;
    --clamp-font-size-24: 24;
    --clamp-font-size-28: 28;
    --clamp-font-size-32: 32;
    --clamp-font-size-36: 36;
    --clamp-font-size-40: 40;
    --clamp-font-size-44: 44;
    --clamp-font-size-48: 48;
    /* number */
    --font-size-10: 0.625rem;
    --font-size-11: 0.6875rem;
    --font-size-12: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-14: 0.875rem;
    --font-size-15: 0.9375rem;
    --font-size-16: 1rem;
    --font-size-17: 1.0625rem;
    --font-size-18: 1.125rem;
    --font-size-19: 1.1875rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
    --font-size-44: 2.75rem;
    --font-size-48: 3rem;

    --space-8: 0.5rem;
    --space-56: 3.5rem;
    --space-80: 5rem;
    /* } */

    /* [data-theme="color"] { */
    /* color */
    --neutral-black: #000000;
    --neutral-gray-100: #e5e5e5;
    --neutral-gray-200: #cccccc;
    --neutral-gray-300: #b2b2b2;
    --neutral-gray-400: #999999;
    --neutral-gray-420: #949494;
    --neutral-gray-50: #f2f2f2;
    --neutral-gray-500: #7f7f7f;
    --neutral-gray-536: #767676;
    --neutral-gray-600: #666666;
    --neutral-gray-700: #4c4c4c;
    --neutral-gray-800: #333333;
    --neutral-gray-900: #191919;
    --neutral-white: #ffffff;
    --primitive-blue-100: #cce3f3;
    --primitive-blue-200: #99c8e7;
    --primitive-blue-300: #66acda;
    --primitive-blue-400: #3391ce;
    --primitive-blue-50: #e6f1f9;
    --primitive-blue-500: #0075c2;
    --primitive-blue-600: #005e9b;
    --primitive-blue-700: #004674;
    --primitive-blue-800: #002f4e;
    --primitive-blue-900: #001727;
    --primitive-chalk-blue-100: #edf2f5;
    --primitive-chalk-blue-200: #dbe6ec;
    --primitive-chalk-blue-300: #c9d9e2;
    --primitive-chalk-blue-400: #b7cdd9;
    --primitive-chalk-blue-50: #f6f9fa;
    --primitive-chalk-blue-500: #a5c0cf;
    --primitive-chalk-blue-600: #849aa6;
    --primitive-chalk-blue-700: #63737c;
    --primitive-chalk-blue-800: #424d53;
    --primitive-chalk-blue-900: #212629;
    --primitive-chrome-yellow-100: #fef0d5;
    --primitive-chrome-yellow-200: #fce2ab;
    --primitive-chrome-yellow-300: #fbd381;
    --primitive-chrome-yellow-400: #f9c557;
    --primitive-chrome-yellow-50: #fef8ea;
    --primitive-chrome-yellow-500: #f8b62d;
    --primitive-chrome-yellow-600: #c69224;
    --primitive-chrome-yellow-700: #956d1b;
    --primitive-chrome-yellow-800: #634912;
    --primitive-chrome-yellow-900: #322409;
    --primitive-cyan-100: #ccebf9;
    --primitive-cyan-200: #99d8f3;
    --primitive-cyan-300: #66c4ed;
    --primitive-cyan-400: #33b1e7;
    --primitive-cyan-50: #e6f5fc;
    --primitive-cyan-500: #009de1;
    --primitive-cyan-600: #007eb4;
    --primitive-cyan-700: #005e87;
    --primitive-cyan-800: #003f5a;
    --primitive-cyan-900: #001f2d;
    --primitive-green-100: #cde2d8;
    --primitive-green-200: #9bc6b2;
    --primitive-green-300: #68a98b;
    --primitive-green-400: #368d65;
    --primitive-green-50: #e6f1ec;
    --primitive-green-500: #04703e;
    --primitive-green-600: #035a32;
    --primitive-green-700: #024325;
    --primitive-green-800: #022d19;
    --primitive-green-900: #01160c;
    --primitive-indigo-100: #ccdcea;
    --primitive-indigo-200: #99b8d5;
    --primitive-indigo-250: #80a6cb;
    --primitive-indigo-300: #6695c1;
    --primitive-indigo-400: #3371ac;
    --primitive-indigo-50: #e6edf5;
    --primitive-indigo-500: #004e97;
    --primitive-indigo-600: #003e79;
    --primitive-indigo-700: #002f5b;
    --primitive-indigo-800: #001f3c;
    --primitive-indigo-900: #00101e;
    --primitive-lemon-yellow-100: #fffccc;
    --primitive-lemon-yellow-200: #fff999;
    --primitive-lemon-yellow-300: #fff766;
    --primitive-lemon-yellow-400: #fff433;
    --primitive-lemon-yellow-50: #fffee6;
    --primitive-lemon-yellow-500: #fff100;
    --primitive-lemon-yellow-600: #ccc100;
    --primitive-lemon-yellow-700: #999100;
    --primitive-lemon-yellow-800: #666000;
    --primitive-lemon-yellow-900: #333000;
    --primitive-marigold-100: #ffecd1;
    --primitive-marigold-200: #ffd8a3;
    --primitive-marigold-300: #ffc576;
    --primitive-marigold-400: #ffb148;
    --primitive-marigold-50: #fff5e8;
    --primitive-marigold-500: #ff9e1a;
    --primitive-marigold-600: #cc7e15;
    --primitive-marigold-700: #995f10;
    --primitive-marigold-800: #663f0a;
    --primitive-marigold-900: #332005;
    --primitive-orange-100: #fee1cc;
    --primitive-orange-200: #fcc299;
    --primitive-orange-300: #fba466;
    --primitive-orange-400: #f98533;
    --primitive-orange-50: #fef0e5;
    --primitive-orange-500: #f86700;
    --primitive-orange-600: #c65200;
    --primitive-orange-700: #953e00;
    --primitive-orange-800: #632900;
    --primitive-orange-900: #321500;
    --primitive-pink-100: #fddfed;
    --primitive-pink-200: #fabfdb;
    --primitive-pink-300: #f89fc8;
    --primitive-pink-400: #f57fb6;
    --primitive-pink-50: #feeff6;
    --primitive-pink-500: #f35fa4;
    --primitive-pink-600: #c24c83;
    --primitive-pink-700: #923962;
    --primitive-pink-800: #612642;
    --primitive-pink-900: #311321;
    --primitive-red-100: #fedacc;
    --primitive-red-200: #feb599;
    --primitive-red-300: #fd9166;
    --primitive-red-400: #fd6c33;
    --primitive-red-50: #ffede6;
    --primitive-red-500: #fc4700;
    --primitive-red-600: #ca3900;
    --primitive-red-700: #972b00;
    --primitive-red-800: #651c00;
    --primitive-red-900: #320e00;
    --primitive-scarlet-100: #fbddcd;
    --primitive-scarlet-200: #f7bb9b;
    --primitive-scarlet-250: #f5aa81;
    --primitive-scarlet-300: #f29968;
    --primitive-scarlet-400: #ee7736;
    --primitive-scarlet-50: #fdeee6;
    --primitive-scarlet-500: #ea5504;
    --primitive-scarlet-600: #bb4403;
    --primitive-scarlet-700: #8c3302;
    --primitive-scarlet-800: #5e2202;
    --primitive-scarlet-900: #2f1101;
    --primitive-ss-navy-100: #ccd5e1;
    --primitive-ss-navy-200: #99aac3;
    --primitive-ss-navy-300: #6680a5;
    --primitive-ss-navy-400: #335587;
    --primitive-ss-navy-50: #e6eaf0;
    --primitive-ss-navy-500: #002b69;
    --primitive-ss-navy-600: #002254;
    --primitive-ss-navy-700: #001a3f;
    --primitive-ss-navy-800: #00112a;
    --primitive-ss-navy-900: #000915;
    --primitive-ultramarine-100: #d2d2ed;
    --primitive-ultramarine-200: #a5a5da;
    --primitive-ultramarine-300: #7979c8;
    --primitive-ultramarine-400: #4c4cb5;
    --primitive-ultramarine-50: #e9e9f6;
    --primitive-ultramarine-500: #1f1fa3;
    --primitive-ultramarine-600: #191982;
    --primitive-ultramarine-700: #131362;
    --primitive-ultramarine-800: #0c0c41;
    --primitive-ultramarine-900: #060621;
    --primitive-wine-red-100: #f4d9d9;
    --primitive-wine-red-200: #e9b4b4;
    --primitive-wine-red-300: #df8e8e;
    --primitive-wine-red-400: #d46969;
    --primitive-wine-red-50: #faecec;
    --primitive-wine-red-500: #c94343;
    --primitive-wine-red-600: #a13636;
    --primitive-wine-red-700: #792828;
    --primitive-wine-red-800: #501b1b;
    --primitive-wine-red-900: #280d0d;
    --unique-fire-top-blue-100: #ccd4ea;
    --unique-fire-top-blue-420: #7795ce;
    --unique-fire-top-orange-50: #fff0d8;
    /* } */
    /* shadow */
    --shadow-1: 0 2px 2px 0 rgb(0 0 0 / 0.4);

    [data-theme="auto"] {
      /* color */
      --semantic-background-body: var(--neutral-white);
      --semantic-background-overlay: #0000001a;
      --semantic-fill-accent: var(--primitive-lemon-yellow-500);
      --semantic-fill-attention: var(--primitive-red-500);
      --semantic-fill-brand-primary: var(--primitive-indigo-500);
      --semantic-fill-brand-primary-light: var(--primitive-indigo-50);
      --semantic-fill-brand-primary-midium: var(--primitive-indigo-400);
      --semantic-fill-brand-primary-row: var(--primitive-indigo-300);
      --semantic-fill-brand-secondary: var(--primitive-blue-500);
      --semantic-fill-brand-secondary-light: var(--primitive-blue-100);
      --semantic-fill-brand-tertiary: #ffffff;
      --semantic-fill-brand-tertiary-light: #ffffff;
      --semantic-fill-mypage: var(--primitive-indigo-600);
      --semantic-fill-on-accent: var(--neutral-white);
      --semantic-fill-positive: var(--primitive-green-500);
      --semantic-fill-positive-light: var(--primitive-green-50);
      --semantic-fill-primary: var(--neutral-gray-50);
      --semantic-fill-quaternary: var(--neutral-black);
      --semantic-fill-secondary: var(--neutral-gray-100);
      --semantic-fill-tertiary: var(--neutral-gray-536);
      --semantic-fill-warn: var(--primitive-red-600);
      --semantic-fill-warn-light: var(--primitive-red-50);
      --semantic-stroke-attention: var(--primitive-red-500);
      --semantic-stroke-brand-primary: var(--primitive-indigo-500);
      --semantic-stroke-brand-primary-medium: var(--primitive-indigo-400);
      --semantic-stroke-brand-secondary: var(--primitive-blue-500);
      --semantic-stroke-brand-tertiary: #ffffff;
      --semantic-stroke-mypage: var(--primitive-indigo-600);
      --semantic-stroke-on-accent: var(--neutral-white);
      --semantic-stroke-on-accent-opacity-20: #ffffff33;
      --semantic-stroke-positive: var(--primitive-green-500);
      --semantic-stroke-primary: var(--neutral-gray-200);
      --semantic-stroke-secondary: var(--neutral-gray-100);
      --semantic-stroke-tertiary: var(--neutral-black);
      --semantic-stroke-tertiary-opacity-20: #00000033;
      --semantic-stroke-warn: var(--primitive-red-600);
      --semantic-text-attention: var(--primitive-red-500);
      --semantic-text-brand-primary: var(--primitive-indigo-500);
      --semantic-text-brand-primary-medium: var(--primitive-indigo-400);
      --semantic-text-brand-secondary: var(--primitive-blue-500);
      --semantic-text-brand-tertiary: #ffffff;
      --semantic-text-link: var(--primitive-ultramarine-500);
      --semantic-text-link-hover: var(--primitive-ultramarine-400);
      --semantic-text-mypage: var(--primitive-indigo-600);
      --semantic-text-on-accent: var(--neutral-white);
      --semantic-text-on-accent-secondary: #ffffff;
      --semantic-text-positive: var(--primitive-green-500);
      --semantic-text-primary: var(--neutral-black);
      --semantic-text-secondary: var(--neutral-gray-700);
      --semantic-text-tertiary: var(--neutral-gray-536);
      --semantic-text-warn: var(--primitive-red-600);
      --ui-button-primary-fill-default: var(--primitive-indigo-400);
      --ui-button-primary-text-default: var(--neutral-white);
    }

    :where([data-theme="fire"]) {
      /* color */
      --semantic-background-body: var(--neutral-white);
      --semantic-background-overlay: #0000001a;
      --semantic-fill-accent: var(--primitive-lemon-yellow-500);
      --semantic-fill-attention: var(--primitive-red-500);
      --semantic-fill-brand-primary: var(--primitive-red-500);
      --semantic-fill-brand-primary-light: var(--primitive-red-50);
      --semantic-fill-brand-primary-midium: #ffffff;
      --semantic-fill-brand-primary-row: #ffffff;
      --semantic-fill-brand-secondary: var(--primitive-marigold-500);
      --semantic-fill-brand-secondary-light: var(--primitive-marigold-100);
      --semantic-fill-brand-tertiary: #ffffff;
      --semantic-fill-brand-tertiary-light: #ffffff;
      --semantic-fill-mypage: var(--primitive-indigo-600);
      --semantic-fill-on-accent: var(--neutral-white);
      --semantic-fill-positive: var(--primitive-green-500);
      --semantic-fill-positive-light: var(--primitive-green-50);
      --semantic-fill-primary: var(--neutral-gray-50);
      --semantic-fill-quaternary: var(--neutral-black);
      --semantic-fill-secondary: var(--neutral-gray-100);
      --semantic-fill-tertiary: var(--neutral-gray-536);
      --semantic-fill-warn: var(--primitive-red-600);
      --semantic-fill-warn-light: var(--primitive-red-50);
      --semantic-stroke-attention: var(--primitive-red-500);
      --semantic-stroke-brand-primary: var(--primitive-red-600);
      --semantic-stroke-brand-primary-medium: var(--primitive-red-500);
      --semantic-stroke-brand-secondary: var(--primitive-marigold-500);
      --semantic-stroke-brand-tertiary: #ffffff;
      --semantic-stroke-mypage: var(--primitive-indigo-600);
      --semantic-stroke-on-accent: var(--neutral-white);
      --semantic-stroke-on-accent-opacity-20: #ffffff33;
      --semantic-stroke-positive: var(--primitive-green-500);
      --semantic-stroke-primary: var(--neutral-gray-200);
      --semantic-stroke-secondary: var(--neutral-gray-100);
      --semantic-stroke-tertiary: var(--neutral-black);
      --semantic-stroke-tertiary-opacity-20: #00000033;
      --semantic-stroke-warn: var(--primitive-red-600);
      --semantic-text-attention: var(--primitive-red-500);
      --semantic-text-brand-primary: var(--primitive-red-600);
      --semantic-text-brand-primary-medium: var(--primitive-red-500);
      --semantic-text-brand-secondary: var(--primitive-marigold-500);
      --semantic-text-brand-tertiary: #ffffff;
      --semantic-text-link: var(--primitive-ultramarine-500);
      --semantic-text-link-hover: var(--primitive-ultramarine-400);
      --semantic-text-mypage: var(--primitive-indigo-600);
      --semantic-text-on-accent: var(--neutral-white);
      --semantic-text-on-accent-secondary: #ffffff;
      --semantic-text-positive: var(--primitive-green-500);
      --semantic-text-primary: var(--neutral-black);
      --semantic-text-secondary: var(--neutral-gray-700);
      --semantic-text-tertiary: var(--neutral-gray-536);
      --semantic-text-warn: var(--primitive-red-600);
      --ui-button-primary-fill-default: var(--primitive-marigold-500);
      --ui-button-primary-text-default: var(--neutral-black);
    }

    [data-theme="pet"] {
      /* color */
      --semantic-background-body: var(--neutral-white);
      --semantic-background-overlay: #0000001a;
      --semantic-fill-accent: var(--primitive-lemon-yellow-500);
      --semantic-fill-attention: var(--primitive-red-500);
      --semantic-fill-brand-primary: var(--primitive-green-500);
      --semantic-fill-brand-primary-light: var(--primitive-green-50);
      --semantic-fill-brand-primary-midium: #ffffff;
      --semantic-fill-brand-primary-row: #ffffff;
      --semantic-fill-brand-secondary: var(--primitive-cyan-500);
      --semantic-fill-brand-secondary-light: var(--primitive-cyan-50);
      --semantic-fill-brand-tertiary: var(--primitive-pink-500);
      --semantic-fill-brand-tertiary-light: var(--primitive-pink-50);
      --semantic-fill-mypage: var(--primitive-indigo-600);
      --semantic-fill-on-accent: var(--neutral-white);
      /* --semantic-fill-positive: #ffffff;
      --semantic-fill-positive-light: #ffffff; */
      --semantic-fill-positive: var(--primitive-green-500);
      --semantic-fill-positive-light: var(--primitive-green-50);
      --semantic-fill-primary: var(--neutral-gray-50);
      --semantic-fill-quaternary: var(--neutral-black);
      --semantic-fill-secondary: var(--neutral-gray-100);
      --semantic-fill-tertiary: var(--neutral-gray-536);
      --semantic-fill-warn: var(--primitive-red-600);
      --semantic-fill-warn-light: var(--primitive-red-50);
      --semantic-stroke-attention: var(--primitive-red-500);
      --semantic-stroke-brand-primary: var(--primitive-green-500);
      --semantic-stroke-brand-primary-medium: #ffffff;
      --semantic-stroke-brand-secondary: var(--primitive-cyan-500);
      --semantic-stroke-brand-tertiary: var(--primitive-pink-500);
      --semantic-stroke-mypage: var(--primitive-indigo-600);
      --semantic-stroke-on-accent: var(--neutral-white);
      --semantic-stroke-on-accent-opacity-20: #ffffff33;
      --semantic-stroke-positive: var(--primitive-green-500);
      --semantic-stroke-primary: var(--neutral-gray-200);
      --semantic-stroke-secondary: var(--neutral-gray-100);
      --semantic-stroke-tertiary: var(--neutral-black);
      --semantic-stroke-tertiary-opacity-20: #00000033;
      --semantic-stroke-warn: var(--primitive-red-600);
      --semantic-text-attention: var(--primitive-red-500);
      --semantic-text-brand-primary: var(--primitive-green-500);
      --semantic-text-brand-primary-medium: #ffffff;
      --semantic-text-brand-secondary: var(--primitive-cyan-500);
      --semantic-text-brand-tertiary: var(--primitive-pink-500);
      --semantic-text-link: var(--primitive-ultramarine-500);
      --semantic-text-link-hover: var(--primitive-ultramarine-400);
      --semantic-text-mypage: var(--primitive-indigo-600);
      --semantic-text-on-accent: var(--neutral-white);
      --semantic-text-on-accent-secondary: var(--primitive-lemon-yellow-500);
      --semantic-text-positive: #ffffff;
      --semantic-text-primary: var(--neutral-black);
      --semantic-text-secondary: var(--neutral-gray-700);
      --semantic-text-tertiary: var(--neutral-gray-536);
      --semantic-text-warn: var(--primitive-red-600);
      --ui-button-primary-fill-default: var(--primitive-green-500);
      --ui-button-primary-text-default: var(--neutral-white);
    }

    /* [data-theme="sp"] { */
    /* add from code base */
    /* number */

    --border-width-level-1: 1px;
    --border-width-level-2: 2px;
    --border-width-level-3: 4px;
    --font-size-body-xs: var(--font-size-12);
    --font-size-body-sm: var(--font-size-14);
    --font-size-body-md: var(--font-size-16);
    --font-size-button-lg: var(--font-size-16);
    --font-size-button-md: var(--font-size-16);
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --heading-level-1: var(--font-size-16);
    --heading-level-2: var(--font-size-17);
    --heading-level-3: var(--font-size-18);
    --heading-level-4: var(--font-size-20);
    --heading-level-5: var(--font-size-24);
    --heading-level-6: var(--font-size-28);
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: calc(infinity * 1px);
    /* spacing scale */
    --spacing-0: 0;
    --spacing-scale-0-5: 2;
    --spacing-scale-1: 4;
    --spacing-scale-2: 8;
    --spacing-scale-3: 12;
    --spacing-scale-4: 16;
    --spacing-scale-5: 20;
    --spacing-scale-6: 24;
    --spacing-scale-8: 32;
    --spacing-scale-10: 40;
    --spacing-scale-12: 48;
    --spacing-scale-14: 56;
    --spacing-scale-16: 64;
    --spacing-scale-20: 80;
    --spacing-scale-24: 96;
    --spacing-scale-28: 112;
    --spacing-scale-32: 128;
    --spacing-0-5: calc(var(--spacing-scale-0-5) * (1rem / var(--clamp-root-font-size))) /* 0.125rem*/;
    --spacing-1: calc(var(--spacing-scale-1) * (1rem / var(--clamp-root-font-size)));
    --spacing-2: calc(var(--spacing-scale-2) * (1rem / var(--clamp-root-font-size)));
    --spacing-3: calc(var(--spacing-scale-3) * (1rem / var(--clamp-root-font-size)));
    --spacing-4: calc(var(--spacing-scale-4) * (1rem / var(--clamp-root-font-size)));
    --spacing-5: calc(
      var(--spacing-scale-5) *
      (1rem / var(--clamp-root-font-size)) /* 1.25rem 20px */
    );
    --spacing-6: calc(var(--spacing-scale-6) * (1rem / var(--clamp-root-font-size)));
    --spacing-8: calc(var(--spacing-scale-8) * (1rem / var(--clamp-root-font-size)));
    --spacing-10: calc(var(--spacing-scale-10) * (1rem / var(--clamp-root-font-size)));
    --spacing-12: calc(var(--spacing-scale-12) * (1rem / var(--clamp-root-font-size)));
    --spacing-14: calc(var(--spacing-scale-14) * (1rem / var(--clamp-root-font-size)));
    --spacing-16: calc(var(--spacing-scale-16) * (1rem / var(--clamp-root-font-size)));
    --spacing-20: calc(var(--spacing-scale-20) * (1rem / var(--clamp-root-font-size)));
    --spacing-24: calc(var(--spacing-scale-24) * (1rem / var(--clamp-root-font-size)));
    --spacing-28: calc(var(--spacing-scale-28) * (1rem / var(--clamp-root-font-size)));
    --spacing-32: calc(var(--spacing-scale-32) * (1rem / var(--clamp-root-font-size)));
    /* 16px(1rem)を基準に計算したpx単位の spacing 変数 主にinline側の余白で使用する */
    --spacing-0-5-px: calc(var(--spacing-scale-0-5) * 1px);
    /* 0.125rem * 16 = 2px */
    --spacing-1-px: calc(var(--spacing-scale-1) * 1px);
    /* 0.25rem * 16 = 4px */
    --spacing-2-px: calc(var(--spacing-scale-2) * 1px);
    /* 0.5rem  * 16 = 8px */
    --spacing-3-px: calc(var(--spacing-scale-3) * 1px);
    /* 0.75rem * 16 = 12px */
    --spacing-4-px: calc(var(--spacing-scale-4) * 1px);
    /* 1rem    * 16 = 16px */
    --spacing-5-px: calc(var(--spacing-scale-5) * 1px);
    /* 1.25rem * 16 = 20px */
    --spacing-6-px: calc(var(--spacing-scale-6) * 1px);
    /* 1.5rem  * 16 = 24px */
    --spacing-8-px: calc(var(--spacing-scale-8) * 1px);
    /* 2rem    * 16 = 32px */
    --spacing-10-px: calc(var(--spacing-scale-10) * 1px);
    /* 2.5rem  * 16 = 40px */
    --spacing-12-px: calc(var(--spacing-scale-12) * 1px);
    /* 3rem    * 16 = 48px */
    --spacing-14-px: calc(var(--spacing-scale-14) * 1px);
    /* 3.5rem  * 16 = 56px */
    --spacing-16-px: calc(var(--spacing-scale-16) * 1px);
    /* 4rem    * 16 = 64px */
    --spacing-20-px: calc(var(--spacing-scale-20) * 1px);
    /* 5rem    * 16 = 80px */
    --spacing-24-px: calc(var(--spacing-scale-24) * 1px);
    /* 6rem    * 16 = 96px */
    --spacing-28-px: calc(var(--spacing-scale-28) * 1px);
    /* 7rem    * 16 = 112px */
    --spacing-32-px: calc(var(--spacing-scale-32) * 1px);
    /* 8rem    * 16 = 128px */
    --spacing-component-block: var(--spacing-1);
    --spacing-gap-stack: var(--spacing-4);
    --spacing-gap-stack-lg: var(--spacing-6);
    /* string */
    --font-family-body: Hiragino Kaku Gothic ProN;
    --font-family-en: Arial;
    /* } */

    @media (width > 40.1rem) {
      /* [data-theme="pc"] { */
      /* add size from code base */
      /* number */
      --font-size-body-xs: var(--font-size-12);
      --font-size-body-sm: var(--font-size-14);
      --font-size-body-md: var(--font-size-16);
      --font-size-button-md: var(--font-size-16);
      --font-size-button-lg: var(--font-size-18);
      --font-weight-normal: 400;
      --font-weight-bold: 700;
      --heading-level-1: var(--font-size-16);
      --heading-level-2: var(--font-size-20);
      --heading-level-3: var(--font-size-24);
      --heading-level-4: var(--font-size-28);
      --heading-level-5: var(--font-size-32);
      --heading-level-6: var(--font-size-36);
      --spacing-component-block: var(--spacing-2);
      --spacing-gap-stack: var(--spacing-6);
      --spacing-gap-stack-lg: var(--spacing-8);
      /* string */
      /* --font-family-body: Hiragino Kaku Gothic ProN;
    --font-family-en: Arial; */
      /* } */
    }

    /* z-index */
    --layer-behind: -1;
    --layer-base: 0;
    --layer-1: 1;
    --layer-2: 2;
    --layer-3: 3;
  }
}

@layer base {
  :root,
  :host {
    --container-actual-width: 990px;
  }

  *:not(include-file):not(:defined) {
    display: none !important;
  }

  html {
    scroll-behavior: smooth;

    &:has(.floating-banner) {
      scroll-padding-bottom: var(--scrollbar-block-size);
    }
    /* 視差効果をオフにしているユーザー向けの対応 */
    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }

  /* 1. 半角数字専用のフォントフェイスを定義 */
  @font-face {
    font-family: "Numbers_Arial";
    /* 任意の名前をつけます */
    src: local("Arial");
    /* ローカルのArialフォントを指定 */
    unicode-range: U+0030-0039;
    /* 適用範囲を半角数字 (0-9) に限定 */
  }

  body {
    -webkit-text-size-adjust: 100%;
    font-family: "'Numbers_Arial',Hiragino Kaku Gothic ProN", Arial, Helvetica, Verdana,
      -apple-system, BlinkMacSystemFont, "メイリオ", Meiryo, MS PGothic, sans-serif;
  }

  /* フォーカスインジケーターのスタイル */
  :focus-visible {
    outline-offset: 4px;
    outline-width: 2px;
    outline-style: solid;
  }

  @media screen and (max-width: 40rem) {
    sup {
      font-size: max(75%, var(--font-size-12));
    }
  }

  :where(.visually-hidden:not(:focus-within, :active)) {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* 画像にストロークを引く場合 */
  img.with-stroke {
    border: var(--border-width-level-1) solid var(--semantic-stroke-primary);
    border-radius: var(--radius-xs);
  }
  img[width="800"],
  picture:has([width="800"]) {
    max-width: min(100%, 800px);
  }
  img[width="580"],
  picture:has([width="580"]) {
    max-width: min(100%, 580px);
  }
  img[src*="illustration"] {
    border-radius: var(--radius-xs);
  }

  figure > :where(figcaption) {
    --fs-min: var(--clamp-font-size-12);
    --fs-max: var(--clamp-font-size-12);
  }

  small {
    font-size: 80%;
  }

  sup {
    font-size: max(75%, var(--font-size-12));
  }

  strong.warn {
    color: var(--semantic-text-warn);
  }
}

@layer state {
  [data-device] {
    display: none;
  }
  [data-device="desktop"] {
    @media (min-width: 40rem) {
      display: contents;
    }
  }
  [data-device="mobile"] {
    @media (max-width: 40rem) {
      display: contents;
    }
  }
}

@layer reset {
  *:not([data-sa-component]) {
    margin: 0;
    padding: 0;
    font: inherit;
  }

  *:not([data-sa-component]),
  *:not([data-sa-component])::before,
  *:not([data-sa-component])::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--global-color-border, currentColor);
  }

  html {
    line-height: 1.5;
    --font-fallback:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: var(--global-font-body, var(--font-fallback));
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  body {
    height: 100%;
    line-height: inherit;
  }

  img {
    border-style: none;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ol,
  ul {
    list-style: none;
  }

  code,
  kbd,
  pre,
  samp {
    font-size: 1em;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    color: inherit;
  }

  button,
  select {
    text-transform: none;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: var(--global-color-placeholder, #9ca3af);
  }

  textarea {
    resize: vertical;
  }

  summary {
    display: list-item;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  dialog {
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  abbr:where([title]) {
    text-decoration: underline dotted;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-size: 1em;
    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New";
    font-family: var(--global-font-mono, var(--font-mono-fallback));
  }

  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  input[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration,
  ::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  :-moz-focusring {
    outline: auto;
  }

  button {
    text-align: initial;
    cursor: pointer;
  }

  summary::-webkit-details-marker {
    /* Safariで表示されるデフォルトの三角形アイコンを消します */
    display: none;
  }
}

@layer base {
  /* 共通 */
  table {
    --ui-table-border-width: var(--border-width-level-1);
    --ui-table-border: var(--ui-table-border-width) solid var(--semantic-stroke-primary);
    --fs-min: var(--clamp-font-size-15);
    --fs-max: var(--clamp-font-size-16);

    --ui-table-outer-radius: var(--radius-md);
    --ui-table-inner-radius: calc(var(--ui-table-outer-radius) - var(--ui-table-border-width));

    inline-size: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--ui-table-border);
    border-radius: var(--ui-table-outer-radius);
  }
  table[data-layout="auto"] {
    table-layout: auto;
  }
  caption {
    text-align: left;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.2em;
  }
  thead th {
    &[data-head-width="20"] {
      inline-size: 20%;
    }
    &[data-head-width="30"] {
      inline-size: 30%;
    }
    &[data-head-width="40"] {
      inline-size: 40%;
    }
    &[data-head-width="50"] {
      inline-size: 50%;
    }
  }
  th,
  td {
    padding: 1em;
    border: var(--ui-table-border);
  }
  th {
    background-color: var(--semantic-fill-primary);
    font-weight: var(--font-weight-bold);
    /* word-break: auto-phrase;
    word-break: keep-all; */
  }
  td {
    background-color: var(--semantic-fill-on-accent);

    > p + :where(p, dl) {
      margin-top: var(--spacing-gap-stack);
    }
  }

  /* base */
  table:has(> thead) tr > th:first-child,
  table:has(> thead) tbody > tr > td:first-child {
    border-left-width: 1px;
  }
  table:has(> thead) tr > th:first-child {
    border-top-left-radius: var(--ui-table-inner-radius);
  }
  table:has(> thead) tr > th:last-child {
    border-top-right-radius: var(--ui-table-inner-radius);
  }
  table:has(> thead) tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--ui-table-inner-radius);
  }
  table:has(> thead) tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--ui-table-inner-radius);
  }
  table:has(> thead) th,
  table:has(> thead) td {
    border-left-width: 0;
  }
  table:has(> thead) td {
    border-top-width: 0;
  }

  /* alternate */
  table:not(:has(thead)) tr:first-child > th:first-child {
    border-top-left-radius: var(--ui-table-inner-radius);
  }
  table:not(:has(thead)) tr:first-child > td:last-child {
    border-top-right-radius: var(--ui-table-inner-radius);
  }
  table:not(:has(thead)) tr:last-child > th:first-child {
    border-bottom-left-radius: var(--ui-table-inner-radius);
  }
  table:not(:has(thead)) tr:last-child > td:last-child {
    border-bottom-right-radius: var(--ui-table-inner-radius);
  }
  table:not(:has(thead)) th,
  table:not(:has(thead)) td {
    border-top-width: 0;
    border-left-width: 0;
  }
  table:not(:has(thead)) tr:first-child th,
  table:not(:has(thead)) tr:first-child td {
    border-top-width: var(--border-width-level-1);
  }
  table:not(:has(thead)) tr > th {
    border-left-width: var(--border-width-level-1);
  }

  /* mixed */
  table:has(> thead + tbody) tbody > tr > th:first-child {
    border-top: 0;
    border-top-left-radius: 0;
  }
  table:has(> thead + tbody) tbody > tr:last-child > th:first-child {
    border-bottom-left-radius: var(--ui-table-inner-radius);
  }

  /* captionの高さ */
  :root {
    --caption-line-count: 1; /* デフォルト */
  }

  /* sticky */
  table.col-sticky > caption,
  table.row-sticky > caption {
    position: sticky;
    top: 0px;
    left: 0;
    z-index: 2;
    background-color: var(--semantic-fill-on-accent);
  }
  table.col-sticky > caption {
    width: 100%;
  }
  table.row-sticky > caption {
    width: fit-content;
  }

  table.col-sticky > thead > tr > th,
  table.row-sticky > tbody > tr > th,
  table.row-sticky:has(thead) > thead > tr > th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
  }
  table.col-sticky > thead > tr > th {
    top: calc(var(--caption-line-count) * 1em * var(--line-height-lg));
  }

  table.row-sticky > tbody > tr > th {
    left: 0;
  }

  /* figureで囲む場合SP時にscrollbarを出す */
  @media screen and (max-width: 40rem) {
    figure:has(> table) {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
  }
}

@layer recipes {
  :where(table[data-base-align]) {
    td {
      /* デフォルトのアラインはCSS変数で制御 */
      text-align: var(--_td-align, left);
    }
    th {
      text-align: var(--_th-align, center);
    }
    &[data-base-align="basic"] {
      --_th-align: center;
      --_td-align: left;
    }
    &[data-base-align="center"] {
      --_th-align: center;
      --_td-align: center;
    }
    &[data-base-align="left"] {
      --_th-align: left;
      --_td-align: left;
    }
    &[data-base-align="right"] {
      --_th-align: right;
      --_td-align: right;
    }
  }

  :is(th, td).center,
  :is(th, td).label {
    text-align: center;
  }
  :is(th, td).left,
  :is(th, td).text {
    text-align: left;
  }
  :is(th, td).right,
  :is(th, td).price {
    text-align: right;
  }
}

@layer base {
  :where(main, .sb-show-main, .category-navigation, .bottom-local-nav) > *:not(dialog),
  nav:has(> .breadcrumb) {
    width: var(--content-max-width);
    padding-inline: var(--content-side-space);
    margin-inline: auto;
  }

  :where(main, .sb-show-main) > include-file {
    display: block;
  }
}

@layer recipes {
  .accordion {
    --ui-accordion-rounded: var(--radius-md);
    --ui-accordion-border: var(--semantic-stroke-primary);
    --ui-accordion-summary-font-sizes: var(--accordion-head-font-size);
    --ui-accordion-icon-size: 20px;
    --ui-accordion-summary-padding-block-start: var(--spacing-2);
    --ui-accordion-summary-padding-block-end: var(--spacing-2);
    --ui-accordion-summary-padding-inline-start: var(--spacing-5);
    --ui-accordion-summary-padding-inline-end: var(--spacing-10);
    --ui-accordion-min-height: 3.75rem;
    --ui-accordion-body-padding: var(--accordion-body-padding-top);

    border: 2px solid var(--ui-accordion-border);
    display: block;
    border-radius: var(--ui-accordion-rounded);
    overflow: hidden;
  }

  .accordion[open] summary::after {
    mask-image: var(--icon-minus-md);
    -webkit-mask-image: var(--icon-minus-md);
    background-color: var(--semantic-text-brand-primary);
  }

  :has(> .accordion) {
    container: accordion / inline-size;
  }

  .accordion:first-of-type:not(:last-of-type) {
    border-bottom-right-radius: var(--radius-none);
    border-bottom-left-radius: var(--radius-none);
  }

  .accordion:last-of-type:not(:first-of-type) {
    border-top-right-radius: var(--radius-none);
    border-top-left-radius: var(--radius-none);
  }

  .accordion:not(:first-of-type):not(:last-of-type) {
    border-radius: var(--radius-none);
  }

  .accordion + .accordion {
    border-top: none;
  }

  .accordion.js-accordion [data-close="accordion"]::after {
    right: 14px;
    height: 2px;
    mask-image: var(--ico-collapse-orange);
    -webkit-mask-image: var(--ico-collapse-orange);
  }

  .accordion:not(.js-accordion) [data-close="accordion"] {
    display: none;
  }

  .accordion summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--ui-accordion-min-height);
    padding-block-start: var(--ui-accordion-summary-padding-block-start);
    padding-inline-start: var(--ui-accordion-summary-padding-inline-start);
    padding-block-end: var(--ui-accordion-summary-padding-block-end);
    padding-inline-end: var(--ui-accordion-summary-padding-inline-end);

    font-size: var(--ui-accordion-summary-font-sizes);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
    cursor: pointer;
  }

  .accordion summary::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    inline-size: var(--ui-accordion-icon-size);
    block-size: var(--ui-accordion-icon-size);
    mask-image: var(--icon-plus-md);
    -webkit-mask-image: var(--icon-plus-md);
    background-color: var(--semantic-text-brand-primary);
    mask-size: contain;
    mask-repeat: no-repeat;
  }

  .accordion .accordion-body {
    display: grid;
    padding-block-start: var(--accordion-body-padding-top);
    padding-inline-end: var(--accordion-body-padding-inline);
    padding-block-end: var(--accordion-body-padding-bottom);
    padding-inline-start: var(--accordion-body-padding-inline);
    border-top: 2px solid var(--ui-accordion-border);
    font-size: var(--font-sizes-accordion-body);
  }

  .accordion .action-close-button {
    justify-self: center;
    margin-top: 2.5rem;
  }

  .action-close-button {
    position: relative;
    display: grid;
    place-items: center;
    align-items: center;
    width: var(--sizes-width-action-button);
    min-width: var(--sizes-min-width-action-button);
    padding: 8.25px 30px;
    background-color: var(--colors-white);
    border: var(--borders-sub-button);
    border-radius: var(--radii-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-sizes-button-action);
    color: black;
    line-height: var(--line-heights-md);
    transition: filter 0.2s ease;
  }

  .action-close-button::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 12px;
    height: 12px;
    background-color: var(--colors-estimate-button);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--ico-close-orange);
    -webkit-mask-image: var(--ico-close-orange);
  }

  .accordion summary:is(:focus-visible, [data-focus-visible]) {
    outline-offset: -8px;
  }

  @container accordion (min-width: 40.01rem) {
    .accordion {
      --ui-accordion-summary-padding-block-start: var(--spacing-3);
      --ui-accordion-summary-padding-block-end: var(--spacing-3);
      --ui-accordion-summary-padding-inline-start: var(--spacing-10);
      --ui-accordion-summary-padding-inline-end: var(--spacing-10);
    }
    .accordion summary {
      --ui-accordion-min-height: 5rem;
    }

    .accordion .accordion-body {
      --ui-accordion-body-padding: var(--accordion-body-padding-top);
    }
  }

  @media (any-hover: hover) {
    .accordion summary:is(:hover, [data-hover]) {
      background-color: var(--colors-table-background);
    }
  }

  @media (any-hover: hover) and (pointer: fine) {
    .action-close-button:is(:hover, [data-hover]) {
      filter: contrast(0.9);
    }
  }
}

@layer recipes {
  .action-close-button,
  .action-open-button {
    --ui-action-button-inline-min-size: min(166px, 100%);
    --ui-action-button-fill-color: var(--neutral-white);
    --ui-action-button-stroke: 2px solid var(--semantic-stroke-primary);
    --ui-action-button-font-weight: var(--font-weight-bold);
    --ui-action-button-font-size: var(--font-size-body-sm);
    --ui-action-button-text-color: var(--neutral-black);
    --ui-action-button-close-icon-path: var(--ico-close-orange);
    --ui-action-button-open-icon-path: var(--ico-open-orange);
    --ui-action-button-close-icon-size: 12px;
    --ui-action-button-open-icon-size: 12px;

    position: relative;
    display: grid;
    place-items: center;
    align-items: center;
    width: fit-content;
    min-width: var(--ui-action-button-inline-min-size);
    padding: 0.5em 24px;
    background-color: var(--ui-action-button-fill-color);
    border: 2px solid var(--semantic-stroke-primary);
    border-radius: var(--radius-full);
    font-weight: var(--ui-action-button-font-weight);
    font-size: var(--ui-action-button-font-size);
    color: var(--ui-action-button-text-color);
    line-height: var(--line-height-sm);
    transition: filter 0.2s ease;
  }

  :is(.action-close-button, .action-open-button)::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 12px;
    height: 12px;
    background-color: var(--semantic-fill-brand-primary);
  }

  .action-close-button::after {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--ui-action-button-close-icon-path);
    -webkit-mask-image: var(--ui-action-button-close-icon-path);
  }

  .action-open-button::after {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--ui-action-button-open-icon-path);
    -webkit-mask-image: var(--ui-action-button-open-icon-path);
  }

  @media (any-hover: hover) and (pointer: fine) {
    .action-close-button:is(:hover, [data-hover]) {
      filter: contrast(0.9);
    }
  }
}

@layer recipes {
  .apply-button {
    --ui-apply-button-background-color: var(--semantic-fill-brand-primary);
    --ui-apply-button-border-color: var(--semantic-stroke-brand-primary);
    --ui-apply-button-text-color: var(--semantic-text-on-accent);
    --ui-apply-button-icon-color: var(--semantic-text-on-accent);
    --ui-apply-button-width: var(--button-primary-md-width);
    --ui-apply-button-padding-block: var(--spacing-2-px);

    --ui-apply-button-icon-width: 20px;
    --ui-apply-button-icon-aspect-ratio: 20 / 26;
    --ui-apply-button-gap: var(--spacing-10-px);

    --fs-min: var(--clamp-font-size-18);
    --fs-max: var(--clamp-font-size-20);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--ui-apply-button-gap);
    width: var(--ui-apply-button-width);
    background-color: var(--ui-apply-button-background-color);
    border: var(--border-width-level-2) solid var(--ui-apply-button-border-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-raised);
    font-weight: var(--font-weight-bold);
    color: var(--ui-apply-button-text-color);
    line-height: var(--line-height-sm);
    cursor: pointer;
    padding-block: var(--ui-apply-button-padding-block);
    container-type: inline-size;
  }

  .apply-button::before {
    content: "";
    mask-image: var(--ico-apply);
    -webkit-mask-image: var(--ico-apply);
    aspect-ratio: var(--ui-apply-button-icon-aspect-ratio);
    width: var(--ui-apply-button-icon-width);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: var(--ui-apply-button-icon-color);
  }

  :where(.featured-box) .apply-button {
    --ui-apply-button-width: var(--button-primary-md-width);
  }

  @media screen and (min-width: 40.01em) {
    .apply-button {
      --ui-apply-button-padding-block: var(--spacing-4);
      --ui-apply-button-icon-width: 27px;
      --ui-apply-button-icon-aspect-ratio: 27 / 35;
    }
  }

  @media (any-hover: hover) {
    .apply-button {
      transition: background-color var(--motion-duration) ease-in-out, color var(--motion-duration)
        ease-in-out, border-color var(--motion-duration) ease-in-out;
    }

    .apply-button::before {
      transition: background-color var(--motion-duration) ease-in-out;
    }
  }

  @media (any-hover: hover) {
    .apply-button:is(:hover, [data-hover]) {
      --ui-apply-button-background-color: var(--semantic-fill-on-accent);
      --ui-apply-button-text-color: var(--semantic-text-brand-primary);
      --ui-apply-button-border-color: var(--semantic-stroke-brand-primary);
      --ui-apply-button-icon-color: var(--semantic-text-brand-primary);
    }
  }

  /* @media (any-hover: hover) {
    .apply-button:is(:hover, [data-hover])::before {
      background-color: var(--ui-apply-button-icon-color-hover);
    }
  } */
}

@layer recipes {
  .author-box {
    /* CSS変数の定義 -- tokens.css の変数に更新しています */
    --ui-author-box-padding: var(--spacing-6);
    /* literal value */
    --ui-author-box-border: var(--neutral-gray-200);
    /* tokens.css: --borders-sub-button */
    --ui-author-box-background-color: var(--semantic-fill-on-accent);
    /* 更新: --colors-white → --neutral-white (tokens.css) */
    --ui-author-box-border-radius: var(--radius-sm);
    /* 更新: --radii-sm → --radius-sm (tokens.css) */
    --ui-author-box-color: var(--neutral-black);
    /* 更新: --colors-text → --neutral-black (tokens.css) */
    --ui-author-box-font-size-name: var(--font-size-14);
    /* 対応するtokens.cssの変数がないためそのまま */
    --ui-author-box-font-size-description: var(--font-sizes-author-box-description);
    /* 対応するtokens.cssの変数がないためそのまま */

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: var(--ui-author-box-padding);
    border: 2px solid var(--ui-author-box-border);
    background-color: var(--ui-author-box-background-color);
    border-radius: var(--ui-author-box-border-radius);
    color: var(--ui-author-box-color);
  }

  .author-box > img {
    flex-shrink: 0;
    width: 71px;
    /* literal value; tokens.cssに対応する変数が見当たらないためそのまま */
    height: auto;
  }

  .author-box > figcaption > cite,
  .author-box > p > cite {
    display: block;
    margin-bottom: 0.5rem;
    /* 対応するtokens.cssの変数が存在しないためそのまま */
    font-size: var(--ui-author-box-font-size-name);
  }

  .author-box > figcaption > a,
  .author-box > p > a {
    display: block;
    margin-top: 0.5rem;
    /* 対応するtokens.cssの変数が存在しないためそのまま */
  }

  .author-box > figcaption {
    display: contents;
  }

  .author-box > figcaption,
  .author-box > p {
    font-size: var(--ui-author-box-font-size-description);
  }

  :has(> .author-box) {
    container: author-box / inline-size;
  }

  :where(.box-fill) .author-box {
    border-color: transparent;
  }

  section:has(> .author-box) {
    margin-top: 2.5rem;
    /* 対応するtokens.cssの変数が存在しないためそのまま */
  }

  section > .author-box:first-child {
    margin-top: 1.25rem;
    /* 対応するtokens.cssの変数が存在しないためそのまま */
  }

  .author-box .registered-trademark {
    width: 0.8rem;
    /* literal value */
    display: inline-block;
    padding-inline: 2px;
    /* literal value */
  }

  @container author-box (min-width: 40.01rem) {
    .author-box > img {
      width: 100px;
      /* literal value */
      height: auto;
    }

    .author-box > figcaption {
      display: block;
    }

    .author-box {
      --ui-author-box-font-size-name: var(--font-size-16);

      justify-content: center;
      align-items: flex-start;
      gap: 18px;
      /* literal value */
      flex-wrap: nowrap;
    }
  }
  .author-box sup > svg {
    width: 1.4rem;
    aspect-ratio: 1;
    vertical-align: top;
    display: inline;
  }
}

@layer recipes {
  .badge {
    /* Size variables - default is sm */
    --ui-badge-font-size: var(--font-size-14);
    --ui-badge-padding-block: var(--spacing-1);
    --ui-badge-padding-inline: var(--spacing-2-px);
    --ui-badge-min-width: auto;

    /* Style variables */
    --ui-badge-fill-color: var(--semantic-fill-primary);
    --ui-badge-text-color: var(--semantic-text-primary);
    --ui-badge-font-weight: var(--font-weight-normal);

    display: inline-grid;
    place-items: center;
    padding: var(--ui-badge-padding-block) var(--ui-badge-padding-inline);
    background-color: var(--ui-badge-fill-color);
    border: var(--border-width-level-1) solid var(--ui-badge-text-color);
    border-radius: var(--radius-md);
    color: var(--ui-badge-text-color);
    font-size: var(--ui-badge-font-size);
    font-weight: var(--ui-badge-font-weight);
    line-height: var(--line-height-one);
    inline-size: fit-content;
    min-width: var(--ui-badge-min-width);
  }

  .badge + .badge {
    margin-left: 4px;
  }

  /* Vertical alignment with subgrid */
  .badge[data-align="vertical"] {
    grid-template-columns: subgrid;
    grid-column: 1;
  }

  /* Size variations */
  .badge[data-size="md"] {
    --ui-badge-font-size: var(--font-size-16);
    --ui-badge-padding-block: var(--spacing-2);
    --ui-badge-padding-inline: var(--spacing-3);
  }

  .badge[data-size="lg"] {
    --ui-badge-font-size: var(--font-size-18);
    --ui-badge-padding-block: var(--spacing-2);
    --ui-badge-padding-inline: var(--spacing-4);
  }

  /* Color variants - using consistent patterns */
  .badge[data-variant="green"],
  .badge[data-variant="blue"] {
    --ui-badge-font-weight: var(--font-weight-bold);
    --ui-badge-text-color: var(--neutral-white);
  }

  /* Legacy small size for green/blue - only when no size is specified */
  .badge[data-variant="green"]:not([data-size]),
  .badge[data-variant="blue"]:not([data-size]) {
    --ui-badge-font-size: var(--font-size-12);
  }

  .badge[data-variant="green"] {
    --ui-badge-fill-color: var(--primitive-green-500);
    border-color: var(--primitive-green-500);
  }

  .badge[data-variant="blue"] {
    --ui-badge-fill-color: var(--primitive-blue-500);
    border-color: var(--primitive-blue-500);
  }

  .badge[data-variant="gray"] {
    --ui-badge-fill-color: var(--neutral-gray-536);
    --ui-badge-text-color: var(--neutral-white);
    border-color: var(--neutral-gray-536);
  }

  .badge[data-variant="gray-fill"] {
    --ui-badge-fill-color: var(--semantic-fill-primary);
    --ui-badge-text-color: var(--semantic-text-primary);
    border-color: var(--semantic-fill-primary);
  }

  .badge[data-variant="ghost"] {
    --ui-badge-fill-color: transparent;
    --ui-badge-text-color: currentColor;
    border-color: currentColor;
  }

  .badge[data-variant="brand-primary"] {
    --ui-badge-fill-color: var(--semantic-fill-brand-primary);
    --ui-badge-text-color: var(--neutral-white);
    --ui-badge-font-weight: var(--font-weight-bold);
    border-color: var(--semantic-fill-brand-primary);
  }

  .badge[data-variant="brand-secondary"] {
    --ui-badge-fill-color: var(--semantic-fill-brand-secondary);
    --ui-badge-text-color: var(--neutral-white);
    --ui-badge-font-weight: var(--font-weight-bold);
    border-color: var(--semantic-fill-brand-secondary);
  }

  .badge[data-variant="brand-tertiary"] {
    --ui-badge-fill-color: var(--semantic-fill-brand-tertiary);
    --ui-badge-text-color: var(--neutral-white);
    --ui-badge-font-weight: var(--font-weight-bold);
    border-color: var(--semantic-fill-brand-tertiary);
  }

  .badge[data-variant="warn"] {
    --ui-badge-fill-color: var(--semantic-fill-warn-light);
    --ui-badge-text-color: var(--semantic-text-warn);
    --ui-badge-font-weight: var(--font-weight-bold);
    border-color: var(--semantic-fill-warn);
  }

  .badge[data-variant="positive"] {
    --ui-badge-fill-color: var(--semantic-fill-positive-light);
    --ui-badge-text-color: var(--semantic-fill-positive);
    --ui-badge-font-weight: var(--font-weight-bold);
    border-color: var(--semantic-fill-positive);
  }

  @media screen and (min-width: 40.01em) {
    .badge[data-variant="green"],
    .badge[data-variant="blue"] {
      --ui-badge-font-size: var(--font-size-13);
    }
  }
}

@layer recipes {
  .basic-division {
    display: grid;
    gap: var(--spacing-gap-stack);
    grid-template-columns: 1fr;
    container: division / inline-size;
  }

  /* .basic-division:has(> .heading-level2:first-of-type) {
    margin-block-start: 0;
  } */

  .basic-division:has(> .heading-level3) {
    row-gap: var(--spacing-gap-stack);
  }

  .basic-division .last-child-center {
    justify-self: center;
  }

  .basic-division > :where(div) > * + * {
    margin-block-start: var(--spacing-gap-stack);
  }

  /* .basic-division + div {
    margin-block-start: var(--spacing-gap-stack);
  } */

  .basic-division :where(img, figure) {
    place-self: center;
    width: 100%;
  }

  .basic-division > img {
    margin-block-start: 0;
  }

  @media screen and (min-width: 40.01em) {
    .basic-division {
      grid-template-columns: [division-start] auto [first-content] 1fr [second-content] auto [division-end];
    }

    .basic-division .last-child-center {
      grid-column-start: division-start;
      grid-column-end: division-end;
      justify-self: center;
    }
  }

  @media screen and (min-width: 40.01em) {
    .basic-division :where(h2, h3, h4) {
      grid-column-start: division-start;
      grid-column-end: division-end;
    }
  }

  @media screen and (min-width: 40.01em) {
    .basic-division .accent {
      grid-column-start: second-content;
      grid-column-end: division-end;
    }

    .basic-division .accent + *,
    .basic-division:has(.accent) :where(p, div:not([class]):has(> p)),
    .basic-division:has(.accent) > ul {
      grid-column-start: division-start;
      grid-column-end: second-content;
    }
  }

  @media screen and (min-width: 40.01em) {
    .basic-division :where(p, div:not([class]):has(> p)),
    .basic-division > ul {
      grid-column-start: first-content;
      grid-column-end: division-end;
    }
  }

  @media screen and (min-width: 40.01em) {
    .basic-division :where(img, figure) {
      grid-column-start: division-start;
      grid-column-end: first-content;
      place-self: start;
      /* 暫定対応 */
      max-inline-size: calc((100cqw - var(--spacing-gap-stack)) * 0.4);
    }
    /* mock画像の場合はサイズを解除 */
    .basic-division:has(.mock) :where(img, figure) {
      max-inline-size: unset;
    }
  }
}

@layer recipes {
  @media (width > 40.01rem) {
    .basic-division:has(> h2, > h3, > h4) {
      & > :nth-child(2),
      & > :nth-child(3) {
        grid-row: 2;
      }

      & > :nth-child(4),
      & > :nth-child(5) {
        grid-row: 3;
      }

      & > :nth-child(6),
      & > :nth-child(7) {
        grid-row: 4;
      }

      & > :nth-child(8),
      & > :nth-child(9) {
        grid-row: 5;
      }

      & > :nth-child(10),
      & > :nth-child(11) {
        grid-row: 6;
      }
    }

    .basic-division:not(:has(> h2, > h3, > h4)) {
      & > :nth-child(1),
      & > :nth-child(2) {
        grid-row: 1;
      }

      & > :nth-child(3),
      & > :nth-child(4) {
        grid-row: 2;
      }

      & > :nth-child(5),
      & > :nth-child(6) {
        grid-row: 3;
      }

      & > :nth-child(7),
      & > :nth-child(8) {
        grid-row: 4;
      }

      & > :nth-child(9),
      & > :nth-child(10) {
        grid-row: 5;
      }
    }
  }
}

@layer recipes {
  .border-link {
    --reverse-link-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.41414 10.0001L12.707 5.70718L11.2928 4.29297L5.58571 10.0001L11.2928 15.7072L12.707 14.293L8.41414 10.0001Z" fill="%23004E97"/></svg>');

    --ui-border-link-foreground-default: var(--primitive-indigo-500);
    --ui-border-link-foreground-hover: var(--primitive-indigo-400);
    --mask-icon: var(--ico-arrow-right-blue);
    --mask-color: var(--ui-border-link-foreground-default);

    display: block grid;
    text-align: left;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-3);
    width: fit-content;
    align-items: center;
    padding-bottom: 0.2em;
    color: var(--ui-border-link-foreground-default);
    font-size: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border-bottom: var(--border-width-level-1) solid var(--ui-border-link-foreground-default);

    &::after {
      content: "";
      mask-image: var(--mask-icon);
      mask-repeat: no-repeat;

      background-color: var(--mask-color);
    }
  }

  :is(.border-link[href^="/"], .border-link[href*="sonysonpo.co.jp"], .border-link.--arrow)::after {
    mask-position: right -1.5px;
    block-size: 11px;
    inline-size: 8px;
  }

  .border-link[href^="#"] {
    &::after {
      --mask-icon: var(--ico-arrow-bottom-blue);
      block-size: 9px;
      inline-size: 13px;
    }
  }

  .border-link[href*=".pdf"] {
    --mask-icon: ;
    gap: var(--spacing-4);

    &::after {
      /* background-position-y: -2px; */
      background-repeat: no-repeat;
      background-color: transparent;
      background-image: var(--ico-pdf);
      block-size: 100%;
      inline-size: 17px;
      mask: none;
    }
  }

  .border-link[data-js-dialog] {
    --mask-icon: var(--ico-open-blue);

    &::after {
      block-size: 12px;
      inline-size: 12px;
    }
  }

  .border-link[target="_blank"]:not([href*=".pdf"]) {
    --mask-icon: var(--ico-window-blue);

    &::after {
      block-size: 12px;
      inline-size: 12px;
      mask-position: right 1px;
    }
  }

  .border-link[data-link-style="back-link"] {
    gap: var(--spacing-0-5-px);

    &::before {
      content: "";
      mask-image: var(--reverse-link-icon);
      mask-repeat: no-repeat;
      background-color: var(--mask-color);
      block-size: 21px; /* 視覚効果 */
      inline-size: 20px;
    }
    &::after {
      content: none;
    }
  }

  p > .border-link {
    margin-block-start: 0.5rem;
  }

  @media (any-hover: hover) {
    .border-link:is(:hover, [data-hover]) {
      color: var(--ui-border-link-foreground-hover);
      --mask-color: var(--ui-border-link-foreground-hover);
      border-bottom-color: transparent;
    }
  }

  .border-link:not(.no-icon, .reverse, .pdf, .window, [data-js-dialog]) {
    --mask-icon: var(--ico-arrow-right-blue);
  }

  .border-link.no-icon[aria-expanded="true"] {
    &:is(:hover, [data-hover])::before,
    &::before {
      --mask-icon: var(--ico-arrow-bottom-blue);
    }
  }

  .border-link.pdf {
    &::before {
      mask: none;
      background-image: var(--ico-pdf);
    }
  }

  .border-link.external {
    &::before {
      --mask-icon: var(--ico-open-blue);
    }
  }

  .border-link.window {
    &::before {
      --mask-icon: var(--ico-window-blue);
    }
  }
}

@layer recipes {
  .bottom-global-nav .notice {
    text-align: left;
    padding: 7px calc(20px + 1em) 10px;
    text-indent: -1em;
    background-color: var(--semantic-fill-primary);
    border-top: var(--border-width-level-2) solid var(--semantic-stroke-secondary);
    font-size: var(--font-size-12);
    color: var(--semantic-text-secondary);
    line-height: var(--line-height-md);
  }

  .bottom-global-nav .notice > span {
    margin-right: var(--spacing-1);
  }

  .bottom-global-nav .notice > a {
    padding-bottom: 0.2em;
    border-bottom: var(--border-width-level-1) solid;
    color: var(--semantic-text-link);
    text-decoration: none;
  }

  .bottom-global-nav .general-nav {
    --ui-general-nav-background: var(--neutral-gray-700);
    background-color: var(--ui-general-nav-background);
    border-top: none;
  }

  .bottom-global-nav .general-nav > ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-4);
    max-width: 100%;
    margin: auto;
    padding: 14px 20px 18px;
  }

  .bottom-global-nav .general-nav > ul > li {
    --fs-min: var(--clamp-font-size-14);
    --fs-max: var(--clamp-font-size-15);

    position: relative;
    background: var(--ico-arrow-right-white-small) no-repeat center left / 7px 11px;
    width: calc(50% - 8px);
    padding: 10px 0;

    color: var(--semantic-text-on-accent);
  }

  /* .bottom-global-nav .general-nav > ul > li::before {
    content: none;

  } */

  .bottom-global-nav .general-nav > ul > li > a {
    margin-inline-start: var(--spacing-4);
    color: var(--semantic-text-on-accent);
    text-decoration: none;
  }

  /* .bottom-global-nav .site-policy-nav {
    border-top: none;
  } */

  .bottom-global-nav .site-policy-nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--spacing-4);
    row-gap: var(--spacing-2);
    /* width: var(--sizes-bottom-global-nav-site-policy-width); */
    max-width: 100%;
    margin: auto;
    padding: 20px;
  }

  .bottom-global-nav .site-policy-nav > ul > li {
    position: relative;
    font-size: var(--font-size-12);
  }

  .bottom-global-nav .site-policy-nav > ul > li:not(:last-child)::after {
    content: "|";
    position: absolute;
    top: 0;
    right: -8px;
    width: 1px;
    height: 11px;
  }

  .bottom-global-nav .site-policy-nav > ul > li:nth-child(3)::after {
    content: "";
  }

  .bottom-global-nav .site-policy-nav > ul > li > a {
    color: var(--semantic-text-secondary);
    text-decoration: none;
  }

  .bottom-global-nav .copyright {
    padding: 10px;
    background-color: var(--semantic-fill-on-accent);
    border-top: var(--border-width-level-1) solid var(--semantic-stroke-secondary);
    text-align: center;
    color: var(--semantic-text-secondary);
    font-family: lato sans-serif;
    letter-spacing: 0.02em;
  }

  .bottom-global-nav .copyright > small {
    display: block;
    padding: 0;
    max-width: 100%;
    margin: auto;
    font-size: var(--font-size-12);
  }

  @media screen and (min-width: 40.01em) {
    .bottom-global-nav {
      --ui-footer-width: 1280px;
    }
    .bottom-global-nav .notice {
      text-align: center;
      padding: var(--spacing-4) var(--spacing-5-px);
      text-indent: 0;
      border-top: var(--border-width-level-2) solid var(--semantic-stroke-on-accent);
    }

    .bottom-global-nav .general-nav {
      background-color: transparent;
      border-top: var(--border-width-level-1) solid var(--semantic-stroke-secondary);
    }

    .bottom-global-nav .general-nav > ul {
      /* TODO max-width 変数 にする */
      max-width: var(--ui-footer-width);
      margin-inline: auto;
      padding: var(--spacing-5) var(--spacing-5-px);
    }

    .bottom-global-nav .general-nav > ul > li {
      background: none;
      width: auto;
      padding: 0;
      color: var(--semantic-text-primary);
    }

    .bottom-global-nav .general-nav > ul > li::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 7px;
      height: 11px;
      background-color: var(--semantic-text-secondary);
      clip-path: polygon(0 0, 0% 100%, 100% 50%);
      -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }

    .bottom-global-nav .general-nav > ul > li > a {
      color: var(--semantic-text-secondary);
    }

    .bottom-global-nav .site-policy-nav {
      border-top: var(--border-width-level-1) solid var(--semantic-stroke-secondary);
    }

    .bottom-global-nav .site-policy-nav > ul {
      justify-content: flex-start;
      column-gap: var(--spacing-6-px);
      row-gap: 0;
      max-width: var(--ui-footer-width);
      margin-inline: auto;
      padding: var(--spacing-5) var(--spacing-5-px);
    }

    .bottom-global-nav .site-policy-nav > ul > li {
      color: var(--semantic-text-secondary);
    }

    .bottom-global-nav .site-policy-nav > ul > li:not(:last-child)::after {
      right: -12px;
    }

    .bottom-global-nav .site-policy-nav > ul > li:nth-child(3)::after {
      content: "|";
    }

    .bottom-global-nav .copyright {
      --ui-footer-copyright-background: var(--neutral-gray-400);
      padding: var(--spacing-4) 0;
      background-color: var(--ui-footer-copyright-background);
      border-top: none;
      text-align: left;
      color: var(--semantic-text-on-accent);
    }

    .bottom-global-nav .copyright > small {
      padding: 0 20px;
      max-width: var(--ui-footer-width);
      margin-inline: auto;
    }
  }

  @media (any-hover: hover) {
    .bottom-global-nav .notice > a:is(:hover, [data-hover]) {
      border-bottom: none;
    }

    .bottom-global-nav .general-nav > ul > li > a:is(:hover, [data-hover]) {
      border-bottom: var(--border-width-level-1) solid;
    }

    .bottom-global-nav .site-policy-nav > ul > li > a:is(:hover, [data-hover]) {
      border-bottom: var(--border-width-level-1) solid;
    }
  }
}

@layer recipes {
  :where(*:has(> .box-border-with-heading)) {
    /* 親要素の塗が白以外の場合を優先。
  塗りの指定がない場合に透過の白がデフォルトで指定されてしまうため
  詳細度なしで直接の親要素に背景色を指定 */

    background-color: var(--semantic-background-body);
    container-type: inline-size;
  }

  .box-border-with-heading {
    /* --ui--image-width: 31%; */

    position: relative;
    display: flex;
    block-size: max-content;
    align-items: center;
    justify-content: center;
    gap: 0 var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border: var(--border-width-level-1) solid var(--semantic-stroke-primary);
    border-radius: var(--radius-md);
    background-color: inherit;
  }

  .box-border-with-heading.small {
    font-size: var(--font-size-13);
  }

  .box-border-with-heading .heading {
    position: absolute;
    top: -12.5px;
    inset-inline: 0;
    width: fit-content;
    margin: auto;
    padding: 0 var(--spacing-4);
    background-color: inherit;
    font-weight: var(--font-weight-bold);
  }

  figure.box-border-with-heading img {
    margin: auto;
    flex-shrink: 0;
    /* width: var(--ui--image-width); */
    /* height: auto; */
  }

  /* @media screen and (min-width: 40.01em) {
    figure.box-border-with-heading img {
      --ui--image-width: 144px;
    }
  } */
}

@layer recipes {
  .box-fill-border {
    --ui-padding-block: var(--spacing-5);
    --ui-padding-inline: var(--spacing-5);
    --ui-border-color: var(--semantic-stroke-primary);
    --ui-box-fill-border-radius: var(--radius-md);

    background-color: var(--colors-background-color);
    padding: var(--ui-padding-block) var(--ui-padding-inline);
    border-radius: var(--ui-box-fill-border-radius);
    border: var(--border-width-level-2) solid var(--ui-border-color);
  }

  .box-fill-border:is(.color-orange, .brand-primary) {
    --ui-border-color: var(--semantic-stroke-brand-primary);
    background-color: var(--semantic-fill-brand-primary-light);
  }

  @media screen and (min-width: 40.01em) {
    .box-fill-border {
      --ui-padding-block: var(--spacing-6);
      --ui-padding-inline: var(--spacing-6);
    }
  }
}

@layer recipes {
  .box-fill {
    --ui-box-fill-background: var(--semantic-fill-primary);
    --ui-padding-block: var(--spacing-6);
    --ui-padding-inline: var(--spacing-6-px);

    background-color: var(--ui-box-fill-background);
    padding: var(--ui-padding-block) var(--ui-padding-inline);
    border-radius: var(--radius-md);

    &:has(h2, h3, h4, h5, h6, p:first-child > strong) {
      --ui-padding-block: var(--spacing-10);
      --ui-padding-inline: var(--spacing-10-px);
    }
  }

  .box-fill[data-is-brand="true"] {
    --ui-box-fill-background: var(--semantic-fill-brand-primary-light);
  }

  @media screen and (min-width: 40.01em) {
    .box-fill {
      /* --ui-padding-block: var(--spacing-10);
      --ui-padding-inline: var(--spacing-10-px); */

      margin-block-start: var(--spacing-2);
      > * + * {
        margin-block-start: var(--spacing-6);
      }
    }
  }

  .box-fill:has(.box-fill-media) {
    display: grid;
    gap: var(--spacing-5) var(--spacing-10-px);
    place-items: center;

    &:has(.box-fill-media:nth-child(2)) {
      place-items: unset;

      @media screen and (min-width: 40.01em) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    > * + * {
      @media screen and (min-width: 40.01em) {
        margin-block-start: 0;
      }
    }

    > .box-fill-media {
      display: flex;
      align-items: center;
      gap: var(--spacing-4);

      img {
        --is-min: 64;
        --is-max: 80;

        aspect-ratio: 1;
        background-color: var(--semantic-fill-on-accent);
        padding: var(--spacing-3);
        border-radius: var(--radius-md);
      }
    }
  }
}

@layer recipes {
  .box-outline {
    padding: var(--spacing-5) var(--spacing-5-px);
    border-radius: var(--radius-md);
    border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
  }

  @media screen and (min-width: 40.01em) {
    .box-outline {
      padding: var(--spacing-10) var(--spacing-10-px);
    }
  }

  /* コンポーネント内での見出し余白の振る舞い */
  .box-outline > section > :is(h2, h3, h4) {
    margin-block: 0;
  }
}

@layer recipes {
  nav:has(> .breadcrumb) {
    @media (max-width: 40.01rem) {
      --content-side-space: 0;
    }
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-2-px);
  }

  .breadcrumb > :where(li) {
    font-size: var(--font-size-12);
    color: #333;
  }

  .breadcrumb > :where(li):not(:last-child)::after {
    content: ">" / " ";
    margin-inline: var(--spacing-1);
    cursor: none;
  }

  .breadcrumb > :where(li) > :where(a) {
    color: var(--semantic-text-secondary);
    /* font-weight: var(--font-weight-bold); */
    text-decoration: none;
  }
  .breadcrumb > :where(li) > :where(span) {
    /* font-weight: var(--font-weight-bold); */
    text-decoration: none;
  }

  @media screen and (min-width: 40.01em) {
    .breadcrumb {
      padding: var(--spacing-2) 0;
    }
  }

  @media (any-hover: hover) {
    .breadcrumb > :where(li) > :where(a):is(:hover, [data-hover]) {
      text-decoration: underline;
    }
  }
}

@layer recipes {
  .bullet-list:not(.check),
  .bullet-list > li {
    padding-inline-start: var(--spacing-2);
  }

  .bullet-list > li {
    line-height: var(--line-height-md);
    margin-bottom: var(--spacing-2);
    position: relative;
  }

  [data-ua="safari"] .bullet-list:not(.check) > li::before {
    content: "\2022";
    font-weight: var(--font-weight-bold);
    position: absolute;
    left: -0.35em;
    display: inline-block;
    width: 0.8rem;
    height: 1rem;
  }

  [data-ua="safari"] .bullet-list:not(.check) > li:has(.border-link)::before {
    color: var(--ui-border-link-foreground-default);
  }

  .bullet-list:not(.check) > li:has(.border-link)::marker {
    color: var(--ui-border-link-foreground-default);
  }

  .bullet-list:not(.check) > li::marker {
    content: "\2022";
    font-weight: var(--font-weight-bold);
  }

  .bullet-list.check > li {
    padding-inline-start: var(--spacing-6);
    text-indent: calc(-1 * var(--spacing-6));
  }

  .bullet-list.check > li::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-inline-end: var(--spacing-2);
    background-color: var(--semantic-text-brand-primary);
    -webkit-mask-image: var(--ico-check);
    mask-image: var(--ico-check);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position-y: bottom;
    mask-position-y: bottom;
  }

  @media screen and (min-width: 40.01em) {
    .bullet-list.check > li::before {
      width: 16px;
      height: 16px;
    }
  }
}

@layer recipes {
  .call-button {
    --ui-button-font-size: var(--font-size-14);
    --ui-button-min-inline-size: 210px;
    --ui-button-background-color: var(--semantic-fill-on-accent);
    --ui-button-elevation: var(--shadow-1);
    --ui-icon-fill-color: var(--semantic-text-brand-primary);
    --ui-button-padding: .515625rem 18px;
    --ui-call-button-text: var(--semantic-text-brand-primary);
    --ui-call-button-right-icon: var(--icon-arrow-right-sm);

    position: relative;
    display: grid;
    grid-template-columns: auto 0;
    gap: var(--spacing-2-px);
    place-items: center;
    inline-size: fit-content;
    min-inline-size: var(--ui-button-min-inline-size);
    padding: var(--ui-button-padding);
    background-color: var(--ui-button-background-color);
    border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--ui-button-font-size);
    line-height: var(--line-height-sm);
    color: var(--semantic-text-primary);
  }

  .call-button:not(.icon)::after {
    content: "";
    inline-size: 20px;
    block-size: 20px;
    background-color: var(--ui-icon-fill-color);
    mask-image: var(--ui-call-button-right-icon);
    mask-repeat: no-repeat;
    mask-size: contain;
    position: relative;
  }

  .call-button:not(.icon)[data-js-dialog]::after {
    --ui-call-button-right-icon: var(--icon-plus-sm);
  }

  :has(> .call-button) {
    container: call-button / inline-size;
  }

  .call-button.icon {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    width: 299px;
    --ui-button-font-size: var(--font-size-button-lg);

    box-shadow: var(--ui-button-elevation);
    padding-block: 14px;

    &::before {
      mask-image: var(--ico-apply);
      mask-repeat: no-repeat;
      mask-size: contain;
      /* -webkit-mask-image: var(--ico-apply); */
      content: "";
      display: inline-block;
      background-color: var(--ui-call-button-text);
    }
  }

  @container call-button (min-width: 40.01rem) {
    .call-button {
      --ui-button-padding: 0.625rem 30px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .call-button {
      --ui-button-padding: 0.625rem 20px;
    }

    .call-button.icon {
      width: 294px;
      padding-block: var(--spacing-4);
    }

    .call-button.icon::before {
      aspect-ratio: 27 / 35;
      width: 27px;
    }
  }

  @media (any-hover: hover) {
    .call-button {
      transition: filter 0.2s ease;
    }
  }

  @media (any-hover: hover) {
    .call-button:is(:hover, [data-hover]) {
      filter: contrast(0.9);
    }
  }
}

@layer recipes {
  .category-navigation {
    background-color: var(--semantic-fill-brand-primary-light);
    padding-block: var(--spacing-8);
    display: grid;
    gap: var(--spacing-6);
  }

  .category-navigation > [data-fire-smallest-category]:not(.current):not(:has(.current)) {
    display: none;
  }

  .category-navigation > [data-fire-smallest-category] li:has(.current) {
    display: none;
  }

  .category-navigation
    > [data-fire-smallest-category]:has(li:nth-child(n + 6) .current)
    li:nth-child(n + 6) {
    display: none;
  }

  .category-navigation
    > [data-fire-smallest-category]:has(li:nth-child(-n + 5) .current)
    li:nth-child(n + 7) {
    display: none;
  }

  .category-navigation > .recommended-list {
    margin-inline: auto;
  }

  .category-navigation > .recommended-list > h2 {
    text-align: center;
    font-size: var(--heading-level-3); /* M18 D24 */
    font-weight: var(--font-weight-bold);
  }

  .category-navigation > .recommended-list > h2:has(> a) {
    text-align: left;
  }

  .category-navigation > .recommended-list > h2 > a {
    display: inline-flex;
    align-items: center;
    line-height: var(--line-height-md);
    gap: 10px;
    border-bottom: 1px solid var(--colors-button);
  }

  .category-navigation > .recommended-list > h2 > a::after {
    content: "";
    mask-image: var(--ico-arrow-right-white);
    -webkit-mask-image: var(--ico-arrow-right-white);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: var(--semantic-text-primary);
    width: 10px;
    height: 17px;
  }

  .category-navigation > .recommended-list > ul {
    display: grid;
    gap: 12px;
    margin-top: var(--spacing-2);
  }

  .category-navigation > .recommended-list > ul > li {
    display: contents;
  }

  .category-navigation > .recommended-list > ul > li > a {
    position: relative;
    display: block;
    background-color: var(--semantic-fill-on-accent);
    padding: 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-14);
    transition: border 0.2s ease;
    border: var(--border-width-level-2) solid var(--semantic-stroke-on-accent);
  }

  .category-navigation > .recommended-list > ul > li > a[aria-current="page"] {
    border: var(--borders-navigation-current);
  }

  .category-navigation > .recommended-list > ul > li > a[aria-current="page"]::after {
    opacity: 0.6;
  }

  .category-navigation > .recommended-list > ul > li > a::after {
    position: absolute;
    right: 10px;
    bottom: 10px;
    content: "";
    display: block;
    width: 11px;
    height: 12px;
    mask-image: var(--ico-arrow-excursion);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--semantic-fill-brand-primary);
  }

  .category-navigation > .recommended-list > ul > li > a > img {
    max-width: 80px;
    width: 100%;
    grid-area: image;
    margin-inline: auto;
  }

  .category-navigation > .recommended-list > ul > li > a > .title {
    grid-area: title;
    color: var(--semantic-text-primary);
    font-weight: var(--font-weight-bold);
  }

  .category-navigation > .recommended-list > ul > li > a > .description {
    grid-area: content;
    color: var(--semantic-text-primary);
  }

  .category-navigation > .recommended-list > ul.icon-link > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
  }

  .category-navigation > .recommended-list > ul.icon-link > li > a > img {
    max-width: 40px;
    margin-inline: 0;
  }

  .category-navigation > .recommended-list > ul.icon-link > li > a > .title {
    margin-top: 0;
    color: var(--semantic-text-primary);
  }

  .category-navigation > .recommended-list > ul:has(img) > li > a {
    display: grid;
  }

  .category-navigation > .recommended-list > ul:has(img) > li > a {
    grid-template-columns: 80px 1fr;
    row-gap: 10px;
    column-gap: 5px;
    grid-template-areas: "image title" "content content";
  }

  .category-navigation > .recommended-list > .internal-link {
    margin-top: var(--spacing-5);
  }

  .category-navigation > .category-level-block {
    display: grid;
    gap: var(--spacing-5);
  }

  .category-navigation > .category-level-block:not(:has(.current)) {
    display: none;
  }

  .category-navigation > .category-level-block > .category-level {
    background-color: var(--semantic-fill-on-accent);
    border-radius: var(--radius-sm);
    padding: 20px;
  }

  .category-navigation > .category-level-block > .category-level:not(:has(.current)) {
    display: none;
  }

  .category-navigation > .category-level-block > .category-level > h2 {
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-18);
  }

  .category-navigation > .category-level-block > .category-level > ul {
    margin-top: var(--spacing-5);
  }

  .category-navigation > .category-level-block > .category-level > ul > li {
    margin-top: var(--spacing-3);
  }

  .category-navigation > .category-level-block > .category-level > ul > li.current {
    display: none;
  }

  .category-navigation > .category-level-block > .category-level > ul > li > a {
    border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
    border-radius: var(--radius-md);
    position: relative;
    display: block;
    align-items: center;
    min-height: 60px;
    padding: 19px 30px 19px 19px;
    cursor: pointer;
    text-decoration: none;
    transition: border 0.2s ease;
  }

  .category-navigation > .category-level-block > .category-level > ul > li > a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    width: 9px;
    height: 13px;
    background-color: var(--semantic-fill-brand-primary);
    mask-image: var(--ico-arrow-right-orange);
    -webkit-mask-image: var(--ico-arrow-right-orange);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  .category-navigation > .category-level-block > .category-level > ul > li > a > .title {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sm);
  }

  .category-navigation > .category-level-block > .category-level > ul > li > a > .description {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-normal);
  }

  .category-navigation > [data-category-guide].current {
    display: none;
  }

  .category-navigation > .button {
    margin-inline: auto;
  }

  .category-navigation > .internal-link {
    margin-top: var(--spacing-5);
  }

  @media screen and (min-width: 40.01em) {
    .category-navigation {
      padding-block: 63px 74px;
      gap: var(--spacing-16);
    }

    .category-navigation > .recommended-list > ul {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: var(--spacing-6);
    }

    .category-navigation > .recommended-list > ul > li > a {
      padding: 26px 26px 40px;
    }

    .category-navigation > .recommended-list > ul > li > a > img {
      max-width: 191px;
    }

    .category-navigation > .recommended-list > ul > li > a > img + .title {
      margin-top: var(--spacing-3);
    }

    .category-navigation > .recommended-list > ul > li > a > .description {
      margin-top: var(--spacing-2);
    }

    .category-navigation > .recommended-list > ul.icon-link > li > a > img {
      max-width: 50px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .category-navigation > .recommended-list > ul:has(img) > li > a {
      display: block;
    }
  }

  @media screen and (min-width: 40.01em) {
    .category-navigation > .recommended-list > .internal-link {
      margin-top: var(--spacing-10);
    }

    .category-navigation > .category-level-block {
      gap: var(--spacing-10);
    }

    .category-navigation > .category-level-block > .category-level {
      padding: 35px 40px;
    }

    .category-navigation > .category-level-block > .category-level > h2 {
      font-size: var(--font-size-20);
    }

    .category-navigation > .category-level-block > .category-level > ul > li {
      margin-top: var(--spacing-5);
    }

    .category-navigation > .category-level-block > .category-level > ul > li > a {
      display: grid;
      grid-template-columns: 1fr 2.5fr;
      gap: 12px;
      padding: 19px 40px;
    }

    .category-navigation > .category-level-block > .category-level > ul > li > a > .title {
      font-size: var(--font-sizes-5);
    }

    .category-navigation > .category-level-block > .category-level > ul > li > a > .description {
      margin-top: 0;
    }

    .category-navigation > .internal-link {
      margin-top: var(--spacing-10);
    }
  }

  @media (any-hover: hover) {
    .category-navigation > .recommended-list > h2 > a:is(:hover, [data-hover]) {
      color: var(--semantic-fill-brand-secondary);
      border-color: transparent;
    }
  }

  @media (any-hover: hover) {
    .category-navigation > .recommended-list > h2 > a:is(:hover, [data-hover])::after {
      background-color: var(--semantic-fill-brand-secondary);
    }
  }

  @media (any-hover: hover) {
    .category-navigation > .recommended-list > ul > li > a:is(:hover, [data-hover]) {
      border: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
    }
  }

  @media (any-hover: hover) {
    .category-navigation
      > .category-level-block
      > .category-level
      > ul
      > li
      > a:is(:hover, [data-hover]) {
      border-color: var(--neutral-gray-500);
    }
  }
}

@layer recipes {
  :where(:root, :host, [data-theme]) {
    --ui-description-list-font-size: var(--font-size-14);
    --ui-description-list-row-gap: var(--spacing-2); /* 例: リスト間の上下余白 */
    --ui-description-list-column-gap: var(--spacing-5-px); /* 例: タイトルと説明文の左右余白 */
    --ui-description-list-title-inner-size: 75%;
    --ui-description-list-between-margin: var(--spacing-4);
  }
  .description-list {
    font-size: var(--ui-description-list-font-size);
  }

  :has(> .description-list) {
    container: description-list / inline-size;
  }

  .description-list dt {
    font-weight: var(--font-weight-bold);
  }

  @container description-list (min-width: 40.01rem) {
    .description-list {
      place-content: start;
      display: grid;
      grid-template-columns: minmax(5rem, auto) minmax(
          var(--ui-description-list-title-inner-size),
          1fr
        );
      gap: var(--ui-description-list-row-gap) var(--ui-description-list-column-gap);
    }
  }

  .description-list:has(.badge) {
    place-content: start;
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(
        var(--ui-description-list-title-inner-size),
        1fr
      );
    gap: var(--ui-description-list-row-gap) var(--ui-description-list-column-gap);

    @media screen and (max-width: 40rem) {
      --ui-description-list-column-gap: var(--spacing-2-px);
    }
  }

  .description-list[data-style="table"] {
    --ui-description-table-padding: 0.5em;
    border: var(--ui-description-table-border);
    --ui-description-table-border: var(--border-width-level-1) solid var(--semantic-stroke-primary);
    border: var(--ui-description-table-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    gap: 0;

    @media screen and (min-width: 40.01rem) {
      --ui-description-table-padding: var(--spacing-4) var(--spacing-5-px);

      display: grid;
      grid-template-columns: minmax(250px, auto) 1fr;
    }

    dt,
    dd {
      padding: var(--ui-description-table-padding);
    }

    dt {
      background-color: var(--semantic-fill-primary);
      display: grid;
      align-items: center;
      /* text-align: center; */
      font-size: var(--font-size-16);

      @media screen and (min-width: 40.01rem) {
        text-align: left;
      }

      @media screen and (min-width: 40.01rem) {
        &:first-child + dd {
          border-top: 0;
        }
      }
    }

    dd {
      font-size: var(--font-size-14);
      border-top: var(--ui-description-table-border);

      @media screen and (min-width: 40.01rem) {
        border-left: var(--ui-description-table-border);
        font-size: var(--font-size-16);
      }

      + dt {
        border-top: var(--ui-description-table-border);
      }

      @media screen and (min-width: 40.01rem) {
        > ul {
          display: flex;
          gap: 1em;
        }
      }
    }
  }

  .description-list[data-align="center"] {
    :is(dt, dd) {
      text-align: center;
    }
  }
}

@layer recipes {
  .estimate-button {
    --ui-estimate-button-inline-size-pc: 440px;
    --ui-estimate-button-inline-size-sp: 299px;
    --ui-estimate-button-font-size-sp: var(--font-size-20);
    --ui-estimate-button-font-size-pc: var(--font-size-24);
    --ui-estimate-button-heading-font-size-sp: var(--font-size-12);
    --ui-estimate-button-heading-font-size-pc: var(--font-size-14);
    --ui-estimate-button-padding-block-sp: var(--spacing-3);
    --ui-estimate-button-padding-block-pc: var(--spacing-4);

    --ui-estimate-button-inline-size: clamp(
      var(--ui-estimate-button-inline-size-sp),
      var(--clamp-viewport-magic-number),
      var(--ui-estimate-button-inline-size-pc)
    );
    --ui-estimate-button-font-size: clamp(
      var(--ui-estimate-button-font-size-sp),
      var(--clamp-viewport-magic-number),
      var(--ui-estimate-button-font-size-pc)
    );
    --ui-estimate-button-heading-font-size: clamp(
      var(--ui-estimate-button-heading-font-size-sp),
      var(--clamp-viewport-magic-number),
      var(--ui-estimate-button-heading-font-size-pc)
    );
    --ui-estimate-button-padding-block: clamp(
      var(--ui-estimate-button-padding-block-sp),
      var(--clamp-viewport-magic-number),
      var(--ui-estimate-button-padding-block-pc)
    );

    --ui-estimate-button-foreground-enabled: var(--semantic-text-on-accent);
    --ui-estimate-button-foreground-hover: var(--primitive-red-500);

    --ui-estimate-button-fill-enabled: var(--primitive-red-500);
    --ui-estimate-button-fill-hover: var(--semantic-text-on-accent);
    --ui-estimate-button-fill: var(--ui-estimate-button-fill-enabled);

    --ui-estimate-button-border: var(--border-width-level-2) solid
      var(--ui-estimate-button-foreground);
    --ui-estimate-button-foreground: var(--ui-estimate-button-foreground-enabled);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    inline-size: var(--ui-estimate-button-inline-size);
    background-color: var(--ui-estimate-button-fill);
    border: var(--ui-estimate-button-border);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4);
    font-weight: var(--font-weight-bold);
    font-size: var(--ui-estimate-button-font-size);
    color: var(--ui-estimate-button-foreground);
    line-height: var(--line-height-sm);
    cursor: pointer;
    padding-block: var(--ui-estimate-button-padding-block);
  }

  .estimate-button::before {
    mask-image: var(--ico-estimate);
    -webkit-mask-image: var(--ico-estimate);
    aspect-ratio: 20 / 26;
    width: 20px;
  }

  .estimate-button::before,
  .estimate-button::after {
    content: "";
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: var(--ui-estimate-button-foreground);
  }

  .estimate-button::after {
    position: absolute;
    right: 16px;
    width: 9px;
    height: 13px;
    mask-image: var(--ico-arrow-right-white);
    -webkit-mask-image: var(--ico-arrow-right-white);
  }

  .estimate-button:has(i) {
    padding-block: 11.5px;
  }

  .estimate-button:has(i)::after {
    content: none;
  }

  .estimate-button > span {
    display: flex;
    flex-direction: column;
  }

  .estimate-button > span > i.heading {
    font-size: var(--ui-estimate-button-heading-font-size);
    font-weight: var(--font-weight-bold);
    justify-content: center;
  }

  @media screen and (min-width: 40.01em) {
    .estimate-button::before {
      aspect-ratio: 27 / 35;
      width: 27px;
    }

    .estimate-button::after {
      content: none;
    }
  }

  @media (any-hover: hover) {
    .estimate-button {
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s
        ease-in-out;
    }

    .estimate-button::before,
    .estimate-button::after {
      transition: background-color 0.2s ease-in-out;
    }
  }

  @media (any-hover: hover) {
    .estimate-button:is(:hover, [data-hover]) {
      --ui-estimate-button-fill: var(--ui-estimate-button-fill-hover);
      --ui-estimate-button-foreground: var(--ui-estimate-button-foreground-hover);
    }
  }
}

@layer recipes {
  .faq-list {
    --ui-icon-box-size-sp: 38;
    --ui-icon-box-size-pc: 46;
    --ui-icon-box-radius: var(--radius-sm);
    --ui-icon-box-font-size-sp: var(--clamp-font-size-28);
    --ui-icon-box-font-size-pc: var(--clamp-font-size-36);
    --ui-title-font-size-sp: var(--clamp-font-size-18);
    --ui-title-font-size-pc: var(--clamp-font-size-24);
  }

  .faq-list dt::before,
  .faq-list dd::before {
    --fs-min: var(--ui-icon-box-font-size-sp);
    --fs-max: var(--ui-icon-box-font-size-pc);

    --is-px-min: var(--ui-icon-box-size-sp);
    --is-px-max: var(--ui-icon-box-size-pc);

    flex-shrink: 0;
    display: inline-flex;
    justify-content: center;

    inline-size: calc(var(--is-px-min) * 1px);
    aspect-ratio: 1 / 1;
    line-height: var(--line-height-one);
    font-family: Raleway, sans-serif;

    border-radius: var(--ui-icon-box-radius);

    @media screen and (min-width: 40.01em) {
      inline-size: calc(var(--is-px-max) * 1px);
    }
  }

  .faq-list dt,
  .faq-list dt::before,
  .faq-list dd::before {
    align-items: center;
    font-weight: var(--font-weight-bold);
  }

  .faq-list dt {
    --fs-min: var(--ui-title-font-size-sp);
    --fs-max: var(--ui-title-font-size-pc);

    display: flex;
    column-gap: var(--spacing-4);
    line-height: var(--line-height-sm);
    color: var(--semantic-text-brand-primary);
  }

  .faq-list dt::before {
    content: "Q";
    background-color: var(--semantic-fill-brand-primary);
    color: var(--semantic-text-on-accent);
    align-self: flex-start;
  }

  /* .faq-list dt:nth-of-type(n + 2) {
    padding-top: unset;
    border-top: unset;
  } */

  .faq-list dd {
    --mbs-min: var(--spacing-scale-2);
    --mbs-max: var(--spacing-scale-5);

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--spacing-4);
    padding-bottom: var(--spacing-10);
  }

  .faq-list dd::before {
    content: "A";
    border: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
    color: var(--semantic-text-brand-primary);
  }

  .faq-list dd > p {
    --font-size-sp: var(--font-size-16);
    --font-size-pc: var(--font-size-18);

    grid-column: 2 / 3;
    grid-row: 1 / 2;

    font-weight: var(--font-weight-bold);
    /* line-height: 1.625; */
    align-self: center;
  }

  .faq-list dd > div {
    margin-block-start: var(--spacing-6);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .faq-list dd > p:not(:has(+ div.detail)) {
    font-weight: var(--font-weight-normal);
  }

  .faq-list dd > div.detail {
    /* spで大きく PCで小さくはclampでは対応出来ないためメディアクエリを使用する */
    margin-block-start: var(--spacing-2);
    grid-column: 2 / 3;
    grid-row: 2 / 3;

    @media screen and (min-width: 40.01em) {
      margin-block-start: var(--spacing-0-5);
    }
  }

  .faq-list dd .internal-link {
    margin-top: var(--spacing-6);
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
}

@layer recipes {
  .featured-box {
    --ui-box-fill: var(--colors-attention);
    background-color: var(--semantic-fill-brand-secondary);
    border-radius: var(--radius-md);
    padding: 0 var(--spacing-2-px) var(--spacing-2);
  }

  .featured-box.frame-thin {
    padding: var(--spacing-1) var(--spacing-1-px);
  }

  .featured-box.bg-gray {
    background-color: var(--semantic-fill-secondary);
  }

  .featured-box > :where(header) {
    font-weight: var(--font-weight-bold);
    min-height: 50px;
    display: grid;
    place-content: center;
  }

  .featured-box > :where(header) > a {
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    position: relative;
  }

  .featured-box > :where(header) > a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 12px;
    background-image: var(--ico-arrow-right-blue);
    margin-left: var(--spacing-4-px);
  }

  .featured-box > :where(div) {
    padding: var(--featured-box-inner-padding, 18px);
    background-color: var(--semantic-fill-on-accent);
    display: grid;
    place-content: center;
    border-radius: var(--radius-xs);
  }

  .featured-box > div > small {
    grid-area: 2;
  }

  .featured-box > :where(header) > a:hover {
    filter: brightness(0.9) contrast(1.6);
  }

  @media screen and (min-width: 40.01em) {
    .featured-box {
      padding: 0 10px 10px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-box > :where(div) {
      border-radius: var(--radius-sm);
    }
  }
}

@layer recipes {
  .featured-flex-box {
    --featured-flex-box-icon: ;

    background-color: var(--semantic-fill-brand-secondary);
    border-radius: var(--radius-md);
    border-width: var(--border-width-level-3);
    border-style: solid;
    border-color: var(--semantic-stroke-brand-secondary);
  }

  .featured-flex-box > :where(header) {
    --fs-min: var(--clamp-font-size-24);
    --fs-max: var(--clamp-font-size-28);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4-px);
    gap: var(--spacing-4-px);
  }

  .featured-flex-box > :where(header) {
    line-height: var(--line-height-md);
  }

  .featured-flex-box > :where(header):not(:has([class^="pct"]))::before {
    content: "";
    display: block;
    width: 50px;
  }

  .featured-flex-box > :where(header):not(:has([class^="pct"]))::before {
    height: 50px;
    flex-shrink: 0;
    background-image: var(--featured-flex-box-icon);
    background-size: contain;
  }

  .featured-flex-box > :where(header) [class^="pct-"] {
    font-size: var(--font-size-34);
  }

  .featured-flex-box > :where(header) span {
    display: inline-block;
  }

  .featured-flex-box > :where(header) > span:has(> [class^="pct-"]) {
    display: grid;
    width: 50px;
  }

  .featured-flex-box > :where(header) > span:has(> [class^="pct-"]) {
    height: 50px;
    flex-shrink: 0;
    place-items: center;
    line-height: var(--line-height-md);
    background-color: var(--semantic-fill-on-accent);
    border-radius: var(--radius-full);
  }

  .featured-flex-box > :where(div) {
    padding: var(--featured-box-inner-padding, 18px 19px 23px);
  }

  .featured-flex-box > :where(div) {
    background-color: var(--semantic-fill-on-accent);
    display: grid;
    place-content: center;
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  }

  .featured-flex-box [class^="pct-"].pct-emergency::after {
    color: var(--semantic-text-brand-primary);
  }

  .featured-flex-box [class^="pct-"].pct-emergency::before {
    color: var(--semantic-text-brand-primary);
  }

  .featured-flex-box [class^="pct-"].pct-caution {
    top: -2px;
    right: -1px;
  }

  .featured-flex-box [class^="pct-"].pct-caution::before,
  .featured-flex-box [class^="pct-"].pct-caution::after {
    --fs-min: var(--clamp-font-size-32);
    --fs-max: var(--clamp-font-size-44);
    color: var(--semantic-text-brand-primary);
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box {
      border-width: 4px;
      display: grid;
      max-inline-size: var(--featured-flex-box-max-inline-size, 100%);
      grid-template-columns: var(--featured-flex-box-label-width, auto) 1fr;
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box > :where(header) {
      gap: 9px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box > :where(header):not(:has([class^="pct"]))::before {
      width: 62px;
      height: 62px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box > :where(header) [class^="pct-"] {
      font-size: var(--font-size-44);
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box > :where(header) > span:has(> [class^="pct-"]) {
      width: 62px;
      height: 62px;
    }
  }

  @media screen and (min-width: 40.01em) {
    .featured-flex-box > :where(div) {
      padding: var(--featured-box-inner-padding, 30px);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
  }
}

@layer tokens {
  .featured-flex-box {
    --ico-earthquake-insurance-01: var(--ico-earthquake-insurance-01);
  }
}

@layer recipes {
  .featured-flex-box {
    p:has(.tel) {
      display: grid;
    }

    .tel {
      color: var(--semantic-text-primary);
      line-height: var(--line-height-one);
      font-size: var(--font-size-32);
      font-weight: var(--font-weight-bold);
    }
  }

  .featured-flex-box:has(.tel) > :where(div) {
    gap: var(--spacing-2);

    > * {
      text-align: center;
      margin-inline: auto;
    }
  }
}

.featured-flex-box [class^="pct-"].pct-caution::before,
.featured-flex-box [class^="pct-"].pct-caution::after {
  color: var(--semantic-text-brand-primary);
}

@layer recipes {
  .bottom-local-nav :where(a) {
    text-decoration: none;
  }

  @media screen and (max-width: 40em) {
    .bottom-local-nav {
      margin-block-start: var(--spacing-20);
    }

    .bottom-local-nav .call-button,
    .single-nav-button {
      position: relative;
      display: grid;
      grid-template-columns: auto 0;
      align-items: center;
      place-content: start;
      width: fit-content;
      min-width: 100%;
      padding: 22px 40px 20px 20px;
      background-color: var(--semantic-fill-secondary);
      border: 0;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
      text-align: left;
      font-size: var(--font-size-16);
      font-weight: var(--font-weight-bold);
      color: var(--semantic-text-primary);
      line-height: var(--line-height-md);
      transition: filter .2s ease;
      border-bottom: 1px solid var(--semantic-stroke-primary);
    }

    .bottom-local-nav .call-button::after {
      --arrow-size: 14px;

      position: absolute;
      right: 19px;
      top: unset;
      mask-image: var(--ico-arrow-right-orange);
      width: var(--arrow-size);
      height: var(--arrow-size);
    }
  }

  .bottom-local-nav .menu-container {
    --ui-bottom-local-nav-item-before-icon: var(--icon-plus-md);
    position: relative;
    margin: 0 auto;
    padding: 0;
  }

  .bottom-local-nav .menu-container > ul {
    display: contents;
  }

  .bottom-local-nav .menu-container :where(ul, h3):focus,
  .bottom-local-nav .menu-container > section.focus-within :is(ul, h3) {
    position: relative;
    left: 0;
    z-index: 2;
    width: 100%;
    opacity: 1;
    border-top: 0;
    border-bottom: 0;
  }

  .bottom-local-nav .menu-container > section > button {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 22px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 40px;
    margin-top: 0;
    background-color: var(--semantic-fill-secondary);
    border-top: 1px solid var(--semantic-stroke-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  .bottom-local-nav .menu-container > section > button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--semantic-fill-brand-primary);
    mask-image: var(--icon-plus-md);
    -webkit-mask-image: var(--icon-plus-md);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  .bottom-local-nav .menu-container > section > button::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--semantic-fill-primary);
  }

  .bottom-local-nav .menu-container > section > button.close-button {
    position: absolute;
    z-index: -1;
    border-bottom: 0;
  }

  .bottom-local-nav .menu-container > section > button.close-button::before {
    mask-image: var(--icon-minus-md);
    -webkit-mask-image: var(--icon-minus-md);
  }

  .bottom-local-nav .menu-container > section:not(.category-top) > h2,
  .bottom-local-nav .menu-container > section:not(.category-top) > h3 {
    position: fixed;
    left: -200vw;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: var(--semantic-fill-secondary);
    border-top: 1px solid var(--semantic-stroke-primary);
    border-bottom: 1px solid var(--semantic-stroke-primary);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
  }

  .bottom-local-nav .menu-container > section:not(.category-top) > h2::before,
  .bottom-local-nav .menu-container > section:not(.category-top) > h3::before,
  .single-nav-button::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    left: auto;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--semantic-fill-brand-primary);
    mask-image: var(--ico-arrow-right-orange);
    -webkit-mask-image: var(--ico-arrow-right-orange);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  .bottom-local-nav .menu-container > section:not(.category-top) > h2::after,
  .bottom-local-nav .menu-container > section:not(.category-top) > h3::after,
  .single-nav-button::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--semantic-stroke-primary);
  }

  .bottom-local-nav .menu-container > section:not(.category-top) > h2 > a,
  .bottom-local-nav .menu-container > section:not(.category-top) > h3 > a {
    position: relative;
    display: block;
    padding: 20px 40px 20px 15px;
    background-color: var(--semantic-fill-on-accent);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-md);
    color: var(--semantic-text-primary);
    pointer-events: auto;
  }

  .bottom-local-nav .menu-container > section:not(.category-top) > h2 > a::before,
  .bottom-local-nav .menu-container > section:not(.category-top) > h3 > a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    width: 7px;
    height: 11px;
    background-color: var(--semantic-fill-brand-primary);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 {
    position: relative;
    left: 0;
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 {
    padding: 0;
    opacity: 1;
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2::before {
    display: none;
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 > a {
    display: block;
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 > a {
    padding: 22px 40px 20px 20px;
    background-color: var(--semantic-fill-secondary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 > a::before {
    width: 9px;
    height: 13px;
    background-color: var(--semantic-fill-primary);
    mask-image: var(--ico-arrow-right-orange);
    -webkit-mask-image: var(--ico-arrow-right-orange);
  }

  .bottom-local-nav .menu-container > section:is(.faq) > h2 > a::before {
    clip-path: none;
    -webkit-clip-path: none;
  }

  .bottom-local-nav .menu-container > section:not(.category-top, .faq) > :where(ul, h3) {
    position: fixed;
  }

  .bottom-local-nav .menu-container > section:not(.category-top, .faq) > :where(ul, h3) {
    left: -200vw;
    padding: 0 10px;
    margin-top: 0;
    background-color: var(--semantic-fill-secondary);
    opacity: 0;
    transition: opacity .2s ease;
  }

  .bottom-local-nav .menu-container > section > ul {
    text-indent: 0;
  }

  .bottom-local-nav .menu-container > section > ul > li {
    padding-left: 0;
  }

  .bottom-local-nav .menu-container > section > ul > li > a {
    position: relative;
    display: block;
    padding: var(--spacing-5) var(--spacing-10-px) var(--spacing-5) var(--spacing-4-px);
    background-color: var(--semantic-fill-on-accent);
    color: var(--semantic-text-primary);
  }

  .bottom-local-nav .menu-container > section > ul > li > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    width: 7px;
    height: 11px;
    background-color: var(--semantic-fill-brand-primary);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }

  .bottom-local-nav .category-top {
    grid-column: NaN;
  }

  .bottom-local-nav .compensation-details {
    grid-column: initial;
    grid-row: initial;
  }

  .bottom-local-nav
    .menu-container
    > :where(section:focus-within, section.focus-within)
    .close-button:not(:focus) {
    z-index: 1;
  }

  .bottom-local-nav .menu-container :where(h3):focus,
  .bottom-local-nav
    .menu-container
    > :where(section:focus-within, section.focus-within)
    .close-button:not(:focus)
    ~ :where(h3) {
    padding: 0 10px;
  }

  .bottom-local-nav .menu-container :where(ul):focus,
  .bottom-local-nav
    .menu-container
    > :where(section:focus-within, section.focus-within)
    .close-button:not(:focus)
    ~ :where(ul) {
    padding-bottom: 10px;
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav {
      background-color: var(--semantic-fill-secondary);
      margin-block-start: var(--spacing-28);
    }

    .bottom-local-nav .menu-container {
      --bottom-local-nav-column-count: 4;
      display: grid;
      grid-template-columns: repeat(var(--bottom-local-nav-column-count), 1fr);
      grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
      gap: 44px 38px;
      padding: var(--spacing-14) var(--spacing-5-px) var(--spacing-20);
    }

    [data-theme="pet"] .bottom-local-nav .menu-container {
      --bottom-local-nav-column-count: 3;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container :where(h3):focus,
    .bottom-local-nav
      .menu-container
      > :where(section:focus-within, section.focus-within)
      .close-button:not(:focus)
      ~ :where(h3) {
      padding: 0 0 var(--spacing-2) var(--spacing-5-px);
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container :where(ul):focus,
    .bottom-local-nav
      .menu-container
      > :where(section:focus-within, section.focus-within)
      .close-button:not(:focus)
      ~ :where(ul) {
      padding-bottom: 0;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section > button {
      display: none;
      padding-top: 0;
      padding-bottom: 10px;
      padding-left: 20px;
      padding-right: 0;
      margin-block-end: 1rem;
      border-top: 0;
      font-size: var(--font-size-16);
    }

    .bottom-local-nav .menu-container > section > button::before {
      top: calc(50% - 5px);
      right: auto;
      left: 2px;
      width: 9px;
      height: 13px;
    }

    .bottom-local-nav .menu-container > section > button::after {
      content: "";
    }

    .bottom-local-nav .menu-container > section:not(.category-top) > h2,
    .bottom-local-nav .menu-container > section:not(.category-top) > h3,
    .single-nav-button {
      position: relative;
      left: auto;
      padding-top: 0;
      padding-bottom: 10px;
      padding-left: 20px;
      padding-right: 0;
      margin-block-end: 1rem;
      border-top: 0;
      border-bottom: 0;
      font-size: var(--font-size-16);
      opacity: 1;
    }

    .bottom-local-nav .menu-container > section:not(.category-top) > h2::before,
    .bottom-local-nav .menu-container > section:not(.category-top) > h3::before,
    .single-nav-button::before {
      top: calc(50% - 5px);
      right: auto;
      left: 2px;
      width: 9px;
      height: 13px;
      mask-image: var(--ico-arrow-right-orange);
      mask-size: contain;
      mask-repeat: no-repeat;
      -webkit-mask-image: var(--ico-arrow-right-orange);
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
    }

    .bottom-local-nav .menu-container > section:not(.category-top) > h2::after,
    .bottom-local-nav .menu-container > section:not(.category-top) > h3::after,
    .single-nav-button::after {
      content: "";
    }

    .bottom-local-nav .menu-container > section:not(.category-top) > h2 > a,
    .bottom-local-nav .menu-container > section:not(.category-top) > h3 > a {
      display: inline;
      padding: 0;
      background-color: transparent;
      font-weight: var(--font-weight-bold);
    }

    .bottom-local-nav .menu-container > section:not(.category-top) > h2 > a::before,
    .bottom-local-nav .menu-container > section:not(.category-top) > h3 > a::before {
      display: none;
      left: 4px;
      right: 0;
      width: 6px;
      height: 2px;
      clip-path: none;
      -webkit-clip-path: none;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section:is(.faq) > h2 {
      left: auto;
      padding: 0 0 var(--spacing-2) var(--spacing-5-px);
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section:is(.faq) > h2::before {
      display: block;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section:is(.faq) > h2 > a {
      display: inline;
      padding: 0;
      background-color: transparent;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section:not(.category-top, .faq) > ul > li:first-child {
      display: none;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section:not(.category-top, .faq) > :where(ul, h3) {
      position: relative;
      left: auto;
      padding: 0;
      opacity: 1;
    }
  }

  @media screen and (min-width: 40.01em) {
    .bottom-local-nav .menu-container > section > ul {
      text-indent: -1em;
    }

    .bottom-local-nav .menu-container > section > ul > li {
      padding-left: 1em;
      border-bottom: none;
    }

    .bottom-local-nav .menu-container > section > ul > li:first-child {
      border-top: none;
    }

    .bottom-local-nav .menu-container > section > ul > li > a {
      display: inline;
      padding: 0 0 0 var(--spacing-4-px);
      background-color: transparent;
    }

    .bottom-local-nav .menu-container > section > ul > li > a::before {
      left: 4px;
      right: 0;
      width: 6px;
      height: 2px;
      clip-path: none;
      -webkit-clip-path: none;
    }

    .bottom-local-nav .category-top {
      grid-column: 1 / -1;
      margin-block-end: 0.5rem;
    }

    .bottom-local-nav .compensation-details {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
    }

    .bottom-local-nav .compensation-details > ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 var(--spacing-6-px);
    }

    @media (any-hover: hover) {
      .bottom-local-nav
        .menu-container
        > section:not(.category-top)
        > h2:is(:hover, [data-hover])::after,
      .bottom-local-nav
        .menu-container
        > section:not(.category-top)
        > h3:is(:hover, [data-hover])::after,
      .single-nav-button:is(:hover, [data-hover])::after {
        background-color: var(--semantic-text-primary);
      }
    }

    @media (any-hover: hover) {
      .bottom-local-nav .menu-container > section > ul > li > a:is(:hover, [data-hover]) {
        border-bottom: 1px solid;
      }
    }
  }

  .single-nav-button {
    --ui-bottom-local-nav-item-before-icon: var(--ico-arrow-right-orange);
    font-weight: var(--font-weight-bold);
    grid-template-columns: 1fr 32px;
    padding-inline-end: 0;
  }
}

@layer recipes {
  .floating-banner {
    --ui-between-button-bubble-sp: var(--spacing-3);
    --ui-between-button-bubble-pc: var(--spacing-5);
    --ui-bubble-font-size-sp: var(--font-size-12);
    --ui-bubble-font-size-pc: var(--font-size-14);
    --ui-banner-padding-sp: var(--spacing-3) var(--spacing-5) var(--spacing-5);
    --ui-banner-padding-pc: var(--spacing-4) var(--spacing-5);
    --ui-banner-fill-base: var(--semantic-background-body);
    --ui-banner-fill-base-opacity: 0.92;

    display: flex;
    gap: clamp(
      var(--ui-between-button-bubble-sp),
      var(--clamp-viewport-magic-number),
      var(--ui-between-button-bubble-pc)
    );
    align-items: center;
    justify-content: center;
    padding: var(--ui-banner-padding-sp);
    width: 100%;
    /* --semantic-background-body */
    background-color: rgb(
      from var(--ui-banner-fill-base) r g b /
      var(--ui-banner-fill-base-opacity)
    );
    border-top: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
    position: sticky;
    z-index: 2;
    bottom: 0;
  }

  .floating-banner :where(p) {
    --font-size-sp: var(--ui-bubble-font-size-sp);
    --font-size-pc: var(--ui-bubble-font-size-pc);
  }

  .floating-banner :where(p) {
    position: relative;
    background-color: #ffc85f;
    /* background-color: var(--semantic-fill-brand-primary); */
    display: grid;
    place-content: center;
    padding: 5px 10px;
    border-radius: 2px;
    word-break: auto-phrase;
    width: min(104px, 100%);
  }

  .floating-banner :where(p)::after {
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
    width: 6px;
    height: 6px;
    position: absolute;
    right: -6px;
    top: 50%;
    translate: 0 -50%;
    background-color: #ffc85f;
  }

  .floating-banner :where(p > strong) {
    width: min-content;
  }

  .floating-banner .estimate-button {
    width: min(216px, 100%);
    padding-block: 12px;
    font-size: 17px;
  }

  .floating-banner .estimate-button::before {
    width: 16px;
    height: 21px;
  }

  .floating-banner .estimate-button::after {
    display: none;
  }

  @media screen and (min-width: 40.01em) {
    .floating-banner {
      padding: var(--ui-banner-padding-pc);
    }
  }

  @media screen and (min-width: 40.01em) {
    .floating-banner :where(p) {
      padding: 10px 20px;
      border-radius: 4px;
      width: auto;
    }
  }

  @media screen and (min-width: 40.01em) {
    .floating-banner .estimate-button {
      width: 320px;
      padding-block: 16.5px;
    }
  }
}

@layer recipes {
  .heading-level1 {
    --ui-decorative-vertical-bar-inline-size: 4px;

    position: relative;
    padding: var(--spacing-4) var(--spacing-4-px);
    padding-inline-start: calc(var(--spacing-4-px) + var(--ui-decorative-vertical-bar-inline-size));
    /* margin-top: var(--spacing-28); */
    /* margin-bottom: var(--spacing-5); */
    background-color: var(--semantic-fill-primary);
    font-size: var(--heading-level-4);
    line-height: var(--line-height-md);
    font-weight: var(--font-weight-bold);
    scroll-margin-block-start: 3.75rem;
  }

  .heading-level1::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    inline-size: var(--ui-decorative-vertical-bar-inline-size);
    background-color: var(--semantic-fill-brand-primary);
  }

  @media screen and (min-width: 40.01em) {
    .heading-level1 {
      --ui-decorative-vertical-bar-inline-size: 6px;
      padding: var(--spacing-5) var(--spacing-5-px);
      padding-inline-start: calc(
        var(--spacing-5-px) +
        var(--ui-decorative-vertical-bar-inline-size)
      );
      scroll-margin-top: 0;
    }
  }
}

@layer recipes {
  .heading-level2 {
    position: relative;
    padding-block-end: 8px;
    /* margin-bottom: var(--spacing-heading-level2-margin-bottom); */
    border-bottom: 3px solid #aaa;
    font-size: var(--heading-level-3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  .heading-level2::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 77px;
    height: 3px;
    background-color: var(--semantic-fill-brand-primary);
  }

  /* :where(.modal) .heading-level2 {
    font-size: var(--font-sizes-heading-level2-modal);
  } */

  /* :has(> .heading-level2) {
    container: heading-level2 / inline-size;
  }

  @container heading-level2 (min-width: 40.01rem) {
    .heading-level2 {
      padding-bottom: 10px;
      margin-block-end: 2rem;
    }
  } */
}

@layer recipes {
  .heading-level3 {
    --ui-decorative-vertical-bar-inline-size: 4px;
    position: relative;
    display: inline-block;
    padding-inline-start: calc(var(--spacing-3-px) + var(--ui-decorative-vertical-bar-inline-size));
    /* margin-block-end: var(--spacing-heading-level3-margin-bottom); */
    /* text-align: left; */
    font-size: var(--heading-level-2);
    font-weight: var(--font-weight-bold);
  }

  .heading-level3::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    inline-size: var(--ui-decorative-vertical-bar-inline-size);
    background-color: var(--semantic-fill-brand-primary);
  }

  /* :where(.heading-level3):not(:first-child) {
    margin-block-start: 2.5rem;
  } */

  /* :has(> .heading-level3) {
    container: heading-level3 / inline-size;
  }

  @container heading-level3 (min-width: 40.01rem) {
    .heading-level3 {
      padding-left: 12px;
    }
  } */
}

@layer recipes {
  .heading-level4 {
    display: inline-block;
    /* margin-block-end: 0.75rem; */
    font-size: var(--heading-level-1);
    font-weight: var(--font-weight-bold);
  }
}

@layer recipes {
  .icon-heading-level1 {
    --ui-icon-heading-level1-column-gap: var(--spacing-3);
    --ui-icon-heading-level1-margin-block-start: var(--spacing-16);
    --ui-icon-heading-level1-font-size: var(--font-size-24);
    --ui-icon-heading-level1-line-height: var(--line-height-md);
    --ui-icon-heading-level1-align-items: center;
    --ui-icon-heading-level1-letter-spacing: 0.04em;

    display: flex;
    column-gap: var(--ui-icon-heading-level1-column-gap);
    margin-block-start: var(--ui-icon-heading-level1-margin-block-start);
    font-weight: bold;
    font-size: var(--ui-icon-heading-level1-font-size);
    line-height: var(--ui-icon-heading-level1-line-height);
    letter-spacing: var(--ui-icon-heading-level1-letter-spacing);
    scroll-margin-block-start: 3.75rem;

    @media screen and (min-width: 40.01rem) {
      --ui-icon-heading-level1-margin-block-start: var(--spacing-28);
      --ui-icon-heading-level1-font-size: var(--font-size-32);
      --ui-icon-heading-level1-column-gap: var(--spacing-4);

      align-items: var(--ui-icon-heading-level1-align-items);
    }

    &::before {
      --icon-heading-level1-icon-size: 32px;
      --ui-icon-heading-level1-icon-color: var(--semantic-fill-brand-primary);
      --ui-icon-heading-level1-icon-position: center;
      --ui-icon-heading-level1-align-items: flex-start;
      --ui-icon-heading-level1-flex-shrink: 0;

      content: "";
      display: block;
      width: var(--icon-heading-level1-icon-size);
      height: var(--icon-heading-level1-icon-size);
      background-color: var(--ui-icon-heading-level1-icon-color);
      mask-image: var(--ui-icon-heading-level1-icon);
      mask-repeat: no-repeat;
      mask-position: var(--ui-icon-heading-level1-icon-position);
      mask-size: contain;
      flex-shrink: var(--ui-icon-heading-level1-flex-shrink);

      @media screen and (min-width: 40.01rem) {
        --icon-heading-level1-icon-size: 40px;
      }
    }
  }
}

@layer recipes {
  .highlighted-copy {
    --fs-min: var(--clamp-font-size-17);
    --fs-max: var(--clamp-font-size-20);
    background-color: var(--semantic-fill-brand-primary-light);
    padding: var(--spacing-4) var(--spacing-4-px);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
    word-break: auto-phrase;
  }

  @media screen and (min-width: 40.01em) {
    .highlighted-copy {
      padding: var(--spacing-5) var(--spacing-6-px);
    }
  }
}

@layer recipes {
  .internal-link {
    --ui-link-icon: var(--icon-arrow-right-sm);
    --fs-min: var(--clamp-font-size-16);
    --fs-max: var(--clamp-font-size-16);

    position: relative;
    display: grid;
    grid-template-columns: auto 0;
    align-items: center;

    width: fit-content;
    min-width: min(300px, 100%);

    padding: 10.5px 40px;
    text-wrap: balance;
    background-color: var(--ui-button-primary-fill-default);
    border: 2px solid var(--ui-button-primary-fill-default);
    border-radius: var(--radius-full);
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-weight-bold);

    line-height: var(--line-height-sm);
    color: var(--ui-button-primary-text-default);
    margin-inline: auto;
  }

  .internal-link::after {
    content: "";
    position: absolute;
    right: 12px;
    inline-size: 20px;
    /* magic-number chevronをテキストと水平に */
    block-size: 20.5px;
    aspect-ratio: 1;
    background-color: var(--ui-button-primary-text-default);
    mask-image: var(--ui-link-icon);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  :not(section) > .internal-link {
    padding-inline: 37px;
  }

  :where(p, .basic-division > div) > .internal-link {
    margin-top: var(--spacing-5);
    margin-inline: auto;
  }

  :has(> .internal-link) {
    container: internal-link / inline-size;
    inline-size: min(100%, var(--content-max-width));
  }

  @container (min-width: 40.01rem) {
    .internal-link {
      --ui-link-icon: var(--icon-arrow-right-md);

      min-width: 390px;
      padding-block: var(--spacing-4);

      &::after {
        right: var(--spacing-4-px);
        block-size: 21.5px;
      }
    }
  }

  @media screen and (min-width: 40.01em) {
    :where(p, .basic-division > div) > .internal-link {
      margin-inline: auto 0;
    }
  }

  /* @media screen and (min-width: 40.01em) {
    :not(:where(p, .basic-division > div)) > .internal-link {
      margin-top: var(--spacing-12);
    }
  } */

  @media (any-hover: hover) {
    .internal-link {
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s
        ease-in-out;
    }

    .internal-link::before,
    .internal-link::after {
      transition: background-color 0.2s ease-in-out;
    }
  }

  @media (any-hover: hover) {
    :is([data-theme="fire"]) .internal-link:is(:hover, [data-hover]) {
      color: var(--semantic-text-primary);

      &::after {
        background-color: var(--semantic-text-primary);
      }
    }
    .internal-link:is(:hover, [data-hover]) {
      background-color: var(--semantic-fill-on-accent);
      color: var(--semantic-text-brand-primary);

      &::after {
        background-color: var(--semantic-fill-brand-primary);
      }
    }
  }
}

@layer recipes {
  .media-group {
    --media-group-cols-result: 1;
    --media-group-row-gap: var(--spacing-5);
    --media-group-col-gap: var(--spacing-6-px);
    display: grid;
    gap: var(--media-group-row-gap) var(--media-group-col-gap);
    grid-template-columns: repeat(var(--media-group-cols-result), minmax(0, 1fr));
  }

  .media-group :where(img, figure, picture) {
    width: 100%;
    height: auto;
  }

  .media-group :where(figcaption) {
    --fs-min: var(--clamp-font-size-14);
    --fs-max: var(--clamp-font-size-16);
    margin-block-start: var(--spacing-2);
  }

  @media screen and (min-width: 40.01em) {
    .media-group {
      --media-group-cols-result: var(--media-group-cols, 3);
    }
  }
}

@layer recipes {
  .action-close-button {
    /* position: relative;
    display: grid;
    place-items: center;
    align-items: center;
    width: var(--sizes-width-action-button);
    min-width: var(--sizes-min-width-action-button);
    padding: 8.25px 30px;
    background-color: var(--colors-white);
    border: var(--borders-sub-button);
    border-radius: var(--radii-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-sizes-button-action);
    color: black;
    line-height: var(--line-heights-md);
    transition: filter 0.2s ease; */
  }

  /* .action-close-button::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 12px;
    height: 12px;
    background-color: var(--colors-estimate-button);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: var(--ico-close-orange);
    -webkit-mask-image: var(--ico-close-orange);
  } */

  .modal {
    max-width: min(698px, 100%);
    width: calc(100vw - var(--content-side-space) * 2);
    max-height: calc(100% - 60px);
    margin: auto;
    transition: transform 0.2s ease-in-out, opacity 0.4s ease-in-out, display 0.5s ease-out;
    transition-behavior: allow-discrete;
    transform: translateY(3vh);
    opacity: 0;
    inset: 0;
    background-color: transparent;
  }

  .modal[open] {
    transform: translateY(0);
    opacity: 1;
  }

  .modal[open] > a {
    scroll-behavior: smooth;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .modal > .modal-backdrop {
    color: transparent;
    background-color: rgba(0, 0, 0, 0.3);
    filter: blur(10px);
  }

  .modal .modal-body {
    --ui-modal-body-layer: var(--layer-base);

    position: relative;
    display: grid;
    width: 100%;
    padding: var(--spacing-8) var(--spacing-5-px);
    background-color: var(--semantic-background-body);
    border-radius: var(--radius-md);
    overscroll-behavior: contain;
    overflow: auto;
    > * {
      z-index: var(--ui-modal-body-layer);
    }
  }

  .modal .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;

    &::before {
      content: "";
      display: block;
      width: 13px;
      aspect-ratio: 18 / 17;
      mask-image: var(--ico-close-modal);
      mask-size: contain;
      mask-repeat: no-repeat;
      background-color: var(--semantic-text-brand-primary);
    }
  }

  .modal .action-close-button {
    justify-self: center;
    margin-block-start: 2.5rem;
  }

  @media screen and (min-width: 40.01em) {
    .modal {
      max-height: calc(100% - 160px);
    }

    .modal .modal-body {
      padding: var(--spacing-12) var(--spacing-10-px);
    }

    .modal .modal-close {
      top: 22px;
      right: 22px;
      &::before {
        width: 18px;
      }
    }

    .modal .action-close-button {
      /* TODO:もともと50pxだったが新しいトークンに入れ替えるために56px相当を設定 */
      margin-top: var(--spacing-14);
    }
  }

  @media (any-hover: hover) and (pointer: fine) {
    .action-close-button:is(:hover, [data-hover]) {
      filter: contrast(0.9);
    }
  }
}

@layer recipes {
  .my-page-link {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr auto 1fr;
    position: relative;
    background: var(--semantic-fill-mypage);
    color: var(--semantic-text-on-accent);
    border-radius: var(--radius-full);
    border: var(--border-width-level-2) solid var(--semantic-stroke-mypage);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-16);
    height: 50px;
    padding-left: var(--spacing-5);
    width: 299px;
    max-width: 100%;
  }

  .my-page-link::before {
    mask-image: var(--ico-sub-scriber);
    -webkit-mask-image: var(--ico-sub-scriber);
    mask-repeat: no-repeat;
    mask-size: contain;
    aspect-ratio: 25 / 24;
    width: 25px;
    margin-inline: auto 10px;
  }

  .my-page-link::before,
  .my-page-link::after {
    content: "";
    -webkit-mask-size: contain;
    background-color: var(--semantic-text-on-accent);
  }

  .my-page-link::after {
    mask-image: var(--ico-arrow-right-white);
    -webkit-mask-image: var(--ico-arrow-right-white);
    -webkit-mask-repeat: no-repeat;
    height: 13px;
    aspect-ratio: 8 / 13;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  @media screen and (min-width: 40.01em) {
    .my-page-link {
      height: 60px;
    }
  }

  @media (any-hover: hover) {
    .my-page-link {
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s
        ease-in-out;
    }

    .my-page-link::before,
    .my-page-link::after {
      transition: background-color 0.2s ease-in-out;
    }
  }

  @media (any-hover: hover) {
    .my-page-link:is(:hover, [data-hover]) {
      background-color: var(--colors-white);
      color: var(--semantic-text-mypage);
    }
  }

  @media (any-hover: hover) {
    .my-page-link:is(:hover, [data-hover])::before,
    .my-page-link:is(:hover, [data-hover])::after {
      background-color: var(--semantic-text-mypage);
    }
  }
}

@layer recipes {
  .note-list {
    font-size: var(--font-size-12);
    line-height: var(--line-height-md);
  }
  .note-list > [data-annotation] {
    --annotation-size: 1em;
    --annotation-spacing: var(--spacing-1);
    --annotation-total-width: calc(var(--annotation-size) + var(--annotation-spacing));
    padding-left: var(--annotation-total-width);
    text-indent: calc(var(--annotation-total-width) * -1);
    color: var(--semantic-text-secondary);

    &:not(:first-child) {
      margin-top: var(--spacing-2);
    }

    &::before {
      margin-right: var(--annotation-spacing);
      content: attr(data-annotation);
    }
  }

  .note-list > span[data-annotation] {
    display: inline-block;
  }
  small.note-list {
    display: inline-block;
  }
}

@layer layout {
  :not(section) > * + .note-list {
    margin-top: var(--spacing-2);
  }
}

/* デザイン：https://figma.fun/3kEHED */

@layer tokens {
  :root,
  .page-title-with-content {
    --ico-fire-insurance-01: url(/assets/images/ico_fire_insurance_01.svg); /* 商品カテゴリ */
    --ico-fire-insurance-02: url(/assets/images/ico_fire_insurance_02.svg); /* 災害－火災 */
    --ico-fire-insurance-03: url(/assets/images/ico_fire_insurance_03.svg); /* 災害－破裂・爆発 */
    --ico-fire-insurance-04: url(/assets/images/ico_fire_insurance_04.svg); /* 自然災害－落雷 */
    --ico-fire-insurance-05: url(/assets/images/ico_fire_insurance_05.svg); /* 自然災害－洪水（水災） */
    --ico-fire-insurance-06: url(/assets/images/ico_fire_insurance_06.svg); /* 災害－建物外部からの物体の衝突等 */
    --ico-fire-insurance-07: url(/assets/images/ico_fire_insurance_07.svg); /* 災害－給排水設備事故等での水漏れ */
    --ico-fire-insurance-08: url(/assets/images/ico_fire_insurance_08.svg); /* 災害－騒擾等に伴う暴力・破壊行為 */
    --ico-fire-insurance-09: url(/assets/images/ico_fire_insurance_09.svg); /* 災害－盗難 */
    --ico-fire-insurance-10: url(/assets/images/ico_fire_insurance_10.svg); /* 自然災害－風災・雪災・雹（ひょう）災 */
    --ico-fire-insurance-11: url(/assets/images/ico_fire_insurance_11.svg); /* 全半損時地震追加払特約 */
    --ico-fire-insurance-12: url(/assets/images/ico_fire_insurance_12.svg); /* 失火見舞費用 */
    --ico-fire-insurance-13: url(/assets/images/ico_fire_insurance_13.svg); /* 個人賠償 */
    --ico-fire-insurance-14: url(/assets/images/ico_fire_insurance_14.svg); /* 家財の補償 */
    --ico-fire-insurance-15: url(/assets/images/ico_fire_insurance_15.svg); /* （地震）火災 */
    --ico-fire-insurance-16: url(/assets/images/ico_fire_insurance_16.svg); /* （地震）倒壊 */
    --ico-fire-insurance-17: url(/assets/images/ico_fire_insurance_17.svg); /* （地震）津波 */
    --ico-fire-insurance-18: url(/assets/images/ico_fire_insurance_18.svg); /* 地震保険 */
    --ico-fire-insurance-19: url(/assets/images/ico_fire_insurance_19.svg); /* 臨時費用 */
    --ico-fire-insurance-20: url(/assets/images/ico_fire_insurance_20.svg); /* 地震上乗せ特約 */
    --ico-fire-insurance-21: url(/assets/images/ico_fire_insurance_21.svg); /* 破損・汚損損害 */
    --ico-fire-insurance-22: url(/assets/images/ico_fire_insurance_22.svg); /* 失火見舞費用 */
    --ico-fire-insurance-23: url(/assets/images/ico_fire_insurance_23.svg); /* 自然災害－風災 */
    --ico-fire-insurance-24: url(/assets/images/ico_fire_insurance_24.svg); /* 自然災害－雹災 */
    --ico-fire-insurance-25: url(/assets/images/ico_fire_insurance_25.svg); /* 自然災害－雪災 */
    --ico-fire-insurance-26: url(/assets/images/ico_fire_insurance_26.svg); /* 水道管 */
    --ico-fire-insurance-27: url(/assets/images/ico_fire_insurance_27.svg); /* 消火器 */
    --ico-fire-insurance-28: url(/assets/images/ico_fire_insurance_28.svg); /* 残存物片付け */
    --ico-fire-insurance-29: url(/assets/images/ico_fire_insurance_29.svg); /* 損害範囲確定費用 */
    --ico-fire-insurance-30: url(/assets/images/ico_fire_insurance_30.svg); /* 仮修理費用 */

    li:has(> .badge):has(> .border-link) {
      display: flex;
      flex-direction: column;
      align-items: baseline;
      @media (min-width: 40.01rem) {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
      }
      &:not(first-child) {
        margin-top: var(--spacing-8);
      }
      > .badge {
        flex-shrink: 0;
        width: 80px;
      }
    }
  }
}

@layer recipes {
  .page-title-with-content {
    background: var(--semantic-fill-brand-primary-light);
    padding: var(--spacing-5) var(--spacing-5-px);
    text-wrap: wrap;
    min-height: 180px;
  }

  .page-title-with-content > :where(h1, h2) {
    font-size: var(--heading-level-4);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-3);
    line-height: var(--line-height-md);
  }

  .page-title-with-content > :where(h1, h2)::before {
    display: block;
    background: var(--page-title-icon) no-repeat center / contain;
    grid-area: image;
    height: 60px;
    width: 60px;
    flex-shrink: 0;
  }

  .page-title-with-content > :where(p) {
    font-size: var(--font-size-16);
    margin-block-start: var(--spacing-3);
  }

  .page-title-with-content > :where([class]) {
    background: var(--semantic-fill-on-accent);
    margin-block-start: var(--spacing-3);
  }

  .page-title-with-content > :where([class]) {
    padding: var(--spacing-5) var(--spacing-5-px);
    border-radius: var(--radius-sm);
  }

  .page-title-with-content > :where([class]) > p.heading {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-20);
    margin-block-end: var(--spacing-2);
  }

  .page-title-with-content[style*="--page-title-icon"] > :where(h1, h2):before {
    content: "";
  }

  @media screen and (min-width: 40.01em) {
    .page-title-with-content {
      padding: var(--spacing-8) var(--spacing-10-px);
      border-radius: var(--radius-md);
      max-width: 990px; /* TODO 変数化 */
    }
  }

  @media screen and (min-width: 40.01em) {
    .page-title-with-content > :where([class]) {
      margin-block-start: var(--spacing-4);
      padding: var(--spacing-6) var(--spacing-6-px);
    }
  }
}

@layer recipes {
  .page-title {
    display: grid;
    align-content: center;
    row-gap: var(--spacing-3);
    background: var(--semantic-fill-brand-primary-light);
    min-height: 156px;
    padding: var(--spacing-5) var(--spacing-5-px);
    text-wrap: wrap;

    + :where(section, .nested-toc) {
      --mbs-min: var(--spacing-scale-10);
      --mbs-max: var(--spacing-scale-14);
    }
  }

  .page-title > :where(h1, h2) {
    font-size: var(--heading-level-4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  .page-title > :where(p) {
    font-size: var(--font-size-body-md);
  }

  .page-title[style*="--page-title-image"]:has(p) > :where(h1, h2) {
    align-self: end;
  }

  .page-title[style*="--page-title-image"]:not(:has(p)) > :where(h1, h2) {
    align-self: center;
  }

  .page-title[style*="--page-title-image"]::after {
    content: "";
    display: none;
    background: var(--page-title-image) no-repeat center / contain;
    grid-area: image;
    height: 138px;
    width: 233px;
  }

  @media (40.01rem < width <= 65.625rem) {
    .page-title {
      margin-inline: var(--spacing-6-px);
    }
  }

  @media screen and (min-width: 40.01em) {
    .page-title {
      column-gap: var(--spacing-8-px);
      max-width: var(--container-actual-width);
      min-height: 200px;
      padding: var(--spacing-8) var(--spacing-10-px);
      border-radius: var(--radius-md);
    }

    .page-title[style*="--page-title-image"] {
      grid-template-columns: 1fr auto;
      grid-template-areas: "titleArea image" "titleArea image";
    }
  }

  @media screen and (min-width: 40.01em) {
    .page-title[style*="--page-title-image"]:not(:has(p)) > :where(h1, h2) {
      grid-area: titleArea;
    }
  }

  @media screen and (min-width: 40.01em) {
    .page-title[style*="--page-title-image"]::after {
      display: block;
    }
  }
}

@layer recipes {
  .plan-panel {
    /* --- 基本スタイル --- */
    --ui-plan-panel-border-radius: var(--radius-md);
    --ui-plan-panel-padding-block-start: var(--spacing-6);
    --ui-plan-panel-padding-block-end: var(--spacing-5);
    --ui-plan-panel-padding-inline: var(--spacing-6-px);
    --ui-plan-panel-header-padding-block: var(--spacing-2);
    --ui-plan-panel-gap: var(--spacing-3);
    --ui-plan-panel-body-gap: var(--spacing-0-5);
    --ui-plan-panel-body-margin-top: var(--spacing-4);

    /* モバイル向け設定（デフォルト値） */
    --ui-plan-panel-mobile-padding-block-start: var(--spacing-3);
    --ui-plan-panel-mobile-padding-block-end: var(--spacing-4);
    --ui-plan-panel-mobile-padding-inline: var(--spacing-3-px);
    --ui-plan-panel-mobile-gap: var(--spacing-2);
    --ui-plan-panel-mobile-body-margin-top: var(--spacing-3);

    /* フォントサイズ設定 - デスクトップ */
    --ui-plan-panel-percentage-fs-min: var(--clamp-font-size-28);
    --ui-plan-panel-percentage-fs-max: var(--clamp-font-size-32);
    --ui-plan-panel-label-fs-min: var(--clamp-font-size-20);
    --ui-plan-panel-label-fs-max: var(--clamp-font-size-24);
    --ui-plan-panel-catch-copy-fs-min: var(--clamp-font-size-14);
    --ui-plan-panel-catch-copy-fs-max: var(--clamp-font-size-18);
    --ui-plan-panel-numeric-font-size: var(--font-size-24);

    /* フォントサイズ設定 - モバイル */
    --ui-plan-panel-mobile-percentage-fs: var(--font-size-20);
    --ui-plan-panel-mobile-label-fs: var(--font-size-16);
    --ui-plan-panel-mobile-numeric-font-size: var(--font-size-18);

    /* フォントファミリー設定 */
    --ui-plan-panel-percentage-font-family: var(--font-family-en);
    --ui-plan-panel-label-font-family: var(--font-family-body);
    --ui-plan-panel-catch-copy-font-family: var(--font-family-body);
    --ui-plan-panel-detail-numeric-font-family: var(--font-family-en, Arial);

    /* 背景色設定 - セマンティック変数を使用 */
    --ui-plan-panel-70-bg: var(--semantic-fill-brand-secondary-light);
    --ui-plan-panel-70-header-bg: var(--semantic-fill-brand-secondary);
    --ui-plan-panel-50-bg: var(--semantic-fill-brand-tertiary-light);
    --ui-plan-panel-50-header-bg: var(--semantic-fill-brand-tertiary);

    /* キャッチコピー色設定 - プリミティブカラーを直接使用 */
    --ui-plan-panel-70-catch-copy-color: var(--primitive-cyan-700);
    --ui-plan-panel-50-catch-copy-color: var(--primitive-pink-700);

    /* テキストカラー */
    --ui-plan-panel-header-text-color: var(--semantic-text-on-accent);
    --ui-plan-panel-body-text-color: var(--semantic-text-primary);
    --ui-plan-panel-catch-copy-color: var(--ui-plan-panel-70-catch-copy-color);

    display: grid;
    /* デフォルト (キャッチコピー無し): ヘッダーとボディの2行 */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header"
      "body";
    gap: var(--ui-plan-panel-gap);
    border-radius: var(--ui-plan-panel-border-radius);
    padding-block-start: var(--ui-plan-panel-padding-block-start);
    padding-block-end: var(--ui-plan-panel-padding-block-end);
    padding-inline: var(--ui-plan-panel-padding-inline);
    background-color: var(--ui-plan-panel-base-background);

    /* キャッチコピーがある場合: 3行レイアウトを適用 */
    &:has(> .catch-copy) {
      grid-template-rows: auto auto 1fr; /* キャッチコピー用の行を追加 */
      grid-template-areas:
        "catch-copy"
        "header"
        "body";
    }

    /* モバイル向けスタイル */
    @media (width < 40.1rem) {
      gap: var(--ui-plan-panel-mobile-gap);
      padding-block-start: var(--ui-plan-panel-mobile-padding-block-start);
      padding-block-end: var(--ui-plan-panel-mobile-padding-block-end);
      padding-inline: var(--ui-plan-panel-mobile-padding-inline);
    }

    /* キャッチコピー部分 */
    & > .catch-copy {
      grid-area: catch-copy; /* :has() でエリアが定義された場合のみ有効 */
      text-align: center;
      font-family: var(--ui-plan-panel-catch-copy-font-family);
      font-weight: var(--font-weight-bold);
      color: var(--ui-plan-panel-catch-copy-color);
      line-height: var(--line-height-sm);
      word-break: auto-phrase;
    }

    /* ヘッダー部分 */
    & > header {
      grid-area: header;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-block: var(--ui-plan-panel-header-padding-block);
      width: 100%;
      background-color: var(--ui-plan-panel-header-background);
      border-radius: var(--radius-sm);
      font-weight: var(--font-weight-bold);
    }

    /* パーセンテージ表示 */
    & > header > .percentage {
      --fs-min: var(--ui-plan-panel-percentage-fs-min);
      --fs-max: var(--ui-plan-panel-percentage-fs-max);
      font-family: var(--ui-plan-panel-percentage-font-family);
      line-height: var(--line-height-one);
      color: var(--ui-plan-panel-header-text-color);

      @media (width < 40.1rem) {
        font-size: var(--ui-plan-panel-mobile-percentage-fs);
      }
    }

    /* プランラベル */
    & > header > .label {
      --fs-min: var(--ui-plan-panel-label-fs-min);
      --fs-max: var(--ui-plan-panel-label-fs-max);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-one);
      color: var(--ui-plan-panel-header-text-color);
      padding-block-end: var(--spacing-0-5);

      @media (width < 40.1rem) {
        font-size: var(--ui-plan-panel-mobile-label-fs);
      }
    }

    /* 本文部分 */
    & > .body {
      grid-area: body;
      display: flex;
      flex-direction: column;
      gap: var(--ui-plan-panel-body-gap);
      color: var(--ui-plan-panel-body-text-color);
      container-type: inline-size;
      container-name: plan-panel-body;

      /* 本文内のdl要素（旧PlanCoverageDetail相当）のスタイルをここに統合 */
      & > dl {
        /* --- ローカル変数定義 --- */
        --ui-plan-panel-detail-item-gap: var(--spacing-2-px);
        --ui-plan-panel-detail-dt-color: var(--semantic-text-secondary);
        --ui-plan-panel-detail-dt-font-size: var(--font-size-16);
        --ui-plan-panel-detail-dt-font-weight: var(--font-weight-bold);
        --ui-plan-panel-detail-dt-width: 5rem;
        --ui-plan-panel-detail-dd-color: var(--semantic-text-primary);
        --ui-plan-panel-detail-dd-font-size: var(--font-size-16);
        --ui-plan-panel-detail-dd-font-weight: var(--font-weight-bold);
        --ui-plan-panel-detail-value-font-size: var(--font-size-18);
        --ui-plan-panel-detail-value-font-weight: var(--font-weight-bold);
        --ui-plan-panel-detail-value-line-height: 1.25;
        --ui-plan-panel-detail-note-color: var(--semantic-text-secondary);
        --ui-plan-panel-detail-note-font-size: var(--font-size-12);
        --ui-plan-panel-detail-note-font-weight: var(--font-weight-normal);
        --ui-plan-panel-detail-note-line-height: 1.5;

        display: grid;
        gap: 0;
        width: 100%;

        /* 各項目 (div) */
        > div {
          display: flex;
          gap: var(--ui-plan-panel-detail-item-gap);
          align-items: center;
          padding: var(--spacing-4) 0;
          border-bottom: 1px solid var(--neutral-gray-100);
        }
        > div:first-child {
          padding-top: var(--spacing-4);
        }
        > div:last-child {
          border-bottom: none;
          padding-bottom: var(--spacing-4);
        }

        /* 項目名 (dt) */
        > div > dt {
          color: var(--ui-plan-panel-detail-dt-color);
          font-size: var(--ui-plan-panel-detail-dt-font-size);
          font-weight: var(--ui-plan-panel-detail-dt-font-weight);
          flex-shrink: 0;
          width: var(--ui-plan-panel-detail-dt-width);
          min-width: var(--ui-plan-panel-detail-dt-width);
        }

        /* 補償内容 (dd) */
        > div > dd {
          color: var(--ui-plan-panel-detail-dd-color);
          font-size: var(--ui-plan-panel-detail-dd-font-size);
          font-weight: var(--ui-plan-panel-detail-dd-font-weight);
          flex-grow: 1;
          text-align: left;
          line-height: var(--line-height-md);
          margin: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          gap: var(--spacing-4-px);
        }

        /* 補償金額 (最初のspan) */
        > div > dd > span:first-child {
          display: block;
          font-size: var(--ui-plan-panel-detail-value-font-size);
          font-weight: var(--ui-plan-panel-detail-value-font-weight);
          line-height: var(--ui-plan-panel-detail-value-line-height);
        }

        /* 限度回数 (.note) */
        > div > dd > .note {
          display: block;
          color: var(--ui-plan-panel-detail-note-color);
          font-size: var(--ui-plan-panel-detail-note-font-size);
          font-weight: var(--ui-plan-panel-detail-note-font-weight);
          line-height: var(--ui-plan-panel-detail-note-line-height);
        }

        /* 注釈 (sup) */
        > div > dd sup {
          font-size: 0.75em; /* 親要素に対して小さく */
          vertical-align: super; /* 上付き文字 */
          line-height: 1; /* 行の高さへの影響を最小限に */
          margin-left: 0.1em;
          font-weight: var(--font-weight-normal); /* 太さを通常に */
        }

        /* コンテナクエリによるスタイル切り替え */
        @container plan-panel-body (width < 300px) {
          /* 狭い場合: 縦積みレイアウト */
          > div {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-2-px);
            padding: var(--spacing-3) 0;
          }
          > div > dt {
            width: auto;
            min-width: auto;
          }
          > div > dd {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--spacing-1-px);
          }
        }
        /* コンテナ幅が広い場合: 左右パディングを追加 */
        @container plan-panel-body (width >= 300px) {
          padding-inline: var(--spacing-5-px);
        }

        /* モバイル対応 (ビューポート基準) */
        @media (width < 40.1rem) {
          --ui-plan-panel-detail-item-gap: var(--spacing-0-5-px);
          --ui-plan-panel-detail-dt-font-size: var(--font-size-14);
          --ui-plan-panel-detail-dd-font-size: var(--font-size-14);
          --ui-plan-panel-detail-value-font-size: var(--font-size-16);
        }
      }
    }
  }

  /* --- シンプルパターンのスタイル --- */

  .plan-panel > .body > p.amount {
    /* 全体的なスタイル (揃えなど) */
    font-size: var(--font-size-18); /* Figma: 18px (単位部分に適用される) */
    line-height: 1.25; /* Figma: 1.25em */
    text-align: center; /* Figma: Center */
    margin: 0; /* デフォルトマージンリセット */
    font-weight: var(--font-weight-bold); /* 数値部分のみBold */
  }
  .plan-panel > .body > p.amount .unit {
    font-weight: var(--font-weight-normal); /* 単位部分はNormal */
    /* 必要であれば font-family や font-size を調整 */
  }
  .plan-panel > .body > p.note {
    font-size: var(--font-size-12); /* Figma: 12px */
    font-weight: 300; /* Figma: Light (300) - 直接指定 */
    line-height: 1.5; /* Figma: 1.5em */
    text-align: center; /* Figma: Center */
    margin: 0; /* デフォルトマージンリセット */
    /* amountとの間のギャップを再現 (Figmaでは2px) */
    margin-top: 2px;
  }

  /* 70%プランのスタイル */
  .plan-panel[data-plan="70"] {
    --ui-plan-panel-base-background: var(--ui-plan-panel-70-bg);
    --ui-plan-panel-header-background: var(--ui-plan-panel-70-header-bg);
    --ui-plan-panel-catch-copy-color: var(--ui-plan-panel-70-catch-copy-color);
  }

  /* 50%プランのスタイル */
  .plan-panel[data-plan="50"] {
    --ui-plan-panel-base-background: var(--ui-plan-panel-50-bg);
    --ui-plan-panel-header-background: var(--ui-plan-panel-50-header-bg);
    --ui-plan-panel-catch-copy-color: var(--ui-plan-panel-50-catch-copy-color);
  }

  /* 数値部分 */
  .numeric-value {
    font-family: var(--ui-plan-panel-detail-numeric-font-family);
    font-size: var(--ui-plan-panel-numeric-font-size);
    font-weight: var(--font-weight-bold);
    display: inline-block;
    vertical-align: baseline;
  }
  @media (width < 40.1rem) {
    .numeric-value {
      font-size: var(--ui-plan-panel-mobile-numeric-font-size);
    }
  }

  /* プランを並べた時のスタイル */
  .plan-panels {
    display: grid;
    grid-template-areas:
      "plan70 plan50"
      "note note";
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-2);

    [data-plan="70"] {
      grid-area: plan70;
    }
    [data-plan="50"] {
      grid-area: plan50;
    }
    .note-list {
      grid-area: note;
    }
  }

  @media screen and (min-width: 40.01em) {
    .plan-panels {
      column-gap: var(--spacing-5);
    }
  }
}

@layer recipes {
  .read-more {
    --read-more-bottom-height: 40px;
    position: relative;
    background-color: var(--semantic-fill-primary);
    display: grid;
    grid-template-rows: minmax(var(--read-more-displayed-height, 8em), 0.2fr) var(
        --read-more-bottom-height,
        40px
      );
    transition: 0.4s ease;
    --transition-prop: grid-template-rows;
    transition-property: grid-template-rows;
    border-radius: var(--radius-md);
    padding: var(--spacing-8) var(--spacing-5-px) 0;
  }

  .read-more::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 30%, var(--semantic-fill-on-accent));
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .read-more:has(input:checked) {
    grid-template-rows: minmax(var(--read-more-displayed-height, 8em), 1fr) var(
        --read-more-bottom-height
      );
    padding-bottom: 30px;
  }

  .read-more:has(input:checked)::after {
    opacity: 0;
    visibility: hidden;
  }

  .read-more:has(input:checked) > :where(label) {
    margin: 0 auto;
    grid-row: span 2 / span 2;
  }

  .read-more input {
    appearance: none;
  }
  :where(.read-more > div) {
    overflow: hidden;
    padding-bottom: var(--spacing-8);
    grid-row: 1 / 3;
    grid-column: 1 / 2;
  }

  .read-more:not(:has(input:checked)) > div {
    height: calc(var(--read-more-displayed-height) + var(--read-more-bottom-height));
  }

  .read-more :where(input[type="checkbox"][aria-hidden="true"]) {
    appearance: none;
    position: absolute;
    left: -999em;
  }

  .read-more :where(input[type="checkbox"][aria-hidden="true"]):checked ~ label::after {
    background: none;
    mask-image: var(--icon-minus-md);
    -webkit-mask-image: var(--icon-minus-md);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--semantic-text-brand-primary);
  }

  .read-more
    :where(input[type="checkbox"][aria-hidden="true"]):checked
    ~ label
    > :where(span):first-of-type {
    display: none;
  }

  .read-more
    :where(input[type="checkbox"][aria-hidden="true"]):checked
    ~ label
    > :where(span):last-of-type {
    display: block;
  }

  .read-more :where(input:checked ~ section) {
    grid-template-rows: repeat(1, minmax(var(--read-more-displayed-height, 5em), 1fr));
  }

  .read-more :where(label) {
    /* transition: 0.2s; */
    /* --transition-prop: bottom filter;
    transition-property: bottom filter; */
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 12px;
    width: min(166px, 100%);
    height: 40px;
    margin: 0 auto;
    padding: var(--spacing-1) var(--spacing-3-px);
    border: 2px solid #ccc;
    background-color: var(--colors-white);
    font-size: var(--font-sizes-13);
    text-align: center;
    color: var(--colors-text);
    border-radius: var(--radius-full);
    cursor: pointer;
    z-index: 1;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  .read-more :where(label)::after {
    content: "";
    mask-image: var(--icon-plus-md);
    -webkit-mask-image: var(--icon-plus-md);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--semantic-text-brand-primary);
    width: 13px;
    aspect-ratio: 1;
    padding-inline-start: 0.5em;
  }

  .read-more :where(label) > :where(span):last-of-type {
    display: none;
  }

  .read-more :where(input[type="checkbox"][aria-hidden="true"]):focus ~ label {
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
  }

  @media screen and (min-width: 40.01em) {
    .read-more {
      border-radius: var(--radius-md);
      padding: var(--spacing-8) var(--spacing-10-px) 0;
    }
  }

  @media (any-hover: hover) {
    .read-more :where(label):is(:hover, [data-hover]) {
      filter: contrast(0.9);
    }
  }
}

@layer recipes {
  .reference-list {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: var(--spacing-5);
    column-gap: var(--spacing-2-px);
  }

  @media screen and (min-width: 40.01em) {
    .reference-list {
      column-gap: var(--spacing-3-px);
    }
  }
}

@layer recipes {
  .scroll-top-banner {
    --fs-min: var(--clamp-font-size-15);
    --fs-max: var(--clamp-font-size-22);

    font-weight: var(--font-weight-bold);
    color: var(--semantic-text-primary);
    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: var(--spacing-5) auto;
    cursor: pointer;
    border-bottom: var(--border-width-level-1) solid var(--semantic-stroke-on-accent);
  }

  .scroll-top-banner::before {
    content: "";
    display: block;
    width: 12px;
    height: 22px;
    mask-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16797 9.27344L7.45297 2.26044L13.739 9.27344' stroke='black' stroke-width='3' stroke-miterlimit='10'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--semantic-text-brand-primary);
    flex-shrink: 0;
  }

  .scroll-top-banner:is(:hover, [data-hover]) {
    border-color: var(--semantic-stroke-tertiary);
  }

  @media screen and (min-width: 40.01em) {
    .scroll-top-banner {
      gap: var(--spacing-2);
      margin: var(--spacing-6) auto;
    }

    .scroll-top-banner::before {
      width: 19px;
    }
  }
}

@layer recipes {
  .basicTab {
    margin-inline: calc(var(--content-side-space) * -1);
  }

  .basicTab > input {
    position: absolute;
    left: -100%;
  }

  .basicTab > ul {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    padding-inline: 20px;
  }

  .basicTab > ul li,
  .basicTab > ul label {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .basicTab > ul li {
    flex: 1 1 0%;
    padding-top: 10px;
  }

  .basicTab > ul label {
    --fs-min: var(--clamp-font-size-14);
    --fs-max: var(--clamp-font-size-16);
    -webkit-touch-callout: none;
    /* -khtml-user-select: none; */
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: var(--semantic-fill-primary);
    color: var(--semantic-text-secondary);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-2) var(--spacing-2-px);
    border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
    border-bottom: none;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    line-height: var(--line-height-sm);
    text-align: center;
    word-break: break-all;
    transition: filter 0.2s ease-in-out;
  }

  .basicTab > input:nth-child(1):checked ~ ul li:nth-child(1),
  .basicTab > input:nth-child(2):checked ~ ul li:nth-child(2),
  .basicTab > input:nth-child(3):checked ~ ul li:nth-child(3),
  .basicTab > input:nth-child(4):checked ~ ul li:nth-child(4) {
    padding-top: 0;
  }

  .basicTab > input:nth-child(1):checked ~ ul li:nth-child(1) label,
  .basicTab > input:nth-child(2):checked ~ ul li:nth-child(2) label,
  .basicTab > input:nth-child(3):checked ~ ul li:nth-child(3) label,
  .basicTab > input:nth-child(4):checked ~ ul li:nth-child(4) label {
    --fs-min: var(--clamp-font-size-16);
    --fs-max: var(--clamp-font-size-20);

    background-color: var(--semantic-fill-on-accent);
    color: var(--semantic-text-brand-primary);
    pointer-events: none;
    margin-bottom: calc(var(--spacing-1) * -1);
  }

  .basicTab > div {
    position: relative;
    background-color: var(--semantic-fill-on-accent);

    border-block: var(--border-width-level-2) solid var(--semantic-stroke-primary);
    padding: var(--spacing-5) var(--spacing-5-px);
  }

  .basicTab > div > section,
  .basicTab > div > section > h2,
  .basicTab > div > section > h3,
  .basicTab > div > section > h4,
  .basicTab > div > section > h5 {
    position: absolute;
    top: -999em;
    left: -999em;
  }

  .basicTab > input:nth-child(1):checked ~ div > section:nth-child(1),
  .basicTab > input:nth-child(2):checked ~ div > section:nth-child(2),
  .basicTab > input:nth-child(3):checked ~ div > section:nth-child(3),
  .basicTab > input:nth-child(4):checked ~ div > section:nth-child(4) {
    position: static;
  }

  .basicTab:focus-within {
    position: relative;
  }

  .basicTab:has(:focus-visible) > .operation-helper {
    top: -24px;
    transform: translateY(0);
    position: absolute;
    left: 0;
    opacity: 1;
  }

  @media screen and (min-width: 40.01em) {
    .basicTab > ul {
      padding-inline: var(--spacing-10-px);
    }

    .basicTab > ul li {
      padding-top: var(--spacing-5);
    }

    .basicTab > ul label {
      padding: var(--spacing-5) var(--spacing-5-px);
    }

    .basicTab > div {
      border-inline: var(--border-width-level-2) solid var(--semantic-stroke-primary);
      border-radius: var(--radius-md);
      padding: var(--spacing-6) var(--spacing-10-px);
    }
  }

  @media (any-hover: hover) {
    .basicTab > ul label:hover {
      filter: contrast(0.9);
    }
  }

  .operation-helper {
    font-size: var(--font-size-13);
    color: var(--semantic-text-secondary);
    position: absolute;
    left: -200vw;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(50%);
  }
}

@layer recipes {
  .table-of-contents h2 {
    --fs-min: var(--clamp-font-size-18);
    --fs-max: var(--clamp-font-size-20);

    font-weight: var(--font-weight-bold);
    margin-block-end: var(--spacing-4);
  }

  .table-of-contents .box-fill {
    padding-block: var(--spacing-5);
  }

  .table-of-contents :is(.bullet-list:not(.check)) {
    background-color: var(--semantic-fill-on-accent);
    padding: var(--spacing-6) var(--spacing-8-px);
  }

  .table-of-contents :is(.bullet-list:not(.check)) {
    border-radius: var(--radius-sm);
  }

  .table-of-contents :is(.bullet-list:not(.check)) > li {
    padding-left: 0;
  }

  .table-of-contents :is(.bullet-list:not(.check)) > li::marker {
    content: "";
  }

  [data-ua="safari"] .table-of-contents :is(.bullet-list:not(.check)) > li::before {
    content: "";
  }

  p > .border-link {
    margin-block-start: var(--spacing-2);
  }

  @media screen and (min-width: 40.01em) {
    .table-of-contents h2 {
      margin-bottom: var(--spacing-4);
    }

    .table-of-contents .box-fill {
      padding-block: var(--spacing-6);
    }
  }

  @media screen and (min-width: 40.01em) {
    .table-of-contents :is(.bullet-list:not(.check)) {
      display: grid;
      gap: var(--spacing-2);
      grid-template-columns: repeat(var(--toc-list-cols, 2), 1fr);
    }
  }
}

@layer layout {
  :where(main) > section,
  section:has(> .heading-level2, > .heading-level3),
  aside.box-border-with-heading[data-layout="section-layout"] {
    display: grid;
    gap: var(--spacing-gap-stack);
  }
  .page-title + nav.nested-toc + section {
    --mbs-min: var(--spacing-scale-16);
    --mbs-max: var(--spacing-scale-28);
  }
  :where(section, .nested-toc) {
    &:not(:first-of-type) > .heading-level1 {
      --mbs-min: var(--spacing-scale-16);
      --mbs-max: var(--spacing-scale-28);
    }
    &:first-of-type > .heading-level1 {
      margin-block-start: 0;
    }

    & .heading-level2:has(+ *) {
      --mbs-min: var(--spacing-scale-6);
      --mbs-max: var(--spacing-scale-10);
    }

    &:has(.heading-level1 + section > .heading-level2) > section:first-of-type .heading-level2 {
      --mbs-min: var(--spacing-scale-2);
      --mbs-max: var(--spacing-scale-4);
    }

    > .heading-level3 {
      --mbs-min: var(--spacing-scale-4);
      --mbs-max: var(--spacing-scale-6);
    }

    > .heading-level4 {
      margin-block-start: var(--spacing-2);
    }

    > :where(
        .internal-link,
        img,
        table,
        .stepper,
        .plan-panels,
        .pet-insurance-premium-table,
        .tabbed-split-view,
        .accordion,
        .box-outline,
        .description-list[data-style="table"]
      ) {
      --mbs-min: var(--spacing-scale-1);
      --mbs-max: var(--spacing-scale-2);
    }

    > img {
      margin-inline: auto;
    }
  }

  /* 補償内容などの page-title + sectionで見出しのスタイルがheading-level2になる場合の縦余白 */
  :where(.page-title + section > .basic-division:not(:first-child)) > .heading-level2 {
    --mbs-min: var(--spacing-scale-10);
    --mbs-max: var(--spacing-scale-14);
  }

  section > ol:has(.border-link) > li:not(:first-of-type) {
    margin-block-start: var(--spacing-2);
  }

  section > figure:has(img, picture) {
    --mbs-min: var(--spacing-scale-1);
    --mbs-max: var(--spacing-scale-2);

    /* margin-inline: auto; */
  }

  section > figure img {
    margin-inline: auto;
  }

  section > figure > :where(figcaption:not(.heading-level4)) {
    --figcaption-font-size: var(--font-size-12);
    --figcaption-margin-block-start: var(--spacing-2);

    font-size: var(--figcaption-font-size);
    margin-block-start: var(--figcaption-margin-block-start);
  }
}

@layer recipes {
  .card-link-list {
    display: grid;
    gap: var(--spacing-3);
    @media screen and (min-width: 40.01em) {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-6);
    }
    > li {
      display: contents;
      &:nth-child(n + 7) {
        display: none;
      }
    }
  }

  .card-link {
    position: relative;
    display: grid;
    /* grid-template-columns: 80px 1fr; */
    column-gap: var(--spacing-2-px);
    grid-template-areas: "image title" "content content";
    align-items: center;
    background-color: var(--semantic-background-body);
    padding: var(--spacing-4) var(--spacing-4-px) var(--spacing-4);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-body-sm);
    transition: border 0.2s ease;
    border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
    @media screen and (min-width: 40.01em) {
      padding: var(--spacing-6) var(--spacing-6-px) var(--spacing-10);
      display: block;
    }
    &::after {
      position: absolute;
      right: 10px;
      bottom: 10px;
      content: "";
      display: block;
      width: 11px;
      height: 12px;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' viewBox='0 0 11 12' fill='none'%3E%3Cpath d='M9.86866 11.1562H1.19266C1.02176 11.1565 0.854611 11.106 0.712409 11.0112C0.570207 10.9164 0.459342 10.7815 0.393897 10.6237C0.328452 10.4658 0.311368 10.292 0.344794 10.1244C0.378221 9.95678 0.460669 9.80289 0.581672 9.68219L9.45365 0.810179C9.57435 0.689176 9.72827 0.606728 9.89588 0.573302C10.0635 0.539875 10.2372 0.55699 10.3951 0.622435C10.553 0.68788 10.6879 0.798714 10.7827 0.940917C10.8775 1.08312 10.928 1.25026 10.9276 1.42117V10.0972C10.9276 10.2362 10.9003 10.374 10.8471 10.5024C10.7938 10.6309 10.7158 10.7477 10.6175 10.846C10.5192 10.9443 10.4024 11.0223 10.2739 11.0756C10.1454 11.1288 10.0077 11.1562 9.86866 11.1562Z' fill='black'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-size: contain;
      background-color: var(--semantic-fill-brand-primary);
    }
    @media (any-hover: hover) {
      &:hover {
        border: var(--border-width-level-2) solid var(--semantic-fill-brand-primary);
      }
    }
    > img {
      max-width: 80px;
      width: 100%;
      grid-area: image;
      margin-inline: auto;
      @media screen and (min-width: 40.01em) {
        max-width: unset;
        & + .title {
          margin-top: var(--spacing-4);
        }
      }
    }
    > .title {
      grid-area: title;
      color: var(--semantic-text-primary);
      font-weight: var(--font-weight-bold);
    }
  }
}

@layer state {
  .card-link.comingsoon {
    /* 背景をグレーに */
    background-color: var(--semantic-fill-primary);

    /* one-column layout かつ中央寄せ */
    grid-template-columns: 1fr;
    place-content: center;

    .title {
      grid-area: unset;
    }

    /* 下部アイコン非表示 */
    &::after {
      display: none;
    }

    /* ホバー時の枠線変更を無効化 */
    @media (any-hover: hover) {
      &:hover {
        border: var(--border-width-level-2) solid var(--semantic-stroke-primary);
      }
    }
  }

  .card-link.comingsoon > img {
    display: none;
  }
}

@layer state {
  /* cromeでdetailsタグの中身が表示されない問題を解決 */
  /* detailsが開くまでcontaine-queryを使用しないようにする */
  details:not([open]) *:not(summary) {
    container: none;
  }

  /* dialog open 時の背景固定 */
  body:has(dialog[open]) {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-width, 0);
  }
}

/* pictgram.cssの上書きのため＠layerをつけない */

.featured-flex-box [class^="pct-"].pct-caution::before,
.featured-flex-box [class^="pct-"].pct-caution::after {
  color: var(--semantic-text-brand-primary);
}

@layer base {
  /*-----------------------------------------------------------------------------
    Usage: Clamp Font-Size Calculation
  -----------------------------------------------------------------------------*/

  :where(body) {
    font-family:
      Arial,
      Helvetica,
      Verdana,
      Hiragino Kaku Gothic ProN,
      -apple-system,
      BlinkMacSystemFont,
      メイリオ,
      MS PGothic,
      sans-serif;
    line-height: var(--line-height-lg);
    color: var(--semantic-text-primary);
  }

  :where(body) * {
    color: inherit;
  }

  :where(main, .sb-show-main:not(:has(.category-navigation)), body > dialog)
    a:any-link:not([class]) {
    color: var(--semantic-text-link);
    text-decoration: underline;
  }

  :where(main, .sb-show-main, body > dialog) a:visited {
    color: revert;
  }

  @media (any-hover: hover) {
    :where(main, .sb-show-main:not(:has(.category-navigation)), body > dialog)
      a:any-link:not([class]):hover {
      text-decoration: none;
      color: var(--semantic-text-link-hover);
    }
  }

  :where(main, .sb-show-main, body > dialog) mark {
    background-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: var(--semantic-fill-accent);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
  }

  /* 約物のサイズ調整する要素 */

  button,
  a[class*="link"],
  a[class*="button"],
  [class^="heading-level"] {
    font-feature-settings: "halt" on;
  }
}

@layer recipes {
  .pet-insurance-premium-table {
    /* 変数定義 */
    --ui-pet-table-border-color: var(--semantic-stroke-primary);
    --ui-pet-table-radius: var(--radius-md);
    --ui-pet-table-header-bg: var(--semantic-fill-neutral-lightest);
    --ui-pet-table-plan-70-bg: var(--semantic-fill-brand-secondary-light);
    --ui-pet-table-plan-70-text: var(--primitive-cyan-700);
    --ui-pet-table-plan-50-bg: var(--semantic-fill-brand-tertiary-light);
    --ui-pet-table-plan-50-text: var(--primitive-pink-700);
    --ui-pet-table-gutter-size: var(--spacing-0-5-px);
    --fs-heading-min: var(--clamp-font-size-16);
    --fs-heading-max: var(--clamp-font-size-16);
    --fs-percentage-min: var(--clamp-font-size-20);
    --fs-percentage-max: var(--clamp-font-size-32);
    --fs-plan-min: var(--clamp-font-size-16);
    --fs-plan-max: var(--clamp-font-size-24);

    @media (min-width: 40.01rem) {
      --ui-pet-table-gutter-size: var(--spacing-2-px);
    }

    width: 100%;
    /* テーブル全体 */
    :where(table, table *) {
      /* 既存コンポーネントのバッティングを一旦回避。 */
      all: revert;
      font-size: var(
        --fs-clamp,
        /* フォールバック */
        calc(var(--clamp-root-font-size) * (1rem / var(--clamp-root-font-size)))
      );
      line-height: var(--line-height-sm);
    }

    > table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    caption {
      --fs-min: var(--fs-heading-min);
      --fs-max: var(--fs-heading-max);

      font-weight: var(--font-weight-bold);
      margin-block: 0;
      text-align: left;
      margin-block-end: var(--spacing-2);
    }

    /* テーブルセル共通スタイル */
    th,
    td {
      padding-block: var(--spacing-4);
      text-align: center;
      vertical-align: middle;

      border: none;
    }

    /* テーブルヘッダー */
    thead th {
      font-size: var(--font-size-16);

      border-bottom: var(--border-width-level-1) solid var(--ui-pet-table-border-color);
    }

    /* tbody内の共通スタイル */
    tbody tr:not(:last-child) :is(th, td) {
      border-bottom: var(--border-width-level-1) solid var(--ui-pet-table-border-color);
    }

    tbody :is(th, td) {
      padding-block: var(--spacing-4);
    }

    tbody th {
      padding-inline: var(--spacing-2);
    }

    /* 年齢セル */
    th[data-type="age"] {
      --fs-min: var(--clamp-font-size-14);
      --fs-max: var(--clamp-font-size-16);
      font-weight: var(--font-weight-normal);
    }

    /* プランヘッダー共通（70%と50%） */
    th[data-plan] {
      position: relative;
      border-top-left-radius: var(--ui-pet-table-radius);
      border-top-right-radius: var(--ui-pet-table-radius);

      &::before {
        content: "";
        position: absolute;
        width: calc(100% - var(--ui-pet-table-gutter-size));
        height: 100%;
        top: 0;
        border-top-left-radius: var(--ui-pet-table-radius);
        border-top-right-radius: var(--ui-pet-table-radius);
        z-index: -1;
      }

      .percentage {
        --fs-min: var(--fs-percentage-min);
        --fs-max: var(--fs-percentage-max);
      }

      span:not(.percentage) {
        --fs-min: var(--fs-plan-min);
        --fs-max: var(--fs-plan-max);
        font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* Figmaで指定されたフォント */
      }
    }

    /* 70%プランのヘッダー固有スタイル */
    th[data-plan="70"] {
      &::before {
        left: 0;
        background-color: var(--ui-pet-table-plan-70-bg);
      }

      .percentage,
      span:not(.percentage) {
        color: var(--ui-pet-table-plan-70-text);
      }
    }

    /* 50%プランのヘッダー固有スタイル */
    th[data-plan="50"] {
      &::before {
        right: 0;
        background-color: var(--ui-pet-table-plan-50-bg);
      }

      .percentage,
      span:not(.percentage) {
        color: var(--ui-pet-table-plan-50-text);
      }
    }

    /* プランデータセル共通 */
    td[data-plan] {
      --fs-min: var(--clamp-font-size-18);
      --fs-max: var(--clamp-font-size-24);

      position: relative;
      font-weight: var(--font-weight-bold);

      text-align: center;

      &::before {
        content: "";
        position: absolute;
        width: calc(100% - var(--ui-pet-table-gutter-size));
        height: 100%;
        top: 0;
        z-index: -1;
      }

      /* 円をafter疑似要素で表示 */
      > .price-unit {
        --fs-min: var(--clamp-font-size-14);
        --fs-max: var(--clamp-font-size-18);
        font-weight: var(--font-weight-bold);
        vertical-align: baseline;
      }
    }

    /* 70%プランデータセル固有スタイル */
    td[data-plan="70"] {
      &::before {
        left: 0;
        background-color: var(--ui-pet-table-plan-70-bg);
      }
    }

    /* 50%プランデータセル固有スタイル */
    td[data-plan="50"] {
      &::before {
        right: 0;
        background-color: var(--ui-pet-table-plan-50-bg);
      }
    }

    /* 最後の行の角丸 - 共通 */
    tr:last-child td[data-plan] {
      border-bottom-left-radius: var(--ui-pet-table-radius);
      border-bottom-right-radius: var(--ui-pet-table-radius);

      &::before {
        border-bottom-left-radius: var(--ui-pet-table-radius);
        border-bottom-right-radius: var(--ui-pet-table-radius);
      }
    }

    /* データが2グループある場合の調整 */
    tr[data-group="after"]:first-child td {
      border-top-width: var(--border-width-level-2);
    }
  }
}

@layer recipes {
  /* Stepper コンポーネント: 手順を示す OL リスト */
  .stepper {
    /* Layout */
    display: grid;
    row-gap: var(--spacing-gap-stack);
    list-style: none;

    /* Counter */
    counter-reset: step;

    /* Local vars */
    --ui-stepper-number-size: var(--space-56);

    /* Horizontal layout */
    &[data-orientation="horizontal"] {
      @media (width > 40.1rem) {
        grid-auto-flow: column;
        column-gap: var(--spacing-8);
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      }
    }

    /* Horizontal mode specifics */
    &[data-orientation="horizontal"] {
      @media (width > 40.1rem) {
        > li {
          grid-template-areas:
            "icon"
            "title"
            "body";
          grid-template-rows: subgrid;
          grid-row: span 4;
          justify-items: center;
          grid-template-columns: auto;
        }

        > li > :is(h2, h3, h4, h5) {
          text-align: center;
        }
      }
    }

    /* Step item */
    > li {
      display: grid;
      grid-template-columns: var(--ui-stepper-number-size) 1fr;
      grid-template-areas:
        "icon title"
        ". body";
      column-gap: var(--spacing-4);
      align-items: center;
      counter-increment: step;
      position: relative;

      /* Icon */
      > .step-icon {
        grid-area: icon;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        inline-size: var(--ui-stepper-number-size);
        block-size: var(--ui-stepper-number-size);
        border-radius: var(--radius-full);
        background-color: var(--semantic-fill-brand-primary-light);
        color: var(--semantic-text-brand-primary);
        font-family: var(--font-family-en);
        font-size: var(--font-size-16);
        font-weight: var(--font-weight-bold);
        line-height: 1;

        &::before {
          content: "STEP";
          font-size: var(--font-size-10);
          line-height: 1;
          margin-block-end: 0.1rem;
        }

        &::after {
          --fs-min: var(--clamp-font-size-20);
          --fs-max: var(--clamp-font-size-24);

          content: counter(step, decimal-leading-zero);
          line-height: 1;
        }
      }

      /* Title */
      > :is(h2, h3, h4, h5) {
        grid-area: title;
        --fs-min: var(--clamp-font-size-18);
        --fs-max: var(--clamp-font-size-20);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-sm);
        margin: 0;
        word-break: auto-phrase;

        @media (width > 40.1rem) {
          place-self: stretch;
        }
      }

      /* Body slot */
      > :not(.step-icon, h2, h3, h4, h5),
      .step-body {
        align-self: start;
        grid-area: body;
        /* grid-column: 2; */
      }

      /* Connecting line (after) */
      &:not(:last-child)::after {
        content: "";
        position: absolute;
        background-color: var(--semantic-stroke-primary);
        top: var(--ui-stepper-number-size);
        left: calc(var(--ui-stepper-number-size) / 2);
        block-size: calc(100% - var(--ui-stepper-number-size) / 2);
        inline-size: 2px;
      }
    }

    /* Horizontal line */
    @media (width > 40.1rem) {
      &[data-orientation="horizontal"] > li:not(:last-child)::after {
        /* comment out */
        left: calc(50% + var(--ui-stepper-number-size) / 2);
        top: calc(var(--ui-stepper-number-size) / 2);
        inline-size: calc(100% - var(--ui-stepper-number-size) / 2);
        block-size: 2px;
      }
    }

    /* Vertical line */
    .stepper:not([data-orientation="horizontal"]) &::after {
      /* @media (width > 40.1rem) { */
      top: var(--ui-stepper-number-size);
      left: calc(var(--ui-stepper-number-size) / 2);
      inline-size: 2px;
      /* block-size: var(--spacing-8); */
      block-size: 100%;
      /* } */
    }

    /* PC size adjustments */
    @media (width > 40.1rem) {
      --ui-stepper-number-size: var(--space-80);

      > li > .step-icon {
        font-size: var(--font-size-20);

        &::before {
          font-size: var(--font-size-12);
        }
      }
    }

    .stepper-body {
      font-size: var(--font-size-14);
      line-height: var(--line-height-md);
      display: grid;

      &[data-body-rows] {
        grid-template-rows: subgrid;
        row-gap: var(--spacing-3);
      }

      &[data-body-rows="2"] {
        grid-row: span 2;
      }

      &[data-body-rows="3"] {
        grid-row: span 3;
      }

      &[data-body-rows="4"] {
        grid-row: span 4;
      }

      > :not(img.picture, .step-card) {
        @media (width > 40.1rem) {
          display: table;
          margin-inline: auto;
        }
      }
    }

    .step-card {
      display: grid;
      row-gap: var(--spacing-3);

      header {
        background-color: var(--semantic-fill-primary);
        padding-block: var(--spacing-3);
        padding-inline: var(--spacing-4-px);
        border-radius: var(--radius-md);
        display: grid;
        place-items: center;

        .phone-number {
          font-size: var(--font-size-24);
          font-family: var(--font-family-en);
          font-weight: var(--font-weight-bold);
          line-height: 1;
          color: var(--semantic-text-brand-primary);
        }
      }
    }
  }
}

@layer recipes {
  .nested-toc h2 {
    --fs-min: var(--clamp-font-size-18);
    --fs-max: var(--clamp-font-size-20);
    font-weight: var(--font-weight-bold);
    margin-block-end: var(--spacing-6);
  }

  .nested-toc .box-fill-border {
    padding-block: var(--spacing-6);
    padding-inline: var(--spacing-6-px);
  }

  @media screen and (min-width: 40.01em) {
    .nested-toc .box-fill-border {
      padding-block: var(--spacing-10);
      padding-inline: var(--spacing-10-px);
    }
  }

  .nested-toc .nested-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    border-radius: var(--radius-sm);
    list-style: none;
  }

  @media screen and (min-width: 40.01em) {
    .nested-toc .nested-toc-list {
      padding: 0;
    }
  }

  .nested-toc .nested-toc-link {
    color: var(--semantic-text-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  @media (any-hover: hover) {
    .nested-toc .nested-toc-link:hover {
      color: var(--ui-border-link-foreground-hover);
      text-decoration: none;
    }
  }

  .nested-toc .nested-toc-list > li {
    padding-left: 0;
  }

  .nested-toc .nested-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    border-radius: var(--radius-sm);
    list-style: none;
  }

  .nested-toc .nested-toc-list:has(.nested-toc-list) > li > .nested-toc-list {
    margin-block-start: var(--spacing-3);
    margin-inline-start: var(--spacing-3);
  }

  .nested-toc .nested-toc-list:has(.nested-toc-list) > li > .nested-toc-list .nested-toc-link {
    position: relative;
    padding-left: var(--spacing-4);
  }

  .nested-toc
    .nested-toc-list:has(.nested-toc-list)
    > li
    > .nested-toc-list
    .nested-toc-link::before {
    --ico_step_down: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02IDVINFYxMVYxM0g2SDEyVjExTDYgMTFWNVoiIGZpbGw9IiNEOUQ5RDkiLz4KPC9zdmc+Cg==");
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 24px;
    background-image: var(--ico_step_down);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  @media screen and (min-width: 40.01em) {
    .nested-toc .nested-toc-list:has(.nested-toc-list) > li > .nested-toc-list .nested-toc-link {
      padding-left: var(--spacing-5);
    }
  }

  .nested-toc .nested-toc-list:has(.nested-toc-list) > li > .nested-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    list-style: none;
  }

  .nested-toc .nested-toc-list:has(.nested-toc-list) > li > .nested-toc-list > li {
    padding-left: 0;
  }
}

@layer recipes {
  .mock {
    --ui-mock-aspect-ratio: 16 / 9;
    --ui-mock-inline-size: 100%;
    background-color: var(--semantic-fill-primary);
    border-radius: var(--radius-xs);
    display: block;
    width: var(--ui-mock-inline-size);
    aspect-ratio: var(--ui-mock-aspect-ratio);
    padding-block-start: var(--spacing-4);

    @media (width >= 40.01rem) {
      --ui-mock-aspect-ratio: 483 / 216;
      --ui-mock-inline-size: 483px;
    }
  }

  .mock > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
  }
}

/* ⚠️ Auto generated by generateIconCss.ts – DO NOT EDIT MANUALLY */

@layer tokens {
  :root {
    --ico-estimate: url("data:image/svg+xml,%3csvg%20width='27'%20height='35'%20viewBox='0%200%2027%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.16656%2026.5753C6.85096%2026.5753%206.54827%2026.4499%206.3251%2026.2268C6.10194%2026.0036%205.97656%2025.7009%205.97656%2025.3853C5.97656%2025.0697%206.10194%2024.767%206.3251%2024.5439C6.54827%2024.3207%206.85096%2024.1953%207.16656%2024.1953H19.0666C19.3822%2024.1953%2019.6849%2024.3207%2019.908%2024.5439C20.1312%2024.767%2020.2566%2025.0697%2020.2566%2025.3853C20.2566%2025.7009%2020.1312%2026.0036%2019.908%2026.2268C19.6849%2026.4499%2019.3822%2026.5753%2019.0666%2026.5753H7.16656Z'%20fill='white'/%3e%3cpath%20d='M7.16656%2021.2491C6.85096%2021.2491%206.54827%2021.1238%206.3251%2020.9006C6.10194%2020.6774%205.97656%2020.3748%205.97656%2020.0591C5.97656%2019.7435%206.10194%2019.4409%206.3251%2019.2177C6.54827%2018.9945%206.85096%2018.8691%207.16656%2018.8691H19.0666C19.3822%2018.8691%2019.6849%2018.9945%2019.908%2019.2177C20.1312%2019.4409%2020.2566%2019.7435%2020.2566%2020.0591C20.2566%2020.3748%2020.1312%2020.6774%2019.908%2020.9006C19.6849%2021.1238%2019.3822%2021.2491%2019.0666%2021.2491H7.16656Z'%20fill='white'/%3e%3cpath%20d='M7.16656%2015.923C6.85096%2015.923%206.54827%2015.7976%206.3251%2015.5744C6.10194%2015.3513%205.97656%2015.0486%205.97656%2014.733C5.97656%2014.4174%206.10194%2014.1147%206.3251%2013.8915C6.54827%2013.6683%206.85096%2013.543%207.16656%2013.543H19.0666C19.3822%2013.543%2019.6849%2013.6683%2019.908%2013.8915C20.1312%2014.1147%2020.2566%2014.4174%2020.2566%2014.733C20.2566%2015.0486%2020.1312%2015.3513%2019.908%2015.5744C19.6849%2015.7976%2019.3822%2015.923%2019.0666%2015.923H7.16656Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M21.9014%202.02555C21.5669%201.60741%2021.1427%201.26986%2020.6601%201.0379C20.1775%200.805946%2019.6488%200.685521%2019.1134%200.685547H3.5954C2.64858%200.685547%201.74052%201.06167%201.07101%201.73117C0.40151%202.40068%200.0253906%203.30872%200.0253906%204.25555V30.4385C0.0253906%2031.3854%200.40151%2032.2934%201.07101%2032.9629C1.74052%2033.6324%202.64858%2034.0085%203.5954%2034.0085H22.6374C23.5842%2034.0085%2024.4923%2033.6324%2025.1618%2032.9629C25.8313%2032.2934%2026.2074%2031.3854%2026.2074%2030.4385V8.66155C26.2074%207.85101%2025.9316%207.06459%2025.4254%206.43155L21.9014%202.02555ZM19.1134%203.06555C19.2918%203.0657%2019.468%203.10595%2019.6288%203.18332C19.7896%203.26069%2019.9309%203.3732%2020.0424%203.51255L23.5664%207.91755C23.7354%208.12868%2023.8275%208.3911%2023.8274%208.66155V30.4385C23.8274%2030.7542%2023.702%2031.0568%2023.4789%2031.28C23.2557%2031.5032%2022.953%2031.6285%2022.6374%2031.6285H3.5954C3.27979%2031.6285%202.97711%2031.5032%202.75394%2031.28C2.53077%2031.0568%202.4054%2030.7542%202.4054%2030.4385V4.25555C2.4054%203.93994%202.53077%203.63726%202.75394%203.41409C2.97711%203.19092%203.27979%203.06555%203.5954%203.06555H19.1134Z'%20fill='white'/%3e%3cpath%20d='M17.6816%203.24219V9.4248H24.5425'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");
    --ico-collapse-orange: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='2'%20viewBox='0%200%2016%202'%3e%3cg%20id='グループ_463'%20data-name='グループ%20463'%20transform='translate(11%200.075)'%3e%3crect%20id='長方形_150425'%20data-name='長方形%20150425'%20width='16'%20height='2'%20transform='translate(-11%20-0.075)'%20fill='%23fc4700'/%3e%3c/g%3e%3c/svg%3e");
    --ico-arrow-right-orange: url("data:image/svg+xml,%3csvg%20width='9'%20height='13'%20viewBox='0%200%209%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.63867%200.984375L7.40167%206.39937L1.63867%2011.8144'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-minus-orange: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16%207.10352H0V8.92605H16V7.10352Z'%20fill='%23FC4700'/%3e%3c/svg%3e");
    --ico-hospital: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M29%2015H24V5C24%204.45%2023.55%204%2023%204H9C8.45%204%208%204.45%208%205V15H3C2.45%2015%202%2015.45%202%2016V28C2%2028.55%202.45%2029%203%2029H29C29.55%2029%2030%2028.55%2030%2028V16C30%2015.45%2029.55%2015%2029%2015ZM18%2027H14V22H18V27ZM28%2027H20V21C20%2020.45%2019.55%2020%2019%2020H13C12.45%2020%2012%2020.45%2012%2021V27H4V17H9C9.55%2017%2010%2016.55%2010%2016V6H22V16C22%2016.55%2022.45%2017%2023%2017H28V27ZM20%2012C20%2012.55%2019.55%2013%2019%2013H17V15C17%2015.55%2016.55%2016%2016%2016C15.45%2016%2015%2015.55%2015%2015V13H13C12.45%2013%2012%2012.55%2012%2012C12%2011.45%2012.45%2011%2013%2011H15V9C15%208.45%2015.45%208%2016%208C16.55%208%2017%208.45%2017%209V11H19C19.55%2011%2020%2011.45%2020%2012Z'%20fill='%2304703E'/%3e%3c/svg%3e");
    --ico-close-modal: url("data:image/svg+xml,%3csvg%20width='21'%20height='20'%20viewBox='0%200%2021%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201L19.807%2018.839'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3cpath%20d='M19.807%201L1%2018.839'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3c/svg%3e");
    --ico-arrow-right-white: url("data:image/svg+xml,%3csvg%20width='10'%20height='16'%20viewBox='0%200%2010%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.763672%201.5L8.03067%208.328L0.763672%2015.157'%20stroke='white'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-heartbeat: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M27.5795%206.59035C24.3995%203.41035%2019.2494%203.38035%2016.0294%206.48035C14.4794%204.95035%2012.4295%204.11035%2010.2494%204.11035C8.06945%204.11035%205.97945%204.97035%204.40945%206.53035C1.19945%209.74035%201.19945%2014.9704%204.40945%2018.1804L15.3094%2029.1104C15.4994%2029.3004%2015.7494%2029.4004%2016.0194%2029.4004C16.2894%2029.4004%2016.5395%2029.2904%2016.7295%2029.1104L27.5894%2018.2504C29.1494%2016.6904%2030.0095%2014.6204%2030.0095%2012.4204C30.0095%2010.2204%2029.1494%208.15035%2027.5894%206.59035H27.5795ZM26.1694%2016.8404L16.0194%2027.0004L5.82945%2016.7804C3.39945%2014.3404%203.39945%2010.3804%205.83945%207.95035C7.01945%206.77035%208.58945%206.12035%2010.2595%206.12035C11.9295%206.12035%2013.4994%206.77035%2014.6795%207.95035L15.3394%208.61035C15.7294%209.00035%2016.3594%209.00035%2016.7494%208.61035L17.3494%208.01035C19.7894%205.58035%2023.7494%205.58035%2026.1794%208.01035C27.3594%209.19035%2028.0095%2010.7604%2028.0095%2012.4304C28.0095%2014.1004%2027.3594%2015.6704%2026.1794%2016.8504L26.1694%2016.8404ZM24.2194%2015.7104C24.2194%2016.2604%2023.7694%2016.7104%2023.2194%2016.7104H20.6895L18.9095%2020.2904C18.7395%2020.6304%2018.3895%2020.8404%2018.0095%2020.8404C17.6295%2020.8404%2017.2795%2020.6204%2017.1195%2020.2804L13.9095%2013.8204L12.7494%2016.1504C12.5794%2016.4904%2012.2294%2016.7004%2011.8494%2016.7004H8.77945C8.22945%2016.7004%207.77945%2016.2504%207.77945%2015.7004C7.77945%2015.1504%208.22945%2014.7004%208.77945%2014.7004H11.2295L13.0095%2011.1204C13.1795%2010.7804%2013.5295%2010.5704%2013.9095%2010.5704C14.2895%2010.5704%2014.6395%2010.7904%2014.7995%2011.1304L18.0095%2017.5904L19.1694%2015.2604C19.3394%2014.9204%2019.6894%2014.7104%2020.0694%2014.7104H23.2094C23.7594%2014.7104%2024.2094%2015.1604%2024.2094%2015.7104H24.2194Z'%20fill='%2304703E'/%3e%3c/svg%3e");
    --ico-plus-orange: url("data:image/svg+xml,%3csvg%20width='16'%20height='15'%20viewBox='0%200%2016%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M9%200.205078H7V14.7853H9V0.205078Z'%20fill='%23FC4700'/%3e%3cpath%20d='M16%206.58398H0V8.40652H16V6.58398Z'%20fill='%23FC4700'/%3e%3c/svg%3e");
    --ico-open-orange: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%206H12'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3cpath%20d='M6%200L6%2012'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3c/svg%3e");
    --ico-sub-scriber: url("data:image/svg+xml,%3csvg%20width='25'%20height='23'%20viewBox='0%200%2025%2023'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cmask%20id='mask0_1_4430'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='25'%20height='23'%3e%3cpath%20d='M25%200.818359H0V22.8184H25V0.818359Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_1_4430)'%3e%3cpath%20d='M16%206.31836C16%204.38536%2014.433%202.81836%2012.5%202.81836C10.567%202.81836%209%204.38536%209%206.31836V7.31836C9%209.25136%2010.567%2010.8184%2012.5%2010.8184C14.433%2010.8184%2016%209.25136%2016%207.31836V6.31836Z'%20stroke='white'%20stroke-width='2'/%3e%3cpath%20d='M14%2013.8184H11C6.02944%2013.8184%202%2017.8478%202%2022.8184C2%2027.7889%206.02944%2031.8184%2011%2031.8184H14C18.9706%2031.8184%2023%2027.7889%2023%2022.8184C23%2017.8478%2018.9706%2013.8184%2014%2013.8184Z'%20stroke='white'%20stroke-width='2'/%3e%3c/g%3e%3c/svg%3e");
    --ico-web: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16%2016.6501C16%2017.2001%2015.55%2017.6501%2015%2017.6501H3C1.9%2017.6501%201%2016.7501%201%2015.6501V5.3501C1%204.2501%201.9%203.3501%203%203.3501H20C21.1%203.3501%2022%204.2501%2022%205.3501V7.3101C22%207.8601%2021.55%208.3101%2021%208.3101C20.45%208.3101%2020%207.8601%2020%207.3101V5.3501H3V15.6401H15C15.55%2015.6401%2016%2016.0901%2016%2016.6401V16.6501ZM15%2019.6601H8.01C7.46%2019.6601%207.01%2020.1101%207.01%2020.6601C7.01%2021.2101%207.46%2021.6601%208.01%2021.6601H15C15.55%2021.6601%2016%2021.2101%2016%2020.6601C16%2020.1101%2015.55%2019.6601%2015%2019.6601ZM31%2012.3301V28.0001C31%2029.1001%2030.1%2030.0001%2029%2030.0001H20C18.9%2030.0001%2018%2029.1001%2018%2028.0001V12.3301C18%2011.2301%2018.9%2010.3301%2020%2010.3301H29C30.1%2010.3301%2031%2011.2301%2031%2012.3301ZM29%2028.0001V12.3301H20V28.0001H29ZM24.5%2023.7201C23.67%2023.7201%2023%2024.3901%2023%2025.2201C23%2026.0501%2023.67%2026.7201%2024.5%2026.7201C25.33%2026.7201%2026%2026.0501%2026%2025.2201C26%2024.3901%2025.33%2023.7201%2024.5%2023.7201Z'%20fill='%2304703E'/%3e%3c/svg%3e");
    --ico-operator: url("data:image/svg+xml,%3csvg%20width='37'%20height='36'%20viewBox='0%200%2037%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2742_4797)'%3e%3ccircle%20cx='18.2341'%20cy='12.7058'%20r='8.47041'%20fill='%23777777'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.2347%202.1176C13.6997%202.1176%209.90456%205.28556%208.94162%209.52921H27.5278C26.5649%205.28556%2022.7697%202.1176%2018.2347%202.1176ZM29.6895%209.52921C28.6937%204.1079%2023.9439%200%2018.2347%200C12.5255%200%207.77575%204.1079%206.77993%209.52921C6.6538%2010.2159%206.58789%2010.9237%206.58789%2011.6468H29.8815C29.8815%2010.9237%2029.8156%2010.2159%2029.6895%209.52921Z'%20fill='%23777777'/%3e%3crect%20x='7.11719'%20y='7.41113'%20width='4.23521'%20height='10.0586'%20rx='2.1176'%20fill='%23777777'/%3e%3crect%20x='25.1172'%20y='7.41113'%20width='4.23521'%20height='10.0586'%20rx='2.1176'%20fill='%23777777'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.6264%2021.8832L15.5874%2026.4696L18.2344%2022.4991L20.8815%2026.4696L24.7006%2021.8018C28.7402%2024.0678%2031.47%2028.3914%2031.47%2033.3527V35.9997H5V33.3527C5%2028.4502%207.66554%2024.1703%2011.6264%2021.8832Z'%20fill='%23BBBBBB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2742_4797'%3e%3crect%20width='36'%20height='36'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    --ico-apply: url("data:image/svg+xml,%3csvg%20width='27'%20height='34'%20viewBox='0%200%2027%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.1403%2016.8672C18.2508%2016.7567%2018.3385%2016.6255%2018.3983%2016.4811C18.4581%2016.3367%2018.4889%2016.182%2018.4889%2016.0257C18.4889%2015.8694%2018.4581%2015.7147%2018.3983%2015.5703C18.3385%2015.4259%2018.2508%2015.2947%2018.1403%2015.1842L14.5703%2011.6142C14.4598%2011.5037%2014.3286%2011.416%2014.1842%2011.3562C14.0398%2011.2964%2013.8851%2011.2656%2013.7288%2011.2656C13.5725%2011.2656%2013.4178%2011.2964%2013.2734%2011.3562C13.129%2011.416%2012.9978%2011.5037%2012.8873%2011.6142L9.31732%2015.1842C9.09414%2015.4074%208.96875%2015.7101%208.96875%2016.0257C8.96875%2016.3413%209.09414%2016.644%209.31732%2016.8672C9.5405%2017.0904%209.84319%2017.2158%2010.1588%2017.2158C10.4744%2017.2158%2010.7772%2017.0904%2011.0003%2016.8672L12.5393%2015.3282V20.7852C12.5393%2021.1008%2012.6647%2021.4035%2012.8879%2021.6267C13.111%2021.8498%2013.4137%2021.9752%2013.7293%2021.9752C14.0449%2021.9752%2014.3476%2021.8498%2014.5708%2021.6267C14.7939%2021.4035%2014.9193%2021.1008%2014.9193%2020.7852V15.3282L16.4583%2016.8672C16.6814%2017.0901%2016.9839%2017.2153%2017.2993%2017.2153C17.6147%2017.2153%2017.9172%2017.0901%2018.1403%2016.8672Z'%20fill='white'/%3e%3cpath%20d='M7.77789%2025.546C7.46229%2025.546%207.1596%2025.4206%206.93643%2025.1975C6.71326%2024.9743%206.58789%2024.6716%206.58789%2024.356C6.58789%2024.0404%206.71326%2023.7377%206.93643%2023.5146C7.1596%2023.2914%207.46229%2023.166%207.77789%2023.166H19.6779C19.9935%2023.166%2020.2962%2023.2914%2020.5193%2023.5146C20.7425%2023.7377%2020.8679%2024.0404%2020.8679%2024.356C20.8679%2024.6716%2020.7425%2024.9743%2020.5193%2025.1975C20.2962%2025.4206%2019.9935%2025.546%2019.6779%2025.546H7.77789Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M22.5127%201.76773C22.1782%201.34959%2021.754%201.01205%2021.2713%200.78009C20.7887%200.548134%2020.2601%200.427709%2019.7247%200.427734H4.20868C3.26186%200.427734%202.3538%200.803857%201.6843%201.47336C1.01479%202.14287%200.638672%203.05091%200.638672%203.99773V30.1777C0.638672%2031.1246%201.01479%2032.0326%201.6843%2032.7021C2.3538%2033.3716%203.26186%2033.7477%204.20868%2033.7477H23.2487C24.1955%2033.7477%2025.1035%2033.3716%2025.773%2032.7021C26.4425%2032.0326%2026.8187%2031.1246%2026.8187%2030.1777V8.40273C26.8186%207.59219%2026.5429%206.80578%2026.0367%206.17273L22.5127%201.76773ZM19.7257%202.80774C19.9041%202.80789%2020.0802%202.84814%2020.241%202.92551C20.4018%203.00288%2020.5432%203.11539%2020.6547%203.25473L24.1787%207.65474C24.3477%207.86587%2024.4397%208.12828%2024.4397%208.39874V30.1777C24.4397%2030.4933%2024.3143%2030.796%2024.0911%2031.0192C23.868%2031.2424%2023.5653%2031.3677%2023.2497%2031.3677H4.20967C3.89406%2031.3677%203.59138%2031.2424%203.36821%2031.0192C3.14504%2030.796%203.01967%2030.4933%203.01967%2030.1777V3.99773C3.01967%203.68213%203.14504%203.37945%203.36821%203.15628C3.59138%202.93311%203.89406%202.80774%204.20967%202.80774H19.7257Z'%20fill='white'/%3e%3cpath%20d='M18.2949%202.98438V9.16699H25.1558'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");
    --ico-fire-house: url(/ico_fire_house.svg);
    --ico-close-orange: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.19336%201.49414L10.8064%2010.5031'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3cpath%20d='M10.8064%201.49414L1.19336%2010.5031'%20stroke='%23FC4700'%20stroke-width='2'/%3e%3c/svg%3e");
    --icon-arrow-right-sm: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.5859%2010L7.29297%205.70712L8.70718%204.29291L14.4143%2010L8.70718%2015.7071L7.29297%2014.2929L11.5859%2010Z'%20fill='%23004E97'/%3e%3c/svg%3e");
    --ico-arrow-down-gray: url("data:image/svg+xml,%3csvg%20width='21'%20height='20'%20viewBox='0%200%2021%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10.7499%2012.5859L17.0428%206.29297L18.457%207.70718L10.7499%2015.4143L3.04282%207.70718L4.45703%206.29297L10.7499%2012.5859Z'%20fill='%23767676'/%3e%3c/svg%3e");
    --ico-insurance-card: url("data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M26.83%206H5.17C2.87%206%201%207.87%201%2010.17V22.83C1%2025.13%202.87%2027%205.17%2027H26.83C29.13%2027%2031%2025.13%2031%2022.83V10.17C31%207.87%2029.13%206%2026.83%206ZM29%2022.83C29%2024.03%2028.03%2025%2026.83%2025H5.17C3.97%2025%203%2024.03%203%2022.83V10.17C3%208.97%203.97%208%205.17%208H26.83C28.03%208%2029%208.97%2029%2010.17V22.83ZM25.18%2018.05C25.18%2019.81%2023.76%2021.23%2022%2021.23C20.24%2021.23%2018.82%2019.81%2018.82%2018.05C18.82%2016.29%2020.24%2014.87%2022%2014.87C23.76%2014.87%2025.18%2016.29%2025.18%2018.05ZM20.64%2012.6C20.64%2011.85%2021.25%2011.24%2022%2011.24C22.75%2011.24%2023.36%2011.85%2023.36%2012.6C23.36%2013.35%2022.75%2013.96%2022%2013.96C21.25%2013.96%2020.64%2013.35%2020.64%2012.6ZM18.36%2015.33C17.61%2015.33%2017%2014.72%2017%2013.97C17%2013.22%2017.61%2012.61%2018.36%2012.61C19.11%2012.61%2019.72%2013.22%2019.72%2013.97C19.72%2014.72%2019.11%2015.33%2018.36%2015.33ZM27%2013.96C27%2014.71%2026.39%2015.32%2025.64%2015.32C24.89%2015.32%2024.28%2014.71%2024.28%2013.96C24.28%2013.21%2024.89%2012.6%2025.64%2012.6C26.39%2012.6%2027%2013.21%2027%2013.96ZM14%2014.45C14%2015%2013.55%2015.45%2013%2015.45H6.6C6.05%2015.45%205.6%2015%205.6%2014.45C5.6%2013.9%206.05%2013.45%206.6%2013.45H13C13.55%2013.45%2014%2013.9%2014%2014.45ZM14%2018.45C14%2019%2013.55%2019.45%2013%2019.45H6.6C6.05%2019.45%205.6%2019%205.6%2018.45C5.6%2017.9%206.05%2017.45%206.6%2017.45H13C13.55%2017.45%2014%2017.9%2014%2018.45Z'%20fill='%2304703E'/%3e%3c/svg%3e");
    --icon-plus-sm: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2011.1053H4V9H16V11.1053Z'%20fill='%23004E97'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.00049%2016.6316V4H11.0005V16.6316H9.00049Z'%20fill='%23004E97'/%3e%3c/svg%3e");
    --ico-arrow-right-white-small: url("data:image/svg+xml,%3csvg%20width='7'%20height='11'%20viewBox='0%200%207%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201.60156L5.477%205.80856L1%2010.0156'%20stroke='white'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-equal-gray: url("data:image/svg+xml,%3csvg%20width='11'%20height='17'%20viewBox='0%200%2011%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_199_1784)'%3e%3crect%20width='3'%20height='16'%20transform='translate(0.5%200.909912)'%20fill='%23777777'/%3e%3crect%20width='3'%20height='16'%20transform='translate(7.5%200.909912)'%20fill='%23777777'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_199_1784'%3e%3crect%20width='10'%20height='16'%20fill='white'%20transform='translate(0.5%200.909912)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    --ico-estimate: url("data:image/svg+xml,%3csvg%20width='27'%20height='35'%20viewBox='0%200%2027%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.16656%2026.5753C6.85096%2026.5753%206.54827%2026.4499%206.3251%2026.2268C6.10194%2026.0036%205.97656%2025.7009%205.97656%2025.3853C5.97656%2025.0697%206.10194%2024.767%206.3251%2024.5439C6.54827%2024.3207%206.85096%2024.1953%207.16656%2024.1953H19.0666C19.3822%2024.1953%2019.6849%2024.3207%2019.908%2024.5439C20.1312%2024.767%2020.2566%2025.0697%2020.2566%2025.3853C20.2566%2025.7009%2020.1312%2026.0036%2019.908%2026.2268C19.6849%2026.4499%2019.3822%2026.5753%2019.0666%2026.5753H7.16656Z'%20fill='white'/%3e%3cpath%20d='M7.16656%2021.2491C6.85096%2021.2491%206.54827%2021.1238%206.3251%2020.9006C6.10194%2020.6774%205.97656%2020.3748%205.97656%2020.0591C5.97656%2019.7435%206.10194%2019.4409%206.3251%2019.2177C6.54827%2018.9945%206.85096%2018.8691%207.16656%2018.8691H19.0666C19.3822%2018.8691%2019.6849%2018.9945%2019.908%2019.2177C20.1312%2019.4409%2020.2566%2019.7435%2020.2566%2020.0591C20.2566%2020.3748%2020.1312%2020.6774%2019.908%2020.9006C19.6849%2021.1238%2019.3822%2021.2491%2019.0666%2021.2491H7.16656Z'%20fill='white'/%3e%3cpath%20d='M7.16656%2015.923C6.85096%2015.923%206.54827%2015.7976%206.3251%2015.5744C6.10194%2015.3513%205.97656%2015.0486%205.97656%2014.733C5.97656%2014.4174%206.10194%2014.1147%206.3251%2013.8915C6.54827%2013.6683%206.85096%2013.543%207.16656%2013.543H19.0666C19.3822%2013.543%2019.6849%2013.6683%2019.908%2013.8915C20.1312%2014.1147%2020.2566%2014.4174%2020.2566%2014.733C20.2566%2015.0486%2020.1312%2015.3513%2019.908%2015.5744C19.6849%2015.7976%2019.3822%2015.923%2019.0666%2015.923H7.16656Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M21.9014%202.02555C21.5669%201.60741%2021.1427%201.26986%2020.6601%201.0379C20.1775%200.805946%2019.6488%200.685521%2019.1134%200.685547H3.5954C2.64858%200.685547%201.74052%201.06167%201.07101%201.73117C0.40151%202.40068%200.0253906%203.30872%200.0253906%204.25555V30.4385C0.0253906%2031.3854%200.40151%2032.2934%201.07101%2032.9629C1.74052%2033.6324%202.64858%2034.0085%203.5954%2034.0085H22.6374C23.5842%2034.0085%2024.4923%2033.6324%2025.1618%2032.9629C25.8313%2032.2934%2026.2074%2031.3854%2026.2074%2030.4385V8.66155C26.2074%207.85101%2025.9316%207.06459%2025.4254%206.43155L21.9014%202.02555ZM19.1134%203.06555C19.2918%203.0657%2019.468%203.10595%2019.6288%203.18332C19.7896%203.26069%2019.9309%203.3732%2020.0424%203.51255L23.5664%207.91755C23.7354%208.12868%2023.8275%208.3911%2023.8274%208.66155V30.4385C23.8274%2030.7542%2023.702%2031.0568%2023.4789%2031.28C23.2557%2031.5032%2022.953%2031.6285%2022.6374%2031.6285H3.5954C3.27979%2031.6285%202.97711%2031.5032%202.75394%2031.28C2.53077%2031.0568%202.4054%2030.7542%202.4054%2030.4385V4.25555C2.4054%203.93994%202.53077%203.63726%202.75394%203.41409C2.97711%203.19092%203.27979%203.06555%203.5954%203.06555H19.1134Z'%20fill='white'/%3e%3cpath%20d='M17.6816%203.24219V9.4248H24.5425'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");
    --ico-arrow-right-blue: url("data:image/svg+xml,%3csvg%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201.67871L5.857%205.92871L1%2010.1787'%20stroke='%232F59A7'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-window-blue: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20y='3'%20width='1'%20height='8'%20fill='%232F59A7'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%201H4V7H11V1ZM3%200V8H12V0H3Z'%20fill='%232F59A7'/%3e%3crect%20y='10'%20width='8'%20height='1'%20fill='%232F59A7'/%3e%3c/svg%3e");
    --ico-minus-gray: url("data:image/svg+xml,%3csvg%20width='15'%20height='4'%20viewBox='0%200%2015%204'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='15'%20height='3'%20transform='translate(0%200.609863)'%20fill='%23777777'/%3e%3c/svg%3e");
    --ico-arrow-right-orange: url("data:image/svg+xml,%3csvg%20width='9'%20height='13'%20viewBox='0%200%209%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.63867%200.984375L7.40167%206.39937L1.63867%2011.8144'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-arrow-excursion: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='12'%20viewBox='0%200%2011%2012'%20fill='none'%3e%3cpath%20d='M9.86866%2011.1562H1.19266C1.02176%2011.1565%200.854611%2011.106%200.712409%2011.0112C0.570207%2010.9164%200.459342%2010.7815%200.393897%2010.6237C0.328452%2010.4658%200.311368%2010.292%200.344794%2010.1244C0.378221%209.95678%200.460669%209.80289%200.581672%209.68219L9.45365%200.810179C9.57435%200.689176%209.72827%200.606728%209.89588%200.573302C10.0635%200.539875%2010.2372%200.55699%2010.3951%200.622435C10.553%200.68788%2010.6879%200.798714%2010.7827%200.940917C10.8775%201.08312%2010.928%201.25026%2010.9276%201.42117V10.0972C10.9276%2010.2362%2010.9003%2010.374%2010.8471%2010.5024C10.7938%2010.6309%2010.7158%2010.7477%2010.6175%2010.846C10.5192%2010.9443%2010.4024%2011.0223%2010.2739%2011.0756C10.1454%2011.1288%2010.0077%2011.1562%209.86866%2011.1562Z'%20fill='%23F59108'/%3e%3c/svg%3e");
    --ico-circle-orange: url("data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11%2020C15.9706%2020%2020%2015.9706%2020%2011C20%206.02944%2015.9706%202%2011%202C6.02944%202%202%206.02944%202%2011C2%2015.9706%206.02944%2020%2011%2020Z'%20stroke='%23FC4700'%20stroke-width='4'/%3e%3c/svg%3e");
    --ico-arrow-right-white: url("data:image/svg+xml,%3csvg%20width='10'%20height='16'%20viewBox='0%200%2010%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.763672%201.5L8.03067%208.328L0.763672%2015.157'%20stroke='white'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-arrow-bottom-orange: url("data:image/svg+xml,%3csvg%20width='42'%20height='23'%20viewBox='0%200%2042%2023'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.8811%2022.0944L1.51618%204.72944C1.17387%204.38787%200.940623%203.95241%200.845991%203.47818C0.751359%203.00395%200.799629%202.51226%200.984619%202.06546C1.16961%201.61866%201.48301%201.23683%201.88517%200.968282C2.28734%200.699738%202.76015%200.556568%203.24373%200.556932H38.7563C39.2398%200.556568%2039.7127%200.699738%2040.1148%200.968282C40.517%201.23683%2040.8304%201.61866%2041.0154%202.06546C41.2004%202.51226%2041.2486%203.0039%2041.154%203.47813C41.0593%203.95236%2040.8261%204.38787%2040.4838%204.72944L23.1234%2022.0899C22.561%2022.6522%2021.7985%2022.9686%2021.0032%2022.9694C20.2079%2022.9703%2019.4447%2022.6556%2018.8811%2022.0944Z'%20fill='%23F59108'/%3e%3c/svg%3e");
    --ico-urgent-contact: url("data:image/svg+xml,%3csvg%20width='142'%20height='142'%20viewBox='0%200%20142%20142'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_191_32)'%3e%3cpath%20d='M59.9128%2098.4273L55.6809%20101.938C55.1038%20102.419%2054.4666%20102.635%2053.625%20102.635C48.2028%20102.635%2038.9815%2094.1232%2033.884%2084.421C29.135%2075.3801%2027.2235%2064.1269%2029.5438%2058.825C30.3613%2056.9374%2031.4314%2056.6489%2031.792%2056.5527L37.118%2055.0499L19.2164%2020.978L7.25398%2030.8725C7.09769%2031.0048%206.95342%2031.1491%206.83319%2031.3053C4.597%2034.1066%203.26249%2038.3145%203.01002%2051.5153C2.86575%2059.1496%204.16418%2074.9112%2014.5156%2094.6041C24.867%20114.297%2037.106%20124.312%2043.478%20128.52C53.9857%20135.469%2058.1575%20136.863%2061.4637%20136.863C61.7522%20136.863%2062.0167%20136.863%2062.2812%20136.839C62.4856%20136.827%2062.678%20136.791%2062.8704%20136.731L77.8024%20132.499L59.9008%2098.4273H59.9128Z'%20fill='%23002D69'/%3e%3cpath%20d='M39.8352%2053.7274L49.6937%2044.7706C50.6675%2043.8809%2050.92%2042.4502%2050.3068%2041.284L44.1633%2029.5861L38.0198%2017.8881C37.5148%2016.9263%2036.5169%2016.3372%2035.471%2016.3372C35.2546%2016.3372%2035.0262%2016.3613%2034.8097%2016.4094L21.8374%2019.4511L39.8352%2053.7154V53.7274Z'%20fill='%238096B4'/%3e%3cpath%20d='M91.0151%20118.745L84.8716%20107.047L78.7281%2095.3495C78.2231%2094.3877%2077.2253%2093.7986%2076.1673%2093.7986C75.9509%2093.7986%2075.7224%2093.8226%2075.506%2093.8707L62.5337%2096.9124L80.5315%20131.177L90.39%20122.22C91.3638%20121.33%2091.6163%20119.9%2091.0031%20118.733L91.0151%20118.745Z'%20fill='%238096B4'/%3e%3cpath%20d='M45.2329%2069.0923L19.4565%2020.0282'%20stroke='white'%20stroke-width='2.83'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M80.2665%20134.904L13.6255%206.82739'%20stroke='white'%20stroke-width='2.83'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M103.976%2056.3484H98.4692V61.5662H103.976V56.3484Z'%20fill='%23002D69'%20stroke='%23002D69'%20stroke-width='1.42'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M99.4062%2050.3011C99.4062%2044.6865%2098.5767%2039.5769%2098.5767%2033.0607V31.7623H103.831V33.0246C103.831%2039.5409%20102.965%2044.6865%20102.965%2050.3011H99.4062Z'%20fill='%23002D69'%20stroke='%23002D69'%20stroke-width='1.42'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M100.886%208.42643L135.907%2069.0923H66.7416L100.874%208.42643M100.886%205.01202C100.886%205.01202%20100.874%205.01202%20100.862%205.01202C99.6353%205.01202%2098.5052%205.68528%2097.9161%206.74327L63.784%2067.4091C63.1949%2068.4671%2063.2069%2069.7535%2063.8081%2070.7995C64.4092%2071.8454%2065.5393%2072.4826%2066.7536%2072.4826H135.919C137.134%2072.4826%20138.264%2071.8334%20138.865%2070.7754C139.478%2069.7174%20139.478%2068.419%20138.865%2067.373L103.843%206.7072C103.23%205.64922%20102.112%205%20100.898%205L100.886%205.01202Z'%20fill='%23002D69'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_191_32'%3e%3crect%20width='142'%20height='142'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    --ico-external-white: url("data:image/svg+xml,%3csvg%20width='12'%20height='11'%20viewBox='0%200%2012%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.625%200.972656H11.208V7.38966H3.625V0.972656Z'%20stroke='white'%20stroke-width='1.001'/%3e%3cpath%20d='M1%203.30078V10.0158H7.947'%20stroke='white'%20stroke-width='1.001'/%3e%3c/svg%3e");
    --ico-sub-scriber: url("data:image/svg+xml,%3csvg%20width='25'%20height='23'%20viewBox='0%200%2025%2023'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cmask%20id='mask0_1_4430'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='25'%20height='23'%3e%3cpath%20d='M25%200.818359H0V22.8184H25V0.818359Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_1_4430)'%3e%3cpath%20d='M16%206.31836C16%204.38536%2014.433%202.81836%2012.5%202.81836C10.567%202.81836%209%204.38536%209%206.31836V7.31836C9%209.25136%2010.567%2010.8184%2012.5%2010.8184C14.433%2010.8184%2016%209.25136%2016%207.31836V6.31836Z'%20stroke='white'%20stroke-width='2'/%3e%3cpath%20d='M14%2013.8184H11C6.02944%2013.8184%202%2017.8478%202%2022.8184C2%2027.7889%206.02944%2031.8184%2011%2031.8184H14C18.9706%2031.8184%2023%2027.7889%2023%2022.8184C23%2017.8478%2018.9706%2013.8184%2014%2013.8184Z'%20stroke='white'%20stroke-width='2'/%3e%3c/g%3e%3c/svg%3e");
    --ico-open-blue: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%205.95312H11.489'%20stroke='%232F59A7'%20stroke-width='2'/%3e%3cpath%20d='M5.74414%200.71875L5.74414%2011.1883'%20stroke='%232F59A7'%20stroke-width='2'/%3e%3c/svg%3e");
    --ico-earthquake-insurance-01: url("data:image/svg+xml,%3csvg%20width='50'%20height='50'%20viewBox='0%200%2050%2050'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M24.999%2050C38.8061%2050%2049.999%2038.8071%2049.999%2025C49.999%2011.1929%2038.8061%200%2024.999%200C11.1919%200%20-0.000976562%2011.1929%20-0.000976562%2025C-0.000976562%2038.8071%2011.1919%2050%2024.999%2050Z'%20fill='white'/%3e%3cpath%20d='M9.44299%2037.665H40.555'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M30.465%2031.7651V33.9921'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M35.541%209.90479L39.977%2011.1788L39.086%2014.5568L42.212%2015.7038L41.079%2019.0608L44.623%2021.3128'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M7.24502%2022.3838L5.15602%2025.4028L7.96202%2026.9618L5.12402%2029.9738L7.57802%2031.7838L5.99402%2034.6838'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M37.19%2037.5638V17.9908L24.999%2011.0718L12.808%2017.9908V37.5638'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M32.105%2037.3979V27.856H25.855V37.3979'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M13.2579%2023.85L20.7469%2022.641L23.6409%2019.584'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3cpath%20d='M20.048%2022.7368L25.033%2024.5918'%20stroke='%23FC4700'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-arrow-top-orange: url("data:image/svg+xml,%3csvg%20width='15'%20height='11'%20viewBox='0%200%2015%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.16797%209.27344L7.45297%202.26044L13.739%209.27344'%20stroke='%23FC4700'%20stroke-width='3'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-cross-gray: url("data:image/svg+xml,%3csvg%20width='15'%20height='14'%20viewBox='0%200%2015%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.387%201L14%2013.009'%20stroke='%23777777'%20stroke-width='2'/%3e%3cpath%20d='M14%201L1.387%2013.009'%20stroke='%23777777'%20stroke-width='2'/%3e%3c/svg%3e");
    --ico-arrow-bottom-gray: url("data:image/svg+xml,%3csvg%20width='80'%20height='44'%20viewBox='0%200%2080%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='20'%20width='40'%20height='24'%20fill='%23D9D9D9'/%3e%3cpath%20d='M40%2044L80%2024H0L40%2044Z'%20fill='%23D9D9D9'/%3e%3c/svg%3e");
    --ico-check: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13.646'%20height='11.559'%20viewBox='0%200%2013.646%2011.559'%3e%3cpath%20d='M36.075,3112.046l4.291,4.969,7.831-9.374'%20transform='translate(-35.318%20-3107)'%20fill='none'%20stroke='%23fc4700'%20stroke-width='2'/%3e%3c/svg%3e");
    --ico-24h365day: url(/ico_24h365day.svg);
    --ico-apply: url("data:image/svg+xml,%3csvg%20width='27'%20height='34'%20viewBox='0%200%2027%2034'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.1403%2016.8672C18.2508%2016.7567%2018.3385%2016.6255%2018.3983%2016.4811C18.4581%2016.3367%2018.4889%2016.182%2018.4889%2016.0257C18.4889%2015.8694%2018.4581%2015.7147%2018.3983%2015.5703C18.3385%2015.4259%2018.2508%2015.2947%2018.1403%2015.1842L14.5703%2011.6142C14.4598%2011.5037%2014.3286%2011.416%2014.1842%2011.3562C14.0398%2011.2964%2013.8851%2011.2656%2013.7288%2011.2656C13.5725%2011.2656%2013.4178%2011.2964%2013.2734%2011.3562C13.129%2011.416%2012.9978%2011.5037%2012.8873%2011.6142L9.31732%2015.1842C9.09414%2015.4074%208.96875%2015.7101%208.96875%2016.0257C8.96875%2016.3413%209.09414%2016.644%209.31732%2016.8672C9.5405%2017.0904%209.84319%2017.2158%2010.1588%2017.2158C10.4744%2017.2158%2010.7772%2017.0904%2011.0003%2016.8672L12.5393%2015.3282V20.7852C12.5393%2021.1008%2012.6647%2021.4035%2012.8879%2021.6267C13.111%2021.8498%2013.4137%2021.9752%2013.7293%2021.9752C14.0449%2021.9752%2014.3476%2021.8498%2014.5708%2021.6267C14.7939%2021.4035%2014.9193%2021.1008%2014.9193%2020.7852V15.3282L16.4583%2016.8672C16.6814%2017.0901%2016.9839%2017.2153%2017.2993%2017.2153C17.6147%2017.2153%2017.9172%2017.0901%2018.1403%2016.8672Z'%20fill='white'/%3e%3cpath%20d='M7.77789%2025.546C7.46229%2025.546%207.1596%2025.4206%206.93643%2025.1975C6.71326%2024.9743%206.58789%2024.6716%206.58789%2024.356C6.58789%2024.0404%206.71326%2023.7377%206.93643%2023.5146C7.1596%2023.2914%207.46229%2023.166%207.77789%2023.166H19.6779C19.9935%2023.166%2020.2962%2023.2914%2020.5193%2023.5146C20.7425%2023.7377%2020.8679%2024.0404%2020.8679%2024.356C20.8679%2024.6716%2020.7425%2024.9743%2020.5193%2025.1975C20.2962%2025.4206%2019.9935%2025.546%2019.6779%2025.546H7.77789Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M22.5127%201.76773C22.1782%201.34959%2021.754%201.01205%2021.2713%200.78009C20.7887%200.548134%2020.2601%200.427709%2019.7247%200.427734H4.20868C3.26186%200.427734%202.3538%200.803857%201.6843%201.47336C1.01479%202.14287%200.638672%203.05091%200.638672%203.99773V30.1777C0.638672%2031.1246%201.01479%2032.0326%201.6843%2032.7021C2.3538%2033.3716%203.26186%2033.7477%204.20868%2033.7477H23.2487C24.1955%2033.7477%2025.1035%2033.3716%2025.773%2032.7021C26.4425%2032.0326%2026.8187%2031.1246%2026.8187%2030.1777V8.40273C26.8186%207.59219%2026.5429%206.80578%2026.0367%206.17273L22.5127%201.76773ZM19.7257%202.80774C19.9041%202.80789%2020.0802%202.84814%2020.241%202.92551C20.4018%203.00288%2020.5432%203.11539%2020.6547%203.25473L24.1787%207.65474C24.3477%207.86587%2024.4397%208.12828%2024.4397%208.39874V30.1777C24.4397%2030.4933%2024.3143%2030.796%2024.0911%2031.0192C23.868%2031.2424%2023.5653%2031.3677%2023.2497%2031.3677H4.20967C3.89406%2031.3677%203.59138%2031.2424%203.36821%2031.0192C3.14504%2030.796%203.01967%2030.4933%203.01967%2030.1777V3.99773C3.01967%203.68213%203.14504%203.37945%203.36821%203.15628C3.59138%202.93311%203.89406%202.80774%204.20967%202.80774H19.7257Z'%20fill='white'/%3e%3cpath%20d='M18.2949%202.98438V9.16699H25.1558'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");
    --ico-arrow-bottom-blue: url("data:image/svg+xml,%3csvg%20width='13'%20height='9'%20viewBox='0%200%2013%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11.8301%201.68945L6.41508%206.94108L1.00008%201.68945'%20stroke='%232F59A7'%20stroke-width='2'%20stroke-miterlimit='10'/%3e%3c/svg%3e");
    --ico-plus-separator: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M24%2010H0V14H24V10Z'%20fill='%23777777'/%3e%3cpath%20d='M14%2024L14%200L10%200L10%2024H14Z'%20fill='%23777777'/%3e%3c/svg%3e");
    --ico-pdf: url("data:image/svg+xml,%3csvg%20width='17'%20height='23'%20viewBox='0%200%2017%2023'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%202H11C12.3261%202%2013.5979%202.52678%2014.5355%203.46447C15.4732%204.40215%2016%205.67392%2016%207V22H1V2Z'%20fill='white'/%3e%3cpath%20d='M16.2161%205.07403L12.5841%201.44203C12.195%201.05216%2011.667%200.832757%2011.1161%200.832031H2.28113C1.72988%200.833881%201.2018%201.05396%200.812388%201.44412C0.422973%201.83428%200.203915%202.36279%200.203125%202.91403L0.203125%2020.923C0.203125%2021.4742%200.422056%2022.0027%200.811757%2022.3924C1.20146%2022.7821%201.73001%2023.001%202.28113%2023.001H14.7481C15.021%2023.001%2015.2912%2022.9473%2015.5433%2022.8429C15.7955%2022.7384%2016.0245%2022.5854%2016.2175%2022.3924C16.4105%2022.1994%2016.5635%2021.9704%2016.6679%2021.7182C16.7724%2021.4661%2016.8261%2021.1959%2016.8261%2020.923V6.54603C16.8254%205.99402%2016.606%205.46477%2016.2161%205.07403ZM14.5801%206.37403H11.2851V3.08303L14.5801%206.37403ZM2.28113%2020.923V2.91403H9.20312V7.41403C9.20273%207.55059%209.22933%207.68587%209.28141%207.81211C9.33348%207.93834%209.41%208.05304%209.50656%208.1496C9.60312%208.24616%209.71781%208.32267%209.84405%208.37475C9.97028%208.42682%2010.1056%208.45343%2010.2421%208.45303H14.7421V20.923H2.28113ZM13.1121%2014.702C12.5841%2014.183%2011.0771%2014.325%2010.3241%2014.421C9.57545%2013.9613%209.01173%2013.2536%208.73112%2012.421C8.99192%2011.6395%209.07193%2010.809%208.96513%209.99203C8.93858%209.78193%208.84365%209.58639%208.69498%209.43557C8.54632%209.28475%208.35217%209.18703%208.14247%209.15746C7.93277%209.12789%207.71917%209.16813%207.53459%209.27196C7.35002%209.37579%207.20473%209.53746%207.12113%209.73203C6.99054%2010.7088%207.09335%2011.7027%207.42112%2012.632C6.96685%2013.7342%206.45617%2014.8123%205.89113%2015.862C5.02513%2016.308%203.85613%2016.996%203.68313%2017.862C3.54012%2018.546%204.80912%2020.252%206.97713%2016.511C7.94197%2016.1504%208.93153%2015.8596%209.93812%2015.641C10.6791%2016.0621%2011.5043%2016.3135%2012.3541%2016.377C12.5498%2016.381%2012.7424%2016.3275%2012.908%2016.223C13.0736%2016.1186%2013.2048%2015.9679%2013.2856%2015.7895C13.3663%2015.6112%2013.3928%2015.4131%2013.362%2015.2198C13.3312%2015.0264%2013.2443%2014.8464%2013.1121%2014.702ZM4.53613%2018.07C4.87207%2017.4842%205.31909%2016.9696%205.85213%2016.555C5.03013%2017.866%204.53613%2018.1%204.53613%2018.07ZM8.06913%209.81903C8.38912%209.81903%208.35913%2011.209%208.14712%2011.585C7.976%2011.0118%207.9492%2010.4051%208.06913%209.81903ZM7.01213%2015.732C7.42837%2014.9711%207.78575%2014.1795%208.08112%2013.364C8.40018%2013.963%208.84339%2014.487%209.38113%2014.901C8.56913%2015.1097%207.77655%2015.3877%207.01213%2015.732ZM12.7121%2015.516C12.7121%2015.516%2012.4961%2015.776%2011.0971%2015.178C12.6141%2015.066%2012.8651%2015.412%2012.7091%2015.516H12.7121Z'%20fill='%23EA1515'/%3e%3c/svg%3e");
    --icon-plus-md: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18%2011H2V9H18V11Z'%20fill='%23004E97'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%2018V2H11L11%2018H9Z'%20fill='%23004E97'/%3e%3c/svg%3e");
    --icon-arrow-right-md: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.5859%2010L6.29297%203.70712L7.70718%202.29291L15.4143%2010L7.70718%2017.7071L6.29297%2016.2929L12.5859%2010Z'%20fill='%23004E97'/%3e%3c/svg%3e");
    --icon-arrow-right-sm: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.5859%2010L7.29297%205.70712L8.70718%204.29291L14.4143%2010L8.70718%2015.7071L7.29297%2014.2929L11.5859%2010Z'%20fill='%23004E97'/%3e%3c/svg%3e");
    --icon-minus-md: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18%2011H2V9H18V11Z'%20fill='%23004E97'/%3e%3c/svg%3e");
  }
}

@layer recipes {
  .post-date {
    display: flex;
    flex-direction: column;
    margin-block: var(--spacing-5);
    font-size: var(--font-size-14);
    text-align: right;
  }
}

@layer recipes {
  .icon-card-link-list {
    --ui-highlight-card-margin-top: var(--spacing-5);

    margin-top: var(--ui-highlight-card-margin-top);

    @media screen and (min-width: 40.01em) {
      --ui-highlight-card-margin-top: var(--spacing-6);
    }

    & ul {
      --ui-highlight-card-list-gap: var(--spacing-2);
      --ui-highlight-card-list-width: 241.5px;

      display: grid;
      gap: var(--ui-highlight-card-list-gap);

      @media screen and (min-width: 40.01em) {
        grid-template-columns: repeat(auto-fit, var(--ui-highlight-card-list-width));
        justify-content: center;
        display: grid;
        grid-template-rows: auto;
      }
    }

    & li {
      display: grid;

      @media screen and (min-width: 40.01em) {
        grid-template-rows: subgrid;
        grid-row: span 3;
      }
    }

    & a {
      --ui-highlight-card-item-link-radius: var(--radius-md);
      --ui-highlight-card-item-link-padding-block: var(--spacing-3);
      --ui-highlight-card-item-link-padding-inline: var(--spacing-4-px);
      --ui-highlight-card-item-link-font-size: var(--font-size-16);
      --ui-highlight-card-item-link-font-color: var(--semantic-text-primary);
      --ui-highlight-card-item-link-line-height: var(--line-height-md);
      --ui-highlight-card-item-link-icon-row-gap: var(--spacing-2);
      --ui-highlight-card-item-link-icon-column-gap: var(--spacing-4);

      border-radius: var(--ui-highlight-card-item-link-radius);
      background-color: var(--semantic-background-body);
      padding: var(--ui-highlight-card-item-link-padding-block)
        var(--ui-highlight-card-item-link-padding-inline);
      font-size: var(--ui-highlight-card-item-link-font-size);
      color: var(--ui-highlight-card-item-link-font-color);
      line-height: var(--ui-highlight-card-item-link-line-height);
      display: inherit;
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "icon label arrow";
      gap: var(--ui-highlight-card-item-link-icon-row-gap)
        var(--ui-highlight-card-item-link-icon-column-gap);
      align-items: center;
      text-decoration: none;

      /* 暫定対応 */
      @media (any-hover: hover) {
        &:hover {
          outline: var(--border-width-level-2) solid var(--semantic-fill-brand-primary);
          background-color: var(--semantic-fill-brand-primary-light);
        }
      }

      @media screen and (min-width: 40.01em) {
        --ui-highlight-card-item-link-padding-inline: var(--spacing-3-px);

        align-items: unset;
        text-align: center;
        grid-template-rows: inherit;
        grid-row: inherit;
        grid-template-columns: 1fr;
        grid-template-areas:
          "icon"
          "label"
          "arrow";
      }

      &::before {
        --ui-highlight-card-item-link-before-icon-size: 32px;
        --ui-highlight-card-item-link-before-icon-color: var(--semantic-fill-brand-primary);

        content: "";
        display: block;
        width: var(--ui-highlight-card-item-link-before-icon-size);
        height: var(--ui-highlight-card-item-link-before-icon-size);
        background-color: var(--ui-highlight-card-item-link-before-icon-color);
        mask-image: var(--ui-highlight-card-icon);
        mask-repeat: no-repeat;
        mask-position: 0 0;
        mask-size: auto 100%;
        justify-self: center;
        grid-area: icon;

        @media screen and (min-width: 40.01em) {
          --ui-highlight-card-item-link-before-icon-size: 40px;
        }
      }

      &::after {
        --ui-highlight-card-item-link-after-icon-size: 20px;
        --ui-highlight-card-item-link-after-icon-color: var(--semantic-fill-tertiary);

        content: "";
        display: block;
        width: var(--ui-highlight-card-item-link-after-icon-size);
        height: var(--ui-highlight-card-item-link-after-icon-size);
        background-color: var(--ui-highlight-card-item-link-after-icon-color);
        mask-image: var(--ico-arrow-down-gray);
        mask-repeat: no-repeat;
        mask-position: 0 0;
        mask-size: auto 100%;
        justify-self: center;
        grid-area: arrow;
      }
    }
  }
}

@layer recipes {
  .tabbed-split-view {
    --ui-tabbed-split-view-border-radius: var(--radius-md);
    --ui-tabbed-split-view-panel-padding: var(--spacing-4);

    width: 100%;
    border-radius: var(--ui-tabbed-split-view-border-radius);

    @media (40.1rem < width) {
      --ui-tabbed-split-view-border-radius: var(--radius-md);
      --ui-tabbed-split-view-panel-padding: var(--spacing-6);
    }

    > ul {
      --ui-tabbed-split-view-ul-column-gap: var(--spacing-2-px);

      display: grid;
      grid-template-columns: repeat(var(--ui-tabbed-split-view-tab-length, 1), 1fr);
      width: 100%;
      background: var(--semantic-fill-neutral-lightest);
      column-gap: var(--ui-tabbed-split-view-ul-column-gap);

      @media (40.1rem < width) {
        --ui-tabbed-split-view-ul-column-gap: var(--spacing-5-px);
      }

      button {
        --ui-tabbed-split-view-tab-background: var(--neutral-gray-50);
        --ui-tabbed-split-view-tab-color: var(--semantic-text-tertiary);
        --ui-tabbed-split-view-tab-font-size: var(--font-size-14);
        --ui-tabbed-split-view-tab-padding-block: var(--spacing-4);
        --ui-tabbed-split-view-tab-line-height: var(--line-height-sm);

        width: 100%;
        height: 100%;
        text-align: center;
        padding-block: var(--ui-tabbed-split-view-tab-padding-block);
        font-weight: var(--font-weight-bold);
        font-size: var(--ui-tabbed-split-view-tab-font-size);
        color: var(--ui-tabbed-split-view-tab-color);
        background: var(--ui-tabbed-split-view-tab-background);
        border-radius: var(--ui-tabbed-split-view-border-radius)
          var(--ui-tabbed-split-view-border-radius) 0 0;
        border-bottom: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
        line-height: var(--ui-tabbed-split-view-tab-line-height);

        @media (40.1rem < width) {
          --ui-tabbed-split-view-tab-font-size: var(--font-size-20);
          --ui-tabbed-split-view-tab-padding-block: var(--spacing-5);
        }

        &:last-child {
          border-right: none;
        }

        &[data-current="true"] {
          --ui-tabbed-split-view-tab-background: var(--semantic-background-body);
          --ui-tabbed-split-view-tab-color: var(--semantic-stroke-brand-primary);

          border: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
          border-bottom: 0;
          z-index: 1;
        }
      }
    }

    > .tabbed-split-view-panels {
      margin-top: -2px;
      border: var(--border-width-level-2) solid var(--semantic-stroke-brand-primary);
      width: 100%;
      padding: var(--ui-tabbed-split-view-panel-padding);
      border-radius: 0 0 var(--ui-tabbed-split-view-border-radius)
        var(--ui-tabbed-split-view-border-radius);

      > div {
        width: 100%;
        background: transparent;
      }
    }
  }
}