/*
 * デザイン調整（読みやすさ＋配色の変更。案1：紅＋ゴシック・辰巳）
 * テーマの CSS（public/wp-content/themes/reco/css/*）は本番から取り直すと
 * 上書きされるので触らず、このファイルで上から上書きする。
 * このファイルと Base.astro の <link> 1行を消せば、元の見た目に戻る。
 * 2026-10-31 辰巳「商品ページ以外は元に戻す（見た目だけ）」→ Base.astro が商品ページ3つ
 * （/office-2024/・/office-home-and-business.html・/windows11.html）のときだけ読む。
 * 運営会社ページの段組み（§8）は profile.css に分けた（この中の §8 は商品ページでは使わないが、
 * 商品ページが共用する .rs-hd・.rs-toc・.rs-flow などの土台なので残している）。
 */

/* 色はここで決める。2026-10-31 辰巳「このカラーで作ろう」＝ロゴ（img/common/logo@2x.png）の2色に統一。
 * 赤 #ad131c（ロゴの「RECO」）と 青灰 #51808e（ロゴの「SOFT」）。それ以前は tcd086 の深い紅 #950000。
 * 赤を変えるときは public/rebro/ の塗り替え画像（LINE・メール・見出し帯・STEP・チェック・Q・矢印）も作り直す */
:root {
  --rebro-accent: #ad131c;     /* ロゴの赤：ボタン・価格・見出しの線・強調 */
  --rebro-marker: #f7dfe0;     /* 強調文字の下に引く薄い赤のマーカー */
  --rebro-pale: #eef3f5;       /* 面の色：ロゴの青灰をごく薄く */
  --rebro-blue: #51808e;       /* ロゴの青灰：補助の色（線・番号・札） */
  --rebro-blue-deep: #2b4a54;  /* 青灰を濃くした色：暗い帯（最初の画面・申込帯・値札の帯） */
}

/* 1. 強調の赤字 → 黒の太字＋薄い紅のマーカー
 *    赤は「ボタン・電話番号・見出しの帯」だけに残し、押してほしい所を目立たせる */
.colorRed {
  color: #333;
  background: linear-gradient(transparent 60%, var(--rebro-marker) 60%);
}

/* 2. 中央揃えの長い文章 → 左揃え・1行を短く（パソコン幅のみ。スマホは元から左揃え） */
@media screen and (min-width: 768px) {
  .anxieties .txtStyle .inner.txt p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* 中央揃え用に手で入れた改行（「本当に心か／ら満足」など言葉の途中で切れる）を無効にし、自然に折り返す */
  .anxieties .txtStyle .inner.txt p br {
    display: none;
  }
}

/* 3. メーカー一覧：赤い下線の小さなリンク → 黒文字＋「›」、カード全体が押せると分かるように */
.manufacturersList .manufacturers a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.manufacturersList .manufacturers a::after {
  content: "\00a0›";
  color: var(--rebro-accent);
}
.manufacturersList .manufacturers a:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}

/* 4. スマホ：査定の帯の見出しが「…ください／い」と1文字だけ改行されるのを防ぐ。
 *    フッターの 10px の文字を少し大きく */
@media screen and (max-width: 767px) {
  .anonymousAssessment p.new,
  .anonymousAssessment p.hdM {
    font-size: 18px;
    line-height: 1.6;
  }
  footer p,
  .footLogo {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------
 * 5. 色の変更（色の値はファイル先頭の :root で決める）
 *    赤 #de2f16 → --rebro-accent、薄いピンク #fceae8 → --rebro-pale。
 *    白地・黒文字・アクセント1色で落ち着いた印象に。
 *    フォームのエラー文（.errorMessage）は気づいてもらうため赤のまま残す。
 *    ロゴ・査定の帯のスマホ画像・3ステップのイラストは画像なので赤が残る
 * ------------------------------------------------------------------ */

/* ボタン・帯（背景） */
.btnLink,
.column-section .btnLink {
  background-color: var(--rebro-accent);
  border-radius: 4px;
}
.anonymousAssessment,
#headerLinks .open,
.btnMenu,
.column-page_heading_02_box,
.purchaseFlow .threeSteps .hd01,
.purchaseFlow .threeSteps .hd02 .step,
.checkStyle input:checked:after,
.contactFrom .must {
  background-color: var(--rebro-accent);
}
.contactFrom .product {
  background-color: var(--rebro-accent);
}
.wp-pagenavi .current {
  background-color: var(--rebro-accent);
  border-color: var(--rebro-accent);
}

/* 文字色 */
.btnLink.style2,
#headerLinks .tel a,
#breadcrumb a,
.column_post-date,
.before-page-btn_text,
.next-page-btn_text,
.link-box,
.nav-fixed__read span,
.purchaseFlow .type li .tit,
.purchaseFlow .threeSteps .item .note,
.styleDetail .price td,
.contactFrom .title a,
.faqList li .link {
  color: var(--rebro-accent);
}
.wp-pagenavi .page {
  color: var(--rebro-accent);
  border-color: var(--rebro-accent);
}

/* 線・枠 */
.qualityWrap li .tit,
.column-page_heading_03 {
  border-bottom-color: var(--rebro-accent);
}
.purchaseFlow .threeSteps .hd02 {
  border-bottom-color: #ccc;
}
.purchaseFlow .type li .img,
.before-page-btn,
.next-page-btn,
.checkStyle input:checked {
  border-color: var(--rebro-accent);
}
.before-page-btn_triangle {
  border-right-color: var(--rebro-accent);
}
.next-page-btn_triangle {
  border-left-color: var(--rebro-accent);
}
.purchaseFlow .threeSteps .flow li + li .img:before {
  border-left-color: var(--rebro-accent);
}
.table01:before,
.purchaseFlow .itemQR .qr li + li:before {
  border-top-color: var(--rebro-accent);
}

/* 薄いピンクの面 → 薄いグレー */
.firsttime .anxieties .bg,
.purchaseFlow .threeSteps .item .copyId {
  background-color: var(--rebro-pale);
}

@media screen and (max-width: 767px) {
  .headerTel a,
  .gNaviIn {
    background-color: var(--rebro-accent);
  }
  .navTit {
    color: var(--rebro-accent);
  }
  .gNaviBtns li:nth-child(1) a {
    color: var(--rebro-accent) !important;
  }
  /* LINE・メールのボタンは赤が画像に焼き込まれているので、紅に塗り替えた画像に差し替える
     （元: wp-content/themes/reco/img/common/*_btn_sp.gif は残してある） */
  .headerLine {
    background-image: url(/rebro/line_btn_sp.png);
  }
  .headerMail {
    background-image: url(/rebro/mail_btn_sp.png);
  }
  .purchaseFlow .threeSteps .flow li + li:before {
    border-top-color: var(--rebro-accent);
  }
}

/* 下層ページの見出し帯（赤地＋RSの透かし画像）→ 紅に塗り替えた画像に差し替える
   （元: wp-content/themes/reco/img/common/teaser.jpg は残してある） */
#teaser {
  background-image: url(/rebro/teaser.jpg);
}

/* 不安リストのチェック印（赤い画像）→ 紅に塗り替えた画像に差し替える
   （元: wp-content/themes/reco/img/common/ico_checked.png は残してある） */
.firsttime .anxieties li {
  background-image: url(/rebro/ico_checked.png);
}

/* 3ステップのイラスト左上の「STEP」の三角 → 三角だけ紅に塗り替えた画像に差し替える。
   画像は本文（src/data/*.md、本番から取り直すと上書き）に直接書かれているので、本文は触らず、
   元の画像を枠の外へずらして隠し、同じ枠に背景として新しい画像を出す（どのブラウザでも効く）。
   イラスト本体（画面の赤い線・袖・テープ）は元のまま */
img[src$="/img/top/img_flow01.png"],
img[src$="/img/top/img_flow02.png"],
img[src$="/img/top/img_flow03.png"] {
  object-position: 9999px 0;
  background: no-repeat center / 100% 100%;
}
img[src$="/img/top/img_flow01.png"] { background-image: url(/rebro/img_flow01.png); }
img[src$="/img/top/img_flow02.png"] { background-image: url(/rebro/img_flow02.png); }
img[src$="/img/top/img_flow03.png"] { background-image: url(/rebro/img_flow03.png); }

/* よくある質問の「Q」・査定ボタンとサイトマップの丸い矢印（赤い画像）→ 紅に塗り替えた画像に差し替える
   （元: wp-content/themes/reco/img/common/ico_q.png・ico_link_red.png は残してある） */
.faqList .quest {
  background-image: url(/rebro/ico_q.png);
}
.btnLink.style2,
.sitemap .links a {
  background-image: url(/rebro/ico_link_red.png);
}

/* ------------------------------------------------------------------
 * 7. デザインの乱れを整える（辰巳「デザインの乱れなど綺麗に整えて」2026-10-29）
 *    文言・並び順は変えない。崩れ・重なり・不自然な改行だけを直す
 * ------------------------------------------------------------------ */

/* メーカー別ページの商品一覧（.adobeList。Adobe・Microsoft など13ページ）
 * テーマは枠の高さを固定していて、スマホでは「枠 324px ＜ 中身 364px」になり、
 * 長い商品名が次の段の画像に重なっていた。高さの固定をやめ、段ごとに高さをそろえる */
.adobeList {
  display: flex;
  flex-wrap: wrap;
}
.adobeList::before,
.adobeList::after {
  display: none; /* clearfix の疑似要素が並びの邪魔をしないように */
}
.adobeList li {
  float: none;
  height: auto;
  margin-bottom: 10px;
}
.adobeList li a {
  height: auto !important; /* 高さをそろえるJS（matchHeight）の固定値も外す */
  color: #333;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.5;
}
/* 「›」は付けない（商品名の後ろに元から空白があり、「›」だけが次の行に回ってしまうため） */
.adobeList li a:hover {
  opacity: .75;
}

/* 見出しが1〜2文字だけ次の行に回らないよう、行の長さをそろえて折り返す
 * （例：スマホの「…お確かめくだ／さい」）。対応していない古いブラウザでは今までどおり */
.hdL,
.hdM,
#teaser h1,
.anonymousAssessment p.new,
.anonymousAssessment p.hdM {
  text-wrap: balance;
}

/* 記事ページ：箇条書きのすぐ下の見出しが詰まって見えるので、間をあける */
.styleDetail .txt ul {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .adobeList li {
    margin-bottom: 24px;
  }
  .adobeList li a {
    font-size: 1.3rem;
  }

  /* 下層ページの見出しの帯：高さが 120px 固定で、長い題名（記事など）は
   * 上下がはみ出してヘッダーの下に隠れていた。題名の長さに合わせて伸びるようにする */
  #teaser {
    height: auto;
    min-height: 120px;
    padding: 20px 16px;
  }

  /* フォームの冒頭の説明文：スマホで中央揃えだと「や、」「ます。」だけの行ができて読みにくいので左揃えに */
  .contactFrom .title.txt p {
    text-align: left;
  }
  /* 冒頭の説明（最初の段落のまとまり）は手動の改行も外して自然に折り返す。
     下の「査定依頼の手順」（1. 2. 3.）は改行を残す */
  .contactFrom .noConfirm > .title.txt:first-child p br {
    display: none;
  }
}

