@charset "utf-8";

/* 動くグラデーション背景 */
.graR {
	background: linear-gradient(-45deg, #ffd415,  #ff0f07) fixed;
	background-size: 800% 800%;
	animation: GradietionAnimation 3s ease infinite;
}

@keyframes GradietionAnimation {
	0% {
		background-position: 0% 50%
	}

	50% {
		background-position: 100% 50%
	}

	100% {
		background-position: 0% 50%
	}
}
/* 動くグラデーション背景 */



/* ネオンテキスト */
.neonText {
	animation: orange 3.5s infinite alternate;
	color: #fff784;
}

/* Flickering animation */
@keyframes orange {

	0%,
	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
			0 0 4px #ff6600,
			0 0 11px #ff6600,
			0 0 19px #ff6600,
			0 0 20px #ffc402,
			0 0 40px #ffc402,
			0 0 50px #ffc402,
			0 0 60px #ffc402;
	}

	20%,
	24%,
	55% {
		text-shadow: none;
	}
}

.neonText2 {
	animation: white 3.5s infinite alternate;
	color: #ffffff;
}

/* Flickering animation */
@keyframes white {

	0%,
	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
			0 0 4px #2b2b2b,
			0 0 11px #2b2b2b,
			0 0 19px #2b2b2b,
			0 0 20px #ffffff,
			0 0 40px #ffffff,
			0 0 50px #ffffff,
			0 0 60px #ffffff;
	}

	20%,
	24%,
	55% {
		text-shadow: none;
	}
}
.neonText3 {
	animation: orange 3.5s infinite alternate;
	color: #fff784;
}

/* Flickering animation */
@keyframes orange {

	0%,
	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
			0 0 4px #ff6600,
			0 0 11px #ff6600,
			0 0 19px #ff6600,
			0 0 20px #ffc402,
			0 0 40px #ffc402,
			0 0 50px #ffc402,
			0 0 60px #ffc402;
	}

	20%,
	24%,
	55% {
		text-shadow: none;
	}
}

/* ネオンテキスト */


/* きらりテキスト */
.red_star {
	position: relative;
	background-image: linear-gradient(70deg,
			rgba(224, 1, 1, 0.849) 40%,
			#ffb5b5 50%,
			rgba(224, 1, 1, 0.849) 60%);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

.gold_star {
	position: relative;
	background-image: linear-gradient(70deg,
			rgba(34, 34, 34, 0.849) 40%,
			#ff3d3d 50%,
			rgba(37, 37, 37, 0.849)60%);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

.gold_star2 {
	position: relative;
	background-image: linear-gradient(70deg,
			rgba(255, 153, 0, 0.849) 40%,
			#ffffff 50%,
			rgba(255, 153, 0, 0.849) 60%);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

.yellow_star {
	position: relative;
	background-image: linear-gradient(70deg,
			rgba(255, 240, 31, 0.849) 45%,
			#f7ff87 50%,
			rgba(255, 240, 31, 0.849) 55%);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

.yellow_star2 {
	position: relative;
	background-image: linear-gradient(70deg,
			rgb(255, 238, 0) 45%,
			#ffffff 50%,
			rgb(255, 238, 0) 55%);
	background-size: 500% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: shine 2s infinite;
}

@keyframes shine {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* きらりテキスト */


.blinking {
	-webkit-animation: blink 2.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink {
	0% {
		opacity: 1;
	}

	4% {
		opacity: 0.6;
	}

	8% {
		opacity: 1;
	}

	70% {
		opacity: 1;
	}

	72% {
		opacity: 0.6;
	}

	74% {
		opacity: 1;
	}
}

.blinking2 {
	animation: tikatika 2s step-end infinite;
}

@keyframes tikatika {
	0% {
		opacity: 1;
	}

	85% {
		opacity: 0.7;
	}

	90% {
		opacity: 1;
	}

	95% {
		opacity: 0.7;
	}

	100% {
		opacity: 1;
	}
}

.fadeIn {
	animation: fadeIn 3s ease 0s 1 normal;
}

/* fadeIn */
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
	}
}

.fadeInLeft {
	animation: fadeInLeft 1s ease 0s 1 normal;
}

/* fadeInLeft */
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
	}
}

.flash2 {
	animation: flash 1.5s linear infinite;
}

@keyframes flash {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.zoomIn {
	animation: zoomIn 1.0s ease 0s 1 normal;
}

/* zoomIn */
@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale3d(0.3, .3, 0.3)
	}

	50% {
		opacity: 1
	}
}


.zoomFade {
	animation: zoomFade 2s ease-in-out infinite;
}

/* zoomFade */
@keyframes zoomFade {
	0% {
		transform: scaleX(1)
	}

	50% {
		transform: scale3d(1.05, 1.05, 1.05)
	}

	to {
		transform: scaleX(1)
	}
}

.heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
	from {
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}

	17% {
		transform: scale(0.98);
		animation-timing-function: ease-out;
	}

	45% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}



