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

.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;}
.slide_banner .wrap,
.slide_banner .autoplay { overflow: visible;}


 /* スライダー幅 */
.slide_box { max-width: 1400px; margin: 0 auto;}


/*左右の矢印の色を変える*/
.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:1;
	border: 2px solid #ffffff; background-color:#d4f3e6;
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid rgba(255,255,255,1); background-color: #505747; opacity: 1;}


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


/*バナー画像*/
#autoplay .slick-slide img { max-width: calc(100% - 4px); margin: 2px auto;}

/*再生停止ボタン*/
.slide_box { position: relative;}
.buttons { position: absolute; bottom: 0px; right: 5px; display: flex; justify-content: center; z-index: 98;}
.buttons .button {
	position: relative; height: 36px; width: 36px; margin: 10px 5px; padding: 0; text-indent: -1000em; transition: all 300ms ease;
	border: 2px solid rgba(0,0,0,1); background-color: #fff; overflow: hidden; box-sizing: border-box;
}
.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-stop_tm:after { position: absolute; display: block; content: "";}



.buttons .button.js-play,
.buttons .button.js-play_tm {
  position: relative;
}
/* 上の線 */
.buttons .button.js-play::before,
.buttons .button.js-play_tm::before {content: "";position: absolute;top: 50%;left: 25%;width: 12px;height: 2px;background: #000;transform: translateY(-50%) rotate(45deg);transform-origin: right center;}

/* 下の線 */
.buttons .button.js-play::after,
.buttons .button.js-play_tm::after {content: "";position: absolute;top: 50%;left: 25%;width: 12px;height: 2px;background: #000;transform: translateY(-50%) rotate(-45deg);transform-origin: right center;}
.buttons .button.js-play.active::before,
.buttons .button.js-play_tm.active::before ,
.buttons .button.js-play.active::after,
.buttons .button.js-play_tm.active::after{background: #FFF;}
.buttons .button.js-stop:before,
.buttons .button.js-stop:after,
.buttons .button.js-stop_tm:before,
.buttons .button.js-stop_tm:after { top: 30%; bottom: 20%; left: 35%; width: 2px;height: 15px; background-color: rgba(0,0,0,1);}
.buttons .button.js-stop:after,
.buttons .button.js-stop_tm:after{ left: inherit; right: 37%;}
.buttons .button.js-play.active,
.buttons .button.js-stop.active,
.buttons .button.js-play_tm.active,
.buttons .button.js-stop_tm.active { opacity: 1; background-color: rgba(0,0,0,1); border-color: rgba(255,255,255,1);color:#FFF;}
.buttons .button.js-play.active:before,
.buttons .button.js-play_tm.active:before { border-left-color: rgba(255,255,255,1);}
.buttons .button.js-stop.active:before,
.buttons .button.js-stop.active:after,
.buttons .button.js-stop_tm.active:before,
.buttons .button.js-stop_tm.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 { outline:2px solid #0044CC;}

/*次へ戻るボタン*/
.slick-arrow { height: 44px; width: 20px;}
.slick-prev:before,
.slick-next:before { display: block; width: 100%; height: 100%; background: url(../img/slide_bx-next.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;outline:2px solid #0044CC;}

.slick-dots li button:hover,
.slick-dots li button:focus {outline:2px solid #0044CC;height: 18px;width: 18px;}

/*画像が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:1120px) {
	/*再生停止ボタン*/
	.buttons { bottom: inherit; right: inherit; top: 5px; left: 5px;}
	.buttons .button { height: 44px; width: 44px;}
	/*矢印の位置調整*/
	.buttons .button.js-play::before,
	.buttons .button.js-play_tm::before {left: 27%;}
	.buttons .button.js-play::after,
	.buttons .button.js-play_tm::after {left: 27%;}
}

@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) {
	.buttons { top: 24px;}
}
@media (min-width: 1120px) {
.slide_box img { min-height:378px;}}