@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*/
}

.bannerContainer
{
	overflow:hidden;
}

.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 > img
{
	height: 0;
	width: 0;
	overflow:hidden;
	line-height:0;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

.slideFadeContainer .firstSrc
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(200, 200, 200);
}

.slideFadeContainer .firstSrc:after
{
	content: ""; 
	display: block;
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	box-sizing:border-box;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(140, 140, 140);
	border-right-color: transparent;
	
	top: calc(50% - 1.25rem);
	left: calc(50% - 1.25rem);

	animation: circle-spin 1.5s linear infinite;
}

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

.slideFadeContainer .imgSelector
{
	position:absolute;
	top: calc(100% + 1rem);
	left: 0;
	width: 100%;
	padding: 0 1.5rem;
	z-index:9000;

	flex-wrap: wrap;

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

.slideFadeContainer .imgSelector a
{
	display: block;
	width: .5rem;
	height:.5rem;
	margin:.25rem;

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

.slideFadeContainer .imgSelector .gray
{
	background-color: rgba(120, 120, 120, 1);
}
.slideFadeContainer .imgSelector .silver
{
	background-color: rgba(120, 120, 120, .5);
	cursor:pointer;
}
.slideFadeContainer .imgSelector .silver:hover
{
	background-color: rgba(120, 120, 120, .7);
}

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

.slideFadeContainer .photoDir
{
/*	display: none;
	width:2em; height:2em;
	top: 50%;
	cursor:pointer;*/
	width: 50%;
	height: 100%;
	position:absolute;
	z-index:8999;
	display: none;
	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*/
}

.slideFadeContainer .photoDirR{right: 1em;}

.slideFadeContainer .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;
}
.slideFadeContainer .photoDirR:hover:after
{
	left: 0em;
}
.slideFadeContainer .photoDirR:active:after
{
	left: 1em;
}

.slideFadeContainer .photoDirL{left: 1em;}
.slideFadeContainer .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;
}
.slideFadeContainer .photoDirL:hover:after
{
	left: .6em;
}
.slideFadeContainer .photoDirL:active:after
{
	left: -.6em;
}

.chScale, .chScale_re
{
	transform: scale(1, 1);
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-name: chScaleAnim;
}

@keyframes chScaleAnim
{
	0% {transform: scale(1, 1);}
	100% {transform: scale(1.1, 1.1);}
}

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

@media screen and (max-width: 650px) and (orientation: portrait)
{
	.chScale, .chScale_re
	{
		animation-duration: 15s;
		animation-timing-function: linear;
		animation-iteration-count: 1;
		animation-name: chScaleAnim;
	}
	@keyframes chScaleAnim
	{
		0% {transform: scale(1, 1);}
		100% {transform: scale(1.2, 1.2);}
	}
	.slideFadeContainer:before
	{
		padding-top: 100%;
	}
	.slideFadeContainer .imgSelector a
	{
/*		width:1.5em;*/
	}
}