@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:15px;
  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:15px;letter-spacing:.02em;color:var(--rr-sub);white-space:nowrap}
.rr-state b{font-family:var(--rr-body);color:var(--rr-ink);font-weight:700;font-size:15.5px}

/* ── 節 ── */
.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:14px}

/* ── 買取の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:15px;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 img{width:100%;max-width:520px;margin:0 auto}

/* ── 店舗情報 ── */
.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:14px;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%}
.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:54px 7.5em 1fr 1.6em;gap:16px;align-items:center;
  padding:14px 2px;border-bottom:1px solid var(--rr-rule);text-decoration:none;color:var(--rr-ink);
}
.rr-ni:hover{background:var(--rr-ground)}
.rr-ni img{width:54px;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:15px;line-height:1.6;font-weight:500}
.rr-ni .rr-a{text-align:right;color:var(--rr-sub);font-size:13px}

/* ── 下層ページ（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:15px;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:14px;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:15px;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 より縦に厚い） */
.rr-ni--full{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}
.rr-ni--full .rr-ni__body p{margin:0;font-size:14px;line-height:1.85;color:var(--rr-sub)}
.rr-ni--full img{align-self:start}

/* ページ送り */
.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:15px;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}
}

/* ── スマートフォン ── */
@media (max-width:900px){
  .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}
  .rr-ni{grid-template-columns:54px 1fr;align-items:start;gap:12px}
  .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）。 */
  .rr-ni--full .rr-ni__body{grid-column:2}
  .rr-fnav{grid-template-columns:1fr;gap:24px;margin-bottom:22px}
  .rr-foot__end{flex-direction:column;gap:20px}
}

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