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


/**/
#singleitem { overflow: visible;}


/* スライダー幅 */
.slide_box { margin: 0 auto 60px; padding: 0; overflow: visible;}


/*左右の矢印の色を変える*/
.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 #897551;}


/*スライド数のドット*/
.slick-dots { bottom: -20px; height: 0; overflow: visible;}


.slick-dots li { margin: 0 8px;}

.slick-dots li button { position: relative; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;}
.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 #5C4D30; background-color: rgba(255,255,255,1);
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid rgba(0,0,0,1); background-color: #000; opacity: 1;}
.slick-dots li button:hover,
.slick-dots li button:focus { box-shadow: 0 0 0 2px #897551;}


/*スライド画像の横幅可変*/
.slide_box .slide { margin: 0 20px;}
.slide_box img { /*max-width: 100%;*/width:100%;max-width:660px; 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 {
  display: flex; justify-content: flex-end;
  position: absolute; height: 0px; width: 700px; left: 50%; right: inherit; bottom: -16px; margin-left: -350px;;
  z-index: 98; overflow: visible;
}


.top_section.slide_banner { padding-bottom: 40px;}
.autoplay .buttons { bottom: -40px;}

.buttons .button {
	position: relative; height: 28px; width: 28px; margin: 10px 8px; padding: 0; text-indent: -1000em; transition: all 300ms ease; opacity: 0.8;
	border: 2px solid rgba(0,0,0,1); background-color: #000000; overflow: hidden; border-radius: 0.5em;
}
.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 #fff;
}
.buttons .button.js-stop:before,
.buttons .button.js-stop:after { top: 20%; bottom: 20%; left: 25%; width: 4px; 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: #DFEA7E; border-color: #000;}
.buttons .button.js-play.active:before { border-left-color: #000;}
.buttons .button.js-stop.active:before,
.buttons .button.js-stop.active:after { background-color: #000;}

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

.buttons .button.js-play,
.buttons .button.js-stop { color: #fff;}
.buttons .button.js-play.active,
.buttons .button.js-stop.active { color: #000;}


/*次へ戻るボタン*/
.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;}


/* add スライド切り替え矢印 */
.slick-arrow { top: 50%; bottom: inherit; left: 50%; right: 0; height: 0; width: 700px; margin-left: -350px; overflow: visible;}
.slick-arrow:before { position: absolute; top: -33px; height: 65px; width: 65px; background-image: url("../img/slider_arrow_right.png"); border-radius: 50%;}
.slick-arrow.slick-prev:before { left: -80px;}
.slick-arrow.slick-next:before { right: -80px;}
.slick-arrow:hover:before { background-color: #DFEA7E; box-shadow: 0 0 0 2px #DFEA7E;}


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

  /* add スライド切り替え矢印 */
  .slick-arrow {left: 0%; right: 0%; height: 0; width: 100%; margin-left: 0;}
  .slick-arrow:before { top: -22px; width: 44px; height: 44px; background-size: contain;}
  .slick-arrow.slick-prev:before { left: 10px;}
  .slick-arrow.slick-next:before { right: 10px;}  
  
}


@media screen and (min-width:0px) and (max-width:720px) {
  
  .slide_box .slide { margin: 0 30px;}
  .slide_box img { max-width: calc(100% - 40px);}
  .buttons { width: auto; left: 10px; right: 10px;}

}



@media screen and (max-width:580px) {
  /*スライド画像の横幅可変*/
  /*
  .slide_box .slide { margin: 0 10px;}
  */
  .slide_box img { max-width: calc(100% - 30px); border-radius: 15px; box-shadow: 0 0 0 15px #fff; margin: 15px;}

}