.skill{
    margin-top: 100px;
}

.skill__items{
    background: #F2F2F6;
    padding: 50px;
    border-radius: 5px;
    margin-top: 50px;
}

.skill__item{
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 30px;
    cursor: pointer;
}

.skill__item:nth-of-type(n + 2){
    margin-top: 60px;
    position: relative;
}

.skill__item:nth-of-type(n + 2)::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    top: -30px;
    background-image: repeating-linear-gradient(90deg, #dadae0, #dadae0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #dadae0, #dadae0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(90deg, #dadae0, #dadae0 12px, transparent 12px, transparent 16px), repeating-linear-gradient(180deg, #dadae0, #dadae0 12px, transparent 12px, transparent 16px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}

.skill__box{
    display: flex;
    width: 100%;
    gap: 30px;
}

.skill__img{
    max-width: 240px;
    overflow: hidden;
    border-radius: 5px;
}

.skill__img img{
    transition: transform 0.3s ease;
}

.skill__body{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.skill__heading{
    font-family: "ten-mincho-antique", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.05em;
    color: #030049;
    transition: transform 0.3s ease;
}

.skill__icon{
    width: 51px;
    height: 27px;
    background: #fff;
    border: 1px solid #DADAE0;
    border-radius: 50px;
}

.skill__text{
    font-family: "ten-mincho-antique", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 140%;
    letter-spacing: 0.05em;
    display: none;
}

/* Hover effects */
.skill__item:hover .skill__img img {
    transform: scale(1.1);
}

.skill__item:hover .skill__heading {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .skill{
        margin-top: 50px;
    }
    
    .skill__items{
        padding: 20px;
    }
        
    .skill__item:nth-of-type(n + 2){
        margin-top: 40px;
    }
    
    .skill__item:nth-of-type(n + 2)::before{
        top: -20px;

    }
    
    .skill__box{
        gap: 20px;
        flex-direction: column;
    }
    
    .skill__img{
        max-width: 100%;
        overflow: hidden;
        border-radius: 5px;
        aspect-ratio: 310 / 140;
    }
    
    .skill__img img{
        width: 100%;
    }
    
    .skill__heading{
        font-size: 16px;
        line-height: 120%;
    }
    
    .skill__icon{
        width: 51px;
        height: 27px;
        background: #fff;
        border: 1px solid #DADAE0;
        border-radius: 50px;
    }
    
    .skill__text{
        font-family: "ten-mincho-antique", sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 140%;
        letter-spacing: 0.05em;
        display: none;
    }

    span.title__jp.job__title-jp.skill__title-jp{
        font-size: 26px;
    }
}