/* タイトルロゴ */
.content {
  position: relative;
  top: 0px;
  left: 0px;
}
.rogo {
  opacity: 0; /*最初は非表示にしておいて*/
  position: absolute;
  top: 150px;
  left: 400px;
}
.animated {
  opacity: 1; /*アニメーションが始まるタイミングで表示する*/
}

/* 文章 */
div.text {
  position: absolute;
  top: 50px;
  left: 50px;
}

/* 文章の帯 */
div.text_bg {
  position: absolute;
  top: 80px;
  left: 0px;
}

/* 右帯 */
div.obi1 {
  position: absolute;
  top: 0px;
  right: 0px;
}

/* 左帯 */
div.obi2 {
  position: absolute;
  bottom: 15px;
  left: 0px;
}

/* キャラクター（範囲外は消すようにする） */
div.chara1 {
  position: absolute;
  top: 60px;
  right: -40px;

  height: 794px;
  overflow: hidden;
}

/* Google play */
div.googleStore {
  position: absolute;
  top: 430px;
  left: 90px;
}

/* ダウンロードはこちらから★ */
div.download {
  position: absolute;
  top: 300px;
  left: 50px;
}

/*サービス終了*/
div.end {
  position: absolute;
  width: 360px;
  height: 100px;
  top: 50px;
  right: 90px;
}

/* click_here */
div.click_here {
  position: absolute;
  top: 360px;
  right: 30px;
}

/* まる１ */
div.maru1 {
  position: absolute;
  top: 50px;
  left: 200px;
}
/* まる2 */
div.maru2 {
  position: absolute;
  top: 120px;
  left: 0px;
}
/* まる3 */
div.maru3 {
  position: absolute;
  top: 520px;
  left: 10px;
}
/* まる4 */
div.maru4 {
  position: absolute;
  top: 680px;
  left: 100px;
}
/* まる5 */
div.maru5 {
  position: absolute;
  top: 670px;
  left: 350px;
}

/* ボタン */
div.button {
  z-index: 1;
  position: absolute;
  top: 460px;
  right: 50px;
}

/* エフェクト */
div.effect00 {
  z-index: 0;
  position: absolute;
  top: 390px;
  right: 50px;
}

div.effect01 {
  z-index: 0;
  position: absolute;
  mix-blend-mode: screen; /* スクリーン */
  top: 390px;
  right: 50px;
}

/* レスポンシブ */

@media screen and (min-width: 800px) {
  /* 表示領域が800px以上の場合に適用するスタイル */
  div.column {
    width: 240px;
    float: left;
  }
}
@media screen and (max-width: 799px) {
  /* 表示領域が800px未満の場合に適用するスタイル */
  div.column {
    width: 100%;
  }
}