/* =========================================================
   renovy ボタン部品（サイト共通）
   2026-09-21 Ry 指示：ボタンは毎回その場で書かず、ここから使う。

   使い方
     <a class="rnv-btn rnv-btn--primary">LINEで相談する</a>
     <button class="rnv-btn rnv-btn--outline rnv-btn--sm">条件をクリア</button>
     <button class="rnv-btn rnv-btn--quiet rnv-btn--sm">マイスタイル一覧<i class="rnv-btn__arrow"></i></button>

   種類（用途で選ぶ。見た目で選ばない）
     --primary  そのページで最も進めたい操作。1画面に1つまで
     --line     LINEへ送る・相談する。LINEに行くときだけ使う
     --outline  主でも副でもない通常の操作。いくつ並べてもよい
     --quiet    補助的な操作。並びの中で目立たせたくないもの
     --ghost    濃い背景（#111 など）の上に置くとき

   大きさ
     既定 44px（タップ領域の下限）/ --sm 36px / --lg 52px
     --block で横幅いっぱい

   守ること
     ・最小タップ領域 44px を下回らない（--sm は本文中の補助操作だけ）
     ・文字色は #7a7a7a より薄くしない（AA 4.5:1 の下限）
     ・角丸は 2px。丸ボタンにしない
     ・ホバーは色の反転か濃度の変化だけ。動かさない
     ・矢印は <i class="rnv-btn__arrow"> を使う（→ を直接書かない）
========================================================= */

.rnv-btn {
  /* テーマ側の button{width:100%} に潰されないよう明示する（DESIGN_GUIDE 参照） */
  width: auto;
  /* --block/width:100% 時に padding と border がはみ出さないようにする */
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.rnv-btn:focus-visible { outline: 2px solid #1c1c1c; outline-offset: 3px; }
.rnv-btn[disabled], .rnv-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* 矢印。ホバーでわずかに進む以外は動かさない */
.rnv-btn__arrow { display: inline-block; font-style: normal; transition: transform .25s ease; }
.rnv-btn__arrow::before { content: "→"; }
.rnv-btn__arrow--ext::before { content: "↗"; }
.rnv-btn__arrow--down::before { content: "↓"; }
.rnv-btn:hover .rnv-btn__arrow { transform: translateX(3px); }

/* ---------- 種類 ---------- */
.rnv-btn.rnv-btn--primary { background: #1c1c1c; border-color: #1c1c1c; color: #f8f8f8; }
.rnv-btn.rnv-btn--primary:hover { background: #333; border-color: #333; }

.rnv-btn.rnv-btn--outline { border-color: #d0d0d0; color: #1c1c1c; background: #fff; }
.rnv-btn.rnv-btn--outline:hover { border-color: #1c1c1c; background: #f4f4f4; }

.rnv-btn.rnv-btn--quiet { border-color: transparent; color: #5a5a5a; padding-left: 10px; padding-right: 10px; }
.rnv-btn.rnv-btn--quiet:hover { color: #1c1c1c; background: #f0f0f0; }

.rnv-btn.rnv-btn--line { background: #06C755; border-color: #06C755; color: #fff; }
.rnv-btn.rnv-btn--line:hover { background: #05b14c; border-color: #05b14c; }

.rnv-btn.rnv-btn--ghost { border-color: rgba(255,255,255,.45); color: #f0f0f0; }
.rnv-btn.rnv-btn--ghost:hover { background: #f0f0f0; border-color: #f0f0f0; color: #1c1c1c; }

/* 押した状態を保つトグル（aria-pressed を必ず付ける） */
.rnv-btn[aria-pressed="true"] { background: #efefef; border-color: #3e3e3e; color: #1c1c1c; }
.rnv-btn.rnv-btn--primary[aria-pressed="true"] { background: #1c1c1c; border-color: #1c1c1c; color: #f8f8f8; }

/* ---------- 大きさ ---------- */
.rnv-btn.rnv-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 12px; gap: 8px; }
.rnv-btn.rnv-btn--lg { min-height: 52px; padding: 15px 30px; font-size: 14px; }
.rnv-btn.rnv-btn--block { display: flex; width: 100%; }
@media (max-width: 719px) {
  .rnv-btn--block-sp { display: flex; width: 100%; }
}

/* ---------- 並べるとき ---------- */
.rnv-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rnv-btns--center { justify-content: center; }
.rnv-btns--end { justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .rnv-btn, .rnv-btn__arrow { transition: none; }
  .rnv-btn:hover .rnv-btn__arrow { transform: none; }
}