/*沿革*/
.timeline{
    position:relative;
    max-width:1100px;
    margin:60px auto 0;
}

.timeline::before{
    content:"";
    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    background:#6B94AE;
}

.timeline-item{
  position:relative;

  display:flex;
  margin-bottom:40px;
}
.timeline-item.left{
  justify-content:flex-start;
}
.timeline-item.left .timeline-card{
    margin-right:50px;
}
.timeline-item.right{
  justify-content:flex-end;
}
.timeline-item.right .timeline-card{
    margin-left:50px;
}
.timeline-card{
    width: calc(50% - 50px);

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:10px;

    box-shadow:
        0 10px 20px rgba(0,0,0,.05);
}
.timeline-dot{
    position:absolute;

    left:50%;

    top:20px;

    width:20px;
    height:20px;

    transform:translateX(-50%);

    border-radius:50%;

    background:#fff;

    border:4px solid #2A5772;

    z-index:10;
}
/*年号*/
.timeline-year{
    display:inline-block;

    background:#D9CBA3;

    color:#2A5772;

    padding:4px 12px;

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}
/*タイトル*/
.timeline-card-title{
  margin-top:12px;
  font-size:1.1rem;
  font-weight:700;
  color:#1F2937;
}
/*本文*/
.timeline-card-text{
  margin-top:8px;
  margin-left: 4px;
  margin-right: 4px;
  color:#475569;
  line-height:1.8;
}
@media(max-width:768px){

    .timeline::before{
        left:20px;
    }

    .timeline-item{
        justify-content:flex-start;
    }

    .timeline-card{
        width:100%;
        margin-left:50px;
    }

    .timeline-dot{
        left:20px;
    }
}
@media (max-width:768px){

    .timeline-item.left .timeline-card,
    .timeline-item.right .timeline-card{
        width:100%;
        margin-left:50px;
        margin-right:0;
    }

}