@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap');

/* 基本設定 */
body {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", "Meiryo UI", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #444;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* ヘッダー */
.header {
  text-align: left;
  padding: 0.5rem 1rem;
  background-color: #fff;
}
.siteTitle {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin: 0;
}
.navLinks {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #444;
  margin-top: 0.25rem;
}
.navLinks a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
}
.navLinks a:hover {
  text-decoration: underline;
}

/* フォーム全体 */
.formWrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem;
  background-color: #fff;
}

/* タイトル */
.contentHead__ttl {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
}

/* 項目ブロック（罫線上下＋密着） */
.form__block {
  display: flex;
  align-items: stretch;
  margin: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
@media (max-width: 767px) {
  .form__block {
    display: block;
  }
}

/* 項目名 */
.form__name {
  width: 25%;
  background-color: #f3eee9;
  color: #333;
  padding: 0.3rem 0.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  border-right: 1px solid #ccc;
}
.form__reqdMark {
  color: orangered;
  margin-left: 0.25rem;
}

/* 回答欄 */
.form__inputArea {
  width: 75%;
  background-color: #fff;
  padding: 0.3rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form__input,
.form__textArea,
.form__select {
  width: 100%;
  padding: 0.3rem;
  font-size: 0.95rem;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", "Meiryo UI", sans-serif;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  color: #333;
  margin: 0;
}
.form__textArea {
  resize: vertical;
  min-height: 6em;
}

/* 補足・エラー・確認 */
.js_input_control,
.js_conf_control,
.js_error_control {
  font-size: 0.85rem;
  color: #444;
  margin: 0.2rem 0;
  white-space: pre-line;
}
.js_error_control {
  background-color: #fff0f0;
  color: orangered;
  padding: 0.3rem;
  border-radius: 0;
}

/* --- 確認ボタン中央配置＆見た目 --- */
.formBtns {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.formBtns .formBtns__btn {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Meiryo", "Meiryo UI", sans-serif;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}
.formBtns .formBtns__btn:hover {
  background-color: #333;
  color: #fff;
}

/* --- フォーム内の説明文の文字色を黒に変更 --- */
.js_input_control,
.js_conf_control,
.form__note,
.text-green-500,
.text-green-600,
.text-green-700,
*[style*="color"] {
  color: #333 !important;
}


/* ヘッダー全体の余白調整 */
.header {
  padding: 1.5rem 1rem;
  background-color: #f8f8f8;
  text-align: center;
}

/* サイトタイトル */
.header__siteTitle {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #333;
}

/* ナビゲーションリンクを中央揃えに */
.header__gnavi {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ボタン風リンク */
.header__naviLink {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background-color: #b1e5ef;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

/* ホバー時の色変化 */
.header__naviLink:hover {
  background-color: #46AABF;
}

/*
.form__note {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1rem;
}