/* スライダーとボタンの親要素のスタイル */
.slider-container {
    position: relative;
}

/* 戻るボタンと進むボタンのスタイル */
.slick-before,
.slick-rear {
    position: absolute;
    top: 50%;
    font-size: 50px;
    cursor: pointer;
	background-color: transparent;
    color: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    z-index: 1; /* スライダーより手前に表示する */
}

.slick-before:hover,
.slick-rear:hover {
    background-color: rgba(0, 0, 0, 0.5); /* ホバー時の透明度を変更 */
	color: rgba(0, 0, 0, 1);
}

.slick-before {
    left: 0;
    transform: translate(0%, -50%); /* 上端に配置するための調整 */
}

.slick-rear {
    right: 0;
    transform: translate(0%, -50%); /* 上端に配置するための調整 */
}

/* スマホ向け画面でのボタンの修正 */
@media only screen and (max-width: 480px) {
    .slick-before,
    .slick-rear {
        font-size: 20px; /* フォントサイズをさらに小さく調整 */
        padding: 2px 4px; /* パディングを小さく調整 */
        border-radius: 5px; /* ボーダーラジウスを調整 */
    }
}

/* タブレット向け画面でのボタンの修正 */
@media only screen and (min-width: 481px) and (max-width: 1366px) {
    .slick-before,
    .slick-rear {
        font-size: 25px; /* フォントサイズを調整 */
        padding: 3px 6px; /* パディングを調整 */
        border-radius: 7px; /* ボーダーラジウスを調整 */
    }
}