@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
/* ----------------------------------------
	content06
---------------------------------------- */

div#slider_home{
	z-index:999;
	max-width: 1180px;margin: 0 auto;padding: 30px 10px 50px;
}

div#slider_home .slider_case{max-width:100%;margin: 0 auto;}

div#slider_home .slick-slider{position: relative;display: block;}

div#slider_home .slick-list{
    position: relative;
    display: block;margin: 0;padding: 0;
    overflow: hidden;
}

div#slider_home .slick-track{
	position: relative;top: 0;left: 0;
	display: block;
}

div#slider_home .slick-slide{
	display: none;
	float: left;
	text-align: center;
}

div#slider_home .draggable{cursor: grab;}

div#slider_home .slick-initialized .slick-slide{display: block;}

div#slider_home .slick-dots{
	display: flex;justify-content: center;
	padding: 20px 0 0;
}
	
div#slider_home .slick-dots li{
	width: 10px;height: 10px; margin: 0 10px;
	background-color: #e6bbb8;
	border-radius: 50%;
	cursor: pointer;
}
div#slider_home .slick-dots li.slick-active{background-color: #db0016;}
div#slider_home .slick-dots li button{text-indent: -9999px;}
	
	div#slider_home div.slider_home_01 img,
	div#slider_home div.slider_home_02 img,
	div#slider_home div.slider_home_03 img{width: 100%;height: auto;}
	

/* ----------------------------------------
	news
---------------------------------------- */
	
	div.news{max-width: 1180px; margin: 0 auto; padding: 0 10px 67px;}
	
	div.news h2{
		position: relative;
		padding: 0 0 10px;
		border-bottom: #cccccc 4px solid;
		font-size: 24px;font-weight: normal;text-align: center;
	}
	div.news h2::after{
		content: "";
		position: absolute;bottom: 2px;left: 0;right: 0;
		display: block;width: 100%;height: 2px;
		background-color: #cccccc;
	}
	
	div.news dl{
		display: flex;
		max-width: 1160px; margin: 0 auto;padding: 20px 0 15px;
		border-bottom: #eeeeee 1px dotted;
	}
	div.news dl dt{
		width: 155px; padding: 0 0 0 20px;
		color: #db0016; font-size: 14px;font-weight: normal;
	}
	div.news dl dd a:hover{text-decoration: underline;}
	
	div.news > a{
		position: relative;
		display: block;width: 260px; height: 30px; margin: 23px auto 0;padding: 3px 0 0;box-sizing: border-box;
		background-color: #999999;
		border-radius: 5px;
		color: #ffffff; font-size: 14px;text-align: center;
	}
	div.news > a::after{
		content: "";
		position: absolute; top:0; bottom:0;left: 62px;
		display: block;width: 8px; height: 8px;margin: auto;
		border-top: #ffffff 2px solid;
		border-right: #ffffff 2px solid;
		transform: rotate(45deg);
	}
	div.news > a:hover{opacity: 0.8;}
	
	
/* ----------------------------------------
	banner_links
---------------------------------------- */
	
	div.banner_links{
		display: flex;flex-wrap: wrap; justify-content: center;
		max-width: 1180px; margin: 0 auto 40px; padding: 60px 10px 25px;
		background: url("../images/common/bg_diagonal.png") repeat left top;
	}
	
	div.banner_links dl{width: 460px; padding: 0 50px;}	
	div.banner_links dl dt a:hover{opacity: 0.8;}
	div.banner_links dl dd{padding: 5px 0 0; font-size: 15px;text-align: center;}

	
