@charset 'utf-8';

/* common
------------------------------------------------ */
.title-page {}

@media screen and (max-width: 768px) {
	.title-page { background-image: url(../../img/service/title-b.jpg); }
}

@media screen and (min-width: 769px) {
	.title-page { background-image: url(../../img/service/title-b-pc.jpg); }
}

/* problem
------------------------------------------------ */
@media screen and (max-width: 768px) {
	.serviceB-heading__problem{
		font-size: 1.6rem;
		color: #fff;
		background: #2e78cb;
		padding: 5px 0;
		margin-bottom: 5px;
	}

	.serviceB-problem{
		margin-bottom: 20px;
	}

	.serviceB-problem-risk_list__item-l,
	.serviceB-problem-risk_list__item-l{
		margin-bottom: 17px;
	}
	.serviceB-problem-risk_list__item-l:last-child,
	.serviceB-problem-risk_list__item-r:last-child{
		margin-bottom: 0;
	}

	.serviceB-case_list{
		padding: 10px;
		background: #f3f3f3;
		margin-bottom: 25px;
	}

	.serviceB-case_list__item{
		font-size: 1.4rem;
		line-height:1.4em;
		color: #000;
		background: #fff;
		padding: 10px;
		margin-bottom: 5px;
	}
	.serviceB-case_list__item:last-child{
		margin-bottom: 0;
	}

	.serviceB-problem-detail{
		position: relative;
		margin-top: 20px;
		padding: 30px 0 20px 0;
		background: #4ccff6;
	}
	
	.serviceB-problem-detail:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -16px;
		width: 0;
		height: 0;
		border-top: solid #fff 10px;
		border-right: solid transparent 16px;
		border-left: solid transparent 16px;
	}

	.serviceB-heading__problem-detail{
		display: inline-block;
		font-size: 1.8rem;
		line-height: 1.4em;
		color: #fff;
		border-bottom: solid 1px #fff;
		padding-bottom: 5px;
		margin-bottom: 20px;
	}

	.serviceB-reason_list__item{
		padding: 12px;
		background: #fff;
		text-align: left;
		margin-bottom: 10px;
		border-top: solid 3px #2e78cb;
	}

	.serviceB-reason__hedding{
		display: flex;
		min-height: 40px;
		align-items: center;
		font-size: 1.8rem;
		line-height: 1.4em;
		margin-bottom: 10px;
		padding-left: 50px;
	}

	.serviceB-reason_list__item:first-child .serviceB-reason__hedding{background: url(../../img/service/icn_feature-01.png)no-repeat; background-size: 40px;}
	.serviceB-reason_list__item:nth-child(2) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-02.png)no-repeat; background-size: 40px;}
	.serviceB-reason_list__item:nth-child(3) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-03.png)no-repeat; background-size: 40px;}
	.serviceB-reason_list__item:nth-child(4) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-04.png)no-repeat; background-size: 40px;}

	.serviceB-reason_list__item p{
		font-size: 1.4rem;
		line-height: 1.6em;
		color: #000;
		overflow: hidden;
	}

	.serviceB-reason_list__item p img{
		width: 46%;
		float: right;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}

