@charset "UTF-8";
/* CSS Document */

/*===================================================
	お見合い申込みページ用CSS
===================================================*/
header {
	margin-bottom: 40px;
}

footer {
	position: static;
}
/* --------------------------------------------------
	main
-------------------------------------------------- */
.reserveCnt {
	padding: 0 10px 50px;
	font-family: 'rounded-mplus';
	font-weight: 300;
}
	.reserveCnt > section {
		max-width: 660px;
		margin: 0 auto;
	}
	.reserveCnt h2 {
		width: 250px;
		height: 54px;
		margin: 0 auto;
		font-size: 28px;
		color: #90C31F;
		font-weight: 500;
		line-height: 54px;
		letter-spacing: 0.1em;
		background: url("../../common/img/1x/bg_main_title.png") no-repeat;
		background-size: 250px auto;
	}
	.reserveCnt h2 + p {
		margin: 15px 0;
		font-size: 12px;
		font-weight: 500;
	}
	/*現在ページチャート*/
	.reserveCnt .chart {
		overflow: hidden;
		display: table;
		width: 100%;
		max-width: 660px;
		margin: 0 auto 20px;
		font-size: 12px;
		border-radius: 4px;
		border: 2px solid #EEEEEE;
		background: #FFFFFF;
	}
		.reserveCnt .chart li {
			position: relative;
			display:table-cell;
			width: 120px;
			padding: 10px 0;
			font-size: 12px;
			text-indent: 1em;
		}
		.reserveCnt .chart li.current {
			color: #90C31F;
		}
		.reserveCnt .chart li:before,
		.reserveCnt .chart li:after {
			content: "";
			position: absolute;
			top: 50%;
			margin-top: -2em;
			border-top: 2em solid transparent;
			border-bottom: 2em solid transparent;
			border-left: 1em solid;
			right: -1em;
		}
		.reserveCnt .chart li:before {
			z-index: 2;
			border-left-color: #FFFFFF;
		}
		.reserveCnt .chart li:after {
			border-left-color: #EEEEEE;
			right: -1.2em;
			z-index: 1;
		}
		.reserveCnt .chart li:last-child:before,
		.reserveCnt .chart li:last-child:after {
			border: none;
		}
			.reserveCnt .chart li br {
				display: none;
			}
	.reserveCnt .chart + p,
	.reserveCnt .chart + div {
		margin-bottom: 20px;
		text-align: left;
	}
		.reserveCnt .chart + div aside p:before {
			content: '※';
		}
	.reserveCnt .chart + div aside + p {
		margin-top: 20px;
	}
		.reserveCnt .chart + div aside + p a {
			font-weight: bold;
			color: #007440;
		}
	.reserveCnt .contBox {
		margin-bottom: 25px;
		padding: 40px 20px;
		text-align: left;
		border-radius: 4px;
		background: #FFFFFF;
		box-shadow:0px 4px 6px 1px rgba(0,0,0,0.1);
		-moz-box-shadow:0px 4px 6px 1px rgba(0,0,0,0.1);
		-webkit-box-shadow:0px 4px 6px 1px rgba(0,0,0,0.1);
		background: #FFFFFF;
	}
	/* ボタン */
	.reserveCnt .btnGreen,
	.reserveCnt .btnOrange,
	.reserveCnt .btnPink {
		width: 320px;
		margin: 0 auto;
	}
		.reserveCnt .btnGreen input,
		.reserveCnt .btnOrange input,
		.reserveCnt .btnPink input {
			display: block;
			width:100%;
			height: 50px;
			padding-top: 4px;
			font-family: 'rounded-mplus';
			font-size: 16px;
			font-weight: 700;
			color: #FFFFFF;
			text-align: center;
			border-radius: 4px;
			border: 1px solid transparent;
			cursor: pointer;
			letter-spacing: 0.1em;
			-webkit-appearance:none;
			-moz-appearance: none;
			appearance: none;
		}
		.reserveCnt .btnGreen input {
			border-bottom: 4px solid #89AF33;
			background: #90C31F;
		}
		.reserveCnt .btnOrange input {
			border-bottom: 4px solid #DD8604;
			background: #FF9900;
		}
		.reserveCnt .btnPink input {
			border-bottom: 4px solid #dc8caf;
			background: #F19EC2;
		}
		.reserveCnt .btnGreen input[disabled],
		.reserveCnt .btnOrange input[disabled],
		.reserveCnt .btnPink input[disabled] {
			opacity: 0.4;
			pointer-events: none;
		}
		.reserveCnt .btnGreen input:active,
		.reserveCnt .btnOrange input:active,
		.reserveCnt .btnPink input:active {
			border-top:2px solid #FFFFFF;
			border-bottom: none;
		}
	.reserveCnt .backBtn {
		margin-bottom: 200px;
		cursor: pointer;
	}
