@charset "UTF-8";

.scrollLog {
	z-index: 999;
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 150px;
}

@media only screen and (max-width: 1023px) {
	.scrollLog {
		bottom: 65px;
	}
}

/* 通常ヘッダーロゴ・ハンバーガーロゴ共通 */
.heart-anime-area {
	position: relative;
	display: inline-block;
	width: 250px;
	line-height: 0;
	overflow: visible;
	vertical-align: middle;
	background: transparent;
}

.heart-anime-logo {
	position: relative;
	z-index: 2;
	display: inline-block;
	line-height: 0;
	background: transparent;
}

.heart-anime-logo img {
	display: block;
	width: 250px;
	height: auto;
	max-width: none;
}

.hamburger-menu__banner-list .heart-anime-area,
.hamburger-menu__banner-list .heart-anime-logo img {
	width: 150px;
}

/* 追従ロゴ */
.anmille-scroll-area {
	position: relative;
	display: inline-block;
	width: 150px;
	line-height: 0;
	overflow: visible;
	vertical-align: middle;
	background: transparent;
}

.anmille-scroll-logo {
	position: relative;
	z-index: 2;
	display: inline-block;
	line-height: 0;
	background: transparent;
}

.anmille-scroll-logo img {
	display: block;
	width: 200px;
	height: auto;
	max-width: none;
}

/* 花びら共通 */
.flake {
	position: absolute;
	display: block;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
	transform-origin: center center;
	will-change: transform, opacity;
}

.flake img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------
   heart-anime-area 共通
   （ヘッダー・ハンバーガー共通）
-------------------------------- */
.heart-anime-area .flake {
	width: 26px;
	height: 26px;
}

.heart-anime-area .flake2,
.heart-anime-area .flake4,
.heart-anime-area .flake6,
.heart-anime-area .flake8,
.heart-anime-area .flake10,
.heart-anime-area .flake12 {
	width: 20px;
	height: 20px;
}

/* 開始位置 */
.heart-anime-area .flake1 { left: 45%; top: 50%; }
.heart-anime-area .flake2 { left: 47%; top: 52%; }
.heart-anime-area .flake3 { left: 50%; top: 49%; }
.heart-anime-area .flake4 { left: 53%; top: 52%; }
.heart-anime-area .flake5 { left: 55%; top: 50%; }
.heart-anime-area .flake6 { left: 46%; top: 54%; }
.heart-anime-area .flake7 { left: 51%; top: 53%; }
.heart-anime-area .flake8 { left: 54%; top: 54%; }
.heart-anime-area .flake9 { left: 43%; top: 52%; }
.heart-anime-area .flake10 { left: 48%; top: 55%; }
.heart-anime-area .flake11 { left: 57%; top: 52%; }
.heart-anime-area .flake12 { left: 52%; top: 56%; }

/* --------------------------------
   追従ロゴ側の花びら
-------------------------------- */
.anmille-scroll-area .flake {
	width: 18px;
	height: 18px;
}

.anmille-scroll-area .flake2,
.anmille-scroll-area .flake4,
.anmille-scroll-area .flake6,
.anmille-scroll-area .flake8 {
	width: 14px;
	height: 14px;
}

.anmille-scroll-area .flake1,
.anmille-scroll-area .flake2,
.anmille-scroll-area .flake3,
.anmille-scroll-area .flake4,
.anmille-scroll-area .flake5,
.anmille-scroll-area .flake6,
.anmille-scroll-area .flake7,
.anmille-scroll-area .flake8 {
	left: 50%;
	top: 50%;
}

/* アニメーション共通 */
.heart-anime-area.animate .flake,
.anmille-scroll-area.animate .flake {
	animation-name: sakuraBurst;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-duration: 1.9s;
}

/* --------------------------------
   heart-anime-area の飛び先
-------------------------------- */
.heart-anime-area .flake1 { --move-x: -170px; --move-y: -60px; --rotate: -35deg; --end-scale: 1.15; }
.heart-anime-area .flake2 { --move-x: -110px; --move-y: -95px; --rotate: 28deg; --end-scale: 1.05; }
.heart-anime-area .flake3 { --move-x: 0px; --move-y: -105px; --rotate: -18deg; --end-scale: 1.1; }
.heart-anime-area .flake4 { --move-x: 110px; --move-y: -90px; --rotate: 40deg; --end-scale: 1.12; }
.heart-anime-area .flake5 { --move-x: 180px; --move-y: -55px; --rotate: 22deg; --end-scale: 1.18; }
.heart-anime-area .flake6 { --move-x: -150px; --move-y: -10px; --rotate: -45deg; --end-scale: 1.0; }
.heart-anime-area .flake7 { --move-x: 150px; --move-y: -8px; --rotate: 32deg; --end-scale: 1.02; }
.heart-anime-area .flake8 { --move-x: 0px; --move-y: 35px; --rotate: 18deg; --end-scale: 0.98; }
.heart-anime-area .flake9 { --move-x: -205px; --move-y: -35px; --rotate: -28deg; --end-scale: 1.06; }
.heart-anime-area .flake10 { --move-x: -70px; --move-y: 30px; --rotate: 16deg; --end-scale: 0.94; }
.heart-anime-area .flake11 { --move-x: 205px; --move-y: -30px; --rotate: 26deg; --end-scale: 1.05; }
.heart-anime-area .flake12 { --move-x: 75px; --move-y: 32px; --rotate: -14deg; --end-scale: 0.93; }

/* --------------------------------
   追従ロゴの飛び先
-------------------------------- */
.anmille-scroll-area .flake1 { --move-x: -110px; --move-y: -55px; --rotate: -30deg; }
.anmille-scroll-area .flake2 { --move-x: -70px; --move-y: -80px; --rotate: 24deg; }
.anmille-scroll-area .flake3 { --move-x: 0px; --move-y: -90px; --rotate: -20deg; }
.anmille-scroll-area .flake4 { --move-x: 75px; --move-y: -75px; --rotate: 34deg; }
.anmille-scroll-area .flake5 { --move-x: 120px; --move-y: -50px; --rotate: 22deg; }
.anmille-scroll-area .flake6 { --move-x: -95px; --move-y: -5px; --rotate: -40deg; }
.anmille-scroll-area .flake7 { --move-x: 95px; --move-y: -5px; --rotate: 26deg; }
.anmille-scroll-area .flake8 { --move-x: 0px; --move-y: 28px; --rotate: 16deg; }

@keyframes sakuraBurst {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
	}
	12% {
		opacity: 1;
	}
	58% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform:
			translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y)))
			scale(var(--end-scale, 1.1))
			rotate(var(--rotate));
	}
}