@charset "utf-8";

#hd .menu { background: linear-gradient(40deg,#ffde6c,#fbf1d6,#fff,#fbf1d6,#ffde6c);}

.ttl:after { background: url('../img/c/bg-ttl.png') no-repeat 50% 100%;}
@media (max-width: 801px) {
	.ttl:after { background: url('../img/c/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,#ffde6c,#fbf1d6,#fff,#fbf1d6,#ffde6c);}
#kv .hd-logo:after { background: url('../img/c/bg-top.png') no-repeat 50% 0%;}
#kv .ctn .txt .btn a { background: linear-gradient(30deg, #faf097 ,#f7c244);}
@media (max-width: 801px) {
	#kv .hd-logo:after { background: url('../img/c/bg-ttl@sp.png') no-repeat 50% 100% / 100% auto;}
}
@media (max-width: 481px) {
}


.bg {	background: url('../img/c/bg.jpg') repeat-y 50% 50%;}
@media (max-width: 801px) {
	.bg {	background: url('../img/c/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 { animation: 8.0s wave1 linear infinite;}
#point .bubble.bubble-L1 { width: 60px; left: 2%; top: 28%; background: url('../img/c/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-L2 { width: 60px; left: 6%; top: 50%; background: url('../img/c/bubble-1.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-R1 { width: 60px; right: 4%; bottom: 10%; background: url('../img/c/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/c/bubble-1.png') no-repeat 0% 50% / 100% auto;}

#point .bubble.bubble-L3a { width: 60px; left: -40px; top: 25%; background: url('../img/c/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-L3b { width: 60px; left: 4%; top: 72%; background: url('../img/c/bubble-1.png') no-repeat 100% 50% / 100% auto;}
#point .bubble.bubble-R3a { width: 80px;right: -40px; top: -8%; background: url('../img/c/bubble-2.png') no-repeat 0% 50% / 100% auto;}
#point .bubble.bubble-R3b { width: 80px;right: -30px; top: 75%; background: url('../img/c/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 { animation: 8.0s wave1 linear infinite;}
#howto .bubble.bubble-L1 { width: 60px; left: 6%; top: 45%; background: url('../img/c/bubble-2.png') no-repeat 100% 50% / 100% auto;}
#howto .bubble.bubble-L2 { width: 40px; left: 4%; bottom: 10%; background: url('../img/c/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/c/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/c/bubble-1.png') no-repeat 0% 50% / 100% auto;}

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