@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-box {background: url(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/lp-img-dot.webp) repeat;background-size: 40vw auto; animation: fade-body 0.5s ease-in-out, body-bg-scroll 80s linear infinite;}
@keyframes body-bg-scroll {0% { background-position: 0 0; }100% { background-position: -100vw 0; }}

@media screen and (max-width:999px) {
.lp-box {background: url(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/lp-img-dot.webp) repeat;background-size: 100vw auto; animation: fade-body 0.5s ease-in-out, body-bg-scroll 60s linear infinite;}
@keyframes body-bg-scroll {0% { background-position: 0 0; }100% { background-position: -300vw 0; }}
}



.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 #333333;
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: translate(0, -50%);
}

@keyframes bounceIn {

from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.1, 0.1, 0.1, 1);
}

0% {

opacity: 0;
transform: scale3d(0.3, 0.3, 0.3) translate(0, -50%);
}

20% {
transform: scale3d(3, 3, 3) translate(0, -50%);
}

40% {
transform: scale3d(0.3, 0.3, 0.3) translate(0, -50%);
}

60% {
opacity: 1;
transform: scale3d(1.2, 1.2, 1.2) translate(0, -50%);
}

80% {
transform: scale3d(0.97, 0.97, 0.97) translate(0, -50%);
}

to {
opacity: 1;
position: absolute;
top: 50%;
transform: scale3d(1, 1, 1) translate(0, -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 #fd644f);
}

}

.bg-img{animation:filter 1s ease-in infinite;margin-top: 0;}
@keyframes filter{0%{ filter: hue-rotate(0deg)}50%{ filter: hue-rotate(-20deg);}100%{ filter:  hue-rotate(0deg)}}


a.lp-btn:hover{opacity: 0.8;transition: 0.5s;box-shadow: 0px 0px 6px #fd644f;}

a.lp-btn {
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, #FFCA00 0%, #F9786D 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: 20px;
margin-bottom: 20px;
transition-duration: .5s;
}

a.lp-btn::before {
content: '';
position: absolute;
background-image: url(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/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: 13px;
display: block;
}

a.lp-btn::after{
content:  attr(data-label);
position: absolute;
top: 50%;
left: 0;
transform: translateX(-50%) translateY(-50%);
background: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 10px;
white-space: pre-line;
color: #FDB31F;
display: flex; 
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
}

.lp-content{
background: rgba(247,243,235,0.4);
margin-top: -40px;
padding-top: 20px;
}

.head-1{color: #C39A00;position: relative;text-align: center;font-size: 28px;margin-top: 40px;margin-bottom: 40px;}
.head-1::before{
content: attr(data-label);
position: absolute;
top: 170%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
background: #C39A00;
color: #fff;
padding:5px 10px;
font-size: 20px;
letter-spacing: 3px;
}

.head-1::after{
content: '';
position: absolute;
background-image: url(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/area-lp-9.webp);
background-size: contain;
background-repeat: no-repeat;
width: 220px;
height: 250px;
left: 95%;
top: 60%;
transform: translateX(-50%)translateY(-50%) rotate(-40deg);
z-index: -1;
}

.poke-box{
background:rgba(255,202,0,0.4);
padding: 1rem 2rem 3rem 2rem;
margin-top: 30px;
}
.poke-box p{
background: #fff;
padding: 2rem 1rem;
border-radius: 30px;
font-size: 14px;
line-height: 2;
position: relative;
}

.poke-box p::before{
content: 'P';    
text-align: center;
background: #C39A00;
position: absolute;
left: 90%;
top: 0;
transform: translateX(-50%)translateY(-50%);
color: #fff;
font-size: 16px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
}

@keyframes bounce {
0% {
transform: translateY(0) scale(1); /* 通常の位置とサイズ */
}
30% {
transform: translateY(0px) scale(1.05); /* 少し上にジャンプして大きくなる */
}
50% {
transform: translateY(0) scale(0.95); /* 元の位置に戻りつつ縮む */
}
70% {
transform: translateY(0px) scale(1.05); /* 小さくジャンプして大きくなる */
}
100% {
transform: translateY(0) scale(1); /* 元のサイズと位置に戻る */
}
}

.hover-img{
transition-duration: .5s;
}
.hover-img:hover{
display: inline-block;
overflow: hidden;
transition: 0.5s;
transform: scale(1.1);
opacity: 0.8;
}


.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, #FFCA00, #F9786D);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 10px;}
.lp-h2 b{color: #F9786D;letter-spacing: 2px;font-weight: 600;}
.lp-h2 span{font-size: 13px;display: block;}
.lp-h2::before{content: '';position: absolute;background-image: url(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/lp-head-ac.svg);width: 80px;height: 80px;background-size: contain;background-repeat: no-repeat;left: 50%;top: 0;transform: translateX(-50%)translateY(-50%);}

#inexperience h2{position: relative;font-size: 36px;text-align: center;line-height: 1.2;margin-top: 100px; background: linear-gradient(to right, #FFCA00, #F9786D);-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(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/lp-safe-02.webp);background-repeat: no-repeat;background-size: contain;width: 90px;height: 90px;left: 50%;top: -40px;transform: translateX(-50%)translateY(-50%);}

#inexperience{background: transparent linear-gradient(180deg, rgba(247,243,235,0.4) 0%, rgba(247,243,235,0.4) 57%, rgba(255,202,0,0.6) 100%) 0% 0% no-repeat padding-box;padding-bottom: 20px;}

.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;}

.fixed-regbtn {position: fixed;width: 95%;max-width: 480px;margin: 0 auto;left: 50%;transform: translateX(-50%);z-index: 999;margin-bottom: 30px;filter: drop-shadow(0px 0px 10px #fff);}

.balloon {display: flex;justify-content: center;align-items: center;gap: 0 22px;width: 90%;margin: 0 auto;margin-bottom: 40px;margin-top: 40px;}
.balloon img {max-width: 70px;height: 100%;}
.balloon div {position: relative;max-width: 600px;margin: 3px 0 0;padding: 1rem;border-radius: 5px;background-color: #fff;color: #333333;font-size: 14px;}
.balloon div::before {position: absolute;left: -15px;width: 15px;height: 20px;background-color: #fff;clip-path: polygon(0 50%, 100% 0, 100% 100%);content: '';}

.inex-p{padding: 2.5rem;;font-size: 13px;line-height: 2;}


.area-job-table{position: relative;border: solid 1px #F9786D;border-collapse: collapse;max-width: 1000px;margin: 0 auto;margin-top: 50px;width: 90%;margin-bottom: 30px;font-size: 14px;}
.area-job-table td{padding: 1rem;line-height: 1.6;background: rgba(255,255,255,0.6);}
.area-job-table td:nth-of-type(1){width: 30%;background: #fef0ee;text-align: center;border-right: solid 1px #F9786D;}
.area-job-table td a{text-align: right;display: block;padding-right: 10px;text-decoration: none;color: #F9786D;}
.area-job-table td span{color: #F9786D;padding-right: 6px;}

#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: #000;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: #000;border: solid 1px #000;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(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/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(https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/lp/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 } 






