@charset "UTF-8";

/* CSS Document */
.e-slider__item{
  position: relative;
}
.e-slider__txt{
 position: absolute;
  bottom: 0;
  z-index: 150;
  padding: 1em;
  background: rgb(255,255,255,0.6);
  width: 100%;
  color: #000;
  box-sizing: border-box;
}

/*slick上書き*/
.slick-dots{
  margin: 0!important;
}
.slick-dots{
  bottom: -12px!important;
}

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider2 {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:100%;
    margin:0 auto;
}

.slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider2 .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

.slick-prev, .slick-next {
     font-size: 0;
     line-height: 0;
     position: absolute;
     top: 50%;
     display: block;
     width: 20px;
     height: 20px;
     padding: 0;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     cursor: pointer;
     color: transparent;
     border: none;
     outline: none;
     background: transparent;
     left: 65.6%;
}

.slick-prev {
     left: 34.6%;
     z-index: 10;
}

.slick-arrow:before{
	content:""!important;
}
.slick-prev:before{
	content:""!important;
}
　.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
  }

  .slick-prev{
    background: url("../images/arrow_right.png")!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
  }

.slick-next{
    background: url("../images/arrow_left.png")!important;
    background-repeat: no-repeat!important;
    background-size: contain!important;
  background-position: right center!important;
  }
.slick-prev {
    left: 25.2%!important;
    z-index: 10;
}
.slick-next {
    left: 74.8%!important;
}
@media screen and (max-width: 769px) {
#photo .slick-list{
  padding: 0 5%!important;
}
.slick-prev {
    left: 6%!important;
    z-index: 10;
}
.slick-next {
    left: 94%!important;
}
}