@charset "UTF-8";
/*===================================================================

		トップページ

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

/*----------------------------------------------------------------------
  スライダー
----------------------------------------------------------------------*/
.top_slider{
  max-width: 1920px;
  margin: 0 auto;
  }

/*----------------------------------------------------------------------
  トップ二分割画像
----------------------------------------------------------------------*/
.custom-animation-row {
  position: relative;
	overflow: hidden;
	margin-top: -107px;
	z-index: -1;
	}
@media screen and (max-width: 767.98px) {
	.custom-animation-row {
		margin-top: 0;
		}
}

.animation-list {
  display: flex; 
  list-style: none; 
  padding: 0;
  margin: 0;
  gap: 0px;
  height: 100%;
}

.animation-list li {
  /* ここから flex: 1 1 33.333%; を削除します */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100%;
}

/* 1番目のli要素の幅を指定 */
.animation-list li:first-child {
  /* grow:0 (伸びない), shrink:0 (縮まない), basis:33.333% (基本幅) */
  flex: 0 0 33.333%;
}

/* 2番目(最後)のli要素が残りの幅を埋めるように指定 */
.animation-list li:last-child {
  /* grow:1 (伸びる), shrink:1 (縮む), basis:auto (自動) */
  flex: 1 1 auto;
  /* もしくはシンプルに flex: 1; でもOKです */
}

.animation-list li:first-child .span_img{
  transform: translateY(-200px)!important; /* 上に200px移動 */
}

.rotate {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: #fff3e3;
	}
	
.rotate img{
	max-width: none!important;
	}
	
.zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /*animation: scale-up-down 8s ease-in-out infinite alternate;*/
  transform-origin: center center;
	}
  
.zoom2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: scale-up-down 12s ease-in-out infinite alternate;
  transform-origin: center center;
	}

@keyframes scale-up-down {
  0%		{transform: scale(1.0);}
  100%	{transform: scale(1.08);}
	}

@keyframes rotate-background {
  from {transform: rotate(0deg);}
  to   {transform: rotate(360deg);}
	}

.top_page_image_text {
  position: absolute;
  top: 18vh;
  left:5vw;
	
  text-shadow: 
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
	
	/* font-size: clamp(.8rem, 2.8vw, 2.4rem);/* clamp(最小サイズ, 推奨サイズ, 最大サイズ)
	フォントサイズは画面設定*/
  line-height: 1.4;
  font-weight: bold;
  opacity: 0; /* 最初は透明 */

  animation-name: slideInFromLeftAndCenter;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.0s; /* 任意 */
	}

@keyframes slideInFromLeftAndCenter {
  0%		{ opacity: 0; transform: translateX(-100vw);}
  100%	{ opacity: 1; transform: translateX(0%);}
}

.top_page_image_text span {
  display: block;
  margin-top: 1.45rem;
	/*font-size: clamp(.7rem, 1.8vw, 1.6rem); clamp(最小サイズ, 推奨サイズ, 最大サイズ)
	フォントサイズは画面設定*/
  font-weight: normal;
	}

@media screen and (max-width: 767.98px) {
	.top_page_image_text {
		margin-top: 2rem;
		position: static;
		text-align: center;
		}
}

/*----------------------------------------------------------------------
  保育園一覧
----------------------------------------------------------------------*/
.about_facilities{
	}
@media screen and (max-width: 767.98px) {
}

.facilities_list{
	margin-top: 3rem;
	}

.facilities_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  }

.facilities_list ul li {
	margin-bottom: 1.4rem;
  }

.facilities_list ul li a {
  text-decoration: none;
  }

.facilities_list .facilities_exterior_image {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
  vertical-align: middle;
  }

.facilities_list .facilities_exterior_image img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
  }

.facilities_list .image-shadow-wrapper{
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.3));
  }

.facilities_list .facilities_exterior_image::after {
  content: '';
  position: absolute;
  top: .4rem;
  left: .4rem;
  right: .4rem;
  bottom: .4rem;
  border: 1px solid white;
  box-sizing: border-box;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
  }

.facilities_list .facilities_name_official{
	position: relative;
	text-align: center;
	}

@media screen and (max-width: 767.98px) {
	.facilities_list p.facilities_name_official{
		margin-top: .2rem;
		font-size: 80%;
		}
	
	.facilities_list .facilities_exterior_image::after {
		top: .1rem;
		left: .1rem;
		right: .1rem;
		bottom: .1rem;
		}
}

.facilities_list a:hover img {
  transform: scale(1.05);
  }

.facilities_list_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 0.5s ease-in-out; /* フェードインアニメーション */
	}

/* Flexboxを使って子要素（テキスト）を中央に配置 */
.flex-center {
	display: flex;
	justify-content: center; /* 水平方向中央 */
	align-items: center; /* 垂直方向中央 */
	}

.overlay-text {
	color: #fff; /* 文字色 */
	font-size: 1.5rem; /* 文字サイズ */
	font-weight: bold;
	text-align: center;
	padding: 10px; /* テキストのパディング */
	/* 必要であればテキストの影なども追加 */
	text-shadow: 2px 2px 3px rgba(0,0,0,1);
	}

/* ホバー時のスタイル */
.image-shadow-wrapper:hover .facilities_list_overlay {
	opacity: 1; /* オーバーレイを表示 */
	}

@media screen and (max-width: 767.98px) {
	.facilities_list_overlay,
	.overlay-text{
		display: none;
		}
}

/*SNS*/
 nav.facilities_list .facilities_sns {
	 position: absolute;
	 right: 0;
	 top: 0;
	}

nav.facilities_list .facilities_sns li{
	margin-right: .4rem!important;
	margin-left: .4rem;
	}
	
nav.facilities_list .facilities_sns a img{
	max-width: 1.6rem;
	height: auto;
	}

@media screen and (max-width: 767.98px) {
	 nav.facilities_list .facilities_sns {
		 position: relative;
		 right: 0;
		 top: 0;
		}
	
	nav.facilities_list .facilities_sns li{
		margin-right: 0;
		margin-left: 1rem;
		}
	
	 nav.facilities_list .facilities_sns a img{
		max-width: 2rem;
		height: auto;
		}
}