@charset "utf-8";

/* ECOM-991 外部チケットサイト遷移モーダル */
/* Figma node-id=4041-2 デザイン準拠 */
/* PRD: PC 480x480 固定 / SP 画面幅-32px 可変 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

.ext-ticket-modal[hidden] {
	display: none;
}

.ext-ticket-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Noto Sans JP", sans-serif;
}

.ext-ticket-modal__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
}

.ext-ticket-modal__container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	width: 480px;
	max-width: calc(100vw - 32px);
}

.ext-ticket-modal__card {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	background: #fff;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ext-ticket-modal__title {
	margin: 0;
	font-weight: bold;
	font-size: 18px;
	color: #000;
	text-align: center;
	line-height: 1.4;
}

.ext-ticket-modal__description {
	margin: 0;
	font-weight: normal;
	font-size: 15px;
	color: #000;
	line-height: 1.5;
}

.ext-ticket-modal__cta-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.ext-ticket-modal__disclaimer {
	margin: 0;
	font-size: 12px;
	color: #6f6f6f;
	line-height: 1.4;
}

.ext-ticket-modal__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	background: #011b8f;
	border: none;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
}

.ext-ticket-modal__cta-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.ext-ticket-modal__cta-icon svg {
	width: 100%;
	height: 100%;
}

.ext-ticket-modal__cta-label {
	white-space: nowrap;
}

.ext-ticket-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 4px;
	background: rgba(0, 0, 0, 0.41);
	border: none;
	border-radius: 32px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ext-ticket-modal__close svg {
	width: 20px;
	height: 20px;
}

/* 広告枠: PC は container 480px に追従、SP は max-widthで画面幅-32px に追従 */
/* 配信される iframe (480x480 / 300x250 / fluid) を中央寄せでそのまま表示 */
.ext-ticket-modal__ad-slot {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* SP（768px未満）: container を画面幅-32pxに追従（PRD: SP 画面幅-32px 可変） */
/* SP のみ iframe / GAM container に width:100% を当てる: fluid配信(attr width=0)を画面-32pxに追従させるため必須 */
/* PC では当てない: PC NW 300x250 配信時に iframe が ad-slot 480幅に強制ストレッチされず、flex centerで中央寄せされるようにするため */
@media screen and (max-width: 767px) {
	.ext-ticket-modal__container {
		width: calc(100vw - 32px);
	}
	#div-gpt-ad-es-modal-ticket_300x300 {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.ext-ticket-modal__ad-slot iframe {
		width: 100%;
	}
}