@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c&display=swap&subset=japanese');
@import url("seurat.css");
@import url("footer.css");

/* ------------------------------ */
/* base */
/* ------------------------------ */
body * {
  box-sizing: border-box;
}

.container {
  margin: 0 auto;
  max-width: 1024px;
  padding: 0 15px;
  width: 100%;
}

.img-wrapper img {
  width: 100%;
}

.img-wrapper.img-text-top img {
  max-height: 172px;
  width: auto;
}

#Main .js-anime.is-inview {
  opacity: 1;
  transform: translateY(0);
}

#Main .js-anime {
  opacity: 0;
  transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
  transform: translateY(30px);
}

.btn-wrapper {
    padding: 60px 0;
}

#Footer a {
  color: #000;
  text-decoration: underline;
}

/* ------------------------------ */
/* cloud                          */
/* ------------------------------ */

body {
  background-color: #fff8e6;
  background-color: #fff3e1;
}

#PageOuchienCloud #heading {
  background: linear-gradient(to bottom, transparent, transparent calc(100% - 10px), #64a377  calc(100% - 10px), #64a377 100%);
  background-size: 100% calc(100%);
}

#heading > .container {
  background-image: url(../img/cloud/gif_cloud_PC.gif);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 30px 15px 3%;
}

.heading-left-content {
  padding-top: 76px;
  width: 33%;
}

#PageOuchienCloud .heading-left-content .btn-wrapper {
  padding-top: 22px;
}

#PageOuchienCloud .btn-wrapper a {
  display: inline-block;
  max-width: 100%;
}

.btn-app img {
  background-image: url(../img/cloud/btn_app_sprite.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  max-width: 100%;
}

.btn-app:hover img {
  background-position: center bottom;
}

.bg-green {
  background-color: #64a377;
}

#prices {
  padding: 70px 0 50px;
}

#prices .row {
  width: unset;
}

@media (min-width: 768px){
  div[class^='col-'].low-gutter-left {
    padding-left: 10px!important;
    /*padding-top: 108px;*/
    padding-top: 93px;
  }

  div[class^='col-'].low-gutter-right {
    padding-right: 10px!important;
    padding-top: 68px;
  }  
}

#overview .content {
  background-image: url(../img/cloud/deco_train.png);
  background-position: calc(100% - 8px) calc(100% - 3px);
  background-repeat: no-repeat;
  background-size: 344px;
  margin: 0 auto;
  max-width: 870px;
  padding: 57px 15px 157px;
}

#trouble {
  padding-bottom: 78px;
  padding-top: 70px;
}

#trouble .content {
  margin: 0 auto;
  max-width: 870px;
  padding: 0 15px;
}

#trouble img.img-text {
  margin: 0 auto 90px;
  max-height: 27px;
  width: auto;
}

#PageOuchienCloud #Footer .contBox02 {
  background-color: #66a378;
  margin-bottom: 0;
  /*padding: 32px 0;*/
}

#cloud-contact {
  padding-top: 116px;
}

#cloud-contact .content {
  margin: 0 auto;
  max-width: 640px;
}

#cloud-contact .text-video {
  margin-bottom: 68px;
  max-height: 71.76px;
  max-width: 544px;
  width: auto;
}

#cloud-contact .movie-wrapper {
  margin-bottom: 163.2px;
  max-height: 2990.4px;
  max-width: 518.4px;
}

#Footer .innerBasic {
  padding: 0;
}

.fab {
  position: fixed;
  bottom: 8px;
  width: 100%;
  -webkit-transition: bottom .5s linear;
     -moz-transition: bottom .5s linear;
      -ms-transition: bottom .5s linear;
       -o-transition: bottom .5s linear;
          transition: bottom .5s linear;
}

.fab.end-screen {
  bottom: 126px;
}

.fab .container {
  max-width: calc(100% - 32px);
  padding: 0;
}

.fab a {
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  top: 0;
}

.fab a:hover {
  box-shadow: 0 5px 2px rgb(0, 0, 0, .2);
  top: -5px;
}

.btn-application {
  width: 133px;
}

@media (min-width: 768px) {
  .fab {
    bottom: 32px;
  }

  .fab.end-screen {
    bottom: 126px;
  }

  .fab .container {
    max-width: calc(100% - 64px);
  }

  .fab a:active {
    -webkit-transition: all 0s linear;
       -moz-transition: all 0s linear;
        -ms-transition: all 0s linear;
         -o-transition: all 0s linear;
            transition: all 0s linear;
    box-shadow: none;
    top: 0;
  }
}

#Footer .contBox01 {
  background-image: url(../img/cloud/deco_flower_PC.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc(100% - 48px);
  padding-bottom: 10%;
  padding-top: 80px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #heading > .container {
    background-image: url(../img/cloud/gif_cloud_SP.gif);
    background-size: calc(100% - 20px);
    padding: 13px 10px 60%;
  }

  .img-wrapper.img-text-heading_sp img {
    max-height: 90px;
    width: auto;
  }

  .img-wrapper img.img-text-02 {
    margin: 0 auto;
    max-height: 45px;
    max-width: 100%;
    width: auto;
  }

  .heading-left-content {
    margin: 0 auto;
    max-width: 180px;
    padding: 0;
    width: 100%;
  }

  #prices {
    padding: 0 0 32px;
  }

  #prices .btn-wrapper {
    margin: 0 auto;
    max-width: 282px;
    padding: 35px 0 33px;
  }

  .img-price {
    margin-top: 32px;
  }

  #overview .content {
    background-position: calc(100% - 11px) bottom;
    background-size: 140px;
    padding: 36px 11px 65px;
  }

  #trouble {
    padding-bottom: 46px;
    padding-top: 39px;
  }

  #trouble .content {
    padding: 0 11px;
  }

  #trouble img.img-text {
    margin: 0 auto 40px;
    /*max-height: 120px;*/
    max-height: 45px;
    max-width: 100%;
    width: auto;
  }

  #cloud-contact {
    /*background-image: url(../img/cloud/deco_flower_SP.png);*/
    /*background-size: calc(100% - 76px);*/
    /*padding-bottom: 105px;*/
    padding-top: 33px;
  }

  #cloud-contact .text-video {
    margin-bottom: 15px;
    max-width: 221px;
  }

  #cloud-contact .btn-wrapper {
    padding-top: 14px;
  }

  #cloud-contact .movie-wrapper {
    margin: 0 auto 72px;
    padding: 0 11px;
  }

  .fab {
    padding: 0 4px;
  }

  #Footer .contBox01 {
    background-image: url(../img/cloud/deco_flower_SP.png);
    background-size: calc(100% - 48px);
    padding-top: 40px;
    padding-bottom: 24%;
  }
}

.movie-wrapper {
  margin: 0 auto;
  max-height: 315px;
  max-width: 560px;
}

.movie-container {
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%;
   position: relative;
}
 
.movie-container iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}