@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 { padding-bottom: 0;margin: 0 15px;}*/

.slick-initialized .slick-slide {
  margin: 0 15px;
}
.slide_banner .wrap,
.slide_banner .autoplay { overflow: visible;}
.slick-list{margin: 0 auto;}

 /* スライダー幅 */
.slide_box { max-width: 2500px; margin: 0 auto;overflow: visible;border: none;}
.slick-slide {margin: 0 10px;width: clamp(280px, 60vw, 600px);}
.slick-slide img{width: 100%;aspect-ratio: 6 / 4;object-fit: cover;display: block;border-radius: 20px;}
.slide_wrap{overflow:visible;max-height: 424px;}

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


/*左右の矢印の位置を変える*/
.slick-next { right: max(10px, calc((100vw - 1240px) / 2 + -10px)); z-index: 99;}
.slick-prev { right: max(130px, calc((100vw - 1240px) / 2 + 110px)); 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: -5%;}
.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:#DCFADC;
}
.slick-dots li.slick-active button:before { color: #fff; border: 2px solid rgba(255,255,255,1); background-color: #2a7e2a; opacity: 1;}


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


/*バナー画像*/
#autoplay .slick-slide img { aspect-ratio: 4 / 3;
    width: 100%;
    min-width: 0;
    object-fit: cover;
    max-width: 800px;
    max-height: 600px;
    border-radius: 20px;
    margin-bottom: .75em;}

/*再生停止ボタン*/
.slide_box { position: relative;}
.buttons { position: absolute;bottom: -9%; right: max(40px, calc((100vw - 1240px) / 2 + 20px)); z-index: 100; 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 #DCFADC; background-color: #fff; overflow: hidden; box-sizing: border-box;border-radius: 32px;
}
.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: #2a7e2a; 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 #2a7e2a;}

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

  
}
@media screen and (min-width:900px) and (max-width:1000px) {
  .buttons{bottom: calc(-37.9688px + (100vw - 900px) * -0.337656);}

  
}


@media (min-width: 1000px) {
.buttons{bottom: -17%;}}