/* 
	12 COLUMN - RESPONSIVE GRID SYSTEM
	DEVELOPED BY DENIS LEBLANC
	URL - http://responsive.gs
	VERSION - 2.0
	LICENSED UNDER GPL & MIT
*/


/* 	SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
	If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* { -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }




/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after, .clr:after, .group:after { 
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; }


/* DEFAULT ROW STYLES */
.row { margin-bottom: 1.5em; } /* set according to preference*/
			
								  
/* DEFAULT COLUMN STYLES */
.col { 
	display: block;
	float:left;
	width: 100%;
}

.fl_left{
	float:left;
}
.fl_right{
	float:right;
}



@media ( min-width : 768px ) {
	.container{ width: 980px; margin: auto; }

	  #logo{
		padding:10px 0 0 0;
	}

}


	  .ttl{
		height:30px;
		padding:5px 0 0 10px;
		background: url("../img/ttl_bk.jpg");
		border: 1px solid #51000b;
		color:#fff;
		font-weight:bold;
		margin-bottom:10px;
	}
	  #summary{
		padding:15px 0 15px 0;
	}
	article{
	font-size:90%;
	line-height:1.5;
    }
	p.notes{
		padding-bottom:10px;
	}
	p.notes2{
		padding-top:10px;
		font-size:80%;
	}
	section{
		padding-bottom:25px;
	}

ul.list, ul.list2, ul.list4{
	border-bottom:solid 1px #ccc;
}
ul.list li, ul.list2 li, ul.list4 li{
	line-height:1.3;
	float:left;
	display:inline;
	padding:10px 0 10px 0;
	word-wrap: break-word;
}
ul.list3 li{
	line-height:1.3;
	float:left;
	display:inline;
	padding:3px 0 3px 0;
	margin-top:10px;
	word-wrap: break-word;
}
ul.list li.contentsTtl, ul.list2 li.contentsTtl, ul.list4 li.contentsTtl{
	width:50%;
	height:80px;
	border-right:1px dotted #a1a1a1;
}
ul.list li.contentsTtl p, ul.list2 li.contentsTtl p, ul.list4 li.contentsTtl p{
	font-size:80%;
}
ul.list li.cate, ul.list2 li.cate, ul.list4 li.cate{
	width:25%;
	padding-left:15px;
}
ul.list li.mode,ul.list2 li.mode, ul.list4 li.mode{
	width:25%;
	height:80px;
	padding-left:15px;
	border-left:1px #a1a1a1 dotted;
}
ul.list, ul.list4{
	padding:10px 10px;
}

ul.list2{
	background-color:#f7f7f7;
	padding:10px 10px;
}
.twitter_btn,.fb_like,.line_btn{
	padding-top:20px;
	float:left;
}
.line_btn{
	padding-right:10px;
}

ul.list3 li.contentsTtl3{
	width:50%;
	background-color:#666;
	color:#fff;
	padding-left:15px;
	font-weight:bold;
}
ul.list3 li.cate3, ul.list3 li.mode3{
	width:25%;
	padding-left:15px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
}

footer .copyright{
	font-size:85%;
	color:#979797;
	padding-bottom:18px;
}
footer .copyright2{
	font-size:90%;
	padding:10px 0 15px 0;
	text-align:center;
}

footer #link{
	border: solid 1px #979797;
	padding:6px 6px;
	text-align:center;
}
ul.box .fl_left .banner a:hover,ul.box .fl_right .banner a:hover,footer #link a:hover{
    filter: alpha(opacity=60);
   -moz-opacity:0.6;
    opacity:0.6;
}
footer #link img{
	padding-right:50px;
}



