/* ==========================================================================
   renovy SP ページの型（pet-guide から切り出し・2026-09-30）
   使い方：ページ本体を <div class="rsp"> で包み、下のクラスを使う。
   正は brand/design-system.md。値を変えるときはここを直し、各ページは触らない。
     ・余白：ブロック間 --block（SP 168px / PC 220px）、ブロック内 --gap（48 / 60）
     ・見出し：.sec-head（英字ラベル → 明朝の見出し → 短い罫線）。SP では中央
     ・書体：装飾は明朝、理解してほしい語はゴシック（Noto Sans JP 500）
     ・ボタン：.btn は黒地。.ghost は枠だけ。文字は必ず1つの <span> で包む
     ・下に固定の LINE 相談バー：.bar（差し色は LINE の緑だけ）
     ・写真は枠で囲まない。順番は STEP + 矢印（.flow3）
   ========================================================================== */
.rsp{
  --paper:#f8f8f8; --paper-2:#f6f2ec;
  --ink:#1c1c1c; --ink-2:#5a5a5a; --ink-3:#7a7a7a;
  --line:#e0e0e0; --line-2:#d5d1c9; --line-green:#06C755;
  --serif:"STIX Two Text","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --jp:"Noto Sans JP",system-ui,sans-serif;
  --gap:48px; --block:168px;
  background:var(--paper); color:var(--ink); font-family:var(--jp);
  font-size:15px; line-height:2.2; letter-spacing:.055em; -webkit-font-smoothing:antialiased;
}
@media (min-width:760px){ .rsp{ --gap:60px; --block:220px } }
.rsp *{box-sizing:border-box}
.rsp img{display:block;max-width:100%}
.rsp a{color:inherit}
.rsp h1,.rsp h2,.rsp h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.05em}
.rsp p{margin:0}
.rsp .wrap{max-width:720px;margin:0 auto;padding:0 24px 180px}
.rsp .label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-family:var(--serif);font-style:italic}
.rsp .muted{color:var(--ink-3);font-size:13px;line-height:1.95}
.rsp .note,.rsp p.muted{text-align:center}
.rsp .body{color:var(--ink-2);max-width:34em;margin-left:auto;margin-right:auto;line-height:2.2}
.rsp .body p + p{margin-top:1.2em}
.rsp .bleed{margin-left:-24px;margin-right:-24px}
@media (min-width:760px){ .rsp .bleed{margin-left:0;margin-right:0} }

/* ヒーロー：写真を先に */
.rsp .hero{padding-top:72px;text-align:center}
.rsp .hero h1{font-size:clamp(27px,7.6vw,40px);line-height:1.45;margin:14px 0 22px}
.rsp .hero figure{margin:40px 0 0}
.rsp .hero figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rsp .hero .lead{font-size:16px;line-height:2.1;margin-top:40px;color:var(--ink-2);max-width:26em;margin-left:auto;margin-right:auto}

/* 章 */
.rsp section{padding-top:var(--block)}
.rsp .sec-head{margin-bottom:var(--gap);text-align:center}
.rsp .sec-head h2{font-size:clamp(23px,5.6vw,29px);line-height:1.55;margin:12px 0 0}
.rsp .sec-head .rule{display:block;width:72px;border:0;border-top:1px solid var(--line);margin:20px auto 0}
@media (min-width:640px){ .rsp .sec-head + .body{text-align:center} }

/* 2つの決めごと（対で見せるカード） */
.rsp .two-head{text-align:center;margin-top:var(--block)}
.rsp .two-head h2{font-size:clamp(21px,5.2vw,26px);line-height:1.6;margin:12px 0 0}
.rsp .two-head .rule{display:block;width:72px;border:0;border-top:1px solid var(--line);margin:20px auto 0}
.rsp .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--gap)}
.rsp .decide{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);padding:34px 18px;text-decoration:none;min-height:150px;text-align:center;transition:border-color .2s}
.rsp .decide:hover{border-color:var(--ink)}
.rsp .decide .n{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink-3)}
.rsp .decide strong{font-family:var(--jp);font-weight:500;font-size:16px;letter-spacing:.06em;line-height:1.5}
.rsp .decide span{font-size:12px;line-height:1.8;color:var(--ink-3)}

/* 番号つきの一覧（罫線だけ。枠で囲まない） */
.rsp .list{border-top:1px solid var(--line);margin-top:var(--gap)}
.rsp .list a,.rsp .list .row{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;column-gap:12px;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.rsp .list .n{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink-3)}
.rsp .list .t{font-family:var(--jp);font-weight:500;font-size:15px;line-height:1.7;letter-spacing:.04em}
.rsp .list .go{font-family:var(--serif);font-size:16px;color:var(--ink-3)}

