@charset "UTF-8";

/*--------------------------------------------------------
　プラグインやテンプレートパーツ等の自作パーツ系のスタイル
--------------------------------------------------------*/

/* =======================================
　パンくずリスト
======================================= */



/* =======================================
　SNSシェアボタン
======================================= */



/* =======================================
　コメント欄
======================================= */



/* =======================================
　ページャー（前の記事＆後の記事）
======================================= */



/* =======================================
　ページャー（記事数）
======================================= */



/* =======================================
　上に戻るボタン
======================================= */



/* =======================================
　　固定お問い合わせボタン
======================================= */

#fixed-contact-btn.visible {
  gap: 2%;
  display: flex;
  justify-content: center;
  background: var(--color-accent01);
  padding: 8px;
}

#fixed-contact-btn.visible .cta-btn {
  flex: 1;
  width: auto;
  max-width: 48%;
}

#fixed-contact-btn.visible .cta-btn a {
  border-radius: 4px;
}

#fixed-contact-btn.visible .cta-reserve a {
  background: #ff6300;
}

#fixed-contact-btn.visible .cta-tel a {
  background: #23bb00;
}

/* アイコン（疑似要素） */
#fixed-contact-btn.visible .cta-btn a::before {
  display: inline-block;
  margin-right: 8px;
  width: 20px;
  height: 20px;
  content: '';
  vertical-align: -3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#fixed-contact-btn.visible .cta-reserve a::before {
  background-image: url('../../images/top-lp/icon-web.webp');
}

#fixed-contact-btn.visible .cta-tel a::before {
  background-image: url('../../images/top-lp/icon-tel.webp');
}


@media (max-width: 400px) {
  #fixed-contact-btn.visible .cta-btn a {
    font-size: 17px;
    padding: 4px 16px;
  }
}