@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..600&display=swap);
@font-face {
	font-family: "demon-panic";
	src: url("img/Demon Panic.woff2") format("woff2"),
	url("img/Demon Panic.woff") format("woff"),
	font-display: swap;
}
:root {
	--max-width: 1000px;
	--main-text-color: #404040;
	--dark-text-color: #ddd;
	--main-bg-color: #e6f6ff;
	--dark-bg-color: #2d3537;
	--main-font: "Noto Sans JP", sans-serif;
	--midashi-font: "demon-panic", sans-serif;
}
html, body {
min-height: 100%;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
	background-image: linear-gradient(315deg, rgba(46, 173, 182, .7), rgba(250, 116, 175, .8));
	background-size: cover;
	min-height: 100vh;
}
.global_header {
	padding:1em 0;
	display: grid;
	place-content: center;
	& h1, .description {
		text-align:center;
	}
	& .description {
		margin-top: 1em;
	}
	& a {
		color: var(--main-text-color);
		}
	& a::before, a::after {
		margin: 0 .5em;
		content: "\e904";
		color: transparent;
		background-image: linear-gradient(to right, Magenta, yellow, Cyan, Magenta);
		background-position: 0;
		background-size: 200% 100%;
		background-clip: text;
		font-family: "icomoon";
		font-size: .5em;
		vertical-align: top;
		animation: rainbow 3s linear infinite;
		-webkit-text-stroke: .5px #555;
		text-stroke: .5px #555;
	}
}
@keyframes rainbow {
	0% { background-position: 0 0; }
	100% { background-position: -200% 0; }
}
.default .global_header {
	margin-bottom: 1em;
	min-height: 900px;
	background-image: url(img/halloween.png);
	background-position: center 0;
	& a {
		background-color: rgba(255,255,255,.8);
		border-radius: .7em;
		}
	& .description {
		color: #fff;
	}
}
.global_nav:has(#for_global_nav:not(:checked)) {
	&>ul {
		background-color: rgba(255,255,255,.8);
		border-radius: 6px;
		font-family: var(--midashi-font);
		text-transform:capitalize;
	}
	& ul ul li {
		background-color: rgba(255,255,255,.8);
		overflow: hidden;
		backdrop-filter: blur(5px);
	}
	& a {
		color: var(--main-text-color);
	}
}
.breadcrumb {
	margin: 0 auto;
	max-width: var(--max-width);
}
.onelogbox, :where(.topinfobox) > div, .cards li {
	padding: 1em;
	background-color: light-dark(rgba(255,255,255,.8), rgba(59, 65, 77, .6));
}
.topinfobox .post_title {
	color: var(--main-text-color);
	font-family: var(--midashi-font);
	text-transform: capitalize;
	letter-spacing: .3em;
}
.topinfobox .post_title:first-letter {
	color: transparent;
	background-image: linear-gradient(0deg, rgba(153, 0, 255, 1) 40%, rgba(255, 152, 0, 1) 40%);
	background-clip: text;
	font-size: 1.5em;
	-webkit-text-stroke: .5px #555;
	text-stroke: .5px #555;
}
.entry .onelogbox {
	margin: 0;
}
.entry .onelogbox:not(:last-of-type) {
	border-bottom: 1px solid #aeaeae;
}
.post_title[data-title="無題"] {
	display: none;
}
.novel .post_content {
	line-height: 2;
}
.post_content {
	& details {
		margin: 10px 0;
		padding: 6px;
		color: var(--main-text-color);
		background-color: #fafafa;
		& summary::before {
			margin-right: 6px;
			display: inline-block;
			content: "＋";
			color: #aaa;
			font-size: 1.2em;
			font-weight: bold;
			width: 1em;
			text-align: center;
		}
		&>div {
		padding: 0 1em;
		line-height: 1.4;
		}
	}
	& details[open] {
		background-color:#f4fbff;
		& summary {
		margin-bottom: 6px;
		border-bottom: 1px solid rgba(224, 224, 224, .5);
		}
		& summary::before {
		transform:rotate(45deg);
		}
	}
	& blockquote {
		padding: 6px 1em;
		border-left: 6px solid #e1e1e1;
		line-height: 1.4;
		background-color: #fafafa;
	}

}
form.goodjob {
	text-align :center;
	& button {
		margin-bottom: 1em;
		padding-block: 3px;
		border: 1px solid #aaa!important;
		color: var(--main-text-color)!important;
		background-color: #efefef!important;
		border-radius: 3px!important;
	}
}
.goodjob_option {
	text-align: center;
	&>div {
		position: relative;
		display: inline-block;
	}
	& .msg {
		position: absolute;
		top: -1.6em;
		width: 11em;
		font-size: .8em;
		& p { padding:4px 4px 4px 12px; }
		& p::before { top:calc(50% - 9px); left:6px; }
	}
}
.goodjob_option button {
	padding: 0;
	border: 0;
	background-color: transparent;
	& img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 1.6em;
		vertical-align: middle;
	}
}
.post_content:has(.continue_button) ~ :where([class^="goodjob"]) {
	display:none;
}
.loader {
  display: inline-grid;
  font-size: 50px;
}
.loader:before,
.loader:after {
  content: "👏";
  grid-area: 1/1;
}
.loader:after {
  animation: l10 1.5s infinite;
}
@keyframes l10 {
  to { transform:scale(1.8);opacity:0 }
}

