@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; }

.unusable {
  pointer-events: none;
  cursor: default;
  opacity: 0.3; }

.clickable {
  cursor: pointer !important; }
  .clickable:hover {
    opacity: 0.8; }

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

.common-close-icon {
  color: #ffffff;
  background-color: #a5a5a5;
  border: 2px solid #ffffff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  animation: rotate_0 0.65s forwards;
  cursor: pointer; }
  .common-close-icon:before {
    font-family: 'Material Icons';
    content: '\e5cd';
    font-size: 22px; }
  .common-close-icon:hover {
    animation: rotate_90 0.65s forwards; }
  .common-close-icon:active {
    width: 28px;
    height: 28px;
    right: 9px;
    top: 9px; }

input[type="checkbox"],
input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  opacity: 0;
  z-index: -1;
  width: 0;
  margin: 0; }
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    text-decoration: none;
    color: #2e3538;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    padding-left: 2.1em;
    padding-right: 0.75em;
    position: relative;
    white-space: nowrap;
    margin: 0.5em 0 0.5em 0; }
    input[type="checkbox"] + label:before,
    input[type="radio"] + label:before {
      background: #ffffff;
      border-radius: 0.375em;
      border: solid 1px rgba(210, 215, 217, 0.75);
      content: '';
      display: inline-block;
      font-size: 0.8em;
      width: 20px;
      height: 20px;
      left: 0;
      line-height: 2.0625em;
      position: absolute;
      text-align: center;
      top: 0; }
  input[type="checkbox"]:checked + label:before,
  input[type="radio"]:checked + label:before {
    font-family: "Font Awesome 5 Free";
    content: '\f00c';
    font-weight: bold;
    color: #ffffff;
    background: #3d4449;
    border-color: #3d4449; }
  input[type="checkbox"]:focus + label:before,
  input[type="radio"]:focus + label:before {
    border-color: #119dc7;
    box-shadow: 0 0 0 1px #119dc7; }
  input[type="checkbox"].disabled, input[type="checkbox"]:disabled,
  input[type="radio"].disabled,
  input[type="radio"]:disabled {
    pointer-events: none;
    opacity: 0.25; }

input[type="checkbox"] + label:before {
  border-radius: 0.375em; }

input[type="radio"] {
  pointer-events: none; }
  input[type="radio"] + label:before {
    border-radius: 100%; }

.help-tip {
  margin-left: 10px;
  font-size: 20px;
  position: relative;
  top: -1px;
  cursor: pointer; }
  .help-tip:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f059"; }
  .help-tip:hover {
    color: #ffa000; }

/* ==================================================================================================================
// ▼ ポップアップウィンドウ
================================================================================================================== */
/* 左上機能ボタン */
.left-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 12px;
  top: 6px;
  z-index: 3;
  /* ページオーナーへの訪問アラート */
  /* 在席／離席 */
  /* マイ掲示板 */
  /* 今の気分 */
  /* ログアウトアバター選択 */
  /* 館内放送履歴 */
  /* エモート履歴 */ }
  @media screen and (max-width: 800px) {
    .left-control {
      top: 50px; } }
  .left-control .my-circle-visitor {
    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-circle-visitor:hover {
      background-image: url(images/my_pin2.png); }
    .left-control .my-circle-visitor: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;
  flex-direction: row-reverse;
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 6; }
  .right-control .menu-map {
    width: 45px;
    height: 45px;
    cursor: pointer;
    margin: 0 0 0 12px;
    /*z-index: 4;*/
    overflow: visible;
    position: relative;
    background-image: url(../css/images/menu1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: unset;
    border: unset; }
    .right-control .menu-map:active {
      background-image: url(../css/images/menu2.png);
      width: 43px;
      height: 43px;
      margin: 1px 1px 1px 13px;
      opacity: 0.8; }
  .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 .navi-view {
    width: 45px;
    height: 45px;
    cursor: pointer;
    margin: 0 0 0 15px;
    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 1px 1px 16px;
      background-image: url(images/navi_btn2.png); }
  @media screen and (max-width: 800px) {
    .right-control {
      top: 50px;
      flex-direction: column; }
      .right-control .menu-map {
        margin: 0 0 12px 0; }
        .right-control .menu-map:active {
          margin: 1px 1px 13px 1px; }
      .right-control .owner-room-view {
        margin: 0 0 13px 2px; }
        .right-control .owner-room-view:active {
          margin: 1px 1px 14px 3px; }
      .right-control .navi-view {
        margin: 0 0 12px 0; }
        .right-control .navi-view:active {
          margin: 1px 1px 13px 1px; } }

/*マップメニュー*/
.menu-select {
  position: absolute;
  display: none;
  flex-wrap: wrap;
  width: 155px;
  top: 60px;
  right: 9px;
  background-color: #f7f7f7;
  border: solid 2px #505050;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: default;
  z-index: 7; }
  @media screen and (max-width: 800px) {
    .menu-select {
      top: 53px !important;
      right: 65px !important; } }
  .menu-select:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 12px;
    margin-left: -15px;
    border: 12px solid transparent;
    border-bottom: 12px solid #f7f7f7;
    z-index: 3; }
    @media screen and (max-width: 800px) {
      .menu-select:before {
        top: 20px;
        right: -23px;
        margin-left: unset;
        margin-top: -15px;
        border: 12px solid transparent;
        border-left: 12px solid #f7f7f7; } }
  .menu-select:after {
    content: "";
    position: absolute;
    top: -28px;
    right: 10px;
    margin-left: -17px;
    border: 14px solid transparent;
    border-bottom: 14px solid #505050;
    z-index: 2; }
    @media screen and (max-width: 800px) {
      .menu-select:after {
        top: 20px;
        right: -28px;
        margin-left: unset;
        margin-top: -17px;
        border: 14px solid transparent;
        border-left: 14px solid #505050; } }
  .menu-select .menu-select-one {
    width: 100%;
    padding: 9px 9px 9px 15px;
    border-bottom: 1px solid #dbdbdb;
    text-align: left;
    white-space: nowrap; }
    .menu-select .menu-select-one:hover {
      color: #ffffff;
      background-color: #ffc107;
      cursor: pointer; }
    .menu-select .menu-select-one:last-child {
      border-bottom: none; }
    .menu-select .menu-select-one i {
      padding-right: 7px; }

/*通常モードではない時*/
.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: 6; }
  .navi-window .navi-area {
    width: 100%;
    height: 100%;
    background-color: #45463de6;
    border-bottom: 2px solid #3a3a3a;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #c9bc9d;
    background-image: url(images/navi_back.jpg);
    background-repeat: repeat-x;
    background-size: auto 65px;
    background-position: center top; }
    @media screen and (max-width: 800px) {
      .navi-window .navi-area {
        -ms-overflow-style: none;
        /* IE, Edge 対応 */
        scrollbar-width: none;
        /* Firefox 対応 */ } }
    .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 {
    height: 5px; }
  .navi-window .navi-area::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .navi-window .navi-area::-webkit-scrollbar-thumb {
    background-color: #58582c; }
  @media screen and (max-width: 800px) {
    .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: 32px;
    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-circle-visitor-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-circle-visitor-dlg .p-title {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #303030; }
    .my-circle-visitor-dlg .p-title .txt {
      color: #ffffff;
      font-size: 16px;
      font-weight: bold; }
    .my-circle-visitor-dlg .p-title .tag {
      color: #ffff00;
      font-size: 16px;
      font-weight: bold; }
  .my-circle-visitor-dlg .p-body {
    display: block;
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: scroll; }
    .my-circle-visitor-dlg .p-body .visitor {
      display: block;
      width: 100%;
      height: 60px;
      background-color: #f1f1f1;
      margin-bottom: 3px;
      display: flex; }
      .my-circle-visitor-dlg .p-body .visitor .thumbnail {
        width: 66px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
        .my-circle-visitor-dlg .p-body .visitor .thumbnail .img {
          width: 54px;
          height: 54px;
          overflow: hidden; }
          .my-circle-visitor-dlg .p-body .visitor .thumbnail .img img {
            object-fit: contain;
            border-radius: 50%;
            width: 100%;
            height: 100%; }
            .my-circle-visitor-dlg .p-body .visitor .thumbnail .img img.walker {
              width: 216px;
              height: 216px;
              object-fit: unset;
              border-radius: unset; }
      .my-circle-visitor-dlg .p-body .visitor .contents {
        width: calc(100% - 66px);
        padding-left: 8px;
        display: flex;
        flex-wrap: wrap;
        align-content: center; }
        .my-circle-visitor-dlg .p-body .visitor .contents .name {
          width: 100%;
          text-align: left;
          font-size: 16px;
          font-weight: bold;
          color: #895f00; }
        .my-circle-visitor-dlg .p-body .visitor .contents .action {
          width: 100%;
          display: flex;
          justify-content: space-between; }
          .my-circle-visitor-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-circle-visitor-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-circle-visitor-dlg .p-body .visitor .contents .action .btn:hover {
              opacity: 0.7; }
            .my-circle-visitor-dlg .p-body .visitor .contents .action .btn:active {
              background-color: #ff9800;
              opacity: 1; }
    .my-circle-visitor-dlg .p-body .no-record {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center; }
      .my-circle-visitor-dlg .p-body .no-record .msg {
        font-size: 22px;
        font-weight: bold;
        color: #888888; }
  .my-circle-visitor-dlg .p-body::-webkit-scrollbar {
    width: 3px; }
  .my-circle-visitor-dlg .p-body::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .my-circle-visitor-dlg .p-body::-webkit-scrollbar-thumb {
    background-color: #aa4242; }
  .my-circle-visitor-dlg .p-option {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd9d2; }
    .my-circle-visitor-dlg .p-option .btn {
      color: #ffffff;
      background-color: #933434;
      font-size: 14px;
      padding: 2px 30px;
      border-radius: 15px;
      cursor: pointer; }
      .my-circle-visitor-dlg .p-option .btn:hover {
        opacity: 0.7; }
      .my-circle-visitor-dlg .p-option .btn:active {
        background-color: #ff9800;
        opacity: 1; }
  .my-circle-visitor-dlg .p-message {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .my-circle-visitor-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-circle-visitor-dlg .p-message .txt {
          font-size: 22px;
          padding: 18px 0; } }
      @media screen and (max-width: 500px) {
        .my-circle-visitor-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: 63px;
      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.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60px 60px; }
  .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;
    padding: 5px; }
    .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:active {
              height: 33px;
              padding: 2px 9px;
              min-width: 83px;
              margin: 1px 6px; }
          .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; }

.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; }

/* ==================================================================================================================
// ▼ アバターアニメーション
================================================================================================================== */
.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; } }
@keyframes popUpBody {
  0% {
    opacity: 0;
    /* 透明から */
    transform: scale(0.8);
    /* 少し小さい状態から */ }
  60% {
    transform: scale(1.05);
    /* 勢い余って少し大きく（弾力感） */ }
  100% {
    opacity: 1;
    /* くっきり表示 */
    transform: scale(1);
    /* 元のサイズへ */ } }
/* ==================================================================================================================
// ▼ アバター
================================================================================================================== */
.user {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 80px;
  z-index: 10;
  /*
  left: -100px; //画面ロード時点で見えない領域にセット
  top: 100px;
  */
  top: 0;
  left: 0;
  /* 滑らかにするための設定 */
  will-change: transform;
  /* GPU合成レイヤーを有効化 */
  backface-visibility: hidden;
  /*立ち読み中*/
  /*声かけて*/
  /*アバター毎のメッセージ*/ }
  .user .avatar {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #e3dbb7;
    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;
    /* これだとJSの移動用transformと競合して消えるので、marginで代用 */
    /* transform: translate(-35px, -100px); */
    margin-left: -35px;
    margin-top: -100px;
    /* これを使うと「レイアウト／秒」が跳ねあがるので使用禁止 */
    /* transition: all 500ms 0s ease; */ }
    .user.whole-body .avatar {
      border-radius: unset;
      border: unset;
      /* 0.4秒かけてアニメーション（「transition: all 500ms 0s ease」の代わりに利用、GPU利用） */ }
      .user.whole-body .avatar.popUpBody {
        animation: popUpBody 0.4s ease-out forwards; }
      .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; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼ iziModalダイアルログ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.izi-select-dlg {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border: 20px solid #e7e7e7; }
  .izi-select-dlg .izi-close {
    background-color: #a5a5a5;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 16px;
    width: 30px;
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute !important;
    right: 8px;
    top: 8px;
    transform: rotate(0deg);
    animation: rotate_0 0.65s forwards; }
    .izi-select-dlg .izi-close:hover {
      animation: rotate_90 0.65s forwards; }
    .izi-select-dlg .izi-close:active {
      width: 28px;
      height: 28px;
      right: 9px;
      top: 9px; }
  .izi-select-dlg .izi-title {
    width: 100%;
    color: #414141;
    font-size: 24px;
    font-weight: bold;
    line-height: 26px;
    text-align: center; }
  .izi-select-dlg .izi-contents {
    font-size: 18px;
    line-height: 22px;
    color: #414141;
    margin-top: 20px;
    text-align: left;
    white-space: pre-line;
    word-break: break-all; }
    .izi-select-dlg .izi-contents * {
      font-size: unset;
      /*font-weight: normal;*/
      white-space: normal; }
  .izi-select-dlg .izi-warn {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
    padding: 10px 0;
    border-top: 1px dashed #d0005b42;
    border-bottom: 1px dashed #d0005b42; }
    .izi-select-dlg .izi-warn .izi-warn-mark {
      position: relative;
      margin-right: 10px;
      height: 16px; }
      .izi-select-dlg .izi-warn .izi-warn-mark:before {
        font-family: 'Material Icons';
        content: '\e85a';
        font-size: 23px;
        line-height: 21px;
        color: #d0005b; }
    .izi-select-dlg .izi-warn .izi-warn-txt {
      color: #d0005b;
      font-size: 16px;
      text-align: left;
      white-space: pre-line; }
  .izi-select-dlg .izi-control {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px; }
    .izi-select-dlg .izi-control .izi-btn {
      display: flex;
      padding: 5px 20px;
      color: #ffffff;
      background-color: #2f2f2f;
      margin: 0 3%;
      border-radius: 20px;
      cursor: pointer;
      white-space: nowrap; }
      .izi-select-dlg .izi-control .izi-btn:hover {
        background-color: #ff6666; }
      .izi-select-dlg .izi-control .izi-btn:active {
        padding: 4px 19px;
        margin: 1px calc(3% + 1px); }
    .izi-select-dlg .izi-control .izi-cancel {
      color: #ffffff;
      background-color: #797979; }

.timeout {
  border: 20px solid #ffc107;
  background-color: #ffc10747; }
  .timeout .izi-close {
    background-color: #ffc107; }
  .timeout .izi-contents {
    font-size: 22px;
    line-height: 26px;
    color: #d7a81c;
    margin-bottom: 20px; }

@keyframes rotate_90 {
  0% {
    transform: rotate(0deg);
    background-color: #666666; }
  100% {
    transform: rotate(90deg);
    background-color: #ff6666; } }
@keyframes rotate_0 {
  0% {
    transform: rotate(0deg) scale(0.5); }
  100% {
    transform: rotate(-90deg) scale(1); } }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼ コンテンツ・マップ共通ロジック
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* スマホで指長押しで画像選択を防止 */
.no-drop {
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none; }

.trim-txt {
  text-box: trim-both cap alphabetic !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▼ コンテンツ・マップ共通ロジック
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tags {
  width: 100%;
  display: flex; }
  .tags .tag {
    padding: 3px 8px;
    color: #ffffff;
    background-color: #666666;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 16px;
    line-height: 16px;
    white-space: nowrap; }
  .tags .prelease {
    background-color: #6bc06e; }
  .tags .r18 {
    background-color: #e91e63; }

/* --------------------------------------------------------------- */
/* 作品                                                            */
/* --------------------------------------------------------------- */
.artworks {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  font-size: 14px;
  /*コントロールボタン*/ }
  @media screen and (max-width: 500px) {
    .artworks {
      padding: unset; } }
  .artworks .artwork {
    width: calc(50% - 20px);
    margin: 10px 10px 30px;
    display: flex;
    flex-direction: column;
    position: relative; }
    @media screen and (max-width: 500px) {
      .artworks .artwork {
        width: calc(100% - 20px); } }
    .artworks .artwork .main {
      display: flex;
      flex-direction: column;
      border: 1px solid #e9e9e9ed;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 0 10px #9b9b9b40;
      cursor: pointer;
      /* 滑らかにへこませるためのアニメーション */
      transition: transform 0.1s ease, box-shadow 0.1s ease; }
      @media screen and (max-width: 500px) {
        .artworks .artwork .main {
          padding: unset; } }
      .artworks .artwork .main .tags {
        position: absolute;
        left: 14px;
        top: 14px; }
        @media screen and (max-width: 500px) {
          .artworks .artwork .main .tags {
            left: 10px; } }
      .artworks .artwork .main .artwork-img {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center; }
        .artworks .artwork .main .artwork-img img {
          width: 100%; }
          .artworks .artwork .main .artwork-img img.small {
            width: 80%;
            padding-top: 45px; }
          .artworks .artwork .main .artwork-img img.small-frame {
            width: 100%;
            padding: 10.5% 8% 7%;
            border: 1px solid #ebebeb;
            background-color: #ffffff;
            border-radius: 4px; }
        .artworks .artwork .main .artwork-img .info {
          position: absolute;
          bottom: 16px;
          right: 9px;
          padding: 3px 7px;
          color: #ffffff;
          background-color: #595959d9;
          border: 1px solid #ffffff8c;
          display: flex;
          align-items: center;
          font-size: 12px;
          line-height: 12px; }
          .artworks .artwork .main .artwork-img .info.not {
            background-color: #ff4182;
            border: 1px solid #ff4182; }
        .artworks .artwork .main .artwork-img .page-view {
          display: flex;
          align-items: center;
          position: absolute;
          left: 10px;
          bottom: 16px; }
          .artworks .artwork .main .artwork-img .page-view .tag {
            font-size: 12px;
            line-height: 12px;
            color: #d7c284; }
          .artworks .artwork .main .artwork-img .page-view .count {
            margin-left: 8px;
            font-size: 18px;
            line-height: 18px;
            font-weight: bold;
            color: #ffd639; }
        .artworks .artwork .main .artwork-img .counter-bar {
          position: absolute;
          padding: 2px 8px 1px;
          font-size: 15px;
          line-height: 15px;
          left: 50%;
          bottom: 17px;
          transform: translateX(-50%);
          color: #4f7127;
          background-color: #f7ffa2c7;
          border-radius: 2px; }
          .artworks .artwork .main .artwork-img .counter-bar:before {
            font-family: "Font Awesome 5 Free";
            content: "\f302";
            font-weight: 900;
            font-size: 13px;
            padding-right: 5px; }
      .artworks .artwork .main .detail {
        width: 100%;
        text-align: left;
        /*margin-top: 10px;*/
        padding: 15px 20px; }
        .artworks .artwork .main .detail .artwork-title {
          font-size: 16px;
          line-height: 20px;
          font-weight: bold;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-clamp: 1; }
        .artworks .artwork .main .detail .explain {
          margin-top: 5px;
          font-weight: normal;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2; }
      .artworks .artwork .main:hover {
        background-color: #f7f7f7;
        border: 1px solid #cfcfcf; }
      .artworks .artwork .main:not(.no-dent):active {
        transform: scale(0.97);
        box-shadow: unset;
        border: 1px solid #f1f1f1; }
      .artworks .artwork .main.stop {
        border: unset;
        border-radius: unset;
        box-shadow: unset;
        cursor: default; }
        .artworks .artwork .main.stop:hover {
          background-color: unset;
          border: unset; }
        .artworks .artwork .main.stop:active {
          transform: unset;
          border: unset; }
    .artworks .artwork .sub {
      display: flex;
      justify-content: center;
      margin-top: 10px; }
      .artworks .artwork .sub .artwork-access {
        padding: 3px 10px;
        font-weight: bold;
        border: 1px solid #ffffff;
        cursor: pointer; }
        .artworks .artwork .sub .artwork-access:hover {
          color: #e91e63;
          border: 1px dashed #e91e63; }
    .artworks .artwork .controls {
      position: absolute;
      right: 5px;
      top: 5px;
      display: flex;
      flex-direction: column; }
  .artworks.editing {
    padding: unset; }
    .artworks.editing .artwork {
      width: calc(33% - 8px);
      margin: 10px 5px 30px; }
      @media screen and (max-width: 1100px) {
        .artworks.editing .artwork {
          width: calc(48% - 1px); } }
      @media screen and (max-width: 500px) {
        .artworks.editing .artwork {
          width: unset; } }
  .artworks .edit, .artworks .move, .artworks .assign, .artworks .unassign {
    color: #ffffff;
    border: 1px solid #ffffff;
    box-shadow: 0px 0px 3px 0px #0000005e;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer; }
    .artworks .edit:before, .artworks .move:before, .artworks .assign:before, .artworks .unassign:before {
      font-family: 'Material Icons';
      font-size: 25px; }
    .artworks .edit:active, .artworks .move:active, .artworks .assign:active, .artworks .unassign:active {
      margin: 6px 4px 4px 6px; }
  .artworks .edit {
    background-color: #119dc7bd; }
    .artworks .edit:before {
      content: '\e3c9'; }
    .artworks .edit:hover {
      background-color: #ffc107; }
  .artworks .move {
    background-color: #4d4d4d80; }
    .artworks .move:before {
      content: '\eb51'; }
    .artworks .move:hover {
      background-color: #ffc107; }
  .artworks .assign {
    background-color: #a9a92a99; }
    .artworks .assign:before {
      content: '\e178'; }
    .artworks .assign:hover {
      background-color: #ffc107; }
  .artworks .unassign {
    background-color: #a9a92a99; }
    .artworks .unassign:before {
      content: '\e16f'; }
    .artworks .unassign:hover {
      background-color: #ffc107; }
  .artworks .artwork-list-item {
    width: 100%;
    display: flex;
    height: 155px;
    background-color: #f9f9f9;
    box-shadow: 1px 1px 3px #00000070;
    border-radius: 5px;
    margin-bottom: 10px; }
    .artworks .artwork-list-item .image {
      width: 180px;
      height: 100%;
      position: relative;
      cursor: pointer; }
      @media screen and (max-width: 800px) {
        .artworks .artwork-list-item .image {
          width: 140px; } }
      @media screen and (max-width: 500px) {
        .artworks .artwork-list-item .image {
          width: 100px; } }
      .artworks .artwork-list-item .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px 0 0 5px; }
      .artworks .artwork-list-item .image .info {
        position: absolute;
        bottom: 6px;
        right: 7px;
        padding: 3px 7px;
        color: #ffffff;
        background-color: #595959d9;
        border: 1px solid #ffffff8c;
        display: flex;
        align-items: center;
        font-size: 12px;
        line-height: 12px; }
        .artworks .artwork-list-item .image .info.not {
          background-color: #ff4182;
          border: 1px solid #ff4182; }
      .artworks .artwork-list-item .image .counter-bar {
        position: absolute;
        font-size: 13px;
        line-height: 13px;
        left: 7px;
        top: 5px;
        padding: 2px 3px;
        color: #4f7127;
        background-color: #f7ffa2c7;
        border-radius: 2px; }
        .artworks .artwork-list-item .image .counter-bar:before {
          font-family: "Font Awesome 5 Free";
          content: "\f302";
          font-weight: 900;
          font-size: 12px;
          padding-right: 3px; }
      .artworks .artwork-list-item .image:hover {
        opacity: 0.8; }
    .artworks .artwork-list-item .contents {
      width: calc(100% - 180px - 50px);
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      @media screen and (max-width: 800px) {
        .artworks .artwork-list-item .contents {
          width: calc(100% - 140px - 50px); } }
      @media screen and (max-width: 500px) {
        .artworks .artwork-list-item .contents {
          width: calc(100% - 100px - 50px); } }
      .artworks .artwork-list-item .contents .detail {
        width: 100%;
        display: flex;
        flex-direction: column; }
        .artworks .artwork-list-item .contents .detail .artwork-title {
          font-size: 16px;
          line-height: 20px;
          font-weight: bold;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          line-clamp: 1; }
        .artworks .artwork-list-item .contents .detail .explain {
          margin-top: 3px;
          font-weight: normal;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          font-size: 14px;
          line-height: 20px; }
        .artworks .artwork-list-item .contents .detail .artwork-tags {
          flex-wrap: nowrap;
          overflow-x: auto;
          scrollbar-width: none; }
          .artworks .artwork-list-item .contents .detail .artwork-tags .artwork-tag {
            min-width: 60px; }
        .artworks .artwork-list-item .contents .detail .artwork-tags::-webkit-scrollbar {
          display: none; }
      .artworks .artwork-list-item .contents .page-view {
        display: flex;
        align-items: center;
        margin-top: 5px; }
        .artworks .artwork-list-item .contents .page-view .tag {
          font-size: 12px;
          line-height: 12px;
          color: #93896c; }
        .artworks .artwork-list-item .contents .page-view .count {
          margin: 0 0 0 8px;
          font-size: 18px;
          line-height: 18px;
          font-weight: bold;
          color: #d7a65d; }
      .artworks .artwork-list-item .contents .tags {
        margin-bottom: 5px; }
        .artworks .artwork-list-item .contents .tags .tag {
          font-size: 12px;
          line-height: 12px;
          padding: 3px 8px; }
    .artworks .artwork-list-item .controls {
      width: 50px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px 10px 10px 0; }
    .artworks .artwork-list-item.no-move .contents {
      width: calc(100% - 80px - 50px); }
    .artworks .artwork-list-item.no-move .controls {
      width: 50px; }

/* --------------------------------------------------------------- */
/* 作品表示POPUP                                                   */
/* --------------------------------------------------------------- */
.artwork-viewer {
  display: none;
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 201;
  max-width: 1200px;
  max-height: 900px;
  box-shadow: 0px 0px 10px 0px #000000; }
  .artwork-viewer .counter-bar {
    position: absolute;
    padding: 4px 16px;
    font-size: 19px;
    line-height: 17px;
    color: #4f7127;
    background-color: #f7ffa2c7;
    border-radius: 4px;
    pointer-events: none; }
    .artwork-viewer .counter-bar:before {
      font-family: "Font Awesome 5 Free";
      content: "\f302";
      font-weight: 900;
      font-size: 16px;
      padding-right: 5px; }
  .artwork-viewer .artwork-details {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    height: calc(100% - 30px);
    /*小説モード*/ }
    @media screen and (max-width: 800px) {
      .artwork-viewer .artwork-details {
        overflow-y: auto;
        align-content: flex-start; } }
    .artwork-viewer .artwork-details .image-side {
      width: 55%;
      height: 100%;
      padding: 0 20px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      @media screen and (max-width: 800px) {
        .artwork-viewer .artwork-details .image-side {
          width: 100%;
          height: unset;
          padding: 0; } }
      .artwork-viewer .artwork-details .image-side .img-wrap {
        max-width: 100%;
        max-height: calc(100% - 50px); }
        .artwork-viewer .artwork-details .image-side .img-wrap img {
          width: 100%;
          height: 100%;
          object-fit: contain; }
      .artwork-viewer .artwork-details .image-side .view-command {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border: 1px solid #717171;
        border-radius: 5px;
        margin-top: 20px;
        position: relative;
        cursor: pointer; }
        .artwork-viewer .artwork-details .image-side .view-command:hover {
          color: #ffffff;
          background-color: #4b4b4b;
          border: 1px solid #4b4b4b; }
        .artwork-viewer .artwork-details .image-side .view-command:has(.counter-bar:hover) {
          color: unset;
          background-color: unset;
          border: 1px solid #717171; }
        .artwork-viewer .artwork-details .image-side .view-command .counter-bar {
          top: -60px;
          left: 50%;
          transform: translateX(-50%); }
    .artwork-viewer .artwork-details .contents {
      display: flex;
      flex-direction: column;
      text-align: left;
      width: 45%;
      max-height: 100%;
      overflow-y: auto;
      padding: 0 20px 0 0; }
      @media screen and (max-width: 800px) {
        .artwork-viewer .artwork-details .contents {
          width: 100%;
          margin-left: unset;
          overflow-y: unset;
          padding: 30px 10px 50px 10px;
          max-height: unset; } }
      .artwork-viewer .artwork-details .contents .summary {
        width: 100%;
        display: flex;
        justify-content: space-between; }
        .artwork-viewer .artwork-details .contents .summary .digest {
          display: flex;
          flex-direction: column; }
          .artwork-viewer .artwork-details .contents .summary .digest .title {
            font-size: 22px;
            line-height: 28px;
            font-weight: bold;
            word-break: break-all; }
          .artwork-viewer .artwork-details .contents .summary .digest .tags {
            margin-top: 12px; }
        .artwork-viewer .artwork-details .contents .summary .controls {
          display: flex;
          margin-left: 10px; }
      .artwork-viewer .artwork-details .contents .explain {
        white-space: pre-line;
        word-wrap: break-word;
        margin-top: 12px;
        line-height: 28px; }
      .artwork-viewer .artwork-details .contents .links {
        width: 100%;
        padding: 10px 0 15px;
        background-color: #ffffff; }
        .artwork-viewer .artwork-details .contents .links .link {
          display: block;
          width: 100%;
          padding: 5px 20px;
          border: 2px solid #d7d7d7;
          border-radius: 4px;
          text-align: center;
          color: #454545;
          text-decoration: none;
          cursor: default; }
          .artwork-viewer .artwork-details .contents .links .link .txt {
            color: #cfcfcf;
            font-size: 16px;
            font-weight: bold;
            line-height: 1px;
            word-break: break-all; }
          .artwork-viewer .artwork-details .contents .links .link .tip {
            top: unset; }
          .artwork-viewer .artwork-details .contents .links .link.active {
            border: 2px solid #af8f30;
            cursor: pointer; }
            .artwork-viewer .artwork-details .contents .links .link.active .txt {
              color: #af8f30; }
            .artwork-viewer .artwork-details .contents .links .link.active .link-btn {
              margin-left: 10px;
              color: #ff9800;
              font-size: 16px; }
            .artwork-viewer .artwork-details .contents .links .link.active:hover {
              background-color: #fef8da; }
    .artwork-viewer .artwork-details .contents::-webkit-scrollbar {
      width: 3px; }
    .artwork-viewer .artwork-details .contents::-webkit-scrollbar-track {
      background-color: #cccccc; }
    .artwork-viewer .artwork-details .contents::-webkit-scrollbar-thumb {
      background-color: #3d6d3f; }
    .artwork-viewer .artwork-details .command {
      width: 70px;
      height: 70px;
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain; }
      .artwork-viewer .artwork-details .command.mybinder {
        background-image: url(../css/images/btn_mybinder.png); }
      .artwork-viewer .artwork-details .command.mybinder-on {
        background-image: url(../css/images/btn_mybinder_ok.png); }
      .artwork-viewer .artwork-details .command:hover {
        opacity: 0.8; }
      .artwork-viewer .artwork-details .command:active {
        width: 68px;
        height: 68px;
        margin: 1px; }
    .artwork-viewer .artwork-details .novel-wrap {
      width: 100%;
      height: 100%;
      padding: 20px 0;
      overflow-x: auto;
      overflow-y: hidden;
      display: block;
      /* 実機でスクロールを許可 */
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
      /* スクロールの起点を右端にし、左方向へのスクロールを許可(Firefox対応) */
      direction: rtl;
      /* スクロールバー設定 */ }
      .artwork-viewer .artwork-details .novel-wrap .novel-contents {
        /* 中身の幅を「コンテンツの合計幅」に強制固定 */
        width: max-content !important;
        min-width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        margin-right: 20px;
        /* 実機でのスクロール対策(paddingを含めない計算にする) */
        box-sizing: content-box;
        /* 中身のテキスト等は通常のLTR基準に戻す（文字順が反転するのを防ぐため） */
        direction: ltr;
        /* 各パーツの縮小禁止設定 */ }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents:after {
          content: '';
          display: block;
          width: 50px;
          min-width: 50px;
          height: 1px;
          flex-shrink: 0;
          /* 絶対に縮ませない */ }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary, .artwork-viewer .artwork-details .novel-wrap .novel-contents .img-wrap, .artwork-viewer .artwork-details .novel-wrap .novel-contents .explain {
          flex-shrink: 0 !important; }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          height: 100%;
          margin-left: 20px; }
          .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary .digest {
            display: flex;
            flex-direction: row-reverse;
            align-items: flex-start;
            height: calc(100% - 85px); }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary .digest .title {
              font-size: 22px;
              font-weight: bold;
              line-height: 28px;
              text-align: start;
              /*現代の標準規格（W3C準拠）に変更*/
              /*writing-mode: tb;*/
              writing-mode: vertical-rl; }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary .digest .tags {
              margin-right: 12px;
              display: flex;
              /* flex追加 */
              flex-direction: column;
              align-items: flex-end; }
              .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary .digest .tags .tag {
                margin-right: unset;
                margin-bottom: 10px;
                padding: 8px 3px;
                /*現代の標準規格（W3C準拠）に変更*/
                /*writing-mode: tb;*/
                writing-mode: vertical-rl; }
          .artwork-viewer .artwork-details .novel-wrap .novel-contents .summary .controls {
            display: flex;
            margin-top: 15px;
            height: 70px; }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents .img-wrap {
          width: auto;
          height: 100%;
          height: fit-content;
          margin-right: 0;
          position: relative;
          flex-shrink: 0; }
          .artwork-viewer .artwork-details .novel-wrap .novel-contents .img-wrap img {
            width: auto;
            height: auto;
            max-width: 500px;
            max-height: 100%;
            display: block; }
          .artwork-viewer .artwork-details .novel-wrap .novel-contents .img-wrap .counter-bar {
            top: 10px;
            right: 10px; }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents .explain {
          height: 100%;
          display: flex;
          flex-direction: column;
          white-space: pre-line;
          word-wrap: break-word;
          margin: 0 20px;
          line-height: 28px;
          text-align: start;
          writing-mode: vertical-rl; }
        .artwork-viewer .artwork-details .novel-wrap .novel-contents .links {
          padding: 0 10px;
          background-color: #ffffff;
          flex-shrink: 0; }
          .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link {
            padding: 20px 10px;
            border: 2px solid #d7d7d7;
            border-radius: 4px;
            cursor: default;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 230px;
            max-height: 100%;
            min-width: 38px;
            text-decoration: none; }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link .txt {
              color: #cfcfcf;
              font-size: 16px;
              font-weight: bold;
              line-height: 1px;
              writing-mode: vertical-rl; }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link .link-btn {
              margin-top: 10px;
              color: #ff9800;
              font-size: 16px; }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link .tip {
              top: unset;
              margin-left: unset;
              margin-top: 10px; }
            .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link.active {
              border: 2px solid #af8f30;
              cursor: pointer; }
              .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link.active .txt {
                color: #af8f30; }
              .artwork-viewer .artwork-details .novel-wrap .novel-contents .links .link.active:hover {
                background-color: #fef8da; }
      .artwork-viewer .artwork-details .novel-wrap::-webkit-scrollbar {
        height: 7px; }
      .artwork-viewer .artwork-details .novel-wrap::-webkit-scrollbar-track {
        background-color: #cccccc; }
      .artwork-viewer .artwork-details .novel-wrap::-webkit-scrollbar-thumb {
        background-color: #3d6d3f; }
  .artwork-viewer .artwork-details::-webkit-scrollbar {
    width: 3px; }
  .artwork-viewer .artwork-details::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .artwork-viewer .artwork-details::-webkit-scrollbar-thumb {
    background-color: #3d6d3f; }
  .artwork-viewer .artwork-swiper {
    display: none;
    height: calc(100% - 30px); }
    .artwork-viewer .artwork-swiper .slider {
      height: 100%;
      background-color: #ffffff; }
      .artwork-viewer .artwork-swiper .slider .swiper.main-slider {
        height: calc(100% - 60px);
        position: relative; }
        @media screen and (max-width: 500px) {
          .artwork-viewer .artwork-swiper .slider .swiper.main-slider {
            height: calc(100% - 50px); } }
        .artwork-viewer .artwork-swiper .slider .swiper.main-slider .swiper-zoom-container, .artwork-viewer .artwork-swiper .slider .swiper.main-slider .swiper-slide img {
          touch-action: none !important; }
        .artwork-viewer .artwork-swiper .slider .swiper.main-slider .swiper-pagination-bullet {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          font-size: 12px;
          color: #ffffff9e;
          opacity: 1;
          background-color: rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 1px 1px #ffffff96; }
        .artwork-viewer .artwork-swiper .slider .swiper.main-slider .swiper-pagination-bullet-active {
          color: #fff;
          background-color: #007aff; }
        .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls {
          position: absolute;
          right: 20px;
          bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          z-index: 2; }
          @media screen and (max-width: 800px) {
            .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls {
              left: 50%;
              right: unset;
              transform: translateX(-50%);
              bottom: 10px;
              flex-direction: row; } }
          .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background-color: #00000080;
            border-radius: 50%;
            margin: 10px 0 0 0;
            cursor: pointer; }
            @media screen and (max-width: 800px) {
              .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control {
                margin: 0 6px; } }
            .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control.large {
              width: 30px;
              height: 30px; }
            .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control.disabled {
              background-color: #00000030;
              pointer-events: none; }
            .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control .material-icons {
              font-size: 20px; }
            .artwork-viewer .artwork-swiper .slider .swiper.main-slider .controls .control:hover {
              background-color: #000000cc; }
      .artwork-viewer .artwork-swiper .slider .swiper.sub-slider {
        height: 60px;
        padding: 5px 0; }
        @media screen and (max-width: 500px) {
          .artwork-viewer .artwork-swiper .slider .swiper.sub-slider {
            height: 50px; } }
        .artwork-viewer .artwork-swiper .slider .swiper.sub-slider .swiper-wrapper .swiper-slide {
          width: 60px;
          height: 100%; }
          @media screen and (max-width: 500px) {
            .artwork-viewer .artwork-swiper .slider .swiper.sub-slider .swiper-wrapper .swiper-slide {
              width: 50px; } }
          .artwork-viewer .artwork-swiper .slider .swiper.sub-slider .swiper-wrapper .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
        .artwork-viewer .artwork-swiper .slider .swiper.sub-slider .swiper-wrapper .swiper-slide-active img {
          box-shadow: 0 0 0px 3px #E91E63; }
      @media screen and (max-width: 800px) {
        .artwork-viewer .artwork-swiper .slider .swiper .swiper-button-next, .artwork-viewer .artwork-swiper .slider .swiper .swiper-button-prev {
          display: none; } }

/* --------------------------------------------------------------- */
/* 作品編集POPUP                                                   */
/* --------------------------------------------------------------- */
.artwork-editor {
  display: none;
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 201;
  max-width: 1310px;
  max-height: 1000px;
  box-shadow: 0px 0px 10px 0px #000000; }
  .artwork-editor .artwork-editor-contents {
    height: calc(100% - 30px);
    padding: 0 20px;
    overflow-y: auto; }
    @media screen and (max-width: 800px) {
      .artwork-editor .artwork-editor-contents {
        padding: 0 10px; } }
  .artwork-editor .artwork-editor-contents::-webkit-scrollbar {
    width: 3px; }
  .artwork-editor .artwork-editor-contents::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .artwork-editor .artwork-editor-contents::-webkit-scrollbar-thumb {
    background-color: #3d6d3f; }

/* --------------------------------------------------------------- */
/* 作品割り当てPOPUP                                               */
/* --------------------------------------------------------------- */
.artwork-assign {
  display: none;
  flex-direction: column;
  width: 96%;
  height: fit-content;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 201;
  max-width: 550px;
  max-height: 75%;
  box-shadow: 0px 0px 10px 0px #000000;
  overflow: hidden; }
  .artwork-assign .artwork-assign-contents {
    padding: 0 20px;
    overflow-y: auto;
    /*height: calc(100% - 30px);*/
    /*flex-grow: 1;*/
    height: auto;
    min-height: 0; }
    @media screen and (max-width: 800px) {
      .artwork-assign .artwork-assign-contents {
        padding: 0 10px; } }
    .artwork-assign .artwork-assign-contents .title {
      font-size: 1.2em;
      font-weight: bold; }
    .artwork-assign .artwork-assign-contents .explain {
      font-size: 14px; }
    .artwork-assign .artwork-assign-contents .assign-items {
      width: 100%;
      display: flex;
      flex-direction: column; }
      .artwork-assign .artwork-assign-contents .assign-items .assign-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #d7d7d7;
        border-radius: 4px;
        margin-bottom: 5px;
        padding: 0 10px;
        overflow: hidden; }
        @media screen and (max-width: 800px) {
          .artwork-assign .artwork-assign-contents .assign-items .assign-item {
            padding: 0; } }
        .artwork-assign .artwork-assign-contents .assign-items .assign-item .item {
          width: 100%;
          display: flex;
          align-items: center; }
          .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .image {
            width: 80px;
            height: 50px;
            margin-right: 10px; }
            .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .image img {
              width: 80px;
              height: 100%;
              object-fit: cover; }
          .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .contents {
            display: flex;
            flex-direction: column; }
            .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .contents .main-title, .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .contents .sub-title {
              font-size: 14px;
              line-height: 17px;
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              line-clamp: 1; }
            .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .contents .main-title {
              color: #aaaa00; }
            .artwork-assign .artwork-assign-contents .assign-items .assign-item .item .contents .sub-title {
              margin-top: 4px; }
        .artwork-assign .artwork-assign-contents .assign-items .assign-item .select {
          padding: 5px 10px 5px 5px; }
        .artwork-assign .artwork-assign-contents .assign-items .assign-item .select-right {
          padding: 5px 5px 5px 10px; }
  .artwork-assign .artwork-assign-contents::-webkit-scrollbar {
    width: 3px; }
  .artwork-assign .artwork-assign-contents::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .artwork-assign .artwork-assign-contents::-webkit-scrollbar-thumb {
    background-color: #3d6d3f; }

/* --------------------------------------------------------------- */
/* モニュメント・空きスペース追加POPUP                             */
/* --------------------------------------------------------------- */
.monument-add-editor {
  display: none;
  flex-direction: column;
  width: 340px;
  height: fit-content;
  max-width: 97%;
  max-height: 97%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 201;
  box-shadow: 0px 0px 10px 0px #000000; }
  @media screen and (max-width: 800px) {
    .monument-add-editor {
      width: 320px; } }
  .monument-add-editor .monument-add-contents {
    /*height: calc(100% - 30px);*/
    padding: 0 20px;
    overflow-y: auto;
    overflow-x: hidden;
    /* 縦長さが可変なら以下の指定をしないとスマホで表示されない */
    flex-grow: 1;
    min-height: 0;
    height: auto; }
    @media screen and (max-width: 800px) {
      .monument-add-editor .monument-add-contents {
        padding: 0 10px; } }
  .monument-add-editor .monument-add-contents::-webkit-scrollbar {
    width: 3px; }
  .monument-add-editor .monument-add-contents::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .monument-add-editor .monument-add-contents::-webkit-scrollbar-thumb {
    background-color: #3d6d3f; }

.artwork-viewer .caption, .artwork-editor .caption, .artwork-assign .caption, .posca-viewer .caption, .circle-list-viewer .caption, .monument-add-editor .caption {
  width: 100%;
  height: 30px;
  padding: 5px 0;
  background-color: #4d5d4e;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-grow: 0; }
  .artwork-viewer .caption .close, .artwork-editor .caption .close, .artwork-assign .caption .close, .posca-viewer .caption .close, .circle-list-viewer .caption .close, .monument-add-editor .caption .close {
    font-size: 22px;
    line-height: 21px;
    color: #ffffff;
    position: absolute;
    right: 7px;
    z-index: 2;
    cursor: pointer; }
    .artwork-viewer .caption .close:before, .artwork-editor .caption .close:before, .artwork-assign .caption .close:before, .posca-viewer .caption .close:before, .circle-list-viewer .caption .close:before, .monument-add-editor .caption .close:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f057"; }
    .artwork-viewer .caption .close:hover:before, .artwork-editor .caption .close:hover:before, .artwork-assign .caption .close:hover:before, .posca-viewer .caption .close:hover:before, .circle-list-viewer .caption .close:hover:before, .monument-add-editor .caption .close:hover:before {
      font-weight: 400; }
  .artwork-viewer .caption .prev, .artwork-editor .caption .prev, .artwork-assign .caption .prev, .posca-viewer .caption .prev, .circle-list-viewer .caption .prev, .monument-add-editor .caption .prev {
    display: none;
    font-size: 22px;
    line-height: 21px;
    color: #ffffff;
    position: absolute;
    left: 7px;
    z-index: 2;
    cursor: pointer; }
    .artwork-viewer .caption .prev:before, .artwork-editor .caption .prev:before, .artwork-assign .caption .prev:before, .posca-viewer .caption .prev:before, .circle-list-viewer .caption .prev:before, .monument-add-editor .caption .prev:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f3e5"; }
    .artwork-viewer .caption .prev:hover, .artwork-editor .caption .prev:hover, .artwork-assign .caption .prev:hover, .posca-viewer .caption .prev:hover, .circle-list-viewer .caption .prev:hover, .monument-add-editor .caption .prev:hover {
      color: #ffff00; }

/*-------------------------------------------------------------------------------------------------
▼メンテナンス表示
-------------------------------------------------------------------------------------------------*/
.maintenance {
  width: 100%;
  height: 100vh;
  /* 古いブラウザ用 */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px; }
  @media screen and (max-width: 500px) {
    .maintenance {
      padding: 10px; } }
  .maintenance .maintenance-message {
    display: flex;
    flex-direction: column;
    width: 600px;
    text-align: center; }
    @media screen and (max-width: 800px) {
      .maintenance .maintenance-message {
        width: 100%; } }
    .maintenance .maintenance-message .title {
      color: #ffffff;
      background-color: #666666;
      padding: 5px 10px;
      font-size: 24px;
      font-weight: bold; }
      @media screen and (max-width: 800px) {
        .maintenance .maintenance-message .title {
          font-size: 20px; } }
      @media screen and (max-width: 500px) {
        .maintenance .maintenance-message .title {
          font-size: 18px; } }
    .maintenance .maintenance-message .contents {
      padding: 20px;
      border: 1px solid #aaaaaa;
      font-size: 20px;
      text-align: left; }
      @media screen and (max-width: 800px) {
        .maintenance .maintenance-message .contents {
          font-size: 18px; } }
      @media screen and (max-width: 500px) {
        .maintenance .maintenance-message .contents {
          font-size: 14px;
          padding: 10px; } }
      .maintenance .maintenance-message .contents .summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: bold; }
      .maintenance .maintenance-message .contents .description {
        margin-top: 20px; }
  .maintenance .maintenance-image img {
    width: 100%;
    max-width: 700px; }

/*-------------------------------------------------------------------------------------------------
▼サークル・作品タグ
-------------------------------------------------------------------------------------------------*/
.circle-tags, .artwork-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  max-width: 100%; }

.circle-tag {
  background-color: #a19090; }

.artwork-tag {
  background-color: #697a69; }

.circle-tag, .artwork-tag {
  font-size: 11px;
  line-height: 11px;
  padding: 4px 10px;
  color: #ffffff;
  border-radius: 4px;
  margin: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer; }
  .circle-tag:before, .artwork-tag:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f02b';
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    color: #f7f4de;
    margin-right: 3px; }
  .circle-tag:hover, .artwork-tag:hover {
    background-color: #ff9800; }
  .circle-tag:active, .artwork-tag:active {
    background-color: #e91e63; }
  .circle-tag.compact, .artwork-tag.compact {
    padding: 4px 5px;
    margin: 2px; }
    .circle-tag.compact:before, .artwork-tag.compact:before {
      margin-right: 0; }
  .circle-tag.taggable, .artwork-tag.taggable {
    padding: 3px 10px;
    margin: 3px 3px 3px 10px;
    cursor: default; }
    .circle-tag.taggable:hover, .artwork-tag.taggable:hover {
      background-color: #a19090; }
    .circle-tag.taggable:before, .artwork-tag.taggable:before {
      font-size: 10px;
      line-height: 10px; }
  .circle-tag.no-tag, .artwork-tag.no-tag {
    padding: 3px 10px;
    margin: 3px 3px 3px 10px;
    background-color: #bbbbbb;
    cursor: default; }
    .circle-tag.no-tag:hover, .artwork-tag.no-tag:hover {
      background-color: #bbbbbb; }
    .circle-tag.no-tag:before, .artwork-tag.no-tag:before {
      content: '';
      margin-right: 0; }

.circle-tags.novel-mode, .artwork-tags.novel-mode {
  writing-mode: vertical-rl;
  align-content: flex-start;
  gap: 4px;
  margin-top: unset;
  margin-left: 20px; }
  .circle-tags.novel-mode .circle-tag, .circle-tags.novel-mode .artwork-tag, .artwork-tags.novel-mode .circle-tag, .artwork-tags.novel-mode .artwork-tag {
    font-size: 13px;
    padding: 8px 6px;
    text-orientation: mixed;
    margin: 0 3px 3px; }
    .circle-tags.novel-mode .circle-tag:before, .circle-tags.novel-mode .artwork-tag:before, .artwork-tags.novel-mode .circle-tag:before, .artwork-tags.novel-mode .artwork-tag:before {
      margin-right: unset;
      margin-bottom: 3px; }

/*-------------------------------------------------------------------------------------------------
▼表示切替ボタン
-------------------------------------------------------------------------------------------------*/
.view-style-block, .view-style-list, .view-order-normal, .view-order-update {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  color: #656565;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer; }
  .view-style-block.no-margin, .view-style-list.no-margin, .view-order-normal.no-margin, .view-order-update.no-margin {
    margin-right: 2px; }
  .view-style-block:hover, .view-style-list:hover, .view-order-normal:hover, .view-order-update:hover {
    color: #ffffff;
    background-color: #c7bc34;
    border: 1px solid #c7bc34; }
  .view-style-block.selected, .view-style-list.selected, .view-order-normal.selected, .view-order-update.selected {
    color: #ffffff;
    background-color: #696969;
    border: 1px solid #696969;
    cursor: default; }
  .view-style-block:before, .view-style-list:before, .view-order-normal:before, .view-order-update:before {
    font-family: 'Material Icons';
    font-size: 24px; }

.view-style-block::before {
  content: "\e9b0"; }

.view-style-list::before {
  content: "\e8ef"; }

.view-order-normal::before {
  content: "\e242"; }

.view-order-update::before {
  content: "\e192"; }

/*-------------------------------------------------------------------------------------------------
▼ひとこと拍手
-------------------------------------------------------------------------------------------------*/
.clap-btn {
  font-size: 12px;
  line-height: 12px;
  padding: 5px 7px;
  color: #333;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 #fff;
  background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  border-radius: 3px;
  cursor: pointer; }
  .clap-btn:hover {
    background-image: linear-gradient(to bottom, #e5e5e5 0%, #e0e0e0 100%); }
  .clap-btn.active {
    background-image: url(../css/images/processing.gif);
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 33px;
    background-color: #f7f7f7;
    pointer-events: none; }

.clap-btn-web {
  background-image: url(../css/images/web_clap.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: relative;
  z-index: 1;
  display: inline-block;
  cursor: pointer; }
  .clap-btn-web:hover {
    opacity: 0.8; }
  .clap-btn-web:active {
    margin: 1px;
    width: 68px;
    height: 68px; }
  .clap-btn-web:after {
    content: '❤';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    line-height: 1;
    font-weight: bold;
    color: #e91e63;
    opacity: 0;
    pointer-events: none;
    z-index: 10; }
  .clap-btn-web.is-clicked:after {
    animation: floatUpFade 0.8s ease-out forwards; }

.clap-wrapper {
  position: relative;
  z-index: 1;
  display: inline-block;
  cursor: pointer; }
  .clap-wrapper:after {
    content: '❤';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    line-height: 1;
    font-weight: bold;
    color: #e91e63;
    opacity: 0;
    pointer-events: none;
    z-index: 10; }
  .clap-wrapper.is-clicked:after {
    animation: floatUpFade 0.8s ease-out forwards; }

.clap-image-btn {
  max-width: 300px;
  max-height: 300px;
  vertical-align: bottom;
  /* 画像特有の下の隙間を消す */ }
  .clap-image-btn:hover {
    opacity: 0.8; }
  .clap-image-btn:active {
    border: 2px solid transparent; }

@keyframes floatUpFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); }
  50% {
    transform: translate(-50%, calc(-50% - 20px)) scale(1.3); }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 40px)) scale(1); } }
.balloon {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  padding: 5px 8px;
  margin-left: 10px;
  display: flex;
  align-items: center; }
  .balloon .count {
    color: #e91e63;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold; }
  .balloon .tip {
    color: #757575;
    font-size: 11px;
    margin-left: 5px; }
  .balloon:before, .balloon:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .balloon:before {
    border-color: rgba(204, 204, 204, 0);
    border-right-color: #dbdbdb;
    border-width: 5px;
    top: 50%;
    margin-top: -5px; }
  .balloon:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 4px;
    top: 50%;
    margin-top: -4px; }

/* --------------------------------------------------------------- */
/* 拍手メッセージボックス                                          */
/* --------------------------------------------------------------- */
.clap-message-frame {
  display: none;
  width: 280px;
  position: absolute;
  left: 0;
  top: 0;
  padding-bottom: 10px;
  z-index: 7; }
  .clap-message-frame .clap-message-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #dddddd;
    border-radius: 6px;
    box-shadow: 0 5px 10px #000000ad;
    font-size: 14px;
    text-align: center; }
    .clap-message-frame .clap-message-box:before, .clap-message-frame .clap-message-box:after {
      bottom: calc(100% - 1px);
      left: 35px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none; }
    .clap-message-frame .clap-message-box:before {
      border-color: rgba(221, 221, 221, 0);
      border-bottom-color: #dddddd;
      border-width: 11px;
      margin-left: -11px; }
    .clap-message-frame .clap-message-box:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #f8f8f8;
      border-width: 10px;
      margin-left: -10px; }
    .clap-message-frame .clap-message-box .phrases {
      width: 100%;
      margin: 6px 0; }
      .clap-message-frame .clap-message-box .phrases select {
        max-width: 100%;
        height: 30px;
        border-radius: 5px; }
        .clap-message-frame .clap-message-box .phrases select:focus {
          border-color: #66afe9;
          outline: 0;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
    .clap-message-frame .clap-message-box .clap-message-block {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start; }
      .clap-message-frame .clap-message-box .clap-message-block .message {
        width: 100%; }
        .clap-message-frame .clap-message-box .clap-message-block .message textarea {
          width: 100%;
          height: 100px;
          padding: 6px 12px;
          color: #555;
          border-radius: 5px; }
          .clap-message-frame .clap-message-box .clap-message-block .message textarea:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
    .clap-message-frame .clap-message-box .command {
      margin-top: 3px;
      width: 100%; }
      .clap-message-frame .clap-message-box .command .btn {
        color: #ffffff;
        border-color: #2b669a;
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        background-repeat: repeat-x;
        border-color: #2b669a;
        margin: 0;
        cursor: pointer; }
        .clap-message-frame .clap-message-box .command .btn:hover {
          background-color: #2d6ca2;
          background-position: 0 -15px; }
        .clap-message-frame .clap-message-box .command .btn:active {
          padding: 5px 11px;
          margin: 1px; }
    .clap-message-frame .clap-message-box .common-close-icon {
      right: -10px;
      top: -10px; }

/* --------------------------------------------------------------- */
/* 作品ビューアのガイド矢印                                        */
/* --------------------------------------------------------------- */
/* ガイドオーバーレイの基本設定 */
.guide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4);
  /* 1秒待ってから0.5秒かけてフェードアウト */
  animation: overlay-fadeout 0.5s ease 1.0s forwards; }

@keyframes overlay-fadeout {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
/* 矢印エリア共通 */
.guide-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  /* ここではgapを使わずmarginで調整します */ }

/* 矢印単体の基本形 */
.guide-arrow span {
  display: block;
  width: 30px;
  height: 30px;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
  opacity: 0; }

/* アニメーションのタイミングずらし（共通） */
.guide-arrow span:nth-child(2) {
  animation-delay: 0.2s; }

.guide-arrow span:nth-child(3) {
  animation-delay: 0.4s; }

/* --------------------------------------------------
   1. 上から下 (tb)
   ・縦並び (column)
   ・アニメーションはY軸のみ移動
   ・回転 45度
-------------------------------------------------- */
.direction-tb .guide-arrow {
  flex-direction: column; }

.direction-tb .guide-arrow span {
  margin: -5px 0;
  /* 矢印同士を少し重ねて間隔調整 */
  animation: move-down 1.5s infinite; }

@keyframes move-down {
  0% {
    opacity: 0;
    transform: translateY(-15px) rotate(45deg); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(15px) rotate(45deg); } }
/* --------------------------------------------------
   2. 右から左 (rl)
   ・横並びの逆順 (row-reverse) ⇒ これで1個目が一番右に来ます
   ・アニメーションはX軸のみ（右から左へ）
   ・回転 135度
-------------------------------------------------- */
.direction-rl .guide-arrow {
  flex-direction: row-reverse; }

.direction-rl .guide-arrow span {
  margin: 0 -5px;
  animation: move-left 1.5s infinite; }

@keyframes move-left {
  /* Xプラス(右) から Xマイナス(左) へ移動 */
  0% {
    opacity: 0;
    transform: translateX(15px) rotate(135deg); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(-15px) rotate(135deg); } }
/* --------------------------------------------------
   3. 左から右 (lr)
   ・横並び (row)
   ・アニメーションはX軸のみ（左から右へ）
   ・回転 -45度
-------------------------------------------------- */
.direction-lr .guide-arrow {
  flex-direction: row; }

.direction-lr .guide-arrow span {
  margin: 0 -5px;
  animation: move-right 1.5s infinite; }

@keyframes move-right {
  /* Xマイナス(左) から Xプラス(右) へ移動 */
  0% {
    opacity: 0;
    transform: translateX(-15px) rotate(-45deg); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateX(15px) rotate(-45deg); } }
.guide-text {
  color: #ffffffb8;
  font-weight: bold;
  margin-top: 40px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  letter-spacing: 2px; }

/* --------------------------------------------------------------- */
/* 作品詳細画面の引っ張って閉じる用                                */
/* --------------------------------------------------------------- */
#novel-wrap,
.novel-wrap,
.circle-viewer.contents,
.scrollable-content {
  /* iOS/Androidの「ビヨーン」となるバウンスを無効化 */
  overscroll-behavior: none;
  /* スクロールを滑らかに */
  -webkit-overflow-scrolling: touch; }

.pull-close-zone {
  position: fixed;
  z-index: 20000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  width: 0;
  height: 0; }

.pull-close-text {
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s; }

/* 縦モード（下から） */
.pull-close-zone.vertical {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  flex-direction: column; }

.pull-close-zone.vertical .pull-close-text {
  color: #cd9191;
  margin-top: 8px; }

/* 横モード（左から：小説用） */
.pull-close-zone.horizontal {
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  flex-direction: row;
  /* 横並び */ }

/* 小説っぽく縦書きテキストにする */
.pull-close-zone.horizontal .pull-close-text {
  color: #cd9191;
  writing-mode: vertical-rl;
  margin-left: 10px;
  letter-spacing: 3px; }

.pull-close-icon span {
  font-size: 26px;
  background: rgba(50, 50, 50, 0.9);
  color: #fff;
  border-radius: 50%;
  padding: 12px;
  transform: scale(0.6);
  transition: transform 0.1s linear; }

.pull-ready .pull-close-icon span {
  background: #ff5555;
  transform: scale(1.1) rotate(180deg) !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.pull-ready .pull-close-text {
  opacity: 1; }

/* --------------------------------------------------
   引っ張りヒント（スクロール端で出現）
-------------------------------------------------- */
.pull-close-hint {
  position: absolute;
  z-index: 19000;
  /* コンテンツより上、閉じるゾーンより下 */
  pointer-events: none;
  /* 操作を邪魔しない */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
  background: #e91e6347;
  /* 初期状態は非表示（JSで表示させる） */
  opacity: 0;
  transition: opacity 0.2s ease-out;
  /* --------------------------------------------------
     1. 縦モード（下端中央）
  -------------------------------------------------- */
  /* --------------------------------------------------
     2. 小説モード（左端中央）
  -------------------------------------------------- */ }
  .pull-close-hint .material-icons {
    font-size: 20px; }
  .pull-close-hint .hint-text {
    font-size: 11px;
    letter-spacing: 2px;
    margin: 0 4px;
    font-weight: normal; }
  .pull-close-hint.vertical {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 左右中央寄せ */
    width: 70px;
    height: 32px;
    border-radius: 60px 60px 0 0;
    /* 上向き半円 */
    flex-direction: column;
    padding-bottom: 5px; }
    .pull-close-hint.vertical .material-icons {
      margin-bottom: -5px; }
  .pull-close-hint.horizontal {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* 上下中央寄せ */
    flex-wrap: wrap;
    width: 32px;
    height: 65px;
    border-radius: 0 60px 60px 0;
    /* 右向き半円（左端に配置されるため） */
    flex-direction: row-reverse;
    writing-mode: vertical-rl; }
    .pull-close-hint.horizontal .material-icons {
      margin-left: -10px; }
    .pull-close-hint.horizontal .hint-text {
      margin: 0; }

/* --------------------------------------------------------------- */
/* キラッと光が流れるアニメーション                                */
/* --------------------------------------------------------------- */
.clickable-img {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  flex-shrink: 0;
  display: inline-block;
  /* スマホでタップした瞬間の「灰色の背景」を無効化 */
  -webkit-tap-highlight-color: transparent; }
  .clickable-img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 初期状態は透明 */
    box-shadow: inset 0 0 0 3px transparent;
    /* アニメーション設定 */
    transition: box-shadow 0.3s ease-in-out;
    /* 画像(z-indexなし)より上、光(z-index:10)より下に配置 */
    z-index: 5;
    pointer-events: none; }
  .clickable-img img {
    display: block;
    width: 100%;
    height: auto; }
  .clickable-img:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 10; }
  .clickable-img:hover, .clickable-img:active {
    /*
    &:before {
        box-shadow: inset 0 0 10px 0px #03a9f4a6;
        transition-delay: 0.5s;
    }
    */
    /* 光を走らせる */ }
    .clickable-img:hover:after, .clickable-img:active:after {
      animation: shine-animation 0.7s ease-in-out; }

@keyframes shine-animation {
  0% {
    left: -100%; }
  100% {
    left: 200%;
    /* 右の画面外へ突き抜ける */ } }
/* --------------------------------------------------------------- */
/* プログレスバーを表示                                            */
/* --------------------------------------------------------------- */
.sys-progress-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff; }
  .sys-progress-overlay .txt {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: bold; }
  .sys-progress-overlay .progress-bar-box {
    width: 80%;
    max-width: 500px;
    height: 20px;
    background: #555;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
    .sys-progress-overlay .progress-bar-box .progress-bar {
      width: 0%;
      height: 100%;
      background: #4caf50;
      transition: width 0.1s linear; }
  .sys-progress-overlay .sys-progress-text {
    margin-top: 10px;
    font-family: monospace;
    font-size: 1.2rem; }

/* --------------------------------------------------------------- */
/* フェードアウトメッセージ                                        */
/* --------------------------------------------------------------- */
.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; } }

/*-------------------------------------------------------------------------------------------------
▼ tippy（ツールチップ）
-------------------------------------------------------------------------------------------------*/
.tippy-box[data-theme~='custom'] {
  background-color: #f9f9e8;
  color: #2d2d2d;
  border: 3px solid #b7b778;
  box-shadow: 2px 2px 4px 0px #000000d1;
  padding: 5px;
  text-align: left;
  white-space: pre-line; }
  .tippy-box[data-theme~='custom'].tippy-box[data-placement^=top] > .tippy-arrow:before {
    bottom: -11px; }
  .tippy-box[data-theme~='custom'].tippy-box[data-placement^=right] > .tippy-arrow:before {
    left: -11px; }
  .tippy-box[data-theme~='custom'].tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    top: -11px; }
  .tippy-box[data-theme~='custom'].tippy-box[data-placement^=left] > .tippy-arrow:before {
    right: -11px; }

.tippy-box[data-theme~='custom'] > .tippy-arrow {
  color: #b7b778; }

/* light */
.tippy-box[data-theme~=light] {
  color: #26323d;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: #fff; }

.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
  border-top-color: #fff; }

.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
  border-bottom-color: #fff; }

.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
  border-left-color: #fff; }

.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
  border-right-color: #fff; }

.tippy-box[data-theme~=light] > .tippy-backdrop {
  background-color: #fff; }

.tippy-box[data-theme~=light] > .tippy-svg-arrow {
  fill: #fff; }

/* scale */
.tippy-box[data-animation=scale][data-placement^=top] {
  transform-origin: bottom; }

.tippy-box[data-animation=scale][data-placement^=bottom] {
  transform-origin: top; }

.tippy-box[data-animation=scale][data-placement^=left] {
  transform-origin: right; }

.tippy-box[data-animation=scale][data-placement^=right] {
  transform-origin: left; }

.tippy-box[data-animation=scale][data-state=hidden] {
  transform: scale(0.5);
  opacity: 0; }

/* scale-extreme */
.tippy-box[data-animation=scale-extreme][data-placement^=top] {
  transform-origin: bottom; }

.tippy-box[data-animation=scale-extreme][data-placement^=bottom] {
  transform-origin: top; }

.tippy-box[data-animation=scale-extreme][data-placement^=left] {
  transform-origin: right; }

.tippy-box[data-animation=scale-extreme][data-placement^=right] {
  transform-origin: left; }

.tippy-box[data-animation=scale-extreme][data-state=hidden] {
  transform: scale(0);
  opacity: .25; }

/* shift-away-extreme */
.tippy-box[data-animation=shift-away-extreme][data-state=hidden] {
  opacity: 0; }

.tippy-box[data-animation=shift-away-extreme][data-state=hidden][data-placement^=top] {
  transform: translateY(20px); }

.tippy-box[data-animation=shift-away-extreme][data-state=hidden][data-placement^=bottom] {
  transform: translateY(-20px); }

.tippy-box[data-animation=shift-away-extreme][data-state=hidden][data-placement^=left] {
  transform: translateX(20px); }

.tippy-box[data-animation=shift-away-extreme][data-state=hidden][data-placement^=right] {
  transform: translateX(-20px); }

/* shift-toward-extreme */
.tippy-box[data-animation=shift-toward-extreme][data-state=hidden] {
  opacity: 0; }

.tippy-box[data-animation=shift-toward-extreme][data-state=hidden][data-placement^=top] {
  transform: translateY(-20px); }

.tippy-box[data-animation=shift-toward-extreme][data-state=hidden][data-placement^=bottom] {
  transform: translateY(20px); }

.tippy-box[data-animation=shift-toward-extreme][data-state=hidden][data-placement^=left] {
  transform: translateX(-20px); }

.tippy-box[data-animation=shift-toward-extreme][data-state=hidden][data-placement^=right] {
  transform: translateX(20px); }

/* perspective-extreme */
.tippy-box[data-animation=perspective-extreme][data-placement^=top] {
  transform-origin: bottom; }

.tippy-box[data-animation=perspective-extreme][data-placement^=top][data-state=visible] {
  transform: perspective(700px); }

.tippy-box[data-animation=perspective-extreme][data-placement^=top][data-state=hidden] {
  transform: perspective(700px) translateY(10px) rotateX(90deg); }

.tippy-box[data-animation=perspective-extreme][data-placement^=bottom] {
  transform-origin: top; }

.tippy-box[data-animation=perspective-extreme][data-placement^=bottom][data-state=visible] {
  transform: perspective(700px); }

.tippy-box[data-animation=perspective-extreme][data-placement^=bottom][data-state=hidden] {
  transform: perspective(700px) translateY(-10px) rotateX(-90deg); }

.tippy-box[data-animation=perspective-extreme][data-placement^=left] {
  transform-origin: right; }

.tippy-box[data-animation=perspective-extreme][data-placement^=left][data-state=visible] {
  transform: perspective(700px); }

.tippy-box[data-animation=perspective-extreme][data-placement^=left][data-state=hidden] {
  transform: perspective(700px) translateX(10px) rotateY(-90deg); }

.tippy-box[data-animation=perspective-extreme][data-placement^=right] {
  transform-origin: left; }

.tippy-box[data-animation=perspective-extreme][data-placement^=right][data-state=visible] {
  transform: perspective(700px); }

.tippy-box[data-animation=perspective-extreme][data-placement^=right][data-state=hidden] {
  transform: perspective(700px) translateX(-10px) rotateY(90deg); }

.tippy-box[data-animation=perspective-extreme][data-state=hidden] {
  opacity: .5; }

.tippy-content {
  white-space: pre-line; }

/* --------------------------------------------------------------- */
/* イベントホール                                                  */
/* --------------------------------------------------------------- */
.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 .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;
                overflow: hidden; }
                .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;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3; }
            .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; } }
  .hall .hall-wait {
    opacity: 1; }
  .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: 6; }
    .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; }

/* --------------------------------------------------------------- */
/* サークル詳細表示領域                                            */
/* --------------------------------------------------------------- */
.circle-viewer {
  display: none;
  width: 900px;
  height: 100%;
  max-width: 90%;
  position: absolute;
  right: 0;
  background-color: #ffffffed;
  box-shadow: 0px 0px 10px 0px #000000;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 6; }
  @media screen and (max-width: 800px) {
    .circle-viewer {
      max-width: 95%; } }
  @media screen and (max-width: 500px) {
    .circle-viewer {
      max-width: 100%; } }
  .circle-viewer .caption {
    width: 100%;
    height: 30px;
    background-color: #272727;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
    .circle-viewer .caption .txt {
      padding: 0 30px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; }
    .circle-viewer .caption .close {
      font-size: 22px;
      line-height: 21px;
      color: #ffffff;
      position: absolute;
      right: 7px;
      cursor: pointer; }
      .circle-viewer .caption .close:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f057"; }
      .circle-viewer .caption .close:hover:before {
        font-weight: 400; }
    .circle-viewer .caption .move-left {
      display: flex;
      font-size: 22px;
      line-height: 21px;
      color: #ffffff;
      position: absolute;
      left: 7px;
      cursor: pointer; }
      .circle-viewer .caption .move-left:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f060"; }
      .circle-viewer .caption .move-left:hover {
        color: #ffff00; }
    .circle-viewer .caption .move-right {
      display: none;
      font-size: 22px;
      line-height: 21px;
      color: #ffffff;
      position: absolute;
      left: 7px;
      cursor: pointer; }
      .circle-viewer .caption .move-right:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f061"; }
      .circle-viewer .caption .move-right:hover {
        color: #ffff00; }
    @media screen and (max-width: 500px) {
      .circle-viewer .caption .move-left, .circle-viewer .caption .move-right {
        display: none !important; } }
  .circle-viewer .contents {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-direction: column;
    height: calc(100% - 30px);
    position: relative;
    outline: none;
    /*focus非表示*/
    /*本部サークルのみ*/
    /* pr-comment傘下の[font-size]を全て継承するようにする */ }
    .circle-viewer .contents .circle-contents:focus {
      outline: none; }
    .circle-viewer .contents .circle-detail {
      width: 100%;
      background-color: #f5f5f5;
      border-bottom: 1px solid #ebebeb; }
      .circle-viewer .contents .circle-detail .top-banner {
        width: 100%;
        position: relative; }
        .circle-viewer .contents .circle-detail .top-banner img {
          object-fit: contain;
          width: 100%;
          max-height: 700px; }
          @media screen and (max-width: 800px) {
            .circle-viewer .contents .circle-detail .top-banner img {
              max-height: 650px; } }
          @media screen and (max-width: 500px) {
            .circle-viewer .contents .circle-detail .top-banner img {
              max-height: 600px; } }
      .circle-viewer .contents .circle-detail .circle-warning {
        width: 98%;
        padding: 10px 20px;
        margin: 0 auto;
        font-size: 28px;
        line-height: 28px;
        color: #e91e63;
        font-weight: bold;
        border: 2px solid #e91e63;
        background-color: #ffc107a6; }
      .circle-viewer .contents .circle-detail .infos {
        width: 100%;
        padding: 15px; }
        .circle-viewer .contents .circle-detail .infos .summary {
          width: 100%;
          display: flex;
          justify-content: space-between; }
          @media screen and (max-width: 800px) {
            .circle-viewer .contents .circle-detail .infos .summary {
              flex-wrap: wrap; } }
          .circle-viewer .contents .circle-detail .infos .summary .digest {
            display: flex;
            align-items: center; }
            .circle-viewer .contents .circle-detail .infos .summary .digest .avatar {
              width: 50px;
              height: 50px;
              min-width: 50px;
              overflow: hidden;
              margin-right: 10px; }
              .circle-viewer .contents .circle-detail .infos .summary .digest .avatar img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                border-radius: 50%; }
                .circle-viewer .contents .circle-detail .infos .summary .digest .avatar img.walker {
                  border-radius: unset;
                  object-fit: unset;
                  width: 200px;
                  height: 200px; }
            .circle-viewer .contents .circle-detail .infos .summary .digest .title-author {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              text-align: left;
              margin-top: 3px; }
              .circle-viewer .contents .circle-detail .infos .summary .digest .title-author .arrange-no {
                font-size: 12px;
                line-height: 12px;
                font-weight: bold;
                color: #ffffff;
                background-color: #5e6b50;
                padding: 3px 10px 2px 26px;
                margin-bottom: 5px;
                background-image: url(images/flag.png);
                background-size: 13px 13px;
                background-position: 8px 2px;
                background-repeat: no-repeat;
                object-fit: contain; }
                .circle-viewer .contents .circle-detail .infos .summary .digest .title-author .arrange-no.visit {
                  background-color: #ff559c;
                  background-image: url(images/heart.png); }
              .circle-viewer .contents .circle-detail .infos .summary .digest .title-author .circle-title {
                font-size: 24px;
                line-height: 24px;
                font-weight: bold;
                color: #5f5f5f;
                text-box: trim-both cap alphabetic !important; }
              .circle-viewer .contents .circle-detail .infos .summary .digest .title-author .author {
                text-box: trim-both cap alphabetic !important;
                margin-top: 5px; }
          .circle-viewer .contents .circle-detail .infos .summary .controls {
            display: flex; }
            @media screen and (max-width: 800px) {
              .circle-viewer .contents .circle-detail .infos .summary .controls {
                width: 100%;
                justify-content: center;
                margin: 10px 0; } }
            .circle-viewer .contents .circle-detail .infos .summary .controls .command {
              width: 70px;
              height: 70px;
              cursor: pointer;
              background-repeat: no-repeat;
              background-position: center center;
              background-size: contain; }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.bbs {
                /*掲示板*/
                background-image: url(images/bbs/btn_bbs.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.bbs-own {
                /*寄せ書き*/
                background-image: url(images/bbs/btn_bbs_own.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.bbs-stop {
                /*掲示板🚫*/
                background-image: url(images/bbs/btn_bbs_stop.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.dm {
                /*DM*/
                background-image: url(images/bbs/btn_dm.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.dm-own {
                /*お問合せ*/
                background-image: url(images/bbs/btn_dm_own.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.dm-warn {
                /*DM⚠️*/
                background-image: url(images/bbs/btn_dm_warn.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.mybinder {
                background-image: url(../css/images/btn_mybinder.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.mybinder-on {
                background-image: url(../css/images/btn_mybinder_ok.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command.circle-listup {
                background-image: url(../css/images/btn_circle_list.png); }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command:active {
                width: 68px;
                height: 68px;
                margin: 1px; }
              .circle-viewer .contents .circle-detail .infos .summary .controls .command:hover {
                opacity: 0.8; }
        .circle-viewer .contents .circle-detail .infos .circle-tags {
          margin-top: 10px; }
    .circle-viewer .contents .event-summary {
      width: 100%;
      padding: 40px 20px 0; }
      @media screen and (max-width: 500px) {
        .circle-viewer .contents .event-summary {
          padding: 35px 10px 0; } }
      .circle-viewer .contents .event-summary .summary-contents {
        text-align: left;
        padding: 30px;
        background-color: #f5f5f1;
        border: 4px solid #d9d9d0;
        box-shadow: 0px 0px 5px 0 #000000 inset;
        position: relative; }
        @media screen and (max-width: 500px) {
          .circle-viewer .contents .event-summary .summary-contents {
            padding: 20px; } }
        .circle-viewer .contents .event-summary .summary-contents:before {
          position: absolute;
          top: -26px;
          left: 10px;
          content: 'イベント情報';
          padding: 5px 20px;
          color: #ffffff;
          background-color: #717165;
          border-radius: 0 5px 0 0;
          font-size: 12px;
          line-height: 12px; }
        .circle-viewer .contents .event-summary .summary-contents .summary-one {
          display: flex;
          align-items: center;
          padding: 20px 0;
          border-bottom: 1px dashed #cdcdb0;
          user-select: text; }
          .circle-viewer .contents .event-summary .summary-contents .summary-one:first-child {
            padding: 0 0 20px; }
          .circle-viewer .contents .event-summary .summary-contents .summary-one:last-child {
            border-bottom: unset;
            padding: 20px 0 0; }
          .circle-viewer .contents .event-summary .summary-contents .summary-one .tag {
            width: 120px;
            color: #7b7b5c;
            font-weight: bold; }
            @media screen and (max-width: 500px) {
              .circle-viewer .contents .event-summary .summary-contents .summary-one .tag {
                width: 80px; } }
          .circle-viewer .contents .event-summary .summary-contents .summary-one .article {
            width: calc(100% - 120px);
            white-space: pre-line; }
            @media screen and (max-width: 500px) {
              .circle-viewer .contents .event-summary .summary-contents .summary-one .article {
                width: calc(100% - 80px); } }
            .circle-viewer .contents .event-summary .summary-contents .summary-one .article .point {
              font-size: 150%; }
        .circle-viewer .contents .event-summary .summary-contents .commands {
          display: flex;
          justify-content: space-between;
          text-align: center;
          margin-top: 20px; }
          .circle-viewer .contents .event-summary .summary-contents .commands .command {
            width: 49%;
            color: #ffffff;
            background-color: #555555;
            padding: 20px 2px;
            cursor: pointer; }
            .circle-viewer .contents .event-summary .summary-contents .commands .command:hover {
              background-color: #917615; }
            .circle-viewer .contents .event-summary .summary-contents .commands .command:active {
              margin: 1px -1px -1px 1px; }
    .circle-viewer .contents .clap-circle, .circle-viewer .contents .clap-artwork {
      width: 100%; }
      .circle-viewer .contents .clap-circle .commands, .circle-viewer .contents .clap-artwork .commands {
        display: flex;
        justify-content: center; }
        .circle-viewer .contents .clap-circle .commands .one-command, .circle-viewer .contents .clap-artwork .commands .one-command {
          display: flex;
          justify-content: center;
          align-items: center; }
    .circle-viewer .contents .clap-circle {
      padding: 20px 0 10px; }
    .circle-viewer .contents .clap-artwork {
      margin-top: 10px; }
    .circle-viewer .contents .clap-message-list {
      width: 100%;
      padding: 0 15px 15px; }
      .circle-viewer .contents .clap-message-list .one-clap-message {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: left;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px dashed #e1e1e1; }
        .circle-viewer .contents .clap-message-list .one-clap-message .summary {
          display: flex;
          color: #978a45; }
          .circle-viewer .contents .clap-message-list .one-clap-message .summary .date {
            font-size: 13px; }
          .circle-viewer .contents .clap-message-list .one-clap-message .summary .nickname {
            font-size: 13px;
            margin-left: 10px; }
          .circle-viewer .contents .clap-message-list .one-clap-message .summary .requester {
            font-size: 13px;
            font-weight: bold;
            color: #444444; }
        .circle-viewer .contents .clap-message-list .one-clap-message .phrases {
          font-weight: bold; }
        .circle-viewer .contents .clap-message-list .one-clap-message .response {
          padding: 10px 0 5px 35px;
          color: #b97661;
          background-image: url(images/thanks.png);
          background-position: 0 7px;
          background-repeat: no-repeat;
          background-size: 28px; }
        .circle-viewer .contents .clap-message-list .one-clap-message:first-child {
          padding-top: unset;
          margin-top: unset;
          border-top: unset; }
    .circle-viewer .contents .clap-message-more {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 15px; }
      .circle-viewer .contents .clap-message-more .more-btn {
        padding: 3px 15px;
        color: #3f3f3f;
        font-size: 12px;
        border: 1px solid #c1c1c1;
        border-radius: 3px;
        cursor: pointer; }
        .circle-viewer .contents .clap-message-more .more-btn:hover {
          background-color: #bfbfbf2b; }
        .circle-viewer .contents .clap-message-more .more-btn:active {
          margin: 1px -1px -1px 1px; }
    .circle-viewer .contents .pr-comment, .circle-viewer .contents .pr-comment * {
      font-size: inherit;
      color: inherit;
      text-align: left;
      white-space: normal; }
      .circle-viewer .contents .pr-comment a, .circle-viewer .contents .pr-comment * a {
        display: inline-block;
        color: #ed3700; }
    .circle-viewer .contents .pr-comment {
      font-size: unset;
      margin: 20px 20px 0; }
      @media screen and (max-width: 500px) {
        .circle-viewer .contents .pr-comment {
          margin: 10px 10px 0; } }
      .circle-viewer .contents .pr-comment .pr-title {
        color: #ffffff;
        background-color: #635757;
        padding: 4px; }
      .circle-viewer .contents .pr-comment .pr-contents {
        background-color: #ffffff;
        border: 1px solid #e1e1e1;
        text-align: left;
        padding: 30px 20px;
        user-select: text; }
        @media screen and (max-width: 500px) {
          .circle-viewer .contents .pr-comment .pr-contents {
            padding: 20px 10px; } }
        .circle-viewer .contents .pr-comment .pr-contents p {
          margin: 0 auto;
          line-height: 1.7em !important;
          font-size: 14px; }
        .circle-viewer .contents .pr-comment .pr-contents h2 {
          font-size: 140%; }
        .circle-viewer .contents .pr-comment .pr-contents h3 {
          font-size: 117%;
          margin: 0 0 10px 0; }
          .circle-viewer .contents .pr-comment .pr-contents h3 span {
            font-weight: unset; }
        .circle-viewer .contents .pr-comment .pr-contents strong {
          font-weight: bolder; }
          .circle-viewer .contents .pr-comment .pr-contents strong span {
            font-weight: unset; }
    .circle-viewer .contents .external-links {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 20px 20px 0; }
      .circle-viewer .contents .external-links .link {
        width: 49%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #4c4d41;
        padding: 8px 10px;
        border-radius: 4px;
        text-align: center;
        margin-bottom: 10px;
        text-decoration: unset;
        cursor: pointer; }
        .circle-viewer .contents .external-links .link .txt {
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; }
        .circle-viewer .contents .external-links .link .link-btn {
          margin: 0 0 3px 10px;
          color: #88dd24;
          font-size: 16px; }
        .circle-viewer .contents .external-links .link .tip {
          top: unset;
          color: #e3e3bc; }
        .circle-viewer .contents .external-links .link:hover {
          opacity: 0.8; }
        .circle-viewer .contents .external-links .link.disabled {
          background-color: #959591;
          cursor: default; }
          .circle-viewer .contents .external-links .link.disabled:hover {
            opacity: 1; }
        @media screen and (max-width: 500px) {
          .circle-viewer .contents .external-links .link {
            width: 100%; } }
    .circle-viewer .contents .etc {
      width: 100%;
      background-color: #ffffff;
      padding: 20px 10px 90px; }
      .circle-viewer .contents .etc .giftee {
        max-width: 100%; }
        .circle-viewer .contents .etc .giftee img {
          max-width: 100%;
          height: 80px;
          border: 1px solid #dfdfdf;
          border-radius: 5px;
          cursor: pointer; }
          .circle-viewer .contents .etc .giftee img:hover {
            opacity: 0.7; }
      .circle-viewer .contents .etc .x-share {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px; }
        .circle-viewer .contents .etc .x-share .btn {
          padding: 10px 20px;
          margin: 10px 5px;
          color: #ffffff;
          background-color: #e22d7b;
          border-radius: 5px;
          cursor: pointer; }
          .circle-viewer .contents .etc .x-share .btn:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f1e0";
            padding-right: 5px; }
          @media screen and (max-width: 500px) {
            .circle-viewer .contents .etc .x-share .btn {
              padding: 10px; } }
          .circle-viewer .contents .etc .x-share .btn.event {
            background-color: #48a3e7; }
          .circle-viewer .contents .etc .x-share .btn:hover {
            opacity: 0.8; }
    .circle-viewer .contents .event-closed-message {
      padding: 100px 20px;
      font-size: 24px;
      color: #684f4f;
      background-color: #f1f1f1; }
      @media screen and (max-width: 500px) {
        .circle-viewer .contents .event-closed-message {
          padding: 50px 20px;
          font-size: 20px; } }
    .circle-viewer .contents .pass-gate {
      width: 100%;
      height: calc(100vh - 31px);
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column; }
      .circle-viewer .contents .pass-gate .gate-image {
        width: 100%; }
      .circle-viewer .contents .pass-gate .gate-contents {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center; }
        .circle-viewer .contents .pass-gate .gate-contents .pass-block {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-bottom: 20%; }
          .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            width: 450px;
            max-width: 95%;
            padding: 40px 20px;
            border: 3px solid #999999;
            border-radius: 5px;
            background-color: #ffffff;
            box-shadow: 1px 1px 2px 0px #000000b0; }
            .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .description {
              margin-bottom: 10px; }
            .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line {
              display: flex;
              justify-content: space-between;
              width: 100%; }
              .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line input[type="text"], .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line input[type="password"] {
                font-family: "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Osaka", Arial, sans-serif;
                width: 100%;
                height: 2.75em;
                padding: 0 0.75em;
                border: solid 1px rgba(210, 215, 217, 0.75);
                border-radius: 0.375em;
                font-size: 14px; }
              .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .guide-txt {
                display: flex;
                align-items: center; }
                .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .guide-txt .ico {
                  color: #838383; }
                .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .guide-txt .txt {
                  margin-left: 10px; }
              .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .button {
                line-height: 2.5em;
                letter-spacing: 0.075em;
                padding: 0 1.0em;
                margin: 2px;
                color: #ffffff;
                background-color: #119dc7;
                border-radius: 0.375em;
                box-shadow: none;
                white-space: nowrap;
                cursor: pointer; }
                .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .button:hover {
                  background-color: #29c1ef; }
                .circle-viewer .contents .pass-gate .gate-contents .pass-block .pass-board .input-line .button:active {
                  margin: 3px 1px 1px 3px; }
  .circle-viewer .contents::-webkit-scrollbar {
    width: 3px; }
  .circle-viewer .contents::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .circle-viewer .contents::-webkit-scrollbar-thumb {
    background-color: #a1783a; }
  .circle-viewer .shutter {
    position: absolute;
    bottom: 22px;
    right: 25px;
    cursor: pointer; }
    .circle-viewer .shutter:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f057";
      font-size: 50px;
      color: #af945463; }
    .circle-viewer .shutter:active {
      bottom: 23px;
      right: 26px; }
      .circle-viewer .shutter:active:before {
        font-size: 48px; }
    .circle-viewer .shutter:hover:before {
      color: #ffc107bf; }
  .circle-viewer .circle-shift {
    width: 120px;
    position: absolute;
    bottom: 78px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1; }
    .circle-viewer .circle-shift .left, .circle-viewer .circle-shift .right {
      position: absolute;
      width: 60px;
      height: 60px;
      border: 4px solid #af945463;
      background-color: #eaeaaaa6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      pointer-events: all;
      cursor: pointer; }
      .circle-viewer .circle-shift .left:before, .circle-viewer .circle-shift .right:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 35px;
        color: #af945463; }
      .circle-viewer .circle-shift .left:hover, .circle-viewer .circle-shift .right:hover {
        border: 4px solid #ffc107;
        background-color: #ffc1072b; }
        .circle-viewer .circle-shift .left:hover:before, .circle-viewer .circle-shift .right:hover:before {
          color: #ffc107; }
      .circle-viewer .circle-shift .left:active, .circle-viewer .circle-shift .right:active {
        width: 58px;
        height: 58px;
        margin: 1px; }
        .circle-viewer .circle-shift .left:active:before, .circle-viewer .circle-shift .right:active:before {
          font-size: 33px; }
      .circle-viewer .circle-shift .left.disabled, .circle-viewer .circle-shift .right.disabled {
        cursor: default;
        opacity: 0.4;
        background-color: #ada69745;
        border: 4px solid #a1a09d63; }
        .circle-viewer .circle-shift .left.disabled:before, .circle-viewer .circle-shift .right.disabled:before {
          color: #a1a09d63; }
        .circle-viewer .circle-shift .left.disabled:hover, .circle-viewer .circle-shift .right.disabled:hover {
          background-color: #ada69745;
          border: 4px solid #a1a09d63; }
          .circle-viewer .circle-shift .left.disabled:hover:before, .circle-viewer .circle-shift .right.disabled:hover:before {
            color: #a1a09d63; }
        .circle-viewer .circle-shift .left.disabled:active, .circle-viewer .circle-shift .right.disabled:active {
          width: 60px;
          height: 60px;
          margin: 0; }
          .circle-viewer .circle-shift .left.disabled:active:before, .circle-viewer .circle-shift .right.disabled:active:before {
            font-size: 35px; }
    .circle-viewer .circle-shift .left {
      left: -14px; }
      .circle-viewer .circle-shift .left:before {
        content: "\f053"; }
    .circle-viewer .circle-shift .right {
      right: -14px; }
      .circle-viewer .circle-shift .right:before {
        content: "\f054"; }

/* サークル一覧POPUP                                               */
/* --------------------------------------------------------------- */
.circle-list-viewer {
  display: none;
  /*表示は「flex」必要、[block]はスクロール機能しない*/
  flex-direction: column;
  width: 1100px;
  height: fit-content;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 201;
  max-width: 80%;
  max-height: 85%;
  box-shadow: 0px 0px 10px 0px #000000;
  overflow: hidden; }
  @media screen and (max-width: 800px) {
    .circle-list-viewer {
      max-width: 95%; } }
  @media screen and (max-width: 500px) {
    .circle-list-viewer {
      max-width: 100%; } }
  .circle-list-viewer .circle-list-details {
    overflow-y: auto;
    /*height: calc(100% - 30px);*/
    /*flex-grow: 1;*/
    height: auto;
    min-height: 0; }
    .circle-list-viewer .circle-list-details .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      position: sticky;
      top: 0px;
      background-color: #f3f3f3f0;
      box-shadow: 0px 0px 3px 1px #66666640;
      z-index: 1; }
      .circle-list-viewer .circle-list-details .header .event-summary {
        display: flex;
        justify-content: flex-start;
        width: calc(100% - 184px); }
        @media screen and (max-width: 500px) {
          .circle-list-viewer .circle-list-details .header .event-summary {
            width: calc(100% - 92px); } }
        .circle-list-viewer .circle-list-details .header .event-summary .image {
          height: 65px;
          cursor: pointer;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          max-width: 110px; }
          .circle-list-viewer .circle-list-details .header .event-summary .image img {
            height: 100%;
            width: auto;
            object-fit: contain;
            max-width: 100%; }
          .circle-list-viewer .circle-list-details .header .event-summary .image:hover {
            opacity: 0.8; }
        .circle-list-viewer .circle-list-details .header .event-summary .contents {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: left;
          padding: 0 10px;
          flex: 1;
          min-width: 0; }
          @media screen and (max-width: 500px) {
            .circle-list-viewer .circle-list-details .header .event-summary .contents {
              padding: 0 5px; } }
          .circle-list-viewer .circle-list-details .header .event-summary .contents .title {
            font-weight: bold;
            font-size: 16px;
            line-height: 16px;
            color: #3f3f3f;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          .circle-list-viewer .circle-list-details .header .event-summary .contents .term {
            font-size: 12px;
            line-height: 12px;
            margin-top: 5px; }
          .circle-list-viewer .circle-list-details .header .event-summary .contents .count {
            display: flex;
            align-items: center;
            line-height: 12px;
            margin-top: 10px; }
            @media screen and (max-width: 500px) {
              .circle-list-viewer .circle-list-details .header .event-summary .contents .count {
                margin-top: 3px; } }
            .circle-list-viewer .circle-list-details .header .event-summary .contents .count .tag {
              font-size: 12px; }
            .circle-list-viewer .circle-list-details .header .event-summary .contents .count .num {
              font-weight: bold;
              margin: 0 5px 0 0;
              font-size: 18px;
              color: #a7762e; }
      .circle-list-viewer .circle-list-details .header .controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 184px; }
        @media screen and (max-width: 500px) {
          .circle-list-viewer .circle-list-details .header .controls {
            width: 92px; } }
        .circle-list-viewer .circle-list-details .header .controls .group {
          display: flex; }
    .circle-list-viewer .circle-list-details .circle-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 10px; }
      @media screen and (max-width: 500px) {
        .circle-list-viewer .circle-list-details .circle-list {
          padding: 10px 5px; } }
      .circle-list-viewer .circle-list-details .circle-list .circle-one {
        display: flex;
        align-items: center;
        width: calc(33.3% - 10px);
        margin: 5px;
        padding: 10px;
        border: 1px solid #eaeaea;
        transition: width 0.5s ease-in-out;
        position: relative;
        cursor: pointer;
        /*
        // 画面外の描画をスキップ
        //content-visibility: auto;
        // スキップした要素の「仮の高さ」を指定（スクロールバーの狂いを防ぐため）
        //height: 140px;
        //contain-intrinsic-size: 140px;
        */
        /* GPUアクセラレーションを強制的に有効化し、スクロールを滑らかにする */
        will-change: transform;
        transform: translateZ(0); }
        @media screen and (max-width: 800px) {
          .circle-list-viewer .circle-list-details .circle-list .circle-one {
            width: calc(50% - 10px); } }
        @media screen and (max-width: 500px) {
          .circle-list-viewer .circle-list-details .circle-list .circle-one {
            width: calc(100% - 10px);
            padding: 5px; } }
        .circle-list-viewer .circle-list-details .circle-list .circle-one .image {
          width: 35%;
          display: flex;
          aspect-ratio: 1 / 1;
          background-color: #f5f5f5;
          overflow: hidden;
          align-items: center;
          justify-content: center; }
          .circle-list-viewer .circle-list-details .circle-list .circle-one .image img {
            width: 100%;
            /*max-height: 100%;*/
            height: 100%;
            object-fit: cover; }
        .circle-list-viewer .circle-list-details .circle-list .circle-one .contents {
          width: 65%;
          display: flex;
          flex-direction: column;
          text-align: left;
          padding-left: 10px;
          font-size: 14px; }
          @media screen and (max-width: 500px) {
            .circle-list-viewer .circle-list-details .circle-list .circle-one .contents {
              padding-left: 5px; } }
          .circle-list-viewer .circle-list-details .circle-list .circle-one .contents .circle-profile {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            word-break: break-word; }
            .circle-list-viewer .circle-list-details .circle-list .circle-one .contents .circle-profile .title {
              font-weight: bold;
              line-height: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; }
              .circle-list-viewer .circle-list-details .circle-list .circle-one .contents .circle-profile .title:before {
                font-size: 14px;
                font-weight: 900;
                font-family: "Font Awesome 5 Free";
                content: '\f35a';
                color: tan;
                margin-right: 4px; }
            .circle-list-viewer .circle-list-details .circle-list .circle-one .contents .circle-profile .author {
              line-height: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; }
          .circle-list-viewer .circle-list-details .circle-list .circle-one .contents .tag-str {
            display: none; }
        .circle-list-viewer .circle-list-details .circle-list .circle-one .main {
          position: absolute;
          left: 5px;
          top: 4px;
          padding: 2px 10px;
          font-size: 12px;
          line-height: 12px;
          background-color: #393939;
          color: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 4px; }
        .circle-list-viewer .circle-list-details .circle-list .circle-one .pos-no {
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
          padding: 0px 5px;
          color: #687f3d;
          font-size: 12px;
          line-height: 14px;
          border-left: 1px solid #eaeaea;
          border-bottom: 1px solid #eaeaea; }
          .circle-list-viewer .circle-list-details .circle-list .circle-one .pos-no.visit {
            color: #ff559c; }
        .circle-list-viewer .circle-list-details .circle-list .circle-one:hover {
          background-color: #f5f5f0; }
        .circle-list-viewer .circle-list-details .circle-list .circle-one.curr-circle {
          background-color: #f8f8de;
          border: 3px solid #000000;
          box-shadow: 0 0 4px 0 #8e8e8e; }
      .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one {
        width: 100%;
        padding: 0;
        margin: 0;
        border: unset;
        border-bottom: 1px dashed #e3e3e3;
        /*
        //高速表示のための仕様だが保留に
        //height: 55px;
        //contain-intrinsic-size: 55px;
        */
        /* 現在サークルの直ぐ上のサークルのボーダーを消す */ }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .pos-no {
          border-left: 1px dashed #eaeaea;
          border-right: 1px dashed #eaeaea;
          border-bottom: 1px dashed #eaeaea; }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one.curr-circle {
          margin: 5px 0;
          border: unset;
          border-top: 3px solid #000000;
          border-bottom: 3px solid #000000;
          box-shadow: 10px 0 7px -8px #0000004d, -10px 0 7px -8px #0000004d; }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one:has(+ .curr-circle) {
          border-bottom-color: transparent; }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one:last-child {
          border-bottom: unset; }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .image {
          width: 77px;
          height: 50px; }
        .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents {
          width: calc(100% - 77px);
          flex-direction: row;
          align-items: center; }
          .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile {
            width: 45%;
            flex-direction: row; }
            @media screen and (max-width: 800px) {
              .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile {
                flex-direction: column; } }
            .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile .title, .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile .author {
              width: 50%; }
              @media screen and (max-width: 800px) {
                .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile .title, .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-profile .author {
                  width: 100%; } }
          .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .circle-tags {
            display: none; }
          .circle-list-viewer .circle-list-details .circle-list.list-style .circle-one .contents .tag-str {
            display: block;
            width: 55%;
            line-height: 16px;
            color: #555555;
            margin: 3px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; }
  .circle-list-viewer .circle-list-details::-webkit-scrollbar {
    width: 3px; }
  .circle-list-viewer .circle-list-details::-webkit-scrollbar-track {
    background-color: #cccccc; }
  .circle-list-viewer .circle-list-details::-webkit-scrollbar-thumb {
    background-color: #3d6d3f; }

/* --------------------------------------------------------------- */
/* デバック用情報                                                  */
/* --------------------------------------------------------------- */
.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=map.css.map */