/* 全体のリセットとベース設定 */
:root {
  --color-bg: #FFFBF5;
  --color-text: #2D3436;
  --color-primary: #4ECDC4;    /* ミントグリーン */
  --color-secondary: #FF6B6B;  /* サーモンピンク */
  --color-accent: #FFE66D;     /* イエロー */
  --color-border: #2D3436;
  --border-width: 3px;
  --shadow-offset: 4px;
  --radius-l: 20px;
  --radius-m: 12px;
  --radius-s: 8px;
  
  /* チャート用カラー */
  --color-energy-blue: #0984e3;
  --color-energy-light: #74b9ff;
  --color-info-orange: #fdcb6e;
  --color-info-light: #ffeaa7;
  --color-decide-green: #00b894;
  --color-decide-light: #55efc4;
  --color-life-purple: #6c5ce7;
  --color-life-light: #a29bfe;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Kaku Gothic ProN', sans-serif;
  background: var(--color-bg);
  background-image: radial-gradient(#E0E0E0 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* 「他己」強調用のクラス */
.text-red {
  color: var(--color-secondary);
  display: inline;
}

/* ヘッダー */
.header {
  background: #fff;
  padding: 12px 20px;
  border-bottom: var(--border-width) solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 0 rgba(0,0,0,0.05);
}

.header-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform .2s;
}
.logo-link:hover { transform: scale(1.05) rotate(-2deg); }

.logo-icon {
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 2px 2px 0 var(--color-border);
}

.logo-text {
  font-size: 20px;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 1px;
}

/* ナビゲーション */
.nav-desktop { display: none; gap: 16px; }
.nav-link {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 20px;
  border: 2px solid transparent;
  transition: all .2s;
}
.nav-link:hover {
  background: #fff;
  border-color: var(--color-border);
  box-shadow: 2px 2px 0 var(--color-border);
  transform: translate(-2px, -2px);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--color-border);
  border-radius: 3px;
  transition: all .3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  position: fixed;
  top: 74px; 
  left: 0; right: 0; bottom: 0;
  background: rgba(45, 52, 54, 0.95);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  z-index: 99;
}
.mobile-menu.active { opacity: 1; visibility: visible; }
.mobile-nav {
  background: #fff;
  border-bottom: var(--border-width) solid var(--color-border);
  padding: 20px;
}
.mobile-nav-link {
  display: block;
  padding: 16px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 800;
  font-size: 18px;
  border-bottom: 2px dashed #eee;
  text-align: center;
}

@media (min-width:768px){
  .nav-desktop{display:flex}
  .hamburger{display:none}
  .mobile-menu{display:none}
}

/* コンテナ・カード */
.container { max-width: 800px; margin: 40px auto; padding: 0 10px; }
.card {
  background: #fff;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-l);
  padding: 48px 32px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-border);
  position: relative;
  overflow: visible;
}
@media (max-width: 480px) {
  .card { padding: 32px 20px; }
}

