/*
 * iweb52-style16
 *
 * Copyright 2016, TANK
 * 
 * 
 * 2016 / 08 / 08
 */


.container .content-wrap .topBar {
	margin-bottom: 0;
}

/* + order
*----------------------------------------------------------------------------*/
#order ul {
	overflow: hidden;
}

#order ul li {
	overflow: hidden;
	padding: 15px 0;
	float: left;
	width: 50%;
	border-bottom: 1px #ff0000 solid;
}

#order ul li:last-child ,
#order ul li:nth-last-child(2) {
	border-bottom: 0;
}

#order ul.odd li:nth-last-child(2) {
	border-bottom: 1px #ff0000 solid;
}

#order ul li .askPhoto ,
#order ul li .info {
	float: left;
	width: 50%;
}

#order ul li .askPhoto {
	padding: 0 3%;
	background: url(../../images/12/main/img-line.jpg) repeat-y left 0;
}

#order ul li:nth-child(odd) .askPhoto {
	padding-left: 0;
	background: none;
}

#order ul li .askPhoto a.photo {
    overflow: hidden;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: block;
	transition: all 0.4s ease-in-out 0s;
}

#order ul li .askPhoto a.photo img {
	width: 100%;
}

#order ul li .askPhoto a.photo:hover {
	background-size: auto 120%;
}

#order ul li .info {
	width: 44%;
}

#order ul li:nth-child(odd) .info {
	padding-right: 3%;
}

#order ul li .info p {
	overflow: hidden;
	margin: 5px 0;
	color: #4c4c4c;
	font-size: 14px;
}

#order ul li .info .Cate p:last-child ,
#order ul li .info .title p:last-child {	
	height: 19px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;	
}

#order ul li .info .title {
	margin-top: 10px;
}

#order ul li .info .title p:last-child {
	height: 48px;
	-webkit-line-clamp: 2;
}

#order ul li .info .title p ,
#order ul li .info .title p a {
	color: #e36368;
	font-size: 18px;
}

#order ul li .info .Quantity {
	font-size: 14px;
	color: #787878;
}

#order ul li .info .Quantity input[type="text"] {
	margin: 0 10px;
	padding: 2px 5px;
	width: 50px;
	border: 1px #787878 solid;
}

#order ul li .info .Quantity input[type="button"] {
	padding: 5px 20px;
	background: #e36368;
	color: #fff;
	border-radius: 5px;	
}

p#productTotal {
	margin-bottom: 10px;
	padding: 5px 10px;
	border-top: 1px #ff0000 dashed;
	border-bottom: 1px #ff0000 dashed;
	font-size: 18px;
	color: #e36368;
	text-align: right;
}

p#productTotal b {
	font-size: 24px;
	vertical-align: sub;
}

#order p.link {
	font-size: 18px;
	color: #e36368;
	text-align: right;
}

#order p.link a {
	margin-left: 10px;
	padding: 5px 10px;
	background: #e36368;
	border-radius: 5px;
	display: inline-block;
	color: #fff;
}

#order p.link a:hover {
	opacity: 0.7;
}

#order h3 {
	margin-top: 20px;
	padding: 20px 0;
	color: #e36368;
	font-size: 30px;
	text-align: center;
	border-bottom: 1px #e36368 solid;
}


/* + order-form
*----------------------------------------------------------------------------*/
.order-form {
	overflow: hidden;
	margin-top: 5px;
	padding: 15px 0;
	border-top: 5px #e36368 solid;
}

.order-form .askImg ,
.order-form form {
	margin-right: 1%;
	float: left;
	width: 49%;
}

.order-form form {
	margin-right: 0;
	margin-left: 1%;
}

form fieldset {
	border: 0;
}

form fieldset p {
	padding: 15px 5px;
	border-bottom: 1px #444444 solid;
	font-size: 18px;
}

form fieldset p label {
	width: 150px;
	display: inline-block;
}

form fieldset p input[type="text"] {
	width: 69%;
	font-size: 18px;
}

form fieldset p strong {
	color: #b01f24;
}

form fieldset p.content label ,
form fieldset p.content textarea {
	width: 100%;
	display: block;
	font-size: 18px;
}

form fieldset p.content textarea {
	height: 250px;
}

form fieldset.btn p {
	float: left;
	width: 55%;
}

form fieldset.btn p label ,
form fieldset.btn p input[type="text"] {
	width: auto;
}

form fieldset.btn p.send {
	margin-left: 1%;
	padding: 10px 5px;
	width: 40%;
	border-bottom-color: transparent;
}

form fieldset.btn p.send input[type="button"] {
	margin-left: 10px;
	padding: 5px 45px;
	background: #e26267;
	background: -moz-linear-gradient(top,  #e26267 0%, #b22227 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e26267), color-stop(100%,#b22227));
	background: -webkit-linear-gradient(top,  #e26267 0%,#b22227 100%);
	background: -o-linear-gradient(top,  #e26267 0%,#b22227 100%);
	background: -ms-linear-gradient(top,  #e26267 0%,#b22227 100%);
	background: linear-gradient(to bottom,  #e26267 0%,#b22227 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e26267', endColorstr='#b22227',GradientType=0 );
	display: inline-block;
	box-shadow: 0 3px 2px #655d5d;
	border-radius: 3px;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	line-height: 32px;
	text-align: center;
	font-size: 16px;
	color: #FFF;
}

form fieldset.btn p.send input[type="button"]:hover {
	opacity: 0.7;
}


/************ = 適應性 = ************/
/* +width:1024 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#order ul li .info .Quantity input[type="text"] {
		width: 30px;
	}
	form fieldset p label ,
	form fieldset p input[type="text"] ,
	form fieldset p.content textarea {
		font-size: 16px;
	}
	form fieldset p label {
		width: 140px;
	}
	form fieldset p input[type="text"] {
		width: 59%;
	}
	form fieldset p.content textarea {
		height: 100px;
	}
	form fieldset.btn p {
		width: 54%;
	}
	form fieldset.btn p.send input[type="button"] {
		padding: 5px 35px;
	}
}


/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#order ul li {
		width: 100%;
	}
	#order ul li:nth-last-child(2) {
		border-bottom: 1px #ff0000 solid;
	}
	#order ul li .askPhoto {
		padding-left: 0;
		background: none;
	}
	.order-form .askImg {
		display: none;
	}
	.order-form form {
		margin-left: 0;
		width: 100%;
	}
}


/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#order ul li .askPhoto ,
	#order ul li .info {
		padding-right: 0;
		width: 100%;
	}
}


/* +width:450 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 450px) {
	.container .content-wrap {
		padding: 40px 0;
	}
	form fieldset p label ,
	form fieldset p input[type="text"] {
		width: 100%;
	}
	form fieldset.btn p input[type="text"] {
		width: 50px;
	}
	form fieldset.btn p {
		width: 45%;
	}
	form fieldset.btn p.send {
		width: 50%;
		padding: 15px 0;
	}
	form fieldset.btn p.send input[type="button"] {
		padding: 0 15px;
	}
}


/* +width:320 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 320px) {
}