@charset "UTF-8";
/* CSS Document */
img{
	border:0;
}

.clearfix { 
	display:flex; 
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#gallery_wrap {
	width:100%;
	padding: 30px 15px;
}
#gallery_list li{
	width:calc(100% / 4 - 10px);
	margin:0 5px 15px;
	overflow:hidden;
	padding:5px;
	text-align:center;
	font-size:0;
}
#gallery_list a.photo{
	display:block;
	width:100%;
	aspect-ratio: 1 / 1;
	margin:0 auto;
	padding: 10px;
	overflow:hidden;
	background-color: #fff;
}
p.detail_text{
	font-size: 0.9rem;
}
.photo img{
	width: 100%;
	height: 100%;
	border-radius: 15px;
	object-fit: contain;
}
/*---------------------------------
	      more open
---------------------------------*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
  height: 350px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 80px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );

}
.close-btn {
  background: none;
}
.slide-up {
  height: 350px;
  padding-bottom: 0;
  overflow: hidden;
}
.slide-down {
  height: auto;
  overflow: visible;
  padding-bottom: 50px;
}
.more-btn p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #ee7b1e;
  padding: 5px 20px;
  width: 250px;
  border-radius: 20px;
}
.close-btn {
  padding:0;
}
.close-btn p {
  background: #666;
}


	/*---------------------------------
	      Pager style
---------------------------------*/
.pager_link{
	text-align:right;
	padding:10px;
}
/*ページャーボタン*/
.pager_link a {
    border: 1px solid #aaa;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
	margin:0 1px;
}
/*現在のページ、オーバーボタン*/
.pager_link a.current,.pager_link a:hover{
    background: #999;
    color: #FFFFFF;
}
.overPagerPattern{
	padding:0 2px ;	
}
@media (max-width: 959px){
	#gallery_list li{
		width:calc(100% / 3 - 10px);
	}
}
@media (max-width: 749px){
	#gallery_list li{
		width:calc(100% / 2 - 10px);
	}
}
@media (max-width: 450px){
	.clearfix{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#gallery_list li{
		width: 100%;
		max-width: 300px;
		padding: 10px;
	}
}