@charset "utf-8";

/*
************************************************************************
* ギャラリー
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* スライド式ギャラリー
************************************************************************
*/
.gallery
{
	
}
.gallery .gallery-list
{
	margin:0;
	padding:0;
	list-style:none;
}
.gallery .gallery-list .gallery-list-item
{
	float:left;
	
	display:block;
	overflow:hidden;
	width:280px !important;
	
	margin:0;
	padding:0;
	
	border:1px solid;
	
	padding-bottom:0.0em;
	
	margin-left:20px;
	margin-right:20px;
}
.gallery .gallery-list .gallery-list-item a
{
	display:block;
	height:100%;
}
.gallery .gallery-list .gallery-list-item a:hover
{
	text-decoration:none;
}
.gallery .gallery-list .gallery-list-item:focus
{
    outline: none;
}
.gallery .gallery-list .gallery-list-item .thumbnail
{
	display:block;
	padding-top:66.6666%;
}
.gallery .gallery-list .gallery-list-item .thumbnail img
{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	width:100%;
	height:100%;
	
	object-fit:cover;
}
.gallery .gallery-list .gallery-list-item .body
{
	display:block;
	padding:0.4em 0.8em;
}
.gallery .gallery-list .gallery-list-item .title
{
	display:block;
	padding:0.4em 0em;
	line-height:1.2;
}
.gallery .gallery-list .gallery-list-item .description
{
	display:block;
	line-height:1.2;
	padding:0.4em 0em;
}
.gallery .gallery-list .gallery-list-item .ext
{
	display:block;
	line-height:1.2;
	padding:0.4em 0em;
}
.gallery .slick-prev,
.gallery .slick-next
{
    z-index:100;
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 45px;
    height: 45px;
    
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.gallery .slick-prev:hover,
.gallery .slick-prev:focus,
.gallery .slick-next:hover,
.gallery .slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.gallery .slick-prev:hover:before,
.gallery .slick-prev:focus:before,
.gallery .slick-next:hover:before,
.gallery .slick-next:focus:before
{
    opacity: 1;
}
.gallery .slick-prev.slick-disabled:before,
.gallery .slick-next.slick-disabled:before
{
    opacity: .25;
}
.gallery .slick-prev:before,
.gallery .slick-next:before
{
    content:'';
    display:block;
    
    width: 45px;
    height: 45px;
    
    border-radius:100%;
    border:1px solid rgba(0,0,0,0.3);
    background-color:rgba(255,255,255,0.3);
    
    opacity: .75;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.gallery .slick-prev:after,
.gallery .slick-next:after
{
    content:'';
    display:block;
    position: absolute;
    
    top:50%;
    left:50%;
    
    width: 15px;
    height: 15px;
    
    border:0px solid rgba(0,0,0,0.0);
    border-right:3px solid rgba(0,0,0,0.3);
    border-bottom:3px solid rgba(0,0,0,0.3);
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gallery .slick-prev
{
    left:calc(50% - 480px);
}
.gallery .slick-prev:after
{
	transform:translate(-25%, -50%) rotate(135deg) ;
}

.gallery .slick-next
{
    right:calc(50% - 480px);
}
.gallery .slick-next:after
{
	transform:translate(-75%, -50%) rotate(-45deg);
}
/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	.gallery
	{
		
	}
	.gallery .gallery-list
	{
	}
	.gallery .gallery-list .gallery-list-item
	{
		width:75vw;
		
		padding-bottom:3.125vw;
		
		margin-left:3.125vw;
		margin-right:3.125vw;
	}
	.gallery .gallery-list .gallery-list-item:focus
	{
	}
	.gallery .gallery-list .gallery-list-item .thumbnail
	{
	}
	.gallery .gallery-list .gallery-list-item .body
	{
		display:block;
		padding:0.0em 0.0em;
	}
	.gallery .gallery-list .gallery-list-item .title
	{
		padding:3.125vw;
		padding-bottom:0px;
	}
	.gallery .gallery-list .gallery-list-item .description
	{
		padding:3.125vw;
		padding-bottom:0px;
	}
	.gallery .gallery-list .gallery-list-item .ext
	{
		padding:3.125vw;
		padding-bottom:0px;
	}
	.gallery .slick-prev,
	.gallery .slick-next
	{
	    width:10vw;
	    height:10vw;
	}
	.gallery .slick-prev:hover,
	.gallery .slick-prev:focus,
	.gallery .slick-next:hover,
	.gallery .slick-next:focus
	{
	}
	.gallery .slick-prev:hover:before,
	.gallery .slick-prev:focus:before,
	.gallery .slick-next:hover:before,
	.gallery .slick-next:focus:before
	{
	}
	.gallery .slick-prev.slick-disabled:before,
	.gallery .slick-next.slick-disabled:before
	{
	}
	.gallery .slick-prev:before,
	.gallery .slick-next:before
	{
	    width:10vw;
	    height:10vw;
	}
	.gallery .slick-prev:after,
	.gallery .slick-next:after
	{
	    width:3.0vw;
	    height:3.0vw;
	}

	.gallery .slick-prev
	{
	    left:calc(50% - 42.0vw);
	}
	.gallery .slick-prev:after
	{
		transform:translate(-25%, -50%) rotate(135deg) ;
	}

	.gallery .slick-next
	{
	    right:calc(50% - 42.0vw);
	}
	.gallery .slick-next:after
	{
		transform:translate(-75%, -50%) rotate(-45deg);
	}
}


/*
************************************************************************
* タイル式ギャラリー
************************************************************************
*/
.photo-gallery
{
	
}
.photo-gallery ul
{
	margin:0em;
	padding:0em;
	list-style:none;
	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}
.photo-gallery ul li
{
	margin:0em;
	padding:0em;
	
	margin-bottom:1em;
	
	width:calc(33.3333% - 0.6em);
}
.photo-gallery ul li .image
{
	display:block;
	padding-top:75%;
}
.photo-gallery ul li .image img
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	height:100%;
	
	object-fit:cover;
}
.photo-gallery ul li .caption
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	
	background-color:rgba(0,0,0,0.35);
	color:#FFFFFF;
	
	padding:0.5em;
}
.photo-gallery ul li .caption .title
{
	display:block;
	line-height:1.2;
}
.photo-gallery ul li .caption .description
{
	display:block;
	line-height:1.2;
	margin-top:0.6em;
}

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	.photo-gallery
	{
		
	}
	.photo-gallery ul
	{
		margin:0em;
		padding:0em;
		list-style:none;
		
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.photo-gallery ul li
	{
		width:calc(50.0% - 0.6em);
	}
	
	.photo-gallery ul li .image
	{
		padding-top:100%;
	}
}