@charset "UTF-8";

/******************************/
/***********slide*********/
/******************************/
.slideWipeContainer
{
	width:100%;
	height: 100%;
	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*/
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
#slideWipe_sp{
	pointer-events: none;
}

/*.slideWipeContainer: before
{
	content: "";
	display: block;
	position: relative;
	padding-top: 100%;
	
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}*/

.slideWipe
{
/*	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*/
}
.slideWipePreLoader
{
/*	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*/
}

.slideWipeContainer .firstSrc
{
	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;}

.cap{z-index:100;}

.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(255, 255, 255, 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);}

.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;
}

.chScale
{
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-name: chScale;
}

@keyframes chScale
{
	0% {transform: scale(1, 1);}
	100% {transform: scale(1.2, 1.2);}
}

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

@media screen and (max-width: 650px)
{
	.slideWipeContainer:before
	{
		padding-top: 70%;
	}
	.imgSelector a
	{
		width:1.5em;
	}
}