.cont_area{
	background-color: var(--c-lightgreen);
}

/* ===================================================================================
#b_creditcard
====================================================================================== */
#b_creditcard .lcl_sms > *{
	text-align: center;
	align-items: center;
	font-weight: 600;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: var(--s2);
}

#b_flow .lcl_hyouki .s_gridBox12 ._box h4{
	background-color: var(--c-green);
	color: #fff;
	font-weight: 600;
	padding: .2em 1.5em;
	border-radius: var(--s2) var(--s2) 0 0;
}
#b_flow .lcl_hyouki .s_gridBox12.-blue ._box h4{background-color: var(--c-blue);}
#b_flow .lcl_hyouki .s_gridBox12.-orange ._box h4{background-color: var(--c-orange);}
#b_flow .lcl_hyouki .s_gridBox12.-yellow ._box h4{background-color: var(--c-yellow);
	color: var(--c-black);
}

#b_flow .lcl_hyouki .s_gridBox12 ._box > div{
	background-color: #fff;
	border-radius: 0 0 var(--s2) var(--s2);
	padding: var(--s2);
}

#b_flow .lcl_hyouki .s_gridBox12 img{
	max-width: 300px;
}

/* ===================================================================================
creditcard のページ
====================================================================================== */

.tb_st1.mt4 ._text{
	text-align: center;
}

.s_gridBox.-grid3.lcl_sms div{
	grid-template-rows: subgrid;
	grid-row: span 2;
	display: grid;
	gap: 0;
}

.s_gridBox.-grid3.lcl_sms div p{
	display: flex;
	justify-content: center;
	align-items: end;
}

.bt_st1.-grid2._credit-bt{
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ===================================================================================
creditcard/update　のページ
====================================================================================== */

.attention-flame{
	background-color: #fff;
	border: 4px solid var(--c-green);
	border-radius: var(--s3);
	padding: var(--s3);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
	align-items: center;
}

.attention-flame p{
	font-weight: 600;
	font-size: var(--f22);
}

.bt_st1.-btw50p .bt-pdf{
	max-width: 450px;
	width: 100%;
}

/* ===================================================================================
procedure/payment/creditcard/flow のページ
====================================================================================== */

.step_tit {
	background-color: var(--c-palegreen);
	font-size: var(--f32);
	font-weight: bold;
	padding: .5em;
	text-align: center;
	border-radius: var(--s3);
}

.step_tit.radius{
	border-radius: var(--s3) var(--s3) 0 0;
}

.step_tit .step{
	background: var(--c-menu);
	padding: .4em .6em;
	border-radius: 100px;
	display: inline-block;
	margin: auto;
}

._box._gridbox{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	gap: var(--s3);
	justify-content: space-between;
}

._box .step_tit.radius{
	display: grid;
	grid-template-columns: repeat(var(--2-1), 1fr);
	align-items: center;
	gap: var(--s2);
	padding-left: 10%;
	padding-right: 10%;
}
._box ._borderbox{
	border: solid 4px var(--c-palegreen);
	padding: var(--s3);
	border-radius: 0 0 var(--s3) var(--s3);
}

._box._gridbox ._step2{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
}

._box._gridbox h5{
	text-align: center;
}

._box._gridbox .bullets{
	font-size: var(--f14);
}

/* ===================================================================================
b_customer
====================================================================================== */
#b_customer .cont_area figcaption{
	font-size: var(--f18);
	margin-bottom: .5em;
	font-weight: bold;
} 

/* ===================================================================================
invoice のページ
====================================================================================== */

#b_invoice .portal-inner{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s3);
	align-items: center;
}


@media (max-width: 767px) {
	#b_invoice .portal-inner{
		grid-template-columns: 1fr;
		gap: var(--s5);
	}
}

#b_invoice .portal-inner ._point{
	display: grid;
	gap: var(--s5);
}

#b_invoice .portal-inner ._point ._explanation{
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s3);
}

#b_invoice .portal-inner ._point ._explanation h4{
	background: var(--c-green);
	color: var(--c-menu);
	padding: var(--s3);
	border-radius: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
}

#b_invoice .portal-inner ._point ._explanation h5{
	color: var(--c-green);
	font-weight: 800;
}

#b_invoice .portal-inner ._point h5 span{
	font-size: var(--f24);
}

#b_invoice .portal-inner ._point p{
	font-weight: 600;
}

#b_invoice .portal-inner ._point span{
	font-size: var(--f14);
}

#b_invoice .titleBox.text_left{
	text-align: left;
}

#b_invoice .portal-inner ._client{
	position: relative;
}

#b_invoice .portal-inner ._client::after{
	position: absolute;
	content: "or";
	top: 50%;
	right: 0;
	font-size: var(--f24);
	font-weight: bold;
	background: var(--c-green);
	color: var(--c-menu);
	padding: var(--s3);
	border-radius: 100%;
	transform: translate(70%,-50%);
	display: flex;
	align-items: center;
	max-width: 30px;
	max-height: 30px;
}

@media (max-width: 767px) {
	#b_invoice .portal-inner ._client::after{
		top: auto;
		right: 50%;
		transform: translate(50%,10%);
	}
}

#b_invoice .portal-inner ._box{
	padding: var(--s3) var(--s7);
	max-width: 100%;
	background: var(--c-menu);
	border: solid 5px var(--c-yellow);
	border-radius: var(--s3);
	height: 100%;
}

#b_invoice .portal-inner ._box h5{
	text-align: center;
}
#b_invoice .portal-inner ._box h5 span{
	color: var(--c-green);
	font-size: var(--f22);
	font-weight: 800;
}

#b_invoice .portal-inner ._box p{
	padding: var(--s2);
	max-width: 100%;
	background: var(--c-green);
	color: var(--c-menu);
	border-radius: var(--s3);
	max-width: 300px;
	margin: auto;
	text-align: center;
	width: 100%;
	font-weight: 600;
	font-size: var(--f16);
}

#b_invoice .portal-flame2{
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	justify-content: space-around;
	padding: var(--s3);
	background: #FFF8F0;
	border: #02AD80 solid 5px;
	border-radius: var(--s3);
	text-align: center;
	align-items: center;
}

#b_invoice .portal-flame2 div{
	color: #02AD80;
}

#b_invoice .portal-flame2 div p{
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
}

#b_invoice .portal-flame2 div p:before, .portal-flame2 div p:after {
	border-top: 3px solid;
	content: "";
	width: 6em;
}
	
#b_invoice .portal-flame2 div p:before {
	margin-right: 0.5em; 
}

#b_invoice .portal-flame2 div p:after {
	margin-left: 0.5em; 
}

#b_invoice .portal-flame2 div h2{
	font-size: var(--f32);
	font-weight: bold;
	transform: scale(1.5);
}

#b_invoice .bt_st1.portal-green a{
	color: var(--c-menu);
	background: #02AD80;
	border: #02AD80;
	border: solid 2px #02AD80;
}
#b_invoice .bt_st1.portal-green a:hover{
	background-color: #fff;
	color: #02AD80;
}