@charset "utf-8";

body{
  margin: 0;
  padding: 0;
  max-width: 100%;
  margin: auto;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #fff;
  color: #424242;
  position: relative;
    }

@media (max-width: 800px) {

  .pc{
    display: none;
  }

  .header{
    width: 95%;
    margin:10px auto;
    display: flex;
    align-items: center;
  }
  
  .header_logo{
    width: 50%;
  }

  .header_logo img{
    width: 100px;
  }

  .mb_btn{
    width: 50%;
    margin: auto 0 auto auto;
  }

  .mb_btn img{
    width: 160px;
    margin: auto 0 auto auto;
    margin-right: 0px;
  }

  .mb_top{
    width: 100%;
  }

  .mb_top img{
    width: 100%;
  }

  .mb_1{
    width: 100%;
    padding-top: 50px;
    text-align: center;
  }

  .mb_1 img{
    width: 90%;
  }

   .animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.0s;
  }

  .keyframe7 {
  animation-name: jump;
  animation-duration: .8s;
  }

  @keyframes jump{
  0%   { transform:translate(0%, 60px) rotateX(70deg); }
  100% { transform:translate(0%, 0%); }
  }

  .mb_2{
  width: 100%;
  text-align: center;
  }

  .mb_2 img{
    position: relative;
    width: 180px;
    z-index: 10;
    margin-left: 15%;
  }

  .mb_3{
    width: 100%;
    padding-top: 50px;
    text-align: center;
    margin-top: -30%;
  }

  .mb_3 img{
    position: relative;
    z-index: 900;
    width: 100%;
  }

  .mb_3_2{
    width: 100%;
    text-align: center;
    margin-top: -25%;
  }

  .mb_3_2 img{
    position: relative;
    z-index: 999;
    width: 90%;
  }

  .mb_4{
    width: 100%;
  }

  .mb_4 img{
    position: relative;
    z-index: 999;
    width: 100%;
  }

    .slie{
    margin-top: -120%;
    position: relative;
    z-index: 999;
  }

  .slide-container {
    width: 100%;
    margin: 0px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
}
.slide{
  height: 36vh;
  object-fit:cover;
  margin: 10px;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}

 .slide-paused:hover .slide-wrapper {
   animation-play-state: paused;
 }
 .slide-paused:hover .slide-wrapper img:hover {
   opacity: .99;
   cursor: grabbing;
 }

 .mb_5{
    width: 100%;
    margin-top: 30%;
  }

  .mb_5 img{
    position: relative;
    z-index: 999;
    width: 100%;
  }

  .mb_6{
    width: 100%;
    margin-top: -10%;
  }

  .mb_6 img{
    position: relative;
    z-index: 999;
    width: 100%;
  }

  .btn_1{
    width: 100%;
    margin: auto;
    text-align: center;
  }

  .btn_1 img{
    position: absolute;
    z-index: 999;
    text-align: center;
    width: 70%;
    margin-top: -74%;
    margin-left: 12%;

  }

  .btn_2{
    width: 100%;
    margin: auto;
    text-align: center;
  }

  .btn_2 img{
    position: absolute;
    z-index: 999;
    text-align: center;
    width: 68%;
    margin-top: -45%;
    margin-left: 19%;

  }

  .mb_7{
    width: 100%;
    margin-top: -4%;
  }

  .mb_7 img{
    width: 100%;
  }

  .mb_8{
    width: 100%;
    margin-top: -4%;
  }

  .mb_8 img{
    width: 100%;
  }

  .mb_9{
    margin-top: -4%;
    width: 100%;
  }

  .mb_9 img{
    width: 100%;
  }

  .mb_10{
    width: 100%;
    margin-top: -4%;
  }

  .mb_10 img{
    width: 100%;
  }

  .footer{
     background-color: #f08c21;
     color: #fff;
     text-align: center;
     padding-top: 50px ;
     margin-top: -1%;
  }

  .footer a{
    color: #fff;
  }
  
  .footer_1{
    width: 100%;
    margin-bottom: 20px;
  }

  .footer_1 img{
    width: 60%;
    margin: auto;
    margin-bottom: 20px;
  }

  .footer_2{
    padding-top: 40px;
  }

  .footer p{
    font-size: 13px;
  }

  .footer_2 small{
    font-size: 10px;
    letter-spacing: 1px;
  }


}


