@charset "Shift_JIS";
/* 2026-10-22：サポート掲示板（YY-BOARD）のデザイン。掲示板らしく 1 画面に多く入るよう詰めて、色は濃紺〜水色のグラデーション */
:root {
  --navy: #0b1f4d;
  --blue: #1d4ed8;
  --cyan: #06b6d4;
  --teal: #0d9488;
  --pink: #db2777;
  --text: #1e293b;
  --muted: #64748b;
  --line: #c9d6e8;
  --panel: rgba(255, 255, 255, .92);
  --soft: #eaf2fd;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Meiryo", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  background: #dfe9f5 url("/images/bbsback.png");
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--pink); text-decoration: underline; }
img { max-width: 100%; vertical-align: middle; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 14px; }

/* 見出し（1 行） */
.hd {
  background: linear-gradient(100deg, var(--navy) 0%, var(--blue) 55%, var(--cyan) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 31, 77, .35);
  margin-bottom: 12px;
}
.hd .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; padding-top: 10px; padding-bottom: 10px; position: relative; }
.hd h1 { margin: 0; font-size: 22px; font-weight: bold; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hd .counter { position: absolute; right: 14px; top: 2px; font-size: 10px; opacity: .85; }
.hd .counter span { color: #fff !important; font-size: 10px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a, .nav b {
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  padding: 2px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
}
.nav a:hover { background: rgba(255, 255, 255, .3); color: #fff; text-decoration: none; }
.nav b { background: #fff; color: var(--blue); font-weight: bold; border-color: #fff; }

/* サブページの見出し */
.subhd { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.subhd h2 { margin: 0; font-size: 16px; color: var(--navy); }
.back { font-size: 12px; padding: 2px 12px; border-radius: 999px; background: var(--blue); color: #fff; }
.back:hover { background: var(--pink); color: #fff; text-decoration: none; }

/* 囲み */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 8px 12px 10px;
  margin: 0 0 12px;
  box-shadow: 0 1px 4px rgba(11, 31, 77, .08);
}
.card-hd { font-weight: bold; color: var(--navy); font-size: 13px; margin: 0 0 6px; }

/* 投稿フォーム（項目名を左に置いて詰める） */
.regform .row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 5px; }
.regform .row.top { align-items: flex-start; }
.regform .lb { flex: 0 0 64px; font-size: 12px; color: var(--navy); font-weight: bold; }
.regform .lb2 { flex-basis: auto; margin-left: 10px; }
.regform textarea { flex: 1 1 600px; }
.hint { font-size: 11px; color: var(--muted); }
input[type="text"], input[type="password"], textarea, select {
  font: inherit;
  color: inherit;
  padding: 3px 7px;
  border: 1px solid #a9bcd6;
  border-radius: 5px;
  background: #fff;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, .25);
}
.w-s { width: 8em; }
.w-m { width: 16em; }
.w-l { width: 26em; }
textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
.captcha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.captcha input[type="text"] { width: 7em; }
.captcha img { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.colors { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font-size: 15px; line-height: 1.3; }
.colors input { margin: 0 0 0 6px; accent-color: var(--blue); }
input[type="submit"], input[type="button"], input[type="reset"] {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px 14px;
  border: 1px solid var(--blue);
  background: linear-gradient(180deg, #3b82f6, var(--blue));
  color: #fff;
}
input[type="submit"]:hover, input[type="button"]:hover { background: linear-gradient(180deg, var(--cyan), #0891b2); border-color: #0891b2; }
input[type="reset"] { background: #fff; color: var(--text); border-color: #a9bcd6; }
input[type="reset"]:hover { background: var(--soft); }

/* 記事（色の帯にタイトル・投稿者・日付・番号・返信） */
.art {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 10px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(11, 31, 77, .08);
}
.art > .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  padding: 4px 10px;
  background: linear-gradient(100deg, #e0ecff 0%, #e6fbff 100%);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  font-size: 12px; color: var(--muted);
}
.meta .sub { color: var(--teal); font-size: 14px; font-weight: bold; }
.meta .who b, .meta .who a { color: var(--navy); font-weight: bold; }
.meta .num { margin-left: auto; color: #fff; background: var(--blue); font-size: 11px; padding: 0 8px; border-radius: 999px; }
.meta .icon { width: 14px; height: 14px; }
.art .meta input[type="submit"] { padding: 1px 12px; font-size: 11px; }
.art > .body { padding: 6px 12px 8px 14px; }
.body { overflow-wrap: anywhere; word-break: break-word; }
.res { margin: 0 10px 8px 26px; border: 1px solid #dbe5f2; border-left: 3px solid var(--cyan); border-radius: 6px; background: #f7fbff; }
.res > .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 8px; font-size: 11px; color: var(--muted); border-bottom: 1px dashed #dbe5f2; }
.res .meta .sub { font-size: 12px; }
.res > .body { padding: 4px 10px 6px; }
.art blockquote { margin: 0; }
br.clear { clear: both; }

/* ツリー表示・トピック表示 */
dl.tree { margin: 0 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; }
dl.tree dt { padding: 3px 12px; border-top: 1px solid #e3ebf6; }
dl.tree dt:first-child { border-top: 0; }
dl.tree dd { margin: 0 0 0 28px; padding: 1px 12px; font-size: 12px; }
dl.tree .num { font-size: 11px; color: var(--muted); }
table.list { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
table.list th { background: linear-gradient(100deg, var(--navy), var(--blue)); color: #fff; font-size: 12px; text-align: left; padding: 4px 8px; }
table.list td { padding: 3px 8px; border-top: 1px solid #e3ebf6; }
table.list tr:nth-child(odd) td { background: #f5f9ff; }
table.list .cen { text-align: center; }

/* ページ送り（CGI が「Page: | 1 | 2 |」を出す。区切りの文字を隠してボタンにする） */
.pager { font-size: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0 12px; }
.pager a, .pager b { font-size: 12px; min-width: 28px; text-align: center; padding: 1px 8px; border-radius: 5px; border: 1px solid var(--line); background: #fff; }
.pager b { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager a:hover { background: var(--soft); text-decoration: none; }

/* 修正・削除 */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.tools input[type="text"] { width: 5em; }
.tools input[type="password"] { width: 8em; }

/* 検索・過去ログ */
.search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.search input[type="text"] { width: 18em; max-width: 100%; }

/* お知らせ（エラー・完了） */
.notice { max-width: 520px; margin: 50px auto; text-align: center; }
.notice h2 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.notice .red { color: #dc2626; }

/* 留意事項（小窓） */
.note ul { padding-left: 1.2em; margin: 0; }
.note li { margin: 4px 0; }
.close { text-align: center; margin: 10px 0; }

/* アイコン一覧 */
#album { display: flex; flex-wrap: wrap; gap: 8px; }
#album .photo { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; text-align: center; }
#album p { margin: 0; }

.ft { text-align: center; color: var(--muted); font-size: 11px; padding: 4px 0 16px; }

@media (max-width: 640px) {
  .hd .counter { position: static; order: 3; }
  .regform .lb { flex-basis: 100%; }
  .regform .lb2 { margin-left: 0; }
  .w-m, .w-l, textarea { width: 100%; }
  .regform textarea { flex-basis: 100%; }
  .meta .num { margin-left: 0; }
  .res { margin-left: 12px; }
}