@charset "utf-8";
/* CSS Document */
/*PCnonav*/
@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;
}
/*「navにあるsidebarは幅３４％、左フロート」*/
nav.sidebar ul li{
	margin-bottom:15px;
}/*「navにあるsidebarのリストの項目は下余白15px」*/			
article{
	width:64%;
	float:right;
	}
/*「articleは幅64％、右フロート」*/

footer{	width:100%;				
	clear:both;				
	margin-top:10px;
	}			
/*「footerは１００％の幅フロート解除 上余白は10px」*/
}

/*タブレットnonav*/
@media only screen and (min-width:600px) and (max-width:899px){
/*以下は600～899幅のブラウザに適用*/
#container {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
/*「containerというidを持つ要素は幅600ピクセル
左側の余白はオート右側の余白はオート二つ合わせてセンター寄せ*/

header{
	width:100%;				
	border-bottom:solid 1px #666666;
}
/*「headerは１００％の幅 ヘッダの下に１ピクセルのグレーの線を引く」*/			
div.bread ul li{	
	display:inline;
	height:1em;
	}
 /*「breadというdivのなかのリストの項目は横並び高さは１em」*/		
nav.sidebar{	
	display:none;
} 					
/*「sidebarというnavは見せない」*/
article{	
	width:100%;
}				
/*「articleの幅は１００％」*/
/*.title{
	line-height:1.4em;
}
titleというクラスの中では、行間1.4em★titleというクラスの見出し１は、字が大きいので、
長いタイトル＋サブタイトルが折り返すと行間狭いと読みにくいので
↑はtext.cssへ移動*/
footer{
	width:100%;
	/*margin-left:auto;
	margin-right:auto;*/
	}
/*「footerは幅100％」*/
}

/*スマホnonav*/
@media only screen and (max-width:599px){
/*「以下のスタイルは599px未満の幅のブラウザに適応」*/
#container{
	width:100%;				
	padding-left:5px;
	padding-right:5px;
}
/*「containerは幅１００％端から本文まで左右とも５pxの余白あり」*/		
header{	width:100%;
border-bottom:solid 1px #666666;
}
/*「headerは余白も含めてブラウザの幅いっぱいにする」headerの下に１ピクセルのグレーの線を引く*/			
.title{	
	display:none;
	}
/*titleというクラスは見せない」★Titleは作品名につけていた。それを非表示でbread-listの一番下の項目で作品名の代用とした。*/	
div.bread ul{
	padding:0;
	margin:0;
}
/*breadというリストは余白なし*/
div.bread ul li{
	display:block;			
	margin-left:0;
	text-indent:1em;		
	width:300px;
	margin-bottom:20px;
}
/*「breadリストの項目はブロック表示（＝縦並び）余白なし、冒頭から１em引込み（＝狭画面なら中央寄り）幅３００px 下に２０pxの余白をとる」*/

div .bread ul li:last-child{
	font-weight:700;
	font-size:110%;
	}
/*「breadリストの最後の項目は太字、大きさを110％にする」*/
nav.sidebar{
	display:none;
}
/*「sidebarというnavは見せない」*/	
article{
	width:100%;
}
/*「articleは幅１００％」*/			
footer{
	width:100%;
 }						
/*「footerは100%の幅」*/
}