/* floating-cta.css — 右端に固定される縦組みのお問い合わせボタン
   Figma: Button (node 1180:8671)

   Figma上は同じボタンがスクロール位置ごとに複数配置されているが、
   実装ではビューポート右端に固定した1つの浮遊ボタンとして扱う。 */

.c-floating-cta {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 100;
  display: flex;
  /* 縦書きの複数行は右から左へ読むため、1行目を右列に置く */
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-24);
  /* Figma: 左上・左下16px。writing-mode: vertical-rl だと論理プロパティ
     （border-start-start-radius等）が回転して上側の角に付くため、物理指定にする */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider); /* Figma: 0.8px ≒ 5% */
  translate: 0 -50%;
}

/* Figmaと同じ「幅24px（--space-24）のボックスに1文字ずつ折返し」方式。
   writing-mode: vertical-rl だと文字送りが1em基準になり全体寸法がFigmaとずれる */
.c-floating-cta__text {
  inline-size: var(--space-24);
  overflow-wrap: break-word;
  word-break: break-all;
  line-height: var(--line-height-tight);
  text-align: center;
}

/* ページ別テーマカラー（rhythm=生活介護 / job=就労支援）
   ビューポート右端に接するため右辺の線は引かない */
.c-floating-cta--care,
.c-floating-cta--job {
  border: 1px solid var(--color-white);
  border-right: 0;
}

.c-floating-cta--care { background: var(--color-service-care); }
.c-floating-cta--job  { background: var(--color-service-job); }

.c-floating-cta {
  transition:
    translate var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease,
    opacity var(--transition-fast) ease;
}

/* 統一hover演出（tokens.css 参照）。右端固定＆縦センターの translate を保ったまま、
   浮き上がりは左方向（画面内側）へ */
.c-floating-cta:hover {
  text-decoration: none;
  opacity: 0.9;
  translate: var(--hover-lift) -50%;
  box-shadow: var(--shadow-hover);
}

/* ==========================================================================
   SP（767px以下）— 画面下部に固定の全幅バー（横組み）
   ========================================================================== */
@media (max-width: 767px) {
  /* 固定バーの高さ分だけページ末尾を底上げし、フッターへの被りを防ぐ
     （バー高さ = padding上下 --space-24×2 + 本文1行 --font-size-body×--line-height-tight）
     このCSSはCTAを置くページでのみ読み込まれるため body に指定してよい */
  body {
    padding-bottom: calc(var(--space-48) + var(--font-size-body) * var(--line-height-tight));
  }

  .c-floating-cta {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    width: 100%;
    padding: var(--space-24) var(--space-16);
    border-radius: 0;
    translate: none;
  }

  /* 全幅バーは画面端固定のため、hoverの浮き上がり移動は行わない */
  .c-floating-cta:hover {
    translate: none;
  }

  /* 全幅バーは画面端に接するため、境界線は上辺のみ残す */
  .c-floating-cta--care,
  .c-floating-cta--job {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  /* PCの「1文字ずつ縦積み」を解除して横一行に */
  .c-floating-cta__text {
    inline-size: auto;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-floating-cta { transition: none; }
}