#info {
	font-size: 1em;
}

#info h2 {
	font-size: 2.75em;
}

#info .wrapper {
	/* padding: 1em; */
}

#info .text-box {
	background-color: #0d0e56;
	border: 5px solid #05fdfd;
	box-shadow: 5px 5px 0 #05fdfd;
	margin-left: auto;
	margin-right: auto;
	/* margin-bottom: 35px; */
	margin-top: 15px;
	padding: 2em;
}

#info .info-top {
	background: #00acff;
    position: relative;
	/* padding: 1em; */
    z-index: 2;
}

#info #top-box {
	text-align: center;
	width: 750px;
	max-width: 100%;
	padding: 1em 3em;
}

#info .sub-heading {
	color: #05fdfd;
	font-size: 1.5em;
	font-weight: 700;
}

#info .bordered-img {
	border: 3px solid #fff;
}

#desc-box {
	display: flex;
	flex-wrap: wrap;
}

.info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 3em;
}

#exPassImg {
	flex: 0 1 auto;
	text-align: center;
	margin: auto;
}

#exPassInfo {
	/* padding: 0 5em; */
	flex: 5 1 50%;
}

#exPassInfo .heading,
#exPassInfo .sub-heading {
	text-align: center;
}

#exPassScreenshots {
	flex-basis: 100%;
	margin-top: 2em;
}

#exPassScreenshots .screenshotList {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

@media screen and (max-width: 767px) {
	#exPassScreenshots .screenshotList {
		flex-wrap: wrap;
		justify-content: center;
	}
}

#exPassScreenshots .screenshotList .bordered-img {
	width: 420px;
	max-width: 100%;
}

#setInfo {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: space-between;
}
#bgm-box.text-box,
#costume-box.text-box {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}
#bgm-box {
	flex-basis: 55%;
}
#costume-box {
	flex-basis: 44%;
}
#setInfo ul {
	text-align: left;
	/* margin-left: 1em; */
}

#setInfo .set-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	margin-top: 1em;
}

#setInfo .list {
	text-align: left;
}

#setInfo h5 {
	font-weight: 700;
	font-size: 24px;
}

#p4gBGM h5 {
	color: #FFE500;
}

#p5rBGM h5 {
	color: #FF0000;
}

#velvetBGM h5 {
	color: #00ACFF;
}

.info-banner {
    position: fixed;
    bottom: 0;
    background-color: #05FDFD;
    width: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    z-index: 99;
	padding-left: 3em;
}

/* .info-banner .available {
    width: 30%;
	padding: 0 3em;
}

.info-banner .comingsoon {
    width: 70%;
	clip-path: polygon(100% 2%, 100% 100%, 0% 100%, 0% 100%, 5% 2%);
    background-color: #0D0E56;
    display: flex;
    align-items: center;
	justify-content: space-around;
    text-align: center;
    padding: 1em;
}

.info-banner .costume,
.info-banner .aigis {
    width: 40%;
}*/

.info-banner .available {
    width: 33.3%;
	padding: 1em;
	/* display: flex; */
    align-items: center;
	justify-content: space-around;
    text-align: center;
}

.info-banner .comingsoon {
    width: 33.3%;
	clip-path: polygon(100% 2%, 100% 100%, 0% 100%, 0% 100%, 5% 2%);
    background-color: #0D0E56;
    /* display: flex; */
    align-items: center;
	justify-content: space-around;
    text-align: center;
    padding: 1em 3em;
}

/* .info-banner .ex,
.info-banner .costume {
    width: 40%;
} */

.info-banner h2 {
    font-size: clamp(0.9em, 1.25vw, 1em);
    text-transform: uppercase;
}

.info-banner h3 {
    white-space: nowrap;
    font-size: clamp(0.9em, 1.25vw, 1em);
	text-transform: uppercase;
}

#banner1_1,
#banner2_1 {
	color: #0D0E56;
}

.info-banner .info-box {
    background-color: rgba(5, 253, 253, 0.5);
    border: 1px solid #fff;
    font-family: "semplicitapro", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #0D0E56;
    width: 500px;
    max-width: 90%;
	padding: 0.5em;
	
	margin:auto;
}

.info-banner .available .info-box {
    background-color: #0D0E56;
    color: #fff;
	margin: auto;
}

@media screen and (max-width: 1280px) {
	.info-banner {
		padding: 0;
		padding-top: 0.25em;
	}

	#bgm-box,
	#costume-box {
		flex-basis: 100%;
	}

	.info-banner,
	.info-banner .available {
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.info-banner .comingsoon {
		clip-path: none;
	}
	
	.info-banner .available,
	.info-banner .comingsoon{
		width: 100%;
		padding: 0;
		padding-bottom: 0.25em;
	}
}

@media screen and (max-width: 768px) {
	#setInfo .set-list {
		display: block;
		margin: auto;
	}

	.set-img{
		text-align: center;
	}
	
	#setInfo ul {
		width: fit-content;
		margin: 1em auto;
	}
}