/* 競馬ナビスライダー フロントエンドスタイル */

/* スライダーコンテナ */
.kns-slider{margin:0 auto 30px;position:relative;max-width:100%}
/* スライド */
.kns-slide{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1)}
.kns-slide a{display:block;text-decoration:none;color:inherit}
/* スライド画像 */
.kns-slide-image{position:relative;overflow:hidden;width:100%;height:0;padding-bottom:56.25%; /* 16:9のアスペクト比 */}
.kns-slide-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}

/* 画像がない場合のプレースホルダー */
.kns-slide-image img.no-image,.kns-slide-image img[src=""],.kns-slide-image img:not([src]){background-color:#f0f0f0;display:flex;align-items:center;justify-content:center}
.kns-slide-image img.no-image:after,.kns-slide-image img[src=""]:after,.kns-slide-image img:not([src]):after{content:"No Image";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:18px;color:#999}
.kns-slide:hover .kns-slide-image img{transform:scale(1.05)}
/* スライドコンテンツ */
.kns-slide-content{position:absolute;bottom:0;left:0;width:100%;padding:20px;background:linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));color:#fff}
.kns-slide-title{margin:0 0 10px;font-size:24px;font-weight:700;line-height:1.3;text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5)}
.kns-slide-excerpt{margin:0;font-size:16px;line-height:1.5;opacity:0.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
/* スライダーナビゲーション（矢印） */
.kns-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;background-color:rgba(255, 255, 255, 0.8);border-radius:50%;box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);cursor:pointer;transition:all 0.3s ease;font-size:0;border:none;outline:none}

.kns-slider .slick-arrow:hover{background-color:rgba(255, 255, 255, 1)}
.kns-slider .slick-prev{left:15px}
.kns-slider .slick-next{right:15px}
.kns-slider .slick-prev:before,.kns-slider .slick-next:before{font-family:"dashicons";font-size:20px;line-height:1;color:#333;opacity:0.75}
.kns-slider .slick-prev:before{content:"\f341"; /* dashiconsの左矢印 */}
.kns-slider .slick-next:before{content:"\f345"; /* dashiconsの右矢印 */}
/* スライダードット */
.kns-slider .slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}
.kns-slider .slick-dots li{position:relative;display:inline-block;width:10px;height:10px;margin:0 5px;padding:0;cursor:pointer;}
.kns-slider .slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:10px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}
.kns-slider .slick-dots li button:before{content:'';position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;background-color:#ccc;opacity:0.5;transition:all 0.3s ease;}

.kns-slider .slick-dots li.slick-active button:before{opacity:1;background-color:#333;}
/* スライダーナビゲーション */
.slider-nav{position:relative;margin-top:15px;text-align:center;}
.slider-dots{display:inline-block;padding:0;margin:0;}
/* カスタムドットスタイル */
.kns-slider .slick-dots{position:static;bottom:auto;margin-top:15px;}
.kns-slider .slick-dots li{width:12px;height:12px;margin:0 6px;}
.kns-slider .slick-dots li button{width:12px;height:12px;}
.kns-slider .slick-dots li button:before{width:12px;height:12px;background-color:#ddd;transition:all 0.3s ease;}
.kns-slider .slick-dots li.slick-active button:before{background-color:#333;transform:scale(1.2);}
/* センターモード用のスタイル */
.kns-slider .slick-slide{
    transition:all 0.3s ease;
    transform:scale(0.8);
    opacity:0.7;
    margin:0 -15px; /* スライド間の余白を狭くする（負のマージン） */
    @media screen and (max-width:768px){
        margin:0 -5px; /* モビル環境でのスライド間の余白を狭くする（負のマージン） */
    }
}

.kns-slider .slick-center{transform:scale(1);opacity:1;}
.kns-slider .slick-slide img{transition:all 0.3s ease;}
.kns-slider .slick-center img{box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);}
.kns-slider .slick-center .kns-slide-content{opacity:1;}
.kns-slider .slick-slide .kns-slide-content{opacity:0.8;}
/* バナースライダーのスタイル */
.kns-banner-slider{
    margin:0 auto 30px;
    position:relative;
    max-width:100%;
}

/* バナースライド */
.kns-banner-slide{
    position:relative;
    overflow:hidden;
    border-radius:6px;
    box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
    margin:0 8px;
    transition:transform 0.3s ease;
    @media screen and (max-width:834px){
        margin:0 4px;
      }
}

.kns-banner-slide:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);}
.kns-banner-slide a{display:block;text-decoration:none;color:inherit;}
/* バナースライド画像 */
.kns-banner-slide-image{
    position:relative;
    overflow:hidden;
    width:100%;
    height:0;
    padding-bottom:56.25%; /* 16:9のアスペクト比 */
    @media screen and (max-width:834px){
        padding-bottom:63.5%;
    }
}

.kns-banner-slide-image img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* バナータイトル */
.kns-banner-slide-title{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:8px 12px;
    background:rgba(0, 0, 0, 0.6);
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-align:center;
}

/* バナースライダーのナビゲーション（矢印） */
.kns-banner-slider .slick-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:30px;
    height:30px;
    background-color:rgba(255, 255, 255, 0.8);
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:0;
    border:none;
    outline:none;
}

