/* ==========================================================================
   renovyペット 完全ガイド
   設計の前提：
     ・ほとんどがスマホ。**スマホを先に作り、PCはあとで広げる**
     ・依頼が固まっていない人が見る。**文字で説明せず、写真で分からせる**
     ・迷ったところで離脱させない。下のバーからいつでも相談へ
   色・余白・書体の正は brand/design-system.md と renovy-web/style.css
   ========================================================================== */

*{box-sizing:border-box}
/* トークンと共通の型は /assets/css/renovy-sp.css（.rsp）が正。ここはこのページだけの部品 */
:root{--nav-h:64px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);
  font-size:15px;line-height:2.1;letter-spacing:.055em;padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.05em}
p{margin:0}

/* ---------- 診断カード ---------- */
.finder{background:var(--paper-2);padding:44px 28px;margin-top:var(--gap)}
.finder h3{font-size:21px;margin:8px 0 12px;letter-spacing:.06em}
.finder .meta{display:flex;gap:22px;margin:18px 0 22px;flex-wrap:wrap}
.finder .meta div{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--ink-3)}
.finder .meta b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink)}

/* ---------- 素材 3つ ---------- */
.mat{border-top:1px solid var(--line);padding:26px 0}
.mat:last-of-type{border-bottom:1px solid var(--line)}
.mat img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px}
.mat .type{font-size:11px;letter-spacing:.22em;color:var(--ink-3);display:block}
.mat h3{font-size:19px;margin:6px 0 10px;letter-spacing:.06em}
.mat p{font-size:14px;line-height:1.95;color:var(--ink-2)}
.mat .fit{font-size:13px;color:var(--ink-3);margin-top:6px}
@media (min-width:640px){
  .mat{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
  .mat img{margin:0}
}

/* ---------- 色 4つ ---------- */
.colors{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:var(--gap)}
.color img{width:100%;aspect-ratio:1;object-fit:cover}
.color .cn{font-size:10.5px;letter-spacing:.22em;color:var(--ink-3);display:block;margin-top:16px}
.color h3{font-size:16px;margin:4px 0 6px;letter-spacing:.05em}
.color p{font-size:13px;line-height:1.8;color:var(--ink-2)}
.color .who{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.75}

/* ---------- 開いて読む ---------- */
details.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--gap)}
details.more summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;
  justify-content:space-between;gap:12px;font-size:14.5px}
details.more summary::-webkit-details-marker{display:none}
details.more summary:after{content:"＋";color:var(--ink-3)}
details.more[open] summary:after{content:"−"}
.tablewrap{overflow-x:auto;padding-bottom:18px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
th,td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{font-size:11px;color:var(--ink-3);letter-spacing:.08em;border-bottom:1px solid var(--ink)}
tbody th{font-weight:400;white-space:nowrap;font-size:13px}
td a{text-decoration:none;border-bottom:1px solid var(--line-2)}
td .pick{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
td.na{color:var(--line-2)}

/* ---------- 確かめる ---------- */
.confirm{display:grid;gap:22px;margin-top:var(--gap)}
@media (min-width:560px){ .confirm{grid-template-columns:1fr 1fr} }
.cf img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cf .type{font-size:11px;letter-spacing:.22em;color:var(--ink-3);display:block;margin-top:12px}
.cf h3{font-size:17px;margin:4px 0 8px;letter-spacing:.05em}
.cf p{font-size:13px;line-height:1.9;color:var(--ink-2)}

/* ---------- 日付 ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);margin-top:var(--gap)}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;
  font-size:14px;padding:17px 8px;cursor:pointer;min-height:58px;letter-spacing:.04em;
  transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.case{padding-top:26px}
.case .lead2{font-size:15.5px;color:var(--ink);margin-bottom:6px}
.tl{list-style:none;padding:0;margin:22px 0 0;border-left:1px solid var(--line)}
.tl li{padding:0 0 22px 20px;position:relative;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.tl li:last-child{padding-bottom:0}
.tl li:before{content:"";position:absolute;left:-4.5px;top:12px;width:8px;height:8px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-2)}
.tl li.best:before{background:var(--ink);border-color:var(--ink)}
.tl li.best{color:var(--ink)}
.tl li small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px;line-height:1.8}

/* ---------- チェックリスト ---------- */
.check{list-style:none;padding:0;margin:var(--gap) 0 0;border-top:1px solid var(--line)}
.check li{display:grid;grid-template-columns:2.8em 1fr;gap:8px;padding:20px 0;
  border-bottom:1px solid var(--line);font-size:16px}
.check li .n{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink-3);padding-top:6px}
.check li small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;line-height:1.85}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }

