/* =========================
   JTEKT STINGS：統合スタイル
   - 変数／ベース
   - セクション/グリッド
   - NEW ARRIVAL（スライダー）
   - カテゴリー/プレイヤー
   - NEWS/カスタムバナー
   - KVスライダー（400×400）
   ========================= */

/* ==== Vars / Base ==== */
:root{
  --stings-red:#B40000;
  --stings-yellow:#E3A800; /* JTEKT Yellow */
  --stings-dark:#111;
  --stings-gray:#f5f5f7;
}


/* ==== 共通セクション ==== */
.stings-section{ max-width:1200px; margin:10% auto; padding:0 12px; }
.stings-heading{ text-align:center; margin:0 0 5%; }
.stings-heading span{
  font-weight:900; font-size:28px; letter-spacing:.05em; color:var(--stings-dark);
  border-bottom:4px solid var(--stings-red); padding-bottom:6px;
}
.stings-subttl{
  text-align:center; margin:-6px 0 18px; font-weight:700; color:#333; position:relative; display:block;
}
.stings-subttl::after{
  content:""; width:80px; height:4px; background:#23307a; display:block; margin:6px auto 0; border-radius:2px;
}

/* ==== 汎用ボタン ==== */
.stings-more{ text-align:center; margin-top:12px; }
.stings-btn{
  display:inline-block; padding:8px 18px; border:2px solid var(--stings-dark);
  color:var(--stings-dark); font-weight:800; border-radius:8px; text-decoration:none;
}
.stings-btn:hover{ background:var(--stings-dark); color:#fff; }

/* ==== 共通見出し（NEW ARRIVALに揃える） ==== */
.c-section__heading--title{
  text-align:center; font-size:28px; font-weight:bold; color:#d6004a; margin-bottom:20px;
}
.c-product-list__button{ text-align:center; margin-top:20px; }
.c-product-list__button .c-button{
  background:#d6004a; color:#fff; padding:10px 30px; border-radius:30px; border:0; font-size:16px; font-weight:bold; cursor:pointer; transition:.3s;
}
.c-product-list__button .c-button:hover{ background:#b5003d; }

/* ==== NEWS ==== */
.p-news-title-list{ list-style:none; padding:0; margin:10px 0 0; }
.p-news-title-item{ margin-bottom:8px; font-size:.95rem; line-height:1.5; }
.p-news-title-item a{ color:#000; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
.p-news-title-item a:hover{ border-bottom-color:#333; }

/* ==== Top ロゴ ==== */
.p-top-logo{ font-size:20px; line-height:1.4; max-width:90%; margin:30px auto; text-align:center; }
.p-top-logo a{ display:block; text-decoration:none; color:#333; transition:opacity .2s; }
.p-top-logo a:hover{ opacity:.66; }
@media (min-width:600px){ .p-top-logo{ display:none; } }

/* ==== カスタムバナー ==== */
.p-custom-banner{ margin-top:50px; text-align:center; }
.p-custom-banner__image{ width:100%; }
.p-custom-banner__heading{ font-size:24px; padding:10px 0; }
.p-custom-banner__body{ line-height:1.5; padding:10px 0; }
@media (min-width:600px){
  .p-custom-banner{ display:table; width:100%; margin-top:100px; table-layout:fixed; }
  .p-custom-banner__unit{ display:table-cell; width:50%; vertical-align:middle; }
  .p-custom-banner__unit--text{ padding:10px 20px; }
}
@media (min-width:960px){ .p-custom-banner__heading{ font-size:30px; } }

/* =========================
   NEW ARRIVAL（スライダー／小粒カード）
   ========================= */
.new-item .section-title.index-title{
  text-align:center; font-weight:900; font-size:28px; letter-spacing:.05em; color:var(--stings-dark);
  margin:0 0 18px; position:relative;
}
.new-item .section-title.index-title::after{
  content:""; display:block; width:240px; max-width:70%; height:4px; background:var(--stings-red);
  margin:8px auto 0; border-radius:2px;
}
.new-item-btn{ text-align:center; margin:16px 0 0; }
.new-item-btn a{
  display:inline-block; padding:10px 24px; border:2px solid var(--stings-dark); border-radius:9999px; font-weight:800;
  text-decoration:none; color:var(--stings-dark); transition:.2s;
}
.new-item-btn a:hover{ background:var(--stings-dark); color:#fff; }
/* JTEKTカラー版 */
.new-item-btn a{ border-color:var(--stings-yellow); color:var(--stings-yellow); }
.new-item-btn a:hover{ background:var(--stings-yellow); color:#fff; }

/* スライダー箱 */
/*
.new-item-swiper-container {
  width: 50%;
  margin: 0 0 0 auto;
  padding: 0 0 0 0;
  position: relative;
}*/
.new-item-swiper-wrap{ align-items:stretch; }
.section.new-item .swiper-wrapper{ display:flex !important; will-change:transform; }
.section.new-item .swiper-slide{ flex-shrink:0 !important; padding:0 !important; }

/* カード最小限 */
.ni-card{ width:100% !important; max-width:none !important; padding:4px 0 !important; background:#fff; }
.ni-card__img img{ width:100%; height:auto; display:block; }
.section.new-item .new-item-swiper-box .c-image-box{ aspect-ratio:1/1 !important; overflow:hidden; }
.section.new-item .new-item-swiper-box .c-image-box img{ width:100%; height:100%; object-fit:cover !important; }
.ni-card__name{ display:block; margin:.5em 0 .25em; line-height:1.4; font-weight:700; }
.ni-card__price{ font-weight:800; }

/* 矢印（黄色・中央） */
.section.new-item .swiper-button-prev,
.section.new-item .swiper-button-next{
  display:flex !important; align-items:center; justify-content:center;
  width:36px !important; height:36px !important;
  top:50% !important; transform:translateY(-50%) !important; margin:0 !important; z-index:10 !important;
  color:var(--stings-yellow) !important; background:none !important; opacity:1 !important; pointer-events:auto;
}
.section.new-item .swiper-button-prev{ left:6px !important; right:auto !important; }
.section.new-item .swiper-button-next{ right:6px !important; left:auto !important; }
.section.new-item .swiper-button-prev::after,
.section.new-item .swiper-button-next::after{ content:"" !important; width:24px !important; height:24px !important; display:block !important; background-size:contain !important; background-repeat:no-repeat !important; pointer-events:none; }
.section.new-item .swiper-button-prev::after{ background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='15,4 7,12 15,20' fill='none' stroke='%23E3A800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section.new-item .swiper-button-next::after{ background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,4 17,12 9,20' fill='none' stroke='%23E3A800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ランキング 六角形バッジ */
.c-product-list__index{
  position:absolute; top:10px; left:10px; width:50px; height:50px; color:#111;
  font:900 16px/50px 'Montserrat', sans-serif; text-align:center; z-index:2;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  border-radius:0 !important; box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.c-product-list__index--1{ background:#FFD700; color:#000; }
.c-product-list__index--2{ background:#C0C0C0; color:#000; }
.c-product-list__index--3{ background:#CD7F32; color:#fff; }
.c-product-list__index--default{ background:var(--stings-yellow); color:#fff; }

/* =========================
   CATEGORY（丸アイコン）
   ========================= */
.stings-cat-grid{
  list-style:none; padding:0; margin:12px auto 0; max-width:1200px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px 24px; justify-items:center;
}
@media(max-width:1024px){ .stings-cat-grid{ grid-template-columns:repeat(4,1fr);} }
@media(max-width:768px){ .stings-cat-grid{ grid-template-columns:repeat(3,1fr);} }
.stings-cat-grid a{ text-decoration:none; color:#222; display:flex; flex-direction:column; align-items:center; }
.stings-cat__icon{
  display:flex; align-items:center; justify-content:center;
}
.stings-cat__icon img{ width:72%; height:72%; object-fit:contain; filter:invert(1) brightness(2); }
.stings-cat__label{ margin-top:10px; font-weight:900; letter-spacing:.03em; }

/* カテゴリアイコンの色補正を無効化 */
.stings-cat__icon img{
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* =========================
   PLAYERS（3x3）
   ========================= */
.stings-player-grid{
  list-style:none; padding:0; margin:0 auto; max-width:1200px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.stings-player-grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border:3px solid var(--stings-dark); transition:.2s;
}
.stings-player-grid a:hover img{ border-color:var(--stings-red); }

/* =========================
   KV スライダー（正方形 400×400）
   - 管理画面の $slideshow_html をSwiperのスライドとして横回転
   - 重複指定/競合を排除
   ========================= */
.kv-square-banners{ max-width:100%; margin:20px auto; padding:0 12px; }
.kv-swiper{ position:relative; --kv-size:400px; }
.kv-swiper .swiper-wrapper{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  /* gap: 12px; ← これは削除（SwpierのspaceBetweenを使う） */
}
.kv-swiper .swiper-slide,
.kv-swiper .swiper-wrapper > li{
  list-style:none !important;
  width:var(--kv-size) !important;
  height:var(--kv-size) !important;
  flex:0 0 auto !important;   /* ← ここがポイント */
  overflow:hidden;
  border-radius:6px;
}
.kv-swiper img{
  width:100%; height:100%; object-fit:cover; display:block;
  border:1px solid #eee; background:#fff; transition:transform .25s ease, box-shadow .25s ease;
}
.kv-swiper img:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }

/* ナビ矢印（JTEKT Yellow） */
.kv-swiper .kv-yaji{
  color: var(--stings-yellow) !important;
  background: rgba(255,255,255,0.8); /* ← 背景追加で見やすく */
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
}

.kv-swiper .swiper-button-prev,
.kv-swiper .swiper-button-next{
  display:flex !important;
  pointer-events:auto !important;
}
.kv-swiper .swiper-button-lock{
  display:flex !important;  /* lockが付いても消さない */
}

.kv-swiper .swiper-button-lock {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 矢印を最前面＆クリック可に */
.kv-swiper .kv-yaji{ z-index: 10 !important; pointer-events: auto !important; }


/* 左端から始めるための最終オーバーライド（CSSの末尾に置く） */
/*.section.new-item .new-item-swiper-container{
  width: 50%;
  margin: 0;             
  padding-left: 0;       
  padding-right: 0;
}*/

/* （念のため）スライド内カードの中央寄せをやめたい場合はこれも */
.section.new-item .swiper-slide{
  display:block;         /* 以前入れてた justify-content:center を無効化 */
}


/* NEW ARRIVAL のスライダー箱：ページ幅いっぱい & 左寄せ */
.new-item-swiper-container{
  max-width: 1200px;  /* ← 上限だけ決める */
  width: 100%;        /* ← ページ幅いっぱい使う */
  margin: 0;          /* ← 中央寄せをやめる（左寄せ） */
  padding: 0 12px;    /* ← 内側の巨大な120pxは廃止。控えめに */
}

/* Swiperの幅計算を邪魔する指定を“無効化” */
.section.new-item .swiper-slide{
  display: block;            /* ← flex/center をやめる */
  justify-content: initial;  /* 念のためリセット */
}

.section.new-item .ni-card{
  width: 100%;         /* ← 固定幅・max-width・scale をやめる */
  max-width: none;
  transform: none;
  transform-origin: initial;
  margin: 0;           /* 余計な左右余白があれば消す */
}

/* 画像は正方形でOK（今のままで良いならそのまま）*/
.section.new-item .c-image-box{
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
}
.section.new-item .c-image-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*251015追加*/
/* new-item スライダー内だけ “隠し系” を全て無効化 */
.section.new-item .swiper-wrapper .swiper-slide {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* もし nth-child で 10件目以降を display:none にしている既存CSSがある場合に上書き */
.section.new-item .swiper-wrapper .swiper-slide:nth-child(n+1) {
  display: flex !important;
}

/* 画像が無い商品の “No Image” が高さゼロで白抜けになるのを防止 */
.section.new-item .c-image-box__image--noimage {
  min-height: 160px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
/* top のスライドだけ強制表示 */
.top-slideshow #slider,
.top-slideshow .slider {
  display: block !important;
  visibility: visible !important;
}
/* slick が内部で使う箱を邪魔しない（どこかで display:none を当てているテーマ対策） */
.slick-slider,
.slick-list,
.slick-track {
  display: block !important;
}
/*==================
slick
==================*/
.slick-list {
	padding-top: 80px;
}
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
/* スライダー本体を必ず表示 */
#slider { display: block !important; }
.top-slideshow { position: relative; }

.st-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index: 10; width:44px; height:44px; border:0; border-radius:50%;
  background: rgba(255,255,255,.9); cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.st-arrow--prev{ left:8px; }
.st-arrow--next{ right:8px; }

/* 中身の矢印アイコン（SVG） */
.st-arrow::before{
  content:""; display:block; width:24px; height:24px; margin:0 auto;
  background-repeat:no-repeat; background-size:contain;
}
.st-arrow--prev::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='15,4 7,12 15,20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.st-arrow--next::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9,4 17,12 9,20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 無効時の薄さ（端で無効になる設定の時用） */
.slick-disabled{ opacity:.35; }

/* スライダーがoverflow:hiddenでもクリックできるように（必要なら） */
#slider, .slick-slider{ position:relative; }
.new-item-slider .ni-card {
  padding: 10px;
}

.new-item-slider .slick-prev,
.new-item-slider .slick-next {
  width: 40px;
  height: 40px;
  z-index: 2;
}

.new-item-slider .slick-prev:before,
.new-item-slider .slick-next:before {
  color: #333;
  font-size: 24px;
}
/* スライドの中身 */
.new-item .new-item-slider .ni-card { width: 100%; }

/* 画像をカード幅にフィットさせる（はみ出し防止） */
.new-item .new-item-slider .c-image-box__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* 互換版：paddingで正方形を作る */
.new-item .new-item-slider .c-image-box {
  position: relative;
  padding-top: 100%;     /* 正方形 */
  overflow: hidden;
}
.new-item .new-item-slider .c-image-box__image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* NEW ARRIVAL セクションを他と同じ幅に */
.section.new-item{
  max-width: 1200px;
  margin: 42px auto;   /* 上下の余白はお好みで */
  padding: 0 12px;
}
/* 正方形から比率を少し潰して、高さも上限を設ける */
.new-item .new-item-slider .c-image-box{
  aspect-ratio: 4 / 5;     /* 例：4:5（正方形より低く） */
  max-height: 260px;       /* PCでの上限高さ。好みで下げてもOK */
  width: 100%;
  overflow: hidden;
}
@media (max-width: 1024px){
  .new-item .new-item-slider .c-image-box{ max-height: 220px; }
}
@media (max-width: 768px){
  .new-item .new-item-slider .c-image-box{ max-height: 200px; }
}

/* 画像は枠いっぱいに収めてトリミング */
.new-item .new-item-slider .c-image-box__image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
/* ① NEW ARRIVAL ではグローバルの slick 上余白を打ち消す */
.section.new-item .slick-list{ padding-top: 0 !important; }

/* ② 「高さの決め方」を aspect-ratio に一本化
      （padding法は“aspect-ratio非対応ブラウザ”だけに限定） */

/* まず、padding法を NEW ARRIVAL では基本オフにする */
.new-item .new-item-slider .c-image-box{
  position: relative;
  overflow: hidden;
  /* padding-top: 100%; ← これを効かせない（下の @supports で必要な時だけ使う） */
}

/* 通常は aspect-ratio で高さを決める（ここで最終の見た目を調整） */
.new-item .new-item-slider .c-image-box{
  aspect-ratio: 4 / 5;   /* ← 小さく見せたいなら 4/5 や 1/1 で調整 */
  max-height: 260px;     /* ← PC上限。もっと小さくするなら 220px などに */
  width: 100%;
}
@media (max-width:1024px){ .new-item .new-item-slider .c-image-box{ max-height:220px; } }
@media (max-width: 768px){ .new-item .new-item-slider .c-image-box{ max-height:200px; } }

.new-item .new-item-slider .c-image-box__image{
  position: static;           /* padding法用の absolute を打ち消す */
  inset: auto;                /* 念のためリセット */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* ③ aspect-ratio が使えないブラウザだけ “padding法” に切り替える */
@supports not (aspect-ratio: 1 / 1) {
  .new-item .new-item-slider .c-image-box{
    aspect-ratio: auto;
    max-height: none;
    padding-top: 80%;        /* ← 代替の比率。正方形なら 100% */
  }
  .new-item .new-item-slider .c-image-box__image{
    position: absolute; inset: 0;
  }
}
/*おすすめ商品スライド*/
.st-reco-slider { margin: 12px 0; }
.st-reco-item { padding: 6px; }
.st-reco-card { display:block; text-decoration:none; color:inherit; }
.st-reco-thumb { position:relative; aspect-ratio: 1 / 1; overflow:hidden; background:#f7f7f7; }
.st-reco-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.st-reco-name { margin-top:8px; font-size:14px; line-height:1.4; min-height:2.8em; }
.st-reco-price { margin-top:4px; font-weight:700; }
.st-reco-soldout { margin-top:4px; font-weight:700; color:#999; }
.st-noimage { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:12px; color:#aaa; }
.slick-slide { outline: none; }
.st-arrow { width:36px; height:36px; border:none; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1); border-radius:50%; }

/*ボタン*/
.more {
    margin: 50px auto 0;
    text-align: center;
}
.more a {
    display: inline-block;
    padding: 15px 60px;
    background: #e2ac1d;
    font-weight: bold;
    transition: .5s;
    color: #fff;
    text-decoration: none;
}
.more a:hover {
	background: #f9d26a;;
}
.more a span {
    position: relative;
    margin-right: 14px;
    letter-spacing: .3em;
}
.more a span::after {
    font-family: FontAwesome;
    content: '\f054';
    color: #fff;
    position: absolute;
    top: 3px;
    right: -30px;
    font-size: 11px;
}


/* スマホ共通：パディングを%にして端末差を吸収・imgはblockで行間の“余白ズレ”排除 */
@media (max-width: 599px){
  .stings-cat__icon{
    padding: clamp(5px, 6%, 10px); /* ← 固定pxより安全。端末ごとに自動調整 */
  }
  .stings-cat__icon img{
    display: block;              /* ← inlineのベースライン隙間を消す */
    object-fit: contain;
    object-position: center;
  }
}

/* iPhone系向けに、ほんの少し余白を増やす（Safari/WebKit検出ハック） */
@supports (-webkit-touch-callout: none){
  @media (max-width: 430px){      /* iPhone 14の論理解像度は 390px なので十分カバー */
    .stings-cat__icon{
      padding: clamp(6px, 7%, 12px); /* ← ほんの少しだけ余白を増やす */
    }
  }
}


@media (max-width: 599px){
  /* --- グリッド全体 --- */
  .stings-cat-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 常に3列 */
    column-gap: 2px;  /* ← 隙間をかなり詰める */
    row-gap: 6px;
    padding: 0 4px;
    margin: 0;
    list-style: none;
  }

  .stings-cat-grid li{
    margin: 0;
  }

  /* --- アイコン --- */
  .stings-cat__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;            /* セル幅いっぱいに */
    aspect-ratio: 1 / 1;    /* 正円を維持 */
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    padding: 6px;           /* ← 文字が切れないギリギリの余白 */
    box-sizing: border-box;
  }

  .stings-cat__icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;     /* 切らずに収める */
    object-position: center; /* 中央に配置 */
  }
}

/* 超小型端末向け微調整（任意） */
@media (max-width: 360px){
  .stings-cat-grid{
    column-gap: 1px;
    row-gap: 4px;
    padding: 0 2px;
  }
  .stings-cat__icon{
    padding: 5px;
  }
}


/* ===== INFORMATION（左ライン＋右矢印・ジェイテクト仕様） ===== */
.p-news-title-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-news-title-item{
  border-bottom: 1px solid #eee;
}

.p-news-title-item > a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  position: relative;
  transition: color .2s;
}

/* 左ライン：JTEKTレッド */
.p-news-title-item > a::before{
  content: "";
  width: 3px;
  height: 1.2em;
  background-color: #e60012; /* ← ジェイテクト赤 (#E60012) */
  border-radius: 2px;
  flex-shrink: 0;
}

/* 右矢印：SVG背景で安全に表示 */
.p-news-title-item > a::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: no-repeat center/contain url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999'>\
<path d='M7.5 3.5a1 1 0 0 0 0 1.4L12.1 9 7.5 13.6a1 1 0 1 0 1.4 1.4l5.7-5.7a1 1 0 0 0 0-1.4L8.9 2.1a1 1 0 0 0-1.4 1.4z'/>\
</svg>");
  transition: filter .2s;
}

/* hoverで右矢印も赤く */
@media (hover:hover){
  .p-news-title-item > a:hover{
    color: #e60012;
  }
  .p-news-title-item > a:hover::after{
    filter: brightness(0) saturate(100%) invert(21%) sepia(96%) saturate(7470%) hue-rotate(345deg) brightness(91%) contrast(105%);
  }
}

/* 非リンク（お知らせ文のみ）はグレー化 */
.p-news-title-item > span{
  display: block;
  padding: 12px 0;
  color: #777;
  border-bottom: 1px solid #eee;
}


/* 日付をニュースタイトル左に小さく表示 */
.p-news-date {
  color: #888;
  font-size: 13px;
  margin-right: 8px;
  font-family: "Roboto", "Helvetica Neue", sans-serif;
  letter-spacing: 0.03em;
}

/* hoverで少し目立たせるとクリック感が出る */
.p-news-title-item a:hover {
  color: #E3A800;
}


/* ランキングの商品画像ラッパーの余白・枠・背景を削除 */
.c-product-list__image-wrap,
.c-product-list__image-wrap .c-image-box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* もし正方形用のダミー擬似要素を使っていたら無効化 */
.c-product-list__image-wrap .c-image-box::before {
  content: none !important;
}

/* 画像はブロック化して横幅いっぱいに */
.c-product-list__image-wrap .c-image-box__image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;   /* 画像比率を維持して拡大 */
  object-fit: contain !important;
  background: transparent !important;
}

/* 1) スライダー化されたULのデフォをゼロに */
.js-reco1.slick-slider { margin-bottom: 0 !important; }
.st-reco-slider { margin: 0 !important; padding: 0 !important; }
.st-reco-item   { margin: 0 !important; }

/* 2) “この”セクションの下余白と見出しの余白を詰める（:has対応ブラウザ用） */
.stings-section:has(.js-reco1) {
  margin-bottom: 8px !important;   /* 好みで 4&#8211;12px */
  padding-bottom: 0 !important;
}
.stings-section:has(.js-reco1) .stings-heading {
  margin-bottom: 8px !important;   /* 見出しの下を詰める */
}

/* 3) もっと見るの上余白を最小化 */
.stings-section + .more { margin-top: 35px !important; }

/* 既存の背景色・文字色をリセット */
.c-product-list__index--1,
.c-product-list__index--2,
.c-product-list__index--3 {
  background: none !important;
  color: transparent !important;
  border: 0 !important;
}
/* ランキング番号共通のスタイル */
.c-product-list__index {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 40px;        /* 画像のサイズに合わせて調整 */
  height: 40px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent; /* 数字を消す */
  font-size: 0;       /* 数字の余白も消す */
}

/* 1位アイコン */
.c-product-list__index--1 {
  background-image: url("https://img07.shop-pro.jp/PA01457/201/etc_base64/cmFua2luZzAx.png?cmsp_timestamp=20251117162023") !important;
}

/* 2位アイコン */
.c-product-list__index--2 {
  background-image: url("https://img07.shop-pro.jp/PA01457/201/etc_base64/cmFua2luZzAy.png?cmsp_timestamp=20251117162023") !important;
}

/* 3位アイコン */
.c-product-list__index--3 {
  background-image: url("https://img07.shop-pro.jp/PA01457/201/etc_base64/cmFua2luZzAz.png?cmsp_timestamp=20251117162023") !important;
}

/* 4位アイコン */
.c-product-list__index--4 {
  background-image: url("https://img07.shop-pro.jp/PA01457/201/etc_base64/cmFua2luZzA0.png?cmsp_timestamp=20251117162023") !important;
  border: 0 !important;
}
/* 5位以降を非表示にする */
.c-product-list__index:not(.c-product-list__index--1):not(.c-product-list__index--2):not(.c-product-list__index--3):not(.c-product-list__index--4) {
  display: none !important;
}


/* 選手カテゴリーバナー */
.player-category-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 16px;
}

.player-category-title {
  font-size: 20px;
  font-weight: 700;
  border-left: 4px solid #000;
  padding-left: 10px;
  margin-bottom: 16px;
}

.player-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PC：5列 */
  gap: 8px;
}

.player-category-item {
  display: block;
}

.player-category-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important; /* 角丸禁止 */
}

/* タブレット以下 */
@media screen and (max-width: 1024px) {
  .player-category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* スマホ */
@media screen and (max-width: 768px) {
  .player-category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .player-category-title {
    font-size: 18px;
  }
}