@charset "utf-8";
/* CSS Document */
.main-about{
  background-image: url("../images/about-pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#About {
  position: relative;
  padding:20rem 0 10rem;
}
.about_text {
  font-size: 42vw;
  font-family: Century;
  font-weight: 400;
  color: #d7d7d7;
  opacity: 0.2;
  letter-spacing: 0.3rem;
  left: 20px;
  top: 20rem;
  position: fixed;
}

.btn_jp{
  font-size: 2.5rem;
  font-weight:600;
  position: absolute;
  right: 7rem;
  text-decoration: none;
  color: aliceblue;
  padding-top: 7rem;
  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: 7rem;
  z-index: 10;
  display:flex;
}
.about_box{
  opacity: 0;
  padding: 8rem 8rem 8rem 10rem;
  margin-left:10rem;
  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:534px){
  .main-about{
  background-image: url("../images/about-mb.jpg");
}
  .about_text{
    font-size: 20rem;
    left:-10px;
  }
  .about_box{
    margin:0 40px 0 0;
   padding: 8rem 2rem 8rem 6rem;
  }
}

.fadeIn {
  transform : translate(0, 10px);
     transition : 2s;
     opacity: 0;
}
.fadeIn.animated {
  transform : translate(0, 0);
  opacity: 1;
}