@charset "utf-8";
/* CSS Document */
/*全体設定*/
div.container_{
	overflow-x: hidden;
}
*, *:before, *:after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
#payment_np{
	width: 1260px;
	max-width: 100%;
	margin: 0 auto 100px;
}
/*intro*/
#payment_np .intro{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em 45px;
}
#payment_np .intro ._txt{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 360px);
}
#payment_np .intro h1{
	font-weight: bold;
	font-size: 2.5em;
	line-height: 1.3;
	vertical-align: middle;
}
#payment_np .intro h1 span{
	font-size: 2em;
	color: #009ed9;
}
/*NP掛け払いとは*/
#payment_np .howto{
	background: #009ed9;
	padding: 2em 0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	margin-bottom: 50px;
}
#payment_np .howto .fl{
	width: 1260px;
	margin: 0 auto;
}
#payment_np .howto .fl .baloon{
	background-color: #ffffff;
	padding: 0.5em;
	border-radius: 0.5em;
	width: 750px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.3em;
	font-weight: bold;
	margin: 0 auto 35px;
	position: relative;
}
#payment_np .howto .fl .baloon:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 15px solid #ffffff;	
}
#payment_np .howto .fl ._txt{
	color: #ffffff;
	font-size: 1.2em;
	line-height: 2;
	font-weight: bold;
	text-align: center;
	margin-bottom: 25px;
}
#payment_np ._btn{
	text-align: center;
}
#payment_np ._btn a:hover{
	opacity: 0.7;
}
#payment_np ._btn a{
	font-size: 1.2em;
	font-weight: bold;
	display: inline-block;
	padding: 1em 5em;
	border-radius: 2em;
}
#payment_np ._btn.white a{
	color: #009ed9;
	background-color: #ffffff;
	position: relative;
}
#payment_np ._btn.white a::after{
	content: url("/img/lp/payment_np/ico_blank.png");
    margin: auto;
    line-height: 0;
    position: absolute;
    top: 28%;
    right: 10%;
}
#payment_np ._btn.blue a{
	color: #ffffff;
	background-color: #009ed9;
	position: relative;
}
/*シモジマオンラインでの設定の仕方*/
#payment_np .baloon_atn{
	text-align: center;
	position: relative;
	padding-top: 40px;
}
#payment_np .baloon_atn::before{
	content: url("/img/lp/payment_np/circle_attention.png");
	line-height: 0;
    position: absolute;
    left: 50%;
    top: 0;
	z-index: 2;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#payment_np .baloon_atn p{
	position: relative;
	margin: 0 0 1.5em;
	padding: 2em 1.5em;
	max-width: 100%;
	color: #555;
	font-weight: bold;
	font-size: 1.5em;
	background: #ffffff;
	border: solid 3px #009ed9;
	box-sizing: border-box;
	border-radius: 1em;
}
#payment_np .baloon_atn p span{
	color: #009ed9;
}
#payment_np .baloon_atn p::before {
	content: "";
	position: absolute;
	bottom: -24px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-top: 12px solid #FFF;
	z-index: 2;
}
#payment_np .baloon_atn p:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	border-top: 14px solid #009ed9;
	z-index: 1;
}
#payment_np .po_fl{
	width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#payment_np .po_fl .how_fl{
	width: 100%;
	background-color: #ffffff;
	padding: 2em;
	border-radius: 1em;
	border: solid 1px #cccccc;
	position: relative;
	margin-bottom: 2em;
}
#payment_np .sm_howto{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#payment_np .sm_howto .det{
	width: 32%;
	padding: 3em 3em 1em;
	position: relative;
}
#payment_np .sm_howto .det::before{
	margin: auto;
    line-height: 0;
    position: absolute;
    left: 50%;
    top: -5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#payment_np .sm_howto .det._01::before{
	content: url("/img/lp/payment_np/circle_01.png");
}
#payment_np .sm_howto .det._02::before{
	content: url("/img/lp/payment_np/circle_02.png");
}
#payment_np .sm_howto .det._03::before{
	content: url("/img/lp/payment_np/circle_03.png");
}
#payment_np .sm_howto .det.ya::after{
	content: url("/img/lp/payment_np/allow.png");
    margin: auto;
    line-height: 0;
    position: absolute;
    top: 40%;
    right: -4.5%;
}
#payment_np .sm_howto .det ._img img{
	width: 100%;
	border: solid 1px #cccccc;
}
#payment_np .sm_howto .det ._txt{
	margin-top: 10px;
}
#payment_np .sm_howto .det ._txt span{
	color: #009ed9;
	font-weight: bold;
}
/*h_title*/
#payment_np .h_title{
	text-align: center;
	margin-bottom: 25px;
	font-size: 1.3em;
	font-weight: bold;
}
#payment_np .h_title h2{
	margin-bottom: 10px;
}
#payment_np h2._blue{
	color: #009ed9;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1.5em;
}
/*灰色背景*/
#payment_np .glay_bg{
	background: #f4f4f4;
	padding: 5em 0 2em;
	margin: 0 calc(50% - 50vw) 50px;
	width: 100vw;
}
/*POINT*/
#payment_np .po_3fl{
	width: 1260px;
	margin: 0 auto 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
