@-webkit-keyframes loadingAnim{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
}
@keyframes loadingAnim{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
        -webkit-transform: translate(100%);
        transform: translate(100%);
    }
}
@-webkit-keyframes loadingAnim_text{
    0%{
        opacity: 1;
        color: #cba166;
    }
    50%{
        color: #333;

    }
    100%{
        opacity: .5;
        color: #fff;
    }
}
@keyframes loadingAnim_text{
    0%{
        opacity: 1;
        color: #cba166;
    }
    50%{
        color: #333;
    }
    100%{
        opacity: .5;
        color: #fff;
    }
}



/********************
settings
********************/
::-moz-selection{
    background-color: rgba(0,105,255,.3);
}
::selection{
    background-color: rgba(0,105,255,.3);
}


/********************
loading effects
********************/
.loadingAnim{
    position: fixed;
    z-index: 1010;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.loadingAnim_line{
    line-height: 1;
    position: fixed;
    z-index: 1010;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 1.25em;
    margin: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .6s;
    text-align: center;
}
.loadingAnim_line:after{
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    margin: auto  auto auto 0;
    content: ' ';
    -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    background-color: #fff;
    will-change: transform, width;
}
.loadingAnim_line:before{
    font-family: 'Poppins', sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    display: block;
    content: 'あいうえお';
    -webkit-animation: loadingAnim_text 1s ease .1s infinite alternate both;
    animation: loadingAnim_text 1s ease .1s infinite alternate both;
    letter-spacing: .1em;
    color: #fff;
    will-change: opacity;
}
.loaded .loadingAnim_line{
    overflow: hidden;
    height: 0;
}
.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before{
    -webkit-animation: none;
    animation: none;
}
.loaded .loadingAnim_line:before{
    content: '';
}

.loadingAnim:before,
.loadingAnim:after{
    line-height: 1;
    position: fixed;
    z-index: 99;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50%;
    margin-right: auto;
    margin-left: auto;
    content: ' ';
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .3s;
    background-color: #000;

}
.loadingAnim:before{
    top: 0;
}
.loadingAnim:after{
    bottom: 0;
}

.loaded .loadingAnim:before{
    height: 0;
    -webkit-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    transform: translateY(-1%);
}
.loaded .loadingAnim:after{
    height: 0;
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
}



/********************
style
********************/
.index{
    line-height: 1;
    margin: 0;
    position: absolute;
    z-index: 9;
    top: 35%;
    left: 10%;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #111;
}
.index_wow{
    margin: 0 0 10px 0;
    font-size: 10vw;    
    letter-spacing: -0.01em;
}
.index_description{
    font-size: 2.5vw;
    letter-spacing: 0.085em;
}

@media screen and ( max-width: 768px ){
    .index_wow{
        font-size: 40px;    
    }
    .index_description{
        font-size: 10px;
    }
}


h1 {
	color: white;
	text-align:center;
    font-size:16px;
	font-weight: bold;
	margin-top: 50px;
}

/*********************************************************************************************************************************************************/

/***** タイピング *****/
h1 .txt {
	display: none;
}

.typ {
	display: inline-block !important;
    width: 260px;
    padding: 5px 0 0 5px;
    text-align: center;
    font-size: 2rem;
    line-height: 1;
    /*letter-spacing: .5px;*/
    /*letter-spacing: -3px;*/
    font-family: 'Kosugi', sans-serif;
	border-right: .08em solid;
	overflow: hidden;
	white-space: nowrap;
	animation: typing 1s steps(11, end), caret 1s step-end infinite;
}
@keyframes typing {
	from { width: 0; }
}

@keyframes caret {
	50% { border-right-color: transparent; }
}

/***** メインロゴ *****/
.Headline{
	animation: SlideIn .75s;
}
@keyframes SlideIn {
	0% {
		opacity: 0;
		transform: translateY(64px);
		transform: scale(2, 2);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		transform: scale(1, 1);
	}
}

/***** 下層ページ メインタイトル *****/
.main-line{
	animation: Slider .75s;
}
@keyframes SlideIn {
	0% {
		opacity: 0;
		transform: translateY(64px);
		transform: scale(2, 2);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		transform: scale(1, 1);
	}
}

/***** フェード処理 *****/
.fead {
	display:inline-block !important;
	animation: fadeIn .5s 1s; 
	animation-fill-mode: both;
}
.fead-block {
	animation: fadeIn 1s 2s; 
	animation-fill-mode: both;
}

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


.loading span {
	display: inline-block;
	margin: 0 -.125em;
	animation: loading .9s 6 alternate;
}
.loading span:nth-child(2) { animation-delay: .1s;}
.loading span:nth-child(3) { animation-delay: .2s;}
.loading span:nth-child(4) { animation-delay: .3s;}
.loading span:nth-child(5) { animation-delay: .4s;}
.loading span:nth-child(6) { animation-delay: .5s;}
.loading span:nth-child(7) { animation-delay: .6s;}
.loading span:nth-child(8) { animation-delay: .7s;}
.loading span:nth-child(9) { animation-delay: .8s;}
@keyframes loading {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
 	 }
}


.zoomin{
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
	opacity: 0;
}
.zoomin.active{
	opacity: 1;
}

@media all and (max-width:1024px){
	.typ {
	    font-size: 1.85rem;
	}
}


@media all and (max-width:480px){
	.typ {
	    width: 205px ;
	}
	@keyframes fadeIn {
	    0% {
	      opacity: 0;
	      transform: scale(1, 1);
	    }
	    100% {
	      opacity: 1;
	      transform: scale(1, 1);
		}
	}
}


/***** テキスト下線 *****/

.Text-Span {
	position: relative;
	z-index: 1;
}
.Text-Span:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0%;
	height: .5px;
	background: #00CCFF;
	z-index: -1;
	transition: all 8s;
}
.Text-Span.isActive:after {
	width: 100%;
}