CSS

main {overflow-y:hidden;}

ul{
display: table;
margin: 0 auto;
padding: 0;
width: 80%;
text-align: center;
}
ul li{
display: table-cell;
min-width: 100px;
}
ul li a{
display: block;
width: 100%;
padding: 10px 0;
text-decoration: none;
color: #555;
font-weight: bold;
}
ul li.current{
background-color: #DEEBF7;
}
ul li.current a{
color: #555;
}
ul li:hover{
background-color: #FFF2CC;
}

div {
    background: #ffffff;
	border: 0px solid #cccccc;
	}

.font {
    color:#2F2D2D;
	font-family: sans-serif;
	 }

body {
    background: #ffffff;
	font-family: sans-serif;
	padding: 50px auto;
	text-align: center;
	margin: 50px auto ;
	}

.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 120px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

footer{
    width: 100%;
    background-color: #99CC66;
    color: #fff;
    text-align: center;
    padding: 30px 0;
	position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

a {
font-weight:bold;
text-decoration:none;
}


a:visited{ color:#000000;}
a:hover{ color:#a9a9a9;}
a:active{ color:#000000;}

a.red:link{ color:#ffa500;}
a.red:visited{ color:#ffa500;}
a.red:hover{ color:#a9a9a9;}
a.red:active{ color:#ffa500;}


.img_wrap{
  border: 1px solid #ddd;
  width: 300px;
  height: 300px;
  margin: 10px auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  transform: translateY(-5px);
  transition-duration: 0.5s;
}


.img_wrap2{
  border: 1px solid #ddd;
  width: 450px;
  height: 337px;
  margin: 10px auto 0;
  transition-duration: 0.5s;
}
.img_wrap2 img{
  width: 100%;
  cursor: pointer;
}
.img_wrap2:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
  transform: translateY(-5px);
  transition-duration: 0.5s;
}

div {display: inline-block; _display: inline;}