/* =========================================================
   SENelief 制作サンプル用 導線ボタン — snl-cta.css
   - サンプルページ本体のスタイルには一切触れない（すべて .snl-cta 配下）
   - 通常はページ末尾（フッターの後ろ）のブロックとして表示する
     （JS が動かない環境・フッターが画面に入っているとき。フッターの連絡先やリンクに重ならない）
   - JS が .snl-cta--float を付けている間だけ、右下の固定表示になる
   ========================================================= */

.snl-cta {
  /* 色は SENelief 本体（senelief.com）の定義に合わせる */
  --snl-ink: #0f1712;
  --snl-ink-hover: #1c2a21;
  --snl-text: #eef4ec;
  --snl-lime: #8cd555;
  --snl-lime-hover: #a3e070;
  --snl-focus: #fbff78;
  --snl-gap: 0.5rem;
  --snl-edge: 16px;
  --snl-ease: cubic-bezier(.2, .7, .3, 1);

  /* サンプル側の body・要素指定に左右されないよう明示する */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--snl-gap);
  margin: 0;
  padding: 1.5rem var(--snl-edge) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: none; /* ページ末尾ではサンプル側の背景をそのまま見せる */
  color: var(--snl-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}
.snl-cta *,
.snl-cta *::before,
.snl-cta *::after { box-sizing: border-box; }

/* ---------- 固定表示（JS が動くときだけ） ---------- */
.snl-cta.snl-cta--float {
  position: fixed;
  z-index: 500; /* ヘッダー(60)より上、ローダー(900)・トースト(950)・ダイアログより下 */
  right: max(var(--snl-edge), env(safe-area-inset-right, 0px));
  bottom: calc(var(--snl-edge) + env(safe-area-inset-bottom, 0px));
  max-width: calc(100% - var(--snl-edge) * 2 - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  padding: 0;
  /* 非表示の状態（visibility と inert で、操作・読み上げの対象からも外す） */
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity .25s var(--snl-ease), transform .25s var(--snl-ease), visibility 0s linear .25s;
}
.snl-cta.snl-cta--float.snl-cta--shown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .25s var(--snl-ease), transform .25s var(--snl-ease), visibility 0s linear 0s;
}

/* ---------- リンク ---------- */
.snl-cta .snl-cta__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--snl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.snl-cta .snl-cta__list[hidden] { display: none; }
.snl-cta .snl-cta__item { margin: 0; padding: 0; }
.snl-cta .snl-cta__item::before,
.snl-cta .snl-cta__item::marker { content: none; }

.snl-cta .snl-cta__link,
.snl-cta .snl-cta__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border: 2px solid var(--snl-text);
  border-radius: 999px;
  background: var(--snl-ink);
  color: var(--snl-text);
  font: inherit;
  line-height: 1.3;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / .28);
  transition: background-color .2s, color .2s;
}
.snl-cta .snl-cta__link {
  width: 100%;
  padding: 0.5rem 1.125rem;
  text-align: center;
  /* 改行は <wbr> の位置を優先し、収まらないときだけ任意の位置で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 主ボタン：色に加えて、文言・太字・矢印で役割を示す */
.snl-cta .snl-cta__link--primary {
  border-color: var(--snl-ink);
  background: var(--snl-lime);
  color: var(--snl-ink);
  font-weight: 700;
}
.snl-cta .snl-cta__icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 折りたたみボタン ---------- */
.snl-cta .snl-cta__toggle {
  padding: 0 0.75rem;
  font-weight: 700;
}
.snl-cta .snl-cta__toggle-text { display: none; }
.snl-cta .snl-cta__toggle[aria-expanded="false"] .snl-cta__toggle-text { display: inline; }
.snl-cta .snl-cta__toggle .snl-cta__icon { transition: transform .2s var(--snl-ease); }
.snl-cta .snl-cta__toggle[aria-expanded="false"] .snl-cta__icon { transform: rotate(180deg); }

/* ---------- ホバー・フォーカス ---------- */
@media (hover: hover) {
  .snl-cta .snl-cta__link:hover,
  .snl-cta .snl-cta__toggle:hover { background: var(--snl-ink-hover); }
  .snl-cta .snl-cta__link--primary:hover { background: var(--snl-lime-hover); }
}
/* 明るい輪（spark）を暗い帯で挟み、明暗どちらの背景でも見えるようにする */
.snl-cta .snl-cta__link:focus-visible,
.snl-cta .snl-cta__toggle:focus-visible {
  outline: 3px solid var(--snl-focus);
  outline-offset: 2px;
  border-radius: 999px;
  box-shadow: 0 0 0 7px var(--snl-ink);
}

/* ---------- 狭い画面：横並びにして覆う面積を小さくする ---------- */
@media (max-width: 600px) {
  .snl-cta {
    --snl-edge: 12px;
    --snl-gap: 0.375rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.8125rem;
  }
  .snl-cta.snl-cta--float { left: max(var(--snl-edge), env(safe-area-inset-left, 0px)); }
  /* 通常は2列。文字を大きくして1列に収まらなくなったら縦に積む（em は文字サイズに追従） */
  .snl-cta .snl-cta__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr));
    flex: 1 1 auto;
    min-width: 0;
  }
  .snl-cta .snl-cta__item {
    display: flex;
    min-width: 0;
  }
  .snl-cta .snl-cta__link { padding: 0.375rem 0.75rem; }
  .snl-cta .snl-cta__toggle { flex: none; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .snl-cta.snl-cta--float,
  .snl-cta.snl-cta--float.snl-cta--shown { transform: none; transition: none; }
  .snl-cta .snl-cta__link,
  .snl-cta .snl-cta__toggle,
  .snl-cta .snl-cta__toggle .snl-cta__icon { transition: none; }
}

/* ---------- 強制カラーモード（Windows のハイコントラストなど） ---------- */
@media (forced-colors: active) {
  .snl-cta .snl-cta__link,
  .snl-cta .snl-cta__toggle { border-color: ButtonText; }
  .snl-cta .snl-cta__link:focus-visible,
  .snl-cta .snl-cta__toggle:focus-visible { outline-color: Highlight; }
}

/* ---------- 印刷 ---------- */
@media print {
  .snl-cta { display: none !important; }
}

/* ---------- このサイト固有の位置調整（kaigo-sample） ----------
   既存の固定要素に重ならないよう、その上に置く
   - スマホ用お問い合わせバー .mobile-cta（1023px以下）：下端 max(0.75rem, ホームバー) から高さ 4rem
   - ページトップボタン .to-top（1024px以上）：右下 1.5rem、3.5rem 角（外周の輪 4px を含む）
   重なり順は .mobile-cta・.to-top(65) より上、ヘッダー(70)・メニュー(75)・ローダー(150)・ライトボックス(160) より下 */
.snl-cta.snl-cta--float {
  z-index: 68;
  bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0px)) + 4.75rem);
}
@media (min-width: 1024px) {
  .snl-cta.snl-cta--float {
    right: 1.5rem;
    bottom: 6rem;
  }
}