/* renovy ペット
   デザインの正は brand/design-system.md と home-v2/home.css。
   ここには «このページにしか無いもの» だけを書く。
   🚨 WordPress（SWELL）の CSS には依存しない。 */

/* ── 3 つのものさし（写真付きの小さなカード・スマホでも 3 枚並べる） ── */
.axes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 枚を同じ幅に（長い語で 1 枚だけ広がらない） */
  gap: 10px;
  margin: var(--gap-sp) 0 0;
  padding: 0;
  list-style: none;
}
.axis-card { background: var(--bg-soft); padding-bottom: 14px; }
.axis-card figure { margin: 0; }
.axis-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.axis-t {
  margin: 12px 4px 0;
  color: var(--ink);
  font-family: var(--jp);   /* 理解してほしい語なのでゴシック（Ry 2026-10-30） */
  font-weight: 500;         /* ゴシックの強調は 500 まで */
  font-size: clamp(12px, 3.3vw, 17px);
  letter-spacing: 0;
  line-height: 1.6;
  white-space: nowrap;      /* タイトルは必ず 1 行（Ry 2026-10-31） */
}
.axis-d {
  margin: 6px 4px 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: clamp(11px, 2.9vw, 14px);
  letter-spacing: .02em;
  line-height: 1.8;
}

/* ── 3 種類の床 ─────────────────────────────────── */
/* 1 つの床を 1 枚のカードに（Ry 指示 2026-10-31）。薄い背景の節の上に白いカードで置く */
.floor {
  margin-top: calc(var(--gap-sp) * 1.4);
  padding-bottom: 24px;
  background: var(--bg);
}
.floor > h3, .floor > p, .floor > dl { margin-inline: 24px; }
.floor figure { margin: 0; }
.floor figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.floor h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: calc(var(--gap-sp) / 2.4) 24px 0;   /* 左右は下の文章・表と同じ 24px にそろえる（Ry 2026-10-31） */
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .08em;
  line-height: 1.6;
  white-space: nowrap;   /* タイトルは必ず 1 行（Ry 指示 2026-10-31） */
}
.floor-no {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .14em;
}
.floor-desc {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 2.1;
}

/* 1 行 1 項目。価格・性能をすべての床で同じ順に並べる（比べられるように） */
.floor-spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: calc(var(--gap-sp) / 2) 0 0;
}
.floor-spec dt,
.floor-spec dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-family: var(--jp);
  line-height: 1.9;
}
.floor-spec dt {
  padding-right: 2em;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.floor-spec dd {
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .04em;
  text-align: right;
}
.floor-spec dd.floor-price {
  color: var(--ink);
  font-size: 17px;
  letter-spacing: .02em;
}
.floor-spec .yen { font-size: .72em; margin-left: .15em; }

/* ── すべりにくさの数値 ─────────────────────────── */
.csr {
  width: 100%;
  margin: var(--gap-sp) 0 0;
  border-collapse: collapse;
  text-align: left;
}
.csr th,
.csr td {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-family: var(--jp);
  font-weight: 400;
  vertical-align: middle;
}
.csr th {
  width: 1%;
  padding-right: 1.6em;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.csr td.csr-v {
  color: var(--ink);
  font-size: 21px;
  letter-spacing: .02em;
  text-align: right;
}
.csr td.csr-r {
  width: 1%;
  padding-left: 1.2em;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  text-align: right;
}
.csr-read {
  margin: var(--gap-sp) 0 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 2.2;
}

/* 流れの «（電話 / オンライン）» は小さく。見出しを 1 行に収める */
.step-sub {
  font-size: .72em;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 3 者を同じものさしで並べる比較表 */
.csr-compare { text-align: left; }
.csr-compare thead th {
  padding-bottom: 10px;
  border-top: 0;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .1em;
}
.csr-compare thead th:nth-child(2),
.csr-compare tbody td:first-of-type { text-align: left; }
.csr-compare th[scope="row"] {
  width: 38%;
  padding-right: 1em;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.8;
  white-space: normal;
}
.csr-compare td {
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.8;
}
.csr-compare td.csr-v { font-size: 19px; text-align: right; }
.csr-compare td.csr-na { color: var(--ink-faint); text-align: right; }
.csr-compare tr.csr-ours th[scope="row"] { color: var(--ink); }

/* 比べる相手（一般的なフローリング）の数値は、renovy の行より抑えて置く */
.csr-compare td.csr-low { color: var(--ink-faint); }

/* ── すべりにくさの図 ─────────────────────────────
   0.2〜0.8 を横一本に取る。位置は (値 - 0.2) / 0.6。
   🚨 色で煽らない。適した範囲だけ地色を一段沈め、印と引き出し線は直線のみ。 */
.gauge { margin: calc(var(--gap-sp) * 1.1) 0 0; }

.gauge-top { position: relative; height: 46px; }
.gauge-bottom { position: relative; height: 56px; margin-top: 6px; }
.gauge-top { margin-bottom: 0; }

.gauge-label {
  position: absolute;
  margin: 0;
  color: var(--ink);
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.5;
  white-space: nowrap;
}
.gauge-val {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .04em;
}
/* 印（50.8%）の上に置き、右へ寄せて端を切らさない */
.gauge-label--ours { left: 50.8%; bottom: 0; transform: translateX(-50%); text-align: center; }
.gauge-label--floor { left: 0; top: 10px; }
.gauge-label--floor .gauge-val { color: var(--ink-faint); }

.gauge-body { position: relative; height: 22px; }
/* 0.40〜0.70 = 33.3%〜83.3% */
.gauge-fit {
  position: absolute;
  left: 33.3%;
  width: 50%;
  top: 0;
  bottom: 0;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 帯の中に文字を置かない（印と重なって読めなくなる）。説明は図の外に出す */
.gauge-fitnote {
  margin: 10px 0 0;
  padding-left: 33.3%;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: .06em;
}
.gauge-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.gauge-mark { position: absolute; bottom: 0; }
.gauge-mark--floor { left: 1.7%; width: 2px; height: 14px; background: var(--ink-faint); }
.gauge-mark--ours { left: 48.3%; width: 5%; height: 22px; background: var(--ink); }

/* 引き出し線（直線のみ） */
.gauge-lead { position: absolute; width: 1px; background: var(--ink-faint); }
.gauge-lead--ours { left: 50.8%; top: -14px; height: 14px; background: var(--ink); }
.gauge-lead--floor { left: 1.7%; bottom: -14px; height: 14px; }

.gauge-ticks {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .06em;
}
.gauge-ends {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  color: var(--ink-faint);
  font-family: var(--jp);
  font-size: 10px;
  letter-spacing: .1em;
}

/* 「ペットの安心と人の美意識を両立」は明朝体（Ry 指示 2026-10-31。2026-10-18 のゴシック・太字を戻した）。
   ページの主張＝味わってほしい言葉なので、他の見出しと同じ明朝（--serif）にそろえる。 */
#about-title {
  font-family: var(--serif);
}

/* 「ペットの床は、renovy ペット」を写真の下へ（Ry 指示 2026-10-18）。
   写真に重ねると、背景しだいで読めたり読めなかったりする。地の上なら必ず読める。
   🚨 .hero-foot の «写真に重ねる» 作法は他の 2 ページが使っているので消さない。
   ここは «下に置く» という指定だけを足して違いを吸収する（部品を増やさない）。 */
.hero-foot--below {
  position: static;
  margin: calc(var(--gap-sp) / 1.6) auto 0;
  padding-inline: var(--pad);
  font-weight: 600;          /* 少し太く */
  text-shadow: none;         /* 地の上に置くので、にじみは要らない */
}

/* ── PC: 選べる 3 種類の床を横並びに（Ry 指示 2026-10-18）─────────
   🚨 PC の判定は hover + 細かいポインタ。幅で判定しない（既存の作法に揃える） */
@media (hover: hover) and (pointer: fine) {
  /* カードを大きく（Ry 指示 2026-10-31）。本文の幅（--read）を抜けて、画面の幅いっぱい（上限 1200px）に広げる */
  .floors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--gap-sp) * 1.2);
    align-items: start;
    width: min(1200px, calc(100vw - var(--pad) * 2));
    margin-inline: calc(50% - min(600px, 50vw - var(--pad)));
  }
  .floors-grid .floor h3 { font-size: 23px; }
  .floors-grid .floor-desc { font-size: 16px; }
  .floors-grid .floor-spec dd { font-size: 15px; }
  .floors-grid .floor { margin-top: 0; }
}

