@charset "UTF-8";

#dspKw br,
.pageInfo br
{
	display: none;
}

#dspKw{
	position: absolute;
	z-index: 1000;
	top: 12px;
	right: 44px;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 16px;
	box-sizing: border-box;
	border: #efefef solid 1px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: rgba(255,255,255,0.9);
}

.loadingAnCss{
	position: absolute; 
	top: 50%; 
	left: 50%; 
	margin-left: -76px; 
	margin-top: -120px
}	


#dspKw,
#dspKw em#dspInfo{
	color: #999;
	font-size: 10px;
}

#dspKw em{
	color: #b3a066;
}

#dspKw,
#dspKw em#hit{
	color: #703800;
}

#dspKw.column{
	top: 8px;
}

#dspKw.column br{
	display: inline;
}

#thumbMenu .closeMenu
{
	position: absolute;
	top: -12px;
	right: 8px;
	z-index: 111;
	padding: 4px;
	width:12px;
	height: 12px;
	line-height: 12px;
	color: #d9d9d9;
	text-align: center;
	background: #5e5e6e;
	border: #000 solid 2px;/**/
	-webkit-border-radius: 50%;
	-moz-border-radius:50%;
	border-radius:50%;
	transform: scale(1.6,1.6);
}

html{
	min-width: 320px;
}

body{
	padding: 0;
	font-size:90%;
	line-height:1.4em;
	font-family: 'メイリオ','ＭＳ Ｐゴシック','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Meiryo',  'Osaka',  sans-serif;
	color:#666666;
	background:#d1d1d1;
	background: #fff;
	border: unset;
}

#container{
	margin:0 auto;
	/* min-width: 768px; */
	/* border:1px #bfbfbf solid; */
}

.hwrapper{
	height: 49px;
}

#leftBox,
#container,
header
{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.scrollbar-macosx > .scroll-element.scroll-y{
	right: -4px !important;
	right: 0px !important;
}

#mainContents{
	position:relative;
	padding: 0;
	width: calc(100% - 176px);
	height: 98%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}

#container{
	height: 100%;
}

#main{
	display: flex;
	flex-flow: row wrap;/*並びの方向　折り返しのありなし*/
	justify-content: center;
	padding: 8px 36px;
	width: 100%;
	height: calc( 100% - 95px );
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#mainContents,
#leftBox
{
	/* display: table-cell; */
	/* vertical-align: top; */
	
}

#gallery{
	display: block;
	display: flex;
	flex-flow: row wrap;
	-webkit-justify-content: center;
	/* justify-content: flex-start; */
	justify-content: center;
	align-content: start;
	height: calc( 100% - 64px);
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#gallery.on{
	transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-webkit-transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-ms-transition: all 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#gallery.over{
	transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-webkit-transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000); 
	-ms-transition: all 0.6s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#container header{
	position: fixed;
	z-index: 12;
	top: 0;
	left: 0;
	display:table;
	padding: 8px;
	background: rgba(230,230,230,0.5);
	border:#dadada solid;
	border-width:0 0 1px;
	-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	-ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1) ;
	box-shadow:  0 0px 4px rgba(26,26,26,0.2);
}

header.fixed{
}

header h1#logo{
	display:table-cell;
	vertical-align:middle;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header section{
	display:table-cell;
}

header h1#logo a{
	display:table-cell;
	padding-left: 36px;
	min-width: 32px;
	height: 30px;
	font-weight: normal;
	line-height:30px;
	font-size:28px;
	font-family: 'Poiret One', cursive;
	color:#baa359;
	background:  url('./images/shvLogo_w27@2x.png') 0 2px no-repeat;
	background-size: 27px auto;
}

header h1#logo a:hover{
	color:#ff9302;
}

