@charset "utf-8";
/* // チャット共通
---------------------------------------------------------------------------------------------------- */
html,body {
  height: 100%;
  overflow: hidden;
}
#base {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow: hidden;
}
/* // 背景
---------------------------------------------------------------------------------------------------- */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}
.bg-front {
  z-index: 2;
  animation-name: bgfade;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}
.bg-back {
  z-index: 1;
}
@keyframes bgfade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 編集・追加ボタン */
.add.button,
.del.button,
.edit.button,
.close.button {
  width: calc(1.3em + 2px);
  height: calc(1.3em + 2px);
  padding: .15em;
  font-size: 1.6rem;
  border-radius: 50%;
}
.add.button::before,
.del.button::before,
.edit.button::before,
.close.button::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
.edit.button:empty::before { content: "\f044" }

/* // メニュー
---------------------------------------------------------------------------------------------------- */
#menubar {
  user-select: none;
}
.float-box > h2::before,
#menubar ul li > a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
#menu-button-logs > a::before { content: "\f036"; }
#bg-set > h2::before,
#menu-button-back > a::before { content: "\f03e"; }
#bgm-set > h2::before,
#menu-button-bgms > a::before { content: "\f001"; }
#config-user > h2::before,
#menu-button-user > a::before { content: "\f4fe"; }
#config-room > h2::before,
#menu-button-room > a::before { content: "\f013"; }
#help-window > h2::before,
#menu-button-help > a::before { content: "\f059"; }
#exit-room > h2::before,
#menu-button-exit > a::before { content: "\f52a"; }
#menu-button-exit:hover > a::before { content: "\f52b"; }
.mute-button::before {
  content: "\f028";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #0f7;
}
.mute-button.mute-on::before {
  content: "\f6a9";
  color: #f00;
}

/* // トピック
---------------------------------------------------------------------------------------------------- */
#topic {
  position: relative;
  overflow: hidden;
}
#topic-value {
  padding: 0 .5em 0 1.8em;
  font-size: 1.2rem;
  line-height: 1.6rem;
}
#topic .edit.button {
  position: absolute;
  top: .2rem;
  left: .2rem;
}

/* // ラウンド
---------------------------------------------------------------------------------------------------- */
#round {
  text-align: center;
}
#round-value {
  text-align: center;
}
#round .round-buttons {
  display: flex;
  justify-content: center;
  margin: .5rem -.3rem;
}
#round .button {
  min-width: 2em;
  padding: .3em .8em;
}
#round .button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#round .button:not(:first-child):not(:last-child) {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
#round .button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* // ステータス
---------------------------------------------------------------------------------------------------- */
#status {
  position: relative;
  padding-left: 0;
  padding-bottom: 1.2em;
  display: grid;
  overflow: hidden;
}
#status #status-body {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
#status #status-body > dl {
  position: relative;
  padding: .3rem .3rem 0 .5em;
  border-width: 0 0 .1rem;
  border-style: solid;
  border-color: var(--border-color-pale);
  animation-name: addin;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}
