/*-----------------------------------------------
__Order
-----------------------------------------------*/
#order dt {
	font-size: 120%;
	padding: 5px 0;
	border-bottom: 1px solid #17325F;
	color: #17325F;
	margin-top: 2em;
	position:relative;
}
#order dt::after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	height:2px;
	width:5em;
	background:#17325F;
}
#order dd {
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#order table {
	width: 100%;
	margin: 15px auto;
	font-size: 90%;
}
#order th small {
	font-size: 80%;
	color: #c33131;
}
#order th,
#order td {
	padding: 5px 0;
}
#order th {
	text-align: center;
	font-size:1.2em;
}
#order td.center {
	text-align: center;
}
#order td.right {
	text-align: right;
	font-size:1.3em;
}

p#emailCheckError {
	color: #fff;
	background: #c33131;
	position: relative;
	margin-top: 15px;
	padding: 5px 15px;
	box-sizing: border-box;
}
p#emailCheckError::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 10%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent #d81647 transparent;
}

#order td input {
	border: 1px solid #B9CFDD;
	background: #fff;
	padding:10px;
	border-radius:5px;
}

#order td input.num {
	margin-right: 0.5em;
	width: 4em;
	text-align: center;
	padding:10px;
	border-radius:5px;
}
#order td input:disabled {
	border-color: #adb8c4;
	background: #d1deec;
}

#order td input[type="checkbox"] {
	display: none;
}
#order td input[type="checkbox"]+label {
	display: flex;
	align-items: center;
	border-radius: 5px;
	background: #fff;
	padding: 10px 10px 10px 40px;
	border: 1px solid #B9CFDD;
	position: relative;
}
#order td input[type="checkbox"]+label img {
	margin-right: 10px;
	max-width: 80px;
}
#order td input[type="checkbox"]+label::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background: #B9CFDD;
	border: 4px solid #B9CFDD;
}

#order td input[type="checkbox"]:checked+label {
	background: #B9CFDD;
	border-color: #17325F;
}
#order td input[type="checkbox"]:checked+label::before {
	background: #17325F;
	border: 4px solid #fff;
}
#order td input[type="checkbox"]:disabled+label {
	background: #d7dfe1;
	border-color: #d7dfe1;
	cursor:default;
	pointer-events:none;
}
#order td input[type="checkbox"]:disabled+label::before{
	background: #abb3bd;
	border-color:#abb3bd;
}

#order #address dd {
	padding: 20px 0;
}
#order #address th {
	width: 20%;
	text-align: right;
	vertical-align: middle;
	padding: 5px 10px 5px 0;
	font-size:1em;
	/* vertical-align: top;
	padding: 15px 10px 5px 0; */
}
#order #address td {
	padding: 7px 0
}
#order #address input {
	width: 100%;
}
#order #address span.add {
	position: relative;
}
#order #address span.add input {
	width: 40%;
	padding-left: 2em;
}
#order #address span.add::before {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	content: "\3012";
	z-index: 1;
	line-height: 2;
	color: #90a1b3;
}
/* #order #address input#address1{
    margin-top: 10px;
  } */
#order #address td small {
	color: #90a1b3;
}

#order .total th {
	width: 75%;
	text-align: right;
	font-weight: normal;
}
#order .total td {
	width: 25%;
	text-align: right;
	padding-right: 4em;
	box-sizing: border-box;
}
#order .total td em {
	font-size: 110%;
	padding-left: 0.1em;
	font-style:normal;
}

#order .total tr.bd_top {
	border: 1px solid #aaa;
	border-bottom: none
}
#order .total tr.bd_bottom {
	border: 1px solid #aaa;
	border-top: none;
}
#order .total tr.bd_top th {
	padding: 15px 5px 5px 5px;
}
#order .total tr.bd_top td {
	padding: 15px 4em 5px 5px;
}
#order .total tr.bd_bottom td {
	font-size: 80%;
	padding: 5px 10px 15px 5px;
}

