@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

$base-color: #28BE69;
$font-color: #006449;

.link-box {
	display: block;
	text-align: center;
	color: #3ca669;
	border: solid 1px #3ca669;
	background-color: #fff;
	letter-spacing: 0.1em;
	padding: 1.2rem 0;
	transition: 0.3s;
	&::after {
		font-family: "Font Awesome 5 Free";
		content: "\f105";
		font-weight: 900;
		margin-left: 1em;
	}
	&:hover {
		color: #fff;
		background-color: #3ca669;
	}
}
.end-tag {
	display: block;
	text-align: center;
	color: #fff;
	border: solid 1px #3ca669;
	background-color: #3ca669;
	letter-spacing: 0.1em;
	padding: 1.2rem 0;
	transition: 0.3s;
}
h2{
	text-align: center;
	font-weight: 400;
	line-height: 4rem;
	margin-bottom: 2rem;
	span{
		font-family: 'Caveat', cursive;
		font-size: 50px;
		font-size: 5rem;
		color: $font-color;
	}
}

//main-img------------------------------------------ここから
#main-img {
	.first-v {
		position: relative;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}


//news------------------------------------------ここから
#news {
	padding: 6rem 0;
	.container {
		.inner {
			h2 {
				margin-bottom: 5rem;
			}
		}
	}
	.blog-area {
		margin: 0 -1.4rem 3rem;
		@include xs {
			margin-bottom: 1rem;
		}
		.blog-list {
			padding: 0 1.4rem;
			@include xs {
				margin: 0 auto 3rem;
				width: 90%;
			}
			&>a {
				display: block;
				height: 100%;
				box-shadow: 2px 2px 5px rgba(0,100,73,0.2);
				transition: 0.3s;
				&:hover {
					transform: translate(0, -20px);
				}
			}
			.blog-img {
				height: 200px;
				overflow: hidden;
				@include md {
					height: 175px;
				}
				@include sm {
					height: 145px;
				}
				@include xs {
					height: 175px;
				}
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.blog-content {
				padding: 2rem;
				@include sm {
					padding: 1rem;
				}
				@include xs{
					padding: 2rem;
				}
				&>p {
					font-size: 14px;
					font-size: 1.4rem;
					color: #333;
					line-height: 1;
					margin-bottom: 0.7rem;
				}
				dl {
					margin-bottom: 0;
					dt {
						font-weight: 400;
						color: $base-color;
						height: 28px;
						overflow: hidden;
						margin-bottom: 1rem;
						@include sm {
							margin-bottom: 0;
						}
					}
					dd {
						font-size: 14px;
						font-size: 1.4rem;
						color: #333;
						line-height: 1.7;
						height: 5rem;
						overflow: hidden;
						margin-bottom: 0;
						text-align: justify;
						p {
							height: 5rem;
							margin-bottom: 0;
						}
					}
				}
			}

		}
		
		
	}
	.link-box {
		margin-bottom: 7rem;
		@include xs {
			width: 90%;
			margin: 0 auto 7rem;
		}
	}
	.sns-link {
		margin: 0 -2rem;
		@include sm {
			margin: 0 -1rem;
		}
		&>div {
			padding: 0 2rem;
			@include sm {
				padding: 0 1rem;
			}
		}
		.sns-link-box {
			border: solid 1px #adadad;
			padding: 1rem;
			@include xs {
				margin-bottom: 2rem;
				padding: 0.7rem;
			}
			a {
				display: block;
				&:hover {
					opacity: 0.7;
				}
			}
			&:first-child {
				position: relative;
				&>img {
					position: absolute;
					width: 130px;
					top: -3.5rem;
					left: -8.5rem;
					@include md {
						width: 110px;
						top: -5rem;
						left: -4rem;						
					}
					@include sm {
						top: -6rem;
					}
					@include xs {
						left: -2rem;	
					}
				}
			}
		}
	}
}

