@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px; }

html {
  height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  text-align: center;
  font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Osaka",Arial,sans-serif;
  overflow: hidden;
  /*スマホ長押し時の画像保存を止める*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none; }

ul, li, div {
  margin: 0;
  padding: 0; }

input[type=text], textarea {
  font-size: 16px; }

/* ==================================================================================================================
// ▼ ダイアログ
================================================================================================================== */
#overlay {
  position: fixed;
  z-index: -100;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  opacity: 0;
  visibility: hidden;
  will-change: opacity; }

#overlay.visible {
  visibility: visible;
  opacity: 0.5;
  -webkit-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
  z-index: 100000; }

#verification-notify {
  font-family: "メイリオ","ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3","Osaka",Arial,sans-serif;
  z-index: -100;
  position: fixed;
  background-color: #fff;
  visibility: hidden;
  position: fixed;
  width: calc(100% - 40px);
  left: 20px;
  top: 110px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }
  @media screen and (min-width: 554px) {
    #verification-notify {
      width: 450px;
      left: calc((100% - 450px) / 2);
      top: 120px; } }
  @media screen and (min-width: 769px) {
    #verification-notify {
      width: 600px;
      left: calc((100% - 600px) / 2);
      top: calc((100% - 300px) / 2); } }

#verification-notify.visible {
  visibility: visible;
  -webkit-transition: opacity 0.15s ease-out;
  transition: opacity 0.15s ease-out;
  z-index: 100001;
  border: 5px solid #dfdfdf;
  border-radius: 20px;
  /*line-height: initial;*/ }

#verification-notify .head {
  border-radius: 20px 20px 0 0;
  background-color: #ffffff;
  text-align: center; }

#verification-notify .head h2 {
  padding: 25px 20px 4px 20px;
  color: #303030;
  font-size: 22px;
  font-weight: bold;
  margin: 0; }

#verification-notify .inner-dialog {
  padding: 10px 0 20px 0;
  font-size: 16px; }

#verification-notify .detail {
  margin: 0 20px 20px; }

#verification-notify .detail p#w_message {
  font-size: 18px; }

#verification-notify .avatar-detail {
  margin: 0 15px 30px;
  display: flex;
  align-items: center;
  justify-content: center; }

#verification-notify .avatar-detail img {
  width: 60px;
  height: 60px;
  border-radius: 50%; }

#verification-notify .avatar-detail .message-area {
  margin: 0 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  min-height: 60px; }

#verification-notify .avatar-detail .message-area p {
  margin: 0; }

#verification-notify .avatar-detail .message-area .sender {
  margin: 0;
  display: flex;
  justify-content: flex-end; }

#verification-notify .avatar-detail .message-area .sender a {
  color: #0073c5;
  text-decoration: none;
  text-align: right;
  margin-right: 5px;
  cursor: pointer; }

#verification-notify .avatar-detail .message-area .sender a:hover {
  color: #f11d6e; }

#verification-notify .action {
  text-align: center;
  display: inline-block;
  width: 100%; }
  #verification-notify .action .btn {
    display: inline-block; }
    #verification-notify .action .btn a {
      background-color: #586b7a;
      color: #ffffff;
      padding: 5px 13px;
      border-radius: 15px;
      white-space: nowrap;
      float: left;
      min-width: 80px;
      margin: 0 5px;
      display: block;
      text-decoration: none;
      font-size: 15px; }
      @media screen and (min-width: 554px) {
        #verification-notify .action .btn a {
          padding: 5px 30px;
          min-width: 120px;
          margin: 0 15px; } }
      @media screen and (min-width: 769px) {
        #verification-notify .action .btn a {
          padding: 5px 30px;
          min-width: 120px;
          margin: 0 20px; } }
      #verification-notify .action .btn a:hover {
        background: #ffa000;
        color: #FFFFFF; }
    #verification-notify .action .btn .close_btn {
      background-color: #dddddd;
      color: #333333;
      position: relative;
      top: auto;
      right: auto;
      font-size: 15px;
      cursor: pointer; }

#verification-notify .action.center {
  justify-content: center; }

#verification-notify.w .action {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

#verification-notify .close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px; }

#verification-notify .close:hover {
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

#verification-notify .close::before,
#verification-notify .close::after {
  content: '';
  width: 22px;
  height: 4px;
  background-color: #666666;
  display: block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 12px;
  right: 3px; }

#verification-notify .close::after {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg); }

#verification-notify .inform {
  width: 100%;
  text-align: center;
  margin: 10px 0 0 0;
  display: inline-block; }

#verification-notify .inform .m_left {
  width: 70%;
  background-color: #dadada;
  padding: 5px 0 5px 0;
  float: left;
  margin-bottom: 2px; }

#verification-notify .inform .m_right {
  width: 30%;
  background-color: #eeeeee;
  font-weight: bold;
  padding: 5px 0 5px 0;
  float: left;
  margin-bottom: 2px; }

#verification-notify .inform .m_space {
  width: 100%;
  height: 10px;
  float: left; }

#w_inform {
  margin-top: 20px;
  color: #7e4c4c;
  padding: 10px 0;
  font-size: 15px;
  border-top: 1px dashed #e1e1e1;
  border-bottom: 1px dashed #e1e1e1; }

