/* =========================================================
   ラグオル解体新書  -  2001-2004 style
   ・固定幅 770px（800x600 表示想定）
   ・グラデーション/ぼかし影は使わない（=GIF で作れない表現は避ける）
   ・1px 罫線・ベタ塗り・ドット柄タイルで「当時の質感」を出す
   ・本文は 13px（当時の 12px より 1px 大きく、今の画面でも読める範囲に）
   ========================================================= */
/* 6番・中間案：2000年代の二重罫の検索案内。 */
#search-banner{display:flex;align-items:stretch;height:26px;box-sizing:border-box;overflow:hidden;border-top:3px double #173f78;border-bottom:3px double #173f78;background:#ffffee;color:#333;font:normal 13px/20px "MS PGothic","ＭＳ Ｐゴシック",Osaka,sans-serif}
#search-banner .search-banner-viewport{display:block;flex:1;min-width:0;overflow:hidden;color:inherit;text-decoration:none;font:inherit}
#search-banner .search-banner-track{display:flex;width:max-content;height:20px;align-items:center}
#search-banner .search-banner-group{display:flex;flex:none;align-items:center;white-space:nowrap}
#search-banner .search-banner-divider{flex:none;width:10px;margin:0 30px;color:#6a82ad;font-size:10px;text-align:center}
#search-banner .search-banner-example{display:inline-block;margin:0 12px 0 0;padding:0;border:0;border-radius:0;background:transparent;font:inherit;letter-spacing:.04em;color:#0000cc;text-decoration:underline;text-underline-offset:1px;cursor:pointer}
#search-banner .search-banner-label{display:flex;align-items:center;flex:none;white-space:nowrap;padding:0 8px;border-left:1px dotted #99aacc;color:#000080;font-size:11px}
#search-banner .search-banner-pause{flex:none;width:20px;margin:0;padding:0;border:0;border-left:1px dotted #99aacc;border-radius:0;background:transparent;color:#000080;font:11px/20px "MS PGothic",sans-serif;cursor:pointer}
#search-banner .search-banner-pause[hidden]{display:none}
#search-banner a:focus-visible,#search-banner button:focus-visible{outline:1px dotted #000080;outline-offset:-2px}
#search-banner.search-banner-still{height:auto;min-height:26px}
#search-banner.search-banner-still .search-banner-track{display:block;width:100%;height:auto;transform:none}
#search-banner.search-banner-still .search-banner-group{display:block;padding:0 6px;white-space:normal;overflow-wrap:anywhere}
#search-banner.search-banner-still .search-banner-divider{display:inline;margin:0 8px}
#search-banner.search-banner-still .search-banner-divider:last-child{display:none}
@media(max-width:760px){#search-banner .search-banner-divider{margin:0 20px}}

:root{
  --navy:#0b1f4f;      /* フレーム・ヘッダー */
  --navy-dk:#061233;
  --bar:#1c4a8c;       /* 見出しバー */
  --bar-lt:#3a6fb8;
  --sub:#dfe8f5;       /* サブナビ・ラベルセル */
  --row:#f0f4fa;       /* テーブル交互色 */
  --line:#6d8fbf;      /* 罫線 */
  --line-lt:#b9c9e0;
  --accent:#ff9900;    /* 差し色（SEGA/GameSpot 期のオレンジ） */
  --yellow:#ffcc00;
  --text:#000;
  --muted:#555;
  --link:#0033cc;
  --visited:#663399;
}

html{background:#030b1f}
body{
  margin:0;
  padding:0 0 20px;
  color:var(--text);
  font:16px/1.6 "ＭＳ Ｐゴシック","MS PGothic",Osaka,"Hiragino Kaku Gothic ProN",sans-serif;
  /* 2px ドットのタイル背景（当時の bg.gif の再現） */
  background:
    repeating-linear-gradient(0deg,transparent 0 1px,rgba(40,80,150,.18) 1px 2px),
    #030b1f;
}
a{color:var(--link)}
a:visited{color:var(--visited)}
a:hover{color:#ff3300}
table{border-collapse:collapse}
.en{font-family:Verdana,Tahoma,Arial,sans-serif}

#wrap{
  box-sizing:border-box;
  width:940px;
  max-width:100%;
  margin:0 auto;
  background:#fff;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

/* ---------- 最上部の細帯 ---------- */
#util{
  display:flex;
  justify-content:space-between;
  padding:0 6px;
  background:#000;
  color:#8fa8cc;
  font:12px/22px Verdana,Tahoma,sans-serif;
}
#util a{color:#cfe0ff;text-decoration:none}
#util a:hover{color:var(--yellow);text-decoration:underline}

/* ---------- ヘッダー（左にゲームのロゴ・右にサイト名。背景はタイトル画面） ---------- */
#header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:104px;
  padding:0 20px;
  gap:20px;
  overflow:hidden;
  background:#050b1c;
  border-bottom:1px solid #5a8ad0;
}
/* 背景: タイトル画面の魔法陣とデータ列を暗くして敷き、右側 (サイト名) をさらに暗くして読みやすくする */
#header::before{content:"";position:absolute;inset:0;background:url(../img/site/header-bg.jpg) center/cover}
#header::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,11,28,.15),rgba(5,11,28,.65))}
#header>*{position:relative;z-index:1}
/* 左のゲームロゴ (ゲームのタイトル画面から切り出し) */
.home-logo{display:block;flex:0 1 320px;min-width:0;aspect-ratio:40/13;border-radius:4px}
.home-logo:focus-visible{outline:2px solid #ffd66b;outline-offset:3px}
.home-logo{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent);mask-composite:intersect}
.home-logo:focus-visible{mask-image:none}
.title-logo{display:block;position:absolute;width:114%;max-width:none;height:auto;left:-8%;top:50%;transform:translateY(-47%)}
#logo,#logo:visited{text-decoration:none;color:#fff;display:block;line-height:1;text-align:right}
/* 明朝・書物風ロゴ：上に英字タイトル、下に罫線＋英名 */
#logo span{display:block;white-space:nowrap}
#logo .sub{
  margin-bottom:5px;
  font:italic 13px Georgia,serif;
  color:#a9c3f0;
  letter-spacing:1px;
}
#logo .l1{
  /* Office 付属の HG明朝E → なければ游明朝/ヒラギノ明朝 */
  font:bold 34px/1 "HGS明朝E","HG明朝E","Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif;
  letter-spacing:2px;
  text-shadow:2px 2px 0 #000;
}
#logo .l1 b{color:#ffd66b}
#logo .en{
  margin-top:6px;
  font:bold 12px Verdana,sans-serif;
  color:#8aa2c8;
  letter-spacing:5px;
}

