.pc_only{
  display: block;
}
.sp_only{
  display: none;
}
.container{
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
figure {
    padding: 35px 30px;
    text-align: center;
}
img{
  width: 100%;
}
body{
  width:100%;
}
a:hover{
	opacity: 0.7;
  transition: 1s;
}
.header {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0px;
  margin: 0 auto;
}

.flex{
  display: flex;
  justify-content: center;

}
figure.out_img {
  padding: 0px;
}
#top{
  background-image: url("images/top_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 1038px;
}
figure.top_img {
  margin-left: 0px;
}
figure.top_goat {
  position: absolute;
  bottom: -36px;
  left: -160px;
  width: 50%;
}
video.video_top {
    width: 100%;
    text-align: center;
}
.video {
  text-align: center;
  padding: 35px 10px;
  width: 30%;
}
#voice{
  background-image: url("images/voice_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
img.small {
  width: 50%;
  margin: 0 auto;
}
#annoy{
  background-image: url("images/annoy_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.annoy_flex{
  display: flex;
  background-color: rgba(128, 105, 77, 0.8);
  background-size: cover;
}
.annoy_flex figure{
  max-width: 1080px;
  margin: 0 auto;
}
figure.annoy_title_foot {
    position: absolute;
    right: 40px;
    top: 82px;
}
figure.annoy_foot {
    position: absolute;
    bottom: 170px;
    left: 40px;
}
figure.annoy_dog {
    width: 60%;
    margin: 0 auto;
    padding: 0;
}
#detail{
  background-image: url("images/detail_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

figure.detail_milk {
  width: 80%;
  margin-left: 193px;
}
figure.detail_goat {
  position: absolute;
  bottom: -36px;
  left: -183px;
  width: 40%;
}
.goods{
  width: 80%;
  margin: 0 auto;
}
.good_text_3_bg {
  background-image: url(images/good_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#feature{
  background-image: url("images/feature_bg_title.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.feature_box {
    background-color: #ffffff;
    width: 94%;
    margin: 0 auto 35px;
}
.feature_box figure {
  width: 90%;
  margin: 0 auto;
}
.feature_video {
    width: 60%;
    margin: 0 auto;
}
#feature2{
  background-color: #8ab9d0;
}
video.feature_video {
    width: 100%;
}
#feature2 .cnt_inner {
  padding-top: 30px;
}
#comment{
  background-color: #fff3e1;
}
#fun{
  background-image: url("images/fun_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
#substance{
  background-color: #ead4c4;
}
#price{
  background-image: url("images/price_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
#price figure{
  width: 80%;
  margin: 0 auto;
  padding: 0 20px 0 0;
}
#question{
  background-image: url("images/question_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
#question figure{
  width: 80%;
  margin: 0 auto;
}
#footer{
  background-color: #8ab9d3;
  padding-bottom: 140px;
}
img.footer_small {
    width: 20%;
}
@media (max-width: 768px) {
  .sp_only{
    display: block;
  }
  .pc_only{
    display: none;
  }
  body{
    width:100%;
  }
  img{
    width: 100%;
  }
  figure {
      padding: 10px 23px;
      text-align: center;
  }
  .header {
  position: fixed; /* ヘッダーを固定する */
  bottom: 0; /* 上部から配置の基準位置を決める */
  left: 0; /* 左から配置の基準位置を決める */
  width: 100%; /* ヘッダーの横幅を指定する */
  padding: 0px; /* ヘッダーの余白を指定する(上下左右) */
  }

  .header img{
    overflow: hidden;
  }

  img.sp_only.sp_top_img {
      width: auto;
      height: 420px;
      margin: auto;
  }
  #top{
    background-image: url("images/sp_top_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 420px;
  }
  .video_1 {
      width: 85%;
      margin: 0 auto;
  }
  figure.top_img {
      margin-left: auto;
      padding-right: 0;
      padding-left: 0;
  }
  figure.top_goat {
      position: absolute;
      left: -30px;
      bottom: -10px;
      width: 70%;
  }
  figure.top_goat img {
      width: 130px;
      height: auto;
  }
  .flex {
    display: block;
    text-align: center;
  }
  .video {
    text-align: center;
    padding: 17px 0;
    width: 90%;
  }
  img.annoy_title {
      width: 70%;
  }
  .goods{
    width: 92%;
    margin-left: 8%;
    padding:0;
  }
  #voice{
    background-image: url("images/sp_voice_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  figure.annoy_title_foot {
    position: absolute;
    right: 40px;
    top: 82px;
    width: 20%;
  }
  figure.annoy_foot {
    position: absolute;
    bottom: 148px;
    left: 0px;
    width: 30%;
  }
  figure.detail_milk {
    width: 60%;
    margin-left: auto;
  }
  figure.detail_goat {
    display: none;
  }
  .feature_box {
      background-color: #ffffff;
      width: 90%;
      margin: 0 auto 10px;
  }
  #price figure{
    width: 95%;
    padding: 0 5% 0 0;
  }
  #question{
    background-color: #fff3e1;
    background-image: none;
  }
  video.video2 {
      width: 100%;
  }
  img.small {
      width: 100%;
      margin: 0 auto;
  }
  #footer{
    background-color: #8ab9d3;
    padding-bottom: 40px;
  }

  img.footer_small {
      width: 40%;
  }

}