@charset "utf-8";

/*------------------------------------------------------------------------------
Date: 2016-06-13
Copyright (C) NISSO NET ALL Right Reserved
------------------------------------------------------------------------------*/

.lpSec{
	margin-bottom: 60px;
}
.lpSec01{
	margin-bottom: 15px;
}

/* lpMv
------------------------------- */
.lpMv{
	height: 647px;
	background:#eff4f8;
	margin-bottom: 30px;
}
@media screen and (max-width:767px){
	.lpMv{
		height: auto;
		margin-bottom: 15px;
	}
}


/* bdrTtl
------------------------------- */
.bdrTtl01{
	border-bottom: solid 2px #ff9900;
	color: #432306;
	font-size: 26px;
	padding: 0 0 15px;
	font-weight: 700;
	margin-bottom: 25px;
}
.bdrTtl02{
	background:#fdf3e2;
	color: #432306;
	border-left: solid 5px #ff9900;
	padding: 8px 12px;
	font-weight: 700;
	margin-bottom: 25px;
}
@media screen and (max-width:767px){
	.bdrTtl01{
		font-size: 22px;
		padding: 0 0 11px;
	}
	.bdrTtl02{
		margin-bottom: 20px;
	}
}

/* col1Btn
------------------------------- */
.col1Btn{
	box-sizing:border-box;
	width: 600px;
	text-align: center;
	position: relative;
	height: 100px;
	margin:0 auto;
}
.col1Btn:after{
	content: '';
	display: block;
	width: 11px;
	height: 17px;
	position: absolute;
	right: 19px;
	top: 50%;
	margin-top: -7px;
	background: url(/files/img/lp/careerup_ouen/ico_arrow_02.png) 0 0 no-repeat;
	-webkit-background-size: 11px auto;
	background-size: 11px auto;
}
.col1Btn a{
	box-sizing:border-box;
	border-radius: 5px;
	display: block;
	text-decoration: none;
	font-size: 22px;
	font-weight: 700;
	padding: 16px 16px 15px 16px;
	height: 100%;
}
.col1Btn a span{
	display: block;
}
.col2Btn02 li a:hover{
	opacity: 0.7;
}
.col1Btn a{
	border: solid #4cb13d 2px;
	background:#fff;
	color: #2a861c;
}
.col1Btn a .btnIcoFree span{
	font-size: 24px;
	margin-top: 7px;
	padding-left: 50px;
}
.col1Btn a .btnIcoFree span{
	background: url(/files/img/lp/careerup_ouen/ico_free_01.png) 170px 0 no-repeat;
	background-size: 40px auto;
	min-height: 32px;
}
.col1Btn a:hover{
	opacity: 0.7;
}
@media screen and (max-width:767px){
	.col1Btn{
		box-sizing:border-box;
		width: 100%;
		height:auto;
		float: none;
		margin:0;
	}
	.col1Btn a{
		padding: 11px;
		font-size:15px;
		margin: 10px 15px 40px;
	}
	.col1Btn:after{
		background: url(/files/img/lp/careerup_ouen/ico_arrow_02.png) 0 0 no-repeat;
		-webkit-background-size: 8px auto;
		background-size: 8px auto;
	}
	.col1Btn:after{
		right: 28px;
		margin-top: -6px;
	}
	.col1Btn a{
		line-height: 1.4;
	}
	.col1Btn a .btnIcoFree{
		width: 166px;
		margin:0 auto;
	}
	.col1Btn a .btnIcoFree span{
		font-size: 16px;
		margin: 0 auto;
		background: none;
		min-height: auto;
		float: left;
		padding-left:0;
	}
	.col1Btn a .btnIcoFree span:before{
		content:" ";
		display: inline-block;
		background: url(/files/img/lp/careerup_ouen/ico_free_01.png) no-repeat 0 2px;
		-webkit-background-size: 28px 22px;
		background-size: 28px 22px;
		margin-right: 10px;
		line-height: 1.2;
		width: 28px;
		height: 22px;
		padding-bottom: 5px;
		float: left;
	}
	.col1Btn a .btnIcoFree span{
		float: none;
	}
}

