@charset "utf-8";
/* // caseColumn //
----------------------------------------------- */
.caseIndex .column .bodyTx{
	font-size: 100%;
	line-height: 1.68;
}
.caseIndex .column{
	box-shadow: 3px 3px 1px rgba(85,113,129,0.1);
	border-radius: 3px;
	overflow: hidden;
}
.caseIndex .column .image{
	height:210px;
	overflow:hidden;
}
.caseIndex .column .image .wrap{
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height:100%;
	display:block;
	transition:0.2s;
}
.caseIndex .column .image .wrap.noImg{
	background-size:80% auto;
}
.caseIndex .column a:hover .image .wrap{
	transform: scale(1.05,1.05);
}

.caseIndexCate span{
	display: inline-block;
	background: #fff;
	border: 1px solid #0179b1;
	color: #0179b1;
	border-radius: 1px;
	padding: 2px 10px;
	font-size:85%;
}
.caseIndexCmp{
	margin-top: 15px;
	font-size: 92%;
	color: #666666;
}
.caseIndexTtl{
	margin-top: 10px;
	padding-bottom: 6px;
	color:#333;

}
.caseIndexTtl .main{
	font-size: 114%;
	font-weight:500;
	line-height:1.4;
	display:block;
}
.caseIndexTtl .sub{
	margin-top: 5px;
	font-size: 104%;
	line-height:1.4;
	display:block;
}

/* // ________SP________ // */
@media screen and (max-width: 840px)  {
	.caseIndex .column .image{
		height:180px;
	}
	.caseIndexCate span{
		font-size:88%;
		padding: 1px 6px;
	}
	.caseIndexCmp{
		margin-top: 10px;
		font-size: 88%;
	}
	.caseIndexTtl{
		margin-top: 5px;
		font-size: 100%;
		padding-bottom: 5px;
	}
}

/* // caseTitle //
----------------------------------------------- */
.caseTitleCmp *{
	text-align: center;
	font-size: 114%;
}
.caseTitleCmp .logo img{
	width:300px;
}
.caseTitleCmp .logo + .name{
	margin-top: 10px;
}
.caseTitleHead{
	padding: 0 65px;
	position: relative;
	line-height: 1.67;
	margin-top: 40px;
	text-align:left;
	display:inline-block;
}
.caseTitleHead .main{
	display:inline-block;
	text-align:left;
	font-size: 214%;
	font-weight: 600;
}
.caseTitleHead .sub{
	display:inline-block;
	text-align:left;
	font-size: 180%;
	font-weight: 500;
}
.caseTitleHead:before,
.caseTitleHead:after{
	content:" ";
  position: absolute;
  display: block;
  width: 45px;
  height: 40px;
  background: url(/_pack/img/case_cmn_quote.png);
  z-index: 1;
}
.caseTitleHead:before{
	left: 0;
	top: 0;
}
.caseTitleHead:after{
	right: 0;
	bottom: 0;
	-webkit-transform: scale(-1,-1);
	-ms-transform: scale(-1,-1);
	transform: scale(-1,-1);
}
.caseTitleCate{
	text-align: left;
	margin-top: 20px;
}
.caseTitleCate span{
	display: inline-block;
	color: #0179b1;
	border: 1px solid #65c4f0;
	background: #e9f8ff;
	padding: 0 10px;
}


/* // ________SP________ // */
@media screen and (max-width: 840px)  {

	.caseTitleCmp *{
		font-size: 100%;
	}
	.caseTitleCmp .logo + .name{
		margin-top: 5px;
	}
	.caseTitleCmp .logo img{
		max-width: 100%;
		max-height: 40px;
		width: auto;
		height: auto;
	}
	.caseTitleHead{
		padding: 0;
		line-height: 1.5;
		margin-top: 20px;
	}
	.caseTitleHead .main{
		font-size: 170%;
		font-weight: 600;
	}
	.caseTitleHead .sub{
		margin-top:8px;
		font-size: 150%;
		font-weight: 500;
	}
	.caseTitleHead:before,
	.caseTitleHead:after{
		display: none;
	}
	.caseTitleCate{
		margin-top: 15px;
	}
	.caseTitleCate span{
		font-size: 90%;
		padding: 0 5px;
	}

}


