.fade-area {
  width: 100%;
  height: 700px;
  position: relative;
  list-style-type: none;
}
/* object-fitを使用せず画像トリミングさせるためにbackgroundで指定 */
/* fade-areaに対してposition: absoluteで画像を重ねる */
.fade-list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 600px) {
  .fade-area {
    height: 300px;
  }
}


h3.heading{
padding-left:7px;
margin-bottom:10px;
font-size:16px;
border-left:5px solid #292927;
}
.alignleft{
  float:left;
  clear:left;
  margin:3px 10px 10px 0;
  }
  
.alignright{
  float:right;
  clear:right;
  margin:3px 0 10px 10px;
  }
  
img.frame,#gallery img{
  border:4px solid #fff;
  box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
  }
  
#gallery .grid{padding:5px 0 0;}
/**************************
/* グリッド
**************************/
.gridWrapper{
  padding-bottom:20px;
  overflow: hidden;
  }
  
  * html .gridWrapper{height:1%;}
    
  .grid{
  float:left;
  border-radius:5px;
  background:#fff;
  }
  
  .grid h3{
  padding:15px 5px;
  text-align:center;
  border-radius:5px 5px 0 0;
  background:#e8e3ca;
  }
  
  .grid p{
  padding:5px 10px;
  }
  
  .gridWrapper img{
  max-width:100%;
  height:auto;
  }
  
  #footer .grid{
  background:transparent;
  }
  
  #footer .grid p{padding:0;}