@charset "UTF-8";
/* 
---------------------------------------------------------
countdown
--------------------------------------------------------- 
*/
.countdown-close {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 10px;
  left: 10px;
}
.countdown-box {
  display: table;
  position: fixed;
  z-index: 9000;
  top: 0px;
  left: 0px;
  width: 100vw;
   height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url(common/images_anm/raster.png);
  /*  */
  opacity: 0;
  transform: translateY(-100px) scale(0, 0);
  transition: all .33s;
}
@media only screen and (max-width: 40em) {
.countdown-box {
   height: 100%;
}
}
.active-count .countdown-box {
  opacity: 1;
  transform: translateY(0px) scale(1, 1);
  transition: all .33s;
}
.countdown-box a {
  text-decoration: none;
  display: table-cell;
  width: 100vw;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

@media only screen and (max-width: 40em) {
.countdown-box a {
   height: 100%;
}
}
.countdown-box a:hover,
 .countdown-box a:active {
  opacity: 1;
  color: #fff;
}
#countdown {
  /*      position: absolute;*/
      /*      top: 50%;*/
      /*      left: 50%;*/
  width: 900px;
  height: 250px;
  margin: auto;/*      margin: -125px 0 0 -450px;*/
}

@media only screen and (max-width: 40em) {
#countdown {
  width: 90%;
  height: auto;
  margin: auto;/*      margin: -125px 0 0 -450px;*/
}
}
.countdown-num {
  font-size: 200px;
  font-weight: 100;
  line-height: 1;
  padding: 0 20px 0 0;
  text-align: right;
}

@media only screen and (max-width: 40em) {
.countdown-num {
  font-size: 80px;
  font-weight: 100;
  line-height: 1;
  padding: 0 0px 0 0;
  text-align: center;
}
}
.countdown-txt {
  font-size: 16px;
  padding: 0 30px 0 0;
  text-align: right;
}

@media only screen and (max-width: 40em) {
.countdown-txt {
  font-size: 16px;
  padding: 0 0px 0 0;
  text-align: center;
}
}
/* 
---------------------------------------------------------
welcome
--------------------------------------------------------- 
*/
.welcome-hero {
  position: relative;
}

@media only screen and (max-width: 40em) {
.welcome-hero {
  padding-top: 55px;
}
}
.welcome-hero> a {
  display: block;
}
.welcome-hero> a:hover {
  opacity: 1;
}
.hero-logo {
  position: absolute;
  z-index: 8000;
  top: 50%;
  left: 50%;
  width: 456px;
  height: 353px;
  margin: -180px 0 0 -228px;
}

@media only screen and (max-width: 40em) {
.hero-logo {
  position: absolute;
  z-index: 8000;
  top: 50%;
  left: 50%;
  width: 230px;
  height: auto;
  margin: -90px 0 0 -115px;
}
}
.welcome-hero .hero-body {
  position: relative;
  width: 100%;
  background-image: url(../images_anm/_blank.gif);
}
.welcome-hero .hero-body:before {
  content: "";
  display: block;
  padding-top: 66.666%;
  background-image: url(../images_anm/raster.png);
  position: relative;
  z-index: 8000;
}

@media only screen and (max-width: 40em) {
.welcome-hero .hero-body:before {
  padding-top: 150%;
}
}
.welcome-hero .item {
  position: absolute;
  box-sizing: border-box;
  width: 8.333%;
  height: 12.5%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: solid 1px #000;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item {
  height: 8.333%;
  width: 12.5%;
}
}
.welcome-hero .helo1 {
  top: 25%;
  left: 8.333%;
  width: 16.666%;
  height: 25%;
  background-image: url(../images/hiro-main1.png);
}

@media only screen and (max-width: 40em) {
.welcome-hero .helo1 {
  top: 16.666%;
  left: 0%;
  width: 37.5%;
  height: 24.999%;
}
}
.welcome-hero .helo2 {
  top: 12.5%;
  left: 74.997%;
  width: 16.666%;
  height: 25%;
  background-image: url(../images/hiro-main2.png);
}

