:root{
  --bg:#faf7f2; --card:#ffffff; --ink:#2b2620; --sub:#6f6455;
  --accent:#b4762a; --accent-soft:#f3e7d3; --line:#e5dccb;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  line-height:1.75; font-size:16px;
}
html[lang="en"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:780px; margin:0 auto; padding:0 18px 56px}

/* header */
header.site{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 0 10px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
header.site .brand{display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink)}
header.site .brand img{width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--line)}
header.site nav{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:.88rem}
header.site nav a{color:var(--sub)}
header.site nav a.here{color:var(--ink); font-weight:700}
header.site .lang{font-size:.88rem; border:1px solid var(--line); border-radius:999px; padding:2px 10px; background:var(--card)}

/* hero */
.hero{text-align:center; padding:34px 0 8px}
.hero img{width:132px; height:132px; border-radius:50%; object-fit:cover; border:2px solid var(--line); background:#fff}
.hero h1{font-size:1.65rem; line-height:1.4; margin:16px 0 8px}
.hero p.lead{color:var(--sub); margin:0 auto; max-width:600px}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.chips span{background:var(--accent-soft); border-radius:999px; padding:3px 12px; font-size:.85rem}

/* content */
h1.page{font-size:1.5rem; line-height:1.45; margin:22px 0 4px}
p.pagedesc{color:var(--sub); margin:0 0 20px}
h2{font-size:1.18rem; margin:30px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--accent-soft)}
h3{font-size:1.02rem; margin:20px 0 4px}
p{margin:8px 0}
ul,ol{margin:8px 0 8px 1.2em; padding:0}
li{margin:4px 0}
.cards{display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.card h3{margin:0 0 4px}
.card p{margin:0; color:var(--sub); font-size:.94rem}
.card a{font-weight:700}
.news-list{list-style:none; margin:10px 0 4px; padding:0}
.news-list li{display:flex; gap:10px; align-items:baseline; padding:8px 2px; border-bottom:1px dashed var(--line)}
.news-list li:last-child{border-bottom:none}
.news-date{color:var(--sub); font-size:.86rem; white-space:nowrap}
.note{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:10px 14px; margin:16px 0}
.note p{margin:2px 0}
.small{font-size:.88rem; color:var(--sub)}
code{background:var(--accent-soft); border-radius:4px; padding:0 5px; font-size:.9em}

/* footer */
footer.site{border-top:1px solid var(--line); margin-top:40px; padding-top:14px; font-size:.85rem; color:var(--sub)}
footer.site nav{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px}
footer.site nav a{color:var(--sub)}