@charset "utf-8";

section {
	.wrap {
		padding:50px 0;
		border-bottom:6px solid #dadada;
		.contents {
			h2 {
				&.font_maru {
					color:var(--color_main);
					font-size:3.6rem;
					font-weight:500;
					letter-spacing:.05em;
					display:inline-grid;
					justify-items:center;
					grid-row-gap:.2em;
					margin-bottom:1em;
					.font_en {
						font:inherit;
						color:var(--color_def);
						font-size:.5em;
						letter-spacing:normal;
					}
				}
			}
		}
	}
}

#mv {
	.wrap {
		position:relative;
		z-index:1;
		padding:0;
		border:none;
		max-width: 1300px;
		margin:0 auto;
		&:not(.loading) {
			&::before,&::after {
				opacity:0;
				pointer-events:none;
			}
		}
		&::after {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			z-index:2;
			left:0;
			top:0;
			background-color:rgba(255,255,255,.66);
			transition-duration:.5s;
			opacity:1;
			content: none;
		}
		&::before {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			z-index:3;
			left:0;
			top:0;
			background:url(../img/top/loading.gif) no-repeat center center/33px auto ;
			mix-blend-mode: multiply;
			transition-duration:.5s;
			opacity:1;
		}
		h1 {
		  position: absolute;
		  width: 1px;
		  height: 1px;
		  padding: 0;
		  margin: -1px;
		  overflow: hidden;
		  clip: rect(0, 0, 0, 0);
		  white-space: nowrap;
		  border: 0;
		}
		video {
			width:100%;
			aspect-ratio:16/9;
			object-fit:cover;
			position:relative;
			z-index:1;
			display:block;
		}
	}
}

#instagram {
	.wrap {
		.contents {
			h2 {
				display:grid;
				font-size:3.0rem;
				grid-template-columns:1.2em 1fr;
				align-items:center;
				grid-column-gap:.5em;
				margin-bottom: 1em;
				span {
					letter-spacing:.05em;
					font-weight:500;
					transform:translateY(-.1em);
					&:first-letter {
						color:var(--color_main);
						font-size:1.33em;
					}
				}
			}
		}
	}
}

#greeting {
	.wrap {
		background:url(../img/top/greeting_bg.png) no-repeat right top/500px auto;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:36% 1fr;
				grid-column-gap:4%;
				.greeting {
					.img {
						display:grid;
						grid-template-columns:max(55%,150px) 1fr;
						grid-column-gap:3%;
						margin-bottom:20px;
						& > a {
							grid-area:1/2/2/3;
						}
						img {
							display:block;
						}
						p {
							line-height:1.33;
							font-size:1.4rem;
							display:grid;
							justify-items:center;
							padding-top:.5em;
							& > span {
								font-size:1.33em;
								span {
									font-size:.75em;
									margin-right:.33em;
								}
							}
						}
					}
					ul {
						font-size:1.4rem;
						display:grid;
						grid-row-gap:.5em;
						li {
							line-height:1.33;
						}
					}
				}
				.detail {
					padding-left:30px;
					border-left:2px solid #dadada;
					h3 {
						font-size:3.6rem;
						color:var(--color_main);
						line-height:1.33;
						font-weight:500;
						margin-bottom:.5em;
						span {
							font:inherit;
							display: inline-block;
						}
					}
				}
			}
		}
	}
}

