/* 全体のリセットと基本設定 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #f9f9f9;
}

.character {
  display: flex;
  flex-wrap: wrap; /* 必要に応じて折り返し */
  align-items: center; /* 中央揃え */
  margin: 20px;
  gap: 20px; /* 子要素間のスペース */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.character-image {
  max-width: 200px; /* PCでの最大幅 */
  width: 100%; /* スマホでも幅が適応されるように */
  height: auto;
  border-radius: 10px;
}

.character-description {
  flex: 1; /* 説明部分が幅に応じて拡大 */
  min-width: 250px; /* 最小幅の確保 */
  color: #333;
}

.profile-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* スマホ向けのレスポンシブ設定 */
@media (max-width: 600px) {
  .character {
    flex-direction: column; /* 縦方向に変更 */
  }

  .character-description {
    min-width: 100%; /* 説明文をフル幅に */
  }
}