@charset "UTF-8";

/*!
Theme Name: Beravonize
Description: Cocoon専用の子テーマ
Theme URI: 
Author: Sakaki Kou
Author URI: https://beravoni.com/
Template:   cocoon-master
Version:    1-1-0
*/

/* editor-style.css （管理画面用） */
.point {
  color: #F29C0D;
  font-weight: bold;
	
}
p{
    margin-block-end: 1em;
}


/* 渡辺が入れた↓ */

/* スマホ専用：固定フッターCTA */
.sp-contact-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;           /* PCでは非表示 */
  gap: 8px;
  padding: 10px;
  background: rgba(0,0,0,.40);
/*  border-top: 1px solid rgba(0,0,0,.08);*/
}

/* ボタン */
.sp-contact-btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 12px 10px;
	margin:0 0.5em;
      border: 2px solid #fff;
	box-shadow: 0 3px #fff;
	border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.sp-contact-ico svg{
  display: block;
  fill: currentColor;
margin:0 0.3em;
}

/* 色（お好みで） */
.sp-line{ background:#06C755; color:#fff; }
.sp-tel{  background:#ffa02e; color:#fff; }

/* スマホだけ表示（例：768px以下） */
@media (max-width: 768px){
  .sp-contact-bar{
	display: flex; 
  }
  /* 固定バー分だけ下に余白を作る（被り防止） */
  body{ padding-bottom: 74px; }
}


/* 白い膜でホバー表現（推奨） */
.sp-contact-bar .sp-contact-btn{
  position: relative;
  overflow: hidden;
}

.sp-contact-bar .sp-contact-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.5); /* ←ここが「50%白」 */
  opacity: 0;
  transition: opacity .15s ease;
}

.sp-contact-bar .sp-contact-btn:hover::after,
.sp-contact-bar .sp-contact-btn:active::after,
.sp-contact-bar .sp-contact-btn:focus-visible::after{
  opacity: 1;
}

/* 文字が赤になるのを完全阻止 */
.sp-contact-bar .sp-contact-btn:hover,
.sp-contact-bar .sp-contact-btn:active,
.sp-contact-bar .sp-contact-btn:focus-visible{
  color: #fff !important;
}


.sp-contact-bar{
  transform: translateY(120%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.sp-contact-bar.is-visible{
  transform: translateY(0);
  opacity: 1;
}

/* CTAボタン上の一文 */
.sp-contact-note{
  width: 100%;              /* ← flex内で全幅にする */
  margin: 0 0 8px;          /* 下に少し余白 */
  text-align: center;       /* 中央揃え */
  color: #fff;              /* 白文字 */
  font-size: 12px;          /* 好みで */
  font-weight: 700;
  line-height: 1.4;
}

/* sp-contact-bar が flex のままでも、折り返して「1行＋2ボタン」構成にする */
@media (max-width: 768px){
  .sp-contact-bar{
    flex-wrap: wrap;        /* ←これ重要（noteを上段に） */
  }
}

/* 渡辺が入れた↑ */

/* 2ボタンのラッパー（固定フッター内でも本文内でも使う） */
.sp-contact-buttons{
  display: flex;
  gap: 8px;
  width: 100%;
}

/* 本文中ボタンの左右marginは不要（ズレるので） */
.entry-content .sp-contact-buttons .sp-contact-btn{
  margin: 0;
}

/* 固定フッターは今まで通りスマホのみ表示 */
@media (max-width: 768px){
  .sp-contact-bar{ display: flex; flex-wrap: wrap; }
}