@charset UTF-8;
html {
    overflow-y:scroll;
}

body{
    width: 100%;
    background-color: #ffffff;
}

.sitelogo{
    position: relative;
    top: 30px;
    display: block;
    margin: auto;
    width: 8%;
}

.nav{
    margin: 100px 10%;
}
.nav li{
    display: inline;
    width: 100%;
    list-style: none;
    margin: 0 150px;
}

.nav li img{
   width: 10%;

}

/*WORKSの CSS*/
.container li{
    list-style: none;
}
.container{
    width: 90%;
    margin: 5% 11% 0% 10%;
}
.container{
    display: grid;
    grid-template-columns: 21% 21% 23% 25%;
    grid-template-rows: 40% 40% 40%;
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
        transform: translateY(40px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
/*WORKSの CSS*/

/*ProfileのCSS*/
.profileIMG{
    display: block;
    margin: 6% auto;
    width: 15%;
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
      @keyframes fadeInAnime{
      from {
        opacity: 0;
        transform: translateY(10px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .profile{
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
      @keyframes fadeInAnime{
      from {
        opacity: 0;
        transform: translateY(10px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
h1{
    text-align: center;
}
.greeting{
    text-align: center;
}
/*ProfileのCSS*/

/*contactのCSS*/
.contactP{
    text-align: center;
    margin: 10%;
    animation-name:fadeInAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
        transform: translateY(10px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
/*contactのCSS*/

/*詳細画面のCSS*/
.title li{
    display:inline-block;
    text-decoration: none;
    margin-top: 18%;
}
.work-name{
    font-size: 25pt;
}
.date{
    font-size: 13pt;
}
.explain{
    display: flex;
     width: 90%;
     line-height: 200%;
    position: relative;
    left: 3.5%;
    right: 80%;
}

.mainIMG{
    position: absolute;
    bottom: -168%;
left: 50%; 
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}
.mainIMG2{
  position: absolute;
  width: 23%;
  bottom: -210%;
left: 60%; 
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {
  opacity: 0;
  transform: translateY(10px);
}

to {
  opacity: 1;
  transform: translateY(0);
}
}

.mainIMG3{
  position: absolute;
  bottom: 10%;
left: 60%; 
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
from {
  opacity: 0;
  transform: translateY(10px);
}

to {
  opacity: 1;
  transform: translateY(0);
}
}

.subIMG{
    display: block;
    margin: 24% auto;
    
}

.back{
  display: block;
  margin: 0 auto;
}
/*詳細画面のCSS*/

.footer li{
    list-style: none;
    display: inline;
    margin: 10% 2%;
}
.footer{
    text-align: center;
    margin-top: 55%;
}

/*スマホ用CSS*/
@media screen and (max-width:480px) {
 /*　画面サイズが480px以下の場合ここの記述が適用される　*/
 /*navのCSS*/
 .nav {
  display: block;
  margin: 50px 25px;
}
 .nav li {
  display: inline;
  width: 100%;
  margin: 20px;
}

.nav li img{
  width:15%
}

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 20% 20% 20% 20% 20% 20%;
  width: 75%;
  animation-name: fadeInAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.container li img{
  width: 100px;
  list-style: none;
}
.footer {
  text-align: center;
  margin: 110% 31% 0px 27%;
}
}