header .wrapper{
	display: table;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

header nav{
	position: absolute;
	right: 0px;
	top: 8px;
	padding:0 8px 0 0;
	text-align:left;
}

header nav a {
}

header nav a#search {
	position: relative;
	z-index: 998;
	display: table;
	padding: 0;
	width: 32px;
	height:32px;
	font-size:16px;
	line-height:16px;
	color:#b09849;
	text-align: center;
	background: rgba(255,255,255,0.8);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

a#search em{
	
}
header nav a#search i,
header nav a#search em
{
	display: table-cell;
	vertical-align: middle;
}

header nav a:hover {
	color:#ff9302;
}

header h1#catch{
	height:32px;
	font-size:32px;
	line-height:32px;
	font-family: 'Poiret One', cursive;
}

header h2{
	font-weight:normal;
	font-size:12px;
}

/* ■LEFT BOX　++++++++++++++++++++*/

#leftBox{
	padding: 0 16px 0 0;
	width:170px;
	height: 100%;
	overflow: hidden;
}

#leftBox h1{
	width:160px;
	height:28px;
	line-height:36px;
	font-size:20px;
	font-family: 'Poiret One', cursive;
	color: #baa359;
}

#delCk{
	height:20px;
	color:#fff;
	font-size:10px;
	text-align:center;
	line-height:20px;	
	background:	#b3b3b3;
	border:2px #fff solid;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
}

#delCk:hover{
	background:	#ce8289;
	cursor:pointer;
}


/* ■GALLERY　+++++++++++++++++++++++++*/

#gallery li{
	position:relative;
	display:block;
	width:152px;
	height: 240px;
	border:5px #fff solid;
	float:left;
	overflow:hidden;
	transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
    -ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);

}

/* ■NO Result */

#gallery.noResult{
	position: relative;
	left: -88px;
	display: table;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

#gallery.noResult li#noResult{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	float: none;
}

#gallery li p{
	/* font:12px/20px "Arial Black"; */
	display: flex;
	flex-flow: column;
	justify-content: start;
	padding-top: 4px;
	width: 100%;
	height:auto;
	text-align: left;
	font-size:0.6rem;
	line-height: 0.8rem;
	border-bottom: #e7e7e7 solid 1px;
	box-sizing: border-box;
}

#gallery li p em{
	display: block;
	padding:0 4px 0 0;
	box-sizing: border-box;
}

#gallery li p span{
	display: block;
	/* word-break: break-all; */
	line-break: anywhere;
}

#gallery a{
	display:block;
	width: 100%;
	height: 200px;
	text-align:center;
	overflow:hidden;
}

#gallery a img{
	height:200px;
}

.light{
	color:#429e82;
}

.standard{
	color:#006bd8;
}

.premium{
	color:#9e702b;
}

.excellent{
	color:#e50615;
}

#thumbMenu{
	position:absolute;
	padding:6px 1px;
	bottom:0;
	left:0;
	z-index:10;
	width:100%;
	color:#d9d9d9;
	background:rgba(0,0,0,0.8);
	font-size:10px;
	line-height:14px; 
	/* border:1px #000 solid; */
	
}

#thumbMenu span,
#thumbMenu a
{
	display:block;
	padding:2px 10px;
}

#thumbMenu span:hover,
#thumbMenu a:hover
{
	cursor:pointer;
	color:#aa0000;
	background:#d9d9d9;
}

#mainContents:after,
#gallery:after,
#mybox:after,
#main:after
{
	content:" ";
	display:block;
	clear:both;
	height:0px;
	background:#fff;
}

/*拡大画像*/

#hdPrv{
	margin:0 auto;
	padding:10px 10px 42px;
	height:10px;
	width:10px;
	text-align:center;
	/* position: relative; */
	background:#fff;
}

#hdPrv img{
	display:inline;
	/* height:600px; */
}

#hdPrv img#hd{
	display:inline;
	height:480px;/*  */
}

#hdPrv span#close,
#hdPrv div#close{
	position: absolute;
	right: 8px;
	display:none;
	margin:0;
	padding:0;
	width:32px;
	height:32px;
	font-family:"Arial Black";
	font-size:12px;
	color:#fff;
	line-height:32px;
	text-align:center;
	font-weight:bold;
	background:#000;
	border:none ;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

