@charset "utf-8";

/* ----------------------------------------
 * CSS | LIBELARA BLACK
 * /tradein/css/index.css
 * ---------------------------------------- */



/* --------------------
 * mainview
 */
#mainview {
	clear: both;
}
	#mainview_wrap {
		background-color: #fff;
	}
		#mainview .img {

		}
		#mainview .lead {
			display: block;
			padding-top: 48px;
			font-size: 180%;
			font-weight: bold;
			color: #000;
			text-align: center;
		}



/* --------------------
 * contents
 */
.contents {}
	.contents_wrap {}

		/* --------------------
		 * contents : reason
		 */
		#reason {
			padding-top: 48px;
		}
			/* reason : header */
			#reason .header {
				padding: 12px 0;
				background-color: #0000ce;
				font-size: 193%;
				font-weight: bold;
				color: #fff;
				text-align: center;
			}

			/* reason : article */
			#reason .article {
				padding: 0 45px;
				border: 1px solid #0000ce;
			}
				#reason .article dl {
					padding-top: 36px;
					padding-bottom: 40px;
					border-top: 1px solid #0000ce;
					text-align: center;
				}
				#reason .article dl:first-child {
					border-top: none;
				}
					#reason .article dt {
						font-size: 143%;
						color: #0000ce;
					}
					#reason .article dd {
						padding-top: 16px;
					}
						#reason .article dd .txt {
							font-size: 230%;
							line-height: 1.288;
						}
						#reason .article dd .cap {
							padding-top: 8px;
							font-size: 108%;
						}

		/* --------------------
		 * contents : point
		 */
		#point {
			margin-top: 70px;
			border: 1px solid #eeeeee;
		}
			/* point : header */
			#point .header {
				padding-top: 28px;
				padding-bottom: 6px;
				text-align: center;
			}
				#point .header .main {
					display: table;
					margin: 0 auto;
					background-color: #313131;
					font-size: 108%;
					font-weight: bold;
					color: #fff;
				}
					#point .header .main i {
						display: table-cell;
						padding: 6px 12px;
						font-style: normal;
					}
				#point .header .sub {
					display: block;
					padding-top: 12px;
					font-size: 143%;
					font-weight: bold;
					color: #313131;
				}

			/* point : article */
			#point .article {
				display: block;
				width: 920px;
				margin: 0 auto;
				padding-bottom: 16px;
			}
				#point .article dl {
					display: block;
					padding: 20px 0;
					border-top: 1px solid #eeeeee;
					vertical-align: top;
				}
				#point .article dl:first-child {
					border-top: none;
				}
					#point .article dt {
						font-size: 143%;
						color: #0000ce;
						text-align: center;
					}
					#point .article dd {
						padding-top: 6px;
						font-size: 136%;
						line-height: 1.579;
						text-align: center;
					}

		/* --------------------
		 * contents : tradein_step
		 */
		#tradein_step {
			margin-top: 70px;
		}
			/* tradein_step : header */
			#tradein_step .header {
				padding: 12px 0;
				background-color: #313131;
				font-size: 193%;
				font-weight: bold;
				color: #fff;
				text-align: center;
			}

			/* tradein_step : article */
			#tradein_step .article {
				display: table;
				width: 100%;
			}
				#tradein_step .item {
					display: table-cell;
					width: 20%;
					padding-top: 40px;
					vertical-align: top;
				}
					#tradein_step .item .icon {
						display: table;
						margin: 0 auto;
					}
						#tradein_step .item .icon span {
							display: table-cell;
							padding: 3px 6px;
							background-color: #0000ce;
							border-radius: 2px;
							-moz-border-radius: 2px;
							-webkit-border-radius: 2px;
							font-size: 86%;
							color: #fff;
						}
					#tradein_step .item dl {

					}
						#tradein_step .item dt {
							display: block;
							padding-top: 15px;
							padding-bottom: 12px;
							/*border-bottom: 1px solid #0000ce;oku*/
							font-size: 150%;
							font-weight: bold;
							line-height: 1.10;
							text-align: center;
						}
						#tradein_step .item dd {
							display: block;
							padding-top: 14px;
							font-size: 79%;
							line-height: 1.50;
							text-align: center;
							letter-spacing: -0.04em;
						}

		/* --------------------
		 * contents : feature
		 */
		#feature {
			margin-top: 70px;
			margin-bottom: 60px;
		}
			/* feature : header */
			#feature .header {
				padding-bottom: 24px;
			}
				#feature .header .main {
					display: block;
					padding: 12px 0;
					background-color: #0000ce;
					background: linear-gradient(to bottom, #0000ce, #191993);
					background: -ms-linear-gradient(top, #0000ce, #191993);
					background: -moz-linear-gradient(top, #0000ce, #191993);
					background: -webkit-gradient(linear, left top, left bottom, from(#0000ce), to(#191993));
					font-size: 143%;
					font-weight: bold;
					color: #fff;
					text-align: center;
				}
				#feature .header .sub {
					display: block;
					padding-top: 22px;
					font-size: 122%;
					font-weight: bold;
					line-height: 1.471;
					text-align: center;
				}

			/* feature : article */
			#feature .article {
				display: table;
				margin: 0 auto;
			}
				#feature .item {
					display: table-cell;
					width: 300px;
					padding: 0 25px;
				}
					#feature a {
						color: #000;
					}
					#feature a:hover {
						text-decoration: none;
					}
					#feature .item_wrap {
						display: block;
					}
						#feature .item .img {
							display: block;
							width: 100%;
							overflow: hidden;
						}
							#feature .item .img span {
								display: block;
								width: 100%;
								height: 200px;
								background-color: #f5f5f5;
								background-position: center;
								background-size: cover;
								-moz-transition: -moz-transform 0.5s ease-out;
								-webkit-transition: -webkit-transform 0.5s ease-out;
								-o-transition: -o-transform 0.5s ease-out;
								-ms-transition: -ms-transform 0.5s ease-out;
								transition: transform 0.5s ease-out;
							}
							#feature .item  a:hover .img span {
								-webkit-transform: scale(1.05);
								-moz-transform: scale(1.05);
								-o-transform: scale(1.05);
								-ms-transform: scale(1.05);
								transform: scale(1.05);
							}
						#feature .item dl {
							padding-top: 14px;
						}
							#feature .item dt {
								font-size: 143%;
								text-align: center;
							}
							#feature .item dd {
								font-size: 86%;
								color: #7f7f7f;
								text-align: center;
							}



