@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: #fff;
  --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',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:960px;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:960px;margin:0 auto;padding:40px 24px 80px;}
.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.6em;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 .hl{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;margin-bottom:16px;}
.hero-tag{padding:5px 13px;background:var(--bg);border-radius:50px;font-size:0.8em;color:var(--text-muted);border:1px solid var(--border);}
.last-updated{font-size:0.78em;color:var(--text-muted);}

/* ===== 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;}

/* ===== Section ===== */
.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);}

/* ===== Member Card Grid ===== */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:20px;}
.member-card{background:var(--white);border:2px solid var(--border);border-radius:var(--radius-sm);padding:20px;transition:all 0.3s;position:relative;overflow:hidden;}
.member-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-dark));transform:scaleX(0);transition:transform 0.3s;}
.member-card:hover::before{transform:scaleX(1);}
.member-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--primary);}
.mc-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;}
.mc-emoji{font-size:2.4em;flex-shrink:0;}
.mc-info{flex:1;}
.mc-name{font-size:1.1em;font-weight:800;color:var(--text);margin-bottom:3px;}
.mc-role{font-size:0.78em;color:var(--text-muted);}
.mc-type-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:50px;font-size:0.82em;font-weight:800;margin-bottom:10px;}
.mc-desc{font-size:0.9em;color:var(--text-muted);line-height:1.7;}
.mc-source{font-size:0.72em;color:var(--text-muted);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
.mc-source span{background:#f5f5f5;padding:2px 6px;border-radius:4px;}

/* Type badge colors */
.type-analyst{background:#f0ebff;color:#5b21b6;border:1px solid #c4b5fd;}
.type-diplomat{background:#fce8f5;color:#9b2155;border:1px solid #f9a8d4;}
.type-sentinel{background:#e8f4fd;color:#1e40af;border:1px solid #93c5fd;}
.type-explorer{background:#fff3e8;color:#9a3412;border:1px solid #fed7aa;}

/* ===== Quick Table ===== */
.mbti-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.92em;}
.mbti-table th{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:11px 14px;text-align:left;font-weight:700;}
.mbti-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.mbti-table tr:last-child td{border-bottom:none;}
.mbti-table tr:hover td{background:var(--bg);}
.mbti-table .type-cell{font-weight:900;font-size:1.05em;}

/* ===== Analysis Card ===== */
.analysis-card{border-radius:var(--radius-sm);border:2px solid var(--border);overflow:hidden;margin-bottom:18px;transition:all 0.3s;}
.analysis-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.ac-head{display:flex;align-items:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;}
.ac-emoji{font-size:1.6em;flex-shrink:0;}
.ac-title{font-size:1.05em;font-weight:700;}
.ac-type{margin-left:auto;font-size:1.4em;font-weight:900;background:rgba(255,255,255,0.22);padding:6px 14px;border-radius:50px;}
.ac-body{padding:22px;background:var(--white);}
.ac-body p{line-height:1.95;color:var(--text);margin-bottom:10px;}
.ac-body p:last-child{margin-bottom:0;}
.ac-pts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.ac-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;}

/* ===== Compat Section ===== */
.compat-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:16px 0;}
.cmc{padding:12px;border-radius:10px;border:2px solid;text-align:center;font-size:0.85em;text-decoration:none;transition:all 0.3s;display:block;}
.cmc:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.cmc.dual{border-color:var(--dual-color);background:linear-gradient(135deg,#f1f8e9,#e8f5e9);color:#2e7d32;}
.cmc.good{border-color:var(--good-color);background:linear-gradient(135deg,#f9fbe7,#f1f8e9);color:#558b2f;}
.cmc.bad{border-color:var(--bad-color);background:linear-gradient(135deg,#ffebee,#ffcdd2);color:#b71c1c;}
.cmc-type{font-size:1.1em;font-weight:900;}
.cmc-label{font-size:0.7em;margin-top:2px;}

/* ===== Quote / Info ===== */
.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;}

/* ===== Type Distribution Chart (CSS bars) ===== */
.type-dist{margin:16px 0;}
.td-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.td-label{font-size:0.85em;font-weight:700;min-width:80px;}
.td-bar-wrap{flex:1;height:14px;background:#f0f0f0;border-radius:7px;overflow:hidden;}
.td-bar{height:100%;border-radius:7px;transition:width 1s ease;}
.td-bar.diplomat{background:linear-gradient(90deg,#ff6b9d,#c44569);}
.td-bar.analyst{background:linear-gradient(90deg,#7c3aed,#5b21b6);}
.td-bar.sentinel{background:linear-gradient(90deg,#2563eb,#1d4ed8);}
.td-bar.explorer{background:linear-gradient(90deg,#ea580c,#c2410c);}
.td-count{font-size:0.8em;color:var(--text-muted);min-width:30px;text-align:right;}

/* ===== 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:600px;}
.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(160px,1fr));gap:12px;}
.rel-card{background:var(--white);border-radius:var(--radius-sm);border:2px solid var(--border);padding:14px;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-card-title{font-size:0.88em;font-weight:700;line-height:1.4;}
.rel-card-sub{font-size:0.75em;color:var(--text-muted);}

/* ===== 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;}

/* ===== Expanded Content (added for SEO) ===== */
.compat-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:0.92em;}
.compat-table th,.compat-table td{border:1px solid #ddd;padding:10px 12px;text-align:center;}
.compat-table th{background:#f5f0ff;font-weight:700;}
.compat-table td.compat-good{background:#e8f5e9;color:#2e7d32;font-weight:700;}
.compat-table td.compat-mid{background:#fff8e1;color:#f57f17;font-weight:700;}
.compat-table td.compat-chal{background:#fce4ec;color:#c62828;font-weight:700;}
.compat-table td.compat-self{background:#f5f5f5;color:#999;}
.detail-block{background:#fafafa;border:1px solid #e8e8e8;border-radius:12px;padding:20px 24px;margin:16px 0;}
.detail-block h3{font-size:1.05em;color:#6200ea;margin:0 0 10px 0;}
.detail-ul{list-style:none;padding:0;margin:0;}
.detail-ul li{padding:5px 0;border-bottom:1px dashed #eee;line-height:1.7;}
.detail-ul li:last-child{border-bottom:none;}
.detail-ul li::before{content:"▸ ";color:#6200ea;}
.famous-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0;}
.famous-chip{background:linear-gradient(135deg,#ede7f6,#e8eaf6);border-radius:20px;padding:6px 12px;text-align:center;font-size:0.85em;font-weight:600;color:#4527a0;}
.strengths-weak{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;}
.sw-box{border-radius:10px;padding:14px 16px;}
.sw-box.str{background:#e8f5e9;border-left:4px solid #43a047;}
.sw-box.wek{background:#fce4ec;border-left:4px solid #e53935;}
.sw-box h4{margin:0 0 8px 0;font-size:0.95em;}
.sw-box ul{margin:0;padding-left:18px;}
.sw-box ul li{font-size:0.88em;line-height:1.8;}
.group-compare{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.88em;}
.group-compare th,.group-compare td{border:1px solid #e0e0e0;padding:9px 11px;text-align:center;}
.group-compare th{background:#e8eaf6;font-weight:700;}
.group-compare tr:nth-child(even) td{background:#fafafa;}
.ep-box{background:linear-gradient(135deg,#f3e5f5,#e8eaf6);border-radius:10px;padding:14px 18px;margin:12px 0;border-left:4px solid #7b1fa2;font-size:0.93em;line-height:1.9;}
.ep-box .ep-label{display:block;font-size:0.8em;font-weight:700;color:#7b1fa2;letter-spacing:1px;margin-bottom:6px;}
.toc-box{background:#f8f4ff;border-radius:12px;padding:20px 24px;margin-bottom:28px;}
.toc-box ul{margin:0;padding-left:20px;line-height:2.2;}
.toc-title{font-size:1.05em;font-weight:700;color:#6200ea;margin:0 0 12px 0;}
.toc-list{margin:0;padding-left:20px;line-height:2.2;}
.toc-list li{font-size:0.95em;color:#333;}
.toc-list a{color:#6200ea;text-decoration:none;}
.toc-list a:hover{text-decoration:underline;}
.toc-list ul{margin:4px 0 4px 16px;line-height:2;}
.toc-list ul li{font-size:0.88em;}
.sw-title{font-size:0.95em;font-weight:700;margin:0 0 8px 0;}
@media(max-width:600px){.strengths-weak{grid-template-columns:1fr;}.famous-grid{grid-template-columns:repeat(3,1fr);}.compat-table{font-size:0.78em;}.compat-table th,.compat-table td{padding:6px 7px;}}

/* ===== 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;}
  .member-grid{grid-template-columns:1fr;}
  .ac-pts{grid-template-columns:1fr;}
  .compat-mini-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px){
  .hero h1{font-size:1.35em;}
  .section-title{font-size:1.2em;}
  .cta-section h2{font-size:1.35em;}
  .member-grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr 1fr;}
  .compat-mini-grid{grid-template-columns:repeat(2,1fr);}
}