@charset "UTF-8";

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  
}
body{
  background-image: url(../images/wallpaper-pc2.jpg);
  background-size: cover;
  background-position: center;
}
ul{
list-style-type: none;
}

/* index */
.index h1{
  width: 60%;
  height: calc(100vh - (15px + 2vh));
  margin: auto;
  padding: 0vw 0;
  text-align: center;
  display: grid;
  place-items: center;
}
.index h1 a {
  width: 100%;
  height: auto;
  margin: auto 0;
}
footer{
  font-size: 15px;
  text-align: center;
  margin-bottom: 2vh;
}
.contents h1 {
  width: 20%;
  margin: 4vh auto 4vh;
  text-align: center;
}
.contents ul{
    width: 50%;
  /* margin: 10vh auto 13vh; */
  text-align: center;
}
.contents ul li,
.index a{
  transition: 0.8s;
  margin-bottom: 7vh;
}
.contents ul li:hover,
.index a:hover {
  scale: 1.1;
}
.contents ul li img {
margin-top: 30px;
  max-width: 60%;
}  
.contents .wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  align-items: center;
}

@media screen and (max-width:800px) {
  .contents h1{
    width: 50%;
  }
  .contents ul {
    width: 100%;
  }
  .contents ul li img {
  max-width: 100%;
  width: 90vw;
}  
}