@charset "utf-8";
*{margin:0; padding:0;}

body{font-size:110%;	color:#555555;	margin: 0;	padding: 0;	text-align:center;
	background-color:#f3f4f3;	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Verdana, sans-serif;}

h1,h2,h3,h4,h5,h6{font-size:100%;	margin:0;	padding:0;}

p,ol,ul{margin:0;	padding:0;}

a{color:#336699; text-decoration:underline;}
a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:hover{color:#359ab7;}

blockquote {
    background-color: #FCF8EB;
    margin: 20px;
    padding: 40px 10px 20px;
    background-image: url("../img/blockq.png");
    background-repeat: no-repeat;
    background-position: 10px 10px;
    border-radius: 10px;
}


img{border:none;}

dl{margin:0 0 20px 0;}
dl dt{font-weight:bold;	margin:15px 0 5px 15px;}
dl dd{margin:0 0 10px 20px;	background-image:url(../images/dt.gif);
	background-repeat:no-repeat;	background-position:left center;	padding:0 0 0 12px;}

#rap{width:90%;	margin:0 auto 0 auto;	padding:0;	text-align:left;	background-color:#ffffff;}

#header{width:100%;	margin:0;	padding:1em 0 1em 0;	background-color:#739FBF;
	color:#ffffff;}

h1.logo , p.logo{float:left;}
h1.logo , p.logo{margin:10px 0 10px 2%; width:28%; padding:0; box-sizing:border-box;}
h1.logo a , .logo a{background-image:url(img/logo.jpg); background-repeat: no-repeat; background-position:left top;
    text-indent:100%; overflow:hidden; white-space:nowrap; box-sizing:border-box;
    display: block; width:100%; height:60px; background-size:contain; padding:0;}
p.slogan{float:left; width:45%; color:#cccccc; box-sizing:border-box; height:60px; padding:35px 0 0 0; margin:0 0 0 5%!important; font-style:italic;}

#randombox{width:65%; margin:8px 0 0 5%; padding:0 10px 0 0; float:right; 
letter-spacing:0.2em; box-sizing:border-box;}
#randombox p{font-size:80%; margin:0; padding:0; line-height:1.6;}

#content{width:100%;	margin:0;	padding:0;}

#sidebarwrap{width:20%;	float:left;	position:relative;}

#sidebar{/*background-color:#F2F2F2;*/	width:100%;	float:left;	margin:0;	padding:0;}

#credit{font-size:80%;	margin:20px 0 0 0;	padding:10px;	text-align:center;	background-color:#698DA8;
	color:#ffffff;}
#credit a{
	color:#ffffff;
}

#content ol , #content ul{margin:1em 2em 3em 6em;}
#content ol li , #content ul li{margin:13px 0 13px 0;	line-height:1.5;}

#content h1{font-size:210%; letter-spacing:.3em; margin:10px 30px; padding:0;}
#content h2,#content h3{font-size:200%;	letter-spacing:.3em; margin:1em 1em .5em 1em; padding:0;}
#content p{font-size:120%; letter-spacing:0.1em; margin:1em 2em 1.5em 2em; line-height:1.8;}

.item{box-sizing:border-box; width:48%; float:left; margin:10px 1% 10px 1%; padding:0;}
.item h2 , .item h3{font-size:150%!important;}
.item p{font-size:100%!important;}

#content .midashi_box{
	width:50%;
	float:left;
	font-size:85%;
	margin:0 0 20px 0;
}
#content .midashi_box h2{
	margin:10px 0 10px 40px;
}
#content .midashi_box p{
	margin:0 20px 0 40px;
}



#sidebar h3{
	margin:15px 0 10px 20px;
	padding:0;
	letter-spacing:.5em;
}
#sidebar ul{
	list-style-type: none;
	margin:10px 0 10px 20px;
	padding: 0;
}
#sidebar ul li{
	font-size:90%;
	margin:5px 0 5px 0;
	padding:0;
}

.pan{
	color:#6f6f6f;
	text-align:right;
	margin:10px 10px 0 0;
	font-size:80%;
}
.pan a{
	color:#6f6f6f;
	text-decoration:none;
}

br.clear{
	clear:both;
}

p.right{
	text-align:right;
	font-size:70%;
}
.center{
	text-align:center;
}

table{
	border:1px #cccccc solid;
	width:70%;
	margin:0 15% 1em 15%;
}
table td{
	border:1px #cccccc solid;
	padding:1em .5em;
	text-align:center;
}