#school {
	.wrap {
		.contents {
			h3 {
				font-size:3.6rem;
				color:var(--color_main);
				line-height:1.33;
				font-weight:500;
				margin-bottom:2em;
				text-align:center;
			}
			.school {
				max-width:800px;
				margin:0 auto;
				display:grid;
				grid-template-columns:45% 1fr;
				align-items:center;
				grid-column-gap:2%;
				margin-bottom:90px;
				ul {
					height:90%;
					display:grid;
					grid-template-rows:25.5% 11% 11% 34% 11%;
					align-content:space-between;
					li {
						display:grid;
						grid-template-columns:15px 1fr;
						grid-template-rows:1fr;
						align-content:center;
						align-items:center;
						height:100%;
						&::before {
							content:'';
							height:calc(100% - 6px);
							border:3px solid var(--color_main);
							border-left:none;
						}
						dl {
							font-size:1.6rem;
							display:grid;
							grid-template-columns:4.5em 1fr;
							align-items:center;
							justify-content:center;
							border-bottom:3px solid var(--color_main);
							padding-bottom:.33em;
							padding-left:1.5em;
							grid-row-gap:.5em;
							transform:translateY(-33%);
							dd {
								font-size:1.33em;
								font-weight:600;
								&.img {
									grid-area:1/1/2/3;
								}
							}
							&:has(.img) {
								transform:translateY(0);
							}
						}
					}
				}
			}
			& > ul {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-gap:50px 5%;
				li {
					h4 {
						font-size:2.2rem;
						line-height:1.5;
						text-align:center;
						margin-bottom:.5em;
						font-weight:500;
					}
					img {
						display:block;
					}
				}
			}
		}
	}
}

#campus {
	.wrap {
		.contents {
			.ttl {
				display:grid;
				grid-template-columns:auto 1fr;
				grid-column-gap:4%;
				h2 {
					letter-spacing:-.05em;
				}
				p {
					font-size:1.8rem;
					line-height:1.5;
				}
			}
			.event {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-gap:30px 3%;
				margin-bottom:60px;
				li {
					display:grid;
					grid-row-gap:10px;
					align-content:start;
					span {
						font-size:2.2rem;
						color:var(--color_main);
						font-family: "M PLUS 1p", sans-serif;
						span {
							font-size:1.5em;
						}
						&.vacation {
							color:var(--color_def);
							font-size:1.8rem;
							display:block;
							width:70%;
							text-align:center;
							padding-top:.33em;
							position:relative;
							border-top:3px solid var(--color_main);
							transform:translateX(70%);
							&::before,&::after {
								content:'';
								display:block;
								width:10px;
								height:10px;
								background-color:var(--color_main);
								border-radius:50%;
								position:absolute;
								top:-6px;
								left:0;
							}
							&::after {
								left:auto;
								right:0;
							}
						}
					}
					h3 {
						font-size:1.5rem;
						text-align:center;
						line-height:1.33;
						font-family: "M PLUS 1p", sans-serif;
						font-weight:500;
					}
				}
			}
			p {
				&.body {
					font-size:2.0rem;
					text-align:center;
					line-height:1.5;
					margin-bottom:2em;
					span {
						color:var(--color_main);
						font-weight:600;
					}
				}
			}
			.life {
				display:grid;
				grid-template-columns:repeat(5,1fr);
				grid-gap:30px 2%;
				li {
					h3 {
						text-align:center;
						font-size:1.7rem;
						line-height:1.2;
						margin-block:.33em;
						min-height:2.4em;
						display:grid;
						align-items:center;
						justify-content:center;
					}
					p {
						font-size:1.5rem;
						line-height:1.33;
						padding-top:.5em;
						span {
							font:inherit;
							display: inline-block;
						}
					}
				}
			}
		}
	}
}

