@charset "UTF-8";
/* ----------------------------------------
   ■ index.css
---------------------------------------- */
#container {
  overflow: hidden;
  background-size: auto;
}

#anniv {
  position: absolute;
  left: 25px;
  top: 25px;
  width: 13vw;
}

main {
  position: relative;
  height: calc(100vh - 125px);
  min-height: 700px;
}

footer::before, footer::after {
  display: none;
}

#hero {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100vw;
  height: calc(100vh + 10%);
  min-height: calc(650px + 10%);
  background: url("../img/index/bg_hero_02.png") no-repeat 50% 50%/100% auto;
}
#hero .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
}
#hero .bg::before {
  content: '';
  position: absolute;
  left: 0;
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
  width: 100%;
  height: 100%;
}
#hero .bg::before {
  top: -100%;
}
#hero .bg.bg1 {
  opacity: 0.75;
}
#hero .bg.bg2 {
  opacity: 0.8;
}
#hero .bg.bg3 {
  opacity: 0.85;
}
#hero .bg.bg1, #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_a.png");
}
#hero .bg.bg2, #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_b.png");
}
#hero .bg.bg3, #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_c.png");
}
#hero .bg.bg2 {
  animation: herobg 240s 0s linear infinite;
}
#hero .bg.bg3 {
  animation: herobg 160s 0s linear infinite;
}
#hero .inner {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
}
#hero .inner h1 {
  position: relative;
  top: -1.5%;
  width: 40%;
  max-width: 580px;
  z-index: 2;
}

body.spring #hero {
  background-image: url("../img/index/bg_hero_02_spring.png");
}
body.spring #hero .bg.bg1, body.spring #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_spring_a.png");
}
body.spring #hero .bg.bg2, body.spring #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_spring_b.png");
}
body.spring #hero .bg.bg3, body.spring #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_spring_c.png");
}

body.default #hero {
  background-image: url("../img/index/bg_hero_02.png");
}
body.default #hero .bg.bg1, body.default #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_a.png");
}
body.default #hero .bg.bg2, body.default #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_b.png");
}
body.default #hero .bg.bg3, body.default #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_c.png");
}

body.summer #hero {
  background-image: url("../img/index/bg_hero_02_summer.png");
}
body.summer #hero .bg.bg1, body.summer #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_summer_a.png");
}
body.summer #hero .bg.bg2, body.summer #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_summer_b.png");
}
body.summer #hero .bg.bg3, body.summer #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_summer_c.png");
}

body.fall #hero {
  background-image: url("../img/index/bg_hero_02_fall.png");
}
body.fall #hero .bg.bg1, body.fall #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_fall_a.png");
}
body.fall #hero .bg.bg2, body.fall #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_fall_b.png");
}
body.fall #hero .bg.bg3, body.fall #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_fall_c.png");
}

body.winter #hero {
  background-image: url("../img/index/bg_hero_02_winter.png");
}
body.winter #hero .bg.bg1, body.winter #hero .bg.bg1::before {
  background-image: url("../img/index/bg_hero_winter_a.png");
}
body.winter #hero .bg.bg2, body.winter #hero .bg.bg2::before {
  background-image: url("../img/index/bg_hero_winter_b.png");
}
body.winter #hero .bg.bg3, body.winter #hero .bg.bg3::before {
  background-image: url("../img/index/bg_hero_winter_c.png");
}

#animationArea {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  min-height: 280px;
}
#animationArea .station {
  position: absolute;
  left: calc(50% - 425px);
  bottom: 20px;
  width: 850px;
  height: 250px;
  background: url("../img/index/img_station_01.png") 0 bottom/100% auto;
}
#animationArea .station .door {
  position: absolute;
  left: 45.8%;
  bottom: 0;
  overflow: hidden;
  width: 8.37%;
  height: 24.6%;
}
#animationArea .station .door > div {
  position: absolute;
  bottom: 0;
  width: 49%;
  height: 100%;
  background-color: #434343;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
