@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&display=swap');

:root {
  --primary: #ff6b9d;
  --primary-dark: #c44569;
  --bg: #fff5f8;
  --white: #ffffff;
  --text: #2d2d2d;
  --text-muted: #777;
  --border: #f0dde6;
  --shadow: 0 4px 24px rgba(255,107,157,0.10);
  --shadow-hover: 0 8px 40px rgba(255,107,157,0.18);
  --radius: 20px;
  --radius-sm: 12px;
  --dual-color: #4CAF50;
  --good-color: #7CB342;
  --normal-color: #F9A825;
  --bad-color: #E53935;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  background:linear-gradient(135deg,#fff5f8 0%,#ffeef5 50%,#fff0f7 100%);
  color:var(--text);line-height:1.8;min-height:100vh;
}

/* ========== Nav ========== */
.site-nav{
  background:var(--white);border-bottom:2px solid var(--border);
  padding:14px 24px;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(255,107,157,0.09);
}
.nav-inner{
  max-width:900px;margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
}
.nav-logo{font-size:1.05em;font-weight:700;color:var(--primary);text-decoration:none;}
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 22px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:white;text-decoration:none;border-radius:50px;
  font-size:0.88em;font-weight:700;transition:all 0.3s;
  box-shadow:0 4px 12px rgba(255,107,157,0.35);white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,157,0.45);}

/* ========== Layout ========== */
.article-wrap{max-width:900px;margin:0 auto;padding:40px 24px 80px;}

