.wrapper{
    width: 100%;
    height: auto;
    text-align: center;
}

.wrap{
    width: 80vw;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1vw;
}

img{
    width: 100%;
}


/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
    display: none;
  }
  
  /*全て共通：モーダルのボタンの色を変更したい場合*/
  .modaal-close:after, 
  .modaal-close:before{
    /* background:#ccc;   */
  }
  
  .modaal-close:focus:after,
  .modaal-close:focus:before,
  .modaal-close:hover:after,
  .modaal-close:hover:before{
    background:#666;
  }

  .modaal-gallery-control{
    margin-bottom: -100px;
  }
  
  /*確認を促すモーダル：タイトルの色を変更したい場合*/
  #modaal-title{
    font-size:1.2rem;
    text-align: center;
    margin: 0 0 20px 0;
  }
  
  .modaal-gallery-item img{
    object-fit: cover;
  object-position: center center;
  }

/*ローディングが表示されるエリアの設定*/
#infscr-loading {
  width:100%;
  text-align:center;
  margin:20px auto;
  }
  
  #infscr-loading img{
    width:30px;/*ローディング画像のサイズ*/
  }



  @media (max-width: 768px) {
    .wrap{
      width: 90vw;
    }
}