@charset "UTF-8";
html {
	height: 100%;
	font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#333333;
	-webkit-text-size-adjust: 100%;
	letter-spacing:1px;
}
body {
	height: 100%;
	background-image: url( '../img/bgJapan.jpg' );
}
header {
	width: 100%;
	background: #323232;
}

header h1 {
	text-align:center;
}

footer {
	position: sticky;
	top: 100vh;
	width: 100%;
}

#copyright {
	padding:20px 0px;
	background: #323232;
	text-align: center;
	color:#ffffff;
}

img {
	vertical-align: bottom;
}

a {
	color:#333333;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.wrap960 {
	width:100%;
	max-width:960px;
	margin:auto;
}

.wrap840 {
	width:100%;
	max-width:840px;
	margin:auto;
}

.middleTitle {
	padding:20px 0px;
	font-size:1.5em;
	text-align:center;
	letter-spacing:10px;
	font-weight:normal;
}

/*
.h3 {
	position: relative;
	margin:20px 0px;
	padding: 0 65px;
	text-align: center;
}

.h3:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #000;
}

.h3 span {
	position: relative;
	padding: 0 1em;
	background: #fff;
}
*/

.desc {
	width:95%;
	margin:20px auto;
	letter-spacing: 2px;
	line-height:150%;
}

/** 入力部品 **/
.success-message,
.success {
	color:blue;
	font-weight:bold;
}

.error-message,
.error {
	color:red;
	font-weight: bold;
}

form {
	margin-bottom:30px;
	padding:20px 0px;
	background-color:rgba(255,235,205,0.55);
	border:solid 1px;
	border-radius: 5px;
}
input, select, textarea {
	padding:10px;
	font-weight:normal;
	border:solid 1px #999999;
}

input[type="submit"] {
	padding:5px 10px;
}

.input100 {
	width:calc( 100% - 20px );
}

.tel {
	width:60px;
	text-align:center;
}

.inputWrap {
	width:95%;
	margin:auto;
}

.inputWrap th,
.inputWrap td {
	padding:10px;
}

.inputWrap th {
	width:180px;
	border-right:solid 1px #cccccc;
}

.inputWrap tr {
	border-bottom:dotted 1px #cccccc;
}

.inputWrap tr:last-child {
	border-bottom:none;
}

.btnWrap {
	margin:20px 0px;
	text-align:center;
}

.telWrap li {
	display:inline;
}

.personWrap,
.attentionWrap {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items: stretch;
}

.personWrap dt,
.personWrap dd {
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:dotted 1px #cccccc;
}

.personWrap dt {
	flex-basis: calc( 100% - 100px );
	line-height:40px;
}

.personWrap dd {
	flex-basis:100px;

}

.attentionWrap {
	margin:10px auto;
	line-height:150%;
	letter-spacing: 2px;
	font-size:0.8em;
}

.attentionWrap dt {
	flex-basis: 20px;
}

.attentionWrap dd {
	flex-basis: calc( 100% - 20px );
}

.textarea {
	width:100%;
	height:50px;
}

.remarksWrap {
	width:95%;
	margin:20px auto 0px auto;
	letter-spacing: 2px;
	line-height:150%;
	font-size:0.9em;
}

.check-wrap {
	width:calc( 95% - 40px );
	margin:20px auto;
	padding:20px;
	background-color:#ffffff;
	border:solid 1px;
	font-size:1.0em;
}

.check-text {
	text-align:center;
}

.finishWrap {
	width:calc( 85% - 20px );
	margin:10px auto;
	padding:20px;
	border:solid 1px #333333;
	background-color:#ffffff;
	line-height: 150%;
	letter-spacing:2px;
}

.completed__notice-text {
	color:red;
	font-weight: bold;
	font-size:1.5em;
}

.decimalList {
	list-style-type:decimal;
	margin-left:30px;
}

.privacy-policy {
	color: #555;
	font-size: 0.9em;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: calc( 95% - 24px );
	height: 200px;
	overflow-y: scroll;
	margin:20px auto;
	padding: 6px 12px;
}

.privacy-policy h3 {
	text-align:center;
}

.check-disabled {
	color: #afafaf;
}

.reserveTitle {
	width:90%;
	margin:10px auto;
	padding-bottom:10px;
	border-bottom:dotted 1px;
	text-align:center;
}


@media only screen and ( max-width:780px ) {
}

@media only screen and ( max-width:480px ) {
	form {
		width:90%;
		margin:auto;
	}
	.inputWrap {
		width:90%;
		margin:20px auto;
	}
	.inputWrap th,
	.inputWrap td {
		display:block;
		width:100%;
		border:none;
	}
	.input100 {
		width:80%;
	}
}
