@media only screen and (max-width: 767px) {
  @-webkit-keyframes cloudAnime3 {
    0% {
      -webkit-transform: translate3d(0, 0, 0); }
    100% {
      -webkit-transform: translate3d(-1803px, 0, 0); } }
  @keyframes cloudAnime3 {
    0% {
      transform: translate3d(0, 0, 0); }
    100% {
      transform: translate3d(-1803px, 0, 0); } }
  @-webkit-keyframes charaAnime1 {
    0% {
      -webkit-transform: translate3d(0, 0, 0); }
    10% {
      -webkit-transform: translate3d(0, -6px, 0); }
    20% {
      -webkit-transform: translate3d(0, 0, 0); }
    30% {
      -webkit-transform: translate3d(0, -6px, 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, -6px, 0); }
    20% {
      transform: translate3d(0, 0, 0); }
    30% {
      transform: translate3d(0, -6px, 0); }
    40% {
      transform: translate3d(0, 0, 0); }
    100% {
      transform: translate3d(0, 0, 0); } }
  @-webkit-keyframes charaAnime2 {
    0% {
      -webkit-transform: rotate(-4deg); }
    100% {
      -webkit-transform: rotate(4deg); } }
  @keyframes charaAnime2 {
    0% {
      transform: rotate(-4deg); }
    100% {
      transform: rotate(4deg); } }
  @keyframes charaAnime2d {
    0% {
      transform: rotate(-4deg) scale(1.2); }
    100% {
      transform: rotate(4deg) scale(1.2); } }
  @-webkit-keyframes charaAnimeM {
    0% {
      -webkit-transform: rotate(-7deg);
      -webkit-transform-origin: 5px 28px; }
    50% {
      -webkit-transform-origin: center bottom; }
    100% {
      -webkit-transform: rotate(7deg);
      -webkit-transform-origin: 24px 26px; } }
  @keyframes charaAnimeM {
    0% {
      transform: rotate(-7deg);
      transform-origin: 5px 28px; }
    50% {
      transform-origin: center bottom; }
    100% {
      transform: rotate(7deg);
      transform-origin: 24px 26px; } }
  @-webkit-keyframes charaAnimeC {
    0% {
      -webkit-transform: translate3d(0, 8px, 0); }
    100% {
      -webkit-transform: translate3d(0, -8px, 0); } }
  @keyframes charaAnimeC {
    0% {
      transform: translate3d(0, 8px, 0); }
    100% {
      transform: translate3d(0, -8px, 0); } }
  @-webkit-keyframes charaAnimeE {
    0% {
      -webkit-transform: translate3d(8px, 0, 0); }
    100% {
      -webkit-transform: translate3d(-8px, 0, 0); } }
  @keyframes charaAnimeE {
    0% {
      transform: translate3d(8px, 0, 0); }
    100% {
      transform: translate3d(-8px, 0, 0); } }
  @-webkit-keyframes charaAnimeL {
    0% {
      -webkit-transform: translate3d(0, 0, 0); }
    10% {
      -webkit-transform: translate3d(0, -40px, 0); }
    12% {
      -webkit-transform: translate3d(0, -32px, 0); }
    14% {
      -webkit-transform: translate3d(0, -40px, 0); }
    16% {
      -webkit-transform: translate3d(0, -32px, 0); }
    18% {
      -webkit-transform: translate3d(0, -40px, 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, -40px, 0); }
    25% {
      transform: translate3d(0, -32px, 0); }
    30% {
      transform: translate3d(0, -40px, 0); }
    35% {
      transform: translate3d(0, -32px, 0); }
    40% {
      transform: translate3d(0, -40px, 0); }
    60% {
      transform: translate3d(0, 0, 0); }
    100% {
      transform: translate3d(0, 0, 0); } }
  @keyframes charaAnimeCloud {
    0% {
      transform: translate3d(0, 13px, 0) scale(0.8); }
    50% {
      transform: translate3d(0, -13px, 0) scale(1); }
    100% {
      transform: translate3d(0, 13px, 0) scale(0.8); } }
  @-webkit-keyframes charaAnimeW {
    0% {
      -webkit-transform: rotate(0deg); }
    100% {
      -webkit-transform: rotate(360deg); } }
  @keyframes charaAnimeW {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(360deg); } }
  @-webkit-keyframes charaAnimeW2 {
    0% {
      -webkit-transform: rotate(0deg); }
    100% {
      -webkit-transform: rotate(-360deg); } }
  @keyframes charaAnimeW2 {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(-360deg); } }
  @-webkit-keyframes charaAnimeA2 {
    0% {
      -webkit-transform: rotate(40deg); }
    100% {
      -webkit-transform: rotate(-40deg); } }
  @keyframes charaAnimeA2 {
    0% {
      transform: rotate(40deg); }
    100% {
      transform: rotate(-40deg); } }
  @-webkit-keyframes compassAnime {
    0% {
      -webkit-transform: rotate(0deg); }
    25% {
      -webkit-transform: rotate(10deg); }
    75% {
      -webkit-transform: rotate(-10deg); }
    100% {
      -webkit-transform: rotate(0deg); } }
  @keyframes compassAnime {
    0% {
      transform: rotate(0deg); }
    25% {
      transform: rotate(10deg); }
    75% {
      transform: rotate(-10deg); }
    100% {
      transform: rotate(0deg); } }
  /* others
  =================================================================== */
  #ua.portrait {
    display: block; }

  .opening .opening__chara {
    width: 345px;
    margin: -165px 0 0 -162px; }
    .opening .opening__chara .opening__chara--balloon {
      background: url(../img/contents/town/opening__balloon.png) no-repeat center center;
      background-size: 100% auto;
      width: 226px;
      height: 134px;
      left: -6px;
      top: -3px; }
    .opening .opening__chara .opening__chara--cn {
      width: 247px;
      height: 188px;
      right: 43px;
      bottom: 38px; }
      .opening .opening__chara .opening__chara--cn.active {
        background-position: center -188px; }

  .howto {
    background: url(../img/contents/town/howto--sp2.png) no-repeat;
    background-size: 100% auto;
    width: 285px;
    height: 351px; }

  .cursor {
    display: none !important; }

  .cafeMain, .lloroMain, .kingdomMain {
    overflow: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; }

  .lloroMain .lloro--skip {
    width: 64px; }

  .lloroMain .lloro--sound {
    width: 44px;
    height: 44px;
    border-radius: 22px; }

  /* town
  =================================================================== */
  .btn__back {
    width: 87px;
    height: 72px;
    bottom: 12px; }

  .town__container {
    width: 1760px;
    height: 1224px;
    overflow: hidden; }
    .town__container .town__container--area .area__point li .area__point--label dl {
      text-shadow: -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff, -1px 0px 0px #fff, 1px 0 0px #fff, 0 -1px 0px #fff, 0 1px 0px #fff;
      font-size: 8px; }
      .town__container .town__container--area .area__point li .area__point--label dl dt {
        font-size: 7px; }
    .town__container .town__container--area.house .area__point li .area__point--label {
      width: 85px;
      height: 61px;
      padding-top: 31px; }
    .town__container .town__container--area.house .area__point li.area__point--1 {
      width: 111px;
      height: 111px;
      top: 159px;
      left: 135px; }
      .town__container .town__container--area.house .area__point li.area__point--1 .area__point--label {
        left: -8px;
        top: -16px; }
    .town__container .town__container--area.house .area__point li.area__point--2 {
      width: 171px;
      height: 92px;
      top: 370px;
      left: 487px; }
      .town__container .town__container--area.house .area__point li.area__point--2 .area__point--label {
        left: -18px;
        top: -4px; }
    .town__container .town__container--area.house .area__point li.area__point--3 {
      width: 40px;
      height: 36px;
      top: 481px;
      left: 841px; }
      .town__container .town__container--area.house .area__point li.area__point--3 .area__point--label {
        left: -20px;
        top: -46px; }
    .town__container .town__container--area.house .area__point li.area__point--4 {
      width: 171px;
      height: 63px;
      top: 435px;
      left: 656px; }
      .town__container .town__container--area.house .area__point li.area__point--4 .area__point--label {
        left: 22px;
        top: -28px; }
    .town__container .town__container--area.house .area__point li.area__point--5 {
      width: 121px;
      height: 53px;
      top: 214px;
      left: 335px; }
      .town__container .town__container--area.house .area__point li.area__point--5 .area__point--label {
        left: 8px;
        top: -28px; }
    .town__container .town__container--area.house .area__point li.area__point--6 {
      width: 74px;
      height: 54px;
      top: 327px;
      left: 6px; }
      .town__container .town__container--area.house .area__point li.area__point--6 .area__point--label {
        left: 4px;
        top: -52px; }
    .town__container .town__container--area.house .area__point li.area__point--7 {
      width: 54px;
      height: 85px;
      top: 277px;
      left: 73px; }
      .town__container .town__container--area.house .area__point li.area__point--7 .area__point--label {
        left: -14px;
        top: -52px; }
    .town__container .town__container--area.house .area__point li.area__point--8 {
      width: 117px;
      height: 76px;
      top: 494px;
      left: 656px; }
      .town__container .town__container--area.house .area__point li.area__point--8 .area__point--label {
        left: 16px;
        top: -30px; }
    .town__container .town__container--area.house .area__point li.area__point--9 {
      width: 164px;
      height: 56px;
      top: 527px;
      left: 488px; }
      .town__container .town__container--area.house .area__point li.area__point--9 .area__point--label {
        left: 20px;
        top: -48px; }
    .town__container .town__container--area.house .area__point li.area__point--10 {
      height: 52px;
      left: 656px;
      top: 569px;
      width: 32px; }
      .town__container .town__container--area.house .area__point li.area__point--10 .area__point--label {
        left: -27px;
        top: -42px; }
    .town__container .town__container--area.house .area__point li.area__point--11 {
      height: 141px;
      left: 744px;
      top: 309px;
      width: 117px; }
      .town__container .town__container--area.house .area__point li.area__point--11 .area__point--label {
        left: 15px;
        top: -18px; }
    .town__container .town__container--area.house .area__point li.area__point--12 {
      height: 85px;
      left: 568px;
      top: 153px;
      width: 152px; }
      .town__container .town__container--area.house .area__point li.area__point--12 .area__point--label {
        left: 35px;
        top: -30px; }
    .town__container .town__container--area.house .area__point li.area__point--13 {
      height: 134px;
      left: 124px;
      top: 425px;
      width: 194px; }
      .town__container .town__container--area.house .area__point li.area__point--13 .area__point--label {
        left: 55px;
        top: -30px;
        padding-top: 32px; }
    .town__container .town__container--area.house .area__point li.area__point--14 {
      height: 62px;
      left: 614px;
      top: 377px;
      width: 51px; }
      .town__container .town__container--area.house .area__point li.area__point--14 .area__point--label {
        left: -17px;
        top: -30px;
        padding-top: 32px; }
    .town__container .town__container--area.cafe .area__point li .area__point--label {
      width: 64px;
      height: 59px;
      padding-top: 26px; }
    .town__container .town__container--area.cafe .area__point li.area__point--1 {
      width: 90px;
      height: 88px;
      top: 516px;
      left: 51px; }
      .town__container .town__container--area.cafe .area__point li.area__point--1 .area__point--label {
        left: 72px;
        top: -4px; }
    .town__container .town__container--area.cafe .area__point li.area__point--2 {
      width: 97px;
      height: 88px;
      top: 233px;
      left: 570px; }
      .town__container .town__container--area.cafe .area__point li.area__point--2 .area__point--label {
        left: 12px;
        top: -44px; }
    .town__container .town__container--area.cafe .area__point li.area__point--3 {
      width: 417px;
      height: 142px;
      left: 374px; }
      .town__container .town__container--area.cafe .area__point li.area__point--3 .area__point--label {
        left: 178px;
        top: 24px; }
    .town__container .town__container--area.cafe .area__point li.area__point--4 {
      width: 67px;
      height: 59px;
      top: 444px;
      left: 171px; }
      .town__container .town__container--area.cafe .area__point li.area__point--4 .area__point--label {
        left: 11px;
        top: -48px; }
    .town__container .town__container--area.cafe .area__point li.area__point--5 {
      width: 123px;
      height: 102px;
      top: 346px;
      left: 36px; }
      .town__container .town__container--area.cafe .area__point li.area__point--5 .area__point--label {
        left: 19px;
        top: -36px;
        padding-top: 31px; }
    .town__container .town__container--area.cafe .area__point li.area__point--13 {
      width: 93px;
      height: 99px;
      top: 66px;
      left: 80px; }
      .town__container .town__container--area.cafe .area__point li.area__point--13 .area__point--label {
        left: 12px;
        top: -20px; }
    .town__container .town__container--area.cafe .area__point li.area__point--14 {
      width: 103px;
      height: 74px;
      left: 178px;
      top: 129px; }
      .town__container .town__container--area.cafe .area__point li.area__point--14 .area__point--label {
        left: 17px;
        top: -26px; }
    .town__container .town__container--area.cafe .area__point li.area__point--15 {
      width: 82px;
      height: 72px;
      left: 290px;
      top: 45px; }
      .town__container .town__container--area.cafe .area__point li.area__point--15 .area__point--label {
        left: 9px;
        top: -22px; }
    .town__container .town__container--area.cafe .area__point li.area__point--16 {
      width: 188px;
      height: 69px;
      left: 95px;
      top: 277px; }
      .town__container .town__container--area.cafe .area__point li.area__point--16 .area__point--label {
        left: 26px;
        top: -37px; }
    .town__container .town__container--area.cafe .area__point li.area__point--17 {
      width: 87px;
      height: 89px;
      left: 391px;
      top: 157px; }
      .town__container .town__container--area.cafe .area__point li.area__point--17 .area__point--label {
        left: 8px;
        top: -20px; }
    .town__container .town__container--area.cafe .area__point li.area__point--18 {
      width: 196px;
      height: 127px;
      left: 683px;
      top: 465px; }
      .town__container .town__container--area.cafe .area__point li.area__point--18 .area__point--label {
        left: 21px;
        top: 2px; }
    .town__container .town__container--area.farm .area__point li .area__point--label {
      width: 64px;
      height: 68px;
      padding-top: 40px; }
    .town__container .town__container--area.farm .area__point li.area__point--1 {
      width: 214px;
      height: 91px;
      top: 220px;
      left: 740px; }
      .town__container .town__container--area.farm .area__point li.area__point--1 .area__point--label {
        left: 184px;
        top: 31px; }
    .town__container .town__container--area.farm .area__point li.area__point--2 {
      width: 77px;
      height: 77px;
      top: 104px;
      left: 651px; }
      .town__container .town__container--area.farm .area__point li.area__point--2 .area__point--label {
        left: -4px;
        top: -40px;
        padding-top: 39px; }
    .town__container .town__container--area.farm .area__point li.area__point--3 {
      width: 106px;
      height: 74px;
      top: 21px;
      left: 490px; }
      .town__container .town__container--area.farm .area__point li.area__point--3 .area__point--label {
        left: -3px;
        top: -53px; }
    .town__container .town__container--area.farm .area__point li.area__point--4 {
      width: 267px;
      height: 117px;
      top: 415px;
      left: 738px; }
      .town__container .town__container--area.farm .area__point li.area__point--4 .area__point--label {
        left: 136px;
        top: -34px; }
    .town__container .town__container--area.farm .area__point li.area__point--5 {
      width: 232px;
      height: 72px;
      top: 158px; }
      .town__container .town__container--area.farm .area__point li.area__point--5 .area__point--label {
        left: 120px;
        top: -32px; }
    .town__container .town__container--area.farm .area__point li.area__point--6 {
      width: 403px;
      height: 173px;
      top: 234px;
      left: 56px; }
      .town__container .town__container--area.farm .area__point li.area__point--6 .area__point--label {
        left: 236px;
        top: 8px; }
    .town__container .town__container--area.farm .area__point li.area__point--7 {
      width: 232px;
      height: 125px;
      top: 28px;
      left: 12px; }
      .town__container .town__container--area.farm .area__point li.area__point--7 .area__point--label {
        left: 111px;
        top: 4px; }
    .town__container .town__container--area.farm .area__point li.area__point--8 {
      width: 134px;
      height: 88px;
      top: 86px;
      left: 247px; }
      .town__container .town__container--area.farm .area__point li.area__point--8 .area__point--label {
        left: 35px;
        top: -34px; }
    .town__container .town__container--area.farm .area__point li.area__point--9 {
      width: 52px;
      height: 60px;
      top: 84px;
      left: 599px; }
      .town__container .town__container--area.farm .area__point li.area__point--9 .area__point--label {
        left: -9px;
        top: -42px; }
    .town__container .town__container--area.farm .area__point li.area__point--10 {
      width: 105px;
      height: 76px;
      top: 195px;
      left: 632px; }
      .town__container .town__container--area.farm .area__point li.area__point--10 .area__point--label {
        left: 19px;
        top: -34px; }
    .town__container .town__container--area.farm .area__point li.area__point--11 {
      width: 52px;
      height: 50px;
      top: 370px;
      left: 765px; }
      .town__container .town__container--area.farm .area__point li.area__point--11 .area__point--label {
        left: -9px;
        top: -50px; }
    .town__container .town__container--area.farm .area__point li.area__point--12 {
      width: 33px;
      height: 26px;
      top: 210px;
      left: 591px; }
      .town__container .town__container--area.farm .area__point li.area__point--12 .area__point--label {
        left: -17px;
        top: -59px; }
    .town__container .town__container--area.entertainment .area__point li .area__point--label {
      width: 59px;
      height: 60px;
      padding-top: 29px;
      padding-left: 3px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--1 {
      width: 210px;
      height: 228px;
      top: 15px;
      left: 666px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--1 .area__point--label {
        left: 48px;
        top: 12px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--2 {
      width: 153px;
      height: 57px;
      top: 447px;
      left: 493px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--2 .area__point--label {
        left: -8px;
        top: -29px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--3 {
      width: 184px;
      height: 49px;
      top: 171px;
      left: -29px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--3 .area__point--label {
        left: 238px;
        top: 82px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--4 {
      width: 102px;
      height: 82px;
      top: 122px;
      left: 158px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--4 .area__point--label {
        left: 48px;
        top: -20px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--5 {
      width: 52px;
      height: 57px;
      top: 160px;
      left: 264px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--5 .area__point--label {
        left: -4px;
        top: -32px;
        padding-top: 28px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--6 {
      width: 70px;
      height: 54px;
      top: 202px;
      left: 305px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--6 .area__point--label {
        left: 23px;
        top: -52px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--7 {
      width: 97px;
      height: 67px;
      top: 254px;
      left: 115px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--7 .area__point--label {
        left: 19px;
        top: -32px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--8 {
      width: 54px;
      height: 60px;
      top: 115px;
      left: 103px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--8 .area__point--label {
        left: 4px;
        top: -29px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--9 {
      width: 54px;
      height: 66px;
      top: 105px;
      left: 48px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--9 .area__point--label {
        left: -1px;
        top: -32px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--10 {
      width: 43px;
      height: 63px;
      top: 93px;
      left: 5px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--10 .area__point--label {
        left: -14px;
        top: -34px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--11 {
      width: 59px;
      height: 52px;
      top: 69px;
      left: 175px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--11 .area__point--label {
        left: -6px;
        top: -34px; }
    .town__container .town__container--area.entertainment .area__point li.area__point--12 {
      width: 52px;
      height: 47px;
      top: 67px;
      left: 287px; }
      .town__container .town__container--area.entertainment .area__point li.area__point--12 .area__point--label {
        left: -2px;
        top: -42px; }

  .arrow {
    width: 36px;
    height: 36px;
    display: none !important; }
    .arrow.south {
      bottom: 13px; }

  .scale {
    background: url(../img/contents/town/scale--sp.png) no-repeat left top;
    background-size: 100% auto;
    width: 55px;
    height: 159px;
    bottom: 10px;
    right: 0; }
    .scale .scale__btn li {
      width: 22px;
      height: 22px;
      left: 16px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 15px auto;
      border-radius: 15px;
      cursor: pointer; }
      .scale .scale__btn li.scale__btn--minus {
        top: 115px;
        left: 16px; }
      .scale .scale__btn li.scale__btn--plus {
        top: 20px;
        right: auto; }
    .scale .scale__mark li {
      width: 8px;
      height: 8px; }
      .scale .scale__mark li.active {
        -webkit-transform: scale(1.54);
        transform: scale(1.54); }
      .scale .scale__mark li.scale__mark--1 {
        left: 23px;
        top: 96px; }
      .scale .scale__mark li.scale__mark--2 {
        left: 23px;
        top: 75px; }
      .scale .scale__mark li.scale__mark--3 {
        left: 23px;
        top: 54px; }

  .compass {
    width: 49px;
    height: 49px;
    top: 5px;
    right: 3px; }
    .compass span {
      width: 5px;
      height: 18px;
      left: 21px;
      top: 14px; }

  .footer {
    bottom: 5px;
    left: 10px; }

  /* town cloud
  =================================================================== */
  .town__container--cloud li {
    width: 43px;
    height: 28px;
    right: -43px; }
    .town__container--cloud li.cloud__1 {
      top: 93px;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__2 {
      top: 82px;
      animation-delay: -32s; }
    .town__container--cloud li.cloud__3 {
      top: 28px;
      animation-delay: -48s; }
    .town__container--cloud li.cloud__4 {
      top: 87px;
      animation-delay: -88s;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__5 {
      top: 31px;
      animation-delay: -110s;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__6 {
      top: 88px;
      animation-delay: -96s; }
    .town__container--cloud li.cloud__7 {
      top: 48px;
      animation-delay: -154s;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__8 {
      top: 23px;
      animation-delay: -176s;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__9 {
      top: 78px;
      animation-delay: -144s; }
    .town__container--cloud li.cloud__10 {
      top: 31px;
      animation-delay: -160s; }
    .town__container--cloud li.cloud__11 {
      top: 66px;
      animation-delay: -242s;
      animation-duration: 264s; }
    .town__container--cloud li.cloud__12 {
      top: 118px;
      animation-delay: -192s; }
    .town__container--cloud li.cloud__13 {
      top: 38px;
      animation-delay: -208s; }

  /* town cafe
  =================================================================== */
  /*.cafe__container {
  	width: 542px;
  	height: 351px;
  	.cafe__container--cloud1 {
  		width: 970px;
  		height: 138px;
  	}
  	.cafe__container--cloud2 {
  		width: 1045px;
  		height: 110px;
  	}
  	.cafe__container--front {
  		height: 243px;
  		.front__cafe {
  			width: 278px;
  			height: 260px;
  			bottom: 88px;
  			right: 23px;
  		}
  		.front__cinnamon {
  			width: 78px;
  			height: 51px;
  			top: -30px;
  			left: 158px;
  		}
  		.front__mocha {
  			width: 78px;
  			height: 46px;
  			top: 114px;
  			left: 155px;
  		}
  		.front__horse1 {
  			width: 58px;
  			height: 55px;
  			top: 147px;
  			left: 4px;
  		}
  		.front__horse2 {
  			width: 78px;
  			height: 57px;
  			top: 148px;
  			left: 55px;
  		}
  		.front__horse3 {
  			width: 21px;
  			height: 44px;
  			top: 152px;
  			left: 122px;
  		}
  		.front__milk {
  			width: 62px;
  			height: 34px;
  			top: 171px;
  			left: 221px;
  		}
  		.front__table {
  			width: 69px;
  			height: 55px;
  			top: 184px;
  			left: 193px;
  		}
  		.front__chiffon {
  			width: 76px;
  			height: 50px;
  			top: 144px;
  			left: 288px;
  		}
  		.front__coco {
  			width: 58px;
  			height: 37px;
  			top: 180px;
  			left: 360px;
  		}
  		.front__nuts {
  			width: 49px;
  			height: 38px;
  			top: 200px;
  			left: 320px;
  		}
  		.front__bike {
  			width: 58px;
  			height: 47px;
  			top: 116px;
  			left: 369px;
  		}
  	}
  	.area__point li {
  		.area__point--label {
  			width: 64px;
  			height: 59px;
  			padding-top: 26px;
  		}
  		&.area__point--5 {
  			width: 204px;
  			height: 132px;
  			top: 109px;
  			left: 278px;
  			.area__point--label {
  				left: 16px;
  				top: -20px;
  			}
  		}
  		&.area__point--6 {
  			width: 56px;
  			height: 52px;
  			top: 219px;
  			left: 369px;
  			.area__point--label {
  				left: 16px;
  				top: -36px;
  			}
  		}
  		&.area__point--7 {
  			width: 120px;
  			height: 88px;
  			top: 254px;
  			left: 422px;
  			.area__point--label {
  				left: 40px;
  				top: -40px;
  			}
  		}
  		&.area__point--8 {
  			width: 127px;
  			height: 88px;
  			top: 259px;
  			left: 168px;
  			.area__point--label {
  				left: 28px;
  				top: -36px;
  			}
  		}
  		&.area__point--9 {
  			width: 133px;
  			height: 149px;
  			top: 188px;
  			left: 12px;
  			.area__point--label {
  				left: 16px;
  				top: -44px;
  			}
  		}
  		&.area__point--10 {
  			width: 76px;
  			height: 93px;
  			top: 119px;
  			left: 200px;
  			.area__point--label {
  				left: 12px;
  				top: -36px;
  			}
  		}
  		&.area__point--11 {
  			width: 231px;
  			height: 87px;
  			top: 13px;
  			left: 4px;
  			.area__point--label {
  				left: 92px;
  				top: 4px;
  			}
  		}
  		&.area__point--12 {
  			width: 231px;
  			height: 87px;
  			top: 21px;
  			left: 266px;
  			.area__point--label {
  				left: 156px;
  				top: 8px;
  			}
  		}
  	}
  }*/
  /* town chara
  =================================================================== */
  .chara:after {
    width: 25px;
    height: 5px;
    bottom: -2px; }

  .obj img {
    display: block;
    width: 100%;
    height: auto; }

  /* town chara1
  =================================================================== */
  .milk__1 {
    left: 337px;
    top: 274px;
    width: 29px; }
    .milk__1.active img {
      -webkit-animation: charaAnimeM 1.7s linear infinite alternate;
      animation: charaAnimeM 1.7s linear infinite alternate; }
    .milk__1:after {
      width: 23px;
      left: 5px; }

  .chiffon__1 {
    right: 740px;
    top: 145px;
    width: 30px; }
    .chiffon__1.active img {
      -webkit-animation: charaAnime2 1.7s linear infinite alternate;
      animation: charaAnime2 1.7s linear infinite alternate; }
    .chiffon__1:after {
      height: 3px;
      left: 8px;
      width: 17px; }

  .espresso__1 {
    right: 64px;
    top: 432px;
    width: 57px; }
    .espresso__1.active img {
      -webkit-animation: charaAnimeE 1.8s linear infinite alternate;
      animation: charaAnimeE 1.8s linear infinite alternate;
      animation-delay: -0.4s; }

  .cinnamon__1 {
    right: 176px;
    top: 738px;
    width: 35px; }
    .cinnamon__1.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.7s; }
    .cinnamon__1:after {
      left: 8px;
      width: 17px; }

  .cappuccino__1 {
    left: 222px;
    top: 887px;
    width: 37px; }
    .cappuccino__1.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .cappuccino__1:after {
      height: 4px;
      left: 12px;
      width: 14px; }

  .mocha__1 {
    left: 790px;
    top: 1007px;
    width: 21px; }
    .mocha__1.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.7s; }
    .mocha__1:after {
      height: 4px;
      left: 4px;
      width: 13px; }

  .poron__1__2 {
    left: 534px;
    top: 431px;
    width: 25px; }
    .poron__1__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.6s; }
    .poron__1__2:after {
      left: 6px;
      width: 14px;
      height: 4px; }

  .corne__1__2 {
    left: 562px;
    top: 417px;
    width: 44px; }
    .corne__1__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -2.0s; }

  .coco__1__3__4 {
    right: 272px;
    top: 1053px;
    width: 24px; }
    .coco__1__3__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.2s; }
    .coco__1__3__4:after {
      left: 6px;
      width: 14px;
      height: 4px; }

  .nuts__1__3__4 {
    right: 296px;
    top: 1058px;
    width: 20px; }
    .nuts__1__3__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .nuts__1__3__4:after {
      left: 1px;
      width: 14px;
      height: 4px; }

  /* town chara2
  =================================================================== */
  .chiffon__2 {
    right: 807px;
    top: 767px;
    width: 29px; }
    .chiffon__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .chiffon__2:after {
      left: 6px;
      width: 17px; }

  .cinnamon__2 {
    right: 708px;
    top: 362px;
    width: 32px; }
    .cinnamon__2.active img {
      -webkit-animation: charaAnimeC 1.8s linear infinite alternate;
      animation: charaAnimeC 1.8s linear infinite alternate; }

  .coco__2 {
    right: 755px;
    top: 506px;
    width: 23px; }
    .coco__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.4s; }
    .coco__2:after {
      left: 6px;
      width: 10px;
      height: 3px; }

  .nuts__2 {
    right: 800px;
    top: 506px;
    width: 18px; }
    .nuts__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.7s; }
    .nuts__2:after {
      left: 4px;
      width: 10px;
      height: 3px; }

  .cappuccino__2 {
    right: 774px;
    top: 496px;
    width: 29px; }
    .cappuccino__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.1s; }
    .cappuccino__2:after {
      left: 2px;
      width: 17px; }

  .mocha__2 {
    right: 228px;
    top: 352px;
    width: 30px; }
    .mocha__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .mocha__2:after {
      left: 6px;
      width: 16px; }

  .milk__2 {
    left: 232px;
    top: 785px;
    width: 23px; }
    .milk__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.6s; }
    .milk__2:after {
      left: 4px;
      width: 43px;
      height: 3px; }

  .espresso__2 {
    right: 566px;
    top: 847px;
    width: 24px; }
    .espresso__2.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.5s; }
    .espresso__2:after {
      left: 4px;
      width: 16px; }

  /* town chara3
  =================================================================== */
  .cinnamon__3 {
    left: 845px;
    top: 493px;
    width: 35px; }
    .cinnamon__3.active img {
      -webkit-animation: charaAnime2 1.7s linear infinite alternate;
      animation: charaAnime2 1.7s linear infinite alternate; }

  .cappuccino__3 {
    left: 592px;
    top: 557px;
    width: 47px; }
    .cappuccino__3.active img {
      -webkit-animation: charaAnime2 1.7s linear infinite alternate;
      animation: charaAnime2 1.7s linear infinite alternate;
      animation-delay: -1.4s; }
    .cappuccino__3:after {
      left: 10px;
      width: 16px; }

  .milk__3 {
    right: 822px;
    top: 444px;
    width: 20px; }
    .milk__3.active img {
      -webkit-animation: charaAnime2 1.7s linear infinite alternate;
      animation: charaAnime2 1.7s linear infinite alternate;
      animation-delay: -0.8s; }

  .mocha__3 {
    right: 620px;
    top: 815px;
    width: 20px; }
    .mocha__3.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.7s; }
    .mocha__3:after {
      left: 2px;
      width: 16px; }

  .chiffon__3 {
    left: 576px;
    top: 729px;
    width: 30px; }
    .chiffon__3.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.1s; }
    .chiffon__3:after {
      height: 4px;
      left: 9px;
      width: 14px; }

  .espresso__3 {
    left: 832px;
    top: 1016px;
    width: 33px; }
    .espresso__3.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.3s; }
    .espresso__3:after {
      height: 4px;
      left: 6px;
      width: 14px; }

  .poron__3__4 {
    right: 632px;
    top: 288px;
    width: 24px; }
    .poron__3__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .poron__3__4:after {
      left: 6px;
      width: 17px; }

  .corne__3__4 {
    right: 658px;
    top: 289px;
    width: 34px; }
    .corne__3__4:after {
      left: 2px;
      width: 29px;
      height: 9px;
      bottom: 17px; }

  /* town chara4
  =================================================================== */
  .chiffon__4 {
    left: 60px;
    top: 377px;
    width: 37px; }
    .chiffon__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite; }
    .chiffon__4:after {
      width: 12px;
      left: 11px; }

  .mocha__4 {
    left: 46px;
    top: 589px;
    width: 34px; }
    .mocha__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.6s; }
    .mocha__4:after {
      width: 16px;
      left: 8px; }

  .espresso__4 {
    left: 639px;
    top: 579px;
    width: 24px; }
    .espresso__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.4s; }
    .espresso__4:after {
      left: 4px;
      width: 16px; }

  .milk__4 {
    right: 150px;
    top: 682px;
    width: 19px; }
    .milk__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -0.7s; }
    .milk__4:after {
      left: 0;
      width: 14px; }

  .cinnamon__4 {
    left: 543px;
    top: 704px;
    width: 32px; }
    .cinnamon__4.active img {
      -webkit-animation: charaAnime1 3s linear infinite;
      animation: charaAnime1 3s linear infinite;
      animation-delay: -1.1s; }
    .cinnamon__4:after {
      height: 4px;
      left: 9px;
      width: 14px; }

  .cappuccino__4 {
    right: 654px;
    top: 780px;
    width: 27px; }
    .cappuccino__4.active img {
      -webkit-animation: charaAnime2 1.7s linear infinite alternate;
      animation: charaAnime2 1.7s linear infinite alternate; }
    .cappuccino__4:after {
      left: 1px;
      width: 17px; }

  /* town chara all
  =================================================================== */
  .lloromannic1 {
    left: 191px;
    top: 531px;
    width: 22px; }

  .lloromannic2 {
    left: 232px;
    top: 532px;
    width: 29px; }

  .azuki {
    left: 625px;
    top: 746px;
    width: 32px; }

  .shirotaro {
    left: 593px;
    top: 826px;
    width: 29px; }

  .door {
    left: 612px;
    top: 377px;
    width: 55px; }

  .light {
    left: 667px;
    top: 565px;
    width: 10px; }

  .kakashi {
    left: 282px;
    top: 932px;
    width: 38px; }

  .table {
    right: 828px;
    top: 443px;
    width: 26px; }

  .windmill1 {
    right: 407px;
    top: 155px;
    width: 79px; }

  .windmill1__obj {
    right: 402px;
    top: 180px;
    width: 65px; }

  .windmill2 {
    right: 16px;
    top: 278px;
    width: 79px; }

  .windmill2__obj {
    right: -18px;
    top: 306px;
    width: 94px; }

  .cloud__click {
    right: 523px;
    top: 66px;
    width: 62px; }

  .gate {
    right: 624px;
    top: 732px;
    width: 91px; }

  .park {
    right: -22px;
    top: 732px;
    width: 221px; }

  .attraction1 {
    width: 100px;
    height: 100px;
    top: 650px;
    right: 16px; }
    .attraction1 .attraction1__list li {
      width: 26px; }
      .attraction1 .attraction1__list li.list__1 {
        left: 37px;
        top: -17px; }
      .attraction1 .attraction1__list li.list__2 {
        left: 74px;
        top: -2px; }
      .attraction1 .attraction1__list li.list__3 {
        left: 91px;
        top: 34px; }
      .attraction1 .attraction1__list li.list__4 {
        left: 74px;
        top: 74px; }
      .attraction1 .attraction1__list li.list__5 {
        left: 37px;
        top: 89px; }
      .attraction1 .attraction1__list li.list__6 {
        left: -1px;
        top: 74px; }
      .attraction1 .attraction1__list li.list__7 {
        left: -16px;
        top: 34px; }
      .attraction1 .attraction1__list li.list__8 {
        left: -1px;
        top: -2px; }

  .attraction1__obj {
    right: 38px;
    top: 686px;
    width: 60px; }

  .attraction2__1 {
    right: 5px;
    top: 776px;
    width: 31px; }

  .attraction2__image {
    right: 4px;
    top: 762px;
    width: 34px; }

  .attraction2__2 {
    right: 5px;
    top: 776px;
    width: 31px; }

  .attraction2__obj {
    right: 10px;
    top: 763px;
    width: 26px; }

  .sign {
    left: 926px;
    top: 920px;
    width: 28px; }

  /* town cloud
  =================================================================== */
  .town__container--cloud li {
    -webkit-animation: cloudAnime3 192s linear infinite;
    animation: cloudAnime3 192s linear infinite; }

  /* town SP
  =================================================================== */
  .town__container .town__container--area.house {
    background: url(../img/contents/town/area__house--sp.png) no-repeat left top;
    background-size: 100% auto; }
  .town__container .town__container--area.cafe {
    background: url(../img/contents/town/area__cafe--sp.png) no-repeat left top;
    background-size: 100% auto;
    width: 50% !important;
    height: 50% !important; }
  .town__container .town__container--area.farm {
    background: url(../img/contents/town/area__farm--sp.png) no-repeat left top;
    background-size: 100% auto;
    width: 50% !important;
    height: 50% !important; }
  .town__container .town__container--area.entertainment {
    background: url(../img/contents/town/area__entame--sp.png) no-repeat left top;
    background-size: 100% auto;
    width: 50% !important;
    height: 50% !important; }

  .map__main {
    overflow: scroll; }

  .c-modal__bg {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden; } }