/* メンバー紹介ページの共通スタイル。
   キャラ色は各ページの :root で --accent / --accent-10 / --accent-30 を定義する。
   ここを直せば全メンバーページに反映される。ページ側へコピーしないこと。 */

body { font-family:'Noto Sans JP',sans-serif; color:#313232; background:#FAFAFA; line-height:1.8; }
nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); border-bottom:1px solid #E8E9E9; padding:0 24px; }
.nav-inner { max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo img { height:32px; }
.nav-logo { text-decoration:none; }
.nav-back { font-size:13px; color:#767A7A; text-decoration:none; }
.nav-back:hover { color:#E61874; }
.container { max-width:1000px; margin:0 auto; padding:48px 24px 80px; }
.member-layout { display:grid; grid-template-columns:400px 1fr; gap:48px; align-items:start; }
.image-column { position:sticky; top:88px; }
.hobby-image { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:20px; box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.avatar-overlay { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 4px 16px rgba(0,0,0,0.1); margin-top:-44px; margin-left:24px; position:relative; z-index:2; }
.content-column { padding-top:8px; }
.member-name { font-size:32px; font-weight:900; letter-spacing:-1px; margin-bottom:2px; }
.member-name-en { font-size:13px; color:#A4A7A7; margin-bottom:12px; }
.role-badge { display:inline-block; font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-10); border:1px solid var(--accent-30); padding:5px 16px; border-radius:100px; margin-bottom:32px; }
.quote { font-size:18px; font-weight:700; color:var(--accent); border-left:3px solid var(--accent); padding:12px 0 12px 20px; margin-bottom:36px; line-height:1.6; }
.section-title { font-size:11px; font-weight:700; color:#A4A7A7; text-transform:uppercase; letter-spacing:2px; margin-bottom:12px; }
.bio-text { font-size:15px; color:#585B5B; margin-bottom:40px; line-height:2; }
.info-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:40px; }
.info-card { background:#fff; border:1px solid #E8E9E9; border-radius:14px; padding:20px; }
.info-card .label { font-size:11px; color:#A4A7A7; font-weight:500; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.info-card .value { font-size:16px; font-weight:700; }
.hobby-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.hobby-tag { background:#fff; border:1px solid #E8E9E9; color:#585B5B; padding:8px 18px; border-radius:100px; font-size:13px; font-weight:500; transition:all 0.2s; }
.hobby-tag:hover { border-color:var(--accent); color:var(--accent); }
.back-btn { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #E8E9E9; border-radius:100px; padding:12px 24px; font-size:13px; font-weight:600; color:#767A7A; text-decoration:none; transition:all 0.2s; }
.back-btn:hover { border-color:#E61874; color:#E61874; }

@media(prefers-color-scheme:dark) {
  body { background:#1a1a2e; color:#e0e0e0; }
  nav { background:rgba(26,26,46,0.85); border-color:#333; }
  .nav-back { color:#aaa; }
  .member-name { color:#fff; }
  .member-role { color:#ccc; }
  .bio-text { color:#ddd; }
  .info-card { background:#2a2a3e; border-color:#444; }
  .info-label { color:#aaa; }
  .info-value { color:#e0e0e0; }
  .back-btn { border-color:#555; color:#aaa; }
  .back-btn:hover { border-color:#E61874; color:#E61874; }
}

@media(max-width:768px) {
  .member-layout { grid-template-columns:1fr; gap:32px; }
  .image-column { position:static; }
  .hobby-image { aspect-ratio:4/3; border-radius:16px; }
  .member-name { font-size:26px; }
  .info-cards { grid-template-columns:1fr; }
}

@media(prefers-color-scheme:dark) {
  .site-footer { border-color: #333; color: #aaa; }
  .site-footer a { color: #aaa; }
  .site-footer a:hover { color: var(--accent); }
}