/* ==== アンカー移動時に見出しがヘッダーに隠れないようにオフセット ==== */
/* 全セクション共通でOK */
section {
  /* sticky ヘッダーの高さ分だけスクロールマージンを設ける */
  scroll-margin-top: 60px;
}

/* お問い合わせフォーム 共通リセット */
.contact-form,
.contact-form * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* エラーメッセージリスト */
.error-list {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 12px;
  background-color: #FFE6E6;
  color: #A80000;
  border: 1px solid #FFB3B3;
  border-radius: 4px;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 送信完了メッセージ */
.success-message {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 12px;
  background-color: #E6FFEA;
  color: #006B3C;
  border: 1px solid #B3FFD1;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* フォーム全体 */
.contact-form {
  max-width: 600px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各入力グループ */
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ラベル */
.contact-form label {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}

/* テキスト入力・メール・テキストエリア */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  transition: border-color 0.2s ease;
}

/* フォーカス時の強調 */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: #0078D4;
  outline: none;
}

/* テキストエリアの高さ */
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

/* 送信ボタン */
.contact-form button {
  width: 150px;
  padding: 10px 0;
  background-color: #0078D4;
  color: #fff;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  align-self: flex-end;
  transition: background-color 0.2s ease;
}

/* ボタン hover/focus */
.contact-form button:hover,
.contact-form button:focus {
  background-color: #005A9E;
  outline: none;
}

/* レスポンシブ対応（画面幅600px以下） */
@media (max-width: 600px) {
  .contact-form {
    padding: 0 10px;
    gap: 12px;
  }
  .contact-form button {
    width: 100%;
  }
}

/* ==== Bio セクション：プロフィール画像スタイル追加 ==== */
.bio-content {
  text-align: center;
}

.profile-image {
  display: block;
  /* 高さを画面幅の20%を基準に、最小150px・最大300pxで可変 */
  height: clamp(150px, 20vw, 300px);
  width: auto;          /* アスペクト比を維持 */
  object-fit: cover;    /* 切り抜き表示 */
  margin: 0 auto 15px;  /* 下に余白 */
}

/* 極狭画面（最大幅400px）では高さを150pxに固定 */
@media (max-width: 400px) {
  .profile-image {
    height: 150px;
  }
}

/* Bio セクションの名前・紹介文を左寄せ */
.bio-content p {
  text-align: left;
  max-width: 600px;     /* お好みで幅を調整 */
  margin: 0 auto 8px;   /* 上:0 下:8px 左右:自動センタリング */
}

/* ==== SNSアイコン横並び用スタイル ==== */
.social-icons {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 10px;               /* アイコン間の余白 */
  margin-top: 10px;
}

.social-icon {
  display: inline-block;
  width: 28px;   /* アイコンの幅 */
  height: 28px;  /* アイコンの高さ */
}

.social-icon img {
  width: 100%;
  height: auto;
  display: block;
}