@charset "utf-8";

/* -----------------------------
	lineup
-------------------------------- */

.lineup-area {
	padding: 100px 0 0;
	position: relative;
}

.lineup-area::before ,
.lineup-area::after {
	content: "";
	position: absolute;
	background: #F6F6F4;
	z-index: -1;
}

.lineup-area::before {
	right: 0;
	top: 0;
	width: 29.375%;
	height: 400px;
}

.lineup-area::after {
	left: 0;
	top: 230px;
	width: 56.25%;
	height: 900px;
}

.lineup-area .title {
	font-family: var(--quicksand);
    font-weight: 700;
    font-size: 2.0rem;
    color: var(--gold03);
    position: relative;
    display: inline-block;
    padding: 0 90px 0 0;
	margin: 30px 0 0;
}

.lineup-area .title::before {
    content: "";
    width: 80px;
    height: 1px;
    background: var(--gold03);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.lineup-area .copy {
	font-family: var(--basefont-jp);
    font-size: 4.0rem;
    font-weight: 400;
    color: var(--gold02);
    line-height: 1.5;
    font-feature-settings: "palt";
	margin: 20px 0 0;
}

.lineup-area .info-area {
	padding: 120px 0 100px;
}

.lineup-area .info-area ul {
	display: flex;
	gap:5px;
	flex-wrap: wrap;
	padding: 30px 0 0;
}

.lineup-area .info-area ul li {
    font-feature-settings: "palt";
	display: flex;
	align-items: center;
	width: calc((100% - 20px)/5);
	border: #D1C7A3 solid 1px;
	padding: 0px 0 0 12px;
	height: 80px;
	line-height: 1.5;
	font-size: 1.5rem;
}

.lineup-area.eternity-area .info-area ul {
	gap:5px;
}

.lineup-area.eternity-area .info-area ul li {
	width: calc((100% - 15px)/4);
	height: 100px;
}

@media screen and (max-width: 768px){

	.lineup-area {
		padding: 50px 20px 0;
		position: relative;
	}

	.lineup-area::before {
		height: 200px;
	}

	.lineup-area::after {
		top: 115px;
		height: 360px;
	}

	.lineup-area .image img {
		width: 100%;
	}

	.lineup-area .title {
		font-size: 1.8rem;
		padding: 0 60px 0 0;
		margin: 20px 0 0;
	}

	.lineup-area .title::before {
		width: 50px;
	}

	.lineup-area .copy {
		font-size: 2.6rem;
		margin: 10px 0 0;
	}

	.lineup-area .info-area {
		padding: 70px 0 50px;
	}

	.lineup-area .info-area ul {
		gap:5px;
		padding: 20px 0 0;
	}

	.lineup-area .info-area ul li {
		width: 100%;
		height: auto;
		padding: 10px 0 10px 15px;
	}

	.lineup-area.eternity-area .info-area ul li {
		width: 100%;
		height: auto;
	}

}