#hdPrv span#close:hover,
#hdPrv div#close:hover{
	color:#ef9c99;
	cursor:pointer;
	background:#595959;
}

/*PAGE NAVI +++++++++++++++++*/

.pageNavi{
	display: table;
	position: absolute;
	right: 8px;
	top: 8px;
	padding:0;
	width: 148px;
	height:32px;
	font-size:0.8rem;
	line-height:21px;
	-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	-ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1) ;
}

.pageNavi.bottom{
	z-index: 10;
	position: fixed;
	top: calc(100% - 70px);
	right: 8px;
}

.pageNavi.reduction{
	/* width: 0; */
}

.pageNavi i{
	display: table;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.pageNavi i:before{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.pageNavi .fa{
	font-size: 1.2rem;
}

.prevPage,
.nextPage,
.pageInfo{
	display: table-cell;
	padding: 0;
	height: 32px;
	text-align:center;
	cursor:pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.pageInfo{
	padding: 2px 4px 0 4px;
	width: 84px;
	font-size: 0.8rem;
	border: #e5e5e5 solid 1px;
	line-height: 28px;
	background:rgba(255,255,255,0.7);
}

.prevPage,
.nextPage
{
	width: 32px;
	vertical-align: middle;
	background: rgba(179,198,255,0.7); 
}

a.prevPage:hover,
a.nextPage:hover{
	color: #fff;
	background: rgba(255,179,217,0.8); 
	
}

/* FORM +++++++ */

#searchForm{
	position: relative;
	z-index: 999;
	
}

#searchForm ul{
	position: absolute;
	right: 0;
	top: 6px;
	padding: 0 8px;
	width: 240px;
	height: auto;
	height: 0;
	background: rgba(255,255,255,0);
	border: transparent solid 1px;
	overflow: hidden;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	-ms-transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1);
	transition: all 0.3s cubic-bezier(0.42, 0, 0.52, 1) ;
}

#searchForm .selectBox{
	position: relative;
	z-index: 11;
	margin-bottom: 0px;
	padding: 8px 16px;
	height: auto;
	min-height: 18px !important;
	font-size: 14px;
	line-height: 18px;
	color: #fff;
	vertical-align: middle;
	background: rgba(102,119,28,0.6);
	border: #a0ad6a solid 1px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
}

#searchForm ul.expand.visible,
#searchForm .selectBox.visible{
	overflow: visible;
}

#searchForm ul li div{
	position: relative;
}

#searchForm .selectBox.selected{
	background: #778933;
}

#searchForm .selectBox.selected{
	
}

#searchForm .selectBox.selected span.record{
	color: #e6ff99
}

#searchForm .selectBox.slideDown ul.box2 li .selectValue{
	padding: 9px 12px 8px;
}

#searchForm .selectBox.slideDown ul.box2 li .selectValue.guid{
	font-size: 12px;
}

#searchForm .textbox,
#searchForm .bodyComment{
	position: relative;
	margin-bottom: 0px;
	padding: 8px 16px 8px;
	height: auto;
	min-height: 18px !important;
	font-size: 14px;
	line-height: 18px;
	vertical-align: middle;
	background: rgba(255,255,255,0.5);
	border: #ccc solid 1px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
}
#searchForm .bodyComment.placeholder{
	color: #ccc;
}

/* #searchForm ul li:not(:last-child) div:after{
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 36px;
	color: #000;
	line-height: 36px;
	text-indent: 8px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

#searchForm ul li div#keyW:after{
	content: "Search Word";
}
 */

 #searchForm .bodyComment.on{
	line-height: 24px;
	background: rgba(255,255,255,1);
}

