@charset "UTF-8";

/* エフェクト要素--------------------------------- */
.ripple__effect {
    /* 値の変更はエフェクト形体・サイズ・スピードに影響する */
    width: 100%;
    height: 100%;

    position: absolute;
    border-radius: 100%;
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
    z-index: 9000;
}

.content_splash {
	overflow: hidden;
    position: relative;
    z-index: 9999;
}

.splash-title_logo_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
    z-index: 10000;
    opacity: 1;
}

.content_splash_start {
    width: 100%;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    background-color: red;
    z-index: 9999;
    top:0;
    mask-image: circle(100px at center);
}

/* エフェクト要素の色を指定 */
.ripple__effect.is-red     { background: red;}
.ripple__effect.is-blue    { background: #4aa3df;}
.ripple__effect.is-yellow  { background: rgb(222,247,100);}
.ripple__effect.is-lyellow { background: rgb(189,252,155);}
.ripple__effect.is-rgreen  { background: rgb(110,253,182);}
.ripple__effect.is-rblue   { background: rgb(141,255,255);}
.ripple__effect.is-lblue   { background: rgb(105,153,254);}
.ripple__effect.is-pink    { background: rgb(235,101,231);}

/* classが付与されたらアニメーションを実行 */
.ripple__effect.is-show {
    animation: ripple 2s;
    animation-fill-mode: forwards;
}

.ripple__effect_in.is-show {
    animation: ripple_out 1s;
    animation-fill-mode: forwards;
}

#content_splash_open.is-show2 {
    animation: fadeOut 1s;
}

#content_splash_end.is-show {
    animation: fadeIn 0.5s;
    animation-fill-mode: forwards;
    animation-duration: 4s;
}

.ripple__effect.is_show1 {
    animation-duration: 0.2s;
} 

.ripple__effect.is_show2 {
    animation-duration: 0.4s;
} 

.ripple__effect.is_show3 {
    animation-duration: 0.6s;
} 

.ripple__effect.is_show4 {
    animation-duration: 0.8s;
} 

.ripple__effect.is_show5 {
    animation-duration: 1.2s;
} 

.ripple__effect.is_show6 {
    animation-duration: 1.4s;
} 

.ripple__effect.is_show_end {
    animation-duration: 1.5s;
}

/* アニメーションの定義 */
@keyframes ripple {
    from {
        opacity: 0;
    }
    to {
        transform: scale(5);
        opacity: 1;
    }
}

.open_animation {
  animation: open_animation 1s cubic-bezier(.4, 0, .2, 1);
}

@keyframes open_animation {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }
  
  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}