@keyframes addin {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
#status #status-body > dl.selected {
  background-color: rgba(0,150,255, 0.2);
}
#status #status-body > dl.check::before {
  content: "\f00c";
  display: inline-block;
  position: absolute;
  top: .3rem;
  left: .1rem;
  font-family: "Font Awesome 5 Free";
  font-size: 1em;
  font-weight: bold;
  color: #f20;
  transform: scaleY(1.2);
}
#status #status-body > dl > dt {
  grid-column: 1 / -1;
  margin-left: -.5em;
  padding: 0 0 .1em 1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#status #status-body > dl > dt[onclick]:hover {
  background: rgba(255,150,0,0.3);
  white-space: normal;
}
#status #status-body > dl > dd {
  padding: 0 0 .2em .2em;
  display: grid;
}
#status #status-body > dl > dd[id*="stt-memo"] {
  grid-column: 1 / -1;
  margin-top: .2rem;
  font-size: 86%;
  line-height: 1.1;
}
#status #status-body > dl > dd[id*="stt-memo"]:empty {
  display: none;
}
#status #status-body > dl > dd[id*="stt-url"] {
  grid-column: span 2;
  display: block;
}
#status #status-body > dl > dd[id*="stt-url"]:empty {
  display: none !important;
}
#status #status-body > dl > dd[id*="stt-url"] a::before {
  content: "参照URL";
  font-weight: bold;
  line-height: 1;
}
#status #status-body > dl > dd > dl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  position: relative;
} 
#status #status-body > dl > dd > dl dt {
  position: relative;
  flex-basis: 2em;
  margin: .1rem 0 -.1rem;
  padding-right: .1em;
  font-size: 85%;
  white-space: nowrap;
  z-index: 3;
}
#status #status-body > dl > dd > dl dd {
  flex-grow: 1;
  align-self: flex-end;
  padding-right: .1em;
  text-align: right;
}
#status #status-body > dl > dd > dl dd span {
  display: inline-block;
  position: relative;
  z-index: 3;
  font-size: 93%;
}
#status #status-body > dl > dd > dl dd span span {
  font-size: 100%;
}
#status #status-body > dl > dd > dl dd .gauge {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - .1rem);
  height: .5rem;
  margin-top: -.4rem;
  margin-bottom: -.1rem;
  background: #333;
  z-index: 1;
}
#status #status-body > dl > dd > dl dd .gauge i {
  display: block;
  position: absolute;
  max-width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  transition-property: width, color;
  transition-duration: 1s,1s;
  transition-timing-function: ease-out, ease-out;
}
#status #status-body > dl > dd > dl dd .gauge i::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.4;
}
#status #status-body > dl > dd > dl dd .gauge.none i {
  display: none;
}

#status .add.button {
  position: absolute;
  bottom: .1em;
  right: .1em;
  z-index: 10;
}
#status .edit.button {
  display: none;
}

/* // 共有メモ
---------------------------------------------------------------------------------------------------- */
.memo ul#memo-list li:empty {
  display: none !important;
}
.memo ul#memo-list li[onclick]:hover {
  background: rgba(255,150,0,0.3);
}
.memo .add.button {
  position: absolute;
  bottom: .1em;
  right: .1em;
}

.sheet .sheet-memo-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto max-content 1fr;
  grid-gap: 1rem;
  text-align: right;
  overflow-y: hidden;
}
.sheet .sheet-memo-body .sheet-memo-outline {
  grid-row: 2;
  margin-top: 1em;
  padding: 0;
  border: .1rem solid var(--border-color);
  border-radius: .5rem;
  overflow-y: auto;
}
.sheet #sheet-memo-value {
  border: .1rem solid transparent;
  line-height: 1.4;
  font-size:80%;
  padding: .4rem;
}
.sheet .sheet-memo-body > button {
  margin: 0 calc(50% - 5em);
  grid-row: 3;
}
body.rom .sheet#sheet-unit-memo { display: grid !important; }
body.rom .sheet#sheet-unit-memo textarea { pointer-events : none; }
body.rom .sheet#sheet-unit-memo button { display: none; }