/* メインタイトル装飾 */
.main-title-label {
  font-size: 1em;
  background: var(--color-text);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

h1 {
  font-size: 2.2em;
  font-weight: 900;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.3;
}
.subtitle {
  text-align: center;
  font-weight: 700;
  color: #636e72;
  margin-bottom: 40px;
}

/* 共通サブ見出し */
.result-subsection-title {
  font-size: 1.3em;
  font-weight: 900;
  color: var(--color-text);
  background: linear-gradient(transparent 60%, var(--color-accent) 60%);
  display: inline-block;
  margin-bottom: 24px;
  padding: 0 8px;
}
.result-section-container { margin-bottom: 64px; }

/* 入力フォーム */
.input-group { margin-bottom: 24px; }
label { display: block; margin-bottom: 10px; font-weight: 800; font-size: 1.1em; }
input[type="text"] {
  width: 100%;
  padding: 16px 20px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  font-size: 18px;
  font-family: inherit;
  font-weight: 700;
  background: #f9f9f9;
  transition: all .2s;
}
input[type="text"]:focus {
  outline: none;
  background: #fff;
  box-shadow: 4px 4px 0 var(--color-primary);
  border-color: var(--color-text);
}

/* ボタン */
.btn {
  display: block;
  width: 100%;
  padding: 20px;
  background: var(--color-primary);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  font-size: 1.3em;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-border);
  transition: all .1s;
  margin-top: 32px;
  text-align: center;
  text-decoration: none;
  border: none;
}
.btn:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-border); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-border); }
.btn:disabled { background: #dfe6e9; color: #b2bec3; border-color: #b2bec3; box-shadow: none; cursor: not-allowed; }
.btn-secondary { background: #fff; border: var(--border-width) solid var(--color-border); }
.btn-copy { background: var(--color-accent); margin-top: 16px; border: var(--border-width) solid var(--color-border); }

/* 画像保存ボタン(大きく調整) */
.btn-save-image {
  display: inline-block;
  background: #2D3436; color: #fff; 
  border: 3px solid #2D3436;
  border-radius: 40px;
  padding: 16px 40px; /* サイズアップ */
  font-weight: 900;
  font-size: 1.1em;   /* フォントサイズアップ */
  margin-top: 24px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  min-width: 240px;   /* 幅を確保 */
}
.btn-save-image:hover { background: #444; transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.2); }

/* 診断スタートボタン */
.choice-buttons { display: flex; flex-direction: column; gap: 24px; }
.choice-btn {
  padding: 24px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: 4px 4px 0 #ddd;
  cursor: pointer;
  transition: all .2s;
}
.choice-btn.choice-recommended {
  background: var(--color-secondary);
  box-shadow: 6px 6px 0 var(--color-border);
  text-align: center;
  padding: 32px 20px;
  animation: pulse 2s infinite;
}
.choice-btn.choice-recommended:hover { background: #ff5252; animation: none; }
.choice-btn.choice-recommended .choice-btn-title {
  color: #fff; font-size: 1.8em; font-weight: 900; text-decoration: underline; margin-bottom: 8px; display: block;
}
.choice-btn.choice-recommended .choice-btn-desc { color: #fff; font-weight: 700; opacity: 1; font-size: 1.1em; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* 質問セクション */
.section-title {
  font-size: 1.4em;
  font-weight: 900;
  background: #E0F7FA;
  color: #006064;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 20px;
  text-align: center;
  margin-bottom: 32px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.question-item {
  background: #fff; border: 2px solid #e0e0e0; padding: 24px 16px;
  border-radius: var(--radius-m); margin-bottom: 24px;
}
.question-text { font-size: 1.15em; font-weight: 800; margin-bottom: 24px; line-height: 1.5; text-align: center; }
.scale-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-items: center; margin: 20px 0; }
.circle-option { display: flex; justify-content: center; cursor: pointer; }
.circle-icon {
  border-radius: 50%; 
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1); 
  width: var(--w); aspect-ratio: 1/1; transition: all .2s;
}
.circle-option.selected .circle-icon { box-shadow: none; transform: translate(2px, 2px); }
.scale-labels { display: flex; justify-content: space-between; padding: 0 10px; font-weight: 800; font-size: 0.9em; }

/* プログレスバー */
.progress-dots { display: flex; justify-content: center; gap: 10px; margin: 20px 0; }
.progress-dot { width: 10px; height: 10px; background: #eee; border: 2px solid var(--color-border); border-radius: 50%; }
.progress-dot.active { background: var(--color-primary); transform: scale(1.3); }
.progress-dot.completed { background: var(--color-text); }
.progress-bar-outer { height: 16px; background: #fff; border: var(--border-width) solid var(--color-border); border-radius: 10px; margin-bottom: 24px; overflow: hidden; }
.progress-fill { background: var(--color-primary); height: 100%; border-right: var(--border-width) solid var(--color-border); }
.progress-text { text-align: right; font-weight: 900; font-size: 1.2em; margin-bottom: 4px; }

/* リザルト画面 - ヒーロー */
.result-hero-wrapper {
  max-width: 800px; margin: 0 auto 24px; padding: 40px 20px 20px;
  background-color: var(--color-bg);
  background-image: radial-gradient(#E0E0E0 1px, transparent 1px);
  background-size: 20px 20px;
  display: flex; flex-direction: column; align-items: center;
}
.result-hero {
  background: var(--color-text); color: #fff; border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-l); padding: 48px 24px; text-align: center; width: 100%;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.2); position: relative; overflow: hidden;
}
.result-hero::before {
  content: ""; position: absolute; top:0; left:0; right:0; bottom:0;
  background-image: radial-gradient(rgba(255,255,255,0.2) 2px, transparent 2px);
  background-size: 20px 20px; pointer-events: none;
}
.result-hero[data-mbti^="IN"], .result-hero[data-mbti^="EN"] { background: #a29bfe; color: #2d3436; }
.result-hero[data-mbti^="IS"], .result-hero[data-mbti^="ES"] { background: #fab1a0; color: #2d3436; }

.hero-monster-image-wrapper {
  display: inline-block;
  width: 240px; height: 240px; 
  border-radius: 50%; overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,0.2);
  margin: 24px 0;
  background: #fff;
  transition: transform 0.3s ease;
}
.hero-monster-image-wrapper:hover { transform: scale(1.05) rotate(2deg); }
.hero-monster-name {
  font-size: 3.5em; font-weight: 900; 
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, 2px 2px 0 rgba(0,0,0,0.2);
  color: var(--color-text); margin-bottom: 4px;
}
.mbti-type { 
  font-family: 'Arial Black', sans-serif; font-size: 1.2em;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2); margin: 0; line-height: 1; color: #fff;
  opacity: 0.8; margin-bottom: 24px; letter-spacing: 1px;
}

/* ヒーロー内埋め込みステータス */
.hero-stats-container {
  margin-top: 24px; background: rgba(255, 255, 255, 0.95);
  border-radius: 12px; padding: 20px; text-align: left;
  color: #2D3436; border: 3px solid #2D3436;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.status-note { font-size: 0.75em; }

/* パーセンテージバー */
.percentage-section { margin: 40px 0; }
.percentage-item { margin-bottom: 24px; }
.percentage-title { font-weight: 800; margin-bottom: 6px; font-size: 0.95em; }
.pct-row { display: flex; align-items: center; gap: 8px; font-family: 'Arial Black', sans-serif; font-size: 0.9em; }
.pct-track { flex: 1; height: 20px; background: #fff; border: var(--border-width) solid var(--color-border); border-radius: 12px; position: relative; overflow: hidden; }
.pct-fill-left, .pct-fill-right { position: absolute; top: 0; bottom: 0; border-right: 2px solid rgba(0,0,0,0.1); }
.pct-fill-left { left: 0; background: var(--color-primary); }
.pct-fill-right { right: 0; background: var(--color-secondary); }
.percentage-labels { display: flex; justify-content: space-between; font-size: 0.8em; font-weight: 700; color: #666; margin-top: 4px; }

/* 説明セクション */
.explanation-section {
  background: #fff; border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-m); padding: 24px; margin: 48px 0; position: relative;
}
.explanation-section::after {
  content: ""; position: absolute; top: 6px; left: 6px; right: -6px; bottom: -6px;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m); z-index: -1; background: var(--color-accent);
}
.explanation-title { font-size: 1.3em; font-weight: 900; margin-bottom: 16px; }
.explanation-text { font-size: 1.05em; line-height: 1.8; }

/* キャラクター詳細 */
.character-full-details { margin-top: 40px; width: 100%; }
.character-detail-section { margin-bottom: 32px; }
.character-section-title {
  background: var(--color-accent); display: inline-block; padding: 6px 20px;
  border: 2px solid var(--color-border); border-radius: 20px; margin-bottom: 16px;
  box-shadow: 2px 2px 0 var(--color-border); color: var(--color-text); font-weight: 800; font-size: 1.1em;
}
.character-section-text { line-height: 1.8; font-size: 1.05em; }
.character-strengths-weaknesses { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 32px 0; }
@media (min-width: 600px) { .character-strengths-weaknesses { grid-template-columns: 1fr 1fr; } }
.strength-box, .weakness-box {
  border: var(--border-width) solid var(--color-border);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.05); background: #fff;
  padding: 24px; border-radius: var(--radius-m);
}
.strength-box { border-color: #2ecc71; background: #f0fff4; }
.weakness-box { border-color: #e74c3c; background: #fff5f5; }
.strength-box h4, .weakness-box h4 { font-size: 1.1em; margin-bottom: 12px; font-weight: 900; }
.strength-box ul, .weakness-box ul { list-style: none; padding-left: 4px; }
.strength-box li, .weakness-box li { margin-bottom: 8px; font-weight: 700; font-size: 0.95em; display: flex; align-items: flex-start; gap: 8px;}
.strength-box li::before { content: "✅"; }
.weakness-box li::before { content: "⚠️"; }

/* スキル・弱点バッジ */
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-badge, .weakness-badge {
  font-weight: 800; font-size: 0.9em; padding: 6px 12px;
  border-radius: 6px; box-shadow: 2px 2px 0 rgba(0,0,0,0.05); display: inline-block;
}
.skill-badge { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }
.weakness-badge { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; }

/* キャラクター情報 (鳴き声・生息地) */
.character-info-grid-3col {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px;
}
@media (min-width: 600px) { .character-info-grid-3col { grid-template-columns: 1fr 1fr; } }
.character-info-block {
  background: #f9f9f9; padding: 20px; border-radius: 12px;
  border: 2px solid #eee; display: flex; flex-direction: column; gap: 12px;
}
.character-info-header {
  font-weight: bold; color: #888; font-size: 0.9em; padding-bottom: 8px; border-bottom: 1px dashed #ccc;
}
.character-info-list { display: flex; flex-direction: column; gap: 8px; }
.character-info-pill {
  font-weight: 900; font-size: 1.0em; color: #2D3436; padding: 10px 14px;
  background: #fff; border-radius: 8px; border: 2px solid #ddd;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.05); transition: transform 0.1s;
}
.character-info-pill:hover { transform: translateX(2px); border-color: var(--color-primary); color: var(--color-primary); }

/* 仕事リスト */
.job-list { display: flex; flex-wrap: wrap; gap: 8px; }
.job-badge {
  font-weight: 900; font-size: 0.9em; color: #2D3436;
  padding: 6px 16px; background: #fff; border-radius: 20px;
  border: 2px solid #ddd; box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}

/* 本人と周りのズレ */
.comparison-row { 
  margin-bottom: 32px; background: #fff; border: 2px solid #eee; 
  border-radius: 12px; padding: 24px 20px; 
}
.compare-dual-bar-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }

/* 2個目以降の比較バーに上余白と区切り線を追加 */
.compare-dual-bar-container + .compare-dual-bar-container {
  margin-top: 40px;          /* 余白を広げる */
  padding-top: 32px;         /* パディングを追加 */
  border-top: 2px dashed #eee; /* 点線で区切る */
}

.compare-dual-labels { display: flex; justify-content: space-between; font-size: 0.85em; font-weight: 900; margin-bottom: 8px; }
.compare-label-L { color: #4ECDC4; }
.compare-label-R { color: #a29bfe; }
.compare-bar-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.compare-who-label { font-weight: 800; font-size: 0.9em; color: #555; text-align: left; }
.compare-bar-track {
  width: 100%; height: 20px; background: #f5f5f5; border-radius: 10px;
  position: relative; overflow: hidden; border: 1px solid #eee;
}
.compare-bar-fill-L, .compare-bar-fill-R { position: absolute; top: 0; bottom: 0; transition: width 0.8s ease; }
.compare-bar-fill-L { left: 0; background: #4ECDC4; border-right: 2px solid #fff; }
.compare-bar-fill-R { right: 0; background: #a29bfe; border-left: 2px solid #fff; }
.compare-bar-value {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 0.75em; font-weight: 900; color: #fff; padding: 0 6px; z-index: 2;
}
.compare-bar-value.v-left { left: 0; }
.compare-bar-value.v-right { right: 0; }

/* 理解度スコア表示 */
.score-section { text-align: center; margin-bottom: 40px; }
.score-circle {
  width: 140px; height: 140px; border-radius: 50%;
  background: #fff; border: 6px solid #FFE66D;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 20px auto; box-shadow: 0 8px 0 rgba(0,0,0,0.1);
}
.score-label { font-weight: 900; font-size: 0.9em; color: #888; margin-bottom: 4px; }
.score-value { font-weight: 900; font-size: 3.5em; color: #2D3436; line-height: 1; }
.score-comment { font-weight: 900; font-size: 1.1em; color: #FF6B6B; margin-top: 16px; }

/* 意見が割れた質問 */
.question-differences-section { margin-bottom: 64px; }
.diff-card {
  background: #fff; border: 2px solid #ddd; border-radius: 24px;
  padding: 32px 24px; margin-bottom: 32px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.diff-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.diff-q-badge {
  border: 2px solid #4ECDC4; color: #4ECDC4; background: #fff;
  padding: 4px 12px; border-radius: 20px; font-weight: 900; font-size: 1em;
}
.diff-tag {
  background: #FFEBEE; color: #FF5252; padding: 4px 12px;
  border-radius: 20px; font-weight: 800; font-size: 0.9em;
}
.diff-tag.gap-level-high { background: #FFEBEE; color: #FF5252; }
.diff-tag.gap-level-mid { background: #FFF3E0; color: #FF9800; }
.diff-question-text { font-size: 1.2em; font-weight: 900; color: #2D3436; margin-bottom: 24px; line-height: 1.5; }
.diff-compare-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 600px) {
  .diff-compare-row { flex-direction: column; gap: 8px; }
  .diff-arrow { transform: rotate(90deg); margin: 8px 0; }
}
.diff-box {
  flex: 1; border: 2px solid #eee; border-radius: 16px;
  padding: 20px 16px; text-align: center; background: #fff; width: 100%;
}
.diff-box-label { font-size: 0.9em; font-weight: 800; color: #888; margin-bottom: 16px; display: block; text-align: left; }
.diff-scale-container { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; height: 40px; }
.diff-circle {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ddd;
  background: #fff; transition: all 0.3s;
}
.diff-circle.selected { transform: scale(1.3); border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.15); }
.diff-circle.selected.side-left { background: #4ECDC4; }
.diff-circle.selected.side-right { background: #a29bfe; }
.diff-circle.side-left:not(.selected) { border-color: #E0F2F1; }
.diff-circle.side-right:not(.selected) { border-color: #F3E5F5; }
.diff-scale-labels { display: flex; justify-content: space-between; font-size: 0.85em; font-weight: 900; }
.label-left { color: #4ECDC4; }
.label-right { color: #a29bfe; }
.diff-arrow { color: #ccc; font-size: 1.5em; font-weight: bold; }

/* 友達マップ */
.friends-map-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }

.friends-map-subtitle { 
  text-align: center; 
  font-size: 1.1em; 
  font-weight: 900; 
  margin-bottom: 8px;
  color: var(--color-text); 
}

.friends-map-item-wrapper {
  display: flex;
  flex-direction: column;
}

.scatter-plot-container { width: 100%; margin: 0 auto; max-width: 500px; }
.scatter-plot-wrapper { position: relative; width: 100%; padding-bottom: 100%; }
.scatter-plot {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: linear-gradient(#f0f0f0 1px, transparent 1px), linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
  background-size: 20px 20px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-m);
}
.scatter-point { position: absolute; transform: translate(-50%, 50%); z-index: 10; transition: all 0.3s ease; }
.scatter-point-inner {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 900; font-size: 0.7em;
  border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.scatter-point-self .scatter-point-inner { background: var(--color-secondary); width: 40px; height: 40px; font-size: 0.9em; z-index: 20; }
.scatter-point-friend .scatter-point-inner { background: var(--color-primary); }

/* --- マップの色付き軸ラベル --- */
.scatter-axis-label { 
  position: absolute; font-size: 0.85em; font-weight: 900; color: #2D3436; 
  background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 4px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 2px solid #ddd;
}
.scatter-axis-top { top: 8px; left: 50%; transform: translateX(-50%); }
.scatter-axis-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.scatter-axis-left { top: 50%; left: 8px; transform: translateY(-50%); }
.scatter-axis-right { top: 50%; right: 8px; transform: translateY(-50%); }

/* 色付きのクラス */
.axis-color-blue { color: var(--color-energy-blue); border-color: var(--color-energy-light); }
.axis-color-orange { color: #e67e22; border-color: var(--color-info-orange); }
.axis-color-purple { color: var(--color-life-purple); border-color: var(--color-life-light); }
.axis-color-green { color: var(--color-decide-green); border-color: var(--color-decide-light); }

.map-legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.map-legend-item { display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 0.9em; color: #666; }
.map-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-dot.self { background: var(--color-secondary); border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,0.2); }
.map-dot.friend { background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,0.2); }

/* シェアセクション */
.share-section {
  background: #FFF3CD; border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-l); padding: 40px 17px; text-align: center;
  position: relative;
}
.share-title { font-size: 1.5em; font-weight: 900; color: #856404; display: inline-block; border-bottom: 3px solid #856404; padding-bottom: 4px;}
.share-description-box {
  background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px; border: 2px dashed #dccca3;
}
.share-description { font-weight: 800; color: #555; line-height: 1.8; margin: 0; }

/* シェア用モーダル */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-content {
  background: #fff; width: 100%; max-width: 400px;
  border-radius: 20px; padding: 24px; position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-height: 90vh; overflow-y: auto; /* コンテンツが多い場合にスクロール */
}
/* モーダルヘッダーを固定にするためのスタイル変更 */
.modal-header {
  display: flex; justify-content: space-between; align-items: center; 
  margin-bottom: 24px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
  padding-top: 0;
  margin-top: -4px; 
  padding-bottom: 16px;
  border-bottom: 1px solid #eee; 
}
.modal-close { background: none; border: none; font-size: 2em; line-height: 1; cursor: pointer; }
.share-btn-download { background: #fff; border: 2px solid #4ECDC4; color: #4ECDC4; }
.share-btn-download:hover { background: #4ECDC4; color: #fff; }
.btn-func-black { background: #000; color: #fff; border: none; }
.btn-func-black:hover { background: #333; }
.share-btn-line { background: #06C755; color: #fff; border: none; }
.share-btn-line:hover { background: #05a546; }

/* キャラクタースライダー */
.character-slider-wrapper {
  width: 100%; overflow: hidden; margin-bottom: 24px; padding: 10px 0; position: relative;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.character-slider-track {
  display: flex; gap: 20px; width: max-content; animation: slider-scroll 40s linear infinite;
}
.character-slider-item {
  width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%;
  border: 3px solid #2D3436; background: #fff; overflow: hidden;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1); transition: transform 0.2s;
}
.character-slider-item:hover { transform: scale(1.1); }
.character-slider-item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes slider-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .character-slider-item { width: 80px; height: 80px; }
  .character-slider-wrapper { margin-bottom: 16px; }
  .status-note { font-size: 0.6em; }
  .hero-monster-name { font-size: 2.5em; }
}

/* その他の不足スタイル (characters.html, about.html) */
.character-group { margin-bottom: 48px; }
.group-title { font-size: 1.6em; font-weight: 900; border-bottom: 4px solid #eee; padding-bottom: 8px; margin-bottom: 24px; }
.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.character-card {
  display: block; background: #fff; border: 2px solid #eee; border-radius: 16px;
  padding: 16px; text-align: center; text-decoration: none; transition: all .2s; color: var(--color-text);
}
.character-card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: 4px 4px 0 rgba(0,0,0,0.1); }
.character-image { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 2px solid #eee; margin-bottom: 12px; }
.character-name { font-weight: 900; font-size: 1.1em; margin-bottom: 4px; }
.character-type { font-family: 'Arial Black', sans-serif; color: #bbb; font-size: 0.9em; }
.about-feature-item { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.about-feature-title { font-weight: 900; font-size: 1.1em; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.step-list { list-style: none; margin-top: 16px; }
.step-item { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.step-number {
  background: var(--color-primary); color: #fff; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 900; flex-shrink: 0; border: 2px solid var(--color-border); box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.step-text { font-weight: 800; font-size: 1.05em; padding-top: 2px; }

/* about.htmlのSP用レスポンシブ対応 */
@media (max-width: 600px) {
  .about-feature-item {
    flex-direction: column;
    gap: 8px;
    background: #f9f9f9;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #eee;
  }
  .about-feature-title {
    margin-bottom: 8px;
    font-size: 1.05em;
  }
}

/* ティーザー内の余白調整 */
.teaser-blur-area .result-section-container {
  margin-bottom: 24px !important;
}
.teaser-blur-area .hero-stats-container {
  margin-bottom: 24px;
}

/* --- ランキングスタイル --- */
.ranking-list {
  display: flex; flex-direction: column; gap: 12px;
}
.ranking-item {
  display: flex; align-items: center; 
  background: #fff; padding: 12px 16px; border-radius: 12px; 
  border: 2px solid #eee; box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

/* 1位: 金色 */
.ranking-item.rank-1 {
  border: 3px solid #FFD700;
  background: #FFFFF0;
  box-shadow: 4px 4px 0 rgba(255, 215, 0, 0.3);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
/* キラキラエフェクト */
.ranking-item.rank-1::after {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
  transform: rotate(30deg);
  animation: shine 3s infinite;
}
@keyframes shine {
  0% { transform: translateX(-100%) rotate(30deg); }
  20% { transform: translateX(100%) rotate(30deg); }
  100% { transform: translateX(100%) rotate(30deg); }
}

/* 2位: 銀色 */
.ranking-item.rank-2 {
  border: 3px solid #C0C0C0;
  box-shadow: 3px 3px 0 rgba(192, 192, 192, 0.3);
}

/* 3位: 銅色 */
.ranking-item.rank-3 {
  border: 3px solid #CD7F32;
  box-shadow: 3px 3px 0 rgba(205, 127, 50, 0.3);
}

.ranking-badge-area {
  width: 50px; text-align: center; flex-shrink: 0; margin-right: 12px;
  z-index: 2;
}
.ranking-badge {
  font-size: 1.8em; font-weight: 900;
}
.rank-other .ranking-badge {
  font-size: 1em; color: #888; background: #eee; 
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}

.ranking-info { flex: 1; z-index: 2; }
.ranking-name { font-weight: 900; font-size: 1.1em; color: #2D3436; }
.ranking-mbti { font-size: 0.8em; color: #888; margin-left: 4px; font-family: 'Arial Black', sans-serif; }

.ranking-score-area { text-align: right; min-width: 60px; z-index: 2; }
.ranking-score-val { font-weight: 900; font-size: 1.4em; color: #FF6B6B; line-height: 1; }
.ranking-score-label { font-size: 0.65em; color: #aaa; font-weight: bold; margin-top: 2px; }

/* --- フッター (共通) --- */
.site-footer {
  width: 100%;                  /* 幅いっぱい */
  background: transparent;      /* 背景は透明（ボディの背景が見える） */
  border-top: 3px solid #2D3436; /* 上に太い線 */
  padding: 40px 0;              /* 上下の余白 */
  margin-top: 80px;             /* コンテンツとの距離 */
  text-align: center;
}

.footer-content {
  max-width: 1000px;            /* 中身は広がりすぎないように */
  margin: 0 auto;
  padding: 0 20px;
}

/* フッターリンク */
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;                    /* リンク間の広めの余白 */
  margin-bottom: 32px;
}

.footer-links a {
  color: #2D3436;
  text-decoration: none;
  font-weight: 900;             /* 太字 */
  font-size: 1em;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 0.6;
}

/* 注意書き */
.footer-warning {
  color: #666;                  /* 濃いめのグレー */
  font-size: 0.85em;
  margin-bottom: 32px;
  font-weight: 500;
}

/* コピーライト */
.copyright {
  font-weight: 900;
  color: #ccc;                  /* 薄いグレー */
  font-size: 1.1em;
  font-family: 'Arial Black', sans-serif; /* 太いフォント */
  letter-spacing: 1px;
}

/* スマホ表示の調整 */
@media (max-width: 600px) {
  .site-footer {
    padding: 32px 0;
    margin-top: 60px;
  }
  .footer-links {
    flex-direction: column;     /* スマホでは縦並び */
    gap: 16px;
    margin-bottom: 24px;
  }
}

/* ★追加: 絵文字ロッカー / 上限エラー用スタイル */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.emoji-btn {
  aspect-ratio: 1/1;
  font-size: 2em;
  background: #fff;
  border: 3px solid #eee;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}

.emoji-btn.selected {
  border-color: var(--color-primary);
  background: #E0F2F1;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ★追加: 選んだ絵文字を表示するエリア */
.emoji-selected-display {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
}
.emoji-slot {
  width: 64px;
  height: 64px;
  border: 3px dashed #ccc;
  border-radius: 12px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  transition: all 0.2s;
}
.emoji-slot.filled {
  border: 3px solid var(--color-primary);
  background: #fff;
  border-style: solid;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}

.limit-reached-container {
  text-align: center;
  padding: 40px 20px;
}

.limit-icon {
  font-size: 4em;
  margin-bottom: 16px;
}


/* --- 検定ランク別背景 --- */
.bg-master { background: linear-gradient(135deg, #fff 0%, #FFFDE7 50%, #fff 100%) !important; }
.bg-specialist { background: linear-gradient(135deg, #fff 0%, #F5F5F5 50%, #fff 100%) !important; }
.bg-bff { background: linear-gradient(135deg, #fff 0%, #FFF3E0 50%, #fff 100%) !important; }
.bg-friend { background: #fff !important; }
.bg-beginner { background: #FAFAFA !important; }

/* --- パルスアニメーション (金・銀・銅) --- */
.pulse-gold { animation: pulse-gold-anim 2s infinite; }
.pulse-silver { animation: pulse-silver-anim 2s infinite; }
.pulse-bronze { animation: pulse-bronze-anim 2s infinite; }

@keyframes pulse-gold-anim {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
@keyframes pulse-silver-anim {
  0% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(192, 192, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 192, 192, 0); }
}
@keyframes pulse-bronze-anim {
  0% { box-shadow: 0 0 0 0 rgba(205, 127, 50, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(205, 127, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(205, 127, 50, 0); }
}

/* キラキラが横切る演出 */
.shiny-sweep {
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-25deg);
  animation: shine-sweep-anim 5s infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes shine-sweep-anim {
  0% { left: -100%; }
  15% { left: 200%; }
  100% { left: 200%; }
}

/* --- styles.css の末尾に追加 --- */
.age-selection-container {
  text-align: center;
}

/* 年齢選択ボタンのベース */
.age-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 600px) {
  .age-grid { grid-template-columns: repeat(4, 1fr); }
}

.age-btn {
  background: #fff;
  border: var(--border-width) solid var(--color-primary);
  border-radius: 40px; /* 丸いデザイン */
  padding: 16px 8px;
  font-size: 1.1em;
  font-weight: 900;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--color-primary);
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ★追加：選択された時のスタイル（色を反転させて押し込む） */
.age-btn.selected {
  background-color: var(--color-primary) !important; /* ミント色に塗りつぶし */
  color: #fff !important; /* 文字を白に */
  box-shadow: none !important; /* 影を消す */
  transform: translateY(4px); /* ボタンを下げて押し込んだ風にする */
}