@charset "UTF-8";

/* ==================================================
   CTAボタン（旧 cta_button.png 922x225 のHTML化）
   読み込み: functions.php の enqueue 対応表（全ページで読込）

   設置箇所（本文・ブログパーツ側で自由に増える想定）:
     - TOP メインビジュアル : div.mv-parts__button.c-ctaBtn__host（ブログパーツ）
     - 下部CTA              : figure.contact_btn.c-ctaBtn__host（固定ページ本文）
                              TOP / 会社概要 など複数ページに設置済み

   共通パーツなので style-custom.css（一部ページのみ読込）ではなく単独ファイルにする。
   ページ限定CSSに置くと、未対象ページで素のHTMLが露出して崩れるため。

   ボタン幅は設置場所ごとの width(%) / max-width で決まり、流体的に変わる。
   元画像は文字まで等比で縮んでいたので、--u =「元画像の1px」をコンテナ幅から算出し、
   全寸法を calc(N * var(--u)) で書く。N は元画像から実測したピクセル値そのもの。

   :not(#_) は詳細度を上げて .post_content a の色・下線・opacity に勝つため
   （style-custom.css 由来の作法）。
   ================================================== */
.c-ctaBtn__host {
  container-type: inline-size;
}

/* MVのラッパーは aspect-ratio: 459/112 を持つが、高さはボタン自身が決めるので無効化する */
.top #main_visual .p-mainVisual__slide .mv-parts__button.c-ctaBtn__host {
  aspect-ratio: auto;
}

.c-ctaBtn:not(#_) {
  --u: calc(100cqw / 922);
  position: relative;
  /* 内部の z-index が周囲の要素に漏れないよう閉じ込める */
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 922 / 225;
  color: #fff;
  text-decoration: none;
  opacity: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* ピル本体。立体影は「ピルを真下に12pxずらした同形」なので box-shadow で完全再現できる。
   横並びは 18 + 140 + 35 + 581 + 38 + 23 + 87 = 922 でぴったり収まる。 */
.c-ctaBtn__body {
  position: absolute;
  inset: calc(41 * var(--u)) 0 calc(12 * var(--u));
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 calc(87 * var(--u)) 0 calc(18 * var(--u));
  border-radius: 9999px;
  background: linear-gradient(180deg, #b81716 0%, #d93737 100%);
  box-shadow: 0 calc(12 * var(--u)) 0 #873800;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover は既存 .c-btn01 と同じ「押し込み」。吹き出しもピルと一緒に沈む。 */
.c-ctaBtn:hover .c-ctaBtn__body,
.c-ctaBtn:focus-visible .c-ctaBtn__body,
.c-ctaBtn:hover .c-ctaBtn__balloon,
.c-ctaBtn:focus-visible .c-ctaBtn__balloon {
  transform: translateY(calc(12 * var(--u)));
}
.c-ctaBtn:hover .c-ctaBtn__body,
.c-ctaBtn:focus-visible .c-ctaBtn__body {
  box-shadow: none;
}
.c-ctaBtn:not(#_):focus-visible {
  outline: none;
}
.c-ctaBtn:focus-visible .c-ctaBtn__body {
  outline: calc(3 * var(--u)) solid #873800;
  outline-offset: calc(3 * var(--u));
}

/* 無料バッジ。padding-bottom は「元画像では文字が円の中心より9.2px上に組まれている」分。 */
.c-ctaBtn__badge {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(140 * var(--u));
  height: calc(140 * var(--u));
  padding-bottom: calc(18.4 * var(--u));
  border-radius: 50%;
  background: #fff;
  color: #d93737;
  font-size: calc(48 * var(--u));
}

/* 本文。translate は元画像のインク位置に合わせる分。
   text-align:center は「送り幅」を中央に置くため、左右のサイドベアリングと
   末尾の letter-spacing の分だけインクが左にずれる。それを x で補正している。 */
.c-ctaBtn__label {
  flex: 1;
  min-width: 0;
  margin: 0 calc(38 * var(--u)) 0 calc(35 * var(--u));
  text-align: center;
  white-space: nowrap;
  font-size: calc(48 * var(--u));
  letter-spacing: calc(1.1 * var(--u));
  transform: translate(calc(2.75 * var(--u)), calc(2.7 * var(--u)));
}

.c-ctaBtn__arrow {
  flex: none;
  width: calc(23 * var(--u));
  height: calc(40 * var(--u));
  transform: translateY(calc(4 * var(--u)));
}

/* 吹き出し。padding-right は「」のサイドベアリングでインクが右にずれる分の補正、
   padding-bottom は元画像のベースライン(47.8px)に合わせる分。 */
.c-ctaBtn__balloon {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(217 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(506 * var(--u));
  height: calc(76 * var(--u));
  padding-right: calc(16.5 * var(--u));
  padding-bottom: calc(6.65 * var(--u));
  border: calc(6 * var(--u)) solid #d93737;
  border-radius: 9999px;
  background: #fff;
  color: #d93737;
  white-space: nowrap;
  font-size: calc(30 * var(--u));
  transition: transform 0.2s ease;
}

/* 吹き出しの尻尾。赤い三角(::before)の上に白い三角(::after)を重ねて枠線付きにする。
   left/top は吹き出しのパディングボックス基準（＝元画像座標から border 6px を引いた値）。 */
.c-ctaBtn__balloon::before,
.c-ctaBtn__balloon::after {
  content: "";
  position: absolute;
  left: calc(242 * var(--u));
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-style: solid;
  border-color: transparent;
}
.c-ctaBtn__balloon::before {
  top: calc(70 * var(--u));
  border-width: calc(14.5 * var(--u)) calc(14.5 * var(--u)) 0;
  border-top-color: #d93737;
}
.c-ctaBtn__balloon::after {
  top: calc(63 * var(--u));
  border-width: calc(12.5 * var(--u)) calc(12.5 * var(--u)) 0;
  border-top-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .c-ctaBtn__body,
  .c-ctaBtn__balloon {
    transition: none;
  }
}