:root{
  --bg:#f7f8f9; --surface:#ffffff; --surface-alt:#f1f3f4;
  --text:#1a1d1f; --text-sub:#5b6268; --text-muted:#8b9298;
  --border:#e4e7e9; --border-strong:#d0d5d8;
  --accent:#0f8a6f; --accent-bg:#e4f5ef; --accent-dark:#0b6a56;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.9; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

/* header */
.site-header{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;}
.site-header .inner{max-width:820px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:10px;}
.logo:hover{text-decoration:none;}
.logo .mark{width:32px; height:32px; border-radius:8px; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:18px;}
.logo .name{font-size:16px; font-weight:600; color:var(--text);}
.logo .since{font-size:11px; color:var(--text-muted); display:block; line-height:1;}
nav.gnav{display:flex; gap:16px; font-size:13px; color:var(--text-sub); flex-wrap:wrap;}
nav.gnav a{color:var(--text-sub);}
nav.gnav a.cur{color:var(--accent); font-weight:600;}

/* hero (home) */
.hero{background:var(--surface); border-bottom:1px solid var(--border); text-align:center; padding:44px 20px 36px;}
.hero-badge{display:inline-block; font-size:12px; color:var(--accent); background:var(--accent-bg); padding:4px 14px; border-radius:20px; margin-bottom:16px;}
.hero h1{font-size:28px; font-weight:700; margin:0 0 12px;}
.hero p{font-size:16px; color:var(--text-sub); margin:0 auto 22px; max-width:480px;}
.hero-search{display:flex; align-items:center; gap:8px; max-width:440px; margin:0 auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:26px; padding:6px 6px 6px 18px;}
.hero-search .s-icon{font-size:16px;}
.hero-search .s-ph{flex:1; text-align:left; font-size:14px; color:var(--text-muted);}
.hero-search .s-btn{background:var(--text); color:#fff; font-size:13px; padding:8px 18px; border-radius:20px;}

/* home sections */
main.home{max-width:820px; margin:0 auto; padding:8px 20px 60px;}
.sec-h{font-size:20px; font-weight:700; margin:36px 0 14px;}
.sec-h small{font-size:13px; font-weight:400; color:var(--text-muted);}
.grid{display:grid; gap:10px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:1fr 1fr;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:4px; color:var(--text);}
.card:hover{border-color:var(--border-strong); text-decoration:none;}
.card .c-ico{font-size:22px;}
.card .c-t{font-size:14px; font-weight:600;}
.card .c-s{font-size:12px; color:var(--text-muted);}
.card.alt{background:var(--surface-alt); border-color:transparent; align-items:center; text-align:center;}
.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tags a{font-size:13px; color:var(--text-sub); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 14px;}
.tags a:hover{border-color:var(--border-strong); text-decoration:none;}
.list{display:flex; flex-direction:column;}
.row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); color:var(--text);}
.row:last-child{border-bottom:none;}
.row:hover{text-decoration:none;}
.row:hover .row-t{color:var(--accent);}
.tag-c{font-size:11px; color:var(--text-sub); background:var(--surface-alt); padding:3px 8px; border-radius:4px; white-space:nowrap;}
.tag-c.accent{color:var(--accent); background:var(--accent-bg);}
.row-t{flex:1; font-size:14px;}
.row-d{font-size:12px; color:var(--text-muted);}

