/* ==========================================================================
   renovy 紹介ページ テンプレートブロック
   web / Instagram / LP でユーザーの目に触れる面は、ここのパーツを元に作る。
   色・余白・文字は必ずトークン（:root の変数）を使う。直値を書かない。
   ========================================================================== */
:root {
  /* 値の正は renovy-web/style.css（= /parts/tokens.css）。ここはその別名。 */
  --r-bg:        #f8f8f8;  /* ページの地。純白にしない */
  --r-bg-2:      #f2f2f2;  /* 一段落とす面 */
  --r-ink:       #1c1c1c;
  --r-ink-2:     #5a5a5a;
  --r-ink-3:     #7a7a7a;  /* 薄さの下限。これより薄くしない */
  --r-line:      #e0e0e0;
  --r-accent:    #1c1c1c;

  --r-serif: "STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN", serif;
  --r-sans:  "Noto Sans JP", system-ui, sans-serif;

  --r-measure: 42em;   /* 本文の1行幅。全角40字前後 */
  --r-gap:     28px;
  --r-block:   96px;   /* ブロック間の余白。ブロック内より必ず大きく */
}

.r-page { background: var(--r-bg); color: var(--r-ink); font-family: var(--r-sans);
  font-size: 15px; line-height: 2.1; letter-spacing: .055em; }
.r-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* --- ① ヒーロー ------------------------------------------------------- */
.r-hero { padding: 72px 0 0; text-align: center; }
.r-hero .r-eyebrow { font-size: 11px; letter-spacing: .22em; color: var(--r-ink-3); margin: 0 0 14px; }
.r-hero h1 { font-family: var(--r-serif); font-weight: 500; font-size: clamp(30px, 6vw, 46px);
  line-height: 1.25; margin: 0 0 18px; }
.r-hero p { max-width: var(--r-measure); margin: 0 auto; color: var(--r-ink-2); }
.r-hero .r-figure { margin-top: 36px; }

/* --- ② 見出し（中央・破線） -------------------------------------------- */
.r-head { text-align: center; margin: var(--r-block) 0 var(--r-gap); }
.r-head .r-label { font-size: 11px; letter-spacing: .22em; color: var(--r-ink-3); display: block; margin-bottom: 8px; }
.r-head h2 { font-size: 19px; font-weight: 500; letter-spacing: .06em; margin: 0 0 12px; }
.r-head .r-rule { display: block; width: 72px; margin: 0 auto; border: 0;
  border-top: 1px dashed var(--r-line); }

/* --- ③ 紹介ブロック（画像 → 本文） ------------------------------------- */
.r-block { margin-bottom: var(--r-block); }
.r-figure { margin: 0; }
.r-figure img { display: block; width: 100%; height: auto; }
.r-figure figcaption { font-size: 11px; color: var(--r-ink-3); margin-top: 10px; text-align: center; }
.r-body { max-width: var(--r-measure); margin: var(--r-gap) auto 0; color: var(--r-ink-2); }
.r-body p { margin: 0 0 1.2em; }
.r-body p:last-child { margin-bottom: 0; }

/* --- ④ 仕様・ポイント（3つまで） --------------------------------------- */
.r-points { max-width: var(--r-measure); margin: var(--r-gap) auto 0;
  list-style: none; padding: 0; display: grid; gap: 1px; background: var(--r-line);
  border-top: 1px solid var(--r-line); border-bottom: 1px solid var(--r-line); }
.r-points li { background: var(--r-bg); padding: 14px 4px; display: flex; gap: 16px; }
.r-points .r-k { flex: 0 0 7em; color: var(--r-ink-3); font-size: 13px; }
.r-points .r-v { color: var(--r-ink); }

/* --- ⑤ 引用・一言 ------------------------------------------------------ */
.r-quote { max-width: var(--r-measure); margin: var(--r-block) auto; text-align: center; }
.r-quote p { font-family: var(--r-serif); font-size: 24px; line-height: 1.6; margin: 0; }

/* --- ⑥ 行動（CTAは1つだけ） ------------------------------------------- */
.r-cta { text-align: center; padding: var(--r-block) 0; }
.r-cta p { color: var(--r-ink-2); max-width: var(--r-measure); margin: 0 auto 20px; }
.r-btn, a.r-btn:link, a.r-btn:visited { display: inline-block; text-decoration: none; background: var(--r-accent); color: #fff;
  padding: 14px 34px; border-radius: 2px; font-size: 14px; letter-spacing: .08em; }
