@charset "UTF-8";

.container--section {
  padding : 0;
  position : relative;
}

h1 {
  text-align : center;
  margin : 50px 0;
}

.page-ttl__img {
  height: 28px;
  display : block;
  margin : 0 auto 5px;
}

.page-ttl__p {
  display : block;
  font-size: clamp(14px, 3vw, 34px);
  font-weight : 300;
  letter-spacing: 0.17em;
}

@media (max-width: 767px) {
  .page-ttl__img {
    height:20px;
  }
  .page-ttl__p {
    margin-top:20px;
    font-size : 30px;
    line-height:1.2;
  }
}

#slider {
  margin : 0 auto 10px;
  width : 1180px;
  max-width : 100%;
}

#thumbs {
  margin : 0 auto 10px;
  width : 1180px;
  max-width : calc(100% - 30px);
}

.ms-item {
  position : relative;
}

.ms-item:after {
  content:"";
  display:block;
  width : 100%;
  height: 15%;
  left : 0;
  bottom:0;
  position:absolute;
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
}

.ms-item.tate:after {
  content:none;
}

.ms-item img {
  display : block;
}

.ms-item .cap,
.ms-thm .cap {
  position : absolute;
  left: 5px;
  bottom : 5px;
  right: auto;
  font-size : 10px;
  color : #fff;
  z-index: 2;
}

.ms-item.tate .cap {
  left : calc(345 / 1180 * 100%)
}

#thumbs {
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}

.ms-thm {
  width : calc((100% - 50px) / 7);
  margin-bottom : 10px;
  filter : brightness(0.5);
  transition : .5s;
  cursor : pointer;
}

@media (max-width: 767px) {
  .ms-thm {
    width : calc((100% - 10px) / 3);
    margin-bottom : 5px;
  }
  #thumbs:after {
    content:"";
    width : calc((100% - 10px) / 3);
  }
}

.thumbnail-current {
  filter : brightness(1);
}

.slick-prev, .slick-next {
  z-index : 2;
}

.slick-prev {
    left: 20px;
}
[dir='rtl'] .slick-prev
{
    right: 20px;
    left: auto;
}
.slick-prev:before
{
  content: '';
  width : 21px;
  height : 43px;
  background : url(../img/modelroom2/arrow-left.svg) no-repeat;
  background-size : 100%;
  display : block;
  z-index : 10;
  
}
[dir='rtl'] .slick-prev:before
{
  content: '';
  width : 21px;
  height : 43px;
  background : url(../img/modelroom2/arrow-left.svg) no-repeat;
  background-size : 100%;
  display : block;
  z-index : 10;
}

.slick-next
{
    right: 20px;
    top:auto;
  bottom:50%;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: 20px;
}
.slick-next:before
{
  content: '';
  width : 21px;
  height: 43px;
  background : url(../img/modelroom2/arrow-right.svg) no-repeat;
  background-size : 100%;
  display : block;
  z-index : 10;
}
[dir='rtl'] .slick-next:before
{
  content: '';
  width : 21px;
  height : 43px;
  background : url(../img/modelroom2/arrow-right.svg) no-repeat;
  background-size : 100%;
  display : block;
  z-index : 10;
}


@media (max-width: 767px) {
  .slick-prev {
    left: 10px;
    top:50%;
  }
  [dir='rtl'] .slick-prev
  {
      right: 10px;
      left: auto;
  }
  .slick-next
  {
      right: 10px;
    top:50%;
    bottom:auto;
  }
  [dir='rtl'] .slick-next
  {
      right: auto;
      left: 10px;
  }
  .slick-prev:before,
  [dir='rtl'] .slick-prev:before,
  .slick-next:before,
  [dir='rtl'] .slick-next:before{
    width:15px;
    height:30px;
  }
}