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

.slider-item01 {
    background:url(https://t-style.tre-navi.jp/wp-content/uploads/2021/07/topslide_01.jpg);
}

.slider-item02 {
    background:url(https://t-style.tre-navi.jp/wp-content/uploads/2021/07/topslide_02-1.jpg);
}

.slider-item03 {
    background:url(https://t-style.tre-navi.jp/wp-content/uploads/2021/07/topslide_03-1.jpg);
}

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


/*----レイアウト------*/

.wrapper{
    position: relative;
}

.slide_title{
  font-size: 250%;
  color: #ffffff;
  margin-bottom:20px;
}

.slide-content{
  position: absolute;
  top: 50%;left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 150;
  color: #fff;
  margin: 0　10px;padding: 0;
}

/*------タブレット用--------*/
@media(max-width: 800px) {
  .slide_title{
    font-size: 200%;
  }
}

/*------スマートフォン用--------*/
@media(max-width: 600px) {
.slide-content{
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 20%;
  transform: translate(-5%, -10%);
  text-align: left;
  font-size:20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.slide_title{
  font-size: 120%;
  color: #ffffff;
  margin-bottom:10px;
}

.silde-img{
  margin-top: 50px;
}
}