@charset "utf-8";
/* CSS Document */
/*PCinline*/
@media only screen and (min-width:900px){
/*最低900ピクセル幅のブラウザに適用*/

#container{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	padding-left:40px;padding-right:40px;
}
/*containerというidは幅900ピクセル 左右のマージン自動（＝センター寄せ） 本文から端まで左右４０ピクセル余白あり*/

header{
	width:100%;
}
/*headerは見ているブラウザの幅いっぱいにする。*/

div.bread ul li{
	display:inline;
	width:500px;
	height:1em;
}
/*breadというdiv内のリストの項目は横並びで幅500 高さは１em*/

nav.sidebar{
	width:34%;
	float:left;
}	
/*sidebarというnavは３４％で左へフロート*/

nav.sidebar li{
	display:list-item;
} 		
/*sidebarというnavの中の項目はリストアイテム扱い*/

article{
	width:64%;
	float:right;
}		
/*articleは64％で右へフロート*/

/*#concert{
	width:100%;
}
conscertというidのところは幅１００％
↑これはnovels.cssへ*/

footer{
	width:100%;
	clear:both;		
	border-top:solid 1px #666666;		
	margin-top:10px;
}
/*footerは幅１００％　フロートは解除 上に1pxのグレーの線を引く。 上に10pxの余白あり*/
}
/*タブレットinline*/ 
@media only screen and (min-width:600px) and (max-width:899px){
/*以下は600～899幅のブラウザに適用*/
#container{
	width:100%;
	/*margin-left:auto;
	margin-right:auto;*/
	padding-left:10px;
	padding-right:10px;
	}			
/*「containerというidを持つ要素は幅100%、左端から本文まで１０px右端から　以下同
一度幅６００に設定したが、インラインのサイドバーや大きな字の長いタイトルが読みにくいので元に戻した。*/

header{
	width:100%;
}
/*headerは見ているブラウザの幅いっぱい*/

div.bread ul li{
	display:inline;
	height:1em;
} 	
/*breadというdiv内のリストの項目は横並びで高さ１em*/

nav.sidebar{
	width:100%;
	border-top:solid 1px #666666;
	border-bottom:solid 1px #666666;
	padding:0px;
	float:none;
}
/*sidebar というnavは幅いっぱい 　上下に1pxのグレーの線を引く 本文から端まで余白なし。フロートなし*/

nav.sidebar ul{
	margin-left:auto;
	margin-right:auto;
}
/*sidebarというnav内のリストは左右マージン自動*/

nav.sidebar ul li{
	font-size:100%;
	display:inline;
	padding-right:25px;
}
/*同リスト内の項目は 字は１００％の大きさ横並びで右に25pxあける ★この25ピクセルは、各項目が横並びなので、詰まりをふせぐためにつけてある。*/

article{
	width:600px;
	margin-left:auto;
	margin-right:auto;
}		
/*articleは幅１００％ 左右のマージン自動（＝センター寄せ*/

.clearfloat{
	clear:both;
	text-align:right;
	}
/*フロート解除、文は右寄り*/

footer{
	width:100%;
	border-top:solid 1px #666666;
}			
/*footerは幅いっぱい、 上に1pxのグレーの線を引く*/
}

/*スマホinline*/
@media only screen and (max-width:599px){	
/*以下は599px未満のブラウザに適用される。*/

#container{
	width:100%;
	padding-left:5px;
	padding-right:5px;
	margin:0;
}
/*containerというidは、ブラウザの幅いっぱいで、本文の端から左右に５pxづつの余白があるが、端から外には余白はない。*/

header{
	width:100%;
}
/*headerは幅１００％*/

.title{
	display:none;
}
/*titleというクラスは見せない。*/

div.bread ul{
	padding:0;
	margin:0;
}	
/*breadというdivのリストは余白なし*/

div.bread ul li{
	display:block;
	margin-left:0;
	margin-bottom:20px;
	text-indent:1em;
	width:300px;
}
/*同リストの項目はblock表示 左余白なし、下に20pxの余白を取る。テキストは左から１emひっこめて、幅は300px*/

div .bread ul li:last-child{
	font-weight:700;
	font-size:110%;
	}
/*「breadリストの最後の項目は太字、大きさを110％にする」*/

nav.sidebar{width:100%;
	border-top:solid 1px #666666;
	border-bottom:solid 1px #666666;
	margin-left:0;
	margin-right:auto;
	float:none;
}
/*sidebarというnavは幅はブラウザの幅いっぱい。上下に1pxのグレーの線を引く。左余白なし、右余白自動　フロートなし*/

nav.sidebar ul li{
	margin-left:0;
	margin-bottom:20px;
	text-indent:1em;
	display:block;
}
/*sidebarというnavの中のリスト項目は左余白なし 下に20pxの余白あり、テキストは左から１em下げる。*/

article{
	width:100%;
}				
/*articleはブラウザの幅いっぱい*/

.clearfloat{
	clear:both;
	text-align:right;
}
/*フロート解除、文は右寄り*/

footer{
	width:100%;
	clear:both;border-top:solid 1px #666666;
}
/*footerはブラウザの幅いっぱい。フロートは解除、上に1pxのグレーの線を引く。*/
}