@charset "utf-8";
.loading_base {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0e0e0e;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no_scroll {
  height: 100vh !important;
  overflow: hidden;
}
.loading_logo {
  width: 300px;
  position: relative;
}
.loading_logo img {
  width: 100%;
  height: auto;
}
.hero_section {
  height: 880px;
  background: url("../images/hero_bg_pc.jpg") no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
}
.corporate_hdr {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 60px;
  z-index: 1000;
}
.corporate_hdr img {
  width: 100%;
  height: auto;
}
.hero_header {
  position: absolute;
  left: 0;
  width: 100%;
  top: 30px;
  height: 78px;
}
.header_logo {
  margin: 0 auto;
  width: 305px;
}
.hero_main {
  margin: 0 auto;
  width: 955px;
  height: 850px;
  transform: translateX(90px);
  position: relative;
}
.hero_main img {
  width: 100%;
  height: auto;
}
.hero_main div {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100%;
}
.hero_main .hero_catch1 {
  width: 174px;
  left: -290px;
  top: 85px;
}
.hero_date {
  background: #b60130;
  padding: 20px 20px 35px;
  color: #fff;
}
.hero_date img {
  width: 100%;
  height: auto;
}
.hero_date_inner {
  max-width: 1110px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
	cursor: pointer;
	transition: opacity 0.3s;
}

@media (hover: hover) {
.hero_date_inner:hover {
  opacity: 0.6;
}
}

.hero_date_catch {
  width: 155px;
}
.hero_date_caption {
  width: 942px;
}
.hero_date_inner .hero_date_btn {
  position: absolute;
  width: 145px;
  right: -156px;
  top: 20px;
}
.hero_date_btn img {
  width: 100%;
  border-radius: 50%;
}
@media(max-width: 1600px) {
  .hero_section {
    height: 610px;
  }
  .hero_header {
    top: 20px;
    height: 50px;
  }
  .header_logo {
    width: 210px;
  }
  .hero_main {
    width: 650px;
    height: 590px;
    transform: translateX(40px);
  }
  .hero_main img {
    width: 100%;
    height: auto;
  }
  .hero_main div {
    position: absolute;
    left: 0;
    top: 32px;
    width: 100%;
  }
  .hero_main .hero_catch1 {
    width: 117px;
    left: -195px;
    top: 85px;
  }
  .hero_date_inner {
    max-width: 750px;
  }
  .hero_date {
    padding: 10px 20px 25px;
    overflow: hidden;
  }
  .hero_date_catch {
    width: 100px;
  }
  .hero_date_caption {
    width: 640px;
  }
  .hero_date_inner .hero_date_btn {
    width: 100px;
    right: -110px;
    top: 20px;
  }
}
@media(max-width: 1060px) {
  .hero_main .hero_catch1 {
    left: -150px;
  }
}
@media(max-width: 960px) {
  .corporate_hdr {
    width: 40px;
    top: 15px;
    left: 15px;
  }
  .hero_section {
    height: 108vw;
    background: url("../images/hero_bg_sp.jpg") no-repeat center top;
    background-size: 100%;
  }
  .hero_header {
    top: 10px;
  }
  .header_logo {
    width: 40vw;
  }
  .hero_main {
    width: 100%;
    height: inherit;
    transform: translateX(0);
  }
  .hero_main .hero_copyright, .hero_main .hero_product, .hero_main .hero_catch2, .hero_main .hero_ultraman {
    top: inherit;
    bottom: 0;
  }
  .hero_main .hero_catch1 {
    width: 21.5vw;
    left: 15px;
    top: 14vw;
  }
  .hero_date {
    padding: 10px 0 25px;
  }
  .hero_date_inner {
    display: block;
    width: 100%;
    max-width: inherit;
  }
  .hero_date_caption {
    width: 100%;
    position: relative;
    z-index: 5;
  }
  .hero_date_inner .hero_date_catch {
    width: 23vw;
    position: absolute;
    z-index: 1;
    top: 4vw;
    left: 2vw;
  }
  .hero_date_inner .hero_date_btn {
    width: 62vw;
    position: static;
    right: inherit;
    top: inherit;
    margin: 6vw auto 0;
  }
  .hero_date_btn img {
    border-radius: 0;
  }
}
@media(max-width: 767px) {
  .loading_logo {
    width: 200px;
  }
}