@charset "utf-8";
/* ==========================================================================
   グリッドバナー (ECS_IC-2618)
   デフォルト=1カラム、data-column='2' のみ上書き定義
   ========================================================================== */
.grid-banner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.grid-banner__images { display: block; }
.grid-banner__images:hover { opacity: 0.9; }
.grid-banner__img { width: 100%; height: auto; display: block; }
.grid-banner__body { padding: 10px 12px 12px; }
.site_descente .grid-banner__body { padding: 12px 5px 7px; }
.site_fascinate .grid-banner__body { padding: 12px 12px 12px; }
.site_underarmour .grid-banner__body { padding: 18px 12px 12px; }
.grid-banner__title {
  display: -webkit-box;
  overflow: hidden;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.25;
  max-height: calc((16px * (20 / 16)) * 2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.site_underarmour .grid-banner__title {
  font-size: 16px;
}
.grid-banner__desc  {
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 0;
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.grid-banner__btn {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--main-color, #000); /* サイトのメインカラー指定を優先 (_vars.css)。:root デフォルトは #333 */
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}
.grid-banner__btn:hover {
  opacity: 0.85;
}
.site_fashionwalker .grid-banner__btn:hover {
  color: #fff;
  text-decoration: none;
}
/* 2カラムバナー */
/* 3カラムサイト */
.catalogList_item.grid-banner[data-column='2'] {
  grid-column: span 2;
  width: calc((100% - 40px) / 3 * 2 + 20px);
  box-sizing: border-box;
}
/* 3カラム: UA */
.site_underarmour .catalogList_item.grid-banner[data-column='2'] {
  width: calc((100% - 8px) / 3 * 2 + 4px);
}
/* 4カラムサイト */
.site_fascinate .catalogList_item.grid-banner[data-column='2'],
.site_waja .catalogList_item.grid-banner[data-column='2'],
.site_grande .catalogList_item.grid-banner[data-column='2'],
.site_raboki .catalogList_item.grid-banner[data-column='2'],
.site_mej .catalogList_item.grid-banner[data-column='2'],
.site_harleydavidson .catalogList_item.grid-banner[data-column='2'],
.site_orobianco .catalogList_item.grid-banner[data-column='2'],
.site_royal .catalogList_item.grid-banner[data-column='2'] {
  width: calc((100% - 60px) / 4 * 2 + 20px);
}
/* 4カラム: descente */
.site_descente #catalog_list .catalogList_item.grid-banner[data-column='2'] {
  width: 392px;
}
/* 5カラムサイト */
/* 注: 5カラムは margin-right の :nth-child(5n+5) 計算がバナー挿入で1つずれるため、有効化する際は要QA */
.site_brandeli .catalogList_item.grid-banner[data-column='2'],
.site_fashionwalker .catalogList_item.grid-banner[data-column='2'],
.site_magaseek .catalogList_item.grid-banner[data-column='2'] {
  width: calc((100% - 80px) / 5 * 2 + 20px);
}
.catalogList_item.grid-banner[data-column='2'] .grid-banner__btn {
  min-width: calc(50% - 15px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 18px;
}
/* 5カラムサイト: バナー表示時のみ gap レイアウトへ切替 */
.site_brandeli .catalogList#catalog_list:has(.grid-banner),
.site_fashionwalker .catalogList#catalog_list:has(.grid-banner),
.site_magaseek .catalogList#catalog_list:has(.grid-banner) {
  justify-content: flex-start;
  gap: 20px;
}
.site_brandeli .catalogList#catalog_list:has(.grid-banner) .catalogList_item,
.site_fashionwalker .catalogList#catalog_list:has(.grid-banner) .catalogList_item,
.site_magaseek .catalogList#catalog_list:has(.grid-banner) .catalogList_item {
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   画像比率の固定 (小数px対策 + 入稿サイズずれへの頑健化)
   1カラム = サイト別の商品画像比率 (_vars.css の --ratio) に追従。未定義サイトは 1/1
   2カラム = 横長ビジュアルのため固定しない (入稿サイズ準拠)
   -------------------------------------------------------------------------- */
.grid-banner__img {
  aspect-ratio: var(--ratio, 1 / 1);
  object-fit: cover;
}
.grid-banner[data-column='2'] .grid-banner__img {
  aspect-ratio: auto;
}

/* --------------------------------------------------------------------------
   2カラム: 画像高さを「商品画像と同じ高さ」に固定
   高さ = (バナー幅 - ガター) / 2 × 商品画像比率の逆数 (_vars.css の --ratio-inverse)
   幅は「商品2枚+ガター(加算)」・画像比率は固定のため、比率任せだと
   ビューポート幅によって行の高さが揃わない。container query 単位(cqw)で式に固定する
   -------------------------------------------------------------------------- */
.catalogList_item.grid-banner {
  container-type: inline-size; /* 2col高さ式(cqw) と下記の狭カード @container の両方で使用 */
}
.catalogList_item.grid-banner[data-column='2'] {
  --grid-banner-gutter: 20px; /* 3カラム(デフォルト)のガター */
}
.site_underarmour .catalogList_item.grid-banner[data-column='2'] {
  --grid-banner-gutter: 4px; /* UAはテナントCSSの item 定義 (ガター4px) に合わせる */
}
/* 4カラム/5カラムサイトはガター20px */
.site_fascinate .catalogList_item.grid-banner[data-column='2'],
.site_waja .catalogList_item.grid-banner[data-column='2'],
.site_grande .catalogList_item.grid-banner[data-column='2'],
.site_raboki .catalogList_item.grid-banner[data-column='2'],
.site_mej .catalogList_item.grid-banner[data-column='2'],
.site_harleydavidson .catalogList_item.grid-banner[data-column='2'],
.site_orobianco .catalogList_item.grid-banner[data-column='2'],
.site_royal .catalogList_item.grid-banner[data-column='2'],
.site_brandeli .catalogList_item.grid-banner[data-column='2'],
.site_fashionwalker .catalogList_item.grid-banner[data-column='2'],
.site_magaseek .catalogList_item.grid-banner[data-column='2'] {
  --grid-banner-gutter: 20px;
}
/* descente はガター10px */
.site_descente #catalog_list .catalogList_item.grid-banner[data-column='2'] {
  --grid-banner-gutter: 10px;
}
.grid-banner[data-column='2'] .grid-banner__img {
  height: calc((100cqw - var(--grid-banner-gutter, 20px)) / 2 * var(--ratio-inverse, 1));
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   狭カードの文字・余白詰め (カード幅ベースの container query = サイト列挙不要)
   5カラムサイト(カード幅≒143px)が主対象。フォントは JADE 標準の最低 11px を厳守
   -------------------------------------------------------------------------- */
@container (max-width: 159px) {
  .grid-banner__body { padding: 10px 8px 10px; }
  .grid-banner__title { font-size: 12px; max-height: calc(12px * 1.25 * 2); }
  .grid-banner__desc { margin-top: 6px; font-size: 11px; }
  .grid-banner__btn { font-size: 11px; padding: 7px 10px; margin-top: 8px; }
}
/* 中間カード (4カラム≒183px / descente 191px) は見出しのみ一段縮小 */
@container (min-width: 160px) and (max-width: 209px) {
  .grid-banner__title { font-size: 13px; max-height: calc(13px * 1.25 * 2); }
}

/* --------------------------------------------------------------------------
   カテゴリ別比率 (square/rectangle_itemList) 対応サイト向けの追従 (ECS_IC-2618)
   対象 = catalogList_template.css の square_itemList オプトインと同じ4サイト
   - square/rectangle ページでは 1col/2col とも枠固定(aspect-ratio/高さ式)を打ち消し、
     入稿比率のまま表示する (トリムなし。行はバナー高さ基準で伸びる)
   - クラスが付かないページは従来の枠固定にフォールバックし、
     比率の合わない素材は contain (トリムせず余白) で収める
   -------------------------------------------------------------------------- */
:is(
  .site_brandeli,
  .site_fashionwalker,
  .site_waja,
  .site_magaseek
) .grid-banner__img {
  object-fit: contain;
}
:is(
  .site_brandeli,
  .site_fashionwalker,
  .site_waja,
  .site_magaseek
) :is(.square_itemList, .rectangle_itemList) .grid-banner__img {
  aspect-ratio: auto;
  height: auto;
}