/* ==================================================================================================================
// ▼ ポップアップウィンドウ
================================================================================================================== */
/* 左上機能ボタン */
.left-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 12px;
  top: 6px;
  z-index: 3;
  /* ページオーナーへの訪問アラート */
  /* 在席／離席 */
  /* マイ掲示板 */
  /* 今の気分 */
  /* ログアウトアバター選択 */
  /* 館内放送履歴 */
  /* エモート履歴 */ }
  .left-control .my-pin {
    display: none;
    width: 45px;
    height: 45px;
    background-image: url(images/my_pin1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: purun 2s infinite alternate;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .my-pin:hover {
      background-image: url(images/my_pin2.png); }
    .left-control .my-pin:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .icatch-avatar {
    display: flex;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/icatch_ava_btn1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .icatch-avatar:hover {
      opacity: 0.8; }
    .left-control .icatch-avatar:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .icatch-avatar-leave {
    /*background-color: #c7c7c7;*/
    background-image: url(images/icatch_ava_btn2.png); }
  .left-control .my-bbs {
    display: flex;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/mybbs_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .my-bbs:hover {
      /*opacity: 0.8;*/
      background-image: url(images/mybbs_2.png); }
    .left-control .my-bbs:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .my-face {
    display: flex;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/myface_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .my-face:hover {
      /*opacity: 0.8;*/
      background-image: url(images/myface_2.png); }
    .left-control .my-face:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .logout-avatar {
    display: flex;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/logout_choice_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .logout-avatar:hover {
      /*opacity: 0.8;*/
      background-image: url(images/logout_choice_2.png); }
    .left-control .logout-avatar:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .broadcast-history {
    display: none;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/broadcast_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .broadcast-history:hover {
      /*opacity: 0.8;*/
      background-image: url(images/broadcast_2.png); }
    .left-control .broadcast-history:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }
  .left-control .twit-history {
    display: flex;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;*/
    /*background-color: #a99580e6;*/
    background-image: url(images/twit_history_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    margin-bottom: 9px; }
    .left-control .twit-history:hover {
      /*opacity: 0.8;*/
      background-image: url(images/twit_history_2.png); }
    .left-control .twit-history:active {
      width: 43px;
      height: 43px;
      margin: 1px 1px 10px; }

/* 右上機能ボタン */
.right-control {
  display: flex;
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 3; }
  .right-control .navi-view {
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-image: url(images/navi_btn1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
    .right-control .navi-view:hover {
      background-image: url(images/navi_btn2.png); }
    .right-control .navi-view:active {
      width: 43px;
      height: 43px;
      margin: 1px;
      background-image: url(images/navi_btn2.png); }
  .right-control .change-map {
    width: 41px;
    height: 41px;
    cursor: pointer;
    margin: 2px 0 0 12px;
    /*z-index: 4;*/
    overflow: visible;
    position: relative;
    background-image: url(images/map_map1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
    .right-control .change-map:hover {
      opacity: 0.8; }
    .right-control .change-map:active {
      width: 39px;
      height: 39px;
      margin: 3px 1px 1px 13px; }
      .right-control .change-map:active .map-select {
        top: 47px;
        right: -9px; }
  .right-control .smap {
    background-image: url(images/map_smap1.png); }
    .right-control .smap:hover {
      opacity: 0.8; }
    .right-control .smap:active {
      opacity: 0.8; }
  .right-control .hall {
    background-image: url(images/map_hall1.png);
    background-color: unset;
    border: unset; }
    .right-control .hall:hover {
      opacity: 0.8; }
    .right-control .hall:active {
      opacity: 0.8; }
  .right-control .map-select {
    position: absolute;
    display: none;
    flex-wrap: wrap;
    width: 130px;
    top: 53px;
    right: -4px;
    background-color: #f7f7f7;
    border: solid 2px #505050;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: default;
    z-index: 5; }
    .right-control .map-select:before {
      content: "";
      position: absolute;
      top: -24px;
      right: 12px;
      margin-left: -15px;
      border: 12px solid transparent;
      border-bottom: 12px solid #f7f7f7;
      z-index: 3; }
    .right-control .map-select:after {
      content: "";
      position: absolute;
      top: -28px;
      right: 10px;
      margin-left: -17px;
      border: 14px solid transparent;
      border-bottom: 14px solid #505050;
      z-index: 2; }
    .right-control .map-select .map-select-one {
      width: 100%;
      padding: 7px 7px 7px 33px;
      border-bottom: 1px solid #dbdbdb;
      text-align: left;
      white-space: nowrap; }
      .right-control .map-select .map-select-one:hover {
        color: #ffffff;
        background-color: #ffc107;
        cursor: pointer; }
      .right-control .map-select .map-select-one:last-child {
        border-bottom: none; }
    .right-control .map-select .on {
      background-image: url(images/check.png);
      background-repeat: no-repeat;
      background-size: 22px auto;
      background-position: 7px 9px; }
    .right-control .map-select .disabled {
      pointer-events: none;
      color: #aaaaaa; }
      .right-control .map-select .disabled:hover {
        cursor: default;
        color: #aaaaaa;
        background-color: #f7f7f7; }
  .right-control .owner-room-view {
    display: none;
    width: 41px;
    height: 41px;
    cursor: pointer;
    margin: 2px 0 0 12px;
    background-image: url(images/owner_room1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
    .right-control .owner-room-view:hover {
      background-image: url(images/owner_room2.png); }
    .right-control .owner-room-view:active {
      width: 39px;
      height: 39px;
      margin: 3px 1px 1px 13px;
      background-image: url(images/owner_room2.png); }
  .right-control .owner-room-view-ng {
    display: none;
    width: 41px;
    height: 41px;
    cursor: not-allowed;
    margin: 2px 0 0 12px;
    background-image: url(images/owner_room_ng.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
  .right-control .icatch-refresh {
    display: none;
    width: 41px;
    height: 41px;
    cursor: pointer;
    margin: 2px 0 0 12px;
    background-image: url(images/icatch_refresh1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; }
    .right-control .icatch-refresh:hover {
      background-image: url(images/icatch_refresh2.png); }
    .right-control .icatch-refresh:active {
      width: 39px;
      height: 39px;
      margin: 3px 1px 1px 13px;
      background-image: url(images/icatch_refresh2.png); }

/*通常モードではない時*/
.mode-warning {
  width: 100%;
  position: absolute;
  top: 2px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4; }
  @media screen and (max-width: 800px) {
    .mode-warning {
      top: 45px; } }
  .mode-warning .message {
    font-size: 30px;
    line-height: 30px;
    /*font-weight: bold;*/
    color: #b4ff00;
    padding: 10px 30px 5px;
    background-color: #12121287;
    border-radius: 10px;
    white-space: nowrap; }
    @media screen and (max-width: 800px) {
      .mode-warning .message {
        padding: 9px 25px 5px;
        font-size: 35px; } }
    @media screen and (max-width: 500px) {
      .mode-warning .message {
        padding: 8px 20px 4px;
        font-size: 28px; } }

.heavy-traffic {
  position: absolute;
  left: 71px;
  bottom: 15px;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2; }
  .heavy-traffic .message {
    font-size: 20px;
    line-height: 20px;
    color: #ffd600;
    padding: 4px 20px 2px;
    background-color: #12121287;
    border-radius: 5px;
    white-space: nowrap; }
    @media screen and (max-width: 800px) {
      .heavy-traffic .message {
        padding: 5px 10px 3px;
        font-size: 18px;
        line-height: 18px; } }
    @media screen and (max-width: 500px) {
      .heavy-traffic .message {
        padding: 5px 10px 3px;
        font-size: 16px;
        line-height: 16px; } }

.navi-window {
  display: none;
  position: absolute;
  width: 100%;
  height: 90px;
  top: 0;
  z-index: 5; }
  .navi-window .navi-area {
    width: 100%;
    height: 100%;
    background-color: #45463de6;
    border-bottom: 2px solid #3a3a3a;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
    background-color: #c9bc9d;
    background-image: url(images/navi_back.jpg);
    background-repeat: repeat-x;
    background-size: auto 65px;
    background-position: center top; }
    .navi-window .navi-area .list {
      display: flex;
      /*justify-content: space-around;*/
      align-items: center;
      height: 100%; }
      @media screen and (min-width: 800px) {
        .navi-window .navi-area .list {
          /*justify-content: space-around;*/
          /*justify-content: center;*/ } }
      .navi-window .navi-area .list .navi-item {
        position: relative;
        width: 66px;
        height: 100%;
        margin: 0;
        padding-bottom: 4px;
        border-right: 1px solid #d1cdcdbd;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        cursor: pointer;
        /*最後から2番目*/
        /* 集まり程度の表現 */
        /*ざわ...*/
        /*ざわっざわっ*/
        /*ガﾔガﾔ*/
        /*ワーッ!オーッ!*/
        /*ドドドドッ!*/
        /*ズドドーッ!*/
        /*ゴゴゴゴォ!!*/ }
        .navi-window .navi-area .list .navi-item:nth-last-child(2) {
          border-right: none; }
        @media screen and (max-width: 1024px) {
          .navi-window .navi-area .list .navi-item {
            min-width: 50px; } }
        .navi-window .navi-area .list .navi-item .block-txt {
          position: absolute;
          bottom: 17px;
          color: #9d9783;
          font-size: 12px;
          line-height: 12px;
          font-weight: bold;
          display: block; }
        .navi-window .navi-area .list .navi-item .block-txt-aranged {
          position: absolute;
          bottom: 17px;
          color: #9d9783;
          font-size: 12px;
          line-height: 12px;
          font-weight: bold;
          display: none; }
        .navi-window .navi-area .list .navi-item .opt {
          position: absolute;
          top: 5px;
          color: #c50000;
          font-size: 9px;
          font-weight: bold;
          line-height: 9px;
          white-space: pre-line;
          z-index: 10; }
        .navi-window .navi-area .list .navi-item .visit-area {
          /*display: flex;*/
          display: none;
          position: absolute;
          top: 1px;
          width: 100%;
          height: 20px;
          justify-content: center; }
          .navi-window .navi-area .list .navi-item .visit-area .visit-flg {
            width: 14px;
            height: 16px;
            background-image: url(images/heart_pink.png);
            background-repeat: no-repeat;
            background-size: 14px 16px;
            background-position: 0 -2px;
            object-fit: contain;
            margin: 0 1px; }
        .navi-window .navi-area .list .navi-item .item-img {
          background-image: url(images/navi_desk.png);
          background-repeat: no-repeat;
          background-size: 90%;
          background-position: center bottom;
          width: 100%;
          max-width: 50px;
          min-width: 40px;
          height: calc(100% - 10px);
          /*opacity: 0.7;*/ }
        .navi-window .navi-area .list .navi-item:hover {
          background-color: #a1a1a14d; }
        .navi-window .navi-area .list .navi-item .histogram {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 10px;
          background-color: #585346; }
        .navi-window .navi-area .list .navi-item .histo-1 {
          opacity: 0.1; }
        .navi-window .navi-area .list .navi-item .histo-2 {
          opacity: 0.2; }
        .navi-window .navi-area .list .navi-item .histo-3 {
          opacity: 0.3; }
        .navi-window .navi-area .list .navi-item .histo-4 {
          opacity: 0.4; }
        .navi-window .navi-area .list .navi-item .histo-5 {
          opacity: 0.5; }
        .navi-window .navi-area .list .navi-item .histo-6 {
          opacity: 0.6; }
        .navi-window .navi-area .list .navi-item .histo-7 {
          opacity: 0.7; }
        .navi-window .navi-area .list .navi-item .histo-8 {
          opacity: 0.8; }
        .navi-window .navi-area .list .navi-item .histo-9 {
          opacity: 0.9; }
        .navi-window .navi-area .list .navi-item .histo-10 {
          opacity: 1.0; }
        .navi-window .navi-area .list .navi-item .online {
          position: absolute;
          bottom: 0;
          font-size: 10px;
          line-height: 10px;
          display: none; }
        .navi-window .navi-area .list .navi-item .curr-symbol {
          display: block;
          position: absolute;
          top: 17px;
          background-color: unset;
          z-index: 5; }
          .navi-window .navi-area .list .navi-item .curr-symbol img {
            width: 35px;
            -webkit-animation: furufuru 4.5s linear infinite;
            animation: furufuru 4.5s linear infinite; }
        .navi-window .navi-area .list .navi-item .view-symbol {
          display: none;
          position: absolute;
          top: 10px;
          background-color: unset;
          z-index: 5; }
          .navi-window .navi-area .list .navi-item .view-symbol img {
            width: 44px;
            -webkit-animation: rotate-anim 10s linear infinite 0s;
            animation: rotate-anim 10s linear infinite 0s; }
        .navi-window .navi-area .list .navi-item .noise-expression {
          position: absolute;
          background-repeat: no-repeat;
          background-size: 100%;
          height: 100%;
          /*基本は非表示に（アニメ終了後にクラスが削除されなかった場合の対応）*/
          /*アニメは100%で「opacity:0」に戻しておく*/
          opacity: 0; }
        .navi-window .navi-area .list .navi-item .noise-exp-1 {
          background-image: url(images/navi_level1.png);
          background-position: center 62px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawazawa 3.5s linear 0s;
          animation: noise-anim-zawazawa 3.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-1 {
          background-image: url(images/navi_level1_1.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-2 {
          background-image: url(images/navi_level1_2.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-3 {
          background-image: url(images/navi_level1_3.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-4 {
          background-image: url(images/navi_level1_4.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-5 {
          background-image: url(images/navi_level1_5.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-1-6 {
          background-image: url(images/navi_level1_6.png);
          background-position: center 19px;
          width: 36px;
          z-index: 1;
          -webkit-animation: noise-anim-zawa2 2.5s linear 0s;
          animation: noise-anim-zawa2 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-2 {
          background-image: url(images/navi_level2.png);
          background-position: center 53px;
          width: 37px;
          z-index: 1;
          -webkit-animation: noise-anim-zawazawa 3.5s linear 0s;
          animation: noise-anim-zawazawa 3.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-3 {
          background-image: url(images/navi_level3.png);
          background-position: center 19px;
          width: 38px;
          z-index: 1;
          -webkit-animation: noise-anim-gyagya 2.5s linear 0s;
          animation: noise-anim-gyagya 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-4 {
          background-image: url(images/navi_level4.png);
          background-position: center 21px;
          width: 43px;
          z-index: 1;
          -webkit-animation: noise-anim-gyagya 2.5s linear 0s;
          animation: noise-anim-gyagya 2.5s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-5 {
          background-image: url(images/navi_level5.png);
          background-position: center 31px;
          width: 60px;
          z-index: 2;
          -webkit-animation: noise-anim-gogogo 2.0s linear 0s;
          animation: noise-anim-gogogo 2.0s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-6 {
          background-image: url(images/navi_level6.png);
          background-position: center 31px;
          width: 66px;
          z-index: 3;
          -webkit-animation: noise-anim-gogogo 2.0s linear 0s;
          animation: noise-anim-gogogo 2.0s linear 0s; }
        .navi-window .navi-area .list .navi-item .noise-exp-7 {
          background-image: url(images/navi_level7.png);
          background-position: center 16px;
          width: 58px;
          z-index: 4;
          -webkit-animation: noise-anim-gogogo 2.0s linear 0s;
          animation: noise-anim-gogogo 2.0s linear 0s; }
      .navi-window .navi-area .list .curr-pos {
        background-color: #f5d17859; }
      .navi-window .navi-area .list .view-pos {
        background-color: #f5d17859; }
      .navi-window .navi-area .list .navi-item-dumy {
        display: block;
        width: 4px;
        min-width: 4px;
        height: 100%;
        margin: 0; }
  .navi-window .navi-area::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none; }
  .navi-window .navi-ctrl {
    position: absolute;
    left: calc(50% - 45px);
    bottom: -30px; }
    .navi-window .navi-ctrl .navi-close-btn {
      width: 90px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background-color: #3a3a3a;
      border-right: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      border-left: 1px solid #ffffff;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 2px #3a3a3a;
      cursor: pointer; }
      .navi-window .navi-ctrl .navi-close-btn .txt {
        font-size: 16px;
        padding-left: 3px; }
      .navi-window .navi-ctrl .navi-close-btn .ico {
        font-size: 19px;
        padding-bottom: 1px; }
      .navi-window .navi-ctrl .navi-close-btn:hover {
        background-color: #ffab00; }

.navi-wait {
  position: absolute;
  left: calc(50% - 30px);
  top: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 7; }
  .navi-wait img {
    width: 60px;
    height: 60px;
    mix-blend-mode: multiply; }

/* 今の気分／非ログインアバター選択用ポップアップ */
.profile {
  display: block;
  background-color: #eeeeee;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .profile .f-title {
    display: block;
    width: 100%;
    height: 30px;
    color: #ffffff;
    background-color: #303030;
    font-size: 16px;
    font-weight: bold;
    padding: 4px; }
  .profile .f-body {
    display: block;
    width: 100%;
    height: calc(100% - 30px); }
    .profile .f-body .tabmenu {
      width: 100%;
      height: 100%; }
      .profile .f-body .tabmenu .tabmenu_tab {
        list-style: none;
        width: 100%;
        height: 36px;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center; }
        .profile .f-body .tabmenu .tabmenu_tab li {
          border-radius: 12px;
          margin: 0 10px;
          padding: 3px 10px 2px 10px;
          font-size: 12px;
          background-color: #c3c3c3;
          width: 150px;
          cursor: pointer; }
          .profile .f-body .tabmenu .tabmenu_tab li:hover {
            color: #ffffff;
            background-color: #ffb00d; }
        .profile .f-body .tabmenu .tabmenu_tab li.select {
          color: #ffffff;
          background: #4a4a4a;
          cursor: default; }
      .profile .f-body .tabmenu .tabmenu_content {
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: #f7f8f9; }
        .profile .f-body .tabmenu .tabmenu_content .item {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          /*今の気分*/
          /*非ログインアバター選択*/ }
          .profile .f-body .tabmenu .tabmenu_content .item .facial {
            width: 100%;
            height: 100%;
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            align-items: center; }
            .profile .f-body .tabmenu .tabmenu_content .item .facial .obj {
              display: flex;
              justify-content: center;
              position: relative;
              width: 18%;
              margin: 1% 1% 2% 1%; }
              .profile .f-body .tabmenu .tabmenu_content .item .facial .obj img {
                width: 54px;
                height: 54px;
                border: 1px solid #f3dfdf;
                object-fit: cover;
                cursor: pointer; }
                @media screen and (max-width: 800px) {
                  .profile .f-body .tabmenu .tabmenu_content .item .facial .obj img {
                    width: 52px;
                    height: 52px; } }
                @media screen and (max-width: 500px) {
                  .profile .f-body .tabmenu .tabmenu_content .item .facial .obj img {
                    width: 50px;
                    height: 50px; } }
                .profile .f-body .tabmenu .tabmenu_content .item .facial .obj img:hover {
                  box-shadow: 0 0 0px 3px #ff9900; }
              .profile .f-body .tabmenu .tabmenu_content .item .facial .obj .selected {
                box-shadow: 0 0 0px 3px #ff0047;
                background-color: #fff251; }
              .profile .f-body .tabmenu .tabmenu_content .item .facial .obj .special {
                position: absolute;
                bottom: -6px;
                color: #ffffff;
                background-color: #cb0000;
                font-size: 12px;
                line-height: 12px;
                padding: 3px 4px 2px;
                border-radius: 5px;
                box-shadow: 0 0 3px 2px #ffffff; }
          .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select {
            width: 100%;
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start; }
            .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .info {
              width: 100%;
              padding: 3px 5px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #fff9af;
              font-size: 12px; }
              .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .info .ico {
                color: #df0000;
                font-size: 18px;
                margin: 0 5px 2px 0; }
            .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 14.6%;
              height: 65px;
              position: relative;
              padding: 1px;
              margin: 1% 1% 2% 1%;
              background-color: #e7e7e7;
              cursor: pointer; }
              .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj img {
                width: 100%;
                height: 100%;
                object-fit: cover; }
              @media screen and (max-width: 800px) {
                .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj {
                  width: 14.6%;
                  height: 60px; } }
              @media screen and (max-width: 500px) {
                .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj {
                  width: 18.0%;
                  height: 55px; } }
              .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj:hover {
                box-shadow: 0 0 0px 3px #ff8d00; }
              .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .obj .special {
                position: absolute;
                bottom: -7px;
                color: #ffffff;
                background-color: #cb0000;
                font-size: 12px;
                line-height: 12px;
                padding: 3px 4px 2px;
                border-radius: 5px;
                box-shadow: 0 0 3px 2px #ffffff; }
            .profile .f-body .tabmenu .tabmenu_content .item .no-login-avatar-select .selected {
              box-shadow: 0 0 2px 3px #cd3402; }
        .profile .f-body .tabmenu .tabmenu_content .logout-avatar-select {
          height: calc(100% - 44px); }
        .profile .f-body .tabmenu .tabmenu_content .item::-webkit-scrollbar {
          width: 3px; }
        .profile .f-body .tabmenu .tabmenu_content .item::-webkit-scrollbar-track {
          background-color: #cccccc; }
        .profile .f-body .tabmenu .tabmenu_content .item::-webkit-scrollbar-thumb {
          background-color: #aa4242; }
        .profile .f-body .tabmenu .tabmenu_content .option {
          width: 100%;
          height: 44px;
          display: flex;
          align-items: center;
          padding: 7px 5px;
          background-color: #dae1e5; }
          .profile .f-body .tabmenu .tabmenu_content .option .title {
            font-size: 12px;
            width: 50px; }
          .profile .f-body .tabmenu .tabmenu_content .option .name {
            width: calc(100% - 95px); }
            .profile .f-body .tabmenu .tabmenu_content .option .name input::placeholder {
              color: #bbbbbb; }
            .profile .f-body .tabmenu .tabmenu_content .option .name input[type="text"] {
              width: 100%;
              border: 1px solid #aaaaaa;
              border-radius: 4px;
              height: 30px;
              padding: 0 10px;
              font-size: 16px; }
          .profile .f-body .tabmenu .tabmenu_content .option .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            background-color: #444444;
            width: 45px;
            height: 28px;
            border-radius: 5px;
            margin-left: 5px;
            cursor: pointer; }
            .profile .f-body .tabmenu .tabmenu_content .option .btn:hover {
              opacity: 0.8; }
            .profile .f-body .tabmenu .tabmenu_content .option .btn:active {
              width: 43px;
              height: 26px;
              margin: 1px 1px 1px 6px; }

/* 訪問者アラートWindow */
.my-pin-dlg {
  display: block;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .my-pin-dlg .p-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #303030; }
    .my-pin-dlg .p-title .txt {
      color: #ffffff;
      font-size: 16px;
      font-weight: bold; }
    .my-pin-dlg .p-title .tag {
      color: #ffff00;
      font-size: 16px;
      font-weight: bold; }
  .my-pin-dlg .p-body {
    display: block;
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: scroll; }
    .my-pin-dlg .p-body .visitor {
      display: block;
      width: 100%;
      height: 60px;
      background-color: #f1f1f1;
      margin-bottom: 3px;
      display: flex; }
      .my-pin-dlg .p-body .visitor .thumbnail {
        width: 66px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
        .my-pin-dlg .p-body .visitor .thumbnail .img {
          width: 54px;
          height: 54px;
          overflow: hidden; }
          .my-pin-dlg .p-body .visitor .thumbnail .img img {
            object-fit: contain;
            border-radius: 50%;
            width: 100%;
            height: 100%; }
            .my-pin-dlg .p-body .visitor .thumbnail .img img.walker {
              width: 216px;
              height: 216px;
              object-fit: unset;
              border-radius: unset; }
      .my-pin-dlg .p-body .visitor .contents {
        width: calc(100% - 66px);
        padding-left: 8px;
        display: flex;
        flex-wrap: wrap;
        align-content: center; }
        .my-pin-dlg .p-body .visitor .contents .name {
          width: 100%;
          text-align: left;
          font-size: 16px;
          font-weight: bold;
          color: #895f00; }
        .my-pin-dlg .p-body .visitor .contents .action {
          width: 100%;
          display: flex;
          justify-content: space-between; }
          .my-pin-dlg .p-body .visitor .contents .action select {
            width: calc(100% - 100px);
            height: 28px;
            color: #444444;
            border: 1px solid #cdcdcd;
            border-radius: 5px;
            cursor: pointer; }
          .my-pin-dlg .p-body .visitor .contents .action .btn {
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px 10px;
            color: #ffffff;
            background-color: #444444;
            border-radius: 15px;
            cursor: pointer; }
            .my-pin-dlg .p-body .visitor .contents .action .btn:hover {
              opacity: 0.7; }
            .my-pin-dlg .p-body .visitor .contents .action .btn:active {
              background-color: #ff9800;
              opacity: 1; }
    .my-pin-dlg .p-body .no-record {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center; }
      .my-pin-dlg .p-body .no-record .msg {
        font-size: 22px;
        font-weight: bold;
        color: #888888; }
  .my-pin-dlg .p-body::-webkit-scrollbar {
    width: 3px; }
  .my-pin-dlg .p-body::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .my-pin-dlg .p-body::-webkit-scrollbar-thumb {
    background-color: #aa4242; }
  .my-pin-dlg .p-option {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd9d2; }
    .my-pin-dlg .p-option .btn {
      color: #ffffff;
      background-color: #933434;
      font-size: 14px;
      padding: 2px 30px;
      border-radius: 15px;
      cursor: pointer; }
      .my-pin-dlg .p-option .btn:hover {
        opacity: 0.7; }
      .my-pin-dlg .p-option .btn:active {
        background-color: #ff9800;
        opacity: 1; }
  .my-pin-dlg .p-message {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .my-pin-dlg .p-message .txt {
      width: 90%;
      font-size: 25px;
      font-weight: bold;
      padding: 20px 0;
      color: #ffffff;
      background-color: #4e4e4e;
      border: 2px solid #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 0px 1px #333333; }
      @media screen and (max-width: 800px) {
        .my-pin-dlg .p-message .txt {
          font-size: 22px;
          padding: 18px 0; } }
      @media screen and (max-width: 500px) {
        .my-pin-dlg .p-message .txt {
          font-size: 20px;
          padding: 15px 0; } }

/* 館内放送Window */
.broadcast-dlg {
  display: block;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .broadcast-dlg .broadcast-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #303030; }
    .broadcast-dlg .broadcast-title .txt {
      color: #ffffff;
      font-size: 16px;
      font-weight: bold; }
    .broadcast-dlg .broadcast-title .tag {
      color: #ffff00;
      font-size: 16px;
      font-weight: bold; }
  .broadcast-dlg .broadcast-list {
    display: block;
    width: 100%;
    height: calc(100% - 30px);
    overflow-y: scroll; }
    .broadcast-dlg .broadcast-list .one-broadcast {
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: #f1f1f1;
      margin-bottom: 3px;
      border-bottom: 1px solid #d1d1d1; }
      .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .summary {
          display: flex;
          width: calc(100% - 50px);
          flex-direction: column;
          align-items: flex-start;
          padding: 5px 10px; }
          .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .summary .timeline {
            font-size: 12px;
            color: #935802; }
          .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .summary .title {
            font-size: 16px;
            text-align: left; }
        .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .act {
          width: 50px;
          padding: 5px; }
          .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .act .btn {
            color: #ffffff;
            background-color: #444444;
            border-radius: 5px;
            cursor: pointer;
            padding: 5px; }
            .broadcast-dlg .broadcast-list .one-broadcast .broadcast-title-line .act .btn:hover {
              background-color: #b5023e; }
      .broadcast-dlg .broadcast-list .one-broadcast .broadcast-contents {
        display: none;
        width: 100%;
        font-size: 14px;
        text-align: left;
        padding: 10px;
        white-space: pre-line;
        background-color: #ffffff;
        user-select: text;
        box-shadow: 0px 0px 4px 0px #d3d3d3 inset;
        border-top: 1px solid #d1d1d1;
        border-left: 1px solid #d1d1d1;
        border-right: 1px solid #d1d1d1; }
        .broadcast-dlg .broadcast-list .one-broadcast .broadcast-contents a {
          background-color: #ffeb3b; }
  .broadcast-dlg .broadcast-list::-webkit-scrollbar {
    width: 3px; }
  .broadcast-dlg .broadcast-list::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .broadcast-dlg .broadcast-list::-webkit-scrollbar-thumb {
    background-color: #aa4242; }

/* マイ設定Window(スペースからのPR呟き) */
.my-setting-dlg {
  display: block;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .my-setting-dlg .p-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #303030;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold; }
  .my-setting-dlg .p-tab {
    display: flex;
    align-items: flex-end;
    height: 35px;
    border-bottom: 3px solid #666666; }
    .my-setting-dlg .p-tab .tab {
      padding: 3px 20px;
      color: #ffffff;
      background-color: #a9a9a9;
      border-radius: 0 7px 0 0;
      margin-right: 5px;
      white-space: nowrap;
      cursor: pointer; }
      @media screen and (max-width: 500px) {
        .my-setting-dlg .p-tab .tab {
          padding: 3px 5px; } }
      .my-setting-dlg .p-tab .tab:hover {
        background-color: #ffc107; }
      .my-setting-dlg .p-tab .tab.on {
        background-color: #666666;
        cursor: default; }
        .my-setting-dlg .p-tab .tab.on:hover {
          background-color: #666666; }
  .my-setting-dlg .pr-twit {
    display: block; }
    .my-setting-dlg .pr-twit .p-body {
      display: block;
      width: 100%;
      height: calc(100% - 118px);
      padding: 20px;
      background-color: #ededed; }
      @media screen and (max-width: 500px) {
        .my-setting-dlg .pr-twit .p-body {
          padding: 20px 7px; } }
      .my-setting-dlg .pr-twit .p-body .txt {
        width: 100%;
        font-size: 14px;
        text-align: left; }
      .my-setting-dlg .pr-twit .p-body .contents {
        width: 100%;
        display: flex; }
        .my-setting-dlg .pr-twit .p-body .contents textarea {
          width: calc(100% - 40px);
          height: 137px;
          padding: 10px; }
        .my-setting-dlg .pr-twit .p-body .contents .btn {
          width: 35px;
          height: 137px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 5px;
          color: #ffffff;
          background-color: #444444;
          border-radius: 3px;
          writing-mode: vertical-rl;
          cursor: pointer; }
          .my-setting-dlg .pr-twit .p-body .contents .btn:hover {
            color: #ffd541; }
          .my-setting-dlg .pr-twit .p-body .contents .btn:active {
            color: #ffffff;
            width: 33px;
            height: 128px;
            margin: 1px 1px 1px 6px; }
      .my-setting-dlg .pr-twit .p-body .control {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: 18px; }
        .my-setting-dlg .pr-twit .p-body .control .btn {
          width: 92px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #ffffff;
          background-color: #444444;
          border: 1px solid #3a3a3a;
          box-shadow: 1px 1px 2px 0px #666666;
          border-radius: 3px;
          cursor: pointer; }
          .my-setting-dlg .pr-twit .p-body .control .btn .img {
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 50px;
            height: 39px; }
          .my-setting-dlg .pr-twit .p-body .control .btn .img1 {
            background-image: url(images/pr_tweet_sel_1.png); }
          .my-setting-dlg .pr-twit .p-body .control .btn .img2 {
            background-image: url(images/pr_tweet_sel_2.png); }
          .my-setting-dlg .pr-twit .p-body .control .btn .img3 {
            background-image: url(images/pr_tweet_sel_3.png); }
          .my-setting-dlg .pr-twit .p-body .control .btn .txt {
            font-size: 12px;
            text-align: center; }
          .my-setting-dlg .pr-twit .p-body .control .btn:hover {
            color: #ffd541; }
            .my-setting-dlg .pr-twit .p-body .control .btn:hover .img1 {
              background-image: url(images/pr_tweet_sel_1a.png); }
            .my-setting-dlg .pr-twit .p-body .control .btn:hover .img2 {
              background-image: url(images/pr_tweet_sel_2a.png); }
            .my-setting-dlg .pr-twit .p-body .control .btn:hover .img3 {
              background-image: url(images/pr_tweet_sel_3a.png); }
          .my-setting-dlg .pr-twit .p-body .control .btn:active {
            color: #ffffff;
            width: 90px;
            height: 68px;
            margin: 1px; }
        .my-setting-dlg .pr-twit .p-body .control .on {
          background-color: #00ad52;
          border: 1px solid #ffffff;
          box-shadow: none;
          cursor: default;
          pointer-events: none; }
    .my-setting-dlg .pr-twit .p-option {
      width: 100%;
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ddd9d2; }
      .my-setting-dlg .pr-twit .p-option .btn {
        width: 120px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background-color: #444444;
        box-shadow: 1px 1px 2px 0px #666666;
        font-size: 14px;
        padding: 2px 0;
        border-radius: 3px;
        margin: 0 10px;
        cursor: pointer; }
        .my-setting-dlg .pr-twit .p-option .btn:hover {
          color: #ffd541; }
        .my-setting-dlg .pr-twit .p-option .btn:active {
          color: #ffffff;
          width: 118px;
          height: 36px;
          margin: 1px 11px; }
      .my-setting-dlg .pr-twit .p-option .on {
        background-color: #eb5454;
        border: 1px solid #ffffff;
        box-shadow: none;
        cursor: default;
        pointer-events: none; }
  .my-setting-dlg .space-avatar {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 65px); }
    .my-setting-dlg .space-avatar .space-avatar-list {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start; }
      .my-setting-dlg .space-avatar .space-avatar-list .space {
        margin: 9px;
        position: relative;
        width: 120px;
        height: 150px;
        border: 1px solid #eaeaea;
        box-sizing: content-box;
        cursor: pointer; }
        @media screen and (max-width: 500px) {
          .my-setting-dlg .space-avatar .space-avatar-list .space {
            width: 91px;
            height: 114px; } }
        .my-setting-dlg .space-avatar .space-avatar-list .space:hover {
          margin: 4px;
          border: 6px solid #ffec91; }
        .my-setting-dlg .space-avatar .space-avatar-list .space.on {
          margin: 4px;
          border: 6px solid #dfa700;
          box-shadow: 2px 2px 4px 0px #444444;
          cursor: default; }
          .my-setting-dlg .space-avatar .space-avatar-list .space.on:hover {
            border: 6px solid #dfa700; }
        .my-setting-dlg .space-avatar .space-avatar-list .space img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: contain; }
        .my-setting-dlg .space-avatar .space-avatar-list .space .default-txt {
          position: absolute;
          left: 2%;
          bottom: 1.5%;
          width: 96%;
          padding: 5px 5px;
          background-color: #eaea00;
          border: 1px solid #a7a71a;
          font-size: 12px;
          line-height: 12px; }
          .my-setting-dlg .space-avatar .space-avatar-list .space .default-txt .sub {
            color: #9d0000;
            font-size: 11px; }
  .my-setting-dlg .space-avatar::-webkit-scrollbar {
    width: 3px; }
  .my-setting-dlg .space-avatar::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .my-setting-dlg .space-avatar::-webkit-scrollbar-thumb {
    background-color: #aa4242; }
  .my-setting-dlg .wait {
    display: none;
    position: absolute;
    width: 66px;
    height: 66px;
    left: calc(50% - 33px);
    top: calc(50% - 33px); }
    .my-setting-dlg .wait img {
      width: 100%;
      height: 100%; }

/* 主催者室Window */
.owner-room-dlg {
  display: block;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .owner-room-dlg .wait-block {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px); }
    .owner-room-dlg .wait-block .wait {
      width: 100%;
      height: 100%;
      background-image: url(images/loading.gif);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
  .owner-room-dlg .p-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #303030; }
    .owner-room-dlg .p-title .ico {
      color: #ffffff;
      font-size: 22px;
      font-weight: bold;
      margin-right: 5px; }
    .owner-room-dlg .p-title .txt {
      color: #ffffff;
      font-size: 16px;
      font-weight: bold; }
  .owner-room-dlg .p-body {
    display: block;
    width: 100%;
    height: calc(100% - 30px);
    overflow-y: scroll; }
    .owner-room-dlg .p-body .item {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 3px 5px 3px 0;
      border-bottom: 1px solid #e5e5e5;
      background-color: #f7f7f7;
      margin-bottom: 1px; }
      .owner-room-dlg .p-body .item .symbol {
        width: 80px;
        height: 80px;
        background-color: #685959;
        border-radius: 5px; }
        @media screen and (max-width: 500px) {
          .owner-room-dlg .p-body .item .symbol {
            width: 60px;
            height: 60px; } }
        .owner-room-dlg .p-body .item .symbol img {
          width: 100%;
          height: 100%; }
      .owner-room-dlg .p-body .item .contents {
        width: calc(100% - 130px);
        text-align: left;
        padding: 0 5px;
        position: relative; }
        @media screen and (max-width: 500px) {
          .owner-room-dlg .p-body .item .contents {
            width: calc(100% - 110px); } }
        .owner-room-dlg .p-body .item .contents .title {
          width: 100%;
          font-size: 18px;
          font-weight: bold; }
          @media screen and (max-width: 800px) {
            .owner-room-dlg .p-body .item .contents .title {
              font-size: 18px; } }
          @media screen and (max-width: 320px) {
            .owner-room-dlg .p-body .item .contents .title {
              font-size: 16px; } }
        .owner-room-dlg .p-body .item .contents .explain {
          width: 100%;
          font-size: 14px; }
          @media screen and (max-width: 800px) {
            .owner-room-dlg .p-body .item .contents .explain {
              font-size: 13px; } }
          @media screen and (max-width: 320px) {
            .owner-room-dlg .p-body .item .contents .explain {
              font-size: 12px; } }
        .owner-room-dlg .p-body .item .contents .opt {
          width: 100%;
          font-size: 12px;
          color: #bf0909; }
          @media screen and (max-width: 320px) {
            .owner-room-dlg .p-body .item .contents .opt {
              font-size: 11px; } }
      .owner-room-dlg .p-body .item .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 40px;
        color: #ffffff;
        border-radius: 2px;
        background-color: #c1c1c1;
        border: 1px solid #a7a7a7;
        cursor: default;
        pointer-events: none; }
      .owner-room-dlg .p-body .item .btn.active {
        background-color: #444444;
        border: 1px solid #3a3a3a;
        cursor: pointer;
        pointer-events: auto; }
        .owner-room-dlg .p-body .item .btn.active:hover {
          opacity: 0.8; }
        .owner-room-dlg .p-body .item .btn.active:active {
          margin: 1px;
          width: 48px;
          height: 38px; }
      .owner-room-dlg .p-body .item .btn.on {
        background-color: #00ad52;
        border: 1px solid #007c3b; }
      .owner-room-dlg .p-body .item .btn.on2 {
        background-color: #e91e63;
        border: 1px solid #ab1c4d; }
      .owner-room-dlg .p-body .item .btn.set {
        background-color: #b5023e;
        border: 1px solid #83002c; }
      .owner-room-dlg .p-body .item .detail-setting {
        display: none;
        width: 100%;
        background-color: #f4f5ed;
        border-left: 1px solid #939393;
        border-top: 1px solid #939393;
        border-right: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        box-shadow: 1px 1px 3px 0px #d9d9d9;
        margin: 5px 0 5px;
        padding: 10px; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-title {
          width: 100%;
          font-size: 16px;
          font-weight: bold;
          color: #3e3e3e;
          text-align: left;
          margin-bottom: 5px; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-title .opt {
            color: #880000;
            font-size: 12px; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-subtitle {
          width: 100%;
          font-size: 14px;
          color: #0092eb;
          text-align: left; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-subtitle .spot {
            color: #d9045b;
            font-size: 16px;
            font-weight: bold; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-block {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 5px 0; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-block .caption {
            margin-right: 15px;
            white-space: nowrap; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-block select {
            border: 1px solid #c9c9c9;
            padding: 5px 1px;
            border-radius: 5px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block select option:disabled {
              color: #ff9393;
              font-style: italic; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 {
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 10px 0; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            margin-bottom: 4px;
            padding-left: 10px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block .caption {
              width: 70px;
              margin-right: 7px;
              white-space: nowrap; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block select, .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='text'], .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='date'], .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='time'], .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block textarea {
              border: 1px solid #c9c9c9;
              padding: 5px 5px;
              border-radius: 5px; }
              .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block select option:disabled, .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='text'] option:disabled, .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='date'] option:disabled, .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='time'] option:disabled, .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block textarea option:disabled {
                color: #ff9393;
                font-style: italic; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block input[type='text'] {
              width: calc(100% - 70px); }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block textarea {
              width: calc(100% - 70px);
              height: 120px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block .opt {
              color: #880000;
              font-size: 12px;
              width: 60px;
              text-align: right; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-block-2 .block .changed {
              border: 1px solid #672a07;
              background-color: #ffe6d894; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-input {
          width: 100%;
          display: none;
          align-items: center;
          flex-wrap: wrap;
          padding: 5px 0; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-input .seperate {
            display: flex;
            align-items: center;
            flex-wrap: nowrap; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-input .caption {
            margin-right: 15px;
            white-space: nowrap; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-input input[type='text'] {
            width: 50px;
            margin: 0 3px;
            border: 1px solid #b1b1b1;
            padding: 5px 5px;
            border-radius: 5px; }
          .owner-room-dlg .p-body .item .detail-setting .detail-item-input select {
            border: 1px solid #c9c9c9;
            padding: 5px 1px;
            border-radius: 5px;
            margin-right: 10px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-item-input select option:disabled {
              color: #ff9393;
              font-style: italic; }
        .owner-room-dlg .p-body .item .detail-setting .file-select {
          padding: 5px 10px;
          border: 1px dotted #e1e1e1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          overflow: hidden;
          margin: 5px 0px; }
          .owner-room-dlg .p-body .item .detail-setting .file-select .sub-title {
            width: 100%;
            text-align: left;
            color: #0083d3; }
          .owner-room-dlg .p-body .item .detail-setting .file-select .file-up {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin: 5px 0; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up .title {
              width: 80px;
              font-weight: bold; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up label {
              color: #3c3c3c;
              background-color: #f5f5f5;
              border: 1px solid #d9d9d9;
              margin: 0 10px 0  0;
              padding: 2px 15px;
              white-space: nowrap;
              cursor: pointer; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up p {
              word-break: break-all;
              margin: 0; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up input[type='file'] {
              display: none; }
          .owner-room-dlg .p-body .item .detail-setting .file-select .file-up-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px 10px;
            margin-left: 10px;
            border-radius: 7px;
            width: 85px;
            height: 35px;
            color: #ffffff;
            background-color: #b5023e;
            white-space: nowrap;
            cursor: pointer; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up-btn:hover {
              opacity: 0.7; }
            .owner-room-dlg .p-body .item .detail-setting .file-select .file-up-btn.disabled {
              pointer-events: none;
              opacity: 0.3; }
              .owner-room-dlg .p-body .item .detail-setting .file-select .file-up-btn.disabled:hover {
                opacity: 0.3; }
        .owner-room-dlg .p-body .item .detail-setting .detail-item-option {
          width: 100%;
          font-size: 12px;
          line-height: 15px;
          color: #9d5b5b;
          text-align: left;
          margin-top: 5px; }
        .owner-room-dlg .p-body .item .detail-setting .detail-control {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          margin-top: 10px; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px 10px;
            min-width: 85px;
            height: 35px;
            color: #ffffff;
            background-color: #333333;
            border-radius: 10px;
            margin: 0 5px;
            white-space: nowrap;
            cursor: pointer; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn:hover {
              opacity: 0.7; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn.preview {
            background-color: #0170bf; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn.set {
            background-color: #b5023e; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn.reset {
            background-color: #6e6101; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .ctl-btn.disabled {
            pointer-events: none;
            opacity: 0.3; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item {
              display: block;
              width: 90px;
              position: relative;
              margin-top: 10px; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item img {
                width: 60px;
                height: 60px;
                object-fit: contain;
                background-color: #aaaaaa4a; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item img:hover {
                  opacity: 0.7; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .del-tag {
                position: absolute;
                right: 5px;
                top: -6px;
                cursor: pointer;
                background: url(images/close.png) no-repeat 0 0;
                background-size: contain;
                width: 22px;
                height: 22px;
                text-indent: -9999px; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .del-tag:hover {
                  background: url(images/close_red.png) no-repeat 0 0;
                  background-size: contain; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .priview-tag {
                position: absolute;
                width: 26px;
                height: 20px;
                left: calc(50% - 13px);
                top: calc(30px - 10px);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #edff00;
                background-color: #3d3d3dd4;
                font-size: 12px;
                padding: 3px 5px;
                border-radius: 5px;
                border: 1px solid #edff00; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .discription {
                width: 100%;
                font-size: 12px;
                font-weight: bold;
                color: #4b4b4b; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .pos-control {
                display: flex;
                width: 100%;
                padding: 1px;
                justify-content: space-between;
                flex-wrap: wrap; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .pos-control select {
                  width: 100%;
                  height: 22px;
                  border: 1px solid #b1b1b1;
                  border-radius: 5px;
                  margin-bottom: 3px; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .pos-control input[type='text'] {
                  width: 43px;
                  height: 22px;
                  border: 1px solid #b1b1b1;
                  border-radius: 5px; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .pos-control .update {
                  width: 100%;
                  margin-top: 3px;
                  color: #ffffff;
                  background-color: #414141;
                  border-radius: 4px;
                  cursor: pointer; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .one-item .pos-control .update:hover {
                    opacity: 0.8; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list .mgn-bottom {
              margin-bottom: 10px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table {
              width: 100%; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr th {
                background-color: #daddcb;
                white-space: nowrap; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td {
                text-align: center;
                padding: 3px 0; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td .btn {
                  width: unset;
                  height: unset;
                  color: #ffffff;
                  background-color: #333333;
                  font-size: 12px;
                  padding: 3px 5px;
                  border-radius: 5px;
                  cursor: pointer;
                  pointer-events: all;
                  white-space: nowrap;
                  border: unset; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td .btn:hover {
                    background-color: #b5023e; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td .fre-title {
                  width: 100%;
                  display: block;
                  text-align: left; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td .fre-contents {
                  width: 100%;
                  display: block;
                  text-align: left;
                  background-color: #ffffff;
                  white-space: pre-line;
                  padding: 5px 10px;
                  margin-bottom: 15px;
                  font-size: 12px;
                  line-height: 14px;
                  user-select: text;
                  border: 1px solid #cdcdcd;
                  border-radius: 5px;
                  box-shadow: 0px 0px 4px 0px #d3d3d3 inset; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .file-list table tr td .fre-contents a {
                    background-color: #ffeb3b;
                    line-height: 24px;
                    font-size: 12px; }
          .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar {
            width: 100%;
            margin-top: 30px; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .control {
              display: flex;
              align-items: center;
              justify-content: center; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 34px;
              height: 32px;
              color: #ffffff;
              background-color: #444444;
              border-radius: 3px;
              margin: 0 2px;
              cursor: pointer; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch:hover {
                opacity: 0.7; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch:active {
                width: 32px;
                height: 30px;
                margin: 1px 3px; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch.on {
                background-color: #00ad52;
                border: 1px solid #007c3b; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch.set {
                background-color: #4590b1;
                border: 1px solid #316d87; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .switch.unset {
                background-color: #b3496d;
                border: 1px solid #8d3855; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar select {
              height: 32px;
              padding: 0; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control {
              position: relative;
              border: 2px solid #868b60;
              border-radius: 5px;
              padding: 15px;
              display: flex;
              flex-direction: column; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control .title-tag {
                position: absolute;
                top: -22px;
                left: 10px;
                height: 22px;
                padding: 0 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                background-color: #868b60; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control .one-item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-bottom: 10px; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control .one-item:last-child {
                  margin-bottom: unset; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control .one-item .txt {
                  text-align: left; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-control .one-item .control {
                  display: flex; }
            .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list {
              width: 100%;
              margin-top: 15px;
              overflow-x: auto;
              scrollbar-width: thin;
              scrollbar-color: #17585d #ccc; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table {
                width: 100%;
                border-collapse: collapse; }
                .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr {
                  border-bottom: 1px solid #e5e7d4; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr:first-child {
                    border-top: 1px solid #e5e7d4; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr:last-child {
                    border-bottom: none; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr th {
                    white-space: nowrap;
                    background-color: #dedfd7; }
                  .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td {
                    white-space: nowrap;
                    padding: 0 1px;
                    border-right: 1px solid #e5e7d4;
                    text-align: -webkit-center; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td:last-child {
                      border-right: none; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td img {
                      width: 60px;
                      height: 60px;
                      object-fit: contain; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .arrow {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 26px;
                      height: 26px;
                      color: #ffffff;
                      background-color: #666666;
                      border-radius: 50%;
                      margin-left: 5px;
                      cursor: pointer; }
                      .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .arrow:hover {
                        opacity: 0.7; }
                      .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .arrow.disabled {
                        background-color: #cbcbcb;
                        pointer-events: none;
                        cursor: default; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .del-tag {
                      width: 26px;
                      height: 26px;
                      display: flex;
                      align-items: center;
                      color: #ad1549;
                      cursor: pointer; }
                      .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .del-tag:hover {
                        opacity: 0.7; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .name {
                      width: 70px;
                      height: 32px;
                      padding: 0 5px; }
                    .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list table tr td .comment {
                      width: 130px;
                      height: 32px;
                      padding: 0 5px; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list .npc-avatar::-webkit-scrollbar {
                height: 3px; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list .npc-avatar::-webkit-scrollbar-track {
                background-color: #cccccc; }
              .owner-room-dlg .p-body .item .detail-setting .detail-control .npc-avatar .npc-avatar-list .npc-avatar::-webkit-scrollbar-thumb {
                background-color: #aa4242; }
    .owner-room-dlg .p-body .item.inactive {
      opacity: 0.3;
      cursor: not-allowed;
      border-bottom: 1px solid #a5a5a5; }
      .owner-room-dlg .p-body .item.inactive .contents .btn {
        cursor: not-allowed; }
  .owner-room-dlg .p-body::-webkit-scrollbar {
    width: 3px; }
  .owner-room-dlg .p-body::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .owner-room-dlg .p-body::-webkit-scrollbar-thumb {
    background-color: #aa4242; }

/* フェードアウトメッセージ */
.fadeout-inform {
  position: absolute;
  width: 90%;
  height: 200px;
  left: 5%;
  top: calc(35% - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  z-index: 100002; }
  @media screen and (max-width: 800px) {
    .fadeout-inform {
      left: 0;
      width: 100%; } }
  @media screen and (max-width: 500px) {
    .fadeout-inform {
      left: 0;
      width: 100%; } }
  .fadeout-inform .direct-message {
    width: 80%;
    color: #ff007f;
    font-size: 40px;
    font-weight: bold;
    text-shadow: 1px 1px #ffffff; }
  .fadeout-inform .border-message {
    width: 75%;
    max-width: 750px;
    font-size: 25px;
    font-weight: bold;
    padding: 20px 10px;
    color: #ffffff;
    background-color: #4e4e4e;
    border: 2px solid #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 1px #333333; }
    @media screen and (max-width: 800px) {
      .fadeout-inform .border-message {
        width: 90%;
        font-size: 22px;
        padding: 18px 10px; } }
    @media screen and (max-width: 500px) {
      .fadeout-inform .border-message {
        width: 96%;
        font-size: 18px;
        padding: 15px 10px; } }

.broadcast {
  display: none;
  flex-wrap: wrap;
  align-content: flex-start;
  position: absolute;
  width: 400px;
  height: 350px;
  left: calc(50% - 200px);
  top: calc(50% - 175px);
  background-color: #ffffff;
  border: 4px solid #c7b299;
  border-radius: 10px;
  box-shadow: 3px 3px 15px 0px #000000c2;
  z-index: 4; }
  @media screen and (max-width: 800px) {
    .broadcast {
      width: 70%;
      height: 300px;
      left: 15%;
      top: calc(50% - 150px); } }
  @media screen and (max-width: 500px) {
    .broadcast {
      width: 85%;
      height: 300px;
      left: 10%;
      top: calc(50% - 150px); } }
  .broadcast .header {
    width: 100%;
    height: 40px;
    background-color: #998675; }
    .broadcast .header .speaker-left, .broadcast .header .speaker-right, .broadcast .header .speaker-left-center, .broadcast .header .speaker-right-center {
      position: absolute;
      width: 60px;
      top: -12px; }
    .broadcast .header .speaker-left, .broadcast .header .speaker-left-center {
      left: -15px; }
    .broadcast .header .speaker-right, .broadcast .header .speaker-right-center {
      right: -15px; }
    .broadcast .header .speaker-left-center, .broadcast .header .speaker-right-center {
      animation: resound 4.5s linear infinite; }
    .broadcast .header .broadcast-deco {
      position: absolute;
      width: 80px;
      left: -46px;
      top: -48px;
      z-index: 1; }
    .broadcast .header .broadcast-title {
      position: absolute;
      width: 96px;
      left: calc(50% - 48px);
      top: 6px; }
    .broadcast .header .broadcast-close {
      position: absolute;
      width: 25px;
      height: 25px;
      right: 54px;
      top: 7px;
      background-image: url(images/close2.png);
      cursor: pointer; }
      .broadcast .header .broadcast-close:hover {
        background-image: url(images/close2_red.png); }
  .broadcast .contents {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    color: #998675;
    padding: 20px 15px 15px; }
    .broadcast .contents .title {
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      word-break: break-all; }
    .broadcast .contents .timeline {
      width: 100%;
      font-size: 12px;
      text-align: right;
      margin-top: 7px; }
    .broadcast .contents .news {
      font-size: 14px;
      line-height: 25px;
      text-align: left;
      white-space: pre-line;
      margin-top: 7px; }
      .broadcast .contents .news a {
        background-color: #ffeb3b;
        font-size: 14px;
        line-height: 18px; }
  .broadcast .contents::-webkit-scrollbar {
    width: 3px; }
  .broadcast .contents::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .broadcast .contents::-webkit-scrollbar-thumb {
    background-color: #aa4242; }

.broadcast-smap {
  height: 300px;
  top: calc(50% - 150px); }
  @media screen and (max-width: 500px) {
    .broadcast-smap {
      height: 250px;
      top: calc(50% - 125px); } }

/* ==================================================================================================================
// ▼ アバターアニメーション
================================================================================================================== */
.furufuru {
  -webkit-animation: furufuru 4.5s linear infinite;
  animation: furufuru 4.5s linear infinite; }

@-webkit-keyframes furufuru {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  80% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  82% {
    -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
  84% {
    -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
  86% {
    -webkit-transform: scale(0.95, 1.05) translate(0%, -3%); }
  88% {
    -webkit-transform: scale(1.05, 0.95) translate(0%, 3%); }
  90% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); } }
@keyframes furufuru {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  80% {
    transform: scale(1, 1) translate(0%, 0%); }
  82% {
    transform: scale(0.95, 1.2) translate(0%, -10%); }
  84% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  86% {
    transform: scale(0.95, 1.05) translate(0%, -3%); }
  88% {
    transform: scale(1.05, 0.95) translate(0%, 3%); }
  90% {
    transform: scale(1, 1) translate(0%, 0%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
.korokoro {
  -webkit-animation: korokoro 3.0s linear infinite;
  animation: korokoro 3.0s linear infinite; }

@-webkit-keyframes korokoro {
  0% {
    -webkit-transform: translate(0%, 0%); }
  40% {
    -webkit-transform: translate(0%, 0%); }
  45% {
    -webkit-transform: translate(10%, 0%) rotate(10deg); }
  50% {
    -webkit-transform: translate(20%, 0%) rotate(20deg); }
  52% {
    -webkit-transform: translate(-10%, 0%) rotate(-10deg); }
  55% {
    -webkit-transform: translate(-15%, 0%) rotate(-15deg); }
  60% {
    -webkit-transform: translate(10%, 0%) rotate(10deg); }
  62% {
    -webkit-transform: translate(15%, 0%) rotate(15deg); }
  67% {
    -webkit-transform: translate(-5%, 0%) rotate(-5deg); }
  70% {
    -webkit-transform: translate(-7%, 0%) rotate(-7deg); }
  75% {
    -webkit-transform: translate(0%, 0%) rotate(0deg); }
  100% {
    -webkit-transform: translate(0%, 0%) rotate(0deg); } }
@keyframes korokoro {
  0% {
    transform: translate(0%, 0%); }
  40% {
    transform: translate(0%, 0%); }
  45% {
    transform: translate(10%, 0%) rotate(10deg); }
  50% {
    transform: translate(20%, 0%) rotate(20deg); }
  52% {
    transform: translate(-10%, 0%) rotate(-10deg); }
  55% {
    transform: translate(-15%, 0%) rotate(-15deg); }
  60% {
    transform: translate(10%, 0%) rotate(10deg); }
  62% {
    transform: translate(15%, 0%) rotate(15deg); }
  67% {
    transform: translate(-5%, 0%) rotate(-5deg); }
  70% {
    transform: translate(-7%, 0%) rotate(-7deg); }
  75% {
    transform: translate(0%, 0%) rotate(0deg); }
  100% {
    transform: translate(0%, 0%) rotate(0deg); } }
.purun {
  -webkit-animation: purun 3.0s linear infinite;
  animation: purun 3.0s linear infinite; }

@-webkit-keyframes purun {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  40% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  42% {
    -webkit-transform: scale(0.95, 0.95) translate(0%, 5%); }
  45% {
    -webkit-transform: scale(1.2, 0.85) translate(0%, 10%); }
  50% {
    -webkit-transform: scale(0.85, 1.2) translate(0%, -10%); }
  55% {
    -webkit-transform: scale(1.05, 0.95) translate(0%, 5%); }
  60% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); } }
@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  40% {
    transform: scale(1, 1) translate(0%, 0%); }
  42% {
    transform: scale(0.95, 0.95) translate(0%, 5%); }
  45% {
    transform: scale(1.2, 0.85) translate(0%, 10%); }
  50% {
    transform: scale(0.85, 1.2) translate(0%, -10%); }
  55% {
    transform: scale(1.05, 0.95) translate(0%, 5%); }
  60% {
    transform: scale(1, 1) translate(0%, 0%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
/* whole-body用 */
.purun-small {
  -webkit-animation: purun-small 3.0s linear infinite;
  animation: purun-small 3.0s linear infinite; }

@-webkit-keyframes purun-small {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  40% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  42% {
    -webkit-transform: scale(0.975, 0.975) translate(0%, 2.5%); }
  45% {
    -webkit-transform: scale(1.1, 0.925) translate(0%, 5%); }
  50% {
    -webkit-transform: scale(0.925, 1.1) translate(0%, -5%); }
  55% {
    -webkit-transform: scale(1.025, 0.975) translate(0%, 2.5%); }
  60% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); } }
@keyframes purun-small {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  40% {
    transform: scale(1, 1) translate(0%, 0%); }
  42% {
    transform: scale(0.975, 0.975) translate(0%, 2.5%); }
  45% {
    transform: scale(1.1, 0.925) translate(0%, 5%); }
  50% {
    transform: scale(0.925, 1.1) translate(0%, -5%); }
  55% {
    transform: scale(1.025, 0.975) translate(0%, 2.5%); }
  60% {
    transform: scale(1, 1) translate(0%, 0%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
.bound {
  -webkit-animation: bound .25s linear infinite;
  animation: bound .25s linear infinite; }

@-webkit-keyframes bound {
  0% {
    -webkit-transform: translateY(0); }
  25% {
    -webkit-transform: translateY(-15px); }
  50% {
    -webkit-transform: translateY(-30px) scaleX(0.9) scaleY(1.1); }
  75% {
    -webkit-transform: translateY(-15px); }
  100% {
    -webkit-transform: translateY(5px) scaleX(1.1) scaleY(0.85); } }
@keyframes bound {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(-15px); }
  50% {
    transform: translateY(-30px) scaleX(0.9) scaleY(1.1); }
  75% {
    transform: translateY(-15px); }
  100% {
    transform: translateY(5px) scaleX(1.1) scaleY(0.85); } }
.jump {
  /*
  -webkit-animation: jump 0.9s linear 0s 1;
  animation: jump 0.9s linear 0s 1;
  */
  -webkit-animation: jump .6s linear infinite;
  animation: jump .6s linear infinite; }

@-webkit-keyframes jump {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  10% {
    -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
  40% {
    -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
  50% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  60% {
    -webkit-transform: scale(0.9, 1.2) translate(0%, -100%); }
  75% {
    -webkit-transform: scale(0.9, 1.2) translate(0%, -20%); }
  85% {
    -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); } }
@keyframes jump {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  10% {
    transform: scale(1.1, 0.9) translate(0%, 5%); }
  40% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  50% {
    transform: scale(1, 1) translate(0%, 0%); }
  60% {
    transform: scale(0.9, 1.2) translate(0%, -100%); }
  75% {
    transform: scale(0.9, 1.2) translate(0%, -20%); }
  85% {
    transform: scale(1.2, 0.8) translate(0%, 15%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
.no-use {
  -webkit-animation: no-use 1.5s 1;
  animation: no-use 1.5s 1; }

@keyframes no-use {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg) scale(1, 1); }
  1% {
    transform: translate(15px, 0px) rotateZ(-2deg) scale(0.9, 1); }
  2% {
    transform: translate(0px, 0px) rotateZ(2deg) scale(1, 1); }
  3% {
    transform: translate(15px, 0px) rotateZ(0deg) scale(0.95, 1); }
  4% {
    transform: translate(0px, 0px) rotateZ(-1deg) scale(1, 1); }
  5% {
    transform: translate(12px, 0px) rotateZ(0deg); }
  6% {
    transform: translate(0px, 0px) rotateZ(1deg); }
  7% {
    transform: translate(12px, 0px) rotateZ(0deg); }
  8% {
    transform: translate(0px, 0px); }
  9% {
    transform: translate(9px, 0px); }
  10% {
    transform: translate(0px, 0px); }
  11% {
    transform: translate(9px, 0px); }
  12% {
    transform: translate(0px, 0px); }
  13% {
    transform: translate(9px, 0px); }
  14% {
    transform: translate(0px, 0px); }
  15% {
    transform: translate(9px, 0px); }
  16% {
    transform: translate(0px, 0px); }
  17% {
    transform: translate(6px, 0px); }
  18% {
    transform: translate(0px, 0px); }
  19% {
    transform: translate(6px, 0px); }
  20% {
    transform: translate(0px, 0px); }
  21% {
    transform: translate(6px, 0px); }
  22% {
    transform: translate(0px, 0px); }
  23% {
    transform: translate(6px, 0px); }
  24% {
    transform: translate(0px, 0px); }
  25% {
    transform: translate(3px, 0px); }
  26% {
    transform: translate(0px, 0px); }
  27% {
    transform: translate(3px, 0px); }
  28% {
    transform: translate(0px, 0px); }
  29% {
    transform: translate(3px, 0px); }
  30% {
    transform: translate(0px, 0px); }
  31% {
    transform: translate(3px, 0px); }
  32% {
    transform: translate(0px, 0px); }
  33% {
    transform: translate(2px, 0px); }
  34% {
    transform: translate(0px, 0px); }
  35% {
    transform: translate(2px, 0px); }
  36% {
    transform: translate(0px, 0px); }
  37% {
    transform: translate(2px, 0px); }
  38% {
    transform: translate(0px, 0px); }
  39% {
    transform: translate(2px, 0px); }
  40% {
    transform: translate(0px, 0px); }
  41% {
    transform: translate(1px, 0px); }
  42% {
    transform: translate(0px, 0px); }
  43% {
    transform: translate(1px, 0px); }
  44% {
    transform: translate(0px, 0px); }
  45% {
    transform: translate(1px, 0px); }
  46% {
    transform: translate(0px, 0px); }
  47% {
    transform: translate(1px, 0px); }
  48% {
    transform: translate(0px, 0px); }
  49% {
    transform: translate(1px, 0px); }
  50% {
    transform: translate(0px, 0px); }
  51% {
    transform: translate(1px, 0px); }
  52% {
    transform: translate(0px, 0px); }
  53% {
    transform: translate(1px, 0px); }
  54% {
    transform: translate(0px, 0px); }
  55% {
    transform: translate(1px, 0px); }
  56% {
    transform: translate(0px, 0px); }
  57% {
    transform: translate(1px, 0px); }
  58% {
    transform: translate(0px, 0px); }
  59% {
    transform: translate(1px, 0px); }
  60% {
    transform: translate(0px, 0px); }
  61% {
    transform: translate(1px, 0px); }
  62% {
    transform: translate(0px, 0px); }
  63% {
    transform: translate(1px, 0px); }
  64% {
    transform: translate(0px, 0px); }
  65% {
    transform: translate(1px, 0px); }
  66% {
    transform: translate(0px, 0px); }
  67% {
    transform: translate(1px, 0px); }
  68% {
    transform: translate(0px, 0px); }
  69% {
    transform: translate(1px, 0px); }
  70% {
    transform: translate(0px, 0px); }
  71% {
    transform: translate(1px, 0px); }
  72% {
    transform: translate(0px, 0px); }
  73% {
    transform: translate(1px, 0px); }
  74% {
    transform: translate(0px, 0px); }
  75% {
    transform: translate(1px, 0px); }
  76% {
    transform: translate(0px, 0px); }
  77% {
    transform: translate(1px, 0px); }
  78% {
    transform: translate(0px, 0px); }
  100% {
    transform: translate(0px, 0px); } }
.here {
  -webkit-animation: here 1.3s 1;
  animation: here 1.3s 1; }

@-webkit-keyframes here {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }
@keyframes here {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }
/* クリック座標のアニメ */
/* iOS版chromeでCSSのtransitionが動作しない https://teratail.com/questions/245967 */
.tick {
  -webkit-animation: tick 0.3s linear 0s;
  animation: tick 0.3s linear 0s;
  background-color: #b6e2f9;
  border-radius: 50%;
  border: 4px solid #a8bcc7;
  position: absolute;
  z-index: 100; }

@-webkit-keyframes tick {
  0% {
    width: 0;
    height: 0;
    -webkit-transform: translate(0, 0);
    opacity: 1; }
  100% {
    width: 80px;
    height: 80px;
    -webkit-transform: translate(-40px, -40px);
    /*高さの半分の値*/
    opacity: 0; } }
@keyframes tick {
  0% {
    width: 0;
    height: 0;
    transform: translate(0, 0);
    opacity: 1; }
  100% {
    width: 80px;
    height: 80px;
    transform: translate(-40px, -40px);
    /*高さの半分の値*/
    opacity: 0; } }
.tick2 {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  z-index: 100;
  background-color: #c7c7c7b5;
  -webkit-animation: tick2 0.3s linear 0s;
  animation: tick2 0.3s linear 0s; }

@-webkit-keyframes tick2 {
  0% {
    background-color: #c7c7c7b5; }
  50% {
    background-color: #c7c7c761; }
  100% {
    background-color: #c7c7c700; } }
@keyframes tick2 {
  0% {
    background-color: #c7c7c7b5; }
  50% {
    background-color: #c7c7c761; }
  100% {
    background-color: #c7c7c700; } }
/* ツイットアニメ */
.twit {
  -webkit-animation: twit 3.5s linear 0s;
  animation: twit 3.5s linear 0s; }

@-webkit-keyframes twit {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0px);
    opacity: 1; }
  20% {
    -webkit-transform: scale(1, 1) translate(0%, -16px);
    opacity: 1; }
  40% {
    -webkit-transform: scale(1, 1) translate(0%, -32px);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.2, 1) translate(0%, -40px);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1, 1) translate(0%, -48px);
    opacity: 0.85; }
  70% {
    -webkit-transform: scale(1.1, 1) translate(0%, -56px);
    opacity: 0.75; }
  80% {
    -webkit-transform: scale(1, 1) translate(0%, -64px);
    opacity: 0.45; }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, -80px);
    opacity: 0; } }
@keyframes twit {
  0% {
    transform: scale(1, 1) translate(0%, 0px);
    opacity: 1; }
  20% {
    transform: scale(1, 1) translate(0%, -16px);
    opacity: 1; }
  40% {
    transform: scale(1, 1) translate(0%, -32px);
    opacity: 1; }
  50% {
    transform: scale(1.2, 1) translate(0%, -40px);
    opacity: 1; }
  60% {
    transform: scale(1, 1) translate(0%, -48px);
    opacity: 0.85; }
  70% {
    transform: scale(1.1, 1) translate(0%, -56px);
    opacity: 0.75; }
  80% {
    transform: scale(1, 1) translate(0%, -64px);
    opacity: 0.45; }
  100% {
    transform: scale(1, 1) translate(0%, -80px);
    opacity: 0; } }
/*ざわ...*/
/*ざわっざわっ*/
@-webkit-keyframes noise-anim-zawazawa {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0px);
    opacity: 0; }
  20% {
    -webkit-transform: scale(1, 1) translate(0%, -16px);
    opacity: 0.5; }
  40% {
    -webkit-transform: scale(1, 1) translate(0%, -32px);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.2, 1) translate(0%, -40px);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1, 1) translate(0%, -48px);
    opacity: 0.85; }
  70% {
    -webkit-transform: scale(1.1, 1) translate(0%, -56px);
    opacity: 0.75; }
  80% {
    -webkit-transform: scale(1, 1) translate(0%, -64px);
    opacity: 0.45; }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, -80px);
    opacity: 0; } }
@keyframes noise-anim-zawazawa {
  0% {
    transform: scale(1, 1) translate(0%, 0px);
    opacity: 0; }
  20% {
    transform: scale(1, 1) translate(0%, -16px);
    opacity: 0.5; }
  40% {
    transform: scale(1, 1) translate(0%, -32px);
    opacity: 1; }
  50% {
    transform: scale(1.2, 1) translate(0%, -40px);
    opacity: 1; }
  60% {
    transform: scale(1, 1) translate(0%, -48px);
    opacity: 0.85; }
  70% {
    transform: scale(1.1, 1) translate(0%, -56px);
    opacity: 0.75; }
  80% {
    transform: scale(1, 1) translate(0%, -64px);
    opacity: 0.45; }
  100% {
    transform: scale(1, 1) translate(0%, -80px);
    opacity: 0; } }
/*ざわ2：絵文字*/
@-webkit-keyframes noise-anim-zawa2 {
  0% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1 !important; }
  25% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  26% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  30% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  31% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  59% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  65% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  66% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  99% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0 !important; } }
@keyframes noise-anim-zawa2 {
  0% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1 !important; }
  25% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  26% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  30% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  31% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  59% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  60% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  65% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  66% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  99% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  100% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0 !important; } }
/*ガﾔガﾔ*/
/*ワーッ!オーッ!*/
@-webkit-keyframes noise-anim-gyagya {
  0% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  25.4% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  25.5% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  26% {
    -webkit-transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  26.5% {
    -webkit-transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 1; }
  54.4% {
    -webkit-transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 1; }
  54.5% {
    -webkit-transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 0; }
  55% {
    -webkit-transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 0; }
  55.5% {
    -webkit-transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 1; }
  95% {
    -webkit-transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 0; } }
@keyframes noise-anim-gyagya {
  0% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  25.4% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 1; }
  25.5% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  26% {
    transform: scale(1, 1) translate(0px, 0px) rotate(0deg);
    opacity: 0; }
  26.5% {
    transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 1; }
  54.4% {
    transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 1; }
  54.5% {
    transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 0; }
  55% {
    transform: scale(1, 1) translate(-10px, 0px) rotate(-5deg);
    opacity: 0; }
  55.5% {
    transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 1; }
  95% {
    transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 1; }
  100% {
    transform: scale(1, 1) translate(10px, -10px) rotate(5deg);
    opacity: 0; } }
/*ドドドドッ!*/
/*ズドドーッ!*/
/*ゴゴゴゴォ!!*/
@-webkit-keyframes noise-anim-gogogo {
  0% {
    -webkit-transform: scale(0.9, 0.9) translate(0%, 0px);
    opacity: 1; }
  3% {
    -webkit-transform: scale(0.9, 0.9) translate(0%, 0px);
    opacity: 1; }
  3.3% {
    -webkit-transform: scale(1, 1) translate(0%, -2px);
    opacity: 1; }
  8% {
    -webkit-transform: scale(1, 1) translate(0%, -2px);
    opacity: 1; }
  8.3% {
    -webkit-transform: scale(1.1, 1.1) translate(0%, -5px);
    opacity: 1; }
  15% {
    -webkit-transform: scale(1.1, 1.1) translate(0%, -5px);
    opacity: 1; }
  15.3% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  20% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  50% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  51% {
    -webkit-transform: scale(0.8, 0.8) translate(0%, 5px) rotate(5deg);
    opacity: 1; }
  53% {
    -webkit-transform: scale(0.8, 0.8) translate(0%, 5px) rotate(5deg);
    opacity: 1; }
  53.3% {
    -webkit-transform: scale(0.9, 0.9) translate(0%, 2px) rotate(5deg);
    opacity: 1; }
  58% {
    -webkit-transform: scale(0.9, 0.9) translate(0%, 2px) rotate(5deg);
    opacity: 1; }
  58.3% {
    -webkit-transform: scale(1, 1) translate(0%, -2px) rotate(5deg);
    opacity: 1; }
  65% {
    -webkit-transform: scale(1, 1) translate(0%, -2px) rotate(5deg);
    opacity: 1; }
  65.3% {
    -webkit-transform: scale(1.1, 1.1) translate(0%, -7px) rotate(5deg);
    opacity: 1; }
  72% {
    -webkit-transform: scale(1.1, 1.1) translate(0%, -7px) rotate(5deg);
    opacity: 1; }
  72.3% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 1; }
  95% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 0; } }
@keyframes noise-anim-gogogo {
  0% {
    transform: scale(0.9, 0.9) translate(0%, 0px);
    opacity: 1; }
  3% {
    transform: scale(0.9, 0.9) translate(0%, 0px);
    opacity: 1; }
  3.3% {
    transform: scale(1, 1) translate(0%, -2px);
    opacity: 1; }
  8% {
    transform: scale(1, 1) translate(0%, -2px);
    opacity: 1; }
  8.3% {
    transform: scale(1.1, 1.1) translate(0%, -5px);
    opacity: 1; }
  15% {
    transform: scale(1.1, 1.1) translate(0%, -5px);
    opacity: 1; }
  15.3% {
    transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  20% {
    transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  50% {
    transform: scale(1.2, 1.2) translate(0%, -10px);
    opacity: 1; }
  51% {
    transform: scale(0.8, 0.8) translate(0%, 5px) rotate(5deg);
    opacity: 1; }
  53% {
    transform: scale(0.8, 0.8) translate(0%, 5px) rotate(5deg);
    opacity: 1; }
  53.3% {
    transform: scale(0.9, 0.9) translate(0%, 2px) rotate(5deg);
    opacity: 1; }
  58% {
    transform: scale(0.9, 0.9) translate(0%, 2px) rotate(5deg);
    opacity: 1; }
  58.3% {
    transform: scale(1, 1) translate(0%, -2px) rotate(5deg);
    opacity: 1; }
  65% {
    transform: scale(1, 1) translate(0%, -2px) rotate(5deg);
    opacity: 1; }
  65.3% {
    transform: scale(1.1, 1.1) translate(0%, -7px) rotate(5deg);
    opacity: 1; }
  72% {
    transform: scale(1.1, 1.1) translate(0%, -7px) rotate(5deg);
    opacity: 1; }
  72.3% {
    transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 1; }
  95% {
    transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 1; }
  100% {
    transform: scale(1.2, 1.2) translate(0%, -10px) rotate(5deg);
    opacity: 0; } }
@-webkit-keyframes rotate-anim {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }
@keyframes rotate-anim {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
/*PR呟きアニメ*/
@keyframes pr_default {
  0% {
    transform: translate(0%, 0%); }
  40% {
    transform: translate(0%, 0%); }
  45% {
    transform: translate(5%, 0%) rotate(5deg); }
  50% {
    transform: translate(10%, 0%) rotate(10deg); }
  52% {
    transform: translate(-5%, 0%) rotate(-5deg); }
  55% {
    transform: translate(-7%, 0%) rotate(-7deg); }
  60% {
    transform: translate(5%, 0%) rotate(5deg); }
  62% {
    transform: translate(7%, 0%) rotate(7deg); }
  67% {
    transform: translate(-2%, 0%) rotate(-2deg); }
  70% {
    transform: translate(-3%, 0%) rotate(-3deg); }
  75% {
    transform: translate(0%, 0%) rotate(0deg); }
  100% {
    transform: translate(0%, 0%) rotate(0deg); } }
@keyframes pr_bound {
  0% {
    transform: translateY(0); }
  48% {
    transform: translateY(0); }
  50% {
    transform: translateY(-15px); }
  52% {
    transform: translateY(-30px) scaleX(0.9) scaleY(1.1); }
  54% {
    transform: translateY(-15px); }
  56% {
    transform: translateY(5px) scaleX(1.1) scaleY(0.85); }
  58% {
    transform: translateY(0); }
  60% {
    transform: translateY(-5px); }
  62% {
    transform: translateY(-10px) scaleX(0.95) scaleY(1.05); }
  64% {
    transform: translateY(-5px); }
  66% {
    transform: translateY(3px) scaleX(1.05) scaleY(0.95); }
  68% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }
@keyframes pr_buruburu {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg) scale(1, 1); }
  1% {
    transform: translate(15px, 0px) rotateZ(-2deg) scale(0.9, 1); }
  2% {
    transform: translate(0px, 0px) rotateZ(2deg) scale(1, 1); }
  3% {
    transform: translate(15px, 0px) rotateZ(0deg) scale(0.95, 1); }
  4% {
    transform: translate(0px, 0px) rotateZ(-1deg) scale(1, 1); }
  5% {
    transform: translate(12px, 0px) rotateZ(0deg); }
  6% {
    transform: translate(0px, 0px) rotateZ(1deg); }
  7% {
    transform: translate(12px, 0px) rotateZ(0deg); }
  8% {
    transform: translate(0px, 0px); }
  9% {
    transform: translate(9px, 0px); }
  10% {
    transform: translate(0px, 0px); }
  11% {
    transform: translate(9px, 0px); }
  12% {
    transform: translate(0px, 0px); }
  13% {
    transform: translate(9px, 0px); }
  14% {
    transform: translate(0px, 0px); }
  15% {
    transform: translate(9px, 0px); }
  16% {
    transform: translate(0px, 0px); }
  17% {
    transform: translate(6px, 0px); }
  18% {
    transform: translate(0px, 0px); }
  19% {
    transform: translate(6px, 0px); }
  20% {
    transform: translate(0px, 0px); }
  21% {
    transform: translate(6px, 0px); }
  22% {
    transform: translate(0px, 0px); }
  23% {
    transform: translate(6px, 0px); }
  24% {
    transform: translate(0px, 0px); }
  25% {
    transform: translate(3px, 0px); }
  26% {
    transform: translate(0px, 0px); }
  27% {
    transform: translate(3px, 0px); }
  28% {
    transform: translate(0px, 0px); }
  29% {
    transform: translate(3px, 0px); }
  30% {
    transform: translate(0px, 0px); }
  31% {
    transform: translate(3px, 0px); }
  32% {
    transform: translate(0px, 0px); }
  33% {
    transform: translate(2px, 0px); }
  34% {
    transform: translate(0px, 0px); }
  35% {
    transform: translate(2px, 0px); }
  36% {
    transform: translate(0px, 0px); }
  37% {
    transform: translate(2px, 0px); }
  38% {
    transform: translate(0px, 0px); }
  39% {
    transform: translate(2px, 0px); }
  40% {
    transform: translate(0px, 0px); }
  41% {
    transform: translate(1px, 0px); }
  42% {
    transform: translate(0px, 0px); }
  43% {
    transform: translate(1px, 0px); }
  44% {
    transform: translate(0px, 0px); }
  45% {
    transform: translate(1px, 0px); }
  46% {
    transform: translate(0px, 0px); }
  47% {
    transform: translate(1px, 0px); }
  48% {
    transform: translate(0px, 0px); }
  49% {
    transform: translate(1px, 0px); }
  50% {
    transform: translate(0px, 0px); }
  51% {
    transform: translate(1px, 0px); }
  52% {
    transform: translate(0px, 0px); }
  53% {
    transform: translate(1px, 0px); }
  54% {
    transform: translate(0px, 0px); }
  55% {
    transform: translate(1px, 0px); }
  56% {
    transform: translate(0px, 0px); }
  57% {
    transform: translate(1px, 0px); }
  58% {
    transform: translate(0px, 0px); }
  59% {
    transform: translate(1px, 0px); }
  60% {
    transform: translate(0px, 0px); }
  61% {
    transform: translate(1px, 0px); }
  62% {
    transform: translate(0px, 0px); }
  63% {
    transform: translate(1px, 0px); }
  64% {
    transform: translate(0px, 0px); }
  65% {
    transform: translate(1px, 0px); }
  66% {
    transform: translate(0px, 0px); }
  67% {
    transform: translate(1px, 0px); }
  68% {
    transform: translate(0px, 0px); }
  69% {
    transform: translate(1px, 0px); }
  70% {
    transform: translate(0px, 0px); }
  71% {
    transform: translate(1px, 0px); }
  72% {
    transform: translate(0px, 0px); }
  73% {
    transform: translate(1px, 0px); }
  74% {
    transform: translate(0px, 0px); }
  75% {
    transform: translate(1px, 0px); }
  76% {
    transform: translate(0px, 0px); }
  77% {
    transform: translate(1px, 0px); }
  78% {
    transform: translate(0px, 0px); }
  100% {
    transform: translate(0px, 0px); } }
@media screen and (max-width: 800px) {
  @keyframes pr_default {
    0% {
      transform: scale(0.9) translate(0%, 0%); }
    40% {
      transform: scale(0.9) translate(0%, 0%); }
    45% {
      transform: scale(0.9) translate(5%, 0%) rotate(5deg); }
    50% {
      transform: scale(0.9) translate(10%, 0%) rotate(10deg); }
    52% {
      transform: scale(0.9) translate(-5%, 0%) rotate(-5deg); }
    55% {
      transform: scale(0.9) translate(-7%, 0%) rotate(-7deg); }
    60% {
      transform: scale(0.9) translate(5%, 0%) rotate(5deg); }
    62% {
      transform: scale(0.9) translate(7%, 0%) rotate(7deg); }
    67% {
      transform: scale(0.9) translate(-2%, 0%) rotate(-2deg); }
    70% {
      transform: scale(0.9) translate(-3%, 0%) rotate(-3deg); }
    75% {
      transform: scale(0.9) translate(0%, 0%) rotate(0deg); }
    100% {
      transform: scale(0.9) translate(0%, 0%) rotate(0deg); } }
  @keyframes pr_bound {
    0% {
      transform: scale(0.9) translateY(0); }
    48% {
      transform: scale(0.9) translateY(0); }
    50% {
      transform: scale(0.9) translateY(-15px); }
    52% {
      transform: scale(0.9) translateY(-30px) scaleX(0.9) scaleY(1.1); }
    54% {
      transform: scale(0.9) translateY(-15px); }
    56% {
      transform: scale(0.9) translateY(5px) scaleX(1.1) scaleY(0.85); }
    58% {
      transform: scale(0.9) translateY(0); }
    60% {
      transform: scale(0.9) translateY(-5px); }
    62% {
      transform: scale(0.9) translateY(-10px) scaleX(0.95) scaleY(1.05); }
    64% {
      transform: scale(0.9) translateY(-5px); }
    66% {
      transform: scale(0.9) translateY(3px) scaleX(1.05) scaleY(0.95); }
    68% {
      transform: scale(0.9) translateY(0); }
    100% {
      transform: scale(0.9) translateY(0); } }
  @keyframes pr_buruburu {
    0% {
      transform: scale(0.9) translate(0px, 0px) rotateZ(0deg) scale(1, 1); }
    1% {
      transform: scale(0.9) translate(15px, 0px) rotateZ(-2deg) scale(0.9, 1); }
    2% {
      transform: scale(0.9) translate(0px, 0px) rotateZ(2deg) scale(1, 1); }
    3% {
      transform: scale(0.9) translate(15px, 0px) rotateZ(0deg) scale(0.95, 1); }
    4% {
      transform: scale(0.9) translate(0px, 0px) rotateZ(-1deg) scale(1, 1); }
    5% {
      transform: scale(0.9) translate(12px, 0px) rotateZ(0deg); }
    6% {
      transform: scale(0.9) translate(0px, 0px) rotateZ(1deg); }
    7% {
      transform: scale(0.9) translate(12px, 0px) rotateZ(0deg); }
    8% {
      transform: scale(0.9) translate(0px, 0px); }
    9% {
      transform: scale(0.9) translate(9px, 0px); }
    10% {
      transform: scale(0.9) translate(0px, 0px); }
    11% {
      transform: scale(0.9) translate(9px, 0px); }
    12% {
      transform: scale(0.9) translate(0px, 0px); }
    13% {
      transform: scale(0.9) translate(9px, 0px); }
    14% {
      transform: scale(0.9) translate(0px, 0px); }
    15% {
      transform: scale(0.9) translate(9px, 0px); }
    16% {
      transform: scale(0.9) translate(0px, 0px); }
    17% {
      transform: scale(0.9) translate(6px, 0px); }
    18% {
      transform: scale(0.9) translate(0px, 0px); }
    19% {
      transform: scale(0.9) translate(6px, 0px); }
    20% {
      transform: scale(0.9) translate(0px, 0px); }
    21% {
      transform: scale(0.9) translate(6px, 0px); }
    22% {
      transform: scale(0.9) translate(0px, 0px); }
    23% {
      transform: scale(0.9) translate(6px, 0px); }
    24% {
      transform: scale(0.9) translate(0px, 0px); }
    25% {
      transform: scale(0.9) translate(3px, 0px); }
    26% {
      transform: scale(0.9) translate(0px, 0px); }
    27% {
      transform: scale(0.9) translate(3px, 0px); }
    28% {
      transform: scale(0.9) translate(0px, 0px); }
    29% {
      transform: scale(0.9) translate(3px, 0px); }
    30% {
      transform: scale(0.9) translate(0px, 0px); }
    31% {
      transform: scale(0.9) translate(3px, 0px); }
    32% {
      transform: scale(0.9) translate(0px, 0px); }
    33% {
      transform: scale(0.9) translate(2px, 0px); }
    34% {
      transform: scale(0.9) translate(0px, 0px); }
    35% {
      transform: scale(0.9) translate(2px, 0px); }
    36% {
      transform: scale(0.9) translate(0px, 0px); }
    37% {
      transform: scale(0.9) translate(2px, 0px); }
    38% {
      transform: scale(0.9) translate(0px, 0px); }
    39% {
      transform: scale(0.9) translate(2px, 0px); }
    40% {
      transform: scale(0.9) translate(0px, 0px); }
    41% {
      transform: scale(0.9) translate(1px, 0px); }
    42% {
      transform: scale(0.9) translate(0px, 0px); }
    43% {
      transform: scale(0.9) translate(1px, 0px); }
    44% {
      transform: scale(0.9) translate(0px, 0px); }
    45% {
      transform: scale(0.9) translate(1px, 0px); }
    46% {
      transform: scale(0.9) translate(0px, 0px); }
    47% {
      transform: scale(0.9) translate(1px, 0px); }
    48% {
      transform: scale(0.9) translate(0px, 0px); }
    49% {
      transform: scale(0.9) translate(1px, 0px); }
    50% {
      transform: scale(0.9) translate(0px, 0px); }
    51% {
      transform: scale(0.9) translate(1px, 0px); }
    52% {
      transform: scale(0.9) translate(0px, 0px); }
    53% {
      transform: scale(0.9) translate(1px, 0px); }
    54% {
      transform: scale(0.9) translate(0px, 0px); }
    55% {
      transform: scale(0.9) translate(1px, 0px); }
    56% {
      transform: scale(0.9) translate(0px, 0px); }
    57% {
      transform: scale(0.9) translate(1px, 0px); }
    58% {
      transform: scale(0.9) translate(0px, 0px); }
    59% {
      transform: scale(0.9) translate(1px, 0px); }
    60% {
      transform: scale(0.9) translate(0px, 0px); }
    61% {
      transform: scale(0.9) translate(1px, 0px); }
    62% {
      transform: scale(0.9) translate(0px, 0px); }
    63% {
      transform: scale(0.9) translate(1px, 0px); }
    64% {
      transform: scale(0.9) translate(0px, 0px); }
    65% {
      transform: scale(0.9) translate(1px, 0px); }
    66% {
      transform: scale(0.9) translate(0px, 0px); }
    67% {
      transform: scale(0.9) translate(1px, 0px); }
    68% {
      transform: scale(0.9) translate(0px, 0px); }
    69% {
      transform: scale(0.9) translate(1px, 0px); }
    70% {
      transform: scale(0.9) translate(0px, 0px); }
    71% {
      transform: scale(0.9) translate(1px, 0px); }
    72% {
      transform: scale(0.9) translate(0px, 0px); }
    73% {
      transform: scale(0.9) translate(1px, 0px); }
    74% {
      transform: scale(0.9) translate(0px, 0px); }
    75% {
      transform: scale(0.9) translate(1px, 0px); }
    76% {
      transform: scale(0.9) translate(0px, 0px); }
    77% {
      transform: scale(0.9) translate(1px, 0px); }
    78% {
      transform: scale(0.9) translate(0px, 0px); }
    100% {
      transform: scale(0.9) translate(0px, 0px); } } }
@media screen and (max-width: 500px) {
  @keyframes pr_default {
    0% {
      transform: scale(0.8) translate(0%, 0%); }
    40% {
      transform: scale(0.8) translate(0%, 0%); }
    45% {
      transform: scale(0.8) translate(5%, 0%) rotate(5deg); }
    50% {
      transform: scale(0.8) translate(10%, 0%) rotate(10deg); }
    52% {
      transform: scale(0.8) translate(-5%, 0%) rotate(-5deg); }
    55% {
      transform: scale(0.8) translate(-7%, 0%) rotate(-7deg); }
    60% {
      transform: scale(0.8) translate(5%, 0%) rotate(5deg); }
    62% {
      transform: scale(0.8) translate(7%, 0%) rotate(7deg); }
    67% {
      transform: scale(0.8) translate(-2%, 0%) rotate(-2deg); }
    70% {
      transform: scale(0.8) translate(-3%, 0%) rotate(-3deg); }
    75% {
      transform: scale(0.8) translate(0%, 0%) rotate(0deg); }
    100% {
      transform: scale(0.8) translate(0%, 0%) rotate(0deg); } }
  @keyframes pr_bound {
    0% {
      transform: scale(0.8) translateY(0); }
    48% {
      transform: scale(0.8) translateY(0); }
    50% {
      transform: scale(0.8) translateY(-15px); }
    52% {
      transform: scale(0.8) translateY(-30px) scaleX(0.9) scaleY(1.1); }
    54% {
      transform: scale(0.8) translateY(-15px); }
    56% {
      transform: scale(0.8) translateY(5px) scaleX(1.1) scaleY(0.85); }
    58% {
      transform: scale(0.8) translateY(0); }
    60% {
      transform: scale(0.8) translateY(-5px); }
    62% {
      transform: scale(0.8) translateY(-10px) scaleX(0.95) scaleY(1.05); }
    64% {
      transform: scale(0.8) translateY(-5px); }
    66% {
      transform: scale(0.8) translateY(3px) scaleX(1.05) scaleY(0.95); }
    68% {
      transform: scale(0.8) translateY(0); }
    100% {
      transform: scale(0.8) translateY(0); } }
  @keyframes pr_buruburu {
    0% {
      transform: scale(0.8) translate(0px, 0px) rotateZ(0deg) scale(1, 1); }
    1% {
      transform: scale(0.8) translate(15px, 0px) rotateZ(-2deg) scale(0.9, 1); }
    2% {
      transform: scale(0.8) translate(0px, 0px) rotateZ(2deg) scale(1, 1); }
    3% {
      transform: scale(0.8) translate(15px, 0px) rotateZ(0deg) scale(0.95, 1); }
    4% {
      transform: scale(0.8) translate(0px, 0px) rotateZ(-1deg) scale(1, 1); }
    5% {
      transform: scale(0.8) translate(12px, 0px) rotateZ(0deg); }
    6% {
      transform: scale(0.8) translate(0px, 0px) rotateZ(1deg); }
    7% {
      transform: scale(0.8) translate(12px, 0px) rotateZ(0deg); }
    8% {
      transform: scale(0.8) translate(0px, 0px); }
    9% {
      transform: scale(0.8) translate(9px, 0px); }
    10% {
      transform: scale(0.8) translate(0px, 0px); }
    11% {
      transform: scale(0.8) translate(9px, 0px); }
    12% {
      transform: scale(0.8) translate(0px, 0px); }
    13% {
      transform: scale(0.8) translate(9px, 0px); }
    14% {
      transform: scale(0.8) translate(0px, 0px); }
    15% {
      transform: scale(0.8) translate(9px, 0px); }
    16% {
      transform: scale(0.8) translate(0px, 0px); }
    17% {
      transform: scale(0.8) translate(6px, 0px); }
    18% {
      transform: scale(0.8) translate(0px, 0px); }
    19% {
      transform: scale(0.8) translate(6px, 0px); }
    20% {
      transform: scale(0.8) translate(0px, 0px); }
    21% {
      transform: scale(0.8) translate(6px, 0px); }
    22% {
      transform: scale(0.8) translate(0px, 0px); }
    23% {
      transform: scale(0.8) translate(6px, 0px); }
    24% {
      transform: scale(0.8) translate(0px, 0px); }
    25% {
      transform: scale(0.8) translate(3px, 0px); }
    26% {
      transform: scale(0.8) translate(0px, 0px); }
    27% {
      transform: scale(0.8) translate(3px, 0px); }
    28% {
      transform: scale(0.8) translate(0px, 0px); }
    29% {
      transform: scale(0.8) translate(3px, 0px); }
    30% {
      transform: scale(0.8) translate(0px, 0px); }
    31% {
      transform: scale(0.8) translate(3px, 0px); }
    32% {
      transform: scale(0.8) translate(0px, 0px); }
    33% {
      transform: scale(0.8) translate(2px, 0px); }
    34% {
      transform: scale(0.8) translate(0px, 0px); }
    35% {
      transform: scale(0.8) translate(2px, 0px); }
    36% {
      transform: scale(0.8) translate(0px, 0px); }
    37% {
      transform: scale(0.8) translate(2px, 0px); }
    38% {
      transform: scale(0.8) translate(0px, 0px); }
    39% {
      transform: scale(0.8) translate(2px, 0px); }
    40% {
      transform: scale(0.8) translate(0px, 0px); }
    41% {
      transform: scale(0.8) translate(1px, 0px); }
    42% {
      transform: scale(0.8) translate(0px, 0px); }
    43% {
      transform: scale(0.8) translate(1px, 0px); }
    44% {
      transform: scale(0.8) translate(0px, 0px); }
    45% {
      transform: scale(0.8) translate(1px, 0px); }
    46% {
      transform: scale(0.8) translate(0px, 0px); }
    47% {
      transform: scale(0.8) translate(1px, 0px); }
    48% {
      transform: scale(0.8) translate(0px, 0px); }
    49% {
      transform: scale(0.8) translate(1px, 0px); }
    50% {
      transform: scale(0.8) translate(0px, 0px); }
    51% {
      transform: scale(0.8) translate(1px, 0px); }
    52% {
      transform: scale(0.8) translate(0px, 0px); }
    53% {
      transform: scale(0.8) translate(1px, 0px); }
    54% {
      transform: scale(0.8) translate(0px, 0px); }
    55% {
      transform: scale(0.8) translate(1px, 0px); }
    56% {
      transform: scale(0.8) translate(0px, 0px); }
    57% {
      transform: scale(0.8) translate(1px, 0px); }
    58% {
      transform: scale(0.8) translate(0px, 0px); }
    59% {
      transform: scale(0.8) translate(1px, 0px); }
    60% {
      transform: scale(0.8) translate(0px, 0px); }
    61% {
      transform: scale(0.8) translate(1px, 0px); }
    62% {
      transform: scale(0.8) translate(0px, 0px); }
    63% {
      transform: scale(0.8) translate(1px, 0px); }
    64% {
      transform: scale(0.8) translate(0px, 0px); }
    65% {
      transform: scale(0.8) translate(1px, 0px); }
    66% {
      transform: scale(0.8) translate(0px, 0px); }
    67% {
      transform: scale(0.8) translate(1px, 0px); }
    68% {
      transform: scale(0.8) translate(0px, 0px); }
    69% {
      transform: scale(0.8) translate(1px, 0px); }
    70% {
      transform: scale(0.8) translate(0px, 0px); }
    71% {
      transform: scale(0.8) translate(1px, 0px); }
    72% {
      transform: scale(0.8) translate(0px, 0px); }
    73% {
      transform: scale(0.8) translate(1px, 0px); }
    74% {
      transform: scale(0.8) translate(0px, 0px); }
    75% {
      transform: scale(0.8) translate(1px, 0px); }
    76% {
      transform: scale(0.8) translate(0px, 0px); }
    77% {
      transform: scale(0.8) translate(1px, 0px); }
    78% {
      transform: scale(0.8) translate(0px, 0px); }
    100% {
      transform: scale(0.8) translate(0px, 0px); } } }
.fadein {
  -webkit-animation: fadein 1.0s linear 1;
  animation: fadein 1.0s linear 1; }

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0); }
  25% {
    opacity: 0.12;
    box-shadow: -6px 0 0 rgba(111, 128, 144, 0.5); }
  50% {
    opacity: 0.25;
    -webkit-transform: translateX(300);
    box-shadow: none; }
  75% {
    opacity: 0.5;
    box-shadow: 6px 0 0 rgba(111, 128, 144, 0.5); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }
@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateX(0); }
  25% {
    opacity: 0.12;
    box-shadow: -6px 0 0 rgba(111, 128, 144, 0.5); }
  50% {
    opacity: 0.25;
    transform: translateX(300);
    box-shadow: none; }
  75% {
    opacity: 0.5;
    box-shadow: 6px 0 0 rgba(111, 128, 144, 0.5); }
  100% {
    opacity: 1;
    transform: translateX(0); } }
@-webkit-keyframes resound {
  0% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  20% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  22% {
    -webkit-transform: scale(0.95, 1.1) translate(0%, -8%); }
  24% {
    -webkit-transform: scale(1.05, 0.9) translate(0%, 4%); }
  26% {
    -webkit-transform: scale(0.95, 1.05) translate(0%, -2%); }
  28% {
    -webkit-transform: scale(1.05, 0.95) translate(0%, 2%); }
  30% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); }
  100% {
    -webkit-transform: scale(1, 1) translate(0%, 0%); } }
@keyframes resound {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  20% {
    transform: scale(1, 1) translate(0%, 0%); }
  22% {
    transform: scale(0.95, 1.1) translate(0%, -8%); }
  24% {
    transform: scale(1.05, 0.9) translate(0%, 4%); }
  26% {
    transform: scale(0.95, 1.05) translate(0%, -2%); }
  28% {
    transform: scale(1.05, 0.95) translate(0%, 2%); }
  30% {
    transform: scale(1, 1) translate(0%, 0%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes pulseMotion {
  0% {
    transform: scale(1, 1);
    background-color: #1b1b1b54; }
  50% {
    transform: scale(1.15, 1.15);
    background-color: #00000024; }
  100% {
    transform: scale(1, 1);
    background-color: #1b1b1b54; } }
/* ==================================================================================================================
// ▼ アバター
================================================================================================================== */
.user {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  z-index: 10;
  left: -100px;
  /*画面ロード時点で見えない領域にセット*/
  top: 100px;
  /*立ち読み中*/
  /*声かけて*/
  /*アバター毎のメッセージ*/ }
  .user .avatar {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #e3dbb7;
    will-change: animation;
    object-fit: cover;
    box-sizing: content-box; }
    .user .avatar:hover {
      border: 3px solid #fff200; }
  .user .name {
    font-size: 12px;
    line-height: 12px;
    padding: 2px;
    width: 100px;
    color: #ffffff;
    background-color: #00000087;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    bottom: -35px;
    z-index: -1; }
  .user .tip {
    position: absolute;
    top: -55px;
    background-color: #ffffff;
    border: solid 1px #ffffff;
    width: 56px;
    height: 56px;
    border-radius: 30%;
    text-align: center; }
    .user .tip .face {
      margin: 0;
      padding: 0;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 54px;
      height: 54px;
      overflow: hidden;
      border-radius: 30%; }
      .user .tip .face img {
        width: 54px;
        height: 54px;
        top: 0px;
        left: 0px;
        position: absolute;
        object-fit: cover; }
  .user .tip:before,
  .user .tip:after {
    content: "";
    position: absolute;
    top: 103%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  .user .tip:before {
    border: solid 5px transparent;
    border-top: solid 9px #bfbfbf; }
  .user .tip:after {
    border: solid 6px transparent;
    border-top: solid 11px #ffffff;
    margin-top: -2px; }
  .user .my_tip {
    background: #ffffff;
    border: solid 1px #bfbfbf; }
  .user .my_tip:before {
    border-top: solid 9px #bfbfbf; }
  .user .my_tip:after {
    border-top: 11px solid #ffffff; }
  .user:hover {
    z-index: 13; }
    .user:hover .name {
      background-color: #408000; }
  .user .twit-bubble {
    display: block;
    position: absolute;
    top: -34px;
    padding: 0 10px;
    white-space: nowrap;
    text-align: center;
    color: #2c2c2c;
    background-color: #ffffffc7;
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px; }
    .user .twit-bubble img {
      width: 28px;
      margin: 0;
      padding: 0; }
  .user .twit-my {
    background-color: #fdf054e3 !important; }
  .user .twit-neighbor {
    background-color: #80d8ff; }
  .user .visible-status {
    display: none;
    position: absolute;
    right: -13px;
    top: -12px;
    width: 43px;
    height: 85px;
    background-color: unset;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat; }
  .user .visible-status-leave {
    background-image: url(images/visible_status_leave.png); }
  .user .visible-status-shoutout {
    background-image: url(images/visible_status_shoutout.png); }
  .user .avatar-fadeout-message {
    position: absolute;
    top: 50%;
    font-size: 12px;
    line-height: 12px;
    color: #ffffff;
    background-color: #648939;
    padding: 6px 15px;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid #ffffff; }
  .user .walker {
    object-position: -120px;
    background-position: 0 0;
    /*background-image: url('https://air-boo-map.webfit.jp/img/avatar_template.png');*/
    background-size: 480px 480px;
    border-radius: unset;
    border: none !important;
    box-shadow: none; }
  .user .neighbor {
    box-sizing: content-box;
    box-shadow: 0 41px 0px -36px #13b6ff;
    position: relative; }
    .user .neighbor.me {
      box-shadow: unset; }
  .user.user-walker {
    width: 120px;
    height: 120px; }
  .user.whole-body {
    width: 150px;
    height: 200px;
    transform: translate(-35px, -100px);
    transition: all 500ms 0s ease; }
    .user.whole-body .avatar {
      border-radius: unset;
      border: unset; }
      .user.whole-body .avatar:hover {
        border: unset; }

.profile-dlg {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f5f5f5f0;
  border: 5px solid #d9d9d9;
  box-shadow: 2px 2px 4px 0px #000000bd;
  z-index: 4; }
  .profile-dlg .avatar-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px; }
    .profile-dlg .avatar-info .image img {
      width: 160px;
      height: 200px;
      object-fit: cover; }
    .profile-dlg .avatar-info .image.walker {
      float: left;
      width: 120px;
      height: 120px;
      overflow: hidden; }
      .profile-dlg .avatar-info .image.walker img {
        width: 480px;
        height: 480px; }
    .profile-dlg .avatar-info .name {
      margin-bottom: 10px; }
  .profile-dlg .actions {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .profile-dlg .actions .txt {
      margin-bottom: 20px;
      font-size: 16px; }
    .profile-dlg .actions .btns {
      display: flex;
      justify-content: center; }
      .profile-dlg .actions .btns .btn {
        padding: 4px 10px;
        margin: 3px;
        color: #ffffff;
        background-color: #3b3b3b;
        border-radius: 5px;
        cursor: pointer;
        white-space: nowrap; }
        .profile-dlg .actions .btns .btn:hover {
          opacity: 0.7; }
        .profile-dlg .actions .btns .btn.close {
          color: #020202;
          background-color: unset;
          border: 1px solid #444444; }
          .profile-dlg .actions .btns .btn.close:hover {
            opacity: 1;
            background-color: #eaeaea; }

/* --------------------------------------------------------------- */
/* イベントホール                                                  */
/* --------------------------------------------------------------- */
.hall {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #8d9573;
  border-bottom: 1px solid #676767;
  position: relative;
  background-image: url(images/hall_outer.webp);
  background-repeat: repeat;
  background-position: center center;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
  /*square*/
  /* 左上機能ボタン */
  /* 右上機能ボタン */ }
  .hall .hall-center {
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 15px);
    width: 1px;
    height: 30px;
    background-color: #e91e6340;
    pointer-events: none;
    z-index: 4; }
    .hall .hall-center:after {
      content: "";
      position: absolute;
      top: 14px;
      left: -14px;
      width: 30px;
      height: 1px;
      background-color: #e91e6340; }
  .hall .square {
    position: relative;
    width: 3060px;
    /* island(1080(icatch(216) * 5)) * 2 + 通路(300) * 3(左右・中央) */
    opacity: 0;
    padding: 650px 150px 150px;
    /*topの500pxは広場*/
    background-image: url(images/square_floor.webp);
    background-repeat: repeat;
    /*デバック用*/
    /*icatch-area*/ }
    .hall .square .center {
      position: absolute;
      left: calc(50% - 4px);
      top: calc(50% - 27px);
      width: 2px;
      height: 50px;
      background-color: #00000085;
      transform: rotate(-45deg);
      z-index: 4; }
      .hall .square .center:after {
        content: "";
        position: absolute;
        top: 24px;
        left: -24px;
        width: 50px;
        height: 2px;
        background: #00000085; }
    .hall .square .decoration-layer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      z-index: -1; }
      .hall .square .decoration-layer .decoration {
        position: absolute; }
    .hall .square .playground {
      position: absolute;
      top: 150px;
      width: 2750px;
      height: 500px;
      display: flex;
      justify-content: center;
      z-index: -2; }
      .hall .square .playground .playground-left, .hall .square .playground .playground-center, .hall .square .playground .playground-right {
        width: 915px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
        .hall .square .playground .playground-left img, .hall .square .playground .playground-center img, .hall .square .playground .playground-right img {
          max-width: 100%;
          max-height: 100%;
          pointer-events: none; }
    .hall .square .cross {
      position: absolute;
      width: 300px;
      height: 300px;
      border: 1px dashed #000000;
      background-color: #91d2f736;
      display: flex;
      align-items: center;
      justify-content: center; }
      .hall .square .cross:after {
        content: "";
        position: absolute;
        top: calc(50% - 2px);
        left: calc(50% - 2px);
        width: 4px;
        height: 4px;
        background: #000000; }
    .hall .square .x-road {
      position: absolute;
      width: 1080px;
      height: 300px;
      background-color: #f9e4e44d;
      display: flex;
      align-items: center;
      justify-content: center; }
    .hall .square .y-road {
      position: absolute;
      width: 300px;
      height: 300px;
      background-color: #d5f79136;
      display: flex;
      align-items: center;
      justify-content: center; }
    .hall .square .road-mark {
      font-size: 50px;
      font-weight: bold;
      color: #e91e6363;
      text-shadow: 2px 2px #ffffff78; }
    .hall .square .icatch-area {
      display: flex;
      flex-direction: column-reverse;
      /*icatch-line*/ }
      .hall .square .icatch-area .icatch-line {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; }
        .hall .square .icatch-area .icatch-line .island {
          width: 1080px;
          height: 300px;
          background-color: #3b3b3b0a;
          /*box-shadow: 5px 0px 0px 0px #dfaa5f5e inset, -5px 0px 0px 0px #dfaa5f5e inset, 0px 5px 0px 0px #dfaa5f5e inset;*/
          margin: 150px;
          display: flex;
          justify-content: flex-start;
          align-content: center;
          flex-wrap: nowrap;
          border: 0;
          z-index: 2;
          /*
            本来「.icatch」中の「&:hover」としてやる処理だが、iPhoneのSafariでリンクに「hover」がある場合は
            2回クリックしないと遷移しないためリンククリック時にJavaScriptから本クラスを追加することで回避
          */ }
          .hall .square .icatch-area .icatch-line .island .icatch {
            width: 176px;
            height: 250px;
            padding-top: 30px;
            margin: 35px 20px;
            position: relative;
            display: flex;
            justify-content: center;
            /* ページオーナーの設定 */
            /* PR呟き */
            /*
              iPhone/iPadのSafariではリンクに「hover」がある場合は2回クリックしないと遷移しないため「hover」禁止
            */ }
            .hall .square .icatch-area .icatch-line .island .icatch .bak-avatar {
              position: absolute;
              object-fit: cover;
              cursor: pointer;
              width: 176px;
              height: 220px;
              z-index: 1; }
              .hall .square .icatch-area .icatch-line .island .icatch .bak-avatar.no-img {
                display: none; }
              .hall .square .icatch-area .icatch-line .island .icatch .bak-avatar.leave {
                display: none; }
            .hall .square .icatch-area .icatch-line .island .icatch .icatch-img {
              position: absolute;
              object-fit: contain;
              object-position: top;
              cursor: pointer;
              width: 176px;
              height: 113px;
              top: 0px;
              left: 0px; }
            .hall .square .icatch-area .icatch-line .island .icatch .tip {
              position: absolute;
              display: none;
              width: 100%;
              color: #ffffff;
              background-color: #b16f00;
              font-size: 11px;
              line-height: 11px;
              border-radius: 10px;
              padding: 3px;
              z-index: 3;
              cursor: pointer;
              top: 118px; }
            .hall .square .icatch-area .icatch-line .island .icatch .pos-no {
              position: absolute;
              width: 60px;
              color: #ffffff;
              background-color: #ff559c;
              font-size: 13px;
              border-radius: 2px;
              z-index: 1;
              top: -22px;
              height: 18px;
              display: none;
              align-items: center;
              justify-content: center;
              box-shadow: 0 0 2px 1px #fbfbfb;
              background-image: url(images/heart.png);
              background-repeat: no-repeat;
              background-size: 15px 15px;
              background-position: 8px 1px;
              object-fit: contain;
              padding-left: 14px; }
            .hall .square .icatch-area .icatch-line .island .icatch .no-visit {
              background-color: #687f3d;
              background-image: url(images/flag.png);
              background-position: 8px 2px; }
            .hall .square .icatch-area .icatch-line .island .icatch .prepare {
              background-color: #687f3d;
              background-image: none;
              padding-left: unset; }
            .hall .square .icatch-area .icatch-line .island .icatch .curr {
              background: -moz-linear-gradient(to top, #00a6ff5e, #00a6ff0d 25%, #00a6ff00);
              background: -webkit-linear-gradient(to top, #00a6ff5e, #00a6ff0d 25%, #00a6ff00);
              background: linear-gradient(to top, #00a6ff5e, #00a6ff0d 25%, #00a6ff00);
              cursor: default; }
            .hall .square .icatch-area .icatch-line .island .icatch .curr-txt {
              position: absolute;
              width: 40px;
              text-align: center;
              z-index: 9;
              left: 68px;
              bottom: 16px; }
              .hall .square .icatch-area .icatch-line .island .icatch .curr-txt img {
                width: 100%; }
            .hall .square .icatch-area .icatch-line .island .icatch .my-setting {
              display: block;
              position: absolute;
              top: -19px;
              left: -13px;
              width: 34px;
              height: 34px;
              background-image: url(images/pr_tweet1.png);
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              z-index: 12;
              cursor: pointer; }
              .hall .square .icatch-area .icatch-line .island .icatch .my-setting:hover {
                background-image: url(images/pr_tweet2.png);
                /* [+] 隣のセレクター、[~] 自分以外のセレクター */
                /* pr-tweetが動的に生成される場合があるため[+]ではない */ }
                .hall .square .icatch-area .icatch-line .island .icatch .my-setting:hover ~ .pr-tweet {
                  z-index: 3; }
              .hall .square .icatch-area .icatch-line .island .icatch .my-setting:active {
                background-image: url(images/pr_tweet2.png);
                width: 32px;
                height: 32px;
                margin: 1px; }
            .hall .square .icatch-area .icatch-line .island .icatch .pr-tweet {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: -6px;
              width: 158px;
              height: 76px;
              background-color: #ffffff;
              border: 2px solid #7e6e20;
              border-radius: 10px;
              padding: 7px;
              z-index: 1; }
              .hall .square .icatch-area .icatch-line .island .icatch .pr-tweet:before {
                content: "";
                position: absolute;
                bottom: -23px;
                left: 50%;
                margin-left: -15px;
                border: 12px solid transparent;
                border-top: 12px solid #FFF;
                z-index: 2; }
              .hall .square .icatch-area .icatch-line .island .icatch .pr-tweet:after {
                content: "";
                position: absolute;
                bottom: -28px;
                left: 50%;
                margin-left: -17px;
                border: 14px solid transparent;
                border-top: 14px solid #7e6e20;
                z-index: 1; }
              .hall .square .icatch-area .icatch-line .island .icatch .pr-tweet p {
                margin: 0;
                padding: 4px 0 0 0;
                color: #421f1f;
                font-size: 14px;
                line-height: 14px;
                font-weight: bold;
                max-height: 60px;
                overflow: hidden;
                word-wrap: break-word; }
            .hall .square .icatch-area .icatch-line .island .icatch .default {
              -webkit-animation: pr_default 3.0s linear infinite;
              animation: pr_default 3.0s linear infinite; }
            .hall .square .icatch-area .icatch-line .island .icatch .pr_anim1 {
              -webkit-animation: pr_bound 3.0s linear infinite;
              animation: pr_bound 3.0s linear infinite; }
            .hall .square .icatch-area .icatch-line .island .icatch .pr_anim2 {
              -webkit-animation: pr_buruburu 4.5s  infinite;
              animation: pr_buruburu 4.5s  infinite; }
            .hall .square .icatch-area .icatch-line .island .icatch .additional-info {
              position: absolute;
              width: 165px;
              /*height: 180px;*/
              height: 180px;
              top: 70px;
              border: 2px solid #979797;
              /*background-color: #000000db;*/
              background-color: #000000bd;
              border-radius: 5px;
              /*display: flex;*/
              display: none;
              justify-content: center;
              z-index: 9;
              pointer-events: none; }
              .hall .square .icatch-area .icatch-line .island .icatch .additional-info .avatar {
                width: 65px;
                height: 65px;
                position: absolute;
                top: -35px; }
                .hall .square .icatch-area .icatch-line .island .icatch .additional-info .avatar img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  border: 3px solid #9cd9eb; }
              .hall .square .icatch-area .icatch-line .island .icatch .additional-info .info {
                width: 100%;
                padding: 54px 7px 0 9px;
                text-align: left; }
                .hall .square .icatch-area .icatch-line .island .icatch .additional-info .info .item {
                  width: 100%;
                  color: #ffffff;
                  margin-bottom: 12px;
                  display: flex;
                  font-size: 12px;
                  line-height: 12px; }
                  .hall .square .icatch-area .icatch-line .island .icatch .additional-info .info .item .tag {
                    font-size: 12px;
                    line-height: 12px; }
                  .hall .square .icatch-area .icatch-line .island .icatch .additional-info .info .item .txt {
                    font-size: 12px;
                    line-height: 12px; }
            .hall .square .icatch-area .icatch-line .island .icatch.blur {
              -ms-filter: blur(6px);
              filter: blur(6px); }
            @media screen and (min-width: 1024px) {
              .hall .square .icatch-area .icatch-line .island .icatch:hover .tip {
                display: block; }
              .hall .square .icatch-area .icatch-line .island .icatch:hover .icatch-img {
                /*border: 1px solid #ffa000;*/
                cursor: pointer;
                z-index: 2; } }
          .hall .square .icatch-area .icatch-line .island .icatch-active .tip {
            display: block; }
          .hall .square .icatch-area .icatch-line .island .icatch-active .icatch-img {
            border: 1px solid #ffa000;
            cursor: pointer;
            z-index: 2; }
          .hall .square .icatch-area .icatch-line .island .curr-icatch .icatch-img {
            /*
            width: 176px;
            height: 113px;
            top: 0px;
            left: 0px;
            */ }
          .hall .square .icatch-area .icatch-line .island .curr-icatch:hover {
            /*
            .icatch-img {
              cursor: default;
            }
            */ }
          .hall .square .icatch-area .icatch-line .island .icatch-dumy {
            height: 80px;
            margin: 0 7px;
            position: relative; }
            .hall .square .icatch-area .icatch-line .island .icatch-dumy .dummy-img {
              width: 115px;
              height: 80px; }
          .hall .square .icatch-area .icatch-line .island .monument {
            width: 176px;
            height: 276px;
            top: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;
            margin: 9px 20px; }
            .hall .square .icatch-area .icatch-line .island .monument img {
              position: absolute;
              max-width: 176px;
              min-width: 50px;
              max-height: 277px;
              height: auto;
              object-fit: contain; }
            .hall .square .icatch-area .icatch-line .island .monument .pos-no {
              top: 4px; }
    .hall .square .exit-top {
      position: absolute;
      top: -200px;
      left: calc(50% - 200px);
      width: 400px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ebd998;
      background-image: url(images/exit_floor.jpg);
      background-position-x: center;
      background-position-y: center;
      background-repeat: repeat;
      cursor: pointer; }
    .hall .square .exit-top-arround-left {
      position: absolute;
      top: -200px;
      left: 0;
      width: calc(50% - 200px);
      height: 200px;
      background-image: url(images/hall_inner_wall.webp);
      background-size: contain;
      background-position-x: right; }
    .hall .square .exit-top-arround-right {
      position: absolute;
      top: -200px;
      right: 0;
      width: calc(50% - 200px);
      height: 200px;
      background-image: url(images/hall_inner_wall.webp);
      background-size: contain;
      background-position-x: left; }
    .hall .square .exit-bottom {
      position: absolute;
      bottom: -200px;
      left: calc(50% - 200px);
      width: 400px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ebd998;
      background-image: url(images/exit_floor.jpg);
      background-position-x: center;
      background-position-y: center;
      background-repeat: repeat;
      cursor: pointer; }
    .hall .square .exit-bottom-arround-left {
      position: absolute;
      bottom: -200px;
      left: 0;
      width: calc(50% - 200px);
      height: 200px;
      background-image: url(images/hall_outer_wall.webp);
      background-size: contain;
      background-position-x: right; }
    .hall .square .exit-bottom-arround-right {
      position: absolute;
      bottom: -200px;
      right: 0;
      width: calc(50% - 200px);
      height: 200px;
      background-image: url(images/hall_outer_wall.webp);
      background-size: contain;
      background-position-x: left; }
    .hall .square .exit-topic {
      font-size: 40px;
      font-weight: bold;
      line-height: 20px;
      color: #89877e; }
    .hall .square .partition {
      position: absolute;
      width: calc(100% - 20px);
      height: 130px;
      left: 10px;
      bottom: 15px;
      background-image: url(images/constructing.png);
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      z-index: 9999; }
      @media screen and (max-width: 800px) {
        .hall .square .partition {
          height: 105px; } }
      @media screen and (max-width: 500px) {
        .hall .square .partition {
          height: 80px; } }
    .hall .square .neighbor-layer {
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      position: absolute;
      left: 10px;
      top: 10px;
      overflow: hidden;
      pointer-events: none;
      z-index: -1; }
      .hall .square .neighbor-layer .neighbor-area {
        position: absolute;
        background-color: #ffffff21;
        border: 4px dashed #ffffff8a;
        border-radius: 50%;
        animation: circle 120.0s linear infinite; }
@keyframes circle {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(90deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(270deg); }
  100% {
    transform: rotate(360deg); } }
    .hall .square .my-walker-shadow {
      position: absolute;
      left: -100px;
      top: -100px;
      width: 110px;
      height: 25px;
      border-radius: 70%;
      background-color: #1b1b1b54;
      /*#00000024, #ffffff6b;*/
      border: 3px solid #0000000a;
      /*3px solid #ffffff6b;*/
      z-index: 1;
      animation: pulseMotion 4.5s linear infinite; }
    .hall .square .user:hover {
      z-index: 10000 !important; }
  .hall .twitter {
    position: absolute;
    width: 450px;
    left: calc(50% - 225px);
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    color: #64604c;
    max-width: 440px;
    height: 34px;
    margin: 5px 10px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: all; }
    @media screen and (max-width: 800px) {
      .hall .twitter {
        bottom: unset;
        top: 2px;
        width: calc(100% - 20px);
        left: 0;
        max-width: unset;
        display: flex;
        justify-content: center; }
        .hall .twitter .twit-area {
          max-width: 300px; } }
    @media screen and (max-width: 340px) {
      .hall .twitter {
        width: 100%;
        margin: 5px 0; } }
    .hall .twitter .twit-switch {
      background-image: url(images/twit_switch1.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 70px;
      min-width: 70px;
      height: 27px;
      display: block;
      cursor: pointer;
      margin: 0 5px; }
      .hall .twitter .twit-switch:hover {
        opacity: 0.8; }
      .hall .twitter .twit-switch:active {
        width: 68px;
        min-width: 68px;
        height: 25px;
        margin: 1px 6px; }
    .hall .twitter .mode-slide {
      background-image: url(images/twit_switch2.png); }
    .hall .twitter .mode-neighbor {
      background-image: url(images/twit_switch3.png); }
    .hall .twitter .twit-area {
      position: relative;
      display: flex;
      align-items: center;
      width: calc(100% - 80px - 79px);
      padding-right: 3px; }
      @media screen and (max-width: 800px) {
        .hall .twitter .twit-area {
          width: calc(100% - 80px - 39px); } }
      .hall .twitter .twit-area input[type=text] {
        width: 100%;
        border: 1px solid #d9d9d9;
        padding: 4px 42px 4px 8px;
        font-size: 16px;
        line-height: 17px;
        background-color: rgba(251, 251, 238, 0.75);
        border-radius: 7px;
        height: 32px; }
        .hall .twitter .twit-area input[type=text]:focus {
          outline: 1px solid #ffffff; }
      .hall .twitter .twit-area input::placeholder {
        color: #aaaaaa; }
      .hall .twitter .twit-area .btn {
        position: absolute;
        width: 42px;
        height: 32px;
        top: 0px;
        right: 3px;
        border-radius: 0 7px 7px 0;
        cursor: pointer;
        background-image: url(images/twit.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border: 0px !important; }
        .hall .twitter .twit-area .btn:hover {
          opacity: 0.8; }
        .hall .twitter .twit-area .btn:active {
          width: 40px;
          height: 30px;
          top: 1px;
          right: 4px;
          background-image: url(images/twit_active.png); }
    .hall .twitter .shoutout-to-me {
      background-image: url(images/shoutout_to_me1.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 69px;
      height: 34px;
      display: block;
      cursor: pointer;
      margin: 0 5px; }
      @media screen and (max-width: 800px) {
        .hall .twitter .shoutout-to-me {
          background-image: url(images/shoutout_to_me_s1.png);
          width: 34px;
          height: 34px;
          margin: 0 5px 0 0; } }
      .hall .twitter .shoutout-to-me:hover {
        opacity: 0.8; }
      .hall .twitter .shoutout-to-me:active {
        width: 67px;
        height: 32px;
        margin: 1px 6px; }
        @media screen and (max-width: 800px) {
          .hall .twitter .shoutout-to-me:active {
            width: 32px;
            margin: 1px 6px 1px 1px; } }
      .hall .twitter .shoutout-to-me.on {
        background-image: url(images/shoutout_to_me2.png); }
        @media screen and (max-width: 800px) {
          .hall .twitter .shoutout-to-me.on {
            background-image: url(images/shoutout_to_me_s2.png); } }
  .hall .twit-history-dlg {
    position: absolute;
    display: none;
    flex-direction: column;
    width: 320px;
    height: 550px;
    max-height: 100%;
    right: 0;
    bottom: 0;
    background-color: #ffffffe8;
    border: 1px solid #3d3d3d;
    box-shadow: 0 0 4px 0px #ffffff;
    z-index: 4; }
    @media screen and (max-width: 800px) {
      .hall .twit-history-dlg {
        width: 40%;
        height: 65%;
        max-height: 400px;
        min-width: 150px; } }
    .hall .twit-history-dlg .caption {
      width: 100%;
      height: 22px;
      background-color: #272727;
      color: #ffffff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative; }
      .hall .twit-history-dlg .caption .close {
        font-size: 18px;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        right: 7px;
        cursor: pointer; }
        .hall .twit-history-dlg .caption .close:before {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f057"; }
        .hall .twit-history-dlg .caption .close:hover:before {
          font-weight: 400; }
      .hall .twit-history-dlg .caption .move-left {
        display: flex;
        font-size: 18px;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        left: 7px;
        cursor: pointer; }
        .hall .twit-history-dlg .caption .move-left:before {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f060"; }
        .hall .twit-history-dlg .caption .move-left:hover {
          color: #ffff00; }
      .hall .twit-history-dlg .caption .move-right {
        display: none;
        font-size: 18px;
        line-height: 14px;
        color: #ffffff;
        position: absolute;
        left: 7px;
        cursor: pointer; }
        .hall .twit-history-dlg .caption .move-right:before {
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          content: "\f061"; }
        .hall .twit-history-dlg .caption .move-right:hover {
          color: #ffff00; }
    .hall .twit-history-dlg .tab-control {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: flex-end;
      position: relative;
      padding: 0 7px;
      border-bottom: 2px solid #353535;
      margin-bottom: 5px; }
      @media screen and (max-width: 500px) {
        .hall .twit-history-dlg .tab-control {
          padding: 0 3px; } }
      .hall .twit-history-dlg .tab-control .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        padding: 0 25px;
        margin: 0 5px -2px 0;
        border-radius: 0 10px 0 0;
        color: #ffffff;
        background-color: #898989;
        border-bottom: 2px solid #383838;
        white-space: nowrap;
        font-size: 13px;
        cursor: pointer; }
        @media screen and (max-width: 500px) {
          .hall .twit-history-dlg .tab-control .tab {
            padding: 0 13px; } }
        .hall .twit-history-dlg .tab-control .tab:hover {
          background-color: #af1c4e; }
      .hall .twit-history-dlg .tab-control .curr-tab {
        cursor: default;
        background-color: unset;
        border-bottom: 2px solid #fffffff7;
        border-left: 2px solid #353535;
        border-top: 2px solid #353535;
        border-right: 2px solid #353535;
        color: #333333; }
        .hall .twit-history-dlg .tab-control .curr-tab:hover {
          background-color: unset; }
    .hall .twit-history-dlg .history {
      padding: 10px 0;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      flex-direction: column;
      height: calc(100% - 57px);
      /*小声*/ }
      .hall .twit-history-dlg .history .item {
        width: 100%;
        display: flex;
        align-items: flex-start;
        text-align: left;
        border-bottom: 1px solid #e7e7e7;
        position: relative;
        padding: 0 5px; }
        .hall .twit-history-dlg .history .item .avatar {
          width: 40px;
          height: 40px;
          margin-top: 5px;
          overflow: hidden; }
          @media screen and (max-width: 800px) {
            .hall .twit-history-dlg .history .item .avatar {
              width: 30px;
              height: 30px; } }
          .hall .twit-history-dlg .history .item .avatar .walker {
            width: 160px;
            height: 160px;
            border-radius: unset; }
            @media screen and (max-width: 800px) {
              .hall .twit-history-dlg .history .item .avatar .walker {
                width: 120px;
                height: 120px; } }
          .hall .twit-history-dlg .history .item .avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%; }
        .hall .twit-history-dlg .history .item .contents {
          width: calc(100% - 40px);
          display: flex;
          flex-wrap: wrap;
          padding-left: 5px; }
          @media screen and (max-width: 500px) {
            .hall .twit-history-dlg .history .item .contents {
              width: calc(100% - 30px); } }
          .hall .twit-history-dlg .history .item .contents .name {
            width: 100%;
            font-size: 12px;
            font-weight: bold;
            color: #5d3f13;
            margin: 5px 0 1px;
            white-space: nowrap; }
          .hall .twit-history-dlg .history .item .contents .comment {
            width: 100%;
            font-size: 12px;
            line-height: 14px; }
            @media screen and (max-width: 800px) {
              .hall .twit-history-dlg .history .item .contents .comment {
                margin-bottom: 6px; } }
            .hall .twit-history-dlg .history .item .contents .comment img {
              height: 20px; }
            .hall .twit-history-dlg .history .item .contents .comment .deleted {
              color: #b1b1b1; }
          .hall .twit-history-dlg .history .item .contents .del {
            color: #dd1a1a94; }
          .hall .twit-history-dlg .history .item .contents .heart {
            color: #5fb100; }
          .hall .twit-history-dlg .history .item .contents .date {
            width: 100%;
            font-size: 11px;
            text-align: right;
            color: #657900;
            white-space: nowrap; }
        .hall .twit-history-dlg .history .item .control {
          position: absolute;
          text-align: center;
          right: 8px;
          top: 4px;
          display: flex;
          flex-direction: row-reverse; }
          @media screen and (max-width: 800px) {
            .hall .twit-history-dlg .history .item .control {
              width: 20px;
              left: 0;
              bottom: 0;
              top: unset;
              right: unset;
              flex-direction: row; } }
          .hall .twit-history-dlg .history .item .control .del {
            font-size: 20px;
            line-height: 18px;
            width: 20px;
            height: 20px;
            color: #3d3d3d;
            margin-left: 5px;
            padding-top: 1px;
            cursor: pointer; }
            .hall .twit-history-dlg .history .item .control .del:before {
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              content: "\f057"; }
            .hall .twit-history-dlg .history .item .control .del:hover:before {
              font-weight: 400; }
          .hall .twit-history-dlg .history .item .control .heart {
            font-size: 18px;
            line-height: 18px;
            width: 20px;
            height: 20px;
            color: #ff0000;
            margin-left: 5px;
            padding-top: 1px;
            cursor: pointer; }
            .hall .twit-history-dlg .history .item .control .heart:before {
              font-family: "Font Awesome 5 Free";
              font-weight: 400;
              content: "\f004"; }
            .hall .twit-history-dlg .history .item .control .heart:hover:before {
              font-weight: 900; }
          .hall .twit-history-dlg .history .item .control .hearted {
            font-size: 18px;
            line-height: 18px;
            width: 20px;
            height: 20px;
            color: #f2a83d;
            margin-left: 5px;
            padding-top: 2px;
            cursor: default; }
            .hall .twit-history-dlg .history .item .control .hearted:before {
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              content: "\f004"; }
          .hall .twit-history-dlg .history .item .control .mute {
            font-size: 18px;
            line-height: 18px;
            width: 20px;
            height: 20px;
            color: #673aB7;
            margin-left: 5px;
            padding-top: 2px;
            cursor: pointer; }
            .hall .twit-history-dlg .history .item .control .mute:before {
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              content: "\f4b3"; }
            .hall .twit-history-dlg .history .item .control .mute:hover {
              color: #c30fe1; }
          .hall .twit-history-dlg .history .item .control .warp {
            font-size: 22px;
            line-height: 20px;
            width: 20px;
            height: 20px;
            color: #2196F3;
            margin-left: 5px;
            cursor: pointer; }
            .hall .twit-history-dlg .history .item .control .warp:before {
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              content: "\f3c5"; }
            .hall .twit-history-dlg .history .item .control .warp:hover {
              color: #6cbdfd; }
        .hall .twit-history-dlg .history .item .hearted-txt {
          width: 100%;
          display: flex;
          flex-direction: column; }
          .hall .twit-history-dlg .history .item .hearted-txt .comment {
            width: 100%;
            font-size: 11px;
            text-align: left;
            color: #e91e63; }
          .hall .twit-history-dlg .history .item .hearted-txt .date {
            width: 100%;
            font-size: 11px;
            text-align: right;
            color: #657900;
            white-space: nowrap; }
      .hall .twit-history-dlg .history .whisper {
        background-color: #03a9f426;
        border-bottom: 1px solid #a4cddf; }
    .hall .twit-history-dlg .history::-webkit-scrollbar {
      width: 3px; }
    .hall .twit-history-dlg .history::-webkit-scrollbar-track {
      background-color: #cccccc; }
    .hall .twit-history-dlg .history::-webkit-scrollbar-thumb {
      background-color: #aa4242; }
    .hall .twit-history-dlg .limit-list {
      padding: 10px 0;
      overflow-x: hidden;
      overflow-y: auto;
      display: none;
      flex-wrap: nowrap;
      justify-content: flex-start;
      flex-direction: column;
      height: calc(100% - 57px); }
      .hall .twit-history-dlg .limit-list .item {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: left;
        border-bottom: 1px solid #e7e7e7;
        position: relative;
        padding: 0 5px; }
        .hall .twit-history-dlg .limit-list .item .avatar {
          width: 40px;
          height: 40px;
          margin-top: 5px;
          overflow: hidden; }
          @media screen and (max-width: 500px) {
            .hall .twit-history-dlg .limit-list .item .avatar {
              width: 30px;
              height: 30px; } }
          .hall .twit-history-dlg .limit-list .item .avatar .walker {
            width: 160px;
            height: 160px;
            border-radius: unset; }
            @media screen and (max-width: 800px) {
              .hall .twit-history-dlg .limit-list .item .avatar .walker {
                width: 120px;
                height: 120px; } }
          .hall .twit-history-dlg .limit-list .item .avatar img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%; }
        .hall .twit-history-dlg .limit-list .item .name {
          width: calc(100% - 120px);
          display: flex;
          flex-wrap: wrap;
          padding-left: 10px; }
          @media screen and (max-width: 500px) {
            .hall .twit-history-dlg .limit-list .item .name {
              width: calc(100% - 75px);
              padding-left: 5px; } }
        .hall .twit-history-dlg .limit-list .item .control {
          width: 80px; }
          @media screen and (max-width: 500px) {
            .hall .twit-history-dlg .limit-list .item .control {
              width: 45px; } }
          .hall .twit-history-dlg .limit-list .item .control .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background-color: #343434;
            border-radius: 5px;
            cursor: pointer; }
            .hall .twit-history-dlg .limit-list .item .control .btn:hover {
              opacity: 0.7; }
    .hall .twit-history-dlg .limit-list::-webkit-scrollbar {
      width: 3px; }
    .hall .twit-history-dlg .limit-list::-webkit-scrollbar-track {
      background-color: #cccccc; }
    .hall .twit-history-dlg .limit-list::-webkit-scrollbar-thumb {
      background-color: #aa4242; }
    .hall .twit-history-dlg .twit-empty, .hall .twit-history-dlg .limit-empty {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px; }
      .hall .twit-history-dlg .twit-empty .empty-contents, .hall .twit-history-dlg .limit-empty .empty-contents {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #888888; }
        .hall .twit-history-dlg .twit-empty .empty-contents .ico, .hall .twit-history-dlg .limit-empty .empty-contents .ico {
          font-size: 50px;
          padding: 10px 0; }
        .hall .twit-history-dlg .twit-empty .empty-contents .txt, .hall .twit-history-dlg .limit-empty .empty-contents .txt {
          font-size: 16px;
          padding: 10px 0; }
  .hall .counter-area {
    position: absolute;
    right: 15px;
    bottom: 18px;
    color: #785838ad;
    border: 1px solid #ffffff5c;
    padding: 3px 6px 2px 8px;
    border-radius: 9px;
    background-color: #ffffff80;
    display: none;
    align-items: center;
    pointer-events: all;
    white-space: nowrap; }
    .hall .counter-area .ico {
      font-size: 18px;
      line-height: 14px; }
    .hall .counter-area .counter {
      font-size: 15px;
      font-weight: bold;
      line-height: 13px; }
    .hall .counter-area .tot-counter {
      font-size: 15px;
      font-weight: bold;
      line-height: 13px;
      margin-left: 3px; }
    .hall .counter-area .txt {
      font-size: 12px;
      line-height: 13px;
      /*padding-top: 2px;*/ }
      @media screen and (max-width: 800px) {
        .hall .counter-area .txt {
          padding-top: 0px; } }
  @media screen and (max-width: 800px) {
    .hall .left-control {
      top: 50px; } }
  @media screen and (max-width: 800px) {
    .hall .right-control {
      top: 50px;
      flex-direction: column; }
      .hall .right-control .change-map {
        margin: 12px 0 0 2px; }
        .hall .right-control .change-map:active {
          margin: 13px 1px 1px 3px; }
      .hall .right-control .map-select {
        top: 61px !important;
        right: 53px !important; }
        .hall .right-control .map-select:before {
          top: 20px;
          right: -23px;
          margin-left: unset;
          margin-top: -15px;
          border: 12px solid transparent;
          border-left: 12px solid #f7f7f7; }
        .hall .right-control .map-select:after {
          top: 20px;
          right: -28px;
          margin-left: unset;
          margin-top: -17px;
          border: 14px solid transparent;
          border-left: 14px solid #505050; }
      .hall .right-control .icatch-refresh {
        margin: 14px 0 0 2px; }
        .hall .right-control .icatch-refresh:active {
          margin: 15px 1px 1px 3px; }
      .hall .right-control .owner-room-view {
        margin: 13px 0 0 2px; }
        .hall .right-control .owner-room-view:active {
          margin: 14px 1px 1px 3px; } }
  .hall .hall-wait {
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    opacity: 1;
    pointer-events: none;
    z-index: 7; }
    .hall .hall-wait img {
      width: 60px;
      height: 60px;
      mix-blend-mode: multiply; }
  .hall .constructing {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#000000bd, #00000059, #00000059);
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 4; }
    .hall .constructing .info-block {
      position: absolute;
      padding: 10px 20px;
      background-color: #f9f6d9;
      border-radius: 10px;
      border: 3px solid #8f8c77;
      color: #8f8c77;
      box-shadow: 1px 1px 3px 0 #000000;
      z-index: 1;
      top: calc(50% - 130px);
      left: 50%;
      transform: translate(-50%, -50%); }
      @media screen and (max-width: 800px) {
        .hall .constructing .info-block {
          padding: 10px 15px;
          top: calc(50% - 130px); } }
      @media screen and (max-width: 500px) {
        .hall .constructing .info-block {
          padding: 10px 10px;
          top: calc(50% - 110px); } }
      .hall .constructing .info-block .main-copy {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px; }
        @media screen and (max-width: 800px) {
          .hall .constructing .info-block .main-copy {
            font-size: 22px;
            line-height: 24px; } }
        @media screen and (max-width: 500px) {
          .hall .constructing .info-block .main-copy {
            font-size: 20px;
            line-height: 22px; } }
      .hall .constructing .info-block .sub-copy {
        font-size: 12px;
        line-height: 12px; }
      .hall .constructing .info-block .countdown-timer {
        margin-top: 20px;
        display: none;
        flex-direction: column; }
        .hall .constructing .info-block .countdown-timer .countdown-txt {
          font-size: 12px; }
        .hall .constructing .info-block .countdown-timer .time {
          font-size: 26px;
          line-height: 26px; }
  .hall .countdown {
    width: 100%;
    display: none;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: calc(50% - 100px);
    opacity: 1;
    pointer-events: none;
    z-index: 7;
    font-weight: bold;
    color: #c6b198;
    text-shadow: 3px 3px #000000;
    transform: translate(-50%, -50%); }
    @media screen and (max-width: 800px) {
      .hall .countdown {
        top: calc(50% - 80px); } }
    @media screen and (max-width: 500px) {
      .hall .countdown {
        top: calc(50% - 70px); } }
    .hall .countdown.end {
      color: #0000005c;
      text-shadow: unset; }
    .hall .countdown .countdown-number {
      font-size: 150px;
      line-height: 120px; }
      @media screen and (max-width: 800px) {
        .hall .countdown .countdown-number {
          font-size: 120px;
          line-height: 100px; } }
      @media screen and (max-width: 500px) {
        .hall .countdown .countdown-number {
          font-size: 100px;
          line-height: 80px; } }
    .hall .countdown .countdown-txt {
      font-size: 20px; }
      @media screen and (max-width: 800px) {
        .hall .countdown .countdown-txt {
          font-size: 18px; } }
      @media screen and (max-width: 500px) {
        .hall .countdown .countdown-txt {
          font-size: 16px; } }
  .hall .firework {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; }
  .hall .i-am-here {
    position: absolute;
    background-image: url(images/here_1.png);
    background-size: contain;
    left: 6px;
    bottom: 135px;
    width: 50px;
    height: 50px;
    z-index: 3;
    cursor: pointer; }
    .hall .i-am-here:hover {
      opacity: 0.7; }
    .hall .i-am-here:active {
      background-image: url(images/here_2.png);
      left: 7px;
      bottom: 136px;
      width: 48px;
      height: 48px; }
  .hall .detail-viewer {
    position: absolute;
    background-image: url(images/detail_1.png);
    background-size: contain;
    left: 9px;
    bottom: 75px;
    width: 45px;
    height: 45px;
    z-index: 3;
    cursor: pointer; }
    .hall .detail-viewer:hover {
      opacity: 0.7; }
    .hall .detail-viewer:active {
      background-image: url(images/detail_2.png);
      left: 10px;
      bottom: 76px;
      width: 44px;
      height: 44px; }
  .hall .cross-key {
    position: absolute;
    background-image: url(images/cross_key_off1.png);
    background-size: contain;
    left: 7px;
    bottom: 13px;
    width: 50px;
    height: 50px;
    z-index: 3;
    cursor: pointer; }
    .hall .cross-key:hover {
      opacity: 0.7; }
    .hall .cross-key:active {
      background-image: url(images/cross_key_off2.png);
      left: 8px;
      bottom: 14px;
      width: 48px;
      height: 48px; }
  .hall .cross-key-pad {
    position: absolute;
    left: 70px;
    bottom: 36px;
    width: 141px;
    height: 141px;
    background-color: #0000001c;
    border-radius: 20px;
    display: none; }
    .hall .cross-key-pad .cross-key-pad-left, .hall .cross-key-pad .cross-key-pad-top, .hall .cross-key-pad .cross-key-pad-right, .hall .cross-key-pad .cross-key-pad-bottom {
      position: absolute;
      background-size: contain;
      pointer-events: all;
      cursor: pointer; }
      .hall .cross-key-pad .cross-key-pad-left:hover, .hall .cross-key-pad .cross-key-pad-top:hover, .hall .cross-key-pad .cross-key-pad-right:hover, .hall .cross-key-pad .cross-key-pad-bottom:hover {
        opacity: 0.8; }
    .hall .cross-key-pad .cross-key-pad-left, .hall .cross-key-pad .cross-key-pad-right {
      background-size: 60px, 46px; }
    .hall .cross-key-pad .cross-key-pad-top, .hall .cross-key-pad .cross-key-pad-bottom {
      background-size: 46px, 60px; }
    .hall .cross-key-pad .cross-key-pad-left {
      background-image: url(images/cross_key_pad_left1.png);
      left: 8px;
      top: 48px;
      width: 60px;
      height: 46px; }
      .hall .cross-key-pad .cross-key-pad-left:active {
        background-image: url(images/cross_key_pad_left2.png); }
    .hall .cross-key-pad .cross-key-pad-top {
      background-image: url(images/cross_key_pad_top1.png);
      left: 48px;
      top: 8px;
      width: 46px;
      height: 60px; }
      .hall .cross-key-pad .cross-key-pad-top:active {
        background-image: url(images/cross_key_pad_top2.png); }
    .hall .cross-key-pad .cross-key-pad-right {
      background-image: url(images/cross_key_pad_right1.png);
      left: 73px;
      top: 48px;
      width: 60px;
      height: 46px; }
      .hall .cross-key-pad .cross-key-pad-right:active {
        background-image: url(images/cross_key_pad_right2.png); }
    .hall .cross-key-pad .cross-key-pad-bottom {
      background-image: url(images/cross_key_pad_bottom1.png);
      left: 48px;
      top: 73px;
      width: 46px;
      height: 60px; }
      .hall .cross-key-pad .cross-key-pad-bottom:active {
        background-image: url(images/cross_key_pad_bottom2.png); }
    .hall .cross-key-pad .move-left, .hall .cross-key-pad .move-right {
      width: 18px;
      height: 18px;
      position: absolute;
      background-size: contain;
      pointer-events: all;
      cursor: pointer; }
      .hall .cross-key-pad .move-left:hover, .hall .cross-key-pad .move-right:hover {
        opacity: 0.7; }
      .hall .cross-key-pad .move-left:active, .hall .cross-key-pad .move-right:active {
        margin: 1px -1px -1px 1px; }
    .hall .cross-key-pad .move-left {
      display: none;
      background-image: url(images/cross_key_pad_move_left.png);
      left: 12px;
      bottom: 12px; }
    .hall .cross-key-pad .move-right {
      display: block;
      background-image: url(images/cross_key_pad_move_right.png);
      right: 12px;
      bottom: 12px; }

.hall::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none; }

/* --------------------------------------------------------------- */
/* デバック用情報                                                  */
/* --------------------------------------------------------------- */
.debug-win {
  display: none;
  min-width: 280px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  background-color: #e3e3d8ab;
  border: 1px solid #000000ad;
  padding: 3px 5px;
  box-shadow: 2px 2px 5px 0px #00000082; }
  @media screen and (max-width: 800px) {
    .debug-win {
      display: none; } }
  .debug-win .line {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    .debug-win .line .title {
      font-size: 11px;
      line-height: 11px;
      padding-right: 20px; }
    .debug-win .line .value {
      font-size: 11px;
      line-height: 11px;
      color: #880000; }

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