img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.wrapper {
  max-width: 900px;
  margin-inline: auto;
}

body {
  background-color: #F7F6F3;
}

/* ==========================
   レスポンシブ対応（既存の@mediaブロックに追記）
========================== */
@media (max-width: 600px) {
  .name-age-group {
    flex-direction: column; /* スマホでは縦並びに */
    gap: 16px;
  }
}

.logo {
  max-width: 100px;
  margin-inline: auto;
}

h1.ttl {
  margin-inline: auto;
  margin-block: 4rem 0;
  font-size: 1rem;
  text-align: center;
  position: relative;
  z-index: 100;
}

h1.ttl::before {
  content: "";
  display: block;
  width: 260px;
  height: 70px;
  background-image: url(../images/sheet_ttl.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  margin: auto;
}

/* ==========================
   Form全体レイアウト
========================== */
#myForm {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
  counter-reset: question;
}

/* ==========================
   お名前・年齢（常に横並び）
========================== */
.name-age-group {
  display: flex;
  gap: 24px;
}

.name-age-group .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.name-age-group .field.name {
  width: 100%;
  max-width: 300px;
}

.name-age-group .field.age {
  width: 60px;
}

.name-age-group .field-label {
  font-weight: bold;
  font-size: 15px;
}

.name-age-group input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.name-age-group input[type="text"]:focus-visible {
  outline: 2px solid #B89B6B;
  outline-offset: 2px;
}

.gender label {
  margin-right: 0.5rem;
}

.symptoms-group {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}
.symptoms-group .symptoms {
  display: flex;
  flex-direction: column;
}

.symptoms .symptoms-label {
  width: fit-content;
  font-weight: bold;
  font-size: 15px;
}

/* ==========================
   質問ブロック：横並びレイアウト
========================== */
.form-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

.question-label {
  flex: 0 0 260px;      /* 質問文の幅を固定 */
  margin: 0;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.5;
  counter-increment: question; /* ← 追加：質問ごとにカウントアップ */
}

.question-label::before {
  content: counter(question) ". "; /* ← 追加：番号を表示 */
  color: #B89B6B;
  font-weight: bold;
}

.options {
  display: flex;
  flex-wrap: wrap;       /* 画面が狭い時は折り返す */
  gap: 20px;
  flex: 1;
}

/* ==========================
   ラジオボタン：チェックマーク化
========================== */
.options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.options input[type="radio"],
.gender-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;    /* 丸ではなく四角に */
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
}

.options input[type="radio"]:hover,
.gender-options input[type="radio"]:hover {
  border-color: #B89B6B;
}

.options input[type="radio"]:checked,
.gender-options input[type="radio"]:checked {
  background-color: #B89B6B;
  border-color: #B89B6B;
}

.options input[type="radio"]:checked::after,
.gender-options input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.options input[type="radio"]:focus-visible {
  outline: 2px solid #B89B6B;
  outline-offset: 2px;
}

/* ==========================
   チェックボックス（好みのお茶）も同じ見た目に統一
========================== */
.options input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
}

.options input[type="checkbox"]:hover {
  border-color: #B89B6B;
}

.options input[type="checkbox"]:checked {
  background-color: #B89B6B;
  border-color: #B89B6B;
}

.options input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.options input[type="checkbox"]:focus-visible {
  outline: 2px solid #5746e3;
  outline-offset: 2px;
}

/* ==========================
   自由記述欄（アレルギー詳細）
========================== */
#q31-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

#q31-group label,
#q33-group label,
#q35-group label {
  flex: 0 0 260px;
  font-weight: bold;
  font-size: 15px;
}

#q31-group textarea,
#q33-group textarea,
#q35-group textarea,
#symptoms textarea {
  flex: 1;
  width: 100%;
  min-height: 100px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-top: 2px;
}

#q31-group textarea:focus-visible,
#q33-group textarea:focus-visible,
#symptoms textarea:focus-visible {
  outline: 2px solid #B89B6B;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  #q31-group textarea,
  #q33-group textarea,
  #symptoms textarea {
    min-height: 120px;
  }
}

/* ==========================
   送信ボタン
========================== */
button[type="submit"] {
  display: block;
  margin: 24px auto 0;
  padding: 12px 40px;
  background-color: #B89B6B;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.15s;
}

button[type="submit"]:hover {
  background-color: #CFAF7A;
}

button[type="submit"]:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.thanks_container {
  text-align: center;
}

/* ==========================
   レスポンシブ対応（画面が狭い場合は縦並びに）
========================== */
@media (max-width: 600px) {
  .form-group,
  #q30-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .question-label,
  #q30-group label {
    flex: none;
  }
}