@charset "utf-8";

section {
	.bg {
		width:100%;
		display:block;
		&.bg_top {
			transform:translateY(1px);
		}
		&.bg_bottom {
			transform:translateY(-1px);
		}
	}
	.wrap {
		padding:90px 0;
		.contents {
			h2 {
				font-size:2.2rem;
				display:grid;
				justify-items:center;
				text-align:center;
				width:140px;
				margin:0 auto 2.5em;
				color:var(--color_main);
				letter-spacing:.1em;
				grid-row-gap:.66em;
				position:relative;
				span {
					width:100%;
					font-size:1.4rem;
					letter-spacing:.08em;
					padding-top:1.1em;
					position:relative;
					text-align:center;
					&::before {
						content:'';
						display:block;
						background-color:var(--color_main);
						border-radius:10px;
						width:100%;
						height:3px;
						position:absolute;
						left:0;
						top:0;
					}
				}
				.obj {
					position:absolute;
					display:block;
					width:90px;
				}
			}
			h3 {
				font-size:2.3rem;
				line-height:1.74;
				font-family: "dnp-shuei-mgothic-std", sans-serif;
				letter-spacing:.08em;
				margin-bottom:.75em;
				font-weight:600;
			}
			p {
				font-size:1.4rem;
				line-height:1.71;
				font-weight:500;
				letter-spacing:.06em;
			}
			.btn {
				font-size:1.4rem;
				font-weight:600;
				line-height:1;
				background-color:var(--color_main);
				color:#FFFFFF;
				height:34px;
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:center;
				letter-spacing:.05em;
				grid-column-gap:.5em;
				width:100%;
				max-width:130px;
				border-radius:17px;
				padding-bottom:2px;
				img {
					width:.9em!important;
					transform:translateY(1px);
				}
			}
		}
	}
	&:last-child {
		.wrap {
			padding-bottom:120px;
		}
	}
	&:nth-child(odd) {
		.wrap {
			background-color:#FFFFFF;
		}
	}
}

#mv {
	.wrap {
		padding:0;
		.slider_wrap {
			position:relative;
			overflow: hidden;
			.mv_slider {
				margin:0;
				.swiper-slide {
					img {
						display:block;
						width:100%;
						max-height:calc(100vh - 110px);
						max-height:calc(100dvh - 110px);
						aspect-ratio:1366/calc(768 - 110);
						object-fit:cover;
					}
				}
			}
			.swiper-pagination {
				bottom:25px;
				display:flex;
				justify-content:center;
				column-gap:18px;
				.swiper-pagination-bullet {
					width:8px;
					height:8px;
					border-radius:50%;
					background-color:#FFFFFF;
					margin:0;
					padding:0;
					opacity:1;
					&.swiper-pagination-bullet-active {
						background-color:var(--color_main);
					}
				}
			}
		}
		.contents {
			position:relative;
			.scroll {
				display:grid;
				align-items:center;
				width:30px;
				height:100px;
				position:absolute;
				right:calc(50% - 50vw + 88px);
				bottom:20px;
				z-index:2;
				img {
					width: 10px;
				}
				&::before {
					content:'';
					display:block;
					width:2px;
					height:100%;
					background-color:#3e3a39;
					position:absolute;
					left:20px;
					top:0;
					animation-name: scrollanim;
					animation-delay: 0s;
					animation-duration:  2s;
					animation-iteration-count: infinite;
					animation-timing-function: ease-in;
					will-change: transform;
				}
				&::after {
					content:'';
					display:block;
					width:2px;
					height:10px;
					background-color:#3e3a39;
					position:absolute;
					left:20px;
					bottom:0;
					transform-origin:left bottom;
					transform:rotate(45deg);
					animation-name: scrollanim2;
					animation-delay: 0s;
					animation-duration:  2s;
					animation-iteration-count: infinite;
					animation-timing-function: ease-out;
					will-change: transform;
				}
			}
		}
	}
}

