:root{--bg:#000;--card:#f9f9f9;--text:#222;--muted:#555;--brand:#2563eb;--brand-2:#3b82f6;--ok:#16a34a;--warn:#d97706;--shadow:0 4px 12px rgba(0,0,0,.1);--radius:12px;--header-height: 60px;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;line-height:1.7}
a{color:var(--brand)}
header{position:sticky;top:0;backdrop-filter:blur(6px);background:#fff;border-bottom:1px solid #57b;z-index:10}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px;background:#eee;box-shadow:0 0 20px rgba(255,255,255,0.1)}
.nav{display:flex;gap:20px;align-items:center;background:#fff;padding:14px 0}
.nav a{color:var(--text);opacity:.9;text-decoration:none;font-weight:600}
.nav{display:flex;align-items:center;gap:20px}
.nav .brand{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav nav{margin-left:auto;display:flex;gap:18px}

/* メインコンテンツエリアの設定 */
.main-container{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}

/* サイドバーのスタイル */
.sidebar{position:sticky;top:calc(var(--header-height) + 20px);background:var(--card);border-radius:var(--radius);padding:20px;border:1px solid #e5e7eb;box-shadow:var(--shadow);height:fit-content}
.sidebar h3{font-size:16px;color:var(--text);margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--brand)}
.sidebar-link {  display: flex;  align-items: center;  gap: 8px;  color: var(--text);  text-decoration: none;  padding: 6px 10px;  border-radius: 6px;  transition: background 0.2s ease;}
.sidebar-link:hover{background:#f1f5f9;color:var(--brand)}
.sidebar-link.home{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:white;font-weight:600;margin-bottom:12px}
.sidebar-link.home:hover{opacity:0.9}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin:0}
.sidebar-section{margin-bottom:24px}
.sidebar-link img {  flex-shrink: 0;  width: 32px;  height: 32px;  display: block;}
.sidebar-link .icon {  display: inline-flex;  align-items: center;  justify-content: center;  width: 24px;  height: 24px;  flex-shrink: 0;  font-size: 18px;}
.sidebar-link span {  line-height: 1.4;}
.hero{padding:20px 0 24px}
.hero-title{margin-bottom:28px}
.badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; padding: 8px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); border: none;}
h1{font-size:clamp(28px,3.6vw,44px);line-height:1.25;margin:10px 0 8px}
.lead{font-size:clamp(16px,2vw,18px);color:var(--muted);margin-bottom:30px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn.secondary{background:gray;color:white}
.shot{border-radius:8px;overflow:hidden;border:0px solid #e5e7eb;min-height: 160px;}
img{max-width:100%;height:auto;display:block}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* レスポンシブ対応 */
@media(max-width:768px){
  .main-container{grid-template-columns:1fr}
  .sidebar{position:static;order:-1;margin-bottom:20px}
  .grid-3,.grid-2{grid-template-columns:1fr}
}

section{margin:40px 0}
.card{background:var(--card);border-radius:var(--radius);padding:18px;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.card img {max-width: 270px;max-height: 500px;width: auto;height: auto; display: block;}
h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 10px}
h3{font-size:18px;margin:0 0 6px}
.toc a{text-decoration:none;color:var(--text)}
.toc li{margin:6px 0}
.kicker{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.changelog time{display:inline-block;min-width:9ch;color:var(--muted)}
.kdp{font-feature-settings:"palt" 1}
footer{border-top:1px solid #e5e7eb;color:var(--muted);padding:5px 0 5px;background:#fff}
footer p{background:#fff}
footer .wrap{background:#fff}
.tag { display: inline-block; font-size: 13px; padding: 6px 12px; border: 1px solid #374151; border-radius: 4px; margin-right: 8px; color: #374151; background: white; margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.2s ease; }
.tag:hover { background: #f9fafb; border-color: #1f2937; color: #1f2937; }