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

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

/* Youtube ビデオの最大幅 */
.video-container{
	max-width: 900px;
	margin: 0 auto;
}

/* 画像がビヨンと伸びるアニメ */
.anim-box.poyoyon2.is-animated img {
  animation: poyoyon2 2s ease-in-out infinite; /* 4秒のアニメーション */
}

@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 1;
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {
    transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  90% {
    transform: scale(1.0, 1.0) translate(0, 0);
    opacity: 1;
  }
  95% {
    opacity: 0; /* 画面から消える */
  }
  100% {
    opacity: 0; /* 消えたまま1秒間維持 */
  }
  0%, 90% {
    opacity: 1; /* アニメーションが通常の間、表示される */
  }
}
/* 画像がビヨンと伸びるアニメ ここまで */

/* カラム内のBuyNowボタンを中央に配置 */
.column-inside-center {
    display: flex;
    justify-content: center;  /* 横方向に中央揃え */
    align-items: center;      /* 縦方向に中央揃え */
}


/* Stripe 決済ボタンのデザイン変更 */
.stripe-button-el {
	border-radius: 30px !important;
	background-color: red !important;
	background-image: none !important;
	padding: 0px !important;

}

.stripe-button-el span {
	display: flex !important;
	align-items: center !important;
	background-image: none !important;
	background: red !important;
/* 	border-radius: px !important; */
	height: 60px !important;
	padding: 0 30px !important;
	font-size: 16px !important;
}
/* Stripe 決済ボタンのデザイン変更 ここまで */


.colorful_cover_inner {
	max-width: 1000px !important;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-cover{
	padding: 10px;
}


.margin_bottom_0 {
	margin-bottom:0px !important;
}



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

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

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