table.vote{width:90%; margin:10px 5%; border-collapse:collapse; box-sizing:border-box;}
table.vote th{border:.5px #cccccc solid; box-sizing:border-box; padding:10px;}
table.vote td{border:.5px #cccccc solid; box-sizing:border-box; padding:20px;}
table.vote input{font-size:150%; box-sizing:border-box; padding:5px;}

table.vote ul{line-height:2em;}

.left{text-align:left;}

div.resizeimage{width:100%; margin:0;}
div.resizeimage img{width:100%; height:auto;}

.small{
	font-size:80%;
	color:#6c6c6c;
	margin:30px 0 0 0;
}
.small a{
	color:#6c6c6c;
	text-decoration:none; 
}

#menu{width:100%; margin:auto; padding:0;}
#menu li{display:block; float:left; width:8.33%; margin:0; padding:0;}
#menu li a{display:block; padding:12px 0 10px 0; background:#ABC7D6; color:#ffffff;  
	text-align:center; text-decoration:none; font-size:100%; letter-spacing:.2em; box-sizing:border-box;
	border:1px #7AB1D3 solid; border-left:none;}
#menu li a:hover{background: #B6CEDE;}

#menu li:first-child a{border-left:1px #7AB1D3 solid;}
#toggle{display:none;}



#page-top{display: block;  position: fixed;  z-index: 9999;  bottom: 10px;  right: 10px;  
	width: 80px; padding: 20px 10px; background: rgba(158,187,239,.7);  color: #fff;  
	text-align: center;  text-decoration: none; border-radius:100px 100px 100px 100px; }
#page-top:hover{ background:rgba(158,187,239,.3);}


/*bbs*/
.form_area{width:80%; margin:10px 10%;}
.caution{width:80%; margin:10px 10%;}
.names{width:100%; font-size:150%; padding:10px; box-sizing:border-box;}


/*投票*/
#rap form{width:90%;}
#rap form input{width:90%;}


/*@media screen and ここのスペースが大事なんだ*/
@media screen and (max-width:600px){

#rap{width:100%;}




h1.logo , p.logo{float:none;}
h1.logo , p.logo{margin:10px 0 10px 0; width:100%;}
h1.logo a , .logo a{background-image:url(img/logo.jpg); background-repeat: no-repeat; background-position:left top;
    text-indent:100%; overflow:hidden; white-space:nowrap; box-sizing:border-box;
    display: block; width:100%; height:60px; background-size:contain; padding:0;}

#randombox{clear:both;width:100%;margin:0; padding:0;}
#randombox p{width:90%;margin:0 auto 0 auto;}

#content .midashi_box{clear:both;width:100%;font-size:100%;}
#content .midashi_box h2{margin:20px 10px 10px 10px;font-size:120%;}
#content .midashi_box p{margin:10px 10px 10px 10px;}

#content h2,#content h3{font-size:150%; margin:0 20px 10px 20px;}
#content p{font-size:100%; margin:5px 20px 15px 20px;}


.item{width:100%; float:none; margin:50px 0 0 0;}

table{
	border:1px #cccccc solid;
	width:90%;
	margin:0 5% 1em 5%;
}

	#menu{display:none;} 
	#menu li{width:50%;}
	#toggle{display:block; position:relative; width:100%; background:#8FB8C9;}

	#toggle a{display:block; position:relative; padding:12px 0 10px 0;    
		border-bottom:1px #ffffff solid; color:#ffffff; text-align:center; text-decoration:none;}

	#toggle:before{display:block; content:""; position:absolute; top:50%; left:10px;
			width:20px; height:20px; margin-top:-10px; background:#ffffff;}
	#toggle a:before, #toggle a:after{display:block; content: ""; position:absolute;
					top:50%; left:10px; width:20px; height:4px; background:#8FB8C9;}
	#toggle a:before{margin-top:-6px;}
	#toggle a:after{margin-top:2px;}
	#menu li a{border-top:none;}

.form_area , .caution{width:95%; margin:10px 2.5%;}
.names{font-size:110%;}

#content ol , #content ul{margin:1em 2em 3em 3em;}
#content ol li , #content ul li{margin:13px 0 13px 0;	line-height:1.5;}

dl.log{margin:0;}
dl.log dd{margin:20px;}

#content h1{font-size:170%; margin:0 20px 15px 20px; padding:0;}
}