@charset "utf-8";
@media all {
    .slide-skin1 {
        --slide-skin1-font-size-pc:15;
        --slide-skin1-font-size-mob:12;
        font-size: min( calc( var(--slide-skin1-font-size-mob) / 350 * 100vw ), calc(var(--slide-skin1-font-size-pc) * 1px) );
    
        /* swiper variable */
        --swiper-pagination-bullet-inactive-color: transparent;
        --swiper-pagination-color: #fff;
        --swiper-pagination-bullet-horizontal-gap:2px;
        --swiper-pagination-bullet-size:9px;
    }
    .slide-skin1.titleBox { 
        display: grid; grid-template-columns: 1fr auto;
        background: #535353; padding:1em 1.2em 1.2em;
    }
    .slide-skin1.titleBox .title {
        color: #fff; font-weight: bold; font-size: 1.1333em;
    }
    .slide-skin1.titleBox .swiper-pagination { 
        position: static;
    }
    .slide-skin1.titleBox .swiper-pagination .swiper-pagination-bullet {
        border: 1px solid #fff;
    }
    
    .slide-skin1.swiper {
        border: 1px solid #d6d6d6; 
    }
    .slide-skin1.swiper .swiper-slide { 
        padding: 1.5em 1.2em 1.2em; 
    }
    .slide-skin1.swiper .swiper-slide > a {
        display: block; position: relative;
    }  
    .slide-skin1.swiper .swiper-slide .title {
        color: #000; font-weight: bold; font-size: 1.33em;
        margin-bottom: 1em;
    }  
    .slide-skin1.swiper .swiper-slide .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.6; color: #313131;
        margin-bottom: 1.2em;
    }
    .slide-skin1.swiper .swiper-slide .list-tag {
        display: flex; color: var(--main-color); gap:1.5em;
    }
    .slide-skin1.swiper .swiper-slide .list-tag .text { color: #313131; }
    .slide-skin1.swiper .swiper-slide .more {  
        position: absolute; right: 0; bottom: 0; background: #c90000;
        color: #fff; padding: 0.5em; font-size: 1.2em; border-radius: 50%;
    }
    @keyframes slide-skin1-ani1 { 
        50% { transform: translateX(-20%) scale(1.05); } 
    }
    .slide-skin1.swiper .swiper-slide > a:hover .more {
        animation: slide-skin1-ani1 0.4s linear forwards;
    }
}