/* ==========================================================
   ボタン（.c-button）
   文字は中央、矢印の丸は右端。
   --dark：濃い緑（WEB予約・診療案内・大腸カメラ）
   --brown：茶（胃カメラ）
   --line：上下の線だけ（お知らせ一覧・医師紹介）。文字のすぐ右に矢印の丸
   SP：横幅いっぱい
   ========================================================== */
.c-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 63px;
  padding: 10px 64px;
  color: #fff;
  font-family: var(--font-maru);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: center;
}

/* 矢印の丸 */
.c-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3) url("../../svg/icon-arrow.svg") no-repeat center / 11px auto;
  transform: translateY(-50%);
}

.c-button--dark {
  background: var(--color-button);
}

.c-button--brown {
  background: var(--color-brown);
}

.c-button--line {
  gap: 12px;
  width: 250px;
  min-height: 56px;
  padding: 10px 0;
  border-block: 2px solid #b9dbb8;
  color: var(--color-main);
}

.c-button--line::after {
  position: static;
  flex-shrink: 0;
  background-color: var(--color-main);
  transform: none;
}

@media (max-width: 767px) {
  .c-button {
    padding-inline: 50px;
    font-size: 15px;
  }

  .c-button::after {
    right: 14px;
  }

  .c-button--line {
    width: 100%;
    max-width: 320px;
    padding-inline: 0;
  }
}