@media screen and (min-width: 769px) {
	.serviceB-heading__problem{
		font-size: 1.8rem;
		color: #fff;
		background: #2e78cb;
		padding: 10px 0;
		margin-bottom: 5px;
	}

	.serviceB-problem{
		margin-bottom: 40px;
	}

	.serviceB-problem-risk_list{
		display: flex;
		justify-content: space-between;
	}

	.serviceB-case_list{
		padding: 20px 20px 0 20px;
		background: #f3f3f3;
		margin-bottom: 40px;
	}

	.serviceB-case_list__item{
		font-size: 1.6rem;
		line-height:1.4em;
		color: #000;
		background: #fff;
		padding: 20px;
	}

	.serviceB-case_list{
		display: flex;
		flex-wrap: wrap;
	}

	.serviceB-case_list__item{
		width: 32%;
		margin-bottom: 20px;
	}

	.serviceB-case_list__item:nth-child(3n-1){
		margin-left: 2%;
		margin-right: 2%;
	}

	.serviceB-problem-detail{
		position: relative;
		margin-top: 40px;
		padding: 75px 0 30px 0;
		background: #4ccff6;
	}
	
	.serviceB-problem-detail:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 0;
		height: 0;
		border-top: solid #fff;
		border-right: solid transparent;
		border-left: solid transparent;
		margin-left: -90px;
		border-top-width: 32px;
		border-right-width: 90px;
		border-left-width: 90px;
	}

	.serviceB-heading__problem-detail{
		display: inline-block;
		font-size: 3.4rem;
		line-height: 1.4em;
		color: #fff;
		border-bottom: solid 3px #fff;
		padding-bottom: 15px;
		margin-bottom: 40px;
	}

	.serviceB-reason_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.serviceB-reason_list__item{
		width: 48%;
		padding: 20px;
		background: #fff;
		text-align: left;
		border-top: solid 6px #2e78cb;
		margin-bottom: 40px;
	}

	.serviceB-reason__hedding{
		display: flex;
		min-height: 80px;
		align-items: center;
		font-size: 2.4rem;
		line-height: 1.4em;
		margin-bottom: 25px;
		padding-left: 90px;
	}
	.serviceB-reason_list__item:first-child .serviceB-reason__hedding{background: url(../../img/service/icn_feature-01.png)no-repeat; background-size: 80px;}
	.serviceB-reason_list__item:nth-child(2) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-02.png)no-repeat; background-size: 80px;}
	.serviceB-reason_list__item:nth-child(3) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-03.png)no-repeat; background-size: 80px;}
	.serviceB-reason_list__item:nth-child(4) .serviceB-reason__hedding{background: url(../../img/service/icn_feature-04.png)no-repeat; background-size: 80px;}

	.serviceB-reason_list__item p{
		font-size: 1.6rem;
		line-height: 1.6em;
		color: #000;
		overflow: hidden;
	}

	.serviceB-reason_list__item p img{
		width: 36%;
		float: right;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}

/* result
------------------------------------------------ */
@media screen and (max-width: 768px) {
	.serviceB-result{
		margin-bottom: 20px;
	}

	.serviceB-result-heading{
		font-size: 1.6rem;
		text-align: left;
		color: #2e78cb;
		border-bottom: solid 1px #ccc;
		margin-bottom: 10px;
	}

	.serviceB-result__item:first-child{
		margin-bottom: 20px;
	}

	.serviceB-result p{
		font-size: 1.4rem;
		line-height: 1.6em;
		text-align: left;
		color: #000;
		overflow: hidden;
	}

	.serviceB-result p img{
		width: 45%;
		float: right;
		margin: 0 0 10px 10px;
	}
}

@media screen and (min-width: 769px) {
	.serviceB-result{
		display: flex;
		justify-content: space-between;
		margin-bottom: 40px;
	}

	.serviceB-result__item{
		width: 48%;
	}

	.serviceB-result-heading{
		font-size: 2.4rem;
		text-align: left;
		color: #2e78cb;
		border-bottom: solid 1px #ccc;
		margin-bottom: 10px;
	}

	.serviceB-result p{
		font-size: 1.6rem;
		line-height: 1.7em;
		text-align: left;
		color: #000;
		overflow: hidden;
	}

	.serviceB-result p img{
		width: 45%;
		float: right;
		margin: 0 0 15px 15px;
	}
}

