@charset "UTF-8";

body {
    background-color: #CCEAFB;
    text-align: center;
   
}

main {
  margin-bottom: 100px;
}

.container {
    width: 1000px;
    height: 800px;
    background-image: url(images/top/apart.png);
    background-repeat: no-repeat;
    background-size: 1000px;
    margin: 0 auto;
    /* widthで家（箱）の大きさ決めてその中に要素を配置 */
    
}

.container::before{
    width: 1000px;
    height: 500px;
    text-align: center;
    margin: 0 auto;
    background-image: url(images/top/steel.png);
    background-size: 950px;
    background-repeat: no-repeat;
    z-index: 100;
    position: absolute;
    top: 400px;
    right: 0;
    bottom: 0;
    left: 70px;
    content: ' ';
}

.nav {
    
    text-align: center;
    
    padding-top: 235px;
    display: flex;
    justify-content: space-evenly;
}


.nav-works {
    width: 125px;
    height: 180px;
    margin-right: 15px;
    margin-top: 45px;
}

.worksimg {
        width: 125px;
        height: 180px;
}

 .nav-web {
    width: 125px;
    height: 180px;
    padding-left: 225px;
    margin-top: 45px; 
}

.webimg {
    width: 125px;
    height: 180px;
}

.nav-contact {
    width: 170px;
    height: 200px;
    padding-left: 125px;
   padding-top: 15px;
}

.calling {
    width: 180px;
    height: 220px;
}

.contactiner {
    display: block;
}

.contacta span {
    position: absolute;
    box-sizing: border-box;
    display: block;
    text-align: center;
    background-image: url(images/top/phon.png);
    background-repeat: no-repeat;
    background-size: 190px;
}

.calling {
    visibility: hidden;
}

.contacta span:hover {
background-image: none;
background-image: url(images/top/coll.png);

 animation: poyon 1.2s infinite;
  }
  
  @keyframes poyon {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
    15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
    30%  { transform: scale(1.0, 0.9) translate(0%, 10%); }
    50%  { transform: scale(0.9, 1.0) translate(0%, -10%); }
    70%  { transform: scale(1.0, 0.9) translate(0%, 5%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }

  .nav-profile {
    margin-top: 320px;
    z-index: 101;
    width: 160px;
    height: 265px;
    background: url(images/top/sprite.png) no-repeat;
    animation: parapara 2s steps(2) infinite;
  }

    @keyframes parapara {
    to {
      background-position: -320px 0;
    }
  }
  .profilea {
    width: 160px;
    height: 265px;
    display: inline-block;
  }

  .nav-profile:hover {
    background-image: none;
    animation: none;
    background-image: url(images/top/eyecontact.png);
    
  }

  profile {
    margin-top: 50px;
  }
  
  .pcontainer {
    border-radius: 10px;
    background-color: #FFFFFF;
    width: 800px;
    height: 300px;
    margin: 0 auto;
    padding-top: 20px;
  }
  
  .pcontainer h2 {
    font-size: 2rem;
  }
  
  .pcontainer p {
    width: 500px;
    margin: 0 auto;
    font-size: 1.2rem;
  }
  


footer p {
margin-bottom: 0%;
}