@keyframes scrollanim {
    0% {
		height:0;
    }
    60% {
		height:100px;
    }
    75% {
		height:100px;
    }
    100% {
		height:100px;
    }
}
@keyframes scrollanim2 {
    0% {
		height:0;
    }
    60% {
		height:0;
    }
    75% {
		height:10px;
    }
    100% {
		height:10px;
    }
}

@keyframes arrow {
	0% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(-5px);
	}
}

#news {
	.wrap {
		padding-bottom:80px;
		.contents {
			h2 {
				.obj {
					left:-100px;
					top:-5px;
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-column-gap:3.2%;
				margin-bottom:45px;
				a {
					.img {
						overflow:hidden;
						border-radius:5px;
						box-shadow:7px 7px 5px rgba(0,0,0,.08);
						boxs
						img {
							display:block;
							aspect-ratio:1.78;
							width:100%;
						}
					}
					.info {
						display:grid;
						grid-template-columns:auto 1fr;
						font-size:1.3rem;
						padding:1.66em 0 .75em;
						span {
							color:var(--color_main);
							font-weight:600;
							&.date {
								&::after {
									content:'|';
									margin:0 .66em;
								}
							}
							&.cat {
								display:flex;
								flex-wrap:wrap;
								gap:.5em;
							}
						}
					}
					h3 {
						font-size:1.4rem;
						line-height:1.5;
						font-weight:500;
						font-family: "dnp-shuei-mgothic-std", sans-serif;
						margin-bottom:0;
					}
				}
			}
			.btn {
				grid-template-columns:auto;
				max-width:110px;
				margin:0 auto;
			}
		}
	}
}

#about {
	.wrap {
		padding-top:60px;
		.contents {
			h2 {
				margin-bottom:3em;
				.obj {
					right:-110px;
					top:-15px;
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 55%;
				align-items:start;
				grid-column-gap:46px;
				.detail {
					display:grid;
					height: 100%;
					grid-template-rows: auto auto 1fr;
					.inner_box {
						display:flex;
						justify-content:space-between;
						align-items:start;
						align-self: end;
						& > img {
							max-width:min(49%,240px);
							height:auto;
						}
					}
				}
				.img_box {
					display:flex;
					flex-wrap:wrap;
					align-content:start;
					justify-content:space-between;
					row-gap: 46px;
					column-gap:46px;
					img {
						width:100%;
						flex:1;
					}
					.inner_box2 {
						display:flex;
						justify-content:space-between;
						column-gap:46px;
						img {
							width:40%;
						}
					}
				}
			}
		}
	}
}

#feature {
	.wrap {
		padding-top:50px;
		padding-bottom:80px;
		.contents {
			h2 {
				margin-bottom:3em;
				.obj {
					left:-115px;
					top:-10px;
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:55% 1fr;
				grid-column-gap:46px;
				align-items:start;
				.detail {
					display:grid;
					height: 100%;
					grid-template-rows: auto auto 1fr;
					order:1;
					.inner_box {
						display:flex;
						justify-content:space-between;
						align-items:start;
						align-self: end;
						& > img {
							max-width:min(49%,240px);
							height:auto;
						}
						.btn {
							order:1;
						}
					}
				}
				.img_box {
					display:flex;
					flex-wrap:wrap;
					align-content:start;
					justify-content:space-between;
					row-gap:46px;
					column-gap:46px;
					img {
						width:100%;
						flex:1;
					}
					.inner_box2 {
						display:flex;
						justify-content:space-between;
						column-gap:46px;
						img {
							width:40%;
						}
					}
				}
			}
		}
	}
}

#childcare {
	.wrap {
		padding-top:50px;
		.contents {
			h2 {
				margin-bottom:3em;
				.obj {
					right:-110px;
					top:-15px;
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 57.5%;
				grid-column-gap:46px;
				.detail {
					p {
						margin-bottom:2em;
					}
				}
				.img_box {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-column-gap:46px;
				}
			}
		}
	}
}
	