/* 下のバーのボタンは LINE の色。ここだけ差し色を許す（brand/design-system.md の例外） */
.mat p b{font-weight:500;color:var(--ink)}

/* SP：見出し・ラベル・締めは中央。本文は左のまま（中央寄せの長文は読みにくい） */
@media (max-width:640px){
  .finder{padding:44px 24px;text-align:center}
  .finder .meta{justify-content:center;gap:26px}
  .finder .body{text-align:left}
  .cta{text-align:center}
  .cta .muted{max-width:26em;margin-left:auto;margin-right:auto}
  .check li{font-size:15.5px}
  .colors{gap:22px}
}

/* 診断名は「床」を少しだけ立てる。大きくしすぎない */
em{font-style:normal;font-weight:500;font-size:1.08em;letter-spacing:.08em}

/* ==========================================================================
   2026-09-28 作り直し：ルール説明書の作法（brand/game-design.md）
   表紙 → 目次 → 流れ → 登場するもの（床3・色4）→ 絞る → 確かめる → 日付 → 決まったこと
   ========================================================================== */
.hero .rule-box{margin:var(--gap) auto 0;max-width:24em;padding:22px 20px;border:1px solid var(--line-2);
  font-size:13.5px;line-height:2;color:var(--ink-2)}
.hero .rule-box b{font-weight:500;color:var(--ink);font-family:var(--serif);font-size:16px}

/* 目次：横に並べて全体を先に見せる */
.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--block)}
.toc a{display:flex;flex-direction:column;gap:4px;align-items:center;background:var(--paper);padding:18px 8px;
  text-decoration:none;font-size:13px;letter-spacing:.06em;transition:background .2s}
