@charset "utf-8";

.detail_white{
	background:#fff;
}



.titleBox .detail_title{

}
.sub_wrapper{
	background:#E8E6FF;
	position:relative;
	margin:0px 0 0;	
	
}

.subtitle{
	text-align:center;
	font-size:3.7em;
	color:#281C7A;
	margin:60px 0 150px;
	letter-spacing:2px;
	font-family: "myfont_eng", sans-serif;
}
.subtitle img{
	max-width:35%;
}
.case_study img{
	max-width:13%;
}

@media all and (min-width: 320px) and (max-width: 880px) {
.subtitle{
	margin:60px 0 60px;
	}
.titleBox h3 img{
	max-width:200px;
	}

.subtitle img{
	max-width:64%;
}
.case_study img{
	max-width:35%;
	}
}
/*------大枠--------*/
.sub_contents{
	max-width:1400px;
	margin: 0 auto;
	padding:100px 0 ;
	position:relative;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.sub_contents{
	max-width:90%;
	padding:80px 0 0;
	position:relative;
	}

}

/*------内容メイン--------*/
.sub_contents_detail{
	max-width:1200px;
	margin: 0 auto;

	padding:1em 0 3em;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.sub_contents_detail{
	max-width:100%;
	}
}

.whitebox{
	padding:5em 0;
	background:#fff;
	margin:10em auto  ;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.whitebox{
	padding:1em;
	background:#fff;
	margin:5em auto  ;
	}
}
/*------タイトル--------*/
.detail_title{
	max-width:900px;
	margin: 0 auto;
	font-size:8.5em;
	font-family: "myfont_eng", sans-serif;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.detail_title{
	max-width:90%;
	font-size:5em;
	}
}


.engtitle dl dt{
	font-size:1.1em;
	text-align:center;
	letter-spacing:3px;
	font-weight:700;
}
.engtitle dl dd{
	margin:15px 0 0;
	text-align:center;
	font-family: "myfont_eng", sans-serif;
}
.copytxt{
	text-align:center;
	line-height:2;
}

.pointImg {
	text-align:center;
	margin:80px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.pointImg {
	margin:40px 0 0;
	}
}
.pointImg img{
	max-width:550px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.pointImg img{
	max-width:80%;
	}
}


/*------アイコン指定--------*/
.iconFlex{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	color:#231815;
	margin: 0 0 100px;
}
.iconFlex div{
	width:calc(90% / 3);
	padding:0px 25px;

}
@media all and (min-width: 320px) and (max-width: 880px) {
.iconFlex div{
	/*width:calc(100% / 2);*/
	width:calc(100%);
	padding:10px 10px 40px;
	}
}

.IconImg{
	text-align:center;
	margin:0 0 30px;
}
.IconImg img{
	max-width:100px;
}

.iconFlex div dt{
	text-align:center;
	margin: 0 0 20px;
	font-size:1.5em;
	font-weight:700;

}
.iconFlex div dd{
	line-height:2;
	max-width:80%;

	margin: 0 auto;
}

/*---Case Study---*/
.sub_wrapper_white{
	padding:15em 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.sub_wrapper_white{
	padding:5em 0;
	}
}

.caseBox{
	display:flex;
	justify-content:center;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.caseBox{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	}
}

.caseBox div{
	margin: 0 20px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.caseBox div{
	
	}
}
.caseBox .flex-item1{
	flex-basis: 8%;
	border-top:1px solid #333;
	padding:50px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.caseBox .flex-item1{
	flex-basis: 90%;
	padding:0px 0 30px;
	margin: 0 auto;
	border-top:1px solid #333;
	}

}



.caseBox .flex-item1 .number{
	font-size:3em;
	color:#281C7A;
	font-family: "Arial", "メイリオ";
	}

.caseBox .flex-item2{
	flex-basis: 80%;
	border-top:1px solid #333;
	padding:50px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.caseBox .flex-item2{
	flex-basis: 90%;
	padding:20px 0 0;
	margin:0 auto;
	}
}
.caseBox .flex-item2 dl{
	display:flex;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.caseBox .flex-item2 dl{
	display:block;
	}
}
.caseBox .flex-item2 dt{
	flex-basis: 25%;
	margin: 0 20px 0 0;
	font-size:2.2em;
	font-weight:700;
}
.caseBox .flex-item2 dt span{
	display:block;
	font-size:.6em;
	font-weight:300;
}

.caseBox .flex-item2 dd{
	flex-basis: 100%;
	margin: 0 0px 0 0;
}
@media all and (min-width: 320px) and (max-width: 880px) {

.caseBox .flex-item2 dd{
	flex-basis: 100%;
	margin: 40px 0px 0 0;
	}

}

.caseBox .flex-item2 dd span{
	display:block;
	margin:0px 0 8px;
	line-height:2;
}

.casestudy{
	background:#E3DBFF;
}

.case_studydiv{
	max-width:1290px;
}

.fontCaseStudyTitle {
	font-weight: 700;
}


.titleBox{
	background: linear-gradient(180deg, #fff 0%, #fff 70%, #E8E6FF 70%, #E8E6FF 100%);
	position:relative;
}
.titleBox_div{
	margin:80px auto 0px;
	max-width:900px;
}
@media all and (min-width: 320px) and (max-width: 880px) {
.titleBox_div{
	max-width:90%;
	margin:80px auto 0px;
	}
}
.titleBox h3{
	margin:0px auto 0px;
}
.titleBox h3 img{
	max-height:145px;
}