/* // caseIntro //
----------------------------------------------- */

.caseIntro{
	background: #f8f8f8;
	margin-top: 30px;
}
.caseIntro .inner{
	display: flex;
	display: -ms-flexbox;
	justify-content: center;
	-ms-justify-content: center;
}
.caseIntro .inner .img{
	width: 50%;
	height:300px;
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
}
.caseIntro .inner .txt{
	width: 50%;
	padding: 30px 0 30px 30px;
	line-height: 1.5;
}
.caseIntro .inner .txt dl{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow:     row wrap;
	flex-flow:         row wrap;
	-webkit-justify-content: space-between;
	-ms-justify-content:     space-between;
	justify-content:         space-between;
	-webkit-align-items: flex-start;
	-ms-align-items:     flex-start;
	align-items:         flex-start;
}
.caseIntro .inner .txt dl + dl{
	margin-top: 15px;
}
.caseIntro .inner .txt dl dt{
	background: #66c4f0;
	width: 120px;
	text-align: center;
	color: #fff;
	border-radius: 3px;
	padding: 5px 3px;
}
.caseIntro .inner .txt dl dd{
	width: calc( 100% - 120px - 40px);
	font-size: 128%;
}
.caseIntro .inner .txt dl.small dd{
	font-size: 100%;
	font-weight: 400
}

/* // ________SP________ // */
@media screen and (max-width: 840px)  {

	.caseIntro{
		margin-top: 20px;
	}
	.caseIntro .inner{
		display: block;
		margin-left: -15px;
		margin-right: -15px;
	}
	.caseIntro .inner .img{
		width: 100%;
		height:220px;
		background-size:contain;
	}
	.caseIntro .inner .txt{
		width: 100%;
		padding: 20px 15px 20px 15px;
	}
	.caseIntro .inner .txt dl + dl{
		margin-top: 10px;
	}
	.caseIntro .inner .txt dl dt{
		width: 100px;
		font-size: 87%;
		padding: 3px 3px;
	}
	.caseIntro .inner .txt dl dd{
		width: calc( 100% - 100px - 15px);
		font-size: 110%;
	}
	.caseIntro .inner .txt dl.small dd{
		font-size: 87%;
	}


}


/* // casePoint //
----------------------------------------------- */

.casePoint{
	margin-top: 50px;
}
.casePointList li{
	border: 1px solid #dbdbdb;
	box-shadow: 3px 3px 10px rgba(0,0,0,.11);
	padding: 30px 75px 40px 90px;
	position: relative;
}
.casePointList li + li{
	margin-top: 25px;
}
.casePointList li .ttl{
	font-size: 170%;
}
.casePointList li .txt{
	margin-top: 15px;
	font-size: 107%;
	font-weight: 300;
}
.casePointList li:before{
	content:"　";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 75px 75px 0 0;
	border-color: #99d8f5 transparent transparent transparent;
}
.casePointList li:after{
	content:"1";
	font-family: 'Roboto', sans-serif;
	position: absolute;
	left: 18px;
	top: 5px;
	font-size: 78px;
	font-style: italic;
	line-height: 1;
	color: #0082bf;
	font-weight: 500;
}
.casePointList li:nth-child(2):after{	content:"2";}
.casePointList li:nth-child(3):after{	content:"3";}
.casePointList li:nth-child(4):after{	content:"4";}
.casePointList li:nth-child(5):after{	content:"5";}



/* // ________SP________ // */
@media screen and (max-width: 840px)  {

	.casePoint{
		margin-top: 40px;
	}
	.casePointList li{
		box-shadow: 3px 3px 5px rgba(0,0,0,.11);
		padding: 15px 15px 20px 40px;
	}
	.casePointList li + li{
		margin-top: 25px;
	}
	.casePointList li .ttl{
		font-size: 110%;
		line-height: 1.5;
	}
	.casePointList li .txt{
		margin-top: 10px;
		font-size: 92%;
		line-height: 1.7;
	}
	.casePointList li:before{
		border-width: 40px 40px 0 0;
	}
	.casePointList li:after{
		left: 5px;
		top: 5px;
		font-size: 40px;
	}

}


/* // caseComment //
----------------------------------------------- */

