/* buttons.css — ピル型ボタン（Figma: MVボタン 2008:11055 / 2008:11056）
   実値: 幅200px / radius 100px / padding 16px（左32px）/ 16px Bold ls 0.1em
         outline: 白地 + 2px #1561AB / fill: #004C98地 + 白字 / 矢印24px */

.btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 12.5rem;
  padding: var(--space-16);
  padding-left: var(--space-32);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* 矢印アイコン：mask + currentColor で文字色に追従 */
.btn::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

/* 枠線はレイアウトサイズに影響しないよう内側box-shadowで描く
   （border追加分だけfillボタンより高くならないようにするため。Figmaは内側stroke） */
.btn--outline {
  background: var(--color-white);
  box-shadow: inset 0 0 0 2px var(--color-accent);
  color: var(--color-accent);
}

.btn--fill {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* --- hover（色を反転）: hover可能なデバイスのみ -------------------------- */
/* 塗りボタン → 白地＋その色の文字＋同色の縁 / 白ボタン → 塗りつぶし */
@media (hover: hover) {
  /* アウトライン（白地）: accent塗り＋白字（縁はそのまま） */
  .btn--outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
  }
  /* 濃青塗り → 白地＋濃青字＋濃青縁 */
  .btn--fill:hover {
    background: var(--color-white);
    color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
  }
  /* 青（明）塗り → 白地＋青字＋青縁 */
  .btn--primary:hover {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
  /* 黒塗り → 白地＋黒字＋黒縁 */
  .btn--black:hover {
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: inset 0 0 0 2px var(--color-black);
  }

  /* 矢印を少し右へ（矢印なし .btn--center は content:none なので影響なし） */
  .btn:hover::after {
    transform: translateX(var(--space-4));
  }
}

/* 矢印なし・ラベル中央（Figma: 掲載メディア「もっと見る」/ フォーム「内容を確認する」） */
.btn--center {
  justify-content: center;
}
.btn--center::after {
  content: none;
}

/* 青（明）塗り：CASE STUDYカード内など */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 黒塗りバリアント */
.btn--black {
  background: var(--color-black);
  color: var(--color-white);
}

/* 小サイズ（Figma: 詳しく見る 220px / padding 12px 40px / 14.222px / 矢印16px） */
.btn--sm {
  width: 13.75rem;
  padding: var(--space-12) var(--space-40);
  font-size: var(--font-size-h5);
  letter-spacing: var(--letter-spacing-widest);
}
.btn--sm::after {
  width: 1rem;
  height: 1rem;
}

/* 極小サイズ（Figma: 記事カード 詳しく見る / padding 8px 16px 8px 24px / 12.8px） */
.btn--xs {
  width: auto;
  gap: var(--space-24);
  justify-content: flex-start;
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-24);
  font-size: var(--font-size-h6);
  letter-spacing: var(--letter-spacing-widest);
}
.btn--xs::after {
  width: 1rem;
  height: 1rem;
}

/* 大サイズ（Figma: すべて見る 320px / padding 16px 56px / 18.286px） */
.btn--lg {
  width: 20rem;
  padding: var(--space-16) var(--space-56);
  font-size: var(--font-size-h3);
}

/* --- SP: 固定幅ボタンが狭い画面からはみ出さないように ------------------- */
@media (max-width: 767px) {
  .btn,
  .btn--sm,
  .btn--lg {
    max-width: 100%;
    margin-inline: auto;
  }
}