@charset "UTF-8";

.fv-pc, .fv-sp {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .fv-pc{
    display: none;
  }
  .fv-sp{
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .fv-pc{
    display: block;
  }
  .fv-sp{
    display: none;
  }
}



.fv2 {
    overflow: hidden;
}

.fv, .fv2 {
    position: relative;
    margin: 0 auto 0;
    width: 100%;
    overflow: hidden;
}

.fv:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 51vw;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: -webkit-transform 1s ease-out;
    transition: -webkit-transform 1s ease-out;
    -o-transition: transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out;
    -webkit-transition-delay: 500ms;
         -o-transition-delay: 500ms;
            transition-delay: 500ms;
    background: #ef7800;
}

@media screen and (max-width: 768px) {
  .fv:before {
      height: 1252px;
      -webkit-transform: translateX(-1252px);
          -ms-transform: translateX(-1252px);
              transform: translateX(-1252px);
  }
}
@media screen and (max-width: 767px) {
  .fv:before {
      height: 1252px;
      -webkit-transform: translateX(-1252px);
          -ms-transform: translateX(-1252px);
              transform: translateX(-1252px);
  }
}

.active.fv:before {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}


.fv2:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 51vw;
    -webkit-transform: translatey(-51vw);
        -ms-transform: translatey(-51vw);
            transform: translatey(-51vw);
    -webkit-transition: -webkit-transform 1s ease-out;
    transition: -webkit-transform 1s ease-out;
    -o-transition: transform 1s ease-out;
    transition: transform 1s ease-out;
    transition: transform 1s ease-out, -webkit-transform 1s ease-out;
    -webkit-transition-delay: 2s;
         -o-transition-delay: 2s;
            transition-delay: 2s;
    background: #00b0c4;
}
@media screen and (max-width: 768px) {
  .fv2:before {
      height: 1252px;
      -webkit-transform: translatey(-1252px);
          -ms-transform: translatey(-1252px);
              transform: translatey(-1252px);
  }
}
@media screen and (max-width: 767px) {
  .fv2:before {
      height: 1252px;
      -webkit-transform: translatey(-1252px);
          -ms-transform: translatey(-1252px);
              transform: translatey(-1252px);
  }
}

.active.fv2:before {
    -webkit-transform: translatey(0);
        -ms-transform: translatey(0);
            transform: translatey(0);
}

.fv-img {
    position: relative;
    width: 100%;
    max-width: 1440px;
    line-height: 0;
    margin: 0 auto;
    z-index: 1;
}

@media screen and (max-width: 768px) {
  .fv-img {
      position: relative;
      width: 100%;
      max-width: auto;
      line-height: 0;
      margin: 0 auto;
      z-index: 1;
  }
}

#fv + section{
  margin-top: 0;
}