@charset "utf-8";
/* // スマホレイアウト
---------------------------------------------------------------------------------------------------- */
/*
#base {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#sp-header,
#topic,
#tablist-area,
#main-form {
  flex-basis: max-content;
  flex-shrink: 0;
}
#chat-area {
  flex-grow: 1;
}
#topic,
#chat-area,
#tablist-area,
#main-form {
  margin-top: .1rem !important;
}
*/
#base {
  padding: 0;
  display: grid;
  grid-gap: .1rem;
  grid-template-columns: 100% !important;
  grid-template-rows: max-content max-content 1fr max-content max-content !important;
  grid-template-areas: 
    " head "
    "topic "
    " chat "
    " tabs"
    " form " !important;
}
#sp-header {
  grid-area: head;
}
#topic {
  grid-area: topic;
}
#chat-area {
  grid-area: chat;
}
#tablist-area {
  grid-area: tabs;
}
#main-form {
  grid-area: form;
}
#sheet-area {
  position: fixed;
  margin: 0;
  z-index: 10;
}
.sheet {
  position: fixed;
  width: auto;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
#sheet-area.closed .sheet {
  display: none;
}
body.rom .closed .sheet#sheet-unit-memo {
  display: none !important;
}
#sheet-area #close-area {
  display: none !important;
}
/*  */
.box {
  border-radius: 0;
}
/* スライダー */
input[type="range"] {
  height: 1.2em;
}
input[type=range]::-webkit-slider-thumb {
  height: 1.2em;
  width: 1em;
}
input[type=range]::-moz-range-thumb {
  height: 1.2em;
  width: 1em;
}

/* // ヘッダ
---------------------------------------------------------------------------------------------------- */
#sp-header {
}
#sp-header h1 {
  margin: 0 0 0 8vw;
  font-size: 4vw;
  line-height: 8vw;
  white-space: nowrap;
}
#sp-header div {
  position: absolute;
  width: 12vw;
  padding: .1em;
  top: 0;
  font-size: 8vw;
}
#sp-header div.head-menu {
  left: 0;
}
#sp-header div.head-mute {
  right: 12vw;
}
#sp-header div.head-side {
  right: 0;
}
#sp-header #menu-open::before {
  content: "\f0c9";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}
#sp-header #side-open::before {
  content: "\f0c0";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
}

/* // サイド／メニュー共通
---------------------------------------------------------------------------------------------------- */
#sidebar,
#menubar,
#footer{
  transition-property: top, left, right, bottom;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}
#sidebar {
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  position: fixed;
  width: 100vw;
  height: calc(100% - 9vw);
  top: 9vw;
  left: 100vw;
  right: -100vw;
  bottom: 0;
}
#sidebar.open {
  left: 0;
  right: 0;
  z-index: 9;
}
#menubar {
  position: fixed;
  width: 100vw;
  height: calc(80% - 9vw);
  top: 9vw;
  left: -100vw;
  right: 100vw;
}
#menubar.open {
  left: 0;
  right: 0;
  z-index: 9;
}
#footer {
  position: fixed;
  width: 100vw;
  height: 20%;
  left: -100vw;
  right: 100vw;
  bottom: 0;
}
#footer.open {
  left: 0;
  right: 0;
  z-index: 9;
}

/* // メニュー
---------------------------------------------------------------------------------------------------- */
#menubar {
  font-size: 1rem;
  overflow: hidden;
}
#menubar ul {
  font-size: 4vw;
  line-height: 8vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#menubar ul + ul {
  display: none;
}
#menubar ul li {
  text-align: center;
}
#menubar ul li a {
  display: block;
  padding: 2.5rem 0;
  color: inherit;
  background: none;
  cursor: pointer;
}
#menubar ul li a::before {
  display: block;
  font-size: 250%;
}
/* // フッタ
---------------------------------------------------------------------------------------------------- */
#footer {
  font-size: 3vw;
}
#footer dd {
  padding-left: 1em;
  padding-bottom: .5em;
}
#footer dd.link {
  background: none;
}

/* // サイド
---------------------------------------------------------------------------------------------------- */
#sidebar {
  font-size: 3vw;
}
#sidebar .box {
  border-radius: 0;
  border-bottom: .1rem solid var(--border-color);
}

/* // 共有メモ
---------------------------------------------------------------------------------------------------- */
.memo {
}
.memo ul#memo-list {
}
.memo ul#memo-list li {
  display: inline-block;
  width: 8em;
  margin-right: .3rem;
  padding: .3em;
  background-color: rgba(127,127,127,0.15);
  border: .1rem solid var(--border-color-pale);
  border-radius: .8em;
  font-size: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* // トピック