/* ---------- タブナビ（GameSpot 風） ---------- */
#tabs{
  display:flex;
  gap:2px;
  padding:6px 6px 0;
  margin:0;
  list-style:none;
  background:var(--navy-dk);
}
#tabs a{
  display:block;
  padding:3px 10px 2px;
  background:var(--bar);
  border:1px solid #5a8ad0;
  border-bottom:0;
  border-radius:4px 4px 0 0;
  color:#fff;
  font:bold 13px/17px Verdana,Tahoma,sans-serif;
  text-decoration:none;
  letter-spacing:.5px;
}
#tabs a:hover{background:var(--bar-lt)}
#tabs .on a{
  background:var(--sub);
  color:var(--navy);
  border-color:var(--sub);
  padding-bottom:3px;
  margin-bottom:-1px;
}
#subnav{
  padding:3px 8px;
  background:var(--sub);
  border-bottom:1px solid var(--line);
  font-size:14px;
  color:#666;
}
#subnav a{color:var(--navy);text-decoration:none}
#subnav a:hover{text-decoration:underline;color:#ff3300}
#subnav a.on{font-weight:bold;text-decoration:underline}

/* ---------- 2 カラム ---------- */
#cols{
  display:grid;
  grid-template-columns:176px 1fr;
  gap:4px;
  padding:6px 6px 6px 4px;
}
/* HTML では中身 (main) を先に置き、左メニューは CSS で左に出す (検索エンジン・AI に本文を先に読ませるため) */
#main{min-width:0;grid-column:2;grid-row:1}
#left{grid-column:1;grid-row:1}

/* サイドボックス */
.box{border:1px solid var(--line);margin-bottom:6px;background:#fff}
.box .hd{
  background:var(--bar);
  color:#fff;
  padding:2px 5px;
  font:bold 13px/18px Verdana,Tahoma,sans-serif;
  letter-spacing:.5px;
  border-bottom:1px solid var(--navy);
}
.box .hd:before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-right:5px;
  background:var(--accent);
  vertical-align:1px;
}
.box .bd{padding:5px}
.box .bd.tight{padding:2px 0}

.menu{list-style:none;margin:0;padding:0;font-size:14px}
.menu li{
  padding:2px 5px 2px 14px;
  border-bottom:1px dotted var(--line-lt);
  background:linear-gradient(var(--bar),var(--bar)) 5px center / 4px 4px no-repeat;
}
.menu li:last-child{border-bottom:0}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline}
.menu li.on{background-color:var(--sub)}
.menu li.on a{font-weight:bold;color:var(--navy)}

/* PICK UP (左カラム。開くたびに js/pickup.js が入れ替える) */
.pickup .bd{text-align:center}
.pickup .pic{margin:0 auto 4px}
.pickup .pk-name{display:block;font-weight:bold;line-height:1.4}
.pickup .pk-meta{display:block;font-size:13px;color:var(--muted)}
.pickup .pk+.pk{margin-top:10px;padding-top:10px;border-top:1px dotted var(--line)}

/* フォーム部品（Windows クラシック） */
input[type=text],select{
  font:16px "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  border:1px solid #7f9db9;
  padding:1px 2px;
  background:#fff;
}
.btn{
  font:16px "ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  padding:1px 8px;
  background:#d4d0c8;
  color:#000;
  border:1px solid;
  border-color:#fff #404040 #404040 #fff;
  box-shadow:inset -1px -1px 0 #808080;
  cursor:pointer;
}
.btn:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px 0 #808080}

.note{font-size:13px;color:var(--muted);text-align:center;line-height:1.5}

/* ---------- メイン共通 ---------- */
.welcome{
  border:1px solid var(--line);
  background:var(--row);
  padding:5px 8px;
  margin-bottom:10px;
  font-size:14px;
}
.welcome b{color:var(--navy)}
.welcome h1{margin:0 0 4px;font-size:18px;line-height:1.4;color:var(--navy)}
.welcome h1 small{margin-left:8px;font-size:13px;font-weight:normal;color:var(--muted)}
.welcome p{margin:0}

h2.sec{
  margin:22px 0 6px;
  padding:0 0 1px 4px;
  border-bottom:2px solid var(--bar);
  border-left:6px solid var(--accent);
  color:var(--navy);
  font-size:17px;
  line-height:20px;
}
h2.sec .en{
  margin-left:6px;
  color:#8aa2c8;
  font-size:12px;
  font-weight:bold;
  letter-spacing:1px;
}
.more{text-align:right;font-size:14px;margin:3px 0 12px}
.gap{height:12px}

/* データ表 */
table.data{width:100%;border:1px solid var(--line)}
table.data th,table.data td{
  border:1px solid var(--line-lt);
  padding:3px 6px;
  text-align:left;
  vertical-align:top;
}
table.data th{
  background:var(--sub);
  color:var(--navy);
  white-space:nowrap;
}
table.data thead th{background:var(--bar);color:#fff;font-size:14px}
table.data tbody tr:nth-child(even) td{background:var(--row)}
table.data td.num{text-align:right;font-family:Verdana,sans-serif;font-size:14px}
table.data tr.self td{background:#fff6d6 !important;font-weight:bold}

/* クイック検索フォーム */
table.form{width:100%;border:1px solid var(--line);margin-bottom:12px}
table.form th,table.form td{border:1px solid var(--line-lt);padding:3px 6px}
table.form th{background:var(--sub);color:var(--navy);width:108px;text-align:left;font-size:14px}
table.form td.submit{text-align:center;background:var(--row)}

/* Section ID カラー表 */
.sid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  margin-bottom:12px;
}
.sid a{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 6px;
  border-right:1px solid var(--line-lt);
  border-bottom:1px solid var(--line-lt);
  font:bold 13px Verdana,sans-serif;
  text-decoration:none;
  color:var(--navy);
}
.sid a:nth-child(5n){border-right:0}
.sid a:nth-child(n+6){border-bottom:0}
.sid a:hover{background:var(--row);text-decoration:underline}
.chip{
  display:inline-block;
  flex:none;
  width:11px;height:11px;
  border:1px solid #000;
  vertical-align:-1px;
}

/* 武器の画像 (一覧・カテゴリ・PICK UP 共通)。縦横比の違う装備の画像は枠に合わせて切る */
.pic{display:block;border:1px solid #000;background:#000;object-fit:cover}
.pic.noimg{box-sizing:border-box}

/* トップの検索 (1行) */
.qs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);background:var(--row);padding:6px 8px;margin-bottom:12px}
.qs input[type=text]{flex:1 1 220px;min-width:0}

