@charset "UTF-8";
@-webkit-keyframes charaAnime1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  10% {
    -webkit-transform: translate3d(0, -15px, 0); }
  20% {
    -webkit-transform: translate3d(0, 0, 0); }
  30% {
    -webkit-transform: translate3d(0, -15px, 0); }
  40% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0); } }
@keyframes charaAnime1 {
  0% {
    transform: translate3d(0, 0, 0); }
  10% {
    transform: translate3d(0, -15px, 0); }
  20% {
    transform: translate3d(0, 0, 0); }
  30% {
    transform: translate3d(0, -15px, 0); }
  40% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes charaAnime2 {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg); } }
@keyframes charaAnime2 {
  0% {
    transform: rotate3d(0, 0, 1, -10deg); }
  100% {
    transform: rotate3d(0, 0, 1, 10deg); } }
@-webkit-keyframes charaAnime2d {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg) scale3d(1.2, 1.2, 1); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg) scale3d(1.2, 1.2, 1); } }
@keyframes charaAnime2d {
  0% {
    transform: rotate3d(0, 0, 1, -10deg) scale3d(0.8, 0.8, 1); }
  100% {
    transform: rotate3d(0, 0, 1, 10deg) scale3d(0.8, 0.8, 1); } }
@-webkit-keyframes charaAnimeM {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -7deg);
    -webkit-transform-origin: 12px 70px; }
  50% {
    -webkit-transform-origin: center bottom; }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 7deg);
    -webkit-transform-origin: 59px 65px; } }
@keyframes charaAnimeM {
  0% {
    transform: rotate3d(0, 0, 1, -7deg);
    transform-origin: 12px 70px; }
  50% {
    transform-origin: center bottom; }
  100% {
    transform: rotate3d(0, 0, 1, 7deg);
    transform-origin: 59px 65px; } }
@-webkit-keyframes charaAnimeC {
  0% {
    -webkit-transform: translate3d(0, 20px, 0); }
  100% {
    -webkit-transform: translate3d(0, -20px, 0); } }
@keyframes charaAnimeC {
  0% {
    transform: translate3d(0, 20px, 0); }
  100% {
    transform: translate3d(0, -20px, 0); } }
@-webkit-keyframes charaAnimeE {
  0% {
    -webkit-transform: translate3d(20px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-20px, 0, 0); } }
@keyframes charaAnimeE {
  0% {
    transform: translate3d(20px, 0, 0); }
  100% {
    transform: translate3d(-20px, 0, 0); } }
@-webkit-keyframes charaAnimeL {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  10% {
    -webkit-transform: translate3d(0, -100px, 0); }
  12% {
    -webkit-transform: translate3d(0, -80px, 0); }
  14% {
    -webkit-transform: translate3d(0, -100px, 0); }
  16% {
    -webkit-transform: translate3d(0, -80px, 0); }
  18% {
    -webkit-transform: translate3d(0, -100px, 0); }
  28% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0); } }
@keyframes charaAnimeL {
  0% {
    transform: translate3d(0, 0, 0); }
  20% {
    transform: translate3d(0, -100px, 0); }
  25% {
    transform: translate3d(0, -80px, 0); }
  30% {
    transform: translate3d(0, -100px, 0); }
  35% {
    transform: translate3d(0, -80px, 0); }
  40% {
    transform: translate3d(0, -100px, 0); }
  60% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes charaAnimeCloud {
  0% {
    -webkit-transform: translate3d(0, 25px, 0) scale3d(0.8, 0.8, 1); }
  50% {
    -webkit-transform: translate3d(0, -25px, 0) scale3d(1, 1, 1); }
  100% {
    -webkit-transform: translate3d(0, 25px, 0) scale3d(0.8, 0.8, 1); } }
@keyframes charaAnimeCloud {
  0% {
    transform: translate3d(0, 25px, 0) scale3d(0.8, 0.8, 1); }
  50% {
    transform: translate3d(0, -25px, 0) scale3d(1, 1, 1); }
  100% {
    transform: translate3d(0, 25px, 0) scale3d(0.8, 0.8, 1); } }
@-webkit-keyframes charaAnimeW {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg); } }
@keyframes charaAnimeW {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    transform: rotate3d(0, 0, 1, 360deg); } }
@-webkit-keyframes charaAnimeW2 {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, -360deg); } }
@keyframes charaAnimeW2 {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    transform: rotate3d(0, 0, 1, -360deg); } }
@-webkit-keyframes charaAnimeA2 {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 40deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, -40deg); } }
@keyframes charaAnimeA2 {
  0% {
    transform: rotate3d(0, 0, 1, 40deg); }
  100% {
    transform: rotate3d(0, 0, 1, -40deg); } }
@-webkit-keyframes compassAnime {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg); }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes compassAnime {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  25% {
    transform: rotate3d(0, 0, 1, 10deg); }
  75% {
    transform: rotate3d(0, 0, 1, -10deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }
/* modal animation
=================================================================== */
@-webkit-keyframes onceAnime {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  5% {
    -webkit-transform: translate3d(0, -12px, 0); }
  10% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0); } }
@keyframes onceAnime {
  0% {
    transform: translate3d(0, 0, 0); }
  5% {
    transform: translate3d(0, -12px, 0); }
  10% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@-webkit-keyframes twiceAnime {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  5% {
    -webkit-transform: translate3d(0, -12px, 0); }
  10% {
    -webkit-transform: translate3d(0, 0, 0); }
  5% {
    -webkit-transform: translate3d(0, -12px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0); } }
@keyframes twiceAnime {
  0% {
    transform: translate3d(0, 0, 0); }
  3% {
    transform: translate3d(0, -12px, 0); }
  6% {
    transform: translate3d(0, 0, 0); }
  9% {
    transform: translate3d(0, -12px, 0); }
  12% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@keyframes rotationAnime {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  5% {
    transform: rotate3d(0, 0, 1, -10deg); }
  10% {
    transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes rotationAnime2 {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  5% {
    transform: rotate3d(0, 0, 1, 10deg); }
  10% {
    transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }
@-webkit-keyframes cafeCarousel {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, -20px, 0); } }
@keyframes cafeCarousel {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, -20px, 0); } }
@-webkit-keyframes lloroChiffon {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -20deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 20deg); } }
@keyframes lloroChiffon {
  0% {
    transform: rotate3d(0, 0, 1, -3deg); }
  100% {
    transform: rotate3d(0, 0, 1, 20deg); } }
