@charset "utf-8";

.fv{
  background:#5998AD;
  height:100vh;
  height:100svh;
  color:#F2E5D1;
  position:relative;
}

.fv-img{
  position:absolute;
  top:7.5rem;
  left:5%;
  width:90%;
  height:calc(100% - 10rem);
  overflow:hidden;
}
.fv-img img{
  height:100%;
  object-fit: cover;
  -webkit-animation: zoomUp 5s ease;
  animation: zoomUp 5s linear 0s normal both;
}
@keyframes zoomUp{
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.fv-text{
  position:absolute;
  width:max-content;
  bottom: 5%;
  left: 7.5%;
    background: rgba(31, 29, 27, 0.7);
    padding: 1rem;
}

.fv-text h1{
  font-size:clamp(3rem, 2.273rem + 2.42vw, 5rem);
}

.fv-text h1 + p{
  font-size:18px;
}

.ticker {
  white-space:nowrap;
  width: 100%;
  height:180px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin:0 0 3.5rem;
}
.ticker div {
  display: flex;
  align-items: center;
  animation: ticker 160s linear infinite;
}
.ticker p {
  margin-right: 20px;
  font-size:clamp(5rem, 3.636rem + 4.55vw, 8.75rem);
  color:#4D4A47;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.top-concept{
  position:relative;
}

.top-concept::before{
  content:"";
  position: absolute;
  width: 29%;
  aspect-ratio: 556 / 210;
  left: 25%;
  bottom: -6%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250324181819426707.png) no-repeat right / contain;
}

.top-concept .feature-text{
  gap:0;
}

.top-concept .feature-title{
  margin:0 0 3.5rem;
}

.top-concept .feature-text .accent{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
}

.top-concept .feature-text .accent + p{
  font-size:18px;
  margin:0 0 2.5rem;
}

.top-concept .hand-link{
  margin:2.5rem 0 0 ;
}


.feature-wrap.bruce > img {
  width: 40%;
}

.feature-wrap.bruce .feature-text{
  width: 55%;
}

.bruce-title{
  font-weight:500;
}

.bruce-title p{
  line-height:1.3;
  font-size:1rem;
}

.feature-wrap.bruce .feature-text{
  gap:0;
}

.feature-wrap.bruce .bruce-title + h2{
  font-size:clamp(4.5rem, 2.5rem + 6.67vw, 10rem);
  line-height: 1;
  margin:0 0 2.5rem;
}

.feature-wrap.bruce .bruce-title + h2 + p{
  max-width:400px;
}

.bruce-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.bruce-img{
  width:50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: end;
}

.bruce-img img{
  max-width:100%;
}
.bruce-img img:first-child{
    aspect-ratio: 371 / 60;
    width: 94%;
}

.bruce-img img:nth-child(2){
    aspect-ratio: 285 / 60;
  animation-delay:0.8s !important;
    width: 73%;
}

.bruce-img img:last-child{
  width:100%;
    aspect-ratio: 396 / 60;
  animation-delay:1.2s !important;
}

.bruce-right{
  width:45%;
  position:relative;
  z-index: 0;
}

.bruce-right img{
  animation-delay:2s !important;
}

.bruce-circle{
  animation-delay:1.5s !important;
  aspect-ratio:1/1;
  position:absolute;
  width: 123%;
  border-radius: 999vh;
  background: #ECE8E4;
  z-index: -1;
  top: 50%;
  left: 59%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.top-bruce{
  padding:7.5rem 0 10rem;
}

.slider-wrap{
  margin-top: -10rem;
}

.top-product{
  position:relative;
  padding-top: 10rem;
}

.top-product::before{
  content:"";
  position: absolute;
  width: 11%;
  aspect-ratio: 220 / 154;
  left: 2%;
  top: 0%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250324182217429567.png) no-repeat right / contain;
}

.top-product-title{
  display: flex;
  gap: 4rem;
  align-items: center;
  margin:0 0 3rem;
}

.top-product-title > p{
  width:calc(100% - 200px);
}

.top-product .feature-text{
  gap:0;
  padding:2rem 5% 4rem 0;
}

.top-product .feature-text > img{
  width:160px;
}

.top-product .feature-wrap:first-child{
  background:#5998AD;
}

.top-product .feature-wrap:nth-child(2){
  background:#F2E5D1;
}

.top-product .feature-wrap:nth-child(3){
  background:#E5A999;
}

.top-product .feature-wrap:last-child{
  background:#332E29;
  color:#fff;
}
.top-product .feature-wrap:nth-child(3) .feature-text > img{
  width:140px;
}
.top-product .feature-wrap:last-child .feature-text > img{
  width:90px;
}


.top-product .feature-wrap{
  align-items: stretch;
  position:relative;
}

