@charset "UTF-8";
/*
* style_index.css
* description : THE GRAND SLAM 2021 [ INDEX ]
*
* Created  2021/11/4.
* Last Update 2021/11/4.
*/




/* INDEX */
/*[[[ Contents ]]]*/

/*----- [[[ for Index ]]] -----*/
/*[[[ Event Guide ]]]*/









/*
[[[ PR Area ]]]
*/

/*----- [[[ SP Banner ]]] -----*/

/*[[[ List ]]]*/
#rc21.top.p-index .sp-banner-list {
 margin: 0;
 padding: 0;
}










/*
[[[ Contents ]]]
*/

.main-visual {
    background: url(/shared/images/bg_main_2024_sp.png) center center / cover rgb(0, 0, 0);
    padding-top: 177.703px;
    min-height: 700px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 768px) {
	.main-visual {
		background: url(/shared/images/bg_main_2024.png) center center / cover rgb(0, 0, 0);
    	height: 120vh;
	}
}

/*----- [[[ for Index ]]] -----*/

/*[[[[[ News ]]]]]*/

/*[[[ List ]]]*/
@media screen and (min-width: 768px) {
 #rc21.top.p-index .news-info-box {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
 }
 #rc21.top.p-index .news-info-box li {
  margin: 0 20px 20px 0;
  width: calc(50% - 20px / 2);
  flex-grow: 0;
  flex-shrink: 1;
 }
 #rc21.top.p-index .news-info-box li:nth-child(2n) {
  margin-right: 0;
 }

}


@media screen and (max-width: 767px) {
 #rc21.top.p-index .news-info-box li:not(:last-child) {
  margin-bottom: 16px;
 }

}

/*[[[ News Box ]]]*/
#rc21.top.p-index .news-info-box-each .news-info-box-each-frame {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
}
#rc21.top.p-index .news-info-box-each .news-info-box-each-frame dt,
#rc21.top.p-index .news-info-box-each .news-info-box-each-frame dd {
 margin: 0;
 padding: 0;
}

/*[[[ On Image ]]]*/
#rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dt {
 flex-grow: 0;
 flex-shrink: 1;
}
#rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dd {
 flex-grow: 0;
 flex-shrink: 0;
}

@media screen and (min-width: 992px) {
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dt {
  width: calc(100% - 175px);
  flex-basis: calc(100% - 175px);
 }
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dd {
  width: 175px;
  flex-basis: 175px;
 }

}


@media screen and (max-width: 991px) and (min-width: 768px) {
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dt {
  width: calc(100% - 120px);
  flex-basis: calc(100% - 120px);
 }
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dd {
  width: 120px;
  flex-basis: 120px;
 }

}


@media screen and (max-width: 767px) {
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dt {
  width: calc(100% - 112px);
  flex-basis: calc(100% - 112px);
 }
 #rc21.top.p-index .news-info-box-each.on-img .news-info-box-each-frame dd {
  width: 112px;
  flex-basis: 112px;
 }

}

/*[[[ Off Image ]]]*/
#rc21.top.p-index .news-info-box-each.off-img .news-info-box-each-frame > div {
 width: 100%;
 flex-basis: 100%;
 flex-grow: 0;
 flex-shrink: 1;
}

/*[[[ Thumbnail Customize ]]]*/
#rc21.top.p-index .ns-thumb {
	width: auto;
}

/*[ News Detail Title ]*/
#rc21.top.p-index .date {
	display: inline-block;
}




/*[[[ News Banners List ]]]*/
@media screen and (min-width: 768px) {
 #rc21.top.p-index .bns-list-box {
  max-width: 720px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
 }
 #rc21.top.p-index .bns-list-box > li {
  margin: 0 30px 0 0;
  width: auto;
  text-align: center;
  /* width: calc(50% - 30px / 2);
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1; */
 }
 #rc21.top.p-index .bns-list-box > li:last-child {
  margin-right: 0;
 }

}

@media screen and (max-width: 767px) {
 #rc21.top.p-index .bns-list-box [class*=bns-] ol {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
 }
 #rc21.top.p-index .bns-list-box [class*=bns-] ol li {
  text-align: center;
 }

}










/*[[[[[ Tickets ]]]]]*/

/*[[[ Price ]]]*/

@media screen and (min-width: 992px) {
 #rc21.top.p-index .ticket-price-box {
  width: 100%;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
 }
 #rc21.top.p-index .ticket-price-box dt,
 #rc21.top.p-index .ticket-price-box dd {
  margin: 0;
  padding: 0;
 }
 #rc21.top.p-index .ticket-price-box dt {
  width: 200px;
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
 }
 #rc21.top.p-index .ticket-price-box dd {
  width: calc(100% - 200px);
  flex-basis: calc(100% - 200px);
  flex-grow: 0;
  flex-shrink: 1;
 }

}

