@charset "utf-8";


/* ============================================
					reset
============================================ */
*{
margin:0px;
padding:0px;
}

/* ============================================
					bodyの壁紙
============================================ */
body{
	background-image:url(../bg_wall1.png);
	background-size:auto;
}

/* ============================================
					zentai
============================================ */
div#zentai{
width:auto;
min-width:1012px;
height:auto;
/* border:solid 3px red; */

}

/* ============================================
					wrap
============================================ */
div#wrap{
width:1002px; /* 中央寄せに必要 */
height:auto;
margin:auto; /* 中央寄せに必要 */
/* border:solid 3px blue; */ 
}


/* /////////////  ル　ビ /////////////  */
ruby rt{
font-size:70%;
}



/* ============================================
					header
============================================ */
div#header{
	height: 200px;
	width: auto;
/* 	border: thin solid #00FF00; */
	}

div#header img{
	height: 200px;
	width: auto;
/* 	border: thin solid #00FF00; */
	}





/* ============================================
					main_menu
============================================ */
#main_menu_sp{
	display:none;
}


div#main_menu{
	height: 30px;
	width: 1002px;
/* 	border: thin solid #00FFFF; */
	}
		
/* ============================================
					contents
============================================ */
div#contents{
	width:1002px;
	height:auto;
	margin:10px auto 0px auto;
	background-color:white;
/* 	border: thin solid red; */
}

#main_contents{
margin-top:20px;
background-color:white;
height:1800px;
display:table;
}


h2{
text-align:center;
}



/* //////////// story.html //////////// */
div#story{
width:900px;
height:535px;
text-align:left;
margin:0px auto 50px auto;
line-height:30px;
text-indent:1em;
font-size:110%;
}

.kara_div{
clear:both;
}


/* //////////// character.html //////////// */

/* floatやinline-blockで作成した場合、全ての要素で単位を「％」に指定しないと「段落ち」する。
しかし幾つかのコンテンツの横幅を固定化させたいケースもある。こんな時に使うのが、「table-cell」。
今回、safariのみキャラクターベージが段落ちするので、下記の１と３を設定した。
1.親要素に「display: table」を設定
2.固定化させる要素に「width:ピクセル幅」を設定
3.その他の要素に「display: table-cell」を設定

 */
table#character{
width:490px;
height:400px;
margin:10px auto 5px 7px ;
border:solid 1px silver;
float:left;
background-color:white;
display:table-cell;
padding-top:40px;
}

table#character img{
margin-left:20px;
}

table#character ul{
margin-left:20px;

}

table#character li{
padding-top:20px;
line-height:30px;

}


td#rumi{
width:310px; /* liの入ったtdの幅調整！　上のリスト行頭の「・」と揃える為。 */
/* border: thin solid red; */
}

td#rumi ul{
padding-bottom:65px; /* 横のリストとの高さを合わせる為。 */

}

img#otsukisama_pic{
	display:none;
}


td#otsukisama{
background-image: url(../character/otsukisama.png);
background-repeat:no-repeat;
height:242px;
margin-bottom:0px;

}

td#otsukisama ul{
margin-left:230px; /* リスト文字を左側配置 */
}

td#otsukisama li#top, li#bottom{
list-style:none; /* リスト行数調整 余分な行のマーカーを非表示 */
}

td#otsukisama li{

padding-top:40px;
}



#character td#kobutsu {
	width:auto;
	padding-left:30px;
}
	



/* //////////// sonota.html //////////// */
#main_contents_sonota{
margin-top:20px;
text-align:center;
height:auto;
font-size:60%;
}

#main_contents_sonota img{
/*margin-bottom:30px;  その他ページの画像下の間隔 */
}


div.retsu1{
width:300px;
height:auto;
margin-left:30px;
float:left;
font-size:120%;
/* border:solid 1px red; */
}

div.retsu1 div{
margin-bottom:50px;
}
	
div.retsu1 img{
width:300px;
height:auto;
/* border:solid 1px blue; */
}

div.retsu2{
width:300px;
height:auto;
margin-left:20px;
float:left;
font-size:120%;
/* border:solid 1px red; */
}

div.retsu2 div{
margin-bottom:50px;
/* border:solid 1px blue; */
}

div.retsu2 img{
width:300px;
height:auto;
/* border:solid 1px blue; */
}

div.youtube{
width:300px;
height:auto;
margin-right:30px;
float:right;
font-size:120%;
/* border:solid 1px red; */
}


div.youtube div{
width:300px;
height:auto;
margin-top:0px;
margin-bottom:50px;
float:right;
/* border:solid 1px red; */
}

div.youtube img{
width:300px;
height:auto;
margin-left:0px;
float:left;
margin-bottom:2px;
/* border:solid 1px blue; */
}






/* //////////// otoiawase.html //////////// */
div#mail{
width:700px;
height:274px;
margin:30px auto 30px auto;
text-align:center;
}

div#mail span{
font-size:105%;
background-color:#FFFFCC;
}




/* //////////// site_map.html //////////// */
#main_contents_site_map{
margin-top:20px;
text-align:center;
height:auto;
font-size:80%;
}


#main_contents_site_map img{
		padding-top:0px;
	vertical-align:middle;

}


#main_contents_site_map h2{
	display:inline;
	padding-left:20px;
}

#main_contents_sonota img{
/*margin-bottom:30px;  その他ページの画像下の間隔 */
}

#site_map ul{
	width:700px;
	height:550px;
	margin:0px auto;
	text-align:left;
	border:solid 1px #996600;
background-image:url(../site_map/map2_bg.png);
background-repeat:no-repeat;
background-size:90%;
background-position:center;
background-position:bottom;
}

#site_map ul li{
	width:450px;
	height:20px;
	font-size:120%;
	text-align:left;
	margin:20px auto;
	border-bottom:dotted 1px #996600;
	text-decoration:none;	
}

#site_map ul li a{
	text-decoration:none;		
}

#site_map ul li a:link{
color: #633;	
}

#site_map ul li a:visited{
color: #00C;	
}

#site_map ul li a:hover{
color:#F30;	
}


/* ============================================
					footer
============================================ */
div#footer{
	height: 100px;
	width: 1002px;
/* 	border: thin solid blue; */
	clear:both;
	background-color: #339933;
	font-size:100%;
	color:white;
	text-align:center;
	padding-top:20px;
	margin-top:50px;
	}

#footer a:link {
 color:white;
 text-decoration: none;
 }


#footer a:visited {
 color:white;
 text-decoration:none;
 }

#footer a:hover {
 color:orange;
 text-decoration:underline;
 }



#footer span{
display:block;
font-size:80%;
margin-top:20px;
font-weight:nomal;
}

#footer_sp{
	display:none;
}