@charset "UTF-8";

/*北星附属が選ばれる5つの理由　ディレクトリ：reasons*/

/* h2の装飾をリセットする場合はコメントを外す */

h2{
	position: relative;
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 3rem;
	letter-spacing: 0.1rem;
	
	border-top: solid 0px #b4b6b6;
	padding-top: 0rem;
}

h2:before{
	content:none;
}


/* h3の装飾をリセットする場合はコメントを外す */

h3{
	font-size: 2.1rem;
	font-weight: 700;
	margin-bottom: 2.5rem;
	
	background-color: transparent;
	padding: 0px;
}


/*このページの最大コンテンツ幅を指定　指定しない場合は1220px*/
/*
.entry_guideline .contents_main {
	max-width: 980px;
	max-width: 1180px;
}
*/

/*メインタイトル*/
.main_title_box{
	display: block;
	position: relative;
	margin-left: -290px;
	margin-right: -290px;
	margin-bottom: 60px;
}

.main_title_box .inner{
	display: block;
	position: relative;
	margin: 0 auto;
	max-width: 100vw;
	/*
	padding-left: 290px;
	padding-right: 290px;
	*/
	/*max-width: 1380px;*/
	
}

.main_title_box_img{
	display: block;
	position: relative;
	aspect-ratio: 2960 / 990;/*縦横比固定*/
	overflow: hidden;
	max-height: 600px;
	
}

