<ul class="cp_timeline01">
  <li><div class="timeline_item">
  <div class="flag_cont">
  <span class="flag">タイトル</span>
  <span class="time">2016 - </span>
  </div>
  <div class="desc">内容</div>
  </div></li>
  <li><div class="timeline_item">
  <div class="flag_cont">
  <span class="flag">タイトル</span>
  <span class="time">2015 - 2016</span>
  </div>
  <div class="desc">内容</div>
  </div></li>
  <li><div class="timeline_item">
  <div class="flag_cont">
  <span class="flag">タイトル</span>
  <span class="time">2014 - 2015</span>
  </div>
  <div class="desc">内容</div>
  </div></li>
</ul>

.cp_block {
  margin: 3em auto;
}
.cp_timeline01 {
  position: relative;
  width: 100%;
  margin: 3em auto;
  padding: 1em 0;
  list-style-type: none;
}
.cp_timeline01:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: '';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgba(128,222,234 ,1);
  z-index: 5;
}
.cp_timeline01 li {
  padding: 1em 0;
}
.cp_timeline01 li:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cp_timeline01 li:nth-child(odd) .timeline_item {
  position: relative;
  width: calc(50% - 29px);
  float: left;
  text-align: right;
}
.cp_timeline01 li:nth-child(even) .timeline_item {
  position: relative;
  width: calc(50% - 29px);
  float: right;
}
.cp_timeline01 li .timeline_item .flag_cont {
  position: relative;
  display: inline-block;
  text-align: center;
}
.cp_timeline01 li .timeline_item .flag {
  position: relative;
  display: inline;
  background: rgba(26,35,126 ,1);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: bold;
  text-align: left;
}
.cp_timeline01 li:nth-child(odd) .timeline_item .flag {
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.cp_timeline01 li:nth-child(even) .timeline_item .flag {
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}
.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:before,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
  position: absolute;
  top: 4px;
  right: -44px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  padding: 4px;
  background: rgba(0,188,212 ,1);
  border-radius: 50%;
  border: 6px solid rgba(26,35,126 ,1);
  z-index: 10;
}
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
  left: -44px;
}
.cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:after,
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
  position: absolute;
  top: 10px;
  right: -38px;
  content: ' ';
  display: block;
  width: 16px;
  height: 16px;
  margin-top: -10px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255 ,1);
  z-index: 10;
}
.cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
  left: -38px;
}
.cp_timeline01 li:nth-child(odd) .timeline_item .flag:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -6px;
  border: solid transparent;
  border-left-color: rgba(26,35,126 ,1);
  border-width: 6px;
}
.cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -6px;
  border: solid transparent;
  border-right-color: rgba(26,35,126 ,1);
  border-width: 6px;
}
.cp_timeline01 li .timeline_item .time {
  display: block;
  margin-top: 1em;
  padding: 4px 6px;
  font-size: 0.6em;
  line-height: 1em;
  color: rgba(255,87,34 ,1);
  text-align: right;
}
.cp_timeline01 li:nth-child(even) .timeline_item .time {
  text-align: left;
}
.cp_timeline01 li .timeline_item .desc {
  margin: 1em 0.75em 0 0;
  font-size: 0.7em;
  line-height: 1.5em;
  margin: 1em 1em 0 1em;
  padding: 1em;
  background: rgba(178,235,242 ,0.7);
  border-radius: 6px;
}
@media only screen and (max-width:768px) {
  .cp_timeline01 {
    width: 100%;
    padding: 4em 0 1em 0;
  }
  .cp_timeline01 li {
    padding: 2em 0;
  }
  .cp_timeline01 li:nth-child(odd) .timeline_item,
  .cp_timeline01 li:nth-child(even) .timeline_item {
    float: none;
    width: 100%;
    text-align: center;
  }
  .cp_timeline01 li .timeline_item .flag_cont {
    text-align: center;
  }
  .cp_timeline01 li .timeline_item .flag {
    z-index: 15;
  }
  .cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:before,
  .cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:before {
    top: -34px;
    left: calc(50% - 16px);
  }
  .cp_timeline01 li:nth-child(odd) .timeline_item .flag_cont:after,
  .cp_timeline01 li:nth-child(even) .timeline_item .flag_cont:after {
    top: -28px;
    left: calc(50% - 10px);
  }
  .cp_timeline01 li:nth-child(odd) .timeline_item .flag:after,
  .cp_timeline01 li:nth-child(even) .timeline_item .flag:after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    height: 0;
    width: 0;
    margin-left: -6px;
    border: solid transparent;
    border-bottom-color: rgba(26,35,126 ,1);
    border-width: 6px;
    pointer-events: none;
  }
  .cp_timeline01 li .flag_cont {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
  }
  .cp_timeline01 li:nth-child(odd) .timeline_item .time,
  .cp_timeline01 li:nth-child(even) .timeline_item .time {
    float: none;
    text-align: center;
    background: #ffffff;
  }
  .cp_timeline01 li .timeline_item .desc {
    position: relative;
    z-index: 15;
  }
}