/* suggest
------------------------------------------------ */
@media screen and (max-width: 768px) {
	.serviceB-suggest-item{
		background: #f3f3f3;
		padding: 12px;
		margin-bottom: 10px;
	}

	.serviceB-suggest-heading{
		font-size: 1.5rem;
		font-weight: normal;
		line-height: 1.4em;
		text-align: left;
		color: #fff;
		background: #86c036;
		border-radius: 30px;
		padding: 10px 20px;
		margin-bottom: 20px;
	}

	.serviceB-suggest-lead{
		font-size: 1.4rem;
		line-height: 1.6em;
		text-align: left;
		color: #000;
		margin-bottom: 25px;
	}

	.serviceB-suggest-heading__subject{
		font-size: 1.5rem;
		line-height: 1em;
		text-align: left;
		border-left: solid 4px #92bed4;
		padding-left: 8px;
		margin-bottom: 10px;
	}

	.serviceB-suggest-list{
		display: flex;
		flex-wrap: wrap;
		background: #e7e7e7;
		padding: 10px 10px 0;
		margin-bottom: 20px;
	}

	.serviceB-suggest-list__item{
		width: 30%;
		min-inline-size: 4em;
		font-size: 1.1rem;
		background: #fff;
		margin-bottom: 10px;
		padding: 7px;
	}

	.serviceB-suggest-list__item a{
		width: 100%;
		height: 100%;
		color: #000;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.serviceB-suggest-list__item:nth-child(3n-1){
		margin-left: 5%;
		margin-right: 5%;
	}

	.serviceB-button{
		width: 100%;
		font-size: 1.5rem;
		font-weight: bolder;
		color: #fff;
		border: none;
		border-radius: 5px;
		background: #2e78cb url(../../img/icon/arrow1.png) no-repeat;
		background-position: center right 90px;
	}

	.serviceB-button a{
		display: block;
		width: 100%;
		height: 100%;
		color: #fff;
		padding: 18px 0;
		text-decoration: none;
	}

}

@media screen and (min-width: 769px) {
	.serviceB-suggest-item{
		background: #f3f3f3;
		padding: 30px 50px;
		margin-bottom: 40px;
	}

	.serviceB-suggest-heading{
		display: inline-block;
		font-size: 2.4rem;
		font-weight: normal;
		line-height: 1.4em;
		text-align: left;
		color: #fff;
		background: #86c036;
		border-radius: 30px;
		padding: 10px 20px;
		margin-bottom: 20px;
	}

	.serviceB-suggest-lead{
		font-size: 1.6rem;
		line-height: 1.6em;
		text-align: left;
		color: #000;
		margin-bottom: 40px;
	}

	.serviceB-suggest-lr{
		display: flex;
		justify-content: space-between;
		
		margin-bottom: 40px;
	}

	.serviceB-suggest-lr__item{
		width: 48%;
	}

	.serviceB-suggest-heading__subject{
		font-size: 1.8rem;
		line-height: 1em;
		text-align: left;
		border-left: solid 5px #92bed4;
		padding-left: 10px;
		margin-bottom: 10px;
	}

	.serviceB-suggest-list__item{
		width: 22%;
		min-height: 4em;
		font-size: 1.2rem;
		background: #fff;
		margin-right: 4%;
		margin-bottom: 10px;
		padding: 7px;
	}

	.serviceB-suggest-list__item:nth-child(4n){
		margin-right: 0;
	}

	.serviceB-suggest-list__item a{
		width: 100%;
		height: 100%;
		color: #000;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.serviceB-suggest-list{
		display: flex;
		flex-wrap: wrap;
		background: #e7e7e7;
		padding: 10px 10px 0;
	}




	.serviceB-button{
		width: 230px;
		font-size: 1.8rem;
		font-weight: bolder;
		color: #fff;
		border: none;
		border-radius: 5px;
		background: #2e78cb url(../../img/icon/arrow1.png) no-repeat;
		background-position: center right 25px;
		margin: 0 auto;
	}

	.serviceB-button a{
		display: block;
		width: 100%;
		height: 100%;
		color: #fff;
		padding: 15px 0;
		text-decoration: none;
	}
}



