@import url('https://fonts.googleapis.com/css?family=Caudex&display=swap');

/********** 全体 **********/

body {
	background: url(../img/nights_bg_top.png) ,linear-gradient(to bottom, #001E43, #458076 75%, #E6B422 90%, #FFD700);
	color: #001E43;
	background-repeat: no-repeat;
	background-position: 5% 0;
}

/* リンク */

a:link, a:visited {
	display: inline-block;
	margin: 0.2em;
	padding: 0 0.5em;
	color: #001E43;
	background: rgba(212,217,220,0.3);
	text-decoration: none;
}

a:active, a:hover {
	background: rgba(212,217,220,0);
	color: #D4D9DC;
}

/* セクション */

main {
	text-align: center;
}

aside {
	text-align: center;
	margin: 2em 0;
}

/* 見出し */

h2 {
	margin: 0.8em 0 0.6em;
	padding: 0.3em 1.2em;
	font-family: 'Caudex', serif;
	font-size: 200%;
	text-shadow:1px 1px 0 #D4D9DC,-1px 1px 0 #D4D9DC,1px -1px 0 #D4D9DC,-1px -1px 0 #D4D9DC;
	line-height: 1;
}

h3 {
	margin: 0.8em 0 0.6em;
	font-size: 150%;
	font-family: 'Caudex', serif;
	color: #FFEDAB;
	line-height: 1;
	font-weight: normal;
}

h3 a:link, h3 a:visited {
	color: #FFEDAB;
	background-color: transparent;
}

h3 a:active, h3 a:hover {
	color: #FFFFFF;
	background: linear-gradient(to bottom, transparent 65%, rgba(212,217,220,0.2));
}

h5 {
	margin: 1em 0;
	padding: 0.2em 0;
	text-align: center;
	background: linear-gradient(to right, transparent 0%, #D4D9DC 20%, #D4D9DC 80%, transparent 100%);
	color: #001E43;
	font-size: 180%;
	font-family: 'Caudex', serif;
	font-weight: normal;
	line-height: 1;
}

h6 {
	margin: 0 0 1.8em;
	padding: 0 0 0.2em;
	text-align: center;
	color: #001E43;
	font-size: 150%;
	font-family: 'Caudex', serif;
	font-weight: normal;
	border-bottom: 1px solid;
	border-image: linear-gradient(to right, transparent 0%, #D4D9DC 20%, #D4D9DC 80%, transparent 100%);
	border-image-slice: 1;
	line-height: 1;
}

/* 段落 */


/*** リスト ***/

/* メインストーリー */

ol.story {
	margin: 1em 0;
	list-style-type: lower-roman;
}

ol.story:before, ol.story:after {
	content: "\2747";
	color: #FFEDAB;
}

ol.story li {
	margin: 0.5em;
	padding: 0;
	font-size: 130%;
	font-family: 'Caudex', serif;
	color: #D4D9DC;
}

ol.story li a:link, ol.story li a:visited {
	margin: 0;
	padding: 0;
	color: #D4D9DC;
	background: transparent;
}

ol.story li a:active, ol.story li a:hover {
	margin: 0;
	padding: 0;
	color: #FFEDAB;
	background: linear-gradient(to bottom, transparent 65%, rgba(212,217,220,0.2));
}

ol.story li.closed {
	opacity: 0.4;
}

/* エクストラ */

ul.story {
	margin: 1em 0;
}

ul.story li {
	display: inline;
	margin: 0;
	padding: 0;
}

ul.story li:after {
	margin: 0 0.5em;
	content: "\2747";
	color: #D4D9DC;
}

ul.story li.last:after {
	content: none;
}

/* キャラ */

ul.chara {
	margin: 1em 0 2em;
}

ul.chara a:link, ul.chara1 a:visited, ul.chara1 a:active, ul.chara1 a:hover {
	text-decoration: none;
	border: none;
}

ul.chara li {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
}

/* 画像 */

ul.works_p {
	margin: 1em 0;
}

ul.works_p a:link, ul.works_p a:visited {
	text-decoration: none;
	border: none;
	background-color: transparent;
	opacity: 0.6;
}

ul.works_p a:active, ul.works_p a:hover {
	opacity: 1;
}

ul.works_p li {
	display: inline-block;
	margin: 0 0.5em;
	padding: 0;
}

ul.works_p li img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border: 1px solid #FFFFFF;
}

ul.works_p li.img_pager {
	display: none;
}

/* テキスト */

mark.marker {
	background: linear-gradient(transparent 60%, #FFD700 60%);
	font-style: normal;
}

mark.caution {
	background: none;
	color: #D4D9DC;
	font-style: normal;
	font-weight: bold;
}

/********** ヘッダー **********/

h1 {
	position: relative;
	display: inline-block;
	margin: 0.3em 0;
	background: -webkit-linear-gradient(135deg, #D4D9DC, #FFEDAB);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	font-size: 400%;
	font-family: 'Caudex', serif;
}

.hnav {
	position: fixed;
	top: 0;
	right: 0;
	margin: 0;
	z-index: 99;
}

.hnav label {
	border: 1px solid #D4D9DC;
	color: #D4D9DC;
}

.hnav label:hover {
	opacity: 0.8;
}

.hnavcheck:checked + .hnavopen {
	background: #D4D9DC;
	opacity: 0.5;
}

.hnavopen ul li a:link, .hnavopen ul li a:visited {
	color: #001E43;
	background: transparent;
	text-decoration: none;
	border-bottom: 1px solid #001E43;
	margin: 0;
	padding: 0;
}

.hnavopen ul li a:active, .hnavopen ul li a:hover {
	border-bottom: 1px solid transparent;
}

.hnav_text {
	opacity: 0.4;
}

.hnav_text p {
	background: #FFFFFF;
}

.hnav_text p a {
	color: #001E43;
}

/********** フッター **********/

footer {
	color: #D4D9DC;
	background: url(../img/nights_bg_bottom1.png) ,#001E43;
	background-repeat: no-repeat;
	background-position: top 5%;
}

nav#fnav ul li a:link, nav#fnav ul li a:visited {
	color: #D4D9DC;
	margin: 0;
	padding: 0;
	background: none;
}

nav#fnav ul li a:active, nav#fnav ul li a:hover {
	color: #FFEDAB;
}

/********** いれもの **********/

div.category {
	background: rgba(212,217,220,0.15);
	margin: 0 3%;
	padding: 0.5em 2%;
}

div.contents_text {
	background: rgba(212,217,220,0.85);
}

div.contents_text .select_top {
	border-bottom: 1px solid;
	border-image: linear-gradient(to right, transparent 0%, #D4D9DC 20%, #D4D9DC 80%, transparent 100%);
	border-image-slice: 1;
	text-align: center;
}

div.contents_text .select_bottom {
	border-top: 1px solid;
	border-image: linear-gradient(to right, transparent 0%, #D4D9DC 20%, #D4D9DC 80%, transparent 100%);
	border-image-slice: 1;
	text-align: center;
}

div.contents_text input[type="button"] {
	color: #001E43;
}

div.contents_text input[type="button"]:hover {
	background: #D4D9DC;
}

div.contents_text span.cut {
	display: block;
	text-align: center;
	padding: 0.5em 0 0;
}

div.contents_text span.cut:after {
	content: "\2736";
	color: #FFFFFF;
}

div#disp {
	line-height: 2.3;
}

/********** その他 **********/

/* 拍手 */
select.fav {
	color: #001E43 ;
	border: 1px solid #001E43;
	background-color: transparent;
}

input[type="submit"], input[type="button"] {
	color: #001E43;
	background-color: transparent;
	border: 1px solid #001E43;
}

input[type="submit"]:hover, input[type="button"]:hover {
	background-color: #001E43;
	color: #D4D9DC;
}