@charset "UTF-8";

/******************************/
/***********slide*********/
/******************************/
.slideFadeContainer
{
	position:relative;
	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*/
}

.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 .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;
	bottom: 2rem;
	left: 0;
	width: 100%;
	z-index:9000;

	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;

	flex-wrap: no-wrap;

/*	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;*/

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-justify-content: center;
	justify-content: center;
}

.imgSelector a
{
	display: block;
	width: 1em;
	height: 1em;
	margin:.5em;
	border-radius: 50%;
	
	-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: transform .2s ease;
	-moz-transition: transform .2s ease;
	-ms-transition: transform .2s ease;
	-o-transition: transform .2s ease;
	transition: transform .2s ease;
}

.imgSelector .gray
{
	background-color: rgb(30, 30, 135);
}
.imgSelector .silver
{
	background-color: rgb(218, 50, 50);
	cursor:pointer;
}
.imgSelector .silver:hover
{
	transform: scale(1.2, 1.2);
}

.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;
	top: 50%;
	cursor:pointer;*/
	width: 50%;
	height: 100%;
	position:absolute;
	z-index:8999;
	color: rgba(255, 255, 255, 0);
	-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 (max-width: 650px) and (orientation: portrait)
{
	.slideFadeContainer:before
	{
		padding-top: 100%;
	}
	.imgSelector
	{
		left: 1rem;
		bottom:4rem;
	}
	.imgSelector a
	{
/*		width:1.5em;*/
	}
}