/* ============================================
   ちょっとだけ — ホームのカード
   外観 → エディター → スタイル → 追加CSS に貼る
   ============================================ */

/* フォント読み込み（@import）は入れていません。
   見出しは端末内の明朝で表示されます。
   Kiwi Maru を使いたくなったら、テーマのフォントライブラリに
   登録してから --cd-disp の先頭に "Kiwi Maru" を足してください。 */

.cd-home{
  --cd-card:#fffdf8;          /* カードの紙色 */
  --cd-ink:#272320;           /* カードの文字色 */
  --cd-muted:#7d7566;         /* カードの補足文字 */
  --cd-line:rgba(39,35,32,.14);
  --cd-accent:#d9663a;
  --cd-disp:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  max-width:900px;
  margin-inline:auto;
}

/* ---- 見出し ---- */
.cd-home .cd-lead{margin:0 0 22px}
.cd-home .cd-lead h1{
  font-family:var(--cd-disp);
  font-weight:500;
  font-size:clamp(20px,4.6vw,28px);
  line-height:1.5;
  letter-spacing:.04em;
  margin:0 0 8px;
}
.cd-home .cd-lead p{
  margin:0;
  font-size:13px;
  line-height:1.9;
  opacity:.7;
}

/* ---- カード ---- */
.cd-home .cd-games{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
}
.cd-home .cd-games li{margin:0}

.cd-home .cd-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--cd-card);
  color:var(--cd-ink);
  border:1px solid var(--cd-line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 2px 3px rgba(40,30,15,.05),0 12px 28px rgba(40,30,15,.10);
  transition:transform .16s ease,box-shadow .16s ease;
}
.cd-home .cd-card:hover,
.cd-home .cd-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 4px 6px rgba(40,30,15,.08),0 18px 38px rgba(40,30,15,.16);
  text-decoration:none;
}
.cd-home .cd-card:focus-visible{outline:2px solid var(--cd-accent);outline-offset:3px}

.cd-home .cd-thumb{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8/5;
  border-bottom:1px solid var(--cd-line);
}
.cd-home .cd-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1;
  padding:13px 15px 15px;
}
.cd-home .cd-title{
  font-family:var(--cd-disp);
  font-weight:500;
  font-size:17px;
  letter-spacing:.04em;
  line-height:1.4;
}
.cd-home .cd-desc{
  font-size:12px;
  line-height:1.75;
  color:var(--cd-muted);
  flex:1;
}
.cd-home .cd-badge{
  align-self:flex-start;
  margin-top:3px;
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--cd-muted);
  border:1px solid var(--cd-line);
  border-radius:999px;
  padding:3px 9px;
}

/* ---- 下のひとこと（テーマの文字色をそのまま使う） ---- */
.cd-home .cd-rule{
  margin:26px 0 0;
  padding:16px 18px;
  border:1px dashed currentColor;
  border-radius:12px;
  font-size:12.5px;
  line-height:1.95;
  opacity:.75;
}
.cd-home .cd-rule b{font-weight:700}

@media (prefers-reduced-motion:reduce){
  .cd-home .cd-card{transition:none}
}