@charset "utf-8";

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

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

/* feature */
#pageBody > section#feature {
	margin-bottom : 90px;
	padding : 0;
}

#pageBody > section#feature h3 {
	font-size: 18px;
	margin-bottom : 60px;
}
#pageBody > section#feature .inner  h3 {
	font-size: 24px;
	margin-bottom : 20px;
}
#feature > .inner > section:not(:last-child) {
	margin-bottom : 48px;
}

#make001,
#make003,
#make005{
	position : relative;
}
#make001 > .content,
#make003 > .content,
#make005 > .content{
	z-index : 2;
	position : absolute;
	top : 50%;
	right : 0;
	width : 50%;
	padding : 60px 32px;
	transform : translateY(-50%);
	background: #f0faff;
	box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.6);
}
#make001 > .content h3,
#make003 > .content h3,
#make005 > .content h3 {
	font-size : 1.4em;
	text-align : left;
	color : #0183bc;
	
}
#make001 > .ctsImg,
#make003 > .ctsImg,
#make005 > .ctsImg {
	z-index : 1;
	position : relative;
	width : 50%;
}
#make001 > .ctsImg img,
#make003 > .ctsImg img,
#make005 > .ctsImg img {
	width : 100%;
	height : auto;
	object-fit : cover;
}
#make002,
#make004 {
	display : flex;
	position : relative;
	justify-content : flex-end;
}
#make002 > .content,
#make004 > .content {
	z-index : 2;
	position : absolute;
	top : 50%;
	left : 0;
	width : 50%;
	padding : 60px 32px;
	transform : translateY(-50%);
	background: #f0faff;
	box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.6);
}
#make002 > .content h3,
#make004 > .content h3 {
	font-size : 1.4em;
	text-align : left;
	color : #0183bc;
}
#make002 > .ctsImg,
#make004 > .ctsImg {
	z-index : 1;
	position : relative;
	width : 50%;
}
#make002 > .ctsImg img,
#make004 > .ctsImg img {
	width : 100%;
	height : auto;
	object-fit : cover;
}
.jihi {
	margin-top: 0.5em;
	font-size: 0.8em;
	padding-left: 1em; 
	text-indent: -1.2em;
}

/* --- 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) {
	#make001 > .ctsImg,
	#make003 > .ctsImg,
	#make005 > .ctsImg{
		height : 400px;
	}

	#make002 > .ctsImg,
	#make004 > .ctsImg {
		height : 400px;
	}
}


/* --- for mobile --- */
@media screen and (max-width:767px) {
	.sp {
		display: inline-block;
	}
	#make001 > .content,
	#make003 > .content,
	#make005 > .content {
		position : static;
		width : auto;
		margin-bottom : 0;
		padding : 24px;
		transform : none;
	}
	#make001 > .ctsImg,
	#make003 > .ctsImg,
	#make005 > .ctsImg {
		width : auto;
		height : auto;
	}
	#make001 > .ctsImg img,
	#make003 > .ctsImg img,
	#make005 > .ctsImg img {
		width : 100%;
		height : auto;
	    object-fit : cover;
	}

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