/* カスタム CSS をここに入力してください */

/* ──────────────────────────────────────── */

/* ボタン */

/* ──────────────────────────────────────── */

div.btn-wrap {
	margin: 0 auto 3.5rem;
	font-size: 0;
}

div.btn-wrap p.btn-text-top {
	margin: 0 auto;
	text-align: center;
	font-size: 0.85rem;
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
}

div.btn-wrap p.btn-text-bottom {
	text-align: center;
	font-size: 0.85rem;
	white-space: nowrap;
	text-overflow: clip;  /* overflow: hidden; */
	z-index: 100;
	position: relative;
	animation-name: fuwafuwa1;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@keyframes fuwafuwa1 {
	0% {
		transform: translateY(0);
	}

	5% {
		transform: translateY(3px);
	}

	10% {
		transform: translateY(0);
	}

	15% {
		transform: translateY(3px);
	}

	20% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(0);
	}

}

div.rankst-box p.btn-text-bottom {
	text-align: center;
	font-size: 0.85rem;
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
	z-index: 100;
	position: absolute;
	bottom: -48px;
	left: 50.8%;
	margin: 0;
	box-shadow: none;
	text-shadow: none;
	transform: translate(-50%, 0);
	animation-name: fuwafuwa2;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@keyframes fuwafuwa2 {
	0% {
		transform: translate(-50%, 0);
	}

	5% {
		transform: translate(-50%, 3px);
	}

	10% {
		transform: translate(-50%, 0);
	}

	15% {
		transform: translate(-50%, 3px);
	}

	20% {
		transform: translate(-50%, 0);
	}

	100% {
		transform: translate(-50%, 0);
	}

}

div.rankst-box p.btn-text-bottom:hover {
	box-shadow: inherit;
	top: inherit;
}

@media only screen and (max-width:960px) {
	div.rankst-box p.btn-text-bottom {
		width: 100%;
	}

}

@media only screen and (max-width:650px) {
	div.rankst-box p.btn-text-bottom {
		bottom: -34px;
	}

}

div.btn-wrap .btn-link+p.btn-text-bottom {
	margin: -7px auto -17px;
}

div.btn-wrap p.btn-link:hover+p.btn-text-bottom {
	margin: -6px auto -17px;
}

div.btn-wrap .btn-twin+p.btn-text-bottom {
	margin: -15px auto -10px;
}

@media only screen and (max-width:400px) {
	div.btn-wrap .btn-link+p.btn-text-bottom {
		margin: -4px auto -14px;
	}

	div.btn-wrap .btn-twin+p.btn-text-bottom {
		margin: -12px auto -7px;
	}

}

div.btn-wrap p.btn-text-bottom span, div.rankst-box p.btn-text-bottom span {
	color: #ff0000;
	background-color: #fff;
	padding: 5px 12px 4px;
	border: 1px solid #ddd;
	border-radius: 30px;
	line-height: 4;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
	position: relative;
}

div.rankst-box p.btn-text-bottom span {
	padding: 5px 8px 4px;
}

@media only screen and (max-width:400px) {
	div.btn-wrap p.btn-text-bottom span, div.rankst-box p.btn-text-bottom span {
		padding: 5px 8px 4px;
	}

}

div.btn-wrap p.btn-text-bottom span::before, div.rankst-box p.btn-text-bottom span::before {
	content: '';
	position: absolute;
	top: -19px;
	left: 50%;
	margin-left: -8px;
	border-style: solid;
	border-color: transparent transparent #ddd transparent;
	border-width: 8px 8px 10px 8px;
}

div.btn-wrap p.btn-text-bottom span::after, div.rankst-box p.btn-text-bottom span::after {
	content: '';
	position: absolute;
	top: -17px;
	left: 50%;
	margin-left: -8px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	border-width: 8px 8px 10px 8px;
}

.redbox div.btn-wrap {
	margin: 0 auto 2.5rem;
}

div.btn-wrap p.btn-link {
	background: #4caf50;
	text-align: center;
	border-radius: 7px;
	margin: 0 auto 2px;
	box-shadow: 0 3px 0 #139818, 0 1px 0 #83ca86 inset;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	max-width: 560px;
	position: relative;
}

div.btn-wrap p.btn-link:hover {
	opacity: 0.85;
	margin: 1px auto -1px;
	box-shadow: 0 2px 0 #139818, 0 1px 0 #83ca86 inset;
}

div.btn-wrap p.btn-link:active {
	box-shadow: 0 0;
	margin: 3px auto -3px;
}

div.btn-wrap p.btn-link a {
	color: #fff;
	display: block;
	padding: 12px 0;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .3);
	text-decoration: none;
	position: relative;
}

div.btn-wrap .btn-twin {
	max-width: 560px;
	margin: 0 auto;
	z-index: 99;
	position: relative;
}

div.btn-wrap .btn-twin .btn-link {
	font-size: 20px;
	border-radius: 6px;
	max-width: inherit;
	position: relative;
}

div.btn-wrap .btn-twin.first .btn-link {
	margin: 0 auto 10px;
}

