:root{ --ink:#222; --muted:#555; --line:#ccc; --accent:#c7361a; --paper:#fff; }
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
	font-family: tot-shizukardmin-stdn, sans-serif;
	line-height:1.7;
	letter-spacing:.02em;font-size:14px}
.wrap{max-width:1000px;margin:0 auto;padding:60px 100px 80px}
/* ====== 公式引用文スタイル ====== */
.official-quote {
  border-left: 4px solid var(--accent);
  background: #f5f5f5;
  padding: 24px 28px;
  margin: 40px 0;
  font-size: 13.5px;
  line-height: 1.9;
  position: relative;
}
.official-quote::before,
.official-quote::after {
  position: absolute;
  color: var(--accent);
  font-size: 42px;
  opacity: 0.25;
  font-family: serif;
}
.official-quote::before {
  content: '';
  top: -10px;
  left: 8px;
}
.official-quote::after {
  content: '';
  bottom: -25px;
  right: 12px;
}
.official-quote footer {
  text-align: right;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}


/* ====== セクション ====== */
.panel{border:1px solid var(--line);background:var(--paper);margin-bottom:60px;padding:0 40px}
.panel h2{border-bottom:1px solid var(--line);font-size:16px;font-weight:700;padding:12px 0;margin:0}
.panel .sub{color:var(--muted);font-size:12px;padding:8px 0;border-bottom:1px solid var(--line)}


/* ====== 表 ====== */
.table-wrap{overflow-x:auto;margin:0 0 30px}
.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table th,.table td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
.table th{text-align:left;color:var(--muted);font-size:12px;font-weight:600}
.table td{font-size:13px}
.table tr:hover{background:#fafafa}
/* 画面端の見え方調整：札番（左）と備考（右）だけ外側余白を広げる */
.table th:first-child,.table td:first-child{padding-left:40px;padding-right:6px}
.table th:last-child,.table td:last-child{padding-right:40px;padding-left:6px}
/* 札番列が横に広がらないよう固定幅 */
.table th:nth-child(1),.table td:nth-child(1){width:56px}


.no{font-variant-numeric:tabular-nums;font-weight:700;color:#444}
.badges{display:flex;flex-wrap:wrap;gap:4px}
.badge{display:inline-block;border:1px solid var(--line);font-size:11px;padding:1px 4px}
.featured{background:#fff3ef}
.flag{color:var(--accent);font-weight:700}


/* ====== 箇条書き ====== */
.facts{padding:12px 0}
.facts ul{list-style:none;margin:0;padding:0}
.facts li{border-bottom:1px solid var(--line);padding:6px 0;font-size:13px}


/* ====== スマホ最適化（~680px） ====== */
@media (max-width:680px){
body{font-size:15px; line-height:1.8}
.wrap{padding:28px 16px 56px; max-width:none}
.panel{margin-bottom:28px; padding:0 12px}
.panel h2{padding:10px 0; font-size:15px}
.panel .sub{padding:6px 0; font-size:12px}


/* テーブルをカード化 */
.table{display:block}
.table thead{display:none}
.table tbody{display:block}
.table tr{display:block; border-bottom:1px solid var(--line); padding:10px 0}
.table td{display:grid; grid-template-columns: 9em 1fr; gap:8px; border:none; padding:6px 4px}
.table td::before{content: attr(data-label); color:var(--muted)}


/* 端の余白（札番左／備考右）はカード内で自然に吸収 */
.table td:first-child{padding-left:4px}
.table td:last-child{padding-right:4px}


.badges{gap:6px}
.badge{font-size:12px}
}