@charset "UTF-8";

#lineup {
	position : relative;
	background-color : #f2f2f2;
}
section#lineup > .inner {
	overflow : hidden;
	margin : 0 auto;
	padding : 40px 20px;
}
section#lineup > .inner > .content:not(:last-child) {
	margin-bottom : 40px;
}
section#lineup > .inner > .link:not(:last-child) {
	margin-bottom : 40px;
}
#lineup h2 {
	font-size : 1.4285em;
	margin-bottom : 1em;
}
#lineup ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 24px;
}
#lineup ul > li {
	background-color : #ffffff;
}
#lineup ul > li > a {
	display : block;
	height : 100%;
	text-decoration : none;
}


#lineup  ul > li > a {
	transition : all 0.3s ease-out;
}
#lineup  ul > li > a:hover {
	background-color : #e1e1e1;
}


#lineup .img {
	display : flex;
	justify-content : center;
	align-items : center;
	margin-bottom : 24px;
}
#lineup .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#lineup .name {
	font-size : 1.2em;
	padding : 0 1em;
	text-align : center;
}
#pageBody #lineup .content .name {
	margin-bottom : 0.25em;
}
#lineup .nolonger {
	font-size : 0.875em;
	margin-bottom : 24px;
	padding : 0 1em;
	text-align : center;
	color : #2483b2;
}
#lineup .next {
	position : absolute;
	top : 50%;
	right : 20px;
	cursor : pointer;
	transform : translateY(-50%);
}
#lineup .prev {
	position : absolute;
	top : 50%;
	left : 20px;
	cursor : pointer;
	transform : translateY(-50%);
}

#lineup ul > li.link a {
	display : flex;
	font-size : 1.1em;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	padding : 40px 16px;
	color : #2483b2;
	background-color : #e3e3e3;
}
#lineup ul > li.link a:hover {
	background-color : #cccccc;
}
#lineup ul > li.link a::before {
	display : block;
	font-family : "Material Icons";
	font-size : 120px;
	content : "\e145";
	color : #ffffff;
}

#lineup > .inner > .link {
	display : flex;
	justify-content : center;
}
#lineup > .inner > .link a {
	width : 100%;
	max-width : 300px;
}

@media screen and (max-width: 767px) {
	#lineup ul {
		display : grid;
		grid-template-columns : 1fr 1fr;
		grid-gap : 16px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	#lineup ul {
		display : grid;
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap : 24px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1439px) {
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
}
@media screen and (min-width: 1920px) {
}