*{
    margin: 0;
    padding: 0;
  }
  body{
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
  }
  li{
    list-style: none;
  }
  img{
    display: block;
  }
  a{
    display: block;
  }
  @media screen and (max-width:767px){
    .sp{
      display: block;
    }
    .pc{
      display: none;
    }
    .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: 0.6em;
      text-align: center;
      font-weight: bold;
      color: #333;
    }
    h3{
      margin-top: 1em;
      margin-bottom: 0.2em;
      text-align: center;
      font-weight: bold;
    }
    #title{
      margin-top: 4em;
      width: 90%;
      font-size: 1.8em;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
      color: #333;
    }
    #star1{
      float: left;
    }
    #star2{
      float: right;
    }
    #star3{
      clear: both;
      float: left;
    }
    #star4{
      float: right;
    }
    #headerMenu{
      clear: both;
      font-size: 0.9em;
      display: flex;
      padding-top: 0.8em;
      padding-bottom: 0.4em;
      } 
  #nav-toggle span{
      background-color: #333;
      width: 40%;
      height: 0.2em;
      display: block;
      position: absolute;
      left: 5px;
      transition:0.8s;
  }
  #nav-toggle span:nth-child(1){
      top: 0;           
  }
  #nav-toggle span:nth-child(2){
      top: 0.5em;
  }
  #nav-toggle span:nth-child(3){
      top: 1em;
  }
  #nav-toggle{
      position: relative;
      border-radius: 5px;
      cursor: pointer;    
      top: 0.3em;
      width: 4em;
      height: 2em;
      z-index: 10000;
      margin-top: 3em;
      margin-left:15em;
  }
  .open #nav-toggle span:nth-child(1){
      top: 0.5em;
      transform: rotate(45deg);
  }
  .open #nav-toggle span:nth-child(2){
      opacity: 0;
  }
  .open #nav-toggle span:nth-child(3){
      top: 0.5em;
      transform: rotate(-45deg);
  }       
      #gnavi{
          width: 100%;
          height: 100vh;
          background-color:#fff;
          position: fixed;
          top: 0;
          left: 0;
          transform: translateY(-100vh);
          transition: 0.8s;
          z-index: 1000;
      }
      .open #gnavi{
          width: 100%;
          height: 100vh;
          position: fixed;
          top: 0;
          left: 0;
          transform: translateY(0);
      }
      #gnavi ul{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          font-size: 1.5em;
      }
      #gnavi ul li{
          margin-bottom: 20px;
          cursor: pointer;  
      }
    #profile{
       width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4em;
        color: #333;
    }
  #skills{
    margin-top: 4em;
    width: 90%;
    color: #333;
}
#skills table{
    margin-left: auto;
    margin-right: auto;
}
#websites{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4em;
  color: #333;
}
#websites img{
  width: 100%;
  height: auto;
}
#websites h4{
  margin-top: 0.4em;
  text-align: center;
}
#hajime{
  margin-top: 2em;
}
#banners{
  text-align: center;
  margin-top: 4em;
  color: #333;
}
#banners img{  
  margin-bottom: 0.4em;  
  margin-left: auto;
  margin-right: auto;
}
#lovely{
  margin-bottom: 1em; 
}
#walker{
  margin-bottom: 1em;
}
#care{
  margin-bottom: 1em;
}
#banners2{
  text-align: center;
  color: #333;
}
#banners2 img{  
  margin-bottom: 0.4em;  
  margin-left: auto;
  margin-right: auto;
}
#flyers{
  margin-top: 4em; 
}
#spring img{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
#others img{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
#contacts{
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #333;
}
#twitter{
  margin-left: 5em;
  float: left;
}
#insta{
  margin-right: 5em;
  float: right;
}
#mail{
  width: 20rem; 
  padding-top: 0.4em;
  background-color: #64e6f9;
  font-size: 1em;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px 2px #dbdbff;
  border-radius: 1em;
  margin-bottom: 1em;
}
#aboutWork{
  width: 20rem;
  padding-top: 0.2em;
  background-color: #64e6f9;
  font-size:1em;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 1px 2px 3px #dbdbff;
  border-radius: 1em;
  margin-bottom: 1em;
}
footer{
  margin-top: 6em;
  background-color: #64e6f9;;
  height: 8em;
}
footer div{
  padding-top: 2em;
  text-align: center;
}
}