.r-btn:hover { background: #333331; }

/* --- Instagram 用（1:1 / 4:5 で切っても成立させる） --------------------- */
.r-ig { width: min(100%, 420px); margin: 0 auto; background: var(--r-bg); }
.r-ig .r-figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center bottom; }
.r-ig .r-cap { padding: 18px 20px 24px; text-align: center; }
.r-ig .r-cap .r-label { font-size: 10px; letter-spacing: .22em; color: var(--r-ink-3); }
.r-ig .r-cap h3 { font-size: 17px; font-weight: 500; margin: 8px 0 0; letter-spacing: .04em; }

@media (max-width: 600px) {
  :root { --r-block: 64px; --r-gap: 20px; }
  .r-page { font-size: 15px; }
}

/* --- ⑧ 比較表（3つまで。スマホは横スクロール） ------------------------- */
.r-compare { margin: var(--r-gap) 0 0; overflow-x: auto; }
.r-compare table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px;
  table-layout: fixed; }
/* 1列目＝項目名。残り3列は必ず同じ幅にする */
.r-compare col.k  { width: 20%; }
.r-compare col.v  { width: 26.6%; }
.r-compare th, .r-compare td { padding: 16px 14px; border-bottom: 1px solid var(--r-line);
  vertical-align: top; letter-spacing: .05em; line-height: 1.8; }
.r-compare thead th { font-family: var(--r-serif); font-weight: 500; font-size: 15px; letter-spacing: .06em;
  border-bottom: 1px solid var(--r-ink); text-align: center; padding-bottom: 12px; }
.r-compare tbody th { font-weight: 400; color: var(--r-ink-3); font-size: 13px; text-align: left; }
.r-compare tbody td { color: var(--r-ink-2); text-align: center; }
.r-compare .is-best { color: var(--r-ink); }

/* --- ⑨ 図版待ち（画像が決まるまでの枠） --------------------------------- */
.r-ph { aspect-ratio: 4 / 3; background: var(--r-bg-2); border: 1px dashed var(--r-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--r-ink-3); font-size: 11px; letter-spacing: .18em; }

/* --- ⑩ 3つ並べる（上の方・ビジュアルで選ばせる） ------------------------ */
.r-trio { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); margin-top: var(--r-gap); }
.r-trio .r-figure img,
.r-trio .r-ph { aspect-ratio: 3 / 4; object-fit: cover; }
.r-trio h3 { font-family: var(--r-serif); font-weight: 500; font-size: 17px; letter-spacing: .06em;
  margin: 16px 0 6px; }
.r-trio .r-for { font-size: 12px; color: var(--r-ink-3); letter-spacing: .1em; margin: 0 0 8px; }
.r-trio p.r-one { font-size: 14px; line-height: 1.9; color: var(--r-ink-2); margin: 0; }
@media (max-width: 600px) {
  .r-trio { grid-template-columns: 1fr; gap: 36px; }
  .r-trio .r-figure img, .r-trio .r-ph { aspect-ratio: 4 / 3; }
}

/* --- ⑪ 詳しく見る区切り（ここから下は数値の話） ------------------------- */
.r-deep { margin-top: var(--r-block); padding-top: var(--r-block);
  border-top: 1px solid var(--r-line); }
.r-deep .r-deep-label { text-align: center; font-size: 11px; letter-spacing: .22em;
  color: var(--r-ink-3); margin: 0 0 8px; }

/* --- ⑫ かんたん評価（3項目・点で見せる） ------------------------------- */
.r-score { max-width: var(--r-measure); margin: var(--r-gap) auto 0;
  border-top: 1px solid var(--r-line); }
.r-score .row { display: flex; align-items: center; gap: 14px; padding: 13px 2px;
  border-bottom: 1px solid var(--r-line); }
.r-score .k { flex: 0 0 8em; font-size: 13px; color: var(--r-ink-2); letter-spacing: .05em; }
.r-score .dots { flex: 0 0 auto; letter-spacing: .28em; font-size: 13px; color: var(--r-ink); }
.r-score .dots i { font-style: normal; color: var(--r-line); }
.r-score .v { flex: 1; font-size: 13px; color: var(--r-ink-2); letter-spacing: .05em; }
@media (max-width: 600px) {
  .r-score .row { flex-wrap: wrap; gap: 6px 12px; }
  .r-score .k { flex: 0 0 6.5em; }
  .r-score .v { flex: 1 0 100%; font-size: 12px; }
}

