@charset "utf-8";
#page-premium { background: #fff7f2;}


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



.bubble.bubble-L1:after { background: url('../img/premium/bubble-1.png') no-repeat 100% 100% / auto 400px;}
.bubble.bubble-L2:after { background: url('../img/premium/bubble-3.png') no-repeat 100% 100% / auto 400px; animation-delay: 0.8s;}
.bubble.bubble-R:after { background: url('../img/premium/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/premium/bg-ttl.png') no-repeat 50% 50%;}
@media (max-width: 801px) {
	.ttl:after { background: url('../img/premium/bg-top@sp.png') no-repeat 50% 0% / 100% auto;}
}


#kv { background: url('../img/premium/bg-top.png') no-repeat 50% 0%;}
#kv .flower.l1 { top: 20%; left: 8%;}
#kv .flower.l2 { top: 56%; left: 15%; transition-delay: 0.8s;}
#kv .flower.r1 { top: 16%; right: 12%;}
#kv .flower.r2 { top: 40%; right: 21%; transition-delay: 0.4s;}
#kv .flower.r3 { bottom: 22%; right: 14%; transition-delay: 1.2s;}
#kv.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#kv { background: url('../img/premium/bg-top@sp.png') no-repeat 50% 0% / 100% auto	;}
	#kv .flower.r2 { right: 16%;}
	#kv .flower.r3 { right: 6%;}
}
@media (max-width: 481px) {
	#kv .title { margin-bottom: 0vw;}
	#kv .flower.l1 { top: 9%;}
	#kv .flower.l2 { top: 46%; left: 12%;}
	#kv .flower.r1 { top: 20%; right: 6%;}
	#kv .flower.r2 { display: none;}
	#kv .flower.r3 { bottom: auto; top: 30%; right: 12%;}
	#kv .bubble-R { top: 46%;}
}


#point .bubble-L1 { bottom: 12%;}


#aroma .ttl .flower { padding: 0; top: auto; bottom: -65%; left: 8%;}
#aroma .flower.l1 { top: 76%; left: 12%;}
#aroma .flower.r1 { top: 45%; right: 12%; transition-delay: 1.2s;}
#aroma .flower.r1:after { transform: rotate(-90deg);}
#aroma .bubble-L2 { top: 52%;}
#aroma.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#aroma .ttl .flower { bottom: -84%;}
	#aroma .flower.l1 { top: 50%;}
	#aroma .flower.r1 { top: 54%; right: 8%;}
}
@media (max-width: 481px) {
	#aroma .ttl .flower { bottom: -72%;}
	#aroma .flower.l1 { top: 48%; left: 8%;}
	#aroma .flower.r1 { right: 6%;}
}


#product .inner-sct { background: url('../img/premium/bg-1.png') no-repeat 50% 50%;}
#product .ctn .txt .cart form { background: #fac873;}
#product .ctn .img-2 figure img { max-width: 180px;}
#product .flower.l1 { top: 26%; left: 8%; transition-delay: 0.4s;}
#product .flower.l2 { bottom: 6%; left: 6%; transition-delay: 1.2s;}
#product .flower.r1 { top: 6%; right: 10%;}
#product .flower.r2 { top: 68%; right: 8%; transition-delay: 1.0s;}
#product.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#product .inner-sct { background-size: 120% auto; background-position: 60% 50%;}
	#product .flower.l1 { top: 20%; left: 36%;}
	#product .flower.l2 { display: none;}
	#product .flower.r2 { right: 4%;}
}
@media (max-width: 481px) {
	#product .ctn .img-2 figure img { width: 80%;}
	#product .flower.l1 { top: 4%; left: 82%;}
	#product .flower.r1 { top: 10%; right: 80%;}
	#product .flower.r1:after { transform: rotate(-90deg);}
	#product .flower.r2 { display: none;}
}



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