/* ===================================================================
CSS
 file name  :  loan.css
=================================================================== */
@media screen and (min-width: 769px) {
/* PC用のスタイル記述 */
/* =====================================
住宅ローンのこと本当に分かってる？
======================================== */
#loan p{
	margin-top: 20px;
}
#loan h4{
	color:#00306D;
	float:left;
	width:370px;
	margin-top:20px;
	font-size:18px;
}
#loan #text01{
	float:left;
	width:370px;
	margin-top:20px;
}
#loan #img01{
	float:right;
	width:300px;
	margin-top:30px;
}
#loan #text02{
	text-align:center;
	font-size:18px;
}
#loan #text03{
	float:left;
	width:450px;
	margin-top:30px;
}
#loan #text04{
	float:right;
	width:200px;
	margin-top:30px;
	text-align:center;
}
#loan #text04 a{
	display:block;
	margin-top:5px;
	color:#0085B2;
}
#loan #text04 a:hover{
	color:#0171FF;
}
#loan .red{
	color:#FF0000;
	font-size:22px;
}
#loan_simu{
	margin-top:20px;
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
}
#loan_simu li a{
	display:block;
	padding:10px 20px;
	border-bottom:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	text-decoration:none;
}
#loan_simu li a:hover{
	background:#DFE6EE;
}
#loan_simu li a span{
	font-weight:bold;
	font-size:120%;
}
/* =====================================
ローンシミュレーター
======================================== */
.lead{
	margin-top:20px;
}
.loan_table{
	border-top:1px solid #BBB;
	border-left:1px solid #BBB;
	margin-top:30px;
	font-size:90%;
}
.loan_table th{
	width:40%;
	text-align:left;
	padding:15px 20px;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#F6F6F8;
	vertical-align:top;
}
.sontoku_table th{
	width:60%;
}
.loan_table th.btn_area{
	width:100%;
	text-align:center;
	padding:15px 20px;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#E1E7FF;
	vertical-align:top;
}
.loan_table td{
	padding:15px 20px;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
}
.loan_table td li{
	float:left;
	width:50%;
	box-sizing:border-box;
	padding-right:20px;
}
/* 損得比較結果 */
.loan_table th .hikaku_table{
	border-top:1px solid #BBB;
	border-left:1px solid #BBB;
	margin-top:10px;
	font-size:90%;
}
.loan_table th .hikaku_table th{
	padding:10px 20px;
	width:50%;
	text-align:center;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#F6F6F8;
}
.loan_table th .hikaku_table td{
	padding:10px 20px;
	text-align:center;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#FFFFFF;
}
#loan_tel{
	margin-top:40px;
}
}
@media screen and (max-width: 768px) {
/* スマートフォン用のスタイル記述 */
/* =====================================
住宅ローンのこと本当に分かってる？
======================================== */
#loan p{
	margin:10px 20px;
}
#loan h4{
	color:#00306D;
	margin:10px 20px;
	font-size:120%;
}
#loan #text01{
	margin:10px 20px;
}
#loan #img01{
	margin:10px 20px;
	text-align:center;
}
#loan #text02{
	text-align:center;
	font-size:120%;
}
#loan #text03{
	margin:10px 20px;
	text-align:center;
}
#loan #text04{
	margin:10px 20px;
	text-align:center;
}
#loan #text04 a{
	display:block;
	margin-top:5px;
	color:#0085B2;
}
#loan .red{
	color:#FF0000;
	font-size:140%;
}
#loan_simu{
	border-left:1px solid #CCCCCC;
}
#loan_simu li a{
	display:block;
	padding:10px 20px;
	border-bottom:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	text-decoration:none;
}
#loan_simu li a:hover{
	background:#DFE6EE;
}
#loan_simu li a span{
	font-weight:bold;
	font-size:120%;
}
/* =====================================
ローンシミュレーター
======================================== */
.lead{
	margin:10px 20px;
}
#flow{
	margin:10px;
}
.loan_table{
	border-top:1px solid #BBB;
	margin-top:10px;
}
.loan_table th{
	display:block;
	text-align:left;
	padding:10px 20px;
	border-bottom:1px solid #BBB;
	background:#F6F6F8;
}
.loan_table th.btn_area{
	display:block;
	text-align:center;
	padding:10px 20px;
	border-bottom:1px solid #BBB;
	background:#E1E7FF;
}
.loan_table td{
	display:block;
	padding:10px 20px;
	border-bottom:1px solid #BBB;
}
.loan_table input{
	width:50%;
	font-size:120%;
	box-sizing:border-box;
}
.loan_table .btn_area input{
	width:30%;
	font-size:120%;
	box-sizing:border-box;
}
input.kikan_width{
	width:20%;
}
/* 損得比較結果 */
.loan_table th .hikaku_table{
	border-top:1px solid #BBB;
	border-left:1px solid #BBB;
	margin-top:10px;
}
.loan_table th .hikaku_table th{
	display:table-cell;
	padding:10px 20px;
	width:50%;
	text-align:center;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#F6F6F8;
}
.loan_table th .hikaku_table td{
	display:table-cell;
	padding:10px 20px;
	text-align:center;
	border-bottom:1px solid #BBB;
	border-right:1px solid #BBB;
	background:#FFFFFF;
	font-weight:normal;
}
#loan_tel{
	display:none;
}
}