/* =========================================================
   components.css
   汎用パーツ用：ボタン、カード、CTA、装飾ボックスなど
   案件ごとに増やしてOK
========================================================= */

/* 例：
.starter-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
}
*/


/* =================================
   共通
================================= */

.palette-btn a,
.palette-line a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  overflow: hidden;
  border: none !important;
}

/* =================================
   グラデーション
================================= */

/* ご予約 */
.palette-btn a {
  background: linear-gradient(
    90deg,
    #FFD66F 0%,
    #F8896A 50%,
    #F38061 100%
  ) !important;
}

/* LINE */
.palette-line a {
  background: linear-gradient(
    90deg,
    #B68AD0 0%,
    #A892E5 50%,
    #7FC4EF 100%
  ) !important;
}


/* =================================
   Cocoon shine無効
================================= */

.palette-btn a.btn-shine::before,
.palette-line a.btn-shine::before {
  display: none !important;
}

/* =================================
   テキスト基準
================================= */

.palette-btn a strong,
.palette-line a strong {
  position: relative;
}

/* =================================
   左アイコン
================================= */

/* 共通位置 */
.palette-btn a strong::before,
.palette-line a strong::before {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  line-height: 1;
}

/* カレンダー */
.palette-btn a strong::before {
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: 20px;
}

/* LINE */
.palette-line a strong::before {
  content: "\f3c0";
  font-family: "Font Awesome 5 Brands";
  font-weight: 700;
  font-size: 20px;
}

/* =================================
   右矢印
================================= */

.palette-btn a::after,
.palette-line a::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 16px;
  color: #fff;
}

/* =================================
   スマホ
================================= */

@media (max-width: 767px) {

  .palette-btn a,
  .palette-line a {
    min-height: 44px;
    font-size: 15px;
  }

  .palette-btn a::after,
  .palette-line a::after {
    right: 20px;
  }
}