/*---先生紹介-----*/
.drkato {
  float: right;
}

.drkato img,
.drkato p {
  font-size: 90%;
  text-align: center;
  padding: 0 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*---一覧---*/
table.topic {
  clear: both;
  width: 100%;
  border-spacing: 0 7px;
  border-collapse: separate;
}
table.topic th,
table.topic td {
  padding: 3px 6px;
  font-size: 90%;
}

table.topic th {
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #519f51;
  background-repeat: repeat;
  background-position: left center;
}
table.topic td {
  border-left: #666 1px dotted;
  padding-left: 10px;
  background-color: #ffffff;
}
table.topic a {
  color: #78410f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*---Q&A----------*/
.q {
  padding-bottom: 30px;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-color: #e0e3d6;
  border-radius: 10px; /* 角を丸くする */
  margin-top: 20px;
  margin-bottom: 20px;
}
.q p {
  color: #847146;
  padding-top: 30px;
  padding-left: 100px;
  padding-bottom: 10px;
  /* background-image: url(../topic_howto/img/q_header_back.jpg); 削除 */
  /* background-repeat: no-repeat; 削除 */
  position: relative; /* 相対位置を設定 */
}

.q p::before {
  content: "Q"; /* Qを表示 */
  display: inline-block;
  width: 60px; /* 丸の幅 */
  height: 60px; /* 丸の高さ */
  background-color: rgb(205, 205, 137); /* 背景色を黄色に設定 */
  border-radius: 50%; /* 丸くする */
  text-align: center; /* テキストを中央に配置 */
  line-height: 55px; /* テキストを縦中央に配置を調整 */
  font-weight: bold; /* テキストを太字に */
  font-size: 200%;
  color: rgb(118, 145, 120); /* テキストの色を黒に */
  position: absolute; /* 絶対位置を設定 */
  left: 20px; /* 左端に配置 */
  top: 20px; /* 上端に配置 */
}

.a {
  margin-top: 20px;
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: top left;
}
.a p {
  /* margin-top: 40px; */
}

/*---見出し-------*/
h3 {
  font-size: 120%;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold; /* 太字に変更 */
  position: relative; /* 相対位置を設定 */
  padding-left: 30px; /* ●の分だけ左に余白を追加 */
}

h3::before {
  content: "●"; /* 文字の先頭に●を追加 */
  position: absolute; /* 絶対位置を設定 */
  left: 0; /* 左端に配置 */
  /* color: #519f51; */
}

h4 {
  clear: both;
  color: #519f51;
  margin: 0;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 40px; /* ●の分だけ左に余白を追加 */
  font-size: 120%;
  background-repeat: no-repeat;
  background-position: left center;
  position: relative; /* 相対位置を設定 */
}

h4::before {
  content: "●"; /* 文字の左側に●を追加 */
  position: absolute; /* 絶対位置を設定 */
  left: 10px; /* 左端からの位置を調整 */
  top: 50%; /* 垂直方向の中央に配置 */
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  color: #519f51; /* ●の色を設定 */
}

/*---案内---------*/
dl {
  font-size: 90%;
}
dt,
dd {
  margin: 0;
  padding: 0;
  margin-top: 20px;
}
dt {
  clear: both;
  color: #250d00;
  font-size: 120%;
  font-weight: bold;
  padding-left: 5px;
  border-bottom: dotted 1px #250d00;
  padding-bottom: 3px;
}
dd {
  text-indent: 1em;
  margin-bottom: 20px;
}

/*---配置---*/

/*--第1回--*/
.no01 {
  float: right;
  padding-top: 10px;
}
/*--第2回--*/
.no02 {
  float: right;
  width: 230px;
  /* padding-top: 10px; */
  text-align: center;
}
.no02 p {
  color: #666;
  text-align: center;
  font-size: 90%;
}
.no02 img {
  padding-left: 20px;
}
/*--第3回--*/
.no03 {
  float: left;
}
/*--第4回--*/
.no04 div {
  float: right;
  padding-top: 10px;
}
.no04 img,
.no04 div p {
  padding-left: 10px;
}
.no04 div p {
  color: #666;
  font-size: 100%;
}
.no04 p {
  color: #666;
  text-align: center;
}
/*--第5回--*/
.no05 div.left {
  width: 50%;
  float: left;
  text-align: center;
  padding-top: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

  align-items: center;
}
.no05 div.right {
  float: right;
  padding-top: 10px;
  text-align: center;
}
.no05 div.right img,
.no05 div.right p {
  padding-left: 10px;
}
.no05 div p {
  color: #666;
  font-size: 100%;
}
.no05 div.left p {
  text-align: center;
}
.no05 p {
  color: #666;
  text-align: center;
}

.center-container {
  display: flex; /* 横並びに配置 */
  justify-content: center; /* コンテナ全体を中央揃え */
  gap: 40px; /* 要素間のスペースを設定 */
  margin-top: 20px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央に配置 */
  text-align: center; /* テキストを中央揃え */
}

.center img {
  display: block; /* 画像をブロック要素に */
  margin: 0 auto; /* 画像を中央揃え */
}
/*--第6回--*/
.no06 {
  float: right;
}
.no06 img {
  margin-left: 10px;
}
/*--第8回--*/
.no08 {
  float: right;
  width: 300px;
  text-align: center;
  padding-top: 10px;
}
.no08 p {
  color: #666;
  text-align: center;
}
.no08 img {
  padding-left: 20px;
}
main {
  line-height: 1.6; /* 行間を広げる */
}