@charset "utf-8";

header {
	background: url("images/estimate/pc_header_bg.jpg") center top no-repeat;
	background-size: cover;
	width: 100%;
}

input[type="checkbox"]:hover,
label:hover {
	cursor: pointer;
}

article .wrap {
	padding-top: 75px;
}

h1 {
	margin-bottom: 60px;
	background: url("images/estimate/pc_estimate.png") top center no-repeat;
}
h1 img {
	display: block;
	margin: 0 auto;
	opacity: 0;
}
p.top-message {
	text-align: center;
	padding: 40px 0;
}
table.form {
	width: 100%;
	margin: 0 0 30px 0;
	border-collapse: separate;
	border-spacing: 0 1px;
}
table.form th {
	padding: 8px 20px;
	font-weight: normal;
	text-align: left;
	width: 180px;
}
table.form td {
	padding: 12px 20px;
	text-align: left;
}
table.form td.button:hover {
	opacity: 0.8;
	cursor: pointer;
}
table.form tr:nth-child(even) {
	background: #ffffff;
}
table.form tr:nth-child(odd) {
	background: #f1f1f1;
}
table.form input {
	height: 21px;
	border: 1px solid #c8c8c8;
}
#address_zip_1,
#address_zip2_1 {
	margin-right: 10px;
	width: 48px;
}
#address_zip_2,
#address_zip2_2 {
	margin-left: 10px;
	width: 54px;
}
#tel_1,
#tel2_1 {
	margin-right: 10px;
	width: 54px;
}
#tel_2,
#tel2_2 {
	margin: 0 10px;
	width: 54px;
}
#tel_3,
#tel2_3 {
	margin-left: 10px;
	width: 54px;
}
#data1_1,
#data1_2 {
	width: 21px;
}
#f_name, #f_name2,
#g_name, #g_name2,
#f_name_kana, #f_name_kana2,
#g_name_kana, #g_name_kana2 {
	margin: 0 10px;
	width: 120px;
}
#email {
	width: 360px;
}
table.form .textarea {
	width: 100%;
	box-sizing: border-box;
	height: 140px;
	border: 1px solid #c8c8c8;
}
table.sub-item {
	width: 100%;
}
table.sub-item tr {
	background-color: #f1f1f1 !important;
}
table.sub-item th {
	width: 110px;
	padding: 8px 0;
}

#add-address {
	display: block;
	margin: 30px auto;
	border: 2px solid #000;
	width: 436px;
	padding: 12px 0 11px;
	overflow: hidden;
}
#add-address:hover {
	cursor: pointer;
	opacity: 0.8;
}
#add-address > img {
	float: left;
	width: 285px;
	margin-top: 2px;
	margin-left: 48px;
}
#add-address span {
	float: right;
	margin-right: 24px;
}
#add-address span img {
	width: 27px;
	display: block;
}

#add-item {
	display: block;
	margin: 30px auto;
	border: 2px solid #000;
	width: 436px;
	overflow: hidden;
	padding: 12px 0 11px;
}
#add-item:hover {
	cursor: pointer;
	opacity: 0.8;
}
#add-item > img {
	float: left;
	width: 156px;
	margin-top: 2px;
	margin-left: 120px;
}
#add-item span {
	float: right;
	margin-right: 24px;
}
#add-item span img {
	width: 27px;
	display: block;
}

#request-items ul {
	z-index: 2;
}

#request-items ul > li {
	position: relative;
	transition: all 0.3s;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 2;
}
/*
#request-items .del-item {
	border: 1px solid #000;
	padding: 0 11px;
	position: absolute;
	top: 0;
	right: 0;
}
*/
#request-items .del-item {
	display: block;
	float: right;
	box-sizing: border-box;
	width: 130px;
	text-align: center;
	border: 1px solid #000;
	padding: 2px;
	margin-bottom: 4px;
}
#request-items .del-item:hover {
	cursor: pointer;
	opacity: 0.8;
}

#request-items ul li table tr td table {
	border-collapse: separate;
	border-spacing: 4px 2px;
	width: 100%;
}
#request-items ul li table tr td table td {
	display: table-cell;
}
#request-items ul li table tr td table.item td.button {
	box-sizing: border-box;
	border: 1px solid #c8c8c8;
	padding: 20px 10px;
	vertical-align: middle;
	text-align: center;
	width: 80px;
}
#request-items ul li table tr td table.item td.preview {
	padding: 8px 0 0 0;
	background-color: #ddd;
	text-align: center;
	vertical-align: middle;
}
#request-items ul li table tr td table.item td.photo {
	display: none;
}
#request-items ul li table tr td textarea {
	width: 100%;
	border: 2px solid #c8c8c8;
	padding: 1.4925% 2.9850%;
}
.thumb {
	height: 60px;
	cursor: pointer;
}

