@charset "utf-8";

/**
 *
 *  クルマ・バイクの保険  page_04
 *
 */
 
/*--------------------------------------------------------------------------
	#page_first
---------------------------------------------------------------------------*/
	.sec {
	}
	.page_first::before {
		background: #FFE710 !important;
	}
	#page_first .sec00 {
	/*	background: #A2E07B;*/
		background: linear-gradient(180deg, rgba(138, 216, 90, 0.75), #8AD85A, #8AD85A, #8AD85A, rgba(138, 216, 90, 0.75), rgba(138, 216, 90, 0.75));
		background: linear-gradient(180deg, #8AD85ABF, #8AD85A, #8AD85A, #8AD85A, #8AD85ABF, #8AD85ABF);
	}
	#page_first .page_first_bg {
		background: url(../images/index/top_sec04bg.jpg) no-repeat 50% 0;
		background-position: center;
		-webkit-background-size: cover;
		background-size: cover;
	}
 
/*--------------------------------------------------------------------------
	#pages_sec02
---------------------------------------------------------------------------*/
	#pages_sec02 {
		margin-bottom: 100px;
	}


/*--------------------------------------------------------------------------
	.content_sec
---------------------------------------------------------------------------*/
	.content_sec .logo_list {
		padding: 60px 50px 0;
	}
	.content_sec .logo_list p {
		display: block;
		margin-bottom: 2.5%;
		font-size: 2.0rem;
	  font-weight: bold;
	  line-height: 1.8;
		text-align: center;
	}
	.content_sec .logo_list div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto 5%;
		font-size: 1.4rem;
		line-height: 3rem;
		text-align: justify;
	}
	.content_sec .logo_list img {
		display: inline-block;
		width: 100%;
		margin: 3% 2%;
		max-width: 110px;
		max-height: 70px;
		vertical-align: middle;
		object-fit: contain;
	}
	.content_sec .purchaser_list {
		padding: 10% 10% 0;
	}
	.content_sec .purchaser_list p {
		display: block;
		padding-bottom: 2.5%;
		font-size: 2.0rem;
	  font-weight: bold;
	  line-height: 1.8;
		text-align: center;
	}
	.content_sec .purchaser_list div {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto 5%;
		font-size: 1.4rem;
		line-height: 3rem;
		text-align: justify;
	}
	.content_sec .purchaser_list img {
		display: inline-block;
		width: 100%;
		height: 100%;
		margin: 3% auto;
		max-width: 45%;
		vertical-align: middle;
	}
	.content_sec .mid-contents .zaiko {
		padding: 2% 2%;
	}
	.content_sec .mid-contents .zaiko img {
		display: inline-block;
		width: 80%;
	}
	.content_sec .mid-contents .zaiko p {
		display: block;
		margin: 0 auto;
		font-size: 1.2rem;
		padding-top: 5px;
	}
	/*通常はpage_commonへ記載*/
	.title_sec .lead > span {
		position: relative;
		line-height: 2rem;
	}
	.title_sec .lead > span::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% - 20px);
		border: 11px solid #E3F1F2;
		z-index: -1;
	}
	.content_sec .mid-contents .mid_base {
		width: 30%;
		max-width: 600px;
		margin: 10px;
		padding: 3vh 4vw 3vh;
		background: #FDFEFF;
		border-radius: 3px;
		-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));
		
		z-index: 2;
	}
	.content_sec .mid-contents .mid_base100 {
		width: 100%;
		max-width: 600px;
		margin: 10px;
		padding: 3vh 4vw 3vh;
		background: #FDFEFF;
		border-radius: 3px;
		-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));
		
		z-index: 2;
	}
	.content_sec .mid-contents dl img.hokenlogo35,
	.content_sec .mid-contents .mid_base img.hokenlogo35,
	.content_sec .mid-contents .mid_base100 img.hokenlogo35 {
		width: 35%;
		max-width: 500px;
		margin: 10px 10px;
	}
	.content_sec .mid-contents dl img.hokenlogo55,
	.content_sec .mid-contents .mid_base img.hokenlogo55,
	.content_sec .mid-contents .mid_base100 img.hokenlogo55 {
		width: 55%;
		max-width: 500px;
		margin: 10px 10px;
	}
	.content_sec .mid-contents dl img.hokenlogo75,
	.content_sec .mid-contents .mid_base img.hokenlogo75,
	.content_sec .mid-contents .mid_base100 img.hokenlogo75 {
		width: 75%;
		max-width: 500px;
		margin: 10px 10px;
	}
	.content_sec .mid-contents dl img.hokenlogo,
	.content_sec .mid-contents .mid_base img.hokenlogo,
	.content_sec .mid-contents .mid_base100 img.hokenlogo {
		width: 100%;
		max-width: 500px;
		margin-bottom: 10px;
	}
	.payments .content_sec::after {
		bottom: auto !important;
	}
	/*ここまで通常はpage_commonへ記載*/
	
	dl.dl100per {
		width: 80%;
		max-width: 580px;
		margin: auto;
		margin-bottom: 20px;
	}
	dl.dl100per dt {
		font-size: 1.6rem;
		padding-bottom: 10px;
	}
	dl.dl100per dd {
		margin: 0 auto;
		text-align: left;
	}
	dl.dl100per .pp_service {
		padding: 10px 35px;
		border: 1px solid #2C2C2C;
		border-radius: 3px;
	}
	
	/*通常はpage_overflow_bgへ記載*/
	/*#pages_sec01 .content_sec::after {
		display: none;
	}*/
	/*ここまで通常はpage_overflow_bgへ記載*/

/* @sp **************************************************/
@media all and (max-width: 767px){
	.content_sec .logo_list,
	.content_sec .purchaser_list {
		padding: 10% 0;
	}
	.content_sec .logo_list img {
		max-width: 120px;
		margin: 3%;
	}
	.content_sec .logo_list dl {
		width: 80vw;
		margin: 10px auto;
		padding: 3% 8%;
	}
	.content_sec .logo_list p,
	.content_sec .purchaser_list p {
		left: 0;
		font-size: 1.65rem;
		margin-bottom: 5%;
	}
	.content_sec .logo_list div {
		margin: 0 auto;
		width: auto;
		font-size: 1.3rem;
	}
	.content_sec .mid-contents .mid_base,
	.content_sec .mid-contents .mid_base100 {
		width: 76vw;
		max-width: 76vw;
	}
	.content_sec .mid-contents dl img.hokenlogo55,
	.content_sec .mid-contents .mid_base img.hokenlogo55,
	.content_sec .mid-contents .mid_base100 img.hokenlogo55 {
		width: 100%;
	}
	dl.dl100per {
		width: 100%;
	}
	dl.dl100per dt {
		padding-bottom: 15px;
	}
	dl.dl100per .pp_service {
		padding: 10px 15px;
		border: 1px solid #2C2C2C;
	}
}