@charset "utf-8";

#hd .menu { background: linear-gradient(40deg,#e5d4aa,#f9f2e3,#fcf7ed,#f9f2e3,#e5d4aa);}

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


#kv .inner-kv { background: linear-gradient(40deg,#e5d4aa,#f9f2e3,#fcf7ed,#f9f2e3,#e5d4aa);}
#kv .hd-logo:after { background: url('../img/uv/bg-ttl.png') no-repeat 50% 100%;}
#kv .ctn .txt p.name { margin-bottom: 20px;}
#kv .ctn .txt p.amount span { display: block; font-size: clamp(16px,2.2vw,20px); text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;}
#kv .ctn .txt p.amount span sup { vertical-align: revert;}
#kv .ctn .txt .btn a { background: linear-gradient(30deg, #f0e1a3 15%,#fcf7ed 50%, #e5d4aa 85%)	;}
@media (max-width: 801px) {
	#kv .hd-logo:after { background: url('../img/uv/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
}
@media (max-width: 481px) {
}


.bg {	background: url('../img/uv/bg.jpg') repeat-y 50% 50%;}
@media (max-width: 801px) {
	.bg {	background: url('../img/uv/bg@sp.jpg') repeat-y 50% 50% / 100% auto;}
}


@keyframes wave1 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(20px);}
 100% { transform: translateY(0px);}
}
@keyframes wave2 {
	 0% { transform: translateY(0px);}
  50% { transform: translateY(10px);}
 100% { transform: translateY(0px);}
}


#point .ctn-pc .box .fig { box-shadow: 4px 4px 10px #a88b65;}
#point .point-sp .box { box-shadow: 4px 4px 5px #f4d087;}

#point .bubble { display: none; animation: 8.0s wave1 linear infinite;}
/*
#point .bubble.bubble-L1 { width: 60px; left: 2%; top: 28%; background: url('../img/uv/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-L2 { width: 60px; left: 6%; top: 50%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-R1 { width: 60px; right: 4%; bottom: 10%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.7s;}
#point .bubble.bubble-R2 { width: 60px; right: 2%; top: 28%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto;}

#point .bubble.bubble-L3a { width: 60px; left: -40px; top: 25%; background: url('../img/uv/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-L3b { width: 60px; left: 4%; top: 72%; background: url('../img/uv/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R3a { width: 80px;right: -40px; top: -8%; background: url('../img/uv/bubble-2.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-R3b { width: 80px;right: -30px; top: 75%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto;}
*/
@media (max-width: 801px) {
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#point .point-sp .box { box-shadow: 2px 2px 4px #f4d087;}
	#point .bubble.bubble-L3a { width: 30px; left: -20px; top: 25%;}
	#point .bubble.bubble-L3b { width: 30px; left: 4%; top: 62%;}
	#point .bubble.bubble-R3a { width: 40px;right: -20px; top: -8%;}
	#point .bubble.bubble-R3b { width: 30px;right: -12px; top: 65%;}
}


#howto .bubble { display: none; animation: 8.0s wave1 linear infinite;}
/*
#howto .bubble.bubble-L1 { width: 60px; left: 6%; top: 45%; background: url('../img/uv/bubble-2.png') no-repeat 100% 50% / 100% auto;}
#howto .bubble.bubble-L2 { width: 40px; left: 4%; bottom: 10%; background: url('../img/uv/bubble-1.png') no-repeat 100% 50% / 100% auto; animation-delay: 0.7s;}
#howto .bubble.bubble-R1 { width: 60px; right: 5%; top: 12%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto; animation-delay: 0.3s;}
#howto .bubble.bubble-R2 { width: 40px; right: 2%; bottom: 15%; background: url('../img/uv/bubble-1.png') no-repeat 0% 50% / 100% auto;}
*/
#product .inner-sct {	background: url('../img/uv/bg.jpg') repeat-y 50% 50%;}
@media (max-width: 801px) {
	#product .inner-sct {	background: url('../img/uv/bg@sp.jpg') repeat-y 50% 50% / 100% auto;}
}