/* --- ⑬ 一覧へ（ブロック末尾の枠線ボタン） ------------------------------ */
/* 塗りつぶしの .r-btn はページの CTA 1つだけ。ここは枠線で一段下げる。 */
.r-more { text-align: center; margin-top: var(--r-gap); }
.r-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; color: var(--r-ink);
  border: 1px solid var(--r-ink); background: transparent;
  padding: 12px 28px; border-radius: 2px;
  font-size: 12px; letter-spacing: .12em;
  transition: background .3s, color .3s;
}
.r-btn-ghost:hover { background: var(--r-ink); color: var(--r-bg); }
.r-btn-ghost .arrow { font-size: 10px; transition: transform .3s; }
.r-btn-ghost:hover .arrow { transform: translateX(4px); }

/* --- 注記（表や仕様のすぐ下に置く小さい一行） --------------------------- */
.r-foot { max-width: var(--r-measure); margin: 14px auto 0;
  font-size: 12px; line-height: 1.9; color: var(--r-ink-3); }

/* --- 余白の詰め（一言 → CTA が空きすぎないように） --------------------- */
.r-quote { margin: calc(var(--r-block) * 0.75) auto calc(var(--r-block) * 0.4); }
.r-cta { padding: calc(var(--r-block) * 0.5) 0 var(--r-block); }
.r-cta-note { font-size: 12px; color: var(--r-ink-3); margin: 14px 0 0; }
.sp-br { display: none; }
@media (max-width: 600px) {
  .sp-br { display: inline; }
  .r-quote p { font-size: 21px; }
}

/* --- 比較表：C.S.R・D′ は主役。サブタイトルを小さく添える -------------- */
.r-compare tbody th { line-height: 1.6; }
.r-compare tbody th span { display: block; color: var(--r-ink-3); font-size: 11px; margin-top: 2px; }

/* ==========================================================================
   ⑭ Q&A（アコーディオン）— renovy.jp の FAQ と同じ作り。
   ページの途中に入れる。答えは開いてから読ませる。
   ========================================================================== */
.r-faq { background: var(--r-bg-2); padding: var(--r-block) 0;
  margin-top: var(--r-block); }
.r-faq-head { text-align: center; margin-bottom: 44px; }
.r-faq-head .r-label { display: block; font-size: 11px; letter-spacing: .22em;
  color: var(--r-ink-3); margin-bottom: 12px; }
.r-faq-head h2 { font-family: var(--r-serif); font-weight: 400;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: .02em; margin: 0 0 12px; }
.r-faq-head p { font-size: 12px; letter-spacing: .06em; color: var(--r-ink-2); margin: 0; }

.r-faq-list { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--r-line); }
.r-faq-list details { border-bottom: 1px solid var(--r-line); }
.r-faq-list summary { list-style: none; cursor: pointer; padding: 15px 0;
  display: flex; align-items: flex-start; gap: 16px;
  font-size: 13px; letter-spacing: .04em; color: var(--r-ink); }
.r-faq-list summary::-webkit-details-marker { display: none; }
.r-faq-list summary .q { font-family: var(--r-serif); font-style: italic;
  font-size: 13px; color: var(--r-ink-2); flex-shrink: 0; line-height: 1.5; }
.r-faq-list summary .t { flex: 1; line-height: 1.7; font-weight: 400; }
.r-faq-list summary .icn { flex-shrink: 0; font-size: 14px; color: var(--r-ink-3);
  transition: transform .3s; line-height: 1.5; }
.r-faq-list details[open] summary .icn { transform: rotate(45deg); color: var(--r-ink); }
.r-faq-a { padding: 0 0 18px 29px; font-size: 12px; line-height: 1.95;
  color: var(--r-ink-2); letter-spacing: .04em; }
.r-faq-a .a { font-family: var(--r-serif); font-style: italic;
  color: var(--r-ink-2); margin-right: 8px; font-size: 13px; }

/* ==========================================================================
   ボタン — renovy.jp の .btn と同じ形にそろえる（細い枠・広い字間・矢印）
   ========================================================================== */
.r-center-btn { text-align: center; margin-top: 44px; }
.r-btn, .r-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 24px;
  min-width: 240px; padding: 17px 38px; border-radius: 0;
  font-size: 14px; letter-spacing: .14em; text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
/* ⚠️ 文字色は必ず a.クラス:link / :visited まで書く。
   renovy.jp の header.css に a:link{color:inherit} があり、
   詳細度(0,1,1) が .r-btn(0,1,0) に勝つため、クラスだけの指定は負けて
   黒地に黒文字になる。実際に本番で起きた事故（2026-09-26）。 */
