@charset "UTF-8";

/* ―――――――――――――――――――――――――― */
/* スライダーを作る（slider） */
/* ―――――――――――――――――――――――――― */

/* 表示スペース */
.container {
    width: min(85%, 500px);
    height: 300px;
    margin: 0 auto 30px;
    position: relative;
}

/* スペースに画像を合わせる */
.container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 両ボタンの表示・位置（共通） */
.container .pre_btn,
.container .next_btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff8585b1;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* ［前に戻る］ボタンの位置 */
.container .pre_btn {
    left: -15px;
}

/* ［次に進む］ボタンの位置 */
.container .next_btn {
    right: -15px;
}

/* 両ボタンの矢印マーク（共通） */
.container .pre_btn::before,
.container .next_btn::before {
    content: "";
    display: block;
    width: 30%;
    height: 30%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    inset: 0;
    margin: auto;
}

/* ［前に戻る］ボタンの［＜］マーク */
.container .pre_btn::before {
    transform: rotate(-135deg);
    left: 18%;
}

/* ［次に進む］ボタンの［＞］マーク */
.container .next_btn::before {
    transform: rotate(45deg);
    left: -18%;
}