@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;

article{
	overflow-x: hidden!important;
}

h2 {
	position: relative;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 400;
	color: $font-color;
	text-align: left;
	padding-top: 2.5rem;
	margin-bottom: 4rem;
	@include xs {
		font-size: 26px;
		font-size: 2.6rem;
		margin-bottom: 2rem;
	}
	&::before {
		content: "";
		border-top: solid 2.8px $base-color;
		position: absolute;
		top: 0;
		width: 123px;
		@include xs {
			width: 100px;
		}
	}
}

//schoolevent
#schoolevent {
	padding-bottom: 10rem;
	margin-bottom: 8rem;
	background-image: url("../img/04-back.svg"); 
	background-size: contain;
    background-repeat: repeat;
	@include xs {
		padding-bottom: 3rem;
		margin-bottom: 6rem;
	}
	h2 {
		@include xs {
			margin-bottom: 2rem;
		}
	}
	ul{
		margin-top: 6rem;
		li{
			padding: 3rem;
			@include lg {
				padding: 2rem 2rem 3rem;
			}
			@include xs {
				padding: 1rem 1rem 2rem;
			}
			.event-img{
				text-align: center;
				position: relative;
				h3{
					position: absolute;
					left: 0;
					top: -15%;
					div{
						position: relative;
						display: inline-block;
						width: 90px;
						height: 90px;
						border-radius: 50%;
						background: $base-color;
						color: #fff;
						font-size: 28px;
						font-size: 2.8rem;
						font-weight: normal;
						@include lg {
							width: 80px;
							height: 80px;
							font-size: 20px;
							font-size: 2rem;
						}
						@include xs {
							width: 60px;
							height: 60px;
							font-size: 16px;
							font-size: 1.6rem;
						}
						span:not(.month) {
							position: absolute;
							display: inline-block;
							left: 0;
							top: 45%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
							width :85px;
							text-align:center;
							@include lg {
								width: 75px;
							}
							@include xs {
								width: 55px;
							}
						}
						span.month{
							font-family: 'Caveat', cursive;
							font-size: 60px;
							font-size: 6rem;
							letter-spacing: -5.5px;
							padding-right: 10px;
							@include lg {
								font-size: 50px;
								font-size: 5rem;
							}
							@include xs {
								font-size: 45px;
								font-size: 4.5rem;
							}
						}
					}
				}
			}
			p{
				padding: 0 2rem;
				border-left: 1px solid;
				margin: 2rem 0;
				@include xs {
					padding: 0 1rem 0 2rem;
				}
			}
		}
		li:nth-child(2n) h3 div{
			background: $font-color;
		}
	}
	.plant {
		position: relative;
		img {
			position: absolute;
			width: 400px;
			top: -7rem;
			right: -7rem;
			@include md {
				width: 300px;
				top: -5rem;
				right: -5rem;
			}
			@include xs {
				width: 200px;
				top: -4rem;
				right: -3rem;
			}
		}
	}
}




//council-club
#council-club {
	padding-bottom: 10rem;
	background-image: url("../img/04-back2.svg"); 
	background-size: contain;
    background-repeat: repeat;
	@include xs {
		padding-bottom: 3rem;
	}
	h2 {
		@include lg {
			margin-bottom: 6rem;
		}
		@include xs {
			margin-bottom: 4rem;
		}
	}
	ul{
		li{
			margin-bottom: 7rem;
			@include sm {
				margin-bottom: 5rem;
			}
			@include xs {
				margin: auto;
				margin-bottom: 5rem;
			}
			div{
				margin-top: auto;
				h3{
					font-size: 30px;
					font-size: 3rem;
					color: $font-color;
					font-weight: normal;
					@include xs {
						font-size: 26px;
						font-size: 2.6rem;
					}
				}
				p{
					margin-top: 1em;
				}
				p + p{
					font-size: 14px;
					font-size: 1.4rem;
					span{
						font-weight: bold;
					}
				}
			}
			div + div{
				margin-top: 0;
			}
		}
		li:nth-child(2n+1){
			div{
				padding-right: 5rem;
				@include sm {
					padding-right: 2rem;
				}
				@include xs {
					padding-right: 0;
				}
			}
			div + div{
				padding-right: 0;
				padding-left: 2rem;
				@include sm {
					padding-left: 1rem;
				}
				@include xs {
					padding-left: 0;
				}
			}
		}
		li:nth-child(2n){
			div{
				padding-left: 5rem;
				@include sm {
					padding-left: 2rem;
				}
				@include xs {
					padding-left: 0;
				}
			}
			div + div{
				padding-left: 0;
				padding-right: 2rem;
				@include sm {
					padding-right: 1rem;
				}
				@include xs {
					padding-right: 0;
				}
			}
		}
	}
}