/* --------------------------------------------------
	個人情報の取扱い
-------------------------------------------------- */
#privacy .contBox > dl {
	margin-bottom: 35px;
	font-family: HiraKakuPro-W3, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
}
	#privacy .contBox > dl > dt {
		margin-bottom: 1em;
		padding-left: 20px;
		font-size: 14px;
		font-weight: bold;
		background: url("../../common/img/1x/icon_disc_green.png") left 3px no-repeat;
		background-size: 14px auto;
	}
	#privacy .contBox > dl > dd {
		overflow-y: scroll;
		height: 300px;
		padding: 15px 10px;
		font-size: 12px;
		background: #F6F6F6;
	}
		#privacy .contBox > dl > dd p + p {
			margin-top: 1.5em;
		}
		#privacy .contBox > dl > dd aside p {
			margin: 1.5em 0 30px;
		}
		#privacy .contBox > dl > dd aside p:before {
			content: '※';
		}
		#privacy .contBox > dl > dd dl {
			margin-bottom: 30px;
		}
			#privacy .contBox > dl > dd dl dt {
				font-size: 13px;
				font-weight: bold;
			}
			#privacy .contBox > dl > dd dl dd ol,
			#privacy .contBox > dl > dd dl dd ul {
				margin-top: 1.5em;
			}
			#privacy .contBox > dl > dd a {
				color: #007440;
			}
		#privacy .contBox > dl > dd dl + p {
			text-align: right;
		}

/* チェックボックス */
#privacy .checkBox {
	width: 300px;
	margin: 0 auto 40px;
	font-family: HiraKakuPro-W3, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
	font-weight: bold;
}
	#privacy .checkBox label {
		display: inline-block;
		width: 24px;
		height: 24px;
		margin-right: 20px;
		vertical-align: middle;
		background: url("../../common/img/1x/check_off.png") left center no-repeat;
		background-size: 24px auto;
	}
	#privacy .checkBox label.checked {
		background: url("../../common/img/1x/check_on.png") left center no-repeat;
		background-size: 24px auto;
	}
		#privacy .checkBox label input[type="checkbox"] {
			width: 100%;
			height: 100%;
			opacity: 0;
		}
