@charset "utf-8";

/* ============================================================
   ランキング・比較表メーカー
   ------------------------------------------------------------
   [A] サイト共通の枠（ヘッダー / フッター）
       既存サイトの CSS を読み込む運用に切り替える場合は、
       このブロックだけ削除すれば競合しません。
   [B] ツール本体   … すべて .rm- 接頭辞
   ============================================================ */


/* ============================================================
   [A] サイト共通の枠
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 游ゴシックは Windows だと Regular が極端に細く、色が薄く見える。
   Medium を先に指定して、太字以外の本文がかすれないようにする。 */
:root {
  --rm-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "游ゴシック Medium", "YuGothic",
             "Yu Gothic", "游ゴシック", "Meiryo", "メイリオ",
             system-ui, -apple-system, sans-serif;
}

body {
  margin: 0;
  background: #f6f8f7;
  color: #1b2422;
  font-family: var(--rm-font);
  font-size: 16px;
  line-height: 1.8;
  /* -webkit-font-smoothing: antialiased は macOS で文字を細くするため使わない */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

img { max-width: 100%; height: auto; }

.site-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e2eae8;
}

.site-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #12403a;
  text-decoration: none;
}
.site-logo span { color: #0b7a63; }

.site-footer {
  margin-top: 48px;
  padding: 28px 16px 36px;
  background: #12403a;
  color: #d8e8e4;
  font-size: 13px;
  line-height: 1.9;
}
.site-footer a { color: #b8e6d9; }
.site-footer a:hover { color: #fff; }

.footer-category-label {
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.footer-category-list,
.footer-links {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}
.footer-category-list a,
.footer-links a {
  display: inline-block;
  padding: 6px 0;   /* タップ領域を 24px 以上に */
}
.footer-notice { margin-bottom: 18px; }
.footer-copy { margin: 0; color: #9dbcb4; }


/* ============================================================
   [B] ツール本体
   ============================================================ */

:root {
  --rm-bg: #ffffff;
  --rm-fg: #1b2422;
  --rm-muted: #56655f;
  --rm-line: #dbe5e2;
  --rm-soft: #f4f8f7;
  --rm-accent: #0b6f5a;
  --rm-accent-dark: #075443;
  --rm-accent-soft: #e6f3f0;
  --rm-danger: #a3342a;
  --rm-gold: #a97d10;
  --rm-silver: #6b7780;
  --rm-bronze: #8d5a2b;
  --rm-r: 12px;
  --rm-focus: #0b6f5a;
}

.rm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rm-accent);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
}
.rm-skip:focus { left: 0; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rm-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.rm-page {
  max-width: 940px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

/* --- 見出し・文章 --- */

.rm-breadcrumb { font-size: 12px; color: var(--rm-muted); }
.rm-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 8px 0 4px;
  padding: 0;
}
.rm-breadcrumb li { display: flex; align-items: center; }
.rm-breadcrumb li + li::before { content: "›"; margin-right: 6px; color: #9aa8a3; }
.rm-breadcrumb a {
  display: inline-block;
  padding: 5px 0;   /* タップ領域を 24px 以上に */
  color: var(--rm-muted);
}

.rm-h1 {
  font-size: clamp(22px, 5.4vw, 30px);
  line-height: 1.4;
  margin: 8px 0 10px;
  letter-spacing: .01em;
}

.rm-h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.5;
  margin: 0 0 14px;
}

.rm-step {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rm-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.rm-h3 {
  font-size: 16px;
  margin: 22px 0 8px;
  padding-left: 10px;
  border-left: 4px solid var(--rm-accent);
  line-height: 1.5;
}

.rm-lead { margin: 0 0 14px; }
.rm-lead strong { color: var(--rm-accent-dark); }

.rm-privacy {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--rm-accent-soft);
  border-radius: var(--rm-r);
  font-size: 13px;
  line-height: 1.7;
  color: #114b3f;
}
.rm-privacy-mark {
  flex: none;
  margin-top: 3px;
  color: #0f6b57;
}

.rm-hint {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rm-muted);
}
.rm-hint-icon {
  display: inline-block;
  padding: 0 4px;
  background: #eef3f1;
  border-radius: 4px;
}

.rm-note {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--rm-muted);
}

.rm-prose p, .rm-prose li { font-size: 15px; }
.rm-ol, .rm-ul { padding-left: 1.4em; margin: 0 0 14px; }
.rm-ol li, .rm-ul li { margin-bottom: 4px; }
code {
  background: #eef3f1;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .92em;
}

/* --- パネル --- */

.rm-panel, .rm-prose, .rm-faq {
  background: var(--rm-bg);
  border: 1px solid var(--rm-line);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 18px;
}

/* --- フォーム --- */

.rm-field { margin: 0 0 12px; }
.rm-field > label,
.rm-fieldset > legend {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #2e3d38;
  margin-bottom: 4px;
}

input[type="text"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 16px; /* iOS の自動ズーム防止 */
  color: var(--rm-fg);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 10px;
}
input[type="text"]:hover, select:hover, textarea:hover { border-color: #9db5ae; }

/* コメント欄。改行して書ける */
textarea {
  min-height: 66px;
  line-height: 1.6;
  resize: vertical;
  overflow: hidden;   /* 高さは中身に合わせて JS が伸ばす */
}
input[readonly] { background: var(--rm-soft); color: var(--rm-muted); }

.rm-grid2 { display: grid; gap: 0 14px; }
@media (min-width: 620px) {
  .rm-grid2 { grid-template-columns: 1fr 1fr; }
}

.rm-fieldset {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-r);
  padding: 10px 14px 14px;
  margin: 0 0 16px;
}
.rm-fieldset > legend { padding: 0 6px; margin: 0; }

.rm-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-radio { flex: 1 1 120px; }
.rm-radio input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.rm-radio label {
  display: block;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #c3d1cd;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.rm-radio label small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--rm-muted);
}
.rm-radio input:checked + label {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
  color: #fff;
}
.rm-radio input:checked + label small { color: #d7ece6; }

/* 各比率に何件入るか */
.rm-fit { font-weight: 700; color: var(--rm-accent-dark); }
.rm-fit.is-short { color: var(--rm-danger); }
.rm-radio input:checked + label .rm-fit { color: #fff; }
.rm-radio input:checked + label .rm-fit.is-short { color: #ffd9d4; }

.rm-fitnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fdf3f1;
  border: 1px solid #e6cbc6;
  border-radius: var(--rm-r);
  font-size: 13px;
  line-height: 1.7;
  color: #7a2a20;
}
.rm-fitnote strong { color: var(--rm-danger); }
.rm-radio input:focus-visible + label {
  outline: 3px solid var(--rm-focus);
  outline-offset: 2px;
}

/* --- ボタン --- */

.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rm-accent-dark);
  background: #fff;
  border: 1px solid var(--rm-accent);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rm-btn:hover { background: var(--rm-accent-soft); }
.rm-btn:active { transform: translateY(1px); }

.rm-btn-main {
  color: #fff;
  background: var(--rm-accent);
}
.rm-btn-main:hover { background: var(--rm-accent-dark); }

.rm-btn-quiet {
  color: var(--rm-muted);
  border-color: #c3d1cd;
  font-weight: 400;
}
.rm-btn-quiet:hover { background: var(--rm-soft); }

.rm-btn[disabled] { opacity: .5; cursor: not-allowed; }

.rm-rowbtns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.rm-rowbtns-end { justify-content: flex-end; margin-top: 18px; }
.rm-count { font-size: 13px; color: var(--rm-muted); }

.rm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.rm-actions .rm-btn { flex: 1 1 auto; }

.rm-hidden { display: none !important; }

/* --- 項目リスト（編集） --- */

.rm-items { list-style: none; margin: 0; padding: 0; }

.rm-item {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-r);
  background: #fff;
  padding: 8px 10px 10px;
  margin-bottom: 10px;
}
.rm-item.is-dragging {
  opacity: .55;
  border-style: dashed;
  border-color: var(--rm-accent);
  background: var(--rm-accent-soft);
}
.rm-item.is-moved {
  animation: rm-flash .5s ease;
}
@keyframes rm-flash {
  from { background: var(--rm-accent-soft); }
  to   { background: #fff; }
}

.rm-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 順位の丸がドラッグの取っ手を兼ねる */
.rm-handle {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--rm-accent);
  border: none;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.rm-handle:hover { background: var(--rm-accent-dark); }
.rm-handle:active { cursor: grabbing; }

.rm-item-head input[type="text"] { flex: 1 1 auto; min-width: 0; }

.rm-item-tools {
  flex: none;
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.rm-mini {
  flex: none;
  width: 38px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--rm-accent-dark);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 8px;
  cursor: pointer;
}
.rm-mini:hover:not([disabled]) { background: var(--rm-accent-soft); }
.rm-mini[disabled] { opacity: .3; cursor: not-allowed; }
.rm-mini-del { color: var(--rm-danger); border-color: #e0cbc8; }
.rm-mini-del:hover { background: #fbf1f0; }

/* 狭い画面では項目名を2段目に送って入力幅を確保する */
@media (max-width: 560px) {
  .rm-item-head { flex-wrap: wrap; }
  .rm-item-head input[type="text"] { order: 2; flex: 1 1 100%; }
}

/* --- セル（ラベルと入力を横並びにして1行に収める） --- */

.rm-cells {
  display: grid;
  gap: 6px 14px;
  margin-top: 8px;
}
@media (min-width: 760px) {
  .rm-cells { grid-template-columns: 1fr 1fr; }
}

.rm-cell {
  display: grid;
  grid-template-columns: fit-content(38%) 1fr;
  align-items: start;   /* コメント欄が伸びても見出しは1行目の高さに留める */
  gap: 8px;
  min-width: 0;
}

/* 見出しは押せる。列に対する操作の入口はここだけ */
.rm-celllabel {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--rm-accent-dark);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.rm-celllabel::after {
  content: "▾";
  flex: none;
  font-size: 10px;
  opacity: .55;
}
.rm-celllabel:hover {
  background: var(--rm-accent-soft);
  border-color: #b9cbc6;
}
.rm-cell-in {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rm-cell-in input,
.rm-cell-in select { min-width: 0; }
.rm-unit {
  flex: none;
  font-size: 13px;
  color: var(--rm-muted);
}

/* --- 「比べる内容」の設定ダイアログ --- */

.rm-axpanel-grid {
  display: grid;
  gap: 8px 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .rm-axpanel-grid { grid-template-columns: 2fr 1.3fr 1fr; }
}
.rm-axpanel-grid .rm-field { margin: 0; }

.rm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  color: #2e3d38;
  cursor: pointer;
}
.rm-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rm-accent);
  cursor: pointer;
}

.rm-axpanel-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0 0 10px;
  padding-left: 28px;
  font-size: 12px;
  color: var(--rm-muted);
}
.rm-linkbtn {
  min-height: 34px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--rm-accent-dark);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 999px;
  cursor: pointer;
}
.rm-linkbtn:hover { background: var(--rm-accent-soft); border-color: var(--rm-accent); }

.rm-fill {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--rm-soft);
  border-radius: 10px;
}
.rm-fill > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2e3d38;
  margin-bottom: 4px;
}
.rm-fill-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-fill-row .rm-cell-in { flex: 1 1 auto; min-width: 0; }
.rm-fill-row .rm-btn { flex: none; }

