@charset "utf-8";

/* CSS Document */

.cf:before,
.cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}

.cf {
	zoom:1;
}

#contents.tree section h3.quote_title,
.quote_title {
	padding: 20px 20px 20px 83px;
	position: relative;
	font-size: 18px;
	font-weight: bold;
	color: #18479F;
	border-bottom: 1px solid #18479F;
	background:url(../images/common/ico_quote.png) no-repeat left 26px center transparent;
}

.quote_wrap {
width:100%;
}

.quote_content {
width: 530px;
float: left;
position: relative;
}

.quote_cart {
width:25%;
float: right;
}

/*
.quote_select,
.quote_result {
	position: absolute;
	left:0;
	top:0;
}
*/
.quote_select {
    margin-bottom: 50px;
}

.quotecate {
width:100%;
}

.quotecate > li {
width:33.3333%;
float: left;
position: relative;
padding-bottom: 40px;
}

.quotecate > li > span {
position: relative;
font-size: 13px;
color: #014EA2;
line-height: 1.2;
padding-left: 23px;
text-decoration: underline;
cursor: pointer;
}

.quotecate > li > span:before {
content: "";
display: block;
width:16px;
height:16px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
background: #014EA2;
position: absolute;
top: 2px;
left: 0;
z-index: 2;
}

.quotecate > li > span:after {
content: "";
display: block;
width:5px;
height:5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 6px;
left: 3px;
z-index: 3;
cursor: pointer;
}


.quote_subcate {
position: absolute;
left:0;
top:30px;
display: none;
padding: 30px;
background: #F2F2F2;
z-index: 5;
border: 1px solid #808080;
}

.quote_subcate:before {
content: "";
position: absolute;
left:42px;
top:-18px;
display: block;
width:0;
height:0;
border-color: transparent;
border-bottom: 17px solid #808080;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
z-index: 6;
}

.quote_subcate:after {
content: "";
position: absolute;
left:43px;
top:-16px;
display: block;
width:0;
height:0;
border-color: transparent;
border-bottom: 16px solid #f2f2f2;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
z-index: 7;
}

.quote_subcate > li {
display: block;
}

#contents .quote_subcate > li a{
display: block;
position: relative;
white-space: nowrap;
font-size: 12px;
color: #333;
padding-left: 13px;
line-height: 1.75;
margin-bottom: 7px;
}


.quote_subcate > li a::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 3px;
height: 3px;
border-top: 1px solid #004EA2;
border-right: 1px solid #004EA2;
position: absolute;
top: 0;
left:0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.quote_result {
}

.quote_result_table {
width:100%;
border-collapse: collapse;
border-bottom: 1px solid #333;
}

.quote_result_table th,
.quote_result_table td {
text-align: center;
width: 25%;
font-size: 12px;
}

.quote_result_table th {
border-bottom: 1px solid #333;
color: #014EA2;
font-weight: bold;
}

.quote_result_table td {
border-bottom: 1px dashed #333;
}

.quote_result_inner p {
    padding-bottom: 25px;
}

.quote_result_table th,.quote_result_table td {
    padding: 9px 25px;
    border-bottom: 1px dashed #014EA2;
}

.quote_result_table td {}

.quote_result_table {
    table-layout: fixed;
    border-bottom: 1px solid #014EA2;
}

.quote_result_table td input[type="text"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    border: 1px solid #808080;
}

input[type="submit"] {}

.quote_result_table td input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    background: #014EA2;
    color: #FFF226;
    font-weight: bold;
}

.quote_result_table th {
    border-bottom: 1px solid #014EA2;
}

td.purchase {
    color: #C1272D;
    position: relative;
}

td.purchase:after {content: "×";font-size: 16px;color: #000;position: absolute;right: -0.5em;}

#contents .quote_result_inner>form>a {
    padding: 15px 80px 14px 15px;
    margin: 60px auto 20px;
    display: block;
    border: 1px solid #014EA2;
    font-size: 13px;
    font-weight: bold;
    color: #014EA2;
    width: 205px;
    position: relative;
    text-decoration: none;
}

