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

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

//in-page
#in-page {
	margin-bottom: 8rem;
	@include xs {
		margin-bottom: 6rem;
	}
	ul {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
		@include lg {
			flex-wrap: wrap;
		}
		li {
			margin-left: 1em;
			letter-spacing: 0.1em;
			@include xs {
				width: 100%;
				margin-left: 2em;
			}
			span {
				color: $font-color;
			}
			a {
				color: #333;
				&:hover {
					color: $font-color;
				}
			}
		}
	}
}

.pdf-link{
	display: inline-block;
	border: 1px solid #80272d;
	background-color: #fff;
	color: #80272d;
	font-size: 2rem;
	font-size: 20px;
    padding: 2rem 2rem 2rem 5rem;
    width: 50%;
    text-indent: -3rem;
	text-align: justify;
	@include sm {
		width: 100%;
	}
	@include xs {
		font-size: 1.6rem;
		font-size: 16px;
		padding: 1rem 1rem 1rem 3.5rem;
		text-indent: -2rem;
	}
	&::before{
		font-family: "Font Awesome 5 Free";
	  	content: "\f1c1";
	  	font-weight: 900;
	  	padding-right: 0.5em;
	  	color: #80272d;
	}
	&:hover{
		background-color: #80272d;
		color: #fff;
	}
	&:hover::before{
		color: #fff;
	}
}





//entrance-exam
#entrance-exam{
	h2 {
		@include xs {
			margin-bottom: 2rem;
		}
	}
	h2 + div .pdf-link{
		width: 80%;
		@include lg {
			width: 100%;
		}
	}
	.desired-student-image{
		background-color: #e9f8f0;
		border: 1px solid $base-color;
		padding: 4rem;
		margin: 5rem 0;
		@include xs {
			padding: 4rem 2rem 2rem;
		}
		h3{
			text-align: center;
			font-size: 25px;
			font-size: 2.5rem;
			color: $font-color;
			span{
				display: inline-block;
				background-color: #fff;
				border: 1px solid #beebd2;
				padding: 0.5rem 0.8rem;
				margin: 0 0.5rem;
				font-weight: normal;
				@include xs {
					margin: 0 0.3rem;
				}
			}
		}
		dl{
			text-align: center;
			margin: 5rem 0;
			@include xs {
				margin: 3rem 0;
			}
			dt{
				font-size: 20px;
				font-size: 2rem;
				color: $font-color;
				margin-bottom: 2rem;
			}
			dd{
				ul{
					li{
						text-align: justify;
						text-indent: -1em;
						padding-left: 1em;
						&::before{
							content: '●';
							color: $base-color;
						}
					}
				}
			}
		}
		dl + ul{
			li{
				figure{
					display: flex;
					align-items: center;
					width: 22%;
					@include lg {
						width: 25%;
					}
					@include sm {
						width: auto;
						margin: 1rem 0 0;
					}
					img{
						width: 38px;
						height: 38px;
					}
					h3{
						font-size: 2rem;
						font-size: 20px;
						padding-left: 0.5rem;
						margin: 0;
					}
				}
				p{
					white-space: 65%;
					text-align: justify;
				}
			}
		}
	}
	.desired-student-image + div{
		h3{
			font-size: 2rem;
			font-size: 20px;
			color: $font-color;
		}
		p{
			font-size: 1.8rem;
			font-size: 18px;
			color: $font-color;
		}
		div{
			margin-top: 1.5rem;
		}
	}
	.inner + div{
		position: relative;
		padding-bottom: 20rem;
		img{
			position: absolute;
			bottom: 0;
			right: 0;
			@include sm {
				width: 35%;
			}
			@include xs {
				width: 60%;
			}
		}
	}
}

#entrance-exam + div{
	background: url("../img/06-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background-image: url("../../img/nav-bg.svg");
		background-size: 20px;
		background-repeat: repeat;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
}