/* RESET MARGINS */
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/* COLUMN WIDTH ON DISPLAYS +768px */
@media ( min-width : 768px ) {
	.span_1 { width: 6.5%; }
	.span_2 { width: 15.0%; }
	.span_3 { width: 23.5%; }
	.span_4 { width: 32.0%; }
	.span_5 { width: 40.5%; }
	.span_6 { width: 49.0%; }
	.span_7 { width: 57.5%; }
	.span_8 { width: 66.0%; }
	.span_9 { width: 74.5%; }
	.span_10 { width: 83.0%; }
	.span_11 { width: 91.5%; }
	.span_12 { width: 100%; }
}



@media (max-width: 480px) {

	
    #header h1 img{
      width: 97%;
	  padding:0 0 0 10px;
	  margin-right: auto; 
	  margin-left:auto;
	  }
    h2.ttl{
      width: 94%;
	  padding:0 0 0 10px;
	  margin-right: auto; 
	  margin-left:auto;
	  }  
	
	  #logo{
		padding:10px 0 0 10px;
	}
	article{
	font-size:80%;
	line-height:1.5;
	margin-left: 3%;
	margin-right: 3%;
    }
	ul.box li{
		padding-bottom:20px;
	}
.fl_left,.fl_right{
	float:none;
}

.banner img{
	width: 100%;
}
footer .copyright{
	width: 90%;
	font-size:85%;
	color:#979797;
	padding-bottom:18px;
		  margin-right: auto; 
	  margin-left:auto
}
footer #link{
	width: 93%;
	border: solid 1px #979797;
	padding:6px 6px;
	text-align:center;
			  margin-right: auto; 
	  margin-left:auto
}
footer #link img{
	padding-right:13px;
}
ul.list li.contentsTtl, ul.list2 li.contentsTtl{
	width:50%;
	height:90px;
}
ul.list li.cate, ul.list2 li.cate{
	width:20%;
	padding-left:10px;
}
ul.list li.mode, ul.list2 li.mode{
	width:30%;
	height:90px;
	padding-left:10px;
}
ul.list3 li.contentsTtl3{
	width:50%;
	background-color:#666;
	color:#fff;
	padding-left:8px;
}
ul.list3 li.cate3,ul.list3 li.mode3{
	width:25%;
	background-color:#666;
	color:#fff;
	padding-left:3px;
}
ul.list4 li.contentsTtl{
	width:50%;
	height:110px;
}

ul.list4 li.mode{
	width:30%;
	height:110px;
	padding-left:10px;
}
ul.list4 li.cate{
	width:20%;
	height:110px;
	padding-left:10px;
 }

	  }


	
@media (min-width: 480px) and (max-width: 768px) {
	
	.container{width: 95%; margin-right: auto; 
	  margin-left:auto;}
	
    h2.ttl{
	padding:0 0 0 10px;
	  margin-right: auto; 
	  margin-left:auto;
	  } 
	#header h1 img{
	width: 100%;
	  margin-right: auto; 
	  margin-left:auto;
	  } 
	  #logo{
		padding:10px 0 0 0;
	}
	article{
		
	font-size:90%;
	line-height:1.5;
	margin-left: 2%;
	margin-right: 2%;
	word-wrap: break-word;
		  margin-right: auto; 
	  margin-left:auto;
    }
	ul.box li{
		padding-bottom:20px;
		margin-right: auto; 
	  margin-left:auto;
	}
.fl_left,.fl_right{
	float:none;
}

.banner img{
	width: 50%;
	float:left;
}
.imgTtl{
	float:right;
	width: 45%;
	padding-top:10px;
}

footer .copyright{

	font-size:85%;
	color:#979797;
	padding-bottom:18px;
		  margin-right: auto; 
	  margin-left:auto
}
footer #link{
	
	border: solid 1px #979797;
	padding:6px 6px;
	text-align:center;
			  margin-right: auto; 
	  margin-left:auto
}

ul.list4 li.contentsTtl{
	width:50%;
	height:80px;
	border-right:1px dotted #a1a1a1;
}

ul.list4 li.mode{
	width:25%;
	height:80px;
	padding-left:15px;
	border-left:1px #a1a1a1 dotted;
}

	  }