@font-face {
	font-family: 手書き雑フォント;
	src: url('https://cdn.leafscape.be/tegaki_zatsu/851tegaki_zatsu_web.woff2') format("woff2");
}

* {
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
}

.fixed-bg {
	display: block;
	position: fixed;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(https://alicex.jp/data/cafe_1918/img/cafe_1918_upld_1.jpg) center/cover no-repeat;
}

p {
	margin-bottom: 1em;
}

a {
	text-decoration: none;
	color: #896850;
}

.novel-list a:visited {
	color: #cc6600;
}

body {
	font-size: 12px;
	font-family: 'Covered By Your Grace', 手書き雑フォント;
	font-weight: 300;
	letter-spacing: 0.1em;
	color: #896850;
	margin-top:30px;
}

h1 {
	font-family: 'Fredericka the Great';
	font-size: 50px;
	font-weight: 400;
	padding: 10px;
	letter-spacing: 0;
}

h2 {
	font-family: 'Covered By Your Grace', 手書き雑フォント;
	padding: 10px;
	letter-spacing: 0;
}

h3 {
	font-family: 'Fredericka the Great';
	font-size: 30px;
	font-weight: 400;
	padding: 10px;
	letter-spacing: 0;
}

.text {
	font-family: Mali, 'Noto Serif JP';
	text-align: left;
	margin: 0;
	padding: 0;
}

.line-pink {
	background-image: linear-gradient(to bottom, rgba(255, 193, 221, 0), rgba(255, 193, 221, 0) 63%, rgba(255, 255, 255, .6) 64%, rgba(255, 255, 255, .6) 67%, rgba(255, 193, 221, 0) 68%), linear-gradient(to bottom, rgba(255, 193, 221, 0), rgba(255, 193, 221, 0) 55%, rgba(255, 255, 255, .5) 56%, rgba(255, 255, 255, .5) 60%, rgba(255, 193, 221, 0) 61%), linear-gradient(179deg, rgba(255, 193, 221, 0), rgba(255, 193, 221, 0) 50%, #ffc1dd 60%, #ffc1dd 99%, rgba(255, 193, 221, 0)), linear-gradient(to bottom, rgba(255, 193, 221, 0), rgba(255, 193, 221, 0) 50%, #ffc1dd 60%, #ffc1dd 99%, rgba(255, 193, 221, 0));
}

.line-yellow {
	background-image: linear-gradient(to bottom, rgba(255, 255, 51, 0), rgba(255, 255, 51, 0) 63%, rgba(255, 255, 255, .6) 64%, rgba(255, 255, 255, .6) 67%, rgba(255, 255, 51, 0) 68%), linear-gradient(to bottom, rgba(255, 255, 51, 0), rgba(255, 255, 51, 0) 55%, rgba(255, 255, 255, .5) 56%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 51, 0) 61%), linear-gradient(179deg, rgba(255, 255, 51, 0), rgba(255, 255, 51, 0) 50%, #ffff33 60%, #ffff33 99%, rgba(255, 255, 51, 0)), linear-gradient(to bottom, rgba(255, 255, 51, 0), rgba(255, 255, 51, 0) 50%, #ffff33 60%, #ffff33 99%, rgba(255, 255, 51, 0))
}

.memo, .memo2, .memo3, .memo4 {
	position: relative;
	background: #ffffcc;
	border-left: 4px dotted rgba(0, 0, 0, .1);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	padding: 12px;
	width: 300px;
	text-align: center;
	margin: 0 0 40px 0;
}

.memo {
	transform: rotate(2deg);
}

.memo2 {
	transform: rotate(-2deg);
}

.memo3 {
	transform: rotate(3deg);
}

.memo4 {
	transform: rotate(0.1deg);
}

.masking-tape, .masking-tape2, .masking-tape3 {
	position: absolute;
	top: -1em;
	left: 26%;
	width: 100px;
	height: 30px;
	background-image: linear-gradient(-45deg, rgba(227, 155, 140, .4) 25%, transparent 25%, transparent 50%, rgba(227, 155, 140, .4) 50%, rgba(227, 155, 140, .4) 75%, transparent 75%, transparent 100%);
	background-size: 20px 20px;
	border-left: 2px dotted rgba(0, 0, 0, .1);
	border-right: 2px dotted rgba(0, 0, 0, .1);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	padding: 0.25em 2em;
	color: #65513f;
}

.masking-tape {
	transform: rotate(-4deg);
}

.masking-tape2 {
	transform: rotate(4deg);
}

.masking-tape3 {
	transform: rotate(-2deg);
}

input[type="text"] {
	border: solid 0px;
	background: transparent;
	font-size: 12px;
	font-family: 'Covered By Your Grace', 手書き雑フォント;
	font-weight: 300;
	color: #896850;
	outline: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	text-align: center;
}

.label2, .label3, .label4, .label5, .label6, .label7 {
	vertical-align: middle;
	display: inline-block;
	text-decoration: none;
	background: #896850;
	color: #FFF;
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	transition: 0.4s;
	cursor: pointer;
	margin: 5px;
}

.label2:before {
	display: inline-block;
	content: '\f015';
	font-family: FontAwesome;
	transition: 0.2s;
}

.label3:before {
	display: inline-block;
	content: '\f02d';
	font-family: FontAwesome;
	transition: 0.2s;
}

.label4:before {
	display: inline-block;
	content: '\f12a';
	font-family: FontAwesome;
	transition: 0.2s;
}

.label5:before {
	display: inline-block;
	content: '\f164';
	font-family: FontAwesome;
	transition: 0.2s;
}

.label6:before {
	display: inline-block;
	content: '\f0c1';
	font-family: FontAwesome;
	transition: 0.2s;
}

.label7:before {
	display: inline-block;
	content: '\f0e0';
	font-family: FontAwesome;
	transition: 0.2s;
	font-size: 25px;
}

header {
	padding: 10px;
	position: fixed;
	width: 60px;
	top: 0;
}

#nav-drawer {
	position: relative;
}

.nav-unshown {
	display: none;
}

#nav-open {
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	border-radius: 50%;
	background: #896850;
	line-height: 60px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	transition: 0.4s;
}

#nav-open:before {
	display: inline-block;
	content: '\f0c9';
	font-family: FontAwesome;
	color: white;
	transition: 0.2s;
}

#nav-input:checked~#nav-open:before {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

#nav-close {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: 0.3s ease-in-out;
}

#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 90%;
	max-width: 280px;
	background: rgba(225, 225, 225, 0.7);
	transition: .3s ease-in-out;
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
	margin: 0;
	padding: 15px;
	height: 100%;
	font-size: 30px;
	font-family: 'Covered By Your Grace';
	font-weight: 300;
}

#nav-input:checked~#nav-close {
	display: block;
	opacity: 0.5;
}

#nav-input:checked~#nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}