//open-school,briefing-session
#open-school,#briefing-session {
	padding-bottom: 10rem;
	position: relative;
	@include xs {
		padding-bottom: 5rem;
	}
	h2 {
		color: #fff;
		margin-bottom: 6rem;
		@include xs {
			margin-bottom: 4rem;
		}
	}
    .end {
        padding: 1rem;
        text-align: center;
        background-color: #e2e2e2;
        font-size: 20px;
        font-size: 2rem;
        margin-bottom: 1.5rem;
        display: block;
        @include xs {
            font-size: 18px;
            font-size: 1.8rem;
        }
    }
    .youkou-button {
        display: flex;
        justify-content: center;
        margin: 2rem;
        @include sm {
            margin-left: 0;
            margin-right: 0;
        }
        a{
			display: block;
            width: 80%;
			background: #fff;
			text-align: center;
			transition: 0.3s;
            border: 1px solid #80272d;
            @include sm {
                width: 100%;
            }
			&:hover{
				background: #80272d;	
                color: #fff;
			}
		}
    }
	.event-block{
		margin-bottom: 5rem;
		margin-top: 5rem;
		dl{
			background: #fff;
			padding: 3.5rem 3rem 2rem 3rem;
			@include xs {
				padding: 2.5rem 3rem 2rem 3rem; 
			}
			dt{
				font-size: 5rem;
				font-size: 50px;
				color: $base-color;
				margin-bottom: 2.5rem;
				@include sm {
					font-size: 4rem;
					font-size: 40px;
				}
				@include xs {
					font-size: 2.8rem;
					font-size: 28px;
					margin-bottom: 1.5rem;
				}
			}
			dd{
				div.date{
					background-color: $base-color;
					display: flex;
					align-items: center;
					padding: 2rem;
					@include xs {
						padding: 1rem 2rem;
					}
					p{
						font-family: 'Noto Sans JP', sans-serif;
						color: #fff;
						font-size: 2.2rem;
						font-size: 22px;
						font-feature-settings: "palt";
						line-height: normal;
						margin: 0;
						@include lg {
							font-size: 1.8rem;
							font-size: 18px;
						}
						span{
							font-size: 4rem;
							font-size: 40px;
							@include lg {
								font-size: 3rem;
								font-size: 30px;
							}
						}
					}
				}
				.date + div{
					padding: 0 0 0 1rem;
					@include sm {
						padding: 0;
					}
					div{
						border: 2px solid $base-color;
						padding: 2rem 2rem 1.5rem 2rem;
						ul{
							margin-bottom: 0;
							li{
								h3{
									font-size: 2rem;
									font-size: 20px;
									color: #a81c24;
									margin-bottom: 1rem;
									@include md {
										font-size: 1.8rem;
										font-size: 18px;
									}
								}
								p{
									font-size: 30px;
									font-size: 3rem;
									margin-bottom: 1rem;
									@include md {
										font-size: 2.3rem;
										font-size: 23px;
									}
									& + p.mini{
										font-size: 16px;
										font-size: 1.6rem;
										margin-bottom: 0;
									}
								}
							}
						}
						ul + p{
							margin: 0;
							@include md {
								font-size: 1.4rem;
								font-size: 14px;
							}
						}
					}
				}
			}
		}
		dl dd.apply-button{
			h3{
				text-align: center;
				font-size: 25px;
				font-size: 2.5rem;
				margin: 3rem 0 0.5rem;
				@include xs {
					font-size: 24px;
					font-size: 2.4rem;
				}
				span{
					padding-left: 1rem;
					font-size: 20px;
					font-size: 2rem;
					color: #a81c24;
					@include xs {
						padding-left: 0;
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
				& + p{
					text-align: center;
				}
			}
			div.d-flex{
				align-items: center;
				justify-content: space-between;
				padding: 0.5rem 0;
				border-bottom: 1px solid #B4B4B4;
				@include xs {
					flex-wrap: wrap;
					border: none;
				}
				h3{
					width: 23%;
					font-size: 16px;
					font-size: 1.6rem;
					margin-bottom: 0;
					text-align: left;
					margin: 0;
					@include lg {
						width: 20%;
					}
					@include xs {
						width: 100%;
						margin-top: 0.5rem;
					}
				}
				ul{
					margin: 0;
					@include xs {
						flex-wrap: wrap;
					}
					li{
						padding: 0 0.25rem;
						@include xs {
							width: 50%;
							margin-top: 0.5rem;
						}
						a{
							display: block;
							background: rgba(40,190,105,0.7);
							padding: 0.5rem 1.5rem;
							text-align: center;
							transition: 0.3s;
							color: #fff;
							&:hover{
								background: rgba(128,39,45,1);	
							}
						}
					}
				}
			}
			div.d-flex:nth-child(3) li a,
			div.d-flex:nth-child(5) li a{
				background: rgba(40,190,105,1);
			}
			div.d-flex:nth-child(4){
				margin-bottom: 1.5rem;
			}
			div.d-flex:nth-child(3),
			div.d-flex:nth-child(5){
				border-top: 1px solid #B4B4B4;
				@include xs {
					border: none;
				}
			}
		} 
		dl + div a{
			display: block;
			background: rgba(40,190,105,0.7);
			padding: 1.5rem;
			text-align: center;
			transition: 0.3s;
			&:hover{
				background: rgba(128,39,45,1);	
			}
			p{
				color: #fff;
				margin: 0;
				i{
					padding-left: 1em;
				}
			}
		}
		dl + div p.end-tag{
			display: block;
			background: rgba(128,39,45,1);	
			padding: 1.5rem;
			text-align: center;
			transition: 0.3s;
			color: #fff;
		}
		& + .event-block{
			dl dd.apply-button div.d-flex {
				h3{
					width: 50%;
					@include xs {
						width: 100%;
					}
				}
				ul {
					@include xs {
						display: block!important;
						width: 100%;
					}
					li {
						@include xs {
							width: 100%;
						}
						a{
							width: 200px;
							@include xs {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}

//briefing-session
#briefing-session .event-block dl ul + p + dl{
	display: flex;
    padding: 0.5rem 0;
	dt{
		font-size: 1.6rem;
		font-size: 16px;
		color: #fff;
		background-color: #28BE69;
		padding: 0.5rem 1rem;
		font-weight: normal;
		width: 15%;
		margin: 0;
		text-align: center;
		@include xs {
			width: 23%;
		}

	}
	dd{
		background-color: #d4f2e1;
		padding: 0.5rem 2rem;
		width: 85%;
		margin: 0;
		@include xs {
			padding: 0.5rem 1rem 0.5rem 1rem;
			width: 87%;
		}
	}
}
#briefing-session .event-block dl ul + p + dl + p{
	font-size: 1.4rem;
	font-size: 14px;
	color: #a81c24;
	margin: 0;
	@include md {
		text-indent: -1em;
		padding-left: 1em;
	}
}
#briefing-session .event-block dl dd.apply-button div.d-flex h3 {
    width: 50%;
    @include xs {
        width: 100%;
    }
}
#briefing-session .event-block dl dd.apply-button div.d-flex ul li a {
    width: 200px;
    @include xs {
        width: 100%;
    }
}
#briefing-session .event-block dl dd.apply-button div.d-flex {
    ul {
        @include xs {
            width: 100%;
        }
        li {
            @include xs {
                width: 100%;
            }
        }  
    } 
}