@charset "UTF-8";
* {
	font-family: "Lucida Grande","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Geneva,Arial,Verdana,sans-serif;
	font-size: 15px;
	color: #232323;
	margin: 0px;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { display: inline-block; }

* html .clearfix { height: 1% }
.clearfix {display:block;}
h2 {
	font-family: "Myriad Pro", "Verdana", "Arial", "Helvetica", "sans-serif";
	font-size: 20px;
	color: #000;
	text-align: center;
	font-weight: normal;
}
h3{
	font-size: 20px;
	text-align: center;
	margin-bottom: 10px;
}
body{
	background: #ececec;
}
div.header {
	padding: 20px;
	background-color: #ffffff;
	box-shadow:2px 2px 6px 2px #e0e0e0;
	-moz-box-shadow:2px 2px 6px 2px #e0e0e0;
	-webkit-box-shadow:2px 2px 6px 2px #e0e0e0;
}
.header-logo {
	text-align: center;
	margin-bottom: 5px;
}
.header-content{
	width: 650px;
	margin: auto;
}
.header-textarea {
	padding: 10px;
	background: #a7ffdf;
	margin: 10px 0;
	border-radius: 10px;
}
.header-textarea p{
	padding: 5px 0;
	color: #555;
	line-height: 16px;
}
div.footer {
	text-align: center;
}
div.footer img{
	margin: 10px;
}
.caption {
	font-size: 15px;
    font-weight: normal;
	margin-bottom: 10px;
	line-height: 1.7em;
	text-align: center;
}
.box{
	font-weight: normal;
	padding: 1em;
    margin: 2em 0;
    background: #FFFFFF;
	line-height: 2.3em;
}
.box dl{
	margin-bottom: 10px;
}
.box dl dt{
	float: left;
	margin-right: 5px;
}
@media screen and (max-width: 693px){
.box dl dt{
	float: none;
	margin: 0;
}
.box dl dd{
	margin-left: 15px;
	margin-bottom: 10px;
}
}

.prov {
	width: 490px;
	margin: 20px auto;
	background: #fff;
	padding: 30px 70px;
	box-shadow:2px 2px 6px 2px #e0e0e0;
	-moz-box-shadow:2px 2px 6px 2px #e0e0e0;
	-webkit-box-shadow:2px 2px 6px 2px #e0e0e0;
}
.prov p span{
	font-size: 16px;
	color: #d43530;
	font-weight: bold;
}
input[type="text"] ,
input[type="number"] {
	width: 100%;
	height: 32px;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 1.2em;
	text-indent: 0.7em;
	border-radius: 4px;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.15);
}
input[type="text"]:focus {
	background: #edf4ff;
	border: 1px solid #4881d9;
}
textarea {
	width: 100%;
	height: 108px;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 1em;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.15);
}
textarea:focus {
	background: #edf4ff;
	border: 1px solid #4881d9;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	background: #eee url("../img/arrow.png") no-repeat;
	background-size: 10px 7px;
	background-position: right 10px center;
	border: 1px solid #ccc;
	width: 150px;
	height: 36px;
	font-size: 1em;
	text-indent: 0.3em;
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
	box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.15);
}
select:focus {
	border: 1px solid #4881d9;
	background: #edf4ff url("../img/arrow.png") no-repeat;
	background-size: 10px 7px;
	background-position: right 10px center;
}
.item span {
	font-size: 12px;
	color: #D41F00;
}
.item,.item2 {
	font-size: 15px;
	font-weight: bold;
	padding: 0 0 5px 0;
	line-height: 18px;
	width: 100%;
	color: #555;
	vertical-align: middle;
}
.item2 span {
	font-size: 12px;
	color: #D41F00;
}
.iteminput {
	font-size: 12px;
	/*line-height: 18px;*/
	width: 100%;
	display: inline-block;
	vertical-align: middle;
}
.iteminput label{
	margin: 0 0 0 5px;
}
.itemconfirm{
	font-size: 15px;
	padding: 0 0 15px;
	border-bottom: dotted 1px #ccc;
}
.col-radioaffter #child_text {
	width: 70%;
}
.col-postalcode input{
	width: 30%;
}
.col-tel input{
	width: 25%;
}
.col-time select{
	width: 15%;
}
.itemkiyaku {
	font-size: 12px;
	line-height: 18px;
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	padding-bottom: 4px;
}
.formdiv {
	padding: 18px 0;
}
div#errorArea{
	width: auto;
	background: #ff7777;
	border-radius: 10px;
	padding: 10px;
	color: #ffffff;
	line-height: 21px;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 12px;
	box-shadow: 0px 0px 0px 8px #ff7777;
}
.kiyaku {
	font-size: 12px;
	height: 200px;
	border: solid 1px #ccc;
	overflow:scroll;
	padding:5px;
}
.btn-area{
    text-align: center;
    display: block;
    margin: 10px;
}
.btn-area input {
	border: solid 1px #ffffff;
	padding: 15px 25px;
	background: #000000;
	margin: 0 0 20px;
	font-family: Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	border-radius: 6px;
	-webkit-appearance: none;
}
.btn-area a {
	border: solid 1px #ffffff;
	padding: 15px 25px;
	background: #000000;
	margin: 0 0 20px;
	font-family: Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	border-radius: 6px;
	-webkit-appearance: none;
	text-decoration: none;
}
.thanks-text{
	background: #efefef;
	padding: 10px;
	font-size: 15px;
	line-height: 26px;
	margin: 0 0 15px;
}




