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

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

.loader-bg {
  background-color: #f8ffff;
  height: 100vh;
  width: 100vw;
  place-content: center;
  position: fixed;
  top: 0;
  z-index: 9999;
  transition: opacity 1000ms ease, visibility 1000ms ease;
  opacity: 1; /* 初期状態：表示 */
  visibility: visible;
  transition-delay: 4000ms;
  transition-property: opacity, visibility;
}

.loader-bg.hidden {
  opacity: 0; /* フェードアウト */
  visibility: hidden;
}

.ripple {
  position: fixed;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  top: 0;
  display: block;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  z-index: -100;
}

/* ripple-effect */

.ripple-effect {
  position: absolute;
  display: inline-block;
  border-radius: 100%;
  border: 10px #f8ffff double;
  animation: ripple-effect 800ms cubic-bezier(0, 0, 0, 1.0) backwards;
  pointer-events: none;
  z-index: -100;
  background-color: #f8ffff;
}

@keyframes ripple-effect {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* loading-effect */

.cls-1{
  stroke: #0097dc;
  stroke-dasharray: 2500;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: hello 3500ms ease-in 0s;
  animation: hello 3500ms ease-in 0s;
}

  @-webkit-keyframes hello {
      0% {
        stroke-dashoffset: 2500;
        fill: transparent;
      }
      20% {
        stroke-dashoffset: 2500;
        fill: transparent;
      }
      60% {
        fill: transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill: #0097dc;
      }
    }

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

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

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