@charset "utf-8";

#gallery {
  .wrap {
    padding-top: 90px;
    .contents {
      p {
        &.note {
          font-size: 1.5rem;
          line-height: 1.5;
          text-indent: -1em;
          padding-left: 1em;
        }
      }
      .main_slider {
        margin-bottom: 10px;
        .slide {
          position: relative;
          img {
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
            background-color: #FFFFFF;
          }
          &.posright {
            img {
              object-position: right center;
            }
          }
          &.posbottom {
            img {
              object-position: center bottom;
            }
          }
          span {
            line-height: 1;
            color:#FFFFFF;
            font-size: 1.8rem;
            position: absolute;
            letter-spacing: .05em;
            top: 1em;
            left: 1.5em;
          }
          &.txt_color {
            span {
              color:#53A3B7;
            }
          }
        }
      }
      .thumb_slider {
        margin-bottom: 60px;
        .slide {
          position: relative;
          padding:0 5px;
          img {
            display: block;
            aspect-ratio: 16/9;
            object-fit: cover;
            background-color: #FFFFFF;
            box-shadow: 0 0 6px rgba(0,0,0,.15);
            position: relative;
            z-index: 1;
          }
          &.posright {
            img {
              object-position: right center;
            }
          }
          &.posbottom {
            img {
              object-position: center bottom;
            }
          }
          &::before {
            content:'';
            display: block;
            width: calc(100% - 10px);
            height: 100%;
            z-index: 2;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #53A3B7;
            opacity: .8;
          }
          span {
            display: block;
            position: absolute;
            letter-spacing: .05em;
            z-index: 3;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 1.5rem;
            color:#FFFFFF;
            white-space: nowrap;
          }
          &.slick-current {
            &::before {
              opacity: 0;
            }
            span {
              text-shadow: 0 0 2px #000000, 0 0 3px #000000, 0 0 4px #000000, 0 0 5px #000000;
            }
          }
        }
      }
    }
  }
}


@media screen and (max-width:1200px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {


  #gallery {
    .wrap {
      padding-top: 60px;
      .contents {
        p {
          &.note {
            font-size: 1.3rem;
          }
        }
        .main_slider {
          margin-bottom: 5px;
          .slide {
            span {
              font-size: 1.5rem;
              left: 1em;
              top:.66em
            }
          }
        }
        .thumb_slider {
          margin-bottom: 30px;
          .slide {
            padding:0 2px;
            &::before {
              width: calc(100% - 4px);
            }
            span {
              font-size: min(2.4vw,1.5rem);
              padding:0 .5em;
              line-height: 1.5;
              text-align: center;
              white-space: wrap;
            }
          }
        }
      }
    }
  }


}