@charset "utf-8";

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

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding:50px 20px;
  opacity: 0;
  animation: SlideIn 1.6s;
  animation-delay: 1.0s;
  animation-fill-mode: forwards;
}

.sort-btn li{
  color: #000;
  text-size-adjust: 50px;
  border-radius:10px;
  cursor: pointer;
  padding: 10px;
  margin:0 10px;
}

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

/*横幅が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;/*並び替えの基準点を指定*/
  opacity: 0;
  animation: SlideIn 1.6s;
  animation-delay: 1.0s;
  animation-fill-mode: forwards;
}

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

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

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

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

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

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
} */
.fancybox-thumbs {
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  width: 140px;
  padding: 8px;
}
.fancybox-show-thumbs .fancybox-inner {
  right: 140px;
}
.fancybox-thumbs__list a { float: none; }

/* Fancybox本体（拡大表示の背景を暗くする） */
.fancybox-bg {
  background: rgba(0,0,0,0.92) !important;
}

/* 画像周りの白っぽい部分を消す */
.fancybox-content {
  background: transparent !important;
}

/* inlineを使っている場合の中身も透明に */
.photo-modal {
  background: transparent;
}

.fancybox-slide--html .fancybox-close-small{
  color: #fff !important;
}

.mahoroba-fb .fancybox-bg {
  background: rgba(0,0,0,0.92) !important;
}


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

a{
  color: white;
}

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;
}