/*====================================================================
slick
====================================================================*/

/* html,
body {
    margin: 0;
    padding: 0;
} */

* {
    box-sizing: border-box;
}

.sliderArea .slider > div {
    display: flex;
    flex-direction: column;
    /* 画像 → テキストの縦並び */
    align-items: center;
    /* 横方向の中央揃え */
    justify-content: center;
    /* 縦方向の中央揃え */
    text-align: center;
}


.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    overflow: hidden;   /* スライドがはみ出さないようにする */
}

.sliderArea.w300 {
    max-width: 300px;
}

/* スライド側に固定高さを設定 */
.slick-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    min-width: 0; /* 画像の幅に合わせてスライドの幅を調整 */;
    padding: 0 5px; /* スライド間のスペースを調整 */
}

.height-200 {
    height: 200px !important;
}

.height-300 {
    height: 300px !important;
}

/* 画像をコンテナ内に合わせる */
.slick-slide img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: center;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 20px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}

/*====================================================================
.full-screen
====================================================================*/

.full-screen .slick-list {
    overflow: visible;
}

.full-screen.slider {
    max-width: 300px;
    margin: 0 auto;
}