/* =========================
   CTAボタン（赤）
========================= */
 .ctaBtn {
  display: block;
  width: 100%;
  max-width: 335px;
  border-radius: 999px;
  text-align: center;
  position: relative;
  padding: 4px 20px;
  overflow: hidden;
}

/* メイン */
.ctaBtn--primary {
  background: linear-gradient(
    to bottom,
    #F23134 0%,
    #E01F22 100%
  );
  border: 2px solid #fff;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.32),  /* 外シャドウ */
    inset -8px -8px 8px rgba(0,0,0,0.08), /* 左上影 */
    inset 8px 8px 8px rgba(255,255,255,0.52); /* 右下ハイライト */
}

/* サブテキスト */
.ctaBtn__sub {
  display: block;
  font-size: 11px;
  color: #fff;
  margin-bottom: 1px;
  position: relative;
}

/* 下線 */
.ctaBtn__sub::after {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background: #fff;
  margin: 0 auto;
}

/* 強調 */
/* 12:30（袋文字） */
.ctaBtn__sub strong {
  font-size: 15px;
  font-weight: 700;
  color: #824341; /* ←中の色 */
  -webkit-text-stroke: 0px #fff; /* ←白フチ */
  /* fallback（Safari以外の保険） */
  text-shadow:
    1px 0 #fff,
   -1px 0 #fff,
    0 1px #fff,
    0 -1px #fff;
}

/* メイン */
.ctaBtn__main {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* 右の丸 */
.ctaBtn--primary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}

/* 三角 */
.ctaBtn--primary::after {
  content: "";
  position: absolute;
  right: 18px; /* ←丸の中央に合わせる */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #EF352F; /* ←Figmaの色 */
}


/* =========================
   CTAボタン（ダーク）
========================= */

.ctaBtn--dark {
  background: linear-gradient(
    to bottom,
    #4E3736 0%,
    #3A2827 100%
  );
  border: 2px solid #fff;
  box-shadow:
    4px 4px 8px rgba(0,0,0,0.32),
    inset -8px -8px 8px rgba(0,0,0,0.08),
    inset 8px 8px 8px rgba(255,255,255,0.52);
    padding: 16px 20px;
}

/* 右の丸 */
.ctaBtn--dark::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}

/* 三角 */
.ctaBtn--dark::after {
  content: "";
  position: absolute;
  right: 18px; /* ←丸の中央に合わせる */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #824341; /* ←Figmaの色 */
}

/* サブテキスト */
.ctaBtn__sub__dark {
  display: block;
  font-size: 13px;
  color: #fff;
  line-height: 1.2;
}

/* メイン */
.ctaBtn__main__dark {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* アイコン */
.ctaBtn__icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 37px;
  height: 37px;
}

.ctaBtn__icon img {
  width: 100%;
  height: 100%;
}

@media screen and (min-width:992px) and (max-width:1200px) {
  .pc-side .ctaBtn--primary::before,
  .pc-side .ctaBtn--primary::after,
  .pc-side .ctaBtn--dark::before,
  .pc-side .ctaBtn--dark::after {
    display: none;
  }

  .pc-side .ctaBtn__main {
    font-size: 20px;
    margin-left: 20px;
  }

  .pc-side .ctaBtn__main__dark {
    font-size: 20px;
    margin-left: 20px;
  }
}