@charset "UTF-8";

/*
Style Name: Infosite Module NEO
Description: Responsive web design
Version: 0.6
*/


/*---------------------------------
Structure
-----------------------------------
#wrapper
	└#header
		└#navi
	└#container	
		└#content
			#main
	└#footer
	
====================================
00.default
01.common
-----------------------------------
100〜199.	Under 480px for smartphone
200〜299.	Over 481px for tablet
300〜399.	Under 800px for pc
400〜499.	Over 1060px for wide screen
----------------------------------*/

/*00.default
-----------------------------------*/
body,h1, h2, h3, h4, h5, h6,
p, pre, blockquote,form,input,textarea,fieldset,
ul, ol, dl, li,dt,dd,address,caption {
    margin: 0;
    padding: 0;
}


table{
	border-collapse: collapse;
	}
p{
	margin-bottom: 1.5em;
	}

body{
	color: #333;
	line-height: 1.6;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ","ＭＳ Ｐゴシック",Arial,Helvetica,Verdana,sans-serif;
	background: #231816;
}
address,em,caption,th{
	font-style: normal;
	font-weight: normal;
	text-align: left;
	}
	
img{
	max-width: 100%;
	height: auto;
	vertical-align:bottom;
	border: none;
	}

li{	list-style-type: none;	}


html { font-size: 62.5%; }
body{	font-size: 14px; font-size: 1.4em;	}


/*link*/
a{
	color:#0088CC;
}

a:hover,a:active{

}

a:visited{	color: #800080;	}


/*01.common style
-----------------------------------*/
.clearfix {zoom: 1;}
.clearfix:after{
    content: "";
    display: block;
    clear: both;}


.alignRight{	text-align: right;	}
.alignLeft{		text-align: left;	}
.floatRight{	float: right;	}
.floatLeft{		float: left;		}
.alignCener{ 	text-align:center;	}


/*page top*/
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}


/*list*/


.red{
	color:#E43B2D;
	}

.clear{	clear:both;	}


.topbox{
	max-width:100%;
    background:#0000ff;
}


/*02.grid layout
-----------------------------------*/

.alignleft { float: left; }


article {
    width:100%;
    margin:0 auto;
    background:#eee;
}

section {
    margin: 5px;
    overflow: hidden;
}

section h2{
		margin:0 0 10px 0;
		padding:4px 3px 3px 7px;
		border-style:solid;
		border-color:#cacad9;
		border-width:0 0 0px 0;
		background-color:#231816;
		color:#FFF;
		font-size:1.2em;
}

.articles li, #updates li a{
	max-width:100%;
	margin:7px 0px 0px 0px;
	padding:0px 0px 0px 14px;
	background:url(../images/menupoint.gif) no-repeat 1px 3px;
	line-height:140%;
}

.articles ul{
	margin:0px 0px 10px 0px;
}



.articles{
		padding:10px;
		border-style:solid;
		border-color:#cccccc;
		border-width:1px;
		float:left;
		background-color:#FFF;
}


/* animation
article,section {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}
article {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}
section {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}

*/


/*====================================================
Under 480px for smartphone
====================================================*/

/*100.wrapper
-----------------------------------*/
#wrapper{
	position: relative;
	width: 100%;
	margin: 0 auto;
}


/*110.header
-----------------------------------*/
#header{
	/*background: url(../images/logoback.jpg) repeat-x;*/
}

#headerInner{
	margin: 0 auto;
	padding: 15px 0 15px 0;
	width: 95%;
	height:auto;
	overflow: hidden;
}
	

/*120.navi
-----------------------------------*/	
	#navi{
	}
		
	#navi img{
	background: #ccc;
    position:relative;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.20);
	}
	
	#navi a:hover img{
	background: #ccc;
    position:relative;
	top: 1px;
	left: 1px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);
	}
	
	#navi li{
		display:block;
	}

	.navileft{
		float:none;
	}
	
	#navi .ssearch{
		max-width:300px;
		padding:5px 0px 10px 0;	
	}

	#navi .fadjust ul{
		float:left;	
	}
	
	#navi .fadjust li{
	display:block;
	float:right;
	padding:7px 10px 0 0;
	}
	
	
	#cse-search-box {
		width: 260px !important;
	}
	
	#cse-search-box div{
		
	}
	 
	#cse-search-box td {
		padding: 0 !important;
	}
	
	#cse-search-box input[type="text"] {
		
		height: 25px;
		padding: 0 !important;
		width: 75%;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);
		-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);
		-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.20);	
		border: 1px solid #999999;
	
	}
	
	#cse-search-box input[type="submit"] {
		background: #111111;
		border: 1;
		color: white;
		height: 27px;
		margin-left: ;
		overflow: hidden;
		text-indent: ;
		-webkit-appearance: none;
		width: 17%;
		font-size:15px;
	}
	
#logo{
	margin: 0 auto 0 auto;
	width: 95%;/*425/480*/
	text-align: center;
	border-style:solid;
	border-color:#444444;
	border-width:1px;
}


/*130.container
-----------------------------------*/
#container{
	margin: 0 auto;
	width: 95%;
	max-width:850px;
	background-color:#FFF;
	border-style:solid;
	border-color:#dadada;
	border-width:0px 1px 1px 1px;
	}



/*140.content
-----------------------------------*/
#content{
	margin-bottom: 0em;
	background: #fff;
}

#navi{
	}
	
	
