/* ------------------ common ------------------ */
.btn-ticket-buy-box {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-bottom: 20px;
}
.bnr-ticket-buy {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 30px;
	background: #e4572e;
	color: #fefefe;
	padding: 35px 50px;
	padding-right: 100px;
	border-radius: 15px;
	transition: all ease 0.33s;
}
.bnr-ticket-buy > figure {
	width: 67px;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	aspect-ratio: 67 / 80;
	flex-shrink: 0;
}

.bnr-ticket-buy .icon-chevron {
	display: flex;
	width: 16px;
	height: auto;
	aspect-ratio: 16 / 28;
	background-image: url("../images/common/icon-chevron-right-large-wh.svg");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 50px;
	transform: translateX(0);
	opacity: 1;
	transition: transform 0.5s ease, opacity 0.5s ease;
	flex-shrink: 0;
}
.bnr-ticket-buy:hover .icon-chevron {
	animation: chevron-slide-hover 1.5s infinite;
}

.bnr-ticket-buy:not(:hover) .icon-chevron {
	animation: none;
	transform: translateX(0);
	opacity: 1;
}

.bnr-ticket-buy > div {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 15px;
}
.bnr-ticket-buy > div > p {
	width: 100%;
	font-size: 30px;
}
.bnr-ticket-buy > div > span {
	width: 100%;
	font-size: 18px;
}
.lower-sec {
	display: flex;
	flex-flow: column;
	gap: 80px;
}

@media screen and (max-width: 1200px) {
	.bnr-ticket-buy {
		gap: 15px;
		padding: 15px;
		padding-right: 20px;
	}
	.bnr-ticket-buy > figure {
		width: 30px;
	}

	.bnr-ticket-buy .icon-chevron {
		width: 8px;
		right: 12px;
	}

	.bnr-ticket-buy > div {
		gap: 10px;
	}
	.bnr-ticket-buy > div > p {
		font-size: 14px;
		line-height: 1.3;
		letter-spacing: 0;
	}
	.bnr-ticket-buy > div > span {
		font-size: 12px;
		line-height: 1.3;
		padding-right: 15px;
	}
}

.ticket-note {
	width: 100%;
	font-size: 14px !important;
	line-height: 1.5;
	font-family: "fot-tsukuardgothic-std", sans-serif;
}
.ticket-note a {
	text-decoration: underline;
}

.my-seat {
	line-height: 1.5;
	font-family: "fot-tsukuardgothic-std", sans-serif;
}

.my-seat span {
	display: block;
}

a.my-seat {
	text-decoration: underline;
}

.ticket-grid {
	width: 100%;
	display: grid;
	gap: 20px;
}
.ticket-grid.ticket-grid-col-1 {
	grid-template-columns: repeat(1, 1fr);
}
.ticket-grid.ticket-grid-col-2 {
	grid-template-columns: repeat(2, 1fr);
}
.ticket-grid.ticket-grid-col-3 {
	grid-template-columns: repeat(3, 1fr);
}

.ticket-grid .card-grid-item > h5 {
	padding: 17px 20px;
}
.ticket-grid .card-grid-item > h5 > span {
	font-size: 14px;
}

.ticket-grid .card-grid-item > div {
	width: 100%;
	display: flex;
	padding: 20px;
	align-items: flex-start;
}
.ticket-grid .card-grid-item > div.ticket-grid-cont {
	flex-flow: column;
	gap: 15px;
}

.ticket-grid .card-grid-item > div.sat-list {
	flex-flow: column;
	gap: 20px;
}

.ticket-grid .card-grid-item > div > div {
	width: 100%;
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	gap: 13px;
}
.ticket-grid .card-grid-item > div > div.ticket-grid-pl {
	padding-left: 20px;
}
.ticket-grid .card-grid-item > div > div.ticket-grid-pl > div {
	width: 100%;
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	gap: 10px;
}
.ticket-grid .card-grid-item > div > div.ticket-grid-pl > div > span {
	padding-left: 10px;
	font-size: 14px;
}
.ticket-grid .card-grid-item strong {
	color: #e4572e;
}

.ticket-grid .card-grid-item > div > div.sat-type {
	gap: 10px;
}
.ticket-grid .card-grid-item > div > div.sat-contact {
	gap: 15px;
	flex-flow: row;
	align-items: baseline;
}
.ticket-grid .card-grid-item > div > div.sat-type > span {
	width: 116px;
	height: auto;
	border: 1px solid;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 8px;
	letter-spacing: 0;
	text-align: center;
	flex-shrink: 0;
	border-radius: 5px;
}
.ticket-grid .card-grid-item > div > div.sat-contact > span {
	width: 118px;
	height: auto;
	background: #3a4652;
	border-radius: 5px;
	color: #fefefe;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 10px;
	text-align: center;
	overflow: hidden;
	flex-shrink: 0;
	font-size: 14px;
	letter-spacing: 0;
}

