@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
*/

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

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

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

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

1
WordPress管理画面を開く

左メニューから以下へ進む

外観
›
カスタマイズ
2
「追加CSS」を開く

カスタマイザー左メニュー最下部にある

追加CSS
をクリック

3
以下のCSSを貼り付け

/* フッター固定ボタンの余白 */
body {
  padding-bottom: 80px !important;
}
ページ下部がフッターボタンで隠れないようにするためのCSS
4
「公開」ボタンを押してカスタマイザーを閉じる

5
functions.php にコードを追加

左メニューから

外観
›
テーマエディター
›
functions.php
を開き、一番下に以下を貼り付ける

/* 固定フッターボタン */
function add_fixed_footer_buttons() { ?>
<div style="
  position:fixed;bottom:0;left:0;right:0;
  background:#1a1a1a;
  padding:10px 16px 14px;
  display:flex;gap:8px;
  z-index:9999;
  border-top:1px solid rgba(255,255,255,0.08);
">
  <!-- LINE -->
  <a href="https://page.line.me/576bdntf?oat_content=url&openQrModal=true"
    style="flex:1;display:flex;flex-direction:column;align-items:center;
    gap:4px;padding:10px 4px;border-radius:10px;text-decoration:none;
    font-size:10px;font-weight:600;color:#fff;background:#06C755;">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125zM14.254 17.109c-.23 0-.433-.148-.512-.366l-2.256-6.077c-.079-.216.013-.458.215-.565.203-.108.453-.034.563.173l1.948 5.244V8.109c0-.345.282-.63.63-.63.345 0 .63.285.63.63v8.371c0 .232-.128.447-.331.556-.086.047-.178.073-.276.073zm-3.878 0c-.346 0-.627-.285-.627-.629V8.108c0-.345.281-.63.627-.63.349 0 .63.285.63.63v8.372c0 .344-.281.629-.63.629zm-3.377 0c-.344 0-.627-.285-.627-.629V8.108c0-.345.283-.63.627-.63.346 0 .629.285.629.63v5.52l-2.249-5.713c-.081-.207-.278-.336-.503-.336-.345 0-.627.285-.627.63v8.372c0 .344.282.629.627.629.349 0 .63-.285.63-.629V12l2.25 5.72c.079.201.272.337.499.337z"/></svg>
    LINE
  </a>
  <!-- 電話 -->
  <a href="tel:0286668228"
    style="flex:1;display:flex;flex-direction:column;align-items:center;
    gap:4px;padding:10px 4px;border-radius:10px;text-decoration:none;
    font-size:10px;font-weight:600;color:#1a1a1a;
    background:#fff;border:1px solid rgba(0,0,0,0.12);">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="#1a1a1a"><path d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/></svg>
    電話
  </a>
  <!-- ホットペッパー -->
  <a href="https://beauty.hotpepper.jp/slnH000551445/"
    style="flex:1;display:flex;flex-direction:column;align-items:center;
    gap:4px;padding:10px 4px;border-radius:10px;text-decoration:none;
    font-size:10px;font-weight:600;color:#fff;background:#E60012;">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg>
    ホットペッパー予約
  </a>
</div>