#menu{
	text-align:center;
		background: #ccc;
}

#menu span{
	padding: 10px;
	border: 1px solid #0000ff;
}

#menu img{
	padding: 5px;
	}

#main{
	overflow: hidden;
	padding: 10px;
	border-left: 1px solid #eeeeee;
}


.articles{
		width:90%;
}


#sitesummary{
	/*border: 1px solid #cacad9;
	background-color:#f7f7f7;*/
	margin:0 auto 15px auto;
	padding:0px;
	text-align:left;
	max-width:750px;
}

#sitesummary h1{
	font-size:20px;
	font-size:1.4em;
	
}
			


#topbox{
		margin:10px auto 10px auto;
		max-width:760px;
		border-style:solid;
		border-color:#cccccc;
		border-width:0px;
}

#topleft{
		margin:0 auto 0 auto;
		text-align:center;
		border-style:solid;
		border-color:#0000ff;
		border-width:0px;
}


#topright{
		padding:10px;
		border-style:solid;
		border-color:#ff0000;
		border-width:0px;
}

#updates h2{
		margin:0 0 10px 0;
		border-style:solid;
		border-color:#cacad9;
		border-width:0 0 1px 0;
		font-size:1.2em;
}

#inform{
		margin-top:10px;
		border-style:solid;
		border-color:#0000ff;
		border-width:1px;
}

#centerbox{
		margin:20px auto 0 auto;
		border-style:solid;
		border-color:#0000GG;
		border-width:0px;
		max-width:820px;
		min-height:200px;
}

#unotice{
		margin:0 auto 0em auto;
		border-style:solid;
		border-color:#ff0000;
		border-width:0px;
		text-align:center;
		font-size:12px;
}
	
	
/*160.footer
-----------------------------------*/


/*170.footer
-----------------------------------*/
#footer{
	margin-top: 2em;
	padding-top:10px;
	background-color:#000;
	color: #FFF;
}

#footer a{
	color: #FFF;	
}

#footerInner{
	margin:0 auto 0 auto;
	max-width:200px;	
}

#footerInner li{
	float:left;
	padding:20px;
}
	

	#footer #copyRight{
		margin:0 auto 0 auto;
		max-width: 90%;
		padding: 0 0 2em 0;
		color: #FFF;
		font-size: 14px;
		font-size: 1.4rem;
		text-align:center;
	}
	

/*====================================================
Over 481px for tablet
====================================================*/
@media only screen and (min-width: 30.0625em){	/*481px*/


/*200.wrapper
-----------------------------------*/
#wrapper{
}

/*210.header
-----------------------------------*/
#headerInner{
		width: 85%;
}
		
/*220.navi
-----------------------------------*/

#navi{
	}
	
.navileft{
	float:left;
}

#navi .fadjust li{
	padding:0px 10px 0 0;
}
	

#logo{
	margin: 0 auto 0 auto;
	width: 85%; /*545/800*/
}

.topbox{
	width: 390px;
}

/*230.container
-----------------------------------*/
#container{
	width: 85%; /*720/800*/

}

/*240.content
-----------------------------------*/
#content{
}

#main{
	padding: 20px;
}

.articles{
		max-width:230px;
}


/*260.footer
-----------------------------------*/
#footer{
}


	#footerInner{
	max-width:380px;	
	}
	
	#footer #copyRight{
	}	
		
}

/*====================================================
Under 800px for pc
====================================================*/
@media only screen and (min-width: 801px){
	/*300.wrapper
	-----------------------------------*/
	#wrapper{
	}

	/*310.header
	-----------------------------------*/
	#headerInner{
		/*width:800px*/
	}
	
	/*320.navi
	-----------------------------------*/
	#navi{
	}
	
	.navileft{
	}
	
	#navi .ssearch{
		padding:5px 0px 0px 0px;
		float:right;
	}
		
	#logo{
		margin: 0px auto 0px auto;
		/*width:800px;*/
	}

	/*320.container
	-----------------------------------*/
	#container{
		position: relative;
		/*width: 800px;*/
	}
	

	/*330.content
	-----------------------------------*/
	#content{
		margin: 0;
	}

	#main{
		padding: 20px;
	}


	#topleft{
		margin:0 auto 0 auto;
		width:90%
	}
		
	#topright{
		margin:0 auto 0 auto;
		width:90%
	}
	

	/*360.footer
	-----------------------------------*/
	#footer{
	}
		
		#footer #copyRight{
		}
				


}

/*====================================================
Over 1060px for wide screen
====================================================*/
@media only screen and (min-width: 60.3125em){	/*965px:1061px=66.3125em*/

	/*400.wrapper
	-----------------------------------*/
	#wrapper{
	}

	/*410.header
	-----------------------------------*/
	#headerInner{
		position: relative;
		width: 850px;
	}

	#logo{
		width: 852px;
	}

	/*420.container
	-----------------------------------*/
	#container{
		width: 850px;
	}
	

	/*430.content
	-----------------------------------*/
	#content{
		width: 850px;
	}


	#main{
	}
	
	#topleft{
		float:left;
		width:336px;
		float:left;
		}
		
	#topright{
		float:right;
		width:auto;
		max-width:400px;
	}



	/*440.sub
	-----------------------------------*/
	#sub{
	}


	/*460.footer
	-----------------------------------*/
	#footer{
	}

		#footer #copyRight{
		}

}