.shivering {
	animation: shivering 2s linear infinite;
}

/* shivering */
@keyframes shivering {

	0%,
	7% {
		transform: rotateZ(0);
	}

	15% {
		transform: rotateZ(-4deg);
	}

	20% {
		transform: rotateZ(4deg);
	}

	25% {
		transform: rotateZ(-2.5deg);
	}

	30% {
		transform: rotateZ(3deg);
	}

	35% {
		transform: rotateZ(-2deg);
	}

	40%,
	100% {
		transform: rotateZ(0);
	}
}

.float {
	animation: float 6s ease-in-out infinite;
}

/* float */
@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}

	50% {
		box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
		transform: translatey(-20px);
	}

	100% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
}

/* カウントダウン */
input[type="datetime-local"] {
	border: none;
	font-size: 16px;
	padding: 8px 12px;
	text-align: center;
	margin: 0 auto;
}

.countdown-wrapper {
	text-align: center;
	align-items: flex-end;
	background-color: rgb(0, 0, 0);
	border: 3px double rgba(198, 23, 23, 0.843);
	display: flex;
	padding: 12px 16px;
	margin: 0 auto;
	max-width: 800px;


	&>.time {
		text-align: center;
		margin: 0 auto;
		border-radius: 8px;
		font-size: 24px;
		font-weight: bold;
		line-height: 1;
		min-width: 48px;
		min-height: 48px;
		display: grid;
		place-items: center;
		padding: 4px;
	}

	&>.unit {
		text-align: center;
		margin: 0 auto;
		color: brown;
	}
}

/* カウントダウン */


.buruburu {
	display: inline-block;
	animation: hurueru .1s infinite;
}

@keyframes hurueru {
	0% {
		transform: translate(0px, 0px) rotateZ(0deg)
	}

	25% {
		transform: translate(1px, 1px) rotateZ(0deg)
	}

	50% {
		transform: translate(0px, 1px) rotateZ(0deg)
	}

	75% {
		transform: translate(1px, 0px) rotateZ(0deg)
	}

	100% {
		transform: translate(0px, 1px) rotateZ(0deg)
	}
}

