/* ============================================================
 * uacar : UA カテゴリ／タイプ別 グリッドバナー（管理画面 #content_banner 登録用）
 *   - PC: 横並びグリッド
 *   - SP(<=767px): Swiper 化（トップの ua-tc-spotlight と同様のUI）
 *   - HTML は管理画面登録、挙動は uacar.js（同ディレクトリ相当の js/uacar.js）
 * ============================================================ */

/* このバナーが入っている #content_banner だけ 1024px 制限を解除 */
#content_banner:has(.uacar){width:auto;max-width:none}
.uacar *{box-sizing:border-box}
.uacar{margin:0;min-width:0}
.uacar__list{display:flex;gap:4px;max-width:1400px; margin: 32px auto 48px;padding:0;list-style:none;text-align:left}
.uacar__list>li{min-width:0;width: 100%;font-size:14px;color: #1d1d1d;line-height:1.6;word-break:auto-phrase}
.uacar__list img{display:block;width:100%;height:auto;margin:0 0;background:#dfe3e7}
.uacar__list b{display:block;margin: 6px 0 0 0;font-size:16px}
.uacar__list a{text-decoration:none;color:inherit; word-break: break-word;display:block;transition:opacity .2s}
.uacar__list a:hover{opacity:.8}

/* ▼ SP: Swiper化（トップの ua-tc-spotlight と同様のUI） */
.uacar--swiper{position:relative}
.uacar__viewport{overflow:hidden}
@media (max-width:767px){
  /* Swiper初期化前のファーストペイントでも2枚表示にしておく（JS読込までの一瞬、PC用4枚グリッドが見えるのを防ぐ） */
  .uacar:not(.uacar--swiper){margin:32px auto;padding:0 15px}
  .uacar:not(.uacar--swiper) .uacar__list{gap:2px;margin:0;max-width:none;overflow:hidden}
  .uacar:not(.uacar--swiper) .uacar__list>li{flex:0 0 calc((100% - 2px)/2)}
  .uacar--swiper .uacar__list{gap:0;max-width:none;margin:0}
  .uacar.uacar--swiper{margin: 32px auto;padding: 0 15px} /* 左右余白はoffsetではなくpaddingで確保（ピッタリ2枚表示） */
  /* SPはタイトル14px・キャプション12px（商品一覧の商品名と同程度） */
  .uacar__list>li{font-size:12px}
  .uacar__list b{font-size:14px}
  /* 隣のカードの説明文が近すぎるため、説明文だけ右に8pxの余白（画像は打ち消して従来どおり2px間隔、タイトルも打ち消して折り返しを増やさない） */
  .uacar__list a{padding-right:8px}
  .uacar__list a img{width:calc(100% + 8px);max-width:none;margin-right:-8px}
  .uacar__list a b{margin-right:-8px}
}
/* ページネーション（白背景向けに濃色ピル） */
.uacar__nav.swiper-pagination{position:static;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}
.uacar__nav .swiper-pagination-bullet{width:6px;height:6px;background:#cfcfcf;opacity:1;border-radius:999px;margin:0 !important;transition:width .4s ease,background-color .3s ease}
.uacar__nav .swiper-pagination-bullet-active{width:24px;background:#1d1d1d}
/* アロー（前へ/次へ）— spotlightと同じチェブロン */
.uacar__arrow{position:absolute;top:0;bottom:0;margin:auto 0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;z-index:2;transition:background .2s}
.uacar__arrow::before{content:"";display:block;width:8px;height:8px;border-top:1.5px solid #1d1d1d;border-right:1.5px solid #1d1d1d}
.uacar__arrow--prev{left:5px}
.uacar__arrow--prev::before{transform:rotate(-135deg);margin-left:3px}
.uacar__arrow--next{right:5px}
.uacar__arrow--next::before{transform:rotate(45deg);margin-right:3px}
/* 先頭表示時の「前へ」・最終表示時の「次へ」は非表示（SwiperがisDisabledを自動付与） */
.uacar__arrow.is-disabled{display:none}

/* ============================================================
 * ▼ 画像1枚パターン（.uacar__single）
 *   - PC: 最大 1400px 幅の横長画像（#content_banner の幅制限は先頭の :has で解除済み）
 *   - SP: <picture> の <source media="(max-width:767px)"> でリサイズ画像に自動切替
 *   画像の切替は HTML 側 <picture> で行うため、ここでは幅とセンタリングのみ。
 * ============================================================ */
.uacar__single{margin:0 auto;max-width:1400px}
.uacar__single a{display:block}
.uacar__single picture{display:block}
.uacar__single img{display:block;width:100%;height:auto}