.top-product .feature-wrap::before{
  content:"";
  position:absolute;
  width: 10%;
  aspect-ratio: 122 / 237;
  bottom: -25%;
  right: -11%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250325101635815390.png) no-repeat right / contain;
}

.top-product .feature-wrap:nth-child(even)::before{
  width: 9%;
  right: auto;
  left:-11%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250325101521721684.png) no-repeat right / contain;
}

.top-product .feature-wrap:nth-child(even){
  flex-direction: row;
}

.top-product .feature-wrap:not(:last-child){
  margin:0 0 4rem;
}

.top-product .feature-wrap:last-child::before{
  width: 14%;
  aspect-ratio: 200 / 422;
  left:-16%;
  bottom: -28%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250325101810194762.png) no-repeat right / contain;
}

.top-product .feature-wrap .feature-p{
  text-align:right;
}

.top-product .feature-wrap .hand-link{
  margin:2rem 0 0 auto;
}

.top-product .feature-text h3.accent{
  font-size:clamp(2rem, 1.273rem + 2.42vw, 4rem);
  margin:0;
}

.top-product .feature-text h3.accent + p{
  margin:0 0 1rem;
}

.top-product .feature-text h4.accent{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
}

.top-product .feature-wrap > img{
  object-fit: cover;
  width: 50%;
  object-position: left bottom;
}

.feature-title h2{
  margin: 8px 0 0;
  font-size: clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
  letter-spacing: 3px;
}

.top-blog{
  padding:4rem 0;
}

.top-blog .container{
  max-width: 1190px !important;
}

.top-blog .top-product-title{
  justify-content: space-between;
}

.top-blog .top-product-title img{
  width: 77%;
}

.top-blog .webgene-blog{
  display:flex;
  gap:5%;
}

.top-blog .webgene-blog article{
  width:30%;
}

.top-blog .webgene-blog article h3{
  font-size: 1rem;
  margin:8px 0 0;
}

.top-blog .webgene-blog .newsDetailImg{
  margin:0 0 1rem;
  overflow:hidden;
}

.top-blog .webgene-blog a  .newsDetailImg img{
  transition:1s;
}

.top-blog .hand-link{
  margin:2rem 0 0 auto;
}

.top-blog .webgene-blog a:hover  .newsDetailImg img{
  transform:scale(1.2);
}

.newsDetailImg img{
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.top-access{
  position:relative;
  padding:100px 0 10rem;
}

.top-access::before{
  content:"";
  position:absolute;
  width: 6.5%;
  aspect-ratio: 122 / 237;
  top: 2%;
  right: 2%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250325102515750688.png) no-repeat right / contain;
}

