/* 色 */
body{
	/* 行間 */
    line-height: 1.6em;
    /* デフォルトフォントサイズ */
    font-size: 12px;
    /*　デフォルトのテキストカラー　*/
	color: #343431;
    /* デフォルトのフォント　*/
	font-family: 'Noto Serif JP',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-break: strict;
  	word-break: normal;
  	word-wrap: break-word;
  	overflow-wrap: anywhere;
}

.all{
    line-height: 1.6em;
    /* デフォルトフォントサイズ */
    font-size: 13px;
    /*　デフォルトのテキストカラー　*/
	color: #343431;
    /* デフォルトのフォント　*/
	font-family: 'Noto Serif JP',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-break: strict;
  	word-break: normal;
  	word-wrap: break-word;
  	overflow-wrap: anywhere;
}

/* リンクテキストデフォルト設定 */
a{
	display: inline-block;
    /*　色　*/
	color: #343431;
	text-decoration: none;
}

/*　リンクテキストフォーカス時　*/
a:hover{
	/* 背景色を20%塗ってマーカーのように見せる */
    background: linear-gradient(transparent 85%, #DDDFE3 15%);
	color: #7F7E8A;
    /* 行間(マーカーのせいで下との間隔がきつきつに見える) */
	text-decoration: none;
}

/*　訪問済リンクテキスト */
a:visited{
    /* 訪問済リンクテキストの色 */
	color: #7B7A84;
}

/* メニューのスタイル　*/
.menu{
    /* flex採用（要素の幅を要素ごとに合わせたいので） */
    display: -webkit-inline-flex;
    display: inline-flex;
    /* 要素を左から右へ */
    flex-direction: row;
    /*　ページ内に収まらない場合は折り返す */
    flex-wrap: wrap;
    /*　空きスペースがある場合は中央に配置　*/
    justify-content: center;
    /* 左右margin */
	margin: 0em 1em;
    /* メニューのフォント */
	font-family: 'Junge', serif;
	letter-spacing: 0.1em;
/*	color:#595656;*/
    /*　フォントサイズ */
	font-size: 13px;
}

.menu a{
    position: relative;
    /*　テキストカラー */
    color: #343431;
    padding: 0.2em 0.5em 0em 0.5em;
    /*　隣接アイテムの間隔 */
    margin: 0.3em 0.5em;
    /* 背景色を20%塗ってマーカーのように見せる */
/*    background: linear-gradient(transparent 90%, #9CA4C3 10%);*/
    /* 行間(マーカーのせいで下との間隔がきつきつに見える) */
/*	text-decoration: none;*/
	border-bottom: solid 2px #DDDFE3;
	background: #ffffff;
}

/* メニューフォーカス */
.menu a:hover{
    /* 背景色を20%塗ってマーカーのように見せる */
	background: #ffffff;
	color: #94949D;
/*    background: linear-gradient(transparent 80%, #EEB3BD 20%);*/
    /* 行間(マーカーのせいで下との間隔がきつきつに見える) */
/*	text-decoration: none;*/
	border-bottom: solid 2px #ebDDe0;
}

strong{
 	/* 背景色を20%塗ってマーカーのように見せる */
    background: linear-gradient(transparent 80%, #f2d3d8 20%);
    /* 行間(マーカーのせいで下との間隔がきつきつに見える) */
	text-decoration: none;
    font-weight: normal;
}

strong.bold{
    font-weight: bold;
}

/*　テキストカラーをライトグレー　*/
span.light-gray{
	color: #B2B2B8;
}

/*　小さいフォントサイズ */
span.font-small{
	font-size: 10px;
}

/* 下線 */
span.under-line{
	text-decoration-line: underline;
}


/* notoフォント */
span.noto{
	font-family: 'Noto Serif JP', serif;
}

span.noto_strong{
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
}

span.im{
	font-family: 'IM Fell French Canon SC', serif;
}

span.roboto{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
}

span.roboto strong{
	font-weight: 500;
}

span.cousine{
    font-family: 'Cousine', monospace;
}

span.junge{
	font-family: 'Junge', serif;
}

span.red{
    color: #DA6A67;
}/* 背景 */
.box{
    /*　背景色　*/
	background-color: #ffffff;
    /*　幅調節 */
	margin-left:10%;
    margin-right: 10%;
    /*　上下の高さ調節 */
    margin-top: 7em;
    margin-bottom: 7em;
	padding: 1em 0.5em;
    /*　二本線。dottedでもいい感じになる　*/
	border: double 3px #D9D7D7;
    /* ぼかしがないbox-shadowで、フレームのようにする */
	box-shadow: 0px 0px 0px 12px #ffffff;
}

/*　小説用でできる限り画面全体に表示できるよう無駄を省いた背景 */
.box-novel{
    /*　背景色　*/
	background-color: #ffffff;
    /*　幅調節 */
	margin-left:10%;
    margin-right: 10%;
    /*　上下の高さ調節 */
    margin-top: 7em;
    margin-bottom: 7em;
	padding: 1em 0.5em;
    /*　二本線。dottedでもいい感じになる　*/
	border: double 3px #D9D7D7;
    /* ぼかしがないbox-shadowで、フレームのようにする */
	box-shadow: 0px 0px 0px 12px #ffffff;
}

/* 見出し１　ページタイトル等 */
h1{
	font-size: 20px;
	margin: 0.5em 0em;
	text-align: center;
	font-family: 'Elsie', cursive;
    /*　フォントの種類によっては、文字間隔が狭いのでお好みで */
	letter-spacing: 0.05em;
    line-height: 1.25em;
}

/*　見出し２　セクション等。　先頭文字大きく、かつ色違いで両端に破線 */
h2{
    position: relative;
    /*　後続文字のフォント */
    font-family: 'Josefin Slab', serif;
    /* フォントサイズ　*/
    font-size: 13px;
    font-weight: normal;
	margin: 0.7em 0em;
}

/*　先頭文字の設定 */
h2 span::first-letter{
    /*後続文字との間隔 */
    margin-right: 0.05em;
    /* 一回り大きく */
	font-size: 1.5em;
	font-weight: bold;
    /* color: で先頭の文字色を変更可能 */
/*    color: #0D0D0D;*/
}

/*　タイトルの両端に線があるパターン */
h2 span{
    position: relative;
    /*　最前面 */
	z-index: 1;
	display: inline-block;
    /* marginで位置調整 */
	margin: 0px 1em;
    /*　左右の空白増やす。（線との間隔調整。あんまり長いと変） */
	padding: 0px 0.5em;
    /*　背景と同じ色にしておけばOK */
	background-color: #ffffff;
}

/*　タイトルの両端に破線 */
h2::before{
    position: absolute;
	top: 50%;
	content: '';
	display: inline-block;
    width: 100%;
    border-bottom: solid 1px #999893;
}

/*　見出し3　小説タイトル等 */
h3{
    /* フォントサイズ　*/
	font-size: 15px;
    position: relative;
    /*　後続文字のフォント */
	font-family:'Noto Serif JP', serif;
	margin-top: 0.7em;
	margin-bottom: 1.5em;
}

/*　タイトルの両端に線があるパターン */
h3 span{
    position: relative;
    /*　最前面 */
	z-index: 1;
	display: inline-block;
    /* marginで位置調整 */
	margin: 0px 1em;
    /*　左右の空白増やす。（線との間隔調整。あんまり長いと変） */
	padding: 0px 0.5em;
    /*　背景と同じ色にしておけばOK */
	background-color: #ffffff;
}


/*　先頭文字の設定 */
h3 span::first-letter{
    /*後続文字との間隔 */
    margin-right: 0em;
    /* 一回り大きく */
	font-size: 1.5em;
    /* color: で先頭の文字色を変更可能 */
/*    color: #0D0D0D;*/
}

/*　タイトルの両端に破線 */
h3:before{
    position: absolute;
	top: 50%;
	content: '';
	display: inline-block;
    width: 100%;
    border-bottom: solid 1px #999893;
}

hr{
  display:block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px solid #999893;
}

hr.solid-margin{
  display:block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px solid #999893;
  margin: 1em 0em;
}

hr.double{
  display:block;
  width: 100%;
  height: 3px;
  border: 0;
  border-top: 3px double #696862;
}

hr.dotted {
  	width: 100%;
	height: 1px;
  	border: 0;
  	border-top: 1px dotted #999893;
}

hr.dashed{
	width: 100%;
	height: 1px;
  	border: 0;
  	border-top: 1px dashed #999893;
}

/* 点線（上下marginつき）*/
hr.dotted-margin {
  	width: 100%;
	height: 1px;
  	border: 0;
  	border-top: 1px dotted #999893;
	margin: 1em 0em;
}
/*　角丸背景グレー　*/
.corner-box-gray{
	display: block;
	background: #f7f7f6;
	padding: 0.5em 1em;
	margin: 0.5em 0em;
	border-radius: 2px;
}

/* ダイヤ（ひし形）表示 */
ul{
    display: inline-block;
    list-style-type: none!important; /*数字や丸を一旦消す*/
    margin: 0;
    padding: 0.1em 1em;
}

ul li {
    position: relative;
	margin-top: 0.25em;
	padding-left: 0.5em;
	margin-bottom: 0.25em;
}

ul li::before {
  display: block;
  content: '';
  position: absolute;
  top: 0.55em;
  left: -0.5em;
  width: 5px;
  height: 5px;
  /*　ダイヤの色 */
  background-color: #717B8D;
  border: solid 0.5px #717B8D;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ul.circle{
	display: inline-block;
    list-style-type: disc!important; /*数字や丸を一旦消す*/
	list-style-position: outside;
	margin-left: 0.5em;
}

ul.circle li{
	padding-left: 0em;
}

ul.circle li::before{
	background: transparent;
	border: none;
}

/* 番号付きリスト */
ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0px;
  margin: 3px 1px;
}

/*　リストアイテムスタイル記述 */
ol li{
  position: relative;
  /*　行間の間隔 */
  line-height: 1.6em;
  /*　間隔 */
  margin: 0px 5px 0.3em 20px;
  /*　数字との感覚 */    
  padding-left: 0.5em;
  /*　フォントサイズ */    
  font-size: 12px;
  /*　折り返し設定 */
  word-wrap: normal;
  /*　HTML内の改行も改行として扱う　*/
  white-space: pre-line;
}

ol li:first-child{
	margin-top: 0em;
}

ol li:before{
  /*　絶対位置 */
  position: absolute;
  /* 以下数字をつける */
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  /* 背景色 */
  background: #a35b5b;
  /*　フォントサイズ */
  font-size: 11px;
  /*　フォント */
  font-family: 'Cousine', monospace;
  /*　数字の位置微調整 */
  line-height: 1.5em;
  letter-spacing: 0px;
  font-weight: bold;
  /*　丸の大きさ */
  width: 16px;
  height: 16px;
  /*　数字真ん中寄せ */
  text-align: center;
  /*　数字の色　*/
  color: #ffffff;
  /*　丸み具合（数値によっては角丸にも） */
  border-radius: 50%;
  /* 丸の位置微調整 */
  top:0.15em;
  left: -20px;
}
/*　テキストボックスのスタイル */
input,input[type="text"],textarea{
	resize: horizontal;
  	padding-right:8px;
  	padding-left:8px;
	padding-bottom: 5px;
	padding-top: 5px;
  	margin: 0.5em 0em;
	font-family: "ヒラギノ角ゴ Pro" sans-serif;
	font-weight: normal;
	background-color:  #f7f7f6;
	border: solid 1px #D9D7D7;
		 appearance: none;
    -webkit-appearance: none;
	-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

input[type="submit"],
input[type="button"]{
    width: auto;
    height: auto;
	padding-bottom: 5px;
	padding-top: 5px;
    padding-left: 2em;
    padding-right: 2em;
	margin: 0em 0.5em;
	font-family: "ヒラギノ角ゴ Pro" sans-serif;
  	border: solid 1px #D9D7D7;
		 appearance: none;
    -webkit-appearance: none;
	-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
}

.center{
	text-align: center;
}

.right{
	text-align: right;
}

.margin-left-right{
	margin: 0em 1em;
}

.novel{	
	margin: 0em 0.8em;
	line-height: 1.5em;
	color:#333333;
	letter-spacing: 2px;
	font-size: 14px;
	font-family: 'Noto Serif JP', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	line-break: strict;
  	word-break: normal;
  	word-wrap: break-word;
  	overflow-wrap: anywhere;
	color:#333333;
}

ul.breadcrumb *, ul.breadcrumb *:after, ul.breadcrumb *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

ul.breadcrumb {
	margin: 0em 1em;
	padding: 0.2em 0.2em;
	color: #262626;
}

ul.breadcrumb a {
	text-decoration: none;
	color:#262626;
}

ul.breadcrumb ul.breadcrumbs {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

ul.breadcrumb li::after {
	content: "\0bb";
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	font-size: 1em;
	color: inherit;
	position: absolute;
	color: #666570;
	font-weight: bold; 
	font-family: "ヒラギノ角ゴ Pro";
	top: 50%;
	right: -1%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	background: transparent;
	border: none;
}

ul.breadcrumb li {
	display: inline-block;
	position: relative;
	padding-right: calc(12px + 8px);
	margin-right: 2px;
	color: #423A33;
	white-space:nowrap;
	margin-top: 0px;
	margin-bottom: 0px;
}

ul.breadcrumb li::before{
	background: transparent;
	border: none;
	-webkit-transform: translateY(100%);
	        transform: translateY(100%);
}

ul.breadcrumb li:first-child::before{
	content: "【　　";
	font-family: "ヒラギノ角ゴ Pro" sans-serif;
	font-weight: normal;
	top: -5px;
	margin-left: -1em;
}

ul.breadcrumb li:first-child{
	margin-left: 1em;
}

ul.breadcrumb li:empty {
	display: inline-block;
	position: absolute;
	margin-right: 0px;
	color: #262626;
	content: "";
}

.breadcrumb li:empty:after {
	content: "";
	width: 0em;
	height: 0em;
	text-align: center;
	color: #262626;
	background: transparent;
}

ul.breadcrumb li:last-child {
	content: '';
	margin-right: 0;
	padding-right: 0;
	color: #262626;
}

ul.breadcrumb li:last-child::after {
	content: "　　】";
	font-family: "ヒラギノ角ゴ Pro" sans-serif;
	font-weight: normal;
	margin-top: 1px;
}

ul.breadcrumb li:last-child::before{
	content: normal;
}.scroll_area  {
	display: inline-block;
	overflow: scroll;
	width:100%; 
	height:200px;
    background: #f7f7f6;
	border-radius: 2px;
	line-height:1.5em;
	text-align: left;
    margin-bottom: 0.5em;
	border: none;
}

/* スクロールエリア内のリストアイテム表示 */
.scroll_area ul{
	display: block;
    list-style-type: none!important;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

/* スクロールエリア内のリストアイテム設定 */
.scroll_area ul li {
    position: relative;
    /* アイテム間隔 */
    margin-bottom: 0.5em;
	margin-top: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: dotted 1px #D9D7D7;
    padding-left: 6em;
    padding-right: 1em;
    text-indent: -5.25em;
}

/*　スクロールエリア内のリストアイテム先頭の設定 */
.scroll_area ul li::before {
    /* ダイヤの位置微調整 */
	background: none;
	border: none;
		-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}

.scroll_area ul li:last-child{
    border-bottom: none;
}

/* table（一行に配置が違うテキストを置きたいとき用） */
.table{
	width: 100%;
	display: table;
}

/*　左寄せ */
.table-left{
	display: table-cell;
	text-align: left;
    vertical-align: middle;
}

/*　右寄せ　*/
.table-right{
	display: table-cell;
	text-align: right;
    vertical-align: middle;
}

.table-right form{
	float: right;
	margin: 0 0 0 auto;
	display: table-cell;
	vertical-align: middle;
}

.grid{
    display: grid;
	justify-content: center;
	align-content: space-around;
    margin-left: 2em;
    margin-right: 2em;
}

.grid a{
	width: 2.25em;
	text-align: center;
	margin-left: 0.3em;
	margin-right: 0.3em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	padding-left: 0.2em;
	padding-right: 0.2em;
	
}
ul.novel-list li{
    margin-top: 1em;
    margin-bottom: 1em;
}

ul.novel-list li:first-child{
	margin-top: 0.25em;
}

ul.novel-list li:last-child{
    margin-bottom: 0.25em;
}

.novel-paging{
	display: grid;
	grid-template-columns: 1fr 4em 1fr;
}

.novel-paging span.center{
	text-align: center;
}

.novel-paging span.left{
	text-align: left;
}

.novel-paging span.right{
	text-align: right;
}
.novel-paging a{
	padding-left: 0.5em;
	padding-right: 0.5em;
}