@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');
body{background: #F8F8F8;margin: 0 auto;font-family: 'M PLUS Rounded 1c', sans-serif;font-size: 15px;}
.lp-box{overflow-x: hidden; max-width: 480px;box-shadow: 0 2px 8px rgba(64, 62, 61, .1);margin: 0 auto;background: #fff;}
footer{background: #000000;font-size: 10px;color: #fff;padding:1.5rem 1rem;text-align: center;}
.lp-main{position: relative;margin: 0 auto;}

.lp-main {
position: relative;
margin: 0 auto;
}

.lp-main-img1 {
position: absolute;
top: 10px;
left: 5px;
z-index: 10;
width: 130px;
padding: 8px 20px 5px;
background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
border: 1px solid #69C0E0;
opacity: 0.9;
}

.lp-main-img2 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: image1 1.5s forwards 0.5s;
opacity: 0;
}



@keyframes image1 {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes image1-2 {

0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-5px);
}
}

.lp-main-img3 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: image1 1s forwards 0.5s, bounce-in-top 1s 1s both, bounce-in-top2 1s 2s infinite;
opacity: 0;
}


@keyframes bounce-in-top {
0% {
transform: translateY(-500px);
animation-timing-function: ease-in;
opacity: 0;
}

38% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}

55% {
transform: translateY(-65px);
animation-timing-function: ease-in;
}

72% {
transform: translateY(0);
animation-timing-function: ease-out;
}

81% {
transform: translateY(-28px);
animation-timing-function: ease-in;
}

90% {
transform: translateY(0);
animation-timing-function: ease-out;
}

95% {
transform: translateY(-8px);
animation-timing-function: ease-in;
}

100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
}


@keyframes bounce-in-top2 {


38% {
transform: translateY(0);
animation-timing-function: ease-out;
opacity: 1;
}

55% {
transform: translateY(-30px);
animation-timing-function: ease-in;
}

72% {
transform: translateY(0);
animation-timing-function: ease-out;
}

81% {
transform: translateY(-15px);
animation-timing-function: ease-in;
}

90% {
transform: translateY(0);
animation-timing-function: ease-out;
}

95% {
transform: translateY(-5px);
animation-timing-function: ease-in;
}

100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
}

.lp-main-img4 {
position: absolute;
z-index: 3;
animation: bounceIn 1050ms backwards;
animation-delay: 500ms;
top: 50%;
transform: translateY(-50%);
}

@keyframes bounceIn {

from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.1, 0.1, 0.1, 1);
}

0% {
opacity: 0;
top: 50%;
transform: scale3d(0.3, 0.3, 0.3) translateY(-50%);
}

20% {
top: 50%;
transform: scale3d(3, 3, 3) translateY(-50%);
}

40% {top: 50%;
transform: scale3d(0.3, 0.3, 0.3) translateY(-50%);
}

60% {
opacity: 1;top: 50%;
transform: scale3d(1.2, 1.2, 1.2) translateY(-50%);
}

80% {top: 50%;
transform: scale3d(0.97, 0.97, 0.97) translateY(-50%);
}

to {
opacity: 1;top: 50%;
transform: scale3d(1, 1, 1) translateY(-50%);
}
}

.lp-link {
position: relative;
}


.lp-main-img5 {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: image1 1s forwards 1s;
opacity: 0;
}

.lp-main-img6 {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: image1 1s forwards 1s, image1-2 1s infinite ease-in-out;
opacity: 0;
}

.lp-main-img7 {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: image1 1s forwards 1s, image1-2 1.5s infinite ease-in-out;
opacity: 0;
}

.lp-main-img8 {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: image1 1s forwards 1s, filter-lp 2s infinite ease-in-out;
opacity: 0;
filter: drop-shadow(0px 0px 20px #F47D99);
}
@keyframes filter-lp {

50% {
filter: drop-shadow(0px 0px 20px #66BFDF);
}

}

@keyframes btn-lp {

50% {
background: transparent linear-gradient(90deg, #F47D99 0%, #F6A2B6 100%) 0% 0% no-repeat padding-box;
filter: drop-shadow(0px 0px 10px #F47D99);
}

}

a.lp-btn {
animation: btn-lp 1.5s infinite ease-in-out;
position: relative;
display: block;
font-size: 20px;
color: #fff;
width: 85%;
max-width: 380px;
padding: 1.2rem 0rem;
text-align: center;
display: block;
margin: 0 auto;
background: transparent linear-gradient(90deg, #F47D99 0%, #F6A2B6 100%) 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #FBDEE5;
text-decoration: none;
border-radius: 40px;
line-height: 1.2;
margin-top: 5px;
margin-bottom: 60px;
}

a.lp-btn::before {
content: '';
position: absolute;
background-image: url(/assets/images/lp2/right-icon-white.svg);
width: 13px;
height: 13px;
background-size: contain;
background-repeat: no-repeat;
left: 90%;
top: 50%;
transform: translateX(-50%)translateY(-50%);
}

a.lp-btn span {
font-size: 10px;
display: block;
}


.lp-poke {
position: relative;
margin: 0 auto;
}

.lp-poke-img2 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.lp-poke-img3 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: image1-2 2s infinite ease-in-out;
}

.lp-poke-img1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: image1 1s;
}

.lp-site {
position: relative;
margin: 0 auto;
}

.lp-site-img2 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.lp-site-img3 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
animation: image1-2 2s infinite ease-in-out;
}

.lp-site-img1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: image1 1s;
}

.lp-reward {
position: relative;
margin: 0 auto;
}

.lp-reward-img2 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

.lp-reward-img3 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: image1-2 2s infinite ease-in-out;
}

