/* Scss Document */
body {
  overflow: hidden;
  position: relative;
  overflow-y: scroll;
}
body.loaded {
  overflow: auto;
  overflow-y: scroll;
}

#loadmask {
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
}
#loadmask.toppage {
  transition: 0.6s cubic-bezier(0.65, 0.08, 0.34, 0.92);
}
@media (min-width: 768px) {
  #loadmask.toppage {
    background-size: 91px;
  }
}
.loaded #loadmask.toppage {
  transform: translate3d(100%, 0, 0);
}
.maskout #loadmask.toppage {
  transition: none;
  transform: none;
  display: none;
}

#loadmask_logo {
  content: "";
  display: block;
  background: url("../images/toppage/loading.png") no-repeat center center;
  background-size: 45px;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 150px;
  margin: -75px 0 0 -50px;
  z-index: 99999;
}
@media (min-width: 768px) {
  #loadmask_logo {
    background-size: 91px;
  }
}
.en #loadmask_logo {
  background-image: url("../images/toppage/loading_en.png");
}
.cn #loadmask_logo {
  background-image: url("../images/toppage/loading_cn.png");
}

#keyvisual {
  position: relative;
  height: 500px;
  max-height: calc(100vh - 100px);
  overflow: hidden;
}
@media (min-width: 768px) {
  #keyvisual {
    height: 700px;
    max-height: 700px;
  }
}
#keyvisual img {
  width: 100%;
  max-width: 10000px;
}
#keyvisual .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1140px;
  max-width: 80%;
}
@media (min-width: 768px) {
  #keyvisual .text {
    top: 46%;
  }
}
#keyvisual .text p {
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  margin: 35px 0 0;
  letter-spacing: 0.2em;
}
@media (min-width: 768px) {
  #keyvisual .text p {
    font-size: 24px;
    margin: 70px 0 0;
  }
}
#keyvisual .text .catchcopy {
  position: relative;
  border-left: 3px solid #fff;
  width: 250px;
}
@media (min-width: 768px) {
  #keyvisual .text .catchcopy {
    width: 500px;
  }
}
#keyvisual .text .catchcopy .txt {
  position: absolute;
}
#keyvisual .text .catchcopy ._txt1 {
  width: 10%;
}
#keyvisual .text .catchcopy ._txt2 {
  width: 80%;
}
#keyvisual .text .catchcopy ._txt2 .mask {
  transition: width 0.5s;
  opacity: 1;
  overflow: hidden;
  width: 100%;
}
#keyvisual .text .catchcopy ._txt2 .mask.hide {
  width: 0px;
  opacity: 0;
  transition: all 0.3s;
}
#keyvisual .text .catchcopy ._txt2 img {
  width: 200px;
}
@media (min-width: 768px) {
  #keyvisual .text .catchcopy ._txt2 img {
    width: 400px;
  }
}
#keyvisual .text #kv_text1-1 {
  top: 1%;
  left: 6%;
}
#keyvisual .text #kv_text1-2 {
  top: 1%;
  left: 18%;
}
#keyvisual .text #kv_text2-1 {
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
}
#keyvisual .text #kv_text2-2 {
  top: 50%;
  left: 18%;
  transform: translateY(-50%);
}
#keyvisual .text #kv_text3-1 {
  bottom: 1%;
  left: 6%;
}
#keyvisual .text #kv_text3-2 {
  bottom: 1%;
  left: 18%;
}
#keyvisual .images .child {
  overflow: hidden;
  height: 350px;
}
@media (min-width: 768px) {
  #keyvisual .images .child {
    height: 700px;
  }
}
#keyvisual .images .child .bg {
  width: 100%;
  height: 100%;
  display: block;
  transition: 6s linear;
  transform: scale(1);
}
#keyvisual .images .child#kv1 .bg {
  background: url(../images/toppage/kv1.jpg) no-repeat center center/cover;
}
#keyvisual .images .child#kv2 .bg {
  background: url(../images/toppage/kv2.jpg) no-repeat center center/cover;
}
#keyvisual .images .child#kv3 .bg {
  background: url(../images/toppage/kv3.jpg) no-repeat center center/cover;
}
#keyvisual .images .child#kv4 .bg {
  background: url(../images/toppage/kv4.jpg) no-repeat center center/cover;
}
#keyvisual .images .child#kv5 .bg {
  background: url(../images/toppage/kv5.jpg) no-repeat center center/cover;
}
#keyvisual .images .child.start .bg {
  transform: scale(1.1);
}
#keyvisual .movie {
  width: 100%;
  height: 100%;
}
#keyvisual .movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
@media (max-width: 767px) {
  #keyvisual .movie video {
    width: 101vw;
    height: 153vw;
  }
}

