@charset "utf-8";
#page-melty{ background: #fff3f2;}


.flower { position: absolute !important; z-index: 2 !important; transition: 0.6s cubic-bezier(.4,.4,0,1); opacity: 0;}
.flower.flower-1,
.flower.flower-2 { width: 86px; height: 86px;}
.flower.flower-3,
.flower.flower-4 { width: 128px; height: 128px;}
.flower.flower-5 { width: 40px; height: 40px;}
.flower.flower-6 { width: 128px; height: 128px;}
.flower::after { content: ''; position: relative; display: block; width: 100%; height: 100%;}
.flower.flower-1::after { background: url('../img/melty/flower-1.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-2::after { background: url('../img/melty/flower-2.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-3::after { background: url('../img/melty/flower-3.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-4::after { background: url('../img/melty/flower-4.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-5::after { background: url('../img/melty/flower-5.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-6::after { background: url('../img/melty/flower-6.png') no-repeat 50% 50% / 100% auto;}
@media (max-width: 801px) {
	.flower.flower-1,
	.flower.flower-2 { width: 60px; height: 60px;}
	.flower.flower-3,
	.flower.flower-4 { width: 80px; height: 80px;}
	.flower.flower-5 { width: 32px; height: 32px;}
	.flower.flower-6 { width: 80px; height: 80px;}
}
@media (max-width: 481px) {
	.flower.flower-1,
	.flower.flower-2 { width: 32px; height: 32px;}
	.flower.flower-3,
	.flower.flower-4 { width: 60px; height: 60px;}
	.flower.flower-5 { width: 20px; height: 20px;}
	.flower.flower-6 { width: 40px; height: 40px;}
}


.bubble.bubble-L1:after { background: url('../img/melty/bubble-1.png') no-repeat 100% 100% / auto 400px;}
.bubble.bubble-L2:after { background: url('../img/melty/bubble-3.png') no-repeat 100% 100% / auto 400px; animation-delay: 0.8s;}
.bubble.bubble-R:after { background: url('../img/melty/bubble-2.png') no-repeat 0% 0% / auto 400px; animation-delay: 1.2s;}
@media (max-width: 801px) {
	.bubble.bubble-L1:after { background-size: auto 250px;}
	.bubble.bubble-L2:after { background-size: auto 250px;}
	.bubble.bubble-R:after { background-size: auto 250px;}
}
@media (max-width: 481px) {
	.bubble.bubble-L1:after { background-size: auto 120px;}
	.bubble.bubble-L2:after { background-size: auto 120px;}
	.bubble.bubble-R:after { background-size: auto 120px;}
}

.ttl:after { background: url('../img/melty/bg-ttl.png') no-repeat 50% 50%;}
@media (max-width: 801px) {
	.ttl:after { background: url('../img/melty/bg-top@sp.png') no-repeat 50% 0% / 100% auto;}
}


#kv { background: url('../img/melty/bg-top.png') no-repeat 50% 0%;}
#kv .flower.l1 { top: 20%; left: 8%; transition-delay: 0.8s;}
#kv .flower.l2 { top: 56%; left: 12%; transition-delay: 1.2s;}
#kv .flower.l2:after { transform: rotate(90deg);}
#kv .flower.l3 { top: 60%; left: 15%; transition-delay: 1.6s;}
#kv .flower.r1 { top: 16%; right: 12%; transition-delay: 0.4s;}
#kv .flower.r2 { top: 26%; right: 12%; transition-delay: 0.8s;}
#kv .flower.r2:after { transform: rotate(210deg);}
#kv .flower.r3 { top: 30%; right: 14%; transition-delay: 0.9s;}
#kv .flower.r3:after { transform: rotate(270deg);}
#kv .flower.r4 { top: 40%; right: 18%; transition-delay: 1.0s;}
#kv .flower.r5 { bottom: 10%; right: 8%; transition-delay: 1.8s;}
#kv.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#kv { background: url('../img/melty/bg-top@sp.png') no-repeat 50% 0% / 100% auto;}
}
@media (max-width: 481px) {
	#kv .title { margin-bottom: 6vw;}
	#kv .main .badge { top: -20px;}
	#kv .flower.l1 { top: 9%; left: 8%;}
	#kv .flower.l2 { top: 42%; left: 6%;}
	#kv .flower.l3 { top: 45%; left: 8%;}
	#kv .flower.r1 { right: 8%;}
	#kv .flower.r2 { right: 4%;}
	#kv .flower.r3 { right: 7%;}
	#kv .flower.r4 { display: none;}
	#kv .flower.r5 { bottom: 48%;}
}



#aroma .ttl .flower-3 { padding: 0; top: auto; bottom: -65%; left: 8%;}
#aroma .ttl .flower-6 { padding: 0; top: auto; bottom: -100%; right: 12%; transition-delay: 0.4s;}
#aroma .flower.l1 { top: 48%; left: 12%;}
#aroma .flower.l2 { top: 58%; left: 10%; transition-delay: 1.2s;}
#aroma .flower.r1 { top: 50%; right: 12%; transition-delay: 0.8s;}
#aroma .flower.r1:after { transform: rotate(180deg);}
#aroma .flower.r2 { bottom: 8%; right: 20%; transition-delay: 1.6s;}
#aroma .bubble-L2 { top: 62%;}
#aroma.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#aroma .ttl .flower-3 { bottom: -88%;}
	#aroma .flower.l1 { top: 54%;}
	#aroma .flower.r1 { top: 58%;}
	#aroma .flower.r2 { bottom: 4%; right: 12%;}
}
@media (max-width: 481px) {
	#aroma .ttl .flower-3 { bottom: -68%;}
	#aroma .ttl .flower-6 { display: none;}
	#aroma .flower.l1 { top: 48%; left: 10%;}
	#aroma .flower.l2 { top: 52%; left: 6%;}
	#aroma .flower.r1 { top: 54%;}
}

#product .inner-sct { background: url('../img/melty/bg-1.png') no-repeat 50% 50%;}
#product .ctn .txt .cart form { background: #ffcec2;}
#product .flower.l1 { top: 30%; left: 6%; transition-delay: 0.4s;}
#product .flower.l2 { bottom: 36%; left: 12%; transition-delay: 0.7s;}
#product .flower.l2:after { transform: rotate(180deg);}
#product .flower.l3 { bottom: 26%; left: 6%; transition-delay: 0.8s;}
#product .flower.r1 { top: 0%; right: 12%;}
#product .flower.r2 { top: 55%; right: 10%; transition-delay: 0.8s;}
#product.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#product .flower.l1 { top: 8%; left: 82%;}
	#product .flower.l2 { bottom: 42%; left: 88%;}
	#product .flower.l3 { display: none;}
	#product .flower.r1 { display: none;}
	#product .flower.r2 { top: 18%; right: 50%;}
	#product .flower.r2:after { transform: rotate(100deg);}
}
@media (max-width: 481px) {
	#product .flower.l1 { top: 12%; left: 44%;}
	#product .flower.l2 { bottom: 38%;}
	#product .flower.r2 { top: 4%; right: 5%;}
	#product .flower.r2:after { transform: rotate(0deg);}
}



#lineup { background: linear-gradient(90deg,#ffecaa,#ffe7e6,#fff7f2);}