@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kosugi|Kosugi+Maru|Sawarabi+Gothic|Noto+Sans+JP:400,700|Noto+Serif+JP:400,700|Zen+Old+Mincho:900|&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300..600,0..1,-25');

/* // カスタムプロパティ
---------------------------------------------------------------------------------------------------- */
:root {
  /* 基本フォント色 */
  --base-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--base-font-color-lightness)
  );
  --base-font-color-hue : 0; /* 基本フォント色の色相 */
  --base-font-color-saturation: 0%; /* 基本フォント色の彩度 */
  --base-font-color-lightness: 100%; /* 基本フォント色の明るさ */
  
  /* ログフォント色（色相と彩度は基本と共通） */
  --logs-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--logs-font-color-lightness)
  ); 
  --logs-font-color-lightness: 100%; /* ログフォント色の明るさ */
  
  /* ログフォント体（色相と彩度は基本と共通） */
  --logs-font-family-jp: "BIZ UDGothic";  /* 通常（ゴシック） */
  --logs-font-family-min: "Noto Serif JP"; /* 明朝体 */
  
  /* テキスト縁取り */
  --box-text-shadow-color: #000;
  --box-text-shadow:
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem ;
  
  /* ボーダー */
  --border-color      : rgba(255,255,255,0.3); /* ボーダー色 */
  --border-color-pale : rgba(255,255,255,0.2); /* ボーダー色（薄い） */
  --border-color-faint: rgba(255,255,255,0.1); /* ボーダー色（とても薄い） */
  --border-color-deep : rgba(255,255,255,0.5); /* ボーダー色（濃い） */
  --border-color-input: rgba(200,220,240,0.3); /* ボーダー色（フォーム類） */
  
  /* ボックス（ウィンドウ）背景 */
  --box-bg-opacity: 0.7;
  --box-bg-color: rgba(0,0,0, var(--box-bg-opacity));
  --float-bg-color: rgba(10,10,30,0.9);
  
  --chara-name-bg: #0005;

  /* 背景 */
  --bg-opacity: 1;

  /* ボタン・インプットhover */
  --hover-inset-color: #7af;
}
.no-text-shadow {
  --chara-name-bg: #0007;
}
@media (max-width: 600px) {
  :root {
    --box-bg-color: rgba(0,0,0, 0.8);
  }
  #base {
    --box-bg-color: rgba(0,0,0, 0.6);
  }
}