@-webkit-keyframes lloroCherry {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); }
  10% {
    -webkit-transform: rotate3d(0, 0, 1, 10deg); }
  30% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes lloroCherry {
  0% {
    transform: rotate3d(0, 0, 1, 0deg); }
  5% {
    transform: rotate3d(0, 0, 1, 10deg); }
  15% {
    transform: rotate3d(0, 0, 1, -10deg); }
  20% {
    transform: rotate3d(0, 0, 1, 0deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }
@-webkit-keyframes lloroBat {
  0% {
    -webkit-transform: translate3d(0, 25px, 0); }
  50% {
    -webkit-transform: translate3d(0, -25px, 0); }
  100% {
    -webkit-transform: translate3d(0, 25px, 0); } }
@keyframes lloroBat {
  0% {
    transform: translate3d(0, 25px, 0); }
  50% {
    transform: translate3d(0, -25px, 0); }
  100% {
    transform: translate3d(0, 25px, 0); } }
@-webkit-keyframes kingdomCinnamon {
  0% {
    -webkit-transform: translate3d(0, 20px, 0); }
  100% {
    -webkit-transform: translate3d(0, -20px, 0); } }
@keyframes kingdomCinnamon {
  0% {
    transform: translate3d(0, 20px, 0); }
  100% {
    transform: translate3d(0, -20px, 0); } }
/* town
=================================================================== */
body {
  background: #ffebf5; }

#ua.portrait {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11111;
  display: none;
  background: url(../img/contents/town/caution.png) no-repeat center center #ffebf5;
  background-size: 293px auto; }

.btn__back {
  text-indent: -9999px;
  -ms-transition-duration: 0.5s;
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　-moz-transition-duration: 0.5s;
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  　transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  width: 146px;
  height: 120px;
  background: url(../img/common/btn__back.png) no-repeat center center;
  background-size: 100% auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  bottom: 20px;
  z-index: 101; }
  .btn__back a {
    height: 100%; }
  .btn__back:hover {
    transform: translateX(-50%) scale(1.1);
    -webkit-transform: translateX(-50%) scale(1.1); }

.map__main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden; }

.map__main--scale {
  position: absolute;
  top: 0;
  left: 0; }

.town__container {
  position: absolute;
  z-index: 0;
  width: 4400px;
  height: 3060px;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  left: 0;
  top: 0;
  background: url(../img/contents/town/area__bg.jpg) repeat-x left top;
  background-size: 20px auto; }
  .town__container .town__container--chara {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }
  .town__container .town__container--area {
    position: absolute;
    width: 50%;
    height: 50%; }
    .town__container .town__container--area .area__point li {
      position: absolute;
      opacity: 1;
      z-index: 100;
      display: none;
      pointer-events: none; }
      .town__container .town__container--area .area__point li .area__point--label {
        pointer-events: auto;
        position: absolute;
        text-align: center;
        display: block  !important;
        opacity: 1 !important;
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        -webkit-animation: charaAnime2d 1.7s linear infinite alternate;
        animation: charaAnime2d 1.7s linear infinite alternate;
        cursor: pointer; }
        .town__container .town__container--area .area__point li .area__point--label dl {
          text-shadow: -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 2px 0px #fff, -2px 0px 0px #fff, 2px 0 0px #fff, 0 -2px 0px #fff, 0 2px 0px #fff;
          font-size: 16px;
          color: #9b8c78;
          font-weight: bold;
          line-height: 1.2; }
          .town__container .town__container--area .area__point li .area__point--label dl dt {
            font-size: 14px; }
    .town__container .town__container--area.house {
      top: 0;
      left: 0;
      background: url(../img/contents/town/area__house.png) no-repeat left top;
      background-size: 100% auto; }
      .town__container .town__container--area.house .area__point li .area__point--label {
        background: url(../img/contents/town/point__house.png) no-repeat center center;
        background-size: 100% auto;
        width: 210px;
        height: 152px;
        padding-top: 74px; }
      .town__container .town__container--area.house .area__point li.area__point--1 {
        width: 278px;
        height: 278px;
        top: 398px;
        left: 338px; }
        .town__container .town__container--area.house .area__point li.area__point--1 .area__point--label {
          left: -20px;
          top: -90px; }
      .town__container .town__container--area.house .area__point li.area__point--2 {
        width: 427px;
        height: 320px;
        top: 845px;
        left: 1218px; }
        .town__container .town__container--area.house .area__point li.area__point--2 .area__point--label {
          left: -50px;
          top: -60px; }
      .town__container .town__container--area.house .area__point li.area__point--3 {
        width: 99px;
        height: 90px;
        top: 1202px;
        left: 2103px; }
        .town__container .town__container--area.house .area__point li.area__point--3 .area__point--label {
          left: -50px;
          top: -115px; }
      .town__container .town__container--area.house .area__point li.area__point--4 {
        width: 427px;
        height: 158px;
        top: 1088px;
        left: 1640px; }
        .town__container .town__container--area.house .area__point li.area__point--4 .area__point--label {
          left: 0;
          top: -70px; }
      .town__container .town__container--area.house .area__point li.area__point--5 {
        width: 302px;
        height: 132px;
        top: 536px;
        left: 837px; }
        .town__container .town__container--area.house .area__point li.area__point--5 .area__point--label {
          left: 20px;
          top: -120px; }
      .town__container .town__container--area.house .area__point li.area__point--6 {
        width: 185px;
        height: 136px;
        top: 817px;
        left: 15px; }
        .town__container .town__container--area.house .area__point li.area__point--6 .area__point--label {
          left: 10px;
          top: -130px; }
      .town__container .town__container--area.house .area__point li.area__point--7 {
        width: 135px;
        height: 213px;
        top: 692px;
        left: 182px; }
        .town__container .town__container--area.house .area__point li.area__point--7 .area__point--label {
          left: -36px;
          top: -130px; }
      .town__container .town__container--area.house .area__point li.area__point--8 {
        width: 293px;
        height: 189px;
        top: 1235px;
        left: 1640px; }
        .town__container .town__container--area.house .area__point li.area__point--8 .area__point--label {
          left: 40px;
          top: -100px; }
      .town__container .town__container--area.house .area__point li.area__point--9 {
        width: 409px;
        height: 140px;
        top: 1318px;
        left: 1220px; }
        .town__container .town__container--area.house .area__point li.area__point--9 .area__point--label {
          left: 50px;
          top: -120px; }
      .town__container .town__container--area.house .area__point li.area__point--10 {
        height: 130px;
        left: 1640px;
        top: 1423px;
        width: 80px; }
        .town__container .town__container--area.house .area__point li.area__point--10 .area__point--label {
          left: -68px;
          top: -106px; }
      .town__container .town__container--area.house .area__point li.area__point--11 {
        height: 352px;
        left: 1860px;
        top: 773px;
        width: 292px; }
        .town__container .town__container--area.house .area__point li.area__point--11 .area__point--label {
          left: 37px;
          top: -46px; }
      .town__container .town__container--area.house .area__point li.area__point--12 {
        height: 212px;
        left: 1420px;
        top: 383px;
        width: 380px; }
        .town__container .town__container--area.house .area__point li.area__point--12 .area__point--label {
          left: 87px;
          top: -76px; }
      .town__container .town__container--area.house .area__point li.area__point--13 {
        height: 335px;
        left: 310px;
        top: 1063px;
        width: 486px; }
        .town__container .town__container--area.house .area__point li.area__point--13 .area__point--label {
          left: 137px;
          top: -76px;
          padding-top: 80px; }
      .town__container .town__container--area.house .area__point li.area__point--14 {
        height: 154px;
        left: 1535px;
        top: 943px;
        width: 128px; }
        .town__container .town__container--area.house .area__point li.area__point--14 .area__point--label {
          left: -43px;
          top: -76px;
          padding-top: 80px; }
    .town__container .town__container--area.cafe {
      top: 0;
      right: 0;
      width: calc(50% + 1px);
      height: calc(50% + 1px);
      background: url(../img/contents/town/area__cafe.png) no-repeat left top;
      background-size: 100% auto; }
      .town__container .town__container--area.cafe .area__point li .area__point--label {
        background: url(../img/contents/town/point__cafe.png) no-repeat center center;
        background-size: 100% auto;
        width: 170px;
        height: 149px;
        padding-top: 64px; }
      .town__container .town__container--area.cafe .area__point li.area__point--1 {
        width: 226px;
        height: 219px;
        top: 1290px;
        left: 128px; }
        .town__container .town__container--area.cafe .area__point li.area__point--1 .area__point--label {
          left: 130px;
          top: -10px; }
      .town__container .town__container--area.cafe .area__point li.area__point--2 {
        width: 243px;
        height: 219px;
        top: 583px;
        left: 1426px; }
        .town__container .town__container--area.cafe .area__point li.area__point--2 .area__point--label {
          left: 30px;
          top: -110px; }
      .town__container .town__container--area.cafe .area__point li.area__point--3 {
        width: 1044px;
        height: 354px;
        top: 0;
        left: 934px; }
        .town__container .town__container--area.cafe .area__point li.area__point--3 .area__point--label {
          left: 444px;
          top: 60px; }
      .town__container .town__container--area.cafe .area__point li.area__point--4 {
        width: 167px;
        height: 147px;
        top: 1111px;
        left: 427px; }
        .town__container .town__container--area.cafe .area__point li.area__point--4 .area__point--label {
          left: 27px;
          top: -120px; }
      .town__container .town__container--area.cafe .area__point li.area__point--5 {
        width: 307px;
        height: 256px;
        top: 864px;
        left: 90px; }
        .town__container .town__container--area.cafe .area__point li.area__point--5 .area__point--label {
          left: 48px;
          top: -90px;
          padding-top: 77px; }
      .town__container .town__container--area.cafe .area__point li.area__point--13 {
        width: 233px;
        height: 248px;
        top: 164px;
        left: 200px; }
        .town__container .town__container--area.cafe .area__point li.area__point--13 .area__point--label {
          left: 30px;
          top: -50px; }
      .town__container .town__container--area.cafe .area__point li.area__point--14 {
        width: 258px;
        height: 184px;
        left: 444px;
        top: 323px; }
        .town__container .town__container--area.cafe .area__point li.area__point--14 .area__point--label {
          left: 42px;
          top: -66px; }
      .town__container .town__container--area.cafe .area__point li.area__point--15 {
        width: 205px;
        height: 180px;
        left: 724px;
        top: 113px; }
        .town__container .town__container--area.cafe .area__point li.area__point--15 .area__point--label {
          left: 22px;
          top: -56px; }
      .town__container .town__container--area.cafe .area__point li.area__point--16 {
        width: 469px;
        height: 172px;
        left: 237px;
        top: 692px; }
        .town__container .town__container--area.cafe .area__point li.area__point--16 .area__point--label {
          left: 66px;
          top: -92px; }
      .town__container .town__container--area.cafe .area__point li.area__point--17 {
        width: 217px;
        height: 223px;
        left: 978px;
        top: 392px; }
        .town__container .town__container--area.cafe .area__point li.area__point--17 .area__point--label {
          left: 20px;
          top: -50px; }
      .town__container .town__container--area.cafe .area__point li.area__point--18 {
        width: 489px;
        height: 318px;
        left: 1707px;
        top: 1162px; }
        .town__container .town__container--area.cafe .area__point li.area__point--18 .area__point--label {
          left: 52px;
          top: 4px; }
    .town__container .town__container--area.farm {
      bottom: 0;
      left: 0;
      background: url(../img/contents/town/area__farm.png) no-repeat left top;
      background-size: 100% auto; }
      .town__container .town__container--area.farm .area__point li .area__point--label {
        background: url(../img/contents/town/point__farm.png) no-repeat center center;
        background-size: 100% auto;
        width: 168px;
        height: 166px;
        padding-top: 93px; }
      .town__container .town__container--area.farm .area__point li.area__point--1 {
        width: 536px;
        height: 227px;
        top: 550px;
        left: 1850px; }
        .town__container .town__container--area.farm .area__point li.area__point--1 .area__point--label {
          left: 460px;
          top: 77px; }
      .town__container .town__container--area.farm .area__point li.area__point--2 {
        width: 192px;
        height: 193px;
        top: 261px;
        left: 1628px; }
        .town__container .town__container--area.farm .area__point li.area__point--2 .area__point--label {
          left: -10px;
          top: -100px; }
      .town__container .town__container--area.farm .area__point li.area__point--3 {
        width: 264px;
        height: 186px;
        top: 52px;
        left: 1224px; }
        .town__container .town__container--area.farm .area__point li.area__point--3 .area__point--label {
          left: -7px;
          top: -133px; }
      .town__container .town__container--area.farm .area__point li.area__point--4 {
        width: 668px;
        height: 270px;
        top: 1062px;
        left: 1844px; }
        .town__container .town__container--area.farm .area__point li.area__point--4 .area__point--label {
          left: 316px;
          top: -110px; }
      .town__container .town__container--area.farm .area__point li.area__point--5 {
        width: 580px;
        height: 180px;
        top: 396px;
        left: 0; }
        .town__container .town__container--area.farm .area__point li.area__point--5 .area__point--label {
          left: 300px;
          top: -80px; }
      .town__container .town__container--area.farm .area__point li.area__point--6 {
        width: 1007px;
        height: 432px;
        top: 584px;
        left: 140px; }
        .town__container .town__container--area.farm .area__point li.area__point--6 .area__point--label {
          left: 590px;
          top: 20px; }
      .town__container .town__container--area.farm .area__point li.area__point--7 {
        width: 581px;
        height: 313px;
        top: 71px;
        left: 30px; }
        .town__container .town__container--area.farm .area__point li.area__point--7 .area__point--label {
          left: 308px;
          top: -14px; }
      .town__container .town__container--area.farm .area__point li.area__point--8 {
        width: 334px;
        height: 220px;
        top: 214px;
        left: 618px; }
        .town__container .town__container--area.farm .area__point li.area__point--8 .area__point--label {
          left: 88px;
          top: -84px; }
      .town__container .town__container--area.farm .area__point li.area__point--9 {
        width: 130px;
        height: 149px;
        top: 209px;
        left: 1497px; }
        .town__container .town__container--area.farm .area__point li.area__point--9 .area__point--label {
          left: -22px;
          top: -104px; }
      .town__container .town__container--area.farm .area__point li.area__point--10 {
        width: 263px;
        height: 190px;
        top: 488px;
        left: 1579px; }
        .town__container .town__container--area.farm .area__point li.area__point--10 .area__point--label {
          left: 48px;
          top: -84px; }
      .town__container .town__container--area.farm .area__point li.area__point--11 {
        width: 130px;
        height: 124px;
        top: 924px;
        left: 1913px; }
        .town__container .town__container--area.farm .area__point li.area__point--11 .area__point--label {
          left: -22px;
          top: -124px; }
      .town__container .town__container--area.farm .area__point li.area__point--12 {
        width: 82px;
        height: 66px;
        top: 524px;
        left: 1478px; }
        .town__container .town__container--area.farm .area__point li.area__point--12 .area__point--label {
          left: -42px;
          top: -148px; }
    .town__container .town__container--area.entertainment {
      bottom: 0;
      right: 0;
      width: calc(50% + 1px);
      height: calc(50% + 1px);
      background: url(../img/contents/town/area__entame.png) no-repeat left top;
      background-size: 100% auto; }
      .town__container .town__container--area.entertainment .area__point li .area__point--label {
        background: url(../img/contents/town/point__entame.png) no-repeat center center;
        background-size: 100% auto;
        width: 149px;
        height: 150px;
        padding-top: 67px;
        padding-left: 3px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--1 {
        width: 525px;
        height: 570px;
        top: 38px;
        left: 1664px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--1 .area__point--label {
          left: 120px;
          top: 30px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--2 {
        width: 382px;
        height: 143px;
        top: 1118px;
        left: 1232px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--2 .area__point--label {
          left: -20px;
          top: -73px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--3 {
        width: 461px;
        height: 122px;
        top: 428px;
        left: -73px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--3 .area__point--label {
          left: 595px;
          top: 204px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--4 {
        width: 254px;
        height: 204px;
        top: 304px;
        left: 396px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--4 .area__point--label {
          left: 119px;
          top: -50px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--5 {
        width: 131px;
        height: 143px;
        top: 400px;
        left: 660px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--5 .area__point--label {
          left: -10px;
          top: -130px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--6 {
        width: 176px;
        height: 135px;
        top: 504px;
        left: 762px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--6 .area__point--label {
          left: 57px;
          top: -130px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--7 {
        width: 242px;
        height: 167px;
        top: 634px;
        left: 287px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--7 .area__point--label {
          left: 47px;
          top: -80px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--8 {
        width: 134px;
        height: 150px;
        top: 287px;
        left: 257px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--8 .area__point--label {
          left: 9px;
          top: -73px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--9 {
        width: 136px;
        height: 164px;
        top: 263px;
        left: 120px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--9 .area__point--label {
          left: -3px;
          top: -80px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--10 {
        width: 107px;
        height: 157px;
        top: 233px;
        left: 12px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--10 .area__point--label {
          left: -35px;
          top: -84px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--11 {
        width: 148px;
        height: 130px;
        top: 173px;
        left: 438px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--11 .area__point--label {
          left: -15px;
          top: -84px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--12 {
        width: 130px;
        height: 117px;
        top: 168px;
        left: 718px; }
        .town__container .town__container--area.entertainment .area__point li.area__point--12 .area__point--label {
          left: -5px;
          top: -104px; }

.arrow {
  position: fixed;
  width: 72px;
  height: 72px;
  z-index: 5;
  cursor: pointer; }
  .arrow.north {
    background: url(../img/contents/town/arrow__north.png) no-repeat left top;
    background-size: 100% auto;
    left: 50%;
    transform: translateX(-50%);
    top: 0; }
  .arrow.east {
    background: url(../img/contents/town/arrow__east.png) no-repeat left top;
    background-size: 100% auto;
    top: 50%;
    transform: translateY(-50%);
    right: 0; }
  .arrow.south {
    background: url(../img/contents/town/arrow__south.png) no-repeat left top;
    background-size: 100% auto;
    left: 50%;
    transform: translate(-50%);
    bottom: 0; }
  .arrow.west {
    background: url(../img/contents/town/arrow__west.png) no-repeat left top;
    background-size: 100% auto;
    top: 50%;
    transform: translateY(-50%);
    left: 0; }
  .arrow.disable {
    pointer-events: none;
    opacity: .2; }

.scale {
  background: url(../img/contents/town/scale.png) no-repeat left top;
  background-size: 100% auto;
  position: fixed;
  width: 232px;
  height: 81px;
  bottom: 50px;
  right: 50px; }
  .scale .scale__btn li {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 22px auto;
    background-color: #ffd2f2;
    border-radius: 15px;
    cursor: pointer; }
    .scale .scale__btn li.scale__btn--minus {
      left: 30px;
      background-image: url(../img/contents/town/scale__minus.gif); }
    .scale .scale__btn li.scale__btn--plus {
      right: 36px;
      background-image: url(../img/contents/town/scale__plus.gif); }
    .scale .scale__btn li.disable {
      pointer-events: none;
      opacity: .2; }
  .scale .scale__mark li {
    position: absolute;
    width: 11px;
    height: 11px;
    background: #ffd2f2;
    border-radius: 6px;
    top: 34px;
    -ms-transition-duration: 0.5s;
    -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　-moz-transition-duration: 0.5s;
    -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
    .scale .scale__mark li.active {
      background: #ff80cc;
      -webkit-transform: scale(1.54);
      transform: scale(1.54); }
    .scale .scale__mark li.scale__mark--1 {
      left: 74px; }
    .scale .scale__mark li.scale__mark--2 {
      left: 107px; }
    .scale .scale__mark li.scale__mark--3 {
      left: 140px; }

.compass {
  background: url(../img/contents/town/compass.png) no-repeat left top;
  background-size: 100% auto;
  width: 65px;
  height: 65px;
  position: fixed;
  top: 50px;
  right: 50px; }
  .compass span {
    position: absolute;
    background: url(../img/contents/town/compass__needle.png) no-repeat center center;
    background-size: 100% auto;
    width: 7px;
    height: 25px;
    left: 28px;
    top: 18px;
    -webkit-animation: compassAnime 3.3s linear infinite alternate;
    animation: compassAnime 3.3s linear infinite alternate; }

.footer {
  z-index: 100;
  position: fixed;
  bottom: 10px;
  left: 30px;
  font-size: 8px;
  padding-left: 55px; }
  .footer a {
    background-size: auto 100%;
    height: 13px;
    top: -2px; }

/* town cloud
=================================================================== */
.town__container--cloud li {
  position: absolute;
  background: url(../img/contents/town/bg__object--cloud.png) no-repeat left top;
  background-size: 100% auto;
  width: 108px;
  height: 70px;
  right: -108px;
  -webkit-animation: cloudAnime3 192s linear infinite;
  animation: cloudAnime3 192s linear infinite; }
@-webkit-keyframes cloudAnime3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(-4508px, 0, 0); } }
@keyframes cloudAnime3 {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-4508px, 0, 0); } }
  .town__container--cloud li.cloud__1 {
    top: 93px;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__2 {
    top: 204px;
    -webkit-animation-delay: -32s;
    animation-delay: -32s; }
  .town__container--cloud li.cloud__3 {
    top: 70px;
    -webkit-animation-delay: -48s;
    animation-delay: -48s; }
  .town__container--cloud li.cloud__4 {
    top: 218px;
    -webkit-animation-delay: -88s;
    -webkit-animation-duration: 264s;
    animation-delay: -88s;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__5 {
    top: 78px;
    -webkit-animation-delay: -110s;
    -webkit-animation-duration: 264s;
    animation-delay: -110s;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__6 {
    top: 219px;
    -webkit-animation-delay: -96s;
    animation-delay: -96s; }
  .town__container--cloud li.cloud__7 {
    top: 120px;
    -webkit-animation-delay: -154s;
    -webkit-animation-duration: 264s;
    animation-delay: -154s;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__8 {
    top: 57px;
    -webkit-animation-delay: -176s;
    -webkit-animation-duration: 264s;
    animation-delay: -176s;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__9 {
    top: 194px;
    -webkit-animation-delay: -144s;
    animation-delay: -144s; }
  .town__container--cloud li.cloud__10 {
    top: 78px;
    -webkit-animation-delay: -160s;
    animation-delay: -160s; }
  .town__container--cloud li.cloud__11 {
    top: 166px;
    -webkit-animation-delay: -242s;
    -webkit-animation-duration: 264s;
    animation-delay: -242s;
    animation-duration: 264s; }
  .town__container--cloud li.cloud__12 {
    top: 295px;
    -webkit-animation-delay: -192s;
    animation-delay: -192s; }
  .town__container--cloud li.cloud__13 {
    top: 96px;
    -webkit-animation-delay: -208s;
    animation-delay: -208s; }

/* town cafe
=================================================================== */
.cafeMain {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 6;
  display: none; }

.cafe__container {
  width: 1356px;
  height: 877px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/town/cafe/bg.jpg) repeat-x left top;
  background-size: auto 100%;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  overflow: hidden; }
  .cafe__container .cafe__container--cloud1 {
    position: absolute;
    background: url(../img/contents/town/cafe/cloud__1.png) repeat-x left top;
    background-size: auto 100%;
    width: 2424px;
    height: 346px;
    top: 0;
    left: 0;
    z-index: 0;
    -webkit-animation: cloudAnime1 120s linear infinite;
    animation: cloudAnime1 120s linear infinite; }
@-webkit-keyframes cloudAnime1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(-1212px, 0, 0); } }
@keyframes cloudAnime1 {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-1212px, 0, 0); } }
  .cafe__container .cafe__container--cloud2 {
    position: absolute;
    background: url(../img/contents/town/cafe/cloud__2.png) repeat-x left top;
    background-size: auto 100%;
    width: 2612px;
    height: 274px;
    top: 0;
    left: 0;
    z-index: 0;
    -webkit-animation: cloudAnime2 200s linear infinite;
    animation: cloudAnime2 200s linear infinite; }
@-webkit-keyframes cloudAnime2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(-1306px, 0, 0); } }
@keyframes cloudAnime2 {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-1306px, 0, 0); } }
  .cafe__container .cafe__container--front {
    position: absolute;
    width: 100%;
    background: url(../img/contents/town/cafe/base.png) no-repeat left bottom;
    background-size: 100% auto;
    height: 607px;
    z-index: 1;
    bottom: 0;
    left: 0; }
    .cafe__container .cafe__container--front .front__cafe {
      background: url(../img/contents/town/cafe/cafe.png) no-repeat left top;
      background-size: 100% auto;
      width: 694px;
      height: 649px;
      position: absolute;
      bottom: 220px;
      right: 57px; }
    .cafe__container .cafe__container--front .front__cinnamon {
      background: url(../img/contents/town/cafe/cinnamon.png) no-repeat left top;
      background-size: 100% auto;
      width: 196px;
      height: 128px;
      position: absolute;
      top: -76px;
      left: 344px;
      -webkit-animation: cafeCinnamon 2.8s linear infinite alternate;
      animation: cafeCinnamon 2.8s linear infinite alternate; }
@-webkit-keyframes cafeCinnamon {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(0, -35px, 0); } }
@keyframes cafeCinnamon {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(0, -35px, 0); } }
    .cafe__container .cafe__container--front .front__mocha {
      background: url(../img/contents/town/cafe/mocha.png) no-repeat left top;
      background-size: 100% auto;
      width: 196px;
      height: 116px;
      position: absolute;
      top: 284px;
      left: 388px;
      -webkit-animation: twiceAnime 8s ease-out infinite;
      animation: twiceAnime 8s ease-out infinite;
      -webkit-animation-delay: -2.2s;
      animation-delay: -2.2s; }
    .cafe__container .cafe__container--front .front__horse1 {
      background: url(../img/contents/town/cafe/horse__1.png) no-repeat left top;
      background-size: 100% auto;
      width: 144px;
      height: 138px;
      position: absolute;
      top: 367px;
      left: 10px;
      -webkit-animation: cafeCarousel 3.2s linear infinite alternate;
      animation: cafeCarousel 3.2s linear infinite alternate; }
    .cafe__container .cafe__container--front .front__horse2 {
      background: url(../img/contents/town/cafe/horse__2.png) no-repeat left top;
      background-size: 100% auto;
      width: 196px;
      height: 142px;
      position: absolute;
      top: 370px;
      left: 137px;
      z-index: 2;
      -webkit-animation: cafeCarousel 3.2s linear infinite alternate;
      animation: cafeCarousel 3.2s linear infinite alternate;
      -webkit-animation-delay: -3.2s;
      animation-delay: -3.2s; }
    .cafe__container .cafe__container--front .front__horse3 {
      background: url(../img/contents/town/cafe/horse__3.png) no-repeat left top;
      background-size: 100% auto;
      width: 52px;
      height: 110px;
      position: absolute;
      top: 380px;
      left: 305px;
      -webkit-animation: cafeCarousel 3.2s linear infinite alternate;
      animation: cafeCarousel 3.2s linear infinite alternate; }
    .cafe__container .cafe__container--front .front__milk {
      background: url(../img/contents/town/cafe/milk.png) no-repeat left top;
      background-size: 100% auto;
      width: 156px;
      height: 84px;
      position: absolute;
      top: 427px;
      left: 552px;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
      -webkit-animation: rotationAnime 8.5s ease-out infinite;
      animation: rotationAnime 8.5s ease-out infinite;
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s; }
    .cafe__container .cafe__container--front .front__table {
      background: url(../img/contents/town/cafe/table.png) no-repeat left top;
      background-size: 100% auto;
      width: 172px;
      height: 138px;
      position: absolute;
      top: 461px;
      left: 483px;
      z-index: 2; }
    .cafe__container .cafe__container--front .front__chiffon {
      background: url(../img/contents/town/cafe/chiffon.png) no-repeat left top;
      background-size: 100% auto;
      width: 190px;
      height: 124px;
      position: absolute;
      top: 361px;
      left: 720px;
      -webkit-animation: onceAnime 5.2s ease-out infinite;
      animation: onceAnime 5.2s ease-out infinite; }
    .cafe__container .cafe__container--front .front__coco {
      background: url(../img/contents/town/cafe/coco.png) no-repeat left top;
      background-size: 100% auto;
      width: 144px;
      height: 92px;
      position: absolute;
      top: 440px;
      left: 909px;
      -webkit-transform-origin: bottom center;
      transform-origin: bottom center;
      -webkit-animation: rotationAnime2 8.5s ease-out infinite;
      animation: rotationAnime2 8.5s ease-out infinite;
      -webkit-animation-delay: -6.2s;
      animation-delay: -6.2s; }
    .cafe__container .cafe__container--front .front__nuts {
      background: url(../img/contents/town/cafe/nuts.png) no-repeat left top;
      background-size: 100% auto;
      width: 122px;
      height: 96px;
      position: absolute;
      top: 500px;
      left: 830px;
      -webkit-animation: twiceAnime 8s ease-out infinite;
      animation: twiceAnime 8s ease-out infinite;
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s; }
    .cafe__container .cafe__container--front .front__bike {
      background: url(../img/contents/town/cafe/bike.png) no-repeat left top;
      background-size: 100% auto;
      width: 146px;
      height: 117px;
      position: absolute;
      top: 290px;
      left: 923px; }
  .cafe__container .area__point li {
    position: absolute;
    z-index: 100;
    pointer-events: none; }
    .cafe__container .area__point li .area__point--label {
      cursor: pointer;
      pointer-events: auto;
      position: absolute;
      text-align: center;
      background: url(../img/contents/town/point__cafe.png) no-repeat center center;
      background-size: 100% auto;
      width: 160px;
      height: 148px;
      padding-top: 65px;
      display: block !important;
      opacity: 1 !important;
      transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%;
      -webkit-animation: charaAnime2d 1.7s linear infinite alternate;
      animation: charaAnime2d 1.7s linear infinite alternate; }
      .cafe__container .area__point li .area__point--label dl {
        text-shadow: -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 2px 0px #fff, -2px 0px 0px #fff, 2px 0 0px #fff, 0 -2px 0px #fff, 0 2px 0px #fff;
        font-size: 16px;
        color: #9b8c78;
        font-weight: bold;
        line-height: 1.2; }
        .cafe__container .area__point li .area__point--label dl dt {
          font-size: 14px; }
    .cafe__container .area__point li.area__point--5 {
      width: 510px;
      height: 330px;
      top: 272px;
      left: 695px; }
      .cafe__container .area__point li.area__point--5 .area__point--label {
        left: -17px;
        top: 10px; }
    .cafe__container .area__point li.area__point--6 {
      width: 141px;
      height: 131px;
      top: 548px;
      left: 922px; }
      .cafe__container .area__point li.area__point--6 .area__point--label {
        left: 40px;
        top: -90px; }
    .cafe__container .area__point li.area__point--7 {
      width: 300px;
      height: 219px;
      top: 635px;
      left: 1054px; }
      .cafe__container .area__point li.area__point--7 .area__point--label {
        left: 100px;
        top: -100px; }
    .cafe__container .area__point li.area__point--8 {
      width: 317px;
      height: 221px;
      top: 648px;
      left: 419px; }
      .cafe__container .area__point li.area__point--8 .area__point--label {
        left: 130px;
        top: -100px; }
    .cafe__container .area__point li.area__point--9 {
      width: 333px;
      height: 372px;
      top: 470px;
      left: 30px; }
      .cafe__container .area__point li.area__point--9 .area__point--label {
        left: 40px;
        top: -110px; }
    .cafe__container .area__point li.area__point--10 {
      width: 191px;
      height: 233px;
      top: 297px;
      left: 500px; }
      .cafe__container .area__point li.area__point--10 .area__point--label {
        left: 30px;
        top: -90px; }
    .cafe__container .area__point li.area__point--11 {
      width: 278px;
      height: 218px;
      top: 652px;
      left: 762px; }
      .cafe__container .area__point li.area__point--11 .area__point--label {
        left: -64px;
        top: 91px; }
    .cafe__container .area__point li.area__point--12 {
      width: 578px;
      height: 218px;
      top: 53px;
      left: 665px; }
      .cafe__container .area__point li.area__point--12 .area__point--label {
        left: 420px;
        top: 60px; }

/* town chara
=================================================================== */
.obj {
  position: absolute;
  width: auto; }
  .obj img {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom; }

.chara {
  display: none; }
  .chara:after {
    content: " ";
    display: block;
    position: absolute;
    z-index: -1;
    background: url(../img/contents/town/bg__object--shadow.png) no-repeat center center;
    background-size: 100% 100%;
    width: 62px;
    height: 13px;
    bottom: 2px;
    left: 0; }

/* town chara1
=================================================================== */
.milk__1 {
  left: 842px;
  top: 684px; }
  .milk__1.active img {
    -webkit-animation: charaAnimeM 1.7s linear infinite alternate;
    animation: charaAnimeM 1.7s linear infinite alternate; }
  .chara1 .milk__1 {
    display: block; }
  .milk__1:after {
    width: 56px;
    left: 12px; }

.chiffon__1 {
  right: 1850px;
  top: 363px; }
  .chiffon__1.active img {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate; }
  .chara1 .chiffon__1 {
    display: block; }
  .chiffon__1:after {
    height: 8px;
    left: 21px;
    width: 43px; }

.espresso__1 {
  right: 159px;
  top: 1081px; }
  .espresso__1.active img {
    -webkit-animation: charaAnimeE 1.8s linear infinite alternate;
    animation: charaAnimeE 1.8s linear infinite alternate;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
  .chara1 .espresso__1 {
    display: block; }
  .espresso__1:after {
    display: none; }

.cinnamon__1 {
  right: 439px;
  top: 1857px; }
  .cinnamon__1.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .chara1 .cinnamon__1 {
    display: block; }
  .cinnamon__1:after {
    left: 19px;
    width: 43px;
    bottom: 0; }

.cappuccino__1 {
  left: 555px;
  top: 2217px;
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s; }
  .cappuccino__1.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara1 .cappuccino__1 {
    display: block; }
  .cappuccino__1:after {
    height: 10px;
    left: 29px;
    width: 35px; }

.mocha__1 {
  left: 1975px;
  top: 2518px; }
  .mocha__1.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.7s;
    animation-delay: -1.7s; }
  .chara1 .mocha__1 {
    display: block; }
  .mocha__1:after {
    height: 10px;
    left: 10px;
    width: 32px; }

.poron__1__2 {
  left: 1335px;
  top: 1077px; }
  .poron__1__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s; }
  .chara1 .poron__1__2, .chara2 .poron__1__2 {
    display: block; }
  .poron__1__2:after {
    left: 15px;
    width: 35px;
    height: 9px; }

.corne__1__2 {
  left: 1405px;
  top: 1043px; }
  .corne__1__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -2.0s;
    animation-delay: -2.0s; }
  .chara1 .corne__1__2, .chara2 .corne__1__2 {
    display: block; }

.coco__1__3__4 {
  right: 681px;
  top: 2632px; }
  .coco__1__3__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s; }
  .chara1 .coco__1__3__4, .chara3 .coco__1__3__4, .chara4 .coco__1__3__4 {
    display: block; }
  .coco__1__3__4:after {
    left: 14px;
    width: 35px;
    height: 10px; }

.nuts__1__3__4 {
  right: 741px;
  top: 2644px; }
  .nuts__1__3__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara1 .nuts__1__3__4, .chara3 .nuts__1__3__4, .chara4 .nuts__1__3__4 {
    display: block; }
  .nuts__1__3__4:after {
    left: 3px;
    width: 35px;
    height: 10px; }

/* town chara2
=================================================================== */
.chiffon__2 {
  right: 2017px;
  top: 1918px; }
  .chiffon__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara2 .chiffon__2 {
    display: block; }
  .chiffon__2:after {
    left: 16px;
    width: 43px; }

.cinnamon__2 {
  right: 1769px;
  top: 906px; }
  .cinnamon__2.active img {
    -webkit-animation: charaAnimeC 1.8s linear infinite alternate;
    animation: charaAnimeC 1.8s linear infinite alternate; }
  .chara2 .cinnamon__2 {
    display: block; }
  .cinnamon__2:after {
    display: none; }

.coco__2 {
  right: 1882px;
  top: 1264px; }
  .coco__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
  .chara2 .coco__2 {
    display: block; }
  .coco__2:after {
    left: 18px;
    width: 26px;
    height: 8px; }

.nuts__2 {
  right: 1986px;
  top: 1265px; }
  .nuts__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .chara2 .nuts__2 {
    display: block; }
  .nuts__2:after {
    left: 12px;
    width: 26px;
    height: 8px; }

.cappuccino__2 {
  right: 1923px;
  top: 1247px; }
  .cappuccino__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .chara2 .cappuccino__2 {
    display: block; }
  .cappuccino__2:after {
    left: 5px;
    width: 42px; }

.mocha__2 {
  right: 571px;
  top: 879px;
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s; }
  .mocha__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara2 .mocha__2 {
    display: block; }
  .mocha__2:after {
    left: 16px;
    width: 39px; }

.milk__2 {
  left: 580px;
  top: 1963px; }
  .milk__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s; }
  .chara2 .milk__2 {
    display: block; }
  .milk__2:after {
    left: 9px;
    width: 33px;
    height: 8px; }

.espresso__2 {
  right: 1415px;
  top: 2117px; }
  .espresso__2.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
  .chara2 .espresso__2 {
    display: block; }
  .espresso__2:after {
    left: 11px;
    width: 41px; }

/* town chara3
=================================================================== */
.cinnamon__3 {
  left: 2112px;
  top: 1232px; }
  .cinnamon__3.active img {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate; }
  .chara3 .cinnamon__3 {
    display: block; }
  .cinnamon__3:after {
    display: none; }

.cappuccino__3 {
  left: 1481px;
  top: 1393px; }
  .cappuccino__3.active img {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate;
    -webkit-animation-delay: -1.4s;
    animation-delay: -1.4s; }
  .chara3 .cappuccino__3 {
    display: block; }
  .cappuccino__3:after {
    left: 25px;
    width: 41px;
    bottom: 0px; }

.milk__3 {
  right: 2055px;
  top: 1111px; }
  .milk__3.active img {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; }
  .chara3 .milk__3 {
    display: block; }
  .milk__3:after {
    display: none; }

.mocha__3 {
  right: 1550px;
  top: 2038px;
  z-index: 2; }
  .mocha__3.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .chara3 .mocha__3 {
    display: block; }
  .mocha__3:after {
    left: 5px;
    width: 41px; }

.chiffon__3 {
  left: 1441px;
  top: 1823px; }
  .chiffon__3.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .chara3 .chiffon__3 {
    display: block; }
  .chiffon__3:after {
    height: 10px;
    left: 23px;
    width: 35px;
    bottom: 0; }

.espresso__3 {
  left: 2081px;
  top: 2540px; }
  .espresso__3.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.3s; }
  .chara3 .espresso__3 {
    display: block; }
  .espresso__3:after {
    height: 9px;
    left: 16px;
    width: 35px; }

.poron__3__4 {
  right: 1580px;
  top: 719px; }
  .poron__3__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara3 .poron__3__4, .chara4 .poron__3__4 {
    display: block; }
  .poron__3__4:after {
    left: 14px;
    width: 42px; }

.corne__3__4 {
  right: 1645px;
  top: 722px; }
  .chara3 .corne__3__4, .chara4 .corne__3__4 {
    display: block; }
  .corne__3__4:after {
    left: 6px;
    width: 73px;
    height: 23px;
    bottom: 42px; }

/* town chara4
=================================================================== */
.chiffon__4 {
  left: 150px;
  top: 942px; }
  .chiffon__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }
  .chara4 .chiffon__4 {
    display: block; }
  .chiffon__4:after {
    width: 31px;
    left: 28px; }

.mocha__4 {
  left: 116px;
  top: 1473px; }
  .mocha__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.6s;
    animation-delay: -1.6s; }
  .chara4 .mocha__4 {
    display: block; }
  .mocha__4:after {
    width: 40px;
    left: 20px; }

.espresso__4 {
  left: 1598px;
  top: 1447px; }
  .espresso__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
  .chara4 .espresso__4 {
    display: block; }
  .espresso__4:after {
    left: 9px;
    width: 41px; }

.milk__4 {
  right: 376px;
  top: 1706px; }
  .milk__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .chara4 .milk__4 {
    display: block; }
  .milk__4:after {
    left: 1px;
    width: 34px; }

.cinnamon__4 {
  left: 1357px;
  top: 1760px; }
  .cinnamon__4.active img {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .chara4 .cinnamon__4 {
    display: block; }
  .cinnamon__4:after {
    height: 10px;
    left: 22px;
    width: 35px;
    bottom: 0; }

.cappuccino__4 {
  right: 1629px;
  top: 1950px; }
  .cappuccino__4.active img {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate; }
  .chara4 .cappuccino__4 {
    display: block; }
  .cappuccino__4:after {
    left: 3px;
    width: 43px;
    bottom: 0; }

/* town chara all
=================================================================== */
.lloromannic1 {
  left: 477px;
  top: 1328px; }
  .lloromannic1.active {
    -webkit-animation: charaAnimeL 8s linear infinite;
    animation: charaAnimeL 8s linear infinite; }

.lloromannic2 {
  left: 579px;
  top: 1331px; }
  .lloromannic2.active {
    -webkit-animation: charaAnimeL 8s linear infinite;
    animation: charaAnimeL 8s linear infinite; }

.azuki {
  left: 1563px;
  top: 1866px; }
  .azuki.active {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite; }

.shirotaro {
  left: 1483px;
  top: 2066px; }
  .shirotaro.active {
    -webkit-animation: charaAnime1 3s linear infinite;
    animation: charaAnime1 3s linear infinite;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; }

.door {
  left: 1530px;
  top: 942px;
  background: url(../img/contents/town/door--1.png) no-repeat left top;
  background-size: 100% auto; }
  .door img {
    -webkit-animation: doorAnime 1.8s linear infinite alternate;
    animation: doorAnime 1.8s linear infinite alternate; }
@keyframes doorAnime {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.light {
  left: 1668px;
  top: 1419px; }

.kakashi {
  left: 705px;
  top: 2331px; }
  .kakashi.active {
    -webkit-animation: charaAnime2 1.7s linear infinite alternate;
    animation: charaAnime2 1.7s linear infinite alternate;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom; }

.table {
  right: 2070px;
  top: 1108px;
  z-index: 1; }

.windmill1 {
  right: 1018px;
  top: 388px; }
  .windmill1.active {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: charaAnimeW 12s linear infinite;
    animation: charaAnimeW 12s linear infinite; }

.windmill1__obj {
  right: 1005px;
  top: 449px;
  z-index: 1; }

.windmill2 {
  right: 45px;
  top: 704px; }
  .windmill2.active {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: charaAnimeW 12s linear infinite;
    animation: charaAnimeW 12s linear infinite; }

.windmill2__obj {
  right: -45px;
  top: 765px;
  z-index: 1; }

.cloud__click {
  right: 1308px;
  top: 165px;
  -webkit-animation: charaAnimeCloud 5s linear infinite;
  animation: charaAnimeCloud 5s linear infinite; }

.gate {
  right: 1560px;
  top: 1829px;
  z-index: 1; }

.park {
  right: -56px;
  top: 1831px;
  z-index: 10; }

.attraction1 {
  width: 249px;
  height: 249px;
  background: url(../img/contents/town/bg__objet--attraction--2--2.png) no-repeat left top;
  background-size: 100% auto;
  position: absolute;
  top: 1625px;
  right: 39px; }
  .attraction1.active {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: charaAnimeW 12s linear infinite;
    animation: charaAnimeW 12s linear infinite;
    -webkit-animation-duration: 24s;
    animation-duration: 24s; }
    .attraction1.active .attraction1__list li {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-animation: charaAnimeW2 24s linear infinite;
      animation: charaAnimeW2 24s linear infinite; }
  .attraction1 .attraction1__list li.list__1 {
    left: 92px;
    top: -42px; }
  .attraction1 .attraction1__list li.list__2 {
    left: 185px;
    top: -4px; }
  .attraction1 .attraction1__list li.list__3 {
    left: 227px;
    top: 85px; }
  .attraction1 .attraction1__list li.list__4 {
    left: 185px;
    top: 185px; }
  .attraction1 .attraction1__list li.list__5 {
    left: 92px;
    top: 223px; }
  .attraction1 .attraction1__list li.list__6 {
    left: -2px;
    top: 185px; }
  .attraction1 .attraction1__list li.list__7 {
    left: -41px;
    top: 85px; }
  .attraction1 .attraction1__list li.list__8 {
    left: -2px;
    top: -4px; }

.attraction1__obj {
  right: 96px;
  top: 1714px;
  z-index: 1; }

.attraction2__1 {
  right: 13px;
  top: 1940px; }
  .attraction2__1.active {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-animation: charaAnimeA2 4s linear infinite alternate;
    animation: charaAnimeA2 4s linear infinite alternate; }

.attraction2__image {
  right: 9px;
  top: 1904px;
  z-index: 1; }

.attraction2__2 {
  right: 13px;
  top: 1940px;
  z-index: 2; }
  .attraction2__2.active {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-animation: charaAnimeA2 4s linear infinite alternate;
    animation: charaAnimeA2 4s linear infinite alternate;
    -webkit-animation-delay: -4s;
    animation-delay: -4s; }

.attraction2__obj {
  right: 25px;
  top: 1907px;
  z-index: 3; }

.sign {
  left: 2315px;
  top: 2300px; }

/* opening
=================================================================== */
.opening {
  width: 1000px;
  height: 695px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 50; }
  .opening .opening__cloud li {
    position: absolute; }
    .opening .opening__cloud li.opening__cloud--1 {
      background: url(../img/contents/town/opening__cloud--1.png) no-repeat center center;
      background-size: 100% auto;
      width: 255px;
      height: 192px;
      top: 10px;
      left: 40px; }
    .opening .opening__cloud li.opening__cloud--2 {
      background: url(../img/contents/town/opening__cloud--2.png) no-repeat center center;
      background-size: 100% auto;
      width: 1062px;
      height: 449px;
      top: 0;
      right: -100px; }
    .opening .opening__cloud li.opening__cloud--3 {
      background: url(../img/contents/town/opening__cloud--3.png) no-repeat center center;
      background-size: 100% auto;
      width: 819px;
      height: 347px;
      top: 240px;
      left: -100px; }
    .opening .opening__cloud li.opening__cloud--4 {
      background: url(../img/contents/town/opening__cloud--3.png) no-repeat center center;
      background-size: 100% auto;
      width: 819px;
      height: 347px;
      top: 300px;
      right: -100px; }
    .opening .opening__cloud li.opening__cloud--5 {
      background: url(../img/contents/town/opening__cloud--2.png) no-repeat center center;
      background-size: 100% auto;
      width: 1062px;
      height: 449px;
      top: 500px;
      left: -100px; }
  .opening .opening__chara {
    width: 745px;
    height: 330px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -165px 0 0 -372px;
    display: none;
    z-index: 52; }
    .opening .opening__chara .opening__chara--balloon {
      background: url(../img/contents/town/opening__balloon.png) no-repeat center center;
      background-size: 100% auto;
      width: 373px;
      height: 183px;
      position: absolute;
      left: 20px;
      top: 10px;
      display: none;
      transform-origin: 80% 100%;
      -webkit-transform-origin: 80% 100%; }
    .opening .opening__chara .opening__chara--cn {
      background: url(../img/contents/town/opening__cn.png) no-repeat center top;
      background-size: 100% auto;
      width: 392px;
      height: 300px;
      position: absolute;
      right: 10px;
      bottom: -30px; }
      .opening .opening__chara .opening__chara--cn.active {
        background-position: center -300px; }

.howto {
  background: url(../img/contents/town/howto--pc2.png) no-repeat;
  width: 587px;
  height: 476px;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 49;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none; }

/* town lloromannic
=================================================================== */
.lloroMain {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 6;
  display: none; }
  .lloroMain .lloro__movie {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11; }
    .lloroMain .lloro__movie #video-area {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0; }
    .lloroMain .lloro__movie #canvas-area {
      height: 100%;
      overflow: hidden;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1; }
      .lloroMain .lloro__movie #canvas-area canvas {
        height: 100%;
        object-fit: cover;
        object-position: center center;
        width: 100%; }
    .lloroMain .lloro__movie video {
      height: auto;
      left: 50%;
      min-height: 100%;
      min-width: 100%;
      position: fixed;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      width: auto; }
  .lloroMain .lloro--skip {
    position: fixed;
    left: 50%;
    bottom: 30px;
    background: url(../img/contents/town/lloromannic/btn--skip.png) no-repeat left top;
    background-size: 100% auto;
    width: 94px;
    height: 36px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    z-index: 12;
    cursor: pointer;
    -ms-transition-duration: 0.5s;
    -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　-moz-transition-duration: 0.5s;
    -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
    .lloroMain .lloro--skip:hover {
      opacity: .5; }
  .lloroMain .lloro--sound {
    position: fixed;
    top: 30px;
    right: 30px;
    background: url(../img/contents/town/lloromannic/btn--sound.png) no-repeat left top #000;
    background-size: 100% auto;
    width: 65px;
    height: 65px;
    z-index: 12;
    cursor: pointer;
    border-radius: 33px;
    border: 3px solid #fff;
    -ms-transition-duration: 0.5s;
    -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　-moz-transition-duration: 0.5s;
    -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    　transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
    .lloroMain .lloro--sound:hover {
      opacity: .5; }
    .lloroMain .lloro--sound.active {
      background-position: 0 100%; }

.lloro__container {
  width: 1426px;
  height: 1044px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/town/lloromannic/base.jpg) no-repeat left top;
  background-size: 100% auto;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  overflow: hidden; }
  .lloro__container .lloro__bat {
    position: absolute;
    z-index: 0;
    width: 110px;
    height: 50px; }
    .lloro__container .lloro__bat span {
      display: block;
      height: 100%;
      background: url(../img/contents/town/lloromannic/bat.png) no-repeat left top;
      background-size: 100% auto; }
    .lloro__container .lloro__bat.bat--1 {
      left: 78px;
      top: 160px;
      -webkit-animation: lloroBat 5s linear infinite;
      animation: lloroBat 5s linear infinite; }
    .lloro__container .lloro__bat.bat--2 {
      left: 793px;
      top: 84px;
      -webkit-animation: lloroBat 5s linear infinite;
      animation: lloroBat 5s linear infinite;
      -webkit-animation-delay: -1s;
      animation-delay: -1s; }
      .lloro__container .lloro__bat.bat--2 span {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg); }
    .lloro__container .lloro__bat.bat--3 {
      right: 316px;
      top: 263px;
      -webkit-animation: lloroBat 5s linear infinite;
      animation: lloroBat 5s linear infinite;
      -webkit-animation-delay: -3.1s;
      animation-delay: -3.1s; }
    .lloro__container .lloro__bat.bat--4 {
      right: 98px;
      top: 120px;
      -webkit-animation: lloroBat 5s linear infinite;
      animation: lloroBat 5s linear infinite;
      -webkit-animation-delay: -2.6s;
      animation-delay: -2.6s; }
      .lloro__container .lloro__bat.bat--4 span {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg); }
  .lloro__container .lloro__container--chara {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/contents/town/lloromannic/cover.png) no-repeat left top;
    background-size: 100% auto;
    left: 0;
    top: 0; }
    .lloro__container .lloro__container--chara .lloro__cappuccino {
      background: url(../img/contents/town/lloromannic/cappuccino.png) no-repeat left top;
      background-size: 100% auto;
      width: 159px;
      height: 112px;
      position: absolute;
      top: 310px;
      left: 147px;
      z-index: 0;
      opacity: 0;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom; }
    .lloro__container .lloro__container--chara .lloro__berry {
      background: url(../img/contents/town/lloromannic/berry.png) no-repeat left top;
      background-size: 100% auto;
      width: 131px;
      height: 167px;
      position: absolute;
      left: 365px;
      bottom: 247px;
      z-index: 3;
      -webkit-animation: onceAnime 5.2s ease-out infinite;
      animation: onceAnime 5.2s ease-out infinite;
      -webkit-animation-delay: -2.1s;
      animation-delay: -2.1s; }
    .lloro__container .lloro__container--chara .lloro__berry--shadow {
      width: 124px;
      height: 53px;
      position: absolute;
      left: 371px;
      bottom: 198px;
      -webkit-transform-origin: 70% top;
      transform-origin: 70% top;
      -webkit-animation: shadowAnime2 4s linear infinite alternate;
      animation: shadowAnime2 4s linear infinite alternate; }
@-webkit-keyframes shadowAnime2 {
  0% {
    -webkit-transform: scale3d(1, 1, 1); }
  100% {
    -webkit-transform: scale3d(1.4, 1.4, 1); } }
@keyframes shadowAnime2 {
  0% {
    transform: scale3d(1, 1, 1); }
  100% {
    transform: scale3d(1.4, 1.4, 1); } }
      .lloro__container .lloro__container--chara .lloro__berry--shadow div {
        background: url(../img/contents/town/lloromannic/berry__shadow.png) no-repeat left top;
        background-size: 100% auto;
        width: 124px;
        height: 53px;
        left: 0;
        bottom: 0;
        -webkit-transform-origin: 70% top;
        transform-origin: 70% top;
        -webkit-animation: shadowAnime 2.3s linear infinite alternate;
        animation: shadowAnime 2.3s linear infinite alternate; }
@-webkit-keyframes shadowAnime {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg); } }
@keyframes shadowAnime {
  0% {
    transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    transform: rotate3d(0, 0, 1, 5deg); } }
    .lloro__container .lloro__container--chara .lloro__cinnamon {
      overflow: hidden;
      position: absolute;
      width: 244px;
      height: 162px;
      left: 694px;
      top: 364px;
      -webkit-animation: lloroCinnamon 2.8s linear infinite alternate;
      animation: lloroCinnamon 2.8s linear infinite alternate; }
@-webkit-keyframes lloroCinnamon {
  0% {
    -webkit-transform: translate3d(0, -5px, 0); }
  100% {
    -webkit-transform: translate3d(0, 5px, 0); } }
@keyframes lloroCinnamon {
  0% {
    transform: translate3d(0, -5px, 0); }
  100% {
    transform: translate3d(0, 5px, 0); } }
      .lloro__container .lloro__container--chara .lloro__cinnamon div {
        background: url(../img/contents/town/lloromannic/cinnamon.png) no-repeat left top;
        background-size: 100% auto;
        width: 244px;
        height: 162px;
        position: absolute;
        left: -40px;
        top: 0;
        -webkit-animation: lloroMirror 4.5s linear infinite alternate;
        animation: lloroMirror 4.5s linear infinite alternate; }
@-webkit-keyframes lloroMirror {
  0% {
    -webkit-transform: translate3d(10px, 0, 0); }
  100% {
    -webkit-transform: translate3d(-60px, 0, 0); } }
@keyframes lloroMirror {
  0% {
    transform: translate3d(10px, 0, 0); }
  100% {
    transform: translate3d(-60px, 0, 0); } }
    .lloro__container .lloro__container--chara .lloro__chiffon {
      background: url(../img/contents/town/lloromannic/chiffon.png) no-repeat left top;
      background-size: 100% auto;
      width: 127px;
      height: 138px;
      position: absolute;
      left: 810px;
      top: 507px;
      transform-origin: 20% center;
      -webkit-animation: lloroChiffon 2.2s linear infinite alternate;
      animation: lloroChiffon 2.2s linear infinite alternate; }
    .lloro__container .lloro__container--chara .lloro__mocha {
      background: url(../img/contents/town/lloromannic/mocha.png) no-repeat left top;
      background-size: 100% auto;
      width: 237px;
      height: 133px;
      position: absolute;
      bottom: 220px;
      left: 654px;
      z-index: 1;
      -webkit-animation: twiceAnime 8s ease-out infinite;
      animation: twiceAnime 8s ease-out infinite;
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s; }
    .lloro__container .lloro__container--chara .lloro__milk {
      background: url(../img/contents/town/lloromannic/milk.png) no-repeat left top;
      background-size: 100% auto;
      width: 186px;
      height: 90px;
      position: absolute;
      bottom: 274px;
      left: 555px;
      z-index: 0;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation: rotationAnime 8.5s ease-out infinite;
      animation: rotationAnime 8.5s ease-out infinite;
      -webkit-animation-delay: -3.2s;
      animation-delay: -3.2s; }
    .lloro__container .lloro__container--chara .lloro__cherry {
      background: url(../img/contents/town/lloromannic/cherry.png) no-repeat left top;
      background-size: 100% auto;
      width: 197px;
      height: 160px;
      position: absolute;
      top: 378px;
      right: 238px;
      z-index: 0;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation: lloroCherry 6s linear infinite;
      animation: lloroCherry 6s linear infinite; }
    .lloro__container .lloro__container--chara .lloro__espresso {
      background: url(../img/contents/town/lloromannic/espresso.png) no-repeat left top;
      background-size: 100% auto;
      width: 168px;
      height: 124px;
      position: absolute;
      top: 474px;
      right: 143px;
      z-index: 1;
      -webkit-animation: onceAnime 5.2s ease-out infinite;
      animation: onceAnime 5.2s ease-out infinite; }
    .lloro__container .lloro__container--chara .lloro__pole--left, .lloro__container .lloro__container--chara .lloro__pole--right {
      width: 42px;
      height: 240px;
      position: absolute;
      z-index: 2; }
    .lloro__container .lloro__container--chara .lloro__pole--left {
      background: url(../img/contents/town/lloromannic/pole__left.png) no-repeat left top;
      background-size: 100% auto;
      left: 370px;
      top: 480px; }
    .lloro__container .lloro__container--chara .lloro__pole--right {
      background: url(../img/contents/town/lloromannic/pole__right.png) no-repeat left top;
      background-size: 100% auto;
      right: 123px;
      top: 480px; }
  .lloro__container .area__point li {
    position: absolute;
    z-index: 100;
    pointer-events: none; }
    .lloro__container .area__point li .area__point--label {
      cursor: pointer;
      pointer-events: auto;
      position: absolute;
      text-align: center;
      background: url(../img/contents/town/point__lloro.png) no-repeat center center;
      background-size: 100% auto;
      width: 208px;
      height: 143px;
      padding-top: 69px;
      display: block !important;
      opacity: 1 !important;
      transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%;
      -webkit-animation: charaAnime2d 1.7s linear infinite alternate;
      animation: charaAnime2d 1.7s linear infinite alternate; }
      .lloro__container .area__point li .area__point--label dl {
        text-shadow: -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 2px 0px #fff, -2px 0px 0px #fff, 2px 0 0px #fff, 0 -2px 0px #fff, 0 2px 0px #fff;
        font-size: 15px;
        color: #9b8c78;
        font-weight: bold;
        line-height: 1.2; }
        .lloro__container .area__point li .area__point--label dl dt {
          font-size: 14px; }
    .lloro__container .area__point li.area__point--15 {
      width: 1300px;
      height: 250px;
      top: 38px;
      left: 55px; }
      .lloro__container .area__point li.area__point--15 .area__point--label {
        left: 320px;
        top: 5px; }
    .lloro__container .area__point li.area__point--13 {
      width: 135px;
      height: 146px;
      top: 384px;
      left: 430px; }
      .lloro__container .area__point li.area__point--13 .area__point--label {
        left: -40px;
        top: -130px; }
    .lloro__container .area__point li.area__point--14 {
      width: 131px;
      height: 154px;
      top: 378px;
      left: 873px; }
      .lloro__container .area__point li.area__point--14 .area__point--label {
        left: -42px;
        top: -122px; }
    .lloro__container .area__point li.area__point--16 {
      width: 174px;
      height: 214px;
      top: 355px;
      left: 629px; }
      .lloro__container .area__point li.area__point--16 .area__point--label {
        left: -11px;
        top: -130px; }
    .lloro__container .area__point li.area__point--17 {
      width: 154px;
      height: 213px;
      top: 644px;
      left: 355px; }
      .lloro__container .area__point li.area__point--17 .area__point--label {
        left: -19px;
        top: -152px; }
    .lloro__container .area__point li.area__point--18 {
      width: 159px;
      height: 152px;
      top: 379px;
      left: 1006px; }
      .lloro__container .area__point li.area__point--18 .area__point--label {
        left: 20px;
        top: -130px; }

/* town kingdom
=================================================================== */
.kingdomMain {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 6;
  display: none; }

.kingdom__container {
  width: 1426px;
  height: 1044px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/town/kingdom/bg.jpg) no-repeat left top;
  background-size: 100% auto;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  overflow: hidden; }
  .kingdom__container .kingdom__cloud li {
    background: url(../img/contents/town/kingdom/cloud--1.png) no-repeat left top;
    background-size: 100% auto;
    width: 174px;
    height: 102px;
    right: -174px;
    position: absolute;
    z-index: 0;
    -webkit-animation: kingdomCloud 140s linear infinite;
    animation: kingdomCloud 140s linear infinite; }
@-webkit-keyframes kingdomCloud {
  0% {
    -webkit-transform: translate3d(0, 0, 0); }
  100% {
    -webkit-transform: translate3d(-1602px, 0, 0); } }
@keyframes kingdomCloud {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-1602px, 0, 0); } }
    .kingdom__container .kingdom__cloud li.small {
      background: url(../img/contents/town/kingdom/cloud--2.png) no-repeat left top;
      background-size: 100% auto;
      width: 106px;
      height: 75px;
      right: -106px; }
    .kingdom__container .kingdom__cloud li.kingdom__cloud--1 {
      top: 237px;
      -webkit-animation-delay: -120s;
      animation-delay: -120s; }
    .kingdom__container .kingdom__cloud li.kingdom__cloud--2 {
      top: 121px;
      -webkit-animation-delay: -70s;
      animation-delay: -70s; }
    .kingdom__container .kingdom__cloud li.kingdom__cloud--3 {
      top: 171px;
      -webkit-animation-delay: -25s;
      animation-delay: -25s; }
  .kingdom__container .kingdom__castle {
    background: url(../img/contents/town/kingdom/castle.png) no-repeat left top;
    background-size: 100% auto;
    width: 470px;
    height: 350px;
    position: absolute;
    top: 121px;
    left: 179px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    z-index: 1; }
  .kingdom__container .kingdom__milk {
    background: url(../img/contents/town/kingdom/milk.png) no-repeat left top;
    background-size: 100% auto;
    width: 139px;
    height: 93px;
    position: absolute;
    top: 474px;
    left: 367px;
    z-index: 2;
    -webkit-animation: onceAnime 5.2s ease-out infinite;
    animation: onceAnime 5.2s ease-out infinite;
    -webkit-animation-delay: -3.1s;
    animation-delay: -3.1s; }
  .kingdom__container .kingdom__cappuccino {
    background: url(../img/contents/town/kingdom/cappuccino.png) no-repeat left top;
    background-size: 100% auto;
    width: 246px;
    height: 192px;
    position: absolute;
    left: 180px;
    top: 621px;
    z-index: 1;
    -webkit-animation: twiceAnime 8s ease-out infinite;
    animation: twiceAnime 8s ease-out infinite; }
  .kingdom__container .kingdom__chiffon {
    background: url(../img/contents/town/kingdom/chiffon.png) no-repeat left top;
    background-size: 100% auto;
    width: 283px;
    height: 201px;
    position: absolute;
    left: 391px;
    bottom: 38px;
    -webkit-transform-origin: 60% 90%;
    transform-origin: 60% 90%;
    -webkit-animation: lloroCherry 6s linear infinite;
    animation: lloroCherry 6s linear infinite; }
  .kingdom__container .kingdom__cinnamon {
    background: url(../img/contents/town/kingdom/cinnamon.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    width: 279px;
    height: 222px;
    left: 812px;
    top: 154px;
    -webkit-animation: kingdomCinnamon 2.8s linear infinite alternate;
    animation: kingdomCinnamon 2.8s linear infinite alternate; }
  .kingdom__container .kingdom__mocha {
    background: url(../img/contents/town/kingdom/mocha.png) no-repeat left top;
    background-size: 100% auto;
    width: 195px;
    height: 124px;
    position: absolute;
    right: 40px;
    top: 407px;
    -webkit-animation: twiceAnime 8s ease-out infinite;
    animation: twiceAnime 8s ease-out infinite;
    -webkit-animation-delay: -3.2s;
    animation-delay: -3.2s; }
  .kingdom__container .kingdom__door {
    width: 362px;
    height: 400px;
    position: absolute;
    top: 480px;
    right: 104px; }
    .kingdom__container .kingdom__door .kingdom__door--light {
      background: url(../img/contents/town/kingdom/light.png) no-repeat left top;
      background-size: 100% auto;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-animation: lightAnime 2.4s linear infinite;
      animation: lightAnime 2.4s linear infinite; }
@-webkit-keyframes lightAnime {
  0% {
    -webkit-transform: scale3d(0.2, 0.2, 1);
    opacity: 1; }
  80% {
    -webkit-transform: scale3d(0.9, 0.9, 1);
    opacity: 1; }
  100% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    opacity: 0; } }
@keyframes lightAnime {
  0% {
    transform: scale3d(0.2, 0.2, 1);
    opacity: 1; }
  80% {
    transform: scale3d(0.9, 0.9, 1);
    opacity: 1; }
  100% {
    transform: scale3d(1.1, 1.1, 1);
    opacity: 0; } }
    .kingdom__container .kingdom__door .kingdom__door--door {
      background: url(../img/contents/town/kingdom/door.png) no-repeat left top;
      background-size: 100% auto;
      width: 244px;
      height: 296px;
      position: absolute;
      left: 53px;
      top: 66px; }
    .kingdom__container .kingdom__door .kingdom__door--inner {
      position: absolute;
      left: 62px;
      top: 73px; }
      .kingdom__container .kingdom__door .kingdom__door--inner #inner path {
        opacity: 0.7;
        fill: #fff; }
    .kingdom__container .kingdom__door .kingdom__door--kirakira li {
      position: absolute;
      width: 22px;
      -webkit-transform-origin: center center;
      transform-origin: center center;
      transform-origin: 20% center;
      -webkit-animation: kirakiraAnime 1.2s linear infinite alternate;
      animation: kirakiraAnime 1.2s linear infinite alternate; }
@-webkit-keyframes kirakiraAnime {
  0% {
    -webkit-transform: scale3d(0.2, 0.2, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1); } }
@keyframes kirakiraAnime {
  0% {
    transform: scale3d(0.2, 0.2, 1); }
  100% {
    transform: scale3d(1, 1, 1); } }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li img {
        width: 100%;
        height: 100%;
        display: block; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--1 {
        left: 126px;
        top: 87px; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--2 {
        left: 164px;
        top: 110px;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--3 {
        left: 191px;
        top: 83px;
        -webkit-animation-delay: -1.3s;
        animation-delay: -1.3s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--4 {
        left: 100px;
        top: 140px;
        -webkit-animation-delay: -1.7s;
        animation-delay: -1.7s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--5 {
        left: 217px;
        top: 132px; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--6 {
        left: 133px;
        top: 173px;
        -webkit-animation-delay: -1.7;
        animation-delay: -1.7; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--7 {
        left: 230px;
        top: 190px;
        -webkit-animation-delay: -1.3s;
        animation-delay: -1.3s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--8 {
        left: 213px;
        top: 216px;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--9 {
        left: 139px;
        top: 230px;
        -webkit-animation-delay: -1.3s;
        animation-delay: -1.3s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--10 {
        left: 178px;
        top: 250px;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--11 {
        left: 223px;
        top: 270px; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--12 {
        left: 94px;
        top: 253px;
        -webkit-animation-delay: -1.7s;
        animation-delay: -1.7s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--13 {
        left: 120px;
        top: 291px; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--14 {
        left: 193px;
        top: 300px;
        -webkit-animation-delay: -1.7s;
        animation-delay: -1.7s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--15 {
        left: 150px;
        top: 316px;
        -webkit-animation-delay: -1.3s;
        animation-delay: -1.3s; }
      .kingdom__container .kingdom__door .kingdom__door--kirakira li.kirakira--16 {
        left: 71px;
        top: 303px;
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s; }
  .kingdom__container .kingdom__espresso {
    background: url(../img/contents/town/kingdom/espresso.png) no-repeat left top;
    background-size: 100% auto;
    width: 191px;
    height: 164px;
    position: absolute;
    bottom: 68px;
    right: 468px;
    z-index: 1;
    -webkit-animation: onceAnime 5.2s ease-out infinite;
    animation: onceAnime 5.2s ease-out infinite; }
  .kingdom__container .kingdom__butterfly--1 {
    width: 49px;
    height: 37px;
    position: absolute;
    z-index: 2;
    background: url(../img/contents/town/kingdom/butterfly--1.png) no-repeat left top;
    background-size: 100% auto;
    left: 165px;
    top: 749px; }
  .kingdom__container .kingdom__butterfly--2 {
    width: 39px;
    height: 35px;
    position: absolute;
    z-index: 2;
    background: url(../img/contents/town/kingdom/butterfly--2.png) no-repeat left top;
    background-size: 100% auto;
    left: 345px;
    top: 635px; }
  .kingdom__container .kingdom__flowers--1 {
    width: 625px;
    height: 332px;
    position: absolute;
    z-index: 2;
    background: url(../img/contents/town/kingdom/flowers--1.png) no-repeat left top;
    background-size: 100% auto;
    right: 15px;
    bottom: -56px; }
  .kingdom__container .kingdom__flowers--2 {
    width: 110px;
    height: 85px;
    position: absolute;
    z-index: 2;
    background: url(../img/contents/town/kingdom/flowers--2.png) no-repeat left top;
    background-size: 100% auto;
    right: 49px;
    top: 508px; }
  .kingdom__container .area__point li {
    position: absolute;
    z-index: 100;
    pointer-events: none; }
    .kingdom__container .area__point li .area__point--label {
      pointer-events: auto;
      cursor: pointer;
      position: absolute;
      text-align: center;
      background: url(../img/contents/town/point__house.png) no-repeat center center;
      background-size: 100% auto;
      width: 208px;
      height: 143px;
      padding-top: 69px;
      display: block !important;
      opacity: 1 !important;
      transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform-origin: 50% 100%;
      -webkit-transform-origin: 50% 100%;
      -webkit-animation: charaAnime2d 1.7s linear infinite alternate;
      animation: charaAnime2d 1.7s linear infinite alternate; }
      .kingdom__container .area__point li .area__point--label dl {
        text-shadow: -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 2px 0px #fff, -2px 0px 0px #fff, 2px 0 0px #fff, 0 -2px 0px #fff, 0 2px 0px #fff;
        font-size: 15px;
        color: #9b8c78;
        font-weight: bold;
        line-height: 1.2; }
        .kingdom__container .area__point li .area__point--label dl dt {
          font-size: 14px; }
    .kingdom__container .area__point li.area__point--19 {
      width: 251px;
      height: 175px;
      top: 638px;
      left: 178px;
      z-index: 101; }
      .kingdom__container .area__point li.area__point--19 .area__point--label {
        left: 10px;
        top: -110px; }
    .kingdom__container .area__point li.area__point--20 {
      width: 282px;
      height: 187px;
      top: 812px;
      left: 391px; }
      .kingdom__container .area__point li.area__point--20 .area__point--label {
        left: 20px;
        top: -116px; }
    .kingdom__container .area__point li.area__point--21 {
      width: 473px;
      height: 405px;
      top: 165px;
      left: 177px; }
      .kingdom__container .area__point li.area__point--21 .area__point--label {
        left: 160px;
        top: 155px; }
    .kingdom__container .area__point li.area__point--22--1 {
      width: 194px;
      height: 136px;
      top: 403px;
      left: 1191px; }
      .kingdom__container .area__point li.area__point--22--1 .area__point--label {
        left: -5px;
        top: -120px; }
    .kingdom__container .area__point li.area__point--22--2 {
      width: 205px;
      height: 172px;
      top: 806px;
      left: 760px; }
      .kingdom__container .area__point li.area__point--22--2 .area__point--label {
        left: 5px;
        top: -110px; }
    .kingdom__container .area__point li.area__point--23 {
      width: 293px;
      height: 217px;
      top: 142px;
      left: 805px; }
      .kingdom__container .area__point li.area__point--23 .area__point--label {
        left: -84px;
        top: -70px; }
    .kingdom__container .area__point li.area__point--24 {
      width: 243px;
      height: 267px;
      top: 561px;
      left: 1015px; }
      .kingdom__container .area__point li.area__point--24 .area__point--label {
        left: -3px;
        top: -100px; }