@charset "utf-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}
body {
  color: #222222;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
  letter-spacing: 0.15rem;
}
* {
  box-sizing: border-box;
}
.main{
  transition: .8s;
}

.header-fixed{
  top: 30px;
}
.main-logo{
  position: fixed;
  z-index: 2000;
  top: 30px;
  left: 30px;
  transition: .4s;
}
.main-logo img{
 width: 30px;
}
.main-logo:hover{
  opacity: 0.8;
}
.x-logo{
  display: none;
}
.nav-header{
  display: flex;
  flex-direction: row-reverse;
  position: fixed;
  z-index: 1000;
  top: 30px;
  right: 30px;
}
.nav-open{
  cursor: pointer;
  font-size: 1.6rem;
  transition: .6s;
}
.nav-open:hover{
  opacity: 0.8;
}
.nav-open.active{
  opacity: 0;
}
.nav-head-works, .nav-head-about, .nav-head-others{
  position: fixed;
  right: 80px;
  z-index: -100;
  padding-right: 10px;
}
.nav-head-about, .nav-head-others{
  z-index: -200;
}
.nav-head-works a, .nav-head-about a, .nav-head-others a{
  font-size: 1.6rem;
  text-decoration: none;
  color: #FC3C00;
}
.nav-head-works p, .nav-head-about p, .nav-head-others p{
  font-size: 1.0rem;
  line-height: 1.2rem;
  text-align: left;
  color: #A0A0A0;
}
.nav-head-works,.nav-head-about, .nav-head-others{
  opacity: 0;
  transition: .4s;
}
.nav-head-works.nav-head-active, .nav-head-about.nav-head-active, .nav-head-others.nav-head-active{
  opacity: 1;
  z-index: 1000;
}


.nav-close{
  cursor: pointer;
  position: fixed;
  z-index: 1000;
  top: 30px;
  right: 30px;
  color: #FFF;
  font-size: 1.6rem;
  font-weight: 400;
  transition: .4s;
}
.nav-close:hover{
  opacity: 0.8;
}
.nav-menu{
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: -1;
  transition: .6s;
  opacity: 0;
}
.nav-menu.active{
  opacity: 1;
  z-index: 1000;
}
.nav-menu ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav-menu ul li{
  padding: 20px 0;
  margin: 10px 0;
}
.nav-menu ul li a{
  text-decoration: none;
  font-size: 1.8rem;
  color: #FFF;
}
.nav-menu a img{
  position: absolute;
  width: 30px;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.nav-wide{
  display: none;
}
@media(min-width: 1200px){
  .nav-open, .nav-head-works,.nav-head-about, .nav-head-others{
      display: none;
  }
  .main-logo{
      position: fixed;
      z-index: 2000;
      top: 60px;
      left: 7vw;
      transform: translateX(-50%);
  }
  .main-logo img{
     width: 40px;
  }
  .x-logo{
      display: block;
      position: absolute;
      z-index: 2000;
      top: 60px;
      right: 7vw;
      transform: translateX(50%);
      transition: .4s;
  }
  .x-logo img{
     width: 35px;
  }
  .x-logo:hover{
      opacity: 0.8;
  }

  .nav-wide{
      display: block;
      position: fixed;
      top: 50%;
      left: 7vw;
      transform: translate(-50%,-50%);
      text-align: left;
      z-index: 1000;
  }
  .nav-wide-item{
      list-style: none;
      padding: 30px 0;
      position: relative;
  }
  .nav-wide-item p{
      cursor: default;
      opacity: 0;
      position: absolute;
      bottom: 10px;
      color: #A0A0A0;
      font-size: 12px;
      font-family: "Noto Sans JP", sans-serif;
      transition: .4s;
  }
  .nav-wide-item a{
      font-size: 1.6rem;
      color: #222222;
      font-weight: 500;
      text-decoration: none;
      transition: .4s;
  }
  .nav-wide-item a:hover{
    opacity: 0.6;
  }
  .nav-works.nav-active a, .nav-about.nav-active a{
      color: #FC3C00;
  }
  .nav-works.nav-active p, .nav-about.nav-active p{
      opacity: 1;
  }
}




.footer{
  background-color: #303030;
  padding: 60px 30px 20px;
  position: relative;
}
.footer-title{
  color: #FFF;
  display: flex;
  padding-bottom: 40px;
}
.footer-title a{
  width: 30px;
  transition: .4s;
}
.footer-title a img{
  width: 100%
}
.footer-title a:hover{
  opacity: 0.7;
}
.footer-title p{
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  padding-top: 8px;
  padding-left: 20px;
}
.footer-arrow{
  cursor: default;
  position: absolute;
  top: 60px;
  right: 30px;
  text-decoration: none;
  color: #FFF;
  line-height: 3.0rem;
  font-size: 5.0rem;
  font-weight: 300;
  transition: .4s;
}
.footer-arrow:hover{
  top: 55px;
}
.footer small{
  font-size: 1.0rem;
  color: #a5a5a5
}
@media(min-width: 760px){
  .footer{
      padding: 80px 0 0;
      height: 200px;
  }
  .footer-title a{
      position: absolute;
      left: 7vw;
      transform: translateX(-50%);
      width: 40px;
  }
  .footer-title a img{
      width: 40px;
  }
  .footer-title p{
      font-size: 1.4rem;
      padding-left: 10vw;
  }
  .footer-arrow{
      top: 80px;
      font-size: 6.0rem;
      right: 7vw;
      transform: translateX(50%);
  }
  .footer-arrow:hover{
      top: 70px;
  }
  .footer small{
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      font-size: 1.2rem;
  }
}

.fadeIn{
  opacity: 0;
  transition: .8s;
  transform: translateY(40px);
}
.fadeIn.active{
  opacity: 1;
  transform: translateY(0);
}