/*	header .pageNavi{display: none;}
		
	.pageNavi.bottom{
		position: static;
		top: 0;
		right: 0;
		margin-top: -18px;
	}
	
	.pageNavi.bottom	.prevPage,
	.pageNavi.bottom	.nextPage
	{
		display: block;
		width: 44px;
		height: 44px;
		color: #fff;
		vertical-align: middle;
		text-align: center;
		text-shadow: 
		1px 1px 4px rgba(154,154,154,0.3),
		1px -1px 4px rgba(154,154,154,0.3),
		-1px 1px 4px rgba(154,154,154,0.3),
		-1px -1px 4px rgba(154,154,154,0.3)
		;
		background: transparent;
	}
	
	.pageNavi.bottom	.prevPage i,
	.pageNavi.bottom	.nextPage i{
		width: 100%;
		height: 100%;
		display: table;
	}
	
	.pageNavi.bottom	.prevPage i:before,
	.pageNavi.bottom	.nextPage i:before{
		display: table-cell;
		vertical-align: middle;
		font-size: 1.8rem;
	}
	
	.pageNavi.bottom	.nextPage,
	.pageNavi.bottom	.prevPage{
		position: fixed;
		top: 50%;
		z-index: 11;
		margin-top: -18px;
	}
	
	.pageNavi.bottom	.prevPage{
		left: 0px;
	}
			
	.pageNavi.bottom	.nextPage{
		right: 0px;
	}

	.pageNavi.bottom .pageInfo{
		position: fixed;
		right: 4px;
		top: 50%;
		z-index: 11;
		display: flex;
		display: table;
		flex-flow: column wrap;
		-webkit-justify-content: center;
		justify-content: center;
		
		margin-top: -60px;
		padding: 0;
		width: 36px;
		height: 36px;
		color: #ddd;
		font-size: 7px;
		line-height: 10px;
		text-align:center;
		vertical-align: middle;
		cursor:pointer;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: rgba(254,252,255,0.8);
		border: #c1c1c1 solid 2px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}

	.pageNavi.bottom .pageInfo .denominator{
		display: block;
		font-size: 10px;
	}
	
	.pageInfo span{
		display: table-cell;
		vertical-align: middle;
		color: #666;
	}
	
	.pageInfo em{
		position: relative;
		top: -2px;
		display: inline-block;
		margin-right: 2px;
		width: 4px;
		vertical-align: middle;
	}*/


/* @media only screen and (max-width: 416px){ */
@media only screen and (max-width: 480px){

	#searchForm ul{
		position: fixed;
		top: 48px;
		right: 50%;
		margin-right: -120px;
	}

}

#searchForm ul.expand{
	padding: 8px;
	height: 372px;
	background: rgba(255,255,255,0.8);
	border: #cccccc solid 1px;
	-webkit-box-shadow: 0 4px 4px rgba(26,26,26,0.1);
	-moz-box-shadow:  0 4px 4px rgba(26,26,26,0.1);
	box-shadow:  0 4px 4px rgba(26,26,26,0.1);
}

#searchForm ul.expand.flexible{
	height: auto;
	min-height: 232px;
}

#searchForm ul li{
	margin-bottom: 4px;
}

#searchForm ul li:last-child{
	text-align: center;
}

#searchForm ul.box1>li:last-child{
	padding-top: 20px;
	text-align: center;
}

#searchForm ul input{
	padding: 4px;
	border: #e5e5e5 solid 1px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#searchForm ul button{
	padding: 8px 16px;
	font-size: 14px;
	color: #fff;
	letter-spacing: 2px;
	border: unset;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#searchForm ul button.submit{
	background: #d66d8d;
}

#searchForm ul button.cancel{
	background: #50c4dc;
}

#searchForm ul button:first-child{
	margin-right: 8px;
}

#searchForm .expand li .bodyComment#keyW.on:before{
	content: 'search:';
}

#searchForm .expand li .bodyComment#exc.on:before{
	content: 'exclude:';
}

#searchForm .expand li .bodyComment#pageView.on:before{
	content: 'display:';
}

#searchForm .expand li .bodyComment#pageNum.on:before{
	content: 'page number:';
}

#searchForm .expand li .selectBox#imgTrim.done:before{
	content: 'image trimming:';
}

