.ystyler-wrap{
    font-family: Futura, "Jost", sans-serif;
    font-weight: 300; letter-spacing: 0.04em;
    max-width: 960px; margin: 0 auto; padding: 1rem 0 3rem;
}
.ystyler-head{ text-align: center; padding: 2.5rem 1rem 3rem; }
.ystyler-head__label{ font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: #b89a72; }
h1.ystyler-head__title{ font-size: 1.7rem; font-weight: 200; letter-spacing: 0.08em; color: #15131c; margin: 0.8rem 0 0; }
.ystyler-head__text{ font-size: 0.9rem; line-height: 1.95; color: #55525e; margin: 1rem auto 0; max-width: 520px; }
.ystyler-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e7e1d4; border: 1px solid #e7e1d4; }
.ystyler-card{ background: #FFFFF9; text-align: center; text-decoration: none; display: block; transition: opacity 0.3s ease; }
.ystyler-card:hover{ opacity: 0.85; }
.ystyler-card__photo{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ystyler-card__body{ padding: 1.1rem 0.5rem 1.5rem; }
.ystyler-card__no{ font-size: 11px; letter-spacing: 0.22em; color: #b89a72; display: block; }
.ystyler-card__name{ font-size: 1.1rem; font-weight: 200; letter-spacing: 0.05em; color: #15131c; margin-top: 0.4rem; display: block; }
@media (max-width: 768px){ .ystyler-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ── ページの外枠。上の .ystyler-* は移行元の WP ページから採った原文（値は一字も変えていない）。
   その配色（#15131c / #55525e / #b89a72 / #e7e1d4 / #FFFFF9）に、ヘッダーとフッターを合わせる。
   この畝だけダークモードを持たない ── 名簿は移行元の見え方をそのまま保つため。 ── */
*{box-sizing:border-box}
body{margin:0;background:#FFFFF9;color:#15131c;
  font-family:Futura,"Jost","Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:300;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;-webkit-tap-highlight-color:rgba(184,154,114,.20)}
img{max-width:100%;height:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem max(1.5rem,calc((100% - 60rem)/2)) .85rem;border-bottom:1px solid #e7e1d4;
  position:sticky;top:0;z-index:30;background:#FFFFF9;flex-wrap:wrap}
.brand{flex:none;text-decoration:none;font-size:.95rem;letter-spacing:.22em;color:#55525e;text-transform:uppercase;transition:color .2s}
.brand:hover{color:#15131c}
.langs{display:flex;gap:.15rem;align-items:center;font-size:.82rem;flex:none}
.langs a{color:#8d8592;text-decoration:none;padding:.25rem .5rem;border-radius:2rem;transition:.2s}
.langs a:hover{color:#15131c}
.langs a[aria-current="true"]{color:#15131c;background:#f2ece1;font-weight:600}
.langs span{color:#e7e1d4;font-size:.7rem}
.crumbs{max-width:60rem;margin:1rem auto 0;padding:0 1.5rem;font-size:.72rem;letter-spacing:.06em;
  color:#8d8592;text-transform:uppercase;font-weight:600}
.crumbs .up{color:#b89a72;text-decoration:none}
.crumbs .up:hover{text-decoration:underline}
.crumbs.ja{text-transform:none;letter-spacing:.1em}
.hero{margin:2rem 0 0}
.hero img{display:block;width:100%}
footer{max-width:60rem;margin:3.6rem auto 0;padding:1.6rem 1.5rem 4rem;border-top:1px solid #e7e1d4;
  text-align:center;font-size:.74rem;color:#8d8592;letter-spacing:.04em}
footer a{color:#b89a72;text-decoration:none;margin:0 .5rem}
footer a:hover{text-decoration:underline}
.ystyler-card:focus{outline:none}
.ystyler-card:focus-visible{outline:2px solid #b89a72;outline-offset:2px}