/* =========================================================
   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;
  }
}


/* =================================
   クラス紹介
================================= */

/* 「こんな方におすすめ」吹き出し */
.class .recommend-bubble {
  display: inline-block;
  position: relative;
  padding: 6px 18px;
  margin: 18px 0 10px;
  border: 1px solid #CB717F;
  border-radius: 8px;
  background: #fff;
  color: #CB717F;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 吹き出しのしっぽ */
.class .recommend-bubble::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #CB717F;
  border-bottom: 1px solid #CB717F;
  transform: rotate(-45deg);
}