@charset "utf-8";
/* CSS Document */
#video{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    /*高さを全画面にあわせる*/
} 

.video-wrap{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:10rem;
    bottom:0;
    overflow: hidden;
}
.video-wrap-sp{
  display: none;
}
video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    min-height: 100%;
    min-width: 100%;
}

@media only screen and (max-width:534px){
.video-wrap{
    top: 6rem;
    left:0;
    right:0;
    bottom:0;
    overflow: hidden;
}
}
#top{
  position: relative;
  height: 1000px;
  width: 100%;
}
.top_h1{
  font-size: 10rem;
  font-weight: bold;
  font-family:Arial, Helvetica, "sans-serif";
  letter-spacing: 0.3rem;
  color:aliceblue;
  padding-top: 5rem;
  padding-right: 5rem;
  text-align: right; 
  }
.top_h2{
  font-size: 4em;
  font-family:Arial, Helvetica, "sans-serif";
  letter-spacing: 0.3rem;
  color:aliceblue;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  position: absolute;
  white-space: nowrap;
  right:3rem;
  top:11rem;
}
.top-nav_menu{
  display: none;
}
@media only screen and (max-width:534px){
  #top{
  position: relative;
}
 .top_h1{
  padding-top:10rem;
  font-size: 6rem;
  }
  .top_h2{
  font-size: 3rem;
  top: 17rem;
}
  .top-nav_menu{
  display:block;
  position: absolute;
  bottom: 0;
  left: 3rem;
  text-align: left;
  list-style: none;
}
 .top-nav_menu a{
  font-family: Century;
  font-size: 5rem;
  text-decoration: none;
  color: #d7d7d7;
  opacity: 0.5;
}
 .top-nav_menu a:hover{
  opacity: 0.9;
}
   .top-nav_menu li{
  padding-top: 4rem;
}
}
#About {
  position: relative;
  padding-top:50rem;
}
.about_text {
  font-family: Century;
  font-size: 20rem;
  color: #d7d7d7;
  opacity: 0.5;
  position: absolute;
  padding-left:13%;
  padding-top:20%;
}

.btn_jp{
  font-size: 2.5rem;
  font-weight:600;
  position: absolute;
  right: 7rem;
  text-decoration: none;
  color: aliceblue;
  padding-top: 5rem;
  z-index: 10;
  display:flex;
}
.btn_en{
  font-size: 2.5rem;
  font-weight:600;
  position: absolute;
  right: 1rem;
  text-decoration: none;
  color: aliceblue;
  padding-top: 5rem;
  z-index: 10;
  display:flex;
}
.about_box{
  opacity: 0;
  padding: 8rem 8rem 8rem 10rem;
  margin-left:60rem;
  margin-bottom: 30rem;
  text-align: left;
  font-size: 3rem;
  line-height: 1.5;
  color: aliceblue;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.15);
  border-radius: 20px 0 0 20px;
  z-index: 5;
}
.about_text_area h2{
  font-size: 5rem;
  line-height: 2;
}
.about_text_area h3 {
  font-size: 3rem;
  line-height: 2;
}
.about_text_area p{
  font-size: 2.3rem;
}
.animated {
  opacity: 1;
}
.show{
  display:flex;
}
@media(max-width:820px){
  .about_text{
    font-size: 17rem;
    margin:0 10px;
  }
  .about_box{
    margin:0 0 0 110px;
  }
}
@media(max-width:534px){
  #About{
  display:none;
}
  .about_text{
    font-size: 13rem;
    margin: 0 0 0 10px;
  }
  .about_box{
    margin:0 0 0 90px;
   padding: 8rem 2rem 8rem 6rem;
  }
}
#Works {
  padding-top: 15rem;
  margin-bottom: 20rem;
}
.work_text {
  font-family: Century;
  font-size: 20rem;
  color: #d7d7d7;
  opacity: 0.5;
  margin-left: 30%;
  margin-bottom: 2rem;
}

.zoomOutText{
  position: relative;
  display: inline-block;
  opacity:0;
}
.animated {
  opacity: 1;
}
.zoomOutText img{
  position: relative;
  margin: 6rem;
  width: 20rem;
  height: 20rem;
  border-radius: 10px;
}


.zoomOutText span.mask{
  position: relative;
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block;/*画像をくくるspanタグをブロック要素にする*/
  overflow:hidden;/*拡大してはみ出る要素を隠す*/
}

.zoomOutText:hover span.mask::before{/*hoverした時の変化*/
  content:"";
  position: absolute;
  z-index:2;
  margin:6rem;
  width: 20rem;
  height: 20rem;
  border-radius: 10px;
  background:rgba(0,0,0,0.5);
}


.zoomOutText:hover img{/*hoverした時の変化*/
  transform: scale(1);/*縮小の値を変更したい場合はこの数値を変更*/
  filter: blur(1px);/*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomOutText span.cap{
  opacity:0;
  transition: .7s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index:3;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 3rem;
  color: #d7d7d7;
  line-height: 1.5;
}

.zoomOutText:hover span.cap{/*hoverした時の変化*/
  opacity:1;
}
@media(max-width:750px){
  #Works {
  padding-top: 30rem;
  margin-bottom: 50rem;
}
  .work_text{
    font-size: 17rem;
    margin:0;
  }
  .zoomOutText{
    margin-left: 10rem;
  }
}
@media(max-width:534px){
  #Works{
  display: none;
}
  .work_text{
    font-size: 13rem;
    margin: 0 0 0 10px;
  }
}
#Contact {
  padding-top: 40rem;
  margin-bottom: 100rem;
}
.Contact_text {
  margin-right: 10%;
  margin-bottom: 3%;
  font-family: Century;
  font-size: 20rem;
  color: #d7d7d7;
  opacity: 0.5;
  animation-name: fade;
  animation-duration: 20s;
}
/*
.mail-address {
  opacity: 0;
  font-size: 5rem;
  color:#d7d7d7;
  margin-left:20%;
}*/
.Contact img{
  margin-left:20%;
}
.fadeIn {
    opacity: 0;
    transform : translate(0, 10px);
    transition : 2s;
}
.fadeIn.animated {
    transform : translate(0, 0);
    opacity: 1;
}
@media(max-width:820px){
  #Contact {
  padding-top: 50rem;
  margin-bottom: 150rem;
}
}
@media(max-width:750px){
  
  .Contact_text{
    font-size: 15rem;
    padding-left: 10rem;
  }
  .mail-address{
    font-size: 4rem;
  }
}
@media screen and (max-width:534px){
  #Contact{
  display:none;
}
  .Contact_text{
    font-size: 13rem;
  }
  .mail-address{
    font-size: 3.5rem;
  }
  .Contact img{
    width: 80%;
    margin: 0;
  }
}