---------------------------------------------------------------------------------------------------- */
#topic-value {
  font-size: 1rem;
}
/* // チャットエリア
---------------------------------------------------------------------------------------------------- */
#chat-area {
  position: relative;
  overflow: hidden;
  margin: 0;
}
/* // チャットログ
---------------------------------------------------------------------------------------------------- */
.chat {
  width: 100%;
  height: 100%;
  /* position: absolute; */
  /* top: 0; */
  /* bottom: 0; */
  overflow: hidden;
}
.chat h2 label {
  display: none;
}
.chat .input-form {
  display: none;
}
.chat .close.button {
  display: none;
}
.chat .logs {
  width: auto;
  height: 100%;
}

.chat  {
  font-size: 3.4vw;
}
.chat .logs {
  line-height: 1.8;
}
.chat .logs dl {
}
.chat .logs dl dt {
  text-align: left;
}
.chat .logs dl dd {
  padding-left: .5em;
  min-height: calc((1em * 1.6) - .1rem);
}
.chat .logs dl dd::before
.chat .logs dl dd::after, {
  font-size: 1rem;
  top: -1rem;
  opacity: 0.5;
}

.chat.sub {
  display: none;
}

/* フォントサイズ調整バー */
.chat .option {
  display: none;
}

/* // タブリスト
---------------------------------------------------------------------------------------------------- */
#tablist-area {
}
#tablist {
}
#tablist li {
  display: inline-block;
  margin: -.5rem 0;
  padding: .5rem 0 .3rem 1rem;
  border-width: 0 0 .2rem;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
}
#tablist li.bold {
  border-color: var(--border-color);
  color: #ffcc00;
}
#tablist li::after {
  content: "(" attr(data-unread) ")";
  font-size: 80%;
}
#tablist li[data-unread="0"]::after {
  opacity: 0.2;
}

/* // フォーム
---------------------------------------------------------------------------------------------------- */
#main-form {
  padding: .5rem 0 0;
}
#main-form .input-form {
  display: block;
}
#main-form .input-form .namelist-area {
  display: flex;
  position: relative;
}
#main-form .input-form .namelist-area::before {
  position: absolute;
  display: flex;
  content: "▼変更";
  width: 4.5em;
  top: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#main-form .input-form .namelist-area > * {
  border-left-width: 0;
  border-bottom-width: 0;
}
#main-form .input-form .namelist-area select {
  order: -1;
  width: 4.5em;
  border-radius: 0;
  color: transparent;
}
#main-form .namelist-area #npc-del-button {
  border-radius: 0;
  display: none;
}
#main-form .namelist-area #npc-edit-button {
  border-radius: 0;
}
#main-form .namelist-area #npc-add-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#main-form .comm-config-area {
  display: flex;
  justify-content: space-between;
}
#main-form .comm-config-area > * > * {
  height: 1.6em;
  vertical-align: bottom;
}
#main-form #main-name1 {
  width: 8em;
  border-left-width: 0;
  border-radius: 0;
}
#main-form #form-color,
#main-form .sp-replacer {
  border-right-width: .1rem;
  border-radius: 0  .8rem .8rem 0;
}
#main-form #form-color-text {
  display: none;
}
#main-form .address-area {
  text-align: right;
}
#main-form .comm-area {
  margin: .2rem 0 0;
}
#main-form .comm-area > * {
  border-width: .1rem 0 0; 
  border-color: var(--border-color-pale);
  border-radius: 0;
}
.decoration-buttons {
  display: none;
}
.check-buttons {
  display: none;
}
.form-dice {
  display: none;
}
/* // ステータス
---------------------------------------------------------------------------------------------------- */
:not([data-layout="row"]) #status #status-body > dl {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* // 各フロートボックス
---------------------------------------------------------------------------------------------------- */
.float-box {
  position: absolute;
  max-width: 100vw;
  height: 100%;
  overflow: auto;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: none !important;
}
.float-box.open {
  display: block !important;
}
.float-box h2 {
  margin: 1rem 1rem 2rem;
}
.float-box .close.button {
  position: fixed;
  right: 1rem;
}
#config-sound input {
  margin: 1em 0;
}

/* // その他
---------------------------------------------------------------------------------------------------- */
/* カラーピッカー */
.sp-container .sp-palette-container {
  max-height: 200px;
  overflow: auto;
  padding-bottom: 0px;
  margin-bottom: -0px;
}
.sp-container .sp-palette {
  max-width: 100%;
  padding: 0 1.5rem;
}