.slick-slide {
  position: relative;
}
.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100% - 40px);
  padding: 10px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: .2s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}
.maplabel{
  -webkit-text-stroke: 0.5px gray;  
}
/* 画面サイズの横幅が 768px 以下で適用 */
@media screen and (max-width: 768px) {
    .slick{
      margin: 0 auto;
      height: 350px;
      margin:10px;
    }
    .slick img {
      /* width: 100%; */
      margin:0 auto;
      height: 350px;
      object-fit: cover;
      max-width: 100%;
      max-height: 100%;
      width: auto\9; /* ie8 */
      margin: 0 auto;
      text-align:center;
    }
    .slick-prev{
        left: 50px;
        z-index: 150;
    }
    .slick-prev::before{
      color:greenyellow;
    }
    .slick-next{
        right: 50px;
    }
    .slick-next::before{
      color:greenyellow;
    }

    
    .bxslider{
      width: 100%!important;
        text-align: center; 
        margin-top: 0px;
        margin-left: 0px;
      }

      .bxslider li{
        width:100%!important; /*タブ内での生成時にwidthが0になるのを防ぐ*/
      }
      .bxslider li img{
        display: inline-block; 
        height: 175px;
        object-fit: cover;
      }
      .bx-wrapper{
        float:left;
        width: 50%!important;
        margin-top: 15px;
        margin-bottom: 15px;
      }
      #easyModal .bx-wrapper{
        width: 100%!important;
        max-width: 100%!important;
        float: left;
        margin-top: 15px;
        margin-bottom: 15px;
    }
      .bx-caption >span{
        padding:3px!important;
      }
      .bx-viewport{
        height:175px!important;
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 999999;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
    }
    
      .modal-content {
        z-index: 10000;
        background-color: #f4f4f4;
        margin: 20% auto;
        width: 85%;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
        animation-name: modalopen;
        animation-duration: 1s;
      }
      
      @keyframes modalopen {
          from {opacity: 0}
          to {opacity: 1}
      }
      
      .modal-header h1 {
          margin: 1rem 0;
          font-size:18px;
      }
      
      .modal-header {
          background: lightblue;
          padding: 3px 15px;
          display: flex;
          justify-content: space-between;
      }
      
      .modalClose {
          font-size: 2rem;
      }
      
      .modalClose:hover {
          cursor: pointer;
      }
      
      .modal-body {
          padding: 10px 20px;
          color: black;
      }
      .modal-img{
          width:100%;
      }
      .modal-ul{
          list-style-type: none;
      }
      
}

/* 画面サイズの横幅が 769px 以上で適用 */
@media screen and (min-width: 769px) { 
    .slick{
      margin: 0 auto;
      /* max-width: 100%; */
      height: 450px;
      margin:10px;
      }
    .slick img {
      /* width: 100%; */
      margin:0 auto;
      height: 450px;
      object-fit: cover;
    }
    .slick-prev{
      left: 50px;
      z-index: 50;
    }
    .slick-prev::before{
      color:greenyellow;
    }
    .slick-next{
        right: 50px;
    }
    .slick-next::before{
      color:greenyellow;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.5);
    }
    
    .modal-content {
        background-color: #f4f4f4;
        margin: 20% auto;
        width: 80%;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
        animation-name: modalopen;
        animation-duration: 1s;
    }
    
    @keyframes modalopen {
        from {opacity: 0}
        to {opacity: 1}
    }
    
    .modal-header h1 {
        margin: 1rem 0;
        font-size:28px;
    }
    
    .modal-header {
        background: lightblue;
        padding: 3px 15px;
        display: flex;
        justify-content: space-between;
    }
    
    .modalClose {
        font-size: 2rem;
    }
    
    .modalClose:hover {
        cursor: pointer;
    }
    
    .modal-body {
        padding: 10px 20px;
        color: black;
    }
    .modal-img{
        width:100%;
    }
    .modal-ul{
        list-style-type: none;
    }
    
    .bxslider{
        width: 100%!important;
          text-align: center; 
          margin-top: 0px;
          margin-left: 0px;
    }
    .bxslider{
      width: 100%!important;
        text-align: center; 
        margin-top: 0px;
        margin-left: 0px;
      }
      .bxslider li{
        width:100%!important;  
      }
      .bxslider li img{
        display: inline-block; 
        height: 225px;
        object-fit: cover;
      }
      .bx-wrapper{
        float:left;
        width: 50%!important;
        margin-top: 15px;
        margin-bottom: 15px;
      
      }
      #easyModal .bx-wrapper{
        width: 100%!important;
        max-width: 100%!important;
        float: left;
        margin-top: 15px;
        margin-bottom: 15px;
    }
      .bx-caption >span{
        padding:3px!important;
      }
      .bx-viewport{
        height:225px!important;
      }
}