/*タイルレイアウトを動かす領域の大きさ*/
.list{
    width:100%;
}

/*タイルレイアウト上下左右の余白*/
/*.list-box{
    margin: 1%;
     float: left;
     padding: 5px;
     width: 23%;
}*/

/*画像の大きさ widthは必須。heightを指定すると高さが異なるタイルレイアウトにはなりません。*/
.list-img img {
  width: 100%;
}

/*テキストエリアの大きさ*/
.list-text{
    width: 100%;
    text-align: center;
	color: #666666 ;
	font-weight: 600;
	font-size: 17px ;
}
/*テキストの属性など*/
.list-text p {
    color: #000;
    text-align: center;
    /*margin-right: 任意;*/
}

.name1 {
	color: #000000 ;
	font-weight: 400;
	font-size: 14px ;
	/*display : block;*/
	padding-top: 1em; 
}
.name2 {
	color: #000000 ;
	font-weight: 200;
	font-size: 10px ;
	/*display : block;*/
	padding-top: 1em; 
}

.container { 
	max-width: 1600px;
}

.list-box{
	float: left;
	/*width: calc(25% - 16px);*/
	width: calc(33.3333% - 16px);
	box-sizing: border-box;
	margin: 8px;
	padding: 8px;
    border: solid 2px #E0E0E0;/*線*/
    border-radius: 10px;/*角の丸み*/
}

.clearfix:after { /*floatの解除、ここがポイント*/
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}
@media screen and (max-width: 1260px) {
.list-box{
	width: calc(33.3333% - 16px);
}

@media screen and (max-width: 768px) {
.list-box{
	width: calc(50% - 16px);
}
@media screen and (max-width: 480px) {
.list-box{
	width: calc(100% - 16px);
}
.copyright {
	bottom: 0px;
}
}