/* ------------------------------------------------------------------
 * 8. 運営会社ページ（/profile/）の作り込み（辰巳「型番買取JPのように」2026-10-29）
 *    本文は src/data/profile.md。見出し・代表メッセージ・古物商許可・事業一覧・
 *    安心の取り組み・アクセス（Googleマップ）の段を .rs- で始まる名前で組んでいる
 * ------------------------------------------------------------------ */
.rs-company {
  padding: 50px 0 80px;
  line-height: 1.9;
}
.rs-company p {
  margin-bottom: 1em;
}
.rs-company a {
  color: var(--rebro-accent);
  text-decoration: underline;
}
.rs-lead {
  padding: 24px 28px;
  background: var(--rebro-pale);
  border-left: 4px solid var(--rebro-accent);
  font-size: 1.6rem;
}
.rs-sec {
  margin-top: 64px;
}
.rs-hd {
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  position: relative;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
}
.rs-hd::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 80px;
  border-bottom: 3px solid var(--rebro-accent);
}
.rs-sub {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 1.3rem;
  font-weight: normal;
}
.rs-small {
  font-size: 1.3rem;
  color: #666;
}

/* 代表メッセージ */
.rs-message {
  padding: 32px 36px;
  background: var(--rebro-pale);
  border-radius: 6px;
}
.rs-message__body p {
  font-size: 1.6rem;
}
.rs-message__sign {
  margin: 1.5em 0 0;
  text-align: right;
  font-weight: bold;
}

/* 会社概要・アクセスの表（テーマの .table01 を、この頁では読みやすい大きさに） */
.rs-company .table01 {
  font-size: 1.6rem;
}
.rs-company .table01 th {
  width: 200px;
  padding-right: 16px;
  color: #555;
}
.rs-company .table01 td {
  font-weight: normal;
}

/* 古物商許可の番号 */
.rs-license {
  display: inline-block;
  margin-bottom: 20px;
  padding: 16px 28px;
  border: 2px solid var(--rebro-accent);
  border-radius: 6px;
}
.rs-license p {
  margin: 0;
}
.rs-license__label {
  color: var(--rebro-accent);
  font-size: 1.3rem;
  font-weight: bold;
}
.rs-license__no {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: .04em;
}

/* 掲載価格の注意 */
.rs-note {
  margin-top: 24px;
  padding: 20px 24px;
  background: #fbf3f3;
  border: 1px solid #ecd2d2;
  border-radius: 6px;
}
.rs-note p:last-child {
  margin-bottom: 0;
}
.rs-note__title {
  color: var(--rebro-accent);
  font-weight: bold;
}

/* 事業一覧 */
.rs-biz {
  margin: 20px 0;
}
.rs-biz dt {
  padding-left: 14px;
  border-left: 3px solid var(--rebro-accent);
  font-weight: bold;
}
.rs-biz dd {
  margin: 6px 0 20px;
  padding-left: 17px;
  color: #555;
  font-size: 1.4rem;
}
.rs-biz strong {
  color: #222;
}

/* 安心の取り組み */
.rs-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rs-trust li {
  padding: 20px 22px;
  border: 1px solid #e3e3e3;
  border-top: 3px solid var(--rebro-accent);
  border-radius: 6px;
  background: #fff;
}
.rs-trust p {
  margin: 0;
  font-size: 1.4rem;
}
.rs-trust__title {
  margin-bottom: 6px !important;
  font-size: 1.6rem !important;
  font-weight: bold;
}

/* Googleマップ（横幅いっぱい・縦横比を保つ） */
.rs-map {
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--rebro-pale);
}
.rs-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 767px) {
  .rs-company {
    padding: 30px 0 50px;
  }
  .rs-lead {
    padding: 18px 18px;
    font-size: 1.5rem;
  }
  .rs-sec {
    margin-top: 44px;
  }
  .rs-hd {
    font-size: 2rem;
  }
  .rs-message {
    padding: 22px 18px;
  }
  .rs-message__body p {
    font-size: 1.5rem;
  }
  .rs-company .table01 th {
    width: 110px;
  }
  .rs-license__no {
    font-size: 2rem;
  }
  .rs-trust {
    grid-template-columns: 1fr;
  }
  .rs-map {
    aspect-ratio: 4 / 3;
  }
}
/* 見出しの下線と表の上の線が二重になるので、この頁では表の上の線を外す */
.rs-company .table01 {
  border-top: 0;
}
.rs-company .table01::before {
  display: none;
}

/* 運営会社ページ：2回目の作り込み（型番買取.jp/company/ と同じ細かさに） */
/* 見出しの帯に英字の小見出し */
#teaser.rs-teaser {
  flex-direction: column;
}
.rs-teaser__en {
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: .2em;
  opacity: .85;
}

/* このページの内容（目次） */
.rs-toc {
  margin-top: 32px;
  padding: 20px 26px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}
.rs-toc__title {
  margin-bottom: 8px !important;
  font-weight: bold;
}
.rs-toc ol {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 20px;
  counter-reset: rstoc;
}
.rs-toc li {
  counter-increment: rstoc;
  font-size: 1.4rem;
}
.rs-toc li::before {
  content: counter(rstoc) ".";
  margin-right: 6px;
  color: var(--rebro-accent);
  font-weight: bold;
}
.rs-toc a {
  color: #333;
  text-decoration: none;
}
.rs-toc a:hover {
  color: var(--rebro-accent);
  text-decoration: underline;
}
.rs-sec {
  scroll-margin-top: 90px; /* 目次から飛んだとき、見出しがヘッダーに隠れないように */
}

