/* ===== 共通 ===== */
:root{
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;
  --gap: clamp(8px, 2vw, 16px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-ja);line-height:1.6;color:#333;background:#fafafa;}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;border-radius:6px}

/* ===== ヘッダー ===== */
.site-header{display:flex;align-items:center;padding:0 var(--gap);background:#fff;border-bottom:4px solid #ffd400}
.site-header .logo{padding:.5rem 0}
nav ul{display:flex;gap:var(--gap);list-style:none}
#menuBtn{display:none}

/* ===== カードレイアウト ===== */
.cards{
  --min: 250px;           /* 最小カード幅 */
  display:grid;
  grid-gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
  padding:var(--gap);
}
.card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  transition:transform .25s;
}
.card:hover{transform:translateY(-4px)}
.card header{position:relative;text-align:center;padding:var(--gap)}
.card header:before{ /* ドットとリボン */
  content:"";
  width:100%;height:6px;
  background:var(--accent);
  position:absolute;left:0;top:0;border-radius:8px 8px 0 0;
}
.card header img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:4px solid var(--accent)}
.card h3{margin-top:.5em;font-size:1.1rem}
.card h3 small{display:block;font-size:.75em;font-family:var(--font-en);color:#666}
.tag{display:inline-block;background:var(--accent);color:#fff;padding:0 .5em;margin-top:.25em;font-size:.75em;border-radius:4px}
.card section{padding:var(--gap);font-size:.9rem}
.card dt{font-weight:700;margin-top:.5em}
.card dd{margin-left:0}

/* ===== フッター ===== */
.site-footer{padding:2em 0;text-align:center;font-size:.82rem;color:#666}

/* ===== レスポンシブ (スマホ) ===== */
@media(max-width:600px){
  nav ul{flex-direction:column;display:none;margin-top:var(--gap)}
  #menuBtn{display:block;background:none;border:none;font-size:1.5rem}
  #menuBtn[aria-expanded="true"] + ul{display:flex}
}