@charset "UTF-8";

* {
//  font-size: 100%;
  font-size: 15px;
  line-height: 130%;
}

/* GROBAL --------------------*/

body {
  margin: 0px;
  padding: 0px;
  color: #fff;
  background: #567;
  text-align: center;
/*  background-image: url('/img/background.png'); */
  background-image: url('/img/back_moonwolf_left.png');
  background-attachment: fixed;
  background-size: cover;
}

div, p, form {
  margin: 0px;
  padding: 0px;
}

a:link {
  color: #0ff;
}

a:visited {
  color: #08f;
}

a[href]:active {
  color: #f00;
}

a[href]:hover { /* CSS2? */
  color: #fff;
}

div.formpl_content > a:link {
  color: #00f;
}

div.formpl_content > a:visited {
  color: #008;
}

img {
  border-style: none;
}

h1 {
  margin: 0px 0px 8px 0px;
  padding: 0px;
  text-align: center;
}

h2 {
  margin: 0px 0px 16px 0px;
  padding: 2px 8px 2px 8px;
  border: solid #aad;
  border-width: 0 0 1px 8px;
  font-size: 120%;
  font-weight: normal;
}

/* 見出し(h2)の頭に●を付ける(デザインによっては見出しが目立たなくなるため)。昼・夜・四季・ゆるゆるは themes/hiru.css が自前の丸に置き換える */
h2::before {
  content: "● ";
}

/* 小見出し(h3)の頭に◆を付ける。発言者名などの h3.mesname は対象外(村ログの名前の前には付けない)。
   昼・夜・四季・ゆるゆるでは hiru.css の見た目でも付く(h3 の ::before は hiru.css で上書きしていない) */
h3:not(.mesname)::before {
  content: "◆ ";
}

/* 見出しの中のリンク・アンカーは、上の * { font-size: 15px } で小さくならないよう見出しの大きさを引き継ぐ */
h2 a, h3 a {
  font-size: inherit;
}

h3 {
  margin: 0px 0px 16px 0px;
  padding: 2px 8px 2px 8px;
  border: solid #aad;
  border-width: 0 0 1px 8px;
  font-size: 120%;
  font-weight: normal;
}

h4 {
  margin: 0px 0px 6px 0px;
  padding: 2px 8px 2px 8px;
  border: solid #aad;
  border-width: 0 0 1px 8px;
  background-color: #c66;
  font-size: 120%;
  font-weight: normal;
}

textarea {
  width: 100%;
  line-height: 115%;
}

input {
  line-height: 115%;
}
input[type="button"],input[type="submit"] {
    width: 140px;
}
input#cntvillager {
	background-color: #b3b3b3;
}

th {
  padding: 4px;
  font-weight: normal;
  text-align: left;
}

td {
  padding: 4px;
}

address {
  margin: 0px;
  padding: 4px;
  text-align: right;
  font-size: smaller;
  clear: both;
}

/* BODY FRAME --------------------*/

/* 外枠 ----------*/
.outframe {
  margin: 0px auto 0px auto;
/*  margin: 0px 10% 0px auto; */
  padding: 0px;
  color: #fff;
  width: auto;       /* 旧: 700px固定。スマホでは画面幅に収める */
  max-width: 800px;
}

/* フィルタを左に配置した時の外枠 ----------*/
.outframe_navimode {
  margin: 0px 10% 0px auto;
  padding: 0px;
  color: #fff;
  text-align: right;
  width: 700px;
}

/* 内枠 ----------*/
.contentframe {
  margin: 0px;
  padding: 0px;
  text-align: left;
  background: rgba(96,32,0,0.5);
}

/* フィルタを左に配置した時の内枠 ----------*/
.contentframe_navileft {
  margin: 0px;
  padding: 0px;
  text-align: left;
  background: rgba(0,0,0,0.4);

  float: right;
}

/* 内枠の中身（タイトル画像は含まない） ----------*/
.inframe {
  margin: 0px 0px 0px 0px;
  padding: 0px 16px 10px 16px;
}

/* SAY FILTER --------------------*/

/* フィルタ（下配置時）----------*/
div.sayfilter {
  margin: 0px auto 0px auto;
  padding: 0px;
  text-align: center;
  font-size: 100%;
  border: 2px dashed #f0f;
  color: #000;
/*  background: #cca; */
  background: rgba(80, 80, 96, 0.4);
  width: 300px;
}

