@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);

main{
	margin-top: 500px;
	padding-top: 0;
}
@media screen and (max-width: 1100px){
	main{
		margin-top: 370px;
	}
}

/*-------------*/

#s_lineup{
	background: #fff;
	border-top: 2px solid #000;
	text-align: center;
	box-shadow: 20px 20px 70px rgba(0,0,0,0.4);
	position: relative;
	z-index: 3;
}
#s_lineup .outer{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	border-top: 2px solid #000;
}
#s_lineup .inner{
	width: 33.3%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}
#s_lineup .inner:nth-of-type(3n){
	border-right: none;
}
#s_lineup .inner a{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
	position: relative;
	width: 100%;
	min-height: 80px;
	transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#s_lineup .inner div{
	line-height: 1.3;
}
#s_lineup .inner div p{
	font-size: 1.8rem;
	padding-bottom: 5px;
	font-weight: bold;
}
#s_lineup .inner div i{
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
}
#s_lineup .inner div span{
	display: inline-block;
	padding: 0 3px;
}
#s_lineup .inner a:hover{
	color: #fff;
	background: #000;
}
@media screen and (max-width: 1000px){
	#s_lineup .inner a{
		padding: 5px;
	}
	#s_lineup .inner div p{
		font-size: 1.6rem;
	}
}

/*-------------*/

.lineups{
	position: relative;
	z-index: 3;
	border-bottom: 2px solid #000;
}
.lineups .outer{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #fff;
}
.lineups .img{
	width: 30%;
	border-right: 2px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: #000;
}
.lineups .img:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(3);
	transform-origin: 50% 50%;
	filter: blur(10px) saturate(200%);
	opacity: 0.5;
}
.lineups#s1 .img:before{
	background: url(../images/pkg1.jpg) 0 50% no-repeat;
	background-size: cover;
}
.lineups#s2 .img:before{
	background: url(../images/pkg2.jpg) 0 50% no-repeat;
	background-size: cover;
}
.lineups#s3 .img:before{
	background: url(../images/pkg3.jpg) 0 50% no-repeat;
	background-size: cover;
}
.lineups#s4 .img:before{
	background: url(../images/pkg4.jpg) 0 50% no-repeat;
	background-size: cover;
}
.lineups .img span{
	position: relative;
	padding: 50px;
	z-index: 2;
	display: block;
}
.lineups .img img{
	display: block;
	box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
}
.lineups .txt{
	width: 70%;
	text-align: left;
}
.lineups .txt h3{
	font-size: 6rem;
	letter-spacing: -0.2rem;
	line-height: 1;
	border-bottom: 2px solid #000;
}
.lineups .txt h3 a{
	display: block;
	padding: 15px 30px 20px;
	transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lineups .txt h3 a:hover{
	background: #000;
	color: #fff;
}
.lineups .txt h3 i{
	font-size: 2rem;
	letter-spacing: 0rem;
	display: block;
	padding-top: 10px;
}
.lineups .txt h3 span{
	display: inline-block;
	padding-right: 10px;
}
.lineups .txt .inner{
	padding: 20px 30px 40px;
}
.lineups .txt ul.inf{
	display: block;
}
.lineups .txt ul.inf li{
	display: inline-block;
}
.lineups .txt ul.inf li:before{
	content: "/ ";
}
.lineups .txt ul.inf li:first-child:before,
.lineups .txt ul.inf li:last-child:before{
	content: "";
}
.lineups .txt .cap{
	padding-top: 15px;
}
.lineups .txt .st{
	clear: both;
	font-weight: bold;
	padding-top: 15px;
	margin-bottom: 5px;
}
.lineups .txt ul.tk{
	width: 49%;
	float: left;
}
.lineups .txt ul.tk+ul.tk{
	float: right;
}
.lineups .txt ul.tk li{
	padding-left: 15px;
	position: relative;
	font-size: 1.6rem;
}
.lineups .txt ul.tk li:before{
	content: "";
	display: block;
	width: 5px;
	height: 2px;
	background: #ed1c24;
	position: absolute;
	top: 12px;
	left: 0;
}
.lineups .txt ul.tk li.semi:before{
	display: none;
}
.lineups .txt .btn{
	text-align: left;
	padding-top: 30px;
	clear: both;
}
@media screen and (max-width: 1350px){
	.lineups .img{
		width: 35%;
	}
	.lineups .txt{
		width: 65%;
	}
	.lineups .img span{
		padding: 30px;
	}
}
@media screen and (max-width: 1100px){
	.lineups .img{
		align-items: flex-start;
	}
	.lineups .img span{
		padding: 20px;
	}
	.lineups .txt h3{
		font-size: 4rem;
		letter-spacing: -0.1rem;
	}
}
@media screen and (max-width: 900px){
	.lineups .img{
		width: 40%;
	}
	.lineups .txt{
		width: 60%;
	}
	.lineups .txt ul.tk{
		width: 100%;
		float: none !important;
	}
}
@media screen and (max-width: 750px){
	.lineups .outer{
		display: block;
	}
	.lineups .img{
		width: 100%;
	}
	.lineups .img img{
		max-width: 300px;
		width: 100%;
	}
	.lineups .txt{
		width: 100%;
	}
	.lineups .txt h3 a{
		padding: 15px 15px 20px;
	}
	.lineups .txt .inner{
		padding: 20px 15px 30px;
	}
	.lineups .txt .btn{
		text-align: center;
		padding-top: 15px;
	}
}