/*.photos {
  display: flex;
  flex-wrap: wrap; /* 横幅が狭いときは折り返し 
  gap: 10px;
  justify-content: center;
  


.photo-item {
  flex: auto;
}*/


/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {

  .main {
  width: 100%; 
     padding-left: 20px;
     padding-right: 20px;
  }

  
  h1{
    font-size: 24px;
    text-align: center;
    padding-left: 0px;
  }
  .photo-item{
    width: 50%;
  }

  .gaiyou{
    padding-left: 20px;
    padding-right: 20px;



}

  .contents {
    flex-wrap: wrap;
    margin: auto;
     width: 50%;
  }
}
 

  /* スマホ向けレイアウト */
   
@media all and (max-width: 670px) {

  h1{
    font-size:20px;
  }

 

  .header{
height: 15px;
padding-left: 0px;
padding-right: 0px;
}

.gaiyou-list{
  padding-left: 0px;
}

.header-list li{
  font-size:10px;
}



.gaiyou{
    padding-left: 0px;
    padding-right: 0px;
}

.gaiyou-text{
    padding-left: 0px;
    padding-right: 0px;
}

  .main{
    width:100%;
    padding-left:5px;
    padding-right:5px;
  }

     /* .flex-listにflex-directionを指定してください */
 /*.contents{
   flex-direction:column;
   align-items: center;
  
 }*/
  
 /*  .flex-list liにmarginを0 autoに指定してください */
 .photo-item{
    margin:0 auto;
    text-align: center;
    width:100%;
  }

  .top-photo img{
    max-width: 80%;
  }

}