/* 全体の横幅を中央に寄せて制限する */
.search-step1-container {
  max-width: 1100px; /* ← 左右が近づくように幅制限 */
  margin: 0 auto;    /* 中央寄せ */
  padding: 0 1rem;
}

/* 左右を横並びに */
.search-step1-layout {
  display: flex;
  align-items: flex-start;
  gap: 0; /* 左右ぴったりにしたいなら 0 に */
}

/* 左（領域）の幅を固定 */
.search-step1-areas {
  width: 280px;    /* ← ここが左右間隔に効く！ */
  margin-right: 1rem; /* 少しだけ余白（お好み） */
}

/* 右（病名）は残り全部使う */
.search-step1-diseases {
  flex: 1;
}

.search-step2-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.search-step2-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.search-step2-areas {
  width: 280px;
  margin-right: 1rem;
}

.search-step2-symptoms {
  flex: 1;
}

/* 病名・症状のチェックボックスをグリッド（1行20個）で表示 */
/* 病名・症状のチェックボックスをタイル状に表示 */
/* 病名・症状リストを「縦に並べて、下まで行ったら次の列」にする */
/* 20項目で1列に収めるレイアウト */
/* 1列20行で縦に並べて、21個目から次の列へ */
.disease-list,
.symptom-list {
  display: grid;
  grid-auto-flow: column;               /* 縦に埋めてから次の列へ */
  grid-template-rows: repeat(20, auto); /* 1列あたり最大20個 */
  column-gap: 2rem;
  row-gap: 0.25rem;
}

/* □ とテキストを横にピタッと並べる */
.disease-label,
.symptom-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

/* ブラウザのデフォルト余白を消す */
.disease-checkbox,
.symptom-checkbox {
  margin: 0;
}

/* スマホでは1列にする */
@media (max-width: 768px) {
  .disease-list,
  .symptom-list {
    column-count: 1;
  }
}

.btn-area {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn-nav {
  padding: 0.5rem 1.2rem;     /* ボタンの大きさ */
  border-radius: 6px;         /* 角丸 */
  font-weight: 600;
  text-decoration: none;      /* リンク下線を消す */
  display: inline-block;      /* ブロック化して押しやすい */
}

.btn-nav:hover {
  opacity: 0.85;              /* ホバー時 */
}