@media screen and (min-width: 1200px) {
 #rc21.top.p-index .ticket-price-box {
  width: 83.33333%;
 }

}

@media screen and (min-width: 768px) {
 #rc21.top.p-index .ticket-price-box .ticket-price-box-each li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
 }
 

}

#rc21.top.p-index .ticket-price-box .ticket-price-box-each li:first-child {
 border-bottom: 1px solid #8C720D;
}



/*[[[ Each Day ]]]*/
#rc21.top.p-index .ticket-eachday-box {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
}

#rc21.top.p-index .ticket-eachday-box .ticket-eachday-frame {
 border: 5px solid #8C720D;
 position: relative;
}

@media screen and (min-width: 992px) {
 #rc21.top.p-index .ticket-eachday-box .ticket-eachday-frame {
  display: inline-block;
 }

}

@media screen and (max-width: 991px) {
 #rc21.top.p-index .ticket-eachday-box {
  width: 100%;
 }
 #rc21.top.p-index .ticket-eachday-box > li {
  margin: 0 20px 20px 0;
  width: calc(50% - 20px / 2);
  flex-basis: calc(50% - 20px / 2);
 }
 #rc21.top.p-index .ticket-eachday-box > li:nth-child(2n) {
  margin-right: 0;
 }

}

/*[ Sold Out ]*/
#rc21.top.p-index .ticket-eachday-box .ticket-eachday-frame.ts-soldout::after {
 content: "SOLD OUT";
 position: absolute;
 display: block;
 top: -1rem;
 left: -1rem;
 transform: rotate(-5deg);
 font-size: 0.9375rem;
 line-height: 1;
 font-weight: bold;
 color: #ffffff;
 background: #cc0000;
 padding: .3rem .8rem;
 z-index: 20;

}











/*[[[[[ Event Guide ]]]]]*/

/*(Detail)*/
#rc21.top.p-index .detail-event {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap:wrap;
	flex-wrap: wrap;
	box-sizing: border-box;
}

/*[Heading]*/
#rc21.top.p-index .detail-event dt {
	margin:1em 0 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 25%;
	flex-basis: 25%;
	flex-shrink: 1;
}
#rc21.top.p-index .detail-event dt > div {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	border:1px solid #8C720D;
}
/*[Text]*/
#rc21.top.p-index .detail-event dd {
	margin: 1em 0 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 75%;
	flex-basis: 75%;
	flex-shrink: 1;
}

/*[Artist Name]*/
#rc21.top.p-index .detail-event dd .an {
	display:inline-block;
}
#rc21.top.p-index .detail-event dd .an:not(:last-child):after{
	content:"／";
}
#rc21.top.p-index .detail-event dd .an-end {
	display:block;
}


@media screen and (min-width:992px) {
	#rc21.top.p-index .detail-event dt {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#rc21.top.p-index .detail-event dt:first-child,
	#rc21.top.p-index .detail-event dt:first-child + dd {
		margin: 0;
	}

} /* @media screen and (min-width:992px) end */



@media screen and (max-width:991px) {
	#rc21.top.p-index .detail-event {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	/*[Heading]*/
	#rc21.top.p-index .detail-event dt {
		margin:0;
		padding:1rem 0 0 0;
		float:none;
		width:auto;
		border:none;
		border-bottom: 1px dotted #D0C598;
		-webkit-flex:0 0 auto;
		flex:0 0 auto;
	}
	#rc21.top.p-index .detail-event dt > div {
		display: inline-block;
		width: auto;
		height: auto;
		justify-content: inherit;
		align-items: inherit;
		border:none;
		padding: 0;
	}
	#rc21.top.p-index .detail-event dt span {
		padding-left:.3em;
	}
	#rc21.top.p-index .detail-event dt::before {
		content: "";
		display: inline-block;
		width: 1em;
		height: 1em;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23D0C598' d='M240 0L32 288h160l-48 224 208-288H192L240 0z'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		margin: 0 0.3em;
		position: relative;
		top: 0.1em;
		transform: rotate(15deg);
	}

	/*[Text]*/
	#rc21.top.p-index .detail-event dd {
		margin: 0;
		padding: 0;
		width: auto;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	/*[Text]*/
#rc21.top.p-index .detail-event dd > div {
	padding: 0;
}

	#rc21.top.p-index .detail-event dt:first-child {
		padding-top: 0;
	}

} /* @media screen and (max-width:991px) end */