/* Breadcrumb */
.breadcrumb{font-size:0.83em;color:var(--text-muted);margin-bottom:28px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.breadcrumb a{color:var(--primary);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* ========== Hero ========== */
.hero{
  background:linear-gradient(135deg,var(--white) 0%,#fff5f8 100%);
  border-radius:var(--radius);padding:48px 40px;margin-bottom:36px;
  box-shadow:var(--shadow);border:2px solid var(--border);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-dark) 100%);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:5px 16px;
  border-radius:50px;font-size:0.82em;font-weight:700;
  margin-bottom:16px;color:white;letter-spacing:0.05em;
}
.hero-emoji{font-size:3.8em;margin-bottom:14px;display:block;line-height:1;}
.hero h1{
  font-size:clamp(1.5em,4vw,2.3em);font-weight:900;
  color:var(--text);margin-bottom:10px;line-height:1.3;
}
.hero h1 .tc{color:var(--primary);}
.hero-sub{font-size:1.05em;color:var(--text-muted);margin-bottom:22px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;}
.hero-tag{
  padding:5px 13px;background:var(--bg);border-radius:50px;
  font-size:0.8em;color:var(--text-muted);border:1px solid var(--border);
}
.type-profile{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;
}
.type-profile-item{
  background:var(--bg);border-radius:var(--radius-sm);
  padding:14px 18px;border:1px solid var(--border);
}
.type-profile-label{font-size:0.78em;color:var(--text-muted);margin-bottom:4px;}
.type-profile-value{font-size:0.95em;font-weight:700;color:var(--text);}

/* ========== Lead ========== */
.lead-section{
  background:var(--white);border-radius:var(--radius);
  padding:36px 40px;margin-bottom:32px;
  box-shadow:var(--shadow);border-left:5px solid var(--primary);
}
.lead-section p{font-size:1.05em;line-height:2;color:var(--text);}
.lead-section p+p{margin-top:16px;}

/* ========== Sections ========== */
.section{
  background:var(--white);border-radius:var(--radius);
  padding:40px;margin-bottom:28px;box-shadow:var(--shadow);
}
.section-title{
  font-size:1.45em;font-weight:800;margin-bottom:6px;
  display:flex;align-items:center;gap:10px;color:var(--text);
}
.section-sub{
  color:var(--text-muted);font-size:0.93em;margin-bottom:24px;
  padding-bottom:18px;border-bottom:2px dashed var(--border);
}

/* ========== Quick Ranking Grid ========== */
.rank-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
}
.rk{
  padding:14px;border-radius:var(--radius-sm);border:2px solid;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;transition:all 0.3s;
}
.rk:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.rk.dual{border-color:var(--dual-color);background:linear-gradient(135deg,#f1f8e9,#e8f5e9);}
.rk.good{border-color:var(--good-color);background:linear-gradient(135deg,#f9fbe7,#f1f8e9);}
.rk.normal{border-color:var(--normal-color);background:linear-gradient(135deg,#fffde7,#fff9c4);}
.rk.bad{border-color:var(--bad-color);background:linear-gradient(135deg,#ffebee,#ffcdd2);}

.rk-score{font-size:1.4em;font-weight:900;}
.dual .rk-score{color:var(--dual-color);}
.good .rk-score{color:var(--good-color);}
.normal .rk-score{color:#e6ac00;}
.bad .rk-score{color:var(--bad-color);}

.rk-type{font-size:1.1em;font-weight:800;color:var(--text);}
.rk-name{font-size:0.75em;color:var(--text-muted);line-height:1.3;}
.rk-lbl{
  font-size:0.72em;font-weight:700;padding:3px 10px;
  border-radius:50px;color:white;
}
.dual .rk-lbl{background:var(--dual-color);}
.good .rk-lbl{background:var(--good-color);}
.normal .rk-lbl{background:var(--normal-color);}
.bad .rk-lbl{background:var(--bad-color);}

/* ========== Compat Cards ========== */
.cc{border-radius:var(--radius-sm);border:2px solid;overflow:hidden;margin-bottom:18px;transition:all 0.3s;}
.cc:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.cc.dual{border-color:var(--dual-color);}
.cc.good{border-color:var(--good-color);}
.cc.normal{border-color:var(--normal-color);}
.cc.bad{border-color:var(--bad-color);}

.cc-head{display:flex;align-items:center;gap:14px;padding:18px 22px;color:white;}
.cc.dual .cc-head{background:linear-gradient(135deg,#43a047,#2e7d32);}
.cc.good .cc-head{background:linear-gradient(135deg,#7cb342,#558b2f);}
.cc.normal .cc-head{background:linear-gradient(135deg,#f9a825,#f57f17);}
.cc.bad .cc-head{background:linear-gradient(135deg,#e53935,#b71c1c);}

.cc-type{font-size:1.7em;font-weight:900;min-width:60px;}
.cc-info{flex:1;}
.cc-info h3{font-size:1.05em;font-weight:700;margin-bottom:2px;}
.cc-info p{font-size:0.82em;opacity:0.92;}
.cc-score{font-size:1.5em;font-weight:900;background:rgba(255,255,255,0.22);padding:7px 14px;border-radius:50px;}

.cc-body{padding:22px;background:var(--white);}
.cc-body p{line-height:1.95;color:var(--text);margin-bottom:10px;}
.cc-body p:last-child{margin-bottom:0;}

.cc-pts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.cc-pt{
  background:var(--bg);border-radius:10px;padding:10px 14px;
  font-size:0.88em;color:var(--text-muted);display:flex;
  align-items:flex-start;gap:7px;line-height:1.6;
}

/* ========== Sub compat list ========== */
.sub-cc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.sub-cc-item{
  border-radius:var(--radius-sm);border:2px solid;padding:16px;
  transition:all 0.3s;
}
.sub-cc-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.sub-cc-item.good{border-color:var(--good-color);background:linear-gradient(135deg,#f9fbe7,#f1f8e9);}
.sub-cc-item.normal{border-color:var(--normal-color);background:linear-gradient(135deg,#fffde7,#fff9c4);}
.sub-cc-item.bad{border-color:var(--bad-color);background:linear-gradient(135deg,#ffebee,#ffcdd2);}

.sub-cc-type{font-size:1.2em;font-weight:900;margin-bottom:2px;}
.good .sub-cc-type{color:var(--good-color);}
.normal .sub-cc-type{color:#e6ac00;}
.bad .sub-cc-type{color:var(--bad-color);}
.sub-cc-name{font-size:0.8em;color:var(--text-muted);margin-bottom:8px;}
.sub-cc-desc{font-size:0.88em;color:var(--text);line-height:1.7;}

/* ========== Quote / Info boxes ========== */
.quote-box{
  background:linear-gradient(135deg,#fff5f8,#ffeef5);
  border-left:5px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:18px 22px;margin:20px 0;font-style:italic;
  color:var(--text);font-size:1.03em;line-height:1.85;
}
.info-box{
  background:linear-gradient(135deg,#e3f2fd,#bbdefb);
  border-radius:var(--radius-sm);padding:18px 22px;
  margin:20px 0;border-left:5px solid #1e88e5;
}
.info-box p{color:#1565c0;line-height:1.85;}
.warn-box{
  background:linear-gradient(135deg,#fff3e0,#ffe0b2);
  border-radius:var(--radius-sm);padding:18px 22px;
  margin:20px 0;border-left:5px solid #fb8c00;
}
.warn-box p{color:#e65100;line-height:1.85;}

/* ========== Table ========== */
.compat-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:0.93em;}
.compat-table th{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:white;padding:12px 14px;text-align:left;font-weight:700;
}
.compat-table td{padding:11px 14px;border-bottom:1px solid var(--border);line-height:1.6;}
.compat-table tr:last-child td{border-bottom:none;}
.compat-table tr:hover td{background:var(--bg);}
.ct-dual{color:var(--dual-color);font-weight:700;}
.ct-good{color:var(--good-color);font-weight:700;}
.ct-normal{color:#e6ac00;font-weight:700;}
.ct-bad{color:var(--bad-color);font-weight:700;}

/* ========== FAQ ========== */
.faq-item{border:2px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden;}
.faq-q{
  width:100%;text-align:left;padding:18px 22px;
  background:var(--white);border:none;cursor:pointer;
  font-size:0.97em;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:10px;
  transition:background 0.3s;font-family:inherit;
}
.faq-q:hover{background:var(--bg);}
.faq-qi{color:var(--primary);font-size:1.15em;flex-shrink:0;}
.faq-arr{margin-left:auto;font-size:0.75em;color:var(--text-muted);transition:transform 0.3s;}
.faq-item.open .faq-arr{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.faq-item.open .faq-a{max-height:500px;}
.faq-ai{
  padding:18px 22px;background:var(--bg);
  border-top:1px dashed var(--border);
  line-height:1.9;color:var(--text);font-size:0.95em;
}

/* ========== CTA ========== */
.cta-section{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  border-radius:var(--radius);padding:48px 40px;text-align:center;
  margin-bottom:28px;box-shadow:0 8px 32px rgba(255,107,157,0.3);
  position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,0.1) 0%,transparent 60%);
  pointer-events:none;
}
.cta-section h2{font-size:1.75em;font-weight:900;color:white;margin-bottom:10px;position:relative;z-index:1;}
.cta-section p{color:rgba(255,255,255,0.9);margin-bottom:26px;font-size:1.03em;position:relative;z-index:1;}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 44px;background:white;color:var(--primary);
  text-decoration:none;border-radius:50px;font-size:1.1em;
  font-weight:900;transition:all 0.3s;box-shadow:0 4px 16px rgba(0,0,0,0.15);
  position:relative;z-index:1;
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,0.2);}

/* ========== Related ========== */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.rel-card{
  background:var(--white);border-radius:var(--radius-sm);
  border:2px solid var(--border);padding:14px 16px;
  text-decoration:none;color:var(--text);transition:all 0.3s;
  display:flex;flex-direction:column;gap:4px;
}
.rel-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px);}
.rel-type{font-size:1.1em;font-weight:900;color:var(--primary);}
.rel-name{font-size:0.75em;color:var(--text-muted);}
.rel-ttl{font-size:0.83em;font-weight:600;line-height:1.4;margin-top:2px;}

/* ========== Footer ========== */
.article-footer{text-align:center;padding:32px;color:var(--text-muted);font-size:0.88em;}
.article-footer a{color:var(--primary);text-decoration:none;}
.article-footer a:hover{text-decoration:underline;}

/* ========== Warn tier (40点) ========== */
.rk.warn{border-color:#FF8F00;background:linear-gradient(135deg,#fff8e1,#ffecb3);}
.warn .rk-score{color:#FF8F00;}
.warn .rk-lbl{background:#FF8F00;}
.sub-cc-item.warn{border-color:#FF8F00;background:linear-gradient(135deg,#fff8e1,#ffecb3);}
.warn .sub-cc-type{color:#FF8F00;}

/* ========== Cognitive Functions ========== */
.cog-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.cog-card{border-radius:var(--radius-sm);padding:20px;border:2px solid;}
.cog-label{font-size:0.75em;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);}
.cog-func{font-size:1.9em;font-weight:900;margin-bottom:4px;}
.cog-name{font-size:0.88em;font-weight:700;margin-bottom:8px;color:var(--text);}
.cog-desc{font-size:0.85em;line-height:1.7;color:var(--text);}
@media(max-width:600px){.cog-grid{grid-template-columns:1fr;}}

/* ========== Responsive ========== */
@media(max-width:768px){
  .article-wrap{padding:24px 16px 60px;}
  .hero{padding:32px 22px;}
  .section{padding:28px 18px;}
  .lead-section{padding:28px 18px;}
  .cta-section{padding:36px 20px;}
  .rank-grid{grid-template-columns:repeat(2,1fr);}
  .cc-pts{grid-template-columns:1fr;}
  .sub-cc{grid-template-columns:1fr;}
  .type-profile{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .hero h1{font-size:1.35em;}
  .section-title{font-size:1.2em;}
  .cta-section h2{font-size:1.35em;}
  .rank-grid{grid-template-columns:1fr 1fr;}
  .related-grid{grid-template-columns:1fr 1fr;}
}