body {
	font-family: 'Noto Sans JP', sans-serif;
}
h1 {
	width:100%;
	margin:-10px 0px;
	padding:20px 0px;
	background-color:#000;
	font-family: 'Barlow', sans-serif;
	text-align:center;
	color:#fff;
}
#bk {
	display:none;
	position:fixed;
	width:105vw;
	height:105vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color:#fff;
}

/* ################ viewer ################## */
#viewer {
	display:none;
	position:fixed;
	width:101vw;
	height:101vh;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background-color:#fff;
	overflow-y:auto;
	z-index:100;
}
#view_image {
	display:block;
	position:relative;
	width:90%;
	top:15%;
	left:50%;
	transform:translate(-50%, 0%);
	background-color:#efefef;
	text-align:center;
}
#view_list {
	position:relative;
	width:90%;
	top:30%;
	left:50%;
	transform:translate(-50%, 0%);
}
#close_viewer, #close_viewer2, #back_viewer, #back_viewer2 {
	display:inline-block;
	position:absolute;
	width:30px;
	top:45px;
	right:10px;
	padding:20px 0px;
	font-size:40px;
	color:#ababab;
	cursor:pointer;
}#close_viewer2 {
	left:10px;
}
#back_viewer {
	right:60px;
	font-size:50px;
}
#back_viewer2 {
	left:60px;
	font-size:50px;
}

.menu {
	position:relative;
	width:30px;
	height:15px;
	top:20px;
	left:0px;
	background-image:url('../menu.png');
	background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	/*border:1px solid #000;*/
	cursor:pointer;
}
#album {
	position:relative;
	width:90%;
	height:40px;
	top:20%;
	left:50%;
	transform:translate(-50%, 0%);
	padding:10px;
	border-bottom:1px solid #dfdfdf;
}
#album_name {
	display:inline-block;
	position:absolute;
	width:190px;
	top:0px;
	padding:20px 10px;
	background-color:#efefef;
}
#add_album {
	display:inline-block;
	position:absolute;
	width:50px;
	top:0px;
	right:20px;
	padding:20px 15px;
	background-color:#ff6347;
	color:#fff;
	text-align:center;
	cursor:pointer;
	border-radius:10px;
}
#image_name {
	position:relative;
	width:90%;
	top:20%;
	left:50%;
	transform:translate(-50%, 0%);
	padding:20px 10px;
	font-size:14px;
	line-height:18px;
}

/* 画像を並べる */
#photos, #view_list {
	line-height:0;
	-webkit-column-count:5;
	-webkit-column-gap:0px;
	-moz-column-count:5;
	-moz-column-gap:0px;
	column-count:5;
	column-gap:8px;
	background-color:#fff;
}
.iimg {
	width:100% !important;
	height:auto !important;
	/*border:1px solid #000;*/
	padding:5px 0px;
}
.iimg img {
	background-color:#efefef;
	cursor:pointer;
}
@media (max-width: 1200px) {
	#photos, #view_list {
		-moz-column-count:4;
		-webkit-column-count:4;
		column-count:4;
	}
}
@media (max-width: 1000px) {
	#photos, #view_list {
		-moz-column-count:3;
		-webkit-column-count:3;
		column-count:3;
	}
}
@media (max-width: 800px) {
	#photos, #view_list {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
	}
}