.r-btn, a.r-btn, a.r-btn:link, a.r-btn:visited, a.r-btn:hover, a.r-btn:active, a.r-btn:focus {
  border: 1px solid var(--r-ink); background: var(--r-ink); color: var(--r-bg);
}
.r-btn:hover, a.r-btn:hover { background: #000; border-color: #000; color: var(--r-bg); }

.r-btn-ghost, a.r-btn-ghost, a.r-btn-ghost:link, a.r-btn-ghost:visited,
a.r-btn-ghost:active, a.r-btn-ghost:focus {
  border: 1px solid var(--r-line); background: transparent; color: var(--r-ink);
}
.r-btn-ghost:hover, a.r-btn-ghost:hover {
  background: var(--r-ink); color: var(--r-bg); border-color: var(--r-ink);
}
.r-btn .arrow, .r-btn-ghost .arrow { font-size: 12px; transition: transform .3s; }
.r-btn:hover .arrow, .r-btn-ghost:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   ゆったり版（.r-airy）— 余白を広く取り、1ブロックずつ読ませる組み方。
   読み物・紹介ページ向け。情報量は増やさず、間だけを広げる。
   ========================================================================== */
.r-airy {
  --r-gap:   40px;   /* ブロック内（画像→本文など） */
  --r-block: 168px;  /* ブロックとブロックの間 */
}
.r-airy .r-wrap { max-width: 760px; }
.r-airy .r-hero { padding-top: 120px; }
.r-airy .r-hero h1 { margin-bottom: 26px; }
.r-airy .r-hero .r-figure { margin-top: 56px; }
.r-airy .r-head { margin-bottom: 40px; }
.r-airy .r-head h2 { font-size: 21px; }
.r-airy .r-body { line-height: 2.3; }
.r-airy .r-body p { margin-bottom: 1.6em; }
.r-airy .r-figure figcaption { margin-top: 16px; }
.r-airy .r-score { margin-top: 44px; }
.r-airy .r-score .row { padding: 17px 2px; }
.r-airy .r-points li { padding: 17px 4px; }
.r-airy .r-more { margin-top: 44px; }
/* 一言 ＋ CTA で1ブロック。間は詰め、ブロックの外だけ広く取る */
.r-airy .r-quote { margin: var(--r-block) auto 28px; }
.r-airy .r-quote p { font-size: 27px; line-height: 1.8; }
.r-airy .r-cta { padding: 0 0 var(--r-block); }
.r-airy .r-cta p { margin-bottom: 28px; }

/* 「ここから、詳しく」から下は地の色を一段落として、面を分ける */
.r-airy .r-deep {
  /* 数値を読む面は renovy pet のアイボリー地（renovy-pet-2 と同じ #f5f3ef）。
     上の「選ぶ面」（#f8f8f8）と地の色で切り替える */
  background: #f5f3ef;
  border-top: 1px solid var(--r-line);
  margin-top: var(--r-block);
  padding: var(--r-block) 0;
  /* 親の 760px 幅を突き抜けて全幅に敷く */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
}
.r-airy .r-deep .r-head { margin-top: 112px; }
.r-airy .r-deep > .r-deep-label + .r-head { margin-top: 0; }
.r-airy .r-compare { margin-top: 40px; }
.r-airy .r-compare th, .r-airy .r-compare td { padding: 20px 14px; }
.r-airy .r-faq { margin-top: 0; padding: var(--r-block) 0 0; background: transparent; }
.r-airy .r-faq-list summary { padding: 19px 0; }

@media (max-width: 600px) {
  .r-airy { --r-gap: 28px; --r-block: 104px; }
  .r-airy .r-hero { padding-top: 72px; }
  .r-airy .r-quote p { font-size: 21px; }
}

/* 地の色をそのまま透かす。グレーの面を作らない。
   .r-points は「1px gap + 親の背景色」で線を引いていたので、
   ゆったり版では親の背景を消し、各行に罫線を引く方式へ切り替える。 */
.r-airy .r-points {
  background: transparent; gap: 0;
  border-top: 1px solid var(--r-line); border-bottom: 0;
}
.r-airy .r-points li {
  background: transparent;
  border-bottom: 1px solid var(--r-line);
}
.r-airy .r-score .row,
.r-airy .r-compare table,
.r-airy .r-compare th,
.r-airy .r-compare td,
.r-airy .r-ph { background: transparent; }
.r-airy .r-ph { border: 1px dashed var(--r-line); }

/* ==========================================================================
   renovy.jp に載せるときは .r-onsite を付ける。
   サイト共通ヘッダーは position:fixed（高さ --nav-h:64px）なので、
   これを付けないとページ上部がヘッダーの下に潜る。SPで顕著。
   ========================================================================== */
.r-page.r-onsite { padding-top: var(--nav-h, 64px); }
.r-onsite .r-hero { padding-top: 96px; }
@media (max-width: 640px) {
  .r-onsite .r-hero { padding-top: 56px; }
  .r-onsite.r-airy .r-hero { padding-top: 64px; }
}
/* ページ内リンクで飛んだときもヘッダーに隠れないように */
html { scroll-padding-top: calc(var(--nav-h, 64px) + 16px); }

/* ==========================================================================
   ⑮ 診断 — 3問で「床の種類 × カラーコレクション」を決め、商品を3点出す
   ========================================================================== */
.r-quiz { max-width: 640px; margin: 0 auto; }
.r-quiz-step { display: none; }
.r-quiz-step.is-on { display: block; }
.r-quiz-no { font-size: 11px; letter-spacing: .22em; color: var(--r-ink-3); text-align: center; }
.r-quiz h2 { font-family: var(--r-serif); font-weight: 500; font-size: clamp(20px,3vw,26px);
  letter-spacing: .06em; text-align: center; margin: 12px 0 34px; line-height: 1.5; }
.r-choices { display: grid; gap: 12px; }
.r-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--r-line); border-radius: 0;
  padding: 20px 22px; font-family: inherit; font-size: 15px; color: var(--r-ink);
  letter-spacing: .05em; line-height: 1.7; transition: border-color .25s, background .25s;
}
.r-choice:hover { border-color: var(--r-ink); background: rgba(28,28,28,.02); }
.r-choice .sub { display: block; font-size: 12px; color: var(--r-ink-3); margin-top: 6px; }
.r-quiz-bar { display: flex; gap: 6px; justify-content: center; margin-top: 34px; }
.r-quiz-bar i { width: 28px; height: 2px; background: var(--r-line); display: block; }
.r-quiz-bar i.on { background: var(--r-ink); }
.r-quiz-back { display: block; margin: 22px auto 0; background: none; border: 0;
  font-family: inherit; font-size: 12px; color: var(--r-ink-3); cursor: pointer;
  border-bottom: 1px solid var(--r-line); padding: 0 0 2px; }
