@charset "utf-8";

/*===============================================
chapter02　第2回
===============================================*/

#management.chapter02{

}
#management.chapter02 #dMWrapper{
	font-size: 17px;
}
#management.chapter02 div#dMain .dModBoxNormal div,
#management.chapter02 div#dMain .dModBoxNormal p,
#management.chapter02 div#dMain .dModBoxNormal p a,
#management.chapter02 div#dMain .dModBoxNormal p span,
#management.chapter02 div#dMain .dModBoxNormal p strong{
	line-height: 1.66;
}
#management.chapter02 #dMWrapper #dMainColumn{
	text-align: justify;
}
#management.chapter02 .section-title .title-in{
	font-size: 34px;
}
#management.chapter02 .section-title .num-img {
    height: 63px;
}
#management.chapter02 .content {
	margin-top: 48px;
}
#management.chapter02 .content-title .title-in{
	font-size: 28px;
}
#management.chapter02 .graph{
	margin-top: 48px;
	margin-bottom: 56px;
}
#management.chapter02 .graph.center{
	margin-left: auto;
	margin-right: auto;
}
#management.chapter02 .section02 .float-wrap .float-img.right{
	margin-top: 0;
}





/*商材サービス*/
#management.chapter02 .service-card,
#management.chapter02 .service-card *{
	box-sizing: border-box;
}
#management.chapter02 .service-card{
/*	border: 2px solid #s153d70;*/
	border-radius: 16px;
	margin-bottom: 56px;
/*	overflow: hidden;*/
}
#management.chapter02 .service-body{
	border-radius: 0 0 16px 16px;
	border: 2px solid #153d70;
	border-top: 0;
	padding: 30px;
	display: flex;
	justify-content: space-between;
}
#management.chapter02 .service-card .service-name{
	position: relative;
	border-radius: 16px 16px 0 0;
	background: #153d70;
	font-weight: bold;
	padding: 15px 0 13px;
	padding-left: 104px;
	padding-right: 80px;
}
#management.chapter02 div#dMain p.service-name a{
	line-height: 1.4;
}
#management.chapter02 .service-card .service-name::before{
	content: '';
	position: absolute;
	background-image: url(/member_assets/images/oyakudachi/management/chapter02/pickup.png);
	width: 64px;
	height: 104px;
	background-size: contain;
	left: 20px;
	background-repeat: no-repeat;
	top: -8px;
}

#management.chapter02 .service-card .service-name a{
	color: #fff;
	display: block;
	text-decoration: none;
	font-size: 34px;
}
#management.chapter02 .service-card .service-name a::after{
	content: '';
	position: absolute;
	background-image: url(/member_assets/images/oyakudachi/management/chapter02/circle-arrow.svg);
	width: 1.1em;
	height: 1.1em;
	background-repeat: no-repeat;
	background-size: contain;
	right: 30px;
	top: 50%;
	transform: translate(0,-50%);
}
#management.chapter02 .service-card .service-name a:hover{
	opacity: 0.8;
}
#management.chapter02 .service-card .service-name a::after:hover{
	opacity: 0.8;
}
#management.chapter02 .service-card .thumb {
	width: 320px;
}
#management.chapter02 .service-card .thumb a{
	display: block;
}
#management.chapter02 .service-card .thumb a:hover{
	opacity: 0.8;
}
#management.chapter02 .service-card .text{
	width: calc(100% - 340px);
}

#management.chapter02 .service-card .lead{
	font-size: 24px;
	font-weight: bold;
}

#management.chapter02 div#dMain .dModBoxNormal .service-card p.service-lead{
	line-height: 1.58;
}

#management.chapter02 .step-content{
	margin-bottom: 32px;
}

#management.chapter02 .step-title {
	border-bottom: 1px solid #000000;
	font-size: 18px;
	padding-bottom: 10px;
	margin-right: 0;
}




#management.chapter02 .section02{
	margin-top: 60px;
}
#management.chapter02 .section02-02-separate{
	display: flex;
	justify-content: space-between;
}
#management.chapter02 .section02-02-separate img{
	width: 100%;
}
#management.chapter02 .section02-02-separate .left{
	flex-basis: 35%;
}
#management.chapter02 .section02-02-separate .right{
	flex-basis: 57%;
	text-align: left;
}

