@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

/* 共通
================================================== */
* {margin: 0; padding: 0;}
.pc_no{display:none;}
*::after,
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;	box-sizing: border-box;}
ul{padding: 0; margin: 0;}
li{padding: 0; margin: 0; list-style-type:none;}
img{border:none;}
a {outline: none;}
a:focus, *:focus {  outline:none; }

a img:hover{filter: alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;}

.ff_mnc{
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
	font-weight:600;
}
.ff_gsk{
	font-family: 'Roboto', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
}
.text-center{text-align: center;}
img.w100{width:100%; height:auto}
.fw_bold{font-weight:bold}

.bk_grn{background:#00a566}
.bk_gray{background:#f1f1f1}

.fc_navy{color:#2b3568}

.fs_14{font-size:14px}

/* スクロールCSS
================================================== */
.fade-in {
  opacity: 0;
  transition-duration: 600ms;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-down {
  transform: translate(0, -50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.fade-in-right {
  transform: translate(50px, 0);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* メイン
================================================== */
html { scroll-behavior: smooth;}
body {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	color: #333333;
	font-size: 16px;
	-webkit-text-size-adjust: none;
	line-height: 1.7em;
	background : url("../images/back_dot.png") repeat top center;
}
#main_wp{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	background:#fff;
	box-shadow: 0 15px 15px rgba(0,0,0,0.2);
}
#header_wp{
	background : #00a566;
	position: relative;
	padding-bottom: 5%;
}
img.hd_conditions{
	width:55%;
	height:auto;
	position: absolute;
	top:78%;
	left:10%;
}
/* 用途
================================================== */
.loan-use{
	width:80%;
	margin:0 auto;
	padding:50px 0;
	text-align:center;
}

.loan-use h2{margin-bottom:0.8em;}
.loan-use h2 span{
	font-size:28px;
	padding:0 0.3em 0.3em;
	border-bottom:dotted 4px #ffe100;
	color:#ffe100;
	letter-spacing: 0.05em;
}
.loan-use h3{
	background-image:url("../images/line-wt_l.png"),url("../images/line-wt_r.png");
	background-repeat:no-repeat, no-repeat;
	background-size:40px auto, 40px auto;
	background-position: left bottom, right bottom;
	font-size:35px;
	color:#fff;
	display: inline-block;
	padding:0.5em 1.7em 0;
	line-height: 1.4;
}
.loan-use h3 span{font-size:28px;}

.loan-use ul{
	width:100%;
	max-width:780px;
	margin:30px auto 0;
	display:flex;
	justify-content:space-between;
}
.loan-use ul li{
	width:20%;
	color:#f7efb4;
	font-size: 16px;
	line-height: 1.4em;
}
.loan-use ul li img{
	display: block;
	width:90%;
	max-width:70px;
	height:auto;
	margin:0 auto 0.3em;
}

.btn_box{
	width:100%;
	background : url("../images/fukidashi_grn.png") no-repeat top center;
	background-size : 100%;
	padding:70px 0;
}
.btn_box ul{
	width:80%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items: flex-end;
}
.btn_box ul li{width:48%; text-align:center;}
.btn_box ul li p{
	background-image:url("../images/line-ylw_l.png"),url("../images/line-ylw_r.png");
	background-repeat:no-repeat, no-repeat;
	background-size:20px auto, 20px auto;
	background-position: left bottom, right bottom;
	font-size:18px;
	color:#2b3568;
	padding:0 1.7em 0;
	margin-bottom:0.4em;
	display: inline-block;
}
@media screen and (max-width: 1000px) {
	.loan-use, .btn_box ul{width:90%;}
	.loan-use ul li img{max-width:60px;}
	.loan-use h3{font-size:30px;}
	.btn_box ul li p{font-size:16px;}
}
/* ポイント
================================================== */
.diawt_bk{
	background : url("../images/diawt_pc.jpg") no-repeat top center;
	background-size:100%;
	padding:90px 0 50px;
}
.loan_point{
	width:85%;
	margin:0 auto;
	padding:70px 0 40px;
	position: relative;
}
.loan_point h2 img{
	width:75%;
	max-width:400px;
	height:auto;
	position: absolute;
	top:-8%;
	right: 0;
  	left: 0;
	margin: 0 auto;
}
.loan_pt_inner{
	width:80%;
	margin:20px auto;
	display:flex;
	justify-content:space-between;
	padding-left:5%;
}
.loan_pt_img{width:17%}
.loan_pt_img img{
	width:100%;
	height:auto;
	border-radius:50%;
}
.loan_pt_text{width:80%; padding-top:10px;}
.loan_pt_text h3{
	background: url("../images/check.png") no-repeat left top 0.1em;
	background-size: 30px auto;
	font-size:22px;
	color:#01a369;
	margin-bottom:0.5em;
	padding:0.2em 0 0.2em 1.8em;
}
.loan_pt_text p{color:#2b3568;}
img.point_illust01{
	width:13%;
	max-width:120px;
	height:auto;
	position: absolute;
	left:-4%;
	bottom:0;
}
/* 金利
================================================== */
.kinri_wp{
	width:85%;
	margin:30px auto;
	text-align: center;
}
p.kr_subtitle{
	color:#2b3568;
	font-size:24px;
	margin-bottom:0.8em;
}
h2.kr_title{
	color:#01a369;
	font-size:36px;
}
.kinri_01{
	width:100%;
	margin:30px auto 15px;
	padding:30px 50px 50px;
}
.kinri_01 ul{
	width:100%;
	margin-bottom:0.5em;
	display:flex;
	justify-content:space-between;
}
.kinri_01 ul li{width:31%}
.kinri_01 p{text-align: left;}
.kinri_02{
	width:100%;
	padding:60px 50px 30px;
	position: relative;
}
img.kinri_arw{
	width:50%;
	max-width:230px;
	height:auto;
	position: absolute;
	top:-25%;
	right: 0;
  	left: 0;
	margin: 0 auto;
}
.kinri_eco{
	background:#fff;
	border: solid 1px #00a566;
	padding: 20px 30px;
	text-align: center;
	display:flex;
	justify-content: center;
	align-items: center;
}
.eco_text{
	width:73%;
}
.eco_pd{
	background: url("../images/arw_pc.png") no-repeat right 2em center;
	background-size:8px auto;
}
span.sup{
	vertical-align: super;
	font-size: 80%;
	margin-right:0.2em
}
.eco_text h3{
	color:#01a369;
	font-size:20px;
	margin-bottom: 0.2em;
}
.eco_ps{width:27%; text-align: left;}
.eco_ps img{width:100%; max-width:160px; height:auto}
@media screen and (max-width: 1100px) {
	.eco_text{width:85%;}
	.eco_ps{width:15%}
	.eco_pd{
		background: url("../images/arw_pc.png") no-repeat right 1em center;
		background-size:8px auto;
		padding-right:50px
	}
}
@media screen and (max-width: 1000px) {
	.eco_text{text-align: left;}
	.eco_text h3{font-size:18px;}
}
/* 比較
================================================== */
.diabl_bk{
	width:100%;
	margin:70px auto 0;
	background: url("../images/diabl_pc.jpg") no-repeat center;
	background-size: 100%;
	padding:50px 60px;
	text-align: center;
}
@media screen and (max-width: 1190px) {
	.diabl_bk{background-size: auto 100%;}
}
.diabl_bk h2{
	background-image:url("../images/line-wt_l.png"),url("../images/line-wt_r.png");
	background-repeat:no-repeat, no-repeat;
	background-size:30px auto, 30px auto;
	background-position: left bottom, right bottom;
	font-size:36px;
	color:#fff;
	padding:0 1.7em 0;
	margin-bottom:0.8em;
	display: inline-block;
	line-height: 1.4em;
}
.diabl_bk h2 span{
	font-size:30px;
	color:#ffe100;
}
p.hikaku_p{
	font-size:22px;
	color:#fff;
	margin-bottom:0.7em;
}

.diabl_bk img{
	width:100%;
	max-width:1050px;
	height:auto;
}
p.hikaku_tkp{
	font-size:43px;
	color:#ffe100;
	padding:0 0.2em 0.5em;
	border-bottom:dotted 4px #ffe100;
	display: inline-block;
	margin-top:0.8em;
}
p.hikaku_tkp span{font-size:60px; margin-left:0.2em}

@media screen and (max-width: 1000px) {
	.diabl_bk h2{font-size:30px;}
	.diabl_bk h2 span{font-size:24px;}
	p.hikaku_p{font-size:18px;}
	p.hikaku_tkp{font-size:36px;}
	p.hikaku_tkp span{font-size:46px}
}

.diawt-m_bk{
	width:100%;
	margin:0 auto;
	background: url("../images/diawt-m_pc.jpg") #eaeaea no-repeat top center;
	background-size: 100%;
	padding:40px 0;
}
.hikaku_box{
	width:85%;
	margin:50px auto;
	position: relative;
	background:#fff;
	padding:20px 40px;
	display:flex;
	justify-content:space-between;
}
img.h-point{
	width:10%;
	height:auto;
	position: absolute;
	top:-23%;
	left:-2%;
}
.hikaku_gb, .hikaku_dr{width:47%}
.hikaku_gb h3{
	background:#cfe7df;
	text-align: center;
	font-size:22px;
	color:#01a369;
	padding:0.5em;
}
.hikaku_dr h3{
	background:#999999;
	text-align: center;
	font-size:20px;
	color:#fff;
	padding:0.5em;
	letter-spacing: -0.03em;
}
.hikaku_inner{
	padding:1em 0.3em 0 0;
	display:flex;
	justify-content:space-between;
}
.hikaku_mark{width:12%;}
.hikaku_text{width:83%; padding-top:0.3em}
.hikaku_text h4{font-size:18px; margin-bottom:0.4em}
.hikaku_last{width:100%; text-align:center; margin-bottom:70px;}
.hikaku_last h2 img{
	width:90%;
	max-width:750px;
	height:auto;
	margin-bottom:1em
}
p.hikaku_lpt{
	font-size:38px;
	letter-spacing: -0.01em;
	line-height:1.4em;
	margin-bottom:0.5em;
}
p.hikaku_lpt span.hp_01{font-size:35px}
span.marker {background: linear-gradient(transparent 70%, #f9f170 70%);}
p.hikaku_spt{font-size:24px;}

/* シミュレーション
================================================== */
.simulation_bk{
	width:100%;
	margin:0 auto;
	background: url("../images/simulation_bk.jpg") #e4e4e6 no-repeat top center;
	background-size: 100%;
	padding:100px 0 50px;
	position: relative;
}
img.simulation_l_btn{
	width:90%;
	max-width:600px;
	height:auto;
	display: block;
	margin:0 auto 20px;
}
.simulation_inner{
	width:85%;
	margin:0 auto;
	background:rgba(255,255,255,0.9); 
	padding:70px 50px 50px;
	position: relative;
}
.simulation_bk h2 img{
	width:60%;
	max-width:470px;
	height:auto;
	position: absolute;
	top:30px;
	right: 0;
  	left: 0;
	margin: 0 auto;
	z-index:99;
}
img.point_illust02{
	width:10%;
	max-width:90px;
	height:auto;
	position: absolute;
	right:2%;
	bottom:-10%;
}
ul.simu_list{
	width:100%;
	max-width:650px;
	margin:0 auto;
}
ul.simu_list li{
	background:#fff;
	border: solid 1px #01a369;
	position:relative;
	padding:20px;
	transition:all .3s;
	margin-bottom:0.7em;
}
ul.simu_list li h3{
	background: url("../images/arw_grn.png") no-repeat left center;
	background-size: 30px auto;
	padding:5px 0 5px 40px;
	margin-botom:0.4em;
	font-size:20px;
	color:#01a369;
}
ul.simu_list li p{font-size:14px}
ul.simu_list li a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
ul.simu_list li:hover{
	cursor:pointer;
	background:#d9e9e4;
}
.simu_btn{
	width:90%;
	max-width:600px;
	margin:70px auto 0;
	position: relative;
	text-align: center;
}
.ps_abs{
	position: absolute;
	bottom:-100px;
}
.simu_btn p{
	background-image:url("../images/line-nv_l.png"),url("../images/line-nv_r.png");
	background-repeat:no-repeat, no-repeat;
	background-size:15px auto, 15px auto;
	background-position: left bottom, right bottom;
	font-size:22px;
	padding:0 1.7em 0;
	margin-bottom:0.8em;
	display: inline-block;
}
/* シミュレーション別途css
================================================== */
.inputBox{background:#fff;}
.slider_info{
	background:#FF5900;
	font-size:14px;
	padding:3px 10px;
	color:#fff;
	border-radius:5px;
	font-style: normal;
	line-height: 1.4em;
}
.sliderBox p.lead{
	color:#01a369;
}
/* 4つのポイント
================================================== */
.point_wp{
	width:85%;
	margin:160px auto 70px;	
}
.point_inner{
	width:100%;
	margin:50px auto 0;
	display:flex;
	justify-content:space-between;
}
.pt_img{width:43%;}
img.ptw_img{width:100%; height:auto}
.pt_text{width:55%;}
.pt_text img.pt_icon{width:80px; height:auto}
.pt_text h2{
	font-size:23px;
	color:#01a369;
	margin-top:0.4em;
	margin-bottom:0.7em;
	padding:0 1em;
}
.pt_text p{padding:0 1.5em;}

/* 手続きの流れ
================================================== */
h2.step_title{font-size:30px; line-height: 1.5em;}
h2.step_title span{font-size:26px;}
.step_list{
	width:85%;
	margin:30px auto;
	display:flex;
	justify-content:space-between;
}
.step_inner{
	width:23%;
	background:#fff;
	text-align: center;
	color:#2b3568;
	padding-bottom:0.8em
}
img.step_no{width:100%; height:auto; margin-bottom:0.5em}
.step_inner h3{font-size:20px; margin-bottom:0.5em}
img.step_ic{width:45%; height:auto; margin-bottom:0.5em}
.step_inner p{font-weight:bold}
.detail_bk{
	width:100%;
	background:#f6f6f6;
	padding:70px 0;
}
.detail_wp{
	width:80%;
	margin:0 auto;
	text-align: center;
}
.detail_wp h2{font-size:34px; margin-bottom:0.7em; color:#01a369}
.detail_wp p.detail_jkn{font-size:17px; margin-bottom:1.0em}
/* 詳細アコーディオン
================================================== */
.open_title{
	background:#00a566;
	position: relative;
	cursor: pointer;
	transition: all .5s ease;
	padding:1em;
	color:#ffe100;
	font-size:26px;
	text-align: center;
	height:80px;
}
.open_title::before{
	position: absolute;
	right:57px;
	top:14%;
	content: url("../images/open_ic.png");
}
.open_title.close::before{
	position: absolute;
	right:57px;
	top:14%;
	content: url("../images/close_ic.png");
}
.detail_inner {
	display: none;
	background: #fff;
	padding: 0 50px 50px;
	text-align: left;
}
.detail_inner h3{
	font-size:23px;
	padding:40px 0 15px;
	color: #01a369;
}
.detail_inner .grn_pt{
	background: url("../images/grn_m.png") no-repeat left 0.5em top 0.4em;
	background-size: 15px auto;
	padding-left:30px;
	margin-botom:0.4em;
}
.dt_point{margin:5px 0 15px}
.detail_inner .gray_pt{
	background: url("../images/gray_m.png") no-repeat left 0.2em top 0.5em;
	background-size: 14px auto;
	padding-left:25px;
}
p.dtl_subpt{
	padding-left:0.5em;
	font-weight: bold;
	margin-top:1.0em;
	color:#314c7a;
}
.more_btn{margin-top:1em; margin-bottom:1em}
.more_btn a{
	background: url("../images/ylw_arw.png") #314c7a no-repeat right 1.2em center;
	background-size: 30px auto;
	padding:1em 4em 1em 1.5em;
	transition: .4s;
	color:#fff;
	text-decoration: none;
}
.more_btn a:hover{
	background: url("../images/ylw_arw.png") #2b3568 no-repeat right 1.2em center;
	background-size: 30px auto;
	text-decoration: none;
}
table.detail_tb{
	width:100%;
	border-collapse: collapse;
}
table.detail_tb th, table.detail_tb td {
	border: 1px solid #ccc;
	padding: 0.8em 1em;
}
table.detail_tb thead th{
	background:#e7ecf5;
	color:#314c7a;
	text-align: center;
}
table.detail_tb tbody th {font-weight: normal}
table.detail_tb tbody td{text-align: center; font-size:22px}
span.dtl_nen{font-size:20px; margin-right:0.2em;}
span.dtl_ml{margin-left:0.1em; font-size:90%;}
.tb_plus{width:100%; text-align: center; padding:0.5em 0}
.tb_plus img{ width:65px; height:auto; vertical-align: top;}
.detail_eco{
	width:100%;
	text-align: center;
	padding:1em;
	border: solid 1px #ccc;
}
.dteco_pt{font-size:17px;}
.dteco_nen{font-size:20px; margin-left:1.2em; margin-right:0.3em}
.dteco_mns{font-size:24px;}
.detail_subbox{
	background:#f6f6f6;
	padding:1em;
	width:100%;
	margin:35px auto 0;
}
.detail_subbox ul li{list-style-type: disc!important; margin-left:25px}

/* フッター
================================================== */
#footer_wp{
	width:100%;
	margin:0 auto;
	background: url("../images/footer-bk_pc.jpg") no-repeat top center;
	background-size: cover;
	padding:50px 0;
	color:#fff;
	text-align: center;
}
#footer_wp h2{font-size:28px; margin-bottom:1em; letter-spacing: 0.08em;}
#footer_wp h3{font-size:18px; margin-bottom:0.3em}
#footer_wp img.tel{
	width:60%;
	max-width:320px;
	height:auto;
	margin-bottom:0.4em
}
.footer_copy{
	width:100%;
	padding-top:20px;
	text-align: center;
	margin-bottom:95px;
}
.footer_copy img{
	width:35%;
	max-width:150px;
	height:auto;
	margin-bottom:0.8em
}
.footer_copy p{
	background:#00a566;
	font-size:12px;
	letter-spacing: 0.02em;
	color:#fff;
	padding:8px;
}


/* フッター固定バナー
================================================== */
.fixed-btn {
	width:100%;
	background:rgba(1,119,77,0.9); 
	position: fixed;
	z-index: 99999;
	bottom: 0;
	padding:1em;
	text-align: center;
	min-height:95px;
}
.fixed-btn ul{
	width:80%;
	max-width:800px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.fixed-btn ul li{
	width: 48%;
	padding:0;
}
.fixed-btn ul li img {
	width:100%;
	height:auto;
	vertical-align: top;
}



/*　clearfix */
.clearfix:after{
  content: " ";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix{
  min-height: 1px;
}
* html .clearfix{
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
