body{margin: 0;padding: 0;}
body *{box-sizing:border-box;}
#outer{position: relative;width: 100%;height: 100%;/*transform: scale(0.5);*/}
#topFrame{position: relative;z-index: 50;width: 160vw;height: 160vw;}
#bgFrame{width: 100%;height: 100%;}
#logoOuter{position: absolute;top: 0;left: 0;z-index: 100;display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;}
#logoOuter span{display:inline-block;flex-basis:65%;max-width: 240px;text-align: center;}
/*#logo{max-width: 320px;}*/

.bg1{background: url(../img/top/01_top_01.jpg) no-repeat center center;background-size: cover;}
.bg2{background: url(../img/top/01_top_02.jpg) no-repeat center center;background-size: cover;}
.bg3{background: url(../img/top/01_top_03.jpg) no-repeat center center;background-size: cover;}
.bg4{background: url(../img/top/01_top_04.jpg) no-repeat center center;background-size: cover;}

.zoom {
animation: kf_zoom ease 300s infinite;
position: relative;
top: calc(80vh - 80vw);left: -30vw;
}
.rotate {
animation: kf_rotate ease 500s infinite;
}

@keyframes kf_zoom {
0% {transform: scale(1);}
17% {transform: scale(1.3);}
30% {transform: scale(1.1);}
43% {transform: scale(1.4);}
63% {transform: scale(0.9);}
75% {transform: scale(1.25);}
100% {transform: scale(1);}
}

@keyframes kf_rotate {
0% { transform: rotate(0deg);}
20% { transform: rotate(120deg);}
60% { transform: rotate(240deg);}
100% { transform: rotate(360deg);}
}


@media screen and ( min-width:640px) {
 #logoOuter span{flex-basis: 50%;max-width: 320px;}
 .zoom {top: calc(80vh - 80vw);left:-30vw;}
/*tablet Portlate*/}


@media (orientation: landscape){
#topFrame{width: 160vw;height: 160vw}
/*デバイスが横向きの場合の記述*/}

@media (orientation: portrait){
#topFrame{width: 150vh;height: 150vh}
 .zoom {top: -30vh;left:calc(80vw - 80vh);}
/*デバイスが縦向きの場合の記述*/}