/* // ユニットシート
---------------------------------------------------------------------------------------------------- */
body.rom .sheet { display: none !important; }
#sheet-area {
}
.sheet {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.sheet h2 {
  padding-bottom: .1em;
  border-bottom: .1rem solid var(--border-color);
  font-size: 1.2em;
}
.sheet-body {
  display: grid;
  grid-template-rows: auto minmax(min-content,1fr) auto;
  overflow-y: hidden;
}
.sheet-body h3 {
  margin-bottom: .1rem;
}

/* リモコン */
.sheet-body .status-remocon-area {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.sheet-body .status-remocon-area > .button {
  position: absolute;
  top: .25em;
}
.sheet-body .status-remocon-area > .button.add { right: 3rem; }
.sheet-body .status-remocon-area > .button.del { right: .5rem; }
.sheet-body .status-remocon-area select {
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 0.9em;
}
.sheet-body .status-remocon-area ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.sheet-body .status-remocon-area ul li.dice-button {
  grid-column: span 6;
  margin: 0;
  grid-template-columns: 1fr 2fr auto;
}
.sheet-body .status-remocon-area ul li.dice-button input:first-child {
  padding: .1rem .3rem;
  border-right-width: .1rem;
  border-right-style: dotted;
  border-right-color: inherit;
  font-size: 85%;
  font-family: 'Lato',var(--logs-font-family-jp),"BIZ UDGothic","Meiryo","YuKyokasho Yoko";
}
.sheet-body .status-remocon-area ul li.dice-button button {
  border-width: 0;
}
.sheet-body .status-remocon-area ul li.dice-button * + button {
  border-left-width: .1rem;
  border-left-style: solid;
}
.sheet-body .status-remocon-area ul li.dice-button button:empty::before {
  content: "⏎";
}
.sheet-body .status-remocon-area ul.status-remocon-list {
}
.sheet-body .status-remocon-area ul.status-remocon-list li {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sheet-body .status-remocon-area ul.status-remocon-list li:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sheet-body .status-remocon-area ul.status-remocon-list li:hover {
  border-bottom: .1rem solid #d90;
}
.sheet-body .status-remocon-area ul li.dice-button.memo {
  grid-template-columns: 1fr auto;
}
.sheet-body .status-remocon-area ul li.dice-button.mini {
  grid-column: span 2;
}
.sheet-body .status-remocon-area ul li.dice-button.mini button {
  padding: .3rem;
}
.sheet-body .status-remocon-area ul li.dice-button.checks {
  grid-column: span 3;
  grid-template-columns: 2fr 1fr;
  height: 1.5em;
}
.sheet-body .status-remocon-area ul.status-remocon-others {
  margin-bottom: .2rem;
}
.sheet-body .status-remocon-area ul.status-remocon-others li {
  margin-top: .4rem;
}
.sheet-body .status-remocon-area ul li.dice-button.checks :not(:first-child) {
  border-left-width: .1rem;
}
.sheet-body .status-remocon-area ul.status-remocon-others li.dice-button.delete {
  grid-column: span 3;
  width: max-content;
  margin-left: auto;
}
.sheet-body .status-remocon-sub ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-bottom: .3rem;
  padding: .2rem 0 0 .3rem;
  border-width: .1rem 0 0 .3rem;
  border-style: solid;
  border-color: var(--border-color);
}
.sheet-body .status-remocon-sub ul li:first-child {
  grid-column: span 4;
  margin: 0 1rem .3rem 0;
}
.sheet-body .status-remocon-sub ul li:first-child input {
  width: calc(100% - 3em);
  margin-left: .3rem;
  padding: .3rem;
}
.sheet-body .status-remocon-sub ul li.dice-button {
  grid-column: span 2;
}
.sheet-body .status-remocon-sub ul li.dice-button button {
  max-width: 3em;
  white-space: nowrap;
  overflow: hidden;
}
.sheet-body .status-remocon-sub ul li.dice-button:last-child {
  width: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.sheet-body .status-remocon-sub ul i {
  font-style: normal;
}
.sheet-body .status-remocon-sub ul.close li.dice-button {
  display: none;
}
/* パレット */
.sheet-body .chat-palette-area {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin-top: 0.5rem;
  border-top: .1rem solid var(--border-color);
}
.sheet-body .chat-palette-frame {
  position: relative;
}
.sheet-body .chat-palette-frame .chat-palette {
  position: absolute;
  overflow-y: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.2rem;
  border-radius: 0.8rem 0 0 0;
  z-index: 2;
}
.sheet-body .chat-palette-frame .chat-palette.lines {
  border: .1rem solid var(--border-color-pale);
}
.sheet-body .chat-palette-frame .chat-palette.lines > span {
  display: block;
  padding: .4rem .5rem;
  border-bottom: .1rem solid var(--border-color-pale);
  cursor: pointer;
}
.sheet-body .chat-palette-frame .chat-palette.lines > span:focus {
  outline: none;
  background-color: rgba(0,150,255, 0.2);
}
.sheet-body .chat-palette-frame .chat-palette.lines > span:hover {
  background-color: rgba(255,150,0, 0.2);
}
.sheet-body .chat-palette-frame  .chat-palette.texts {
  line-height: calc(1em + .9rem);
  padding: 0 .5rem;
}
.sheet-body .chat-palette-area .comm-area {
  margin: 0;
}
.sheet-body .chat-palette-area .comm-area textarea {
  border-top: 0;
  border-top-left-radius: 0;
}
.sheet-body .chat-palette-area .comm-area button {
  border-top: 0;
  border-top-right-radius: 0;
}
.sheet-body .chat-palette-frame .button {
  position: absolute;
  width: 4.5em;
  height: 2rem;
  top: -2rem;
  right: 0;
  padding: .25rem 0;
  border-bottom-width: 0;
  border-radius: 0.8rem 0.8rem 0 0;
  font-family: inherit;
  font-size: 1.4rem;
  z-index: 1;
}
.sheet-body .chat-palette-frame.editing::before {
  content:'チャットパレット編集中';
  display: block;
  padding: .2em;
  border-radius: 0.8rem 0 0 0;
  border-width: .1rem .1rem 0;
  border-style: solid;
  border-color: var(--border-color-pale);
  background-color: rgba(255,150,0, 0.2);
  text-align: center;
}
.sheet-body .chat-palette-frame.editing .chat-palette {
  top: calc(1.4em + .2rem);
  border-top-left-radius: 0;
}
.sheet-body .chat-palette-frame .button.edit::before  { content:'編集' }
.sheet-body .chat-palette-frame .button.save::before  { content:'確定' }
.sheet-body .chat-palette-frame:not(.editing) .chat-palette.texts { display: none; }
.sheet-body .chat-palette-frame.editing       .chat-palette.lines { display: none; }
.sheet-body .chat-palette-frame:not(.editing) .button.save { display: none; }
.sheet-body .chat-palette-frame.editing       .button.edit { display: none; }
#sheet-area.destinate-main .chat-palette-area .chat-palette {
  border-radius: 0.8rem;
}
#sheet-area.destinate-main .chat-palette-area .comm-area {
  display: none;
}

/* デフォルトシート */
.sheet-body-default {
  padding: .5em;
}
.sheet-body-default dl {
  display: grid;
}
.sheet-body-default dt {
  padding: .2em 0;
}
.sheet-body-default dd {
  display: flex;
  padding: .2em .5em .5em;
}
.sheet-body-default dd input {
  width: 100%;
  flex-grow: 1;
}
.sheet-body-default dd input[list] {
  flex-shrink: 1;
}

.sheet-body-default ul {
}
.sheet-body-default ul li {
  padding: .5em 0;
}

.sheet-body-default button {
  display: block;
  margin: 1em auto;
  padding: .3em 1em;
  font-size: 1em;
}

/* フッタ */
.sheet-footer {
  padding-top: .5em;
  overflow-y: auto;
  max-height: 12em;
}
.sheet input[type="url"] {
  width: 100%;
}
.sheet select {
  font-size: 1.1em;
}
.sheet .dice-button button:before {
  content:"";
}
.sheet-footer #member-num {
  white-space: nowrap;
}

