/* ==========================================================================
   button.css
   第 2 色相（ゴールド等）を使わない決定のため、CTA の視認性は
   面積・余白・サイズで作る。min-height を大きめに取っているのはそのため。
   ========================================================================== */

.btn {
  /* ::before のワイプを敷くための下地。
     isolation で z-index: -1 の ::before を .btn の中に閉じ込め、
     overflow で角丸からはみ出さないようにする。
     outline は overflow に切られないのでフォーカス表示は影響を受けない。 */
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-8);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

/*
  hover の塗りを、色の差し替えではなく左からのワイプで行う（三嶋指示）。

  ★新しい動きを足したのではなく、ページ内にすでにある動きを使っている。
    ヒーローの見出し・サブコピーの帯は、どれも左から右へのワイプで出る。
    ボタンだけ別の動き方をすると、ページ全体の所作がばらつく。

  塗りの色は変種ごとに --btn-fill で渡す。
  :active では --btn-fill を差し替えて、覆っている面の色だけ変える
  （下の background-color を変えても ::before に隠れて見えないため）。
*/
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--btn-fill, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

/* 行末の矢印は、塗りに合わせて少し前へ出す。
   ★translateX を rotate より前に書いている。transform は右から適用されるので、
     この順なら回転済みの形を画面上でまっすぐ右に動かせる。
     rotate の後ろに書くと、回転した座標系に沿って斜めに動いてしまう。 */
.btn--arrow::after {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn--arrow:hover::after,
.btn--arrow:focus-visible::after {
  transform: translateX(3px) rotate(45deg) translate(-1px, 1px);
}

/* メイン CTA */
.btn--primary {
  --btn-fill: var(--color-action-hover);

  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

.btn--primary:hover {
  border-color: var(--color-action-hover);
  color: var(--color-action-text);
}

.btn--primary:active {
  --btn-fill: var(--color-action-active);

  border-color: var(--color-action-active);
}

/* サブ CTA */
.btn--secondary {
  --btn-fill: var(--color-bg-tint);

  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-action);
}

.btn--secondary:hover {
  border-color: var(--color-action);
  color: var(--color-action);
}

/* FV・CTA 帯で使う大サイズ */
.btn--lg {
  min-height: 64px;
  padding-inline: var(--space-10);
  font-size: var(--text-lg);
}

/* 狭い画面では左右の余白を詰める。
   「サービス資料のダウンロード」は 13 文字 × 19px ＋ 字間で約 254px。
   左右 40px ずつだと 375px 幅（コンテンツ 335px）に収まらず、
   「ダウンロー／ド」と語中で折り返してしまう。 */
@media (max-width: 767px) {
  .btn--lg {
    padding-inline: var(--space-5);
  }
}

/*
  行末の矢印（三嶋指示。案A・案B の CTA 2 つ）。

  .btn 本体ではなく修飾クラスにしている。ヘッダーの「お問い合わせ」も
  同じ .btn なので、本体に付けるとそこにも矢印が出てしまう。

  山形は案C の .cta-panel__arrow と同じ描き方。あちらは丸で囲んでいるが、
  こちらは囲まない（案C のパネルは角丸 16px の面なので丸が馴染むが、
  A・B のボタンは角丸 --radius-sm の小さな面で、丸を足すと窮屈になる）。

  ★大きさだけ案C と変えている（0.4em → 0.55em）。
    案C は 44px の丸の中に置くので 0.4em（約 7px）で成立するが、
    丸のない単独の矢印だと、線の太さ 2px に対して小さすぎて潰れて見える。

  ★margin-inline-start: auto で右端に寄せている。
    768px 未満ではボタンが横いっぱいになるので、文字が左・矢印が右に分かれる。
    横並びのときは余白がないので、文字のすぐ後ろに付く。
    どちらでも「ボックスの右側」に来る。
*/
.btn--arrow::after {
  content: "";
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  margin-inline-start: auto;
  border-top: var(--border-width-thick) solid currentColor;
  border-right: var(--border-width-thick) solid currentColor;
  transform: translateX(0) rotate(45deg) translate(-1px, 1px);
}

/* ヘッダー内など、詰めて置く場合 */
.btn--sm {
  min-height: 44px;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

/* テキストリンク型の第 3 導線。ボタンを増やしすぎないための逃がし先 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--color-border-strong);
  padding-bottom: var(--space-1);
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.link-arrow:hover {
  color: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

.link-arrow::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-top: var(--border-width-thick) solid currentColor;
  border-right: var(--border-width-thick) solid currentColor;
  transform: rotate(45deg);
}