@charset "utf-8";
.wrap { background: #fff7dd;}


.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::after { content: ''; position: relative; display: block; width: 100%; height: 100%;}
.flower.flower-1::after { background: url('../img/deep/flower-1.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-2::after { background: url('../img/deep/flower-2.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-3::after { background: url('../img/deep/flower-3.png') no-repeat 50% 50% / 100% auto;}
.flower.flower-4::after { background: url('../img/deep/flower-4.png') no-repeat 50% 50% / 100% auto;}
.show .flower { opacity: 1;}
@media (max-width: 801px) {
	.flower.flower-1,
	.flower.flower-2 { width: 60px; height: 60px;}
	.flower.flower-3,
	.flower.flower-4 { 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;}
}


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



#kv { background: url('../img/deep/bg-top.png') no-repeat 50% 0%;}
#kv .flower.l1 { top: 20%; left: 8%; transition-delay: 0.8s;}
#kv .flower.l2 { top: 56%; left: 15%; transition-delay: 1.2s;}
#kv .flower.r1 { top: 16%; right: 12%; transition-delay: 0.2s;}
#kv .flower.r2 { top: 40%; right: 21%; transition-delay: 0.8s;}
#kv .flower.r2:after { transform: rotate(-90deg);}
#kv .flower.r3 { bottom: 10%; right: 8%; transition-delay: 1.2s;}
#kv.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#kv { background: url('../img/deep/bg-top@sp.png') no-repeat 50% 0% / 100% auto;}
	#kv .flower.r3 { right: 4%;}
}
@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.r1 { top: 16%; right: 8%;}
	#kv .flower.r2 { top: 50%; right: 18%;}
	#kv .flower.r3 { bottom: 60%;}
}



#aroma .ttl .flower { padding: 0; top: auto; bottom: -65%; left: 8%;}
#aroma .flower.l1 { top: 76%; left: 12%;}
#aroma .flower.r1 { top: 46%; right: 12%;}
#aroma .flower.r1:after { transform: rotate(-90deg);}
#aroma .bubble-L2 { top: 52%;}
@media (max-width: 801px) {
	#aroma .ttl .flower { bottom: -90%; left: 8%;}
	#aroma .flower.l1 { top: 58%; left: 6%;}
	#aroma .flower.r1 { top: 54%; right: 6%;}
}
@media (max-width: 481px) {
	#aroma .ttl .flower { bottom: -80%; left: 8%;}
	#aroma .flower.l1 { top: 48%}
	#aroma .flower.r1 { top: 52%;}
}


#product .inner-sct { background: url('../img/deep/bg-1.png') no-repeat 50% 50%;}
#product .ctn .txt .cart form { background: #ffe97d;}
#product .flower.l1 { top: 30%; left: 8%;}
#product .flower.l2 { top: 72%; left: 12%; transition-delay: 2.0s;}
#product .flower.r1 { top: 4%; right: 12%; transition-delay: 0.8s;}
#product .flower.r2 { top: 50%; right: 10%; transition-delay: 1.6s;}
#product .flower.r2:after { transform: rotate(-90deg);}
#product.show .flower { opacity: 1;}
@media (max-width: 801px) {
	#product .inner-sct { background-size: 120% auto;}
	#product .flower.l1 { top: 18%; left: 45%;}
	#product .flower.l2 { display: none;}
	#product .flower.r1 { top: 8%; right: 8%;}
	#product .flower.r2 { top: 55%;}
}
@media (max-width: 481px) {
	#product .flower.l1 { top: 12%; left: 45%;}
	#product .flower.r1 { top: 0%; right: 8%;}
	#product .flower.r2 { right: 5%;}
}

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