@charset "utf-8";
/* ------------------------------------------------------------------
   公開サイトの新デザイン（Issue #270 ⑤ 第1便・2026-09-17）

   【このファイルがある理由】
     既存の css/style.css（128行）は Bootstrap の色とジャンボトロンの
     背景画像を足すだけのもので、下層ページ37本がまだそれに依存している。
     そこへ新デザインを混ぜると、触っていないページの見た目が動く。
     だから **別ファイルにして、クラス名を rr- で始める**。
     style.css は1行も変えない。

   【クラス名の規約】
     すべて rr- で始める。Bootstrap（.container .row .col-* .btn-*）とも
     style.css（.font-jp .font-patrick .jumbotron* .bg-* ）とも衝突しない。

   【触ってはいけないもの】
     #type_pc / #type_sp … 576px で出し分ける旧レスポンシブ。
     公開サイトの9ファイルが使っており、定義は共通ヘッドの <style> にある。
     第1便で直すのはヘッダー・フッター・トップの3本だけなので、
     残り6本（guidance 系4本・payment_contract・require）はこの仕組みで
     動き続ける。**定義を消さないこと。**

   【版】
     読み込む側は css/rr_site.css?ver=YYYYMMDDHHMM を付けること。
     サーバーは Cache-Control も Expires も返さないので、付けないと
     ブラウザが古い版を使い続ける（2026-09-08 に実際に起きた・rules 90）。
   ------------------------------------------------------------------ */

