@charset "utf-8";

/**
 *
 *  業務用途のレンタカーはこんなに便利！  .sec04
 *
 */

/*--------------------------------------------------------------------------
	業務用途のレンタカーはこんなに便利！  .sec04
---------------------------------------------------------------------------*/
	.sec04 {
/*		background: linear-gradient(180deg, #EAEFF2BF, #EAEFF2BF, #EAEFF2, #EAEFF2, #EAEFF2, #EAEFF2BF);*/
		position: relative;
	}
	.sec04 .sec_bg {
		position: absolute;
		-webkit-background-size: cover;
		background-size: cover;
		width: 100%;
		height: 100%;
		opacity: 0.2;
	}
	
	.sec04 .title_sec .num {
	}
	.sec04 .title_sec .sub {
	}
	
	/* .previews */
	.sec04 .cont .previews {
/*		background: #EAEFF2BF;*/
	}
	section.sec04 .cont .previews ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		padding: 0 60px;
	}
	section.sec04 .cont .previews ul > div {
		width: 28%;
		min-width: 215px;
		background: #FFE200;
		border: 2px solid #0088DC;
		border-radius: 15px;
		padding: 20px 20px 15px;
		margin-bottom: 15px;
		-webkit-filter: drop-shadow(0px 7px 10px rgba(0, 64, 128, 0.15));
			-moz-filter: drop-shadow(0px 7px 10px rgba(0,64,128,0.15));
			-ms-filter: drop-shadow(0px 7px 10px rgba(0,64,128,0.15));
				filter: drop-shadow(0px 7px 10px rgba(0, 64, 128, 0.15));
	}
	section.sec04 .cont .previews .cont_icons {
		width: 100%;
		max-width: 350px;
		border-radius: 5px;
	}
	section.sec04 .cont .previews li {
		max-width: 350px;
		margin: auto;
		font-size: 2.2rem;
		font-weight: 600;
	}
	section.sec04 .cont .previews li p {
		display: inline-block;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		font-weight: 600;
		color: #0387D8;
		line-height: 2.4rem;
		text-align: center;
	}
	section.sec04 .cont .previews li p > span {
		display: inline-block;
		line-height: 1.35em;
	}
		
	/* .previews_image */
	.sec04 .cont img.cont_icons {
	}
	
	/* .btn_more */
	.sec04 .cont .btn_more a {
		background: #FFF;
	/*	background: #A2E07B;*/
	}

/* @pc wide **************************************************/
@media all and (min-width: 1626px){

	section.sec04 .cont .previews ul > div {
		width: 30%;
		min-width: 280px;
		padding: 20px 10px;
	}
}

/* @sp **************************************************/
@media all and (max-width: 1100px){
	section.sec04 .cont .previews li {
		max-width: 380px;
	}
	section.sec04 .cont .previews .cont_icons {
		width: 100%;
		max-width: 380px;
		border-radius: 5px;
	}
	section.sec04 .cont .previews ul > div {
		width: 40%;
		padding: 10px;
	}
}
/* @sp **************************************************/
@media all and (max-width: 612px){
	section.sec04 .cont .previews ul > div {
		width: 86%;
        padding: 20px;
	}
	section.sec04 .cont .previews ul {
		padding: 0 20px;
	}
	section.sec04 .cont .previews li {
		font-size: 1.8rem;
		font-weight: 600;
	}
}