body {font-family:'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif}

.background {
  background: url(../img/background.jpg) no-repeat 50% 100%;
  bottom: 96px;
  background-size: cover;
  position: absolute;
  width: 110%;
  left: -5%;
  top: -5%; }

/* CLOUDロゴ */
#logo {
  position: absolute;
  width: 100%;
  top: 18%;
}

/* パネル基幹 */
.about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;}
.about p { color:#8EC31F; text-align:left}
.about .panel { background: url(../img/back_panel01.png) top repeat-x; border:solid #CCC 5px;}
.about .panel:after { background:none}
.about .panel header:before { background:none}
#panel_roket_back {background:url(../img/back_panel_roket01.png) center top no-repeat; /*width:80%;*/ margin:0 auto;/*background-size:90% auto;*/}


/*ヤシの木 747px 953px */
.lighthouse {
  -webkit-transform-origin: 25% 50%;
  -moz-transform-origin: 25% 50%;
  transform-origin: 25% 50%;
  -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  margin: 0px -64px;
  background-size: 747px 953px;
  height: 953px;
  width: 747px;
  background-image: url(../img/lighthouse.png);
  background-repeat: no-repeat;
  bottom: -100px;
  position: absolute;
  right: 10%; }

.lighthouse_left {
  -webkit-transform-origin: 20% 50%;
  -moz-transform-origin: 20% 50%;
  transform-origin: 20% 50%;
  -webkit-animation: lighthouse 4.5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: lighthouse 4.5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: lighthouse 4.5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);

  margin: 0px -64px;
  background-size: 747px 953px;
  height: 953px;
  width: 747px;
  background-image: url(../img/lighthouse_left.png);
  background-repeat: no-repeat;
  bottom: -100px;
  position: absolute;
  left: 10%;
}


footer .twitter-share-button {
  width: 85px !important;
}



@media all and (min-width: 0px) {

  #logo img {
    display:block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .lighthouse {
    margin: -580px -680px;
    background-size: 20%;
  }

  .lighthouse_left {
    margin: -580px -120px;
    background-size: 20%;
  }

/* CLICKボタン */
  #btn_div img {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 60px;
  }

.cell {
  padding-top: 10px;
}

/* パネル */
  .center {
    max-width: 350px; }
  .about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;padding-left:0px;font-size: 2.3em;}
  .about p { color:#8EC31F; text-align:left;padding-left:0px;font-size: 16px;}
  .about #gospace {text-align:center; margin:0 auto; width:314px; margin-bottom:-5px;margin-top:55px;}
  .about #gospace img {text-align:center; width:85.7%; height:auto;}

}


@media all and (min-width: 300px) {

  #logo img {
    display:block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .lighthouse {
    margin: -500px -660px;
    background-size: 30%;
  }

  .lighthouse_left {
    margin: -500px -140px;
    background-size: 30%;
  }

/* CLICKボタン */
  #btn_div img {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 60px;
  }

.cell {
  padding-top: 20px;
}

/* パネル */
  .center {
    max-width: 280px; }
  .about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;padding-left:0px;font-size: 1.5em;}
  .about p { color:#8EC31F; text-align:left;padding-left:0px;font-size: 12px;}
  .about #gospace {text-align:center; margin:0 auto; width:314px; margin-bottom:-5px;margin-top:5px;}
  .about #gospace img {text-align:center; width:85.7%; height:auto;}
}


@media all and (min-width: 600px) {

  #logo img {
    display:block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .lighthouse {
    margin: -430px -590px;
    background-size: 40%;
  }

  .lighthouse_left {
    margin: -430px -180px;
    background-size: 40%;
  }

/* CLICKボタン */
  #btn_div img {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 60px;
  }

.cell {
  padding-top: 40px;
}

/* パネル */
  .center {
    max-width: 500px; }
  .about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;padding-left:0px;font-size: 2.5em;}
  .about p { color:#8EC31F; text-align:left;padding-left:50px;font-size: 16px;}
  .about #gospace {text-align:center; margin:0 auto; width:314px; margin-bottom:-5px;margin-top:55px;}
  .about #gospace img {text-align:center;width:auto}
}
	
@media all and (min-width: 900px) {

  #logo img {
    display:block;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
  }

  .lighthouse {
    margin: -400px -600px;
    background-size: 45%;
  }

  .lighthouse_left {
    margin: -400px -200px;
    background-size: 45%;
  }

/* CLICKボタン */
  #btn_div img {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 68px;
  }

.cell {
  padding-top: 50px;
}

/* パネル */
  .center {
    max-width: 820px; }
  .about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;padding-left:150px;}
  .about p { color:#8EC31F; text-align:left;padding-left:200px;font-size: 16px;}
  .about #gospace {text-align:center; margin:0 auto; width:314px; margin-bottom:-5px;margin-top:55px;}
  .about #gospace img {text-align:center;width:auto}
}
	
@media all and (min-width: 1200px) {

  #logo img {
    display:block;
    width: 35%;
    margin-left: auto;
    margin-right: auto;
  }

  .lighthouse {
    margin: -300px -600px;
    background-size: 55%;
  }

  .lighthouse_left {
    margin: -300px -220px;
    background-size: 55%;
  }

/* CLICKボタン */
  #btn_div img {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 84px;
  }

.cell {
  padding-top: 50px;
}

/* パネル */
  .center {
    max-width: 820px; }
  .about .panel h1 {font-family: 'Coda', cursive;color:#8EC31F; font-weight:700;color:#8EC31F;padding-left:150px;}
  .about p { color:#8EC31F; text-align:left;padding-left:200px;font-size: 16px;}
  .about #gospace {text-align:center; margin:0 auto; width:314px; margin-bottom:-5px;margin-top:55px;}
  .about #gospace img {text-align:center;width:auto}
}

@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:portrait) {

  #panel_roket_back {/*background:url(../img/back_panel_roket01.png) center top no-repeat; width:80%;*/ margin:0 auto;/*background-size:90% auto;*/}
	
	}