@charset "utf-8";

/*
************************************************************************
* ギャラリー
* @copyright Revolme Inc.
************************************************************************
*/
.category-select
{
	marign-bottom:1em;
}
.category-select .category-title
{
	font-size:1.6rem;
	font-weight:bold;
	line-height:1;
	margin-bottom:0.8em;
}
.category-select .category-title:before
{
	content:"";
	
	display:inline-block;
	
	width:1.5em;
	height:2.0em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align: middle;
	
	margin-right:0.5em;
	margin-top:-0.3em;
}
.category-select .category-title.category-place:before
{
	background-image:url(../../../_img/icon/place.svg);
}
.category-select .category-title.category-season:before
{
	background-image:url(../../../_img/icon/season.svg);
}
.category-select .category-title.category-person:before
{
	background-image:url(../../../_img/icon/person.svg);
}
.category-select .category-title.category-costume:before
{
	background-image:url(../../../_img/icon/costume.svg);
}

.category-select .category-list
{
	margin:0;
	padding:0;
	list-style:none;
	
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	
	margin:-0.5em;
	margin-bottom:1.8em;
}
.category-select .category-list li
{
	margin:0;
	padding:0;
	
	line-height:1;
	
	border-radius:2em;
	border:1px solid #222222;
	
	padding:0.5em 2.0em 0.5em 1.0em;
	margin:0.5em;
	
	cursor:pointer;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	font-size:1.4rem;
}
.category-select .category-list li > span
{
}
.category-select .category-list li:after
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50% - 0.40em);
	right:0.8em;
	
	width:0.5em;
	height:0.5em;
	
	transform:rotate(45deg) skew(10deg, 10deg);
	
	border-right:1px solid #222222;
	border-bottom:1px solid #222222;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.category-select .category-list.type01 li:after
{
	top:calc(50% - 0.45em);
}
.category-select .category-list li:hover,
.category-select .category-list li.active
{
	background-color:#222222;
	color:#FFFFFF;
}
.category-select .category-list li:hover:after,
.category-select .category-list li.active:after
{
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}
.gallery
{

}
.gallery .gallery-list
{
	margin:0;
	padding:0;
	list-style:none;
	
	margin:-5px;
}
.gallery .gallery-list .gallery-list-item
{
	margin:0;
	padding:0;
	
	width:calc(25%);
	padding:5px;
}
.gallery-loading
{
	width:100%;
	height:100px;
}
.gallery-loading .loader
{
	position:absolute;
	top:50%;
	left:50%;
}
.gallery-loading .loader .ball-pulse>div
{
	border-color:#222222;
	background-color:#222222;
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 1100px) {
	.gallery .gallery-list .gallery-list-item
	{
		width:calc(33.33333%);
	}
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	.category-select .category-title
	{
		font-size:2.6rem;
		margin-bottom:1.0em;
	}
	.category-select .category-list
	{
		margin:-0.4em;
		margin-bottom:1.0em;
	}
	.category-select .category-list li
	{
		font-size:1.9rem;
		padding:0.6em 1.8em 0.6em 0.8em;
		margin:0.4em;
	}
	.gallery .gallery-list
	{
		margin:-0.5em;
	}
	.gallery .gallery-list .gallery-list-item
	{
		width:calc(50%);
		padding:0.5em;
	}
}