@charset "utf-8";
/*------------------------------------------------
 * ほうぼう屋ツアー予約フォーム用CSS
 * booking.css
 * 
 * @create 2017/10/15
 * @author HOBO-YA TOUR
 * 
/*----------------------------------------------*/

/*---------------------------------------
 * 属性リセット
---------------------------------------*/
.booking-form input{
	font-weight:normal;
}

.booking-form abbr, .booking-form acronym{
	border:0;
}

.booking-form h3, .booking-form h4{
	font-weight:normal;
}

.booking-form *, .booking-form *::before, .booking-form *::after{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

/*---------------------------------------
 * 基本設定
---------------------------------------*/
.booking-form{
	position:relative;
	margin:0 auto;
	font-size:12px;
	height:100%;
	min-height:100%;
	height:auto !important;
	width:calc(100% - 30px);
}

.booking-form *{
	font-size:100%;
	line-height:180%;
}

.booking-form a{
	cursor:pointer;
	color:#1957ac;
}

.booking-form a > i.fa-external-link{
	margin-left:5px;
	color:#1957ac;
}

.booking-form label{
	display:inline-block;
	cursor:pointer;
}

/*---------------------------------------
 * フォーム要素（共通）
---------------------------------------*/
input[type='text'], input[type='date'], input[type='email'], input[type='tel'], input[type='password']{
	height:23px;
	text-indent:5px;
	display:inline-block;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	padding:0;
	margin:4px 0 0 0;
}

input[type="checkbox"]{
	border:1px solid #aaa;
	-webkit-appearance:none;
	-moz-transform:scale(1.3);
	position:relative;
	background:#fcfcfc;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #fcfcfc));
	background:linear-gradient(to bottom, #fff 0%, #fcfcfc 100%);
	vertical-align:-6px;
	border-radius:3px;
	width:14px;
	height:14px;
	display:block;
	float:left;
	margin:3px 6px 8px 0;
}

input[type="checkbox"]:checked{
	background:#fff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #eee));
	background:linear-gradient(to bottom, #fff 0%, #eee 100%);
	border:1px solid #360;
}

input[type="checkbox"]:checked::before{
	position:absolute;
	display:block;
	box-shadow:0 1px 1px rgba(0,0,0,0.5);
	content:"";
	background:#345;
	-webkit-transform:rotate(45deg);
	-webkit-transform-origin:right center;
	top:8px;
	left:0;
	width:5px;
	height:1px;
}

input[type="checkbox"]:checked::after{
	display:block;
	position:absolute;
	content:"";
	box-shadow:0 1px 1px rgba(0,0,0,0.5);
	background:#345;
	-webkit-transform:rotate(-53deg);
	-webkit-transform-origin:left center;
	top:9px;
	left:5px;
	width:9px;
	height:1px;
}


.agreement-checkbox input[type="checkbox"]{
	vertical-align:-7px;
	border-radius:3px;
	width:18px;
	height:18px;
}

.agreement-checkbox input[type="checkbox"]:checked::before{
	top:11px;
	left:0;
	width:7px;
	height:2px;
}

.agreement-checkbox input[type="checkbox"]:checked::after{
	top:12px;
	left:6px;
	width:13px;
	height:2px;
}

select{
	display:inline-block;
	height:23px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	font-size:100%;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	margin-top:3px;
	max-width:100%;
}

textarea{
	display:inline-block;
	padding:3px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:4px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
	margin:0;
}

.w50{width:50px;}
.w75{width:75px;}
.w100{width:100px;}
.w125{width:125px;}
.w150{width:150px;}
.w200{width:200px;}
.w250{width:250px;}
.w300{width:300px;}

::-webkit-input-placeholder{
	color:#aaa;
	opacity:1;
}

:-moz-placeholder{
	color:#aaa;
}

::-moz-placeholder{
	color:#aaa;
	opacity:1;
}

:-ms-input-placeholder{
	color:#aaa;
}

.ui-datepicker{
	z-index:10 !important;
}

/*-------------------------------------
 * ボタン共通定義
-------------------------------------*/
.button{
	-webkit-appearance:none;
	display:inline-block;
	text-decoration:none;
	text-shadow:none;
	text-align:center;
	border:1px solid #ddd;
	border-radius:6px;
	color:#fff;
	margin-top:-1px;
	font-weight:bold;
}

.type-default{
	padding-top:2px;
	margin:0;
	width:140px;
	height:28px;
	font-size:100%;
}

.type-large{
	padding:0;
	margin:0;
	width:240px;
	height:32px;
	font-size:121%;
}

.button:hover, .button-small:hover, .button-large:hover{
	cursor:pointer;
	text-decoration:none;
	text-shadow:none;
}

.button > i, .button-small > i, .button-large > i{
	color:#fff;
}

.case-submit{
	background:#3296b4;
	color:#fff;
}

.case-submit:hover{
	background:#6ed1e8;
}

.btn-center{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.btn-right{
	float:right;
}

.button:disabled{
	background:#ccc;
	cursor:default;
}

/*---------------------------------------
 * モーダル表示
---------------------------------------*/
#loading-div-background{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background:#eee;
	width:100%;
	height:100%;
	z-index:20;
}

#loading-div{
	width:300px;
	height:100px;
	text-align:left;
	position:absolute;
	left:50%;
	top:50%;
	padding:15px;
	margin-left:-150px;
	margin-top:-100px;
}

#loading-div img{
	display:block;
	margin:0 auto 20px auto;
}

#loading-div p{
	font-weight:bold;
}