.utility_links {
	font-size: .9em;
	& [class$="_title"] {
	font-family: var(--midashi-font);
	}
}
@media (900px < width) {
	.contents:has(.utility_links) {
		& .main_contents {
			width: calc(100% - 200px);
		}
		& .utility_links {
			flex: 0 0 200px;
		}
	}
}
.main_contents > div.outline {
	margin-bottom: 2em;
	font-size: .8em;
}
.global_footer .sitemap {
	margin: auto;
	width: fit-content;
	& li {
		display: inline;
	}
}
#nav_toggle {
	color: var(--main-text-color);
	background-color: rgba(255,255,255,.8);
	opacity: .6;
	transition: opacity .3s;
}
#nav_toggle:hover {
	opacity: 1;
}
/* コンテンツ一覧 */
.contents_list {
	padding-left: 1.5em;
	& .kaisou ul {
		margin: 0 1em;
		& li {
			display: inline;
		}
		& li:not(:last-child)::after {
		margin: 0 .3em;
			content: " / ";
			font-size: .8em;
			font-weight: 600;
		}
	}

}
/* コミックビューワ */
.laymic_root {
	z-index: 10;
}
/* 銭誕祭・ZJウェブアンソロ */
:where(.zenitan, .ZJ) {
	& div.zenitan {
	padding: 1em;
	width: fit-content;
	line-height: 1.4;
	position: absolute;
	top: -2em;
	left: 50%;
	transform: translateX(-50%);
	color: var(--main-text-color);
	background-color: #fff;
	font-size: .8em;
	text-align: center;
	border-radius: 1em;
		& p {
			margin: 0;
		}
	}
	& .breadcrumb li:first-child {
		display: none;
	}
	& .add_file a:has(img) {
		height: 100%;
		& img {
		width: 100%;
		height: auto;
		}
	}
	& .cards {
		& li {
		}
		& a {
			height: 100%;
			display: block;
			text-decoration: none;
		}
		& img {
			display: block;
			width: 100%;
			height: 100%;
			max-height: 160px;
			object-fit: cover;
		}
		& b {
			display:block;
		}
		& li:has(img) b {
			display: none;
		}
		& .honbun {
			margin: .5em 0;
			padding: .5em;
			display: block;
			line-height: 1.2;
			background-color: #efefef;
		}
		& .option {
			display: block;
		}
	}
	& .global_footer {
		display: none;
	}
}
body.zenitan {
	& .onelogbox:first-of-type dt {
	margin: 16px 0;
	padding: 8px;
	border: 3px solid #eab2b2;
	width: fit-content;
	background-color: #fbf0f0;
	font-size: 24px;
	border-radius: 5px;
	}
	& .onelogbox:first-of-type dd {
	margin: 16px 0 32px 32px;
	padding: 16px 8px;
	border: 3px solid rgb(169, 222, 255);
	width: fit-content;
	background-color: rgb(229, 241, 255);
	border-radius: 5px;
	}
}