body { background: #0b0b0b; color: #fff; font-family: 'Noto-Sans-JP-Regular'; }

.btn { text-align: center; padding: 0 0 10px; }
.btn a,
.btn input[type="submit"] {
	background: #fff;
	text-decoration: none;
	display: inline-block;
	color: #fff;
	font-size: 16px;
	width: 100%;
	max-width: 260px;
	border-radius: 100px;
	height: 45px;
	line-height: 45px;
	background: #ce1e64;
	text-align: center;
	border: none;
}
.btn .gray { background: #888888; }

.iframe_inner { margin: auto; width: 100%; padding: 50px 4%; box-sizing: border-box; max-width: 720px; }
.iframe_inner h1 { text-align: center; padding: 0 0 20px; font-size: 18px; }
.iframe_inner h3 { background: #262626; padding: 20px 4%; font-size: 14px; }

.form_inner { padding: 20px 4% 30px; }
.flow { display: flex; text-align: center; position: relative; padding: 0 0 30px; margin: 10px 0 0; }
.flow:before { content: ""; width: 75%; height: 2px; background: #282728; position: absolute; top: 4px; left: 0; right: 0; margin: auto; }
.flow li { width: 25%; font-size: 14px; line-height: 1.4; position: relative; padding: 25px 0 0; }
.flow li.on { color: #ce1e64; }
.flow li:before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: #282728; position: absolute; left: 0; right: 0; top: 0; margin: auto; }

#credit .flow:before { background: linear-gradient(90deg, #ce1e64 0, #ce1e64 33%, #282728 33%, #282728 100%); }
#confirm .flow:before { background: linear-gradient(90deg, #ce1e64 0, #ce1e64 66%, #282728 66%, #282728 100%); }
#payment.finish .flow:before { background: linear-gradient(90deg, #ce1e64 0, #ce1e64 100%, #282728 100%, #282728 100%); }

.flow li.on:before { background: #ce1e64; }

input[type="text"],
input[type="password"] {
	border: none;
	color: #fff;
	background: #303030;
	width: 100%;
	box-sizing: border-box;
	border: none;
	font-size: 14px;
	width: 100%;
	padding: 12px;
	box-sizing: border-box;
	margin: 10px 0 0;
}
.alert span { color: #FF3939; padding: 0 0 5px; }