@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
.u-history-chronology {
	position : relative;
	padding : 0 0 20px 24px;
	overflow : hidden;
}
@media screen and (min-width: 768px), print {
	.u-history-chronology {
		padding : 0 0 20px;
		margin-top : -20px !important;
	}
}
.u-history-chronology:before {
	content : '';
	display : block;
	position : absolute;
	top : 32px;
	left : 0;
	bottom : 0;
	width : 8px;
	background : url(../../images/bg_history_ruler_sp.png) left top repeat-y;
	background-size : 8px 9px;
}
@media screen and (min-width: 768px), print {
	.u-history-chronology:before {
		left : 50%;
		margin-left : -7px;
		width : 15px;
		background : url(../../images/bg_history_ruler_pc.png) left top repeat-y;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology:before {
		top : 67px;
	}
}
.u-history-chronology:after {
	content : '';
	display : inline-block;
	width : 10px;
	height : 16px;
	position : absolute;
	bottom : -16px;
	left : -4px;
	background : url(../../images/bg_history_rulerend_sp.png) left top repeat-y;
	background-size : 10px 16px;
}
@media screen and (min-width: 768px), print {
	.u-history-chronology:after {
		left : 50%;
		margin-left : -7px;
		width : 15px;
		height : 21px;
		background : url(../../images/bg_history_rulerend_pc.png) left top repeat-y;
	}
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul {
		*zoom : 1;
	}
	.u-history-chronology ul:after {
		content : ' ';
		display : table;
		clear : both;
	}
}
.u-history-chronology ul li {
	position : relative;
	opacity : 0;
	-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	-webkit-transition : all 0.5s ease;
	        transition : all 0.5s ease;
	-webkit-transform : translateX(50%);
	    -ms-transform : translateX(50%);
	        transform : translateX(50%);
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li {
		width : calc(50% + 2px);
	}
}
.u-history-chronology ul li:before {
	content : '';
	display : inline-block;
	position : absolute;
	top : 32px;
	left : 50%;
	right : 130px;
	height : 1px;
	background : #eee;
	-webkit-transition : all 0.8s ease;
	        transition : all 0.8s ease;
}
.u-history-chronology ul li:after {
	content : '';
	display : inline-block;
	position : absolute;
	top : 27px;
	left : 50%;
	width : 1px;
	height : 1px;
	border-right : 7px solid #eee;
	border-top : 6px solid transparent;
	border-bottom : 5px solid transparent;
	-webkit-transition : all 0.8s ease;
	        transition : all 0.8s ease;
}
.u-history-chronology ul li h2 {
	font-family : 'Playfair Display', serif;
	text-align : right;
	font-size : 50px;
	font-size : 80px;
	font-size : 5rem;
	color : #003145;
	line-height : 1;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li h2 {
		font-size : 100px;
	}
}
.u-history-chronology ul li .chronology-info {
	margin-top : 15px;
	position : relative;
	padding-right : 117px;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li .chronology-info {
		margin-top : 35px;
		min-height : 360px;
	}
}
.u-history-chronology ul li .chronology-info .chronology-img {
	width : 99px;
	position : absolute;
	right : 0;
	top : 0;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li .chronology-info .chronology-img {
		width : 198px;
	}
}
.u-history-chronology ul li .chronology-info h3 {
	font-family : SuzukiPROHeadline;
	font-size : 20px;
	font-size : 32px;
	font-size : 2rem;
	color : #0098db;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li .chronology-info h3 {
		font-size : 36px;
		font-size : 3.6rem;
		margin-bottom : 13px;
	}
}
.u-history-chronology ul li .chronology-info h4 {
	margin-top : 7px;
	font-family : SuzukiPROHeadline;
	font-size : 15px;
	font-size : 24px;
	font-size : 1.5rem;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li .chronology-info h4 {
		font-size : 23px;
		font-size : 2.3rem;
		margin-top : 17px;
	}
}
.u-history-chronology ul li + li {
	margin-top : 35px;
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li + li {
		margin-top : -100px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li + li {
		margin-top : -220px;
	}
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li:nth-child(odd) {
		-webkit-transform : translateX(-50%);
		    -ms-transform : translateX(-50%);
		        transform : translateX(-50%);
		float : left;
		padding-right : 45px;
	}
	.u-history-chronology ul li:nth-child(odd):before {
		left : 142px;
		right : 115px;
		-webkit-transition : all 0.8s ease;
		        transition : all 0.8s ease;
	}
	.u-history-chronology ul li:nth-child(odd):after {
		left : auto;
		right : 110px;
		border-right : none;
		border-left : 7px solid #eee;
		-webkit-transition : all 0.8s ease;
		        transition : all 0.8s ease;
	}
	.u-history-chronology ul li:nth-child(odd) h2 {
		text-align : left;
	}
	.u-history-chronology ul li:nth-child(odd) .chronology-info {
		padding-right : 0;
		padding-left : 117px;
	}
	.u-history-chronology ul li:nth-child(odd) .chronology-info .chronology-img {
		right : auto;
		left : 0;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li:nth-child(odd) {
		padding-right : 90px;
	}
	.u-history-chronology ul li:nth-child(odd):before {
		left : 265px;
		right : 170px;
		top : 65px;
	}
	.u-history-chronology ul li:nth-child(odd):after {
		right : 166px;
		top : 60px;
		border-left : 10px solid #eee;
	}
	.u-history-chronology ul li:nth-child(odd) .chronology-info {
		padding-left : 216px;
	}
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li:nth-child(even) {
		float : right;
		padding-left : 45px;
	}
	.u-history-chronology ul li:nth-child(even):before {
		left : 115px;
		right : 120px;
		-webkit-transition : all 0.8s ease;
		        transition : all 0.8s ease;
	}
	.u-history-chronology ul li:nth-child(even):after {
		left : 110px;
		-webkit-transition : all 0.8s ease;
		        transition : all 0.8s ease;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li:nth-child(even) {
		padding-left : 90px;
	}
	.u-history-chronology ul li:nth-child(even):before {
		left : 170px;
		right : 265px;
		top : 65px;
	}
	.u-history-chronology ul li:nth-child(even):after {
		left : 166px;
		top : 60px;
		border-right : 10px solid #eee;
	}
	.u-history-chronology ul li:nth-child(even) .chronology-info {
		padding-right : 270px;
	}
	.u-history-chronology ul li:nth-child(even) .chronology-info .chronology-img {
		width : 240px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li.pc-imgs .chronology-info {
		padding-right : 215px;
	}
	.u-history-chronology ul li.pc-imgs .chronology-info .chronology-img {
		width : 198px;
	}
}
.u-history-chronology ul li.is-active {
	-webkit-transform : translateX(0);
	    -ms-transform : translateX(0);
	        transform : translateX(0);
	opacity : 1;
	-ms-filter : 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
}
.u-history-chronology ul li.is-active:before {
	left : -5px;
}
.u-history-chronology ul li.is-active:after {
	left : -9px;
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li.is-active:nth-child(odd):before {
		left : 142px;
		right : 15px;
	}
	.u-history-chronology ul li.is-active:nth-child(odd):after {
		left : auto;
		right : 10px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li.is-active:nth-child(odd):before {
		left : 265px;
		right : 20px;
	}
	.u-history-chronology ul li.is-active:nth-child(odd):after {
		right : 16px;
	}
}
@media screen and (min-width: 768px), print {
	.u-history-chronology ul li.is-active:nth-child(even):before {
		left : 15px;
	}
	.u-history-chronology ul li.is-active:nth-child(even):after {
		left : 10px;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronology ul li.is-active:nth-child(even):before {
		left : 20px;
	}
	.u-history-chronology ul li.is-active:nth-child(even):after {
		left : 16px;
	}
}

.u-history-chronologyend {
	margin-top : 15px;
}
@media screen and (min-width: 768px), print {
	.u-history-chronologyend {
		text-align : center;
	}
}
@media screen and (min-width: 1024px), print {
	.u-history-chronologyend {
		width : 920px;
		margin : 30px auto 0;
	}
}
.u-history-chronologyend h2 {
	font-family : 'Playfair Display', serif;
	font-size : 50px;
	font-size : 80px;
	font-size : 5rem;
	color : #003145;
	line-height : 1;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronologyend h2 {
		font-size : 100px;
		font-size : 10rem;
	}
}
.u-history-chronologyend h3 {
	font-family : SuzukiPROHeadline;
	font-size : 18px;
	font-size : 28.8px;
	font-size : 1.8rem;
	color : #0098db;
	margin-top : 5px;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronologyend h3 {
		font-size : 36px;
		font-size : 3.6rem;
		width : 480px;
		margin : 12px auto 0;
		line-height : 1.25;
	}
}
.u-history-chronologyend p {
	margin-top : 5px;
}
@media screen and (min-width: 1024px), print {
	.u-history-chronologyend p {
		margin-top : 15px;
	}
}