@charset "utf-8";

/* SVGハートアイコン */
.heart_icon {
	transform: translate(60px, 60px);
	-webkit-transform: translate(60px, 60px);
	transform-box: fill-box;
	-webkit-transform-box: fill-box;
}

.heart_storke_wrap {
	transform: translate(-185px, -302px);
	-webkit-transform: translate(-185px, -302px);
	transform-box: fill-box;
	-webkit-transform-box: fill-box;
}

.heart_storke {
	stroke-width: 3px;
	fill-rule: evenodd;
}

.heart_contents {
	transform: translate(-185px, -302px);
	-webkit-transform: translate(-185px, -302px);
	transform-box: fill-box;
	-webkit-transform-box: fill-box;
}

/* ハートの中身の色のアニメーション */
.heart_contents.anim {
	animation-name: fillAnim;
	-webkit-animation: fillAnim;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes fillAnim {
	0% {
		fill: #fff;
	}

	30% {
		fill: #fff;
	}

	31% {
		fill: #fa6866;
	}

	60% {
		fill: #fa6866;
	}

	100% {
		fill: #fa6866;
	}
}

@-webkit-keyframes fillAnim {
	0% {
		fill: #fff;
	}

	30% {
		fill: #fff;
	}

	31% {
		fill: #fa6866;
	}

	60% {
		fill: #fa6866;
	}

	100% {
		fill: #fa6866;
	}
}

.heart_wrap {
	transform-box: fill-box;
	-webkit-transform-box: fill-box;
}

/* ハートのバウンドアニメーション */
.heart_wrap.anim {
	animation-name: anim;
	-webkit-animation-name: anim;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	transform-origin: center;
	-webkit-transform-origin: center;
}

@keyframes anim {
	0% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
	}

	30% {
		transform: scale(0.5, 0.5);
		-webkit-transform: scale(0.5, 0.5);
	}

	60% {
		transform: scale(1.5, 1.5);
		-webkit-transform: scale(1.5, 1.5);
	}

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

@-webkit-keyframes anim {
	0% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
	}

	30% {
		transform: scale(0.5, 0.5);
		-webkit-transform: scale(0.5, 0.5);
	}

	60% {
		transform: scale(1.5, 1.5);
		-webkit-transform: scale(1.5, 1.5);
	}

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

.dot {
	stroke-dasharray: 1 11;
	transform: scale(0.4, 0.4);
	-webkit-transform: scale(0.4, 0.4);
	transform-origin: center;
	-webkit-transform-origin: center;
	transform-box: fill-box;
	-webkit-transform-box: fill-box;
}

/* ハートの周りの線のアニメーション */
.dot.anim {
	animation-name: animDot;
	-webkit-animation-name: animDot;
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@keyframes animDot {
	0% {
		opacity: 1;
		transform: scale(0.4, 0.4);
		-webkit-transform: scale(0.4, 0.4);
		stroke-width: 10;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(2.5, 2.5);
		-webkit-transform: scale(2.5, 2.5);
		stroke-width: 1;
	}
}

@-webkit-keyframes animDot {
	0% {
		opacity: 1;
		transform: scale(0.4, 0.4);
		-webkit-transform: scale(0.4, 0.4);
		stroke-width: 10;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(2.5, 2.5);
		-webkit-transform: scale(2.5, 2.5);
		stroke-width: 1;
	}
}