@media (min-width: 801px) {

  .mb{
    display: none;
  }

  .header{
    width: 95%;
    margin:10px auto;
    display: flex;
    align-items: center;
  }

  .header_logo{
    width: 80%;
  }

  .header_logo img{
    width: 120px;
  }

  .header_tell{
    margin: auto 0 auto auto;
  }

  .header_tell img{
    width: 200px;
    margin-right: 10px;
  }

  .header_btn{
    display: flex;
    margin: auto 0 auto auto;
  }

  .header_btn_content{
    width: 45%;
  }

  .header_btn img{
    width: 150px;
    margin-left: 10px;
  }

  .pc_top{
    width: 100%;
  }

  .pc_top img{
    width: 100%;
  }

  .pc_1{
    width: 100%;
    text-align: center;
    margin: 50px auto;
  }

  .pc_1 img{
    width: 70%;
    max-width: 900px;
  }

  .pc_2{
    width: 100%;
    text-align: center;
  }

  .animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.0s;
}

.keyframe7 {
  animation-name: jump;
  animation-duration: .8s;
}

@keyframes jump{
  0%   { transform:translate(0%, 80px) rotateX(70deg); }
  100% { transform:translate(0%, 0%); }
}

  .pc_2 img{
    position: relative;
    width: 260px;
    z-index: 10;
    margin-left: 3%;
  }

  .pc_3{
    width: 100%;
    margin-top: -100px;
    z-index: 999;
  }

  .pc_3 img{
    position: relative;
    width: 100%;
    z-index: 999;
  }

  .pc_4{
    width: 100%;
    margin-top: -1.5%;
  }

  .pc_4 img{
    width: 100%;
  }

  .pc_4_2{
    width: 100%;
    text-align: center;
    margin-top: -12%;
  }

  .pc_4_2 img{
    width: 43%;
  }

  .pc_5{
    width: 100%;
    margin-top: 2%;
  }

  .pc_5 img{
    width: 100%;
  }

  .slie{
    margin-top: -32%;
  }

.slider img {
    width:80%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

  .pc_6{
    width: 100%;
    margin-top: 8%;
  }

  .pc_6 img{
    width: 100%;
  }

  .pc_7{
    width: 100%;
    margin-top: -4%;
  }

  .pc_7 img{
    width: 100%;
  }

  .pc_7_btn{
    width: 100%;
    text-align: center;
    margin-top: -13.5%;
    

  }

  .btn_1{
    margin-right: 11%;
  }

  .btn_1 img{
    width: 20%;
  }

  .btn_2{
    margin-left: 0%;
  }

  .btn_2 img{
    width: 19%;
  }

  .pc_8{
    width: 100%;
     margin-top: 7%;
  }

  .pc_8 img{
    width: 100%;
  }

  .pc_9{
    width: 100%;
     margin-top: -2%;
  }

  .pc_9 img{
    width: 100%;
  }
  
  .pc_10{
    width: 100%;
    margin-top: -1%;
  }

  .pc_10 img{
    width: 100%;
  }

  .pc_11{
    width: 100%;
     margin-top: -1%;
  }

  .pc_11 img{
    width: 100%;
  }

  .pc_12{
    width: 100%;
     margin-top: -1%;
  }

  .pc_12 img{
    width: 100%;
  }

  .pc_12_btn{
    width: 100%;
    text-align: center;
    margin-top: -13.5%;
    

  }

  .btn_1{
    margin-right: 11%;
  }

  .btn_1 img{
    width: 20%;
  }

  .btn_2{
    margin-left: 0%;
  }

  .btn_2 img{
    width: 19%;
  }

  .pc_13{
    width:100%;
    margin-top: 7%;
  }

  .footer{
     background-color: #f08c21;
     color: #fff;
     text-align: center;
     padding-top: 100px ;
     margin-top: -1%;
  }

  .footer a{
    color: #fff;
  }
  
  .footer_1{
    display: flex;
    width: 50%;
    text-align: center;
    margin: auto;
    padding-bottom: 50px;
  }

  .footer_1 img{
    width: 45%;
    margin: auto;
  }

  .footer_2{
    padding-top: 80px;
  }

  .footer_2 small{
    font-size: 13px;
    letter-spacing: 2px;
  }



}