.caseComment{
	border: 9px solid #EDEDED;
	padding: 25px;
	margin-top: 100px;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow:     row wrap;
	flex-flow:         row wrap;
	-webkit-justify-content: space-between;
	-ms-justify-content:     space-between;
	justify-content:         space-between;
}
.caseComment .caseCommentImg{
	width: 280px;
}
.caseComment .caseCommentTxt{
	width: calc(100% - 280px - 40px);
}
.caseComment.noImg .caseCommentTxt{
	width: 100%;
}
.caseComment .caseCommentTxt .body{
	font-weight: 400;
}


/* // ________SP________ // */
@media screen and (max-width: 840px)  {

	.caseComment{
		border-width: 5px;
		padding: 12px;
		margin-top: 40px;
		display: block;
	}
	.caseComment .caseCommentImg{
		width: 100%;
	}
	.caseComment .caseCommentTxt{
		width: 100%;
	}

}

/* // caseBody //
----------------------------------------------- */
#CaseBody .title1{
	font-size: 500%;
	margin-bottom: 25px;
}

#CaseBody .htx1{
	font-size: 142%;
	line-height: 1.7;
	padding-bottom: 15px;
	border-bottom: 1px solid #1893d5;
	position: relative;
	margin-top: 60px;
	margin-bottom: 25px;
}
#CaseBody .htx1:before{
	content:" ";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  left: 0;
  bottom: -3px;
  background-color: #1893d5;
  z-index: 1;
  transition: .5s;
}
#CaseBody .wrap.right{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow:     row nowrap;
	flex-flow:         row nowrap;
	-webkit-justify-content: space-between;
	-ms-justify-content:     space-between;
	justify-content:         space-between;
	-webkit-align-items: stretch;
	-ms-align-items:     stretch;
	align-items:         stretch;
}
#CaseBody .wrap.right .image {
	margin-left: 30px;
	order:1;
}
#CaseBody .wrap.right .box {
	-webkit-flex-shrink: 100;
	-ms-flex-shrink: 100;
	flex-shrink: 100;
}
#CaseBody .wrap.center .image{
	margin: 30px 0;
}
#CaseBody .box{
	padding-left: 100px;
	position: relative;
	min-height: 50px;
}
#CaseBody .box + .box{
	margin-top: 40px;
}
#CaseBody .box p{
	font-weight: 400;
}
#CaseBody .box .speaker{
	position: absolute;
	left: 0;
	top: 0;
	font-size:128%;
	padding: 17px 0 0 17px;
	line-height:1;
}
#CaseBody .box .speaker:before{
	content:"　";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: #fff transparent transparent transparent;
	opacity: .1;
}
#CaseBody .box .speaker.cRed{ color:#ca0056}
#CaseBody .box .speaker.cRed:before{ border-color: #ca0056 transparent transparent transparent}
#CaseBody .box .speaker.cBlue{ color:#0076ac}
#CaseBody .box .speaker.cBlue:before{ border-color: #0076ac transparent transparent transparent}

/* // ________SP________ // */
@media screen and (max-width: 840px)  {

	#CaseBody .title1{
		font-size: 350%;
		margin-bottom: 20px;
	}

	#CaseBody .htx1{
		font-size: 110%;
		line-height: 1.5;
		padding-bottom: 10px;
		margin-top: 40px;
		margin-bottom: 20px;
		font-weight:600;
	}
	#CaseBody .wrap.right{
		display: block;
	}
	#CaseBody .wrap.right .image {
		margin: 20px 0;
		text-align: center;
	}
	#CaseBody .wrap.right .image img{
		max-height: 50vw;
		width: auto;
		height: auto;
	}
	#CaseBody .wrap.center .image{
		margin: 20px 0;
	}
	#CaseBody .wrap.center .image img{
		max-height: 50vw;
		width: auto;
		height: auto;
	}
	#CaseBody .box{
		padding-left: 50px;
		min-height: 0px;
	}
	#CaseBody .box + .box{
		margin-top: 30px;
	}
	#CaseBody .box p{
		font-weight: 400;
	}
	#CaseBody .box .speaker{
		font-size:92%;
		padding: 7px 0 0 3px;
	}
	#CaseBody .box .speaker:before{
		border-width: 30px 30px 0 0;
	}

}