@charset "UTF-8";

/* =========================================================
   kk-clothbrands.css
   - 生地ブランド一覧（[kk_cloth_brands]）
   ========================================================= */

#kk-clothbrands{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

#kk-clothbrands .kk-cb-head{
  margin-bottom: 18px;
}

#kk-clothbrands .kk-cb-h1{
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 10px;
}

#kk-clothbrands .kk-cb-lead,
#kk-clothbrands .kk-cb-desc{
  margin: 0 0 8px;
  line-height: 1.7;
}

#kk-clothbrands .kk-cb-section{
  margin: 28px 0 0;
}

#kk-clothbrands .kk-cb-h2{
  font-size: 18px;
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 4px solid #222;
}

/* グリッド */
#kk-clothbrands .kk-cb-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px){
  #kk-clothbrands .kk-cb-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  #kk-clothbrands .kk-cb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #kk-clothbrands .kk-cb-grid{ grid-template-columns: 1fr; }
}

/* カード */
#kk-clothbrands .kk-cb-card{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#kk-clothbrands .kk-cb-card:hover{
  transform: translateY(-2px);
  border-color: #d0d0d0;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* 画像枠：比率固定（バラバラ画像でも揃う） */
#kk-clothbrands .kk-cb-media{
  position: relative;
  aspect-ratio: 16 / 9; /* ここで統一 */
  background: #f6f6f6;
  display: grid;
  place-items: center;
}

/* 1枚画像 */
#kk-clothbrands .kk-cb-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 余白が出ない */
  display: block;
}

/* dja の縦積み（2枚） */
#kk-clothbrands .kk-cb-media.is-stack{
  aspect-ratio: 4 / 3;     /* 縦積みは少し縦長に */
  padding: 8px;
  gap: 8px;
  align-content: center;
}
#kk-clothbrands .kk-cb-media.is-stack img{
  width: 100%;
  height: calc((100% - 8px) / 2);
  object-fit: contain;  /* ロゴ系は切らない */
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* テキスト */
#kk-clothbrands .kk-cb-body{
  padding: 12px 12px 14px;
}

#kk-clothbrands .kk-cb-name{
  margin: 0 0 6px;
  font-weight: 700;
  line-height: 1.35;
  font-size: 14px;
  color: #111;
}

#kk-clothbrands .kk-cb-text{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #444;
}

/* 単画像：ロゴを切らずに縮小して収める */
#kk-clothbrands .kk-cb-media{
  padding: 10px;
}

/* 画像枠：正方形寄りで統一（ロゴの見え方が安定） */
#kk-clothbrands .kk-cb-media{
  aspect-ratio: 1 / 1;     /* ← 16:9 から変更 */
  padding: 12px;
  background: #f6f6f6;
  display: grid;
  place-items: center;
}

/* 画像が無い時の表示 */
#kk-clothbrands .kk-cb-noimg{
  width: 100%;
  height: 100%;
  display: block;
  background: repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 10px,#fafafa 10px,#fafafa 20px);
  border-radius: 10px;
}

#kk-clothbrands .kk-cb-media img{
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  display: block;
  background: #fff;
  border-radius: 10px;
}

/* DJA：縦積みは左右の白場が目立つので詰める */
#kk-clothbrands .kk-cb-media.is-stack{
  aspect-ratio: 1 / 1;   /* 他と同じ枠感に揃える */
  padding: 10px;
  gap: 10px;
}

#kk-clothbrands .kk-cb-media.is-stack img{
  width: 100%;
  height: calc((100% - 10px) / 2);

  object-fit: cover;     /* ← contain から変更：左右白場を削る */
  object-position: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;

  /* “あと一歩詰めたい”時の軽いズーム（任意） */
  transform: scale(1.08);
}

/* =========================================================
   DJA（2枚縦積み）専用
   - 対象：.kk-cb-media.is-stack または（フォールバック）imgが2枚入っているmedia
   - 方針：枠は正方形 / 画像は潰さず比率維持（height:auto）
           左右の白場は cover + scale で詰める
   ========================================================= */

#kk-clothbrands .kk-cb-media.is-stack,
#kk-clothbrands .kk-cb-media:has(img + img){
  aspect-ratio: 1 / 1;
  padding: 10px;
  gap: 10px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center; /* 余った高さは上下余白へ */
}

#kk-clothbrands .kk-cb-media.is-stack img,
#kk-clothbrands .kk-cb-media:has(img + img) img{
  width: 100%;
  height: auto;          /* 潰れ防止 */
  max-height: 120px;     /* 2枚が収まる上限（105〜140で微調整） */
  display: block;

  object-fit: cover;     /* 左右の白場を削る */
  object-position: center;
  transform: scale(1.12);/* 詰め具合：1.06〜1.18 */

  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
}