:root {
  --s-font-e0bc67d5: 'Noto Sans JP';
  --s-font-2aae357d: 'Noto Sans';
}

html {
  height: 100%;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.kaigai {
  display: block;
  /* studio-preview はモバイルのアドレスバー表示中も安定する dvh を採用（RenderCanvas.vue, 2024-11 の意図的変更）。
  100vh は dvh 非対応ブラウザ向けフォールバックとして先に宣言する。 */
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  font-family: sans-serif;
  line-height: 1;
  transition: background 0.5s cubic-bezier(0.4, 0.4, 0, 1);
  padding: 0;
  margin: 0;
}

.kaigai a {
  background: transparent;
  color: rgb(51, 51, 51);
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: none;
  text-decoration: none;
}

.kaigai button {
  background: transparent;
  color: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: none;
  pointer-events: all;
  cursor: pointer;
  user-select: none;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

.kaigai h1,
.kaigai h2,
.kaigai h3,
.kaigai h4,
.kaigai h5,
.kaigai h6 {
  color: rgb(51, 51, 51);
  line-height: 1;
}

/* --- Common Base Styles --- */
.img,
.box,
.text,
.frame,
.section,
.section-inner,
.input,
.toggle,
.icon,
.video,
.video-container {
  border: 0;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 0;
  position: relative;
  margin: 0;
  padding: 0;
  flex: none;
}

.img {
  height: auto;
}

.img,
.box,
.text,
.frame,
.section,
.section-inner,
.toggle,
.icon,
.video-container {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: center;
}

.input,
.select {
  /* TypeSquareの ts-unused インライン上書きからフォーム要素を保護するため !important で防衛。
  詳細度は同じなのでノード固有の .sd-N 側も !important 付与が必要（$StyleBundle.formFontImportant）。
  a11y トレードオフ: ブラウザ設定 UI の「標準フォント」指定（author normal 相当）は本ルールで上書きされる。
  一方、User Style Sheet + !important（OpenDyslexic 等の a11y 拡張）は CSS カスケードの origin 順位
  （user !important > author !important）により依然として勝つ。TypeSquare 干渉対策として意図的に受容する。 */
  font-family: inherit !important;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.input,
.richText * {
  transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1);
  transition-property: all, --g-angle, --g-color-0, --g-position-0, --g-color-1, --g-position-1, --g-color-2, --g-position-2, --g-color-3, --g-position-3, --g-color-4, --g-position-4, --g-color-5, --g-position-5, --g-color-6, --g-position-6, --g-color-7, --g-position-7, --g-color-8, --g-position-8, --g-color-9, --g-position-9, --g-color-10, --g-position-10, --g-color-11, --g-position-11;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  align-content: normal;
  z-index: 0;
}

/* Restore text decoration for semantic HTML elements */
.richText s,
.richText del,
.richText u {
  text-decoration: revert;
}

/* sd-base equivalent: column segment containers (see JSDoc).
flex-direction:column / align-items:center は preview .sd.section !important の対応物（published-data の
SHARED_LAYOUT_KEYS が justifyContent 以外を section outer に非複製の前提。既定値変更時は要再検討, #3046/#3047） */
.box,
.frame,
.section,
.toggle,
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img,
.text,
.icon {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 0;
}

.box::-webkit-scrollbar {
  display: none;
}

/* --- Table --- */
/* テーブルブロック（canonical children、ADR-047）の構造タグは normalizeBox fallback で
class="box" として出力され、display はデータに持たない（tagName から導出できる derived data）。
タグセレクタで .box { display: flex } を上書きしてネイティブの table レイアウトを保証する
（studio-preview RenderCanvas.vue / editor studio-dom.css と同パターン）。
:where(tag) で詳細度を .box と同じ (0,1,0) に保つ: base CSS はノード CSS より先に出力される
ため、上の .box { display: flex } には source order で勝ち、ノード固有の
.sd-N { display: none }（breakpoint hide 等の非表示設定）には負ける正しい cascade になる。
richText 内の table には .box が付かないため影響しない。 */
:where(table).box {
  display: table;
  /* .box の max-width: 100% を解除し、min-width: max-content（editor studio-dom.css と同じ既定値）
  で広がったテーブルがコンテナ幅で頭打ちにならないようにする（preview #2535 の table.sd と同値）。
  table-layout は base CSS では指定しない（columnWidths 明示時のみ front の normalizer が
  ノード style に table-layout: fixed を出し分け、未指定時はブラウザ既定の auto）。
  flex 系 / align-content は display: table では効かないが、.box が設定する値を
  preview（table.sd の unset 群）に合わせて明示的に解除する。 */
  max-width: none;
  min-width: max-content;
  flex-direction: unset;
  align-items: unset;
  align-content: unset;
}

/* border-collapse / border-spacing の既定値。canonical children は collapse をデータに持たず
base CSS が供給する契約（studio-front createDefaultTable.ts「border-collapse は保存しない。
既定の collapse は base CSS が供給」/ table-v2 D16・D27、preview RenderCanvas.vue の
table { border-collapse: collapse; border-spacing: 0 } と同値）。これが無いと publish だけ
browser 既定の separate / border-spacing: 2px になり、罫線付き table で editor / preview と
罫線がずれる（gaps / doubled borders）。
セル間隔設定時は front の normalizer が border-spacing をノード style に保存して separate へ
派生させるため、ノード固有スタイル（.sd-N、詳細度 0,1,0）が常に勝つよう :where() で詳細度を
0 にする（display と異なり .box 側に競合宣言がないため 0,0,0 で足りる）。
既存の richText 配下 table { border-collapse: collapse } は .richText スコープで .box には
効かないため、table block 用に別途供給する。 */
:where(table.box) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(thead).box {
  display: table-header-group;
}

:where(tbody).box {
  display: table-row-group;
}

:where(tr).box {
  display: table-row;
}

:where(th).box,
:where(td).box {
  display: table-cell;
}

/* th/td のリセット。ユーザーのセルスタイル（.sd-N、詳細度 0,1,0）が常に勝つよう、
:where() で詳細度を 0 にする（display と異なり .box 側に競合する宣言がないため 0,0,0 で足りる）。
height: inherit は td/th の computed height（既定 auto）を tr の行高に継承させ、セル内の子の
height:100% がパーセント解決の基準を得て親いっぱいに広がるようにするための意図的な補正 */
:where(th.box, td.box) {
  text-align: left;
  vertical-align: middle;
  height: inherit;
}

:where(colgroup).box {
  display: table-column-group;
}

:where(col).box {
  display: table-column;
}

/* --- Table sticky headers（table-v2 D43 / ADR-049） --- */
/* 見出し行/列の sticky 固定。ON/OFF は front の normalizer が table root style に保存する
CSS custom property（--studio-table-sticky-*-position、値 sticky / static）が担い、
ブレークポイント別の値も既存の <style media> 生成でノード CSS として出力される
（publish 側に専用のデータ処理は無く、base CSS の var 参照だけで機能する）。
editor studio-dom.css / preview RenderCanvas.vue の sticky ルールの publish ミラー。
ここは :where() にしない: Common Base Styles が .box（0,1,0）に position: relative;
z-index: 0 を当てているため、0 詳細度では負けて sticky が機能しない。逆に position が
フォールバック static へ確実に落ちないと、base のみ保存の left offset が relative の
オフセットとして効き、sticky OFF のブレークポイントで行見出しがずれる（left ルールと
position ルールは同じセレクタ集合を対象にセットで供給する契約）。position / top /
z-index / left は table 構造ノードのノード style に乗らない（front の write guard +
canonical 再生成で遮断）ため、.sd-N（0,1,0）より高い詳細度でも実害はない。
sticky 未設定のテーブルの thead / 行見出し th は .box 既定の relative + z-index: 0 から
static（stacking context なし）へ変わる。これは editor / preview と同時に揃える
意図的な挙動変更（D43）。 */
table.box>thead.box {
  position: var(--studio-table-sticky-column-header-position, static);
  top: 0;
  z-index: 2;
}

table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"] {
  position: var(--studio-table-sticky-row-header-position, static);
  z-index: 1;
}

/* 行列見出しが交差する角セル（thead 内の行見出しセル）は縦横両スクロールで固定されるため最前面。直前のルールと同一詳細度のため後勝ちで z-index 1 を上書きする */
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"] {
  z-index: 3;
}

/* CSS custom property は継承するため、リセットしないと外側 table の sticky 設定・left offsetが入れ子 table の thead / th に届いてしまう。publish の node style は inline 属性ではなく生成 CSS（.sd-N、0,1,0）のため、:where() で 0 詳細度にしないと内側 table 自身の var 指定が
このリセットに負けて独立設定が壊れる（editor の table.sd table.sd とは詳細度要件が異なる、D43 の surface 別要件）。0 詳細度でも直接マッチする宣言は継承値に勝つため遮断は成立する。 */
:where(table.box table.box) {
  --studio-table-sticky-column-header-position: initial;
  --studio-table-sticky-row-header-position: initial;
  --studio-table-sticky-row-header-left-0: initial;
  --studio-table-sticky-row-header-left-1: initial;
  --studio-table-sticky-row-header-left-2: initial;
  --studio-table-sticky-row-header-left-3: initial;
  --studio-table-sticky-row-header-left-4: initial;
}

