body {font-size:12pt; margin:0; padding:0; min-height:100vh; background-color: #004;}
h1, h2, h3, h4, button {font-size:12pt; margin:0; padding:0}
article,div,p,section,ol,ul,li {margin:0; padding:0}
ul {list-style:none}
rt {font-size:7pt}
.att{color:red; font-size:92%;}
.btm-s {margin-bottom:1em}
.top-s {margin-top:1em}
.top-sh {margin-top:0.5em}
.btm-b {border-bottom:2px solid #ccf;margin-bottom:1em; margin-top:1em;}
.btm-b1 {border-bottom:1px solid #88f;margin-bottom:0.5em;}

.gbtn {background-color: #ddf; border:1px solid #99e; border-radius:5px; color:#242424; width:222px; height:38px}
.gbtn:hover {background-color: #aaf;}
.btns {display: flex;}
.btns wbr {display: inline-block; width:1em}
@media screen and (min-width:421px) {
	.btns {flex-direction: row; justify-content: space-between;}
}
@media screen and (max-width:420px) {
	.btns {flex-direction: column;}
	.btns button {width:100%}
}

table.bdrtbl {border-collapse:collapse; margin-bottom: 1em;}
.bdrtbl th, .bdrtbl td{border:1px solid #aaa; padding: 2px 6px}
.gi {width:calc(100% - 8px); height: 24px; outline:0; border-top:0; border-left:0; border-right:0; border-bottom:1px solid #666; background-color: #fffff0;}
.gi:focus {background-color: #f3f3ff;}
textarea{background-color: #fffff0;}
textarea:focus{background-color: #f3f3ff;}
.h {display:none}

div.dlg {position:absolute; background-color: #fff; box-shadow:5px 5px 8px #8888; display: flex; flex-direction: column; white-space: pre-line;}
div.dlg > header {background-color: #eee; padding:4px;}
div.dlg > div {padding:1em 4px;}
div.dlg > footer {height:3em; border-top:1px solid #878; display: flex; align-items: center; justify-content: flex-end;}
div.dlg > footer button {background-color: transparent; border: 0; padding:4px 1em; margin:0 1em;}
div.dlg > footer button:hover {background-color: #eef;}
button.img {border:0; margin:0; padding:0; width:20px; border-radius: 3px; background-color: transparent;}
button.img:hover { background-color: #e3e3ff;}


/* 上メニュー */
.ph {background-color:#fff; border-bottom:3px solid #805499; margin:0; padding:0; width:100%;}
.ph > div {margin:0; padding:8px 16px 0 16px; display:flex}
.phm {display:flex; flex-direction:row}
.phm a {border:0; color:black; text-decoration:none; height:32px; margin:0; padding:4px 8px; background-color:transparent;}
.phm > li {display:flex; align-items:center}
.phm > li.bell {width:40px; height:40px;}
.phm > li.bell i {background-size: 24px 24px; width:24px; height:24px;}
.phm > li.bell img {width:24px; height:24px;}
.phm > li.signup {background-color:#8080ff}
.phm > li.signup > a {color:#fff}
.phm > li.signin {background-color:#cdefff}
.phm > li.mypage {background-color:#eef}
.phm > li.x {border-top-left-radius:6px; border-top-right-radius:6px}
.phm > li.x a {font-weight:bold}
.phm > li.h {display:none}

/* 本文とサイドバー */
.bd {background-color:#fff; display:flex; min-height:calc(100vh - 192px);}
main > h1 {margin-top:16px}
main a,
.subbar a {color: #000;text-decoration: none;}

/* 右のサイドバー */
div.con a {color:#444; display:flex; align-items:center}
div.con button {color:#444; background-color: transparent; border: 0; display: block}
div.con {color:#444}
.subbar div.ads-pc {margin:8px 0; padding:4px 8px; background-color:#ddd}
.subbar header {font-weight:bold; margin:16px 8px 0 6px}
.subbar ul {margin:12px 0 0 12px}
.subbar li {margin:0 8px 8px 0; padding:2px 4px; border:1px solid #ddd}
ul.t {display:flex; flex-direction:row; flex-wrap:wrap;}
ul.t li {flex-grow:1; min-width:104px}
i.icon {height:20px; width:20px}
i.icon32 {height:32px; width:32px}

.bell > i {display:inline-block; background:url("../img/i-bell.svg") no-repeat;}
.new-novel > i {display:inline-block; background:url("../img/new-doc.svg") no-repeat;}
.account > i {display:inline-block; background:url("../img/i-account.svg") no-repeat;}
.signout > i {display:inline-block; background:url("../img/i-signout.svg") no-repeat;}
.series > i {display:inline-block; background:url("../img/i-series.svg") no-repeat;}
.group > i {display:inline-block; background:url("../img/i-group.svg") no-repeat;}
.withdrawal > i {display:inline-block; background:url("../img/i-withdrawal.svg") no-repeat;}
.member-accept > i {display:inline-block; background:url("../img/i-member-accept.svg") no-repeat;}

@media screen and (min-width:421px) {
	.ph {min-width:768px; height:56px}
	.ph > div {flex-direction:row; height:48px; justify-content:space-between}
	.ph > div img {height:48px}
	.phm {height:48px}
	.bd {min-width:768px; width:100%;flex-direction:row}
	.subbar {min-width:256px; width:256px; height:100%; min-height:75vh}
    main {padding:0 16px; min-width:480px; width:calc(100% - 288px)}
}

@media screen and (max-width:420px) {
	.ph > div {flex-direction:column; padding:0}
	.ph > div img {width:calc(100vw - 32px)}
	.subbar {width:100%}
	.subbar ul li {height:24px}
    .bd {flex-direction:column}
    main {padding:0 6px; min-width:calc(100% - 12px); width:calc(100% - 12px)}
}
@media screen and (max-width:420px) and (min-width:361px) {
	.ph > div {font-size:11pt}
}
@media screen and (max-width:360px) {
	.ph {min-width:320px}
	.ph > div {font-size:10pt}
}
/* フッター */
.pf {background-color:#004;color:#f0f0f0;height:128px;width:100%;}
.pf > ul {display:flex; flex-direction: row; justify-content: center;}
.pf > ul > li {margin: 0.5em 1em}
.pf a { color:#ccd; font-size:9pt; text-decoration: none}
.pf .f-c > a {display:flex; justify-content: center; width:16em; margin:1em auto;}
.pf p.copy {font-size:8pt;padding:4px;color:#99b;text-align:center;}

	
/* 小説一覧用 */
.toc {display:flex; flex-wrap:wrap; column-gap: 8px;}
.nls > li {margin-bottom:1em;padding:4px 8px;border-radius:4px;box-shadow:1px 1px 8px #3333;}
.toc > li:hover {background-color: #fafaff;}
@media (min-width:3369px) {
	.toc li {width:calc(100% / 6 - 24px)}
}
@media (max-width:3368px) and (min-width:2753px) {
	.toc li {width:calc(20% - 24px)}
}
@media (max-width:2752px) and (min-width:2137px) {
	.toc li {width:calc(25% - 24px)}
}
@media (max-width:2136px) and (min-width:1521px) {
	.toc li {width:calc(100% / 3 - 24px)}
}
@media (max-width:1520px) and (min-width:897px)  {
	.toc li {width:calc(50% - 24px)}
}
@media (max-width:896px) and (min-width:769px)  {
	.toc li {width:calc(100% - 24px)}
}
@media (max-width:768px) and (min-width:421px) {
	.toc li {width:464px}
}
@media (max-width:420px) {
	.toc li {width:calc(100% - 18px)}
}
ul.toc a {color:#333; display:flex; flex-direction:column;}
.caption {border-bottom:1px solid #ccf; font-weight:bold; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; margin-bottom: 2px;}
.iabst {line-height:1.25em; height:6.25em; margin-top:4px; overflow: hidden;}
.tags span {background-color:#f0f0f0; border:1px solid #ccc; border-radius:8px; font-size:90%; padding:0.25em 0.5em; display:inline-block;}




/* 検索 */
.search {display: flex; flex-direction: row;}
.search > div { width:calc(100% - 248px); margin-left:8px}
.sopt .pane { border: 1px solid #ddd; margin-bottom:1em; padding: 3px; }
.sopt .pane > div { margin: 0 0.5em 0 0.5em;}
.sopt input[type=text] {width:8em;}
.sopt li {margin: 0; list-style: none; margin-bottom:1em;}
@media screen and (min-width:800px) {
	#search_option1 {display:block; width:240px; margin-top:1.5em;}
	#search_option2 {display:none;}
	.search > div { width:calc(100% - 248px); margin-left:8px}
}
@media screen and (max-width:799px) {
	#search_option1 {display:none}
	#search_option2 {display:block; margin-top:0.75em}
	.search > div { width:100%}
}
#search_words {font-size:20pt; width:100%; height: 40px; outline:0; border-top:0; border-left:0; border-right:0; border-bottom:1px solid #666; background-color: #fffff0;}
#search_words:focus {background-color: #f3f3ff;}

.btn-search {margin-top:0.5em; width:100%; display: flex; justify-content: center; align-items: center;}
.btn-search:before {content: url("../img/i-search.svg");}
.iclose {display: block; width:16px; height:16px; background:url('../img/i-close.svg')}
.iopen {display: block; width:16px; height:16px; background:url('../img/i-open.svg')}
#search_option2 > div:nth-child(1) {display: flex; flex-direction: row; justify-content: space-between;}


/* 小説目次ページ */
.nov-cap {padding: 0.75em 1em; font-size:1.5em; background-color: #f0f3f5; text-align: center; margin-bottom: 1em; border:1px solid #eeeef0;}
.ser-cap {padding: 0.75em 1em; font-size:1.5em; background-color: #f3f5f0; text-align: center; margin-bottom: 1em; border:1px solid #eeeef0;}
.grp-cap {padding: 0.75em 1em; font-size:1.5em; background-color: #f5f0f3; text-align: center; margin-bottom: 1em; border:1px solid #eeeef0;}
.nov-inf {display:flex; flex-wrap:wrap}
.nov-inf-b {max-width:480px; width:100%}
.nov-inf .btns {flex-grow:1;}
.srs {color:#555; margin-top:1em; font-size:92%;}
.srs a{color:#55c;}

.gbtn.first {background-color:#77f; border-color:#77f; color:#fff;}
.gbtn.first:hover {background-color:#99e}
.gbtn.last {background-color:#33f; border-color:#33f; color:#fff;}
.gbtn.last:hover {background-color:#55e;}
.gbtn.reject {background-color:#a00; border-color:#f33; color:#fff;}
.gbtn.reject:hover {background-color:#d11;}

.abst {border:1px dashed #77f; padding:1em;font-family:'游明朝', 'Yu Mincho', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pr6N', 'ヒラギノ角ゴ Pr6N', 'Hiragino Kaku Gothic Pr6N', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ StdN', 'Hiragino Kaku Gothic StdN', 'メイリオ', 'Meiryo', sans-serif}
.i0 {text-indent:0}
.i1 {text-indent:0.5em}
.i2 {text-indent:1em}
.i3 {text-indent:1.5em}
.i4 {text-indent:2em}
.i5 {text-indent:2.5em}
.i6 {text-indent:3em}
.i7 {text-indent:3.5em}
.i8 {text-indent:4em}
.i9 {text-indent:4.5em}
.s0 {margin-top:0;}
.s1 {margin-top:1em}
.s2 {margin-top:2em}
.s3 {margin-top:3em}
.s4 {margin-top:4em}
.s5 {margin-top:5em}
.s6 {margin-top:6em}
.s7 {margin-top:7em}
.s8 {margin-top:8em}
.s9 {margin-top:9em}
.em-sesame {text-emphasis-style:filled sesame}
.sns-btn {display: inline-flex; align-items: center; padding:4px 8px; border-radius: 14px; background-color: #000; color:#fff; font-size:14px;}
.sns-btn i {width:20px; height: 20px; display: inline-flex; justify-content: center; align-items: center;}
.sns-btn img {width:18px; height: 18px}

.idx {max-height:200em; overflow-y:scroll; background-color:#f8f8ff; margin-bottom:1em}
.idx h3 {background-color:#88f; color:#fff; padding:3px 1em; margin-bottom:0.25em; width:calc(100% - 2em)}
.idx li {background-color:#fff}
.epi .a {
	display:flex; flex-direction:row; align-items:center;
	color:#000; text-decoration:none;
	border:1px solid #ccf;
	padding:3px 4px;
	margin-bottom:0.25em;
	width:calc(100% - 12px)
}
.epi > .a > img {display:block; width:64px; height:48px}
.epi1 {display:flex; flex-direction:row; flex-wrap:wrap; width:calc(100% - 72px); padding-left:8px; justify-content:space-between}
.e-cap {max-height:3.75em; line-height:1.25em; text-overflow:ellipsis; overflow:hidden; white-space:normal; word-break:normal; line-break:normal; width: 100%}
.edit .e-cap{font-weight:bold}
.epi2, .epi3 {color: #444; font-size:91%}

.edit .epi1 {width:100%}
@media screen and (min-width:816px) {
	div.epi2 {width:15em}
	div.epi3 {text-align:right}
}
@media screen and (max-width:815px) {
div.epi2 {width:100%}
div.epi3 {width:100%}
}
@media screen and (min-width:1280px) {
	div.epia {width:360px}
	div.epib {width:512px; text-align:right}
}
@media screen and (max-width:1279px) {
	div.epia {width:100%}
	div.epib {width:100%}
}
.hearts,
.h-break,
.impressions {padding-left:0; vertical-align: bottom;}
.hearts:before {content:url('../img/heart0.svg'); vertical-align:middle}
.h-break:before {content:url('../img/heartbreak.svg'); vertical-align:middle}
.impressions:before {content:url('../img/impression0.svg'); vertical-align:middle}
.no-pub {color:red; font-weight:bold}


/* 小説登録フォーム */
.frm dt {border-bottom:3px solid; margin-bottom:1em; width:12em; border-image: linear-gradient(to right, #ddf, #fff) 1;}
.radio {display:flex; flex-wrap:wrap}
.radio label {min-width:128px}

textarea.detail {width:calc(100% - 24px); height:20em; padding:10px}
.enter-button {margin-bottom:1.25em;}
.enter-button button {background-color:#ddd; border:1px solid silver; border-radius:6px; width:100%; height:32px}
.enter-button button:hover {background-color:#bbb}
#grpsel {border:1px solid #aaa; margin:4px 0; overflow-y: scroll; display: flex; flex-direction: column; max-height:6em;}
#grpsel label {display: inline-block; margin:4px 0;}
.edit-menu {background-color: #eee;}
.edit-menu-bulk {position:absolute; border-width:2px; border-style: outset; margin:1px 0 0 3px; display: none; flex-direction: column; background-color: #e0e0e0;}
.edit-menu li button{border: 0; background-color: #eee; display: block; padding:3px; width: 100%; text-align: left;}
.edit-menu li button:hover {background-color: #ddd;}
.edit-menu li p:hover {background-color: #ddd;}

@media screen and (min-width:513px) {
	.frm dd {margin-bottom:1.5em;}
}
@media screen and (max-width:512px) {
	.frm dd {margin-left:0; margin-bottom:1.5em;}
}


/* グループ */
.member li {background-color: #fefeff; margin-bottom:1em; padding:4px 8px; border:1px solid #ddf; border-radius:4px;}
.member li:hover {background-color: #fafaff}


/* シリーズ編集 */
.worklist {display: flex; flex-direction: column; }
.worklist > li {margin-bottom: 8px; padding:4px; display: flex; align-items: center; justify-content: space-between; border-bottom:2px solid #fff;}
.worklist a {text-decoration: none; width:100%}
.worklist > li:hover {border-bottom:2px solid #ccf;}

#nseri{border-bottom:2px solid #ccf; padding-bottom:3px; }
#nseri > input {border: 0; font-size:110%; outline: none; background-color: #ffc; padding:3px;}
#nvlsel {
	max-height: 16em;
	overflow-y: auto;
	margin-top:1em;
}
#nvlsel > button {border:0; padding:3px;display: block; margin-bottom:1em; width:100%; text-align: left; background-color: transparent;}
#nvlsel > button:hover {background-color: #ddf;}
@media screen and (min-width:385px) {
	#nvlsel {width:376px;}
}
@media screen and (max-width:384px) {
	#nvlsel {width:calc(100vw - 8px);}
}


/* サインアップ */
.signinup h1 {font-size:150%; line-height:48px; height:48px; display: flex; align-items: flex-start; justify-content: space-between;}
.signinup p {margin-top:1em}
.signinup a {color:blue; text-decoration: underline;}
.signinup button {padding:1em; width:calc(100%)}
.signinup > div {display:flex; flex-direction:column; align-content:space-between; justify-content:space-between }
.signinup > div.h {display:none}
.scd > input[type=text] {width: 30px; height:30px; font-size:20px; text-align:center}
.idpw {display: flex; flex-wrap: wrap; width: 100%;}
@media screen and (min-width:421px) {
	.idpw dt {width:160px; margin-top:1em;}
	.idpw dd {width:calc(100% - 160px); margin:1em 0 0 0;}
	.idpw dd > input{width:208px}
}
@media screen and (max-width:420px) {
	.idpw dd > input{width:20em}
}


/* 作者ページ */
.author { margin-bottom:1em; border-bottom:2px solid; border-image: linear-gradient(to right, #ddf, #fff, #fff, #fff) 1; font-size:125%}
.column {margin-bottom:1em; border-radius: 8px; box-shadow:1px 1px 8px #3333;}
.column h2 {border-bottom: 1px solid #cce; padding:8px; margin-bottom:1em;}



/*アクセス数*/
.access { border-collapse:collapse; margin-bottom: 1em;}
.access thead {background-color: #cce;}
.access tbody td,
.access tbody th { border:1px solid #aaa}
.access tbody th {padding:0; text-align: left;}
.access tbody th button {display:block; width:100%; border:0; background: transparent; margin:0}
.access tr > td:nth-child(2) { text-align:right; min-width: 32px; border-right-width: 0;}
.access tr > td:nth-child(4) { text-align:right; min-width: 32px; border-right-width: 0;}
.access span { height: 0.75em; display: block; background-color: #88f;}

@media screen and (min-width:421px) {
	.access tr > td:nth-child(3),
	.access tr > td:nth-child(5) { width: 200px; border-left-width: 0;}
}

@media screen and (max-width:420px) {
	.access tr > td:nth-child(3),
	.access tr > td:nth-child(5) { width: 1px; border-left-width: 0;}
	.access tr > td:nth-child(3) span,
	.access tr > td:nth-child(5) span{display: none}
}

/* 利用規約 */
.legal {margin:1em}
.legal p {margin-left:0.5em;}
.legal li {margin-left:2em}
.legal li > ol {margin-top:0.5em}
.legal h1 {margin-top:1em}

/* 操作ガイド */
.guide ol {margin-left:2em;}
.guide p {margin-bottom:2em;}
.guide img {margin-top:8px; box-shadow:2px 2px 6px #7777;}