/* 代表メッセージ（写真＋本文の2列） */
.rs-message {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: start;
}
.rs-message__photo {
  margin: 0;
  text-align: center;
}
.rs-message__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.rs-message__photo figcaption {
  margin-top: 10px;
  color: #555;
  font-size: 1.3rem;
  line-height: 1.6;
}

/* 古物商許可：番号の枠と標識の写真を横に並べる */
.rs-license-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.rs-license-wrap .rs-license {
  display: block;
  margin: 0;
}
.rs-license-photo {
  margin: 0;
  text-align: center;
}
.rs-license-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.rs-license-photo figcaption {
  margin-top: 6px;
  color: #777;
  font-size: 1.2rem;
}
.rs-points {
  margin: 20px 0 24px;
  padding: 20px 24px;
  background: var(--rebro-pale);
  border-radius: 6px;
}
.rs-points dt {
  font-weight: bold;
}
.rs-points dd {
  margin: 2px 0 14px;
  color: #444;
  font-size: 1.4rem;
}
.rs-points dd:last-child {
  margin-bottom: 0;
}

/* 小見出し */
.rs-hd3 {
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--rebro-accent);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}

/* 査定で確認すること */
.rs-check li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-bottom: 1px dashed #ddd;
}
.rs-check li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--rebro-accent);
  border-bottom: 3px solid var(--rebro-accent);
  transform: rotate(-45deg);
}
.rs-check strong {
  display: block;
}
.rs-check span {
  display: block;
  color: #555;
  font-size: 1.4rem;
}

/* 買取できないソフト */
.rs-ng {
  margin: 12px 0 16px;
  padding: 18px 24px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
}
.rs-ng li {
  position: relative;
  padding: 4px 0 4px 26px;
}
.rs-ng li::before {
  content: "×";
  position: absolute;
  left: 2px;
  top: 3px;
  color: var(--rebro-accent);
  font-weight: bold;
}

/* お取引の流れ（番号つき） */
.rs-flow {
  counter-reset: rsflow;
  margin-bottom: 16px;
}
.rs-flow li {
  counter-increment: rsflow;
  position: relative;
  padding: 0 0 22px 60px;
}
.rs-flow li::before {
  content: counter(rsflow);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rebro-accent);
  color: #fff;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}
.rs-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 4px;
  border-left: 2px solid #e3c7c7;
}
.rs-flow p {
  margin-bottom: 0 !important;
}
.rs-flow__title {
  padding-top: 6px;
  font-weight: bold;
  font-size: 1.7rem;
}

