*{
    box-sizing:border-box;
  }
  .clear{
    clear: left;
  }

/*1000px以下の時に適応したいCSS*/
@media(max-width:1000px){
    .soft1,.work1{
        width: 100%;
    }
    .soft2,.work2{
        width: 100%;
    }
    .photo{
        width: 100%
    }
    .profile-main{
        width: 100%;
    }
    .header-list li{
        font-size: 16px;
    }
    .header-logo img{
        width:90%;
        height:90%;
        padding:5px 10px;
    }
    .photo img{
        margin: 0 auto;
        
    }
    .work1 img{
        padding-left: 10px;
        
    }
    .work2 img{
        padding-left: 10px;
       
    }
    .workpage{
        display: flex;
        margin: 0 auto;
        width:90%;

    }
    .workimg2{
        display: flex;
        margin: 0 auto;
        
      
    }  
    .workpage1 hr{
        height:1px;
        right:90%;
        background-color: black;
    }
    .workimg2{
        width: 500px;
        height: 443px;
        display: flex;
        margin: 0 auto;
    }
    .workpagetext{
        font-size: 15px;
        float: left;
        width:100%;
        height:700px;
      }
    
    
}



/*670px以下の時に適応したいCSS*/
@media(max-width:670px){
    .main{
        width:100%;
    }
    
    .soft1,.work1{
        width: 100%;
    }
    .soft2,.work2{
        width: 100%
    }
    .photo{
        margin: 0 auto;
        width: 100%
    }
    .profile-main{
        width: 100%;
    }
    .profile,.contact{
        width:100%;
        margin: 0 auto;
    }
    footer{
        text-align: center;
    }
    
    h1{
        font-size: 25px;
    }
    .work,.skil{
        margin-top: 30px;
    }
    .header-logo img{
        width:70%;
        height:70%;
        padding: 5px ;
    }
    .work1 img{
        width: 210px;
        height: 186px;
        display: flex;
        margin: 0 auto;
    }
    .work2 img{
        width: 210px;
        height: 186px;
        display: flex;
        margin: 0 auto;
    }
    .softtext{
        height: 100px;
    }
    .softtext2{
        height: 210px;
    }
    
    .worktext{
        height:100px;
    }
    .header-list li{
        padding:8px;
        font-size: 13px;
    }
    .photo img{
        margin: 0 auto;
    }
    .pc-menu {
        display: none;
      }
     .workpage{
        display: flex;
        margin: 0 auto;
        width:90%;
     }
    .workimg2{
        
    }  
    .workpage1 hr{
        height:1px;
        right:90%;
        background-color: black;
    }
     .workimg2{
        width: 280px;
        height: 248px;
        display: flex;
        margin: 0 auto;
    }
    .workpagetext{
        font-size: 15px;
        float: left;
        width:100%;
        height:720px;
      }
    
}
/* 画面サイズが999px以下の時はPC用メニューは非表示 */
@media screen and (max-width: 1000px) {
    .pc-menu {
      display: none;
    }
  }
  /* 画面サイズが1000px以上の時はスマホ用メニューは非表示 */
@media screen and (min-width: 999px) {
    .sp-menu {
      display: none;
    }
  }