@media screen and (max-width: 693px){
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 18px;
	}
	div.header {
		padding: 10px 4%;
	}
	.header-content{
		width: 100%;
	}
	.header-textarea {
		padding: 10px;
		margin: 10px 0;
	}
	.prov {
		width: 92%;
		margin: 20px 0;
		background: #fff;
		padding: 10px 4%;
	}
	input[type="text"] {
		width: 95%;
	}
	.col-radioaffter #child_text {
		width: 70%;
	}
	.col-postalcode input{
		width: 30%;
	}
	.col-tel input{
		width: 25%;
	}
}

.item-ttl{
	background-color: #FFD6D6;
    padding: 10px;
    margin: 0 0 20px;
	border-left: 10px solid #000000;
}


#payment-status-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  border-radius: 50px;
  margin: 0 auto;
  width: 225px;
  height: 48px;
  visibility: hidden;
}

#payment-status-container.missing-credentials {
  width: 350px;
}

#payment-status-container.is-success:before {
  content: '';
  background-color: #00b23b;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.7071 6.70711C12.0968 6.31744 12.0978 5.68597 11.7093 5.29509C11.3208 4.90422 10.6894 4.90128 10.2973 5.28852L11 6C10.2973 5.28852 10.2973 5.28853 10.2973 5.28856L10.2971 5.28866L10.2967 5.28908L10.2951 5.29071L10.2886 5.29714L10.2632 5.32224L10.166 5.41826L9.81199 5.76861C9.51475 6.06294 9.10795 6.46627 8.66977 6.90213C8.11075 7.4582 7.49643 8.07141 6.99329 8.57908L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L6.29289 10.7071C6.68342 11.0976 7.31658 11.0976 7.70711 10.7071L11.7071 6.70711Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.7071 6.70711C12.0968 6.31744 12.0978 5.68597 11.7093 5.29509C11.3208 4.90422 10.6894 4.90128 10.2973 5.28852L11 6C10.2973 5.28852 10.2973 5.28853 10.2973 5.28856L10.2971 5.28866L10.2967 5.28908L10.2951 5.29071L10.2886 5.29714L10.2632 5.32224L10.166 5.41826L9.81199 5.76861C9.51475 6.06294 9.10795 6.46627 8.66977 6.90213C8.11075 7.4582 7.49643 8.07141 6.99329 8.57908L5.70711 7.29289C5.31658 6.90237 4.68342 6.90237 4.29289 7.29289C3.90237 7.68342 3.90237 8.31658 4.29289 8.70711L6.29289 10.7071C6.68342 11.0976 7.31658 11.0976 7.70711 10.7071L11.7071 6.70711Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
}

#payment-status-container.is-success:after {
  content: 'Payment successful';
  font-size: 14px;
  line-height: 16px;
}

#payment-status-container.is-failure:before {
  content: '';
  background-color: #cc0023;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
}

#payment-status-container.is-failure:after {
  content: 'Payment failed';
  font-size: 14px;
  line-height: 16px;
}

#payment-status-container.missing-credentials:before {
  content: '';
  background-color: #cc0023;
  width: 16px;
  height: 16px;
  margin-right: 16px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
  mask: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L6.58579 8L4.29289 10.2929C3.90237 10.6834 3.90237 11.3166 4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L8 9.41421L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071C12.0976 11.3166 12.0976 10.6834 11.7071 10.2929L9.41421 8L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289C11.3166 3.90237 10.6834 3.90237 10.2929 4.29289L8 6.58579L5.70711 4.29289Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E%0A");
}

#payment-status-container.missing-credentials:after {
  content: 'applicationId and/or locationId is incorrect';
  font-size: 14px;
  line-height: 16px;
}

#payment-status-container.is-success.store-card-message:after {
  content: 'Store card successful';
}

#payment-status-container.is-failure.store-card-message:after {
  content: 'Store card failed';
}