/* // ベース設定
---------------------------------------------------------------------------------------------------- */
/* デフォルト背景 */
@layer base {
  body {
    background-image: linear-gradient(160deg, #808899, #202233);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .bg-image {
    filter: brightness(var(--bg-opacity));
  }
  /* ボックスとテキストシャドウ */
  .box {
    background-color: var(--box-bg-color);
    box-shadow: inset 0 0 1em rgba(255,255,255,0.15);
    text-shadow: var(--box-text-shadow);
  }
  .box.sheet {
    background-image: linear-gradient(to bottom, rgba(0,0,0, 0.7), transparent 5em);
  }
  .logs dl dt,
  .system.enter b,
  .system.exit b,
  .box:not(#status):not(.sheet) .chara-name {
    background-color: var(--chara-name-bg);
  }
  .logs dl dt {
    border-radius: .5em;
  }
  .no-text-shadow .box {
    text-shadow: none;
  }
  .no-text-shadow #status #status-body > dl > dt {
    text-shadow: var(--box-text-shadow);
  }
  .no-text-shadow .logs dl dt:empty {
    background: none;
  }
  /* リンク */
  a { text-decoration: none; }
  .link,
  a[href]:link    {
    color: #00ffff;
  }
  a[href]:visited { color: #77ccff; }
  .link:hover,
  a[href]:hover   { color: #ffffff; }

  /* 他 */
  input, textarea, select, button, .button, .dice-button, .toggle-button+label {
    background: rgba(30,35,50,0.8);
    color: #fff;
  }
  .chat-palette {
    background: rgba(20,25,30,0.8);
  }
  input:focus,textarea:focus,select:focus {
    background: rgba(55,60,65,0.8);
  }
  button, .button {
    background: linear-gradient(145deg, rgba(50,60,80,0.8), rgba(30,40,60,0.8));
    color: #dde;
  }
  summary:hover,
  label:hover {
    color: #ffaa00;
  }
  label input+b {
    font-style: normal;
    color: #8899aa;
  }
  label input:checked+b {
    color: inherit;
  }
  label:hover input+b {
    color: inherit !important;
  }
  .chat-palette b {
    color: #ee9999;
  }
  .chat-palette i.dice-param {
    color: #cc99ee;
    font-style: normal;
  }
  .chat-palette i.palette-param {
    color: #99ccee;
    font-style: normal;
  }
  .chat-palette i.unit-status {
    color: #99eecc;
    font-style: normal;
  }
}

/* // カラー設定：チャット
---------------------------------------------------------------------------------------------------- */
/* 秘話 */
.secret {
  background-color: rgba(255,0,50,0.1);
}
.secret.openlater {
  background-color: rgba(0,170,190,0.1);
}
/* ベース */
.form-name {
  text-shadow: inherit;
}
.chat .form-name {
  color: inherit;
}
.chat .form-name option {
  background-color: #000;
  font-family: inherit;
  font-weight: inherit;
}
.box #main-name1 {
  text-shadow: inherit;
}
.float-box {
  background: var(--float-bg-color);
  border: .1rem solid #777;
  box-shadow: 0 0 .5em .1em #000;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

/* トピック */
#topic-value {
  color: #bfc;
}
/* ラウンド */
#round-value {
}
/* ステータス */
.gauge i { background: #7ad; }
.gauge i::before { background: linear-gradient(to left, #ff5, transparent); }
dd[data-stt*="HP"]   .gauge[data-signal="safe"]      i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="safe"]      i,
dd[data-stt*="体力"] .gauge[data-signal="safe"]      i,
dd[data-stt*="耐久"] .gauge[data-signal="safe"]      i { background: #095; }
dd[data-stt*="HP"]   .gauge[data-signal="caution"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="caution"]   i,
dd[data-stt*="体力"] .gauge[data-signal="caution"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="caution"]   i { background: #890; }
dd[data-stt*="HP"]   .gauge[data-signal="warning"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="warning"]   i,
dd[data-stt*="体力"] .gauge[data-signal="warning"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="warning"]   i { background: #e80; }
dd[data-stt*="HP"]   .gauge[data-signal="danger"]    i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="danger"]    i,
dd[data-stt*="体力"] .gauge[data-signal="danger"]    i,
dd[data-stt*="耐久"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="HP"]   .gauge[data-signal="knockdown"] i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="体力"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="耐久"] .gauge[data-signal="knockdown"] i { background: #900; }

dd[data-stt*="MP"]   .gauge i,
dd[data-stt*="ＭＰ"] .gauge i { background: #42e; }

dd[data-stt*="侵蝕"] .gauge[data-signal="safe"]      i { background: #2ae; }
dd[data-stt*="侵蝕"] .gauge[data-signal="notice"]    i { background: #38e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="attention"] i { background: #46e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="caution"]   i { background: #83c; }
dd[data-stt*="侵蝕"] .gauge[data-signal="warning"]   i { background: #b18; }
dd[data-stt*="侵蝕"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="critical"]  i { background: #a00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"]     i { background: #605; }
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"]     i { background: #005; }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"]   i { background: #000; box-shadow: inset 0 0 .3rem #808; }

dd[data-stt*="侵蝕"] .gauge[data-signal="critical"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"] i::before { background: linear-gradient(to left, #f00, transparent); }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"] i::before { background: none; }

/* チャットログ */
.tab-group {
  background-image: linear-gradient(to right, rgba(0,0,0, 0.4), transparent);
}
.tab-group .option:hover {
  background-color: rgba(0,0,0, 0.8);
}
@media (max-width: 600px) {
  .tab-group {
    background-color: rgba(0,0,0, 0.3);
  }
}
.tablist {
  background-color: #0004;
}
.tablist li.bold {
  background-color: #7895;
  color: #fc0;
}
.logs-font {
  color: var(--logs-font-color);
}
.logs dl {
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-faint);
}
.logs dl::before,
.logs dl::after {
  color: hsla(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--base-font-color-lightness),
    0.5
    );
}
.logs dl dd.comm mark {
  color: #ff9900;
  font-weight: bold;
  background: transparent;
}
.logs dl dd.info {
  font-size: 85%;
  color: #acd;
  background: rgba(0,0,0,0.2);
}
.logs dl:hover {
  background-color: rgba(0,0,0, 0.3);
}
.logs dl dd:hover {
  box-shadow: 0 0 0 .1rem rgba(100,200,255,0.2) inset;
}
/* チャットログ：リンク */
.logs a[href],
#topic a[href] {
  text-decoration: underline;
  text-decoration-thickness: .2em;
  text-decoration-color: rgba(50,180,255,0.5);
  text-underline-offset: .1em;
  text-decoration-skip-ink: none;
}
.logs a[href]::before, 
#topic a[href]::before {
  content: "\e89e";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  font-size: .8em;
  line-height: 1;
  color: #fff;
}
/* チャットログ：システムメッセージ */
.logs dl.system {
  color: #fff;
  background-color: rgba(50,60,80,0.6);
}
.logs dl.system dd.comm {
  font-weight: bold;
}
.logs dl.system dd.comm::before {
  line-height: 1;
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  text-align: center;
  vertical-align: text-bottom;
}
.logs dl.system.enter  dd.comm::before { color: #fd9; content: "\ea77"; }
.logs dl.system.exit   dd.comm::before { color: #89a; content: "\e9ba"; transform: scaleX(-1); }
.logs dl.system.topic  dd.comm::before { color: #7f7; content: "\f88d"; }
.logs dl.system.memo   dd.comm::before { color: #7f7; content: "\f1c6"; }
.logs dl.system.ready  dd.comm::before { color: #f77; content: "\e6b1"; }
.logs dl.system.round  dd.comm::before { color: #f90; content: "\eb49"; }
.logs dl.system.change dd.comm::before { color: #f55; content: "\f1b8"; }
.logs dl.system.bgm    dd.comm::before { color: #f8c; content: "\e405"; }
.logs dl.system.bg     dd.comm::before { color: #c8f; content: "\e1bc"; }

.logs dl.system  dd.info { color: #cdf; }
.logs dl.system.round  dd.info { color: #f90; font-weight: bold; }
.logs dl.system.topic  dd.info { color: #bfc; font-weight: bold; }
.logs dl.system.memo   dd.info { color: #ded; }
.logs dl.system.change dd.info { color: #f99; }

.logs dl.system.exit b,
.logs dl.system.enter b {
  margin: 0 .2em;
  padding: .1em .2em;
  border-radius: .5rem;
}

.logs dl.system.bgm dd.info small { color: #b9a; }
.logs dl.system.bgm dd.info small::before {
  content: '\e050';
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  margin: auto .1em auto .5em;
  line-height: 1;
  vertical-align: text-bottom;
}
.logs dl.bgm dd.info a.link-yt {
  background: none;
}
.logs dl.bgm dd.info a.link-yt::before {
  content: "\e41b";
  display: inline-block;
  margin-left: .5em;
  transform: scale(1.6, 1.4);
  vertical-align: text-bottom;
  text-shadow: none;
  color: #f00;
}
.logs dl.bgm dd.info .link-yt:hover::before {
  color: #fff;
}
/* チャットログ：ユニット操作 */
.logs dl dd.info.unit::before {
  color: #07d;
}
.logs dl dd.info.unit {
  color: #acf;
}
.logs dl dd.info.unit i {
  opacity: 0.70;
  font-style: normal;
}
/* チャットログ：チョイス */
.logs dl dd.info.choice::before {
  color: #fe0;
}
.logs dl dd.info.choice {
  color: #db5;
}
.logs dl dd.info.choice > b,
.logs dl dd.info.choice > s {
  display: inline-block;
}
.logs dl dd.info.choice > b.result {
  margin: 1px .25em;
  padding: 0 .25em;
  border-width: 0px 1px;
  border-style: solid;
  border-color: #eda7;
  border-radius: .5em;
  font-size: 94%;
  font-weight: normal;
  font-family: inherit;
  vertical-align: top;
  background-color: #fe01;
  color: #feb;
}
.logs dl dd.info.choice s {
  color: #888;
  text-decoration: none;
}
.logs dl dd.info.choice b.result {
  background-color: #db52;
  padding: 0 0.25em;
}
/* チャットログ：ダイス */
.logs dl dd.info.dice::before {
  color: #f33;
}
.logs dl dd.info.dice {
  color: #e77;
  letter-spacing: 0.1rem;
}
.logs dl dd.info.dice i {
  margin-left: .2rem;
  font-size: 90%;
  font-style: normal;
  opacity: 0.85;
}
.logs dl dd.info.dice b,
.logs dl dd.info.dice strong {
  color: #f55;
}
.logs dl dd.info.dice em {
  color: #eb0;
  font-weight: bold;
  -webkit-text-emphasis: none;
          text-emphasis: none;
}
.logs dl dd.info.dice em.fail,
.logs dl dd.info.dice strong.fail {
  color: #888;
  font-weight: bold;
}
.logs dl dd.info.dice .division {
  filter: grayscale(50%);
}

/* チャットログ：威力表 */
.logs dl dd.info.dice[data-game="sw"] { color: #ea6; }
.logs dl dd.info.dice[data-game="sw"] em { color: #ee8f61; }
.logs dl dd.info.dice[data-game="sw"] em em { color: #ee875c; }
.logs dl dd.info.dice[data-game="sw"] em em em { color: #ee7d57; }
.logs dl dd.info.dice[data-game="sw"] em em em em { color: #ee7452; }
.logs dl dd.info.dice[data-game="sw"] em em em em em { color: #ee6a4d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em { color: #ee6047; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em { color: #ee5542; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em { color: #ee4a3d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em { color: #ee3f38; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="sw"] em.fail { color: #888; }

/* チャットログ：ダブルクロス */
.logs dl dd.info.dice[data-game="dx"] { color: #9999ff; }
.logs dl dd.info.dice[data-game="dx"] em { color: #a18feb; }
.logs dl dd.info.dice[data-game="dx"] em em { color: #aa85d7; }
.logs dl dd.info.dice[data-game="dx"] em em em { color: #b27bc2; }
.logs dl dd.info.dice[data-game="dx"] em em em em { color: #bb71ae; }
.logs dl dd.info.dice[data-game="dx"] em em em em em { color: #c36699; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em { color: #cc5c85; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em { color: #d45271; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em { color: #dd485c; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em { color: #e53e48; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="dx"] em.fail { color: #888; }

/* チャットログ：タイムスタンプ */
.logs dl dd:after {
  color: #5afa;
  letter-spacing: 0rem;
  text-shadow: none;
}
/* チャットログ：編集済 */
.logs dl dd span.rewrited {
  position: absolute;
  top: auto;
  right: -.5rem;
  bottom: 0;
  color: var( --base-font-color);
  font-size: 90%;
  line-height: 1;
  text-shadow: none;
  opacity: 0.2;
  animation-name: rewrited-mark-fade-in;
  animation-duration: 0.1s;
  animation-timing-function: ease-out;
}
@keyframes rewrited-mark-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.2;
  }
}
.logs dl dd span.rewrited::before {
  content: "\e9a2";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
}
/* チャットログ：水平線 */
.logs hr {
  margin: .75em 0;
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  box-shadow: var(--box-text-shadow);
}
.no-text-shadow .logs hr {
  text-shadow: none;
}
/* チャットログ：見出し */
.logs h1 {
  position: relative;
  margin: 2em 0;
  padding: 1em 0;
  border-width: 3px 0;
  border-style: solid;
  border-color: var(--base-font-color);
  text-align: center;
  font-size: 200%;
  font-family: "Zen Old Mincho","游明朝","Yu Mincho","游明朝体","YuMincho" !important;
  line-height: 1;
}
.logs h1 span {
  line-height: 1 !important;
}
.logs h1::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(-.7em + 3px);
  height: .7em;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to bottom, var(--border-color), transparent);
  pointer-events: none;
}
.logs h1::after {
  content: "";
  position: absolute;
  inset: calc(-.7em + 3px) 0 auto;
  height: .7em;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to top, var(--border-color), transparent);
  pointer-events: none;
}
.logs h2 {
  position: relative;
  margin: 1.5em 0 .5em;
  padding: .6em;
  border-width: 3px 0 3px 0px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-color: #fff1;
  font-size: 150%;
  line-height: 1;
}
.logs h2::before {
  content: "";
  position: absolute;
  inset: 2px 0 2px;
  border-width: 1px 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff7, transparent);
  border-image-slice: 1;
  pointer-events: none;
}
.logs .center h2 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
}
.logs .center h2::before {
  border-image: linear-gradient(to right, transparent, #fff7, transparent);
  border-image-slice: 1;
}
.logs h3 {
  position: relative;
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 130%;
  line-height: 1;
}
.logs h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-width: 2px 0 0;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color),  transparent 70%);
  border-image-slice: 1;
  pointer-events: none;
}
.logs .center h3 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs .center h3::before {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
}
.logs h4 {
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 110%;
  line-height: 1;
}
.logs .center h4 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs h5 {
  margin: 1em 0 .5em;
  padding: .4em;
  background-image: linear-gradient(to right, #fff1, transparent);
  font-size: 100%;
  line-height: 1;
}
.logs .center h5 {
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs h6 {
  width: max-content;
  margin: 1em 0 .5em;
  padding: .2em 1.7em .2em .2em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff5, #fff4, #fff3, transparent);
  border-image-slice: 1;
  font-size: 100%;
  line-height: 1;
}
.logs .center h6 {
  margin-left: auto;
  margin-right: auto;
  padding: .2em 1.7em .2em;
  border-image: linear-gradient(to right, transparent, #fff3, #fff5, #fff3, transparent);
  border-image-slice: 1;
}
#memo-view h1 { font-size: 130%; }
#memo-view h2 { font-size: 125%; }
#memo-view h3 { font-size: 120%; }
#memo-view h4 { font-size: 105%; }
/* チャットログ：テーブル */
.logs table,
#topic table {
  margin: .5em 0;
  border-collapse: collapse;
  border-style: hidden;
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--border-color-deep);
}
#topic table {
  margin: 0 0;
}
.logs table thead th,
.logs table thead td,
#topic table thead th,
#topic table thead td {
  padding: 0 .5em;
  border-width: 0;
  font-size: 90%;
}
.logs table thead tr,
#topic table thead tr {
  background: rgba(100,127,200,0.3);
}
.logs table tbody th,
.logs table tbody td,
#topic table tbody th,
#topic table tbody td {
  padding: 0 .5em;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color-pale);
}
.logs table tbody tr:nth-child(even) {
  background: rgba(127,127,127,0.15);
}
/* チャットログ：リスト */
.logs ul,
#topic ul {
  padding-left: 1.5em;
  list-style-type: square;
}

/* // カラー設定：サイドバー
---------------------------------------------------------------------------------------------------- */
/* ステータス欄 */
#status #status-body > dl dl dt {
  color: #bce;
}
.sheet-body .status-remocon-sub ul:nth-child(odd){
  background: rgba(127,127,127,0.45);
}
.sheet-body .status-remocon-sub ul:nth-child(even){
  background: rgba(127,127,127,0.1);
}

/* // デフォルト設定：ログ
---------------------------------------------------------------------------------------------------- */
/* ログ */
.logs:empty::before {
  content: 'ログがありません';
}
#topic-value:empty::before {
  content: 'トピック';
  opacity: 0.3;
}
/* ステータス */
#status-body:empty::before {
  content: 'ステータス';
  opacity: 0.3;
}
/* 共有メモ */
#memo-list:not(:has(li:not(.removed)))::before {
  content: '共有メモ';
  opacity: 0.3;
}
/* // Material Symbok
---------------------------------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-size: 1.2em;
  vertical-align: text-bottom;
  font-variation-settings: 'wght' 300, 'FILL' 0;
}
.material-symbols-outlined i {
  display: inline-block;
  font-size: 0px;
  opacity: 0;
}
summary .material-symbols-outlined {
  font-variation-settings: 'wght' 500, 'FILL' 1;
}
.s-icon {
  display: inline-block;
  position: relative;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  text-shadow: none;
}
.s-icon i {
  display: inline-block;
  color: transparent;
  font-style: normal;
  font-size: 10%;
}
.s-icon::after,
.s-icon::before {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'wght' 300, 'FILL' 1;
  font-style: normal;
  text-shadow: var(--box-text-shadow);
}
.no-text-shadow .s-icon::after,
.no-text-shadow .s-icon::before {
  text-shadow: none;
}
.s-icon.passive::before{ content: "\ef4a"; font-variation-settings: 'FILL' 0; }
.s-icon.setup::before  { content: "\e86b"; font-variation-settings: 'FILL' 0; }
.s-icon.major::before  { content: "\e037"; transform: scale(1.2); }
.s-icon.minor::before  { content: "\e01f"; transform: scaleY(1.4); }
.s-icon.active::before { content: "\e625"; font-variation-settings: 'FILL' 0; transform: scaleX(-1) }

/* // カラーピッカー
---------------------------------------------------------------------------------------------------- */
body .pcr-app {
  background-color: #000e;
}

/* // スクロールバー
---------------------------------------------------------------------------------------------------- */
.pcr-app ::-webkit-scrollbar,
.box::-webkit-scrollbar,
.box ::-webkit-scrollbar,
.float-box::-webkit-scrollbar,
.float-box ::-webkit-scrollbar,
.credit ::-webkit-scrollbar {
  width: .8rem;
  height: .8rem;
}
.pcr-app ::-webkit-scrollbar-track,
.box::-webkit-scrollbar-track,
.box ::-webkit-scrollbar-track,
.float-box::-webkit-scrollbar-track,
.float-box ::-webkit-scrollbar-track,
.credit ::-webkit-scrollbar-track {
  border-radius: .8rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
}
.pcr-app ::-webkit-scrollbar-thumb,
.box::-webkit-scrollbar-thumb,
.box ::-webkit-scrollbar-thumb,
.float-box::-webkit-scrollbar-thumb,
.float-box ::-webkit-scrollbar-thumb,
.credit ::-webkit-scrollbar-thumb {
  background-color: rgba(150, 150, 150, .5);
  border-radius: 10px;
}
.pcr-app,
.box,
.box *,
.float-box,
.float-box *,
.credit * {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 150, 150, .5) rgba(0, 0, 0, .5);
}