:root{
  --rr-paper:#FFFFFF;
  --rr-ground:#F2F2F0;
  --rr-ink:#111111;
  --rr-sub:#6E6C68;
  --rr-rule:#DEDDD9;
  --rr-rule-hard:#111111;
  --rr-btn:#111111;
  --rr-btn-ink:#FFFFFF;
  --rr-disp:"Dela Gothic One","Noto Sans JP",sans-serif;
  --rr-body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  --rr-mono:"Roboto Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}

/* 器 ― Bootstrap の .container とは別に持つ（余白の基準を1つにするため） */
.rr-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* 見出しと本文の土台。body ではなく rr- の器の中だけに効かせる */
.rr-scope{
  background:var(--rr-paper);color:var(--rr-ink);
  font-family:var(--rr-body);font-size:16px;line-height:1.8;
}
.rr-scope img,.rr-scope video{display:block;max-width:100%}
.rr-scope a:not([class]){color:inherit}
/* ★ .rr-scope a{color:inherit} と書くと詳細度(0,1,1)が .rr-btn(0,1,0) に勝ち、
   黒地のボタンが黒文字になって消える（2026-09-17 に箱で実際に出した）。
   class を持つリンクには当てない。 */
.rr-scope a:focus-visible,.rr-scope button:focus-visible{outline:2px solid var(--rr-ink);outline-offset:3px}

/* ── ヘッダー ── */
.rr-bar{background:var(--rr-paper);border-bottom:1px solid var(--rr-rule)}
.rr-bar .rr-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.rr-bar__logo img{width:118px;height:auto}
.rr-util{display:flex;align-items:center;gap:18px}
.rr-sns{display:flex;gap:8px}
.rr-sns a{
  font-family:var(--rr-mono);font-size:11px;letter-spacing:.08em;text-decoration:none;
  border:1px solid var(--rr-rule);padding:5px 10px;color:var(--rr-sub);
}
.rr-sns a:hover{border-color:var(--rr-ink);color:var(--rr-ink)}
.rr-tel{font-family:var(--rr-mono);font-size:19px;font-weight:500;letter-spacing:.01em;white-space:nowrap;text-decoration:none;color:var(--rr-ink)}
.rr-tel small{display:block;font-family:var(--rr-body);font-size:10.5px;letter-spacing:.2em;color:var(--rr-sub);font-weight:400}

/* ── グローバルナビ ── */
.rr-nav{background:var(--rr-paper);border-bottom:1px solid var(--rr-rule)}
.rr-nav .rr-wrap{display:flex;justify-content:flex-start;gap:34px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rr-nav a{
  padding:13px 0;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--rr-ink);
  white-space:nowrap;border-bottom:2px solid transparent;
}
.rr-nav a[aria-current="page"]{border-color:var(--rr-ink);font-weight:700}
.rr-nav a:hover{border-color:var(--rr-sub)}

/* ── フッター ── */
.rr-foot{background:var(--rr-ground);padding-block:32px}
.rr-fnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 30px;margin-bottom:26px}
.rr-fnav h3{font-family:var(--rr-mono);font-size:10.5px;letter-spacing:.14em;color:var(--rr-sub);margin:0 0 8px;font-weight:400}
.rr-fnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.rr-fnav a{font-size:13.5px;text-decoration:none;color:var(--rr-ink)}
.rr-fnav a:hover{text-decoration:underline;text-underline-offset:3px}
.rr-foot__end{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rr-foot__nm{font-family:var(--rr-disp);font-size:16px}
.rr-fine{font-size:12.5px;color:var(--rr-sub);line-height:1.9}
.rr-copy{background:var(--rr-ink);color:var(--rr-paper);text-align:center;padding:10px 16px;font-size:12px;letter-spacing:.04em}

/* ── ボタンとリンク ── */
.rr-scope a.rr-btn,.rr-btn{
  display:inline-flex;align-items:center;gap:14px;background:var(--rr-btn);color:var(--rr-btn-ink);
  font-weight:700;font-size:17px;letter-spacing:.04em;padding:18px 32px;text-decoration:none;
  border:2px solid var(--rr-btn);white-space:nowrap;
}
.rr-btn:hover{background:transparent;color:var(--rr-ink);border-color:var(--rr-ink)}
.rr-scope a.rr-link,.rr-link{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:15.5px;
  color:var(--rr-ink);border-bottom:2px solid var(--rr-ink);padding-bottom:2px;
}
.rr-link:hover{color:var(--rr-sub);border-color:var(--rr-sub)}

/* ── 主役の映像（店主が Canva で作ったもの）── */
.rr-visual{background:var(--rr-paper);border-bottom:1px solid var(--rr-rule);padding-block:20px}
.rr-visual video,.rr-visual img{width:100%;max-width:1140px;height:auto;margin:0 auto}
.rr-visual .rr-sp{display:none}
/* ★ 動画の出し分けの境界は 576/577px に固定すること。レイアウトの 900px とは別。
   common/rr_media.php の PC_QUERY が '(min-width: 577px)' で src を入れるので、
   ここを 900px にすると 577〜900px（iPad 縦 768px 等）で
   「画面に出ている側に src が入らず poster のまま止まり、隠れている側の
   397KB を裏で再生する」という食い違いが起きる（2026-09-17 のレビューで判明）。 */
@media (max-width:576px){
  .rr-visual .rr-pc{display:none}
  .rr-visual .rr-sp{display:block}
}

/* ── トップの最初の画面 ── */
.rr-open{padding-block:clamp(36px,5.5vw,62px);border-bottom:2px solid var(--rr-rule-hard)}
.rr-open .rr-wrap{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end}
.rr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rr-open .rr-catch{
  font-family:var(--rr-disp);font-weight:400;
  font-size:clamp(34px,5.4vw,56px);line-height:1.3;letter-spacing:.005em;
  margin:0 0 18px;text-wrap:balance;
}
.rr-lede{margin:0;font-size:clamp(15px,1.5vw,17px);max-width:34em;line-height:1.9}
/* ★ 下層ページの導入文はトップより行が長い。34em だと「行っておりませ／ん。」の
   ように助詞1文字だけが次行へ落ちる（2026-09-17 石原の指摘）。
   .rr-band の直下に置くものだけ広げる。 */
.rr-band > .rr-wrap > .rr-lede{max-width:52em}
.rr-lede + .rr-lede{margin-top:4px}
.rr-open__side{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.rr-state{font-family:var(--rr-mono);font-size:15.5px;letter-spacing:.02em;color:var(--rr-sub);white-space:nowrap}
/* ★ .rr-state を 15.5px に寄せたので、b も 15.5px のままだと段差が消える
   （index の「本日 <b>営業</b> 11:00–20:00」で状態の語だけを一段大きく見せていた）。
   16px ＝「強調」の段へ上げて段差を戻した。`.rr-guide__body` の li/p を
   「意図した階層だから触らない」と判断したのと同じ扱いに揃える（/code-review の指摘）。 */
.rr-state b{font-family:var(--rr-body);color:var(--rr-ink);font-weight:700;font-size:16px}

/* ── 節 ── */
.rr-band{padding-block:clamp(40px,5.5vw,66px);border-bottom:1px solid var(--rr-rule)}
.rr-hd{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;flex-wrap:wrap}
.rr-hd h2{font-family:var(--rr-disp);font-weight:400;font-size:clamp(22px,2.7vw,28px);margin:0;letter-spacing:.01em}
.rr-hd p{margin:0;color:var(--rr-sub);font-size:14.5px}

/* ── 買取の3経路（カードではなく罫線で組む）── */
.rr-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rr-rule)}
.rr-way{
  padding:26px 26px 24px;border-bottom:1px solid var(--rr-rule);border-right:1px solid var(--rr-rule);
  display:flex;flex-direction:column;gap:12px;
}
.rr-way:first-child{border-left:1px solid var(--rr-rule)}
.rr-way h3{font-family:var(--rr-body);font-weight:700;font-size:19px;letter-spacing:.02em;margin:0}
.rr-way ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;flex:1}
.rr-way li{font-size:14.5px;line-height:1.65;padding-left:15px;position:relative}
.rr-way li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--rr-ink)}
.rr-way .rr-link{margin-top:6px;align-self:flex-start;font-size:14.5px}

