/* ---- スマートフォン風スタイル --- */
.is-style-smartphone {
	--frame-color: #ced1d5;
	--frame-width: 6px;
	--smartphone-width: 0;
	--border-rd: 0;
	--camera-width: 0;
	--camera-height: 0;

	border: solid calc(var(--smartphone-width, 300px) * .015) var(--frame-color, #ccc);
	width: fit-content;
	border-radius: calc(var(--border-rd, 12px) * .8);
	background: var(--frame-color);
	position: relative;
	box-shadow: 0 12px 24px -2px rgb(0 0 0 / 25%);
	margin: 0 auto 3em;
}

.is-style-smartphone img,
.is-style-smartphone video {
	box-shadow: 0 2px 24px -2px rgb(0 0 0 / 25%);
	clip-path: inset(2px round calc(var(--border-rd, 12px) * .7));
}

.is-style-smartphone.-s-14pro {
	border-radius: var(--border-rd);
}

.is-style-smartphone.-s-14pro img,
.is-style-smartphone.-s-14pro video {
	clip-path: inset(2px round calc(var(--border-rd) * .85));
}

.is-style-smartphone .smartphone-notch {
	width: var(--camera-width);
	height: var(--camera-height);
	position: absolute;
	top: 1.5px;
	left: calc(var(--smartphone-width) / 2);
	transform: translate(-50%, 0);
	background: var(--frame-color);
	mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M85.26,20c4.02,0,10.58-3.46,10.58-12.76v-1.16C95.69,2,97.16,0,100,0H0c2.84,0,4.31,2,4.16,6.08v1.16c0,9.3,6.56,12.76,10.58,12.76H85.26Z"/></svg>');
	mask-repeat: no-repeat;
	-webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M85.26,20c4.02,0,10.58-3.46,10.58-12.76v-1.16C95.69,2,97.16,0,100,0H0c2.84,0,4.31,2,4.16,6.08v1.16c0,9.3,6.56,12.76,10.58,12.76H85.26Z"/></svg>');
	-webkit-mask-repeat: no-repeat;
}

.is-style-smartphone.-s-14pro .smartphone-notch {
	width: calc(var(--camera-width) * .8);
	top: calc(var(--border-rd) * .5);
	transform: translate(-50%, -50%);
	border-radius: calc(var(--camera-width) / 3.4);
	mask-image: none;
	-webkit-mask-image: none;
}

.is-style-smartphone.-no-camera .smartphone-notch {
	display: none;
}

.is-style-smartphone figure {
	margin-bottom: 0 !important;
}

.is-style-smartphone video {
	margin-bottom: calc(var(--smartphone-width, 300px) * -0.014);
}

@media(max-width: 599px) {
	.is-style-smartphone video {
		margin-bottom: calc(var(--smartphone-width, 300px) * -0.035);
	}
}

.-c-black {
	--frame-color: #3c3c3c;
}
.-c-gray {
	--frame-color: #ced1d5;
}

/* ---- END スマートフォン風スタイル --- */