@charset "utf-8";

/********************************************************
	
	flex-grid:| sm  | md  | lg  |  xl  |
	min-width:| 576 | 768 | 992 | 1200 |
	max-width:| 575 | 767 | 991 | 1199 |

********************************************************/
/* ======================================================

	沿革
	history.html

====================================================== */
.blk-his{}
.blk-his__movie{
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
.blk-his__caption{
	text-align: center;
}
.blk-his .c-page-ttl-sub{
	text-align: center;
}
@media screen and (max-width: 767px) {
	.blk-his__caption{
		text-align: left;
	}
	.blk-his .c-page-ttl-sub{
		text-align: left;
	}
}
/* ======================================================

	沿革
	history.html
	カスタマイズ | アンカータブ

====================================================== */
.p-anchor__item a{
	color: #ffffff;
}
.p-anchor__item a::before{
	background-color: #439c38;
	box-shadow: none;
}
.p-anchor__item a:hover::before{
	background-color: #439c38;
}
.p-anchor__item a::after{
	position: absolute;
	display: block;
	content: '↓';
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
/* ======================================================
	
	沿革
	history.html
	タイムライン

====================================================== */
.timeline{
	position: relative;
	display: flex;
	padding-top: 20px;

	font-size: 1.7rem;
}
	.timeline__images{
		flex: 0 1 26.5%;
	}
	.timeline__year{
		position: relative;
		flex: 0 0 114px;
		padding: 0 20px;
	}
	.timeline__desc{
		flex: 0 1 calc(73.5% - 74px);
		flex-basis: calc(73.5% - 74px);
	}
.timeline__year::before{
	position: absolute;
	display: block;
	content: '';
	top: -20px;
	left: 50%;
	width: 2px;
	height: calc(100% + 20px);
	border-left: 1px solid #6fb92c;
}
.timeline__year p{
	position: relative;
	padding: 3px 0 5px;
	background: #6fb92c;
	z-index: 5;

	color: #ffffff;
	text-align: center;
	line-height: 1;
}
.timeline__desc p{
	margin-bottom: 1em;
}
.timeline__images figure{
	max-width: 204px;
}
.timeline__images figure:nth-child(1){
	margin-bottom: 50px;
}
.timeline__images figcaption{
	font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
	.timeline{
		flex-wrap: wrap;
		font-size: 1.4rem;
	}
	.timeline__year{
		position: static;
		flex: 0 0 80px;
		padding: 0 15px;
	}
	.timeline__desc{
		width: calc(100% - 100px);
		margin-bottom: 20px;
		order: 2;
		flex: 1 0 auto;
	}
	.timeline__images{
		width: 100%;
		margin-left: 80px;
		flex: 1 0 auto;
		order: 3;
	}
	.timeline__year::before{
		top: 0;
		left: 40px;
	}
	.timeline__desc p{
		margin-bottom: 0;
	}
	.timeline__images figure:nth-child(1){
		margin-bottom: 15px;
	}
}