#facility {
	.wrap {
		.contents {
			h3 {
				font-size:3.2rem;
				color:var(--color_main);
				line-height:1.33;
				font-weight:500;
				margin-bottom:2em;
				text-align:center;
			}
			.facility {
				display:grid;
				grid-template-columns:repeat(3,1fr);
				grid-gap:50px 4%;
				li {
					* {
						font-family: "Zen Old Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
					}
					img {
						display:block;
						aspect-ratio:3/2;
						object-fit:contain;
					}
					h4 {
						font-size:2.4rem;
						padding:.66em 0 .33em;
						margin-bottom:.66em;
						display:grid;
						align-items:center;
						justify-content:center;
						border-bottom:1px solid #cccccc;
						a {
							display:grid;
							grid-template-columns:.8em 1fr;
							align-items:center;
							grid-column-gap:.2em;
							&::before {
								content:'';
								height:.8em;
								background:url(../img/common/arrow.svg) no-repeat left 56% center/25% auto;
								background-color:#000000;
								border-radius:50%;
							}
						}
					}
					p {
						font-size:1.4rem;
						line-height:1.5;
						text-align:center;
						margin-bottom:1em;
					}
					& > span {
						display:block;
						font-size:1.1rem;
						line-height:1.5;
						text-align:center;
						margin-bottom:1em;
						letter-spacing:-.05em;
					}
					.btn {
						font-size:1.5rem;
						border:1px solid #000000;
						display:grid;
						grid-template-columns:auto 1em;
						align-items:center;
						justify-content:center;
						grid-column-gap:.5em;
						padding:.4em 0 .5em;
						width:16em;
						margin:0 auto;
						border-radius:6px;
						&::after {
							content:'';
							height:1em;
							background:url(../img/common/arrow.svg) no-repeat left 58% center/25% auto;
							background-color:#000000;
							border-radius:50%;
						}
					}
					&.fukuoka {
						h4 {
							a {
								color:#1891bf;
								&::before {
									background-color:#1891bf;
								}
							}
						}
					}
					&.hakatanomori {
						h4 {
							a {
								color:#28977e;
								&::before {
									background-color:#28977e;
								}
							}
						}
					}
					&.morooka {
						h4 {
							a {
								color:#c35a81;
								&::before {
									background-color:#c35a81;
								}
							}
						}
					}
					&.itaduke {
						h4 {
							a {
								color:#94252a;
								&::before {
									background-color:#94252a;
								}
							}
						}
					}
					&.caresta {
						h4 {
							a {
								color:#c97d00;
								&::before {
									background-color:#c97d00;
								}
							}
						}
					}
					&.manahouse {
						h4 {
							a {
								color:#c59600;;
								&::before {
									background-color:#c59600;;
								}
							}
						}
					}
					&.manahouse2 {
						h4 {
							a {
								color:#7a6a56;
								&::before {
									background-color:#7a6a56;
								}
							}
						}
					}
					&.terihahome {
						h4 {
							a {
								color:#7a6a56;
								&::before {
									background-color:#7a6a56;
								}
							}
						}
					}
					&.hoiku {
						h4 {
							a {
								color:#fa6563;
								&::before {
									background-color:#fa6563;
								}
							}
						}
					}
					&.terihahoikuen {
						h4 {
							a {
								color:#ffc000;
								&::before {
									background-color:#ffc000;
								}
							}
						}
					}
					&.hoiku-ooike {
						h4 {
							a {
								color:#00a273;
								&::before {
									background-color:#00a273;
								}
							}
						}
					}
					&.hoiku-atago {
						h4 {
							a {
								color:#ec6d74;
								&::before {
									background-color:#ec6d74;
								}
							}
						}
					}
				}
			}
		}
	}
}

#news {
	.wrap {
		background-color:#bddfbc;
		.contents {
			.news_box {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-gap:30px 3%;
				li {
					a {
						display:grid;
						grid-template-columns:30% 1fr;
						grid-template-rows:auto 1fr;
						grid-row-gap:10px;
						grid-column-gap:5%;
						align-items:start;
						.img {
							grid-area:1/1/3/2;
							img {
								display:block;
								width:100%;
								aspect-ratio:1;
								object-fit:cover;
							}
						}
						.date {
							font-size:1.5rem;
						}
						h3 {
							font-size:1.5rem;
							line-height:1.3;
							font-weight:500;
							align-self:start;
						}
					}
				}
			}
		}
	}
}