/* フィルタ（左配置時）----------*/
div.sayfilterleft {
  margin: 0px;
  padding: 0px;
  text-align: left;
  font-size: smaller;
  border: none;
  background: rgba(96,96,96,0.4);
  width: 300px;

  border: 2px dashed #f0f;
  color: #000;
  float: left;
  top: 100px;
  left: 0px;
}

/* フィルタの中身 ----------*/
span#showfilter {
  height:100%;
  width:120px;
  float:left;
  background-color:#fff;
  writing-mode: vertical-rl;
  text-align: center;
}
span#insayfilter {
  margin: 0px;
  padding: 8px 0px 8px 0px;
  text-align: left;
  overflow: auto;
  float: right;
  width: 278px;
}

/* フィルタの見出し ----------*/
.sayfilter_heading {
  margin: 0px 0px 16px 0px;
  padding: 2px 8px 2px 8px;
  font-weight: normal;
  border: solid #fff;
  border-width: 1px 0px 1px 0px;
  color: #fff;
  background: #458;
}

/* フィルタ固定・配置ボタン ----------*/
.sayfilter_button {
  float: right;
  display: none;
}

/* フィルタ小見出し（広げた時）----------*/
.sayfilter_caption_enable {
  margin: 0px;
  padding: 1px 2px 1px 2px;
  font-weight: normal;
  border: solid #fff;
  border-width: 1px 0px 1px 0px;
  color: #fff;
  background: #458;
}

/* フィルタ小見出し（畳んだ時）----------*/
.sayfilter_caption_disenable {
  margin: 0px;
  padding: 1px 2px 1px 2px;
  font-weight: normal;
  border: solid #fff;
  border-width: 1px 0px 1px 0px;
  color: #fff;
  background: #444;
}

/* フィルタ選択欄枠----------*/
.sayfilter_content {
  margin: 0px;
  text-align: left;
  border: none;
  font-weight: normal;
}

/* フィルタ選択欄（有効時）----------*/
.sayfilter_content_enable {
  color: #fff;
  background: #008;
  width: 100%;
}

/* フィルタ選択欄（無効時）----------*/
.sayfilter_content_disenable {
  color: #fff;
  background: #444;
  width: 100%;
}

/* フィルタ選択欄内部枠 ----------*/
.sayfilter_incontent {
  padding: 1px 2px 1px 2px;
}

/* フィルタ一括操作用ボタン ----------*/
.sayfilter_button_lump {
  border: ridge #444;
  color: #fff;
  background: #444;
  width: 100%;
}

/* BLOCK --------------------*/

/* 段落全般 ----------*/
.paragraph {
  margin: 0px 0px 16px 0px;
}

/* ログイン欄 ----------*/
.login {
  margin: 0px 0px 8px 0px;
  text-align: right;
}

/* 日付リンク ----------*/
.turnnavi {
  margin: 0px 0px 16px 0px;
  padding: 0px 0px 0px 16px;
  color: #999;
}

/* ページリンク ----------*/
.pagenavi {
  margin: 0px 32px 16px 32px;
  padding: 0px 0px 0px 16px;

  color: #999;
}

/* 非ログイン時注意表示 ----------*/
.infonologin {
  margin: 0px 0px 16px 0px;
  padding: 0px 0px 0px 16px;
  color: #fff;
}

/* 全表示リンク ----------*/
.row_all {
  margin: 0px 0px 16px 0px;
  padding: 0px;
}

/* 表示行数・表示順序変更フォーム ----------*/
.viewform {
  margin: 0px 0px 16px 0px;
  padding: 0px;
  text-align: right;
}

/* IMAGE AND TEXT LAYOUT --------------------*/

/* 発言のキャラ画像 ----------*/
.mes_chrimg {
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  /* 画像ぴったりの幅に縮めて中央に置く(飾りの右肩・左肩などが画像の大きさに合うように) */
  width: fit-content;
  margin: 0 auto;
}
.mes_chrimg > img { display: block; }

/* 発言の文章部分 ----------*/
.mes_text {
  padding: 4px;
  vertical-align: top;
}

/* 発言の文章部分（等幅）----------*/
.mes_text_monospace {
  padding: 4px;
  vertical-align: top;
  font-family: monospace;
}