/* 行見出しの累積 left offset。front の normalizer が sticky ON 時に実測 px 幅を base のみに保存する（列幅はブレークポイント別に持てないため offset も全ブレークポイント共通）。
sticky OFF のブレークポイントでは上の position var が static に落ち left は不活性になる */
table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"][data-studio-table-col-index="0"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"][data-studio-table-col-index="0"] {
  left: var(--studio-table-sticky-row-header-left-0, 0px);
}

table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"][data-studio-table-col-index="1"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"][data-studio-table-col-index="1"] {
  left: var(--studio-table-sticky-row-header-left-1, 0px);
}

table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"][data-studio-table-col-index="2"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"][data-studio-table-col-index="2"] {
  left: var(--studio-table-sticky-row-header-left-2, 0px);
}

table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"][data-studio-table-col-index="3"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"][data-studio-table-col-index="3"] {
  left: var(--studio-table-sticky-row-header-left-3, 0px);
}

table.box>tbody.box>tr.box>th.box[scope="row"][data-studio-table-row-header-cell="true"][data-studio-table-col-index="4"],
table.box>thead.box>tr.box>th.box[data-studio-table-row-header-cell="true"][data-studio-table-col-index="4"] {
  left: var(--studio-table-sticky-row-header-left-4, 0px);
}

