.task-details {
  max-width: 800px;
  margin: 2em auto;
  padding: 0 1em;
}

.task-details h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3972b2;
  padding-bottom: 0.5em;
  margin: 2em 0 1em;
}

.task-content {
  background: #f8f9fa;
  padding: 1.5em;
  border-radius: 8px;
  margin-bottom: 2em;
  white-space: pre-wrap;
}

.tree {
  background: #fff;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tree .title {
  padding: 1em;
  border-radius: 0 8px 8px 0;
}

.tree .structure {
}

.tree ul {
  margin: 0 0 0 20px;
  padding: 0;
  list-style: none;
  position: relative;
}

/* 親 ul::before は使わず、各 li に縦線を引く */
.tree li {
  position: relative;
  margin: 0.5em 0;
  padding-left: 20px;
}

/* 1) 各 li の縦線 */
.tree li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.1em; /* 上方向に少しはみ出す */
  width: 1px;
  height: calc(100% + 1em); /* 下方向に少し延ばす */
  border-left: 1px solid #3972b2;
}

/* 2) 横線（“T字” の横部分） */
.tree li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em; /* 文字列の縦位置に合わせる */
  width: 15px; /* テキストまでの距離 */
  border-bottom: 1px solid #3972b2;
}

/* 3) 最後の子だけは縦線を短くする（“L字”化） */
.tree li:last-child::before {
  /* 下に伸ばす分を短くして途切れさせる */
  height: 1em; 
}

/* ▼ 取り消し線をつけるクラス .strike-through を定義 */
.strike-through {
  text-decoration: line-through;
}