@charset "UTF-8";
/* テーマ「昼（ビビッド）」。sow.css の上に重ねる(body.theme-hiru のときだけ効く)。
   色は下の変数だけ変えれば別パターンが作れる */
body.theme-hiru {
  --page: #dcebf7;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-2: #e8f2fa;
  --card: #fff;        /* 表・入力欄・カードの地 */
  --line: rgba(40, 80, 120, 0.22);
  --text: #1f2d3a;
  --mist: #5a6b7a;
  --link: #1b6fb3;
  --link-visited: #5b4bb3;
  --link-hover: #0b3f6b;
  --pop-1: #ff2e7e;   /* 主役ボタン・見出しのマーク */
  --pop-1-dark: #b3004f;
  --pop-2: #00b3a4;   /* 表の見出し・帯 */
  --pop-3: #ffcc00;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  color: var(--text);
  background: var(--page) url('/img/back_sunhunter_village.png') center top / cover fixed no-repeat;
  font-family: var(--font-body);
  padding: 20px 16px 32px;
}
body.theme-hiru * { line-height: 1.7; }
body.theme-hiru a:link { color: var(--link); text-underline-offset: 3px; }
body.theme-hiru a:visited { color: var(--link-visited); }
body.theme-hiru a[href]:hover { color: var(--link-hover); }

/* 外枠: 固定700pxをやめて最大760pxの板にする */
body.theme-hiru .outframe { width: auto; max-width: 800px; color: var(--text); }
body.theme-hiru .contentframe {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pop-1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 50, 80, 0.25);
}
body.theme-hiru h1 { margin: 0; }
body.theme-hiru h1 img { display: block; width: 100%; height: auto; }
body.theme-hiru .inframe { padding: 12px 20px 16px; }

/* ログイン欄 */
body.theme-hiru form.login p {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 10px;
  padding: 8px 12px; border-radius: 8px; background: var(--panel-2); border-top: 3px solid var(--pop-2);
  font-size: 13px; color: var(--mist);
}
body.theme-hiru .login input[type=text], body.theme-hiru .login input[type=password] {
  width: 8em; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text);
}
body.theme-hiru input[type=submit] {
  width: auto; padding: 4px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text); font-weight: 700; cursor: pointer;
}
body.theme-hiru input[type=submit]:disabled { opacity: .45; cursor: not-allowed; }

/* 見出し */
body.theme-hiru h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 12px; padding: 0 0 4px;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
}
body.theme-hiru h2::before {
  content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--pop-1); flex: none;
}
body.theme-hiru .infotext { color: var(--pop-1-dark); }

