@charset "utf-8";

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

html { overflow-y: scroll; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; 
  font-weight: normal;
}

ol, ul { list-style: none; }

fieldset, img { border:0; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th { text-align: left; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal; 
  font-weight: normal;
}

body {
  font: 13px Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  *font-size: small;
  *font: x-small;
  color: #575157;
  margin: 0;
  padding: 0;
  background: #cccccc;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { outline: none; }

#wrap {
  width: 880px;
  margin: 0 auto;
  overflow: auto;
  background: #ffffff;
  -moz-box-shadow: 0 1px 5px #777777;
  -webkit-box-shadow: 0 1px 5px #777777;
  box-shadow: 0 1px 5px #777777;
}

#container {
  margin: 10px;
  padding: 0 10px 0 10px;
}

#header { margin-bottom: 10px; }

#sns-button { text-align: right; }

#commentary {
  margin-bottom: 10px;
  width: 840px;
  height: 220px;
  background: url(../img/commentary.png) no-repeat;
}

#commentary a.button-appstore {
  display: block;
  width: 246px;
  height: 88px;
  position: relative;
  top: 70px;
  left: 50px;
  background: url("../img/button_appstore_off.png") no-repeat;
  text-decoration: none;
  border: none;
  vertical-align: bottom;
}
#commentary a.button-appstore:hover { background: url("../img/button_appstore_on.png") no-repeat; }
#commentary a.button-appstore:focus { outline: none; }


#attention { margin-bottom: 30px; }

#slide-wrap { overflow: hidden; }

#slide-container {
  width: 300px;
  height: 574px;
  float: left;
}

#slide-comment {
  width: 540px;
  height: 574px;
  padding: 30px 0;
  float: left;
  text-align: right;
}

/* clearfix */
#slide-wrap:before, #slide-wrap:after {
  content: "";
  display: table;
}

#slide-wrap:after { clear: both; }

/* For IE 6 / 7 (trigger hasLayout) */
.boxContainer { zoom: 1; }

#iphone {
  position: absolute;
  z-index: 10;
}

#slide-image {
  width: 244px;
  height: 366px;
  position: relative;
  top: 100px;
  left: 30px;
}



#screenshot { margin-bottom: 10px; }


#movie iframe, #movie img {
  display: block;
  margin: 0 auto;
  text-align: center;
}

#back-top { margin-top: 20px; }

#back-top a.button-back {
  display: block;
  margin-left: auto;
  text-align: right;
  width: 130px;
  height: 130px;
  background: url("../img/button_back_off.png") no-repeat;
  text-decoration: none;
  border: none;
  vertical-align: bottom;
}
#back-top a.button-back:hover { background: url("../img/button_back_on.png") no-repeat; }
#back-top a.button-back:focus { outline: none; }


#menu { margin-bottom: 20px; }

#menu a.button-contact {
  display: block;
  width: 100px;
  height: 30px;
  background: url("../img/button_contact_off.png") no-repeat;
  text-decoration: none;
  border: none;
  vertical-align: bottom;
}
#menu a.button-contact:hover { background: url("../img/button_contact_on.png") no-repeat; }
#menu a.button-contact:focus { outline: none; }

#menu a.button-developer {
  display: block;
  width: 160px;
  height: 30px;
  background: url("../img/button_developer_off.png") no-repeat;
  text-decoration: none;
  border: none;
  vertical-align: bottom;
}
#menu a.button-developer:hover { background: url("../img/button_developer_on.png") no-repeat; }
#menu a.button-developer:focus { outline: none; }

table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

#footer { margin-bottom: 20px; }