/* ========================== */
/* リセット・基本設定 */
/* ========================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f7fa;
  color: #2d3748;
  line-height: 1.6;
  padding-bottom: 60px;
  font-size: 16px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* ========================== */
/* ヘッダー & ボトムナビ */
/* ========================== */
.timeline-header,
.bottom-nav {
  background: white;
  z-index: 100;
}
.timeline-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem;
}
.header-content,
.nav-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}
.nav-items {
  justify-content: space-around;
  list-style: none;
}
.nav-item {
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #718096;
  padding: 0.5rem;
  display: flex;
}
.nav-item.active,
.nav-item.active .nav-icon,
.nav-item.active .nav-label {
  color: #667eea;
}
.nav-icon { font-size: 1.5rem; margin-bottom: 0.2rem; }
.nav-label { font-size: 0.7rem; }
.timeline-title { font-size: 1.5rem; font-weight: bold;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; border-top: 1px solid #e2e8f0; padding: 0.5rem 0; }

/* ========================== */
/* メインコンテナ */
/* ========================== */
.main-container,
.container { max-width: 600px; margin: 0 auto; padding: 1rem; }

/* ========================== */
/* ホームページスタイル */
/* ========================== */
.welcome-section { padding: 2rem 0; text-align: center; }
.welcome-section h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.result-card,
.no-diagnosis-card,
.timeline-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.result-card h2,
.timeline-card h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.mbti-display { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; }
.mbti-type { font-size: 2.5rem; font-weight: bold;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.animal-name { font-size: 1.2rem; color: #4a5568; margin-top: 0.5rem; }
.features-list { display: flex; flex-direction: column; gap: 1rem; max-width: 300px; margin: 0 auto; }
.feature-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.feature-icon { font-size: 1.5rem; }
.feature-text { flex: 1; }

/* ========================== */
/* ランディングセクション */
/* ========================== */
.landing-section { text-align: center; padding: 3rem 1rem; }
.landing-title { font-size: 3rem; font-weight: bold; margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-subtitle { font-size: 1.1rem; color: #4a5568; margin-bottom: 2rem; line-height: 1.8; }
.cta-section { margin-bottom: 3rem; }
.line-add-btn { display: inline-block; margin-bottom: 1rem; }
.cta-note { color: #718096; font-size: 0.9rem; }

/* ========================== */
/* ボタン */
/* ========================== */
.btn, .comparison-btn {
  display: inline-block;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.btn { padding: 0.8rem 2rem; }
.btn-primary { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102,126,234,0.3); }
.btn-secondary { background: #f7fafc; color: #667eea; border: 1px solid #e2e8f0; }
.btn-secondary:hover { background: #edf2f7; }

/* ========================== */
/* 背景 */
/* ========================== */
.cosmos-bg,
.stars { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
.cosmos-bg { background: linear-gradient(180deg,#f5f7fa 0%,#e9ecef 100%); z-index:-2; }
.stars { background-image:
  radial-gradient(2px 2px at 20px 30px,#eee,transparent),
  radial-gradient(2px 2px at 40px 70px,#ddd,transparent),
  radial-gradient(1px 1px at 50px 90px,#ccc,transparent);
  background-repeat: repeat; background-size:200px 200px; opacity:0.3;
  animation: sparkle 200s linear infinite;
}
@keyframes sparkle { from{transform: translateY(0);} to{transform:translateY(-2000px);} }

/* ========================== */
/* ヒーローカード強化 */
/* ========================== */
.hero-banner { width:110%; height:110%; object-fit:cover; transform:scale(1.1); transition:transform .6s ease-out; }
.hero-banner-wrapper:hover .hero-banner { transform:scale(1.15); }

/* MBTIバッジ */
.mbti-badge { position:relative; overflow:hidden; }
.mbti-badge::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { 0%{transform:translate(-100%, -100%) rotate(45deg);} 100%{transform:translate(100%,100%) rotate(45deg);} }

/* キーワードバブル */
.keyword-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* アバターパルス */
.profile-avatar { animation: avatarPulse 2s ease-in-out infinite; }
@keyframes avatarPulse { 0%,100%{box-shadow:0 0 0 0 rgba(102,126,234,0.4);}50%{box-shadow:0 0 0 10px rgba(102,126,234,0);} }

/* シェアボタン */
.share-btn { position:relative; overflow:hidden; }
.share-btn::after {
  content: '';
  position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%; background:rgba(255,255,255,0.3);
  transform:translate(-50%,-50%);
  transition:width .6s, height .6s;
}
.share-btn:active::after { width:300px; height:300px; }
.share-btn.instagram::before {
  content: '';
  position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left .5s;
}
.share-btn.instagram:hover::before { left:100%; }

/* ========================== */
/* フローティング特徴 */
/* ========================== */
.floating-traits-container { position:relative; width:100%; height:320px; margin:2rem auto; display:flex; align-items:center; justify-content:center; }
.mbti-center { position:absolute; width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:bold; color:#fff;
  background: linear-gradient(135deg,#667eea,#764ba2);
  box-shadow:0 10px 40px rgba(102,126,234,0.3), inset 0 -3px 10px rgba(0,0,0,0.2);
  animation: centralPulse 3s ease-in-out infinite;
}
@keyframes centralPulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.05);} }
.floating-trait { position:absolute; padding:.6rem 1.2rem; border-radius:25px; font-size:.85rem; font-weight:600; box-shadow:0 5px 20px rgba(0,0,0,0.1); white-space:nowrap; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1);opacity:.9;}25%{transform:translateY(-10px) scale(1.02);opacity:1;}50%{transform:translateY(5px) scale(.98);opacity:.85;}75%{transform:translateY(-5px) scale(1.01);opacity:1;} }
@keyframes rotate   { from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} }
/* 浮遊位置は nth-child で設定 */

/* ========================== */
/* 4軸分析 */
/* ========================== */
.axis-analysis { margin-top:1rem; }
.axis-title    { text-align:center; font-size:1.1rem; font-weight:bold; margin-bottom:1.5rem; color:#333; }
.axis-item     { margin-bottom:2rem; position:relative; }
.axis-header   { display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:.85rem; }
.axis-label-left-text,
.axis-label-right-text { transition:all .3s ease; }
.axis-label-left-text.dominant,
.axis-label-right-text.dominant { color:#667eea; font-size:1rem; font-weight:600; text-shadow:0 0 8px rgba(102,126,234,0.3); animation:glow 2s ease-in-out infinite alternate; }
.dual-axis-bar { display:flex; height:12px; border-radius:15px; overflow:hidden; }
.axis-left     { padding-left:8px; display:flex; align-items:center; justify-content:flex-start; font-size:.7rem; font-weight:bold; color:#fff; background:linear-gradient(90deg,#667eea,#8a9bff); }
.axis-right    { padding-right:8px; display:flex; align-items:center; justify-content:flex-end; font-size:.7rem; font-weight:bold; color:#fff; background:linear-gradient(90deg,#ff6b6b,#ee5a52); }
.axis-center-dot { position:absolute; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:#fff; border:3px solid #333; border-radius:50%; z-index:10; transition:left 1s ease-out;} 
.axis-center-dot::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; background:#333; border-radius:50%; }
/* 特殊カラー */
.axis-item:nth-child(2) .axis-left  { background:linear-gradient(135deg,#f093fb,#f5576c); }
.axis-item:nth-child(2) .axis-right { background:linear-gradient(135deg,#fa709a,#fee140); }

/* ========================== */
/* 結果ページ固有 */
/* ========================== */
.result-page { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height:100vh; }

/* ========================== */
/* 相性比較 */
/* ========================== */
.comparison-section        { background:rgba(255,255,255,0.05); border-radius:16px; padding:1.5rem; margin:1.5rem 0; backdrop-filter:blur(10px); }
.comparison-input-wrapper { display:flex; gap:.5rem; margin-top:1rem; }
.comparison-input         { flex:1; padding:.8rem 1rem; border:2px solid rgba(102,126,234,0.3); border-radius:12px; background:rgba(255,255,255,0.05); color:#333; }
.comparison-input:focus   { outline:none; border-color:#667eea; background:rgba(255,255,255,0.1); }
.comparison-btn:hover     { transform:translateY(-2px); box-shadow:0 4px 15px rgba(102,126,234,0.4); }
.comparison-result        { margin-top:1.5rem; padding:1.5rem; background:rgba(255,255,255,0.1); border-radius:12px; text-align:center; }
.compatibility-score-big  { font-size:3rem; font-weight:bold; background:linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin:1rem 0; }

/* ========================== */
/* ログインCTA */
/* ========================== */
.login-cta-section { background:rgba(255,255,255,0.95); border-radius:20px; padding:2rem; margin:2rem 0; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.login-cta-section h2 { color:#333; margin-bottom:1rem; }
.login-cta-section p  { color:#666; margin-bottom:1.5rem; line-height:1.6; }
.line-login-btn { display:inline-block; background:#00B900; color:#fff; padding:1rem 3rem; border-radius:30px; font-weight:bold; font-size:1.1rem; box-shadow:0 4px 15px rgba(0,185,0,0.3); transition:all .3s; }
.line-login-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,185,0,0.4); }

/* ========================== */
/* シェアセクション */
/* ========================== */
.share-section { text-align:center; margin:2rem 0; }
.share-section h3    { color:#333; margin-bottom:1rem; }
.share-buttons       { display:flex; gap:1rem; justify-content:center; }
.share-btn.line      { background:#00B900; }
.share-btn.twitter   { background:#1DA1F2; }
.share-btn:hover     { transform:translateY(-2px); opacity:.9; }

.banner-wrapper {
  width: 100%;
  height: 200px;       /* 固定高さ */
  overflow: hidden;
  position: relative;
}
.banner {
  /* object-fit: cover は入っていない？ */
  width: 100%;
  height: auto;
  object-fit: cover;
}