<div class="cp_timeline03">
	<div class="timeline_group">
		<span class="time_year">2018</span>
		<div class="timeline_item">
			<div class="time">
				<span class="time_day">22</span>
				<span class="time_month">Feb</span>
			</div>
			<div class="desc">
				<p class="flag">タイトル</p>
				内容
			</div>
		</div>
		<div class="timeline_item">
			<div class="time">
				<span class="time_day">10</span>
				<span class="time_month">Sept</span>
			</div>
			<div class="desc">
				<p class="flag">タイトル</p>
				内容
			</div>
		</div>
	</div>
	<div class="timeline_group">
		<span class="time_year">2017</span>
		<div class="timeline_item">
			<div class="time">
				<span class="time_day">1</span>
				<span class="time_month">Jul</span>
			</div>
			<div class="desc">
				<p class="flag">タイトル</p>
				内容
			</div>
		</div>
	</div>
	<div class="timeline_group">
		<span class="time_year">2016</span>
		<div class="timeline_item">
			<div class="time">
				<span class="time_day">14</span>
				<span class="time_month">Aug</span>
			</div>
			<div class="desc">
				<p class="flag">タイトル</p>
				内容
			</div>
		</div>
	</div>
</div>

.cp_timeline03 {
	position: relative;
	margin: 3em auto;
}
.cp_timeline03:before {
	position: absolute;
	top: 0;
	width: 4px;
	height: 100%;
	content: '';
	background-color: #006064;
	left: 30px;
}
.cp_timeline03 .timeline_group {
	position: relative;
	padding-top: 55px;
}
.cp_timeline03 .timeline_group:not(:first-of-type) {
	margin-top: 4rem;
}
.cp_timeline03 .time_year {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.5rem 1.5rem;
	color: #fff;
	background-color: #00838F;
	width: 100%;
	-webkit-box-sizing: border-box;
					box-sizing: border-box;
}
.cp_timeline03 .timeline_item {
	margin-bottom: 1em;
	position: relative;
	padding-left: 80px;
}
.cp_timeline03 .timeline_item:not(:last-of-type) {
	margin-bottom: 2em;
}
.cp_timeline03 .timeline_item:before {
	position: absolute;
	z-index: -1;
	left: 0;
	width: 100%;
	height: 3px;
	content: '';
	background-color: #006064;
	top: 50%;
	-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
}
.cp_timeline03 .time {
	position: absolute;
	left: 0;
	box-sizing: border-box;
	min-width: 65px;
	min-height: 65px;
	padding: 0.5em 0.5em;
	text-align: center;
	color: #fff;
	background-color: #26C6DA;
	top: 50%;
	margin-top: -33px;
	border-radius: 65px;
}
.cp_timeline03 .time_day {
	font-size: 1em;
	font-weight: 700;
	display: block;
}
.cp_timeline03 .time_month {
	font-size: 0.8em;
	display: block;
	text-transform: uppercase;
}
.cp_timeline03 .desc {
	padding: 0.5em 1em;
	border-left: 3px solid #26C6DA;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
	font-size: 0.9em;
}
.cp_timeline03 .desc .flag {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 0;
	padding-bottom: 0.3em;
}
@media only screen and (max-width: 767px) {
	.cp_timeline03:before {
		left: 0;
	}
	.cp_timeline03 .timeline_group {
		padding-top: 40px;
	}
	.cp_timeline03 .timeline_item {
		padding-top: 60px;
		padding-left: 20px;
	}
	.cp_timeline03 .timeline_item:before {
		top: 90px;
	}
	.cp_timeline03 .time {
		top: 40px;
		border-radius: 0 20px 20px 0;
		min-height: 2em;
	}
	.cp_timeline03 .time_day,
	.cp_timeline03 .time_month {
		display: inline-block;
	}
	.cp_timeline03 .desc {
		font-size: 0.8em;
	}
}