.top-access::after{
  content:"";
  position:absolute;
  width: 6.5%;
  aspect-ratio: 122 / 237;
  top: 43%;
 left: 3%;
  background: url(https://k9leatherart.com/system_panel/uploads/images/20250325101521721684.png) no-repeat right / contain;
}

.top-info{
  display: flex;
  justify-content: space-between;
  margin:0 0 4rem;
      align-items: center;
}

.top-info-text{
  width: 30%;
}

.top-info-img{
  width: 65%;
  display: flex;
  justify-content: space-between;
      align-items: flex-start;
}

.top-info-img > img{
  width:47.5%;
    aspect-ratio: 445 / 593;
    object-fit: cover;
}

.top-info-img div{
  width:47.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  gap:2rem;
}

.top-info-img div img{
  width:100%;
  display:block;
}

.top-info-img div img:first-child{
    aspect-ratio: 445 / 593;
    object-fit: cover;
}

.top-info-img div img:last-child{
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center 80%;
}

.top-info-text .hand-link{
  margin:4rem 0 0;
}

.text-tel{
  display:flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.text-mail{
  width:fit-content;
  margin-bottom: 1rem;
}

.text-mail + p{
  margin-bottom: 1rem;
}

.text-tel a{
  font-size:2.5rem;
  text-decoration:underline;
}

.text-tel a:hover,
.text-mail:hover{
  color:#DFB971;
}

.bruce-img.sp{
  display:none;
}

@media screen and (min-width: 1025px) {
.ticker + .feature-wrap .feature-text{
  width:57%;
}

.ticker + .feature-wrap .feature-wrap > img{
  width:38%;
}
}


@media screen and (max-width: 1600px) {
.top-info-text {
    width: 350px;
}
.top-info > img {
    width: calc(100% - 400px);
}
}

@media screen and (max-width: 1280px) {
.bruce-img img {
    height: 45px;
  }
}

@media screen and (max-width: 1024px) {
.top-product  .feature-wrap:nth-child(even), 
  .top-product .feature-wrap,
    .top-bruce .feature-wrap:nth-child(even), 
  .top-bruce  .feature-wrap{
    flex-direction: column;
  }
    .top-product .feature-wrap{
    gap:0 !important;
  }
.feature-wrap.bruce > img {
    width: 60%;
}
.top-info {
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}
  .top-info-text,
  .top-product .feature-wrap > img,
  .feature-wrap.bruce .feature-text,
  .top-product-title > p,
  .top-blog .top-product-title img{
    width: 100%;
  }
  .top-info-img{
    width: 100%;
  }
  .top-product .feature-text{
    padding: 2rem 5% 4rem;
  }
    .top-product .container{
    width: 80%;
  }
  .feature-wrap.bruce .bruce-title + h2 + p{
    max-width: none;
  }
.top-concept .feature-title {
    margin: 0 0 1.5rem;
}
  .top-concept::before{
    width: 50%;
    bottom: -8%;
  }
  .top-product::before{
    width: 30%;
    top:-1%;
  }
  .top-product-title{
    flex-direction:column;
    gap:1.5rem;
        align-items: flex-start;
  }
  .top-product .feature-wrap::before{
        width: 17%;
        right: -10%;
        z-index: 10;
        bottom: -17%;
  }
  .top-product .feature-wrap:nth-child(even)::before{
	width: 21%;
    left: -21%;
    z-index: 10;
  }
  .top-product .feature-text > img{
	width: 120px;
  }
.top-product .feature-wrap:last-child .feature-text > img {
    width: 70px;
}
  .top-blog .container{
	width: 85%;
  }
  .top-access::before,
  .top-access::after{
	width: 15%;
  }
  .top-product .feature-wrap:last-child::before{
    display:none;
  }
}

@media screen and (max-width: 767px) {
.bruce-img.sp{
  display:flex;
align-items: flex-start;
gap: 0.5rem;
}
   .bruce-img img:nth-child(1){
     width:212px;
  }
  .bruce-img img:nth-child(2){
    margin:0 0 0 auto;
      width:162px;
  }
   .bruce-img img:nth-child(3){
     width:237px;
  }
    .bruce-img img {
        height: 60px;
    }
  .fv-text{
        width: 90%;
        left: 5%;
        bottom: 2.5rem;
        padding: 0.5rem;
  }
.fv-text h1 + p {
    font-size: 14px;
    line-height: 1.3;
}
  .bruce-wrap,
  .top-blog .webgene-blog{
    flex-direction:column;
    gap:1.5rem;
  }
  .top-concept{
    padding-bottom:5rem;
  }
  .top-blog .webgene-blog{
    gap:4rem;
  }
  .bruce-circle{
    width: 120%;
    left: 50%;
  }
  .bruce-right{
    width: 80%;
  }
    .bruce-img{
    width: 95%;
  }
  .top-access{
padding: 5rem 0 4rem;
  }
  .top-info{
    margin: 2.5rem 0 3rem;
    gap:1.5rem;
  }
  .top-blog .webgene-blog article,
  .feature-wrap.bruce > img{
    width:100%;
  }
  .top-access::before{
    width:20%;
  }
  .top-access::after{
    top: 58%;
    width:17%;
  }
  .top-product-title{
    margin: 0 0 1.5rem;
  }
  .top-product .container{
    width:90%;
  }
.top-product .feature-text {
        padding:10px 5% 20px;
    }
  .top-product .feature-wrap:last-child .feature-text > img{
    width:55px;
  }
.top-product .feature-wrap:nth-child(3) .feature-text > img{
  width:90px;
}
  .top-product .feature-wrap .hand-link{
    margin-top:12px;
  }
  .top-product .feature-wrap::before{
    display:none;
  }
.top-product .feature-wrap:not(:last-child) {
    margin: 0 0 2.5rem;
}
    .top-product::before {
        width: 42%;
        top: 0%;
    }
    .top-concept::before {
        width: 90%;
        bottom: -6%;
        left: 5%;
    }
  .container.bruce{
        width: 80%;
  }
  .feature-wrap.bruce .bruce-title + h2,
    .top-concept .feature-text .accent + p,
  .top-concept .feature-title{
    margin-bottom:1rem;
  }
  .ticker {
    height: 80px;
    margin: 0 0 2.5rem;
  }
.slider-wrap {
    margin-top: -6rem;
}
.top-bruce {
    padding: 7.5rem 0 6rem;
}
  .text-tel a{
    font-size:2rem;
  }
  .fv-text h1{
     font-size:2rem;
  }
  .top-info-img div{
    gap:1rem;
  }
  .top-info-img div img.pc{
    display:none;
  }
  .top-info > img.sp{
     display:block;
    width:70%;
  }
}