/*------------------------------------------------------------
　カスタマイズ （ブログカードを浮かせる）
------------------------------------------------------------*/
.blogcard {
 bottom: 0;
 transition: all 0.3s ease; /* ホバー時のトランジションを追加 */
}
.blogcard:hover {
 bottom: 4px; /* ホバー時に少し上に移動 */
 box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2); /* 影を作る */
 background-color: rgba(47, 79, 79, 0.5); /* ホバー時の背景色 */
}
.wp-block-cocoon-blocks-blogcard a:hover{
 opacity: initial; /* 透過を初期化 */
}

/*------------------------------------------------------------
　カスタマイズ （更新のタイミングで動作）
------------------------------------------------------------*/
.move img {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 5s;/* アニメーション時間 */
}

@keyframes RightToLeft {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(200px);/* Y軸方向に200px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}

/*------------------------------------------------------------
　カスタマイズ （画像を反射で光らせる）
------------------------------------------------------------*/
.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}

.reflection:after {
content:"";
height:100%;
width:60px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 5s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 5s ease-in-out infinite;
}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
90% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
91% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {    /*IE10以降対応*/
0% { transform: scale(0) rotate(45deg); opacity: 0; }
90% { transform: scale(0) rotate(45deg); opacity: 0.5; }
91% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/*------------------------------------------------------------
　カスタマイズ（ブルブル）jQueryとセット
------------------------------------------------------------*/
.buruburu.scrollin {display: inline-block;
                    animation: buruburu 1s 20;}
@keyframes buruburu {
    10% {transform: translateX(5px) rotate(3deg);}
    20% {transform: translateX(-5px) rotate(-3deg);}
    30% {transform: translateX(4px) rotate(2deg);}
    40% {transform: translateX(-4px) rotate(-2deg);}
    50% {transform: translateX(3px) rotate(1deg);}
    60% {transform: translateX(-3px) rotate(-1deg);}
    70% {transform: translateX(2px) rotate(1deg);}
    80% {transform: translateX(-2px) rotate(0deg);}
    90% {transform: translateX(1px) rotate(0deg);}
   100% {transform: translateX(-1px) rotate(0deg);}
}   

/*------------------------------------------------------------
　カスタマイズ（スクロール フェードイン）jQueryとセット
------------------------------------------------------------*/
/* 画面外にいる状態 */
.fadein          {opacity : 0.1;
                  transform : translate(0, 80px);
                  transition : all 900ms; }
/* 画面内に入った状態 */
.fadein.scrollin {opacity : 1;
                  transform : translate(0, 0); }


/* 画面外にいる状態 */
.fadein2         {opacity : 0.1;
                  transform : translate(0, 80px);
                  transition : all 1800ms; }
/* 画面内に入った状態 */
.fadein2.scrollin {opacity : 1;
                   transform : translate(0, 0); }

/*------------------------------------------------------------
　カスタマイズ（スクロール スライドイン）jQueryとセット
------------------------------------------------------------*/

/* 画面外にいる状態 */
.slide-rl {opacity: 0;
           transform: translate(100px, 0);/* 右左スライド */
           transition: all 900ms;}
/* 画面内に入った状態 */ 
.slide-rl.scrollin {opacity: 1;
                    transform: none;}

/* 画面外にいる状態 */
.slide-lr {opacity: 0;
           transform: translate(-100px, 0);/* 左右スライド */
           transition: all 900ms;}
/* 画面内に入った状態 */ 
.slide-lr.scrollin {opacity: 1;
                    transform: none;}

/*------------------------------------------------------------
　カスタマイズ（画像自動切換え）
------------------------------------------------------------*/
.effect-box{
  position: relative;
  height: 400px;
  overflow: hidden;
}
.effect-box-img1, .effect-box-img2, .effect-box-img3, .effect-box-img4{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  animation: effect 20s infinite;
  opacity: 0;
}
.effect-box .effect-box-img1 {animation-delay: 0s;}
.effect-box .effect-box-img2 {animation-delay: 5s;}
.effect-box .effect-box-img3 {animation-delay: 10s;}
.effect-box .effect-box-img4 {animation-delay: 15s;}

@keyframes effect{
    0% { opacity: 0; }
   15% { opacity: 1; }
   25% { opacity: 1; }
   35% { opacity: 0; }
  100% { opacity: 0; }
}