@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 70px; padding: 0; overflow: visible;}
/*.voice_section .slide_box,
.works_section .slide_box,
.store_section .slide_box{ margin: 0 auto 70px; 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: -28px;}
.autoplay .slick-prev { left: -28px;}
.autoplay .slick-arrow { border-radius: 0.6em;}
.autoplay .slick-arrow:hover,
.autoplay .slick-arrow:focus { background-color: rgba(0,0,0,0.2); box-shadow: inset 0px 0px 0px 2px #E2D579;}

.works_section .autoplay .slick-arrow:hover,
.works_section .autoplay .slick-arrow:focus { background-color: rgba(255,255,255,0.5);}


/*スライド数のドット*/
.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 #C00000;}


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

.slide_box.autoplay_insta .slide { margin: 0 0px;}


/*バナー画像*/
#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; left: 44px; right: 44px; bottom: 0px;*/
  position: relative;
  padding: 0;
  z-index: 98; overflow: visible;
}
.voice_section .buttons,
.works_section .buttons,
.store_section .buttons{ margin-right: 56px; }
.top_section.slide_banner { padding-bottom: 40px;}
/*.autoplay .buttons { bottom: -10px;}*/


.buttons .button {
	position: relative; height: 28px; width: 28px; margin: 10px 8px; padding: 0; text-indent: -1000em; transition: all 300ms ease; opacity: 0.8;
	color: #fff; border: 1px 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: 25%; 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: #E2D579; 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 { color: #fff; 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: #aaa!important; box-shadow: 0 0 0 2px #aaa;}

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


/* 次へ戻るボタン用の大枠の余白*/
.autoplay .slide_wrap { margin-left: 28px; margin-right: 28px; overflow: visible;}

/* 次へ戻るボタン */
.slick-arrow { height: 44px; width: 28px;}
.slick-prev:before,
.slick-next:before { display: block; width: 100%; height: 100%; background: url("../img/top_arrow_w24_black.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;}

.works_section .slick-prev:before,
.works_section .slick-next:before { background-image: url("../img/top_arrow_w24_white.png");}


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



/*画像が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:880px) {

  /* singleitem スライド切り替え矢印 */
  /*
  .singleitem .slick-arrow {left: 0%; right: 0%; height: 0; width: 100%; margin-left: 0;}
  .singleitem .slick-arrow:before { top: -22px; width: 44px; height: 44px; background-size: contain;}
  .singleitem .slick-arrow.slick-prev:before { left: 10px;}
  .singleitem .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;}
  */

}