@media screen and (max-width: 767px) {
  .rs-toc {
    padding: 16px 18px;
  }
  .rs-toc ol {
    grid-template-columns: 1fr;
  }
  .rs-message {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rs-message__photo img {
    width: 160px;
    margin: 0 auto;
  }
  .rs-license-wrap {
    grid-template-columns: 1fr;
  }
  .rs-license-photo img {
    max-width: 280px;
    margin: 0 auto;
  }
  .rs-points {
    padding: 16px 18px;
  }
  .rs-flow li {
    padding-left: 54px;
  }
}

/* ------------------------------------------------------------------
 * 9. 商品ページの新しい型（1ページ目：/office-home-and-business.html・2026-10-30）
 *    全サイト共通のSEO原則（結論先・更新日と誰向け・目次・根拠と出典・FAQ・行き止まり防止）
 *    に沿った作り。外枠と見出し・目次・流れ・×リストは §8 の .rs- を使い回す
 * ------------------------------------------------------------------ */
.rs-company.rs-item {
  padding-top: 30px;
}
.rs-item__head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
}
.rs-item__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.rs-answer {
  padding: 24px 28px;
  border: 2px solid var(--rebro-accent);
  border-radius: 8px;
  background: #fff;
}
.rs-answer__name {
  margin-bottom: 4px !important;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
}
.rs-answer__name span {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 10px;
  border: 1px solid var(--rebro-accent);
  border-radius: 3px;
  color: var(--rebro-accent);
  font-size: 1.2rem;
  vertical-align: middle;
}
.rs-answer__main {
  margin-bottom: 0 !important;
  font-size: 1.6rem;
  font-weight: bold;
}
.rs-answer__main strong {
  margin-left: 12px;
  color: var(--rebro-accent);
  font-size: 4.4rem;
  line-height: 1.2;
}
.rs-answer__main small {
  margin-left: 2px;
  font-size: 2rem;
}
.rs-answer__sub {
  margin: 4px 0 2px !important;
  font-size: 1.5rem;
  font-weight: bold;
}
.rs-answer__sub b {
  color: var(--rebro-accent);
  font-size: 1.9rem;
}
.rs-answer__date {
  color: #777;
  font-size: 1.2rem;
}
.rs-answer__text {
  font-size: 1.5rem;
  line-height: 1.8;
}
.rs-answer__note {
  color: #666;
  font-size: 1.3rem;
}
.rs-answer__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rs-company a.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  height: 54px;
  padding: 0 24px;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
  text-decoration: none;
}
.rs-company a.rs-btn:hover {
  opacity: 0.85;
}
.rs-btn--main {
  background: var(--rebro-accent);
}
.rs-btn--line {
  background: #06c755;
}
.rs-btn--line .fa-line {
  font-size: 2.2rem;
}
.rs-table-wrap {
  overflow-x: auto;
  margin: 16px 0 10px;
}
.rs-price {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
}
.rs-price th,
.rs-price td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: middle;
}
.rs-price thead th {
  border-bottom: 2px solid var(--rebro-accent);
  background: var(--rebro-pale);
  font-size: 1.4rem;
}
.rs-price tbody th {
  font-weight: bold;
}
.rs-price tbody th span {
  display: block;
  color: #666;
  font-size: 1.2rem;
  font-weight: normal;
}
.rs-price td {
  white-space: nowrap;
}
.rs-price__yen {
  color: var(--rebro-accent);
  font-size: 1.8rem;
  font-weight: bold;
}
.rs-price__no {
  color: #888;
}
.rs-calc {
  margin: 18px 0;
  padding: 18px 22px;
  border-left: 4px solid var(--rebro-accent);
  background: var(--rebro-pale);
}
.rs-calc__title {
  margin-bottom: 8px;
  font-weight: bold;
}
.rs-calc__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 460px;
  padding: 6px 0;
  border-bottom: 1px dashed #ccc;
}
.rs-calc__row b {
  flex-shrink: 0;
  color: var(--rebro-accent);
}
.rs-faq dt {
  position: relative;
  margin-top: 18px;
  padding: 12px 16px 12px 52px;
  border-radius: 6px 6px 0 0;
  background: var(--rebro-pale);
  font-weight: bold;
}
.rs-faq dd {
  position: relative;
  padding: 12px 16px 12px 52px;
  border: 1px solid #eee;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.rs-faq dt::before,
.rs-faq dd::before {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 26px;
  text-align: center;
}
.rs-faq dt::before {
  content: "Q";
  background: var(--rebro-accent);
}
.rs-faq dd::before {
  content: "A";
  background: #555;
}
.rs-related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.rs-company .rs-related a {
  display: block;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.rs-company .rs-related a::after {
  content: "\00a0›";
  color: var(--rebro-accent);
}
.rs-company .rs-related a:hover {
  border-color: var(--rebro-accent);
}
.rs-source {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  color: #555;
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
  .rs-company.rs-item {
    padding-top: 20px;
  }
  .rs-item__head {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rs-item__image img {
    width: 140px;
    margin: 0 auto;
  }
  .rs-answer {
    padding: 18px 16px;
  }
  .rs-answer__name {
    font-size: 1.6rem;
  }
  .rs-answer__main strong {
    font-size: 3.6rem;
  }
  .rs-answer__cta {
    flex-direction: column;
  }
  .rs-company a.rs-btn {
    width: 100%;
    min-width: 0;
  }
  .rs-price th,
  .rs-price td {
    padding: 10px 8px;
  }
  .rs-price {
    font-size: 1.3rem;
  }
  .rs-price__yen {
    font-size: 1.5rem;
  }
  .rs-related {
    grid-template-columns: 1fr;
  }
}

/* Office一覧（/microsoft/）から Office 2024 一覧への案内（2026-10-31） */
.rs-lead-link {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--rebro-accent);
  background: var(--rebro-pale);
  font-weight: bold;
}
.rs-lead-link a {
  color: var(--rebro-accent);
  text-decoration: underline;
}

/* ------------------------------------------------------------------
 * 10. 画像中心の部品（辰巳「文字ばかりでAIっぽい」2026-10-31）
 *     商品カード・アプリ比較・チェック・写真つき段・STEPイラスト。
 *     サイトにもとからある写真・イラストを使い、文章は短くする
 * ------------------------------------------------------------------ */
.rs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 16px;
}
.rs-badges li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--rebro-marker);
  color: var(--rebro-accent);
  font-size: 1.3rem;
  font-weight: bold;
}
.rs-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 12px;
}
.rs-company .rs-cards a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
  color: #333;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
}
.rs-company .rs-cards a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.rs-cards__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 10px;
  border-radius: 6px;
  background: var(--rebro-pale);
  overflow: hidden;
}
.rs-cards__img img {
  max-width: 80%;
  max-height: 130px;
  width: auto;
  height: auto;
}
.rs-cards__img--wide img {
  max-width: 100%;
  max-height: 150px;
  object-fit: cover;
}
.rs-cards__img--text {
  flex-direction: column;
  background: linear-gradient(160deg, #fff 0%, #f0f0f0 100%);
  color: #217346;
  font-size: 1.5rem;
  line-height: 1.3;
}
.rs-cards__img--text b {
  color: #333;
  font-size: 2.2rem;
}
.rs-cards__tag {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--rebro-accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
}
.rs-cards__tag--oem {
  background: #555;
}
.rs-cards__tag--app {
  background: #fff;
  border: 1px solid #999;
  color: #555;
}
.rs-cards__name {
  flex: 1;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
}
.rs-cards__price {
  margin-top: 6px;
  color: var(--rebro-accent);
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2;
}
.rs-cards__price small {
  font-size: 1.4rem;
}
.rs-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 14px;
}
.rs-vs__item {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}
.rs-vs__item--main {
  border: 2px solid var(--rebro-accent);
}
.rs-vs__name {
  font-size: 1.7rem;
  font-weight: bold;
}
.rs-apps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}
.rs-apps li {
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
}
.rs-apps .w { background: #2b579a; }
.rs-apps .x { background: #217346; }
.rs-apps .p { background: #b7472a; }
.rs-apps .n { background: #7719aa; }
.rs-apps .o { background: #0078d4; }
.rs-apps .off {
  background: #fff;
  border: 1px dashed #aaa;
  color: #999;
}
.rs-vs__price {
  margin-bottom: 0 !important;
  font-size: 1.5rem;
}
.rs-vs__price b {
  color: var(--rebro-accent);
  font-size: 2.2rem;
}
.rs-ok {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 12px;
}
.rs-ok li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  border-radius: 8px;
  background: var(--rebro-pale);
  text-align: center;
}
.rs-ok img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.rs-ok b {
  font-size: 1.7rem;
}
.rs-ok span {
  color: #666;
  font-size: 1.3rem;
}
.rs-photo {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  align-items: center;
}
.rs-photo__img img {
  display: block;
  width: 100%;
  height: auto;
}
.rs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 12px;
  counter-reset: none;
}
.rs-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rs-steps img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-bottom: 10px;
}
.rs-steps b {
  font-size: 1.8rem;
}
.rs-steps span {
  color: #555;
  font-size: 1.4rem;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  .rs-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .rs-cards__img {
    height: 110px;
  }
  .rs-cards__img img {
    max-height: 96px;
  }
  .rs-cards__img--wide img {
    max-height: 110px;
  }
  .rs-cards__name {
    font-size: 1.3rem;
  }
  .rs-cards__price {
    font-size: 2rem;
  }
  .rs-vs {
    grid-template-columns: 1fr;
  }
  .rs-ok {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rs-ok li {
    flex-direction: row;
    gap: 12px;
    padding: 12px 16px;
    text-align: left;
  }
  .rs-ok img {
    margin-bottom: 0;
  }
  .rs-ok span {
    margin-left: auto;
  }
  .rs-photo {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rs-photo__img img {
    width: 160px;
    margin: 0 auto;
  }
  .rs-steps {
    grid-template-columns: 1fr;
  }
  .rs-steps li {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
  }
  .rs-steps img {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
}

/* 写真のない商品のカード絵柄（製品名入りの色面） */
.rs-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 150px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.3;
  box-sizing: border-box;
}
.rs-tile b {
  font-size: 2.2rem;
}
.rs-tile--home { background: #f3f3f3; color: #217346; }
.rs-tile--home b { color: #333; }
.rs-tile--oem { background: #4a4a4a; }
.rs-tile--x { background: #217346; }
.rs-tile--w { background: #2b579a; }
.rs-tile--p { background: #b7472a; }
.rs-tile--a { background: #a4373a; }
@media screen and (max-width: 767px) {
  .rs-tile {
    height: 110px;
    padding: 10px 12px;
  }
  .rs-tile b {
    font-size: 1.8rem;
  }
}

/* 横棒グラフ（版ごと・種類ごとの買取価格の比較） */
.rs-bars {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--rebro-pale);
}
.rs-bars__row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  align-items: center;
  gap: 12px;
}
.rs-bars__label {
  font-size: 1.4rem;
  font-weight: bold;
}
.rs-bars__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--w);
  min-width: 6.5em;
  height: 36px;
  padding: 0 12px;
  border-radius: 0 6px 6px 0;
  background: var(--rebro-accent);
  color: #fff;
  box-sizing: border-box;
  font-size: 1.5rem;
}
.rs-bars__bar--sub {
  background: #8a8a8a;
}
/* 比較カードの上の小さな説明 */
.rs-vs__label {
  margin-bottom: 4px !important;
  color: #777;
  font-size: 1.3rem;
}
.rs-tile--win { background: #0067b8; }
@media screen and (max-width: 767px) {
  .rs-bars {
    padding: 14px;
  }
  .rs-bars__row {
    grid-template-columns: 6.5em 1fr;
    gap: 8px;
  }
  .rs-bars__label {
    font-size: 1.2rem;
  }
  .rs-bars__bar {
    height: 32px;
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------------
 * 11. 渋い仕上げ（辰巳「tcd048 のような感じで、渋く」2026-10-31）
 *     商品ページ（.rs-item ＝ Office 2024・H&B・Windows 11）だけに効かせる。
 *     黒に近い墨色の帯・細い線・細めの大きな見出し・角のない平らな部品。
 *     色は墨・白・灰が中心で、紅は価格とボタンだけに絞る
 * ------------------------------------------------------------------ */
.rs-item {
  --sumi: var(--rebro-blue-deep);
  --sumi-2: #3b5f6a;
  --line: #d9d9d9;
  --mute: #6b6f72;
}
/* 一番上：墨色の帯に商品と値札 */
.rs-item .rs-item__head {
  gap: 40px;
  margin: 0 0 56px;
  padding: 40px;
  background: var(--sumi);
}
.rs-item .rs-item__image img {
  border: 0;
  border-radius: 0;
  background: #fff;
}
.rs-item .rs-answer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
}
.rs-item .rs-answer__name {
  font-weight: normal;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
}
.rs-item .rs-answer__name span {
  border-color: rgba(255, 255, 255, 0.5);
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  font-weight: normal;
  letter-spacing: 0.08em;
}
.rs-item .rs-answer__main {
  margin-top: 6px;
  font-weight: normal;
  letter-spacing: 0.06em;
}
.rs-item .rs-answer__main strong {
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.02em;
}
.rs-item .rs-answer__sub {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-weight: normal;
}
.rs-item .rs-answer__sub b {
  color: #fff;
}
.rs-item .rs-answer__date {
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
}
.rs-item .rs-badges li {
  padding: 3px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
  letter-spacing: 0.06em;
}
.rs-item a.rs-btn {
  border-radius: 0;
  box-shadow: none;
  font-weight: normal;
  letter-spacing: 0.12em;
}
.rs-item a.rs-btn:hover {
  opacity: 0.8;
}

/* 見出し：細めの大きな文字を中央に。下に短い細線 */
.rs-item .rs-sec {
  margin-bottom: 72px;
}
.rs-item .rs-hd {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 0;
  font-size: 2.6rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-align: center;
}
.rs-item .rs-hd::after {
  left: 50%;
  bottom: 0;
  width: 32px;
  border-bottom: 1px solid var(--rebro-accent);
  transform: translateX(-50%);
}
.rs-item .rs-sec > p,
.rs-item .rs-photo__body p {
  letter-spacing: 0.04em;
  line-height: 2;
}

/* 商品カード：角なし・細い線・色は墨と灰 */
.rs-item .rs-cards {
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.rs-item .rs-cards li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rs-item.rs-company .rs-cards a {
  padding: 18px;
  border: 0;
  border-radius: 0;
}
.rs-item.rs-company .rs-cards a:hover {
  transform: none;
  box-shadow: none;
  background: #fafafa;
}
.rs-item .rs-cards__img,
.rs-item .rs-tile {
  border-radius: 0;
}
.rs-item .rs-tile {
  background: var(--sumi-2);
  color: rgba(255, 255, 255, 0.75);
  font-weight: normal;
  letter-spacing: 0.06em;
}
.rs-item .rs-tile b {
  color: #fff;
  font-weight: normal;
  letter-spacing: 0.04em;
}
.rs-item .rs-tile--home {
  background: #eceae6;
  color: var(--mute);
}
.rs-item .rs-tile--home b {
  color: var(--sumi);
}
.rs-item .rs-tile--oem {
  background: #4f6b74;
}
.rs-item .rs-cards__tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mute);
  font-weight: normal;
  letter-spacing: 0.1em;
}
.rs-item .rs-cards__tag::before {
  content: "— ";
}
.rs-item .rs-cards__name {
  font-weight: normal;
  letter-spacing: 0.02em;
}
.rs-item .rs-cards__price {
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* 比較カード・アプリ札 */
.rs-item .rs-vs__item {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 20px;
}
.rs-item .rs-vs__item--main {
  border: 1px solid var(--line);
  border-top: 3px solid var(--sumi);
}
.rs-item .rs-vs__name {
  font-weight: normal;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
}
.rs-item .rs-apps li {
  border: 1px solid var(--sumi);
  border-radius: 0;
  background: transparent;
  color: var(--sumi);
  font-weight: normal;
  letter-spacing: 0.04em;
}
.rs-item .rs-apps .off {
  border: 1px dashed #999;
  color: #777;
}

/* 横棒グラフ：墨と灰の細い棒 */
.rs-item .rs-bars {
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.rs-item .rs-bars__label {
  color: var(--mute);
  font-weight: normal;
  letter-spacing: 0.06em;
}
.rs-item .rs-bars__bar {
  height: 30px;
  border-radius: 0;
  background: var(--sumi);
  letter-spacing: 0.04em;
}
.rs-item .rs-bars__bar--sub {
  background: #a9adb0;
}

/* 買取できるもの：線で3つに区切る */
.rs-item .rs-ok {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rs-item .rs-ok li {
  padding: 28px 12px;
  border-radius: 0;
  background: transparent;
}
.rs-item .rs-ok li + li {
  border-left: 1px solid var(--line);
}
.rs-item .rs-ok img {
  width: 30px;
  height: 30px;
  filter: grayscale(1) brightness(0.4);
}
.rs-item .rs-ok b {
  font-weight: normal;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
}

/* 写真つきの段：写真は少し落ち着いた色に */
.rs-item .rs-photo {
  padding: 40px;
  background: #f4f3f1;
}
.rs-item .rs-photo .rs-hd {
  text-align: left;
}
.rs-item .rs-photo .rs-hd::after {
  left: 0;
  transform: none;
}
.rs-item .rs-photo__img img {
  filter: saturate(0.6);
}

/* 3ステップ：細い縦線で区切る */
.rs-item .rs-steps {
  gap: 0;
}
.rs-item .rs-steps li {
  padding: 0 20px;
}
.rs-item .rs-steps li + li {
  border-left: 1px solid var(--line);
}
.rs-item .rs-steps b {
  font-weight: normal;
  font-size: 1.9rem;
  letter-spacing: 0.1em;
}

/* よくある質問：色の面をやめ、細い線と文字だけに */
.rs-item .rs-faq dt {
  margin-top: 0;
  padding: 20px 0 6px 40px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-weight: normal;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
}
.rs-item .rs-faq dd {
  padding: 4px 0 20px 40px;
  border: 0;
  border-radius: 0;
  color: #555;
}
.rs-item .rs-faq dt::before,
.rs-item .rs-faq dd::before {
  left: 4px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
}
.rs-item .rs-faq dt::before {
  top: 20px;
  color: var(--rebro-accent);
}
.rs-item .rs-faq dd::before {
  top: 4px;
  color: #a0a0a0;
}
.rs-item .rs-faq {
  border-bottom: 1px solid var(--line);
}

/* 関連リンク */
.rs-item.rs-company .rs-related a {
  border-radius: 0;
  font-weight: normal;
  letter-spacing: 0.04em;
}
.rs-item.rs-company .rs-related a:hover {
  border-color: var(--sumi);
}

@media screen and (max-width: 767px) {
  .rs-item .rs-item__head {
    margin: 0 -16px 40px;
    padding: 28px 20px;
  }
  .rs-item .rs-sec {
    margin-bottom: 52px;
  }
  .rs-item .rs-hd {
    font-size: 2.1rem;
  }
  .rs-item.rs-company .rs-cards a {
    padding: 12px;
  }
  .rs-item .rs-ok {
    border-bottom: 0;
  }
  .rs-item .rs-ok li {
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
  }
  .rs-item .rs-ok li + li {
    border-left: 0;
  }
  .rs-item .rs-photo {
    padding: 24px 20px;
  }
  .rs-item .rs-steps li {
    padding: 14px 0;
  }
  .rs-item .rs-steps li + li {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .rs-item .rs-bars {
    padding: 18px 14px;
  }
}

/* 13. ロゴの青灰を補助の色に（2026-10-31）。赤は価格・ボタン・見出しの線、青灰は番号・区切り・札 */
.rs-item .rs-cards__tag { color: var(--rebro-blue); }
.rs-item .rs-bars__bar--sub { background: #9fb7be; }
.rs-hd::after { border-bottom-color: var(--rebro-accent); }
.rs-toc li::before { color: var(--rebro-blue); }

/* 16. Office 2024 ページの仕上げ（「Office2024 買取・売却」で1位を狙う・2026-10-31） */
.rs-item .rs-intro {
  margin: -24px 0 40px;
  padding: 0 4px;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.03em;
}
.rs-item .rs-price caption {
  caption-side: top;
  padding: 0 0 8px;
  color: var(--mute);
  font-size: 1.3rem;
  text-align: left;
}
.rs-item .rs-table-wrap {
  margin-top: 28px;
}
.rs-item .rs-source p + p {
  margin-top: 6px;
}
@media screen and (max-width: 767px) {
  .rs-item .rs-intro {
    margin: -16px 0 28px;
    font-size: 1.5rem;
  }
  /* スマホでは JANコードの列を隠して、価格まで1画面に収める */
  .rs-item .rs-price thead th:nth-child(3),
  .rs-item .rs-price tbody td:nth-child(3) {
    display: none;
  }
}

/* 17. Office 2024 ページの磨き込み（辰巳「アイコンも入れてAIっぽさを脱却・画像は確実に」2026-10-31）
 *     見出しは左寄せ＋アイコンの角印、写真を各段に入れ、左右交互の組みで単調さを崩す */
.rs-item .rs-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-align: left;
}
.rs-item .rs-hd::after {
  left: 0;
  width: 64px;
  border-bottom: 3px solid var(--rebro-accent);
  transform: none;
  bottom: -1px;
}
.rs-item .rs-hd > i {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--rebro-blue-deep);
  color: #fff;
  font-size: 1.7rem;
}

/* 安心の帯（アイコン付き） */
.rs-assure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: -32px 0 40px;
  border: 1px solid var(--line);
  background: #fff;
}
.rs-assure li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 16px 18px;
}
.rs-assure li + li {
  border-left: 1px solid var(--line);
}
.rs-assure i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rebro-marker);
  color: var(--rebro-accent);
  font-size: 1.7rem;
}
.rs-assure b {
  font-size: 1.6rem;
  line-height: 1.3;
}
.rs-assure span {
  color: var(--mute);
  font-size: 1.2rem;
  line-height: 1.4;
}

/* 写真と文章の左右の組み */
.rs-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: center;
}
.rs-split__img {
  margin: 0;
}
.rs-split__img img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* チェック（アイコン） */
.rs-item .rs-ok--icon i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--rebro-pale);
  color: var(--rebro-blue-deep);
  font-size: 2rem;
}

/* 本人確認書類の写真 */
.rs-ids {
  margin: 28px 0 12px;
  padding: 22px 24px;
  background: var(--rebro-pale);
}
.rs-ids__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px !important;
  font-weight: bold;
}
.rs-ids__title i {
  color: var(--rebro-blue);
}
.rs-ids ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}
.rs-ids li {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
}
.rs-ids img {
  display: block;
  width: 100%;
  height: 130px;
  margin-bottom: 6px;
  object-fit: cover;
  background: #fff;
}

/* 3ステップ（写真） */
.rs-item .rs-steps--photo {
  gap: 20px;
}
.rs-item .rs-steps--photo li {
  position: relative;
  padding: 0 0 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.rs-item .rs-steps--photo li + li {
  border-left: 1px solid var(--line);
}
.rs-item .rs-steps--photo img {
  width: 100%;
  max-width: none;
  height: 180px;
  margin-bottom: 14px;
  object-fit: cover;
}
.rs-item .rs-steps--photo b,
.rs-item .rs-steps--photo span:not(.rs-steps__no) {
  display: block;
  padding: 0 16px;
}
.rs-steps__no {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 12px;
  background: var(--rebro-accent);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* 選ばれる理由（写真つき3枚） */
.rs-reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rs-reason {
  border: 1px solid var(--line);
  background: #fff;
}
.rs-reason img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.rs-reason p {
  margin: 0 18px 16px !important;
  font-size: 1.4rem;
  line-height: 1.8;
}
.rs-reason .rs-reason__title {
  margin: 16px 18px 8px !important;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.5;
}

/* 関連リンク（アイコン） */
.rs-item.rs-company .rs-related--icon a::before {
  content: "\f15c";
  margin-right: 8px;
  color: var(--rebro-blue);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 400;
}
.rs-item.rs-company .rs-related--icon a::after {
  float: right;
}

@media screen and (max-width: 767px) {
  .rs-item .rs-hd {
    font-size: 2rem;
  }
  .rs-item .rs-hd > i {
    width: 34px;
    height: 34px;
    font-size: 1.5rem;
  }
  .rs-assure {
    grid-template-columns: 1fr 1fr;
    margin: -24px 0 28px;
  }
  .rs-assure li {
    padding: 12px;
    grid-template-columns: 34px 1fr;
  }
  .rs-assure li:nth-child(3) {
    border-left: 0;
  }
  .rs-assure li:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
  .rs-assure i {
    width: 34px;
    height: 34px;
    font-size: 1.4rem;
  }
  .rs-assure b {
    font-size: 1.4rem;
  }
  .rs-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rs-split__img {
    order: -1;
  }
  .rs-split__img img {
    height: 200px;
  }
  .rs-ids {
    padding: 16px;
  }
  .rs-ids ul {
    gap: 8px;
  }
  .rs-ids img {
    height: 70px;
  }
  .rs-ids li {
    font-size: 1.2rem;
  }
  .rs-item .rs-steps--photo li {
    display: block;
    border-top: 1px solid var(--line);
  }
  .rs-item .rs-steps--photo img {
    height: 170px;
  }
  .rs-reasons {
    grid-template-columns: 1fr;
  }
}

/* 18. このページの運営者（土居氏「信頼性が最優先」・AIO教科書「著者情報で文脈を与える」2026-11-01） */
.rs-owner {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
}
.rs-owner img {
  display: block;
  width: 100%;
  height: auto;
}
.rs-owner__name {
  margin-bottom: 8px !important;
  font-size: 1.7rem;
  font-weight: bold;
}
.rs-owner__facts {
  margin: 0 0 12px;
  font-size: 1.4rem;
}
.rs-owner__facts > div {
  display: grid;
  grid-template-columns: 5em 1fr;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.rs-owner__facts dt {
  color: var(--mute);
}
@media screen and (max-width: 767px) {
  .rs-owner {
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 16px;
  }
  .rs-owner__facts > div {
    grid-template-columns: 1fr;
  }
}

/* 19. 外部サイト（ヒカカク！）の評価を出典付きで（2026-11-01）。
 *     口コミ本文は写さず要約だけ。自社サイトに自社の評価の構造化データを付けるのは Google の決まりで不可なので付けない */
.rs-review {
  display: grid;
  grid-template-columns: 260px 1fr;
  margin-top: 24px;
  border: 1px solid var(--line);
  background: #fff;
}
.rs-review__score {
  padding: 24px 20px;
  background: var(--rebro-blue-deep);
  color: #fff;
  text-align: center;
}
.rs-review__label {
  margin-bottom: 6px !important;
  font-size: 1.3rem;
  line-height: 1.6;
  opacity: .9;
}
.rs-review__num {
  margin-bottom: 4px !important;
  line-height: 1.1;
}
.rs-review__num b {
  display: block;
  font-size: 4.6rem;
  letter-spacing: 0.02em;
}
.rs-review__stars {
  color: #f2c14e;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
.rs-review__count {
  margin: 8px 0 0 !important;
  font-size: 1.3rem;
  opacity: .9;
}
.rs-review__body {
  padding: 22px 26px;
}
.rs-review__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px !important;
  font-weight: bold;
}
.rs-review__title i {
  color: var(--rebro-blue);
}
.rs-review__body ul {
  margin-bottom: 10px;
}
.rs-review__body li {
  position: relative;
  padding: 6px 0 6px 22px;
  border-bottom: 1px dashed var(--line);
}
.rs-review__body li::before {
  content: "“";
  position: absolute;
  left: 2px;
  top: 2px;
  color: var(--rebro-accent);
  font-size: 2.2rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .rs-review {
    grid-template-columns: 1fr;
  }
  .rs-review__score {
    padding: 18px;
  }
  .rs-review__body {
    padding: 16px;
  }
}

/* 20. 最大34,000円と条件の表示・スクラッチの注意（2026-11-01）。
 *     「最大」を大きく出すときは、条件（購入証明の有無）を必ずすぐそばに並べる（有利誤認を避ける） */
.rs-answer__max {
  margin-left: 12px;
  font-size: 1.8rem;
  font-weight: bold;
  vertical-align: 0.6em;
}
.rs-item .rs-answer__max + strong {
  margin-left: 4px;
}
.rs-answer__cond {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px !important;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 1.4rem;
  font-weight: bold;
}
.rs-cards__note {
  margin-top: 2px;
  color: var(--mute);
  font-size: 1.2rem;
}
.rs-alert,
.rs-receipt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 10px !important;
  padding: 14px 18px;
  font-weight: bold;
  line-height: 1.8;
}
.rs-alert {
  border-left: 4px solid var(--rebro-accent);
  background: var(--rebro-marker);
}
.rs-alert i {
  margin-top: 0.35em;
  color: var(--rebro-accent);
}
.rs-receipt {
  border-left: 4px solid var(--rebro-blue);
  background: var(--rebro-pale);
  font-weight: normal;
}
.rs-receipt i {
  margin-top: 0.35em;
  color: var(--rebro-blue);
}
.rs-receipt b {
  color: var(--rebro-accent);
}
@media screen and (max-width: 767px) {
  .rs-answer__cond {
    font-size: 1.2rem;
  }
}

/* 21. 到着当日振込（RECOソフトの一番の強み・2026-11-01）を値札の帯で目立たせる */
.rs-sameday {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 12px 16px;
  background: #fff;
  color: var(--rebro-blue-deep);
}
.rs-sameday > i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rebro-accent);
  color: #fff;
  font-size: 2rem;
}
.rs-sameday__title {
  margin: 0 !important;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.4;
}
.rs-sameday__title b {
  color: var(--rebro-accent);
  font-size: 2.1rem;
}
.rs-sameday__note {
  margin: 2px 0 0 !important;
  color: #555;
  font-size: 1.2rem;
  line-height: 1.6;
}
.rs-hl {
  color: var(--rebro-accent);
}
@media screen and (max-width: 767px) {
  .rs-sameday__title {
    font-size: 1.5rem;
  }
  .rs-sameday__title b {
    font-size: 1.8rem;
  }
}

/* 22. スマホの総点検で見つかった点の修正（2026-11-01）
 *     値札の帯のはみ出し（4px）／目次のリンクが細く押しにくい（高さ18px）／商品カードの札の文字が11px */
@media screen and (max-width: 767px) {
  .rs-item .rs-item__head {
    margin-left: 0;
    margin-right: 0;
  }
  .rs-toc li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    border-bottom: 1px solid var(--line, #e5e5e5);
  }
  .rs-toc li:last-child {
    border-bottom: 0;
  }
  .rs-toc li::before {
    flex-shrink: 0;
    margin-right: 0;
  }
  .rs-toc a {
    display: block;
    flex: 1;
    padding: 9px 0;
  }
  .rs-answer__cond {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .rs-item .rs-cards__tag {
    font-size: 1.2rem;
  }
}
.nw { white-space: nowrap; }

/* 23. 売却で調べる人への答え（スクラッチの図・用意するもの・売り先の比較・サポート期限）2026-11-01 */
.rs-scratch {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: center;
  margin: 22px 0 6px;
}
.rs-scratch svg {
  display: block;
  width: 100%;
  height: auto;
}
.rs-scratch figcaption {
  font-size: 1.4rem;
  line-height: 1.8;
}
.rs-scratch figcaption b {
  display: block;
  margin-bottom: 4px;
  color: var(--rebro-blue-deep);
}
.rs-prep {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: prep;
}
.rs-prep li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 12px 16px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
  counter-increment: prep;
}
.rs-prep li::before {
  content: counter(prep);
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 9px;
  background: var(--rebro-blue-deep);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
.rs-prep i {
  margin-bottom: 8px;
  color: var(--rebro-accent);
  font-size: 2.4rem;
}
.rs-prep b {
  font-size: 1.5rem;
}
.rs-prep span {
  color: var(--mute);
  font-size: 1.3rem;
  line-height: 1.6;
}
.rs-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}
.rs-compare th,
.rs-compare td {
  padding: 12px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.7;
}
.rs-compare thead th {
  background: var(--rebro-pale);
  font-weight: bold;
}
.rs-compare thead th:nth-child(2) {
  background: var(--rebro-blue-deep);
  color: #fff;
}
.rs-compare tbody th {
  width: 7em;
  background: #fafafa;
  font-weight: bold;
  white-space: nowrap;
}
.rs-compare tbody td:nth-child(2) {
  background: #f6fafb;
  font-weight: bold;
}
.rs-life {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 18px;
  border: 1px solid var(--line);
  background: #fff;
}
.rs-life i {
  margin-top: 0.3em;
  color: var(--rebro-blue);
  font-size: 1.8rem;
}
.rs-life b {
  color: var(--rebro-accent);
}
@media screen and (max-width: 767px) {
  .rs-scratch {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rs-scratch svg {
    max-width: 280px;
    margin: 0 auto;
  }
  .rs-prep {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .rs-compare {
    font-size: 1.25rem;
  }
  .rs-compare th,
  .rs-compare td {
    padding: 8px;
  }
  .rs-compare tbody th {
    width: auto;
    white-space: normal;
  }
}

/* 24. POSAカードの説明（売り場→レジで有効化→レシート＝証明 の3段）2026-11-01 */
.rs-posa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 20px 0;
  counter-reset: posa;
}
.rs-posa li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 14px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.rs-posa li + li {
  border-left: 0;
}
.rs-posa li:nth-child(2) {
  background: var(--rebro-marker);
}
.rs-posa li + li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-top: 2px solid var(--rebro-accent);
  border-right: 2px solid var(--rebro-accent);
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.rs-posa i {
  margin-bottom: 8px;
  color: var(--rebro-blue-deep);
  font-size: 2.6rem;
}
.rs-posa li:nth-child(2) i {
  color: var(--rebro-accent);
}
.rs-posa b {
  font-size: 1.6rem;
}
.rs-posa span {
  color: var(--mute);
  font-size: 1.3rem;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .rs-posa {
    grid-template-columns: 1fr;
  }
  .rs-posa li + li {
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .rs-posa li + li::before {
    left: 50%;
    top: -9px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* 25. デザインの強化（AIっぽさを抜く）2026-11-01
 *     帯で段を切り替える／見出しと金額をサイトの見出し書体（見出ゴMB31・Adobe Fonts）に／
 *     届いたその日に振込の写真帯／アイコンの丸を減らす */
.rs-item .rs-hd,
.rs-item .rs-answer__main strong,
.rs-item .rs-answer__name,
.rs-item .rs-cards__price,
.rs-item .rs-vs__name,
.rs-item .rs-vs__price b,
.rs-item .rs-sameday__title,
.rs-item .rs-review__num b,
.rs-item .rs-reason__title,
.rs-item .rs-price__yen,
.rs-photoband__title {
  font-family: a-otf-midashi-go-mb31-pr6n, "Hiragino Kaku Gothic StdN", sans-serif;
  font-weight: normal;
}
.rs-item .rs-hd {
  font-size: 2.6rem;
  letter-spacing: 0.06em;
}

/* 段の背景を一つおきに帯に（左右いっぱいまで） */
.rs-item .rs-sec:nth-of-type(even) {
  padding-top: 52px;
  padding-bottom: 52px;
  background: #f2f5f6;
  box-shadow: 0 0 0 100vmax #f2f5f6;
  clip-path: inset(0 -100vmax);
}
.rs-item .rs-sec:nth-of-type(even) .rs-hd {
  border-bottom-color: #dbe3e6;
}

/* 届いたその日に振込の写真帯 */
.rs-photoband {
  position: relative;
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: stretch;
  margin: 0 0 72px;
  background: var(--rebro-blue-deep);
  box-shadow: 0 0 0 100vmax var(--rebro-blue-deep);
  clip-path: inset(0 -100vmax);
  color: #fff;
}
.rs-photoband picture {
  display: block;
  margin-left: -100vmax;
  padding-left: 100vmax;
  background: #1d343b;
}
.rs-photoband img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: 40% 30%;
}
.rs-photoband__body {
  padding: 44px 0 44px 44px;
}
.rs-photoband__lead {
  display: inline-block;
  margin-bottom: 14px !important;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--rebro-accent);
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.12em;
}
.rs-photoband__title {
  margin-bottom: 14px !important;
  font-size: 3.6rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.rs-photoband__title span {
  color: #ffb3b0;
}
.rs-photoband__note {
  margin-bottom: 20px !important;
  font-size: 1.3rem;
  line-height: 1.8;
  opacity: 0.85;
}
.rs-item.rs-company a.rs-photoband__btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  background: var(--rebro-accent);
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.rs-item.rs-company a.rs-photoband__btn::after {
  content: "→";
  margin-left: 12px;
}

/* アイコンの丸の繰り返しを減らす：安心の帯は丸をやめて線のアイコンだけに */
.rs-assure i {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .rs-item .rs-hd {
    font-size: 2.1rem;
  }
  .rs-item .rs-sec:nth-of-type(even) {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .rs-photoband {
    grid-template-columns: 1fr;
    margin-bottom: 52px;
  }
  .rs-photoband picture {
    margin: 0 -100vmax;
    padding: 0 100vmax;
  }
  .rs-photoband img {
    min-height: 0;
    height: 190px;
  }
  .rs-photoband__body {
    padding: 26px 0 30px;
  }
  .rs-photoband__title {
    font-size: 2.6rem;
  }
}

/* 26. 偽物への注意（Windows 11・当店で確認した偽物の写真）2026-11-01。本物の写真が届いたら .rs-fake__img を2枚並べる */
.rs-fake {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
.rs-fake__img {
  position: relative;
  margin: 0;
}
.rs-fake__img img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.rs-fake__img figcaption {
  margin-top: 6px;
  color: var(--mute);
  font-size: 1.2rem;
  line-height: 1.6;
}
.rs-fake__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 14px;
  background: var(--rebro-accent);
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.rs-fake__title {
  margin-bottom: 10px !important;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 1.8rem;
}
.rs-fake__list {
  counter-reset: fake;
  margin-bottom: 14px;
}
.rs-fake__list li {
  position: relative;
  padding: 10px 0 10px 40px;
  border-bottom: 1px dashed var(--line);
  counter-increment: fake;
}
.rs-fake__list li::before {
  content: counter(fake);
  position: absolute;
  left: 0;
  top: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--rebro-accent);
  color: #fff;
  font-weight: bold;
}
.rs-fake__list b {
  display: block;
  line-height: 1.6;
}
.rs-fake__list span {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-size: 1.3rem;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .rs-fake {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 27. 本物か確かめる方法（slmgr /dli の表示を書き写した画面）2026-11-01 */
.rs-dli {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 28px;
  align-items: start;
  margin-top: 32px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--rebro-blue-deep);
  background: #fff;
}
.rs-dli__title {
  margin-bottom: 12px !important;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 1.9rem;
  font-weight: normal;
}
.rs-dli__title i {
  margin-right: 8px;
  color: var(--rebro-blue-deep);
}
.rs-dli__steps {
  counter-reset: dli;
  margin: 14px 0;
}
.rs-dli__steps li {
  position: relative;
  padding: 7px 0 7px 36px;
  counter-increment: dli;
  line-height: 1.7;
}
.rs-dli__steps li::before {
  content: counter(dli);
  position: absolute;
  left: 0;
  top: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rebro-blue-deep);
  color: var(--rebro-blue-deep);
  font-size: 1.3rem;
  font-weight: bold;
}
.rs-dli kbd,
.rs-dli code {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 7px;
  border: 1px solid #c9cfd2;
  border-bottom-width: 2px;
  background: #f7f8f9;
  font-family: Consolas, Menlo, monospace;
  font-size: 1.3rem;
}
.rs-dli code {
  border-bottom-width: 1px;
  color: var(--rebro-accent);
  font-weight: bold;
}
.rs-dli__screen {
  margin: 0;
}
.rs-dli__win {
  border: 1px solid #bfc5c8;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  font-family: "Yu Gothic UI", "Meiryo UI", sans-serif;
  font-size: 1.25rem;
}
.rs-dli__bar {
  margin: 0 !important;
  padding: 7px 12px;
  border-bottom: 1px solid #e3e6e8;
  background: #f3f3f3;
  font-size: 1.2rem;
}
.rs-dli__win dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  margin: 0;
  padding: 14px 14px 16px;
}
.rs-dli__win dt {
  color: var(--mute);
  white-space: nowrap;
}
.rs-dli__win dt::after {
  content: ":";
}
.rs-dli__win dd {
  margin: 0;
  word-break: break-all;
}
.rs-dli__win mark {
  padding: 0 3px;
  background: var(--rebro-marker);
  color: var(--rebro-accent);
  font-weight: bold;
}
.rs-dli__vs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 14px 0 0 !important;
  font-size: 1.3rem;
}
.rs-dli__vs b {
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 2rem;
  font-weight: normal;
}
.rs-dli__vs .is-ng + b {
  color: var(--rebro-accent);
}
.rs-dli__vs .is-ok + b {
  color: var(--rebro-blue-deep);
}
.rs-dli__vs i {
  margin: 0 6px;
  color: var(--mute);
}
.rs-dli__screen figcaption {
  margin-top: 8px;
  color: var(--mute);
  font-size: 1.2rem;
  line-height: 1.6;
}
@media screen and (max-width: 1023px) {
  .rs-dli {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .rs-dli__screen {
    max-width: 460px;
  }
}
@media screen and (max-width: 767px) {
  .rs-dli {
    padding: 20px 16px;
  }
}

/* 28. 一覧ページ（/microsoft/・/adobe/）2026-11-01：買取できる・できないの2列／くわしく見るリンク／Outlook のタイル色 */
.rs-tile--o { background: #0f6cbd; }
.rs-more {
  margin-top: 14px !important;
  text-align: right;
}
.rs-item.rs-company .rs-more a {
  font-weight: bold;
}
.rs-item.rs-company .rs-more a::after {
  content: " →";
}
.rs-okng {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rs-okng__col {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-top-width: 3px;
  background: #fff;
}
.rs-okng__col--ok { border-top-color: var(--rebro-blue-deep); }
.rs-okng__col--ng { border-top-color: var(--rebro-accent); }
.rs-okng__title {
  margin-bottom: 10px !important;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 1.8rem;
}
.rs-okng__col--ok .rs-okng__title i { color: var(--rebro-blue-deep); }
.rs-okng__col--ng .rs-okng__title i { color: var(--rebro-accent); }
.rs-okng__title i { margin-right: 8px; }
.rs-okng li {
  position: relative;
  padding: 6px 0 6px 18px;
  border-bottom: 1px dashed var(--line);
  line-height: 1.7;
}
.rs-okng li:last-child { border-bottom: 0; }
.rs-okng li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 7px;
  height: 7px;
  background: var(--mute);
}
@media screen and (max-width: 767px) {
  .rs-okng { grid-template-columns: 1fr; gap: 14px; }
}

/* 29. 商品ページの共通部品（2026-11-02）：画像のない商品の見出しタイル／要点の箇条書き */
.rs-tile--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 16px;
  text-align: center;
}
.rs-tile--hero b {
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 2.2rem;
  font-weight: normal;
  line-height: 1.5;
}
.rs-points {
  margin: 12px 0 16px;
}
.rs-points li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px dashed var(--line);
  line-height: 1.8;
}
.rs-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 9px;
  height: 9px;
  background: var(--rebro-accent);
}

/* 30. 本物と偽物を並べる（Windows 11）2026-11-02 */
.rs-fake--compare {
  display: block;
}
.rs-fake__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
.rs-fake__img--real .rs-fake__tag {
  background: var(--rebro-blue-deep);
}
.rs-fake__img figcaption b {
  color: var(--sumi);
}
.rs-fake--compare .rs-fake__body {
  margin-top: 20px;
}
@media screen and (max-width: 500px) {
  .rs-fake__pair {
    grid-template-columns: 1fr;
  }
}

/* 31. 箱の画像（各社の利用条件：箱より自社名を目立たせる／Adobe の画像はリンクにしない／出典の一文）2026-11-02 */
.rs-item .rs-box img {
  display: block;
  width: 100%;
  max-width: 130px;
  height: auto;
  margin: 0 auto;
}
.rs-item .rs-box--wide img {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
}
.rs-answer__shop {
  margin-bottom: 8px !important;
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  font-size: 2.6rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.rs-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0;
}
.rs-boxes li {
  width: 96px;
  text-align: center;
}
.rs-boxes img {
  display: block;
  width: 100%;
  height: auto;
}
.rs-boxes span {
  display: block;
  margin-top: 6px;
  color: var(--mute);
  font-size: 1.15rem;
  line-height: 1.4;
}
.rs-credit {
  margin-top: 8px !important;
  color: var(--mute);
  font-size: 1.15rem;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .rs-answer__shop {
    font-size: 2.1rem;
  }
}

/* 32. 色をロゴに合わせる（辰巳「カラーはロゴに合わせて」2026-11-02）
 *     ロゴの4色：赤 #ad131c／青灰 #51808e／灰 #808080／墨 #201810。一番上は白地に赤の線 */
:root {
  --rebro-blue-deep: #51808e;
}
.rs-item {
  --sumi: #201810;
  --sumi-2: #51808e;
}
.rs-item .rs-item__head {
  grid-template-columns: 300px 1fr;
  padding: 36px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--rebro-accent);
  background: #fff;
}
.rs-item .rs-item__image img {
  background: transparent;
}
.rs-item .rs-box img,
.rs-item .rs-box--wide img {
  max-width: 300px;
}
.rs-item .rs-box img {
  max-width: 210px;
}
.rs-item .rs-answer {
  color: var(--sumi);
}
.rs-item .rs-answer__name span {
  border-color: #808080;
  color: #5c5c5c;
}
.rs-item .rs-answer__main strong {
  color: var(--rebro-accent);
}
.rs-item .rs-answer__sub {
  border-top-color: var(--line);
  color: var(--sumi);
}
.rs-item .rs-answer__sub b {
  color: var(--rebro-accent);
}
.rs-item .rs-answer__date {
  color: #808080;
}
.rs-item .rs-answer__cond {
  border-color: #808080;
  background: #fff;
  color: var(--sumi);
}
.rs-item .rs-answer__cond i {
  color: var(--rebro-accent);
}
.rs-item .rs-badges li {
  border-color: var(--rebro-blue);
  color: #3f6a76;
}
.rs-item .rs-sameday {
  background: var(--rebro-pale);
}
.rs-photoband__note {
  opacity: 1;
}
@media screen and (max-width: 900px) {
  .rs-item .rs-item__head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }
  .rs-item .rs-box img,
  .rs-item .rs-box--wide img,
  .rs-item .rs-item__image img {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}
.rs-photoband picture {
  background: var(--rebro-blue);
}

/* 33. 価格表の商品画像（2026-11-02） */
.rs-item .rs-price th[scope="row"] .rs-thumb {
  display: inline-block;
  width: 56px;
  height: 56px;
  margin-right: 12px;
  object-fit: contain;
  vertical-align: middle;
  background: #fff;
}
.rs-item .rs-item__image.rs-box img {
  max-width: 240px;
  max-height: 300px;
  object-fit: contain;
}