@media only screen and (orientation: portrait) and (min-width: 550px) {
	.widget.wrapper {
		padding-bottom: calc(50% * 9 / 16);
		width: 50%;
		display: inline-block;
	}

	.page.content {
		width: 100%;
		max-width: none;
		min-height: calc(100% - 26em);
	}

	.swiper-slide.video {
		width: calc(2 / 4 * 100%);
	}
}

@media only screen and (min-width: 900px) and (orientation: landscape) {
	/* 2sp fixed -> 56.25em (900px) */
	.swiper-slide.video {
		width: calc(2 / 4 * 100%);
	}

	.widget.wrapper {
		padding-bottom: calc(100% * 9 / 32);
		width: 50%;
		display: inline-block;
	}

	.page.content {
		width: 900px;
		max-width: none;
	}
}

@media only screen and (min-width: 1100px) {
	/*** 2sp fixed -> 1100 */
	.widget.wrapper {
		padding-bottom: calc(100% * (9 / 32));
		width: 50%;
		display: inline-block;
	}

	.page.content {
		width: 1100px;
		max-width: none;
	}

	.widget.wrapper {
		width: 50%;
		display: inline-block;
	}

	.swiper-container:hover .swiper-button-next:not(.swiper-button-disabled),
	.swiper-container:hover .swiper-button-prev:not(.swiper-button-disabled) {
		visibility: visible;
		opacity: 0.8;
	}
}

#responsiveComputedStyle {
	background: blue;
}

@media only screen and (orientation: portrait) and (min-width: 550px), only  screen and (min-width: 900px) and (orientation: landscape) {
	#responsiveComputedStyle {
		/* Marker for 2column display */
		background: green;
	}
	app-web .click {
		/* cursor: default; */
	}

	article.click h1 {
		cursor: pointer;
	}

	.page.content {
		box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.3);
	}

	.widget.wrapper.doubleWidth {
		width: 100%;
	}

	.widget.wrapper.doubleWidth.reducedHeight {
		width: 100%;
		padding-bottom: calc(100% * 3 / 16);
	}
	.widget.wrapper.doubleWidth.extraHeight {
		width: 100%;
		padding-bottom: calc(100% * 7 / 16);
	}
	.widget.wrapper.doubleWidth.doubleHeight {
		width: 100%;
		padding-bottom: calc(100% * 9 / 16);
	}
	.doubleWidth .swiper-slide.square {
		width: calc(9 / 32 * 100%);
	}

	.doubleWidth .swiper-slide {
		width: calc(2 / 4 * 100%);
	}

	app-web h1 {
		padding-left: 0.5em;
	}

	app-web h1 b {
		border-left-width: 0.125rem;
		padding-left: 0.7em;
		padding-right: 0.7em;
	}

	app-web h1.back b::before {
		margin-left: -0.2em;
	}

	app-home .widget.wrapper:nth-child(2) {
		border-top: 0;
	}

	html {
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	.widget.wrapper.visibleInOneColumn {
		display: none;
	}

	.widget.wrapper.visibleInTwoColumns {
		display: block;
	}
}

.widget.wrapper.doubleWidth.reducedHeightOneColumn {
	width: 100%;
	padding-bottom: calc(100% * 3 / 16);
}