@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');


/* ============================================================
 * viewer
 * ============================================================ */

.viewer {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;

	padding: 36px 88px 48px;

	box-sizing: border-box;

	overflow: hidden;

	background: #000;

	touch-action: none;
	overscroll-behavior: none;

	user-select: none;
	-webkit-user-select: none;
}


/* ============================================================
 * viewer image
 * ============================================================ */

.page-image,
#pageImage,
#pageImage-next {
	display: block;

	width: auto;
	height: auto;

	max-width: min(100%, 720px);
	max-height: calc(100vh - 84px);
	max-height: calc(100dvh - 84px);

	object-fit: contain;

	user-select: none;
	-webkit-user-select: none;

	-webkit-user-drag: none;
	-webkit-touch-callout: none;

	transform: translate3d(0, 0, 0);

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#pageImage {
	position: relative;

	z-index: 1;

	will-change: transform, opacity;
}

#pageImage-next {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 2;

	margin: 0;

	pointer-events: none;

	will-change: transform, opacity;
}


/* ============================================================
 * loading
 * ============================================================ */

.page-image.is-loading,
#pageImage.is-loading {
	opacity: 0.82;
}


/* ============================================================
 * index link
 * ============================================================ */

.back-link {
	position: fixed;

	top: 42px;
	left: 40px;

	z-index: 10;

	color: rgba(255, 255, 255, 0.58);

	font-family: "Cutive Mono", monospace;
	font-size: 14px;

	letter-spacing: 0.04em;

	text-decoration: none;

	transition: color 0.2s ease;
}

.back-link:hover {
	color: rgba(255, 255, 255, 0.9);
}


/* ============================================================
 * page count
 * ============================================================ */

.page-count {
	position: fixed;

	top: 42px;
	right: 40px;

	z-index: 10;

	color: rgba(255, 255, 255, 0.7);

	font-family: "Cutive Mono", monospace;
	font-size: 15px;

	letter-spacing: 0.06em;
}


/* ============================================================
 * fullscreen button
 * ============================================================ */

.fullscreen-button {
	position: fixed;

	top: 30px;
	right: 110px;

	z-index: 20;

	display: flex;
	align-items: center;

	gap: 10px;

	height: 42px;

	padding: 0 10px;

	border: 0;

	background: rgba(0, 0, 0, 0.34);
	color: rgba(255, 255, 255, 0.72);

	font-family: "Cutive Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.12em;

	cursor: pointer;
	opacity: 0.72;

	transition:
		opacity 0.25s ease,
		background 0.25s ease,
		color 0.25s ease;
}

.fullscreen-button:hover {
	opacity: 1;

	color: #fff;
}

.fullscreen-label {
	display: block;

	white-space: nowrap;
}

.fullscreen-icon {
	position: relative;

	display: block;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;
}

