/** sKnow エフェクトブロック */
.sknow-effect {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
}
.sknow-effect--content {
	max-width: var(--sknow-content-size, 720px);
	margin-right: auto;
	margin-left: auto;
}
.sknow-effect--wide:not(.alignwide):not(.alignfull) {
	max-width: var(--sknow-site-max-width, 1100px);
	margin-right: auto;
	margin-left: auto;
}
.sknow-effect--screen:not(.alignfull),
.entry-content > .sknow-effect--screen:not(.alignfull) {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.entry-content > .sknow-effect--wide:not(.alignwide):not(.alignfull) {
	max-width: var(--sknow-site-max-width, 1100px);
}
body:not(.no-sidebar) .entry-content > .sknow-effect--wide,
body:not(.no-sidebar) .entry-content > .sknow-effect.alignwide {
	width: calc(100% + (2 * var(--sknow-content-pad, 0px)));
	max-width: calc(100% + (2 * var(--sknow-content-pad, 0px)));
	margin-left: calc(-1 * var(--sknow-content-pad, 0px));
	margin-right: calc(-1 * var(--sknow-content-pad, 0px));
}
.editor-styles-wrapper .sknow-effect--screen {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.editor-styles-wrapper .sknow-effect--wide {
	width: 100%;
	max-width: min(var(--sknow-site-max-width, 1250px), 100%);
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .sknow-effect.alignwide {
	max-width: var(--sknow-site-max-width, 1100px);
	width: auto;
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .sknow-effect.alignfull {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.sknow-effect__inner {
	width: 100%;
	max-width: var(--sknow-content-size, 720px);
	box-sizing: border-box;
	opacity: 0;
	transition:
		opacity var(--sknow-fx-duration, 700ms) ease var(--sknow-fx-delay, 0ms),
		transform var(--sknow-fx-duration, 700ms) ease var(--sknow-fx-delay, 0ms),
		filter var(--sknow-fx-duration, 700ms) ease var(--sknow-fx-delay, 0ms);
	will-change: opacity, transform;
}
.sknow-effect--fx-fade.sknow-effect--dir-up .sknow-effect__inner { transform: translateY(28px); }
.sknow-effect--fx-fade.sknow-effect--dir-left .sknow-effect__inner { transform: translateX(-28px); }
.sknow-effect--fx-fade.sknow-effect--dir-right .sknow-effect__inner { transform: translateX(28px); }
.sknow-effect--fx-slide.sknow-effect--dir-up .sknow-effect__inner { transform: translateY(64px); }
.sknow-effect--fx-slide.sknow-effect--dir-left .sknow-effect__inner { transform: translateX(-64px); }
.sknow-effect--fx-slide.sknow-effect--dir-right .sknow-effect__inner { transform: translateX(64px); }
.sknow-effect--fx-zoom .sknow-effect__inner { transform: scale(.92); }
.sknow-effect--fx-blur .sknow-effect__inner { filter: blur(12px); }
.sknow-effect.is-inview .sknow-effect__inner {
	opacity: 1;
	transform: none;
	filter: none;
}
@media (prefers-reduced-motion: reduce) {
	body:not(.sknow-fx-force-motion) .sknow-effect__inner { opacity: 1; transition: none; transform: none; filter: none; }
}
.editor-styles-wrapper .sknow-effect {
	outline: 1px dashed rgba(127, 127, 127, .55);
	outline-offset: -1px;
	position: relative;
	min-height: 56px;
}
.editor-styles-wrapper .sknow-effect::before {
	content: "sKnow エフェクト";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	font-size: 11px;
	line-height: 1;
	padding: 3px 8px;
	background: rgba(90, 90, 90, .9);
	color: #fff;
	border-bottom-right-radius: 4px;
	pointer-events: none;
}
.editor-styles-wrapper .sknow-effect__inner {
	opacity: 1;
	transform: none;
	filter: none;
}