@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;}


/*
.slick-track { display: flex; align-items: stretch;}
.slide.slick-slide { float: none; height: auto;}
.slide a { display: flex; height: 100%; align-items: center;}
*/




/* ロード完了後表示 */
#singleitem { opacity: 0; transition: opacity .3s linear;}
#singleitem.slick-initialized { opacity: 1;}


/* スライダー幅 */
.slide_box { margin: 0 auto;}


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


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


/*左右の矢印調整 - バナー画像*/
#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 { position: relative; top: inherit; bottom: inherit; max-width: calc(1160px - 160px); margin: 1.5rem auto;}
.slick-dots li { margin-left: 8px; margin-right: 8px; width: 24px; height: 24px;}
.slick-dots li button { position: relative; box-sizing: border-box; border-radius: 50%; width: 24px; height: 24px;}
.slick-dots li button:before {
	content: ""; position: absolute; height: auto; width: auto; top: 4px; bottom: 4px; left: 4px; right: 4px; color: #000; border-radius: 100%; opacity: 0.8;
	border: 2px solid #fff; background-color: #ccc;
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid #fff; background-color: #ccc; opacity: 1;box-shadow:0 0 0 3px #FFAF55;}
.slick-dots li button:hover,
.slick-dots li button:focus { box-shadow: inset 0 0 0 3px #FFAF55;}



/*スライド画像の横幅可変*/
.slide_box .slide { margin: 0 50px;border-radius:1em;}
.slide_box img { max-width: 100%; height: auto;}

/*スライド画像の横幅可変
.slide_box .slide { margin: 0 20px;}
.slide_box img { max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0 0 0 20px #fff; margin: 20px;}
*/



/*バナー画像*/
#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 {
  display: flex; justify-content: flex-end;
  position: absolute; height: 0px; width:949px; left: 0px; right: 0; bottom: calc(66px + 1rem); padding: 0;
  z-index: 98; overflow: visible;
  /*
  height: 5px; background-color: red;
  */
  max-width: 1160px; margin-left: auto; margin-right: auto;
  
}

.top_section.slide_banner { padding-bottom: 40px;}
.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 #005BAA; background-color: #000; overflow: hidden; border-radius: 0.6em;
}
.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: 27.5%; margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 13px solid #fff;
}
.buttons .button.js-stop:before,
.buttons .button.js-stop:after { top: 25%; bottom: 25%; left: 25%; width: 5px; background-color: #fff;}
.buttons .button.js-stop:after { left: inherit; right: 25%;}
.buttons .button.js-play.active,
.buttons .button.js-stop.active{ opacity: 1; background-color: #000; border-color: #000;}
.buttons .button.js-play.active:before { border-left-color: #fff;}
.buttons .button.js-stop.active:before,
.buttons .button.js-stop.active:after { background-color: #fff;}

.buttons .button.js-stop:hover,
.buttons .button.js-stop:focus,
.buttons .button.js-play:hover,
.buttons .button.js-play:focus { border-color: #D90000!important; box-shadow: 0 0 0 3px #FFAF55;}



/* 次へ戻るボタン */
.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-next:before { transform: scaleX(-1);}
.slick-arrow:before { content: "";}
.slick-arrow:hover,
.slick-arrow:focus { opacity: 1;}

/* singleitem スライド切り替え矢印 */
.singleitem .slick-arrow { top: 50%; bottom: inherit; left: 50%; right: 0px; height: 0px; width: 949px; margin-left: -473px; overflow: visible; background-color: #000; color: #fff; text-indent: -1000em;}
.singleitem .slick-arrow:before { position: absolute; top: calc(-30px - 1.5rem - 10px); height: 60px; width: 60px; background: center center no-repeat url("../img/slick_arrow_left.png") rgba(0,0,0,0.6); border-radius: 50%;}
.singleitem .slick-arrow.slick-prev:before { left: -60px;}
.singleitem .slick-arrow.slick-next:before { right: -60px;}
.singleitem .slick-arrow:hover:before { background-color: rgba(114,199,220,0.9); border:3px solid #FFAF55;}
.singleitem .slick-arrow:hover,
.singleitem .slick-arrow:focus {}


/*画像が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;color:rgba(0,0,0,0);}




@media screen and (min-width:0px) and (max-width:1240px) {
	/*========================================
	スライダー矢印切り替え
	========================================*/
	/*スライド画像の横幅可変*/
	.slide_box .slide { margin: 0 30px;}
	
	/* singleitem スライド切り替え矢印 */
	.singleitem .slick-arrow { width: calc(100% - 120px); left: 0%; margin-left: auto; margin-right: auto;}
	.singleitem .slick-arrow:before { top: calc(-30px - 1.5rem - 3px);}
	
	/*スライド数のドット*/
	.slick-dots { margin-top: 1rem; margin-bottom:0px;}	

	/*再生停止ボタン*/
	/* .buttons { max-width: calc(100% - 56px); bottom: 48px;} */
	.buttons { max-width: calc(100% - 56px); bottom: calc(33px + 1rem);}


}


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




	/*========================================
	スライダー矢印切り替え
	========================================*/
	/*スライド画像の横幅可変*/
	.slide_box .slide { margin: 0 22px;}

	/* singleitem スライド切り替え矢印 */
	.singleitem .slick-arrow { width: calc(100% - 44px);}
	.singleitem .slick-arrow:before { top: calc(-22px - 1.5rem - -7px); height: 44px; width: 44px;}
	.singleitem .slick-arrow.slick-prev:before { left: -22px;}
	.singleitem .slick-arrow.slick-next:before { right: -22px;}


	/*再生停止ボタン*/
	.buttons { max-width: calc(100% - 42px);}


}