.l-content {
  width: 1216px;
  margin-top: 56px;
}
.l-content h3 {
  margin-bottom: 32px;
}
.p-carlist-related-car__list {
  width: 1216px;
  height: fit-content;
}
.p-carlist-related-car__item {
  width: 280px !important;
  min-height: 285px;
  border-radius: 16px;
  background-color: #ffffff;
  margin-right: 32px;
}
/* カード類ホバーアクション */
.p-carlist-related-car__item:hover {
  transform: scale(1.02);
  box-shadow: 2px 4px 16px 0 rgba(0, 0, 0, 0.2);
  transition-property: all;
  transition-duration: 0.2s;
}
.p-carlist-related-car__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.p-carlist-related-car__image {
  width: 272px;
  height: 170px;
  margin-bottom: 8px;
}
.p-carlist-related-car__image img {
  width: 272px;
  height: 166px;
  border-radius: 12px;
  margin: 0 4px 8px 4px;
  padding-top: 4px;
  object-fit: cover;
}
.p-carlist-related-car__title {
  height: fit-content;
  font-weight: bold;
  font-size: 16px;
  color: #222222;
  margin: 12px 8px 16px 8px;
}
.text-right {
  text-align: right;
  height: 27px;
}
.text-right a {
  font-weight: 700;
  font-size: 18px;
  color: #222222;
  text-decoration: none;
}
.c-link-arrow-02::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../../resource/img/icon/icon_arrow_right.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-bottom: 5px;
}
.p-carlist-related-car__list__arrow {
  width: 40px;
  position: absolute;
  z-index: 10;
}
.magazine-list__arrow {
  width: 40px;
  position: absolute;
  z-index: 10;
}
.next-arrow-nc {
  bottom: 50%;
  right: 0;
  transform: translate(50%, 50%);
  cursor: pointer;
}
.next-arrow-nc:hover {
  opacity: 0.7;
}
.prev-arrow-nc {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.prev-arrow-nc:hover {
  opacity: 0.7;
}
.carlist-card__slider {
  width: 1216px;
  height: 544px;
}
.next-arrow {
  bottom: 50%;
  right: 0;
  transform: translate(50%, 50%);
  cursor: pointer;
}
.prev-arrow {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.magazine-list__arrow .images {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
#top-nearcar h2 {
  font-size: 32px;
  line-height: 32px;
  padding-top: 2px;
}
@media screen and (max-width: 767px) {
  .l-content {
    width: 100%;
    padding: 0 0 0 min(calc(16px + (100vw - 374px) / 2), 24px) !important;
    height: 302px;
    margin-top: 48px;
    margin-bottom: 36px;
  }
  .l-content h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .p-carlist-related-car__list {
    width: 100%;
  }
  .p-carlist-related-car__item {
    width: 212px !important;
    min-height: 235px;
    border-radius: 16px;
    background-color: #ffffff;
    margin-right: 12px;
  }
  .p-carlist-related-car__image {
    width: 204px;
    height: 125px;
    margin-bottom: 8px;
  }
  .p-carlist-related-car__image img {
    width: 204px;
    height: 125px;
    border-radius: 12px;
    margin: 4px 4px 8px 4px;
  }
  .p-carlist-related-car__title {
    height: 42px;
    font-weight: bold;
    font-size: 14px;
    color: #222222;
    margin: 0 8px 16px 8px;
  }
  .text-right {
    text-align: left;
    height: 24px;
    margin-top: 16px;
  }
  .text-right a {
    font-weight: 700;
    font-size: 14px;
    color: #222222;
    text-decoration: none;
  }
  .c-link-arrow-02::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../../resource/img/icon/icon_arrow_right.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-bottom: 2px;
  }
}

/* about.html .js-json-slider-related (Swiper 12.x) のスタイル
   - 親 .p-carlist-related-car__list は detail.css で display:flex が当たるため
     ここで display:block に上書きする (Swiper は外側を block 前提で
     .swiper-wrapper を flex として展開する)
   - slide 幅は .p-carlist-related-car__item { width: 280px !important } を
     採用する。Swiper の .swiper-slide { width: 100% } は !important で
     打ち消される
   - slide 間 gap は .p-carlist-related-car__item の margin-right
     (PC:32 / SP:12) で表現する。Swiper の slidesSizesGrid は
     boundingWidth + computed marginRight で算出されるため、JS 側の
     spaceBetween と二重カウントしないよう spaceBetween: 0 を維持すること
   - SP (max-width: 767) では navigation を非表示にする */

.js-json-slider-related.swiper {
  display: block;
  position: relative;
  overflow: visible;
}

/* 末尾 slide の margin-right を 0 に打ち消す。Swiper の slidesSizesGrid は
   computed marginRight を含めるため、これが無いと余分にスクロール可能になる。 */
.js-json-slider-related .swiper-wrapper > .p-carlist-related-car__item:last-child {
  margin-right: 0;
}

/* Swiper 12 が button 内に挿入する <svg.swiper-navigation-icon> を抑止 */
.js-json-slider-related .swiper-navigation-icon {
  display: none;
}

.js-json-slider-related .swiper-button-prev::after,
.js-json-slider-related .swiper-button-next::after {
  /* Swiper デフォルトの ::after 矢印テキストを抑止し、
     .prev-arrow / .next-arrow の背景画像装飾だけを表示する */
  content: none;
}

/* 両端到達時 (.swiper-button-disabled) / 全 slide が container に収まる時
   (.swiper-button-lock) はボタンを非表示にする (slick 旧挙動 + TOP slider 群と整合)。
   bundled CSS の .swiper-button-lock { display: none } は detail.css の
   .btn-hvr-left { display: block } と同 specificity で load 順負けするため、
   higher specificity (0,2,0) で打ち消し直す。 */
.js-json-slider-related .swiper-button-disabled {
  display: none;
}

/* CarDetail で読み込まれる gazoo360_edit-v2.css のグローバル
   .swiper-button-prev/next が位置 (top:50%, left/right:10px, margin-top:-22px) と
   background-size (27px 44px) を強制してくる。.js-json-slider-related スコープ
   (specificity 0,2,0) で衝突プロパティだけ打ち消し、残りは既存
   .next-arrow / .prev-arrow / .btn-hvr-{left,right} / :has() rule の
   cascade に任せる。 */
.js-json-slider-related .swiper-button-prev,
.js-json-slider-related .swiper-button-next {
  margin: 0;
  background-size: auto;
}
.js-json-slider-related .swiper-button-prev {
  left: 0;
  right: auto;
}
.js-json-slider-related .swiper-button-next {
  top: auto;
  left: auto;
  right: -20px;
}

@media (max-width: 767px) {
  .js-json-slider-related .swiper-button-prev,
  .js-json-slider-related .swiper-button-next {
    display: none;
  }
}

/* CarDetail でも使用される .js-nearCarJsonSlider 用 Swiper override。
   同セレクタの主ルールは style_top-page.css に置いてあるが、CarDetail は
   style_top-page.css を読み込まないため、ここに必要分を複製する。 */
.js-nearCarJsonSlider.swiper {
  overflow: visible;
}

.js-nearCarJsonSlider .swiper-wrapper > .carlist-card__cards:last-child {
  margin-right: 0;
}

/* CarDetail では gazoo360_edit-v2.css のグローバル .swiper-button-prev/next が
   背景画像 (SVG 矢印) + 位置 (top:50%, left/right:10px, margin-top:-22px, 27x44) を
   強制してくる。.js-nearCarJsonSlider スコープ (specificity 0,2,0) で衝突
   プロパティだけ打ち消し、残りは既存 .slickSlide__arrow / .prev-arrow /
   .next-arrow (detail.css / swiper_slider_related.css) の cascade に任せる。 */
.js-nearCarJsonSlider .swiper-button-prev,
.js-nearCarJsonSlider .swiper-button-next {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  background-image: none;
}
.js-nearCarJsonSlider .swiper-button-prev {
  /* gazoo360 left:10px → .prev-arrow の left:0 を効かせる */
  left: 0;
  right: auto;
  /* .slickSlide__arrow の bottom:56% を打ち消し、.prev-arrow の top:50% で配置 */
  bottom: auto;
}
.js-nearCarJsonSlider .swiper-button-next {
  /* gazoo360 top:50% を打ち消し、.slickSlide__arrow の bottom:56% を効かせる */
  top: auto;
  /* gazoo360 right:10px → .next-arrow の right:-20px を効かせる */
  left: auto;
  right: -20px;
}

.js-nearCarJsonSlider .swiper-button-prev::after,
.js-nearCarJsonSlider .swiper-button-next::after {
  content: none;
}

.js-nearCarJsonSlider .swiper-navigation-icon {
  display: none;
}

.js-nearCarJsonSlider .swiper-button-disabled {
  display: none;
}

@media (max-width: 767px) {
  .js-nearCarJsonSlider .swiper-button-prev,
  .js-nearCarJsonSlider .swiper-button-next {
    display: none;
  }
}

/* 関連記事 slider (Swiper 12.x) override.
   common/related-article-slider.js が runtime で server 注入 HTML に Swiper 用
   クラスを付与した結果、以下の構造になる:
     <div class="p-carlist-related-car swiper">
       <ul class="p-carlist-related-car__list js-carlist-related-car swiper-wrapper">
         <li class="p-carlist-related-car__item swiper-slide">…</li>
       </ul>
       <div class="swiper-button-prev magazine-list__arrow prev-arrow …"></div>
       <div class="swiper-button-next magazine-list__arrow next-arrow …"></div>
     </div>
   container 側を一意に識別できるセレクタは .p-carlist-related-car.swiper の
   組み合わせ (.p-carlist-related-car 単独で当てている既存ルールは無い)。 */

.p-carlist-related-car.swiper {
  /* 矢印 (.prev-arrow { left:0; transform:translate(-50%,-50%) } など) が
     container の外側に半分はみ出るため overflow:visible にする
     (interview / nearcar slider と同じ方針)。
     slide 自体は祖先側 (.l-content など) の overflow / レイアウトで clip される。 */
  overflow: visible;
}

/* .p-carlist-related-car__list { width: 1216px } を打ち消し、
   Swiper bundle の .swiper-wrapper { width: 100% } と等価にする。 */
.p-carlist-related-car.swiper .p-carlist-related-car__list.swiper-wrapper {
  width: auto;
}

/* 末尾 slide の margin-right を 0 化。Swiper の slidesSizesGrid は computed
   marginRight を含めて算出するため、これが無いと末尾の余白分だけ余計に
   スクロール可能になる。 */
.p-carlist-related-car.swiper .swiper-wrapper > .p-carlist-related-car__item:last-child {
  margin-right: 0;
}

/* about.css の .p-carlist-related-car__list:has(.magazine-list__arrow):has(.next-arrow)
   系ルールは「矢印が <ul> の内側にある」前提。本 slider では矢印は <ul> の sibling に
   配置されるためマッチしないので、同等の装飾を sibling 配置向けに書く。 */
.p-carlist-related-car.swiper .magazine-list__arrow.next-arrow,
.p-carlist-related-car.swiper .magazine-list__arrow.prev-arrow {
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
}
.p-carlist-related-car.swiper .magazine-list__arrow.next-arrow {
  background-image: url('/U-Car/resource_new/img/top/top-slider/carousel_next.png');
}
.p-carlist-related-car.swiper .magazine-list__arrow.prev-arrow {
  background-image: url('/U-Car/resource_new/img/top/top-slider/carousel_prev.png');
}
.p-carlist-related-car.swiper .magazine-list__arrow.next-arrow:hover {
  opacity: 1;
  background-image: url('/U-Car/resource_new/img/top/top-slider/carousel_next-hover.png');
}
.p-carlist-related-car.swiper .magazine-list__arrow.prev-arrow:hover {
  opacity: 1;
  background-image: url('/U-Car/resource_new/img/top/top-slider/carousel_prev-hover.png');
}

/* gazoo360_edit-v2.css のグローバル .swiper-button-prev/next が
   位置 (top:50%, left/right:10px, margin-top:-22px) と background-size を強制
   してくるため、衝突プロパティを打ち消して既存 .prev-arrow / .next-arrow の
   配置 (top:50%/left:0 + translate / bottom:50%/right:0 + translate) に揃える。 */
.p-carlist-related-car.swiper .swiper-button-prev,
.p-carlist-related-car.swiper .swiper-button-next {
  margin: 0;
  background-size: auto;
}
.p-carlist-related-car.swiper .swiper-button-prev {
  left: 0;
  right: auto;
}
.p-carlist-related-car.swiper .swiper-button-next {
  top: auto;
  left: auto;
  right: -20px;
}
.p-carlist-related-car.swiper .swiper-button-prev::after,
.p-carlist-related-car.swiper .swiper-button-next::after {
  /* Swiper デフォルトの ::after 矢印テキストを抑止 */
  content: none;
}
.p-carlist-related-car.swiper .swiper-navigation-icon {
  /* Swiper 12 が button 内に挿入する <svg.swiper-navigation-icon> を抑止 */
  display: none;
}
.p-carlist-related-car.swiper .swiper-button-disabled {
  /* 両端到達時 / 全 slide が container に収まる場合は navigation を非表示にする */
  display: none;
}

@media (max-width: 767px) {
  /* SP では navigation を非表示 (touch swipe での操作を前提) */
  .p-carlist-related-car.swiper .swiper-button-prev,
  .p-carlist-related-car.swiper .swiper-button-next {
    display: none;
  }
}

/* SearchResult「お近くのおすすめのクルマ」slider (.js-jsonSlider, Swiper 12.x) override.
   slide は <div class="carlist-card__cards"> をそのまま採用 (search_result.js 側で
   slideClass: 'carlist-card__cards' 指定)、矢印は <div.swiper-button-prev/next> の
   sibling 配置。矢印クラス .magazine-list__arrow + .prev-arrow-nc / .next-arrow-nc は
   維持。矢印中身は UCarTop と同じ <img class="images / images-hover"> 2 枚 swap で、
   hover 切替は .btn-hover ルール (本ブロック末尾) が制御する。 */

.js-jsonSlider.swiper {
  overflow: visible;
}

/* 末尾 slide の margin-right を 0 化。Swiper の slidesSizesGrid は computed
   marginRight を含めて算出するため、これが無いと末尾の余白分だけ余計に
   スクロール可能になる。 */
.js-jsonSlider .swiper-wrapper > .carlist-card__cards:last-child {
  margin-right: 0;
}

/* Swiper bundle (12.x) のデフォルト挙動を必要分だけ打ち消す:
   - display:flex → block。<img class="images / images-hover"> 2 枚を縦並びにし、
     .images-hover の translateY(-100%) で .images の上に重ねるレイアウト前提のため、
     flex 横並びだと 2 枚が別位置で同時に見えてしまう。明示的に block 化する
     (UCarTop style_top-page.css の同等ブロックと同方針)。
   - margin-top:-22px (= -size/2、縦中央寄せ用) → 既存 .next-arrow-nc{bottom:50%}
     を効かせるため 0 に。
   - background-image: search_result.css L4608+ の .magazine-list__arrow.prev-arrow-nc 等が
     設定する url(...) を <img> 採用に伴い無効化。
   width / height は .magazine-list__arrow (search_result.css L4619) が 40px を提供するが、
   display:block 化に合わせ明示しておくと UCarTop の対応ブロックと意図が揃う。
   left / right / cursor は .prev-arrow-nc / .next-arrow-nc (本ファイル上部) が提供。 */
.js-jsonSlider .swiper-button-prev,
.js-jsonSlider .swiper-button-next {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  background-image: none;
}

.js-jsonSlider .swiper-button-next {
  /* Swiper bundle の top:50% を clear し、.next-arrow-nc の bottom:50% を効かせる */
  top: auto;
}

.js-jsonSlider .swiper-button-prev::after,
.js-jsonSlider .swiper-button-next::after {
  /* Swiper デフォルトの ::after 矢印テキストを抑止 */
  content: none;
}

.js-jsonSlider .swiper-navigation-icon {
  /* Swiper 12 が button 内に挿入する <svg.swiper-navigation-icon> を抑止 */
  display: none;
}

.js-jsonSlider .swiper-button-disabled {
  /* 両端到達時 / 全 slide が container に収まる場合は navigation を非表示にする */
  display: none;
}

/* <img class="images-hover"> を <img class="images"> の真上に重ね、hover で swap する。
   style_top-page.css に同等の .btn-hover img.images / images-hover ルールがあるが、
   SearchResult ページでは style_top-page.css を読み込まないため、.js-jsonSlider スコープで複製する。
   命名は UCarTop と同じで反転している点に注意:
     .images       = hover 時に表示される画像 (carousel_prev-hover.png 等)
     .images-hover = 通常表示される画像 (carousel_prev.png 等) を translateY(-100%) で .images の上に重ねる */
.js-jsonSlider .magazine-list__arrow .images,
.js-jsonSlider .magazine-list__arrow .images-hover {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

.js-jsonSlider .btn-hover img.images-hover {
  transform: translate(0%, -100%);
  display: block;
}

.js-jsonSlider .btn-hover:hover img.images-hover {
  display: none;
}

.js-jsonSlider .btn-hover:hover img.images {
  display: block;
}

@media (width <= 767px) {
  /* SP では navigation を非表示 (touch swipe での操作を前提) */
  .js-jsonSlider .swiper-button-prev,
  .js-jsonSlider .swiper-button-next {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /* swiper_slider_related.css L103 の .carlist-card__slider { width: 1216px } が
     後ロードで search_result_slider.css の SP 100% を上書きしてしまうため、
     .js-jsonSlider スコープ (0,2,0) で SP 時の幅を取り戻す */
  .js-jsonSlider.carlist-card__slider {
    width: 100%;
  }
}