@charset "utf-8";
/* CSS Document */


/*========= フェードイン ===============*/

/*フェードイン*/

.fade_in {
    opacity: 0;
}

.fade_in_on {
    animation-name:fade_in;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_in{
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}


/*下から上にフェードイン*/

.fade_up_in {
    opacity: 0;
}

.fade_up_in_on {
    animation-name:fade_up_in_on;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_up_in_on{
from {
    transform: translateY(2rem);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}


/*ぼかしからフェードイン*/

.fade_in_blur {
    opacity: 0;
}

.fade_in_blur_on {
    animation-name:fade_in_blur;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_in_blur{
from {
    filter: blur(15px);
    opacity: 0;
}
to {
    filter: blur(0px);
    opacity: 1;
}
}

/*ぼかしから下から上にフェードイン*/

.fade_in_up_blur {
    opacity: 0;
}

.fade_in_up_blur_on {
    animation-name:fade_in_up_blur;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_in_up_blur{
from {
    transform: translateY(2rem);
    filter: blur(15px);
    opacity: 0;
}
to {
    transform: translateY(0rem);
    filter: blur(0px);
    opacity: 1;
}
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in{
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.slide-in_inner{
	display: inline-block;
    width: 100%;
}



/*ぼかしから左から右にフェードイン*/

.fade_in_left_blur {
    opacity: 0;
}

.fade_in_left_blur_on {
    animation-name:fade_in_left_blur;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_in_left_blur{
from {
    transform: translateX(-2rem);
    filter: blur(15px);
    opacity: 0;
}
to {
    transform: translateX(0rem);
    filter: blur(0px);
    opacity: 1;
}
}



/*左から右にフェードイン*/

.fade_in_left {
    opacity: 0;
}

.fade_in_left_on {
    animation-name:fade_in_left;
    animation-duration:1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fade_in_left{
from {
    transform: translateX(-2rem);
    opacity: 0;
}
to {
    transform: translateX(0rem);
    opacity: 1;
}
}


/*左→右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
    line-height: inherit;
    vertical-align: bottom;
}

.LeftRight_slideAnimeLeftRight {
	animation-name:LeftRight_slideTextX100;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-out;
    opacity: 0;
}



@keyframes LeftRight_slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
    filter: blur(15px);
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
    filter: blur(0px);
  }
}

.LeftRight_slideAnimeRightLeft {
	animation-name:LeftRight_slideTextX-100;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-out;
    opacity: 0;
}

@keyframes LeftRight_slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
    filter: blur(15px);
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
    filter: blur(0px);
  }
}




/*ロゴのきらめき*/
.collection_logo,
.bm_logo{
  will-change: filter;
  animation: logoGlowFloat 8s ease-in-out infinite alternate;
}

@keyframes logoGlowFloat {
  0% {
    filter:
      drop-shadow(-2px 2px 6px rgba(213,197,129,0.9))
      drop-shadow(-6px 6px 14px rgba(213,197,129,0.7))
      drop-shadow(-12px 12px 28px rgba(213,197,129,0.5))
      drop-shadow(0 0 12px rgba(255,235,150,0.9));
  }
  25% {
    filter:
      drop-shadow(2px -2px 6px rgba(213,197,129,0.9))
      drop-shadow(6px -6px 14px rgba(213,197,129,0.7))
      drop-shadow(12px -12px 28px rgba(213,197,129,0.5))
      drop-shadow(0 0 14px rgba(255,235,150,0.95));
  }
  50% {
    filter:
      drop-shadow(3px 1px 6px rgba(213,197,129,0.9))
      drop-shadow(8px 2px 16px rgba(213,197,129,0.7))
      drop-shadow(16px 4px 32px rgba(213,197,129,0.5))
      drop-shadow(0 0 18px rgba(255,235,150,1));
  }
  75% {
    filter:
      drop-shadow(-1px -3px 6px rgba(213,197,129,0.9))
      drop-shadow(-4px -8px 16px rgba(213,197,129,0.7))
      drop-shadow(-8px -16px 32px rgba(213,197,129,0.5))
      drop-shadow(0 0 16px rgba(255,235,150,0.95));
  }
  100% {
    filter:
      drop-shadow(1px 3px 6px rgba(213,197,129,0.9))
      drop-shadow(4px 8px 16px rgba(213,197,129,0.7))
      drop-shadow(8px 16px 32px rgba(213,197,129,0.5))
      drop-shadow(0 0 14px rgba(255,235,150,0.9));
  }
}



/* アニメーション　チカチカ */
.blink{
    animation: img_blink 4s ease infinite;
}

@keyframes img_blink {
  0% { opacity: 0.6; }
  10% { opacity: 0.8; }
  19% { opacity: 0.7; }
  25% { opacity: 0.8; }
  30% { opacity: 0.5; }
  38% { opacity: 0.6; }
  49% { opacity: 0.8; }
  60% { opacity: 0.6; }
  74% { opacity: 0.8; }
  87% { opacity: 0.7; }
  100% { opacity: 0.6; }
}
/* アニメーション　チカチカ */

/* アニメーション　チカチカ（細かいver） */
.blink2 {
  animation: img_blink2 2s linear infinite;
}

@keyframes img_blink2 {
  0%   { opacity: 0.6; }
  5%   { opacity: 0.9; }
  8%   { opacity: 0.6; }
  12%  { opacity: 0.8; }
  16%  { opacity: 0.5; }
  20%  { opacity: 0.9; }
  24%  { opacity: 0.6; }
  28%  { opacity: 0.3; }
  32%  { opacity: 0.8; }
  36%  { opacity: 0.5; }
  40%  { opacity: 0.9; }
  45%  { opacity: 0.6; }
  50%  { opacity: 0.9; }
  55%  { opacity: 0.6; }
  60%  { opacity: 0.7; }
  65%  { opacity: 0.8; }
  70%  { opacity: 0.5; }
  75%  { opacity: 0.9; }
  80%  { opacity: 0.6; }
  85%  { opacity: 0.9; }
  90%  { opacity: 0.5; }
  95%  { opacity: 0.8; }
  100% { opacity: 0.6; }
}
/* アニメーション　チカチカ（細かいver） */

/* アニメーション　星雲の幻想的な明暗 */
.nebula {
  animation: img_nebula 8s ease-in-out infinite;
}

@keyframes img_nebula {
  0%   { opacity: 0.55; }
  20%  { opacity: 0.68; }
  40%  { opacity: 0.62; }
  60%  { opacity: 0.78; }
  80%  { opacity: 0.64; }
  100% { opacity: 0.55; }
}
/* アニメーション　星雲の幻想的な明暗 */


.after-intro {
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 1.8s cubic-bezier(0.05, 0.7, 0.1, 1),
    filter 1.8s cubic-bezier(0.05, 0.7, 0.1, 1);
}

/* 表示状態 */
.after-intro.is-visible {
  opacity: 1;
  filter: blur(0);
}