/* font-family */

#splash-logo{
    font-family: "Comic Sans MS", "UD デジタル 教科書体 N-R", "BIZ UDゴシック Regular", "Hiragino Kaku Gothic ProN", "ascii"; /*フォントの種類指定(左から優先順位)*/
    letter-spacing: 0.1em;
}

/* splash */

#splash-logo{
    font-size: 2rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #627d4d;
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#splash-logo img{
	width:50px;
}

/シャッ（左から）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:2s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:2s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #627d4d;/*伸びる背景色の設定*/
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/* pc-nav */

#pc-nav span.bgLRextend::before{
    background:#627d4d;
}


@media screen and (max-width:990px) {
    #pc-nav{
        display: none;
    }
}

.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #627d4d;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgLRextendTrigger,
.bgappearTrigger,
.fadeUpTrigger,
.flipLeftTrigger{
    opacity: 0;
}