@charset "UTF-8"

/* ----------------------------------
    共通パーツ
----------------------------------- */

.btn_hover a img {
  position: relative;
  top: 0;
}

.btn_hover a img:hover {
  top: 10px;
  transition: 0.3s;
}



#insta {
  padding: 0 10%; /* PC用：画面両脇の余白を10%に設定 */
}

#insta ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 横に4つのカラムを作成 */
  grid-template-rows: repeat(3, 1fr); /* 縦に3つの行を作成 */
  gap: 0px; /* 行と列の両方に0pxのギャップを設定 */
  justify-content: center; /* グリッドアイテムを中央に配置 */
  align-content: center; /* グリッド全体を中央に配置 */
  overflow: hidden; /* 溢れたコンテンツを非表示 */
  margin-bottom: 5vw;
}

#insta ul li {
  aspect-ratio: 1 / 1; /* リストアイテムを正方形に設定 */
}

#insta img,
#insta video {
  object-fit: cover; /* 画像と動画をコンテナに収める */
  width: 100%; /* グリッドセル全体に拡大 */
  height: 100%; /* グリッドセル全体に拡大 */
}

@media (max-width: 1150px) {
  #insta {
    padding: 0 5%; /* タブレット用：画面両脇の余白を5%に設定 */
  }
  #insta ul {
    grid-template-columns: repeat(4, 1fr); /* PCと同じ配置 */
    grid-template-rows: repeat(3, 1fr); /* PCと同じ配置 */
  }
}

@media (max-width: 880px) {
  #insta ul {
    grid-template-columns: repeat(3, 1fr); /* 横に3つのカラムを作成 */
    grid-template-rows: repeat(4, 1fr); /* 縦に4つの行を作成 */
    gap: 1px; /* タブレットおよび小型デバイス用：余白を1pxに設定 */
  }
}

@media (max-width: 600px) {
  #insta {
    padding: 0; /* スマホ表示用：余白をなくす */
  }
  #insta ul {
    grid-template-columns: repeat(3, 1fr); /* 横に3つのカラムを作成 */
    grid-template-rows: repeat(4, 1fr); /* 縦に4つの行を作成 */
    gap: 0; /* スマホ表示用：隙間をなくす */
  }
}

/* キャプションテキストを非表示にする */
#insta ul li .captionTxt {
    display: none;
}

/* いいねカウントを非表示にする */
#insta ul li .like_count {
    display: none;
}