/* トップのカテゴリ (代表の武器の画像つき) */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);margin-bottom:12px}
.tiles>*{display:block;min-width:0;overflow-wrap:anywhere;padding:8px 6px 6px;text-align:center;border-right:1px solid var(--line-lt);border-bottom:1px solid var(--line-lt);text-decoration:none}
.tiles>*:nth-child(4n){border-right:0}
.tiles>*:nth-last-child(-n+4){border-bottom:0}   /* 最後の段だけ下線なし。段が埋まるよう、空きマスは .fill で埋める */
.tiles .pic{margin:0 auto 5px;width:100%;max-width:160px;height:auto;aspect-ratio:1/1}
.tiles .nm{display:block;font-weight:bold;font-size:17px}
.tiles small{display:block;font:bold 11px Verdana,sans-serif;letter-spacing:1px;color:#8aa2c8}
.tiles .n{display:block;font-size:13px;color:var(--muted)}
.tiles a:hover{background:var(--row)}
.tiles a:hover .nm{text-decoration:underline}

/* カテゴリのページの一覧 (武器名の左に小さな画像) */
table.data.list{margin-bottom:6px}
table.data.list{table-layout:fixed}
table.data.list th:nth-child(2){width:130px}
table.data.list th:nth-child(3){width:60px}
table.data.list th:nth-child(4){width:104px}
table.data.thumbs td{vertical-align:middle}
.wcell{display:flex;align-items:center;gap:8px}
.wcell .wthumb{flex:none}

/* ---------- 武器詳細ページ ---------- */
.crumb{font-size:14px;margin-bottom:8px;color:var(--muted)}

.dummy{
  border:1px solid #d9a400;
  background:#fff8d0;
  padding:3px 8px;
  margin-bottom:8px;
  font-size:14px;
  color:#6a4a00;
}

.item-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:5px 8px 4px;
  margin-bottom:8px;
  background:var(--navy);
  border-bottom:3px solid var(--accent);
  color:#fff;
}
.item-title h1{margin:0;font-size:24px;line-height:1.3;letter-spacing:1px}
.item-title h1 small{
  margin-left:8px;
  font:bold 13px Verdana,sans-serif;
  color:#8fb6ee;
  letter-spacing:2px;
}
.stars{color:var(--yellow);font-size:17px;letter-spacing:1px;white-space:nowrap}
.stars em{font-style:normal;color:#39507a}

.item-top{
  display:grid;
  grid-template-columns:162px 1fr;
  gap:8px;
  margin-bottom:12px;
}
.item-pic{
  width:160px;height:160px;
  border:1px solid #000;
  outline:1px solid var(--line);
  outline-offset:0;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 2px),
    #1e3f6e;
  color:#9fc0ff;
  font:11px/160px Verdana,sans-serif;
  text-align:center;
}
.item-pic:has(img),.item-pic:has(video){height:auto;background:#000}
.item-pic.equip{margin-top:8px}
.item-pic img,.item-pic video{display:block}
img.zoom,video.zoom{cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:100;cursor:zoom-out}
.lightbox img,.lightbox video{max-width:90vw;max-height:90vh;image-rendering:auto;border:1px solid #fff;background:#000}
.zoom:focus-visible{outline:2px solid #174baf;outline-offset:3px}
.lightbox-close{position:absolute;right:12px;top:12px;width:36px;height:36px;border:1px solid #fff;background:#111;color:#fff;font:26px/1 sans-serif;cursor:pointer}
.lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pic-cap{font-size:13px;color:var(--muted);text-align:center;margin-top:3px}

.spec th{width:112px}
.spec td b{font-family:Verdana,sans-serif}
.spec p.ex{margin:0;line-height:1.6}
.spec p.ex+p.ex{margin-top:4px}
.spec td.ingame{line-height:1.6}

/* 装備可能クラス */
.classes{
  display:grid;
  grid-template-columns:70px repeat(4,1fr);
  border:1px solid var(--line);
  margin-bottom:12px;
  font:13px Verdana,sans-serif;
}
.classes span{
  padding:3px 6px;
  border-right:1px solid var(--line-lt);
  border-bottom:1px solid var(--line-lt);
  color:#aaa;
}
.classes span:nth-child(5n){border-right:0}
.classes span:nth-last-child(-n+5){border-bottom:0}
.classes span:before{content:"×";display:inline-block;width:14px;font-weight:bold}
.classes span.ok{color:#000;background:#eaf6e4}
.classes span.ok:before{content:"○";color:#2b8a3e}
.classes span.grp{background:var(--sub);color:var(--navy);font-weight:bold}
.classes span.grp:before{content:none}

.desc{margin:0 0 12px;padding:0 2px}
.desc p{margin:0 0 6px}

.memo{
  border:1px dashed var(--line);
  background:var(--row);
  padding:6px 8px;
  margin-bottom:12px;
  font-size:14px;
}
.memo b{color:var(--navy)}

.pager{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--row);
  padding:3px 6px;
  font-size:14px;
  margin-bottom:6px;
}

/* ---------- フッター ---------- */
.pagetop{text-align:right;padding:2px 8px;font-size:14px}
#footer{
  background:var(--navy);
  color:#9fb6d9;
  padding:6px 10px 8px;
  border-top:3px solid var(--accent);
  font-size:14px;
  text-align:center;
  line-height:1.7;
}
#footer a{color:#fff}
#footer .copy{font:12px Verdana,sans-serif}
#footer .legal{font-size:13px;color:#7f97bd}
#subnav.thin{height:6px;padding:0}

/* 入手方法（ドロップ表） */
.drop-filter{margin:0 0 4px;font-size:14px;display:flex;justify-content:space-between;align-items:flex-end}
.diff-tabs{display:flex;gap:2px}
.diff-tabs button{
  padding:2px 10px;font:14px/1.5 inherit;font-family:inherit;cursor:pointer;
  background:var(--sub);color:var(--navy);
  border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0;
}
.diff-tabs button:hover{background:#fff}
.diff-tabs button.on{background:var(--bar);color:#fff;border-color:var(--bar);font-weight:bold}
.diff-tabs button.empty{color:#8a97ad}
table.drops td{font-size:14px}
table.drops td.ep,table.drops td.dif{white-space:nowrap}
table.drops td.secs{line-height:1.6}
table.drops td.secs .sec{display:inline-block;margin-right:6px;white-space:nowrap;font:13px Verdana,sans-serif}
table.drops td.secs .chip{margin-right:2px}
table.drops td.num{white-space:nowrap;cursor:help}
table.drops td.none{text-align:center;color:var(--muted);padding:8px}
table.drops .area{color:var(--muted);font-size:13px}
/* 入手のタグ (名前の下・トップの一覧) */
.tag{display:inline-block;padding:0 5px;border:1px solid;font-size:12px;line-height:15px;vertical-align:1px;font-weight:normal;background:#fff;cursor:help}
.tag-online{border-color:#d9822b;color:#c46a12}
.tag-offline{border-color:#2f7fb8;color:#25689a}
.tag-event{border-color:#3f9152;color:#2f7a41}
.tag-impossible{border-color:#777;color:#555;background:#eee}
.tags{margin:5px 0 8px;display:flex;flex-wrap:wrap;gap:4px}
table.data.list .tag{margin-left:2px}
.tag-rare{display:inline-block;padding:0 3px;border:1px solid #c33;color:#c33;font-size:12px;line-height:13px;vertical-align:1px}
.note{margin:3px 0 0;font-size:13px;color:var(--muted)}
.desc p.ingame{padding:6px 8px;background:var(--row);border:1px solid var(--line-lt)}

/* 入手方法（特殊入手） */
.method{margin:0 0 10px}
.method-hd{margin:0 0 4px;padding:1px 6px;border-left:4px solid var(--navy);background:var(--sub);color:var(--navy);font-weight:bold;font-size:14px}
.method p+p{margin-top:9px}
.method p{margin:4px 2px;font-size:14px}
table.combine{margin:4px 0}
table.combine td{font-size:14px}
/* 合成: 「装備する武器 ＋ 使うアイテム」(表ではなく箱を並べる。＋の上下に線を出さないため) */
.recipe{display:flex;align-items:stretch;margin:4px 0 10px}
.recipe .rbox{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);background:#fff}
.recipe .rhd{background:var(--bar);color:#fff;font-weight:bold;text-align:center;padding:4px 6px}
.recipe .rbd{flex:1;display:flex;flex-direction:column;justify-content:center}
.recipe .rc{padding:8px;text-align:center;font-size:14px}
.recipe .rc+.rc{border-top:1px solid var(--line-lt)}
.recipe .rc .pic{margin:2px auto 4px}
.recipe .rc a{display:block;font-weight:bold}
.recipe .rc small{display:block;font-size:12px;color:var(--muted)}
.recipe .rc .area{display:block}
.recipe .rop{flex:none;width:28px;display:flex;align-items:center;justify-content:center;font:bold 20px sans-serif;color:var(--navy)}
details.related{margin:4px 0 0;font-size:14px}
details.related summary{cursor:pointer;color:var(--link)}
details.related table{margin-top:4px}
.variant{margin:-4px 0 8px;font-size:14px;color:var(--muted)}
table.list tr.grp th{background:var(--sub);color:var(--navy);font-size:13px}

/* ドロップ表の縞模様 (Section ID で行を隠しても崩れないようにクラスで付ける) */
table.data.drops tbody tr:nth-child(n) td{background:#fff}
table.data.drops tbody tr.alt td{background:var(--row)}
table.drops td.num small{display:block;font-size:12px;color:var(--muted);font-family:sans-serif}

/* ---------- 要約文・画像の枠・表のスクロール ---------- */
.lead{margin:0 0 10px;padding:6px 8px;background:var(--row);border:1px solid var(--line-lt);font-size:14px;line-height:1.75}
div.lead{background:none;border:0;padding:0;margin:0 0 6px}
div.lead p{margin:0 0 8px}
div.lead p:last-child{margin:0}
/* 画像がないあいだの枠。文字は DOM に入れず CSS で出す */
.item-pic.noimg::after{content:"NO IMAGE"}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data.list.acq th:nth-child(2){width:150px}

/* ---------- スマホ・狭い画面 (幅 760px 以下) ---------- */
@media (max-width:760px){
  body{padding-bottom:0}
  #wrap{width:auto;border-left:0;border-right:0}
  #util{overflow:hidden;white-space:nowrap;font-size:11px}
  #header{height:82px;min-height:0;padding:6px 10px;gap:10px}
  .home-logo{flex-basis:34%;max-width:240px}
  .title-logo{height:auto}
  #logo .sub{display:none}
  #logo .l1{font-size:24px;letter-spacing:1px}
  #logo .en{margin-top:4px;font-size:10px;letter-spacing:3px}
  #tabs{padding:6px 6px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #tabs a{padding:6px 7px 5px;text-align:center}

  #cols{grid-template-columns:minmax(0,1fr);gap:0;padding:6px}
  #main,#left{grid-column:1;grid-row:auto}
  #left{margin-top:10px}
  .box.search{display:none}   /* 検索は動くようになるまで、スマホでは出さない */
  .menu{display:flex;flex-wrap:wrap}
  .menu li{flex:1 1 33%;box-sizing:border-box;padding:9px 6px 9px 14px;border-right:1px dotted var(--line-lt);display:flex;align-items:center}

  .welcome h1 small{display:block;margin:2px 0 0}
  .item-title{flex-wrap:wrap;padding:6px 8px 5px}
  .item-title h1{font-size:20px}
  .item-title h1 small{display:block;margin:2px 0 0}
  .item-top{grid-template-columns:minmax(0,1fr)}
  .item-top>div:first-child{display:flex;gap:8px;flex-wrap:wrap}
  .item-pic.equip{margin-top:0}
  .spec th{width:84px;white-space:normal}
  .classes{grid-template-columns:repeat(4,1fr);font-size:12px}
  .classes span.grp{grid-column:1/-1}
  .classes span{padding:4px 3px}
  .classes span:before{width:11px}

  table.form th{width:auto}
  table.form input[type=text]{width:100% !important;box-sizing:border-box}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles>*:nth-child(4n){border-right:1px solid var(--line-lt)}
  .tiles>*:nth-last-child(-n+4){border-bottom:1px solid var(--line-lt)}
  .tiles>*:nth-child(2n){border-right:0}
  .tiles>*:nth-last-child(-n+2){border-bottom:0}
  .tiles .pic{width:100%;max-width:160px;height:auto;aspect-ratio:1/1}
  .qs select{flex:1 1 45%}

  table.data.list{table-layout:auto}
  table.data.list:not(.acq) th:nth-child(2),table.data.list:not(.acq) td:nth-child(2){display:none}   /* 種別は見出しにあるので省く */
  table.data.list th:nth-child(n+2){width:auto}
  table.data.list td.num{white-space:nowrap}
  table.data.list.acq th:nth-child(2){width:auto}
  table.data th,table.data td{padding:5px 6px}
  table.drops{min-width:520px}
  .drop-filter{flex-direction:column;align-items:stretch;gap:6px}
  .diff-tabs{flex-wrap:wrap;gap:4px}
  .diff-tabs button{padding:6px 10px;border-bottom:1px solid var(--line);border-radius:4px}
  details.related summary{padding:6px 0}
  .pager{padding:8px 6px}
  .pagetop{padding:8px}
  #footer{padding:10px}
}

/* ---------- Section ID 別のドロップ表 ---------- */
/* 入口: 縦に並べる */
.sec-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;max-width:480px}
.sec-list a{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);background:#fff}
.sec-list a:hover{background:var(--sub)}
.sec-list b{font-size:16px}
.sec-list span{margin-left:auto;font-size:13px;color:var(--muted)}
i.chip.big{width:18px;height:18px;margin:0 8px 0 0;vertical-align:-2px}
/* 絞り込み: 見出しつきの、押せると分かるボタン */
.fbar{position:sticky;top:0;z-index:3;margin:0 0 10px;padding:8px 10px;background:var(--sub);border:1px solid var(--line);display:grid;gap:6px}
.fbar .frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.flab{flex:none;min-width:4.5em;font-weight:bold;color:var(--navy);font-size:13px}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{font:inherit;font-size:14px;padding:5px 12px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;border-radius:3px}
.seg button:hover{background:#eaf0fb}
.seg button.on{background:var(--navy);color:#fff;font-weight:bold}
.seg button.on:before{content:"\2713\00a0"}
.seg button.empty{color:#8a97ad;border-color:var(--line);border-style:dashed}
.seg button.empty.on{color:#fff}
.fcount{font-size:12px;color:var(--muted)}
.fcount b{color:var(--fg);font-size:14px}
.drop-filter .flab{align-self:center;min-width:0;margin-right:4px}
.diff-tabs{align-items:center}
/* Section ID のページの表 */
table.secdrop tbody.grp{border-top:2px solid var(--line)}
table.secdrop td.src{vertical-align:top;width:34%;background:var(--row) !important}
table.secdrop tbody.gh th{background:var(--sub);color:var(--navy);text-align:left;font-size:14px}
table.secdrop.single tbody.gh{display:none}
table.secdrop .st,table.secall .st{font-size:12px;color:var(--muted)}
/* 全Section IDの一覧表 */
.tbl-scroll.wide{max-width:100%}
table.secall{min-width:760px}
table.secall th.sech{font-size:11px;padding:4px 2px;text-align:center;white-space:nowrap}
table.secall th.sech a{color:#fff;display:block}
table.secall th.sech .chip{display:block;margin:0 auto 2px}
table.secall th.wn{text-align:left;font-weight:normal;background:#fff;position:sticky;left:0;min-width:180px}
table.secall thead th.wn{background:var(--bar);color:#fff;font-weight:bold}
table.secall td.c{text-align:center;font-size:13px;white-space:nowrap;padding:4px 2px}
table.secall td.c.none{color:#b4bccb}
table.secall tr.ch th{background:var(--sub);color:var(--navy);text-align:left;position:static}
table.secall tr.wr:target th,table.secall tr.wr:target td{background:#fff3c4}
@media (max-width:760px){.sec-list{max-width:none}.fbar{position:static}}

/* ---------- 材料の入手方法 (合成・加工・アイテム使用) ---------- */
h3.r-sub{margin:12px 0 4px;padding:1px 6px;border-left:4px solid var(--navy);background:var(--sub);color:var(--navy);font-size:14px}
table.srcs tbody{border-top:2px solid var(--line)}
table.srcs th:nth-child(1){width:150px}
table.srcs th:nth-child(2){width:110px}
table.srcs th:nth-child(4){width:130px}
table.srcs td{vertical-align:top}
table.srcs .epd{display:block;font-size:12px;color:var(--muted)}
table.srcs .secs{margin-top:2px}
table.srcs .sec{display:inline-block;margin:2px 8px 0 0;font:12px Verdana,sans-serif;white-space:nowrap}
table.srcs td.num small{display:block;white-space:nowrap}
table.srcs td.more{font-size:13px;color:var(--muted)}

/* 見本3: 敵ごとの行と、10色の Section ID */
#section-drop{min-width:0;font-size:14px}
#section-drop [hidden]{display:none !important}
.sd-controls{background:var(--sub);border:1px solid var(--line);padding:8px 10px;display:grid;gap:6px;position:static}
.sd-floating{position:fixed;top:0;z-index:15;background:var(--sub);border:1px solid var(--line);border-bottom:2px solid var(--bar);box-shadow:0 2px 5px #0003;box-sizing:border-box;max-height:calc(100dvh - 12px);overflow:auto}
.sd-floating-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;font-size:13px}
.sd-floating-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;color:var(--navy)}
.sd-floating-bar button{font:inherit;white-space:nowrap;cursor:pointer;border:1px solid var(--navy);border-radius:3px;padding:4px 8px;color:var(--navy);background:#fff}
.sd-floating .sd-controls{border:0;border-top:1px solid var(--line);padding-top:10px}
.sd-floating #sd-suggestions{position:static;max-height:55vh;margin-top:3px}
.sd-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sd-control>span,.sd-control>label{min-width:4.8em;font-weight:bold;color:var(--navy);font-size:13px}
.sd-seg{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.sd-seg button{font:inherit;font-size:13px;padding:4px 9px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;border-radius:3px}
.sd-seg button.on{background:var(--navy);color:#fff;font-weight:bold}
.sd-seg i,.sd-legend i{display:inline-block;width:10px;height:10px;border:1px solid #556;margin-right:4px;vertical-align:-1px}
.sd-search{position:relative;flex:1 1 240px;max-width:580px;min-width:0}
.sd-search input{box-sizing:border-box;width:100%;font:inherit;padding:6px 10px;border:1px solid var(--navy);border-radius:3px}
#sd-suggestions{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--navy);z-index:10;max-height:min(480px,55vh);overflow:auto}
.sd-search-hit{padding:10px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:#fff}
.sd-search-hit:last-child{border-bottom:0}
#sd-suggestions button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:3px 0;border:0;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer}
#sd-suggestions button:hover,#sd-suggestions button.on{background:var(--sub)}
#sd-suggestions button span{min-width:0;flex:1;overflow-wrap:anywhere}
#sd-suggestions img{flex:none;background:#000}
#sd-suggestions small{display:block;color:#505d71;font-size:12px;margin-top:2px}
#sd-suggestions em{flex:none;font-style:normal;font-size:11px;color:var(--navy);border:1px solid var(--line);border-radius:3px;padding:3px 5px}
.sd-search-hit p{font-size:13px;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}
.sd-hit-ex{color:var(--text)}
.sd-hit-reason{color:var(--navy)}
.sd-hit-detail{font-size:13px;text-decoration:underline}
.sd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#sd-clear{font:inherit;font-size:12px;cursor:pointer}
#sd-search-status,#sd-dot-status{font-size:12px;margin:0;color:var(--muted)}
#sd-search-status:empty,#sd-dot-status:empty{display:none}
#sd-count{font-size:13px;margin:8px 0}
.sd-legend{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px}
.sd-legend span{white-space:nowrap}
.sd-area{background:var(--bar);color:#fff;font-size:14px;padding:4px 10px;margin:10px 0 0}
.sd-condition{margin:18px 0 4px;padding:7px 10px;background:var(--navy);color:#fff;border-left:4px solid var(--accent);font-size:15px}
.sd-enemy{display:grid;grid-template-columns:140px minmax(0,1fr);border:1px solid var(--line);border-top:0;background:#fff}
.sd-source{padding:7px 8px;font-weight:bold;border-right:1px solid var(--line);background:var(--row);overflow-wrap:anywhere}
.sd-weapons{min-width:0}
.sd-weapon{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:4px 8px;border-bottom:1px solid var(--line-lt)}
.sd-weapon:last-child{border-bottom:0}
.sd-weapon:hover{background:var(--sub)}
.sd-icon img{display:block;width:26px;height:26px;background:#000}
.sd-name{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.sd-name>a{font-weight:bold;color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.sd-name small{display:block;font-size:11px;color:var(--muted)}
.sd-rate{font-weight:bold;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-size:13px}
.sd-rate small{display:block;font-size:11px;font-weight:normal;color:var(--muted)}
.sd-dots{display:inline-flex;gap:2px}
.sd-dot{display:block;appearance:none;width:10px;height:10px;padding:0;border:1px solid #556;background:var(--id-color);cursor:pointer}
.sd-dot.off{background:transparent;border-color:#d4d9e2}
.sd-dot.me{outline:2px solid #000;outline-offset:1px}
.sd-dot:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.sd-noicon .sd-weapon{grid-template-columns:minmax(0,1fr) auto auto}
.sd-noicon .sd-icon{display:none}
.sd-rare{font-size:11px;background:#c0392b;color:#fff;padding:0 4px;margin-left:4px;font-weight:normal}
@media(max-width:760px){
  .sd-controls{position:static}
  .sd-enemy{grid-template-columns:minmax(0,1fr)}
  .sd-source{border-right:0;border-bottom:1px solid var(--line-lt);padding:4px 8px}
  .sd-weapon{grid-template-columns:26px minmax(0,1fr) auto;gap:5px}
  .sd-dots{grid-column:2;grid-row:2;padding:3px 0}
  .sd-rate{grid-column:3;grid-row:1 / 3}
  .sd-icon{grid-row:1 / 3}
  .sd-noicon .sd-weapon{grid-template-columns:minmax(0,1fr) auto}
  .sd-noicon .sd-dots{grid-column:1}
  .sd-noicon .sd-rate{grid-column:2}
  .sd-control>label{width:100%}
}

/* 全ページ共通の検索欄。ヘッダー直下で、名前・効果・装備条件から探す。 */
#weapon-search{position:relative;padding:8px 12px;background:var(--sub);border-bottom:1px solid var(--line);z-index:20}
#weapon-search [hidden]{display:none !important}
#weapon-search-form{display:flex;align-items:center;gap:8px;margin:0}
#weapon-search-form label{font-weight:bold;color:var(--navy);font-size:14px;white-space:nowrap}
#weapon-query{min-width:0;flex:1;box-sizing:border-box;padding:7px 10px;border:1px solid var(--navy);font:inherit;font-size:14px}
#weapon-search-form button{font:inherit;font-size:14px;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:7px 12px;cursor:pointer}
#weapon-search-status{margin:4px 0 0;font-size:12px;color:var(--muted)}
#weapon-search-status:empty{display:none}
#weapon-search-results{position:absolute;top:100%;left:12px;right:12px;border:1px solid var(--navy);background:#fff;max-height:420px;overflow:auto;z-index:30}
.weapon-hit{padding:10px 12px;border-bottom:1px solid var(--line);border-left:3px solid transparent;background:#fff}
.weapon-hit:last-child{border-bottom:0}
.weapon-hit>a:first-child{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--navy);text-decoration:underline}
.weapon-hit>a:first-child:hover,.weapon-hit>a.on{background:var(--sub)}
.weapon-hit img{background:#000;flex:none}
.weapon-hit span{min-width:0;overflow-wrap:anywhere}
.weapon-hit small{display:block;font-size:12px;color:#505d71;text-decoration:none;margin-top:2px}
.weapon-hit p{margin:3px 0 0;font-size:12px;overflow-wrap:anywhere;line-height:1.5}
.weapon-drop-link{font-size:12px;display:inline-block;margin-top:2px}

/* 検索候補: 短いラベルと値を揃え、名称・限定条件・性能を見比べやすくする。 */
.search-badges{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px;padding:0;list-style:none}
.search-badges li{color:var(--navy);background:#e6edf8;border:1px solid #92a8cf;border-radius:3px;padding:2px 7px;font-size:12px;font-weight:bold;line-height:1.5}
.search-effect,.search-fields{margin:8px 0;font-size:13px;line-height:1.5}
.search-field{display:grid;grid-template-columns:5em minmax(0,1fr);gap:8px;padding:4px 0;min-width:0}
.search-field dt{font-weight:bold;color:var(--navy)}
.search-field dd{margin:0;min-width:0;overflow-wrap:anywhere}
.search-effect{background:#f0f4fa;border-left:3px solid var(--bar);padding:6px 8px}
.search-effect .search-field{padding:0;grid-template-columns:4.4em minmax(0,1fr)}
.search-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0;font-size:12px;color:var(--navy)}
.search-metrics>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;background:#f3f5f8;border:1px solid #d0d9e7;border-radius:3px;padding:5px 8px}
.search-metrics dt{font-weight:bold}
.search-metrics dd{margin:0;text-align:right}
.search-metrics strong{font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums}
.search-metrics dd small{font-size:10px;color:#505d71;margin:2px 0 0;display:block}
.search-fields .search-field+.search-field{border-top:1px solid #e2e7ef}
.search-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.search-fields .search-field{border-top:1px solid #e2e7ef}
.search-no-drop{display:inline-block;color:#505d71;font-size:12px}
.search-extra{font-size:12px;border-top:1px dashed #bbc8dc;margin-top:8px;padding-top:2px;color:#505d71}
.search-extra summary{cursor:pointer;padding:6px 0;min-height:28px;box-sizing:border-box;color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.search-extra p{font-size:12px!important;line-height:1.5;margin:4px 0!important}
.search-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;border-top:1px solid #d0d9e7;margin-top:6px;padding-top:2px}
.search-actions a{display:inline-flex;align-items:center;min-height:36px;margin:0;padding:2px 5px;box-sizing:border-box;font-size:13px;font-weight:bold;color:var(--navy)}
.sd-search-hit.search-selected,.weapon-hit.search-selected,.sd-search-hit:focus-within,.weapon-hit:focus-within{background:#f4f7fc;border-left-color:var(--bar)}
#sd-suggestions button:focus-visible,.search-actions a:focus-visible,.search-extra summary:focus-visible,.weapon-hit>a:first-child:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media(max-width:420px){
  .sd-search-hit,.weapon-hit{padding:8px}
  .search-metrics>div{padding:5px 6px;gap:3px}
  .search-field{grid-template-columns:4.5em minmax(0,1fr);gap:5px}
  .search-fields{grid-template-columns:minmax(0,1fr)}
  .search-effect .search-field{display:block}
  .search-effect dt{margin-bottom:3px}
  #sd-suggestions em{white-space:nowrap}
  .search-actions a,.search-extra summary{min-height:44px}
}

/* 候補はページ内で表示し、補足も同じカードの中で自然に伸ばす。 */
#sd-suggestions,#weapon-search-results,.sd-floating #sd-suggestions{position:static;max-height:none;overflow:visible;margin:0;width:auto;border:1px solid var(--line);background:#fff}
.sd-floating{z-index:40}
.sd-floating-bar{position:sticky;top:0;background:var(--sub);z-index:2}
.search-result-panel{height:auto;background:#fff}
.search-result-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;background:var(--navy);color:#fff;font-size:12px}
.search-result-heading b{white-space:nowrap;font-size:14px}
.search-result-heading button,#sd-suggestions .search-result-heading button{width:auto;min-height:36px;padding:3px 9px;border:1px solid #a8bedf;border-radius:3px;background:#fff;color:var(--navy);font:inherit;white-space:nowrap}
.search-result-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;overflow:visible}
.search-hit-card{border:1px solid #bdcbe0;background:#fff;padding:8px;min-width:0;align-self:start}
.search-hit-card.is-current{outline:2px solid var(--bar);outline-offset:-2px;background:#f4f7fc}
.search-candidate{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.search-candidate img{flex:none;background:#000}
.search-candidate-name{min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:1.4}
.search-candidate-name small,#sd-suggestions .search-candidate-name small{font-size:11px;display:block;color:#505d71;margin-top:1px}
.search-candidate:focus-visible,summary:focus-visible,.search-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.search-card-effect{margin:5px 0;font-size:12px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.search-card-stats{display:flex;flex-wrap:wrap;gap:4px 12px;margin:5px 0;font-size:12px;color:var(--navy)}
.search-card-stats span{white-space:nowrap}
.search-hit-card .search-badges{margin:4px 0}
.search-card-more{font-size:12px;margin-top:4px}
.search-card-more>summary{cursor:pointer;color:var(--navy);text-decoration:underline;min-height:32px;display:list-item;align-content:center;line-height:1.5}
.search-card-more[open]{border-top:1px solid var(--line);margin-top:6px}
.search-card-more .search-badges,.search-card-more .search-metrics{display:none}
.search-card-more .search-fields{grid-template-columns:minmax(0,1fr)}
.search-hit-card:has(.search-card-more[open])>.search-card-effect{display:none}
.search-hit-card .search-actions{justify-content:flex-start;margin-top:4px;padding-top:4px}
#sd-suggestions .search-actions button{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:36px;padding:5px 8px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:3px;font:inherit;font-size:12px;line-height:1.3}
#weapon-search-results{margin-top:8px}
@media(max-width:760px){
  .search-result-list{grid-template-columns:minmax(0,1fr);gap:6px;padding:6px}
  .search-result-heading{padding:6px 8px}
  .search-result-help{font-size:11px}
  .search-hit-card{padding:7px}
  .search-candidate-name{font-size:16px}
  .search-candidate-name small,#sd-suggestions .search-candidate-name small{font-size:12px}
  .search-card-effect,.search-card-more{font-size:14px}
  .search-card-stats{font-size:13px}
  #sd-suggestions .search-actions button{font-size:14px}
  .search-card-more>summary,#sd-suggestions .search-actions button{min-height:44px}
  #weapon-search-form{flex-wrap:wrap;gap:5px}
  #weapon-search-form label{width:100%}
}
@media(max-width:560px){
  #header{height:auto;min-height:0;padding:5px 6px;gap:6px}
  .home-logo{flex-basis:42%;max-width:none}
  .title-logo{height:auto}
  #logo .l1{font-size:clamp(19px,6vw,30px);letter-spacing:0}
  #logo .en{font-size:9px;letter-spacing:1.5px}
}

/* 検索語の一致と、検索状態をカードから区別する。 */
.search-match{background:#e3edff;color:inherit;font-weight:inherit;padding:0 1px;border-radius:2px}
.search-notice{padding:10px 12px;margin:10px 0;border:2px solid #ab3e32;background:#fff4f1;color:#3b201d;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.search-notice strong,.search-notice span{display:block}
.search-notice strong{font-size:15px;font-weight:700}
#sd-search-status.search-notice,#weapon-search-status.search-notice{font-size:14px;color:#3b201d;margin:10px 0;line-height:1.6}
#sd-search-status.search-notice[data-state="pending"],#weapon-search-status.search-notice[data-state="pending"]{color:#18355d}
#sd-search-status.search-notice[data-state="empty"],#weapon-search-status.search-notice[data-state="empty"],#sd-search-status.search-notice[data-state="unread"],#weapon-search-status.search-notice[data-state="unread"]{color:#4b3916}
.search-notice[data-state="pending"]{border-color:#7190b9;background:#f2f6fc;color:#18355d}
.search-notice[data-state="empty"],.search-notice[data-state="unread"]{border-color:#9b7420;background:#fff9e9;color:#4b3916}
.search-notice[data-state="choose"]{border-color:#7190b9;background:#f2f6fc;color:#18355d}
.search-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.search-choices button{font:inherit;font-size:14px;padding:6px 12px;border:1px solid #18355d;background:#fff;color:#18355d;cursor:pointer;min-height:36px}
.search-choices button:hover,.search-choices button:focus-visible{background:#18355d;color:#fff}
#sd-count,#sd-search-status,#weapon-search-status{overflow-wrap:anywhere}
.search-episodes{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:4px 0 8px;font-size:13px}
.search-episodes small{font-size:inherit;color:#455a77}
.search-episodes>span{padding:1px 7px;border:1px solid #9aaecd;border-radius:3px;background:#edf3ff;color:#12335c}

/* 武器一覧は、小さな画像と名前・件数を見渡せる入口にする。 */
.weapon-directory-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:3px solid var(--bar);padding:2px 0 10px;margin:10px 0 0}
.weapon-directory-title h1{font-size:27px;color:var(--navy);line-height:1.3;margin:0}
.weapon-directory-title p{margin:0;color:#244b85;font-size:14px;white-space:nowrap}
.weapon-directory-title p span{color:#899cb9}
.weapon-directory-intro{margin:10px 0 18px;color:#344562;font-size:14px;line-height:1.6}
.weapon-directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.weapon-directory-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto 10px;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--line-lt);text-decoration:none;color:var(--navy);min-width:0}
.weapon-directory-card:hover,.weapon-directory-card:focus-visible{background:var(--row);border-color:var(--bar)}
.weapon-directory-card:focus-visible{outline:2px solid var(--bar);outline-offset:2px}
.weapon-directory-card .pic{width:72px;height:72px;object-fit:contain;background:#000;margin:0}
.weapon-directory-name{font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.weapon-directory-name small{display:block;color:#587092;font-size:10px;font-weight:400;letter-spacing:.7px;margin-top:4px}
.weapon-directory-count{font-size:12px;white-space:nowrap;color:#587092}
.weapon-directory-count b{display:inline;font-size:19px;line-height:1.2;color:var(--navy);margin-right:2px}
.weapon-directory-arrow{font-size:24px;color:var(--line)}
@media(max-width:760px){
  .weapon-directory-title{align-items:flex-start;flex-direction:column;gap:5px}
  .weapon-directory-title h1{font-size:25px}
  .weapon-directory-title p{font-size:13px}
  .weapon-directory-intro{margin-bottom:14px}
  .weapon-directory-list{grid-template-columns:1fr;gap:8px}
  .weapon-directory-card{grid-template-columns:60px minmax(0,1fr) 42px 8px;gap:10px;padding:9px}
  .weapon-directory-card .pic{width:60px;height:60px}
  .weapon-directory-name{font-size:16px}
}

/* ユニット名は語単位で折り返し、効果欄に幅を残す。 */
table.data.unit-list th:first-child{width:10em}
table.data.unit-list td:first-child{min-width:7em;line-height:1.5;line-break:strict}
.unit-name-part{display:inline-block;white-space:nowrap}
table.data.unit-list td:nth-child(3){min-width:14em;line-height:1.6}
table.data.unit-list td:nth-child(2),table.data.unit-list td:nth-child(n+4){white-space:nowrap}
table.data.mag-list th:first-child{width:7em}
table.data.mag-list td:first-child{min-width:6em;line-break:strict}
@media(max-width:680px){
  #tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  #tabs a{letter-spacing:0;padding-left:3px;padding-right:3px;font-size:11px}
  #tabs li:last-child{grid-column:span 2}
}


/* ---------- 左メニュー (そのセクションの項目だけ。2列の表) と 一覧の表 (2026-10-03 デザイン案2) ---------- */
.gh{background:var(--sub);font-size:12px;font-weight:bold;color:var(--navy);padding:1px 8px;border-top:1px solid var(--line-lt);border-bottom:1px solid var(--line-lt)}
.sidetbl{width:100%;border-collapse:collapse;font-size:12px}
.sidetbl td{width:50%;padding:2px 3px 2px 6px;border-bottom:1px dotted var(--line-lt);vertical-align:middle}
.sidetbl a{text-decoration:none;color:var(--link)}
.sidetbl a:hover{text-decoration:underline}
.sidetbl a.on{font-weight:bold;color:var(--navy)}
.sidetbl i.chip{display:inline-block;width:9px;height:9px;border:1px solid #000;margin-right:4px;vertical-align:middle}
.sidelink{margin:3px 8px;font-size:13px}
.cattbl{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:14px;background:#fff}
.cattbl th{background:var(--bar);color:#fff;text-align:left;padding:3px 8px;font-size:13px;border:1px solid var(--line)}
.cattbl td{border:1px solid var(--line);padding:3px 8px;vertical-align:middle}
.cattbl tbody tr:nth-child(even){background:var(--row)}
.cattbl td.ic{width:42px;padding:2px;text-align:center}
.cattbl td.ic img,.cattbl td.ic .noimg{display:inline-block;vertical-align:middle;border:1px solid #000;background:#000}
.cattbl .en{font:11px Verdana,sans-serif;color:var(--muted);margin-left:6px}
.cattbl .ds{font-size:12px;color:var(--muted);margin-left:8px}

/* 分類ページの表 (武器の一覧): 行を少し高く、武器名を大きく */
table.data.list.thumbs td{vertical-align:middle;padding:4px 6px}
table.data.list.thumbs td .wcell a{font-size:15px}
table.data.list.thumbs th{font-size:13px}
table.data.list.thumbs{table-layout:auto}
table.data.list.thumbs th:nth-child(1){width:38%}
table.data.list.thumbs th:nth-child(2){width:15%}
table.data.list.thumbs th:nth-child(3){width:7%}
table.data.list.thumbs th:nth-child(4){width:12%}
table.data.list.thumbs th:nth-child(5){width:7%}
table.data.list.thumbs th:nth-child(6){width:21%}

/* 一覧の表 (名前と入手方法だけ。1行で読める。PCもスマートフォンも同じ。2026-10-03 ユーザーの指示) */
table.simple{width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid var(--line);background:#fff}
table.simple th,table.simple td{border:1px solid var(--line-lt);padding:4px 6px;text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.simple thead th{background:var(--bar);color:#fff;font-size:14px}
table.simple tbody tr:nth-child(even) td{background:var(--row)}
table.simple th:nth-child(1){width:62%}
table.simple th:nth-child(2){width:38%}
table.simple .nm a{font-size:15px}
table.simple .nm img.pic{width:40px;height:40px;vertical-align:middle;margin-right:8px;border:1px solid #000;background:#000;object-fit:contain}
table.simple .nm .area{font-size:12px;color:var(--muted)}
table.simple .nm .weapon-variant{font-size:12px;color:var(--muted)}
table.simple .tag{font-size:11px;margin-left:6px;vertical-align:1px}
@media (max-width:760px){
  table.simple th,table.simple td{font-size:13px;padding:3px 4px}
  table.simple .nm a{font-size:14px}
  table.simple .nm img.pic{width:30px;height:30px;margin-right:5px}
  table.simple th:nth-child(1){width:60%}
  table.simple th:nth-child(2){width:40%}
}
/* 左メニューの2列の表: 列の間をせまく */
.sidetbl{width:auto}
.sidetbl td{width:auto;padding:2px 10px 2px 8px}
.cattbl td.ic{width:56px}
table.simple .nm img.pic{display:inline-block !important}
/* スマートフォン: 入手方法の列を広げ、限定の目印は小さく。名前の列は ... で切る */
@media (max-width:760px){
  table.simple th:nth-child(1){width:52%}
  table.simple th:nth-child(2){width:48%}
  table.simple .tag{font-size:10px;margin-left:3px;padding:0 2px}
  table.simple .nm .area{display:none}
  table.simple .nm.has-variant .weapon-label{display:inline-block;vertical-align:middle;max-width:calc(100% - 39px);white-space:normal;overflow-wrap:anywhere;line-height:1.45}
  table.simple .nm .weapon-variant{display:block;white-space:normal}
}
@media (max-width:760px){ table.simple .tag{display:none} }
/* 一覧の表: 画像がない品の黒い枠も、画像と同じ大きさ・同じ行の高さにそろえる */
table.simple .nm span.pic{display:inline-block !important;width:40px !important;height:40px !important;vertical-align:middle;margin-right:8px}
@media (max-width:760px){
  table.simple .nm span.pic{width:30px !important;height:30px !important;margin-right:5px}
}
@media (max-width:760px){
  table.simple th:nth-child(1){width:64%}
  table.simple th:nth-child(2){width:36%}
}