@charset "utf-8";

:root{
	--muuri-gap: 12px;
	
	@media (width <=960px) {
		--muuri-gap: 6px;
	}	
}

.works-wrap{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--base-top-margin);
	margin-bottom: 112px;
	width: 100%;
	max-width: calc(var(--wide-wrap) + var(--muuri-gap) + var(--muuri-gap));
}
.works-wrap img{
	display: block;
}

.flex-box li a img:hover{
	transition: 0.2s ease-in-out;
	opacity :0.5;
}




/*＝＝＝並び替えボタン*/
.sort-btn{
	display: grid;
	grid-template-columns:  repeat(4, 1fr);
	gap: 14px 15px;
	padding: 0 var(--muuri-gap);
	max-width: calc(var(--wide-wrap) + var(--muuri-gap) + var(--muuri-gap));
}

.sort-btn li{
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 9px 15px 9px;
	border: 1px solid var(--txt-color);
	transition: 0.2s ease-in-out;

}
.sort-btn li:hover{
	background-color: #4d4d4d;
}
.sort-btn li:hover img{
	filter:invert(100%);
}
.sort-btn img.genre{
	width: 100%;
	height: 12px;
	display: block;
}
.sort-btn .namingcopy img,.sort-btn .marklogo img {
	width: 100%;
	height: 15px;
	display: block;
}


/*現在地＝activeというクラス名がついたら反転*/
.sort-btn li.active{
	background-color: var(--txt-color);
	color: var(--base-color);
}
.sort-btn li.active img{
	filter:invert(100%);
}

/* ---- Note Page Masonry part grid ---- */
.grid {
	width: 100%;
	max-width: calc(var(--wide-wrap) + var(--muuri-gap) + var(--muuri-gap));
	margin-top: 70px;
	margin-left: auto;
	margin-right: auto;
	
}



/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}



/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}


/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33.3%; /*横並びで3つ表示*/
  aspect-ratio: 960/524;
  padding-left: var(--muuri-gap);
  padding-right: var(--muuri-gap);
  margin-bottom: calc(var(--muuri-gap) * 2);
  z-index: 1;
}
/* safari hack */
_:lang(x)+_:-webkit-full-screen-document, .item {
  aspect-ratio: 960 / 496;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:100%;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
	object-fit: cover;
}

	/* サムネイルのキャプションを非表示 */
.item-content .small-caption{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	 width: 100%;
	 color: white;
	font-size: 0.88em;
	line-height: 1.5em;
	text-align: center;
	opacity: 0;
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.4s ease-in-out;
	text-indent: 0;
}
.item-content:hover .small-caption{
	opacity: 1;
}
.item-content:hover {
	background-color: black;
}
.item-content:hover img{
	opacity: 0.5;
}


/* ----------------------
  PC版 960px 以下
---------------------- */
@media only screen and (max-width: 960px) {
	.sort-btn{
		grid-template-columns:  repeat(3, 1fr);
		gap: 10px 16px;
	}
	/* iPhone 並び替えボタン (PC <960) */
	.sort-btn li{
		/* width: 32%; */
		padding: 5px 3px ;
		height:100%;
		font-size: 16px;
	}
	.sort-btn li:nth-child(3n) {
		margin-right: 0;
	}

	/* iPhone Muuri (PC <960) */
	.item {
		width: 49.8%; /*横並びで2つ表示*/
		aspect-ratio: 960 / 498;
		padding-left: var(--muuri-gap);
		padding-right: var(--muuri-gap);
		margin-bottom: calc(var(--muuri-gap) * 2);
	}

	.item-content {
		overflow: hidden;
	}


	.grid img{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;

		object-fit: cover;

	}
}


/* -------------------
  iPhone Setting
------------------- */
@media (min-width: 320px)
and (max-width: 767px) {
	.sort-btn{
		grid-template-columns:  repeat(2, 1fr);
		grid-auto-rows: 30px;
		gap: 5px 3px;
	}
	.srt-btn li{

	}
	.sort-btn img.genre{
		height:9.2px;
	}
	.sort-btn .namingcopy img,.sort-btn .marklogo img {
		height: 11.5px;
	}
}