@charset "utf-8";
/*一回影響の範囲を確認したかったので全部コメントにしてスタイル組み直してます。*/
/*
	.slider-container{
		width:100%;
		margin:0 auto;
	}
	*/
	/* .slick-slide{
		padding-bottom:5px;
	} */
	/*
	#thumbs .slick-current > div{
		border:8px solid #ff5400;
	}
	#thumbs li {
		border: 1px solid #ff5400;
	}
	*/
	/* できればこれ系は既存のスタイルか汎用的なスタイルを組んで構成してほしい！
	#about #sliderimage p {
	width: 100%;
	color: #fff;
	text-align: center;
	margin: 1em 1em;
	}
*/
/*
	.slick-prev,.slick-next{z-index:2;}
	.slick-prev{left:0!important;}
	.slick-next{right:0!important;}
	@media screen and (max-width: 800px) {
		#about #sliderimage p {
			margin: 0em;
	}
		#thumbs .slick-slide{
			width: 47%!important;
		}
		.slick-slide{
		padding:5px;
	}
	}
	button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
  margin-top: -15px;
}
*/
.prev-arrow{
	/*
  left: 20px;
  z-index:2;
  */
  /* width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; */
}
.next-arrow{
	/*
  right: 20px;
  */
  /* border-right: 0 solid transparent;
  border-left: 15px solid #113463;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; */
}
.slideArrow {
  position: absolute;
  top: 0;
  width: 5vw;
  max-width: 64px;
  height: 100%;
  background-image: url("../gframe/images/sliderArrowRight.svg");
  background-repeat: no-repeat;
	background-size: 50% auto;
	transition: all 100ms linear;
	z-index: 50;
}
.slideArrow:hover {
	background-size: 60% auto;
	transition: all 100ms linear;
}
.prevArrow {
	left: 0;
	background-position: center center;
	transform: rotate(180deg);
}
.nextArrow {
	right: 0;
	background-position: center center;
}
#pointSlide .slideArrow {
	position: absolute;
	top: 0;
	width: 5vw;
	max-width: 64px;
	height: 100%;
	background-image: url("../mobilityJoint/images/sliderArrow.svg");
	background-repeat: no-repeat;
	  background-size: 50% auto;
	  transition: all 100ms linear;
	  z-index: 50;
  }
#pointSlide .slideArrow:hover {
	  background-size: 60% auto;
	  transition: all 100ms linear;
  }
#pointSlide .prevArrow {
	  left: 0;
	  background-position: center center;
	  transform: rotate(180deg);
  }
#pointSlide .nextArrow {
	  right: 0;
	  background-position: center center;
  }
#thumbs .slick-slide {
	width: 25%!important;
	padding: 0;
}
#thumbs li {
	position: relative;
	box-sizing: border-box;
}
#thumbs li > span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #ff5400;
	box-sizing: border-box;
	transition: all 100ms linear;
}
#thumbs li:hover > span,
#thumbs .slick-current li > span {
	border: 8px solid #ff5400;
	transition: all 100ms linear;
}
#pointNav .slick-slide {
	width: 33.33333%!important;
	padding: 0;
}
#pointNav li {
	position: relative;
	box-sizing: border-box;
}
#pointNav li > span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #0099f9;
	box-sizing: border-box;
	transition: all 100ms linear;
}
#pointNav li:hover > span,
#pointNav .slick-current li > span {
	border: 8px solid #0099f9;
	transition: all 100ms linear;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
}
@media screen and (max-width: 767px) {
	#thumbs .slick-slide {
		width: 50%!important;
	}
	#thumbs li:hover > span,
	#thumbs .slick-current li > span {
		border-width: 4px;
	}
	.slideArrow {
		display: none;
	}
}