/* col1Btn02
------------------------------- */
.col1Btn02{
	box-sizing:border-box;
	width: 600px;
	text-align: center;
	position: relative;
	height: 100px;
	margin:0 auto;
}
.col1Btn02:after{
	content: '';
	display: block;
	width: 11px;
	height: 17px;
	position: absolute;
	right: 19px;
	top: 50%;
	margin-top: -7px;
	-webkit-background-size: 11px auto;
	background-size: 11px auto;
}
.col1Btn02 a{
	box-sizing:border-box;
	border-radius: 5px;
	display: block;
	text-decoration: none;
	font-size: 22px;
	font-weight: 700;
	padding: 16px 16px 15px 16px;
	height: 100%;
}
.col1Btn02 a span{
	display: block;
}
.col2Btn02 li a:hover{
	opacity: 0.7;
}
.col1Btn02 a{
	border: solid #4cb13d 2px;
	background:#fff;
	color: #2a861c;
}
.col1Btn02 a .btnIcoFree span{
	font-size: 24px;
	margin-top: 7px;
	padding-left: 50px;
}
.col1Btn02 a .btnIcoFree span{
	background: url(/files/img/lp/careerup_ouen/ico_free_01.png) 170px 0 no-repeat;
	background-size: 40px auto;
	min-height: 32px;
}
.col1Btn02 a:hover{
	opacity: 0.7;
}
@media screen and (max-width:767px){
	.col1Btn02{
		box-sizing:border-box;
		width: 100%;
		height:auto;
		float: none;
		margin:0;
	}
	.col1Btn02 a{
		padding: 11px;
		font-size:15px;
		margin: 10px 15px 40px;
	}
	.col1Btn02:after{
		background: url(/files/img/lp/careerup_ouen/ico_arrow_02.png) 0 0 no-repeat;
		-webkit-background-size: 8px auto;
		background-size: 8px auto;
	}
	.col1Btn02:after{
		right: 28px;
		margin-top: -6px;
	}
	.col1Btn02 a{
		line-height: 1.4;
	}
	.col1Btn02 a .btnIcoFree{
		width: 166px;
		margin:0 auto;
	}
	.col1Btn02 a .btnIcoFree span{
		font-size: 16px;
		margin: 0 auto;
		background: none;
		min-height: auto;
		float: left;
		padding-left:0;
	}
	.col1Btn02 a .btnIcoFree span:before{
		content:" ";
		display: inline-block;
		background: url(/files/img/lp/careerup_ouen/ico_free_01.png) no-repeat 0 2px;
		-webkit-background-size: 28px 22px;
		background-size: 28px 22px;
		margin-right: 10px;
		line-height: 1.2;
		width: 28px;
		height: 22px;
		padding-bottom: 5px;
		float: left;
	}
	.col1Btn02 a .btnIcoFree span{
		float: none;
	}
}


