@charset "utf-8";
/* CSS Document */
/*=======================================
画面遷移
=========================================*/
header{display: none;}
.l-transition {position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transform-origin: right center;
background: #e60012;
}
.l-transition-bg { display: block; position: absolute; left: 0; top: 0; background: #efefef; width: 100%; height: 100%; z-index: 1; transform-origin: right center; -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; }
.l-transition p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); transform: translateX(-8px); -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; 
 width: 375px;
 height: 305px;
}


@media all and (max-width: 980px) {
    .l-transition p{
        width: 80%;
    }
}

.l-transition p img { -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; }
.l-transition p:before { display: block; content: ""; position: absolute; left: 0; top: 0; opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); width: 100%; height: 100%; background: url(../img/logo_sq.png) no-repeat top; background-size: contain; -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all; }
.l-transition.is-load .l-transition-bg { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); }
.l-transition.is-load p { -webkit-transform: translateX(8px); -moz-transform: translateX(8px); transform: translateX(8px); }
.l-transition.is-load p img { opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); }
.l-transition.is-load p:before { opacity: 1; -ms-filter: "alpha(opacity=100)"; filter: alpha(opacity=100); }
.l-transition.is-finish { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); transform: scaleX(0); -webkit-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all 0.2s; -moz-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all 0.2s; -ms-transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all 0.2s; transition: 0.8s cubic-bezier(0.86, 0, 0.07, 1) all 0.2s; }
.l-transition.is-finish p:before { opacity: 0; -ms-filter: "alpha(opacity=0)"; filter: alpha(opacity=0); -webkit-transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) all; -moz-transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) all; -ms-transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) all; transition: 0.6s cubic-bezier(0.86, 0, 0.07, 1) all; }