#payment_np .po_3fl .point{
	width: 32%;
	background-color: #ffffff;
	padding: 3em 2em 2em;
	border-radius: 1em;
	border: solid 1px #cccccc;
	position: relative;
}
#payment_np .po_3fl .point::before{
	margin: auto;
    line-height: 0;
    position: absolute;
    left: 50%;
    top: -7%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#payment_np .po_3fl .point.one::before{
	content: url("/img/lp/payment_np/circle_01.png");
}
#payment_np .po_3fl .point.two::before{
	content: url("/img/lp/payment_np/circle_02.png");
}
#payment_np .po_3fl .point.three::before{
	content: url("/img/lp/payment_np/circle_03.png");
}
#payment_np .po_3fl .point ._img{
	margin-bottom: 15px;
}
#payment_np .po_3fl .point ._img img{
	width: 100%;
}
#payment_np .po_3fl .point p._btxt{
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
/*STEP*/
#payment_np .po_4fl{
	width: 1260px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#payment_np .po_4fl .step{
	width: 49%;
	min-height: 230px;
	margin-bottom: 4em;
	background-color: #ffffff;
	padding: 3em 2em 2em;
	border-radius: 1em;
	border: solid 1px #cccccc;
	position: relative;
	display: flex;
	justify-content: space-between;
}
#payment_np .po_4fl .step ._img{
	width: 34%;
}
#payment_np .po_4fl .step ._txt{
	width: 64%;
}
#payment_np .po_4fl .step ._txt p._btxt{
	font-size: 1.2em;
    font-weight: bold;	
}
#payment_np .po_4fl .step::before{
	margin: auto;
	line-height: 0;
    position: absolute;
    left: 50%;
    top: -13%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#payment_np .po_4fl .step.one::before{
	content: url("/img/lp/payment_np/circle_01.png");
}
#payment_np .po_4fl .step.two::before{
	content: url("/img/lp/payment_np/circle_02.png");
}
#payment_np .po_4fl .step.three::before{
	content: url("/img/lp/payment_np/circle_03.png");
}
#payment_np .po_4fl .step.four::before{
	content: url("/img/lp/payment_np/circle_04.png");
}
/*注意事項*/
#payment_np .attention{
	width: 1000px;
	margin: 0 auto;
}
#payment_np .attention ul{
	margin-bottom: 50px;
}
#payment_np .attention ul li{
	list-style-type: disc;
	margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
/*全体設定*/
#payment_np{
	width: 100%;
}
#payment_np .intro{
	padding: 1em 10px;
}
#payment_np .intro ._txt{
	width: 100%;
}
#payment_np .intro h1{
	font-size: 1.2em;
	margin: 1em 0;
}
#payment_np .intro ._img{
	width: 100%;
	text-align: center;
}
#payment_np .intro ._img img{
	width: 60%;
}
/*NP掛け払いとは*/
#payment_np .howto{
	padding: 2em 10px;
	margin: 0 0 50px;
	width: 100%;
}
#payment_np .howto .fl{
	width: 100%;
}
#payment_np .howto .fl .baloon{
	width: 100%;
	font-size: 1.2em;
}
#payment_np .howto .fl .baloon img{
	width: 80%;
}
#payment_np .howto .fl ._txt{
	font-size: 1em;
}
#payment_np ._btn{
	text-align: left;
}
#payment_np ._btn a:hover{
	opacity: 1;
}
#payment_np ._btn a{
	font-size: 1em;
	width: 100%;
	padding: 1em 2em;
}
#payment_np ._btn.white a::after{
    right: 5%;
}
#payment_np ._btn.blue{
	padding: 0 10px;
	text-align: center;
}
#payment_np ._btn.blue a::after{
    right: 5%;
}
/*シモジマオンラインでの設定の仕方*/
#payment_np .baloon_atn{
	text-align: left;
	padding: 40px 10px 0;
}
#payment_np .baloon_atn::before{
}
#payment_np .baloon_atn p{
	font-size: 1.2em;
}
#payment_np .baloon_atn p span{
}
#payment_np .baloon_atn p::before {
}
#payment_np .baloon_atn p:after {
}
#payment_np .po_fl{
	width: 100%;
}
#payment_np .sm_howto .det{
	width: 100%;
	padding: 3em 0 0;
	position: relative;
	margin: 1em 0 2em;
}
#payment_np .sm_howto .det::before{
	margin: auto;
    line-height: 0;
    position: absolute;
    left: 50%;
    top: -5%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#payment_np .sm_howto .det.ya::after{
	content: none;
}
#payment_np .sm_howto .det ._img img{
	width: 100%;
}
#payment_np .sm_howto .det ._txt{
	margin-top: 10px;
}
#payment_np .sm_howto .det ._txt span{
	color: #009ed9;
	font-weight: bold;
}
/*h_title*/
#payment_np h2._blue{
	font-size: 1.3em;
}
#payment_np .h_title{
	font-size: 1em;
	margin: 1em;
}
#payment_np .h_title img{
	width: 70%;
}
/*灰色背景*/
#payment_np .glay_bg{
	padding: 5em 10px 2em;
	margin: 0 0 50px;
	width: 100%;
}
	/*POINT*/
#payment_np .po_3fl{
	width: 100%;
}
#payment_np .po_3fl .point{
	width: 100%;
	margin-bottom: 40px;
}
#payment_np .po_3fl .point:last-of-type{
	margin-bottom: 0;
}
/*STEP*/
#payment_np .po_4fl{
	width: 100%;
}
#payment_np .po_4fl .step{
	width: 100%;
	min-height: 0;
	margin-bottom: 60px;
	padding: 2.5em 1em;
}
#payment_np .po_4fl .step ._img{
	width: 34%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#payment_np .po_4fl .step:nth-of-type(3){
	margin-bottom: 50px;
}
/*注意事項*/
#payment_np .attention{
	width: 100%;
	margin: 0 auto;
}
#payment_np .attention ul{
	margin-bottom: 50px;
	padding: 0 10px 0 25px;
}
}