.back-ground-wrapper {
position: relative;
}

.c-block-bg {
position: fixed;
inset: 0;
}

.c-block-bg__bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center bottom;
object-position: center bottom;
}

.c-block-bg__logo {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: calc((100% - 850 * 1px) / 2);
height: 100%;
}

.c-block-bg__logo .bg-logo {
position: absolute;
inset: 0;
width: 250px;
margin: auto;
}

.c-block-bg__qr {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: calc((100% - 850 * 1px) / 2);
height: 100%;
}

.c-block-bg__bg {
position: absolute;
inset: 0;
}

.lp-container {
position: relative;
margin: 0px auto;
max-width: 850px;
box-shadow: 0 0 10px #bbbbbb;
padding: 0 15px;
background-image: url(https://foula.itembox.design/item/images/lp/img/prosystem/bg.jpg);
z-index: 999;
}

.pc-cta {
position: absolute;
inset: 0;
top: 55%;
left: 0%;
width: max-content;
margin: auto;
}

.pc-cta a {
background-color: #000;
display: block;
margin: auto;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 15px;
border-radius: 10px;
}

.side_item {
position: absolute;
bottom: 15px;
width: 175px;
left: 15px;
}

.side-img {
position: absolute;
z-index: 999;
margin: auto;
top: 0;
right: 0;
width: 100%;
}

.sp-cta {
display: none;
}

@media screen and (max-width: 1366px) {
.c-block-bg__logo .bg-logo {
width: 200px;
}

.c-block-bg__qr {
width: calc((100% - 750 * 1px) / 2);
}

.lp-container {
max-width: 750px;
}
}

@media screen and (max-width: 1024px) {
.c-block-bg {
display: none;
}

.lp-container {
max-width: 100%;
}
}

@media screen and (max-width: 798px) {
.sp-cta {
position: fixed;
bottom: 25px;
display: flex;
margin: auto;
z-index: 999;
transform: translateX(-50%);
left: 50%;
}
.sp-cta a {
background-color: #000;
color: #fff;
display: block;
font-size: 16px;
padding: 10px 35px;
border-radius: 25px;
width: 265px;
text-align: center;
position: relative;
}
.sp-cta a .sp-cta-item {
position: absolute;
right: 15px;
top: -20px;
width: 55px;
}

}


.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeUpAnime {
from {
opacity: 0;
/*transform: translateX(-50%);*/
transform: translateY(30px)
}

to {
opacity: 1;
/*transform: translateX(-50%);*/
transform: translateY(0px)
}
}


.fadeIn {
animation-name: fadeInAnime;
animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 1.5s;
animation-direction: normal;
opacity: 0;
}

@keyframes fadeInAnime {
0% {
opacity: 0;
transform: translateY(10px)
}

100% {
opacity: 1;
transform: translateY(0px)
}
}

/*******************************************************

key-visual

********************************************************/

.key-visual {
    padding-top: 35px;
    width: 100%;
}

.key-visual img {
width: 100%;
}

.kv__img {
position: relative;
width: 100%;
}

.kv__img .kv-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
}
@media screen and (max-width: 498px) {
.key-visual {
    padding-top: 15px;
}
}
/*******************************************************

cta-section

********************************************************/
.cta-section {
/*  background-color: #bbbbbb; */
padding: 50px 15px 25px;
}

.cta-section p {
padding-left: 20px;
padding-bottom: 50px;
font-weight: bold;
font-size: 42px;
color: #333;
font-weight: 900;
line-height: initial;
line-height: 185%;
transform: skewY(-2deg) translateY(20px);
}

span.marker {
background: #bdbdbd;
background: linear-gradient(90deg, rgba(189, 189, 189, 1) 0%, rgba(204, 204, 204, 1) 50%, rgba(194, 194, 194, 1) 100%);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 30%;

}

