@charset "euc-jp";
/* CSS Document */


.headline {
 /* font-size: 3rem;*/
  text-align: center;
  margin-bottom: 20px;
  opacity: 0; 
}

.shine-line {
  position: relative;
  height: 3px;
  width: 0;
  margin: 0 auto;
  background:linear-gradient(to right, #ffc0cb, #ff69b4);
	display: block;
  animation: lineGrow 2s forwards;
}

.shine-line¡¡grd-org{
	position: relative;
  height: 3px;
  width: 0;
  margin: 0 auto;
background:linear-gradient(to right, #F2E768, #F57D7D);
	display: block;
  animation: lineGrow 2s forwards;
	}

.shine-line¡¡grd-sky{
		position: relative;
  height: 3px;
  width: 0;
  margin: 0 auto;
	background:linear-gradient(to right, #C0EBB9, #4D8BA7);
	display: block;
  animation: lineGrow 2s forwards;
}

@keyframes lineGrow {
  from { width: 0; }
  to { width: 80%; }
}

.shine-line::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  height: 12px;
  width: 30px;
  background: rgba(255, 255, 255, 0.9);
  transform: skewX(-20deg);
  animation: shine 2s forwards;
}

.shine-line¡¡grd-org::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  height: 12px;
  width: 30px;
  background: rgba(255, 255, 255, 0.9);
  transform: skewX(-20deg);
  animation: shine 2s forwards;
}

.shine-line¡¡grd-sky::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  height: 12px;
  width: 30px;
  background: rgba(255, 255, 255, 0.9);
  transform: skewX(-20deg);
  animation: shine 2s forwards;
}


@keyframes shine {
  from { left: 0; opacity: 0; }
  50% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}


.fadein {
  animation: fadeInUp 2s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
	
}

	.bluedots {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #f0fdff 5px, transparent 5px), radial-gradient(circle, #f0fdff 5px, transparent 5px);
  background-position: 0 0, 15px 30px;
  background-size: 30px 60px;
}

.pinkdots {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #ffdff1 5px, transparent 5px), radial-gradient(circle, #ffdff1 5px, transparent 5px);
  background-position: 0 0, 15px 30px;
  background-size: 30px 60px;
}