@charset "utf-8";

/* トップページ
   ========================================================================== */
.fade-in {
  transition: opacity 1s;
}
#home section {
	margin: 0;
}


.tab {
	display: none;
}
@media (min-width: 768px) and (max-width: 1280px) {
	.tab {
		display: block;
	}
	.sp {
		display: none !important;
	}
}
@media (min-width:1280px) {
	.tab {
		display: none;
	}
}

/* ヘッダ（SP）
   ====================================== */
@media (min-width:768px) {
  #home header {
		display: none;
  }
}


/* フッタ
   ====================================== */
#home footer {
  margin-top: 0;
}
@media (min-width:768px) {
  #home footer {
    margin-top: 0;
  }
}


/* スライド（スマホ版）
   ====================================== */
.sp-slide {
	font-size: 0;
	text-align: center;
}
.swiper-container {
	width: 100%;
}
@media (min-width:768px) {
	.sp-slide {
		display: none;
	}
}


/* ムービー
   ====================================== */
.image-area {
  width: 100%;
	background-color: #b6ddf2;
  margin-top: 50px;
}
@media (min-width: 768px) and (max-width: 1279px) {
  .image-area {
    position: relative;
		width: 100%;
		background-size: contain;
    overflow: hidden;
		margin-top: 0;
  }
  .image-area #main-movie {
		display: block;
    position: relative;
		width: 100%;
    padding: 0px;
  }
  .top-menu,
  .clone-nav {
		display: none !important;
  }
}
@media (min-width:1280px) {
  .image-area {
    position: relative;
    height: 100vh;
    background-size: 100% auto;
    overflow: hidden;
		margin-top: 0;
  }
  .image-area #main-movie {
		display: block;
    position: absolute;
    z-index: 888;
    top: -100%;
    bottom: -100%;
    right: -100%;
    left: -100%;
    margin: auto !important;
    padding: 0px;
  }
	.image-area .top-menu {
    position: absolute;
		z-index: 9999;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 253px;
		background-image: url("../img/top-hd-bg.png");
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.top-menu-list {
		display: flex;
		width: 1100px;
		margin: 0 auto;
		height: 216px;
	}
	.kumo-logo-2 {
		display: block;
		width: 298px;
	}
	.top-menu-list .top-menu-wrap {
		display: flex;
		align-items: flex-end;
	}
	.top-menu-list .top-menu-wrap a {
		display: block;
		line-height: 1.0;
		padding: 1em 0;
	}
	.menu-1,
	.menu-2 {
		display: flex;
		width: calc((1100px - 298px) / 2);
	}
	.menu-1 {
		justify-content: flex-start;
	}
	.menu-1 a {
		margin-right: 40px;
	}
	.menu-2 {
		justify-content: flex-end;
	}
	.menu-2 a {
		margin-left: 40px;
	}
	.menu-1 a,
	.menu-2 a {
		color: #666;
		transition: .3s;
	}
	.menu-1 a:hover,
	.menu-2 a:hover {
		color: #fff;
	}

	.clone-nav {
		position: fixed;
		z-index: 10;
		top: 0 !important;
		width: 100%;
		height: 60px;
		background-image: none;
		background-color: #b6ddf2;
		transition: .3s;
		transform: translateY(-100%);
		opacity: 0;
	}
	.is-show {
		opacity: 1.0;
		transform: translateY(0);
	}
	.kumo-logo-1 {
		display: none;
	}
	.db {
		display: block;
	}
	.dn {
		display: none;
		width: 0;
	}
	.clone-nav .top-menu-list {
		width: 100%;
		height: auto;
		align-items: flex-start;
		padding: 0 30px 0 20px;
	}
	.clone-nav .top-menu-wrap {
		width: 100%;
		height: 60px;
		align-items: center;
		justify-content: flex-end;
	}
	.clone-nav .menu-1,
	.clone-nav .menu-2 {
		width: auto;
	}
	.clone-nav .menu-1 a {
		margin-left: 40px;
		margin-right: 0;
	}
}



/* ブログエリア
   ========================================================================== */
