*{margin:0;padding:0;box-sizing:border-box}
:root{
--gold:#C8A84E;--gold-light:#F5E6B8;--gold-bg:#FFF9E8;
--brown:#6B5339;--navy:#1A2744;--navy-light:#2C3E5E;
--sky:#E8F4FD;--sky-deep:#B5D4F4;
--mint:#E0F5EC;--mint-deep:#5DCAA5;
--peach:#FFF0E8;--peach-deep:#F5C4B3;
--lavender:#EEEDFE;--lavender-deep:#AFA9EC;
--text:#3D3D3A;--text-mid:#5A5A55;--text-light:#8B8B85;--text-faint:#B5B5AD;
--bg:#FAFAF7;--white:#FFF;--border:#E8E8E4;
--r:16px;--rs:10px;
}
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;color:var(--text);background:var(--bg);line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.c{max-width:760px;margin:0 auto;padding:0 20px}
img{display:block;max-width:100%}
/* Topbar */
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:14px 0}
.topbar-inner{display:flex;align-items:center;gap:12px}
.topbar-logo{height:64px}
.topbar-nav{margin-left:auto;display:flex;gap:16px;font-size:12px}
.topbar-nav a{color:var(--text-mid);text-decoration:none;font-weight:500}
.topbar-nav a:hover{color:var(--gold)}
.bread{font-size:11px;color:var(--text-faint);padding:14px 0 0;display:flex;gap:5px;flex-wrap:wrap}
.bread a{color:var(--text-light);text-decoration:none}
/* Nakama bar */
.nk-bar{background:var(--gold-bg);border:1.5px solid var(--gold-light);border-radius:var(--r);padding:10px 16px;margin:14px 0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--brown)}
.nk-bar strong{color:var(--brown)}
/* Hero */
.hero{position:relative;max-height:450px;border-radius:0 0 28px 28px;overflow:hidden;margin-bottom:28px}
.hero-bg{width:100%;height:300px;object-fit:cover;object-position:center 35%}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 25%,rgba(26,39,68,.78) 100%)}
.hero-ct{position:absolute;bottom:0;left:0;right:0;padding:24px 24px 20px}
.badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:8px;letter-spacing:.5px}
.hero h1{color:#FFF;font-size:22px;font-weight:900;line-height:1.45;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero h1 small{display:block;font-size:13px;font-weight:500;opacity:.85;margin-top:4px}
.hero-meta{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.hero-au{display:flex;align-items:center;gap:6px}
.hero-au img{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.5);object-fit:cover}
.hero-au span{color:rgba(255,255,255,.9);font-size:12px;font-weight:500}
.hero-date{color:rgba(255,255,255,.7);font-size:11px}
.hero-upd{background:rgba(90,200,150,.9);color:#FFF;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px}
/* Avatar */
.av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2.5px solid var(--border)}
.av-ai{border-color:var(--peach-deep)}.av-po{border-color:var(--sky-deep)}.av-sh{border-color:var(--gold)}
/* Talk */
.talk{display:flex;gap:10px;margin:16px 0;align-items:flex-start}
.talk.r{flex-direction:row-reverse}
.bb{max-width:82%;padding:13px 16px;border-radius:18px;font-size:14px;line-height:1.75}
.bb-ai{background:#FFF5EC;border:1.5px solid var(--peach-deep)}
.bb-po{background:#EEF7FF;border:1.5px solid var(--sky-deep)}
.bb-sh{background:var(--gold-bg);border:1.5px solid var(--gold-light)}
.bn{font-size:11px;font-weight:700;margin-bottom:3px}
.bn-ai{color:#D85A30}.bn-po{color:#185FA5}.bn-sh{color:var(--brown)}
/* Conclusion */
.conc{background:linear-gradient(135deg,#E8F9F0,#EEF7FF);border:2.5px solid var(--mint-deep);border-radius:var(--r);padding:22px 22px 18px;margin:24px 0}
.conc-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.conc-h img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.conc-h h3{font-size:16px;color:#0F6E56}
.conc ul{list-style:none;padding:0}
.conc li{padding:7px 0;font-size:13px;border-bottom:1px dashed #9FE1CB}
.conc li:last-child{border:none}
.need{color:#D85A30}.ok{color:#0F6E56}
.conc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;flex-wrap:wrap;gap:8px}
.conc-note{font-size:11px;color:var(--text-light)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:16px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;border:none}
.chip:hover{transform:translateY(-1px)}
.chip-x{background:var(--lavender);color:#534AB7;border:1px solid var(--lavender-deep)}
.chip-x:hover{background:var(--lavender-deep);color:#FFF}
.chip-nk{background:var(--mint);color:#0F6E56;border:1px solid var(--mint-deep)}
/* SNS bar — icon only buttons */
.sns{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:12px 16px;margin:18px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sns-l{font-size:12px;font-weight:700;color:var(--text-mid)}
.sns-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .15s}
.sns-icon:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.sns-icon.x{background:#000}
.sns-icon.fb{background:#1877F2}
.sns-icon svg{width:18px;height:18px;fill:#FFF}
.sns-icon.cp{background:var(--bg);border:1.5px solid var(--border)}
.sns-icon.cp svg{fill:var(--text-mid)}
.sns-hint{margin-left:auto;font-size:10px;color:var(--text-faint)}
/* Section */
h2.sec{margin:32px 0 12px;font-size:17px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:3px solid var(--gold)}
/* Pbox */
.pbox{background:#EEF7FF;border-left:4px solid #378ADD;border-radius:0 var(--rs) var(--rs) 0;padding:13px 14px;margin:16px 0;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.pbox img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pbox strong{color:#185FA5}
/* Table */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--rs);overflow:hidden;margin:12px 0;font-size:12px}
.tbl th{background:var(--navy);color:#FFF;padding:9px 10px;text-align:left;font-weight:500}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);background:var(--white)}
.tbl tr:nth-child(even) td{background:#FAFAF7}
.tbl tr.red td{background:#FEF0F0}
.tbl tr:last-child td{border-bottom:none}
/* Tool card */
.tc{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:14px 16px;margin:16px 0;display:flex;align-items:center;gap:12px;transition:all .2s;cursor:pointer;text-decoration:none;color:var(--text)}
.tc:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(200,168,78,.15);transform:translateY(-2px)}
.tc-i{font-size:26px}.tc-h{font-size:13px;font-weight:700;color:var(--navy)}.tc-p{font-size:11px;color:var(--text-light)}.tc-nk{font-size:10px;color:var(--mint-deep);margin-top:2px}
.tc-b{margin-left:auto;background:var(--mint);color:#0F6E56;font-size:10px;font-weight:700;padding:4px 10px;border-radius:12px;white-space:nowrap}
/* FAQ */
.faq{border:1.5px solid var(--border);border-radius:var(--rs);margin:8px 0;overflow:hidden;background:var(--white)}
.faq-q{padding:12px 14px;font-weight:700;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.faq-q:hover{background:#FAFAF7}
.faq-q::after{content:'+';font-size:16px;color:var(--text-faint);transition:transform .2s;font-weight:400}
.faq.open .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 14px 12px;font-size:12px;color:var(--text-mid);display:none;line-height:1.8}
.faq.open .faq-a{display:block}
.faq-nk{font-size:10px;color:var(--text-faint);margin-top:4px;font-weight:400}
/* CTA */
.cta{background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:20px;padding:36px 24px;text-align:center;margin:32px 0;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:rgba(200,168,78,.08)}
.cta h2{color:#FFF;font-size:18px;font-weight:700;line-height:1.6;margin-bottom:6px}
.cta-nk{color:rgba(255,255,255,.6);font-size:12px;margin-bottom:16px}
.cta-stats{display:flex;justify-content:center;gap:24px;margin-bottom:20px;flex-wrap:wrap}
.cta-s{text-align:center}
.cta-n{font-size:24px;font-weight:900;color:var(--gold)}
.cta-l{font-size:10px;color:rgba(255,255,255,.6);margin-top:2px}
.cta-btn{display:inline-block;background:var(--gold);color:var(--navy);font-size:15px;font-weight:700;padding:14px 36px;border-radius:28px;text-decoration:none;transition:all .2s;border:none;cursor:pointer;letter-spacing:.5px}
.cta-btn:hover{background:#D4B055;transform:scale(1.03);box-shadow:0 4px 16px rgba(200,168,78,.4)}
.cta-price{color:rgba(255,255,255,.5);font-size:11px;margin-top:10px}
.cta-upd{color:rgba(255,255,255,.3);font-size:9px;margin-top:4px}
/* Tools */
.tz{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:20px;margin:20px 0}
.tz h3{font-size:14px;color:var(--navy);margin-bottom:10px;font-weight:700}
.tz-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tz-i{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:var(--rs);background:var(--bg);font-size:11px;text-decoration:none;color:var(--text);transition:all .12s;font-weight:500}
.tz-i:hover{background:var(--sky);transform:translateX(2px)}
.tz-i span:first-child{font-size:16px}
.bks{display:flex;gap:8px;margin-top:10px}
.bk{flex:1;background:var(--peach);border-radius:var(--rs);padding:12px 8px;text-align:center;text-decoration:none;color:var(--text);font-size:10px;line-height:1.5;transition:all .12s}
.bk:hover{background:var(--peach-deep);transform:translateY(-2px)}
.bk .pr{font-weight:900;color:#D85A30;font-size:14px;display:block;margin-top:3px}
/* Growth */
.gl{border:1.5px dashed var(--border);border-radius:var(--rs);padding:12px 14px;margin:16px 0}
.gl summary{font-size:11px;font-weight:700;color:var(--text-light);cursor:pointer}
.gl table{width:100%;margin-top:6px;font-size:10px;color:var(--text-mid)}
.gl td{padding:3px 5px;vertical-align:top}
.nk-note{color:var(--mint-deep);font-weight:500}
/* Sanpouraku */
.sp{background:linear-gradient(135deg,var(--peach),var(--mint));border-radius:var(--r);padding:24px 20px;margin:20px 0;text-align:center}
.sp h3{font-size:15px;color:var(--navy);margin-bottom:4px}
.sp-phil{font-size:11px;color:var(--brown);margin-bottom:4px;font-style:italic}
.sp p{font-size:12px;color:var(--text-mid);margin-bottom:14px}
.sp-bs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sp-b{padding:9px 20px;border-radius:20px;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .15s}
.sp-b:hover{transform:translateY(-1px)}
.sp-b.v{background:var(--white);color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sp-b.g{background:var(--gold);color:var(--navy)}
/* Author */
.au{display:flex;gap:12px;align-items:center;padding:16px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);margin:20px 0}
.au img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2.5px solid var(--sky-deep)}
.au h4{font-size:13px;color:var(--navy);font-weight:700}
.au p{font-size:11px;color:var(--text-light);line-height:1.6}
/* Follow */
.fw{background:var(--navy);border-radius:var(--r);padding:16px 20px;margin:20px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fw-t{color:rgba(255,255,255,.85);font-size:12px;flex:1}
.fw-t strong{color:var(--gold)}
.fw .sns-icon{width:32px;height:32px}
.fw .sns-icon svg{width:16px;height:16px}
/* Footer */
.ft{text-align:center;padding:24px 0;font-size:10px;color:var(--text-faint);background:#FFFFFF}
.ft img{height:36px;margin:0 auto 8px}

/* Related articles */
.rel{margin:24px 0}
.rel h3{font-size:14px;color:var(--navy);margin-bottom:10px;font-weight:700}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rel-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rs);padding:14px;text-decoration:none;color:var(--text);transition:all .15s;display:flex;gap:10px;align-items:center}
.rel-card:hover{border-color:var(--gold);box-shadow:0 3px 12px rgba(200,168,78,.12);transform:translateY(-2px)}
.rel-card img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.rel-title{font-size:12px;font-weight:700;color:var(--navy);line-height:1.4}
.rel-tag{font-size:9px;color:var(--text-faint);margin-top:2px}
/* Sidebar note */
.sidebar-note{background:var(--sky);border-radius:var(--rs);padding:12px 14px;margin:16px 0;font-size:11px;color:var(--text-mid);text-align:center;border:1px dashed var(--sky-deep)}.sidebar-note strong{color:var(--navy)}

@media(max-width:640px){
.hero-bg{height:200px}.hero h1{font-size:17px}.tz-g{grid-template-columns:1fr}.cta-stats{gap:14px}.fw{flex-direction:column;text-align:center}.sns-hint{margin-left:0}.rel-grid{grid-template-columns:1fr}
}

/* === 全部盛り7機能用CSS === */

/* 機能3: 3カ国語切り替えボタン */
.lang-sw{display:flex;gap:4px;margin-left:8px}
.lang-sw a{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;text-decoration:none;color:var(--text-mid);background:var(--bg);border:1px solid var(--border);transition:all .15s}
.lang-sw a.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.lang-sw a:hover{border-color:var(--gold)}

/* 機能4: AIO引用スコアカード */
.aio{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:16px 18px;margin:20px 0}
.aio h3{font-size:13px;color:var(--navy);margin-bottom:8px;font-weight:700}
.aio-item{font-size:12px;padding:4px 0;color:var(--text-mid)}

/* 機能7: 行動連動CTA スティッキーバー */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--navy);color:#FFF;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;z-index:1000;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta a{background:var(--gold);color:var(--navy);padding:6px 16px;border-radius:16px;font-size:11px;font-weight:700;text-decoration:none;transition:all .15s}
.sticky-cta a:hover{background:#D4B055}

/* Toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#FFF;padding:10px 20px;border-radius:var(--rs);font-size:12px;opacity:0;transition:all .3s;z-index:1001;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}