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

.slider{
    width:100vw;
    height:90vh;
    margin:0 auto;
    position:relative;
  /*background-color: rgba(147,216,255,0.46);*/
}
  
/*スライドの下の余白(10vh)*/
.slider_margin{
  height: 10vh;
}







/*スライドショーの動きを設定 */
.slider_image {
  
  position   : absolute;
  width: 100%;
  height: 100%;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.slider_image .slide {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : slide_animation 15s infinite;   /* 4画像 × 各5s = 20s */
}

/*　画面サイズが1920から1400pxまではここを読み込む　*/
@media screen and (min-width:1400px) and ( max-width:1920px) {
  
.view_1399 {display:none !important;}
.view_479 {display:none!important;}

.slider_txt{
  width: 100%;
  height: 100%;
    position: absolute;
  background: url(../images/top/slide_title_1920_847.png);
  background-size: auto;
  background-position: center center;
  z-index: 101;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.slider_image .bg1 {
  background-image : url(../images/top/slide-pc/slide001.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.slider_image .bg2 {
  background-image : url(../images/top/slide-pc/slide002.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation-delay  : 5s;
}
.slider_image .bg3 {
  background-image : url(../images/top/slide-pc/slide003.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation-delay  : 10s;
}

}

/*　画面サイズが1921px以上はここを読み込む　*/
@media screen and (min-width:1921px) {
.view_1399 {display:none !important;}
.view_479 {display:none!important;}
.slider_txt{
  width: 100%;
  height: 100%;
    position: absolute;
  background: none;
  background-size: auto;
  background-position: center center;
  z-index: 101;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.slider_image .bg1 {
  background-image : url(../images/top/slide-pc/slide001_txt.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.slider_image .bg2 {
  background-image : url(../images/top/slide-pc/slide002_txt.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation-delay  : 5s;
}
.slider_image .bg3 {
  background-image : url(../images/top/slide-pc/slide003_txt.jpg);   /* 背景の画像を指定 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation-delay  : 10s;
}
 
}

/*　画面サイズが1399px以下はここを読み込む　*/
@media screen and (max-width:1399px) and (min-width:768px){
  
.slider{
    width:100%;
    height:calc(100vw * 0.44);
    margin:0 auto;
    position:relative;

}

  /*スライドの下の余白(10vh)*/
.slider_margin{
  height: calc((100vw * 0.44)/9);
}
  
.slider_txt{
  width: 100%;
  height: 100%;
    position: absolute;
  background: none;
  background-size: auto;
  background-position: center center;
  z-index: 101;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.slider_image .bg1 {
  background-image : none;   /* 背景の画像を指定 */
}
  .slider_image .bg1 img{
    width:100%; height:auto;
  }
  
.slider_image .bg2 {
  background-image : none;   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.slider_image .bg3 {
  background-image :none;  /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.view_1399 {display:block !important;}
.view_479 {display:none!important;}

}

/*　画面サイズが1399px以下はここを読み込む　*/
@media screen and (max-width:767px) and (min-width:480px){
  
.slider{
    width:100%;
    height:calc(100vw * 0.44);
    margin:50px auto 0;
    position:relative;

}

  /*スライドの下の余白(10vh)*/
.slider_margin{
  height: calc((100vw * 0.44)/9);
}
  
.slider_txt{
  width: 100%;
  height: 100%;
    position: absolute;
  background: none;
  background-size: auto;
  background-position: center center;
  z-index: 101;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.slider_image .bg1 {
  background-image : none;   /* 背景の画像を指定 */
}
  .slider_image .bg1 img{
    width:100%; height:auto;
  }
  
.slider_image .bg2 {
  background-image : none;   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.slider_image .bg3 {
  background-image :none;  /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.view_1399 {display:block !important;}
.view_479 {display:none!important;}

}

/*　画面サイズが1399px以下はここを読み込む　*/
@media screen and (max-width:479px){
  
.slider{
    width:100%;
    height:calc(100vw * 1.67);
    margin:50px auto 0;
    position:relative;

}

  /*スライドの下の余白(10vh)*/
.slider_margin{
  height: calc((100vw * 1.67)/9);
}
  
.slider_txt{
  width: 100%;
  height: 100%;
    position: absolute;
  background: none;
  background-size: auto;
  background-position: center center;
  z-index: 101;
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.slider_image .bg1 {
  background-image : none;    /* 背景の画像を指定 */
}
  
  .slider_image .bg1 img{
    width: 100%;
    height: auto;
  }
  
.slider_image .bg2 {
  background-image : none;   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.slider_image .bg3 {
  background-image :  none;  /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.view_1399 {display:none!important;}
.view_479 {display:block!important;}
}


@keyframes slide_animation {
   0% { opacity: 0; }
   20.83% { opacity: 1; }
  33.33% { opacity: 1; }
  45.83% { opacity: 0; }
 100% { opacity: 0; }
}