.require {
	color: #b43e3e;
	padding: 0 5px;
}
.notice {
	font-size: 12px;
	padding-left: 5px;
}
p.warning {
	margin-bottom: 17px;
}
p.warning a {
	color: #000;
}
p.warning a:hover {
	text-decoration: none;
}

table.item tr {
	background-color: #f1f1f1 !important;
}

#another-address {
	overflow: hidden;
}

.close {
	height: 0;
}
.open {
	height: auto;
}
#caution {
	background-color: #f1f1f1;
	padding: 40px 100px;
	margin-bottom: 20px;
}
#caution dt {
	text-align: center;
	line-height: 1.0;
	margin-bottom: 20px;
	font-size: 1.2rem;
}
#caution dd ul li {
	line-height: 1.5;
	margin-top: 10px;
	text-indent: -1.0em;
	padding-left: 1.0em;
}
#caution dd ul li:first-child {
	margin-top: 0;
}


/* error */
.error-message-top {
	color: #f00;
	font-size: 14px!important;
	font-weight: bold!important;
	background-color: #ffecec;
	text-align: center!important;
	padding: 20px 0px;
	margin: 12px 0!important;
	border-bottom: 3px double #ce0807;
	border-top: 3px double #ce0807;
}
table.form th.error {
	background-color: #fcc;
}

/* smart phone */

