@charset "utf-8";


.lower-title{
  margin-bottom:2.5rem;
}

.black-bg{
  padding:5rem 0 10rem;
  position:relative;
  z-index:0;
}

.black-bg::before{
  content:"";
  position:absolute;
  width: 14%;
  aspect-ratio: 285 / 667;
  right: 0;
  top: -18%;
  z-index:-1;
  background:url(https://k9leatherart.com/system_panel/uploads/images/20250324110501117536.png) no-repeat right/contain;
}

.black-bg::after{
  content:"";
  position:absolute;
  width: 12%;
  aspect-ratio: 212 / 498;
  left: 0;
  bottom: 10%;
    z-index:-1;
  background:url(https://k9leatherart.com/system_panel/uploads/images/20250324110501582686.png) no-repeat left/contain;
}

.concept-wrap{
  display: flex;
  width:75%;
  margin:0 auto;
  align-items: center;
  justify-content: space-between;
  max-width: 1190px;
}

.concept-wrap:not(:last-child){
  margin-bottom:10rem;
}

.concept-wrap:nth-child(even){
  flex-direction:row-reverse;
}

.concept-wrap img{
  width:49%;
}

.concept-text{
  width:45%;
}

.concept-text h2{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  line-height: 2;
  margin-bottom: 5%;
}

.slider-wrap{
  background: #1F1D1B;
  margin-top:-1px;
  position:relative;
}

.slider-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  height:50%;
  background: #4D4A47;
  left:0;
  bottom:-10px;
}

.feature-wrap{
  display:flex;
  justify-content: space-between;
}

.feature-wrap:not(:last-child){
  margin-bottom:3rem;
}

.feature-wrap img{
  width:48%;
}

.feature-text{
  width:48%;
  position: relative;
}

.feature-text strong{
  font-weight:bold;
}

.feature-p{
  position: absolute;
  left: -4rem;
  top: 0;
  writing-mode: vertical-rl;
  height: 100%;
  padding: 0 0.5rem 0 0;
  border-right: 1px solid;
}

.logo-wrap{
  display:flex;
  justify-content: space-between;
}

.logo-text{
  width:50%;
}

.logo-text h3,
.feature-text h3{
  margin-bottom:3rem;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.logo-wrap img{
  width:40%;
  max-width:450px;
}

@media screen and (max-width: 1280px) {
  .black-bg::before{
    top: -10%;
  }
}

@media screen and (max-width: 1024px) {
  .logo-wrap,
  .feature-wrap,
  .concept-wrap,
  .concept-wrap:nth-child(even){
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .feature-wrap,
   .logo-wrap{
    flex-direction: column-reverse;
  }
  .feature-wrap:not(:last-child),
  .concept-wrap:not(:last-child){
    margin-bottom: 5rem;
  }
  .logo-text,
  .feature-text,
  .concept-text{
    width:100%;
  }
  .logo-wrap img{
    width:40%;
  }
  .feature-wrap img,
  .concept-wrap img{
    width:80%;
  }
  .logo-text h3, .feature-text h3 {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .logo-wrap, .feature-wrap, .concept-wrap, .concept-wrap:nth-child(even){
    gap:1.5rem;
  }
  .logo-wrap img{
    width:70%;
  }
  .feature-wrap img,
  .concept-wrap img{
    width:100%;
  }
  .concept-wrap{
    width:90%;
  }
  .black-bg::before {
    top: 0%;
  }
  .black-bg::after{
    bottom: 47%;
  }
  .feature-wrap:not(:last-child),
  .concept-wrap:not(:last-child){
    margin-bottom: 2.5rem;
  }
  .black-bg{
    padding: 5rem 0 5rem;
  }
  .feature-text{
    padding-left: 2rem;
  }
  .feature-p{
    left: -1rem;
    padding:  0;
  }
}