body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

li{
  list-style:none; 
}

/* ヘッダー */
header{
  width: 100%;
  height:80px;
  z-index: 10;
  position: fixed;
  background-color: white; 
}
.header-logo{
  display:none;
}
.header-nav{
  display:none;
}

/*　ハンバーガーメニュー*/
#menubtn{
  z-index:999;/*追加*/
  position:fixed;/*追加*/
  left:auto;
  right:0; 
}

#menubtn img{
  width:100%;  
  max-width: 50px;
}

.w1000{
  max-width:1000px;
}

.nav-hidden{
display:none;
}

nav{
background-color:#ccc;
padding:20px 3%;
display: none;/*追加*/
}

#nav-input:checked ~ nav {/*チェック入ってるとき ~ メニューが*/
display: block;/*追加*/
animation: 1s fadeIn;/*追加*/
}
@keyframes fadeIn {
from { opacity: 0; }/*追加*/
to { opacity: 1; }/*追加*/
}

/* 画像のスライド */
.swiper-slide{
  width: 100%;
  height:auto;
  margin-top :80px;
}
.swiper-button-prev::after {
  content: none !important;
}
.swiper-button-next::after {
  content: none !important;
}
/* PRODUCT */
.p-title{
  display: flex;
  justify-content: center;
  align-items: center;
  height:80px;
  background-color: rgb(132, 192, 245);
  margin-top: -10px;
  margin-bottom: 30px;
}
.products{
  display: flex;
  flex-direction: column;
  margin-left: 0;
  margin-top:0;
}
.work{
  text-align: center;
}
.w-image{
  width:300px;
  height:200px;
}
.work p{
 width: 80%;
 margin-left:auto;
 margin-right:auto;
 text-align: initial;
}
/* NEWS */
.n-title{
  display: flex;
  justify-content: center;
  align-items: center;
  height:80px;
  background-color: rgb(132, 192, 245);
  margin-top: -10px;
  margin-bottom: 30px;

}
.news-items{
  margin-left: 50px;
  margin-right:50px;
  display: flex;
  flex-flow: column;
}
.news-item{
  margin-bottom: 30px;
}
.my-parts-img{
  width:150px;
  height: 150px;
  float:left; 
  margin-right:20px;
}
/* ABOUT */
.a-title{
  display: flex;
  justify-content: center;
  align-items: center;
  height:80px;
  background-color: rgb(132, 192, 245);
  margin-top: -10px;
  margin-bottom: 30px;
}
.selfs{
  margin-left:10px;
}
.self1{
  display:flex;
  flex-direction: column;
  margin-bottom:70px;
}
.self1-img {
  max-width: 370px;
  height: auto; 
  margin-left:auto;
  margin-right:auto;
}
.self2{
  display:flex;
  flex-direction: column;
}
.self2-img {
  max-width: 370px;
  height: auto; 
  margin-left:auto;
  margin-right:auto;
}
/* フッター前リスト*/
.listgp{
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  padding-right: 50px;
  background-color: rgb(158, 142, 142);
  margin-top:50px;
}
/*トップに戻るボタン*/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop i {
  padding-top: 6px
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
/* フッター */
footer{
    width: 100%;
    height:150px;
    background-color: rgb(196, 189, 189);
}  
.footer-logo{
  text-align: center;
}  
.footer-com{
  text-align: center;
}
 
@media screen and (min-width:1024px){
  .products{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 5%;
    margin-right:5%;
    margin-top:0;
  }
  .work{
    width:30%;
  } 
  .news-items{
    margin-left: 150px;
    margin-right:150px;
  }
  .selfs{
    margin-left: 5%;
    margin-right:5%;  
  }
  .self1{
    display:flex;
    flex-direction: row;
    margin-bottom:70px;
  }
  .self1-img {
    width: 50%;
    height: auto; 
  }
  .self1-body {
     width: 50%;
  }
  .self2{
     display:flex;
     flex-direction: row;
     margin-bottom:70px;
  }
  .self2-body {
  width: 50%;
  }
  .self2-img {
    width: 50%;
    height: auto; 
  }
  .listgp{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
    background-color: rgb(158, 142, 142);
  }
  .lista ul{
    padding-inline-start:0px;
  }
  .header-logo{
    display:block;
  }
  .w1000{
    display:none;
  }
  .header-nav {
    display:block;
    float:right;
  }
  .header-nav ul {
    margin-left: 100;
    padding-top: 15;
  }
  .header-nav ul li {
    float: left; 
  }
  .header-nav ul li a {
	  display: inline-block;
	  padding: .4em .8em;
	  text-align: center;
  }
  .header-logo{
    float:left;
  }
}