/* ============================================================
   Auguri! ─ エステの予約セクション「一本の線」（本番・2026-09-16 高野様ご確定）
   ------------------------------------------------------------
   デモ 15 番の 3 案を採用（決定事項 #85）。ai の 220×60 のボタン 2 つはやめ、
   横罫の下に「ラベル＋本体＋矢印」の 2 行を置き、あいだを細い縦罫で分ける。

   帯の地色（#939a8d セージ）・書体・白文字・横罫の長さ（1400×0.5px）は ai のまま。
   高さは ai の 350 → **399.57**。案の設計値は 400 だが、エステの帯（Our Esthetic）が
   SONIC ESTHETIC の削除で 49.57px 縮んでいるので、そのぶんをここで吸収して
   **フッターを ai の位置にぴったり戻している**（差 0.43px は画面では見えない）。

   文字サイズ（2026-09-16 ご指示）
     右の説明 2 行 16px（ai は 14px・ベースラインは ai のまま）
     ラベル 14px ／ 本体（電話番号・公式アカウントへ）28px
   座標は帯の中の相対値。
   ============================================================ */

/* ── 右の説明 2 行：14 → 16px。ベースライン（ai の 123.62）は動かさない
      （top = ベースライン − 行送り/2 − サイズ × K。行送り 32px は ai のまま） ── */
/* 記事詳細の来店 CTA（.b-ar-cta）も同じ組みなので、まとめて当てる */
.b-es-reservation .rsv__p, .b-ar-cta .rsv__p {
  font-size: calc(16 * var(--s));
  top: calc(var(--s) * (123.62 - 16 - 16 * var(--k-jp-16, var(--k-jp))));
}

/* ── 横罫：ai の 186.55 から 200 へ（2 行のための余白をとる） ── */
.b-es-reservation .rsv__rule, .b-ar-cta .rsv__rule { top: calc(200 * var(--s)); }

/* ── 2 つの行 ── */
.rs__row {
  position: absolute; top: calc(248 * var(--s)); color: #ffffff; text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-bottom: calc(10 * var(--s));
}
.rs__row1 { left: calc(640 * var(--s)); width: calc(320 * var(--s)); }
.rs__row2 { left: calc(1040 * var(--s)); width: calc(320 * var(--s)); }

.rs__row-lab {
  font-family: var(--ff-jp-body); font-size: calc(14 * var(--s)); line-height: 1;
  letter-spacing: .14em; opacity: .8;
}
/* ラベルが 13 → 14px で 1px 背が高くなったぶん、上の空きを 22 → 21px にして
   本体の位置（帯の中で 283px）を保つ */
.rs__row-main {
  margin-top: calc(21 * var(--s));
  font-family: var(--ff-jp-body); font-size: calc(28 * var(--s)); line-height: 1;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.rs__row-arrow {
  position: absolute; right: calc(40 * var(--s)); bottom: calc(18 * var(--s));
  width: calc(31 * var(--s)); height: calc(5.75 * var(--s));
  transition: transform .5s var(--e-out);
}
.rs__row-arrow svg { display: block; width: 100%; height: auto; }

/* ── あいだの細い縦罫（お問い合わせの選択肢と同じ 0.5px） ── */
.rs__rowline {
  position: absolute; left: calc(1000 * var(--s)); top: calc(248 * var(--s));
  width: 1px; height: calc(78 * var(--s)); background: #ffffff; opacity: .5;
  transform: scaleX(.5); transform-origin: 0 0;
}

/* ── カーソルを載せたとき：行の下に 0.5px の罫が左から引かれ、矢印がわずかに進む ── */
.rs__row::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: calc(280 * var(--s)); height: 1px;
  background: #ffffff; transform: scaleX(0) scaleY(.5); transform-origin: 0 100%;
  transition: transform .6s var(--e-out);
}
.rs__row:hover::after, .rs__row:focus-visible::after { transform: scaleX(1) scaleY(.5); }
.rs__row:hover .rs__row-arrow, .rs__row:focus-visible .rs__row-arrow { transform: translateX(calc(8 * var(--s))); }
.rs__row:focus-visible { outline: none; }
.rs__row:focus-visible .rs__row-main { outline: 2px solid currentColor; outline-offset: calc(4 * var(--s)); }

@media (prefers-reduced-motion: reduce) {
  .rs__row::after, .rs__row-arrow { transition: none !important; }
}