/* -------Fabric LP css------- */
.fabric-lp,.fabric-lp a,.fabric-lp h1,.fabric-lp h2,.fabric-lp h3,.fabric-lp p {margin: 0;}
.fabric-lp main{overflow-x: hidden;color: #222;}
.fabric-lp h3{font-size: 1.75em;font-weight: 600;}

/* Fabric LP mv */
.fabric-lp .mv{background-repeat: no-repeat;background-size:cover;background-position: 0 0;}
.fabric-lp .mv_cont{color: #fff;text-align: center;padding: 120px 0 317px;}
.fabric-lp h1{font-size: clamp(18px, calc(2vw + 2px), 40px);font-weight: 600;display: flex;flex-direction: column;}
.fabric-lp h1 span{font-size: clamp(16px, calc(2vw + 2px), 24px);font-weight: 500;margin-top: 40px;}
.fabric-lp .mv_cont p{font-size: clamp(24px, calc(2vw + 10px), 48px);font-weight: 500;margin: 70px 0 40px;}
.fabric-lp .mv_cont p span{font-size: clamp(32px, calc(3vw + 7px), 64px);}
.fabric-lp .mv_cont h1 .br_sp{display: none;}

@media screen and (max-width: 1280px){
    .fabric-lp h1{font-size: clamp(18px, calc(2vw + 6px), 40px);}
    .fabric-lp .mv_cont p{font-size: clamp(24px, calc(2vw + 16px), 48px);}
    .fabric-lp .mv_cont p span{font-size: clamp(32px, calc(3vw + 13px), 64px);}
}
@media screen and (max-width: 960px){
    .fabric-lp h1 span {font-size: clamp(16px, calc(2vw + 4px), 24px);margin-top: 25px;}
}
@media screen and (max-width: 767px){
    .fabric-lp .mv_cont h1 .br_sp01{display: block;}
    .fabric-lp h1 {font-size: clamp(18px, calc(2vw + 12px), 40px);}
    .fabric-lp h1 span {font-size: clamp(16px, calc(2vw + 6px), 24px);}
    .fabric-lp .mv_cont p {font-size: clamp(24px, calc(2vw + 10px), 48px);margin: 50px 0 40px;}
    .fabric-lp .mv_cont p span {font-size: clamp(32px, calc(3vw + 18px), 64px);}
}
@media screen and (max-width: 560px){
    .fabric-lp h1 {font-size: clamp(18px, calc(2vw + 13px), 40px);}
    .fabric-lp .mv_cont h1 .br_sp01{display: none;}
    .fabric-lp .mv_cont h1 .br_sp02{display: block;}
    .fabric-lp h1 span {font-size: clamp(16px, calc(2vw + 9px), 24px);}
    .fabric-lp .mv_cont p {font-size: clamp(24px, calc(2vw + 20px), 48px);}
    .fabric-lp .mv_cont p span {font-size: clamp(32px, calc(3vw + 25px), 64px);}
}

/* Fabric LP button */
.fabric-lp .btn{color: #fff;background-color: #FE7407;border-radius: 40px;width: 320px;height: 60px;font-size:  1.25em;font-weight: 600;transition: 0.3s;text-decoration: none;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.fabric-lp .btn:hover{box-sizing: border-box;color: #FE7407;background-color: #fff;border: 1px solid #FE7407;}
.fabric-lp .btn span, .fabric-lp .btn02 span{text-align: center;vertical-align: middle;}
.btn02_wrap{margin: 60px auto 0;}
.fabric-lp .btn02{color: #fff;background-color: #0181EF;border-radius: 10px;width: 1005px;height: 77px;font-size:  24px;font-weight: 600;transition: 0.3s;text-decoration: none;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.fabric-lp .btn02:hover{box-sizing: border-box;color: #0181EF;background-color: #fff;border: 1px solid #0181EF;}
.fabric-lp .btn02 .br_sp01, .fabric-lp .btn02 .br_sp02{display: none;}
.fabric-lp .btn.tohome{color: #fff;}
.fabric-lp .btn.tohome:hover{color: #FE7407;}


@media screen and (max-width: 1105px){
    .fabric-lp .btn02{height: unset;width: unset;padding: 16px 40px;}
    .fabric-lp .btn02 .br_sp02{display: block;}
}
@media screen and (max-width: 1000px){
    .fabric-lp .btn02 .br_sp01{display: block;}
    .fabric-lp .btn02 .br_sp02{display: none;}
}
@media screen and (max-width: 767px){
    .btn02_wrap {margin: 60px 20px 0;}
    .fabric-lp .btn02 {padding: 24px;font-size: 20px;}
    .fabric-lp .btn02 .br_sp01{display: none;}
    .fabric-lp .btn02 .br_sp02{display: block;}
}

/* Fabric LP about */
.fabric-lp h2{font-size: 2em;font-weight: 600;}
.fabric-lp .about .container{max-width: 1280px;margin: 0 auto;display: flex;flex-direction: column;gap: 40px;}
.fabric-lp .about .about_cont{display: flex;position: relative;}
.fabric-lp .about .about_txt{width: 40%;}
.fabric-lp .about .about_txt h2{position: relative;}
.fabric-lp .about .about_txt h2::after{content: "";background-color: #4C7AFF;width: 80px;height: 3px;position:absolute;display: block;bottom: -20px;}
.fabric-lp .about .about_txt p{line-height: 28px;margin-top: 50px;max-width: 504px;}
.fabric-lp .about img{width: 56%;height: auto;object-fit: contain;}
.fabric-lp .about .about_cont img{max-width: 716px;max-height: 403px;position: absolute;right: 0;bottom: 0;}
@media screen and (max-width: 1400px){
    .fabric-lp .about .container {margin: 0 60px;}
}
@media screen and (max-width: 1100px){
    .fabric-lp .about .container {margin: 0 50px;}
    .fabric-lp .about img {width: 50%;}
    .fabric-lp .about .about_txt {width: 44%;}
}
@media screen and (max-width: 960px){
    .fabric-lp .about .about_cont {flex-direction: column;align-items: center;gap: 30px;}
    .fabric-lp .about .about_txt {width: 100%;}
    .fabric-lp .about .about_txt p {max-width: unset;}
    .fabric-lp .about img {width: 65%;}
    .fabric-lp .about .about_cont img {position: relative;width: 100%;}
}
@media screen and (max-width: 767px){
    .fabric-lp .about .container {margin: 0 30px;}
    .fabric-lp .about img {width: 100%;}
}
@media screen and (max-width: 415px){
    .fabric-lp .about .about_txt h2 {font-size: 1.79em;}
}

/* Fabric LP reason */
.fabric-lp .reason .container {max-width: 1320px;margin: 0 auto 80px;}
.fabric-lp .reason h3 {margin-bottom: 40px;text-align: center;}
.fabric-lp .reason h3 .br_sp{display: none;}
.fabric-lp .reason .reason_wrap {display: flex;gap: 25px;}
.fabric-lp .reason .reason_cont {box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);border-radius: 6px;width: 33%;padding: 20px;box-sizing: border-box;}
.fabric-lp .reason .reason_cont img {max-width: 384px;height: auto;width: 100%;}
.fabric-lp .reason .reason_cont .reason_cont_txt div {color: #4C7AFF;font-size: 1.125em;font-weight: 600;padding: 20px 0 10px;}
.fabric-lp .reason .reason_cont p {line-height: 24px;}
.fabric-lp .reason .reason_cont .br_sp {display: none;}

@media screen and (max-width: 1400px){
    .fabric-lp .reason .container {margin: 0 50px 80px;}
}
@media screen and (max-width: 1150px){
    .fabric-lp .reason .container {margin: 0 30px 80px;}
    .fabric-lp .reason .reason_wrap {gap: 15px;}
}
@media screen and (min-width: 961px) and (max-width: 1099px) {
    .fabric-lp .reason .reason_cont .br_sp {display: block;}
    .fabric-lp .reason .reason_cont .reason_cont_txt div {height: 52px;}
}
@media screen and (max-width: 960px){
    .fabric-lp .reason .reason_wrap {flex-direction: column;gap: 25px;align-items: center;}
    .fabric-lp .reason .reason_cont {width: 100%;display: flex;gap: 20px;max-width: 800px;}
    .fabric-lp .reason .reason_cont:nth-child(2){flex-direction: row-reverse;}
    .fabric-lp .reason .reason_cont img {width: 50%;}
}
@media screen and (max-width: 767px){
    .fabric-lp .reason .reason_cont:nth-child(2){flex-direction: column;}
    .fabric-lp .reason .reason_cont img {width: 100%;}
    .fabric-lp .reason .reason_cont {flex-direction: column;align-items: center;max-width: 424px;gap: unset;}
}
@media screen and (max-width: 490px){
    .fabric-lp .reason h3 .br_sp{display: block;}
}
@media screen and (max-width: 400px){
    .fabric-lp .reason .container {margin: 0 20px 80px;}
}

/* Fabric LP company */
.fabric-lp .company{background-repeat: no-repeat;background-size:contain;background-position: center;position: relative;overflow-x: hidden;background-size: 100% 100%;}
.fabric-lp .company .container {padding: 80px 0 60px;position: relative;z-index: 2;margin: 0 50px;}
.fabric-lp .company::before,.fabric-lp .company::after {background-repeat: no-repeat;background-size:contain;position: relative;width: 100%;height: 100%;position: absolute;content: "";z-index: 0;}
.fabric-lp .company::before {background-image: url(/common/images/product/fabric-lp_company_bg01.png);max-width: 543px;max-height: 457px;}
.fabric-lp .company::after {background-image: url(/common/images/product/fabric-lp_company_bg02.png);max-width: 410px;max-height: 469px;top: -16px;right: 0;}
.fabric-lp .company h3{text-align: center;}
.fabric-lp .company p{max-width: 872px;width: 80%;line-height: 32px;margin: 30px auto;}
.fabric-lp .company .company_img{display: flex;justify-content: center;gap: 74px;}
.fabric-lp .company img{height: 160px;}
.fabric-lp .company img:first-child{width: 172px;}
.fabric-lp .company img:last-child{width: 137px;}
.blur-overlay {position: absolute;backdrop-filter: blur(8px);pointer-events: none;-webkit-backdrop-filter: blur(8px);z-index: 1;-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);-webkit-mask-size: 100% 100%;mask-size: 100% 100%;}

@media screen and (max-width: 1280px){
    .fabric-lp .company::before {left: -6%;}
    .fabric-lp .company::after {right: -6%;}
}
@media screen and (max-width: 960px){
    /* .fabric-lp .company::before,.fabric-lp .company::after {content: none;} */
    .fabric-lp .company::before {left: -10%;bottom: 0;}
    .fabric-lp .company::after {right: -10%;}
    .fabric-lp .company p {width: 90%;}
}
@media screen and (max-width: 767px){
    .fabric-lp .company p {width: 100%;}
}
@media screen and (max-width: 580px){
    .fabric-lp .company .container {margin: 0 30px;}
}
@media screen and (max-width: 450px){
    .fabric-lp .company .company_img {flex-direction: column;align-items: center;}
}

/* Fabric LP service */
.fabric-lp .service .container{padding: 80px 0 0;display: grid;gap: 40px;}
.fabric-lp .service .service_cont{border-radius: 6px;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);max-width: 1280px;gap: 60px;display: flex;margin: 0 auto;padding: 20px 60px 20px 20px;}
.fabric-lp .service .service_cont img{max-width: 595px;max-height: 372px;border-radius: 6px;}
.fabric-lp .service .service_cont div{padding-top: 70px;}
.fabric-lp .service .service_cont h3{position: relative;}
.fabric-lp .service .service_cont h3::after{content: "";background-color: #4C7AFF;width: 80px;height: 3px;position:absolute;display: block;bottom: -20px;}
.fabric-lp .service .service_cont p{max-width: 545px;padding-top: 50px;}

@media screen and (max-width: 1380px){
    .fabric-lp .service .container{margin: 0 50px;}
}
@media screen and (max-width: 1290px){
    .fabric-lp .service .service_cont {align-items: center;}
    .fabric-lp .service .service_cont picture{width: 50%;}
    .fabric-lp .service .service_cont img {width: 100%;}
    .fabric-lp .service .service_cont div {padding-top: unset;}
}
@media screen and (max-width: 1200px){
    .fabric-lp .service .service_cont picture{width: 44%;}
    .fabric-lp .service .service_cont {padding: 20px 40px 20px 20px;}
    .fabric-lp .service .service_cont {gap: 45px;}
}
@media screen and (max-width: 1040px){
    .fabric-lp .service .container {margin: 0 30px;}
    .fabric-lp h3 {font-size: 1.65em;}
}
@media screen and (max-width: 960px){
    .fabric-lp .service .service_cont {flex-direction: column;gap: 30px;}
    .fabric-lp .service .service_cont picture{width: 100%;}
    .fabric-lp .service .service_cont{padding: 40px 20px;}
}
@media screen and (max-width: 540px){
    .fabric-lp .service .container {margin: 0 20px;gap: 30px;}
    .fabric-lp h3 {font-size: 1.5em;}
}

/* Fabric LP flow */
.fabric-lp .flow .container{margin-bottom: 100px;}
.fabric-lp .flow h3{text-align: center;margin-bottom: 40px;}
.fabric-lp .flow .flow_table{padding-top: 128px;}
.fabric-lp .flow .flow_table table{border-collapse: collapse;width: 100%;max-width: 1162px;margin: 0 auto;border: 1px solid #C5C5C5;}
.fabric-lp .flow .flow_table th,.fabric-lp .flow .flow_table td:not(.flow_table_tr_role td){border: 1px solid #C5C5C5;}
.fabric-lp .flow .flow_table th,.fabric-lp .flow .flow_table td{box-sizing: border-box;}
.fabric-lp .flow .flow_table th{text-align: center;vertical-align: middle;font-weight: 600;background: #E7EDFE;max-width: 123px;width: 50%;white-space: nowrap;}
.fabric-lp .flow .flow_table td{max-width: 261px;}
.fabric-lp .flow .flow_table img{width: 239px;height: 157px;display: block;}
.fabric-lp .flow_table_tr_img td{padding: 10px;height: 177px;position: relative;}
.fabric-lp .flow_table_step{position: absolute;width: 277px;height: 118px;color: #fff;text-align: center;font-size: 1.25em;font-weight: 600;top: -128px;display: flex;align-items: center;justify-content: center;}
.fabric-lp .flow_table_step01 {background-color: #0181EF;clip-path: polygon(0% 0%,86.64% 0%,100% 50%,86.64% 100%,0% 100%);}
.fabric-lp .flow_table_step02,.fabric-lp .flow_table_step03,.fabric-lp .flow_table_step04 {clip-path: polygon(0% 0%,86.64% 0%,100% 50%,86.64% 100%,0% 100%,13.36% 50%);}
.fabric-lp .flow_table_step02{background-color: #49DBAA;}
.fabric-lp .flow_table_step03{background-color: #F2B22A;}
.fabric-lp .flow_table_step04{background-color: #FE7407;}
.fabric-lp .flow_table_tr_task-client th,.fabric-lp .flow_table_tr_task-self th{writing-mode: tb-rl;}
.fabric-lp .flow_table_tr_task-client td,.fabric-lp .flow_table_tr_task-self td,.fabric-lp .flow_table_tr_act td{padding: 16.5px 25.5px;}
.fabric-lp .flow_table_tr_role{text-align: center;}
.fabric-lp .flow_table_tr_role td:nth-child(2){padding-bottom: 32px;padding-top: 0px;}
.fabric-lp .flow_table_tr_role-arrow{padding-top: 22px;padding-bottom: 22px;}
.fabric-lp .flow_table_tr_role-arrow-l,.fabric-lp .flow_table_tr_role-arrow-r{position: relative;vertical-align: middle;text-decoration: none;}
.fabric-lp .flow_table_tr_role-arrow div::before,.fabric-lp .flow_table_tr_role-arrow div::after{position: absolute;top: 9px;bottom: 0;margin: auto;content: "";vertical-align: middle;}
.fabric-lp .flow_table_tr_role-arrow div::before{height: 18px;width: 15px;box-sizing: border-box;}
.fabric-lp .flow_table_tr_role-arrow div::after{background:#4C7AFF;height: 3px;width: 50%;}
.fabric-lp .flow_table_tr_role-arrow-l::before{left: -7px;	border: 9px solid transparent;border-right: 15px solid #4C7AFF;}
.fabric-lp .flow_table_tr_role-arrow-l::after{left: 10px;}
.fabric-lp .flow_table_tr_role-arrow-r::before{right: -7px;border: 9px solid transparent;border-left: 15px solid #4C7AFF;}
.fabric-lp .flow_table_tr_role-arrow-r::after{right: 10px;}
.fabric-lp .flow .flow_table p{position: relative;line-height: 26px;}
.fabric-lp .flow .flow_table p::before{content: "・";position: absolute;left: -14px;}
.fabric-lp .flow_table_txt-b{font-weight: 600;}
.fabric-lp .flow_table_txt-b::before{font-weight: 400;}






/* Fabric LP service-menu */
.fabric-lp .service-menu{background: #F0F2F6;}
.fabric-lp .service-menu .container{padding: 80px 0;}
.fabric-lp .service-menu .service-menu_tit{text-align: center;font-size: 1.5em;font-weight: 600;}
.fabric-lp .service-menu .service-menu_wrap{display: flex;gap: 22px;justify-content: center;margin: 80px auto 0;}
.fabric-lp .service-menu .service-menu_li{max-width: 302px;width: 24%;min-height: 381px;border-radius: 6px;background: #FFF;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);position: relative;}
.fabric-lp .service-menu .service-menu_li::before{width: 70px;height: 70px;position: absolute;background-color: #4C7AFF;border-radius: 35px;font-weight: 600;font-size: 1.125em;color: #FFF;top: -35px;transform: translateX(-50%);left: 50%;display: flex;align-items: center;justify-content: center;}
.fabric-lp .service-menu .service-menu_li:first-child::before{content: "01";}
.fabric-lp .service-menu .service-menu_li:nth-child(2)::before{content: "02";}
.fabric-lp .service-menu .service-menu_li:nth-child(3)::before{content: "03";}
.fabric-lp .service-menu .service-menu_li:last-child::before{content: "04";}
.fabric-lp .service-menu .service-menu_li_tit{font-size: 1.125em;text-align: center;font-weight: 600;padding: 66px 0 35px;}
.fabric-lp .service-menu .service-menu_li:nth-child(2) .service-menu_li_tit{padding: 66px 0 30px!important;}
.fabric-lp .service-menu img{height: 56px;left: 50%;transform: translateX(-50%);position: relative;padding-bottom: 30px;}
.fabric-lp .service-menu .service-menu_li:first-child img{width: 65px;}
.fabric-lp .service-menu .service-menu_li:nth-child(2) img{width: 60px;padding-bottom: 35px!important;}
.fabric-lp .service-menu .service-menu_li:nth-child(3) img{width: 61px;}
.fabric-lp .service-menu .service-menu_li:last-child img{width: 63px;}
.fabric-lp .service-menu .service-menu_li_txt{font-size: 14px;line-height: 28px;font-weight: 300;padding: 0 30px 51px 44px;}
.fabric-lp .service-menu p{position: relative;}
.fabric-lp .service-menu p::before{content: "・";position: absolute;left: -14px;}

@media screen and (max-width: 1380px){
    .fabric-lp .service-menu .service-menu_wrap {margin: 80px 50px 0;}
}
@media screen and (max-width: 1150px){
    .fabric-lp .service-menu .service-menu_wrap {flex-wrap: wrap;gap: 57px 22px;}
    .fabric-lp .service-menu .service-menu_li {max-width: unset;width: 40%;min-height: unset;}
    .fabric-lp .service-menu .service-menu_li_txt {padding: 0 65px 51px 80px;}
}
@media screen and (max-width: 960px){
    .fabric-lp .service-menu .service-menu_li_txt {padding: 0 30px 50px 50px;}
    .fabric-lp .service-menu .service-menu_li {width: 302px;}
}
@media screen and (max-width: 767px){
    .fabric-lp .service-menu .service-menu_wrap {margin: 80px 20px 0;}
}

/* Fabric LP campaign */
.fabric-lp .campaign .container{padding-top: 76px;}
.fabric-lp .campaign h3{text-align: center;}
.fabric-lp .campaign .campaign_wrap{display: flex;gap: 44px;padding-top: 33px;justify-content: center;}
.fabric-lp .campaign .campaign_cont{max-width: 553px;width: 42%;}
.fabric-lp .campaign .campaign_cont div{color: #4C7AFF;text-align: center;font-size: 1.5em;font-weight: 700;line-height: 36px;}
.fabric-lp .campaign .campaign_cont div .br_sp{display: none;}
.fabric-lp .campaign .campaign_cont img{padding: 30px 0;max-width: 553px;height: auto;width: 100%;}
.fabric-lp .campaign .campaign_cont p{font-weight: 500;line-height: 32px;}
.campaign_wrap02{text-align: center;}
.campaign_cont02{margin-top: 60px;display: inline-flex;padding: 40px 100px;flex-direction: column;align-items: flex-start;gap: 10px;border-radius: 10px;background: #FFF;box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);}
.campaign_cont02 div{font-size: 24px;margin: 0 auto;font-weight: 600;line-height: 32px;padding-bottom: 14px;}
.campaign_cont02 p{font-size: 18px;font-weight: 400;line-height: 32px;text-align: left;text-indent: -24px;margin-left: 24px;}
.campaign_cont02 p span{font-weight: 600;}
.campaign_cont02 p::before{content:"■"}

@media screen and (max-width: 1250px){
    .fabric-lp .campaign .campaign_wrap {margin: 0 50px;}
    .fabric-lp .campaign .campaign_cont div .br_sp{display: block;}
    .fabric-lp .campaign .campaign_cont div {height: 108px;}
}
@media screen and (max-width: 1061px){
    .campaign_cont02 {padding: 40px 80px;margin: 60px 40px 0;}
}
@media screen and (max-width: 960px){
    .fabric-lp .campaign .campaign_cont {width: 48%;}
    .fabric-lp .campaign .campaign_wrap {margin: 0 30px;}
    .campaign_cont02 {padding: 40px 50px;}
}
@media screen and (max-width: 767px){
    .fabric-lp .campaign .campaign_wrap {flex-direction: column;align-items: center;}
    .fabric-lp .campaign .campaign_cont {width: 100%;}
    .fabric-lp .campaign .campaign_cont div {height: unset;}
    .campaign_cont02 {margin: 60px 20px 0;}
}
@media screen and (max-width: 560px){
    .campaign_cont02 {padding: 40px 20px;}
}


/* Fabric LP contact */
.fabric-lp .contact .container{display: grid;gap: 20px;padding: 87px 0 103px;}
.fabric-lp .contact p{text-align: center;font-size: 1.25em;font-weight: 600;}

/* -------//Fabric LP css------- */

.fabric-lp .fadeUpTrigger {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fabric-lp .fadeUp {
  opacity: 1;
  transform: translateY(0);
}

.fabric-lp .delay-text {
  transition-delay: 0.3s;
}

.fabric-lp .purview-delay .fadeUpTrigger {
  transition-delay: .6s;
}

.fabric-lp .purview-delay .delay-text {
  transition-delay: .9s;
}

.fabric-lp .about_cont.reverse {
  display: flex;
  flex-direction: row-reverse;
}
@media screen and (max-width: 960px){
    .fabric-lp .about_cont.reverse {flex-direction: column;}
}



/* ----------------- fabric-lp ---webp--- CSS ------------------ */

@supports (background-image: url("image.webp")) {
.fabric-lp .mv{background-image: url(/common/images/product/fabric-lp_mv.webp);}
.fabric-lp .company{background-image: url(/common/images/product/fabric-lp_company_bg.webp);}
}

@supports not (background-image: url("image.webp")) {
.fabric-lp .mv{background-image: url(/common/images/product/fabric-lp_mv.png);}
.fabric-lp .company{background-image: url(/common/images/product/fabric-lp_company_bg.png);}
}