/* ----------------------------------------
	loan
---------------------------------------- */
	
	div.loan{padding: 80px 0 50px;background: #db0016;}
	
	div.loan h2{
		padding: 0 0 40px;
		color: #ffffff; font-size: 30px;font-weight: bold;text-align: center;
	}
	
	div.loan ul{
		display: flex;flex-wrap: wrap; justify-content: center;
		max-width: 1200px; margin: 0 auto;
	}
	div.loan ul li{width: 380px;padding: 0 10px 20px;}
	
	div.loan ul li a{
		display: block; width: 100%;padding: 35px 10px 10px;box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 5px;
	}
	div.loan ul li a:hover{opacity: 0.95;}
	div.loan ul li a h3{
		padding: 0 0 25px;
		border-bottom: #e83928 2px solid;
		font-size: 22px;font-weight: bold;text-align: center;line-height: 1.4;
	}
	div.loan ul li a p{padding: 15px 8px 25px;line-height: 28px;}
	div.loan ul li a img{width: 100%;height: auto;}
	div.loan ul li a div {
		margin: 20px auto 15px;
		text-align: center;
		padding: 5px;
		background: #e83928;
		color: #FFF;
		display:block;
		width: 50%;
		font-weight:bold;
		letter-spacing: 0.1em;
		box-shadow: 0 3px #ba2416;
	}
	
	
/* ----------------------------------------
	document_support
---------------------------------------- */
	
	div.document_support{
		display: flex;flex-wrap: wrap;justify-content: center;
		padding: 50px 0 0;
	}
	
	div.document_support > div{width: 580px;padding: 0 10px 20px;}
	
	div.document_support > div h2{
		position: relative;
		margin: 0 0 20px; padding: 0 0 10px;
		font-size: 26px;font-weight: bold;text-align: center;
		border-bottom: #e83928 4px solid;
	}
	div.document_support > div h2::after{
		content: "";
		position: absolute;bottom: 2px;left: 0;right: 0;
		display: block;width: 100%;height: 2px;
		background-color: #e83928;
	}
	
	div.document_support > div div{
		height: 300px; padding: 25px 20px 0;box-sizing: border-box;
		border: #eeeeee 1px solid;
	}
	div.document_support > div.document div{background: url("../images/home/illust_document.png") no-repeat 400px 50px;}
	div.document_support > div.support div{background: url("../images/home/illust_support.png") no-repeat 382px 58px;}
	
	div.document_support > div.document ul{height: 190px;}
	div.document_support > div.document ul li{
		position: relative;
		padding: 0 0 0 28px;
		font-size: 20px;font-weight: bold;
	}
	div.document_support > div.document ul li::after{
		content: "";
		position: absolute; top:13px; left: 10px;
		display: block;width: 8px; height: 8px;
		background-color: #e83928;
	}
	
	div.document_support > div.support p{
		width: 280px; height: 190px;padding: 3px 0 0;
		line-height: 28px;
	}
	
	div.document_support > div div a{
		position: relative;
		display: block;width: 420px; height: 40px; margin: 0 auto;padding: 5px 0 0;box-sizing: border-box;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
		border: #cccccc 1px solid;border-radius: 5px;
		font-size: 16px; font-weight: bold;text-align: center;
	}
	div.document_support > div div a::after{
		content: "";
		position: absolute; top:0; bottom:0;right: 13px;
		display: block;width: 9px; height: 9px;margin: auto;
		border-top: #000000 3px solid;
		border-right: #000000 3px solid;
		transform: rotate(45deg);
	}
	div.document_support > div div > a:hover{opacity: 0.8;}

}/* End PC */



/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
/* ----------------------------------------
	content06
---------------------------------------- */

div#slider_home{
	z-index:999;
	width: 100%;margin: 0 auto;padding: 10px 10px 30px;box-sizing: border-box;
}

div#slider_home .slider_case{max-width:100%;margin: 0 auto;}

div#slider_home .slick-slider{position: relative;display: block;}

div#slider_home .slick-list{
    position: relative;
    display: block;margin: 0;padding: 0;
    overflow: hidden;
}

div#slider_home .slick-track{
	position: relative;top: 0;left: 0;
	display: block;
}

div#slider_home .slick-slide{
	display: none;
	float: left;
	text-align: center;
}

div#slider_home .draggable{cursor: grab;}

div#slider_home .slick-initialized .slick-slide{display: block;}

div#slider_home .slick-dots{
	display: flex;justify-content: center;
	padding: 20px 0 0;
}
	
div#slider_home .slick-dots li{
	width: 10px;height: 10px; margin: 0 10px;
	background-color: #e6bbb8;
	border-radius: 50%;
	cursor: pointer;
}
div#slider_home .slick-dots li.slick-active{background-color: #db0016;}
div#slider_home .slick-dots li button{text-indent: -9999px;}
	
	div#slider_home div.slider_home_01 img,
	div#slider_home div.slider_home_02 img,
	div#slider_home div.slider_home_03 img{width: 100%;height: auto;}
	
	