/* PC: 写真の下に置いた 1 行が、hero との間で浮いて見えるので詰める（Ry 指示 2026-10-18） */
@media (hover: hover) and (pointer: fine) {
  .hero-foot--below { margin-top: calc(var(--gap-sp) / 2.4); }
}

/* 料金の目安の下の注記を少し大きく（Ry 指示 2026-10-31。共通は 12px） */
.estimate-note { font-size: 14px; }

/* 事例のカードを小さく（Ry 指示 2026-10-31。共通は PC 720px・スマホ 74vw） */
.r-car.works-carousel { --car-w: min(50vw, 520px); }
@media (max-width: 767px) {
  .r-car.works-carousel { --car-w: 62vw; }
}

/* 見出し「選べる 3 種類の床」とカードの間をあける（Ry 指示 2026-10-31）。
   スマホは 1 枚目のカード自身の上の余白があるので、PC（横並び）だけ */
@media (hover: hover) and (pointer: fine) {
  .floors-grid { margin-top: calc(var(--gap-sp) * 1.2); }
}

/* hero の写真は左右反転（プードルが右・Ry 2026-10-31）。スマホは正方形の写真（<picture>）を、プードルが入るよう右寄りに切る */
@media (max-width: 767px) {
  .hero-photo { object-position: 80% 50%; }
}

/* 床は 3 つで選びます のカードを大きく（Ry 指示 2026-10-31）。3 枚並びのまま、本文の幅を抜けて広げる */
.axes-grid {
  width: min(960px, calc(100vw - 24px));
  margin-inline: calc(50% - min(480px, 50vw - 12px));
  gap: 8px;
}
@media (min-width: 768px) {
  .axes-grid { gap: 16px; }
  .axis-t { font-size: 18px; }
  .axis-d { font-size: 15px; }
}

/* renovy ペットは地を少しだけアイボリーに（Ry 指示 2026-10-31）。このページだけ。
   全体の地 #f8f8f8 / 一段落とす面 #f2f2f2 を、同じ明るさのまま少し温かくする */
:root {
  --bg: #f9f7f2;
  --bg-soft: #f3f0e9;
}

/* スマホの hero: 文字は写真に重ね、犬の顔（写真の横 49〜70%・縦 25〜48%）を避けて左下の床に置く（Ry 指示 2026-10-31
   「画像の下ではなく画像に乗せる。犬の顔には被らない位置で」）。写真の下の端は地の色へなじませる */
@media (max-width: 767px) {
  .hero { min-height: 58svh; }
  .hero-copy {
    top: auto;
    bottom: 18px;
    transform: none;
    z-index: 2;   /* 文字はいちばん手前。下の端の白いぼかし（.hero::after）より上に描く（Ry 2026-10-31） */
  }
  .hero::after { z-index: 1; }
}