@charset "utf-8";
/* CSS Document */

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

/*　背景画像設定　*/
/* Sample */
.slider-test01 { background:url(./img/slide/img01.png);}
.slider-test02 { background:url(./img/slide/img02.png);}
.slider-test03 { background:url(./img/slide/img03.png);}

/* slide：03～適宜追加 */
.slider-item01 { background:url(./img/slide/slide01.jpg);}
.slider-item02 { background:url(./img/slide/slide02.jpg);}
.slider-item03 { background:url(./img/slide/slide03.jpg);}
.slider-item04 { background:url(./img/slide/slide04.jpg);}

.slick-list::before{
    content: "";
    position: absolute;
    background: url();
    width: 100%;
    height: calc(100vh - 100px);
    z-index: 2;
    top: 0;
    left: 0;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider-item {
    position: relative;
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: calc(100vh - 100px);
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/* テキストの設定 */
.slider-text {
    position: absolute;
    width: 100%;
    z-index: 2;
    line-height: 1;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: none;
    color: #fff;
    -webkit-text-stroke: 3px #53223F;
    paint-order: stroke;
}
.text01,.text02,.text03,.text04{
    font-size: clamp(4.875rem,4.1vw,78px);
    letter-spacing: 5;
    line-height: 1.3;
}
.text01,.text02{ font-weight: 700;}
.text03{ font-weight: 500;}
.sl-small{ font-size: clamp(2.5rem,2.1vw,40px);}

/*矢印の設定*/
.slick-prev,.slick-next {
    position: absolute;
    z-index: 3;
    top: 48%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 20px;
    width: 20px;
}
.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:-25px 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;
    border: none;
}
.slick-dots .slick-active button{ background:#333;/*ドットボタンの現在地表示の色*/}

@media screen and (max-width: 1280px) {
    .slider-text.right{ top: 90%; left: 59%;}
}

@media screen and (max-width: 1024px) {
    /* テキストの設定 */
    .slider,.slider-item{ height: 40vw;}/* PC版のような表示なら40vw */
    .text01,.text02,.text03,.text04{ line-height: 1.2;}
}

@media screen and (max-width: 768px) {
    /* テキストの設定 */
    .slider,.slider-item{ height: 40vw;}/* PC版のような表示なら40vw */
    .text01,.text02,.text03,.text04{ font-size: clamp(1.75rem,1.6vw,30px);}
    .sl-small{ font-size: clamp(1rem,1.7vw,16px);}

    /*矢印の設定*/
    .slick-prev, .slick-next {
        height: 15px;
        width: 15px;
        border-top: 2px solid #fff;/*矢印の色*/
        border-right: 2px solid #fff;/*矢印の色*/
    }
    .slider-item, .slick-list::before{
        background-size: cover;
        background-position: center;/*背景画像の位置を中央に*/
    }
}

/*========= レイアウトのためのCSS ===============*/
ul{
    margin:0;
    padding: 0;
    list-style: none;
  }