/* button.css — ボタン・テキストリンク・外部リンクアイコン
   Figma: ボタン 1879:13617 / 大ボタン 1882:52048 / MORE 1878:52001 / 外部リンク 1627:50718 */

/* ピル型ボタン --------------------------------------------------------------- */
/* Figma の線は内側に描かれ幅に含まれないため、padding から線幅を引いて 280×56 を一致させる */
.button {
  --button-width: 17.5rem; /* 280px */
  --button-icon-size: var(--space-40);

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--button-width);
  min-width: min(var(--button-width), 100%); /* 狭い画面では親の幅で止める */
  max-width: 100%;
  padding: calc(var(--space-8) - var(--border-width));
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  color: var(--color-black);
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-hover),
    color var(--duration-fast) var(--ease-hover);
}

/* ホバー：黒反転＋矢印が右へ＋アイコンを白丸に差し替え（2枚重ねてフェード）*/
.button:hover,
.button:focus-visible {
  background: var(--color-black);
  color: var(--color-white);
}

.button:hover .button__icons,
.button:focus-visible .button__icons {
  transform: translateX(var(--hover-shift));
}

.button:hover .button__icon--hover,
.button:focus-visible .button__icon--hover {
  opacity: 1;
}

.button__label {
  flex: 1 0 0;
  min-width: 0;
  word-break: break-word;
}

.button__icons {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  transition: transform var(--duration-fast) var(--ease-hover);
}

.button__icon {
  position: absolute;
  inset: 0;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  transition: opacity var(--duration-fast) var(--ease-hover);
}

.button__icon--hover {
  opacity: 0;
}

/* 幅 312px（TOP 代表メッセージ）Figma: 1627:50789 */
.button--wide {
  --button-width: 19.5rem;
}

/* 大ボタン（採用CTA）Figma: 1882:52048 — 高さ固定 91px・角丸16 */
.button--large {
  --button-large-height: calc(91 / 16 * 1rem);

  flex: 1 0 0;
  width: auto;
  height: var(--button-large-height);
  padding: calc(var(--space-8) - var(--border-width)) calc(var(--space-16) - var(--border-width));
  border-radius: var(--radius-lg);
}

/* 大ボタン 幅 320 固定・左 24（事業概要）Figma: 2004:54160 */
.button--large-320 {
  flex: none;
  width: 20rem;
  padding-left: calc(var(--space-24) - var(--border-width));
}

/* 大ボタン 幅 420 固定（経営者の方へ）Figma: 2019:16016 */
.button--large-420 {
  flex: none;
  width: 26.25rem;
}

/* 黒ベタ（送信）Figma: 2058:53784 — ホバーは白反転 */
.button--primary {
  background: var(--color-black);
  color: var(--color-white);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
}

/* SNSカード用（左 64・ラベル幅 135 固定・幅は内容に合わせる）Figma: 2058:53823 */
.button--sns {
  --button-sns-label-width: calc(135 / 16 * 1rem);

  gap: var(--space-24);
  width: auto;
  min-width: 0;
  padding-left: calc(var(--space-64) - var(--border-width));
}

.button--sns .button__label {
  flex: none;
  width: var(--button-sns-label-width);
}

/* テキストリンク（MORE）Figma: 1878:52001 ------------------------------------ */
/* 下線はホバーで一度右へ消え、左から伸び直す */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  border-bottom: var(--border-width) solid transparent;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  color: var(--color-black);
  text-decoration: none;
}

.text-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--border-width));
  left: 0;
  border-bottom: var(--border-width) solid var(--color-black);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  animation: ic-underline-redraw calc(var(--duration-fast) * 2) var(--ease-hover);
}

.text-link:hover .text-link__icon,
.text-link:focus-visible .text-link__icon {
  transform: translateX(var(--hover-shift));
}

@keyframes ic-underline-redraw {
  0%   { transform: scaleX(1); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: right; }
  51%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* 16px 版（TOP コンセプト「私たちについて」）Figma: 1627:51109 */
.text-link--lg {
  font-size: var(--font-size-body);
  line-height: var(--line-height-button);
}

.text-link__icon {
  flex-shrink: 0;
  width: calc(9.44789 / 16 * 1rem);
  height: calc(7.91616 / 16 * 1rem);
  transition: transform var(--duration-fast) var(--ease-hover);
}

/* 外部リンクアイコン（矢印を −45° 回転）Figma: 1627:50720 ------------------- */
/* 親リンクのホバーで右上へ 2px 動く */
a:hover .external-icon,
a:focus-visible .external-icon {
  transform: translate(var(--space-2), calc(-1 * var(--space-2)));
}

.external-icon {
  transition: transform var(--duration-fast) var(--ease-hover);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(14.92 / 16 * 1rem);
  height: calc(14.92 / 16 * 1rem);
}

.external-icon img {
  width: calc(12.7593 / 16 * 1rem);
  height: calc(9.85258 / 16 * 1rem);
  transform: rotate(-45deg);
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .button--sns {
    padding-left: calc(var(--space-24) - var(--border-width));
  }
}

/* SP 用の短いラベル（label_sp）は PC では隠す */
.button__label-sp {
  display: none;
}

/* SP：ラベルを <br>/<wbr> の区切り単位で折り返す（単語の途中で改行させない）。
   <br> は解除し、入りきらないときだけ区切り位置で改行する */
@media (max-width: 767px) {
  /* ボタンは基本中央寄せ（親が flex でもブロックでも効くよう auto マージンで寄せる）*/
  .button {
    display: flex;
    margin-inline: auto;
  }

  /* 大ボタンは高さ固定（91px）を外し、ラベルの行数に合わせる */
  .button--large {
    height: auto;
  }

  .button__chunk {
    display: inline-block;
  }

  .button__br {
    display: none;
  }

  .button__label-pc {
    display: none;
  }

  .button__label-sp {
    display: inline;
  }
}