/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 28 2025 | 23:35:00 */
/* ==========================================================================
   【ここから下をElementorのカスタムCSSにコピーしてください】
   Sonic Ripple (超音波の波紋) スタイル定義
   ========================================================================== */

/* 1. ボタン本体の基本設定 */
/* 【重要】セレクタを修正: ウィジェット外枠への適用を防ぐため、
   Elementorウィジェット内のボタン(.elementor-button)と
   プレビュー用のaタグ(a.btn-sonic-ripple)のみをターゲットにします */
button#btn-sonic-ripple,
.btn-sonic-ripple,
.btn-sonic-ripple .elementor-button {
  /* 常に相対配置にして、擬似要素の基準点にする */
  position: relative;
  z-index: 1;
  
  /* レイアウト崩れを防ぐためのFlexbox化 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 余分な行間を削除して高さを安定させる */
  line-height: 1 !important;
  
  /* 左右を丸くする */
  border-radius: 50em !important;
  
  /* 波紋をボタンの形に切り取る（必須） */
  overflow: hidden !important;
  
  /* ベースデザイン（通常版：緑） */
  background-color: #449C0C !important; /* Primary Green */
  color: #ffffff !important;
  border: none !important;

  /* アニメーション以外のトランジション設定 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* 2. テキストを最前面に確保 */
#btn-sonic-ripple .elementor-button-content-wrapper,
#btn-sonic-ripple .elementor-button-text,
#btn-sonic-ripple .elementor-button-icon,
.btn-sonic-ripple .elementor-button-content-wrapper,
.btn-sonic-ripple .elementor-button-text,
.btn-sonic-ripple .elementor-button-icon {
  position: relative;
  z-index: 10; /* 波紋より手前に表示 */
  
  /* テキストラッパー自体の余白もリセット */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 3. 斜めの切り返しエフェクト（::beforeを使用） */
button#btn-sonic-ripple::before,
.btn-sonic-ripple::before,
.btn-sonic-ripple .elementor-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20%; /* 左側から少しはみ出して配置 */
  width: 60%; /* ボタンの半分強を覆う */
  height: 100%;
  
  /* 白のグラデーションでガラスのような光沢と切り返しを表現 */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.5) 0%, 
    rgba(255, 255, 255, 0.05) 100%
  );
  
  /* 斜めに傾ける */
  transform: skewX(-20deg);
  
  z-index: 0; /* 背景色より上、波紋より下 */
  pointer-events: none;
}

/* 4. 波紋エフェクト（擬似要素 ::afterを使用） */
button#btn-sonic-ripple::after,
.btn-sonic-ripple::after,
.btn-sonic-ripple .elementor-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* 初期状態：完全に見えない状態にしておく */
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  
  /* 波紋の色（白の半透明） */
  background: rgba(255, 255, 255, 0.4);
  
  z-index: 5;
  pointer-events: none;
}

/* 5. ホバー時の挙動 */
button#btn-sonic-ripple:hover,
.btn-sonic-ripple:hover,
.btn-sonic-ripple .elementor-button:hover {
  /* ホバー時にドロップシャドウを追加 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35) !important;
  /* 色を濃く */
  background-color: #78C414 !important;
}

/* 6. ホバー時に波紋アニメーションを実行 */
button#btn-sonic-ripple:hover::after,
.btn-sonic-ripple:hover::after,
.btn-sonic-ripple .elementor-button:hover::after {
  animation: ripple-shot 0.6s ease-out forwards;
}


/* ==========================================================================
   ★ .white バージョン（緑背景用）
   クラスに "white" を追加した場合のスタイル上書き
   ========================================================================== */

/* 1. ボタン本体（白ベース） */
.btn-sonic-ripple.white,
.btn-sonic-ripple.white .elementor-button {
  background-color: #ffffff !important;
  color: #00500C !important;
}

/* 2. 切り返しエフェクト（白ボタン用は薄い緑で表現） */
.btn-sonic-ripple.white::before,
.btn-sonic-ripple.white .elementor-button::before {
  background: linear-gradient(
    120deg,
    rgba(120, 196, 20, 0.5) 0%, 
    rgba(120, 196, 20, 0.05) 100%
  );
}

/* 3. 波紋エフェクト（白ボタン用は緑の波紋） */
.btn-sonic-ripple.white::after,
.btn-sonic-ripple.white .elementor-button::after {
  background: rgba(120, 196, 20, 0.4);
}

/* 4. ホバー時の挙動（白ボタン用） */
.btn-sonic-ripple.white:hover,
.btn-sonic-ripple.white .elementor-button:hover {
  background-color: #f9f9f9 !important; /* ほんの少しグレーにして反応を示す */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  color: #00500C !important;
}


/* 波紋アニメーションの定義 */
@keyframes ripple-shot {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4; /* 開始時は濃く */
  }
  100% {
    width: 400px; /* ボタンを覆うサイズ */
    height: 400px;
    opacity: 0;   /* 終わりは透明 */
  }
}


/* ==========================================================================
   ボタンウィジェット、フォームウィジェットの
   ボタンのpadding設定
   ========================================================================== */

button#btn-sonic-ripple,
.elementor-button {
    padding: 20px 30px;
}