.rm-axpanel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rm-btn-sm { min-height: 40px; padding: 6px 16px; font-size: 13px; }

.rm-danger-btn {
  margin-left: auto;
  min-height: 40px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-danger);
  background: #fff;
  border: 1px solid #e0cbc8;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.rm-danger-btn:hover { background: #fbf1f0; }

.rm-push-end { margin-left: auto; }

.rm-details {
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-r);
  padding: 0;
  margin: 16px 0 0;
  background: #fff;
}
.rm-details > summary {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.rm-details > summary:hover { background: var(--rm-soft); }

/* 中身は専用のラッパーで余白を作る。
   要素を直接指定すると、中のボタンの padding まで奪ってしまう。
   上を 0 にすると summary の帯に本文がくっつくので、下と揃う量を入れる。 */
.rm-details-body { padding: 12px 14px 14px; }
.rm-details-body > :first-child { margin-top: 0; }
.rm-details-body > :last-child { margin-bottom: 0; }

.rm-faq .rm-details { margin: 0 0 8px; }
/* 下 margin を持たせず、段落が続くときだけ上に間隔を足す。
   末尾に余分な余白が残らないので、上下の余白が揃う。 */
.rm-faq .rm-details-body p { margin: 0; font-size: 15px; }
.rm-faq .rm-details-body p + p { margin-top: 10px; }

/* --- タブ --- */

.rm-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--rm-soft);
  border-radius: 999px;
  margin-bottom: 14px;
}
.rm-tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--rm-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.rm-tab[aria-selected="true"] {
  background: var(--rm-accent);
  color: #fff;
}

