/* Start custom CSS */.timeline{
  --axis-x: 120px;   /* 縦線のX座標（ここを基準に全部揃える） */
  --dot: 14px;       /* ドットの直径 */
  position: relative;
}

/* 縦線（1本） */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: var(--axis-x);
  width:2px;
  background:#ff7aa2;
}

/* 各行 */
.timeline-item{
  display:grid;
  grid-template-columns: 100px 1fr;
  column-gap: 40px;
  position: relative;
  padding-bottom: 50px;
}

/* ドット（縦線の上に重ねる） */
.timeline-item::before{
  content:"";
  position:absolute;
  top: 10px; /* h3の行頭と合わせる。必要なら微調整 */
  left: calc(var(--axis-x) - (var(--dot) / 2));
  width: var(--dot);
  height: var(--dot);
  background:#ff9bb8;
  border-radius: 50%;
  z-index: 2;
}

/* 時間 */
.time{
  text-align:right;
  font-size:28px;
  font-weight:700;
  color:#ff9bb8;
}

/* 右コンテンツ */
.content h3{
  margin:0 0 8px;
  font-size:20px;
}
.content p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  opacity:.9;
}
.timeline{
  --axis-x: 120px;   /* 縦線のX座標（左端） */
  --dot: 14px;       /* ドット直径 */
  --line: 2px;       /* 縦線の太さ ←追加 */
  position: relative;
}
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: var(--axis-x);
  width: var(--line);
  background:#ff7aa2;
}
.timeline-item::before{
  content:"";
  position:absolute;
  top: 10px;
  left: calc(
    var(--axis-x) + (var(--line) / 2) - (var(--dot) / 2)
  );
  width: var(--dot);
  height: var(--dot);
  background:#ff9bb8;
  border-radius: 50%;
  z-index: 2;
}
.timeline{
  --axis-x: 120px;   /* 縦線のX座標（左端） */
  --dot: 14px;       /* ドット直径 */
  --line: 2px;       /* 縦線の太さ */
  --tweak: 0px;      /* 微調整（必要なら -1px〜+1px） */
  position: relative;
}

/* 縦線（1本） */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left: var(--axis-x);
  width: var(--line);
  background:#ff7aa2;
}

/* 各行 */
.timeline-item{
  display:grid;
  grid-template-columns: 100px 1fr;
  column-gap: 40px;
  position: relative;
  padding-bottom: 44px;
}

/* ドット（線の中心に合わせる） */
.timeline-item::before{
  content:"";
  position:absolute;
  top: 10px;
  left: calc(var(--axis-x) + (var(--line)/2) - (var(--dot)/2) + var(--tweak));
  width: var(--dot);
  height: var(--dot);
  background:#ff9bb8;
  border-radius: 50%;
  z-index: 2;
}

/* 時間 */
.time{
  text-align:right;
  font-size:28px;
  font-weight:700;
  color:#ff9bb8;
  line-height: 1.1;
}

/* 右コンテンツ */
.content{
  padding-top: 2px;
}

.label{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 155, 184, .15);
  color: #ff7aa2;
  border: 1px solid rgba(255, 155, 184, .35);
  margin-bottom: 8px;
}

.content h3{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
}

.content p{
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.8;
  opacity: .92;
}

.content p:last-child{
  margin-bottom: 0;
}

/* 最終行だけ少し強調（任意） */
.timeline-item.is-end .label{
  background: rgba(255, 155, 184, .22);
  border-color: rgba(255, 155, 184, .55);
}
.timeline-item.is-end::before{
  background: #ff7aa2;
  box-shadow: 0 0 0 4px rgba(255, 122, 162, .12);
}

/* スマホ対応 */
@media (max-width: 768px){
  .timeline{ --axis-x: 92px; }
  .timeline-item{
    grid-template-columns: 72px 1fr;
    column-gap: 28px;
    padding-bottom: 34px;
  }
  .time{ font-size: 20px; }
  .content h3{ font-size: 18px; }
}
15:40/* End custom CSS */