@charset "UTF-8";

/* layout
++--------------------------------------------++*/
@media (min-width: 768px){
	.photogallery-bk{
		padding-top: var(--fix-bodypage);
		padding-bottom: 2em;}

	.head p{
		text-align: center;}
}

@media (max-width: 767px){
	.photogallery-bk{
		padding-top: var(--fix-bodypage-sm);
		padding-bottom: 2em;}
}

/* PhotoGallary
++--------------------------------------------++*/
.head{
	text-align: center;
	padding: 3em 2em;}

.head h2{
	font-size: 20px; font-size: 2.0rem;
	text-align: center;
	padding: 0em 0 2em;}

.head .p1{
	font-size: 20px; font-size: 2.0rem;
	text-align: center;
	padding: 0 0 1em;}

.head p{
	font-size: 16px; font-size: 1.6rem;
	padding: 0 0 1em;}

.head div{
	display: inline-block;}

.head div p{
	text-align: left;}


#lightgallery a{display: block;}

#lightgallery a img{
	border: 1px solid #fff;}

#lightgallery {
	width: 90%;
	max-width: 1920px;
	margin: 0 auto;
	column-count: 4;
	column-gap: 0px;}

/*effect*/
#lightgallery a:hover{
	opacity: 1.0;
	animation: flashPhoto 1.4s;}

@keyframes flashPhoto {
	0% {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* loading
++--------------------------------------------++*/
.photogallery-bk .head,
#lightgallery a img{
	display: none;}


#load{
	margin: 0 0 25em;}

#loading{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	width: 76%;
	height: 1px;
	margin: 0 0 0 -38%;
	padding: 0;
	background: #ccc;}

#loadingBar{
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #333;}

#loadingText{
	color: #333;
	font-size: 16px; font-size: 1.6rem;}