/* --- Rich Text --- */
.richText {
  display: block;
  /* Workaround: レスポンシブCSSで display:flex に切り替わった際にflex-direction がデフォルト row になるのを防止する。display:block 時は無視され、display:flex 時のみ有効。HRC ではノードCSS生成時に flex-direction を補完するとユーザー設定の flex-direction を上書きするリスクがあるため、低優先度のデフォルト値としてここで設定する。 */
  flex-direction: column;
  flex: none;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  line-height: 1;

  * {
    border: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    word-spacing: 1px;

    backface-visibility: visible;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
  }

  h1 {
    font-size: 3em;
    font-weight: 700;
    margin: 20px 0;
  }

  h2,
  h3 {
    font-weight: 700;
    margin: 10px 0;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1em;
  }

  h4,
  h5,
  h6 {
    display: block;
    font-size: 1em;
    margin: 10px 0;
  }

  h4,
  h5 {
    font-weight: 600;
  }

  h6 {
    font-weight: 500;
  }

  p {
    margin: 10px 0;
  }

  >p {
    min-height: 1em;
  }

  hr {
    border-top: 1px solid #ccc;
    margin: 10px 0;
  }

  em {
    font-style: italic;
  }

  >blockquote {
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    font-style: italic;
    margin: 10px 0;
    padding: 10px 15px;
  }

  strong {
    color: inherit;
    display: inline;
    font-family: inherit;
    font-weight: 900;
  }

  /* Table of Contents */
  >[data-type="table_of_contents"] {
    line-height: 1;
    list-style: none;
    padding: 24px 24px 8px;
    margin: 0;
    border-radius: 2px;
    font-size: 16px;
    background-color: #f5f5f5;
    text-decoration: underline;
    color: #616161;

    .toc_list {
      margin: 0;
      padding: 0;
    }

    .toc_item {
      font-size: inherit;
      font-weight: inherit;
      color: currentColor;
      list-style: none;
      margin: 0 0 16px 0;

      /* Default padding */
      padding-left: 2rem;

      &.toc_item--1 {
        margin: 0 0 16px 0;
        /* Level 1 items might not need extra padding beyond the default */
        padding-left: 0;
        /* Reset or adjust as needed */
      }

      &.toc_item--2 {
        margin: 0 0 16px 0;
        padding-left: 2rem;
        /* Already default, explicit for clarity */
      }

      &.toc_item--3 {
        margin: 0 0 16px 0;
        padding-left: 4rem;
      }

      >a {
        font-size: inherit;
        font-weight: inherit;
        color: currentColor;
        border: none;
        text-decoration: none;
      }
    }
  }

  >[data-type="table"] {
    overflow-x: auto;

    p {
      white-space: pre-line;
      word-break: break-all;
    }
  }

  table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: unset;
    margin: 10px 0 10px 0;
    font-size: 14px;
    border: 1px solid #f2f2f2;
    color: #1a1a1a;
    line-height: 1.4;
  }

  th {
    background: rgba(245, 245, 245, 0.5);
  }

  th,
  td {
    min-width: 100px;
    max-width: 240px;
    border: 1px solid #f2f2f2;
    padding: 12px;

    p {
      margin: 0;
    }
  }

  p>code {
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    display: inline;
    margin: 2px;
    padding: 0 5px;
  }

  ol {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;

    li {
      list-style: decimal;
      margin: 10px 0;
    }
  }

  ul {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;

    li {
      list-style: disc;
      margin: 10px 0;
    }
  }

  li>p {
    margin: 0;
  }

  pre {
    margin: 20px 0 20px 0;
    padding: 25px 35px 25px 35px;
    background: #eeeeee;
    border-radius: 6px;
    white-space: pre-wrap;
    font-family: Menlo, Monaco, "Courier New", monospace;

    code {
      padding: 0;
      border: none;
    }
  }

  /* Images & Videos */
  img,
  video {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
  }

  /* Links */
  a {
    color: #007cff;
    display: inline;
    text-decoration: underline;
  }

  /* Embedded Code */
  [data-type="embed_code"] {
    position: relative;
    margin: 20px 0;

    .height-adjuster {
      position: relative;

      .wrapper {
        position: relative;
      }

      .wrapper[style*='padding-top'] {
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

/* --- Section --- */
.section {
  width: 100%;
}

/* section-inner のスタイル
position: static は studio-preview との表示互換性のために維持している。元々は考慮漏れで設定されたものだが、既に使用されているため互換性維持のために必要。.box クラスも同時に付与されるため、display: flex 等の基本レイアウトは継承される。
 */
.section-inner {
  position: static;
}

/* --- Dialog --- */
dialog {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  /* UA stylesheet の overflow: auto を打ち消し、モーダル内コンテンツがはみ出した際の水平パンを防ぐ (#2438) */
  /* コンテンツが dialog 表示領域を超える場合は overflow: auto に戻さず、子要素側で内部スクロール領域を確保する (studio-preview 互換) */
  overflow: visible;

  &[open] {
    display: flex;
  }

  &::backdrop {
    background: transparent;
  }
}

.modal-container {
  /* width/height:100% に padding を含め、dialog（viewport）幅・高さを超えないようにする。content-box だと padding が 100% の外側に加算され、右・下にはみ出す (#2920, studio-preview 互換) */
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* backdropクリックをdialogに透過 */
  z-index: 1;
}

.modal-container>* {
  pointer-events: auto;
  /* コンテンツ内のクリックを有効化 */
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* --- Modal Transition --- */
/* モーダルトランジション中の子要素transition無効化（ちらつき防止） */
/* modal-readyが付くまで子要素のtransitionを無効化し、 */
/* appearアニメーションとの競合を防ぐ */
/* NOTE: modal-closing時も:not(.modal-ready)に該当するため、閉じるアニメーション中も適用される */
dialog[open][data-modal-transition-base]:not(.modal-ready) .modal-container * {
  transition: none !important;
}

/* 開いた直後の初期状態: modal-containerとmodal-backdropをopacity 0に */
/* dialog自体は常にopacity 1（二重掛け防止） */
dialog[open][data-modal-transition-base]>.modal-container {
  opacity: 0;
  /* transformはdata-modal-transition-baseのJSON値を使用するためJSで設定 */
}

dialog[open][data-modal-transition-base]>.modal-backdrop {
  opacity: 0;
}

/* 準備完了: トランジションでopacity 1, transform noneへ */
dialog[open][data-modal-transition-base].modal-ready>.modal-container {
  opacity: 1;
  transform: none;
  transition: opacity 400ms cubic-bezier(.4, .4, 0, 1), transform 400ms cubic-bezier(.4, .4, 0, 1);
}

dialog[open][data-modal-transition-base].modal-ready>.modal-backdrop {
  opacity: 1;
  transition: opacity 400ms cubic-bezier(.4, .4, 0, 1);
}

/* 閉じるアニメーション */
dialog[data-modal-transition-base].modal-closing>.modal-container {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4, .4, 0, 1), transform 400ms cubic-bezier(.4, .4, 0, 1);
}

dialog[data-modal-transition-base].modal-closing>.modal-backdrop {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.4, .4, 0, 1);
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {

  dialog[open][data-modal-transition-base]>.modal-container,
  dialog[open][data-modal-transition-base].modal-ready>.modal-container,
  dialog[data-modal-transition-base].modal-closing>.modal-container {
    transition: none;
    opacity: 1;
    transform: none !important;
  }

  dialog[open][data-modal-transition-base]>.modal-backdrop,
  dialog[open][data-modal-transition-base].modal-ready>.modal-backdrop,
  dialog[data-modal-transition-base].modal-closing>.modal-backdrop {
    transition: none;
    opacity: 1;
  }
}

/* --- Image Background Element --- */
/* .image__bg-container 単体構造で::before疑似要素を使用 */
.image__bg-container {
  container-type: size;
  /* 幅と高さを監視（aspect-ratioクエリに必要） */
  container-name: image-container;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  border-radius: inherit;
  transition: inherit;
}

.image__bg-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--img-current);
  background-position: 50%;
  background-size: cover;
  border-radius: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
  transition-delay: inherit;
  /* background-image を除外: WebKit が transition: all 継承時にcontainer query による --img-current 変更を cross-fade() でアニメーションし、低解像度バリアントが表示され続ける問題を回避 (issue #2389) */
  transition-property:
    filter, backdrop-filter, opacity, color,
    background-color, background-position, background-size,
    border, border-color, border-width, border-radius,
    outline, outline-color, outline-width, outline-offset,
    box-shadow, text-shadow, transform, transform-origin,
    width, height, margin, padding,
    top, left, right, bottom, z-index, gap,
    letter-spacing, word-spacing, line-height, font-size, font-weight,
    clip-path;
}

/* IMPORTANT: 3つの DPR tier はソース順に依存 — ÷2.0 → ÷1.5 → ÷1.0 の順で配置し、境界値(DPR 1.0, 1.5)での overlap を後段 tier の勝ちで解決する。並び替え禁止。 */

/* DPR 2x（÷2.0）: 背景画像用 - 閾値（300px/500px/900px）= DPR 1x閾値 ÷ 2.0 */
@media (min-resolution: 1.5dppx) {

  /* --- horizontal (横長/正方形) - DPR 2x --- */
  /* デフォルト: < 300px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (300px未満) */
  @container (aspect-ratio < 1) and (width < 300px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (300px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 300px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上 + aspect-ratio >= 1 → middle horizontalはmax-widthなし: aspect-ratio >= 1 が自然にスコープし、後続の幅帯ルールがソース順で上書きするためmax-width不要。verticalは明示的範囲限定（min-width + max-width + aspect-ratio >= 0.5）を使用。 */
  @container (300px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 1 補正:middle → regular */
  @container (300px <=width < 500px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (300px <=width < 500px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio >= 1 → regular */
  @container (500px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 500px以上901px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (500px <=width < 901px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 901px以上 → origin */
  @container (901px <=width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 2x --- */
  /* デフォルト: < 300px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (300px未満) */
  @container (aspect-ratio < 0.5) and (width < 300px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (300px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 300px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio >= 0.5 → middle */
  @container (300px <=width < 500px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (300px <=width < 500px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 300px以上500px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (300px <=width < 500px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 500px以上901px未満 + aspect-ratio >= 0.5 → regular */
  @container (500px <=width < 901px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 500px以上901px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (500px <=width < 901px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 901px以上 → origin */
  @container (901px <=width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* DPR 1.5x（÷1.5）: DPR 1.01-1.5 の Android 端末等向け。対象デバイスは限定的だが、÷1.0 では解像度不足、÷2.0 では過剰ダウンスケールとなるため独立 tier として設置。閾値 = DPR 1x閾値 ÷ 1.5（端数は切り上げ: 600/1.5=400, 1000/1.5≈667, 1801/1.5≈1201） */
/* @media matches 1.0 ≤ DPR ≤ 1.5, effective 1.0 < DPR ≤ 1.5（DPR 1.0 は後段の ÷1.0 tier がソース順で勝つ） */
@media (min-resolution: 1dppx) and (max-resolution: 1.5dppx) {

  /* --- horizontal (横長/正方形) - DPR 1.5x --- */
  /* デフォルト: < 400px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (400px未満) */
  @container (aspect-ratio < 1) and (width < 400px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (400px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 400px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上 + aspect-ratio >= 1 → middle */
  @container (400px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 1 補正: middle → regular */
  @container (400px <=width < 667px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (400px <=width < 667px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio >= 1 → regular */
  @container (667px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (667px <=width < 1201px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1201px以上 → origin */
  @container (1201px <=width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 1.5x --- */
  /* デフォルト: < 400px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (400px未満) */
  @container (aspect-ratio < 0.5) and (width < 400px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (400px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 400px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio >= 0.5 → middle */
  @container (400px <=width < 667px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (400px <=width < 667px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 400px以上667px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (400px <=width < 667px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio >= 0.5 → regular */
  @container (667px <=width < 1201px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 667px以上1201px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (667px <=width < 1201px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1201px以上 → origin */
  @container (1201px <=width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* DPR 1x（÷1.0）: 背景画像用 - 閾値（600px/1000px/1801px） */
@media (max-resolution: 1dppx) {

  /* --- horizontal (横長/正方形) - DPR 1x --- */
  /* デフォルト: < 600px → small */
  .image--horizontal .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 1 補正: small → middle (600px未満) */
  @container (aspect-ratio < 1) and (width < 600px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.5 補正: small → regular (600px未満、2段階アップ) */
  @container (aspect-ratio < 0.5) and (width < 600px) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上 + aspect-ratio >= 1 → middle */
  @container (600px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 1 補正: middle → regular */
  @container (600px <=width < 1000px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → origin (2段階アップ) */
  @container (600px <=width < 1000px) and (aspect-ratio < 0.5) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio >= 1 → regular */
  @container (1000px <=width) and (aspect-ratio >=1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio < 1 補正: regular → origin */
  @container (1000px <=width < 1801px) and (aspect-ratio < 1) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上 + aspect-ratio < 0.5: origin で上限キャップ（aspect-ratio < 1 と同じ結果） */

  /* 1801px以上 → origin */
  @container (1801px <=width) {
    .image--horizontal .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* --- vertical (縦長) - DPR 1x --- */
  /* デフォルト: < 600px → small（aspect-ratioガードなし: 補正CQがカスケードで上書きする） */
  .image--vertical .image__bg-container::before {
    --img-current: var(--img-small);
  }

  /* aspect-ratio < 0.5 補正: small → middle (600px未満) */
  @container (aspect-ratio < 0.5) and (width < 600px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* aspect-ratio < 0.25 補正: small → regular (600px未満、2段階アップ) */
  @container (aspect-ratio < 0.25) and (width < 600px) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio >= 0.5 → middle */
  @container (600px <=width < 1000px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-middle);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.5 補正: middle → regular */
  @container (600px <=width < 1000px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 600px以上1000px未満 + aspect-ratio < 0.25 補正: middle → origin (2段階アップ) */
  @container (600px <=width < 1000px) and (aspect-ratio < 0.25) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio >= 0.5 → regular */
  @container (1000px <=width < 1801px) and (aspect-ratio >=0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-regular);
    }
  }

  /* 1000px以上1801px未満 + aspect-ratio < 0.5 補正: regular → origin */
  @container (1000px <=width < 1801px) and (aspect-ratio < 0.5) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }

  /* 1801px以上 → origin */
  @container (1801px <=width) {
    .image--vertical .image__bg-container::before {
      --img-current: var(--img-origin);
    }
  }
}

/* --- Shift Classes for Background Images --- */
/* 注意: shift classesはDPR非依存で、常にDPR 1x相当の閾値（600px/1000px）を使用 */
/* shift-1: 1段階上のバリエーション */
.image--shift-1 .image__bg-container::before {
  --img-current: var(--img-middle);
}

@container (min-width: 600px) {
  .image--shift-1 .image__bg-container::before {
    --img-current: var(--img-regular);
  }
}

@container (min-width: 1000px) {
  .image--shift-1 .image__bg-container::before {
    --img-current: var(--img-origin);
  }
}

/* shift-2: 2段階上のバリエーション */
.image--shift-2 .image__bg-container::before {
  --img-current: var(--img-regular);
}

@container (min-width: 600px) {
  .image--shift-2 .image__bg-container::before {
    --img-current: var(--img-origin);
  }
}

/* --- Text Specific --- */
.text {
  /* Note: Base styles are defined above in common group */
  /* Specific styles for .text */
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* Already defined in base, maybe redundant */
  line-height: 1;
  word-spacing: 1px;
  /* margin: 0; is already defined in base */
}

/* --- Frame --- */
.frame {
  display: block;
  overflow: hidden;
  /* iframe は display: inline のため、親のline-height が iframe 下の baseline descent gap を決定する。studio-preview はリセットで広範にline-height: 1 を適用しており、HRC でも .frame に同等の値を設定して挙動を一致させる。 */
  line-height: 1;
  /* Note: Base styles are defined above in common group */
}

/* biome-ignore lint/style/noDescendingSpecificity: 異なるコンテキストでのiframeスタイル */
.frame>iframe {
  border: none;
  width: 100%;
  height: 100%;
}

/* --- Studio Specific --- */

/* --- Toggle --- */
/* Base styles are shared with other segment containers (see JSDoc).
   Toggle-specific rules (open/closing state) are defined below. */

/* --- Input File --- */
.file {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: row;
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -1px;
  position: relative;
  /* TypeSquareの ts-unused インライン上書きから label を保護（.input/.select と同方針） */
  font-family: inherit !important;
}

.file:focus-within {
  outline-color: rgba(56, 110, 220, 0.5);
}

.file>input[type='file'] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
}

.toggle[data-toggle-closing] [data-show-toggle="open"],
.toggle[open]:not([data-toggle-closing]) [data-show-toggle="close"],
.toggle:not([open]):not([data-toggle-closing]) [data-show-toggle="open"] {
  display: none;
}

/* out-of-flow（absolute/fixed）トグルに限り、閉じた（遷移中でない）コンテンツをレイアウトから除外する。height:0 + overflow:hidden だけでは、position:absolute で複数トグルを重ねたメガメニュー等でコンテンツが幅を保持し続け、トグル root（width:auto の flex 親）の shrink-to-fit が全幅へ膨らむ。その全幅 root box が、DOM 順で後ろに来る閉トグルとして、前にある開トグルのはみ出しコンテンツへ最前面で重なり（同 z-index・position:absolute）、メニュー項目のクリックを奪う（#2952）。studio-preview は閉トグルがコンテンツをレイアウトしないため root が trigger 幅に収まり重ならない。

[data-toggle-overlay] は ToggleBundleBuilder が out-of-flow トグルにのみ付与する。in-flow（position:relative 等）トグルでは閉コンテンツの幅が root 幅の確定要素として機能しており（横並びナビ等）、一律 display:none にすると root が trigger 幅へ潰れて隣項目と重なる（#2985 回帰）。そのため本規則は out-of-flow に限定する。遷移中は [open] / [data-toggle-closing] が付くためこの規則は当たらず開閉アニメーションを壊さない。trigger は常時表示・クリック可能。閉コンテンツは既に inert + aria-hidden + height:0 で不可視・非対話。 */
.toggle[data-toggle-overlay]:not([open]):not([data-toggle-closing])>[data-toggle-content] {
  display: none;
}

/* --- sd-video Custom Element --- */
/* object-fitはnon-inheritedかつreplaced element専用プロパティのため、非replaced要素であるsd-video自身には視覚効果を持たない。ここでの宣言は子<video>が object-fit: inherit で参照するための値供給源として機能する。これにより<video> UA stylesheetデフォルト(object-fit: contain)をsd-video階層で再現し、objectFit未指定のレガシーデータでもstudio-previewと等価な表示となる。 */
sd-video {
  display: block;
  overflow: hidden;
  object-fit: contain;
}

/* studio-preview互換: ネイティブ<video>のように振る舞うwidth:100%ではなくmax-width:100%を使用し、sd-videoのwidth:auto時に循環依存を防ぐ（Safari互換 #2312）max-height:100%で親sd-videoの高さに収める（親height:auto時はpercentageがnoneにフォールバックするCSS仕様）object-fit:inheritで親sd-videoのobject-fitを継承する */
sd-video>video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: inherit;
}

/* --- Video Container --- */
/* Video inside video-container - disable text selection */
.video-container {
  user-select: none;
}

/* Video label toggle based on container state */
.video-container[data-video-state="paused"] [data-video-label="pause"],
.video-container[data-video-state="playing"] [data-video-label="play"] {
  display: none;
}

.video-container[data-video-state="paused"] [data-video-label="play"],
.video-container[data-video-state="playing"] [data-video-label="pause"] {
  display: inline;
}

/** root-element */
.sd-1 {
  /* body と同様、dvh 採用 + vh フォールバック（studio-preview の .StudioCanvas > .sd に対応） */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
}

/* --- CSS Custom Properties for Gradient Animation --- */
@property --g-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

@property --g-color-0 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0.01%;
}

@property --g-color-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-5 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-6 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-7 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-8 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-9 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-10 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-10 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --g-color-11 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --g-position-11 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

:root {
  --s-color-aeb97d44: #ffffffff;
  --s-color-4aaa03d8: #3a4659ff;
  --s-color-78863b05: #121821ff;
  --s-color-19b49405: #1186efff;
  --s-color-6590c134: #ffffffff;
  --s-color-34baa569: #f2f5f8ff;
  --s-color-f7997fc9: #d1d8e0ff;
  --s-color-08beba5c: #fffaf5;
  --s-color-159495a4: #fff3eb;
  --s-color-a59fcb8c: #fee6d7ff;
  --s-color-cd81fc06: #fccdaf;
  --s-color-9c9c6786: #eb550e;
  --s-color-a8855986: #d04800;
  --s-color-af9c49d3: #6e1e00ff;
  --s-color-eb930500: #faaf87ff;
}

.text.theme-5a9cfc05 {
  font-family: var(--s-font-2aae357d);
  font-size: 48px;
  font-weight: 700;
}

.text.theme-b8b88d22 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
}

.text.theme-dfaf381e {
  font-family: var(--s-font-e0bc67d5);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.text.theme-9a8d1c6f {
  font-family: var(--s-font-e0bc67d5);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.text.theme-53b6b576 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.text.theme-76887d50 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.text.theme-c2a0d19c {
  font-family: var(--s-font-e0bc67d5);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.text.theme-4bb00543 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.text.theme-9c91aaa6 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
}

.text.theme-8ea20630 {
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .text.theme-9a8d1c6f {
    font-size: 18px;
  }

  .text.theme-53b6b576 {
    font-size: 16px;
  }

  .text.theme-76887d50 {
    font-size: 18px;
  }

  .text.theme-c2a0d19c {
    font-size: 16px;
  }

  .text.theme-4bb00543 {
    font-size: 14px;
  }

  .text.theme-9c91aaa6 {
    font-size: 12px;
  }

  .text.theme-8ea20630 {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .text.theme-5a9cfc05 {
    font-size: 36px;
  }
}

.sd-1 {
  align-content: center;
  align-items: center;
  background: #ffffff;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 40px 0px;
  height: 100%;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}

.sd-1>* {
  --gap-h: 0px;
  --gap-v: 40px;
}

.sd-2 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 0px;
  width: 768px;
  max-width: 100%;
}

.sd-3 {
  align-content: center;
  align-items: center;
  background: var(--s-color-6590c134);
  flex: none;
  height: 48px;
  justify-content: center;
  margin: 0px;
  padding: 12px 40px;
  width: 768px;
  z-index: 2;
  max-width: 100%;
}

.sd-4 {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: auto 1200 / 156;
}

.sd-5 {
  background: var(--s-color-6590c134);
  justify-content: flex-start;
  z-index: 2;
}

.sd-6 {
  align-content: center;
  align-items: center;
  gap: 16px 0px;
  height: auto;
  justify-content: flex-start;
  padding: 0px 0px 16px;
  width: 100%;
  max-width: 100%;
}

.sd-6>* {
  --gap-h: 0px;
  --gap-v: 16px;
}

.sd-7 {
  background: transparent;
  border-radius: 0px;
  flex: none;
  height: auto;
  margin: 0px;
  overflow-x: clip;
  overflow-y: clip;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.sd-8 {
  align-content: center;
  align-items: center;
  background: transparent;
  bottom: auto;
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  height: 350px;
  justify-content: flex-end;
  left: 0px;
  padding: 16px 16px 20px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-8>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.symbol-1 {
  align-content: flex-start;
  align-items: flex-start;
  background: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 4px;
  height: auto;
  justify-content: flex-start;
  padding: 0px;
  width: auto;
  max-width: 100%;
}

.symbol-1>* {
  --gap-h: 4px;
  --gap-v: 0px;
}

.symbol-1__sd-1 {
  color: var(--s-color-4aaa03d8);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-1__sd-2 {
  color: var(--s-color-4aaa03d8);
  flex: 1;
  font-family: var(--s-font-e0bc67d5);
  font-size: 14px;
  font-weight: 400;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
}

.sd-9 {
  display: flex;
  flex: none;
  height: 472px;
  padding: 0px;
  width: 768px;
  max-width: 100%;
}

.sd-10 {
  display: none;
  flex: none;
  height: auto;
  margin: 0px 24px;
  scale: 1 1;
  transform-origin: top center;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
}

.sd-11 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 0px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-12 {
  align-content: flex-start;
  align-items: flex-start;
  background: var(--s-color-34baa569);
  border-radius: 16px;
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 16px 16px 0px;
  width: 100%;
  max-width: 100%;
}

.sd-13 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-14 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 12px 0px 16px;
  width: 100%;
  max-width: 100%;
}

.sd-15 {
  align-content: center;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: 29px;
  justify-content: center;
  padding: 0px 4px 4px;
  width: auto;
  max-width: 100%;
}

.sd-15:hover {
  opacity: 0.5;
  --ha: 1;
}

.sd-15>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-15:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-16 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-17 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.modal-plan__backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #121821cc;
}

.modal-plan__container {
  height: 100%;
  justify-content: center;
  mix-blend-mode: normal;
  padding: 72px;
  width: 100%;
}

.modal-plan__sd-1 {
  align-content: flex-end;
  align-items: flex-end;
  flex: none;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-2 {
  background: transparent;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  padding: 16px 0px;
  width: auto;
  max-width: 100%;
}

.modal-plan__sd-2>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-3 {
  color: var(--s-color-aeb97d44);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-4 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.modal-plan__sd-5 {
  align-content: flex-start;
  align-items: flex-start;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.2);
  flex: none;
  height: auto;
  justify-content: flex-start;
  padding: 24px 24px 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-6 {
  color: var(--s-color-78863b05);
  flex: none;
  height: auto;
  padding: 0px 0px 12px;
  text-align: left;
  width: 100%;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-7 {
  align-content: flex-start;
  align-items: flex-start;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: flex-start;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-7>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.modal-plan__sd-8 {
  align-content: flex-start;
  align-items: flex-start;
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 1px solid var(--s-color-f7997fc9);
  border-radius: 8px;
  border-right: 1px solid var(--s-color-f7997fc9);
  border-top: 1px solid var(--s-color-f7997fc9);
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: clip;
  overflow-y: clip;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-9 {
  background: var(--s-color-34baa569);
  color: #333333;
  flex: none;
  height: auto;
  padding: 8px;
  text-align: left;
  width: 100%;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-10 {
  align-content: flex-start;
  align-items: flex-start;
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 8px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-10>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.modal-plan__sd-11 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-12 {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 0px;
}

.modal-plan__sd-12>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-13 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-14 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-15 {
  align-content: flex-start;
  align-items: flex-start;
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 8px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-15>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.modal-plan__sd-16 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-17 {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 0px;
}

.modal-plan__sd-17>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-18 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-19 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-20 {
  align-content: flex-start;
  align-items: flex-start;
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 1px solid var(--s-color-f7997fc9);
  border-radius: 8px;
  border-right: 1px solid var(--s-color-f7997fc9);
  border-top: 1px solid var(--s-color-f7997fc9);
  display: none;
  flex: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: clip;
  overflow-y: clip;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-21 {
  background: var(--s-color-34baa569);
  color: #333333;
  flex: none;
  height: auto;
  padding: 8px;
  text-align: left;
  width: 100%;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-22 {
  align-content: flex-start;
  align-items: flex-start;
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 8px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-22>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.modal-plan__sd-23 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-24 {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 0px;
}

.modal-plan__sd-24>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-25 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-26 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-27 {
  align-content: center;
  align-items: center;
  background: transparent;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  justify-content: flex-end;
  padding: 12px 0px;
  width: 100%;
  max-width: 100%;
}

.modal-plan__sd-27:hover {
  opacity: 0.5;
  --ha: 1;
}

.modal-plan__sd-27>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-27:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-28 {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: flex-end;
  padding: 8px 0px;
}

.modal-plan__sd-28>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.modal-plan__sd-29 {
  color: var(--s-color-19b49405);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.modal-plan__sd-30 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-18 {
  background: var(--s-color-6590c134);
  flex: none;
  justify-content: center;
  z-index: 2;
}

.sd-19 {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 4px;
  height: auto;
  justify-content: center;
  padding: 24px;
  width: 100%;
  max-width: 100%;
}

.sd-19>* {
  --gap-h: 4px;
  --gap-v: 0px;
}

.sd-20 {
  align-content: flex-start;
  align-items: flex-start;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 4px;
  justify-content: center;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.sd-20>* {
  --gap-h: 4px;
  --gap-v: 0px;
}

.sd-21 {
  align-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 16px 0px 0px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.sd-22 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  left: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-23 {
  height: 36px;
  width: 36px;
  max-width: 100%;
}

.sd-24 {
  align-content: center;
  align-items: center;
  background: var(--s-color-08beba5c);
  border-bottom: 2px solid var(--s-color-a59fcb8c);
  border-left: 2px solid var(--s-color-a59fcb8c);
  border-radius: 8px;
  border-right: 2px solid var(--s-color-a59fcb8c);
  border-top: 2px solid var(--s-color-a59fcb8c);
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px 0px;
  height: 68px;
  justify-content: flex-end;
  padding: 0px 4px 4px;
  width: 100%;
  max-width: 100%;
}

.sd-24:hover {
  background: var(--s-color-159495a4);
  --ha: 1;
}

.sd-24>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-24:hover>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-25 {
  color: var(--s-color-af9c49d3);
  font-family: var(--s-font-e0bc67d5);
  font-size: 12px;
  font-weight: 500;
  height: auto;
  letter-spacing: normal;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-26 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-27 {
  align-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 16px 0px 0px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.sd-28 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  left: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-29 {
  height: 36px;
  width: 36px;
  max-width: 100%;
}

.sd-30 {
  align-content: center;
  align-items: center;
  background: var(--s-color-08beba5c);
  border-bottom: 2px solid var(--s-color-a59fcb8c);
  border-left: 2px solid var(--s-color-a59fcb8c);
  border-radius: 8px;
  border-right: 2px solid var(--s-color-a59fcb8c);
  border-top: 2px solid var(--s-color-a59fcb8c);
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px 0px;
  height: 68px;
  justify-content: flex-end;
  padding: 0px 4px 4px;
  width: 100%;
  max-width: 100%;
}

.sd-30:hover {
  background: var(--s-color-159495a4);
  --ha: 1;
}

.sd-30>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-30:hover>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-31 {
  color: var(--s-color-af9c49d3);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-32 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-33 {
  align-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 16px 0px 0px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.sd-34 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  left: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-35 {
  height: 36px;
  width: 36px;
  max-width: 100%;
}

.sd-36 {
  align-content: center;
  align-items: center;
  background: var(--s-color-08beba5c);
  border-bottom: 2px solid var(--s-color-a59fcb8c);
  border-left: 2px solid var(--s-color-a59fcb8c);
  border-radius: 8px;
  border-right: 2px solid var(--s-color-a59fcb8c);
  border-top: 2px solid var(--s-color-a59fcb8c);
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px 0px;
  height: 68px;
  justify-content: flex-end;
  padding: 0px 4px 4px;
  width: 100%;
  max-width: 100%;
}

.sd-36:hover {
  background: var(--s-color-159495a4);
  --ha: 1;
}

.sd-36>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-36:hover>* {
  --gap-h: 0px;
  --gap-v: 2px;
}

.sd-37 {
  color: var(--s-color-af9c49d3);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-38 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-39 {
  background: var(--s-color-6590c134);
  justify-content: flex-start;
}

.sd-40 {
  align-content: center;
  align-items: center;
  background-color: #d5eef3;
  gap: 0px 0px;
  height: auto;
  justify-content: flex-start;
  padding: 16px 0px 0px;
  width: 100%;
  max-width: 100%;
}

.sd-40>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-41 {
  display: none;
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sd-42 {
  display: flex;
  flex: none;
  height: 44px;
  width: 100%;
  max-width: 100%;
}

.sd-42>.image__bg-container::before {
  background-repeat: no-repeat;
}

.sd-43 {
  background: #f2f5f8;
  gap: 4px 0px;
  height: auto;
  padding: 0px 24px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-43>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-44 {
  border-bottom: 1px solid var(--s-color-4aaa03d8);
  border-left: 0px solid var(--s-color-4aaa03d8);
  border-right: 0px solid var(--s-color-4aaa03d8);
  border-top: 0px solid var(--s-color-4aaa03d8);
  color: var(--s-color-4aaa03d8);
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px 8px 4px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-45 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.sd-45>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.sd-46 {
  color: var(--s-color-78863b05);
  font-family: var(--s-font-e0bc67d5);
  font-size: 24px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-47 {
  color: var(--s-color-a8855986);
  font-family: var(--s-font-e0bc67d5);
  font-size: 32px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-48 {
  display: none;
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sd-49 {
  display: flex;
  flex: none;
  height: 376px;
  width: 100%;
  max-width: 100%;
}

.sd-50 {
  background: var(--s-color-6590c134);
}

.sd-51 {
  height: auto;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.sd-52 {
  background: var(--s-color-a59fcb8c);
  gap: 8px 0px;
  height: auto;
  padding: 24px 24px 0px;
  width: 100%;
  max-width: 100%;
}

.sd-52>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.sd-53 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 4px;
  justify-content: center;
  padding: 0px;
}

.sd-53>* {
  --gap-h: 4px;
  --gap-v: 0px;
}

.sd-54 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-55 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.sd-55>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.sd-56 {
  background: #d04800;
  border-radius: 4px;
  color: #ffffffff;
  flex: none;
  height: auto;
  padding: 2px 0px;
  text-align: center;
  width: 64px;
  justify-content: center;
  max-width: 100%;
}

.sd-57 {
  background: #d04800;
  border-radius: 4px;
  color: #ffffffff;
  flex: none;
  height: auto;
  padding: 2px 0px;
  text-align: center;
  width: 64px;
  justify-content: center;
  max-width: 100%;
}

.sd-58 {
  background: #d04800;
  border-radius: 4px;
  color: #ffffffff;
  flex: none;
  height: auto;
  padding: 2px 0px;
  text-align: center;
  width: 64px;
  justify-content: center;
  max-width: 100%;
}

.sd-59 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-60 {
  height: auto;
  width: 200.00000000000003px;
  max-width: 100%;
}

.sd-60 {
  aspect-ratio: auto 664 / 92;
}

.sd-61 {
  align-content: center;
  align-items: center;
  background: var(--s-color-a59fcb8c);
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 16px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-61>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-62 {
  align-content: flex-start;
  align-items: flex-start;
  background: var(--s-color-a59fcb8c);
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 16px;
  justify-content: center;
  padding: 0px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-62>* {
  --gap-h: 16px;
  --gap-v: 16px;
}

.sd-63 {
  background: var(--s-color-6590c134);
  border-radius: 16px;
  flex: none;
  gap: 0px 0px;
  height: 340px;
  padding: 16px 16px 24px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-63>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.symbol-2 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.symbol-2>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-2__sd-1 {
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.symbol-2__sd-2 {
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: center;
  padding: 0px;
}

.symbol-2__sd-2>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.symbol-2__sd-3 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-2__sd-4 {
  color: var(--s-color-78863b05);
  height: auto;
  padding: 4px 0px 0px;
  text-align: center;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.symbol-2__sd-5 {
  color: var(--s-color-4aaa03d8);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-64 {
  background: var(--s-color-6590c134);
  border-radius: 16px;
  flex: none;
  gap: 0px 0px;
  height: 340px;
  padding: 16px 16px 24px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-64>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-65 {
  background: var(--s-color-6590c134);
  border-radius: 16px;
  flex: none;
  gap: 0px 0px;
  height: 340px;
  padding: 16px 16px 24px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-65>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-66 {
  background: var(--s-color-6590c134);
  border-radius: 16px;
  flex: none;
  gap: 0px 0px;
  height: 340px;
  padding: 16px 16px 24px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-66>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-67 {
  align-content: center;
  align-items: center;
  background: var(--s-color-a59fcb8c);
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  justify-content: flex-end;
  padding: 8px 24px 40px;
  width: 100%;
  max-width: 100%;
}

.sd-67>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-68 {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: flex-end;
  padding: 8px 0px;
}

.sd-68:hover {
  opacity: 0.5;
  --ha: 1;
}

.sd-68>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-68:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-69 {
  color: var(--s-color-19b49405);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-70 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-71 {
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sd-72 {
  background: var(--s-color-6590c134);
}

.sd-73 {
  height: auto;
  padding: 0px 0px 16px;
  width: 100%;
  max-width: 100%;
}

.sd-74 {
  background: transparent;
  gap: 4px 0px;
  height: auto;
  padding: 16px 24px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-74>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-75 {
  border-bottom: 1px solid var(--s-color-4aaa03d8);
  border-left: 0px solid var(--s-color-4aaa03d8);
  border-right: 0px solid var(--s-color-4aaa03d8);
  border-top: 0px solid var(--s-color-4aaa03d8);
  color: var(--s-color-4aaa03d8);
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px 8px 4px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-76 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.sd-76>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.sd-77 {
  color: var(--s-color-78863b05);
  font-family: var(--s-font-e0bc67d5);
  font-size: 24px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-78 {
  color: var(--s-color-a8855986);
  font-family: var(--s-font-e0bc67d5);
  font-size: 32px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px;
  text-align: left;
  translate: 0px 3px;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-79 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 16px 0px;
  justify-content: center;
  padding: 0px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-79>* {
  --gap-h: 0px;
  --gap-v: 16px;
}

.sd-80 {
  background: var(--s-color-34baa569);
  border-radius: 40px;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px 16px;
  height: auto;
  padding: 24px;
  width: 100%;
  max-width: 100%;
}

.sd-80>* {
  --gap-h: 16px;
  --gap-v: 0px;
}

.sd-81 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 0px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-81>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.sd-82 {
  background: var(--s-color-6590c134);
  border-bottom: 1px solid var(--s-color-a8855986);
  border-left: 1px solid var(--s-color-a8855986);
  border-radius: 4px;
  border-right: 1px solid var(--s-color-a8855986);
  border-top: 1px solid var(--s-color-a8855986);
  color: var(--s-color-a8855986);
  height: auto;
  padding: 2px 16px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-83 {
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  color: var(--s-color-78863b05);
  flex: none;
  height: auto;
  padding: 0px 0px 8px;
  text-align: center;
  width: 100%;
  justify-content: center;
  max-width: 100%;
}

.sd-84 {
  align-content: center;
  align-items: center;
  background: linear-gradient(var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1));
  border-radius: 16px;
  flex: none;
  gap: 8px 0px;
  height: 246px;
  justify-content: center;
  padding: 40px 0px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
  --g-color-0: #ff7f48ff;
  --g-position-0: 0%;
  --g-color-1: #ffa86dff;
  --g-position-1: 63%;
  --g-color-2: #ffa86dff;
  --g-position-2: 63%;
  --g-color-3: #ffa86dff;
  --g-position-3: 63%;
  --g-color-4: #ffa86dff;
  --g-position-4: 63%;
  --g-color-5: #ffa86dff;
  --g-position-5: 63%;
  --g-color-6: #ffa86dff;
  --g-position-6: 63%;
  --g-color-7: #ffa86dff;
  --g-position-7: 63%;
  --g-color-8: #ffa86dff;
  --g-position-8: 63%;
  --g-color-9: #ffa86dff;
  --g-position-9: 63%;
  --g-color-10: #ffa86dff;
  --g-position-10: 63%;
  --g-color-11: #ffa86dff;
  --g-position-11: 63%;
}

.sd-84>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.sd-85 {
  background: transparent;
  flex: none;
  height: auto;
  width: calc(72% - (var(--gap-h) * 0.28));
  max-width: calc(72% - (var(--gap-h) * 0.28));
}

.sd-86 {
  flex: none;
  height: auto;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.sd-87 {
  background: transparent;
  flex: none;
  height: auto;
  width: calc(72% - (var(--gap-h) * 0.28));
  max-width: calc(72% - (var(--gap-h) * 0.28));
}

.sd-88 {
  flex: none;
  height: auto;
  padding: 0px;
  width: 100%;
  max-width: 100%;
}

.symbol-3 {
  background: var(--s-color-34baa569);
  border-radius: 40px;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px 16px;
  height: auto;
  padding: 24px;
  width: 100%;
  max-width: 100%;
}

.symbol-3>* {
  --gap-h: 16px;
  --gap-v: 0px;
}

.symbol-3__sd-1 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 0px;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.symbol-3__sd-1>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-3__sd-2 {
  background: var(--s-color-6590c134);
  border-bottom: 1px solid var(--s-color-a8855986);
  border-left: 1px solid var(--s-color-a8855986);
  border-radius: 4px;
  border-right: 1px solid var(--s-color-a8855986);
  border-top: 1px solid var(--s-color-a8855986);
  color: var(--s-color-a8855986);
  height: auto;
  padding: 2px 16px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-3__sd-3 {
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  color: var(--s-color-78863b05);
  flex: none;
  height: auto;
  padding: 0px 0px 8px;
  text-align: center;
  width: 100%;
  justify-content: center;
  max-width: 100%;
}

.symbol-3__sd-4 {
  color: var(--s-color-78863b05);
  flex: none;
  height: auto;
  text-align: center;
  width: 100%;
  justify-content: center;
  max-width: 100%;
}

.symbol-3__sd-5 {
  display: flex;
  flex: none;
  height: auto;
  width: calc(50% - (var(--gap-h) * 0.5));
  max-width: calc(50% - (var(--gap-h) * 0.5));
}

.sd-89 {
  background: var(--s-color-6590c134);
}

.sd-90 {
  height: auto;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.sd-91 {
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sd-92 {
  background: var(--s-color-159495a4);
  gap: 4px 0px;
  height: auto;
  padding: 8px 24px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-92>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-93 {
  border-bottom: 1px solid var(--s-color-4aaa03d8);
  border-left: 0px solid var(--s-color-4aaa03d8);
  border-right: 0px solid var(--s-color-4aaa03d8);
  border-top: 0px solid var(--s-color-4aaa03d8);
  color: var(--s-color-4aaa03d8);
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px 8px 4px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-94 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.sd-94>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.sd-95 {
  color: var(--s-color-a8855986);
  font-family: var(--s-font-e0bc67d5);
  font-size: 32px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px;
  text-align: left;
  translate: 0px 0px;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-96 {
  color: var(--s-color-78863b05);
  font-family: var(--s-font-e0bc67d5);
  font-size: 24px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-97 {
  align-content: center;
  align-items: center;
  background: var(--s-color-159495a4);
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 0px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-97>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-4 {
  align-content: center;
  align-items: center;
  background: var(--s-color-6590c134);
  border-radius: 16px;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 16px;
  height: auto;
  justify-content: center;
  padding: 16px 40px;
  width: 100%;
  max-width: 100%;
}

.symbol-4>* {
  --gap-h: 16px;
  --gap-v: 0px;
}

.symbol-4__sd-1 {
  align-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 0px;
}

.symbol-4__sd-1>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-4__sd-2 {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 8px;
  justify-content: flex-start;
  padding: 0px;
}

.symbol-4__sd-2>* {
  --gap-h: 8px;
  --gap-v: 0px;
}

.symbol-4__sd-3 {
  height: auto;
  width: 34px;
  max-width: 100%;
}

.symbol-4__sd-4 {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  justify-content: center;
  padding: 0px;
}

.symbol-4__sd-4>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.symbol-4__sd-5 {
  color: var(--s-color-78863b05);
  flex: none;
  height: auto;
  text-align: center;
  width: 75px;
  justify-content: center;
  max-width: 100%;
}

.symbol-4__sd-6 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-4__sd-7 {
  color: var(--s-color-78863b05);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-4__sd-8 {
  background: var(--s-color-34baa569);
  border-radius: 4px;
  color: var(--s-color-4aaa03d8);
  flex: none;
  height: auto;
  padding: 2px 8px 2px 12px;
  text-align: center;
  width: 100%;
  justify-content: center;
  max-width: 100%;
}

.symbol-4__sd-9 {
  height: 13px;
  width: 10px;
  max-width: 100%;
}

.symbol-4__sd-10 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.symbol-4__sd-10>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.symbol-4__sd-11 {
  color: var(--s-color-a8855986);
  flex: none;
  height: auto;
  text-align: right;
  width: 128px;
  justify-content: flex-end;
  max-width: 100%;
}

.symbol-4__sd-12 {
  color: #333333;
  font-family: var(--s-font-e0bc67d5);
  font-size: 18px;
  font-weight: 500;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-98 {
  align-content: center;
  align-items: center;
  background: var(--s-color-159495a4);
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 0px;
  width: 480px;
  max-width: 100%;
}

.sd-98>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-99 {
  align-content: center;
  align-items: center;
  background: var(--s-color-159495a4);
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  justify-content: flex-end;
  padding: 8px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-99>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-100 {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: flex-end;
  padding: 8px 0px;
}

.sd-100:hover {
  opacity: 0.5;
  --ha: 1;
}

.sd-100>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-100:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-101 {
  color: var(--s-color-19b49405);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-102 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-103 {
  display: none;
  flex: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sd-103 {
  aspect-ratio: auto 1440 / 658;
}

.sd-104 {
  display: flex;
  flex: none;
  height: 164px;
  width: 768px;
  max-width: 100%;
}

.sd-105 {
  background: var(--s-color-6590c134);
}

.sd-106 {
  height: auto;
  padding: 0px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-107 {
  background: transparent;
  gap: 4px 0px;
  height: auto;
  padding: 16px 24px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-107>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-108 {
  border-bottom: 1px solid var(--s-color-4aaa03d8);
  border-left: 0px solid var(--s-color-4aaa03d8);
  border-right: 0px solid var(--s-color-4aaa03d8);
  border-top: 0px solid var(--s-color-4aaa03d8);
  color: var(--s-color-4aaa03d8);
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px 8px 4px;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-109 {
  align-content: flex-end;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 2px;
  justify-content: center;
  padding: 0px;
}

.sd-109>* {
  --gap-h: 2px;
  --gap-v: 0px;
}

.sd-110 {
  color: var(--s-color-a8855986);
  font-family: var(--s-font-e0bc67d5);
  font-size: 32px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-111 {
  color: var(--s-color-78863b05);
  font-family: var(--s-font-e0bc67d5);
  font-size: 24px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-112 {
  align-content: center;
  align-items: center;
  background: var(--s-color-159495a4);
  border-radius: 24px;
  flex: none;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 24px;
  width: 100%;
  max-width: 100%;
}

.sd-112>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-5 {
  align-content: center;
  align-items: center;
  background: transparent;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 8px;
  height: auto;
  justify-content: center;
  width: 480px;
  max-width: 100%;
}

.symbol-5>* {
  --gap-h: 8px;
  --gap-v: 0px;
}

.symbol-5__sd-1 {
  height: auto;
  width: 56px;
  max-width: 100%;
}

.symbol-5__sd-2 {
  align-content: center;
  align-items: center;
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 0px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.symbol-5__sd-3 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 14px;
  justify-content: center;
  padding: 0px;
  width: 9px;
  max-width: 100%;
}

.symbol-5__sd-4 {
  height: auto;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 10px;
  z-index: 1;
}

.symbol-5__sd-5 {
  align-content: flex-start;
  align-items: flex-start;
  background: var(--s-color-6590c134);
  border-radius: 8px;
  flex: 1;
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 16px;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.symbol-5__sd-5>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.symbol-5__sd-6 {
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  color: var(--s-color-78863b05);
  flex: none;
  font-family: var(--s-font-e0bc67d5);
  font-size: 16px;
  font-weight: 500;
  height: auto;
  line-height: 1.4;
  padding: 0px 0px 4px;
  text-align: left;
  width: 100%;
  justify-content: flex-start;
  max-width: 100%;
}

.symbol-5__sd-7 {
  color: var(--s-color-4aaa03d8);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-113 {
  align-content: center;
  align-items: center;
  background: transparent;
  flex: none;
  flex-wrap: nowrap;
  gap: 4px 0px;
  justify-content: flex-start;
  padding: 16px 0px 40px;
  width: 100%;
  max-width: 100%;
}

.sd-113>* {
  --gap-h: 0px;
  --gap-v: 4px;
}

.sd-114 {
  background: var(--s-color-34baa569);
}

.sd-115 {
  gap: 0px 0px;
  height: auto;
  padding: 32px 0px 40px;
  width: 100%;
  max-width: 100%;
}

.sd-115>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-116 {
  background: transparent;
  border-radius: 0px;
  flex: none;
  gap: 0px 0px;
  height: auto;
  margin: 0px;
  padding: 8px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-116>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-117 {
  align-content: center;
  align-items: center;
  background: var(--s-color-cd81fc06);
  border-radius: 100px;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: 56px;
  justify-content: center;
  padding: 16px 24px 12px 32px;
  width: 560px;
  max-width: 100%;
}

.sd-117:hover {
  background: var(--s-color-eb930500);
  --ha: 1;
}

.sd-117>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-117:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-118 {
  background: transparent;
  color: var(--s-color-af9c49d3);
  height: auto;
  padding: 0px;
  text-align: center;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.sd-119 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-119>.image__bg-container::before {
  background-repeat: no-repeat;
}

.sd-120 {
  align-content: center;
  align-items: center;
  border-bottom: 1px solid var(--s-color-f7997fc9);
  border-left: 0px solid var(--s-color-f7997fc9);
  border-right: 0px solid var(--s-color-f7997fc9);
  border-top: 0px solid var(--s-color-f7997fc9);
  flex-wrap: nowrap;
  gap: 8px 0px;
  justify-content: center;
  padding: 8px 24px 24px;
}

.sd-120>* {
  --gap-h: 0px;
  --gap-v: 8px;
}

.sd-121 {
  color: #333333;
  height: auto;
  text-align: center;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.sd-122 {
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: center;
  padding: 0px;
}

.sd-122>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-123 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-124 {
  color: #333333;
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-125 {
  align-content: center;
  align-items: center;
  background: transparent;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: auto;
  justify-content: center;
  padding: 16px 24px;
  width: 100%;
  max-width: 100%;
}

.sd-125>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-126 {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: flex-end;
  padding: 8px 0px;
}

.sd-126:hover {
  opacity: 0.5;
  --ha: 1;
}

.sd-126>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-126:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-127 {
  color: var(--s-color-19b49405);
  height: auto;
  text-align: left;
  width: auto;
  justify-content: flex-start;
  max-width: 100%;
}

.sd-128 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-129 {
  color: #333333;
  height: auto;
  text-align: center;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.sd-130 {
  align-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #ffffffcc;
  bottom: 0px;
  flex: none;
  flex-wrap: nowrap;
  justify-content: center;
  left: auto;
  mix-blend-mode: normal;
  padding: 16px 24px;
  position: sticky;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-131 {
  background: transparent;
  border-radius: 0px;
  flex: none;
  gap: 0px 0px;
  height: auto;
  margin: 0px;
  padding: 16px 0px 0px;
  width: 100%;
  max-width: 100%;
}

.sd-131>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-132 {
  align-content: center;
  align-items: center;
  flex: none;
  flex-wrap: nowrap;
  gap: 0px 0px;
  justify-content: center;
  left: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1;
  max-width: 100%;
}

.sd-132>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-133 {
  background: #ffffffff;
  border-bottom: 2px solid var(--s-color-9c9c6786);
  border-left: 2px solid var(--s-color-9c9c6786);
  border-radius: 8px;
  border-right: 2px solid var(--s-color-9c9c6786);
  border-top: 2px solid var(--s-color-9c9c6786);
  bottom: auto;
  color: var(--s-color-af9c49d3);
  font-family: var(--s-font-e0bc67d5);
  font-size: 14px;
  font-weight: 500;
  height: auto;
  left: auto;
  line-height: 1.4;
  padding: 4px 16px;
  position: relative;
  right: auto;
  text-align: center;
  top: auto;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.sd-134 {
  align-content: center;
  align-items: center;
  background: var(--s-color-a8855986);
  border-radius: 100px;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px 0px;
  height: 56px;
  justify-content: center;
  padding: 16px 24px 12px 32px;
  width: 560px;
  max-width: 100%;
}

.sd-134:hover {
  background: #a03200ff;
  --ha: 1;
}

.sd-134>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-134:hover>* {
  --gap-h: 0px;
  --gap-v: 0px;
}

.sd-135 {
  background: transparent;
  color: var(--s-color-aeb97d44);
  font-family: var(--s-font-e0bc67d5);
  font-size: 18px;
  font-weight: 600;
  height: auto;
  line-height: 1.4;
  padding: 0px;
  text-align: center;
  width: auto;
  justify-content: center;
  max-width: 100%;
}

.sd-136 {
  height: 24px;
  width: 24px;
  max-width: 100%;
}

.sd-136>.image__bg-container::before {
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .sd-2 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-3 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-8 {
    bottom: auto;
    top: 0px;
  }

  .sd-8>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .symbol-1 {
    display: flex;
    height: auto;
  }

  .symbol-1>* {
    --gap-h: 4px;
    --gap-v: 0px;
  }

  .sd-9 {
    display: flex;
  }

  .sd-10 {
    display: none;
  }

  .modal-plan__container {
    padding: 24px;
  }

  .modal-plan__sd-20 {
    display: none;
  }

  .sd-41 {
    display: none;
  }

  .sd-42 {
    display: flex;
  }

  .sd-48 {
    display: none;
  }

  .sd-49 {
    display: flex;
  }

  .sd-63 {
    flex: none;
    height: 304px;
  }

  .sd-63>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-64 {
    flex: none;
    height: 304px;
  }

  .sd-64>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-65 {
    flex: none;
    height: 304px;
  }

  .sd-65>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-66 {
    flex: none;
    height: 304px;
  }

  .sd-66>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .symbol-3__sd-5 {
    display: flex;
  }

  .symbol-4__sd-5 {
    flex: none;
    /* width: 64px; */
    max-width: 100%;
  }

  .symbol-4__sd-8 {
    padding: 2px 8px 2px 14px;
  }

  .sd-103 {
    display: none;
  }

  .sd-104 {
    display: flex;
  }
}

@media (max-width: 560px) {
  .sd-6 {
    gap: 8px 0px;
    padding: 0px;
  }

  .sd-6>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .sd-7 {
    height: auto;
  }

  .sd-8 {
    flex: none;
    height: 70%;
    padding: 8px;
  }

  .sd-8>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .symbol-1 {
    display: flex;
  }

  .symbol-1>* {
    --gap-h: 4px;
    --gap-v: 0px;
  }

  .sd-9 {
    display: none;
  }

  .sd-10 {
    display: flex;
    margin: 0px 16px;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }

  .sd-11 {
    padding: 0px 16px;
  }

  .modal-plan__container {
    padding: 16px;
  }

  .modal-plan__sd-5 {
    padding: 16px 16px 0px;
  }

  .modal-plan__sd-20 {
    display: none;
  }

  .modal-plan__sd-27 {
    padding: 8px 0px;
  }

  .modal-plan__sd-27>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .modal-plan__sd-27:hover>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-19 {
    padding: 24px 16px;
  }

  .sd-19>* {
    --gap-h: 4px;
    --gap-v: 0px;
  }

  .sd-24 {
    padding: 0px 2px 4px;
  }

  .sd-24>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-24:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-30 {
    padding: 0px 2px 4px;
  }

  .sd-30>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-30:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-36 {
    padding: 0px 2px 4px;
  }

  .sd-36>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-36:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-40 {
    padding: 0px;
  }

  .sd-40>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-41 {
    display: flex;
  }

  .sd-42 {
    display: none;
  }

  .sd-48 {
    display: flex;
  }

  .sd-49 {
    display: none;
  }

  .sd-61 {
    padding: 16px;
  }

  .sd-61>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .sd-62 {
    padding: 0px 16px;
  }

  .sd-62>* {
    --gap-h: 16px;
    --gap-v: 16px;
  }

  .sd-63 {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  .sd-63>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-64 {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  .sd-64>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-65 {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  .sd-65>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-66 {
    height: auto;
    width: 100%;
    max-width: 100%;
  }

  .sd-66>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-79 {
    padding: 0px 16px;
  }

  .sd-79>* {
    --gap-h: 0px;
    --gap-v: 16px;
  }

  .sd-80 {
    border-radius: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 16px 8px 8px;
  }

  .sd-80>* {
    --gap-h: 0px;
    --gap-v: 16px;
  }

  .sd-81 {
    flex: none;
    padding: 0px 8px;
    width: 100%;
    max-width: 100%;
  }

  .sd-81>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .sd-84 {
    height: auto;
    padding: 16px 0px;
    width: 100%;
    max-width: 100%;
  }

  .sd-84>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .symbol-3 {
    border-radius: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 16px 8px 8px;
  }

  .symbol-3>* {
    --gap-h: 0px;
    --gap-v: 16px;
  }

  .symbol-3__sd-1 {
    flex: none;
    padding: 0px 8px;
    width: 100%;
    max-width: 100%;
  }

  .symbol-3__sd-1>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .symbol-3__sd-5 {
    display: flex;
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-92 {
    padding: 0px 16px 24px;
  }

  .sd-92>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .sd-97 {
    padding: 0px 16px;
  }

  .sd-97>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .symbol-4 {
    flex: none;
    gap: 0px 8px;
    width: 100%;
    max-width: 100%;
  }

  .symbol-4>* {
    --gap-h: 8px;
    --gap-v: 0px;
  }

  .symbol-4__sd-11 {
    flex: none;
    width: 98px;
    max-width: 100%;
  }

  .sd-98 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-98>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .sd-99 {
    padding: 8px 16px;
  }

  .sd-99>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-103 {
    display: flex;
  }

  .sd-104 {
    display: none;
  }

  .sd-106 {
    padding: 0px 16px;
  }

  .sd-112 {
    padding: 24px 16px;
  }

  .sd-112>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .symbol-5 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .symbol-5>* {
    --gap-h: 8px;
    --gap-v: 0px;
  }

  .sd-113 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-113>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .sd-116 {
    padding: 8px 16px;
  }

  .sd-116>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-117 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-117>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-117:hover>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-130 {
    padding: 12px 16px;
  }

  .sd-134 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .sd-134>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-134:hover>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }
}

@media (max-width: 320px) {
  .sd-8 {
    flex: none;
    height: 72%;
  }

  .sd-8>* {
    --gap-h: 0px;
    --gap-v: 4px;
  }

  .symbol-1 {
    display: flex;
    gap: 0px 0px;
  }

  .symbol-1>* {
    --gap-h: 0px;
    --gap-v: 0px;
  }

  .sd-9 {
    display: none;
  }

  .sd-10 {
    display: flex;
    margin: 0px 12px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }

  .sd-11 {
    padding: 0px 12px;
  }

  .modal-plan__sd-20 {
    display: none;
  }

  .sd-19 {
    padding: 0px 12px;
  }

  .sd-19>* {
    --gap-h: 4px;
    --gap-v: 0px;
  }

  .sd-24 {
    padding: 0px 2px 4px;
  }

  .sd-24>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-24:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-30 {
    padding: 0px 2px 4px;
  }

  .sd-30>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-30:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-36 {
    padding: 0px 2px 4px;
  }

  .sd-36>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-36:hover>* {
    --gap-h: 0px;
    --gap-v: 2px;
  }

  .sd-41 {
    display: flex;
  }

  .sd-42 {
    display: none;
  }

  .sd-48 {
    display: flex;
  }

  .sd-49 {
    display: none;
  }

  .symbol-3__sd-4 {
    text-align: left;
    justify-content: flex-start;
  }

  .symbol-3__sd-5 {
    display: flex;
  }

  .sd-90 {
    height: auto;
  }

  .sd-97 {
    padding: 0px 8px;
  }

  .sd-97>* {
    --gap-h: 0px;
    --gap-v: 8px;
  }

  .symbol-4 {
    gap: 0px 4px;
  }

  .symbol-4>* {
    --gap-h: 4px;
    --gap-v: 0px;
  }

  .sd-103 {
    display: flex;
  }

  .sd-104 {
    display: none;
  }
}