#management.chapter02 .section03 {
    margin-top: 54px;
    padding-top: 54px;
    border-top: 1px solid #153d70;
}
#management.chapter02 .section03 .float-wrap .float-img.right {
    margin-bottom: 0;
}
@media (min-width:1280px){
	#management.chapter02 .section03 .float-wrap{
		margin-bottom: -30px;
	}
}
#management.chapter02 .section03-02-separate{
	display: flex;
	justify-content: space-between;
}
#management.chapter02 .section03-02-separate img{
	width: 100%;
}
#management.chapter02 .section03-02-separate .left{
	flex-basis: 56%;
}
#management.chapter02 .section03-02-separate .right{
	flex-basis: 38%;
	text-align: left;
}

#management.chapter02 .section04 .summary{
	margin-bottom: 56px;
}

#management.chapter02 .section04 .graph{
	margin: 0;
}
#management.chapter02 .section04 .section-in {
    margin-top: 40px;
}
#management.chapter02 .feedback-form {
    margin-top: 80px;
}

@media (max-width:1280px) and (min-width:1081px) {



	#management.chapter02 #section01 .float-wrap .float-img.right {
		width: calc(158 / 1400 * 100vw);
	}
	
	#management.chapter02 #section02-1 .graph01 {
		width: calc(785 / 1400 * 100vw);
	}
	#management.chapter02 #section02-1 .graph02 {
		width: calc(675 / 1400 * 100vw);
	}
	#management.chapter02 #section02-1 .graph03 {
		width: calc(595 / 1400 * 100vw);
	}

	#management.chapter02 .section02-02-separate .left{
		flex-basis: 42%;
	}
	#management.chapter02 .section02-02-separate .right{
		flex-basis: 52%;
		text-align: left;
	}


	#management.chapter02 #section02 .float-wrap .float-img.right {
		width: calc(309 / 1400 * 100vw);
	}
	#management.chapter02 #section03-1 .graph04 {
		width: calc(797 / 1400 * 100vw);
	}
	#management.chapter02 #section03-1 .graph05 {
		width: calc(674 / 1400 * 100vw);
	}

	#management.chapter02 #section03-2 .float-wrap .float-img.right {
		width: calc(372 / 1400 * 100vw);
	}
	#management.chapter02 .graph06 {
		width: calc(562 / 1400 * 100vw);
	}
	#management.chapter02 .graph07 {
		width: calc(575 / 1400 * 100vw);
	}
	#management.chapter02 .graph08 {
		width: calc(919 / 1400 * 100vw);
	}

	#management.chapter02 .section04 .summary{
		margin-bottom: 48px;
	}

	#management.chapter02 .section04 .section-in {
	    margin-top: 32px;
	}

}

@media(min-width:1081px)and (max-width:1280px),(max-width:960px) {
	#management.chapter02 .graph {
	    margin-top: 32px;
	    margin-bottom: 48px;
	}

	#management.chapter02 .service-card .service-name a{
		font-size: 28px;
	}
	#management.chapter02 .service-card .lead {
	    font-size: 20px;
	}
	#management.chapter02 .service-card .thumb {
	    width: 40%;
	}
	#management.chapter02 .service-card .text {
	    width: 60%;
	    padding-left: 20px;
	}
	#management.chapter02 .feedback-form {
	    margin-top: 60px;
	}
}

@media(max-width:1080px) {

}