/* caseSec
------------------------------- */
.commentBox{
	text-align: center;
	margin-bottom: 30px;
}
.cmtTtl{
	background:#5e97d7;
	border-radius: 4px;
	font-weight: 700;
	color: #fff;
	padding: 15px 50px;
	display: inline-block;
	font-size: 20px;
	margin-bottom: 30px;
	position: relative;
}
.cmtTtl:after{
    border-left: 20px solid transparent;
    border-top: 15px solid #5e97d7;
    bottom: -15px;
    content: "";
    display: block;
    height: 0;
    left: 20%;
    position: absolute;
    width: 0;
}
.caseBox{
	text-align: center;
	font-weight: 700;
	border: solid #5e97d7 2px;
	margin-bottom: 30px;
	font-size: 18px;
}
.caseBox .caseBoxTtl{
	background:#5e97d7;
	color: #fff;
	padding: 10px;
}
.caseBox ul li{
	padding: 15px;
	margin-bottom: 15px;
	position: relative;
}
.caseBox ul li.bgCell{
	margin-bottom: 30px;
}
.caseBox ul li.bgCell:after{
    bottom:-20px;
}
.caseBox ul li:after{
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid #8cb5e2;
    bottom:-5px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin-left: -4px;
    position: absolute;
    width: 0;
}
.caseBox ul li.bgCell{
	background: #fdf3e2;
}
.caseBox ul li:last-child{
	margin-bottom: 0;
}
.caseBox ul li:last-child:after{
	content: none;
}
.caseBoxTtl02{
	font-weight: 700;
	background: #f0526c;
	color: #fff;
	text-align: center;
	font-size: 18px;
	padding: 15px;
	position: relative;
	margin-bottom: 22px;
}
.caseBoxTtl02:after{
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 12px solid #f0526c;
    bottom:-12px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin-left: -4px;
    position: absolute;
    width: 0;
}
.caseBox ul li.bgCell.icoNone{
	margin-bottom: 0;
}
.caseBox ul li.bgCell.icoNone:after{
	content: none;
}
.cmtCell{
	margin-top: -15px;
}
.cmtCell .cellContent{
	display: block;
	font-size: 16px;
}
.cmtCell .cellContent .cellCntTag{
	font-size: 18px;
	display: block;
	background: #f76b73;
	color: #fff;
	margin: 15px auto;
	width: 80px;
}
.cmtCell .cellContent b{
	color: #f04e57;
}
.cellBtn{
	display: block;
}
.cellBtn a{
	display: inline-block;
	margin-top: 15px;
	text-align: center;
	border-radius: 4px;
	border: solid 1px #cccccc;
	box-sizing: border-box;
	position: relative;
	bottom: 0;
	text-decoration: none;
	padding: 10px 30px;
	color: #333333;
}
.cellBtn a:hover{
	opacity: 0.7;
}
.cellBtn a:after{
	content: '';
	display: block;
	width: 5px;
	height:9px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -3px;
	background: url(/files/img/lp/weekpay/ico_arrow_01.png) 0 0 no-repeat;
	-webkit-background-size: 5px 9px;
	background-size: 5px 9px;
}
/* color
------------------------------- */
.caseBox.case01{
	border: 2px solid #f67f93;
}
.caseBox.case01 .caseBoxTtl{
	background: #f67f93;
}
.caseBox.case01 ul li:after{
    border-top: 10px solid #f7a0ae;
}
.commentBox.case01{
	margin-bottom: 0;
}
.commentBox.case01 .cmtTtl{
	background: #f67f93;
}
.commentBox.case01 .cmtTtl:after{
    border-top: 15px solid #f67f93;
}
.caseBox.case02{
	border: 2px solid #6bb35d;
}
.caseBox.case02 .caseBoxTtl{
	background: #6bb35d;
}
.caseBox.case02 ul li:after{
    border-top: 10px solid #85d37a;
}
.commentBox.case02{
	margin-bottom: 0;
}
.commentBox.case02.leadImg{
	margin-bottom: 75px;
}
.commentBox.case02 .cmtTtl{
	background: #85d37a;
}
.commentBox.case02 .cmtTtl:after{
    border-top: 15px solid #85d37a;
}

@media screen and (max-width:767px){
	.lpSec03{
		padding:0;
		margin: 0;
	}
	.commentBox{
		margin-bottom: 15px;
	}
	.commentBox .cmtTtl{
		display: block;
	    font-size: 16px;
	    padding: 12px;
	    margin-bottom: 15px;
	}
	.commentBox p img{
		width: 140px;
		height: 140px;
	}
	.cmtTtl:after{
	    border-left: 13px solid transparent;
	    border-top: 10px solid #5e97d7;
	    bottom: -10px;
	}
	.caseBox ul li{
		padding: 10px;
		margin-bottom:0;
	}
	.caseBox ul li:after{
	    border-left: 8px solid transparent;
	    border-right: 8px solid transparent;
	    border-top: 8px solid #8cb5e2;
	}
	.caseBox ul li.bgCell{
		margin-top: 15px;
	}
	.cmtCell .cellContent .cellCntTag{
		margin:15px auto 10px;
	}
	.cellBtn a{
		margin-top: 10px;
		padding: 10px 20px;
		width: 100%;
		font-size: 14px;
	}
	.commentBox.case01 .cmtTtl:after{
		border-top: 10px solid #f67f93;
	}
	.commentBox.case02 .cmtTtl:after{
		border-top: 10px solid #85d37a;
	}
	.commentBox.case02.leadImg{
		margin-bottom: 15px;
	}
}



