@charset "utf-8";
/* -- all --  */
hr{
}
body{
	display: flex;
}
/* --google icon-- */
.material-icons{
	vertical-align: sub;
	margin: 0 0.5rem;
}
/* -- header --  */
header {
	padding: 1rem;
	display: flex;
	h1 {
		font-family: 'Megrim','M PLUS Rounded 1c', sans-serif;
		display: inline-block;
	}
}
/* -- menu-button -- */
.menu-btn {
	position: fixed;
	right: 0;
	top: 0;
	margin: 1rem 2rem;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	z-index: 5;
}
.menu-btn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #6e6e6e;
	border-radius: 4px;
}
.menu-btn, .menu-btn span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
}
.menu-btn span:nth-of-type(1) {
	top: 0;
}
.menu-btn span:nth-of-type(2) {
	top: 45%;
}
.menu-btn span:nth-of-type(3) {
	bottom: 0;
}
.page-nav.opened .menu-btn span{
	background-color: #d2d4d8;
}
.page-nav.opened .menu-btn span:nth-of-type(1) {
	-webkit-transform: translateY(calc(1rem - 2px)) rotate(-45deg);
	transform: translateY(calc(1rem - 2px)) rotate(-45deg);
}
.page-nav.opened .menu-btn span:nth-of-type(2) {
	opacity: 0;
}
.page-nav.opened .menu-btn span:nth-of-type(3) {
	-webkit-transform: translateY(calc(-1rem + 2px)) rotate(45deg);
	transform: translateY(calc(-1rem + 2px)) rotate(45deg);
}

/* -- nav menu --  */
.page-nav a, .page-nav a:active, .page-nav a:visited{
	color: inherit;
	fill: inherit;
}
.page-nav a:hover {
	
}

.page-nav{
	/* font */
	font-family: "Jura", sans-serif;
	font-size: 1.4em;
	font-weight: 400;
	/* z-index */
	z-index: 10;
	/* length */
	width: 100svw;
	min-width: 7em;
	/* transition */
	transition: 0.3s;
	/* position */
	position: fixed;
	/* color */
	color: #d2d4d8;
	/* line */
	align-content: center;
	/* menu */
	.page-nav-box{
		/* menu position */
		position: relative;
		/* menu list ul */
		.page-nav-list {
			width: 100%;
			padding: 0 1em;
			position: absolute;
			top: 0;
			display: flex;
			justify-self: anchor-center;
			flex-wrap: nowrap;
			word-wrap: break-word;
			gap: 1rem;
			list-style-type: none;
			z-index: 4;
			background: #000000bd;
			/* menu list li */
			li {
				min-width: 10rem;
				flex: 1;
				text-align: center;
				transition: 0.2s;
				a{
					display: block;
					padding: 1rem;
					position: relative;
					right: 0.3em;
				}
			}
			li:hover{
				background: #5f6ea07d;
			}
		}
		.page-nav-list::after {
			content: "";
			display: inline-block;
			flex-grow: 2;
		}
	}
}

.page-nav-list{
	transition: 0.3s cubic-bezier(0.46, 0.15, 0.85, 1.04);
}
/* close */
.page-nav-list,
.closing .page-nav-list{
	transform: translateX(100%);
	opacity: 0;
}
.page-nav.closing .summary::before {
	transform: rotate(45deg) skew(10deg, 10deg);
	background: #f4f4f4;
	opacity: 0.5;
	border: solid 1px #3e3e3e;
}
/* open */
.opened .page-nav-list{
	transform: translateX(0);
	opacity: 1;
}
.page-nav.opened .summary::before {
	transform: rotate(135deg) skew(10deg, 10deg);
	background: #656b91;
	opacity: 0.5;
	border: solid 1px whitesmoke;
}


/* -- main --  */
main{
	display: flex;
	flex-direction: column;
	align-self: center;
	width: 80vw;
}

/* -- offline --  */
#events{
	width: 100vw;
	padding: 1rem 2rem;
	box-sizing: border-box;
	.circle, .next-join, .events-list {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.2rem;
		margin-bottom: 1rem;
		margin-left: 10vw;
	}
	.ev-item{ grid-column: 1/2; }
	.ev-date{ grid-column: 1/2; }
	.title{ grid-column: 2/3; }
	.title::before{
		content:":";
		margin: 0 0.5rem;
	}
}

