body{ text-align: center;
  margin-top: 20px,20px,20px,0px;
  font-family: 'Cormorant Garamond', serif;
  }


@media screen and (max-width: 479px) {
  .img{ width: 50%; margin: 40px;}
  .name{ margin: 30px; letter-spacing: 2px;}
  .profile{ text-align: left;
    margin: 100px 20px 20px;
    line-height: 2;
    font-size: 70%;
  letter-spacing: 2px;}
  .job{ text-align: left;
    margin: 20px;
    line-height: 2;
    font-size: 70%;
  letter-spacing: 2px;}
  .ex{ text-align: left;
    margin: 20px;
    line-height: 2;
    font-size: 70%;
  letter-spacing: 2px;}
  .footer{ margin: 50px;}
  .oya{width: 70vw; height: 100vh;}
  .menu{float: right; height: 100vh; width: 30vw; margin-top: 30px;}
  .menu li a{ display: block; padding: 0px 5px; text-decoration: none;
  margin: 5px 0px; text-align: right; font-size: 100%;}
}

@media screen and (min-width: 480px) {
.oya{width: 70vw; height: 100vh;}
.img{ width: 40%; margin: 60px;}
.name{ margin: 40px;  letter-spacing: 2px;}
.profile{ text-align: left;
  margin: 100px 20px 20px;  letter-spacing: 2px;}
.job{ text-align: left; margin: 20px;  letter-spacing: 2px;}
.ex{ text-align: left; margin: 20px;  letter-spacing: 2px;}
.footer{ margin: 50px;}

  .menu { float: right;  height: 100vh; width: 20vw;  margin-top: 30px;}
  .menu ul{ margin-top: 0px; padding: 0; list-style: none;}
  .menu li{ display: inline; padding: 0; margin: 0; }
  .menu li a{ display: block; padding: 3px 10px; text-decoration: none;
  margin: 2px 0px; text-align: right; font-size: 140%; }

}

a:link {/*未訪問のリンク*/ color:black; }
a:visited {/*訪問後のリンク*/color:gray; }