:root{--primary:#2d7ff9;--ios:#0a84ff;--android:#3ddc84;--text:#1a1a1a;--sub:#666;--border:#e8e8e8;--bg:#f6f7f9;--star:#f5a623;--gold:#c9a227;--silver:#9e9e9e;--bronze:#a0522d;--radius:10px;--shadow:0 2px 8px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--text);background:var(--bg);line-height:1.8}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.hdr{display:flex;align-items:center;justify-content:space-between}
.site-header .logo{font-weight:800;color:var(--primary);text-decoration:none;display:inline-block;padding:14px 0;font-size:18px}
.hdr-nav a{color:var(--sub);text-decoration:none;font-size:14px;font-weight:600}
.home-hero{background:linear-gradient(135deg,#2d7ff9 0%,#1657c8 100%);color:#fff;padding:40px 0 36px;margin-bottom:8px}
.home-hero h1{margin:0 0 8px;font-size:26px}
.home-hero .lead{margin:0 0 10px;font-size:15px;opacity:.95}
.home-hero .hero-stat{display:inline-block;margin:0;font-size:13px;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:20px}
.site-footer{color:var(--sub);font-size:13px;padding:28px 0;margin-top:24px;background:#fff;border-top:1px solid var(--border)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}.foot-links a{color:var(--sub);text-decoration:none}
.foot-note{color:var(--text-light,#999)}
h1{font-size:24px;line-height:1.4}h2{font-size:20px;border-left:4px solid var(--primary);padding-left:10px;margin-top:32px}
.ranking-hero .meta{color:var(--sub);font-size:13px}
.kw-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.kw-tag{background:rgba(255,255,255,.22);color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px}
.kw-tag:hover{background:rgba(255,255,255,.34)}
.home-sec{margin:26px 0}
.home-h2{font-size:19px;margin:0 0 14px;border-left:4px solid var(--primary);padding-left:10px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.feat-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px;text-decoration:none;color:var(--text);display:block;transition:transform .15s,box-shadow .2s}
.feat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.13)}
.feat-icons{display:flex;gap:8px;margin-bottom:10px}
.feat-icons img{border-radius:11px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.feat-name{font-weight:700;font-size:15px;margin-bottom:8px}
.feat-go{font-size:13px;color:var(--primary);display:inline-flex;align-items:center;gap:4px;margin-top:8px}
.mini-rank{list-style:none;margin:0;padding:0}
.mini-rank li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid #f0f1f3}
.mini-rank li:first-child{border-top:0}
.mini-rank img{border-radius:9px;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mr-rank{flex:0 0 auto;width:18px;text-align:center;font-weight:800;color:var(--sub);font-size:13px}
.mini-rank li:nth-child(1) .mr-rank{color:var(--gold)}.mini-rank li:nth-child(2) .mr-rank{color:var(--silver)}.mini-rank li:nth-child(3) .mr-rank{color:var(--bronze)}
.mr-name{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-rate{flex:0 0 auto;font-size:12px;color:var(--sub);display:inline-flex;align-items:center;gap:2px}
.mini-rank.big li{padding:8px 0}.mini-rank.big .mr-name{font-size:14.5px}
.hero-feat{display:block;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;margin:18px 0 8px;text-decoration:none;color:var(--text);border-top:4px solid var(--accent)}
.hero-feat-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hero-feat-tag{background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:6px;flex:0 0 auto}
.hero-feat-title{font-weight:800;font-size:17px}
.hero-feat-go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700;font-size:14px;margin-top:8px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.cat-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:13px 14px;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:11px;transition:transform .15s,box-shadow .2s}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.13)}
.cic{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cat-name{font-weight:700;font-size:14px;line-height:1.3}
.ic-arrow{width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232d7ff9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
.panel{background:#fff;border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);margin:12px 0}
.panel p{margin:0 0 12px}.panel p:last-child{margin-bottom:0}
.app-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:16px 0}
.card-head{display:flex;gap:12px;align-items:flex-start}
.rank-badge{font-weight:800;display:inline-flex;align-items:center;gap:4px;margin-right:6px}
.rank-1 .rank-badge{color:var(--gold)}.rank-2 .rank-badge{color:var(--silver)}.rank-3 .rank-badge{color:var(--bronze)}
.app-icon{border-radius:16px;flex:0 0 auto}
.app-title{margin:0;font-size:17px}.app-dev{color:var(--sub);font-size:13px}
.os-badges{margin:6px 0}.os-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;border:1px solid var(--border);border-radius:12px;padding:1px 8px;margin-right:6px}
.app-rating{display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap}.stars{display:inline-flex;gap:1px}.rating-num{font-weight:700}.review-count{color:var(--sub)}.price{margin-left:6px;color:var(--primary);font-weight:700}
.expert{display:flex;gap:8px;background:#fff8ec;border-radius:8px;padding:10px;margin-top:12px;font-size:14px}
.pros-cons{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}.pros,.cons{flex:1;min-width:220px}
.pc-title{font-weight:700;display:flex;align-items:center;gap:4px}.pros{border-left:3px solid #1f9d55;padding-left:10px}.cons{border-left:3px solid #d64545;padding-left:10px}
.pros ul,.cons ul{margin:6px 0;padding-left:18px}
.recommend{margin-top:12px;font-size:14px;display:flex;gap:4px;align-items:flex-start}
.cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.store-btn{flex:1;min-width:160px;text-align:center;text-decoration:none;color:#fff;border-radius:8px;padding:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.store-btn.ios{background:var(--ios)}.store-btn.android{background:var(--android);color:#06351a}
.faq-item{background:#fff;border-radius:12px;padding:16px 18px;margin:12px 0;box-shadow:var(--shadow)}
.faq-q{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:16px;color:var(--text)}
.faq-a{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);color:#333;font-size:14.5px}
.faq-mark{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;line-height:1}
.mark-q{background:var(--primary)}.mark-a{background:#1f9d55}
.faq-qt{padding-top:3px}.faq-at{flex:1}
/* --- inline-SVG icons (no emoji) --- */
.ic{display:inline-block;width:16px;height:16px;vertical-align:-3px;background-repeat:no-repeat;background-position:center;background-size:contain}
.ic-star-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23f5a623'%3E%3Cpath d='M12 17.3 18.2 21l-1.7-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8-1.7 7z'/%3E%3C/svg%3E")}
.ic-star-off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23d9d9d9'%3E%3Cpath d='M12 17.3 18.2 21l-1.7-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.5 4.8-1.7 7z'/%3E%3C/svg%3E")}
.ic-medal-1,.ic-medal-2,.ic-medal-3,.ic-medal-n{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23c9a227'%3E%3Cpath d='M12 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-3 1.5L7 22l5-2 5 2-2-5.5'/%3E%3C/svg%3E")}
.ic-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f9d55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.ic-cross{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.ic-thumb-up{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%232d7ff9'%3E%3Cpath d='M2 10h4v12H2zM22 11a2 2 0 0 0-2-2h-6l1-5a2 2 0 0 0-4-1l-3 7v11h11a2 2 0 0 0 2-1.5l1.5-6z'/%3E%3C/svg%3E")}
.ic-badge{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f4a021' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.5 13 7 22l5-3 5 3-1.5-9'/%3E%3C/svg%3E")}
.ic-ios{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%230a84ff'%3E%3Cpath d='M16 1c-1 .1-2.2.7-2.9 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.2-.6 2.9-1.4.6-.8 1.1-1.9 1-3zM20 17.3c-.6 1.3-1.3 2.6-2.3 3.7-.8.9-1.5 1.8-2.7 1.8s-1.6-.7-3-.7-1.9.7-3 .7-2-.9-2.8-1.8C2.5 18 1.5 13.5 3.4 10.6c.9-1.4 2.5-2.3 4.2-2.3 1.2 0 2.3.8 3 .8.6 0 2-1 3.4-.8.6 0 2.3.2 3.4 1.8-3 1.8-2.5 6.1.6 7.2z'/%3E%3C/svg%3E")}
.ic-android{width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%233ddc84'%3E%3Cpath d='M6 9v8a1 1 0 0 0 1 1h1v3a1 1 0 0 0 2 0v-3h4v3a1 1 0 0 0 2 0v-3h1a1 1 0 0 0 1-1V9zM3.5 9A1.5 1.5 0 0 0 2 10.5v5a1.5 1.5 0 0 0 3 0v-5A1.5 1.5 0 0 0 3.5 9zm17 0a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 3 0v-5A1.5 1.5 0 0 0 20.5 9zM7 8h10c0-2.5-1.6-4.6-4-5.5l1-1.7a.4.4 0 0 0-.6-.4l-1.1 1.9a6.5 6.5 0 0 0-4.6 0L6.5.4a.4.4 0 0 0-.6.4l1 1.7C4.6 3.4 3 5.5 3 8h4z'/%3E%3C/svg%3E")}
.faq-at p{margin:0 0 8px}.faq-at p:last-child{margin-bottom:0}
.doc-page h1{font-size:24px;margin:0 0 12px}
.doc-page h2{font-size:17px;border:0;padding:0;margin:22px 0 6px}
.doc-page p{margin:0 0 12px}.doc-page a{color:var(--primary)}
.doc-meta{color:var(--sub);font-size:13px;margin-top:18px;border-top:1px solid var(--border);padding-top:12px}

/* --- PR slot (own-app promotion, labeled) --- */
.pr-slot{background:#fffdf5;border:1px solid #f0e2b8;border-radius:12px;padding:14px 16px;margin:16px 0}
.pr-head{font-weight:800;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pr-tag{background:#e8a400;color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px}
.pr-card{display:flex;gap:12px;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;margin-top:8px;box-shadow:var(--shadow)}
.pr-info{flex:1}.pr-name{font-weight:700}.pr-cta{display:flex;gap:8px;flex-wrap:wrap}
.pr-cta .store-btn{min-width:130px;padding:8px 10px;font-size:13px}
.pr-head-t{flex:1}.pr-ad-link{font-size:12px;font-weight:600;color:var(--primary);text-decoration:none}
.data-strip{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.dchip{font-size:12px;border:1px solid var(--border);border-radius:6px;padding:2px 8px;color:var(--sub);background:#fafbfc}
.dchip.ok{border-color:#bfe6cf;background:#eefaf1;color:#1f7a44;font-weight:600}
.slice-back{margin:20px 0;font-size:14px}.slice-back a{color:var(--primary);text-decoration:none}
.slice-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.slice-chips-label{font-size:13px;color:var(--sub);font-weight:600}
.slice-chip{font-size:13px;font-weight:600;color:var(--primary);text-decoration:none;border:1px solid #cfe0ff;background:#f2f7ff;border-radius:16px;padding:4px 12px}
.slice-chip:hover{background:#e6f0ff}

/* ---- editor byline (担当編集) ---- */
.editor-byline{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:16px 0;box-shadow:var(--shadow)}
.eb-ava{border-radius:50%;object-fit:cover;flex-shrink:0}
.eb-name{font-weight:700;font-size:.95rem}
.eb-name a{color:inherit;text-decoration:none}
.eb-name a:hover{text-decoration:underline}
.eb-role{margin-left:8px;font-size:.78rem;font-weight:500;color:var(--sub)}
.eb-profile{margin-top:2px;font-size:.82rem;color:var(--sub);line-height:1.6}

/* ---- editors page (編集部) ---- */
.editors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:20px 0}
.editor-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;text-align:center;scroll-margin-top:80px;background:#fff}
.ed-ava{border-radius:50%;object-fit:cover}
.ed-name{margin-top:10px;font-weight:700}
.ed-kana{display:block;font-size:.72rem;font-weight:400;color:var(--sub)}
.ed-role{margin-top:2px;font-size:.8rem;font-weight:600;color:var(--primary)}
.ed-profile{margin-top:8px;font-size:.8rem;color:var(--sub);line-height:1.7;text-align:left}