/* BG */
body{
  /* background-image:url("../img/full_image_2.jpg"); */
  object-fit:cover;
  /* background-attachment: fixed; */
  background-position:center 60px;
  /* background-size:100%; */
  background-size: cover;
  background-repeat:no-repeat;
  z-index:1;
}

body > .content-top,
body > .content-main,
body > .greet,
body > .works,
body > .contents{
  margin-bottom:50px;
}

*{
  font-size:16px;
}


/* Top */
.content-top{
  position:relative;
  width:100%;
  height:400px;
  /* background-image:url("../img/full_image_2.jpg"); */
  object-fit:cover;
  background-position:top center;
  background-size:100%;
  background-repeat:no-repeat;
}
.content-top video{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
}
.top-message{
  margin:0;
  color:white;
  /* background-color:rgba(255,255,255,0.3); */
  text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}


@media screen and (max-width: 500px){
  /* .content-top{
    height:400px;
  } */
  .top-message{
    padding:10px 0;
    width:90%;
    margin : 0 auto;
  }
  .message{
    width:90%;
    margin:10px auto;
  }
  .message{
    white-space:pre-wrap;
    width:90%;
    margin:10px auto;
  }
}
@media screen and (min-width: 501px){
  /* .content-top{
    height:300px;
  } */
  .top-message{
    padding:40px 80px;
    width:auto;
  }
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}
@media screen and (min-width: 768px){
  /* .content-top{
    height:300px;
  } */
  .top-message{
    padding:40px 80px;
    width:auto;
  }
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}
@media screen and (min-width: 1000px){
  /* .content-top{
    height:300px;
  } */
  .top-message{
    padding:40px 80px;
    width:auto;
  }
  .message{
    white-space:pre-wrap;
    margin:20px 80px;
  }
}


/* Message */

.top-message{
  /* position:absolute;
  top:80px; */

  white-space:pre-wrap;
  /* margin:40px;
  word-break:break-word; */
  
  animation-name: anim-message-up;
  animation-timing-function: linear;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  /* animation: anim-message-up 1s ease-in linear; */

  font-size:18px;
}
@keyframes anim-message-up{
  0%{
    opacity:0;
    transform:translateY(100px);
  }
  30%{
    opacity:0;
    transform:translateY(100px);
  }
  100%{
    opacity:1;
    transform:translateY(0px);
  }
}



/* Contents */
.greet,
.works{
  text-align:center;
}
.greet .message{
  max-width:600px;
  text-align:left;
  margin:0 auto;
}

.person{
  width:150px;
  height:150px;
  border-radius:50%;
  border:1px solid #666;
  display:block;
  margin:8px auto;
}
.person-label{
  text-align:center;
  margin-bottom:20px;
}

.works *{
  word-break:break-all;
}


form input::placeholder,
form textarea::placeholder{
  font-size:0.8rem;
  color:#aaa;
  font-weight:normal;
  
}