@charset "utf-8";

/**
 *
 *  COMMON
 *
 */

/*--------------------------------------------------------------------------
   style
---------------------------------------------------------------------------*/

/* text
-----------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   template
---------------------------------------------------------------------------*/

/* c_loading
-----------------------------------------------------------------*/
/* debug */
/*
.c_loading {
	opacity:1 !important;
	display:block !important;
}
*/

.c_loading {
  position: fixed;
  width: 100%;
  height: 100%;
	padding-right: 80px;
  text-align: center;
  z-index: 9999;
	background:#000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.c_loading .img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -45px;
}
.c_loading .progress-cut{
    width: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px;
    margin-left: -162px;
    margin-top: -24px;
}
.c_loading .progress-back{
	width:100%;
	height: 100%;
}
.c_loading .progress-back{
	background:url(../images/index/logo3.png) center no-repeat;
	background-size: 100% 100%;
}
.c_loading .progress {
	position:absolute;
    width: 0;
    height: 60px;
	background:url(../images/index/logo2.png) 0 0;
	/*
 -webkit-animation: bgscroll 1s linear infinite;
 animation: bgscroll 1s linear infinite;
 */
}
.c_loading .progress span{
	display: block;
	position: absolute;
	top: 40px;
	right: -13px;
	z-index: 1;
	color: #ffdd01;
	font-size: 10px;
  -webkit-transition: all .5s ease;
          transition: all .5s ease;
}
.c_loading .mask{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -162px;
	margin-top: -24px;
	z-index: 1;
	width: 350px;
	height: 60px;
}

/* ロード終了時 */
.loading .c_loading .progress span{
	top:40px;
	opacity:1;
}
.load-done .c_loading .progress span{
	top:50px;
	opacity:0;
}

.c_loading .progress-cut,
.c_loading .mask{
  -webkit-transition: all .8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
          transition: all .8s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.load-done .c_loading .progress-cut,
.load-done .c_loading .mask{
	 -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -ms-transform: scale(.8);
  -o-transform: scale(.8);
	transform: scale(.8);
}
.load-done .c_loading .progress-cut{
	opacity:0;
}

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 200px 0;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 200px 0;}
}

/* @SP */
@media all and (max-width: 767px) {
	.c_loading .mask{
		margin-left:-62px;
		margin-top:-12px;
	}
	.c_loading .progress-cut{
		margin-left:-62px;
		margin-top:-12px;
	}
	.c_loading .mask img{
		width:125px;
		height:24px;
	}
	.c_loading .progress-cut{
		width:125px;
		height:24px;
	}
	.c_loading .progress-back{
		width:100%;
		height: 100%;
		background-size:125px 24px;
	}
	.c_loading .progress {
    height: 24px;
		background-size:125px 24px;
	}

	/* ロード終了時 */
	.c_loading .progress span{
		top:23px;
	}
	.loading .c_loading .progress span{
		top:23px;
		opacity:1;
	}
	.load-done .c_loading .progress span{
		top:28px;
		opacity:0;
	}
}