@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;
  }
}
//ブレイクポイントを指定------ここまで

// 固定色
$main-blue: #003685;
$main-yellow: #bf9a0e;
$sub-blue: #d6dfeb;

.subtitle{
	text-align: center;
	h2{
		font-size: 25px;
		font-size: 2.5rem;
		border-bottom: 1px solid ;
		display: inline-block;
		line-height: 1.5em;
	}
}


#header-img{
	background: url("../img/04-header.jpg") center / cover no-repeat ;
}

#thought{
	margin-top: 10rem;
	margin-bottom: 15rem;
	text-align: center;
	@include sm{margin-bottom: 10rem;}
	dt{
		font-size: 40px;
		font-size: 4rem;
		font-family: YuMincho,"Hiragino Mincho ProN",serif;
		font-weight: 100;
		color: $main-blue;
		letter-spacing: 0.1em;
		margin-bottom: 4rem;
	}
	@include sm{
		dt{
			font-size: 35px;
			font-size: 3.5rem;
			line-height: 1.3em;
		}
		dd{text-align: justify;}
	}
}

#merit{
	margin-bottom: 15rem;
	@include sm{margin-bottom: 7rem;}
	.merit-item{
		text-align: center;
		padding: 0 3.5rem;
		@include sm{margin-bottom: 4rem;}
		img{
			height: 150px;
			margin-bottom: 3rem;
			@include sm{margin-bottom: 1rem;}
			@include xs{height: 130px;}
		}
		dt{
			font-size: 20px;
			font-size: 2rem;
			line-height: 4rem;
			span{
				font-family: "Montserrat", sans-serif;
				font-size: 35px;
				font-size: 3.5rem;
				font-weight: 600;
				color: $main-blue;
			}
		}
		dd{text-align: justify;}
	}
}

#schedule{
	background: #F1ECE3;
	position: relative;
	padding: 6rem 0;
	margin-bottom: 15rem;
	z-index: -100;
	@include sm{margin-bottom: 7rem;}
	.schedule-deco{
		position: absolute;
		top: 0;
		right: 5rem;
		height: 150px;
		z-index: -50;
		@include sm{
			height: 100px;
			right: 2rem;
		}
	}
	.row{
		margin-bottom: 3rem;
		img{border-radius: 7px;}
	}
	@include xs{img{margin-bottom: 1.5rem;}}
	dt{
		color: $main-blue;
		font-size: 20px;
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}
	dd span{
		color: $main-yellow;
		font-weight: 700;
	}
}

#youkou{
	margin-bottom: 15rem;
	@include sm{margin-bottom: 7rem;}
	.container{
		background: #F0F0F0;
		padding: 6rem;
		@include sm{padding: 6rem 4rem;}
		@include xs{padding: 5rem 2rem;}
	}
	
	table{
		width: 100%;
		tr{	
			border-bottom: 1px solid;
			th{
				width: 20%;
				padding: 1rem 0 1rem 2rem;
				vertical-align: top;
				@include xs{padding: 1rem 0;}
			}
			td{padding: 1rem;}
			@include sm{
				th{width: 25%;}
			}
		}
	}
	.new-graduate{
		margin-bottom: 10rem;
		@include sm{margin-bottom: 5rem;}
	}
}

#entry{
	margin-bottom: 15rem;
	@include sm{margin-bottom: 7rem;}
	.entry-button{
		max-width: 800px;
		margin: 0 auto;
		border: 1px $main-blue solid;
		padding: 3rem 5rem 2rem;
		position: relative;
		transition: 0.2s;
		@include md{max-width: 720px;}
		@include sm{max-width: 540px;}
		@include xs{
			margin: 0 2rem;
			padding: 3rem 3rem 2rem;
		}
		dl{
			color: $main-blue;
			dt{
				font-size: 25px;
				font-size: 2.5rem;
				margin-bottom: 0.75rem;
				line-height: 1.5em;
				span{
					font-size: 30px;
					font-size: 3rem;
					text-decoration: underline;
				}
			}
		}
		img{
			position: absolute;
			top: -4rem;
			right: 12rem;
			height: 150px;
			@include sm{
				right: 5rem;
				height: 130px;
			}
		}
		&::after{
			content: "";
			width: 17px;
			height: 17px;
			border-right: 1px solid $main-blue;
			border-top: 1px solid $main-blue;
			display: inline-block;
			transform: rotate(45deg);
			position: absolute;
			right: 3rem;
			top: 45%;
			transition: 0.2s;
		}
		&:hover{
			background: $sub-blue;
			&::after{
				right: 2rem;
			}
		}
	}
}