@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){
  /*必要ならばここにコードを書く*/
}








/* --- 中央寄せ用の設定 --- */
.liquid-button-center-box {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* --- 以下、提示いただいたオリジナルを完全移植 --- */
.liquid-button {
  position: relative;
  padding: 15px 30px;
  font-size: 20px;
  color: #fff;
  background-color: #00bcd4;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 5px 15px rgba(0, 188, 212, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.liquid-button:hover {
  background-color: #007a8c;
}

.liquid-button::before,
.liquid-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.7s ease;
  border-radius: 40%;
  z-index: 0;
}

.liquid-button::before {
  background: rgba(255, 255, 255, 0.2);
  animation: wave 3s infinite linear;
}

.liquid-button::after {
  background: rgba(255, 255, 255, 0.1);
  animation: wave-reverse 2s infinite linear;
}

@keyframes wave {
  0% { transform: translate(-50%, -50%) scale(0.5); }
  50% { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes wave-reverse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.liquid-button span {
  position: relative;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: bubble-rise 4s infinite ease-in-out;
}

/* span(1)を避けた2〜7番目の指定 */
.bubble:nth-child(2) { width: 10px; height: 10px; left: 20%; animation-duration: 4s; }
.bubble:nth-child(3) { width: 15px; height: 15px; left: 35%; animation-duration: 5s; }
.bubble:nth-child(4) { width: 20px; height: 20px; left: 50%; animation-duration: 3.5s; }
.bubble:nth-child(5) { width: 12px; height: 12px; left: 65%; animation-duration: 4.5s; }
.bubble:nth-child(6) { width: 12px; height: 12px; left: 75%; animation-duration: 5.5s; }
.bubble:nth-child(7) { width: 12px; height: 12px; left: 85%; animation-duration: 6.5s; }

@keyframes bubble-rise {
  0% { bottom: -20px; opacity: 0; }
  50% { opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}