/*
 * 求人詳細 CTA（旧KARTE No63/64 のネイティブ移植）
 * CTAボタン差し替え＆問い合わせメリット訴求（100%展開）
 * - cta_top : タイトル直下のCVボタン
 * - merit   : 問い合わせメリット訴求画像
 * - tsuiju  : スクロール追従CTA
 */

/* ---- cta_top (PC: callout-button / SP: decolated-cta) ---- */
.karte-cta-top {
  text-align: center;
  margin: 16px 0;
}
.karte-cta-top .callout-button {
  display: inline-block;
  margin: 0 auto;
}
.karte-cta-top .decolated-cta {
  display: grid;
  place-content: center;
}
.karte-cta-top .decolate-button {
  text-align: center;
}
.karte-cta-top .decolate-button span {
  position: relative;
  padding: 0 30px;
  font-weight: 700;
  font-size: 24px;
}
.karte-cta-top .decolate-button span::before,
.karte-cta-top .decolate-button span::after {
  display: inline-block;
  position: absolute;
  bottom: -7px;
  background: #ffffff;
  width: 2px;
  height: 33px;
  content: '';
}
.karte-cta-top .decolate-button span::before { left: 0; transform: rotate(-45deg); }
.karte-cta-top .decolate-button span::after  { right: 0; transform: rotate(45deg); }
.karte-cta-top .cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  transition: box-shadow 0.2s ease-in-out, background-color 0.3s ease;
  margin: 0 auto;
  background-color: #FF7600;
  padding: 20px 40px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}
.karte-cta-top .cta-button span { width: 24px; }
.karte-cta-top .cta-button:hover { box-shadow: 0 8px 16px rgb(0 16 14 / 20%); }

/* ---- merit（メリット訴求画像） ---- */
.karte-cta-merit { font-size: 0; text-align: center; margin: 16px 0; }
.karte-cta-merit img { width: 100%; max-width: 1306px; }

/* ---- tsuiju（追従CTA） ---- */
.multiple-cta-component {
  display: block;
  position: fixed;
  bottom: -3px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 99999;
  transition: opacity 0.2s ease, visibility 0.2s ease, bottom 0.2s ease;
  margin: 0 auto;
  width: 100%;
}
.multiple-cta-component._scrollDisplay {
  bottom: 0px;
  visibility: visible;
  opacity: 1;
}
.multiple-cta-buttons-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: #174281;
  padding: 13px 0;
}
.multiple-cta-flex-items { display: flex; align-items: center; gap: 20px; }
.multiple-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  transition: color 0.2s ease, background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 16px rgb(0 16 14 / 0%);
  border-radius: 6px;
  padding: 10px 38px;
  width: auto;
  font-weight: 700;
  font-size: 22px;
  line-height: 42px;
  text-align: center;
  text-decoration: none;
}
.multiple-cta-buttons-cta { border: 2px solid transparent; background-color: #ff5c79; color: #ffffff; }
.multiple-cta-buttons svg { width: 24px; height: 24px; transition: fill 0.2s ease; }
@media screen and (max-width: 768px) {
  .multiple-cta-buttons-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .multiple-cta-flex-items { order: 2; gap: 8px; }
  .multiple-cta-buttons {
    flex-grow: 1;
    justify-content: center;
    order: 1;
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
  }
  .multiple-cta-buttons svg { width: 12px; height: 12px; }
  .multiple-cta-buttons-cta { padding: 10px 4px; font-size: 16px; line-height: 24px; }
}