.scroll_effect h2.vertical .main {
  display: block;
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 1s, height 1.5s;
  height: 0;
  white-space: nowrap;
  overflow: hidden;
}
.scroll_effect h2.vertical .sub {
  display: block;
  opacity: 0;
  margin-top: -5px;
  transition: margin 0.3s, height 1s;
  height: 0;
  white-space: nowrap;
  overflow: hidden;
}

.maskout .scroll_effect.inview h2.vertical .main {
  opacity: 1;
  transform: translateY(0);
  height: 200px;
}
.en .maskout .scroll_effect.inview h2.vertical .main {
  height: 110px;
}
@media (max-width: 1099px) {
  .en .maskout .scroll_effect.inview h2.vertical .main {
    height: 90px;
  }
}
.maskout .scroll_effect.inview h2.vertical .sub {
  opacity: 1;
  transform: translateY(0);
  height: 200px;
}

.en .maskout #top_business.scroll_effect.inview h2.vertical .main {
  height: 50px;
}
@media (max-width: 1099px) {
  .en .maskout #top_business.scroll_effect.inview h2.vertical .main {
    height: 30px;
  }
}

#top_business .lead {
  position: relative;
  overflow: hidden;
}
#top_business .lead:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  background: #fff;
  transition: 1s 0.5s;
}
#top_business .more {
  opacity: 0;
  transition: 1s;
}
#top_business .more a {
  opacity: 0;
  transition: 1s 1s;
}
#top_business figure {
  transition: 0.5s;
  opacity: 0;
}
#top_business figure span {
  position: relative;
}
#top_business figure span:first-child:after {
  content: "";
  display: block;
  transition: 1s;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: translateY(0);
  position: absolute;
  top: 0;
  left: 0;
}
#top_business figure span:first-child img {
  display: block;
  transition: 0.7s;
  transform: translateY(20px);
}
#top_business figure span:last-child:after {
  content: "";
  display: block;
  transition: 1s;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: translateY(0);
  position: absolute;
  top: 0;
  left: 0;
}
#top_business figure span:last-child img {
  display: block;
  transition: 0.7s;
  transform: translateY(-20px);
}

.maskout #top_business.inview .lead:after {
  transform: translateY(100%);
}
.maskout #top_business.inview .more {
  opacity: 1;
}
.maskout #top_business.inview .more a {
  opacity: 1;
}
.maskout #top_business.inview figure {
  opacity: 1;
}
.maskout #top_business.inview figure span {
  position: relative;
}
.maskout #top_business.inview figure span:first-child:after {
  transform: translateY(-100%);
}
.maskout #top_business.inview figure span:first-child img {
  transform: translateY(0px);
}
.maskout #top_business.inview figure span:last-child:after {
  transform: translateY(100%);
}
.maskout #top_business.inview figure span:last-child img {
  transform: translateY(0px);
}

#top_message .more {
  opacity: 0;
  transition: 1s;
}
#top_message .more a {
  opacity: 0;
  transition: 1s 1s;
}
#top_message figure {
  transition: 0.5s;
  opacity: 0;
}
#top_message figure span {
  display: block;
  position: relative;
}
#top_message figure span:after {
  content: "";
  display: block;
  transition: 1s;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: translateY(0);
  position: absolute;
  top: 0;
  left: 0;
}
#top_message figure span img {
  display: block;
  transition: 0.7s;
  transform: translateY(20px);
}

.maskout #top_message.inview .more {
  opacity: 1;
}
.maskout #top_message.inview .more a {
  opacity: 1;
}
.maskout #top_message.inview figure {
  opacity: 1;
}
.maskout #top_message.inview figure span {
  position: relative;
}
.maskout #top_message.inview figure span:after {
  transform: translateY(-100%);
}
.maskout #top_message.inview figure span img {
  transform: translateY(0px);
}

#top_mission .more {
  opacity: 0;
  transition: 1s;
}
#top_mission .more a {
  opacity: 0;
  transition: 1s 1s;
}
#top_mission figure {
  transition: 0.5s;
  opacity: 0;
}
#top_mission figure span {
  display: block;
  position: relative;
}
#top_mission figure span:after {
  content: "";
  display: block;
  transition: 1s;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: translateY(0);
  position: absolute;
  top: 0;
  left: 0;
}
#top_mission figure span img {
  display: block;
  transition: 0.7s;
  transform: translateY(-20px);
}

.maskout #top_mission.inview .more {
  opacity: 1;
}
.maskout #top_mission.inview .more a {
  opacity: 1;
}
.maskout #top_mission.inview figure {
  opacity: 1;
}
.maskout #top_mission.inview figure span {
  display: block;
}
.maskout #top_mission.inview figure span:after {
  transform: translateY(100%);
}
.maskout #top_mission.inview figure span img {
  transform: translateY(0px);
}

#mainarea section > *,
#mainarea article > *,
#mainarea > nav {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s;
}

.maskout #mainarea section > *.inview,
.maskout #mainarea article > *.inview,
.maskout #mainarea > nav.inview {
  opacity: 1;
  transform: translateY(0);
}