@charset "utf-8";

.container {
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.intro {
	line-height: 1.6;
	text-align: center;
	margin: 1rem 0 2rem 0;
}
.intro > p > strong {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0.5rem 0;
}
.intro > p > span {
	font-size: 0.75rem;
}
h3 {
	display: inline-block;
	border-bottom: 0.25rem solid #f9fd00;
	font-weight: bold;
	margin: 1rem 0;
}
.brands {
	text-align: center;
	margin: 0.5rem 0 2rem 0;
	padding: 0;
}
.brands::after {
	content: "";
	display: block;
	clear: both;
}
.brands > li {
	list-style: none;
	float: left;
	width: calc(100% / 6);
	text-align: center;
}
.brands > li > img {
	width: auto;
	height: 1.5rem;
}
.badge {
	float: right;
	border-radius: 0;
	margin: 0.2rem 0 0.2rem 0.5rem;
}
.input-yen {
	ime-mode: disabled;
	text-align: right;
}
.ime-off {
	ime-mode: disabled;
}
hr {
	border-top: 0.25rem solid #DDD;
}
::-webkit-input-placeholder {
	color: #DDD !important;
}
::-moz-placeholder {
	color: #DDD !important;
}
:-moz-placeholder {
	color: #DDD !important;
}
:-ms-input-placeholder {
	color: #DDD !important;
}

.input-group > [name="card_number1"],
.input-group > [name="card_number2"],
.input-group > [name="card_number3"],
.input-group > [name="card_number4"] {
	text-align: center;
}
.input-group > .input-group-append > .input-group-text.no-style {
	background-color: transparent;
	border: none;
}
@media screen and (max-width: 500px) {
	.input-group > [name="card_number1"],
	.input-group > [name="card_number2"],
	.input-group > [name="card_number3"],
	.input-group > [name="card_number4"] {
		padding: 0.375rem 0.5rem;
	}
	.input-group > .input-group-append > .input-group-text.no-style {
		padding: 0.375rem 0.25rem;
	}
}