@media only screen and ( max-width: 768px ) {

	/* common */
	input,textarea {
		font-size: 1.6rem;
	}

	/* item */
	h1 {
		background-image: none;
		width: 38.6567%;
		margin: 0 auto 8.9552%;
	}
	h1 img {
		display: block;
		opacity: 1;
		width: 100%;
	}

	article .wrap {
		padding: 8.9552% 5.3333% 0;
		width: 89.3334%;
	}

	article > .wrap > p {
		text-align: center;
		margin-bottom: 4.4776%;
	}
	p.message {
		padding: 4.0298% 0;
		font-size: 1.2rem;
		letter-spacing: -0.05em;
	}

	article > .wrap > a {
		border: 2px solid #000;
		width: 99.403%;
		padding: 2.6865% 0;
		display: block;
		position: relative;
		overflow: hidden;
		margin-bottom: 3.1343%;
	}
	article > .wrap > a span {
		float: right;
		display: block;
		margin-right: 5.9701%;
		width: 5.8208%
	}
	article > .wrap > a span img {
		display: block;
		width: 100%;
	}
	article > .wrap > a.selected span img {
		opacity: 0;
	}
	article > .wrap > a.selected span {
		background: url("images/order/plus_icon.png") center center no-repeat;
		background-size: cover;
	}

	.error-message-top {
		padding: 20px;
	}
	#add-address {
		margin: 8.5074% auto;
		border: 2px solid #000;
		box-sizing: border-box;
		width: 100%;
		padding: 2.6865% 0 2.8358%;
		overflow: hidden;
	}
	#add-address > img {
		float: left;
		width: 66.1194%;
		margin-top: 0;
		margin-left: 10.8955%;
	}
	#add-address span {
		float: right;
		width: 5.8208%;
		margin-right: 5.9701%;
	}
	#add-address span img {
		display: block;
		width: 100%;
	}

	#add-item {
		margin: 5.9701% auto;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		padding: 2.6865% 0 2.8358%;
	}
	#add-item > img {
		width: 36.2686%;
		margin-top: 0;
		margin-left: 28.5074%;
		float: left;
	}
	#add-item span {
		float: right;
		width: 5.8208%;
		margin-right: 5.9701%;
	}
	#add-item span img {
		display: block;
		width: 100%;
	}

	table,
	table tbody,
	table tr,
	table tr th,
	table tr td {
		display: block;
	}

	table.form tr {
		background: #fff !important;
	}
	table,
	table tbody,
	table tr {
		width: 100%;
	}
	table.form tr th {
		font-weight: normal;
		text-align: left;
		padding: 2.8358% 0;
		width: 100%;
	}
	table.form tr td {
		background-color: #f1f1f1;
		padding: 3.2835% 2.9850%;
	}
	table.form tr td p {
		font-size: 1.2rem;
	}
	table tr td input[type=text],
	table tr td input[type=tel],
	table tr td input[type=email] {
		border: 2px solid #c8c8c8;
		margin: 0
	}
	table tr td select {
		font-size: 16px;
	}
	table tr td input[type=tel] {
		width: 50px;
	}
	table tr.name td input {
		margin: 0 3.1343% 0 1.4925%;
		width: 25%;
	}
	table.sub-item tr {
		background-color: transparent !important;
	}
	table.sub-item tr th {
		padding: 0.7462% 0;
		width: 100%;
	}
	table.sub-item tr td {
		padding: 0.7462% 0 1.4925%;
	}
	#personal-info {
		margin-bottom: 8.5074%;
	}

	#communication {
		margin-bottom: 8.9552%;
	}

	#item_list_container {
		margin: 0;
		padding: 0;
	}
	#request-items ul {
		margin-bottom: 5.9701%;
		padding: 0;
	}
	#request-items ul > li {
		position: relative;
		margin-top: 5.9701%;
	}
	#request-items ul > li:first-child {
		margin-top: 0;
	}
	#request-items ul li > span {
		border: 2px solid #000;
		color: #000;
		text-decoration: none;
		line-height: 1.0;
		padding: 1.1940% 5.0746%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#request-items ul li table {
		border-collapse: separate;
		border-spacing: 2px 4px;
	}
	#request-items ul li table tr td.items p.guidance {
		padding: 8px 0 8px 8px;
		font-size: 1.2rem;
	}

	#request-items ul li table tr td table {
		width: 100%;
		margin: 4px 0 0 0;
		border-collapse: separate;
		border-spacing: 8px 2px;
	}
	#request-items ul li table tr td table td {
		display: table-cell;
	}
	#request-items ul li table tr td table.item tr {
		background-color: #f1f1f1 !important;
	}
	#request-items ul li table tr td table.item td.button {
		box-sizing: border-box;
		border: 1px solid #c8c8c8;
		padding: 20px 8px;
		vertical-align: middle;
		text-align: center;
		width: 100px;
	}
	#request-items ul li table tr td table.item td.preview {
		padding: 4px 0 0 0;
		background-color: #ddd;
		width: 72%;
		text-align: center;
		vertical-align: middle;
	}
	#request-items ul li table tr td table.item td.photo {
		display: none;
	}
	#request-items ul li table tr td textarea {
		width: 100%;
		border: 2px solid #c8c8c8;
		padding: 1.4925% 2.9850%;
	}

	article .wrap > p.warning {
		text-align: left;
		line-height: 1.5;
		font-size: 1.2rem;
	}
	article .wrap > p.warning a {
		color: #000;
	}

	#caution {
		background-color: #f1f1f1;
		padding: 8.8059% 5.9701%;
		margin-bottom: 7.7611%;
	}
	#caution dt {
		text-align: center;
		line-height: 1.0;
		margin-bottom: 7.4626%;
		font-size: 1.2rem;
	}
	#caution dd {
		font-size: 1.2rem;
	}
	#caution dd ul li {
		line-height: 1.5;
		margin-top: 2.9850%;
		text-indent: -1.0em;
		padding-left: 1.0em;
	}
	#caution dd ul li:first-child {
		margin-top: 0;
	}

	#agreement span {
		line-height: 3.0;
	}
	#agreement span {
		display: block;
	}

	div.privacy p {
		text-align: left;
	}

	#f_name, #f_name2,
	#g_name, #g_name2,
	#f_name_kana, #f_name_kana2,
	#g_name_kana, #g_name_kana2 {
		margin: 0 10px 0 4px;
		width: 28%;
	}
	#address_zip_1,
	#address_zip_2,
	#address_zip2_1,
	#address_zip2_2 {
		width: 40px;
	}
	#address_1,
	#address_2,
	#address_3,
	#address2_1,
	#address2_2,
	#address2_3 {
		width: 90%;
	}
	#tel_1,
	#tel2_1 {
		margin-right: 10px;
		width: 18%;
	}
	#tel_2,
	#tel2_2 {
		margin: 0 10px;
		width: 18%;
	}
	#tel_3,
	#tel2_3 {
		margin-left: 10px;
		width: 18%;
	}
	#email {
		width: 90%;
	}
	.thumb {
		height: 66px;
		cursor: pointer;
	}
}

.wrap p.error-message {
	color: #f00;
	text-align: left;
	padding: 4px 0 0 0;
}