@charset"utf-8";


body{
  
  min-width: 980px;
  margin: 0 auto;
  background-color: white;
  background-repeat: round;
  position: relative;
  overflow-x: hidden;
  font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;

}



#wrapper h1 {
  
  text-align: left; 
  font-size: 30px;
  color: #888;
}

#wrapper h1 span.operate a {
  font-size: 20px;
  float: right;
  color: #888;
  
}

#wrapper h1 span.operate a:visited {
  color: #888
}


#wrapper {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  
  
}

#wrapper div#main_navi {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
  margin: 0 auto;
}


#wrapper div#main_navi h2 {
  text-align: center;
}



ul.photos {
  
  max-width: 100%;
  width: 100%;
  vertical-align: top;
  padding: 0;
  height: auto;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;

 
  
}


.photos li {
  max-width: 23.55%;
  width: 100%;
  list-style: none;
  display: inline-block;
  border: solid 1px black;
  margin-right: 1%;
   margin-bottom: 1%;
}

.pic-comment {
  width: 100%;
  height: auto;
  
}

.pic-comment p {
  width: 100%;
  height: 100%;
  

}



.photo {
  width: 100%;
  height: auto;
  border-bottom;
 
}

.photo img {
 width: 100%;
 height: 100%;
}


@media only screen and (max-width: 768px) {
  
  body {
    min-width: 0;
  }
  
  #wrapper {
    max-width: 100%;
    width: 100%;
  }
  
  .photos li{
    max-width: 48%;
    width: 100%;
  }
}



@media only screen and (max-width: 767px) {
  
  ul.photos {
    width: 100%;
    max-width: 100%;
    margin: 1% 0 0 0;
    
}
  
  
  .photos li  {
    max-width: 98%;
    width: 100%;
    margin-bottom: 1%;
  }
  
  #wrapper h1 {
    text-align: left;
  }
  
  
}