@import "compass/css3";

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}
html,body {
  height: 100%;
  overflow: hidden;
  background: #fffacd;
  z-index:-10;
}
.hako h1{
  z-index: 120;
  position: absolute;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  color: black;
  font-size: 30pt;
}

.scene {
  position: relative;
  height: 100%;
  background: #fffacd;
  padding: 21rem;
  text-align: center;
  z-index:-2;
}
.magic {
  z-index: -1;
  position: absolute;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  width: 20rem;
  height: 20rem;
  background: url(../image/posiko_home.png) 50% 10% no-repeat fixed;
  background-size: cover;
  border-radius: 50%;
}
.check-out {
  z-index: 100;
  position: absolute;
  bottom:10rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  background:rgb(252,255,255,0.9);
  padding:10px;
}
.check-out p{
  height: 100%;
}

@media screen and (max-height: 550px) { /*ウィンドウ高さが最大550pxまでの場合に適用*/
  .check-out{
    bottom: 10%;
    font-size: 16px;
  }
}/*必要*/
@media screen and (max-width: 900px) { /*ウィンドウ幅が最大900pxまでの場合に適用*/
  .hako h1{
    font-size: 2rem;
  }
  .check-out{
    bottom: 10%;
    font-size: 16px;
  }
}/*必要*/