//events------------------------------------------ここから
#events {
	position: relative;
	background-image: url("../img/nav-bg.svg");
	background-size: 48px;
	background-repeat: repeat;
	padding: 4rem 0 8rem;
	overflow: hidden;
	@include sm {
		padding-bottom: 24rem;
	}
	@include xs {
		padding-bottom: 22rem;
	}
	.events-contents {
		background-color: #BEEBD2;
		padding: 2.5rem 4rem;
		h4 {
			font-size: 50px;
			font-size: 5rem;
			font-weight: 600;
			color: $font-color;
			text-align: center;
			@include lg {
				font-size: 42px;
				font-size: 4.2rem;
			}
			@include sm {
				font-size: 38px;
				font-size: 3.8rem;
			}
			@include xs {
				font-size: 28px;
				font-size: 2.8rem;
			}
			.text-small {
				display: block;
				font-size: 16px;
				font-size: 1.6rem;
				font-weight: bold;
				text-align: left;
			    margin-left: 3rem;
				@include lg {
					margin-left: 2rem;
				}
				@include sm {
					margin-left: 6.5rem;
				}
				@include xs {
					margin-left: 0.5rem;
				}
			}
			.year {
				color: #80272D;
			}
		}
		.row {
			margin-bottom: 2rem;
		}
		.openschool {
			overflow: hidden;
			width: 65%;
			@include sm {
				width: 100%;
			}
			.d-flex {
				height: 100%;
				@include xs {
					flex-wrap: wrap;
					height: auto;
				}
			}
			dl {
				width: 50%;
				@include xs {
					width: 100%;
				}
				&:first-child {
					margin-right: 0.5rem;
					@include xs {
						margin-right: 0;
					}
				}
			}
		}
		.information-session {
			overflow: hidden;
			width: 35%;
			@include sm {
				width: 100%;
			}
			dl {
				height: 100%;
				dt {
					margin-bottom: 1rem;
				}
			}
		}
		.events-title {
			font-size: 14px;
			font-size: 1.4rem;
			font-weight: 600;
			color: #fff;
			background-color: $font-color;
			text-align: center;
			line-height: 1.6;
			margin-bottom: 0.5rem;
		}
		dl {
			background-color: #fff;
			width: 100%;
			padding: 2.5rem 0 2.5rem 2.5rem;
			@include lg {
				padding: 2rem 0 2rem 2rem;
			}
			@include xs {
				padding: 2rem;
			}
			dt {
				font-family: 'Noto Sans JP', sans-serif;
				font-size: 30px;
				font-size: 3rem;
				font-weight: 400;
				color: #4d4d4d;
				font-feature-settings: "palt";
				@include lg {
					font-size: 25px;
					font-size: 2.5rem;
				}
				span {
					font-size: 40px;
					font-size: 4rem;
					font-weight: 500;
					@include lg {
						font-size: 35px;
						font-size: 3.5rem;
					}
				}
			}
			dd {
				font-size: 28px;
				font-size: 2.8rem;
				font-weight: 500;
				color: #4d4d4d;
				line-height: 1.4;
				margin-bottom: 0;
				span {
					display: inline-block;
					font-size: 20px;
					font-size: 2rem;
					color: #a81c24;
					margin-top: 1.5rem;
					@include lg {
						font-size: 18px;
						font-size: 1.8rem;
					}
				}
			}
		}
		.link-box {
			background-color: transparent;
			&:hover {
				background-color: #3ca669;
			}
		}
	}
	.container {
		position: relative;
		.inner {
			&>img {
				position: absolute;
				width: 460px;
				bottom: -8rem;
				right: -10rem;
				@include xl {
					width: 440px;
					right: -6rem;
				}
				@include lg {
					width: 400px;
					right: -3rem;
				}
				@include md {
					width: 300px;
					right: -3rem;
				}
				@include sm {
					width: 400px;
					right: 0;
					left: 0;
					bottom: -24rem;
					margin: auto;
				}
				@include xs {
					width: 360px;
					bottom: -22rem;
				}
			}
		}
	}
}

//departments------------------------------------------ここから
#departments {
	padding: 5rem 0;
	background-image: url("../img/top-back.svg");
	background-repeat: repeat-y;
	background-position: center;
	background-size: 1194px;
	.inner {
		@include sm {
			width: 80%;
		}
		@include xs {
			width: 100%;
		}
	}
	ul {
		li {
			position: relative;
			@include sm {
				margin-bottom: 30rem;
			}
			&:last-child {
				margin-bottom: 20rem;
			}
			&>img {
				width: 100%;
				border-radius: 25px;
				box-shadow: 2.5px 2.5px 8px 0px rgba(0, 100, 73, 0.3);
			}
			a {
				dl {
					position: absolute;
					z-index: 2;
					background-color: #fff;
					left: 0;
					right: 0;
					width: 55%;
					border-radius: 30px;
					padding: 2rem 4rem;
					margin: -7rem auto 0;
					transition: 0.3s;
					@include lg {
						width: 60%;
						padding: 2rem 3rem;
					}
					@include md {
						width: 70%;
					}
					@include xs {
						width: 80%;
						padding: 2rem 4rem;
					}
					dt {
						font-size: 33px;
						font-size: 3.3rem;
						color: $font-color;
						text-align: center;
						border-bottom: solid 1.5px #80272D;
						padding-bottom: 1.5rem;
						margin-bottom: 2rem;
						@include lg {
							font-size: 30px;
							font-size: 3rem;
							padding-bottom: 1rem;
							margin-bottom: 1.5rem;
						}
						@include md {
							font-size: 27px;
							font-size: 2.7rem;
						}
						span {
							display: block;
							font-size: 16.5px;
							font-size: 1.65rem;
							font-weight: 400;
							margin-top: 1rem;
							@include md {
								margin-top: 0.5rem;
							}
						}
						img {
							width: 65px;
							display: block;
							margin: 0 auto;
							margin-bottom: 2rem;
							@include lg {
								margin-bottom: 1.5rem;
							}
						}
					}
					dd {
						color: #000;
						line-height: 1.75;
						text-align: justify;
						@include lg {
							line-height: 1.6;
						}
					}
				}
				&:hover {
					dl {
						background-color: #EBF9F1;
						transform: translate(0, -20px);
					}
				}
			}
		}
	}

}