/* --------------------------------------------------
	日時選択
-------------------------------------------------- */
#dateSelect .contBox {
	position: relative;
	margin-top: 20px;
	padding: 20px;
}
	#dateSelect .contBox h3 {
		font-size: 14px;
		font-weight: 500;
		text-align: center;
	}
	#dateSelect .contBox h3 + ul {
		overflow: hidden;
		position: absolute;
		top: 20px;
		left: 0;
		width: 100%;
		padding: 0 20px;
	}
		#dateSelect .contBox h3 + ul li {
			width: 80px;
			padding: 10px;
			font-size: 12px;
			font-weight: 700;
			cursor: pointer;
			border-radius: 4px;
			border-bottom: 2px solid #D1D0CB;
		}
		#dateSelect .contBox h3 + ul li:active {
			border-top: 1px solid #FFFFFF;
			border-bottom: none;
		}
		#dateSelect .contBox h3 + ul li.inactive {
			pointer-events:none;
			opacity: 0.6;
		}
		#dateSelect .contBox h3 + ul .prev {
			float: left;
			text-align: right;
			background: url("../img/reserve/1x/icon_prev.png") 10px center no-repeat #E8E7E3;
			background-size: 10px auto;
		}
		#dateSelect .contBox h3 + ul .next {
			float: right;
			text-align: left;
			background: url("../img/reserve/1x/icon_next.png") 60px center no-repeat #E8E7E3;
			background-size: 10px auto;
		}
	#dateSelect .contBox table {
		overflow: hidden;
		width: 100%;
		max-width: 620px;
		margin-top: 40px;
		border-top: 1px solid #DDDDDD;
		border-left: 1px solid #DDDDDD;
	}
	#dateSelect .contBox .dispCalendar {
		display: block;
	}
		#dateSelect .contBox table tr {
			border-bottom: 1px solid #DDDDDD;
		}
		#dateSelect .contBox table th {
			padding: 10px 0;
			background: #F6F6F6;
		}
			#dateSelect .contBox table th,
			#dateSelect .contBox table td {
				width: 75px;
				text-align: center;
				vertical-align: middle;
				border-right: 1px solid #DDDDDD;
			}
			#dateSelect .contBox table thead th:first-child {
				width: 95px;
			}
			#dateSelect .contBox table .sunday,
			#dateSelect .contBox table .holiday {
				color: #ED785A;
			}
			#dateSelect .contBox table .saturday {
				color: #556FB5;
			}
			#dateSelect .contBox table td:hover {
				opacity: 0.6;
			}
			#dateSelect .contBox table td a {
				display: block;
				padding: 15px 0;
			}
			#dateSelect .contBox table .possible {
				background: #E8F3D2;
			}
				#dateSelect .contBox table .possible img {
					width: 14px;
					vertical-align: middle;
				}
				#dateSelect .contBox table .impossible img {
					width: 13px;
					vertical-align: middle;
				}
			#dateSelect .contBox table .impossible {
				padding: 15px 0;
			}
			#dateSelect .contBox table .duplicate {
				background: #FFB9C0;
				padding: 15px 0;
			}
				#dateSelect .contBox table .duplicate img {
					width: 14px;
					vertical-align: middle;
				}
/* --------------------------------------------------
	申込情報入力
-------------------------------------------------- */
#entry .chart + p em {
	color: #FF9900;
}
#entry .contBox {
	padding: 20px 20px 30px;
	font-size: 14px;
	font-weight: 500;
}
	#entry .contBox .dateTxt {
		margin-bottom: 20px;
		padding: 15px 20px;
		background: #F6F6F6;
	}
	#entry .contBox dl {
		display: table;
		width: 100%;
		margin-bottom: 20px;
	}
		#entry .contBox dl dt,
		#entry .contBox dl dd {
			display: table-cell;
		}
		#entry .contBox dl dt {
			width: 25%;
		}
		#entry .contBox dl dt:after {
			content: '※';
			margin-left: 0.2em;
			color: #FF9900;
			font-weight: 300;
		}
		#entry .contBox dl dd input {
			width: 300px;
			height: 40px;
			padding-left: 10px;
			font-family: HiraKakuPro-W3, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
			font-size: 14px;
			font-weight: normal;
			border: 1px solid #DDDDDD;
			border-radius: 4px;
			background: #FFFFFF;
			-webkit-appearance:none;
			-moz-appearance: none;
			appearance: none;
		}
		#entry .contBox dd input::-webkit-input-placeholder {
			color: #CCCCCC;
		}
		#entry .contBox .entryMail {
			margin-bottom: 40px;
		}
		#entry .contBox .entryMail dd input {
			width: 100%;
		}
		#entry .contBox .entryTel dd #tel_number::-webkit-outer-spin-button,
		#entry .contBox .entryTel dd #tel_number::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		#entry .contBox .entryTel dd #tel_number {
			-moz-appearance:textfield;
		}
	#entry .contBox dl + ul {
		margin-bottom: 30px;
		font-size: 12px;
		font-weight: inherit;
	}
		#entry .contBox dl + ul li {
			padding-left: 15px;
			background: url("../../common/img/1x/icon_list_grey.png") left 5px no-repeat;
			background-size: 6px auto;
		}
	#entry .contBox dl + ul + p {
		margin-bottom: 1em;
		font-size: 14px;
		font-weight: inherit;
	}