.fullscreen-icon::before {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(#fff, #fff) left top / 7px 1px no-repeat,
		linear-gradient(#fff, #fff) left top / 1px 7px no-repeat,
		linear-gradient(#fff, #fff) right top / 7px 1px no-repeat,
		linear-gradient(#fff, #fff) right top / 1px 7px no-repeat,
		linear-gradient(#fff, #fff) left bottom / 7px 1px no-repeat,
		linear-gradient(#fff, #fff) left bottom / 1px 7px no-repeat,
		linear-gradient(#fff, #fff) right bottom / 7px 1px no-repeat,
		linear-gradient(#fff, #fff) right bottom / 1px 7px no-repeat;
}

.fullscreen-button.is-active {
	opacity: 0.58;
}

.fullscreen-button.is-active:hover {
	opacity: 1;
}


/* ============================================================
 * fullscreen guide
 * ============================================================ */

.fullscreen-guide {
	position: fixed;

	top: 84px;
	right: 108px;

	z-index: 30;

	padding: 14px 18px 15px;

	background: rgba(15, 15, 15, 0.94);

	border: 1px solid rgba(255, 255, 255, 0.24);

	color: #fff;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Helvetica Neue",
		"Yu Gothic",
		"YuGothic",
		"Meiryo",
		sans-serif;

	pointer-events: none;

	opacity: 0;
	visibility: hidden;

	transform: translateY(-5px);

	transition:
		opacity 0.5s ease,
		transform 0.5s ease,
		visibility 0.5s ease;
}

.fullscreen-guide::before {
	content: "";

	position: absolute;

	top: -6px;
	right: 22px;

	width: 10px;
	height: 10px;

	background: rgba(15, 15, 15, 0.94);

	border-left: 1px solid rgba(255, 255, 255, 0.24);
	border-top: 1px solid rgba(255, 255, 255, 0.24);

	transform: rotate(45deg);
}

.fullscreen-guide.is-show {
	visibility: visible;

	opacity: 1;

	transform: translateY(0);
}

.fullscreen-guide-title {
	margin-bottom: 4px;

	color: rgba(255, 255, 255, 0.95);

	font-family: "Cutive Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.fullscreen-guide-text {
	color: rgba(255, 255, 255, 0.66);

	font-size: 12px;
	font-weight: 400;

	white-space: nowrap;
}


/* ============================================================
 * fullscreen
 * ============================================================ */

:fullscreen {
	background: #000;
}

:fullscreen .viewer {
	width: 100vw;

	height: 100vh;
	height: 100dvh;

	min-height: 100vh;
	min-height: 100dvh;

	padding-top: 0;
	padding-bottom: 0;
}

:fullscreen #pageImage,
:fullscreen #pageImage-next {
	max-width: 600px;
	max-height: 900px;
}


/* ============================================================
 * prev / next
 * ============================================================ */

.nav-btn {
	position: fixed;

	top: 50%;

	z-index: 10;

	width: 42px;
	height: 42px;

	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 0;

	background: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.72);

	font-family: "Shippori Mincho", serif;
	font-size: 20px;
	line-height: 1;

	cursor: pointer;

	transform: translateY(-50%);
}

.nav-btn.prev {
	left: 40px;
}

.nav-btn.next {
	right: 40px;
}

.nav-btn:hover {
	border-color: rgba(255, 255, 255, 0.55);

	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.nav-btn:disabled {
	opacity: 0.2;

	cursor: default;
}


/* ============================================================
 * tablet
 * ============================================================ */

@media (max-width: 1024px) {

	.viewer {
		padding: 36px 68px 48px;
	}

	.page-image,
	#pageImage,
	#pageImage-next {
		max-width: min(100%, 680px);
	}

	.nav-btn.prev {
		left: 28px;
	}

	.nav-btn.next {
		right: 28px;
	}

	.back-link {
		left: 28px;
	}

	.page-count {
		right: 28px;
	}

	.fullscreen-button {
		right: 92px;
	}

	.fullscreen-guide {
		right: 92px;
	}
}


/* ============================================================
 * hide fullscreen button on smartphone
 * ============================================================ */

@media (max-width: 767px) {

	.fullscreen-button,
	.fullscreen-guide {
		display: none !important;
	}
}


/* ============================================================
 * smartphone
 *
 * 漫画1ページ全体を必ず画面内に収める。
 * 縦スクロールはさせない。
 * ============================================================ */

@media (max-width: 768px) {

	html,
	body {
		width: 100%;
		height: 100%;

		margin: 0;
		padding: 0;

		overflow: hidden;

		background: #000;
	}

	body {
		position: fixed;

		inset: 0;

		width: 100%;
		height: 100%;
	}

	.viewer {
		position: fixed;

		inset: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 100vw;

		height: 100vh;
		height: 100dvh;

		min-height: 0;

		padding:
			calc(58px + env(safe-area-inset-top))
			0
			calc(24px + env(safe-area-inset-bottom));

		box-sizing: border-box;

		overflow: hidden;

		background: #000;

		touch-action: none;
		overscroll-behavior: none;
	}

	.page-image,
	#pageImage {
		position: relative;

		display: block;

		width: auto;
		height: auto;

		max-width: 100vw;

		max-height: calc(
			100vh -
			82px -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);

		max-height: calc(
			100dvh -
			82px -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);

		margin: auto;

		object-fit: contain;

		transform: translate3d(0, 0, 0);

		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		will-change: transform, opacity;

		user-select: none;
		-webkit-user-select: none;

		-webkit-user-drag: none;
		-webkit-touch-callout: none;
	}

	#pageImage-next {
		position: absolute;

		top: 50%;
		left: 50%;

		z-index: 2;

		display: block;

		width: auto;
		height: auto;

		max-width: 100vw;

		max-height: calc(
			100vh -
			82px -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);

		max-height: calc(
			100dvh -
			82px -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);

		margin: 0;

		object-fit: contain;

		pointer-events: none;

		will-change: transform, opacity;

		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	.back-link {
		position: fixed;

		top: calc(
			18px +
			env(safe-area-inset-top)
		);

		left: calc(
			22px +
			env(safe-area-inset-left)
		);

		z-index: 20;

		color: rgba(255, 255, 255, 0.48);

		font-family: "Cutive Mono", monospace;
		font-size: 13px;

		letter-spacing: 0.08em;

		text-decoration: none;
	}

	.page-count {
		position: fixed;

		top: calc(
			18px +
			env(safe-area-inset-top)
		);

		right: calc(
			22px +
			env(safe-area-inset-right)
		);

		z-index: 20;

		color: rgba(255, 255, 255, 0.62);

		font-family: "Cutive Mono", monospace;
		font-size: 13px;

		letter-spacing: 0.08em;
	}

	.nav-btn {
		display: none;
	}

	:fullscreen .viewer {
		position: fixed;

		inset: 0;

		width: 100vw;

		height: 100vh;
		height: 100dvh;

		min-height: 0;

		padding:
			env(safe-area-inset-top)
			0
			env(safe-area-inset-bottom);
	}

	:fullscreen #pageImage,
	:fullscreen #pageImage-next {
		max-width: 100vw;

		max-height: calc(
			100vh -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);

		max-height: calc(
			100dvh -
			env(safe-area-inset-top) -
			env(safe-area-inset-bottom)
		);
	}
}


/* ============================================================
 * very small smartphone
 * ============================================================ */

@media (max-width: 480px) {

	.page-image,
	#pageImage,
	#pageImage-next {
		max-width: 100vw;
	}

	.back-link {
		left: calc(
			18px +
			env(safe-area-inset-left)
		);
	}

	.page-count {
		right: calc(
			18px +
			env(safe-area-inset-right)
		);
	}
}