#access {
	.wrap {
		border:none;
		padding-bottom:90px;
		.contents {
			.contents_inner {
				max-width:1000px;
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:5%;
				margin-bottom:50px;
				ul {
					font-size:1.6rem;
					display:grid;
					align-content:start;
					grid-row-gap:2em;
					padding-top:1em;
					li {
						dl {
							dt {
								display:grid;
								grid-template-columns:1em 1fr;
								grid-column-gap:1.5em;
								color:#e7951f;
								margin-bottom:.33em;
								img {
									transform:scale(1.8);
								}
							}
							dd {
								font-size:1.5rem;
								line-height:1.5;
								padding-left:2.5em;
								&::before {
									content:'・';
								}
							}
						}
					}
				}
			}
			.map {
				max-width:1000px;
				margin:0 auto;
				iframe {
					display:block;
					width:100%;
					aspect-ratio:2.6;
					margin-bottom:10px;
				}
				a {
					background-color:#ec7aa1;
					font-size:1.4rem;
					color:#FFFFFF;
					display:grid;
					grid-template-columns:.66em auto;
					align-items:center;
					justify-content:center;
					grid-column-gap:.33em;
					height:2em;
					border-radius:6px;
					max-width:11em;
					margin-left:auto;
				}
			}
		}
	}
}