/* --------------------------------------------------
	申込内容確認・予約完了
-------------------------------------------------- */
.reserveCnt .contBox .infoTable {
	width: 100%;
	margin-top: 15px;
	margin-bottom: 30px;
	font-size: 14px;
	border-top: 1px solid #EEEEEE;
}
	.reserveCnt .contBox .infoTable tr {
		border-bottom: 1px solid #EEEEEE;
	}
	.reserveCnt .contBox .infoTable th,
	.reserveCnt .contBox .infoTable td {
		padding: 10px;
	}
	.reserveCnt .contBox .infoTable th {
		width: 20%;
		background: #F6F6F6;
	}
	.reserveCnt .contBox .infoTable td {
		font-weight: 300;
	}
		.reserveCnt .contBox .infoTable td dl {
			display: table;
			width: 100%;
		}
			.reserveCnt .contBox .infoTable td dl dt,
			.reserveCnt .contBox .infoTable td dl dd {
				display: table-cell;
			}
			.reserveCnt .contBox .infoTable td dl dt {
				width: 15%;
			}

/* 申込内容確認 */
#confirm .contBox {
	padding: 20px 20px 30px;
}
	#confirm .contBox table + p {
		margin-bottom: 1em;
		font-size: 14px;
	}
	#confirm .contBox table + p + ul {
		margin-bottom: 30px;
		font-size: 12px;
	}
		#confirm .contBox table + p + ul li {
			padding-left: 15px;
			background: url("../../common/img/1x/icon_list_grey.png") left 5px no-repeat;
			background-size: 6px auto;
		}
/* 予約完了 */
#complete .contBox {
	padding: 20px 20px 10px;
}
#complete .contBox h3 {
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: 700;
	color: #888888;
	text-align: center;
	letter-spacing: 0.2em;
}
#complete .contBox h3 + p {
	width: 278px;
	margin: 0 auto 20px;
}
#complete .contBox h3 + p + dl {
	margin-bottom: 20px;
	padding: 10px;
	font-size: 12px;
	text-align: center;
	background: #F6F6F6;
}
	#complete .contBox h3 + p + dl dt {
		font-size: 14px;
		font-weight: 500;
	}
#complete .contBox .btnGreen {
	width: 240px;
	/* margin-bottom: 30px; */
}
	#complete .contBox .btnGreen input {
		height: 40px;
		font-size: 14px;
		text-indent: 1em;
		background:  url("../img/reserve/1x/icon_calendar.png") 15px center no-repeat #90C31F;
		background-size: 16px auto;
	}
#complete .contBox .notification {
	text-align: center;
}
/*===================================================
	Retina対応
===================================================*/

@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi),only screen and ( min-resolution: 2dppx){

	/*タイトル*/
	.reserveCnt h2 {
		background: url("../../common/img/2x/bg_main_title.png") no-repeat;
		background-size: 250px auto;
	}

	/* リストアイコン(緑) */
	#privacy .contBox > dl > dt {
		background: url("../../common/img/2x/icon_disc_green.png") left 3px no-repeat;
		background-size: 14px auto;
	}

	/* チェックボックス */
	#privacy .checkBox label {
		background: url("../../common/img/2x/check_off.png") left center no-repeat;
		background-size: 24px auto;
	}
	#privacy .checkBox label.checked {
		background: url("../../common/img/2x/check_on.png") left center no-repeat;
		background-size: 24px auto;
	}

	/* 前へアイコン */
	#dateSelect .contBox h3 + ul .prev {
		background: url("../img/reserve/2x/icon_prev.png") 10px center no-repeat #E8E7E3;
		background-size: 10px auto;
	}

	/* 次へアイコン */
	#dateSelect .contBox h3 + ul .next {
		background: url("../img/reserve/2x/icon_next.png") 60px center no-repeat #E8E7E3;
		background-size: 10px auto;
	}

	/* リストアイコン(グレー) */
	#entry .contBox dl + ul li,
	#confirm .contBox table + p + ul li {
		background: url("../../common/img/2x/icon_list_grey.png") left 5px no-repeat;
		background-size: 6px auto;
	}

	/* カレンダーアイコン */
	#complete .contBox .btnGreen input {
		background:  url("../img/reserve/2x/icon_calendar.png") 15px center no-repeat #90C31F;
		background-size: 16px auto;
	}

}