@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : timeline.css
Description :
===================================================================== */

/* =====================================================================
*    timeline
* =================================================================== */
.timeline {
	padding: calc(77 / 750 * 100%) 0 calc(100 / 750 * 100%);
}

.timeline::before {
	content: '';
	position: absolute;
	background: url(../images/timeline/bg_timeline.jpg) no-repeat center top/contain;
	width: calc(1100 / 750 * 100vw);
	height: calc(317 / 750 * 100vw);
	top: 0;
	left: -23.5%;
	margin: calc(37 / 750 * 100%) auto 0;
}

.timeline .sec_ttl {
	margin: 0 0 calc(122 / 750 * 100%);
}

.timeline .sec_contents {
	width: 100%;
}

.timeline_events::before {
	content: '';
	position: absolute;
	background-color: #c91149;
	width: 1px;
	height: 100%;
	top: 0;
	left: calc(30 / 750 * 100%);
	margin: auto;
}

.timeline_events > li {
	margin-bottom: calc(50 / 750 * 100%);
}

.timeline_time {
	color: #fff;
	font-size: 3.4rem;
	background-color: #000;
	display: inline-block;
	width: calc(300 / 750 * 100%);
	padding: calc(32 / 750 * 100%) 0 calc(32 / 750 * 100%) calc(60 / 750 * 100%);
}

.timeline_month {
	width: calc(660 / 750 * 100%);
	color: #fff;
	font-size: 3.4rem;
	background-color: #c91149;
	padding: calc(42 / 750 * 100%) 0 calc(42 / 750 * 100%) calc(90 / 750 * 100%);
	margin: calc(-20 / 750 * 100%) 0 0 calc(30 / 750 * 100%);
	z-index: 2;
}

.event_img {
	width: calc(630 / 750 * 100%);
	margin: calc(-20 / 750 * 100%) 0 0 calc(120 / 750 * 100%);
}

.event_img li:not(:first-child) {
	margin-top: calc(30 / 630 * 100%);
}

.grade_line::before {
	background: #ff4800;
	background: -webkit-gradient(linear, left top, right top, from(#ff4800), color-stop(25%, #f7480e), color-stop(50%, #4451ff), color-stop(75%, #228cd6), to(#10ca95));
	background: linear-gradient(to right, #ff4800 0%, #f7480e 25%, #4451ff 50%, #228cd6 75%, #10ca95 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4800', endColorstr='#10ca95', GradientType=1);
}

.event_content dl {
	width: calc(570 / 750 * 100%);
	margin-left: calc(120 / 750 * 100%);
}

.event_ttl {
	margin-top: calc(35 / 570 * 100%);
}

.event_ttl1 {
	font-size: 3.2rem;
	font-weight: 700;
	color: #c91149;
}

.event_ttl2 {
	font-size: 3.2rem;
	background-color: #c91149;
	color: #f7dc2a;
	line-height: 1.2;
	display: inline-block;
}

.event_txt {
	font-size: 2.4rem;
	line-height: 4rem;
	margin-top: calc(15 / 570 * 100%);
}



@media screen and (min-width: 768px) {
	.timeline {
		padding: calc(140 / 1200 * 100%) 0 !important;
	}

	.timeline::before {
		background-size: cover;
		width: 100%;
		height: calc(177 / 1200 * 100vw);
		left: 0;
		right: 0;
		margin: calc(62 / 1200 * 100%) auto 0;
	}

	.timeline .sec_ttl {
		margin: 0 0 calc(174 / 1000 * 100%);
	}

	.sec_ttl img {
		width: calc(665 / 1000 * 100%);
	}

	.timeline_events::before {
		width: 3px;
		left: 0;
		right: 0;
		margin: auto;
	}

	.timeline_events > li {
		margin-bottom: calc(100 / 1000 * 100%);
	}

	.timeline_time {
		font-size: 2rem;
		display: block;
		width: calc(200 / 1000 * 100%);
		margin: 0 auto;
		padding: calc(21 / 1000 * 100%) 0;
		text-align: center;
	}

	.timeline_month {
		width: calc(400 / 1000 * 100%);
		font-size: 2rem;
		padding: calc(28 / 1000 * 100%) calc(68 / 1000 * 100%);
	}

	.timeline_events > li:nth-child(odd) .timeline_month {
		margin: calc(-17 / 1000 * 100%) auto 0 calc(140 / 1000 * 100%);
		text-align: right;
	}

	.timeline_events > li:nth-child(even) .timeline_month {
		margin: calc(-17 / 1000 * 100%) auto 0 calc(460 / 1000 * 100%);
	}

	.event_content {
		width: 100%;
		margin: calc(-44 / 1000 * 100%) 0;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.timeline_events > li:nth-child(odd) .event_content {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}

	.grade_line:hover::before {
		width: 8.2em !important;
	}

	.event_img {
		width: calc(475 / 1000 * 100%);
		margin: 0;
	}

	.event_content dl {
		width: calc(475 / 1000 * 100%);
		margin: calc(70 / 1000 * 100%) 0 0;
	}

	.event_ttl,
	.event_txt {
		width: 100%;
	}

	.event_ttl {
		margin-top: 0;
	}

	.timeline_events > li:nth-child(odd) .event_ttl {
		text-align: right;
	}

	.event_ttl1,
	.event_ttl2 {
		font-size: 2rem;
	}

	.event_txt {
		font-size: 1.4rem;
		line-height: 2;
		margin-top: calc(15 / 475 * 100%);
	}
}

@media screen and (min-width: 1200px) {
	.timeline {
		padding: 140px 0 !important;
	}

	.timeline::before {
		max-width: 1600px;
		max-height: 177px;
		margin: 62px auto 0;
	}

	.grade_line:hover::before {
		width: 100px !important;
	}

}