@charset "utf-8";

/* common
-------------------------------------------------------------------------------------------------------- */




/* case
-------------------------------------------------------------------------------------------------------- */
#case								{ margin-bottom:120px; }
#case .lead						{ margin-bottom:40px; }
#case .caseList				{ margin-left:-3.125%; text-align:center; }
#case .caseList a				{ display:block; color:#333; }
#case .caseList li				{ float:left; padding-left:3.125%; margin-bottom:30px; width:33.33%; box-sizing:border-box; }
#case .caseList li .inBox				{ padding-top:30px; border-top:#a8a8a8 1px dotted; }
#case .caseList li .inBox .pic		{ margin-bottom:20px; }
#case .caseList li .inBox .pic img	{ border-radius:50%; }
#case .caseList li .inBox .bold		{ margin-bottom:6px; }
#case .caseList li .inBox .name		{ margin-bottom:2px; }
#case .caseList li .inBox .type		{ margin-bottom:16px; color:#999; font-size:12px; }
#case .caseList li .inBox .tag		{ margin-bottom:10px; font-size:12px; }
#case .caseList li .inBox .tag a		{ display:inline; color:#326f98; }
#case #pager								{ padding-top:30px; border-top:#ddd 1px solid; }
@media screen and (max-width: 480px) {
#case					{ padding:20px 0 10px; margin-bottom:0; }
#case .title			{ font-size:28px; }
#case .title span	{ display:block; margin-left:0; font-size:14px; }
#case .lead			{ margin:10px 0 20px; text-align:left; }
#case .lead br		{ display:none; }
#case .caseList				{ margin-left:0; text-align:left; }
#case .caseList a				{ color:#333; }
#case .caseList li				{ float:none; padding-left:0; margin-bottom:0; width:auto; }
#case .caseList li .inBox		{ padding:20px 0 10px; border-bottom:none; }
#case .caseList li .inBox .pic			{ float:left; padding-right:10px; width:36%; box-sizing: border-box; }
#case .caseList li .inBox .txtBox		{ float:left; width:64%; }
#case .caseList li .inBox .bold			{ margin-bottom:6px; line-height:1.4; }
#case .caseList li .inBox .name		{ font-size:12px; margin-bottom:0; line-height:1.4; }
#case .caseList li .inBox .type			{ margin-bottom:10px; }
#case .caseList li .inBox .tag a		{ display:inline-block; }
}


/* caseDetail
-------------------------------------------------------------------------------------------------------- */
#pageNav.mb0					{ margin-bottom:0; }
#pageNav .backList				{ float:right; padding-top:16px; font-weight:bold; }
#pageNav .backList	 a			{ display:block; padding:0 16px 0 0; background:url(../img/common/ico_ar_bl.png) no-repeat center right; }
@media screen and (max-width: 480px) {
#pageNav .backList				{ padding-top:0; margin:-30px 10px 0 0; }
}


#caseDetail							{ padding:60px 0; background-color:#f0f0f0; }
#caseDetail article				{ margin-bottom:60px; padding:30px 30px 0; background-color:#fff; border-radius:20px; }
#caseDetail article p			{ line-height:1.75; }
#caseDetail article #titleBox						{ padding-bottom:30px; border-bottom:#ddd 1px solid; }
#caseDetail article #titleBox .pic					{ float:right; width:240px; }
#caseDetail article #titleBox .pic img			{ border-radius:50%; }
#caseDetail article #titleBox .left				{ width:550px; }
#caseDetail article #titleBox .left .title			{ margin:30px 0 20px; color:#424242; font-size:36px; font-weight:bold; line-height:1.2; }
#caseDetail article #titleBox .left .name 		{ display:inline-block; font-size:22px; }
#caseDetail article #titleBox .left .type		{ display:inline-block; margin-left:10px; color:#919191; }
#caseDetail article #titleBox .left .tag			{ margin-top:20px; font-size:12px; }
#caseDetail article #titleBox .left .tag a		{ display:inline-block; margin-right:10px; padding:2px 10px 0; line-height:1.1; border:#326f98 1px solid; }
#caseDetail article #leadBox						{ margin:30px 0; }
@media screen and (max-width: 480px) {
#caseDetail							{ padding:10px 0 20px; }
#caseDetail article				{ margin-bottom:20px; padding:10px 10px 0; border-radius:10px; }
#caseDetail article p			{ line-height:1.6; }
#caseDetail article #titleBox						{ padding-bottom:20px; }
#caseDetail article #titleBox .pic					{ float:none; width:60%; margin:20px auto; }
#caseDetail article #titleBox .left				{ width:auto; }
#caseDetail article #titleBox .left .title			{ margin:0 0 10px; color:#424242; font-size:18px; }
#caseDetail article #titleBox .left .name 		{ display:block; font-size:16px; }
#caseDetail article #titleBox .left .type		{ display:block; margin-left:0; font-size:12px; }
#caseDetail article #titleBox .left .tag			{ margin-top:20px; font-size:12px; }
#caseDetail article #leadBox						{ margin:10px 0; }
}

