@charset "UTF-8";
/*----------------------------------------
 *        Top
 *---------------------------------------- */
.slide-wrap {
  width: 100%;
  margin: 0 auto;
}
@media print, screen and (min-width: 769px) {
  .slide-wrap {
    max-width: 2000px;
    min-width: 1200px;
  }
}

.loading-movie {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 177.6%;
  overflow: hidden;
}
@media print, screen and (min-width: 769px) {
  .loading-movie {
    padding-top: 33.75%;
  }
}

.loading-movie .scene1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 9;
}
.loading-movie .scene1.none {
  opacity: 0;
}

.loading-movie .scene2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 8;
}
.loading-movie .scene2.none {
  opacity: 0;
}


/*----------*/
.contents-loader {
  width: 100%;
  background: url("../images/top/main_bg_all.png") no-repeat top left;
  background-size: cover;
  background-position: 0% 50%;
  overflow: hidden;
  z-index: 999;
}
.contents-loader.none {
  display: none;
}

.contents-loader.slide {
  -webkit-animation: slide 5s ease forwards;
  -moz-animation: slide 5s ease forwards;
  animation: slide 5s ease forwards;
}
@-webkit-keyframes slide {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  75% {background-position: 50% 50%;}
  100% {background-position: 50% 50%;}
}
@-moz-keyframes slide {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  75% {background-position: 50% 50%;}
  100% {background-position: 50% 50%;}
}
@keyframes slide {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  75% {background-position: 50% 50%;}
  100% {background-position: 50% 50%;}
}

.contents-loader .logo_bg {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 177.6%;
  background: #FFF;
}
@media print, screen and (min-width: 769px) {
  .contents-loader .logo_bg {
    padding-top: 33.75%;
  }
}

.contents-loader .item_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 29.33333%;
  margin: -15% 0 0 -15%;
}
@media print, screen and (min-width: 769px) {
  .contents-loader .item_logo {
    width: 12%;
    margin: -6% 0 0 -6%;
  }
}

.icon-item {
  position: relative;
  background: url("../images/top/main_bg_sp_popon.png") no-repeat top left;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 177.6%;
}
.icon-item li {
  position: absolute;
  width: 64.53333%;
  -webkit-transform: scale(0.9, 0.9);
  -moz-transform: scale(0.9, 0.9);
  -ms-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
  opacity: 0;
}
.icon-item li.item01 { top: 80.18018%; left: -22.666666%;}
.icon-item li.item02 { top: 24.17417%; left: -4.13333%;}
.icon-item li.item03 { top: 10.88588%; left: -14.8%;}
.icon-item li.item04 { top: 39.33933%; left: -26.53333%;}
.icon-item li.item05 { top: 43.99399%; left: 32%;}
.icon-item li.item06 { top: 79.2042%; left: 59.73333%;}
.icon-item li.item07 { top: 62.83783%; left: 56.8%;}
.icon-item li.item08 { top: -3.45345%; left: 49.73333%;}
.icon-item li.item09 { top: 29.27927%; left: 54.8%;}

.icon-item li.open {
  -webkit-animation: popon .2s ease forwards;
  -moz-animation: popon .2s ease forwards;
  animation: popon .2s ease forwards;
}
@-webkit-keyframes popon {
  0% {-webkit-transform: scale(0.9, 0.9);opacity: 0;}
  95% {-webkit-transform: scale(1.05, 1.05);opacity: 1;}
  100% {-webkit-transform: scale(1, 1);opacity: 1;}
}
@-moz-keyframes popon {
  0% {-moz-transform: scale(0.9, 0.9);opacity: 0;}
  95% {-moz-transform: scale(1.05, 1.05);opacity: 1;}
  100% {-moz-transform: scale(1, 1);opacity: 1;}
}
@keyframes popon {
  0% {transform: scale(0.9, 0.9);opacity: 0;}
  95% {transform: scale(1.05, 1.05);opacity: 1;}
  100% {transform: scale(1, 1);opacity: 1;}
}


