/* ==========================================================================
   c-button — 共通ボタン（Figma 3191:32886 実測値・全てトークン参照）
   矢印は common/ico_arrow.svg を mask で currentColor 描画（バリアント色に自動追従）。
   hover は色を変えず、矢印が右へ進むだけ（下部の hover / focus セクション参照）。
   Figmaどおり矢印はボタン右端の外へはみ出す（絶対配置）。親側で overflow を切らないこと。
   ========================================================================== */

.c-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  width: 22.5rem; /* 360px（width:'default'） */
  max-width: 100%;
  padding: var(--space-10) var(--space-24);
  border: var(--border-width-bold) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* 矢印（Figma: 40×5.5px stroke2px。viewBox 42.41×7.21＝先端はみ出し込み。
   left:334px → 右端から 334+40-360 = 14px はみ出す） */
.c-button__arrow {
  position: absolute;
  top: 0.969rem;      /* 15.5px（Figma実測） */
  right: -0.875rem;   /* -14px はみ出し量（Figma実測から算出） */
  width: 2.651rem;    /* 42.41px（SVG viewBox幅） */
  height: 0.451rem;   /* 7.21px（SVG viewBox高さ） */
  background-color: currentColor;
  -webkit-mask: url("../../images/common/ico_arrow.svg") no-repeat center / contain;
  mask: url("../../images/common/ico_arrow.svg") no-repeat center / contain;
  transition: translate var(--duration-fast) var(--ease-out);
}

/* --- バリアント --- */
.c-button--outline-white {
  border-color: var(--color-white);
  background: transparent;
  color: var(--color-white);
}

.c-button--solid-dark {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

/* --- 幅 --- */
.c-button--wide {
  width: 23.5rem; /* 376px */
}

.c-button--auto {
  width: auto;
}

/* --- 小ボタン（p-locations__item「詳細を見る」派生 Figma 3191:32862）
   border 1.5px・padding 10px 40px・font 14.22px・矢印 44.5×6px stroke1.5 --- */
.c-button--small {
  width: auto;
  padding: var(--space-10) var(--space-40);
  border-width: var(--border-width-medium);
  font-size: var(--font-size-h5);
}

.c-button--small .c-button__arrow {
  top: 0.969rem;      /* 15.5px（Figma実測） */
  right: -2.042rem;   /* -32.7px（Figma: 矢印left 128.17+44.5px−ボタン幅 から算出） */
  width: 2.894rem;    /* 46.31px（SVG viewBox幅） */
  height: 0.455rem;   /* 7.28px（SVG viewBox高さ） */
  -webkit-mask-image: url("../../images/common/ico_arrow-sm.svg");
  mask-image: url("../../images/common/ico_arrow-sm.svg");
}

/* --- hover / focus -------------------------------------------------------
   ⚠ inferred: FigmaにHover定義が無いため実装側で決めた演出（tokens.css の方針に準拠）。
   矢印つきボタンは「矢印が右へ --hover-shift 進む」だけ。色は一切変えない
   （面を反転すると、ボタン外へはみ出した矢印が背景に溶けて欠けて見えるため）。
   キーボード操作でも同じ反応になるよう :focus-visible を併記する。 */
.c-button:hover .c-button__arrow,
.c-button:focus-visible .c-button__arrow {
  translate: var(--hover-shift) 0;
}

/* ==========================================================================
   c-button-external — 外部リンクボタン（ラベル + アイコン + 注記 + 矢印）
   Figma: p-page-header の LINEボタン（3191:33385）/ P-flow の予約ボタン（3191:24238）
   ========================================================================== */
.c-button-external {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23.5rem; /* 376px */
  padding: var(--space-10) var(--space-24);
  background: var(--color-white);
  border: var(--border-width-medium) solid var(--color-text);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.c-button-external__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.c-button-external__icon {
  width: 0.875rem; /* 14px */
  height: 0.875rem;
}

.c-button-external__note {
  font-size: var(--font-size-h6); /* 12.8px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.c-button-external__arrow {
  position: absolute;
  top: 1.53125rem;   /* 24.5px（Figma実測） */
  right: -1.375rem;  /* 22px はみ出し（Figma実測から算出） */
  width: 3.25rem;    /* 52px（SVG実寸 51.8px） */
  height: auto;
  transition: translate var(--duration-fast) var(--ease-out);
}

/* hover / focus（⚠ inferred）: c-button と同じく、色は変えず矢印が進むだけ。 */
.c-button-external:hover .c-button-external__arrow,
.c-button-external:focus-visible .c-button-external__arrow {
  translate: var(--hover-shift) 0;
}

/* モーション低減設定：hoverの手がかりが矢印の位置だけなので、位置の変化自体は残し、
   アニメーション（滑らかな移動）をやめて瞬時に切り替える。 */
@media (prefers-reduced-motion: reduce) {
  .c-button__arrow,
  .c-button-external__arrow {
    transition: none;
  }
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  /* SPはボタンを常に中央寄せ。親の justify-content（右寄せ等）より
     flexアイテムの auto マージンが優先されるため、どのラッパーでも中央に来る。 */
  .c-button,
  .c-button-external {
    margin-inline: auto;
  }

  .c-button {
    width: 100%;
    max-width: 22.5rem; /* 360px */
  }

  .c-button--small {
    width: auto;
  }

  .c-button-external {
    width: 100%;
    max-width: 23.5rem; /* 376px */
  }

}