/* ── こだわり ── */
.rr-creed{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:center}
.rr-creed__lead{font-family:var(--rr-disp);font-weight:400;font-size:clamp(19px,2.3vw,25px);line-height:1.62;margin:0 0 20px;text-wrap:balance}
.rr-creed p.rr-tx{margin:0 0 18px;font-size:15.5px;line-height:1.95}
.rr-creed .rr-quote{
  margin:0 0 22px;padding:18px 0;
  border-top:1px solid var(--rr-rule);border-bottom:1px solid var(--rr-rule);
  font-size:16px;line-height:1.9;font-weight:500;
}
.rr-creed figure{margin:0}
/* ★ .rr-art は 2026-09-20 に消した。唯一の使用箇所（トップの実店舗の節の figure）が
   .rr-shopfront に替わり、サイト全体で参照0件になったため（/code-review の指摘）。
   ロゴアートの置き場は .rr-sign（トップの締め）と .rr-hero--art（commitment）。 */

/* ── 店舗情報 ── */
.rr-info{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,52px);align-items:start}
.rr-info__left{display:flex;flex-direction:column;gap:28px}
.rr-hrs{border-collapse:collapse;font-family:var(--rr-mono);font-size:14.5px;width:100%}
.rr-hrs th,.rr-hrs td{padding:7px 0;border-bottom:1px solid var(--rr-rule);text-align:left;font-weight:400}
.rr-hrs th{padding-right:22px;color:var(--rr-sub);font-family:var(--rr-body);font-size:13.5px;width:5.5em}
.rr-hrs tr.rr-off th,.rr-hrs tr.rr-off td{color:var(--rr-sub)}
.rr-hrs tr.rr-now th,.rr-hrs tr.rr-now td{font-weight:700;color:var(--rr-ink)}
.rr-addr dt{font-family:var(--rr-mono);font-size:10.5px;letter-spacing:.14em;color:var(--rr-sub);margin-top:16px}
.rr-addr dt:first-child{margin-top:0}
.rr-addr dd{margin:3px 0 0;font-size:14.5px;line-height:1.8}
.rr-info figure{margin:0}
.rr-info figure img{width:100%;height:auto}
.rr-cap{margin-top:8px;font-family:var(--rr-mono);font-size:11.5px;color:var(--rr-sub);letter-spacing:.03em}

/* ── お知らせ ── */
.rr-news{border-top:1px solid var(--rr-rule)}
.rr-ni{
  display:grid;grid-template-columns:140px 7.5em 1fr;gap:16px;align-items:start;
  padding:14px 2px;border-bottom:1px solid var(--rr-rule);color:var(--rr-ink);
}
/* ★ 行の :hover をやめた（2026-09-20・#383）。**行はもうリンクではない。**
   トップは <div> ＋ 題名リンクに変わり、一覧（.rr-ni--full）は元から <div> だった
   ＝ 押せない行に背景のハイライトが出ていた（一覧は 2026-09-17 からずっとこの状態）。
   押しても何も起きない場所を押させることになるので消す。
   手がかりは「題名のリンク」と「画像の枠」の2つに寄せる。 */
.rr-ni img{height:auto;border:1px solid var(--rr-rule);background:var(--rr-paper)}
.rr-ni time{font-family:var(--rr-mono);font-size:13px;color:var(--rr-sub)}
.rr-ni .rr-t{font-size:15.5px;line-height:1.6;font-weight:500}
/* ★ 題名のリンク。下線は既定の text-decoration ではなく border-bottom で引く
   （行の高さを揃えたいのと、色だけを hover で変えたいため）。
   ★ :hover と :focus-visible を**同じ規則にまとめないこと。**セレクタリストは
     1つでも解釈できないものがあると規則ごと捨てられるので、:focus-visible を
     知らない Safari 15.3 以前では hover の手がかりまで消える（.claude/rules/93）。 */
.rr-ni .rr-t a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rr-rule)}
.rr-ni .rr-t a:hover{border-bottom-color:var(--rr-ink)}
.rr-ni .rr-t a:focus-visible{border-bottom-color:var(--rr-ink)}
/* ★ 「→」はリンクの中にある。単独の列ではないので text-align は効かない */
.rr-ni .rr-a{color:var(--rr-sub);font-size:13px;white-space:nowrap}

/* ── トップの最新5件（.rr-ni--top・2026-09-20 第9便・#383）──
   ★ 画像は 140px。一覧（320px）と同じにすると、5件すべてが縦長の告知なので
     お知らせ節が 503px → 約 2,230px に伸び、トップ全体が 4,046 → 約 5,770px（+43%）になる。
     「トップは入口・読むのは一覧」という作りを保ったまま、何の告知かは見分けられる大きさ。
   ★ 押すと一覧と同じモーダルで原寸が開く（部品は src/inc_news_modal.html）。 */
.rr-ni--top .rr-ni__fig{width:140px;margin-top:0}
.rr-ni--top .rr-ni__fig img{display:block;width:100%}

/* ── 下層ページ（Issue #270 ⑤ 第2便・2026-09-17）──
   ★ style.css の .jumbotron_news / _mail / _company には触らない。
     それぞれ 10 / 21 / 5 ファイルが共有しており、この便で触らないページに波及する。
     新しいヒーローは下の .rr-hero で作る。 */

