@charset "utf-8";

body {
   padding: 0;
   margin: 0;
   background-color: #a9f5e4
 }

#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo {
  float: left;
  width: 280px;
  height: 53px;
  background: url('webgl-logo.png') no-repeat;
  background-size: contain;
}
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }


header{
  background-image: url(top.png);
  background-size: 100%;
  background-repeat: repeat-x;
  width: 100%;
}

header p{
  display: none;
}

.main-logo{
  width: 100%;
  position: absolute;
  top: 15%;
  margin-bottom: 0;
  z-index: -9999;
}

#my-container {
  position: absolute;
  width: 85%;
  top: -200%;
  left: 50%;
  margin-top: 0;
}

#my-container h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-family: 'Mochiy Pop One', sans-serif;
}

#my-container p {
  font-size: 2.2rem;
  font-family: 'Mochiy Pop One', sans-serif;
}

#under{
  position: absolute;
  width: 100%;
  height: 25%;
  top: 130%;
}

#under img{
   width: 60%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
 }


/* 768px以上 iPad*/
@media (min-width: 768px) {
  #unity-container.unity-desktop {
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
  }

  header{
    background-image: url(top.png);
    background-size: 800px;
    background-repeat: repeat-x;
    width: 100%;
    height: 150px
  }

  header p{
    display: none;
  }

  .main-logo{
    width: 100%;
    position: absolute;
    top: 10%;
    z-index: -9999;
  }

  #my-container {
    text-align: center;
    position: absolute;
    width: 85%;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  #my-container h1 {
    font-size: 2.4rem;
    font-family: 'Mochiy Pop One', sans-serif;
  }

  #my-container p {
    font-size: 1.6rem;
    font-family: 'Mochiy Pop One', sans-serif;
    margin-bottom: 250px;
  }

  #under{
    position: absolute;
    width: 100%;
    height: 25%;
    top: 135%;
  }

  #under img{
     width: 60%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }

}


  /* 1080px以上 PC*/
  @media (min-width: 1080px) {
    #unity-container.unity-desktop {
      left: 50%;
      top: 120%;
      transform: translate(-50%, -50%)
    }

    header{
      background-image: url(top.png);
      background-size: 600px;
      background-repeat: repeat-x;
      width: 100%;
      height: 105px
    }

    header p{
      display: none;
    }

    .main-logo{
      width: 80%;
      position: absolute;
      top: 44%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    #my-container {
      text-align: center;
      position: absolute;
      width: 85%;
      top: 200%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    #my-container h1 {
      font-size: 2rem;
      font-family: 'Mochiy Pop One', sans-serif;
    }

    #my-container p {
      font-size: 1.2rem;
      font-family: 'Mochiy Pop One', sans-serif;
      margin-bottom: 250px;
    }

    #under{
      position: absolute;
      width: 80%;
      height: 40%;
      top: 230%;
      left: 60%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    #under img{
       width: 60%;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;
     }

  }