#searchForm .expand li .selectBox#imgConv.done:before{
	content: 'hireso directry:';
}

#searchForm .expand li .selectBox#imgDir.done:before{
	content: 'select directry:';
}

#searchForm .expand li .selectBox.done{
	/* line-height: 26px; */
}

#searchForm .expand li .selectBox.done em{
	position: relative;
	top: 4px;
	display: block;
	line-height: 20px;
}

#searchForm .expand li .selectBox.done:before,
#searchForm .expand li .bodyComment.on:before{
	position: absolute;
	left: 17px;
	top: 4px;
	font-size: 8px;
	line-height: 8px;
	color: #869351;
}

#searchForm .expand li .bodyComment.on:before{
	top: 2px;
}

#searchForm .expand li .selectBox.done:before{
	color: #fff;
}

footer{
	padding:0 8px;
	height:30px;
	background:#000;
	color:#cccccc;
	text-align:center;
	line-height:30px;
	font-size:10px;
}


@media only screen and (max-width: 816px){
	
	#leftBox{
		overflow: visible;
	}

}

@media only screen and (max-width: 768px){

	header nav{right: 8px;}
	header #dspKw{right: 52px;}
	
	header .pageNavi{display: none;}
		
	.pageNavi.bottom{
		position: static;
		top: 0;
		right: 0;
		margin-top: -18px;
	}
	
	.pageNavi.bottom	.prevPage,
	.pageNavi.bottom	.nextPage
	{
		display: block;
		width: 44px;
		height: 44px;
		color: #fff;
		vertical-align: middle;
		text-align: center;
		text-shadow: 
		1px 1px 4px rgba(154,154,154,0.3),
		1px -1px 4px rgba(154,154,154,0.3),
		-1px 1px 4px rgba(154,154,154,0.3),
		-1px -1px 4px rgba(154,154,154,0.3)
		;
		background: transparent;
	}
	
	.pageNavi.bottom	.prevPage i,
	.pageNavi.bottom	.nextPage i{
		width: 100%;
		height: 100%;
		display: table;
	}
	
	.pageNavi.bottom	.prevPage i:before,
	.pageNavi.bottom	.nextPage i:before{
		display: table-cell;
		vertical-align: middle;
		font-size: 1.8rem;
		/* transform: scaleY(1.8); */
	}
	
	.pageNavi.bottom	.nextPage,
	.pageNavi.bottom	.prevPage{
		position: fixed;
		top: 50%;
		z-index: 11;
		margin-top: -18px;
	}
	
	.pageNavi.bottom	.prevPage{
		left: 0px;
	}
			
	.pageNavi.bottom	.nextPage{
		right: 0px;
	}

	.pageNavi.bottom .pageInfo{
		position: fixed;
		right: 4px;
		top: 50%;
		z-index: 11;
		display: flex;
		display: table;
		flex-flow: column wrap;
		-webkit-justify-content: center;
		justify-content: center;/*並び方の配置規則*/
		
		margin-top: -60px;
		padding: 0;
		width: 36px;
		height: 36px;
		color: #ddd;
		font-size: 7px;
		line-height: 10px;
		text-align:center;
		vertical-align: middle;
		cursor:pointer;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: rgba(254,252,255,0.8);
		border: #c1c1c1 solid 2px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
	}

	.pageNavi.bottom .pageInfo .denominator{
		display: block;
		font-size: 10px;
	}
	
	.pageInfo span{
		display: table-cell;
		vertical-align: middle;
		color: #666;
	}
	
	.pageInfo em{
		position: relative;
		top: -2px;
		display: inline-block;
		margin-right: 2px;
		width: 4px;
		vertical-align: middle;
	}

	footer{
		position: fixed;
		left: 0;bottom: 0;
		z-index: 4;
		width: 100%;
	}
}

