*{
  margin: 0;
  padding: 0;
}

.menu{
  

  height: 100px;
  width: 100%;

 position: fixed;

 background-color: rgb(227, 239, 239);

 opacity: 0.7;

z-index: 1;

}


.menu1{

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;


  display: flex;
  
  text-align: right;  /* 文章を右寄せする(※) */
  float: right;     /* 端に寄せて、後続を左側へ回り込ませる */

padding-top:30px;



  
}


.menu2{
 margin-right: 50px;

font-size: 20px;

}


.menu2 a{
  display: inline-block;
  color:#1f050f;
  font-size:120%;
  text-decoration:none;


  transition:0.3s;
}


.menu2 a:hover{
  color: #c1ced1;
  text-decoration:underline;
  
}



.logo{
  font-size: 20px;

text-align: left; 

padding-top:30px;
padding-left: 50px;

}







.title{
  height: 100vh;
  width: 100%;

background-image:url(7.png);
background-size:100% 100%;


}


.title1
{
font-size: 70px;

font-family: "Agu Display", serif;   /*フォント変え以下6列*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "MORF" <morph>;

text-align:center;

padding-top: 180px;

}


.title2{
  padding-top: 200px;
  padding-left: 350px;


  
}



.zu{
  display: flex; 
  padding-left: 450px;
  
}


.sankaku{
  
  background-color: aquamarine;
}

.maru{
 
  
  background-color: aquamarine;
}






.skill{
background-color:rgb(227, 239, 239) ;


  text-align: center;
  height: 800px;
  width: 100%;
}


.skillm{
  padding-top: 200px;
}


.skill1{


  font-size: 60px;
  

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;

   


}

.skill2{
 
padding-bottom:30px ;
  

 
  
}


.skill3{
  padding-top:50px;
}


.line{
  padding-left:150px ;
  padding-right:150px ;
}



.portfolio{

}


.portfolio1{
  font-size: 60px;

  text-align: center;

  font-family: "Agu Display", serif;   /*フォント変え以下6列*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "MORF" <morph>;

}


.portfoliom{
  padding-top: 100px;
}


.portfolio2{
  text-align: center;
  padding-bottom:30px ;
}

.portfolio3{
  padding-left:50px;
flex-wrap:wrap;


  padding-top:50px;
  text-align: center;
}

.line2{
  padding-left:150px ;
  padding-right:150px ;
}