.index .loader-wrap,
.lower .loader-wrap {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #fff;
    z-index: 1001;
}

.index .loader,
.lower .loader {
    width: 60%;
    height: auto;
    margin: 0 auto;
}

/* ローディングアニメーション */
@keyframes svg {
    0% {
        fill: transparent;
        stroke-dashoffset: 600px;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

.fo1 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 0s, 3s;
}
.fo2 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 0.3s, 3s;
}
.fo3 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 0.6s, 3s;
}
.fo4 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 0.9s, 3s;
}
.fo5 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 1s, 3s;
}
.fo6 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 1.1s, 3s;
}
.fo7 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 1.3s, 3s;
}
.fo8 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.8s ease-in both, svg-color 2s ease-in both;
    animation-delay: 1.5s, 3s;
}
.fo9 {
    stroke: #242424;
    stroke-width: 0.8px;
    stroke-dasharray: 600px;
    animation: svg 0.5s ease-in both, svg-color 2s ease-in both;
    animation-delay: 1s, 3s;
}

@keyframes svg-color {
    0% {
        fill: transparent;
    }
    90% {
        fill: #242424;
    }
    100%{
        fill: #242424;
    }   
}

/* ヘッダーテキスト */
.keyword {
    opacity: 0;
    animation: keyword 1.5s 3.5s 1 forwards;
    -webkit-animation: keyword 1.5s 3.5s 1 forwards;
    -moz-animation: keyword 1.5s 3.5s 1 forwards;
}

@keyframes keyword {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes keyword {
    0% {
        -webkit-opacity: 0;
    }

    100% {
        -webkit-opacity: 1;
    }
}

@-moz-keyframes keyword {
    0% {
        -moz-opacity: 0;
    }

    100% {
        -moz-opacity: 1;
    }
}

/* スクロールアニメーション */
/* フェードインアップ */
.move.fadeInUp {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1.5s;
}

/* フェードイン */
.move.fadeIn {
    opacity: 0;
    transition: all 1.5s;
}

/* ぼかしイン */
.move.blurIn {
    opacity: 0;
    filter: blur(30px);
    transition: filter .8s ease, opacity .8s ease;
}

/* スライドイン */
.move.slideIn {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s,transform 0.5s;
}

/* スライドインライト */
.move.slideInRight {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s,transform 0.5s;
}

/* 画面内に入った状態 */
.move.scrollin.fadeInUp,
.move.scrollin.fadeIn {
    opacity: 1;
    transform: translate(0, 0);
}

.move.scrollin.blurIn {
    opacity: 1;
    filter: blur(0);
}

.move.scrollin.slideIn {
    opacity: 1;
    transform:translateX(0);
}

.move.scrollin.slideInRight {
    opacity: 1;
    transform:translateX(0);
}

/* トップセクションアニメーション */
/* フェードインアップ */
.effect-fadeInUp {
    animation: effect-fadeInUp 1.5s ease .5s 1 normal;
}

@keyframes effect-fadeInUp {
    0% {opacity: 0;transform: translate(0, 50px);}   
    100% {opacity: 1;transform: translate(0, 0);} 
}

/* フェードイン */
.effect-fadeIn {
    animation: effect-fadeIn 1.5s ease .5s 1 normal;
}

@keyframes effect-fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;transform: translate(0, 0);} 
}
/* ぼかしイン */
.effect-blurIn {
    animation: effect-blurIn .8s ease .5s 1 normal;
}

@keyframes effect-blurIn { 
    0% {opacity: 0;filter: blur(30px);} 
    100% {opacity: 1;filter: blur(0);} 
}