@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Righteous');
:root {
  --spread: .5em;
  --shift: .01em;
  --base: #c71585;
  --c1: #ff69b4;
  --c2: #9c63c7;
}

@-webkit-keyframes flicker1 {
  95% {
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--base), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 var(--spread) var(--base), 0 0 calc(var(--spread) / 1.5) var(--base);
  }
  98% {
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--c2), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 0 var(--base), 0 0 0 var(--base);
  }
}

@keyframes flicker1 {
  95% {
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--base), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 var(--spread) var(--base), 0 0 calc(var(--spread) / 1.5) var(--base);
  }
  98% {
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--c2), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 0 var(--base), 0 0 0 var(--base);
  }
}
@-webkit-keyframes flicker2 {
  90% {
    opacity: .7;
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--c2), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 0 var(--base), 0 0 0 var(--base);
  }
}
@keyframes flicker2 {
  90% {
    opacity: .7;
    text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--c2), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 0 var(--base), 0 0 0 var(--base);
  }
}


.header-image-caption h3 {
  font-family: 'Pacifico', cursive;
  font-weight: 100;
  margin: 0 0 .2em 0;
  font-size: 7em;
  letter-spacing: -.01em;
  color: transparent;
  text-shadow: 0 0 0.05em var(--c1), 0 0 0.1em var(--base), calc(var(--shift) * 1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * 1) calc(var(--shift) * -1) calc(var(--spread) / 50) var(--c1), calc(var(--shift) * -1) calc(var(--shift) * 1) calc(var(--spread) / 50) var(--c1), 0 0 var(--spread) var(--base), 0 0 calc(var(--spread) / 1.5) var(--base);
}
.header-image-caption h3 span:nth-child(1) {
  -webkit-animation: flicker1 1s infinite alternate ease-in-out;
          animation: flicker1 1s infinite alternate ease-in-out;
}
.header-image-caption h3 span:nth-child(2) {
  -webkit-animation: flicker1 1.5s infinite alternate ease-in-out;
          animation: flicker1 1.5s infinite alternate ease-in-out;
}
.header-image-caption h3 span:nth-child(3) {
  -webkit-animation: flicker1 .47s infinite alternate ease-in-out;
          animation: flicker1 .47s infinite alternate ease-in-out;
}
.header-image-caption h3 span:nth-child(4) {
  -webkit-animation: flicker2 3s infinite alternate ease-in-out;
          animation: flicker2 3s infinite alternate ease-in-out;
}

@media screen and (max-width: 800px){
	.header-image-caption h3{
		font-size:3.0em;
	}
}


/*===========ピンクのネオンはここまで==========*/

.neon {
  font-family: 'Fjalla One', sans-serif;
  display: inline-block;
  color: #00bfff;
  letter-spacing: .05em;
  font-size: 9em;
  letter-spacing: -.01em;
  text-shadow: 0 0 3px #1e90ff,0 0 2px #fff, 0 0 15px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF;
}
.neon > span {
  -webkit-animation: blink 3s infinite alternate;
  animation: blink 3s infinite alternate;
}
@-webkit-keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}
@keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}

@media screen and (max-width: 800px){
	.header-image-caption h4{
		font-size:3.0em;
	}
}



/*矢印*/
.neon-shadow{
	text-shadow: 0 0 10px #87ceeb, 0 0 15px #87ceeb, 0 0 30px #00bfff, 0 0 30px #00bfff, 0 0 30px #00bfff, 0 0 40px #00bfff;
}

/*ネオンの文字*/

.neon-header-text{
	color:#fff0f5;
	text-shadow:0 0 1px #ff66b8,0 0 5px #ffc0cb, 0 0 6px #ffc0cb, 0 0 7px #ff66b8, 0 0 8px #ff66b8, 0 0 12px #ff66b8;
	font-size:2.5em;
	font-family: 'Righteous', cursive;
}



/*--------------------
矢印用
-----------------------*/

.blinking{
	-webkit-animation:blink 2s ease-in-out infinite alternate;
    -moz-animation:blink 2s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    40% {opacity:.4;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    40% {opacity:.4;}
    100% {opacity:1;}
}
@keyframes blink{
    40% {opacity:.4;}
    100% {opacity:1;}
}