.lp-reward-img1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
animation: image1 1s;
}
.lp-chat{position: relative;margin: 0 auto;margin-bottom: -7px;}
.fadein.lp-chat-img1{position: absolute;top: 0;left: 0;z-index: 3;animation:image1-2 2s infinite ease-in-out;}
.fadein.lp-chat-img2{position: absolute;top: 0;left: 0;z-index: 1;animation: image1-2 2s infinite ease-in-out;}
.fadein.lp-chat-img3{position: absolute;top: 0;left: 0;z-index: 1;}
.fadein.lp-chat-img4{position: absolute;top: 0;left: 0;z-index: 1;animation:image1-2 2s infinite ease-in-out;}
.fadein.lp-chat-img5{position: absolute;top: 0;left: 0;z-index: 2;animation: image3 1s ;}
.lp-income{position: relative;margin: 0 auto;}
.lp-income-img1{position: absolute;top: 0;left: 0;z-index: 3;animation:image1-2 2s infinite ease-in-out;width: 100%;}
.lp-income-img2{position: absolute;top: 0;left: 0;z-index: 1;animation: image1-2 2s infinite ease-in-out;width: 100%;}
.lp-income-img3{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;}
.lp-income-img4{position: absolute;top: 0;left: 0;z-index: 2;animation:image1-2 2s infinite ease-in-out;width: 100%;}
.lp-income-img5{position: absolute;top: 0;left: 0;z-index: 2;animation: image3 1s;width: 100%;}
.lp-h2{font-size: 30px;position: relative;text-align: center;margin-top: 100px;line-height: 1.5;letter-spacing: 2px;background: linear-gradient(to right, #44ACFA, #C365C9, #FAA1CE);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.lp-h2 b{color: #D974BD;letter-spacing: 2px;font-weight: 600;}
.lp-h2 span{font-size: 13px;display: block;}
.lp-h2::before{content: '';position: absolute;background-image: url(/assets/images/lp2/lp-head-ac.svg);width: 80px;height: 80px;background-size: contain;background-repeat: no-repeat;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);}
#chatlady p,#reward p{padding: 2.5rem;;font-size: 13px;line-height: 2;}
#chatlady,#reward{background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 57%, #EED4D8 100%) 0% 0% no-repeat padding-box;padding-bottom: 20px;}
.reward-flex,.reward-flex02{display: flex;padding: 2rem;align-items: center;justify-content: center;margin:0 auto;margin-top: 30px;margin-bottom: -70px;max-width: 430px;}
.reward-flex{margin-top: 60px;}
.reward-flex div:nth-of-type(1){width: 35%;padding: 1rem;}
.reward-flex div:nth-of-type(2){width: 65%;padding: 1rem;}
.reward-flex02 div:nth-of-type(1){width: 65%;padding: 1rem;}
.reward-flex02 div:nth-of-type(2){width: 35%;padding: 1rem;}
.reward-flex div:nth-of-type(2) h3{position: relative;text-align: center;font-size: 20px;margin-bottom: 10px;}
.reward-flex div:nth-of-type(2) h3 span{background: #ffffff;position: relative;padding: 1rem;}
.reward-flex div:nth-of-type(2) h3::before{content: '';position: absolute;background: #000000;height: 1px;width: 100%;left: 50%;top: 50%;transform: translateX(-50%)translateY(-50%);}
.reward-flex div:nth-of-type(2) h3::after{content: '';position: absolute;background-image: url(/assets/images/lp2/top-chat-ic.svg);width: 50px;height: 50px;left: 50%;top: 50%;background-size: contain;background-repeat: no-repeat;top: -40px;left: 50%;transform: translateX(-50%)translateY(-50%);}
.reward-flex02 div:nth-of-type(1) h3{position: relative;text-align: center;font-size: 20px;margin-bottom: 10px;}
.reward-flex02 div:nth-of-type(1) h3 span{background: #ffffff;position: relative;padding: 1rem;}
.reward-flex02 div:nth-of-type(1) h3::before{content: '';position: absolute;background: #000000;height: 1px;width: 100%;left: 50%;top: 50%;transform: translateX(-50%)translateY(-50%);}
.reward-flex02 div:nth-of-type(1) h3::after{content: '';position: absolute;background-image: url(/assets/images/lp2/top-wark-ic.svg);width: 50px;height: 50px;left: 50%;top: 50%;background-size: contain;background-repeat: no-repeat;top: -40px;left: 50%;transform: translateX(-50%)translateY(-50%);}
.reward-flex02 div:nth-of-type(1) h4{position: relative;font-size: 55px;color: #E27685;margin-top: 0;text-align: right;margin-bottom: 0;font-weight: 600;}
.reward-flex div:nth-of-type(2) h4{position: relative;font-size: 55px;color: #E27685;margin-top: 0;text-align: right;margin-bottom: 0;font-weight: 600;}
.reward-flex div:nth-of-type(2) h4::before{content: '最大\A時給';position: absolute;left: 0;top: 50%;transform: translateY(-50%);white-space: pre-wrap;text-align: center;justify-content: center;align-items: center;display: flex;width: 40px;height: 40px;padding: 5px;background: #E47684;color: #fff;font-size: 13px;border-radius: 50%;}
.reward-flex02 div:nth-of-type(1) h4::before{content: '最大\A時給';position: absolute;left: -10px;top: 50%;transform: translateY(-50%);white-space: pre-wrap;text-align: center;justify-content: center;align-items: center;display: flex;width: 40px;height: 40px;padding: 5px;background: #E47684;color: #fff;font-size: 13px;border-radius: 50%;}
.reward-flex div:nth-of-type(2) h4 small,.reward-flex02 div:nth-of-type(1) h4 small{font-size: 16px;}
.reward-flex02 div:nth-of-type(1) p{margin-top: -20px;text-align:left;color: #E27685;margin-left: -20px;}
.reward-flex div:nth-of-type(2) p{margin-top: -30px;text-align: right;color: #E27685;}
.reward-box{width: 85%;margin: 0 auto;background: #fff;}
.reward-box h3{text-align: center;padding-top: 40px;margin-bottom: -10px;font-size: 22px;}
.reward-box h3 span{position: relative;padding-bottom: 10px;}
.reward-box h3 span::before{content: '';position: absolute;background-image: url(/assets/images/lp2/top-mission-ic.svg);background-repeat: no-repeat;left: -30px;top: 50%;width: 40px;height: 40px;transform: translateX(-50%) translateY(-50%);}
.reward-box h3 ::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 8px;    background-image: repeating-linear-gradient(45deg, #E27685 0px, #E27685 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);background-size: 8px 8px;}
#safe{margin-top: 70px;}
#safe p{padding: 2.5rem;;font-size: 13px;line-height: 2;}
#safe h2 {position: relative;padding: 2rem 2rem;color: #fff;font-size: 24px;border-radius: 60px;background: #FF7DAB;width: 70%;margin: 0 auto;margin-top: 30px;text-align: center;animation:safeh2 1.5s infinite ease-in-out;}
#safe h2:after {position: absolute;bottom: -9px;left: 50%;transform: translateX(-50%);width: 0;height: 0;content: '';border-width: 10px 10px 0 10px;border-style: solid; border-color: #FF7DAB transparent transparent transparent;}
@keyframes safeh2 {0%, 100% { transform: translateY(0); }50% { transform: translateY(-10px); }}
.safe-box{background: transparent linear-gradient(180deg, #FFFFFF 0%, #D2ECFF 100%) 0% 0% no-repeat padding-box;position: relative;margin-top: 40px;}
.safe-box::before{content: '';position: absolute;background-image: url(/assets/images/lp2/paki-safe-07.svg);background-repeat: no-repeat;width: 70px;height: 70px;background-size: contain;left: 85%;top: 0;transform: translateX(-50%)translateY(-50%);}
.safe-flex{display: flex;align-items: center;justify-content: center;padding:1rem 3rem 0rem 3rem;}
.safe-flex div:nth-of-type(1){width: 30%;}
.safe-flex div:nth-of-type(2){width: 70%;}
#inexperience h2{position: relative;font-size: 36px;text-align: center;line-height: 1.2;margin-top: 100px; background: linear-gradient(to right, #44ACFA, #C365C9, #FAA1CE);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#inexperience h2 span{font-size: 13px;display: block;}
#inexperience h2::before{content: '';position: absolute;background-image: url(/assets/images/lp2/lp-safe-02.webp);background-repeat: no-repeat;background-size: contain;width: 90px;height: 90px;left: 50%;top: -40px;transform: translateX(-50%)translateY(-50%);}
.inex-flex,.inex-flex2{display: flex;padding: 1rem;justify-content: center;align-items: center;}
.inex-flex div:nth-of-type(1){width: 30%;padding: 0.5rem;}
.inex-flex div:nth-of-type(2){width: 70%;padding: 1rem;}
.inex-flex2 div:nth-of-type(1){width: 70%;padding: 1rem;}
.inex-flex2 div:nth-of-type(2){width: 30%;padding: 0.5rem;}
.inex-flex{margin-bottom: -40px;}
.inex-flex2{margin-bottom: -40px;}
.balloon-left {position: relative;padding: 1.5rem 2rem;color: #fff;border-radius: 30px;background: #79BDEA;}
.balloon-left:after {position: absolute;top: 40%;right: -1rem;width: 0;height: 0;content: '';border-width: 15px 15px 10px 15px;border-style: solid;border-color: #79BDEA transparent transparent transparent;}
.balloon-right {position: relative;padding: 1.5rem 2rem;color: #fff;border-radius: 25px;background: #FF7DAB;}
.balloon-right:after {position: absolute;top: 40%;left: -1rem;width: 0;height: 0;content: '';border-width: 15px 15px 10px 15px;border-style: solid;border-color: #FF7DAB transparent transparent transparent;}
.inex-p{padding: 2.5rem;;font-size: 13px;line-height: 2;}
#inexperience{background: transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 57%, #ACD3F1 100%) 0% 0% no-repeat padding-box;padding-bottom: 20px;}
#register{padding-bottom: 20px;}
.register-p{padding: 2.5rem;;font-size: 13px;line-height: 2;}
.register-flex{display: flex;padding: 0rem 2.5rem;align-items: center;justify-content: center;}
.register-flex div{width: calc(100%/2);padding: 1rem;}
.register-h3,
.register-h3-2,
.register-h3-3{background: #79BDEA;color: #fff;width: 120px;margin: 0 auto;text-align: center;padding: 1rem;font-size: 16px;border-radius: 30px;position: relative;}
.register-h3::before,
.register-h3-2::before,
.register-h3-3::before{position: absolute;background: #fff;color: #79BDEA;border: solid 1px #79BDEA;border-radius: 50%;width: 30px;height: 30px;line-height: 30px;left: 0;top: 50%;transform: translateX(-50%)translateY(-50%);}
.register-h3::before{content: '01';}
.register-h3-2::before{content: '02';}
.register-h3-3::before{content: '03';}
.register-flex p{padding: 1rem 0rem;}
.register-box{position: relative;margin: 0 auto;text-align: center;margin-bottom: -40px;margin-top: -40px;}
.register-box span{font-size: 24px;display: block;color: #000;}
.register-box h3{font-size: 100px;color: #C9B076;}
.register-box h3 small{font-size: 40px;}
.register-box::before{content: '';position: absolute;background-image: url(/assets/images/lp2/lp-regis-02.svg);width: 80px;height: 80px;left: 85%;top: 0;transform: translateX(-50%)translateY(-50%);background-size: contain;background-repeat: no-repeat;}
.register-box::after{content: '';position: absolute;background-image: url(/assets/images/lp2/lp-regis-02.svg);width: 80px;height: 80px;left: 15%;top: 100%;transform: translateX(-50%)translateY(-50%);background-size: contain;background-repeat: no-repeat;}
.yellow_line {background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fff200 0%) repeat scroll 0 0;font-weight: 500;text-shadow: 0px 0px 10px #fff;font-weight: 700;}
.fade-body{animation: fade-body 0.5s ease-in-out;}@keyframes fade-body {0% {opacity: 0;}100% {opacity: 1;}}
.fadein { transition: all .6s ease-in-out } .fadein.toup { transform: translateY(10px); opacity: 0 }
.fadein.tor { transform: translateX(10px); opacity: 0 }
.fadein.tol { transform: translateX(-10px); opacity: 0 }
.fadein.show { transform: translate(0); opacity: 1 } 
.fixed-regbtn {position: fixed;width: 85%;max-width: 480px;margin: 0 auto;left: 50%;transform: translateX(-50%);z-index: 999;margin-bottom: 35px;animation:regbtn 1.5s infinite ease-in-out;filter: drop-shadow(0px 0px 10px #fff);}
@keyframes regbtn {0%, 100% { margin-bottom: 35px; }50% { margin-bottom: 30px; }}

