@charset "UTF-8";

/******************************/
/***********slide*********/
/******************************/
.slideFadeContainer
{
	position:relative;
	overflow:hidden;
	
	background-color: rgb(240, 240, 240);
	
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.slideFade
{
/*	position:fixed;*/
	position: absolute;
	display: block;
	overflow:hidden;
	
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.slideFadePreLoader
{
/*	position:fixed;*/
	position:absolute;
	display: block;
	overflow:hidden;
	
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.slideFadeContainer:before
{
	content: ""; 
	display: block;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-top:-5px;
	margin-left:-5px; 
	
	box-sizing:border-box;
	position: absolute;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 7px solid rgb(199, 174, 0);

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

.slideFadeContainer .firstSrc
{
	height: 0;
	width: 0;
	overflow:hidden;
	line-height:0;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.statCover{background:#ffffff; width:100%; height:100%; position:absolute; top:0; left:0; z-index:17; margin-top:0;}
.bgCover{position:absolute; top:0px; left:0px; z-index:18;}

.imgSelector{position:absolute; font-size:30px; letter-spacing:-10px; top: 1em; z-index:9999; display: none;}

.imgSelector a
{
	display: block;
	border-top: 5px solid;
	width:1em;
	height:1em;
	float:left;
	margin:.1em;
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
	-webkit-transition: background-color .2s ease;
	-moz-transition: background-color .2s ease;
	-ms-transition: background-color .2s ease;
	-o-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

.imgSelector .gray
{
	border-color: rgba(228, 0, 116, 1);
	border-color: rgba(66, 185, 172, 1);
}
.imgSelector .silver
{
	border-color: rgba(100, 100, 100, .3);
	cursor:pointer;
}
.imgSelector .silver:hover
{
	border-color: rgba(100, 100, 100, 1);
}

.photoControler{position: absolute; bottom:0; width: 100%; height: 4em; background-color: rgba(255, 255, 255, 0); display: none;}

.photoDir
{
	display: none;
	width:2em; height:2em;
	position:absolute;
	cursor:pointer;
	z-index:9999;
	top: 50%;
	color: rgba(255, 255, 255, .7);
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.photoDirR{right: 1em;}

.photoDirR:after
{
	content: "";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	position: absolute;
	top: .4em;
	left: 0em;
	width: 1em; /*ローディングアイコンの横サイズ*/
	height: 1em; /*ローディングアイコンの縦サイズ*/
	border-style: solid;
	border-width: .3em .3em 0 0;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);

	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.photoDirR:hover:after
{
	left: 0em;
}
.photoDirR:active:after
{
	left: 1em;
}

.photoDirL{left: 1em;}
.photoDirL:after
{
	content: "";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	position: absolute;
	top: .4em;
	left: .6em;
	width: 1em; /*ローディングアイコンの横サイズ*/
	height: 1em; /*ローディングアイコンの縦サイズ*/
	border-style: solid;
	border-width: .3em .3em 0 0;
	
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);

	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.photoDirL:hover:after
{
	left: .6em;
}
.photoDirL:active:after
{
	left: -.6em;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation: portrait)
{
	.slideFadeContainer:before
	{
		padding-top: 100%;
	}
	.imgSelector a
	{
		width:1.5em;
	}
}