@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position: relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*　背景画像設定　*/

/* .slider-item01 {
    background: url(../img/img_01.jpg);
}

.slider-item02 {
    background: url(../img/img_02.jpg);
}

.slider-item03 {
    background: url(../img/img_03.jpg);
} */

.slider-item {
    width: 100%;
    /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh;
    /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;
    /*背景画像をリピートしない*/
    background-position: center;
    /*背景画像の位置を中央に*/
    background-size: cover;
    /*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev,
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;
    /*矢印の色*/
    border-right: 2px solid #fff;
    /*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {
    /*戻る矢印の位置と形状*/
    left: 2.5%;
    transform: rotate(-135deg);
}

.slick-next {
    /*次へ矢印の位置と形状*/
    right: 2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: -50px 0 0 0;
    /*ドットの位置*/
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    /*ドットボタンのサイズ*/
    height: 8px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #fff;
    /*ドットボタンの色*/
}

.slick-dots .slick-active button {
    background: #333;
    /*ドットボタンの現在地表示の色*/
}


/* 追記 */
/* .event {
    background-color: red;
} */

.slider {
    /* background-color: blue; */
    /* max-width: 120rem; */
    max-width: 128rem;
    margin: 0 auto;
    height: auto;
    padding: 16rem 4rem;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    z-index: 9;
    width: calc(100% - 8rem);
    overflow: hidden;
}

.event-content {
    height: auto;
    width: 100%;
}

.event-l {
    width: calc(100% / 3 * 2);
    height: auto;
    /* background-color: yellow; */
    padding: 8rem 4rem 8rem 8rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.event-r {
    width: calc(100% / 3);
    height: auto;
    /* background-color: pink; */
    padding: 8rem 8rem 8rem 4rem;
}

/* .slick-slide img{
    padding: 8rem 8rem 8rem 4rem;
} */

.slick-prev,
.slick-next {
    top: 50%;
}

.slick-list {
    background-image: url(../img/event-bg2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem;
}

/* 高さ揃える */
.slick-track {
    display: flex;
    align-items: stretch;
    object-fit: hidden;
}

.slick-slide {
    height: auto !important;
}

.slick-list {
    height: auto;
    width: 100%;
}

.slick-list {
    height: auto;
    width: 100%;
}

/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

/* タブレット縦向きのみ */
@media screen and (min-width:481px) and (max-width:1024px)and (orientation:portrait) {
    .event-l {
        padding: 3.2rem 1.6rem 3.2rem 3.2rem;
        width: calc(100% / 5 * 3);
        justify-content: center;
    }

    .event-r{
        padding: 3.2rem 3.2rem 3.2rem 1.6rem;
        width: calc(100% / 5 * 2);
    }

    .slider {
        width: calc(100% - 6.4rem);
        padding: 16rem 3.2rem;
    }

}

/* タブレット横向きのみ */
@media screen and (min-width:481px) and (max-width:1024px)and (orientation: landscape) {
/* event */
.event-l{
    padding: 6rem 3rem 6rem 6rem;
}

.event-r{
    padding: 6rem 6rem 6rem 3rem;
}
}


@media screen and (max-width:480px) {
    .slider {
        /* max-width: calc(100% - 4rem); */
        max-width: 100vw;
        /* padding: 6.4rem 2rem; */
        padding: 6.4rem 0;
    }

    .event-content {
        height: auto;
        width: 100%;
        flex-flow: column;
        justify-content: space-between;
    }

    .event-l {
        width: 100%;
        padding: 3rem 3rem 0;
    }

    .event-r {
        width: 100%;
        text-align: center;
        padding: 3rem;
    }

    /* .slick-slide img{
        max-width: calc(100% - 6rem);
        height: auto;
        padding: 3rem;
    } */
}