//course
#course{
	margin-bottom: 10rem;
	ul{
		margin-top: 7rem;
		li{
			margin-bottom: 7rem;
			figure{
				display: flex;
				align-items: flex-end;
				margin-bottom: 5rem;
				img{
					width: 50px;
				}
				h3{
					font-size: 2.3rem;
					font-size: 23px;
					color: $font-color;
					margin: 0 0 0 1.5rem;
				}
			}
			.graf{
				display: flex;
				align-items: center;
				margin-bottom: 7rem;
				@include xs {
					margin-bottom: 2rem;
				}
				h5{
					font-size: 2.5rem;
					font-size: 25px;
					font-weight: normal;
					color: $font-color;
					margin-bottom: 2em;
					@include xs {
						font-size: 2.3rem;
						font-size: 23px;
						margin: 1em 0;
					}
					span{
						font-size: 14px;
						font-size: 1.4rem;
						color: #B3B3B3;
					}
				}
				dl{
					display: flex;
					align-items: center;
					dt{
						font-size: 2rem;
						font-size: 20px;
						font-weight: normal;
						width: 20%;
						@include xl {
							font-size: 1.6rem;
							font-size: 16px;
						}
					}
					dd{
						width: 40%;
						background: $font-color;
						padding: 2rem;
					}
				}
				dl + dl{
					margin-bottom: 2rem;
					dd{
						width: 80%;
						background: $base-color;
						padding: 2rem;
					}
				}
			}
			h4{
				color: #fff;
				font-size: 2rem;
				font-size: 20px;
				background: $font-color;
				padding: 1rem 3rem;
				font-weight: normal;
				display: inline-block;
			}
			h4 + div{
				dl{
					dt{
						font-size: 1.8rem;
						font-size: 18px;
						margin: 2em 0 1em;
						@include xs {
							margin: 1em 0;
						}
					}
					dd{
						font-size: 1.4rem;
						font-size: 14px;
						@include xs {
							font-size: 1.3rem;
							font-size: 13px;
						}
					}
				}
			}
		}
		li:nth-child(1){
			.graf{
				dl{
					dd{
						width: 56%;
					}
				}
				dl + dl{
					dd{
						width: 44%;
					}
				}
			}
		}
		li:nth-child(2){
			.graf{
				dl{
					dd{
						width: 53%;
					}
				}
				dl + dl{
					dd{
						width: 47%;
					}
				}
			}
		}
		li:nth-child(3){
			.graf{
				dl{
					dd{
						width: 25%;
					}
				}
				dl + dl{
					dd{
						width: 75%;
					}
				}
			}
		}
		li:nth-child(4){
			.graf{
				dl{
					dd{
						width: 58%;
					}
				}
				dl + dl{
					margin-bottom: 1rem;
					dd{
						width: 27%;
					}
				}
				dl + dl + dl{
					dd{
						background: lighten( $base-color, 25% );
						width: 15%;
					}
				}
			}
		}
		li:nth-child(5){
			.graf{
				dl{
					dd{
						width: 21%;
					}
				}
				dl + dl{
					margin-bottom: 1rem;
					dd{
						width: 73%;
					}
				}
				dl + dl + dl{
					dd{
						background: lighten( $base-color, 25% );
						width: 6%;
					}
				}
			}
		}
	}
}