.cta-section a {
background: linear-gradient(132deg, #C1903F 0%, #C99D58 45%, #EBB561 70%, #ca9d55 85%, #B78D4A 90% 100%);
display: block;
margin: 75px auto;
text-align: center;
/* width: max-content; */
width: 80%;
padding: 15px 35px;
color: #fff;
font-size: 21px;
font-weight: bold;
border-radius: 25px;
}


@media screen and (max-width: 498px) {
.cta-section {
padding: 0px 0px 0px;
}

.cta-section p {
    font-size: 24px;
    padding-left: 5px;
    transform: inherit;
    margin-top: 15px;
    padding-bottom: 15px;
}
.cta-section p br {
display: none;
}

.cta-section a {
margin: 14px auto;
width: 95%;
/* font-size: 12px; */
padding: 13px 15px;
font-size: 16px;
margin-top: 10px;
border-radius: 15px;
}
}

/*******************************************************

benefit

********************************************************/
.benefit.lp-sec {}

.sec-title {
margin: 50px auto 15px;
}

.sec-title img {
width: 100%;
max-width: 375px;
display: block;
margin: 0 auto;
}

.benefit.lp-sec ul li {
padding: 0;
/* margin: 15px 0 35px; */
}

.img_sec {
/* padding: 0 10px; */
}

.img_description {
font-size: 18px;
width: 100%;
padding: 25px 25px 50px;
margin: 0 auto 0;
/*  background-color: #f8f8f8; */
}

.img_description div {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}

.img_description img {
width: 100%;
max-width: 205px;
}

.img_description p {
font-size: 31px;
font-weight: bold;
line-height: 165%;

}

.img_description span {
padding: 15px 5px 0;
display: block;
line-height: 200%;
}

@media screen and (max-width: 498px) {
.sec-title img {
max-width: 300px;
}

.img_description {
padding: 15px 0px 35px;
}

.img_description div {
flex-direction: column;
gap: 0px;
}

.img_description img {
max-width: 85px;
}

.img_description p {
font-size: 24px;
width: 100%;
margin-bottom: 10px;
text-align: center;
}

.img_description span {
padding: 0px;
font-size: 16px;
color: #5a5a5a;
}

.img_description span br {
display: none;
}

.img_sec {
position: relative;
width: 100%;
height: 200px;
}

.img_sec img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
}

/*******************************************************

product-features

********************************************************/
.product-features {}



/*******************************************************

howtouse

********************************************************/
.howtouse {
padding-top: 35px;
/* background-color: #f8f8f8; */
}

.howtouse-content p {
font-size: 32px;
font-weight: bold;
line-height: 165%;
margin-top: -25px;
text-align: center;
}

.howtouse-content img {
position: relative;
}


.howtouse-content ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2%;
margin: 35px 0;
}

.howtouse-content ul li {
width: 48%;
margin-bottom: 35px;
}



.howtouse__img {
position: relative;
}

.howtouse__img div {
position: absolute;
top: 20px;
left: 25px;
background: var(--c_main);
color: #fff;
z-index: 2;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 50%;
font-weight: bold;
}

.howtouse__img-img {
width: 100%;
padding: 15px;
}

.howtouse__img .step-img {
position: absolute;
top: 25px;
left: 15px;
width: 100%;
max-width: 100px;
display: block;
z-index: 2;
}

.howtouse__text {
padding: 0px 0;
position: relative;
font-size: 16px;
margin-bottom: 35px;
font-weight: initial;
line-height: 175%;
padding-left: 15px;
}

.howtouse__text p {
font-size: 16px;
text-align: start;
margin-top: 0px;
font-weight: inherit;
}

.howtouse__comp {
font-size: 20px !important;
}

@media screen and (max-width: 498px) {
.howtouse {
padding-top: 0px;
}

.howtouse-content p {
font-size: 26px;
}

.howtouse-content ul {
margin: 15px 0;
}

.howtouse-content ul li {
flex-direction: column;
height: initial;
width: 100%;
margin-bottom: 0;
}

.howtouse__img {
width: 100%;
}

.howtouse__img img {
/* max-width: 200px; */
margin: auto;
display: block;
padding-bottom: 0;
}

.howtouse__text {
width: 100%;
padding: 0px;
}

.howtouse__text .step-img {
max-width: 110px;
margin: 0px auto 35px;
}

.howtouse__text p {
font-size: 16px;
text-align: start;
padding: 0 15px;
font-weight: initial;
margin-top: 3px;
}
}


/*******************************************************

reason

********************************************************/
.reason {}