/* 水平線（通常は非表示）----------*/
.invisible_hr {
  display: none;
}

/* SAY --------------------*/

/* システム表示 ----------*/
.info,.infosp {
  margin: 0px 0px 16px 0px;
  padding: 8px;
  border: 1px solid #fff;
  text-align: center;
  font-weight: bold;
  background: #000;
  border-radius: 14pt;
}
.info {
  border-color: #fff;
  color: #fff;
}

/* システム表示（不可視） ----------*/
.infosp {
  border-color: #aaa;
  color: #aaa;
}

/* 警告・注意表示 ----------*/
.caution {
  margin: 0px 0px 16px 0px;
  padding: 8px;
  border: 1px solid #f44;
  color: #f44;
}

/* やんわり注意表示 ----------*/
.infotext {
  color: #aaa;
}

/* 警告・注意する部分（インライン） ----------*/
.cautiontext {
  font-weight: bold;
  color: #f44;
}

/* 発言者名 ----------*/
.mesname {
  margin: 0px;
  padding: 4px;
  font-size: 100%;
  font-weight: bold;
  border-style: none;
  width: 90%;
  border-bottom: 1px dotted #cbcbcb;
}

/* 発言内容 ----------*/
div.mes_nom, div.mes_think, div.mes_wolf, div.mes_grave, div.mes_grave, div.mes_maker, div.mes_admin, div.mes_del, div.mes_que, div.mes_sympa, div.mes_bat, div.mes_telepathy, div.mes_bondsym, div.mes_wisper, div.mes_watch, div.mes_inference
{
  margin: 0px 0px 12px 0px;
  padding: 4px;
}
.mesarea {
    /* ポートレイトの横の残りの幅いっぱい。固定幅(545px)・右寄せだと、画面を広げたときにポートレイトとの間が空く
       (2026-10-16 いっちさん)。overflow:hidden だと欄の上の見出し(.arealabel)が切れるので flow-root */
    float: none;
    width: auto;
    display: flow-root;
    word-break: break-all;
}

/* 削除済み発言 ----------*/
.mes_del {
  border: 1px solid #fff;
  color: #fff;
  background: #000;
}

/* 未確定発言 ----------*/
.mes_que {
  border: 1px solid #442;
  color: #fff;
  background: #553;
}

/* 通常発言 ----------*/
.mes_nom, .mes_inference {
  border: 3px outset #fff;
  color: #fff;
/*  background: #442; */
  background: #553;
}

/* 独り言 ----------*/
.mes_think {
  border: 1px solid #fff;
  color: #fff;
  background: #444;
}

/* 囁き ----------*/
.mes_wolf {
  border: 1px solid #fff;
  color: #fff;
  background: #622;
}

/* 死者のうめき ----------*/
.mes_grave {
  border: 1px solid #fff;
  color: #fff;
  background: #224;
}

/* 村建て人発言 ----------*/
.mes_maker {
  border: 2px dashed #000;
  color: #fff;
  background: #464;
}

/* 管理人発言 ----------*/
.mes_admin {
  border: 2px dashed #000;
  color: #fff;
  background: #556;
}

/* 共鳴 ----------*/
.mes_sympa {
  border: 1px solid #fff;
  color: #fff;
  background: #350;
}

/* 念話 ----------*/
.mes_bat {
  border: 1px solid #fff;
  color: #fff;
  background: #055;
}
/* 絆のテレパシー（同じ絆の役職の人だけ）----------*/
.mes_telepathy {
  border: 1px solid #fff;
  color: #fff;
  background: #503;
}

/* 絆のシンパシー（絆の役職の全員）----------*/
.mes_bondsym {
  border: 1px solid #fff;
  color: #fff;
  background: #430;
}
/* 秘話（送った人と宛先の人だけ）----------*/
.mes_wisper {
  border: 1px solid #fff;
  color: #fff;
  background: #234;
}
/**************************************************************************************/
/* 見物者発言 ----------*/
.mes_watch {
  border: 1px solid #f0f;
  color: #fff;
  background: #122;
}
/**************************************************************************************/

/* メモ ----------*/
.memo {
  margin: 0px 0px 16px 0px;
  padding: 4px;
  color: #fff;
  background: #7e7e5a;
  border: 2px dashed #000;
  width: 100%;
}

