@charset "utf-8";

#ctt .top img{
	width:100%;
}
#ctt .wrap{
	display:grid;
	grid-template-columns:1.4fr 2fr;
	padding-bottom:40px;
	margin-top:10rem;
}
#ctt h3{
	font-size:4.8rem;
}
#ctt h3,
#ctt h4{
	font-weight:bold;
	line-height:1.4em;
}
#ctt .history{
	position:relative;
	padding-left:8rem;
}
#ctt .history:after {
	content:'';
	position:absolute;
	top:15px;
	left:0;
	width:1px;
	height:100%;
	background-color:#09b1ec;
	z-index:1;
}
#ctt .history h4{
	position:relative;
	font-size:3.5rem;
	font-weight:bold;
	margin-bottom:30px;
}
#ctt .history h4:after{
	content:'●';
	position:absolute;
	top:50%;
	left:-10.5rem;
	transform:translateY(-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#09b1ec;
	font-size:19px;
	width:50px;
	height:50px;
	background-color: #e0f7ff;
	border-radius:50%;
	z-index:1;
}
#ctt .history li{
	padding-bottom:20px;
	margin-bottom:4rem;
}
#ctt .history p{
	position:relative;
	display:flex;
	line-height:1.6em;
	margin-bottom:15px;
	color:#333;
}
#ctt .history p:after{
	content:'';
	position:absolute;
	top:50%;
	left:-8.3rem;
	transform:translateY(-50%);
	width:7px;
	height:7px;
	border-radius:50%;
	background-color:#09b1ec;	
	z-index:1;
}
#ctt .history p > span{
	font-size:2rem;
	min-width:80px;
	font-weight:600;
}

@media all and (max-width:991px) {
	#ctt h3{
		margin-bottom:50px;
	}
	#ctt .wrap{
		grid-template-columns:1fr;
	}
	#ctt .wrap > section{
		padding:0 30px;
	}
	#ctt .history {
		padding-left:4rem;
	}
	#ctt .history h4:after {
		left:-6.5rem;
	}
	#ctt .history p:after {
		left:-4.3rem;
	}
}
@media all and (max-width:480px) {
	#ctt h3 {
		font-size:34px;
	}
	#ctt .history h4 {
		font-size:26px;
	}
	#ctt .history h4:after {
		left:-7rem;
	}
	#ctt .history p:after {
		left:-4.4rem;
	}
}