//page-link------------------------------------------ここから
#page-link {
	&>.row {
		margin-bottom: 5rem;
		&>a {
			padding: 0;
			.page-link-box {
				position: relative;
				width: 100%;
				height: 400px;
				overflow: hidden;
				@include xl {
					height: 340px;
				}
				@include lg {
					height: 285px;
				}
				@include md {
					height: 220px;
				}
				&>img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: 0.8s;
				}
				.pattern {
					position: absolute;
					top: 0;
					left: 0;
					background-image: url("../img/nav-bg.svg");
					background-size: 24px;
					background-repeat: repeat;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				dl {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
					border: solid 2.5px #fff;
					width: 310px;
//					height: 170px;
					color: #fff;
					text-align: center;
					padding: 3rem;
					line-height: 1;
					transition: 0.5s;
					margin-bottom: 0;
					dt {
						font-size: 33px;
						font-size: 3.3rem;
						font-weight: 700;
						margin-bottom: 1.5rem;
						padding-bottom: 1rem;
						border-bottom: solid 2.5px #fff;
						width: 160px;
						span {
							display: block;
							font-size: 16px;
							font-size: 1.6rem;
							font-weight: 400;
							margin-top: 1.5rem;
						}
					}
					dd {
						font-size: 13px;
						font-size: 1.3rem;
						width: 100%;
						margin-bottom: 0;
						i {
							margin-left: 0.5em;
						}
					}
				}
			}
			&:hover {
				.page-link-box {
					&>img {
						transform: scale(1.05);
					}
					dl {
						background-color: #fff;
						color: $font-color;
						dt {
							border-bottom: solid 2.5px $font-color;
						}
					}
				}
			}
		}
	}
	ul {
		li {
			.link-box {
				font-size: 20px;
				font-size: 2rem;
				font-weight: 700;
				color: #fff;
				background-color: #3ca669;
				letter-spacing: 0;
				@include sm {
					font-size: 16px;
					font-size: 1.6rem;
				}
				@include xs {
					margin-bottom: 1.5rem;
				}
				&::after {
					@include sm {
						margin-left: 0.5em;
					}
				}
				&:hover {
					color: #3ca669;
					background-color: #fff;
				}
			}
			
		}
	}
}


//アクセス------------------------------------------ここから
#access{
	padding: 8rem 0;
	h2 + p {
		text-align: center;
		font-size: 18px;
		font-size: 1.8rem;
		i:nth-child(2){
			padding-left: 1em;
		}
		span{
			font-size: 16px;
			font-size: 1.6rem;
			color: $font-color;
		}
	}
	.googlemap{
		margin: 4rem 0;
		height: 330px;
		iframe{
			width: 100%;
			height: 100%;
		}
	}
	ul{
		justify-content:space-between;
		@include lg {
			flex-wrap: wrap;
			justify-content: center;
		}
		flex-wrap: wrap;
		li{
			margin-bottom: 1rem;
			@include sm {
				width: 50%;
			}
			@include xs {
				width: 85%;
				text-align: center;
			}
			a{
				display: block;
				background: #fff;
				border: 1px solid #3CA669;
				color: $font-color;
				padding: 1rem 2.2rem;
				margin-right: 1rem;
				@include sm {
					margin: 0 0.5rem;
				}
				i{
					padding-left: 0.5rem;
				}
				&:hover{
					background: #3CA669;
					color: #ffffff;
				}
			}
		}
		li:last-child{
			a{
				margin-right: 0;
				@include sm {
					margin-right: 0.5rem;
				}
			}
		}
	}
}