h1,h2,h3,h4 {font-family:HG丸ｺﾞｼｯｸM-PRO,"ＦＡ ぽぽる";}
h2 {background:#fffbdf; border:#ffddbb 3px double;} /*色変え*/
h3 {background:#ffffee; padding:4px; border:#ddddbb 1px solid;}
table,td,textarea {max-width:99%;}
.state {background:#eeffdd; font-weight:400;} /*色変え*/
small {color:#888888;}
address {text-align:right; font-size:xx-small;}
td {text-align:center;}
p,dd {font-family:"ＦＡ ぽぽる",HG丸ｺﾞｼｯｸM-PRO}
p,dd {line-height:140%;}
.list{line-height:100%;}
.jlist {line-height:130%;}
.jlist a,.jlist em {background:#ffffff;}
p a {white-space:nowrap;}
a rt {text-decoration:none;}
a:active {position:relative;top:1px;left:1px;}
em {white-space:nowrap; font-style:normal; color:#990000;}
table {font-family:MS UI Gothic;}
td.s{font-size:smaller;}
td,input{word-break:break-all;} /*p削除、地の文は禁則させたい*/


/*float挿絵が大きくなりすぎないように*/
p img[align] {max-width:66%; height:auto;}


/*数値的な内容のセルを改行禁止に*/
td:first-child, /*Noセル*/
th + td + td, /*メッセージ数セル*/
td:last-child, /*更新日時セル*/
#sorter td:nth-child(2), /*物語状態*/
#sorter td:nth-child(5), /*物語話数*/
#sorter td:nth-child(6) /*物語感想*/
{white-space:nowrap;}

/*------↓スマホ横の時用スタイル↓-------*/
@media (max-width: 720px) {

	/*テーブルを解除して、gridでセルを2行に並べる
	2行目は一番左に空白をフレックスで入れて、左寄せっぽくする
	1行目｜No.とタイトル(全幅)｜
	2行目｜空白(フレックス)｜テーマを作った人(最大固定)｜メッセージ数(固定幅)｜更新日時(最小固定)｜*/
	table, tbody  {
		display:block;
		width:100%;
	}
	tr {
		display: grid;
		grid:auto auto / 1fr minmax(auto, 7rem) 2rem minmax(7rem, max-content);
		align-items:center;
	}
	td, th {
		box-sizing:border-box;
		padding:1px 0;
		line-height:100%;
	}
	table,td {max-width:100%;}

	/*Noセル*/
	td:first-child {
		grid-area:1/1/2/5;
		width:2.2rem;
	}

	/*テーマセル*/
	th,
	td:nth-child(2) {
		grid-area:1/1/2/5;
		text-align:left;
		margin-left:2.2rem;
	}

	/*テーマを作った人セル*/
	td:nth-child(3) {
		grid-column:2;
	}

	/*メッセージ数セル*/
	th + td + td {
	}
	tr:first-child td:nth-child(4) {
		grid-column:3/5;
	}


	/*物語テーブル*/
	#sorter tr {
		grid:auto auto / 1fr minmax(auto, 8.4rem) 2.6rem 2.6rem minmax(7rem, max-content);
	}
	/*物語Noセル*/
	#sorter td:first-child {
		grid-area:1/1/2/6;
		width:2.2rem;
	}
	/*物語状態セル*/
	#sorter td:nth-child(2) {
		grid-area:1/1/2/6;
		width:2.2rem;
		margin-left:2.2rem;
		text-align:center;
	}
	/*物語タイトルセル*/
	#sorter th,
	#sorter td:nth-child(3){
		grid-area:1/1/2/6;
		margin-left:4.4rem;
		text-align:left;
	}
	/*物語作者セル*/
	#sorter td:nth-child(4) {
		grid-column:2;
	}
}
/*------↑スマホ横の時用スタイル終わり↑------*/


/*------↓スマホ縦の時用スタイル↓------*/
@media (max-width: 420px) {
	h1 img {max-width:70%; height:auto; margin:0;}

	tr {margin:0.5rem 0;} /*詰め詰めだと見づらかったので各行にmargin追加*/
	#sorter tr:first-child {margin:0.25rem 0;}
	#sorter tr:first-child td {padding:0.25rem 0;} /*物語のソートの見出し押しやすく広げる*/
	#sorter tr:nth-child(n+2) {padding:0.25rem 0; margin:0;} /*物語のborder真ん中に来てほしい*/
}
/*------↑スマホ縦の時用スタイル終わり↑------*/