/*
 * カラーパレット
 * #8ecae6 (薄い水色)
 * #219ebc (濃い水色 - メイン/アクセント)
 * #023047 (濃紺 - テキスト/背景)
 * #ffb703 (オレンジ - ハイライト/アクセント)
 * #fb8500 (濃いオレンジ)
 */

/* メインセクション全体のコンテナ */
.main {
  max-width: 1080px;
  margin: 0 auto;
  background-color: #ffffff; /* 白い背景で清潔感と内容の分離 */
  padding: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 控えめな影でおしゃれに浮き上がらせる */
  border-radius: 10px;
}

/* 冒頭の紹介文セクション */
.underline {
  padding: 20px;
  margin-bottom: 30px;
  border-bottom: 3px solid #8ecae6; /* 薄い水色の下線でおしゃれに区切る */
}
.underline1 {
  padding: 20px;
  border-bottom: 1px solid #8ecae6; /* 薄い水色の下線でおしゃれに区切る */
}

.main > div:first-child br {
  line-height: 1.5; /* 行間を調整 */
}

/* 診療科セクション (内科、外科、消化器内科) */
.med-title {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eeeeee; /* わずかに境界線を設定 */
  border-radius: 5px;
}

/* 大見出し (診療科名) */
h3 {
  font-size: 1.8em;
  color: #023047;
  border-bottom: 4px solid #ffb703; /* オレンジの太い下線でアクセント */
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 20px;
  transition: background-color 0.3s; /* ホバー時の変化を滑らかにする */
  user-select: none; /* テキスト選択を防ぐ */
  position: relative; /* アイコン配置のため */
  padding-right: 40px; /* アイコン分のスペースを確保 */
}

/* 折りたたみ状態を示すアイコンのスタイル */
h3::after {
  content: "+"; /* 閉じている状態は「+」を表示 */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
  color: #219ebc;
}

/* 開いている状態のアイコンのスタイル */
h3.is-open::after {
  content: "-"; /* 開いている状態は「-」を表示 */
}

h3:hover {
  background-color: #f8f1df; /* ホバー時に背景を薄く変える */
}
h4 {
  font-size: 1.8em;
  color: #023047;
  border-bottom: 4px solid #ffb703; /* オレンジの太い下線でアクセント */
  padding-bottom: 5px;
  margin-top: 0;
  margin-bottom: 20px;
}

/* 説明リストのスタイル設定 */
.main dl {
  margin-bottom: 10px;
  padding-left: 10px;
}

/* 説明文部分 */
.main dl dd {
  margin-left: 0;
  padding-left: 15px;
  margin-bottom: 20px;
}

/* 症状/疾患のタイトル部分 (例: 'このような症状の方はご相談ください。', '主な疾患と対応') */
.main dt {
  font-weight: bold;
  color: #023047; /* 濃紺でしっかりとした印象 */
  background-color: #f2faff; /* 非常に薄い水色の背景色で目立たせる */
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 20px;
  margin-bottom: 10px;
  border-left: 5px solid #219ebc; /* 濃い水色の縦線で強調 */
}

/* 症状や疾患のリスト */
.main dd:last-of-type {
  margin-bottom: 0;
}

/* 症状・疾患の箇条書き部分のスタイル */
.main dt + dd {
  padding: 10px 0 10px 15px;
  margin-bottom: 15px;
}

.main dt + dd br {
  content: "";
  display: block;
  margin-top: 5px;
}

/* 疾患名 (例: 風邪, 高血圧など) */
.main > div > div > dl > dt {
  font-weight: bold;
  color: #023047; /* 濃い水色 */
  background-color: transparent; /* 背景色を透明に戻す */
  padding: 0;
  margin-top: 15px;
  margin-bottom: 5px;
  border-left: none;
  border-bottom: 1px dotted #219ebc; /* 点線で区切る */
}

/* 疾患名と対応の説明 */
.main > div > div > dl > dt + dd {
  padding-left: 10px;
}

.under {
  padding: 15px;
  margin: 12px 0;
  border-bottom: solid 1px #8ecae6;
}
.b {
  display: inline-block;
  font-weight: bold;
  color: #ffffff;
  background-color: #219ebc;
  padding: 5px 15px;
  border-radius: 50px;
  margin: 0 0 12px 0;
  box-shadow: 0 2px 5px rgba(33, 158, 188, 0.3);
}
.c {
  color: #fb8500;
}
.note {
  margin-top: 30px;
  padding: 15px;
  color: #fb8500;
}
.note1 {
  padding: 20px 15px;
  color: #fb8500;
}