@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

// スマホ用固定フッターボタンを出力
add_action('wp_footer', 'add_custom_mobile_footer_button');
function add_custom_mobile_footer_button() {
  // PCでも画面幅を縮めて確認できるよう、wp_is_mobile()の制限を外します
?>
<div class="custom-mobile-footer">
  <!-- 上部のテキストバー -->
  <div class="custom-footer-top">
    お電話にて割引価格適応（事前準備不要）
  </div>
  
  <div class="custom-footer-buttons">
    <!-- 左の青いボタン（リンク先URLを実際のお問い合わせページに変更してください） -->
    <a href="/contact/" class="footer-btn-left"> 
      事前相談・無料見積<br>資料請求はこちら
    </a>
    
    <!-- 右の赤いボタン（tel:に続く電話番号と、表示用の電話番号を実際の番号に変更してください） -->
    <a href="tel:0120-000-000" class="footer-btn-right"> 
      <div class="btn-right-icon">
        <i class="fas fa-phone-alt"></i><br>24h
      </div>
      <div class="btn-right-text">
        <span class="tel-number">0120-000-000</span><br>
        <span class="tel-sub">お急ぎの方</span>
      </div>
    </a>
  </div>
</div>
<?php
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}