@media only screen and (max-width: 680px){

	#main{
		display: flex;
		flex-flow: column wrap;
		padding: 0 8px;
		width: 100%;
		height: calc( 100% - 65px );
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#leftBox
	{
		order: 0;
		display: block;
		width: 100%;
		vertical-align: top;
	}

	#mainContents{
		order: -1;
		display: block;
		padding: 0;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

	header h1#logo span
	{
		display: none;
	}
	
	header,
	header section{
		height: 32px;
	}
		
	#gallery{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;/*並び方の配置規則*/
		padding-top: 8px;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
		
	#gallery li{
		flex: 0 0 148px;
		position: relative;
		z-index: 2;
		margin-bottom: 8px;
		padding: 0 2px;
		width:148px;
		min-width: 148px;
		height: 225px;
		border: unset;
		float: unset;
	}

	#thumbMenu{
		padding: 0;
	}

	#thumbMenu span,
	#thumbMenu a
	{
		display:block;
		padding:12px;
		border-bottom: #626262 solid 1px;
	}
		

	footer{
		padding:0 8px;
		height:16px;
		background:#000;
		color:#cccccc;
		text-align:center;
		line-height:16px;
		font-size:8px;
	}



}

@media only screen and (max-width: 480px){
	

	#searchForm ul{
		left: 0;
		width: 100%;
	}
		
	#searchForm ul li:last-child{
		padding-top: 0;
		text-align: center;
	}

}

header .pageNavi{display: none;}
	
.pageNavi.bottom{
	position: static;
	top: 0;
	right: 0;
	margin-top: -18px;
}

.pageNavi.bottom	.prevPage,
.pageNavi.bottom	.nextPage
{
	display: block;
	width: 44px;
	height: 44px;
	color: #fff;
	vertical-align: middle;
	text-align: center;
	text-shadow: 
	1px 1px 4px rgba(154,154,154,0.3),
	1px -1px 4px rgba(154,154,154,0.3),
	-1px 1px 4px rgba(154,154,154,0.3),
	-1px -1px 4px rgba(154,154,154,0.3)
	;
	background: transparent;
}

.pageNavi.bottom	.prevPage i,
.pageNavi.bottom	.nextPage i{
	width: 100%;
	height: 100%;
	display: table;
}

.pageNavi.bottom	.prevPage i:before,
.pageNavi.bottom	.nextPage i:before{
	display: table-cell;
	vertical-align: middle;
	font-size: 1.8rem;
	/* transform: scaleY(1.8); */
}

.pageNavi.bottom	.nextPage,
.pageNavi.bottom	.prevPage{
	position: fixed;
	top: 50%;
	z-index: 11;
	margin-top: -18px;
}

.pageNavi.bottom	.prevPage{
	left: 0px;
}
		
.pageNavi.bottom	.nextPage{
	right: 0px;
}


.pageNavi.bottom .pageInfo{
	position: fixed;
	right: 4px;
	top: 50%;
	z-index: 11;
	display: flex;
	display: table;
	flex-flow: column wrap;
	-webkit-justify-content: center;
	justify-content: center;/*並び方の配置規則*/
	margin-top: -60px;
	padding: 0;
	width: 36px;
	height: 36px;
	line-height: 10px;
	text-align:center;
	vertical-align: middle;
	cursor:pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: rgba(254,252,255,0.8);
	border: #c1c1c1 solid 2px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.pageNavi.bottom .pageInfo .denominator{
	display: block;
	font-size: 10px;
}

.pageInfo span{
	display: table-cell;
	vertical-align: middle;
	color: #666;
	color: #c1c1c1;
	font-size: 0.7rem;
}

.pageInfo span em{
	position: relative;
	top: 0px;
	left: 1px;
	display: inline-block;
	margin-right: 2px;
	width: 4px;
	vertical-align: middle;
}

.pageInfo span strong{
	display: block;
	margin-bottom: 0;
	font-size: 1.2em;
}

.pageInfo span s{
	display: inline-block;
	position: relative;
	z-index: 11;
	top: 2px;
	padding-top: 2px;
	font-size: 0.8em;
	border-top: #e7e7e7 solid 1px;
}

#gallery .done{
	opacity: 0.2;
}