@media (hover:hover) {
	
}

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

	#facility {
		.wrap {
			.contents {
				h3 {
					font-size:2.8rem;
				}
				.facility {
					grid-gap:50px 3%;
					li {
						p {
							font-size:1.3rem;
							margin-left:-1em;
							margin-right:-1em;
						}
					}
				}
			}
		}
	}
	
}

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

	section {
		.wrap {
			.contents {
				h2 {
					&.font_maru {
						font-size:3.2rem;
					}
				}
			}
		}
	}

	#greeting {
		.wrap {
			.contents {
				.contents_inner {
					grid-column-gap:2%;
					.detail {
						padding-left:20px;
						h3 {
							font-size:3.2rem;
							span {
								font:inherit;
								display:inline-block;
							}
						}
					}
				}
			}
		}
	}

	#school {
		.wrap {
			.contents {
				h3 {
					font-size:3.2rem;
				}
				& > ul {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-gap:50px 5%;
					li {
						h4 {
							font-size:1.8rem;
						}
					}
				}
			}
		}
	}

	#campus {
		.wrap {
			.contents {
				.ttl {
					p {
						font-size:1.6rem;
					}
				}
				.event {
					grid-gap:30px 2%;
					li {
						h3 {
							font-size:1.4rem;
						}
					}
				}
				.life {
					grid-template-columns:repeat(3,1fr);
				}
			}
		}
	}

	#facility {
		.wrap {
			.contents {
				.facility {
					grid-template-columns:repeat(2,1fr);
					grid-gap:50px 4%;
				}
			}
		}
	}

	#news {
		.wrap {
			background-color:#bddfbc;
			.contents {
				.news_box {
					grid-template-columns:repeat(2,1fr);
					grid-gap:30px 5%;
				}
			}
		}
	}

}

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

	section {
		.wrap {
			padding:30px 0;
			border-bottom:4px solid #dadada;
			.contents {
				h2 {
					&.font_maru {
						font-size:2.4rem;
						.font_en {
							font-size:.66em;
						}
					}
				}
			}
		}
	}

	#instagram {
		.wrap {
			.contents {
				h2 {
					font-size:2.4rem;
				}
			}
		}
	}

	#greeting {
		.wrap {
			background:url(../img/top/greeting_bg.png) no-repeat right top/75% auto;
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:50px;
					.greeting {
						.img {
							margin:0 auto 20px;
							max-width:400px;
						}
						ul {
							font-size:1.3rem;
						}
					}
					.detail {
						padding-left:0;
						border-left:none;
						h3 {
							font-size:2.4rem;
						}
					}
				}
			}
		}
	}

	#school {
		.wrap {
			.contents {
				h3 {
					font-size:2.2rem;
				}
				.school {
					margin-bottom:60px;
					ul {
						li {
							grid-template-columns:10px 1fr;
							&::before {
								height:calc(100% - 2px);
								border:2px solid var(--color_main);
								border-left:none;
							}
							dl {
								font-size:clamp(1.2rem,3.2vw,1.6rem);
								position:absolute;
								left:10px;
								bottom:5px;
								padding-bottom:.2em;
								width:calc(100% - 10px);
								grid-template-columns:auto 1fr;
								grid-column-gap:1em;
								border-bottom:2px solid var(--color_main);
								transform:translateY(0);
								dd {
									font-size:clamp(1.2rem,3.4vw,2.0rem);
									&.img {
										grid-area:1/1/2/3;
										width:80%;
									}
								}
								&:has(.img) {
									transform:translateY(0);
								}
							}
							&:nth-child(1) {
								dl {
									bottom:50%;
								}
							}
							&:nth-child(2) {
								dl {
									bottom:60%;
								}
							}
							&:nth-child(5) {
								dl {
									bottom:auto;
									top:40%;
									border-top:2px solid var(--color_main);
									border-bottom:none;
									padding-top:.2em;
								}
							}
						}
					}
				}
				& > ul {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-gap:50px 5%;
					li {
						display:grid;
						grid-template-rows:1fr auto;
						h4 {
							font-size:1.6rem;
							display:grid;
							align-items:center;
						}
					}
				}
			}
		}
	}

	#campus {
		.wrap {
			.contents {
				.ttl {
					grid-template-columns:1fr;
					justify-items:start;
					margin-bottom:30px;
					p {
						font-size:1.4rem;
						line-height:1.5;
					}
				}
				.event {
					grid-template-columns:repeat(2,1fr);
					grid-gap:20px 3%;
					margin-bottom:50px;
					li {
						display:grid;
						grid-row-gap:10px;
						align-content:start;
						span {
							font-size:1.8rem;
							span {
								font-size:1.4em;
							}
							&.vacation {
								font-size:1.4rem;
							}
						}
						h3 {
							font-size:clamp(1.3rem,3.4vw,1.6rem);
							text-align:center;
							line-height:1.33;
							font-family: "M PLUS 1p", sans-serif;
							font-weight:500;
						}
					}
				}
				p {
					&.body {
						font-size:clamp(1.5rem,4vw,2.0rem);
					}
				}
				.life {
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-gap:20px 4%;
					li {
						h3 {
							font-size:clamp(1.5rem,4vw,2.0rem);
						}
						p {
							font-size:clamp(1.4rem,3.6vw,1.6rem);
						}
					}
				}
			}
		}
	}

	#facility {
		.wrap {
			.contents {
				h3 {
					font-size:1.8rem;
				}
				.facility {
					grid-template-columns:1fr;
					grid-row-gap:40px;
					max-width:400px;
					margin:0 auto;
					li {
						p {
							font-size:1.4rem;
							margin-left:auto;
							margin-right:auto;
						}
					}
				}
			}
		}
	}

	#news {
		.wrap {
			.contents {
				.news_box {
					grid-template-columns:1fr;
					grid-row-gap:20px;
					max-width:400px;
					margin:0 auto;
					li {
						a {
							.date {
								font-size:1.4rem;
							}
							h3 {
								font-size:1.4rem;
							}
						}
					}
				}
			}
		}
	}

	#access {
		.wrap {
			padding-bottom:60px;
			.contents {
				.contents_inner {
					max-width:400px;
					grid-template-columns:1fr;
					grid-row-gap:20px;
					margin-bottom:30px;
					ul {
						font-size:1.4rem;
						grid-row-gap:1.5em;
						li {
							dl {
								dt {
									padding-left:.2em;
									img {
										transform:scale(1.6);
									}
								}
								dd {
									font-size:1.4rem;
								}
							}
						}
					}
				}
				.map {
					iframe {
						aspect-ratio:1.6;
					}
				}
			}
		}
	}

}