/* バレル研磨の種類（page-barrel-types.php）— デザイン: build_a_sub1.py types_page() */

.rn-bt .rn-section { padding: clamp(60px, 7vw, 76px) 0; }
.rn-bt table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; background: none; font-size: 15px; line-height: 1.8; }
.rn-bt :where(th, td) { padding: 0; border: 0; background: none; text-align: left; vertical-align: middle; font-weight: 400; color: inherit; }

/* 小見出し（等幅の注記） */
.rn-bt-cap { font-family: var(--rn-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--rn-ink); }
.rn-dark .rn-bt-cap { color: var(--rn-gold-on-dark); }

/* 01 比較表（個別バレルの行だけ反転） */
.rn-bt-table { margin-top: 44px !important; border-bottom: 1px solid var(--rn-line-light) !important; }
.rn-bt-table thead th { padding: 0 0 14px; font-family: var(--rn-font-mono); font-size: 11px; letter-spacing: .06em; color: rgba(17, 18, 20, 0.65); }
.rn-bt-table thead th:first-child { width: 220px; }
.rn-bt-table thead th:nth-child(2), .rn-bt-table thead th:nth-child(3), .rn-bt-table thead th:nth-child(4) { width: 170px; }
.rn-bt-table tbody :where(th, td) { height: 62px; border-top: 1px solid var(--rn-line-light); }
.rn-bt-table tbody th { font-size: 21px; }
.rn-bt-table tbody td { font-size: 15px; }
.rn-bt-table__use { font-size: 14px !important; color: var(--rn-sub-light); }
.rn-bt-table tr.is-highlight { background: var(--rn-ink); color: #fff; }
.rn-bt-table tr.is-highlight > * { border-top-color: var(--rn-ink); }
.rn-bt-table tr.is-highlight th { padding-left: 20px; }
.rn-bt-table tr.is-highlight .rn-bt-table__use { color: rgba(255, 255, 255, 0.8); }
.rn-bt-table tr.is-highlight strong { font-size: 22px; font-weight: 600; color: var(--rn-gold-on-dark); }

/* 各方式 */
.rn-bt-type__top { display: flex; gap: 64px; }
.rn-bt-type__intro { flex: 1; min-width: 0; }
.rn-bt-type__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rn-bt-badge { padding: 3px 12px; background: var(--rn-ink); color: #fff; font-size: 12px; font-weight: 700; }
.rn-dark .rn-bt-badge { background: var(--rn-gold); color: var(--rn-ink); }
.rn-bt-type__title { margin-top: 22px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; }
.rn-dark .rn-bt-type__title { color: #fff; }
.rn-bt-type__texts > div:first-child { margin-top: 28px; }
.rn-bt-type__texts > div + div { margin-top: 22px; }
.rn-bt-type__summary { margin-top: 8px; font-size: 15px; line-height: 2; }
.rn-bt-type__principle { margin-top: 8px; font-size: 14px; line-height: 2; color: var(--rn-sub-light); }
.rn-dark .rn-bt-type__summary { color: #fff; }
.rn-dark .rn-bt-type__principle { color: var(--rn-sub-dark); }
.rn-bt-type__photo { --rn-tombo: var(--rn-ink); width: 560px; height: 360px; flex-shrink: 0; margin: 0; }
.rn-dark .rn-bt-type__photo { --rn-tombo: #fff; }
.rn-bt-type__drum { width: 600px; flex-shrink: 0; }
.rn-bt-type__drum svg { display: block; width: 100%; max-width: none; height: auto; }

/* 図・写真が無い方式（流動）は概要と原理を2列に */
.rn-bt-type--novisual .rn-bt-type__texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.rn-bt-type--novisual .rn-bt-type__texts > div + div { margin-top: 28px; }

.rn-bt-type__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 44px; }
.rn-bt-spec { margin-top: 8px !important; border-bottom: 1px solid var(--rn-line-light) !important; }
.rn-bt-spec :where(th, td) { padding: 10px 0; border-top: 1px solid var(--rn-line-light); }
.rn-bt-spec th { width: 130px; padding-right: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.rn-bt-spec th small { display: block; font-size: 10.5px; font-weight: 400; color: rgba(17, 18, 20, 0.6); }
.rn-bt-spec td { font-size: 14.5px; line-height: 1.8; }
.rn-dark .rn-bt-spec, .rn-dark .rn-bt-spec :where(th, td) { border-color: var(--rn-line-dark) !important; }
.rn-dark .rn-bt-spec th small { color: var(--rn-gold-on-dark); }

.rn-bt-bullets { margin-top: 8px; border-bottom: 1px solid rgba(17, 18, 20, 0.14); }
.rn-bt-bullets li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(17, 18, 20, 0.14); font-size: 13px; line-height: 1.75; }
.rn-dark .rn-bt-bullets, .rn-dark .rn-bt-bullets li { border-color: rgba(255, 255, 255, 0.14); }

.rn-bt-type__uses { display: flex; align-items: center; gap: 22px; margin-top: 32px; }
.rn-bt-type__uses .rn-bt-cap { white-space: nowrap; }
.rn-bt-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.rn-bt-tags li { padding: 6px 13px; border: 1px solid rgba(17, 18, 20, 0.3); font-size: 13px; line-height: 1.6; }
.rn-dark .rn-bt-tags li { border-color: rgba(255, 255, 255, 0.35); }

.rn-bt-type__extra { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 36px; padding: 24px 30px; border: 1px solid var(--rn-gold); }
.rn-bt-type__extra p { font-size: 14.5px; line-height: 1.9; }
.rn-bt-type__extra .rn-link { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   タブレット・スマホ
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .rn-bt-type__photo { width: 440px; height: 300px; }
  .rn-bt-type__drum { width: 460px; }
  .rn-bt-type__summary br, .rn-bt-type__principle br { display: none; }
}
@media (max-width: 1100px) {
  .rn-bt-type__top { flex-direction: column; gap: 36px; }
  .rn-bt-type__photo { width: 100%; height: auto; aspect-ratio: 14 / 9; }
  .rn-bt-type__drum { width: 100%; max-width: 560px; }
  .rn-bt-type__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rn-bt .rn-head-row { align-items: flex-start; }
  .rn-bt .rn-lead br { display: none; }

  /* 比較表は方式ごとのブロックに組み替える */
  .rn-bt-table thead { display: none; }
  .rn-bt-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 16px 0; border-top: 1px solid var(--rn-line-light); }
  .rn-bt-table tbody :where(th, td) { height: auto; border: 0; }
  .rn-bt-table tbody th { grid-column: 1 / -1; font-size: 19px; }
  .rn-bt-table tbody td::before { content: attr(data-label); display: block; font-family: var(--rn-font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(17, 18, 20, 0.6); }
  .rn-bt-table__use { grid-column: 1 / -1; }
  .rn-bt-table tr.is-highlight { margin: 0 calc(var(--rn-pad) * -1); padding-left: var(--rn-pad); padding-right: var(--rn-pad); }
  .rn-bt-table tr.is-highlight th { padding-left: 0; }
  .rn-bt-table tr.is-highlight td::before { color: rgba(255, 255, 255, 0.6); }
  .rn-bt-table tr.is-highlight strong { font-size: 18px; }

  .rn-bt-type__title { font-size: clamp(26px, 7.4vw, 34px); }
  .rn-bt-type__summary { font-size: 14.5px; line-height: 1.95; }
  .rn-bt-type--novisual .rn-bt-type__texts { grid-template-columns: 1fr; gap: 0; }
  .rn-bt-type--novisual .rn-bt-type__texts > div + div { margin-top: 22px; }
  .rn-bt-type__drum { margin: 0 -10px; width: calc(100% + 20px); }
  .rn-bt-type__cols { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .rn-bt-spec th { width: 110px; }
  .rn-bt-bullets li { align-items: flex-start; }
  .rn-bt-bullets li .rn-mark { margin-top: 6px; }
  .rn-bt-type__uses { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rn-bt-type__extra { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 20px; }
  .rn-bt-type__extra p br { display: none; }
}

/* 長い文が途中の1〜2文字だけ次行へ落ちないよう、日本語の文節で折り返す（対応ブラウザのみ） */
.rn-bt :where(p, td, li) { word-break: auto-phrase; }

/* 最後の方式（暗い面）と相談欄（暗い面）が続くため、境目に罫線を引く */
.rn-bt-type:last-child { border-bottom: 1px solid var(--rn-line-dark); }