#animationArea .station .door > div:first-child {
  left: 0;
  background-image: url("../img/floormap/img_station_door_01.png");
  background-position: right center;
  animation: doorLeft 24s linear 0s infinite;
}
#animationArea .station .door > div:last-child {
  right: 0;
  background-image: url("../img/floormap/img_station_door_02.png");
  background-position: left center;
  animation: doorRight 24s linear 0s infinite;
}
#animationArea .station .person {
  position: absolute;
  left: calc(50% - 15.5px);
  top: 118px;
  opacity: 0.0;
  animation: person 24s linear 0s infinite;
}
#animationArea .train {
  position: absolute;
  left: 50%;
  bottom: 0;
  overflow: hidden;
  width: 50%;
  height: 100%;
}
#animationArea .train > div {
  position: absolute;
  left: 101%;
  bottom: 20px;
  width: 256px;
  height: 24px;
  animation: train 24s linear 0s infinite;
}
#animationArea .child1 {
  position: absolute;
  left: calc(50% - 20px - 145px);
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: url("../img/index/img_child_dance_b.png") no-repeat 0 0/100% auto;
}
#animationArea .walk1 {
  position: absolute;
  left: calc(50% - 20px - 170px);
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: url("../img/index/img_wark_01b.png") no-repeat 0 0/100% auto;
}
#animationArea .walk2 {
  position: absolute;
  left: calc(50% - 20px - 230px);
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: url("../img/index/img_wark_01c.png") no-repeat 0 0/100% auto;
}
#animationArea .dance {
  position: absolute;
  left: calc(50% - 30px - 310px);
  bottom: 20px;
  width: 60px;
  height: 40px;
  background: url("../img/index/img_dance_01b.png") no-repeat 0 0/100% auto;
}
#animationArea .bird1 {
  position: absolute;
  left: calc(50% - 12px - 195px);
  width: 24px;
  height: 24px;
  bottom: 77px;
  background: url("../img/index/img_bird_01b.png") no-repeat 0 0/100% auto;
}
#animationArea .bird2 {
  position: absolute;
  left: calc(50% - 12px - 220px);
  width: 24px;
  height: 24px;
  bottom: 87px;
  background: url("../img/index/img_bird_01c.png") no-repeat 0 0/100% auto;
}
#animationArea .dog1 {
  position: absolute;
  left: calc(50% - 12px - 200px);
  bottom: 20px;
  width: 24px;
  height: 24px;
  background: url("../img/index/img_dog_01b.png") no-repeat 0 0/100% auto;
}
#animationArea .panda {
  position: absolute;
  left: calc(50% - 20px - 365px);
  bottom: 20px;
  width: 40px;
  height: 40px;
  background: url("../img/index/img_panda_01.png") no-repeat 0 0/100% auto;
}
#animationArea .airplane {
  position: absolute;
  left: 100%;
  bottom: 100%;
  width: 100px;
  height: 100px;
  background: url("../img/index/img_airplane_01.png") no-repeat center center/100% auto;
  animation: anim-airplane 30s ease-in 0s infinite;
}
#animationArea .tower1 {
  position: absolute;
  left: calc(50% - 78px - 260px);
  bottom: 20px;
  width: 156px;
  height: 156px;
  background: url("../img/index/img_tower_01.png") no-repeat center bottom/auto 100%;
}
#animationArea .temple1 {
  position: absolute;
  left: calc(50% - 78px + 470px);
  bottom: 20px;
  width: 124px;
  height: 124px;
  background: url("../img/index/img_temple_01.png") no-repeat center bottom/100% auto;
}
#animationArea .train1 {
  display: none;
  position: absolute;
  left: calc(50% - 255px - 850px);
  bottom: 20px;
  width: 510px;
  height: 510px;
  background: url("../img/index/img_train_01.png") no-repeat center bottom/100% auto;
}
#animationArea .train2 {
  display: none;
  position: absolute;
  left: calc(50% - 255px + 850px);
  bottom: 20px;
  width: 510px;
  height: 510px;
  background: url("../img/index/img_train_01.png") no-repeat center bottom/100% auto;
}
#animationArea .woods1 {
  position: absolute;
  left: calc(50% - 80px - 460px);
  bottom: 20px;
  width: 160px;
  height: 160px;
  background: url("../img/index/img_woods_01.png") no-repeat center bottom/100% auto;
}
#animationArea .ground {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: #434343;
}

#enter {
  position: absolute;
  left: calc(50% - 140px);
  bottom: 0;
  width: 280px;
  height: 220px;
}
#enter::after {
  content: '';
  position: absolute;
  right: -100px;
  top: -70px;
  width: 140px;
  height: 140px;
  background: url("../img/index/img_click.png") no-repeat center center/100% auto;
  transform-origin: left bottom 0px;
}
#enter:hover::after {
  animation: anim-balloon 0.7s ease 0s forwards;
}
#enter span {
  display: block;
  overflow: hidden;
  text-indent: -200%;
}

/* @keyframes
---------------------------------------- */
@keyframes herobg {
  0% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}
