*{
    margin: 0;
    padding: 0;
  }
  body{
    font-family: "游ゴシック","Yu Gothic","ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
  }
  li{
    list-style: none;
  }
  img{
    display: block;
  }
  a{
    display: block;
  }
  @media screen and (min-width:768px){
    
    .sp{
      display: none;
    }
    .pc{
      display: block;
    }
    .wrap{
       overflow: hidden;
    }
    .wrap span{opacity: 0;}
.wrap.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;} 
}
    h2{
      margin-bottom: 20px;
      text-align: center;
    }
 
    #gnavi{
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 95px;
    }
    #gnavi ul{
      font-size: 24px;
      display: flex;
    }
    #gnavi ul li{
      margin-right: 100px;
    }
    #title{
      margin-top: 140px;
      width: 1000px;
      display: flex;
      margin-left: auto;
      margin-right: auto;
      font-size: 60px;
      color: #333;
      text-align: center;
    }
    #star1{
      margin-top: 180px;
    }
    #star2{
      margin-top: 80px;
      margin-left: 20px;
      margin-right: 40px;
    }
    #star3{
      margin-top: 80px;
      margin-left: 40px;
    }
    #star4{
      margin-top: 180px;
      margin-left: 20px;
    }
    #profile{
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        color: #333;
    }
    #profile table{
      margin-left: 300px;
    }
    #profile table th{
      padding-right: 95px;
      text-align: right;
    }
    #profile h3{
      text-align: center;
      margin-top: 40px;
    }
    #profile p{
      margin-left: 200px;
    }
    #skills{
        margin-top: 80px;
        text-align: center;
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
        color: #333;
    }
    #skills table{
      margin-left: auto;
      margin-right: auto;
      font-weight: bold;
    }
    #skills table tr td{
      padding-right: 90px;
    }
    #websites{
      margin-top: 80px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      color: #333;
    }
    #websites h3{
      padding-top: 40px;
      text-align: center;
      padding-bottom: 10px;
    }
      #kirakira{
      clear: both;
      display: flex;
      padding-top: 40px;
    }
    #kirakira img{
      margin-right: 80px;
    }
    #kirakira img:hover{
      opacity: 0.6;
    }
    #kirakira div{
      float: left;
    }
    #hajime{
      clear: both;
      display: flex;
      padding-top: 40px;
    }
    #hajime img{
      margin-left: 80px;
    }
    #hajime img:hover{
      opacity: 0.6;
    }
    #banners{
      margin-top: 80px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      color: #333;
    }
    #lovely{
      float: left;
      margin-left: 60px;
    }
    #walker{
      float: left;
      margin-left: 60px;
    }
    #care{
      float: left;
      margin-left: 60px;
    }
    #banners2{
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      text-align: center;
      color: #333;
    }
    #houseWork{
      padding-top: 20px;
      clear: both;
      margin-left: 60px;
      float: left;
    }
    #gym{
      padding-top: 20px;
      float: left;
      margin-left: 60px;
    }
    #bunners img{
      margin-bottom: 10px;
    }
    #spring{
      width: 100%;
    }
    #spring img{
      display: block;
      max-width: 90%;
      height:auto;
    }
    #flyers{
      margin-top: 80px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      color: #333;
    }
    #flyers h3{
      padding-top: 40px;
      padding-bottom: 10px;
    }
    #flyers p{
      width: 500px;
    }
    #reports{
      margin-top: 80px;
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
      #reports p{
      width: 500px;
    }
        #reports img:hover{
      opacity: 0.6;
    }
      a{
        pointer-events:none;
      }
      a img{
        pointer-events: auto;
        cursor: pointer;
      }
        #contacts{
      width: 1000px;
      clear: both;
      padding-top: 80px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      color: #333;
    }
    #twitter{
      margin-left: 420px;
      float: left;
      margin-bottom: 15px;
    }
    #twitter:hover{
      opacity: 0.6;
    }
    #insta{
      margin-right: 420px;
      float: right;
      margin-bottom: 15px;
    }
    #insta:hover{
      opacity: 0.6;
    }
    #mailing{
     margin-top: 20px;  
    }
    #mail{
      clear: both;
      width: 340px;
      height: 40px;
      padding-top: 1px;
      padding-bottom: 1px;
      background-color: #64e6f9;
      font-size: 18px;
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 2px 1px 2px 3px #dbdbff;
      border-radius: 20px;
      margin-bottom: 15px;
    }
    #mail p{
      padding-top: 8px;
      padding-bottom: 14px;
    }
    #mail:hover{
      opacity: 0.6;
    }
    #contacts p{
      font-weight: bold;
    }
    #works{
      margin-top: 20px;
    }
    #aboutWork{
      width: 400px;
      height: 44px;
      padding-top: 6px;
      background-color: #64e6f9;
      font-size:24px;
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 2px 1px 2px 3px #dbdbff;
      border-radius: 22px;
      margin-bottom: 15px;
    }
    #aboutWork:hover{
      opacity: 0.6;
    }
    footer{
      margin-top: 100px;
      background-color: #64e6f9;
      font-weight: bold;
      display: flex;
    }
    footer div{
      width: 1000px;
      height: 100px;
      display: flex;
    }
    footer div p{
      padding-top:45px;
      padding-left: 300px;
      color: #333;
    }
  }