.r-quiz-back:hover { color: var(--r-ink); border-color: var(--r-ink); }

/* 結果 */
.r-result { text-align: center; }
.r-result .lead { font-size: 12px; letter-spacing: .22em; color: var(--r-ink-3); }
.r-result h2 { margin: 14px 0 10px; }
.r-result .why { max-width: 34em; margin: 0 auto; font-size: 14px; line-height: 2;
  color: var(--r-ink-2); }
.r-rank { display: grid; gap: 28px; margin-top: 48px; text-align: left; }
.r-rank-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.r-rank-item .ph { background: var(--r-bg-2); aspect-ratio: 1; overflow: hidden; }
.r-rank-item .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-rank-item .no { font-family: var(--r-serif); font-style: italic; font-size: 13px;
  color: var(--r-ink-3); }
.r-rank-item h3 { font-family: var(--r-serif); font-weight: 500; font-size: 18px;
  letter-spacing: .06em; margin: 4px 0 2px; }
.r-rank-item .ja { font-size: 12px; color: var(--r-ink-3); margin: 0 0 10px; }
.r-rank-item .meta { font-size: 13px; color: var(--r-ink-2); line-height: 1.9; margin: 0; }
.r-rank-item .meta b { font-weight: 500; color: var(--r-ink); }
.r-rank-item .go { display: inline-block; margin-top: 10px; font-size: 12px;
  color: var(--r-ink); border-bottom: 1px solid var(--r-line); text-decoration: none; }
.r-rank-item .go:hover { border-color: var(--r-ink); }
.r-loading { text-align: center; color: var(--r-ink-3); font-size: 12px; padding: 40px 0; }
@media (max-width: 600px) {
  .r-rank-item { grid-template-columns: 96px 1fr; gap: 14px; }
  .r-choice { padding: 17px 18px; font-size: 14px; }
}

/* 評価ブロックの中に価格帯を入れる（点ではなく数字を置く行） */
.r-score .row--price .num { flex: 0 0 auto; font-size: 14px; color: var(--r-ink);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.r-score .row--price .v { color: var(--r-ink-3); font-size: 12px; }

/* 価格の注記（右下に小さく） */
.r-price-note { max-width: var(--r-measure); margin: 10px auto 0; text-align: right;
  font-size: 11px; line-height: 1.8; color: var(--r-ink-3); letter-spacing: .04em; }