div.btn-wrap .btn-twin.second .btn-link {
	background-color: #039BE6;
	box-shadow: 0 3px 0 #047eb9, 0 1px 0 #8bd5f9 inset;
}

div.btn-wrap .btn-twin.first .btn-link:hover {
	position: relative;
	top: 1px;
	box-shadow: 0 2px 0 #139818, 0 1px 0 #83ca86 inset;
}

div.btn-wrap .btn-twin.second .btn-link:hover {
	position: relative;
	top: 1px;
	box-shadow: 0 2px 0 #047eb9, 0 1px 0 #8bd5f9 inset;
	margin: 0 auto;
}

div.btn-wrap .btn-twin.first .btn-link:active {
	box-shadow: 0 0;
	position: relative;
	top: 3px;
}

div.btn-wrap .btn-twin.second .btn-link:active {
	box-shadow: 0 0;
	position: relative;
	top: 3px;
	margin: 0 auto;
}

div.btn-wrap .btn-twin p.btn-link a {
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
	position: relative;
}

/* ボタンに右横矢印 */
div.btn-wrap .btn-twin.first p.btn-link a::after, div.btn-wrap>p.btn-link a::after {
	content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	position: absolute;
	right: 18px;
	top: 50%;
	margin-top: -6px;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	animation-name: arrowAction;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@keyframes arrowAction {
	0% {
		right: 18px;
	}

	5% {
		right: 15px;
	}

	10% {
		right: 18px;
	}

	15% {
		right: 15px;
	}

	20% {
		right: 18px;
	}

	100% {
		right: 18px;
	}

}


.btn-wrap p.text-link {
	text-align: center;
	margin: 0;
	position: relative;
	z-index: 101;
}

.text-link a {
	font-size: 14px;
	position: relative;
	line-height: 1.5;
	margin: 0 -16px 0 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.btn-wrap p.text-link a::before {
	content: "";
	position: absolute;
	top: 2px;
	left: -21px;
	z-index: 1;
	width: 15px;
	height: 15px;
	background-color: #217ec6;
	border-radius: 50%;
}

.btn-wrap p.text-link a::after {
	content: "";
	position: absolute;
	top: 5px;
	left: -15px;
	z-index: 2;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 4px 4px 4px 5px;
}

@media only screen and (max-width:400px) {
	div.btn-wrap p.btn-link, div.btn-wrap .btn-twin .btn-link {
		font-size: 4.8vw;
	}

	div.btn-wrap p.btn-text-top, div.btn-wrap p.btn-text-bottom {
		font-size: 0.75rem;
	}

	div.btn-wrap .btn-twin.first p.btn-link a::after {
		content: none;
	}

}

@media only screen and (max-width:450px) {
	div.btn-wrap>p.btn-link a::after, div.btn-wrap>p.btn-link::after, div.btn-wrap .btn-twin.first .btn-link::after {
		content: none;
	}

}

@media only screen and (max-width:650px) {
	div.btn-wrap .btn-twin {
		width: 100%;
	}

}

/* @media only screen and (min-width:960px) {
div.btn-wrap .btn-twin .btn-link {
font-size: 1.7vw;
}
}

@media only screen and (min-width:1061px) {
div.btn-wrap .btn-twin .btn-link {
font-size: 18px;
}
} */

/* ボタンを光らせる */

.is-reflection a {
	overflow: hidden;
}

.is-reflection a::before {
	background-color: #fff;
	content: " ";
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: -180px;
	transform: rotate(45deg);
	width: 30px;
	animation-name: reflectionAnim;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.3s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

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

	90% {
		transform: scale(0) rotate(45deg);
		opacity: 0.2;
	}

	91% {
		transform: scale(4) rotate(45deg);
		opacity: 0.5;
	}

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

}

div.btn-wrap p.btn-link.is-jump {
	max-width: inherit;
}

div.btn-wrap p.btn-link.is-jump a {
	padding: 12px 15px 10px 15px;
}

@media only screen and (max-width:450px) {
	div.btn-wrap p.btn-link.is-jump a {
		padding: 12px 12px 12px 12px;
	}

}

div.btn-wrap p.btn-link.is-jump a:hover {
	margin: 41px auto -1px;
}

div.btn-wrap p.btn-link.is-jump a:active {
	margin: 43px auto -3px;
}

div.btn-wrap p.btn-link.is-jump a::after {
	content: none;  /* right: 12px;
	top: 50%;
	margin-top: -6px;
	border-top: solid 15px #fff;
	border-right: solid 10px transparent;
	border-bottom: solid 0px transparent;
	border-left: solid 10px transparent;
	-webkit-transform: rotate(0);
	transform: rotate(0);
	width: 0;
	height: 0;
	animation-name: arrowJumpAction;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal; */
}

/* @keyframes arrowJumpAction {
0% {
  top: 50%;
}

5% {
  top: 54%;
}

10% {
  top: 50%;
}

15% {
  top: 54%;
}

20% {
  top: 50%;
}

100% {
  top: 50%;
}
} */

/* ──────────────────────────────────────── */

/* ボタンここまで */

/* ──────────────────────────────────────── */