.kns-banner-slider .slick-arrow:hover{background-color:rgba(255, 255, 255, 1);}
.kns-banner-slider .slick-prev{left:-15px;}
.kns-banner-slider .slick-next{right:-15px;}
.kns-banner-slider .slick-prev:before,
.kns-banner-slider .slick-next:before{font-family:"dashicons";font-size:16px;line-height:1;color:#333;opacity:0.75;}
.kns-banner-slider .slick-prev:before{content:"\f341"; /* dashiconsの左矢印 */}
.kns-banner-slider .slick-next:before{content:"\f345"; /* dashiconsの右矢印 */}
/* バナースライダードット */
.kns-banner-slider .slick-dots{position:absolute;bottom:-25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}
.kns-banner-slider .slick-dots li{position:relative;display:inline-block;width:8px;height:8px;margin:0 4px;padding:0;cursor:pointer;}
.kns-banner-slider .slick-dots li button{
    font-size:0;
    line-height:0;
    display:block;
    width:8px;
    height:8px;
    padding:4px;
    cursor:pointer;
    color:transparent;
    border:0;
    outline:none;
    background:transparent;
}

.kns-banner-slider .slick-dots li button:before{content:'';position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background-color:#ccc;opacity:0.5;transition:all 0.3s ease;}

.kns-banner-slider .slick-dots li.slick-active button:before{opacity:1;background-color:#333;}
/* バナースライダーのナビゲーション */
.kns-banner-slider .slick-dots{position:static;bottom:auto;margin-top:10px;}
.kns-banner-slider .slick-dots li{width:10px;height:10px;margin:0 5px;}
.kns-banner-slider .slick-dots li button{width:10px;height:10px;}
.kns-banner-slider .slick-dots li button:before{width:10px;height:10px;background-color:#ddd;transition:all 0.3s ease;}
.kns-banner-slider .slick-dots li.slick-active button:before{background-color:#333;transform:scale(1.2);}
/* レスポンシブ対応 */
@media (max-width:768px){
    .kns-slide-title{font-size:20px;}
    .kns-slide-excerpt{font-size:14px;-webkit-line-clamp:1;}
    .kns-slider .slick-arrow{width:30px;height:30px;}
    .kns-banner-slide-title{font-size:12px;padding:6px 10px;}
    .kns-banner-slider .slick-arrow{width:24px;height:24px;}
}
@media (max-width:480px){
    .kns-slide-content{padding:15px;}
    .kns-slide-title{font-size:18px;margin-bottom:5px;}
    .kns-slide-excerpt{display:none;}
}