/* --------------------
 * form
 */
#form {
	padding-bottom: 0;
}
	#form_wrap {}

		/* form : header */
		#form .header {
			padding-top: 72px;
		}

		/* form : article */
		#form .article {
			width: 1000px;
			padding-top: 42px;
		}
			#form .article_wrap {
				position: relative;
				margin-top: 44px;
				padding-top: 60px;
				border-top: 1px solid #626262;
			}
			#form .article_wrap:first-child {
				margin-top: 0;
				padding-top: 0;
				border-top: none;
			}
				/* close */
				#form .article .btn_close {
					position: absolute;
					right: 5px;
					top: 20px;
					cursor: pointer;
				}
				#form .article .article_wrap:first-child .btn_close {
					display: none;
				}
					#form .article .btn_close span {
						display: block;
						width: 20px;
						height: 20px;
						background-image: url(/liberala/asset/img/body/btn_close_red.png);
						background-repeat: no-repeat;
						background-size: contain;
					}
				/* item */
				#form .article .item {}
					#form .article .item.x2 dt {
						width: 140px;
					}
					#form .article .item.x2 dt.right {
						width: 120px;
						padding-left: 90px;
					}
					#form .article .item.x2 dd {
						width: 325px;
						padding-right: 0;
					}
					#form .article .item.x2 dd.right {
						padding-right: 0;
					}

		/* form : aside */
		#form .aside {
			height: 40px;
			padding: 0 170px;
		}
			#form .aside a {
				display: table;
				height: 40px;
				float: right;
			}
			#form .aside a:hover {
				text-decoration: none;
			}
				#form .aside a span {
					display: table-cell;
					padding-left: 42px;
					padding-right: 16px;
					background-color: #434343;
					background-image: url(/liberala/asset/img/body/ico_add.png);
					background-repeat: no-repeat;
					background-position: 15px;
					background-size: auto 20px;
					font-size: 93%;
					font-weight: bold;
					text-align: center;
					vertical-align: middle;
				}

		/* form : user info */
		#form .article#form_userinfo {
			display: none;
			margin-top: 32px;
			padding-top: 60px;
			padding-bottom: 60px;
			border-top: 1px solid #626262;
		}
			#form .article#form_userinfo .article_header {
				width: 100%;
				padding-bottom: 44px;
			}
				#form .article#form_userinfo .article_header .ttl {
					font-size: 158%;
					font-weight: bold;
					text-align: center;
				}
				#form .article#form_userinfo .article_header .cap {
					padding-top: 8px;
					font-size: 86%;
					color: #cc0066;
					text-align: center;
				}
			#form .article#form_userinfo .article_left {
				width: 468px;
				float: left;
			}
			#form .article#form_userinfo .article_right {
				width: 438px;
				float: right;
			}
				#form .article#form_userinfo .item {}
					#form .article#form_userinfo .article_left .item dt {
						width: 142px;
					}
					#form .article#form_userinfo .article_left .item dd {
						width: 326px;
						padding-right: 0;
					}
					#form .article#form_userinfo .article_right .item dt {
						width: 142px;
					}
					#form .article#form_userinfo .article_right .item dd {
						width: 326px;
						padding-right: 0;
					}
				/* caution */
				#form .article#form_userinfo .article_right .caution {
					display: block;
					padding-left: 112px;
					padding-bottom: 20px;
					font-size: 93%;
					line-height: 1.45;
				}
				/* button : submit */
				#form .article#form_userinfo .article_right .submit {
					display: block;
					padding-left: 112px;
				}
					#form .article#form_userinfo .article_right .submit a.btn_blue_large {
						width: 100%;
					}
						#form .article#form_userinfo .article_right .submit a.btn_blue_large span {
							background-position: 290px;
						}

		/* form : footer */
		#form .footer {
			clear: both;
		}
			#form .footer .submit {
				clear: both;
				padding-top: 0;
			}



