@charset "utf-8";
/* ================================
    CSS STYLES FOR infoCMS
   ================================ */

/* スライダーモジュール
---------------------------------------- */

/* slicksliderArea */
.slicksliderArea{position:relative; margin:0 auto 20px;}

/* 画像の幅 */
.slick-slide img {width:100%;}
.slick-slide video {width:100%;}
.thumbnail .slick-slide img {width:100%;}
.thumbnail .slick-slide video {width:100%;}

/* ローダー */
.slicksliderArea .divLoader{position:absolute;margin:auto;top:0;padding-top: 50%;bottom:0;left:0;right:0;z-index:9999;background-color: rgba(255,255,255,0.7);}
ul.slick-slider{padding:0;width:100%;margin:20px auto;}

/* 左右ボタン */
button.slick-arrow.slick-prev{left:20px;}
button.slick-arrow.slick-next{right:20px;}

.slick-slider button.slick-arrow {position:absolute; z-index:100; top:0; bottom:0; margin:auto; padding:0; height:52px; width:52px;  white-space:nowrap; overflow:hidden; text-indent:100%; font-size:0; background-color:transparent; border:none; outline:none;}
.slick-slider button.slick-arrow:hover{opacity:0.7; cursor:pointer;}
.slick-slider button.slick-arrow.slick-prev:before{content:""; position:absolute; left:0px;right:0; top:0px; bottom:0; margin:auto; width:32px; height:32px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(225deg); -webkit-transform:rotate(225deg); -ms-transform:rotate(225deg);}
.slick-slider button.slick-arrow.slick-next:before{content:""; position:absolute; left:0px;right:0; top:0px; bottom:0; margin:auto; width:32px; height:32px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg);}

/* 再生停止ボタン */
.slicksliderArea .btnPause{position:absolute; top:0; right:0; width:16px; height:16px; margin:0; background-color:#666; white-space:nowrap; overflow:hidden; text-indent:100%; cursor:pointer; outline:none;}
.slicksliderArea .btnPause:hover{opacity:0.7;}
.slicksliderArea .btnPause:before{content:""; display:block; position:absolute; top:0; bottom:0; left:4px; margin:auto; width:3px; height:10px; background-color:#fff;} /*左*/
.slicksliderArea .btnPause:after{content:""; display:block; position:absolute; top:0; bottom:0; right:4px; margin:auto; width:3px; height:10px; background-color:#fff;} /*右*/

.slicksliderArea .btnPause.pause{background-color:#333;}
.slicksliderArea .btnPause.pause:before{content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width: 0;height: 0;border-style: solid;border-width: 6px 0 6px 12px;border-color: transparent transparent transparent #ffffff; background-color:transparent;}
.slicksliderArea .btnPause.pause:after{display:none;}

/* ページャー */
ul.slick-dots{margin:auto; padding:20px 0; text-align:center;}
ul.slick-dots li{display: inline-block;list-style:none;margin: 0 6px;}
ul.slick-dots li button{display: block;margin: 0;padding: 0;height: 12px;width: 12px;border-radius: 6px;border:none;background-color:rgba(0,0,0,0.8);white-space:nowrap;text-indent:100%;overflow:hidden; cursor:pointer; outline:none;}
ul.slick-dots li button:hover,
ul.slick-dots li.slick-active button{background-color:rgba(99,99,99,0.5);}

/* スライダーリスト */
.slick-track .slick-slide{position:relative; margin:0;}

/* 画像キャプション */
.slick-slide p{position:absolute; left:0; right:0; bottom:0; margin:auto; padding:10px; width:100%; background-color:rgba(0,0,0,0.5);color:#fff;box-sizing:border-box; transition-property:all; transition-duration:0.5s;}
.slick-slide p:hover{opacity:0.2;}

/* 動画リンク */
.slick-slide a.videoLink{display:inline-block; position:absolute; top:0; left:0; margin:0; padding:5px; background-color:rgba(0,0,0,0.7); color:#fff; text-decoration:none;}
.slick-slide a.videoLink:hover{text-decoration:underline; opacity:0.5;}

/* サムネイル */
.thumbnail .slick-list{padding:0!important; margin:0 80px!important;}
.thumbnail .slick-track .slick-slide{margin:20px;}
.thumbnail .slick-slider button.slick-arrow{width:32px; height:32px; border-radius:0; background-color:transparent;}
.thumbnail .slick-slider button.slick-arrow.slick-prev:before{width:16px; height:16px; border-right:2px solid #333; border-top:2px solid #333;}
.thumbnail .slick-slider button.slick-arrow.slick-next:before{width:16px; height:16px; border-right:2px solid #333; border-top:2px solid #333;}