html {
}
body {
  width:100%;
  /*height:400px;*/
  margin:auto;
  background: rgb(182, 227, 233);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic';
  overflow-x: hidden;
}
header {
  height: 50px;
  width: 100%;
  margin: auto;
  font-size:15px;
}
header ul {
  float: none;
  background-color: rgba(200, 200, 200, 0.5);
}
.last-list {
  border-right: solid 2px rgb(130,130,130) ;
}
header ul li {
  float: left;
  width: 23%;
  border-left: solid 2px rgb(130,130,130) ;
  text-align: center;
  color: rgb(100,100,100) ;
}
header ul li:hover {
  background-color: rgba(250,250,250,0.5);
}

#research-bar{
  margin-top:0px;
  padding-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
#page {
  margin: 0 20px;
  z-index: 0;
    overflow-y: hidden;
}
/*#top-view {
  width: 37%;

}*/
#maincontents {
  /*float: left;*/
  width:95%;
  position:absolute;
  margin-bottom:50px;
  /*padding: 0px 0px;
  margin:0px 0px;*/
  /*background-color: white;*/

}

#top {
  text-align:center;
  float:left;

  -moz-animation: test 0.5s ease-out 2s forwards;
  -webkit-animation: test 0.5s ease-out 2s forwards;
  -o-animation: test 0.5s ease-out 2s forwards;
  animation: test 0.5s ease-out 2s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*position: absolute;
  /*z-index: -10;*/
}
@-webkit-keyframes test {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -10;
  }
}
#top ul {
  padding-left: 10px;
}
#title {
  float: right;
  color: white;
}
.university {
  font-size: 20px;
  padding-top: 0px;
  margin-top: -10px;
}
.title {
  font-size: 35px;
  margin
}
.classification {
  font-size: 10px;
}
.contents {
  color:white;
}
.cont li {
float: left;
text-align: center;
/*width: 150px;*/
list-style-type: none;
margin: 10px;
/*padding-top: 10px;
padding-bottom: 100px;*/
background-color: rgb(240, 240, 240);
color: black;
}
.contents ul img {
    position: absolute;
}
}
.news p{
  position: sticky;
}
.contents-title {
  text-align: center;
}
.main {
  height:250px;
}
.news {
  height: 535px;
  width:400px;
}
.member {
  width: 400px;
  height: 250px;
}
.introduction {
  width: 400px;
  height: 250px;
}
.message {
  width:400px;
  height: 250px;
}
.access {
  width: 400px;
  height: 250px;
  margin: 0 -50px;
  padding: 0 50px;
}
.access p {
  margin:0px;
}
.test {
  position: absolute;
  opacity: 0;
  display: flex;
  transition: 0.6s;
  z-index: -20;
}
#page:hover .test {
  opacity: 1;
  transition: all 0.6s ease;
  z-index: -20;
}

.test1 {
  position: absolute;
  opacity: 0;
  display: flex;
  transition: 0.6s;
  z-index: -20;
}
.test1t:hover .test1 {
  opacity: 1;
  transition: all 0.6s ease;
  z-index: 20;
}

.news1 {
  font-size: 13px;
  margin: 20px 40px;
}

.gradually {
  /*display: none;*/
  -webkit-animation:fadein 4s  linear 0s 1;

}

@-webkit-keyframes fadein {
  0%{
    opacity:0;
  }
  60%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

header {
  height: 50px;
  width: 100%;
  margin: auto;
  font-size:15px;
}
.links {
  float: none;
  background-color: rgba(200, 200, 200, 0.5);
}
.last-list {
  border-right: solid 2px rgb(130,130,130) ;
}
.links li {
  float: left;
  width: 23%;
  border-left: solid 2px rgb(130,130,130) ;
  text-align: center;
  color: rgb(100,100,100) ;
}
.links li:hover {
  background-color: rgba(250,250,250,0.5);
}

.li {
  float: none;
  background-color: rgba(250, 250, 220, 0.5);
}
.last-list {
  border-right: solid 2px rgb(130,130,130) ;
}
.li li {
  float: left;
  width: 23%;
  border-left: solid 2px rgb(130,130,130) ;
  text-align: center;
  color: rgb(100,100,100) ;
}
.li li:hover {
  background-color: rgba(250,250,250,0.5);
}
.l {
  width:600px;
  text-align:center;

}