@charset "UTF-8";




/*------------------------------------*\
    COMMON
\*------------------------------------*/

html, body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  color: #212121;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  margin: 0;
}
@media only screen and (max-width: 1024px) {
  html, body{
    font-size: 80%;
  }
}
@media only screen and (max-width: 900px) {
  html, body{
    font-size: 75%;
  }
}
@media only screen and (max-width: 500px) {
  html, body{
    font-size: 62.5%;
  }
}

.pc { display: block; }
.sp { display: none; }
@media only screen and (max-width: 1024px) {
  .pc { display: none; }
  .sp { display: block; }
}

a {
  color:#212121;
}



/*------------------------------------*\
    teaser
\*------------------------------------*/


#teaser {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #212121;
}
#teaser .teaser_wrapper {
  height: 100%;
}
@media only screen and (max-width:1024px) {
}



#teaser .teaser_facade_wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
#teaser .teaser_facade_background_img_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#teaser .teaser_facade_background_img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  transition: all 3000ms ease-in-out;
  opacity: 0;
}
#teaser .teaser_facade_background_img_1 {
  background-image: url('./img/otm_top_1.jpg');
}
#teaser .teaser_facade_background_img_2 {
  background-image: url('./img/otm_top_2.jpg');
}
#teaser .teaser_facade_background_img_3 {
  background-image: url('./img/otm_top_3.jpg');
}
@media only screen and (max-width:1024px) {
  #teaser .teaser_facade_background_img_1 {
    background-image: url('./img/otm_top_1_sp.jpg');
  }
  #teaser .teaser_facade_background_img_2 {
    background-image: url('./img/otm_top_2_sp.jpg');
  }
  #teaser .teaser_facade_background_img_3 {
    background-image: url('./img/otm_top_3_sp.jpg');
  }
}


#teaser .teaser_logo {
  width: 178px;
  height: 178px;
  position: absolute;
  top: 47%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  transition: all 1500ms ease-in-out;
  opacity: 0;
}
#teaser .teaser_web_soon {
  width: 139px;
  height: 13px;
  position: absolute;
  top: calc(47% + 149px);
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  transition: all 1500ms ease-in-out;
  opacity: 0;
}
@media only screen and (max-width:1024px) {
  #teaser .teaser_logo {
    width: 15.5rem;
    height: 15.5rem;
  }
  #teaser .teaser_web_soon {
    width: 13.9rem;
    height: 1.3rem;
    top: calc(47% + 11rem);
  }
}


#teaser .teaser_address {
  width: 255px;
  height: 16px;
  position: absolute;
  bottom: 2vw;
  right: 5%;
  bottom: calc(3vh + 35px);
  right: 2.5vw;
  transition: all 1500ms ease-in-out;
  opacity: 0;
}
#teaser .teaser_mail {
  width: 106px;
  height: 18px;
  position: absolute;
  bottom: 3vh;
  right: 3vh;
  right: 2.5vw;
  transition: all 1500ms ease-in-out;
  opacity: 0;
}
@media only screen and (max-width:1024px) {
  #teaser .teaser_address {
    width: 20.6rem;
    height: 1.3rem;
    bottom: calc(3.6rem + 2.3rem);
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,0);
  }
  #teaser .teaser_mail {
    width: 8.1rem;
    height: 1.3rem;
    bottom: 3.6rem;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,0);
  }
}