html {
  scroll-behavior: smooth;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
.potatochips_backimg {
  background-image: url(/img/kyushu/potatochips/potatochips_lp_backimg_pc.jpg);
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  background-size: cover;
  background-position: bottom;
  background-attachment: fixed;
}
@media screen and (max-width: 767px) {
  .potatochips_backimg {
    background-image: url(/img/kyushu/potatochips/potatochips_backimg.jpg);
  }
}
.potatochips_backimg01 {
  background-image: url(/img/kyushu/potatochips/potatochips_img02.png);
  background-size: cover;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  background-repeat: no-repeat;
}
.potatochips_backimg02 {
  background-image: url(/img/kyushu/potatochips/potatochips_lp_backimg_02.jpg);
  background-size: cover;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.potatochips_backimg03 {
  background-image: url(/img/kyushu/potatochips/potatochips_lp_backimg_03.jpg);
  background-size: cover;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}
.potatochips_nagare_bg {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  margin: 10px;
}
.potatochips_text_bg {
  background: #FFF;
  border-radius: 10px;
  margin-top: 30px
}
.potatochips_nagare {
  width: 102%;
  margin: auto;
}
@media screen and (max-width:767px) {
  .potatochips_nagare {
    width: 100%;
    margin: auto;
  }
}
.potatochips_contents {
  display: block;
  width: 100%;
  max-width: 1100px;
  padding: 30px 0 0 0;
  margin: 0 auto;
}
.potatochips_inner img {
  margin: auto;
}
.potatochips_relative {
  position: relative;
}
.santi {
  width: 500px;
  margin: 50px auto;
}
.feedinab {
  position: absolute;
  top: 0px;
  bottom: 0;
}
.potatochips_h2 {
  display: block;
  color: #E77F13;
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  padding-top: 20px;
  margin: 20px;
}
.potatochips_text {
  display: block;
  font-size: 20px;
  margin: 20px;
  padding: 10px;
}
.linear {
  background: linear-gradient(transparent 60%, #ff6 60%);
  font-size: 20px;
}
@media screen and (max-width:767px) {
  .potatochips_h2 {
    font-size: 22px;
  }
  .potatochips_text {
    font-size: 14px;
  }
  .linear {
    font-size: 14px;
  }
}
.logo {
  max-width: 500px;
  position: absolute;
  right: 0%;
  top: -22px;
}
.giji {
  content: "";
  height: 400px;
  margin-top: -200px;
}
@media screen and (max-width:767px) {
  .logo {
    right: 0%;
    top: -10px;
  }
  .giji {
    height: 200px;
    margin-top: -150px;
  }
}
.shivering {
  animation: shivering 2s linear;
  animation-iteration-count: 4;
  z-index: 99;
  overflow: hidden;
}
/* shivering */
@keyframes shivering {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}
.zoomFade {
  animation: zoomFade 5s ease-in-out;
  animation-iteration-count: 3;
  z-index: 99;
}
/* zoomFade */
@keyframes zoomFade {
  0% {
    transform: scaleX(1)
  }
  50% {
    transform: scale3d(1.55, 1.55, 1.55)
  }
  to {
    transform: scaleX(1)
  }
}
.scroll_up {
  transition: 2.0s ease-in-out;
  transform: translateY(40px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}