/* 他 */
.sheet textarea {
  width: 100%;
  height: auto;
  font-size: 1.4rem;
  padding: .5rem;
}

.sheet .close.button {
  position: absolute;
  top: 0;
  right: 0;
}

/* // フォーム
---------------------------------------------------------------------------------------------------- */
body.rom #main-form::before { content: '見学者は発言できません。'; }
body.rom .input-form { display: none !important; }

.input-form input,
.input-form select {
  font-size: 1.4rem;
  vertical-align: bottom;
}
.input-form .comm-area textarea {
  width: 100%;
  padding: .5rem;
  font-size: 1.4rem;
}
.comm-area {
  display: grid;
  grid-template-columns: auto max-content;
  margin: .5em 0;
}
.comm-area textarea {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.comm-area button {
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* メイン */
#main-form .name-area {
  display: grid;
  grid-gap: 0;
  grid-template-columns: auto auto auto;
  margin-right: .8em;
}
#main-form .name-area input {
  height: 2.2rem;
  vertical-align: bottom;
}
#main-form .name-area > * {
  border-radius: 0;
  border-right-width: 0;
}
#main-form .name-area > *:first-child {
  border-radius: .8rem 0 0 .8rem;
}
#main-form .name-area > *:last-child {
  border-radius: 0  .8rem .8rem 0;
  border-right-width: .1rem;
}
#main-form .name-area .main-name {
  display: inline-block;
  width: 12em;
  text-align: center;
}
#main-form .address-area {
  display: inline-flex;
  position: relative;
  margin-left: auto;
  margin-right: 2rem;
  border: .1rem solid var(--border-color);
  border-radius: .8rem;
}
#main-form .address-area::before {
  position: absolute;
  content: "⇒";
  left: -1.1em;
  bottom: 0;
}
#main-form .address-area select {
  max-width: 10em;
  border: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#main-form .address-area label {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 4em;
  padding: 0 .3rem;
  border-top-right-radius: .8rem;
  border-bottom-right-radius: .8rem;
  font-size: 80%;
  opacity: 0.5;
}
#main-form .secret .address-area label {
  opacity: 1;
}
#main-form .address-area label:hover {
  box-shadow: inset 0 0 .5rem #7af;
}
#main-form .address-area label input {
  vertical-align: text-bottom;
}
#main-form .address-area label input+b {
  user-select: none;
}
/* 装飾ボタン */
.decoration-buttons {
  display: flex;
  padding-left: .5em;
  padding-right: 7em;
  border-top: .1rem solid var(--border-color-input);
}
.decoration-buttons .button {
  position: relative;
  width: 2.5rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  font-size: 1.2rem;
  font-weight: normal;
  border-width: 0 .1rem .1rem 0;
  border-radius: 0;
  overflow: visible;
}
.decoration-buttons .button.start {
  border-left-width: .1rem;
  border-bottom-left-radius: .6rem;
}
.decoration-buttons .button.end + .button.start {
  margin-left: 1em;
}
.decoration-buttons .button.end {
  border-bottom-right-radius: .5rem;
}
.decoration-buttons .button::before,
.decoration-buttons .button::after {
  position: absolute;
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  top: auto;
  left: 0;
  right: 0;
  bottom: .3rem;
  white-space: nowrap;
}
.decoration-buttons .insert-ruby    { width: 3rem; }
.decoration-buttons .insert-em      { width: 3rem; }
.decoration-buttons .insert-serif   { width: 3rem; }
.decoration-buttons .insert-ruby::before    { content:"ルビ"; }
.decoration-buttons .insert-em::before      { content:"傍点"; }
.decoration-buttons .insert-serif::before   { content:"明朝"; }