/*----------*/
.contents-slider {
  width: 100%;
}
@media print, screen and (min-width: 769px) {
  .contents-slider {
    position: relative;
    padding-bottom: 80px;
    margin-bottom: -80px;
    overflow: hidden;
    z-index: 0;
  }
}

.thumb-item {
  background: url("../images/top/main_bg_sp.png") no-repeat top left;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 177.6%;
}
@media print, screen and (min-width: 769px) {
  .thumb-item {
    background: url("../images/top/main_bg.png") no-repeat top left;
    background-size: cover;
    padding-top: 33.75%;
  }
}
.thumb-item.none {
  display: none;
}

.thumb-item li {
  position: absolute;
  width: 99.73333% !important;
  height: auto !important;
  float: none !important;
}
.thumb-item li.item01 { top: 80.18018%; left: -22.666666%; z-index: 11;}
.thumb-item li.item02 { top: 24.17417%; left: -4.13333%; z-index: 18;}
.thumb-item li.item03 { top: 10.88588%; left: -14.8%; z-index: 12;}
.thumb-item li.item04 { top: 39.33933%; left: -26.53333%; z-index: 13;}
.thumb-item li.item05 { top: 43.99399%; left: -3.2%; z-index: 14;}
.thumb-item li.item06 { top: 79.2042%; left: 24.24533%; z-index: 15;}
.thumb-item li.item07 { top: 62.83783%; left: 21.6%; z-index: 16;}
.thumb-item li.item08 { top: -3.45345%; left: 14.53333%; z-index: 17;}
.thumb-item li.item09 { top: 29.27927%; left: 19.73333%; z-index: 19;}

@media print, screen and (min-width: 769px) {
  .thumb-item li {
    width: 20.25% !important;
  }
  .thumb-item li.item01 { top: 79.25925%; left: 41.1%;}
  .thumb-item li.item02 { top: 23.25925%; left: 45.4%;}
  .thumb-item li.item03 { top: 14.96296%; left: 35.4%;}
  .thumb-item li.item04 { top: 27.7037%; left: 15.7%;}
  .thumb-item li.item05 { top: 47.11111%; left: 22.7%;}
  .thumb-item li.item06 { top: 72.59259%; left: 65.2%;}
  .thumb-item li.item07 { top: 62.37037%; left: 45.15%;}
  .thumb-item li.item08 { top: -2.81481%; left: 65.5%;}
  .thumb-item li.item09 { top: 31.85185%; left: 66.05%;}
}

.thumb-item li:nth-child(1) {display: none !important;}
.thumb-item li:nth-child(n + 11) {display: none !important;}