/* #task */
#caseDetail article #task							{ margin-bottom:6px; padding-bottom:24px; background:url(../img/case/task_next_ar.png) no-repeat center bottom; }
#caseDetail article #task .inBox				{ padding:16px 26px 30px; border:#eaeaea 4px solid; }
#caseDetail article #task .title					{ margin-bottom:6px; padding-left:40px; font-size:30px; font-weight:bold; background:url(../img/case/task_title_bg.png) no-repeat left center; }
#caseDetail article #task .pic					{ float:left; width:200px; }
#caseDetail article #task .txtBox				{ float:right; width:610px; }
#caseDetail article #task .txtBox p			{ margin-bottom:16px; }
@media screen and (max-width: 480px) {
#caseDetail article #task							{ padding-bottom:12px; background-size:42px; }
#caseDetail article #task .inBox				{ padding:10px 10px 0; }
#caseDetail article #task .title					{ padding-left:30px; font-size:18px; background-size:20px;}
#caseDetail article #task .pic					{ float:none; width:60%; margin-bottom:10px; }
#caseDetail article #task .txtBox				{ float:none; width:auto; }
}


/* #propo */
#caseDetail article #propo						{ margin-bottom:6px; padding-bottom:24px; background:url(../img/case/propo_next_ar.png) no-repeat center bottom; }
#caseDetail article #propo .inBox			{ padding:16px 26px 30px; border:#326f98 4px solid; }
#caseDetail article #propo .title				{ margin-bottom:6px; padding-left:40px; color:#326f98; font-size:30px; font-weight:bold; background:url(../img/case/propo_title_bg.png) no-repeat left center; }
#caseDetail article #propo .txtBox			{ float:left; width:690px; }
#caseDetail article #propo .pic				{ float:right; width:120px; margin-top:-40px; }
#caseDetail article #propo .pic p			{ line-height:1.2; text-align:right; font-size:14px; }
@media screen and (max-width: 480px) {
#caseDetail article #propo						{ padding-bottom:12px; background-size:42px; }
#caseDetail article #propo .inBox			{ padding:10px 10px 0; }
#caseDetail article #propo .title				{ padding-left:30px; font-size:18px; background-size:20px; }
#caseDetail article #propo .txtBox			{ float:none; width:auto; }
#caseDetail article #propo .pic				{ float:right; width:auto; margin-top:10px; text-align:right; }
#caseDetail article #propo .pic img		{ width:90px; margin-bottom:4px; }
#caseDetail article #propo .pic p			{ margin-bottom:10px; font-size:12px; }
}


/* #benefits */
#caseDetail article #benefits					{ margin-bottom:40px; }
#caseDetail article #benefits .inBox		{ padding:16px 26px 30px 80px; border:#e3007f 4px solid; background:url(../img/case/benefits_title_bg.png) no-repeat 20px top; }
#caseDetail article #benefits .title			{ margin-bottom:16px; color:#e3007f; font-size:30px; font-weight:bold; }
#caseDetail article #benefits ul				{}
#caseDetail article #benefits ul li			{ padding-left:24px; margin-top:10px; font-size:24px; font-weight:bold; background:url(../img/common/ico_check_rd.png) no-repeat left 8px; }
@media screen and (max-width: 480px) {
#caseDetail article #benefits					{ margin-bottom:30px; }
#caseDetail article #benefits .inBox		{ padding:10px; background-position:10px top; background-size:24px; }
#caseDetail article #benefits .title			{ padding-left:30px; font-size:22px;  }
#caseDetail article #benefits ul				{ margin-bottom:10px; }
#caseDetail article #benefits ul li			{ margin-top:10px; font-size:18px; background-position:left 2px; line-height:1.4; }
}

/* #sysImg */
#caseDetail article #sysImg				{ margin-bottom:40px; }
#caseDetail article #sysImg .inBox		{ padding:20px; background-color:#f5f5f5; }
#caseDetail article #sysImg .title			{ margin-bottom:16px; font-size:30px; font-weight:bold; }
@media screen and (max-width: 480px) {
#caseDetail article #sysImg					{ padding-bottom:12px; }
#caseDetail article #sysImg .inBox			{ padding:10px; }
#caseDetail article #sysImg .title				{ margin-bottom:6px; font-size:18px; }
}


/* #service */
#caseDetail article #service				{}
#caseDetail article #service ul			{ margin-left:-3.125%; }
#caseDetail article #service ul li			{ float:left; padding-left:3.125%; margin-bottom:30px; width:25%; box-sizing:border-box; }
#caseDetail article #service ul li p		{ margin:10px 0; font-size:14px; line-height:1.4; }
@media screen and (max-width: 480px) {
#caseDetail article #service ul			{ margin-left:-3.125%; }
#caseDetail article #service ul li			{ width:50%; }
#caseDetail article #service ul li p		{ margin:6px 0; font-size:12px; line-height:1.2; }
}


/* #pager */
#caseDetail #pager ul					{ position:relative; }
#caseDetail #pager ul li				{ float:none; margin:0; }
#caseDetail #pager ul li a			{ display:block; background-color:#fff; box-sizing:border-box; }
#caseDetail #pager ul li.prev		{ position:absolute; top:0; left:0; }
#caseDetail #pager ul li.next		{ position:absolute; top:0; right:0; }
#caseDetail #pager ul li.list			{ margin:0 auto; width:240px; }
#caseDetail #pager ul li.list a		{ width:240px; background:url(../img/common/ico_list.png) no-repeat 10% center #fff; }
@media screen and (max-width: 480px) {
#caseDetail #pager ul					{ padding-top:60px; }
#caseDetail #pager ul li.list			{ margin:0 auto; width:auto; }
#caseDetail #pager ul li.list a		{ width:auto; background:url(../img/common/ico_list.png) no-repeat 10% center #fff; }
#caseDetail #pager ul li.prev a		{ width:140px; }
#caseDetail #pager ul li.next a		{ width:140px; }


}