/* メモの種類ごとの行の色(通常と秘密は色なし。2026-10-20 いっちさん) ----------*/
.memo tr.memo_anonymous { background: #8c8c8c; }
.memo tr.memo_timed { background: #6288a8; }
.memo tr.memo_daily { background: #6d996d; }

/* メモの左側 ----------*/
.memoleft {
  border-style: none dashed solid none;
  border-width: 0px 1px 1px 0px;
  border-color: #000;
  border-collapse: collapse; /* CSS2? */
  width: 30%;
}

/* メモの右側 ----------*/
.memoright {
  border-style: none none solid none;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
  border-collapse: collapse; /* CSS2? */
  width: 65%;
}

/* 発言の日付 ----------*/
.mes_date {
  font-size: 90%;
  text-align: right;
}

/* アクション ----------*/
.action_nom {
  margin: 0px 0px 16px 0px;
  padding: 4px 4px 4px 14px;
  border: 1px solid #fff;
  color: #fff;
/*  background: #442; */
  background: #553;
  height: 40px;
  vertical-align: middle;
}

/* しおり ----------*/
.action_bm {
  margin: 0px 0px 16px 0px;
  padding: 8px;
  border: 1px solid #fff;

  font-weight: bold;
  color: #fff;
  background: #a8505a; /* しっとりした紅。明るいテーマでも白文字が読める */
}

.action_type {

}

/* FORM PLAYER --------------------*/

/* 発言入力欄の外枠 ----------*/
.formpl_frame {
  margin: 0px 0px 12px 0px;
}

/* 発言入力欄（共通） ----------*/
.formpl_common {
  /* 色は変数(テーマCSSで body.theme-xxx .formpl_common { --formpl-bg: … } のように上書きする) */
  --formpl-bg: #bb9;
  --formpl-border: #ff0;
  --formpl-fg: #000;
  margin: 30px 0px 4px 0px;
  padding: 4px;
  border: 1px solid var(--formpl-border);
  color: var(--formpl-fg);
/*  background: #cca; */
  background: var(--formpl-bg);
}
span.arealabel {
  position: relative;
  top: -31px;
  left: 5px;
  font-size: 15pt;
  font-style: italic;
  font-weight: bold;
  float: inline-end;
  /* タブの地色・文字色は、入っている枠(.formpl_common / .formpl_xxx)の変数を使う */
  background-color: var(--formpl-bg, #bb9);
  border: 1px solid #fff;
  border-bottom: 0px;
  color: var(--formpl-fg, #000);
  padding: 0px 20px 0px 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

/* 発言入力欄のキャラ画像 ----------*/
.formpl_chrimg {
  padding: 4px;
  text-align: center;
  vertical-align: middle;
}

/* 発言入力欄の項目 ----------*/
.formpl_content {
  padding: 4px;
}

/* アクション入力欄 ----------*/
.formpl_action {
  padding: 4px;
/*  font-size: 100%; */
}

/* アクション自由入力欄 ----------*/
.formpl_actiontext {
  width: 80%;
}

/* 能力者欄（共有）----------*/
.formpl {
  margin: 0px 0px 4px 0px;
  padding: 3px;
  border: 2px solid;
}

/* 能力者欄のタブ見出し(新版で追加。2026-10-06 いっちさん)。
   見た目は span.arealabel と同じ。地色・文字色・枠線は役職ごとの枠(.formpl_xxx)の変数
   --formpl-bg / --formpl-fg / --formpl-border を使う(テーマCSSで上書きできる)。
   右のキャラ画像を押しのけないよう、枠の上に重ねて置く ----------*/
.formpl_tabbed {
  position: relative;
  margin-top: 34px;
}
.formpl_tabbed > span.arealabel {
  position: absolute;
  top: auto;
  bottom: 100%;
  right: -2px;
  left: auto;
  float: none;
  border: 2px solid var(--formpl-border);
  border-bottom: 0px;
}

/* 秘話欄（通常発言と間違えないよう、ログの秘話と同じ紺色。2026-10-14 いっちさん）----------*/
.formpl_whisper {
  --formpl-bg: #234;
  --formpl-border: #fff;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（おまかせ）----------*/
.formpl_undef {
  --formpl-bg: #000;
  --formpl-border: #ff0;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（ランダム）----------*/
.formpl_random {
  --formpl-bg: #000;
  --formpl-border: #0ff;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（村人）----------*/
.formpl_vil {
  --formpl-bg: #bb9;
  --formpl-border: #ff0;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
/*  background: #cca; */
  background: var(--formpl-bg);
}

/* 能力者欄（人狼）----------*/
.formpl_wolf {
  --formpl-bg: #caa;
  --formpl-border: #f00;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（占い師）----------*/
.formpl_seer {
  --formpl-bg: #db6;
  --formpl-border: #fe0;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（霊能者）----------*/
.formpl_medium {
  --formpl-bg: #8bd;
  --formpl-border: #0ef;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（狂人）----------*/
.formpl_possess {
  --formpl-bg: #ccc;
  --formpl-border: #fff;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（狩人）----------*/
.formpl_guard {
  --formpl-bg: #aca;
  --formpl-border: #dfd;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（共有者）----------*/
.formpl_fm {
  --formpl-bg: #dd8;
  --formpl-border: #ff0;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（ハムスター人間）----------*/
.formpl_hamster {
  --formpl-bg: #622;
  --formpl-border: #fcf;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（Ｃ国狂人）----------*/
.formpl_cpossess {
  --formpl-bg: #ccc;
  --formpl-border: #f00;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（聖痕者）----------*/
.formpl_stigma {
  --formpl-bg: #dd8;
  --formpl-border: #f88;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（狂信者）----------*/
.formpl_fanatic {
  --formpl-bg: #ccc;
  --formpl-border: #00f;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（共鳴者）----------*/
.formpl_sympathy {
  --formpl-bg: #cc8;
  --formpl-border: #f00;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（コウモリ人間）----------*/
.formpl_werebat {
  --formpl-bg: #622;
  --formpl-border: #fcc;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（呪狼）----------*/
.formpl_cwolf {
  --formpl-bg: #caa;
  --formpl-border: #fff;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（智狼）----------*/
.formpl_intwolf {
  --formpl-bg: #400;
  --formpl-border: #f00;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（ピクシー）----------*/
.formpl_trickster {
  --formpl-bg: #622;
  --formpl-border: #ffc;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（催眠術師）----------*/
.formpl_hypnotist {
  --formpl-bg: #cfc;
  --formpl-border: #ffc;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（人形遣い）----------*/
.formpl_puppeteer {
  --formpl-bg: #9fa;
  --formpl-border: #cca;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（誇大妄想狂）----------*/
.formpl_megalomania {
  --formpl-bg: #faf;
  --formpl-border: #f44;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（見物人）----------*/
.formpl_watcher {
  --formpl-bg: #122;
  --formpl-border: #f0f;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（ラブ探偵）----------*/
.formpl_lovedetective {
  --formpl-bg: #ffc0c0;
  --formpl-border: #cc9090;
  --formpl-fg: #202020;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 村開始・更新欄 ----------*/
.formpl_gm {
  margin: 0px 0px 4px 0px;
  padding: 4px;
  border: 1px solid #ff0;
  color: #000;
/*  background: #cca; */
  background: #bb9;
}

/* 村開始・更新ボタン ----------*/
.commitbutton {
  text-align: center;
}

/* 発言撤回欄 ----------*/
.saycancelframe {
  text-align: center;
}

/* 発言撤回ボタン ----------*/
.saycancelbutton {
  font-size: smaller;
}
/* 上の input[type="submit"] { width: 140px; } で「この発言を削除(20秒以内)」が
   切れるので、撤回ボタンだけ幅を文字に合わせる(新版で追加) */
input.saycancelbutton {
  width: auto;
}

/* 「戻る」リンク ----------*/
.return {
  margin: 20px 0px 20px 0px;
  text-align: center;
}
span.returntop {
  padding: 10px 150px 10px 150px;
  border: 1px solid #fff;
  border-radius: 10pt;
  background-color: #dd0;
}
/* 誤爆防止チェック欄 ----------*/
.previewsafety {
  margin: 0px 0px 8px 0px;
}

/* OTHERS --------------------*/

/* 村一覧 ----------*/
.vindex {
  margin: 0px 0px 16px 0px;
  border: 1px solid #ccc;
  border-collapse: collapse; /* CSS2? */
  width: 100%;
  background-color: #000000;
}
table.vindex>thead>tr>th,table.vindex>thead>tr>td {
	text-align:center;
	background-color: #afafaf;
	color: #404040;
}

/* 村作成画面 ----------*/
.form_vmake {
  margin: 0px 0px 16px 0px;
  padding: 4px;
  border: 1px solid #ff0;
  color: #000;
/*  background: #cca; */
  background: #bb9;
}

/* 村作成・編集ボタン ----------*/
.exevmake {
  text-align: center;
}

/* 段組（ラベル） ----------*/
.multicolumn_label {
  display: block;
  float: left;
  width: 20%;
  text-align: right;
  padding-right: 16px;
}

/* 段組（左配置） ----------*/
.multicolumn_left {
  display: block;
  float: left;
}

/* 段組（右配置） ----------*/
.multicolumn_right {
  display: block;
  float: left;
  width: 70%;
}

/* 段組（役職入力欄） ----------*/
.multicolumn_role {
  display: block;
  float: left;
  width: 20%;
  padding-right: 16px;
}

/* 段組（改行） ----------*/
.multicolumn_clear {
  clear: left;
}

/* 回り込み禁止 ----------*/
.clearboth {
  clear: both;
}
/***********************************************************************************************************/
/* アンカ自動挿入 */
.anchor {
    text-decoration: underline;
    font-weight: bold;
}
.badge {
    display: inline-block;
    color: #fff;
    background-color: #609f60;
    padding: 1.0pt 1.5pt;
    border-radius: 4pt;
    border: 0.7pt solid #ffff00;
    font-size: 8pt;
    white-space: nowrap;
}
img.gollira {
    display: inline-block;
    color: #fff;
    background-color: #609f60;
    padding: 1.0pt 1.5pt;
    border-radius: 4pt;
    border: 0.7pt solid #ffff00;
    font-size: 8pt;
    white-space: nowrap;
}
div.charlist {
    overflow-x:auto;
    width: 100%;
    background-color: #000000;
}
table.charlist {
  border-collapse: collapse; /* CSS2? */
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
table.charlist>tbody>tr>td, table.charlist>tbody>tr>th, table.charlist>thead>tr>th{
  border: 1px solid #ccc;
}
table.charlist>tbody>tr>th {
    width: 20%;
}
table.charlist>tbody>tr>th, table.charlist>thead>tr>th:nth-child(1) {
    left: 1;
    position: sticky;
    background: black;
    &:before{
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
   }
}
table.charlist>tbody>tr>td:nth-child(6){
    white-space:nowrap;
}
span.functionText {
	color: blue;
	text-decoration: underline;
}
p.vmake {
    height: 40px;
    text-align: center;
}
span.vmake {
    border: 1px solid;
    padding: 13px 130px;
    border-radius: 8pt;
    background-image: url(/img/makevillage.png);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-color: #70C;
    color: white;
}
span.vmake:hover {
	background-color: #C70;
}
span.vend {
    border: 1px solid;
    padding: 13px 130px;
    border-radius: 8pt;
    background-image: url(/img/makevillage.png);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-color: #C07;
    color: white;
}
span.vend:hover {
    background-color: #07C;
}
span.badgecommon {
    display: block;
    position: absolute;
    height: 80px;
    width: 60px;
}
span.gorillabadge {
    background-image: url("/img/gorillabadge.png");
    margin-top: -120px;
    margin-left: 15px;
}
span.gorillabadge80 {
    background-image: url("/img/gorillabadge.png");
    margin-top: -90px;
    margin-left: 20px;
}
span.gorillabadgesd {
    background-image: url("/img/gorillabadgesd.png");
    margin-top: -125px;
    margin-left: 10px;
    height: 78px;
    width: 78px;
}
/* 飾り(ゴリラ等)はキャラ画像の中央に置く。画像の大きさがセットごとに違っても、上・左からの固定pxだとずれるので、
   画像を包む .mes_chrimg を基準にして真ん中(左右50%、上下は少し上の40%)に寄せる */
div.mes_chrimg { position: relative; }
div.mes_chrimg span.badgecommon {
    top: 40%; /* 真ん中より少し上(10%) */
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.8); /* 大きさは80%(元は60x80などのpx固定。中心を基準に縮める) */
}
/* 飾り(リボン・勲章・帯)。span に class="badgecommon deco-(ファイル名)" を付けると、キャラ画像のその位置に出る。
   位置は画像に対する割合で、画像の大きさが違っても同じ場所に付く(.mes_chrimg が画像ぴったりの幅のため)。
   画像は /img/deco/ のSVG。大きさだけ変えたいときは width / height を上書きする */
div.mes_chrimg span.badgecommon.deco-medal-cross { background: url("/img/deco/medal-cross.svg") center / contain no-repeat; width: 40px; height: 46px; left:100%;top:0;transform:translate(-55%,-25%); }
div.mes_chrimg span.badgecommon.deco-medal-heart { background: url("/img/deco/medal-heart.svg") center / contain no-repeat; width: 40px; height: 46px; left:100%;top:0;transform:translate(-55%,-25%); }
div.mes_chrimg span.badgecommon.deco-medal-laurel { background: url("/img/deco/medal-laurel.svg") center / contain no-repeat; width: 40px; height: 46px; left:100%;top:0;transform:translate(-55%,-25%); }
div.mes_chrimg span.badgecommon.deco-medal-round-silver { background: url("/img/deco/medal-round-silver.svg") center / contain no-repeat; width: 40px; height: 46px; left:100%;top:0;transform:translate(-55%,-25%); }
div.mes_chrimg span.badgecommon.deco-medal-star-gold { background: url("/img/deco/medal-star-gold.svg") center / contain no-repeat; width: 40px; height: 46px; left:100%;top:0;transform:translate(-55%,-25%); }
div.mes_chrimg span.badgecommon.deco-ribbon-bow-cream-heart { background: url("/img/deco/ribbon-bow-cream-heart.svg") center / contain no-repeat; width: 44px; height: 44px; left:100%;top:0;transform:translate(-60%,-40%); }
div.mes_chrimg span.badgecommon.deco-ribbon-bow-pink { background: url("/img/deco/ribbon-bow-pink.svg") center / contain no-repeat; width: 44px; height: 44px; left:100%;top:0;transform:translate(-60%,-40%); }
div.mes_chrimg span.badgecommon.deco-ribbon-bow-red-dots { background: url("/img/deco/ribbon-bow-red-dots.svg") center / contain no-repeat; width: 44px; height: 44px; left:100%;top:0;transform:translate(-60%,-40%); }
div.mes_chrimg span.badgecommon.deco-ribbon-bow-teal { background: url("/img/deco/ribbon-bow-teal.svg") center / contain no-repeat; width: 44px; height: 44px; left:100%;top:0;transform:translate(-60%,-40%); }
div.mes_chrimg span.badgecommon.deco-ribbon-corner { background: url("/img/deco/ribbon-corner.svg") center / contain no-repeat; width: 44px; height: 44px; left:100%;top:0;transform:translate(-100%,0); }
div.mes_chrimg span.badgecommon.deco-ribbon-rosette { background: url("/img/deco/ribbon-rosette.svg") center / contain no-repeat; width: 44px; height: 52px; left:100%;top:0;transform:translate(-60%,-40%); }
div.mes_chrimg span.badgecommon.deco-suiri-tag { background: url("/img/deco/suiri-tag.svg") center / contain no-repeat; width: 60px; height: 24px; left:0;top:0;transform:translate(-30%,-40%); }
div.mes_chrimg span.badgecommon.deco-flower-daisy { background: url("/img/deco/flower-daisy.svg") center / contain no-repeat; width: 40px; height: 46px; left:88%;top:100%;transform:translate(-50%,-90%); }
div.mes_chrimg span.badgecommon.deco-flower-pink { background: url("/img/deco/flower-pink.svg") center / contain no-repeat; width: 40px; height: 46px; left:88%;top:100%;transform:translate(-50%,-90%); }
div.mes_chrimg span.badgecommon.deco-flower-tulip { background: url("/img/deco/flower-tulip.svg") center / contain no-repeat; width: 40px; height: 46px; left:88%;top:100%;transform:translate(-50%,-90%); }
div.mes_chrimg span.badgecommon.deco-flower-sunflower { background: url("/img/deco/flower-sunflower.svg") center / contain no-repeat; width: 40px; height: 46px; left:88%;top:100%;transform:translate(-50%,-90%); }
/***********************************************************************************************************/

/*==============================================================*/
/*popup template design*/
.popup-background{
  /*position size*/
  z-index : 100;
  height : 100vh;
  width : 100vw;

  /*design*/
  background-color: gray;
  opacity : 0.5
}
div#smilelist {
  display: none;
  position: absolute;
}
/* TOPページ 募集中の表の「役職」ポップアップ */
div.rolepopup {
  display: none;
  position: absolute;
  width: max-content;
  white-space: nowrap;
  text-align: left;
}
/* TOPページ 村一覧の中寄せの列(人数・生存者・見物人・状況・進行) */
table.vindex .vindex_center {
  text-align: center;
}
/* 終了済みの村の一覧: 勝利陣営の色(決着欄と、勝った陣営の列だけ。陣営色 .formpl_vil/.formpl_wolf/.formpl_hamster を薄くした仮の色。テーマCSSで --vres-bg 等を上書きして直す) */
table.vindex td.vres_village { --vres-bg: #e4e4cc; }
table.vindex td.vres_wolf { --vres-bg: #edd3d3; }
table.vindex td.vres_pixy { --vres-bg: #d3e3f5; }
table.vindex td.vres_bond { --vres-bg: #f6d5e3; }
table.vindex td.vres_village, table.vindex td.vres_wolf, table.vindex td.vres_pixy, table.vindex td.vres_bond {
  background: var(--vres-bg); color: var(--vres-fg, #222) !important; /* 薄い背景の上で読める暗い文字 */
}
/* この一覧のリンクは、クリック済みも未クリックと同じ色(テーマの --link。無ければクラシックの水色) */
table.vindex_finished a:visited { color: var(--link, #0ff); }
/* TOPページ 村一覧の折り返さない列(進行。「10日目」が「10日<br>目」にならないように) */
table.vindex .vindex_nowrap {
  white-space: nowrap;
}
/* TOPページ 募集中・進行中の表の列幅(2つの表で縦の線をそろえる。
   進行中の「更新」(vcol_update2) = 募集中の「更新」＋「役職」(vcol_update×2)) */
table.vindex_fixed {
  table-layout: fixed;
}
table.vindex_fixed col.vcol_name { width: 37%; }   /* 村の名前が1行で入るくらい */
table.vindex_fixed col.vcol_info { width: 6%; }
table.vindex_fixed col.vcol_count { width: 10%; }   /* 見出しの「生存者」「見物人」が折り返さないくらい */
table.vindex_fixed col.vcol_update { width: 12.5%; } /* 役職は6文字くらい */
table.vindex_fixed col.vcol_update2 { width: 25%; }
table.vindex_fixed col.vcol_status { width: 12%; }  /* 状況の「開始前（空きあり）」は2行に折り返す */
table.vindex_fixed td {
  overflow-wrap: anywhere;
}
table.vindex_fixed th {
  white-space: nowrap;
}
/* TOPページ 村一覧の「情報」列(リンクだけなので狭く) */
table.vindex .vindex_narrow {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.popup{
  /*position size*/
  width : 420px;
  z-index : 101;

  /*design*/
  overflow-x : auto;
  background-color: black;
  border-radius: 10pt;
  box-shadow: 0px 0px 3px 1px gray;
}
.popup > .close-button{
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
  /*design*/
  background-color: red;
  color : white;
}
.popup > .content{
  padding: 10px;
  text-align: center;
}


/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}

span.checkboxlabel{
  padding: 3px 7px 3px 7px;
  border: 1px solid #434343;
  border-radius: 5px;
  user-select: none;
  color: black;
}
input.type_set {
  display: none;
}
.type_set:checked + span.checkboxlabel {
  background-color: #ff2f0f;
  color: white;
}
div.mespat {
	padding: 0px 0px 10px 0px;
}
span#contact {
	position: fixed;
	top: 10px;
	width: 90px;
	left: calc(100% - 95px);
	text-align: center;
	color: #fff;
}
/* 能力者欄（独り者。村人と同じ色）----------*/
.formpl_loner {
  --formpl-bg: #bb9;
  --formpl-border: #ff0;
  --formpl-fg: #000;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}

/* 能力者欄（絆。個人陣営）----------*/
.formpl_bond {
  --formpl-bg: #622;
  --formpl-border: #ffc;
  --formpl-fg: #fff;
  border-color: var(--formpl-border);
  color: var(--formpl-fg);
  background: var(--formpl-bg);
}