/*===========================================================================
module
共通利用する最小パーツ用CSS
接頭辞【.m-】

【予測変換用 _base.css記述】
:root {
	--font-color-base: #000;
	--font-family-base: "Noto Sans JP", sans-serif;
	--back-color-base: #fff;
	--design-size-pc: 1400;
	--design-size-sp: 750;
}
===========================================================================*/
.m-btn {
	display: inline-block;
	position: relative;
	z-index: 0;
	max-width: 600rem;
	width: 100%;
	padding: 40rem 0;
	border: solid 4px #fff;
	border-radius: 80rem;
	box-shadow: 0 10rem 0 0 rgba(0, 0, 0, 0.16);
	background-image: linear-gradient(0deg,
			#45d400 0%,
			#45d409 22%,
			#48d722 57%,
			#00bf1c 87%,
			#1aaa00 100%);
	text-decoration: none;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: playButton;
	animation-play-state: running;
	animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	overflow: hidden;
}

.m-btn::before,
.m-btn::after {
	content: "";
	display: block;
	position: absolute;
}

.m-btn::before {
	top: 10rem;
	left: 30rem;
	z-index: -1;
	width: calc(100% - 62rem);
	height: 74rem;
	border-radius: 36.5rem;
	background-image: linear-gradient(0deg, #45d400 0%, #beea8a 100%);
}

.m-btn::after {
	top: 0;
	left: -75%;
	transform: skewX(-25deg);
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: shineButton;
	animation-play-state: running;
	animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}

.m-btn:hover {
	animation: none;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	animation-name: playButtonHover;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.m-btn:hover::after {
	animation: none;
}

.m-btn .txt {
	display: block;
	position: relative;
	height: 38rem;
	background: no-repeat url(../../images/free_play.svg) center / contain;
	font-size: 0;
	text-align: center;
}

.m-btn .txt::before,
.m-btn .txt::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/* .m-btn .txt::before {
  background: no-repeat url(../../images/master_hand.svg) center / contain;
  left: 3rem;
  width: 42rem;
  height: 32rem;
	z-index: 10000;
} */
.m-btn .txt::after {
	background: no-repeat url(../../images/free_play_arrow.svg) center / contain;
	right: 42rem;
	width: 24rem;
	height: 36rem;
}

.m-btn .txt>img {
	width: auto;
	height: 100%;
	vertical-align: top;
}

.u-cta__btn-wrap {
	position: relative;
	width: 100%;
}

.u-cta__btn-wrap::after {
	content: "";
	display: block;
	position: absolute;
	top: -12rem;
	background: no-repeat url(../../images/master_hand.svg) center / contain;
	left: -10rem;
	width: 64rem;
	height: 48rem;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: playButton;
	animation-play-state: running;
	animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
}



/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
	.m-btn {
		min-width: initial;
		width: 100%;
		padding: 23rem 26rem;
		border-radius: 40rem;
	}

	.m-btn::before {
		top: 4rem;
		left: 15rem;
		z-index: -1;
		width: calc(100% - 29rem);
		height: 35rem;
		border-radius: 17.5rem;
		background-image: linear-gradient(0deg, #45d400 0%, #beea8a 100%);
	}

	.m-btn .txt {
		display: block;
		position: relative;
		height: 26rem;
		background: no-repeat url(../../images/free_play.svg) center / contain;
		font-size: 0;
		text-align: center;
	}

	.m-btn .txt::before,
	.m-btn .txt::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.m-btn .txt::before {
		left: 0;
		/* ↓必要なら復活（元コードでコメントアウトされてた） */
		/* background: no-repeat url(../../images/master_hand.svg) center / contain;
       width: 42rem;
       height: 32rem;
       z-index: 10000; */
	}

	.m-btn .txt::after {
		right: -10rem;
		background: no-repeat url(../../images/free_play_arrow.svg) center / contain;
		width: 13rem;
		height: 20rem;
	}

	.m-btn .txt>img {
		width: auto;
		height: 100%;
		vertical-align: top;
	}

	.u-cta__btn-wrap::after {
		content: "";
		display: block;
		top: -12rem;
		left: -10rem;
		width: 42rem;
		height: 32rem;
	}
}

/* animation keyframes
----------------------------------*/
@keyframes playButton {
	0% {
		transform: scale(1);
	}

	5% {
		transform: scale(0.95);
	}

	12.5% {
		transform: scale(1.05, 1.055);
	}

	20% {
		transform: scale(0.975);
	}

	27.5% {
		transform: scale(1.025);
	}

	35.5% {
		transform: scale(1);
	}

	to {
		transform: scale(1);
	}
}

@keyframes shineButton {
	0% {
		left: -75%;
	}

	35.5% {
		left: 125%;
	}

	to {
		left: 125%;
	}
}

@keyframes playButtonHover {
	0% {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}