/* flow
------------------------------------------------ */
@media screen and (max-width: 768px) {

	.serviceB-flow-list__item{
		padding: 20px 0 0 0;
	}

	.serviceB-flow-hedding{
		display: inline-block;
		min-height: 40px;
		align-items: center;
		font-size: 2.1rem;
		color: #2e78cb;
		margin: 0 auto 20px auto;
		padding-left: 65px;
		background-position: left center;
	}

	.serviceB-flow-hedding span{
		background:linear-gradient(transparent 70%, #92c64a 0%);
	}

	.serviceB-flow-list__item:first-child .serviceB-flow-hedding{
		background: url(../../img/service/icn_step-01.png)no-repeat;
		background-size: 31px;
	}

	.serviceB-flow-list__item:nth-child(2) .serviceB-flow-hedding{
		background: url(../../img/service/icn_step-02.png)no-repeat;
		background-size: 37px;
	}

	.serviceB-flow-list__item:nth-child(3) .serviceB-flow-hedding{
		background: url(../../img/service/icn_step-03.png)no-repeat;
		background-size: 36px;
	}

	.serviceB-flow-list__item:nth-child(4) .serviceB-flow-hedding{
		background: url(../../img/service/icn_step-04.png)no-repeat;
		background-size: 37px;
	}

	.serviceB-flow-hedding-02{
		font-size: 1.6rem;
		color: #2e78cb;
		margin-bottom: 10px;
	}

	.serviceB-flow-list__item p{
		font-size: 1.4rem;
		line-height: 1.6em;
		text-align: left;
		color: #000;
		padding-bottom: 20px;
		border-bottom: solid 1px #ccc;
	}

	.serviceB-flow-list__item:last-child p{
		border: none;
	}

	.serviceB-flow-list__item::after{
		content: '';
		display: inline-block;
		width: 38px;
		height: 24px;
		background-image: url(../../img/service/arw_step.png);
		background-size: contain;
		margin-top: 20px;
	}

	.serviceB-flow-list__item:last-child::after{
		display: none;
	}
}

@media screen and (min-width: 769px) {
	.serviceB-flow-list__item{
		text-align: left;
		margin-top: 35px;
		padding-bottom: 40px;
		position: relative;
		border-bottom: solid 1px #ccc;
	}

	.serviceB-flow-list__item::after{
		content: '';
		display: inline-block;
		width: 100px;
		height: 24px;
		background: #fff url(../../img/service/arw_step.png)no-repeat;
		background-size: contain;
		background-position: center;
		position: absolute;
		bottom: -15px;
		left: 327px;
	}

	.serviceB-flow-list__item:first-child{
		margin-top: 0;
		background: url(../../img/service/icn_step-01.png)no-repeat;
		background-size:39px;
		background-position: 355px 20px;
	}

	.serviceB-flow-list__item:nth-child(2){
		background: url(../../img/service/icn_step-02.png)no-repeat;
		background-size:45px;
		background-position: 355px 20px;
	}

	.serviceB-flow-list__item:nth-child(3){
		background: url(../../img/service/icn_step-03.png)no-repeat;
		background-size:45px;
		background-position: 355px 20px;
	}

	.serviceB-flow-list__item:nth-child(4){
		background: url(../../img/service/icn_step-04.png)no-repeat;
		background-size:46px;
		background-position: 355px 20px;
		border-bottom: none;
	}

	.serviceB-flow-list__item:nth-child(4)::after{
		display: none;
	}

	.serviceB-flow-hedding{
		display: inline-block;
		font-size: 3.0rem;
		color: #2e78cb;
	}

	.serviceB-flow-hedding span{
		background:linear-gradient(transparent 70%, #92c64a 0%);
	}

	.serviceB-flow-hedding-02{
		font-size: 1.4rem;
		color: #2e78cb;
	}

	.serviceB-flow-list__item p{
		font-size: 1.6rem;
		line-height: 1.6em;
		text-align: left;
		color: #000;
		position: absolute;
		top: 0;
		left: 465px;
	}
}