.toc a:hover{background:#fff}
.toc .n{font-family:var(--serif);font-style:italic;font-size:11px;color:var(--ink-3)}
@media (min-width:600px){ .toc{grid-template-columns:repeat(5,1fr)} }

/* 流れ：写真つきの4手順。3・4手目は「実物・部屋」なので地を変える */
.steps{list-style:none;padding:0;margin:var(--gap) 0 0;display:grid;gap:14px}
.step{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:start;background:#fff;
  border:1px solid var(--line);padding:16px}
.step img{width:100%;aspect-ratio:1;object-fit:cover}
.step .where{font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.step h3{font-size:21px;margin:4px 0 8px;letter-spacing:.06em;display:flex;align-items:baseline;gap:12px}
.step h3 .n{font-style:italic;font-size:13px;color:var(--ink-3)}
.step p{font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.step.real{background:var(--paper-2);border-color:var(--paper-2)}
.step.real .where{color:var(--ink)}
@media (min-width:600px){ .step{grid-template-columns:140px 1fr;gap:24px;padding:20px} }

/* 床3つ：得意・苦手つきのカード */
.pieces{display:grid;gap:56px;margin-top:var(--gap)}
.pieces .piece:last-child{border-bottom:1px solid var(--line);padding-bottom:22px}
.piece{background:transparent;border:0;border-top:1px solid var(--line);padding-top:32px}
.piece img{width:100%;aspect-ratio:16/9;object-fit:cover}
.piece .pb{padding:24px 0 10px}
.piece .type{font-size:11px;letter-spacing:.22em;color:var(--ink-3);display:block}
.piece h3{font-size:21px;margin:6px 0 8px;letter-spacing:.06em}
.piece .one{font-size:14.5px;color:var(--ink);line-height:1.8}
.stats{margin:16px 0 14px;border-top:1px solid var(--line)}
.stats div{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.stats dt{font-size:12.5px;color:var(--ink-2)}
.stats dd{margin:0;letter-spacing:.28em;font-size:12px;color:var(--ink)}
.stats dd i{font-style:normal;color:var(--line)}
.piece .good,.piece .bad{font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.piece .bad{color:var(--ink-3);margin-top:2px}
/* PCでも写真は横いっぱいに（横に並べると写真が小さくなりすぎる。Owner 指示 2026-09-29） */
@media (min-width:640px){
  .piece img{aspect-ratio:16/9}
  .piece .pb{padding:28px 0 12px}
}

/* 絞る：数が減るのを見せる */
.narrow{display:flex;justify-content:center;align-items:baseline;gap:12px;margin:18px 0 20px;
  font-family:var(--serif);font-size:24px;color:var(--ink-3);letter-spacing:.02em}
.narrow i{font-style:normal;font-size:14px}
.narrow .last{font-size:40px;color:var(--ink)}

/* 確かめる：画面 ⇄ 実物 の往復 */
.loop{display:grid;grid-template-columns:1fr;gap:28px;margin-top:var(--gap)}
.loop .side{background:transparent;border:0;padding:0}
.loop .side:last-child{background:transparent}
.loop .where{font-size:11px;letter-spacing:.16em;color:var(--ink-3);display:block;margin-bottom:12px}
.loop img{width:100%;aspect-ratio:4/3;object-fit:cover}
.loop h3{font-size:17px;margin:14px 0 6px;letter-spacing:.05em}
.loop p{font-size:13px;line-height:1.9;color:var(--ink-2)}
.loop .arrows{display:flex;justify-content:center;gap:18px;font-family:var(--serif);font-size:22px;color:var(--ink-3)}
.loop .arrows span:first-child{transform:rotate(90deg)}
.loop .arrows span:last-child{transform:rotate(90deg)}
@media (min-width:600px){
  .loop{grid-template-columns:1fr auto 1fr;align-items:center}
  .loop .arrows{flex-direction:column;gap:8px}
  .loop .arrows span{transform:none!important}
}

/* 参考の C.S.R・D′値。項目名の下に改行して、薄く小さく */
.stats dt small{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;margin-top:2px;
  font-variant-numeric:tabular-nums}
.stats div{align-items:center}
/* 素材の価格の目安 */
.piece .price{margin-top:8px;font-size:14px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.piece .price small{display:block;font-size:11px;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}
/* 診断への小さな導線。各章の終わりに置く */
.fmini{margin-top:var(--gap);background:var(--paper-2);padding:32px 24px;display:flex;flex-direction:column;gap:12px;text-align:center}
.fmini p{font-size:14px;color:var(--ink-2);line-height:1.9;margin-bottom:8px}

/* ---------- 診断ブロック：最初の問いを見せて、押したくなる形に ---------- */
a.finder,a.finder:link,a.finder:visited{display:block;background:var(--paper-2);padding:44px 24px;margin-top:var(--gap);
  text-decoration:none;color:var(--ink);text-align:center;transition:background .3s}
a.finder:hover{background:#efece6}
.finder .q{font-family:var(--serif);font-size:19px;line-height:1.7;margin:24px 0 20px;letter-spacing:.04em}
.peek{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.peek img{width:100%;aspect-ratio:1;object-fit:cover}
.peek span{display:block;font-size:10.5px;line-height:1.5;color:var(--ink-2);margin-top:8px;letter-spacing:.02em}
.finder .btn{margin:0 auto;max-width:360px}
.finder .muted{margin-top:16px}
@media (max-width:420px){ .peek span{font-size:10px} }
.peek.n2{grid-template-columns:1fr 1fr;gap:14px;max-width:340px;margin-left:auto;margin-right:auto}
.peek.n2 span{font-size:12px}
.hero .finder{text-align:center}
.peek.n3{grid-template-columns:repeat(3,1fr);gap:12px;max-width:400px;margin-left:auto;margin-right:auto}
.peek.n3 span{font-size:12px}
/* 章の導入文はPCでは中央に（幅いっぱいに満たない1〜2行が左に寄って見える） */
@media (min-width:640px){ .sec-head + .body{text-align:center} }

/* ==========================================================================
   書体の役割（brand/design-system.md 2026-09-29）
   明朝＝装飾・空気：ページ見出し(h1)・章見出し(h2)・eyebrow/STEP・矢印・締めの一言・「うちの子の床診断」の名前
   ゴシック＝理解してほしいもの：決めごと・素材名・色名・問い・確かめ方・本文・選択肢
   ========================================================================== */
.piece h3{font-family:var(--jp);font-weight:500;font-size:19px;letter-spacing:.06em}
.color h3{font-family:var(--jp);font-weight:500;font-size:15px;letter-spacing:.06em}
.loop h3{font-family:var(--jp);font-weight:500;font-size:16px;letter-spacing:.05em}
.finder .q{font-family:var(--jp);font-weight:500;font-size:17px;letter-spacing:.04em}
.decided .v{font-weight:500}
.case .lead2{font-weight:500}
.flow3--next{margin-top:var(--gap)}

.wrap{padding-bottom:140px}