/* ======================== */
/* スライダー全体のスタイル */
/* ======================== */

#top-slider {
    width: 100%;
    padding: 0 3%;
    position: relative;
    overflow: hidden;
}

#top-slider .slider {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 5rem;
    position: relative;
    overflow: hidden;
}

/* スライダーの表示領域 */
#top-slider .slider-viewport {
    width: 100%;
    max-width: 700px;
    height: calc(700px * 0.32288);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

/* スライドを横並びに配置 */
#top-slider .slider-items {
    display: flex;
}

/* 各スライドを均等幅に設定 */
#top-slider .slider-slide {
    flex: 1;
}

/* ======================== */
/* スライド内の画像のスタイル */
/* ======================== */
/* スライド内の画像を比率固定で表示 */
#top-slider .slider-image {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: calc(700px * 0.32288);
}

#top-slider .slider-image img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
	#top-slider .slider {
	    margin: 0 auto 2rem;
	}
    #top-slider .slider-viewport,
    #top-slider .slider-image {
        height: calc(100vw * 0.32288);
    }
}

/* ======================== */
/* スライド操作エリアのスタイル（ナビゲーション＋サムネイル） */
/* ======================== */
@media print,
(min-width: 768px) {
    #top-slider .slider-controls {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    #top-slider .slider-controls {
        margin-top: 15px;
    }
}

#top-slider .slider-controls-inner {
    position: relative;
}

/* ======================== */
/* 矢印ナビゲーションのスタイル */
/* ======================== */
/* 矢印ボタンのサイズ調整 */
#top-slider .slider-nav button {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

@media print,
(min-width: 768px) {
    #top-slider .slider-nav button {
        width: 40px;
    }
}

@media screen and (max-width: 767px) {
    #top-slider .slider-nav button {
        width: 25px;
    }
}

/* 矢印アイコンのスタイル */

#top-slider .slider-nav button {
    width: 32px;
    height: calc(700px * 0.32288);
    margin: 0;
    padding: 0;
    z-index: 10;
}

#top-slider .slider-nav button::before {
    content: ' ';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    background-image: url('https://www.kanematsu-group.co.jp/webap/wp-content/themes/RISING-test/img/slider_arrow.svg');
    background-position: center;
    background-size: contain;
    transition: opacity 300ms cubic-bezier(.215, .61, .355, 1);
    opacity: 0.5;
}

@media print,
(max-width: 768px) {
    #top-slider .slider-nav button::before {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 400px) {
    #top-slider .slider-nav button::before {
        width: 16px;
        height: 16px;
    }
}

/* 矢印ボタンのホバー・アクティブ状態のスタイル */
@media print,
(min-width: 768px) {

    #top-slider .slider-nav button:hover::before,
    #top-slider .slider-nav button:active::before {
        opacity: .8;
    }
}

/* 左矢印ボタンのスタイル */
#top-slider .slider-nav button:nth-child(1) {
    left: 16px;
}

#top-slider .slider-nav button:nth-child(1)::before {
    left: 16px;
    transform: scaleX(-1);
}

/* 右矢印ボタンのスタイル */
#top-slider .slider-nav button:nth-child(2) {
    right: 16px;
}

#top-slider .slider-nav button:nth-child(2)::before {
    right: 16px;
}



/* ======================== */
/* サムネイルのスタイル */
/* ======================== */
#top-slider .slider-thumbnails {
    overflow: hidden;
}

@media print,
(min-width: 768px) {
    #top-slider .slider-thumbnails {
        width: 670px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 767px) {
    #top-slider .slider-thumbnails {
        margin: 0 25px;
    }
}

/* 中央のサムネイル1つ分の表示枠 */
#top-slider .slider-thumbnails-center {
    width: 20%;
    margin: 0 auto;
}

/* サムネイルを横並びに配置 */
#top-slider .slider-thumbnails-items {
    display: flex;
}

/* 各サムネイルを均等幅に設定 */
#top-slider .slider-thumbnails-slide {
    flex: 1;
}

@media print,
(min-width: 768px) {
    #top-slider .slider-thumbnails-slide {
        padding: 0 5px;
    }
}

@media screen and (max-width: 767px) {
    #top-slider .slider-thumbnails-slide {
        padding: 0 3px;
    }
}

/* サムネイルのボタンスタイル */
#top-slider .slider-thumbnails-slide button {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1480/832;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 300ms cubic-bezier(.215, .61, .355, 1);
}

#top-slider .slider-thumbnails-slide button::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(.215, .61, .355, 1);
}

#top-slider .slider-thumbnails-slide button img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* サムネイルのホバー・アクティブ状態 */
@media print,
(min-width: 768px) {
    #top-slider .slider-thumbnails-slide button:hover,
    #top-slider .slider-thumbnails-slide button:active {
        opacity: 0.8;
    }
}

/* 現在のスライドを示すサムネイルのスタイル */
#top-slider .slider-thumbnails-slide.is-current button {
    pointer-events: none;
}

#top-slider .slider-thumbnails-slide.is-current button::before {
    opacity: 1;
}

/* ======================== */
/* グラブカーソルの設定 */
/* ======================== */
/* フリック操作中のカーソル変更 */
#top-slider .slider.is-grabbing .slider-viewport,
#top-slider .slider.is-grabbing .slider-viewport * {
    cursor: grabbing !important;
}

/* ======================== */
/* サムネイルが5個以下のときのレイアウト調整 */
/* ======================== */
#top-slider .slider.is-lte5 .slider-controls {
    display: flex;
    justify-content: center;
}

@media print,
(max-width: 768px) {
    #top-slider .slider.is-lte5 .slider-nav button:nth-child(1) {
        left: 8px;
    }
}

@media print,
(max-width: 768px) {
    #top-slider .slider.is-lte5 .slider-nav button:nth-child(2) {
        right: 8px;
    }
}

@media print,
(min-width: 768px) {
    #top-slider .slider.is-lte5 .slider-thumbnails {
        width: auto;
    }
}

#top-slider .slider.is-lte5 .slider-thumbnails-center {
    width: auto;
}

#top-slider .slider.is-lte5 .slider-thumbnails-track-wrapper {
    width: auto !important;
}

#top-slider .slider.is-lte5 .slider-thumbnails-track-offset {
    transform: none !important;
}

#top-slider .slider.is-lte5 .slider-thumbnails-track {
    transform: none !important;
}

#top-slider .slider.is-lte5 .slider-thumbnails-items {
    transform: none !important;
}

#top-slider .slider.is-lte5 .slider-thumbnails-slide {
    flex: none;
}

@media print,
(min-width: 768px) {
    #top-slider .slider.is-lte5 .slider-thumbnails-slide {
        width: 124px;
    }
}

@media screen and (max-width: 767px) {
    #top-slider .slider.is-lte5 .slider-thumbnails-slide {
        width: 53px;
    }
}

#top-slider .slider-thumbnails-slide {
    width: 18px !important;
    height: 18px;
}

#top-slider .slider-thumbnails-slide button {
    width: 10px !important;
    height: 10px;
    background: RGBA(0, 0, 0, 0.67);
    box-sizing: border-box;
    border-radius: 20px;
}

#top-slider .slider-thumbnails-slide.is-current button,
#top-slider .slider-thumbnails-slide button:hover {
    opacity: 1;
    background: #1D81F9;
    border: none;
}

#top-slider .slider-thumbnails-slide button img {
    display: none;
}