/*==================================================
機能編 6-1-8　複数画像を流して見せる
===================================*/

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

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

.slider1 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

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

.slider2 .slick-slide {
    margin:0 0;/*スライド左右の余白調整*/
}



/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/

/* 4-3 くるっ（Z 軸（右へ）） */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(360deg);
		}
}

/* 4-1 ふわっ（その場で） */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:10s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 4-2 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 4-2 パタッ（左上へ） */
.flipLeftTop{
animation-name: flipLeftTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 4-2 パタッ（右上へ） */
.flipRightTop{
animation-name: flipRightTopAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* 4-4 ボンッ（拡大） */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.zoomInTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*========================================*/



/*==================================================
ここから学童、支援センターの紹介箇所用スライダーのためのcssです。
===================================*/
.slider3 {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:100%;
    margin:0 auto;
}

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

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

.slider3 .slick-slide {
    margin:0 0;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    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 {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:14px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
    border: 1px solid #cdcdcd;
}

.slick-dots .slick-active button{
    background:#00a45d;/*ドットボタンの現在地表示の色*/
    border: 1px solid #00a45d;
}