/* category / page head */
.page-head{max-width:820px; margin:0 auto; padding:26px 20px 8px;}
.page-head .cat-badge{margin-bottom:12px;}
.page-head h1{font-size:26px; font-weight:700; margin:0 0 10px;}
.page-head p{font-size:15px; color:var(--text-sub); margin:0; max-width:640px;}
.group-h{font-size:15px; font-weight:600; color:var(--text-sub); margin:30px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;}
.card .num{width:24px; height:24px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.card .c-top{display:flex; align-items:center; gap:8px;}
.card.lrn{min-height:96px;}

/* article */
main.article{max-width:820px; margin:0 auto; padding:0 20px 60px;}
.breadcrumb{font-size:12px; color:var(--text-muted); padding:18px 0 12px;}
.breadcrumb a{color:var(--text-muted);}
.cat-badge{display:inline-block; font-size:12px; color:var(--accent); background:var(--accent-bg); padding:4px 12px; border-radius:6px; margin-bottom:14px;}
.article h1{font-size:28px; font-weight:700; line-height:1.5; margin:0 0 14px;}
.meta{display:flex; gap:18px; font-size:12px; color:var(--text-muted); padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:28px;}
.article h2{font-size:21px; font-weight:700; margin:44px 0 16px; padding-top:8px; border-top:1px solid var(--border);}
.article h2:first-of-type{border-top:none;}
.article h3{font-size:17px; font-weight:600; margin:28px 0 10px;}
.article p{margin:0 0 16px;}
.lead{font-size:16px;}
.tip{border-left:4px solid var(--accent); background:var(--accent-bg); padding:14px 18px; margin:24px 0; border-radius:0 8px 8px 0;}
.tip .tip-h{font-weight:600; color:var(--accent-dark); font-size:14px; margin-bottom:4px;}
.tip p{margin:0; font-size:14px; color:var(--accent-dark);}
table{width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;}
th,td{padding:12px 14px; text-align:left; border-top:1px solid var(--border);}
thead th{background:var(--surface-alt); color:var(--text-sub); font-weight:600; border-top:none;}
tbody tr:nth-child(even){background:var(--surface-alt);}
.article ol,.article ul{margin:0 0 16px; padding-left:1.4em;}
.article li{margin-bottom:8px;}
.pr-note{font-size:12px; color:var(--text-muted); background:var(--surface-alt); padding:10px 14px; border-radius:8px; margin:16px 0;}
.product{display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:12px 0;}
.product.featured{border:2px solid var(--accent);}
.product .thumb{width:64px; height:64px; border-radius:10px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:30px; flex-shrink:0;}
.product .body{flex:1; min-width:0;}
.product .pop{display:inline-block; font-size:11px; color:var(--accent); background:var(--accent-bg); padding:2px 10px; border-radius:4px; margin-bottom:6px;}
.product .pname{font-size:16px; font-weight:600; margin:2px 0;}
.product .spec{font-size:12px; color:var(--text-muted);}
.product .tags2{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;}
.product .tags2 span{font-size:11px; color:var(--text-sub); background:var(--surface-alt); padding:2px 8px; border-radius:10px;}
.product .buy{text-align:right; flex-shrink:0;}
.product .price{font-size:17px; font-weight:700;}
.btn{display:inline-block; background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:8px 16px; border-radius:8px; margin-top:6px;}
.btn:hover{background:var(--accent-dark); text-decoration:none;}
.faq-q{font-weight:600; margin:20px 0 4px;}
.faq-a{color:var(--text-sub); margin:0 0 8px;}
.related{border-top:1px solid var(--border); margin-top:40px; padding-top:24px;}
.related h2{border:none; margin:0 0 14px; padding:0; font-size:18px;}
.related-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.related-grid a{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--text);}
.related-grid a:hover{border-color:var(--border-strong); text-decoration:none;}
.related-grid a::before{content:"→"; color:var(--accent); font-weight:700;}

/* trouble / diagnostic blocks */
.quickfix{background:var(--accent-bg); border-radius:12px; padding:16px 18px; margin:0 0 24px;}
.quickfix .qh{font-weight:600; color:var(--accent-dark); font-size:15px; margin-bottom:8px;}
.quickfix ol{margin:0; padding-left:1.3em; color:var(--accent-dark);}
.quickfix li{margin-bottom:6px;}
.step{border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin:0 0 10px; background:var(--surface);}
.step .sh{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.step .sbadge{font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-bg); padding:2px 8px; border-radius:4px; white-space:nowrap;}
.step .st{font-weight:600;}
.step p{margin:0; font-size:14px; color:var(--text-sub); line-height:1.7;}
.step-arrow{text-align:center; color:var(--text-muted); margin:0 0 10px; font-size:18px;}
.cta{background:var(--accent-bg); border-radius:12px; padding:16px 18px; margin:24px 0; display:flex; align-items:center; gap:14px;}
.cta .ct{flex:1;}
.cta .cta-t{font-weight:600; color:var(--accent-dark);}
.cta .cta-s{font-size:13px; color:var(--accent-dark); line-height:1.6;}
.cta .cta-btn{background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:9px 16px; border-radius:8px; white-space:nowrap;}
.cta .cta-btn:hover{background:var(--accent-dark); text-decoration:none;}

/* glossary */
.gloss-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px;}
.gloss-jump a{font-size:13px; color:var(--text-sub); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 14px;}
.gloss-jump a:hover{border-color:var(--border-strong); text-decoration:none; color:var(--accent);}
.gloss-sec{scroll-margin-top:70px;}
.gloss-sec h2{font-size:18px; font-weight:700; margin:34px 0 4px; padding-top:8px; border-top:1px solid var(--border);}
.term{padding:14px 0; border-bottom:1px solid var(--border);}
.term:last-child{border-bottom:none;}
.term .tname{font-weight:600; font-size:15px;}
.term .tname .en{font-weight:400; color:var(--text-muted); font-size:13px; margin-left:6px;}
.term .tdef{font-size:14px; color:var(--text-sub); line-height:1.75; margin-top:4px;}

/* footer */
.site-footer{background:var(--surface); border-top:1px solid var(--border); padding:20px;}
.site-footer .f-inner{max-width:820px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-muted);}
.site-footer a{color:var(--text-muted);}

@media (max-width:560px){
  .hero h1,.article h1{font-size:23px;}
  .sec-h,.article h2{font-size:19px;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .related-grid{grid-template-columns:1fr;}
  .product{flex-wrap:wrap;}
  .product .buy{width:100%; text-align:left; display:flex; align-items:center; gap:12px;}
  nav.gnav{display:none;}
  .site-footer .f-inner{flex-direction:column; gap:6px; text-align:center;}
}