.portfolio-wrapper{
  width: 70%;
  margin: 0 auto;
}

.port-sub{
   font-family: "serif";
   font-size: 3vw;
   padding-top: 12vw;
   padding-bottom: 7vw;
   letter-spacing: 3px;
   text-align: center ;
}

.portfolio{
display: flex ;
position: relative ;
}

.portfolio-pc{
width: 50vw;
height: 29vw;
}

.portfolio-sp{
 position: absolute ;
 top: 0;
 right: 0;
}

.portfolio-pc img{
width: 50vw;
height: 29vw;
border: 2px solid #ccc;
}

.portfolio-pc img:hover{
border: 3px solid #aaa;
 transition: 0.1s;
}

.portfolio-sp img{
width: 17vw;
height: 29vw;
border: 2px solid #ccc;
}

.portfolio-sp img:hover{
border: 3px solid #aaa;
 transition: 0.1s;
}

.portfolio-sub h1{
font-family: "serif";
font-size: 24px;
margin: 2vw 0 6vw 0;
text-align: left;
letter-spacing: 3px;
}

@media screen and (max-width: 1400px) {

 .portfolio-wrapper{
  width: 70%;
}
    
.port-sub{
   padding-top: 11vw;
   padding-bottom: 7vw;
}
    
.portfolio-pc{
width: 50vw;
height: 29vw;
}

.portfolio-pc img{
width: 50vw;
height: 29vw;
}

.portfolio-sp img{
width: 17vw;
height: 29vw;
}
    
.portfolio-sub h1{
margin: 2vw 0 6vw 0;
}
}   

@media screen and (max-width: 1300px) {
    .port-sub{
   padding-top: 150px;
   padding-bottom: 80px;
   font-size:30px; 
}
    
    .portfolio-sub h1{
font-family: "serif";
font-size: 2vw;
margin: 20px 0 60px 0;
text-align: left;
letter-spacing: 3px;
padding: 0;
}
}

@media screen and (max-width: 500px) {
        .port-sub{
   padding-top: 100px;
   padding-bottom: 80px;
   font-size:6vw;
}
    
        .portfolio-sub h1{
font-family: "serif";
font-size: 4vw;
margin: 20px 0 60px 0;
text-align: center;
letter-spacing: 3px;
padding: 0;
}
}