/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	line-height: 180%;
	background-color: #FFFFFF;

}

a{	text-decoration: underline;
	color: #000099;
}
a:hover {color: #FF3300; }
img{border-width: 0px;}

ol{
	margin-left:3em;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

form {	padding: 0px; display: inline;}


.center{ text-align:center;} /* センター */
.right{ text-align:right;} /* 左 */
.left{ text-align:left;} /* 右 */
.float-right{ float:right;}
.float-left{ float:left;}
.form50 {  width: 50px}
.form75 {  width: 75px}
.form100 {  width: 100px}
.form150 {  width: 150px}
.form200 {  width: 200px}
.form300 {  width: 300px}
.form350 {  width: 350px}
.text10-100 { font-size: 10px; line-height: 100%}
.text12-160 { font-size: 12px; line-height: 160%}
.text14-160 { font-size: 14px; line-height: 160%}
.text16-160 { font-size: 16px; line-height: 160%}
.text18-160 { font-size: 18px; line-height: 160%}
.text80-160 { font-size: 80%; line-height: 160%}
.text90-160 { font-size: 90%; line-height: 160%}
.clr {
	clear: both;
}
h1 {
	font-size: 22px;
	font-weight: lighter;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	line-height: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 5px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}

#container {
	background-image: url(top-img/bg.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF;

}


#content{
	text-align:left;
	padding: 0px;
	margin: 0px auto 0px;
	width: 850px;
}

#head{

}
#head-text {
	font-size: 12px;
}

#main{
	padding-top: 30px;
	margin-bottom: 0px;
	padding-bottom: 20px;
}

#menu-area{
	width: 350px;
	float: left;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
}
#menu{
	margin: 0px;
	padding: 0px;
	font-size: 16px;
}

#menu  a{
	display : block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
	background-image: url(top-img/menu.jpg);
	color: #0033CC;
	text-decoration: none;
	height: 24px;
}
#menu  a:hover{
	background-image: url(top-img/menu-mo.jpg);
	background-repeat: no-repeat;
	color: #0066FF;
}

#menu ul{
	margin: 0px;
	padding: 0px;
}
#menu li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#menu2{
	margin: 0px;
	padding: 0px;
	font-size: 14px;
}

#menu2  a{
	display : block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	background-image: url(top-img/menu2.jpg);
	color: #FFFFFF;
	text-decoration: none;
	height: 24px;
}
#menu2  a:hover{
	background-image: url(top-img/menu2-mo.jpg);
	background-repeat: no-repeat;
	color: #333333;
}

#menu2 ul{
	margin: 0px;
	padding: 0px;
}
#menu2 li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}



#principal{
float: left;
width: 350px;
border: 1px solid #CCCCCC;
}


.text-area { margin-left: 10px; }


.table-waku td {
	border-bottom: 1px solid #999999;
}

.waku1 {
	font-size: 14px;
	line-height: 160%;
	margin: 5px;
	padding: 10px;
	border: 1px dotted #666666;
}

.summary {
	background-color: #F3F0E9;
	padding: 5px;
	font-size: 14px;
	line-height: 180%;
}
.ranki {
    font-size: 24px;
    font-weight: bold;
    width: 60px;
    
    margin-top: 20px;
float: left;
}
.rankg {
   
    margin-top: 5px;
    float: left;
}
.rankt {
    font-size: 16px;
    line-height: 180%;
    margin: 5px;
    margin-top: 5px;
    float: left;
    width: 300px;
}

@media only screen and (min-width: 900px) {
    
 #principal{
float: left;
width: 600px;
border: 1px solid #CCCCCC;
}   
    
.rankt {
    font-size: 16px;
    line-height: 180%;
    margin: 5px;
    margin-top: 5px;
    float: left;
    width: 380px;
}   
    
}