@charset "utf-8";
/*************************************************
 slider.css
**************************************************/

.slide_box { width: 100%; max-width: auto; margin: 0 auto; padding-bottom: 0;}
.slide img { width: 100%; height: auto;}
.slide_box .slick-dotted.slick-slider,
.slick-slider .slick-list,
.slick-slider .slick-list .slick-track,
.slick-initialized .slick-slide { margin-bottom: 0; padding-bottom: 0;}


/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before { color: #000;}


/*左右の矢印の位置を変える*/
.slick-next { right: 10px; z-index: 99;}
.slick-prev { left: 10px; z-index: 100;}


/*左右の矢印調整 - バナー画像*/
#autoplay { padding-bottom: 0; overflow: visible;}
.autoplay .slick-next { right: -16px;}
.autoplay .slick-prev { left: -16px;}
.autoplay .slick-arrow { border-radius: 0.6em;}
.autoplay .slick-arrow:hover,
.autoplay .slick-arrow:focus { background-color: #fff; box-shadow: inset 0px 0px 0px 2px #D90000;}


/*スライド数のドット*/
.slick-dots { bottom: 10px;}
.slick-dots li button { position: relative; box-sizing: border-box;}
.slick-dots li button:before {
	content: ""; position: absolute; height: auto; width: auto; top: 2px; bottom: 2px; left: 2px; right: 2px; color: #fff; border-radius: 100%; opacity: 0.8;
	border: 2px solid #000066; background-color: rgba(255,255,255,1);
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid rgba(255,255,255,1); background-color: #000066; opacity: 1;}


/*スライド画像の横幅可変*/
.slide_box img { max-width: calc(100% - 4px); height: auto;}


/*バナー画像*/
#autoplay .slick-slide img { margin: 2px auto;}


/*再生停止ボタン*/
.slide_box { position: relative;}
.buttons { position: absolute; bottom: 0px; right: 5px; display: flex; justify-content: center; z-index: 98;}
.autoplay .buttons { bottom: -40px;}
.buttons .button {
	position: relative; height: 28px; width: 28px; margin: 10px 5px; padding: 0; text-indent: -1000em; transition: all 300ms ease; opacity: 0.8;
	border: 2px solid rgba(0,0,0,1); background-color: rgba(255,255,255,0.9);
}
.buttons .button:hover,
.buttons .button:focus { cursor: pointer; opacity: 1; transition: all 300ms ease;}
.buttons .button:before,
.buttons .button.js-stop:after { position: absolute; display: block; content: "";}

.buttons .button.js-play:before {
	top: 50%; left: 24%; margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 13px solid #000066;
}
.buttons .button.js-stop:before,
.buttons .button.js-stop:after { top: 20%; bottom: 20%; left: 25%; width: 4px; background-color: #000066;}
.buttons .button.js-stop:after { left: inherit; right: 25%;}
.buttons .button.js-play.active,
.buttons .button.js-stop.active{ opacity: 1; background-color: #000066; border-color: rgba(255,255,255,1);}
.buttons .button.js-play.active:before { border-left-color: rgba(255,255,255,1);}
.buttons .button.js-stop.active:before,
.buttons .button.js-stop.active:after { background-color: rgba(255,255,255,1);}

.buttons .button.js-stop:hover,
.buttons .button.js-stop:focus,
.buttons .button.js-play:hover,
.buttons .button.js-play:focus { border-color: #D90000!important;}

/*次へ戻るボタン*/
.slick-arrow { height: 30px; width: 20px;}
.slick-prev:before,
.slick-next:before { display: block; width: 100%; height: 100%; background: url("../img/autoplay_arrow.png") center center no-repeat; opacity: 1;}
.slick-prev:before { transform: scaleX(-1);}
.slick-arrow:before { content: "";}
.slick-arrow:hover,
.slick-arrow:focus { opacity: 1;}


/*画像が1枚の時、再生ボタン切り替えボタンを非表示*/
.slide_box.disable .buttons,
.slide_box.disable .slick-dots {display: none;}


/*文字サイズを相対値に修正*/
.slick-prev, 
.slick-prev:before,
.slick-next,
.slick-next:before,
.slick-dots li button,
.buttons .button
{ font-size: 0.5em;}


@media screen and (min-width:0px) and (max-width:1074px) {
  /*バナー画像 - 左右の矢印分余白を確保*/
  .autoplay { margin-left: 30px; margin-right: 30px;}
  #autoplay .slick-next { right: -20px;}
  #autoplay .slick-prev { left: -20px;}
  
}

@media screen and (min-width:0px) and (max-width:660px) {

}