/*
2023/7/20
index.htmlのインスタサムネイル一覧のためのスタイルシートです。
*/

@charset "utf-8";

@media print, screen{

.insta_area{
	width: 100%;
	float: left;
	/*
	overflow: hidden;
	*/
	
}


.insta_list{
		width: 100%;
		padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin: 20px 0;
}

.insta_list li{
		list-style: none;
		display : block;
    position: relative;
    width: calc((100% - 0px)/3);
}

.insta_list li::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a{
	position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.insta_list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insta_btn{
		/*
    background-color: #3cb371;
		*/
		background: linear-gradient(to top right,
		rgba(247, 207, 0, 0.7),
		rgba(246, 37, 2, 0.7) 45%,
		rgba(182, 47, 82, 0.7) 75%,
		rgba(113, 58, 166, 0.7));


    padding: .5em 1em;
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    transition: .3s
}

.insta_btn a:link{
    color: #fff;
    text-decoration: none;
}

.insta_btn:hover{
		color: #fff;
		opacity: 0.8;
		/*
    background-color: #999;
		*/
}

.insta_btn a:visited{
    color: #fff;
}

}

/*
@media screen and (max-width: 800px){

.insta_area{
	width: 100%;
	background:orange;
}
.insta_list li img{
	width: calc((100% - 0px)/3);
	}
}
*/