.rr-hero{border-bottom:2px solid var(--rr-rule-hard);padding-block:clamp(30px,4.5vw,52px)}
.rr-hero h1{
  font-family:var(--rr-disp);font-weight:400;
  font-size:clamp(28px,4.4vw,44px);line-height:1.3;margin:0 0 10px;letter-spacing:.01em;text-wrap:balance;
}
.rr-hero p{margin:0;color:var(--rr-sub);font-size:15.5px;line-height:1.85;max-width:62em}

/* 長い本文（店主が書いた文章をそのまま載せる場所） */
.rr-prose{max-width:46em;font-size:15.5px;line-height:2}
.rr-prose > p{margin:0 0 1.5em}
.rr-prose .rr-strong{font-family:var(--rr-disp);font-weight:400;font-size:clamp(18px,2.2vw,23px);line-height:1.6;margin-bottom:1.2em}
.rr-prose ul{list-style:none;margin:0 0 1.5em;padding:0;display:flex;flex-direction:column;gap:8px}
.rr-prose li{position:relative;padding-left:20px}
.rr-prose li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--rr-ink)}

/* 3枠（店主が管理画面から変えられる種別200） */
.rr-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rr-card{border:1px solid var(--rr-rule);display:flex;flex-direction:column}
.rr-card img{width:100%;height:auto}
.rr-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.rr-card h3{font-family:var(--rr-body);font-weight:700;font-size:17px;margin:0;letter-spacing:.02em}
.rr-card p{margin:0;font-size:14.5px;line-height:1.85;color:var(--rr-ink)}

/* 下層ページの足まわり（買取への誘導＋地図＋営業時間）。
   commitment と information が同じものを写して持っていたので1つの型に揃える。 */
.rr-cta{background:var(--rr-ground);padding-block:clamp(34px,5vw,56px)}
.rr-cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.rr-cta h2{font-family:var(--rr-disp);font-weight:400;font-size:clamp(20px,2.5vw,26px);margin:0 0 14px}
.rr-cta p{margin:0 0 16px;font-size:15.5px;line-height:1.9}
.rr-cta__btns{display:flex;flex-wrap:wrap;gap:10px}
.rr-cta__btns a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:2px solid var(--rr-ink);color:var(--rr-ink);background:var(--rr-paper);
  font-weight:700;font-size:14.5px;padding:12px 18px;
}
.rr-cta__btns a:hover{background:var(--rr-ink);color:var(--rr-paper)}
.rr-cta figure{margin:0}
.rr-cta figure img{width:100%;height:auto}

@media (max-width:900px){
  .rr-cards{grid-template-columns:1fr}
  .rr-cta__grid{grid-template-columns:1fr}
}

/* お知らせ一覧（本文も出すので、トップの .rr-ni より縦に厚い）
   ★ 2026-09-20 ― 左端の 54px サムネイル列をやめ、画像を本文の下へ移した。
     店主の告知画像は 1206×1621 で中身は告知の文そのもの。54px では文字が読めず、
     押しても拡大せず、個別ページも無かった（src/news.html の註）。
     そのため列は「日付 ＋ 本文」の2つだけ。SP 側（@media）の grid-column と対で直すこと。 */
.rr-ni--full{grid-template-columns:7.5em 1fr;align-items:start}
.rr-ni--full .rr-ni__body{display:flex;flex-direction:column;gap:5px}
.rr-ni--full .rr-ni__body b{font-size:15.5px;line-height:1.6}
/* ★ ここは pre-wrap にしてよい（**下の** .rr-def の註と逆なので、混ぜないこと）。
   rb_contents は <br /> と生の改行を両方持つので pre-wrap にすると行間が倍になるが、
   **ap_news は <br> を持つ記事が 0 件で、生の改行を持つ記事が 38/43 件**（2026-09-20 実測）。
   既定（normal）のままだと、店主が入れた改行が38件ぶん全部潰れて1行に繋がる。
   ★ 将来、店主が管理画面の textarea に <br> を直接書いたらその行だけ二重になる。
     そのときは pre-wrap をやめるのではなく、その記事の <br> を外すこと。 */
.rr-ni--full .rr-ni__body p{margin:0;font-size:14.5px;line-height:1.85;color:var(--rr-sub);white-space:pre-wrap;overflow-wrap:anywhere}

/* 押せる画像。**押すと同じタブでモーダルが開く**（2026-09-20 第2便で別タブから変えた。
   下の .rr-lb と src/news.html の末尾の註を合わせて読むこと）。
   ★ align-self:flex-start が要る。この <a> は .rr-ni__body（flex・縦並び）の item なので、
     既定の stretch で**本文の幅いっぱい**（PC で 900px 前後）に広がってしまう。そのままだと
     **320px の画像の右にできる数百px の空白を押しても開く**（/code-review の指摘）。
   ★ 幅は <a> に持たせること。img の max-width だけにして <a> を shrink-to-fit にすると、
     **画像を読み込む前は中身の幅で親が決まり**、読み込んだ瞬間に広がって本文が飛ぶ。
     第1便のときは下に「画像を原寸で開く →」の文字があり、その 120px で親が決まっていた
     （読み込み前 120×159 → 後 320×431）。文字を外したいまも、幅は <a> 側に置いたままにする。 */
