@charset "utf-8";

p.error {
  color: #af2927;
  background-color: #f7e8e8;
  border: 1px solid #d4425a;
  padding: 10px 0 10px 10px;
  border-radius: 5px;
  width: 98%;
  margin-top: 10px;
}

p.thanks {
  font-weight: bold;
  font-size: 1.6em;
}

a.to-top {
  display: block;
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 50px;
  width: 160px;
  font-weight: bold;
  text-decoration: none;
}

th span.required {
  background-color: #ff5601;
  color: #ffffff;
  padding: 5px 6px;
}

.contents p {
  font-size: 1.1em;
}

.form-style {
	line-height: 1.3;
	font-size: small;
}

.form-style table {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
	margin:0 0 30px 0;
}

.form-style th {
	background-color: #f5f5f5;
	border-bottom: 1px solid #ccc;
	padding: 15px 15px 15px 15px;
	width: 200px;
	text-align: left;
	vertical-align: top;
}

.form-style input,
.form-style select,
.form-style textarea {
	padding: 0.3em 0.5em;
	margin: 0 auto 8px;
	width: 90%;
}

.form-box dt {
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
	padding:0px 0px 5px 0px;
	font-size: small;
	margin: 0px 0px 8px 0px;
	color: #1f72b8;
}

.form-box dd {
	padding:0px 10px 5px 10px;
	font-size: small;
	margin:0px 0px 20px 0px;
}

.form-style h4 {
  margin-bottom: 20px;
}

.form-style .back {
  margin-top: 20px;
}

@media screen and (min-width: 561px) {
  body #contents p.complete-image {
    width: 392px;
    margin-top: 20px;
  }

  .form-style td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 15px 10px;
  }

  .form-style table td .p-postal-code {
    width: 150px;
  }

  .p-text-box {
  	overflow: auto;
  	width: 690px;
  	height: 150px;
  	border: 1px solid #abadb3;
    text-align: left;
    padding: 10px;
  }
}

@media screen and (max-width: 560px) {
  body #contents p.complete-image {
    width: 90% !important;
    margin-top: 20px;
  }

  body #contents .contents p {
    width: 90% !important;
    margin: 0 !important;
  }

  .example, .attention {
    display: block;
  }

  .form-style {
		width: 100%;
	}

  .form-style h4 {
    padding: 10px;
  }

	.form-style table {
		width: 100%;
	}

	.form-style table th {
		display: block;
		width: 100%;
	}

	.form-style table tr {
		margin-bottom: 15px;
	}

	.form-style table tr td {
		display: block;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 10px;
	}

	.form-style textarea {
		width: 86%;
    margin: 0 auto;
	}

	.form-style input[type=text],
  .form-style input[type=password] {
		width: 90%;
    margin: 0 auto 5px;;
	}

	.form-style table th,
  .form-style table td {
		display: block;
		width: 100%;
		text-align: left;
		border-right: 1px solid #ccc;
	}

  .form-style table td .p-postal-code {
    width: 87%;
  }

  .form-style .zip-example {
    display: block;
  }

  td.personal-information {
    padding: 0 !important;
  }

  .p-text-box {
    overflow: auto;
  	width: 90%;
  	height: 150px;
  	border: 1px solid #abadb3;
    text-align: left;
    margin: 0 auto;
    padding: 10px;
  }

}