@charset "UTF-8";

h1,h2,h3,h4,h5,h6{
    font-size:100%;
    margin:0;
    padding:0;
    color: #000;
}
body {
  width:100%;
  margin:0;
  padding:0;
  font-family:'Arial','小塚ゴシック Pro',sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased !important;
  scrollbar-base-color : #ccff99;
}
.container{
  overflow: hidden;
}
ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
li{
  color: #000;
}
a{
  text-decoration: none;
  color: #000;
}
p{
  margin: 0;
}
header {
  height:60px;
}
header img{
  margin-top: 17px;
  margin-left: 35px;
}
img{
  vertical-align: bottom;
}



/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}

/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}


/*leather tray sketch*/
.sp{
  display: none;
}



/*Voice*/
.voice{
  width:80%;
  margin: auto;
  text-align: justify;
}
.title{
  padding: 50px 0 30px 0;
}
.title h1{
  font-family: 'Vollkorn', serif;
    font-size: 40px;
    font-weight: normal;
    text-align: center;
}
.title h2{
  font-family: 'Vollkorn', serif;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
}
.voice p{
  font-size: 15px;
}



/*Detail*/
.flex{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.leftimg{
  width: 50%;
}
.txt{
  width: 100%;
  white-space: nowrap;
  margin-left: -50px;
  padding-bottom: 40px;
}
.txt h1{
  font-family: 'Vollkorn', serif;
  font-size: 25px;
  font-weight: normal;
  padding-bottom: 10px;
  white-space: nowrap;
}
.txt p{
  font-size: 15px;
}
.imgwrap{
  margin-bottom: -150px;
  padding-left: 40%;
}
.imgflex{
  display: flex;
  flex-direction: row;
  width: 30%;
  align-items: flex-start;
}
.imgflex img{
  padding: 5px 10px 5px 0;
  width: 180px;
}
.flex2{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 200px;
}
.txt2{
  text-align: center;
  width: 60%;
  white-space: nowrap;
}
.txt2 h1{
  font-family: 'Vollkorn', serif;
  font-size: 25px;
  font-weight: normal;
  padding-bottom: 10px;
}
.txt2 p{
  font-size: 15px;
}
.flex2 img{
  width: 50%;
}


/*img wrap*/
.img_wrap{
  padding-top: 100px;
}
.img{
  padding-bottom: 100px;
}
.img_wrap p{
  font-size: 15px;
  width: 80%;
  margin: auto;
  padding: 50px 0 100px 0;
}



/*Spec*/
.spec{
  width: 80%;
  margin: auto;
}
.spec p{
  font-size: 20px;
  line-height: 35px;
}



/*btn*/
.btn{
  text-align: center;
  padding-top: 100px;
}
.btn a{
  font-size: 15px;
  border: solid 1px #000000;
  padding: 10px 150px;
}
.btn a:hover{
  background-color: #000000;
  color: #ffffff;
  transition: 0.3s;
}



/*footer*/
footer{
  background-color: #444444;
  margin-top: 100px;
}
footer p{
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
}



/*上部へ戻るボタン*/
#page_top{
  width: 55px;
  height: 55px;
  position: fixed;
  right: 30px;
  bottom: 0;
  background: #C0C0C0;
}
#page_top a{
  position: relative;
  display: block;
  width: 55px;
  height: 55px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f0d8';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top:hover{
  opacity: 0.8;
  transition: 0.2s;
}



@media(max-width:1024px)/*ipad*/{
  /*Detail*/
  .imgwrap{
    padding-left: 41.5%;
  }
  .imgflex img{
    width: 160px;
  }
}



@media(max-width:768px)/*ipad*/{
  .title h2{
    font-size: 13px;
  }
  .voice p{
    font-size: 13px;
  }



  /*Detail*/
  .txt{
    margin-left: -50px;
    padding-bottom: 50px;
    width: 100%;
    white-space: nowrap;
  }
  .txt p{
    font-size: 13px;
  }
  .txt2{
    width: 100%;
    white-space: nowrap;
    padding: 5%;
  }
  .txt2 p{
    font-size: 13px;
  }
  .imgwrap{
    padding-left: 30.5%;
  }
  .imgflex img{
    width: 130px;
  }



  /*img wrap*/
  .img_wrap p{
    font-size: 13px;
  }



  /*Spec*/
  .spec p{
    font-size: 15px;
  }
  .btn a{
    font-size: 13px;
  }
}



@media(max-width:420px)/*phone*/{
  /*header*/
  header img{
    width: 130px;
    height: auto;
  }



  /*top img*/
  .pc{
    display: none;
  }
  .sp{
    display: inline;
  }



  /*Voice*/
  .title h1{
    font-size: 35px;
  }
  .voice{
    width: 90%;
  }



  /*Detail*/
  /*Function*/
  .flex{
    flex-direction: column;
  }
  .leftimg{
    width: 100%;
  }
  .txt{
    margin-top: -30px;
    width: 90%;
    margin-left: 0;
    padding: 0 0 50px 20px;
    white-space: inherit;
    text-align: justify;
  }
  .txt h1{
    font-size: 20px;
  }
  .txt p{
    font-size: 12px;
  }
  /*img wrap*/
  .imgwrap{
    padding-left: 0;
    width: 60.5%;
    margin: auto;
  }
  .imgflex{
    width: 120px;
  }
  .imgflex img{
    padding: 5px 10px 5px 0;
    width: 100%;
  }
  .flex2{
    flex-direction: column-reverse;
    padding-top: 50px;
  }
  .flex2 img{
    width: 100%;
  }
  .txt2{
    padding-bottom: 0;
    text-align: justify;

    white-space: inherit;
    width: 90%;
    text-align: center;
  }
  .txt2 h1{
    font-size: 20px;
  }
  .txt2 p{
    font-size: 12px;
  }



  /*img wrap*/
  .img_wrap{
    padding-top: 50px;
  }
  .img{
    padding-bottom: 50px;
  }
  .img_wrap p{
    font-size: 13px;
    padding: 20px 0 50px 0;
    width: 90%;
  }



  /*Spec*/
  .spec{
    width: 72%;
  }
  .spec p{
    font-size: 13px;
    line-height: 25px;
  }



  /*btn*/
  .btn{
    padding-top: 50px;
  }
  .btn a{
    font-size: 12px;
    padding: 8px 100px;
  }



  /*上に戻るボタン*/
  #page_top{
    width: 45px;
    height: 45px;
  }

  #page_top a{
    width: 45px;
    height: 45px;
  }
}



@media(max-width:375px){
  .imgwrap{
    width: 67%;
  }
  .spec{
    width: 79%;
  }
}



@media(max-width:360px){
  .imgwrap{
    width: 69.5%;
  }
  .spec{
    width: 83%;
  }
}




@media(max-width:320px){
  .title h2{
    font-size: 12px;
  }



  /*Voice*/
  .imgwrap{
    width: 78%;
  }
  .voice p{
    font-size: 12px;
  }
  .txt p{
    font-size: 12px;
  }
  .txt2 p{
    font-size: 12px;
  }



  /*img wrap*/
  .txt3 p{
    font-size: 12px;
  }



  /*Spec*/
  .spec{
    width: 90%;
  }
  .spec p{
    font-size: 12px;
  }
  .btn a{
    font-size: 12px;
    padding:8px 95px;
  }
}