body{margin: 0; word-break:break-all;background-color: #FFFFFF;font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;} 
 #container{position: absolute;width:100%;height:120%; z-index: 1; left: 0px; top: 0px; min-width:320px;
 }
 .btn{position: absolute; width: 51px; height: 51px; top: 30px; left: 50%; margin-left:-25.5px; text-align: center;border-radius:4px;box-shadow:2px 2px 2px #8b7f7f;
 }
 .btn:hover{ cursor:pointer;}
 #startbtn{ background-image: url('../images/menu.png');}
 #closebtn{ background-image: url('../images/close.png');}
 #startbtn{ z-index: 3;}
 #closebtn{display: none; z-index: 4;}
 #box{display: none ;position: absolute; width: 548px; height: 534px; z-index: 2; left:50%; margin-left:-274px;top:150px;border-radius:50%;
 }
 .sball{position: absolute; width: 30px; height: 30px; z-index: 1; background-color:#ff0000;border-radius:50%;top:50%; margin-top:-15px;
  left: 50%;margin-left:-15px;box-shadow:3px 3px 7px #635a5a; overflow:hidden;}
 .home{position: absolute; width: 30px; height: 30px; z-index: 1; background-color:#ff0000;border-radius:50%;top:50%; margin-top:-15px; left: 50%;margin-left:-15px;box-shadow:3px 3px 7px #635a5a;}
 #sball00{} #sball01{} #sball02{} #sball03{} #sball04{} #sball05{}
  .small{position: absolute; width: 0px; height: 0px; z-index: 2; bottom:5px; left: 50%; margin-left:-25%; background-color:#ffffff;border-radius:50%;
   background-repeat:no-repeat;background-size:contain;}
 #small01{background-image:url('../images/run_001.png')}
 #small02{background-image:url('../images/bk_03_009.png')}
 #small03{background-image:url('../images/PC_017_s.png')}
 #small04{background-image:url('../images/20160604_mc001_s.png')}
 #small05{background-image:url('../images/0008.png')}
 .navimsg{position: absolute; display:none; width: 100%; height: 35px; z-index: 5; top: 41%; left: 0px; text-align: center;font-size: 26px; font-weight: 500; color:#fffcc3; text-shadow:2px 2px 3px #000000; }
 .navimsg a{ text-decoration:none;font-size: 26px; font-weight: 500; color:#fffcc3; text-shadow:2px 2px 3px #000000;}
 .navisub{position: absolute; width:100%;  text-align:center; height: 28px; z-index: 1; left:50%; margin-left:50%; opacity:1;top: 35%;}
 .navisub a{ text-decoration:none;font-size: 16px;font-weight: 600;color:#ffffff;text-shadow:1px 1px 1px #000000;}
@keyframes ball{0%{transform: translateY(-5.4%);}50%{transform: translateY(-2.7%);}100%{transform: translateY(-5.4%);}}
@keyframes ball-float{100%{transform: translateY(-5.4%);}}
@keyframes ball-lage{0%{}70%{ width:63.87%; height:65.54%;margin-left:-13.69%; margin-top:-14.05%} 100% { width:54.75%; height:56.18%;margin-left:-9.12%; margin-top:-9.36%; }}
@keyframes home-lage{0%{}70%{ width: 45.62%; height: 46.82%; left:27.19%;top:27.9%;} 100% { width: 36.5%; height: 37.45%; top:34.83%; left:31.75%;}}
@keyframes move-titl{0%{}80%{margin-top:-27%;}100%{ margin-top:-23%;}}
@keyframes small-ball{0%{transform: rotateY( 240deg );width: 160px; height: 160px;}100%{transform: rotateY( 360deg ); opacity:1;width: 160px; height: 160px;} }
@keyframes move-act{0%{}80%{margin-left:-55%; opacity:1;}100%{ margin-left:-50%; opacity:1;}}
 .sball:hover,.sball:focus, .sball:active {cursor: pointer ; z-index:10;
 animation-name: ball-float, ball,ball-lage;animation-duration: 0.3s, 1.5s,0.2s; animation-delay: 0s, 0.3s,0s;
animation-timing-function: ease-out, ease-in-out,ease-in-out; animation-iteration-count: 1, infinite,1;
animation-fill-mode: forwards;animation-direction: normal, alternate,normal;}
 .sball:hover > .navisub{animation:move-act; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
 .sball:hover > .navimsg{animation:move-titl; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
 .sball:hover > .small{animation:small-ball; animation-duration:0.5s; animation-timing-function:ease-in-out; animation-fill-mode: forwards;}
 .home:hover, home:focus,.home:active {cursor: pointer ; z-index:10;
 animation-name: ball-float, ball,home-lage;animation-duration: 0.3s, 1.5s,0.2s; animation-delay: 0s, 0.3s,0s;
animation-timing-function: ease-out, ease-in-out,ease-in-out; animation-iteration-count: 1, infinite,1;
animation-fill-mode: forwards;animation-direction: normal, alternate,normal;}



@media screen and (max-width: 712px){
  #box{ width: 465.8px; height: 453.9px; margin-left:-232.9px;}
  @keyframes small-ball{0%{transform: rotateY( 240deg );width: 136px; height: 136px;}100%{transform: rotateY( 360deg ); opacity:1;width: 136px; height: 136px;} }
}
@media screen and (max-width: 533px){
  #box{ width: 416.48px; height: 405.84px; margin-left:-208.24px;}
  @keyframes small-ball{0%{transform: rotateY( 240deg );width: 121.6px; height: 121.6px;}100%{transform: rotateY( 360deg ); opacity:1;width: 121.6px; height: 121.6px;} }
  .small{ bottom:4px;}
}
@media screen and (max-width: 480px){
  #box{ width: 372.64px; height: 363.12px; margin-left:-186.32px;}
  .navimsg{ top: 38%; font-size: 24px; font-weight: 300; text-shadow:1px 1px 2px #000000;}
  .navimsg a{ font-size: 24px; font-weight: 300; text-shadow:1px 1px 2px #000000;}
  .navisub{ top: 32%;}
  .navisub a{ font-size: 14px;font-weight: 400;}
  @keyframes move-titl{0%{}80%{margin-top:-30%;}100%{ margin-top:-25%;}}
  @keyframes small-ball{0%{transform: rotateY( 240deg );width: 108.8px; height: 108.8px;}100%{transform: rotateY( 360deg ); opacity:1;width: 108.8px; height: 108.8px;} }
}
@media screen and (max-width: 414px){
  #box{ width: 301.4px; height: 293.7px; margin-left:-150.7px;}
  .navimsg{ top: 38%;font-size: 20px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
  .navimsg a{ font-size: 20px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
  .navisub{ top: 30%;}
  .navisub a{ font-size: 12px;font-weight: 400;}
  .small{ bottom:3px;}
  @keyframes small-ball{0%{transform: rotateY( 240deg );width: 88px; height: 88px;}100%{transform: rotateY( 360deg ); opacity:1;width: 88px; height: 88px;} }
}
@media screen and (max-width: 375px){
  #box{ width: 251px; height: 244.57px; margin-left:-125.5px;}
  .navimsg{ top: 30%;font-size: 18px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
  .navimsg a{ font-size: 18px; font-weight: 200; text-shadow:1px 1px 2px #000000;}
  .small{ bottom:2px;}
  @keyframes move-titl{0%{}80%{margin-top:-26%;}100%{ margin-top:-17%;}}
  @keyframes small-ball{0%{transform: rotateY( 240deg );width: 73.28px; height: 73.28px;}100%{transform: rotateY( 360deg ); opacity:1;width: 73.28px; height: 73.28px;} }
}

/*
対象解像度
320 *  480
320 *  533
360 *  640
375 *  667
375 *  812
384 *  640
411 *  731
412 *  732
414 *  736
480 *  854
600 * 1024
800 * 1280
*/