/* Slider */

/*==================================================
スライダーのためのcss
===================================*/
@media screen and (min-width: 1401px){	
.slider-area{
	width: 100%;
	background: url("../common/back.jpg");
	position: relative;
}
.slider {
   width:40vw;
    margin:190px auto 0px;
}
.slider li{
	list-style: none;
	background: #fff;
	border-radius: 6%;
}
.slider a img:hover{
	opacity: 0.6;
}
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

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

/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slick-prev,.slick-next {
    top: 350px;
    cursor: pointer;/*マウスカーソルを指マークに*/  
    height: 50px;
    width: 50px;
	border-radius: 50%;
	background: rgba(30,30,30,0.5);
	border: 2px solid #fff;
}

.slick-prev::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}

.slick-next::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}



.slick-prev {/*戻る矢印の位置と形状*/
	top:42%;
    left: 28%;
    transform: rotate(-135deg);
	z-index: 100;
	position: absolute;
}

.slick-next {/*次へ矢印の位置と形状*/
	top:42%;
    right: 28%;
    transform: rotate(45deg);
	z-index: 100;
	position: absolute;
}	
}
@media screen and (min-width: 681px) and (max-width: 1400px){	
.slider-area{
	width: 100%;
	background: url("../common/back.jpg");
	position: relative;
}
.slider {
   width:60vw;
   margin: 190px auto 0px;
}
.slider li{
	list-style: none;
	background: #fff;
	border-radius: 6%;
}
.slider a img:hover{
	opacity: 0.6;
}	
	
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

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

/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slick-prev,.slick-next {
    top: 350px;
    cursor: pointer;/*マウスカーソルを指マークに*/  
    height: 50px;
    width: 50px;
	border-radius: 50%;
	background: rgba(30,30,30,0.5);
	border: 2px solid #fff;
}

.slick-prev::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}

.slick-next::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}


.slick-prev {/*戻る矢印の位置と形状*/
	top:42%;
    left: 18%;
    transform: rotate(-135deg);
	z-index: 100;
	position: absolute;
}

.slick-next {/*次へ矢印の位置と形状*/
	top:42%;
    right: 17%;
    transform: rotate(45deg);
	z-index: 100;
	position: absolute;
}

}

@media screen and (max-width: 680px){	
.slider-area{
	width: 100%;
	background: url("../common/back.jpg");
	position: relative;
}
.slider {
   width:60vw;
    margin:330px auto 0px;
}
.slider li{
	list-style: none;
}
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

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

/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slick-prev,.slick-next {
    top: 350px;
    cursor: pointer;/*マウスカーソルを指マークに*/  
    height: 50px;
    width: 50px;
	border-radius: 50%;
	background: rgba(30,30,30,0.5);
	border: 2px solid #fff;
}

.slick-prev::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}

.slick-next::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 17px; /* 要素の右からの距離 */
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(0deg); /* 角度調整 */
}


.slick-prev {/*戻る矢印の位置と形状*/
	top:42%;
    left: 18%;
    transform: rotate(-135deg);
	z-index: 100;
	position: absolute;
}

.slick-next {/*次へ矢印の位置と形状*/
	top:42%;
    right: 17%;
    transform: rotate(45deg);
	z-index: 100;
	position: absolute;
}

}




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

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

.slick-dots li {
    display:inline-block;
	margin: 25px 10px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:9px;/*ドットボタンのサイズ*/
    height:9px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;

    background:rgba(30,30,30,0.3);/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:rgba(30,30,30,0.7);/*ドットボタンの現在地表示の色*/
}

button,
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}