/* ★ 幅は <a> のほうに持たせること。img に max-width だけ置いて <a> を shrink-to-fit にすると、
     **画像を読み込む前は下の「画像を原寸で開く →」の文字幅（約120px）で親が決まり**、
     img の width:100% がそれに縮む。読み込んだ瞬間に 120→320px へ広がって本文が飛ぶ
     （2026-09-20 に箱で実測。読み込み前 120x159 → 後 320x431）。
     親を 320px に固定すれば、width/height 属性の比率から高さ 431px が先に確保される。
     max-width:100% は SP 用（本文幅が 320px を切っても溢れない）。 */
.rr-ni__fig{display:block;align-self:flex-start;width:320px;max-width:100%;margin-top:10px;cursor:zoom-in}
/* ★ .rr-ni img（54px）より詳細度を上げておくこと。同じ (0,1,1) だと書いた順に左右される */
/* ★ img を display:block に。inline のままだと行ボックスの下に 4〜5px の隙間ができ、
     枠の下だけ余白が出る（押せる範囲も広がる） */
.rr-ni--full .rr-ni__fig img{display:block;width:100%;height:auto;border:1px solid var(--rr-rule);background:var(--rr-paper)}
/* ★ 押せることを枠で示す。「画像を原寸で開く →」の文字は 2026-09-20 に外した（石原の指示）
   ★ :hover と :focus-visible を**同じ規則にまとめないこと。**セレクタリストは
     1つでも解釈できないものがあると規則ごと捨てられる（`:is()` のような許容リストではない）。
     :focus-visible を知らない Safari 15.3 以前では、**hover の枠まで出なくなる** ―
     タッチ端末では cursor:zoom-in も見えないので、押せる手がかりが1つも無くなる
     （/code-review の指摘・2026-09-20）。 */
.rr-ni__fig:hover img{border-color:var(--rr-ink)}
.rr-ni__fig:focus-visible img{border-color:var(--rr-ink)}

/* 画像の拡大（モーダル・2026-09-20 第2便）
   ★ 別タブではなく同じタブで開く。理由は src/news.html の末尾の註。
   ★ [hidden] を必ず別に書くこと。display:flex が当たっていると hidden 属性が効かない。 */
.rr-lb{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,18,20,.88)}
.rr-lb[hidden]{display:none}
.rr-lb__inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
/* ★ max-width は 94vw のフォールバックを先に書く（min() を解さない環境でも収まる） */
.rr-lb__inner img{max-width:94vw;max-width:min(94vw,900px);max-height:76vh;width:auto;height:auto;
  background:#fff;border:1px solid rgba(255,255,255,.28)}
.rr-lb__close{font-family:var(--rr-mono);font-size:15.5px;line-height:1;
  min-height:44px;padding:0 22px;border:1px solid rgba(255,255,255,.5);border-radius:2px;
  background:#fff;color:#141416;cursor:pointer}
.rr-lb__close:hover{background:var(--rr-ground)}

/* ページ送り */
.rr-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px}
.rr-pager a,.rr-pager span{
  font-family:var(--rr-mono);font-size:13.5px;text-decoration:none;color:var(--rr-ink);
  border:1px solid var(--rr-rule);padding:8px 13px;min-width:40px;text-align:center;
}
.rr-pager a:hover{border-color:var(--rr-ink)}
.rr-pager span[aria-current]{background:var(--rr-ink);color:var(--rr-paper);border-color:var(--rr-ink);font-weight:700}

/* 買取案内の4枠（旧版は PC と SP で同じものを2回書いていた） */
.rr-guide{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rr-rule)}
.rr-guide__item{
  display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3.5vw,38px) 0;border-bottom:1px solid var(--rr-rule);align-items:start;
}
.rr-guide__item img{width:100%;height:auto;border-radius:50%}
.rr-guide__body h2{font-family:var(--rr-disp);font-weight:400;font-size:clamp(20px,2.4vw,26px);margin:0 0 4px}
.rr-guide__kind{font-family:var(--rr-mono);font-size:11px;letter-spacing:.16em;color:var(--rr-sub);margin:0 0 14px}
.rr-guide__body ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.rr-guide__body li{font-size:15.5px;line-height:1.7;padding-left:16px;position:relative;font-weight:700}
.rr-guide__body li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--rr-ink)}
.rr-guide__body p{margin:0 0 14px;font-size:14.5px;line-height:1.9}
.rr-btn--sm{font-size:14.5px;padding:12px 22px}

@media (max-width:900px){
  .rr-guide__item{grid-template-columns:1fr;gap:16px}
  .rr-guide__item img{max-width:220px}
}

/* ── フォーム（Issue #270 ⑤ 第3便・2026-09-17）──
   メール問合せ（inquiry）の入力・確認・完了で使う。
   ★ 表で組まないこと。旧版は table.span_info（th 25% / td 75%）を
     3つのテンプレートがそれぞれ <style> で持っており、SP ではラベルと
     入力欄が横に潰れて読めなかった。縦積みにして幅の指定を1つにする。
   ★ 入力欄の font-size は 16px 未満にしないこと。iOS Safari は
     16px 未満の入力欄にフォーカスすると画面を勝手に拡大する。 */
