.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline-item {
  display: flex;
  position: relative;
}

.timeline-icon {
  width: 150px;
  flex-shrink: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.timeline-image img {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  z-index: 3;
}

.timeline-icon-caption {
  display: block;
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  font-weight: bold;
  line-height: 1.2;
  background-color: #ffffff;
}

.timeline-content {
  flex-grow: 1;
  padding-left: 25px;
  padding-right: 40px;
  position: relative;
  margin-bottom: 60px !important;
}

.timeline-card {
  background-color: #fff;
  padding: 1em 1em 0 1em;
  border-radius: 0.375rem;
  border: #dcdddd 2px solid;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.timeline-card h4,
.timeline-card h3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: none !important;
}

.timeline-card p {
  margin-bottom: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.timeline-item:first-child::before {
  top: calc(100px / 20);
}

.timeline-item:last-child::before {
  bottom: calc(100px / 2);
}

.dot__none::before { /* もしafterに入っているなら ::after に変更してください */
  content: none !important;      /* 1. 疑似要素自体を表示させなくする（最有力） */
  border-top: none !important;   /* 2. 点線を完全に消去する */
  width: 0 !important;           /* 3. 幅をゼロにする */
  height: 0 !important;          /* 4. 高さをゼロにする */
  position: static !important;   /* 5. 絶対配置（absolute）を解除する */
}

.timeline-content::before {
  content: "";
  position: absolute;
  top: calc(0px + 50px);
  left: calc(-60px);
  width: 85px;
  height: 0;
  border-top: 1px dashed #0062ac;
  z-index: 1;
}

/* 【丸（●）の設定】 positionで位置を下げ、色を自由に変えられます */
.timeline-item::before {
    content: ""; /* 文字としての ● は使わず、CSSで綺麗な丸を作ります */
    position: absolute;
    top: 42px; /* ★ここの数値を大きくすると、丸が下に下がります */
    left: 75px;
    transform: translateX(-50%);
    width: 16px;  /* 丸の横幅 */
    height: 16px; /* 丸の縦幅 */
    background-color: #ff5722; /* ★ここにお好みの「丸の色」を指定してください */
    border-radius: 50%; /* 綺麗な正円にする設定 */
    z-index: 2; /* 線よりも手前に表示 */
}

.timeline-item.another::before {
    content: none; /* 文字としての ● は使わず、CSSで綺麗な丸を作ります */
}

.timeline-content.is-solid::before {
	border-top-style: solid;
}

/* 【線（縦棒）の設定】 元の横向きグラデーションを維持します */
.timeline-item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 75px;
    transform: translateX(-50%);
    width: 15px; /* 元のコードに合わせた線の太さ */
    background-image: linear-gradient(90deg, #56c3ed, #0093d4); /* 横向きグラデーション */
    z-index: 1; /* 丸の後ろに配置 */
}

.timeline-item:nth-child(2)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(3)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(4)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(5)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(6)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(7)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(8)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(9)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(10)::before {
  background-color: #004ea2;
}
.timeline-item:nth-child(11)::before {
  background-color: #004ea2;
}

@media (max-width: 640px) {
  .timeline-item {
    flex-direction: column;
    margin-bottom: 20px;
  }

  .timeline-item::before , .timeline-item::after {
    display: none;
  }
  .timeline-item:first-child::before,
  .timeline-item:last-child::before {
    display: none;
  }

  .timeline-item:nth-child(2) .timeline-icon {
    display: none;
  }

  .timeline-content {
    margin-bottom: 30px !important;
  }

  .timeline-content::before {
    display: none;
  }

  .timeline-icon {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
  }

  .timeline-image {
    margin: 0 10px 0 0;
    display: inline-flex;
  }

  .timeline-icon-caption {
    display: inline;
    vertical-align: top;
    line-height: 100px;
    background-color: transparent;
  }

  .timeline-icon-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }
}

/* 親セル（td）側は「位置の調整」のみを担当させる（バグの徹底回避） */
td.vertical-cell {
  vertical-align: middle !important;
  text-align: center !important;
  padding: 15px 5px !important;
  box-sizing: border-box !important;
  min-width: 2.5em !important; /* テーブル全体が崩れるのを防ぐ最小幅 */
}

/* ★この内側のdivにだけ縦書きを命令することで、Safariの90度回転を100%防止します */
td.vertical-cell .v-text-wrapper {
  display: block !important;
  margin: 0 auto !important;
  width: 1.2em !important;      /* 文字が2行にバラバラに泣き別れないようにカチッと固定 */
  white-space: nowrap !important;
  
  /* 縦書き・直立の共通指定 */
  writing-mode: vertical-rl !important;
  -webkit-writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  -webkit-text-orientation: upright !important;
}

/* ★「3種」の数字（3）をまっすぐ立たせる設定 */
td.vertical-cell .tcy {
  display: inline-block !important;
  -webkit-text-combine: horizontal !important;
  text-combine-upright: all !important;
  -webkit-text-combine-upright: all !important;
}

.vertical-text span {
  display: inline-block;          /* Safariのバグを防ぐためブロック化 */
  writing-mode: vertical-rl;      /* 縦書きの指定 */
  -webkit-writing-mode: vertical-rl; /* ★Safari用の古い記述もカバー */
  text-orientation: upright;      /* 数字などもまっすぐ立たせる指定 */
  -webkit-text-orientation: upright;
}

.flex-space {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.row-cols-sm-2 {
  position: relative;
}

.divider-col {
  position: relative;
  border: none !important;
}

.divider-col::before {
  content: "";
  position: absolute;
  background: none;
  border-top: 2px dotted #ccc; 
  width: 95%;          
  top: -1rem;          
  left: 2.5%;           
}

.divider-col {
  margin-top: 2.5rem;   
}

@media (min-width: 641px) {
  .divider-col {
    margin-top: 0;
    /*padding-left: 3rem; */
  }

  .divider-col::before {
    border-top: none;   
    border-left: 2px dotted #ccc; 
    width: auto;
    height: 95%;        
    top: 2.5%;         
    left: 0;            
  }
}