.books{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: 1.5rem;
	justify-items: center;
	
	margin: 1.5rem 0;
	.items{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;
		gap: 1rem;
		overflow-wrap: anywhere;
		position: relative;
		border-radius: 1rem;
		background: #f4f4f4;
		padding: 1rem;
		box-sizing: border-box;
		box-shadow: 3px 3px 5px 0px rgba(155, 166, 179, 0.35);
		.img{
			grid-column: 1/2;
			grid-row: 1/2;
		}
		.txt{
			grid-column: 2/3;
			grid-row: 1/2;
		}
		.lnk{
			grid-column: 1/3;
			grid-row: 2/3;
		}

		.img{
			img{ width: 100%; }
		}
		.txt{
			h2, h3{font-weight: normal;}
		}
		.lnk{
			display:flex;
			flex-direction: row;
			gap: 0.5rem;
			span{
				color:#ececec;
				display: inline-block;
				width: 100%;
				height: 3em;
				align-content: center;
				text-align-last: center;
				border-radius: 2rem;
				transition: 0.3s;
				a{
					display: inline-block;
					width: 100%;
					height: 100%;
					align-content: center;
				}
				a, a:visited, a:active, a:hover{ color:#ececec; }
			}
			.sample{background: #6e759b;}
			.sample:hover{background: #808dcf;}
			.has-stock {background: #6e759b;}
			.has-stock:hover{background: #808dcf;}
			.nothing-stock{background: #9a98a1;}
		}
	}
}

.plain-books{
	margin: 1.5rem 0;
	display: flex;
	align-items: center;
	.plain-list{
		margin: 0 1rem;
		border-left: double #8b8b8b;
		padding: 1rem;
	}
}


/* -- creation --  */
.tab-menu{
	.tab{
		list-style-type: none;
		display: flex;
		gap: 0 0.5rem;
		justify-content: center;
		.genre-tab{
			cursor: pointer;
			padding: 0.5rem 1rem;
			width: 5rem;
			border-radius: 0 2rem 0 0;
			text-align: center;
			position: relative;
			top: 1px;
			background: #f4f4f4;
			transition: 0.2s;
			a{
				color: #3e3e3e;
			}
		}
		.is-active{
			border-image: linear-gradient(180deg, #8b8b8b 0%, #8b8b8b 60%, #ededf0 60%, #ededf0 100%) 1;
			top: 1rem;
			transition: 0.2s;
		}
	}
}

#switch-contents{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1100px;
	min-width: 650px;
	border-radius: 1rem;
	padding: 2rem 0;
	background: #f4f4f4;
	.contents[data-genre-scope="outline"]{
		display: flex;
		flex-direction: column;
		width: 30rem;
		border: solid 1px #b8b8b8;
		padding: 2rem;
		align-items: center;
	}
	.contents {
		width: 80%;
		align-self: center;
		h3{
			font-family: 'Jura','M PLUS Rounded 1c', sans-serif;
			margin-bottom: 0.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		h3:not(:first-of-type){ margin-top: 2rem; }
		h3::before,
		h3::after{
			content: "";
			display: flex;
			position: relative;
			height: 1px;
			width: 5rem;
			background: #5c5c5c78;
			margin: 0 1rem;
		}
		.gallery{
			word-break: auto-phrase;
			.icon{
				border: 1px solid #000;
			}
		}
		.log-title{
			margin-right: 1rem;
		}
		.log-title::before{
			content: "◆";
		}
	}
}

.img-viewbox{
	width: 80%;
	justify-self: center;
	text-align: center;
	img {
		max-width: 100%;
	}
}
.img-viewbox.viewtype-comic{
	img{
		margin-bottom: 2rem;
	}
}
.img-viewbox.viewtype-log{
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	.trim{
		display: inline-block;
		width: 8rem;
		height: 14rem;
		overflow: hidden;
		border: 1px solid #000000c9;
		img{
			margin: 0;
			min-width: fit-content;
			-webkit-transform: translate(-30%, -20%) scale(0.75);
			-ms-transform: translate(-30%, -20%) scale(0.75);
			transform: translate(-30%, -20%) scale(0.75);
		}
		a{
			display: block;
			width: 100%;
			height: 100%;
		}
	}

}

/* -- publish books --  */
#publish-book{
	.contents{
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr auto;
		gap: 1rem;
		padding: 1rem;
		margin: 2rem 0;
		align-items: center;
		border: 1px solid #9d9d9d;
		border-radius: 1rem;
		.viewer{ grid-row:1/3; grid-column:1/2; }
		.preface{ grid-row:1/2; grid-column:2/3; }
		.pb-clap{ grid-row:2/3; grid-column:2/3; }

		.viewer{
			position: relative;
			border-radius: 1rem;
			clip-path: border-box;
			img{
				display: block;
			}
		}
		.viewer span{
			font-size: x-large;
			display: inline-block;
			position: absolute;
			position-area: center;
			text-align: center;
			align-content: center;
			color: #e8e8e8;
			pointer-events: none;
		}
		.viewer span::before{
			content: "auto_stories";
			font-family: "Material Icons";
			display: block;
		}
		.viewer a{
			display: inline-block;
			position: absolute;
			width: 100%;
			height: 100%;
			background: #1f1f1fbd;
			transition: 0.3s;
		}
		.viewer a:hover{
			background: #4e4e4ebd;
		}
		.pb-clap #iine, .pb-clap #mail{
			color: #948aff;
			background: white;
		}
		.pb-clap #iine:hover, .pb-clap #mail:hover {
			color: #4580ff;
			background: #ebebeb;
		}
	}
	.omake{
		background: #111113;
		text-align: center;
		padding: 2rem;
		p{
			margin-bottom: 10rem;
			color: #a9a9a9;
		}
	}
}

#error-page{
	align-content: center;
	.err-box{
		background: whitesmoke;
		border-radius: 5rem;
		padding: 10%;
		.err-title{
			font-family: 'Jura','M PLUS Rounded 1c', sans-serif;
			font-size: 4em;
		}
	}
}