@media only screen and (max-width: 40em) {
.welcome-hero .helo2 {
  top: 8.333%;
  left: 62.5%;
  width: 37.5%;
  height: 24.999%;
}
}
.welcome-hero .helo3 {
  top: 75%;
  left: 33.332%;
  height: 25%;
  width: 16.666%;
  background-image: url(../images/hiro-main3.png);
}

@media only screen and (max-width: 40em) {
.welcome-hero .helo3 {
  top: 58.331%;
  left: 12.5%;
  width: 37.5%;
  height: 24.999%;
}
}
.welcome-hero .item1 {
  top: 0px;
  left: 0px;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item1 {
  height: 16.666%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item2 {
  top: 0px;
  left: 16.666%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item2 {
  top: 0px;
  left: 25%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item3 {
  top: 0px;
  left: 24.999%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item3 {
  top: 0px;
  left: 50%;
  width: 12.5%;
  height: 16.666%;
}
}
.welcome-hero .item4 {
  top: 0px;
  left: 33.332%;
  width: 16.666%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item4 {
  top: 0px;
  left: 62.5%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item5 {
  top: 0px;
  left: 49.998%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item5 {
  top: 0%;
  left: 87.5%;
  width: 12.5%;
  height: 8.333%;
}
}
.welcome-hero .item6 {
  top: 0px;
  left: 58.331%;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item6 {
  top: 8.333%;
  left: 25%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item7 {
  top: 0px;
  left: 74.997%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item7 {
  top: 16.666%;
  left: 37.5%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item8 {
  top: 0px;
  left: 83.333%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item8 {
  top: 33.332%;
  left: 37.5%;
  width: 12.5%;
  height: 8.333%;
}
}
.welcome-hero .item9 {
  top: 0px;
  left: 91.663%;
  width: 8.333%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item9 {
  top: 33.332%;
  left: 50%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item10 {
  top: 12.5%;
  left: 16.666%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item10 {
  top: 33.332%;
  left: 75%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item11 {
  top: 12.5%;
  left: 24.999%;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item11 {
  top: 41.665%;
  left: 0%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item12 {
  top: 12.5%;
  left: 41.665%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item12 {
  top: 41.665%;
  left: 25%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item13 {
  top: 12.5%;
  left: 49.998%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item13 {
  top: 49.998%;
  left: 50%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item14 {
  top: 25%;
  left: 41.665%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item14 {
  top: 41.665%;
  left: 75%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item15 {
  top: 25%;
  left: 66.664%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item15 {
  top: 49.998%;
  left: 75%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item16 {
  top: 25%;
  left: 49.998%;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item16 {
  top: 58.331%;
  left: 0%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item17 {
  top: 25%;
  left: 91.663%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item17 {
  top: 58.331%;
  left: 50%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item18 {
  top: 25%;
  left: 0px;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item18 {
  top: 66.664%;
  left: 75%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item19 {
  top: 37.5%;
  left: 0px;
  width: 8.333%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item19 {
  top: 74.997%;
  left: 0%;
  width: 12.5%;
  height: 8.333%;
}
}
.welcome-hero .item20 {
  top: 37.5%;
  left: 24.999%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item20 {
  top: 74.997%;
  left: 50%;
  width: 12.5%;
  height: 8.333%;
}
}
.welcome-hero .item21 {
  top: 50%;
  left: 8.333%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item21 {
  top: 74.997%;
  left: 62.5%;
  width: 12.5%;
  height: 16.666%;
}
}
.welcome-hero .item22 {
  top: 50%;
  left: 16.666%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item22 {
  top: 74.997%;
  left: 75%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item23 {
  top: 50%;
  left: 24.999%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item23 {
  top: 83.333%;
  left: 0%;
  width: 12.5%;
  height: 16.666%;
}
}
.welcome-hero .item24 {
  top: 37.5%;
  left: 33.332%;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item24 {
  top: 83.333%;
  left: 12.5%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item25 {
  top: 50%;
  left: 49.998%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item25 {
  top: 83.333%;
  left: 37.5%;
  width: 25%;
  height: 16.666%;
}
}
.welcome-hero .item26 {
  top: 50%;
  left: 58.331%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item26 {
  top: 91.63%;
  left: 62.5%;
  width: 25%;
  height: 8.333%;
}
}
.welcome-hero .item27 {
  top: 37.5%;
  left: 66.664%;
  width: 16.666%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item27 {
  top: 91.63%;
  left: 87.5%;
  width: 12.5%;
  height: 8.333%;
}
}
.welcome-hero .item28 {
  top: 37.5%;
  left: 83.333%;
}
.welcome-hero .item29 {
  top: 50%;
  left: 83.333%;
}
.welcome-hero .item30 {
  top: 37.5%;
  left: 91.663%;
  width: 8.333%;
  height: 25%;
}
.welcome-hero .item31 {
  top: 62.5%;
  left: 0px;
}
.welcome-hero .item32 {
  top: 62.5%;
  left: 8.333%;
  width: 16.666%;
  height: 25%;
}
.welcome-hero .item33 {
  top: 62.5%;
  left: 24.999%;
}
.welcome-hero .item34 {
  top: 62.5%;
  left: 33.332%;
}
.welcome-hero .item35 {
  top: 62.5%;
  left: 41.665%;
}
.welcome-hero .item36 {
  top: 62.5%;
  left: 49.998%;
  width: 16.666%;
  height: 25%;
}
.welcome-hero .item37 {
  top: 62.5%;
  left: 66.664%;
}
.welcome-hero .item38 {
  top: 62.5%;
  left: 74.997%;
  width: 16.666%;
}
.welcome-hero .item39 {
  top: 62.5%;
  left: 91.663%;
}
.welcome-hero .item40 {
  top: 75%;
  left: 0px;
  width: 8.333%;
  height: 25%;
}
.welcome-hero .item41 {
  top: 87.5%;
  left: 8.333%;
  width: 16.666%;
}
.welcome-hero .item42 {
  top: 75%;
  left: 24.999%;
}
.welcome-hero .item43 {
  top: 87.5%;
  left: 24.999%;
}
.welcome-hero .item44 {
  top: 87.5%;
  left: 49.998%;
}
.welcome-hero .item45 {
  top: 87.5%;
  left: 58.331%;
}
.welcome-hero .item46 {
  top: 75%;
  left: 66.664%;
  width: 16.666%;
  height: 25%;
}
.welcome-hero .item47 {
  top: 75%;
  left: 83.333%;
}
.welcome-hero .item48 {
  top: 87.5%;
  left: 83.333%;
}
.welcome-hero .item49 {
  top: 75%;
  left: 91.663%;
  width: 8.333%;
  height: 25%;
}

@media only screen and (max-width: 40em) {
.welcome-hero .item28,
 .welcome-hero .item29,
 .welcome-hero .item30,
 .welcome-hero .item31,
 .welcome-hero .item32,
 .welcome-hero .item33,
 .welcome-hero .item34,
 .welcome-hero .item35,
 .welcome-hero .item36,
 .welcome-hero .item37,
 .welcome-hero .item38,
 .welcome-hero .item39,
 .welcome-hero .item40,
 .welcome-hero .item41,
 .welcome-hero .item42,
 .welcome-hero .item43,
 .welcome-hero .item44,
 .welcome-hero .item45,
 .welcome-hero .item46,
 .welcome-hero .item47,
 .welcome-hero .item48,
 .welcome-hero .item49 {
  display: none;
}
}

/* 
------------------------------------------------*/
@media only screen and (max-width: 40em) {
.mainimg {
}
}

/* Small screens
------------------------------------------------*/

@media only screen and (max-width: 40em) {
}