select {
	width: 490px;
}
ul {
	border: 1px solid #ccc;
	padding: 40px;
	margin-bottom: 60px;
}
li,
.wrapper > div {
	display: block;
	overflow: hidden;
	padding: 20px 0;
	margin-bottom: 10px;
}
li:first-child {
	padding-top: 0;
}
li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
li>span {
	display: inline-block;
	vertical-align: middle;
}
li>span:nth-child(1),
.item_name {
	display: block;
	vertical-align:  top;
	background: #eee;
	padding: 5px 10px;
	margin-bottom: 20px;
}
li>span:nth-child(2) {
	display: block;
}
.err {
	display:block;
	color: red;
}
.notes {
	display: block;
	font-size: 16px;
	margin-bottom: 20px;
}
input[type="text"] {
	font-size: 24px;
	margin-right: 10px;
	height: 32px;
	width: 228px;
}
input[name="st_ymd"] {
	width: 144px;
}
input:disabled,
input:disabled + label,
select:disabled,
.calculate:disabled {
	cursor: not-allowed;
}
.consolidate_wrap div,
th.bonus_amt,
.bonus_wrap .bonus_amt,
.bonus_wrap .bonus_m {
	display: flex;
	flex-flow: column;
}
.consolidate_wrap div {
	padding-bottom: 20px;
}
.rate_style input {
	width: 188px;
}
select {
	font-size: 20px;
	width: 480px;
}
span.req {
	background: #e4017f;
	border-radius: 3px;
	color: #fff;
	font-size: 0.8em;
	margin: 0 5px;
	padding: 1px 5px;
}
.wrapper {
	display: grid;
}
.btn_area {
	text-align: center;
	margin: 10px 0;
}
.btn_area button {
	width: 280px;
	font-size: 24px;
}
td {
	text-align: right;
}
td.rate_variable {
	text-align: left;
}
.full_payment_table {
	margin-top: 16px;
}
.full_payment_table > p {
	margin: 0;
}
.top_btn_area {
	text-align: right;
	margin-bottom: 20px;
}
.other_link {
	margin-bottom: 10px;
}
.other_link a {
	text-decoration: underline;
	color: blue;
	margin-right: 20px;
}
button.availablearea {
	font-weight: bold;
	border-radius: 0;
	color: #fff;
	background: #f79646;
	width: 230px;
	height: 40px;
	font-size: 14px;
}
button.availablearea:hover {
	background-color: #f60;
}
button.calculate {
	text-indent: 30px;
	min-height: 30px;
	background: url(../img/ico-calc.png) no-repeat 50px 12px #f79646;
	font-weight: normal;
}
button.calculate:hover {
	background-color: #f60;
}
button.calculate:disabled {
	background-color: #dddddd;
}
button.retype {
	background-color: #f79646;
	display: inline-block;
	text-align: center;
	width: 290px;
	margin: 0 auto;
	height: 60px;
	vertical-align: top;
	padding-left: 60px;
	min-height: 30px;
	background: url(../img/ico-recalc.png) no-repeat 50px 14px #f79646;
	border-radius: 5px;
	color: #fff;
}
.read_only {
	background-color: #e9e9e9;
	cursor: not-allowed;
}
label {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 0;
	height: 60px;
	width: 240px;
	background-color: #dfdfdf;
	border-radius: 5px;
	float: left;
	text-align: center;
}
input[type="radio"] {
	display: none;
}
input[type="radio"]:checked+label {
	color: white;
	background-color: #0068bd;
}
input[type="radio"]:disabled + label {
	color: white;
	background-color: #dddddd;
}
.check_area input[type=checkbox] {
	vertical-align: middle;
	width: 40px;
	height: 30px;
}
.check_area {
	/* チェックボックス全体：非活性の見た目 */
	&:has(input[type=checkbox]:disabled){
		opacity: 0.6;
		-webkit-opacity: 0.6;
	}
}
.check_area .check_area_inner {
	display: flex;
}
.check_area .check_area_inner,
.check_area .check_area_inner div {
	padding: 0;
}
.check_area .check_area_inner div:nth-child(1) {
	width: 40px;
}
.select_num {
	width: 240px;
}
.notes a {
	text-decoration: underline;
	color: blue;
}

/*****
 * 試算結果のテーブルの設定
 ******/
table {
	width: 100%;
	border-collapse: collapse;
}
tr,td,th {
	font-weight: normal;
	border: 1px solid #f0f0f0;
	padding: 5px;
	text-align: center;
}
th {
	background-color: #0068bd;
	color: #fff;
}
table th span {
	color: #fff;
}
tr.exchange_off td {
	background-color: #f8e1e1;
}
tr.exchange_on td {
	background-color: #d6f1e5;
}

@media only screen and (max-width: 1080px) {
	ul {
		padding: 10px 10px;
	}
	.input_ctrl {
		width: auto;
		padding: 10px 10px;
	}
	.top_btn_area {
		width: 100%;
	}
	input[type="text"] {
		width: 80%;
		font-size: 1.4rem;
	}
	select {
		width: 100%;
		font-size: 13px;
	}
	label {
		font-size: 1rem;
		width: 49%;
		height: auto;
		min-height: 3rem;
	}
	li>span:nth-child(1), .item_name {
		font-size: 1rem;
	}
	.notes,
	.notes a {
		font-size: 0.8rem;
		line-height: normal;
	}
	.rate_style input {
		width: 80%;
	}
	.rate_style td {
		text-align: left;
	}
	.select_num {
		width: 50%;
	}
	.btn_area button {
		font-size: 1.6rem;
	}
	button.availablearea {
		font-size: 0.8rem;
		padding: 5px 10px;
		width: auto;
		height: auto;
	}
	.check_area .check_area_inner div:nth-child(2) {
		width: calc(100vw - 40px);
	}
}
@media only screen and (max-width: 400px) {
	button.home,
	button.clear,
	button.availablearea {
		font-size: 0.7rem;
		padding: 5px 5px;
		width: auto;
		height: auto;
	}
}