.decoration-buttons .insert-bold::before    { content:"\f032"; }
.decoration-buttons .insert-oblique::before { content:"\f033"; }
.decoration-buttons .insert-under::before   { content:"\f0cd"; }
.decoration-buttons .insert-strike::before  { content:"\f0cc"; }
.decoration-buttons .insert-big::before     { content:"\f031"; left: .2rem; right: auto; }
.decoration-buttons .insert-small::before   { content:"\f031"; left: .2rem; right: auto; }
.decoration-buttons .insert-big::after      { content:"\f067"; left: auto; right: .2rem; font-size: 80%; }
.decoration-buttons .insert-small::after    { content:"\f068"; left: auto; right: .2rem; font-size: 80%; }
.decoration-buttons .insert-color::before   { content:"\f031"; color:#e80; }
.decoration-buttons .insert-hide::before    { content:"\f031"; opacity:0.2; }
.decoration-buttons .insert-horizon::before { content:"―"; }
.decoration-buttons .insert-left::before    { content:"\f036"; }
.decoration-buttons .insert-center::before  { content:"\f037"; }
.decoration-buttons .insert-right::before   { content:"\f038"; }

.decoration-buttons .insert-image::before   { content:"\f03e"; color:#8fd; }

/* ダイスボタン */
.dice-button {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  margin: 0 1rem .3rem 0;
  padding: 0;
  border-radius: .5em ;
  border-width: .1rem;
  overflow: hidden;
  background: transparent;
}
.dice-button > * {
  vertical-align: bottom;
  font-size: 1.1rem;
  border-width: 0;
  border-radius: 0;
}
.dice-button button {
  padding: 0 .5em;
  border-right-width: .1rem;
}
.dice-button button::before {
  content: '🎲';
  font-size: 1.4rem;
}
.dice-button input,
.dice-button textarea {
  display: inline-block;
  width: 100%;
  height: auto;
  padding: .3rem .3rem;
  text-shadow: none;
  font-size: 1.4rem;
  border-width: .1rem 0;
  border-color: transparent;
  overflow: hidden;
}
.dice-button button:only-child {
  grid-column: span 2;
  border-radius: .5em;
}

/* // チャットログ
---------------------------------------------------------------------------------------------------- */
.chat .notice-unread {
  position: absolute;
  text-align: center;
  background: rgba(50,255,100,0.3);
  left: 0;
  right: 0;
  bottom: 0;
  padding: .5rem;
  z-index: 10;
}
.chat .notice-unread:hover {
  background: rgba(150,150,150,0.8);
}
.chat .notice-unread[data-unread="0"] {
  display: none;
}
.chat .notice-unread::after {
  content: "(" attr(data-unread) ")";
}
.chat.close .tab-name {
  color: #ffcc00;
}
.chat.close .tab-name::after {
  content: "(" attr(data-unread) ")";
}
.chat.close .tab-name[data-unread="0"] {
  color: inherit;
}
/* ログ */
.chat .logs {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: .5em;
  overflow-wrap: break-word;
}
.chat .logs:empty {
  text-align: center;
}
.chat .logs dl {
  position: relative;
  padding-right: .5rem;
}
.chat .logs dl dt,
.chat .logs dl dd {
  position: relative;
  border-radius: .5rem;
  animation-name: fadein;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}
.chat .logs dl dd {
  animation-name: newfade;
  animation-duration: 10s;
  animation-timing-function: linear;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes newfade {
  from { background-color: rgba(255,200,0,0.1); }
  to   {  }
}

/* 投稿ユーザー表示 */
.chat .logs dl::before {
  content: attr(data-user);
  position: absolute;
  font-size: 1rem;
  top: -1rem;
  left: 0;
  opacity: 0;
}
.chat .logs dl:hover::before,
.chat .logs dl:hover::after {
  opacity: 0.5;
}
/* タイムスタンプ表示 */
.chat .logs dl dd::after {
  content: attr(data-date);
  position: absolute;
  font-size: 1.2rem;
  top: -1.2rem;
  right: 0;
  opacity: 0;
  font-family: 'Arial';
  font-weight: normal;
  white-space: nowrap;
  overflow-x: hidden;
}
.chat .logs dl dd:hover::after {
  opacity: 0.7;
}
/* システムメッセージ */
/* ダイス・システムメッセージ補足表示部 */
.chat .logs dl dd.info {
  margin-left: 1em;
}
.chat .logs dl dd.info i {
  margin-left: .2rem;
}
.chat .logs dl dd.info[data-code]::after {
  content: "" attr(data-code) " --- " attr(data-date);
}
/* レディチェック */
.chat .logs dl.ready dd.info button {
  padding: .5em 1em;
  font-size: 90%;
}
.chat .logs dl.ready dd.info button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.chat .logs dl.ready dd.info button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 挿絵 */
.logs dl dd img.insert {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 40vh;
  object-fit: scale-down;
  cursor: zoom-in;
  animation-name: imgfadein;
  animation-duration: .5s;
  animation-timing-function: linear;
}
.logs dl dd img.insert.bg {
  width: 100%;
  max-height: 10vh;
  object-fit: cover;
}
.logs dl dd .chara-image {
  float: left;
  width: 15rem;
  height: 18rem;
  margin-right: .5em;
  max-width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  cursor: zoom-in;
  animation-name: imgfadein;
  animation-duration: .5s;
  animation-timing-function: linear;
}
@keyframes imgfadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* // 各フロートボックス
---------------------------------------------------------------------------------------------------- */
.float-box {
  transition-property: transform, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
  z-index: 99;
}
.float-box details {
  transition: .5s;
}
.float-box details[open] {
  background: rgba(127,127,127,0.2);
  padding-bottom: 1rem;
}
.float-box details details {
  margin-left: 1rem;
}
.float-box summary {
  font-weight: bold;
  user-select: none;
}
.float-box summary:hover {
  background: rgba(127,127,127,0.1);
}
.float-box summary i,
.float-box h3 i,
.float-box h4 i {
  margin-right: .5rem;
  color: #fb0;
}
.float-box h2 {
  margin: -.2rem -.2rem 0;
  padding: .8rem;
  border-radius: .5rem;
  font-size: 1em;
  background: linear-gradient(to right, rgba(100,127,150,0.5), transparent);
}
.float-box h2::before {
  display: inline-block;
  margin-right: .25em;
  transform: scale(1.2);
  color: #dc8;
}
.float-box h3,
.float-box details summary {
  font-size: 1em;
  margin-top: .5em;
  padding: .5em 0 .2em;
  border-top: .1rem solid var(--border-color);
}
.float-box h4,
.float-box details details summary {
  font-size: 1em;
  margin-top: .5em;
  padding: .5em 0 .2em;
  border-top: .1rem dotted var(--border-color-pale);
}
.float-box h5 {
  margin-top: .5em;
}
.float-box hr {
  border-width: 0;
  border-top: .1rem solid var(--border-color-pale);
}

.float-box textarea {
  line-height: 1.5;
}
.float-box p {
  line-height: 1.4;
  margin: .5em;
}
.float-box p button {
  padding: .5rem 1rem;
}
.float-box ul {
  line-height: 1.4;
  margin: .5em .5em .5em 1.5em;
  list-style-type: square;
}
.float-box table {
  margin: .5em;
  border-width: .1rem;
  border-style: solid;
  border-collapse: collapse;
}
.float-box table tr {
  border-width: 0 0 .1rem;
  border-style: solid;
}
.float-box table th,
.float-box table td {
  padding: 1rem;
}
.float-box table th,
.float-box table td {
  border-right-width: .1rem;
  border-right-style: dotted;
  border-color: inherit;
}
.float-box .close.button {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
}
#dark-back,
#image-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 98;
}
#image-box {
  background-color: rgba(0,0,0,0.8);
  animation-duration: .25s;
  animation-name: imageIn;
  z-index: 100;
}
@keyframes imageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#image-box-image {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
/* z-index */
#enter-form   { z-index: 100; }
#exit-form    { z-index: 100; }
#config-user  { z-index: 200; }
#config-room  { z-index: 200; }
/* 入室 */
#enter-form p {
  padding: 3em 5em;
  text-align: center;
  border-bottom: .1rem solid var(--border-color);
}
/* 退室 */
#exit-form {
  padding: 4em;
  text-align: center;
}
/* 背景/BGM */
#bg-set,
#bgm-set {
  height: auto;
  display: grid;
  grid-template-rows: max-content max-content 1fr;
}
#bg-set h2 + div + div,
#bgm-set h2 + div + div {
  overflow-y: auto;
}
.bg-list {
  margin: 0;
}
.bg-list li {
  margin: .1rem 0 0 0;
  padding: .5rem 1rem;
  background: rgba(100,127,150,0.3);
  list-style-type: none;
  font-size: 85%;
  line-height: 1.2;
  cursor: pointer;
}
.bg-list li:hover {
  background: none;
}
#bgm-set-preview:not([src]) + #bgm-set-preview-area,
#bgm-set-preview[src=""] + #bgm-set-preview-area {
  opacity: 0.2;
}
#bgm-set-preview-area {
  display: block;
  height: 60px;
  margin: 30px 1em 29px;
  padding: 1em .5em;
  border-radius: 2em;
  background: #567;
  text-align: center;
}
#bgm-set-preview-play {
  display: inline-block;
  margin: -.5em .2em 0;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  vertical-align: bottom;
  font-size: 180%;
  cursor: pointer;
}
#bgm-set-preview-play:hover {
  opacity: 0.5;
}
#bgm-set-preview-play::before {
  content:'\f04b';
}
#bgm-set-preview-play.playing::before {
  content:'\f04c';
}
#bgm-set-preview-play::before {
}
#bgm-set-preview-seekbar {
  display: inline-block;
  width: 80%;
  min-width: 160px;
  height: 10px;
  margin: 0 .2em;
  border-radius: 5px;
  background: linear-gradient(to right, #aaa, #789) no-repeat #eee;
}
#bgm-yt-preview-area {
  text-align: center;
}
.bg-list li[data-vol] {
  position: relative;
}
.bg-list li[data-vol]::before {
  content:'\f04b';
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: relative;
  left: -4px;
  font-size: 80%;
}
.bg-list li[data-vol]::after{
  content: "\f028 " attr(data-vol) "%";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #ed9;
  font-size: 90%;
  margin-left: .5em;
}
/* 設定 */
#config-user #font-sample {
  max-width: 30em;
  margin: 0 .5rem;
  padding: .5em 1em;
  background-color: #111;
  font-size: 1.6rem;
  line-height: 1.8;
}

