/*ul周りの設定をリセットしておく*/
#contents .instagram li::before{
	height:0; width:0;
}
#contents .instagram li{
	padding: 0; margin: 0;
}
#contents .instagram{
	padding: 0; margin: 0;
}

/* インスタ表示エリア（余白の設定）*/
.instaarea{
	margin: 0px 10px 0px;	/*上下、左右への余白*/
}
.instalogo{
	text-align: right;
}
.instalogo a,.instagram a:hover{
	text-decoration: none;	/*マウスオン時に下線を消す設定*/
}
.instalogo img{
	display: inline-block;
	vertical-align: top;
}
/* 枠を並べる */
.instagram{
	display: grid; /*フレキシブルな並べ方を可能にする*/
	/*grid-gap: 10px 10px;*/
	/*150pxより大きく*/
	/*かつ5列にならないように（最大4列）*/
	grid-template-columns: repeat(auto-fit, minmax(max(150px,calc((100% + 10px) / 5 + 1px)), 1fr));
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-template-rows: repeat(2,1fr) repeat(99,0); /* 2行をmaxにする（あまり縦長にならないようにする）*/
	overflow: hidden; /*はみ出したのは表示させない*/
	list-style: none; /*リストのポチは非表示に*/
	font-size: 0.8rem;
	line-height: 1.2;
}
.instagram a,.instagram a:hover{
	color: white;
	text-decoration: none;	/*マウスオン時に下線を消す設定*/
}
.instagram li{
	display: inline-block;
	aspect-ratio: 1; /*高さは正方形になるように*/
	position: relative; /*文字を載せるための基準位置とする*/
	border-radius: 10px; /*枠縁取り*/
	overflow: hidden; /*枠縁取り*/
}
/* 各枠に表示域を設定 */
.instagram li > div{
	display: box;
	position: absolute;
	top: 2%;
	left: 2%;
	right: 2%;
	bottom: 2%;
	width: 96%;
	height: 96%;
	border-radius: 10px; /*枠縁取り*/
	overflow: hidden; /*枠縁取り*/
}
/*表示域にマウスオーバーでグレーを被せる*/
.instagram li > div:hover::before{
	content: "";
	position: absolute;
	top: 0%; bottom: 0%;
	left: 0%; right: 0%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
/* 表示域内の画像 */
.instagram li > div img{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: -2;
	vertical-align: middle;
	object-fit: cover; /*縦横比を保って枠全体に画像を表示（長辺はみ出す）*/
}

/* メッセージ表示エリア */
.instagram li .msg{
	position: absolute;
	top: 5%; height: 70%; /*5%〜75%になるように書く*/
	left: 5%; right: 5%;
	overflow: hidden; /*はみ出さないようにする*/
	color: #fff;
	text-align: justify; /*両端揃え*/
	display: none;
}

/* 情報表示エリア1 */
.instagram li .stat1{
	font-size: 0.8rem;
	position: absolute;
	vertical-align: bottom;
	top: 95%; /*95%の高さから書きはじめて*/
	left: 5%; right: 50%;
	transform: translate(0%,-100%); /*できたものをごっそり上にずらす*/
	color: #fff;
	text-align: left;
	display: none;
}

/* 情報表示エリア2 */
.instagram li .stat2{
	font-size: 0.8rem;
	position: absolute;
	vertical-align: bottom;
	top: 95%; /*95%の高さから書きはじめて*/
	left: 50%; right: 5%;
	transform: translate(0%,-100%); /*できたものをごっそり上にずらす*/
	color: #fff;
	text-align: right;
	display: none;
}

/*マウスオーバーで表示させる*/
.instagram li > div:hover .msg,
.instagram li > div:hover .stat1,
.instagram li > div:hover .stat2 {
	display: inline;
}

/* コメント表示エリア1,2内の各項目 */
.instagram li .stat1 span,
.instagram li .stat2 span{
	display: inline; /*インラインで表示*/
}

/* コメント表示エリア1内のコメントアイコン */
.instagram li .reply:before{
	content: ""; /*そのままだと大きさが変えられないので疑似要素にする*/
  display: inline-block; /*大きさを指定するために（行内）ブロック要素にする*/
	width: 0.8rem;
	height: 0.8rem;
	background-image: url("../images/reply.png"); /*画像を読み込む*/
  background-size: contain; /*縦横比を保って枠全体に画像を表示（長辺はみ出さない）*/
	background-repeat: no-repeat; /*繰り返さない*/
	vertical-align: middle;
	margin-right: 5px;
}
/* コメント表示エリア1内のいいねアイコン */
.instagram li .like:before{
	content: ""; /*そのままだと大きさが変えられないので疑似要素にする*/
  display: inline-block; /*大きさを指定するために（行内）ブロック要素にする*/
	width: 0.8rem;
	height: 0.8rem;
	background-image: url("../images/like.png"); /*画像を読み込む*/
  background-size: contain; /*縦横比を保って枠全体に画像を表示（長辺はみ出さない）*/
	background-repeat: no-repeat; /*繰り返さない*/
	vertical-align: middle;
	margin-right: 5px;
}
/* コメント表示エリア2内のビデオアイコン */
.instagram li .video:before{
	content: ""; /*そのままだと大きさが変えられないので疑似要素にする*/
  display: inline-block; /*大きさを指定するために（行内）ブロック要素にする*/
	width: 0.8rem;
	height: 0.8rem;
	background-image: url("../images/video.png"); /*画像を読み込む*/
  background-size: contain; /*縦横比を保って枠全体に画像を表示（長辺はみ出さない）*/
	background-repeat: no-repeat; /*繰り返さない*/
	vertical-align: middle;
	margin-right: 5px;
}