@charset "utf-8";
.lite{
	--comicframe:hsla(0,0%,100%,1);
}
.dark{
	--comicframe:hsla(205,98%,3%,1);
}

@supports (color:oklch(0% 0 0 / 100%)){
	.lite{
		--lch-comicframe:oklch(100% 0 0 / 100%);
	}
	.dark{
		--lch-comicframe:oklch(13.03% 0.0251 228.9 / 100%);
	}
}
.comic{
	border-radius:.2em;
	display:flex;
	flex-flow:wrap;
	justify-content:flex-start;
	margin:1em 0 2em;
	text-align:center;
}
@supports(display:flex){
	.comic{
		justify-content:center;
	}
}

.comic-pan{
	background:var(--lch-bg-panel, var(--bg-panel));
	border:.25em solid var(--lch-comicframe, var(--comicframe));
	display:inline-block;
	flex:1 1 25.5em;
	margin:.5em 0;
	max-width:25.5em;
	padding:0 0 1em;
	text-align:left;
	vertical-align:top;
}
.pan-wide.comic-pan{
	flex:2 1 51em;
	max-width:51em;
	width:100%;
}

.comic-pan p{
	font-size:1.25em;
	line-height:1.8;
	padding:0 1em;
	text-indent:1em;
}
.comic-pan_crop{
	-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;
	background-color:var(--lch-bg-bgimg, var(--bg-bgimg));
	display:block;
	height:0;
	overflow:hidden;
	padding-bottom:100%;
	position:relative;
	z-index:0;
}
.pan-wide .comic-pan_crop{
	padding-bottom:49.5%;
	padding-bottom:calc(50% - .25em);
}
.comic-pan_txt {
	padding-top:1em;
}

.comic-pan-half .comic-pan_crop:first-of-type{
	border-right:.25em solid var(--lch-comicframe, var(--comicframe));
}
.comic-pan-half .comic-pan_crop:last-of-type{
	border-left:.25em solid var(--lch-comicframe, var(--comicframe));
}
.comic-pan-half .comic-pan_crop{
	display:inline-block;
	width:50%;
}
.comic-pan img{
	display:block;
	height:auto;
	position:relative;
	width:100%;
	z-index:1;
}

.yani .comic-pan_crop img{
	transform-style:preserve-3d;
	transition:all 3s ease;
	will-change:transform;
}

.yani .comic-pan_crop:hover img{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transform:perspective(50em) scale3d(1.5,1.5,1.5);
}

.navbox--comic{
	background:var(--lch-bg, var(--bg));
	box-shadow:0 0 1.5em 0 var(--lch-shad-lt1, var(--shad-lt1));
	padding:1em;
}


.comic em:lang(en) {font-style:italic;}
.comic em:lang(ja) {font-style:normal;}
@supports (-ms-hyphens:auto) or (-webkit-hyphens:auto) or (hyphens:auto){p.q-block, .comic-pan p.q-block{
		-ms-hyphens:auto;
		-webkit-hyphens:auto;
		hyphens:auto;
		text-align:justify;
	}
}



@supports(object-fit:cover) and (position:fixed){
	.dark.comiclayoutA body .bg_main img{
		filter:grayscale(0%);
		opacity:1;
	}

	.comiclayoutA .comic{
		background:var(--lch-bg-panel, var(--bg-panel));
		border-radius:0 .5em .5em 0;
		box-shadow:var(--lch-shad-lt1, var(--shad-lt1)) .125em .25em .5em;
		display:block;
		font-size:clamp(1em,1vw,1.4em);
		margin:1em auto 6em;
		max-width:100%;
		padding:1em 2% 2%;
		width:70em;
	}
	@media screen{
		.comiclayoutA.yani .comic{
			width:50em;
		}
	}
	.comiclayoutA.nani .comic{
		width:50em;
	}
	@media screen {
		.comiclayoutA:not(.nani) .header{
			margin-bottom:60vh;
			margin-bottom:calc(100vh - 14.75em);
		}
		@media (min-width:20em){
			.comiclayoutA:not(.nani) .header{
				margin-bottom:calc(100vh - 10.5em);
			}
		}
		.comiclayoutA:not(.nani) .comic{
			margin-left:0;
			margin-right:0;
		}
	}
	.comiclayoutA .comic::before{
		color:var(--lch-acc-hi, var(--acc-hi));
		content:":: ※ ::";
		display:block;
		font-size:2em;
		padding-bottom:.5em;
		text-align:center;
	}
	.comiclayoutA .comic-pan{
		border:0;
		max-width:none;
		width:100%;
	}
	.comiclayoutA .comic-pan_crop{
		border-radius:1em;
	}
	.comiclayoutA:not(.nani) .comic-pan_imgwrap{
		margin:0 auto;
		max-width:16.66667em;;
		width:80%;
	}
	.comiclayoutA .pan-wide .comic-pan_imgwrap{
		max-width:none;
		width:100%;
	}
	.comiclayoutA .comic-pan_txt{
		padding:2em 0;
	}
	@media (min-width:40em){
			.comiclayoutA:not(.nani) .comic{
				width:75%;
			}
			.comiclayoutA .pan-wide .comic-pan_imgwrap{
				padding:0 1.25em;
			}
	}
	@media (min-width:50em){
		@media screen {
			.comiclayoutA:not(.nani) .header{
				margin-bottom:60vh;margin-bottom:calc(100vh - 6em);
			}
		}
		.comiclayoutA:not(.nani) .comic{
			width:66.667%;
		}
	}
	@media (min-width:80em){
		.comiclayoutA:not(.nani) .comic{
			width:50%;
		}
	}
}

@media screen {
	.comiclayoutB:not(.nani) .comic{
		margin-bottom:10em;margin-bottom:80vh;
	}
}

.comiclayoutC .bg,.comiclayoutC .bg_main{
	height:0;
	width:0;
	display:none;
}