/* --------------------
 * assessment
 */
#assessment {
	padding-top: 50px;
	padding-bottom: 60px;
	background-color: #fff;
	color: #000;
}
	#assessment_wrap {

	}

		/* assessment : header */
		#assessment .header {
			
		}
			#assessment .header .ttl {
				font-size: 230%;
				font-weight: bold;
				text-align: center;
			}
			#assessment .header .txt {
				padding-top: 12px;
				font-size: 115%;
				line-height: 1.563;
				text-align: center;
			}

		/* assessment : article */
		#assessment .article {
			padding-top: 28px;
		}
			#assessment .article .btn {
				display: table;
				margin: 0 auto;
			}
				#assessment .article .btn_wrap {
					display: table-cell;
					padding: 12px 33px;
					background: linear-gradient(to bottom, #fff, #b5b5b5);
					background: -ms-linear-gradient(top, #fff, #b5b5b5);
					background: -moz-linear-gradient(top, #fff, #b5b5b5);
					background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#b5b5b5));
					border: 1px solid #cbcbcb;
					border-radius: 4px;
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					vertical-align: middle;
				}
					#assessment .article .btn .label {
						display: block;
						font-size: 108%;
						font-weight: bold;
						line-height: 1.10;
					}
					#assessment .article .btn .tel {
						display: block;
						padding-top: 4px;
						font-size: 200%;
						color: #0000ce;
						line-height: 1.10;
					}
					#assessment .article .btn .time {
						display: block;
						padding-top: 3px;
						font-size: 93%;
						font-weight: bold;
						line-height: 1.10;
					}



/* --------------------
 * contents
 */
.contents.full {}
	.contents.full .contents_wrap {
		padding-bottom: 78px;
	}


#reason {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}
#reason > h3.header {
  font-size: 1.4rem;
  padding: 0;
}
#reason > h3.header > img {
  width: 580px;
}
#reason > h3.header > span {
  margin-left: 8px;
  font-size: 2.5rem;
}
#reason > .article {
  border: 0;
}
#reason > .article > dl {
  text-align: left;
}
#reason > .article > dl > dt {
  font-style: italic;
}
#reason > .article > dl > dt > span{
  font-size: 208%;
  font-weight: bold;
}
#reason > .article > dl > dt > span.num {
  margin-left: 5px;
}
#reason > .article > dl > dt > span.copy {
  font-size: 208%;
  font-style: normal;
  color: #212121;
  margin-left: 25px;
}
#reason  > .article > dl > dd .txt {
    font-size: 150%;
}
#reason > .article > dl.point3 > dd > p.cap > span {
  display: inline-block;
  font-size: 0.6rem;
  color: #777;
}
#point {
  float: left;
  width: 50%;
  padding: 10px;
  margin-top: 0;
  box-sizing: border-box;
}
#point .article {
  width: 100%;
}
#form.tradein {
  float: right;
  width: 50%;
  clear: none;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}
#form.tradein .header {
    width: 100%;
    padding-top: 26px;
    position: relative;
}
#form.tradein .header:before {
  content: " ";
  background: url(/liberala/tradein/img/ico_satei_badge.png);
  background-size: 120px;
  position: absolute;
  top: -4px;
  left: 10px;
  width: 120px;
  height: 60px;
}
#form.tradein .header h3 {
  padding-left: 50px;
}
#form.tradein .header h3 span {
  /*margin-left: 8px;*/
  font-size: 1rem;
}
#form.tradein .header p {
  padding: 0 90px;
}
#form.tradein .article {
    width: 100%;
}
#form.tradein .article .item dd {
    width: 326px;
    padding-right: 0;
}
#form.tradein #form_userinfo.article {
  display: block;
  padding-top: 26px;
}
#form.tradein #form_userinfo.article .article_header {
  padding-bottom: 26px;
}
#form.tradein #form_userinfo.article .article_left {
  width: 100%;
}
#form.tradein #form_userinfo.article .article_right {
  width: 100%;
}
#form.tradein #form_userinfo.article .article_right .caution {
  padding: 0 90px;
  margin-bottom: 12px;
}
#form.tradein #form_userinfo.article .article_right .submit {
  padding: 0 90px;
}
#form.tradein .footer {
    display: none;
}

#assessment {
    padding-top: 20px;
     padding-bottom: 0px; 
}
#tradein_step {
    margin-top: 40px;
}