/* 村の作成・終了済みボタン */
body.theme-hiru p.vmake { height: auto; margin: 4px 0 20px; }
body.theme-hiru span.vmake, body.theme-hiru span.vend {
  display: inline-block; padding: 12px 40px; border: 0; border-radius: 999px;
  background: var(--pop-1); background-image: none; color: #fff;
  font-weight: 700; letter-spacing: .08em; box-shadow: 0 4px 0 var(--pop-1-dark);
}
body.theme-hiru span.vend { background: var(--pop-2); box-shadow: 0 4px 0 #007a70; }
body.theme-hiru span.vmake:hover, body.theme-hiru span.vend:hover { filter: brightness(1.08); }
body.theme-hiru p.vmake a { text-decoration: none; }

/* 村一覧 */
body.theme-hiru table.vindex {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  border-collapse: separate; border-spacing: 0; background: var(--card);
}
body.theme-hiru table.vindex th, body.theme-hiru table.vindex td {
  border: 0; border-bottom: 1px solid var(--line); vertical-align: middle;
}
body.theme-hiru table.vindex>thead>tr>th {
  background: var(--pop-2); color: #fff; font-size: 13px; font-weight: 700;
}
body.theme-hiru table.vindex tbody tr:hover td { background: rgba(30, 90, 150, 0.05); }
body.theme-hiru div.rolepopup .content {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* フッター */
body.theme-hiru address {
  color: var(--text); text-align: center; padding: 12px; margin-top: 12px;
  background: var(--panel); border-radius: 10px; border: 1px solid var(--line);
}

/* テーマ切り替え */
body.theme-hiru select.themeswitch { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }

/* スマホ: TOPの村一覧(vindex_fixed)をカードにする(td の data-label を見出しに使う) */
@media (max-width: 560px) {
  body.theme-hiru { padding: 8px 8px 24px; }
  body.theme-hiru .inframe { padding: 10px 12px 12px; }
  body.theme-hiru table.vindex_fixed, body.theme-hiru table.vindex_fixed tbody,
  body.theme-hiru table.vindex_fixed tr, body.theme-hiru table.vindex_fixed td { display: block; width: auto; }
  body.theme-hiru table.vindex_fixed { border: 0; background: transparent; }
  body.theme-hiru table.vindex_fixed colgroup, body.theme-hiru table.vindex_fixed thead { display: none; }
  body.theme-hiru table.vindex_fixed tr {
    margin-bottom: 10px; padding: 6px 12px; border: 1px solid var(--line); border-left: 4px solid var(--pop-2);
    border-radius: 8px; background: var(--card);
  }
  body.theme-hiru table.vindex_fixed td { border: 0; padding: 3px 0; text-align: left !important; }
  body.theme-hiru table.vindex_fixed td[data-label] br { display: none; }
  body.theme-hiru table.vindex_fixed td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: inline-block; min-width: 5em; color: var(--mist); font-size: 12px;
  }
  body.theme-hiru table.vindex_fixed td:first-child { font-weight: 700; }
  body.theme-hiru span.vmake, body.theme-hiru span.vend { padding: 12px 24px; }
}

/* ===== 固定ページ(遊び方・操作方法・仕様FAQ・役職表・キャラクター画像一覧など) ===== */
body.theme-hiru h3, body.theme-hiru h4 {
  margin: 16px 0 10px; padding: 2px 10px; border: 0; border-left: 6px solid var(--pop-2);
  background: var(--panel-2); color: var(--text); font-weight: 700; border-radius: 0 6px 6px 0;
}
/* h4 は h3 の下の小見出し: 帯をやめて、ふつうの強調表示(太字)だけにして h3 と見分ける(村作成オプションの説明など) */
body.theme-hiru h4:not([class*="sayfilter"]) {
  margin: 14px 0 6px; padding: 0; border: 0; background: none; border-radius: 0;
  font-size: 100%; font-weight: 700; color: var(--text);
}
body.theme-hiru .cautiontext { color: #d0103a; }
/* 枠線つきの表(クラスなし・vindex の見出しが tbody にある表も) */
body.theme-hiru table[border] { border-collapse: collapse; background: var(--card); color: var(--text); max-width: 100%; }
body.theme-hiru table[border] th, body.theme-hiru table[border] td { border: 1px solid var(--line); }
body.theme-hiru table[border] th { background: var(--panel-2); font-weight: 700; }
body.theme-hiru table.vindex tbody th { background: var(--panel-2); color: var(--text); }
/* キャラクター画像一覧 */
body.theme-hiru div.charlist { background: var(--card); border-radius: 8px; }
body.theme-hiru table.charlist>tbody>tr>td, body.theme-hiru table.charlist>tbody>tr>th, body.theme-hiru table.charlist>thead>tr>th { border-color: var(--line); }
body.theme-hiru table.charlist>tbody>tr>th, body.theme-hiru table.charlist>thead>tr>th:nth-child(1) { background: var(--panel-2); }
/* 「トップページに戻る」ボタン */
body.theme-hiru .return a { text-decoration: none; }
body.theme-hiru span.returntop {
  display: inline-block; padding: 10px 40px; border: 0; border-radius: 999px;
  background: var(--pop-2); color: #fff; font-weight: 700; box-shadow: 0 4px 0 #007a70;
}
body.theme-hiru span.returntop:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  body.theme-hiru table[border] { display: block; overflow-x: auto; }
  body.theme-hiru span.returntop { padding: 10px 24px; }
}

/* ===== 終了済みの村・プロフィール ===== */
/* 入力欄(検索のプルダウン・プロフィール編集) */
body.theme-hiru .inframe input[type=text], body.theme-hiru .inframe input[type=password],
body.theme-hiru .inframe textarea, body.theme-hiru .inframe select {
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); font: inherit;
}
body.theme-hiru .inframe input[type=text]:focus, body.theme-hiru .inframe input[type=password]:focus,
body.theme-hiru .inframe textarea:focus, body.theme-hiru .inframe select:focus { outline: 2px solid var(--pop-2); outline-offset: 1px; }
body.theme-hiru #finished-search { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); }
/* プロフィールの項目名 */
body.theme-hiru .multicolumn_label { color: var(--mist); font-weight: 700; }
@media (max-width: 560px) {
  body.theme-hiru .multicolumn_label { float: none; width: auto; text-align: left; padding: 6px 0 0; }
  body.theme-hiru .multicolumn_left { float: none; }
  body.theme-hiru .inframe textarea { width: 100%; box-sizing: border-box; }
}