@charset "utf-8";


/*=============================================
	
	TOP TITLE
	
==============================================*/
@media screen and (max-width: 767px) {
	.top_title {
		background: #434B54;
		padding: 10vh 5%;
		color: #FFF;
	}
	.top_title p.sub_title {
		font-size: 1.5em;
		margin: 0 0 1.0em;
		text-align: center;
	}
	.top_title h3 {
		font-size: 2.5em;
		margin: 0 0 1em;
		text-align: center;
	}
	.top_title p.en_title {
		font-size: 1.2em;
		margin: 0 0 3em;
		text-align: center;
		line-height: 1.6;
	}
	.top_title p.midashi {
		font-size: 1.2em;
		text-align: left;
		margin: 0;
		line-height: 2;
	}
}

@media screen and (min-width: 768px) {
	.top_title {
		background: #434B54;
		padding: 60px 0;
		color: #FFF;
	}
	.top_title p.sub_title {
		font-size: 15px;
		margin: 0 0 20px;
		text-align: center;
	}
	.top_title h3 {
		font-size: 32px;
		margin: 0 0 20px;
		text-align: center;
	}
	.top_title p.en_title {
		font-size: 13px;
		margin: 0 0 50px;
		text-align: center;
	}
	.top_title p.midashi {
		font-size: 13px;
		text-align: left;
		margin: 0 auto;
		line-height: 2;
		width: 80%;	
	}
	

}


/*=============================================
	
	POINT
	
==============================================*/
.point_wrap {
	padding: 4em 0;	
	position: relative;
	z-index: 0;
}
.point_wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 60vh;
    background-color: #e4eff5;
    transform: skewY(-20deg) translateY(-50%);
    z-index: -1;
}
.point_wrap::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 20%;
	height: 1px;
	background-color: #999;
}
.point_wrap.space::after {
	content: none;
	display: none
}
.point_wrap .container {
	width: 90%;
	margin: 0 auto;
}
.point_wrap .sub_title {
	text-align: center;
	font-size: 2.5em;
	margin-bottom: 0.5em;
}
.point_wrap .title {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 2em;
}
.point_wrap .img_wrap {
	margin-bottom: 2em;
}
.point_wrap .img_wrap .img {
	width: 90%;
	margin-bottom: 1em;
}
.point_wrap .img_wrap .img:last-of-type {
	margin-left: auto;
	margin-bottom: 0;
}
.point_wrap .body {
	text-align: left;
	font-size: 1.2em;
	line-height: 2;
}

@media screen and (min-width: 768px) {
	.point_wrap {
		padding: 70px 0;	
	}
	.point_wrap::before {
	    height: 420px;
	    transform: skewY(-12deg) translateY(-50%);
	}
	.point_wrap::after {
		width: 8%;
	}
	.point_wrap.space::after {
	}
	.point_wrap .container {
		width: 80%;
		max-width: 1280px;
		min-width: 960px;
	}
	.point_wrap .sub_title {
		font-size: 50px;
		margin-bottom: 20px;
	}
	.point_wrap .title {
		font-size: 20px;
		margin-bottom: 40px;
	}
	.point_wrap .img_wrap {
		margin-bottom: 50px;
		display: flex;
		justify-content: center;
	}
	.point_wrap .img_wrap .img {
		width: 49%;
		margin: 0 0.5%;
	}
	.point_wrap .img_wrap .img:last-of-type {
		margin: 0 1%;
	}
	.point_wrap .body {
		text-align: left;
		font-size: 14px;
		width: 960px;
		margin: 0 auto;
	}
}


/*=============================================
	
	メッセージ
	
==============================================*/
.message {
	background-color: #F9F9F9;
	padding: 3em 5%;
}
.message .body{
	padding: 2em 5%;
	background-color: #FFF;
	text-align: left;
	font-size: 1.4em;
	line-height: 2;
	border: 3px double #333;
}
@media screen and (min-width: 768px) {
	.message {
		padding: 50px 0;
	}
	.message .body{
		padding: 30px;
		text-align: center;
		font-size: 18px;
		width: 900px;
		margin: 0 auto;
	}
}


/*=============================================
	
	CASE
	
==============================================*/
.case_wrap {
	padding: 4em 0;	
	position: relative;
	z-index: 0;
}
.case_wrap .container {
	width: 90%;
	margin: 0 auto;
}
.case_wrap .sub_title {
	text-align: center;
	font-size: 2.5em;
	margin-bottom: 0.5em;
}
.case_wrap .title {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 2em;
}
.case_wrap .lead {
	text-align: left;
	font-size: 1.2em;
	line-height: 2;
	margin-bottom: 2em;
}

.case_wrap .list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.case_wrap .list li {
	width: 48%;
	margin-bottom: 2em;
}
.case_wrap .list li .img {
	margin-bottom: 0.5em;
}
.case_wrap .list li .body {
	text-align: center;
	font-size: 1em;
	margin: 0;
}
.case_wrap .list li .body span {
	font-size: 0.8em;
}
@media screen and (min-width: 768px) {
	.case_wrap {
		padding: 70px 0;	
	}
	.case_wrap.space::after {
	}
	.case_wrap .container {
		width: 80%;
		max-width: 1280px;
		min-width: 960px;
	}
	.case_wrap .sub_title {
		font-size: 50px;
		margin-bottom: 20px;
	}
	.case_wrap .title {
		font-size: 20px;
		margin-bottom: 40px;
	}
	.case_wrap .lead {
		text-align: left;
		font-size: 14px;
		width: 960px;
		margin: 0 auto 50px;
	}
	
	
	.case_wrap .list {
		justify-content: center;
	}
	.case_wrap .list li {
		width: 24%;
		margin: 0 0.5% 30px;
	}
	.case_wrap .list li .img {
		margin-bottom: 10px;
	}
	.case_wrap .list li .body {
		text-align: center;
		font-size: 12px;
	}
	.case_wrap .list li .body span {
		font-size: 10px;
	}
}