#contents .quote_result_inner>form>a:after {content: "";display: block;width: 8px;height: 8px;border-top: 1px solid #014EA2;border-right: 1px solid #014EA2;-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 50%;margin-top: -4px;right: 20px;z-index: 3;cursor: pointer;}

#contents .quote_result_inner>form>a:hover {
    opacity: 0.7;
}

.quote_result_table td input[type="submit"]:hover {
    opacity: 0.7;
}

.cart_title {
    background: #808080;
    padding: 7px 12px 4px;
}

.cart_title img {
    max-width: 100%;
}

.cart_body {
    border: 1px solid #808080;
    border-top: none;
    padding: 16px 14px 13px;
    margin-bottom: 20px;
}

ul.cart_item li {
    border-bottom: 1px dashed #808080;
    display: block;
}

.cnt_box {
    display: table;
    width: 100%;
    font-size: 10px;
}

.item_price {
    display: table-cell;
    width: 34.11764705882353%;
    padding-bottom: 10px;
    position: relative;
}

.item_cnt {
    display: table-cell;
    width: 26.47058823529412%;
    padding: 0 7px 10px;
}

.re_enter {
    display: table-cell;
    width: 25.29411764705882%;
    padding-bottom: 10px;
}
.re_enter input {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	width: 100%;
	background: #014EA2;
	color: #FFF226;
	font-weight: bold;
}

.item_del {
    display: table-cell;
    width: 14.11764705882353%;
    text-align: right;
    padding-bottom: 10px;
}

.item_del input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    font-size: 10px;
    border: none;
    border-radius: 100%;
    padding: 0;
}

.item_cnt input[type="text"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    border: 1px solid #808080;
}

.item_name {
    padding-top: 10px;
}

.item_price:after {content: "×";position: absolute;right: -0.5em;}

ul.cart_item li:last-child {
    border-bottom: 1px solid #808080;
}

.result_txt {
    text-align: right;
    padding: 20px 0;
    font-weight: bold;
}

.result_txt span {
    font-size: 14px;
    color: #C1272D;
    padding: 0 5px;
}

#contents a.result_print {
    background: url(/images/common/ico_print.png) no-repeat left 10px center #FFF227;
    color: #004EA2;
    font-weight: bold;
    font-size: 11px;
    padding: 8px 5px 5px 20px;
    text-align: center;
    display: block;
}

#contents a.result_print .on_pc {
    display: none;
}

/*
#contents a.result_print .on_sp {
    display: none;
}
*/

.rule_title {
    font-size: 13px;
    font-weight: bold;
    color: #014EA2;
    padding-bottom: 10px;
}

ul.rule_link li {
    padding-bottom: 7px;
		display: inline-block;
}

a {}

#contents ul.rule_link > li > a {
    position: relative;
    font-size: 11px;
    color: #333;
    display: inline-block;
    padding-left: 20px;
}

#contents ul.rule_link > li > a:before {content: "";width: 3px;height: 3px;display: block;border-top: 1px solid #014EA2;border-right: 1px solid #014EA2;-webkit-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top: 50%;margin-top: -2px;left: 8px;}