@media (hover:hover) {

	#mv {
		.wrap {
			.contents {
				.scroll {
					transition:0s;
					img {
						transition:.3s;
					}
					&:hover {
						opacity:1;
						img {
							transform:translateY(5px);
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:1380px) {

	#mv {
		.wrap {
			.contents {
				.scroll {
					right:0;
				}
			}
		}
	}
	
}

@media screen and (max-width:1024px) {
	
}

@media screen and (max-width:768px) {

	section {
		.wrap {
			padding:50px 0;
			.contents {
				h2 {
					font-size:1.76rem;
					width:112px;
					margin:0 auto 2.2em;
					span {
						font-size:1.12rem;
					}
					.obj {
						width:76px;
					}
				}
				h3 {
					font-size:1.84rem;
					letter-spacing:normal;
					margin-bottom:.4em;
				}
				p {
					font-size:1.3rem;
				}
				.btn {
					font-size:1.12rem;
					height:28px;
					max-width:104px;
					border-radius:14px;
					padding-bottom:0;
					img {
						padding-bottom:2px;
					}
				}
			}
		}
		&:last-child {
			.wrap {
				padding-bottom:60px;
			}
		}
	}
	
	#mv {
		.wrap {
			.slider_wrap {
				.mv_slider {
					.swiper-slide {
						img {
							max-height:calc(100vh - 65px);
							max-height:calc(100dvh - 65px);
							aspect-ratio:.618;
						}
					}
				}
					.swiper-pagination {
						bottom:20px;
					}
			}
			.contents {
				.scroll {
					width:28px;
					height:70px;
					right:-10px;
					img {
						width: 9px;
					}
					&::before {
						left:18px;
					}
					&::after {
						left:18px;
					}
				}
			}
		}
	}

	
@keyframes scrollanim {
    0% {
		height:0;
    }
    60% {
		height:70px;
    }
    75% {
		height:70px;
    }
    100% {
		height:70px;
    }
}
	
	#news {
		.wrap {
			.contents {
				h2 {
					.obj {
						left:-80px;
						top:-5px;
					}
				}
				.contents_inner {
					grid-template-columns:repeat(2,1fr);
					grid-column-gap:18px;
					grid-row-gap:18px;
					margin-bottom:36px;
					a {
						.info {
							font-size:1.05rem;
							padding:1.33em 0 .5em;
						}
						h3 {
							font-size:1.1rem;
							line-height:1.36;
							font-weight:500;
							font-family: "dnp-shuei-mgothic-std", sans-serif;
						}
					}
				}
				.btn {
					max-width:90px;
					padding-bottom:2px;
				}
			}
		}
	}
	
	#about {
		.wrap {
			.contents {
				h2 {
					margin-bottom:2.2em;
					.obj {
						right:-90px;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					.detail {
						p {
							margin-bottom:1.5em;
						}
					}
					.img_box {
						row-gap:14px;
						column-gap:14px;
						.inner_box {
							width:39%;
							display:grid;
							align-content:space-between;
						}
						.inner_box2 {
							flex-wrap:wrap;
							grid-row-gap:14px;
							width:calc(61% - 14px);
							img {
								width:100%;
							}
						}
					}
				}
			}
		}
	}
	
	#feature {
		.wrap {
			.contents {
				h2 {
					margin-bottom:2.2em;
					.obj {
						left:-95px;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					.detail {
						p {
							margin-bottom:1.5em;
						}
					}
					.img_box {
						order:1;
						row-gap:14px;
						column-gap:14px;
						.inner_box {
							width:39%;
							display:grid;
							align-content:space-between;
							.btn {
								margin-right:0;
								margin-left:auto;
							}
						}
						.inner_box2 {
							flex-wrap:wrap;
							grid-row-gap:14px;
							width:calc(61% - 14px);
							img {
								width:100%;
							}
						}
					}
				}
			}
		}
	}
	
	#childcare {
		.wrap {
			.contents {
				h2 {
					.obj {
						right:-84px;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					.detail {
						display:contents;
						p {
							margin-bottom:1.5em;
						}
						.btn {
							order:2;
						}
					}
					.img_box {
						grid-column-gap:14px;
						margin-bottom:40px;
					}
				}
			}
		}
	}
	
}