body,
html {
  background: #fff; }

.line {
  clear: both; }
  .line:after {
    display: block;
    content: "";
    width: 100%;
    clear: both; }

.hide {
  text-indent: -999999px;
  font-size: 0; }

.m-r-0 {
  margin-right: 0 !important; }

#outwrapper {
  width: 100%;
  max-width: 414px;
  overflow: hidden; }
  #outwrapper img {
    display: block;
    max-width: 100%; }

/********** section contents **********/
.content {
  width: 100%;
  position: relative; }
  .content:after {
    display: block;
    content: "";
    width: 100%;
    clear: both; }

/********** index **********/
.btns {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 30; }
  .btns a {
    display: block;
    height: 64px;
    width: 50%;
    float: left;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    padding: 14px 0 0 0;
    background: #fff; }
    .btns a.on {
      background: #673ab7;
      color: #fff; }

#visual .section {
  position: relative;
  overflow: hidden; }
  #visual .section img {
    display: block;
    max-width: 100%; }
  #visual .section .conts {
    height: 100%; }
#visual #sec1 {
  background: #89a4e7; }
  #visual #sec1 .img_tit {
    width: 90%;
    position: absolute;
    top: 30px;
    left: 5%;
    z-index: 10; }
  #visual #sec1 .img_cont {
    width: 100%;
    position: absolute;
    bottom: 40px;
    z-index: 5; }
#visual #sec2 {
  background: #8bb7d0; }
  #visual #sec2 .fp-tableCell {
    vertical-align: top; }
  #visual #sec2 .conts {
    width: 100%;
    padding: 15px 0 0 0; }
    #visual #sec2 .conts:after {
      display: block;
      content: "";
      width: 100%;
      clear: both; }
    #visual #sec2 .conts .title img {
      width: 80%;
      margin: 0 auto; }
  #visual #sec2 .swiper-container {
    width: 100%;
    height: 100%;
    margin: 0; }
  #visual #sec2 .swiper-slide {
    display: block;
    width: 100%;
    text-align: center; }
  #visual #sec2 .swiper-wrapper {
    width: 100%; }
  #visual #sec2 .appbtn {
    text-align: center;
    margin: 10px 0 0 0; }
    #visual #sec2 .appbtn a {
      text-indent: -999999px;
      font-size: 0;
      display: inline-block;
      width: 154px;
      height: 43px;
      margin: 0 2px; }
      #visual #sec2 .appbtn a.btn-google {
        background: url("../img/btn_google.png") top left no-repeat;
        background-size: 100% 100%; }
      #visual #sec2 .appbtn a.btn-appstore {
        background: url("../img/btn_appstore.png") top left no-repeat;
        background-size: 100% 100%; }
#visual #sec3 {
  background: #fff; }
  #visual #sec3 .conts {
    width: 100%;
    padding: 45px 0 64px 0; }
    #visual #sec3 .conts:after {
      display: block;
      content: "";
      width: 100%;
      clear: both; }
    #visual #sec3 .conts p {
      background: #f5f5f5;
      display: block;
      margin: 25px 0 0 0;
      font-size: 12px;
      line-height: 140%;
      padding: 10px 17px;
      color: #333; }

@media only screen and (min-width: 768px) {
  #outwrapper {
    max-width: 100%; }

  .fp-tableCell {
    vertical-align: top; }

  #visual #sec1 .conts {
    display: table;
    table-layout: fixed;
    vertical-align: middle;
    text-align: center; }
  #visual #sec1 img {
    width: 80%;
    margin: 0 auto; } }
@media only screen and (min-width: 411px) {
  #visual #sec1 .conts {
    display: table;
    table-layout: fixed;
    vertical-align: top; }
  #visual #sec1 img {
    position: relative;
    bottom: 0;
    width: 90%;
    margin: 0 auto; } }

/*# sourceMappingURL=common.css.map */