.ticket-grid .card-grid-item > div > div > p {
	width: 100%;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
}
.ticket-grid .card-grid-item > div > div.sat-type > p {
	font-size: 18px;
	line-height: 1.8;
}
.ticket-grid .card-grid-item > div > div.sat-info > p {
	font-size: 14px;
}
.ticket-grid .card-grid-item > div > div > p > span {
	font-size: 14px;
	letter-spacing: -0.02em;
}

@media screen and (max-width: 1600px) {
	.ticket-grid.ticket-grid-col-3 {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media screen and (max-width: 1400px) {
	.ticket-grid.ticket-grid-col-2 {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media screen and (max-width: 999px) {
	.ticket-note {
		font-size: 12px;
	}

	.ticket-grid .card-grid-item > h5 {
		padding: 15px;
		font-size: 16px;
		line-height: 1.3;
	}

	.ticket-grid .card-grid-item > div {
		gap: 10px;
		flex-flow: column;
		padding: 15px;
	}
	.ticket-grid .card-grid-item > div.sat-list {
		gap: 15px;
	}

	.ticket-grid .card-grid-item > div > div {
		gap: 10px;
	}
	.ticket-grid .card-grid-item > div > div.sat-contact {
		gap: 10px;
		flex-flow: column;
		align-items: flex-start;
	}
	.ticket-grid .card-grid-item > div > div.sat-contact > span {
		font-size: 12px;
		padding: 5px 10px;
	}

	.ticket-grid .card-grid-item > div > div > p {
		font-size: 14px;
	}
	.ticket-grid .card-grid-item > div > div.sat-type > p {
		font-size: 16px;
		line-height: 1.6;
	}
	.ticket-grid .card-grid-item > div > div.sat-info > p {
		font-size: 14px;
	}
	.ticket-grid .card-grid-item > div > div > p > span {
		font-size: 14px;
		letter-spacing: -0.02em;
	}
}

.sat-info > ul {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 10px;
	font-size: 14px;
}
.sat-info > ul > li {
	width: 100%;
	position: relative;
	padding-left: 23px;
	line-height: 1.5;
}
.sat-info > ul > li::before {
	content: "";
	position: absolute;
	width: 8px;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #3a4652;
	border-radius: 999px;
	left: 5px;
	top: 7.5px;
}

@media screen and (max-width: 999px) {
	.sat-info > ul {
		font-size: 12px;
	}
	.sat-info > ul > li::before {
		width: 6px;
	}
}

.sat-contact > div {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 10px;
}
.sat-contact > div > p {
	width: 100%;
	font-size: 14px;
}
.sat-contact > div > p > span {
	font-size: 12px;
}
.sat-contact > div > span {
	width: 100%;
	font-size: 12px;
}

@media screen and (max-width: 999px) {
	.sat-contact > div > p {
		font-size: 12px;
	}
}

.badge-list {
	width: 100%;
	display: flex;
	align-items: flex-start;
	flex-flow: column;
	gap: 10px;
}
.badge-list-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
}
.badge-list-item > h4 {
	width: 180px;
	height: auto;
	background: #3a4652;
	border-radius: 5px;
	color: #fefefe;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
	text-align: center;
	overflow: hidden;
	flex-shrink: 0;
	font-size: 16px;
}
.badge-list.badge-small .badge-list-item > h4 {
	width: 100px;
}
.badge-list-item > div {
	width: 100%;
	display: flex;
	gap: 20px;
	align-items: center;
}
.badge-list-item > div > p {
	font-size: 16px;
	padding-left: 15px;
	position: relative;
	line-height: 1.5;
}
.badge-list-item > div > p:not(:first-of-type)::after {
	content: "";
	width: 1px;
	height: 30px;
	background: #3a4652;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	flex-shrink: 0;
}
.badge-list-item > div > p > span {
	font-size: 14px;
}

@media screen and (max-width: 1200px) {
	.badge-list {
		gap: 30px;
	}
	.badge-list-item {
		flex-flow: column;
		align-items: flex-start;
		gap: 10px;
	}
	.badge-list-item > div {
		flex-flow: column;
		gap: 10px;
		align-items: flex-start;
	}
	.badge-list-item > div > p {
		font-size: 14px;
		padding-left: 0;
		line-height: 1.3;
	}
	.badge-list-item > div > p:not(:first-of-type)::after {
		content: none;
	}
	.badge-list-item > div > p > span {
		font-size: 12px;
	}
}
@media screen and (max-width: 999px) {
	.badge-list {
		gap: 15px;
	}
	.badge-list-item > h4 {
		width: 160px;
		padding: 7px 10px;
		font-size: 14px;
	}
	.badge-list.badge-small .badge-list-item > h4 {
		width: 85px;
	}
}

.tel-large {
	font-size: 24px;
}

/* ------------------ Price ------------------ */
.sec-ticket-price .lower-h2-box {
	align-items: baseline;
	gap: 20px;
}
.ticket-price-tbl-area {
	width: 100%;
	position: relative;
}
.ticket-price-tbl-wrapper {
	overflow-x: scroll;
	width: 100%;
	position: relative;
}
.ticket-price-tbl-wrapper > p {
	margin-bottom: 20px;
}
.ticket-price-tbl {
	border-collapse: collapse;
	font-weight: bold;
	line-height: 1.2;
	width: 100%;
	font-family: "fot-tsukuardgothic-std", sans-serif;
}
.ticket-price-tbl th {
	background: #3a4652;
	border: 1px solid #ccc;
	color: #fefefe;
	text-align: center;
	font-size: 16px;
	min-height: 80px;
	padding: 30px 10px;
	min-width: 80px;
	line-height: 1.2;
}
.ticket-price-tbl td {
	background: #fefefe;
	border: 1px solid #ccc;
	font-size: 16px;
	min-height: 80px;
	padding: 20px 10px;
	text-align: center;
}
.ticket-price-tbl tbody > tr > td:nth-of-type(1) {
	background: #f5f5f2;
	text-align: left;
}
.ticket-price-tbl th span {
	font-size: 14px;
}
.ticket-price-tbl td span {
	font-size: 14px;
}
#release .ticket-price-tbl.release {
	line-height: 1.5;
}
#release .ticket-price-tbl.release td {
	padding: 20px;
}
#release .ticket-price-tbl.release div {
	padding-left: 20px;
	line-height: 1.5;
}
#release .ticket-price-tbl.release div span {
	padding-left: 10px;
	font-size: 14px;
}
.is-soldout {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 5px;
	align-items: center;
}
.is-soldout > p {
	width: 100%;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.is-soldout > span {
	width: 100%;
	color: #e4572e;
}

@media screen and (max-width: 1400px) {
	.sec-ticket-price .lower-h2-box {
		align-items: flex-start;
		flex-flow: column;
		gap: 8px;
	}
	.ticket-price-tbl th {
		font-size: 14px;
		padding: 10px;
	}
	.ticket-price-tbl td {
		font-size: 13px;
		padding: 10px;
	}
	.ticket-price-tbl tbody > tr > td:nth-of-type(1) {
		background: #f5f5f2;
		text-align: left;
	}
	.ticket-price-tbl th span {
		font-size: 13px;
	}
	.ticket-price-tbl td span {
		font-size: 11px;
	}
}
@media screen and (max-width: 999px) {
	.ticket-price-tbl-wrapper {
		overflow-x: auto;
	}
	.ticket-price-tbl {
		width: max-content;
	}
	.ticket-price-tbl.release {
		width: 100%;
	}
	#release .ticket-price-tbl.release tr {
		display: flex;
		flex-flow: column;
	}
	#release .ticket-price-tbl.release tr th {
		min-height: auto;
	}
	#release .ticket-price-tbl.release tr th br {
		display: none;
	}
}

/* ------------------ Release ------------------ */

.release-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 54px;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: 20px;
}
.release-list-group {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 30px;
	align-items: flex-start;
}
/* ------------------ Service ------------------ */
.service-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 80px;
	margin-top: 20px;
}
.service-list-group {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 30px;
}
.service-list-group > p {
	width: 100%;
	font-size: 16px;
	line-height: 1.8;
}

@media screen and (max-width: 999px) {
	.service-area {
		gap: 30px;
		margin-top: 0px;
	}
	.service-list-group {
		gap: 20px;
	}
	.service-list-group > p {
		font-size: 14px;
		line-height: 1.6;
	}
}

.set-ticket-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	gap: 30px;
}
.set-ticket-area .ticket-price-tbl tbody > tr > td {
	padding: 25px 10px;
	text-align: center;
	line-height: 1.5;
}

@media screen and (max-width: 999px) {
	.set-ticket-area .lower-h3-box {
		align-items: flex-start;
		flex-flow: column;
		gap: 8px;
	}
}