@charset "utf-8";


.quotation{
		padding-top: 57px;
		padding-bottom: 78px;
}
.quotation .mainInner2{}
.quotation_link{
	text-align: right;
	margin-bottom: 48px;
}

.quotation_table{
	display: table;
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 3rem;
}
.quotation_table_row{
	display: table-row;
}
.quotation_table_cell{
	position: relative;
	display: table-cell;
	border: 1px solid #fff;
	vertical-align: middle;
	padding: 1.2rem 1.5rem;
}

.table_header .quotation_table_cell{
	border-color: #10222F;
	text-align: center;
	background: #0279FD;
	padding-top: 0.5rem;
	padding-bottom: 0.3rem;
}

.quotation_table_row:nth-child(2) {
	border-top: none;
}

.quotation_table_cell.number_title,
.quotation_table_cell.quantity_title{
	display: none;
}

.quotation_table_cell.number{
	text-align: center;
	width: 15%;
	font-family: 'Noto Sans', sans-serif;
}

.quotation_table_cell.product{
	padding-left: 5rem;
	width: 50%;
}
.quotation_table_cell.product .icon{
	display: block;
	position: absolute;
	left: 1.5rem;
	top: 50%;
	margin-top: -1.5em;
	width: 3rem;
	height: 3rem;
	background: no-repeat center center/ contain;
}

.quotation_table_cell.quantity{
	width: 20%;
}

.quotation_table_cell.delete{
	width: 15%;
}
.quotation_table_cell.delete button{
	display: block;
	border-radius: 100px;
	width: 140px;
	height: 54px;
	padding: 5px 10px;
	margin: 0 0 0 8px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	color: #fff;
	border: 1px solid #fff;
}

.quotation_table_cell.delete button svg{
	margin-right: 0.4rem;
}

.quotation_table_cell.delete button:before{
  content: "";
  z-index: -1;
  position: absolute;
  
  background: rgba(255, 255, 255, 0.1);

  left: -2px;
  top: -2px;
  bottom: -2px;
  width: 102%;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
}

/* ----------------------------------- */
/* ----------------------------------- */
/* ----------------------------------- */
/* ----------------------------------- */


/* ホバーアクション ----------------------------------- */
@media screen and (min-width: 641px) {
	.delete button:hover:before{
		-webkit-transform: scaleX(1);
		-ms-transform: scaleX(1);
		transform: scaleX(1);
		-webkit-transform-origin: left center;
		-ms-transform-origin: left center;
		transform-origin: left center;
	} 

/*	.products_link a:hover .products_link_bg:after{
		opacity: 1;
	}*/

}

/*---------------------------------------------------------
	スマホ
---------------------------------------------------------*/
@media screen and (max-width: 640px) {

	.quotation_table{
		display: block;
	}
	
	.quotation_table_row{
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		align-items: stretch;
		margin-bottom: 1rem;
	}
	
	.quotation_table_row:last-child{
		margin-bottom: 0;
	}
	
	.quotation_table_row.table_header{
		display: none;
	}
	
	.quotation_table_row{
	}

	.quotation_table_cell{
		display: block;
		padding: .6rem .5rem;
	}
	
	.quotation_table_cell.number_title,
	.quotation_table_cell.quantity_title{
		display: flex;
		align-items: center;
		width: 23%;
		border-right: none;
		text-align: center;
		background: #0279FD;
		justify-content: center;
	}
	
	.quotation_table_cell.number_title{
		order: 2;
		border-right: none;
	}
	.quotation_table_cell.quantity_title{
		order: 4;
		border-right: none;
		border-left: none;
	}
	
	.quotation_table_cell.number{
		display: flex;
		justify-content: center;
		align-items: center;
		order: 3;
		width: 27%;
		text-align: center;
		border-left: none;
		border-right: none;
	}
	
	.quotation_table_cell.product{
		order: 1;
		padding-left: 4rem;
		width: 100%;
		border-bottom: none;
		min-height: 4rem;
		display: flex;
		align-items: center;
	}
	.quotation_table_cell.product .icon{
		left: .7rem;
	}
	
	.quotation_table_cell.quantity{
		display: flex;
		align-items: center;
		order: 5;
		width: 27%;
		border-left: none;
	}
	
	.quotation_table_cell.quantity input[type="text"]{
		padding: .8rem 1rem;
	}
	
	.quotation_table_cell.delete{
		order: 6;
		width: 100%;
		border-top: none;
	}
	
	.quotation_table_cell.delete button {
		height: 44px;
		margin: 0 auto;
		font-size: 14px;
	}


}