/*---------------------------------------
 * フォームレイアウト
---------------------------------------*/
.booking-box-chapter{
	background:#fdffca;
	font-size:114%;
	padding:3px 7px;
	letter-spacing:1px;
	font-weight:bold;
	border-bottom:1px solid #eee;
}

.booking-box-additional{
	background:#fafafa;
	font-size:107%;
	padding:1px 7px;
	letter-spacing:1px;
	font-weight:bold;
	border-bottom:1px solid #eee;
}

.booking-box-odd{
	margin:15px auto;
	padding:15px 0 0 10px;
	border:1px solid #ccc;
	border-radius:5px;
	background:#faffff;
}

.booking-box-even{
	margin:15px auto;
	padding:15px 0 0 10px;
	border:1px solid #ccc;
	border-radius:5px;
	background:#fffafa;
}

#transfer_backward{
	display:none;
}

.booking-list{
	width:calc(100% - 14px);
	margin:15px auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}
 
.booking-list dt{
	display:inline-block;
	height:24px;
	width:140px;
	padding:4px 0 0 0;
	margin:0 0 15px 0;
	white-space:nowrap;
}
 
.booking-list dd{
	width:calc(100% - 150px);
	display:inline-block;
	margin:0 0 15px 10px;
}

.passenger-box br{
	display:none;
}

.passenger-box{
	margin:0 0 20px -1.5em;
}

.passenger-box li{
	white-space:nowrap;
}

.option-select{
	display:block;
	width:100%;
	margin:4px 0 16px 0;
	padding:0;
}

.option-select dt{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}

.option-select dt span{
	display:inline-block;
	margin-left:1em;
	color:#33f;
	font-size:93%;
}

.option-select dd{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}