/* --- 出力（プレビュー） --- */

/* --o-* は JS が選ばれた配色から流し込む。PNG 側と同じ値 */
.rm-out {
  --o-bg: #fff; --o-fg: #1b2422; --o-muted: #56655f; --o-line: #dbe5e2;
  --o-soft: #f4f8f7; --o-accent: #0b6f5a; --o-onAccent: #fff;
  --o-gold: #a97d10; --o-silver: #6b7780; --o-bronze: #8d5a2b; --o-plain: #93a29d;
  --o-starOn: #d99b12; --o-starOff: #d3d3d3;

  background: var(--o-bg);
  color: var(--o-fg);
  border: 1px solid var(--o-line);
  border-radius: var(--rm-r);
  padding: 18px 14px 14px;
  border-top: 6px solid var(--o-accent);
}

.rm-out-title {
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.4;
  margin: 0 0 4px;
  word-break: break-word;
}
.rm-out-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--o-muted);
  word-break: break-word;
}
.rm-out-foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--o-line);
  font-size: 11px;
  color: var(--o-muted);
  opacity: .8;
}
.rm-out-empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  color: var(--rm-muted);
  font-size: 14px;
}

/* ランキング */
.rm-rank { list-style: none; margin: 0; padding: 0; }
.rm-rank-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--o-soft);
  border: 1px solid var(--o-line);
  border-radius: var(--rm-r);
}
/* カードの見せ方 */
[data-card="outline"] .rm-rank-item {
  background: var(--o-bg);
  border-color: color-mix(in srgb, var(--o-accent) 35%, transparent);
}
[data-card="line"] .rm-rank-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--o-line);
  border-radius: 0;
  margin-bottom: 0;
}
[data-card="line"] .rm-rank-item:last-child { border-bottom: none; }