.main_title_box_img img{
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.main_text_box{
	margin-bottom: 80px;
}

.main_text{
	text-align: center;
	font-size: 2.2rem;
	font-weight: 700;
}

/*画面幅1100px未満*/
@media (max-width: 1100px) {
	.main_text br{
		display: none;
	}
}

/*画面幅8900px未満*/
@media (max-width: 890px) {
	.main_text{
		font-size: 2.0rem;
		text-align: left;
	}
}

.reasons_1box{
	display: block;
	position: relative;
	margin-bottom: 80px;
}

.reasons_1box:last-of-type{
	margin-bottom: 120px;
}


.reasons_1box:after{
	content:"1";
	display: flex; /* 子要素をflexboxで揃える */
	flex-direction: column; /* 子要素をflexboxにより縦並びに揃える */
	justify-content: center; /* 子要素をflexboxにより左右中央に配置する */
	align-items: center;  /* 子要素をflexboxにより上下中央に配置する*/
	position: absolute;
	top: -25px;
	left: -25px;
	height:80px;
	width:80px;
	font-size: 4.2rem;
	line-height: 100%;
	font-weight: 600;
	border-radius:50%;
	line-height:80px;
	text-align:center;
	color: #ffffff;
	background-color: color(display-p3 0 0.588 0.639);
}

.reasons_1box.reason1:after{
	content:"1";
	background-color: color(display-p3 0 0.588 0.639);
}

.reasons_1box.reason2:after{
	content:"2";
	background-color: color(display-p3 0.212 0.659 0.333);
}

.reasons_1box.reason3:after{
	content:"3";
	background-color: color(display-p3 0.812 0.373 0.698);
}

.reasons_1box.reason4:after{
	content:"4";
	background-color: color(display-p3 0.6 0.584 0.212);
}

.reasons_1box.reason5:after{
	content:"5";
	background-color: color(display-p3 0.322 0.318 0.596);
}

.reasons_1box_inner{
	display: block;
	position: relative;
	padding: 5vw 5vw 5vw 5vw;
	border-radius: 0px 70px 0px 0px;
	overflow: hidden;
}

.reasons_1box.reason1 .reasons_1box_inner{
	background: url("../img/reason_bg_1.svg") no-repeat left 5% bottom -20px;
	background-size: auto 80%;
	background-color: color(display-p3 0.733 0.918 0.949);
}

.reasons_1box.reason2 .reasons_1box_inner{
	background: url("../img/reason_bg_2.svg") no-repeat left 50% bottom -100px;
	background-size: auto 110%;
	background-color: color(display-p3 0.757 0.929 0.804);
}

.reasons_1box.reason3 .reasons_1box_inner{
	background: url("../img/reason_bg_3.svg") no-repeat left -10% bottom -200px;
	background-size: auto 90%;
	background-color: color(display-p3 0.941 0.882 0.922);
}

.reasons_1box.reason4 .reasons_1box_inner{
	background: url("../img/reason_bg_4.svg") no-repeat left 30% bottom -60px;
	background-size: auto 80%;
	background-color: color(display-p3 0.929 0.929 0.663);
}

.reasons_1box.reason5 .reasons_1box_inner{
	background: url("../img/reason_bg_5.svg") no-repeat left 60% bottom -0px;
	background-size: auto 80%;
	background-color: color(display-p3 0.894 0.894 0.976);
}


/*h3*/
.reason_title{
	font-size: 3.4rem;
	line-height: 140%;
	margin-bottom: 3vh;
}

.reasons_1box.reason1 .reason_title{
	color: color(display-p3 0 0.588 0.639);
}

.reasons_1box.reason2 .reason_title{
	color: color(display-p3 0.212 0.659 0.333);
}

.reasons_1box.reason3 .reason_title{
	color: color(display-p3 0.812 0.373 0.698);
}

.reasons_1box.reason4 .reason_title{
	color: color(display-p3 0.6 0.584 0.212);
}

.reasons_1box.reason5 .reason_title{
	color: color(display-p3 0.322 0.318 0.596);
}

.reason_title_e{
	display: block;
	position: absolute;
	top:calc(130px + 4vw);
	right: -90px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 100%;
	color: #ffffff;
	transform: rotate(90deg);
	height: 30px;
	width: 300px;
}

.reason_text_box{
	display: block;
	position: relative;
	width: 53%;
}

.reason_img_box{
	display: block;
	position: absolute;
	width: 45%;
	bottom: 0vw;
	right: 0vw;
}


/*=========================iPad用スタイルここから=========================*/

@media screen and (min-width: 736px) and (max-width: 1024px) {
	
}/*iPad用スタイルここまで*/




/*=========================スマホ用スタイルここから（横画面）=========================*/

@media screen and (max-width:896px) and (orientation:landscape) {

}/*@media screen and (max-width:896px) and (orientation:landscape)*/



/*=========================スマホ用スタイルここから（縦画面）=========================*/

@media screen and ( max-width: 767px ) {
	
	/*メインタイトル*/
	.main_title_box{
		display: block;
		position: relative;
		margin-left: -20px;
		margin-right: -20px;
		margin-bottom: 30px;
	}
	
	.main_title_box .inner{
		display: block;
		position: relative;
		margin: 0 auto;
		max-width: 100vw;
		/*
		padding-left: 290px;
		padding-right: 290px;
		*/
		/*max-width: 1380px;*/
		
	}
	
	.main_title_box_img{
		display: block;
		position: relative;
		aspect-ratio: 750 / 664;/*縦横比固定*/
		overflow: hidden;
		max-height: auto;
		
	}
	
	.main_text_box{
		margin-bottom: 50px;
	}
	
	.main_text{
		text-align: left;
		font-size: 1.7rem;
		font-weight: 700;
	}
	
	.reasons_1box{
		display: block;
		position: relative;
		margin-bottom: 50px;
	}
	
	.reasons_1box:last-of-type{
		margin-bottom: 70px;
	}
	
	.reasons_1box:after{
		display: flex; /* 子要素をflexboxで揃える */
		flex-direction: column; /* 子要素をflexboxにより縦並びに揃える */
		justify-content: center; /* 子要素をflexboxにより左右中央に配置する */
		align-items: center;  /* 子要素をflexboxにより上下中央に配置する*/
		position: absolute;
		top: -10px;
		left: -10px;
		height:40px;
		width:40px;
		font-size: 2.4rem;
		line-height: 100%;
		font-weight: 600;
		border-radius:50%;
		line-height:20px;
		text-align:center;
		color: #ffffff;
	}
	
	.reasons_1box_inner{
		display: block;
		position: relative;
		padding: 30px 55px 30px 30px;
		border-radius: 0px 40px 0px 0px;
		overflow: hidden;
	}
	
	.reasons_1box.reason1 .reasons_1box_inner{
		background: url("../img/reason_bg_1.svg") no-repeat left -100px bottom -20px;
		background-size: auto 40%;
		background-color: color(display-p3 0.733 0.918 0.949);
	}
	
	.reasons_1box.reason2 .reasons_1box_inner{
		background: url("../img/reason_bg_2.svg") no-repeat left -50px bottom -60px;
		background-size: auto 50%;
		background-color: color(display-p3 0.757 0.929 0.804);
	}
	
	.reasons_1box.reason3 .reasons_1box_inner{
		background: url("../img/reason_bg_3.svg") no-repeat left -50px bottom -90px;
		background-size: auto 40%;
		background-color: color(display-p3 0.941 0.882 0.922);
	}
	
	.reasons_1box.reason4 .reasons_1box_inner{
		background: url("../img/reason_bg_4.svg") no-repeat left 50px bottom -20px;
		background-size: auto 40%;
		background-color: color(display-p3 0.929 0.929 0.663);
	}
	
	.reasons_1box.reason5 .reasons_1box_inner{
		background: url("../img/reason_bg_5.svg") no-repeat left -20px bottom -20px;
		background-size: auto 40%;
		background-color: color(display-p3 0.894 0.894 0.976);
	}
	
	/*h3*/
	.reason_title{
		font-size: 2.2rem;
		line-height: 140%;
		margin-bottom: 20px;
	}
	
	.reason_title_e{
		display: block;
		position: absolute;
		top:calc(140px + 30px);
		right: -110px;
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 100%;
		color: #ffffff;
		transform: rotate(90deg);
		height: 30px;
		width: 300px;
	}
	
	.reason_text_box{
		display: block;
		position: relative;
		width: 100%;
	}
	
	.reason_img_box{
		display: block;
		position: relative;
		width: calc(100% + 55px);
		bottom: -30px;
		right: -55px;
	}
	

	
	
}/*@media screen and ( max-width: 767px )ここまで*/



/*=========================プリント用スタイルここから（縦画面）=========================*/

@media print {
	
}/*@media printここまで*/