@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap&subset=japanese");
.topMain {
  background: #c0ebff;
  width: 100%;
  padding-bottom: 50px;
  overflow-x: hidden;
}
@media screen and (min-width: 769px) {
  .topMain {
    padding-bottom: 70px;
  }
}
.topMain .topTtl {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}
.topMain .topTtl .ttl01 {
  margin: 30px 0%;
  width: 70%;
  max-width: 410px;
}
@media screen and (min-width: 769px) {
  .topMain .topTtl .ttl01 {
    margin: 50px 5%;
    width: 70%;
  }
}
.topMain .topTtl .ttlbg01, .topMain .topTtl .ttlbg02 {
  width: 30%;
  max-width: 184px;
}
.topMain .topImgWrap {
  position: relative;
  width: 100%;
  max-width: 1070px;
  margin: 0 auto;
  margin-bottom: 20px;
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap {
    margin-bottom: 0;
  }
}
.topMain .topImgWrap .topImgBgC {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .topImgBgC {
    width: 90%;
  }
}
@media screen and (min-width: 769px) {
  .topMain .topImgWrap .topImgBgC {
    width: 100%;
  }
}
@media screen and (min-width: 1301px) {
  .topMain .topImgWrap .topImgBgC {
    width: 120%;
  }
}
.topMain .topImgWrap .topImgBgC .topImgBg01 {
  width: 110px;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .topImgBgC .topImgBg01 {
    width: 150px;
  }
}
@media screen and (min-width: 769px) {
  .topMain .topImgWrap .topImgBgC .topImgBg01 {
    width: 280px;
  }
}
.topMain .topImgWrap .topImgBgC .topImgBg02 {
  width: 90px;
}
@media screen and (min-width: 769px) {
  .topMain .topImgWrap .topImgBgC .topImgBg02 {
    width: 150px;
  }
}
.topMain .topImgWrap .topImgBg {
  width: 100%;
}
.topMain .topImgWrap .topImgBg img {
  width: 100%;
  margin: 0 auto;
}
.topMain .topImgWrap .topImg01, .topMain .topImgWrap .topImg02, .topMain .topImgWrap .topImg03, .topMain .topImgWrap .topImg04, .topMain .topImgWrap .chara01, .topMain .topImgWrap .chara02, .topMain .topImgWrap .clickmap, .topMain .topImgWrap .map {
  position: absolute;
}
.topMain .topImgWrap .topImg01, .topMain .topImgWrap .topImg02, .topMain .topImgWrap .topImg03, .topMain .topImgWrap .topImg04, .topMain .topImgWrap .clickmap {
  top: 0;
  left: 0;
}
.topMain .topImgWrap .topImg01 img, .topMain .topImgWrap .topImg02 img, .topMain .topImgWrap .topImg03 img, .topMain .topImgWrap .topImg04 img, .topMain .topImgWrap .clickmap img {
  width: 100%;
}
.topMain .topImgWrap .chara01 {
  top: 30%;
  right: 38%;
  opacity: 0;
  pointer-events: none;
  animation: fade 1s linear 3s forwards, yurayura 2s linear infinite;
}
.topMain .topImgWrap .chara01 img {
  width: 10vw;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .chara01 img {
    width: 8vw;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .chara01 img {
    width: auto;
  }
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .chara01 {
    animation: fade 1s linear 3s forwards, yurayura 2s linear infinite;
    top: 34%;
    right: 38%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .chara01 {
    animation: fade 1s linear 3s forwards, yurayura 2s linear infinite;
    top: 35%;
    right: 39%;
  }
}
.topMain .topImgWrap .chara02 {
  pointer-events: none;
  animation: fade 1s linear 3s forwards, tekuteku03 33s linear infinite;
  opacity: 0;
}
.topMain .topImgWrap .chara02 p {
  animation: return 33s linear infinite;
}
.topMain .topImgWrap .chara02 span {
  animation: yurayura 2s linear infinite;
  display: block;
}
.topMain .topImgWrap .chara02 span img {
  width: 10vw;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .chara02 span img {
    width: 8vw;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .chara02 span img {
    width: auto;
  }
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .chara02 {
    animation: fade 1s linear 3s forwards, tekuteku02 33s linear infinite;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .chara02 {
    animation: fade 1s linear 3s forwards, tekuteku01 33s linear infinite;
  }
}
.topMain .topImgWrap .map a img {
  width: 100%;
  max-width: 40px;
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map a img {
    max-width: none;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map a:hover img {
    animation: boyooon 0.9s;
  }
}
.topMain .topImgWrap .map a.mapSp {
  display: block;
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map a.mapSp {
    display: none;
  }
}
.topMain .topImgWrap .map a.mapPc {
  display: none;
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map a.mapPc {
    display: block;
  }
}
.topMain .topImgWrap .map01 {
  top: 1%;
  left: 43%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map01 {
    top: 7%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map01 {
    top: 5%;
    left: 39%;
  }
}
.topMain .topImgWrap .map02 {
  top: 13%;
  right: 33%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map02 {
    top: 22%;
    right: 36%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map02 {
    top: 21%;
    right: 32%;
  }
}
.topMain .topImgWrap .map03 {
  top: 12%;
  left: 28%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map03 {
    top: 22%;
    left: 30%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map03 {
    top: 18%;
    left: 26%;
  }
}
.topMain .topImgWrap .map04 {
  top: 24%;
  left: 43%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map04 {
    top: 33%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map04 {
    top: 29%;
    left: 39%;
  }
}
.topMain .topImgWrap .map05 {
  top: 40%;
  right: 25%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map05 {
    top: 49%;
    right: 29%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map05 {
    top: 43%;
    right: 26%;
  }
}
.topMain .topImgWrap .map06 {
  bottom: 29%;
  left: 42%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map06 {
    bottom: 30%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map06 {
    bottom: 29%;
    left: 36%;
  }
}
.topMain .topImgWrap .map07 {
  bottom: 42%;
  left: 28%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map07 {
    bottom: 45%;
    left: 31%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map07 {
    bottom: 45%;
    left: 23%;
  }
}
.topMain .topImgWrap .map08 {
  top: 30%;
  left: 14%;
}
@media screen and (min-width: 481px) {
  .topMain .topImgWrap .map08 {
    top: 40%;
    left: 18%;
  }
}
@media screen and (min-width: 1025px) {
  .topMain .topImgWrap .map08 {
    top: 30%;
    left: 3%;
  }
}
.topMain .mapBtnSp {
  display: block;
  padding: 0 20px;
}
@media screen and (min-width: 1025px) {
  .topMain .mapBtnSp {
    display: none;
  }
}
.topMain .mapBtnSp li {
  margin-bottom: 10px;
}
.topMain .mapBtnSp li a {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 15px;
  padding: 10px;
}
.topMain .mapBtnSp li a .mapBtn__img {
  width: 75px;
  height: 75px;
  margin-right: 10px;
}
.topMain .mapBtnSp li a .mapBtn__txt {
  height: 18px;
}
@media screen and (min-width: 769px) {
  .topMain .mapBtnSp li a .mapBtn__txt {
    height: 22px;
  }
}
.topMain .mapBtnSp li a::after {
  content: "";
  background: url(../img/top/ico_arrow_right.svg) no-repeat;
  width: 5px;
  height: 10px;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
}
.topMain .mapBtnSp li.mapBtn01 a {
  background: #F18C24;
  border: solid 1px #D8640F;
}
.topMain .mapBtnSp li.mapBtn02 a {
  background: #48ADD8;
  border: solid 1px #0086B3;
}
.topMain .mapBtnSp li.mapBtn03 a {
  background: #EB5C46;
  border: solid 1px #E73128;
}
.topMain .mapBtnSp li.mapBtn04 a {
  background: #E2B600;
  border: solid 1px #D69F0A;
}
.topMain .mapBtnSp li.mapBtn05 a {
  background: #48B134;
  border: solid 1px #288B3A;
}
.topMain .mapBtnSp li.mapBtn06 a {
  background: #EC7082;
  border: solid 1px #E73A6F;
}
.topMain .mapBtnSp li.mapBtn07 a {
  background: #316CB5;
  border: solid 1px #124F9A;
}
.topMain .mapBtnSp li.mapBtn08 a {
  background: #996CAC;
  border: solid 1px #8B509C;
}

.yura {
  animation: yurayura 2s linear infinite;
  display: block;
}

.poyon {
  animation: poyon 1s linear 1s forwards;
  opacity: 0;
}

.poyon01 {
  animation-delay: 2.1s;
}

.poyon02 {
  animation-delay: 2.4s;
}

.poyon03 {
  animation-delay: 2.7s;
}

.poyon04 {
  animation-delay: 3s;
}

@keyframes poyon {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
    opacity: 0;
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%);
  }
  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%);
  }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes return {
  0% {
    transform: scale(1, 1);
  }
  49% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(-1, 1);
  }
  99% {
    transform: scale(-1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes tekuteku01 {
  0% {
    top: 28%;
    right: 22%;
  }
  25% {
    top: 53%;
    right: 52%;
  }
  50% {
    top: 32%;
    right: 78%;
  }
  75% {
    top: 53%;
    right: 52%;
  }
  100% {
    top: 28%;
    right: 22%;
  }
}
@keyframes tekuteku02 {
  0% {
    top: 26%;
    right: 22%;
  }
  25% {
    top: 51%;
    right: 50%;
  }
  50% {
    top: 31%;
    right: 76%;
  }
  75% {
    top: 51%;
    right: 50%;
  }
  100% {
    top: 26%;
    right: 22%;
  }
}
@keyframes tekuteku03 {
  0% {
    top: 22%;
    right: 20%;
  }
  25% {
    top: 47%;
    right: 49%;
  }
  50% {
    top: 26%;
    right: 75%;
  }
  75% {
    top: 47%;
    right: 49%;
  }
  100% {
    top: 22%;
    right: 20%;
  }
}
@keyframes yurayura {
  0%, 100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
@keyframes boyooon {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.15, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.05, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
.remodal {
  border-radius: 10px;
}
.remodal .modalTtl {
  font-size: 2rem;
  font-weight: bold;
  color: #1D622F;
  margin-bottom: 10px;
}
.remodal .btnCommon {
  margin-top: 20px;
}

.remodal-close {
  left: 90% !important;
  color: #1D622F !important;
}
@media screen and (min-width: 481px) {
  .remodal-close {
    left: 95% !important;
  }
}

/*# sourceMappingURL=top.css.map */