@charset "UTF-8";
/* CSS Document */

.about{
  height: 100vh;
  scroll-snap-align: start;
  background-color: #E7C6A8;
  background-image: url("../img/cat2.png"),url("../svg/wave1.svg"),url("../svg/wave2.svg");
  background-repeat: no-repeat;
  background-position: 100px 2px,top,bottom;
  background-size: 300px,auto,auto;
}


  .about h2{
  font-size: 4.0rem;
  padding-top: 220px;
  padding-bottom: 30px;
}
  .about div{
    display: flex;
    margin-top: 40px;
    justify-content: center;
  }
  
  .about_to_works{
    display: block;
    margin-top: 100px;
  }
  .about a div{
    text-align: center;
    width: 30px;
    height: 30px;
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #383330;
    opacity: 0.6;
    transform: rotate(45deg);
    margin: 0 auto;
  }
  .about a p{
    font-size: 2.0rem;
    opacity: 0.6;
    display: block;
    margin: 0px auto 0 auto;
    width: 54px;
  }


@media(min-width:1000px){
  .about .aboutme{
    font-size: 1.7rem;
    line-height: normal;
    display: inline-block;
    min-width: 551px;
    margin: auto auto auto 0;
  }
  .about .about_more{
    display: block;
    margin-top: 30px;
    margin-left: 440px;
  }
  .about_cat{
    width: 136px;
    height: 136px;
    margin: -65px auto auto -150px;
  }
}


@media(max-width:999px){
  .about{
    background-size: 150px,auto,auto;
    background-position: 20px 0px,top,bottom;
  }
  .about .aboutme{
    font-size: 1.5rem;
    line-height: normal;
    display: inline-block;
    margin: auto auto auto 0;
  }
  .about .about_more{
    display: block;
    margin-top: 30px;
  }
  .about h2{
    font-size: 4.0rem;
    padding-top: 120px;
    padding-bottom: 30px;
  }
  .about_cat{
    width: 136px;
    height: 136px;
    margin: -115px auto auto -150px;
  }
  
}  

@media only screen and (max-width:999px) and (min-width:500px){
  .about h2{
    font-size: 4.0rem;
    padding-top: 230px;
    padding-bottom: 30px;
  }
  .about{
    background-position: 20px 62px,top,bottom;
  }
}

/*about_cat*/
@media(min-width:1150px){
  .about_cat{
    width: 230px;
    height: 230px;
  }
}