@charset "utf-8";

#inc01 .area-service {padding:210px 0 195px}
#inc01 .area-service .col-2{display:flex;align-items:center;padding-left:calc((100% - var(--mainsize)) / 2)}
#inc01 .area-service .col-2 .fl-l{max-width:495px;width:100%}
#inc01 .area-service .col-2 .fl-l .group-tit .tit--ko{padding-bottom:30px}
#inc01 .area-service .col-2 .fl-l .navigation{display:flex;gap:5px;padding-bottom:135px}
#inc01 .area-service .col-2 .fl-l .navigation button{all:unset;display:flex;align-items:center;justify-content:center;width:52px;aspect-ratio:1;border-radius:100px;background-color:#f5f5f5;color:rgba(17,17,17,0.5);cursor:pointer;transition:background-color 0.2s, color 0.2s}
#inc01 .area-service .col-2 .fl-l .navigation button svg{width:20px;height:20px}
#inc01 .area-service .col-2 .fl-l .navigation button:hover{background-color:var(--primary);color:#fff}

#inc01 .area-service .col-2 .fl-r .swiper-slide{max-width:439px;width:100%;aspect-ratio:439 / 540;border-radius:13px;overflow:hidden}
#inc01 .area-service .col-2 .fl-r .swiper-slide a{position:relative;display:flex;width:100%;height:100%}
#inc01 .area-service .col-2 .fl-r .swiper-slide a img{width:100%;height:100%;object-fit:cover}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay{overflow:hidden;opacity:0;visibility:hidden;position:absolute;bottom:0;left:0;width:100%;height:100%;padding:78px 50px;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(5px);transform:translateY(120px);transition:opacity 0.2s, visibility 0.2s 0s,transform 0.3s}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .step{font-family:var(--e-font);font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);text-transform:uppercase}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{padding:15px 0 20px;font-size:35px;font-weight:700;line-height:1.3;color:#fff;white-space:pre-line}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay p.desc{padding-bottom:36px;font-size:17px;line-height:1.6;white-space:pre-line;color:#fff}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow{display:flex;align-items:center;justify-content:center;width:105px;height:30px;font-size:15px;font-weight:600;color:#fff;border-radius:100px;border:1px solid rgba(255,255,255,0.5)}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow span{display:flex;align-items:center;gap:10px;transform:translateX(3px)}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow span svg{width:16px;height:16px;flex-shrink:0}
#inc01 .area-service .col-2 .fl-r .swiper-slide a:hover .overlay{opacity:1;visibility:visible;transform:translateY(0)}

#inc01 .area-solution{position:relative;background-color:var(--primary)}
#inc01 .area-solution::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-image:url(./img/inc01_aside_bg.png);background-repeat:no-repeat;background-size:cover;background-position:center;mix-blend-mode:multiply}
#inc01 .area-solution .inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding:100px 0 95px;text-align:center}
#inc01 .area-solution .group-tit{padding-bottom:30px}
#inc01 .area-solution .group-tit .tit--ko{padding-bottom:12px;font-size:42px;color:#fff}
#inc01 .area-solution .group-tit p.desc{font-size:20px;font-weight:500;color:#fff;white-space:pre-line;line-height:1.5}