/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */

/* ====================================================
　3＠デフォルト
==================================================== */
/* スライドloading DF
-------------------------------------*/
.slickSlider {background:url("../images/ajax-loader.gif") center no-repeat;} /* loading */

.slider{
    margin: 0px auto;
    opacity: 0;
    transition: 3s;
	z-index: -1;
}

.slick-initialized{
    opacity: 1
}

.slide-item {
  width:100%;
  max-width: 1536px;
}

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide { margin: 0;}
.slider-news .slick-slide { margin: 10px;}

.slick-slide { overflow: visible; outline:none; }

/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
	top: 43%;    /* ＜＞ の縦位置 */
}
.slick-prev { left: -30px;}    /* ＜＞ の横位置 */
.slick-next { right: -30px;}    /* ＜＞ の横位置 */
.slick-prev:before,
.slick-next:before {
    font-family: "FontAwesome";
    opacity: 1;
}

/* 黒丸ボタンスタイル DF
-------------------------------------*/
.slick-dots {bottom:-1.5em;}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
    display:inline-block;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
}
.slick-dots li button {display:block;}
.slick-dots li button:before {
    position:relative;
    padding:0.25em;
    border-radius:50%;
    opacity:1;
}

/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #b94047;}    /* ＜＞ 色 */
.slick-prev::before {content:"\f104";}    /* ＜ 形状 */
.slick-next::before {content:"\f105";}    /* ＞ 形状 */
.slick-prev:hover:before,
.slick-next:hover:before {color:#141414;}  /* ＜＞ hover色 */

@media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {font-size: 30px;}    /* ＜＞ サイズ */
}

@media screen and (max-width: 767px){
    .slick-prev:before,
    .slick-next:before {font-size: 24px;}    /* ＜＞ サイズ */

.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
	top: 50%;    /* ＜＞ の縦位置 */
	}
.slick-prev { left: -12px; }    /* ＜＞ の横位置 */
.slick-next { right: -12px; }    /* ＜＞ の横位置 */
}

/* ====================================================
　黒丸ボタンスタイル：・・・
==================================================== */
.slick-dots {bottom:-3rem;}                   /* ●の位置 */
.slick-dots li {margin: 0;}                   /* ●の間隔 */

.slick-dots li button::before {color:#b94047;}              /* ● DF色 */
.slick-dots li button:hover:before {color:#0a0a0a;}            /* ● hover色 */
.slick-dots li.slick-active button::before {color:#000;} /* ● active色 */

@media print, screen and (min-width: 768px) {
    .slick-dots li button::before {font-size:20px;}  /* ●サイズ */
}

@media screen and (max-width: 767px){
    .slick-dots li button::before {font-size:15px;}  /* ●サイズ */
	.slick-dots {bottom:-33px;}                   /* ●の位置 */
}

/* ====================================================
　黒丸ボタンカスタマイズ：長方形横
==================================================== */
.dotteSolid .slick-dots li {margin:0 2px;}                           /* ●の間隔 */
.dotteSolid .slick-dots li button:before {display:none;}             /* ●の非表示 */
.dotteSolid .slick-dots li button {width:30px; height:5px;}          /* ボタンの形状 */
.dotteSolid .slick-dots li button {background:#75975e;}              /* ● DFの色 */
.dotteSolid .slick-dots li.slick-active button {background:#d9a300;} /* ● active色 */


/* ====================================================
　黒丸ボタンカスタマイズ：長方形縦
==================================================== */
.dotteBar .slick-dots {text-align:right;}              /* ●の配置 */
.dotteBar .slick-dots li {margin:0 4px;}               /* ●の間隔 */
.dotteBar .slick-dots li button:before {display:none;} /* ●の非表示 */
.dotteBar .slick-dots li button {                      /* ボタンの形状 */
    width:8px;
    height:15px;
    transform:rotate(45deg);
    }
.dotteBar .slick-dots li button {background:#cccccc;}              /* ● DFの色 */
.dotteBar .slick-dots li.slick-active button {background:#000000;} /* ● active色 */


/* ====================================================
　センター配置：画面幅に応じて左右が見える。
        　　　：767以下でレスポンシブ対応（1枚表示）
==================================================== */
@media print, screen and (min-width: 768px) {
.centerRes.slickSlider .slick-slide{
    width:400px !important;    /* ※PCの時の画像サイズ指定 */
}
}