@charset "utf-8";
#lp_hosupa {
  text-align: center;
}

#lp_hosupa img {
    vertical-align: bottom;
}
#lp_hosupa .end {
    margin-bottom: 70px;
}
@media screen and (max-width: 768px) { 
  #lp_hosupa img {
      width: 100%;
      height: auto;
  }
  section.lp {
      padding: 0;
  }
  section.lp .inner {
    padding-top: 0;
  }
  #lp_hosupa .end {
    margin-bottom: 40px;
  }
}

/*  ========================
    *********  about_hosupa  *********
=============================================  */

#lp_hosupa {
  margin: 0 auto;
}

#lp_hosupa .hosupa_flip_wrap {
  position: relative;
}

#lp_hosupa .hosupa_flip_wrap .flip_box {
  position: absolute;
  width: 716px;
  top: 0;
  left: 25px;
  right: 0;
  margin: 0 auto;
  backface-visibility: hidden;
}

#lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip1 {
  top: 0;
}

#lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip2 {
  top: 400px;
}

#lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip3 {
  top: 810px;
}

#lp_hosupa .hosupa_flip_wrap .flip_box .omote{
  position: relative;
  transition: .7s;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
}

#lp_hosupa .hosupa_flip_wrap .flip_box .ura{
  position: absolute;
  top: 0;
  left: 0;
  transition: .7s;
  backface-visibility: hidden;
}

#lp_hosupa .hosupa_flip_wrap .flip_box.active .ura{
  transform: rotateY(180deg);
}

#lp_hosupa .hosupa_flip_wrap .flip_box.active .omote{
  transform: rotateY(0);
}

#lp_hosupa .hosupa_flip_wrap .flip_box img{
  width: 100%;
}

/*  ========================
    *********  seibun  *********
=============================================  */
#lp_hosupa .seibun .hosupa_flip_wrap {
  position: relative;
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box {
  position: absolute;
  width: 716px;
  top: 0;
  left: 70px;
  backface-visibility: hidden;
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box div{
  position: absolute;
  top: 0;
  left: 0;
  transition: .7s;
  backface-visibility: hidden;
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box img{
  width: 100%;
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box .omote{
  transform: rotateY(-180deg);
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box.active .ura{
  transform: rotateY(180deg);
}

#lp_hosupa .seibun .hosupa_flip_wrap .flip_box.active .omote{
  transform: rotateY(0);
}

@media screen and (max-width: 768px) { 
  #lp_hosupa .hosupa_flip_wrap .flip_box {
    position: absolute;
    width: 86.47%;
    top: 0;
    left: 3%;
    backface-visibility: hidden;
  }
  #lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip1 {
    top: 0;
    margin-top: 0%;
  }
  #lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip2 {
    top: 33.35%;
  }
  #lp_hosupa .hosupa_flip_wrap .flip_box#hosupa_flip3 {
    top: 67%;
  }
}