/*==================================================
スライダーのためのcss
===================================*/
.slider-wrap{
  position: relative;
  height: 100%;
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 60%,#d66379 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.slider-wrap::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 62%,#d66379 62%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: -1;
}

.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
  width: 90%;
  margin: 0 auto;
}
.card img {
	width: 96%;
	margin: 0px auto 0;	
}

.debut-wrap{
	background-color: #d4657a;	
}
.debut {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
width: 60%;	
  margin: 0 auto;
}
.debut .card img {
	width: 94%;
	margin: 25px auto 60px;
}

.case-wrap{
	background-color: #fbf6d4;	
}
.case{
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
  width: 60%;
  margin: 0 auto;
}
.case .card img {
	width: 94%;
	margin: 25px auto 60px;
}






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

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

/*矢印の設定*/

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

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

@media screen and (max-width:600px) {
.slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
  width: 96%;
  margin: 0 auto;
}
.slider-wrap{
  position: relative;
  height: 100%;
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 62%,#d66379 62%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.card img {
	width: 96%;
	margin: 0px auto -18px;	
}

.case .card img {
	width: 90%;
}
.debut .card img {
	width: 90%;
}
.debut {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
width: 94%;	
  margin: 0 auto;
}
	
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 35%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;
  /*矢印の色*/
  border-right: 2px solid #666;
  /*矢印の色*/
  height: 12px;
  width: 12px;
}	
	
	
.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 0.6%;
  transform: rotate(-135deg);
}
.slick-next {
  /*次へ矢印の位置と形状*/
  right: 0.6%;
  transform: rotate(45deg);
}
}


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

@media screen and (max-width:600px) {
.debut .slick-prev,
.debut .slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 4px solid #fff;
  /*矢印の色*/
  border-right: 4px solid #fff;
  /*矢印の色*/
  height: 18px;
  width: 18px;
}
.debut .slick-next{/*戻る矢印の位置と形状*/
    right: 0;
}
.debut .slick-prev{/*戻る矢印の位置と形状*/
    left: 0;
}
}

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


@media screen and (max-width:600px) {
.case{
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  max-width: 1500px !important;
  width: 94%;
  margin: 0 auto;
}
.case .slick-prev,
.case .slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 4px solid #666;
  /*矢印の色*/
  border-right: 4px solid #666;
  /*矢印の色*/
  height: 18px;
  width: 18px;
}
	.case .slick-next{/*戻る矢印の位置と形状*/
    right: 0;
}
.case .slick-prev{/*戻る矢印の位置と形状*/
    left: 0;
}
}






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

.slick-dots {
  text-align: center;
  margin: 10px 0 0px 0;
  position: absolute; /* 固定位置 */
  left: 50%;          /* 水平方向中央揃え */
  transform: translateX(-50%); /* 完全な中央揃え */
  bottom:20px;
}

.debut .slick-dots{
  text-align: center;
  margin: 0px;
  position: absolute; /* 固定位置 */
  left: 50%;          /* 水平方向中央揃え */
  transform: translateX(-50%); /* 完全な中央揃え */
  bottom:30px;
}


.case .slick-dots{
  text-align: center;
  margin: 0px;
  position: absolute; /* 固定位置 */
  left: 50%;          /* 水平方向中央揃え */
  transform: translateX(-50%); /* 完全な中央揃え */
  bottom:30px;
}

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

.slick-dots button {
  color: transparent;
  outline: none;
  width: 12px;
  /*ドットボタンのサイズ*/
  height: 12px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
	border: 1px solid #fff;
	background: #d4657a;
}
.debut .slick-dots button{
	border: 1px solid #fff;
	background: #d4657a;
}
.case .slick-dots button{
	border: 1px solid #666;
	background: #fbf6d4;
}



.slick-dots .slick-active button {
  background: #fff;
  /*ドットボタンの現在地表示の色*/
}
.debut .slick-dots .slick-active button {
  background: #fff;
  /*ドットボタンの現在地表示の色*/
}
.case .slick-dots .slick-active button {
  background: #666;
  /*ドットボタンの現在地表示の色*/
}