.rr-form{max-width:46em;display:flex;flex-direction:column;gap:22px}
.rr-field{display:flex;flex-direction:column;gap:7px}
.rr-field > label{font-size:14.5px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
/* 必須・任意のしるし。旧版は images/hissu.png（36x22 の画像）を align="right" で置いていた */
.rr-req,.rr-opt{font-family:var(--rr-mono);font-size:10.5px;letter-spacing:.1em;padding:2px 7px;border:1px solid currentColor;font-weight:400;white-space:nowrap}
.rr-req{color:#B3261E}
.rr-opt{color:var(--rr-sub)}
.rr-field input[type="text"],.rr-field input[type="email"],.rr-field input[type="tel"],.rr-field textarea{
  font-family:inherit;font-size:16px;line-height:1.6;
  color:var(--rr-ink);background:var(--rr-paper);
  border:1px solid var(--rr-rule-hard);padding:11px 12px;width:100%;
  border-radius:0;-webkit-appearance:none;appearance:none}
.rr-field textarea{min-height:170px;line-height:1.85;resize:vertical}
.rr-field input:focus,.rr-field textarea:focus{outline:2px solid var(--rr-ink);outline-offset:1px;border-color:var(--rr-ink)}
.rr-note{font-size:12.5px;color:var(--rr-sub);margin:0;line-height:1.7}
.rr-err{margin:0;font-size:13.5px;color:#B3261E;font-weight:700;line-height:1.6}
/* 電話番号の3分割 */
.rr-tel3{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.rr-tel3 input[type="tel"]{width:7em;flex:0 1 auto;min-width:0}
.rr-tel3 span{color:var(--rr-sub);flex:0 0 auto}
/* 送信の行。確認画面では form を2つ横に並べる器にもなる */
.rr-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.rr-act form{margin:0}
.rr-scope button.rr-btn{font-family:inherit;cursor:pointer}
/* ★ border は .rr-btn と同じ 2px にすること。1px にすると、確認画面で横に並ぶ
   「入力へ戻る」と「この内容で送信する」の高さが 2px ずれる（padding は共通のため）。 */
.rr-btn--ghost{background:transparent;color:var(--rr-ink);border:2px solid var(--rr-rule-hard)}
.rr-scope button.rr-btn--ghost:hover{background:var(--rr-ink);color:var(--rr-paper);border-color:var(--rr-ink)}
/* 確認画面の読み合わせ */
.rr-sum{max-width:46em;border-top:1px solid var(--rr-rule);margin:0 0 26px}
.rr-sum > div{display:grid;grid-template-columns:11em 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--rr-rule)}
.rr-sum dt{font-size:13.5px;color:var(--rr-sub);font-weight:400;margin:0}
/* ★ white-space:pre-wrap … お問合せ内容は textarea で入るので改行を保つ。
   word-break … メールアドレスや URL を貼られても器から溢れさせない。 */
.rr-sum dd{margin:0;font-size:15.5px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
/* 完了画面 */
.rr-done{max-width:46em}
.rr-done__mk{font-family:var(--rr-disp);font-weight:400;font-size:clamp(20px,2.6vw,27px);line-height:1.55;margin:0 0 16px}
.rr-done p{font-size:15.5px;line-height:1.95;margin:0 0 16px}

/* ── スマートフォン ── */
@media (max-width:900px){
  /* ★ ヘッダーが SP で器から溢れていた（390px の画面で doc 410px）。
     .rr-util（SNS 3つ ＋ 電話）に 374px 要るのに、.rr-wrap の内側は 350px しかない。
     .rr-tel は white-space:nowrap なので縮まず、全37ページで横スクロールが出ていた。
     第1便から本番に出ていた穴で、第3便の作業中に実測して見つけた（2026-09-17）。
     ★ .rr-sns を隠さないこと。Instagram は外部からの流入1位（7日で76件）。 */
  .rr-bar .rr-wrap{flex-wrap:wrap;gap:10px 16px}
  .rr-util{width:100%;justify-content:space-between}
  /* ★ [2026-09-25] 320px（iPhone SE 第1世代）では SNS と電話番号が1行に収まらず、
     電話番号（nowrap で縮まない）がはみ出して横スクロールが出ていた（doc 356px・Issue #375 ②）。
     折り返しを許して、収まらないときだけ電話番号を次の行へ下げる。
     収まる幅（360px 以上）では折り返しが起きないので、見た目は1px も変わらない
     （ops/tools/check_header_narrow_375.mjs で 390 / 1280 の位置を控えと突き合わせた）。 */
  .rr-util{flex-wrap:wrap;row-gap:8px}
  /* ★ SNS 3つ（211px）＋ gap ＋ 電話（139px・nowrap で縮まない）で 368px 要る。
     器の内側は 350px しかないので、SNS のほうを詰める。電話番号は縮めないこと。 */
  .rr-sns{gap:6px}
  .rr-sns a{padding:4px 7px;font-size:11px;letter-spacing:0}
  .rr-nav .rr-wrap{flex-wrap:wrap;gap:14px 22px;overflow-x:visible}
  .rr-wbr{display:none}
  .rr-open .rr-wrap{grid-template-columns:1fr;align-items:start}
  .rr-open__side{align-items:flex-start;text-align:left}
  .rr-ways{grid-template-columns:1fr;border-left:1px solid var(--rr-rule)}
  .rr-way{border-right:1px solid var(--rr-rule)}
  .rr-way:first-child{border-left:0}
  .rr-creed{grid-template-columns:1fr}
  .rr-info{grid-template-columns:1fr}
  /* ★ SP は画像を 110px に落とす。390px の画面で .rr-wrap の内側は 350px しかなく、
     140px のままだと題名が 198px に押し込まれて1件が5〜6行に折り返す。 */
  .rr-ni{grid-template-columns:110px 1fr;align-items:start;gap:12px}
  .rr-ni--top .rr-ni__fig{width:110px}
  .rr-ni time{grid-column:2;display:block;margin-bottom:3px}
  .rr-ni .rr-t{grid-column:2}
  .rr-ni .rr-a{display:none}
  /* ★ お知らせ一覧（.rr-ni--full）は .rr-t / .rr-a ではなく .rr-ni__body を使う。
     SP の列指定を当てないと、自動配置で本文が 54px のサムネイル列に落ちる
     （2026-09-17 のレビュー #2）。
     ★ 2026-09-20 ― サムネイル列をやめて1列にしたので、日付も本文も 1 列目。
       上の .rr-ni time{grid-column:2} をそのままにすると、存在しない列へ送られる。 */
  /* ★ [2026-09-25] 1fr ではなく minmax(0,1fr)。1fr は中身の最小幅より狭くならないので、
     画像のリンク（.rr-ni__fig の width:320px）が列を 320px に押し広げ、320px の画面で
     お知らせ一覧だけ横にはみ出していた（doc 342px・Issue #375 ② の作業中に見つけた）。
     minmax(0,…) にすると .rr-ni__fig の max-width:100% が効いて列の幅に縮む。 */
  .rr-ni--full{grid-template-columns:minmax(0,1fr)}
  .rr-ni--full time{grid-column:1}
  .rr-ni--full .rr-ni__body{grid-column:1}
  .rr-fnav{grid-template-columns:1fr;gap:24px;margin-bottom:22px}
  .rr-foot__end{flex-direction:column;gap:20px}
  /* 確認画面の読み合わせは SP では1列にする（11em の見出し列だと本文が潰れる） */
  .rr-sum > div{grid-template-columns:1fr;gap:4px}
  .rr-sum dt{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .rr-scope *{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------------
   ⑤ 第4便（2026-09-20）― 静的4ページ（運営会社情報・プライバシーポリシー・
   利用規約・特商法に基づく表示）。本文はすべて rb_contents から来る。

   ★ white-space を pre-wrap にしないこと。rb_contents の本文は
     <br /> と生の改行（CRLF）を両方持っているので、pre-wrap にすると
     1行おきに空行が入って行間が倍になる（本番の rc_id=18 / 90 / 95 で実測）。
     既定（normal）のままなら、生の改行は空白に潰れ <br /> だけが効く。
     同じ理由で .rr-sum（フォームの確認画面用・pre-wrap）は流用しない。
   ------------------------------------------------------------------ */
.rr-def{max-width:58em;border-top:1px solid var(--rr-rule);margin:0}
.rr-def > div{display:grid;grid-template-columns:15em 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--rr-rule)}
.rr-def dt{margin:0;font-size:14.5px;font-weight:700;letter-spacing:.02em;line-height:1.85}
.rr-def dd{margin:0;font-size:15.5px;line-height:1.95;overflow-wrap:anywhere}

/* 法務系の長文（プライバシーポリシー）。本文は1つの塊で届き、節の見出しが
   <b> で書かれている（16個すべてが見出しであることを本番の本文で数えた）。
   段落タグが無いので、<b> を行として立てて節の区切りを作る。 */
.rr-legal{max-width:52em;font-size:15.5px;line-height:2}
.rr-legal b{display:block;margin:2em 0 .5em;font-family:var(--rr-disp);font-weight:400;font-size:clamp(17px,2vw,20px);line-height:1.6}
.rr-legal b:first-child{margin-top:0}
/* ★ 見出しの直後の <br /> を消す。本文は <b>見出し</b><br /> の形なので、b を行として
   立てると <br /> がそのまま残り、16節すべてで見出しと本文の間に空行が1つ入る
   （箱で実測 ― b の下端から本文まで 44px ＝ margin の10px ＋ 1行ぶん・/code-review の指摘）。 */
.rr-legal b + br{display:none}
/* ★ 本文中のリンクに下線を戻す。.rr-scope a:not([class]) が color:inherit・下線なしなので、
   地の文と見分けがつかない。いまは本文にリンクが0件だが、この4ページの本文は
   店主が管理画面から編集できる（編集画面12本）ので、1本張られた瞬間に見えなくなる。 */
.rr-legal a,.rr-def dd a{text-decoration:underline}

@media (max-width:760px){
  .rr-def > div{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .rr-def dt{font-size:13.5px;color:var(--rr-sub)}
}

/* ------------------------------------------------------------------
   2026-09-20 ― トップの実店舗の節を「店の正面写真」に、ロゴアートを
   ページの締めと commitment のヒーローへ（店主の要望 07:52）。
   ------------------------------------------------------------------ */
/* 店の正面写真（店主が 2026-09-18 に送った横位置・1040x780）。
   ★ 表示は最大 520px なので、原本 1040px は高解像度の画面でちょうど2倍。
     **拡大はしていない**（前の版は原本 498px を 520px で引き伸ばしていた・/code-review の指摘）。
   ★ height:auto を必ず書く。width/height 属性（CLS 対策）を付けているので、
     これが無いと 780px で固定される（rules/90 の <video> と同じ型・PR #335）。 */
.rr-shopfront{margin:0}
.rr-shopfront img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
.rr-shopfront figcaption{margin-top:10px;text-align:center}

/* ページの締めに置くロゴアート（落款のあつかい）。見出しも本文も付けない。 */
.rr-sign{border-top:1px solid var(--rr-rule);padding-block:clamp(38px,6vw,72px)}
.rr-sign img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}

/* commitment のヒーロー（本文の導入にロゴアートを並べる） */
.rr-hero--art > .rr-wrap{display:grid;grid-template-columns:1fr minmax(180px,300px);gap:clamp(20px,4vw,48px);align-items:center}
.rr-hero--art img{display:block;width:100%;height:auto}

/* ★ 900px はサイトの既定。.rr-creed も .rr-open も .rr-info もここで1カラムに畳む。
   760px にしていたら、820px 幅（iPad の縦が入る帯）で commitment のヒーローだけ
   2カラムのまま残り、同じ幅のトップは1カラム、という食い違いが出た（/code-review の指摘）。 */
@media (max-width:900px){
  .rr-hero--art > .rr-wrap{grid-template-columns:1fr;gap:20px}
  .rr-hero--art img{max-width:230px;margin:0 auto}
  .rr-sign img{max-width:220px}
}

/* ------------------------------------------------------------------
   2026-09-20 ― 本文の大きさを段階に寄せた（⑤ 第6便）

   便ごとにその場で決めていたので、14〜16px に **14 / 14.5 / 15 / 15.5 / 16** の
   5段階が規則なしに散らばっていた。**15px → 15.5px を11件、14px → 14.5px を5件**
   まとめ、段階をこうした。

     16px                強調（.rr-state b）・入力欄・ルート・屋号
     15.5px              本文（長文の地の文）
     14.5px              補助本文・ナビ・ラベル

   ★ **まとめたのはこの2段（15 と 14）だけ。** 19px / 17px / 13px / 12px / 11px / 10.5px の
     **14宣言は今回の対象外**で、まだ規則に寄せていない（`.rr-ni time` の 13px と
     `.rr-pager` の 13.5px のように、近い値が残っている）。
     **この表を「サイト全体の規則」と読まないこと**（/code-review の指摘）。

   ★ **動かさなかったもの2つ。**
     ・`.rr-field input` の 16px … iOS は 16px 未満の入力欄で自動ズームする
     ・`.rr-scope` の 16px（ルート）… 相対指定の基準

   ★ **`.rr-guide__body` の li(15.5px 太字) と p(14.5px) は逆転ではない。**
     li は買取案内の「要点」、p はその説明で、意図した階層（実画面で確かめた）。触っていない。

   ★ **この変更は見た目を変える。** 0.5px 大きくなると折り返しが動く。
     変換済み10ページ × 1280px / 390px の20通りで、**あふれている要素 0→0 ／
     新たな横スクロール 0件**を実測した（高さは 0〜304px 増える）。

   ★ **?ver= は時刻ではなく、単調増加の採番として扱うこと。**
     2026-09-20 の3便で 202609202100 / 202609202230 / 202609202330 と振ったが、
     **実際に出したのはいずれも同日の朝**で時刻が合っていない。
     そこで一度 202609200845（実時刻）へ**下げた**が、これは誤り ―
     **今日 21:00〜23:30 に次の便を出すと、訪問者のキャッシュに既に入っている URL を
     再利用することになり、その便の CSS が丸ごと効かない。**
     `rr_site.css` は Cache-Control も Expires も返さないので取り直されず、
     **md5 照合もサーバー側の検査も HTTP 200 も全部通るので気づけない**（/code-review の指摘）。
     202609202331 にした。**下げないこと。**

   ★ **前の値より大きければよく、実時刻に合わせる必要は無い**（上のとおり、合わせようとして下げた）。
     2026-09-20 第7便（お知らせの画像を 320px に）  … 202609210001
     2026-09-20 第8便（画像の拡大をモーダルに）      … 202609210002
     2026-09-20 第9便（トップの最新5件を 140px に）  … 202609210003
     2026-09-25（320px でヘッダーの電話番号を折り返す・Issue #375 ②） … 202609250001
     読む側は src/inc_head_title.html / _top / _member の3本。**3本とも同じ値にすること。**
   ------------------------------------------------------------------ */