@charset "UTF-8";

.case-preview {
	position: relative;
	width: 100%;
	aspect-ratio: 1048 / 772;
}

.case-preview::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/cases/template-bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 10;
}

/* PC画面の表示エリア */
.case-preview__desktop {
	position: absolute;
	top: 10.2%;
	left: 7.67%;
	width: 75.3%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* SP画面の表示エリア */
.case-preview__mobile {
	position: absolute;
	right: 7%;
	bottom: 9.5%;
	z-index: 2;
	width: 12.2%;
	aspect-ratio: 8 / 16;
	overflow: hidden;
}

/* iframeの表示枠 */
.case-preview__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* iframe自体は固定幅のまま、JSで縮小する */
.case-preview__iframe {
	display: block;
	max-width: none;
	border: 0;
	transform: scale(var(--case-preview-scale, 1));
	transform-origin: top left;
}

/* モバイル用のiframeは横スクロールを発生させない */
.case-preview__mobile .case-preview__iframe {
	width: 425px;
}

/* PC用のiframeは横幅1280px基準 */
.case-preview__desktop .case-preview__iframe {
	width: 1280px;
}

.case-preview__note {
	margin-top: 12px;
}

/*
 * スマホでは、旧サイトの挙動に近い形で
 * SPフレーム・PCフレームを上下に分けて表示する。
 */
@media (max-width: 767px) {
	.case-preview {
		display: grid;
		gap: 32px;
		aspect-ratio: auto;
		background: none;
	}

	.case-preview::after {
		content: none;
	}

	.case-preview__desktop,
	.case-preview__mobile {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.case-preview__desktop::after,
	.case-preview__mobile::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		pointer-events: none;
		z-index: 10;
	}

	.case-preview__desktop {
		aspect-ratio: 1381 / 1167;
	}

	.case-preview__desktop::after {
		background-image: url("../img/cases/template-bg-pc-sp.png");
	}

	.case-preview__mobile {
		justify-self: center;
		width: min(100%, 480px);
		aspect-ratio: 532 / 1070;
	}

	.case-preview__mobile::after {
		background-image: url("../img/cases/template-bg-sp.png");
	}

	.case-preview__desktop .case-preview__viewport {
		position: absolute;
		top: 5.75%;
		left: 4.8%;
		width: 90.85%;
		height: 67.7%;
	}

	.case-preview__mobile .case-preview__viewport {
		position: absolute;
		top: 6.5%;
		left: 6%;
		width: 89.05%;
		height: 88.7%;
	}
}