.rm-medal {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--o-onAccent);
  background: var(--o-plain);
}
.rm-medal-1 { background: var(--o-gold); }
.rm-medal-2 { background: var(--o-silver); }
.rm-medal-3 { background: var(--o-bronze); }

/* 順位の見せ方 */
[data-rank="square"] .rm-medal { border-radius: 8px; }
[data-rank="plain"] .rm-medal {
  background: none;
  color: var(--o-plain);
  font-size: 20px;
}
[data-rank="plain"] .rm-medal-1 { color: var(--o-gold); }
[data-rank="plain"] .rm-medal-2 { color: var(--o-silver); }
[data-rank="plain"] .rm-medal-3 { color: var(--o-bronze); }
[data-rank="crown"] .rm-medal-1 { position: relative; }
[data-rank="crown"] .rm-medal-1::before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  width: 18px; height: 10px;
  transform: translateX(-50%);
  background: var(--o-gold);
  clip-path: polygon(0 100%, 0 18%, 25% 72%, 50% 0, 75% 72%, 100% 18%, 100% 100%);
}

.rm-rank-body { min-width: 0; flex: 1 1 auto; }
.rm-rank-name {
  display: block;
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* 値の段組み。段の割り当ては JS 側で全項目共通に決めているので、
   ここでは「1段＝1ブロック」であることだけを保証する。
   値が空の段も高さを残し、どの項目でも同じ列が同じ段に並ぶようにする */
.rm-vals {
  display: block;
  font-size: 13px;
  line-height: 1.8;
}
/* コメントは折り返す（省略しない）。高さは equalizeVlines() が
   全項目の同じ段どうしで揃えるので、カードの高さは一定に保たれる */
.rm-vline {
  display: block;
  min-height: 1.8em;
  overflow-wrap: anywhere;
}
.rm-val .k { color: var(--o-muted); }
.rm-val .v { font-weight: 700; }
.rm-sep { margin: 0 6px; color: var(--o-line); }
.rm-star { color: var(--o-starOff); letter-spacing: .06em; white-space: nowrap; }
.rm-star b { color: var(--o-starOn); font-weight: inherit; }

/* 比較表 */
.rm-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--o-line);
  border-radius: var(--rm-r);
}
.rm-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 100%;
  font-size: 13px;
  background: var(--o-bg);
}
.rm-table th, .rm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--o-line);
  border-right: 1px solid var(--o-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
}
.rm-table thead th {
  background: var(--o-accent);
  color: var(--o-onAccent);
  font-size: 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.rm-table tbody th[scope="row"] {
  background: var(--o-soft);
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 120px;
  max-width: 180px;
}
.rm-table thead th:first-child {
  left: 0;
  z-index: 2;
  min-width: 120px;
}
.rm-table tr:last-child th,
.rm-table tr:last-child td { border-bottom: none; }
.rm-table th:last-child, .rm-table td:last-child { border-right: none; }
.rm-table td.is-num { text-align: right; white-space: nowrap; }
.rm-rowrank {
  display: inline-block;
  min-width: 18px;
  margin-right: 4px;
  color: var(--o-accent);
}
.rm-scrollnote {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--rm-muted);
}

/* --- 見た目の選択 --- */