.booking-inner-list{
	width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.booking-inner-list dt{
	display:inline-block;
	height:24px;
	width:140px;
	padding:3px 0 0 0;
	margin:0 0 3px 0;
}
 
.booking-inner-list dd{
	width:calc(100% - 150px);
	display:inline-block;
	margin:0 0 3px 10px;
}

.booking-required{
	font-size:93%;
	font-style:italic;
	color:#f33;
}

.booking-submit{
	width:calc(100% - 14px);
	margin:15px auto 60px auto;
}

.agreement-checkbox{
	text-align:center;
	font-size:121%;
}

.booking-button{
	text-align:center;
}

.booking-notice{
	display:inline-block;
	font-size:93%;
	color:#f33;
	margin-top:3px;
	line-height: 150%;
}

.booking-tips{
	display:block;
	font-size:93%;
	color:#33f;
	margin-top:3px;
	line-height: 150%;
}

.booking-notice-general{
	width:calc(100% - 14px);
	margin:-15px auto 30px auto;
	color:#f33;
}

.booking-additional{
	display:block;
	color:#33f;
	margin-left:5px;
}

.booking-remarks{
	width:calc(100% - 14px);
	height:100px;
	margin:15px 7px 30px 7px;
}

.booking-notice-box{
	width:calc(100% - 14px);
	display:block;
	background:#fff;
	margin:0 auto 15px auto;
}

.booking-notice-list{
	margin:-1em 0 30px -1.5em;
}

.booking-cancellation-content{
	width:calc(100% - 14px);
	margin:0 auto 15px auto;
}

.booking-cancellation-contact{
	width:calc(100% - 14px);
	text-align:center;
	border:1px solid #aaa;
	padding:5px 0;
	margin:0 auto 30px auto;
}

.booking-policy-title{
	width:calc(100% - 14px);
	display:block;
	margin:15px auto 0 auto;
	border-bottom:1px solid #aaa;	
}

.booking-policy-detail{
	width:calc(100% - 14px);
	margin:5px auto 15px auto;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.booking-policy-detail dt{
	width:calc(60% - 20px);
	display:inline-block;
	font-size:93%;
	margin:0 15px 5px 0;
	padding:0;
}

.booking-policy-detail dd{
	width:40%;
	display:inline-block;
	font-size:93%;
	margin:0 0 5px 0;
	padding:0;
}

.booking-cancellation-notice{
  list-style-type:none;
	width:calc(100% - 7px);
	margin:0 auto 30px 7px;
  padding-left: 0;
}

.booking-cancellation-notice li{
  display:table-row;
	color:#33f;
	font-size:93%;
}

.booking-cancellation-notice li:before{
	display:table-cell;
	content:"※";
}

.airtickect-policy-title{
	width:100%;
	display:block;
	margin:15px auto 0 7px;
}

.airtickect-policy-detail{
	width:calc(100% - 14px);
	margin:5px auto 15px 15px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-flex-direction:row;
}

.airtickect-policy-detail dt{
	width:calc(20% - 20px);
	display:inline-block;
	font-size:93%;
	margin:0 15px 5px 0;
	padding:0;
}

.airtickect-policy-detail dd{
	width:80%;
	display:inline-block;
	font-size:93%;
	margin:0 0 5px 0;
	padding:0;
}


/*---------------------------------------
 * カレンダー
---------------------------------------*/
.ui-datepicker{
	width:240px;
	max-width:240px;
}

.ui-widget{
	font-size:86%;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
	width:36%;
	margin:0 2px 0 7px;
}

/*---------------------------------------
 * 基本レイアウト
---------------------------------------*/
@media(max-width:480px){

	.booking-form{
		width: calc(100% - 20px);
	}

	.w300{
		max-width:100%;
	}

	.passenger-box{
		overflow:visible;
    -webkit-margin-start: -1em;
	}

	.passenger-box li{
		margin-bottom:1.5em;
		white-space:normal;
		display:list-item;
	}

	.passenger-box br{
		display:inline-block;
	}

	.passenger-box select{
		display:inline-block;
	}

	.passenger-box .w125{
		width:90px;
	}

	.passenger-box .w50{
		width:38px;
	}

	.booking-list{
		width:calc(100% - 14px);
		margin:10px auto 15px auto;
	}

	.booking-list dt{
		width:calc(100% - 14px);
		display:inline-block;
		height:24px;
		padding-top:5px;
		margin:0;
	}

	.booking-list dd{
		width:calc(100% - 14px);
		display:inline-block;
		margin:0 0 10px 0;
	}

	.booking-notice{
		line-height:150%;
	}

	.booking-inner-list{
		width:100%;
		margin:0 auto;
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		display:-webkit-flex;
		-webkit-flex-wrap:wrap;
		-webkit-flex-direction:row;
	}

	.booking-inner-list dt{
		display:inline-block;
		height:24px;
		width:140px;
		padding:3px 0 0 10px;
		margin:0 0 3px 0;
	}

	.booking-inner-list dd{
		width:calc(100% - 150px);
		display:inline-block;
		margin:0 0 3px 10px;
	}

	.booking-cancellation-content{
		font-size:93%;
	}

	.booking-cancellation-content span{
		display:block;
	}

	.booking-policy-detail dt{
		width:calc(100% - 120px);
		display:inline-block;
		font-size:93%;
		margin:0 15px 5px 0;
		padding:0;
	}

	.booking-policy-detail dd{
		width:100px;
		display:inline-block;
		font-size:93%;
		margin:0 0 5px 0;
		padding:0;
	}
}