@charset "utf-8";
/*===============================================
債権回収　CSS
===============================================*/
/* CSS Document */
/*===============================================
ロゴの赤　#cf000e

debt　/　債務整理　/　#704b3f
divorce　/　離婚問題　/　#eb4767
accident　/　交通事故　/　#409cc5
hepatitisb　/　B型肝炎　/　#7aaf40
criminal　/　刑事事件　/　#94000c
work　/　労働問題 残業代請求　/　#5269aa
g_dismissal　/　不当解雇・退職勧奨　/　#5269aa
disaster　/　労働災害　/　#5269aa
g_other_work　/　労働条件・ハラスメント　/　#5269aa
claim　/　債権回収　/　#14385e
bequest　/　遺産相続　/　#e65c00
legalprotect / 個人向け 顧問弁護士　/　#1c4e48

legalprotect / 法人 顧問弁護士　/　#1c4e48
realestate　/　不動産建物明渡し　/　#a16600
civil　/　民事再生・法人破産　/　#149393
china　/　中国進出支援　/　#e02000
overseas　/　海外進出支援　/　#818181
===============================================*/
.none {
	display:none;
}
/*==================================================
分野ページのetcボタン
==================================================*/
.etc_area li.item01 a p:before { content: url(/common_api/branch/img/individual/claim/etc_icon01.svg); }
.etc_area li.item01 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon01_on.svg); }
.etc_area li.item02 a p:before { content: url(/common_api/branch/img/individual/claim/etc_icon02.svg); }
.etc_area li.item02 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon02_on.svg); }
.etc_area li.item03 a p:before { content: url(/common_api/branch/img/individual/claim/etc_icon03.svg); }
.etc_area li.item03 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon03_on.svg); }
.etc_area li.item04 a p:before { content: url(/common_api/branch/img/individual/claim/etc_icon04.svg); }
.etc_area li.item04 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon04_on.svg); }
.etc_area li.item05 a p:before { content: url(/common_api/branch/img/individual/claim/etc_icon05.svg); }
.etc_area li.item05 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon05_on.svg); }
.etc_area li.item06 a p:before { content: url(/common_api/branch/img/individual/claim//etc_icon06.svg); }
.etc_area li.item06 a:hover p:before { content: url(/common_api/branch/img/individual/claim/etc_icon06_on.svg); }
/*==================================================
債権回収を弁護士に依頼する
==================================================*/
.request dl {
	float: left;
	margin: 2em 0;
	width: 48%;
}
.request dl dt {
	border-bottom: 1px dashed #595959;
	font-size: 1.38rem;
	margin-bottom: 1em;
	padding: 0 0 10px 64px;
}
.request dl dd {
	line-height: 2;
	padding-left: 12px;
	position: relative;
}
.request dl dd:before {
	border-bottom: 6px solid transparent;
	border-left: 6px solid #14385e;
	border-top: 6px solid transparent;
	content: "";
	height: 0;
	left: 0;
	margin-top: 0.6rem;
	position: absolute;
	top: 0;
	width: 0;
}
.request .request01, .request .request03, .request .request05, .request .request07 {
	margin-right: 4%;
}
.request .request01 {
	background: rgba(0, 0, 0, 0) url(/common_api/branch/img/individual/claim/request_icon01.svg) no-repeat scroll 0 0 / 50px auto;
}
.request .request02 {
	background: rgba(0, 0, 0, 0) url(/common_api/branch/img/individual/claim/request_icon02.svg) no-repeat scroll 0 0 / 50px auto;
}
.request .request03 {
	background: rgba(0, 0, 0, 0) url(/common_api/branch/img/individual/claim/request_icon03.svg) no-repeat scroll 0 0 / 50px auto;
}
.request .request04 {
	background: rgba(0, 0, 0, 0) url(/common_api/branch/img/individual/claim/request_icon04.svg) no-repeat scroll 0 0 / 50px auto;
}
.request .request05 {
	background: rgba(0, 0, 0, 0) url(/common_api/branch/img/individual/claim/request_icon05.svg) no-repeat scroll 0 0 / 50px auto;
}
/* ==================================================
ご相談から債権の回収までの流れ 
==================================================*/
.flow h4 {
	font-size: 1.2rem;
	font-weight: bold;
	margin: 40px 0 20px 0;
	line-height: 1.2;
}
.flow p {
	font-size: 1rem;
	line-height: 1.88rem;
	text-align: justify;
}
.flow_chart ul li {
	display: flex;
	align-items: center;
	width: 100%;
	height: 187px;
	padding: 0 150px 40px 150px;
	font-weight: bold;
	font-size: 1.2rem;
	box-sizing: border-box;
}
.flow_chart ul li:first-child {
	background: url(/common_api/branch/img/individual/claim//flow_bg01.png) no-repeat;
	background-size: contain;
}
.flow_chart ul li:nth-child(2) {
	background: url(/common_api/branch/img/individual/claim//flow_bg02.png) no-repeat;
	background-size: contain;
}
.flow_chart ul li:nth-child(3) {
	background: url(/common_api/branch/img/individual/claim//flow_bg03.png) no-repeat;
	background-size: contain;
}
.flow_chart ul li:last-child {
	background: url(/common_api/branch/img/individual/claim//flow_bg04.png) no-repeat;
	background-size: contain;
}
/*流れ　可変バージョン*/
.flow_chart ul.list-flow {}
	.flow_chart ul.list-flow li {
		display: block;
		width: 100%;
		height: auto;
		min-height: 187px;
		padding: 0 124px 38px 0;
		font-weight: bold;
		font-size: 1.2rem;
		box-sizing: border-box;
		background: url(/common_api/branch/img/individual/claim/img_line_right.png) no-repeat right 54px bottom;
	}
	.flow_chart ul.list-flow li:nth-child(even) {
		padding: 0 0 38px 124px;
	}
	.flow_chart ul.list-flow li.list-flow-02 {
		background: url(/common_api/branch/img/individual/claim/img_line_left.png) no-repeat left 54px bottom;
	}
	.flow_chart ul.list-flow li.list-flow-04 {
		background: none;
	}
.block-flow {
	display: flex;
	background: #fff;
	border: 2px solid #14385e;
}
.box-flow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 122px;
	background: #14385e;
}
.list-flow-02 .box-flow,
.list-flow-04 .box-flow{
	background: #e00012;
	border-left: 2px solid #14385e;
}
.txt-flow {
	width: calc(100% - 122px);
	padding: 24px;
}
.list-flow-01 .txt-flow { background: url(/common_api/branch/img/individual/claim/img_num1.png) no-repeat right bottom; }
.list-flow-02 .txt-flow { background: url(/common_api/branch/img/individual/claim/img_num2.png) no-repeat left bottom; }
.list-flow-03 .txt-flow { background: url(/common_api/branch/img/individual/claim/img_num3.png) no-repeat right bottom; }
.list-flow-04 .txt-flow { background: url(/common_api/branch/img/individual/claim/img_num4.png) no-repeat left bottom; }
/* ==================================================
弁護士に相談するメリット 
==================================================*/
.merit_txt_block {
	margin: 20px 0 0 0;
	/*font-size: 0;*/
}
.merit_txt_block .table-cmn-basic {
	margin: 15px 0;
}
.merit_txt_block .table-cmn-basic th, .merit_txt_block .table-cmn-basic td {
	vertical-align: middle;
}
.merit_txt {
	display: inline;/* 必要2017/08/17 */
	/*float: left;*/
	width: 60%;/* 必要2017/08/17 */
	font-size: 1rem;
	line-height: 1.88rem;
}
.merit_txt__small {
	font-size: 0.88rem;
}
.merit_txt p.separate {
	margin: 1rem 0 0 0;
}
.merit_img {
	float: right;
	display: inline-block;
	vertical-align: top;
	padding: 0 0 0 40px;
	width: 310px;
	font-size: 1rem;
}
.merit_img img {
	width: 100%;
}
/*
.underline {
	background: linear-gradient(transparent 80%, #f4ae33 80%);
}
*/

/*=============================================================================================
タブレット　スマホ　780px以下
=============================================================================================*/
@media only screen and (max-width: 780px) {
	/*==================================================
	分野ページのetcボタン
	==================================================*/
	.etc_area li.item01 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon01.svg); }
	.etc_area li.item02 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon02.svg); }
	.etc_area li.item03 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon03.svg); }
	.etc_area li.item04 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon04.svg); }
	.etc_area li.item05 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon05.svg); }
	.etc_area li.item06 a:hover p:before { content: url(/common_api/branch/img/individual/claim//etc_icon06.svg); }
	/*==================================================
	債権回収を弁護士に依頼する
	==================================================*/
	.request dl {
		float: none;
		width: 100%;
	}
	/* ==================================================
	ご相談から債権の回収までの流れ 
	==================================================*/
	.flow_chart ul li{
		width: 100% !important;
		height: auto !important;
		padding-top: 24%;
		padding-left: 20%;
		position: relative;
		font-size: 1.15rem;
	}
	.flow_chart ul li span{
		position: absolute;
		top: 10%;
		display: block;
		width: 60%;
	}
	/* ==================================================
	弁護士に相談するメリット 
	==================================================*/
	.merit_txt {
		padding: 0 3%;
		width: 100%;
	}
	.merit_img {
		float:none;
		display: block;
		margin: 30px auto 10px auto;
		padding: 0;
		text-align: center;
		max-width: 200px;
	}
	.merit_img img {
		width: 100%;
	}
}/* 780px レスポンシブ*/

	/*=============================================================================================
	スマホ　640px以下
	=============================================================================================*/
	@media only screen and (max-width: 640px) {

	/* ==================================================
	ご相談から債権の回収までの流れ 
	==================================================*/
	.flow_chart ul li{
		background-image: none !important;
		border: 2px solid #14385e;
		margin-bottom: 50px;
		padding: 5% 5% 5% 20%;
	}
	.flow_chart ul li span{
		position: initial;
		width: 100%;
	}
	.flow_chart ul li:before{
		content:"";
		background:  #14385e;
		position: absolute;
		top: 50%;
		left: 0;;
		margin: 0 2%;
		padding: 1%;
		width: 15%;
		height: auto;
		transform: translate(0,-50%);
		-webkit-transform: translate(0,-50%);
		-moz-transform: translate(0,-50%);
		-ms-transform: translate(0,-50%);
		-o-transform: translate(0,-50%);
		box-sizing: border-box;
	}
	.flow_chart ul li:first-child:before{ content: url(/common_api/branch/img/individual/claim//flow_icon01.svg); }
	.flow_chart ul li:nth-child(2):before{ content: url(/common_api/branch/img/individual/claim//flow_icon02.svg); }
	.flow_chart ul li:nth-child(3):before{ content: url(/common_api/branch/img/individual/claim//flow_icon03.svg); }
	.flow_chart ul li:last-child:before{ content: url(/common_api/branch/img/individual/claim//flow_icon04.svg); }
	
	.flow_chart ul li:after{
		border: 20px solid transparent;
		border-top: 30px solid #cf000e;
		content: "";
		height: 0;
		width: 0;
		left: 50%;
		bottom: -60px;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
		-moz-transform: translate(-50%,0);
		-ms-transform: translate(-50%,0);
		-o-transform: translate(-50%,0);
		position: absolute;
	}
	.flow_chart ul li:last-child:after{
		border: none;
	}
		
	/*====================================================================
	可変バージョン 
	====================================================================*/
	.flow_chart ul.list-flow li::before { content: none; }
	.block-flow {
		border: none;
	}
	.flow_chart ul.list-flow li {
		min-height: inherit;
		padding: 0;
	}
	.list-flow-02 .block-flow,
	.list-flow-04 .block-flow{
		flex-direction: row-reverse;
	}
	.flow_chart ul.list-flow li:nth-child(even) {
		padding: 0;
	}
	.list-flow-02 .box-flow,
	.list-flow-04 .box-flow {
		background: #14385e;
		border-left: none;
	}
	.list-flow-01 .txt-flow,
	.list-flow-02 .txt-flow,
	.list-flow-03 .txt-flow,
	.list-flow-04 .txt-flow  { background: none; }
		
}/* 780px レスポンシブ */
/*=============================================================================================
スマホ　600px以下
=============================================================================================*/
@media only screen and (max-width: 600px) {

}/* レスポンシブ */
/*=============================================================================================
スマホ　600px以下
=============================================================================================*/
@media only screen and (max-width: 400px) {
	.none {
		display: block;
	}
	.box-flow {
		width: 30%;
		padding: 0 0.5rem;
	}
	.box-flow img {
		width: 100%;
		height: auto;
	}
	.list-flow-01 .box-flow img {
		width: auto;
	}
	.txt-flow {
		width: 70%;
	}
	
}/* レスポンシブ */