@charset "utf-8";

.anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
.anim.fire {
	transform : translateY(0);
	opacity : 1;
}

#pageTitle {
	background : url(/about/img/bg_content_header.jpg) 50% 50% no-repeat;
	background-size : cover;
}

/* message */
#message > section {
	max-width : 100%;
}
#priority {
	margin-bottom : 60px;
}
#priority h3 {
	margin-bottom : 0;
	padding : 60px 24px 96px;
	background : url(/about/img/bg_message.jpg) 50% 0 no-repeat;
	background-size : cover;
}
#priority h3 br.sp {
	display : none;
}
#priority > .content {
	max-width : 1024px;
	margin : -36px auto 0;
	padding : 40px;
	background: #f0faff;
}

/* goal */
#goal {
	margin-bottom : 60px;
}
#goal > .content {
	max-width : 1024px;
	margin : 0 auto;
	text-align : center;
}
#goal .ctsImg {
	margin-top : 60px;
	text-align : center;
}
#goal .ctsImg img {
	width : 100%;
	max-width : 658px;
}

/* feature */
#pageBody > section#feature {
	margin-bottom : 60px;
	padding : 0;
}
#feature > .inner > section:not(:last-child) {
	margin-bottom : 48px;
}

#maker,
#planning {
	position : relative;
}
#maker > .content,
#planning > .content {
	z-index : 2;
	position : absolute;
	top : 50%;
	right : 0;
	width : 50%;
	padding : 60px 32px;
	transform : translateY(-50%);
	background: #f0faff;
}
#maker > .content h3,
#planning > .content h3 {
	font-size : 1.4em;
	text-align : left;
	color : #0183bc;
}
#maker > .ctsImg,
#planning > .ctsImg {
	z-index : 1;
	position : relative;
	width : 50%;
	height : 530px;
}
#maker > .ctsImg img,
#planning > .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}

#counselor {
	display : flex;
	position : relative;
	justify-content : flex-end;
}
#counselor > .content {
	z-index : 2;
	position : absolute;
	top : 50%;
	left : 0;
	width : 50%;
	padding : 60px 32px;
	transform : translateY(-50%);
	background: #f0faff;
}
#counselor > .content h3 {
	font-size : 1.4em;
	text-align : left;
	color : #0183bc;
}
#counselor > .ctsImg {
	z-index : 1;
	position : relative;
	width : 50%;
	height : 530px;
}
#counselor > .ctsImg img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}

/* facility */
#pageBody > section#facility {
	margin-bottom : 0;
	padding : 60px 24px;
	background: #f0faff;
}
#facility ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr ;
	grid-gap : 32px;
}
#facility ul li .ctsImg {
	margin-bottom : 8px;
}
#facility ul li .ctsImg img {
	width : 100%;
}


/* --- for 2K or more pc --- */
@media screen and (min-width:1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width:1440px) and (max-width:1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width:1024px) and (max-width:1439px) {
}

/* --- for tablet --- */
@media screen and (min-width:768px) and (max-width:1023px) {
	#maker > .ctsImg,
	#planning > .ctsImg {
		height : 400px;
	}

	#counselor > .ctsImg {
		height : 400px;
	}
}


/* --- for mobile --- */
@media screen and (max-width:767px) {
	#priority {
		margin-bottom : 24px;
	}
	#priority h3 {
		font-size : 1.25em;
	}
	#priority > .content {
		padding : 24px;
	}

	#goal {
		margin-bottom : 24px;
		padding : 24px;
	}

	#maker > .content,
	#planning > .content {
		position : static;
		width : auto;
		margin-bottom : 24px;
		padding : 24px;
		transform : none;
	}
	#maker > .ctsImg,
	#planning > .ctsImg {
		width : auto;
		height : auto;
	}
	#maker > .ctsImg img,
	#planning > .ctsImg img {
		width : 100%;
		height : auto;
		object-fit : none;
	}

	#counselor {
		display : block;
	}
	#counselor > .content {
		position : static;
		width : auto;
		margin-bottom : 24px;
		padding : 24px;
		transform : none;
	}
	#counselor > .ctsImg {
		width : auto;
		height : auto;
	}
	#counselor > .ctsImg img {
		width : 100%;
		height : auto;
		object-fit : unset;
	}

	section#facility ul.inner {
		display : grid;
		grid-template-columns : 1fr 1fr;
		grid-gap : 24px;
		padding : 0;
	}
}