@charset "UTF-8";

.heart-anime-logo,
.anmille-scroll-logo
{
	display: inline-block;
	appearance: none;
	background-color: transparent;
	background-repeat: no-repeat;
	border: none;
	outline: none;
	cursor: pointer;
	position: relative;
}

.heart-anime-logo:focus,
.anmille-scroll-logo:focus
{
	outline: 0;
}

.heart-anime-logo:before,
.heart-anime-logo:after,
.anmille-scroll-logo:before,
.anmille-scroll-logo:after
{
	position: absolute;
	content: "";
	display: block;
	width: 140%;
	height: 110%;
	left: -18%;
	-webkit-transition: all ease-in-out 0.5s;
	transition: all ease-in-out 0.5s;
	background-repeat: no-repeat;
}

.heart-anime-logo:before
{
	display: none;
	top: -75%;
	background-image: url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg");
	background-size: 28% 28%, 40% 40%, 30% 30%, 40% 40%, 35% 35%, 28% 28%, 30% 30%, 28% 28%, 35% 35%; 
}
.heart-anime-logo:after
{
	display: none;
	bottom: -75%;
	background-image: url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg");
	background-size: 30% 30%, 40% 40%, 35% 35%, 40% 40%, 30% 30%, 28% 28%, 40% 40%; 
}

.anmille-scroll-logo:before
{
	display: none;
	top: -60%;
	background-image: url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart.svg");
	background-size: 7% 7%, 12% 12%, 10% 10%, 12% 12%, 11% 11%, 7% 7%, 9% 9%, 7% 7%, 11% 11%; 
}
.anmille-scroll-logo:after
{
	display: none;
	bottom: -60%;
	background-image: url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg"),
					url("/assets/front/img/anmille-logo-aweek/heart-reverse.svg");
	background-size: 7% 7%, 10% 10%, 9% 9%, 10% 10%, 7% 7%, 5% 5%, 10% 10%;  
}

.heart-anime-logo.animate:before
{
	display: block;
	-webkit-animation: topHearts ease-in-out 1s forwards;
	animation: topHearts ease-in-out 1s forwards;
}
.heart-anime-logo.animate:after
{
	display: block;
	-webkit-animation: bottomHearts ease-in-out 1s forwards;
	animation: bottomHearts ease-in-out 1s forwards;
}


.anmille-scroll-logo.animate:before
{
	display: block;
	-webkit-animation: scrollTopHearts ease-in-out 1.5s forwards;
	animation: scrollTopHearts ease-in-out 1.5s forwards;
}
.anmille-scroll-logo.animate:after
{
	display: block;
	-webkit-animation: scrollBottomHearts ease-in-out 1.5s forwards;
	animation: scrollBottomHearts ease-in-out 1.5s forwards;
}

@keyframes topHearts {
	0% {
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@-webkit-keyframes topHearts {
	0% {
		background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	50% {
		background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	100% {
		background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@keyframes bottomHearts {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@-webkit-keyframes bottomHearts {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

@keyframes scrollTopHearts {
	0% {
		background-position: 15% 90%, 20% 90%, 20% 90%, 25% 90%, 35% 90%, 35% 90%, 50% 90%, 65% 90%, 80% 90%;
	}
	50% {
		background-position: 0% 80%, 10% 20%, 20% 40%, 30% 0%, 40% 30%, 32% 50%, 60% 50%, 75% 20%, 100% 30%;
	}
	100% {
		background-position: 0% 70%, 10% 20%, 20% 40%, 30% -20%, 40% 30%, 32% 50%, 60% 50%, 75% 20%, 100% 30%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@-webkit-keyframes scrollTopHearts {
	0% {
		background-position: 15% 90%, 20% 90%, 20% 90%, 25% 90%, 35% 90%, 35% 90%, 50% 90%, 65% 90%, 80% 90%;
	}
	50% {
		background-position: 0% 80%, 10% 20%, 20% 40%, 30% 0%, 40% 30%, 32% 50%, 60% 50%, 75% 20%, 100% 30%;
	}
	100% {
		background-position: 0% 70%, 10% 20%, 20% 40%, 30% -20%, 40% 30%, 32% 50%, 60% 50%, 75% 20%, 100% 30%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@keyframes scrollBottomHearts {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
@-webkit-keyframes scrollBottomHearts {
	0% {
		background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	50% {
		background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	100% {
		background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}

/* scrollLog
-------------------------------*/
.scrollLog{
	z-index: 999;
	position: fixed;
	bottom: 5px;
	left: 10px;
	width: 80px;
	/*
	width: 10%;
	min-width:90px;
	*/
}
.scrollLog img{
	width: 100%;
	height: auto;
	display: block;
}

/* 追従ロゴの調整 */
.anmille-scroll-logo img {
	width: 150px;
	max-width: none;
}

@media only screen and (max-width: 1023px) {
	.anmille-scroll-logo img {
		width: 100px;
		max-width: none;
	}
	/* headerのロゴの調整 */
	.heart-anime-logo img {
		max-width: 200px;
	}
	/* Hamburger Menuのロゴの調整 */
	.hamburger-menu__logo.anmille-aweek {
		margin-bottom: 33px;
	}
}