@media screen and (max-width: 767px) {
	
	.quote_content {
		width:100%;
		float: none;
		position: relative;
	}
	
	.quote_cart {
		width:100%;
		background: #f3f3f3;
		float: none;
		position: fixed;
		bottom:0;
		-webkit-transition: 0.4s all cubic-bezier(0, 0, 0.01, 1);
		-o-transition: 0.4s all cubic-bezier(0, 0, 0.01, 1);
		transition: 0.4s all cubic-bezier(0, 0, 0.01, 1);

		left:100%;
		right:0;
		z-index: 11;
	}
	
	.quote_cart.active {
		left:0%;
		overflow: block;
	}
	
	body.active {
		overflow: hidden;
	}
	
	.cart_title {
		/* display: none; */
		position: fixed;
		width:100%;
		bottom:0;
		right: 0;
		text-align: center;
		padding: 5px;
		z-index: 3;
	}
	
	.active .cart_title {
		position: absolute;
		top:0;
		bottom:auto;
		height: 30px;
	}
	
	#contents .cart_title img {
		width:auto;
		max-height:100%;
	}
	
	.cart_title:before {
		content: "";
		display: block;
		width: 5px;
		height: 5px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
		position: absolute;
		top: 50%;
		margin-top: -2.5px;
		left: 15px;
		z-index: 3;
		cursor: pointer;
	}
	
	.active .cart_title:before {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.cart_body {
		background: transparent;
		z-index: 10;
		margin: 0;
		padding: 30px 5px 5px;
		border-left: 0;
    border-right: 0;
	}
	
	.result_txt {
			text-align: right;
			padding: 5px 0;
			font-weight: bold;
	}
	
	.quotecate > li {
		width:100%;
		float: none;
		position: relative;
		padding-bottom: 10px;
	}
	
	.quote_subcate {
		position: absolute;
		left: 0;
		top: 30px;
		width:100%;
		display: none;
		padding:5px;
		background: #F2F2F2;
		z-index: 5;
		border: 1px solid #808080;
	}
	
	#contents .quote_subcate > li a {
		display: block;
		position: relative;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		font-size: 12px;
		color: #333;
		padding-left: 13px;
		line-height: 1.75;
		margin-bottom: 7px;
	}
	
	.quote_result {
		padding-right: 0;
	}
	
	.quote_result_table,
	.quote_result_table tbody,
	.quote_result_table tr,
	.quote_result_table td {
	display: block;
	width:100%;
	}
	
	.quote_result_table th {
	display: none;
	}
	
	.quote_result_table td {
	padding-left: 30%;
	position: relative;
	}
	
	.quote_result_table tr td.price:before {
		content: "額面";
		display: inline-block;
		width:30%;
		text-align: center;
		position: absolute;
		left:0;
	}
	
	.quote_result_table tr td.purchase:before {
		content: "買取単価";
		display: inline-block;
		width:30%;
		text-align: center;
		position: absolute;
		left:0;
	}
	
	.quote_result_table tr td.count:before {
		content: "枚数";
		display: inline-block;
		width:30%;
		text-align: center;
		position: absolute;
		left:0;
	}
	
	td.purchase:after {
		bottom: -0.6em;
		right:37.5%;
		/* ×トル */
		display: none;
	}
	
	
	
	
	.item_price,
	.item_cnt,
	.re_enter,
	.item_del {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		width:25%;
	}
	
	.cart,
	.delete {
	display: inline;
	float: left;
	}
	
	.cart {
		width:75%;
	}
	
	.re_enter input {
		-webkit-appearance: none;
		appearance: none;
		border: none;
		width: 100%;
		background: #014EA2;
		color: #FFF226;
		font-weight: bold;
	}
	
	.delete {
		width:25%;
	}
	
	.item_del {
		position: relative;
	}
	
	.item_del:before {
		content: "×";
		background: #CCC;
		position: absolute;
		display: inline-block;
		vertical-align: middle;
		font-weight: bold;
		width:20px;
		height:20px;
		text-align: center;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		-o-border-radius: 100%;
		border-radius: 100%;
		left:0;
		right:0;
		top:0;
		bottom:10px;
		margin: auto;
	}
	
	.item_del input {
	 opacity: 0;
	}
	
	.item_price:after {
		right: 0;
	}
	
	.re_enter input,
	.item_del input {
		width:100%;
		display: inline-block;
	}
	
	.rule_box {

	}

	.rule_link li	{
		display: inline-block;
	}
}