@charset "utf-8";
header{
  height: 50px;
  margin:0;
  background: rgba(51,204,204,1) ;
  color: #fff;
}

header>h1{
  text-align: center;
  line-height: 50px;
  margin:0;
  font-weight:lighter;
}

h2{
  text-align: center;
  font-weight: lighter;
}

html{
  height: 100% ;
}

body{
  height: 100% ;
}

div.photo{
  height: 100% ;
  width: 447px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

img{
  height:500px;
  border-radius:3%;
  position:absolute;
  top:0px;
  left:0px;
}

a{
  text-decoration: none;
}

.link{
  padding:5px 10px;
  background-color: rgba(51,204,204,1);
  color: #fff;
  box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}

.link:hover{
  background-color: rgba(75,220,220,1);
}

#hana{
  position:absolute;
  top:25px;
  left:26px;
}

#watage{
  position:absolute;
  top:20px;
  left:300px;
}

#ha{
  position:absolute;
  top:240px;
  left:320px;
}

#ne{
  position:absolute;
  top:430px;
  left:30px;
}