@charset "utf-8";

/* --- Jssor Slider 基本レイアウト --- */
.hero-slider {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    background: #f9f9f9;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* スライダーコンテナのレスポンシブ対応 */
#slider1_container {
    max-width: 100%;
}

/* スライド内の各スライド画像 */
.fws_slides img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* 下のドットナビゲーション(バレット) */
.jssorb21 {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.jssorb21 div {
    width: 19px;
    height: 19px;
    background: url(../images/top_slide/bullet.png) no-repeat; /* パスに注意 */
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin-left: 8px;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }

/* 左右の矢印ボタン */
.jssora21l, .jssora21r {
    display: block;
    position: absolute;
    cursor: pointer;
    background: url(../images/top_slide/a21.png) no-repeat; /* パスに注意 */
    width: 55px;
    height: 55px;
    top: 50%;
    transform: translateY(-50%);
}
.jssora21l { background-position: -3px -33px; left: 8px; }
.jssora21r { background-position: -63px -33px; right: 8px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }

/* 画像を背景と馴染ませる設定 */
.multiply { mix-blend-mode: multiply; }

/* スマホ表示時のスライダー高さ微調整 */
@media screen and (max-width: 640px) {
    .hero-slider, #slider1_container, .fws_slides {
        height: auto !important;
        aspect-ratio: 720 / 320;
    }
}