.blog-area {
	background: url("../img/blog-area-bg.png");
  padding: 20px 0;
  margin-top: 0;
}
.blog-area .wrap > div {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.blog-area .wrap > div:last-of-type {
  margin-bottom: 0;
}
.blog-area .wrap > div > div {
	text-align: right;
	margin-top: 1em;
}
.blog-area .ttl {
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.0;
  text-align: center;
  margin-bottom: 10px;
}
.blog-area .ttl img {
  display: block;
  margin: 0 auto 10px auto;
}
@media (min-width:768px) {
  .blog-area {
		position: relative;
		height: 960px;
  }
  .blog-area .wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
    display: flex;
  }
  .blog-area .wrap > div {
    width: calc((100% - 40px) / 2);
    padding: 30px;
    margin: 0 40px 0 0;
    border-radius: 12px;
  }
  .blog-area .wrap > div:last-of-type {
    margin-right: 0;
  }
  .blog-area .ttl {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
}

.blog-area .blog-list li a {
  padding: 14px 0;
}
.blog-area .blog-list li:last-child a {
  margin-bottom: 0;
}
@media (min-width:768px) {
  .blog-area .blog-sub-info {
    margin-bottom: 0.5em;
  }
  .blog-area .blog-list li a {
    padding: 16px 0;
  }
	.blog-area .blog-list li a > div {
		display: block;
	}
	.blog-area .blog-list li a > div > div {
		align-items: flex-start;
	}
}



/* 保育への想い
   ========================================================================== */
.thought-area {
	width: 100%;
	background-image: url("../img/thought-area-bg.png");
	animation: bgiLoop 50s linear infinite;
	background-size: contain;
	text-align: center;
	overflow: hidden;
	padding: 30px 0;
}
.thought-area .thought-ttl {
	width: 50%;
}
.thought-txt p {
	font-size: 2.0rem;
	line-height: 1.0;
}
.thought-area .moon {
	display: none;
}
.thought-area .cloud {
	width: 240px;
	margin-top: 20px;
}
.thought-area a {
	margin-top: 20px;
}
@media (min-width: 768px) and (max-width: 1280px) {
	.thought-area-inner {
		width: 100% !important;
	}
}
@media (min-width:768px) {
	.thought-area {
		position: relative;
		width: 100%;
		height: 960px;
		background-size: auto;
		animation: bgiLoop 30s linear infinite;
		text-align: left;
	}
	.thought-area-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1320px;
		height: 640px;
		margin: auto;
	}
	.thought-txt {
		position: absolute;
		z-index: 2;
		top: 180px;
		left: 50%;
		transform: translateX(-50%);
	}
	.thought-txt p {
		font-size: 3.2rem;
		line-height: 1.0;
	}
	.thought-txt p:nth-of-type(2) {
		margin-left: 2em;
		margin-top: 1em;
	}
	.thought-txt p:nth-of-type(3) {
		margin-left: 4em;
		margin-top: 1em;
	}
	.thought-area img {
		position: absolute;
		z-index: 1;
	}
	.thought-area .thought-ttl {
		width: auto;
		left: 0;
		top: 30px;
	}
	.thought-area .moon {
		display: block;
		right: 110px;
		top: 100px;
	}
	.thought-area .cloud {
		width: auto;
		margin-top: 0;
	}
	.thought-area .cloud-1 {
		left: 200px;
		bottom: 160px;
	}
	.thought-area .cloud-2 {
		left: 50%;
		transform: translateX(-50%);
		bottom: 60px;
	}
	.thought-area .cloud-3 {
		right: 180px;
		bottom: 120px;
	}
	.thought-area a {
		position: absolute;
		right: 110px;
		bottom: 50px;
	}
}
@keyframes bgiLoop {
		0% { background-position: 0 0;}
	100% { background-position: 0 3000px;}
}



/* 園一覧・フッタ
   ========================================================================== */
.ft-area {
	position: relative;
	background: url("../img/nursery-area-bg.png");
	overflow: hidden;
}
@media (min-width:768px) {
	.ft-area {
		height: 1100px;
	}
	#home footer {
		position: absolute;
		top: 800px;
		z-index: 5;
		height: 300px;
	}
}

.nursery-area {
	position: relative;
	padding-bottom: 20px;
}
.nursery-area-inner {
	display: block !important;
}
.nursery-area .nursery-box {
	display: block;
	/*justify-content: space-between;*/
	width: 100%;
	/*background-color: #ccc;*/
	font-size: 0;
	text-align: center;
	padding: 0 20px;
	margin-top: 20px;
}
.nursery-area .nursery-box div {
	display: inline-block;
	width: 90px;
	/*background-color: #cff;*/
	vertical-align: top;
	/*width: calc((100% - 40px) / 3);*/
	/*margin-right: 20px;*/
	/*margin: 0 10px;*/
	margin-right: 20px;
	/*border: 1px solid #000;*/
}
/*.nursery-area .nursery-box div a {
	display: block;
	border: 1px solid #000;
}*/
.nursery-area .nursery-box div:last-of-type {
	margin-right: 0;
}
/*.nursery-area .nursery-box:nth-of-type(2) {
	display: block;
	width: auto;
	padding: 0;
	text-align: center;
}
.nursery-area .nursery-box:nth-of-type(2) div {
	display: inline-block;
}*/

.nursery-area .recruit-box {
	position: relative;
	width: 100%;
	height: 60px;
	margin: 30px auto 0 auto;
}
.nursery-area .recruit-box .recruit {
	position: absolute;
	height: 60px;
	bottom: 0;
}
.nursery-area .star {
	display: none;
}
@media (min-width:768px) {
	.nursery-area {
		position: relative;
		width: 100%;
		height: 960px;
		padding: 0;
	}
	.nursery-area-inner {
		position: absolute;
		z-index: 5 !important;
		left: 50%;
		transform: translateX(-50%);
		width: 1100px;
		height: 960px;
		padding: 0;
		margin: 100px auto 0 auto !important;
	}
	.nursery-area .nursery-box {
		z-index: 2 !important;
		width: 800px;
		margin: 0 auto 30px auto;
	}
	.nursery-area .nursery-box div {
		z-index: 2;
		/*width: calc((100% - 90px) / 3);*/
		width: auto;
		margin-right: 80px;
		/*margin: 0 40px;*/
	}
	.nursery-area img {
		z-index: 2 !important;
	}
	.nursery-area .star {
		display: block;
		position: absolute;
		z-index: 0;
	}
	.nursery-area .recruit-box {
		position: relative;
		width: 800px;
		height: 104px;
		margin: 0 auto;
	}
	.nursery-area .recruit-box .recruit {
		height: 104px;
	}
}