/*==================================
スライダーのためのcss
===================================*/

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}

.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 3px solid #ff0000;/*矢印の色*/
  border-right: 3px solid #ff0000;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
  display:inline-block;
  margin:0 5px;
   
}

.slick-dots button {
  width: 10px;
  height: 10px;
  cursor: pointer;
  border-radius: 50%;
  background: #787878;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.slick-dots .slick-active button{
  background: #E30027;
}

/* Dots */

.slick-dotted.slick-slider
{
  margin-bottom: 30px;
}

.slick-dots
{
  position: absolute;
  bottom: 0;

  display: block;

  width: 100%;
  padding: 0;
  margin: 0;

  list-style: none;

  text-align: center;
}
.slick-dots li
{
  position: relative;

  display: inline-block;

  width: 10px;
  height: 10px;
  margin: 0 5px;
  padding: 0;

  cursor: pointer;
}
.slick-dots li button
{
  font-size: 0;
  line-height: 0;

  display: block;

  width: 10px;
  height: 10px;
  padding: 5px;

  cursor: pointer;

  color: transparent;
  border: 0;
  outline: none;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
  outline: none;
  left: -2px;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
  opacity: 1;
}

.new2023 .slick01 .slick-prev {/*戻る矢印の位置と形状*/
  left: 0px;
}

.new2023 .slick01 .slick-prev:hover {/*戻る矢印の位置と形状*/
  left: -2px;
}

.new2023 .slick01 .slick-next {/*次へ矢印の位置と形状*/
  right: 0px;
}

.new2023 .slick01 .slick-next:hover {/*次へ矢印の位置と形状*/
  right: -2px;
}

.new2023 .slick01 {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}

.new2023 .slick01 .slick-list  {
  max-width: 1160px;
  width: 95%;
}
.new2023 .slick01 .movie-wrap  {
  width: 95%;
  padding: 10px;
  margin-bottom: 20px;
}

.new2023 .movie-wrap .box p.ImgOnlyStyle {
  padding: 0;
}

.JS #Contents .movie-wrap .box .txt { 
  margin: auto;
}

@media screen and (min-width: 1304px) {
  .new2023 .movie-wrap .box img {
    width: 100%;
  }
  .new2023 .movie-wrap .box {
    width: 100%;
  }
}

@media screen and (max-width: 1304px) {
  .new2023 .movie-wrap .box {
      width: 100%;
  }
}

@media screen and (min-width: 1260px) {
  .new2023 .slick01 .slick-prev {/*戻る矢印の位置と形状*/
    left: 30px;
  }

  .new2023 .slick01 .slick-prev:hover {/*戻る矢印の位置と形状*/
    left: 28px;
  }

  .new2023 .slick01 .slick-next {/*次へ矢印の位置と形状*/
    right: 30px;
  }

  .new2023 .slick01 .slick-next:hover {/*次へ矢印の位置と形状*/
    right: 28px;
  }
}

#slickSliderNav {
	display: inner-block;
}

#slickSliderNav li {
	width: 10px;
	height: 10px;
	cursor: pointer;
	border-radius: 50%;
	background: #787878;
	-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

#slickSliderNav li:nth-child(n+2) {
	margin-left: 10px;
}

#slickSliderNav li.active {
	background: #E30027;
}

#slickSliderNavPlay {
  margin-left: -10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background: url(../../image/hsw/renewal2023/icon_slide_stop.png) no-repeat;
	background-size: cover;
	-moz-transform: translateX(16px);
	-ms-transform: translateX(16px);
	-webkit-transform: translateX(16px);
	transform: translateX(16px);
}

html.PC #slickSliderNavPlay {
	-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
	transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

#slickSliderNavPlay.stop {
	background: url(../../image/hsw/renewal2023/icon_slide_play.png) no-repeat;
	background-size: cover;
}

html.PC #slickSliderNavPlay:hover {
	opacity: 0.7;
}