@media(max-width:960px) {

	#management.chapter02 .section-title .title-in {
	    font-size: 26px;
	}
	#management.chapter02 .section-title .num-img {
	    height: 50px;
	}
	#management.chapter02 .content-title .title-in {
	    font-size: 22px;
	}

	#management.chapter02 .section02 {
	    margin-top: 40px;
	}


	#management.chapter02 #section01 .float-wrap .float-img.right {
		width: calc(158 / 1200 * 100vw);
	}
	
	#management.chapter02 #section02-1 .graph01 {
		width: calc(785 / 1020 * 100vw);
	}
	#management.chapter02 #section02-1 .graph02 {
		width: calc(675 / 1020 * 100vw);
	}
	#management.chapter02 #section02-1 .graph03 {
		width: calc(595 / 1020 * 100vw);
	}

	#management.chapter02 .section03 {
	    margin-top: 40px;
	    padding-top: 40px;
	}

	#management.chapter02 #section02 .float-wrap .float-img.right {
		width: calc(309 / 1200 * 100vw);
	}
	#management.chapter02 #section03-1 .graph04 {
		width: calc(797 / 1020 * 100vw);
	}
	#management.chapter02 #section03-1 .graph05 {
		width: calc(674 / 1020 * 100vw);
	}
	#management.chapter02 #section03-2 .float-wrap .float-img.right {
		width: calc(372 / 1200 * 100vw);
	}


	#management.chapter02 .section04 .float-wrap .float-img.left {
	    width: calc(256 / 1280 * 100vw);
	}
	#management.chapter02 .graph06 {
		width: calc(562 / 1020 * 100vw);
	}
	#management.chapter02 .graph07 {
		width: calc(575 / 1020 * 100vw);
	}
	#management.chapter02 .graph08 {
		width: calc(919 / 1020 * 100vw);
	}


}
@media(max-width:768px) {
	#management.chapter02 .graph {
	    margin-top: 12px;
	    margin-bottom: 32px;
	}
	#management.chapter02 .section-title .title-in {
	    font-size: 22px;
	}
	#management.chapter02 .section-title .num-img {
	    height: auto;
	    width: 42px;
	    margin-bottom: 0;
	    margin-right: 8px;
	}
	#management.chapter02 .content-title .title-in {
	    font-size: 18px;
	}

	#management div#dMain .bold-title-normal,
	#management div#dMain h3.bold-title-normal {
		font-size: 16px;
	}
	#management.chapter02 .step-content {
	    margin-bottom: 16px;
	}
	#management.chapter02 .step-title {
	    font-size: 16px;
	    padding-bottom: 6px;
	    margin: 0 0 16px;
	}
	#management.chapter02 #dMWrapper{
		font-size: 15px;
	}

	#management.chapter02 .service-card {
	    margin-bottom: 24px;
	}
	#management.chapter02 .service-card .service-name a{
		font-size: 22px;
	}	
	#management.chapter02 .service-card .lead {
	    font-size: 18px;
	}
	#management.chapter02 .service-card .service-name::before {
	    width: 45px;
	    height: 70px;
	    left: 13px;
	    top: -6px;
	}
	#management.chapter02 .service-card .service-name {
	    padding: 15px;
	    padding-left: 74px;
	    padding-right: 50px;
	}
	#management.chapter02 .service-card .service-name a::after {
	    right: 15px;
	}
	#management.chapter02 .service-body {
	    padding: 15px;
	    display: block;
	}
	#management.chapter02 .service-card .thumb {
	    width: 100%;
	    margin-bottom: 20px;
	}
	#management.chapter02 .service-card .text {
	    width: 100%;
	    padding-left: 0px;
	}

	#management.chapter02 .content {
	    margin-top: 32px;
	}

	#management.chapter02 .section03-02-separate .left{
		flex-basis: 65%;
	}
	#management.chapter02 .section03-02-separate .right{
		flex-basis: 30%;
	}


	#management.chapter02 .section03 {
	    margin-top: 30px;
	    padding-top: 30px;
	}

	#management.chapter02 .section02-02-separate{
		display: block;
		margin-bottom: 32px;
	}
	#management.chapter02 .section02-02-separate img{
		width: 100%;
	}
	#management.chapter02 .section02-02-separate .left{
		display: flex;
	    align-items: flex-start;
	    flex-direction: row-reverse;
	}
	#management.chapter02 .section02-02-separate .left img{
	    width: 33%;
	    padding-left: 22px;
	}
	#management.chapter02 .section02-02-separate .right{
		flex-basis: 57%;
		text-align: left;
	}
	#management.chapter02 .section02-02-separate .right img{
		max-width: 560px;
	}

	#management.chapter02 .section04 .summary{
		margin-bottom: 32px;
	}

	#management.chapter02 .section04 .section-in {
	    margin-top: 32px;
	}

	#management.chapter02 .feedback-form {
	    margin-top: 40px;
	}

}
@media screen and (max-width:650px) {
	#management.chapter02 .section04 .section-in {
	    margin-top: 24px;
	}
}
@media screen and (max-width:576px) {

	#management.chapter02 .service-card .service-name a{
		font-size: 20px;
	}	

}
@media screen and (max-width:480px) {
	#management.chapter02 .section02-02-separate .left{
		display: block;
	}
	#management.chapter02 .section02-02-separate .left img{
	    margin-bottom: 20px;
	    text-align: center;
	    max-width: 70%;
	}

	#management.chapter02 .section03-02-separate{
		display: block;
	}
	#management.chapter02 .section03-02-separate .right{
	    margin: 0 auto;
	    margin-bottom: 30px;
	    text-align: center;
	    max-width: 70%;
	}


}

/*ページ下部の商材サービス余白調整*/
.syouzai_service .item-3horizon .link-box {
	padding-bottom: 48px;
}