/* ------------------------------------------------------ */
/* ▼ 冥契 CSS */
/* ------------------------------------------------------ */
@charset "utf-8";

/*fonts*/
@import url('../../css/novel-fonts.css');
/*EB Garamond*/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap');

/* ------------------------------------------------------ */
/* ▼ CSSリセット */
/* ------------------------------------------------------ */
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

/* ------------------------------------------------------ */
/* ▼ 基礎 */
/* ------------------------------------------------------ */
body {
	background: url("bg.webp") center / cover no-repeat fixed;
	color: #252529 !important;
	font-family: "Noto Sans JP", sans-serif;
}

/* ------------------------------------------------------ */
/* ▼ ヘッダー */
/* ------------------------------------------------------ */

header {
	margin: 0px;
	padding: 30px 20px 0 20px;
	display: block;
}

header ul {
	list-style: none;
	margin-left: 0px;
	line-height: 12px;
	float: left;
}

header ul:before {
	padding: 0 .4rem;
	font-family: "remixicon";
	font-weight: normal;
	content: "\ef0a";
	color: #89A9CD;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1em;
}

header li {
	display: inline-block;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
	color: #343970;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1em;
}

header li + li:before{
	padding: 0 .2em;
	font-family: "remixicon";
	font-weight: normal;
	content: "\ea6e";
	color: #89A9CD;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1em;
}

header a {
	color: #343970;
	text-decoration: underline;
}

header a:hover {
	color: #343970;
	text-decoration: none;
}

/* ------------------------------------------------------ */
/* ▼ インデックス:注意書き */
/* ------------------------------------------------------ */

article#index {
	margin: 0 auto 100px auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.7em;
	font-weight: 500;
	display: block;
	width: 28em;
}

article#index ul {
	list-style: none;
	margin-left: 1em;
}

article#index li {
	padding-bottom: .5em;
	text-indent: -1em;
	font-family: "Noto Sans JP", sans-serif;
}

article#index li:before {
	content: "◇ ";
	color: #89A9CD;
	font-size: 1rem;
}

/* ------------------------------------------------------ */
/* ▼ インデックス:メニュー */
/* ------------------------------------------------------ */

nav {
	margin: 0 auto;
	padding: 0;
	text-align: left;
	width: 320px;
}

nav ul {
	list-style: none;
}

nav li {
	padding: 0 0 1.5em 0;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
	color: #788488;
	font-size: 1.2rem;
	line-height: 1.5em;
}

nav a:link {
	display: block;
	color: #313A5C;
	font-family: "EB Garamond", "Noto Serif JP", serif;
	font-size: 2rem;
	line-height: 1.4em;
	font-weight: normal;
	text-decoration: underline double #C8D9C1;
	transition: 0.3s ease-in-out;
}

nav a:visited {
	/*color: #365F73;*/
	color: #313A5C;
	text-decoration: underline double #C8D9C1;
	transition: 0.3s ease-in-out;
}

nav a:hover {
	color: #8399A6;
	transition: 0.3s ease-in-out;
}

nav a:active {
	color: #8399A6;
	transition: 0.3s ease-in-out;
}

nav span {
	padding-left: 1em;
}

/* ------------------------------------------------------ */
/* ▼ インデックス:引用 */
/* ------------------------------------------------------ */

article#thanks {
	margin: 6em auto;
	padding: 1.6rem;
	position: relative;
	text-align: left;
	width: 14em;
	font-family: "EB Garamond", serif;
	font-size: 1.2rem;
	line-height: 1.7em;
	font-weight: normal;
	color: #888;
}

article#thanks:before {
	position: absolute;
	font-family: "remixicon";
	content: "\ec51";
	font-weight: normal;
	font-size: 1.2rem;
	color: #AAA;
	top: 0px;
	left: 0px;
}

article#thanks:after {
	position: absolute;
	font-family: "remixicon";
	content: "\ec52";
	font-weight: normal;
	font-size: 1.2rem;
	color: #AAA;
	bottom: 0px;
	right: 5px;
}

/* ------------------------------------------------------ */
/* ▼ フッター */
/* ------------------------------------------------------ */

footer {
	background-color: #313A5C;
	margin: 12em 0em 0em 0em;
	padding: 6em 0em;
	text-align: center;
	font-family: "EB Garamond", serif;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 1.1em;
}

footer ul {
	margin: 1em 0;
}

footer li {
	display: inline-block;
	margin: 0 .3em;
}

footer a {
	padding: .3em .7em;
	color: #E5E7F4;
	text-decoration: none;
	border: 1px solid #E5E7F4;
	transition: 0.3s ease-in-out;
}

footer a:hover {
	color: #FFF;
	text-decoration: none;
	border: 1px solid #FFF;
	background-color: rgba(255,255,255,.4);
	transition: 0.3s ease-in-out;
}