@keyframes anim-2steps {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -80px;
  }
}
@keyframes anim-3steps {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -120px;
  }
}
@keyframes anim-2steps-24 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -48px;
  }
}
@keyframes anim-airplane {
  0% {
    left: 101%;
    bottom: 50%;
    transform: scale(0.6);
  }
  100% {
    left: -80%;
    bottom: 120%;
    transform: scale(1.2);
  }
}
@keyframes anim-train {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -3750px;
  }
}
@keyframes anim-balloon {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-30deg);
  }
  20% {
    transform: rotate(8deg);
  }
  30% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(4deg);
  }
  70% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(2deg);
  }
  90% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes anim-airplane_sp {
  0% {
    left: 101%;
    bottom: 50%;
    transform: scale(0.6);
  }
  100% {
    left: -80%;
    bottom: 120%;
    transform: scale(1.2);
  }
}
@keyframes train {
  0% {
    left: 101%;
  }
  12.5% {
    left: 101%;
  }
  75% {
    left: -75%;
  }
  100% {
    left: -75%;
  }
}
@keyframes doorLeft {
  0% {
    left: 0%;
  }
  6.25% {
    left: 0%;
  }
  12.5% {
    left: -50%;
  }
  75% {
    left: -50%;
  }
  81.25% {
    left: 0%;
  }
  100% {
    left: 0%;
  }
}
@keyframes doorRight {
  0% {
    right: 0%;
  }
  6.25% {
    right: 0%;
  }
  12.5% {
    right: -50%;
  }
  75% {
    right: -50%;
  }
  81.25% {
    right: 0%;
  }
  100% {
    right: 0%;
  }
}
@keyframes person {
  0% {
    opacity: 0.0;
  }
  81.25% {
    opacity: 0.0;
  }
  82.25% {
    opacity: 1.0;
  }
  99% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
@keyframes train_sp {
  0% {
    left: 101%;
  }
  12.5% {
    left: 101%;
  }
  75% {
    left: -110%;
  }
  100% {
    left: -110%;
  }
}
@keyframes doorLeft_sp {
  0% {
    left: 0%;
  }
  6.25% {
    left: 0%;
  }
  12.5% {
    left: -50%;
  }
  75% {
    left: -50%;
  }
  81.25% {
    left: 0%;
  }
  100% {
    left: 0%;
  }
}
@keyframes doorRight_sp {
  0% {
    right: 0%;
  }
  6.25% {
    right: 0%;
  }
  12.5% {
    right: -50%;
  }
  75% {
    right: -50%;
  }
  81.25% {
    right: 0%;
  }
  100% {
    right: 0%;
  }
}
@keyframes person_sp {
  0% {
    opacity: 0.0;
  }
  81.25% {
    opacity: 0.0;
  }
  82.25% {
    opacity: 1.0;
  }
  99% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
/* @media : PC
---------------------------------------- */
/* @media : SP
---------------------------------------- */
@media screen and (max-width: 768px) {
  header {
    background: #004ea2;
  }

  main {
    height: calc(100vh - 170px);
  }

  #hero {
    background-size: 180% auto;
  }
  #hero .inner {
    background-size: 180% auto;
  }
  #hero .inner h1 {
    width: 76%;
  }

  #animationArea .child1 {
    left: calc(50% - 20px - 125px);
  }
  #animationArea .walk1 {
    left: calc(50% - 20px - 150px);
  }
  #animationArea .walk2 {
    left: calc(50% - 20px - 200px);
  }
  #animationArea .dance {
    left: calc(50% - 30px - 270px);
  }
  #animationArea .panda {
    left: calc(50% - 20px - 315px);
  }
  #animationArea .bird1 {
    left: calc(50% - 12px - 155px);
  }
  #animationArea .bird2 {
    left: calc(50% - 12px - 180px);
  }
  #animationArea .dog1 {
    left: calc(50% - 12px - 175px);
  }
  #animationArea .woods1 {
    left: calc(50% - 80px - 420px);
    width: 200px;
    height: 200px;
  }
  #animationArea .temple1 {
    left: calc(50% - 78px + 270px);
  }
  #animationArea .tower1 {
    left: calc(50% - 78px - 230px);
  }
}
@media screen and (max-width: 480px) {
  #anniv {
    left: 3vw;
    top: 3vw;
    width: 25vw;
  }

  main {
    height: calc(100vh - 120px);
    min-height: 540px;
  }

  #animationArea .child1, #animationArea .walk2, #animationArea .temple1, #animationArea .woods1, #animationArea .train1, #animationArea .train2 {
    display: none;
  }
  #animationArea .walk1 {
    left: calc(50% - 20px - 85px);
  }
  #animationArea .bird1 {
    left: calc(50% - 12px - 70px);
    bottom: 160px;
  }
  #animationArea .bird2 {
    left: calc(50% - 12px - 110px);
    bottom: 150px;
  }
  #animationArea .dog1 {
    left: calc(50% - 12px - 110px);
  }
  #animationArea .panda {
    left: calc(50% - 20px - 140px);
  }
  #animationArea .temple1 {
    left: calc(50% - 78px + 135px);
  }
  #animationArea .tower1 {
    left: calc(50% - 78px - 170px);
  }
  #animationArea .airplane {
    width: 50px;
    height: 50px;
    animation: anim-airplane_sp 10s ease-in 0ms infinite;
  }
  #animationArea .station {
    width: 510px;
    height: 150px;
    left: calc(50% - 255px);
  }
  #animationArea .station .door > div:first-child {
    animation: doorLeft_sp 10s linear 0s infinite;
  }
  #animationArea .station .door > div:last-child {
    animation: doorRight_sp 10s linear 0s infinite;
  }
  #animationArea .station .person {
    position: absolute;
    left: calc(50% - 9.5px);
    top: 71px;
    width: 19px;
    animation: person_sp 10s linear 0s infinite;
  }
  #animationArea .train > div {
    position: absolute;
    left: 101%;
    bottom: 7px;
    width: 128px;
    height: 24px;
    animation: train_sp 10s linear 0s infinite;
  }

  #enter {
    position: absolute;
    left: calc(50% - 100px);
    bottom: 0;
    width: 200px;
    height: 150px;
  }
  #enter::after {
    right: -50px;
    top: -50px;
    width: 100px;
    height: 100px;
  }
}