/* 項目（写真 → 番号 → 見出し → 本文） */
.rsp .item{padding-top:var(--block)}
.rsp .item figure{margin:0 -24px}
.rsp .item figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rsp .item .idx{display:flex;justify-content:center;align-items:baseline;gap:14px;margin:36px 0 14px}
.rsp .item .idx .n{font-family:var(--serif);font-size:32px;line-height:1}
.rsp .item .idx .lb{font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.2em;color:var(--ink-3)}
.rsp .item h2{text-align:center;font-size:clamp(22px,5.4vw,28px);line-height:1.7;margin-bottom:22px}
.rsp .item .body{text-align:left}
.rsp .item .fact{margin-top:30px;border-top:1px solid var(--line);padding-top:22px;text-align:center}
.rsp .item .fact .big{font-family:var(--jp);font-weight:500;font-size:24px;letter-spacing:.06em;line-height:1.6;color:var(--ink)}
.rsp .item .fact .cond{margin-top:8px;font-size:13px;color:var(--ink-2)}
.rsp .item .disc{margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:2;text-align:center}
@media (min-width:760px){ .rsp .item figure{margin:0} }

/* 順番：STEP + 矢印 */
.rsp .flow3{list-style:none;padding:0;margin:var(--gap) 0 0;display:grid;gap:14px}
.rsp .flow3 li{background:#fff;padding:26px 22px}
.rsp .flow3 li.arrow{background:transparent;padding:0;text-align:center;font-family:var(--serif);font-size:22px;color:var(--ink-3);transform:rotate(90deg);line-height:1}
.rsp .flow3 .stepno{display:block;font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.22em;color:var(--ink-3);padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.rsp .flow3 .k{display:block;font-family:var(--jp);font-weight:500;font-size:21px;letter-spacing:.08em;margin-bottom:10px}
.rsp .flow3 b{display:block;font-weight:400;font-size:15px}
.rsp .flow3 small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.85;margin-top:6px}
@media (min-width:640px){ .rsp .flow3{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:12px} .rsp .flow3 li.arrow{transform:none;align-self:center} }

/* 決まったこと */
.rsp .decided{border-top:1px solid var(--line);margin-top:var(--gap)}
.rsp .decided .row{display:grid;grid-template-columns:4em 1fr;gap:14px;padding:26px 2px;border-bottom:1px solid var(--line)}
.rsp .decided .k{font-size:12px;letter-spacing:.1em;color:var(--ink-3);padding-top:4px}
.rsp .decided .v{font-size:16px;font-weight:500}
.rsp .decided .v small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.8;font-weight:400}

/* CTA パッケージ：締めの一言 → 添え書き → ボタン縦積み */
.rsp .cta{margin-top:var(--block);padding-top:var(--block);border-top:1px solid var(--line);text-align:center}
.rsp .cta .quote{font-family:var(--serif);font-size:clamp(21px,5.6vw,27px);line-height:1.75;margin:0 0 16px}
.rsp .cta .muted{max-width:26em;margin-left:auto;margin-right:auto}
.rsp .stack{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.rsp .btn,.rsp a.btn,.rsp a.btn:link,.rsp a.btn:visited,.rsp a.btn:hover,.rsp a.btn:active,.rsp a.btn:focus{
  display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);text-decoration:none;
  padding:18px 22px;min-height:62px;font-family:var(--jp);font-size:14.5px;letter-spacing:.08em;
  transition:background .3s,color .3s,border-color .3s}
.rsp .btn:after{content:"→";font-size:13px;margin-left:2px}
.rsp .btn:hover{background:#000;border-color:#000;color:var(--paper)}
.rsp .btn.ghost,.rsp a.btn.ghost:link,.rsp a.btn.ghost:visited{background:transparent;color:var(--ink);border-color:var(--line-2)}
.rsp .btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* LINE へ行くボタンは LINE の緑（差し色はこれだけ） */
.rsp .btn.line,.rsp a.btn.line:link,.rsp a.btn.line:visited{background:var(--line-green);color:#fff;border-color:var(--line-green)}
.rsp .btn.line:hover{background:#05b34c;border-color:#05b34c;color:#fff}
.rsp .btn.quiet,.rsp a.btn.quiet:link,.rsp a.btn.quiet:visited{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.rsp .btn.quiet:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 相談への小さな導線（章の終わりに置く） */
.rsp .fmini{margin-top:var(--gap);background:var(--paper-2);padding:32px 24px;display:flex;flex-direction:column;gap:12px;text-align:center}
.rsp .fmini p{font-size:14px;color:var(--ink-2);line-height:1.9;margin-bottom:8px}

/* 下に固定の LINE 相談バー */
.rsp-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(248,248,248,.96);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-top:1px solid #e0e0e0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));font-family:"Noto Sans JP",system-ui,sans-serif}
.rsp-bar .in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px}
.rsp-bar .t{flex:1;min-width:0;font-size:12px;line-height:1.6;color:#7a7a7a}
.rsp-bar .t b{display:block;color:#1c1c1c;font-weight:400;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.rsp-bar a,.rsp-bar a:link,.rsp-bar a:visited{flex:none;display:flex;align-items:center;gap:8px;background:#06C755;color:#fff;text-decoration:none;
  padding:14px 18px;font-size:13.5px;letter-spacing:.06em;min-height:50px}
.rsp-bar a:hover{background:#05b34c;color:#fff}
.rsp-bar svg{width:18px;height:18px;flex:none}
@media (prefers-reduced-motion:reduce){ .rsp *{transition:none!important} }