/* ----------------------------------------
	news
---------------------------------------- */
	
	div.news{margin: 0 auto; padding: 0 10px 50px;}
	
	div.news h2{
		position: relative;
		padding: 0 0 10px;
		border-bottom: #cccccc 4px solid;
		font-size: 7vw;font-weight: normal;line-height: 1.4; text-align: center;
	}
	div.news h2::after{
		content: "";
		position: absolute;bottom: 2px;left: 0;right: 0;
		display: block;width: 100%;height: 2px;
		background-color: #cccccc;
	}
	
	div.news dl{
		margin: 0 auto;padding: 20px 0 15px;
		border-bottom: #eeeeee 1px dotted;
	}
	div.news dl dt{
		padding: 0 0 0;
		color: #db0016; font-size: 14px;font-weight: normal;
	}
	div.news dl dd a{text-decoration: underline;}
	
	div.news > a{
		position: relative;
		display: block;width: 260px; height: 50px; margin: 23px auto 0;
		background-color: #999999;
		border-radius: 5px;
		color: #ffffff; font-size: 16px;line-height: 50px; text-align: center;
	}
	div.news > a::after{
		content: "";
		position: absolute; top:0; bottom:0;left: 62px;
		display: block;width: 8px; height: 8px;margin: auto;
		border-top: #ffffff 2px solid;
		border-right: #ffffff 2px solid;
		transform: rotate(45deg);
	}
	
	
/* ----------------------------------------
	banner_links
---------------------------------------- */
	
	div.banner_links{
		padding: 50px 10px 20px;
		background: url("../images/common/bg_diagonal.png") repeat left top;
	}
	
	div.banner_links dl{padding: 0 0 30px;}	
	div.banner_links dl dt a img{width: 100%;}
	div.banner_links dl dd{padding: 5px 0 0; font-size: 15px;text-align: center;}

	
/* ----------------------------------------
	loan
---------------------------------------- */
	
	div.loan{padding: 50px 0 20px;background: #db0016;}
	
	div.loan h2{
		padding: 0 0 20px;
		color: #ffffff; font-size: 7vw;font-weight: bold;text-align: center;
	}
	
	div.loan ul li{padding: 0 10px 30px;}
	
	div.loan ul li a{
		display: block; width: 100%;padding: 25px 10px 10px;box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 5px;
	}
	div.loan ul li a:hover{opacity: 0.95;}
	div.loan ul li a h3{
		padding: 0 0 17px;
		border-bottom: #e83928 2px solid;
		font-size: 22px;font-weight: bold;text-align: center;line-height: 1.4;
	}
	div.loan ul li a p{padding: 15px 8px;line-height: 28px;}
	div.loan ul li a img{width: 100%;height: auto;}
	div.loan ul li a div {
		margin: 20px auto 15px;
		text-align: center;
		padding: 5px;
		background: #e83928;
		color: #FFF;
		display:block;
		width: 80%;
		font-weight:bold;
		letter-spacing: 0.1em;
		box-shadow: 0 3px #ba2416;
	}

	
	
/* ----------------------------------------
	document_support
---------------------------------------- */
	
	div.document_support{padding: 40px 0 0;}
	
	div.document_support > div{padding: 0 10px 30px;}
	
	div.document_support > div h2{
		position: relative;
		margin: 0 0 10px; padding: 0 0 10px;
		font-size: 26px;font-weight: bold;text-align: center;
		border-bottom: #e83928 4px solid;
	}
	div.document_support > div h2::after{
		content: "";
		position: absolute;bottom: 2px;left: 0;right: 0;
		display: block;width: 100%;height: 2px;
		background-color: #e83928;
	}
	
	div.document_support > div div{
		padding: 15px 10px;box-sizing: border-box;
		border: #eeeeee 1px solid;
	}
	div.document_support > div.document div{background: url("../images/home/illust_document.png") no-repeat right 10px top 35px; background-size: 80px auto;}
	div.document_support > div.support div{background: url("../images/home/illust_support.png") no-repeat right 10px top 45px; background-size: 100px auto;}
	
	div.document_support > div.document ul{padding: 0 0 15px;}
	div.document_support > div.document ul li{
		position: relative;
		padding: 0 0 0 25px;
		font-size: 18px;font-weight: bold;
	}
	div.document_support > div.document ul li::after{
		content: "";
		position: absolute; top:13px; left: 10px;
		display: block;width: 8px; height: 8px;
		background-color: #e83928;
	}
	
	div.document_support > div.support p{
		padding: 0 110px 15px 0;
		line-height: 28px;
	}
	
	div.document_support > div div a{
		position: relative;
		display: block;width: 100%; height: 50px; margin: 0 auto;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
		border: #cccccc 1px solid;border-radius: 5px;
		font-size: 16px; font-weight: bold;line-height: 50px; text-align: center;
	}
	div.document_support > div div a::after{
		content: "";
		position: absolute; top:0; bottom:0;right: 13px;
		display: block;width: 9px; height: 9px;margin: auto;
		border-top: #000000 3px solid;
		border-right: #000000 3px solid;
		transform: rotate(45deg);
	}	
	
	
}/* End SP */