.thumb-item li .main_name {
  width: 35.29412%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
@media print, screen and (min-width: 769px) {
  .thumb-item li .main_name {
    width: 43.45679%;
  }
}

.thumb-item li.item01 .main_name {
  -webkit-transform: translate(-10%, -50%);
  -moz-transform: translate(-10%, -50%);
  -ms-transform: translate(-10%, -50%);
  transform: translate(-10%, -50%);
}
.thumb-item li.item02 .main_name {
  -webkit-transform: translate(-70%, -40%);
  -moz-transform: translate(-70%, -40%);
  -ms-transform: translate(-70%, -40%);
  transform: translate(-70%, -40%);
}
.thumb-item li.item03 .main_name {
  -webkit-transform: translate(-5%, -30%);
  -moz-transform: translate(-5%, -30%);
  -ms-transform: translate(-5%, -30%);
  transform: translate(-5%, -30%);
}
.thumb-item li.item04 .main_name {
  -webkit-transform: translate(-10%, -40%);
  -moz-transform: translate(-10%, -40%);
  -ms-transform: translate(-10%, -40%);
  transform: translate(-10%, -40%);
}
.thumb-item li.item05 .main_name {
  -webkit-transform: translate(30%, -40%);
  -moz-transform: translate(30%, -40%);
  -ms-transform: translate(30%, -40%);
  transform: translate(30%, -40%);
}
.thumb-item li.item06 .main_name {
  -webkit-transform: translate(2%, -50%);
  -moz-transform: translate(2%, -50%);
  -ms-transform: translate(2%, -50%);
  transform: translate(2%, -50%);
}
.thumb-item li.item07 .main_name {
  -webkit-transform: translate(30%, -50%);
  -moz-transform: translate(30%, -50%);
  -ms-transform: translate(30%, -50%);
  transform: translate(30%, -50%);
}
.thumb-item li.item08 .main_name {
  -webkit-transform: translate(5%, -10%);
  -moz-transform: translate(5%, -10%);
  -ms-transform: translate(5%, -10%);
  transform: translate(5%, -10%);
}
.thumb-item li.item09 .main_name {
  -webkit-transform: translate(5%, -10%);
  -moz-transform: translate(5%, -10%);
  -ms-transform: translate(5%, -10%);
  transform: translate(5%, -10%);
}
@media print, screen and (min-width: 769px) {
  .thumb-item li.item01 .main_name {
    -webkit-transform: translate(0, -20%);
    -moz-transform: translate(0, -20%);
    -ms-transform: translate(0, -20%);
    transform: translate(0, -20%);
  }
  .thumb-item li.item02 .main_name {
    -webkit-transform: translate(-40%, -20%);
    -moz-transform: translate(-40%, -20%);
    -ms-transform: translate(-40%, -20%);
    transform: translate(-40%, -20%);
  }
  .thumb-item li.item03 .main_name {
    -webkit-transform: translate(-5%, -40%);
    -moz-transform: translate(-5%, -40%);
    -ms-transform: translate(-5%, -40%);
    transform: translate(-5%, -40%);
  }
  .thumb-item li.item04 .main_name {
    -webkit-transform: translate(-5%, -20%);
    -moz-transform: translate(-5%, -20%);
    -ms-transform: translate(-5%, -20%);
    transform: translate(-5%, -20%);
  }
  .thumb-item li.item05 .main_name {
    -webkit-transform: translate(15%, -20%);
    -moz-transform: translate(15%, -20%);
    -ms-transform: translate(15%, -20%);
    transform: translate(15%, -20%);
  }
  .thumb-item li.item06 .main_name {
    -webkit-transform: translate(0, -30%);
    -moz-transform: translate(0, -30%);
    -ms-transform: translate(0, -30%);
    transform: translate(0, -30%);
  }
  .thumb-item li.item07 .main_name {
    -webkit-transform: translate(20%, -30%);
    -moz-transform: translate(20%, -30%);
    -ms-transform: translate(20%, -30%);
    transform: translate(20%, -30%);
  }
  .thumb-item li.item08 .main_name {
    -webkit-transform: translate(0, 10%);
    -moz-transform: translate(0, 10%);
    -ms-transform: translate(0, 10%);
    transform: translate(0, 10%);
  }
  .thumb-item li.item09 .main_name {
    -webkit-transform: translate(0, -20%);
    -moz-transform: translate(0, -20%);
    -ms-transform: translate(0, -20%);
    transform: translate(0, -20%);
  }
}

.thumb-item li.slick-current {
  z-index: 21;
}
.thumb-item li.slick-current .main_name {
  position: relative;
  opacity: 1;
  z-index: 22;
}

.thumb-item li .main_icon {
  width: 64.70588%;
}
@media print, screen and (min-width: 769px) {
  .thumb-item li .main_icon {
    width: 56.54321%;
  }
}

.thumb-item li.slick-current .main_icon {
  position: relative;
  z-index: 20;
  -webkit-animation: idling .2s infinite;
  -moz-animation: idling .2s infinite;
  animation: idling .2s infinite;
}
@-webkit-keyframes idling {
  0% {-webkit-transform: translate(0px, 0px) rotateZ(0deg)}
  25% {-webkit-transform: translate(1px, 1px) rotateZ(1deg)}
  50% {-webkit-transform: translate(0px, 1px) rotateZ(0deg)}
  75% {-webkit-transform: translate(1px, 0px) rotateZ(-1deg)}
  100% {-webkit-transform: translate(0px, 0px) rotateZ(0deg)}
}
@-moz-keyframes idling {
  0% {-moz-transform: translate(0px, 0px) rotateZ(0deg)}
  25% {-moz-transform: translate(1px, 1px) rotateZ(1deg)}
  50% {-moz-transform: translate(0px, 1px) rotateZ(0deg)}
  75% {-moz-transform: translate(1px, 0px) rotateZ(-1deg)}
  100% {-moz-transform: translate(0px, 0px) rotateZ(0deg)}
}
@keyframes idling {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(1px, 1px) rotateZ(1deg)}
  50% {transform: translate(0px, 1px) rotateZ(0deg)}
  75% {transform: translate(1px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.thumb-item .slick-list,
.thumb-item .slick-list .slick-track {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  -webkit-transform: translate3d(0px, 0px, 0px) !important;
  -moz-transform: translate3d(0px, 0px, 0px) !important;
  -ms-transform: translate3d(0px, 0px, 0px) !important;
  transform: translate3d(0px, 0px, 0px) !important;
}
.thumb-item .slick-list .slick-slide img {
  display: inline !important;
}

.hatarakulogo {
  position: fixed;
  bottom: -50px;
  width: 100%;
  background: #222;
  text-align: center;
  z-index: 9000;
  -webkit-transition: bottom 0.3s ease-in-out;
  -moz-transition: bottom 0.3s ease-in-out;
  transition: bottom 0.3s ease-in-out;
}
@media print, screen and (min-width: 769px) {
  .hatarakulogo {
    position: absolute;
    top: 15px;
    bottom: auto;
    left: 15px;
    width: 12%;
    background: none;
    z-index: 1;
  }
}

.hatarakulogo img {
  width: 320px;
}
@media print, screen and (min-width: 769px) {
  .hatarakulogo img {
    width: 100%;
  }
}

.hatarakulogo.open {
  bottom: 0;
}

.hatarakulogo.none {
  display: none;
}
.hatarakulogo.set {
  display: block;
  bottom: -50px;
}


/*----------*/
.thumb-item-nav {
  display: none;
}
@media print, screen and (min-width: 769px) {
  .thumb-item-nav {
    display: block;
    margin-top: 3px;
  }
  .thumb-item-nav::after {
    content: "";
    display: block;
    clear: both;
  }

  .thumb-item-nav li {
    float: left;
    width: 11.11111% !important;
    border-right: #FFF 1px dotted;
    box-sizing: border-box;
  }
  .thumb-item-nav li.item01,
  .thumb-item-nav li.item02,
  .thumb-item-nav li.item03 {
    background: #FFC80A;
  }
  .thumb-item-nav li.item04
  .thumb-item-nav li.item05,
  .thumb-item-nav li.item06 {
    background: #5ABEFA;
  }
  .thumb-item-nav li.item07 {
    background: #F596B4;
  }
  .thumb-item-nav li.item08,
  .thumb-item-nav li.item09 {
    background: #8CC85A;
  }

  .thumb-item-nav li a {
    display: block;
    background: #646464;
  }

  .thumb-item-nav li img {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .thumb-item-nav li.slick-current img {
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
  }
  .thumb-item-nav li img {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .thumb-item-nav li.slick-current img {
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
  }

  .thumb-item-nav .slick-list {
    overflow: visible !important;
  }

  .thumb-item-nav .slick-list .slick-track {
    width: 100% !important;
    -webkit-transform: translate3d(0px, 0px, 0px) !important;
    -moz-transform: translate3d(0px, 0px, 0px) !important;
    -ms-transform: translate3d(0px, 0px, 0px) !important;
    transform: translate3d(0px, 0px, 0px) !important;
  }
}


/*----------*/
body.open {
  margin-bottom: 40px;
}