/* 全体の基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ページ全体の設定（背景画像） */
html, body {
  width: 100%;
  height: 100%;
  /* max-width/max-height は論理的な表示エリアをシミュレートしているため、このままでOK */
  max-width: 390px;   /* iPhone12 Pro の論理ピクセル幅の目安 (414pxや390pxが用いられることが多い) */
  max-height: 844px;  /* iPhone12 Pro の論理ピクセル高さの目安 */
  margin: 0 auto;
  background-color: #eeaa44;
  /* background-size: cover;     <- 元の設定 */
  background-size: 100% auto;  /* <- 修正後の設定：幅を親要素に合わせ、高さは自動調整 */
  background-position: center; /* 中央表示 */
  font-family: 'Hiragino Sans', sans-serif;
  overflow-x: hidden;
}

/* ヘッダー */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  z-index: 10;
}

.header h1 {
  font-size: 18px;
  color: #31587a;
}

.menu-icon {
  position: absolute;
  left: 20px;
  font-size: 24px;
  color: #31587a;
}

/* プロフィール部分 */
.profile-info {
  padding: 20px 15px;
}

/* プロフィール上部 */
.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* プロフィール画像（丸型） */
.profile-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid #fff;
  margin-left: 20px;
}

/* フォロワー数など */
.stats-area {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-right: 25px;
}

.stat-item {
  text-align: center;
}

.label {
  font-size: 12px;
  color: #ffffff;
}

.number {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

/* 自己紹介ボックス */
.bio-box {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 10px 15px;
  width: fit-content;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* ★追加：メインコンテンツのタイトルスタイル */
.main-title {
  text-align: center; /* 中央揃え */
  margin-bottom: 20px; /* main-circleとの間にスペースを開ける */
}

.main-title p {
  font-size: 24px; /* 大きめのフォントサイズ */
  font-weight: bold; /* 太字 */
  color: #000000; /* ヘッダーと同じ青っぽい色 */
  background-color: rgba(255, 255, 255, 0.9); /* 背景色 */
  display: inline-block; /* 背景色の範囲をテキストに合わせる */
  padding: 5px 15px; /* 内側の余白 */
  border-radius: 10px; /* 角丸 */
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* メインコンテンツ */
.content-area {
  padding: 20px;
  padding-bottom: 120px;
}

/* 真ん中の円 */
.main-circle {
  width: 80vw;
  height: 80vw;
  max-width: 360px;
  max-height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(106 105 105) 0%, rgb(254 254 254) 60%);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* カプセル画像（楕円形） */
.capsule {
  position: absolute;
  width: 180px;
  height: 85px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  border-radius: 50px;
  overflow: hidden;
}

.capsule img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* カプセル配置位置 */
.capsule:nth-child(1) { top: 5%; left: 20%; transform: rotate(30deg); }
.capsule:nth-child(2) { top: 70%; left: 45%; transform: rotate(-20deg); }
.capsule:nth-child(3) { top: 40%; left: 20%; transform: rotate(110deg); }
.capsule:nth-child(4) { top: 40%; left: 60%; transform: rotate(15deg); }
.capsule:nth-child(5) { top: 80%; left: 10%; transform: rotate(-120deg); }
.capsule:nth-child(6) { top: 10%; left: 60%; transform: rotate(150deg); }

/* フッター（下のナビ） */
.footer-nav {
  position: fixed;
  bottom: 0;
  background-position: center;
  width: 100%;
  max-width: 390px;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #eee;
  z-index: 20;
  backdrop-filter: blur(4px);
}

.footer-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  padding: 10px 0;
  text-align: center;
  color: #31587a;
  font-size: 24px;
}

.footer-nav li:first-child i {
  border: s solid #ffffff;
  border-radius: 5px;
  padding: 5px;
  
}