/* flowUse
------------------------------- */
.flowUse{
	width: 600px;
	margin:0 auto;
}
.flowUse li{
	background: #5e97d7;
	padding: 10px;
	position: relative;
	margin-bottom: 30px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	padding: 40px 60px;
	padding-left: 82px;
	text-align: center;
}
.flowUse li:after{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #8cb5e2;
    bottom:-20px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin-left: -4px;
    position: absolute;
    width: 0;
}
.flowUse li:last-child:after{
	content: none;
}
.flowUse li.step01{
	background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_01.png) 30px 50% no-repeat;
	-webkit-background-size: 84px;
	background-size: 84px;
}
.flowUse li.step02{
	background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_02.png) 30px 50% no-repeat;
	-webkit-background-size: 84px;
	background-size: 84px;
}

.flowUse li.step03{
	background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_03.png) 30px 50% no-repeat;
	-webkit-background-size: 84px;
	background-size: 84px;
}

.flowUse li.step04{
	background: #387cc7 url(/files/img/lp/weekpay/ico_flow_04.png) 30px 50% no-repeat;
	-webkit-background-size: 84px;
	background-size: 84px;
}

.flowUse li.step05{
	background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_05.png) 30px 50% no-repeat;
	-webkit-background-size: 84px;
	background-size: 84px;
}

.flowUse li .flowTag{
	display: inline-block;
	border: solid 1px #fff;
	margin-left: 20px;
	font-size: 18px;
	padding: 3px 10px;
}
.flowUse li .flowTag .txtColor01{
	color: #fff100;
}
@media screen and (max-width:767px){
	.flowUse{
		width:100%;
	}
	.flowUse li{
		box-sizing:border-box;
		font-size: 16px;
		padding: 9px 15px 9px 50px;
		height: 100%;
	}
	.flowUse li.step01{
		background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_01.png) 15px 50% no-repeat;
		-webkit-background-size: 42px;
		background-size: 42px;
		padding-top: 23px;
	}
	.flowUse li.step02{
		background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_02.png) 15px 50% no-repeat;
		-webkit-background-size: 42px;
		background-size: 42px;
	}
	.flowUse li.step03{
		background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_03.png) 15px 50% no-repeat;
		-webkit-background-size: 42px;
		background-size: 42px;
	}
	.flowUse li.step04{
		background: #387cc7 url(/files/img/lp/weekpay/ico_flow_04.png) 15px 50% no-repeat;
		-webkit-background-size: 42px;
		background-size: 42px;
	}
	.flowUse li.step05{
		background: #5e97d7 url(/files/img/lp/weekpay/ico_flow_05.png) 15px 50% no-repeat;
		-webkit-background-size: 42px;
		background-size: 42px;
	}
	.flowUse li .flowTag{
		font-size: 14px;
		display: inline-block;
		padding: 0 10px;
	}
	.flowUse li > span{
		display: block;
	}
}

.flowBtmSec{
	width: 470px;
	margin:0 auto;
	background: url(/files/img/lp/weekpay/photo_01.jpg) right 50% no-repeat;
	min-height: 200px;
}
.flowBtmSec p{
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0.05em;
	line-height: 1.4;
	padding-top: 40px;
}
.flowBtmSec p span{
	color: #ff6700;
}
@media screen and (max-width:767px){
	.flowBtmSec{
		width: 100%;
		margin: -15px 0 0;
		background: url(/files/img/lp/weekpay/photo_01.jpg) right 0 no-repeat;
		background-size: 75px 100px;
		min-height: 0;
	}
	.flowBtmSec p{
		font-size: 18px;
		line-height: 1.6;
    	padding-top: 25px;
	}
}

.bgBoxSec{
	margin: 30px auto;
	border: solid 1px #ccc;
	background:  #f2f2f2;
	padding: 18px;
    width: 560px;
}
.bgBoxSec p b{
	font-size: 18px;
	display: block;
	margin-bottom: 5px;
}
.bgBoxSec li{
	padding-left: 20px;
	position: relative;
}
.bgBoxSec li:before{
	content: '・';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
@media screen and (max-width:767px){
	.bgBoxSec{
		margin: 15px 0;
		padding: 15px;
		width: auto;
	}
	.bgBoxSec p b{
		font-size: 16px;
	}

}



/* ----------------------------------------

clearfix

---------------------------------------- */

/* Modern Browsers
------------------------------- */
.xxx:after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: ".";
	line-height: 0;
}

/* Legacy IE
------------------------------- */
.xxx {
	*zoom: 1;
}