#order .total tr.pd_top th,
#order .total tr.pd_top td {
	padding-top: 15px;
}
#order .total .final th,
#order .total .final td {
	font-weight: bold;
	font-size:1.2em;
}
#order .total .final td{
	padding-right:3em;
}
#order .total .final em {
	font-size: 140%;
	font-style:normal;
}

#order p.ta_center {
	font-size: 90%;
	margin:20px auto 0;
	display:flex;
	flex-direction: column;
	gap:10px;
	text-align: center;
	width:max-content;
	justify-content: center;
	align-items: center;
	font-family: "Yu Gothic",serif;
}
#order p.ta_center2{
	display:block;
	align-items: normal;
	font-size:1em;
	width:auto;
}
#order p.ta_center3{
	display:block;
	align-items: normal;
	width:auto;
}

#order #last {
	border-top: 1px solid #ddd;
}
#order #last tr {
	border-bottom: 1px solid #ddd;
}
#order #last th,
#order #last td {
	padding: 10px;
}
#order #last td{
	font-size:1.1em;
}
#order #last th {
	width: 35%;
	text-align: right;
	box-sizing: border-box;
	border-right: 1px solid #ddd;
	background: #B9CFDD;
	font-size:1em;
}
#order #last tr:first-of-type td {
	white-space: pre-wrap;
	font-size: 130%;
	/* line-height: 1.7; */
	/* padding-bottom: 1em; */
}

button[type="submit"]#finish {
	display: inline-block;
	width:90%;
	padding: 20px 10px;
	text-align: center;
	border-radius: 5px;
	text-decoration: none !important;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 1);
	transition: all ease .3s;
	margin: 10px auto;
}
button[type="button"] {
	display: block;
	width: 90%;
	min-width: 200px;
	padding: 20px 10px;
	text-align: center;
	border-radius: 5px;
	text-decoration: none !important;
	position: relative;
	overflow: hidden;
	border: 1px solid #4d4d4d;
	background: #f0f0f0;
	transition: all ease .6s;
	margin: 10px auto;
}
button[type="submit"]#finish:hover {
	background: #fff;
	border-color:#17325F;
}
button[type="button"]:hover {
	background: #fff;
}
button[type="submit"]#finish span {
	position: relative;
	z-index: 1;
	color: #fff;
	font-weight: bold;
	font-size: 130%;
	transition: all ease .5s;
}
button[type="button"] span {
	position: relative;
	z-index: 1;
	transition: all ease .6s;
}
button[type="submit"]#finish span {
	color: #fff;
}
button[type="submit"]#finish:hover span {
	color: #17325F;
}
button[type="submit"]#finish::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 0;
	background: #17325F;
	transition: all ease .6s;
}
button[type="submit"]#finish:hover::before {
	opacity: 0;
}

@media screen and (min-width:641px) and (max-width:999px) {
	#order #address th {
		width: 25%;
	}
	#order .total th {
		width: 70%;
	}
	#order .total td {
		width: 30%;
		padding-right: 3.5em
	}
	#order .total tr.bd_top td {
		padding: 15px 3.5em 5px 5px;
	}

}

@media screen and (min-width:0px) and (max-width:640px) {

	#order td input.num {
		padding: 5px;
		width: 2.5em;
		margin: 0 5px;
	}
	#order td span {
		font-size: 80%;
	}
	#order .total td {
		padding-right: 10px;
	}
	#order .total tr.bd_top td {
		padding: 15px 10px 5px 5px
	}
	#order .total tr.bd_bottom td {
		text-align: left;
	}

	#order td input[type="checkbox"]+label {
		padding: 10px 5px 10px 35px;
		flex-direction: column;
		align-items: center;
	}
	#order td input[type="checkbox"]+label img {
		display: block;
		max-width: 60px;
		margin-bottom: 10px;
	}
	#order #address td,
	#order #address th,
	#order #last td,
	#order #last th {
		display: block;
		width: 100%;
	}
	#order #address th {
		text-align: left;
		padding-bottom: 0;
	}
	#order #last,
	#order #last tr {
		border: none;
	}
	#order #last th {
		text-align: left;
		border-right: none;
	}

	#order p.ta_center {
		text-align: ;
	}

}
