/*fancyboxの読み込み ポートフォリオ用
---------------------------------------------------------------------------*/
@import url("jquery.fancybox.css");



/*fancyboxの読み込み ポートフォリオ用 上部にある
@import url("https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css");も必要
---------------------------------------------------------------------------*/
/*サムネを囲んでいるブロック全体*/
.masonry-grid {
  animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	width: 100%;
}
/* カラム幅：PC 4列 */
.grid-sizer,
.grid-item {
  width: calc(25% - 16px);
	/*width: 33.333%;
	padding: 5px; /* 画像同士のすき間（お好みで調整） *
	box-sizing: border-box;*/
}
.grid-item {
  margin-bottom: 16px;
}
/* レスポンシブ：1000px 未満で 3列 */
@media (max-width: 1000px) {
  .grid-sizer,
  .grid-item {
    width: calc(33.333% - 16px);
  }
}
/* レスポンシブ：500px 未満で 2列 */
@media (max-width: 500px) {
  .grid-sizer,
  .grid-item {
    width: calc(50% - 16px);
  }
}
/* 中身共通 */
.grid-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.grid-item img,
.grid-item video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* 画像・動画に軽いホバー演出 */
.grid-item img,
.media-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.grid-item a:hover img,
.grid-item a:hover .media-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* 動画サムネ用ラッパー */
.media-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
/* サムネ動画 */
.thumb-video {
  display: block;
  width: 100%;
  height: auto;
}
/* 「▶」アイコン */
.video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff0000;  /*背景色*/
  color: #fff;  /*文字色*/
  font-size: 12px;  /*アイコンのサイズ*/
  width: 28px;  /*アイコンの幅*/
  line-height: 28px;  /*高さ*/
  text-align: center;
  border-radius: 100px;  /*円形にする*/
  pointer-events: none;
}