/* ==========================================================================
   Responsive Styles
   SP対応スタイル（@media max-width）
   ========================================================================== */

/* --------------------------------------------------------------------------
   タブレット（1024px以下）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* ===== ヘッダー: TB/SP共通（参考 top-fv-sp2 準拠） ===== */
  /* 配置: ロゴ(左) ｜ CTAボタン + ハンバーガー(右)
     ユーザー指定: top/left/right = 10px、立体的な枠は維持 */
  .site-header {
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .site-header__inner {
    padding: 0 var(--space-md);
    gap: var(--space-sm);
  }

  /* PCナビを非表示 */
  .site-header__nav {
    display: none;
  }

  /* アクション（CTA＋バーガー）を右寄せ */
  .site-header__actions {
    margin-left: auto;
    gap: var(--space-sm);
  }

  .site-header__burger {
    display: flex;
  }

  /* ロゴ: 横幅を縮小可能にし、テキストの2行折り返しを許可（参考デザイン準拠） */
  .site-header__logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .site-header__logo-name {
    white-space: normal;
    font-size: var(--fz-sm);
    line-height: 1.4;
  }

  /* CTAボタン: TB用に小型化 */
  .site-header__cta {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fz-xs);
  }

  .site-drawer {
    padding-top: 80px;
  }

  /* フッター: 余白を詰める（収まらない場合は折り返し） */
  .site-footer__inner {
    flex-wrap: wrap;
    gap: var(--space-xl);
  }

  .site-footer__nav {
    gap: var(--space-xl);
  }

  /* ===== FV: 全面背景画像（写真＋波＋青）＋ オーバーレイ ===== */
  /* TB用背景(fv-bg-tb3.webp)は上部=写真、中央=波カーブ、下部=青。
     コンテンツは下部の青エリアに白文字で配置。
     ::before のブルーオーバーレイで波〜テキスト遷移部分の可読性を確保 */
  .fv {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background-color: transparent;
  }

  /* PC版の ::before（.fv__photo::after のマスク等）を TB 以下では非表示 */
  .fv::before {
    display: none;
  }

  /* 背景画像: TB用に切替。center 40% で波カーブを適切な位置に配置 */
  .fv__photo {
    background-image: url(../images/fv-bg-tb3.webp);
    background-position: center 40%;
  }

  .fv__photo::after {
    display: none;
  }

  /* コンテンツ: 絶対配置で下部に固定（青エリアに重なる） */
  .fv__inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 var(--container-padding) var(--space-xl);
  }

  .fv__content {
    max-width: 100%;
  }

  /* タイトル: 青エリア上のため白文字 */
  .fv__title {
    font-size: var(--fz-2xl);
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  /* 強調語「強く」: ゴールドで強調（青背景上で映える） */
  .fv__title-accent {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #f0c850;
    color: #f0c850;
  }

  .fv__sub {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }

  /* バッジ: 中央寄せ・円形（現状デザイン維持）
     align-items: flex-start でアイコン上端を揃える（PC版 justify-content:center の継承によるズレ防止） */
  .fv__badges {
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
  }

  .fv__badge {
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: var(--space-xs);
  }

  .fv__badge-icon {
    width: 90px;
    height: 90px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
  }

  .fv__badge-icon svg {
    width: 36px;
    height: 36px;
  }

  .fv__badge-label {
    font-size: var(--fz-xs);
    color: var(--color-white);
    text-align: center;
  }

  .fv__scroll {
    display: none;
  }

  /* About: カラム間隔を詰める */
  .about__inner {
    gap: var(--space-xl);
  }

  /* FV2: コンテンツ幅とバッジを詰める */
  .fv2__content {
    max-width: 520px;
  }

  .fv2__badges {
    gap: var(--space-sm);
  }

  .fv2__badge-icon svg {
    width: 30px;
    height: 30px;
  }

  /* Service: カラム間隔を詰める */
  .service__body {
    gap: var(--space-xl);
  }

  /* Features: カラム間隔を詰める */
  .features__block {
    gap: var(--space-xl);
  }

  /* News: 左カラムと間隔を詰める */
  .news__layout {
    grid-template-columns: 220px 1fr;
    column-gap: var(--space-xl);
  }

  /* お知らせ一覧: 2列に */
  .news-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* CTA: バナー内の余白を詰める */
  .cta__content {
    padding: var(--space-lg) var(--space-xl);
  }

  /* 会社概要: 写真カラムを縮小 */
  .message__body {
    grid-template-columns: 240px 1fr;
    gap: var(--space-xl);
  }

  /* ===== サービスページ ===== */
  .sv-nav__link {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--fz-xs);
  }

  /* サービス詳細: 2カラム間隔を詰める（100px→64px） */
  .sv-detail__body {
    gap: var(--space-xl);
  }

  /* アクセス: 2カラム間隔を詰める */
  .access__body {
    gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   スマートフォン（768px以下）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* SPはヘッダーが56pxになるため、全画面高さ計算用の変数を上書き */
  :root {
    --header-height: 56px;
  }

  /* ===== SP見出しサイズ統一（h2: 24px / h3: 20px） ===== */
  .about__title,
  .service__title,
  .features__title,
  .news__title,
  .message__title,
  .company__title,
  .access__title,
  .sv-services__title,
  .sv-flow__title,
  .sv-faq__title {
    font-size: 24px;
  }

  .features__item-title,
  .sv-detail__title {
    font-size: 20px;
  }

  /* 表示制御 */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .sp-br {
    display: block;
  }

  /* セクション余白の調整 */
  .section-padding {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section-padding-sm {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  /* ===== ヘッダー: SP用にさらに縮小（参考 top-fv-sp2 準拠） ===== */
  .site-header {
    height: 56px;
  }

  .site-header__inner {
    padding: 0 var(--space-xs);
  }

  .site-header__logo {
    gap: 6px;
  }

  .site-header__logo-img {
    height: 28px;
  }

  /* ロゴ名: SP用に小さく。max-widthで2行折り返しを制御
     「金子公認会計士・」/ 「税理士事務所」 */
  .site-header__logo-name {
    font-size: 11px;
    max-width: 100px;
  }

  /* CTAボタン: SP非表示 */
  .site-header__cta {
    display: none;
  }

  .site-header__cta .btn-cta__icon svg {
    width: 14px;
    height: 14px;
  }

  /* バーガー: 少し小さく */
  .site-header__burger {
    width: 36px;
    height: 36px;
    gap: 5px;
  }

  .site-header__burger-line {
    width: 20px;
  }

  /* バーガー → ×: SP用のgap(5px)に合わせたtranslateY補正 */
  .site-header__burger.is-active .site-header__burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__burger.is-active .site-header__burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ドロワーのpadding-top */
  .site-drawer {
    padding-top: 75px;
  }

  /* ===== フッター: SP縦積み（frenzy.co.jp参考） ===== */
  .site-footer {
    margin-top: var(--space-xl);
  }

  .site-footer__inner {
    flex-direction: column;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ナビ: 1列縦積み・フル幅 */
  .site-footer__nav {
    flex-direction: column;
    gap: 0;
    order: -1;
    padding: var(--space-lg) 0;
  }

  .site-footer__nav-col {
    border-bottom: 1px solid var(--color-gray-border);
  }

  .site-footer__nav-heading {
    margin: 0;
    padding: 15px 0;
  }

  .site-footer__nav-heading--solo {
    margin-top: 0;
    border-top: 1px solid var(--color-gray-border);
  }

  .site-footer__nav-list {
    margin: 0;
    padding-bottom: var(--space-md);
    gap: 0;
  }

  /* ブランド: 中央寄せ */
  .site-footer__brand {
    max-width: none;
    text-align: center;
    padding: 30px 0 var(--space-lg);
  }

  .site-footer__logo {
    justify-content: center;
  }

  .site-footer__address,
  .site-footer__tel {
    text-align: center;
  }

  /* CTA: フル幅・中央 */
  .site-footer__cta {
    text-align: center;
    padding-bottom: var(--space-xl);
  }

  .site-footer__cta-btn {
    width: 80%;
    max-width: 320px;
  }

  /* ===== FV: SP専用 ===== */
  /* SP: 背景画像の青エリアに白文字で配置。オーバーレイなし。
     タイトルは2行に収まるサイズに縮小。バッジは均等3列 */

  /* SP専用背景画像。top基準で写真と波カーブを見せる */
  .fv__photo {
    background-image: url(../images/fv-bg-sp3.webp);
    background-position: center top;
  }

  /* タイトル: 2行に収まるサイズ＋詰め字間（色はTBから継承＝白） */
  .fv__title {
    font-size: clamp(24px, 7vw, 28px);
    letter-spacing: var(--ls-sm);
    margin-bottom: var(--space-sm);
  }

  /* サブテキスト */
  .fv__sub {
    font-size: 16px;
    margin-bottom: var(--space-md);
  }

  /* バッジ: 3列横並び・均等幅で文字が自然に折り返す */
  .fv__badges {
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }

  .fv__badge {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
  }

  .fv__badge-icon {
    width: 60px;
    height: 60px;
  }

  .fv__badge-icon svg {
    width: 24px;
    height: 24px;
  }

  .fv__badge-label {
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* ===== About: 縦積み（eyebrow→title→text→button の順） ===== */
  .about__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about__content {
    display: contents;
    max-width: none;
  }

  .about__eyebrow {
    order: 1;
    margin-bottom: var(--space-sm);
  }

  .about__title {
    order: 2;
    margin-bottom: var(--space-md);
  }

  .about__text {
    order: 3;
    padding-top: 0;
  }

  .about__actions {
    order: 4;
    margin-top: var(--space-lg);
    text-align: center;
  }

  /* ===== FV2: 縦積み（動画背景＋ブルーオーバーレイ） ===== */
  .fv2 {
    flex-direction: column;
    justify-content: center;
    min-height: 80vh;
    padding: var(--space-xl) 0;
  }

  .fv2__content {
    max-width: 100%;
  }

  /* タイトル: SPでは大幅に縮小 */
  .fv2__title {
    font-size: var(--fz-xl);
    margin-bottom: var(--space-md);
  }

  /* サブテキスト: SPでは一回り小さく */
  .fv2__sub {
    font-size: var(--fz-base);
    margin-bottom: var(--space-lg);
  }

  /* バッジ: アイコンのみ円形内、テキストは円の下に配置（FV v1 と同じ） */
  .fv2__badges {
    gap: var(--space-md);
    justify-content: center;
  }

  .fv2__badge {
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: var(--space-xs);
    flex: 0 0 calc(33.333% - var(--space-md));
  }

  .fv2__badge-icon {
    width: 68px;
    height: 68px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
  }

  .fv2__badge-icon svg {
    width: 28px;
    height: 28px;
  }

  .fv2__badge-label {
    font-size: var(--fz-xs);
    color: var(--color-white);
  }

  /* SPではスクロール誘導を非表示 */
  .fv2__scroll {
    display: none;
  }

  /* ===== Service: 波の重なり回避＋縦積み＋画像上・テキスト下 ===== */

  /* 波(120px)が見出しを覆わないよう、上下のpaddingを十分に確保 */
  .service {
    padding-top: calc(var(--space-xl) + 100px);
    padding-bottom: calc(var(--space-xl) + 100px);
  }

  .service__head {
    margin-bottom: var(--space-lg);
  }

  .service__lead {
    font-size: 16px;
  }

  .service__body {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* ホバー切替の大画像はSPでは非表示 */
  .service__media {
    display: none;
  }

  /* 各サービス: Grid で「番号＋サービス名」を横並び・左寄せ */
  .service__link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-md) 0;
    align-items: start;
  }

  /* 画像: 全幅・最上段 */
  .service__item-image {
    display: block;
    grid-column: 1 / -1;
    order: -1;
    margin-top: 0;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .service__item-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  /* 番号: 左列、サービス名と上端を揃える */
  .service__no {
    grid-column: 1;
    align-self: center;
  }

  /* テキストを展開して名前・説明を個別のグリッド子要素にする */
  .service__text {
    display: contents;
  }

  /* サービス名: 番号の右に横並び・高さを揃える */
  .service__name {
    grid-column: 2;
    margin-bottom: 0;
    align-self: center;
  }

  /* 説明文: 全幅・16px */
  .service__desc {
    grid-column: 1 / -1;
    font-size: 16px;
  }

  /* 詳しく見る: 全幅・右寄せ・テキスト表示 */
  .service__more {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .service__more-text {
    display: inline;
  }

  /* ===== 導線カード（料金プラン / 相談の流れ）: 左テキスト＋右画像 ===== */
  .service__links {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-xl);
  }

  /* テキスト: 左下寄せ、画像より狭く */
  .service-card__body {
    flex: 0 0 40%;
    justify-content: flex-end;
    padding: var(--space-md);
  }

  /* 画像: 幅を広く取る */
  .service-card__media {
    flex: 1 1 60%;
  }

  .service-card__label {
    font-size: var(--fz-sm);
  }

  /* 英文字を小さく */
  .service-card__title {
    font-size: var(--fz-lg);
  }

  /* ===== Features: 縦積み（画像を上、特徴を下に統一） ===== */

  /* SP: 背景あしらいを非表示 */
  .features {
    background-image: none;
  }

  /* SP: 番号と強み名の高さを揃える */
  .features__item-title {
    align-items: center;
  }

  .features__block {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .features__block + .features__block {
    margin-top: var(--space-xl);
  }

  /* 下ブロックも画像を先頭（上）に揃える */
  .features__block--image-right .features__media {
    order: -1;
  }

  /* ===== News: 縦積み（見出し → 記事リスト → もっと見る） ===== */

  /* 波の高さ分の余白を確保（波100px + ボタン余白） */
  .news {
    padding-bottom: calc(var(--space-xl) + 80px);
  }

  .news__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--space-lg);
  }

  /* SP: main のPC用行スパンをリセット（1カラムの自然な流れに） */
  .news__main {
    grid-column: auto;
    grid-row: auto;
  }

  /* 記事: サムネ縮小・余白詰め・矢印非表示 */
  .news__item {
    grid-template-columns: 88px 1fr;
    gap: var(--space-xs) var(--space-sm);
  }

  .news__thumb {
    width: 88px;
  }

  .news__arrow {
    display: none;
  }

  /* 「もっと見る」ボタン: 記事リスト下に中央配置 */
  .news__more {
    margin-top: 0;
    text-align: center;
  }

  /* CTA セクション: 上下パディングを詰める */
  .cta.section-padding {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* ===== CTA: 参考デザイン sp-top-recruit 準拠 ===== */
  /* 全面コラージュ＋青オーバーレイ / 左寄せテキスト / 右に矢印 */
  .cta__collage {
    width: 100%;
  }

  .cta__banner::before {
    background-image: linear-gradient(180deg,
                      rgba(var(--color-primary-dark-rgb), 0.75) 0%,
                      rgba(var(--color-primary-rgb), 0.80) 100%);
  }

  .cta__content {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    justify-items: start;
    gap: var(--space-xs) var(--space-md);
    padding: calc(var(--space-xl) / 2) var(--space-lg);
    text-align: left;
  }

  /* タイトル（CONTACT＋お問い合わせ）を上段に配置 */
  .cta__main {
    grid-column: 1;
    grid-row: 1;
    order: -1;
    justify-self: start;
    align-items: flex-start;
  }

  .cta__title {
    font-size: var(--fz-xl);
  }

  /* キャッチコピーを下段に配置 */
  .cta__catch {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    font-size: 12px;
  }

  .cta__catch .sp-hide {
    display: none;
  }

  /* 矢印ボタン: 右側に表示・2行分中央 */
  .cta__arrow {
    display: flex;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 42px;
    height: 42px;
  }

  /* ===== 下層ページ共通: page-head SP調整 ===== */
  .page-head {
    padding-top: 90px;
    padding-bottom: 40px;
  }

  .page-head__title {
    font-size: 34px;
  }

  /* page-head 英語→日本語間の余白を削除 */
  .page-head__eyebrow {
    margin-bottom: 0;
  }

  /* セクション見出し(h2): 下マージン30pxに統一 */
  .message__head,
  .company__head,
  .access__head,
  .sv-services__head,
  .sv-detail__head,
  .sv-flow__head,
  .sv-faq__head {
    margin-bottom: 30px;
  }

  /* セクション見出し: 英語→日本語間の余白を削除 */
  .service__eyebrow,
  .features__eyebrow,
  .news__eyebrow,
  .message__eyebrow,
  .company__eyebrow,
  .access__eyebrow,
  .sv-services__eyebrow,
  .sv-flow__eyebrow,
  .sv-faq__eyebrow,
  .sv-detail__label {
    margin-bottom: 0;
  }

  /* ===== 会社概要: 縦積み ===== */
  .message__body {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .message__media {
    max-width: 240px;
    margin: 0 auto;
  }

  .company__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .access__body {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* お知らせ一覧: 1列に */
  .news-archive__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .news-archive__card {
    flex-direction: column;
  }

  .news-archive__thumb {
    aspect-ratio: 3 / 2;
  }

  .navigation.pagination .page-numbers {
    min-width: 40px;
    height: 40px;
  }

  /* お知らせ詳細: フォントサイズ調整 */
  .post-single__title {
    font-size: 22px;
  }

  .post-single__content h2 {
    font-size: 20px;
  }

  .post-single__content h3 {
    font-size: 18px;
  }

  /* お知らせ詳細: 前後ナビを縦積み */
  .post-nav__links {
    flex-direction: column;
  }

  .post-nav__link--next {
    text-align: left;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }

  .post-nav__link--list {
    flex-direction: row;
    justify-content: center;
    order: -1;
  }

  /* ===== お問い合わせ ===== */
  .contact.section-padding {
    padding-bottom: 0;
  }

  .contact__form .contact-field-group {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .contact__intro {
    padding: var(--space-md);
    text-align: left;
  }

  .contact__intro p {
    font-size: 14px;
  }

  .contact__form .wpcf7-submit {
    width: 100%;
    min-width: auto;
  }

  /* ===== サービスページ: SP ===== */

  /* アンカーナビ: 縦並び・横幅いっぱい */
  .sv-nav__list {
    flex-direction: column;
  }

  .sv-nav__link {
    justify-content: space-between;
    padding: var(--space-sm);
    font-size: var(--fz-sm);
    border-right: none;
    border-bottom: 1px solid var(--color-gray-border);
  }

  .sv-nav__item:last-child .sv-nav__link {
    border-bottom: none;
  }

  /* サービスセクション見出しの下余白を削除 */
  .sv-services__head.section-padding-sm {
    padding-bottom: 0;
  }

  /* 最初のサービス詳細のpadding-topを0 */
  .sv-services__head + .sv-detail {
    padding-top: 0;
  }

  /* サービス詳細: 1カラム（画像をテキストの前に） */
  .sv-detail__body {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 0;
  }

  .sv-detail__media {
    order: -1;
    max-width: 480px;
  }

  .sv-detail__examples {
    padding: var(--space-md);
  }

  /* コンサルティングカード: 1カラム */
  .sv-consulting__grid {
    grid-template-columns: 1fr;
  }

  /* CTA内余白 */
  .sv-detail__cta-box {
    padding: var(--space-lg) var(--space-md);
  }

  /* 相続相談セクション: テキスト下余白を削除 */
  #inheritance .sv-detail__text {
    margin-bottom: 0;
  }

  /* 料金表: グループを1カラムに */
  .sv-price-group {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .sv-price-group--single {
    max-width: 100%;
  }

  /* 料金表横スクロール対策: Grid子要素の幅を制約し、テーブルを横スクロール可能に */
  .sv-price {
    min-width: 0;
    max-width: 100%;
  }

  .sv-price__table {
    /* 自然幅に任せ、ラッパーの overflow-x: auto で横スクロール可能に */
    width: auto;
    min-width: 100%;
  }

  /* 顧問料金テーブル: 法人・個人列の円を改行させない */
  .sv-price__table td:not(.sv-price__label):not(.sv-price__val) {
    white-space: nowrap;
  }

  /* フロー: パディングを詰める＋ステップ名を縦並び */
  .sv-flow__item {
    padding: 20px;
    border-radius: var(--radius-md);
  }

  .sv-flow__step {
    grid-row: 1;
    grid-column: 1 / 3;
  }

  .sv-flow__name {
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .sv-flow__icon {
    grid-row: 1 / 3;
  }

  .sv-flow__desc {
    grid-row: 3;
  }

  /* FAQ: マークを小さく */
  .sv-faq__q-mark,
  .sv-faq__a-mark {
    width: 30px;
    height: 30px;
    font-size: var(--fz-sm);
  }

  .sv-faq__toggle {
    gap: var(--space-sm);
    padding: 20px 15px;
  }

  .sv-faq__answer[aria-hidden="false"] .sv-faq__a-inner {
    padding-bottom: 20px;
  }
}