@charset "UTF-8";
/* CSS Document */
a{
  text-decoration: none;
  color: #fff;
}
.illust_header{
  background-image: url("../images/gallery/230314.jpg");
}
.works_title_logo {
  width: 346px;
}
.inner_wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0;
}
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
#info-1{
  margin: 0 auto;
}
.hide-area h2{
  color:#000;
}
.modaal-container{
  text-align: center!important;
}
.modaal-container p{
  margin-top: 50px;
  margin-bottom: 50px;
}
.modaal-container p a{
  color: #000000;
  text-decoration: none;
}
.modaal-container img{
  width: 100%;
  max-width: 500px;
}
@media screen and (max-width: 786px){
.inner_wrap {
  padding: 70px 0;
  }
.works_title_logo {
  width: 200px;
}
  }
/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:0 20px 50px;
}

.sort-btn li{
	background:#000;
list-style:none;
	border-radius:50px;
	cursor: pointer;
	padding: 5px 30px;
	margin:0 10px;
  border: 1px solid #fff;
}

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

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
  padding:0 20px 50px;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}
  
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
  margin: 0 auto;
}

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

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

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
  .item-content {
  width: 100%;
}
  h3{
  font-size:1.4rem;
padding:20px 10px 0;
}
}

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

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