.reason-container ul {
display: flex;
justify-content: center;
gap: 1%;
padding: 0 15px;
flex-wrap: wrap;
}

.reason-container ul li {
width: 100%;
margin-bottom: 15px;
}

.reason-num {
position: relative;
font-size: 11rem;
font-weight: bold;
text-align: center;
width: max-content;
margin: auto;
color: var(--c_blk-pnk);
}

.reason-num.first {
margin-top: -50px;
margin-bottom: -25px;
}

.reason-num::after {
position: absolute;
content: "POINT";
/*  color: transparent;
-webkit-text-stroke: 1px  var(--c_blk-pnk); */
;
color: #333;
font-size: 15px;
letter-spacing: -0.05rem;
/* top: 0; */
bottom: 35%;
font-weight: bold;
left: -10px;
font-weight: 700;
transform: translateX(-50%) rotate(270deg);
}

.reason-num span {
font-size: 18px;
color: #333;
}

.reason-title {
font-size: 31px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}

.reason-img img {
width: 100%;
}

.reason-text {
text-align: center;
font-size: 16px;
/*  font-weight: bold; */
line-height: 220%;
padding: 15px 25px;
}

@media screen and (max-width: 498px) {
.reason-container ul {
padding: 0px;
}

.reason-num {
font-size: 5rem;
}

.reason-num.first {
margin-top: -35px;
margin-bottom: initial;
}

.reason-title {
font-size: 24px;
}

.reason-title {
padding: 10px 10px;
font-size: 18px;
background: #000;
color: #ddd;
display: flex;
align-items: center;
justify-content: center;
}

.reason-text {
line-height: 185%;
padding: 10px 15px;
}
}

/*******************************************************

customer

********************************************************/
.customer {}

.review {}

.review-conatiner {}

.review-contents {
display: flex;
justify-content: center;
align-items: center;
gap: 1%;
}

.review-contents__text {
width: 48%;
font-size: 48px;
font-weight: bold;
}

.review-contents__text span {
color: #c6a15c;
}

.review-contents__num {
width: 40%;
font-size: 200px;
font-weight: bold;
color: #c6a15c;
}

.review-contents__dev {
text-align: center;
}

.customer-contents {
width: 90%;
margin: 15px auto;
}

.customer-voice {
border: 1px solid #333;
padding: 15px 20px;
margin-bottom: 15px;
background-color: #ffffff24;
}

.customer-voice .star {
color: #c6a15c;
display: block;
font-size: 35px;
font-weight: bold;
margin-top: -15px;
}

.customer-voice .impression {
font-size: 21px;
font-weight: bold;
margin-bottom: 3px;

}

.customer-voice .personal {}

.customer-voice .text {
margin-top: 3px;
}

@media screen and (max-width: 798px) {
.review-contents {
margin-bottom: 5px;
}

.review-contents__text {
font-size: 24px;
}

.review-contents__num {
font-size: 7rem;
}

.customer-contents {
width: 100%;
margin-top: 25px;
}

.customer-voice .star {
font-size: 18px;
margin-top: -5px;
}

.customer-voice .impression {
margin-top: -5px;
margin-bottom: 5px;
}

.customer-voice .text {
font-size: 14px;
}

.customer-voice .personal {
font-size: 12px;
}
}


/*******************************************************

faq-container

********************************************************/
.faq-item__question span::before {
background-image: url(https://foula.itembox.design/item/images/lp/img/prosystem/Qq.png) !important;
}

.faq-item__ans::before {
background-image: url(https://foula.itembox.design/item/images/lp/img/prosystem/Aa.png) !important;
}

.faq-item__ans {
background: #f9f9f930 !important;
}


.p-footer__sitemap {
width: 100% !important;
position: relative;
}

@media screen and (max-width: 498px) {
.faq-container {
padding-left: 5px !important;
padding-right: 5px !important;
}
}


/*******************************************************

copylight

********************************************************/
.copylight{
background-color:var(--c_bg_b);
color: var(--c_wht);
font-size: 12px;
text-align: center;
padding: 15px 25px;
}

@media screen and (max-width: 798px) {
.copylight {
    padding-top: 35px;
    padding-bottom: 90px;
}
}