.buruburu2 {
	-webkit-animation: buruburu2 0.1s infinite linear alternate;
	animation: buruburu2 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu2 {
	0% {
		-webkit-transform: translate(0, 0) rotate(-3deg);
	}

	50% {
		-webkit-transform: translate(0, -1px) rotate(0deg);
	}

	100% {
		-webkit-transform: translate(0, 0)rotate(3deg);
	}
}

@keyframes buruburu2 {
	0% {
		transform: translate(0, 0) rotate(-3deg);
	}

	50% {
		transform: translate(0, -1px) rotate(0deg);
	}

	100% {
		transform: translate(0, 0)rotate(3deg);
	}
}

.shine-and-vib {
	display: block;
	position: relative;
	overflow: hidden;
	transition: 1s;
	animation: vib 3s linear infinite;

	&::before {
		position: absolute;
		content: '';
		display: inline-block;
		top: -180px;
		left: 0;
		width: 30px;
		height: 100%;
		background-color: #fff;
		transition: 300ms;
		animation: shine 2.5s ease-in-out infinite;
	}

	@-webkit-keyframes shine {
		0% {
			-webkit-transform: scale(0) rotate(45deg);
			opacity: 0;
		}

		80% {
			-webkit-transform: scale(0) rotate(45deg);
			opacity: 0.5;
		}

		81% {
			-webkit-transform: scale(4) rotate(45deg);
			opacity: 1;
		}

		100% {
			-webkit-transform: scale(50) rotate(45deg);
			opacity: 0;
		}
	}

	@-webkit-keyframes vib {
		0% {
			transform: translate(0);
		}

		20% {
			transform: translate(0);
		}

		22% {
			transform: translate(2px) rotate(2deg);
		}

		24% {
			transform: translate(0, 0);
		}

		26% {
			transform: translate(-2px) rotate(-2deg);
		}

		28% {
			transform: translate(0);
		}

		30% {
			transform: translate(2px) rotate(2deg);
		}

		32% {
			transform: translate(0);
		}

		100% {
			transform: translate(0);
		}
	}
}

.fuwafuwa {
	animation: fuwafuwa 3s linear infinite;
}

/* fuwafuwa */
@keyframes fuwafuwa {
	0% {
		transform: translateY(0)
	}

	33.33333% {
		transform: translateY(15px)
	}

	66.66667% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(0)
	}
}

.animate73,
.a-option73,
.a-btnsub73 {
	-webkit-animation-timing-function: ease-in;
	-moz-animation-timing-function: ease-in;
	-o-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

a.a-btn {
	position: relative;
	display: inline-block;
	margin: auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

a.a-btn img {
	display: block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

img.a-main {
	width: 100%;
	position: relative;
	z-index: 54;
}

@-moz-keyframes animate73 {
	0% {
		-moz-transform: scale(0.92);
	}

	40% {
		-moz-transform: scale(0.97);
	}

	100% {
		-moz-transform: scale(0.92);
	}
}

@-o-keyframes animate73 {
	0% {
		-o-transform: scale(0.92);
	}

	40% {
		-o-transform: scale(0.97);
	}


	100% {
		-o-transform: scale(0.92);
	}
}

@-webkit-keyframes animate73 {
	0% {
		-webkit-transform: scale(0.92);
	}

	40% {
		-webkit-transform: scale(0.97);
	}

	100% {
		-webkit-transform: scale(0.92);
	}
}

@keyframes animate73 {
	0% {
		transform: scale(0.92);
	}

	40% {
		transform: scale(0.97);
	}

	100% {
		transform: scale(0.92);
	}
}

.animate73 {
	-webkit-animation-name: animate73;
	-moz-animation-name: animate73;
	-o-animation-name: animate73;
	animation-name: animate73;
}

.a-btn73 {
	padding-left: 0% !important;
}

.a-option73 {
	top: 0% !important;
}

.a-option73 {
	width: 20% !important;
}

.a-btn73 {
	max-width: 100% !important;
}

.animate73,
.a-btnsub73,
.a-option73 {
	animation-duration: 1s !important;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-moz-animation-duration: 1s !important;
}



/* <!-- スクロール時に要素が画面内に入ったらアニメーションを適用 --> */
.fadein {
	opacity: 0;
	transform: translate(0, 0);
	transition: all 1.5s;

	&.fadein-left {
		transform: translate(-30px, 0);
	}

	&.fadein-right {
		transform: translate(30px, 0);
	}

	&.fadein-up {
		transform: translate(0, -30px);
	}

	&.fadein-bottom {
		transform: translate(0, 30px);
	}

	&.scrollin {
		opacity: 1 !important;
		transform: translate(0, 0) !important;
	}
}

/*******************gk-box 光る**************************/

@keyframes shine {
  0%   { left: -120%; opacity: 0; }
  10%  { left: -100%; opacity: 1; }
  50%  { left: 100%;  opacity: 1; }
  60%  { left: 120%;  opacity: 0; }
  100% { left: 120%;  opacity: 0; }
}
/*******************カウントダウン**************************/