@charset "utf-8";

.img-area{
	height: 100vh;
}

/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
	background:#ccc;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

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


@media only screen and (max-width: 540px) {

	.sort-btn{
		justify-content: space-between;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: scroll;
		padding:50px 0 10px;
	}
		
	.sort-btn li{
		width:48%;
		margin:0 1em 10px 0;
		text-align:center;
	}
	
	.sort-btn li a{
		margin-right: 1em;
	
	}

}


/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {

.sort-btn{
	justify-content: space-between;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: scroll;
	padding:50px 0 10px;
}

.sort-btn::-webkit-scrollbar{
	height: 15px;

}

.sort-btn::-webkit-scrollbar-thumb {
	background: #d2b48c; /* ツマミの色 */
	border-radius: 7px; /* ツマミ両端の丸み */
	width: 10%;
}

.sort-btn::-webkit-scrollbar-track {
	background: #3d3d3d; /* トラックの色 */
	border-radius: 7px; /* トラック両端の丸み */
}

.sort-btn li{
	width:48%;
	margin:0 1em 10px 0;
	text-align:center;
}

.sort-btn li a{
	margin-right: 1em;

}

}

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

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

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 1em;
  border-radius: 10px;
}

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

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

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

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


/*========= レイアウトのためのCSS ===============*/
ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
	text-decoration: none;
	text-align: center;
}

a:hover,
a:active{
	text-decoration: none;
	opacity: 0.4;
}

.date{
	/*日付*/
    display:inline-block;
    font-size:0.8rem;
    margin-right:10px;
    color:#777;
}

.news-label{
	background-color: #e8e8e8;
	border-radius: 3px;
	margin: 1em;
}

@media only screen and (max-width: 768px) {
	.news-label{
		margin-left: 0;
		margin-right: 0;
	}

}	


@media print and (max-width:768px) {
	.item {
		width: 100%;/*1つ表示*/
	}

	.sort-btn{
		justify-content: space-between;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: scroll;
		padding:50px 0 10px;
	}
	
	.sort-btn::-webkit-scrollbar{
		height: 15px;
	
	}
	
	.sort-btn::-webkit-scrollbar-thumb {
		background: #d2b48c; /* ツマミの色 */
		border-radius: 7px; /* ツマミ両端の丸み */
		width: 10%;
	}
	
	.sort-btn::-webkit-scrollbar-track {
		background: #3d3d3d; /* トラックの色 */
		border-radius: 7px; /* トラック両端の丸み */
	}
	
	.sort-btn li{
		width:48%;
		margin:0 1em 10px 0;
		text-align:center;
	}
	
	.sort-btn li a{
		margin-right: 1em;
	
	}
}