/* ===========================================================================
 * biz-trend-mobile.css
 * ─────────────────────────────────────────────────────────────────────────
 * biz-trend.works スマホ版 追記専用 CSS(PC 版 v6/v7 への上書きのみ)
 *
 *   方針:
 *   - PC 版 CSS は 1 行も削らない。@media クエリ内で上書きするだけ。
 *   - 既存 BEM クラス(.bt-*)を維持。新規追加は接頭辞 `.bt-` を継承。
 *   - CSS 変数(--bt-navy-900 等)は参照のみ。再定義しない。
 *   - JS 必須化禁止。ハンバーガー・目次・フッターは <details> で動かす。
 *   - PR 表記(.bt-pr-disclosure)は常時表示(ステマ規制対応・絶対に折り畳まない)。
 *   - タップ領域は最低 44×44px、リンク間隔は最低 8px。
 *
 *   主要ブレイクポイント:
 *     @media (max-width: 768px)  ← 主軸(スマホ全般)
 *     @media (max-width: 480px)  ← iPhone SE / mini など小型機の追加調整
 *
 *   ★ Cocoon 親テーマが投入する .entry-content / .wp-block-* も
 *     必要な箇所だけ body.single-post / body.home スコープで触る。
 * ===========================================================================
 */


/* ===========================================================================
 *  §0  共通(全画面サイズで有効)— 既存 PC を壊さない範囲の安全な追加のみ
 * ===========================================================================
 */

