/*画像部分*/
#top .swiper-container {
  width: 100%;
  height: 100%;
  background-color: #42210b;
  z-index: -1;
}
/*画像を背景にしている場合*/
#top .swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: auto;
}
#top .swiper-slide {
  font-size: 1.6rem;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center; /*写真中央合わせ*/
}
/* 画像を背景にしていない場合これが動く */
#top .swiper-slide .slide-img img {
  max-width: 1200px;
  width: 100%;
  height: 100%;
}
/*テキスト*/
#top .swiper-slide .slide_content h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  width: 80%;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}
/*最後のスライド文字位置*/
#top .swiper-slide .slide_last_text {
    position: absolute;
	text-align: center;
    color: white;
	width: 100%;
	height: 0;
	padding-top: 25px;
}
/*最後のスライド文字位置*/
#top .swiper-slide .slide_first_text {
    position: absolute;
	text-align: center;
    color: white;
	width: 100%;
	height: 0;
	padding-top: 63.5%;
}

#top .swiper-slide h3   {
	font-weight: 600;
	text-align: center;
    }
#hoikunaiyou .swiper-container .swiper-slide img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
#hoikunaiyou .swiper-container {
  text-align: center;
  padding: 0 0 60px 0;
	margin-bottom: 3rem;
}
#hoikunaiyou .swiper-container .swiper-slide p {
  width: 80%;
  margin: 0 auto;
}
#hoikunaiyou .swiper-button-prev,
#hoikunaiyou .swiper-button-next {
  display: none;
}
#hoikunaiyou .swiper-slide {
  cursor: pointer;
}

/*文字をアニメーション*/
    @keyframes fromTop {
      0% {
        top: 0%;
        opacity: 0;
      }
      100% {
        top: 50%;
        opacity: 1;
      }
    }
@keyframes fromBottom {
      0% {
        top: 80%;
        opacity: 0;
      }
      100% {
        top: 50%;
        opacity: 1;
      }
    }
@keyframes fromleft {
      0% {
        left: 0%;
        opacity: 0;
      }
      100% {
        left: 50%;
        opacity: 1;
      }
    }
 
/* .from_top を指定した要素のアニメーション */
#top .swiper-slide-active .from_top {
  animation: fromTop .5s linear 0s 1 normal both;
} 
  
/* .from_bottom を指定した要素のアニメーション */
#top .swiper-slide-active .from_bottom {
  animation: fromBottom .5s linear 1s 1 normal both;
} 
  
/* .from_left を指定した要素のアニメーション */
#top .swiper-slide-active .from_left {
  animation: fromleft .5s linear 1s 1 normal both;
} 
/*=====================================================================================================================
======================================================================================================================タブレット＆パソコン==576px以上*/
@media all and (min-width: 576px) {
	/*最後のスライド文字位置*/
	#top .swiper-slide .slide_last_text {
	padding-top: 50px;
}
	
/**/
}
/*=====================================================================================================================
======================================================================================================================タブレット＆パソコン==768px以上*/
@media all and (min-width: 768px) {
  #top .swiper-container {
    height: 500px; /*重要*/
    margin-top: 0;
  }
	/*最後のスライド文字位置*/
	#top .swiper-slide .slide_last_text {
	padding-top: 50px;
}
	/*最後のスライド文字位置*/
#top .swiper-slide .slide_first_text {
    position: absolute;
	text-align: center;
    color: white;
	width: 100%;
	height: 0;
	padding-top: 500px;
}

  /*画像部分*/
  #top .swiper-container .swiper-slide img {
    width: 100%; /*重要*/
    height: auto; /*重要*/
  }
  /*テキスト部分*/
  
	#top .swiper-slide h3 {
		font-size: 3rem;
	}
	
  /*テキスト*/
#top .swiper-slide .slide_content h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
}

  #hoikunaiyou .swiper-button-prev, #hoikunaiyou .swiper-button-next {
    display: block;
   top: 35%;
    position: absolute;
  }
}
/*=====================================================================================================================
======================================================================================================================タブレット＆パソコン==992px以上*/
@media only screen and (min-width: 992px) {
#top .swiper-container {
    height: 700px; /*重要*/
  max-height: 700px;  
	margin-top: 0;
  }
  #top .swiper-container .swiper-slide img {
    height: 100%;
    width: auto;
  } 
	/*最後のスライド文字位置*/
#top .swiper-slide .slide_first_text {
    position: absolute;
	text-align: center;
    color: white;
	width: 100%;
	height: 0;
	padding-top: 700px;
}
	/*===========================================================================================================保育内容ページ*/
  /*日常の様子*/
	#hoikunaiyou .slider .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #hoikunaiyou .slider .swiper-slide {
    width: 33.3%;
    padding: 0.5rem;
  }
 #hoikunaiyou .swiper-button-prev, #hoikunaiyou .swiper-button-next {
    display: block;
   top: 25%;
    position: absolute;
  }
  #hoikunaiyou .slider .swiper-button-prev, #hoikunaiyou .slider .swiper-button-next, #hoikunaiyou .slider .swiper-pagination {
    display: none;
  }
	/*ひがとこの一年*/
	#hoikunaiyou .slider_ichinen .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #hoikunaiyou .slider_ichinen .swiper-slide {
    width: 33.3%;
    padding: 0.5rem;
  }
  #hoikunaiyou .slider_ichinen .swiper-button-prev, #hoikunaiyou .slider_ichinen .swiper-button-next, #hoikunaiyou .slider_ichinen .swiper-pagination {
    display: none;
  }
  /**/
}