@charset "UTF-8";

/* =========================================================
   kk-name.css（ネーム：オプション）
   - 画像＆説明の2カラム
   - 画像カードの2列グリッド（センター固定）
   ========================================================= */

#kk-name{
  font-size:18px;
  line-height:1.9;
  color:#222;
}

/* イントロ：画像＋本文（2カラム） */
#kk-name .kk-name-intro{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:24px;
  align-items:start;
}

#kk-name .kk-name-intro__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  margin:0 auto;
}

#kk-name .kk-name-intro__text p{
  margin:0 0 12px;
}

/* 2列グリッド（ポケット／カフス／書体／モチーフ） */
#kk-name .kk-name-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px 20px;
  margin-top:14px;
}

#kk-name .kk-name-card{
  margin:0;
  padding:14px 14px 12px;
  border:1px solid #e6e6e6;
  background:#fff;
  box-sizing:border-box;
  text-align:center;
}

#kk-name .kk-name-card img{
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  margin:0 auto 10px;
}

#kk-name .kk-name-card figcaption{
  font-size:15px;
  line-height:1.7;
  margin:0;
}

/* エンブレムだけ幅広 */
#kk-name .kk-name-emblem{
  margin-top:18px;
}
#kk-name .kk-name-card--wide{
  max-width:720px;
  margin:0 auto;
}

/* 糸色：見本画像 */
#kk-name .kk-name-img img{
  display:block;
  width:100%;
  height:auto;
  max-width:820px;
  margin:10px auto 16px;
}

/* 糸色テーブル */
#kk-name .kk-name-color-table{
  overflow-x:auto;
}
#kk-name .kk-table{
  width:100%;
  max-width:820px;
  margin:0 auto;
  border-collapse:collapse;
  table-layout:fixed;
}
#kk-name .kk-table td{
  border:1px solid #ddd;
  padding:10px 8px;
  font-size:14px;
  line-height:1.4;
  vertical-align:top;
}

/* シルバー説明：画像＋本文（2カラム） */
#kk-name .kk-name-silver{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:20px;
  align-items:start;
  margin-top:18px;
}
#kk-name .kk-name-silver__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:360px;
  margin:0 auto;
}
#kk-name .kk-name-silver__text p{
  margin:0 0 10px;
}

/* CTA */
#kk-name .kk-cta{
  margin:24px auto 0;
  text-align:center;
}

/* SP */
@media (max-width: 860px){
  #kk-name .kk-name-intro,
  #kk-name .kk-name-silver{
    grid-template-columns: 1fr;
  }
  #kk-name .kk-name-grid2{
    grid-template-columns: 1fr;
  }
  #kk-name .kk-name-card figcaption{
    font-size:15px;
  }
}