/* prefers-reduced-motion:アニメ抑制 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* フォーカス時のアウトラインは Gold で明示(全サイズ共通)*/
.bt-iconbtn:focus-visible,
.bt-hamburger:focus-visible,
.bt-share__btn:focus-visible,
.bt-nav__link:focus-visible,
.bt-toc__link:focus-visible,
.bt-card:focus-visible,
.bt-feature:focus-visible,
.bt-cta:focus-visible,
.wp-block-button__link:focus-visible,
.bt-aff__cta:focus-visible,
details > summary:focus-visible{
  outline:2px solid var(--bt-gold-500,#C5A164);
  outline-offset:3px;
}


/* ===========================================================================
 *  §1  @media (max-width: 768px) ── スマホ版の主軸
 * ===========================================================================
 */
@media (max-width: 768px){

  /* ---- §1.1  ルート変数の上書き(余白・最大幅) ---- */
  /*    --pad / --read / --grid を圧縮する。これだけで多くのコンテナが追従。 */
  :root{
    --pad:16px;
    --grid:100%;
    --read:100%;
    --max:100%;
  }

  /* ---- §1.2  ベースタイポ ---- */
  /*    本文 17px / 行間 1.8 / 視認性最優先。PC では 15px だった。 */
  body{
    font-size:17px;
    line-height:1.8;
  }


  /* =======================================================================
   *  §2  HEADER(★最優先で直す:壊滅していた箇所)
   * =======================================================================
   */

  /* 2 段ヘッダーは「白上段(ロゴ + 🍔)」+「Navy 下段(横スクロールナビ)」へ */
  .bt-header{
    position:sticky;
    top:0;
    z-index:100;
    box-shadow:0 1px 0 rgba(10,26,51,0.06);
  }

  .bt-header__top{
    height:56px;       /* PC 64px → 56px(タップ性は維持)*/
  }
  .bt-header__inner{
    padding:0 12px;
    gap:8px;
  }

  /* ロゴ:サブテキストは隠す(画面幅が足りない)*/
  .bt-logo__mark{
    font-size:20px;
    letter-spacing:0.10em;
  }
  .bt-logo__sub{
    display:none;
  }

  /* 検索・ログイン・CTA は隠す → ハンバーガー内へ移動 */
  .bt-header__login{
    display:none;
  }
  .bt-header__top .bt-cta{
    display:none;
  }

  /* 残す検索アイコンとハンバーガーは 44×44 を確保 */
  .bt-iconbtn{
    width:44px;
    height:44px;
  }
  .bt-header__actions{
    gap:4px;
  }

  /* ハンバーガーボタン(PC では display:none) */
  .bt-hamburger{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    background:none;
    border:none;
    color:var(--navy);
    cursor:pointer;
    position:relative;
  }
  .bt-hamburger__bar,
  .bt-hamburger__bar::before,
  .bt-hamburger__bar::after{
    content:"";
    display:block;
    width:22px;
    height:2px;
    background:currentColor;
    position:absolute;
    left:11px;
    transition:transform .2s ease, opacity .2s ease;
  }
  .bt-hamburger__bar{top:21px;}
  .bt-hamburger__bar::before{top:-7px;left:0;width:22px;}
  .bt-hamburger__bar::after{top:7px;left:0;width:22px;}

  /* details/summary でハンバーガー展開(JS 不要)*/
  details.bt-mmenu{
    display:block;
    position:relative;
  }
  details.bt-mmenu > summary{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    cursor:pointer;
    color:var(--navy);
    list-style:none;
  }
  details.bt-mmenu > summary::-webkit-details-marker{display:none;}
  details.bt-mmenu > summary::marker{content:"";}

  details.bt-mmenu[open] > summary .bt-hamburger__bar{
    background:transparent;
  }
  details.bt-mmenu[open] > summary .bt-hamburger__bar::before{
    top:0; transform:rotate(45deg);
  }
  details.bt-mmenu[open] > summary .bt-hamburger__bar::after{
    top:0; transform:rotate(-45deg);
  }

  /* メニュー本体:全画面オーバーレイ */
  .bt-mmenu__panel{
    position:fixed;
    inset:56px 0 0 0;          /* ヘッダー下から最下部 */
    background:#fff;
    z-index:99;
    overflow-y:auto;
    padding:24px 20px 80px;
    border-top:1px solid var(--line);
  }
  details.bt-mmenu:not([open]) .bt-mmenu__panel{
    display:none;
  }
  .bt-mmenu__list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .bt-mmenu__item{
    border-bottom:1px solid var(--line-2);
  }
  .bt-mmenu__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:56px;
    padding:0 4px;
    font-size:16px;
    font-weight:500;
    color:var(--navy);
    letter-spacing:0.04em;
  }
  .bt-mmenu__link::after{
    content:"›";
    font-size:20px;
    color:var(--gold);
  }
  .bt-mmenu__cta{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:24px;
    min-height:56px;
    background:var(--navy);
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.06em;
  }

  /* ---- Navy 下段ナビ:横スクロール ---- */
  .bt-nav{
    height:44px;
  }
  .bt-nav__inner{
    padding:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .bt-nav__inner::-webkit-scrollbar{display:none;}
  .bt-nav__list{
    flex-shrink:0;
    padding:0 12px;
    height:44px;
  }
  .bt-nav__link{
    padding:0 14px;
    height:44px;
    font-size:13px;
    white-space:nowrap;
  }
  .bt-nav__date{
    display:none;            /* 日付はスマホでは省く */
  }


  /* =======================================================================
   *  §3  BREADCRUMB
   * =======================================================================
   */
  .bt-crumb__inner{
    padding:0 16px;
    height:36px;
    font-size:11px;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .bt-crumb__inner::-webkit-scrollbar{display:none;}


  /* =======================================================================
   *  §4  HOME(.bt-hero / .bt-feature / .bt-list / .bt-rank)
   * =======================================================================
   */

  /* ---- HERO ---- */
  .bt-hero{
    padding:20px 0 0;
  }
  .bt-hero__inner{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 16px;
  }
  .bt-hero__title{
    font-size:24px;
    line-height:1.5;
    margin-bottom:12px;
  }
  .bt-hero__lead{
    font-size:15px;
    line-height:1.8;
  }
  .bt-hero__media{
    aspect-ratio:16/9;
    background:var(--navy);
  }
  .bt-hero__media img{
    object-fit:contain;        /* 画像比率を維持(背景 Navy で額縁化)*/
  }

  /* ---- FEATURE(注目記事カード・大)1 カラム縦並び ---- */
  .bt-feature-sect{padding:28px 0 8px;}
  .bt-feature-sect__inner{padding:0 16px;}
  .bt-feature-sect__title{font-size:18px;}
  .bt-feature-grid{
    grid-template-columns:1fr;    /* PC は repeat(3,1fr) → スマホは 1 カラム */
    gap:24px;
  }
  .bt-feature{
    display:block;
    min-height:44px;
  }
  .bt-feature__media{
    aspect-ratio:16/9;
    margin-bottom:12px;
  }
  .bt-feature__title{
    font-size:17px;               /* タイトル 17px(本文と同じ視認性ライン)*/
    line-height:1.5;
    margin-bottom:6px;
  }
  .bt-feature__meta{
    font-size:13px;               /* メタ 13px */
  }

  /* ---- LIST(記事一覧)サムネ + タイトル横並び型 ---- */
  .bt-list-sect{padding:32px 0;}
  .bt-list-sect__inner{padding:0 16px;}
  .bt-list-sect__title{font-size:18px;}
  .bt-list{
    grid-template-columns:1fr;
    gap:16px;                     /* カード間 16px(密過ぎず・離れ過ぎず)*/
  }
  .bt-card{
    grid-template-columns:88px 1fr;   /* 画像 左 88px + タイトル 右 */
    gap:14px;
    padding:10px;
    align-items:center;
    min-height:96px;
  }
  .bt-card__media{
    aspect-ratio:1;               /* 正方形サムネ(縦長カードに最適化)*/
  }
  .bt-card__title{
    font-size:14.5px;
    line-height:1.55;
    margin-bottom:6px;
    /* 2 行クランプで高さを揃える */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bt-card__meta{font-size:11.5px;}

  /* ---- RANK ---- */
  .bt-rank-sect{padding:32px 0;}
  .bt-rank-sect__inner{padding:0 16px;}
  .bt-rank-sect__title{font-size:18px;}
  .bt-rank{
    grid-template-columns:1fr;
    gap:12px;
  }
  .bt-rank__item{
    grid-template-columns:28px 72px 1fr;   /* 順位 + サムネ + タイトル 横並びを縦に積む */
    gap:12px;
    padding:10px;
    align-items:center;
    min-height:96px;
  }
  .bt-rank__num{font-size:24px;}
  .bt-rank__title{font-size:13.5px;line-height:1.55;}


  /* =======================================================================
   *  §5  ARTICLE — HEADER(タイトル + リード + メタ)
   * =======================================================================
   */
  .bt-ahead{
    padding:24px 0 12px;
  }
  .bt-ahead__inner{
    padding:0 16px;
  }
  .bt-ahead__eyebrow{
    margin-bottom:14px;
    gap:10px;
  }
  .bt-ahead__cat{
    font-size:10.5px;
    padding:4px 10px;
  }
  .bt-ahead__series{
    font-size:10.5px;
    letter-spacing:0.18em;
  }
  .bt-ahead__title{
    font-size:24px;               /* PC 40px → 24px(★スマホ H1)*/
    line-height:1.45;
    margin-bottom:16px;
  }
  .bt-ahead__lead{
    font-size:15.5px;
    line-height:1.85;
    margin-bottom:20px;
  }
  .bt-ahead__meta{
    font-size:11.5px;
    gap:8px;
    padding-top:14px;
  }


  /* =======================================================================
   *  §6  PR DISCLOSURE(★ステマ規制必須・常時表示)
   * =======================================================================
   *  記事タイトル直下に必ず固定表示。display:none / hidden 化禁止。
   *  PC でも見えているが、スマホでは padding と font を最適化。
   */
  body.single-post .bt-pr-disclosure,
  .bt-pr-disclosure{
    margin:0 16px 16px;
    padding:10px 12px;
    font-size:11.5px;
    line-height:1.6;
    gap:8px;
  }
  .bt-pr-label{
    font-size:10px;
    padding:2px 7px;
  }


  /* =======================================================================
   *  §7  ARTICLE — HERO IMAGE(★16:9 額縁 Navy)
   * =======================================================================
   */
  .bt-hero-img{
    padding:0 0 20px;
  }
  .bt-hero-img__wrap{
    padding:0 16px;
  }
  .bt-hero-img__frame{
    aspect-ratio:16/9;
    background:var(--navy);       /* 額縁 Navy(既存 PC と整合)*/
  }
  .bt-hero-img__frame img{
    width:100%;
    height:100%;
    object-fit:contain;           /* 比率を維持して引き伸ばしを防ぐ */
    object-position:center;
  }
  .bt-hero-img__cap{
    font-size:11px;
    margin-top:8px;
  }


  /* =======================================================================
   *  §8  ARTICLE BODY GRID — 3 カラム → 1 カラム化
   * =======================================================================
   *  PC は [TOC 220px][本文 1fr][右レール 240px]。
   *  スマホは [本文 1fr] 単独。TOC と右レールは記事内/記事末尾に移動。
   */
  .bt-body{
    padding:0 0 40px;
  }
  .bt-body__wrap{
    grid-template-columns:1fr;
    gap:0;
    padding:0 16px;
  }


  /* =======================================================================
   *  §9  TOC ── <details> でアコーディオン化(初期:閉)
   * =======================================================================
   *  HTML 側は <details class="bt-toc"><summary class="bt-toc__head">...
   *  PC 用の sticky 配置はリセットして、記事冒頭にインラインで居座る。
   */
  details.bt-toc,
  .bt-toc{
    position:static;
    margin:8px 0 28px;
    border:1px solid var(--line);
    background:var(--bg-soft);
  }
  details.bt-toc > summary,
  .bt-toc__head{
    padding:14px 16px;
    border-top:none;
    margin-bottom:0;
    cursor:pointer;
    list-style:none;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  details.bt-toc > summary::-webkit-details-marker,
  details.bt-toc > summary::marker{
    display:none;
    content:"";
  }
  /* 開閉アイコン(右端のプラス/マイナス)*/
  details.bt-toc > summary::after{
    content:"＋";
    font-family:"Noto Serif JP",serif;
    font-size:18px;
    color:var(--gold);
    line-height:1;
    flex-shrink:0;
    margin-left:auto;
  }
  details.bt-toc[open] > summary::after{
    content:"−";
  }
  .bt-toc__list{
    padding:0 16px 16px;
    margin:0;
  }
  /* 閉じている時はリスト非表示(<details> が処理) */
  .bt-toc__item{margin:0;}
  .bt-toc__link{
    padding:11px 0 11px 14px;
    font-size:13.5px;
    line-height:1.5;
    min-height:44px;              /* ★ タップ領域 44px */
    display:flex;
    align-items:center;
  }
  .bt-toc__item--h3 .bt-toc__link{
    padding-left:26px;
    font-size:13px;
  }


  /* =======================================================================
   *  §10  ARTICLE BODY ── 本文タイポ + リスト + マーカー
   * =======================================================================
   */
  .bt-article{
    font-size:17px;               /* ★ 17px(視認性最優先)*/
    line-height:1.8;              /* ★ 行間 1.8 */
    color:#1a1a1a;
  }
  .bt-article p{
    margin-bottom:16px;           /* 段落間 16px */
    line-height:1.8;
  }
  .bt-article h2{
    font-size:24px;               /* ★ H2 24px / Navy */
    margin:36px 0 16px;
    padding-bottom:12px;
    border-bottom:2px solid var(--navy);
    line-height:1.4;
  }
  .bt-article h2:first-child{margin-top:8px;}
  .bt-article h3{
    font-size:20px;               /* ★ H3 20px / Navy */
    margin:28px 0 12px;
    padding-left:12px;
    border-left:4px solid var(--gold);
    color:var(--navy);
    line-height:1.5;
  }
  /* H4 はオプションだが指定があったので念のため */
  .bt-article h4{
    font-size:18px;               /* ★ H4 18px */
    font-weight:700;
    color:var(--navy);
    margin:20px 0 8px;
    line-height:1.5;
  }

  .bt-article ul,
  .bt-article ol{
    margin:12px 0 20px 0;
  }
  .bt-article ul li,
  .bt-article ol li{
    padding-left:24px;
    margin-bottom:10px;
    line-height:1.75;
    font-size:16.5px;
  }
  .bt-article ul li::before{top:11px;}


  /* =======================================================================
   *  §11  CALLOUTS / QUOTE / FIG
   * =======================================================================
   */
  .bt-callout{
    margin:24px 0;
    padding:16px 16px 16px 52px;
    font-size:14.5px;
    line-height:1.8;
  }
  .bt-callout::before{
    left:14px;
    top:16px;
    font-size:20px;
  }
  .bt-callout__title{
    font-size:13px;
    margin-bottom:6px;
  }

  .bt-quote{
    margin:28px 0;
    padding:22px 20px 18px;
  }
  .bt-quote::before{
    font-size:48px;
    top:-2px;
    left:12px;
  }
  .bt-quote__text{
    font-size:16px;
    line-height:1.8;
    padding-left:18px;
  }
  .bt-quote__cite{
    padding-left:18px;
    font-size:11.5px;
  }

  .bt-fig{margin:24px 0;}
  .bt-fig__cap{
    font-size:11.5px;
    margin-top:8px;
  }


  /* =======================================================================
   *  §12  TABLE(WP Gutenberg + .bt-table)
   * =======================================================================
   *  - 横スクロール可
   *  - 左列を position:sticky で固定(★モバイル必須)
   *  - 縦書き化阻止(table-layout:auto + min-width + word-break:keep-all)
   *  - 1 行目 Navy ヘッダー化 / 左列 bg-section 強制
   *  - BUG-2026-05-13-013 救済の継続
   */
  .bt-table-wrap,
  .wp-block-table,
  body.single-post .wp-block-table,
  body.single-post figure.wp-block-table{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    margin:24px -16px;            /* 画面いっぱいに広げる */
    padding:0;
    border-left:none;
    border-right:none;
  }

  .bt-table,
  .wp-block-table table,
  body.single-post .wp-block-table table{
    width:auto !important;
    min-width:520px;
    table-layout:auto !important;
    border-collapse:collapse;
    font-size:13px;
  }

  /* 1 行目 = Navy ヘッダー強制 */
  .wp-block-table thead th,
  body.single-post .wp-block-table thead th,
  .bt-table thead th{
    background:var(--navy) !important;
    color:#fff !important;
    padding:12px 14px;
    font-size:12.5px;
    white-space:nowrap;
  }
  /* thead がない時、tbody の 1 行目を Navy 化(WP 既定の救済)*/
  body.single-post .wp-block-table:not(:has(thead)) tbody tr:first-child th,
  body.single-post .wp-block-table:not(:has(thead)) tbody tr:first-child td{
    background:var(--navy) !important;
    color:#fff !important;
    font-weight:600;
  }

  /* セル本体:縦書き阻止 + 行高 */
  .wp-block-table td,
  .wp-block-table th,
  .bt-table td,
  .bt-table th{
    word-break:keep-all !important;
    min-width:7em;
    padding:12px 14px;
    vertical-align:middle;
  }

  /* ★ 左列 sticky:横スクロール時も項目列を固定 */
  .bt-table tbody td:first-child,
  .bt-table thead th:first-child,
  .wp-block-table tbody td:first-child,
  .wp-block-table tbody th:first-child,
  .wp-block-table thead th:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--bt-bg-section,#F4F6F9);
    color:var(--navy);
    font-weight:700;
    box-shadow:1px 0 0 var(--line);
  }
  /* ヘッダー行の左端は Navy ベースを維持 */
  .bt-table thead th:first-child,
  .wp-block-table thead th:first-child{
    background:var(--navy) !important;
    color:#fff !important;
  }
  /* 偶数行(色違い)の左列も bg-section を維持 */
  .bt-table tbody tr:nth-child(even) td:first-child,
  .wp-block-table tbody tr:nth-child(even) td:first-child{
    background:#ebeff5;
  }

  /* 5 文字以内ラベル運用なので強制改行は禁止 */
  .bt-table__product{font-size:13px;}
  .bt-table__product small{font-size:10.5px;}


  /* =======================================================================
   *  §13  CTA BUTTON(WP)— 横幅 100% / 高さ 56px / Navy グラデ
   * =======================================================================
   */
  .wp-block-button,
  body.single-post .wp-block-button{
    margin:28px 0;
  }
  .wp-block-button__link,
  body.single-post .wp-block-button__link{
    display:flex;
    width:100%;
    min-height:56px;
    padding:16px 20px;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.06em;
    border:1px solid var(--navy);
    text-align:center;
    align-items:center;
    justify-content:center;
  }


  /* =======================================================================
   *  §14  AFFILIATE BOX(.bt-aff)— 縦積み
   * =======================================================================
   */
  .bt-aff{
    grid-template-columns:1fr;
    padding:18px;
    gap:14px;
    margin:24px 0;
  }
  .bt-aff__name{font-size:17px;}
  .bt-aff__price b{font-size:18px;}
  .bt-aff__cta-wrap{
    min-width:0;
    width:100%;
  }
  .bt-aff__cta{
    width:100%;
    min-height:56px;
    padding:16px 20px;
    font-size:14px;
  }
  .bt-aff__sub{
    width:100%;
    min-height:44px;
    padding:12px 18px;
  }


  /* =======================================================================
   *  §15  RIGHT RAIL → 記事末尾に降ろす
   * =======================================================================
   *  PC は記事と横並びの sticky 右レールだったが、モバイルでは
   *  「めり込み」を起こすので、構造上は同じ位置のまま position:static で
   *  記事の下に積み上がるようにする。
   *  さらに、楽天スカイスクレイパー(120×500)は display:none。
   */
  .bt-rail{
    position:static;
    top:auto;
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid var(--line-2);
  }
  .bt-rail__ad{
    padding:20px 18px;
    margin-bottom:24px;
  }
  .bt-rail__ad-title{
    font-size:16px;
    line-height:1.6;
  }
  .bt-rail__ad-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 20px;
  }
  .bt-rail__sect{margin-bottom:24px;}
  .bt-rail__rel-item{
    grid-template-columns:72px 1fr;
    gap:12px;
    padding:12px 0;
    min-height:72px;
  }
  .bt-rail__rel-thumb{
    width:72px;
    height:72px;
  }
  .bt-rail__rel-title{
    font-size:13.5px;
    line-height:1.55;
  }
  .bt-rail__rank-item{
    grid-template-columns:24px 1fr;
    padding:11px 0;
    gap:12px;
    min-height:44px;
  }
  .bt-rail__rank-title{font-size:13.5px;}
  .bt-rail__news{
    padding:20px 18px;
  }
  .bt-rail__news-btn{min-height:56px;}


  /* =======================================================================
   *  §16  楽天バナー(既存 .bt-banner-rakuten--* と整合)
   * =======================================================================
   *  ★ 既に WP REST で配置済 → 触らないが、表示制御だけスマホで上書き。
   */
  .bt-banner-rakuten--skyscraper{
    display:none !important;        /* 120×500 はモバイル占有しすぎ */
  }
  .bt-banner-rakuten--full{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:468/60;
    margin:20px auto;
  }
  .bt-banner-rakuten--credit{
    margin:16px auto;
  }


  /* =======================================================================
   *  §17  AUTHOR
   * =======================================================================
   */
  .bt-author{padding:28px 0;}
  .bt-author__inner{
    grid-template-columns:1fr;
    gap:18px;
    padding:24px 16px;
    text-align:left;
  }
  .bt-author__avatar{
    width:72px;
    height:72px;
    font-size:24px;
  }
  .bt-author__name{font-size:19px;}
  .bt-author__role{font-size:12.5px;}
  .bt-author__bio{
    font-size:14px;
    line-height:1.8;
  }
  .bt-author__sns a{
    width:44px;
    height:44px;
  }


  /* =======================================================================
   *  §18  TAGS + SHARE
   * =======================================================================
   *  ★ シェアは 5 ボタン横並び(X / Threads / LINE / コピー / Pocket)
   *    各 56×56 / 間隔 12px(誤タップ防止)
   */
  .bt-meta-bar{padding:20px 0;}
  .bt-meta-bar__inner{
    padding:0 16px;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .bt-tags{
    gap:8px;
  }
  .bt-tag{
    padding:9px 14px;
    font-size:13px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
  }
  .bt-share{
    width:100%;
    justify-content:space-between;
    gap:12px;                        /* ★ 各ボタンの間隔 12px */
    padding-top:12px;
    border-top:1px solid var(--line-2);
  }
  .bt-share__label{display:none;}    /* "SHARE" ラベルは省略 */
  .bt-share__btn{
    width:56px;                      /* ★ 56×56 */
    height:56px;
    flex:1 1 0;
    max-width:56px;
  }
  .bt-share__btn svg{
    width:18px;
    height:18px;
  }


  /* =======================================================================
   *  §19  RELATED ARTICLES — 1 カラム縦並び・96px 高
   * =======================================================================
   */
  .bt-rel-sect,
  .bt-related{
    padding:40px 0;
  }
  .bt-rel-sect__inner{padding:0 16px;}
  .bt-rel-sect__head{margin-bottom:20px;}
  .bt-rel-sect__title{
    font-size:18px;
    gap:10px;
  }
  .bt-rel-cards{
    grid-template-columns:1fr;
    gap:14px;
  }
  .bt-rel-card{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:14px;
    align-items:center;
    min-height:96px;
    background:#fff;
    padding:8px;
    border:1px solid var(--line);
  }
  .bt-rel-card__media{
    margin-bottom:0;
    aspect-ratio:1;
  }
  .bt-rel-card__cat{
    font-size:10.5px;
    margin-bottom:5px;
  }
  .bt-rel-card__title{
    font-size:14px;
    line-height:1.5;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bt-rel-card__meta{font-size:11px;}


  /* =======================================================================
   *  §20  CTA BAND(記事末尾の Navy 帯)
   * =======================================================================
   */
  .bt-ctaband{padding:36px 0;}
  .bt-ctaband__inner{padding:0 16px;}
  .bt-ctaband__title{
    font-size:20px;
    line-height:1.55;
    margin-bottom:20px;
  }
  .bt-ctaband__actions{
    flex-direction:column;
    gap:12px;
  }
  .bt-cta--outline{
    width:100%;
    min-height:56px;
    justify-content:center;
    padding:16px 20px;
  }


  /* =======================================================================
   *  §21  FOOTER — 5 カラム → 1 カラム + <details> アコーディオン
   * =======================================================================
   *  HTML 側で各セクションを <details class="bt-footer__group"> に包む。
   */
  .bt-footer{padding:32px 0 20px;}
  .bt-footer__inner{padding:0 16px;}
  .bt-footer__cols{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:24px;
  }

  /* details/summary アコーディオン */
  details.bt-footer__group{
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
  details.bt-footer__group:first-of-type{
    border-top:1px solid rgba(255,255,255,0.10);
  }
  details.bt-footer__group > summary{
    list-style:none;
    cursor:pointer;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4px;
    font-family:"Noto Serif JP",serif;
    font-size:13.5px;
    color:var(--gold);
    letter-spacing:0.12em;
    font-weight:700;
  }
  details.bt-footer__group > summary::-webkit-details-marker,
  details.bt-footer__group > summary::marker{display:none;content:"";}
  details.bt-footer__group > summary::after{
    content:"＋";
    color:var(--gold);
    font-size:18px;
    line-height:1;
  }
  details.bt-footer__group[open] > summary::after{content:"−";}
  details.bt-footer__group .bt-footer__list{
    padding:4px 4px 16px;
  }
  details.bt-footer__group .bt-footer__list li{
    margin-bottom:0;
  }
  details.bt-footer__group .bt-footer__list a{
    display:flex;
    align-items:center;
    min-height:44px;
    font-size:14px;
    color:rgba(255,255,255,0.75);
  }

  /* ブランドセクション(最上部・畳まない)*/
  .bt-footer__brand{
    font-size:22px;
    margin-bottom:12px;
  }
  .bt-footer__desc{
    font-size:13px;
    line-height:1.85;
    max-width:none;
  }
  /* SNS アイコンは最下部に大きく */
  .bt-footer__sns{
    margin-top:24px;
    gap:14px;
    justify-content:flex-start;
  }
  .bt-footer__sns a{
    width:48px;
    height:48px;
  }
  .bt-footer__sns a svg{
    width:18px;
    height:18px;
  }
  .bt-footer__bot{
    padding-top:20px;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
    font-size:11px;
  }
  .bt-footer__legal{
    flex-wrap:wrap;
    gap:14px;
  }


  /* =======================================================================
   *  §22  タッチ領域の最終救済(誤タップ防止)
   * =======================================================================
   *  ここまでで個別に 44px を確保しているが、念のため横断的に保証。
   */
  .bt-tag,
  .bt-toc__link,
  .bt-rel-card,
  .bt-card,
  .bt-feature,
  .bt-rank__item,
  .bt-mmenu__link,
  details.bt-footer__group > summary,
  details.bt-toc > summary,
  details.bt-mmenu > summary{
    min-height:44px;
  }
}


/* ===========================================================================
 *  §23  @media (max-width: 480px) ── iPhone SE / mini など小型機向け
 * ===========================================================================
 */
@media (max-width: 480px){

  :root{
    --pad:12px;
  }

  /* タイポをわずかに圧縮 */
  .bt-ahead__title{font-size:22px;}
  .bt-article{font-size:16.5px;}
  .bt-article h2{font-size:22px;margin:32px 0 14px;}
  .bt-article h3{font-size:18.5px;}
  .bt-article h4{font-size:17px;}
  .bt-hero__title{font-size:22px;}

  /* 記事ヘッダーのメタは縦並び */
  .bt-ahead__meta{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .bt-ahead__sep{display:none;}

  /* シェアボタンを少し小さく(間隔は維持)*/
  .bt-share__btn{
    width:48px;
    height:48px;
    max-width:none;
  }

  /* TOC のテキスト */
  .bt-toc__link{font-size:13px;}
  .bt-toc__item--h3 .bt-toc__link{font-size:12.5px;}

  /* CTA Band タイトル */
  .bt-ctaband__title{font-size:18px;}

  /* Body の左右余白を少し詰める */
  .bt-body__wrap,
  .bt-hero-img__wrap,
  .bt-ahead__inner,
  .bt-meta-bar__inner,
  .bt-rel-sect__inner,
  .bt-footer__inner{
    padding-left:12px;
    padding-right:12px;
  }
  .bt-pr-disclosure{
    margin-left:12px;
    margin-right:12px;
  }
  /* table も画面端まで広げる */
  .bt-table-wrap,
  .wp-block-table{
    margin-left:-12px;
    margin-right:-12px;
  }

  /* Hamburger メニュー本体の余白も詰める */
  .bt-mmenu__panel{
    padding-left:16px;
    padding-right:16px;
  }
}


/* ===========================================================================
 *  §24  prefers-color-scheme: dark(任意・最小限の救済)
 * ===========================================================================
 *  ★ PC 側は明色固定なので、ここでは「OS ダーク時の白地まぶしさ」だけ緩和。
 *  完全なダークテーマ化は別タスク。本体カラーは触らない。
 */
@media (max-width: 768px) and (prefers-color-scheme: dark){
  body{
    background:#0e0e0f;
  }
  /* 本文コンテナの白地は維持(可読性のため)。
   * ナビ・フッター等の Navy 系はそのまま。
   * 過剰な反転は意図しない誤読を生むため最小限。*/
}



/* ===========================================================================
 * sp_home_extracted.css
 * ---------------------------------------------------------------------------
 * biz-trend.works SP 専用ホームテンプレ用 CSS(モック原典からの抽出)
 *
 *   出典:
 *     - 自動化メディアデザイン総括/スマホ版デザイン/project/mobile/biz-trend-mobile.css
 *       (1210 行・モック原典)
 *     - 自動化メディアデザイン総括/スマホ版デザイン/project/mobile/pc-base.css
 *       (296 行・CSS 変数定義の参照元)
 *   抽出日: 2026-05-16
 *   抽出範囲:
 *     - @media (max-width: 768px) 内の Hero / Featured / List / Rank 系セレクタ
 *     - @media (max-width: 480px) 内の同領域の追加上書き(現状は .bt-hero__title のみ)
 *     - body ベース設定(SP)
 *     - :root の SP 用変数再定義(--pad / --grid / --read / --max)
 *
 *   使い方:
 *     1) 単体ファイルとして読み込む場合は、PC 版 CSS(Cocoon 子テーマ style.css
 *        または pc-base.css 相当)を先に読み込み、その後で本ファイルを後勝ちで
 *        当てる(@media クエリ内のみで上書きするため、PC 表示には無影響)。
 *     2) 親 Claude が biz-trend-mobile.css に §11 として挿入する場合は、本ファイル
 *        の §11 ブロックを既存ファイルの末尾(§22 直前)に追加すれば良い。
 *
 *   原則:
 *     - 数値は推測ゼロ。原典のプロパティ値をそのまま転記。
 *     - !important は原典通り(原典に無い箇所には付与しない)。
 *     - セレクタの specificity は原典のまま。body.front-top-page 等の prefix は
 *       勝手に付けない(必要なら最末尾コメント参照)。
 *     - writing-mode 強制やワイルドカード(*)による全選択は加えない。
 *
 *   ★ 参照する PC 版 CSS 変数(再定義しない / 値は pc-base.css :root より):
 *     --bt-navy-900:#0A1A33;  --bt-navy-800:#14274A;  --bt-navy-700:#1F3A6B;
 *     --bt-gold-500:#C5A164;  --bt-gold-100:#F5EFE0;  --bt-bg-section:#F4F6F9;
 *     --bt-white:#FFFFFF;     --bt-text-primary:#1A1A1A;  --bt-text-muted:#6B7280;
 *     --navy:#0B1F3F;         --navy-2:#142a4f;       --navy-deep:#061528;
 *     --gold:#C9A961;         --gold-2:#a88a3e;       --white:#fff;
 *     --bg-warm:#f6f4ef;      --bg-soft:#faf8f3;      --ink:#1a1a1a;
 *     --ink-2:#3a3a3a;        --muted:#6a6a6a;        --line:#e5e2da;
 *     --line-2:#ecebe6;
 *     (--pad / --grid / --read / --max は SP 用に下記 :root で再定義)
 * ===========================================================================
 */


/* ===========================================================================
 *  §11  @media (max-width: 768px) ── SP ホームテンプレ抽出ブロック
 * ===========================================================================
 */
@media (max-width: 768px){

  /* ---- §11.1  ルート変数の上書き(余白・最大幅) ---- */
  /*    biz-trend-mobile.css §1.1 と同値。--pad / --read / --grid を圧縮し、
   *    多くのコンテナを追従させる。 */
  :root{
    --pad:16px;
    --grid:100%;
    --read:100%;
    --max:100%;
  }

  /* ---- §11.2  ベースタイポ ---- */
  /*    biz-trend-mobile.css §1.2 と同値。本文 17px / 行間 1.8。 */
  body{
    font-size:17px;
    line-height:1.8;
  }


  /* =======================================================================
   *  §11.3  HOME — HERO
   *  (biz-trend-mobile.css §4 ← Hero ブロック)
   * =======================================================================
   */
  .bt-hero{
    padding:20px 0 0;
  }
  .bt-hero__inner{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 16px;
  }
  .bt-hero__title{
    font-size:24px;
    line-height:1.5;
    margin-bottom:12px;
  }
  .bt-hero__lead{
    font-size:15px;
    line-height:1.8;
  }
  .bt-hero__media{
    aspect-ratio:16/9;
    background:var(--navy);
  }
  .bt-hero__media img{
    object-fit:contain;        /* 画像比率を維持(背景 Navy で額縁化)*/
  }


  /* =======================================================================
   *  §11.4  HOME — FEATURE(注目記事カード・大)1 カラム縦並び
   *  (biz-trend-mobile.css §4 ← Feature ブロック)
   * =======================================================================
   */
  .bt-feature-sect{padding:28px 0 8px;}
  .bt-feature-sect__inner{padding:0 16px;}
  .bt-feature-sect__title{font-size:18px;}
  .bt-feature-grid{
    grid-template-columns:1fr;    /* PC は repeat(3,1fr) → スマホは 1 カラム */
    gap:24px;
  }
  .bt-feature{
    display:block;
    min-height:44px;
  }
  .bt-feature__media{
    aspect-ratio:16/9;
    margin-bottom:12px;
  }
  .bt-feature__title{
    font-size:17px;               /* タイトル 17px(本文と同じ視認性ライン)*/
    line-height:1.5;
    margin-bottom:6px;
  }
  .bt-feature__meta{
    font-size:13px;               /* メタ 13px */
  }


  /* =======================================================================
   *  §11.5  HOME — LIST(最新の比較記事)サムネ + タイトル横並び型
   *  (biz-trend-mobile.css §4 ← List ブロック)
   * =======================================================================
   */
  .bt-list-sect{padding:32px 0;}
  .bt-list-sect__inner{padding:0 16px;}
  .bt-list-sect__title{font-size:18px;}
  .bt-list{
    grid-template-columns:1fr;
    gap:16px;                     /* カード間 16px(密過ぎず・離れ過ぎず)*/
  }
  .bt-card{
    grid-template-columns:88px 1fr;   /* 画像 左 88px + タイトル 右 */
    gap:14px;
    padding:10px;
    align-items:center;
    min-height:96px;
  }
  .bt-card__media{
    aspect-ratio:1;               /* 正方形サムネ(縦長カードに最適化)*/
  }
  .bt-card__title{
    font-size:14.5px;
    line-height:1.55;
    margin-bottom:6px;
    /* 2 行クランプで高さを揃える */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bt-card__meta{font-size:11.5px;}


  /* =======================================================================
   *  §11.6  HOME — RANK(週間ランキング)
   *  (biz-trend-mobile.css §4 ← Rank ブロック)
   * =======================================================================
   */
  .bt-rank-sect{padding:32px 0;}
  .bt-rank-sect__inner{padding:0 16px;}
  .bt-rank-sect__title{font-size:18px;}
  .bt-rank{
    grid-template-columns:1fr;
    gap:12px;
  }
  .bt-rank__item{
    grid-template-columns:28px 72px 1fr;   /* 順位 + サムネ + タイトル 横並びを縦に積む */
    gap:12px;
    padding:10px;
    align-items:center;
    min-height:96px;
  }
  .bt-rank__num{font-size:24px;}
  .bt-rank__title{font-size:13.5px;line-height:1.55;}


  /* =======================================================================
   *  §11.7  タッチ領域の最終救済(誤タップ防止)
   *  (biz-trend-mobile.css §22 のうち、ホームに関係する .bt-card /
   *   .bt-feature / .bt-rank__item のみ抜粋)
   * =======================================================================
   */
  .bt-card,
  .bt-feature,
  .bt-rank__item{
    min-height:44px;
  }
}


/* ===========================================================================
 *  §11.8  @media (max-width: 480px) ── iPhone SE / mini など小型機の追加上書き
 *  (biz-trend-mobile.css §23 のうち、ホーム領域に関係する箇所のみ)
 * ===========================================================================
 */
@media (max-width: 480px){

  :root{
    --pad:12px;
  }

  /* Hero タイトルのみ更に圧縮(原典に存在する唯一のホーム関連上書き) */
  .bt-hero__title{font-size:22px;}
}


/* ===========================================================================
 *  ★ 適用範囲メモ
 * ---------------------------------------------------------------------------
 *  本 CSS は page-front-mobile.php(SP 専用ホームテンプレ)のみで使用される
 *  ことを想定している。他テンプレ(single / page / archive)への波及を避けたい
 *  場合は、必要に応じて以下のように body class でスコープを限定することも検討:
 *
 *    body.bt-sp-home .bt-hero{ ... }
 *    body.bt-sp-home .bt-feature-sect{ ... }
 *    ...
 *
 *  ただし specificity が変わるため、PC 版との競合可否を必ず検証してから適用する
 *  こと(2026-05-16『「設計≠検証」恒久ルール』に従い、CSS 編集の完了報告には
 *  実機 fetch / 運営者目視 / visual_regression いずれかの裏付けが必須)。
 * ===========================================================================
 */

/* ===========================================================================
 *   END of biz-trend-mobile.css(2026-05-16 リライト後・§11 モック準拠)
 * ===========================================================================
 */


/* ===========================================================================
 *   §12  v6.0 装飾レイヤー(2026-05-16)
 *   ─────────────────────────────────────────────────────────────
 *   モック §1-§10(機能美)を破壊せず、B2B プレミアム装飾を上乗せ。
 *   - タイポグラフィ:Noto Serif JP の積極使用(見出し / カテゴリ / 数字)
 *   - Gold アクセント:飾り罫 / 見出しバー / グラデ
 *   - Navy グラデ:ヒーロー背景 / 画像額縁
 *   - Tap interactive:カード active scale 0.98
 *   - 画像 lazy fade-in:閲覧体験のリッチ化
 * =========================================================================== */
@media (max-width: 768px) {

  /* (A) 週間ランキング題名の幅拡大 */
  .bt-rank__item {
    grid-template-columns: 24px 64px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
  }
  .bt-rank__thumb { width: 64px; height: 64px; aspect-ratio: 1; overflow: hidden; }
  .bt-rank__title {
    -webkit-line-clamp: 3;
    font-size: 13.5px;
    line-height: 1.55;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    color: var(--navy);
  }
  .bt-rank__cat {
    color: var(--gold-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  /* (B) セクション見出しタイポ強化 + Gold 飾り罫 */
  .bt-hero__eyebrow,
  .bt-feature-sect__en,
  .bt-list-sect__en,
  .bt-rank-sect__en {
    color: var(--gold);
    letter-spacing: 0.18em;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
  }
  .bt-feature-sect__title,
  .bt-list-sect__title,
  .bt-rank-sect__title {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.02em;
    color: var(--navy);
    position: relative;
    padding-left: 14px;
    margin: 0;
  }
  /* 見出し左に Gold 縦バー */
  .bt-feature-sect__title::before,
  .bt-list-sect__title::before,
  .bt-rank-sect__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  }
  /* セクションヘッドの下に細罫 + Gold グラデアクセント */
  .bt-feature-sect__head,
  .bt-list-sect__head,
  .bt-rank-sect__head {
    border-bottom: 1px solid var(--line);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 20px;
  }
  .bt-feature-sect__head::after,
  .bt-list-sect__head::after,
  .bt-rank-sect__head::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  }

  /* (C) ヒーロー本体の装飾 */
  .bt-hero {
    background: linear-gradient(180deg, rgba(11,31,63,0.02) 0%, transparent 100%);
    padding: 24px 0 8px;
  }
  .bt-hero__eyebrow {
    margin-bottom: 12px;
  }
  .bt-hero__title {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--navy);
  }
  .bt-hero__lead {
    color: var(--ink-2);
  }
  /* ヒーロー画像 額縁 + 底部 Navy グラデオーバーレイ */
  .bt-hero__media {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(11,31,63,0.08);
    border-radius: 2px;
  }
  .bt-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(11,31,63,0.18) 100%);
    pointer-events: none;
  }

  /* (D) bt-card / bt-feature の Tap interactive + 装飾 */
  .bt-card,
  .bt-feature {
    transition: transform .15s ease, background .15s ease;
  }
  .bt-card:active,
  .bt-feature:active {
    transform: scale(0.99);
    background: var(--bg-warm);
  }
  .bt-card__media,
  .bt-feature__media {
    overflow: hidden;
    border-radius: 3px;
    background: var(--bg-warm);
  }
  .bt-feature__media {
    box-shadow: 0 2px 10px rgba(11,31,63,0.06);
  }
  .bt-card__cat,
  .bt-feature__cat {
    color: var(--gold-2);
    font-family: "Noto Serif JP", serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 4px;
  }
  .bt-feature__cat {
    margin: 12px 0 4px;
  }
  .bt-card__title,
  .bt-feature__title {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: var(--navy);
  }

  /* (E) ランキング番号のリッチ化(順位ごと色分け + Serif) */
  .bt-rank__num {
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    font-size: 18px;
    color: var(--gold);
    text-align: center;
    line-height: 1;
  }
  .bt-rank__item--1 .bt-rank__num { color: var(--gold); font-size: 22px; }
  .bt-rank__item--2 .bt-rank__num { color: #9a9a9a; font-size: 20px; }
  .bt-rank__item--3 .bt-rank__num { color: #b87333; font-size: 19px; }

  /* (F) 画像 lazy fade-in */
  @keyframes bt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .bt-hero__media img,
  .bt-feature__media img,
  .bt-card__media img,
  .bt-rank__thumb img {
    animation: bt-fade-in .4s ease-out;
  }
}


/* ===========================================================================
 *   §13  v6.1 サムネコンパクト化(2026-05-16)
 *   ─────────────────────────────────────────────────────────────
 *   フィードバック「サムネを無理やり上下に広げる必要なし」対応。
 *   16:9 → max-height 頭打ちで縦スクロール量を削減。
 *   サムネ自体のサイズは変えずに、画像の "縦比率" だけ抑制。
 * =========================================================================== */
@media (max-width: 768px) {

  /* ヒーロー画像:16:9 のまま画面幅依存だと大きすぎる → max-height 200px で頭打ち */
  .bt-hero__media {
    aspect-ratio: 16/9;
    max-height: 200px;
    overflow: hidden;
  }
  .bt-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* bt-feature(注目特集 3 枚)の画像:max-height で頭打ち */
  .bt-feature__media {
    aspect-ratio: 16/9;
    max-height: 180px;
    overflow: hidden;
  }
  .bt-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}