/*================================================
 *  catalog class.cssに
 ================================================
 .catalog {
	 width:95%;
	overflow:hidden;
	margin-bottom:30px;
	margin-right:-50px;
		margin-left:6px;
}
.catalog li {
	list-style:none;
	float:left;
	margin:0 1px 5px 3px;
}
.catalog li img {
	width:50px;
}
*/

.catalog {width:100%;padding:3%;
	overflow:hidden;
	margin-right:-2%;
	text-align:center;
	}
.catalog li {
	list-style:none;
	float:left;
	margin:0 1px 5px 5px;
		}
.catalog li img {
		width:65%;
	}

.catalog2 {width:100%;padding:3%;
	overflow:hidden;
	margin-right:-2%;
	text-align:center;
	}
.catalog2 li {
	list-style:none;
	float:left;
	margin:10px 10px 5px 5px;
		}
.catalog2 li img {
		width:65%;
	}
	
	
	.catalog3 {
	width:100%;padding:3%;
	overflow:hidden;
	margin-right:0%;
	text-align:center;
	}
.catalog3 li {
	list-style:none;
	float:left;
	margin:5px 5px 3px 3px;
		}
.catalog3 li img {
		width:65%;
	}
 /*================================================
 *  下側に影をつけたbottan
 ================================================*/
 .btn01{
    display: inline-block;
    text-decoration: none;
    background: navy;
    color: #FFF;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    border-bottom: solid 3px #bd6565;
    transition: .4s;
}

.btn01:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}
 
 .btn02{
    display: inline-block;
    text-decoration: none;
    background: red;
    color: #FFF;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #bd6565;
    transition: .4s;
}

.btn02:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

.square_btn12 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 12px 0 8px;
    text-decoration: none;
    color: #67c5ff;
    transition: .4s;
}

.square_btn12:before{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:100%;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.square_btn12:after{
   position: absolute;
   content: '';
   width: 100%;
   height: 4px;
   top:0;
   left: 0;
   border-radius: 3px;
   background:#67c5ff;
   transition: .2s;
}

.square_btn12:hover:before {
    top: -webkit-calc(100% - 3px);
    top: calc(100% - 3px);
}

.square_btn12:hover:after {
    top: 3px;
}


@media screen and (max-width: 767px){


.catalog li img {
		width:80%;
	}
}