/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	margin: 2em 15% 30px;
	background: #0496ff;
	box-shadow: 0px 0px 0px 5px #0496ff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	font-weight: bold;
	color: white;
}
.main_block_title:after{
	position: absolute;
	content: '';
	right: -7px;
	top: -7px;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: white #dff1f5 blueviolet;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.sort-btn li{
	background:rgb(142, 72, 207);
   list-style:none;
	border-radius:10px;
	cursor: pointer;
	font-size: 20px;
	padding: 10px;
	margin:10px 10px;
}
.sort-btn h4{
	
   list-style:none;
	border-radius:10px;
	cursor: pointer;
	font-size: 20px;
	padding: 10px;
	margin:10px 10px;
}

.sort-btn .color{

	font-size: 25px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#ccc;	
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}

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

/*各画像の横幅などの設定*/
.item {
		display: block;
		position: absolute;
		width: 46%;/*横並びで3つ表示*/
		margin: 1%;
		z-index: 1;
		list-style:none;
		}

		.item:hover{
			opacity: 0.6;
			transition-duration: 0.3s;
		}
/* ---------BGMのみ--------------------- */
.bgmitem {
	    background-color: rgb(231, 231, 231);
	    display: block;
		position: absolute;
		width: 46%;/*横並びで3つ表示*/
		margin: 1%;
		z-index: 1;
		list-style:none;

}


		.audioui{
			text-align: center;
		} 


/* ------------------------------ */


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


		.item-content h4{
			position:absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			font-size: 40px;
			color: white;
			text-shadow:  2px  2px 10px #777 ,
			-2px  2px 10px #777 ,
			 2px -2px 10px #777 ,
			-2px -2px 10px #777;
		}
					


		.item-content .itembgmdl p{
			/* position:absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%); */
			height: 60px;
			background-color: #3f37c9;
			margin: 20px 20% 5px;
			padding-top: 10px;
			border: double 4px white;
			border-radius: 10px;
			text-align: center;
			font-size: 20px;
			color: white;
			/* text-shadow:  2px  2px 10px #777 ,
			-2px  2px 10px #777 ,
			 2px -2px 10px #777 ,
			-2px -2px 10px #777; */
		}
							
					

						.item-content dl{
							min-height: 160px;
							background-color: #dff1f5;
							margin: 20px 15% 5px;
							padding-top: 10px;
							border: double 4px blueviolet;
							border-radius: 10px;
							text-align: center;
							font-size: 20px;
							color: black				
						}
						.item-content dt{
							margin: 10px auto 15px;
							text-align: center;
						}
						.item-content dd{
							margin: 5%;
							text-align: center;
						}
						
						.itembgmdl:hover{
							opacity: 0.6;
							transition-duration: 0.3s;
						}

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

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}