.rm-design {
  margin: 0 0 14px;
  padding: 12px;
  background: var(--rm-soft);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-r);
}
.rm-design .rm-field { margin: 0 0 10px; }
.rm-design .rm-field:last-child { margin-bottom: 0; }
.rm-design-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2e3d38;
  margin-bottom: 4px;
}
.rm-design-row { display: flex; flex-wrap: wrap; gap: 6px; }

.rm-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 10px 4px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--rm-fg);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 999px;
  cursor: pointer;
}
.rm-swatch-chip {
  flex: none;
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 3px;
  border: 1px solid;
  border-radius: 50%;
}
.rm-swatch-chip i {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.rm-swatch[aria-checked="true"],
.rm-choice[aria-checked="true"] {
  color: #fff;
  background: var(--rm-accent);
  border-color: var(--rm-accent);
}
.rm-swatch:hover, .rm-choice:hover { border-color: var(--rm-accent); }

.rm-choice {
  min-height: 40px;
  padding: 4px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-accent-dark);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 999px;
  cursor: pointer;
}

/* --- 共有 --- */

.rm-urlfield input { font-size: 13px; }

.rm-sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
}
.rm-sns-label { font-size: 13px; font-weight: 700; color: #2e3d38; }
.rm-sns-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.rm-sns-x    { background: #14171a; }
.rm-sns-line { background: #05922f; }
.rm-sns-fb   { background: #1150a8; }
.rm-sns-btn:hover { opacity: .88; }

.rm-status {
  margin: 12px 0 0;
  min-height: 1.6em;
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-accent-dark);
}
.rm-status.is-error { color: var(--rm-danger); }

/* --- ダイアログ --- */

.rm-dialog {
  width: min(92vw, 560px);
  max-height: 88vh;
  padding: 18px 16px;
  border: none;
  border-radius: 16px;
  color: var(--rm-fg);
  overflow: auto;
}
.rm-dialog::backdrop { background: rgba(10, 25, 21, .55); }

.rm-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.rm-dialog-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}
.rm-dialog-x {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--rm-muted);
  background: #fff;
  border: 1px solid #c3d1cd;
  border-radius: 8px;
  cursor: pointer;
}
.rm-dialog-x:hover { background: var(--rm-soft); }
/* 画像ダイアログは見出し行を使っていないので、単体のときだけ下に余白を足す */
.rm-dialog > .rm-dialog-title { margin-bottom: 12px; }
.rm-dialog-body {
  background: var(--rm-soft);
  border-radius: var(--rm-r);
  padding: 10px;
  text-align: center;
}
.rm-dialog-body img {
  max-width: 100%;
  max-height: 46vh;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.rm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.rm-dialog-actions .rm-btn { flex: 1 1 auto; }


/* ============================================================
   印刷用
   ============================================================ */

@media print {
  @page { margin: 14mm; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-header,
  .site-footer,
  .rm-skip,
  .rm-breadcrumb,
  .rm-h1,
  .rm-lead,
  .rm-privacy,
  .rm-panel:not(.rm-print-keep),
  .rm-prose,
  .rm-faq,
  .rm-dialog { display: none !important; }

  /* 結果パネルだけ残す */
  .rm-print-keep { display: block !important; }
  .rm-print-keep .rm-h2,
  .rm-print-keep .rm-tabs { display: none !important; }

  .rm-page { max-width: none; padding: 0; }

  .rm-panel.rm-print-keep {
    border: none;
    padding: 0;
    margin: 0;
  }

  .rm-out {
    border: none;
    border-top: 3px solid #000;
    border-radius: 0;
    padding: 10px 0 0;
  }
  .rm-out-title { font-size: 16pt; }

  .rm-rank-item,
  .rm-table tr { break-inside: avoid; page-break-inside: avoid; }

  .rm-rank-item {
    background: #fff;
    border: 1px solid #999;
  }
  .rm-medal {
    background: #fff !important;
    color: #000;
    border: 1.5px solid #000;
  }
  .rm-sep { color: #666; }

  .rm-tablewrap { overflow: visible !important; border-color: #999; }
  .rm-table { font-size: 10pt; }
  .rm-table thead th {
    background: #fff !important;
    color: #000;
    border-bottom: 2px solid #000;
    position: static;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rm-table tbody th[scope="row"] {
    background: #fff !important;
    position: static;
  }
  .rm-table th, .rm-table td { border-color: #999; }
  .rm-star { color: #bbb; }
  .rm-star b { color: #000; }
  .rm-scrollnote { display: none; }
}