@charset "utf-8";

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
background: #f3f3f3;
padding: 20px;
margin:50px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.sort-btn dt{
font-weight: bold;
margin:0 0 10px 0;
}

.sort-btn dd{
margin:0 0 10px 0;
}

.sort-btn ul{
display: flex;
flex-wrap: wrap;
}

.sort-btn li{
margin:0 10px;
}

.sort-btn ul li{
position: relative;
cursor: pointer;
padding:0 0 0 30px;
margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
width:100%;
margin:0;
}

.sort-btn ul li{
width:auto;
}

}

/*チェックマークの設定*/
.sort-btn ul li::before{
content:'';
position: absolute;
left:0;
width:20px;
height:20px;
border:2px solid #ccc;
}

.sort-btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
content:'';
position: absolute;
left:5px;	
top:0;
/*チェックマークの色や形*/
border-left:2px solid #333;
border-bottom:2px solid #333;
width:16px;
height:9px;
transform:rotate(-45deg);
}



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

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

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

/*画像の横幅を100%にしてレスポンシブ化*/
.grid_gallery img{
width:100%;
height:auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/
}
@media only screen and (max-width: 767px) {
.grid_gallery .item {
width: 49.5%;/*横並びで2つ表示49.5%*/
}
.grid_gallery .item-content {
padding: 5px;
}
.grid_gallery .item-content p {
	font-size: 3.3vw;
	line-height: 1.8em;
}
}


/*＝＝＝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;
}

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

h1{
text-align: center;
font-size:6vw;
letter-spacing: 0.1em;
text-transform: uppercase;
margin:30px 0;
}

p{
margin:0 10px 10px 10px;
word-wrap : break-word;
}*/