.loading_wrap {
 position:fixed;
 left:0;
 top:0;
 width:100%;
 height:100%;
 z-index:800;
 -webkit-transform:skewX(-35deg);
 transform:skewX(-35deg)
}
.loading_wrap.active .load_left {
 -webkit-transform:translateX(-120%);
 transform:translateX(-120%)
}
.loading_wrap.active .load_right {
 -webkit-transform:translateX(120%);
 transform:translateX(120%)
}
.loading_wrap .load_left {
 position:fixed;
 right:calc(50% - 1px);
 top:0;
 width:100%;
 height:100vh;
 z-index:10002;
 background-color:#ff3300;/*----------------------------------------はじめの背景色---------------------------*/
 -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:-webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, -webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s
}

@media (max-width: 767px) {
 .loading_wrap .load_left {width:115%}
}

.loading_wrap .load_right {
 background-color:#ff3300;/*----------------------------------------はじめの背景色---------------------------*/
 position:fixed;
 left:calc(50% - 1px);
 bottom:0;
 width:100%;
 height:100vh;
 z-index:10002;
 -webkit-transition:-webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:-webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
 transition:transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, -webkit-transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s
}
@media (max-width: 767px) {
 .loading_wrap .load_right {width:115%}
}

.load_mask {
 width:100%;
 height:100%;
 position:fixed;
 top:0;
 left:0;
 background-color:#fff;
 z-index:10000000
}
.loading {
 width:35px;
 height:35px;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto
}
.circle1,
.circle2 {
 width:100%;
 height:100%;
 border-radius:50%;
 border:2px solid #ccc;
 opacity:0.7;
 position:absolute;
 top:0;
 left:0;
 -webkit-animation:load 1.7s infinite ease-in-out;
 animation:load 1.7s infinite ease-in-out
}
.circle2 {
 -webkit-animation-delay:-0.9s;
 animation-delay:-0.9s
}
@-webkit-keyframes load {
 0% {-webkit-transform:scale(0);transform:scale(0)}
 50% { -webkit-transform:scale(1);transform:scale(1)}
 100% {opacity:0}
}
@keyframes load {
 0% {-webkit-transform:scale(0);transform:scale(0)}
 50% {-webkit-transform:scale(1);transform:scale(1)}
 100% {opacity:0}
}
.js_scroll {
 opacity:0;
 -webkit-transition:opacity 0.5s ease-out .5s;
 transition:opacity 0.5s ease-out .5s;
 -webkit-transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
 transition:opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s
}
.js_scroll.show {
 opacity:1
}