/* ヘルプ */
#help-window {
  height: auto;
  display: grid;
  grid-template-rows: max-content 1fr;
}
#help-window code {
  display: inline-block;
  padding: .2rem .5rem;
  background: rgba(0,255,100,0.4);
  border-radius: 1rem;
}
#help-window h3:nth-child(n+2) {
  margin-top: 1em;
}
#help-window h4 {
  margin-top: .5em;
}
#help-window table th b {
  color: #eeaa00;
}
#help-window table i {
  margin: 0 .1em;
  color: #99aacc;
  font-weight: normal;
}
#help-window table.help-rate-table th:nth-child(2) {
  white-space: nowrap;
}

.mem-signal::before {
  display: inline-block;
  width: 1.5em;
  margin-right: .5em;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  text-align: center;
}
.mem-signal.green::before  { content: "\f012"; color: #0f0; }
.mem-signal.yellow::before { content: "\f071"; color: #ff0; }
.mem-signal.red::before    { content: "\f057"; color: #f00; }

/* // その他
---------------------------------------------------------------------------------------------------- */
/* カラーピッカー */
body .sp-replacer {
  height: 2.2rem;
  padding: .3rem;
  background: transparent;
  border: .1rem solid var(--border-color);
  border-radius: .8rem;
}
body .sp-replacer .sp-preview {
  height: 1.4rem;
}
body .sp-replacer .sp-dd {
  line-height: 1rem;
  color: white;
}
.sp-container {
  background-color: #111 !important;
}
.sp-container .sp-palette-container {
  max-height: 300px;
  overflow: auto;
  padding-bottom: 0px;
  margin-bottom: -0px;
}
.sp-container .sp-palette {
  max-width: 280px;
}
.sp-container .sp-thumb-el {
  border-color: #000 !important;
}