footer span.current {
	padding: .3em .7em;
	background-color: rgba(255,255,255,.2);
	color: #FFF;
	border: 1px solid #FFF;
}

footer span.grayout {
	padding: .3em .7em;
	background: none;
	color: #FFF;
	border: 1px solid #FFF;
	opacity: .3;
}

footer span.material-symbols-outlined.arrow_navi {
	vertical-align: -3px;
	font-size: 1.7rem;
}

/* ------------------------------------------------------ */
/* ▼ 見出し */
/* ------------------------------------------------------ */

/*ロゴ*/
h1 {
	margin: 0 auto;
	background: url("logo.webp") no-repeat top center / contain;
	font-size: 1rem;
	width: 97px;
	height: 78px;
	text-indent: -1000000px;
	display: block;
}

/*注意書き*/
h2 {
	margin-bottom: 1em;
	padding-top: 3rem;
	position: relative;
	font-size: 1.6rem;
	line-height: 1em;
	font-family: "EB Garamond", serif;
	font-weight: normal;
	text-decoration: none;
	color: #C93448;
	display: brock;
	text-align: center;
}

h2:before {
	position: absolute;
	font-family: "remixicon";
	content: "\ea20";
	font-weight: normal;
	font-size: 3.4rem;
	color: #C93448;
	top: 0;
	left: 45%;
}

/*小説タイトル1*/
h3 {
	margin-bottom: 3em;
	padding-bottom: 1.2em;
	display: block;
	font-size: 2.6rem;
	line-height: 1.3em;
	font-family: "EB Garamond", serif;
	font-weight: bold;
	text-decoration: none;
	color: rgba(0, 0, 0, 0);
	background-image: url("bg_text.webp");
	background-clip: text;
	-webkit-background-clip: text;
}

h3 .subtitle {
	padding: 0rem 1em;
	display: inline-block;
	color: rgba(0, 0, 0, 0);
	font-size: 1.2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
}

h3 .subtitle:before {
	content: "/";
	font-size: 1.2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
	position: relative;
	padding-right: .5em;
}

h3 .subtitle:after {
	content: "/";
	font-size: 1.2rem;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: normal;
	position: relative;
	padding-left: .5em;
}

/* ------------------------------------------------------ */
/* ▼ 区切り線 hr */
/* ------------------------------------------------------ */

hr {
	margin: 8em 0;
	padding: 0;
	border: none;
	text-align: center;
	width: 18em;
	height: auto;
	&:after{
		content: "\f35d　　　\f35d　　　\f35d";
		font-family: "remixicon";
		font-size: 18px;
		color: rgba(0, 0, 0, 0);
		background-image: url("bg_text.webp");
		background-clip: text;
		-webkit-background-clip: text;
	}
}

/* ------------------------------------------------------ */
/* ▼ ページトップボタン */
/* ------------------------------------------------------ */

.pagetotop {
	position: fixed;
	right: 14px;
	bottom: 10px;
	z-index: 10;
	text-align: center;
	overflow: hidden;
}

.pagetotop a {
	margin: auto;
	width: 30px;
	height: 30px;
	background: #313A5C;
	color: #EBEBEB;
	font-size: 20px;
	line-height: 26px;
	text-decoration: none;
	display: block;
	border: 2px solid #EBEBEB;
	border-radius: 30px;
	transition: 0.3s ease-in-out;
}

.pagetotop a:hover {
	background: #8399A6;
	color: #EBEBEB;
	cursor: pointer;
}


/* ------------------------------------------------------ */
/* ▼ レスポンシブ */
/* ------------------------------------------------------ */
/* スマホ */
@media screen and (max-width: 768px) {
	main {
		margin: 120px 10px;
	}
	
	article {
		margin: 120px auto;
		max-width: 90%;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 1.4rem;
		line-height: 2em;
	}
	
	.pc {
		display: none;
	}
	
	.mobile {
		display: inline-block;
	}
	
	hr {
		width: 100%;
	}
}

/* PC,タブレット */
@media screen and (min-width: 769px) {
	header {
		padding: 30px 20px 0 20px;
	}
	
	div.custom_left {
		display: inline-block;
	}
	
	div.custom_right {
		display: inline-block;
	}
	
	main {
		margin: 120px 0;
	}
	
	article {
		margin: 140px auto;
		padding: 0px 2em;
		max-width: 42em;
		font-family: "Noto Sans JP", sans-serif;
		font-size: 1.6rem;
		line-height: 2em;
	}
	
	.pc {
		display: inline-block;
	}
	
	.mobile {
		display: none;
	}
}
/* ------------------------------------------------------ */
/* ▼ カスタム機能まわり */
/* ------------------------------------------------------ */
/* テーマカラー選択を非表示に */
#custom-theme {
	display: none !important;
}
/* アイコンカラーを固定 */
#customicon {
	color: #343970 !important;
}
#customicon:hover {
	background-color: #34397022 !important;
	color: #343970 !important;
}